Skip to content

Commit 63eeb36

Browse files
Tolga MizrakciTolga Mizrakci
Tolga Mizrakci
authored and
Tolga Mizrakci
committed
adding html comps works
2 parents 50f97c9 + 9b09733 commit 63eeb36

File tree

10 files changed

+285
-187
lines changed

10 files changed

+285
-187
lines changed

‎src/actions/components.js

Lines changed: 46 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -44,30 +44,30 @@ export const loadInitData = () => dispatch => {
4444
);
4545
};
4646

47-
export const updateChildren = ({ parentIds, childIndex, childId }) => ({
48-
type: UPDATE_CHILDREN,
49-
payload: {
50-
parentIds,
51-
childIndex,
52-
childId
53-
}
54-
});
47+
// export const updateChildren = ({ parentIds, childIndex, childId }) => ({
48+
// type: UPDATE_CHILDREN,
49+
// payload: {
50+
// parentIds,
51+
// childIndex,
52+
// childId,
53+
// },
54+
// });
5555

56-
export const parentReassignment = ({ index, id, parentIds }) => ({
57-
type: REASSIGN_PARENT,
58-
payload: {
59-
index,
60-
id,
61-
parentIds
62-
}
63-
});
56+
// export const parentReassignment = ({ index, id, parentIds }) => ({
57+
// type: REASSIGN_PARENT,
58+
// payload: {
59+
// index,
60+
// id,
61+
// parentIds,
62+
// },
63+
// });
6464

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

