zydx-plus 1.33.353 → 1.33.355

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.33.353",
+  "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/editor/src/editor.vue

@@ -4,8 +4,7 @@
       <div v-for="(item,index) in butData" class="editor-but">
         <div v-if="uploadTypeArr.indexOf(item.key)  !== -1" class="editor-but-name">
           <label>
-            <input :accept="acceptType[item.key]" style="display: none;" type="file"
-                   @change="upload($event,item.key)">
+            <input :accept="acceptType[item.key]" style="display: none;" type="file" @change="upload($event,item.key)">
             <span v-html="item.name"></span>
           </label>
         </div>
@@ -18,8 +17,7 @@
           <ul v-for="(item2,index2) in item.menuKeys" style="position: relative">
             <li v-if="uploadTypeArr.indexOf(item2.key)  !== -1">
               <label>
-                <input :accept="acceptType[item2.key]" style="display: none;" type="file"
-                       @change="upload($event,item2.key)">
+                <input :accept="acceptType[item2.key]" style="display: none;" type="file" @change="upload($event,item2.key)">
                 <span v-html="item2.name"></span>
               </label>
             </li>
@@ -32,8 +30,7 @@
               <li v-for="(childItem,childIndex) in item2.childMenuKeys" @click="butTap(item,item2,childItem)">
                 <!--                childItem.key === 'uploadImage'-->
                 <label v-if=" uploadTypeArr.indexOf(childItem.key)  !== -1 ">
-                  <input :accept="acceptType[childItem.key]" style="display: none;" type="file"
-                         @change="upload($event,childItem.key)">
+                  <input :accept="acceptType[childItem.key]" style="display: none;" type="file" @change="upload($event,childItem.key)">
                   <span v-html="item2.name"></span>
                 </label>
                 <span v-else v-html="childItem.name"></span>
@@ -304,7 +301,7 @@
 
     <!--  展示弹窗  -->
     <div v-for="(item,index) in interpositionData" :key="index">
-      <zydx-drag-popup v-if="item.isShow"
+      <zydx-drag-popup v-if="item.isShow" :minWidth="640" :minHeight="183"
                        :enlargeShow="false" :minimize="false" :minimizeCir="false"
                        :title="titleDragPopup[item.type]?titleDragPopup[item.type]:'参考文献'" height="auto"
                        width="auto" @close="closeDataShowPopup(item)">
@@ -370,7 +367,7 @@
                      v-html="'删除'"></div>
               </div>
             </div>
-            <div :style="{width: item.type === 'linkCourseware'?'1280px':'885px'}" class="tip-box">
+            <div style="min-width:600px;width: 600px" class="tip-box">
               <div class="tip-title" v-html="`${item.exegesis}`"></div>
               <div class="tip-boxContent">
                 <zydx-read :url="item.url" style="height: 100%"></zydx-read>
@@ -389,7 +386,7 @@
                      v-html="'删除'"></div>
               </div>
             </div>
-            <div :style="{width: item.type === 'linkCourseware'?'1280px':'885px'}" class="tip-box">
+            <div style="min-width:600px;width: 600px" class="tip-box">
               <div class="tip-title" v-html="`${item.exegesis}`"></div>
               <div class="tip-boxContent">
                 <zydx-read :url="item.url" style="height: 100%"></zydx-read>
@@ -408,7 +405,7 @@
                      v-html="'删除'"></div>
               </div>
             </div>
-            <div :style="{width: item.type === 'linkCourseware'?'1280px':'885px'}" class="tip-box">
+            <div style="min-width:600px;width: 600px" class="tip-box">
               <div class="tip-title" v-html="`${item.exegesis}`"></div>
               <div class="tip-boxContent">
                 <zydx-read :url="item.url" style="height: 100%"></zydx-read>
@@ -427,7 +424,7 @@
                      v-html="'删除'"></div>
               </div>
             </div>
-            <div :style="{width: item.type === 'linkCourseware'?'1280px':'885px'}" class="tip-box">
+            <div style="min-width:600px;width: 600px" class="tip-box">
               <div class="tip-title" v-html="`${item.exegesis}`"></div>
               <div class="tip-boxContent">
                 <iframe v-if="item.type === 'linkCourseware'" :src="item.url" frameborder="no" height="590"
@@ -449,7 +446,7 @@
                      v-html="'删除'"></div>
               </div>
             </div>
