@antv/s2
Version:
effective spreadsheet render core lib
574 lines • 22.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getTheme = exports.getDataCellTheme = exports.getColCellTheme = exports.getRowCellTheme = exports.getCornerCellTheme = void 0;
/* eslint-disable max-lines-per-function */
const lodash_1 = require("lodash");
const constant_1 = require("../common/constant");
const is_mobile_1 = require("../utils/is-mobile");
const theme_1 = require("../utils/theme");
const getCornerCellTheme = (palette, spreadsheet) => {
var _a, _b;
const { basicColors, others: otherColors } = palette;
const isTable = spreadsheet === null || spreadsheet === void 0 ? void 0 : spreadsheet.isTableMode();
const boldTextDefaultFontWeight = (0, is_mobile_1.isWindows)() ? 'bold' : 700;
return {
text: {
fontFamily: constant_1.FONT_FAMILY,
fontSize: 12,
fontWeight: boldTextDefaultFontWeight,
fill: basicColors[0],
opacity: 1,
textAlign: isTable ? 'center' : 'left',
textBaseline: 'middle',
},
bolderText: {
fontFamily: constant_1.FONT_FAMILY,
fontSize: 12,
fontWeight: boldTextDefaultFontWeight,
fill: basicColors[0],
opacity: 1,
textAlign: isTable ? 'center' : 'right',
textBaseline: 'middle',
},
measureText: {
fontFamily: constant_1.FONT_FAMILY,
fontSize: 12,
fontWeight: boldTextDefaultFontWeight,
fill: basicColors[0],
opacity: 1,
textAlign: 'left',
textBaseline: 'middle',
},
cell: {
// ----------- background color -----------
backgroundColor: basicColors[3],
backgroundColorOpacity: 1,
// ----------- border color --------------
horizontalBorderColor: basicColors[10],
horizontalBorderColorOpacity: 1,
verticalBorderColor: basicColors[10],
verticalBorderColorOpacity: 1,
// ----------- border width --------------
horizontalBorderWidth: 1,
verticalBorderWidth: 1,
// -------------- border dash -----------------
borderDash: [],
// -------------- layout -----------------
padding: {
top: constant_1.CELL_PADDING,
right: constant_1.CELL_PADDING,
bottom: constant_1.CELL_PADDING,
left: constant_1.CELL_PADDING,
},
/* ---------- interaction state ----------- */
interactionState: {
// -------------- hover -------------------
hover: {
backgroundColor: basicColors[4],
backgroundOpacity: 0.6,
},
// -------------- selected -------------------
selected: {
backgroundColor: basicColors[4],
backgroundOpacity: 0.6,
},
// -------------- unselected -------------------
unselected: {
backgroundOpacity: 0.3,
textOpacity: 0.3,
opacity: 0.3,
},
// -------------- prepare select --------------
prepareSelect: {
borderColor: basicColors[14],
borderOpacity: 1,
borderWidth: 1,
},
// -------------- searchResult -------------------
searchResult: {
backgroundColor: (_a = otherColors === null || otherColors === void 0 ? void 0 : otherColors.results) !== null && _a !== void 0 ? _a : basicColors[2],
backgroundOpacity: 1,
},
// -------------- highlight -------------------
highlight: {
backgroundColor: (_b = otherColors === null || otherColors === void 0 ? void 0 : otherColors.highlight) !== null && _b !== void 0 ? _b : basicColors[6],
backgroundOpacity: 1,
},
},
},
icon: {
fill: basicColors[0],
size: 10,
margin: {
right: 4,
left: 4,
},
},
};
};
exports.getCornerCellTheme = getCornerCellTheme;
const getRowCellTheme = (palette, spreadsheet) => {
var _a, _b;
const { basicColors, others: otherColors } = palette;
const isTable = spreadsheet === null || spreadsheet === void 0 ? void 0 : spreadsheet.isTableMode();
const boldTextDefaultFontWeight = (0, is_mobile_1.isWindows)() ? 'bold' : 700;
return {
seriesText: {
fontFamily: constant_1.FONT_FAMILY,
fontSize: 12,
fontWeight: 'normal',
fill: basicColors[14],
linkTextFill: basicColors[6],
opacity: 1,
textBaseline: 'middle',
textAlign: 'center',
},
measureText: {
fontFamily: constant_1.FONT_FAMILY,
fontSize: 12,
fontWeight: 'normal',
fill: basicColors[14],
linkTextFill: basicColors[6],
opacity: 1,
textAlign: isTable ? 'center' : 'left',
textBaseline: 'middle',
},
bolderText: {
fontFamily: constant_1.FONT_FAMILY,
fontSize: 12,
fontWeight: boldTextDefaultFontWeight,
fill: basicColors[14],
linkTextFill: basicColors[6],
opacity: 1,
textAlign: isTable ? 'center' : 'left',
textBaseline: 'middle',
},
text: {
fontFamily: constant_1.FONT_FAMILY,
fontSize: 12,
fontWeight: 'normal',
fill: basicColors[14],
linkTextFill: basicColors[6],
opacity: 1,
textBaseline: 'middle',
// default align center for row cell in table mode
textAlign: isTable ? 'center' : 'left',
},
cell: {
// ----------- background color -----------
backgroundColor: basicColors[1],
backgroundColorOpacity: 1,
// ----------- bottom border color --------------
horizontalBorderColor: basicColors[9],
horizontalBorderColorOpacity: 1,
verticalBorderColor: basicColors[9],
verticalBorderColorOpacity: 1,
// ----------- bottom border width --------------
horizontalBorderWidth: 1,
verticalBorderWidth: 1,
// -------------- border dash -----------------
borderDash: [],
// -------------- layout -----------------
padding: {
top: constant_1.CELL_PADDING,
right: constant_1.CELL_PADDING,
bottom: constant_1.CELL_PADDING,
left: constant_1.CELL_PADDING,
},
/* ---------- interaction state ----------- */
interactionState: {
// -------------- hover -------------------
hover: {
backgroundColor: basicColors[2],
backgroundOpacity: 0.6,
},
// -------------- selected -------------------
selected: {
backgroundColor: basicColors[2],
backgroundOpacity: 0.6,
},
// -------------- unselected -------------------
unselected: {
backgroundOpacity: 0.3,
textOpacity: 0.3,
opacity: 0.3,
},
// -------------- prepare select --------------
prepareSelect: {
borderColor: basicColors[14],
borderOpacity: 1,
borderWidth: 1,
},
// -------------- searchResult -------------------
searchResult: {
backgroundColor: (_a = otherColors === null || otherColors === void 0 ? void 0 : otherColors.results) !== null && _a !== void 0 ? _a : basicColors[2],
backgroundOpacity: 1,
},
// -------------- highlight -------------------
highlight: {
backgroundColor: (_b = otherColors === null || otherColors === void 0 ? void 0 : otherColors.highlight) !== null && _b !== void 0 ? _b : basicColors[6],
backgroundOpacity: 1,
},
},
},
icon: {
fill: basicColors[14],
size: 10,
margin: {
right: 4,
left: 4,
},
},
seriesNumberWidth: 80,
};
};
exports.getRowCellTheme = getRowCellTheme;
const getColCellTheme = (palette) => {
var _a, _b;
const { basicColors, others: otherColors } = palette;
const boldTextDefaultFontWeight = (0, is_mobile_1.isWindows)() ? 'bold' : 700;
return {
measureText: {
fontFamily: constant_1.FONT_FAMILY,
fontSize: 12,
fontWeight: 'normal',
fill: basicColors[0],
opacity: 1,
// 默认列头的数值字段和 dataCell 数值对齐
textAlign: 'right',
textBaseline: 'middle',
linkTextFill: basicColors[6],
},
bolderText: {
fontFamily: constant_1.FONT_FAMILY,
fontSize: 12,
fontWeight: boldTextDefaultFontWeight,
fill: basicColors[0],
opacity: 1,
textAlign: 'center',
textBaseline: 'middle',
linkTextFill: basicColors[6],
},
text: {
fontFamily: constant_1.FONT_FAMILY,
fontSize: 12,
fontWeight: 'normal',
fill: basicColors[0],
opacity: 1,
textAlign: 'center',
textBaseline: 'middle',
linkTextFill: basicColors[6],
},
cell: {
// ----------- background color -----------
backgroundColor: basicColors[3],
backgroundColorOpacity: 1,
// ----------- border color --------------
horizontalBorderColor: basicColors[10],
horizontalBorderColorOpacity: 1,
verticalBorderColor: basicColors[10],
verticalBorderColorOpacity: 1,
// ----------- border width --------------
horizontalBorderWidth: 1,
verticalBorderWidth: 1,
// -------------- border dash -----------------
borderDash: [],
// -------------- layout -----------------
padding: {
top: constant_1.CELL_PADDING,
right: constant_1.CELL_PADDING,
bottom: constant_1.CELL_PADDING,
left: constant_1.CELL_PADDING,
},
/* ---------- interaction state ----------- */
interactionState: {
// -------------- hover -------------------
hover: {
backgroundColor: basicColors[4],
backgroundOpacity: 0.6,
},
// -------------- selected -------------------
selected: {
backgroundColor: basicColors[4],
backgroundOpacity: 0.6,
},
// -------------- unselected -------------------
unselected: {
backgroundOpacity: 0.3,
textOpacity: 0.3,
opacity: 0.3,
},
// -------------- prepare select --------------
prepareSelect: {
borderColor: basicColors[14],
borderOpacity: 1,
borderWidth: 1,
},
// -------------- searchResult -------------------
searchResult: {
backgroundColor: (_a = otherColors === null || otherColors === void 0 ? void 0 : otherColors.results) !== null && _a !== void 0 ? _a : basicColors[2],
backgroundOpacity: 1,
},
// -------------- highlight -------------------
highlight: {
backgroundColor: (_b = otherColors === null || otherColors === void 0 ? void 0 : otherColors.highlight) !== null && _b !== void 0 ? _b : basicColors[6],
backgroundOpacity: 1,
},
},
},
icon: {
fill: basicColors[0],
size: 10,
margin: {
top: 6,
right: 4,
bottom: 6,
left: 4,
},
},
};
};
exports.getColCellTheme = getColCellTheme;
const getDataCellTheme = (palette) => {
var _a, _b;
const { basicColors, others: otherColors, semanticColors } = palette;
const boldTextDefaultFontWeight = (0, is_mobile_1.isWindows)() ? 'bold' : 700;
return {
bolderText: {
fontFamily: constant_1.FONT_FAMILY,
fontSize: 12,
fontWeight: boldTextDefaultFontWeight,
fill: basicColors[13],
opacity: 1,
textAlign: 'right',
textBaseline: 'middle',
linkTextFill: basicColors[6],
},
text: {
fontFamily: constant_1.FONT_FAMILY,
fontSize: 12,
fontWeight: 'normal',
fill: basicColors[13],
opacity: 1,
textAlign: 'right',
textBaseline: 'middle',
linkTextFill: basicColors[6],
},
cell: {
// ----------- background color -----------
crossBackgroundColor: basicColors[1],
backgroundColor: basicColors[8],
backgroundColorOpacity: 1,
// ----------- border color --------------
horizontalBorderColor: basicColors[9],
horizontalBorderColorOpacity: 1,
verticalBorderColor: basicColors[9],
verticalBorderColorOpacity: 1,
// ----------- border width --------------
horizontalBorderWidth: 1,
verticalBorderWidth: 1,
// -------------- layout -----------------
padding: {
top: constant_1.CELL_PADDING,
right: constant_1.CELL_PADDING,
bottom: constant_1.CELL_PADDING,
left: constant_1.CELL_PADDING,
},
/* ---------- interaction state ----------- */
interactionState: {
// -------------- hover -------------------
hover: {
backgroundColor: basicColors[2],
backgroundOpacity: 0.6,
},
// -------------- keep hover -------------------
hoverFocus: {
backgroundColor: basicColors[2],
backgroundOpacity: 0.6,
borderColor: basicColors[14],
borderWidth: 1,
borderOpacity: 1,
},
// -------------- selected -------------------
selected: {
backgroundColor: basicColors[2],
backgroundOpacity: 0.6,
},
// -------------- unselected -------------------
unselected: {
backgroundOpacity: 0.3,
textOpacity: 0.3,
opacity: 0.3,
},
// -------------- searchResult -------------------
searchResult: {
backgroundColor: (_a = otherColors === null || otherColors === void 0 ? void 0 : otherColors.results) !== null && _a !== void 0 ? _a : basicColors[2],
backgroundOpacity: 1,
},
// -------------- highlight -------------------
highlight: {
backgroundColor: (_b = otherColors === null || otherColors === void 0 ? void 0 : otherColors.highlight) !== null && _b !== void 0 ? _b : basicColors[6],
backgroundOpacity: 1,
},
// -------------- prepare select --------------
prepareSelect: {
borderColor: basicColors[14],
borderOpacity: 1,
borderWidth: 1,
},
},
},
// ------------- mini chart ---------------
miniChart: {
// ------------- line graph -----------------
line: {
point: {
size: 2.2,
fill: basicColors[6],
opacity: 1,
},
linkLine: {
size: 1.5,
fill: basicColors[6],
opacity: 0.6,
},
},
// ------------- bar graph -----------------
bar: {
intervalPadding: 4,
fill: basicColors[6],
opacity: 1,
},
// ------------- bullet graph -----------------
bullet: {
progressBar: {
widthPercent: 0.6,
height: 10,
innerHeight: 6,
},
comparativeMeasure: {
width: 1,
height: 12,
fill: basicColors[13],
opacity: 0.25,
},
rangeColors: {
good: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.green,
satisfactory: semanticColors.yellow,
bad: semanticColors.red,
},
backgroundColor: '#E9E9E9',
},
// ------------ interval bar graph -----------------
interval: {
height: constant_1.INTERVAL_BAR_HEIGHT,
fill: basicColors[7],
},
},
icon: {
fill: basicColors[13],
size: 10,
margin: {
right: 4,
left: 4,
},
},
};
};
exports.getDataCellTheme = getDataCellTheme;
/**
* @describe generate the theme according to the type
* @param themeCfg
*/
const getTheme = (themeCfg) => {
var _a;
const palette = (themeCfg === null || themeCfg === void 0 ? void 0 : themeCfg.palette) || (0, theme_1.getPalette)(themeCfg === null || themeCfg === void 0 ? void 0 : themeCfg.name);
const { basicColors } = palette;
const spreadsheet = themeCfg === null || themeCfg === void 0 ? void 0 : themeCfg.spreadsheet;
const customTheme = (_a = themeCfg === null || themeCfg === void 0 ? void 0 : themeCfg.getCustomTheme) === null || _a === void 0 ? void 0 : _a.call(themeCfg, palette, spreadsheet);
return (0, lodash_1.merge)({
// ------------- Headers -------------------
cornerCell: (0, exports.getCornerCellTheme)(palette, spreadsheet),
rowCell: (0, exports.getRowCellTheme)(palette, spreadsheet),
colCell: (0, exports.getColCellTheme)(palette),
// ------------- DataCell -------------------
dataCell: (0, exports.getDataCellTheme)(palette),
// ------------- MergedCell -------------------
mergedCell: (0, exports.getDataCellTheme)(palette),
// resize active area
resizeArea: {
size: 3,
background: basicColors[7],
backgroundOpacity: 0,
guideLineColor: basicColors[7],
guideLineDisableColor: 'rgba(0,0,0,0.25)',
guideLineDash: [3, 3],
/* ---------- interaction state ----------- */
interactionState: {
hover: {
backgroundColor: basicColors[7],
backgroundOpacity: 1,
},
},
},
// ------------- scrollBar -------------------
scrollBar: {
trackColor: 'rgba(0,0,0,0.01)',
thumbHoverColor: 'rgba(0,0,0,0.25)',
thumbColor: 'rgba(0,0,0,0.15)',
thumbHorizontalMinSize: 32,
thumbVerticalMinSize: 32,
size: (0, is_mobile_1.isMobile)() ? 3 : 6,
hoverSize: (0, is_mobile_1.isMobile)() ? 4 : 8,
lineCap: 'round',
},
// ------------- split line -----------------
splitLine: {
horizontalBorderColor: basicColors[12],
horizontalBorderColorOpacity: 0.2,
horizontalBorderWidth: 2,
verticalBorderColor: basicColors[11],
verticalBorderColorOpacity: 0.25,
verticalBorderWidth: 2,
showShadow: true,
shadowWidth: 8,
shadowColors: {
left: 'rgba(0,0,0,0.1)',
right: 'rgba(0,0,0,0)',
},
borderDash: [],
},
// ------------- prepareSelectMask -----------------
prepareSelectMask: {
backgroundColor: basicColors[5],
backgroundOpacity: 0.3,
},
// ------------- canvas background
background: {
color: basicColors[8],
opacity: 1,
},
empty: {
icon: {
fill: '',
width: 64,
height: 41,
margin: {
top: 0,
right: 0,
bottom: 24,
left: 0,
},
},
description: {
fontFamily: constant_1.FONT_FAMILY,
fontSize: 12,
fontWeight: 'normal',
fill: basicColors[14],
opacity: 1,
},
},
}, customTheme);
};
exports.getTheme = getTheme;
//# sourceMappingURL=index.js.map