geoiq-frontend-ui-kit
Version:
This project is a UI kit for GeoIQ's frontend. It's built with React, TypeScript, and Vite.
413 lines (412 loc) • 10.9 kB
JavaScript
import { useState as Z, useEffect as _, useCallback as z } from "react";
import { getRotatedPointerPosition as D, isPointInImage as j, applyCrop as N, transformElementsAfterCrop as O } from "./index.es139.js";
const H = 10, G = (f, i, m, d, I, P, b, u, S, M) => {
const [t, h] = Z({
cropRect: { x: 0, y: 0, width: 0, height: 0 },
cropStartPos: null,
isDragging: !1,
dragStartPos: null,
isResizing: !1,
resizeHandle: null,
resizeStartPos: null
});
_(() => {
P((r) => r);
}, [P]);
const C = z(
(r, a) => {
const { cropRect: e } = t;
if (!e.width || !e.height) return null;
const o = {
"top-left": {
x: e.x,
y: e.y
},
"top-right": {
x: e.x + e.width,
y: e.y
},
"bottom-left": {
x: e.x,
y: e.y + e.height
},
"bottom-right": {
x: e.x + e.width,
y: e.y + e.height
},
top: {
x: e.x + e.width / 2,
y: e.y
},
right: {
x: e.x + e.width,
y: e.y + e.height / 2
},
bottom: {
x: e.x + e.width / 2,
y: e.y + e.height
},
left: {
x: e.x,
y: e.y + e.height / 2
}
};
for (const [c, s] of Object.entries(o))
if (Math.abs(r - s.x) <= H && Math.abs(a - s.y) <= H)
return c;
return null;
},
[t.cropRect]
), X = z(() => {
P((r) => ({
...r,
isCropping: !r.isCropping,
isDrawingMode: !1
})), b(), u(!1), h({
cropRect: {
x: i.bgImagePosition.x,
y: i.bgImagePosition.y,
width: i.bgImageSize.width,
height: i.bgImageSize.height
},
cropStartPos: null,
isDragging: !1,
dragStartPos: null,
isResizing: !1,
resizeHandle: null,
resizeStartPos: null
});
}, [
b,
u,
i.bgImagePosition,
i.bgImageSize,
P
]), Y = z(
(r) => {
const a = r.target.getStage(), e = a?.getPointerPosition();
if (!a || !e) return;
const o = D(
e,
i,
m
), c = C(o.x, o.y);
if (c) {
h((s) => ({
...s,
isResizing: !0,
resizeHandle: c,
resizeStartPos: o
}));
return;
}
t.cropRect.width > 0 && t.cropRect.height > 0 && o.x >= t.cropRect.x && o.x <= t.cropRect.x + t.cropRect.width && o.y >= t.cropRect.y && o.y <= t.cropRect.y + t.cropRect.height ? h((s) => ({
...s,
isDragging: !0,
dragStartPos: o
})) : j(o.x, o.y, i) && h({
cropStartPos: o,
cropRect: {
x: o.x,
y: o.y,
width: 0,
height: 0
},
isDragging: !1,
dragStartPos: null,
isResizing: !1,
resizeHandle: null,
resizeStartPos: null
});
},
[i, m, t.cropRect, C]
), q = z(
(r) => {
const a = r.target.getStage(), e = a?.getPointerPosition();
if (!a || !e) return;
const o = D(
e,
i,
m
);
if (t.isResizing && t.resizeHandle && t.resizeStartPos) {
const c = o.x - t.resizeStartPos.x, s = o.y - t.resizeStartPos.y, R = i.bgImagePosition.x, y = i.bgImagePosition.y, x = i.bgImagePosition.x + i.bgImageSize.width, g = i.bgImagePosition.y + i.bgImageSize.height;
let n = t.cropRect.x, p = t.cropRect.y, l = t.cropRect.width, w = t.cropRect.height;
switch (t.resizeHandle) {
case "top-left":
n = Math.max(
R,
Math.min(
t.cropRect.x + t.cropRect.width - 10,
t.cropRect.x + c
)
), p = Math.max(
y,
Math.min(
t.cropRect.y + t.cropRect.height - 10,
t.cropRect.y + s
)
), l = t.cropRect.width - (n - t.cropRect.x), w = t.cropRect.height - (p - t.cropRect.y);
break;
case "top-right":
p = Math.max(
y,
Math.min(
t.cropRect.y + t.cropRect.height - 10,
t.cropRect.y + s
)
), l = Math.max(
10,
Math.min(
x - t.cropRect.x,
t.cropRect.width + c
)
), w = t.cropRect.height - (p - t.cropRect.y);
break;
case "bottom-left":
n = Math.max(
R,
Math.min(
t.cropRect.x + t.cropRect.width - 10,
t.cropRect.x + c
)
), l = t.cropRect.width - (n - t.cropRect.x), w = Math.max(
10,
Math.min(
g - t.cropRect.y,
t.cropRect.height + s
)
);
break;
case "bottom-right":
l = Math.max(
10,
Math.min(
x - t.cropRect.x,
t.cropRect.width + c
)
), w = Math.max(
10,
Math.min(
g - t.cropRect.y,
t.cropRect.height + s
)
);
break;
case "top":
p = Math.max(
y,
Math.min(
t.cropRect.y + t.cropRect.height - 10,
t.cropRect.y + s
)
), w = t.cropRect.height - (p - t.cropRect.y);
break;
case "right":
l = Math.max(
10,
Math.min(
x - t.cropRect.x,
t.cropRect.width + c
)
);
break;
case "bottom":
w = Math.max(
10,
Math.min(
g - t.cropRect.y,
t.cropRect.height + s
)
);
break;
case "left":
n = Math.max(
R,
Math.min(
t.cropRect.x + t.cropRect.width - 10,
t.cropRect.x + c
)
), l = t.cropRect.width - (n - t.cropRect.x);
break;
}
h((W) => ({
...W,
cropRect: {
x: n,
y: p,
width: l,
height: w
},
resizeStartPos: o
}));
} else if (t.isDragging && t.dragStartPos) {
const c = o.x - t.dragStartPos.x, s = o.y - t.dragStartPos.y, R = i.bgImagePosition.x, y = i.bgImagePosition.y, x = i.bgImagePosition.x + i.bgImageSize.width, g = i.bgImagePosition.y + i.bgImageSize.height, n = Math.max(
R,
Math.min(x - t.cropRect.width, t.cropRect.x + c)
), p = Math.max(
y,
Math.min(g - t.cropRect.height, t.cropRect.y + s)
);
h((l) => ({
...l,
cropRect: {
...l.cropRect,
x: n,
y: p
},
dragStartPos: o
}));
} else if (t.cropStartPos) {
const c = i.bgImagePosition.x, s = i.bgImagePosition.y, R = i.bgImagePosition.x + i.bgImageSize.width, y = i.bgImagePosition.y + i.bgImageSize.height, x = Math.max(c, Math.min(R, o.x)), g = Math.max(s, Math.min(y, o.y)), n = x - t.cropStartPos.x, p = g - t.cropStartPos.y;
h((l) => ({
...l,
cropRect: {
x: n > 0 ? t.cropStartPos.x : x,
y: p > 0 ? t.cropStartPos.y : g,
width: Math.abs(n),
height: Math.abs(p)
}
}));
}
},
[
t.cropStartPos,
t.isDragging,
t.dragStartPos,
t.isResizing,
t.resizeHandle,
t.resizeStartPos,
t.cropRect,
i,
m
]
), A = z(() => {
t.isDragging ? h((r) => ({
...r,
isDragging: !1,
dragStartPos: null
})) : t.isResizing ? h((r) => ({
...r,
isResizing: !1,
resizeHandle: null,
resizeStartPos: null
})) : t.cropRect.width > 10 && t.cropRect.height > 10 && M ? M() : h({
cropRect: { x: 0, y: 0, width: 0, height: 0 },
cropStartPos: null,
isDragging: !1,
dragStartPos: null,
isResizing: !1,
resizeHandle: null,
resizeStartPos: null
}), h((r) => ({
...r,
cropStartPos: null
}));
}, [
t.cropRect.width,
t.cropRect.height,
t.isDragging,
t.isResizing,
M
]), B = z(() => {
P((r) => ({ ...r, isCropping: !1 })), h({
cropRect: { x: 0, y: 0, width: 0, height: 0 },
cropStartPos: null,
isDragging: !1,
dragStartPos: null,
isResizing: !1,
resizeHandle: null,
resizeStartPos: null
});
}, []), L = z(async () => {
if (!(!f.bgImage || t.cropRect.width === 0 || t.cropRect.height === 0))
try {
const { croppedImage: r, newWidth: a, newHeight: e, scaleX: o, scaleY: c } = await N(
t.cropRect,
f,
i
// dimensions
), s = -i.bgRotation * (Math.PI / 180), { newSquares: R, newTextBoxes: y, newLines: x } = O(
t.cropRect,
o,
c,
s,
m,
a,
e,
f
);
d((g) => ({
...g,
bgImage: r,
squares: R,
textBoxes: y,
lines: x
})), I((g) => ({
...g,
bgImageSize: {
width: a,
height: e
},
bgImagePosition: {
x: (m.width - a) / 2,
y: (m.height - e) / 2
},
bgRotation: 0
})), h({
cropRect: { x: 0, y: 0, width: 0, height: 0 },
cropStartPos: null,
isDragging: !1,
dragStartPos: null,
isResizing: !1,
resizeHandle: null,
resizeStartPos: null
}), P((g) => ({ ...g, isCropping: !1 })), S(() => ({
past: [],
present: {
images: R.length > 0 ? [r] : [],
squares: R,
textBoxes: y,
lines: x,
bgImage: null,
bgImageSize: {
width: a,
height: e
},
bgImagePosition: {
x: (m.width - a) / 2,
y: (m.height - e) / 2
},
bgRotation: 0
},
future: []
}));
} catch (r) {
console.error("Error applying crop:", r);
}
}, [
f,
t.cropRect,
i,
m,
d,
I,
P,
S
]);
return {
cropState: t,
setCropState: h,
toggleCropMode: X,
handleCropMouseDown: Y,
handleCropMouseMove: q,
handleCropMouseUp: A,
handleCancelCrop: B,
handleApplyCrop: L
};
};
export {
G as useCropHandlers
};
//# sourceMappingURL=index.es92.js.map