Skip to content

Commit a062161

Browse files
tolgamizrakcitolgamizrakci
committed
pulling latest
1 parent 2d70dfa commit a062161

File tree

3 files changed

+81
-66
lines changed

3 files changed

+81
-66
lines changed

‎src/components/GrandchildRectangle.jsx

Lines changed: 48 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
1-
import React, { Component } from 'react';
2-
import { Rect, Group } from 'react-konva';
1+
import React, { Component } from "react";
2+
import { Rect, Group } from "react-konva";
33

44
class GrandchildRectangle extends Component {
55
getComponentColor(componentId) {
6-
const color = this.props.components.find(comp => comp.id == componentId).color;
6+
const color = this.props.components.find(comp => comp.id == componentId)
7+
.color;
78
return color;
89
}
910

1011
getPseudoChild() {
11-
return this.props.components.find(comp => comp.id === this.props.childComponentId);
12+
return this.props.components.find(
13+
comp => comp.id === this.props.childComponentId
14+
);
1215
}
1316

1417
render() {
@@ -25,6 +28,7 @@ class GrandchildRectangle extends Component {
2528
height,
2629
focusChild,
2730
components,
31+
childType
2832
} = this.props;
2933

3034
// the Group is responsible for dragging of all children
@@ -49,41 +53,52 @@ class GrandchildRectangle extends Component {
4953
scaleY={1}
5054
width={width}
5155
height={height}
52-
stroke={this.getComponentColor(childComponentId)}
56+
stroke={
57+
childType === "COMP"
58+
? this.getComponentColor(childComponentId)
59+
: "#000000"
60+
}
5361
// fill={color}
5462
// opacity={0.8}
5563
strokeWidth={4}
5664
strokeScaleEnabled={false}
5765
draggable={false}
5866
/>
59-
{components
60-
.find(comp => comp.title === childComponentName)
61-
.childrenArray.filter(child => child.childId !== '-1')
62-
.map((grandchild, i) => (
63-
<GrandchildRectangle
64-
key={i}
65-
components={components}
66-
componentId={componentId}
67-
childComponentName={grandchild.componentName}
68-
childComponentId={grandchild.childComponentId}
69-
focusChild={focusChild}
70-
childId={childId}
71-
// x={grandchild.position.x * (width / window.innerWidth)}
72-
// y={grandchild.position.y * (height / window.innerHeight)}
73-
// width={grandchild.position.width * (width / window.innerWidth)}
74-
// height={grandchild.position.height * (height / window.innerHeight)}
75-
width={grandchild.position.width * (width / this.getPseudoChild().position.width)}
76-
height={grandchild.position.height * (height / this.getPseudoChild().position.height)}
77-
x={
78-
(grandchild.position.x - this.getPseudoChild().position.x)
79-
* (width / this.getPseudoChild().position.width)
80-
}
81-
y={
82-
(grandchild.position.y - this.getPseudoChild().position.y)
83-
* (height / this.getPseudoChild().position.height)
84-
}
85-
/>
86-
))}
67+
{childType === "COMP" &&
68+
components
69+
.find(comp => comp.title === childComponentName)
70+
.childrenArray.filter(child => child.childId !== "-1")
71+
.map((grandchild, i) => (
72+
<GrandchildRectangle
73+
key={i}
74+
components={components}
75+
componentId={componentId}
76+
childComponentName={grandchild.componentName}
77+
childComponentId={grandchild.childComponentId}
78+
focusChild={focusChild}
79+
childId={childId}
80+
// x={grandchild.position.x * (width / window.innerWidth)}
81+
// y={grandchild.position.y * (height / window.innerHeight)}
82+
// width={grandchild.position.width * (width / window.innerWidth)}
83+
// height={grandchild.position.height * (height / window.innerHeight)}
84+
width={
85+
grandchild.position.width *
86+
(width / this.getPseudoChild().position.width)
87+
}
88+
height={
89+
grandchild.position.height *
90+
(height / this.getPseudoChild().position.height)
91+
}
92+
x={
93+
(grandchild.position.x - this.getPseudoChild().position.x) *
94+
(width / this.getPseudoChild().position.width)
95+
}
96+
y={
97+
(grandchild.position.y - this.getPseudoChild().position.y) *
98+
(height / this.getPseudoChild().position.height)
99+
}
100+
/>
101+
))}
87102
</Group>
88103
);
89104
}

‎src/components/Rectangle.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,7 @@ class Rectangle extends Component {
162162
childId={childId} // scary addition, grandchildren rects default to childId of "direct" children
163163
// x={this.getPseudoChild().position.x}
164164
// y={}
165+
childType={grandchild.childType}
165166
width={
166167
grandchild.position.width *
167168
(width / this.getPseudoChild().position.width)

‎src/utils/htmlElements.util.js

Lines changed: 32 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,57 @@
1-
2-
// our "database" of HTML elements that the user can chose from
1+
// our "database" of HTML elements that the user can chose from
32
const HTMLelements = {
43
Image: {
5-
width: 300,
6-
height: 300,
7-
attributes:['ClassName','id','Text','Src']
8-
} ,
4+
width: 100,
5+
height: 100,
6+
attributes: ["ClassName", "id", "Text", "Src"]
7+
},
98
Button: {
109
width: 75,
1110
height: 28,
12-
attribute:['ClassName','id','Text']
11+
attribute: ["ClassName", "id", "Text"]
1312
},
1413
Form: {
15-
width: 400,
16-
height: 400,
17-
attribute:['ClassName','id','Text']
14+
width: 150,
15+
height: 150,
16+
attribute: ["ClassName", "id", "Text"]
1817
},
1918
Paragraph: {
2019
width: 250,
2120
height: 75,
22-
attribute:['ClassName','id','Text']
21+
attribute: ["ClassName", "id", "Text"]
2322
},
2423
List: {
25-
width: 100,
26-
height: 100,
27-
attribute:['ClassName','id','Text']
24+
width: 75,
25+
height: 75,
26+
attribute: ["ClassName", "id", "Text"]
2827
},
2928
Link: {
3029
width: 50,
3130
height: 50,
32-
attribute:['ClassName','id','Text']
31+
attribute: ["ClassName", "id", "Text"]
3332
}
34-
}
33+
};
3534

3635
const attributes = {
37-
"Classname" : {type: "freeText"} ,
38-
"Id" : {type:"freeText"} ,
39-
"TextJustify": {type: "select", values: "Left,Right,Center"}
40-
}
41-
42-
43-
function getSize(htmlElement){
44-
45-
const localHTMLelements = HTMLelements;
46-
47-
if(!htmlElement in localHTMLelements) {
48-
window.alert(`htmlElement error: "${htmlElement} is not found in our database"`) ;
49-
return;
36+
Classname: { type: "freeText" },
37+
Id: { type: "freeText" },
38+
TextJustify: { type: "select", values: "Left,Right,Center" }
39+
};
40+
41+
function getSize(htmlElement) {
42+
const localHTMLelements = HTMLelements;
43+
44+
if (!htmlElement in localHTMLelements) {
45+
window.alert(
46+
`htmlElement error: "${htmlElement} is not found in our database"`
47+
);
48+
return;
5049
}
5150

5251
return {
53-
width: HTMLelements[htmlElement].width || 300 ,
54-
height: HTMLelements[htmlElement].height || 300 ,
55-
}
52+
width: HTMLelements[htmlElement].width || 300,
53+
height: HTMLelements[htmlElement].height || 300
54+
};
5655
}
5756

58-
export {HTMLelements,getSize} ;
57+
export { HTMLelements, getSize };

0 commit comments

Comments
 (0)