Skip to content

delete component (and more... ) added #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 24, 2019
Merged

delete component (and more... ) added #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 17 additions & 11 deletions src/actions/components.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,20 +70,26 @@ export const addChild = ({ title }) => dispatch => {
dispatch({ type: ADD_CHILD, payload: { title } });
};

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

export const deleteComponent = ({ index, id, parentIds = [] }) => dispatch => {
if (parentIds.length) {
// Delete Component from its parent if it has a parent.
dispatch(updateChildren({ parentIds, childId: id, childIndex: index }));
}
// Reassign Component's children to its parent if it has one or make them orphans
dispatch(parentReassignment({ index, id, parentIds }));
export const deleteComponent = ({ componentId , stateComponents}) => dispatch => {
console.log('Hello from component.js delete component.componentId= ',componentId)

// find all places where the "to be delted" is a child and do what u gotta do
stateComponents.forEach( parent => {
parent.childrenArray.filter(child => child.childComponentId == componentId).forEach( child => {
//console.log(`Should delete ${child.childId} from component id:${parent.id} ${parent.title}`)
dispatch({ type: DELETE_CHILD, payload: { parentId: parent.id, childId: child.childId, calledFromDeleteComponent: true } });
})
})

// change focus to APp
dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title: 'App' } });
// after taking care of the children delete the component
dispatch({ type: DELETE_COMPONENT, payload: { componentId } });

dispatch({ type: DELETE_COMPONENT, payload: { index, id } });
dispatch({ type: SET_SELECTABLE_PARENTS });
};

