@yuzhouu/canvas-kit 0.1.2 → 0.1.3

package/_vendor/canvas-react/components/PageSpace.tsx

@@ -1,34 +0,0 @@
-import type { ReactNode } from "react";
-import { useEditor } from "../hooks/useEditor";
-import { useValue } from "../hooks/useValue";
-
-export function PageSpace({
-  children,
-  className,
-  dataUi,
-}: {
-  children: ReactNode;
-  className?: string;
-  dataUi: string;
-}) {
-  const editor = useEditor();
-  const pageTransform = useValue(editor.pageTransformSignal);
-
-  return (
-    <div
-      data-ui={dataUi}
-      className={className}
-      style={{
-        position: "absolute",
-        left: 0,
-        top: 0,
-        width: "100%",
-        height: "100%",
-        transform: pageTransform.toCssString(),
-        transformOrigin: "0 0",
-      }}
-    >
-      {children}
-    </div>
-  );
-}

package/_vendor/canvas-react/components/ShapeLayer.tsx

@@ -1,428 +0,0 @@
-import { memo, type CSSProperties, type ReactNode } from "react";
-import {
-  Box,
-  Mat,
-  Vec,
-  type Editor,
-  type ShapeId,
-  type ShapeRecord,
-} from "@land/canvas-core";
-import { useEditor } from "../hooks/useEditor";
-import { useValue } from "../hooks/useValue";
-import { PageSpace } from "./PageSpace";
-import { useCanvasRendererRegistry } from "../host/CanvasRendererRegistryContext";
-
-export function ShapeLayer() {
-  const showDebugSummary = shouldShowShapeLayerDebugSummary();
-
-  return (
-    <div
-      data-ui="shape-layer"
-      className="absolute inset-0"
-      style={{
-        position: "absolute",
-        left: 0,
-        top: 0,
-        width: "100%",
-        height: "100%",
-      }}
-    >
-      <PageSpace dataUi="shape-page-space" className="absolute inset-0">
-        <ShapeRenderList />
-      </PageSpace>
-      {showDebugSummary ? <ShapeLayerDebugSummary /> : null}
-    </div>
-  );
-}
-
-interface ShapeFrame {
-  left: number;
-  top: number;
-  width: number;
-  height: number;
-  transform: string;
-  transformOrigin: string;
-  elementToPage: Mat;
-}
-
-const ShapeRenderList = memo(function ShapeRenderList() {
-  const editor = useEditor();
-  const retainedShapeIds = useValue(editor.retainedShapeIdsSignal);
-
-  return retainedShapeIds.map((shapeId: ShapeId) => (
-    <ShapeItem key={shapeId} shapeId={shapeId} />
-  ));
-});
-
-const ShapeLayerDebugSummary = memo(function ShapeLayerDebugSummary() {
-  const editor = useEditor();
-  const pageShapeIds = useValue(editor.currentPageShapeIdsSignal);
-  const retainedShapeIds = useValue(editor.retainedShapeIdsSignal);
-  const visibleShapeIds = useValue(editor.renderVisibleShapeIdsSignal);
-  const renderOrderById = useValue(editor.shapeRenderOrderByIdSignal);
-  const visibleShapeIdSet = new Set(visibleShapeIds);
-  const renderOrders = retainedShapeIds.map(
-    (shapeId) => renderOrderById.get(shapeId) ?? -1,
-  );
-  const visibleRenderOrders = retainedShapeIds
-    .filter((shapeId) => visibleShapeIdSet.has(shapeId))
-    .map((shapeId) => renderOrderById.get(shapeId) ?? -1);
-  const hiddenRetainedIds = retainedShapeIds.filter(
-    (shapeId) => !visibleShapeIdSet.has(shapeId),
-  );
-  const summary = {
-    pageShapeCount: pageShapeIds.length,
-    mountedCount: retainedShapeIds.length,
-    visibleCount: visibleShapeIds.length,
-    hiddenRetainedCount: hiddenRetainedIds.length,
-    minRenderOrder:
-      renderOrders.length > 0 ? Math.min(...renderOrders) : null,
-    maxRenderOrder:
-      renderOrders.length > 0 ? Math.max(...renderOrders) : null,
-    mountedRenderOrderSeq: renderOrders.join(","),
-    visibleRenderOrderSeq: visibleRenderOrders.join(","),
-    firstMountedShapeId: retainedShapeIds[0] ?? null,
-    lastMountedShapeId: retainedShapeIds[retainedShapeIds.length - 1] ?? null,
-    hiddenRetainedShapeIds: hiddenRetainedIds,
-  };
-
-  return (
-    <pre
-      data-ui="shape-layer-debug-summary"
-      data-mounted-count={summary.mountedCount}
-      data-visible-count={summary.visibleCount}
-      data-hidden-retained-count={summary.hiddenRetainedCount}
-      data-min-render-order={summary.minRenderOrder ?? undefined}
-      data-max-render-order={summary.maxRenderOrder ?? undefined}
-      hidden
-    >
-      {JSON.stringify(summary)}
-    </pre>
-  );
-});
-
-function shouldShowShapeLayerDebugSummary(): boolean {
-  if (typeof window === "undefined") {
-    return false;
-  }
-
-  const params = new URLSearchParams(window.location.search);
-  return params.get("renderHostDebug") === "1";
-}
-
-const ShapeItem = memo(function ShapeItem({ shapeId }: { shapeId: ShapeId }) {
-  const editor = useEditor();
-  const stableShapeId = shapeId as ShapeId;
-  const shape = useValue(editor.getShapeSignal(stableShapeId));
-  const isVisible = useValue(editor.getShapeRenderVisibleSignal(stableShapeId));
-  const activeToolId = useValue(editor.toolStateSignal).activeToolId;
-  const isSelectedByState = useValue(
-    editor.getShapeSelectedSignal(stableShapeId),
-  );
-  const isSelected = activeToolId === "select" && isSelectedByState;
-  const shapeEditingSession = useValue(
-    editor.getShapeEditingSessionForShapeSignal(stableShapeId),
-  );
-  const renderOrder = useValue(editor.getShapeRenderOrderSignal(stableShapeId));
-  const isDropTarget = useValue(editor.getShapeDropTargetSignal(stableShapeId));
-  const isErasing = useValue(editor.getShapeErasingSignal(stableShapeId));
-  const isSelectedDescendantTransformAncestor = useValue(
-    editor.getShapeSelectedDescendantTransformAncestorSignal(stableShapeId),
-  );
-  const clipAncestorIds = useValue(
-    editor.getShapeClipAncestorIdsSignal(stableShapeId),
-  );
-  const rendererRegistry = useCanvasRendererRegistry();
-
-  if (!shape) {
-    return null;
-  }
-
-  const renderer = rendererRegistry.getShapeRenderer(shape.type);
-  if (!renderer) return null;
-  const Component = renderer.component;
-  const frame = getShapeFrame(editor, shape);
-  const effectiveOpacity = isErasing ? shape.opacity * 0.32 : shape.opacity;
-  const siblingOrderState =
-    isSelected ? editor.getSelectionSiblingOrderState() : null;
-  const parentShape =
-    siblingOrderState?.parentId.startsWith("shape:")
-      ? editor.getShape(siblingOrderState.parentId as ShapeId)
-      : null;
-  const shouldShowOrderBadge = parentShape?.type === "frame";
-
-  return (
-    <div
-      data-ui="shape-instance"
-      data-shape-id={shape.id}
-      data-shape-type={shape.type}
-      data-selected={isSelected ? "true" : "false"}
-      data-drop-target={isDropTarget ? "true" : "false"}
-      data-visible={isVisible ? "true" : "false"}
-      data-render-order={renderOrder >= 0 ? String(renderOrder) : undefined}
-      data-clip-ancestor-count={clipAncestorIds.length}
-      style={{
-        position: "absolute",
-        display: isVisible ? undefined : "none",
-        left: frame.left,
-        top: frame.top,
-        width: frame.width,
-        height: frame.height,
-        opacity: effectiveOpacity === 1 ? undefined : effectiveOpacity,
-        transform: frame.transform,
-        transformOrigin: frame.transformOrigin,
-        pointerEvents: "none",
-        outline: isDropTarget ? "2px solid #2563eb" : undefined,
-        outlineOffset: isDropTarget ? 4 : undefined,
-        boxShadow: isDropTarget
-          ? "0 0 0 6px rgba(37, 99, 235, 0.16)"
-          : undefined,
-        zIndex: renderOrder >= 0 ? renderOrder + 1 : undefined,
-      }}
-    >
-      {isVisible ? (
-        <ShapeClipStack
-          clipAncestorIds={clipAncestorIds}
-          shapeElementToPage={frame.elementToPage}
-        >
-          <Component
-            shape={shape as never}
-            editor={editor}
-            isSelected={isSelected}
-            shapeEditingSession={shapeEditingSession}
-          />
-        </ShapeClipStack>
-      ) : null}
-      {isVisible && isDropTarget ? (
-        <ShapeDropTargetLabel shapeType={shape.type} />
-      ) : null}
-      {isVisible && isSelectedDescendantTransformAncestor ? (
-        <TransformDescendantAncestorBoundary />
-      ) : null}
-      {isVisible && shouldShowOrderBadge && siblingOrderState ? (
-        <ShapeOrderBadge state={siblingOrderState} />
-      ) : null}
-    </div>
-  );
-});
-
-function TransformDescendantAncestorBoundary() {
-  return (
-    <div
-      data-ui="transform-descendant-ancestor-boundary"
-      style={{
-        position: "absolute",
-        inset: 0,
-        border: "1px dashed #64748b",
-        pointerEvents: "none",
-      }}
-    />
-  );
-}
-
-function ShapeOrderBadge({
-  state,
-}: {
-  state: { index: number; count: number };
-}) {
-  return (
-    <div
-      data-ui="shape-order-badge"
-      style={{
-        position: "absolute",
-        right: 8,
-        top: 8,
-        display: "flex",
-        alignItems: "center",
-        height: 22,
-        padding: "0 8px",
-        borderRadius: 999,
-        border: "1px solid rgba(15, 23, 42, 0.12)",
-        background: "rgba(255, 255, 255, 0.94)",
-        color: "#334155",
-        fontFamily:
-          "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
-        fontSize: 11,
-        fontWeight: 700,
-        lineHeight: "22px",
-        boxShadow: "0 8px 18px rgba(15, 23, 42, 0.12)",
-        whiteSpace: "nowrap",
-        pointerEvents: "none",
-      }}
-    >
-      {state.index + 1} / {state.count}
-    </div>
-  );
-}
-
-function ShapeDropTargetLabel({ shapeType }: { shapeType: string }) {
-  return (
-    <div
-      data-ui="shape-drop-target-label"
-      style={{
-        position: "absolute",
-        left: 10,
-        top: 10,
-        display: "flex",
-        alignItems: "center",
-        height: 24,
-        padding: "0 10px",
-        borderRadius: 999,
-        background: "#2563eb",
-        color: "white",
-        fontFamily:
-          "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
-        fontSize: 12,
-        fontWeight: 700,
-        lineHeight: "24px",
-        boxShadow: "0 10px 24px rgba(37, 99, 235, 0.24)",
-        whiteSpace: "nowrap",
-        pointerEvents: "none",
-      }}
-    >
-      {shapeType === "frame" ? "Drop into frame" : "Drop into group"}
-    </div>
-  );
-}
-
-function ShapeClipStack({
-  children,
-  clipAncestorIds,
-  shapeElementToPage,
-}: {
-  children: ReactNode;
-  clipAncestorIds: readonly ShapeId[];
-  shapeElementToPage: Mat;
-}) {
-  if (clipAncestorIds.length === 0) {
-    return <>{children}</>;
-  }
-
-  return clipAncestorIds.reduceRight<ReactNode>(
-    (content, ancestorId) => (
-      <ShapeClipBoundary
-        key={ancestorId}
-        ancestorId={ancestorId}
-        shapeElementToPage={shapeElementToPage}
-      >
-        {content}
-      </ShapeClipBoundary>
-    ),
-    children,
-  );
-}
-
-function ShapeClipBoundary({
-  ancestorId,
-  children,
-  shapeElementToPage,
-}: {
-  ancestorId: ShapeId;
-  children: ReactNode;
-  shapeElementToPage: Mat;
-}) {
-  const editor = useEditor();
-  const ancestor = useValue(editor.getShapeSignal(ancestorId));
-  if (!ancestor) {
-    return <>{children}</>;
-  }
-
-  const clipPath = getShapeElementClipPath(
-    editor,
-    ancestor,
-    shapeElementToPage,
-  );
-  if (!clipPath) {
-    return <>{children}</>;
-  }
-
-  const style: CSSProperties = {
-    width: "100%",
-    height: "100%",
-    clipPath,
-    WebkitClipPath: clipPath,
-  };
-
-  return (
-    <div
-      data-ui="shape-clip-boundary"
-      data-clip-ancestor-id={ancestorId}
-      style={style}
-    >
-      {children}
-    </div>
-  );
-}
-
-function getShapeFrame(
-  editor: Editor,
-  shape: ShapeRecord,
-): ShapeFrame {
-  const renderBounds = editor.computeShapeRenderBounds(shape);
-  const renderToPage = editor.computeShapeRenderToPageTransform(shape);
-  const elementToPage = renderToPage.compose(
-    Mat.Translate(renderBounds.x, renderBounds.y),
-  );
-  return {
-    left: 0,
-    top: 0,
-    width: renderBounds.w,
-    height: renderBounds.h,
-    transform: elementToPage.toCssString(),
-    transformOrigin: "0 0",
-    elementToPage,
-  };
-}
-
-function getShapeElementClipPath(
-  editor: Editor,
-  ancestor: ShapeRecord,
-  shapeElementToPage: Mat,
-): string | null {
-  const util = editor.getShapeUtil(ancestor);
-  const clipBounds = util.getChildClipLocalBounds(ancestor);
-  if (!clipBounds || !isValidBox(clipBounds)) {
-    return null;
-  }
-
-  const ancestorLocalToPage = editor.computeShapeRenderToPageTransform(ancestor);
-  const pageToShapeElement = shapeElementToPage.invert();
-  const points = getBoxCorners(clipBounds).map((point) =>
-    pageToShapeElement.applyToPoint(
-      ancestorLocalToPage.applyToPoint(point),
-    ),
-  );
-
-  return `polygon(${points.map(formatClipPoint).join(", ")})`;
-}
-
-function getBoxCorners(box: Box): Vec[] {
-  return [
-    new Vec(box.minX, box.minY),
-    new Vec(box.maxX, box.minY),
-    new Vec(box.maxX, box.maxY),
-    new Vec(box.minX, box.maxY),
-  ];
-}
-
-function isValidBox(box: Box): boolean {
-  return (
-    Number.isFinite(box.x) &&
-    Number.isFinite(box.y) &&
-    Number.isFinite(box.w) &&
-    Number.isFinite(box.h) &&
-    box.w >= 0 &&
-    box.h >= 0
-  );
-}
-
-function formatClipPoint(point: Vec): string {
-  return `${formatCssNumber(point.x)}px ${formatCssNumber(point.y)}px`;
-}
-
-function formatCssNumber(value: number): string {
-  if (!Number.isFinite(value)) {
-    return "0";
-  }
-  return Number(value.toFixed(3)).toString();
-}

