project-graph-mcp 2.3.2 → 2.4.0
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/package.json +3 -2
- package/src/analysis/analysis-cache.ctx +9 -0
- package/src/analysis/analysis-cache.js +1 -1
- package/src/analysis/complexity.ctx +6 -0
- package/src/analysis/complexity.js +1 -1
- package/src/analysis/custom-rules.ctx +14 -0
- package/src/analysis/custom-rules.js +1 -1
- package/src/analysis/db-analysis.ctx +7 -0
- package/src/analysis/db-analysis.js +1 -1
- package/src/analysis/dead-code.ctx +6 -0
- package/src/analysis/dead-code.js +1 -1
- package/src/analysis/full-analysis.ctx +9 -0
- package/src/analysis/full-analysis.js +1 -1
- package/src/analysis/jsdoc-checker.ctx +10 -0
- package/src/analysis/jsdoc-checker.js +1 -1
- package/src/analysis/jsdoc-generator.ctx +9 -0
- package/src/analysis/jsdoc-generator.js +1 -1
- package/src/analysis/large-files.ctx +6 -0
- package/src/analysis/large-files.js +1 -1
- package/src/analysis/outdated-patterns.ctx +7 -0
- package/src/analysis/outdated-patterns.js +1 -1
- package/src/analysis/similar-functions.ctx +6 -0
- package/src/analysis/similar-functions.js +1 -1
- package/src/analysis/test-annotations.ctx +11 -0
- package/src/analysis/test-annotations.js +1 -1
- package/src/analysis/type-checker.ctx +6 -0
- package/src/analysis/type-checker.js +1 -1
- package/src/analysis/undocumented.ctx +8 -0
- package/src/analysis/undocumented.js +1 -1
- package/src/cli/cli-handlers.ctx +7 -0
- package/src/cli/cli-handlers.js +1 -1
- package/src/cli/cli.ctx +6 -0
- package/src/cli/cli.js +1 -1
- package/src/compact/ai-context.ctx +6 -0
- package/src/compact/ai-context.js +1 -1
- package/src/compact/compact-migrate.ctx +8 -0
- package/src/compact/compact-migrate.js +1 -1
- package/src/compact/compact.ctx +11 -0
- package/src/compact/compact.js +1 -1
- package/src/compact/compress.ctx +7 -0
- package/src/compact/compress.js +1 -1
- package/src/compact/ctx-resolver.ctx +2 -0
- package/src/compact/ctx-resolver.js +1 -1
- package/src/compact/ctx-to-jsdoc.ctx +11 -0
- package/src/compact/ctx-to-jsdoc.js +1 -1
- package/src/compact/doc-dialect.ctx +11 -0
- package/src/compact/doc-dialect.js +2 -2
- package/src/compact/expand.ctx +14 -0
- package/src/compact/expand.js +1 -1
- package/src/compact/framework-references.ctx +7 -0
- package/src/compact/framework-references.js +1 -1
- package/src/compact/instructions.ctx +6 -0
- package/src/compact/instructions.js +1 -1
- package/src/compact/jsdoc-builder.ctx +4 -0
- package/src/compact/jsdoc-builder.js +1 -1
- package/src/compact/mode-config.ctx +8 -0
- package/src/compact/mode-config.js +1 -1
- package/src/compact/split-declarations.ctx +6 -0
- package/src/compact/split-declarations.js +1 -1
- package/src/compact/validate-pipeline.ctx +12 -0
- package/src/compact/validate-pipeline.js +1 -1
- package/src/core/event-bus.ctx +9 -0
- package/src/core/event-bus.js +1 -1
- package/src/core/file-walker.ctx +1 -0
- package/src/core/file-walker.js +1 -1
- package/src/core/filters.ctx +12 -0
- package/src/core/filters.js +1 -1
- package/src/core/graph-builder.ctx +7 -0
- package/src/core/graph-builder.js +1 -1
- package/src/core/parser.ctx +12 -0
- package/src/core/parser.js +1 -1
- package/src/core/utils.ctx +1 -0
- package/src/core/utils.js +1 -1
- package/src/core/workspace.ctx +7 -0
- package/src/core/workspace.js +1 -1
- package/src/lang/lang-go.ctx +8 -0
- package/src/lang/lang-go.js +1 -1
- package/src/lang/lang-python.ctx +5 -0
- package/src/lang/lang-python.js +1 -1
- package/src/lang/lang-sql.ctx +10 -0
- package/src/lang/lang-sql.js +1 -1
- package/src/lang/lang-typescript.ctx +6 -0
- package/src/lang/lang-typescript.js +1 -1
- package/src/lang/lang-utils.ctx +5 -0
- package/src/lang/lang-utils.js +1 -1
- package/src/mcp/mcp-server.ctx +6 -0
- package/src/mcp/mcp-server.js +1 -1
- package/src/mcp/tool-defs.ctx +2 -0
- package/src/mcp/tool-defs.js +1 -1
- package/src/mcp/tools.ctx +13 -0
- package/src/mcp/tools.js +1 -1
- package/src/network/backend-lifecycle.ctx +10 -0
- package/src/network/backend-lifecycle.js +1 -1
- package/src/network/backend.ctx +5 -0
- package/src/network/backend.js +1 -1
- package/src/network/local-gateway.ctx +9 -0
- package/src/network/local-gateway.js +1 -1
- package/src/network/mdns.ctx +6 -0
- package/src/network/mdns.js +1 -1
- package/src/network/server.ctx +2 -0
- package/src/network/server.js +2 -2
- package/src/network/web-server.ctx +17 -0
- package/src/network/web-server.js +2 -2
- package/web/follow-controller.js +94 -25
- package/web/panels/dep-graph.js +207 -21
- package/project-graph-mcp-2.3.0.tgz +0 -0
- package/vendor/symbiote-node/CHANGELOG.md +0 -31
- package/vendor/symbiote-node/LICENSE +0 -21
- package/vendor/symbiote-node/README.md +0 -206
- package/vendor/symbiote-node/canvas/AutoLayout.js +0 -725
- package/vendor/symbiote-node/canvas/Breadcrumb/Breadcrumb.css.js +0 -73
- package/vendor/symbiote-node/canvas/Breadcrumb/Breadcrumb.js +0 -93
- package/vendor/symbiote-node/canvas/Breadcrumb/Breadcrumb.tpl.js +0 -9
- package/vendor/symbiote-node/canvas/CanvasConnectionRenderer.js +0 -962
- package/vendor/symbiote-node/canvas/ConnectionRenderer.js +0 -1468
- package/vendor/symbiote-node/canvas/FlowSimulator.js +0 -323
- package/vendor/symbiote-node/canvas/ForceLayout.js +0 -189
- package/vendor/symbiote-node/canvas/ForceWorker.js +0 -1325
- package/vendor/symbiote-node/canvas/GraphTabs/GraphTabs.css.js +0 -97
- package/vendor/symbiote-node/canvas/GraphTabs/GraphTabs.js +0 -176
- package/vendor/symbiote-node/canvas/GraphTabs/GraphTabs.tpl.js +0 -12
- package/vendor/symbiote-node/canvas/LODManager.js +0 -88
- package/vendor/symbiote-node/canvas/Minimap/Minimap.css.js +0 -71
- package/vendor/symbiote-node/canvas/Minimap/Minimap.js +0 -207
- package/vendor/symbiote-node/canvas/Minimap/Minimap.tpl.js +0 -9
- package/vendor/symbiote-node/canvas/NodeCanvas/NodeCanvas.css.js +0 -261
- package/vendor/symbiote-node/canvas/NodeCanvas/NodeCanvas.js +0 -1840
- package/vendor/symbiote-node/canvas/NodeCanvas/NodeCanvas.tpl.js +0 -22
- package/vendor/symbiote-node/canvas/NodeSearch/NodeSearch.css.js +0 -97
- package/vendor/symbiote-node/canvas/NodeSearch/NodeSearch.js +0 -132
- package/vendor/symbiote-node/canvas/NodeSearch/NodeSearch.tpl.js +0 -21
- package/vendor/symbiote-node/canvas/NodeViewManager.js +0 -584
- package/vendor/symbiote-node/canvas/PinExpansion.js +0 -131
- package/vendor/symbiote-node/canvas/PseudoConnection.js +0 -80
- package/vendor/symbiote-node/canvas/SubgraphManager.js +0 -201
- package/vendor/symbiote-node/canvas/SubgraphRouter.js +0 -443
- package/vendor/symbiote-node/canvas/ViewportActions.js +0 -446
- package/vendor/symbiote-node/core/Connection.js +0 -45
- package/vendor/symbiote-node/core/Editor.js +0 -451
- package/vendor/symbiote-node/core/Frame.js +0 -31
- package/vendor/symbiote-node/core/GraphMermaid.js +0 -348
- package/vendor/symbiote-node/core/GraphText.js +0 -210
- package/vendor/symbiote-node/core/Node.js +0 -143
- package/vendor/symbiote-node/core/Portal.js +0 -104
- package/vendor/symbiote-node/core/Socket.js +0 -185
- package/vendor/symbiote-node/core/SubgraphNode.js +0 -125
- package/vendor/symbiote-node/engine/AgentUICommands.js +0 -100
- package/vendor/symbiote-node/engine/Executor.js +0 -371
- package/vendor/symbiote-node/engine/Graph.js +0 -314
- package/vendor/symbiote-node/engine/GraphServer.js +0 -353
- package/vendor/symbiote-node/engine/HandlerLoader.js +0 -145
- package/vendor/symbiote-node/engine/History.js +0 -83
- package/vendor/symbiote-node/engine/Lifecycle.js +0 -118
- package/vendor/symbiote-node/engine/Persistence.js +0 -84
- package/vendor/symbiote-node/engine/Registry.js +0 -264
- package/vendor/symbiote-node/engine/SocketTypes.js +0 -79
- package/vendor/symbiote-node/engine/cli.js +0 -404
- package/vendor/symbiote-node/engine/index.js +0 -56
- package/vendor/symbiote-node/engine/nanoid.js +0 -28
- package/vendor/symbiote-node/engine/package.json +0 -26
- package/vendor/symbiote-node/engine/packs/ai/beat-detect.handler.js +0 -215
- package/vendor/symbiote-node/engine/packs/ai/content-adapt.handler.js +0 -238
- package/vendor/symbiote-node/engine/packs/ai/face-detect.handler.js +0 -287
- package/vendor/symbiote-node/engine/packs/ai/grok-generate.handler.js +0 -565
- package/vendor/symbiote-node/engine/packs/ai/kling-lipsync.handler.js +0 -414
- package/vendor/symbiote-node/engine/packs/ai/lesson-generate.handler.js +0 -343
- package/vendor/symbiote-node/engine/packs/ai/opencode.handler.js +0 -164
- package/vendor/symbiote-node/engine/packs/ai/replicate-lipsync.handler.js +0 -341
- package/vendor/symbiote-node/engine/packs/ai/tts.handler.js +0 -241
- package/vendor/symbiote-node/engine/packs/ai/whisper.handler.js +0 -191
- package/vendor/symbiote-node/engine/packs/data/db-query.handler.js +0 -67
- package/vendor/symbiote-node/engine/packs/data/news-accumulate.handler.js +0 -281
- package/vendor/symbiote-node/engine/packs/data/personas.handler.js +0 -160
- package/vendor/symbiote-node/engine/packs/data/prompt-loader.handler.js +0 -193
- package/vendor/symbiote-node/engine/packs/data/roles.handler.js +0 -216
- package/vendor/symbiote-node/engine/packs/data/rss-feed.handler.js +0 -244
- package/vendor/symbiote-node/engine/packs/debug/inject.handler.js +0 -52
- package/vendor/symbiote-node/engine/packs/flow/agent.handler.js +0 -73
- package/vendor/symbiote-node/engine/packs/flow/if.handler.js +0 -107
- package/vendor/symbiote-node/engine/packs/flow/loop.handler.js +0 -58
- package/vendor/symbiote-node/engine/packs/flow/merge.handler.js +0 -60
- package/vendor/symbiote-node/engine/packs/flow/retry.handler.js +0 -65
- package/vendor/symbiote-node/engine/packs/flow/switch.handler.js +0 -64
- package/vendor/symbiote-node/engine/packs/flow/wait-all.handler.js +0 -39
- package/vendor/symbiote-node/engine/packs/io/http-request.handler.js +0 -82
- package/vendor/symbiote-node/engine/packs/io/read-file.handler.js +0 -60
- package/vendor/symbiote-node/engine/packs/io/write-file.handler.js +0 -63
- package/vendor/symbiote-node/engine/packs/transform/anchor-match.handler.js +0 -494
- package/vendor/symbiote-node/engine/packs/transform/effects-skeleton.handler.js +0 -417
- package/vendor/symbiote-node/engine/packs/transform/json-parse.handler.js +0 -43
- package/vendor/symbiote-node/engine/packs/transform/lipsync-select.handler.js +0 -339
- package/vendor/symbiote-node/engine/packs/transform/riopla-adapt.handler.js +0 -432
- package/vendor/symbiote-node/engine/packs/transform/set.handler.js +0 -57
- package/vendor/symbiote-node/engine/packs/transform/template-builder.handler.js +0 -134
- package/vendor/symbiote-node/engine/packs/transform/template.handler.js +0 -79
- package/vendor/symbiote-node/engine/packs/transform/timeline-build.handler.js +0 -399
- package/vendor/symbiote-node/engine/packs/util/delay.handler.js +0 -39
- package/vendor/symbiote-node/engine/packs/util/log.handler.js +0 -44
- package/vendor/symbiote-node/engine/packs/video-pack.js +0 -323
- package/vendor/symbiote-node/index.js +0 -103
- package/vendor/symbiote-node/inspector/InspectorPanel/InspectorPanel.css.js +0 -361
- package/vendor/symbiote-node/inspector/InspectorPanel/InspectorPanel.js +0 -332
- package/vendor/symbiote-node/inspector/InspectorPanel/InspectorPanel.tpl.js +0 -96
- package/vendor/symbiote-node/inspector/TemplatePreview/TemplatePreview.css.js +0 -104
- package/vendor/symbiote-node/inspector/TemplatePreview/TemplatePreview.js +0 -133
- package/vendor/symbiote-node/inspector/TemplatePreview/TemplatePreview.tpl.js +0 -33
- package/vendor/symbiote-node/interactions/ConnectFlow.js +0 -307
- package/vendor/symbiote-node/interactions/Drag.js +0 -102
- package/vendor/symbiote-node/interactions/Selector.js +0 -132
- package/vendor/symbiote-node/interactions/SnapGrid.js +0 -65
- package/vendor/symbiote-node/interactions/Zoom.js +0 -140
- package/vendor/symbiote-node/layout/ActionZone/ActionZone.css.js +0 -88
- package/vendor/symbiote-node/layout/ActionZone/ActionZone.js +0 -254
- package/vendor/symbiote-node/layout/ActionZone/ActionZone.tpl.js +0 -11
- package/vendor/symbiote-node/layout/Layout/Layout.css.js +0 -88
- package/vendor/symbiote-node/layout/Layout/Layout.js +0 -622
- package/vendor/symbiote-node/layout/Layout/Layout.tpl.js +0 -25
- package/vendor/symbiote-node/layout/LayoutNode/LayoutNode.css.js +0 -293
- package/vendor/symbiote-node/layout/LayoutNode/LayoutNode.js +0 -467
- package/vendor/symbiote-node/layout/LayoutNode/LayoutNode.tpl.js +0 -33
- package/vendor/symbiote-node/layout/LayoutPreview/LayoutPreview.css.js +0 -46
- package/vendor/symbiote-node/layout/LayoutPreview/LayoutPreview.js +0 -102
- package/vendor/symbiote-node/layout/LayoutPreview/LayoutPreview.tpl.js +0 -6
- package/vendor/symbiote-node/layout/LayoutRouter/LayoutRouter.js +0 -156
- package/vendor/symbiote-node/layout/LayoutRouter/routerSync.js +0 -250
- package/vendor/symbiote-node/layout/LayoutSidebar/LayoutSidebar.css.js +0 -379
- package/vendor/symbiote-node/layout/LayoutSidebar/LayoutSidebar.js +0 -263
- package/vendor/symbiote-node/layout/LayoutSidebar/LayoutSidebar.tpl.js +0 -20
- package/vendor/symbiote-node/layout/LayoutSidebar/SidebarSection.js +0 -183
- package/vendor/symbiote-node/layout/LayoutTree.js +0 -246
- package/vendor/symbiote-node/layout/PanelMenu/PanelMenu.css.js +0 -43
- package/vendor/symbiote-node/layout/PanelMenu/PanelMenu.js +0 -89
- package/vendor/symbiote-node/layout/PanelMenu/PanelMenu.tpl.js +0 -14
- package/vendor/symbiote-node/layout/index.js +0 -16
- package/vendor/symbiote-node/menu/ContextMenu/ContextMenu.css.js +0 -61
- package/vendor/symbiote-node/menu/ContextMenu/ContextMenu.js +0 -79
- package/vendor/symbiote-node/menu/ContextMenu/ContextMenu.tpl.js +0 -19
- package/vendor/symbiote-node/node/CtrlItem/CtrlItem.css.js +0 -41
- package/vendor/symbiote-node/node/CtrlItem/CtrlItem.js +0 -24
- package/vendor/symbiote-node/node/CtrlItem/CtrlItem.tpl.js +0 -16
- package/vendor/symbiote-node/node/GraphFrame/GraphFrame.css.js +0 -65
- package/vendor/symbiote-node/node/GraphFrame/GraphFrame.js +0 -29
- package/vendor/symbiote-node/node/GraphFrame/GraphFrame.tpl.js +0 -13
- package/vendor/symbiote-node/node/GraphNode/GraphNode.css.js +0 -683
- package/vendor/symbiote-node/node/GraphNode/GraphNode.js +0 -92
- package/vendor/symbiote-node/node/GraphNode/GraphNode.tpl.js +0 -17
- package/vendor/symbiote-node/node/NodeSocket/NodeSocket.js +0 -25
- package/vendor/symbiote-node/node/NodeSocket/NodeSocket.tpl.js +0 -7
- package/vendor/symbiote-node/node/PortItem/PortItem.css.js +0 -90
- package/vendor/symbiote-node/node/PortItem/PortItem.js +0 -87
- package/vendor/symbiote-node/node/PortItem/PortItem.tpl.js +0 -10
- package/vendor/symbiote-node/package.json +0 -59
- package/vendor/symbiote-node/palette/PaletteBrowser/PaletteBrowser.css.js +0 -143
- package/vendor/symbiote-node/palette/PaletteBrowser/PaletteBrowser.js +0 -131
- package/vendor/symbiote-node/palette/PaletteBrowser/PaletteBrowser.tpl.js +0 -16
- package/vendor/symbiote-node/plugins/History.js +0 -384
- package/vendor/symbiote-node/plugins/Readonly.js +0 -59
- package/vendor/symbiote-node/shapes/CircleShape.js +0 -80
- package/vendor/symbiote-node/shapes/CommentShape.js +0 -35
- package/vendor/symbiote-node/shapes/DiamondShape.js +0 -115
- package/vendor/symbiote-node/shapes/NodeShape.js +0 -80
- package/vendor/symbiote-node/shapes/PillShape.js +0 -91
- package/vendor/symbiote-node/shapes/RectShape.js +0 -72
- package/vendor/symbiote-node/shapes/SVGShape.js +0 -494
- package/vendor/symbiote-node/shapes/index.js +0 -53
- package/vendor/symbiote-node/themes/Palette.js +0 -32
- package/vendor/symbiote-node/themes/Skin.js +0 -113
- package/vendor/symbiote-node/themes/Theme.js +0 -84
- package/vendor/symbiote-node/themes/carbon.js +0 -137
- package/vendor/symbiote-node/themes/dark.js +0 -137
- package/vendor/symbiote-node/themes/ebook.js +0 -138
- package/vendor/symbiote-node/themes/grey.js +0 -137
- package/vendor/symbiote-node/themes/light.js +0 -137
- package/vendor/symbiote-node/themes/neon.js +0 -138
- package/vendor/symbiote-node/themes/pcb.js +0 -273
- package/vendor/symbiote-node/themes/synthwave.js +0 -137
- package/vendor/symbiote-node/toolbar/QuickToolbar/QuickToolbar.css.js +0 -86
- package/vendor/symbiote-node/toolbar/QuickToolbar/QuickToolbar.js +0 -128
- package/vendor/symbiote-node/toolbar/QuickToolbar/QuickToolbar.tpl.js +0 -29
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* GraphNode — visual node card component
|
|
3
|
-
*
|
|
4
|
-
* Renders node header, input/output ports with sockets,
|
|
5
|
-
* and embedded controls. Receives data via _nodeData property.
|
|
6
|
-
*
|
|
7
|
-
* @module symbiote-node/components/GraphNode
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
import Symbiote from '@symbiotejs/symbiote';
|
|
11
|
-
import { template } from './GraphNode.tpl.js';
|
|
12
|
-
import { styles } from './GraphNode.css.js';
|
|
13
|
-
import '../PortItem/PortItem.js';
|
|
14
|
-
import '../CtrlItem/CtrlItem.js';
|
|
15
|
-
|
|
16
|
-
/** @type {Object<string, string>} */
|
|
17
|
-
const CATEGORY_ICONS = {
|
|
18
|
-
server: 'dns',
|
|
19
|
-
instance: 'memory',
|
|
20
|
-
control: 'tune',
|
|
21
|
-
data: 'database',
|
|
22
|
-
// Codebase-specific
|
|
23
|
-
directory: 'folder',
|
|
24
|
-
file: 'description',
|
|
25
|
-
function: 'functions',
|
|
26
|
-
class: 'class',
|
|
27
|
-
module: 'package_2',
|
|
28
|
-
default: 'radio_button_checked',
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
export class GraphNode extends Symbiote {
|
|
32
|
-
destructionDelay = 200;
|
|
33
|
-
|
|
34
|
-
init$ = {
|
|
35
|
-
'@node-label': '',
|
|
36
|
-
'@node-category': 'default',
|
|
37
|
-
nodeLabel: '',
|
|
38
|
-
nodeIcon: 'radio_button_checked',
|
|
39
|
-
inputPorts: [],
|
|
40
|
-
outputPorts: [],
|
|
41
|
-
controlsList: [],
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
renderCallback() {
|
|
45
|
-
this.sub('@node-label', (val) => {
|
|
46
|
-
this.$.nodeLabel = val || '';
|
|
47
|
-
});
|
|
48
|
-
this.sub('@node-category', (val) => {
|
|
49
|
-
this.$.nodeIcon = CATEGORY_ICONS[val] || CATEGORY_ICONS.default;
|
|
50
|
-
});
|
|
51
|
-
|
|
52
|
-
// Populate ports from node data
|
|
53
|
-
if (this._nodeData) {
|
|
54
|
-
this.#populateFromNodeData(this._nodeData);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
/**
|
|
59
|
-
* Populate ports and controls from Node instance
|
|
60
|
-
* @param {import('../core/Node.js').Node} node
|
|
61
|
-
*/
|
|
62
|
-
#populateFromNodeData(node) {
|
|
63
|
-
this.set$({
|
|
64
|
-
inputPorts: Object.entries(node.inputs).map(([key, input]) => ({
|
|
65
|
-
key,
|
|
66
|
-
label: input.label || key,
|
|
67
|
-
socketColor: input.socket?.color || 'var(--sn-node-accent)',
|
|
68
|
-
socketName: input.socket?.name || 'any',
|
|
69
|
-
side: 'input',
|
|
70
|
-
})),
|
|
71
|
-
outputPorts: Object.entries(node.outputs).map(([key, output]) => ({
|
|
72
|
-
key,
|
|
73
|
-
label: output.label || key,
|
|
74
|
-
socketColor: output.socket?.color || 'var(--sn-node-accent)',
|
|
75
|
-
socketName: output.socket?.name || 'any',
|
|
76
|
-
side: 'output',
|
|
77
|
-
})),
|
|
78
|
-
controlsList: Object.entries(node.controls).map(([key, ctrl]) => ({
|
|
79
|
-
key,
|
|
80
|
-
label: key,
|
|
81
|
-
inputType: ctrl.type || 'text',
|
|
82
|
-
value: ctrl.value !== undefined ? String(ctrl.value) : '',
|
|
83
|
-
isReadonly: ctrl.readonly || false,
|
|
84
|
-
})),
|
|
85
|
-
});
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
GraphNode.template = template;
|
|
90
|
-
GraphNode.rootStyles = styles;
|
|
91
|
-
|
|
92
|
-
GraphNode.reg('graph-node');
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { html } from '@symbiotejs/symbiote';
|
|
2
|
-
|
|
3
|
-
export const template = html`
|
|
4
|
-
<div class="sn-node-header">
|
|
5
|
-
<span class="sn-node-icon material-symbols-outlined">{{nodeIcon}}</span>
|
|
6
|
-
<span class="sn-node-label">{{nodeLabel}}</span>
|
|
7
|
-
</div>
|
|
8
|
-
<div class="sn-node-body">
|
|
9
|
-
<div class="inputs" ${{ itemize: 'inputPorts', 'item-tag': 'port-item' }}>
|
|
10
|
-
</div>
|
|
11
|
-
<div class="controls" ${{ itemize: 'controlsList', 'item-tag': 'ctrl-item' }}>
|
|
12
|
-
</div>
|
|
13
|
-
<div class="outputs" ${{ itemize: 'outputPorts', 'item-tag': 'port-item' }}>
|
|
14
|
-
</div>
|
|
15
|
-
</div>
|
|
16
|
-
<div ref="previewArea" class="sn-preview" hidden></div>
|
|
17
|
-
`;
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* NodeSocket — connection endpoint circle
|
|
3
|
-
*
|
|
4
|
-
* Visual socket indicator for node ports.
|
|
5
|
-
* Changes color via socket data attribute.
|
|
6
|
-
*
|
|
7
|
-
* @module symbiote-node/components/NodeSocket
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
import Symbiote from '@symbiotejs/symbiote';
|
|
11
|
-
import { template } from './NodeSocket.tpl.js';
|
|
12
|
-
|
|
13
|
-
export class NodeSocket extends Symbiote {
|
|
14
|
-
|
|
15
|
-
renderCallback() {
|
|
16
|
-
this.sub('@data-socket-color', (val) => {
|
|
17
|
-
if (val) {
|
|
18
|
-
this.style.setProperty('--socket-color', val);
|
|
19
|
-
}
|
|
20
|
-
});
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
NodeSocket.template = template;
|
|
25
|
-
NodeSocket.reg('node-socket');
|
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* PortItem styles
|
|
3
|
-
* @module symbiote-node/node/PortItem.css
|
|
4
|
-
*/
|
|
5
|
-
import { css } from '@symbiotejs/symbiote';
|
|
6
|
-
|
|
7
|
-
export const styles = css`
|
|
8
|
-
port-item {
|
|
9
|
-
display: flex;
|
|
10
|
-
align-items: center;
|
|
11
|
-
gap: 6px;
|
|
12
|
-
padding: 3px 12px;
|
|
13
|
-
min-height: 28px;
|
|
14
|
-
|
|
15
|
-
&[data-side="input"] {
|
|
16
|
-
flex-direction: row;
|
|
17
|
-
|
|
18
|
-
& .sn-socket {
|
|
19
|
-
margin-left: -22px;
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
&[data-side="output"] {
|
|
24
|
-
flex-direction: row-reverse;
|
|
25
|
-
|
|
26
|
-
& .sn-socket {
|
|
27
|
-
margin-right: -22px;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
& .sn-socket {
|
|
32
|
-
position: relative;
|
|
33
|
-
width: 20px;
|
|
34
|
-
height: 20px;
|
|
35
|
-
border-radius: 50%;
|
|
36
|
-
background: transparent;
|
|
37
|
-
cursor: crosshair;
|
|
38
|
-
flex-shrink: 0;
|
|
39
|
-
z-index: 10;
|
|
40
|
-
display: flex;
|
|
41
|
-
align-items: center;
|
|
42
|
-
justify-content: center;
|
|
43
|
-
|
|
44
|
-
&::after {
|
|
45
|
-
content: '';
|
|
46
|
-
width: 12px;
|
|
47
|
-
height: 12px;
|
|
48
|
-
border-radius: 50%;
|
|
49
|
-
background: var(--socket-color, var(--sn-node-accent, #4a9eff));
|
|
50
|
-
border: 2px solid var(--sn-node-bg, #16213e);
|
|
51
|
-
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
|
|
52
|
-
pointer-events: none;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
&[data-socket-shape="square"]::after {
|
|
56
|
-
border-radius: 2px;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
&[data-socket-shape="diamond"]::after {
|
|
60
|
-
border-radius: 1px;
|
|
61
|
-
transform: rotate(45deg) scale(0.85);
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
&[data-socket-shape="diamond"]:hover::after {
|
|
65
|
-
transform: rotate(45deg) scale(1.1);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
&[data-socket-shape="triangle"]::after {
|
|
69
|
-
border-radius: 0;
|
|
70
|
-
background: transparent;
|
|
71
|
-
width: 0;
|
|
72
|
-
height: 0;
|
|
73
|
-
border: 6px solid transparent;
|
|
74
|
-
border-left: 10px solid var(--socket-color, var(--sn-node-accent));
|
|
75
|
-
border-right: none;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
&:hover::after {
|
|
79
|
-
transform: scale(1.3);
|
|
80
|
-
box-shadow: 0 0 8px var(--socket-color, var(--sn-node-accent));
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
& .port-label {
|
|
85
|
-
color: var(--sn-text-dim, #94a3b8);
|
|
86
|
-
font-size: 12px;
|
|
87
|
-
white-space: nowrap;
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
`;
|
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* PortItem — itemize item for node ports (input/output)
|
|
3
|
-
*
|
|
4
|
-
* Rendered by GraphNode via itemize API.
|
|
5
|
-
* Registers socket with ConnectFlow for interactive connecting.
|
|
6
|
-
*
|
|
7
|
-
* @module symbiote-node/components/PortItem
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
import Symbiote from '@symbiotejs/symbiote';
|
|
11
|
-
import { template } from './PortItem.tpl.js';
|
|
12
|
-
import { styles } from './PortItem.css.js';
|
|
13
|
-
|
|
14
|
-
export class PortItem extends Symbiote {
|
|
15
|
-
key = '';
|
|
16
|
-
label = '';
|
|
17
|
-
socketColor = '';
|
|
18
|
-
socketName = 'any';
|
|
19
|
-
side = 'input';
|
|
20
|
-
|
|
21
|
-
renderCallback() {
|
|
22
|
-
this.sub('socketColor', (val) => {
|
|
23
|
-
if (val) this.style.setProperty('--socket-color', val);
|
|
24
|
-
});
|
|
25
|
-
this.sub('side', (val) => {
|
|
26
|
-
if (val) this.setAttribute('data-side', val);
|
|
27
|
-
});
|
|
28
|
-
this.sub('socketName', (val) => {
|
|
29
|
-
const shape = PortItem.SOCKET_SHAPES[val] || 'circle';
|
|
30
|
-
const socketEl = this.ref.socket;
|
|
31
|
-
if (socketEl) socketEl.setAttribute('data-socket-shape', shape);
|
|
32
|
-
});
|
|
33
|
-
|
|
34
|
-
// Deferred socket registration — _canvas may not be set yet
|
|
35
|
-
this.#deferRegisterSocket(0);
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
/**
|
|
39
|
-
* Retry registration until graph-node._canvas is available
|
|
40
|
-
* @param {number} attempt
|
|
41
|
-
*/
|
|
42
|
-
#deferRegisterSocket(attempt) {
|
|
43
|
-
if (attempt > 10) return;
|
|
44
|
-
|
|
45
|
-
const socketEl = this.ref.socket;
|
|
46
|
-
if (!socketEl) return;
|
|
47
|
-
|
|
48
|
-
const graphNode = this.closest('graph-node');
|
|
49
|
-
if (!graphNode || !graphNode._canvas) {
|
|
50
|
-
requestAnimationFrame(() => this.#deferRegisterSocket(attempt + 1));
|
|
51
|
-
return;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
const connectFlow = graphNode._canvas.getConnectFlow();
|
|
55
|
-
if (!connectFlow) return;
|
|
56
|
-
|
|
57
|
-
const nodeId = graphNode.getAttribute('node-id');
|
|
58
|
-
const key = this.$.key;
|
|
59
|
-
const side = this.$.side;
|
|
60
|
-
|
|
61
|
-
/** @type {import('../interactions/ConnectFlow.js').SocketData} */
|
|
62
|
-
const socketData = { nodeId, key, side, element: socketEl };
|
|
63
|
-
socketEl._socketData = socketData;
|
|
64
|
-
|
|
65
|
-
connectFlow.registerSocket(socketEl, socketData);
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
PortItem.template = template;
|
|
70
|
-
PortItem.rootStyles = styles;
|
|
71
|
-
PortItem.reg('port-item');
|
|
72
|
-
|
|
73
|
-
/** @type {Object<string, string>} - Socket type name to visual shape */
|
|
74
|
-
PortItem.SOCKET_SHAPES = {
|
|
75
|
-
number: 'circle',
|
|
76
|
-
string: 'circle',
|
|
77
|
-
boolean: 'circle',
|
|
78
|
-
any: 'circle',
|
|
79
|
-
array: 'square',
|
|
80
|
-
object: 'square',
|
|
81
|
-
json: 'square',
|
|
82
|
-
exec: 'diamond',
|
|
83
|
-
execution: 'diamond',
|
|
84
|
-
trigger: 'diamond',
|
|
85
|
-
event: 'triangle',
|
|
86
|
-
signal: 'triangle',
|
|
87
|
-
};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* PortItem template
|
|
3
|
-
* @module symbiote-node/node/PortItem.tpl
|
|
4
|
-
*/
|
|
5
|
-
import { html } from '@symbiotejs/symbiote';
|
|
6
|
-
|
|
7
|
-
export const template = html`
|
|
8
|
-
<div ref="socket" class="sn-socket" ${{ '@data-key': 'key' }}></div>
|
|
9
|
-
<span class="port-label">{{label}}</span>
|
|
10
|
-
`;
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "symbiote-node",
|
|
3
|
-
"version": "0.3.0-alpha.1",
|
|
4
|
-
"type": "module",
|
|
5
|
-
"description": "Visual Node Graph Editor + Execution Engine — extensible, themeable graph editor and runtime built on Symbiote.js",
|
|
6
|
-
"main": "index.js",
|
|
7
|
-
"exports": {
|
|
8
|
-
".": "./index.js",
|
|
9
|
-
"./engine": "./engine/index.js",
|
|
10
|
-
"./engine/*": "./engine/*",
|
|
11
|
-
"./themes/*": "./themes/*",
|
|
12
|
-
"./canvas/*": "./canvas/*",
|
|
13
|
-
"./layout/*": "./layout/*",
|
|
14
|
-
"./interactions/*": "./interactions/*",
|
|
15
|
-
"./node/*": "./node/*",
|
|
16
|
-
"./shapes/*": "./shapes/*",
|
|
17
|
-
"./plugins/*": "./plugins/*"
|
|
18
|
-
},
|
|
19
|
-
"publishConfig": {
|
|
20
|
-
"access": "public"
|
|
21
|
-
},
|
|
22
|
-
"scripts": {
|
|
23
|
-
"test": "node --test tests/*.test.js",
|
|
24
|
-
"demo": "npx -y serve -l 3000 .",
|
|
25
|
-
"release:alpha": "npm version prerelease --preid=alpha && npm publish --tag alpha",
|
|
26
|
-
"release:minor": "npm version minor && npm publish",
|
|
27
|
-
"release:patch": "npm version patch && npm publish"
|
|
28
|
-
},
|
|
29
|
-
"keywords": [
|
|
30
|
-
"node-editor",
|
|
31
|
-
"graph-editor",
|
|
32
|
-
"visual-programming",
|
|
33
|
-
"node-graph",
|
|
34
|
-
"symbiote",
|
|
35
|
-
"web-components",
|
|
36
|
-
"data-flow",
|
|
37
|
-
"dag",
|
|
38
|
-
"workflow-engine",
|
|
39
|
-
"execution-engine"
|
|
40
|
-
],
|
|
41
|
-
"peerDependencies": {
|
|
42
|
-
"@symbiotejs/symbiote": ">=3.0.0",
|
|
43
|
-
"ws": ">=8.0.0"
|
|
44
|
-
},
|
|
45
|
-
"peerDependenciesMeta": {
|
|
46
|
-
"ws": {
|
|
47
|
-
"optional": true
|
|
48
|
-
}
|
|
49
|
-
},
|
|
50
|
-
"repository": {
|
|
51
|
-
"type": "git",
|
|
52
|
-
"url": "https://github.com/RND-PRO/symbiote-node"
|
|
53
|
-
},
|
|
54
|
-
"author": "RND-PRO <nicothin@gmail.com>",
|
|
55
|
-
"license": "MIT",
|
|
56
|
-
"engines": {
|
|
57
|
-
"node": ">=18.0.0"
|
|
58
|
-
}
|
|
59
|
-
}
|
|
@@ -1,143 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* PaletteBrowser styles
|
|
3
|
-
* @module symbiote-node/palette/PaletteBrowser.css
|
|
4
|
-
*/
|
|
5
|
-
import { css } from '@symbiotejs/symbiote';
|
|
6
|
-
|
|
7
|
-
export const styles = css`
|
|
8
|
-
palette-browser {
|
|
9
|
-
display: flex;
|
|
10
|
-
flex-direction: column;
|
|
11
|
-
width: 260px;
|
|
12
|
-
height: 100%;
|
|
13
|
-
background: var(--sn-ctx-bg, #1e1e2e);
|
|
14
|
-
border-left: 1px solid var(--sn-node-border, rgba(255, 255, 255, 0.08));
|
|
15
|
-
font-family: var(--sn-font, 'Inter', sans-serif);
|
|
16
|
-
font-size: 13px;
|
|
17
|
-
color: var(--sn-text, #cdd6f4);
|
|
18
|
-
overflow: hidden;
|
|
19
|
-
user-select: none;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.pal-header {
|
|
23
|
-
padding: 10px 14px;
|
|
24
|
-
font-weight: 600;
|
|
25
|
-
font-size: 12px;
|
|
26
|
-
text-transform: uppercase;
|
|
27
|
-
letter-spacing: 0.04em;
|
|
28
|
-
color: var(--sn-text-dim, #a0a0a0);
|
|
29
|
-
border-bottom: 1px solid var(--sn-node-border, rgba(255, 255, 255, 0.08));
|
|
30
|
-
display: flex;
|
|
31
|
-
align-items: center;
|
|
32
|
-
gap: 6px;
|
|
33
|
-
|
|
34
|
-
& .material-symbols-outlined {
|
|
35
|
-
font-size: 16px;
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.pal-search {
|
|
40
|
-
padding: 8px 12px;
|
|
41
|
-
border-bottom: 1px solid var(--sn-node-border, rgba(255, 255, 255, 0.06));
|
|
42
|
-
|
|
43
|
-
& input {
|
|
44
|
-
width: 100%;
|
|
45
|
-
padding: 6px 10px;
|
|
46
|
-
background: rgba(0, 0, 0, 0.25);
|
|
47
|
-
border: 1px solid var(--sn-node-border, rgba(255, 255, 255, 0.08));
|
|
48
|
-
border-radius: 4px;
|
|
49
|
-
color: var(--sn-text, #cdd6f4);
|
|
50
|
-
font-family: inherit;
|
|
51
|
-
font-size: 12px;
|
|
52
|
-
outline: none;
|
|
53
|
-
transition: border-color 0.2s ease-out;
|
|
54
|
-
|
|
55
|
-
&:focus {
|
|
56
|
-
border-color: var(--sn-node-selected, #4a9eff);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
&::placeholder {
|
|
60
|
-
color: var(--sn-text-dim, #a0a0a0);
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.pal-list {
|
|
66
|
-
flex: 1;
|
|
67
|
-
overflow-y: auto;
|
|
68
|
-
padding: 4px 0;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
pal-category {
|
|
72
|
-
& .pal-cat-header {
|
|
73
|
-
padding: 6px 14px;
|
|
74
|
-
font-size: 11px;
|
|
75
|
-
font-weight: 600;
|
|
76
|
-
color: var(--sn-text-dim, #a0a0a0);
|
|
77
|
-
text-transform: uppercase;
|
|
78
|
-
letter-spacing: 0.03em;
|
|
79
|
-
cursor: pointer;
|
|
80
|
-
display: flex;
|
|
81
|
-
align-items: center;
|
|
82
|
-
gap: 4px;
|
|
83
|
-
|
|
84
|
-
& .material-symbols-outlined {
|
|
85
|
-
font-size: 14px;
|
|
86
|
-
transition: transform 0.2s ease-out;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
&:hover {
|
|
90
|
-
color: var(--sn-text, #cdd6f4);
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
&[data-collapsed] .pal-cat-items {
|
|
95
|
-
display: none;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
&[data-collapsed] .pal-cat-header .material-symbols-outlined {
|
|
99
|
-
transform: rotate(-90deg);
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
pal-item {
|
|
104
|
-
padding: 6px 14px 6px 28px;
|
|
105
|
-
display: flex;
|
|
106
|
-
align-items: center;
|
|
107
|
-
gap: 8px;
|
|
108
|
-
cursor: grab;
|
|
109
|
-
border-radius: 4px;
|
|
110
|
-
margin: 1px 6px;
|
|
111
|
-
transition: background 0.15s ease-out;
|
|
112
|
-
|
|
113
|
-
&:hover {
|
|
114
|
-
background: var(--sn-ctx-hover, rgba(90, 159, 212, 0.12));
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
&:active {
|
|
118
|
-
cursor: grabbing;
|
|
119
|
-
background: var(--sn-ctx-hover, rgba(90, 159, 212, 0.2));
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
& .pal-item-icon {
|
|
123
|
-
font-size: 16px;
|
|
124
|
-
width: 20px;
|
|
125
|
-
text-align: center;
|
|
126
|
-
color: var(--item-color, var(--sn-text-dim, #a0a0a0));
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
& .pal-item-label {
|
|
130
|
-
flex: 1;
|
|
131
|
-
font-size: 12px;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
& .pal-item-desc {
|
|
135
|
-
font-size: 10px;
|
|
136
|
-
color: var(--sn-text-dim, #a0a0a0);
|
|
137
|
-
max-width: 100px;
|
|
138
|
-
overflow: hidden;
|
|
139
|
-
text-overflow: ellipsis;
|
|
140
|
-
white-space: nowrap;
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
`;
|
|
@@ -1,131 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* PaletteBrowser — Component library browser panel
|
|
3
|
-
*
|
|
4
|
-
* Displays categorized node types that can be dragged onto the canvas.
|
|
5
|
-
* Similar to TouchDesigner's Component Palette concept.
|
|
6
|
-
* Shows grouped node templates with icons, descriptions, and drag support.
|
|
7
|
-
*
|
|
8
|
-
* @module symbiote-node/palette/PaletteBrowser
|
|
9
|
-
*/
|
|
10
|
-
|
|
11
|
-
import Symbiote, { html } from '@symbiotejs/symbiote';
|
|
12
|
-
import { template } from './PaletteBrowser.tpl.js';
|
|
13
|
-
import { styles } from './PaletteBrowser.css.js';
|
|
14
|
-
|
|
15
|
-
class PalItem extends Symbiote {
|
|
16
|
-
init$ = {
|
|
17
|
-
name: '',
|
|
18
|
-
icon: 'radio_button_checked',
|
|
19
|
-
desc: '',
|
|
20
|
-
type: '',
|
|
21
|
-
color: '',
|
|
22
|
-
category: '',
|
|
23
|
-
isHeader: false,
|
|
24
|
-
};
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
PalItem.template = html`
|
|
28
|
-
<span class="pal-item-icon material-symbols-outlined" ${{ textContent: 'icon' }}></span>
|
|
29
|
-
<span class="pal-item-label" ${{ textContent: 'name' }}></span>
|
|
30
|
-
<span class="pal-item-desc" ${{ textContent: 'desc' }}></span>
|
|
31
|
-
`;
|
|
32
|
-
|
|
33
|
-
PalItem.reg('pal-item');
|
|
34
|
-
|
|
35
|
-
class PalCategory extends Symbiote {
|
|
36
|
-
init$ = {
|
|
37
|
-
category: '',
|
|
38
|
-
catItems: [],
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
onToggle() {
|
|
42
|
-
this.toggleAttribute('data-collapsed');
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
PalCategory.template = html`
|
|
47
|
-
<div class="pal-cat-header" ${{ onclick: 'onToggle' }}>
|
|
48
|
-
<span class="material-symbols-outlined">expand_more</span>
|
|
49
|
-
<span ${{ textContent: 'category' }}></span>
|
|
50
|
-
</div>
|
|
51
|
-
<div class="pal-cat-items" ${{ itemize: 'catItems', 'item-tag': 'pal-item' }}></div>
|
|
52
|
-
`;
|
|
53
|
-
|
|
54
|
-
PalCategory.reg('pal-category');
|
|
55
|
-
|
|
56
|
-
export class PaletteBrowser extends Symbiote {
|
|
57
|
-
|
|
58
|
-
init$ = {
|
|
59
|
-
categories: [],
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
/** @type {Array<{ category: string, color: string, items: Array<{ name: string, icon: string, type: string, desc: string, factory: function }> }>} */
|
|
63
|
-
#rawCategories = [];
|
|
64
|
-
|
|
65
|
-
/** @type {function|null} */
|
|
66
|
-
#onSelect = null;
|
|
67
|
-
|
|
68
|
-
/** @type {Map<string, function>} */
|
|
69
|
-
#factoryMap = new Map();
|
|
70
|
-
|
|
71
|
-
/**
|
|
72
|
-
* Register palette categories and items
|
|
73
|
-
* @param {Array<{ category: string, color: string, items: Array<{ name: string, icon: string, type: string, desc: string, factory: function }> }>} categories
|
|
74
|
-
*/
|
|
75
|
-
setCategories(categories) {
|
|
76
|
-
this.#rawCategories = categories;
|
|
77
|
-
this.#syncList();
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
/**
|
|
81
|
-
* Set callback for item selection
|
|
82
|
-
* @param {function} callback - (factory, name) => void
|
|
83
|
-
*/
|
|
84
|
-
onSelect(callback) {
|
|
85
|
-
this.#onSelect = callback;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
#syncList(filter = '') {
|
|
89
|
-
const lowerFilter = filter.toLowerCase();
|
|
90
|
-
this.#factoryMap.clear();
|
|
91
|
-
|
|
92
|
-
this.$.categories = this.#rawCategories
|
|
93
|
-
.map(cat => {
|
|
94
|
-
const filtered = lowerFilter
|
|
95
|
-
? cat.items.filter(it => it.name.toLowerCase().includes(lowerFilter) || it.desc.toLowerCase().includes(lowerFilter))
|
|
96
|
-
: cat.items;
|
|
97
|
-
|
|
98
|
-
if (filtered.length === 0) return null;
|
|
99
|
-
|
|
100
|
-
const catItems = filtered.map(it => {
|
|
101
|
-
this.#factoryMap.set(it.name, it.factory);
|
|
102
|
-
return {
|
|
103
|
-
name: it.name,
|
|
104
|
-
icon: it.icon,
|
|
105
|
-
desc: it.desc,
|
|
106
|
-
type: it.type,
|
|
107
|
-
color: cat.color,
|
|
108
|
-
};
|
|
109
|
-
});
|
|
110
|
-
|
|
111
|
-
return { category: cat.category, catItems };
|
|
112
|
-
})
|
|
113
|
-
.filter(Boolean);
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
onSearchInput(e) {
|
|
117
|
-
this.#syncList(e.target.value);
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
onItemClick(e) {
|
|
121
|
-
const item = e.target.closest('pal-item');
|
|
122
|
-
if (!item) return;
|
|
123
|
-
const name = item.$.name;
|
|
124
|
-
const factory = this.#factoryMap.get(name);
|
|
125
|
-
if (this.#onSelect && factory) this.#onSelect(factory, name);
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
PaletteBrowser.template = template;
|
|
130
|
-
PaletteBrowser.rootStyles = styles;
|
|
131
|
-
PaletteBrowser.reg('palette-browser');
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* PaletteBrowser template
|
|
3
|
-
* @module symbiote-node/palette/PaletteBrowser.tpl
|
|
4
|
-
*/
|
|
5
|
-
import { html } from '@symbiotejs/symbiote';
|
|
6
|
-
|
|
7
|
-
export const template = html`
|
|
8
|
-
<div class="pal-header">
|
|
9
|
-
<span class="material-symbols-outlined">widgets</span>
|
|
10
|
-
Components
|
|
11
|
-
</div>
|
|
12
|
-
<div class="pal-search">
|
|
13
|
-
<input ref="palSearch" type="text" placeholder="Search components..." ${{ oninput: 'onSearchInput' }} />
|
|
14
|
-
</div>
|
|
15
|
-
<div class="pal-list" ${{ itemize: 'categories', 'item-tag': 'pal-category', onclick: 'onItemClick' }}></div>
|
|
16
|
-
`;
|