add disabled nodes support

prevent error throwing on c3 export
fix hardcoded zip folder for electron

forge.config.ts

@@ -4,6 +4,7 @@ import { MakerZIP } from '@electron-forge/maker-zip'
 import { VitePlugin } from '@electron-forge/plugin-vite'
 import { FusesPlugin } from '@electron-forge/plugin-fuses'
 import { FuseV1Options, FuseVersion } from '@electron/fuses'
+import { name } from './src/constants'
 
 const config: ForgeConfig = {
   packagerConfig: {
@@ -12,12 +13,12 @@ const config: ForgeConfig = {
     },
     // asar: false,
     extraResource: ['.vite/build/assets'],
-    name: "Cyn"
+    name
   },
   rebuildConfig: {},
   makers: [
     new MakerSquirrel({
-      name: "Cyn"
+      name
     }),
     new MakerZIP({}, ['darwin', 'linux', 'win32']),
   ],

index.html

@@ -17,7 +17,8 @@
     />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,[email protected],200..800&display=swap" rel="stylesheet">
+    <!-- <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,[email protected],200..800&display=swap" rel="stylesheet"> -->
+    <link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Montserrat:wght@100&display=swap" rel="stylesheet">
     <style>
       html, body, #app {
         border: none;
@@ -27,7 +28,7 @@
       }
 
       html {
-        font-family: "Bricolage Grotesque", sans-serif !important;
+        font-family: "Jost", sans-serif !important;
         font-optical-sizing: auto;
         font-weight: normal;
         font-style: normal;

package.json

@@ -14,17 +14,17 @@
   "scripts": {
     "format": "prettier --write .",
     "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts,.vue --fix",
-    "type-check:node": "tsc --noEmit -p tsconfig.json --composite false",
-    "type-check:web": "vue-tsc --noEmit -p tsconfig.json --composite false",
-    "type-check": "npm run type-check:node && npm run type-check:web",
+    "typecheck:node": "tsc --noEmit -p tsconfig.json --composite false",
+    "typecheck:web": "vue-tsc --noEmit -p tsconfig.json --composite false",
+    "typecheck": "npm run typecheck:node && npm run typecheck:web",
     "start": "electron-forge start",
     "start:args": "electron-forge start -- --project ./tests/e2e/fixtures/folder-to-electron.json --action run",
     "dev": "pnpm start",
     "test:unit": "vitest",
     "test:e2e:raw": "vitest run -c tests/e2e/vitest.config.ts",
     "test:e2e:local": "pnpm package && pnpm test:e2e:raw",
     "test:e2e:pw": "echo 1",
-    "build": "npm run type-check && electron-vite build",
+    "build": "npm run typecheck && electron-vite build",
     "build:no-check": "electron-vite build",
     "build:win": "npm run build:no-check && electron-builder --win --config",
     "build:mac": "npm run build:no-check && electron-builder --mac --config",

src/constants.ts

@@ -0,0 +1,30 @@
+export const name = 'Cyn'
+
+export const outFolderName = (platform: NodeJS.Platform, arch: NodeJS.Architecture) => {
+  let platformName = ''
+  let archName = ''
+
+  if (platform === 'linux') {
+    platformName = 'linux'
+  } else if (platform === 'win32') {
+    platformName = 'win32'
+  } else if (platform === 'darwin') {
+    platformName = 'darwin'
+  } else {
+    throw new Error('Unsupported platform')
+  }
+
+  if (arch === 'x64') {
+    archName = 'x64'
+  } else if (arch === 'arm') {
+    archName = 'arm'
+  } else if (arch === 'arm64') {
+    archName = 'arm64'
+  } else if (arch === 'ia32') {
+    archName = 'ia32'
+  } else {
+    throw new Error('Unsupported architecture')
+  }
+
+  return `${name}-${platformName}-${archName}`
+}

src/main/utils.ts

@@ -16,8 +16,11 @@ export const getFinalPlugins = () => {
 
     // send without runner
     for (const element of plugin.nodes) {
-      const { node } = element
-      finalNodes.push(node)
+      const { node, disabled } = element
+      finalNodes.push({
+        node,
+        disabled,
+      })
     }
 
     finalPlugins.push({

src/renderer/components/AddNodeButton.vue

@@ -41,21 +41,23 @@
               </li>
               <li
                 v-for="node in plugin.nodes"
-                :key="node.id"
-                class="flex"
-                @click="selected = { nodeId: node.id, pluginId: plugin.id }"
+                :key="node.node.id"
+                class="flex node-item"
+                @click="selected = { nodeId: node.node.id, pluginId: plugin.id }"
+                :disabled="node.disabled"
               >
                 <a
                   class="element flex align-items-center p-3 border-round w-full transition-colors transition-duration-150 cursor-pointer"
                   style="border-radius: '10px'"
                   :class="{
-                    selected: selected?.nodeId === node.id && selected.pluginId === plugin.id
+                    selected: selected?.nodeId === node.node.id && selected.pluginId === plugin.id
                   }"
                 >
                   <i class="pi pi-home text-xl mr-3"></i>
                   <span class="flex flex-column">
-                    <span class="font-bold mb-1"> {{ node.name }}</span>
-                    <span class="m-0 text-secondary"> {{ node.description }}</span>
+                    <span class="font-bold mb-1"> {{ node.node.name }}</span>
+                    <span class="m-0 text-secondary"> {{ node.node.description }}</span>
+                    <span class="m-0 text-secondary font-bold" v-if="typeof node.disabled === 'string'">{{ node.disabled }}</span>
                   </span>
                 </a>
               </li>
@@ -163,7 +165,7 @@ const onAdd = () => {
   const insertAt = Number.parseInt(path.value.pop() ?? '0') + 1
 
   instance.addNode({
-    node,
+    node: node.node,
     plugin: def,
     path: path.value,
     insertAt
@@ -188,14 +190,15 @@ const isNodePicked = (node: CynNode, searchedValue: string) => {
 
 // TODO: refactor
 const searchedElements = computed(() => {
+  console.log('pluginDefinitions', pluginDefinitions.value)
   const searchedValue = search.value.toLowerCase()
 
   return pluginDefinitions.value
     .filter((def) => {
       const description = def.description.toLowerCase()
       const name = def.name.toLowerCase()
 
-      const someNodeMatch = def.nodes.some((node) => isNodePicked(node, searchedValue))
+      const someNodeMatch = def.nodes.some((node) => isNodePicked(node.node, searchedValue))
 
       if (description.includes(searchedValue) || name.includes(searchedValue) || someNodeMatch) {
         return true
@@ -205,7 +208,7 @@ const searchedElements = computed(() => {
     .map((def) => {
       return {
         ...def,
-        nodes: def.nodes.filter((node) => isNodePicked(node, searchedValue))
+        nodes: def.nodes.filter((node) => isNodePicked(node.node, searchedValue))
       }
     })
 })
@@ -251,6 +254,15 @@ const searchedElements = computed(() => {
 
   .node {
     flex: 1;
+
+    .node-item {
+      cursor: pointer;
+
+      &[disabled] {
+        pointer-events: none;
+        color: grey;
+      }
+    }
   }
 }
 

src/renderer/components/nodes/EditorNodeAction.vue

@@ -99,7 +99,7 @@ const { getNodeDefinition, setBlockValue, addNode, getPluginDefinition, removeNo
 const { activeNode } = storeToRefs(editor)
 
 const nodeDefinition = computed(() => {
-  return getNodeDefinition(value.value.origin.nodeId, value.value.origin.pluginId) as Action
+  return getNodeDefinition(value.value.origin.nodeId, value.value.origin.pluginId).node as Action
 })
 
 const pluginDefinition = computed(() => {

src/renderer/components/nodes/EditorNodeCondition.vue

@@ -131,6 +131,7 @@ const { activeNode } = storeToRefs(editor)
 const onValueChanged = (newValue: unknown, paramKey: string) => {
   console.log('newValue', newValue)
 
+  // @ts-expect-error
   setBlockValue(value.value.uid, {
     ...value.value,
     params: {
@@ -141,7 +142,7 @@ const onValueChanged = (newValue: unknown, paramKey: string) => {
 }
 
 const nodeDefinition = computed(() => {
-  return getNodeDefinition(value.value.origin.nodeId, value.value.origin.pluginId) as Condition
+  return getNodeDefinition(value.value.origin.nodeId, value.value.origin.pluginId).node as Condition
 })
 
 const pluginDefinition = computed(() => {

src/renderer/components/nodes/EditorNodeEvent.vue

@@ -95,7 +95,7 @@ const { getNodeDefinition, getPluginDefinition, setTriggerValue, addNode, remove
 const { activeNode } = storeToRefs(editor)
 
 const nodeDefinition = computed(() => {
-  return getNodeDefinition(value.value.origin.nodeId, value.value.origin.pluginId) as Event
+  return getNodeDefinition(value.value.origin.nodeId, value.value.origin.pluginId).node as Event
 })
 
 const pluginDefinition = computed(() => {

src/renderer/components/nodes/EditorNodeLoop.vue

@@ -119,7 +119,7 @@ const { activeNode } = storeToRefs(editor)
 const showSidebar = ref(false)
 
 const nodeDefinition = computed(() => {
-  return getNodeDefinition(value.value.origin.nodeId, value.value.origin.pluginId) as Loop
+  return getNodeDefinition(value.value.origin.nodeId, value.value.origin.pluginId).node as Loop
 })
 
 const pluginDefinition = computed(() => {
@@ -144,6 +144,7 @@ const subtitle = computedAsync(
 const onValueChanged = (newValue: unknown, paramKey: string) => {
   console.log('newValue', newValue)
 
+  // @ts-expect-error
   setBlockValue(value.value.uid, {
     ...value.value,
     params: {

src/renderer/components/nodes/ParamEditor.vue

@@ -369,7 +369,7 @@ const getOutputLabel = (stepUid: string, key: string) => {
   const nodeOrigin = nodes.value.find((n) => n.uid === stepUid)?.origin
   console.log('nodeOrigin', nodeOrigin)
   if (nodeOrigin) {
-    const nodeDef = getNodeDefinition(nodeOrigin.nodeId, nodeOrigin.pluginId) as Action
+    const nodeDef = getNodeDefinition(nodeOrigin.nodeId, nodeOrigin.pluginId).node as Action
     if (nodeDef) {
       return nodeDef.outputs[key]?.label ?? key
     }
@@ -382,7 +382,7 @@ const getOutputDescription = (stepUid: string, key: string) => {
   const nodeOrigin = nodes.value.find((n) => n.uid === stepUid)?.origin
   console.log('nodeOrigin', nodeOrigin)
   if (nodeOrigin) {
-    const nodeDef = getNodeDefinition(nodeOrigin.nodeId, nodeOrigin.pluginId) as Action
+    const nodeDef = getNodeDefinition(nodeOrigin.nodeId, nodeOrigin.pluginId).node as Action
     if (nodeDef) {
       return nodeDef.outputs[key]?.description ?? key
     }
@@ -396,7 +396,7 @@ const getStepLabel = (key: string) => {
   if (nodeOrigin) {
     const nodeDef = getNodeDefinition(nodeOrigin.nodeId, nodeOrigin.pluginId)
     if (nodeDef) {
-      return nodeDef.name
+      return nodeDef.node.name
     }
     return key
   }

src/renderer/store/app.ts

@@ -43,7 +43,7 @@ export const useAppStore = defineStore('app', () => {
     // const getNodeDefinition = <T extends Block>(node: T extends Block ? T : never) => {
     const plugin = getPluginDefinition(pluginId)
     if (plugin) {
-      return plugin.nodes.find((pluginNode) => pluginNode.id === nodeId)
+      return plugin.nodes.find((pluginNode) => pluginNode.node.id === nodeId)
     }
     return undefined
   }

src/renderer/store/editor.ts

@@ -11,7 +11,7 @@ import {
   Steps
 } from '@@/model'
 import { useAPI } from '@renderer/composables/api'
-import { Action, Condition, RendererPluginDefinition, Event, Loop, CynNode, InputDefinition } from '@cyn/plugin-core'
+import { Action, Condition, RendererPluginDefinition, Event, Loop, CynNode, InputDefinition, RendererNodeDefinition } from '@cyn/plugin-core'
 import { Variable } from '@cyn/core'
 import { defineStore, storeToRefs } from 'pinia'
 import get from 'get-value'
@@ -154,12 +154,12 @@ export const useEditor = defineStore('editor', () => {
       }
 
       if (pluginDef) {
-        if (pluginDef.type === 'action') {
-          const outputs = pluginDef.outputs
+        if (pluginDef.node.type === 'action') {
+          const outputs = pluginDef.node.outputs
 
           for (const [key, output] of Object.entries(outputs)) {
             console.log('output', outputs)
-            result[node.uid]['outputs'][key] = `<div class="step">${pluginDef.name} → ${output.label}</div>`
+            result[node.uid]['outputs'][key] = `<div class="step">${pluginDef.node.name} → ${output.label}</div>`
           }
         }
       }
@@ -182,7 +182,7 @@ export const useEditor = defineStore('editor', () => {
           plugin: x.id
         }))
       )
-      .flat(3) satisfies CynNode[]
+      .flat(3) satisfies RendererNodeDefinition[]
   })
 
   const clear = () => {
@@ -213,7 +213,7 @@ export const useEditor = defineStore('editor', () => {
     const errors: ValidationError[] = []
     if (block.type === 'action') {
       const definition = getNodeDefinition(block.origin.nodeId, block.origin.pluginId)
-      const requiredParams = Object.entries(definition?.params ?? {})
+      const requiredParams = Object.entries(definition.node?.params ?? {})
       for (const [key, param] of requiredParams) {
         if (isRequired(param) && !(key in block.params)) {
           console.warn(`Missing required param "${key}" in node "${block.uid}"`)
@@ -356,7 +356,7 @@ export const useEditor = defineStore('editor', () => {
           params: {}
         }
         addNodeToBlock(node, path, insertAt)
-      } else if (isConditionDefinition(nodeDefinition)) {
+      } /* else if (isConditionDefinition(nodeDefinition)) {
         const node: BlockCondition = {
           uid: nanoid(),
           type: nodeDefinition.type,
@@ -381,7 +381,7 @@ export const useEditor = defineStore('editor', () => {
           children: []
         }
         addNodeToBlock(node, path, insertAt)
-      } else {
+      } */ else {
         console.error('Unhandled', nodeDefinition)
       }
     }

src/shared/libs/plugin-construct/assets/script.ts

@@ -37,21 +37,31 @@ export const script = async (
   // as soon as it appear, without blocking flow
   // ignore asking for update
   const notNowBtn = page.getByText('Not now')
-  notNowBtn.waitFor().then(async () => {
-    notNowBtn.click()
-  })
+  notNowBtn
+    .waitFor()
+    .then(async () => {
+      notNowBtn.click()
+    })
+    .catch(async () => {
+      console.log('notNowBtn.click() failed')
+    })
 
   // as soon as it appear, without blocking flow
   // ignore webgl error
   const okDialog = page.locator('#okDialog')
   const webglErrorButton = okDialog.locator('.okButton')
-  webglErrorButton.waitFor().then(async () => {
-    const text = await okDialog.allInnerTexts()
-
-    if (text.join().toLowerCase().includes('webgl')) {
-      webglErrorButton.click()
-    }
-  })
+  webglErrorButton
+    .waitFor()
+    .then(async () => {
+      const text = await okDialog.allInnerTexts()
+
+      if (text.join().toLowerCase().includes('webgl')) {
+        webglErrorButton.click()
+      }
+    })
+    .catch(async () => {
+      console.log('webglErrorButton.click() failed')
+    })
 
   if (username && password) {
     log('Authenticating')

src/shared/libs/plugin-construct/export-c3p.ts

@@ -27,9 +27,9 @@ export const exportAction = createAction({
   },
   outputs: {
     folder: {
-      type: 'data',
+      type: 'path',
       value: undefined as undefined | string,
-      label: 'Folder'
+      label: 'Exported zip'
       // schema: schema.string()
     }
   },