zydx-plus 1.35.542 → 1.35.544

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.35.542",
+  "version": "1.35.544",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [

package/src/components/editor2/src/editor.vue

@@ -1,8 +1,14 @@
 <template>
   <div :style="heightStyle" class="edit">
     <div :class="{'ed-head': !titleVertical, 'ed-head-vertical': titleVertical}">
-      <div v-if="titleShow && titleVertical" :style="titleStyle" v-html="title"></div>
-      <div class="ed-title" v-if="titleShow && !titleVertical" :style="titleStyle" v-html="title"></div>
+      <div v-if="titleShow && titleVertical">
+        <div :style="titleStyle" v-html="title"></div>
+        <slot name='titleSuffix'></slot>
+      </div>
+      <div class="ed-title" v-if="titleShow && !titleVertical">
+        <span :style="titleStyle" v-html="title"></span>
+        <slot name='titleSuffix'></slot>
+      </div>
       <div class="ed-but" v-if="readOnly">
         <div class="ed-head-but" v-for="(item,index) in toolbar">
           <button v-if="item.key === 'but'" class="buts" @click="item.onClick(item,info)"
@@ -20,6 +26,7 @@
                 :style="{color: (voiceStatus)? '#4B0C77' :'#000'}">{{ voiceStatus ? '关闭语音' : '语音输入' }}
         </button>
         <button v-if='isShowAiTool' class="buts" @click="showAi">AI助手</button>
+        <slot name='toolBtn'></slot>
       </div>
     </div>
     <zydx-chat v-model='isShowAi'></zydx-chat>
@@ -520,6 +527,10 @@ export default {
       const text2 = text.replace(/[\r\n]/g, '').replace(/\s*/g, '')
       this.editor.chain().focus().insertContentAt(this.selection(), text2).run()
     },
+    addContent(text) {
+      const text2 = text.replace(/[\r\n]/g, '').replace(/\s*/g, '')
+      this.editor.chain().focus().insertContentAt(this.selection(), text2).run()
+    },
     to16kHz(audioData, sampleRate = 44100) {
       const data = new Float32Array(audioData);
       const fitCount = Math.round(data.length * (16000 / sampleRate));

package/src/components/flip/src/flip.vue

@@ -59,7 +59,7 @@
                 <span :dir="item.dir" :style="styleText(item,styles)" v-for="(item,index) in items">{{ item.str }}</span>
               </div>
               <div class="annotationLayer" ref="annotationLayer">
-                <section tabindex="1000" :style="styleAnnotation(item)" v-for="(item,index) in annotations">
+                <section tabindex="1000" @click="annotationTap(item)" :style="styleAnnotation(item)" v-for="(item,index) in annotations">
                   <a :href="item.url" target="_blank"></a>
                 </section>
               </div>
@@ -194,7 +194,8 @@ export default {
       doc: null,
       viewWidth: 0,
       viewHeight: 0,
-      annotations: []
+      annotations: [],
+      annotationsInit: []
     }
   },
   props: {
@@ -249,6 +250,17 @@ export default {
     }
   },
   watch: {
+    annotationsData: {
+      handler: function (val) {
+        if(typeof val === Object) {
+          this.annotations.push(val)
+        }else {
+          this.annotations = val.concat(this.annotationsInit)
+        }
+      },
+      deep: true,
+      immediate: true
+    },
     pointsData: {
       handler: function (val) {
         if (!val) return
@@ -340,6 +352,7 @@ export default {
   },
   methods: {
     annotationTap(v) {
+      if(v.url) return
       this.$emit('annotationTap',v)
     },
     // 添加标注
@@ -348,7 +361,7 @@ export default {
       let timestamp = 'flip' + Math.random().toString(36).substr(2)
       this.replaceSelectedStrByEle(timestamp)
       const elements = document.querySelectorAll(`.${timestamp}`)[0];
-      if(!elements) return
+      if(!elements) return next(false)
       const wid = this.$refs.wrap.offsetWidth - 10
       const hei = this.$refs.wrap.offsetHeight - 10
       const hei2 = elements.offsetHeight - 8
@@ -414,10 +427,10 @@ export default {
       return range
     },
     styleAnnotation(v) {
-      const x1 = (v.rect[0] * this.scales / this.viewport.width) * 100
-      const y1 = ((this.viewport.height - (v.rect[1] * this.scales)) / this.viewport.height) * 100
-      const x2 = (((v.rect[2] - v.rect[0]) * this.scales) / this.viewport.width) * 100
-      const y2 = (((v.rect[3] - v.rect[1]) * this.scales) / this.viewport.height) * 100
+      const x1 = (v.rect[0] * this.scales / this.viewport?.width) * 100
+      const y1 = ((this.viewport?.height - (v.rect[1] * this.scales)) / this.viewport?.height) * 100
+      const x2 = (((v.rect[2] - v.rect[0]) * this.scales) / this.viewport?.width) * 100
+      const y2 = (((v.rect[3] - v.rect[1]) * this.scales) / this.viewport?.height) * 100
       return {
         'left': x1 - 0.2 + '%',
         'top': (y1 - y2) - 0.2 + '%',
@@ -532,6 +545,7 @@ export default {
       } else {
         this.points.pop()
       }
+      this.$emit('drawEnd', this.points,'backward')
       this.clearRect()
     },
     // 鼠标
@@ -844,6 +858,8 @@ export default {
           i--
         }
       }
+      console.log('delChart')
+      this.$emit('drawEnd', this.points,'del')
       this.clearRect()
     },
     // 绘制
@@ -893,7 +909,7 @@ export default {
     turnText() {
       if (this.textStart) return
       if (this.state === 'text') {
-        const text = this.$refs.textInput.innerText
+        const text = this.$refs.textInput.innerText || '输入文字'
         this.contenteditable = false
         this.state = null
         if (text === '') {
@@ -979,6 +995,7 @@ export default {
         color: obj.color,
         size: obj.size,
       })
+      this.$emit('drawEnd', this.points)
     },
     // 画箭头
     arrow(obj, type) {
@@ -1024,6 +1041,7 @@ export default {
           color: obj.color,
           border: obj.border,
         })
+        this.$emit('drawEnd', this.points)
       }
     },
     // 画直线
@@ -1055,6 +1073,7 @@ export default {
           color: obj.color,
           border: obj.border,
         })
+        this.$emit('drawEnd', this.points)
       }
     },
     // 画圆
@@ -1086,6 +1105,7 @@ export default {
           color: obj.color,
           border: obj.border,
         })
+        this.$emit('drawEnd', this.points)
       }
     },
     // 画矩形
