@pixerate/editor 0.142.1 → 0.143.0

package/dist/canvas/index.js

@@ -88,12 +88,13 @@ import {
   matchSize,
   overlaps,
   placeBeside,
+  placeInView,
   readStyleSize,
   reorderNodes,
   toggleLockNodes,
   unlockNodes,
   withStyleSize
-} from "../chunk-DW4CV5H4.js";
+} from "../chunk-U4VE4UI2.js";
 import {
   DEFAULT_ARRANGE_SHORTCUTS,
   matchArrangeShortcut
@@ -12057,6 +12058,7 @@ export {
   pathfinder,
   pieScene,
   placeBeside,
+  placeInView,
   planarSplit,
   playCanvasSceneTransition,
   playWebAnimations,

package/dist/canvas/layout.d.cts

@@ -1,4 +1,4 @@
-import type { CanvasEdge, CanvasLayoutOptions, CanvasNode, IncrementalLayoutOptions, PlaceBesideOptions, Rect, Side, XYPosition } from './types.cjs';
+import type { CanvasEdge, CanvasLayoutOptions, CanvasNode, IncrementalLayoutOptions, PlaceBesideOptions, Rect, Side, XYPosition } from "./types.cjs";
 export declare const DEFAULT_NODE_WIDTH = 200;
 export declare const DEFAULT_NODE_HEIGHT = 60;
 export declare const DEFAULT_PLACEMENT_GAP = 48;
@@ -42,7 +42,7 @@ export declare function overlaps(a: Rect, b: Rect, pad?: number): boolean;
 /**
  * Maps directed layout flow to its natural forward growth side.
  */
-export declare function flowSide(direction?: 'LR' | 'TB' | 'RL' | 'BT'): Side;
+export declare function flowSide(direction?: "LR" | "TB" | "RL" | "BT"): Side;
 /**
  * Incremental layout blending:
  * Keeps established/manual node positions intact. Runs Dagre on the entire graph,
@@ -58,3 +58,16 @@ export declare function placeBeside(rects: Record<string, Rect>, size: {
     width: number;
     height: number;
 }, side: Side, nearNodeId?: string, options?: PlaceBesideOptions): XYPosition;
+/**
+ * Where a node of `size` goes when nothing anchors it: centred in `view` (the visible part of
+ * the canvas, in flow coordinates) when that is free, else the nearest free spot in rings
+ * around the centre, so new work appears where the user is looking and never on top of
+ * `rects`.
+ */
+export declare function placeInView(rects: Record<string, Rect>, size: {
+    width: number;
+    height: number;
+}, view: Rect, options?: {
+    gap?: number;
+    maxRings?: number;
+}): XYPosition;

package/dist/canvas/layout.d.ts

@@ -1,4 +1,4 @@
-import type { CanvasEdge, CanvasLayoutOptions, CanvasNode, IncrementalLayoutOptions, PlaceBesideOptions, Rect, Side, XYPosition } from './types.js';
+import type { CanvasEdge, CanvasLayoutOptions, CanvasNode, IncrementalLayoutOptions, PlaceBesideOptions, Rect, Side, XYPosition } from "./types.js";
 export declare const DEFAULT_NODE_WIDTH = 200;
 export declare const DEFAULT_NODE_HEIGHT = 60;
 export declare const DEFAULT_PLACEMENT_GAP = 48;
@@ -42,7 +42,7 @@ export declare function overlaps(a: Rect, b: Rect, pad?: number): boolean;
 /**
  * Maps directed layout flow to its natural forward growth side.
  */
-export declare function flowSide(direction?: 'LR' | 'TB' | 'RL' | 'BT'): Side;
+export declare function flowSide(direction?: "LR" | "TB" | "RL" | "BT"): Side;
 /**
  * Incremental layout blending:
  * Keeps established/manual node positions intact. Runs Dagre on the entire graph,
@@ -58,3 +58,16 @@ export declare function placeBeside(rects: Record<string, Rect>, size: {
     width: number;
     height: number;
 }, side: Side, nearNodeId?: string, options?: PlaceBesideOptions): XYPosition;
+/**
+ * Where a node of `size` goes when nothing anchors it: centred in `view` (the visible part of
+ * the canvas, in flow coordinates) when that is free, else the nearest free spot in rings
+ * around the centre, so new work appears where the user is looking and never on top of
+ * `rects`.
+ */
+export declare function placeInView(rects: Record<string, Rect>, size: {
+    width: number;
+    height: number;
+}, view: Rect, options?: {
+    gap?: number;
+    maxRings?: number;
+}): XYPosition;

package/dist/{chunk-UBRYHNRU.cjs → chunk-EL4PSKFT.cjs}

@@ -4,8 +4,14 @@ var DEFAULT_NODE_WIDTH = 200;
 var DEFAULT_NODE_HEIGHT = 60;
 var DEFAULT_PLACEMENT_GAP = 48;
 function getCenteredNodePosition(width = 0, height = 0, screenToFlowPosition, screenDimensions) {
-  const rect = _nullishCoalesce(screenDimensions, () => ( (typeof document !== "undefined" ? { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight } : { width: 1920, height: 1080 })));
-  const flowPos = screenToFlowPosition({ x: rect.width / 2, y: rect.height / 2 });
+  const rect = _nullishCoalesce(screenDimensions, () => ( (typeof document !== "undefined" ? {
+    width: document.documentElement.clientWidth,
+    height: document.documentElement.clientHeight
+  } : { width: 1920, height: 1080 })));
+  const flowPos = screenToFlowPosition({
+    x: rect.width / 2,
+    y: rect.height / 2
+  });
   return {
     x: flowPos.x - width / 2,
     y: flowPos.y - height / 2
@@ -73,7 +79,10 @@ function getLayoutedNodes(nodes, edges, getNodesBounds, options = {}) {
 function estimateNodeSize(node, defaultWidth = DEFAULT_NODE_WIDTH, defaultHeight = DEFAULT_NODE_HEIGHT) {
   const label = String(_nullishCoalesce(_nullishCoalesce(_nullishCoalesce(_optionalChain([node, 'access', _10 => _10.data, 'optionalAccess', _11 => _11.label]), () => ( _optionalChain([node, 'access', _12 => _12.data, 'optionalAccess', _13 => _13.title]))), () => ( node.id)), () => ( "")));
   const lines = label.split(/\n|<br\s*\/?>/);
-  const longest = Math.max(...lines.map((l) => l.replace(/<[^>]+>/g, "").length), 1);
+  const longest = Math.max(
+    ...lines.map((l) => l.replace(/<[^>]+>/g, "").length),
+    1
+  );
   const width = Math.min(480, Math.max(defaultWidth, longest * 8 + 48));
   const height = Math.max(defaultHeight, lines.length * 20 + 24);
   return { width, height };
@@ -203,6 +212,38 @@ function placeBeside(rects, size, side, nearNodeId, options = {}) {
     y: Math.round(baseY)
   };
 }
+function placeInView(rects, size, view, options = {}) {
+  const gap = _nullishCoalesce(options.gap, () => ( DEFAULT_PLACEMENT_GAP));
+  const maxRings = _nullishCoalesce(options.maxRings, () => ( 24));
+  const obstacles = Object.values(rects);
+  const start = {
+    x: view.x + view.width / 2 - size.width / 2,
+    y: view.y + view.height / 2 - size.height / 2
+  };
+  const free = (p) => !obstacles.some(
+    (o) => overlaps({ ...p, width: size.width, height: size.height }, o, gap / 2)
+  );
+  if (free(start)) return { x: Math.round(start.x), y: Math.round(start.y) };
+  const stepX = size.width + gap;
+  const stepY = size.height + gap;
+  for (let ring = 1; ring <= maxRings; ring++) {
+    const candidates = [];
+    for (let i = -ring; i <= ring; i++) {
+      candidates.push(
+        { x: start.x + ring * stepX, y: start.y + i * stepY },
+        { x: start.x - ring * stepX, y: start.y + i * stepY },
+        { x: start.x + i * stepX, y: start.y + ring * stepY },
+        { x: start.x + i * stepX, y: start.y - ring * stepY }
+      );
+    }
+    candidates.sort(
+      (a, b) => Math.hypot(a.x - start.x, a.y - start.y) - Math.hypot(b.x - start.x, b.y - start.y)
+    );
+    const spot = candidates.find(free);
+    if (spot) return { x: Math.round(spot.x), y: Math.round(spot.y) };
+  }
+  return { x: Math.round(start.x), y: Math.round(start.y) };
+}
 
 // src/canvas/arrange.ts
 var LOCKED_DATA_KEY = "locked";
@@ -588,4 +629,5 @@ function invertNodeUpdates(nodes, updates) {
 
 
 
-exports.DEFAULT_NODE_WIDTH = DEFAULT_NODE_WIDTH; exports.DEFAULT_NODE_HEIGHT = DEFAULT_NODE_HEIGHT; exports.DEFAULT_PLACEMENT_GAP = DEFAULT_PLACEMENT_GAP; exports.getCenteredNodePosition = getCenteredNodePosition; exports.centerNodes = centerNodes; exports.getLayoutedNodes = getLayoutedNodes; exports.estimateNodeSize = estimateNodeSize; exports.boundsOf = boundsOf; exports.centre = centre; exports.overlaps = overlaps; exports.flowSide = flowSide; exports.ensureLayout = ensureLayout; exports.placeBeside = placeBeside; exports.LOCKED_DATA_KEY = LOCKED_DATA_KEY; exports.LOCKED_PREVIOUS_FLAGS_KEY = LOCKED_PREVIOUS_FLAGS_KEY; exports.readStyleSize = readStyleSize; exports.withStyleSize = withStyleSize; exports.getNodeSize = getNodeSize; exports.getAbsolutePosition = getAbsolutePosition; exports.createNodeLookup = createNodeLookup; exports.getNodeRect = getNodeRect; exports.isLocked = isLocked; exports.lockNodes = lockNodes; exports.unlockNodes = unlockNodes; exports.toggleLockNodes = toggleLockNodes; exports.alignNodes = alignNodes; exports.distributeNodes = distributeNodes; exports.matchSize = matchSize; exports.reorderNodes = reorderNodes; exports.applyNodeUpdates = applyNodeUpdates; exports.invertNodeUpdates = invertNodeUpdates;
+
+exports.DEFAULT_NODE_WIDTH = DEFAULT_NODE_WIDTH; exports.DEFAULT_NODE_HEIGHT = DEFAULT_NODE_HEIGHT; exports.DEFAULT_PLACEMENT_GAP = DEFAULT_PLACEMENT_GAP; exports.getCenteredNodePosition = getCenteredNodePosition; exports.centerNodes = centerNodes; exports.getLayoutedNodes = getLayoutedNodes; exports.estimateNodeSize = estimateNodeSize; exports.boundsOf = boundsOf; exports.centre = centre; exports.overlaps = overlaps; exports.flowSide = flowSide; exports.ensureLayout = ensureLayout; exports.placeBeside = placeBeside; exports.placeInView = placeInView; exports.LOCKED_DATA_KEY = LOCKED_DATA_KEY; exports.LOCKED_PREVIOUS_FLAGS_KEY = LOCKED_PREVIOUS_FLAGS_KEY; exports.readStyleSize = readStyleSize; exports.withStyleSize = withStyleSize; exports.getNodeSize = getNodeSize; exports.getAbsolutePosition = getAbsolutePosition; exports.createNodeLookup = createNodeLookup; exports.getNodeRect = getNodeRect; exports.isLocked = isLocked; exports.lockNodes = lockNodes; exports.unlockNodes = unlockNodes; exports.toggleLockNodes = toggleLockNodes; exports.alignNodes = alignNodes; exports.distributeNodes = distributeNodes; exports.matchSize = matchSize; exports.reorderNodes = reorderNodes; exports.applyNodeUpdates = applyNodeUpdates; exports.invertNodeUpdates = invertNodeUpdates;

package/dist/{chunk-DW4CV5H4.js → chunk-U4VE4UI2.js}

@@ -4,8 +4,14 @@ var DEFAULT_NODE_WIDTH = 200;
 var DEFAULT_NODE_HEIGHT = 60;
 var DEFAULT_PLACEMENT_GAP = 48;
 function getCenteredNodePosition(width = 0, height = 0, screenToFlowPosition, screenDimensions) {
-  const rect = screenDimensions ?? (typeof document !== "undefined" ? { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight } : { width: 1920, height: 1080 });
-  const flowPos = screenToFlowPosition({ x: rect.width / 2, y: rect.height / 2 });
+  const rect = screenDimensions ?? (typeof document !== "undefined" ? {
+    width: document.documentElement.clientWidth,
+    height: document.documentElement.clientHeight
+  } : { width: 1920, height: 1080 });
+  const flowPos = screenToFlowPosition({
+    x: rect.width / 2,
+    y: rect.height / 2
+  });
   return {
     x: flowPos.x - width / 2,
     y: flowPos.y - height / 2
@@ -73,7 +79,10 @@ function getLayoutedNodes(nodes, edges, getNodesBounds, options = {}) {
 function estimateNodeSize(node, defaultWidth = DEFAULT_NODE_WIDTH, defaultHeight = DEFAULT_NODE_HEIGHT) {
   const label = String(node.data?.label ?? node.data?.title ?? node.id ?? "");
   const lines = label.split(/\n|<br\s*\/?>/);
-  const longest = Math.max(...lines.map((l) => l.replace(/<[^>]+>/g, "").length), 1);
+  const longest = Math.max(
+    ...lines.map((l) => l.replace(/<[^>]+>/g, "").length),
+    1
+  );
   const width = Math.min(480, Math.max(defaultWidth, longest * 8 + 48));
   const height = Math.max(defaultHeight, lines.length * 20 + 24);
   return { width, height };
@@ -203,6 +212,38 @@ function placeBeside(rects, size, side, nearNodeId, options = {}) {
     y: Math.round(baseY)
   };
 }
+function placeInView(rects, size, view, options = {}) {
+  const gap = options.gap ?? DEFAULT_PLACEMENT_GAP;
+  const maxRings = options.maxRings ?? 24;
+  const obstacles = Object.values(rects);
+  const start = {
+    x: view.x + view.width / 2 - size.width / 2,
+    y: view.y + view.height / 2 - size.height / 2
+  };
+  const free = (p) => !obstacles.some(
+    (o) => overlaps({ ...p, width: size.width, height: size.height }, o, gap / 2)
+  );
+  if (free(start)) return { x: Math.round(start.x), y: Math.round(start.y) };
+  const stepX = size.width + gap;
+  const stepY = size.height + gap;
+  for (let ring = 1; ring <= maxRings; ring++) {
+    const candidates = [];
+    for (let i = -ring; i <= ring; i++) {
+      candidates.push(
+        { x: start.x + ring * stepX, y: start.y + i * stepY },
+        { x: start.x - ring * stepX, y: start.y + i * stepY },
+        { x: start.x + i * stepX, y: start.y + ring * stepY },
+        { x: start.x + i * stepX, y: start.y - ring * stepY }
+      );
+    }
+    candidates.sort(
+      (a, b) => Math.hypot(a.x - start.x, a.y - start.y) - Math.hypot(b.x - start.x, b.y - start.y)
+    );
+    const spot = candidates.find(free);
+    if (spot) return { x: Math.round(spot.x), y: Math.round(spot.y) };
+  }
+  return { x: Math.round(start.x), y: Math.round(start.y) };
+}
 
 // src/canvas/arrange.ts
 var LOCKED_DATA_KEY = "locked";
@@ -570,6 +611,7 @@ export {
   flowSide,
   ensureLayout,
   placeBeside,
+  placeInView,
   LOCKED_DATA_KEY,
   LOCKED_PREVIOUS_FLAGS_KEY,
   readStyleSize,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor",
-  "version": "0.142.1",
+  "version": "0.143.0",
   "description": "UI-agnostic rich text and media editing core library",
   "author": "Pixerate",
   "license": "MIT",