geoiq-frontend-ui-kit 2.0.2 → 2.0.4

package/dist/index.es146.js

@@ -1,120 +1,35 @@
-import { FONTS as a, VERSION as i } from "./index.es145.js";
-const d = 30;
-function o() {
-  const e = document.createElement("canvas");
-  return e.width = 0, e.height = 0, e;
-}
-function g(e) {
-  return {
-    config: e,
-    stickers: e.stickers || [],
-    listeners: { open: [], close: [], save: [], change: [], load: [] },
-    notify: () => {
-    },
-    sourceCanvas: o(),
-    originalCanvas: null,
-    layers: [],
-    selectedId: null,
-    nextId: 1,
-    undoStack: [],
-    redoStack: [],
-    mode: "select",
-    viewScale: 1,
-    zoom: 1,
-    fitScale: 1,
-    selectedShapeType: "rect",
-    shapeFill: "stroke",
-    shapeWidth: 6,
-    brushSize: 8,
-    brushStyle: "round",
-    textFont: a[0].value,
-    textSize: 64,
-    textColor: "#111111",
-    shapeColor: "#111111",
-    drawColor: "#111111",
-    cropRatio: "free",
-    isSaving: !1,
-    isLoadingImage: !1,
-    statusText: "Ready",
-    adj: {
-      brightness: 100,
-      contrast: 100,
-      saturate: 100,
-      sepia: 0,
-      blur: 0,
-      hue: 0,
-      filter: "none"
-    },
-    stickerImageCache: /* @__PURE__ */ new Map(),
-    canvasEl: null,
-    overlayEl: null,
-    textEditorEl: null,
-    stageEl: null,
-    ctx: null,
-    octx: null,
-    mounted: !1,
-    editingLayer: null,
-    editingSelectAll: !1,
-    dragMode: null,
-    dragStart: null,
-    dragOrig: null,
-    dragRect: null,
-    resizeCorner: null,
-    resizeAnchor: null,
-    resizeCenter: null,
-    resizeAnchorWorld: null,
-    rotateStart: null,
-    activePointerId: null,
-    pendingShape: null,
-    pendingStroke: null,
-    cropRect: null,
-    cropStart: null,
-    isOpenFlag: !1
+import { emitChange as o, MAX_HISTORY as e } from "./index.es144.js";
+import { syncCanvasSize as u, render as i } from "./index.es145.js";
+function d(n) {
+  const r = document.createElement("canvas");
+  return r.width = n.sourceCanvas.width, r.height = n.sourceCanvas.height, r.getContext("2d").drawImage(n.sourceCanvas, 0, 0), {
+    raster: r,
+    layers: JSON.parse(JSON.stringify(n.layers)),
+    adj: { ...n.adj },
+    sel: n.selectedId
   };
 }
-function s(e, n, l) {
-  (e.listeners[n] || []).forEach((r) => {
-    try {
-      r(l);
-    } catch (t) {
-      console.error(t);
-    }
-  });
+function p(n) {
+  n.undoStack.push(d(n)), n.undoStack.length > e && n.undoStack.shift(), n.redoStack = [], o(n);
 }
-function h(e) {
-  s(e, "change", { state: u(e) }), e.notify();
+function S(n) {
+  n.undoStack.pop(), o(n);
 }
-function S(e) {
-  return e.selectedId != null ? e.layers.find((n) => n.id === e.selectedId) : null;
+function c(n, r) {
+  n.sourceCanvas.width = r.raster.width, n.sourceCanvas.height = r.raster.height, n.sourceCanvas.getContext("2d").drawImage(r.raster, 0, 0), n.layers = JSON.parse(JSON.stringify(r.layers)), Object.assign(n.adj, r.adj), n.selectedId = r.sel, u(n), i(n);
 }
-function f(e) {
-  e.adj.brightness = 100, e.adj.contrast = 100, e.adj.saturate = 100, e.adj.sepia = 0, e.adj.blur = 0, e.adj.hue = 0, e.adj.filter = "none";
+function g(n) {
+  n.undoStack.length && (n.redoStack.push(d(n)), c(n, n.undoStack.pop()), n.statusText = "Undo", o(n));
 }
-function u(e) {
-  return e.sourceCanvas.width ? {
-    version: i,
-    image: e.sourceCanvas.toDataURL("image/png"),
-    width: e.sourceCanvas.width,
-    height: e.sourceCanvas.height,
-    adjustments: { ...e.adj },
-    layers: JSON.parse(
-      JSON.stringify(
-        e.layers.map((n) => {
-          const l = { ...n };
-          return delete l._editing, l;
-        })
-      )
-    )
-  } : null;
+function f(n) {
+  n.redoStack.length && (n.undoStack.push(d(n)), c(n, n.redoStack.pop()), n.statusText = "Redo", o(n));
 }
 export {
-  d as MAX_HISTORY,
-  g as createState,
-  s as emit,
-  h as emitChange,
-  o as emptySourceCanvas,
-  S as getSel,
-  u as getState,
-  f as resetAdjValues
+  c as applySnapshot,
+  S as popHistory,
+  p as pushHistory,
+  f as redo,
+  d as snapshot,
+  g as undo
 };
 //# sourceMappingURL=index.es146.js.map

package/dist/index.es146.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es146.js","sources":["../src/components/organisms/image-editor/engine/state.js"],"sourcesContent":["import { FONTS, VERSION } from './constants.js'\n\nexport const MAX_HISTORY = 30\n\nexport function emptySourceCanvas() {\n  const c = document.createElement('canvas')\n  c.width = 0\n  c.height = 0\n  return c\n}\n\nexport function createState(config) {\n  return {\n    config,\n    stickers: config.stickers || [],\n    listeners: { open: [], close: [], save: [], change: [], load: [] },\n    notify: () => {},\n\n    sourceCanvas: emptySourceCanvas(),\n    originalCanvas: null,\n    layers: [],\n    selectedId: null,\n    nextId: 1,\n    undoStack: [],\n    redoStack: [],\n\n    mode: 'select',\n    viewScale: 1,\n    zoom: 1,\n    fitScale: 1,\n    selectedShapeType: 'rect',\n    shapeFill: 'stroke',\n    shapeWidth: 6,\n    brushSize: 8,\n    brushStyle: 'round',\n    textFont: FONTS[0].value,\n    textSize: 64,\n    textColor: '#111111',\n    shapeColor: '#111111',\n    drawColor: '#111111',\n    cropRatio: 'free',\n    isSaving: false,\n    isLoadingImage: false,\n    statusText: 'Ready',\n    adj: {\n      brightness: 100,\n      contrast: 100,\n      saturate: 100,\n      sepia: 0,\n      blur: 0,\n      hue: 0,\n      filter: 'none',\n    },\n    stickerImageCache: new Map(),\n\n    canvasEl: null,\n    overlayEl: null,\n    textEditorEl: null,\n    stageEl: null,\n    ctx: null,\n    octx: null,\n    mounted: false,\n\n    editingLayer: null,\n    editingSelectAll: false,\n\n    dragMode: null,\n    dragStart: null,\n    dragOrig: null,\n    dragRect: null,\n    resizeCorner: null,\n    resizeAnchor: null,\n    resizeCenter: null,\n    resizeAnchorWorld: null,\n    rotateStart: null,\n    activePointerId: null,\n    pendingShape: null,\n    pendingStroke: null,\n    cropRect: null,\n    cropStart: null,\n\n    isOpenFlag: false,\n  }\n}\n\nexport function emit(state, ev, payload) {\n  ;(state.listeners[ev] || []).forEach((fn) => {\n    try {\n      fn(payload)\n    } catch (e) {\n      // eslint-disable-next-line no-console\n      console.error(e)\n    }\n  })\n}\n\nexport function emitChange(state) {\n  emit(state, 'change', { state: getState(state) })\n  state.notify()\n}\n\nexport function getSel(state) {\n  return state.selectedId != null\n    ? state.layers.find((l) => l.id === state.selectedId)\n    : null\n}\n\nexport function resetAdjValues(state) {\n  state.adj.brightness = 100\n  state.adj.contrast = 100\n  state.adj.saturate = 100\n  state.adj.sepia = 0\n  state.adj.blur = 0\n  state.adj.hue = 0\n  state.adj.filter = 'none'\n}\n\nexport function getState(state) {\n  if (!state.sourceCanvas.width) return null\n  return {\n    version: VERSION,\n    image: state.sourceCanvas.toDataURL('image/png'),\n    width: state.sourceCanvas.width,\n    height: state.sourceCanvas.height,\n    adjustments: { ...state.adj },\n    layers: JSON.parse(\n      JSON.stringify(\n        state.layers.map((L) => {\n          const c = { ...L }\n          delete c._editing\n          return c\n        })\n      )\n    ),\n  }\n}\n"],"names":["MAX_HISTORY","emptySourceCanvas","c","createState","config","FONTS","emit","state","ev","payload","fn","e","emitChange","getState","getSel","l","resetAdjValues","VERSION","L"],"mappings":";AAEY,MAACA,IAAc;AAEpB,SAASC,IAAoB;AAClC,QAAMC,IAAI,SAAS,cAAc,QAAQ;AACzC,SAAAA,EAAE,QAAQ,GACVA,EAAE,SAAS,GACJA;AACT;AAEO,SAASC,EAAYC,GAAQ;AAClC,SAAO;AAAA,IACL,QAAAA;AAAA,IACA,UAAUA,EAAO,YAAY,CAAA;AAAA,IAC7B,WAAW,EAAE,MAAM,CAAA,GAAI,OAAO,CAAA,GAAI,MAAM,CAAA,GAAI,QAAQ,IAAI,MAAM,CAAA,EAAE;AAAA,IAChE,QAAQ,MAAM;AAAA,IAAC;AAAA,IAEf,cAAcH,EAAiB;AAAA,IAC/B,gBAAgB;AAAA,IAChB,QAAQ,CAAA;AAAA,IACR,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,WAAW,CAAA;AAAA,IACX,WAAW,CAAA;AAAA,IAEX,MAAM;AAAA,IACN,WAAW;AAAA,IACX,MAAM;AAAA,IACN,UAAU;AAAA,IACV,mBAAmB;AAAA,IACnB,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,UAAUI,EAAM,CAAC,EAAE;AAAA,IACnB,UAAU;AAAA,IACV,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,KAAK;AAAA,MACH,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,UAAU;AAAA,MACV,OAAO;AAAA,MACP,MAAM;AAAA,MACN,KAAK;AAAA,MACL,QAAQ;AAAA,IACd;AAAA,IACI,mBAAmB,oBAAI,IAAG;AAAA,IAE1B,UAAU;AAAA,IACV,WAAW;AAAA,IACX,cAAc;AAAA,IACd,SAAS;AAAA,IACT,KAAK;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IAET,cAAc;AAAA,IACd,kBAAkB;AAAA,IAElB,UAAU;AAAA,IACV,WAAW;AAAA,IACX,UAAU;AAAA,IACV,UAAU;AAAA,IACV,cAAc;AAAA,IACd,cAAc;AAAA,IACd,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,eAAe;AAAA,IACf,UAAU;AAAA,IACV,WAAW;AAAA,IAEX,YAAY;AAAA,EAChB;AACA;AAEO,SAASC,EAAKC,GAAOC,GAAIC,GAAS;AACtC,GAACF,EAAM,UAAUC,CAAE,KAAK,CAAA,GAAI,QAAQ,CAACE,MAAO;AAC3C,QAAI;AACF,MAAAA,EAAGD,CAAO;AAAA,IACZ,SAASE,GAAG;AAEV,cAAQ,MAAMA,CAAC;AAAA,IACjB;AAAA,EACF,CAAC;AACH;AAEO,SAASC,EAAWL,GAAO;AAChC,EAAAD,EAAKC,GAAO,UAAU,EAAE,OAAOM,EAASN,CAAK,EAAC,CAAE,GAChDA,EAAM,OAAM;AACd;AAEO,SAASO,EAAOP,GAAO;AAC5B,SAAOA,EAAM,cAAc,OACvBA,EAAM,OAAO,KAAK,CAACQ,MAAMA,EAAE,OAAOR,EAAM,UAAU,IAClD;AACN;AAEO,SAASS,EAAeT,GAAO;AACpC,EAAAA,EAAM,IAAI,aAAa,KACvBA,EAAM,IAAI,WAAW,KACrBA,EAAM,IAAI,WAAW,KACrBA,EAAM,IAAI,QAAQ,GAClBA,EAAM,IAAI,OAAO,GACjBA,EAAM,IAAI,MAAM,GAChBA,EAAM,IAAI,SAAS;AACrB;AAEO,SAASM,EAASN,GAAO;AAC9B,SAAKA,EAAM,aAAa,QACjB;AAAA,IACL,SAASU;AAAA,IACT,OAAOV,EAAM,aAAa,UAAU,WAAW;AAAA,IAC/C,OAAOA,EAAM,aAAa;AAAA,IAC1B,QAAQA,EAAM,aAAa;AAAA,IAC3B,aAAa,EAAE,GAAGA,EAAM,IAAG;AAAA,IAC3B,QAAQ,KAAK;AAAA,MACX,KAAK;AAAA,QACHA,EAAM,OAAO,IAAI,CAACW,MAAM;AACtB,gBAAMhB,IAAI,EAAE,GAAGgB,EAAC;AAChB,wBAAOhB,EAAE,UACFA;AAAA,QACT,CAAC;AAAA,MACT;AAAA,IACA;AAAA,EACA,IAhBwC;AAiBxC;"}
+{"version":3,"file":"index.es146.js","sources":["../src/components/organisms/image-editor/engine/history.js"],"sourcesContent":["import { MAX_HISTORY, emitChange } from './state.js'\nimport { render, syncCanvasSize } from './rendering.js'\n\nexport function snapshot(state) {\n  const c = document.createElement('canvas')\n  c.width = state.sourceCanvas.width\n  c.height = state.sourceCanvas.height\n  c.getContext('2d').drawImage(state.sourceCanvas, 0, 0)\n  return {\n    raster: c,\n    layers: JSON.parse(JSON.stringify(state.layers)),\n    adj: { ...state.adj },\n    sel: state.selectedId,\n  }\n}\n\nexport function pushHistory(state) {\n  state.undoStack.push(snapshot(state))\n  if (state.undoStack.length > MAX_HISTORY) state.undoStack.shift()\n  state.redoStack = []\n  emitChange(state)\n}\nexport function popHistory(state) {\n  state.undoStack.pop()\n  emitChange(state)\n}\n\nexport function applySnapshot(state, s) {\n  state.sourceCanvas.width = s.raster.width\n  state.sourceCanvas.height = s.raster.height\n  state.sourceCanvas.getContext('2d').drawImage(s.raster, 0, 0)\n  state.layers = JSON.parse(JSON.stringify(s.layers))\n  Object.assign(state.adj, s.adj)\n  state.selectedId = s.sel\n  syncCanvasSize(state)\n  render(state)\n}\n\nexport function undo(state) {\n  if (!state.undoStack.length) return\n  state.redoStack.push(snapshot(state))\n  applySnapshot(state, state.undoStack.pop())\n  state.statusText = 'Undo'\n  emitChange(state)\n}\n\nexport function redo(state) {\n  if (!state.redoStack.length) return\n  state.undoStack.push(snapshot(state))\n  applySnapshot(state, state.redoStack.pop())\n  state.statusText = 'Redo'\n  emitChange(state)\n}\n"],"names":["snapshot","state","c","pushHistory","MAX_HISTORY","emitChange","popHistory","applySnapshot","s","syncCanvasSize","render","undo","redo"],"mappings":";;AAGO,SAASA,EAASC,GAAO;AAC9B,QAAMC,IAAI,SAAS,cAAc,QAAQ;AACzC,SAAAA,EAAE,QAAQD,EAAM,aAAa,OAC7BC,EAAE,SAASD,EAAM,aAAa,QAC9BC,EAAE,WAAW,IAAI,EAAE,UAAUD,EAAM,cAAc,GAAG,CAAC,GAC9C;AAAA,IACL,QAAQC;AAAA,IACR,QAAQ,KAAK,MAAM,KAAK,UAAUD,EAAM,MAAM,CAAC;AAAA,IAC/C,KAAK,EAAE,GAAGA,EAAM,IAAG;AAAA,IACnB,KAAKA,EAAM;AAAA,EACf;AACA;AAEO,SAASE,EAAYF,GAAO;AACjC,EAAAA,EAAM,UAAU,KAAKD,EAASC,CAAK,CAAC,GAChCA,EAAM,UAAU,SAASG,KAAaH,EAAM,UAAU,MAAK,GAC/DA,EAAM,YAAY,CAAA,GAClBI,EAAWJ,CAAK;AAClB;AACO,SAASK,EAAWL,GAAO;AAChC,EAAAA,EAAM,UAAU,IAAG,GACnBI,EAAWJ,CAAK;AAClB;AAEO,SAASM,EAAcN,GAAOO,GAAG;AACtC,EAAAP,EAAM,aAAa,QAAQO,EAAE,OAAO,OACpCP,EAAM,aAAa,SAASO,EAAE,OAAO,QACrCP,EAAM,aAAa,WAAW,IAAI,EAAE,UAAUO,EAAE,QAAQ,GAAG,CAAC,GAC5DP,EAAM,SAAS,KAAK,MAAM,KAAK,UAAUO,EAAE,MAAM,CAAC,GAClD,OAAO,OAAOP,EAAM,KAAKO,EAAE,GAAG,GAC9BP,EAAM,aAAaO,EAAE,KACrBC,EAAeR,CAAK,GACpBS,EAAOT,CAAK;AACd;AAEO,SAASU,EAAKV,GAAO;AAC1B,EAAKA,EAAM,UAAU,WACrBA,EAAM,UAAU,KAAKD,EAASC,CAAK,CAAC,GACpCM,EAAcN,GAAOA,EAAM,UAAU,IAAG,CAAE,GAC1CA,EAAM,aAAa,QACnBI,EAAWJ,CAAK;AAClB;AAEO,SAASW,EAAKX,GAAO;AAC1B,EAAKA,EAAM,UAAU,WACrBA,EAAM,UAAU,KAAKD,EAASC,CAAK,CAAC,GACpCM,EAAcN,GAAOA,EAAM,UAAU,IAAG,CAAE,GAC1CA,EAAM,aAAa,QACnBI,EAAWJ,CAAK;AAClB;"}

package/dist/index.es147.js

@@ -1,325 +1,71 @@
-import { supportsContextFilter as k } from "./index.es162.js";
-import { FILTER_CSS as T } from "./index.es145.js";
-function C(t) {
-  const { adj: e } = t;
-  let n = `brightness(${e.brightness}%) contrast(${e.contrast}%) saturate(${e.saturate}%) sepia(${e.sepia}%) blur(${e.blur}px) hue-rotate(${e.hue}deg)`;
-  return e.filter !== "none" && (n += " " + T[e.filter]), n.trim();
-}
-const R = 0.25, A = 4, m = 1.25;
-function v(t) {
-  const n = Math.min(
-    (t.stageEl.clientWidth - 48) / t.sourceCanvas.width,
-    (t.stageEl.clientHeight - 48) / t.sourceCanvas.height,
-    1
-  );
-  t.fitScale = n;
-  const o = n * t.zoom;
-  t.viewScale = o;
-  const a = Math.round(t.sourceCanvas.width * o), r = Math.round(t.sourceCanvas.height * o);
-  t.canvasEl.style.width = t.overlayEl.style.width = a + "px", t.canvasEl.style.height = t.overlayEl.style.height = r + "px";
-}
-function u(t, e) {
-  if (t.zoom = Math.min(A, Math.max(R, e)), !t.mounted || !t.sourceCanvas.width) {
-    t.notify();
-    return;
-  }
-  v(t), I(t), t.notify();
-}
-function J(t) {
-  u(t, t.zoom * m);
-}
-function V(t) {
-  u(t, t.zoom / m);
-}
-function j(t) {
-  u(t, 1);
-}
-function q(t) {
-  t.canvasEl.width = t.overlayEl.width = t.sourceCanvas.width, t.canvasEl.height = t.overlayEl.height = t.sourceCanvas.height, v(t);
-}
-function H(t) {
-  const { ctx: e, canvasEl: n, sourceCanvas: o } = t;
-  e.clearRect(0, 0, n.width, n.height);
-  const a = C(t);
-  if (k()) {
-    n.style.filter = "", e.filter = a, e.drawImage(o, 0, 0), e.filter = "none";
-    return;
-  }
-  n.style.filter = a, e.drawImage(o, 0, 0);
-}
-function U(t) {
-  !t.mounted || !t.sourceCanvas.width || (H(t), I(t));
-}
-const g = 1.1;
-function S(t, e) {
-  t.octx.font = `${e.size}px ${e.font}`;
-  const n = Math.max(e.boxWidth, 1), o = [];
-  return e.text.split(`
-`).forEach((a) => {
-    const r = a.split(" ");
-    let i = "";
-    r.forEach((h) => {
-      const s = i ? i + " " + h : h;
-      i && t.octx.measureText(s).width > n ? (o.push(i), i = h) : i = s;
-    }), o.push(i);
-  }), o;
-}
-function c(t, e) {
-  if (e.type === "text") {
-    const n = S(t, e);
-    return {
-      x: e.x,
-      y: e.y,
-      w: e.boxWidth,
-      h: n.length * e.size * g
-    };
-  }
-  if (e.type === "shape" || e.type === "sticker")
+import { pushHistory as d } from "./index.es146.js";
+import { emitChange as u, resetAdjValues as v } from "./index.es144.js";
+import { syncCanvasSize as C, render as x, normRect as w, layerBounds as R } from "./index.es145.js";
+import { setMode as g } from "./index.es148.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: Math.min(e.x, e.x + e.w),
-      y: Math.min(e.y, e.y + e.h),
-      w: Math.abs(e.w),
-      h: Math.abs(e.h)
+      x: y * Math.cos(t) - f * Math.sin(t) + c / 2,
+      y: y * Math.sin(t) + f * Math.cos(t) + h / 2
     };
-  if (e.type === "stroke") {
-    let n = 1 / 0, o = 1 / 0, a = -1 / 0, r = -1 / 0;
-    e.points.forEach((h) => {
-      n = Math.min(n, h.x), o = Math.min(o, h.y), a = Math.max(a, h.x), r = Math.max(r, h.y);
-    });
-    const i = e.width / 2;
-    return { x: n - i, y: o - i, w: a - n + i * 2, h: r - o + i * 2 };
-  }
-  return { x: 0, y: 0, w: 0, h: 0 };
-}
-function K(t, e) {
-  if (e.type !== "text") return;
-  const n = t.sourceCanvas.height - e.y;
-  for (; e.size > 10 && c(t, e).h > n && n > 0; )
-    e.size -= 1;
-}
-function Q(t, e) {
-  if (e.type !== "text") return;
-  const n = t.sourceCanvas.width - e.x;
-  e.boxWidth = Math.round(Math.max(20, Math.min(e.boxWidth, n)));
-}
-function E(t) {
-  return [
-    { corner: "tl", x: t.x, y: t.y },
-    { corner: "tr", x: t.x + t.w, y: t.y },
-    { corner: "bl", x: t.x, y: t.y + t.h },
-    { corner: "br", x: t.x + t.w, y: t.y + t.h }
-  ];
-}
-const w = [
-  "line",
-  "dashedLine",
-  "arrow",
-  "dashedArrow",
-  "doubleArrow",
-  "dashedDoubleArrow"
-], z = ["dashedLine", "dashedArrow", "dashedDoubleArrow"], D = {
-  arrow: ["end"],
-  dashedArrow: ["end"],
-  doubleArrow: ["end", "start"],
-  dashedDoubleArrow: ["end", "start"]
-};
-function W(t) {
-  const e = Math.max(1, t || 1);
-  return [Math.max(6, e * 2.5), Math.max(4, e * 1.75)];
-}
-function M(t, e, n, o, a) {
-  t.beginPath(), t.moveTo(e, n), t.lineTo(
-    e - a * Math.cos(o - Math.PI / 6),
-    n - a * Math.sin(o - Math.PI / 6)
-  ), t.moveTo(e, n), t.lineTo(
-    e - a * Math.cos(o + Math.PI / 6),
-    n - a * Math.sin(o + Math.PI / 6)
-  ), t.stroke();
-}
-const _ = 26, O = 6;
-function y(t, e) {
-  const n = c(t, e);
-  return { x: n.x + n.w / 2, y: n.y + n.h / 2 };
-}
-function d(t, e, n) {
-  if (!n) return { x: t.x, y: t.y };
-  const o = n * Math.PI / 180, a = Math.cos(o), r = Math.sin(o), i = t.x - e.x, h = t.y - e.y;
-  return { x: e.x + i * a - h * r, y: e.y + i * r + h * a };
-}
-function X(t, e, n, o) {
-  const a = e.rotation || 0;
-  if (!a) {
-    o();
-    return;
-  }
-  const r = d(n, y(t, e), a);
-  o();
-  const i = d(n, y(t, e), a);
-  e.x += r.x - i.x, e.y += r.y - i.y;
-}
-function $(t, e, n) {
-  return d(n, y(t, e), -(e.rotation || 0));
-}
-function b(t, e) {
-  const n = c(t, e);
-  return {
-    x: n.x + n.w / 2,
-    y: n.y + n.h + _ / t.viewScale
   };
-}
-function N(t, e) {
-  const n = b(t, e);
-  return d(n, y(t, e), e.rotation || 0);
-}
-function Y(t, e, n) {
-  const o = N(t, n);
-  return Math.hypot(e.x - o.x, e.y - o.y) <= 14 / t.viewScale;
-}
-function L(t, e, n) {
-  if (n.type === "stroke") return null;
-  const o = 12 / t.viewScale, a = $(t, n, e);
-  if (n.type === "shape" && w.includes(n.shape)) {
-    const s = [
-      { corner: "start", x: n.x, y: n.y },
-      { corner: "end", x: n.x + n.w, y: n.y + n.h }
-    ].find(
-      (l) => Math.abs(a.x - l.x) < o && Math.abs(a.y - l.y) < o
-    );
-    return s ? s.corner : null;
-  }
-  const r = c(t, n), i = E(r).find(
-    (h) => Math.abs(a.x - h.x) < o && Math.abs(a.y - h.y) < o
-  );
-  return i ? i.corner : null;
-}
-function p(t, e, n) {
-  if (!n._editing) {
-    if (e.save(), n.type !== "stroke" || n.rotation) {
-      const o = c(t, n), a = o.x + o.w / 2, r = o.y + o.h / 2;
-      e.translate(a, r), n.rotation && e.rotate(n.rotation * Math.PI / 180), (n.flipH || n.flipV) && e.scale(n.flipH ? -1 : 1, n.flipV ? -1 : 1), e.translate(-a, -r);
-    }
-    if (n.type === "text") {
-      e.font = `${n.size}px ${n.font}`, e.fillStyle = n.color, e.textBaseline = "top", e.shadowColor = "rgba(0,0,0,.22)", e.shadowBlur = n.size * 0.05, e.shadowOffsetY = n.size * 0.02;
-      const o = n.size * g;
-      S(t, n).forEach((a, r) => {
-        e.fillText(a, n.x, n.y + r * o);
-      });
-    } else if (n.type === "shape") {
-      e.strokeStyle = n.color, e.fillStyle = n.color, e.lineWidth = n.width, e.lineCap = "round", e.lineJoin = "round";
-      const o = n.x, a = n.y, r = n.w, i = n.h;
-      if (n.shape === "rect")
-        n.fill === "fill" ? e.fillRect(o, a, r, i) : e.strokeRect(o, a, r, i);
-      else if (n.shape === "ellipse")
-        e.beginPath(), e.ellipse(
-          o + r / 2,
-          a + i / 2,
-          Math.abs(r / 2),
-          Math.abs(i / 2),
-          0,
-          0,
-          Math.PI * 2
-        ), n.fill === "fill" ? e.fill() : e.stroke();
-      else if (n.shape === "circle") {
-        const h = Math.min(Math.abs(r), Math.abs(i)) / 2;
-        e.beginPath(), e.arc(o + r / 2, a + i / 2, h, 0, Math.PI * 2), n.fill === "fill" ? e.fill() : e.stroke();
-      } else if (w.includes(n.shape)) {
-        const h = o + r, s = a + i, l = z.includes(n.shape);
-        l && (e.lineCap = "butt", e.setLineDash(W(n.width))), e.beginPath(), e.moveTo(o, a), e.lineTo(h, s), e.stroke(), l && (e.setLineDash([]), e.lineCap = "round");
-        const x = Math.atan2(i, r), f = Math.max(14, n.width * 3);
-        (D[n.shape] || []).forEach((P) => {
-          P === "end" ? M(e, h, s, x, f) : M(e, o, a, x + Math.PI, f);
-        });
-      }
-    } else if (n.type === "stroke")
-      e.strokeStyle = n.color, e.lineWidth = n.width, e.lineCap = "round", e.lineJoin = "round", e.globalAlpha = n.style === "highlight" ? 0.35 : 1, e.beginPath(), n.points.forEach(
-        (o, a) => a === 0 ? e.moveTo(o.x, o.y) : e.lineTo(o.x, o.y)
-      ), n.points.length === 1 && e.lineTo(n.points[0].x + 0.1, n.points[0].y + 0.1), e.stroke();
-    else if (n.type === "sticker") {
-      const o = t.stickerImageCache.get(n.src);
-      o && o.complete && o.naturalWidth && e.drawImage(o, n.x, n.y, n.w, n.h);
-    }
-    e.restore();
+  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 B(t) {
-  return {
-    x: Math.min(t.x, t.x + t.w),
-    y: Math.min(t.y, t.y + t.h),
-    w: Math.abs(t.w),
-    h: Math.abs(t.h)
-  };
+function V(o) {
+  g(o, "select");
 }
-function F(t) {
-  const { cropRect: e, overlayEl: n, octx: o, sourceCanvas: a } = t;
-  if (!e) return;
-  const r = B(e), i = n.width, h = n.height;
-  o.save(), o.fillStyle = "rgba(0,0,0,.45)", o.fillRect(0, 0, i, Math.max(0, r.y)), o.fillRect(0, Math.min(h, r.y + r.h), i, Math.max(0, h - (r.y + r.h))), o.fillRect(0, r.y, Math.max(0, r.x), r.h), o.fillRect(Math.min(i, r.x + r.w), r.y, Math.max(0, i - (r.x + r.w)), r.h), o.strokeStyle = "#fff", o.lineWidth = Math.max(1, a.width / 500), o.setLineDash([8, 6]), o.strokeRect(r.x, r.y, r.w, r.h), o.restore();
+function D(o, n) {
+  o.cropRatio = n, o.notify();
 }
-function I(t) {
-  const { octx: e, overlayEl: n, layers: o, mode: a, selectedId: r } = t;
-  if (e.clearRect(0, 0, n.width, n.height), o.forEach((i) => {
-    try {
-      p(t, e, i);
-    } catch (h) {
-      console.error("[image-editor] failed to paint layer", i.id, i.type, h);
-    }
-  }), a === "select" && r != null) {
-    const i = o.find((h) => h.id === r);
-    if (i) {
-      const h = c(t, i);
-      if (e.save(), i.rotation) {
-        const l = y(t, i);
-        e.translate(l.x, l.y), e.rotate(i.rotation * Math.PI / 180), e.translate(-l.x, -l.y);
-      }
-      if (e.strokeStyle = "#2f5fd2", e.lineWidth = Math.max(1.2, 1.5 / t.viewScale), e.setLineDash([6 / t.viewScale, 4 / t.viewScale]), e.strokeRect(h.x - 4, h.y - 4, h.w + 8, h.h + 8), e.setLineDash([]), i.type !== "stroke") {
-        const l = 9 / t.viewScale;
-        e.fillStyle = "#fff", e.strokeStyle = "#2f5fd2", (i.type === "shape" && w.includes(i.shape) ? [
-          { x: i.x, y: i.y },
-          { x: i.x + i.w, y: i.y + i.h }
-        ] : E(h)).forEach((f) => {
-          e.fillRect(f.x - l / 2, f.y - l / 2, l, l), e.strokeRect(f.x - l / 2, f.y - l / 2, l, l);
-        });
-      }
-      const s = b(t, i);
-      e.strokeStyle = "#2f5fd2", e.fillStyle = "#fff", e.beginPath(), e.moveTo(s.x, h.y + h.h + 4), e.lineTo(s.x, s.y), e.stroke(), e.beginPath(), e.arc(
-        s.x,
-        s.y,
-        O / t.viewScale,
-        0,
-        Math.PI * 2
-      ), e.fill(), e.stroke(), e.restore();
-    }
-  }
-  t.pendingShape && p(t, e, t.pendingShape), a === "crop" && t.cropRect && F(t);
+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 {
-  w as DIRECTIONAL_SHAPES,
-  g as TEXT_LINE_HEIGHT,
-  A as ZOOM_MAX,
-  R as ZOOM_MIN,
-  u as applyZoom,
-  C as baseFilter,
-  Q as clampBoxWidth,
-  K as clampTextSize,
-  E as cornerPoints,
-  F as drawCropOverlay,
-  v as fitStage,
-  X as keepingFixed,
-  c as layerBounds,
-  y as layerCenter,
-  B as normRect,
-  L as onResizeHandle,
-  Y as onRotateHandle,
-  p as paintLayer,
-  U as render,
-  H as renderBase,
-  I as renderOverlay,
-  d as rotatePoint,
-  q as syncCanvasSize,
-  $ as toLayerSpace,
-  S as wrapTextLines,
-  J as zoomIn,
-  V as zoomOut,
-  j as zoomToFit
+  H as applyCrop,
+  V as cancelCrop,
+  b as flip,
+  F as resetToOriginal,
+  T as rotate,
+  D as setCropRatio
 };
 //# sourceMappingURL=index.es147.js.map