Skip to content

Commit 496b82e

Browse files
ShlomoPorgesShlomoPorges
authored
Merge pull request #33 from ShlomoPorges/development
delete component (and more... ) added
2 parents c31cec3 + ae5ec91 commit 496b82e

File tree

4 files changed

+107
-96
lines changed

4 files changed

+107
-96
lines changed

‎src/actions/components.js

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -70,20 +70,26 @@ export const addChild = ({ title }) => dispatch => {
7070
dispatch({ type: ADD_CHILD, payload: { title } });
7171
};
7272

73-
export const deleteChild = ({ title }) => dispatch => {
74-
dispatch({ type: DELETE_CHILD, payload: { title } });
73+
export const deleteChild = ({ }) => dispatch => { // with no payload, it will delete focusd child
74+
dispatch({ type: DELETE_CHILD, payload: { } });
7575
};
7676

77-
export const deleteComponent = ({ index, id, parentIds = [] }) => dispatch => {
78-
if (parentIds.length) {
79-
// Delete Component from its parent if it has a parent.
80-
dispatch(updateChildren({ parentIds, childId: id, childIndex: index }));
81-
}
82-
// Reassign Component's children to its parent if it has one or make them orphans
83-
dispatch(parentReassignment({ index, id, parentIds }));
77+
export const deleteComponent = ({ componentId , stateComponents}) => dispatch => {
78+
console.log('Hello from component.js delete component.componentId= ',componentId)
79+
80+
// find all places where the "to be delted" is a child and do what u gotta do
81+
stateComponents.forEach( parent => {
82+
parent.childrenArray.filter(child => child.childComponentId == componentId).forEach( child => {
83+
//console.log(`Should delete ${child.childId} from component id:${parent.id} ${parent.title}`)
84+
dispatch({ type: DELETE_CHILD, payload: { parentId: parent.id, childId: child.childId, calledFromDeleteComponent: true } });
85+
})
86+
})
87+
88+
// change focus to APp
89+
dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title: 'App' } });
90+
// after taking care of the children delete the component
91+
dispatch({ type: DELETE_COMPONENT, payload: { componentId } });
8492

85-
dispatch({ type: DELETE_COMPONENT, payload: { index, id } });
86-
dispatch({ type: SET_SELECTABLE_PARENTS });
8793
};
8894

