@pixerate/editor-react 0.65.0 → 0.67.0

package/dist/image-editor/index.d.cts

@@ -211,9 +211,10 @@ interface FreeTransformOptionsBarProps {
 }
 /**
  * Free Transform's options bar (Photoshop's): the mode switch (Free, Rotate, Skew, Distort,
- * Perspective), the reference-point locator, X / Y of the reference point, W / H in percent with
- * the proportional chain, the angle and skews, the interpolation, and Commit (Enter) / Cancel
- * (Esc). Typed values apply on Enter or when the field loses focus.
+ * Perspective, Warp), the reference-point locator, X / Y of the reference point, W / H in percent
+ * with the proportional chain, the angle and skews, the interpolation, and Commit (Enter) / Cancel
+ * (Esc). In Warp mode the numbers give way to the warp style, bend, horizontal and vertical
+ * distortion, orientation and grid. Typed values apply on Enter or when the field loses focus.
  */
 declare const FreeTransformOptionsBar: React__default.FC<FreeTransformOptionsBarProps>;
 

package/dist/image-editor/index.d.ts

@@ -211,9 +211,10 @@ interface FreeTransformOptionsBarProps {
 }
 /**
  * Free Transform's options bar (Photoshop's): the mode switch (Free, Rotate, Skew, Distort,
- * Perspective), the reference-point locator, X / Y of the reference point, W / H in percent with
- * the proportional chain, the angle and skews, the interpolation, and Commit (Enter) / Cancel
- * (Esc). Typed values apply on Enter or when the field loses focus.
+ * Perspective, Warp), the reference-point locator, X / Y of the reference point, W / H in percent
+ * with the proportional chain, the angle and skews, the interpolation, and Commit (Enter) / Cancel
+ * (Esc). In Warp mode the numbers give way to the warp style, bend, horizontal and vertical
+ * distortion, orientation and grid. Typed values apply on Enter or when the field loses focus.
  */
 declare const FreeTransformOptionsBar: React__default.FC<FreeTransformOptionsBarProps>;
 

package/dist/image-editor/index.js

@@ -12,7 +12,7 @@ import {
   SelectionOptionsBar,
   useImageEditor,
   useImageHistogram
-} from "../chunk-OSBDCFF4.js";
+} from "../chunk-LCTQWNTL.js";
 export {
   AdjustmentLayersPanel,
   BrushOptionsBar,

package/dist/index.cjs

@@ -5243,6 +5243,11 @@ var FreeTransformOptionsBar = ({ tool, className }) => {
   (0, import_react43.useEffect)(() => tool.subscribe(() => setTick((n) => n + 1)), [tool]);
   const bar = tool.bar();
   if (!tool.active || !bar) return null;
+  const warp = tool.warpBar();
+  const warpNumber = (key, raw) => {
+    const v = Number(raw);
+    if (raw.trim() !== "" && Number.isFinite(v) && v !== warp[key]) tool.setWarp({ [key]: Math.max(-100, Math.min(100, v)) });
+  };
   const apply = (field, raw) => {
     const v = Number(raw);
     if (raw.trim() !== "" && Number.isFinite(v) && Math.abs(v - bar[field]) > 1e-9) tool.setField(field, v);
@@ -5250,7 +5255,66 @@ var FreeTransformOptionsBar = ({ tool, className }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: `flex flex-wrap items-center gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "free-transform-options", role: "toolbar", "aria-label": "Free Transform options", children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex gap-1", role: "group", "aria-label": "Transform mode", children: import_image_editor11.FREE_TRANSFORM_MODE_OPTIONS.map((m) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("button", { type: "button", title: m.title, "aria-pressed": tool.mode === m.id, className: chip2(tool.mode === m.id), onClick: () => tool.setMode(m.id), children: m.label }, m.id)) }),
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "grid grid-cols-3 gap-px", role: "group", "aria-label": "Reference point", children: import_image_editor11.TRANSFORM_ANCHORS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("button", { type: "button", "aria-label": `Reference point ${a}`, title: `Reference point: ${a}`, className: "h-2.5 w-2.5 rounded-sm bg-slate-700 hover:bg-indigo-500", onClick: () => tool.setReference(a) }, a)) }),
-    import_image_editor11.FREE_TRANSFORM_FIELDS.map((f) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { className: "flex items-center gap-1", title: f.title, children: [
+    tool.mode === "warp" && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-wrap items-center gap-2", role: "group", "aria-label": "Warp options", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-slate-400", children: "Warp" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("select", { "aria-label": "Warp style", value: warp.style, onChange: (e) => tool.setWarp({ style: e.target.value }), className: "rounded border border-slate-700 bg-slate-900 px-1 py-0.5", children: import_image_editor11.WARP_STYLE_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("option", { value: o.id, children: o.label }, o.id)) })
+      ] }),
+      ["bend", "horizontal", "vertical"].map((k) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-slate-400", children: k === "bend" ? "Bend" : k === "horizontal" ? "H" : "V" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          "input",
+          {
+            type: "number",
+            "aria-label": k === "bend" ? "Warp bend in percent" : `Warp ${k} distortion in percent`,
+            defaultValue: warp[k],
+            min: -100,
+            max: 100,
+            disabled: warp.style === "custom",
+            className: "w-14 rounded border border-slate-700 bg-slate-900 px-1 py-0.5 text-right disabled:opacity-40",
+            onBlur: (e) => warpNumber(k, e.currentTarget.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                e.stopPropagation();
+                warpNumber(k, e.currentTarget.value);
+              }
+            }
+          },
+          `${k}:${warp[k]}`
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-slate-500", children: "%" })
+      ] }, k)),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        "button",
+        {
+          type: "button",
+          title: "Bend along the vertical axis",
+          "aria-pressed": warp.orientation === "vertical",
+          disabled: warp.style === "custom",
+          className: chip2(warp.orientation === "vertical"),
+          onClick: () => tool.setWarp({ orientation: warp.orientation === "vertical" ? "horizontal" : "vertical" }),
+          children: "Vertical"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-slate-400", children: "Grid" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          "select",
+          {
+            "aria-label": "Warp grid",
+            value: import_image_editor11.WARP_GRID_OPTIONS.find((g) => g.columns === warp.columns && g.rows === warp.rows)?.id ?? "1x1",
+            onChange: (e) => {
+              const g = import_image_editor11.WARP_GRID_OPTIONS.find((o) => o.id === e.target.value);
+              tool.setWarp({ columns: g.columns, rows: g.rows });
+            },
+            className: "rounded border border-slate-700 bg-slate-900 px-1 py-0.5",
+            children: import_image_editor11.WARP_GRID_OPTIONS.map((g) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("option", { value: g.id, children: g.label }, g.id))
+          }
+        )
+      ] })
+    ] }),
+    tool.mode !== "warp" && import_image_editor11.FREE_TRANSFORM_FIELDS.map((f) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { className: "flex items-center gap-1", title: f.title, children: [
       /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-slate-400", children: f.label }),
       /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "input",