@yuzhouu/canvas-kit 0.1.2

package/_vendor/plugin-geo/canvas.tsx

@@ -0,0 +1,90 @@
+import type { LandCanvasPlugin, ShapeRendererProps } from "@land/canvas-plugin-api";
+import type { GeoShapeRecord } from "./types";
+
+interface GeoShapeSvgProps {
+  shape: GeoShapeRecord;
+  fill?: string;
+  stroke?: string;
+  strokeWidth?: number;
+}
+
+export function createGeoCanvasPlugin(): LandCanvasPlugin {
+  return {
+    id: "land.geo.react",
+    setup(registerShapeRenderer) {
+      registerShapeRenderer({
+        type: "geo",
+        component: GeoShapeRenderer,
+      });
+    },
+  };
+}
+
+function GeoShapeRenderer({
+  shape,
+}: ShapeRendererProps<GeoShapeRecord>) {
+  return (
+    <GeoShapeSvg shape={shape} />
+  );
+}
+
+export function GeoShapeSvg({
+  shape,
+  fill = shape.props.fill,
+  stroke = shape.props.stroke,
+  strokeWidth = shape.props.strokeWidth,
+}: GeoShapeSvgProps) {
+  const { geo } = shape.props;
+  const inset = strokeWidth / 2;
+  const width = Math.max(shape.props.w - strokeWidth, 0);
+  const height = Math.max(shape.props.h - strokeWidth, 0);
+  const rectangleRadius = Math.min(10, width * 0.12, height * 0.12);
+
+  const sharedProps = {
+    fill,
+    stroke,
+    strokeWidth,
+    strokeLinejoin: "round" as const,
+    strokeLinecap: "round" as const,
+  };
+
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox={`0 0 ${shape.props.w} ${shape.props.h}`}
+      style={{ display: "block", overflow: "visible" }}
+      shapeRendering="geometricPrecision"
+    >
+      {geo === "ellipse" ? (
+        <ellipse
+          {...sharedProps}
+          cx={shape.props.w / 2}
+          cy={shape.props.h / 2}
+          rx={width / 2}
+          ry={height / 2}
+        />
+      ) : geo === "diamond" ? (
+        <polygon
+          {...sharedProps}
+          points={[
+            `${shape.props.w / 2},${inset}`,
+            `${shape.props.w - inset},${shape.props.h / 2}`,
+            `${shape.props.w / 2},${shape.props.h - inset}`,
+            `${inset},${shape.props.h / 2}`,
+          ].join(" ")}
+        />
+      ) : (
+        <rect
+          {...sharedProps}
+          x={inset}
+          y={inset}
+          width={width}
+          height={height}
+          rx={rectangleRadius}
+          ry={rectangleRadius}
+        />
+      )}
+    </svg>
+  );
+}

package/_vendor/plugin-geo/core.ts

