@mce/bigesj 0.15.5 → 0.15.7

package/dist/convert/cropping.d.ts

@@ -0,0 +1,15 @@
+export interface BigeCropping {
+    imageWidth: number;
+    imageHeight: number;
+    maskWidth?: number;
+    maskHeight?: number;
+    translateX: number;
+    translateY: number;
+    zoom?: number;
+}
+export declare function croppingToCropRect(cropping: BigeCropping, width: number, height: number): {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+};

package/dist/convert/index.d.ts

@@ -1,5 +1,6 @@
 export * from './animation';
 export * from './background';
+export * from './cropping';
 export * from './doc';
 export * from './element';
 export * from './image';
@@ -7,4 +8,5 @@ export * from './layout';
 export * from './style';
 export * from './svg';
 export * from './text';
+export * from './transform';
 export * from './types';

package/dist/convert/style.d.ts

@@ -1 +1 @@
-export declare function getStyle(el: Record<string, any>): any;
+export declare function getStyle(el: Record<string, any>, clone?: boolean): any;

package/dist/convert/transform.d.ts

@@ -0,0 +1,15 @@
+export interface BigeTransform {
+    imageWidth: number;
+    imageHeight: number;
+    originWidth?: number;
+    originHeight?: number;
+    translateX: number;
+    translateY: number;
+    zoom?: number;
+}
+export declare function transformToCropRect(transform: BigeTransform, width: number, height: number): {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+};

package/dist/index.js

@@ -585,10 +585,30 @@ function parseAnimations(el) {
     animations: animations2.filter((v) => !!v?.keyframes)
   };
 }
