@meta2d/core 1.1.20 → 1.1.22

package/src/diagrams/htmlDom.d.ts

@@ -0,0 +1,12 @@
+import { Pen } from "../pen";
+interface HtmlPen extends Pen {
+    html: {
+        content: string;
+        iframe?: boolean;
+        _width: number;
+        _height: number;
+    };
+    calculative: any;
+}
+export declare function htmlDom(pen: HtmlPen): Path2D;
+export {};

package/src/diagrams/htmlDom.js

@@ -0,0 +1,66 @@
+import { setElemPosition } from "../pen";
+export function htmlDom(pen) {
+    const path = new Path2D();
+    const worldRect = pen.calculative.worldRect;
+    if (!pen.calculative.singleton) {
+        pen.calculative.singleton = {};
+    }
+    if (!pen.onDestroy) {
+        pen.onDestroy = destroy;
+        pen.onResize = onResize;
+        pen.onMove = setDomScale;
+    }
+    if (!pen.calculative.singleton.div) {
+        const context = pen.html.iframe
+            ? document.createElement('iframe')
+            : document.createElement('div');
+        if (pen.html.iframe) {
+            context.srcdoc = pen.html.content || '';
+            context.onload = () => {
+                context.style.overflow = 'hidden';
+                context.style.border = 'none';
+                context.scrolling = 'no';
+            };
+        }
+        else {
+            context.innerHTML = pen.html.content || '';
+        }
+        context.style.position = 'absolute';
+        context.style.outline = 'none';
+        context.style.overflow = 'hidden';
+        context.style.left = '-9999px';
+        context.style.top = '-9999px';
+        pen.calculative.canvas.externalElements.parentElement.appendChild(context);
+        onResize(pen);
+        setElemPosition(pen, context);
+        pen.calculative.singleton.div = context;
+    }
+    setDomScale(pen);
+    return path;
+}
+function destroy(pen) {
+    if (pen.calculative.singleton && pen.calculative.singleton.div) {
+        pen.calculative.singleton.div.remove();
+        delete pen.calculative.singleton.div;
+    }
+}
+function onResize(pen) {
+    const { width, height } = window.meta2d.getPenRect(pen);
+    pen.calculative.singleton._width = width;
+    pen.calculative.singleton._height = height;
+}
+function setDomScale(pen) {
+    requestAnimationFrame(() => {
+        const worldRect = pen.calculative.worldRect;
+        const store = pen.calculative.canvas.store;
+        const div = pen.calculative.singleton.div;
+        if (!div)
+            return;
+        div.style.width = pen.calculative.singleton._width + 'px';
+        div.style.height = pen.calculative.singleton._height + 'px';
+        div.style.left = worldRect.x + store.data.x - 1 / 2 * pen.calculative.singleton._width + 1 / 2 * worldRect.width + 'px';
+        div.style.top = worldRect.y + store.data.y - 1 / 2 * pen.calculative.singleton._height + 1 / 2 * worldRect.height + 'px';
+        div.style.scale = pen.calculative.canvas.store.data.scale;
+    });
+}
+//# sourceMappingURL=htmlDom.js.map

package/src/diagrams/htmlDom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"htmlDom.js","sourceRoot":"","sources":["../../../../packages/core/src/diagrams/htmlDom.ts"],"names":[],"mappings":"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"}

package/src/diagrams/index.d.ts

@@ -17,6 +17,7 @@ export * from './iframe';
 export * from './video';
 export * from './form';
 export * from './sceneContainer';
+export * from './htmlDom';
 import { rectangle } from './rectangle';
 import { circle } from './circle';
 import { svgPath } from './svgPath';
@@ -38,10 +39,12 @@ import { mindNode, mindNodeAnchors } from './mindNode';
 import { mindLine, mindLineAnchors } from './mindLine';
 import { form } from './form';
 import { sceneContainer } from './sceneContainer';
