Merge branch 'alpha' into type-fixes

src/engine/HedronEngine.ts

@@ -1,12 +1,12 @@
-import { createEngineStore, EngineStore } from '@engine/store/engineStore'
-import { getSketchesOfModuleId } from '@engine/store/selectors/getSketchesOfModuleId'
-import { listenToStore } from '@engine/storeListener'
-import { createDebugScene } from '@engine/world/debugScene'
-import { Renderer } from '@engine/world/Renderer'
-import { SketchManager } from '@engine/world/SketchManager'
-import { importSketchModule } from '@engine/importSketchModule'
-import { EngineData } from '@engine/store/types'
-import { stripForSave } from '@engine/utils/stripForSave'
+import { createEngineStore, EngineStore } from './store/engineStore'
+import { getSketchesOfModuleId } from './store/selectors/getSketchesOfModuleId'
+import { listenToStore } from './storeListener'
+import { createDebugScene } from './world/debugScene'
+import { Renderer } from './world/Renderer'
+import { SketchManager } from './world/SketchManager'
+import { importSketchModule } from './importSketchModule'
+import { EngineData } from './store/types'
+import { stripForSave } from './utils/stripForSave'
 
 export class HedronEngine {
   private renderer: Renderer

src/engine/store/actionCreators/loadProject.ts

@@ -1,4 +1,4 @@
-import { EngineData, SetterCreator } from '@engine/store/types'
+import { EngineData, SetterCreator } from '../types'
 
 export const createLoadProject: SetterCreator<'loadProject'> =
   (setState) => (project: EngineData) =>

src/engine/store/engineStore.ts

@@ -3,16 +3,16 @@ import { devtools, subscribeWithSelector } from 'zustand/middleware'
 import { immer } from 'zustand/middleware/immer'
 
 import type {} from '@redux-devtools/extension' // required for devtools typing
-import { EngineStateWithActions } from '@engine/store/types'
-import { createAddSketch } from '@engine/store/actionCreators/addSketch'
-import { createSetSketchModuleItem } from '@engine/store/actionCreators/setSketchModuleItem'
-import { createUpdateNodeValue } from '@engine/store/actionCreators/updateNodeValue'
-import { createDeleteSketchModule } from '@engine/store/actionCreators/deleteSketchModule'
-import { createDeleteSketch } from '@engine/store/actionCreators/deleteSketch'
-import { createUpdateSketchParams } from '@engine/store/actionCreators/updateSketchParams'
-import { createReset } from '@engine/store/actionCreators/reset'
-import { createLoadProject } from '@engine/store/actionCreators/loadProject'
-import { initialState } from '@engine/store/initialState'
+import { EngineStateWithActions } from './types'
+import { createAddSketch } from './actionCreators/addSketch'
+import { createDeleteSketch } from './actionCreators/deleteSketch'
+import { createSetSketchModuleItem } from './actionCreators/setSketchModuleItem'
+import { createDeleteSketchModule } from './actionCreators/deleteSketchModule'
+import { createUpdateSketchParams } from './actionCreators/updateSketchParams'
+import { createUpdateNodeValue } from './actionCreators/updateNodeValue'
+import { createReset } from './actionCreators/reset'
+import { createLoadProject } from './actionCreators/loadProject'
+import { initialState } from './initialState'
 
 export const createEngineStore = () =>
   createStore<EngineStateWithActions>()(

src/engine/store/types.ts

@@ -99,6 +99,7 @@ export interface EngineData {
   sketches: Sketches
   nodes: Nodes
   nodeValues: NodeValues
+  selectedNode: string | null
 }
 
 interface AuxState {

src/engine/utils/stripForSave.ts

@@ -1,4 +1,4 @@
-import { EngineState, EngineStateWithActions, EngineData } from '@engine/store/types'
+import { EngineState, EngineStateWithActions, EngineData } from '../store/types'
 
 export const stripForSave = (state: EngineStateWithActions): EngineData => {
   // @ts-expect-error ---

src/main/handlers/openProjectFile.ts

@@ -1,8 +1,8 @@
 import fs from 'fs'
 import path from 'path'
+import { OpenProjectResponse } from '../../shared/Events'
 import { dialog } from 'electron'
-import { OpenProjectResponse } from '@shared/Events'
-import { ProjectData } from '@shared/types'
+import { ProjectData } from '../../shared/types'
 
 export const openProjectFile = async (projectPath?: string): Promise<OpenProjectResponse> => {
   if (!projectPath) {

src/main/handlers/saveProjectFile.ts

@@ -1,8 +1,8 @@
 import fs from 'fs'
 import path from 'path'
 import { dialog } from 'electron'
-import { SaveProjectResponse } from '@shared/Events'
-import { ProjectData } from '@shared/types'
+import { SaveProjectResponse } from '../../shared/Events'
+import { ProjectData } from '../../shared/types'
 
 const isSubdirectory = (parentDir: string, directory: string) => {
   const resolvedParentDir = path.resolve(parentDir)

src/renderer/appStore.ts

@@ -12,12 +12,22 @@ export interface SaveItem {
   numSketches: number
 }
 
+export interface SaveItem {
+  title: string
+  path: string
+  date: number
+  numScenes: number
+  numSketches: number
+}
+
 export interface AppState {
   activeSketchId: string | null
+  selectedNodes: { [key: string]: string }
   sketchesDir: string | null
   globalDialogId: DialogId | null
   currentSavePath: string | null
   saveList: SaveItem[]
+  setSelectedNode: (sketchID: string, nodeId: string) => void
   setActiveSketchId: (id: string) => void
   setSketchesDir: (dir: string) => void
   setGlobalDialogId: (id: DialogId | null) => void
@@ -46,6 +56,7 @@ export const useAppStore = create<AppState>()(
           sketchesDir: null,
           globalDialogId: null,
           currentSavePath: null,
+          selectedNodes: {},
           saveList: [],
           setActiveSketchId: (id: string) => {
             set((state) => {
@@ -81,6 +92,11 @@ export const useAppStore = create<AppState>()(
               }
             })
           },
+          setSelectedNode: (sketchID: string, nodeId: string) => {
+            set((state) => {
+              state.selectedNodes[sketchID] = nodeId
+            })
+          },
         })),
       ),
     ),

src/renderer/components/Intro/Intro.tsx

@@ -1,6 +1,10 @@
 import { formatDistanceToNow } from 'date-fns'
 import { ErrorBoundary } from 'react-error-boundary'
 import c from './Intro.module.css'
+import { Button } from '../core/Button/Button'
+import { Panel, PanelActions, PanelBody, PanelHeader } from '../core/Panel/Panel'
+import { handleLoadProjectDialog, handleSketchesDialog } from '../../handlers/fileHandlers'
+import { SaveItem, useAppStore } from 'src/renderer/appStore'
 import {
   Card,
   CardActions,
@@ -9,14 +13,10 @@ import {
   CardDetails,
   CardHeader,
   CardList,
-} from '@components/core/Card/Card'
-import { handleLoadProjectDialog, handleSketchesDialog } from '@renderer/handlers/fileHandlers'
-import { Panel, PanelActions, PanelBody, PanelHeader } from '@components/core/Panel/Panel'
-import { Button } from '@components/core/Button/Button'
-import { sceneIcon, sketchIcon } from '@components/core/Icon/Icon'
-import { IconList, IconListItem } from '@components/core/IconList/IconList'
-import { pluralize } from '@renderer/utils/pluralize'
-import { SaveItem, useAppStore } from '@renderer/appStore'
+} from '../core/Card/Card'
+import { sceneIcon, sketchIcon } from '../core/Icon/Icon'
+import { IconList, IconListItem } from '../core/IconList/IconList'
+import { pluralize } from 'src/renderer/utils/pluralize'
 
 const RecentProjectItem = ({ item }: { item: SaveItem }) => {
   return (

src/renderer/components/SketchParams/SketchParams.tsx

@@ -1,5 +1,4 @@
 import { ParamWithInfo, useActiveSketchParams } from '@components/hooks/useActiveSketchParams'
-
 import { ParamNumber } from '@components/ParamNumber/ParamNumber'
 import { ParamBoolean } from '@components/ParamBoolean/ParamBoolean'
 import { ParamEnum } from '@components/ParamEnum/ParamEnum'
@@ -11,6 +10,8 @@ import {
   NodeControlTitle,
 } from '@components/core/NodeControl/NodeControl'
 import { ControlGrid } from '@components/core/ControlGrid/ControlGrid'
+import { useOnSelectNode } from '../hooks/useOnSelectNode'
+import { useAppStore } from 'src/renderer/appStore'
 
 interface ParamProps {
   param: ParamWithInfo
@@ -29,9 +30,11 @@ const getInputElement = (valueType: NodeTypes, id: string) => {
   }
 }
 
-const ParamItem = ({ param: { key, title, id, valueType } }: ParamProps) => {
+const ParamItem = ({ param: { key, title, id, sketchId, valueType } }: ParamProps) => {
+  const onSelectNode = useOnSelectNode(sketchId, id)
+  const selected = useAppStore((state) => state.selectedNodes[sketchId])
   return (
-    <NodeControl key={key}>
+    <NodeControl key={key} onClick={onSelectNode} isActive={id === selected}>
       <NodeControlMain>
         <NodeControlTitle>{title ?? key}</NodeControlTitle>
         <NodeControlInner>{getInputElement(valueType, id)}</NodeControlInner>

src/renderer/components/core/IconList/IconList.tsx

@@ -1,5 +1,5 @@
+import { Icon, IconName } from '../Icon/Icon'
 import c from './IconList.module.css'
-import { Icon, IconName } from '@components/core/Icon/Icon'
 
 export interface IconListProps {
   children: React.ReactNode

src/renderer/components/hooks/useOnSelectNode.ts

@@ -0,0 +1,12 @@
+import { useCallback } from 'react'
+import { useAppStore } from 'src/renderer/appStore'
+
+export const useOnSelectNode = (sketchId: string, nodeId: string) => {
+  const selectNode = useAppStore((state) => state.setSelectedNode)
+
+  const onSelectNode = useCallback(() => {
+    selectNode(sketchId, nodeId)
+  }, [sketchId, nodeId, selectNode])
+
+  return onSelectNode
+}

src/renderer/handlers/fileHandlers.ts

@@ -1,13 +1,13 @@
-import path from 'path-browserify'
+import { ProjectData } from 'src/shared/types'
+import { useAppStore } from '../appStore'
+import { engine, engineStore } from '../engine'
 import {
   openProjectFileDialog,
   openSketchesDirDialog,
   saveProjectFileDialog,
   startSketchesServer,
-} from '@renderer/ipc/mainThreadTalk'
-import { engine, engineStore } from '@renderer/engine'
-import { useAppStore } from '@renderer/appStore'
-import { ProjectData } from '@shared/types'
+} from '../ipc/mainThreadTalk'
+import path from 'path-browserify'
 
 const startEngineWithSketchesDir = async (sketchesDirPath: string) => {
   const { moduleIds, url } = await startSketchesServer(sketchesDirPath)

src/renderer/ipc/mainThreadTalk.ts

@@ -1,12 +1,12 @@
-import { ProjectData } from '@shared/types'
 import {
   DialogEvents,
   FileEvents,
   OpenProjectResponse,
   SaveProjectResponse,
   SketchesServerResponse,
   SketchEvents,
-} from '@shared/Events'
+} from 'src/shared/Events'
+import { ProjectData } from '../../shared/types'
 
 export const openSketchesDirDialog = () =>
   new Promise<string | undefined>((resolve) => {

src/shared/Events.ts

@@ -1,4 +1,4 @@
-import { ProjectData } from '@shared/types'
+import { ProjectData } from './types'
 
 export enum SketchEvents {
   StartSketchesServer = 'start-sketches-server',

src/shared/types.ts

@@ -1,4 +1,5 @@
-import { EngineData } from '@engine/store/types'
+import { EngineData } from 'src/engine/store/types'
+
 export interface ProjectData {
   version: number
   engine: EngineData