@xrubik/fabric-to-leafer 1.0.0 → 1.0.1

package/dist/index.mjs

@@ -62,6 +62,12 @@ var ORIGIN_FRACTION = {
   top: 0,
   bottom: 1
 };
+function originFraction(value, fallback = 0) {
+  if (value === void 0 || value === null || value === "") return fallback;
+  if (typeof value === "number") return Number.isFinite(value) ? value : fallback;
+  const named = ORIGIN_FRACTION[String(value).trim().toLowerCase()];
+  return named === void 0 ? fallback : named;
+}
 function pathPlaceOrigin(object, bounds) {
   if (!bounds) {
     return { left: num(object.left), top: num(object.top) };
@@ -74,8 +80,8 @@ function pathPlaceOrigin(object, bounds) {
   const height = bounds.height;
   const scaleX = Math.abs(normalizeScale(num(object.scaleX, 1) || 1, width));
   const scaleY = Math.abs(normalizeScale(num(object.scaleY, 1) || 1, height));
-  const fractionX = ORIGIN_FRACTION[object.originX === void 0 ? "left" : object.originX] || 0;
-  const fractionY = ORIGIN_FRACTION[object.originY === void 0 ? "top" : object.originY] || 0;
+  const fractionX = originFraction(object.originX);
+  const fractionY = originFraction(object.originY);
   const angle = num(object.angle) * Math.PI / 180;
   const cos = Math.cos(angle);
   const sin = Math.sin(angle);
@@ -185,8 +191,13 @@ function convertPathData(pathData, object) {
   }).join(" ");
 }
 function aroundOf(object) {
-  const originX = object.originX === void 0 ? "left" : object.originX;
-  const originY = object.originY === void 0 ? "top" : object.originY;
+  const axisOf = (fraction, low, center, high) => {
+    if (fraction <= 0.25) return low;
+    if (fraction >= 0.75) return high;
+    return center;
+  };
+  const originX = axisOf(originFraction(object.originX), "left", "center", "right");
+  const originY = axisOf(originFraction(object.originY), "top", "center", "bottom");
   const map = {
     left: { top: "top-left", center: "left", bottom: "bottom-left" },
     center: { top: "top", center: "center", bottom: "bottom" },
@@ -309,13 +320,6 @@ function normalizeSizeSign(object) {
 }
 
 // src/attributes/transform.js
-var ORIGIN_FRACTION2 = {
-  left: 0,
-  center: 0.5,
-  right: 1,
-  top: 0,
-  bottom: 1
-};
 var PATH_PLACED_TYPES = ["polyline", "polygon", "line"];
 function bakePointsScale(node2, object, scaleX, scaleY) {
   if (!PATH_PLACED_TYPES.includes(object.type)) return false;
@@ -391,9 +395,8 @@ function applyPosition(node2, object, scaleX, scaleY) {
   if (PATH_PLACED_TYPES.includes(object.type)) return;
   const width = num(object.width);
   const height = num(object.height);
-  const fractionX = ORIGIN_FRACTION2[object.originX === void 0 ? "left" : object.originX];
-  const fractionY = ORIGIN_FRACTION2[object.originY === void 0 ? "top" : object.originY];
-  if (fractionX === void 0 || fractionY === void 0) return;
+  const fractionX = originFraction(object.originX);
+  const fractionY = originFraction(object.originY);
   const single = scaleX > 0 && scaleY > 0 && !num(node2.rotation, 0);
   if (single) return;
   const angle = num(node2.rotation, 0) * Math.PI / 180;
@@ -615,6 +618,7 @@ function applyPaint(node2, object, ctx) {
     if (strokeWidth !== void 0) {
       node2.strokeWidth = strokeWidth;
     }
+    node2.strokeScaleFixed = true;
     if (Array.isArray(object.strokeDashArray) && object.strokeDashArray.length) {
       node2.dashPattern = object.strokeDashArray;
     }
@@ -747,9 +751,13 @@ function cornerRadiusOf(object) {
   return [Math.max(0, rx || 0), Math.max(0, ry || 0)];
 }
 function convertRect(object, ctx, parent) {
+  const width = optionalNum(object.width);
+  const height = optionalNum(object.height);
   const rect = node("Rect", {
-    width: optionalNum(object.width),
-    height: optionalNum(object.height),
+    // Leafer 的 Rect 不给宽高时用默认的 100x100, Fabric 里缺宽高的图元
+    // (脏数据 / 没画完的空框)要显式写 0, 否则转出来凭空多出一个 100 的框
+    width: width === void 0 ? 0 : width,
+    height: height === void 0 ? 0 : height,
     fill: paintOf(object.fill, ctx),
     cornerRadius: cornerRadiusOf(object)
   });
@@ -759,9 +767,12 @@ function convertRect(object, ctx, parent) {
 
 // src/elements/ellipse.js
 function convertEllipse(object, ctx, parent) {
+  const width = optionalNum(object.width);
+  const height = optionalNum(object.height);
   const ellipse = node("Ellipse", {
-    width: optionalNum(object.width),
-    height: optionalNum(object.height),
+    // 同 Rect: 不写宽高会落到 Leafer 的 100x100 默认尺寸
+    width: width === void 0 ? 0 : width,
+    height: height === void 0 ? 0 : height,
     fill: paintOf(object.fill, ctx)
   });
   place(ellipse, object, parent);
@@ -790,8 +801,9 @@ function convertTriangle(object, ctx, parent) {
   const w = width || 0;
   const h = height || 0;
   const triangle = node("Polygon", {
-    width,
-    height,
+    // 不写宽高会落到 Leafer 的 100x100 默认尺寸
+    width: w,
+    height: h,
     // 顶点在正上方，底边贴底：和 Fabric 的三角形一致
     points: [w / 2, 0, w, h, 0, h],
     fill: paintOf(object.fill, ctx),
@@ -942,7 +954,6 @@ function textProps(object, ctx) {
     letterSpacing: convertLetterSpacing(object.charSpacing, object.fontSize),
     fill: object.fill ? paintOf(object.fill, ctx) : "#000000",
     shadow: object.shadow ? convertShadow(object.shadow) : void 0,
-    verticalAlign: "middle",
     textDecoration: textDecorationOf(object)
   };
   const backgroundColor = object.backgroundColor || object.textBackgroundColor;
@@ -959,22 +970,64 @@ function textProps(object, ctx) {
 }
 
 // src/elements/text.js
-function estimateLineHeight(object) {
+function textLines(object) {
+  const content = object.text === void 0 ? "" : String(object.text);
+  return Math.max(1, content.split("\n").length);
+}
+function ratioFromHeight(object) {
   const fontSize = optionalNum(object.fontSize);
   const height = optionalNum(object.height);
   if (!fontSize || !height) return void 0;
-  const content = object.text === void 0 ? "" : String(object.text);
-  const lines = Math.max(1, content.split("\n").length);
-  const ratio = Math.round(height / (fontSize * lines) * 1e3) / 1e3;
-  if (!(ratio > 0.8 && ratio < 1.6)) return void 0;
+  const ratio = Math.round(height / (fontSize * textLines(object)) * 1e3) / 1e3;
+  return ratio > 0.8 && ratio < 1.6 ? ratio : void 0;
+}
+function estimateLineHeight(object) {
+  const ratio = ratioFromHeight(object);
+  return ratio === void 0 ? void 0 : { type: "percent", value: ratio };
+}
+function lineHeightPx(lineHeight, fontSize) {
+  if (lineHeight === void 0) return fontSize * 1.16;
+  if (typeof lineHeight === "number") return lineHeight;
+  if (lineHeight && lineHeight.type === "percent") return fontSize * (Number(lineHeight.value) || 0);
+  return void 0;
+}
+function fitLineHeight(props, object) {
+  if (props.textWrap !== "none") return props.lineHeight;
+  const fontSize = optionalNum(object.fontSize);
+  const height = optionalNum(object.height);
+  const ratio = ratioFromHeight(object);
+  if (!fontSize || !height || ratio === void 0) return props.lineHeight;
+  const current = lineHeightPx(props.lineHeight, fontSize);
+  if (current === void 0 || current * textLines(object) <= height + 0.5) return props.lineHeight;
   return { type: "percent", value: ratio };
 }
+function textLineHeight(props, object) {
+  return fitLineHeight({ ...props, lineHeight: { type: "percent", value: 1 } }, object);
+}
+function textboxLineHeight(object) {
+  const fontSize = optionalNum(object.fontSize);
+  const height = optionalNum(object.height);
+  const lines = textLines(object);
+  if (lines > 1 && fontSize && height) {
+    const ratio = Math.round(height / (fontSize * lines) * 1e3) / 1e3;
+    if (ratio > 0.8 && ratio < 2.5) {
+      return { type: "percent", value: ratio };
+    }
+  }
+  return { type: "percent", value: 1 };
+}
 function isIText(object) {
   return object.type === "i-text" || object.type === "itext";
 }
 function convertText(object, ctx, parent) {
   const props = textProps(object, ctx);
   const itext = isIText(object);
+  if (!itext && object.type === "textbox") {
+    props.lineHeight = textboxLineHeight(object);
+  } else if (!itext) {
+    props.verticalAlign = "top";
+    props.lineHeight = textLineHeight(props, object);
+  }
   const text = itext ? node("IText", {
     ...props,
     lineHeight: props.lineHeight || estimateLineHeight(object)
@@ -1183,7 +1236,7 @@ async function hydrateLeaferDocument(document, loadDefinition) {
   await hydrateLibChildren(document.children, loadDefinition, []);
   return document;
 }
-function originFraction(around) {
+function originFraction2(around) {
   if (!around) return { x: 0, y: 0 };
   if (typeof around === "object") {
     const x = Number(around.x);
@@ -1226,7 +1279,7 @@ function contentBox(children, offsetX = 0, offsetY = 0) {
     if (!child || typeof child !== "object") return;
     const x = Number.isFinite(Number(child.x)) ? Number(child.x) : 0;
     const y = Number.isFinite(Number(child.y)) ? Number(child.y) : 0;
-    const origin = originFraction(child.around);
+    const origin = originFraction2(child.around);
     const size = nodeSize(child);
     const left = offsetX + x - size.width * origin.x;
     const top = offsetY + y - size.height * origin.y;