package/_vendor/canvas-react/hooks/useEditor.ts

@@ -1,11 +0,0 @@
-import { createContext, useContext } from "react";
-import type { Editor } from "@land/canvas-core";
-
-export const EditorContext = createContext<Editor | null>(null);
-
-export function useEditor(): Editor {
-  const editor = useContext(EditorContext);
-  if (!editor)
-    throw new Error("useEditor must be used within EditorContext.Provider");
-  return editor;
-}

package/_vendor/canvas-react/hooks/useValue.ts

@@ -1,14 +0,0 @@
-import { useEffect, useReducer } from "react";
-import { observeValue, type ReadonlyValue } from "@land/canvas-core";
-
-export function useValue<T>(signal: ReadonlyValue<T>): T {
-  const [, forceUpdate] = useReducer((c: number) => c + 1, 0);
-
-  useEffect(() => {
-    return observeValue("useValue", signal, () => {
-      forceUpdate();
-    });
-  }, [signal]);
-
-  return signal.get();
-}

package/_vendor/canvas-react/host/CanvasRendererRegistryContext.tsx

@@ -1,14 +0,0 @@
-import { createContext, useContext } from "react";
-import {
-  createCanvasRendererRegistry,
-  type CanvasRendererRegistry,
-} from "./rendererRegistry";
-
-const defaultCanvasRendererRegistry = createCanvasRendererRegistry();
-
-export const CanvasRendererRegistryContext =
-  createContext<CanvasRendererRegistry>(defaultCanvasRendererRegistry);
-
-export function useCanvasRendererRegistry(): CanvasRendererRegistry {
-  return useContext(CanvasRendererRegistryContext);
-}