@@ -0,0 +1,495 @@
+import {
+  SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
+  type LandCorePlugin,
+  type ShapeRecordBase,
+  type ToolbarAction,
+  type ToolbarActionValue,
+  type ToolbarContribution,
+  type ShapeSvgExporter,
+  type SvgNode,
+} from "@land/canvas-core";
+import { DiamondTool, EllipseTool, RectangleTool } from "./GeoTools";
+import { GeoShapeUtil } from "./GeoShapeUtil";
+import {
+  isGeoShapeRecord,
+  type GeoShapeKind,
+  type GeoShapeProps,
+  type GeoShapeRecord,
+} from "./types";
+
+export class GeoShapeSvgExporter implements ShapeSvgExporter<GeoShapeRecord> {
+  readonly type = "geo" as const;
+
+  toSvg(shape: GeoShapeRecord): SvgNode {
+    const { geo, fill, stroke, strokeWidth, w, h } = shape.props;
+    const inset = strokeWidth / 2;
+    const width = Math.max(w - strokeWidth, 0);
+    const height = Math.max(h - strokeWidth, 0);
+    const sharedAttrs = {
+      fill,
+      stroke,
+      "stroke-width": strokeWidth,
+      "stroke-linejoin": "round",
+      "stroke-linecap": "round",
+    };
+
+    if (geo === "ellipse") {
+      return {
+        tag: "ellipse",
+        attrs: {
+          ...sharedAttrs,
+          cx: w / 2,
+          cy: h / 2,
+          rx: width / 2,
+          ry: height / 2,
+        },
+      };
+    }
+
+    if (geo === "diamond") {
+      return {
+        tag: "polygon",
+        attrs: {
+          ...sharedAttrs,
+          points: [
+            `${formatNumber(w / 2)},${formatNumber(inset)}`,
+            `${formatNumber(w - inset)},${formatNumber(h / 2)}`,
+            `${formatNumber(w / 2)},${formatNumber(h - inset)}`,
+            `${formatNumber(inset)},${formatNumber(h / 2)}`,
+          ].join(" "),
+        },
+      };
+    }
+
+    const radius = Math.min(10, width * 0.12, height * 0.12);
+    return {
+      tag: "rect",
+      attrs: {
+        ...sharedAttrs,
+        x: inset,
+        y: inset,
+        width,
+        height,
+        rx: radius,
+        ry: radius,
+      },
+    };
+  }
+}
+
+export function createGeoCorePlugin(): LandCorePlugin {
+  return {
+    id: "land.geo",
+    shapeCapabilities: [
+      {
+        type: "geo",
+        schemaProps: ["w", "h", "geo", "fill", "stroke", "strokeWidth"],
+        reactRenderer: "supported",
+        toolbarEntry: "supported",
+        notes: [
+          "Toolbar covers rectangle, ellipse, and diamond through geo props.",
+        ],
+      },
+    ],
+    shapeUtils: [new GeoShapeUtil()],
+    shapeSvgExporters: [new GeoShapeSvgExporter()],
+    toolbarActions: [
+      createSetGeoKindToolbarAction(),
+      createSetGeoStyleToolbarAction("fill"),
+      createSetGeoStyleToolbarAction("stroke"),
+      createSetGeoStyleToolbarAction("strokeWidth"),
+      createSetGeoDefaultStyleToolbarAction("fill"),
+      createSetGeoDefaultStyleToolbarAction("stroke"),
+      createSetGeoDefaultStyleToolbarAction("strokeWidth"),
+    ],
+    toolbarContributions: [
+      createGeoToolToolbarContribution(),
+      createGeoDefaultStyleToolbarContribution(),
+      createGeoSelectionToolbarContribution(),
+    ],
+    setup(editor) {
+      editor.tools.register(
+        "rectangle",
+        (currentEditor) => new RectangleTool(currentEditor),
+        { shortcut: "r" },
+      );
+      editor.tools.register(
+        "ellipse",
+        (currentEditor) => new EllipseTool(currentEditor),
+        { shortcut: "o" },
+      );
+      editor.tools.register(
+        "diamond",
+        (currentEditor) => new DiamondTool(currentEditor),
+        { shortcut: "d" },
+      );
+    },
+  };
+}
+
+const GEO_FILL_SWATCHES = [
+  { 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 GEO_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 GEO_STROKE_WIDTH_OPTIONS = [
+  { value: 1, label: "1" },
+  { value: 2, label: "2" },
+  { value: 4, label: "4" },
+] as const;
+
+function createGeoToolToolbarContribution(): ToolbarContribution {
+  return {
+    id: "geo.tool-toolbar",
+    surface: "tool",
+    placement: "chrome",
+    order: 20,
+    actionIds: [SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID],
+    getGroups() {
+      return [
+        {
+          id: "geo.tools",
+          items: [
+            {
+              kind: "button",
+              id: "geo.tool.rectangle",
+              actionId: SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
+              value: "rectangle",
+              label: "Rectangle",
+              shortcut: "R",
+              icon: "square",
+              dataUi: "rectangle-tool-button",
+            },
+            {
+              kind: "button",
+              id: "geo.tool.ellipse",
+              actionId: SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
+              value: "ellipse",
+              label: "Ellipse",
+              shortcut: "O",
+              icon: "circle",
+              dataUi: "ellipse-tool-button",
+            },
+            {
+              kind: "button",
+              id: "geo.tool.diamond",
+              actionId: SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
+              value: "diamond",
+              label: "Diamond",
+              shortcut: "D",
+              icon: "diamond",
+              dataUi: "diamond-tool-button",
+            },
+          ],
+        },
+      ];
+    },
+  };
+}
+
+function createSetGeoStyleToolbarAction(
+  prop: "fill" | "stroke" | "strokeWidth",
+): ToolbarAction<ToolbarActionValue> {
+  return {
+    id: `geo.set-${prop}`,
+    isVisible(context) {
+      return context.selection.commonShapeType === "geo";
+    },
+    isEnabled(context) {
+      return context.selection.count > 0;
+    },
+    getValue(context) {
+      return getCommonGeoPropValue(context.selection.selectedShapes, prop);
+    },
+    run({ context, value }) {
+      if (!isValidGeoStyleValue(prop, value)) {
+        return;
+      }
+      const updates = context.selection.selectedShapes
+        .filter(isGeoShapeRecord)
+        .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 createSetGeoDefaultStyleToolbarAction(
+  prop: "fill" | "stroke" | "strokeWidth",
+): ToolbarAction<ToolbarActionValue> {
+  return {
+    id: `geo.default-${prop}`,
+    isVisible(context) {
+      return isGeoToolActive(context.tool.activeToolId);
+    },
+    getValue(context) {
+      return context.editor.getDefaultShapeProps<GeoShapeProps>("geo")[prop];
+    },
+    run({ context, value }) {
+      if (!isValidGeoStyleValue(prop, value)) {
+        return;
+      }
+      context.editor.updateDefaultShapeProps("geo", { [prop]: value });
+    },
+  };
+}
+
+function createSetGeoKindToolbarAction(): ToolbarAction<GeoShapeKind | null> {
+  return {
+    id: "geo.set-kind",
+    isVisible(context) {
+      return context.selection.commonShapeType === "geo";
+    },
+    isEnabled(context) {
+      return context.selection.count > 0;
+    },
+    getValue(context) {
+      return getCommonGeoShapeKind(context.selection.selectedShapes);
+    },
+    run({ context, value }) {
+      if (
+        value !== "rectangle" &&
+        value !== "ellipse" &&
+        value !== "diamond"
+      ) {
+        return;
+      }
+      const updates = context.selection.selectedShapes
+        .filter(isGeoShapeRecord)
+        .filter((shape) => !shape.isLocked)
+        .map((shape) => ({
+          id: shape.id,
+          props: { geo: value },
+        }));
+      if (updates.length === 0) {
+        return;
+      }
+      context.editor.commands.updateShapes(updates, { source: "user" });
+    },
+  };
+}
+
+function createGeoDefaultStyleToolbarContribution(): ToolbarContribution {
+  return {
+    id: "geo.default-style.tool-toolbar",
+    surface: "tool",
+    order: 21,
+    actionIds: [
+      "geo.default-fill",
+      "geo.default-stroke",
+      "geo.default-strokeWidth",
+    ],
+    when(context) {
+      return isGeoToolActive(context.tool.activeToolId);
+    },
+    getGroups() {
+      return getGeoStyleToolbarGroups({
+        fillActionId: "geo.default-fill",
+        strokeActionId: "geo.default-stroke",
+        strokeWidthActionId: "geo.default-strokeWidth",
+        dataUiPrefix: "geo-default",
+      });
+    },
+  };
+}
+
+function createGeoSelectionToolbarContribution(): ToolbarContribution {
+  return {
+    id: "geo.selection-toolbar",
+    surface: "selection",
+    order: 20,
+    actionIds: [
+      "geo.set-kind",
+      "geo.set-fill",
+      "geo.set-stroke",
+      "geo.set-strokeWidth",
+    ],
+    when(context) {
+      return context.selection.commonShapeType === "geo";
+    },
+    getGroups() {
+      return [
+        {
+          id: "geo.shape-kind",
+          items: [
+            {
+              kind: "segmented",
+              id: "geo.shape-kind",
+              actionId: "geo.set-kind",
+              options: [
+                {
+                  value: "rectangle",
+                  label: "Rectangle",
+                  icon: "square",
+                  dataUi: "rectangle-shape-button",
+                },
+                {
+                  value: "ellipse",
+                  label: "Ellipse",
+                  icon: "circle",
+                  dataUi: "ellipse-shape-button",
+                },
+                {
+                  value: "diamond",
+                  label: "Diamond",
+                  icon: "diamond",
+                  dataUi: "diamond-shape-button",
+                },
+              ],
+            },
+          ],
+        },
+        ...getGeoStyleToolbarGroups({
+          fillActionId: "geo.set-fill",
+          strokeActionId: "geo.set-stroke",
+          strokeWidthActionId: "geo.set-strokeWidth",
+          dataUiPrefix: "geo",
+        }),
+      ];
+    },
+  };
+}
+
+function getGeoStyleToolbarGroups({
+  fillActionId,
+  strokeActionId,
+  strokeWidthActionId,
+  dataUiPrefix,
+}: {
+  fillActionId: string;
+  strokeActionId: string;
+  strokeWidthActionId: string;
+  dataUiPrefix: string;
+}) {
+  return [
+    {
+      id: `${dataUiPrefix}.style-fill`,
+      items: [
+        {
+          kind: "swatches" as const,
+          id: `${dataUiPrefix}.fill`,
+          actionId: fillActionId,
+          label: "Fill",
+          options: GEO_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: GEO_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: GEO_STROKE_WIDTH_OPTIONS.map((option) => ({
+            ...option,
+            dataUi: `${dataUiPrefix}-stroke-width-${option.value}-button`,
+          })),
+        },
+      ],
+    },
+  ];
+}
+
+function getCommonGeoPropValue(
+  selectedShapes: readonly ShapeRecordBase[],
+  prop: "fill" | "stroke" | "strokeWidth",
+): ToolbarActionValue {
+  let value: ToolbarActionValue | undefined;
+  for (const shape of selectedShapes) {
+    if (shape.type !== "geo") {
+      continue;
+    }
+    const nextValue = (shape.props as GeoShapeProps)[prop];
+    if (value === undefined) {
+      value = nextValue;
+      continue;
+    }
+    if (value !== nextValue) {
+      return null;
+    }
+  }
+  return value ?? null;
+}
+
+function getCommonGeoShapeKind(
+  selectedShapes: readonly ShapeRecordBase[],
+): GeoShapeKind | null {
+  let commonKind: GeoShapeKind | null = null;
+  for (const shape of selectedShapes) {
+    if (!isGeoShapeRecord(shape)) {
+      continue;
+    }
+    if (commonKind === null) {
+      commonKind = shape.props.geo;
+      continue;
+    }
+    if (commonKind !== shape.props.geo) {
+      return null;
+    }
+  }
+  return commonKind;
+}
+
+function isValidGeoStyleValue(
+  prop: "fill" | "stroke" | "strokeWidth",
+  value: ToolbarActionValue,
+): boolean {
+  if (prop === "strokeWidth") {
+    return GEO_STROKE_WIDTH_OPTIONS.some((option) => option.value === value);
+  }
+  const swatches = prop === "fill" ? GEO_FILL_SWATCHES : GEO_STROKE_SWATCHES;
+  return swatches.some((option) => option.value === value);
+}
+
+function isGeoToolActive(activeToolId: string): boolean {
+  return (
+    activeToolId === "rectangle" ||
+    activeToolId === "ellipse" ||
+    activeToolId === "diamond"
+  );
+}
+
+function formatNumber(value: number): string {
+  if (!Number.isFinite(value)) {
+    return "0";
+  }
+  return Number(value.toFixed(4)).toString();
+}

package/_vendor/plugin-geo/feature.ts

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

package/_vendor/plugin-geo/index.ts

@@ -0,0 +1,7 @@
+export { DiamondTool, EllipseTool, RectangleTool } from "./GeoTools";
+export { GeoShapeUtil } from "./GeoShapeUtil";
+export { GeoShapeSvgExporter, createGeoCorePlugin } from "./core";
+export { GeoShapeSvg, createGeoCanvasPlugin } from "./canvas";
+export { Geo, createGeoFeatureBundle } from "./feature";
+export type { GeoShapeKind, GeoShapeProps, GeoShapeRecord } from "./types";
+export { isGeoShapeRecord } from "./types";

package/_vendor/plugin-geo/types.ts

@@ -0,0 +1,27 @@
+import {
+  isShapeRecord,
+  type BaseRecord,
+  type ShapeRecordBase,
+} from "@land/canvas-core";
+
+export type GeoShapeKind = "rectangle" | "ellipse" | "diamond";
+
+export interface GeoShapeProps {
+  w: number;
+  h: number;
+  geo: GeoShapeKind;
+  fill: string;
+  stroke: string;
+  strokeWidth: number;
+}
+
+export interface GeoShapeRecord extends ShapeRecordBase<"geo", GeoShapeProps> {
+  type: "geo";
+  props: GeoShapeProps;
+}
+
+export function isGeoShapeRecord(
+  record: BaseRecord | null | undefined,
+): record is GeoShapeRecord {
+  return isShapeRecord(record) && record.type === "geo";
+}

package/_vendor/plugin-group/GroupShapeUtil.ts

@@ -0,0 +1,59 @@
+import {
+  Box,
+  ShapeUtil,
+  type Vec,
+  type ShapeRecordBase,
+} from "@land/canvas-core";
+
+export interface GroupShapeProps {
+  w: number;
+  h: number;
+}
+
+export type GroupShapeRecord = ShapeRecordBase<"group", GroupShapeProps>;
+
+function clampDimension(value: unknown, fallback: number): number {
+  return typeof value === "number" && Number.isFinite(value)
+    ? Math.max(1, value)
+    : fallback;
+}
+
+export class GroupShapeUtil extends ShapeUtil<GroupShapeRecord> {
+  readonly type = "group" as const;
+
+  getDefaultProps(): GroupShapeProps {
+    return {
+      w: 1,
+      h: 1,
+    };
+  }
+
+  validateProps(props: unknown): GroupShapeProps {
+    const candidate =
+      props && typeof props === "object"
+        ? (props as Partial<GroupShapeProps>)
+        : {};
+    const fallback = this.getDefaultProps();
+
+    return {
+      w: clampDimension(candidate.w, fallback.w),
+      h: clampDimension(candidate.h, fallback.h),
+    };
+  }
+
+  getBounds(shape: GroupShapeRecord): Box {
+    return new Box(shape.x, shape.y, shape.props.w, shape.props.h);
+  }
+
+  hitTest(_shape: GroupShapeRecord, _positionedPoint: Vec): boolean {
+    return false;
+  }
+
+  shouldTransformDescendants(_shape: GroupShapeRecord): boolean {
+    return true;
+  }
+
+  canReceiveChildren(_shape: GroupShapeRecord): boolean {
+    return true;
+  }
+}