-            <div class="tip-box" style="width: auto">
+            <div class="tip-box" style="min-width:600px;width: 600px">
               <div class="tip-boxContent">
                 {{ item.text }}
               </div>
@@ -462,6 +459,29 @@
       </zydx-drag-popup>
     </div>
 
+
+    <!--    链接注释-->
+    <zydx-drag-popup v-if="isShowUpload" :dragStatus="false" :width="400"
+                     :enlargeShow="false" :minimize="false" :height="200"
+                     :minimizeCir="false" :title="'上传附件'" @close="isShowUpload=false">
+      <template #content>
+        <div class="upload-box">
+          <div class="check-upload">
+            <label>
+              <input type="checkbox" v-model="checkboxObj.value" :checked="checkboxObj.checked" @change="checkboxTao(checkboxObj)"/>
+              <span>{{ checkboxObj.label }}</span>
+            </label>
+          </div>
+          <div >
+            <label  style="border:1px solid #000;border-radius: 3px;padding:2px 5px;">
+              <input :accept="acceptType['group-upload']" style="display: none;" type="file" @change="upload($event,'group-upload')">
+              <span v-html="'上传附件'"></span>
+            </label>
+          </div>
+        </div>
+      </template>
+    </zydx-drag-popup>
+
   </div>
 </template>
 
@@ -500,6 +520,7 @@ import viewSvg from "./view-svg.vue";
 import Recorder from 'js-audio-recorder'
 import zydxColoring from '../../coloring'
 import Message from '../../../components/tipBox/index';
+import Upload from '../../../components/upload' //上传文件
 import zydxTextarea from '../../textarea'
 import zydxRead from '../../read'
 import zydxDragPopup from '../../dragPopup'