package/_vendor/canvas-react/host/contextMenuRegistry.ts

@@ -1,61 +0,0 @@
-import type {
-  ContextMenuContext,
-  ContextMenuContribution,
-  ContextMenuContributionTarget,
-  ContextMenuSection,
-  LandCorePlugin,
-} from "@land/canvas-core";
-
-export class CanvasContextMenuRegistry {
-  private readonly contributions = new Map<string, ContextMenuContribution>();
-  private readonly duplicateContributionIds = new Set<string>();
-
-  registerContribution(
-    contribution: ContextMenuContribution,
-    options: { replace?: boolean } = {},
-  ): void {
-    if (this.contributions.has(contribution.id) && !options.replace) {
-      this.duplicateContributionIds.add(contribution.id);
-      return;
-    }
-    this.contributions.set(contribution.id, contribution);
-  }
-
-  registerCorePlugins(plugins: readonly LandCorePlugin[]): void {
-    for (const plugin of plugins) {
-      for (const contribution of plugin.contextMenuContributions ?? []) {
-        this.registerContribution(contribution);
-      }
-    }
-  }
-
-  getDuplicateContributionIds(): string[] {
-    return [...this.duplicateContributionIds];
-  }
-
-  getSections(
-    target: ContextMenuContributionTarget,
-    context: ContextMenuContext,
-  ): ContextMenuSection[] {
-    return [...this.contributions.values()]
-      .filter(
-        (contribution) =>
-          contribution.target === "any" || contribution.target === target,
-      )
-      .filter((contribution) => contribution.when?.(context) ?? true)
-      .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
-      .flatMap((contribution) =>
-        [...contribution.getSections(context)].sort(
-          (a, b) => (a.order ?? 0) - (b.order ?? 0),
-        ),
-      );
-  }
-}
-
-export function createCanvasContextMenuRegistry(
-  plugins: readonly LandCorePlugin[] = [],
-): CanvasContextMenuRegistry {
-  const nextRegistry = new CanvasContextMenuRegistry();
-  nextRegistry.registerCorePlugins(plugins);
-  return nextRegistry;
-}

