@antv/g6-pc
Version:
A Graph Visualization Framework in JavaScript
179 lines (178 loc) • 7.19 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.mixColor = exports.getColorsWithSubjectColor = exports.getColorSetsBySubjectColors = void 0;
var _color = _interopRequireDefault(require("color"));
var _colors = require("@ant-design/colors");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
* get the mix color of backColor and frontColor with alpha
* @param backColor background color
* @param frontColor foreground color
* @param frontAlpha the opacity of foreground color
*/
var mixColor = exports.mixColor = function mixColor(backColor, frontColor, frontAlpha) {
var bc = (0, _color.default)(backColor);
var fc = (0, _color.default)(frontColor);
return (0, _color.default)([(1 - frontAlpha) * bc.red() + frontAlpha * fc.red(), (1 - frontAlpha) * bc.green() + frontAlpha * fc.green(), (1 - frontAlpha) * bc.blue() + frontAlpha * fc.blue()]).rgb();
};
var getColorsWithDefaultTheme = function getColorsWithDefaultTheme(subjectColor, backColor, disableColor) {
if (backColor === void 0) {
backColor = '#fff';
}
if (disableColor === void 0) {
disableColor = 'rgb(150, 150, 150)';
}
var subjectColor005 = mixColor(backColor, subjectColor, 0.05).rgb().toString();
var subjectColor01 = mixColor(backColor, subjectColor, 0.1).rgb().toString();
var subjectColor02 = mixColor(backColor, subjectColor, 0.2).rgb().toString();
var subjectColor04 = mixColor(backColor, subjectColor, 0.4).rgb().toString();
var disableColor002 = mixColor(backColor, disableColor, 0.02).rgb().toString();
var disableColor005 = mixColor(backColor, disableColor, 0.05).rgb().toString();
var disableColor01 = mixColor(backColor, disableColor, 0.1).rgb().toString();
var disableColor02 = mixColor(backColor, disableColor, 0.2).rgb().toString();
var disableColor03 = mixColor(backColor, disableColor, 0.3).rgb().toString();
var paletteFromSubject = (0, _colors.generate)(subjectColor, {
theme: 'default',
backgroundColor: backColor
});
var subjectHex = (0, _color.default)(subjectColor).hex().toLowerCase();
var subjectIdx = paletteFromSubject.indexOf(subjectHex);
var deeperSubject = subjectColor;
if (subjectIdx !== -1) {
deeperSubject = paletteFromSubject[subjectIdx + 1];
}
return {
// for nodes
mainStroke: subjectColor,
mainFill: subjectColor01,
activeStroke: subjectColor,
activeFill: subjectColor005,
inactiveStroke: subjectColor04,
inactiveFill: subjectColor005,
selectedStroke: subjectColor,
selectedFill: backColor,
highlightStroke: deeperSubject,
highlightFill: subjectColor02,
disableStroke: disableColor03,
disableFill: disableColor005,
// for edges
edgeMainStroke: disableColor03,
edgeActiveStroke: subjectColor,
edgeInactiveStroke: disableColor02,
edgeSelectedStroke: subjectColor,
edgeHighlightStroke: subjectColor,
edgeDisableStroke: disableColor01,
// for combos
comboMainStroke: disableColor03,
comboMainFill: disableColor002,
comboActiveStroke: subjectColor,
comboActiveFill: subjectColor005,
comboInactiveStroke: disableColor03,
comboInactiveFill: disableColor002,
comboSelectedStroke: subjectColor,
comboSelectedFill: disableColor002,
comboHighlightStroke: deeperSubject,
comboHighlightFill: disableColor002,
comboDisableStroke: disableColor02,
comboDisableFill: disableColor005
};
};
var getColorsWithDarkTheme = function getColorsWithDarkTheme(subjectColor, backColor, disableColor) {
if (backColor === void 0) {
backColor = '#fff';
}
if (disableColor === void 0) {
disableColor = '#777';
}
var subjectColor02 = mixColor(backColor, subjectColor, 0.2).rgb().toString();
var subjectColor03 = mixColor(backColor, subjectColor, 0.3).rgb().toString();
var subjectColor06 = mixColor(backColor, subjectColor, 0.6).rgb().toString();
var subjectColor08 = mixColor(backColor, subjectColor, 0.8).rgb().toString();
var disableColor02 = mixColor(backColor, disableColor, 0.2).rgb().toString();
var disableColor025 = mixColor(backColor, disableColor, 0.25).rgb().toString();
var disableColor03 = mixColor(backColor, disableColor, 0.3).rgb().toString();
var disableColor04 = mixColor(backColor, disableColor, 0.4).rgb().toString();
var disableColor05 = mixColor(backColor, disableColor, 0.5).rgb().toString();
var paletteFromSubject = (0, _colors.generate)(subjectColor, {
theme: 'dark',
backgroundColor: backColor
});
var subjectHex = (0, _color.default)(subjectColor).hex().toLowerCase();
var subjectIdx = paletteFromSubject.indexOf(subjectHex);
var deeperSubject = subjectColor;
if (subjectIdx !== -1) {
deeperSubject = paletteFromSubject[subjectIdx + 1];
}
return {
// for nodes
mainStroke: subjectColor08,
mainFill: subjectColor02,
activeStroke: subjectColor,
activeFill: subjectColor03,
inactiveStroke: subjectColor08,
inactiveFill: subjectColor02,
selectedStroke: subjectColor,
selectedFill: subjectColor02,
highlightStroke: subjectColor,
highlightFill: subjectColor06,
disableStroke: disableColor05,
disableFill: disableColor025,
// for edges
edgeMainStroke: disableColor,
edgeActiveStroke: subjectColor,
edgeInactiveStroke: disableColor,
edgeSelectedStroke: subjectColor,
edgeHighlightStroke: subjectColor,
edgeDisableStroke: disableColor03,
// for combos
comboMainStroke: disableColor04,
comboMainFill: disableColor025,
comboActiveStroke: subjectColor,
comboActiveFill: disableColor02,
comboInactiveStroke: disableColor04,
comboInactiveFill: disableColor025,
comboSelectedStroke: subjectColor,
comboSelectedFill: disableColor02,
comboHighlightStroke: deeperSubject,
comboHighlightFill: disableColor025,
comboDisableStroke: disableColor04,
comboDisableFill: disableColor02
};
};
/**
* get the set of colors according to the subject color and background color
* @param subjectColor the subject color
* @param backColor background color
* @param disableColor the color for disable state
*/
var getColorsWithSubjectColor = exports.getColorsWithSubjectColor = function getColorsWithSubjectColor(subjectColor, backColor, theme, disableColor) {
if (backColor === void 0) {
backColor = '#fff';
}
if (theme === void 0) {
theme = 'default';
}
if (disableColor === void 0) {
disableColor = 'rgb(150, 150, 150)';
}
if (theme === 'default') return getColorsWithDefaultTheme(subjectColor, backColor, 'rgb(150, 150, 150)');
return getColorsWithDarkTheme(subjectColor, backColor, '#777');
};
var getColorSetsBySubjectColors = exports.getColorSetsBySubjectColors = function getColorSetsBySubjectColors(subjectColors, backColor, theme, disableColor) {
if (backColor === void 0) {
backColor = '#fff';
}
if (theme === void 0) {
theme = 'default';
}
if (disableColor === void 0) {
disableColor = 'rgb(150, 150, 150)';
}
var sets = [];
subjectColors.forEach(function (sColor) {
sets.push(getColorsWithSubjectColor(sColor, backColor, theme, disableColor));
});
return sets;
};