@elixpo/lixsketch 5.6.4 → 5.6.6

package/dist/react/{EventDispatcher-7LAK7GQ7.js → EventDispatcher-M5B4EWHJ.js}

@@ -4,32 +4,32 @@ import {
   handleTextMouseDown,
   handleTextMouseMove,
   handleTextMouseUp
-} from "./chunk-GQUZPON4.js";
+} from "./chunk-F56XUE5S.js";
 import {
   handleCodeMouseDown,
   handleCodeMouseMove,
   handleCodeMouseUp
-} from "./chunk-M6TMN76K.js";
+} from "./chunk-ULPIHUVC.js";
 import {
   handleMouseDownImage,
   handleMouseMoveImage,
   handleMouseUpImage
-} from "./chunk-LJR7EVW2.js";
+} from "./chunk-JEGLUNBC.js";
 import {
   handleMouseDownIcon,
   handleMouseMoveIcon,
   handleMouseUpIcon
-} from "./chunk-APTOPAOY.js";
+} from "./chunk-SSFEN5CY.js";
 import {
   handleMouseDown as handleMouseDown4,
   handleMouseMove as handleMouseMove4,
   handleMouseUp as handleMouseUp4
-} from "./chunk-LSHZYN77.js";
+} from "./chunk-2DZHO67H.js";
 import {
   handleMouseDown as handleMouseDown5,
   handleMouseMove as handleMouseMove5,
   handleMouseUp as handleMouseUp5
-} from "./chunk-XOWNCYE4.js";
+} from "./chunk-5NHJJJBZ.js";
 import {
   handleMultiSelectionMouseDown,
   handleMultiSelectionMouseMove,
@@ -37,25 +37,25 @@ import {
   isMultiSelecting,
   multiSelection,
   removeMultiSelectionRect
-} from "./chunk-K5RY4EV7.js";
+} from "./chunk-6GPWSPJF.js";
 import {
   Frame
-} from "./chunk-K5BG5MHY.js";
+} from "./chunk-ZNZAICWY.js";
 import {
   handleMouseDownRect,
   handleMouseMoveRect,
   handleMouseUpRect
-} from "./chunk-7CM5XQDN.js";
+} from "./chunk-G3DJQY65.js";
 import {
   handleMouseDown as handleMouseDown2,
   handleMouseMove as handleMouseMove2,
   handleMouseUp as handleMouseUp2
-} from "./chunk-XFL4R5ZF.js";
+} from "./chunk-OK4ROGMM.js";
 import {
   handleMouseDown as handleMouseDown3,
   handleMouseMove as handleMouseMove3,
   handleMouseUp as handleMouseUp3
-} from "./chunk-RGMDWLRJ.js";
+} from "./chunk-UEL2G6D2.js";
 import {
   normalizeWebEmbedUrl
 } from "./chunk-QZI4UIE5.js";
@@ -65,35 +65,16 @@ import {
   handleMouseDown,
   handleMouseMove,
   handleMouseUp
-} from "./chunk-XYUFEIZR.js";
+} from "./chunk-DWEFPKDO.js";
 import {
   pushCreateAction,
   pushFrameAttachmentAction,
   pushOptionsChangeAction
-} from "./chunk-6GPEWDRB.js";
+} from "./chunk-M7GAB24F.js";
 
-// src/tools/shapeRecognitionTool.js
-var SVG_NS = "http://www.w3.org/2000/svg";
-var MAX_POINTS = 96;
-var MIN_SCREEN_SAMPLE_PX = 4;
-var MIN_SHAPE_SIZE = 8;
-var drawing = false;
-var points = [];
-var previewPath = null;
-var previewFrame = 0;
-var latestPrediction = null;
-function getThemeStroke() {
-  return document.body?.classList.contains("theme-dark") ? "#f7f4ff" : "#211a33";
-}
-function getSVGPoint(event) {
-  const viewBox = svg.viewBox.baseVal;
-  const rect = svg.getBoundingClientRect();
-  return {
-    x: viewBox.x + (event.clientX - rect.left) / rect.width * viewBox.width,
-    y: viewBox.y + (event.clientY - rect.top) / rect.height * viewBox.height,
-    pressure: event.pressure || 0.5
-  };
-}
+// src/tools/shapeRecognition.js
+var MIN_SHAPE_SIZE2 = 8;
+var MAX_GESTURE_POINTS = 96;
 function distance(a, b) {
   return Math.hypot(b.x - a.x, b.y - a.y);
 }
