zydx-plus 1.33.354 → 1.33.355

package/package.json

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

package/src/components/dragPopup/src/dragPopup.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="drag-pop" :class="{trans: transAll}" :style="position" :id="id" @click.stop="dragTap">
-    <div class="drag-head" :style="{'background-color':titleColor}">
+  <div class="drag-pop" :class="{trans: transAll, 'drag-pop-shadow': !fixedStart}" :style="position" :id="id" @click.stop="dragTap">
+    <div v-show="!fixedStart" class="drag-head" :style="{'background-color':titleColor}">
            <span @mousedown.stop="mousedown"
                  @mousemove.stop="mousemove"
                  @mouseup.stop="mouseup"
@@ -14,16 +14,18 @@
         <i v-if="closeShow" @click.stop="close"></i>
       </div>
     </div>
-    <div :class="{'drag-cont': dragStatus || dragTextShow,'drag-conts': !dragStatus || !dragTextShow}"
+    <div :class="{'drag-cont2': fixedStart,'drag-cont': dragStatus || dragTextShow,'drag-conts': !dragStatus || !dragTextShow}"
          @mousemove.stop="footMove" @mouseleave.stop="footMove">
       <div class="drag-cont-slot">
         <slot name="content"></slot>
       </div>
-      <i class="drag-down" v-if="dragStatus" @mousedown.stop="footDown($event,'d')" @mouseup.stop="footUp"></i>
-      <i class="drag-in" v-if="dragStatus" @mousedown.stop="footDown($event,'in')" @mouseup.stop="footUp"></i>
-      <i class="drag-right" v-if="dragStatus" @mousedown.stop="footDown($event,'r')" @mouseup.stop="footUp"></i>
+      <div v-show="!fixedStart">
+        <i class="drag-down" v-if="dragStatus" @mousedown.stop="footDown($event,'d')" @mouseup.stop="footUp"></i>
+        <i class="drag-in" v-if="dragStatus" @mousedown.stop="footDown($event,'in')" @mouseup.stop="footUp"></i>
+        <i class="drag-right" v-if="dragStatus" @mousedown.stop="footDown($event,'r')" @mouseup.stop="footUp"></i>
+      </div>
     </div>
-    <div class="down-text" v-if="dragStatus&&dragTextShow">
+    <div class="down-text" v-if="dragStatus&&dragTextShow&&!fixedStart">
       <div class="down-text-cont">
         <slot name="down"></slot>
 <!--        <img-->