+function transformToCropRect(transform, width, height) {
+  const {
+    imageWidth,
+    imageHeight,
+    originWidth: _originWidth = width,
+    originHeight: _originHeight = height,
+    translateX,
+    translateY,
+    zoom = 1
+  } = transform;
+  const left = -(imageWidth * (zoom - 1) / 2) + translateX * zoom;
+  const top = -(imageHeight * (zoom - 1) / 2) + translateY * zoom;
+  const right = left + imageWidth * zoom;
+  const bottom = top + imageHeight * zoom;
+  return {
+    left: -left / width,
+    top: -top / height,
+    right: -(width - right) / width,
+    bottom: -(height - bottom) / height
+  };
+}
 function convertBackground(el) {
   let background;
   const backgroundColor = el.backgroundColor ?? el.background?.color;
-  const backgroundImage = el.backgroundImage ?? el.background?.image;
   if (backgroundColor) {
     if (isGradient(backgroundColor ?? "")) {
       background = {
@@ -600,13 +620,49 @@ function convertBackground(el) {
       };
     }
   }
+  const backgroundImage = el.backgroundImage ?? el.background?.image;
   if (backgroundImage) {
     background = {
-      image: backgroundImage
+      image: backgroundImage.match(/url\((.+)\)/)?.[1] ?? backgroundImage
     };
   }
+  const backgroundTransform = el.backgroundTransform ?? el.background?.transform;
+  if (background && backgroundTransform) {
+    background.cropRect = transformToCropRect(
+      backgroundTransform,
+      el.style.width,
+      el.style.height
+    );
+  }
   return background;
 }
+function croppingToCropRect(cropping, width, height) {
+  const {
+    imageWidth,
+    imageHeight,
+    maskWidth = width,
+    maskHeight = height,
+    translateX,
+    translateY,
+    zoom = 1
+  } = cropping;
+  const cvsWidth = imageWidth * zoom;
+  const cvsHeight = imageHeight * zoom;
+  const distX = (cvsWidth - maskWidth) / 2 - translateX;
+  const distY = (cvsHeight - maskHeight) / 2 - translateY;
+  const originX = distX + maskWidth / 2;
+  const originY = distY + maskHeight / 2;
+  const left = -(width / 2 - originX);
+  const top = -(height / 2 - originY);
+  const right = cvsWidth - (left + width);
+  const bottom = cvsHeight - (top + height);
+  return {
+    left: left / cvsWidth,
+    top: top / cvsHeight,
+    right: right / cvsWidth,
+    bottom: bottom / cvsHeight
+  };
+}
 async function convertImageElementToUrl(el) {
   const {
     transform = {},
@@ -1168,8 +1224,23 @@ function convertSvgLinearGradient(value) {
     return `linear-gradient(${args.join(", ")})`;
   }
 }
-function getStyle(el) {
-  return el.style ?? el;
+function getStyle(el, clone = false) {
+  let style = el.style ?? el;
+  if (clone) {
+    style = { ...style };
+    delete style.right;
+    delete style.bottom;
+    delete style.backgroundColor;
+    delete style.backgroundImage;
+    delete style.backgroundImageOpacity;
+    delete style.backgroundPosition;
+    delete style.backgroundSize;
+    delete style.backgroundTransform;
+    delete style.backgroundUrl;
+    delete style.elements;
+    delete style.imageTransform;
+  }
+  return style;
 }
 async function convertSvgElementToUrl(el) {
   const {
@@ -1388,9 +1459,8 @@ async function convertTextContent(el, isByWord = false) {
 }
 const percentageToPx = (per) => (Number.parseFloat(per) || 0) / 100;
 async function convertElement(el, parent, context) {
-  const style = { ...getStyle(el) };
-  delete style.bottom;
-  delete style.right;
+  const oldStyle = getStyle(el);
+  const style = getStyle(el, true);
   const { children: _children, ...raw } = el;
   const meta = {
     raw,
@@ -1399,19 +1469,25 @@ async function convertElement(el, parent, context) {
   };
   const element = {
     id: idGenerator(),
-    name: el.name ?? el.title ?? el.id,
+    name: el.name ?? el.title,
     style,
     meta,
-    children: []
+    children: [],
+    background: convertBackground(el)
   };
-  if (style.borderRadius) {
-    style.borderRadius = style.borderRadius * 0.01 * Math.max(style.height, style.width);
+  if (oldStyle.borderRadius) {
+    style.borderRadius = oldStyle.borderRadius * 0.01 * Math.max(oldStyle.height, oldStyle.width);
   }
-  if (parent && el.groupStyle) {
-    style.width = parent.style.width * percentageToPx(el.groupStyle.width);
-    style.height = parent.style.height * percentageToPx(el.groupStyle.height);
-    style.left = parent.style.width * percentageToPx(el.groupStyle.left);
-    style.top = parent.style.height * percentageToPx(el.groupStyle.top);
+  if (parent) {
+    if (el.groupStyle) {
+      style.width = parent.style.width * percentageToPx(el.groupStyle.width);
+      style.height = parent.style.height * percentageToPx(el.groupStyle.height);
+      style.left = parent.style.width * percentageToPx(el.groupStyle.left);
+      style.top = parent.style.height * percentageToPx(el.groupStyle.top);
+    } else {
+      style.left = oldStyle.left - parent.left;
+      style.top = oldStyle.top - parent.top;
+    }
   }
   if (el.editable === false) {
     style.visibility = "hidden";
@@ -1447,33 +1523,17 @@ async function convertElement(el, parent, context) {
         meta.rawForegroundImage = el.url;
       }
       if (el.cropping) {
-        const width = el.style.width;
-        const height = el.style.height;
-        const {
-          imageWidth,
-          imageHeight,
-          maskWidth = width,
-          maskHeight = height,
-          translateX,
-          translateY,
-          zoom = 1
-        } = el.cropping;
-        const cvsWidth = imageWidth * zoom;
-        const cvsHeight = imageHeight * zoom;
-        const distX = (cvsWidth - maskWidth) / 2 - translateX;
-        const distY = (cvsHeight - maskHeight) / 2 - translateY;
-        const originX = distX + maskWidth / 2;
-        const originY = distY + maskHeight / 2;
-        const left = -(width / 2 - originX);
-        const top = -(height / 2 - originY);
-        const right = cvsWidth - (left + width);
-        const bottom = cvsHeight - (top + height);
-        element.foreground.cropRect = {
-          left: left / cvsWidth,
-          top: top / cvsHeight,
-          right: right / cvsWidth,
-          bottom: bottom / cvsHeight
-        };
+        element.foreground.cropRect = croppingToCropRect(
+          el.cropping,
+          el.style.width,
+          el.style.height
+        );
+      } else if (el.transform) {
+        element.foreground.cropRect = transformToCropRect(
+          el.transform,
+          el.style.width,
+          el.style.height
+        );
       }
       break;
     case "svg": {
@@ -1562,9 +1622,7 @@ async function convertElement(el, parent, context) {
 }
 async function convertLayout(layout, isFrame = true, context) {
   const id = idGenerator();
-  const style = { ...getStyle(layout) };
-  delete style.right;
-  delete style.bottom;
+  const style = getStyle(layout, true);
   if (isFrame) {
     style.overflow = "hidden";
   }
@@ -1813,11 +1871,13 @@ export {
   convertTextContent,
   convertTextEffects,
   convertTextStyle,
+  croppingToCropRect,
   plugin as default,
   getStyle,
   getTextContents,
   parseAnimations,
   plugin,
+  transformToCropRect,
   useFonts,
   useSharedTextAssets
 };

package/package.json

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