Control the width/height

.eslintrc.cjs

@@ -16,6 +16,7 @@ module.exports = {
 		'@typescript-eslint/ban-ts-comment': 'off',
 		'@typescript-eslint/no-unsafe-argument': 'off',
 		'react-hooks/exhaustive-deps': 'off',
-		'@typescript-eslint/no-empty-function': 'off'
+		'@typescript-eslint/no-empty-function': 'off',
+		'@typescript-eslint/no-extra-semi': 'off'
 	}
 }

src/components/code-mind.tsx

@@ -3,7 +3,7 @@ import './monacoWorker'
 import { createContext, useEffect, useState } from 'react'
 import MindContainer from './mind-container'
 import MindNode from './mind-node'
-import { getLocalNodeTree, stateStore } from '../lib/save'
+import { stateStore } from '../lib/save'
 import MindControl from './mind-control'
 
 export const MindContext = createContext({
@@ -12,7 +12,7 @@ export const MindContext = createContext({
 	edgeType: 'line',
 	layoutFlag: 0,
 	updateLayout: () => {},
-	defaultMaxWidth: 0,
+	maxWidth: 0,
 	minWidth: 0,
 	saveFlag: 0
 })
@@ -21,24 +21,23 @@ interface Props {
 	distance?: number
 	gap?: number
 	edgeType?: string
-	defaultMaxWidth?: number
+	maxWidth?: number
 	minWidth?: number
 }
 
 export default function CodeMind({
 	distance = 36,
 	gap = 16,
 	edgeType = 'line',
-	defaultMaxWidth = 400,
+	maxWidth = 400,
 	minWidth = 100
 }: Props) {
 	const [layoutFlag, setLayoutFlag] = useState(0)
 	const [saveFlag, setSaveFlag] = useState(0)
 
-	const [node, setNode] = useState(getLocalNodeTree())
-
-	// Initialize save handle
+	// Initialize
 	useEffect(() => {
+		// Initialize save handle
 		stateStore.saveHandle = () => {
 			setSaveFlag(state => ++state)
 		}
@@ -52,12 +51,12 @@ export default function CodeMind({
 				edgeType,
 				layoutFlag,
 				updateLayout: () => setLayoutFlag(state => state + 1),
-				defaultMaxWidth,
+				maxWidth,
 				minWidth,
 				saveFlag
 			}}>
 			<MindContainer>
-				<MindNode node={node} />
+				<MindNode node={stateStore.local} />
 			</MindContainer>
 			<MindControl />
 		</MindContext.Provider>

src/components/editable-node.tsx

@@ -1,7 +1,9 @@
-import { forwardRef, memo, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react'
+import { forwardRef, memo, useContext, useEffect, useImperativeHandle, useReducer, useRef, useState } from 'react'
 import { MindContext } from './code-mind'
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
 import { getMonacoContent } from '@/utils'
+import clsx from 'clsx'
+import { useSelectState } from '@/hooks/useSelectState'
 
 interface Props {
 	generateNextSibling: () => void
@@ -13,9 +15,9 @@ interface Props {
 const _EditableNode = forwardRef<{ getContent: () => string; getType: () => NodeType; getCode: () => string }, Props>(
 	(props, ref) => {
 		const { generateNextSibling, generateChild, deleteCurrent, node } = props
-		const { defaultMaxWidth, minWidth, updateLayout } = useContext(MindContext)
+		const { maxWidth, minWidth, updateLayout } = useContext(MindContext)
 
-		const innerRef = useRef<HTMLDivElement>(null)
+		const innerRef = useRef<NodeElement>(null)
 		const [value, setValue] = useState(node.value)
 		const [type, setType] = useState<NodeType>(node.type || 'text')
 		const [code, setCode] = useState(node.code || '')
@@ -28,6 +30,14 @@ const _EditableNode = forwardRef<{ getContent: () => string; getType: () => Node
 			_setEditable(bool)
 		}
 
+		const [style, dispatchStyle] = useReducer(styleReducer, {})
+		useEffect(() => {
+			if (innerRef.current) {
+				innerRef.current.reactStyle = style
+				innerRef.current.dispatchStyle = dispatchStyle
+			}
+		}, [innerRef.current, style])
+
 		// Update node object values
 		useEffect(() => {
 			node.value = value
@@ -133,6 +143,8 @@ const _EditableNode = forwardRef<{ getContent: () => string; getType: () => Node
 			[type, code, editor]
 		)
 
+		const { current } = useSelectState()
+
 		if (type === 'code') {
 			return editable ? (
 				<div className='h-[400px] w-[400px]  bg-white/90 py-4 pr-4' ref={innerRef}>
@@ -211,9 +223,9 @@ const _EditableNode = forwardRef<{ getContent: () => string; getType: () => Node
 						}
 					}}
 					contentEditable={editable}
-					className='mind-node'
+					className={clsx('mind-node', current === innerRef.current && 'selected')}
 					id='mind-node'
-					style={{ maxWidth: defaultMaxWidth, minWidth }}
+					style={{ maxWidth, minWidth, ...style }}
 				/>
 			)
 	}
@@ -222,3 +234,23 @@ const _EditableNode = forwardRef<{ getContent: () => string; getType: () => Node
 const EditableNode = memo(_EditableNode)
 
 export default EditableNode
+
+const styleReducer: React.Reducer<
+	React.CSSProperties,
+	{ type: 'setWidth' | 'setMinWidth' | 'setMaxWidth' | 'setHeight'; payload: string | number }
+> = (style, action) => {
+	switch (action.type) {
+		case 'setWidth':
+			return { ...style, width: action.payload }
+		case 'setMinWidth':
+			return { ...style, minWidth: action.payload }
+		case 'setMaxWidth':
+			return { ...style, maxWidth: action.payload }
+		case 'setHeight':
+			return { ...style, height: action.payload }
+
+		default: {
+			throw Error('Unknown action: ' + action.type)
+		}
+	}
+}

src/components/mind-container.tsx

@@ -3,6 +3,7 @@ import { useSpring, animated } from '@react-spring/web'
 import { MAX_SCALE, MIN_SCALE, containerState, controls } from '@/share'
 import { createUseGesture, dragAction, pinchAction, wheelAction } from '@use-gesture/react'
 import Scene from '@/themes/sunset/scene'
+import { containerListener } from '@/hooks/useSelectState'
 
 const useGesture = createUseGesture([dragAction, pinchAction, wheelAction])
 
@@ -102,6 +103,7 @@ export default function MindContainer({ children }: PropsWithChildren) {
 		<div
 			ref={containerRef}
 			id='mind-container'
+			onClick={containerListener}
 			className='code-mind relative flex h-full w-full touch-none items-center justify-center overflow-hidden'>
 			<div className='code-mind--center relative flex items-center justify-center'>
 				<animated.div className='absolute flex items-center justify-between' style={springs}>