@yuzhouu/canvas-kit 0.1.2

package/_vendor/plugin-draw/core.ts

@@ -0,0 +1,515 @@
+import {
+  SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
+  type ContextMenuContribution,
+  type LandCorePlugin,
+  type ShapeSvgExporter,
+  type SvgNode,
+  type ToolbarAction,
+  type ToolbarActionValue,
+  type ToolbarContribution,
+} from "@land/canvas-core";
+import { DrawShapeUtil } from "./DrawShapeUtil";
+import { DrawTool } from "./DrawTool";
+import { getDrawShapeLocalGeometry } from "./drawGeometry";
+import {
+  isDrawShapeRecord,
+  type DrawShapeProps,
+  type DrawShapeRecord,
+} from "./types";
+
+export class DrawShapeSvgExporter implements ShapeSvgExporter<DrawShapeRecord> {
+  readonly type = "draw" as const;
+
+  toSvg(shape: DrawShapeRecord): SvgNode | null {
+    const geometry = getDrawShapeLocalGeometry(shape);
+    if (!geometry.path && !geometry.selectionPath) {
+      return null;
+    }
+
+    const children: SvgNode[] = [];
+    if (geometry.fillPath && shape.props.fill !== "transparent") {
+      children.push({
+        tag: "path",
+        attrs: {
+          d: geometry.fillPath,
+          fill: shape.props.fill,
+          stroke: "none",
+        },
+      });
+    }
+    if (shape.props.isClosed && geometry.selectionPath) {
+      children.push({
+        tag: "path",
+        attrs: {
+          d: geometry.selectionPath,
+          fill: "none",
+          stroke: shape.props.stroke,
+          "stroke-width": shape.props.strokeWidth,
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+        },
+      });
+    } else if (geometry.path) {
+      children.push({
+        tag: "path",
+        attrs: {
+          d: geometry.path,
+          fill: shape.props.stroke,
+          stroke: "none",
+        },
+      });
+    }
+
+    return {
+      tag: "g",
+      children,
+    };
+  }
+}
+
+export function createDrawCorePlugin(): LandCorePlugin {
+  return {
+    id: "land.draw",
+    shapeCapabilities: [
+      {
+        type: "draw",
+        schemaProps: [
+          "segments",
+          "stroke",
+          "strokeWidth",
+          "fill",
+          "isClosed",
+          "isPen",
+        ],
+        reactRenderer: "supported",
+        toolbarEntry: "supported",
+        notes: [
+          "Draw stores raw segments as document truth and derives a shared freehand stroke geometry for render, hit test, brush wrap, and SVG export.",
+        ],
+      },
+    ],
+    shapeUtils: [new DrawShapeUtil()],
+    shapeSvgExporters: [new DrawShapeSvgExporter()],
+    toolbarActions: [
+      createSetDrawClosedToolbarAction(),
+      createSetDrawStyleToolbarAction("fill"),
+      createSetDrawStyleToolbarAction("stroke"),
+      createSetDrawStyleToolbarAction("strokeWidth"),
+      createSetDrawDefaultClosedToolbarAction(),
+      createSetDrawDefaultStyleToolbarAction("fill"),
+      createSetDrawDefaultStyleToolbarAction("stroke"),
+      createSetDrawDefaultStyleToolbarAction("strokeWidth"),
+    ],
+    toolbarContributions: [
+      createDrawToolToolbarContribution(),
+      createDrawDefaultStyleToolbarContribution(),
+      createDrawSelectionToolbarContribution(),
+    ],
+    contextMenuContributions: [createDrawContextMenuContribution()],
+    setup(editor) {
+      editor.tools.register(
+        "draw",
+        (currentEditor) => new DrawTool(currentEditor),
+        { shortcut: "p" },
+      );
+    },
+  };
+}
+
+function createDrawContextMenuContribution(): ContextMenuContribution {
+  return {
+    id: "draw.shape-context-menu",
+    target: "selection",
+    order: 35,
+    actionIds: ["draw.set-closed"],
+    when(context) {
+      return context.selection.commonShapeType === "draw";
+    },
+    getSections(context) {
+      const currentValue = getCommonDrawClosedValue(
+        context.selection.selectedShapes,
+      );
+      const nextValue = currentValue === "closed" ? "open" : "closed";
+      return [
+        {
+          id: "draw.context-menu",
+          title: "Draw",
+          items: [
+            {
+              kind: "command",
+              id: "draw.toggle-closed",
+              actionId: "draw.set-closed",
+              value: nextValue,
+              label:
+                nextValue === "closed" ? "Close freehand" : "Open freehand",
+              icon: "pencil",
+              dataUi: "context-menu-toggle-draw-closed-button",
+            },
+          ],
+        },
+      ];
+    },
+  };
+}
+
+const DRAW_STROKE_SWATCHES = [
+  { value: "#1d4ed8", label: "Blue", color: "#1d4ed8" },
+  { value: "#15803d", label: "Green", color: "#15803d" },
+  { value: "#dc2626", label: "Red", color: "#dc2626" },
+  { value: "#334155", label: "Slate", color: "#334155" },
+] as const;
+
+const DRAW_FILL_SWATCHES = [
+  { value: "transparent", label: "None", color: "transparent" },
+  { value: "#dbeafe", label: "Blue", color: "#dbeafe" },
+  { value: "#dcfce7", label: "Green", color: "#dcfce7" },
+  { value: "#fee2e2", label: "Red", color: "#fee2e2" },
+  { value: "#f8fafc", label: "White", color: "#f8fafc" },
+] as const;
+
+const DRAW_STROKE_WIDTH_OPTIONS = [
+  { value: 4, label: "4" },
+  { value: 6, label: "6" },
+  { value: 8, label: "8" },
+  { value: 10, label: "10" },
+] as const;
+
+const DRAW_CLOSED_OPTIONS = [
+  { value: "open", label: "Open" },
+  { value: "closed", label: "Closed" },
+] as const;
+
+function createDrawToolToolbarContribution(): ToolbarContribution {
+  return {
+    id: "draw.tool-toolbar",
+    surface: "tool",
+    placement: "chrome",
+    order: 45,
+    actionIds: [SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID],
+    getGroups() {
+      return [
+        {
+          id: "draw.tools",
+          items: [
+            {
+              kind: "button",
+              id: "draw.tool.draw",
+              actionId: SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
+              value: "draw",
+              label: "Draw",
+              shortcut: "P",
+              icon: "pencil",
+              dataUi: "draw-tool-button",
+            },
+          ],
+        },
+      ];
+    },
+  };
+}
+
+function createDrawSelectionToolbarContribution(): ToolbarContribution {
+  return {
+    id: "draw.selection-toolbar",
+    surface: "selection",
+    order: 20,
+    actionIds: [
+      "draw.set-closed",
+      "draw.set-fill",
+      "draw.set-stroke",
+      "draw.set-strokeWidth",
+    ],
+    when(context) {
+      return context.selection.commonShapeType === "draw";
+    },
+    getGroups() {
+      return getDrawStyleToolbarGroups({
+        closedActionId: "draw.set-closed",
+        fillActionId: "draw.set-fill",
+        strokeActionId: "draw.set-stroke",
+        strokeWidthActionId: "draw.set-strokeWidth",
+        dataUiPrefix: "draw",
+      });
+    },
+  };
+}
+
+function createDrawDefaultStyleToolbarContribution(): ToolbarContribution {
+  return {
+    id: "draw.default-style.tool-toolbar",
+    surface: "tool",
+    order: 46,
+    actionIds: [
+      "draw.default-closed",
+      "draw.default-fill",
+      "draw.default-stroke",
+      "draw.default-strokeWidth",
+    ],
+    when(context) {
+      return context.tool.activeToolId === "draw";
+    },
+    getGroups() {
+      return getDrawStyleToolbarGroups({
+        closedActionId: "draw.default-closed",
+        fillActionId: "draw.default-fill",
+        strokeActionId: "draw.default-stroke",
+        strokeWidthActionId: "draw.default-strokeWidth",
+        dataUiPrefix: "draw-default",
+      });
+    },
+  };
+}
+
+function getDrawStyleToolbarGroups({
+  closedActionId,
+  fillActionId,
+  strokeActionId,
+  strokeWidthActionId,
+  dataUiPrefix,
+}: {
+  closedActionId: string;
+  fillActionId: string;
+  strokeActionId: string;
+  strokeWidthActionId: string;
+  dataUiPrefix: string;
+}) {
+  return [
+    {
+      id: `${dataUiPrefix}.style-closed`,
+      items: [
+        {
+          kind: "segmented" as const,
+          id: `${dataUiPrefix}.closed`,
+          actionId: closedActionId,
+          options: DRAW_CLOSED_OPTIONS.map((option) => ({
+            ...option,
+            dataUi: `${dataUiPrefix}-${option.value}-button`,
+          })),
+        },
+      ],
+    },
+    {
+      id: `${dataUiPrefix}.style-fill`,
+      items: [
+        {
+          kind: "swatches" as const,
+          id: `${dataUiPrefix}.fill`,
+          actionId: fillActionId,
+          label: "Fill",
+          options: DRAW_FILL_SWATCHES.map((option) => ({
+            ...option,
+            dataUi: `${dataUiPrefix}-fill-${option.label.toLowerCase()}-button`,
+          })),
+        },
+      ],
+    },
+    {
+      id: `${dataUiPrefix}.style-stroke`,
+      items: [
+        {
+          kind: "swatches" as const,
+          id: `${dataUiPrefix}.stroke`,
+          actionId: strokeActionId,
+          label: "Stroke",
+          options: DRAW_STROKE_SWATCHES.map((option) => ({
+            ...option,
+            dataUi: `${dataUiPrefix}-stroke-${option.label.toLowerCase()}-button`,
+          })),
+        },
+      ],
+    },
+    {
+      id: `${dataUiPrefix}.style-stroke-width`,
+      items: [
+        {
+          kind: "stepper" as const,
+          id: `${dataUiPrefix}.stroke-width`,
+          actionId: strokeWidthActionId,
+          label: "Stroke width",
+          dataUi: `${dataUiPrefix}-stroke-width-control`,
+          options: DRAW_STROKE_WIDTH_OPTIONS.map((option) => ({
+            ...option,
+            dataUi: `${dataUiPrefix}-stroke-width-${option.value}-button`,
+          })),
+        },
+      ],
+    },
+  ];
+}
+
+function createSetDrawStyleToolbarAction(
+  prop: "fill" | "stroke" | "strokeWidth",
+): ToolbarAction<ToolbarActionValue> {
+  return {
+    id: `draw.set-${prop}`,
+    isVisible(context) {
+      return context.selection.commonShapeType === "draw";
+    },
+    isEnabled(context) {
+      return context.selection.count > 0;
+    },
+    getValue(context) {
+      return getCommonDrawPropValue(context.selection.selectedShapes, prop);
+    },
+    run({ context, value }) {
+      if (!isValidDrawStyleValue(prop, value)) {
+        return;
+      }
+      const updates = context.selection.selectedShapes
+        .filter(isDrawShapeRecord)
+        .filter((shape) => !shape.isLocked)
+        .map((shape) => ({
+          id: shape.id,
+          props: {
+            [prop]: value,
+          },
+        }));
+      if (updates.length === 0) {
+        return;
+      }
+      context.editor.commands.updateShapes(updates, { source: "user" });
+    },
+  };
+}
+
+function createSetDrawDefaultStyleToolbarAction(
+  prop: "fill" | "stroke" | "strokeWidth",
+): ToolbarAction<ToolbarActionValue> {
+  return {
+    id: `draw.default-${prop}`,
+    isVisible(context) {
+      return context.tool.activeToolId === "draw";
+    },
+    getValue(context) {
+      return context.editor.getDefaultShapeProps<DrawShapeProps>("draw")[prop];
+    },
+    run({ context, value }) {
+      if (!isValidDrawStyleValue(prop, value)) {
+        return;
+      }
+      context.editor.updateDefaultShapeProps("draw", { [prop]: value });
+    },
+  };
+}
+
+function createSetDrawClosedToolbarAction(): ToolbarAction<string | null> {
+  return {
+    id: "draw.set-closed",
+    isVisible(context) {
+      return context.selection.commonShapeType === "draw";
+    },
+    isEnabled(context) {
+      return context.selection.count > 0;
+    },
+    getValue(context) {
+      return getCommonDrawClosedValue(context.selection.selectedShapes);
+    },
+    run({ context, value }) {
+      const isClosed = parseDrawClosedToolbarValue(value);
+      if (isClosed === null) {
+        return;
+      }
+      const updates = context.selection.selectedShapes
+        .filter(isDrawShapeRecord)
+        .filter((shape) => !shape.isLocked)
+        .map((shape) => ({
+          id: shape.id,
+          props: {
+            isClosed,
+          },
+        }));
+      if (updates.length === 0) {
+        return;
+      }
+      context.editor.commands.updateShapes(updates, { source: "user" });
+    },
+  };
+}
+
+function createSetDrawDefaultClosedToolbarAction(): ToolbarAction<string | null> {
+  return {
+    id: "draw.default-closed",
+    isVisible(context) {
+      return context.tool.activeToolId === "draw";
+    },
+    getValue(context) {
+      return context.editor.getDefaultShapeProps<DrawShapeProps>("draw").isClosed
+        ? "closed"
+        : "open";
+    },
+    run({ context, value }) {
+      const isClosed = parseDrawClosedToolbarValue(value);
+      if (isClosed === null) {
+        return;
+      }
+      context.editor.updateDefaultShapeProps("draw", { isClosed });
+    },
+  };
+}
+
+function getCommonDrawPropValue(
+  selectedShapes: readonly { type: string; props: object }[],
+  prop: "fill" | "stroke" | "strokeWidth",
+): ToolbarActionValue {
+  let value: ToolbarActionValue | undefined;
+  for (const shape of selectedShapes) {
+    if (shape.type !== "draw") {
+      continue;
+    }
+    const nextValue = (shape.props as DrawShapeProps)[prop];
+    if (value === undefined) {
+      value = nextValue;
+      continue;
+    }
+    if (value !== nextValue) {
+      return null;
+    }
+  }
+  return value ?? null;
+}
+
+function getCommonDrawClosedValue(
+  selectedShapes: readonly { type: string; props: object }[],
+): string | null {
+  let isClosed: boolean | undefined;
+  for (const shape of selectedShapes) {
+    if (shape.type !== "draw") {
+      continue;
+    }
+    const nextValue = (shape.props as DrawShapeProps).isClosed;
+    if (isClosed === undefined) {
+      isClosed = nextValue;
+      continue;
+    }
+    if (isClosed !== nextValue) {
+      return null;
+    }
+  }
+  if (isClosed === undefined) {
+    return null;
+  }
+  return isClosed ? "closed" : "open";
+}
+
+function parseDrawClosedToolbarValue(value: ToolbarActionValue): boolean | null {
+  if (value === "closed") {
+    return true;
+  }
+  if (value === "open") {
+    return false;
+  }
+  return null;
+}
+
+function isValidDrawStyleValue(
+  prop: "fill" | "stroke" | "strokeWidth",
+  value: ToolbarActionValue,
+): boolean {
+  if (prop === "strokeWidth") {
+    return DRAW_STROKE_WIDTH_OPTIONS.some((option) => option.value === value);
+  }
+  if (prop === "fill") {
+    return DRAW_FILL_SWATCHES.some((option) => option.value === value);
+  }
+  return DRAW_STROKE_SWATCHES.some((option) => option.value === value);
+}