@@ -1116,6 +1136,7 @@ export default {
           color: obj.color,
           border: obj.border,
         })
+        this.$emit('drawEnd', this.points)
       }
     },
     // 画线
@@ -1136,6 +1157,9 @@ export default {
       this.ctx.stroke()
       this.ctx.closePath()
       this.points.push(obj)
+      if(obj.start === 'end'){
+        this.$emit('drawEnd', this.points)
+      }
     },
     clearRect(v) {
       const width = this.canvasStyle.widthCanvas
@@ -1244,24 +1268,31 @@ export default {
       for (let i = 0; i < this.points.length; i++) {
         if (this.points[i].index === this.pageIndex) {
           if (this.points[i].type === 'line') {
+            console.log('type1',this.points[i].type)
             this.lineProcessing(this.points[i], this.points[i + 1], {x: 0, y: 0})
           }
           if (this.points[i].type === 'rectangle') {
+            console.log('type2',this.points[i].type)
             this.rectangleProcessing(this.points[i], {x: 0, y: 0})
           }
           if (this.points[i].type === 'circular') {
+            console.log('type3',this.points[i].type)
             this.circularProcessing(this.points[i], {x: 0, y: 0})
           }
           if (this.points[i].type === 'straight') {
+            console.log('type4',this.points[i].type)
             this.straightProcessing(this.points[i], {x: 0, y: 0})
           }
           if (this.points[i].type === 'arrow') {
+            console.log('type5',this.points[i].type)
             this.arrowProcessing(this.points[i], {x: 0, y: 0})
           }
           if (this.points[i].type === 'text') {
+            console.log('type6',this.points[i].type)
             this.textProcessing(this.points[i], {x: 0, y: 0})
           }
           if (this.points[i].type === 'sign') {
+            console.log('type7',this.points[i].type)
             this.signProcessing(this.points[i], {x: 0, y: 0})
           }
         }
@@ -1362,7 +1393,7 @@ export default {
             let viewport = page.getViewport({scale: that.scales})
             that.viewport = viewport
             const sc = (viewport.width / viewport.height).toFixed(2)
-            const wid = that.$refs.wrap.offsetWidth - 10
+            const wid = that.$refs.wrap?.offsetWidth - 10
             const hei = wid / sc
             canvas.width = wid * that.sratio
             canvas.height = hei * that.sratio
@@ -1390,6 +1421,7 @@ export default {
               that.styles = res.styles
             })
             page.getAnnotations().then((res) => {
+              that.annotationsInit = res
               that.annotations = res.concat(that.annotationsData)
             })
             that.loading = false
@@ -1466,7 +1498,8 @@ export default {
                 item.styles = res.styles
               })
               page.getAnnotations().then((res) => {
-                item.annotations = res
+                that.annotationsInit = res
+                that.annotations = res.concat(that.annotationsData)
               })
               that.loading = false
               if (that.oneIndex === 'right') {

package/src/components/sketchpad/src/sketchpad.vue

@@ -6,9 +6,10 @@
 <script>
 import {createElement} from 'react'
 import {createRoot} from 'react-dom/client'
-import {AssetRecordType,createShapeId, Tldraw, FileHelpers} from 'tldraw'
+import {AssetRecordType,createShapeId, Tldraw} from 'tldraw'
 import 'tldraw/tldraw.css'
-import * as buffer from "buffer"; //引入buffer
+import * as buffer from "buffer";
+import {debounce} from "../../utils"; //引入buffer
 
 if (typeof window.Buffer === "undefined") { // 判断当前环境是否有Buffer对象
   window.Buffer = buffer.Buffer; // Buffer对象不存在则创建导入的buffer
@@ -153,7 +154,14 @@ export default {
     },
     handleMountedEditor(editor) {
       editorAPP = editor
-      // console.log('editorAPP',editorAPP);
+      editorAPP.sideEffects.registerAfterChangeHandler('shape', debounce((next)=> {
+        // there can only be one red shape at a time:
+        this.$emit('shapeChangeHandler', next);
+      },300))
+      editorAPP.sideEffects.registerAfterDeleteHandler('shape', (shape) => {
+        // if the last shape in a frame is deleted, delete the frame too:
+        this.$emit('shapeDeleteHandler', shape);
+      })
       editorAPP.setCameraOptions({ isLocked: this.cameraIsLocked })
       editorAPP.updateInstanceState({ isToolLocked: this.isToolLocked })
       if (this.top) {
@@ -174,12 +182,13 @@ export default {
     // 清空
     clear() {
       // editorAPP.store.loadSnapshot(clearJson)
-      let graphicIds = []
-      for(let key in editorAPP.store.query.atoms.current) {
-        if(key.split(':')[0]==='shape') {
-          graphicIds.push(key)
-        }
-      }
+      editorAPP.selectAll()
+      let graphicIds = editorAPP.getSelectedShapeIds()
+      // for(let key in editorAPP.store.query.atoms.current) {
+      //   if(key.split(':')[0]==='shape') {
+      //     graphicIds.push(key)
+      //   }
+      // }
       editorAPP.deleteShapes(graphicIds)
     },
     // 添加快照

package/src/components/utils/index.js

@@ -10,4 +10,16 @@ export function debounce(fn, delay = debounceTimer) {
             fn.apply(that, args)
         }, delay)
     }
+}
+export function throttle(fn, limit=debounceTimer) {
+    let inThrottle;
+    return function() {
+        const args = arguments;
+        const context = this;
+        if (!inThrottle) {
+            fn.apply(context, args);
+            inThrottle = true;
+            setTimeout(() => { inThrottle = false; }, limit);
+        }
+    };
 }

package/src/index.js

@@ -89,7 +89,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.35.542',
+    version: '1.35.544',
     install,
     Calendar,
     Message,