@grafloria/element 0.3.23 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -7
- package/package.json +7 -9
- package/src/index.d.ts +16 -16
- package/src/index.js +58 -339
- package/src/lib/dashboard-kit/dashboard.d.ts +1 -1
- package/src/lib/dashboard-kit/dashboard.js +22 -26
- package/src/lib/dashboard-kit/grid-binder.d.ts +1 -1
- package/src/lib/dashboard-kit/grid-binder.js +62 -65
- package/src/lib/dashboard-kit/grid-mapping.js +14 -26
- package/src/lib/dashboard-kit/index.d.ts +5 -5
- package/src/lib/dashboard-kit/index.js +5 -30
- package/src/lib/dashboard-kit/styles.js +4 -8
- package/src/lib/dashboard-kit/widgets.d.ts +1 -1
- package/src/lib/dashboard-kit/widgets.js +16 -26
- package/src/lib/diagram-kit/card.d.ts +2 -2
- package/src/lib/diagram-kit/card.js +22 -32
- package/src/lib/diagram-kit/editing.js +15 -20
- package/src/lib/diagram-kit/er.d.ts +1 -1
- package/src/lib/diagram-kit/er.js +15 -18
- package/src/lib/diagram-kit/handles.d.ts +4 -4
- package/src/lib/diagram-kit/handles.js +16 -29
- package/src/lib/diagram-kit/index.d.ts +10 -10
- package/src/lib/diagram-kit/index.js +10 -50
- package/src/lib/diagram-kit/join-guidance.js +9 -18
- package/src/lib/diagram-kit/rows.js +1 -4
- package/src/lib/diagram-kit/styles.js +4 -8
- package/src/lib/diagram-kit/uml.js +10 -13
- package/src/lib/diagram-kit/update.d.ts +1 -1
- package/src/lib/diagram-kit/update.js +19 -26
- package/src/lib/grafloria-flow-element.js +19 -24
- package/src/lib/grafloria.d.ts +4 -4
- package/src/lib/grafloria.js +12 -17
- package/src/lib/load.d.ts +3 -3
- package/src/lib/load.js +19 -22
- package/src/lib/node-type-registry.js +6 -14
- package/src/lib/stencil-kit/builders.js +4 -10
- package/src/lib/stencil-kit/card-builders.js +14 -17
- package/src/lib/stencil-kit/index.d.ts +7 -7
- package/src/lib/stencil-kit/index.js +6 -16
- package/src/lib/stencil-kit/palette.js +14 -17
- package/src/lib/stencil-kit/shape-data.js +25 -28
- package/src/lib/stencil-kit/styles.js +1 -4
- package/esm/src/index.js +0 -295
- package/esm/src/lib/dashboard-kit/dashboard.js +0 -590
- package/esm/src/lib/dashboard-kit/grid-binder.js +0 -1633
- package/esm/src/lib/dashboard-kit/grid-mapping.js +0 -164
- package/esm/src/lib/dashboard-kit/index.js +0 -8
- package/esm/src/lib/dashboard-kit/styles.js +0 -205
- package/esm/src/lib/dashboard-kit/widgets.js +0 -379
- package/esm/src/lib/diagram-kit/card.js +0 -199
- package/esm/src/lib/diagram-kit/editing.js +0 -448
- package/esm/src/lib/diagram-kit/er.js +0 -160
- package/esm/src/lib/diagram-kit/handles.js +0 -312
- package/esm/src/lib/diagram-kit/index.js +0 -15
- package/esm/src/lib/diagram-kit/join-guidance.js +0 -322
- package/esm/src/lib/diagram-kit/rows.js +0 -144
- package/esm/src/lib/diagram-kit/styles.js +0 -118
- package/esm/src/lib/diagram-kit/uml.js +0 -135
- package/esm/src/lib/diagram-kit/update.js +0 -244
- package/esm/src/lib/grafloria-flow-element.js +0 -266
- package/esm/src/lib/grafloria.js +0 -69
- package/esm/src/lib/load.js +0 -252
- package/esm/src/lib/node-type-registry.js +0 -42
- package/esm/src/lib/stencil-kit/builders.js +0 -18
- package/esm/src/lib/stencil-kit/card-builders.js +0 -105
- package/esm/src/lib/stencil-kit/index.js +0 -9
- package/esm/src/lib/stencil-kit/palette.js +0 -427
- package/esm/src/lib/stencil-kit/shape-data.js +0 -537
- package/esm/src/lib/stencil-kit/styles.js +0 -126
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
/**
|
|
3
2
|
* `dashboard({ views, widgets })` — the DATA-FIRST dashboard authoring API.
|
|
4
3
|
*
|
|
@@ -43,15 +42,12 @@
|
|
|
43
42
|
* Cells are the truth and live in the existing `GridItemConfig`, so save/load
|
|
44
43
|
* round-trips with no extra work — same as every other kit.
|
|
45
44
|
*/
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
const grid_mapping_1 = require("./grid-mapping");
|
|
53
|
-
const styles_1 = require("./styles");
|
|
54
|
-
const widgets_1 = require("./widgets");
|
|
45
|
+
import { __awaiter } from "tslib";
|
|
46
|
+
import { AddToGroupCommand, BatchCommand, BringNodeToFrontCommand, Command, GroupModel, NodeModel, RemoveFromGroupCommand, RemoveNodeCommand, SendNodeToBackCommand, } from '@grafloria/engine';
|
|
47
|
+
import { bindDashboardGrid, } from './grid-binder.js';
|
|
48
|
+
import { gridItemFromCell } from './grid-mapping.js';
|
|
49
|
+
import { ensureDashboardKitStyles } from './styles.js';
|
|
50
|
+
import { defaultWidgetRenderer } from './widgets.js';
|
|
55
51
|
/**
|
|
56
52
|
* Add a widget node AND its board membership as ONE undoable step.
|
|
57
53
|
*
|
|
@@ -63,7 +59,7 @@ const widgets_1 = require("./widgets");
|
|
|
63
59
|
* would need two Ctrl-Z. This composite does both in its own execute(), and
|
|
64
60
|
* unwinds both in undo().
|
|
65
61
|
*/
|
|
66
|
-
class AddWidgetCommand extends
|
|
62
|
+
class AddWidgetCommand extends Command {
|
|
67
63
|
constructor(node, groupId) {
|
|
68
64
|
super('Add widget');
|
|
69
65
|
this.node = node;
|
|
@@ -101,7 +97,7 @@ let autoId = 0;
|
|
|
101
97
|
* spec build can never drift apart on metadata. */
|
|
102
98
|
function buildWidgetNode(w, rowHeight) {
|
|
103
99
|
var _a, _b, _c, _d, _e, _f;
|
|
104
|
-
const node = new
|
|
100
|
+
const node = new NodeModel({
|
|
105
101
|
id: w.id,
|
|
106
102
|
type: 'widget',
|
|
107
103
|
position: { x: 0, y: 0 },
|
|
@@ -162,7 +158,7 @@ function assignCells(widgets, columns) {
|
|
|
162
158
|
* `dashboard()` and `fromDocument()`. Reads/writes the mutable `ctx.active` /
|
|
163
159
|
* `ctx.apiRef` cells so the caller's finalize can wire the API in afterwards.
|
|
164
160
|
*/
|
|
165
|
-
function createDashboardHandle(ctx) {
|
|
161
|
+
export function createDashboardHandle(ctx) {
|
|
166
162
|
const { views, groups, binders, specById, viewOfWidget } = ctx;
|
|
167
163
|
const hostOf = (id) => ctx.hosts.get(id);
|
|
168
164
|
const execCommand = (cmd) => {
|
|
@@ -258,7 +254,7 @@ function createDashboardHandle(ctx) {
|
|
|
258
254
|
if (w.pinned)
|
|
259
255
|
node.setState({ locked: true });
|
|
260
256
|
// ONE undoable step (see AddWidgetCommand for why this cannot be a batch).
|
|
261
|
-
execCommand(existing ? new
|
|
257
|
+
execCommand(existing ? new AddToGroupCommand(group.id, w.id) : new AddWidgetCommand(node, group.id));
|
|
262
258
|
(_d = binders.get(vid)) === null || _d === void 0 ? void 0 : _d.sync();
|
|
263
259
|
(_e = ctx.apiRef) === null || _e === void 0 ? void 0 : _e.renderNow();
|
|
264
260
|
return makeWidgetHandle(w.id);
|
|
@@ -365,13 +361,13 @@ function createDashboardHandle(ctx) {
|
|
|
365
361
|
return ((_b = (_a = node()) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.locked) === true;
|
|
366
362
|
},
|
|
367
363
|
resize(span, rows) {
|
|
368
|
-
return
|
|
364
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
369
365
|
var _a, _b;
|
|
370
366
|
return (_b = (yield ((_a = binder()) === null || _a === void 0 ? void 0 : _a.resizeTo(id, span, rows)))) !== null && _b !== void 0 ? _b : false;
|
|
371
367
|
});
|
|
372
368
|
},
|
|
373
369
|
moveTo(x, y) {
|
|
374
|
-
return
|
|
370
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
375
371
|
var _a, _b;
|
|
376
372
|
return (_b = (yield ((_a = binder()) === null || _a === void 0 ? void 0 : _a.moveTo(id, x, y)))) !== null && _b !== void 0 ? _b : false;
|
|
377
373
|
});
|
|
@@ -390,12 +386,12 @@ function createDashboardHandle(ctx) {
|
|
|
390
386
|
},
|
|
391
387
|
bringToFront() {
|
|
392
388
|
var _a;
|
|
393
|
-
execCommand(new
|
|
389
|
+
execCommand(new BringNodeToFrontCommand(id));
|
|
394
390
|
(_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.renderNow();
|
|
395
391
|
},
|
|
396
392
|
sendToBack() {
|
|
397
393
|
var _a;
|
|
398
|
-
execCommand(new
|
|
394
|
+
execCommand(new SendNodeToBackCommand(id));
|
|
399
395
|
(_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.renderNow();
|
|
400
396
|
},
|
|
401
397
|
update(patch) {
|
|
@@ -422,8 +418,8 @@ function createDashboardHandle(ctx) {
|
|
|
422
418
|
// gone from the engine, so planRemoval() would return [] and the
|
|
423
419
|
// survivors' cells would never commit.
|
|
424
420
|
const survivors = (_a = displaced) !== null && _a !== void 0 ? _a : b.planRemoval(id);
|
|
425
|
-
const cmds = [...survivors, new
|
|
426
|
-
void execCommand(new
|
|
421
|
+
const cmds = [...survivors, new RemoveFromGroupCommand(group.id, id), new RemoveNodeCommand(id)];
|
|
422
|
+
void execCommand(new BatchCommand('Remove widget', cmds));
|
|
427
423
|
const v = views.find((x) => x.id === viewId);
|
|
428
424
|
if (v)
|
|
429
425
|
v.widgets = v.widgets.filter((w) => w.id !== id);
|
|
@@ -443,9 +439,9 @@ function createDashboardHandle(ctx) {
|
|
|
443
439
|
}
|
|
444
440
|
return handle;
|
|
445
441
|
}
|
|
446
|
-
function dashboard(options) {
|
|
442
|
+
export function dashboard(options) {
|
|
447
443
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
448
|
-
|
|
444
|
+
ensureDashboardKitStyles();
|
|
449
445
|
const columns = (_a = options.columns) !== null && _a !== void 0 ? _a : DEFAULTS.columns;
|
|
450
446
|
const gap = (_b = options.gap) !== null && _b !== void 0 ? _b : DEFAULTS.gap;
|
|
451
447
|
const rowHeight = (_c = options.rowHeight) !== null && _c !== void 0 ? _c : DEFAULTS.rowHeight;
|
|
@@ -477,7 +473,7 @@ function dashboard(options) {
|
|
|
477
473
|
// No renderWidget → the built-in renderers draw the declared `kind` from the
|
|
478
474
|
// developer's own `data` (widgets.ts), unknown kinds landing on the titled
|
|
479
475
|
// frame they always did.
|
|
480
|
-
const renderWidget = (_k = options.renderWidget) !== null && _k !== void 0 ? _k :
|
|
476
|
+
const renderWidget = (_k = options.renderWidget) !== null && _k !== void 0 ? _k : defaultWidgetRenderer;
|
|
481
477
|
// -- runtime: ONE shared handle over a boxed context -----------------------
|
|
482
478
|
// The two MUTABLE cells the handle used to close over as free `let`s —
|
|
483
479
|
// `active` (showView reassigns it) and `apiRef` (finalize sets it) — are boxed
|
|
@@ -527,7 +523,7 @@ function dashboard(options) {
|
|
|
527
523
|
for (const v of views) {
|
|
528
524
|
// One board per view; the group is a pure LAYOUT CONTAINER, so its
|
|
529
525
|
// chrome is suppressed (frameChrome) exactly as a dashboard needs.
|
|
530
|
-
const g = new
|
|
526
|
+
const g = new GroupModel({ id: v.id, name: (_a = v.name) !== null && _a !== void 0 ? _a : v.id });
|
|
531
527
|
model.addGroup(g);
|
|
532
528
|
g.setMetadata('frameChrome', 'none');
|
|
533
529
|
// THE BOARD'S GEOMETRY, PERSISTED. Cells alone do not describe a board:
|
|
@@ -561,7 +557,7 @@ function dashboard(options) {
|
|
|
561
557
|
// and made toJSON() → dashboard() NOT round-trip (a saved layout
|
|
562
558
|
// rebuilt back into its declaration order rather than its cells).
|
|
563
559
|
if (w.x !== undefined && w.y !== undefined) {
|
|
564
|
-
n.setGridItem(
|
|
560
|
+
n.setGridItem(gridItemFromCell({ x: w.x, y: w.y, w: (_j = w.span) !== null && _j !== void 0 ? _j : 3, h: (_k = w.rows) !== null && _k !== void 0 ? _k : 1 }));
|
|
565
561
|
}
|
|
566
562
|
if (w.pinned)
|
|
567
563
|
n.setState({ locked: true });
|
|
@@ -577,7 +573,7 @@ function dashboard(options) {
|
|
|
577
573
|
n.removePort(p.id);
|
|
578
574
|
g.addMember(w.id);
|
|
579
575
|
}
|
|
580
|
-
binders.set(v.id,
|
|
576
|
+
binders.set(v.id, bindDashboardGrid(a, g, Object.assign(Object.assign(Object.assign({ columns: (_l = v.columns) !== null && _l !== void 0 ? _l : columns, gap, padding: gap, sizing: (_m = options.sizing) !== null && _m !== void 0 ? _m : 'fit', baseRowHeight: rowHeight, designHeight: (_o = v.height) !== null && _o !== void 0 ? _o : boardH, float: (_p = options.float) !== null && _p !== void 0 ? _p : false, rtl: (_q = options.rtl) !== null && _q !== void 0 ? _q : false }, (options.responsive ? { responsive: options.responsive } : {})), ((_r = options.binder) !== null && _r !== void 0 ? _r : {})), { onGesture: (e) => {
|
|
581
577
|
var _a, _b;
|
|
582
578
|
if (e.type === 'commit' && options.onLayoutChange) {
|
|
583
579
|
const snapshot = handle.toJSON().views.find((x) => x.id === v.id);
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
* second `bindDashboardGrid` on the section for a nested pack grid.
|
|
51
51
|
*/
|
|
52
52
|
import { Command, type DiagramModel, type GridColumnLayout, type GroupModel, type NodeModel } from '@grafloria/engine';
|
|
53
|
-
import { type CellRect, type WorldRect } from './grid-mapping';
|
|
53
|
+
import { type CellRect, type WorldRect } from './grid-mapping.js';
|
|
54
54
|
/** The slice of a DiagramInstance the binder needs (structural, test-friendly). */
|
|
55
55
|
export interface DashboardGridApi {
|
|
56
56
|
getModel(): DiagramModel;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
/**
|
|
3
2
|
* `bindDashboardGrid(api, group, options)` — the dashboard-grid gesture binder
|
|
4
3
|
* (Phase 2 of the dashboard-grid plan; the plan page's Section-1 prototype is
|
|
@@ -50,13 +49,11 @@
|
|
|
50
49
|
* carry no GridItemConfig); their INNER layout is their own concern — bind a
|
|
51
50
|
* second `bindDashboardGrid` on the section for a nested pack grid.
|
|
52
51
|
*/
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
const grid_mapping_1 = require("./grid-mapping");
|
|
59
|
-
const styles_1 = require("./styles");
|
|
52
|
+
import { __awaiter } from "tslib";
|
|
53
|
+
import { AddToGroupCommand, BatchCommand, Command, GridPackEngine, RemoveFromGroupCommand, } from '@grafloria/engine';
|
|
54
|
+
import { registerTool } from '@grafloria/renderer';
|
|
55
|
+
import { buildCommitCommands, cellFromGridItem, cellToRect, columnUnitFor, gridItemFromCell, pointToCell, rowHeightFor, sizeToSpan, } from './grid-mapping.js';
|
|
56
|
+
import { ensureDashboardKitStyles } from './styles.js';
|
|
60
57
|
const BOARD_REGISTRY = new Map();
|
|
61
58
|
/**
|
|
62
59
|
* Undoable cell+frame write for a GROUP member (the strip's slab). The engine
|
|
@@ -64,7 +61,7 @@ const BOARD_REGISTRY = new Map();
|
|
|
64
61
|
* cells live in group metadata — this closes nested height escalation into
|
|
65
62
|
* the gesture's single BatchCommand so one undo restores the strip too.
|
|
66
63
|
*/
|
|
67
|
-
class SetGroupCellCommand extends
|
|
64
|
+
class SetGroupCellCommand extends Command {
|
|
68
65
|
constructor(groupId, cellBefore, cellAfter, frameBefore, frameAfter) {
|
|
69
66
|
super('Resize section');
|
|
70
67
|
this.groupId = groupId;
|
|
@@ -78,7 +75,7 @@ class SetGroupCellCommand extends engine_1.Command {
|
|
|
78
75
|
const grp = diagram === null || diagram === void 0 ? void 0 : diagram.getGroup(this.groupId);
|
|
79
76
|
if (!grp)
|
|
80
77
|
return;
|
|
81
|
-
grp.setMetadata('gridItem',
|
|
78
|
+
grp.setMetadata('gridItem', gridItemFromCell(cell));
|
|
82
79
|
grp.setFrame(Object.assign({}, frame));
|
|
83
80
|
}
|
|
84
81
|
execute(context) {
|
|
@@ -105,9 +102,9 @@ class SetGroupCellCommand extends engine_1.Command {
|
|
|
105
102
|
const DRAG_THRESHOLD = 4;
|
|
106
103
|
const GLIDE_OFF_DELAY = 400;
|
|
107
104
|
let binderSeq = 0;
|
|
108
|
-
function bindDashboardGrid(api, group, options = {}) {
|
|
105
|
+
export function bindDashboardGrid(api, group, options = {}) {
|
|
109
106
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
110
|
-
|
|
107
|
+
ensureDashboardKitStyles();
|
|
111
108
|
const diagram = api.getModel();
|
|
112
109
|
/** The DECLARED count — the board's authored width, and the responsive cap. */
|
|
113
110
|
const maxColumns = (_a = options.columns) !== null && _a !== void 0 ? _a : 12;
|
|
@@ -127,7 +124,7 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
127
124
|
const wantHandles = options.resizeHandles !== false;
|
|
128
125
|
const designH = (_k = (_h = options.designHeight) !== null && _h !== void 0 ? _h : (_j = group.size) === null || _j === void 0 ? void 0 : _j.height) !== null && _k !== void 0 ? _k : 0;
|
|
129
126
|
let sizing = (_l = options.sizing) !== null && _l !== void 0 ? _l : 'fit';
|
|
130
|
-
let engine = new
|
|
127
|
+
let engine = new GridPackEngine([], { columns, float, maxRows });
|
|
131
128
|
let gesture = null;
|
|
132
129
|
let disposed = false;
|
|
133
130
|
/** Reentrancy guard: our own derived frame writes must not re-project. */
|
|
@@ -180,7 +177,7 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
180
177
|
const spanMeta = Number((_a = node.getMetadata) === null || _a === void 0 ? void 0 : _a.call(node, 'columnSpan')) || 0;
|
|
181
178
|
const rowsMeta = Number((_b = node.getMetadata) === null || _b === void 0 ? void 0 : _b.call(node, 'rowSpan')) || 0;
|
|
182
179
|
const locked = ((_c = node.state) === null || _c === void 0 ? void 0 : _c.locked) === true;
|
|
183
|
-
const cell =
|
|
180
|
+
const cell = cellFromGridItem((_d = node.getGridItem) === null || _d === void 0 ? void 0 : _d.call(node), {
|
|
184
181
|
w: spanMeta || 1,
|
|
185
182
|
h: rowsMeta || 1,
|
|
186
183
|
});
|
|
@@ -192,8 +189,8 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
192
189
|
// First adoption from pixels: where the tile already sits. The SPAN is
|
|
193
190
|
// resolved first because the mirrored (RTL) mapping needs it to turn a
|
|
194
191
|
// left edge into a cell.
|
|
195
|
-
const s =
|
|
196
|
-
const p =
|
|
192
|
+
const s = sizeToSpan(node.size.width, node.size.height, f, g, rows());
|
|
193
|
+
const p = pointToCell(node.position.x, node.position.y, f, g, rows(), spanMeta || s.w);
|
|
197
194
|
return {
|
|
198
195
|
id,
|
|
199
196
|
x: Math.max(0, p.x),
|
|
@@ -207,7 +204,7 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
207
204
|
}
|
|
208
205
|
const grp = diagram.getGroup(id);
|
|
209
206
|
const cell = grp
|
|
210
|
-
?
|
|
207
|
+
? cellFromGridItem((_e = grp.getMetadata) === null || _e === void 0 ? void 0 : _e.call(grp, 'gridItem'))
|
|
211
208
|
: null;
|
|
212
209
|
// Member groups are LOCKED slabs (see the module doc).
|
|
213
210
|
if (cell)
|
|
@@ -220,13 +217,13 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
220
217
|
const cell = { x: item.x, y: item.y, w: item.w, h: item.h };
|
|
221
218
|
const node = diagram.getNode(id);
|
|
222
219
|
if (node) {
|
|
223
|
-
if (!
|
|
224
|
-
node.setGridItem(
|
|
220
|
+
if (!cellFromGridItem((_a = node.getGridItem) === null || _a === void 0 ? void 0 : _a.call(node)))
|
|
221
|
+
node.setGridItem(gridItemFromCell(cell));
|
|
225
222
|
return;
|
|
226
223
|
}
|
|
227
224
|
const grp = diagram.getGroup(id);
|
|
228
|
-
if (grp && !
|
|
229
|
-
grp.setMetadata('gridItem',
|
|
225
|
+
if (grp && !cellFromGridItem((_b = grp.getMetadata) === null || _b === void 0 ? void 0 : _b.call(grp, 'gridItem'))) {
|
|
226
|
+
grp.setMetadata('gridItem', gridItemFromCell(cell));
|
|
230
227
|
}
|
|
231
228
|
};
|
|
232
229
|
// -- projection: cells -> pixels -------------------------------------------
|
|
@@ -290,7 +287,7 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
290
287
|
continue; // the ghost
|
|
291
288
|
if (item.id === adoptedGhostId)
|
|
292
289
|
continue; // a ghost adopted from another binder
|
|
293
|
-
writeRect(item.id,
|
|
290
|
+
writeRect(item.id, cellToRect(item, f, g, r));
|
|
294
291
|
}
|
|
295
292
|
}
|
|
296
293
|
finally {
|
|
@@ -320,7 +317,7 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
320
317
|
placeholder.className = 'axdb-ph';
|
|
321
318
|
layer.prepend(placeholder);
|
|
322
319
|
}
|
|
323
|
-
const r =
|
|
320
|
+
const r = cellToRect(item, frame(), geom(), rows());
|
|
324
321
|
placeholder.style.display = 'block';
|
|
325
322
|
placeholder.style.left = `${r.x}px`;
|
|
326
323
|
placeholder.style.top = `${r.y}px`;
|
|
@@ -430,7 +427,7 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
430
427
|
const execute = (name, commands) => {
|
|
431
428
|
if (commands.length === 0)
|
|
432
429
|
return false;
|
|
433
|
-
void api.getEngine().commandManager.execute(new
|
|
430
|
+
void api.getEngine().commandManager.execute(new BatchCommand(name, commands));
|
|
434
431
|
return true;
|
|
435
432
|
};
|
|
436
433
|
// -- membership + bounds sync ----------------------------------------------
|
|
@@ -519,10 +516,10 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
519
516
|
const cell = { x: item.x, y: item.y, w: item.w, h: item.h };
|
|
520
517
|
const node = diagram.getNode(item.id);
|
|
521
518
|
if (node) {
|
|
522
|
-
node.setGridItem(
|
|
519
|
+
node.setGridItem(gridItemFromCell(cell));
|
|
523
520
|
continue;
|
|
524
521
|
}
|
|
525
|
-
(_a = diagram.getGroup(item.id)) === null || _a === void 0 ? void 0 : _a.setMetadata('gridItem',
|
|
522
|
+
(_a = diagram.getGroup(item.id)) === null || _a === void 0 ? void 0 : _a.setMetadata('gridItem', gridItemFromCell(cell));
|
|
526
523
|
}
|
|
527
524
|
});
|
|
528
525
|
}
|
|
@@ -562,7 +559,7 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
562
559
|
const boardVisualHeight = () => {
|
|
563
560
|
const f = frame();
|
|
564
561
|
const g = geom();
|
|
565
|
-
return Math.max(f.height, 2 * padding + rows() * (
|
|
562
|
+
return Math.max(f.height, 2 * padding + rows() * (rowHeightFor(g, rows()) + gap) - gap);
|
|
566
563
|
};
|
|
567
564
|
const worldInsideBoard = (x, y) => {
|
|
568
565
|
const f = frame();
|
|
@@ -576,7 +573,7 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
576
573
|
if (worldInsideBoardExtended(x, y))
|
|
577
574
|
return true;
|
|
578
575
|
const f = frame();
|
|
579
|
-
const band =
|
|
576
|
+
const band = rowHeightFor(geom(), rows()) + gap;
|
|
580
577
|
return (x >= f.x - EDGE_GRACE &&
|
|
581
578
|
x <= f.x + f.width + EDGE_GRACE &&
|
|
582
579
|
y >= f.y - EDGE_GRACE &&
|
|
@@ -587,7 +584,7 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
587
584
|
if (worldInsideBoard(x, y))
|
|
588
585
|
return true;
|
|
589
586
|
const f = frame();
|
|
590
|
-
const band =
|
|
587
|
+
const band = rowHeightFor(geom(), rows()) + gap;
|
|
591
588
|
return x >= f.x && x <= f.x + f.width && y >= f.y && y <= f.y + boardVisualHeight() + band;
|
|
592
589
|
};
|
|
593
590
|
const insideMemberGroupFrame = (x, y) => {
|
|
@@ -693,7 +690,7 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
693
690
|
gesture = null;
|
|
694
691
|
project();
|
|
695
692
|
const deltas = deltasSince(g.startCells, g.startGeom);
|
|
696
|
-
const commands =
|
|
693
|
+
const commands = buildCommitCommands(deltas);
|
|
697
694
|
if (g.esc && g.esc.rowsAdded !== 0) {
|
|
698
695
|
commands.push(new SetGroupCellCommand(group.id, g.esc.cellBefore, g.esc.cellAfter, g.esc.frameBefore, g.esc.frameAfter));
|
|
699
696
|
}
|
|
@@ -726,7 +723,7 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
726
723
|
const lockedNode = ((_b = (_a = diagram.getNode(id)) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.locked) === true;
|
|
727
724
|
items.push(Object.assign(Object.assign({ id }, c), { locked: lockedNode || isGroupMember(id) }));
|
|
728
725
|
}
|
|
729
|
-
engine = new
|
|
726
|
+
engine = new GridPackEngine(items, { columns, float, maxRows });
|
|
730
727
|
}
|
|
731
728
|
else {
|
|
732
729
|
engine.cancelGesture();
|
|
@@ -774,8 +771,8 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
774
771
|
const centredTopLeft = (worldX, worldY, spans) => {
|
|
775
772
|
const f = frame();
|
|
776
773
|
const g = geom();
|
|
777
|
-
const cu =
|
|
778
|
-
const rh =
|
|
774
|
+
const cu = columnUnitFor(g, f.width);
|
|
775
|
+
const rh = rowHeightFor(g, rows());
|
|
779
776
|
return {
|
|
780
777
|
x: worldX - (spans.w * (cu + gap) - gap) / 2,
|
|
781
778
|
y: worldY - (spans.h * (rh + gap) - gap) / 2,
|
|
@@ -857,7 +854,7 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
857
854
|
if (g.removedFromBoard) {
|
|
858
855
|
g.removedFromBoard = false;
|
|
859
856
|
(_c = hostOf(g.id)) === null || _c === void 0 ? void 0 : _c.classList.remove('axdb-out');
|
|
860
|
-
const cell =
|
|
857
|
+
const cell = pointToCell(desired.x, desired.y, frame(), geom(), rows(), g.spans.w);
|
|
861
858
|
// Re-enter at the bottom edge (collision-free), then take the cursor
|
|
862
859
|
// cell GATELESSLY — a first placement skips the anti-jitter gate.
|
|
863
860
|
engine.add({ id: g.id, x: 0, y: engine.rows(), w: g.spans.w, h: g.spans.h });
|
|
@@ -866,7 +863,7 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
866
863
|
}
|
|
867
864
|
else {
|
|
868
865
|
const spanW = (_e = (_d = engine.getItem(g.id)) === null || _d === void 0 ? void 0 : _d.w) !== null && _e !== void 0 ? _e : g.spans.w;
|
|
869
|
-
const cell =
|
|
866
|
+
const cell = pointToCell(desired.x, desired.y, frame(), geom(), rows(), spanW);
|
|
870
867
|
if (engine.moveCheck(g.id, cell.x, cell.y).changed)
|
|
871
868
|
project();
|
|
872
869
|
}
|
|
@@ -898,7 +895,7 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
898
895
|
const dh = ev.world.y - g.downWorld.y;
|
|
899
896
|
const f = frame();
|
|
900
897
|
const gg = geom();
|
|
901
|
-
const minW = Math.max(8,
|
|
898
|
+
const minW = Math.max(8, columnUnitFor(gg, f.width));
|
|
902
899
|
let w = Math.max(minW, g.startSize.width + dw);
|
|
903
900
|
// The height min-clamp is applied AFTER the escalation logic below: on a
|
|
904
901
|
// grown strip "one current row" IS the whole strip, and clamping the
|
|
@@ -957,11 +954,11 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
957
954
|
// (Escalation above may have just grown OR shrunk the board — re-read.)
|
|
958
955
|
const fNow = frame();
|
|
959
956
|
const ggNow = geom();
|
|
960
|
-
h = Math.max(Math.max(8,
|
|
957
|
+
h = Math.max(Math.max(8, rowHeightFor(ggNow, rows())), h);
|
|
961
958
|
const itemNow = engine.getItem(g.id);
|
|
962
959
|
if (itemNow) {
|
|
963
|
-
const cuNow =
|
|
964
|
-
const rhNow =
|
|
960
|
+
const cuNow = columnUnitFor(ggNow, fNow.width);
|
|
961
|
+
const rhNow = rowHeightFor(ggNow, rows());
|
|
965
962
|
w = Math.min(w, (columns - itemNow.x) * (cuNow + gap) - gap);
|
|
966
963
|
if (maxRows !== undefined) {
|
|
967
964
|
h = Math.min(h, Math.max(1, maxRows - itemNow.y) * (rhNow + gap) - gap);
|
|
@@ -982,7 +979,7 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
982
979
|
}
|
|
983
980
|
const spanF = maxRows !== undefined ? frame() : f;
|
|
984
981
|
const spanG = maxRows !== undefined ? geom() : gg;
|
|
985
|
-
const span =
|
|
982
|
+
const span = sizeToSpan(w, h, spanF, spanG, rows());
|
|
986
983
|
if (engine.resizeCheck(g.id, span.w, span.h).changed)
|
|
987
984
|
project();
|
|
988
985
|
syncPlaceholder();
|
|
@@ -1016,14 +1013,14 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
1016
1013
|
finally {
|
|
1017
1014
|
writing = false;
|
|
1018
1015
|
}
|
|
1019
|
-
const sourceDisplaced =
|
|
1016
|
+
const sourceDisplaced = buildCommitCommands(deltasSince(g.startCells, g.startGeom, g.id));
|
|
1020
1017
|
const before = g.startCells.get(g.id);
|
|
1021
1018
|
const geomBefore = g.startGeom.get(g.id);
|
|
1022
1019
|
const crossing = [
|
|
1023
1020
|
...sourceDisplaced,
|
|
1024
|
-
new
|
|
1025
|
-
new
|
|
1026
|
-
...
|
|
1021
|
+
new RemoveFromGroupCommand(group.id, g.id),
|
|
1022
|
+
new AddToGroupCommand(targetGroupId, g.id),
|
|
1023
|
+
...buildCommitCommands([
|
|
1027
1024
|
{
|
|
1028
1025
|
id: g.id,
|
|
1029
1026
|
locked: false,
|
|
@@ -1068,7 +1065,7 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
1068
1065
|
}
|
|
1069
1066
|
if (g.removedFromBoard && dragOut === 'remove') {
|
|
1070
1067
|
// Release OUTSIDE the board → remove via the page's atomic command path.
|
|
1071
|
-
const displaced =
|
|
1068
|
+
const displaced = buildCommitCommands(deltasSince(g.startCells, g.startGeom, g.id));
|
|
1072
1069
|
const snap = g.startGeom.get(g.id);
|
|
1073
1070
|
if (snap) {
|
|
1074
1071
|
// Park the node on its start rect so the page's RemoveNodeCommand
|
|
@@ -1127,7 +1124,7 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
1127
1124
|
return null;
|
|
1128
1125
|
const f = frame();
|
|
1129
1126
|
const gg = geom();
|
|
1130
|
-
const span =
|
|
1127
|
+
const span = sizeToSpan(pxSize.width, pxSize.height, f, gg, rows());
|
|
1131
1128
|
// Clamp to the TARGET board's shape: a tall tile entering a one-row strip
|
|
1132
1129
|
// arrives as a strip-height tile, not a refusal.
|
|
1133
1130
|
span.w = Math.max(1, Math.min(columns, span.w));
|
|
@@ -1157,7 +1154,7 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
1157
1154
|
}
|
|
1158
1155
|
adoptedGhostId = node.id;
|
|
1159
1156
|
const tl = centredTopLeft(world.x, world.y, span);
|
|
1160
|
-
const cell0 =
|
|
1157
|
+
const cell0 = pointToCell(tl.x, tl.y, f, gg, rows(), span.w);
|
|
1161
1158
|
engine.moveCheck(node.id, cell0.x, cell0.y, { gate: false });
|
|
1162
1159
|
armGlide();
|
|
1163
1160
|
project();
|
|
@@ -1169,7 +1166,7 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
1169
1166
|
if (!item)
|
|
1170
1167
|
return;
|
|
1171
1168
|
const tlm = centredTopLeft(w.x, w.y, { w: item.w, h: item.h });
|
|
1172
|
-
const cell =
|
|
1169
|
+
const cell = pointToCell(tlm.x, tlm.y, frame(), geom(), rows(), item.w);
|
|
1173
1170
|
if (engine.moveCheck(node.id, cell.x, cell.y).changed)
|
|
1174
1171
|
project();
|
|
1175
1172
|
syncPlaceholder();
|
|
@@ -1191,8 +1188,8 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
1191
1188
|
return null;
|
|
1192
1189
|
}
|
|
1193
1190
|
const cell = { x: item.x, y: item.y, w: item.w, h: item.h };
|
|
1194
|
-
const rect =
|
|
1195
|
-
const commands =
|
|
1191
|
+
const rect = cellToRect(item, frame(), geom(), rows());
|
|
1192
|
+
const commands = buildCommitCommands(deltasSince(startCells, startGeom, node.id));
|
|
1196
1193
|
engine.endGesture();
|
|
1197
1194
|
adoptedGhostId = null;
|
|
1198
1195
|
disarmGlideSoon();
|
|
@@ -1305,7 +1302,7 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
1305
1302
|
cancelActiveGesture();
|
|
1306
1303
|
},
|
|
1307
1304
|
};
|
|
1308
|
-
const unregisterTool =
|
|
1305
|
+
const unregisterTool = registerTool(tool);
|
|
1309
1306
|
// -- palette drag-in --------------------------------------------------------
|
|
1310
1307
|
const beginPaletteDrag = (node, spec, event) => {
|
|
1311
1308
|
var _a, _b;
|
|
@@ -1370,7 +1367,7 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
1370
1367
|
const inside = worldInsideBoard(world.x, world.y);
|
|
1371
1368
|
if (inside) {
|
|
1372
1369
|
const tl = centredTopLeft(world.x, world.y, g.spans);
|
|
1373
|
-
const cell =
|
|
1370
|
+
const cell = pointToCell(tl.x, tl.y, frame(), geom(), rows(), g.spans.w);
|
|
1374
1371
|
if (g.removedFromBoard) {
|
|
1375
1372
|
g.removedFromBoard = false;
|
|
1376
1373
|
// Enter at the bottom edge (collision-free), then take the cursor
|
|
@@ -1406,8 +1403,8 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
1406
1403
|
if (commit && !g.removedFromBoard && engine.getItem(g.id)) {
|
|
1407
1404
|
const item = engine.getItem(g.id);
|
|
1408
1405
|
const cell = { x: item.x, y: item.y, w: item.w, h: item.h };
|
|
1409
|
-
node.setGridItem(
|
|
1410
|
-
const displaced =
|
|
1406
|
+
node.setGridItem(gridItemFromCell(cell));
|
|
1407
|
+
const displaced = buildCommitCommands(deltasSince(g.startCells, g.startGeom, g.id));
|
|
1411
1408
|
engine.endGesture();
|
|
1412
1409
|
cleanupGestureVisuals(g);
|
|
1413
1410
|
gesture = null;
|
|
@@ -1435,7 +1432,7 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
1435
1432
|
group.on('bounds:changed', (() => onBoundsChanged())),
|
|
1436
1433
|
];
|
|
1437
1434
|
/** Run one programmatic gesture through the same snapshot→op→commit pipeline. */
|
|
1438
|
-
const programmatic = (name, id, op) =>
|
|
1435
|
+
const programmatic = (name, id, op) => __awaiter(this, void 0, void 0, function* () {
|
|
1439
1436
|
if (disposed || gesture || !engine.getItem(id))
|
|
1440
1437
|
return false;
|
|
1441
1438
|
engine.beginGesture();
|
|
@@ -1450,17 +1447,17 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
1450
1447
|
try {
|
|
1451
1448
|
const it = engine.getItem(id);
|
|
1452
1449
|
if (it)
|
|
1453
|
-
writeRect(id,
|
|
1450
|
+
writeRect(id, cellToRect(it, frame(), geom(), rows()));
|
|
1454
1451
|
}
|
|
1455
1452
|
finally {
|
|
1456
1453
|
writing = false;
|
|
1457
1454
|
}
|
|
1458
|
-
const commands =
|
|
1455
|
+
const commands = buildCommitCommands(deltasSince(snap.cells, snap.geoms));
|
|
1459
1456
|
engine.endGesture();
|
|
1460
1457
|
disarmGlideSoon();
|
|
1461
1458
|
enforceBoardHeight();
|
|
1462
1459
|
if (commands.length > 0) {
|
|
1463
|
-
yield api.getEngine().commandManager.execute(new
|
|
1460
|
+
yield api.getEngine().commandManager.execute(new BatchCommand(name, commands));
|
|
1464
1461
|
}
|
|
1465
1462
|
api.renderNow();
|
|
1466
1463
|
return true;
|
|
@@ -1483,7 +1480,7 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
1483
1480
|
// would silently lose its wide layouts the first time anything else
|
|
1484
1481
|
// happened, and growing back would re-derive instead of restoring.
|
|
1485
1482
|
const carried = engine.getLayouts();
|
|
1486
|
-
engine = new
|
|
1483
|
+
engine = new GridPackEngine(items, { columns, float, maxRows });
|
|
1487
1484
|
engine.setLayouts(carried);
|
|
1488
1485
|
for (const item of engine.getItems())
|
|
1489
1486
|
persistAdoptedCell(item.id, item);
|
|
@@ -1550,8 +1547,8 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
1550
1547
|
padding,
|
|
1551
1548
|
sizing,
|
|
1552
1549
|
rows: r,
|
|
1553
|
-
rowHeight:
|
|
1554
|
-
columnUnit:
|
|
1550
|
+
rowHeight: rowHeightFor(g, r),
|
|
1551
|
+
columnUnit: columnUnitFor(g, f.width),
|
|
1555
1552
|
boardHeight: f.height,
|
|
1556
1553
|
frame: f,
|
|
1557
1554
|
};
|
|
@@ -1562,13 +1559,13 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
1562
1559
|
},
|
|
1563
1560
|
cellRectOf(id) {
|
|
1564
1561
|
const it = engine.getItem(id);
|
|
1565
|
-
return it ?
|
|
1562
|
+
return it ? cellToRect(it, frame(), geom(), rows()) : undefined;
|
|
1566
1563
|
},
|
|
1567
1564
|
planRemoval(id) {
|
|
1568
1565
|
const it = engine.getItem(id);
|
|
1569
1566
|
if (!it)
|
|
1570
1567
|
return [];
|
|
1571
|
-
const clone = new
|
|
1568
|
+
const clone = new GridPackEngine(engine.getItems().map((i) => (Object.assign({}, i))), { columns, float });
|
|
1572
1569
|
clone.remove(id);
|
|
1573
1570
|
const f = frame();
|
|
1574
1571
|
const g = geom();
|
|
@@ -1579,7 +1576,7 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
1579
1576
|
const e = memberEntity(item.id);
|
|
1580
1577
|
if (!before || !e)
|
|
1581
1578
|
continue;
|
|
1582
|
-
const target =
|
|
1579
|
+
const target = cellToRect(item, f, g, rAfter);
|
|
1583
1580
|
deltas.push({
|
|
1584
1581
|
id: item.id,
|
|
1585
1582
|
locked: !!item.locked,
|
|
@@ -1592,7 +1589,7 @@ function bindDashboardGrid(api, group, options = {}) {
|
|
|
1592
1589
|
sizeAfter: { width: target.width, height: target.height },
|
|
1593
1590
|
});
|
|
1594
1591
|
}
|
|
1595
|
-
return
|
|
1592
|
+
return buildCommitCommands(deltas);
|
|
1596
1593
|
},
|
|
1597
1594
|
moveTo(id, x, y) {
|
|
1598
1595
|
return programmatic('Move widget', id, () => engine.moveCheck(id, x, y).changed);
|