@meta2d/core 1.1.20 → 1.1.21

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/pen/render.js

@@ -216,53 +216,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 +1356,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) {