janishutz/libreevent
1
0
Fork 0
mirror of https://github.com/janishutz/libreevent.git synced 2025-11-25 05:14:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

working poc for editor

Browse Source
This commit is contained in:
Janis Hutz
2023-05-09 18:31:55 +02:00
parent b185c903dd
commit 1fbcbd864a
2 changed files with 31 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
visual-editor-test/testing/.eslintrc.js
View File

@@ -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'
}
}

37
visual-editor-test/testing/src/views/EditorView.vue
View File

@@ -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"
v-model:active="active" :draggable="true" :resizable="true" @activated="print('activated')"
@deactivated="print('deactivated')" @drag-start="print('drag-start')" @resize-start="print('resize-start')"
<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="draggables[1].active" :draggable="draggables[1].draggable" :resizable="draggables[1].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')">
This is a test example
@resize-end="print('resize-end')" @contextmenu="(e) => { e.preventDefault(); print('context') }" @dblclick="enableEditMode( 1 )">
<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>