@fxhash/open-form-graph 0.0.1 → 0.0.3
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/dist/OpenFormGraph-CdcWNN86.d.ts +24 -0
- package/dist/OpenFormGraph-i8VSTamk.js +2170 -0
- package/dist/OpenFormGraph-i8VSTamk.js.map +1 -0
- package/dist/_types-CjgCTzqc.d.ts +82 -0
- package/dist/components.d.ts +3 -0
- package/dist/components.js +4 -0
- package/dist/constants-BNPHdbBA.d.ts +313 -0
- package/dist/index.d.ts +125 -133
- package/dist/index.js +3 -2098
- package/dist/provider-PqOen2FE.js +106 -0
- package/dist/provider-PqOen2FE.js.map +1 -0
- package/dist/provider.d.ts +3 -0
- package/dist/provider.js +3 -0
- package/package.json +15 -10
- package/dist/index.js.map +0 -1
@@ -0,0 +1,106 @@
|
|
1
|
+
import { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
3
|
+
|
4
|
+
//#region src/context/constants.ts
|
5
|
+
const VOID_ROOT_ID = "void-root";
|
6
|
+
const VOID_DETACH_ID = "void-detach";
|
7
|
+
const DEFAULT_GRAPH_CONFIG = {
|
8
|
+
debug: false,
|
9
|
+
nodeSize: 20,
|
10
|
+
minClusterSize: 10,
|
11
|
+
maxClusterSize: 20,
|
12
|
+
minZoom: .1,
|
13
|
+
maxZoom: 10,
|
14
|
+
theme: {
|
15
|
+
light: [
|
16
|
+
255,
|
17
|
+
255,
|
18
|
+
255
|
19
|
+
],
|
20
|
+
dark: [
|
21
|
+
0,
|
22
|
+
0,
|
23
|
+
0
|
24
|
+
]
|
25
|
+
}
|
26
|
+
};
|
27
|
+
|
28
|
+
//#endregion
|
29
|
+
//#region src/context/provider.tsx
|
30
|
+
const OpenFormGraphContext = createContext({
|
31
|
+
rootId: "",
|
32
|
+
rootImageSources: [],
|
33
|
+
setSelectedNode: () => {},
|
34
|
+
setHoveredNode: () => {},
|
35
|
+
theme: "light",
|
36
|
+
hideThumbnails: false,
|
37
|
+
setHideThumbnails: () => {},
|
38
|
+
config: DEFAULT_GRAPH_CONFIG,
|
39
|
+
data: {
|
40
|
+
nodes: [],
|
41
|
+
links: []
|
42
|
+
},
|
43
|
+
selectedNode: null,
|
44
|
+
hoveredNode: null,
|
45
|
+
simulation: { current: null },
|
46
|
+
setSelectedNodeById: () => {}
|
47
|
+
});
|
48
|
+
function OpenFormGraphProvider({ theme = "light", rootId, children, rootImageSources = [], config = DEFAULT_GRAPH_CONFIG, data, lockedNodeId }) {
|
49
|
+
const simulation = useRef(null);
|
50
|
+
const [selectedNode, _setSelectedNode] = useState(null);
|
51
|
+
const [hoveredNode, setHoveredNode] = useState(null);
|
52
|
+
const [hideThumbnails, setHideThumbnails] = useState(false);
|
53
|
+
const setSelectedNode = useCallback((node) => {
|
54
|
+
_setSelectedNode(node);
|
55
|
+
simulation.current?.setSelectedNode(node);
|
56
|
+
}, [_setSelectedNode]);
|
57
|
+
const setSelectedNodeById = useCallback((nodeId) => {
|
58
|
+
const node = simulation.current?.getNodeById(nodeId);
|
59
|
+
if (node) simulation.current?.handleClickNode(node);
|
60
|
+
}, [setSelectedNode]);
|
61
|
+
const contextValue = useMemo(() => {
|
62
|
+
return {
|
63
|
+
rootId,
|
64
|
+
selectedNode,
|
65
|
+
setSelectedNode,
|
66
|
+
setSelectedNodeById,
|
67
|
+
hoveredNode,
|
68
|
+
setHoveredNode,
|
69
|
+
hideThumbnails,
|
70
|
+
setHideThumbnails,
|
71
|
+
rootImageSources,
|
72
|
+
theme,
|
73
|
+
config,
|
74
|
+
data,
|
75
|
+
simulation,
|
76
|
+
lockedNodeId
|
77
|
+
};
|
78
|
+
}, [
|
79
|
+
rootId,
|
80
|
+
selectedNode,
|
81
|
+
setSelectedNode,
|
82
|
+
setSelectedNodeById,
|
83
|
+
hoveredNode,
|
84
|
+
setHoveredNode,
|
85
|
+
hideThumbnails,
|
86
|
+
setHideThumbnails,
|
87
|
+
rootImageSources,
|
88
|
+
config,
|
89
|
+
data,
|
90
|
+
simulation,
|
91
|
+
lockedNodeId
|
92
|
+
]);
|
93
|
+
return /* @__PURE__ */ jsx(OpenFormGraphContext.Provider, {
|
94
|
+
value: contextValue,
|
95
|
+
children
|
96
|
+
});
|
97
|
+
}
|
98
|
+
function useOpenFormGraph() {
|
99
|
+
const context = useContext(OpenFormGraphContext);
|
100
|
+
if (!context) throw new Error("useOpenFormGraph must be used within a OpenFormGraphProvider");
|
101
|
+
return context;
|
102
|
+
}
|
103
|
+
|
104
|
+
//#endregion
|
105
|
+
export { DEFAULT_GRAPH_CONFIG, OpenFormGraphProvider, VOID_DETACH_ID, VOID_ROOT_ID, useOpenFormGraph };
|
106
|
+
//# sourceMappingURL=provider-PqOen2FE.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"provider-PqOen2FE.js","names":["DEFAULT_GRAPH_CONFIG: GraphConfig","node: SimNode | null","nodeId: string","contextValue: OpenFormGraphApi"],"sources":["../src/context/constants.ts","../src/context/provider.tsx"],"sourcesContent":["import { GraphConfig } from \"@/_interfaces\"\n\nexport const VOID_ROOT_ID = \"void-root\"\nexport const VOID_DETACH_ID = \"void-detach\"\n\nexport const DEFAULT_GRAPH_CONFIG: GraphConfig = {\n debug: false,\n nodeSize: 20,\n minClusterSize: 10,\n maxClusterSize: 20,\n minZoom: 0.1,\n maxZoom: 10,\n theme: {\n light: [255, 255, 255],\n dark: [0, 0, 0],\n },\n}\n","import {\n createContext,\n useContext,\n useState,\n ReactNode,\n Dispatch,\n useMemo,\n useRef,\n MutableRefObject,\n useCallback,\n} from \"react\"\nimport {\n RawGraphData,\n RootNodeImageSources,\n SimNode,\n ThemeMode,\n} from \"@/_types\"\nimport { GraphConfig } from \"@/_interfaces\"\nimport { DEFAULT_GRAPH_CONFIG } from \"./constants\"\nimport { OpenGraphSimulation } from \"@/sim/OpenGraphSimulation\"\n\ninterface OpenFormGraphProviderProps {\n rootId: string\n rootImageSources: RootNodeImageSources\n theme: ThemeMode\n children: ReactNode\n config?: GraphConfig\n data: RawGraphData\n onSelectedNodeChange?: (node: SimNode | null) => void\n onHoveredNodeChange?: (node: SimNode | null) => void\n lockedNodeId?: string\n}\n\nexport interface OpenFormGraphApi {\n rootId: string\n rootImageSources: RootNodeImageSources\n setSelectedNode: Dispatch<SimNode | null>\n setHoveredNode: Dispatch<SimNode | null>\n theme: ThemeMode\n hideThumbnails: boolean\n setHideThumbnails: Dispatch<boolean>\n config: GraphConfig\n data: RawGraphData\n simulation: MutableRefObject<OpenGraphSimulation | null>\n selectedNode: SimNode | null\n hoveredNode: SimNode | null\n setSelectedNodeById: (nodeId: string) => void\n lockedNodeId?: string\n}\n\nconst OpenFormGraphContext = createContext<OpenFormGraphApi>({\n rootId: \"\",\n rootImageSources: [],\n setSelectedNode: () => {},\n setHoveredNode: () => {},\n theme: \"light\",\n hideThumbnails: false,\n setHideThumbnails: () => {},\n config: DEFAULT_GRAPH_CONFIG,\n data: { nodes: [], links: [] },\n selectedNode: null,\n hoveredNode: null,\n simulation: { current: null },\n setSelectedNodeById: () => {},\n})\n\nexport function OpenFormGraphProvider({\n theme = \"light\",\n rootId,\n children,\n rootImageSources = [],\n config = DEFAULT_GRAPH_CONFIG,\n data,\n lockedNodeId,\n}: OpenFormGraphProviderProps) {\n const simulation = useRef<OpenGraphSimulation | null>(null)\n const [selectedNode, _setSelectedNode] = useState<SimNode | null>(null)\n const [hoveredNode, setHoveredNode] = useState<SimNode | null>(null)\n const [hideThumbnails, setHideThumbnails] = useState(false)\n\n const setSelectedNode = useCallback(\n (node: SimNode | null) => {\n _setSelectedNode(node)\n simulation.current?.setSelectedNode(node)\n },\n [_setSelectedNode]\n )\n\n const setSelectedNodeById = useCallback(\n (nodeId: string) => {\n const node = simulation.current?.getNodeById(nodeId)\n if (node) {\n simulation.current?.handleClickNode(node)\n }\n },\n [setSelectedNode]\n )\n\n const contextValue: OpenFormGraphApi = useMemo(() => {\n return {\n rootId,\n selectedNode,\n setSelectedNode,\n setSelectedNodeById,\n hoveredNode,\n setHoveredNode,\n hideThumbnails,\n setHideThumbnails,\n rootImageSources,\n theme,\n config,\n data,\n simulation,\n lockedNodeId,\n }\n }, [\n rootId,\n selectedNode,\n setSelectedNode,\n setSelectedNodeById,\n hoveredNode,\n setHoveredNode,\n hideThumbnails,\n setHideThumbnails,\n rootImageSources,\n config,\n data,\n simulation,\n lockedNodeId,\n ])\n\n return (\n <OpenFormGraphContext.Provider value={contextValue}>\n {children}\n </OpenFormGraphContext.Provider>\n )\n}\n\nexport function useOpenFormGraph(): OpenFormGraphApi {\n const context = useContext(OpenFormGraphContext)\n if (!context) {\n throw new Error(\n \"useOpenFormGraph must be used within a OpenFormGraphProvider\"\n )\n }\n return context\n}\n"],"mappings":";;;;AAEA,MAAa,eAAe;AAC5B,MAAa,iBAAiB;AAE9B,MAAaA,uBAAoC;CAC/C,OAAO;CACP,UAAU;CACV,gBAAgB;CAChB,gBAAgB;CAChB,SAAS;CACT,SAAS;CACT,OAAO;EACL,OAAO;GAAC;GAAK;GAAK;EAAI;EACtB,MAAM;GAAC;GAAG;GAAG;EAAE;CAChB;AACF;;;;ACkCD,MAAM,uBAAuB,cAAgC;CAC3D,QAAQ;CACR,kBAAkB,CAAE;CACpB,iBAAiB,MAAM,CAAE;CACzB,gBAAgB,MAAM,CAAE;CACxB,OAAO;CACP,gBAAgB;CAChB,mBAAmB,MAAM,CAAE;CAC3B,QAAQ;CACR,MAAM;EAAE,OAAO,CAAE;EAAE,OAAO,CAAE;CAAE;CAC9B,cAAc;CACd,aAAa;CACb,YAAY,EAAE,SAAS,KAAM;CAC7B,qBAAqB,MAAM,CAAE;AAC9B,EAAC;AAEF,SAAgB,sBAAsB,EACpC,QAAQ,SACR,QACA,UACA,mBAAmB,CAAE,GACrB,SAAS,sBACT,MACA,cAC2B,EAAE;CAC7B,MAAM,aAAa,OAAmC,KAAK;CAC3D,MAAM,CAAC,cAAc,iBAAiB,GAAG,SAAyB,KAAK;CACvE,MAAM,CAAC,aAAa,eAAe,GAAG,SAAyB,KAAK;CACpE,MAAM,CAAC,gBAAgB,kBAAkB,GAAG,SAAS,MAAM;CAE3D,MAAM,kBAAkB,YACtB,CAACC,SAAyB;AACxB,mBAAiB,KAAK;AACtB,aAAW,SAAS,gBAAgB,KAAK;CAC1C,GACD,CAAC,gBAAiB,EACnB;CAED,MAAM,sBAAsB,YAC1B,CAACC,WAAmB;EAClB,MAAM,OAAO,WAAW,SAAS,YAAY,OAAO;AACpD,MAAI,KACF,YAAW,SAAS,gBAAgB,KAAK;CAE5C,GACD,CAAC,eAAgB,EAClB;CAED,MAAMC,eAAiC,QAAQ,MAAM;AACnD,SAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACD;CACF,GAAE;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACD,EAAC;AAEF,wBACE,IAAC,qBAAqB;EAAS,OAAO;EACnC;GAC6B;AAEnC;AAED,SAAgB,mBAAqC;CACnD,MAAM,UAAU,WAAW,qBAAqB;AAChD,MAAK,QACH,OAAM,IAAI,MACR;AAGJ,QAAO;AACR"}
|
@@ -0,0 +1,3 @@
|
|
1
|
+
import "./_types-CjgCTzqc.js";
|
2
|
+
import { DEFAULT_GRAPH_CONFIG$1 as DEFAULT_GRAPH_CONFIG, OpenFormGraphApi, OpenFormGraphProvider$1 as OpenFormGraphProvider, VOID_DETACH_ID$1 as VOID_DETACH_ID, VOID_ROOT_ID$1 as VOID_ROOT_ID, useOpenFormGraph$1 as useOpenFormGraph } from "./constants-BNPHdbBA.js";
|
3
|
+
export { DEFAULT_GRAPH_CONFIG, OpenFormGraphApi, OpenFormGraphProvider, VOID_DETACH_ID, VOID_ROOT_ID, useOpenFormGraph };
|
package/dist/provider.js
ADDED
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fxhash/open-form-graph",
|
3
3
|
"description": "A react-force-graph visualizer for open form collections",
|
4
|
-
"version": "0.0.
|
4
|
+
"version": "0.0.3",
|
5
5
|
"author": "fxhash",
|
6
6
|
"dependencies": {
|
7
7
|
"d3-force": "3.0.0",
|
@@ -9,10 +9,7 @@
|
|
9
9
|
"d3-scale-chromatic": "3.1.0",
|
10
10
|
"lodash.debounce": "4.0.8",
|
11
11
|
"lodash.throttle": "4.1.1",
|
12
|
-
"
|
13
|
-
"react-force-graph-3d": "1.26.1",
|
14
|
-
"three": "0.176.0",
|
15
|
-
"three-spritetext": "1.9.6"
|
12
|
+
"@fxhash/utils": "0.0.5"
|
16
13
|
},
|
17
14
|
"devDependencies": {
|
18
15
|
"@types/d3-force": "3.0.10",
|
@@ -23,15 +20,22 @@
|
|
23
20
|
"@types/react": "18.3.12",
|
24
21
|
"@types/react-dom": "18.3.1",
|
25
22
|
"@types/three": "0.176.0",
|
26
|
-
"
|
27
|
-
"tsup": "8.4.0",
|
23
|
+
"tsdown": "0.12.2",
|
28
24
|
"typescript": "5.8.2",
|
29
|
-
"@fxhash/tsconfig": "0.0.
|
25
|
+
"@fxhash/tsconfig": "0.0.3"
|
30
26
|
},
|
31
27
|
"exports": {
|
32
28
|
".": {
|
33
29
|
"types": "./dist/index.d.ts",
|
34
30
|
"default": "./dist/index.js"
|
31
|
+
},
|
32
|
+
"./provider": {
|
33
|
+
"types": "./dist/provider.d.ts",
|
34
|
+
"default": "./dist/provider.js"
|
35
|
+
},
|
36
|
+
"./components": {
|
37
|
+
"types": "./dist/components.d.ts",
|
38
|
+
"default": "./dist/components.js"
|
35
39
|
}
|
36
40
|
},
|
37
41
|
"files": [
|
@@ -46,9 +50,10 @@
|
|
46
50
|
"access": "public"
|
47
51
|
},
|
48
52
|
"repository": "fxhash/fxhash-package",
|
53
|
+
"sideEffects": false,
|
49
54
|
"type": "module",
|
50
55
|
"scripts": {
|
51
|
-
"build": "
|
52
|
-
"dev": "
|
56
|
+
"build": "tsdown && tsc --noEmit",
|
57
|
+
"dev": "tsdown --watch"
|
53
58
|
}
|
54
59
|
}
|