Skip to content

Commit f117474

Browse files
spincycle01spincycle01
committed
currently working on preventing image tiling
1 parent 649c657 commit f117474

File tree

3 files changed

+29
-94
lines changed

3 files changed

+29
-94
lines changed

‎main.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ const createWindow = () => {
6666
width,
6767
height,
6868
webPreferences: {
69-
zoomFactor: 0.8,
69+
zoomFactor: 0.9,
7070
'node-Integration': false,
7171
},
7272
show: false,

‎src/components/GrandchildRectangle.jsx‎

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,30 @@
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
// import findComponentById from '../utils/findComponentById.ts';
44

55
class GrandchildRectangle extends Component {
6+
state = {
7+
imageHeight: 0,
8+
imageWidth: 0,
9+
};
10+
611
getComponentColor(componentId) {
712
// const color = findComponentById(componentId, this.props.components).color;
8-
const color = this.props.components.find(comp => comp.id === componentId)
9-
.color;
13+
const color = this.props.components.find(comp => comp.id === componentId).color;
1014
return color;
1115
}
1216

1317
getPseudoChild() {
14-
return this.props.components.find(
15-
comp => comp.id === this.props.childComponentId
16-
);
18+
return this.props.components.find(comp => comp.id === this.props.childComponentId);
1719
}
1820

19-
setImage = imageSource => {
20-
//console.log("IMAGE SOURCE", imageSource);
21+
setImage = (imageSource) => {
22+
// console.log("IMAGE SOURCE", imageSource);
2123
if (!imageSource) return;
2224
const image = new window.Image();
2325
image.src = imageSource;
2426
if (!image.height) return null;
27+
this.setState({ imageHeight: image.height, imageWidth: image.width });
2528
return image;
2629
};
2730

@@ -40,7 +43,7 @@ class GrandchildRectangle extends Component {
4043
height,
4144
focusChild,
4245
components,
43-
imageSource
46+
imageSource,
4447
} = this.props;
4548

4649
// the Group is responsible for dragging of all children
@@ -66,20 +69,20 @@ class GrandchildRectangle extends Component {
6669
scaleY={1}
6770
width={width}
6871
height={height}
69-
stroke={
70-
childType === "COMP"
71-
? this.getComponentColor(childComponentId)
72-
: "#000000"
73-
}
72+
stroke={childType === 'COMP' ? this.getComponentColor(childComponentId) : '#000000'}
7473
fillPatternImage={imageSource ? this.setImage(imageSource) : null}
74+
fillPatternScaleX={0.1}
75+
fillPatternScaleY={0.1}
7576
// fill={color}
7677
// opacity={0.8}
77-
strokeWidth={4}
78+
strokeWidth={10}
7879
strokeScaleEnabled={false}
7980
draggable={false}
81+
// centerScaling={true}
82+
// enabledAnchors={['top-left', 'top-right', 'bottom-left', 'bottom-right']}
8083
/>
81-
{childType === "COMP" &&
82-
components
84+
{childType === 'COMP'
85+
&& components
8386
.find(comp => comp.title === childComponentName)
8487
.childrenArray.filter(child => child.childId !== -1)
8588
.map((grandchild, i) => (
@@ -89,7 +92,7 @@ class GrandchildRectangle extends Component {
8992
componentId={componentId}
9093
childType={grandchild.childType}
9194
imageSource={
92-
grandchild.htmlElement == "Image" && grandchild.HTMLInfo.Src
95+
grandchild.htmlElement == 'Image' && grandchild.HTMLInfo.Src
9396
? grandchild.HTMLInfo.Src
9497
: null
9598
}
@@ -103,21 +106,17 @@ class GrandchildRectangle extends Component {
103106
// : null
104107
// }
105108
// test test
106-
width={
107-
grandchild.position.width *
108-
(width / this.getPseudoChild().position.width)
109-
}
109+
width={grandchild.position.width * (width / this.getPseudoChild().position.width)}
110110
height={
111-
grandchild.position.height *
112-
(height / this.getPseudoChild().position.height)
111+
grandchild.position.height * (height / this.getPseudoChild().position.height)
113112
}
114113
x={
115-
(grandchild.position.x - this.getPseudoChild().position.x) *
116-
(width / this.getPseudoChild().position.width)
114+
(grandchild.position.x - this.getPseudoChild().position.x)
115+
* (width / this.getPseudoChild().position.width)
117116
}
118117
y={
119-
(grandchild.position.y - this.getPseudoChild().position.y) *
120-
(height / this.getPseudoChild().position.height)
118+
(grandchild.position.y - this.getPseudoChild().position.y)
119+
* (height / this.getPseudoChild().position.height)
121120
}
122121
/>
123122
))}

‎src/containers/MainContainer.tsx‎

Lines changed: 0 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -70,70 +70,6 @@ class MainContainer extends Component {
7070

7171
constructor(props) {
7272
super(props);
73-
74-
// IPC.on('new-file', (event, file) => {
75-
// const image = new window.Image();
76-
// image.src = file;
77-
// this.props.changeImagePath(file);
78-
// image.onload = () => {
79-
// this.setState({ image });
80-
// };
81-
// this.draggableItems = [];
82-
// });
83-
84-
// IPC.on('app_dir_selected', (event, path) => {
85-
// const { components } = this.props;
86-
// const { genOption } = this.state;
87-
// this.props.createApp({
88-
// path,
89-
// components,
90-
// genOption,
91-
// });
92-
// });
93-
// }
94-
95-
// closeModal = () => this.setState({ modal: null });
96-
97-
// chooseAppDir = () => IPC.send('choose_app_dir');
98-
99-
// chooseGenOptions = (genOption) => {
100-
// // set option
101-
// this.setState({ genOption });
102-
// // closeModal
103-
// this.closeModal();
104-
// // Choose app dir
105-
// this.chooseAppDir();
106-
// };
107-
108-
// showGenerateAppModal = () => {
109-
// console.log('clicked on export button');
110-
// const { closeModal, chooseGenOptions } = this;
111-
// const { genOptions } = this.state;
112-
// const children = (
113-
// <List className="export-preference">
114-
// {genOptions.map((option, i) => (
115-
// <ListItem
116-
// key={i}
117-
// button
118-
// onClick={() => chooseGenOptions(i)}
119-
// style={{
120-
// border: '1px solid #3f51b5',
121-
// marginBottom: '2%',
122-
// marginTop: '5%',
123-
// }}
124-
// >
125-
// <ListItemText primary={option} style={{ textAlign: 'center' }} />
126-
// </ListItem>
127-
// ))}
128-
// </List>
129-
// );
130-
// this.setState({
131-
// modal: createModal({
132-
// closeModal,
133-
// children,
134-
// message: 'Choose export preference:',
135-
// }),
136-
// });
13773
}
13874

13975
render() {

0 commit comments

Comments
 (0)