@mce/bigesj 0.16.6 → 0.17.0

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { plugin } from './plugin';
 export * from './composables';
 export * from './convert';
-export * from './editorOptions';
 export * from './loaders';
+export * from './options';
 export * from './plugin';
 export default plugin;

package/dist/index.js

@@ -1093,8 +1093,8 @@ function signedArea(data, start, end, dim) {
   }
   return sum;
 }
-function drawPoint(ctx, x, y, options = {}) {
-  const { radius = 1 } = options;
+function drawPoint(ctx, x, y, options2 = {}) {
+  const { radius = 1 } = options2;
   ctx.moveTo(x, y);
   ctx.arc(x, y, radius, 0, Math.PI * 2);
 }
@@ -2624,7 +2624,7 @@ function cubicBezierP3(t, p) {
 function cubicBezier(t, p0, p1, p2, p3) {
   return cubicBezierP0(t, p0) + cubicBezierP1(t, p1) + cubicBezierP2(t, p2) + cubicBezierP3(t, p3);
 }
-function fillTriangulate(pointArray, options = {}) {
+function fillTriangulate(pointArray, options2 = {}) {
   let {
     vertices = [],
     indices = [],
@@ -2632,7 +2632,7 @@ function fillTriangulate(pointArray, options = {}) {
     verticesStride = 2,
     verticesOffset = vertices.length / verticesStride,
     indicesOffset = indices.length
-  } = options;
+  } = options2;
   const triangles = earcut(pointArray, holes, 2);
   if (triangles.length) {
     for (let i = 0; i < triangles.length; i += 3) {
@@ -2938,7 +2938,7 @@ function quadraticBezier(t, p0, p1, p2) {
 }
 const closePointEps = 1e-4;
 const curveEps = 1e-4;
-function strokeTriangulate(points, options = {}) {
+function strokeTriangulate(points, options2 = {}) {
   const {
     vertices = [],
     indices = [],
@@ -2951,7 +2951,7 @@ function strokeTriangulate(points, options = {}) {
     },
     flipAlignment = false,
     closed = true
-  } = options;
+  } = options2;
   const eps = closePointEps;
   if (points.length === 0) {
     return { vertices, indices };
@@ -3503,16 +3503,16 @@ class Curve {
   getFillVertices(_options) {
     return this.getAdaptiveVertices();
   }
-  fillTriangulate(options) {
+  fillTriangulate(options2) {
     return fillTriangulate(
-      this.getFillVertices(options),
-      options
+      this.getFillVertices(options2),
+      options2
     );
   }
-  strokeTriangulate(options) {
+  strokeTriangulate(options2) {
     return strokeTriangulate(
       this.getAdaptiveVertices(),
-      options
+      options2
     );
   }
   toCommands() {
@@ -4043,15 +4043,15 @@ class LineCurve extends Curve {
       { type: "L", x: p2.x, y: p2.y }
     ];
   }
-  getFillVertices(options = {}) {
+  getFillVertices(options2 = {}) {
     const minX = Math.min(this.p1.x, this.p2.x);
     const maxX = Math.max(this.p1.x, this.p2.x);
     const minY = Math.min(this.p1.y, this.p2.y);
     const maxY = Math.max(this.p1.y, this.p2.y);
     const x = minX;
     const y = minY;
-    const width = maxX - minX || options.style?.strokeWidth || 0;
-    const height = maxY - minY || options.style?.strokeWidth || 0;
+    const width = maxX - minX || options2.style?.strokeWidth || 0;
+    const height = maxY - minY || options2.style?.strokeWidth || 0;
     return [
       x,
       y,
@@ -4158,16 +4158,16 @@ class CompositeCurve extends Curve {
     });
     return output;
   }
-  strokeTriangulate(options) {
+  strokeTriangulate(options2) {
     if (this.curves.length === 1) {
-      return this.curves[0].strokeTriangulate(options);
+      return this.curves[0].strokeTriangulate(options2);
     } else {
-      return super.strokeTriangulate(options);
+      return super.strokeTriangulate(options2);
     }
   }
-  getFillVertices(options) {
+  getFillVertices(options2) {
     if (this.curves.length === 1) {
-      return this.curves[0].getFillVertices(options);
+      return this.curves[0].getFillVertices(options2);
     } else {
       const output = [];
       let offset;
@@ -4176,7 +4176,7 @@ class CompositeCurve extends Curve {
         if (curve instanceof LineCurve) {
           arr = curve.getAdaptiveVertices();
         } else {
-          arr = curve.getFillVertices(options);
+          arr = curve.getFillVertices(options2);
         }
         output.push(...arr);
         if (offset) {
@@ -4585,9 +4585,9 @@ class CurvePath extends CompositeCurve {
       super.getAdaptiveVertices(output)
     );
   }
-  getFillVertices(options) {
+  getFillVertices(options2) {
     return this._closeVertices(
-      super.getFillVertices(options)
+      super.getFillVertices(options2)
     );
   }
   _setCurrentPoint(point) {
@@ -4986,12 +4986,12 @@ class Path2D extends CompositeCurve {
     });
     return { min: min.finite(), max: max.finite() };
   }
-  strokeTriangulate(options) {
-    const indices = options?.indices ?? [];
-    const vertices = options?.vertices ?? [];
+  strokeTriangulate(options2) {
+    const indices = options2?.indices ?? [];
+    const vertices = options2?.vertices ?? [];
     this.curves.forEach((curve) => {
       curve.strokeTriangulate({
-        ...options,
+        ...options2,
         indices,
         vertices,
         style: { ...this.style }
@@ -4999,12 +4999,12 @@ class Path2D extends CompositeCurve {
     });
     return { indices, vertices };
   }
-  fillTriangulate(options) {
+  fillTriangulate(options2) {
     const _options = {
-      ...options,
+      ...options2,
       style: {
         ...this.style,
-        ...options?.style
+        ...options2?.style
       }
     };
     const indices = _options.indices ?? [];
@@ -5030,7 +5030,7 @@ class Path2D extends CompositeCurve {
           }
         }
         fillTriangulate(_pointArray, {
-          ...options,
+          ...options2,
           indices,
           vertices,
           holes,
@@ -5040,7 +5040,7 @@ class Path2D extends CompositeCurve {
     } else {
       this.curves.forEach((curve) => {
         curve.fillTriangulate({
-          ...options,
+          ...options2,
           indices,
           vertices,
           style: { ...this.style }
@@ -5210,8 +5210,8 @@ ${content}
   toSvg() {
     return new DOMParser().parseFromString(this.toSvgString(), "image/svg+xml").documentElement;
   }
-  toCanvas(options = {}) {
-    const { pixelRatio = 2, ...style } = options;
+  toCanvas(options2 = {}) {
+    const { pixelRatio = 2, ...style } = options2;
     const { left, top, width, height } = this.getBoundingBox();
     const canvas = document.createElement("canvas");
     canvas.width = width * pixelRatio;
@@ -5466,22 +5466,22 @@ async function convertShapeElementToSvg(el) {
   </svg>`;
   return doc;
 }
-function resolveOptions(options) {
+function resolveOptions(options2) {
   return {
     width: 0,
     height: 0,
     strokeWidth: 0,
-    ...options,
-    variables: { ...options.variables }
+    ...options2,
+    variables: { ...options2.variables }
   };
 }
-function _createPresetShape(node, options) {
+function _createPresetShape(node, options2) {
   const shape = parsePresetShapeDefinition(node);
   return {
     ...shape,
     cate: Number(node.attr("@cate") ?? 0),
     title: node.attr("@title") ?? node.name,
-    svg: shape.generateSvgString(resolveOptions(options))
+    svg: shape.generateSvgString(resolveOptions(options2))
   };
 }
 let root;
@@ -5492,13 +5492,13 @@ async function getRoot() {
   }
   return root;
 }
-async function createPresetShape(name, options = {}) {
+async function createPresetShape(name, options2 = {}) {
   const node = (await getRoot()).find(name);
   return _createPresetShape(node, {
     width: 18,
     height: 18,
     strokeWidth: 1,
-    ...options
+    ...options2
   });
 }
 function parseCssStyleLinearGradient(linearGradient) {
@@ -5554,238 +5554,6 @@ function convertSvgLinearGradient(value) {
     return `linear-gradient(${args.join(", ")})`;
   }
 }
-async function convertImageElementToUrl(el) {
-  const {
-    transform = {},
-    style = {},
-    maskUrl,
-    imageEffects = [],
-    imageEffectsRatio = 1
-  } = el;
-  const url = el.clipUrl || el.url;
-  const {
-    translateX = 0,
-    translateY = 0,
-    zoom = 1
-  } = transform ?? {};
-  const {
-    scaleX = 1,
-    scaleY = 1,
-    filter
-  } = style;
-  if (translateX === 0 && translateY === 0 && zoom === 1 && scaleX === 1 && scaleY === 1 && !maskUrl && !filter && !imageEffects.length) {
-    return url;
-  }
-  const img = await assets.fetchImageBitmap(url);
-  const {
-    originWidth = img.width,
-    originHeight = img.height,
-    imageWidth = originWidth,
-    imageHeight = originHeight
-  } = transform;
-  const {
-    width = originWidth,
-    height = originHeight
-  } = style;
-  const dpr = window.devicePixelRatio || 1;
-  const [canvas, ctx] = createCanvas(width, height, dpr);
-  if (filter)
-    ctx.filter = filter;
-  ctx.scale(scaleX, scaleY);
-  ctx.translate(scaleX < 0 ? -width : 0, scaleY < 0 ? -height : 0);
-  if (maskUrl) {
-    const mask = await assets.fetchImageBitmap(maskUrl);
-    ctx.drawImage(mask, 0, 0, mask.width, mask.height, 0, 0, width, height);
-    mask.close();
-    ctx.globalCompositeOperation = "source-in";
-  }
-  const dw = imageWidth * zoom;
-  const dh = imageHeight * zoom;
-  const dx = -(dw / 2 - imageWidth / 2) + translateX;
-  const dy = -(dh / 2 - imageHeight / 2) + translateY;
-  ctx.drawImage(img, 0, 0, img.width, img.height, dx, dy, dw, dh);
-  img.close();
-  ctx.globalCompositeOperation = "source-over";
-  if (imageEffects.length > 0) {
-    const scale = 0.9;
-    const center = {
-      x: (width - width * scale) / 2,
-      y: (height - height * scale) / 2
-    };
-    const canvasBitmap = await createImageBitmap(canvas);
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.scale(scale, scale);
-    for (let i = imageEffects.length - 1; i >= 0; i--) {
-      const { filling, offset, stroke } = imageEffects[i];
-      let effectCanvas = canvasBitmap;
-      if (filling) {
-        const [canvas1, ctx1] = createCanvas(width, height, dpr);
-        ctx1.drawImage(effectCanvas, 0, 0, width, height);
-        ctx1.globalCompositeOperation = "source-in";
-        if (filling.color) {
-          const [canvas2, ctx2] = createCanvas(width, height, dpr);
-          ctx2.fillStyle = filling.color;
-          ctx2.fillRect(0, 0, width, height);
-          ctx1.drawImage(canvas2, 0, 0, width, height);
-        } else if (filling.imageContent?.image) {
-          const img2 = await assets.fetchImageBitmap(filling.imageContent.image);
-          ctx1.drawImage(img2, 0, 0, width, height);
-          img2.close();
-        }
-        effectCanvas = canvas1;
-      }
-      stroke?.forEach(({ width: width2, color }) => {
-        effectCanvas = new ImageStroke().use((ctx2, image, options) => {
-          const [, ctx1] = createCanvas(image.width, image.height);
-          ctx1.drawImage(image, 0, 0);
-          const paths = getContours(ctx1);
-          const x = options.thickness;
-          const y = options.thickness;
-          ctx2.strokeStyle = options.color;
-          ctx2.lineWidth = options.thickness * 2;
-          ctx2.lineJoin = "round";
-          paths.forEach((path) => {
-            ctx2.beginPath();
-            ctx2.moveTo(x + path[0].x, y + path[1].y);
-            for (let i2 = 1; i2 < path.length; i2++) {
-              ctx2.lineTo(x + path[i2].x, y + path[i2].y);
-            }
-            ctx2.closePath();
-          });
-          ctx2.stroke();
-        }).make(effectCanvas, {
-          color,
-          thickness: width2 / 50 * imageEffectsRatio
-        });
-      });
-      if (offset) {
-        let { x, y } = offset;
-        x = x / 50 * imageEffectsRatio * 200;
-        y = y / 50 * imageEffectsRatio * 200;
-        ctx.drawImage(effectCanvas, x + center.x, y + center.y, width, height);
-      } else {
-        ctx.drawImage(effectCanvas, center.x, center.y, width, height);
-      }
-    }
-    canvasBitmap.close();
-  }
-  return await new Promise((resolve) => {
-    canvas.toBlob((blob) => {
-      try {
-        resolve(URL.createObjectURL(blob));
-      } catch (e) {
-        console.error(`Failed to URL.createObjectURL, url: ${url}`, e);
-        resolve(url);
-      }
-    });
-  });
-}
-function createCanvas(width, height, ratio = 1) {
-  const canvas = document.createElement("canvas");
-  canvas.width = width * ratio;
-  canvas.height = height * ratio;
-  canvas.style.width = `${width}px`;
-  canvas.style.height = `${height}px`;
-  const ctx = canvas.getContext("2d");
-  ctx.scale(ratio, ratio);
-  return [canvas, ctx];
-}
-class ImageStroke {
-  canvas = document.createElement("canvas");
-  method;
-  use(method) {
-    this.method = method;
-    return this;
-  }
-  make(image, options) {
-    const { canvas } = this;
-    const ctx = this.canvas.getContext("2d");
-    const strokeSize = options.thickness * 2;
-    const [resultWidth, resultHeight] = [image.width, image.height].map((val) => val + strokeSize);
-    if (resultWidth !== canvas.width || resultHeight !== canvas.height) {
-      canvas.width = resultWidth;
-      canvas.height = resultHeight;
-    }
-    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-    this.method(ctx, image, options);
-    ctx.drawImage(image, options.thickness, options.thickness);
-    return canvas;
-  }
-}
-function getContours(ctx) {
-  const cx = 0;
-  const cy = 0;
-  const canvasWidth = ctx.canvas.width;
-  const canvasHeight = ctx.canvas.height;
-  const paths = [];
-  let lastPos = 3;
-  const alpha = 100;
-  const trace = () => {
-    const path = [];
-    const data = new Uint32Array(ctx.getImageData(cx, cy, canvasWidth, canvasHeight).data.buffer);
-    let x;
-    let y;
-    let startX;
-    let startY;
-    let startPos = -1;
-    let step;
-    let prevStep = 9;
-    const steps = [9, 0, 3, 3, 2, 0, 9, 3, 1, 9, 1, 1, 2, 0, 2, 9];
-    function getState(x2, y2) {
-      return x2 >= 0 && y2 >= 0 && x2 < canvasWidth && y2 < canvasHeight ? data[y2 * canvasWidth + x2] >>> 24 > alpha : false;
-    }
-    function getNextStep(x2, y2) {
-      let v = 0;
-      if (getState(x2 - 1, y2 - 1)) {
-        v += 1;
-      }
-      if (getState(x2, y2 - 1)) {
-        v += 2;
-      }
-      if (getState(x2 - 1, y2)) {
-        v += 4;
-      }
-      if (getState(x2, y2)) {
-        v += 8;
-      }
-      if (v === 6)
-        return prevStep === 0 ? 2 : 3;
-      else if (v === 9)
-        return prevStep === 3 ? 0 : 1;
-      else
-        return steps[v];
-    }
-    for (let i = lastPos; i < data.length; i++) {
-      if (data[i] >>> 24 > alpha) {
-        startPos = lastPos = i;
-        break;
-      }
-    }
-    if (startPos >= 0) {
-      x = startX = startPos % canvasWidth;
-      y = startY = Math.floor(startPos / canvasWidth);
-      do {
-        step = getNextStep(x, y);
-        if (step === 0)
-          y--;
-        else if (step === 1)
-          y++;
-        else if (step === 2)
-          x--;
-        else if (step === 3)
-          x++;
-        if (step !== prevStep) {
-          path.push({ x: x + cx, y: y + cy });
-          prevStep = step;
-        }
-      } while (x !== startX || y !== startY);
-    }
-    paths.push(path);
-    return path;
-  };
-  trace();
-  return paths;
-}
 async function convertSvgElementToUrl(el) {
   const {
     id,
@@ -5849,15 +5617,7 @@ async function convertSvgElementToUrl(el) {
     svg.setAttribute("width", String(style.width * 2));
   if (style.height)
     svg.setAttribute("height", String(style.height * 2));
-  return await convertImageElementToUrl({
-    ...el,
-    transform: {
-      ...el.transform,
-      originWidth: style.width,
-      originHeight: style.height
-    },
-    url: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg.outerHTML)}`
-  });
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg.outerHTML)}`;
 }
 const highlightReferImage = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNzIgNzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDcyIDcyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTE5LjMsMzguMWMwLjIsMC41LDAuNCwwLjksMC43LDEuNGMwLjIsMC4zLDAuNCwwLjQsMC44LDAuNGMwLjMsMCwwLjUtMC4xLDAuNi0wLjRjMC4xLTAuMywwLjEtMC42LDAuMi0wLjkgICBjMC0wLjIsMC4xLTAuNCwwLjMtMC41YzAuMi0wLjEsMC40LTAuMiwwLjYtMC4xYzAuMiwwLDAuNCwwLjEsMC41LDAuM2MwLjEsMC4yLDAuMiwwLjQsMC4xLDAuNmMtMC4xLDAuNi0wLjIsMS4yLTAuNCwxLjcgICBjLTAuMywwLjgtMC45LDEuMi0xLjcsMS4yYy0wLjksMC0xLjYtMC40LTIuMS0xLjJjLTAuMy0wLjQtMC41LTAuOC0wLjctMS4zYy0wLjQsMC4zLTEsMC42LTEuNywxYy0wLjUsMC4yLTAuOCwwLjEtMS4xLTAuMyAgIGMtMC4yLTAuNS0wLjEtMC45LDAuMy0xLjFjMC43LTAuNCwxLjQtMC44LDEuOS0xLjFjLTAuMi0wLjktMC40LTIuMS0wLjUtMy43TDE1LjksMzRjLTAuMiwwLTAuNCwwLTAuNi0wLjEgICBjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4yLDAtMC40LDAuMi0wLjZzMC4zLTAuMywwLjUtMC4zbDEuMi0wLjFjLTAuMS0wLjktMC4xLTEuOS0wLjEtMi45YzAtMC4yLDAuMS0wLjQsMC4yLTAuNiAgIGMwLjItMC4xLDAuMy0wLjIsMC42LTAuMmMwLjIsMCwwLjQsMC4xLDAuNiwwLjJjMC4yLDAuMSwwLjIsMC4zLDAuMywwLjZjMCwwLjEsMCwxLDAuMSwyLjdsMy4yLTAuNGMwLjIsMCwwLjQsMCwwLjUsMC4xICAgYzAuMiwwLjEsMC4zLDAuMywwLjMsMC41czAsMC40LTAuMSwwLjVjLTAuMSwwLjItMC4zLDAuMy0wLjUsMC4zbC0zLjMsMC40YzAuMSwxLjIsMC4yLDIuMSwwLjMsMi44YzAuNy0wLjYsMS40LTEuNCwyLTIuMiAgIGMwLjMtMC40LDAuNy0wLjQsMS4xLTAuMmMwLjQsMC4zLDAuNCwwLjcsMC4yLDFDMjEuMywzNi4zLDIwLjQsMzcuMywxOS4zLDM4LjF6IE0yMC42LDMxLjFjLTAuMy0wLjItMC43LTAuNS0xLjEtMC44ICAgYy0wLjMtMC4zLTAuMy0wLjYtMC4xLTAuOWMwLjMtMC4zLDAuNi0wLjQsMS0wLjJjMC40LDAuMiwwLjcsMC41LDEuMSwwLjdjMC40LDAuMywwLjQsMC42LDAuMiwxQzIxLjMsMzEuMywyMSwzMS4zLDIwLjYsMzEuMXogICAgTTIzLjMsMzAuOWMwLTAuMiwwLjEtMC40LDAuMi0wLjVjMC4xLTAuMSwwLjMtMC4yLDAuNi0wLjJzMC40LDAuMSwwLjYsMC4yYzAuMSwwLjEsMC4yLDAuMywwLjIsMC41djYuNWMwLDAuMi0wLjEsMC40LTAuMiwwLjUgICBjLTAuMSwwLjEtMC4zLDAuMi0wLjYsMC4ycy0wLjQtMC4xLTAuNi0wLjJjLTAuMS0wLjEtMC4yLTAuMy0wLjItMC41VjMwLjl6IE0yNC4zLDQxLjZjLTAuMiwwLTAuNC0wLjEtMC42LTAuMiAgIGMtMC4yLTAuMS0wLjItMC4zLTAuMi0wLjZjMC0wLjIsMC4xLTAuNCwwLjItMC42YzAuMi0wLjEsMC4zLTAuMiwwLjYtMC4yaDAuOWMwLjYsMCwxLTAuNCwxLTEuMXYtOS40YzAtMC4yLDAuMS0wLjQsMC4yLTAuNiAgIGMwLjItMC4xLDAuMy0wLjIsMC42LTAuMmMwLjIsMCwwLjQsMC4xLDAuNiwwLjJjMC4yLDAuMSwwLjIsMC4zLDAuMiwwLjZWMzljMCwwLjgtMC4yLDEuNS0wLjcsMS45cy0xLjEsMC43LTEuOCwwLjdIMjQuM3oiLz4KCTxwYXRoIGQ9Ik00MC42LDM3LjdoLTMuOHYwLjdoNC40YzAuMSwwLDAuMywwLjEsMC40LDAuMmMwLjEsMC4xLDAuMiwwLjIsMC4yLDAuNGMwLDAuMS0wLjEsMC4zLTAuMiwwLjRjLTAuMSwwLjEtMC4yLDAuMi0wLjQsMC4yICAgaC00LjR2MC43SDQyYzAuMiwwLDAuMywwLjEsMC40LDAuMmMwLjEsMC4xLDAuMiwwLjIsMC4yLDAuNHMtMC4xLDAuMy0wLjIsMC40Yy0wLjEsMC4xLTAuMiwwLjItMC40LDAuMkgzMGMtMC4yLDAtMC4zLTAuMS0wLjQtMC4yICAgYy0wLjEtMC4xLTAuMi0wLjItMC4yLTAuNHMwLjEtMC4zLDAuMi0wLjRjMC4xLTAuMSwwLjItMC4yLDAuNC0wLjJoNS4ydi0wLjdoLTQuNGMtMC4xLDAtMC4zLTAuMS0wLjQtMC4ycy0wLjItMC4yLTAuMi0wLjQgICBjMC0wLjEsMC4xLTAuMywwLjItMC40czAuMi0wLjIsMC40LTAuMmg0LjR2LTAuN2gtMy43aDBjLTAuMiwwLTAuNC0wLjEtMC42LTAuMnMtMC4yLTAuMy0wLjItMC42di0zLjFjMC0wLjIsMC4xLTAuNCwwLjItMC42ICAgYzAuMS0wLjEsMC4zLTAuMiwwLjYtMC4yaDMuOHYtMC44SDMwYy0wLjIsMC0wLjMtMC4xLTAuNC0wLjJjLTAuMS0wLjEtMC4yLTAuMi0wLjItMC40czAuMS0wLjMsMC4yLTAuNGMwLjEtMC4xLDAuMi0wLjIsMC40LTAuMiAgIGg1LjJ2LTAuOGMtMS40LDAtMi45LDAuMS00LjMsMC4xYy0wLjIsMC0wLjMsMC0wLjQtMC4xYy0wLjEtMC4xLTAuMi0wLjItMC4yLTAuNGMwLTAuMiwwLTAuMywwLjItMC40YzAuMS0wLjEsMC4zLTAuMiwwLjQtMC4yICAgYzMuMywwLDYuOC0wLjEsMTAuMi0wLjNjMC4yLDAsMC4zLDAsMC40LDAuMmMwLjEsMC4xLDAuMiwwLjMsMC4yLDAuNGMwLDAuMiwwLDAuMy0wLjEsMC40Yy0wLjEsMC4xLTAuMiwwLjItMC40LDAuMiAgIGMtMS4xLDAtMi41LDAuMS00LjMsMC4xdjAuOGg1LjFjMC4yLDAsMC4zLDAuMSwwLjQsMC4yYzAuMSwwLjEsMC4yLDAuMiwwLjIsMC40cy0wLjEsMC4zLTAuMiwwLjRjLTAuMSwwLjEtMC4yLDAuMi0wLjQsMC4yaC01LjEgICB2MC44aDMuOGMwLjIsMCwwLjQsMC4xLDAuNiwwLjJjMC4xLDAuMSwwLjIsMC4zLDAuMiwwLjZ2My4xYzAsMC4yLTAuMSwwLjQtMC4yLDAuNkM0MSwzNy43LDQwLjgsMzcuNyw0MC42LDM3Ljd6IE0zNS4xLDM0LjlWMzQgICBoLTIuOXYwLjlIMzUuMXogTTM1LjEsMzYuN3YtMC45aC0yLjl2MC45SDM1LjF6IE0zOS44LDM0LjlWMzRoLTIuOXYwLjlIMzkuOHogTTM5LjgsMzYuN3YtMC45aC0yLjl2MC45SDM5Ljh6Ii8+Cgk8cGF0aCBkPSJNNDUuNSw0MS4xYy0wLjMsMC40LTAuNywwLjUtMS4xLDAuM2MtMC40LTAuMy0wLjUtMC43LTAuMy0xLjFsMS0xLjdjMC4zLTAuNCwwLjctMC41LDEuMS0wLjNjMC40LDAuMywwLjUsMC43LDAuMywxLjEgICBMNDUuNSw0MS4xeiBNNTUsMzcuN2MtMC4xLDAtMC4xLDAtMC4yLDBoLTguOWMtMC4zLDAtMC41LTAuMS0wLjYtMC4yYy0wLjItMC4yLTAuMi0wLjQtMC4yLTAuNnYtMy40YzAtMC4yLDAuMS0wLjQsMC4yLTAuNiAgIGMwLjEtMC4xLDAuMy0wLjIsMC42LTAuMmgzLjN2LTMuMWMwLTAuMiwwLjEtMC40LDAuMi0wLjZjMC4yLTAuMiwwLjQtMC4yLDAuNi0wLjJzMC40LDAuMSwwLjYsMC4yYzAuMiwwLjIsMC4yLDAuNCwwLjIsMC42djAuM0g1NiAgIGMwLjIsMCwwLjQsMC4xLDAuNiwwLjJjMC4xLDAuMSwwLjIsMC4zLDAuMiwwLjZzLTAuMSwwLjQtMC4yLDAuNWMtMC4xLDAuMS0wLjMsMC4yLTAuNiwwLjJoLTUuMnYxLjNoNGMwLjIsMCwwLjQsMC4xLDAuNiwwLjIgICBjMC4xLDAuMSwwLjIsMC4zLDAuMiwwLjZ2My40QzU1LjYsMzcuMyw1NS40LDM3LjYsNTUsMzcuN3ogTTUzLjksMzYuMnYtMmgtNy4xdjJINTMuOXogTTQ5LjYsNDAuN2MwLDAuMy0wLjEsMC41LTAuMiwwLjYgICBjLTAuMiwwLjEtMC40LDAuMi0wLjYsMC4yYy0wLjIsMC0wLjQtMC4xLTAuNi0wLjJjLTAuMS0wLjItMC4yLTAuNC0wLjItMC42bDAtMS42YzAtMC4yLDAuMS0wLjQsMC4yLTAuNmMwLjItMC4yLDAuMy0wLjIsMC42LTAuMiAgIHMwLjQsMC4xLDAuNiwwLjJjMC4yLDAuMiwwLjIsMC40LDAuMiwwLjZWNDAuN3ogTTUyLjgsNDAuN2MwLDAuMi0wLjEsMC40LTAuMiwwLjZjLTAuMiwwLjEtMC40LDAuMi0wLjYsMC4yICAgYy0wLjIsMC0wLjQtMC4xLTAuNi0wLjJjLTAuMi0wLjEtMC4yLTAuMy0wLjItMC42bDAtMS42YzAtMC4yLDAuMS0wLjQsMC4yLTAuNmMwLjItMC4yLDAuMy0wLjIsMC42LTAuMmMwLjIsMCwwLjQsMC4xLDAuNiwwLjIgICBjMC4yLDAuMiwwLjIsMC40LDAuMiwwLjZWNDAuN3ogTTU2LjYsNDAuM2MwLjIsMC40LDAuMSwwLjgtMC4zLDEuMWMtMC41LDAuMy0wLjgsMC4yLTEuMS0wLjNsLTEtMS43Yy0wLjItMC41LTAuMS0wLjgsMC4zLTEuMSAgIGMwLjUtMC4yLDAuOS0wLjEsMS4xLDAuM0w1Ni42LDQwLjN6Ii8+CjwvZz4KPC9zdmc+";
 function convertTextStyle(el, isByWord = false) {
@@ -6077,7 +5837,6 @@ async function convertElement(el, parent, context) {
   }
   switch (el.type) {
     case "image":
-      element.name = element.name ?? "图片";
       meta.inCanvasIs = "Element2D";
       meta.inPptIs = "Picture";
       meta.lockAspectRatio = true;
@@ -6088,7 +5847,7 @@ async function convertElement(el, parent, context) {
       if (el.clipUrl) {
         meta.rawForegroundImage = el.url;
       }
-      if (el.maskUrl) {
+      if (el.maskUrl && el.maskUrl !== el.url) {
         style.maskImage = el.maskUrl;
       }
       if (el.cropping) {
@@ -6106,7 +5865,6 @@ async function convertElement(el, parent, context) {
       }
       break;
     case "svg": {
-      element.name = element.name ?? "SVG";
       meta.inCanvasIs = "Element2D";
       meta.inPptIs = "Picture";
       meta.lockAspectRatio = true;
@@ -6117,7 +5875,6 @@ async function convertElement(el, parent, context) {
       break;
     }
     case "text": {
-      element.name = element.name ?? "文字";
       meta.inCanvasIs = "Element2D";
       meta.inPptIs = "Shape";
       if (style.writingMode === "horizontal-tb") {
@@ -6142,7 +5899,6 @@ async function convertElement(el, parent, context) {
       break;
     }
     case "com":
-      element.name = element.name ?? "组合";
       meta.inCanvasIs = "Element2D";
       meta.inPptIs = "GroupShape";
       element.children.push(
@@ -6159,7 +5915,6 @@ async function convertElement(el, parent, context) {
       );
       break;
     case "shape": {
-      element.name = element.name ?? "形状";
       meta.inCanvasIs = "Element2D";
       meta.inPptIs = "Shape";
       const svg = await convertShapeElementToSvg(el);
@@ -6192,12 +5947,10 @@ async function convertElement(el, parent, context) {
       break;
     }
     case "anim":
-      element.name = element.name ?? "Lottie";
       meta.inCanvasIs = "Lottie2D";
       element.src = el.url;
       break;
     case "video":
-      element.name = element.name ?? "视频";
       meta.inCanvasIs = "Video2D";
       element.src = el.src;
       break;
@@ -6257,11 +6010,11 @@ async function convertLayout(layout, isFrame = true, context) {
     meta
   };
 }
-async function convertDoc(doc, options = {}) {
+async function convertDoc(doc, options2 = {}) {
   const {
     gap = 0,
     included
-  } = options;
+  } = options2;
   let data;
   let raw = {};
   if (doc.content) {
@@ -6336,6 +6089,238 @@ async function convertDoc(doc, options = {}) {
     }
   };
 }
+async function convertImageElementToUrl(el) {
+  const {
+    transform = {},
+    style = {},
+    maskUrl,
+    imageEffects = [],
+    imageEffectsRatio = 1
+  } = el;
+  const url = el.clipUrl || el.url;
+  const {
+    translateX = 0,
+    translateY = 0,
+    zoom = 1
+  } = transform ?? {};
+  const {
+    scaleX = 1,
+    scaleY = 1,
+    filter
+  } = style;
+  if (translateX === 0 && translateY === 0 && zoom === 1 && scaleX === 1 && scaleY === 1 && !maskUrl && !filter && !imageEffects.length) {
+    return url;
+  }
+  const img = await assets.fetchImageBitmap(url);
+  const {
+    originWidth = img.width,
+    originHeight = img.height,
+    imageWidth = originWidth,
+    imageHeight = originHeight
+  } = transform;
+  const {
+    width = originWidth,
+    height = originHeight
+  } = style;
+  const dpr = window.devicePixelRatio || 1;
+  const [canvas, ctx] = createCanvas(width, height, dpr);
+  if (filter)
+    ctx.filter = filter;
+  ctx.scale(scaleX, scaleY);
+  ctx.translate(scaleX < 0 ? -width : 0, scaleY < 0 ? -height : 0);
+  if (maskUrl) {
+    const mask = await assets.fetchImageBitmap(maskUrl);
+    ctx.drawImage(mask, 0, 0, mask.width, mask.height, 0, 0, width, height);
+    mask.close();
+    ctx.globalCompositeOperation = "source-in";
+  }
+  const dw = imageWidth * zoom;
+  const dh = imageHeight * zoom;
+  const dx = -(dw / 2 - imageWidth / 2) + translateX;
+  const dy = -(dh / 2 - imageHeight / 2) + translateY;
+  ctx.drawImage(img, 0, 0, img.width, img.height, dx, dy, dw, dh);
+  img.close();
+  ctx.globalCompositeOperation = "source-over";
+  if (imageEffects.length > 0) {
+    const scale = 0.9;
+    const center = {
+      x: (width - width * scale) / 2,
+      y: (height - height * scale) / 2
+    };
+    const canvasBitmap = await createImageBitmap(canvas);
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.scale(scale, scale);
+    for (let i = imageEffects.length - 1; i >= 0; i--) {
+      const { filling, offset, stroke } = imageEffects[i];
+      let effectCanvas = canvasBitmap;
+      if (filling) {
+        const [canvas1, ctx1] = createCanvas(width, height, dpr);
+        ctx1.drawImage(effectCanvas, 0, 0, width, height);
+        ctx1.globalCompositeOperation = "source-in";
+        if (filling.color) {
+          const [canvas2, ctx2] = createCanvas(width, height, dpr);
+          ctx2.fillStyle = filling.color;
+          ctx2.fillRect(0, 0, width, height);
+          ctx1.drawImage(canvas2, 0, 0, width, height);
+        } else if (filling.imageContent?.image) {
+          const img2 = await assets.fetchImageBitmap(filling.imageContent.image);
+          ctx1.drawImage(img2, 0, 0, width, height);
+          img2.close();
+        }
+        effectCanvas = canvas1;
+      }
+      stroke?.forEach(({ width: width2, color }) => {
+        effectCanvas = new ImageStroke().use((ctx2, image, options2) => {
+          const [, ctx1] = createCanvas(image.width, image.height);
+          ctx1.drawImage(image, 0, 0);
+          const paths = getContours(ctx1);
+          const x = options2.thickness;
+          const y = options2.thickness;
+          ctx2.strokeStyle = options2.color;
+          ctx2.lineWidth = options2.thickness * 2;
+          ctx2.lineJoin = "round";
+          paths.forEach((path) => {
+            ctx2.beginPath();
+            ctx2.moveTo(x + path[0].x, y + path[1].y);
+            for (let i2 = 1; i2 < path.length; i2++) {
+              ctx2.lineTo(x + path[i2].x, y + path[i2].y);
+            }
+            ctx2.closePath();
+          });
+          ctx2.stroke();
+        }).make(effectCanvas, {
+          color,
+          thickness: width2 / 50 * imageEffectsRatio
+        });
+      });
+      if (offset) {
+        let { x, y } = offset;
+        x = x / 50 * imageEffectsRatio * 200;
+        y = y / 50 * imageEffectsRatio * 200;
+        ctx.drawImage(effectCanvas, x + center.x, y + center.y, width, height);
+      } else {
+        ctx.drawImage(effectCanvas, center.x, center.y, width, height);
+      }
+    }
+    canvasBitmap.close();
+  }
+  return await new Promise((resolve) => {
+    canvas.toBlob((blob) => {
+      try {
+        resolve(URL.createObjectURL(blob));
+      } catch (e) {
+        console.error(`Failed to URL.createObjectURL, url: ${url}`, e);
+        resolve(url);
+      }
+    });
+  });
+}
+function createCanvas(width, height, ratio = 1) {
+  const canvas = document.createElement("canvas");
+  canvas.width = width * ratio;
+  canvas.height = height * ratio;
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+  const ctx = canvas.getContext("2d");
+  ctx.scale(ratio, ratio);
+  return [canvas, ctx];
+}
+class ImageStroke {
+  canvas = document.createElement("canvas");
+  method;
+  use(method) {
+    this.method = method;
+    return this;
+  }
+  make(image, options2) {
+    const { canvas } = this;
+    const ctx = this.canvas.getContext("2d");
+    const strokeSize = options2.thickness * 2;
+    const [resultWidth, resultHeight] = [image.width, image.height].map((val) => val + strokeSize);
+    if (resultWidth !== canvas.width || resultHeight !== canvas.height) {
+      canvas.width = resultWidth;
+      canvas.height = resultHeight;
+    }
+    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+    this.method(ctx, image, options2);
+    ctx.drawImage(image, options2.thickness, options2.thickness);
+    return canvas;
+  }
+}
+function getContours(ctx) {
+  const cx = 0;
+  const cy = 0;
+  const canvasWidth = ctx.canvas.width;
+  const canvasHeight = ctx.canvas.height;
+  const paths = [];
+  let lastPos = 3;
+  const alpha = 100;
+  const trace = () => {
+    const path = [];
+    const data = new Uint32Array(ctx.getImageData(cx, cy, canvasWidth, canvasHeight).data.buffer);
+    let x;
+    let y;
+    let startX;
+    let startY;
+    let startPos = -1;
+    let step;
+    let prevStep = 9;
+    const steps = [9, 0, 3, 3, 2, 0, 9, 3, 1, 9, 1, 1, 2, 0, 2, 9];
+    function getState(x2, y2) {
+      return x2 >= 0 && y2 >= 0 && x2 < canvasWidth && y2 < canvasHeight ? data[y2 * canvasWidth + x2] >>> 24 > alpha : false;
+    }
+    function getNextStep(x2, y2) {
+      let v = 0;
+      if (getState(x2 - 1, y2 - 1)) {
+        v += 1;
+      }
+      if (getState(x2, y2 - 1)) {
+        v += 2;
+      }
+      if (getState(x2 - 1, y2)) {
+        v += 4;
+      }
+      if (getState(x2, y2)) {
+        v += 8;
+      }
+      if (v === 6)
+        return prevStep === 0 ? 2 : 3;
+      else if (v === 9)
+        return prevStep === 3 ? 0 : 1;
+      else
+        return steps[v];
+    }
+    for (let i = lastPos; i < data.length; i++) {
+      if (data[i] >>> 24 > alpha) {
+        startPos = lastPos = i;
+        break;
+      }
+    }
+    if (startPos >= 0) {
+      x = startX = startPos % canvasWidth;
+      y = startY = Math.floor(startPos / canvasWidth);
+      do {
+        step = getNextStep(x, y);
+        if (step === 0)
+          y--;
+        else if (step === 1)
+          y++;
+        else if (step === 2)
+          x--;
+        else if (step === 3)
+          x++;
+        if (step !== prevStep) {
+          path.push({ x: x + cx, y: y + cy });
+          prevStep = step;
+        }
+      } while (x !== startX || y !== startY);
+    }
+    paths.push(path);
+    return path;
+  };
+  trace();
+  return paths;
+}
 function bidTidLoader(editor, api) {
   const {
     config,
@@ -6386,7 +6371,7 @@ function bidTidLoader(editor, api) {
             doc.children.push(element);
           }
         });
-        left += width + config.value.frameGap;
+        left += width + config.value.canvas.frame.gap;
       });
       return doc;
     }
@@ -6410,11 +6395,11 @@ function bigeLoader() {
     }
   };
 }
-function plugin(options = {}) {
+function plugin(options2 = {}) {
   const {
     font,
     api
-  } = options;
+  } = options2;
   const _api = {
     fonts: "/new/design/fonts",
     bid: "/new/udesign/info/%d",
@@ -6485,23 +6470,37 @@ async function setupFonts(editor, api) {
     await loadBigeFonts(api.fonts, true);
   });
 }
-const editorOptions = {
-  checkerboard: true,
-  checkerboardStyle: "grid",
-  pixelGrid: true,
-  camera: true,
-  ruler: true,
-  scrollbar: true,
-  statusbar: true,
-  frameGap: 48,
-  zoomToFit: "width",
-  typographyStrategy: "autoHeight",
+const options = {
   locale: { locale: "zhHans" },
-  defaultFont: { family: "SourceHanSansCN-Normal", src: "https://bige.cdn.bcebos.com/files/202006/cBNrzOsE_rAQB.woff" },
-  transformControls: {
-    handleShape: "circle",
-    handleStrategy: "point",
-    rotator: true
+  viewport: {
+    camera: { enabled: true },
+    zoom: { strategy: "containWidth" },
+    screenPadding: { left: 110, top: 60, right: 110, bottom: 60 }
+  },
+  canvas: {
+    checkerboard: { enabled: true, style: "grid" },
+    pixelGrid: { enabled: true },
+    frame: { outline: false }
+  },
+  ui: {
+    ruler: { visible: true },
+    scrollbar: { visible: true },
+    statusbar: { visible: true }
+  },
+  interaction: {
+    transform: {
+      handleShape: "circle",
+      handleStyle: "8-points",
+      lockAspectRatioStrategy: "diagonal",
+      rotator: true
+    }
+  },
+  typography: {
+    strategy: "autoHeight",
+    defaultFont: {
+      family: "SourceHanSansCN-Normal",
+      src: "https://bige.cdn.bcebos.com/files/202006/cBNrzOsE_rAQB.woff"
+    }
   }
 };
 export {
@@ -6519,9 +6518,9 @@ export {
   convertTextStyle,
   croppingToCropRect,
   plugin as default,
-  editorOptions,
   getStyle,
   getTextContents,
+  options,
   parseAnimations,
   plugin,
   transformToCropRect,

package/dist/options.d.ts

@@ -0,0 +1,2 @@
+import type { Options } from 'mce';
+export declare const options: Options;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mce/bigesj",
   "type": "module",
-  "version": "0.16.6",
+  "version": "0.17.0",
   "description": "Plugin for mce",
   "author": "wxm",
   "license": "MIT",
@@ -49,7 +49,7 @@
     "modern-openxml": "^1.10.1"
   },
   "devDependencies": {
-    "mce": "0.16.6"
+    "mce": "0.17.0"
   },
   "peerDependencies": {
     "mce": "^0"

package/dist/editorOptions.d.ts

@@ -1 +0,0 @@
-export declare const editorOptions: Partial<Mce.Options>;