@yuzhouu/canvas-kit 0.1.2

package/_vendor/canvas-core/toolbar.ts

@@ -0,0 +1,148 @@
+import type { Editor } from "./editor/Editor";
+import type { ShapeId, ShapeRecordBase } from "./schema/records";
+
+export const SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID = "editor.tool.set-active-tool";
+export const TOGGLE_TOOL_LOCKED_TOOLBAR_ACTION_ID =
+  "editor.tool.toggle-locked";
+
+export type ToolbarSurface = "selection" | "tool";
+export type ToolbarPlacement = "chrome" | "context";
+
+export interface ToolbarSelectionSnapshot {
+  selectedShapeIds: readonly ShapeId[];
+  selectedShapes: readonly ShapeRecordBase[];
+  count: number;
+  singleShapeType: ShapeRecordBase["type"] | null;
+  commonShapeType: ShapeRecordBase["type"] | null;
+  canResetRotation: boolean;
+  isMixedFrameAndPointHandleSelection: boolean;
+}
+
+export interface ToolbarToolSnapshot {
+  activeToolId: string;
+  isToolLocked: boolean;
+}
+
+export interface ToolbarContext {
+  editor: Editor;
+  selection: ToolbarSelectionSnapshot;
+  tool: ToolbarToolSnapshot;
+}
+
+export type ToolbarActionValue = string | number | boolean | null;
+
+export interface ToolbarActionRunInput<TValue extends ToolbarActionValue> {
+  context: ToolbarContext;
+  value: TValue;
+}
+
+export interface ToolbarAction<
+  TValue extends ToolbarActionValue = ToolbarActionValue,
+> {
+  id: string;
+  isVisible?(context: ToolbarContext): boolean;
+  isEnabled?(context: ToolbarContext): boolean;
+  getValue?(context: ToolbarContext): TValue;
+  run(input: ToolbarActionRunInput<TValue>): void;
+}
+
+export interface ToolbarButtonItem {
+  kind: "button";
+  id: string;
+  actionId: string;
+  label: string;
+  icon: string;
+  value?: ToolbarActionValue;
+  shortcut?: string;
+  dataUi?: string;
+}
+
+export interface ToolbarSegmentedOption {
+  value: string;
+  label: string;
+  icon?: string;
+  dataUi?: string;
+}
+
+export interface ToolbarSegmentedItem {
+  kind: "segmented";
+  id: string;
+  actionId: string;
+  options: readonly ToolbarSegmentedOption[];
+}
+
+export interface ToolbarSwatchOption {
+  value: string;
+  label: string;
+  color: string;
+  dataUi?: string;
+}
+
+export interface ToolbarSwatchesItem {
+  kind: "swatches";
+  id: string;
+  actionId: string;
+  label: string;
+  options: readonly ToolbarSwatchOption[];
+}
+
+export interface ToolbarStepperOption {
+  value: number;
+  label: string;
+  dataUi?: string;
+}
+
+export interface ToolbarStepperItem {
+  kind: "stepper";
+  id: string;
+  actionId: string;
+  label: string;
+  options: readonly ToolbarStepperOption[];
+  dataUi?: string;
+}
+
+export interface ToolbarTextInputItem {
+  kind: "text-input";
+  id: string;
+  actionId: string;
+  label: string;
+  placeholder?: string;
+  dataUi?: string;
+}
+
+export interface ToolbarBadgeItem {
+  kind: "badge";
+  id: string;
+  label: string;
+  dataUi?: string;
+}
+
+export interface ToolbarSeparatorItem {
+  kind: "separator";
+  id: string;
+}
+
+export type ToolbarItem =
+  | ToolbarButtonItem
+  | ToolbarSegmentedItem
+  | ToolbarSwatchesItem
+  | ToolbarStepperItem
+  | ToolbarTextInputItem
+  | ToolbarBadgeItem
+  | ToolbarSeparatorItem;
+
+export interface ToolbarGroup {
+  id: string;
+  order?: number;
+  items: readonly ToolbarItem[];
+}
+
+export interface ToolbarContribution {
+  id: string;
+  surface: ToolbarSurface;
+  placement?: ToolbarPlacement;
+  order?: number;
+  actionIds: readonly string[];
+  when?(context: ToolbarContext): boolean;
+  getGroups(context: ToolbarContext): readonly ToolbarGroup[];
+}

package/_vendor/canvas-core/tools/hand/HandTool.ts

@@ -0,0 +1,75 @@
+import type { Camera } from "../../schema/records";
+import type { Editor } from "../../editor/Editor";
+import type { PointerEditorEvent } from "../../editor/events";
+import { StateNode } from "../../editor/StateNode";
+import type { Vec } from "../../geometry/Vec";
+
+interface PanningInfo {
+  originScreenPoint: Vec;
+  originCamera: Camera;
+}
+
+export class HandTool extends StateNode {
+  constructor(editor: Editor) {
+    super(editor, "hand");
+    this.initial = "idle";
+    this.addChild(new HandIdleState(editor, this));
+    this.addChild(new HandPanningState(editor, this));
+  }
+}
+
+class HandIdleState extends StateNode {
+  constructor(editor: Editor, parent: StateNode) {
+    super(editor, "idle", parent);
+  }
+
+  protected onPointerDown(event: PointerEditorEvent): void {
+    if (event.button !== 0) {
+      return;
+    }
+    this.transition("panning", {
+      originScreenPoint: event.screenPoint.clone(),
+      originCamera: this.editor.getCurrentCamera(),
+    } satisfies PanningInfo);
+  }
+}
+
+class HandPanningState extends StateNode {
+  private info: PanningInfo | null = null;
+
+  constructor(editor: Editor, parent: StateNode) {
+    super(editor, "panning", parent);
+  }
+
+  protected onEnter(info?: unknown): void {
+    this.info = info as PanningInfo;
+  }
+
+  protected onPointerMove(event: PointerEditorEvent): void {
+    if (!this.info) {
+      return;
+    }
+
+    const delta = event.screenPoint.sub(this.info.originScreenPoint);
+    const zoom = this.info.originCamera.z;
+    this.editor.setCamera(
+      {
+        x: this.info.originCamera.x - delta.x / zoom,
+        y: this.info.originCamera.y - delta.y / zoom,
+      },
+      { source: "user" },
+    );
+  }
+
+  protected onPointerUp(): void {
+    this.transition("idle");
+  }
+
+  protected onCancel(): void {
+    this.transition("idle");
+  }
+
+  protected onExit(): void {
+    this.info = null;
+  }
+}

