fix: 1

src/index.tsx

@@ -12,11 +12,11 @@ const root = ReactDOM.createRoot(
 );
 
 root.render(
-  <React.StrictMode>
+  // <React.StrictMode>
     <ConfigProvider locale={zhCN}>
       <AppStore>
         <AppRouter />
       </AppStore>
     </ConfigProvider>
-  </React.StrictMode>
+  // </React.StrictMode>
 );

src/public.scss

@@ -42,4 +42,29 @@ html, body, #root {
 .disabled {
   opacity: .3;
   pointer-events: none !important;
-}
+}
+
+.cell {
+  padding: 0 !important;
+  line-height: 20px !important;
+
+  .value-viewer-content {
+    padding: 0 !important;
+    font-size: 12px;
+    overflow: hidden;
+    white-space: normal;
+    line-height: 24px;
+  }
+  
+}
+.data-grid-container .body-container {
+  height: auto !important;
+
+  .value-viewer-content {
+    padding: 0 !important;
+    font-size: 12px;
+    overflow: hidden;
+    white-space: normal;
+    line-height: 24px;
+  }
+}

src/views/draw-file/eshape.tsx

@@ -69,6 +69,7 @@ const ContentInput = ({ shape }: { shape: ExtractShape<'content'> }) => {
   
   const onChange = (data: any) => {
     const newContent = [...content]
+    newContent[data.rowIndex] = [...newContent[data.rowIndex]] 
     newContent[data.rowIndex][data.key] = data.newValue
     setContent(newContent)
   }
@@ -80,17 +81,41 @@ const ContentInput = ({ shape }: { shape: ExtractShape<'content'> }) => {
   const onInsert = () => {
     setContent([...content, refer.map(() => '')])
   }
+  const onSubmit = () => {
+    const rowEls = Array.from(document.querySelectorAll('#edit-table .body-container .row-container')) as HTMLDivElement[]
+    const bound = rowEls.map(row => {
+      const cells = Array.from(row.querySelectorAll('.cell')) as HTMLDivElement[]
+      return {
+        height: row.offsetHeight - 1,
+        cellWidths: cells.slice(0, -1).map(cell => cell.offsetWidth)
+      }
+    })
+
+    console.log(bound, content)
+  }
+
+  useEffect(() => {
+    if (!edit) {
+      setContent(shape.data.content || [['', '']])
+    }
+  }, [edit, shape.data.content])
 
   return (
     <Form.Item label="内容">
       <Button type="primary" onClick={() => setEdit(true)}>编辑</Button>
-      <Modal open={edit} onCancel={() => setEdit(false)}>
-        <ReactEditeTable 
-          {...tableAttrs}
-          onDelete={onDelete}
-          onChange={onChange} 
-        />
-        <PlusOutlined onClick={onInsert} />
+      <Modal open={edit} onCancel={() => setEdit(false)} onOk={onSubmit}>
+        <div id="edit-table">
+          <ReactEditeTable 
+            {...tableAttrs}
+            onDelete={onDelete}
+            onChange={onChange} 
+          />
+          <div className={style['add-table-row']}>
+            <Button onClick={onInsert} type="primary">
+              <PlusOutlined className="icon" /> 行
+            </Button>
+          </div>
+        </div>
       </Modal>
     </Form.Item>
   )

src/views/draw-file/modal.tsx

@@ -2,60 +2,70 @@ import { Input, Modal } from 'antd'
 import { useEffect, useRef, useState } from 'react'
 import AMapLoader from '@amap/amap-jsapi-loader';
 import style from './style.module.scss'
-import html2canvas from 'html2canvas'
+// import html2canvas from 'html2canvas'
 import { SceneType, SceneTypeDomain, SceneTypePaths } from 'constant';
 import { getHref } from 'utils';
 import { asyncLoading } from 'components/loading';
 
 
 const domScreenshot = async (dom: HTMLElement, foreignObjectRendering: boolean) => {
-  const imgs = Array.from(dom.querySelectorAll('img'))
-  try {
-    await Promise.all(
-      imgs.map(img => {
-        if (!img.src) {
-          return null;
-        }
-        const req = fetch(img.src, {
-          method: 'get'
-        })
-        return req
-          .then(res => res.blob())
-          .then(blob => {
-            const render = new FileReader()
-            return new Promise<void>(resolve => {
-              render.onload = e => {
-                if (e.target?.result) {
-                  img.src = e.target?.result as string
-                }
-                resolve()
-              }
-              render.readAsDataURL(blob)
-            })
-          })
-      }) 
-    )
-  } catch {
-  }
-
-  const canvas = await html2canvas(dom, {
-    allowTaint: true,
-    useCORS: true,
-    imageTimeout: 0,
-    removeContainer: false,
-    foreignObjectRendering,
-    width: dom.offsetWidth,
-    height: dom.offsetHeight
-  })
-
-  await new Promise(resolve => setTimeout(resolve, 3000))
-
+  const canvas = (dom.tagName.toUpperCase() === 'CANVAS' ? dom : dom.querySelector('canvas')) as HTMLCanvasElement
   return new Promise<Blob | null>(resolve => {
+    if (!canvas) {
+      resolve(null)
+    }
     canvas.toBlob((blob) => {
-      console.error('=====>aaa', blob, dom)
+      console.log(blob)
+      if (blob) {
+        window.open(URL.createObjectURL(blob))
+      }
       resolve(blob)
     })
   })
+  // const imgs = Array.from(dom.querySelectorAll('img'))
+  // try {
+  //   await Promise.all(
+  //     imgs.map(img => {
+  //       if (!img.src) {
+  //         return null;
+  //       }
+  //       const req = fetch(img.src, {
+  //         method: 'get'
+  //       })
+  //       return req
+  //         .then(res => res.blob())
+  //         .then(blob => {
+  //           const render = new FileReader()
+  //           return new Promise<void>(resolve => {
+  //             render.onload = e => {
+  //               if (e.target?.result) {
+  //                 img.src = e.target?.result as string
+  //               }
+  //               resolve()
+  //             }
+  //             render.readAsDataURL(blob)
+  //           })
+  //         })
+  //     }) 
+  //   )
+  // } catch {
+  // }
+
+  // const canvas = await html2canvas(dom, {
+  //   allowTaint: true,
+  //   useCORS: true,
+  //   imageTimeout: 0,
+  //   removeContainer: false,
+  //   foreignObjectRendering,
+  //   width: dom.offsetWidth,
+  //   height: dom.offsetHeight
+  // })
+
+  // return new Promise<Blob | null>(resolve => {
+  //   canvas.toBlob((blob) => {
+  //     resolve(blob)
+  //   })
+  // })
 }
 
 
@@ -177,15 +187,22 @@ export const SelectFuse = (props: SelectImageProps & {caseId: number}) => {
 
   const onSubmit = async () => {
     if (iframeRef.current?.contentWindow) {
+      const iframeElement = iframeRef.current.contentWindow.document.documentElement
+
       let fuseBody: Element | null = null
       if (!fuseBody) {
-        const iframe = iframeRef.current.contentWindow.document.documentElement.querySelector('.external') as HTMLIFrameElement
-        fuseBody = iframe?.contentWindow?.document.documentElement || null
+        const iframe = iframeElement.querySelector('.external') as HTMLIFrameElement
+        const childElement = iframe?.contentWindow?.document.documentElement
+        if (childElement) {
+          fuseBody = childElement.querySelector('.scene-canvas > canvas') || 
+            childElement.querySelector('.player[name="main"] > canvas') || 
+            childElement
+        }
+        console.log(fuseBody)
       }
       if (!fuseBody) {
-        fuseBody = iframeRef.current.contentWindow.document.documentElement.querySelector('.scene-canvas')
+        fuseBody = iframeElement.querySelector('.scene-canvas > canvas')
       }
-      console.log(fuseBody)
       if (fuseBody) {
         const blob = await domScreenshot(fuseBody as HTMLElement, true)
         if (blob) {

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

@@ -210,7 +210,10 @@
 }
 
 .def-map-info {
+  margin-top: 10px;
   p {
+    font-size: 14px;
+    color: rgba(0,0,0,0.85);
     display: inline;
     &:not(:last-child)::after {
       content: ',';
@@ -246,4 +249,9 @@ body {
     width: 100%;
     height: 100%;
   }
+}
+
+.add-table-row {
+  text-align: center;
+  margin: 10px;
 }