@yuzhouu/canvas-kit 0.1.2

package/_vendor/plugin-image-product-react/svgImageAssetInliner.ts

@@ -0,0 +1,54 @@
+import type { AssetId } from "@land/canvas-core";
+import type { SvgAssetInliner } from "@land/canvas-product-react";
+import { isImageShapeRecord } from "@land/plugin-image";
+import type { ImageAssetService } from "./imageAssetService";
+import { readImageBlobAsDataUrl } from "./imageBlobStore";
+
+export function createImageSvgAssetInliner(
+  imageAssetService: ImageAssetService,
+): SvgAssetInliner {
+  return {
+    async inline({ editor, exportedShapeIds, svg }) {
+      let nextSvg = svg;
+      const processedAssetIds = new Set<AssetId>();
+
+      for (const shapeId of exportedShapeIds) {
+        const shape = editor.getShape(shapeId);
+        if (!isImageShapeRecord(shape) || !shape.props.assetId) {
+          continue;
+        }
+
+        const assetId = shape.props.assetId;
+        if (processedAssetIds.has(assetId)) {
+          continue;
+        }
+        processedAssetIds.add(assetId);
+
+        const asset = editor.getAsset(assetId);
+        const storageKey =
+          asset && typeof asset.props === "object"
+            ? (asset.props as Record<string, unknown>).storageKey
+            : null;
+        if (typeof storageKey !== "string" || storageKey.length === 0) {
+          continue;
+        }
+
+        const objectUrl =
+          imageAssetService.objectUrls.resolve(storageKey) ??
+          (await imageAssetService.objectUrls.preload(storageKey));
+        if (!objectUrl) {
+          continue;
+        }
+
+        const dataUrl = await readImageBlobAsDataUrl(storageKey);
+        if (!dataUrl) {
+          continue;
+        }
+
+        nextSvg = nextSvg.split(objectUrl).join(dataUrl);
+      }
+
+      return nextSvg;
+    },
+  };
+}

package/_vendor/plugin-image-product-react/useImageImport.ts

@@ -0,0 +1,64 @@
+import { useCallback } from "react";
+import type { Editor, ShapeId, Vec } from "@land/canvas-core";
+import {
+  insertImageFileIntoEditor,
+  replaceSelectedImageFromFile,
+  type ImageImportSource,
+} from "./imageHostActions";
+import type { ImageAssetService } from "./imageAssetService";
+
+export interface ImageImportControls {
+  insertImageFromFile(input: {
+    file: File;
+    pagePoint?: Vec;
+    source: ImageImportSource;
+  }): Promise<ShapeId | null>;
+  replaceSelectedImage(file: File): Promise<void>;
+}
+
+export function useImageImport({
+  editor,
+  imageAssetService,
+  persistEditorSnapshot,
+}: {
+  editor: Editor;
+  imageAssetService: ImageAssetService;
+  persistEditorSnapshot?: (editor: Editor) => Promise<void>;
+}): ImageImportControls {
+  const insertImageFromFile = useCallback(
+    async ({
+      file,
+      pagePoint,
+      source,
+    }: {
+      file: File;
+      pagePoint?: Vec;
+      source: ImageImportSource;
+    }): Promise<ShapeId | null> => {
+      return insertImageFileIntoEditor({
+        editor,
+        file,
+        imageObjectUrls: imageAssetService.objectUrls,
+        pagePoint,
+        persistEditorSnapshot,
+        source,
+      });
+    },
+    [editor, imageAssetService, persistEditorSnapshot],
+  );
+  const replaceSelectedImage = useCallback(
+    (file: File) =>
+      replaceSelectedImageFromFile({
+        editor,
+        file,
+        imageObjectUrls: imageAssetService.objectUrls,
+        persistEditorSnapshot,
+      }),
+    [editor, imageAssetService, persistEditorSnapshot],
+  );
+
+  return {
+    insertImageFromFile,
+    replaceSelectedImage,
+  };
+}

package/_vendor/plugin-laser/LaserTool.ts

