@yuzhouu/canvas-kit 0.1.2 → 0.1.4

package/_vendor/plugin-draw/core.ts

@@ -1,515 +0,0 @@
-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);
-}