modern-canvas 0.6.11 → 0.6.13

package/dist/index.cjs

@@ -961,6 +961,8 @@ class CoreObject extends modernIdoc.EventEmitter {
       if (value && typeof value === "object") {
         if ("toJSON" in value && typeof value.toJSON === "function") {
           json[key] = value.toJSON();
+        } else if (Array.isArray(value)) {
+          json[key] = [...value];
         } else {
           json[key] = { ...value };
         }
@@ -2445,7 +2447,7 @@ attribute vec4 aColorMatrixOffset;
 attribute vec4 aDisableWrapMode;
 
 uniform mat3 projectionMatrix;
-uniform mat3 translationMatrix;
+uniform mat3 worldTransformMatrix;
 uniform vec4 modulate;
 
 varying float vTextureId;
@@ -2457,8 +2459,14 @@ varying vec4 vColorMatrixOffset;
 varying vec4 vDisableWrapMode;
 
 void main(void) {
+  mat3 modelMatrix = mat3(
+    1.0, 0.0, 0.0,
+    0.0, 1.0, 0.0,
+    0.0, 0.0, 1.0
+  );
   vTextureId = aTextureId;
-  gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aPosition, 1.0)).xy, 0.0, 1.0);
+  mat3 modelViewProjectionMatrix = projectionMatrix * worldTransformMatrix * modelMatrix;
+  gl_Position = vec4((modelViewProjectionMatrix * vec3(aPosition, 1.0)).xy, 0.0, 1.0);
   vUv = aUv;
   vModulate = aModulate * modulate;
   vBackgroundColor = aBackgroundColor;
@@ -2549,7 +2557,6 @@ void main(void) {
         renderer2.program.updateUniforms(program, {
           samplers,
           modulate: [1, 1, 1, 1],
-          translationMatrix: [1, 0, 0, 0, 1, 0, 0, 0, 1],
           ...renderer2.program.uniforms
         });
         renderer2.vertexArray.bind(vao ?? vertexArray);
@@ -3204,7 +3211,8 @@ class WebGLProgramModule extends WebGLModule {
   }
   boundProgram = null;
   uniforms = {
-    projectionMatrix: [1, 0, 0, 0, 1, 0, 0, 0, 1]
+    projectionMatrix: [1, 0, 0, 0, 1, 0, 0, 0, 1],
+    worldTransformMatrix: [1, 0, 0, 0, 1, 0, 0, 0, 1]
   };
   create(options) {
     const program = this.gl.createProgram();
@@ -3406,7 +3414,10 @@ ${gl.getShaderInfoLog(shader)}`);
   reset() {
     super.reset();
     this.boundProgram = null;
-    this.uniforms = {};
+    this.uniforms = {
+      projectionMatrix: [1, 0, 0, 0, 1, 0, 0, 0, 1],
+      worldTransformMatrix: [1, 0, 0, 0, 1, 0, 0, 0, 1]
+    };
   }
   free() {
     super.free();
@@ -6053,18 +6064,21 @@ exports.Node = class Node extends CoreObject {
   toJSON() {
     return modernIdoc.clearUndef({
       ...super.toJSON(),
-      is: this.is,
       children: this._children.length ? [...this._children.map((child) => child.toJSON())] : void 0,
-      meta: Object.keys(this.meta).length ? { ...this.meta } : void 0
+      meta: {
+        ...this.meta,
+        inCanvasIs: this.is
+      }
     });
   }
   static parse(value) {
     if (Array.isArray(value)) {
       return value.map((val) => this.parse(val));
     }
-    const { is, props, children } = value;
-    const Class = customNodes.get(is) ?? exports.Node;
-    const node = new Class(props);
+    const { meta = {}, children, ...props } = value;
+    const { inCanvasIs = "Node" } = meta;
+    const Class = customNodes.get(inCanvasIs) ?? exports.Node;
+    const node = new Class({ ...props, meta });
     children?.forEach((child) => node.appendChild(this.parse(child)));
     return node;
   }
@@ -7106,7 +7120,19 @@ class CanvasContext extends modernPath2d.Path2D {
     if (!this.curves.length) {
       return;
     }
-    const strokeStyle = this.strokeStyle ?? (typeof this.style.stroke === "string" ? this.style.stroke : void 0);
+    let strokeStyle = this.strokeStyle;
+    if (!strokeStyle && this.style.stroke) {
+      switch (typeof this.style.stroke) {
+        case "string":
+          strokeStyle = this.style.stroke;
+          break;
+        case "object":
+          if (modernIdoc.isColorFillObject(this.style.stroke)) {
+            strokeStyle = this.style.stroke.color;
+          }
+          break;
+      }
+    }
     this._draws.push({
       ...options,
       type: "stroke",
@@ -7134,7 +7160,19 @@ class CanvasContext extends modernPath2d.Path2D {
     if (!this.curves.length) {
       return;
     }
-    const fillStyle = this.fillStyle ?? (typeof this.style.fill === "string" ? this.style.fill : void 0);
+    let fillStyle = this.fillStyle;
+    if (!fillStyle && this.style.fill) {
+      switch (typeof this.style.fill) {
+        case "string":
+          fillStyle = this.style.fill;
+          break;
+        case "object":
+          if (modernIdoc.isColorFillObject(this.style.fill)) {
+            fillStyle = this.style.fill.color;
+          }
+          break;
+      }
+    }
     this._draws.push({
       ...options,
       type: "fill",
@@ -9279,6 +9317,8 @@ class BaseElement2DText extends CoreObject {
       switch (args[0]) {
         case "content":
         case "effects":
+        case "fill":
+        case "outline":
           this.setter(args[0], args[1]);
           break;
       }
@@ -9295,12 +9335,14 @@ class BaseElement2DText extends CoreObject {
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
     switch (key) {
+      case "enabled":
       case "content":
       case "effects":
-      case "measureDOM":
+      case "measureDom":
       case "fonts":
+      case "fill":
+      case "outline":
       case "split":
-      case "enabled":
         this.parent.requestRedraw();
         break;
     }
@@ -9351,8 +9393,14 @@ __decorateClass$o([
   modernIdoc.property({ alias: "base.effects" })
 ], BaseElement2DText.prototype, "effects");
 __decorateClass$o([
-  modernIdoc.property({ protected: true, alias: "base.measureDOM" })
-], BaseElement2DText.prototype, "measureDOM");
+  modernIdoc.property({ alias: "base.fill" })
+], BaseElement2DText.prototype, "fill");
+__decorateClass$o([
+  modernIdoc.property({ alias: "base.outline" })
+], BaseElement2DText.prototype, "outline");
+__decorateClass$o([
+  modernIdoc.property({ protected: true, alias: "base.measureDom" })
+], BaseElement2DText.prototype, "measureDom");
 __decorateClass$o([
   modernIdoc.property({ protected: true, alias: "base.fonts" })
 ], BaseElement2DText.prototype, "fonts");

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import { Font } from 'modern-font';
-import { EventListenerOptions, EventListenerValue, EventEmitter, PropertyDeclaration, ReactiveObject, ReactiveObjectPropertyAccessorContext, Color as Color$1, RawWeakMap as RawWeakMap$1, LinearGradient, RadialGradient, NormalizedFill, Fill, NormalizedBackground, Background, NormalizedForeground, Foreground, NormalizedOutline, Outline, NormalizedShadow, Shadow, NormalizedShape, Shape, NormalizedStyle, Text as Text$1, Style, ImageFillCropRect } from 'modern-idoc';
+import { EventListenerOptions, EventListenerValue, EventEmitter, PropertyDeclaration, ReactiveObject, ReactiveObjectPropertyAccessorContext, Color as Color$1, RawWeakMap as RawWeakMap$1, LinearGradient, RadialGradient, NormalizedFill, Fill, NormalizedBackground, Background, NormalizedForeground, Foreground, NormalizedOutline, Outline, NormalizedShadow, Shadow, NormalizedShape, Shape, FullStyle, Text as Text$1, Style, ImageFillCropRect } from 'modern-idoc';
 export { Color as ColorValue } from 'modern-idoc';
 import { AnimationItem } from 'lottie-web';
 import { Colord, RgbaColor, HslaColor, HsvaColor } from 'colord';
@@ -1046,7 +1046,10 @@ declare class WebGLMaskModule extends WebGLModule {
 declare class WebGLProgramModule extends WebGLModule {
     install(renderer: WebGLRenderer): void;
     boundProgram: WebGLProgram | null;
-    uniforms: Record<string, any>;
+    uniforms: {
+        projectionMatrix: number[];
+        worldTransformMatrix: number[];
+    };
     create(options?: WebGLProgramOptions): WebGLProgram;
     getMeta(program: WebGLProgram): WebGLProgramMeta;
     update(options: WebGLProgramOptions): void;
@@ -1607,6 +1610,7 @@ type ProcessSortMode = 'default' | 'parent_before';
 type RenderMode = 'inherit' | 'always' | 'disabled';
 type InternalMode = 'default' | 'front' | 'back';
 interface NodeProperties {
+    id: string;
     name: string;
     mask: Maskable;
     processMode: ProcessMode;
@@ -1708,8 +1712,7 @@ declare class Node extends CoreObject {
     protected _render(renderer: WebGLRenderer): void;
     clone(): this;
     toJSON(): Record<string, any>;
-    static parse(value: Record<string, any>[]): Node[];
-    static parse(value: Record<string, any>): Node;
+    static parse(value: any): any;
 }
 
 interface TimelineNodeProperties extends NodeProperties {
@@ -1960,7 +1963,7 @@ declare class BaseElement2DShape extends CoreObject {
     drawRect(): void;
 }
 
-interface BaseElement2DStyleProperties extends Omit<NormalizedStyle, 'left' | 'top' | 'width' | 'height'> {
+interface BaseElement2DStyleProperties extends Omit<FullStyle, 'left' | 'top' | 'width' | 'height'> {
     left: number;
     top: number;
     width: number;
@@ -1977,7 +1980,9 @@ declare class BaseElement2DText extends CoreObject {
     enabled: boolean;
     content: Text['content'];
     effects: Text['effects'];
-    measureDOM: Text['measureDOM'];
+    fill: Text['fill'];
+    outline: Text['outline'];
+    measureDom: Text['measureDom'];
     fonts: Text['fonts'];
     readonly base: Text;
     measureResult?: MeasureResult;

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import { Font } from 'modern-font';
-import { EventListenerOptions, EventListenerValue, EventEmitter, PropertyDeclaration, ReactiveObject, ReactiveObjectPropertyAccessorContext, Color as Color$1, RawWeakMap as RawWeakMap$1, LinearGradient, RadialGradient, NormalizedFill, Fill, NormalizedBackground, Background, NormalizedForeground, Foreground, NormalizedOutline, Outline, NormalizedShadow, Shadow, NormalizedShape, Shape, NormalizedStyle, Text as Text$1, Style, ImageFillCropRect } from 'modern-idoc';
+import { EventListenerOptions, EventListenerValue, EventEmitter, PropertyDeclaration, ReactiveObject, ReactiveObjectPropertyAccessorContext, Color as Color$1, RawWeakMap as RawWeakMap$1, LinearGradient, RadialGradient, NormalizedFill, Fill, NormalizedBackground, Background, NormalizedForeground, Foreground, NormalizedOutline, Outline, NormalizedShadow, Shadow, NormalizedShape, Shape, FullStyle, Text as Text$1, Style, ImageFillCropRect } from 'modern-idoc';
 export { Color as ColorValue } from 'modern-idoc';
 import { AnimationItem } from 'lottie-web';
 import { Colord, RgbaColor, HslaColor, HsvaColor } from 'colord';
@@ -1046,7 +1046,10 @@ declare class WebGLMaskModule extends WebGLModule {
 declare class WebGLProgramModule extends WebGLModule {
     install(renderer: WebGLRenderer): void;
     boundProgram: WebGLProgram | null;
-    uniforms: Record<string, any>;
+    uniforms: {
+        projectionMatrix: number[];
+        worldTransformMatrix: number[];
+    };
     create(options?: WebGLProgramOptions): WebGLProgram;
     getMeta(program: WebGLProgram): WebGLProgramMeta;
     update(options: WebGLProgramOptions): void;
@@ -1607,6 +1610,7 @@ type ProcessSortMode = 'default' | 'parent_before';
 type RenderMode = 'inherit' | 'always' | 'disabled';
 type InternalMode = 'default' | 'front' | 'back';
 interface NodeProperties {
+    id: string;
     name: string;
     mask: Maskable;
     processMode: ProcessMode;
@@ -1708,8 +1712,7 @@ declare class Node extends CoreObject {
     protected _render(renderer: WebGLRenderer): void;
     clone(): this;
     toJSON(): Record<string, any>;
-    static parse(value: Record<string, any>[]): Node[];
-    static parse(value: Record<string, any>): Node;
+    static parse(value: any): any;
 }
 
 interface TimelineNodeProperties extends NodeProperties {
@@ -1960,7 +1963,7 @@ declare class BaseElement2DShape extends CoreObject {
     drawRect(): void;
 }
 
-interface BaseElement2DStyleProperties extends Omit<NormalizedStyle, 'left' | 'top' | 'width' | 'height'> {
+interface BaseElement2DStyleProperties extends Omit<FullStyle, 'left' | 'top' | 'width' | 'height'> {
     left: number;
     top: number;
     width: number;
@@ -1977,7 +1980,9 @@ declare class BaseElement2DText extends CoreObject {
     enabled: boolean;
     content: Text['content'];
     effects: Text['effects'];
-    measureDOM: Text['measureDOM'];
+    fill: Text['fill'];
+    outline: Text['outline'];
+    measureDom: Text['measureDom'];
     fonts: Text['fonts'];
     readonly base: Text;
     measureResult?: MeasureResult;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { Font } from 'modern-font';
-import { EventListenerOptions, EventListenerValue, EventEmitter, PropertyDeclaration, ReactiveObject, ReactiveObjectPropertyAccessorContext, Color as Color$1, RawWeakMap as RawWeakMap$1, LinearGradient, RadialGradient, NormalizedFill, Fill, NormalizedBackground, Background, NormalizedForeground, Foreground, NormalizedOutline, Outline, NormalizedShadow, Shadow, NormalizedShape, Shape, NormalizedStyle, Text as Text$1, Style, ImageFillCropRect } from 'modern-idoc';
+import { EventListenerOptions, EventListenerValue, EventEmitter, PropertyDeclaration, ReactiveObject, ReactiveObjectPropertyAccessorContext, Color as Color$1, RawWeakMap as RawWeakMap$1, LinearGradient, RadialGradient, NormalizedFill, Fill, NormalizedBackground, Background, NormalizedForeground, Foreground, NormalizedOutline, Outline, NormalizedShadow, Shadow, NormalizedShape, Shape, FullStyle, Text as Text$1, Style, ImageFillCropRect } from 'modern-idoc';
 export { Color as ColorValue } from 'modern-idoc';
 import { AnimationItem } from 'lottie-web';
 import { Colord, RgbaColor, HslaColor, HsvaColor } from 'colord';
@@ -1046,7 +1046,10 @@ declare class WebGLMaskModule extends WebGLModule {
 declare class WebGLProgramModule extends WebGLModule {
     install(renderer: WebGLRenderer): void;
     boundProgram: WebGLProgram | null;
-    uniforms: Record<string, any>;
+    uniforms: {
+        projectionMatrix: number[];
+        worldTransformMatrix: number[];
+    };
     create(options?: WebGLProgramOptions): WebGLProgram;
     getMeta(program: WebGLProgram): WebGLProgramMeta;
     update(options: WebGLProgramOptions): void;
@@ -1607,6 +1610,7 @@ type ProcessSortMode = 'default' | 'parent_before';
 type RenderMode = 'inherit' | 'always' | 'disabled';
 type InternalMode = 'default' | 'front' | 'back';
 interface NodeProperties {
+    id: string;
     name: string;
     mask: Maskable;
     processMode: ProcessMode;
@@ -1708,8 +1712,7 @@ declare class Node extends CoreObject {
     protected _render(renderer: WebGLRenderer): void;
     clone(): this;
     toJSON(): Record<string, any>;
-    static parse(value: Record<string, any>[]): Node[];
-    static parse(value: Record<string, any>): Node;
+    static parse(value: any): any;
 }
 
 interface TimelineNodeProperties extends NodeProperties {
@@ -1960,7 +1963,7 @@ declare class BaseElement2DShape extends CoreObject {
     drawRect(): void;
 }
 
-interface BaseElement2DStyleProperties extends Omit<NormalizedStyle, 'left' | 'top' | 'width' | 'height'> {
+interface BaseElement2DStyleProperties extends Omit<FullStyle, 'left' | 'top' | 'width' | 'height'> {
     left: number;
     top: number;
     width: number;
@@ -1977,7 +1980,9 @@ declare class BaseElement2DText extends CoreObject {
     enabled: boolean;
     content: Text['content'];
     effects: Text['effects'];
-    measureDOM: Text['measureDOM'];
+    fill: Text['fill'];
+    outline: Text['outline'];
+    measureDom: Text['measureDom'];
     fonts: Text['fonts'];
     readonly base: Text;
     measureResult?: MeasureResult;