Visual script for new studio (#10320)

* visual script partial completion * add License * remove unnecessary variable class name * rounded nodes * consistent modal styling * update node categories and colors * change side panel to node editor * fix primitive errors * remove inline styling * makescene image container with fixed height * define variable nodes category * useable node collapse * colappsed node handles * pass checks * add visual script panel * advanced node picker * improve scroll * fix margins * add conditional to paginated list * rename variable node id
EtherealEngine · Jun 12, 2024 · 731a6a0 · 731a6a0
1 parent 4dc17aa
commit 731a6a0
Show file tree

Hide file tree

Showing 60 changed files with 2,171 additions and 139 deletions.
diff --git a/packages/editor/src/components/Editor2Container.tsx b/packages/editor/src/components/Editor2Container.tsx
@@ -37,6 +37,8 @@ import { MaterialsPanelTab } from '@etherealengine/ui/src/components/editor/pane
 import { PropertiesPanelTab } from '@etherealengine/ui/src/components/editor/panels/Properties'
 import { ScenePanelTab } from '@etherealengine/ui/src/components/editor/panels/Scenes'
 import { ViewportPanelTab } from '@etherealengine/ui/src/components/editor/panels/Viewport'
+import { VisualScriptPanelTab } from '@etherealengine/ui/src/components/editor/panels/VisualScript'
+
 import { EditorProgressBar } from '@etherealengine/ui/src/components/editor/util/EditorProgressBar'
 import ErrorDialog from '@etherealengine/ui/src/components/tailwind/ErrorDialog'
 import PopupMenu from '@etherealengine/ui/src/primitives/tailwind/PopupMenu'
@@ -93,7 +95,7 @@ const defaultLayout: LayoutData = {
             tabs: [ViewportPanelTab]
           },
           {
-            tabs: [ScenePanelTab, FilesPanelTab, AssetsPanelTab]
+            tabs: [ScenePanelTab, FilesPanelTab, AssetsPanelTab, VisualScriptPanelTab]
           }
         ]
       },

diff --git a/packages/editor/src/components/visualScript/VisualFlow.tsx b/packages/editor/src/components/visualScript/VisualFlow.tsx
@@ -37,9 +37,9 @@ import { VisualScriptState } from '@etherealengine/visual-script'
 
 import 'reactflow/dist/style.css'
 
+import Button from '@etherealengine/ui/src/primitives/tailwind/Button'
 import { EditorControlFunctions } from '../../functions/EditorControlFunctions'
 import { SelectionState } from '../../services/SelectionServices'
-import { PropertiesPanelButton } from '../inputs/Button'
 import { commitProperty } from '../properties/Util'
 
 import './ReactFlowStyle.css'