package/_vendor/canvas-core/tools/index.ts

@@ -0,0 +1,2 @@
+export { HandTool } from "./hand/HandTool";
+export { SelectTool } from "./select/SelectTool";

package/_vendor/canvas-core/tools/select/SelectTool.ts

@@ -0,0 +1,33 @@
+import type { Editor } from "../../editor/Editor";
+import { StateNode } from "../../editor/StateNode";
+import {
+  BrushingState,
+  DraggingSelectionHandleInteractionState,
+  IdleState,
+  PointingCanvasState,
+  PointingResizeHandleState,
+  PointingRotateHandleState,
+  PointingSelectionHandleInteractionState,
+  PointingShapeState,
+  ResizingState,
+  RotatingState,
+  TranslatingState,
+} from "./states";
+
+export class SelectTool extends StateNode {
+  constructor(editor: Editor) {
+    super(editor, "select");
+    this.initial = "idle";
+    this.addChild(new IdleState(editor, this));
+    this.addChild(new PointingCanvasState(editor, this));
+    this.addChild(new BrushingState(editor, this));
+    this.addChild(new PointingShapeState(editor, this));
+    this.addChild(new TranslatingState(editor, this));
+    this.addChild(new PointingResizeHandleState(editor, this));
+    this.addChild(new ResizingState(editor, this));
+    this.addChild(new PointingRotateHandleState(editor, this));
+    this.addChild(new RotatingState(editor, this));
+    this.addChild(new PointingSelectionHandleInteractionState(editor, this));
+    this.addChild(new DraggingSelectionHandleInteractionState(editor, this));
+  }
+}

package/_vendor/canvas-core/tools/select/selectContainment.ts

@@ -0,0 +1,104 @@
+import type { Editor } from "../../editor/Editor";
+import type { ShapeId, ShapeParentId } from "../../schema/records";
+
+/**
+ * Containment / reparenting helpers used by the translating gesture. These are
+ * pure with respect to the state node: they read and mutate editor state only,
+ * driven by the set of shape ids being dragged.
+ */
+
+export function getSharedCurrentParentId(
+  editor: Editor,
+  shapeIds: readonly ShapeId[],
+): ShapeParentId | null {
+  let parentId: ShapeParentId | null = null;
+  for (const shapeId of shapeIds) {
+    const shape = editor.getShape(shapeId);
+    if (!shape) {
+      return null;
+    }
+
+    if (!parentId) {
+      parentId = shape.parentId;
+      continue;
+    }
+
+    if (shape.parentId !== parentId) {
+      return null;
+    }
+  }
+
+  return parentId;
+}
+
+export function resolveContainmentParentId(
+  editor: Editor,
+  shapeIds: readonly ShapeId[],
+): ShapeParentId | null {
+  const containingParentId = editor.getContainingShapeParentId(shapeIds);
+  if (!containingParentId) {
+    return null;
+  }
+
+  const currentParentId = getSharedCurrentParentId(editor, shapeIds);
+  if (
+    !currentParentId ||
+    !currentParentId.startsWith("shape:") ||
+    containingParentId === currentParentId
+  ) {
+    return containingParentId;
+  }
+
+  const currentParentShape = editor.getShape(currentParentId as ShapeId);
+  if (
+    !currentParentShape ||
+    !editor
+      .getShapeUtil(currentParentShape)
+      .canReceiveChildren(currentParentShape)
+  ) {
+    return containingParentId;
+  }
+
+  const stillIntersectsCurrentParent = shapeIds.every((shapeId) => {
+    const containment = editor.getShapeContainment(
+      currentParentShape.id,
+      shapeId,
+    );
+    return containment === "inside" || containment === "intersecting";
+  });
+
+  return stillIntersectsCurrentParent ? currentParentId : containingParentId;
+}
+
+export function updateDropTarget(
+  editor: Editor,
+  shapeIds: readonly ShapeId[],
+): void {
+  const parentId = resolveContainmentParentId(editor, shapeIds);
+  const currentParentId = getSharedCurrentParentId(editor, shapeIds);
+  if (parentId === currentParentId) {
+    editor.setDropTargetShapeId(null);
+    return;
+  }
+  const targetShape = parentId ? editor.getShape(parentId as ShapeId) : null;
+  editor.setDropTargetShapeId(targetShape?.id ?? null);
+}
+
+export function applyContainmentParent(
+  editor: Editor,
+  shapeIds: readonly ShapeId[],
+): void {
+  const parentId = resolveContainmentParentId(editor, shapeIds);
+  if (!parentId) {
+    return;
+  }
+
+  const needsReparent = shapeIds.some(
+    (shapeId) => editor.getShape(shapeId)?.parentId !== parentId,
+  );
+  if (!needsReparent) {
+    return;
+  }
+
+  editor.commands.reparentShapes({ ids: [...shapeIds], parentId });
+}