8995
export const updateComponent = ({

‎src/containers/LeftContainer.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ class LeftContainer extends Component {
7575
} = this.props;
7676
const { componentName } = this.state;
7777

78-
console.log(components);
78+
//console.log(components);
7979

8080
const componentsExpansionPanel = components
8181
.sort((a, b) => parseInt(b.id) - parseInt(a.id)) // sort by id value of comp

‎src/containers/MainContainer.jsx

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
handleTransform,
1414
changeFocusChild,
1515
deleteChild,
16+
deleteComponent,
1617
} from '../actions/components';
1718
import KonvaStage from '../components/KonvaStage.jsx';
1819
// import MainContainerHeader from '../components/MainContainerHeader.jsx';
@@ -35,13 +36,15 @@ const mapDispatchToProps = dispatch => ({
3536
toggleComponentDragging: status => dispatch(toggleDragging(status)),
3637
openPanel: component => dispatch(openExpansionPanel(component)),
3738
changeFocusChild: ({ title, childId }) => dispatch(changeFocusChild({ title, childId })),
38-
deleteChild: ({childId }) => dispatch(deleteChild({ childId })),
39+
deleteChild: ({ }) => dispatch(deleteChild({ })), // if u send no prms, function will delete focus child.
40+
deleteComponent: ({componentId ,stateComponents}) => dispatch(deleteComponent({ componentId ,stateComponents})),
3941
});
4042

4143
const mapStateToProps = store => ({
4244
totalComponents: store.workspace.totalComponents,
4345
focusComponent: store.workspace.focusComponent,
4446
focusChild: store.workspace.focusChild,
47+
stateComponents: store.workspace.components,
4548
});
4649

4750
class MainContainer extends Component {
@@ -97,6 +100,8 @@ class MainContainer extends Component {
97100
focusChild,
98101
changeFocusChild,
99102
deleteChild,
103+
deleteComponent,
104+
stateComponents ,
100105
} = this.props;
101106
const {
102107
increaseHeight,
@@ -110,6 +115,12 @@ class MainContainer extends Component {
110115
} = this;
111116
const cursor = this.state.draggable ? 'move' : 'default';
112117

118+
// show a string of all direct parents. SO the user can gaze at it.
119+
const directParents = !focusComponent.id
120+
? `Waiting for a focused component`
121+
: stateComponents.filter(comp => comp.childrenArray.some(kiddy => kiddy.childComponentId == focusComponent.id))
122+
.map( comp => comp.title).join(',')
123+
113124
return (
114125
<MuiThemeProvider theme={theme}>
115126
<div className="main-container" style={{ cursor }}>
@@ -128,7 +139,12 @@ class MainContainer extends Component {
128139
deleteChild={deleteChild}
129140
/>
130141
</div>
131-
<button onClick={deleteChild} >`delete focused child`</button>
142+
143+
<p>
144+
{ directParents ? `Used in: ${directParents}` : 'Not used in any other component'}
145+
</p>
146+
<button onClick={deleteChild} >delete focused child</button>
147+
<button onClick={() => deleteComponent({componentId: focusComponent.id, stateComponents})} >delete focused components</button>
132148
</div>
133149
</MuiThemeProvider>
134150
);

‎src/utils/componentReducer.util.js

Lines changed: 71 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -120,55 +120,39 @@ export const addChild = (state, { title }) => {
120120
};
121121
};
122122

123-
export const deleteChild = (state, {} )=>{
124-
// The child to delete is the FOCUSED child
125-
// THE parent is the FOCUSED component
126-
127-
console.log((`Focused Component (parent) id:${state.focusComponent.id} title:${state.focusComponent.title}
128-
Focused Child (the one 2 be deleted) ChildID:${state.focusChild.childId}`)
129-
)
130-
131-
if (!state.focusComponent.id) return window.alert(`Cannot delete Child if Focused component id = ZERO`)
132-
if (!state.focusChild.childId) return window.alert(`Cannot delete Child if Focused Child id = ZERO`)
133-
// I'm not sure what the "focused component" is (a reference, a copy or ?
134-
// So, let's get a reference to the focused component ..
135-
const currFocusedComponent = state.components.find( c => c.id == state.focusComponent.id) ;
136-
console.log('currFocusedComponent: ' ,currFocusedComponent )
137-
// copy the Children Array of the foxused component
138-
139-
console.log('Wtf ?')
140-
const copyOfChildrenArray = [...currFocusedComponent.childrenArray]
141-
console.log('copyOfChildrenArray',copyOfChildrenArray)
142-
console.log('after copy : state.focusChild.childId:',state.focusChild.childId)
143-
// delete the SELECTED CHILD from the copied array
144-
const indexToDelete = copyOfChildrenArray.findIndex( elem => elem.childId == state.focusChild.childId)
145-
console.log(`Index to delete : ${indexToDelete}`)
146-
147-
if (indexToDelete < 0 ) return window.alert(`DeleteChild speaking here. The chils u r trying to delete was not found`);
148-
149-
copyOfChildrenArray.splice(indexToDelete,1)
150-
151-
//Make a copy of the focused component - this is the one we will modify
152-
const copyOfFocusedComponent = {
153-
...currFocusedComponent,
154-
childrenArray: copyOfChildrenArray
155-
}
123+
export const deleteChild = (state,
124+
{parentId = state.focusComponent.id
125+
,childId = state.focusChild.childId
126+
,calledFromDeleteComponent = false
127+
})=>{
128+
129+
//console.log(`delete child here. state.focusChild.childId = ${state.focusChild.childId} state.focusComponent.id=${state.focusComponent.id}`)
130+
/**************************************************
131+
if no parameters are provided we default to delete the FOCUSED CHILD of the FOCUSED COMPONENTS
132+
however when deleting component we wnt to delete ALL the places where it's used, so we call this function
133+
Also when calling from DELETE components , we do not touch focusCOmponent.
134+
*************************************************************************************/
135+
if (!parentId) { window.alert(`Cannot delete Child if parent id = ZERO `) ; return state }
136+
if (!childId) { window.alert(`Cannot delete Child if Child id = ZERO`) ; return state }
137+
console.log(`delete child parentid: ${parentId} cildId: ${childId}`)
138+
// make a DEEP copy of the parent component (the one thats about to loose a child)
139+
const parentComponentCopy = JSON.parse(JSON.stringify(state.components.find( c => c.id == parentId)));
140+
141+
// delete the CHILD from the copied array
142+
const indexToDelete = parentComponentCopy.childrenArray.findIndex( elem => elem.childId == childId)
143+
if (indexToDelete < 0 ) return window.alert(`DeleteChild speaking here. The child u r trying to delete was not found`);
144+
parentComponentCopy.childrenArray.splice(indexToDelete,1)
156145

157-
console.log(`copyOfFocusedComponent:`)
158-
console.log(copyOfFocusedComponent)
159-
// copy the entire compoenents array from state
160146
const modifiedComponentArray = [
161-
...state.components.filter( c => c.id !== currFocusedComponent.id ) , // all elements besides the one just changed
162-
copyOfFocusedComponent
147+
...state.components.filter( c => c.id !== parentId ) , // all elements besides the one just changed
148+
parentComponentCopy
163149
]
164-
console.log('modifiedComponentArray')
165-
console.log(modifiedComponentArray)
166150

167151
// RETURN - update state...
168152
return {
169153
...state,
170154
components: modifiedComponentArray,
171-
focusComponent: copyOfFocusedComponent, // problem! the delete works on State.components, but not on FOcus component.. starnge..
155+
focusComponent: calledFromDeleteComponent ? state.focusComponent : parentComponentCopy, // when called from delete component we dont need want to touch the focus
172156
focusChild: {} // reset to blank.
173157

174158
}
@@ -235,56 +219,61 @@ export const handleTransform = (
235219

236220
// };
237221

238-
export const updateComponent = (
239-
state,
240-
{ id, newParentId = null, color = null, stateful = null, props = null }
241-
) => {
242-
let component;
243-
const components = state.components.map(comp => {
244-
if (comp.id === id) {
245-
component = { ...comp };
246-
if (newParentId) {
247-
const parentIdsSet = new Set(component.parentIds);
248-
if (parentIdsSet.has(newParentId)) {
249-
parentIdsSet.delete(newParentId);
250-
} else {
251-
parentIdsSet.add(newParentId);
252-
}
253-
component.parentIds = [...parentIdsSet];
254-
}
255-
if (props) {
256-
component.props = props;
257-
component.nextPropId += 1;
258-
}
259-
component.color = color || component.color;
260-
component.stateful = stateful === null ? component.stateful : stateful;
261-
return component;
262-
}
263-
return comp;
264-
});
222+
// export const updateComponent = (
223+
// state,
224+
// { id, newParentId = null, color = null, stateful = null, props = null }
225+
// ) => {
226+
// let component;
227+
// const components = state.components.map(comp => {
228+
// if (comp.id === id) {
229+
// component = { ...comp };
230+
// if (newParentId) {
231+
// const parentIdsSet = new Set(component.parentIds);
232+
// if (parentIdsSet.has(newParentId)) {
233+
// parentIdsSet.delete(newParentId);
234+
// } else {
235+
// parentIdsSet.add(newParentId);
236+
// }
237+
// component.parentIds = [...parentIdsSet];
238+
// }
239+
// if (props) {
240+
// component.props = props;
241+
// component.nextPropId += 1;
242+
// }
243+
// component.color = color || component.color;
244+
// component.stateful = stateful === null ? component.stateful : stateful;
245+
// return component;
246+
// }
247+
// return comp;
248+
// });
265249

266-
return {
267-
...state,
268-
components,
269-
focusComponent: component
270-
};
271-
};
250+
// return {
251+
// ...state,
252+
// components,
253+
// focusComponent: component
254+
// };
255+
// };
272256

273257
// Delete component with the index for now, but will be adjusted to use id
274-
export const deleteComponent = (state, { index, id }) => {
275-
const { focusComponent } = state;
276-
const components = [
277-
...state.components.slice(0, index),
278-
...state.components.slice(index + 1)
279-
];
280258

259+
export const deleteComponent = (state, { componentId }) => {
260+
// const { focusComponent } = state;
261+
// const components = [
262+
// ...state.components.slice(0, index),
263+
// ...state.components.slice(index + 1)
264+
// ];
265+
const indexToDelete = state.components.findIndex( comp => comp.id == componentId) ;
266+
console.log('index to delete: ', indexToDelete)
267+
268+
const componentsCopy = JSON.parse(JSON.stringify(state.components))
269+
componentsCopy.splice(indexToDelete,1)
281270
const totalComponents = state.totalComponents - 1;
282271

272+
console.log(`Real delete component action here : id:${componentId}`)
283273
return {
284274
...state,
285275
totalComponents,
286-
components,
287-
focusComponent: focusComponent.id === id ? {} : focusComponent
276+
components: componentsCopy ,
288277
};
289278
};
290279

0 commit comments

Comments
 (0)