Skip to content

Commit 4e5a84a

Browse files
Ji Kimchdavis0917dwejikimjigarxplindenyoung
authored and
Ji Kim
committed
finish typing errors in canvus.vue
> > Co-authored-by: Chris Davis <[email protected]> Co-authored-by: Ji Kim <[email protected]> Co-authored-by: Jigar Patel <[email protected]> Co-authored-by: Linden Young <[email protected]>
1 parent 0f64eb6 commit 4e5a84a

File tree

2 files changed

+26
-25
lines changed

2 files changed

+26
-25
lines changed

‎src/components/Canvas.vue

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
Functionality includes: resizing/dragging component boxes, display grid image, active component
55
-->
66

7+
<!-- beneath line 419, we deleted :hint="hint" -->
8+
79
<template>
810
<!-- the background Canvas grid -->
911
<div
@@ -68,7 +70,7 @@
6870
<!-- Rendering HTML Elements for each Component -->
6971
<div
7072
v-for="element in componentMap[componentData.componentName].htmlList"
71-
:key="element.id + new Date()"
73+
:key="element.id as string + new Date()"
7274
>
7375
<div
7476
v-if="element.text === 'button'"
@@ -79,8 +81,8 @@
7981
element.w !== 0 ? { width: element.w + '%' } : { width: '25%' },
8082
element.h !== 0 ? { height: element.h + '%' } : { height: '10%' },
8183
element.z !== 0
82-
? { 'z-index': element.z + '%' }
83-
: { 'z-index': '0' },
84+
? { 'z-index': element.z as number}
85+
: { 'z-index': 0 },
8486
{ 'background-color': componentData.color },
8587
]"
8688
>
@@ -96,7 +98,7 @@
9698
element.y !== 0 ? { left: element.y + '%' } : { left: '10%' },
9799
element.w !== 0 ? { width: element.w + '%' } : { width: '80%' },
98100
element.h !== 0 ? { height: element.h + '%' } : { height: '75%' },
99-
element.z !== 0 ? { 'z-index': element.z } : { 'z-index': '0' },
101+
element.z !== 0 ? { 'z-index': element.z as number } : { 'z-index': 0 },
100102
{ 'background-color': componentData.color },
101103
]"
102104
>
@@ -113,7 +115,7 @@
113115
element.y !== 0 ? { left: element.y + '%' } : { left: '10%' },
114116
element.w !== 0 ? { width: element.w + '%' } : { width: '80%' },
115117
element.h !== 0 ? { height: element.h + '%' } : { height: '40%' },
116-
element.z !== 0 ? { 'z-index': element.z } : { 'z-index': '0' },
118+
element.z !== 0 ? { 'z-index': element.z as number } : { 'z-index': 0 },
117119
{ 'background-color': componentData.color },
118120
]"
119121
>
@@ -129,7 +131,7 @@
129131
element.y !== 0 ? { left: element.y + '%' } : { left: '5%' },
130132
element.w !== 0 ? { width: element.w + '%' } : { width: '90%' },
131133
element.h !== 0 ? { height: element.h + '%' } : { height: '20%' },
132-
element.z !== 0 ? { 'z-index': element.z } : { 'z-index': '0' },
134+
element.z !== 0 ? { 'z-index': element.z as number } : { 'z-index': 0 },
133135
{ 'background-color': componentData.color },
134136
]"
135137
>
@@ -145,7 +147,7 @@
145147
element.y !== 0 ? { left: element.y + '%' } : { left: '10%' },
146148
element.w !== 0 ? { width: element.w + '%' } : { width: '80%' },
147149
element.h !== 0 ? { height: element.h + '%' } : { height: '15%' },
148-
element.z !== 0 ? { 'z-index': element.z } : { 'z-index': '0' },
150+
element.z !== 0 ? { 'z-index': element.z as number } : { 'z-index': 0 },
149151
{ 'background-color': componentData.color },
150152
]"
151153
>
@@ -161,7 +163,7 @@
161163
element.y !== 0 ? { left: element.y + '%' } : { left: '15%' },
162164
element.w !== 0 ? { width: element.w } + '%' : { width: '70%' },
163165
element.h !== 0 ? { height: element.h + '%' } : { height: '12%' },
164-
element.z !== 0 ? { 'z-index': element.z } : { 'z-index': '0' },
166+
element.z !== 0 ? { 'z-index': element.z as number } : { 'z-index': 0 },
165167
{ 'background-color': componentData.color },
166168
]"
167169
>
@@ -177,7 +179,7 @@
177179
element.y !== 0 ? { left: element.y + '%' } : { left: '20%' },
178180
element.w !== 0 ? { width: element.w + '%' } : { width: '60%' },
179181
element.h !== 0 ? { height: element.h + '%' } : { height: '10%' },
180-
element.z !== 0 ? { 'z-index': element.z } : { 'z-index': '0' },
182+
element.z !== 0 ? { 'z-index': element.z as number } : { 'z-index': 0 },
181183
{ 'background-color': componentData.color },
182184
]"
183185
>
@@ -193,7 +195,7 @@
193195
element.y !== 0 ? { left: element.y + '%' } : { left: '25%' },
194196
element.w !== 0 ? { width: element.w + '%' } : { width: '50%' },
195197
element.h !== 0 ? { height: element.h + '%' } : { height: '8%' },
196-
element.z !== 0 ? { 'z-index': element.z } : { 'z-index': '0' },
198+
element.z !== 0 ? { 'z-index': element.z as number } : { 'z-index': 0 },
197199
{ 'background-color': componentData.color },
198200
]"
199201
>
@@ -209,7 +211,7 @@
209211
element.y !== 0 ? { left: element.y + '%' } : { left: '30%' },
210212
element.w !== 0 ? { width: element.w + '%' } : { width: '40%' },
211213
element.h !== 0 ? { height: element.h + '%' } : { height: '5%' },
212-
element.z !== 0 ? { 'z-index': element.z } : { 'z-index': '0' },
214+
element.z !== 0 ? { 'z-index': element.z as number } : { 'z-index': 0 },
213215
{ 'background-color': componentData.color },
214216
]"
215217
>
@@ -226,7 +228,7 @@
226228
element.y !== 0 ? { left: element.y + '%' } : { left: '20%' },
227229
element.w !== 0 ? { width: element.w + '%' } : { width: '40%' },
228230
element.h !== 0 ? { height: element.h + '%' } : { height: '40%' },
229-
element.z !== 0 ? { 'z-index': element.z } : { 'z-index': '0' },
231+
element.z !== 0 ? { 'z-index': element.z as number } : { 'z-index': 0 },
230232
{ 'background-color': componentData.color },
231233
]"
232234
>
@@ -243,7 +245,7 @@
243245
element.y !== 0 ? { left: element.y + '%' } : { left: '30%' },
244246
element.w !== 0 ? { width: element.w + '%' } : { width: '60%' },
245247
element.h !== 0 ? { height: element.h + '%' } : { height: '10%' },
246-
element.z !== 0 ? { 'z-index': element.z } : { 'z-index': '0' },
248+
element.z !== 0 ? { 'z-index': element.z as number } : { 'z-index': 0 },
247249
{ 'background-color': componentData.color },
248250
]"
249251
>
@@ -259,7 +261,7 @@
259261
element.y !== 0 ? { left: element.y + '%' } : { left: '10%' },
260262
element.w !== 0 ? { width: element.w + '%' } : { width: '80%' },
261263
element.h !== 0 ? { height: element.h + '%' } : { height: '40%' },
262-
element.z !== 0 ? { 'z-index': element.z } : { 'z-index': '0' },
264+
element.z !== 0 ? { 'z-index': element.z as number } : { 'z-index': 0 },
263265
{ 'background-color': componentData.color },
264266
]"
265267
>
@@ -280,7 +282,7 @@
280282
element.y !== 0 ? { left: element.y + '%' } : { left: '10%' },
281283
element.w !== 0 ? { width: element.w + '%' } : { width: '80%' },
282284
element.h !== 0 ? { height: element.h + '%' } : { height: '40%' },
283-
element.z !== 0 ? { 'z-index': element.z } : { 'z-index': '0' },
285+
element.z !== 0 ? { 'z-index': element.z as number } : { 'z-index': 0 },
284286
{ 'background-color': componentData.color },
285287
]"
286288
>
@@ -301,7 +303,7 @@
301303
element.y !== 0 ? { left: element.y + '%' } : { left: '10%' },
302304
element.w !== 0 ? { width: element.w + '%' } : { width: '80%' },
303305
element.h !== 0 ? { height: element.h + '%' } : { height: '40%' },
304-
element.z !== 0 ? { 'z-index': element.z } : { 'z-index': '0' },
306+
element.z !== 0 ? { 'z-index': element.z as number } : { 'z-index': 0 },
305307
{ 'background-color': componentData.color },
306308
]"
307309
>
@@ -398,7 +400,7 @@
398400
<p class="title">Adding notes to {{ activeComponent }}</p>
399401
<div class="noteContainer">
400402
<li
401-
v-for="(note, index) in componentMap[activeComponent]
403+
v-for="(note, index) in (componentMap[activeComponent] as Component)
402404
.noteList"
403405
:key="note"
404406
>
@@ -417,7 +419,6 @@
417419
autofocus
418420
true
419421
hide-bottom-space
420-
:hint="hint"
421422
@keyup.enter="submitNote"
422423
></q-input>
423424
<q-btn
@@ -514,7 +515,7 @@ import { ColorPicker } from "vue-accessible-color-picker";
514515
import { useStore } from "../store/main.js";
515516
import { ref, computed, onMounted, watch } from "vue";
516517
import * as fs from "fs";
517-
import { ResizePayload } from "../../types"
518+
import { ResizePayload, Component } from "../../types"
518519
const { ipcRenderer } = window.require("electron");
519520
520521
const cloneDeep = require("lodash.clonedeep");
@@ -556,9 +557,9 @@ const routes = computed(() => store.routes);
556557
const activeRoute = computed(() => store.activeRoute);
557558
const activeComponent = computed(() => store.activeComponent);
558559
const componentMap = computed(() => store.componentMap);
559-
const componentChildrenMultiselectValue = computed(
560-
() => store.componentChildrenMultiselectValue
561-
);
560+
// const componentChildrenMultiselectValue = computed(
561+
// () => store.componentChildrenMultiselectValue
562+
// );
562563
const imagePath = computed(() => store.imagePath);
563564
const activeComponentObj = computed(() => store.activeComponentObj);
564565
const exportAsTypescript = computed(() => store.exportAsTypescript);
@@ -748,7 +749,7 @@ const refresh = () => {
748749
749750
// drag and drop function
750751
const finishedDrag = (x: number, y: number) => {
751-
let payload: ResizePayload = {
752+
let payload = {
752753
x: x,
753754
y: y,
754755
activeComponent: activeComponent.value,

‎types.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -270,8 +270,8 @@ export type RouteComponentMap = {
270270
export interface ResizePayload {
271271
x: number;
272272
y: number;
273-
h: number;
274-
w: number;
273+
h?: number;
274+
w?: number;
275275
activeComponent: string;
276276
routeArray: Component[];
277277
activeComponentData: null | Component;

0 commit comments

Comments
 (0)