+import { htmlDom } from "./htmlDom";
 export declare function commonPens(): {
     rectangle: typeof rectangle;
     square: typeof rectangle;
     circle: typeof circle;
+    htmlDom: typeof htmlDom;
     svgPath: typeof svgPath;
     diamond: typeof diamond;
     triangle: typeof triangle;

package/src/diagrams/index.js

@@ -17,6 +17,7 @@ export * from './iframe';
 export * from './video';
 export * from './form';
 export * from './sceneContainer';
+export * from './htmlDom';
 import { rectangle, square } from './rectangle';
 import { circle } from './circle';
 import { svgPath } from './svgPath';
@@ -39,11 +40,13 @@ import { mindNode, mindNodeAnchors } from './mindNode';
 import { mindLine, mindLineAnchors } from './mindLine';
 import { form } from './form';
 import { sceneContainer } from './sceneContainer';
+import { htmlDom } from "./htmlDom";
 export function commonPens() {
     return {
         rectangle,
         square,
         circle,
+        htmlDom,
         svgPath,
         diamond,
         triangle,

package/src/diagrams/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../packages/core/src/diagrams/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,iCAAiC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,UAAU,UAAU;IACxB,OAAO;QACL,SAAS;QACT,MAAM;QACN,MAAM;QACN,OAAO;QACP,OAAO;QACP,QAAQ;QACR,QAAQ;QACR,SAAS;QACT,OAAO;QACP,SAAS;QACT,UAAU;QACV,WAAW;QACX,OAAO;QACP,KAAK;QACL,IAAI;QACJ,MAAM;QACN,IAAI;QACJ,MAAM;QACN,KAAK;QACL,GAAG;QACH,QAAQ;QACR,QAAQ;QACR,SAAS,EAAC,SAAS;QACnB,IAAI;QACJ,OAAO,EAAC,SAAS;QACjB,cAAc;KACf,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,aAAa;IAC3B,OAAO;QACL,QAAQ,EAAE,eAAe;QACzB,QAAQ,EAAE,eAAe;QACzB,SAAS,EAAE,gBAAgB;QAC3B,QAAQ,EAAE,eAAe;QACzB,QAAQ,EAAE,eAAe;KAC1B,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../packages/core/src/diagrams/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,iCAAiC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAElC,MAAM,UAAU,UAAU;IACxB,OAAO;QACL,SAAS;QACT,MAAM;QACN,MAAM;QACN,OAAO;QACP,OAAO;QACP,OAAO;QACP,QAAQ;QACR,QAAQ;QACR,SAAS;QACT,OAAO;QACP,SAAS;QACT,UAAU;QACV,WAAW;QACX,OAAO;QACP,KAAK;QACL,IAAI;QACJ,MAAM;QACN,IAAI;QACJ,MAAM;QACN,KAAK;QACL,GAAG;QACH,QAAQ;QACR,QAAQ;QACR,SAAS,EAAC,SAAS;QACnB,IAAI;QACJ,OAAO,EAAC,SAAS;QACjB,cAAc;KACf,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,aAAa;IAC3B,OAAO;QACL,QAAQ,EAAE,eAAe;QACzB,QAAQ,EAAE,eAAe;QACzB,SAAS,EAAE,gBAAgB;QAC3B,QAAQ,EAAE,eAAe;QACzB,QAAQ,EAAE,eAAe;KAC1B,CAAC;AACJ,CAAC"}

package/src/options.d.ts

@@ -6,6 +6,7 @@ export declare enum KeydownType {
     Document = 0,
     Canvas = 1
 }
+export declare const TRANSPARENT_COLOR = "#FFFFFF00";
 export interface Options {
     color?: string;
     activeColor?: string;

package/src/options.js

@@ -4,6 +4,7 @@ export var KeydownType;
     KeydownType[KeydownType["Document"] = 0] = "Document";
     KeydownType[KeydownType["Canvas"] = 1] = "Canvas";
 })(KeydownType || (KeydownType = {}));
+export const TRANSPARENT_COLOR = '#FFFFFF00';
 export const defaultOptions = {
     fontFamily: '"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial',
     fontSize: 12,

package/src/options.js.map

@@ -1 +1 @@
-{"version":3,"file":"options.js","sourceRoot":"","sources":["../../../packages/core/src/options.ts"],"names":[],"mappings":"AAIA,MAAM,CAAN,IAAY,WAIX;AAJD,WAAY,WAAW;IACrB,8CAAS,CAAA;IACT,qDAAQ,CAAA;IACR,iDAAM,CAAA;AACR,CAAC,EAJW,WAAW,KAAX,WAAW,QAItB;AAyID,MAAM,CAAC,MAAM,cAAc,GAAY;IACrC,UAAU,EACR,2EAA2E;IAC7E,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,GAAG;IACf,SAAS,EAAE,QAAQ;IACnB,YAAY,EAAE,QAAQ;IACtB,KAAK,EAAE,SAAS;IAChB,WAAW,EAAE,SAAS;IACtB,UAAU,EAAE,uBAAuB;IACnC,WAAW,EAAE,SAAS;IACtB,gBAAgB,EAAE,SAAS;IAC3B,YAAY,EAAE,CAAC;IACf,gBAAgB,EAAE,MAAM;IACxB,SAAS,EAAE,uBAAuB;IAClC,YAAY,EAAE,SAAS;IACvB,SAAS,EAAE,SAAS;IACpB,YAAY,EAAE,YAAY;IAC1B,WAAW,EAAE,WAAW;IACxB,UAAU,EAAE,UAAU;IACtB,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,GAAG;IACb,QAAQ,EAAE,EAAE;IACZ,OAAO,EAAE,WAAW,CAAC,QAAQ;IAC7B,QAAQ,EAAE,EAAE;IACZ,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,eAAe,EAAE,OAAO;IACxB,QAAQ,EAAE,EAAE;IACZ,YAAY,EAAE,EAAE;IAChB,OAAO,EAAE,IAAI;IACb,eAAe,EAAE,EAAE;IACnB,YAAY,EAAE,IAAI;IAClB,UAAU,EAAE,IAAI;IAChB,aAAa,EAAE,KAAK;IACpB,YAAY,EAAE,SAAS;IACvB,aAAa,EAAE,SAAS;IACxB,aAAa,EAAE,CAAC;IAChB,aAAa,EAAE,CAAC;IAChB,UAAU,EAAE,EAAE;IACd,WAAW,EAAE,WAAW;IACxB,WAAW,EAAE,CAAC;IACd,cAAc,EAAE;QACd;YACE,CAAC,EAAE,GAAG;YACN,CAAC,EAAE,CAAC;SACL;QACD;YACE,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,GAAG;SACP;QACD;YACE,CAAC,EAAE,GAAG;YACN,CAAC,EAAE,CAAC;SACL;QACD;YACE,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,GAAG;SACP;KACF;IACD,gBAAgB,EAAE,IAAI;IACtB,iBAAiB,EAAE,IAAI;IACvB,gBAAgB,EAAE,IAAI;IACtB,gBAAgB,EAAE,KAAK;IACvB,iBAAiB,EAAE,CAAC;IACpB,oBAAoB,EAAE,KAAK;IAC3B,WAAW,EAAE,IAAI;IACjB,GAAG,EAAE,EAAE;IACP,aAAa,EAAE,EAAE;IACjB,UAAU,EAAE,KAAK;IACjB,SAAS,EAAE,EAAE;IACb,eAAe,EAAC,CAAC,WAAW,CAAC;IAC7B,QAAQ,EAAE,IAAI;IACd,UAAU,EAAE,IAAI;IAChB,eAAe,EAAE,EAAE;IACnB,cAAc,EAAE,EAAE;IAClB,aAAa,EAAC,IAAI;IAClB,aAAa,EAAC,EAAE;CACjB,CAAC"}
+{"version":3,"file":"options.js","sourceRoot":"","sources":["../../../packages/core/src/options.ts"],"names":[],"mappings":"AAIA,MAAM,CAAN,IAAY,WAIX;AAJD,WAAY,WAAW;IACrB,8CAAS,CAAA;IACT,qDAAQ,CAAA;IACR,iDAAM,CAAA;AACR,CAAC,EAJW,WAAW,KAAX,WAAW,QAItB;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAA;AAyI5C,MAAM,CAAC,MAAM,cAAc,GAAY;IACrC,UAAU,EACR,2EAA2E;IAC7E,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,GAAG;IACf,SAAS,EAAE,QAAQ;IACnB,YAAY,EAAE,QAAQ;IACtB,KAAK,EAAE,SAAS;IAChB,WAAW,EAAE,SAAS;IACtB,UAAU,EAAE,uBAAuB;IACnC,WAAW,EAAE,SAAS;IACtB,gBAAgB,EAAE,SAAS;IAC3B,YAAY,EAAE,CAAC;IACf,gBAAgB,EAAE,MAAM;IACxB,SAAS,EAAE,uBAAuB;IAClC,YAAY,EAAE,SAAS;IACvB,SAAS,EAAE,SAAS;IACpB,YAAY,EAAE,YAAY;IAC1B,WAAW,EAAE,WAAW;IACxB,UAAU,EAAE,UAAU;IACtB,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,GAAG;IACb,QAAQ,EAAE,EAAE;IACZ,OAAO,EAAE,WAAW,CAAC,QAAQ;IAC7B,QAAQ,EAAE,EAAE;IACZ,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,eAAe,EAAE,OAAO;IACxB,QAAQ,EAAE,EAAE;IACZ,YAAY,EAAE,EAAE;IAChB,OAAO,EAAE,IAAI;IACb,eAAe,EAAE,EAAE;IACnB,YAAY,EAAE,IAAI;IAClB,UAAU,EAAE,IAAI;IAChB,aAAa,EAAE,KAAK;IACpB,YAAY,EAAE,SAAS;IACvB,aAAa,EAAE,SAAS;IACxB,aAAa,EAAE,CAAC;IAChB,aAAa,EAAE,CAAC;IAChB,UAAU,EAAE,EAAE;IACd,WAAW,EAAE,WAAW;IACxB,WAAW,EAAE,CAAC;IACd,cAAc,EAAE;QACd;YACE,CAAC,EAAE,GAAG;YACN,CAAC,EAAE,CAAC;SACL;QACD;YACE,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,GAAG;SACP;QACD;YACE,CAAC,EAAE,GAAG;YACN,CAAC,EAAE,CAAC;SACL;QACD;YACE,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,GAAG;SACP;KACF;IACD,gBAAgB,EAAE,IAAI;IACtB,iBAAiB,EAAE,IAAI;IACvB,gBAAgB,EAAE,IAAI;IACtB,gBAAgB,EAAE,KAAK;IACvB,iBAAiB,EAAE,CAAC;IACpB,oBAAoB,EAAE,KAAK;IAC3B,WAAW,EAAE,IAAI;IACjB,GAAG,EAAE,EAAE;IACP,aAAa,EAAE,EAAE;IACjB,UAAU,EAAE,KAAK;IACjB,SAAS,EAAE,EAAE;IACb,eAAe,EAAC,CAAC,WAAW,CAAC;IAC7B,QAAQ,EAAE,IAAI;IACd,UAAU,EAAE,IAAI;IAChB,eAAe,EAAE,EAAE;IACnB,cAAc,EAAE,EAAE;IAClB,aAAa,EAAC,IAAI;IAClB,aAAa,EAAC,EAAE;CACjB,CAAC"}

package/src/pen/render.js

@@ -10,6 +10,7 @@ import { renderFromArrow, renderToArrow } from './arrow';
 import { Gradient, PenType } from '../pen';
 import { pSBC, rgba, cubicBezierY } from '../utils';
 import { isEmptyText } from '../utils/tool';
+import { TRANSPARENT_COLOR } from "../options";
 const LINE = "line";
 const REPEAT = "repeat";
 /**
@@ -216,53 +217,141 @@ function getGradientR(angle, width, height) {
     return r;
 }
 function formatGradient(color) {
-    if (typeof color == 'string' && color.startsWith('linear-gradient')) {
-        let arr = color.slice(16, -2).split('deg,');
-        if (arr.length > 1) {
-            let _arr = arr[1].split('%,');
-            const colors = [];
-            _arr.forEach((stap) => {
-                if (/rgba?/.test(stap)) {
-                    let _arr = stap.split(') ');
-                    colors.push({
-                        color: rgbaToHex(_arr[0] + ')'),
-                        i: parseFloat(_arr[1]) / 100,
-                    });
-                }
-                else {
-                    let _arr = stap.split(' ');
-                    if (_arr.length > 2) {
-                        colors.push({
-                            color: _arr[1],
-                            i: parseFloat(_arr[2]) / 100,
-                        });
-                    }
-                    else {
-                        colors.push({
-                            color: _arr[0],
-                            i: parseFloat(_arr[1]) / 100,
-                        });
-                    }
-                }
-            });
-            return {
-                angle: parseFloat(arr[0]),
-                colors,
-            };
+    if (typeof color !== 'string' || !color.startsWith('linear-gradient')) {
+        return {
+            angle: 0,
+            colors: [],
+        };
+    }
+    const start = color.indexOf('(');
+    const end = color.lastIndexOf(')');
+    if (start === -1 || end === -1 || end <= start) {
+        return { angle: 0, colors: [] };
+    }
+    const inner = color.slice(start + 1, end).trim();
+    const parts = splitByCommaRespectingParens(inner);
+    if (parts.length === 0) {
+        return { angle: 0, colors: [] };
+    }
+    let angle = 0;
+    let colorStartIndex = 0;
+    const firstPart = parts[0].trim();
+    if (firstPart.endsWith('deg')) {
+        angle = parseFloat(firstPart);
+        colorStartIndex = 1;
+    }
+    else if (firstPart.startsWith('to ')) {
+        angle = directionToAngle(firstPart);
+        colorStartIndex = 1;
+    }
+    const rawStops = [];
+    for (let i = colorStartIndex; i < parts.length; i++) {
+        const stop = parseColorStop(parts[i].trim());
+        if (stop) {
+            rawStops.push(stop);
+        }
+    }
+    if (rawStops.length === 0) {
+        return { angle, colors: [] };
+    }
+    fillMissingOffsets(rawStops);
+    const colors = rawStops.map((stop) => ({
+        color: stop.color,
+        i: stop.offset / 100,
+    }));
+    return { angle, colors };
+}
+function splitByCommaRespectingParens(str) {
+    const parts = [];
+    let current = '';
+    let depth = 0;
+    for (let i = 0; i < str.length; i++) {
+        const char = str[i];
+        if (char === '(') {
+            depth++;
+            current += char;
+        }
+        else if (char === ')') {
+            depth--;
+            current += char;
+        }
+        else if (char === ',' && depth === 0) {
+            parts.push(current);
+            current = '';
         }
         else {
-            return {
-                angle: parseFloat(arr[0]),
-                colors: [],
-            };
+            current += char;
         }
     }
-    else {
+    if (current.trim()) {
+        parts.push(current);
+    }
+    return parts;
+}
+function parseColorStop(str) {
+    if (!str)
+        return null;
+    const percentMatch = str.match(/^(.+?)\s+(\d+(?:\.\d+)?%)\s*$/);
+    if (percentMatch) {
         return {
-            angle: 0,
-            colors: [],
+            color: normalizeColor(percentMatch[1].trim()),
+            offset: parseFloat(percentMatch[2]),
         };
     }
+    return { color: normalizeColor(str) };
+}
+function normalizeColor(color) {
+    if (/^rgba?\s*\(/.test(color)) {
+        return rgbaToHex(color);
+    }
+    return color;
+}
+function directionToAngle(dir) {
+    const map = {
+        'to top': 90,
+        'to right': 180,
+        'to bottom': 270,
+        'to left': 0,
+        'to top right': 135,
+        'to right top': 135,
+        'to bottom right': 225,
+        'to right bottom': 225,
+        'to bottom left': 315,
+        'to left bottom': 315,
+        'to top left': 45,
+        'to left top': 45,
+    };
+    return map[dir] ?? 0;
+}
+function fillMissingOffsets(stops) {
+    if (stops.length === 0)
+        return;
+    if (stops[0].offset == null) {
+        stops[0].offset = 0;
+    }
+    if (stops[stops.length - 1].offset == null) {
+        stops[stops.length - 1].offset = 100;
+    }
+    let i = 0;
+    while (i < stops.length) {
+        if (stops[i].offset == null) {
+            let prevIndex = i - 1;
+            let nextIndex = i + 1;
+            while (nextIndex < stops.length && stops[nextIndex].offset == null) {
+                nextIndex++;
+            }
+            const prevOffset = stops[prevIndex].offset;
+            const nextOffset = stops[nextIndex].offset;
+            const gap = nextIndex - prevIndex;
+            for (let j = 1; j < gap; j++) {
+                stops[prevIndex + j].offset = prevOffset + (nextOffset - prevOffset) * (j / gap);
+            }
+            i = nextIndex;
+        }
+        else {
+            i++;
+        }
+    }
 }
 function rgbaToHex(value) {
     if (/rgba?/.test(value)) {
@@ -1268,6 +1357,12 @@ export function renderPen(ctx, pen, download) {
     }
     else {
         let back;
+        const backgroundStr = pen.calculative.background || '';
+        if (typeof backgroundStr === 'string' && backgroundStr.startsWith('linear-gradient')) {
+            //让background为linear开头的兼容到gradientColors
+            pen.calculative.gradientColors = backgroundStr;
+            pen.calculative.bkType = Gradient.Linear;
+        }
         if (pen.calculative.bkType === Gradient.Linear) {
             if (pen.calculative.gradientColors) {
                 // if (!pen.type) {
@@ -1743,32 +1838,27 @@ export function ctxDrawLinePath(canUsePath = true, ctx, pen, store) {
                 setCtxLineAnimate(ctx, pen, store);
                 ctx.beginPath();
                 if (path instanceof Path2D) {
-                    if (pen.lineName === 'polyline' || pen.lineName === 'line') {
-                        if (pen.lineAnimateType === LineAnimateType.Arrow ||
-                            pen.lineAnimateType === LineAnimateType.WaterDrop) {
-                            //箭头动画
-                            const _path = drawArrow(pen);
-                            ctx.stroke(_path);
-                            ctx.fill(_path);
-                        }
-                        else {
-                            if (pen.calculative.gradientSmooth ||
-                                pen.calculative.lineSmooth) {
-                                if (!pen.calculative.gradientAnimatePath) {
-                                    pen.calculative.gradientAnimatePath =
-                                        getGradientAnimatePath(pen);
-                                }
-                                if (pen.calculative.gradientAnimatePath instanceof Path2D) {
-                                    ctx.stroke(pen.calculative.gradientAnimatePath);
-                                }
+                    if (pen.lineAnimateType === LineAnimateType.Arrow ||
+                        pen.lineAnimateType === LineAnimateType.WaterDrop) {
+                        //箭头动画
+                        const _path = drawArrow(pen);
+                        ctx.stroke(_path);
+                        ctx.fill(_path);
+                    }
+                    else {
+                        if (pen.calculative.gradientSmooth ||
+                            pen.calculative.lineSmooth) {
+                            if (!pen.calculative.gradientAnimatePath) {
+                                pen.calculative.gradientAnimatePath =
+                                    getGradientAnimatePath(pen);
                             }
-                            else {
-                                ctx.stroke(path);
+                            if (pen.calculative.gradientAnimatePath instanceof Path2D) {
+                                ctx.stroke(pen.calculative.gradientAnimatePath);
                             }
                         }
-                    }
-                    else {
-                        ctx.stroke(path);
+                        else {
+                            ctx.stroke(path);
+                        }
                     }
                 }
                 else {
@@ -1794,7 +1884,9 @@ export function ctxDrawLinePath(canUsePath = true, ctx, pen, store) {
  * 设置线条动画，ctx 的 strokeStyle lineDash 等属性更改
  */
 export function setCtxLineAnimate(ctx, pen, store) {
-    ctx.strokeStyle = pen.animateColor || store.styles.animateColor;
+    ctx.strokeStyle = pen.lineAnimateType === LineAnimateType.Custom ?
+        pen.animateColor || TRANSPARENT_COLOR
+        : (pen.animateColor || store.styles.animateColor);
     if (pen.animateShadow) {
         ctx.shadowBlur = pen.animateShadowBlur || pen.animateLineWidth || 6;
         ctx.shadowColor =
@@ -1966,7 +2058,7 @@ function lineAnimatePenRender(tracks) {
             height: viewHeight,
             rotate: state.rotate,
         };
-        meta2d.setValue({ id: targetPen.id, ...data });
+        meta2d.setValue({ id: targetPen.id, ...data }, { render: false, doEvent: false, history: false });
     };
 }
 function lineAnimateIconRender(icon) {