@meta2d/core 1.0.68 → 1.0.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meta2d/core",
-  "version": "1.0.68",
+  "version": "1.0.69",
   "description": "@meta2d/core: Powerful, Beautiful, Simple, Open - Web-Based 2D At Its Best .",
   "main": "index.js",
   "types": "index.d.ts",

package/src/canvas/canvas.d.ts

@@ -270,6 +270,7 @@ export declare class Canvas {
         playingAnimate?: boolean;
         noChildren?: boolean;
     }): void;
+    initGlobalStyle(): void;
     render: (patchFlags?: number | boolean) => void;
     renderPens: () => void;
     private renderPenContainChild;

package/src/canvas/canvas.js

@@ -1,5 +1,5 @@
 import { KeydownType } from '../options';
-import { addLineAnchor, calcIconRect, calcTextRect, calcWorldAnchors, calcWorldRects, LockState, nearestAnchor, PenType, pushPenAnchor, removePenAnchor, renderPen, scalePen, translateLine, deleteTempAnchor, connectLine, disconnectLine, getAnchor, calcAnchorDock, calcMoveDock, calcTextLines, setNodeAnimate, setLineAnimate, calcPenRect, setChildrenActive, getParent, setHover, randomId, getPensLock, getToAnchor, getFromAnchor, calcPadding, getPensDisableRotate, getPensDisableResize, needCalcTextRectProps, calcResizeDock, needPatchFlagsPenRectProps, needCalcIconRectProps, isDomShapes, renderPenRaw, needSetPenProps, getAllChildren, calcInView, isShowChild, getTextColor, getGlobalColor, clearLifeCycle, rotatePen, calcTextAutoWidth, getGradientAnimatePath, CanvasLayer, ctxFlip, ctxRotate, setGlobalAlpha, drawImage, setElemPosition, getAllFollowers, calcChildrenInitRect, } from '../pen';
+import { addLineAnchor, calcIconRect, calcTextRect, calcWorldAnchors, calcWorldRects, LockState, nearestAnchor, PenType, pushPenAnchor, removePenAnchor, renderPen, scalePen, translateLine, deleteTempAnchor, connectLine, disconnectLine, getAnchor, calcAnchorDock, calcMoveDock, calcTextLines, setNodeAnimate, setLineAnimate, calcPenRect, setChildrenActive, getParent, setHover, randomId, getPensLock, getToAnchor, getFromAnchor, calcPadding, getPensDisableRotate, getPensDisableResize, needCalcTextRectProps, calcResizeDock, needPatchFlagsPenRectProps, needCalcIconRectProps, isDomShapes, renderPenRaw, needSetPenProps, getAllChildren, calcInView, isShowChild, getTextColor, clearLifeCycle, rotatePen, calcTextAutoWidth, getGradientAnimatePath, CanvasLayer, ctxFlip, ctxRotate, setGlobalAlpha, drawImage, setElemPosition, getAllFollowers, calcChildrenInitRect, } from '../pen';
 import { calcRotate, distance, getDistance, hitPoint, PointType, PrevNextType, rotatePoint, samePoint, scalePoint, translatePoint, TwoWay, } from '../point';
 import { calcCenter, calcRightBottom, calcRelativePoint, getRect, getRectOfPoints, pointInRect, pointInSimpleRect, rectInRect, rectToPoints, resizeRect, translateRect, pointInPolygon } from '../rect';
 import { EditType, globalStore, } from '../store';
@@ -19,6 +19,7 @@ import { Title } from '../title';
 import { CanvasTemplate } from './canvasTemplate';
 import { getLinePoints } from '../diagrams/line';
 import { Popconfirm } from '../popconfirm';
+import { themeKeys } from '../theme';
 export const movingSuffix = '-moving';
 export class Canvas {
     parent;
@@ -4027,6 +4028,27 @@ export class Canvas {
             pen.calculative.gradientTimer = undefined;
         }, 50);
     }
