@nmmty/lazycanvas 1.0.0-dev.4 → 1.0.0-dev.7

package/dist/structures/components/Path2DLayer.js

@@ -28,7 +28,7 @@ class Path2DLayer extends BaseLayer_1.BaseLayer {
             throw new LazyUtil_1.LazyError("The color of the layer must be provided");
         if (!(0, utils_1.isColor)(color))
             throw new LazyUtil_1.LazyError("The color of the layer must be a valid color");
-        this.props.fillStyle = color;
+        this.props.color = color;
         return this;
     }
     setPath(path) {
@@ -136,6 +136,12 @@ class Path2DLayer extends BaseLayer_1.BaseLayer {
     async draw(ctx, canvas, manager, debug) {
         ctx.beginPath();
         ctx.save();
+        if (debug)
+            LazyUtil_1.LazyLog.log("none", `Drawing Path2D Layer: `, {
+                layerId: this.id,
+                type: this.type,
+                path: this.props.path2D.toSVGString(),
+            });
         if (this.props.transform) {
             (0, utils_1.transform)(ctx, this.props.transform, { width: 0, height: 0, x: 0, y: 0, type: this.type });
         }
@@ -143,8 +149,8 @@ class Path2DLayer extends BaseLayer_1.BaseLayer {
         if (this.props.clipPath) {
             ctx.clip(this.props.path2D);
         }
-        else if (this.props.fillStyle) {
-            let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle, { debug, manager });
+        else if (this.props.color) {
+            let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.color, { debug, manager });
             if (this.props.globalComposite) {
                 ctx.globalCompositeOperation = this.props.globalComposite;
             }
@@ -182,16 +188,8 @@ class Path2DLayer extends BaseLayer_1.BaseLayer {
     validateProps(data) {
         return {
             ...super.validateProps(data),
-            fillStyle: data.fillStyle || "#000000",
+            color: data.color || "#000000",
             path2D: data.path2D || new canvas_1.Path2D(),
-            stroke: {
-                width: data.stroke?.width || 1,
-                cap: data.stroke?.cap || "butt",
-                join: data.stroke?.join || "miter",
-                dashOffset: data.stroke?.dashOffset || 0,
-                dash: data.stroke?.dash || [],
-                miterLimit: data.stroke?.miterLimit || 10,
-            },
             loadFromSVG: data.loadFromSVG || false,
             clipPath: data.clipPath || false,
         };

package/dist/structures/components/PolygonLayer.d.ts

@@ -37,7 +37,7 @@ export interface IPolygonLayerProps extends IBaseLayerProps {
     /**
      * The fill style (color or pattern) of the layer.
      */
-    fillStyle: ColorType;
+    color: ColorType;
     /**
      * The stroke properties of the polygon.
      */

package/dist/structures/components/PolygonLayer.js

@@ -40,7 +40,7 @@ class PolygonLayer extends BaseLayer_1.BaseLayer {
             throw new LazyUtil_1.LazyError("The color of the layer must be provided");
         if (!(0, utils_1.isColor)(color))
             throw new LazyUtil_1.LazyError("The color of the layer must be a valid color");
-        this.props.fillStyle = color;
+        this.props.color = color;
         return this;
     }
     /**
@@ -74,13 +74,13 @@ class PolygonLayer extends BaseLayer_1.BaseLayer {
     async draw(ctx, canvas, manager, debug) {
         const parcer = (0, utils_1.parser)(ctx, canvas, manager);
         const { xs, ys, w } = parcer.parseBatch({
-            xs: { v: this.props.position.x },
-            ys: { v: this.props.position.y, options: LazyUtil_1.defaultArg.vl(true) },
+            xs: { v: this.props.position?.x || 0 },
+            ys: { v: this.props.position?.y || 0, options: LazyUtil_1.defaultArg.vl(true) },
             w: { v: this.props.size.width },
         });
         const h = parcer.parse(this.props.size.height, LazyUtil_1.defaultArg.wh(w), LazyUtil_1.defaultArg.vl(true));
         let { x, y } = (0, utils_1.centring)(this.props.centring, this.type, w, h, xs, ys);
-        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle, {
+        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.color, {
             debug,
             layer: { width: w, height: h, x: xs, y: ys, align: this.props.centring },
             manager,
@@ -198,7 +198,7 @@ class PolygonLayer extends BaseLayer_1.BaseLayer {
                 radius: data.size?.radius || 0,
                 count: data.size?.count || 3,
             },
-            fillStyle: data.fillStyle || "#000000",
+            color: data.color || "#000000",
         };
     }
 }

package/dist/structures/components/QuadraticLayer.d.ts

@@ -19,7 +19,15 @@ export interface IQuadraticLayer extends IBaseLayer {
  * Interface representing the properties of a Quadratic layer.
  */
 export interface IQuadraticLayerProps extends IBaseLayerProps {
-    position: IBaseLayerProps["position"] & {
+    position: {
+        /**
+         * The x coordinate of the quadratic curve's starting point.
+         */
+        x: ScaleType;
+        /**
+         * The y coordinate of the quadratic curve's starting point.
+         */
+        y: ScaleType;
         /**
          * The end x coordinate of the quadratic curve.
          */
@@ -40,7 +48,7 @@ export interface IQuadraticLayerProps extends IBaseLayerProps {
     /**
      * The fill style (color or pattern) of the layer.
      */
-    fillStyle: ColorType;
+    color: ColorType;
     /**
      * The stroke properties of the quadratic curve.
      */

package/dist/structures/components/QuadraticLayer.js

@@ -53,7 +53,7 @@ class QuadraticLayer extends BaseLayer_1.BaseLayer {
             throw new LazyUtil_1.LazyError("The color of the layer must be provided");
         if (!(0, utils_1.isColor)(color))
             throw new LazyUtil_1.LazyError("The color of the layer must be a valid color");
-        this.props.fillStyle = color;
+        this.props.color = color;
         return this;
     }
     /**
@@ -123,7 +123,7 @@ class QuadraticLayer extends BaseLayer_1.BaseLayer {
             { x: cx, y: cy },
             { x: xe, y: ye },
         ]);
-        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle, {
+        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.color, {
             debug,
             layer: { width, height, x: min.x, y: min.y, align: "none" },
             manager,
@@ -200,7 +200,7 @@ class QuadraticLayer extends BaseLayer_1.BaseLayer {
                 endX: data.position?.endX || 0,
                 endY: data.position?.endY || 0,
             },
-            fillStyle: data.fillStyle || "#000000",
+            color: data.color || "#000000",
             centring: data.centring || types_1.Centring.None,
             controlPoints: data.controlPoints || [{ x: 0, y: 0 }],
             stroke: {

package/dist/structures/components/TextLayer.d.ts

@@ -26,7 +26,7 @@ export interface ITextLayerProps extends IBaseLayerProps {
     /**
      * The fill style (color or pattern) of the layer.
      */
-    fillStyle: ColorType;
+    color: ColorType;
     /**
      * Array of substring color configurations for partial text coloring.
      */

package/dist/structures/components/TextLayer.js

@@ -88,7 +88,7 @@ class TextLayer extends BaseLayer_1.BaseLayer {
             throw new LazyUtil_1.LazyError("The color of the layer must be provided");
         if (!(0, utils_1.isColor)(color))
             throw new LazyUtil_1.LazyError("The color of the layer must be a valid color");
-        this.props.fillStyle = color;
+        this.props.color = color;
         if (sub && sub.length > 0) {
             this.props.subStringColors = sub;
         }
@@ -167,13 +167,32 @@ class TextLayer extends BaseLayer_1.BaseLayer {
      * @returns {Object} The width and height of the text.
      */
     measureText(ctx, canvas) {
+        ctx.font = `${this.props.font.weight} ${this.props.font.size}px ${this.props.font.family}`;
         if (this.props?.multiline?.enabled) {
             const w = (0, utils_1.parseToNormal)(this.props.size?.width || "vw", ctx, canvas);
-            const h = (0, utils_1.parseToNormal)(this.props.size?.height || 0, ctx, canvas, { width: w, height: 0 }, { vertical: true });
-            return { width: w, height: h };
+            // Calculate actual height based on text wrapping
+            const words = this.props.text.split(" ");
+            let line = "";
+            let linesCount = 1;
+            for (let word of words) {
+                let linePlus = line + word + " ";
+                if (ctx.measureText(linePlus).width > w) {
+                    linesCount++;
+                    line = word + " ";
+                }
+                else {
+                    line = linePlus;
+                }
+            }
+            const lineHeight = this.props.font.size * (this.props.multiline.spacing || 1.1);
+            const calculatedHeight = linesCount * lineHeight;
+            // If height is fixed in props, use it, otherwise use calculated height
+            const fixedHeight = this.props.size?.height
+                ? (0, utils_1.parseToNormal)(this.props.size.height, ctx, canvas, { width: w, height: 0 }, { vertical: true })
+                : 0;
+            return { width: w, height: fixedHeight || calculatedHeight };
         }
         else {
-            ctx.font = `${this.props.font.weight} ${this.props.font.size}px ${this.props.font.family}`;
             let data = ctx.measureText(this.props.text);
             return { width: data.width, height: this.props.font.size };
         }
@@ -188,8 +207,8 @@ class TextLayer extends BaseLayer_1.BaseLayer {
     async draw(ctx, canvas, manager, debug) {
         const parcer = (0, utils_1.parser)(ctx, canvas, manager);
         const { x, y, w } = parcer.parseBatch({
-            x: { v: this.props.position.x },
-            y: { v: this.props.position.y, options: LazyUtil_1.defaultArg.vl(true) },
+            x: { v: this.props.position?.x || 0 },
+            y: { v: this.props.position?.y || 0, options: LazyUtil_1.defaultArg.vl(true) },
             w: { v: this.props.size?.width || "vw" },
         });
         const h = parcer.parse(this.props.size?.height || 0, LazyUtil_1.defaultArg.wh(w), LazyUtil_1.defaultArg.vl(true));
@@ -208,16 +227,18 @@ class TextLayer extends BaseLayer_1.BaseLayer {
         DrawUtils_1.DrawUtils.drawShadow(ctx, this.props.shadow);
         DrawUtils_1.DrawUtils.opacity(ctx, this.props.opacity);
         DrawUtils_1.DrawUtils.filters(ctx, this.props.filter);
-        ctx.textAlign = this.props.align;
+        // When layout is managed by Yoga, always use top-left alignment
+        // since Yoga calculates position as top-left corner
+        const useLayoutAlignment = this.props._computedLayout === true;
+        ctx.textAlign = useLayoutAlignment ? "left" : this.props.align;
         if (this.props.letterSpacing)
             ctx.letterSpacing = `${this.props.letterSpacing}px`;
         if (this.props.wordSpacing)
             ctx.wordSpacing = `${this.props.wordSpacing}px`;
-        if (this.props.baseline)
-            ctx.textBaseline = this.props.baseline;
+        ctx.textBaseline = useLayoutAlignment ? "top" : this.props.baseline || "alphabetic";
         if (this.props.direction)
             ctx.direction = this.props.direction;
-        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle, {
+        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.color, {
             debug,
             layer: { width: w, height: h, x, y, align: "center" },
             manager,
@@ -391,7 +412,7 @@ class TextLayer extends BaseLayer_1.BaseLayer {
     validateProps(data) {
         return {
             ...super.validateProps(data),
-            fillStyle: data.fillStyle || "#000000",
+            color: data.color || "#000000",
             text: data.text || "",
             font: {
                 family: data.font?.family || "Arial",
@@ -403,7 +424,7 @@ class TextLayer extends BaseLayer_1.BaseLayer {
                 spacing: data.multiline?.spacing || 1.1,
             },
             size: {
-                width: data.size?.width || "vw",
+                width: data.size?.width || 0,
                 height: data.size?.height || 0,
             },
             align: data.align || types_1.TextAlign.Left,

package/dist/structures/helpers/readers/JSONReader.js

@@ -115,7 +115,7 @@ class JSONReader {
      */
     static layerParse(layer, misc) {
         if (layer instanceof components_1.Div) {
-            return new components_1.Div(misc).add(...layer.layers.map((l) => this.layerParse(l)));
+            return new components_1.Div({}, misc).add(...layer.layers.map((l) => this.layerParse(l)));
         }
         else {
             switch (layer.type) {
@@ -136,7 +136,7 @@ class JSONReader {
                 case types_1.LayerType.Polygon:
                     return new components_1.PolygonLayer(layer.props, misc).setColor(this.fillParse(layer));
                 case types_1.LayerType.Group:
-                    return new components_1.Div(misc).add(...layer.layers.map((l) => this.layerParse(l)));
+                    return new components_1.Div({}, misc).add(...layer.layers.map((l) => this.layerParse(l)));
                 default:
                     return layer;
             }
@@ -148,25 +148,25 @@ class JSONReader {
      * @returns {string | Gradient | Pattern} The parsed fill style.
      */
     static fillParse(layer) {
-        if ("fillStyle" in layer.props) {
-            if ((0, Signal_1.isSignal)(layer.props.fillStyle)) {
+        if ("color" in layer.props) {
+            if ((0, Signal_1.isSignal)(layer.props.color)) {
                 throw new LazyUtil_1.LazyError("Signals are not supported in JSON fill styles");
             }
-            if (typeof layer.props.fillStyle === "object") {
-                switch (layer.props.fillStyle?.fillType) {
+            if (typeof layer.props.color === "object") {
+                switch (layer.props.color?.fillType) {
                     case "gradient":
-                        return new __1.Gradient({ props: layer.props.fillStyle });
+                        return new __1.Gradient({ props: layer.props.color });
                     case "pattern":
                         return new __1.Pattern()
-                            .setType(layer.props.fillStyle.type)
-                            .setSrc(typeof layer.props.fillStyle.src === "string"
-                            ? layer.props.fillStyle.src
-                            : this.read(layer.props.fillStyle.src));
+                            .setType(layer.props.color.type)
+                            .setSrc(typeof layer.props.color.src === "string"
+                            ? layer.props.color.src
+                            : this.read(layer.props.color.src));
                     default:
-                        return layer.props.fillStyle;
+                        return layer.props.color;
                 }
             }
-            return layer.props.fillStyle || "#000000";
+            return layer.props.color || "#000000";
         }
         else {
             return "#000000";

package/dist/structures/managers/LayoutManager.d.ts

@@ -0,0 +1,23 @@
+import { Div } from "../components";
+import { AnyLayer } from "../../types";
+import { SKRSContext2D, Canvas, SvgCanvas } from "@napi-rs/canvas";
+export declare class LayoutManager {
+    private yoga;
+    private debug;
+    ready: Promise<void>;
+    constructor(opts?: {
+        debug?: boolean;
+    });
+    private init;
+    calculateLayout(root: AnyLayer | Div, width: number, height: number, ctx?: SKRSContext2D, canvas?: Canvas | SvgCanvas): void;
+    private createNode;
+    private applyLayout;
+    private freeNode;
+    private getFlexDirection;
+    private getJustifyContent;
+    private getAlignItems;
+    private getPositionType;
+    private setDimension;
+    private setPadding;
+    private setMargin;
+}