@univerjs/engine-render 1.0.0-beta.1 → 1.0.0-beta.2

package/lib/cjs/index.js

@@ -3222,6 +3222,36 @@ var Transform = class Transform {
 	}
 };
 
+//#endregion
+//#region src/basics/transformer-config.ts
+const DEFAULT_TRANSFORMER_CONFIG = {
+	resizeEnabled: true,
+	rotateEnabled: true,
+	rotateAnchorOffset: 28,
+	rotateAnchorPosition: "bottom",
+	rotateLineEnabled: false,
+	rotateSize: 18,
+	rotateCornerRadius: 9,
+	rotateFill: "#ffffff",
+	rotateStroke: "#4086f4",
+	rotateStrokeWidth: 1,
+	rotateIconEnabled: true,
+	rotateIconStroke: "#4086f4",
+	rotateIconStrokeWidth: 1.25,
+	borderEnabled: true,
+	borderStroke: "#4086f4",
+	borderStrokeWidth: 1,
+	borderSpacing: 2,
+	anchorFill: "#ffffff",
+	anchorStroke: "#4086f4",
+	anchorStrokeWidth: 1.5,
+	anchorSize: 8,
+	anchorCornerRadius: 2,
+	anchorStyle: "canva",
+	keepRatio: true,
+	moveBoundaryEnabled: true
+};
+
 //#endregion
 //#region src/basics/zoom.ts
 const MIN_ZOOM_RATIO = .1;