+    initGlobalStyle() {
+        const options = {};
+        const data = {};
+        const theme = {};
+        themeKeys.forEach(key => {
+            if (this.store.options[key] !== undefined) {
+                options[key] = this.store.options[key];
+            }
+            if (this.store.data[key] !== undefined) {
+                data[key] = this.store.data[key];
+            }
+            if (this.store.data.theme) {
+                const value = this.store.theme[this.store.data.theme]?.[key];
+                if (value !== undefined) {
+                    theme[key] = value;
+                }
+            }
+        });
+        this.store.globalStyle = {};
+        Object.assign(this.store.globalStyle, options, data, theme);
+    }
     render = (patchFlags) => {
         if (patchFlags) {
             this.opening = false;
@@ -4078,7 +4100,7 @@ export class Canvas {
     };
     renderPens = () => {
         const ctx = this.offscreen.getContext('2d');
-        ctx.strokeStyle = getGlobalColor(this.store);
+        ctx.strokeStyle = this.store.globalStyle.color; //getGlobalColor(this.store);
         for (const pen of this.store.data.pens) {
             if (!isFinite(pen.x)) {
                 continue;
@@ -4145,7 +4167,7 @@ export class Canvas {
                     ctx.rotate((this.activeRect.rotate * Math.PI) / 180);
                     ctx.translate(-pivot.x, -pivot.y);
                 }
-                ctx.strokeStyle = this.store.options.activeColor;
+                ctx.strokeStyle = this.store.globalStyle.activeColor;
                 ctx.globalAlpha = this.store.options.activeGlobalAlpha === undefined ? 0.3 : this.store.options.activeGlobalAlpha;
                 ctx.beginPath();
                 ctx.lineWidth = this.store.options.activeLineWidth || 1;
@@ -4167,7 +4189,7 @@ export class Canvas {
                 ctx.stroke();
                 // Draw rotate control points.
                 ctx.beginPath();
-                ctx.strokeStyle = this.store.options.activeColor;
+                ctx.strokeStyle = this.store.globalStyle.activeColor;
                 ctx.fillStyle = '#ffffff';
                 ctx.arc(this.activeRect.center.x, this.activeRect.y - 30, 5, 0, Math.PI * 2);
                 ctx.fill();
@@ -4195,7 +4217,7 @@ export class Canvas {
             }
             if (anchors) {
                 ctx.strokeStyle =
-                    this.store.hover.anchorColor || this.store.options.anchorColor;
+                    this.store.hover.anchorColor || this.store.globalStyle.anchorColor;
                 ctx.fillStyle =
                     this.store.hover.anchorBackground ||
                         this.store.options.anchorBackground;
@@ -4251,7 +4273,7 @@ export class Canvas {
                     if (this.store.hover.type && this.store.hoverAnchor === anchor) {
                         ctx.save();
                         ctx.strokeStyle =
-                            this.store.hover.activeColor || this.store.options.activeColor;
+                            this.store.hover.activeColor || this.store.globalStyle.activeColor;
                         ctx.fillStyle = ctx.strokeStyle;
                     }
                     else if (anchor.color || anchor.background) {
@@ -4299,7 +4321,7 @@ export class Canvas {
             if (!getPensLock(this.store.active) &&
                 !getPensDisableResize(this.store.active) &&
                 !this.store.options.disableSize) {
-                ctx.strokeStyle = this.store.options.activeColor;
+                ctx.strokeStyle = this.store.globalStyle.activeColor;
                 ctx.fillStyle = '#ffffff';
                 this.sizeCPs.forEach((pt, i) => {
                     if (this.activeRect.rotate) {
@@ -5796,7 +5818,7 @@ export class Canvas {
             offset && (this.store.clipboard.offset = offset);
             pos && (this.store.clipboard.pos = pos);
         }
-        if (!this.keyOptions.F) {
+        if (!this.keyOptions?.F) {
             this.store.clipboard.pens.forEach((pen) => {
                 delete pen.copyIndex;
             });
@@ -7074,7 +7096,8 @@ export class Canvas {
         // }
         ctx.textBaseline = 'middle'; // 默认垂直居中
         ctx.scale(scale, scale);
-        const background = this.store.data.background || this.store.options.background;
+        const background = this.store.globalStyle.background;
+        // this.store.data.background || this.store.options.background;
         if (background && isV) {
             // 绘制背景颜色
             ctx.save();
@@ -7183,7 +7206,8 @@ export class Canvas {
         const ctx = canvas.getContext('2d');
         ctx.textBaseline = 'middle'; // 默认垂直居中
         ctx.scale(scale, scale);
-        const background = this.store.data.background || this.store.options.background;
+        const background = this.store.globalStyle.background;
+        // this.store.data.background || this.store.options.background;
         if (background) {
             // 绘制背景颜色
             ctx.save();