@yuzhouu/canvas-kit 0.1.2 → 0.1.3

package/_vendor/plugin-arrow/core.ts

@@ -1,409 +0,0 @@
-import {
-  SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
-  type LandCorePlugin,
-  type ShapeSvgExporter,
-  type SvgElementNode,
-  type SvgExportContext,
-  type SvgNode,
-  type ToolbarAction,
-  type ToolbarActionValue,
-  type ToolbarContribution,
-} from "@land/canvas-core";
-import { ArrowBindingUtil } from "./ArrowBindingUtil";
-import { ArrowShapeUtil } from "./ArrowShapeUtil";
-import { ArrowTool } from "./ArrowTool";
-import { getArrowLocalInfo } from "./arrowGeometry";
-import { resolveArrowTerminalBindingAtPoint } from "./arrowTerminalBindingResolver";
-import { createArrowInteractionHandler } from "./selectionHandleInteractions";
-import type { ArrowShapeRecord } from "./types";
-
-export class ArrowShapeSvgExporter
-  implements ShapeSvgExporter<ArrowShapeRecord>
-{
-  readonly type = "arrow" as const;
-
-  toSvg(shape: ArrowShapeRecord, context: SvgExportContext): SvgNode {
-    const markerStart =
-      shape.props.headStart === "arrow"
-        ? `url(#${context.addDef(createArrowMarker("start", shape.props.stroke))})`
-        : undefined;
-    const markerEnd =
-      shape.props.headEnd === "arrow"
-        ? `url(#${context.addDef(createArrowMarker("end", shape.props.stroke))})`
-        : undefined;
-
-    return {
-      tag: "path",
-      attrs: {
-        d: getArrowLocalInfo(shape).path,
-        fill: "none",
-        stroke: shape.props.stroke,
-        "stroke-width": shape.props.strokeWidth,
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round",
-        "marker-start": markerStart,
-        "marker-end": markerEnd,
-      },
-    };
-  }
-}
-
-export function createArrowCorePlugin(): LandCorePlugin {
-  return {
-    id: "land.arrow",
-    shapeCapabilities: [
-      {
-        type: "arrow",
-        schemaProps: [
-          "w",
-          "h",
-          "start",
-          "end",
-          "bend",
-          "stroke",
-          "strokeWidth",
-          "headStart",
-          "headEnd",
-        ],
-        reactRenderer: "supported",
-        toolbarEntry: "supported",
-        notes: [
-          "Binding support lives in arrow binding records, not arrow props.",
-        ],
-      },
-    ],
-    shapeUtils: [new ArrowShapeUtil()],
-    shapeSvgExporters: [new ArrowShapeSvgExporter()],
-    bindingUtils: [new ArrowBindingUtil()],
-    interactionHandlers: [createArrowInteractionHandler()],
-    toolbarActions: [
-      createSetArrowStyleToolbarAction("stroke"),
-      createSetArrowStyleToolbarAction("strokeWidth"),
-      createSetArrowStyleToolbarAction("headStart"),
-      createSetArrowStyleToolbarAction("headEnd"),
-      createSetArrowDefaultStyleToolbarAction("stroke"),
-      createSetArrowDefaultStyleToolbarAction("strokeWidth"),
-      createSetArrowDefaultStyleToolbarAction("headStart"),
-      createSetArrowDefaultStyleToolbarAction("headEnd"),
-    ],
-    toolbarContributions: [
-      createArrowToolToolbarContribution(),
-      createArrowDefaultStyleToolbarContribution(),
-      createArrowSelectionToolbarContribution(),
-    ],
-    setup(editor) {
-      editor.setArrowTerminalBindingResolver(resolveArrowTerminalBindingAtPoint);
-      editor.tools.register(
-        "arrow",
-        (currentEditor) => new ArrowTool(currentEditor),
-        { shortcut: "a" },
-      );
-    },
-  };
-}
-
-const ARROW_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 ARROW_STROKE_WIDTH_OPTIONS = [
-  { value: 1, label: "1" },
-  { value: 2, label: "2" },
-  { value: 4, label: "4" },
-] as const;
-
-const ARROW_HEAD_OPTIONS = [
-  { value: "none", label: "None", icon: "minus" },
-  { value: "arrow", label: "Arrow", icon: "arrow-right" },
-] as const satisfies readonly {
-  value: ArrowShapeRecord["props"]["headStart"];
-  label: string;
-  icon: string;
-}[];
-
-function createArrowToolToolbarContribution(): ToolbarContribution {
-  return {
-    id: "arrow.tool-toolbar",
-    surface: "tool",
-    placement: "chrome",
-    order: 40,
-    actionIds: [SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID],
-    getGroups() {
-      return [
-        {
-          id: "arrow.tools",
-          items: [
-            {
-              kind: "button",
-              id: "arrow.tool.arrow",
-              actionId: SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
-              value: "arrow",
-              label: "Arrow",
-              shortcut: "A",
-              icon: "arrow-right",
-              dataUi: "arrow-tool-button",
-            },
-          ],
-        },
-      ];
-    },
-  };
-}
-
-function createArrowSelectionToolbarContribution(): ToolbarContribution {
-  return {
-    id: "arrow.selection-toolbar",
-    surface: "selection",
-    order: 20,
-    actionIds: [
-      "arrow.set-stroke",
-      "arrow.set-strokeWidth",
-      "arrow.set-headStart",
-      "arrow.set-headEnd",
-    ],
-    when(context) {
-      return context.selection.commonShapeType === "arrow";
-    },
-    getGroups() {
-      return getArrowStyleToolbarGroups({
-        strokeActionId: "arrow.set-stroke",
-        strokeWidthActionId: "arrow.set-strokeWidth",
-        headStartActionId: "arrow.set-headStart",
-        headEndActionId: "arrow.set-headEnd",
-        dataUiPrefix: "arrow",
-      });
-    },
-  };
-}
-
-function createArrowDefaultStyleToolbarContribution(): ToolbarContribution {
-  return {
-    id: "arrow.default-style.tool-toolbar",
-    surface: "tool",
-    order: 41,
-    actionIds: [
-      "arrow.default-stroke",
-      "arrow.default-strokeWidth",
-      "arrow.default-headStart",
-      "arrow.default-headEnd",
-    ],
-    when(context) {
-      return context.tool.activeToolId === "arrow";
-    },
-    getGroups() {
-      return getArrowStyleToolbarGroups({
-        strokeActionId: "arrow.default-stroke",
-        strokeWidthActionId: "arrow.default-strokeWidth",
-        headStartActionId: "arrow.default-headStart",
-        headEndActionId: "arrow.default-headEnd",
-        dataUiPrefix: "arrow-default",
-      });
-    },
-  };
-}
-
-function getArrowStyleToolbarGroups({
-  strokeActionId,
-  strokeWidthActionId,
-  headStartActionId,
-  headEndActionId,
-  dataUiPrefix,
-}: {
-  strokeActionId: string;
-  strokeWidthActionId: string;
-  headStartActionId: string;
-  headEndActionId: string;
-  dataUiPrefix: string;
-}) {
-  return [
-    {
-      id: `${dataUiPrefix}.style-stroke`,
-      items: [
-        {
-          kind: "swatches" as const,
-          id: `${dataUiPrefix}.stroke`,
-          actionId: strokeActionId,
-          label: "Stroke",
-          options: ARROW_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: ARROW_STROKE_WIDTH_OPTIONS.map((option) => ({
-            ...option,
-            dataUi: `${dataUiPrefix}-stroke-width-${option.value}-button`,
-          })),
-        },
-      ],
-    },
-    {
-      id: `${dataUiPrefix}.head-start`,
-      items: [
-        {
-          kind: "segmented" as const,
-          id: `${dataUiPrefix}.head-start`,
-          actionId: headStartActionId,
-          options: ARROW_HEAD_OPTIONS.map((option) => ({
-            ...option,
-            label: `Start head: ${option.label}`,
-            dataUi: `${dataUiPrefix}-start-head-${option.value}-button`,
-          })),
-        },
-      ],
-    },
-    {
-      id: `${dataUiPrefix}.head-end`,
-      items: [
-        {
-          kind: "segmented" as const,
-          id: `${dataUiPrefix}.head-end`,
-          actionId: headEndActionId,
-          options: ARROW_HEAD_OPTIONS.map((option) => ({
-            ...option,
-            label: `End head: ${option.label}`,
-            dataUi: `${dataUiPrefix}-end-head-${option.value}-button`,
-          })),
-        },
-      ],
-    },
-  ];
-}
-
-function createSetArrowStyleToolbarAction(
-  prop: "stroke" | "strokeWidth" | "headStart" | "headEnd",
-): ToolbarAction<ToolbarActionValue> {
-  return {
-    id: `arrow.set-${prop}`,
-    isVisible(context) {
-      return context.selection.commonShapeType === "arrow";
-    },
-    isEnabled(context) {
-      return context.selection.count > 0;
-    },
-    getValue(context) {
-      return getCommonArrowPropValue(context.selection.selectedShapes, prop);
-    },
-    run({ context, value }) {
-      if (!isValidArrowStyleValue(prop, value)) {
-        return;
-      }
-      const updates = context.selection.selectedShapes
-        .filter((shape): shape is ArrowShapeRecord => shape.type === "arrow")
-        .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 createSetArrowDefaultStyleToolbarAction(
-  prop: "stroke" | "strokeWidth" | "headStart" | "headEnd",
-): ToolbarAction<ToolbarActionValue> {
-  return {
-    id: `arrow.default-${prop}`,
-    isVisible(context) {
-      return context.tool.activeToolId === "arrow";
-    },
-    getValue(context) {
-      return context.editor.getDefaultShapeProps<ArrowShapeRecord["props"]>(
-        "arrow",
-      )[prop];
-    },
-    run({ context, value }) {
-      if (!isValidArrowStyleValue(prop, value)) {
-        return;
-      }
-      context.editor.updateDefaultShapeProps("arrow", { [prop]: value });
-    },
-  };
-}
-
-function getCommonArrowPropValue(
-  selectedShapes: readonly { type: string; props: object }[],
-  prop: "stroke" | "strokeWidth" | "headStart" | "headEnd",
-): ToolbarActionValue {
-  let value: ToolbarActionValue | undefined;
-  for (const shape of selectedShapes) {
-    if (shape.type !== "arrow") {
-      continue;
-    }
-    const nextValue = (shape.props as ArrowShapeRecord["props"])[prop];
-    if (value === undefined) {
-      value = nextValue;
-      continue;
-    }
-    if (value !== nextValue) {
-      return null;
-    }
-  }
-  return value ?? null;
-}
-
-function isValidArrowStyleValue(
-  prop: "stroke" | "strokeWidth" | "headStart" | "headEnd",
-  value: ToolbarActionValue,
-): boolean {
-  if (prop === "strokeWidth") {
-    return ARROW_STROKE_WIDTH_OPTIONS.some((option) => option.value === value);
-  }
-  if (prop === "stroke") {
-    return ARROW_STROKE_SWATCHES.some((option) => option.value === value);
-  }
-  return ARROW_HEAD_OPTIONS.some((option) => option.value === value);
-}
-
-function createArrowMarker(
-  terminal: "start" | "end",
-  stroke: string,
-): SvgElementNode {
-  return {
-    tag: "marker",
-    attrs: {
-      markerWidth: 12,
-      markerHeight: 12,
-      viewBox: "0 0 24 24",
-      refX: terminal === "start" ? 2 : 22,
-      refY: 12,
-      orient: "auto",
-      markerUnits: "strokeWidth",
-    },
-    children: [
-      {
-        tag: "path",
-        attrs: {
-          d:
-            terminal === "start"
-              ? "M8.9,8 L2,12 L8.9,16"
-              : "M15.1,8 L22,12 L15.1,16",
-          fill: "none",
-          stroke,
-          "stroke-width": 2,
-          "stroke-linecap": "round",
-          "stroke-linejoin": "round",
-        },
-      },
-    ],
-  };
-}

package/_vendor/plugin-arrow/feature.ts

@@ -1,20 +0,0 @@
-import {
-  defineLandExtension,
-  type LandFeatureBundle,
-} from "@land/canvas-plugin-api";
-import { createArrowCanvasPlugin } from "./canvas";
-import { createArrowCorePlugin } from "./core";
-
-export function createArrowFeatureBundle(): LandFeatureBundle {
-  return {
-    id: "land.arrow.bundle",
-    corePlugins: [createArrowCorePlugin()],
-    canvasPlugins: [createArrowCanvasPlugin()],
-    shapeTypes: ["arrow"],
-  };
-}
-
-export const Arrow = defineLandExtension({
-  name: "arrow",
-  createFeature: createArrowFeatureBundle,
-});

package/_vendor/plugin-arrow/index.ts

@@ -1,28 +0,0 @@
-export { ArrowBindingUtil } from "./ArrowBindingUtil";
-export { ArrowShapeUtil } from "./ArrowShapeUtil";
-export { ArrowTool } from "./ArrowTool";
-export { ArrowShapeSvgExporter, createArrowCorePlugin } from "./core";
-export { createArrowCanvasPlugin } from "./canvas";
-export { Arrow, createArrowFeatureBundle } from "./feature";
-export {
-  isArrowBindingRecord,
-  isArrowShapeRecord,
-  type ArrowBindingProps,
-  type ArrowBindingRecord,
-  type ArrowPoint,
-  type ArrowShapeProps,
-  type ArrowShapeRecord,
-  type ArrowTerminal,
-} from "./types";
-export {
-  resolveArrowBindingPagePoint,
-  resolveArrowTerminalBindingAtPoint,
-  resolveArrowTerminalBindingAtStartPoint,
-  resolveArrowTerminalBindingForArrow,
-} from "./arrowTerminalBindingResolver";
-export { createArrow } from "./arrowTerminalCommands";
-export { getArrowTerminalPagePoint } from "./arrowGeometry";
-export {
-  createArrowInteractionHandler,
-  createArrowSelectionHandleInteractionHandler,
-} from "./selectionHandleInteractions";

package/_vendor/plugin-arrow/selectionHandleInteractions.ts

@@ -1,154 +0,0 @@
-import {
-  type HandleSnapMode,
-  type LandInteractionHandler,
-  type SelectionArrowTerminalHandle,
-  type SelectionHandleInteractionHandler,
-  type SelectionHandleInteractionSession,
-  type ShapeId,
-} from "@land/canvas-core";
-import { applyResolvedArrowTerminalBinding } from "./arrowTerminalCommands";
-import {
-  getArrowBendFromMiddlePagePoint,
-  getArrowTerminalPagePoint,
-} from "./arrowGeometry";
-import { resolveArrowTerminalBindingForArrow } from "./arrowTerminalBindingResolver";
-import { isArrowShapeRecord } from "./types";
-
-const ARROW_BEND_SNAP_DISTANCE_SCREEN = 6;
-const TERMINAL_DRAG_HISTORY_MARK = "select.arrow_terminal_drag";
-const ARROW_MIDDLE_DRAG_HISTORY_MARK = "select.arrow_middle_drag";
-const ARROW_TERMINAL_HANDLE_SNAP_MODE: HandleSnapMode = "point";
-
-function getArrowBendWithSnap({
-  bend,
-  bypassSnap,
-  zoom,
-}: {
-  bend: number;
-  bypassSnap: boolean;
-  zoom: number;
-}): number {
-  if (bypassSnap) {
-    return bend;
-  }
-
-  return Math.abs(bend) * zoom <= ARROW_BEND_SNAP_DISTANCE_SCREEN ? 0 : bend;
-}
-
-function createArrowTerminalSession({
-  handle,
-  shapeId,
-  terminal,
-}: {
-  handle: SelectionArrowTerminalHandle;
-  shapeId: ShapeId;
-  terminal: "start" | "end";
-}): SelectionHandleInteractionSession {
-  return {
-    shapeId,
-    historyMark: TERMINAL_DRAG_HISTORY_MARK,
-    handleSnapMode: ARROW_TERMINAL_HANDLE_SNAP_MODE,
-    handleSnapContext: {
-      shapeId,
-      handle,
-    },
-    shouldClearBindingPreviewOnExit: true,
-    update({ editor: currentEditor, pagePoint, accelKey, source }) {
-      const arrow = currentEditor.getShape(shapeId);
-      if (!isArrowShapeRecord(arrow)) {
-        return { status: "stop", finalPagePoint: null };
-      }
-
-      const nextBinding = resolveArrowTerminalBindingForArrow(currentEditor, {
-        arrow,
-        terminal,
-        rawPagePoint: pagePoint,
-        ignoreTargets: accelKey,
-      });
-
-      const nextArrow = applyResolvedArrowTerminalBinding(
-        currentEditor,
-        arrow.id,
-        terminal,
-        nextBinding,
-        source,
-      );
-      return {
-        status: "continue",
-        finalPagePoint: nextArrow
-          ? getArrowTerminalPagePoint(nextArrow, terminal)
-          : nextBinding.pagePoint,
-      };
-    },
-  };
-}
-
-function createArrowMiddleSession({
-  shapeId,
-}: {
-  shapeId: ShapeId;
-}): SelectionHandleInteractionSession {
-  return {
-    shapeId,
-    historyMark: ARROW_MIDDLE_DRAG_HISTORY_MARK,
-    update({ editor, pagePoint, accelKey, source }) {
-      const arrow = editor.getShape(shapeId);
-      if (!isArrowShapeRecord(arrow)) {
-        return "stop";
-      }
-
-      const bend = getArrowBendWithSnap({
-        bend: getArrowBendFromMiddlePagePoint(
-          getArrowTerminalPagePoint(arrow, "start"),
-          getArrowTerminalPagePoint(arrow, "end"),
-          pagePoint,
-        ),
-        bypassSnap: accelKey,
-        zoom: editor.cameraZoomSignal.get(),
-      });
-      editor.commands.updateShapes(
-        [
-          {
-            id: arrow.id,
-            props: {
-              bend,
-            },
-          },
-        ],
-        { source },
-      );
-      return "continue";
-    },
-  };
-}
-
-export function createArrowSelectionHandleInteractionHandler(): SelectionHandleInteractionHandler {
-  return {
-    createSession(editor, { handle, shape }) {
-      if (!isArrowShapeRecord(shape)) {
-        return null;
-      }
-
-      if (handle.kind === "arrow_terminal") {
-        return createArrowTerminalSession({
-          handle,
-          shapeId: shape.id,
-          terminal: handle.terminal,
-        });
-      }
-
-      if (handle.kind === "arrow_middle") {
-        return createArrowMiddleSession({ shapeId: shape.id });
-      }
-
-      return null;
-    },
-  };
-}
-
-export function createArrowInteractionHandler(): LandInteractionHandler {
-  return {
-    id: "land.arrow.interactions",
-    selectionHandle: createArrowSelectionHandleInteractionHandler(),
-  };
-}

package/_vendor/plugin-arrow/types.ts

@@ -1,63 +0,0 @@
-import type {
-  BaseRecord,
-  BindingRecord,
-  BindingRecordBase,
-  ShapeRecord,
-  ShapeRecordBase,
-} from "@land/canvas-core";
-
-export interface ArrowPoint {
-  x: number;
-  y: number;
-}
-
-export type ArrowTerminal = "start" | "end";
-
-export interface ArrowShapeProps {
-  w: number;
-  h: number;
-  start: ArrowPoint;
-  end: ArrowPoint;
-  bend: number;
-  stroke: string;
-  strokeWidth: number;
-  headStart: "none" | "arrow";
-  headEnd: "none" | "arrow";
-}
-
-export interface ArrowShapeRecord
-  extends ShapeRecordBase<"arrow", ArrowShapeProps> {
-  type: "arrow";
-  props: ArrowShapeProps;
-}
-
-export interface ArrowBindingProps {
-  terminal: ArrowTerminal;
-  normalizedAnchor: ArrowPoint;
-}
-
-export interface ArrowBindingRecord
-  extends BindingRecordBase<"arrow", ArrowBindingProps> {
-  type: "arrow";
-  props: ArrowBindingProps;
-}
-
-export function isArrowShapeRecord(
-  record: BaseRecord | null | undefined,
-): record is ArrowShapeRecord {
-  return (
-    !!record &&
-    record.typeName === "shape" &&
-    (record as ShapeRecord).type === "arrow"
-  );
-}
-
-export function isArrowBindingRecord(
-  record: BaseRecord | null | undefined,
-): record is ArrowBindingRecord {
-  return (
-    !!record &&
-    record.typeName === "binding" &&
-    (record as BindingRecord).type === "arrow"
-  );
-}