@@ -528,6 +549,8 @@ export default {
   },
   data() {
     return {
+      checkboxObj:{value: '1', label: '是否开启缩进', checked: false},
+      checkbox:false,
       titleDragPopup: {
         nounExplain: '链接名词',
         taggingMenu: '注释',
@@ -549,6 +572,7 @@ export default {
       tipTitle: '',
       taggingText: '',
       isShowPopup: false,
+      isShowUpload: false,
       isShowExegesis: false,
       isShowFile: false,
       exegesisType: 'add',
@@ -562,7 +586,7 @@ export default {
         uploadImage: 'image/*',
       },
       uploadTypeArr: [
-        'group-upload',
+        // 'group-upload',
         'importArticles',
         'importWorks',
         'videoLink',
@@ -893,7 +917,8 @@ export default {
           shouldShow: ({editor, view, state, oldState, from, to}) => {
             _this.encIndex = state.selection.$from.parent.attrs
             if (_this.encIndex && _this.encIndex.titleId) {
-              return state.selection.$from.parent.attrs.titleId === 'mu'
+              let titleIdArr = state.selection.$from.parent.attrs.titleId.split(' ')
+              return state.selection.$from.parent.attrs.titleId === 'mu' || titleIdArr.indexOf('mu')!==-1
             } else {
               return false
             }
@@ -1082,6 +1107,9 @@ export default {
   },
   emits: ['confirm', 'enclosure', 'enlDownload', 'enlSee'],
   methods: {
+    checkboxTao(checkboxObj){
+      this.checkbox = checkboxObj.value
+    },
     closeDataShowPopup(item) {
       item.isShow = false
       item.edit = false
@@ -1998,23 +2026,35 @@ export default {
                 const last = this.editor.state.selection.$anchor.path[0].content.size
                 if (t === -1) this.editor.chain().focus().insertContentAt(last, html).run()
                 const num = this.upSort(this.editor, 'enclosure')
-                const html2 = `<p contenteditable="false" data-signId="u-${num.num}" data-url="${url}" class="mu"><span>${num.num}. ${name}</span></p>`
+                const html2 = `<p contenteditable="false" data-signId="u-${num.num}" data-url="${url}" class="indent mu"><span>${num.num}. ${name}</span></p>`
                 this.editor.chain().focus().insertContentAt(num.len, html2).run()
+                const json =  this.editor.getJSON()
+                for (let i = 0; i < json.content.length; i++) {
+                  const item = json.content[i]
+                  if( item.attrs.signId === 'enclosure'&&item.content[0].text==='附件列表：'){
+                    item.attrs.titleId = this.checkbox? 'indent' : null
+                  }
+                }
+                this.editor.chain().setContent(<p></p>).run()
+                this.editor.chain().setContent(json).run()
+                this.isShowUpload = false
                 return
               }
               const num1 = this.upSort(this.editor, 'reference')
               if (t === -1) this.editor.chain().focus().insertContentAt(num1.len-7, html).run()
               const num = this.upSort(this.editor, 'enclosure')
-              const html2 = `<p contenteditable="false" data-signId="u-${num.num}" data-url="${url}" class="mu"><span>${num.num}. ${name}</span></p>`
+              const html2 = `<p contenteditable="false" data-signId="u-${num.num}" data-url="${url}" class="indent mu"><span>${num.num}. ${name}</span></p>`
               this.editor.chain().focus().insertContentAt(num.len, html2).run()
-
-              // if (b === -1) {
-              // } else {
-              //   if (t === -1) this.editor.chain().focus().insertContentAt(this.selectionPath('paragraph', b - 1), html).run()
-              //   const num = this.upSort(this.editor, 'enclosure')
-              //   const html2 = `<p contenteditable="false" data-signId="u-${num.num}" data-url="${url}" class="mu"><span>${num.num}. ${name}</span></p>`
-              //   this.editor.chain().focus().insertContentAt(num.len, html2).run()
-              // }
+              const json =  this.editor.getJSON()
+              for (let i = 0; i < json.content.length; i++) {
+                const item = json.content[i]
+                if( item.attrs.signId === 'enclosure'&&item.content[0].text==='附件列表：'){
+                  item.attrs.titleId = this.checkbox? 'indent' : null
+                }
+              }
+              this.editor.chain().setContent(<p></p>).run()
+              this.editor.chain().setContent(json).run()
+              this.isShowUpload = false
             })
           }
           if (v === 'uploadImage') {
@@ -2475,13 +2515,15 @@ export default {
         //     this.editor.commands.unsetTitleId()
         //     return
         //   }
-        //   this.editor.commands.setTitleId(key.key)
+        //   this.editor.commands.setTitleId('indent')
         // }
         // if (key.key === 'LineSpace') {
+        // }
         this.showDragPopup = true
         const index = this.editor.state.selection.$anchor.path[1]
         const json = this.editor.getJSON()
         const margin = json.content[index].attrs.margin
+        console.log('attrs',json.content[index].attrs)
         const lineHeight = json.content[index].attrs.lineHeightId
         if (!margin === false) {
           const marginArr = margin.split(' ').map(item => item.replace('px', ''))
@@ -2495,7 +2537,6 @@ export default {
           const index = lineHeight.split('-')[1]
           this.paragraph.distance = child[index - 1]
         }
-        // }
       }
       // 字体
       if (data.key === 'titleMenu') {
@@ -2565,6 +2606,9 @@ export default {
       }
       // 插入
       if (data.key === 'interposition') {
+        if(key.key === 'group-upload'){
+          this.isShowUpload = true
+        }
         // 添加图片
         if (key.key === 'group-image') {
           if (childKey.key === 'insertImage') {
@@ -2937,10 +2981,17 @@ export default {
     },
     // 段落设置
     paragraphSetting() {
+      const selectionIndex = this.editor.state.selection.$anchor.path[1]
+      const json = this.editor.getJSON()
+      const titleId = json.content[selectionIndex].attrs.titleId
       this.editor.commands.setMargin(`${this.paragraph.top}px ${this.paragraph.right}px ${this.paragraph.bottom}px ${this.paragraph.left}px`)
       let child = ['1', '1.25', '1.5', '2', '2.5', '3']
       let index = this.paragraph?.distance ? child.indexOf(this.paragraph?.distance) + 1 : 2
       this.editor.commands.setLineHeightId(`ling-${index}`)
+      if(!titleId===false){
+        this.editor.commands.unsetTitleId()
+        this.editor.commands.setTitleId(titleId)
+      }
       this.showDragPopup = false
     },
     taggingMenuSubmit() {
@@ -3319,7 +3370,7 @@ export default {
 }
 
 :deep(p[data-signid="subject"]) {
-  padding-bottom: 20px;
+  padding-bottom: 15px;
 }
 
 :deep(.author) {
@@ -3964,4 +4015,23 @@ li {
   flex-direction: row;
   justify-content: flex-end;
 }
+
+.check-upload label{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  line-height: 1;
+}
+
+.check-upload span{
+  padding-left: 10px;
+}
+
+.upload-box{
+  padding: 50px 40px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
 </style>

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.353',
+    version: '1.33.355',
     install,
     Calendar,
     Message,