@@ -4144,6 +4174,8 @@ var UniverRenderingContext2D = class {
 	constructor(context, options) {
 		_defineProperty(this, "__mode", "rendering");
 		_defineProperty(this, "_transformCache", void 0);
+		_defineProperty(this, "_bitmapMutationId", 0);
+		_defineProperty(this, "_bitmapMutationTrackingDepth", 0);
 		_defineProperty(this, "canvas", void 0);
 		_defineProperty(this, "_context", void 0);
 		_defineProperty(this, "_systemType", void 0);
@@ -4162,6 +4194,19 @@ var UniverRenderingContext2D = class {
 	setId(id) {
 		this._id = id;
 	}
+	detectBitmapMutation(callback) {
+		const mutationId = this._bitmapMutationId;
+		this._bitmapMutationTrackingDepth++;
+		try {
+			callback();
+		} finally {
+			this._bitmapMutationTrackingDepth--;
+		}
+		return mutationId !== this._bitmapMutationId;
+	}
+	_markBitmapMutation() {
+		if (this._bitmapMutationTrackingDepth > 0) this._bitmapMutationId++;
+	}
 	isContextLost() {
 		return this._context.isContextLost();
 	}
@@ -4391,7 +4436,9 @@ var UniverRenderingContext2D = class {
 		this._context.resetTransform();
 	}
 	drawFocusIfNeeded(...args) {
-		return this._context.drawFocusIfNeeded(...args);
+		const result = this._context.drawFocusIfNeeded(...args);
+		this._markBitmapMutation();
+		return result;
 	}
 	/**
 	* reset canvas context transform
@@ -4400,6 +4447,7 @@ var UniverRenderingContext2D = class {
 	reset() {
 		this._transformCache = null;
 		this._context.reset();
+		this._markBitmapMutation();
 	}
 	/**
 	* arc function.
@@ -4473,6 +4521,7 @@ var UniverRenderingContext2D = class {
 	*/
 	clearRect(x, y, width, height) {
 		this._context.clearRect(x, y, width, height);
+		this._markBitmapMutation();
 	}
 	/**
 	* clearRect function.
@@ -4546,6 +4595,7 @@ var UniverRenderingContext2D = class {
 		if (a.length === 3) _context.drawImage(args[0], args[1], args[2]);
 		else if (a.length === 5) _context.drawImage(args[0], args[1], args[2], args[3], args[4]);
 		else if (a.length === 9) _context.drawImage(args[0], args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8]);
+		this._markBitmapMutation();
 	}
 	/**
 	* ellipse function.
@@ -4559,6 +4609,7 @@ var UniverRenderingContext2D = class {
 	}
 	fill(...args) {
 		this._context.fill(...args);
+		this._markBitmapMutation();
 	}
 	/**
 	* fillRect function.
@@ -4566,6 +4617,7 @@ var UniverRenderingContext2D = class {
 	*/
 	fillRect(x, y, width, height) {
 		this._context.fillRect(x, y, width, height);
+		this._markBitmapMutation();
 	}
 	/**
 	* fillRect function precision.
@@ -4585,6 +4637,7 @@ var UniverRenderingContext2D = class {
 	*/
 	strokeRect(x, y, width, height) {
 		this._context.strokeRect(x, y, width, height);
+		this._markBitmapMutation();
 	}
 	/**
 	* strokeRect function precision.
@@ -4605,6 +4658,7 @@ var UniverRenderingContext2D = class {
 	fillText(text, x, y, maxWidth) {
 		if (maxWidth) this._context.fillText(text, x, y, maxWidth);
 		else this._context.fillText(text, x, y);
+		this._markBitmapMutation();
 	}
 	/**
 	* fillText function.
@@ -4618,6 +4672,7 @@ var UniverRenderingContext2D = class {
 			maxWidth = fixLineWidthByScale(maxWidth, scaleX);
 			this._context.fillText(text, x, y, maxWidth);
 		} else this._context.fillText(text, x, y);
+		this._markBitmapMutation();
 	}
 	/**
 	* measureText function.
@@ -4698,6 +4753,7 @@ var UniverRenderingContext2D = class {
 	*/
 	putImageData(imageData, dx, dy) {
 		this._context.putImageData(imageData, dx, dy);
+		this._markBitmapMutation();
 	}
 	/**
 	* quadraticCurveTo function.
@@ -4766,6 +4822,7 @@ var UniverRenderingContext2D = class {
 	stroke(path2d) {
 		if (path2d) this._context.stroke(path2d);
 		else this._context.stroke();
+		this._markBitmapMutation();
 	}
 	/**
 	* strokeText function.
@@ -4773,6 +4830,7 @@ var UniverRenderingContext2D = class {
 	*/
 	strokeText(text, x, y, maxWidth) {
 		this._context.strokeText(text, x, y, maxWidth);
+		this._markBitmapMutation();
 	}
 	/**
 	* strokeText function precision.
@@ -4897,7 +4955,7 @@ var Canvas = class {
 		this._canvasEle.style.outline = "0";
 		const context = this._canvasEle.getContext("2d");
 		if (context == null) throw new Error("context is not support");
-		if (props.mode === 1) this._context = new UniverPrintingContext(context);
+		if (props.mode === 1) this._context = new UniverPrintingContext(context, { canvasColorService: props.colorService });
 		else this._context = new UniverRenderingContext(context, { canvasColorService: props.colorService });
 		this.setSize(props.width, props.height, props.pixelRatio);
 	}
@@ -11958,8 +12016,10 @@ const SHAPE_OBJECT_ARRAY = [
 	"globalCompositeOperation",
 	"paintFirst",
 	"stroke",
+	"strokeOpacity",
 	"strokeScaleEnabled",
 	"fill",
+	"fillOpacity",
 	"fillAfterStrokeEnabled",
 	"hitStrokeWidth",
 	"strokeLineJoin",
@@ -11989,8 +12049,10 @@ var Shape = class extends BaseObject {
 		_defineProperty(this, "_globalCompositeOperation", "source-over");
 		_defineProperty(this, "_paintFirst", "fill");
 		_defineProperty(this, "_stroke", void 0);
+		_defineProperty(this, "_strokeOpacity", void 0);
 		_defineProperty(this, "_strokeScaleEnabled", false);
 		_defineProperty(this, "_fill", void 0);
+		_defineProperty(this, "_fillOpacity", void 0);
 		_defineProperty(this, "_fillAfterStrokeEnabled", false);
 		_defineProperty(this, "_hitStrokeWidth", 0);
 		_defineProperty(this, "_strokeLineJoin", "round");
@@ -12028,12 +12090,18 @@ var Shape = class extends BaseObject {
 	get stroke() {
 		return this._stroke;
 	}
+	get strokeOpacity() {
+		return this._strokeOpacity;
+	}
 	get strokeScaleEnabled() {
 		return this._strokeScaleEnabled;
 	}
 	get fill() {
 		return this._fill;
 	}
+	get fillOpacity() {
+		return this._fillOpacity;
+	}
 	get fillAfterStrokeEnabled() {
 		return this._fillAfterStrokeEnabled;
 	}
@@ -12099,6 +12167,7 @@ var Shape = class extends BaseObject {
 		if (!props.fill) return;
 		ctx.save();
 		this._setFillStyles(ctx, props);
+		ctx.globalAlpha *= props.fillOpacity ?? 1;
 		if (props.fillRule === "evenodd") ctx.fill("evenodd");
 		else ctx.fill();
 		ctx.restore();
@@ -12108,10 +12177,11 @@ var Shape = class extends BaseObject {
 	* @param {UniverRenderingContext} ctx SheetContext to render on
 	*/
 	static _renderStroke(ctx, props) {
-		const { stroke, strokeWidth, strokeScaleEnabled } = props;
+		const { stroke, strokeWidth } = props;
 		if (!stroke || strokeWidth === void 0 || !Number.isFinite(strokeWidth) || strokeWidth <= 0) return;
 		ctx.save();
 		this._setStrokeStyles(ctx, props);
+		ctx.globalAlpha *= props.strokeOpacity ?? 1;
 		ctx.stroke();
 		ctx.restore();
 	}
@@ -15412,13 +15482,14 @@ function getCustomDecorationStyle(customDecoration) {
 
 //#endregion
 //#region src/components/docs/layout/style/custom-range.ts
+const CUSTOM_RANGE_COLOR_TOKEN = "blue.600";
 function getCustomRangeStyle(customRange) {
 	if (customRange.rangeType === _univerjs_core.CustomRangeType.HYPERLINK || customRange.rangeType === _univerjs_core.CustomRangeType.MENTION || customRange.rangeType === _univerjs_core.CustomRangeType.CUSTOM) {
 		var _customRange$properti;
 		const preserveTextColor = ((_customRange$properti = customRange.properties) === null || _customRange$properti === void 0 ? void 0 : _customRange$properti.textColorMode) === "text";
 		return {
-			...customRange.active ?? true ? { ul: { s: _univerjs_core.BooleanNumber.TRUE } } : null,
-			...preserveTextColor ? null : { cl: { rgb: "#274fee" } }
+			...customRange.rangeType === _univerjs_core.CustomRangeType.HYPERLINK || (customRange.active ?? true) ? { ul: { s: _univerjs_core.BooleanNumber.TRUE } } : null,
+			...preserveTextColor ? null : { cl: { rgb: CUSTOM_RANGE_COLOR_TOKEN } }
 		};
 	}
 	return null;
@@ -15519,7 +15590,10 @@ function getLineHeightConfig(sectionBreakConfig, paragraphConfig) {
 	const gridType = sectionBreakConfig.gridType ?? (useWordStyleLineHeight ? _univerjs_core.GridType.DEFAULT : _univerjs_core.GridType.LINES);
 	const hasLineGrid = gridType === _univerjs_core.GridType.LINES || gridType === _univerjs_core.GridType.LINES_AND_CHARS;
 	const defaultSnapToGrid = useWordStyleLineHeight && (!hasLineGrid || isInsideTable && adjustLineHeightInTable !== _univerjs_core.BooleanNumber.TRUE) ? _univerjs_core.BooleanNumber.FALSE : _univerjs_core.BooleanNumber.TRUE;
-	const { lineSpacing = 0, spacingRule = _univerjs_core.SpacingRule.AUTO, snapToGrid = defaultSnapToGrid } = paragraphStyle;
+	const { lineSpacing: requestedLineSpacing = 0, spacingRule: requestedSpacingRule = _univerjs_core.SpacingRule.AUTO, snapToGrid = defaultSnapToGrid } = paragraphStyle;
+	const hasValidLineSpacing = Number.isFinite(requestedLineSpacing) && requestedLineSpacing > 0;
+	const lineSpacing = hasValidLineSpacing ? requestedLineSpacing : 0;
+	const spacingRule = hasValidLineSpacing ? requestedSpacingRule : _univerjs_core.SpacingRule.AUTO;
 	let lineSpacingApply = lineSpacing;
 	if (useWordStyleLineHeight && lineSpacing === 0 && spacingRule === _univerjs_core.SpacingRule.AUTO) lineSpacingApply = 1;
 	else if (!useWordStyleLineHeight && (gridType === _univerjs_core.GridType.LINES || gridType === _univerjs_core.GridType.LINES_AND_CHARS) && lineSpacing === 0 && spacingRule === _univerjs_core.SpacingRule.AUTO) lineSpacingApply = 1;
@@ -18431,24 +18505,15 @@ function allocateHorizontalWidths(columns, contentWidth) {
 }
 function compressToFit(widths, minWidths, overflow) {
 	const nextWidths = [...widths];
-	let remainingOverflow = overflow;
-	let flexibleIndexes = getFlexibleIndexes(nextWidths, minWidths);
-	while (remainingOverflow > 0 && flexibleIndexes.length > 0) {
-		const totalShrink = flexibleIndexes.reduce((sum, item) => sum + item.shrink, 0);
-		for (const item of flexibleIndexes) {
-			const shrink = Math.min(item.shrink, remainingOverflow * item.shrink / totalShrink);
-			nextWidths[item.index] -= shrink;
-			remainingOverflow -= shrink;
-		}
-		flexibleIndexes = getFlexibleIndexes(nextWidths, minWidths);
-	}
-	return nextWidths;
-}
-function getFlexibleIndexes(widths, minWidths) {
-	return widths.map((width, index) => ({
+	const flexibleIndexes = nextWidths.map((width, index) => ({
 		index,
 		shrink: Math.max(0, width - minWidths[index])
 	})).filter((item) => item.shrink > 0);
+	const totalShrink = flexibleIndexes.reduce((sum, item) => sum + item.shrink, 0);
+	const appliedOverflow = Math.min(overflow, totalShrink);
+	if (appliedOverflow <= 0 || totalShrink <= 0) return nextWidths;
+	for (const item of flexibleIndexes) nextWidths[item.index] -= appliedOverflow * item.shrink / totalShrink;
+	return nextWidths;
 }
 function getMinWidth(column) {
 	var _column$minWidth;
@@ -20023,7 +20088,17 @@ let SpreadsheetSkeleton = class SpreadsheetSkeleton extends _univerjs_core.Sheet
 		_defineProperty(this, "_handleBorderMatrix", new _univerjs_core.ObjectMatrix());
 		_defineProperty(this, "_showGridlines", _univerjs_core.BooleanNumber.TRUE);
 		_defineProperty(this, "_gridlinesColor", void 0);
+		_defineProperty(this, "_defaultGridlinesColor", void 0);
 		_defineProperty(this, "_scene", null);
+		const themeService = _injector.get(_univerjs_core.ThemeService);
+		this.disposeWithMe(themeService.currentTheme$.subscribe(() => {
+			var _this$_scene, _this$_scene2;
+			const gray200 = themeService.getColorFromTheme("gray.200");
+			const gray900 = themeService.getColorFromTheme("gray.900");
+			this._defaultGridlinesColor = _univerjs_core.ColorKit.mix(gray200, gray900, .07).toHexString();
+			(_this$_scene = this._scene) === null || _this$_scene === void 0 || _this$_scene.getViewports().forEach((viewport) => viewport.markDirty(true));
+			(_this$_scene2 = this._scene) === null || _this$_scene2 === void 0 || _this$_scene2.makeDirty(true);
+		}));
 		this._updateLayout();
 		this.disposeWithMe(this._contextService.subscribeContextValue$(RENDER_RAW_FORMULA_KEY).pipe((0, rxjs.startWith)(false), (0, rxjs.distinctUntilChanged)()).subscribe((renderRaw) => {
 			this._renderRawFormula = renderRaw;
@@ -20077,6 +20152,9 @@ let SpreadsheetSkeleton = class SpreadsheetSkeleton extends _univerjs_core.Sheet
 	get gridlinesColor() {
 		return this._gridlinesColor;
 	}
+	get defaultGridlinesColor() {
+		return this._defaultGridlinesColor;
+	}
 	dispose() {
 		super.dispose();
 		this._drawingRange = {
@@ -22098,6 +22176,15 @@ var Border$1 = class extends docExtension {
 };
 DocumentsSpanAndLineExtensionRegistry.add(new Border$1());
 
+//#endregion
+//#region src/components/docs/layout/style/color.ts
+const THEME_COLOR_TOKEN_PATTERN = /^[a-z][a-z0-9-]*\.\d+$/i;
+function getColorStyleForCanvas(color) {
+	const rgb = color === null || color === void 0 ? void 0 : color.rgb;
+	if (rgb && THEME_COLOR_TOKEN_PATTERN.test(rgb)) return rgb;
+	return (0, _univerjs_core.getColorStyle)(color);
+}
+
 //#endregion
 //#region src/components/docs/extensions/font-and-base-line.ts
 const UNIQUE_KEY$1 = "DefaultDocsFontAndBaseLineExtension";
@@ -22142,7 +22229,7 @@ var FontAndBaseLine = class extends docExtension {
 			}
 		}
 		const { cl: colorStyle, va: baselineOffset, textFill, glow, outerShadow } = textStyle;
-		const fontColor = (0, _univerjs_core.getColorStyle)(colorStyle) || "rgb(0,0,0)";
+		const fontColor = getColorStyleForCanvas(colorStyle) || "rgb(0,0,0)";
 		if (baselineOffset === _univerjs_core.BaselineOffset.SUPERSCRIPT) spanPointWithFont.y += -bBox.spo;
 		else if (baselineOffset === _univerjs_core.BaselineOffset.SUBSCRIPT) spanPointWithFont.y += bBox.sbo;
 		const drawText = () => {
@@ -22462,7 +22549,7 @@ var Line$1 = class extends docExtension {
 		const lineAlignOffset = isAccounting ? Vector2.create(0, alignOffset.y) : alignOffset;
 		const { centerAngle: centerAngleDeg = 0, vertexAngle: vertexAngleDeg = 0 } = renderConfig;
 		ctx.save();
-		ctx.strokeStyle = (c === _univerjs_core.BooleanNumber.TRUE ? (0, _univerjs_core.getColorStyle)((_glyph$ts = glyph.ts) === null || _glyph$ts === void 0 ? void 0 : _glyph$ts.cl) : (0, _univerjs_core.getColorStyle)(colorStyle)) || "rgb(0,0,0)";
+		ctx.strokeStyle = (c === _univerjs_core.BooleanNumber.TRUE ? getColorStyleForCanvas((_glyph$ts = glyph.ts) === null || _glyph$ts === void 0 ? void 0 : _glyph$ts.cl) : getColorStyleForCanvas(colorStyle)) || "rgb(0,0,0)";
 		this._setLineType(ctx, lineType ?? _univerjs_core.TextDecoration.SINGLE, lineWidth);
 		startY += this._isDouble(lineType) ? -.8 : 0;
 		const centerAngle = degToRad(centerAngleDeg);
@@ -23061,7 +23148,7 @@ var Documents = class Documents extends DocComponent {
 					} else {
 						this._drawLiquid.translateSave();
 						this._drawLiquid.translateLine(line, true, true);
-						this._drawLineBackground(ctx, nestedPage, line, column.width);
+						this._drawLineBackground(ctx, nestedPage, line, column.width, parentPage.marginLeft, parentPage.marginTop);
 						const divideLength = divides.length;
 						for (let i = 0; i < divideLength; i++) {
 							const divide = divides[i];
@@ -23346,6 +23433,11 @@ const CUSTOM_EXTENSION_KEY = "DefaultCustomExtension";
 const MARKER_EXTENSION_KEY = "DefaultMarkerExtension";
 const RANGE_PROTECTION_VIEW_EXTENSION_KEY = "RANGE_PROTECTION_CAN_VIEW_RENDER_EXTENSION_KEY";
 const RANGE_PROTECTION_HIDDEN_EXTENSION_KEY = "RANGE_PROTECTION_CAN_NOT_VIEW_RENDER_EXTENSION_KEY";
+const PRINTING_GRIDLINES_COLOR = getColor([
+	214,
+	216,
+	219
+]);
 function pushSparseCellRange(ranges, row, col) {
 	const last = ranges[ranges.length - 1];
 	if (last && last.startRow === row && last.endRow === row && last.endColumn + 1 === col) {
@@ -23572,7 +23664,6 @@ var Spreadsheet = class extends SheetComponent {
 			extension.draw(ctx, parentScale, spreadsheetSkeleton, extensionDiffRanges, {
 				viewRanges: extensionViewRanges,
 				checkOutOfViewBound: true,
-				fontRenderRanges: extension === this._fontExtension && !isMergeRepair ? spreadsheetSkeleton.incrementalFontRenderRanges : void 0,
 				hasMergeData,
 				viewportKey: viewportInfo.viewportKey,
 				viewBound: viewportInfo.cacheBound,
@@ -23956,11 +24047,7 @@ var Spreadsheet = class extends SheetComponent {
 		if (!rowHeightAccumulation || !columnWidthAccumulation || columnTotalWidth === void 0 || rowTotalHeight === void 0) return;
 		ctx.save();
 		ctx.setLineWidthByPrecision(1);
-		const defaultGridlinesColor = ctx.__mode === "printing" ? getColor([
-			214,
-			216,
-			219
-		]) : "mix(gray.200, gray.900, 0.07)";
+		const defaultGridlinesColor = ctx.__mode === "printing" ? PRINTING_GRIDLINES_COLOR : spreadsheetSkeleton.defaultGridlinesColor;
 		ctx.strokeStyle = gridlinesColor ?? ctx.renderConfig.gridlinesColor ?? defaultGridlinesColor;
 		const columnWidthAccumulationLength = columnWidthAccumulation.length;
 		const rowHeightAccumulationLength = rowHeightAccumulation.length;
@@ -24305,7 +24392,12 @@ function scrollAndClearCanvas(ctx, pixelRatio, scrollRenderInfos, dirtyBounds) {
 		const targetY = (bounds.top + Math.max(0, offsetY)) * pixelRatio;
 		const pixelCopyWidth = copyWidth * pixelRatio;
 		const pixelCopyHeight = copyHeight * pixelRatio;
+		ctx.save();
+		ctx.beginPath();
+		ctx.rect(targetX, targetY, pixelCopyWidth, pixelCopyHeight);
+		ctx.clip();
 		ctx.drawImage(ctx.canvas, sourceX, sourceY, pixelCopyWidth, pixelCopyHeight, targetX, targetY, pixelCopyWidth, pixelCopyHeight);
+		ctx.restore();
 	}
 	clearCanvasBounds(ctx, pixelRatio, dirtyBounds);
 	ctx.restore();
@@ -26656,8 +26748,10 @@ var ScrollBar = class ScrollBar extends _univerjs_core.Disposable {
 		_defineProperty(this, "_thumbDefaultBackgroundColor", "gray.300");
 		_defineProperty(this, "_thumbHoverBackgroundColor", "gray.400");
 		_defineProperty(this, "_thumbActiveBackgroundColor", "gray.500");
-		_defineProperty(this, "_trackBackgroundColor", "alpha(white, 0.5)");
-		_defineProperty(this, "_trackBorderColor", "alpha(white, 0.7)");
+		_defineProperty(this, "_trackBackgroundColor", "gray.0");
+		_defineProperty(this, "_trackBorderColor", "gray.0");
+		_defineProperty(this, "_trackBackgroundOpacity", .5);
+		_defineProperty(this, "_trackBorderOpacity", .7);
 		_defineProperty(this, "_trackThickness", DEFAULT_TRACK_SIZE);
 		_defineProperty(this, "_vThumbMargin", DEFAULT_THUMB_MARGIN);
 		_defineProperty(this, "_hThumbMargin", DEFAULT_THUMB_MARGIN);
@@ -26686,6 +26780,8 @@ var ScrollBar = class ScrollBar extends _univerjs_core.Disposable {
 			if (props[key] !== void 0) this[`_${key}`] = props[key];
 		});
 		if (_univerjs_core.Tools.isDefine(props.thumbBackgroundColor)) this._thumbDefaultBackgroundColor = props.thumbBackgroundColor;
+		if (_univerjs_core.Tools.isDefine(props.trackBackgroundColor)) this._trackBackgroundOpacity = 1;
+		if (_univerjs_core.Tools.isDefine(props.trackBorderColor)) this._trackBorderOpacity = 1;
 		if (_univerjs_core.Tools.isDefine(props.barSize)) this._trackThickness = props.barSize;
 		if (_univerjs_core.Tools.isDefine(props.barBorder)) this._trackBorderThickness = props.barBorder;
 		if (_univerjs_core.Tools.isDefine(props.thumbMargin)) {
@@ -27000,8 +27096,10 @@ var ScrollBar = class ScrollBar extends _univerjs_core.Disposable {
 		if (this._enableHorizontal) {
 			this.horizonScrollTrack = new Rect("__horizonBarRect__", {
 				fill: this._trackBackgroundColor,
+				fillOpacity: this._trackBackgroundOpacity,
 				strokeWidth: this._trackBorderThickness,
-				stroke: this._trackBorderColor
+				stroke: this._trackBorderColor,
+				strokeOpacity: this._trackBorderOpacity
 			});
 			this.horizonThumbRect = new Rect("__horizonThumbRect__", {
 				radius: 6,
@@ -27011,8 +27109,10 @@ var ScrollBar = class ScrollBar extends _univerjs_core.Disposable {
 		if (this._enableVertical) {
 			this.verticalScrollTrack = new Rect("__verticalBarRect__", {
 				fill: this._trackBackgroundColor,
+				fillOpacity: this._trackBackgroundOpacity,
 				strokeWidth: this._trackBorderThickness,
-				stroke: this._trackBorderColor
+				stroke: this._trackBorderColor,
+				strokeOpacity: this._trackBorderOpacity
 			});
 			this.verticalThumbRect = new Rect("__verticalThumbRect__", {
 				radius: 6,
@@ -27021,8 +27121,10 @@ var ScrollBar = class ScrollBar extends _univerjs_core.Disposable {
 		}
 		if (this._enableHorizontal && this._enableVertical) this.placeholderBarRect = new Rect("__placeholderBarRect__", {
 			fill: this._trackBackgroundColor,
+			fillOpacity: this._trackBackgroundOpacity,
 			strokeWidth: this._trackBorderThickness,
-			stroke: this._trackBorderColor
+			stroke: this._trackBorderColor,
+			strokeOpacity: this._trackBorderOpacity
 		});
 	}
 	_initialVerticalEvent() {
@@ -27968,68 +28070,28 @@ var DumbCanvasColorService = class {
 		return color;
 	}
 };
-const DARK_RENDER_COLOR_OVERRIDES = {
-	"#17212b": "#e2e8f0",
-	"#64748b": "#94a3b8",
-	"#d9e0e7": "#253044",
-	"#edf1f5": "#1b2535",
-	"#eef2f6": "#1b2535",
-	"#f2f5f8": "#101827",
-	"#f3f6fa": "#18243a",
-	"#f4f8ff": "#172a46",
-	"#f5f9ff": "#12233a",
-	"#f7f9fb": "#0d1422",
-	"#f7f9fc": "#0d1422",
-	"#f8fafc": "#0f172a",
-	"#fbfcfd": "#07111f",
-	"#fcfdff": "#050914",
-	"#e8f1ff": "#173a69",
-	"#eaf5ff": "#12315a",
-	"#dbeafe": "#1e3a8a",
-	"#bfdbfe": "#60a5fa",
-	"#93c5fd": "#60a5fa",
-	"#8eb6f5": "#60a5fa",
-	"#60a5fa": "#60a5fa",
-	"#2563eb": "#60a5fa",
-	"#1d64d8": "#93c5fd",
-	"#1d5cff": "#60a5fa",
-	"#0f766e": "#2dd4bf",
-	"#d7f4ef": "#134e4a",
-	"rgba(37,99,235,0.05)": "rgba(96,165,250,0.16)",
-	"rgba(37,99,235,0.06)": "rgba(96,165,250,0.18)",
-	"rgba(37,99,235,0.08)": "rgba(96,165,250,0.22)",
-	"rgba(37,99,235,0.12)": "rgba(96,165,250,0.26)",
-	"rgba(37,99,235,0.18)": "rgba(96,165,250,0.30)",
-	"rgba(37,99,235,0.28)": "rgba(96,165,250,0.38)",
-	"rgba(239,246,255,0.88)": "rgba(30,64,175,0.72)",
-	"rgba(148,163,184,0.45)": "rgba(148,163,184,0.52)"
-};
-const COLOR_MIX_REGEXP = /^mix\(\s*([^,()]+)\s*,\s*([^,()]+)\s*,\s*(0(?:\.\d+)?|1(?:\.0+)?)\s*\)$/;
-const COLOR_ALPHA_REGEXP = /^alpha\(\s*([^,()]+)\s*,\s*(0(?:\.\d+)?|1(?:\.0+)?)\s*\)$/;
 let CanvasColorService = class CanvasColorService extends _univerjs_core.Disposable {
 	constructor(_themeService) {
 		super();
 		this._themeService = _themeService;
 		_defineProperty(this, "_darkModeCache", /* @__PURE__ */ new Map());
-		_defineProperty(this, "_resolvedColorCache", /* @__PURE__ */ new Map());
+		_defineProperty(this, "_resolvedThemeColors", /* @__PURE__ */ new Map());
 		_defineProperty(this, "_invertAlgo", _univerjs_core.invertColorByMatrix);
-		this.disposeWithMe(this._themeService.currentTheme$.subscribe(() => {
-			this._resolvedColorCache.clear();
+		this.disposeWithMe(this._themeService.currentTheme$.subscribe((theme) => {
+			this._cacheThemeColors(theme);
 			this._darkModeCache.clear();
 		}));
 	}
 	getRenderColor(inputColor) {
-		const color = this._resolveColor(inputColor);
+		const color = this._resolvedThemeColors.get(inputColor) ?? inputColor;
 		if (!this._themeService.darkMode) return color;
 		if (this._darkModeCache.has(color)) return this._darkModeCache.get(color);
-		if (normalizeRenderColor(color) === "transparent") {
+		if (color.trim().toLowerCase() === "transparent") {
 			this._darkModeCache.set(color, "transparent");
 			return "transparent";
 		}
 		let cachedColor = "";
-		const mappedColor = getDarkRenderColorOverride(color);
-		if (mappedColor) cachedColor = mappedColor;
-		else if (color.startsWith("#")) {
+		if (color.startsWith("#")) {
 			cachedColor = rgbToHex(this._invertAlgo(hexToRgb(color)));
 			if (color.length === 5) {
 				const alpha = color.charAt(4);
@@ -28058,50 +28120,12 @@ let CanvasColorService = class CanvasColorService extends _univerjs_core.Disposa
 		this._darkModeCache.set(color, cachedColor);
 		return cachedColor;
 	}
-	_resolveColor(inputColor) {
-		const cachedColor = this._resolvedColorCache.get(inputColor);
-		if (cachedColor !== void 0) return cachedColor;
-		const mixMatch = inputColor.match(COLOR_MIX_REGEXP);
-		if (mixMatch) {
-			const color1 = this._resolveThemeColor(mixMatch[1].trim());
-			const color2 = this._resolveThemeColor(mixMatch[2].trim());
-			const amount = Number(mixMatch[3]);
-			const color = _univerjs_core.ColorKit.mix(color1, color2, amount).toHexString();
-			this._resolvedColorCache.set(inputColor, color);
-			return color;
-		}
-		const alphaMatch = inputColor.match(COLOR_ALPHA_REGEXP);
-		if (alphaMatch) {
-			const colorKit = new _univerjs_core.ColorKit(this._resolveThemeColor(alphaMatch[1].trim()));
-			if (!colorKit.isValid) throw new Error(`[CanvasColorService]: illegal color "${inputColor}"`);
-			const color = colorKit.setAlpha(Number(alphaMatch[2])).toRgbString();
-			this._resolvedColorCache.set(inputColor, color);
-			return color;
-		}
-		if (inputColor.trim().startsWith("alpha(")) throw new Error(`[CanvasColorService]: illegal color "${inputColor}"`);
-		const color = this._resolveThemeColor(inputColor);
-		if (color !== inputColor) this._resolvedColorCache.set(inputColor, color);
-		return color;
-	}
-	_resolveThemeColor(inputColor) {
-		let color = inputColor;
-		if (color.includes(".")) {
-			const themeColor = this._themeService.getColorFromTheme(color);
-			if (typeof themeColor === "string" && this._themeService.isValidThemeColor(color)) color = themeColor;
-		}
-		return color;
+	_cacheThemeColors(theme) {
+		this._resolvedThemeColors.clear();
+		for (const [paletteName, palette] of Object.entries(theme)) for (const [tokenName, color] of Object.entries(palette)) if (typeof color === "string") this._resolvedThemeColors.set(`${paletteName}.${tokenName}`, color);
 	}
 };
 CanvasColorService = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_core.ThemeService))], CanvasColorService);
-function getDarkRenderColorOverride(color) {
-	const normalized = normalizeRenderColor(color);
-	return DARK_RENDER_COLOR_OVERRIDES[normalized] ?? null;
-}
-function normalizeRenderColor(color) {
-	const trimmed = color.trim().toLowerCase();
-	if (trimmed.startsWith("rgb")) return trimmed.replace(/\s+/g, "");
-	return trimmed;
-}
 function hexToRgb(_hex) {
 	const hex = _hex.replace(/^#/, "");
 	let r;
@@ -28769,7 +28793,7 @@ Engine = __decorate([__decorateParam(2, ICanvasColorService)], Engine);
 //#endregion
 //#region package.json
 var name = "@univerjs/engine-render";
-var version = "1.0.0-beta.1";
+var version = "1.0.0-beta.2";
 
 //#endregion
 //#region src/config/config.ts
@@ -29224,7 +29248,6 @@ const DEFAULT_TRANSFORMER_LAYER_INDEX = 2;
 const MINI_WIDTH_LIMIT = 20;
 const MINI_HEIGHT_LIMIT = 20;
 const DEFAULT_CONTROL_PLUS_INDEX = 5e3;
-const SINGLE_ACTIVE_OBJECT_TYPE_MAP = /* @__PURE__ */ new Set([6]);
 const ROTATE_ICON_SIZE = 14;
 var TransformerRotateIcon = class extends Rect {
 	_draw(ctx) {
@@ -29278,32 +29301,32 @@ var Transformer = class extends _univerjs_core.Disposable {
 		_defineProperty(this, "hoverEnabled", false);
 		_defineProperty(this, "hoverEnterFunc", void 0);
 		_defineProperty(this, "hoverLeaveFunc", void 0);
-		_defineProperty(this, "resizeEnabled", true);
-		_defineProperty(this, "rotateEnabled", true);
+		_defineProperty(this, "resizeEnabled", DEFAULT_TRANSFORMER_CONFIG.resizeEnabled);
+		_defineProperty(this, "rotateEnabled", DEFAULT_TRANSFORMER_CONFIG.rotateEnabled);
 		_defineProperty(this, "rotationSnaps", []);
 		_defineProperty(this, "rotationSnapTolerance", 5);
-		_defineProperty(this, "rotateAnchorOffset", 50);
-		_defineProperty(this, "rotateAnchorPosition", "top");
-		_defineProperty(this, "rotateLineEnabled", true);
-		_defineProperty(this, "rotateSize", 10);
-		_defineProperty(this, "rotateCornerRadius", 10);
-		_defineProperty(this, "rotateFill", void 0);
-		_defineProperty(this, "rotateStroke", void 0);
-		_defineProperty(this, "rotateStrokeWidth", void 0);
-		_defineProperty(this, "rotateIconEnabled", false);
-		_defineProperty(this, "rotateIconStroke", void 0);
-		_defineProperty(this, "rotateIconStrokeWidth", 1.5);
-		_defineProperty(this, "borderEnabled", true);
-		_defineProperty(this, "borderStroke", "rgb(97, 97, 97)");
-		_defineProperty(this, "borderStrokeWidth", 1);
+		_defineProperty(this, "rotateAnchorOffset", DEFAULT_TRANSFORMER_CONFIG.rotateAnchorOffset);
+		_defineProperty(this, "rotateAnchorPosition", DEFAULT_TRANSFORMER_CONFIG.rotateAnchorPosition);
+		_defineProperty(this, "rotateLineEnabled", DEFAULT_TRANSFORMER_CONFIG.rotateLineEnabled);
+		_defineProperty(this, "rotateSize", DEFAULT_TRANSFORMER_CONFIG.rotateSize);
+		_defineProperty(this, "rotateCornerRadius", DEFAULT_TRANSFORMER_CONFIG.rotateCornerRadius);
+		_defineProperty(this, "rotateFill", DEFAULT_TRANSFORMER_CONFIG.rotateFill);
+		_defineProperty(this, "rotateStroke", DEFAULT_TRANSFORMER_CONFIG.rotateStroke);
+		_defineProperty(this, "rotateStrokeWidth", DEFAULT_TRANSFORMER_CONFIG.rotateStrokeWidth);
+		_defineProperty(this, "rotateIconEnabled", DEFAULT_TRANSFORMER_CONFIG.rotateIconEnabled);
+		_defineProperty(this, "rotateIconStroke", DEFAULT_TRANSFORMER_CONFIG.rotateIconStroke);
+		_defineProperty(this, "rotateIconStrokeWidth", DEFAULT_TRANSFORMER_CONFIG.rotateIconStrokeWidth);
+		_defineProperty(this, "borderEnabled", DEFAULT_TRANSFORMER_CONFIG.borderEnabled);
+		_defineProperty(this, "borderStroke", DEFAULT_TRANSFORMER_CONFIG.borderStroke);
+		_defineProperty(this, "borderStrokeWidth", DEFAULT_TRANSFORMER_CONFIG.borderStrokeWidth);
 		_defineProperty(this, "borderDash", []);
-		_defineProperty(this, "borderSpacing", 0);
-		_defineProperty(this, "anchorFill", "rgb(255, 255, 255)");
-		_defineProperty(this, "anchorStroke", "rgb(185, 185, 185)");
-		_defineProperty(this, "anchorStrokeWidth", 1);
-		_defineProperty(this, "anchorSize", 10);
-		_defineProperty(this, "anchorCornerRadius", 10);
-		_defineProperty(this, "anchorStyle", "default");
+		_defineProperty(this, "borderSpacing", DEFAULT_TRANSFORMER_CONFIG.borderSpacing);
+		_defineProperty(this, "anchorFill", DEFAULT_TRANSFORMER_CONFIG.anchorFill);
+		_defineProperty(this, "anchorStroke", DEFAULT_TRANSFORMER_CONFIG.anchorStroke);
+		_defineProperty(this, "anchorStrokeWidth", DEFAULT_TRANSFORMER_CONFIG.anchorStrokeWidth);
+		_defineProperty(this, "anchorSize", DEFAULT_TRANSFORMER_CONFIG.anchorSize);
+		_defineProperty(this, "anchorCornerRadius", DEFAULT_TRANSFORMER_CONFIG.anchorCornerRadius);
+		_defineProperty(this, "anchorStyle", DEFAULT_TRANSFORMER_CONFIG.anchorStyle);
 		_defineProperty(this, "anchorSideLongSize", 16);
 		_defineProperty(this, "anchorSideShortSize", 5);
 		_defineProperty(this, "anchorSideCornerRadius", 2.5);
@@ -29311,11 +29334,11 @@ var Transformer = class extends _univerjs_core.Disposable {
 		_defineProperty(this, "anchorShadowBlur", 0);
 		_defineProperty(this, "anchorShadowOffsetX", 0);
 		_defineProperty(this, "anchorShadowOffsetY", 0);
-		_defineProperty(this, "keepRatio", true);
+		_defineProperty(this, "keepRatio", DEFAULT_TRANSFORMER_CONFIG.keepRatio);
 		_defineProperty(this, "centeredScaling", false);
 		_defineProperty(this, "zeroLeft", 0);
 		_defineProperty(this, "zeroTop", 0);
-		_defineProperty(this, "moveBoundaryEnabled", true);
+		_defineProperty(this, "moveBoundaryEnabled", DEFAULT_TRANSFORMER_CONFIG.moveBoundaryEnabled);
 		_defineProperty(
 			this,
 			/**
@@ -30648,7 +30671,7 @@ var Transformer = class extends _univerjs_core.Disposable {
 		const { isCropper } = this._getConfig(applyObject);
 		const targetObject = this._findGroupObject(applyObject);
 		if (this._selectedObjectMap.has(targetObject.oKey)) return;
-		if (!evt.ctrlKey || SINGLE_ACTIVE_OBJECT_TYPE_MAP.has(targetObject.objectType)) {
+		if (!evt.ctrlKey) {
 			this._selectedObjectMap.clear();
 			this._clearControlMap();
 		}
@@ -30773,6 +30796,7 @@ var Scene = class extends _univerjs_core.Disposable {
 		_defineProperty(this, "_layers", []);
 		_defineProperty(this, "_viewports", []);
 		_defineProperty(this, "_preserveEngineOnRender", false);
+		_defineProperty(this, "_hasPostRenderCanvasMutation", false);
 		_defineProperty(this, "_scrollbarDragViewport", null);
 		_defineProperty(this, "_isScrollbarSeeking", false);
 		_defineProperty(this, "_isScrollbarPreviewDirty", false);
@@ -31308,12 +31332,19 @@ var Scene = class extends _univerjs_core.Disposable {
 		}
 		this._estimatedFullRenderDuration += (duration - this._estimatedFullRenderDuration) * SCROLLBAR_SEEK_RENDER_COST_SAMPLE_WEIGHT;
 	}
+	_notifyAfterRender(canvasInstance) {
+		if (!canvasInstance) {
+			this._afterRender$.next(canvasInstance);
+			return false;
+		}
+		return canvasInstance.getContext().detectBitmapMutation(() => this._afterRender$.next(canvasInstance));
+	}
 	render(parentCtx) {
 		var _this$getEngine2;
 		if (!this.isDirty()) return;
 		const layers = this._layers.sort(_univerjs_core.sortRules);
 		const canvasInstance = (_this$getEngine2 = this.getEngine()) === null || _this$getEngine2 === void 0 ? void 0 : _this$getEngine2.getCanvas();
-		const shouldTryPreservingEngine = this._preserveEngineOnRender && parentCtx == null && canvasInstance != null;
+		const shouldTryPreservingEngine = this._preserveEngineOnRender && !this._hasPostRenderCanvasMutation && parentCtx == null && canvasInstance != null;
 		const isScrollbarSeekRender = this._isScrollbarSeeking && parentCtx == null && canvasInstance != null;
 		const shouldMeasureFullRender = parentCtx == null && canvasInstance != null;
 		const fullRenderStartedAt = _univerjs_core.Tools.now();
@@ -31345,7 +31376,7 @@ var Scene = class extends _univerjs_core.Disposable {
 		}
 		this._beforeRender$.next(canvasInstance);
 		for (let i = 0, len = layers.length; i < len; i++) layers[i].render(parentCtx, i === len - 1, layerRenderOptions);
-		this._afterRender$.next(canvasInstance);
+		this._hasPostRenderCanvasMutation = this._notifyAfterRender(canvasInstance);
 		this._recordRenderedViewportScrollPositions();
 		if (shouldMeasureFullRender) this._recordFullRenderDuration(_univerjs_core.Tools.now() - fullRenderStartedAt, isScrollbarSeekRender);
 	}
@@ -31946,7 +31977,7 @@ let RenderManagerService = class RenderManagerService extends _univerjs_core.Dis
 		_defineProperty(this, "_renderDisposed$", new rxjs.Subject());
 		_defineProperty(this, "disposed$", this._renderDisposed$.asObservable());
 		_defineProperty(this, "_renderDependencies", /* @__PURE__ */ new Map());
-		this._initDarkModeListener();
+		this._initThemeListener();
 	}
 	dispose() {
 		super.dispose();
@@ -31987,8 +32018,8 @@ let RenderManagerService = class RenderManagerService extends _univerjs_core.Dis
 	_getRenderDepsByType(type) {
 		return Array.from(this._renderDependencies.get(type) ?? []);
 	}
-	_initDarkModeListener() {
-		this.disposeWithMe(this._themeService.darkMode$.subscribe(() => {
+	_initThemeListener() {
+		this.disposeWithMe((0, rxjs.merge)(this._themeService.currentTheme$, this._themeService.darkMode$).subscribe(() => {
 			this.getRenderAll().forEach((renderer) => {
 				renderer.components.forEach((component) => {
 					component.makeForceDirty(true);
@@ -33296,6 +33327,7 @@ exports.DEFAULT_OFFSET_SPACING = DEFAULT_OFFSET_SPACING;
 exports.DEFAULT_PADDING_DATA = DEFAULT_PADDING_DATA;
 exports.DEFAULT_SKELETON_FOOTER = DEFAULT_SKELETON_FOOTER;
 exports.DEFAULT_SKELETON_HEADER = DEFAULT_SKELETON_HEADER;
+exports.DEFAULT_TRANSFORMER_CONFIG = DEFAULT_TRANSFORMER_CONFIG;
 exports.DOCS_EXTENSION_TYPE = DOCS_EXTENSION_TYPE;
 exports.DOCUMENT_CONTEXT_CLIP_TYPE = DOCUMENT_CONTEXT_CLIP_TYPE;
 exports.DRAWING_OBJECT_LAYER_INDEX = DRAWING_OBJECT_LAYER_INDEX;