@pixerate/editor-react 0.15.0 → 0.16.0

package/dist/canvas/index.d.ts

@@ -2,8 +2,8 @@ import * as React$1 from 'react';
 import React__default from 'react';
 import { AgentPresence } from '@pixerate/editor/agent';
 import * as _pixerate_editor_canvas from '@pixerate/editor/canvas';
-import { CanvasNode, CanvasEdge, IncrementalLayoutOptions, XYPosition, GraphDifferences, Rect, CanvasLayoutOptions, Side, PlaceBesideOptions, getCenteredNodePosition, CanvasDockingCallbacks, DockStrategy, ExplodeNodeOptions, CollapseNodeOptions, ExplosionSnapshot, ArrangeHistoryTarget, SnapGuidesOptions, NodeRectOptions, GuideLine, CanvasArrangeAction, ArrangeShortcutBinding, CanvasScenesOptions, CanvasViewport, CanvasScenesStore, CanvasScene, FitViewportOptions, ShapeDescription } from '@pixerate/editor/canvas';
-export { AlignEdge, ArrangeShortcutBinding, CONNECTION_LINE_TYPES, CanvasArrangeAction, CanvasClipboardPayload, CanvasConnectionLineType, CanvasDockingCallbacks, CanvasEdge, CanvasHeightOptions, CanvasLayoutOptions, CanvasNode, CanvasNodeUpdate, CanvasScene, CanvasScenesState, CanvasScenesStore, CanvasViewport, Clock, CollapseNodeOptions, CombineShapeNodesOptions, CombineShapeNodesRefusal, CombineShapeNodesResult, ConnectorSnap, ConnectorSnapTarget, CubicSegment, DEFAULT_ARRANGE_SHORTCUTS, DirectionalDisplacementOptions, DisplacementDirection, DistributeAxis, DistributeMode, DockStrategy, EllipseShape, ExplodeNodeOptions, ExplosionSnapshot, FanOutTrajectoryOptions, FitCubicsOptions, FitPathDataOptions, FlattenOptions, GraphDifferences, GuideIndex, GuideLine, IncrementalLayoutOptions, ManualClock, MeasureGuide, MeasureSelectionOptions, MeasureSelectionResult, MultiPolygon, NodeTransition, PathCommand, PathShape, PlaceBesideOptions, Point, PolygonBooleanOperation, PolygonBooleanOptions, PolygonFillRule, PolygonInput, PolygonOperand, PolygonPiece, PolygonRing, PolygonToPathOptions, PolygonWithHoles, Position, RESIZE_HANDLES, Rect, RectShape, ReflowDisplacementOptions, RegularPolygonShape, ResizeHandle, SHAPE_DATA_KEY, SHAPE_KINDS, SHAPE_NODE_TYPE, SHAPE_OPERATIONS, ShapeDescription, ShapeKind, ShapeNodePolygonOptions, ShapeOperation, ShapePaint, ShapeRenderData, ShapeSize, Side, SizeDimension, SnapGuidesOptions, SnapNodeResizeOptions, SnapNodeResizeResult, SnapResizeOptions, SnapResizeResult, SnapResult, StarShape, TrajectoryFunction, TrajectoryPoint, XYPosition, ZOrderOperation, alignNodes, applyNodeUpdates, applyShapeCombination, blendLayout, boundsOf, calculateDagreReflowDisplacement, calculateDirectionalDisplacement, canCombineShapeNodes, canvasHeight, centerNodes, centre, combineShapeNodes, computeNodesBoundingBox, computeSnapGuides, connectedOnly, createBezierTrajectory, createCanvasScenesStore, createFanOutTrajectory, createGuideIndex, createNodeGuideIndex, cubicPointAt, cubicsToPathData, defaultEasing, distributeNodes, dividePolygons, ensureLayout, estimateCanvasHeight, estimateNodeSize, findConnectorSnap, fitCubicRun, fitCubics, fitFreehandPath, fitPathData, fitViewportToNodes, fitViewportToRect, flattenSvgPath, flowSide, getAbsolutePosition, getCenteredNodePosition, getLayoutedNodes, getNodeRect, getNodeShape, getNodeSize, getResizingNodeRect, getShapeRenderData, getShapeSvg, handlePoint, inferResizeHandle, intersectPolygons, invertNodeUpdates, isEventFromTextInput, isLocked, isMeasureModifierHeld, isShapeDescription, isShapeNode, isStraightCubic, isValidCanvasNode, isValidUrl, layoutBounds, linearPositionTrajectory, linearTrajectory, lockNodes, matchArrangeShortcut, matchSize, measureBetween, measureLabel, measureSelection, measureToLine, multiPolygonArea, multiPolygonBounds, nearestHandlePositions, oppositePosition, overlaps, parseCanvasClipboardData, parseCanvasScenes, parseSvgPath, placeBeside, pointInMultiPolygon, pointInRings, polygonArea, polygonBoolean, polygonToSvgPath, positionToSide, readStyleSize, realClock, remapPastedNodes, reorderNodes, repositionNodesTo, resizeHandleAxes, revertShapeCombination, ringSignedArea, runMultiNodeTransition, serializeCanvasNodes, shapeNodeToPolygon, shapeToPolygon, sideToPosition, simplifyRing, snapNodeDrag, snapNodeResize, snapResize, snapToGrid, subtractPolygons, toggleLockNodes, unionPolygons, unlockNodes, withStyleSize, xorPolygons } from '@pixerate/editor/canvas';
+import { CanvasNode, CanvasEdge, IncrementalLayoutOptions, XYPosition, GraphDifferences, Rect, CanvasLayoutOptions, Side, PlaceBesideOptions, getCenteredNodePosition, CanvasDockingCallbacks, DockStrategy, ExplodeNodeOptions, CollapseNodeOptions, ExplosionSnapshot, ArrangeHistoryTarget, SnapGuidesOptions, NodeRectOptions, AutoLayoutOptions, GuideLine, CanvasArrangeAction, ArrangeShortcutBinding, CanvasScenesOptions, CanvasViewport, CanvasScenesStore, CanvasScene, FitViewportOptions, ShapeDescription, AutoLayoutMeasure } from '@pixerate/editor/canvas';
+export { AUTO_LAYOUT_DATA_KEY, AlignEdge, ArrangeShortcutBinding, AutoLayout, AutoLayoutAlignContent, AutoLayoutAlignCross, AutoLayoutAlignMain, AutoLayoutCellAlign, AutoLayoutChild, AutoLayoutConstraints, AutoLayoutGrid, AutoLayoutGridArea, AutoLayoutGridCell, AutoLayoutGridGeometry, AutoLayoutGridTrack, AutoLayoutHorizontalConstraint, AutoLayoutInsertTarget, AutoLayoutMeasure, AutoLayoutMode, AutoLayoutOptions, AutoLayoutPadding, AutoLayoutSize, AutoLayoutSizing, AutoLayoutSizingPair, AutoLayoutVerticalConstraint, CHILD_LAYOUT_DATA_KEY, CONNECTION_LINE_TYPES, CanvasArrangeAction, CanvasAutoLayoutController, CanvasAutoLayoutControllerOptions, CanvasClipboardPayload, CanvasConnectionLineType, CanvasDockingCallbacks, CanvasEdge, CanvasHeightOptions, CanvasLayoutOptions, CanvasNode, CanvasNodeUpdate, CanvasScene, CanvasScenesState, CanvasScenesStore, CanvasViewport, Clock, CollapseNodeOptions, CombineShapeNodesOptions, CombineShapeNodesRefusal, CombineShapeNodesResult, ConnectorSnap, ConnectorSnapTarget, CubicSegment, DEFAULT_ARRANGE_SHORTCUTS, DirectionalDisplacementOptions, DisplacementDirection, DistributeAxis, DistributeMode, DockStrategy, EllipseShape, ExplodeNodeOptions, ExplosionSnapshot, FanOutTrajectoryOptions, FitCubicsOptions, FitPathDataOptions, FlattenOptions, GraphDifferences, GuideIndex, GuideLine, IncrementalLayoutOptions, ManualClock, MeasureGuide, MeasureSelectionOptions, MeasureSelectionResult, MultiPolygon, NodeTransition, PathCommand, PathShape, PlaceBesideOptions, Point, PolygonBooleanOperation, PolygonBooleanOptions, PolygonFillRule, PolygonInput, PolygonOperand, PolygonPiece, PolygonRing, PolygonToPathOptions, PolygonWithHoles, Position, RESIZE_HANDLES, Rect, RectShape, ReflowDisplacementOptions, RegularPolygonShape, ResizeHandle, SHAPE_DATA_KEY, SHAPE_KINDS, SHAPE_NODE_TYPE, SHAPE_OPERATIONS, ShapeDescription, ShapeKind, ShapeNodePolygonOptions, ShapeOperation, ShapePaint, ShapeRenderData, ShapeSize, Side, SizeDimension, SnapGuidesOptions, SnapNodeResizeOptions, SnapNodeResizeResult, SnapResizeOptions, SnapResizeResult, SnapResult, StarShape, TrajectoryFunction, TrajectoryPoint, XYPosition, ZOrderOperation, alignNodes, applyConstraints, applyNodeUpdates, applyShapeCombination, blendLayout, boundsOf, calculateDagreReflowDisplacement, calculateDirectionalDisplacement, canCombineShapeNodes, canvasHeight, centerNodes, centre, clampLayoutSize, combineShapeNodes, computeNodesBoundingBox, computeSnapGuides, connectedOnly, createBezierTrajectory, createCanvasAutoLayoutController, createCanvasScenesStore, createFanOutTrajectory, createGuideIndex, createNodeGuideIndex, cubicPointAt, cubicsToPathData, defaultEasing, distributeNodes, dividePolygons, ensureLayout, estimateCanvasHeight, estimateNodeSize, findConnectorSnap, fitCubicRun, fitCubics, fitFreehandPath, fitPathData, fitViewportToNodes, fitViewportToRect, flattenSvgPath, flowSide, getAbsolutePosition, getAutoLayout, getAutoLayoutGrid, getAutoLayoutInsertTarget, getCenteredNodePosition, getChildLayout, getFlowChildren, getLayoutParent, getLayoutSizing, getLayoutedNodes, getNodeRect, getNodeShape, getNodeSize, getResizingNodeRect, getShapeRenderData, getShapeSvg, handlePoint, inferResizeHandle, intersectPolygons, invertNodeUpdates, isAutoLayoutFrame, isEventFromTextInput, isLocked, isMeasureModifierHeld, isShapeDescription, isShapeNode, isStraightCubic, isValidCanvasNode, isValidUrl, layoutAll, layoutBounds, layoutFrame, layoutUp, layoutUpMany, linearPositionTrajectory, linearTrajectory, lockNodes, makeSizingCoherent, matchArrangeShortcut, matchSize, measureBetween, measureLabel, measureSelection, measureToLine, mergeNodeUpdates, moveLayoutChild, multiPolygonArea, multiPolygonBounds, nearestHandlePositions, oppositePosition, overlaps, parseCanvasClipboardData, parseCanvasScenes, parseSvgPath, placeBeside, pointInMultiPolygon, pointInRings, polygonArea, polygonBoolean, polygonToSvgPath, positionToSide, readStyleSize, realClock, relayoutUpdates, remapPastedNodes, reorderNodes, repositionNodesTo, resizeHandleAxes, resolvePadding, revertShapeCombination, ringSignedArea, runMultiNodeTransition, serializeCanvasNodes, shapeNodeToPolygon, shapeToPolygon, sideToPosition, simplifyRing, snapNodeDrag, snapNodeResize, snapResize, snapToGrid, subtractPolygons, toggleLockNodes, unionPolygons, unlockNodes, withStyleSize, xorPolygons } from '@pixerate/editor/canvas';
 
 interface AgentPresenceLayerProps {
     presences: AgentPresence[];
@@ -164,6 +164,8 @@ interface UseCanvasArrangeOptions<TNode extends CanvasNode = CanvasNode> {
     /** Turns drag snapping off (default `true`). */
     snapping?: boolean;
     rectOptions?: NodeRectOptions;
+    /** Re-run auto layout around arranged nodes in the same undo step (see `useCanvasAutoLayout`). */
+    autoLayout?: boolean | AutoLayoutOptions;
 }
 /**
  * React hook for Freeform-style arrangement on React Flow: align, distribute, make same size,
@@ -359,4 +361,58 @@ interface ShapeNodeProps {
  */
 declare function ShapeNode({ data, width, height, selected, className, children }: ShapeNodeProps): React__default.JSX.Element | null;
 
-export { AgentPresenceLayer, type AgentPresenceLayerProps, type CanvasArrange, type CanvasGraphTarget, CanvasGuidesLayer, type CanvasGuidesLayerProps, type CanvasMeasure, type CanvasScenes, ShapeNode, type ShapeNodeProps, type UseCanvasArrangeOptions, type UseCanvasArrangeShortcutsOptions, type UseCanvasClipboardOptions, type UseCanvasDockingOptions, type UseCanvasGraphOptions, type UseCanvasLayoutOptions, type UseCanvasMeasureOptions, type UseCanvasScenesOptions, type UseCanvasShortcutsOptions, type UseStreamingCanvasOptions, useCanvasArrange, useCanvasArrangeShortcuts, useCanvasClipboard, useCanvasDocking, useCanvasExplosion, useCanvasGraph, useCanvasLayout, useCanvasMeasure, useCanvasScenes, useCanvasShortcuts, useStreamingCanvas };
+interface UseCanvasAutoLayoutOptions<TNode extends CanvasNode = CanvasNode> {
+    nodes: TNode[];
+    setNodes: (updater: TNode[] | ((prev: TNode[]) => TNode[])) => void;
+    /** When set, the hook's actions (add / remove / resize / reorder / apply) are undoable steps. */
+    history?: ArrangeHistoryTarget;
+    /** Turns automatic relayout off (`applyAutoLayout` still works). Default `true`. */
+    enabled?: boolean;
+    /** Reorder flow children by dragging them within their frame (default `true`). */
+    dragReorder?: boolean;
+    /** Text measuring and size hooks (default: xyflow `measured` sizes). */
+    measure?: AutoLayoutMeasure;
+    rectOptions?: NodeRectOptions;
+}
+/**
+ * React hook for Figma-style auto layout on React Flow sub-flows. Frames are nodes with
+ * `data.layout`; their children (`parentId`) are stacked, wrapped or placed on a grid, with
+ * hug / fill / fixed sizing, min / max, padding, alignment and constraints.
+ *
+ * Pass every `onNodesChange` batch through `noteChanges` before applying it
+ * (`onNodesChange={(c) => setNodes((n) => applyNodeChanges(autoLayout.noteChanges(c), n))}`):
+ * after the nodes update the hook relayouts frames whose children were measured, resized,
+ * added or removed, and turns drags of a flow child inside its frame into a reorder (one
+ * undoable step). Render `guides` (the drop marker) with `<CanvasGuidesLayer>`.
+ */
+declare function useCanvasAutoLayout<TNode extends CanvasNode = CanvasNode>(options: UseCanvasAutoLayoutOptions<TNode>): {
+    /** Drop marker of the active reorder drag (flow coordinates). */
+    guides: GuideLine[];
+    hasPending: boolean;
+    applyAutoLayout(frameId?: string): _pixerate_editor_canvas.CanvasNodeUpdate[];
+    layoutUpdates(ids: Iterable<string>): _pixerate_editor_canvas.CanvasNodeUpdate[];
+    relayout(ids: Iterable<string>): _pixerate_editor_canvas.CanvasNodeUpdate[];
+    addNode(node: TNode, addOptions?: {
+        index?: number;
+    }): _pixerate_editor_canvas.CanvasNodeUpdate[];
+    removeNodes(ids: Iterable<string>): _pixerate_editor_canvas.CanvasNodeUpdate[];
+    resizeNode(id: string, size: {
+        width?: number;
+        height?: number;
+    }): _pixerate_editor_canvas.CanvasNodeUpdate[];
+    moveChild(childId: string, index: number): _pixerate_editor_canvas.CanvasNodeUpdate[];
+    getInsertTarget(id: string, point?: _pixerate_editor_canvas.XYPosition): _pixerate_editor_canvas.AutoLayoutInsertTarget | undefined;
+    beginReorderDrag(id: string): void;
+    dragReorder(id: string, point?: _pixerate_editor_canvas.XYPosition): _pixerate_editor_canvas.AutoLayoutInsertTarget | undefined;
+    endReorderDrag(id: string, point?: _pixerate_editor_canvas.XYPosition): _pixerate_editor_canvas.CanvasNodeUpdate[];
+    noteChanges<TChange extends _pixerate_editor_canvas.PositionChangeLike>(changes: TChange[]): TChange[];
+    noteRemoved(removed: Iterable<{
+        id: string;
+        parentId?: string;
+    }>): void;
+    flush(): _pixerate_editor_canvas.CanvasNodeUpdate[];
+    isFrame: (id: string) => boolean;
+};
+type CanvasAutoLayout = ReturnType<typeof useCanvasAutoLayout>;
+
+export { AgentPresenceLayer, type AgentPresenceLayerProps, type CanvasArrange, type CanvasAutoLayout, type CanvasGraphTarget, CanvasGuidesLayer, type CanvasGuidesLayerProps, type CanvasMeasure, type CanvasScenes, ShapeNode, type ShapeNodeProps, type UseCanvasArrangeOptions, type UseCanvasArrangeShortcutsOptions, type UseCanvasAutoLayoutOptions, type UseCanvasClipboardOptions, type UseCanvasDockingOptions, type UseCanvasGraphOptions, type UseCanvasLayoutOptions, type UseCanvasMeasureOptions, type UseCanvasScenesOptions, type UseCanvasShortcutsOptions, type UseStreamingCanvasOptions, useCanvasArrange, useCanvasArrangeShortcuts, useCanvasAutoLayout, useCanvasClipboard, useCanvasDocking, useCanvasExplosion, useCanvasGraph, useCanvasLayout, useCanvasMeasure, useCanvasScenes, useCanvasShortcuts, useStreamingCanvas };

package/dist/canvas/index.js

@@ -791,6 +791,9 @@ function useCanvasArrange(options) {
       get rectOptions() {
         return optionsRef.current.rectOptions;
       },
+      get autoLayout() {
+        return optionsRef.current.autoLayout;
+      },
       onGuidesChange: setGuides
     }),
     []
