JavaScript Visual Scripting

Settings

\r\n

Theme

\r\n \r\n

\r\n

Canvas

\r\n \r\n \r\n \r\n

\r\n

Code Generator

\r\n updateCodeGeneratorSettings('useStrict', !config.codeGenerator.useStrict)}\r\n label=\"Use Strict Mode\"\r\n />\r\n updateCodeGeneratorSettings('useSemicolons', !config.codeGenerator.useSemicolons)}\r\n label=\"Use Semicolons\"\r\n />\r\n updateCodeGeneratorSettings('useConst', !config.codeGenerator.useConst)}\r\n label=\"Use Const (instead of Let)\"\r\n />\r\n updateCodeGeneratorSettings('generateComments', !config.codeGenerator.generateComments)}\r\n label=\"Generate Comments\"\r\n />\r\n

\n \"{port.name}\"\n ({port.type})\n

\n {port.description && (\n

\n {port.description}\n

\n )}\n

\n);\n\nconst PropertyInput = ({ property, node, updateNodeProperty, isDarkTheme }) => {\n const renderArrayProperty = () => {\n if (property.name === 'parameters') {\n return renderParametersInput();\n }\n if (property.name === 'cases') {\n return renderCasesInput();\n }\n return null;\n };\n\n const renderParametersInput = () => (\n

\n {(node.properties.parameters || []).map((param, index) => (\n

\n updateParameter(index, 'name', e.target.value)}\n placeholder=\"Parameter name\"\n className={`${styles.input} ${isDarkTheme ? styles.inputDark : styles.inputLight}`}\n />\n updateParameter(index, 'type', e.target.value)}\n className={`${styles.typeSelect} ${isDarkTheme ? styles.inputDark : styles.inputLight}`}\n >\n {['string', 'number', 'boolean', 'object', 'array'].map(type => (\n \n ))}\n \n removeParameter(index)}\n className={`${styles.removeButton} ${isDarkTheme ? styles.removeButtonDark : styles.removeButtonLight}`}\n >\n \n \n

\n ))}\n \n Add Parameter\n \n

\n );\n\n const renderCasesInput = () => (\n

\n {(node.properties.cases || []).map((caseObj, index) => (\n

\n updateCase(index, 'type', e.target.value)}\n className={`${styles.typeSelect} ${isDarkTheme ? styles.inputDark : styles.inputLight}`}\n >\n {['string', 'number', 'boolean'].map(type => (\n \n ))}\n \n {caseObj.type === 'boolean' ? (\n updateCase(index, 'value', e.target.value)}\n className={`${styles.input} ${isDarkTheme ? styles.inputDark : styles.inputLight}`}\n >\n \n \n \n ) : (\n updateCase(index, 'value', e.target.value)}\n placeholder=\"Case value\"\n className={`${styles.input} ${isDarkTheme ? styles.inputDark : styles.inputLight}`}\n />\n )}\n removeCase(index)}\n className={`${styles.removeButton} ${isDarkTheme ? styles.removeButtonDark : styles.removeButtonLight}`}\n >\n \n \n

\n ))}\n \n Add Case\n \n