export const updateComponent = ({
Expand Down
2 changes: 1 addition & 1 deletion src/containers/LeftContainer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ class LeftContainer extends Component {
} = this.props;
const { componentName } = this.state;

console.log(components);
//console.log(components);

const componentsExpansionPanel = components
.sort((a, b) => parseInt(b.id) - parseInt(a.id)) // sort by id value of comp
Expand Down
20 changes: 18 additions & 2 deletions src/containers/MainContainer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
handleTransform,
changeFocusChild,
deleteChild,
deleteComponent,
} from '../actions/components';
import KonvaStage from '../components/KonvaStage.jsx';
// import MainContainerHeader from '../components/MainContainerHeader.jsx';
Expand All @@ -35,13 +36,15 @@ const mapDispatchToProps = dispatch => ({
toggleComponentDragging: status => dispatch(toggleDragging(status)),
openPanel: component => dispatch(openExpansionPanel(component)),
changeFocusChild: ({ title, childId }) => dispatch(changeFocusChild({ title, childId })),
deleteChild: ({childId }) => dispatch(deleteChild({ childId })),
deleteChild: ({ }) => dispatch(deleteChild({ })), // if u send no prms, function will delete focus child.
deleteComponent: ({componentId ,stateComponents}) => dispatch(deleteComponent({ componentId ,stateComponents})),
});

const mapStateToProps = store => ({
totalComponents: store.workspace.totalComponents,
focusComponent: store.workspace.focusComponent,
focusChild: store.workspace.focusChild,
stateComponents: store.workspace.components,
});

class MainContainer extends Component {
Expand Down Expand Up @@ -97,6 +100,8 @@ class MainContainer extends Component {
focusChild,
changeFocusChild,
deleteChild,
deleteComponent,
stateComponents ,
} = this.props;
const {
increaseHeight,
Expand All @@ -110,6 +115,12 @@ class MainContainer extends Component {
} = this;
const cursor = this.state.draggable ? 'move' : 'default';

// show a string of all direct parents. SO the user can gaze at it.
const directParents = !focusComponent.id
? `Waiting for a focused component`
: stateComponents.filter(comp => comp.childrenArray.some(kiddy => kiddy.childComponentId == focusComponent.id))
.map( comp => comp.title).join(',')

return (
<MuiThemeProvider theme={theme}>
<div className="main-container" style={{ cursor }}>
Expand All @@ -128,7 +139,12 @@ class MainContainer extends Component {
deleteChild={deleteChild}
/>
</div>
<button onClick={deleteChild} >`delete focused child`</button>

<p>
{ directParents ? `Used in: ${directParents}` : 'Not used in any other component'}
</p>
<button onClick={deleteChild} >delete focused child</button>
<button onClick={() => deleteComponent({componentId: focusComponent.id, stateComponents})} >delete focused components</button>
</div>
</MuiThemeProvider>
);
Expand Down
153 changes: 71 additions & 82 deletions src/utils/componentReducer.util.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,55 +120,39 @@ export const addChild = (state, { title }) => {
};
};

export const deleteChild = (state, {} )=>{
// The child to delete is the FOCUSED child
// THE parent is the FOCUSED component

console.log((`Focused Component (parent) id:${state.focusComponent.id} title:${state.focusComponent.title}
Focused Child (the one 2 be deleted) ChildID:${state.focusChild.childId}`)
)

if (!state.focusComponent.id) return window.alert(`Cannot delete Child if Focused component id = ZERO`)
if (!state.focusChild.childId) return window.alert(`Cannot delete Child if Focused Child id = ZERO`)
// I'm not sure what the "focused component" is (a reference, a copy or ?
// So, let's get a reference to the focused component ..
const currFocusedComponent = state.components.find( c => c.id == state.focusComponent.id) ;
console.log('currFocusedComponent: ' ,currFocusedComponent )
// copy the Children Array of the foxused component

console.log('Wtf ?')
const copyOfChildrenArray = [...currFocusedComponent.childrenArray]
console.log('copyOfChildrenArray',copyOfChildrenArray)
console.log('after copy : state.focusChild.childId:',state.focusChild.childId)
// delete the SELECTED CHILD from the copied array
const indexToDelete = copyOfChildrenArray.findIndex( elem => elem.childId == state.focusChild.childId)
console.log(`Index to delete : ${indexToDelete}`)

if (indexToDelete < 0 ) return window.alert(`DeleteChild speaking here. The chils u r trying to delete was not found`);

copyOfChildrenArray.splice(indexToDelete,1)

//Make a copy of the focused component - this is the one we will modify
const copyOfFocusedComponent = {
...currFocusedComponent,
childrenArray: copyOfChildrenArray
}
export const deleteChild = (state,
{parentId = state.focusComponent.id
,childId = state.focusChild.childId
,calledFromDeleteComponent = false
})=>{

//console.log(`delete child here. state.focusChild.childId = ${state.focusChild.childId} state.focusComponent.id=${state.focusComponent.id}`)
/**************************************************
if no parameters are provided we default to delete the FOCUSED CHILD of the FOCUSED COMPONENTS
however when deleting component we wnt to delete ALL the places where it's used, so we call this function
Also when calling from DELETE components , we do not touch focusCOmponent.
*************************************************************************************/
if (!parentId) { window.alert(`Cannot delete Child if parent id = ZERO `) ; return state }
if (!childId) { window.alert(`Cannot delete Child if Child id = ZERO`) ; return state }
console.log(`delete child parentid: ${parentId} cildId: ${childId}`)
// make a DEEP copy of the parent component (the one thats about to loose a child)
const parentComponentCopy = JSON.parse(JSON.stringify(state.components.find( c => c.id == parentId)));

// delete the CHILD from the copied array
const indexToDelete = parentComponentCopy.childrenArray.findIndex( elem => elem.childId == childId)
if (indexToDelete < 0 ) return window.alert(`DeleteChild speaking here. The child u r trying to delete was not found`);
parentComponentCopy.childrenArray.splice(indexToDelete,1)

console.log(`copyOfFocusedComponent:`)
console.log(copyOfFocusedComponent)
// copy the entire compoenents array from state
const modifiedComponentArray = [
...state.components.filter( c => c.id !== currFocusedComponent.id ) , // all elements besides the one just changed
copyOfFocusedComponent
...state.components.filter( c => c.id !== parentId ) , // all elements besides the one just changed
parentComponentCopy
]
console.log('modifiedComponentArray')
console.log(modifiedComponentArray)

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

}
Expand Down Expand Up @@ -235,56 +219,61 @@ export const handleTransform = (

// };

export const updateComponent = (
state,
{ id, newParentId = null, color = null, stateful = null, props = null }
) => {
let component;
const components = state.components.map(comp => {
if (comp.id === id) {
component = { ...comp };
if (newParentId) {
const parentIdsSet = new Set(component.parentIds);
if (parentIdsSet.has(newParentId)) {
parentIdsSet.delete(newParentId);
} else {
parentIdsSet.add(newParentId);
}
component.parentIds = [...parentIdsSet];
}
if (props) {
component.props = props;
component.nextPropId += 1;
}
component.color = color || component.color;
component.stateful = stateful === null ? component.stateful : stateful;
return component;
}
return comp;
});
// export const updateComponent = (
// state,
// { id, newParentId = null, color = null, stateful = null, props = null }
// ) => {
// let component;
// const components = state.components.map(comp => {
// if (comp.id === id) {
// component = { ...comp };
// if (newParentId) {
// const parentIdsSet = new Set(component.parentIds);
// if (parentIdsSet.has(newParentId)) {
// parentIdsSet.delete(newParentId);
// } else {
// parentIdsSet.add(newParentId);
// }
// component.parentIds = [...parentIdsSet];
// }
// if (props) {
// component.props = props;
// component.nextPropId += 1;
// }
// component.color = color || component.color;
// component.stateful = stateful === null ? component.stateful : stateful;
// return component;
// }
// return comp;
// });

return {
...state,
components,
focusComponent: component
};
};
// return {
// ...state,
// components,
// focusComponent: component
// };
// };

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

export const deleteComponent = (state, { componentId }) => {
// const { focusComponent } = state;
// const components = [
// ...state.components.slice(0, index),
// ...state.components.slice(index + 1)
// ];
const indexToDelete = state.components.findIndex( comp => comp.id == componentId) ;
console.log('index to delete: ', indexToDelete)

const componentsCopy = JSON.parse(JSON.stringify(state.components))
componentsCopy.splice(indexToDelete,1)
const totalComponents = state.totalComponents - 1;

console.log(`Real delete component action here : id:${componentId}`)
return {
...state,
totalComponents,
components,
focusComponent: focusComponent.id === id ? {} : focusComponent
components: componentsCopy ,
};
};

Expand Down