Skip to content

app tree working #61

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 3 commits into from
May 5, 2019
Merged

app tree working #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c2d382d
testing git
tolgamizrakci May 4, 2019
db49d8c
app tree working
tolgamizrakci May 5, 2019
17bb341
merging tree changes
tolgamizrakci May 5, 2019
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
4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@
]
},
"dependencies": {
"@material-ui/core": "^1.4.1",
"@material-ui/core": "^3.9.3",
"@material-ui/icons": "^2.0.0",
"@types/react": "^16.8.14",
"@types/react-dom": "^16.8.4",
Expand All @@ -85,6 +85,7 @@
"classnames": "^2.2.6",
"cli-spinner": "^0.2.8",
"commander": "^2.17.1",
"d3": "^5.9.2",
"electron": "^2.0.7",
"electron-reload": "^1.4.0",
"enzyme": "^3.4.1",
Expand All @@ -94,6 +95,7 @@
"prettier": "^1.14.2",
"prop-types": "^15.6.2",
"react": "^16.4.1",
"react-d3-tree": "^1.12.3",
"react-dom": "^16.4.1",
"react-draggable": "^3.0.5",
"react-konva": "^1.7.12",
Expand Down
162 changes: 93 additions & 69 deletions src/actions/components.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,21 +26,23 @@ import {
ADD_PROP,
DELETE_ALL_DATA,
CHANGE_IMAGE_PATH,
UPDATE_HTML_ATTR,
} from '../actionTypes/index';
UPDATE_HTML_ATTR
} from "../actionTypes/index";

import { loadState } from '../localStorage';
import { loadState } from "../localStorage";

import createFiles from '../utils/createFiles.util';
import createApplicationUtil from '../utils/createApplication.util';
import createFiles from "../utils/createFiles.util";
import createApplicationUtil from "../utils/createApplication.util";

export const loadInitData = () => (dispatch) => {
loadState().then(data => dispatch({
type: LOAD_INIT_DATA,
payload: {
data: data ? data.workspace : {},
},
}));
export const loadInitData = () => dispatch => {
loadState().then(data =>
dispatch({
type: LOAD_INIT_DATA,
payload: {
data: data ? data.workspace : {}
}
})
);
};

// export const updateChildren = ({ parentIds, childIndex, childId }) => ({
Expand All @@ -61,39 +63,47 @@ export const loadInitData = () => (dispatch) => {
// },
// });

export const addComponent = ({ title }) => (dispatch) => {
export const addComponent = ({ title }) => dispatch => {
dispatch({ type: ADD_COMPONENT, payload: { title } });
};

export const addChild = ({ title, childType, HTMLInfo }) => (dispatch) => {
export const addChild = ({ title, childType, HTMLInfo }) => dispatch => {
dispatch({ type: ADD_CHILD, payload: { title, childType, HTMLInfo } });
};

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

export const deleteComponent = ({ componentId, stateComponents }) => (dispatch) => {
console.log('Hello from component.js delete component.componentId= ', componentId);
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,
},
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' } });
dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title: "App" } });
// after taking care of the children delete the component
dispatch({ type: DELETE_COMPONENT, payload: { componentId } });
};
Expand Down Expand Up @@ -129,129 +139,143 @@ export const deleteComponent = ({ componentId, stateComponents }) => (dispatch)
// dispatch({ type: SET_SELECTABLE_PARENTS });
// };

export const changeFocusComponent = ({ title }) => (dispatch) => {
export const changeFocusComponent = ({ title }) => dispatch => {
dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title } });
};

// make sure childId is being sent in
export const changeFocusChild = ({ title, childId }) => (dispatch) => {
export const changeFocusChild = ({ title, childId }) => dispatch => {
dispatch({ type: CHANGE_FOCUS_CHILD, payload: { title, childId } });
};

export const changeComponentFocusChild = ({ componentId, childId }) => (dispatch) => {
export const changeComponentFocusChild = ({
componentId,
childId
}) => dispatch => {
dispatch({
type: CHANGE_COMPONENT_FOCUS_CHILD,
payload: { componentId, childId },
payload: { componentId, childId }
});
};

export const exportFiles = ({
components, path, appName, exportAppBool,
}) => (dispatch) => {
components,
path,
appName,
exportAppBool
}) => dispatch => {
// this dispatch sets the global state property 'loading' to true until the createFiles call resolves below
dispatch({
type: EXPORT_FILES,
type: EXPORT_FILES
});

createFiles(components, path, appName, exportAppBool)
.then(dir => dispatch({
type: EXPORT_FILES_SUCCESS,
payload: { status: true, dir: dir[0] },
}))
.catch(err => dispatch({
type: EXPORT_FILES_ERROR,
payload: { status: true, err },
}));
.then(dir =>
dispatch({
type: EXPORT_FILES_SUCCESS,
payload: { status: true, dir: dir[0] }
})
)
.catch(err =>
dispatch({
type: EXPORT_FILES_ERROR,
payload: { status: true, err }
})
);
};

export const handleClose = () => ({
type: HANDLE_CLOSE,
payload: false,
payload: false
});

export const handleTransform = (componentId, childId, {
x, y, width, height,
}) => ({
export const handleTransform = (
componentId,
childId,
{ x, y, width, height }
) => ({
type: HANDLE_TRANSFORM,
payload: {
componentId,
childId,
x,
y,
width,
height,
},
height
}
});

export const createApplication = ({
path,
components = [],
genOption,
appName = 'reactype_app',
exportAppBool,
}) => (dispatch) => {
appName = "reactype_app",
exportAppBool
}) => dispatch => {
if (genOption === 0) {
exportAppBool = false;
dispatch(
exportFiles({
appName,
path,
components,
exportAppBool,
}),
exportAppBool
})
);
} else if (genOption) {
exportAppBool = true;
dispatch({
type: CREATE_APPLICATION,
type: CREATE_APPLICATION
});
createApplicationUtil({
path,
appName,
genOption,
exportAppBool,
exportAppBool
})
.then(() => {
dispatch({
type: CREATE_APPLICATION_SUCCESS,
type: CREATE_APPLICATION_SUCCESS
});
dispatch(
exportFiles({
appName,
path,
components,
exportAppBool,
}),
exportAppBool
})
);
})
.catch(err => dispatch({
type: CREATE_APPLICATION_ERROR,
payload: { status: true, err },
}));
.catch(err =>
dispatch({
type: CREATE_APPLICATION_ERROR,
payload: { status: true, err }
})
);
}
};

export const openExpansionPanel = component => ({
type: OPEN_EXPANSION_PANEL,
payload: { component },
payload: { component }
});

// export const deleteAllData = () => ({
// type: DELETE_ALL_DATA,
// });

export const deleteProp = propId => (dispatch) => {
export const deleteProp = propId => dispatch => {
dispatch({ type: DELETE_PROP, payload: propId });
};

export const addProp = prop => ({
type: ADD_PROP,
payload: { ...prop },
payload: { ...prop }
});

export const updateHtmlAttr = ({ attr, value }) => (dispatch) => {
export const updateHtmlAttr = ({ attr, value }) => dispatch => {
dispatch({
type: UPDATE_HTML_ATTR,
payload: { attr, value },
payload: { attr, value }
});
};
5 changes: 4 additions & 1 deletion src/components/BottomPanel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ const mapStateToProps = store => ({
// successOpen: store.workspace.successOpen,
// errorOpen: store.workspace.errorOpen,
// appDir: store.workspace.appDir,
focusChild: store.workspace.focusChild
focusChild: store.workspace.focusChild,
components: store.workspace.components
});

class BottomPanel extends Component {
Expand All @@ -47,6 +48,8 @@ class BottomPanel extends Component {
// rightColumnOpen
} = this.props;

console.log(components);

return (
<div className="bottom-panel" style={{ width: "100%" }}>
<RightTabs
Expand Down
19 changes: 12 additions & 7 deletions src/components/HTMLComponentPanel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ import Chip from "@material-ui/core/Chip";

// import {HTMLelements,getSize} from "../utils/htmlElements.util";

// test

class HTMLComponentPanel extends Component {
state = {
HtmlComponentName: ""
Expand All @@ -43,7 +45,7 @@ class HTMLComponentPanel extends Component {
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
label="Add HTML elements"
/>
<Grid container spacing={24} alignItems="baseline" align="stretch">
<Grid container spacing={8} alignItems="baseline" align="stretch">
<Grid item xs={4}>
<div className="htmliconwrapper">
<IconButton
Expand All @@ -53,9 +55,8 @@ class HTMLComponentPanel extends Component {
this.handleCreateHTMLChild("Image");
}}
>
<ImageIcon />
<ImageIcon style={{ color: "#e0e0e0" }} />
</IconButton>
<Chip label="Image" className={classes.chip} variant="outlined" />
</div>
</Grid>
<Grid item xs={4}>
Expand Down Expand Up @@ -118,13 +119,17 @@ function styles(theme) {
return {
htmlPanel: {
width: "100%",
height: "33%",
backgroundColor: "#333333",
height: "30%",
// backgroundColor: "#333333",
borderStyle: "solid",
borderWidth: "0.5px",
borderRadius: "1px",
borderColor: "#424242",
bottom: "0px",
padding: "20px"
},
chip: {
background: "rgba(193, 66, 66, 0)"
color: "rgba(193, 66, 66, 0)"
},
htmliconwrapper: {
verticalAlign: "baseline"
Expand All @@ -136,7 +141,7 @@ function styles(theme) {
textTransform: "initial",
minWidth: 100,
fontWeight: theme.typography.fontWeightRegular,
marginRight: theme.spacing.unit * 4,
// marginRight: theme.spacing.unit * 4,
color: "#ffffff"
}
};
Expand Down
Loading