@@ -1203,8 +1206,87 @@ import {
   blendLayout,
   connectedOnly
 } from "@pixerate/editor/canvas";
+import {
+  layoutFrame,
+  layoutAll,
+  layoutUp,
+  layoutUpMany,
+  applyConstraints,
+  getAutoLayout,
+  getChildLayout,
+  getLayoutSizing,
+  getAutoLayoutGrid,
+  getAutoLayoutInsertTarget,
+  getFlowChildren,
+  getLayoutParent,
+  isAutoLayoutFrame,
+  makeSizingCoherent,
+  moveLayoutChild,
+  mergeNodeUpdates,
+  relayoutUpdates,
+  resolvePadding,
+  clampLayoutSize,
+  createCanvasAutoLayoutController as createCanvasAutoLayoutController2,
+  AUTO_LAYOUT_DATA_KEY,
+  CHILD_LAYOUT_DATA_KEY
+} from "@pixerate/editor/canvas";
+
+// src/canvas/useCanvasAutoLayout.ts
+import { useLayoutEffect, useMemo as useMemo4, useRef as useRef8, useState as useState4 } from "react";
+import {
+  createCanvasAutoLayoutController
+} from "@pixerate/editor/canvas";
+function useCanvasAutoLayout(options) {
+  const [guides, setGuides] = useState4([]);
+  const nodesRef = useRef8(options.nodes);
+  nodesRef.current = options.nodes;
+  const optionsRef = useRef8(options);
+  optionsRef.current = options;
+  const controller = useMemo4(
+    () => createCanvasAutoLayoutController({
+      getNodes: () => nodesRef.current,
+      setNodes: (next) => {
+        nodesRef.current = next;
+        optionsRef.current.setNodes(next);
+      },
+      get history() {
+        return optionsRef.current.history;
+      },
+      get enabled() {
+        return optionsRef.current.enabled;
+      },
+      get dragReorder() {
+        return optionsRef.current.dragReorder;
+      },
+      get measure() {
+        return optionsRef.current.measure;
+      },
+      get rectOptions() {
+        return optionsRef.current.rectOptions;
+      },
+      onGuidesChange: setGuides
+    }),
+    []
+  );
+  useLayoutEffect(() => {
+    if (controller.hasPending) controller.flush();
+  }, [options.nodes, controller]);
+  return useMemo4(
+    () => ({
+      ...controller,
+      /** Drop marker of the active reorder drag (flow coordinates). */
+      guides,
+      get hasPending() {
+        return controller.hasPending;
+      }
+    }),
+    [controller, guides]
+  );
+}
 export {
+  AUTO_LAYOUT_DATA_KEY,
   AgentPresenceLayer,
+  CHILD_LAYOUT_DATA_KEY,
   CONNECTION_LINE_TYPES,
   CanvasGuidesLayer,
   CanvasScenesStore2 as CanvasScenesStore,
@@ -1217,6 +1299,7 @@ export {
   SHAPE_OPERATIONS,
   ShapeNode,
   alignNodes,
+  applyConstraints,
   applyNodeUpdates,
   applyShapeCombination,
   blendLayout,
@@ -1227,11 +1310,13 @@ export {
   canvasHeight,
   centerNodes2 as centerNodes,
   centre,
+  clampLayoutSize,
   combineShapeNodes,
   computeNodesBoundingBox,
   computeSnapGuides,
   connectedOnly,
   createBezierTrajectory,
+  createCanvasAutoLayoutController2 as createCanvasAutoLayoutController,
   createCanvasScenesStore,
   createFanOutTrajectory2 as createFanOutTrajectory,
   createGuideIndex,
@@ -1254,7 +1339,14 @@ export {
   flattenSvgPath,
   flowSide,
   getAbsolutePosition,
+  getAutoLayout,
+  getAutoLayoutGrid,
+  getAutoLayoutInsertTarget,
   getCenteredNodePosition2 as getCenteredNodePosition,
+  getChildLayout,
+  getFlowChildren,
+  getLayoutParent,
+  getLayoutSizing,
   getLayoutedNodes2 as getLayoutedNodes,
   getNodeRect,
   getNodeShape,
@@ -1266,6 +1358,7 @@ export {
   inferResizeHandle,
   intersectPolygons,
   invertNodeUpdates,
+  isAutoLayoutFrame,
   isEventFromTextInput3 as isEventFromTextInput,
   isLocked,
   isMeasureModifierHeld2 as isMeasureModifierHeld,
@@ -1274,16 +1367,23 @@ export {
   isStraightCubic,
   isValidCanvasNode,
   isValidUrl2 as isValidUrl,
+  layoutAll,
   layoutBounds,
+  layoutFrame,
+  layoutUp,
+  layoutUpMany,
   linearPositionTrajectory2 as linearPositionTrajectory,
   linearTrajectory,
   lockNodes,
+  makeSizingCoherent,
   matchArrangeShortcut2 as matchArrangeShortcut,
   matchSize,
   measureBetween,
   measureLabel,
   measureSelection2 as measureSelection,
   measureToLine,
+  mergeNodeUpdates,
+  moveLayoutChild,
   multiPolygonArea,
   multiPolygonBounds,
   nearestHandlePositions,
@@ -1301,10 +1401,12 @@ export {
   positionToSide,
   readStyleSize,
   realClock,
+  relayoutUpdates,
   remapPastedNodes2 as remapPastedNodes,
   reorderNodes,
   repositionNodesTo,
   resizeHandleAxes,
+  resolvePadding,
   revertShapeCombination,
   ringSignedArea,
   runMultiNodeTransition2 as runMultiNodeTransition,
@@ -1323,6 +1425,7 @@ export {
   unlockNodes,
   useCanvasArrange,
   useCanvasArrangeShortcuts,
+  useCanvasAutoLayout,
   useCanvasClipboard,
   useCanvasDocking,
   useCanvasExplosion,