@reekon-tools/boldr-utils 1.6.15 → 1.6.17

package/dist/annotation/canvas/AnnotationCanvasInner.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useFont } from '@shopify/react-native-skia';
-import { useCallback, useEffect, useRef, } from 'react';
+import { Skia, useFont, useTypeface } from '@shopify/react-native-skia';
+import { useCallback, useEffect, useMemo, useRef, } from 'react';
 import { AnnotationCanvasSkia } from './AnnotationCanvasSkia.js';
+import { TEXT_FONT_FAMILY } from './elements/ShapeElement.js';
 import { buildRemoveMeasurementOps } from './measurementGeometry.js';
 import { useAnnotationCanvasState, } from './useAnnotationCanvasState.js';
 import { stampTileSize } from './stampLayout.js';
@@ -17,6 +18,20 @@ export const AnnotationCanvasInner = (props) => {
     const allowMiddlePan = panTriggers.includes('middleMouse');
     const allowRightPan = panTriggers.includes('rightMouse');
     const valueFont = useFont(stampFontSource, stampValueFontSize);
+    // Typeface provider for text-shape Paragraphs. CanvasKit's registerFont
+    // rejects the raw pointer valueFont.getTypeface() returns, and useFonts can't
+    // take a plain URL (its resolveAsset expects a bundled module). So load the
+    // typeface via useTypeface — which fetches the URL and builds a *managed*
+    // typeface (MakeFreeTypeFaceFromData) — then register that. Null until the
+    // async load resolves; ShapeElement renders text only once it's ready.
+    const textTypeface = useTypeface(stampFontSource);
+    const textFontMgr = useMemo(() => {
+        if (!textTypeface)
+            return null;
+        const provider = Skia.TypefaceFontProvider.Make();
+        provider.registerFont(textTypeface, TEXT_FONT_FAMILY);
+        return provider;
+    }, [textTypeface]);
     const state = useAnnotationCanvasState(props);
     const containerRef = useRef(null);
     const panGestureRef = useRef(null);
@@ -179,6 +194,7 @@ export const AnnotationCanvasInner = (props) => {
                 worldTransform: state.worldTransform,
                 resolveImageUrl,
                 valueFont,
+                textFontMgr,
                 penDrawingStroke: state.penDrawingStroke,
                 // Endpoint handles on the selected line annotation. Web drives endpoint
                 // drag through selectTool's pointer handlers (preview patches update the

package/dist/annotation/canvas/AnnotationCanvasSkia.d.ts

@@ -1,4 +1,4 @@
-import { type SkFont, type SkPath, type Transforms3d } from '@shopify/react-native-skia';
+import { type SkFont, type SkPath, type SkTypefaceFontProvider, type Transforms3d } from '@shopify/react-native-skia';
 import type { ReactNode } from 'react';
 import type { AnnotationCanvasState, AnnotationStroke, StrokeCap } from '../../types/annotation.js';
 type AnimatedPoint = {
@@ -22,6 +22,7 @@ export interface AnnotationCanvasSkiaProps {
     };
     resolveImageUrl?: (storagePath: string) => Promise<string>;
     valueFont: SkFont | null;
+    textFontMgr?: SkTypefaceFontProvider | null;
     penDrawingStroke: AnnotationStroke | null;
     livePreview?: {
         path: SkPath | {
@@ -72,5 +73,5 @@ export interface AnnotationCanvasSkiaProps {
     };
     customPreview?: ReactNode;
 }
-export declare const AnnotationCanvasSkia: ({ width, height, effectiveCanvas, worldTransform, resolveImageUrl, valueFont, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, handleRadius, customPreview, }: AnnotationCanvasSkiaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AnnotationCanvasSkia: ({ width, height, effectiveCanvas, worldTransform, resolveImageUrl, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, handleRadius, customPreview, }: AnnotationCanvasSkiaProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/annotation/canvas/AnnotationCanvasSkia.js

@@ -86,7 +86,7 @@ const SelectionBox = ({ bounds, isDragging, transform, }) => (_jsx(DraggableElem
 // since the function-call pattern works identically on native we use it
 // in both Inners for consistency. Don't add hooks here; this is a plain
 // JSX-returning helper, not a component.
-export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTransform, resolveImageUrl, valueFont, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, handleRadius, customPreview, }) => (_jsx(Canvas, { style: { width, height }, children: _jsxs(Group, { transform: worldTransform, children: [effectiveCanvas.viewport.backgroundImage && (_jsx(BackgroundImageElement, { image: effectiveCanvas.viewport.backgroundImage, docWidth: effectiveCanvas.viewport.width, docHeight: effectiveCanvas.viewport.height, fit: effectiveCanvas.viewport.backgroundFit ?? 'contain', resolveUrl: resolveImageUrl })), effectiveCanvas.strokes.map((stroke) => (_jsx(DraggableElement, { isDragging: stroke.id === draggingId, transform: dragTransform, children: _jsx(StrokeElement, { stroke: stroke }) }, stroke.id))), effectiveCanvas.shapes.map((shape) => (_jsx(DraggableElement, { isDragging: shape.id === draggingId || shape.id === resizingId, transform: shape.id === resizingId ? resizeTransform : dragTransform, children: _jsx(ShapeElement, { shape: shape, font: valueFont }) }, shape.id))), effectiveCanvas.placedMeasurements.map((placed) => {
+export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTransform, resolveImageUrl, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, handleRadius, customPreview, }) => (_jsx(Canvas, { style: { width, height }, children: _jsxs(Group, { transform: worldTransform, children: [effectiveCanvas.viewport.backgroundImage && (_jsx(BackgroundImageElement, { image: effectiveCanvas.viewport.backgroundImage, docWidth: effectiveCanvas.viewport.width, docHeight: effectiveCanvas.viewport.height, fit: effectiveCanvas.viewport.backgroundFit ?? 'contain', resolveUrl: resolveImageUrl })), effectiveCanvas.strokes.map((stroke) => (_jsx(DraggableElement, { isDragging: stroke.id === draggingId, transform: dragTransform, children: _jsx(StrokeElement, { stroke: stroke }) }, stroke.id))), effectiveCanvas.shapes.map((shape) => (_jsx(DraggableElement, { isDragging: shape.id === draggingId || shape.id === resizingId, transform: shape.id === resizingId ? resizeTransform : dragTransform, children: _jsx(ShapeElement, { shape: shape, font: valueFont, textFontMgr: textFontMgr }) }, shape.id))), effectiveCanvas.placedMeasurements.map((placed) => {
                 // Rectangle annotation: a stroked border whose center carries the
                 // tile. A corner drag renders from the live geometry (outside the
                 // group translate, like an endpoint drag); otherwise the committed

package/dist/annotation/canvas/elements/ShapeElement.d.ts

@@ -1,7 +1,9 @@
-import { type SkFont } from '@shopify/react-native-skia';
+import { type SkFont, type SkTypefaceFontProvider } from '@shopify/react-native-skia';
 import type { AnnotationShape } from '../../../types/annotation.js';
+export declare const TEXT_FONT_FAMILY = "annotation-text";
 export interface ShapeElementProps {
     shape: AnnotationShape;
     font?: SkFont | null;
+    textFontMgr?: SkTypefaceFontProvider | null;
 }
-export declare const ShapeElement: import("react").MemoExoticComponent<({ shape, font }: ShapeElementProps) => import("react/jsx-runtime").JSX.Element | null>;
+export declare const ShapeElement: import("react").MemoExoticComponent<({ shape, font, textFontMgr }: ShapeElementProps) => import("react/jsx-runtime").JSX.Element | null>;

package/dist/annotation/canvas/elements/ShapeElement.js

@@ -3,10 +3,10 @@ import { Circle, DashPathEffect, Line, Paragraph, Path, Rect, Skia, TextDecorati
 import { memo, useMemo } from 'react';
 import { arrowheadTriangle, dashIntervals, toSkiaStrokeCap, } from '../strokeGeometry.js';
 import { DEFAULT_TEXT_FONT_SIZE, TEXT_LINE_HEIGHT_FACTOR, } from '../textGeometry.js';
-// Family the loaded annotation typeface is registered under in the per-shape
-// TypefaceFontProvider that backs the text Paragraph (reusing the same typeface
-// the rest of the canvas draws with).
-const TEXT_FONT_FAMILY = 'annotation-text';
+// Family the loaded annotation typeface is registered under in the
+// TypefaceFontProvider that backs the text Paragraph. Exported so the web
+// canvas can register its font under the same name via useFonts (see below).
+export const TEXT_FONT_FAMILY = 'annotation-text';
 // A wide layout width so text only breaks on explicit '\n' (never auto-wraps).
 // Left-aligned, so the unused width is never visible.
 const TEXT_LAYOUT_WIDTH = 100000;
@@ -36,7 +36,7 @@ const polygonPath = (points, closed) => {
 };
 // Memoized — see StrokeElement. Unchanged shapes keep their identity across
 // applyPatch, so only the edited shape (and the shared font) re-render.
-export const ShapeElement = memo(({ shape, font }) => {
+export const ShapeElement = memo(({ shape, font, textFontMgr }) => {
     const { kind, geometry, style, text } = shape;
     const stroke = style.stroke ?? '#000000';
     const fill = style.fill;
@@ -78,10 +78,29 @@ export const ShapeElement = memo(({ shape, font }) => {
     // is registered into a provider so the Paragraph draws with the same typeface
     // as the rest of the canvas. Built only for text shapes.
     const textParagraph = useMemo(() => {
-        if (kind !== 'text' || !text || !font)
+        if (kind !== 'text' || !text)
             return null;
-        const typeface = font.getTypeface();
-        if (!typeface)
+        // Resolve the typeface provider that backs the Paragraph. Web threads one
+        // pre-built via useFonts (managed typeface); native builds one here from
+        // the loaded SkFont. `textFontMgr === undefined` distinguishes "native, no
+        // manager threaded" from "web, manager still loading (null)" — in the
+        // latter we render nothing rather than fall back to the SkFont path, which
+        // throws on CanvasKit (raw pointer to registerFont).
+        let provider;
+        if (textFontMgr !== undefined) {
+            provider = textFontMgr;
+        }
+        else if (font) {
+            const typeface = font.getTypeface();
+            if (!typeface)
+                return null;
+            provider = Skia.TypefaceFontProvider.Make();
+            provider.registerFont(typeface, TEXT_FONT_FAMILY);
+        }
+        else {
+            provider = null;
+        }
+        if (!provider)
             return null;
         const fontSize = style.fontSize ?? DEFAULT_TEXT_FONT_SIZE;
         const decoration = style.textDecoration;
@@ -105,8 +124,6 @@ export const ShapeElement = memo(({ shape, font }) => {
         else if (decoration === 'highlight') {
             textStyle.backgroundColor = Skia.Color(colorStr);
         }
-        const provider = Skia.TypefaceFontProvider.Make();
-        provider.registerFont(typeface, TEXT_FONT_FAMILY);
         const builder = Skia.ParagraphBuilder.Make({
             textStyle,
             strutStyle: {
@@ -119,7 +136,15 @@ export const ShapeElement = memo(({ shape, font }) => {
         builder.pushStyle(textStyle);
         builder.addText(text);
         return builder.build();
-    }, [kind, text, font, style.fontSize, style.textDecoration, style.stroke]);
+    }, [
+        kind,
+        text,
+        font,
+        textFontMgr,
+        style.fontSize,
+        style.textDecoration,
+        style.stroke,
+    ]);
     const dashEffect = style.dash ? (_jsx(DashPathEffect, { intervals: dashIntervals(strokeWidth) })) : null;
     switch (kind) {
         case 'rect': {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reekon-tools/boldr-utils",
-  "version": "1.6.15",
+  "version": "1.6.17",
   "description": "Shared utilities for formulas and measurement conversion used in Reekon apps",
   "author": "REEKON Tools",
   "license": "MIT",