Skip to content
Snippets Groups Projects
Commit 8cac2ebc authored by Samuel Jugnet's avatar Samuel Jugnet
Browse files

save shape state after transform and drag

parent 70cc5fb1
No related branches found
No related tags found
1 merge request!10Draft: MigratingAnnotationCreation to MUI5.
Pipeline #1780 failed
Stage: test
Show whitespace changes
Inline Side-by-side
src/AnnotationDrawing.js
+ 53
− 1
View file @ 8cac2ebc
...@@ -115,6 +115,38 @@ function AnnotationDrawing(props) { ...@@ -115,6 +115,38 @@ function AnnotationDrawing(props) {
props.setShapeProperties(shape); props.setShapeProperties(shape);
}; };
const onTransformEnd = (evt) => {
const modifiedshape= evt.currentTarget.attrs;
const shape=shapes.find((s) => s.id === modifiedshape.id);
shape.x = modifiedshape.x;
shape.y = modifiedshape.y;
shape.width = modifiedshape.width;
shape.height = modifiedshape.height;
shape.rotation = modifiedshape.rotation;
shape.scaleX = modifiedshape.scaleX;
shape.scaleY = modifiedshape.scaleY;
setCurrentShape({...shape});
updateCurrentShapeInShapes();
}
const handleDragEnd = (evt) => {
const modifiedshape= evt.currentTarget.attrs;
const shape=shapes.find((s) => s.id === modifiedshape.id);
shape.x = modifiedshape.x;
shape.y = modifiedshape.y;
setCurrentShape({...shape});
updateCurrentShapeInShapes();
}
/** */ /** */
const handleKeyPress = (e) => { const handleKeyPress = (e) => {
e.stopPropagation(); e.stopPropagation();
...@@ -202,6 +234,11 @@ function AnnotationDrawing(props) { ...@@ -202,6 +234,11 @@ function AnnotationDrawing(props) {
height: 1, height: 1,
x: pos.x, x: pos.x,
y: pos.y, y: pos.y,
scaleX: 1,
scaleY: 1,
rotation: 0,
} }
setIsDrawing(true); setIsDrawing(true);
...@@ -221,6 +258,10 @@ function AnnotationDrawing(props) { ...@@ -221,6 +258,10 @@ function AnnotationDrawing(props) {
type: 'text', type: 'text',
x: pos.x, x: pos.x,
y: pos.y, y: pos.y,
scaleX: 1,
scaleY: 1,
rotation: 0,
}; };
...@@ -254,6 +295,9 @@ function AnnotationDrawing(props) { ...@@ -254,6 +295,9 @@ function AnnotationDrawing(props) {
x: 0, x: 0,
y: 0, y: 0,
scaleX: 1,
scaleY: 1,
rotation: 0,
}; };
...@@ -278,6 +322,9 @@ function AnnotationDrawing(props) { ...@@ -278,6 +322,9 @@ function AnnotationDrawing(props) {
x: 0, x: 0,
y: 0, y: 0,
scaleX: 1,
scaleY: 1,
rotation: 0,
}; };
// shape = { // shape = {
// fill: props.fillColor, // fill: props.fillColor,
...@@ -309,7 +356,10 @@ function AnnotationDrawing(props) { ...@@ -309,7 +356,10 @@ function AnnotationDrawing(props) {
pointerWidth: 20, pointerWidth: 20,
id: uuidv4(), id: uuidv4(),
points: [pos.x, pos.y, pos.x, pos.y], points: [pos.x, pos.y, pos.x, pos.y],
type: 'arrow' type: 'arrow',
scaleX: 1,
scaleY: 1,
rotation: 0,
}; };
...@@ -506,6 +556,8 @@ function AnnotationDrawing(props) { ...@@ -506,6 +556,8 @@ function AnnotationDrawing(props) {
scale={props.scale} scale={props.scale}
width={props.originalWidth} width={props.originalWidth}
height={props.originalHeight} height={props.originalHeight}
onTransformEnd={onTransformEnd}
handleDragEnd={handleDragEnd}
/> />
......
src/shapes/ArrowNode.js
+ 11
− 2
View file @ 8cac2ebc
...@@ -10,7 +10,7 @@ import { Shape } from 'paper/dist/paper-core'; ...@@ -10,7 +10,7 @@ import { Shape } from 'paper/dist/paper-core';
function ArrowNode({ function ArrowNode({
onShapeClick, shape, activeTool, isSelected, x, y, width, height, fill, stroke, strokeWidth, onShapeClick, shape, activeTool, isSelected, x, y, width, height, fill, stroke, strokeWidth,
pointerLength, pointerWidth, pointerLength, pointerWidth,
points, points,onTransformEnd, handleDragEnd
}) { }) {
...@@ -28,6 +28,9 @@ function ArrowNode({ ...@@ -28,6 +28,9 @@ function ArrowNode({
onShapeClick(shape); onShapeClick(shape);
}; };
const ondragend = (e) => {
handleDragEnd(e);
}
return ( return (
<> <>
...@@ -35,6 +38,11 @@ function ArrowNode({ ...@@ -35,6 +38,11 @@ function ArrowNode({
ref={shapeRef} ref={shapeRef}
fill={shape.stroke} fill={shape.stroke}
scaleX={shape.scaleX}
scaleY={shape.scaleY}
rotation={shape.rotation}
x={shape.x}
y={shape.y}
stroke={shape.stroke} stroke={shape.stroke}
points={shape.points} points={shape.points}
...@@ -44,7 +52,8 @@ function ArrowNode({ ...@@ -44,7 +52,8 @@ function ArrowNode({
onClick={handleClick} onClick={handleClick}
pointerLength={shape.pointerLength} pointerLength={shape.pointerLength}
pointerWidth={shape.pointerWidth} pointerWidth={shape.pointerWidth}
onTransformEnd={onTransformEnd}
onDragEnd={ondragend}
/> />
<Transformer <Transformer
......
src/shapes/EllipseNode.js
+ 8
− 4
View file @ 8cac2ebc
...@@ -5,6 +5,7 @@ import { Ellipse, Transformer } from 'react-konva'; ...@@ -5,6 +5,7 @@ import { Ellipse, Transformer } from 'react-konva';
function EllipseNode({ function EllipseNode({
onShapeClick, shape, activeTool, isSelected, x, y, width, height, fill, stroke, strokeWidth, onShapeClick, shape, activeTool, isSelected, x, y, width, height, fill, stroke, strokeWidth,
onTransformEnd, handleDragEnd
}) { }) {
const shapeRef = useRef(); const shapeRef = useRef();
const trRef = useRef(); const trRef = useRef();
...@@ -24,16 +25,19 @@ function EllipseNode({ ...@@ -24,16 +25,19 @@ function EllipseNode({
<> <>
<Ellipse <Ellipse
ref={shapeRef} ref={shapeRef}
x={x || 100} scaleX={shape.scaleX}
y={y || 100} scaleY={shape.scaleY}
width={width || 100} rotation={shape.rotation}
height={height || 100} x={shape.x}
y={shape.y}
fill={fill || 'red'} fill={fill || 'red'}
stroke={stroke || 'black'} stroke={stroke || 'black'}
strokeWidth={strokeWidth || 1} strokeWidth={strokeWidth || 1}
id={shape.id} id={shape.id}
draggable={activeTool === 'cursor' || activeTool === 'edit'} draggable={activeTool === 'cursor' || activeTool === 'edit'}
onClick={handleClick} onClick={handleClick}
onTransformEnd={onTransformEnd}
/> />
<Transformer <Transformer
......
src/shapes/Freehand.js
+ 9
− 1
View file @ 8cac2ebc
...@@ -7,7 +7,7 @@ import { ...@@ -7,7 +7,7 @@ import {
/** FreeHand shape displaying */ /** FreeHand shape displaying */
function Freehand({ function Freehand({
activeTool, fill, height, onShapeClick, points, isSelected, shape, stroke, strokeWidth, width, x, y, activeTool, fill, height, onShapeClick, points, isSelected, shape, stroke, strokeWidth, width, x, y,onTransformEnd, handleDragEnd
}) { }) {
// TODO check if selectedShapeId is needed // TODO check if selectedShapeId is needed
const shapeRef = useRef(); const shapeRef = useRef();
...@@ -37,6 +37,14 @@ function Freehand({ ...@@ -37,6 +37,14 @@ function Freehand({
// x={ 0} // x={ 0}
// y={ 0} // y={ 0}
onClick={handleClick} onClick={handleClick}
onTransformEnd={onTransformEnd}
scaleX={shape.scaleX}
scaleY={shape.scaleY}
rotation={shape.rotation}
x={shape.x}
y={shape.y}
onDragEnd={ handleDragEnd}
> >
{shape.lines.map((line, i) => ( {shape.lines.map((line, i) => (
......
src/shapes/ParentComponent.js
+ 8
− 2
View file @ 8cac2ebc
...@@ -15,7 +15,7 @@ import Freehand from './Freehand'; ...@@ -15,7 +15,7 @@ import Freehand from './Freehand';
function ParentComponent({ function ParentComponent({
shapes, onShapeClick, selectedShapeId, activeTool, shapes, onShapeClick, selectedShapeId, activeTool,
scale, width, height, scale, width, height,onTransformEnd,handleDragEnd
}) { }) {
// TODO Simplify these state // TODO Simplify these state
const [selectedShape, setSelectedShape] = useState(null); const [selectedShape, setSelectedShape] = useState(null);
...@@ -58,6 +58,7 @@ function ParentComponent({ ...@@ -58,6 +58,7 @@ function ParentComponent({
<Rectangle <Rectangle
{...{ {...{
...shape, activeTool, isSelected, onShapeClick: handleShapeClick, shape, ...shape, activeTool, isSelected, onShapeClick: handleShapeClick, shape,
onTransformEnd,handleDragEnd
}} }}
key={i} key={i}
/> />
...@@ -67,6 +68,7 @@ function ParentComponent({ ...@@ -67,6 +68,7 @@ function ParentComponent({
<TextNode <TextNode
{...{ {...{
...shape, activeTool, isSelected, onShapeClick: handleShapeClick, shape, ...shape, activeTool, isSelected, onShapeClick: handleShapeClick, shape,
onTransformEnd,handleDragEnd
}} }}
key={i} key={i}
/> />
...@@ -76,6 +78,7 @@ function ParentComponent({ ...@@ -76,6 +78,7 @@ function ParentComponent({
<EllipseNode <EllipseNode
{...{ {...{
...shape, activeTool, isSelected, onShapeClick: handleShapeClick, shape, ...shape, activeTool, isSelected, onShapeClick: handleShapeClick, shape,
onTransformEnd,handleDragEnd
}} }}
key={i} key={i}
/> />
...@@ -85,6 +88,7 @@ function ParentComponent({ ...@@ -85,6 +88,7 @@ function ParentComponent({
<Freehand <Freehand
{...{ {...{
...shape, activeTool, isSelected, onShapeClick: handleShapeClick, shape, ...shape, activeTool, isSelected, onShapeClick: handleShapeClick, shape,
onTransformEnd,handleDragEnd
}} }}
key={i} key={i}
/> />
...@@ -94,6 +98,7 @@ function ParentComponent({ ...@@ -94,6 +98,7 @@ function ParentComponent({
<Polygon <Polygon
{...{ {...{
...shape, activeTool, isSelected, onShapeClick: handleShapeClick, shape, ...shape, activeTool, isSelected, onShapeClick: handleShapeClick, shape,
onTransformEnd,handleDragEnd
}} }}
key={i} key={i}
/> />
...@@ -107,7 +112,8 @@ function ParentComponent({ ...@@ -107,7 +112,8 @@ function ParentComponent({
activeTool, activeTool,
isSelected, isSelected,
onShapeClick: handleShapeClick, onShapeClick: handleShapeClick,
shape shape,
onTransformEnd,handleDragEnd
}} }}
key={i} key={i}
......
src/shapes/Polygon.js
+ 9
− 0
View file @ 8cac2ebc
...@@ -5,6 +5,7 @@ import {Transformer, Shape, Line} from 'react-konva'; ...@@ -5,6 +5,7 @@ import {Transformer, Shape, Line} from 'react-konva';
/** FreeHand shape displaying */ /** FreeHand shape displaying */
function Polygon({ function Polygon({
activeTool, fill, height, onShapeClick, points, isSelected, shape, stroke, strokeWidth, width, x, y, activeTool, fill, height, onShapeClick, points, isSelected, shape, stroke, strokeWidth, width, x, y,
onTransformEnd, handleDragEnd
}) { }) {
// TODO check if selectedShapeId is needed // TODO check if selectedShapeId is needed
const shapeRef = useRef(); const shapeRef = useRef();
...@@ -41,6 +42,14 @@ function Polygon({ ...@@ -41,6 +42,14 @@ function Polygon({
fill={fill || 'red'} fill={fill || 'red'}
draggable={activeTool === 'cursor' || activeTool === 'edit'} draggable={activeTool === 'cursor' || activeTool === 'edit'}
globalCompositeOperation="source-over" globalCompositeOperation="source-over"
onTransformEnd={onTransformEnd}
scaleX={shape.scaleX}
scaleY={shape.scaleY}
rotation={shape.rotation}
x={shape.x}
y={shape.y}
onDragEnd={ handleDragEnd}
/> />
<Transformer <Transformer
......
src/shapes/Rectangle.js
+ 6
− 0
View file @ 8cac2ebc
...@@ -4,6 +4,7 @@ import { Rect, Transformer } from 'react-konva'; ...@@ -4,6 +4,7 @@ import { Rect, Transformer } from 'react-konva';
function Rectangle({ function Rectangle({
shape, onShapeClick, activeTool, x, y, width, height, fill, stroke, strokeWidth, isSelected, shape, onShapeClick, activeTool, x, y, width, height, fill, stroke, strokeWidth, isSelected,
onTransformEnd, handleDragEnd
}) { }) {
const shapeRef = useRef(); const shapeRef = useRef();
const trRef = useRef(); const trRef = useRef();
...@@ -25,6 +26,9 @@ function Rectangle({ ...@@ -25,6 +26,9 @@ function Rectangle({
ref={shapeRef} ref={shapeRef}
x={x || 100} x={x || 100}
y={y || 100} y={y || 100}
scaleX={shape.scaleX}
scaleY={shape.scaleY}
rotation={shape.rotation}
width={width || 100} width={width || 100}
height={height || 100} height={height || 100}
fill={fill || 'red'} fill={fill || 'red'}
...@@ -33,6 +37,8 @@ function Rectangle({ ...@@ -33,6 +37,8 @@ function Rectangle({
id={shape.id} id={shape.id}
draggable={activeTool === 'cursor' || activeTool === 'edit'} draggable={activeTool === 'cursor' || activeTool === 'edit'}
onClick={handleClick} onClick={handleClick}
onTransformEnd={onTransformEnd}
onDragEnd={ handleDragEnd}
/> />
<Transformer <Transformer
......
src/shapes/TextNode.js
+ 9
− 2
View file @ 8cac2ebc
...@@ -4,6 +4,7 @@ import { Text, Transformer } from 'react-konva'; ...@@ -4,6 +4,7 @@ import { Text, Transformer } from 'react-konva';
function TextNode({ function TextNode({
shape, selectedShapeId, x, y, fontSize, fill, text, onShapeClick, activeTool, isSelected, shape, selectedShapeId, x, y, fontSize, fill, text, onShapeClick, activeTool, isSelected,
onTransformEnd, handleDragEnd
}) { }) {
const shapeRef = useRef(); const shapeRef = useRef();
const trRef = useRef(); const trRef = useRef();
...@@ -25,8 +26,12 @@ function TextNode({ ...@@ -25,8 +26,12 @@ function TextNode({
<> <>
<Text <Text
ref={shapeRef} ref={shapeRef}
x={x} scaleX={shape.scaleX}
y={y} scaleY={shape.scaleY}
rotation={shape.rotation}
x={shape.x}
y={shape.y}
fontSize={fontSize} fontSize={fontSize}
fill={fill} fill={fill}
...@@ -34,6 +39,8 @@ function TextNode({ ...@@ -34,6 +39,8 @@ function TextNode({
id={shape.id} id={shape.id}
draggable={activeTool === 'cursor' || activeTool === 'edit'} draggable={activeTool === 'cursor' || activeTool === 'edit'}
onClick={handleClick} onClick={handleClick}
onTransformEnd={onTransformEnd}
onDragEnd={ handleDragEnd}
/> />
<Transformer <Transformer
ref={trRef} ref={trRef}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment