modern-canvas 0.1.1 → 0.1.2

package/dist/index.mjs

@@ -1,7 +1,8 @@
 import { extend, colord } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import earcut from 'earcut';
-import { textDefaultStyle, measureText, renderText } from 'modern-text';
+import { getDefaultTextStyle, getDefaultTransformStyle } from 'modern-idoc';
+import { textDefaultStyle, Text } from 'modern-text';
 
 const PI = Math.PI;
 const PI_2 = PI * 2;
@@ -6256,61 +6257,22 @@ function getComputedFilterColorMatrix() {
   return m;
 }
 
-class Style2DOffsetModule extends Style2DModule {
-  install(Style2D) {
-    defineProperty(Style2D, "offsetPath");
-    defineProperty(Style2D, "offsetAnchor");
-    defineProperty(Style2D, "offsetDistance");
-    defineProperty(Style2D, "offsetPosition");
-    Style2D.prototype.getComputedOffset = getComputedOffset;
-  }
-}
-function getComputedOffset() {
-  const offsetPath = this.offsetPath;
-  if (!offsetPath)
-    return;
-  if (offsetPath.startsWith("path")) {
-    const path = offsetPath.match(/path\(["'](.+)["']\)/)?.[1];
-    if (!path)
-      return;
-    path.split(" ").forEach((arg) => {
-    });
-  } else if (offsetPath.startsWith("ray")) ; else if (offsetPath.startsWith("url")) ; else if (offsetPath.startsWith("circle")) ; else if (offsetPath.startsWith("ellipse")) ; else if (offsetPath.startsWith("insett")) ; else if (offsetPath.startsWith("polygon")) ; else if (offsetPath.startsWith("rect")) ; else if (offsetPath.startsWith("xywh")) ;
-}
-
 class Style2DTextModule extends Style2DModule {
   install(Style2D) {
-    defineProperty(Style2D, "color", { default: "#000000" });
-    defineProperty(Style2D, "fontSize", { default: 14 });
-    defineProperty(Style2D, "fontWeight", { default: "normal" });
-    defineProperty(Style2D, "fontFamily", { default: "sans-serif" });
-    defineProperty(Style2D, "fontStyle", { default: "normal" });
-    defineProperty(Style2D, "fontKerning", { default: "normal" });
-    defineProperty(Style2D, "textWrap", { default: "wrap" });
-    defineProperty(Style2D, "textAlign", { default: "start" });
-    defineProperty(Style2D, "verticalAlign", { default: "middle" });
-    defineProperty(Style2D, "textTransform", { default: "none" });
-    defineProperty(Style2D, "textDecoration", { default: null });
-    defineProperty(Style2D, "textStrokeWidth", { default: 0 });
-    defineProperty(Style2D, "textStrokeColor", { default: "#000000" });
+    const style = getDefaultTextStyle();
+    for (const key in style) {
+      defineProperty(Style2D, key, { default: style[key] });
+    }
     defineProperty(Style2D, "direction", { default: "inherit" });
-    defineProperty(Style2D, "lineHeight", { default: 1 });
-    defineProperty(Style2D, "letterSpacing", { default: 0 });
-    defineProperty(Style2D, "writingMode", { default: "horizontal-tb" });
   }
 }
 
 class Style2DTransformModule extends Style2DModule {
   install(Style2D) {
-    defineProperty(Style2D, "left", { default: 0 });
-    defineProperty(Style2D, "top", { default: 0 });
-    defineProperty(Style2D, "width", { default: 0 });
-    defineProperty(Style2D, "height", { default: 0 });
-    defineProperty(Style2D, "rotate", { default: 0 });
-    defineProperty(Style2D, "scaleX", { default: 1 });
-    defineProperty(Style2D, "scaleY", { default: 1 });
-    defineProperty(Style2D, "transform");
-    defineProperty(Style2D, "transformOrigin", { default: "center" });
+    const style = getDefaultTransformStyle();
+    for (const key in style) {
+      defineProperty(Style2D, key, { default: style[key] });
+    }
     Style2D.prototype.getComputedTransform = getComputedTransform;
     Style2D.prototype.getComputedTransformOrigin = getComputedTransformOrigin;
   }
@@ -6319,7 +6281,11 @@ function getComputedTransform() {
   const transform = new Transform2D();
   const transform3d = new Transform2D(false);
   const transform2d = new Transform2D(false).scale(this.scaleX, this.scaleY).translate(this.left, this.top).rotate(this.rotate * DEG_TO_RAD);
-  parseCssFunctions(this.transform ?? "", { width: this.width, height: this.height }).forEach(({ name, args }) => {
+  let _transform = this.transform;
+  if (!_transform || _transform === "none") {
+    _transform = "";
+  }
+  parseCssFunctions(_transform, { width: this.width, height: this.height }).forEach(({ name, args }) => {
     const values = args.map((arg) => arg.normalizedIntValue);
     transform.identity();
     switch (name) {
@@ -6430,15 +6396,6 @@ function getComputedTransformOrigin() {
   });
 }
 
-const modules = {
-  __proto__: null,
-  Style2DBackgroundModule: Style2DBackgroundModule,
-  Style2DFilterModule: Style2DFilterModule,
-  Style2DOffsetModule: Style2DOffsetModule,
-  Style2DTextModule: Style2DTextModule,
-  Style2DTransformModule: Style2DTransformModule
-};
-
 var __defProp$r = Object.defineProperty;
 var __decorateClass$r = (decorators, target, key, kind) => {
   var result = void 0 ;
@@ -6492,7 +6449,12 @@ __decorateClass$r([
 __decorateClass$r([
   property({ default: "visible" })
 ], Style2D.prototype, "overflow");
-Object.values(modules).forEach((Module) => {
+[
+  Style2DBackgroundModule,
+  Style2DFilterModule,
+  Style2DTextModule,
+  Style2DTransformModule
+].forEach((Module) => {
   new Module().install(Style2D);
 });
 
@@ -7551,6 +7513,9 @@ var __decorateClass$k = (decorators, target, key, kind) => {
 const textStyles = new Set(Object.keys(textDefaultStyle));
 let Text2D = class extends Node2D {
   effects;
+  measureDom;
+  fonts;
+  text = new Text();
   texture = new Texture(document.createElement("canvas"));
   _subTextsCount = 0;
   constructor(options) {
@@ -7561,6 +7526,8 @@ let Text2D = class extends Node2D {
     super._onUpdateProperty(key, value, oldValue);
     switch (key) {
       case "content":
+      case "effects":
+      case "fonts":
       case "split":
         this._updateSplit();
         this.requestRedraw();
@@ -7572,6 +7539,13 @@ let Text2D = class extends Node2D {
       });
     }
   }
+  _updateText() {
+    this.text.style = this.style.toJSON();
+    this.text.content = this.content ?? "";
+    this.text.effects = this.effects;
+    this.text.fonts = this.fonts;
+    this.text.measureDom = this.measureDom;
+  }
   _onUpdateStyleProperty(key, value, oldValue) {
     if (key === "height")
       return;
@@ -7615,13 +7589,8 @@ let Text2D = class extends Node2D {
     }
   }
   measure() {
-    const result = measureText({
-      content: this.content,
-      style: {
-        ...this.style.toJSON(),
-        height: void 0
-      }
-    });
+    this._updateText();
+    const result = this.text.measure();
     if (!this.style.width)
       this.style.width = result.boundingBox.width;
     if (!this.style.height)
@@ -7665,12 +7634,10 @@ let Text2D = class extends Node2D {
       if (onText2DRender) {
         onText2DRender();
       } else {
-        renderText({
-          view: this.texture.source,
+        this._updateText();
+        this.text.render({
           pixelRatio: this.pixelRatio,
-          content: this.content,
-          effects: this.effects,
-          style: this.style.toJSON()
+          view: this.texture.source
         });
       }
       this.texture.requestUpload();
@@ -7695,6 +7662,12 @@ __decorateClass$k([
 __decorateClass$k([
   property()
 ], Text2D.prototype, "effects", 2);
+__decorateClass$k([
+  protectedProperty()
+], Text2D.prototype, "measureDom", 2);
+__decorateClass$k([
+  protectedProperty()
+], Text2D.prototype, "fonts", 2);
 Text2D = __decorateClass$k([
   customNode("Text2D")
 ], Text2D);
@@ -13718,7 +13691,8 @@ class Engine extends SceneTree {
     } else {
       this.resize(
         width || this.gl.drawingBufferWidth || this.view?.clientWidth || 200,
-        height || this.gl.drawingBufferHeight || this.view?.clientHeight || 200
+        height || this.gl.drawingBufferHeight || this.view?.clientHeight || 200,
+        !view
       );
     }
   }
@@ -13853,4 +13827,4 @@ async function render(options) {
   });
 }
 
-export { Animation2D, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BlurEffect, Bounds, CanvasContext, CanvasItem, Circle, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, DEG_TO_RAD, DEVICE_PIXEL_RATIO, Effect, EffectMaterial, Ellipse, EmbossEffect, Engine, EventEmitter, FontLoader, Geometry, GifLoader, GlitchEffect, GodrayEffect, Graphics2D, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, Image2DResource, ImageTexture, IndexBuffer, Input, InternalMode, JsonLoader, KawaseEffect, LeftEraseEffect, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, MouseInputEvent, Node, Node2D, PI, PI_2, Path2D, PixelateEffect, PixelsTexture, Point, PointerInputEvent, Polygon, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, Rectangle, Reference, RenderStack, Renderer, Resource, RoundedRectangle, SUPPORTS_AUDIO_CONTEXT, SUPPORTS_CLICK_EVENTS, SUPPORTS_CREATE_IMAGE_BITMAP, SUPPORTS_IMAGE_BITMAP, SUPPORTS_MOUSE_EVENTS, SUPPORTS_OFFLINE_AUDIO_CONTEXT, SUPPORTS_POINTER_EVENTS, SUPPORTS_RESIZE_OBSERVER, SUPPORTS_TOUCH_EVENTS, SUPPORTS_WEBGL2, SUPPORTS_WEBKIT_AUDIO_CONTEXT, SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, SUPPORTS_WEB_AUDIO, SUPPORTS_WHEEL_EVENTS, SVGPath, SceneTree, Star, Style2D, Style2DBackgroundModule, Style2DFilterModule, Style2DModule, Style2DOffsetModule, Style2DTextModule, Style2DTransformModule, Text2D, TextLoader, Texture, TextureLoader, Ticker, TiltShiftEffect, Timer, Transform2D, Triangle, TwistEffect, UIInputEvent, UvGeometry, UvMaterial, Vector, Vector2, Vector3, Vector4, VertexAttribute, VertexBuffer, Video2D, VideoLoader, VideoTexture, Viewport, ViewportTexture, WebAudio, WebAudioContext, WebGLBatch2DModule, WebGLBlendMode, WebGLBufferModule, WebGLFramebufferModule, WebGLMaskModule, WebGLModule, WebGLProgramModule, WebGLRenderer, WebGLScissorModule, WebGLState, WebGLStateModule, WebGLStencilModule, WebGLTextureModule, WebGLVertexArrayModule, WebGLViewportModule, WebSound, WheelInputEvent, ZoomBlurEffect, _Object, assets, buildAdaptiveBezier, buildAdaptiveQuadratic, buildArc, buildArcTo, buildArcToSvg, buildCircle, buildLine, buildPolygon, buildRectangle, buildTriangle, clamp, closePointEps, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curveEps, curves, customNode, customNodes, defaultOptions, defineProperty, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, getDeclarations, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCssFunctions, parseCssProperty, property, protectedProperty, render, squaredDistanceToLineSegment, timingFunctions, uid };
+export { Animation2D, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BlurEffect, Bounds, CanvasContext, CanvasItem, Circle, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, DEG_TO_RAD, DEVICE_PIXEL_RATIO, Effect, EffectMaterial, Ellipse, EmbossEffect, Engine, EventEmitter, FontLoader, Geometry, GifLoader, GlitchEffect, GodrayEffect, Graphics2D, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, Image2DResource, ImageTexture, IndexBuffer, Input, InternalMode, JsonLoader, KawaseEffect, LeftEraseEffect, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, MouseInputEvent, Node, Node2D, PI, PI_2, Path2D, PixelateEffect, PixelsTexture, Point, PointerInputEvent, Polygon, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, Rectangle, Reference, RenderStack, Renderer, Resource, RoundedRectangle, SUPPORTS_AUDIO_CONTEXT, SUPPORTS_CLICK_EVENTS, SUPPORTS_CREATE_IMAGE_BITMAP, SUPPORTS_IMAGE_BITMAP, SUPPORTS_MOUSE_EVENTS, SUPPORTS_OFFLINE_AUDIO_CONTEXT, SUPPORTS_POINTER_EVENTS, SUPPORTS_RESIZE_OBSERVER, SUPPORTS_TOUCH_EVENTS, SUPPORTS_WEBGL2, SUPPORTS_WEBKIT_AUDIO_CONTEXT, SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, SUPPORTS_WEB_AUDIO, SUPPORTS_WHEEL_EVENTS, SVGPath, SceneTree, Star, Style2D, Style2DBackgroundModule, Style2DFilterModule, Style2DModule, Style2DTextModule, Style2DTransformModule, Text2D, TextLoader, Texture, TextureLoader, Ticker, TiltShiftEffect, Timer, Transform2D, Triangle, TwistEffect, UIInputEvent, UvGeometry, UvMaterial, Vector, Vector2, Vector3, Vector4, VertexAttribute, VertexBuffer, Video2D, VideoLoader, VideoTexture, Viewport, ViewportTexture, WebAudio, WebAudioContext, WebGLBatch2DModule, WebGLBlendMode, WebGLBufferModule, WebGLFramebufferModule, WebGLMaskModule, WebGLModule, WebGLProgramModule, WebGLRenderer, WebGLScissorModule, WebGLState, WebGLStateModule, WebGLStencilModule, WebGLTextureModule, WebGLVertexArrayModule, WebGLViewportModule, WebSound, WheelInputEvent, ZoomBlurEffect, _Object, assets, buildAdaptiveBezier, buildAdaptiveQuadratic, buildArc, buildArcTo, buildArcToSvg, buildCircle, buildLine, buildPolygon, buildRectangle, buildTriangle, clamp, closePointEps, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curveEps, curves, customNode, customNodes, defaultOptions, defineProperty, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, getDeclarations, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCssFunctions, parseCssProperty, property, protectedProperty, render, squaredDistanceToLineSegment, timingFunctions, uid };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-canvas",
   "type": "module",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "packageManager": "pnpm@9.15.1",
   "description": "A JavaScript WebGL rendering engine.",
   "author": "wxm",
@@ -70,7 +70,7 @@
     "colord": "^2.9.3",
     "earcut": "^3.0.1",
     "modern-font": "^0.3.5",
-    "modern-idoc": "^0.1.4",
+    "modern-idoc": "^0.1.5",
     "modern-path2d": "^1.0.1",
     "modern-text": "^1.0.7"
   },