69-
export const addChild = ({ title }) => dispatch => {
70-
dispatch({ type: ADD_CHILD, payload: { title } });
69+
export const addChild = ({ title, childType, HTMLInfo }) => dispatch => {
70+
dispatch({ type: ADD_CHILD, payload: { title, childType, HTMLInfo } });
7171
};
7272

7373
export const deleteChild = ({}) => dispatch => {
@@ -107,36 +107,36 @@ export const deleteComponent = ({
107107
dispatch({ type: DELETE_COMPONENT, payload: { componentId } });
108108
};
109109

110-
export const updateComponent = ({
111-
id,
112-
index,
113-
newParentId = null,
114-
color = null,
115-
stateful = null
116-
}) => dispatch => {
117-
dispatch({
118-
type: UPDATE_COMPONENT,
119-
payload: {
120-
id,
121-
index,
122-
newParentId,
123-
color,
124-
stateful
125-
}
126-
});
110+
// export const updateComponent = ({
111+
// id,
112+
// index,
113+
// newParentId = null,
114+
// color = null,
115+
// stateful = null,
116+
// }) => (dispatch) => {
117+
// dispatch({
118+
// type: UPDATE_COMPONENT,
119+
// payload: {
120+
// id,
121+
// index,
122+
// newParentId,
123+
// color,
124+
// stateful,
125+
// },
126+
// });
127127

128-
if (newParentId) {
129-
dispatch(
130-
updateChildren({
131-
parentIds: [newParentId],
132-
childId: id,
133-
childIndex: index
134-
})
135-
);
136-
}
128+
// if (newParentId) {
129+
// dispatch(
130+
// updateChildren({
131+
// parentIds: [newParentId],
132+
// childId: id,
133+
// childIndex: index,
134+
// }),
135+
// );
136+
// }
137137

138-
dispatch({ type: SET_SELECTABLE_PARENTS });
139-
};
138+
// dispatch({ type: SET_SELECTABLE_PARENTS });
139+
// };
140140

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

‎src/components/DataTable.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,10 @@ function dataTable(props) {
3232
const { classes , rowData, rowHeader , deletePropHandler } = props;
3333

3434
// console.log(classes)
35-
console.log(`rowHeader`)
36-
console.log(rowHeader)
37-
console.log(`rowData`)
38-
console.log(rowData)
35+
// console.log(`rowHeader`)
36+
// console.log(rowHeader)
37+
// console.log(`rowData`)
38+
// console.log(rowData)
3939

4040
const renderHeader = rowHeader.map( (col,idx) => {
4141
return <TableCell key={`head_+${idx}`}>{col}</TableCell>

‎src/components/HTMLComponentPanel.jsx

Lines changed: 38 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,8 @@ class HTMLComponentPanel extends Component {
2626
});
2727
};
2828

29-
handleCreateComponent = componentType => {
30-
let compNameAndType = this.state.componentName + componentType;
31-
addChild(compNameAndType);
29+
handleCreateHTMLChild = type => {
30+
this.props.addChild({ title: type, childType: type, HTMLInfo: {} });
3231
};
3332

3433
render() {
@@ -57,37 +56,64 @@ class HTMLComponentPanel extends Component {
5756
<IconButton
5857
aria-label="Image"
5958
onClick={() => {
60-
console.log(addChild);
61-
// addChild({ title: "ImageX" });
62-
// has to be the title of the focus component
63-
// need to add another parameter for the type of the
59+
this.handleCreateHTMLChild("Image");
6460
}}
61+
62+
// onClick={() => {
63+
// console.log(addChild);
64+
// addChild({ title: "Image", childType: "Image" });
65+
// }}
6566
>
6667
<ImageIcon />
6768
</IconButton>
6869
</Grid>
6970
<Grid item xs={4}>
70-
<IconButton aria-label="Form">
71+
<IconButton
72+
aria-label="Form"
73+
onClick={() => {
74+
this.handleCreateHTMLChild("Form");
75+
}}
76+
>
7177
<FormIcon />
7278
</IconButton>
7379
</Grid>
7480
<Grid item xs={4}>
75-
<IconButton aria-label="Button">
81+
<IconButton
82+
aria-label="Button"
83+
onClick={() => {
84+
this.handleCreateHTMLChild("Button");
85+
}}
86+
>
7687
<ButtonIcon />
7788
</IconButton>
7889
</Grid>
7990
<Grid item xs={4}>
80-
<IconButton aria-label="Link">
91+
<IconButton
92+
aria-label="Link"
93+
onClick={() => {
94+
this.handleCreateHTMLChild("Link");
95+
}}
96+
>
8197
<LinkIcon />
8298
</IconButton>
8399
</Grid>
84100
<Grid item xs={4}>
85-
<IconButton aria-label="List">
101+
<IconButton
102+
aria-label="List"
103+
onClick={() => {
104+
this.handleCreateHTMLChild("List");
105+
}}
106+
>
86107
<ListIcon />
87108
</IconButton>
88109
</Grid>
89110
<Grid item xs={4}>
90-
<IconButton aria-label="List">
111+
<IconButton
112+
aria-label="Paragraph"
113+
onClick={() => {
114+
this.handleCreateHTMLChild("Paragraph");
115+
}}
116+
>
91117
<ParagraphIcon />
92118
</IconButton>
93119
</Grid>

‎src/components/KonvaStage.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,7 @@ class KonvaStage extends Component {
151151
.find(comp => comp.id === focusComponent.id)
152152
.childrenArray.map((child, i) => (
153153
<Rectangle
154+
childType={child.childType}
154155
key={`${i}${child.componentName}`}
155156
components={components}
156157
componentId={focusComponent.id}

‎src/components/LeftColExpansionPanel.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const LeftColExpansionPanel = props => {
5656
<AddIcon
5757
style={{ color, float: "right" }}
5858
onClick={() => {
59-
addChild({ title });
59+
addChild({ title, childType: "COMP" });
6060
}}
6161
/>
6262
</IconButton>

‎src/components/Rectangle.jsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,8 @@ class Rectangle extends Component {
7777
focusChild,
7878
components,
7979
draggable,
80-
blockSnapSize
80+
blockSnapSize,
81+
childType
8182
} = this.props;
8283

8384
// the Group is responsible for dragging of all children
@@ -108,7 +109,11 @@ class Rectangle extends Component {
108109
scaleY={1}
109110
width={width}
110111
height={height}
111-
stroke={this.getComponentColor(childComponentId)}
112+
stroke={
113+
childType === "COMP"
114+
? this.getComponentColor(childComponentId)
115+
: "#000000"
116+
}
112117
// fill={color}
113118
// opacity={0.8}
114119
onTransformEnd={event =>
@@ -131,7 +136,7 @@ class Rectangle extends Component {
131136
fill={
132137
childId === "-1"
133138
? this.getComponentColor(childComponentId)
134-
: "black"
139+
: "#000000"
135140
}
136141
fontSize={childId === "-1" ? 15 : 10}
137142
x={4}
@@ -140,6 +145,7 @@ class Rectangle extends Component {
140145
</Label>
141146
{// for all children other than the pseudoChild, find their component's children array and recursively render the children found there
142147
childId !== "-1" &&
148+
childType == "COMP" &&
143149
components
144150
.find(comp => comp.title === childComponentName)
145151
.childrenArray.filter(child => child.childId !== "-1")

‎src/containers/LeftContainer.jsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,8 @@ const mapDispatchToProps = dispatch => ({
7878
// moveToTop: componentId => dispatch(actions.moveToTop(componentId)),
7979
// openExpansionPanel: component => dispatch(actions.openExpansionPanel(component)),
8080
// deleteAllData: () => dispatch(actions.deleteAllData()),
81-
addChild: ({ title }) => dispatch(actions.addChild({ title })),
81+
addChild: ({ title, childType, HTMLInfo }) =>
82+
dispatch(actions.addChild({ title, childType, HTMLInfo })),
8283
changeFocusComponent: ({ title }) =>
8384
dispatch(actions.changeFocusComponent({ title })),
8485
changeFocusChild: ({ title, childId }) =>
@@ -127,7 +128,7 @@ class LeftContainer extends Component {
127128
key={component.id}
128129
index={i}
129130
id={component.id}
130-
updateComponent={updateComponent}
131+
// updateComponent={updateComponent}
131132
component={component}
132133
focusComponent={focusComponent}
133134
addChild={addChild}

0 commit comments

Comments
 (0)