innerRef.current!.focus()}
161 | onDoubleClick={() => setEditable(true)}
162 | className='relative h-[400px] w-[400px] shrink-0 cursor-default break-all rounded bg-white/90 py-4 pr-4 font-medium outline-2 outline-offset-2 outline-focus focus:outline'
163 | onKeyDown={event => {
164 | if (event.key === 'Enter' && !event.shiftKey) {
165 | event.preventDefault()
166 | generateNextSibling()
167 | } else if (event.key === 'Tab') {
168 | event.preventDefault()
169 | generateChild()
170 | } else if (!editable && (event.key === 'Delete' || event.key === 'Backspace')) {
171 | deleteCurrent()
172 | }
173 | }}
174 | />
175 | )
176 | } else
177 | return (
178 |
setEditable(true)}
183 | onBlur={() => {
184 | setEditable(false)
185 | }}
186 | onKeyDown={event => {
187 | if (event.key === 'Enter') {
188 | if (editable) {
189 | if (!event.shiftKey) {
190 | setEditable(false)
191 | }
192 | } else {
193 | event.preventDefault()
194 | generateNextSibling()
195 | }
196 | } else if (event.key === 'Tab') {
197 | if (editable) {
198 | event.preventDefault()
199 | setEditable(false)
200 | } else {
201 | event.preventDefault()
202 | generateChild()
203 | }
204 | } else if (event.key === 'Escape') {
205 | setEditable(false)
206 | } else if (
207 | (!editable || innerRef.current!.innerHTML === '') &&
208 | (event.key === 'Delete' || event.key === 'Backspace')
209 | ) {
210 | deleteCurrent()
211 | } else if (editable && event.key === 'e' && innerRef.current?.innerText === '/cod') {
212 | event.preventDefault()
213 | setValue('')
214 | setType('code')
215 | } else if (
216 | !editable &&
217 | !/^.{2,}/.test(event.key) &&
218 | !event.shiftKey &&
219 | !event.altKey &&
220 | !event.metaKey &&
221 | !event.ctrlKey
222 | ) {
223 | setEditable(true)
224 | }
225 | }}
226 | contentEditable={editable}
227 | className={clsx('mind-node', current && current === innerRef.current && 'selected')}
228 | id='mind-node'
229 | style={{ maxWidth, minWidth, ...style }}
230 | />
231 | )
232 | })
233 |
234 | const EditableNode = memo(_EditableNode)
235 |
236 | export default EditableNode
237 |
238 | const styleReducer: React.Reducer<
239 | React.CSSProperties,
240 | { type: 'setWidth' | 'setMinWidth' | 'setMaxWidth' | 'setHeight' | 'setBackgroundColor'; payload: string | number }
241 | > = (style, action) => {
242 | switch (action.type) {
243 | case 'setWidth':
244 | return { ...style, width: action.payload }
245 | case 'setMinWidth':
246 | return { ...style, minWidth: action.payload }
247 | case 'setMaxWidth':
248 | return { ...style, maxWidth: action.payload }
249 | case 'setHeight':
250 | return { ...style, height: action.payload }
251 | case 'setBackgroundColor':
252 | return { ...style, backgroundColor: String(action.payload) }
253 |
254 | default: {
255 | throw Error('Unknown action: ' + action.type)
256 | }
257 | }
258 | }
259 |
--------------------------------------------------------------------------------
/src/components/mind-container.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from 'react'
2 | import { useSpring, animated } from '@react-spring/web'
3 | import { containerState, controls } from '@/share'
4 | import { createUseGesture, dragAction, pinchAction, wheelAction } from '@use-gesture/react'
5 | import Scene from '@/themes/sunset/scene'
6 | import { containerListener } from '@/hooks/useSelectState'
7 | import { MAX_SCALE, MIN_SCALE } from '@/consts'
8 |
9 | const useGesture = createUseGesture([dragAction, pinchAction, wheelAction])
10 |
11 | export default function MindContainer({ children }: PropsWithChildren) {
12 | const [springs, api] = useSpring(() => ({
13 | from: { x: containerState.x(), y: containerState.y(), scale: containerState.scale },
14 | config: { tension: 100, friction: 5, mass: 0.1 }
15 | }))
16 |
17 | // Initialize controls in share file
18 | useEffect(() => {
19 | controls.setScale = (s: number) => {
20 | containerState.scale = s
21 | api.start({ scale: s })
22 | }
23 | controls.clearOffset = () => {
24 | containerState.offsetX = 0
25 | containerState.offsetY = 0
26 | containerState.initialX = 0
27 | containerState.initialY = 0
28 | containerState.wheelX = 0
29 | containerState.wheelY = 0
30 | api.start({ x: 0, y: 0 })
31 | }
32 | }, [api])
33 |
34 | const containerRef = useRef
(null)
35 |
36 | // Prevent default gesture event
37 | useEffect(() => {
38 | const handler = (e: Event) => e.preventDefault()
39 | document.addEventListener('gesturestart', handler)
40 | document.addEventListener('gesturechange', handler)
41 | document.addEventListener('gestureend', handler)
42 |
43 | return () => {
44 | document.removeEventListener('gesturestart', handler)
45 | document.removeEventListener('gesturechange', handler)
46 | document.removeEventListener('gestureend', handler)
47 | }
48 | }, [])
49 |
50 | useGesture(
51 | {
52 | onPinch: ({ offset: [s] }) => {
53 | api.start({ scale: s })
54 | containerState.scale = s
55 | },
56 | onDrag: ({ offset, target, cancel, pinching }) => {
57 | if (pinching) return cancel()
58 |
59 | containerState.offsetX = offset[0]
60 | containerState.offsetY = offset[1]
61 | api.set({ x: containerState.x(), y: containerState.y() })
62 | },
63 | onWheel: ({ offset, pinching, event }) => {
64 | if (!pinching && !event.ctrlKey) {
65 | containerState.wheelX = offset[0]
66 | containerState.wheelY = offset[1]
67 | api.set({ x: containerState.x(), y: containerState.y() })
68 | } else {
69 | offset[0] = containerState.wheelX
70 | offset[1] = containerState.wheelY
71 | }
72 | }
73 | },
74 | {
75 | target: containerRef,
76 | pinch: { scaleBounds: { min: MIN_SCALE, max: MAX_SCALE }, rubberband: true },
77 | drag: { pointer: { keys: false, buttons: 'ontouchstart' in window ? 1 : 4 } }
78 | }
79 | )
80 |
81 | // Grabbing cursor
82 | useEffect(() => {
83 | const mousedownHandler = (event: MouseEvent) => {
84 | if ((event.button === 1 || event.buttons === 4) && containerRef.current) {
85 | containerRef.current.style.cursor = 'grabbing'
86 | }
87 | }
88 | const mouseupHandler = (event: MouseEvent) => {
89 | if ((event.button === 1 || event.buttons === 4) && containerRef.current) {
90 | containerRef.current.style.cursor = 'auto'
91 | }
92 | }
93 |
94 | containerRef.current?.addEventListener('mousedown', mousedownHandler)
95 | containerRef.current?.addEventListener('mouseup', mouseupHandler)
96 |
97 | return () => {
98 | containerRef.current?.removeEventListener('mousedown', mousedownHandler)
99 | containerRef.current?.removeEventListener('mouseup', mouseupHandler)
100 | }
101 | }, [])
102 |
103 | return (
104 |
109 |
110 |
111 |
112 |
113 |
114 | {children}
115 |
116 |
117 |
124 |
125 |
145 |
165 |
185 |
186 |
206 |
207 |
208 |
209 |
210 |
211 | Fill
212 |
213 |
216 |
217 |
218 |
219 |
220 |
221 |
222 | Text
223 |
224 |
227 |
228 |
243 |
244 |
245 |
248 |
251 |
254 |
255 |
256 |
257 |
262 |
Null
263 |
Please select the node
264 |
68 |
75 |
76 |
77 |
78 | ),
79 | [generateNextSibling, generateNextSibling, generateChild]
80 | )
81 |
82 | // Save feature: Push current state object to the stateStore.
83 | useEffect(() => {
84 | const currentNode: MindNode = {
85 | id: node.id,
86 | value: contentRef.current?.getContent() || '',
87 | parentID,
88 | type: contentRef.current?.getType() || 'text',
89 | style: contentRef.current?.getStyle()
90 | }
91 | if (currentNode.type === 'code') currentNode.code = contentRef.current?.getCode() || ''
92 |
93 | stateStore.current.push(currentNode)
94 | }, [saveFlag])
95 |
96 | const distance_amend = amendDistance(distance, children)
97 |
98 | if (Array.isArray(children) && children.length > 0) {
99 | return (
100 |
101 | {SingleNode}
102 |
103 | {children.map((item, index) => (
104 |
113 | ))}
114 |
115 |
11 |
12 |
13 |
14 |
15 |
27 |
39 |
40 | {/*
*/}
41 |
${marginElement.outerHTML}
${contentElement.outerHTML}
9 | 
10 |