zydx-plus 1.33.333 → 1.33.334

package/package.json

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

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

@@ -102,7 +102,6 @@ export default {
     },
     getContent() {
       const html = this.$refs.textarea.innerHTML
-      console.log(html)
       const br = html
           .replace(/<div>/g, '\n')
           .replace(/<\/div>/g, '')
@@ -147,7 +146,6 @@ export default {
   box-sizing: border-box;
   text-indent: 2em;
   background-color: #fff;
-  word-wrap: break-word;
 }
 
 .text[contenteditable]:empty:before {

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.333',
+    version: '1.33.334',
     install,
     Calendar,
     Message,
@@ -118,6 +120,7 @@ export default {
     paper,
     question,
     tagging,
-    seek
+    seek,
+    sketchpad
 };