6060 </div >
6161</template >
6262<script >
63- import { mapState , mapActions } from " vuex" ;
64- import VueDraggableResizable from " vue-draggable-resizable" ;
63+ import { mapState , mapActions } from ' vuex'
64+ import VueDraggableResizable from ' vue-draggable-resizable'
6565// import ChildrenMultiselect from '../components/ChildrenMultiselect'
66- import " vue-draggable-resizable/dist/VueDraggableResizable.css" ;
66+ import ' vue-draggable-resizable/dist/VueDraggableResizable.css'
6767
6868export default {
69- name: " ComponentDisplay" ,
69+ name: ' ComponentDisplay' ,
7070 components: {
7171 VueDraggableResizable
7272 },
73- data () {
73+ data () {
7474 return {
7575 modalOpen: false ,
7676 abilityToDelete: false ,
77- testOptions: [" parent" , " child" , " grandchild" ],
77+ testOptions: [' parent' , ' child' , ' grandchild' ],
7878 testModel: [],
7979 mockImg: false
80- };
80+ }
8181 },
82- mounted () {
82+ mounted () {
8383 // when component is mounted add ability to delete
84- window .addEventListener (" keyup" , event => {
85- if (event .key === " Backspace" ) {
84+ window .addEventListener (' keyup' , event => {
85+ if (event .key === ' Backspace' ) {
8686 if (this .activeComponent && this .activeComponentData .isActive ) {
87- this .$store .dispatch (" deleteActiveComponent" );
87+ this .$store .dispatch (' deleteActiveComponent' )
8888 }
8989 }
90- });
90+ })
9191 },
9292 computed: {
9393 ... mapState ([
94- " routes" ,
95- " activeRoute" ,
96- " activeComponent" ,
97- " componentMap" ,
98- " componentChildrenMultiselectValue" ,
99- " imagePath"
94+ ' routes' ,
95+ ' activeRoute' ,
96+ ' activeComponent' ,
97+ ' componentMap' ,
98+ ' componentChildrenMultiselectValue' ,
99+ ' imagePath'
100100 ]),
101101 // used in VueDraggableResizeable component
102- activeRouteArray () {
103- console .log (" active route array method" , this .routes [this .activeRoute ]);
104- return this .routes [this .activeRoute ];
102+ activeRouteArray () {
103+ console .log (' active route array method' , this .routes [this .activeRoute ])
104+ return this .routes [this .activeRoute ]
105105 },
106106 // used to delete components
107- activeComponentData () {
107+ activeComponentData () {
108108 return this .activeRouteArray .filter (componentData => {
109- return componentData .componentName === this .activeComponent ;
110- })[0 ];
109+ return componentData .componentName === this .activeComponent
110+ })[0 ]
111111 },
112- childList () {
113- return this .componentMap [componentData .componentName ].children ;
112+ childList () {
113+ return this .componentMap [componentData .componentName ].children
114114 },
115- options () {
115+ options () {
116116 // PROBLEM: the objects on childrenmultiselectvalue are applied
117- const routes = Object .keys (this .routes );
118- const exceptions = new Set ([" App" , this .activeComponent , ... routes]);
117+ const routes = Object .keys (this .routes )
118+ const exceptions = new Set ([' App' , this .activeComponent , ... routes])
119119 return Object .keys (this .componentMap ).filter (component => {
120- if (! exceptions .has (component)) return component;
121- });
120+ if (! exceptions .has (component)) return component
121+ })
122122 },
123- userImage () {
124- const imgSrc = this .imagePath .length ? ` file://` + this .imagePath [0 ] : " " ;
123+ userImage () {
124+ const imgSrc = this .imagePath .length ? ` file://` + this .imagePath [0 ] : ' '
125125 // const imgSrc1 = this.imagePath;
126- console .log (` imgSrc: ${ imgSrc} ` );
127- return imgSrc;
126+ console .log (` imgSrc: ${ imgSrc} ` )
127+ return imgSrc
128128 },
129- mockBg () {
129+ mockBg () {
130130 return this .imagePath .length
131131 ? {
132- background: ` url("${ this .userImage } ") no-repeat center` ,
133- " background-size" : " cover"
134- }
135- : {};
132+ background: ` url("${ this .userImage } ") no-repeat center` ,
133+ ' background-size' : ' cover'
134+ }
135+ : {}
136136 }
137137 },
138138 methods: {
139139 ... mapActions ([
140- " setActiveComponent" ,
141- " updateComponentChildrenMultiselectValue" ,
142- " updateActiveComponentChildrenValue"
140+ ' setActiveComponent' ,
141+ ' updateComponentChildrenMultiselectValue' ,
142+ ' updateActiveComponentChildrenValue'
143143 ]),
144- onResize : function (x , y , width , height ) {
145- this .activeComponentData .x = x;
146- this .activeComponentData .y = y;
147- this .activeComponentData .w = width;
148- this .activeComponentData .h = height;
144+ onResize : function (x , y , width , height ) {
145+ this .activeComponentData .x = x
146+ this .activeComponentData .y = y
147+ this .activeComponentData .w = width
148+ this .activeComponentData .h = height
149149
150- this .componentMap [this .activeComponent ].x = x;
151- this .componentMap [this .activeComponent ].y = y;
152- this .componentMap [this .activeComponent ].w = width;
153- this .componentMap [this .activeComponent ].h = height;
150+ this .componentMap [this .activeComponent ].x = x
151+ this .componentMap [this .activeComponent ].y = y
152+ this .componentMap [this .activeComponent ].w = width
153+ this .componentMap [this .activeComponent ].h = height
154154 },
155- onDrag : function (x , y ) {
156- this .activeComponentData .x = x;
157- this .activeComponentData .y = y;
155+ onDrag : function (x , y ) {
156+ this .activeComponentData .x = x
157+ this .activeComponentData .y = y
158158
159- this .componentMap [this .activeComponent ].x = x;
160- this .componentMap [this .activeComponent ].y = y;
161- this .userImage ;
159+ this .componentMap [this .activeComponent ].x = x
160+ this .componentMap [this .activeComponent ].y = y
161+ this .userImage
162162 },
163- onActivated (componentData ) {
164- this .setActiveComponent (componentData .componentName );
165- this .activeComponentData .isActive = true ;
163+ onActivated (componentData ) {
164+ this .setActiveComponent (componentData .componentName )
165+ this .activeComponentData .isActive = true
166166 },
167- onDeactivated () {
168- this .activeComponentData .isActive = false ;
167+ onDeactivated () {
168+ this .activeComponentData .isActive = false
169169 },
170- onDoubleClick (compData ) {
171- this .setActiveComponent (compData .componentName );
172- this .activeComponentData .isActive = true ;
170+ onDoubleClick (compData ) {
171+ this .setActiveComponent (compData .componentName )
172+ this .activeComponentData .isActive = true
173173 },
174- handleAddChild () {
174+ handleAddChild () {
175175 // render modal with childrenmultiselect in it
176- this .modalOpen = true ;
176+ this .modalOpen = true
177177 },
178- handleSelect (value ) {
178+ handleSelect (value ) {
179179 // if (this.modalOpen) this.updateActiveComponentChildrenValue(value)
180- console .log (" Multiselect: " , value);
181- this .updateActiveComponentChildrenValue (value);
180+ console .log (' Multiselect: ' , value)
181+ this .updateActiveComponentChildrenValue (value)
182182 // this.updateComponentChildrenMultiselectValue(value)
183183 }
184184 // @dblclick.native="onDoubleClick(componentData)"
@@ -187,7 +187,7 @@ export default {
187187 // this.activeComponentData.isActive = true
188188 // }
189189 }
190- };
190+ }
191191 </script >
192192
193193<style scoped>
0 commit comments