From f81c13ea1943f48e694c332a83e59970cc83cb10 Mon Sep 17 00:00:00 2001 From: chaitanya Date: Sat, 11 Apr 2020 15:50:11 +0530 Subject: [PATCH 1/3] box drag fix --- examples/index.tsx | 14 +++++++------- src/components/Crop.tsx | 7 +++---- src/components/MultiCrops.tsx | 2 ++ src/types.ts | 2 ++ 4 files changed, 14 insertions(+), 11 deletions(-) diff --git a/examples/index.tsx b/examples/index.tsx index 39b522e..f7918cd 100644 --- a/examples/index.tsx +++ b/examples/index.tsx @@ -7,19 +7,19 @@ import { CropperBox, CropperBoxDataMap } from '../dist'; import { CropperCursorMode } from '../src/types'; const initialBoxes = [ - { x: -178, y: -191, width: 120, height: 178, id: 'SJxb6YpuG', rotation: 0 }, - { x: -87, y: -183, width: 69, height: 234, id: 'V-iSOh80u', rotation: -46 }, - { x: -51, y: -162, width: 67, height: 269, id: '7_sRCTJdI', rotation: -116 }, - { x: -118, y: -219, width: 78, height: 331, id: 'LkZ7r33rk', rotation: -222 }, - { x: -193, y: -206, width: 71, height: 377, id: 'HDFMSvIDX', rotation: -241 }, - { x: -215, y: -180, width: 77, height: 339, id: 'v-3TX_fom', rotation: -297 }, + { x: -178, y: -191, originX: -178, originY: -191, width: 120, height: 178, id: 'SJxb6YpuG', rotation: 0 }, + { x: -87, y: -183, originX: -87, originY: -183, width: 69, height: 234, id: 'V-iSOh80u', rotation: -46 }, + { x: -51, y: -162, originX: -51, originY: -162, width: 67, height: 269, id: '7_sRCTJdI', rotation: -116 }, + { x: -118, y: -219, width: 78, originX: -118, originY: -219, height: 331, id: 'LkZ7r33rk', rotation: -222 }, + { x: -193, y: -206, width: 71, originX: -193, originY: -206, height: 377, id: 'HDFMSvIDX', rotation: -241 }, + { x: -215, y: -180, width: 77, originX: -215, originY: -180, height: 339, id: 'v-3TX_fom', rotation: -297 }, ]; const App = () => { const [images, setImages] = useState([img1, img2]); const [zoom, setZoom] = useState(1.0); const [rotation, setRotation] = useState(0); - const [cursorMode, setCursorMode] = useState('pan'); + const [cursorMode, setCursorMode] = useState('draw'); const [boxes, setBoxes] = useState(initialBoxes); const [imageMap, setImageMap] = useState({}); diff --git a/src/components/Crop.tsx b/src/components/Crop.tsx index b3af39c..82da196 100644 --- a/src/components/Crop.tsx +++ b/src/components/Crop.tsx @@ -78,7 +78,7 @@ class Crop extends Component { if (!this.crop) return; // @ts-ignore interact(this.crop) - .draggable({}) + .draggable({}) .resizable({ edges: { left: true, @@ -134,11 +134,10 @@ const FourDivs = ( ); const cropStyle = (box: CropperBox, style: CSSProperties): CSSProperties => { - const { x, y, width, height } = box; - + const { x, y, width, height, originX ,originY } = box; return { ...style, - transformOrigin: `${-box.x}px ${-box.y}px`, + transformOrigin: `${-originX || x}px ${-originY || y}px`, boxShadow: '0 0 0 2px #000', background: '#FFFFFF33', position: 'absolute', diff --git a/src/components/MultiCrops.tsx b/src/components/MultiCrops.tsx index b74277b..ee3b7ee 100644 --- a/src/components/MultiCrops.tsx +++ b/src/components/MultiCrops.tsx @@ -175,6 +175,8 @@ const MultiCrops: FC = ({ const box = { x: Math.min(pointA.current.x, pointB.x), y: Math.min(pointA.current.y, pointB.y), + originX: Math.min(pointA.current.x, pointB.x), + originY: Math.min(pointA.current.y, pointB.y), width: Math.abs(pointA.current.x - pointB.x), height: Math.abs(pointA.current.y - pointB.y), id: id.current, diff --git a/src/types.ts b/src/types.ts index e0ebd57..158e841 100644 --- a/src/types.ts +++ b/src/types.ts @@ -10,6 +10,8 @@ export type CropperBoxId = string; export type CropperBox = { x: number; y: number; + originX:number; + originY:number; width: number; height: number; id: CropperBoxId; From 82e2264d2f856c6ce70e4008cb9fdc8c8595cdd5 Mon Sep 17 00:00:00 2001 From: "chaitanya.garimella77@gmail.com" Date: Sat, 11 Apr 2020 16:32:03 +0530 Subject: [PATCH 2/3] box drag remove check --- src/components/Crop.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Crop.tsx b/src/components/Crop.tsx index 82da196..cb728ef 100644 --- a/src/components/Crop.tsx +++ b/src/components/Crop.tsx @@ -137,7 +137,7 @@ const cropStyle = (box: CropperBox, style: CSSProperties): CSSProperties => { const { x, y, width, height, originX ,originY } = box; return { ...style, - transformOrigin: `${-originX || x}px ${-originY || y}px`, + transformOrigin: `${-originX }px ${-originY}px`, boxShadow: '0 0 0 2px #000', background: '#FFFFFF33', position: 'absolute', From 3a84f190140866d272558806f29cc41a71fd22c9 Mon Sep 17 00:00:00 2001 From: "chaitanya.garimella77@gmail.com" Date: Sat, 11 Apr 2020 16:35:54 +0530 Subject: [PATCH 3/3] ran format on code --- src/components/Crop.tsx | 6 +++--- src/types.ts | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Crop.tsx b/src/components/Crop.tsx index cb728ef..ae896ee 100644 --- a/src/components/Crop.tsx +++ b/src/components/Crop.tsx @@ -78,7 +78,7 @@ class Crop extends Component { if (!this.crop) return; // @ts-ignore interact(this.crop) - .draggable({}) + .draggable({}) .resizable({ edges: { left: true, @@ -134,10 +134,10 @@ const FourDivs = ( ); const cropStyle = (box: CropperBox, style: CSSProperties): CSSProperties => { - const { x, y, width, height, originX ,originY } = box; + const { x, y, width, height, originX, originY } = box; return { ...style, - transformOrigin: `${-originX }px ${-originY}px`, + transformOrigin: `${-originX}px ${-originY}px`, boxShadow: '0 0 0 2px #000', background: '#FFFFFF33', position: 'absolute', diff --git a/src/types.ts b/src/types.ts index 158e841..8fb4a19 100644 --- a/src/types.ts +++ b/src/types.ts @@ -10,8 +10,8 @@ export type CropperBoxId = string; export type CropperBox = { x: number; y: number; - originX:number; - originY:number; + originX: number; + originY: number; width: number; height: number; id: CropperBoxId;