@noya-app/noya-graphics - npm Package Compare versions

Comparing version 0.1.7 to 0.1.8

CHANGELOG.md

 # @noya-app/noya-graphics
 
+## 0.1.8
+
+### Patch Changes
+
+- 6862974: Combined updates
+- Updated dependencies [6862974]
+  - @noya-app/noya-geometry@0.1.5
+
 ## 0.1.7
@@ -4,0 +12,0 @@

dist/index.d.ts

 import * as React$1 from 'react';
 import React__default, { ReactNode } from 'react';
 import * as _noya_app_noya_canvaskit from '@noya-app/noya-canvaskit';
-import { CanvasKit, InputColor, BlurStyle, Path as Path$1, ClipOp, Color, PaintStyle, MaskFilter, StrokeJoin, StrokeCap, ColorFilter, ImageFilter, Paint, Paragraph, Rect as Rect$1 } from '@noya-app/noya-canvaskit';
+import { CanvasKit, InputColor, BlurStyle, Path as Path$1, ClipOp, Color, PaintStyle, MaskFilter, StrokeJoin, StrokeCap, ColorFilter, ImageFilter, Paint, Paragraph, TextStyle, Rect as Rect$1 } from '@noya-app/noya-canvaskit';
 export { Rect as CanvasKitRect } from '@noya-app/noya-canvaskit';
@@ -94,4 +94,6 @@ import { Point, AffineTransform, Rect } from '@noya-app/noya-geometry';
 type TextComponentProps = {
-    rect: Rect | RectParameters;
-    paragraph: Paragraph;
+    rect?: Rect | RectParameters;
+    origin?: Point;
+    paragraph?: string | Paragraph;
+    style?: TextStyle;
 };
@@ -98,0 +100,0 @@ declare const Text: React__default.NamedExoticComponent<TextComponentProps>;

dist/index.js

@@ -301,3 +301,3 @@ "use strict";
     return p;
-  }, [CanvasKit, rect]);
+  }, [CanvasKit, props.cornerRadius, rect]);
   useDeletable(path);
@@ -318,7 +318,100 @@ return /* @__PURE__ */ import_react8.default.createElement(Path, { ...props, paint, path });
 });
-var Text = (0, import_react8.memo)(function Text2(props) {
+var fontPromise;
+var fontResult;
+function useParagraph({
+  paragraph: inputParagraph,
+  rect,
+  style
+}) {
+  const CanvasKit = useCanvasKit();
+  const [font, setFont] = (0, import_react8.useState)(fontResult);
+  (0, import_react8.useEffect)(() => {
+    if (typeof inputParagraph !== "string")
+      return;
+    if (!fontPromise) {
+      fontPromise = fetch(
+        "https://fonts.gstatic.com/s/ibmplexmono/v6/-F63fjptAgt5VM-kVkqdyU8n5igg1l9kn-s.ttf"
+      ).then((res) => res.arrayBuffer()).then((font2) => {
+        fontResult = font2;
+        return font2;
+      });
+    }
+    fontPromise.then(setFont);
+  }, [CanvasKit, inputParagraph]);
+  const typefaceFontProvider = (0, import_react8.useMemo)(() => {
+    if (!font)
+      return void 0;
+    const typefaceFontProvider2 = CanvasKit.TypefaceFontProvider.Make();
+    typefaceFontProvider2.registerFont(font, "system");
+    return typefaceFontProvider2;
+  }, [CanvasKit, font]);
+  const width = (0, import_react8.useMemo)(() => {
+    return rect ? canvasKitRectToRect(rect).width : 1e4;
+  }, [rect]);
+  const paragraph = (0, import_react8.useMemo)(() => {
+    if (typeof inputParagraph === "string") {
+      if (!font || !typefaceFontProvider)
+        return void 0;
+      const builder = CanvasKit.ParagraphBuilder.MakeFromFontProvider(
+        new CanvasKit.ParagraphStyle({
+          textStyle: {
+            fontSize: 12,
+            color: CanvasKit.BLACK,
+            ...style
+          }
+        }),
+        typefaceFontProvider
+      );
+      builder.addText(inputParagraph);
+      const result = builder.build();
+      result.layout(width);
+      builder.delete();
+      return result;
+    }
+    return inputParagraph;
+  }, [CanvasKit, inputParagraph, font, typefaceFontProvider, width, style]);
+  useDeletable(paragraph);
+  return paragraph;
+}
+var MeasuredText = (0, import_react8.memo)(function MeasuredText2(props) {
   const { Text: Text3 } = useComponents();
-  const rect = useCanvasKitRect(props.rect);
+  const size = (0, import_react8.useMemo)(() => {
+    const clonedParagraph = props.paragraph.clone();
+    clonedParagraph.layout(1e4);
+    const size2 = {
+      width: clonedParagraph.getMaxWidth(),
+      height: clonedParagraph.getHeight()
+    };
+    clonedParagraph.delete();
+    return size2;
+  }, [props.paragraph]);
+  const rect = (0, import_react8.useMemo)(() => {
+    return rectToCanvasKitRect({
+      x: props.origin?.x ?? 0,
+      y: props.origin?.y ?? 0,
+      ...size
+    });
+  }, [props.origin?.x, props.origin?.y, size]);
   return /* @__PURE__ */ import_react8.default.createElement(Text3, { ...props, rect });
 });
+var Text = (0, import_react8.memo)(function Text2({
+  rect: initialRect,
+  paragraph: initialParagraph,
+  ...rest
+}) {
+  const { Text: Text3 } = useComponents();
+  const rect = initialRect ? rectToCanvasKitRect(initialRect) : void 0;
+  const paragraph = useParagraph({
+    paragraph: initialParagraph,
+    rect,
+    style: rest.style
+  });
+  if (!paragraph) {
+    return null;
+  }
+  if (!rect) {
+    return /* @__PURE__ */ import_react8.default.createElement(MeasuredText, { ...rest, paragraph });
+  }
+  return /* @__PURE__ */ import_react8.default.createElement(Text3, { ...rest, rect, paragraph });
+});
 var Image = (0, import_react8.memo)(function Image2(props) {
@@ -365,3 +458,2 @@ const { Image: Image3 } = useComponents();
     return props.transform ? props.transform.append(transform) : void 0;
-    return void 0;
   }, [props.transform, transform]);
@@ -368,0 +460,0 @@ if (newTransform) {

package.json

 {
   "name": "@noya-app/noya-graphics",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "main": "./dist/index.js",
@@ -13,3 +13,3 @@ "module": "./dist/index.mjs",
     "@noya-app/noya-canvaskit": "0.1.0",
-    "@noya-app/noya-geometry": "0.1.4"
+    "@noya-app/noya-geometry": "0.1.5"
   },
@@ -16,0 +16,0 @@ "peerDependencies": {

New alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

127577

increased by18.65%

Number of package files

28

increased by3.7%

Lines of code

1854

increased by20.31%

Worsened metrics

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Added@noya-app/noya-geometry@0.1.5(transitive)

• - Removed@noya-app/noya-geometry@0.1.4(transitive)

• Updated@noya-app/noya-geometry@0.1.5