@bemedev/mind-flow 0.1.0 → 0.1.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/lib/helpers/createContext.d.ts +3 -3
- package/lib/helpers/createContext.d.ts.map +1 -1
- package/lib/server.cjs.js +33 -4
- package/lib/server.es.js +33 -4
- package/lib/services/main.typings.d.ts +1 -1
- package/lib/services/main.typings.d.ts.map +1 -1
- package/lib/ui/components/FlowChart.context.d.ts.map +1 -1
- package/lib/ui/components/FlowChart.data.d.ts +4 -1
- package/lib/ui/components/FlowChart.data.d.ts.map +1 -1
- package/lib/ui/components/NodesBoard.d.ts.map +1 -1
- package/package.json +2 -8
- package/src/helpers/createContext.ts +3 -3
- package/src/services/main.typings.ts +1 -1
- package/src/ui/components/FlowChart.context.ts +19 -0
- package/src/ui/components/FlowChart.data.ts +4 -1
- package/src/ui/components/NodesBoard.tsx +11 -0
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { createContext as createSolidContext, ParentComponent } from 'solid-js';
|
|
2
|
-
/** Context options type extracted from Solid's `
|
|
2
|
+
/** Context options type extracted from Solid's `createSolidContext`. */
|
|
3
3
|
type Options = Parameters<typeof createSolidContext>[1];
|
|
4
4
|
/**
|
|
5
5
|
* Creates a Solid context provider component and a custom hook to consume it.
|
|
6
6
|
*
|
|
7
|
-
* @template T - The type of the context value.
|
|
7
|
+
* @template `T` - The type of the context value.
|
|
8
8
|
*
|
|
9
9
|
* @param context - Factory function returning a non-nullable context value of type
|
|
10
10
|
* `NonNullable<T>`.
|
|
11
11
|
* @param options - Optional context configuration of type {@linkcode Options}.
|
|
12
12
|
*
|
|
13
|
-
* @returns A tuple containing the Provider component of
|
|
13
|
+
* @returns A tuple containing the Provider component of interface
|
|
14
14
|
* {@linkcode ParentComponent}, the accessor hook, and the Solid context object.
|
|
15
15
|
*/
|
|
16
16
|
export declare const createContext: <const T>(context: () => NonNullable<T>, options?: Options) => readonly [ParentComponent, () => NonNullable<T>, import('solid-js').Context<NonNullable<T>>];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createContext.d.ts","sourceRoot":"","sources":["../../src/helpers/createContext.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,IAAI,kBAAkB,EAEnC,KAAK,eAAe,EACrB,MAAM,UAAU,CAAC;AAElB,
|
|
1
|
+
{"version":3,"file":"createContext.d.ts","sourceRoot":"","sources":["../../src/helpers/createContext.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,IAAI,kBAAkB,EAEnC,KAAK,eAAe,EACrB,MAAM,UAAU,CAAC;AAElB,wEAAwE;AACxE,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;AAExD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,GAAI,KAAK,CAAC,CAAC,EACnC,SAAS,MAAM,WAAW,CAAC,CAAC,CAAC,EAC7B,UAAU,OAAO,iGAUlB,CAAC"}
|
package/lib/server.cjs.js
CHANGED
|
@@ -100,13 +100,13 @@ var CLASSES = [
|
|
|
100
100
|
/**
|
|
101
101
|
* Creates a Solid context provider component and a custom hook to consume it.
|
|
102
102
|
*
|
|
103
|
-
* @template T - The type of the context value.
|
|
103
|
+
* @template `T` - The type of the context value.
|
|
104
104
|
*
|
|
105
105
|
* @param context - Factory function returning a non-nullable context value of type
|
|
106
106
|
* `NonNullable<T>`.
|
|
107
107
|
* @param options - Optional context configuration of type {@linkcode Options}.
|
|
108
108
|
*
|
|
109
|
-
* @returns A tuple containing the Provider component of
|
|
109
|
+
* @returns A tuple containing the Provider component of interface
|
|
110
110
|
* {@linkcode ParentComponent}, the accessor hook, and the Solid context object.
|
|
111
111
|
*/
|
|
112
112
|
var createContext = (context, options) => {
|
|
@@ -133,7 +133,7 @@ var point = (0, _bemedev_app_bemedev.type)({
|
|
|
133
133
|
input: optional(use(point)),
|
|
134
134
|
output: use(point)
|
|
135
135
|
}));
|
|
136
|
-
/** Schema definition for edge extremities */
|
|
136
|
+
/** Schema definition for edge extremities. */
|
|
137
137
|
var extremities = (0, _bemedev_app_bemedev.type)({
|
|
138
138
|
from: "string",
|
|
139
139
|
to: "string"
|
|
@@ -388,7 +388,10 @@ var BOUNDS_CONSTRAINTS = {
|
|
|
388
388
|
horizontal: 55,
|
|
389
389
|
vertical: 40
|
|
390
390
|
};
|
|
391
|
-
/**
|
|
391
|
+
/**
|
|
392
|
+
* Default node items of type {@linkcode NodeProps} provided when no initial
|
|
393
|
+
* configuration is given.
|
|
394
|
+
*/
|
|
392
395
|
var DEFAULT_NODES = [{
|
|
393
396
|
id: "node-0",
|
|
394
397
|
data: {
|
|
@@ -420,6 +423,15 @@ var [Provider, useFlow] = createContext(() => {
|
|
|
420
423
|
const newEdge = (0, solid_js.createSignal)();
|
|
421
424
|
const [boardRef, setBoardRef] = (0, solid_js.createSignal)();
|
|
422
425
|
const [dimensions, setDimensions] = (0, solid_js.createSignal)({}, { equals: dequal_lite.dequal });
|
|
426
|
+
/**
|
|
427
|
+
* Converts client viewport coordinates to board canvas coordinates adjusted for
|
|
428
|
+
* zoom and scroll.
|
|
429
|
+
*
|
|
430
|
+
* @param clientX - Viewport horizontal coordinate.
|
|
431
|
+
* @param clientY - Viewport vertical coordinate.
|
|
432
|
+
*
|
|
433
|
+
* @returns Board coordinate point of type {@linkcode Point}.
|
|
434
|
+
*/
|
|
423
435
|
const getBoardPoint = (clientX, clientY) => {
|
|
424
436
|
const el = boardRef();
|
|
425
437
|
if (!el) return {
|
|
@@ -434,6 +446,16 @@ var [Provider, useFlow] = createContext(() => {
|
|
|
434
446
|
};
|
|
435
447
|
};
|
|
436
448
|
const [edgesPositions, setEdgesPositions] = (0, solid_js.createSignal)({}, { equals: false });
|
|
449
|
+
/**
|
|
450
|
+
* Clamps node coordinates within the visible container boundaries.
|
|
451
|
+
*
|
|
452
|
+
* @param x - Desired horizontal X coordinate.
|
|
453
|
+
* @param y - Desired vertical Y coordinate.
|
|
454
|
+
* @param nodeWidth - Width of the node element in pixels, defaults to `192`.
|
|
455
|
+
* @param nodeHeight - Height of the node element in pixels, defaults to `50`.
|
|
456
|
+
*
|
|
457
|
+
* @returns Clamped coordinate point of type {@linkcode Point}.
|
|
458
|
+
*/
|
|
437
459
|
const clampPosition = (x, y, nodeWidth = 192, nodeHeight = 50) => {
|
|
438
460
|
const container = boardRef()?.parentElement;
|
|
439
461
|
if (!container) return {
|
|
@@ -935,6 +957,13 @@ var NodesBoard = () => {
|
|
|
935
957
|
if (maxScrollY > 0) containerRef.scrollTop = percentY * maxScrollY;
|
|
936
958
|
}, { defer: true }));
|
|
937
959
|
const selectedId = (0, _bemedev_app_solidjs.useState)(service, { selector: (s) => s.context?.selected });
|
|
960
|
+
/**
|
|
961
|
+
* Determines whether the given element ID matches the currently selected entity.
|
|
962
|
+
*
|
|
963
|
+
* @param id - The node or edge identifier to check.
|
|
964
|
+
*
|
|
965
|
+
* @returns `true` if the item is currently selected, otherwise `false`.
|
|
966
|
+
*/
|
|
938
967
|
const selected = (id) => selectedId() === id;
|
|
939
968
|
const nodes = (0, _bemedev_app_solidjs.useState)(service, {
|
|
940
969
|
selector: (s) => {
|
package/lib/server.es.js
CHANGED
|
@@ -99,13 +99,13 @@ var CLASSES = [
|
|
|
99
99
|
/**
|
|
100
100
|
* Creates a Solid context provider component and a custom hook to consume it.
|
|
101
101
|
*
|
|
102
|
-
* @template T - The type of the context value.
|
|
102
|
+
* @template `T` - The type of the context value.
|
|
103
103
|
*
|
|
104
104
|
* @param context - Factory function returning a non-nullable context value of type
|
|
105
105
|
* `NonNullable<T>`.
|
|
106
106
|
* @param options - Optional context configuration of type {@linkcode Options}.
|
|
107
107
|
*
|
|
108
|
-
* @returns A tuple containing the Provider component of
|
|
108
|
+
* @returns A tuple containing the Provider component of interface
|
|
109
109
|
* {@linkcode ParentComponent}, the accessor hook, and the Solid context object.
|
|
110
110
|
*/
|
|
111
111
|
var createContext$1 = (context, options) => {
|
|
@@ -132,7 +132,7 @@ type(({ optional, use }) => ({
|
|
|
132
132
|
input: optional(use(point)),
|
|
133
133
|
output: use(point)
|
|
134
134
|
}));
|
|
135
|
-
/** Schema definition for edge extremities */
|
|
135
|
+
/** Schema definition for edge extremities. */
|
|
136
136
|
var extremities = type({
|
|
137
137
|
from: "string",
|
|
138
138
|
to: "string"
|
|
@@ -387,7 +387,10 @@ var BOUNDS_CONSTRAINTS = {
|
|
|
387
387
|
horizontal: 55,
|
|
388
388
|
vertical: 40
|
|
389
389
|
};
|
|
390
|
-
/**
|
|
390
|
+
/**
|
|
391
|
+
* Default node items of type {@linkcode NodeProps} provided when no initial
|
|
392
|
+
* configuration is given.
|
|
393
|
+
*/
|
|
391
394
|
var DEFAULT_NODES = [{
|
|
392
395
|
id: "node-0",
|
|
393
396
|
data: {
|
|
@@ -419,6 +422,15 @@ var [Provider, useFlow] = createContext$1(() => {
|
|
|
419
422
|
const newEdge = createSignal();
|
|
420
423
|
const [boardRef, setBoardRef] = createSignal();
|
|
421
424
|
const [dimensions, setDimensions] = createSignal({}, { equals: dequal });
|
|
425
|
+
/**
|
|
426
|
+
* Converts client viewport coordinates to board canvas coordinates adjusted for
|
|
427
|
+
* zoom and scroll.
|
|
428
|
+
*
|
|
429
|
+
* @param clientX - Viewport horizontal coordinate.
|
|
430
|
+
* @param clientY - Viewport vertical coordinate.
|
|
431
|
+
*
|
|
432
|
+
* @returns Board coordinate point of type {@linkcode Point}.
|
|
433
|
+
*/
|
|
422
434
|
const getBoardPoint = (clientX, clientY) => {
|
|
423
435
|
const el = boardRef();
|
|
424
436
|
if (!el) return {
|
|
@@ -433,6 +445,16 @@ var [Provider, useFlow] = createContext$1(() => {
|
|
|
433
445
|
};
|
|
434
446
|
};
|
|
435
447
|
const [edgesPositions, setEdgesPositions] = createSignal({}, { equals: false });
|
|
448
|
+
/**
|
|
449
|
+
* Clamps node coordinates within the visible container boundaries.
|
|
450
|
+
*
|
|
451
|
+
* @param x - Desired horizontal X coordinate.
|
|
452
|
+
* @param y - Desired vertical Y coordinate.
|
|
453
|
+
* @param nodeWidth - Width of the node element in pixels, defaults to `192`.
|
|
454
|
+
* @param nodeHeight - Height of the node element in pixels, defaults to `50`.
|
|
455
|
+
*
|
|
456
|
+
* @returns Clamped coordinate point of type {@linkcode Point}.
|
|
457
|
+
*/
|
|
436
458
|
const clampPosition = (x, y, nodeWidth = 192, nodeHeight = 50) => {
|
|
437
459
|
const container = boardRef()?.parentElement;
|
|
438
460
|
if (!container) return {
|
|
@@ -934,6 +956,13 @@ var NodesBoard = () => {
|
|
|
934
956
|
if (maxScrollY > 0) containerRef.scrollTop = percentY * maxScrollY;
|
|
935
957
|
}, { defer: true }));
|
|
936
958
|
const selectedId = useState(service, { selector: (s) => s.context?.selected });
|
|
959
|
+
/**
|
|
960
|
+
* Determines whether the given element ID matches the currently selected entity.
|
|
961
|
+
*
|
|
962
|
+
* @param id - The node or edge identifier to check.
|
|
963
|
+
*
|
|
964
|
+
* @returns `true` if the item is currently selected, otherwise `false`.
|
|
965
|
+
*/
|
|
937
966
|
const selected = (id) => selectedId() === id;
|
|
938
967
|
const nodes = useState(service, {
|
|
939
968
|
selector: (s) => {
|
|
@@ -17,7 +17,7 @@ export declare const nodeOffset: import('@bemedev/typings').inferSh<{
|
|
|
17
17
|
y: "number";
|
|
18
18
|
};
|
|
19
19
|
}>;
|
|
20
|
-
/** Schema definition for edge extremities */
|
|
20
|
+
/** Schema definition for edge extremities. */
|
|
21
21
|
export declare const extremities: import('@bemedev/typings').inferSh<{
|
|
22
22
|
from: "string";
|
|
23
23
|
to: "string";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.typings.d.ts","sourceRoot":"","sources":["../../src/services/main.typings.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAEnD,qDAAqD;AACrD,eAAO,MAAM,KAAK;;;EAAqC,CAAC;AAExD,uEAAuE;AACvE,MAAM,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,KAAK,CAAC,CAAC;AAEzC,oEAAoE;AACpE,eAAO,MAAM,UAAU;;;;;;;;;EAGpB,CAAC;AAEJ,
|
|
1
|
+
{"version":3,"file":"main.typings.d.ts","sourceRoot":"","sources":["../../src/services/main.typings.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAEnD,qDAAqD;AACrD,eAAO,MAAM,KAAK;;;EAAqC,CAAC;AAExD,uEAAuE;AACvE,MAAM,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,KAAK,CAAC,CAAC;AAEzC,oEAAoE;AACpE,eAAO,MAAM,UAAU;;;;;;;;;EAGpB,CAAC;AAEJ,8CAA8C;AAC9C,eAAO,MAAM,WAAW;;;EAAyC,CAAC;AAElE,gEAAgE;AAChE,eAAO,MAAM,QAAQ;;;;;;;;;;EAIlB,CAAC;AAEJ,gEAAgE;AAChE,eAAO,MAAM,QAAQ;;;EAAc,CAAC;AAEpC,+EAA+E;AAC/E,eAAO,MAAM,UAAU;;;;;;;;;;;;EAMpB,CAAC;AAEJ;;;GAGG;AACH,eAAO,MAAM,MAAM;;;;;EAKjB,CAAC;AAEH,yEAAyE;AACzE,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,MAAM,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlowChart.context.d.ts","sourceRoot":"","sources":["../../../src/ui/components/FlowChart.context.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAQjE,4EAA4E;AAC5E,KAAK,UAAU,GAAG;IAChB,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,MAAM,EAAE,KAAK,CAAC;IACd,gEAAgE;IAChE,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,qEAAqE;IACrE,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,oEAAoE;IACpE,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,CAAC;AAEF,uEAAuE;AACvE,KAAK,IAAI,GAAG;IACV,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAC;CACd,GAAG,MAAM,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAO,QAAQ,sCAAE,OAAO;;;;
|
|
1
|
+
{"version":3,"file":"FlowChart.context.d.ts","sourceRoot":"","sources":["../../../src/ui/components/FlowChart.context.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAQjE,4EAA4E;AAC5E,KAAK,UAAU,GAAG;IAChB,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,MAAM,EAAE,KAAK,CAAC;IACd,gEAAgE;IAChE,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,qEAAqE;IACrE,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,oEAAoE;IACpE,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,CAAC;AAEF,uEAAuE;AACvE,KAAK,IAAI,GAAG;IACV,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAC;CACd,GAAG,MAAM,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAO,QAAQ,sCAAE,OAAO;;;;sCA6BK,MAAM,WAAW,MAAM,KAAG,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA2B1D,MAAM,KACN,MAAM,8CAGR,KAAK;CAwQX,CAAC"}
|
|
@@ -56,7 +56,10 @@ export declare const BOUNDS_CONSTRAINTS: {
|
|
|
56
56
|
export declare const CANVAS_FACTOR = 5;
|
|
57
57
|
/** Multiplier factor used to compute canvas scroll dimensions. */
|
|
58
58
|
export declare const SCROLL_MULTIPLIER = 3;
|
|
59
|
-
/**
|
|
59
|
+
/**
|
|
60
|
+
* Default node items of type {@linkcode NodeProps} provided when no initial
|
|
61
|
+
* configuration is given.
|
|
62
|
+
*/
|
|
60
63
|
export declare const DEFAULT_NODES: (NodeProps & {
|
|
61
64
|
id: string;
|
|
62
65
|
})[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlowChart.data.d.ts","sourceRoot":"","sources":["../../../src/ui/components/FlowChart.data.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,mFAAmF;AACnF,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAG1C,mDAAmD;AACnD,eAAO,MAAM,iBAAiB,MAAM,CAAC;AAErC,sDAAsD;AACtD,eAAO,MAAM,WAAW,KAAK,CAAC;AAE9B,oDAAoD;AACpD,eAAO,MAAM,aAAa,QAAkB,CAAC;AAE7C,+DAA+D;AAC/D,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,kEAAkE;AAClE,eAAO,MAAM,yBAAyB,KAAK,CAAC;AAE5C,sDAAsD;AACtD,eAAO,MAAM,eAAe,QAAoC,CAAC;AAEjE,mEAAmE;AACnE,eAAO,MAAM,sBAAsB,QAC4B,CAAC;AAEhE,+DAA+D;AAC/D,eAAO,MAAM,sBAAsB,QAA0B,CAAC;AAE9D,+DAA+D;AAC/D,eAAO,MAAM,sBAAsB,QAAkB,CAAC;AAEtD,kEAAkE;AAClE,eAAO,MAAM,oBAAoB;;;CAGhC,CAAC;AAEF,mFAAmF;AACnF,eAAO,MAAM,oBAAoB;;;CAAgC,CAAC;AAElE;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,GAAI,cAAS;;;CAG9C,CAAC;AAEH,qDAAqD;AACrD,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,yDAAyD;AACzD,eAAO,MAAM,cAAc,IAAI,CAAC;AAEhC;;;GAGG;AACH,eAAO,MAAM,kBAAkB;;;CAAmC,CAAC;AAEnE,0EAA0E;AAC1E,eAAO,MAAM,aAAa,IAAI,CAAC;AAE/B,kEAAkE;AAClE,eAAO,MAAM,iBAAiB,IAAI,CAAC;AAGnC
|
|
1
|
+
{"version":3,"file":"FlowChart.data.d.ts","sourceRoot":"","sources":["../../../src/ui/components/FlowChart.data.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,mFAAmF;AACnF,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAG1C,mDAAmD;AACnD,eAAO,MAAM,iBAAiB,MAAM,CAAC;AAErC,sDAAsD;AACtD,eAAO,MAAM,WAAW,KAAK,CAAC;AAE9B,oDAAoD;AACpD,eAAO,MAAM,aAAa,QAAkB,CAAC;AAE7C,+DAA+D;AAC/D,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,kEAAkE;AAClE,eAAO,MAAM,yBAAyB,KAAK,CAAC;AAE5C,sDAAsD;AACtD,eAAO,MAAM,eAAe,QAAoC,CAAC;AAEjE,mEAAmE;AACnE,eAAO,MAAM,sBAAsB,QAC4B,CAAC;AAEhE,+DAA+D;AAC/D,eAAO,MAAM,sBAAsB,QAA0B,CAAC;AAE9D,+DAA+D;AAC/D,eAAO,MAAM,sBAAsB,QAAkB,CAAC;AAEtD,kEAAkE;AAClE,eAAO,MAAM,oBAAoB;;;CAGhC,CAAC;AAEF,mFAAmF;AACnF,eAAO,MAAM,oBAAoB;;;CAAgC,CAAC;AAElE;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,GAAI,cAAS;;;CAG9C,CAAC;AAEH,qDAAqD;AACrD,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,yDAAyD;AACzD,eAAO,MAAM,cAAc,IAAI,CAAC;AAEhC;;;GAGG;AACH,eAAO,MAAM,kBAAkB;;;CAAmC,CAAC;AAEnE,0EAA0E;AAC1E,eAAO,MAAM,aAAa,IAAI,CAAC;AAE/B,kEAAkE;AAClE,eAAO,MAAM,iBAAiB,IAAI,CAAC;AAGnC;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,CAAC,SAAS,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC,EAOvD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NodesBoard.d.ts","sourceRoot":"","sources":["../../../src/ui/components/NodesBoard.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,SAAS,EAA6C,MAAM,UAAU,CAAC;AAQhF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,EAAE,
|
|
1
|
+
{"version":3,"file":"NodesBoard.d.ts","sourceRoot":"","sources":["../../../src/ui/components/NodesBoard.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,SAAS,EAA6C,MAAM,UAAU,CAAC;AAQhF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,EAAE,SA6RxB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bemedev/mind-flow",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Flow Chart UI library for Solid.js applications",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"diagram",
|
|
@@ -65,11 +65,7 @@
|
|
|
65
65
|
"@bemedev/app": "^1.11.0",
|
|
66
66
|
"@bemedev/app-cli": "^1.11.0",
|
|
67
67
|
"@bemedev/app-solidjs": "^1.11.0",
|
|
68
|
-
"@bemedev/
|
|
69
|
-
"@bemedev/rollup-config": "^0.2.2",
|
|
70
|
-
"@bemedev/vitest-alias": "^0.0.3",
|
|
71
|
-
"@bemedev/vitest-exclude": "^0.1.1",
|
|
72
|
-
"@bemedev/vitest-extended": "^1.5.3",
|
|
68
|
+
"@bemedev/dev-utils": "^1.2.0",
|
|
73
69
|
"@rollup/plugin-babel": "^7.1.0",
|
|
74
70
|
"@rollup/plugin-node-resolve": "^16.0.3",
|
|
75
71
|
"@size-limit/file": "^13.0.3",
|
|
@@ -77,7 +73,6 @@
|
|
|
77
73
|
"@tailwindcss/vite": "^4.3.3",
|
|
78
74
|
"@types/node": "^26.2.0",
|
|
79
75
|
"@vitest/coverage-v8": "^4.1.11",
|
|
80
|
-
"babel-preset-solid": "^1.9.15",
|
|
81
76
|
"glob": "^13.0.6",
|
|
82
77
|
"globals": "^17.11.0",
|
|
83
78
|
"husky": "^9.1.7",
|
|
@@ -97,7 +92,6 @@
|
|
|
97
92
|
"vite": "^8.2.1",
|
|
98
93
|
"vite-plugin-dts": "^5.0.3",
|
|
99
94
|
"vite-plugin-solid": "^2.11.14",
|
|
100
|
-
"vite-tsconfig-paths": "^6.1.1",
|
|
101
95
|
"vitest": "^4.1.11"
|
|
102
96
|
},
|
|
103
97
|
"peerDependencies": {
|
|
@@ -4,19 +4,19 @@ import {
|
|
|
4
4
|
type ParentComponent,
|
|
5
5
|
} from 'solid-js';
|
|
6
6
|
|
|
7
|
-
/** Context options type extracted from Solid's `
|
|
7
|
+
/** Context options type extracted from Solid's `createSolidContext`. */
|
|
8
8
|
type Options = Parameters<typeof createSolidContext>[1];
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
11
|
* Creates a Solid context provider component and a custom hook to consume it.
|
|
12
12
|
*
|
|
13
|
-
* @template T - The type of the context value.
|
|
13
|
+
* @template `T` - The type of the context value.
|
|
14
14
|
*
|
|
15
15
|
* @param context - Factory function returning a non-nullable context value of type
|
|
16
16
|
* `NonNullable<T>`.
|
|
17
17
|
* @param options - Optional context configuration of type {@linkcode Options}.
|
|
18
18
|
*
|
|
19
|
-
* @returns A tuple containing the Provider component of
|
|
19
|
+
* @returns A tuple containing the Provider component of interface
|
|
20
20
|
* {@linkcode ParentComponent}, the accessor hook, and the Solid context object.
|
|
21
21
|
*/
|
|
22
22
|
export const createContext = <const T>(
|
|
@@ -13,7 +13,7 @@ export const nodeOffset = type(({ optional, use }) => ({
|
|
|
13
13
|
output: use(point),
|
|
14
14
|
}));
|
|
15
15
|
|
|
16
|
-
/** Schema definition for edge extremities */
|
|
16
|
+
/** Schema definition for edge extremities. */
|
|
17
17
|
export const extremities = type({ from: 'string', to: 'string' });
|
|
18
18
|
|
|
19
19
|
/** Schema definition for a serialized flowchart node entity. */
|
|
@@ -59,6 +59,15 @@ export const [Provider, useFlow] = createContext(
|
|
|
59
59
|
{ equals: dequal },
|
|
60
60
|
);
|
|
61
61
|
|
|
62
|
+
/**
|
|
63
|
+
* Converts client viewport coordinates to board canvas coordinates adjusted for
|
|
64
|
+
* zoom and scroll.
|
|
65
|
+
*
|
|
66
|
+
* @param clientX - Viewport horizontal coordinate.
|
|
67
|
+
* @param clientY - Viewport vertical coordinate.
|
|
68
|
+
*
|
|
69
|
+
* @returns Board coordinate point of type {@linkcode Point}.
|
|
70
|
+
*/
|
|
62
71
|
const getBoardPoint = (clientX: number, clientY: number): Point => {
|
|
63
72
|
const el = boardRef();
|
|
64
73
|
if (!el) return { x: clientX, y: clientY };
|
|
@@ -75,6 +84,16 @@ export const [Provider, useFlow] = createContext(
|
|
|
75
84
|
{ equals: false },
|
|
76
85
|
);
|
|
77
86
|
|
|
87
|
+
/**
|
|
88
|
+
* Clamps node coordinates within the visible container boundaries.
|
|
89
|
+
*
|
|
90
|
+
* @param x - Desired horizontal X coordinate.
|
|
91
|
+
* @param y - Desired vertical Y coordinate.
|
|
92
|
+
* @param nodeWidth - Width of the node element in pixels, defaults to `192`.
|
|
93
|
+
* @param nodeHeight - Height of the node element in pixels, defaults to `50`.
|
|
94
|
+
*
|
|
95
|
+
* @returns Clamped coordinate point of type {@linkcode Point}.
|
|
96
|
+
*/
|
|
78
97
|
const clampPosition = (
|
|
79
98
|
x: number,
|
|
80
99
|
y: number,
|
|
@@ -72,7 +72,10 @@ export const CANVAS_FACTOR = 5;
|
|
|
72
72
|
export const SCROLL_MULTIPLIER = 3;
|
|
73
73
|
// #endregion
|
|
74
74
|
|
|
75
|
-
/**
|
|
75
|
+
/**
|
|
76
|
+
* Default node items of type {@linkcode NodeProps} provided when no initial
|
|
77
|
+
* configuration is given.
|
|
78
|
+
*/
|
|
76
79
|
export const DEFAULT_NODES: (NodeProps & { id: string })[] = [
|
|
77
80
|
{
|
|
78
81
|
id: 'node-0',
|
|
@@ -35,6 +35,10 @@ export const NodesBoard: Component = () => {
|
|
|
35
35
|
zoom: [zoom, setZoom],
|
|
36
36
|
} = useFlow();
|
|
37
37
|
|
|
38
|
+
/**
|
|
39
|
+
* Calculates and saves the normalized scroll percentages across X and Y axes for
|
|
40
|
+
* preserving viewport alignment on zoom changes.
|
|
41
|
+
*/
|
|
38
42
|
const updateScrollPercentages = () => {
|
|
39
43
|
const maxScrollX = containerRef.scrollWidth - containerRef.clientWidth;
|
|
40
44
|
const maxScrollY = containerRef.scrollHeight - containerRef.clientHeight;
|
|
@@ -57,6 +61,13 @@ export const NodesBoard: Component = () => {
|
|
|
57
61
|
|
|
58
62
|
const selectedId = useState(service, { selector: s => s.context?.selected });
|
|
59
63
|
|
|
64
|
+
/**
|
|
65
|
+
* Determines whether the given element ID matches the currently selected entity.
|
|
66
|
+
*
|
|
67
|
+
* @param id - The node or edge identifier to check.
|
|
68
|
+
*
|
|
69
|
+
* @returns `true` if the item is currently selected, otherwise `false`.
|
|
70
|
+
*/
|
|
60
71
|
const selected = (id: string | number) => selectedId() === id;
|
|
61
72
|
|
|
62
73
|
const nodes = useState(service, {
|