working poc for editor

visual-editor-test/testing/.eslintrc.js

@@ -1,17 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
-  'extends': [
-    'plugin:vue/vue3-essential',
-    'eslint:recommended'
-  ],
-  parserOptions: {
-    parser: '@babel/eslint-parser'
-  },
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
-  }
-}

visual-editor-test/testing/src/views/EditorView.vue

@@ -1,25 +1,35 @@
 <template>
     <div id="app">
         <div class="parent">
-            <Vue3DraggableResizable :initW="110" :initH="120" v-model:x="x" v-model:y="y" v-model:w="w" v-model:h="h"
+            <Vue3DraggableResizable :initW="110" :initH="120" v-model:x="draggables[1].x" v-model:y="draggables[1].y" v-model:w="draggables[1].w" v-model:h="draggables[1].h"
-                v-model:active="active" :draggable="true" :resizable="true" @activated="print('activated')"
+                v-model:active="draggables[1].active" :draggable="draggables[1].draggable" :resizable="draggables[1].resizable" @activated="print('activated')"
-                @deactivated="print('deactivated')" @drag-start="print('drag-start')" @resize-start="print('resize-start')"
+                @deactivated="disableEditMode()" @drag-start="print('drag-start')" @resize-start="print('resize-start')"
                 @dragging="print('dragging')" @resizing="print('resizing')" @drag-end="print('drag-end')"
-                @resize-end="print('resize-end')">
+                @resize-end="print('resize-end')" @contextmenu="(e) => { e.preventDefault(); print('context') }" @dblclick="enableEditMode( 1 )">
-                This is a test example
+                <p v-if="draggables[1].draggable">This is a test example</p>
+                <input @keydown.esc="disableEditMode()" value="This is a test example" v-else/>
+            </Vue3DraggableResizable>
+            <Vue3DraggableResizable :initW="110" :initH="120" v-model:x="draggables[2].x" v-model:y="draggables[2].y" v-model:w="draggables[2].w" v-model:h="draggables[2].h"
+                v-model:active="draggables[2].active" :draggable="draggables[2].draggable" :resizable="draggables[2].resizable" @activated="print('activated')"
+                @deactivated="disableEditMode()" @drag-start="print('drag-start')" @resize-start="print('resize-start')"
+                @dragging="print('dragging')" @resizing="print('resizing')" @drag-end="print('drag-end')"
+                @resize-end="print('resize-end')" @contextmenu="(e) => { e.preventDefault(); print('context') }" @dblclick="enableEditMode( 2 )">
+                <p v-if="draggables[2].draggable">This is a test example (2)</p>
+                <input @keydown.esc="disableEditMode()" value="This is a test example (2)" v-else/>
             </Vue3DraggableResizable>
         </div>
     </div>
 </template>
 
 <script>
-import Vue3DraggableResizable from 'vue3-draggable-resizable'
+import Vue3DraggableResizable from 'vue3-draggable-resizable';
 //default styles
-import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
+import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css';
 export default {
     components: { Vue3DraggableResizable },
     data() {
         return {
+            draggables: { 1: { 'x': 100, 'y':100, 'h': 100, 'w': 100, 'active': false, 'draggable': true, 'resizable': true }, 2: { 'x': 100, 'y':100, 'h': 100, 'w': 100, 'active': false, 'draggable': true, 'resizable': true } },
             x: 100,
             y: 100,
             h: 100,
@@ -30,7 +40,20 @@ export default {
     methods: {
         print(val) {
             console.log(val)
-        }
+        },
+        enableEditMode ( obj ) {
+            this.draggables[ obj ].draggable = false;
+            this.draggables[ obj ].resizable = false;
+        },
+        handleKeyboard ( key ) {
+            console.log( key );
+        },
+        disableEditMode () {
+            for ( let draggable in this.draggables ) {
+                this.draggables[ draggable ].draggable = true;
+                this.draggables[ draggable ].resizable = true;
+            }
+        },
     }
 }
 </script>