zydx-plus 1.33.332 → 1.33.334

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.33.332",
+  "version": "1.33.334",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [
@@ -26,22 +26,28 @@
     "katex": "^0.15.6",
     "simple-mind-map": "^0.9.6",
     "html2json": "^1.0.2",
-    "@tiptap/extension-image": "^2.0.3",
     "@tiptap/starter-kit": "^2.0.3",
     "@tiptap/vue-3": "^2.0.3",
+    "@tiptap/extension-bubble-menu": "^2.1.0",
     "@tiptap/extension-color": "^2.0.3",
+    "@tiptap/extension-focus": "^2.1.13",
     "@tiptap/extension-font-family": "^2.0.3",
+    "@tiptap/extension-heading": "^2.0.4",
     "@tiptap/extension-horizontal-rule": "^2.0.3",
+    "@tiptap/extension-image": "^2.0.3",
+    "@tiptap/extension-link": "^2.0.3",
     "@tiptap/extension-paragraph": "^2.0.3",
     "@tiptap/extension-placeholder": "^2.0.3",
     "@tiptap/extension-superscript": "^2.0.3",
     "@tiptap/extension-text-align": "^2.0.3",
     "@tiptap/extension-text-style": "^2.0.3",
-    "@tiptap/extension-link": "^2.0.3",
     "@vue-office/docx": "^1.1.3",
     "@vue-office/excel": "^1.1.3",
     "js-export-word": "^1.0.5",
-    "js-audio-recorder": "^1.0.7"
+    "js-audio-recorder": "^1.0.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tldraw": "^2.0.2"
   },
   "peerDependencies": {
     "vue": "^3.2.13"

package/src/components/calendar/src/Calendar.vue

@@ -226,8 +226,9 @@ export default {
                 // 判断两个日期的大小
                 let start = (this.rangeStart_ === undefined)? null:this.rangeStart_.replace(/-/g, '')
                 let end = (this.rangeEnd_ === undefined)? null:this.rangeEnd_.replace(/-/g, '')
-                if(start > end) {
-                    date = {end: this.rangeStart_, start: this.rangeEnd_}
+                date = {start: this.rangeStart_, end: this.rangeEnd_}
+                if(Number(start) > Number(end)) {
+                    date = {start: this.rangeEnd_, end: this.rangeStart_}
                 }else {
                     date = {start: this.rangeStart_, end: this.rangeEnd_}
                 }

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

@@ -54,12 +54,12 @@
     <div class="complete" v-if="!readOnly && toolbar.length > 0">
       <button class="but" v-if="butShow" @click="confirm">完成</button>
     </div>
+    <div class="menus" v-if="menus&&readOnly" :style="menusStyle">
+      <button class="but" @click="enlSee" v-if="readOnly">查看</button>
+      <button class="but" @click="enlDownload" v-if="readOnly">下载</button>
+      <button class="but" @click="enlDel" v-if="!readOnly">删除</button>
+    </div>
     <div class="read-only" v-if="page&&readOnly" :style="{width: (wit + 20) + 'px'}">
-      <div class="menus" v-if="menus&&readOnly" :style="menusStyle">
-        <button class="but" @click="enlSee" v-if="readOnly">查看</button>
-        <button class="but" @click="enlDownload" v-if="readOnly">下载</button>
-        <button class="but" @click="enlDel" v-if="!readOnly">删除</button>
-      </div>
       <div class="editing-header" v-if="signMenuShow">
         <img :src="menusData('signMenu')?.ico" alt=""/>
         <span>{{ menusData('signMenu')?.text }}</span>
@@ -704,12 +704,12 @@ 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}"><span class="mu">${num.num}. ${name}</span></p>`
+                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()
               } 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}"><span class="mu">${num.num}. ${name}</span></p>`
+                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()
               }
             })

package/src/components/sketchpad/index.js

@@ -0,0 +1,6 @@
+import main from './src/sketchpad';
+
+main.install = function(Vue) {
+    Vue.component(main.name, main);
+};
+export default main;

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

