feat: menu, remove remote data d1d7d9f

plantain-00 · Mar 12, 2024 · e0e0eb3 · e0e0eb3
1 parent a729b81
commit e0e0eb3
Show file tree

Hide file tree

Showing 18 changed files with 1,823 additions and 247 deletions.
diff --git a/dev/astronomical-object-simulator/data.ts b/dev/astronomical-object-simulator/data.ts
@@ -0,0 +1,214 @@
+import { SphereContent } from "./model"
+
+export const astronomicalObjectData: SphereContent[] = [
+  {
+    "type": "sphere",
+    "x": 231,
+    "y": 236,
+    "z": 0,
+    "radius": 30,
+    "speed": {
+      "x": -73.70571823105142,
+      "y": 68.12490364773653,
+      "z": 0
+    },
+    "mass": 10000000,
+    "color": 16711680
+  },
+  {
+    "type": "sphere",
+    "x": 446,
+    "y": 353,
+    "z": 0,
+    "radius": 20,
+    "speed": {
+      "x": -102.94373709062597,
+      "y": 168.36353129062343,
+      "z": 0
+    },
+    "mass": 1000,
+    "color": 65280
+  },
+  {
+    "type": "sphere",
+    "x": 398.9843062850506,
+    "y": -117.78508305127633,
+    "z": 0,
+    "radius": 20,
+    "speed": {
+      "x": 153.21723012109481,
+      "y": 57.76555978608411,
+      "z": 0
+    },
+    "mass": 1000,
+    "color": 255
+  },
+  {
+    "type": "sphere",
+    "x": 41.02054841250941,
+    "y": 37.316758024428964,
+    "z": 0,
+    "radius": 30,
+    "speed": {
+      "x": 65.08066514652798,
+      "y": -66.75836078276822,
+      "z": 0
+    },
+    "mass": 10000000,
+    "color": 65535
+  },
+  {
+    "type": "sphere",
+    "x": 3107.5317443426698,
+    "y": -18.917171514406107,
+    "z": 0,
+    "radius": 37.45047072967306,
+    "speed": {
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "mass": 10000000,
+    "color": 54783
+  },
+  {
+    "type": "sphere",
+    "x": 3638.8316388608887,
+    "y": -65.11716234207734,
+    "z": 0,
+    "radius": 45.06522687618144,
+    "speed": {
+      "x": -27.342187113971978,
+      "y": -33.25473001125231,
+      "z": 0
+    },
+    "mass": 10000000,
+    "color": 16711680
+  },
+  {
+    "type": "sphere",
+    "x": 3497.1057910282866,
+    "y": 661.0342986264877,
+    "z": 0,
+    "radius": 37.45047072967306,
+    "speed": {
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "mass": 10000000,
+    "color": 16771584
+  },
+  {
+    "type": "sphere",
+    "x": 635.5477051784671,
+    "y": 307.619425187331,
+    "z": 0,
+    "radius": 20,
+    "speed": {
+      "x": -19.15755965193336,
+      "y": 112.03470856588699,
+      "z": 0
+    },
+    "mass": 1000,
+    "color": 13172480
+  },
+  {
+    "type": "sphere",
+    "x": 839.3864576748671,
+    "y": 249.379781616931,
+    "z": 0,
+    "radius": 20,
+    "speed": {
+      "x": -6.070839258689052,
+      "y": 128.36149928851918,
+      "z": 0
+    },
+    "mass": 1000,
+    "color": 16711829
+  },
+  {
+    "type": "sphere",
+    "x": 813.5021716435781,
+    "y": 97.30960118310884,
+    "z": 0,
+    "radius": 20,
+    "speed": {
+      "x": -0.47910598403916377,
+      "y": 108.26015976138154,
+      "z": 0
+    },
+    "mass": 1000,
+    "color": 7536895
+  },
+  {
+    "type": "sphere",
+    "x": 601.5745797624005,
+    "y": 121.57611933744215,
+    "z": 0,
+    "radius": 20,
+    "speed": {
+      "x": -4.309805634415668,
+      "y": 95.12035518543071,
+      "z": 0
+    },
+    "mass": 1000,
+    "color": 15597823
+  },
+  {
+    "type": "sphere",
+    "x": 998.966956569539,
+    "y": 170.03750534624538,
+    "z": 0,
+    "radius": 20,
+    "speed": {
+      "x": -6.070839258689052,
+      "y": 128.36149928851918,
+      "z": 0
+    },
+    "mass": 1000,
+    "color": 49151
+  },
+  {
+    "type": "sphere",
+    "x": 1110.0310760697196,
+    "y": 39.53716493353312,
+    "z": 0,
+    "radius": 20,
+    "speed": {
+      "x": -6.070839258689052,
+      "y": 128.36149928851918,
+      "z": 0
+    },
+    "mass": 1000,
+    "color": 0
+  },
+  {
+    "type": "sphere",
+    "x": 1201.6589746573686,
+    "y": -93.73977846668356,
+    "z": 0,
+    "radius": 20,
+    "speed": {
+      "x": -6.070839258689052,
+      "y": 128.36149928851918,
+      "z": 0
+    },
+    "mass": 1000,
+    "color": 16756224
+  },
+  {
+    "type": "sphere",
+    "x": 216,
+    "y": 82,
+    "z": 0,
+    "radius": 99.80981915623332,
+    "speed": {
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "mass": 1,
+    "color": 16711680
+  }
+]
diff --git a/dev/cad-editor/cad-editor.tsx b/dev/cad-editor/cad-editor.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { bindMultipleRefs, Position, reactCanvasRenderTarget, reactSvgRenderTarget, useCursorInput, useDragMove, useDragSelect, usePatchBasedUndoRedo, useSelected, useSelectBeforeOperate, useWheelScroll, useWheelZoom, useZoom, usePartialEdit, useEdit, reverseTransformPosition, Transform, getContentsByRegion, getContentByClickPosition, usePointSnap, SnapPointType, scaleByCursorPosition, TwoPointsFormRegion, useEvent, metaKeyIfMacElseCtrlKey, reactWebglRenderTarget, Nullable, zoomToFitPoints, isSamePath, Debug, useWindowSize, Validator, validate, BooleanEditor, NumberEditor, ObjectEditor, iterateItemOrArray, useDelayedAction, useMinimap, useDragRotate, RotationBar, angleToRadian, getPointsBoundingUnsafe, useLocalStorageState, getPolygonFromTwoPointsFormRegion, getTwoPointsFormRegion, reactWebgpuRenderTarget, useGlobalKeyDown, ContentPath } from '../../src'
+import { bindMultipleRefs, Position, reactCanvasRenderTarget, reactSvgRenderTarget, useCursorInput, useDragMove, useDragSelect, usePatchBasedUndoRedo, useSelected, useSelectBeforeOperate, useWheelScroll, useWheelZoom, useZoom, usePartialEdit, useEdit, reverseTransformPosition, Transform, getContentsByRegion, getContentByClickPosition, usePointSnap, SnapPointType, scaleByCursorPosition, TwoPointsFormRegion, useEvent, metaKeyIfMacElseCtrlKey, reactWebglRenderTarget, Nullable, zoomToFitPoints, isSamePath, Debug, useWindowSize, Validator, validate, BooleanEditor, NumberEditor, ObjectEditor, iterateItemOrArray, useDelayedAction, useMinimap, useDragRotate, RotationBar, angleToRadian, getPointsBoundingUnsafe, useLocalStorageState, getPolygonFromTwoPointsFormRegion, getTwoPointsFormRegion, reactWebgpuRenderTarget, useGlobalKeyDown, ContentPath, Menu, getContentsByClickPosition } from '../../src'
 import { produce, enablePatches, Patch, produceWithPatches } from 'immer'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { createRoot } from 'react-dom/client'
@@ -182,6 +182,7 @@ export const CADEditor = React.forwardRef((props: {
   const acquirePointHandler = React.useRef<(r: SnapResult) => void>()
   const acquireContentHandler = React.useRef<(path: readonly ContentPath[]) => void>()
   const acquireRegionHandler = React.useRef<(region: Position[]) => void>()
+  const [contextMenu, setContextMenu] = React.useState<JSX.Element>()
 
   const { x, y, ref: wheelScrollRef, setX, setY } = useWheelScroll<HTMLDivElement>({
     localStorageXKey: props.id + '-x',
@@ -797,6 +798,7 @@ export const CADEditor = React.forwardRef((props: {
       }
       resetCommand?.(true)
       resetEdit()
+      setContextMenu(undefined)
       resetDragSelect()
       resetDragRotate()
       resetDragMove()
@@ -840,21 +842,114 @@ export const CADEditor = React.forwardRef((props: {
     }
   }
   const onContextMenu = useEvent((e: React.MouseEvent<HTMLOrSVGElement, MouseEvent>) => {
+    e.preventDefault()
+    const viewportPosition = { x: e.clientX, y: e.clientY }
+    const p = reverseTransform(viewportPosition)
     if (editPoint?.menu) {
-      const viewportPosition = { x: e.clientX, y: e.clientY }
-      const p = reverseTransform(viewportPosition)
-      onEditContextMenu(p, (menu, getClickHandler) => (
-        <div style={{ position: 'absolute', boxShadow: '0 0 5px black', borderRadius: '5px', padding: '5px', cursor: 'pointer', background: 'white', left: viewportPosition.x + 'px', top: viewportPosition.y + 'px' }}>
-          {menu.map(m => <div key={m.title} onClick={getClickHandler(m)}>{m.title}</div>)}
-        </div>
-      ))
-      e.preventDefault()
+      onEditContextMenu(p, (menu, getClickHandler) => <Menu items={menu.map(m => ({ title: m.title, onClick: getClickHandler(m) }))} style={{ left: viewportPosition.x + 'px', top: viewportPosition.y + 'px' }} />)
       return
     }
+    const items: (core.MenuItem | core.MenuDivider)[] = [
+      {
+        title: 'Undo',
+        disabled: !canUndo,
+        onClick: () => {
+          undo()
+          setContextMenu(undefined)
+        }
+      },
+      {
+        title: 'Redo',
+        disabled: !canRedo,
+        onClick: () => {
+          redo()
+          setContextMenu(undefined)
+        }
+      }
+    ]
     if (lastOperation) {
-      startOperation(lastOperation)
-      e.preventDefault()
+      items.push(
+        { type: 'divider' },
+        {
+          title: lastOperation.name,
+          onClick: () => {
+            startOperation(lastOperation)
+            setContextMenu(undefined)
+          },
+        },
+      )
     }
+    items.push({ type: 'divider' })
+    items.push({
+      title: 'Select All',
+      disabled: editingContent.length === 0,
+      onClick: () => {
+        addSelection(...editingContent.map((_, i) => [i] as ContentPath))
+        setContextMenu(undefined)
+      }
+    })
+    const targets = getContentsByClickPosition(editingContent, p, e.shiftKey ? () => true : isSelectable, getContentModel, contentVisible, 3 / scaleWithViewport)
+    if (targets.length > 0) {
+      items.push({
+        title: 'Select',
+        children: targets.map(t => ({
+          title: editingContent[t[0]]?.type + ' ' + t[0],
+          onClick: () => {
+            addSelection(t)
+            setContextMenu(undefined)
+          }
+        }))
+      })
+    }
+    items.push({ type: 'divider' })
+    items.push({
+      title: 'Cut',
+      disabled: selected.length === 0,
+      onClick: () => {
+        startOperation({ type: 'command', name: 'cut' })
+        setContextMenu(undefined)
+      }
+    })
+    items.push({
+      title: 'Copy',
+      disabled: selected.length === 0,
+      onClick: () => {
+        startOperation({ type: 'command', name: 'copy' })
+        setContextMenu(undefined)
+      }
+    })
+    items.push({
+      title: 'Paste',
+      onClick: () => {
+        startOperation({ type: 'command', name: 'paste' })
+        setContextMenu(undefined)
+      }
+    })
+    items.push({ type: 'divider' })
+    items.push({
+      title: 'Zoom In',
+      onClick: () => {
+        zoomIn()
+        setContextMenu(undefined)
+      }
+    })
+    items.push({
+      title: 'Zoom Out',
+      onClick: () => {
+        zoomOut()
+        setContextMenu(undefined)
+      }
+    })
+    items.push({
+      title: 'Reset',
+      onClick: () => {
+        setScale(1)
+        setX(0)
+        setY(0)
+        setContextMenu(undefined)
+      }
+    })
+    setContextMenu(<Menu items={items} style={{ left: viewportPosition.x + 'px', top: viewportPosition.y + 'px' }} />)
   })
 
   const rebuildRTree = (contents: readonly Nullable<BaseContent>[]) => {
@@ -1071,6 +1166,7 @@ export const CADEditor = React.forwardRef((props: {
         {!readOnly && !snapOffsetActive && commandButtons}
         {commandPanel}
         {editMenu}
+        {contextMenu}
         {!readOnly && snapOffsetInput}
       </div>
       {dragSelectMask}