@grafloria/element 0.4.53 → 0.4.55

package/src/lib/dashboard-kit/edges.js

@@ -0,0 +1,30 @@
+/** Which edges of a tile a press takes, and the cursor that says so (tile first, step 4b-i: out of the binder). */
+/** A press this close (CSS px) to a tile's border takes that edge for a resize. */
+export const EDGE_GRIP = 7;
+export const NO_EDGES = { n: false, e: false, s: false, w: false };
+/** Which of a host's edges a client point is within EDGE_GRIP of (none when outside). */
+export function edgesNear(host, cx, cy) {
+    const r = host.getBoundingClientRect();
+    if (cx < r.left - 2 || cx > r.right + 2 || cy < r.top - 2 || cy > r.bottom + 2)
+        return NO_EDGES;
+    return {
+        n: cy - r.top <= EDGE_GRIP,
+        s: r.bottom - cy <= EDGE_GRIP,
+        w: cx - r.left <= EDGE_GRIP,
+        e: r.right - cx <= EDGE_GRIP,
+    };
+}
+export const anyEdge = (E) => E.n || E.e || E.s || E.w;
+/** The resize cursor for a set of edges ('' when none). */
+export function cursorFor(E) {
+    const v = E.n || E.s;
+    const h = E.e || E.w;
+    if (v && h)
+        return (E.n && E.w) || (E.s && E.e) ? 'nwse-resize' : 'nesw-resize';
+    if (v)
+        return 'ns-resize';
+    if (h)
+        return 'ew-resize';
+    return '';
+}
+//# sourceMappingURL=edges.js.map

package/src/lib/dashboard-kit/grid-binder.d.ts

@@ -53,6 +53,10 @@ import { Command, type DiagramModel, type GridColumnLayout, type GroupModel, typ
 import { type ToolPointerEvent } from '@grafloria/renderer';
 import { type CellRect, type WorldRect } from './grid-mapping.js';
 import { type BesideSide } from './zones.js';
+import { type ResizeEdges } from './edges.js';
+import { type DragHandleOption } from './grip.js';
+export { EDGE_GRIP, anyEdge, type ResizeEdges } from './edges.js';
+export { GRIP_CLASS, DRAG_HANDLE_CLASS, CAPTION_BAND, normalizeDragHandle, dragHandleSelector, gripOf, syncGrip, gripHostOf, pressOnDragHandle, type DragGripOptions, type DragHandleOption } from './grip.js';
 export { SequenceCommand, SetGroupCellCommand } from './commit.js';
 /** The slice of a DiagramInstance the binder needs (structural, test-friendly). */
 export interface DashboardGridApi {
@@ -275,30 +279,6 @@ export interface DashboardGridOptions {
      */
     squeeze?: boolean;
 }
-/** A painted grip: the only drag zone, placed along the card's top edge. */
-export interface DragGripOptions {
-    grip: true;
-    /** Where along the top edge. Default 'left'. */
-    position?: 'left' | 'center' | 'right';
-    /** In the header band, or a tab above the card. Default 'inside'. */
-    placement?: 'inside' | 'outside';
-}
-export type DragHandleOption = boolean | string | DragGripOptions;
-/** The class of the painted grip element (a child of the node host). */
-export declare const GRIP_CLASS = "axdb-grip";
-/** The container class that turns the caption strip's grip dots on. */
-export declare const DRAG_HANDLE_CLASS = "axdb-drag-handle";
-/** A `dragHandle` value with its defaults filled in — the form the handle reports. */
-export declare const normalizeDragHandle: (v: DragHandleOption | undefined) => DragHandleOption;
-/** The selector a `dragHandle` value names — `null` when the whole card is the handle. */
-export declare const dragHandleSelector: (v: DragHandleOption) => string | null;
-/** The grip config of a value, or null when it paints no grip. */
-export declare const gripOf: (v: DragHandleOption) => DragGripOptions | null;
-/**
- * Paint (or remove) the grip on one host, and stamp the host with the grip's
- * placement so the header can make room for it. `movable` false = no grip.
- */
-export declare function syncGrip(host: HTMLElement, cfg: DragGripOptions | null, movable: boolean): void;
 /** The member host a press on a painted grip belongs to (the grip may sit OUTSIDE the host's box). */
 /**
  * Is this press OURS? The renderer's tool registry is PAGE-GLOBAL: every
@@ -317,16 +297,6 @@ export declare function ownsPress(container: HTMLElement, diagram: {
         id: string;
     };
 }): boolean;
-export declare function gripHostOf(target: Element | null): HTMLElement | null;
-/**
- * Did a press land on the drag handle? A press INSIDE the handle element
- * always does. The default handle is a CAPTION BAR the DevExpress way: the
- * strip from the card's top edge down to the header's bottom, padding
- * included — so the pointer need not hit the header's text to grab the tile.
- */
-export declare function pressOnDragHandle(sel: string, target: Element | null, hostEl: HTMLElement | null, clientX: number, clientY: number): boolean;
-/** The caption strip of a host with no kit header, px from the card's top. */
-export declare const CAPTION_BAND = 28;
 export interface DashboardGridHandle {
     /** Rebuild the engine from the group's members + their cells, re-project pixels. */
     sync(): void;
@@ -705,13 +675,4 @@ export declare function parentPeerOf(container: HTMLElement, groupId: string): B
 export declare function clearOtherSelections(container: HTMLElement, self: BinderPeer | null): void;
 export declare function registerBoardPeer(container: HTMLElement, peer: BinderPeer): () => void;
 export type { BinderPeer };
-/** A press this close (CSS px) to a tile's border takes that edge for a resize. */
-export declare const EDGE_GRIP = 7;
-export interface ResizeEdges {
-    n: boolean;
-    e: boolean;
-    s: boolean;
-    w: boolean;
-}
-export declare const anyEdge: (E: ResizeEdges) => boolean;
 export declare function bindDashboardGrid(api: DashboardGridApi, group: GroupModel, options?: DashboardGridOptions): DashboardGridHandle;