@@ -0,0 +1,154 @@
+import {
+  StateNode,
+  Vec,
+  type Editor,
+  type PointerEditorEvent,
+} from "@land/canvas-core";
+
+const DRAG_START_DISTANCE = 3;
+const DRAG_START_DISTANCE_SQUARED = DRAG_START_DISTANCE * DRAG_START_DISTANCE;
+
+interface LaserSessionInfo {
+  sessionId: number;
+  originPagePoint: Vec;
+  trail: Vec[];
+}
+
+function hasExceededDragThreshold(origin: Vec, point: Vec): boolean {
+  return origin.dist2(point) >= DRAG_START_DISTANCE_SQUARED;
+}
+
+function appendTrailPoint(info: LaserSessionInfo, point: Vec): void {
+  const previous = info.trail[info.trail.length - 1];
+  if (previous && previous.dist2(point) <= 1e-6) {
+    return;
+  }
+  info.trail.push(point.clone());
+}
+
+function publishLaserTrail(editor: Editor, info: LaserSessionInfo): void {
+  editor.setLaserTrail(info.sessionId, info.trail);
+}
+
+function createSessionInfo(
+  editor: Editor,
+  event: PointerEditorEvent,
+): LaserSessionInfo {
+  const info: LaserSessionInfo = {
+    sessionId: editor.startLaserTrail(),
+    originPagePoint: event.pagePoint.clone(),
+    trail: [event.pagePoint.clone()],
+  };
+  publishLaserTrail(editor, info);
+  return info;
+}
+
+export class LaserTool extends StateNode {
+  constructor(editor: Editor) {
+    super(editor, "laser");
+    this.initial = "idle";
+    this.addChild(new LaserIdleState(editor, this));
+    this.addChild(new LaserPointingState(editor, this));
+    this.addChild(new LaserDrawingState(editor, this));
+  }
+}
+
+class LaserIdleState extends StateNode {
+  constructor(editor: Editor, parent: StateNode) {
+    super(editor, "idle", parent);
+  }
+
+  protected onPointerDown(event: PointerEditorEvent): void {
+    if (event.button !== 0) {
+      return;
+    }
+    this.transition("pointing", createSessionInfo(this.editor, event));
+  }
+}
+
+class LaserPointingState extends StateNode {
+  private info: LaserSessionInfo | null = null;
+
+  constructor(editor: Editor, parent: StateNode) {
+    super(editor, "pointing", parent);
+  }
+
+  protected onEnter(info?: unknown): void {
+    this.info = info as LaserSessionInfo;
+  }
+
+  protected onPointerMove(event: PointerEditorEvent): void {
+    if (!this.info) {
+      return;
+    }
+    if (!hasExceededDragThreshold(this.info.originPagePoint, event.pagePoint)) {
+      return;
+    }
+
+    appendTrailPoint(this.info, event.pagePoint);
+    publishLaserTrail(this.editor, this.info);
+    this.transition("drawing", this.info);
+  }
+
+  protected onPointerUp(): void {
+    if (this.info) {
+      this.editor.finishLaserTrail(this.info.sessionId);
+    }
+    this.transition("idle");
+  }
+
+  protected onCancel(): void {
+    if (this.info) {
+      this.editor.finishLaserTrail(this.info.sessionId);
+    }
+    this.transition("idle");
+  }
+
+  protected onExit(): void {
+    if (this.info) {
+      this.editor.finishLaserTrail(this.info.sessionId);
+    }
+    this.info = null;
+  }
+}
+
+class LaserDrawingState extends StateNode {
+  private info: LaserSessionInfo | null = null;
+
+  constructor(editor: Editor, parent: StateNode) {
+    super(editor, "drawing", parent);
+  }
+
+  protected onEnter(info?: unknown): void {
+    this.info = info as LaserSessionInfo;
+  }
+
+  protected onPointerMove(event: PointerEditorEvent): void {
+    if (!this.info) {
+      return;
+    }
+    appendTrailPoint(this.info, event.pagePoint);
+    publishLaserTrail(this.editor, this.info);
+  }
+
+  protected onPointerUp(): void {
+    if (this.info) {
+      this.editor.finishLaserTrail(this.info.sessionId);
+    }
+    this.transition("idle");
+  }
+
+  protected onCancel(): void {
+    if (this.info) {
+      this.editor.finishLaserTrail(this.info.sessionId);
+    }
+    this.transition("idle");
+  }
+
+  protected onExit(): void {
+    if (this.info) {
+      this.editor.finishLaserTrail(this.info.sessionId);
+    }
+    this.info = null;
+  }
+}