@hy-bricks/canvas 0.4.2 → 0.5.0

package/dist/index.d.ts

@@ -46,6 +46,7 @@ parentLayoutMode: ContainerLayoutConfig["mode"];
 "onHandle-ready"?: ((handle: CanvasHandle) => any) | undefined;
 }>, {
 mode: CanvasMode;
+freeSplitEnabled: boolean | (() => boolean);
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
 stageContainerEl: HTMLDivElement;
 }, any>;
@@ -96,6 +97,7 @@ declare type __VLS_Props_2 = {
     schedulerOptions?: RenderSchedulerOptions;
     adapters?: CanvasAdapters;
     canvasId?: string;
+    freeSplitEnabled?: boolean | (() => boolean);
 };
 
 declare type __VLS_Props_3 = {
@@ -133,6 +135,16 @@ declare function __VLS_template(): {
                 isDragging: boolean;
             };
         }) => VNode[];
+        'free-split-divider'?: (props: {
+            state: {
+                containerId: string;
+                nodeId: string;
+                dividerIndex: number;
+                direction: "horizontal" | "vertical";
+                rect: Rect;
+                isDragging: boolean;
+            };
+        }) => VNode[];
     }> & {
         default?: () => VNode[];
         'canvas-overlay'?: (props: {
@@ -155,6 +167,16 @@ declare function __VLS_template(): {
                 isDragging: boolean;
             };
         }) => VNode[];
+        'free-split-divider'?: (props: {
+            state: {
+                containerId: string;
+                nodeId: string;
+                dividerIndex: number;
+                direction: "horizontal" | "vertical";
+                rect: Rect;
+                isDragging: boolean;
+            };
+        }) => VNode[];
     };
     refs: {
         stageContainerEl: HTMLDivElement;
@@ -192,6 +214,16 @@ declare function __VLS_template_3(): {
                 isDragging: boolean;
             };
         }) => unknown;
