Merge pull request #134 from latitudegames/TTH-220/unified-io

Tth 220/unified io
latitudegames · Nov 11, 2021 · acf8785 · acf8785
2 parents cc1001c + 6586f4d
commit acf8785
Show file tree

Hide file tree

Showing 67 changed files with 955 additions and 268 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,5 +2,7 @@
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "prettier.configPath": "./.prettierrc.json",
-  "eslint.workingDirectories": ["./client", "./core"]
+  "eslint.workingDirectories": ["./client", "./core"],
+  "typescript.tsserver.experimental.enableProjectDiagnostics": true,
+  "cSpell.enabled": false
 }
diff --git a/client/src/database/models/moduleModel.ts b/client/src/database/models/moduleModel.ts
@@ -88,7 +88,10 @@ const loadModuleModel = db => {
   }
 
   const getSpellModules = async spell => {
-    const moduleNames = Object.values(spell.chain.nodes)
+    const nodes = spell?.chain?.nodes || spell?.graph?.nodes
+    if (!nodes) return
+
+    const moduleNames = Object.values(nodes)
       .filter((n: any) => n.data.module)
       .map((n: any) => n.data.module)
 

diff --git a/client/src/features/HomeScreen/HomeScreen.js b/client/src/features/HomeScreen/HomeScreen.js
@@ -27,13 +27,13 @@ const StartScreen = ({ createNew, allProjects }) => {
 
   const onReaderLoad = async event => {
     const spellData = JSON.parse(event.target.result)
-    // TODO check for proper values here and throw errors
-    let spell
-    try {
-      spell = await models.spells.getSpell(spellData.name)
-    } catch (error) {
-      spell = await saveSpell(spellData)
+    if (spellData.graph) {
+      spellData.chain = spellData.graph
+      delete spellData.graph
     }
+    const spell = await saveSpell(spellData)
+    // TODO check for proper values here and throw errors
+
     // Load modules from the spell
     if (spellData?.modules && spellData.modules.length > 0)
       await Promise.all(
@@ -47,6 +47,8 @@ const StartScreen = ({ createNew, allProjects }) => {
       spellId: spellData.name,
       type: 'spell',
     })
+
+    navigate('/thoth')
   }
 
   const loadFile = selectedFile => {

diff --git a/client/src/features/HomeScreen/screens/CreateNew.jsx b/client/src/features/HomeScreen/screens/CreateNew.jsx
@@ -69,7 +69,7 @@ const CreateNew = () => {
       type: 'spell',
     })
 
-    setTimeout(() => navigate('/thoth'), 0)
+    setTimeout(() => navigate('/thoth'), 500)
   })
 
   return (

diff --git a/client/src/features/HomeScreen/screens/chains/default.ts b/client/src/features/HomeScreen/screens/chains/default.ts
@@ -1,36 +1,16 @@
 const chain = {
   id: '[email protected]',
   nodes: {
-    '123': {
-      id: 123,
-      data: {
-        socketKey: 'a2baf53a-d604-40cb-a102-609448c3f67c',
-        dataControls: {
-          name: {
-            expanded: true,
-          },
-        },
-        name: 'text',
-      },
-      inputs: {},
-      outputs: {
-        output: {
-          connections: [],
-        },
-      },
-      position: [-1555.0656080696986, -286.76976427120616],
-      name: 'Module Input',
-    },
     '124': {
       id: 124,
       data: {
+        name: 'default',
         socketKey: '20c0d2db-1916-433f-88c6-69d3ae123217',
         dataControls: {
           name: {
             expanded: true,
           },
         },
-        name: 'default',
       },
       inputs: {},
       outputs: {
@@ -41,28 +21,53 @@ const chain = {
       position: [-1555.4724883179474, -132.7648214211178],
       name: 'Module Trigger In',
     },
-    '125': {
-      id: 125,
+    '232': {
+      id: 232,
       data: {
-        socketKey: '048b7f6e-c155-4958-975a-c7698fc7e84d',
+        playtestToggle: {
+          receivePlaytest: false,
+          outputs: [],
+        },
+        socketKey: '9d61118c-3c5a-4379-9dae-41965e56207f',
+        text: 'Input text here',
         dataControls: {
           name: {
             expanded: true,
           },
+          playtestToggle: {
+            expanded: true,
+          },
         },
-        name: 'result',
+        name: 'Input',
+        outputs: [],
       },
+      inputs: {},
+      outputs: {
+        output: {
+          connections: [],
+        },
+      },
+      position: [-1554.8394720686588, -362.87500885530955],
+      name: 'Universal Input',
+    },
+    '233': {
+      id: 233,
+      data: {},
       inputs: {
-        input: {
+        text: {
           connections: [],
         },
         trigger: {
           connections: [],
         },
       },
-      outputs: {},
-      position: [-601.1864065822252, -230.90176968690835],
-      name: 'Module Output',
+      outputs: {
+        trigger: {
+          connections: [],
+        },
+      },
+      position: [-828.9994593860473, -299.2588216155752],
+      name: 'Output',
     },
   },
 }

diff --git a/client/src/features/Thoth/contexts/LayoutProvider.jsx b/client/src/features/Thoth/contexts/LayoutProvider.jsx
@@ -11,7 +11,7 @@ import { useContext, createContext, useEffect, useState, useRef } from 'react'
 import LoadingScreen from '@common/LoadingScreen/LoadingScreen'
 import { usePubSub } from '@/contexts/PubSubProvider'
 import { useTabManager } from '@/contexts/TabManagerProvider'
-
+import { useGetSpellQuery, useSaveSpellMutation } from '@/state/api/spells'
 // Component types are listed here which are used to load components from the data sent by rete
 const windowTypes = {
   TEXT_EDITOR: 'textEditor',
@@ -46,6 +46,10 @@ export const useLayout = () => useContext(Context)
 const LayoutProvider = ({ children, tab }) => {
   const { subscribe, publish, events } = usePubSub()
 
+  const [saveSpell] = useSaveSpellMutation()
+  const { data: spell } = useGetSpellQuery(tab.spell, {
+    skip: !tab.spell,
+  })
   const currentModelRef = useRef({})
 
   const [currentModel, setCurrentModel] = useState(null)
@@ -120,11 +124,13 @@ const LayoutProvider = ({ children, tab }) => {
     if (inspectorData) {
       setInspectorData(update)
     }
+    saveSpell(spell)
   }
 
   const saveInspector = inspectorData => {
     setInspectorData(inspectorData)
     publish(events.$NODE_SET(tab.id, inspectorData.nodeId), inspectorData)
+    saveSpell(spell)
   }
 
   const createModel = json => {

diff --git a/client/src/features/Thoth/windows/InspectorWindow/DataControls/DataControls.jsx b/client/src/features/Thoth/windows/InspectorWindow/DataControls/DataControls.jsx
@@ -9,6 +9,8 @@ import LongText from './LongTextControl'
 import ModuleSelect from './ModuleSelect'
 import OutputGenerator from './OutputGenerator'
 import SocketGenerator from './SocketGenerator'
+import PlaytestControl from './PlaytestControl'
+import SwitchControl from './SwitchControl'
 
 const StubComponent = props => <div>{props.name}</div>
 
@@ -24,6 +26,8 @@ const controlMap = {
   outputGenerator: OutputGenerator,
   slider: StubComponent,
   socketGenerator: SocketGenerator,
+  playtest: PlaytestControl,
+  switch: SwitchControl,
 }
 
 const DataControls = ({
@@ -57,7 +61,9 @@ const DataControls = ({
           updateData,
         }
 
-        const Component = controlMap[control.component] || StubComponent
+        const Component = controlMap[control.component]
+
+        if (!Component) return null
 
         const setExpanded = state => {
           control.expanded = state

diff --git a/client/src/features/Thoth/windows/InspectorWindow/DataControls/PlaytestControl.tsx b/client/src/features/Thoth/windows/InspectorWindow/DataControls/PlaytestControl.tsx
@@ -0,0 +1,51 @@
+import { useState } from 'react'
+
+import Switch from '../../../../common/Switch/Switch'
+
+type SocketType = {
+  name: string
+  socketKey: string
+  socketType: string
+  taskType: string
+}
+
+const SwitchControl = ({ control, updateData, initialValue }) => {
+  const { dataKey, data } = control
+  const { receivePlaytest } = initialValue
+  const initial =
+    typeof receivePlaytest === 'boolean'
+      ? receivePlaytest
+      : receivePlaytest === 'true'
+  const [checked, setChecked] = useState(initial)
+
+  const onChange = e => {
+    const playtest = e.target.checked
+    setChecked(playtest)
+
+    const outputs = [] as SocketType[]
+
+    if (playtest) {
+      outputs.push({
+        name: 'Playtest trigger',
+        socketKey: 'trigger',
+        socketType: 'triggerSocket',
+        taskType: 'option',
+      })
+    }
+
+    updateData({
+      [dataKey]: {
+        receivePlaytest: playtest,
+        outputs,
+      },
+    })
+  }
+
+  return (
+    <div style={{ flex: 1, display: 'flex' }}>
+      <Switch checked={checked} onChange={onChange} label={data.label} />
+    </div>
+  )
+}
+
+export default SwitchControl
diff --git a/client/src/features/Thoth/windows/InspectorWindow/DataControls/SwitchControl.tsx b/client/src/features/Thoth/windows/InspectorWindow/DataControls/SwitchControl.tsx
@@ -0,0 +1,23 @@
+import { useState } from 'react'
+
+import Switch from '../../../../common/Switch/Switch'
+
+const SwitchControl = ({ control, updateData, initialValue }) => {
+  const { dataKey, data } = control
+  const [checked, setChecked] = useState(initialValue)
+
+  const onChange = e => {
+    setChecked(e.target.checked)
+    updateData({
+      [dataKey]: e.target.checked,
+    })
+  }
+
+  return (
+    <div style={{ flex: 1, display: 'flex' }}>
+      <Switch checked={checked} onChange={onChange} label={data.label} />
+    </div>
+  )
+}
+
+export default SwitchControl
diff --git a/client/src/features/Thoth/windows/InspectorWindow/index.jsx b/client/src/features/Thoth/windows/InspectorWindow/index.jsx
@@ -83,6 +83,12 @@ const Inspector = props => {
 
   return (
     <Window toolbar={toolbar} darker outline borderless>
+      {inspectorData.deprecated && (
+        <div style={{ padding: 'var(--c1) var(--c2)' }}>
+          <h2 style={{ color: 'var(--red)' }}>WARNING</h2>
+          <p>{inspectorData.deprecationMessage}</p>
+        </div>
+      )}
       <DataControls
         inspectorData={inspectorData}
         nodeId={inspectorData.nodeId}

diff --git a/client/src/features/Thoth/workspaces/composer/index.tsx b/client/src/features/Thoth/workspaces/composer/index.tsx
@@ -44,7 +44,10 @@ const Workspace = ({ tab, tabs, pubSub }) => {
                   store.getState(),
                   filteredTab.spell
                 )
-                if (spell?.modules.some(module => module.name === tab.module))
+                if (
+                  spell?.modules &&
+                  spell?.modules.some(module => module.name === tab.module)
+                )
                   saveSpell({ ...spell })
               }
             })

diff --git a/client/src/features/common/Input/Input.tsx b/client/src/features/common/Input/Input.tsx
@@ -1,4 +1,4 @@
-const Input = ({ value, onChange = () => {}, style = {}, ...props }) => {
+const Input = ({ value, onChange = e => {}, style = {}, ...props }) => {
   return (
     <input
       style={style}

diff --git a/client/src/features/common/MenuBar/MenuBar.js b/client/src/features/common/MenuBar/MenuBar.js
@@ -27,7 +27,7 @@ const MenuBar = () => {
     $CREATE_PLAYTEST,
     $CREATE_INSPECTOR,
     $CREATE_TEXT_EDITOR,
-    // $SERIALIZE,
+    $SERIALIZE,
     $EXPORT,
   } = events
 
@@ -68,9 +68,9 @@ const MenuBar = () => {
     navigate('/home/all-projects')
   }
 
-  // const onSerialize = () => {
-  //   publish($SERIALIZE(activeTabRef.current.id));
-  // };
+  const onSerialize = () => {
+    publish($SERIALIZE(activeTabRef.current.id))
+  }
 
   const onStateManagerCreate = () => {
     publish($CREATE_STATE_MANAGER(activeTabRef.current.id))
@@ -153,6 +153,13 @@ const MenuBar = () => {
         paste: {},
       },
     },
+    dev: {
+      items: {
+        serialize: {
+          onClick: onSerialize,
+        },
+      },
+    },
     studio: {
       items: {
         tools: {

diff --git a/client/src/features/common/Node/Node.js b/client/src/features/common/Node/Node.js
@@ -9,14 +9,21 @@ export class MyNode extends Node {
     const { node, bindSocket, bindControl } = this.props
     const { outputs, controls, inputs, selected } = this.state
 
+    const name = node.displayName ? node.displayName : node.name
+    const fullName = node.data.name ? `${name} - ${node.data.name}` : name
+
     return (
       <div className={`${css['node']} ${css[selected]}`}>
+        {node.deprecated && <div className={css['deprecated-overlay']}></div>}
         <div className={css['node-title']}>
           <Icon
             name={componentCategories[node.category]}
             style={{ marginRight: 'var(--extraSmall)' }}
           />
-          {node.data.name ? `${node.name} - ${node.data.name}` : node.name}
+          {fullName}
+          {node.deprecated && (
+            <div className={css['node-depricated']}>DEPRECATED</div>
+          )}
         </div>
         <div className={css['connections-container']}>
           {inputs.length > 0 && (