@@ -85,21 +85,16 @@ const VisualFlow = () => {
   return (
     <AutoSizer>
       {({ width, height }) => (
-        <div style={{ width, height }}>
+        <div className="flex items-center justify-center" style={{ width, height }}>
           {entities.length && !validEntity ? (
-            <PropertiesPanelButton
-              style={{
-                position: 'absolute',
-                top: '50%',
-                left: '50%',
-                transform: 'translate(-50%, -50%)'
-              }}
+            <Button
+              variant="outline"
               onClick={() => {
                 addVisualScript()
               }}
             >
               {t('editor:visualScript.panel.addVisualScript')}
-            </PropertiesPanelButton>
+            </Button>
           ) : (
             <></>
           )}

diff --git a/packages/editor/src/components/visualScript/VisualScriptUIModule.ts b/packages/editor/src/components/visualScript/VisualScriptUIModule.ts
@@ -47,7 +47,6 @@ export * from './transformers/VisualToFlow'
 export * from './transformers/flowToVisual'
 export * from './util/autoLayout'
 export * from './util/calculateNewEdge'
-export * from './util/colors'
 export * from './util/getPickerFilters'
 export * from './util/getSocketsByNodeTypeAndHandleType'
 export * from './util/hasPositionMetaData'

diff --git a/packages/editor/src/components/visualScript/components/InputSocket.tsx b/packages/editor/src/components/visualScript/components/InputSocket.tsx
@@ -29,8 +29,8 @@ import { Connection, Handle, Position, useReactFlow } from 'reactflow'
 
 import { InputSocketSpecJSON } from '@etherealengine/visual-script'
 
+import { valueTypeColorMap } from '@etherealengine/ui/src/components/editor/panels/VisualScript/util/colors'
 import { NodeSpecGenerator } from '../hooks/useNodeSpecGenerator'
-import { colors, valueTypeColorMap } from '../util/colors'
 import { isValidConnection } from '../util/isValidConnection'
 import { AutoSizeInput } from './AutoSizeInput'
 

diff --git a/packages/editor/src/components/visualScript/components/NodeContainer.tsx b/packages/editor/src/components/visualScript/components/NodeContainer.tsx
@@ -25,9 +25,9 @@ Ethereal Engine. All Rights Reserved.
 
 import React, { PropsWithChildren } from 'react'
 
+import { categoryColorMap } from '@etherealengine/ui/src/components/editor/panels/VisualScript/util/colors'
 import { NodeCategory, NodeSpecJSON } from '@etherealengine/visual-script'
-
-import { categoryColorMap, colors } from '../util/colors'
+import { colors } from '@mui/material'
 
 const nodeContainerStyle = {
   borderRadius: '0.25rem',

diff --git a/packages/editor/src/components/visualScript/components/OutputSocket.tsx b/packages/editor/src/components/visualScript/components/OutputSocket.tsx
@@ -29,8 +29,8 @@ import { Connection, Handle, Position, useReactFlow } from 'reactflow'
 
 import { OutputSocketSpecJSON } from '@etherealengine/visual-script'
 
+import { colors, valueTypeColorMap } from '@etherealengine/ui/src/components/editor/panels/VisualScript/util/colors'
 import { NodeSpecGenerator } from '../hooks/useNodeSpecGenerator'
-import { colors, valueTypeColorMap } from '../util/colors'
 import { isValidConnection } from '../util/isValidConnection'
 
 export type OutputSocketProps = {

diff --git a/packages/editor/src/components/visualScript/hooks/useCustomNodeTypes.tsx b/packages/editor/src/components/visualScript/hooks/useCustomNodeTypes.tsx
@@ -26,7 +26,7 @@ Ethereal Engine. All Rights Reserved.
 import React, { useEffect, useState } from 'react'
 import { NodeTypes } from 'reactflow'
 
-import { Node } from '../components/Node'
+import { Node } from '@etherealengine/ui/src/components/editor/panels/VisualScript/node'
 import { NodeSpecGenerator } from './useNodeSpecGenerator'
 
 const getCustomNodeTypes = (specGenerator: NodeSpecGenerator) => {

diff --git a/packages/engine/src/scene/components/VolumetricNodes.ts b/packages/engine/src/scene/components/VolumetricNodes.ts
@@ -37,7 +37,7 @@ import { NodeCategory, makeFlowNodeDefinition } from '@etherealengine/visual-scr
  */
 export const playVolumetric = makeFlowNodeDefinition({
   typeName: 'engine/media/volumetric/playVolumetric',
-  category: NodeCategory.Action,
+  category: NodeCategory.Engine,
   label: 'Play Volumetric',
   in: {
     flow: 'flow',
@@ -60,7 +60,7 @@ export const playVolumetric = makeFlowNodeDefinition({
  */
 export const setVolumetricTime = makeFlowNodeDefinition({
   typeName: 'engine/media/volumetric/setVolumetricTime',
-  category: NodeCategory.Action,
+  category: NodeCategory.Engine,
   label: 'Set Volumetric Time',
   in: {
     flow: 'flow',
@@ -83,7 +83,7 @@ export const setVolumetricTime = makeFlowNodeDefinition({
  */
 export const fadeVolumetricAudioVolume = makeFlowNodeDefinition({
   typeName: 'engine/media/volumetric/fadeVolumetricVolume',
-  category: NodeCategory.Effect,
+  category: NodeCategory.Engine,
   label: 'Fade Volumetric Volume',
   in: {
     flow: 'flow',

diff --git a/packages/engine/src/visualscript/nodes/profiles/engine/events/onAxis.ts b/packages/engine/src/visualscript/nodes/profiles/engine/events/onAxis.ts
@@ -51,7 +51,7 @@ const initialState = (): State => ({
 // very 3D specific.
 export const OnAxis = makeEventNodeDefinition({
   typeName: 'engine/axis/use',
-  category: NodeCategory.Event,
+  category: NodeCategory.Engine,
   label: 'Use Axis',
   in: {
     axis: (_, graphApi) => {

diff --git a/packages/engine/src/visualscript/nodes/profiles/engine/events/onButton.ts b/packages/engine/src/visualscript/nodes/profiles/engine/events/onButton.ts
@@ -52,7 +52,7 @@ const initialState = (): State => ({
 const buttonStates = ['down', 'pressed', 'touched', 'up'] as Array<keyof ButtonState>
 export const OnButton = makeEventNodeDefinition({
   typeName: 'engine/onButton',
-  category: NodeCategory.Event,
+  category: NodeCategory.Engine,
   label: 'On Button',
   in: {
     button: (_) => {

diff --git a/packages/engine/src/visualscript/nodes/profiles/engine/events/onCollision.ts b/packages/engine/src/visualscript/nodes/profiles/engine/events/onCollision.ts
@@ -49,7 +49,7 @@ const initialState = (): State => ({
 // a visual script node
 export const OnCollision = makeEventNodeDefinition({
   typeName: 'engine/onCollision',
-  category: NodeCategory.Event,
+  category: NodeCategory.Engine,
   label: 'Collision Events',
 
   // socket configuration support

diff --git a/packages/engine/src/visualscript/nodes/profiles/engine/events/onExecute.ts b/packages/engine/src/visualscript/nodes/profiles/engine/events/onExecute.ts
@@ -47,7 +47,7 @@ const initialState = (): State => ({
 // very 3D specific.
 export const OnExecute = makeEventNodeDefinition({
   typeName: 'flow/lifecycle/onExecute',
-  category: NodeCategory.Event,
+  category: NodeCategory.Flow,
   label: 'On Execute',
   in: {
     system: (_, graphApi) => {

diff --git a/packages/engine/src/visualscript/nodes/profiles/engine/events/onQuery.ts b/packages/engine/src/visualscript/nodes/profiles/engine/events/onQuery.ts
@@ -43,7 +43,7 @@ const initialState = (): State => ({
 
 export const OnQuery = makeEventNodeDefinition({
   typeName: 'engine/query/use',
-  category: NodeCategory.Event,
+  category: NodeCategory.Engine,
   label: 'On Query',
   configuration: {
     numInputs: {

diff --git a/packages/engine/src/visualscript/nodes/profiles/engine/helper/actionHelper.ts b/packages/engine/src/visualscript/nodes/profiles/engine/helper/actionHelper.ts
@@ -154,7 +154,7 @@ export function registerActionConsumers() {
 
     const node = makeEventNodeDefinition({
       typeName: `action/${namePath}/${dispatchName}/consume`,
-      category: NodeCategory.Event,
+      category: NodeCategory.Action,
       label: `on ${namePath} ${dispatchName}`,
       in: {
         system: (_, graph) => {

diff --git a/packages/engine/src/visualscript/nodes/profiles/engine/helper/componentHelper.ts b/packages/engine/src/visualscript/nodes/profiles/engine/helper/componentHelper.ts
@@ -99,7 +99,7 @@ export function registerComponentSetters() {
     }
     const node = makeFlowNodeDefinition({
       typeName: `engine/component/${componentName}/set`,
-      category: NodeCategory.Action,
+      category: NodeCategory.Engine,
       label: `set ${componentName}`,
       in: {
         flow: 'flow',
@@ -144,7 +144,7 @@ export function registerComponentGetters() {
     }
     const node = makeFunctionNodeDefinition({
       typeName: `engine/component/${componentName}/get`,
-      category: NodeCategory.Query,
+      category: NodeCategory.Engine,
       label: `get ${componentName}`,
       in: {
         entity: 'entity'
@@ -197,7 +197,7 @@ export function registerComponentListeners() {
 
     const node = makeEventNodeDefinition({
       typeName: `engine/component/${componentName}/use`,
-      category: NodeCategory.Event,
+      category: NodeCategory.Engine,
       label: `use ${componentName}`,
       in: {
         entity: 'entity'

diff --git a/packages/engine/src/visualscript/nodes/profiles/engine/helper/stateHelper.ts b/packages/engine/src/visualscript/nodes/profiles/engine/helper/stateHelper.ts
@@ -72,7 +72,7 @@ export function registerStateSetters() {
     }
     const node = makeFlowNodeDefinition({
       typeName: `engine/state/${stateName}/set`,
-      category: NodeCategory.Action,
+      category: NodeCategory.Engine,
       label: `set ${stateName}`,
       in: {
         flow: 'flow',
@@ -109,7 +109,7 @@ export function registerStateGetters() {
     }
     const node = makeFlowNodeDefinition({
       typeName: `engine/state/${stateName}/get`,
-      category: NodeCategory.Query,
+      category: NodeCategory.Engine,
       label: `get ${stateName}`,
       in: {
         flow: 'flow'
@@ -165,7 +165,7 @@ export function registerStateListeners() {
     }
     const node = makeEventNodeDefinition({
       typeName: `engine/state/${stateName}/use`,
-      category: NodeCategory.Event,
+      category: NodeCategory.Engine,
       label: `Use ${stateName}`,
       in: {},
       out: {

diff --git a/packages/engine/src/visualscript/nodes/profiles/engine/registerEngineProfile.ts b/packages/engine/src/visualscript/nodes/profiles/engine/registerEngineProfile.ts
@@ -28,12 +28,10 @@ Ethereal Engine. All Rights Reserved.
 import * as VolumetricNodes from '@etherealengine/engine/src/scene/components/VolumetricNodes'
 import {
   getNodeDescriptions,
-  GetSceneProperty,
   getStringConversionsForValueType,
   IRegistry,
   memo,
   NodeDefinition,
-  SetSceneProperty,
   ValueTypeMap
 } from '@etherealengine/visual-script'
 
@@ -98,8 +96,8 @@ export const getEngineNodesMap = memo<Record<string, NodeDefinition>>(() => {
     OnAxis,
     // async
     //switchScene.Description,
-    ...SetSceneProperty(engineValueTypeNames),
-    ...GetSceneProperty(engineValueTypeNames),
+    //...SetSceneProperty(engineValueTypeNames),
+    //...GetSceneProperty(engineValueTypeNames),
     // flow control
 
     ...getEngineStringConversions(getEngineValuesMap()),

diff --git a/packages/engine/src/visualscript/nodes/profiles/engine/values/AxisNodes.ts b/packages/engine/src/visualscript/nodes/profiles/engine/values/AxisNodes.ts
@@ -31,7 +31,7 @@ import { Assert, Choices, NodeCategory, makeFunctionNodeDefinition } from '@ethe
 // very 3D specific.
 export const getAxis = makeFunctionNodeDefinition({
   typeName: 'engine/axis/get',
-  category: NodeCategory.Query,
+  category: NodeCategory.Engine,
   label: 'get Axis',
   in: {
     axis: (_, graphApi) => {

diff --git a/packages/engine/src/visualscript/nodes/profiles/engine/values/ComponentNodes.ts b/packages/engine/src/visualscript/nodes/profiles/engine/values/ComponentNodes.ts
@@ -34,7 +34,7 @@ import { Assert, NodeCategory, makeFlowNodeDefinition } from '@etherealengine/vi
 
 export const addComponent = makeFlowNodeDefinition({
   typeName: 'engine/component/addComponent',
-  category: NodeCategory.Action,
+  category: NodeCategory.Engine,
   label: 'Add Component',
   in: {
     flow: 'flow',
@@ -62,7 +62,7 @@ export const addComponent = makeFlowNodeDefinition({
 
 export const deleteComponent = makeFlowNodeDefinition({
   typeName: 'engine/component/deleteComponent',
-  category: NodeCategory.Action,
+  category: NodeCategory.Engine,
   label: 'Delete Component',
   in: {
     flow: 'flow',
@@ -90,7 +90,7 @@ export const deleteComponent = makeFlowNodeDefinition({
 
 export const setTag = makeFlowNodeDefinition({
   typeName: 'engine/component/tag/set',
-  category: NodeCategory.Action,
+  category: NodeCategory.Engine,
   label: 'set Tag',
   in: {
     flow: 'flow',
@@ -114,7 +114,7 @@ export const setTag = makeFlowNodeDefinition({
 
 export const removeTag = makeFlowNodeDefinition({
   typeName: 'engine/component/tag/remove',
-  category: NodeCategory.Action,
+  category: NodeCategory.Engine,
   label: 'remove Tag',
   in: {
     flow: 'flow',