@@ -12,7 +12,7 @@ Description:
12
12
v-on:click =" handleClick"
13
13
>
14
14
<!-- This is the actual component box -->
15
- <!-- https://www.npmjs.com/package/vue-draggable-resizable -->
15
+ <!-- https://www.npmjs.com/package/vue-draggable-resizable -->
16
16
<vue-draggable-resizable
17
17
class-name =" component-box"
18
18
v-for =" componentData in activeRouteArray"
@@ -90,15 +90,15 @@ Description:
90
90
91
91
<script >
92
92
import { mapState , mapActions } from " vuex" ;
93
- import VueDraggableResizable from ' vue-draggable-resizable/src/components/vue-draggable-resizable.vue'
94
- import ' vue-draggable-resizable/src/components/vue-draggable-resizable.css'
93
+ import VueDraggableResizable from " vue-draggable-resizable/src/components/vue-draggable-resizable.vue" ;
94
+ import " vue-draggable-resizable/src/components/vue-draggable-resizable.css" ;
95
95
96
- const cloneDeep = require (' lodash.clonedeep' )
96
+ const cloneDeep = require (" lodash.clonedeep" );
97
97
98
98
export default {
99
99
name: " ComponentDisplay" ,
100
100
components: {
101
- // VueDraggableResizable,
101
+ VueDraggableResizable,
102
102
},
103
103
data () {
104
104
// console.log("Current Component Map is: ", this.componentMap);
@@ -109,7 +109,7 @@ export default {
109
109
mockImg: false ,
110
110
initialPosition: { x: 0 , y: 0 },
111
111
initialSize: { w: 0 , h: 0 },
112
- htmlElements: [],
112
+ htmlElements: [],
113
113
};
114
114
},
115
115
mounted () {
@@ -121,7 +121,7 @@ export default {
121
121
}
122
122
}
123
123
});
124
- window .addEventListener (" keyup" , event => {
124
+ window .addEventListener (" keyup" , ( event ) => {
125
125
if (event .key === " Delete" ) {
126
126
if (this .activeComponent ) {
127
127
this .$store .dispatch (" deleteActiveComponent" );
@@ -136,7 +136,7 @@ export default {
136
136
this .$store .dispatch (" copyActiveComponent" );
137
137
}
138
138
});
139
- window .addEventListener (' paste' , () => {
139
+ window .addEventListener (" paste" , () => {
140
140
this .$store .dispatch (" pasteActiveComponent" );
141
141
// console.log('pasted');
142
142
});
@@ -169,7 +169,7 @@ export default {
169
169
const checkParents = (component , lineage = [component .componentName ]) => {
170
170
if (! Object .keys (component .parent ).length ) return lineage;
171
171
for (var parents in component .parent ) {
172
- // Mutating?
172
+ // Mutating?
173
173
lineage .push (parents);
174
174
checkParents (component .parent [parents], lineage);
175
175
}
@@ -217,7 +217,7 @@ export default {
217
217
if (this .$refs .boxes ) {
218
218
this .$refs .boxes .forEach ((element ) => {
219
219
element .enabled = false ;
220
-
220
+
221
221
element .$emit (" deactivated" );
222
222
element .$emit (" update:active" , false );
223
223
// this.$emit("deactivated");
@@ -291,7 +291,7 @@ export default {
291
291
this .updateComponentSize (payload);
292
292
}
293
293
},
294
- finishedDrag : function (x , y ) {
294
+ finishedDrag : function (x , y ) {
295
295
// console.log('FINISHED DRAGGING')
296
296
let payload = {
297
297
x: x,
@@ -334,12 +334,12 @@ export default {
334
334
*/
335
335
// unhighlights all inactive components
336
336
onActivated (componentData ) {
337
- console .log (' This is ACTIVATED' )
337
+ console .log (" This is ACTIVATED" );
338
338
// console.log('onActivated - comp display, componentData', componentData)
339
339
if (this .$refs .boxes ) {
340
340
this .$refs .boxes .forEach ((element ) => {
341
341
if (element .$attrs .id !== componentData .componentName ) {
342
- console .log (' Emit' )
342
+ console .log (" Emit" );
343
343
element .enabled = false ;
344
344
element .$emit (" deactivated" );
345
345
element .$emit (" update:active" , false );
@@ -355,7 +355,7 @@ export default {
355
355
},
356
356
// deactivated is emitted before activated
357
357
onDeactivated (type ) {
358
- console .log (' This is DEACTIVATED' )
358
+ console .log (" This is DEACTIVATED" );
359
359
if (this .activeComponent !== " " ) {
360
360
this .activeComponentData .isActive = false ;
361
361
}
@@ -393,18 +393,18 @@ export default {
393
393
// event handler for copying (ctrl+C)
394
394
copyActiveComponent () {
395
395
// console.log('copied');
396
- }
396
+ },
397
397
},
398
398
watch: {
399
399
activeComponent : function () {
400
400
if (this .activeComponent ) {
401
401
this .onActivated (this .activeComponentObj );
402
402
} else {
403
- this .onDeactivated (' bgClick' );
403
+ this .onDeactivated (" bgClick" );
404
404
}
405
- }
406
- }
407
- }
405
+ },
406
+ },
407
+ };
408
408
</script >
409
409
410
410
<style scoped>
@@ -499,4 +499,4 @@ export default {
499
499
#counter {
500
500
margin-top : 20px ;
501
501
}
502
- </style >
502
+ </style >
0 commit comments