Skip to content

Commit d2446e1

Browse files
ChristianEdwardPadillaChristianEdwardPadilla
committed
added local state to KonvaStage to keep track of size of inner column, scroll bars no longer show up
1 parent f4d0b9f commit d2446e1

File tree

2 files changed

+82
-56
lines changed

2 files changed

+82
-56
lines changed

‎src/components/KonvaStage.jsx

Lines changed: 72 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,41 @@ import TransformerComponent from './TransformerComponent.jsx';
77
import Rectangle from './Rectangle.jsx';
88

99
class KonvaStage extends Component {
10-
state = {
11-
x: undefined,
12-
y: undefined,
13-
};
14-
1510
constructor(props) {
1611
super(props);
12+
this.state = {
13+
x: undefined,
14+
y: undefined,
15+
stageWidth: 1000,
16+
stageHeight: 1000,
17+
};
1718
this.main = createRef();
1819
this.group = createRef();
1920
}
2021

22+
componentDidMount() {
23+
this.checkSize();
24+
// here we should add listener for "container" resize
25+
// take a look here https://developers.google.com/web/updates/2016/10/resizeobserver
26+
// for simplicity I will just listen window resize
27+
window.addEventListener('resize', this.checkSize);
28+
}
29+
30+
componentWillUnmount() {
31+
window.removeEventListener('resize', this.checkSize);
32+
}
33+
34+
checkSize = () => {
35+
const width = this.container.offsetWidth;
36+
const height = this.container.offsetHeight;
37+
console.log('setting width: ', this.state.stageWidth, width);
38+
console.log('setting height: ', this.state.heightWidth, height);
39+
this.setState({
40+
stageWidth: width,
41+
stageHeight: height,
42+
});
43+
};
44+
2145
handleStageMouseDown = (e) => {
2246
// // clicked on stage - clear selection
2347
if (e.target === e.target.getStage()) {
@@ -37,10 +61,6 @@ class KonvaStage extends Component {
3761
this.props.changeFocusChild({ childId: rectChildId });
3862
};
3963

40-
componentDidMount() {
41-
// this.props.setImage();
42-
}
43-
4464
render() {
4565
const {
4666
components,
@@ -56,39 +76,50 @@ class KonvaStage extends Component {
5676
const { selectedShapeName } = this.state;
5777

5878
return (
59-
<Stage
60-
// ref={(node) => {
61-
// this.stage = node;
62-
// }}
63-
onMouseDown={this.handleStageMouseDown}
64-
width={window.innerWidth / 2}
65-
height={window.innerHeight}
79+
<div
80+
style={{
81+
width: '100%',
82+
height: '100%',
83+
// border: '1px solid grey',
84+
}}
85+
ref={(node) => {
86+
this.container = node;
87+
}}
6688
>
67-
<Layer>
68-
{components
69-
.find(comp => comp.title === focusComponent.title)
70-
.childrenArray.map((child, i) => (
71-
<Rectangle
72-
key={`${i}${child.componentName}`}
73-
components={components}
74-
componentId={focusComponent.id}
75-
componentName={child.componentName}
76-
focusChild={focusChild}
77-
childId={child.childId}
78-
x={child.position.x}
79-
y={child.position.y}
80-
scaleX={1}
81-
scaleY={1}
82-
width={child.position.width}
83-
height={child.position.height}
84-
title={child.componentName + child.childId}
85-
color={child.color}
86-
handleTransform={handleTransform}
87-
draggable={true}
88-
/>
89-
))}
90-
</Layer>
91-
</Stage>
89+
<Stage
90+
ref={(node) => {
91+
this.stage = node;
92+
}}
93+
onMouseDown={this.handleStageMouseDown}
94+
width={this.state.stageWidth}
95+
height={this.state.stageHeight - 10}
96+
>
97+
<Layer>
98+
{components
99+
.find(comp => comp.title === focusComponent.title)
100+
.childrenArray.map((child, i) => (
101+
<Rectangle
102+
key={`${i}${child.componentName}`}
103+
components={components}
104+
componentId={focusComponent.id}
105+
componentName={child.componentName}
106+
focusChild={focusChild}
107+
childId={child.childId}
108+
x={child.position.x}
109+
y={child.position.y}
110+
scaleX={1}
111+
scaleY={1}
112+
width={child.position.width}
113+
height={child.position.height}
114+
title={child.componentName + child.childId}
115+
color={child.color}
116+
handleTransform={handleTransform}
117+
draggable={true}
118+
/>
119+
))}
120+
</Layer>
121+
</Stage>
122+
</div>
92123
);
93124
}
94125
}

‎src/public/styles/style.css

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
box-sizing: inherit;
55
}
66

7-
87
html {
98
box-sizing: border-box;
109
overflow: hidden;
@@ -13,7 +12,7 @@ html {
1312
body {
1413
margin: 0;
1514
padding: 0;
16-
font-family: "Open sans", sans-serif;
15+
font-family: 'Open sans', sans-serif;
1716
font-weight: 400;
1817
}
1918

@@ -50,12 +49,10 @@ header {
5049
background-color: #252526;
5150
}
5251

53-
5452
/* .column-right-export-btn {
5553
transition: display 400ms ease-in-out 300ms;
5654
} */
5755

58-
5956
/*
6057
///////////////////////////////////////////
6158
BUTTONS
@@ -74,7 +71,7 @@ LEFT COLUMN
7471

7572
.left {
7673
padding: 20px;
77-
width: 22%;
74+
width: 20%;
7875
display: flex;
7976
flex-direction: column;
8077
}
@@ -117,15 +114,14 @@ h1 {
117114

118115
.main-header {
119116
display: flex;
120-
/* border-left: 1px solid grey; */
121-
/* border-right: 1px solid grey; */
122-
/* border-bottom: 1px solid grey; */
117+
/* border-left: 1px solid grey;
118+
border-right: 1px solid grey;
119+
border-bottom: 1px solid grey; */
123120
background-color: #212121;
124-
box-shadow: 0 5px 7px -2px rgba(0,0,0, 0.4);
121+
box-shadow: 0 5px 7px -2px rgba(0, 0, 0, 0.4);
125122
z-index: 10;
126123
}
127124

128-
129125
.main-header-buttons {
130126
display: flex;
131127
font-size: 12px;
@@ -144,7 +140,6 @@ h1 {
144140
align-items: center; */
145141
}
146142

147-
148143
.draggable {
149144
position: relative;
150145
}
@@ -201,7 +196,7 @@ RIGHT COLUMN
201196
.column-right {
202197
transition: width 250ms ease-in-out;
203198
height: 100%;
204-
display: flex;
199+
display: flex;
205200
flex-direction: column;
206201
background-color: #303030;
207202
}
@@ -235,11 +230,11 @@ div.rst__rowContents {
235230

236231
.rst__rowContentsDragDisabled {
237232
background-color: #333333;
238-
background-color: rgba(37, 37, 38, .4);
233+
background-color: rgba(37, 37, 38, 0.4);
239234
}
240235

241-
242-
.rst__moveHandle, .rst__loadingHandle {
236+
.rst__moveHandle,
237+
.rst__loadingHandle {
243238
width: 40px;
244239
}
245240

0 commit comments

Comments
 (0)