Posted 6 April 2022, 6:29 pm EST
Sheet with custom cell type
import * as GC from '@grapecity/spread-sheets';
import { defaultG4MUITheme } from '@highradius/g4_ui_components/lib/components/theme/defaultTheme';
export const DEFAULT_HEIGHT = 28;
export const DEFAULT_WIDTH = 180;
const textPrototype: any = GC.Spread.Sheets.CellTypes.Text.prototype;
const ForecastModelCell = new GC.Spread.Sheets.CellTypes.Base();
let _oldPaintFn = ForecastModelCell.paint;
ForecastModelCell.paint = function (
ctx: CanvasRenderingContext2D,
value: any,
x: number,
y: number,
w: number,
h: number,
style: any,
options?: any,) {
// Paints a cell on the canvas.
style.hAlign = GC.Spread.Sheets.HorizontalAlign.left;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style.cellPadding = "0 0 0 10"
style.font = `${defaultG4MUITheme.typography.body1.fontStyle} ${defaultG4MUITheme.typography.body1.fontWeight} ${defaultG4MUITheme.typography.body1.fontSize} ${defaultG4MUITheme.typography.body1.fontFamily}`;
if (value && typeof value === "object") {
let indentaion = ((value.depth || 0) + 1) * 10;
style.cellPadding = `0 0 0 ${indentaion}`
const existingStyle = value.style;
if (existingStyle) {
let format = existingStyle.bold ? 'bold ' : '';
format += existingStyle.italic ? 'italic ' : '';
format += existingStyle.fontSize ? existingStyle.fontSize + 'px' : defaultG4MUITheme.typography.body1.fontSize;
style.font = `${format} ${defaultG4MUITheme.typography.body1.fontFamily}`;
style.foreColor = existingStyle.fontColor;
style.backColor = existingStyle.fillColor;
}
_oldPaintFn.apply(
this,
[ctx,
value.content,
x,
y,
w,
h,
style,
options]
);
}
else {
// default operation
style.cellPadding = "0 0 0 0"
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
_oldPaintFn.apply(this, arguments as any);
}
};
ForecastModelCell.setEditorValue = function (editorContext, value, context) {
var actualVal = context.sheet.getValue(context.row, context.col);
if (actualVal && typeof actualVal === "object") {
GC.Spread.Sheets.CellTypes.Text.prototype.setEditorValue.call(
this,
editorContext,
actualVal.content,
context
);
} else {
// default operation
textPrototype.setEditorValue.apply(
this,
arguments
);
}
};
ForecastModelCell.getEditorValue = function (editorContext, context) {
var actualVal = context.sheet.getValue(context.row, context.col);
var editorVal = textPrototype.getEditorValue.apply(
this,
arguments
);
if (actualVal && typeof actualVal === "object") {
actualVal.content = editorVal;
return actualVal;
} else {
// default operation
return editorVal;
}
};
const _oldWidthFn = ForecastModelCell.getAutoFitWidth;
ForecastModelCell.getAutoFitWidth = function () {
let minWidth = DEFAULT_WIDTH;
let width = _oldWidthFn.apply(this, arguments as any);
return Math.max(minWidth, width);
};
ForecastModelCell.getAutoFitHeight = function (val, text, cellStyle, zoomFactor,
context) {
let height = DEFAULT_HEIGHT;
const existingStyle = val && val.style;
if (existingStyle && existingStyle.fontSize) {
let fontSize = existingStyle.fontSize;
return fontSize > 32 ? 80 : fontSize > 23 ? 35 : height;
}
return height;
}
ForecastModelCell.format = function (value, format, formattedData, context)
{
if(value && value.content) {
return JSON.stringify(value);
} else {
return value;
}
}
export const forecastModelCell = ForecastModelCell;
export const forecastModelColumn = { cellType: forecastModelCell };
export const getForecastModelColumns = (colCount: number) => {
const cols = [];
for (let i = 0; i < colCount; i++) {
cols.push(forecastModelColumn);
}
return cols;
}
when we are trying to paste the cell data which we have copied after performing an undo operation the cell is getting populated with the content rather than the parsed data which is the expected outcome. Before pressing ctrl+z when the pasted result is =TOTAL() after pressing ctrl+z the cell value is content="TOTAL(),depth=0,“style={…}”
