geoiq-frontend-ui-kit
Version:
This project is a UI kit for GeoIQ's frontend. It's built with React, TypeScript, and Vite.
72 lines (71 loc) • 3.73 kB
JavaScript
import { pushHistory as d } from "./index153.es.js";
import { emitChange as u, resetAdjValues as v } from "./index151.es.js";
import { syncCanvasSize as C, render as x, normRect as w, layerBounds as R } from "./index152.es.js";
import { setMode as g } from "./index155.es.js";
function m(o, n, t) {
const r = R(o, n), a = { x: r.x + r.w / 2, y: r.y + r.h / 2 }, c = t(a);
return { x: c.x - a.x, y: c.y - a.y };
}
function T(o, n) {
d(o);
const t = n * Math.PI / 180, r = o.sourceCanvas.width, a = o.sourceCanvas.height, c = a, h = r, p = document.createElement("canvas");
p.width = c, p.height = h;
const e = p.getContext("2d");
e.translate(c / 2, h / 2), e.rotate(t), e.drawImage(o.sourceCanvas, -r / 2, -a / 2), o.sourceCanvas.width = c, o.sourceCanvas.height = h, o.sourceCanvas.getContext("2d").drawImage(p, 0, 0);
const s = (i, l) => {
const y = i - r / 2, f = l - a / 2;
return {
x: y * Math.cos(t) - f * Math.sin(t) + c / 2,
y: y * Math.sin(t) + f * Math.cos(t) + h / 2
};
};
o.layers.forEach((i) => {
if (i.type === "text" || i.type === "shape" || i.type === "sticker") {
const l = m(o, i, (y) => s(y.x, y.y));
i.x += l.x, i.y += l.y, i.rotation = (((i.rotation || 0) + n) % 360 + 360) % 360;
} else i.type === "stroke" && (i.points = i.points.map((l) => s(l.x, l.y)));
}), C(o), x(o), o.statusText = n < 0 ? "Rotated left" : "Rotated right", u(o);
}
function b(o, n) {
d(o);
const t = o.sourceCanvas.width, r = o.sourceCanvas.height, a = document.createElement("canvas");
a.width = t, a.height = r;
const c = a.getContext("2d");
n ? (c.translate(t, 0), c.scale(-1, 1)) : (c.translate(0, r), c.scale(1, -1)), c.drawImage(o.sourceCanvas, 0, 0), o.sourceCanvas.getContext("2d").clearRect(0, 0, t, r), o.sourceCanvas.getContext("2d").drawImage(a, 0, 0);
const h = (e) => n ? t - e : e, p = (e) => n ? e : r - e;
o.layers.forEach((e) => {
if (e.type === "text" || e.type === "shape" || e.type === "sticker") {
const s = m(o, e, (i) => ({ x: h(i.x), y: p(i.y) }));
e.x += s.x, e.y += s.y, e.rotation = (360 - (e.rotation || 0) % 360) % 360, n ? e.flipH = !e.flipH : e.flipV = !e.flipV;
} else e.type === "stroke" && (e.points = e.points.map((s) => ({ x: h(s.x), y: p(s.y) })));
}), x(o), o.statusText = n ? "Flipped horizontally" : "Flipped vertically", u(o);
}
function H(o) {
if (!o.cropRect || Math.abs(o.cropRect.w) < 4 || Math.abs(o.cropRect.h) < 4) {
o.statusText = "Draw a crop box first", o.notify();
return;
}
d(o);
const n = w(o.cropRect), t = document.createElement("canvas");
t.width = Math.round(n.w), t.height = Math.round(n.h), t.getContext("2d").drawImage(o.sourceCanvas, n.x, n.y, n.w, n.h, 0, 0, n.w, n.h), o.sourceCanvas.width = t.width, o.sourceCanvas.height = t.height, o.sourceCanvas.getContext("2d").drawImage(t, 0, 0), o.layers.forEach((r) => {
r.type === "text" || r.type === "shape" || r.type === "sticker" ? (r.x -= n.x, r.y -= n.y) : r.type === "stroke" && (r.points = r.points.map((a) => ({ x: a.x - n.x, y: a.y - n.y })));
}), o.cropRect = null, g(o, "select"), C(o), x(o), o.statusText = "Cropped", u(o);
}
function V(o) {
g(o, "select");
}
function D(o, n) {
o.cropRatio = n, o.notify();
}
function F(o) {
o.originalCanvas && (d(o), o.sourceCanvas.width = o.originalCanvas.width, o.sourceCanvas.height = o.originalCanvas.height, o.sourceCanvas.getContext("2d").drawImage(o.originalCanvas, 0, 0), o.layers = [], o.selectedId = null, o.zoom = 1, v(o), C(o), x(o), o.statusText = "Reset to original", u(o));
}
export {
H as applyCrop,
V as cancelCrop,
b as flip,
F as resetToOriginal,
T as rotate,
D as setCropRatio
};
//# sourceMappingURL=index154.es.js.map