@@ -52,7 +54,9 @@ export default {
       state: false,//是否显示
       clientWidth: 0,
       clientHeight: 0,
-      transAll: false
+      transAll: false,
+      fixedStart: false,
+      initWidth: 1280
     }
   },
   props: {
@@ -64,6 +68,18 @@ export default {
       type: Number,
       default: 400
     },
+    fixed: {
+      type: Boolean,
+      default: false
+    },
+    left: {
+      type: Number,
+      default: 0
+    },
+    top: {
+      type: Number,
+      default: 0
+    },
     titleColor: {
       type: String,
       default: 'rgba(19, 191, 108, 1)'
@@ -114,17 +130,25 @@ export default {
   },
   watch: {
     width: {
-      handler: function (val, oldVal) {
+      handler: function (val) {
         this.footRightOffset = val
       },
       immediate: true
     },
     height: {
-      handler: function (val, oldVal) {
+      handler: function (val) {
         this.footDownOffset = val
       },
       immediate: true
     },
+    fixed: {
+      handler: function (val) {
+        this.fixedStart = val
+        this.init()
+      },
+      immediate: true,
+      deep: true
+    }
   },
   mounted() {
     this.id = Math.random().toString(36).substr(2);
@@ -143,6 +167,21 @@ export default {
     popArr = (pop === null)? [] : JSON.parse(pop)
     popArr.push(this.id)
     sessionStorage.setItem('pop', JSON.stringify(popArr))
+    // 监听滚动
+    window.onscroll = () => {
+      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+      if(this.fixedStart) {
+         this.y = this.top - scrollTop
+      }
+    }
+    // 监听窗口变化
+    window.addEventListener('resize', () => {
+      const wid = document.getElementById('app').offsetWidth
+      if(this.fixedStart) {
+        if(wid <= this.initWidth) return
+        this.x = this.left + (wid-this.initWidth)/2
+      }
+    });
   },
   computed: {
     position() {
@@ -174,10 +213,16 @@ export default {
       this.$emit('dragStatus')
     },
     init() {
-      this.clientWidth = document.documentElement.clientWidth;
-      this.clientHeight = document.documentElement.clientHeight;
-      this.x = this.clientWidth / 2 - this.footRightOffset / 2;
-      this.y = this.clientHeight / 2 - this.footDownOffset / 2;
+      if(this.fixedStart) {
+        const wid = document.getElementById('app').offsetWidth
+        this.x = this.left + (wid-this.initWidth)/2
+        this.y = this.top - document.documentElement.scrollTop
+      }else {
+        this.clientWidth = document.documentElement.clientWidth;
+        this.clientHeight = document.documentElement.clientHeight;
+        this.x = this.clientWidth / 2 - this.footRightOffset / 2;
+        this.y = this.clientHeight / 2 - this.footDownOffset / 2;
+      }
     },
     getWH(v) {
       this.transAll = true
@@ -414,13 +459,15 @@ export default {
   position: fixed;
   top: 0;
   left: 0;
-  box-shadow: 0 0 3px 2px #ccc;
   background-color: #fff;
   border-radius: 3px;
   z-index: 9999;
   animation: linkDown .3s linear forwards;
   opacity: 0;
 }
+.drag-pop-shadow{
+  box-shadow: 0 0 3px 2px #ccc;
+}
 .trans{
   transition: all .3s;
 }
@@ -444,4 +491,8 @@ export default {
   height: calc(100% - 30px);
   position: relative;
 }
+.drag-cont2{
+  height: 100% !important;
+  position: relative;
+}
 </style>

package/src/components/editor/src/butJson.js

@@ -312,7 +312,7 @@ export function butJson(editor, data) {
                     name: '上传附件',
                     key: 'group-upload',
                     childMenuKeys: [],
-                    html: `<p contenteditable="false" data-signId="enclosure"><span style="font-weight: 700;font-size: 16px;">附件列表：</span></p>`
+                    html: `<p data-signId="enclosure"><span style="font-weight: 700;font-size: 16px;">附件列表：</span></p>`
                 },
             ],
         }

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

@@ -3,66 +3,66 @@
 </template>
 
 <script>
-import { createElement } from 'react'
-import { createRoot } from 'react-dom/client'
-import { Tldraw } from 'tldraw'
+import {createElement} from 'react'
+import {createRoot} from 'react-dom/client'
+import {Tldraw} from 'tldraw'
 import 'tldraw/tldraw.css'
 
 const clearJson = {
-  store:{
-    "document:document":{
-      gridSize:10,
-      name:"",
-      meta:{},
-      id:"document:document",
-      typeName:"document"
-    },
-    "page:page":{
-      meta:{},
-      id:"page:page",
-      name:"Page 1",
-      index:"a1",
-      typeName:"page"
+  store: {
+    "document:document": {
+      gridSize: 10,
+      name: "",
+      meta: {},
+      id: "document:document",
+      typeName: "document"
+    },
+    "page:page": {
+      meta: {},
+      id: "page:page",
+      name: "Page 1",
+      index: "a1",
+      typeName: "page"
     }
   },
-  schema:{
-    schemaVersion:1,
-    storeVersion:4,
-    recordVersions:{
-      asset:{
-        version:1,
-        subTypeKey:"type",
-        subTypeVersions:{
-          image:3,
-          video:3,
-          bookmark:1
+  schema: {
+    schemaVersion: 1,
+    storeVersion: 4,
+    recordVersions: {
+      asset: {
+        version: 1,
+        subTypeKey: "type",
+        subTypeVersions: {
+          image: 3,
+          video: 3,
+          bookmark: 1
         }
       },
-      camera:{version:1},
-      document:{version:2},
-      instance:{version:24},
-      instance_page_state:{version:5},
-      page:{"version":1},
-      shape:{
-        version:3,
-        subTypeKey:"type",
-        subTypeVersions:{
-          group:0,
-          text:1,
-          bookmark:2,
-          draw:1,
-          geo:8,
-          note:5,
-          line:4,
-          frame:0,
-          arrow:3,
-          highlight:0,
-          embed:4,
-          image:3,
-          video:2
+      camera: {version: 1},
+      document: {version: 2},
+      instance: {version: 24},
+      instance_page_state: {version: 5},
+      page: {"version": 1},
+      shape: {
+        version: 3,
+        subTypeKey: "type",
+        subTypeVersions: {
+          group: 0,
+          text: 1,
+          bookmark: 2,
+          draw: 1,
+          geo: 8,
+          note: 5,
+          line: 4,
+          frame: 0,
+          arrow: 3,
+          highlight: 0,
+          embed: 4,
+          image: 3,
+          video: 2
         }
       },
-      instance_presence:{version:5},pointer:{version:1}
+      instance_presence: {version: 5}, pointer: {version: 1}
     }
   }
 }
@@ -71,113 +71,252 @@ export default {
   name: "zydx-sketchpad",
   data() {
     return {
-      editor:null
+      editor: null
     }
   },
   mounted() {
+    // 鼠标移入
+    this.$refs.reactRef.addEventListener('mouseover', () => {
+      document.body.style.overflow = 'hidden'
+    });
+    // 鼠标移出
+    this.$refs.reactRef.addEventListener('mouseleave', () => {
+      document.body.style.overflow = 'visible'
+    });
+
     const root = createRoot(this.$refs.reactRef)
     root.render(createElement(Tldraw, {
       onMount: this.handleMountedEditor,
-      hideUi: true
+      hideUi: true, // 隐藏UI
+      // persistenceKey: "example111" // 持久化名字
+      autoFocus: false  // 聚焦
     }, null))
   },
   methods: {
     handleMountedEditor(editor) {
+      console.log('editor', editor)
       this.editor = editor
-      // editor.store.listen((entry) => {
-      //   const up = entry.changes.updated
-      // })
+      setTimeout(() => {
+        document.documentElement.scrollTop = 0
+      }, 0)
     },
     // 清空
     clear() {
       this.editor.store.loadSnapshot(clearJson)
+      this.isFocused()
     },
     // 添加快照
     setSnapshot(v) {
       this.editor.store.loadSnapshot(v)
+      this.isFocused()
     },
     // 获取快照
     getSnapshot() {
       return this.editor.store.getSnapshot()
     },
     draw(v) {
-      this.styleProps('draw','color').defaultValue = v?.color?? 'black'
-      this.styleProps('draw','size').defaultValue = v?.size?? 'm'
+      this.styleProps('draw', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('draw', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('draw', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('draw', 'fill').defaultValue = v?.fill ?? 'none'
       this.editor.setCurrentTool('draw')
     },
     select() {
       this.editor.setCurrentTool('select')
     },
     hand() {
-       this.editor.setCurrentTool('hand')
+      this.editor.setCurrentTool('hand')
     },
     eraser() {
       this.editor.setCurrentTool('eraser')
     },
     arrow(v) {
-      this.styleProps('arrow','color').defaultValue = v?.color?? 'black'
-      this.styleProps('arrow','size').defaultValue = v?.size?? 'm'
+      // 'none', 'semi', 'solid', 'pattern'
+      this.styleProps('arrow', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('arrow', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('arrow', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('arrow', 'fill').defaultValue = v?.fill ?? 'none'
       this.editor.setCurrentTool('arrow')
     },
     text(v) {
-      this.styleProps('arrow','color').defaultValue = v?.color?? 'black'
-      this.styleProps('arrow','size').defaultValue = v?.size?? 'm'
+      this.styleProps('arrow', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('arrow', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('arrow', 'font').defaultValue = v?.font ?? 'draw' //['draw', 'sans', 'serif', 'mono']
+      this.styleProps('arrow', 'align').defaultValue = v?.align ?? 'start'
       this.editor.setCurrentTool('text')
     },
     line(v) {
-      this.styleProps('arrow','color').defaultValue = v?.color?? 'black'
-      this.styleProps('arrow','size').defaultValue = v?.size?? 'm'
+      this.styleProps('arrow', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('arrow', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('arrow', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('arrow', 'fill').defaultValue = v?.fill ?? 'none'
       this.editor.setCurrentTool('line')
     },
     rectangle(v) {
-      this.styleProps('geo','geo').defaultValue = 'rectangle'
-      this.styleProps('geo','color').defaultValue = v?.color?? 'black'
-      this.styleProps('geo','size').defaultValue = v?.size?? 'm'
+      this.styleProps('geo', 'geo').defaultValue = 'rectangle'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
       this.editor.setCurrentTool('geo')
     },
     ellipse(v) {
-      this.styleProps('geo','geo').defaultValue = 'ellipse'
-      this.styleProps('geo','color').defaultValue = v?.color?? 'black'
-      this.styleProps('geo','size').defaultValue = v?.size?? 'm'
+      this.styleProps('geo', 'geo').defaultValue = 'ellipse'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
       this.editor.setCurrentTool('geo')
     },
     triangle(v) {
-      this.styleProps('geo','geo').defaultValue = 'triangle'
-      this.styleProps('geo','color').defaultValue = v?.color?? 'black'
-      this.styleProps('geo','size').defaultValue = v?.size?? 'm'
+      this.styleProps('geo', 'geo').defaultValue = 'triangle'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
+      this.editor.setCurrentTool('geo')
+    },
+
+    rhombus(v) {
+      this.styleProps('geo', 'geo').defaultValue = 'rhombus'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
+      this.editor.setCurrentTool('geo')
+    },
+    cloud(v) {
+      this.styleProps('geo', 'geo').defaultValue = 'cloud'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
+      this.editor.setCurrentTool('geo')
+    },
+    trapezoid(v) {
+      this.styleProps('geo', 'geo').defaultValue = 'trapezoid'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
+      this.editor.setCurrentTool('geo')
+    },
+    diamond(v) {
+      this.styleProps('geo', 'geo').defaultValue = 'diamond'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
       this.editor.setCurrentTool('geo')
     },
     star(v) {
-      this.styleProps('geo','geo').defaultValue = 'star'
-      this.styleProps('geo','color').defaultValue = v?.color?? 'black'
-      this.styleProps('geo','size').defaultValue = v?.size?? 'm'
+      this.styleProps('geo', 'geo').defaultValue = 'star'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
+      this.editor.setCurrentTool('geo')
+    },
+
+    xBox(v) {
+      this.styleProps('geo', 'geo').defaultValue = 'x-box'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
+      this.editor.setCurrentTool('geo')
+    },
+    checkBox(v) {
+      this.styleProps('geo', 'geo').defaultValue = 'check-box'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
+      this.editor.setCurrentTool('geo')
+    },
+    oval(v) {
+      this.styleProps('geo', 'geo').defaultValue = 'oval'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
+      this.editor.setCurrentTool('geo')
+    },
+    arrowLeft(v) {
+      this.styleProps('geo', 'geo').defaultValue = 'arrow-left'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
+      this.editor.setCurrentTool('geo')
+    },
+    arrowRight(v) {
+      this.styleProps('geo', 'geo').defaultValue = 'arrow-right'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
+      this.editor.setCurrentTool('geo')
+    },
+    arrowUp(v) {
+      this.styleProps('geo', 'geo').defaultValue = 'arrow-up'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
+      this.editor.setCurrentTool('geo')
+    },
+    arrowDown(v) {
+      this.styleProps('geo', 'geo').defaultValue = 'arrow-down'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
+      this.editor.setCurrentTool('geo')
+    },
+    hexagon(v) {
+      this.styleProps('geo', 'geo').defaultValue = 'hexagon'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
       this.editor.setCurrentTool('geo')
     },
     highlight(v) {
-      this.styleProps('geo','color').defaultValue = v?.color?? 'black'
-      this.styleProps('geo','size').defaultValue = v?.size?? 'm'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
       this.editor.setCurrentTool('highlight')
     },
     laser() {
       this.editor.setCurrentTool('laser')
     },
-    undo(){
+    undo() {
       this.editor.undo()
     },
-    redo(){
+    redo() {
       this.editor.redo()
     },
-    styleProps(t,e) {
+    styleProps(t, e) {
       const style = [...this.editor.styleProps[t]]
       const index = style.findIndex(item => item[1] === e)
       return style[index][0]
+    },
+    // 重新获取焦点
+    isFocused() {
+      const top = document.documentElement.scrollTop
+      setTimeout(() => {
+        this.editor.updateInstanceState({isFocused: true})
+        document.documentElement.scrollTop = top
+      }, 10)
     }
   }
 }
 </script>
 
 <style scoped>
-.react{
+.react {
   width: 100%;
   height: 100%;
 }

package/src/index.js

@@ -83,7 +83,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.33.354',
+    version: '1.33.355',
     install,
     Calendar,
     Message,