+        'free-split-divider'?: (props: {
+            state: {
+                containerId: string;
+                nodeId: string;
+                dividerIndex: number;
+                direction: "horizontal" | "vertical";
+                rect: Rect;
+                isDragging: boolean;
+            };
+        }) => unknown;
     }> & {
         'reparent-ghost'?: (props: {
             state: {
@@ -209,6 +241,16 @@ declare function __VLS_template_3(): {
                 isDragging: boolean;
             };
         }) => unknown;
+        'free-split-divider'?: (props: {
+            state: {
+                containerId: string;
+                nodeId: string;
+                dividerIndex: number;
+                direction: "horizontal" | "vertical";
+                rect: Rect;
+                isDragging: boolean;
+            };
+        }) => unknown;
     };
     refs: {
         layerEl: HTMLDivElement;
@@ -242,6 +284,8 @@ declare type __VLS_WithTemplateSlots_3<T, S> = T & {
 
 export declare function applyEffectiveSplitRatiosToDocument(doc: PageDocument): PageDocument;
 
+export declare function applyFreeSplitResizeDrag(startSizes: readonly NodeSize[], dividerIndex: number, deltaPx: number, branchAxisPx: number, opts?: FreeSplitResizeOpts): NodeSize[];
+
 export declare function applySplitDividerDrag(startRatios: readonly number[], dividerIndex: number, deltaPx: number, parentAxisPx: number, gap?: number): number[];
 
 export declare function assertNeverBindingSource(s: never): never;
@@ -451,7 +495,7 @@ export declare const CANVAS_CONTEXT_KEY: InjectionKey<CanvasContext>;
 
 export declare const CANVAS_REPARENT_BRIDGE_KEY: InjectionKey<ReparentBridge>;
 
-export declare type CanvasAction = CanvasDocumentAction | CanvasSelectionAction;
+export declare type CanvasAction = CanvasDocumentAction | CanvasSelectionAction | CanvasFreeSplitAction;
 
 export declare interface CanvasActionHooks {
     onBeforeAction?: (action: CanvasAction) => boolean | void;
@@ -502,6 +546,7 @@ export declare interface CanvasContext {
     endBatch(batchType?: string): void;
     registerHooks(hooks: CanvasActionHooks): () => void;
     readonly isRecordingSuppressed: ComputedRef<boolean>;
+    readonly freeSplitEnabled: ComputedRef<boolean>;
     suppressRecording<T>(fn: () => T): T;
     readonly effectiveBehavior: ComputedRef<CanvasBehaviorConfig>;
     readonly interactionOptions: ComputedRef<Readonly<Partial<InteractionOptions>>>;
@@ -535,6 +580,7 @@ export declare interface CanvasContextOptions {
     adapters?: CanvasAdapters;
     hooks?: CanvasActionHooks;
     getMode?: () => CanvasMode;
+    freeSplitEnabled?: boolean | (() => boolean | undefined);
 }
 
 export declare type CanvasDocumentAction = {
@@ -598,7 +644,7 @@ export declare type CanvasDocumentAction = {
 } | {
     type: 'setRootLayout';
     payload: {
-        rootLayout: ContainerLayoutConfig | null;
+        rootLayout: RootContainerLayoutConfig | null;
     };
 } | {
     type: 'replaceDocument';
@@ -665,6 +711,8 @@ export declare interface CanvasFeatures {
     enablePublish?: boolean;
 }
 
+declare type CanvasFreeSplitAction = FreeSplitMutateAction;
+
 export declare interface CanvasGridConfig {
     visible?: boolean;
     size?: number;
@@ -689,12 +737,17 @@ export declare interface CanvasHandle {
     getSnapshot(): PageDocument;
     readonly selectedIds: Readonly<Ref<readonly string[]>>;
     readonly selectedInstances: ComputedRef<readonly PageInstance[]>;
+    readonly freeSplitSelection: Readonly<Ref<FreeSplitSelection | null>>;
+    selectFreeSplitLeaf(containerId: string, leafId: string): void;
+    selectFreeSplitDivider(containerId: string, nodeId: string, dividerIndex: number): void;
+    clearFreeSplitSelection(): void;
     readonly viewport: ViewportStore;
     clientToCanvasPoint(point: Point): Point;
     getInstanceAtClientPoint(point: Point): PageInstance | null;
     getDropTarget(point: Point, root?: ParentNode | null, options?: {
         excludeInstanceId?: string;
     }): DropTarget | null;
+    getFreeSplitDropTarget(point: Point, root?: ParentNode | null): FreeSplitDropTarget | null;
     duplicateInstance(instanceId: string, options?: DuplicateInstanceOptions): string | null;
     undo(): void;
     redo(): void;
@@ -708,7 +761,7 @@ export declare interface CanvasHandle {
     updateCanvasBackground(bg: Partial<CanvasBackgroundConfig> | null): void;
     updateBehavior(behavior: Partial<CanvasBehaviorConfig>): void;
     setInteractionOptions(options: Partial<InteractionOptions>): void;
-    setRootLayout(mode: ContainerLayoutConfig | 'free' | 'split' | 'grid' | 'flex' | 'none' | null): void;
+    setRootLayout(mode: RootContainerLayoutConfig | 'free' | 'split' | 'grid' | 'flex' | 'none' | null): void;
     getEffectiveBehavior(): CanvasBehaviorConfig;
     getInstanceTree(): PageInstanceTreeNode[];
     getInstanceList(): PageInstance[];
@@ -796,6 +849,7 @@ export declare interface CanvasHandle {
         status: DataSourceStatus;
     } | undefined;
     attachBindingDelegate(delegate: WirePageBindingsHandle | null, dataStore?: DataSourceStore | null): void;
+    readonly freeSplit: FreeSplitHandleApi;
 }
 
 export declare interface CanvasHandleOptions {
@@ -834,7 +888,7 @@ export declare interface CanvasLayoutConfig {
     canvas: CanvasViewportConfig;
     background?: CanvasBackgroundConfig;
     behavior?: CanvasBehaviorConfig;
-    rootLayout?: ContainerLayoutConfig;
+    rootLayout?: RootContainerLayoutConfig;
     guides?: {
         grid?: CanvasGridConfig;
         ruler?: CanvasRulerConfig;
@@ -850,6 +904,11 @@ export declare interface CanvasRulerConfig {
     size?: number;
 }
 
+export declare type CanvasSelection = {
+    kind: 'instance';
+    instanceId: string;
+} | FreeSplitSelection;
+
 export declare type CanvasSelectionAction = {
     type: 'select';
     payload: {
@@ -1021,6 +1080,12 @@ export declare function computeFit(rect: Rect_2, container: {
     h: number;
 }, options?: FitOptions): FitResult;
 
+export declare function computeFreeSplitDividers(root: SplitNode, getLeafRect: (leafId: string) => Rect | null, opts?: {
+    thickness?: number;
+}): FreeSplitDivider[];
+
+export declare function computeFreeSplitNodeRect(node: SplitNode, getLeafRect: (leafId: string) => Rect | null): Rect | null;
+
 export declare function computeInverse(action: CanvasAction, ctx: CanvasContext): CanvasAction[] | null;
 
 export declare function computeNextAxisSize(startAxis: InstanceSizeAxis | undefined, newPxCanvas: number, outletPxCanvas: number | null): InstanceSizeAxis;
@@ -1040,6 +1105,8 @@ export declare function computeSnap(input: SnapInput): SnapResult;
 
 export declare function computeSplitDividers(parentRect: Rect, ratios: readonly number[], direction: 'horizontal' | 'vertical', gap?: number): SplitDivider[];
 
+export declare function computeSplitShare(leafRect: Rect, edge: Edge, pt: Point): number;
+
 export declare function computeVisibleBounds(viewport: {
     scale: number;
     panX: number;
@@ -1051,9 +1118,9 @@ export declare function computeVisibleBounds(viewport: {
 
 export declare type ContainerLayoutConfig = {
     mode: 'none';
-} | FreeContainerLayout | FlexContainerLayout | SplitContainerLayout | GridContainerLayout;
+} | FreeContainerLayout | FlexContainerLayout | SplitContainerLayout | GridContainerLayout | FreeSplitContainerLayout;
 
-export declare type ContainerLayoutMode = 'none' | 'free' | 'flex' | 'split' | 'grid';
+export declare type ContainerLayoutMode = 'none' | 'free' | 'flex' | 'split' | 'grid' | 'free-split';
 
 export declare function containerLayoutToCss(cfg: ContainerLayoutConfig | undefined): Record<string, string> | null;
 
@@ -1080,12 +1147,14 @@ export declare function createDocumentStore(initial?: PageDocumentInput): Docume
 
 export declare function createFreePageDocument(opts?: Omit<CreatePageDocumentOptions, 'rootLayout'>): PageDocument;
 
+export declare function createFreeSplitInteraction(ctx: CanvasContext): FreeSplitInteraction;
+
 export declare function createMinimalPageDocument(opts?: CreatePageDocumentOptions): PageDocument;
 
 export declare interface CreatePageDocumentOptions {
     canvasWidth?: number;
     canvasHeight?: number;
-    rootLayout?: ContainerLayoutMode | ContainerLayoutConfig;
+    rootLayout?: RootContainerLayoutMode | RootContainerLayoutConfig;
     instances?: PageInstance[];
     bindings?: NormalizedPageBinding[];
 }
@@ -1275,6 +1344,8 @@ export declare interface DuplicateInstanceOptions {
     };
 }
 
+declare type Edge = 'left' | 'right' | 'top' | 'bottom';
+
 export declare const EFFECTIVE_DEFAULT_SLOT = "default";
 
 export declare function effectiveSlot(inst: PageInstance): string;
@@ -1324,6 +1395,145 @@ export declare interface FreeContainerLayout {
     mode: 'free';
 }
 
+export declare interface FreeSplitContainerLayout {
+    mode: 'free-split';
+    root: SplitNode;
+    structureLocked?: boolean;
+    gap?: number;
+}
+
+export declare interface FreeSplitDivider {
+    nodeId: string;
+    dividerIndex: number;
+    rect: Rect;
+    direction: 'horizontal' | 'vertical';
+}
+
+export declare interface FreeSplitDropTarget {
+    containerId: string;
+    leafId: string;
+    leafEl: HTMLElement;
+}
+
+declare type FreeSplitEdge = 'left' | 'right' | 'top' | 'bottom';
+
+declare interface FreeSplitHandleApi {
+    fill(containerId: string, leafId: string, instance: PageInstance): void;
+    clear(containerId: string, leafId: string): void;
+    swap(containerId: string, leafIdA: string, leafIdB: string): void;
+    resize(containerId: string, nodeId: string, sizes: NodeSize[]): void;
+    split(containerId: string, leafId: string, edge: FreeSplitEdge, newLeafShare: number): {
+        leafId: string;
+        nodeId: string;
+    };
+    merge(containerId: string, leafId: string): void;
+}
+
+export declare interface FreeSplitInteraction {
+    resizeDrag: Readonly<FreeSplitResizeDragState>;
+    isResizing: Readonly<Ref<boolean>>;
+    handleResizeStart(args: FreeSplitResizeStartArgs): {
+        startTracking: boolean;
+    };
+    handleResizeMove(canvasPt: Point): void;
+    handleResizeEnd(): void;
+    cancelResize(): void;
+    requestSplit(containerId: string, leafId: string, edge: Edge, newLeafShare: number): {
+        leafId: string;
+        nodeId: string;
+    } | null;
+    requestMerge(containerId: string, leafId: string): void;
+    requestDelete(containerId: string, leafId: string): void;
+    requestSwap(containerId: string, leafIdA: string, leafIdB: string): void;
+}
+
+declare type FreeSplitMutateAction = {
+    type: 'freeSplitFill';
+    payload: {
+        containerId: string;
+        leafId: string;
+        instance: PageInstance;
+    };
+} | {
+    type: 'freeSplitClear';
+    payload: {
+        containerId: string;
+        leafId: string;
+    };
+} | {
+    type: 'freeSplitSwap';
+    payload: {
+        containerId: string;
+        leafIdA: string;
+        leafIdB: string;
+    };
+} | {
+    type: 'freeSplitResize';
+    payload: {
+        containerId: string;
+        nodeId: string;
+        sizes: NodeSize[];
+    };
+} | {
+    type: 'freeSplitSplit';
+    payload: {
+        containerId: string;
+        leafId: string;
+        edge: 'left' | 'right' | 'top' | 'bottom';
+        newLeafShare: number;
+        newLeafId: string;
+        newNodeId: string;
+    };
+} | {
+    type: 'freeSplitMerge';
+    payload: {
+        containerId: string;
+        leafId: string;
+    };
+};
+
+export declare interface FreeSplitResizeDragState {
+    status: 'idle' | 'active';
+    containerId: string | null;
+    nodeId: string | null;
+    dividerIndex: number | null;
+    startSizes: NodeSize[] | null;
+    branchAxisPx: number;
+    startPt: Point | null;
+    direction: 'horizontal' | 'vertical' | null;
+    snap: boolean;
+}
+
+export declare interface FreeSplitResizeOpts {
+    snap?: boolean;
+    snapFractions?: number[];
+    snapThreshold?: number;
+    minRatioFraction?: number;
+    minPx?: number;
+}
+
+export declare interface FreeSplitResizeStartArgs {
+    containerId: string;
+    nodeId: string;
+    dividerIndex: number;
+    startSizes: NodeSize[];
+    branchAxisPx: number;
+    direction: 'horizontal' | 'vertical';
+    canvasPt: Point;
+    snap?: boolean;
+}
+
+export declare type FreeSplitSelection = {
+    kind: 'freeSplitLeaf';
+    containerId: string;
+    leafId: string;
+} | {
+    kind: 'freeSplitDivider';
+    containerId: string;
+    nodeId: string;
+    dividerIndex: number;
+};
+
 export declare function getBindingInstanceRefs(binding: NormalizedPageBinding): BindingInstanceRef[];
 
 export declare function getDefaultShortcuts(): CanvasShortcutBinding[];
@@ -1432,6 +1642,8 @@ export declare function isEditingText(target: EventTarget | null): boolean;
 
 export declare function isFreePositionLayoutMode(mode: ContainerLayoutConfig['mode'] | undefined): boolean;
 
+export declare function isFreeSplitEnabled(): boolean;
+
 export declare function isInstanceEffectivelyLocked(inst: LockedSubset): boolean;
 
 export declare function isInstancePositionLocked(inst: LockedSubset): boolean;
@@ -1460,7 +1672,7 @@ export declare interface LayoutIssue {
     detail: string;
 }
 
-export declare type LayoutIssueKind = 'cycle' | 'missing-parent' | 'cross-page-parent' | 'orphan-slot' | 'invalid-slot' | 'parent-not-layout' | 'slot-not-allowed-component' | 'slot-multiple-violated' | 'absolute-child-rejected' | 'depth-exceeded';
+export declare type LayoutIssueKind = 'cycle' | 'missing-parent' | 'cross-page-parent' | 'orphan-slot' | 'invalid-slot' | 'parent-not-layout' | 'slot-not-allowed-component' | 'slot-multiple-violated' | 'absolute-child-rejected' | 'depth-exceeded' | 'free-split-duplicate-id' | 'free-split-duplicate-instance' | 'free-split-depth-exceeded' | 'free-split-invalid-size';
 
 export declare interface LayoutItem {
     order?: number;
@@ -1519,6 +1731,8 @@ export declare function matchBinding(binding: CanvasShortcutBinding, ev: Keyboar
 
 export declare const MAX_INSTANCE_TREE_DEPTH = 8;
 
+export declare const MAX_SPLIT_TREE_DEPTH = 8;
+
 declare interface MeasuredStageSize {
     w: number;
     h: number;
@@ -1564,6 +1778,13 @@ export declare interface ModifierKeys {
 
 export declare type MountState = 'idle' | 'pending' | 'mounting' | 'mounted' | 'disposing';
 
+export declare interface NodeSize {
+    mode: 'ratio' | 'px';
+    value: number;
+    min?: number;
+    max?: number;
+}
+
 export declare function normalizeComponentOverrides(raw: PageDocument['componentOverrides'], instances: readonly PageInstance[]): Record<string, PageComponentOverride>;
 
 export declare type NormalizedPageBinding = (PageBindingBase & {
@@ -1574,6 +1795,10 @@ export declare type NormalizedPageBinding = (PageBindingBase & {
     type: 'data';
 });
 
+export declare function normalizeFreeSplitContainersInDocument(instances: PageInstance[]): PageInstance[];
+
+export declare function normalizeFreeSplitTreeShape(node: unknown): SplitNode;
+
 export declare function normalizeGridCells0Based(cells: NonNullable<GridContainerLayout['cells']>): NonNullable<GridContainerLayout['cells']>;
 
 export declare function normalizeInstanceSlotFields(inst: PageInstance): PageInstance;
@@ -1857,8 +2082,20 @@ export declare interface ResizeState {
 
 export declare function resolveCanvasSizePx(size: CanvasSizeValue, fallback?: number): number;
 
+export declare function resolveFreeSplitMergeTarget(root: SplitNode, nodeId: string, dividerIndex: number): string | null;
+
 export declare function resolveMeasuredCanvasSizePx(size: CanvasSizeValue, axisSize: number, fallback?: number): number;
 
+export declare function resolveSplitEdge(leafRect: Rect, pt: Point, opts?: {
+    edgeZonePx?: number;
+}): {
+    edge: Edge;
+} | null;
+
+export declare type RootContainerLayoutConfig = Exclude<ContainerLayoutConfig, FreeSplitContainerLayout>;
+
+export declare type RootContainerLayoutMode = Exclude<ContainerLayoutMode, 'free-split'>;
+
 export declare interface RuntimeInstanceSnapshot {
     instanceId: string;
     componentId: string;
@@ -1875,6 +2112,7 @@ export declare interface SelectionStore {
     readonly selectedIds: ComputedRef<string[]>;
     readonly size: ComputedRef<number>;
     readonly primaryId: ComputedRef<string | undefined>;
+    readonly freeSplitSelection: ComputedRef<FreeSplitSelection | null>;
     select(instanceId: string): void;
     toggleSelect(instanceId: string): void;
     addToSelection(instanceId: string): void;
@@ -1883,6 +2121,9 @@ export declare interface SelectionStore {
     selectAll(instanceIds: string[]): void;
     purgeOrphans(validIds: string[]): void;
     isSelected(instanceId: string): boolean;
+    selectFreeSplitLeaf(containerId: string, leafId: string): void;
+    selectFreeSplitDivider(containerId: string, nodeId: string, dividerIndex: number): void;
+    clearFreeSplitSelection(): void;
 }
 
 export declare const SLOT_CHILD_RESIZE_HANDLES: readonly ["e", "s", "se"];
@@ -1934,6 +2175,14 @@ export declare interface Source {
     css: string;
 }
 
+export declare interface SplitBranch {
+    type: 'split';
+    nodeId: string;
+    dir: 'row' | 'col';
+    children: SplitNode[];
+    sizes: NodeSize[];
+}
+
 export declare interface SplitContainerLayout {
     mode: 'split';
     direction: 'horizontal' | 'vertical';
@@ -1979,6 +2228,15 @@ export declare interface SplitDividerInteraction {
     cancelSplitDividerDrag(): void;
 }
 
+export declare interface SplitLeaf {
+    type: 'leaf';
+    leafId: string;
+    instanceId: string | null;
+    locked?: boolean;
+}
+
+export declare type SplitNode = SplitBranch | SplitLeaf;
+
 export declare interface StaleComponentOverride {
     instanceId: string;
     baseVersionKey: ComponentVersionKey;