fix: 对接cad

package.json

@@ -16,6 +16,7 @@
     "@types/node": "^16.11.45",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
+    "@types/react-grid-layout": "^1.3.2",
     "antd": "^4.21.7",
     "axios": "^0.27.2",
     "canvas-nest.js": "^2.0.4",
@@ -30,6 +31,7 @@
     "mitt": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-grid-layout": "^1.3.4",
     "react-input-color": "^4.0.1",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",
@@ -47,10 +49,12 @@
     "eject": "craco eject"
   },
   "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "extends": "react-app", 
+    "rules": { 
+      "no-undef": "off", 
+      "no-restricted-globals": "off", 
+      "no-unused-vars": "off" 
+    }
   },
   "browserslist": {
     "production": [

pnpm-lock.yaml

@@ -14,6 +14,7 @@ specifiers:
   '@types/node': ^16.11.45
   '@types/react': ^18.0.15
   '@types/react-dom': ^18.0.6
+  '@types/react-grid-layout': ^1.3.2
   antd: ^4.21.7
   axios: ^0.27.2
   canvas-nest.js: ^2.0.4
@@ -29,6 +30,7 @@ specifiers:
   mitt: ^3.0.0
   react: ^18.2.0
   react-dom: ^18.2.0
+  react-grid-layout: ^1.3.4
   react-input-color: ^4.0.1
   react-redux: ^8.0.2
   react-router-dom: ^6.3.0
@@ -52,6 +54,7 @@ dependencies:
   '@types/node': 16.18.3
   '@types/react': 18.0.25
   '@types/react-dom': 18.0.9
+  '@types/react-grid-layout': 1.3.2
   antd: 4.24.4_biqbaboplfbrettd7655fr4n2y
   axios: 0.27.2
   canvas-nest.js: 2.0.4
@@ -66,6 +69,7 @@ dependencies:
   mitt: 3.0.0
   react: 18.2.0
   react-dom: 18.2.0_react@18.2.0
+  react-grid-layout: 1.3.4_biqbaboplfbrettd7655fr4n2y
   react-input-color: 4.0.1_biqbaboplfbrettd7655fr4n2y
   react-redux: 8.0.5_moha6x5fbqoiok2ot63p7hwafm
   react-router-dom: 6.4.3_biqbaboplfbrettd7655fr4n2y
@@ -2707,6 +2711,12 @@ packages:
       '@types/react': 18.0.25
     dev: false
 
+  /@types/react-grid-layout/1.3.2:
+    resolution: {integrity: sha512-ZzpBEOC1JTQ7MGe1h1cPKSLP4jSWuxc+yvT4TsAlEW9+EFPzAf8nxQfFd7ea9gL17Em7PbwJZAsiwfQQBUklZQ==}
+    dependencies:
+      '@types/react': 18.0.25
+    dev: false
+
   /@types/react/18.0.25:
     resolution: {integrity: sha512-xD6c0KDT4m7n9uD4ZHi02lzskaiqcBxf4zi+tXZY98a04wvc0hi/TcCPC2FOESZi51Nd7tlUeOJY8RofL799/g==}
     dependencies:
@@ -3928,6 +3938,11 @@ packages:
       wrap-ansi: 7.0.0
     dev: false
 
+  /clsx/1.2.1:
+    resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
+    engines: {node: '>=6'}
+    dev: false
+
   /co/4.6.0:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
@@ -7197,6 +7212,10 @@ packages:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
     dev: false
 
+  /lodash.isequal/4.5.0:
+    resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
+    dev: false
+
   /lodash.memoize/4.1.2:
     resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
     dev: false
@@ -9341,10 +9360,37 @@ packages:
       scheduler: 0.23.0
     dev: false
 
+  /react-draggable/4.4.5_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==}
+    peerDependencies:
+      react: '>= 16.3.0'
+      react-dom: '>= 16.3.0'
+    dependencies:
+      clsx: 1.2.1
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
   /react-error-overlay/6.0.11:
     resolution: {integrity: sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==}
     dev: false
 
+  /react-grid-layout/1.3.4_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-sB3rNhorW77HUdOjB4JkelZTdJGQKuXLl3gNg+BI8gJkTScspL1myfZzW/EM0dLEn+1eH+xW+wNqk0oIM9o7cw==}
+    peerDependencies:
+      react: '>= 16.3.0'
+      react-dom: '>= 16.3.0'
+    dependencies:
+      clsx: 1.2.1
+      lodash.isequal: 4.5.0
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-draggable: 4.4.5_biqbaboplfbrettd7655fr4n2y
+      react-resizable: 3.0.4_biqbaboplfbrettd7655fr4n2y
+    dev: false
+
   /react-input-color/4.0.1_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-ev1e0IbB/Chc4wWjGu7/UYsxMrSpz9eI/Ix60BBLCxsANzsfQwcw37lno/7v0ih04ug/B9HEBfTcs2GtsfsIrQ==}
     peerDependencies:
@@ -9437,6 +9483,18 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /react-resizable/3.0.4_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-StnwmiESiamNzdRHbSSvA65b0ZQJ7eVQpPusrSmcpyGKzC0gojhtO62xxH6YOBmepk9dQTBi9yxidL3W4s3EBA==}
+    peerDependencies:
+      react: '>= 16.3'
+    dependencies:
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-draggable: 4.4.5_biqbaboplfbrettd7655fr4n2y
+    transitivePeerDependencies:
+      - react-dom
+    dev: false
+
   /react-router-dom/6.4.3_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-MiaYQU8CwVCaOfJdYvt84KQNjT78VF0TJrA17SIQgNHRvLnXDJO6qsFqq8F/zzB1BWZjCFIrQpu4QxcshitziQ==}
     engines: {node: '>=14'}

src/public.scss

@@ -41,5 +41,5 @@ html, body, #root {
 
 .disabled {
   opacity: .3;
-  pointer-events: none;
+  pointer-events: none !important;
 }

src/views/draw-file/board/index.js

@@ -3,6 +3,7 @@ import {
   text,
   table
 } from './shape'
+// import Layer from './editCAD/Layer'
 
 const createShape = (refs, shapeData) => {
   console.log('创建', shapeData)
@@ -25,6 +26,7 @@ const createShape = (refs, shapeData) => {
       shape.setText = (text) => {
         console.log('设置文字', text)
       }
+      break;
     case table:
       shape.setFontSize = (text) => {
         console.log('设置文字大小', text)
@@ -67,14 +69,18 @@ export const create = (store, canvas) => {
     store.shapes.forEach(shapeData => createShape(refs, shapeData))
     createBasemap(store.bgImage)
   }
+
   generateRefs(store)
 
   canvas.addEventListener('click', () => {
     // refs.bus.emit('selectShape', null)
   })
 
+  // const layer = new Layer()
+  // layer.start(canvas, store)
   const board = {
     bus: refs.bus,
+    el: canvas,
     getCurrentStore:() => ({ ...store, ...toStore(refs) }),
     drawStore(newStore) {
       refs.ctx.clearRect(0,0, canvas.width, canvas.height)

src/views/draw-file/dom-shape/index.tsx

@@ -0,0 +1,111 @@
+import { MutableRefObject, memo, useState, useEffect } from 'react'
+import 'react-grid-layout/css/styles.css'
+import style from './style.module.scss'
+import GridLayout from "react-grid-layout"
+
+import type { Board } from '../board'
+import type { Layout, ReactGridLayoutProps } from 'react-grid-layout'
+
+export type ShapeGridsProps = {
+  board: MutableRefObject<Board | undefined>
+}
+const layout: Layout[] = [
+  // { i: "a", x: 0, y: 0, w: 1, h: 2, static: true },
+  // { i: "b", x: 1, y: 8, w: 3, h: 1, minW: 2, maxW: 4 },
+  // { i: "c", x: 8, y: 1, w: 1, h: 2 }
+];
+
+const Shape = () => {
+  return (
+    <div>
+      123123
+    </div>
+  )
+}
+
+const gridsSetting = {
+  isResizable: true,
+  allowOverlap: true,
+  compactType: null,
+  cols: 12,
+  rowHeight: 20,
+  margin: [0, 0],
+  maxRows: 33,
+  width: 940
+}
+
+export const ShapeGrids = memo((props: ShapeGridsProps) => {
+  const [readly, setReadly] = useState<Parameters<Board['readyAddShape']> | null>(null)
+  const [readlyLayout, setReadlyLayout] = useState<Layout | null>(null)
+
+  useEffect(() => {
+    const board = props.board.current
+    if (board) {
+      const raw = board.readyAddShape
+      board.readyAddShape = function (type, onFinsh) {
+        if (['table', 'text'].includes(type)) {
+          setReadly([type, onFinsh])
+          return () => setReadly(null)
+        } else {
+          return raw.call(this, type, onFinsh)
+        }
+      }
+      return () => {
+        setReadly(null)
+        board.readyAddShape = raw
+      }
+    }
+  }, [props.board])
+
+
+  useEffect(() => {
+    const board = props.board.current
+    if (board && readly) {
+      const finishCb = readly[1]
+      const parent = board.el.parentElement as HTMLDivElement
+      const colWidth = gridsSetting.width / gridsSetting.cols
+      const base = readly[0] === 'table' 
+        ? { i: 'ready', w: 2, h: 2, minW: 2, maxW: 6 }
+        : { i: 'ready', w: 2, h: 1, minW: 2, maxW: 1 }
+
+      const finishHandler = () => {
+        finishCb && finishCb()
+        console.log('---?')
+        setReadly(null)
+        setReadlyLayout(null)
+      }
+      const moveHandler = (ev: MouseEvent) => {
+        const offsetCol = Math.floor(ev.offsetX / colWidth)
+        const offsetRow = Math.floor(ev.offsetY / gridsSetting.rowHeight)
+        setReadlyLayout({ ...base, x: offsetCol, y: offsetRow })
+
+        parent.addEventListener('click', finishHandler)  
+      }
+      parent.addEventListener('mousemove', moveHandler)
+      return () => {
+        parent.removeEventListener('mousemove', moveHandler)
+        parent.removeEventListener('click', finishHandler) 
+      }
+    }
+  }, [readly, props.board])
+
+
+  const layoutChange = (a: any) => {
+    console.log(a)
+  }
+
+  return (
+    <GridLayout
+      { ...gridsSetting as ReactGridLayoutProps }
+      className={style['df-board-dom-shapes']}
+      layout={readlyLayout ? [...layout, readlyLayout] : layout}
+      onLayoutChange={layoutChange}
+    >
+      { layout.map(item => <div key={item.i} data-grid={item} children={<Shape />} className={readly ? 'disabled' : ''} /> )}
+      { readlyLayout && <div key={readlyLayout.i} data-grid={readlyLayout} className={`${style['ready-insert']} disabled`}>
+      </div> }
+    </GridLayout>
+  )
+})
+
+export default ShapeGrids

src/views/draw-file/dom-shape/style.module.scss

@@ -0,0 +1,19 @@
+:global(.react-grid-layout).df-board-dom-shapes {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  max-height: 100%;
+  overflow: hidden;
+
+  > * {
+    user-select: none;
+    pointer-events: all;
+    background: red;
+    transition: transform .3s;
+
+    &:global(.react-draggable-dragging) {
+      transition: none;
+      will-change: transform;
+    }
+  }
+}

src/views/draw-file/index.tsx

@@ -50,7 +50,9 @@ const DfBoard = memo(forwardRef((_: {}, ref) => {
 
   return (
     <div className={style['df-board']}>
-      <canvas ref={createBoard}></canvas>
+      <div className={style['df-board-content']}>
+        <canvas ref={createBoard}></canvas>
+      </div>
     </div>
   )
 }))

src/views/draw-file/style.module.scss

@@ -82,7 +82,7 @@
   align-items: center;
   justify-content: center;
 
-  canvas {
+  .df-board-content {
     box-sizing: content-box;
     border: 1px solid #000;
     outline: 10px solid #fff;
@@ -90,6 +90,12 @@
     margin: auto;
     width: 940px;
     height: 670px;
+    position: relative;
+
+    canvas {
+      width: 100%;
+      height: 100%;
+    }
   }
 }