@mce/bigesj 0.15.6 → 0.15.8

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/element.d.ts

@@ -1,5 +1,5 @@
 import type { NormalizedElement } from 'modern-idoc';
 import type { BigeElement } from './types';
-export declare function convertElement(el: BigeElement, parent: Record<string, any> | undefined, context?: {
+export declare function convertElement(el: BigeElement, parent?: Record<string, any>, context?: {
     endTime: number;
 }): Promise<NormalizedElement>;

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,28 +585,115 @@ function parseAnimations(el) {
     animations: animations2.filter((v) => !!v?.keyframes)
   };
 }
+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;
+}
+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) {
+  const style = getStyle(el);
   let background;
-  const backgroundColor = el.backgroundColor ?? el.background?.color;
-  const backgroundImage = el.backgroundImage ?? el.background?.image;
-  if (backgroundColor) {
-    if (isGradient(backgroundColor ?? "")) {
+  const color = el.backgroundColor ?? el.background?.color;
+  if (color) {
+    if (isGradient(color ?? "")) {
       background = {
-        image: backgroundColor
+        image: color
       };
     } else {
       background = {
-        color: backgroundColor
+        color
       };
     }
   }
-  if (backgroundImage) {
+  const image = el.backgroundImage ?? el.background?.image;
+  if (image) {
     background = {
-      image: backgroundImage
+      image: image.match(/url\((.+)\)/)?.[1] ?? image
+    };
+  }
+  let transform = el.backgroundTransform ?? el.background?.transform;
+  if (!transform && el.imageTransform) {
+    const imageTransform = el.imageTransform;
+    transform = {
+      zoom: imageTransform?.scale || 1,
+      translateX: imageTransform?.translateX || 0,
+      translateY: imageTransform?.translateY || 0,
+      originWidth: imageTransform?.imageWidth,
+      originHeight: imageTransform?.imageHeight,
+      imageWidth: imageTransform?.imageWidth || style.width,
+      imageHeight: imageTransform?.imageHeight || style.height
     };
   }
+  if (background && transform) {
+    background.cropRect = transformToCropRect(
+      transform,
+      style.width,
+      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,9 +1255,6 @@ function convertSvgLinearGradient(value) {
     return `linear-gradient(${args.join(", ")})`;
   }
 }
-function getStyle(el) {
-  return el.style ?? el;
-}
 async function convertSvgElementToUrl(el) {
   const {
     id,
@@ -1388,10 +1472,9 @@ 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 { children: _children, ...raw } = el;
+  const oldStyle = getStyle(el);
+  const style = getStyle(el, true);
   const meta = {
     raw,
     inPptIs: "Shape",
@@ -1399,19 +1482,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 +1536,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": {
@@ -1561,24 +1634,18 @@ async function convertElement(el, parent, context) {
   return element;
 }
 async function convertLayout(layout, isFrame = true, context) {
+  const { elements, ...raw } = layout;
   const id = idGenerator();
-  const style = { ...getStyle(layout) };
-  delete style.right;
-  delete style.bottom;
+  const style = getStyle(layout, true);
   if (isFrame) {
     style.overflow = "hidden";
   }
   const meta = {
+    raw,
     inPptIs: isFrame ? "Slide" : "GroupShape",
     inEditorIs: isFrame ? "Frame" : "Element",
     inCanvasIs: "Element2D"
   };
-  if (layout.id) {
-    meta.rawId = layout.id;
-  }
-  if (layout.name) {
-    meta.rawName = layout.name;
-  }
   return {
     id,
     name: isFrame ? `Frame ${id}` : layout.name,
@@ -1586,7 +1653,7 @@ async function convertLayout(layout, isFrame = true, context) {
     // TODO 过滤掉部分属性
     background: convertBackground(layout),
     children: (await Promise.all(
-      layout.elements.map(async (element) => {
+      elements.map(async (element) => {
         try {
           return await convertElement(element, void 0, context);
         } catch (e) {
@@ -1601,7 +1668,7 @@ async function convertLayout(layout, isFrame = true, context) {
 async function convertDoc(doc, gap = 0) {
   const {
     layouts,
-    metas = {}
+    raw = {}
   } = doc;
   const context = {
     endTime: 0
@@ -1638,14 +1705,14 @@ async function convertDoc(doc, gap = 0) {
   }, { minX: 0, minY: 0, maxX: 0, maxY: 0 });
   return {
     id: idGenerator(),
-    name: metas.name || "doc",
+    name: raw.name || "doc",
     style: {
-      width: metas?.width ?? minmax.maxX - minmax.minX,
-      height: metas?.height ?? minmax.maxY - minmax.minY
+      width: raw?.width ?? minmax.maxX - minmax.minX,
+      height: raw?.height ?? minmax.maxY - minmax.minY
     },
     children,
     meta: {
-      ...metas,
+      raw,
       endTime: context.endTime,
       inEditorIs: "Doc"
     }
@@ -1683,8 +1750,7 @@ function bidTidLoader(editor, api) {
             if (included !== void 0) {
               content.layouts = content.layouts.filter((_, index) => included.includes(index));
             }
-            doc2 = await convertDoc(content);
-            doc2.meta.raw = raw;
+            doc2 = await convertDoc({ ...content, raw });
           }
           maxTime = Math.max(maxTime, doc2.meta?.maxTime ?? 0);
           return doc2;
@@ -1724,9 +1790,7 @@ function bigeLoader() {
         )
       );
       const { content, ...raw } = bigeDoc;
-      const doc = await convertDoc(content);
-      doc.meta.raw = raw;
-      return doc;
+      return await convertDoc({ ...content, raw });
     }
   };
 }
@@ -1813,11 +1877,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.6",
+  "version": "0.15.8",
   "description": "Plugin for mce",
   "author": "wxm",
   "license": "MIT",
@@ -49,7 +49,7 @@
     "modern-openxml": "^1.10.1"
   },
   "devDependencies": {
-    "mce": "0.15.6"
+    "mce": "0.15.8"
   },
   "peerDependencies": {
     "mce": "^0"