feat: 对接uiSelect

package.json

@@ -49,11 +49,17 @@
     "eject": "craco eject"
   },
   "eslintConfig": {
-    "extends": "react-app", 
-    "rules": { 
-      "no-undef": "off", 
-      "no-restricted-globals": "off", 
-      "no-unused-vars": "off" 
+    "extends": "react-app",
+    "rules": {
+      "no-undef": "off",
+      "default-case": "off",
+      "no-useless-constructor":"off",
+      "no-mixed-operators": "off",
+      "no-unreachable": "off",
+      "getter-return": "off",
+      "eqeqeq": "off",
+      "no-restricted-globals": "off",
+      "no-unused-vars": "off"
     }
   },
   "browserslist": {

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

@@ -78,6 +78,8 @@ export const create = (store, canvas) => {
 
   const layer = new Layer()
   layer.start(canvas, store)
+  console.log(layer)
+
   const board = {
     bus: refs.bus,
     el: canvas,
@@ -89,6 +91,9 @@ export const create = (store, canvas) => {
       generateRefs(newStore)
     },
     readyAddShape(shapeType, onFine) {
+      layer.uiControl.selectUI = shapeType
+
+      console.log(layer.uiControl, shapeType)
       const definePosition = ev => {
         const shape = createShape(refs, { type: shapeType, pos: { x: ev.offsetX, y: ev.offsetY } })
         cleaup()

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

@@ -15,22 +15,22 @@ import fingerPrintSVG from 'assets/svg/fingerPrint.svg'
 import corpseSVG from 'assets/svg/corpse.svg'
 import theBloodSVG from 'assets/svg/theBlood.svg'
 
-export const brokenLine = 'broken'
-export const text = 'text'
-export const table = 'table'
-export const rect = 'rect'
-export const circular = 'circular'
-export const arrow = 'arrow'
-export const icon = 'icon'
-export const cigarette = 'cigarette'
-export const fireoint = 'fireoint'
-export const footPrint = 'footPrint'
-export const footPrintRever = 'footPrintRever'
-export const shoePrint = 'shoePrint'
-export const shoePrintRever = 'shoePrintRever'
-export const fingerPrint = 'fingerPrint'
-export const corpse = 'corpse'
-export const theBlood = 'theBlood'
+export const brokenLine = 'Wall'
+export const text = 'Tag'
+export const table = 'Table'
+export const rect = 'Rectangle'
+export const circular = 'Circle'
+export const arrow = 'Arrow'
+export const icon = 'Icon'
+export const cigarette = 'Cigaret'
+export const fireoint = 'FirePoint'
+export const footPrint = 'LeftFootPrint'
+export const footPrintRever = 'RightFootPrint'
+export const shoePrint = 'LeftShoePrint'
+export const shoePrintRever = 'RightShoePrint'
+export const fingerPrint = 'FingerPrint'
+export const corpse = 'DeadBody'
+export const theBlood = 'BloodStain'
 
 export const labels = [
   brokenLine,

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

@@ -64,7 +64,7 @@ export const ShapeGrids = memo((props: ShapeGridsProps) => {
       const finishCb = readly[1]
       const parent = board.el.parentElement as HTMLDivElement
       const colWidth = gridsSetting.width / gridsSetting.cols
-      const base = readly[0] === 'table' 
+      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 }
 

src/views/draw-file/eshape.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react"
-import { Form, Input, Select } from 'antd'
+import { Button, Form, Input, Modal, Select } from 'antd'
 import { CloseOutlined } from '@ant-design/icons'
 import InputColor from 'react-input-color';
 import style from './style.module.scss'
@@ -41,23 +41,39 @@ const TextInput = ({ shape }: { shape: ExtractShape<'text'> }) => (
   </Form.Item>
 )
 
+const ContentInput = ({ shape }: { shape: ExtractShape<'content'> }) => {
+  const [edit, setEdit] = useState(false)
+  const content = shape.data.content || [[]]
+
+  return (
+    <Form.Item label="内容">
+      <Button type="primary" onClick={() => setEdit(true)}>编辑</Button>
+      <Modal open={edit} onCancel={() => setEdit(false)}>
+        <table>
+          { content.map((tds, i) => (<tr key={i}>{tds.map((td, i) => <td key={i}>{td}</td>)}</tr>)) }
+        </table>
+      </Modal>
+    </Form.Item>
+  )
+}
+
 const shapeCompontes: { [key in ShapeType]: ComponentType<{ shape: any }> } = {
-  broken: ColorInput,
-  text: (props) => <><ColorInput {...props} /><FontSizeInput {...props} /><TextInput {...props} /> </>,
-  table: (props) => <><ColorInput {...props} /><FontSizeInput {...props} /> </>,
-  rect: ColorInput,
-  circular: ColorInput,
-  arrow: ColorInput,
-  icon: ColorInput,
-  cigarette: ColorInput,
-  fireoint: ColorInput,
-  footPrint: ColorInput,
-  footPrintRever: ColorInput,
-  shoePrint: ColorInput,
-  shoePrintRever: ColorInput,
-  fingerPrint: ColorInput,
-  corpse: ColorInput,
-  theBlood: ColorInput
+  Wall: ColorInput,
+  Tag: (props) => <><ColorInput {...props} /><FontSizeInput {...props} /><TextInput {...props} /> </>,
+  Table: (props) => <><ColorInput {...props} /><FontSizeInput {...props} /><ContentInput {...props} /> </>,
+  Rectangle: ColorInput,
+  Circle: ColorInput,
+  Arrow: ColorInput,
+  Icon: ColorInput,
+  Cigaret: ColorInput,
+  FirePoint: ColorInput,
+  LeftFootPrint: ColorInput,
+  RightFootPrint: ColorInput,
+  LeftShoePrint: ColorInput,
+  RightShoePrint: ColorInput,
+  FingerPrint: ColorInput,
+  DeadBody: ColorInput,
+  BloodStain: ColorInput
 }
 
 export type EShapeProps = {

src/views/draw-file/modal.tsx

@@ -47,7 +47,15 @@ const domScreenshot = async (dom: HTMLElement, foreignObjectRendering: boolean)
     width: dom.offsetWidth,
     height: dom.offsetHeight
   })
-  return new Promise<Blob | null>(resolve => canvas.toBlob(resolve))
+
+  await new Promise(resolve => setTimeout(resolve, 3000))
+
+  return new Promise<Blob | null>(resolve => {
+    canvas.toBlob((blob) => {
+      console.error('=====>aaa', blob, dom)
+      resolve(blob)
+    })
+  })
 }
 
 
@@ -169,12 +177,20 @@ export const SelectFuse = (props: SelectImageProps & {caseId: number}) => {
 
   const onSubmit = async () => {
     if (iframeRef.current?.contentWindow) {
-      const fuseBody = iframeRef.current.contentWindow.document.documentElement.querySelector('.scene-canvas')
+      let fuseBody: Element | null = null
+      if (!fuseBody) {
+        const iframe = iframeRef.current.contentWindow.document.documentElement.querySelector('.external') as HTMLIFrameElement
+        fuseBody = iframe?.contentWindow?.document.documentElement || null
+      }
+      if (!fuseBody) {
+        fuseBody = iframeRef.current.contentWindow.document.documentElement.querySelector('.scene-canvas')
+      }
+      console.log(fuseBody)
       if (fuseBody) {
         const blob = await domScreenshot(fuseBody as HTMLElement, true)
         if (blob) {
-          console.log(blob)
-          setOpen(false)
+          window.open(URL.createObjectURL(blob))
+          // setOpen(false)
         }
       }
     }

src/views/draw-file/shapes/index.tsx

@@ -19,22 +19,22 @@ import type { ShapeType } from '../board'
 import type { ComponentType } from 'react'
 
 export const shapes: { [key in ShapeType]: ComponentType } = {
-  broken: brokenLineSVG,
-  text: textSVG,
-  table: tableSVG,
-  rect: rectSVG,
-  circular: circularSVG,
-  arrow: arrowSVG,
-  icon: iconSVG,
-  cigarette: cigaretteSVG,
-  fireoint: fireointSVG,
-  footPrint: footPrintSVG,
-  footPrintRever: footPrintReverSVG,
-  shoePrint: shoePrintSVG,
-  shoePrintRever: shoePrintReverSVG,
-  fingerPrint: fingerPrintSVG,
-  corpse: corpseSVG,
-  theBlood: theBloodSVG
+  Wall: brokenLineSVG,
+  Tag: textSVG,
+  Table: tableSVG,
+  Rectangle: rectSVG,
+  Circle: circularSVG,
+  Arrow: arrowSVG,
+  Icon: iconSVG,
+  Cigaret: cigaretteSVG,
+  FirePoint: fireointSVG,
+  LeftFootPrint: footPrintSVG,
+  RightFootPrint: footPrintReverSVG,
+  LeftShoePrint: shoePrintSVG,
+  RightShoePrint: shoePrintReverSVG,
+  FingerPrint: fingerPrintSVG,
+  DeadBody: corpseSVG,
+  BloodStain: theBloodSVG
 }
 
 export default shapes