@@ -119,8 +100,8 @@ function orientedBounds(sample, angle) {
       x: centerU * cos - centerV * sin,
       y: centerU * sin + centerV * cos
     },
-    width: Math.max(MIN_SHAPE_SIZE, maxU - minU),
-    height: Math.max(MIN_SHAPE_SIZE, maxV - minV),
+    width: Math.max(MIN_SHAPE_SIZE2, maxU - minU),
+    height: Math.max(MIN_SHAPE_SIZE2, maxV - minV),
     angle,
     minU,
     maxU,
@@ -164,7 +145,73 @@ function rectangleAngle(sample) {
   }
   return Math.atan2(y, x) / 4;
 }
+function pointToSegmentDistance(point, start2, end) {
+  const dx = end.x - start2.x;
+  const dy = end.y - start2.y;
+  const lengthSquared = dx * dx + dy * dy;
+  if (lengthSquared === 0) return distance(point, start2);
+  const amount = Math.max(0, Math.min(
+    1,
+    ((point.x - start2.x) * dx + (point.y - start2.y) * dy) / lengthSquared
+  ));
+  return Math.hypot(point.x - (start2.x + dx * amount), point.y - (start2.y + dy * amount));
+}
+function polygonError(sample, vertices, scale) {
+  let total = 0;
+  for (const point of sample) {
+    let nearest = Infinity;
+    for (let index = 0; index < vertices.length; index += 1) {
+      nearest = Math.min(nearest, pointToSegmentDistance(
+        point,
+        vertices[index],
+        vertices[(index + 1) % vertices.length]
+      ));
+    }
+    total += nearest;
+  }
+  return total / sample.length / Math.max(scale, MIN_SHAPE_SIZE2);
+}
+function polygonVertices(bounds, kind) {
+  const cos = Math.cos(bounds.angle);
+  const sin = Math.sin(bounds.angle);
+  const toWorld = (u, v) => ({
+    x: u * cos - v * sin,
+    y: u * sin + v * cos
+  });
+  const centerU = (bounds.minU + bounds.maxU) / 2;
+  const centerV = (bounds.minV + bounds.maxV) / 2;
+  const local = kind === "triangle" ? [[centerU, bounds.minV], [bounds.maxU, bounds.maxV], [bounds.minU, bounds.maxV]] : kind === "diamond" ? [[centerU, bounds.minV], [bounds.maxU, centerV], [centerU, bounds.maxV], [bounds.minU, centerV]] : [[bounds.minU, bounds.minV], [bounds.maxU, bounds.minV], [bounds.maxU, bounds.maxV], [bounds.minU, bounds.maxV]];
+  return local.map(([u, v]) => toWorld(u, v));
+}
+function trianglePrediction(sample, pathLength) {
+  const baseAngle = principalAngle(sample);
+  let best = null;
+  for (let turn = 0; turn < 4; turn += 1) {
+    const bounds = orientedBounds(sample, baseAngle + turn * Math.PI / 2);
+    const vertices = polygonVertices(bounds, "triangle");
+    const error = polygonError(sample, vertices, Math.hypot(bounds.width, bounds.height));
+    if (!best || error < best.error) best = { bounds, vertices, error };
+  }
+  if (!best || best.error > 0.045) return null;
+  return {
+    type: "triangle",
+    ...best.bounds,
+    vertices: best.vertices,
+    pathLength
+  };
+}
+function diamondPrediction(sample, pathLength) {
+  const bounds = orientedBounds(sample, principalAngle(sample));
+  const vertices = polygonVertices(bounds, "diamond");
+  const error = polygonError(sample, vertices, Math.hypot(bounds.width, bounds.height));
+  if (error > 0.035) return null;
+  return { type: "diamond", ...bounds, vertices, pathLength };
+}
 function closedShapePrediction(sample, pathLength) {
+  const triangle = trianglePrediction(sample, pathLength);
+  if (triangle) return triangle;
+  const fittedDiamond = diamondPrediction(sample, pathLength);
+  if (fittedDiamond) return fittedDiamond;
   const rectBounds = orientedBounds(sample, rectangleAngle(sample));
   const ellipseBounds = orientedBounds(sample, principalAngle(sample));
   let rectangleError = 0;
@@ -197,14 +244,29 @@ function closedShapePrediction(sample, pathLength) {
     return { type: "freehand", points: sample.map((point) => ({ ...point })), pathLength };
   }
   const bounds = rectangle ? rectBounds : ellipseBounds;
+  const normalizedAngle = Math.abs(Math.atan2(Math.sin(rectBounds.angle * 2), Math.cos(rectBounds.angle * 2)) / 2);
+  const diamond = rectangle && normalizedAngle >= Math.PI / 7;
   return {
-    type: rectangle ? "rectangle" : "circle",
+    type: diamond ? "diamond" : rectangle ? "rectangle" : "circle",
     ...bounds,
+    ...diamond ? { vertices: polygonVertices(rectBounds, "rectangle") } : {},
     pathLength
   };
 }