@@ -0,0 +1,178 @@
+<template>
+  <div ref="reactRef" class="react"></div>
+</template>
+
+<script>
+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"
+    }
+  },
+  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
+        }
+      },
+      instance_presence:{version:5},pointer:{version:1}
+    }
+  }
+}
+
+export default {
+  name: "zydx-sketchpad",
+  data() {
+    return {
+      editor:null
+    }
+  },
+  mounted() {
+    const root = createRoot(this.$refs.reactRef)
+    root.render(createElement(Tldraw, {
+      onMount: this.handleMountedEditor,
+      hideUi: true
+    }, null))
+  },
+  methods: {
+    handleMountedEditor(editor) {
+      this.editor = editor
+      // editor.store.listen((entry) => {
+      //   const up = entry.changes.updated
+      // })
+    },
+    // 清空
+    clear() {
+      this.editor.store.loadSnapshot(clearJson)
+    },
+    // 添加快照
+    setSnapshot(v) {
+      this.editor.store.loadSnapshot(v)
+    },
+    // 获取快照
+    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.editor.setCurrentTool('draw')
+    },
+    select() {
+      this.editor.setCurrentTool('select')
+    },
+    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'
+      this.editor.setCurrentTool('arrow')
+    },
+    text(v) {
+      this.styleProps('arrow','color').defaultValue = v?.color?? 'black'
+      this.styleProps('arrow','size').defaultValue = v?.size?? 'm'
+      this.editor.setCurrentTool('text')
+    },
+    line(v) {
+      this.styleProps('arrow','color').defaultValue = v?.color?? 'black'
+      this.styleProps('arrow','size').defaultValue = v?.size?? 'm'
+      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.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.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.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.editor.setCurrentTool('geo')
+    },
+    highlight(v) {
+      this.styleProps('geo','color').defaultValue = v?.color?? 'black'
+      this.styleProps('geo','size').defaultValue = v?.size?? 'm'
+      this.editor.setCurrentTool('highlight')
+    },
+    laser() {
+      this.editor.setCurrentTool('laser')
+    },
+    styleProps(t,e) {
+      const style = [...this.editor.styleProps[t]]
+      const index = style.findIndex(item => item[1] === e)
+      return style[index][0]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.react{
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/components/textarea/src/textarea.vue

@@ -69,9 +69,10 @@ export default {
   methods: {
     splitHtml(v) {
       if(v === '' || v === null) return ''
-      const arr = v.split('<br>')
+      const arr = v.split('\n')
       let html = ''
       arr.forEach(item => {
+        item = item.replace(/ /g, '&nbsp;')
         html += `<p>${item}</p>`
       })
       return html
@@ -101,16 +102,23 @@ export default {
     },
     getContent() {
       const html = this.$refs.textarea.innerHTML
-      const br = html.replace(/<div>/g, '<br>').replace(/<\/div>/g, '').replace(/<p>/g, '<br>').replace(/<\/p>/g, '')
+      const br = html
+          .replace(/<div>/g, '\n')
+          .replace(/<\/div>/g, '')
+          .replace(/<p>/g, '\n')
+          .replace(/<\/p>/g, '')
+          .replace(/<span style="text-indent: 2em;">/g, '')
+          .replace(/<\/span>/g, '')
+          .replace(/&nbsp;/g, ' ')
       // 如果br后边没有内容，就去掉br
-      if (br.indexOf('<br>') !== -1) {
-        const arr = br.split('<br>')
+      if (br.indexOf('\n') !== -1) {
+        const arr = br.split('\n')
         arr.forEach((item, index) => {
           if (item === '') {
             arr.splice(index, 1)
           }
         })
-        return arr.join('<br>')
+        return arr.join('\n')
       }else {
         return br
       }

package/src/index.js

@@ -34,6 +34,7 @@ import paper from './components/word2/index';
 import question from './components/question/index';
 import tagging from './components/tagging/index';
 import seek from './components/seek/index';
+import sketchpad from './components/sketchpad/index';
 
 const components = [
     Calendar,
@@ -68,7 +69,8 @@ const components = [
     paper,
     question,
     tagging,
-    seek
+    seek,
+    sketchpad
 ];
 
 function install(app) {
@@ -81,7 +83,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.33.332',
+    version: '1.33.334',
     install,
     Calendar,
     Message,
@@ -118,6 +120,7 @@ export default {
     paper,
     question,
     tagging,
-    seek
+    seek,
+    sketchpad
 };