\n );\n\n const updateParameter = (index, field, value) => {\n const newParams = [...node.properties.parameters];\n newParams[index] = { ...newParams[index], [field]: value };\n updateNodeProperty('parameters', newParams);\n };\n\n const removeParameter = (index) => {\n const newParams = node.properties.parameters.filter((_, i) => i !== index);\n updateNodeProperty('parameters', newParams);\n };\n\n const addParameter = () => {\n const newParams = [\n ...(node.properties.parameters || []),\n { name: `param${(node.properties.parameters || []).length + 1}`, type: 'string' }\n ];\n updateNodeProperty('parameters', newParams);\n };\n\n const updateCase = (index, field, value) => {\n const newCases = [...node.properties.cases];\n newCases[index] = {\n ...newCases[index],\n [field]: value,\n value: field === 'type' && value === 'number' ?\n (isNaN(newCases[index].value) ? '0' : newCases[index].value) :\n String(newCases[index].value)\n };\n updateNodeProperty('cases', newCases);\n };\n\n const removeCase = (index) => {\n const newCases = node.properties.cases.filter((_, i) => i !== index);\n updateNodeProperty('cases', newCases);\n };\n\n const addCase = () => {\n const newCases = [\n ...(node.properties.cases || []),\n {\n value: '',\n type: 'string',\n output: `Case ${(node.properties.cases || []).length + 1}`\n }\n ];\n updateNodeProperty('cases', newCases);\n };\n\n switch (property.type) {\n case 'select':\n return (\n updateNodeProperty(property.name, e.target.value)}\n className={`${styles.input} ${isDarkTheme ? styles.inputDark : styles.inputLight}`}\n >\n {property.options.map(option => (\n \n ))}\n \n );\n case 'boolean':\n return (\n updateNodeProperty(property.name, e.target.checked)}\n className={`${styles.checkbox} ${isDarkTheme ? styles.checkboxDark : styles.checkboxLight}`}\n />\n );\n case 'array':\n return renderArrayProperty();\n default:\n return (\n updateNodeProperty(property.name, e.target.value)}\n className={`${styles.input} ${isDarkTheme ? styles.inputDark : styles.inputLight}`}\n />\n );\n }\n};\n\nconst GraphInspector = ({ selectedNodes, nodeTypes, updateNodeProperty, config }) => {\n if (selectedNodes.length === 0) {\n return (\n

\n No node selected\n

\n );\n }\n\n const node = selectedNodes[0];\n const nodeType = nodeTypes[node.type];\n\n return (\n

\n \n {node.type}\n

\n\n
\n
\n
Description
\n
{nodeType.description}
\n
\n\n
\n\n {nodeType.properties && nodeType.properties.length > 0 && (\n <>\n
\n
Properties
\n {nodeType.properties.map(prop => (\n prop.visible === undefined ||\n (typeof prop.visible === 'function' ? prop.visible(node.properties) : prop.visible)\n ) && (\n
\n {prop.name}\n \n
\n ))}\n
\n
\n \n )}\n\n
\n
Input Ports
\n {nodeType.inputs.map((input, index) => (\n \n ))}\n\n
\n
Output Ports
\n {nodeType.outputs.map((output, index) => (\n \n ))}\n
\n

\n );\n};\n\nexport default GraphInspector;","const PORT_CONSTANTS = {\r\n WIDTH: 6,\r\n HEIGHT: 10,\r\n OFFSET: 5,\r\n SCALE_MULTIPLIER: 1.5,\r\n VERTICAL_OFFSET: 2,\r\n BASE_Y: 35,\r\n SPACING: 14,\r\n TRIANGLE_WIDTH: 6,\r\n TRIANGLE_HEIGHT: 10\r\n};\r\n\r\nclass Node {\r\n constructor(id, type, x, y, nodeTypes) {\r\n this.id = id;\r\n this.type = type;\r\n this.x = x;\r\n this.y = y;\r\n this.properties = {};\r\n this.label = '';\r\n\r\n // Initialize properties with default values from nodeType\r\n const nodeType = nodeTypes[type];\r\n if (nodeType && nodeType.properties) {\r\n nodeType.properties.forEach(prop => {\r\n this.properties[prop.name] = prop.default;\r\n });\r\n }\r\n }\r\n\r\n static create(type, x, y, nodeTypes) {\r\n return new Node(Date.now(), type, x, y, nodeTypes);\r\n }\r\n\r\n static fromJSON(nodeData, nodeTypes) {\r\n const node = new Node(nodeData.id, nodeData.type, nodeData.x, nodeData.y, nodeTypes);\r\n node.properties = { ...nodeData.properties };\r\n node.label = nodeData.label || '';\r\n return node;\r\n }\r\n\r\n static createFromExample(exampleNode, nodeTypes) {\r\n // Special handling for Switch nodes with dynamic outputs\r\n if (exampleNode.type === 'Switch' && exampleNode.properties.cases) {\r\n Node.updateSwitchNodeType(exampleNode, nodeTypes);\r\n }\r\n return Node.fromJSON(exampleNode, nodeTypes);\r\n }\r\n\r\n static updateSwitchNodeType(node, nodeTypes) {\r\n const switchNode = nodeTypes['Switch'];\r\n const baseOutputs = [...switchNode.outputs];\r\n\r\n node.properties.cases.forEach((caseItem, index) => {\r\n baseOutputs.splice(index, 0, {\r\n type: 'control',\r\n name: caseItem.output,\r\n description: `Triggered when value matches ${caseItem.value}`\r\n });\r\n });\r\n\r\n nodeTypes['Switch'] = {\r\n ...switchNode,\r\n outputs: baseOutputs\r\n };\r\n }\r\n\r\n updateProperty(property, value) {\r\n this.properties[property] = value;\r\n return this;\r\n }\r\n\r\n clone(offset = { x: 20, y: 20 }) {\r\n const clonedNode = new Node(Date.now() + Math.random(), this.type, this.x + offset.x, this.y + offset.y);\r\n clonedNode.properties = { ...this.properties };\r\n return clonedNode;\r\n }\r\n\r\n isPointInside(x, y, dimensions) {\r\n return (\r\n x >= this.x &&\r\n x <= this.x + dimensions.width &&\r\n y >= this.y &&\r\n y <= this.y + dimensions.height\r\n );\r\n }\r\n\r\n getPortPosition(portIndex, isInput, dimensions) {\r\n const portY = this.y + PORT_CONSTANTS.BASE_Y + (portIndex * PORT_CONSTANTS.SPACING);\r\n const portYMiddle = portY + (PORT_CONSTANTS.TRIANGLE_HEIGHT / 2);\r\n\r\n const portX = isInput\r\n ? this.x - PORT_CONSTANTS.OFFSET - (PORT_CONSTANTS.TRIANGLE_WIDTH / 2)\r\n : this.x + dimensions.width + PORT_CONSTANTS.OFFSET + (PORT_CONSTANTS.TRIANGLE_WIDTH / 2);\r\n\r\n return {\r\n x: portX,\r\n y: portYMiddle,\r\n nodeId: this.id,\r\n isInput,\r\n index: portIndex\r\n };\r\n }\r\n\r\n isPortClicked(x, y, portIndex, isInput, dimensions) {\r\n const portX = isInput\r\n ? this.x - PORT_CONSTANTS.OFFSET - PORT_CONSTANTS.WIDTH\r\n : this.x + dimensions.width + PORT_CONSTANTS.OFFSET;\r\n\r\n const portY = this.y + PORT_CONSTANTS.BASE_Y + (portIndex * PORT_CONSTANTS.SPACING);\r\n\r\n return (\r\n x >= portX &&\r\n x <= portX + PORT_CONSTANTS.WIDTH * PORT_CONSTANTS.SCALE_MULTIPLIER &&\r\n y >= portY - PORT_CONSTANTS.VERTICAL_OFFSET &&\r\n y <= portY + PORT_CONSTANTS.HEIGHT + PORT_CONSTANTS.VERTICAL_OFFSET\r\n );\r\n }\r\n\r\n findClickedPort(x, y, dimensions, nodeType) {\r\n // Check input ports\r\n for (let i = 0; i < nodeType.inputs.length; i++) {\r\n if (this.isPortClicked(x, y, i, true, dimensions)) {\r\n return this.getPortPosition(i, true, dimensions);\r\n }\r\n }\r\n\r\n // Check output ports\r\n for (let i = 0; i < nodeType.outputs.length; i++) {\r\n if (this.isPortClicked(x, y, i, false, dimensions)) {\r\n return this.getPortPosition(i, false, dimensions);\r\n }\r\n }\r\n\r\n return null;\r\n }\r\n\r\n move(dx, dy) {\r\n this.x += dx;\r\n this.y += dy;\r\n return this;\r\n }\r\n\r\n moveTo(x, y) {\r\n this.x = x;\r\n this.y = y;\r\n return this;\r\n }\r\n\r\n toJSON() {\r\n return {\r\n id: this.id,\r\n type: this.type,\r\n x: this.x,\r\n y: this.y,\r\n properties: { ...this.properties },\r\n label: this.label\r\n };\r\n }\r\n\r\n static createInstance(nodeData, nodeTypes) {\r\n return Node.fromJSON(nodeData, nodeTypes);\r\n }\r\n}\r\n\r\nexport default Node;","import React from 'react';\r\nimport styles from './ContextMenu.module.css';\r\n\r\nconst NodeContextMenu = ({ visible, x, y, camera, onAction }) => {\r\n if (!visible) return null;\r\n\r\n const menuItems = [\r\n { icon: 'fa-copy', label: 'Copy', action: 'copy' },\r\n { icon: 'fa-trash', label: 'Delete', action: 'delete' },\r\n { icon: 'fa-cut', label: 'Cut', action: 'cut' },\r\n { icon: 'fa-clone', label: 'Duplicate', action: 'duplicate' },\r\n { icon: 'fa-tag', label: 'Set Label', action: 'setLabel' },\r\n ];\r\n\r\n return (\r\n \r\n
\r\n {menuItems.map(({ icon, label, action }) => (\r\n onAction(action)}\r\n className={styles.nodeButton}\r\n >\r\n \r\n {label}\r\n \r\n ))}\r\n
\r\n

Settings

Theme

Canvas

Code Generator

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.