Skip to content

Commit 2d1654d

Browse files
tlukasiewicz89tlukasiewicz89
committed
Merge branch 'disableMultiParent' into finalCut
2 parents d7a899e + 70ddd3c commit 2d1654d

File tree

2 files changed

+174
-12
lines changed

2 files changed

+174
-12
lines changed

‎app/src/components/main/Canvas.tsx

Lines changed: 150 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useContext } from 'react';
1+
import React, { useContext, useState, useEffect } from 'react';
22
import { useDrop, DropTargetMonitor } from 'react-dnd';
33
import { ItemTypes } from '../../constants/ItemTypes';
44
import StateContext from '../../context/context';
@@ -7,9 +7,92 @@ import { combineStyles } from '../../helperFunctions/combineStyles';
77
import renderChildren from '../../helperFunctions/renderChildren';
88
// Caret start
99
import Arrow from './Arrow';
10+
import { getRowsStateFromCache } from '@mui/x-data-grid/hooks/features/rows/gridRowsUtils';
1011

1112
function Canvas(props): JSX.Element {
1213
const [state, dispatch] = useContext(StateContext);
14+
const [newComp, setNewComp] = useState(false);
15+
const [copiedChildrenArr, setCopiedChildrenArr] = useState([]);
16+
const [copiedComp, setCopiedComp] = useState({});
17+
18+
useEffect(()=> {
19+
if (newComp) {
20+
console.log('inside use effect', {state});
21+
console.log('copiedComp', copiedComp.name)
22+
//find updated comp
23+
const copy = state.components.find(comp => comp.name === copiedComp.name)
24+
console.log({copy})
25+
// make a array of copied children from the copied component
26+
if (copy.children.length){
27+
const masterArr = [];
28+
const children = copy.children;
29+
function deepChildCopy(children, parentId) {
30+
for (let i = 0; i < children.length; i++) {
31+
const child = children[i];
32+
let id = (parentId) ? parentId : null;
33+
if (child.typeId < 1000){
34+
console.log({child})
35+
masterArr.push({
36+
type: "HTML Element",
37+
typeId: child.typeId,
38+
childId: id
39+
})
40+
if (child.children.length) {
41+
console.log('do a recursive call');
42+
console.log('child.childrean array in recursion', child.children)
43+
console.log('child.children.id', child.childId)
44+
deepChildCopy(child.children, child.childId);
45+
}
46+
}
47+
}
48+
}
49+
deepChildCopy(children, null);
50+
console.log({masterArr})
51+
setCopiedChildrenArr(masterArr);
52+
console.log('SADJBFSDJBFLJSHDBFJLDHS', copiedChildrenArr)
53+
}
54+
55+
const components = state.components
56+
57+
// find the ID of the newly created component
58+
const newId = components[components.length -1]['id']
59+
dispatch({
60+
type: 'ADD CHILD',
61+
payload: {
62+
type: "Component",
63+
typeId: newId,
64+
childId: null
65+
}
66+
});
67+
}
68+
setNewComp(false)
69+
}, [newComp])
70+
71+
// useEffect(()=>{
72+
// const lastComp = state.components[state.components.length - 1];
73+
// if (copiedChildrenArr.length) {
74+
// console.log('setCopiedChildrenArr use effect running')
75+
// // copiedChildrenArr.forEach(com => console.log(com))
76+
// // console.log(copiedChildrenArr[0])
77+
// // console.log(copiedChildrenArr[1])
78+
// for (let i = 0; i < copiedChildrenArr.length; i++) {
79+
// dispatch({
80+
// type: 'ADD CHILD',
81+
// payload: {...copiedChildrenArr[i], copyId: lastComp.id}
82+
// });
83+
// }
84+
// // dispatch({
85+
// // type: 'ADD CHILD',
86+
// // payload: {...copiedChildrenArr[1], copyId: lastComp.id}
87+
// // });
88+
// // setCopiedChildrenArr(copiedChildrenArr.slice(1))
89+
// setCopiedChildrenArr([])
90+
// }
91+
92+
// },[copiedChildrenArr])
93+
94+
95+
1396
// Caret start
1497
Arrow.deleteLines();
1598
// find the current component to render on the canvas
@@ -49,7 +132,7 @@ function Canvas(props): JSX.Element {
49132
return;
50133
}
51134
// if item dropped is going to be a new instance (i.e. it came from the left panel), then create a new child component
52-
if (item.newInstance) {
135+
if (item.newInstance && item.instanceType !== "Component") {
53136
dispatch({
54137
type: 'ADD CHILD',
55138
payload: {
@@ -58,12 +141,77 @@ function Canvas(props): JSX.Element {
58141
childId: null
59142
}
60143
});
144+
} else if (item.newInstance && item.instanceType === "Component") {
145+
let hasDiffParent = false;
146+
const components = state.components;
147+
let newChildName = '';
148+
// loop over componenets array
149+
for (let i = 0; i < components.length; i++) {
150+
const comp = components[i];
151+
//loop over each componenets child
152+
for (let j = 0; j < comp.children.length; j++) {
153+
const child = comp.children[j];
154+
if (child.name === 'seperator') continue;
155+
// check if the item.instanceTypeId matches and child ID
156+
if (item.instanceTypeId === child.typeId) {
157+
console.log('parent found', comp)
158+
// check if the name of the parent matches the canvas focus name
159+
// comp is the parent component
160+
// currentComponent is the canvas.focus component
161+
if (comp.name === currentComponent.name) {
162+
i = components.length;
163+
break;
164+
} else {
165+
// if false
166+
console.log('different parent');
167+
setCopiedComp(child);
168+
hasDiffParent = true;
169+
newChildName = child.name;
170+
i = components.length;
171+
break;
172+
}
173+
}
174+
}
175+
}
176+
if (!hasDiffParent) {
177+
dispatch({
178+
type: 'ADD CHILD',
179+
payload: {
180+
type: item.instanceType,
181+
typeId: item.instanceTypeId,
182+
childId: null
183+
}
184+
});
185+
} else {
186+
// create a new component
187+
let name = prompt("Component already has a parent. \nDo you want to create a new component and import its elements?", "Enter component name here");
188+
// console.log({newChildName}, 1)
189+
while (components.some(comp => comp.name === name)) {
190+
name = prompt(`${name} component already exists. \nPlease pick a new name.`);
191+
}
192+
if (name) {
193+
dispatch({
194+
type: 'ADD COMPONENT',
195+
payload: { componentName: name, root: false }
196+
});
197+
198+
setNewComp(true);
199+
console.log({newComp})
200+
201+
// console.log({components})
202+
// console.log({newId})
203+
setNewComp(!newComp)
204+
}
205+
206+
}
207+
61208
}
62209
},
63210
collect: monitor => ({
64211
isOver: !!monitor.isOver()
65212
})
66213
});
214+
67215
// Styling for Canvas
68216
const defaultCanvasStyle = {
69217
width: '100%',

‎app/src/reducers/componentReducer.ts

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ const reducer = (state: State, action: Action) => {
7070
const findChild = (component: Component, childId: number) => {
7171
if (childId === null) return component;
7272
const nodeArr = [...component.children];
73+
console.log({nodeArr})
7374
// breadth first search through component tree to see if a child exists
7475
while (nodeArr.length > 0) {
7576
// shift off the first value and assign to an element
@@ -195,6 +196,7 @@ const reducer = (state: State, action: Action) => {
195196
};
196197
switch (action.type) {
197198
case 'ADD COMPONENT': {
199+
console.log('adding component payload', action.payload)
198200
if (
199201
typeof action.payload.componentName !== 'string' ||
200202
action.payload.componentName === ''
@@ -221,11 +223,12 @@ const reducer = (state: State, action: Action) => {
221223
const rootComponents = [...state.rootComponents];
222224
if (action.payload.root) rootComponents.push(newComponent.id);
223225
// updates the focus to the new component, which redirects to the new blank canvas of said new component
224-
const canvasFocus = {
225-
...state.canvasFocus,
226-
componentId: newComponent.id,
227-
childId: null
228-
};
226+
//tom commented this out
227+
// const canvasFocus = {
228+
// ...state.canvasFocus,
229+
// componentId: newComponent.id,
230+
// childId: null
231+
// };
229232
const nextComponentId = state.nextComponentId + 1;
230233
newComponent.code = generateCode(
231234
components,
@@ -239,22 +242,30 @@ const reducer = (state: State, action: Action) => {
239242
components,
240243
rootComponents,
241244
nextComponentId,
242-
canvasFocus
245+
// canvasFocus
243246
};
244247
}
245248
// Add child to a given root component
246249
case 'ADD CHILD': {
250+
console.log('add child started', action.payload)
251+
let parentComponentId: number;
247252
const {
248253
type,
249254
typeId,
250255
childId
251256
}: { type: string; typeId: number; childId: any } = action.payload;
252-
const parentComponentId: number = state.canvasFocus.componentId;
257+
if (action.payload.copyId) {
258+
parentComponentId = action.payload.copyId;
259+
} else {
260+
parentComponentId = state.canvasFocus.componentId;
261+
}
262+
253263
const components = [...state.components];
254-
// find component (an object) that we're adding a child to
264+
255265
const parentComponent = findComponent(components, parentComponentId);
256-
let componentName = '';
257-
let componentChildren = [];
266+
console.log({parentComponent})
267+
let componentName: string = '';
268+
let componentChildren: Object[] = [];
258269
if (type === 'Component') {
259270
components.forEach(comp => {
260271
if (comp.id === typeId) {
@@ -316,6 +327,8 @@ const reducer = (state: State, action: Action) => {
316327
}
317328
// if there is a childId (childId here references the direct parent of the new child) find that child and a new child to its children array
318329
else {
330+
console.log({childId})
331+
console.log({directParent})
319332
directParent = findChild(parentComponent, childId);
320333
if (directParent.type === "HTML Element" && type === "HTML Element") {
321334
directParent.children.push(topSeparator);
@@ -1030,6 +1043,7 @@ const reducer = (state: State, action: Action) => {
10301043
});
10311044
return { ...state, components};
10321045
}
1046+
10331047
default:
10341048
return state;
10351049
}

0 commit comments

Comments
 (0)