package/_vendor/canvas-react/host/domEventGuards.ts

@@ -1,61 +0,0 @@
-import {
-  type CanvasDomEventGuard,
-  type CanvasDomEventGuardCursorInput,
-  type CanvasDomEventGuardInput,
-  type LandCanvasPlugin,
-} from "@land/canvas-plugin-api";
-
-export class CanvasDomEventGuardRegistry {
-  private readonly guards: CanvasDomEventGuard[] = [];
-  private readonly registeredGuardIds = new Set<string>();
-
-  register(guard: CanvasDomEventGuard): void {
-    if (this.registeredGuardIds.has(guard.id)) {
-      return;
-    }
-
-    this.guards.push(guard);
-    this.registeredGuardIds.add(guard.id);
-  }
-
-  registerCanvasPlugins(plugins: readonly LandCanvasPlugin[]): void {
-    for (const plugin of plugins) {
-      for (const guard of plugin.domEventGuards ?? []) {
-        this.register(guard);
-      }
-    }
-  }
-
-  getGuards(): readonly CanvasDomEventGuard[] {
-    return this.guards;
-  }
-
-  handle(input: CanvasDomEventGuardInput): "continue" | "handled" {
-    for (const guard of this.guards) {
-      if (guard.handle(input) === "handled") {
-        return "handled";
-      }
-    }
-
-    return "continue";
-  }
-
-  getCursor(input: CanvasDomEventGuardCursorInput): string | undefined {
-    for (const guard of this.guards) {
-      const cursor = guard.getCursor?.(input);
-      if (cursor !== undefined) {
-        return cursor;
-      }
-    }
-
-    return undefined;
-  }
-}
-
-export function createCanvasDomEventGuardRegistry(
-  plugins: readonly LandCanvasPlugin[] = [],
-): CanvasDomEventGuardRegistry {
-  const nextRegistry = new CanvasDomEventGuardRegistry();
-  nextRegistry.registerCanvasPlugins(plugins);
-  return nextRegistry;
-}