-function predictDrawnShape(sample) {
-  if (!Array.isArray(sample) || sample.length < 2) return null;
+function capGestureSample(sample, maxPoints = MAX_GESTURE_POINTS) {
+  if (!Array.isArray(sample) || sample.length <= maxPoints) return Array.isArray(sample) ? sample : [];
+  if (maxPoints <= 1) return sample.slice(0, Math.max(0, maxPoints));
+  const capped = [sample[0]];
+  const step = (sample.length - 1) / (maxPoints - 1);
+  for (let index = 1; index < maxPoints - 1; index += 1) {
+    capped.push(sample[Math.round(index * step)]);
+  }
+  capped.push(sample[sample.length - 1]);
+  return capped;
+}
+function predictDrawnShape(input) {
+  const sample = capGestureSample(input);
+  if (sample.length < 2) return null;
   const start2 = sample[0];
   let pathLength = 0;
   let farthestIndex = 1;
@@ -225,9 +287,9 @@ function predictDrawnShape(sample) {
     minY = Math.min(minY, sample[index].y);
     maxY = Math.max(maxY, sample[index].y);
   }
-  const diagonal = Math.max(MIN_SHAPE_SIZE, Math.hypot(maxX - minX, maxY - minY));
+  const diagonal = Math.max(MIN_SHAPE_SIZE2, Math.hypot(maxX - minX, maxY - minY));
   const end = sample[sample.length - 1];
-  const closed = sample.length >= 8 && distance(start2, end) <= diagonal * 0.28 && pathLength >= diagonal * 2.05;
+  const closed = sample.length >= 8 && distance(start2, end) <= diagonal * 0.28 && pathLength >= diagonal * 1.85;
   if (closed) return closedShapePrediction(sample, pathLength);
   const tip = sample[farthestIndex];
   let afterTipLength = 0;
@@ -248,11 +310,32 @@ function predictDrawnShape(sample) {
     type: arrow ? "arrow" : "line",
     start: { ...start2 },
     end: arrow ? { ...tip } : { ...end },
-    width: Math.max(MIN_SHAPE_SIZE, maxX - minX),
-    height: Math.max(MIN_SHAPE_SIZE, maxY - minY),
+    width: Math.max(MIN_SHAPE_SIZE2, maxX - minX),
+    height: Math.max(MIN_SHAPE_SIZE2, maxY - minY),
     pathLength
   };
 }
+
+// src/tools/shapeRecognitionTool.js
+var SVG_NS = "http://www.w3.org/2000/svg";
+var MIN_SCREEN_SAMPLE_PX = 4;
+var drawing = false;
+var points = [];
+var previewPath = null;
+var previewFrame = 0;
+var latestPrediction = null;
+function getThemeStroke() {
+  return document.body?.classList.contains("theme-dark") ? "#f7f4ff" : "#211a33";
+}
+function getSVGPoint(event) {
+  const viewBox = svg.viewBox.baseVal;
+  const rect = svg.getBoundingClientRect();
+  return {
+    x: viewBox.x + (event.clientX - rect.left) / rect.width * viewBox.width,
+    y: viewBox.y + (event.clientY - rect.top) / rect.height * viewBox.height,
+    pressure: event.pressure || 0.5
+  };
+}
 function rotatedPoint(center, x, y, angle) {
   const cos = Math.cos(angle);
   const sin = Math.sin(angle);
@@ -279,6 +362,12 @@ function pathForPrediction(prediction) {
     const rotation = prediction.angle * 180 / Math.PI;
     return `M ${start3.x} ${start3.y} A ${rx} ${ry} ${rotation} 1 0 ${opposite.x} ${opposite.y} A ${rx} ${ry} ${rotation} 1 0 ${start3.x} ${start3.y}`;
   }
+  if (prediction.type === "triangle" || prediction.type === "diamond") {
+    return prediction.vertices.reduce(
+      (path2, point, index) => `${path2}${index === 0 ? "M" : " L"} ${point.x} ${point.y}`,
+      ""
+    ) + " Z";
+  }
   if (prediction.type === "freehand") {
     if (!prediction.points.length) return "";
     return prediction.points.reduce((path2, point, index) => `${path2}${index === 0 ? "M" : " L"} ${point.x} ${point.y}`, "");
@@ -314,7 +403,7 @@ function renderPreview() {
   latestPrediction = predictDrawnShape(points);
   ensurePreview();
   previewPath.setAttribute("d", pathForPrediction(latestPrediction));
-  previewPath.setAttribute("fill", latestPrediction?.type === "rectangle" || latestPrediction?.type === "circle" ? "rgba(148, 148, 158, 0.06)" : "none");
+  previewPath.setAttribute("fill", ["rectangle", "circle", "triangle", "diamond"].includes(latestPrediction?.type) ? "rgba(148, 148, 158, 0.06)" : "none");
 }
 function schedulePreview() {
   if (!previewFrame) previewFrame = requestAnimationFrame(renderPreview);
@@ -371,6 +460,23 @@ function createPredictedShape(prediction) {
     );
     shape.rotation = prediction.angle * 180 / Math.PI;
     shape.draw();
+  } else if (prediction.type === "triangle" || prediction.type === "diamond") {
+    const polygonPoints = [...prediction.vertices, prediction.vertices[0]];
+    shape = new window.FreehandStroke(
+      polygonPoints.map((point) => [point.x, point.y, 0.5]),
+      {
+        stroke: "transparent",
+        fill: "transparent",
+        fillStyle: "none",
+        outlineStroke: style.stroke,
+        outlineWidth: style.strokeWidth,
+        closedFill: true,
+        strokeWidth: style.strokeWidth,
+        strokeStyle: style.outline,
+        roughness: 0
+      }
+    );
+    shape.recognizedShapeType = prediction.type;
   } else if (prediction.type === "freehand") {
     const brush = window.freehandToolSettings || {};
     shape = new window.FreehandStroke(
@@ -419,7 +525,7 @@ function handleShapeRecognitionMove(event) {
   const last = points[points.length - 1];
   const threshold = MIN_SCREEN_SAMPLE_PX / (window.currentZoom || 1);
   if (distance(last, point) < threshold) return;
-  if (points.length < MAX_POINTS) {
+  if (points.length < MAX_GESTURE_POINTS) {
     points.push(point);
   } else {
     points = [points[0], ...points.slice(2).filter((_, index) => index % 2 === 0), point];
@@ -460,7 +566,7 @@ function cancelShapeRecognition() {
 window.__cancelShapeRecognition = cancelShapeRecognition;
 
 // src/tools/paintBucketTool.js
-var CLOSED_SHAPES = /* @__PURE__ */ new Set(["rectangle", "circle"]);
+var OPTION_FILL_SHAPES = /* @__PURE__ */ new Set(["rectangle", "circle"]);
 window.paintBucketSettings = window.paintBucketSettings || {
   fillColor: "#A98DEB",
   fillStyle: "solid"
@@ -473,37 +579,84 @@ function getSVGPoint2(event) {
     y: viewBox.y + (event.clientY - rect.top) / rect.height * viewBox.height
   };
 }
-function findClosedShapeAt(x, y) {
+function isClosedFreehand(shape) {
+  if (shape?.shapeName !== "freehandStroke" || !Array.isArray(shape.points) || shape.points.length < 3) return false;
+  if (shape.options?.closedFill) return true;
+  const first = shape.points[0];
+  const last = shape.points[shape.points.length - 1];
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const point of shape.points) {
+    const x = Number(point[0]) || 0;
+    const y = Number(point[1]) || 0;
+    minX = Math.min(minX, x);
+    minY = Math.min(minY, y);
+    maxX = Math.max(maxX, x);
+    maxY = Math.max(maxY, y);
+  }
+  const diagonal = Math.hypot(maxX - minX, maxY - minY);
+  const closeDistance = Math.hypot(last[0] - first[0], last[1] - first[1]);
+  const tolerance = Math.max((shape.options?.strokeWidth || 2) * 2, Math.min(16, diagonal * 0.08));
+  return diagonal > 0 && closeDistance <= tolerance;
+}
+function isPaintBucketFillable(shape) {
+  return OPTION_FILL_SHAPES.has(shape?.shapeName) || shape?.shapeName === "frame" || isClosedFreehand(shape);
+}
+function findShapeAt(x, y) {
   for (let index = shapes.length - 1; index >= 0; index -= 1) {
     const shape = shapes[index];
-    if (!CLOSED_SHAPES.has(shape?.shapeName) || typeof shape.contains !== "function") continue;
+    if (typeof shape?.contains !== "function") continue;
     if (shape.contains(x, y)) return shape;
   }
   return null;
 }
-function handlePaintBucketDown(event) {
-  if (!window.isPaintBucketToolActive || event.button !== 0) return;
-  const { x, y } = getSVGPoint2(event);
-  const shape = findClosedShapeAt(x, y);
-  if (!shape) {
-    window.dispatchEvent(new CustomEvent("lixsketch:bucket-miss"));
-    return;
-  }
-  const settings = window.paintBucketSettings;
+function fillShape(shape, settings = window.paintBucketSettings) {
+  if (!isPaintBucketFillable(shape)) return false;
   const transparent = settings.fillStyle === "none" || settings.fillStyle === "transparent";
   const nextFill = transparent ? "transparent" : settings.fillColor;
   const nextStyle = transparent ? "none" : settings.fillStyle;
-  if (shape.options.fill === nextFill && shape.options.fillStyle === nextStyle) return;
+  if (shape.shapeName === "frame") {
+    if (shape.fillColor === nextFill && shape.fillStyle === nextStyle) return false;
+    const oldOptions2 = { ...shape.options, fillColor: shape.fillColor, fillStyle: shape.fillStyle };
+    const newOptions2 = { ...shape.options, fillColor: nextFill, fillStyle: nextStyle };
+    pushOptionsChangeAction(shape, oldOptions2, newOptions2);
+    shape.fillColor = nextFill;
+    shape.fillStyle = nextStyle;
+    shape.options = { ...shape.options, fillColor: nextFill, fillStyle: nextStyle };
+    shape.draw();
+    return true;
+  }
+  const freehandOptions = shape.shapeName === "freehandStroke" ? {
+    closedFill: true,
+    outlineStroke: shape.options.outlineStroke || shape.options.stroke
+  } : {};
+  if (shape.options.fill === nextFill && shape.options.fillStyle === nextStyle && Object.entries(freehandOptions).every(([key, value]) => shape.options[key] === value)) return false;
   const oldOptions = { ...shape.options };
-  const newOptions = { ...shape.options, fill: nextFill, fillStyle: nextStyle };
+  const newOptions = { ...shape.options, ...freehandOptions, fill: nextFill, fillStyle: nextStyle };
   pushOptionsChangeAction(shape, oldOptions, newOptions);
   shape.options = newOptions;
   shape.draw();
+  return true;
+}
+function handlePaintBucketDown(event) {
+  if (!window.isPaintBucketToolActive || event.button !== 0) return;
+  const { x, y } = getSVGPoint2(event);
+  const shape = findShapeAt(x, y);
+  if (!shape) {
+    window.dispatchEvent(new CustomEvent("lixsketch:bucket-miss"));
+    return;
+  }
+  if (!isPaintBucketFillable(shape)) {
+    window.dispatchEvent(new CustomEvent("lixsketch:bucket-not-fillable", {
+      detail: { shapeID: shape.shapeID, shapeType: shape.shapeName }
+    }));
+    return;
+  }
+  if (!fillShape(shape)) return;
   window.dispatchEvent(new CustomEvent("lixsketch:bucket-filled", { detail: { shapeID: shape.shapeID } }));
 }
 
 // src/tools/lassoTool.js
-var MAX_POINTS2 = 192;
+var MAX_POINTS = 192;
 var MIN_SAMPLE_PX = 4;
 var points2 = [];
 var preview = null;
@@ -575,7 +728,7 @@ function handleLassoMove(e) {
   const p = coords(e), last = points2[points2.length - 1];
   const min = MIN_SAMPLE_PX / (window.currentZoom || 1);
   if (Math.hypot(p.x - last.x, p.y - last.y) < min) return;
-  if (points2.length < MAX_POINTS2) points2.push(p);
+  if (points2.length < MAX_POINTS) points2.push(p);
   else points2[points2.length - 1] = p;
   preview?.setAttribute("d", `M ${points2.map((v) => `${v.x} ${v.y}`).join(" L ")} Z`);
 }
@@ -1094,4 +1247,4 @@ export {
   handleMainMouseUp,
   initEventDispatcher
 };
-//# sourceMappingURL=EventDispatcher-7LAK7GQ7.js.map
+//# sourceMappingURL=EventDispatcher-M5B4EWHJ.js.map