Skip to content
This repository was archived by the owner on May 30, 2023. It is now read-only.

Commit 34cf5f2

Browse files
ttattlttattl
authored
Merge pull request #295 from daita-technologies/develop
Merge of recent adjustments/fixes
2 parents 97eec25 + 8ecfa5e commit 34cf5f2

47 files changed

Lines changed: 907 additions & 389 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/components/Annotation/Editor/Shape/EllipseShape.tsx‎

Lines changed: 54 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
selectorSelectedEllipse,
1414
} from "reduxes/annotation/selector";
1515
import { DrawObject, DrawState, DrawType } from "reduxes/annotation/type";
16+
import { selectorCurrentImageInEditorProps } from "reduxes/annotationmanager/selector";
1617
import { CIRCLE_STYLE, CORNER_RADIUS, LINE_STYLE } from "../const";
1718
import { EllipseCompProps, EllipseProps, EllipseSpec } from "../type";
1819
import useCommonShapeEvent from "../useCommonShapeEvent";
@@ -47,7 +48,9 @@ function EllipseComp({
4748
const commonShapeEvent = useCommonShapeEvent({ drawObject: spec });
4849
const currentDrawState = useSelector(selectorCurrentDrawState);
4950
const drawObjectState = useSelector(selectorDrawObjectState(spec.id));
50-
51+
const currentImageInEditorProps = useSelector(
52+
selectorCurrentImageInEditorProps
53+
);
5154
const [strokeWidth, setStrokeWidth] = useState<number>(
5255
spec.cssStyle.strokeWidth
5356
);
@@ -75,28 +78,62 @@ function EllipseComp({
7578
trRef.current.getLayer().batchDraw();
7679
}
7780
}, [isSelected]);
78-
const [stage, setStage] = useState<Konva.Stage | null>(null);
7981

8082
const groupDragBound = (pos: Vector2d) => {
8183
let { x, y } = pos;
82-
const sw = stage ? stage.width() : 0;
83-
const sh = stage ? stage.height() : 0;
84-
if (shapeRef && shapeRef.current) {
84+
if (shapeRef && shapeRef.current && currentImageInEditorProps) {
85+
const { clientRectOfBaseImage } = currentImageInEditorProps;
8586
const box = shapeRef.current.getClientRect();
8687

87-
if (y - box.height / 2 < 0) y = box.height / 2;
88-
if (x - box.width / 2 < 0) x = box.width / 2;
89-
if (y + box.height / 2 > sh) y = sh - box.height / 2;
90-
if (x + box.width / 2 > sw) x = sw - box.width / 2;
91-
return { x, y };
88+
if (clientRectOfBaseImage) {
89+
if (x - box.width / 2 < clientRectOfBaseImage.x) {
90+
x = clientRectOfBaseImage.x + box.width / 2;
91+
}
92+
if (y - box.height / 2 < clientRectOfBaseImage.y) {
93+
y = clientRectOfBaseImage.y + box.height / 2;
94+
}
95+
if (
96+
x + box.width >
97+
clientRectOfBaseImage.x + clientRectOfBaseImage.width
98+
) {
99+
x =
100+
clientRectOfBaseImage.x +
101+
clientRectOfBaseImage.width -
102+
box.width / 2;
103+
}
104+
if (
105+
y + box.height >
106+
clientRectOfBaseImage.y + clientRectOfBaseImage.height
107+
) {
108+
y =
109+
clientRectOfBaseImage.y +
110+
clientRectOfBaseImage.height -
111+
box.height / 2;
112+
}
113+
}
92114
}
93-
return { x: 0, y: 0 };
94-
};
95115

96-
const handleDragStart = (e: KonvaEventObject<DragEvent>) => {
97-
setStage(e.target.getStage());
98-
commonShapeEvent.handleDragStart(e);
116+
return {
117+
x,
118+
y,
119+
};
99120
};
121+
// const groupDragBound = (pos: Vector2d) => {
122+
// let { x, y } = pos;
123+
// const sw = stage ? stage.width() : 0;
124+
// const sh = stage ? stage.height() : 0;
125+
// if (shapeRef && shapeRef.current) {
126+
// const box = shapeRef.current.getClientRect();
127+
128+
// if (y - box.height / 2 < 0) y = box.height / 2;
129+
// if (x - box.width / 2 < 0) x = box.width / 2;
130+
// if (y + box.height / 2 > sh) y = sh - box.height / 2;
131+
// if (x + box.width / 2 > sw) x = sw - box.width / 2;
132+
// return { x, y };
133+
// }
134+
// return { x: 0, y: 0 };
135+
// };
136+
100137
const handleTransformEnd = (e: KonvaEventObject<Event>) => {
101138
const node = shapeRef.current;
102139
if (!node) return;
@@ -150,13 +187,14 @@ function EllipseComp({
150187
onMouseOut={onMouseOut}
151188
draggable={commonShapeEvent.isLock !== true}
152189
onDragEnd={handleDragEnd}
153-
onDragStart={handleDragStart}
154190
onTransformEnd={handleTransformEnd}
155191
strokeScaleEnabled={false}
156192
{...spec}
157193
{...spec.cssStyle}
158194
strokeWidth={strokeWidth}
159195
visible={drawObjectState ? !drawObjectState.isHidden : true}
196+
onMouseEnter={commonShapeEvent.handleMouseEnter}
197+
onMouseLeave={commonShapeEvent.handleMouseLeave}
160198
/>
161199
{isSelected && commonShapeEvent.isLock !== true && (
162200
<Transformer

‎src/components/Annotation/Editor/Shape/Polygon.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -391,6 +391,8 @@ function PolygonComp({
391391
onMouseDown={mousedownHandler}
392392
onClick={commonShapeEvent.handleCick}
393393
visible={isVisible}
394+
onMouseEnter={commonShapeEvent.handleMouseEnter}
395+
onMouseLeave={commonShapeEvent.handleMouseLeave}
394396
>
395397
<Line
396398
points={flattenedPoints}

‎src/components/Annotation/Editor/Shape/Rectangle.tsx‎

Lines changed: 34 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
selectorSelectedRectangle,
1414
} from "reduxes/annotation/selector";
1515
import { DrawObject, DrawState, DrawType } from "reduxes/annotation/type";
16+
import { selectorCurrentImageInEditorProps } from "reduxes/annotationmanager/selector";
1617
import { CIRCLE_STYLE, CORNER_RADIUS, LINE_STYLE } from "../const";
1718
import { RectangleCompProps, RectangleProps, RectangleSpec } from "../type";
1819
import useCommonShapeEvent from "../useCommonShapeEvent";
@@ -46,6 +47,9 @@ function RectangleComp({
4647
const commonShapeEvent = useCommonShapeEvent({ drawObject: spec });
4748
const currentDrawState = useSelector(selectorCurrentDrawState);
4849
const drawObjectState = useSelector(selectorDrawObjectState(spec.id));
50+
const currentImageInEditorProps = useSelector(
51+
selectorCurrentImageInEditorProps
52+
);
4953

5054
const [strokeWidth, setStrokeWidth] = useState<number>(
5155
spec.cssStyle.strokeWidth
@@ -74,29 +78,38 @@ function RectangleComp({
7478
trRef.current.getLayer().batchDraw();
7579
}
7680
}, [isSelected]);
77-
const [stage, setStage] = useState<Konva.Stage | null>(null);
78-
7981
const groupDragBound = (pos: Vector2d) => {
8082
let { x, y } = pos;
81-
const sw = stage ? stage.width() : 0;
82-
const sh = stage ? stage.height() : 0;
83-
if (shapeRef && shapeRef.current) {
84-
const box = shapeRef.current.getClientRect();
85-
const minMaxX = [0, box.width];
86-
const minMaxY = [0, box.height];
87-
88-
if (minMaxY[0] + y < 0) y = -1 * minMaxY[0];
89-
if (minMaxX[0] + x < 0) x = -1 * minMaxX[0];
90-
if (minMaxY[1] + y > sh) y = sh - minMaxY[1];
91-
if (minMaxX[1] + x > sw) x = sw - minMaxX[1];
92-
return { x, y };
83+
if (shapeRef && shapeRef.current && currentImageInEditorProps) {
84+
const { clientRectOfBaseImage } = currentImageInEditorProps;
85+
if (clientRectOfBaseImage) {
86+
if (x < clientRectOfBaseImage.x) {
87+
x = clientRectOfBaseImage.x;
88+
}
89+
if (y < clientRectOfBaseImage.y) {
90+
y = clientRectOfBaseImage.y;
91+
}
92+
const box = shapeRef.current.getClientRect();
93+
if (
94+
x + box.width >
95+
clientRectOfBaseImage.x + clientRectOfBaseImage.width
96+
) {
97+
x = clientRectOfBaseImage.x + clientRectOfBaseImage.width - box.width;
98+
}
99+
if (
100+
y + box.height >
101+
clientRectOfBaseImage.y + clientRectOfBaseImage.height
102+
) {
103+
y =
104+
clientRectOfBaseImage.y + clientRectOfBaseImage.height - box.height;
105+
}
106+
}
93107
}
94-
return { x: 0, y: 0 };
95-
};
96108

97-
const handleDragStart = (e: KonvaEventObject<DragEvent>) => {
98-
setStage(e.target.getStage());
99-
commonShapeEvent.handleDragStart(e);
109+
return {
110+
x,
111+
y,
112+
};
100113
};
101114
const handleDragEnd = (e: KonvaEventObject<DragEvent>) => {
102115
onChange({
@@ -139,7 +152,6 @@ function RectangleComp({
139152
setStrokeWidth(spec.cssStyle.strokeWidth);
140153
onMouseOutHandler(e);
141154
};
142-
143155
return (
144156
<>
145157
<Rect
@@ -152,9 +164,10 @@ function RectangleComp({
152164
onMouseOut={onMouseOut}
153165
draggable={commonShapeEvent.isLock !== true}
154166
onDragEnd={handleDragEnd}
155-
onDragStart={handleDragStart}
156167
onTransformEnd={handleTransformEnd}
157168
strokeScaleEnabled={false}
169+
onMouseEnter={commonShapeEvent.handleMouseEnter}
170+
onMouseLeave={commonShapeEvent.handleMouseLeave}
158171
{...spec}
159172
{...spec.cssStyle}
160173
strokeWidth={strokeWidth}

‎src/components/Annotation/Editor/useCommonShapeEvent.ts‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,14 +73,33 @@ const useCommonShapeEvent = ({
7373
e.cancelBubble = true;
7474
}
7575
};
76-
76+
const handleMouseEnter = (e: KonvaEventObject<MouseEvent>) => {
77+
const stage = e.target?.getStage();
78+
if (stage) {
79+
const container = stage.container();
80+
if (currentDrawState === DrawState.SELECTING) {
81+
container.style.cursor = "move";
82+
} else {
83+
container.style.cursor = "default";
84+
}
85+
}
86+
};
87+
const handleMouseLeave = (e: KonvaEventObject<MouseEvent>) => {
88+
const stage = e.target?.getStage();
89+
if (stage) {
90+
const container = stage.container();
91+
container.style.cursor = "default";
92+
}
93+
};
7794
return {
7895
handleDragEnd,
7996
handleDragStart,
8097
handleCick,
8198
handleTransformStart,
8299
handleTransformEnd,
83100
handleSelect,
101+
handleMouseEnter,
102+
handleMouseLeave,
84103
isLock,
85104
};
86105
};

0 commit comments

Comments
 (0)