package/_vendor/canvas-react/host/index.ts

@@ -1,38 +0,0 @@
-export {
-  CanvasRendererRegistryContext,
-  useCanvasRendererRegistry,
-} from "./CanvasRendererRegistryContext";
-export {
-  CanvasDomEventGuardRegistry,
-  createCanvasDomEventGuardRegistry,
-} from "./domEventGuards";
-export {
-  CanvasRendererRegistry,
-  createCanvasRendererRegistry,
-} from "./rendererRegistry";
-export {
-  CanvasToolbarRegistry,
-  createCanvasToolbarRegistry,
-} from "./toolbarRegistry";
-export {
-  CanvasContextMenuRegistry,
-  createCanvasContextMenuRegistry,
-} from "./contextMenuRegistry";
-export type {
-  AnyRegisteredShapeRenderer,
-  RegisteredShapeRenderer,
-  ShapeRendererProps,
-} from "@land/canvas-plugin-api";
-export { createCanvasPluginHostRuntime } from "./pluginHost";
-export type {
-  CanvasPluginHostManifestEntry,
-  CanvasPluginHostManifestToolbarContributionEntry,
-  CanvasPluginHostRuntime,
-  CanvasPluginHostShapeValidationSummary,
-  CanvasPluginHostSource,
-  CanvasPluginHostValidationIssue,
-  CanvasPluginHostValidationIssueSeverity,
-  CanvasPluginHostValidationSummary,
-  CanvasPluginHostVerdict,
-  CreateCanvasPluginHostRuntimeOptions,
-} from "./pluginHost";