diff --git a/src/Handlers/ToolsHandler/assignUtil.js b/src/Handlers/ToolsHandler/assignUtil.js index fd00cb2..a4babc2 100644 --- a/src/Handlers/ToolsHandler/assignUtil.js +++ b/src/Handlers/ToolsHandler/assignUtil.js @@ -3,7 +3,6 @@ import { Circle, Font, Diamond, - Polygon, Cylinder, Arrow, Line, @@ -16,7 +15,6 @@ const toolFactory = { [TOOL_CONSTANTS.CIRCLE]: new Circle(), [TOOL_CONSTANTS.FONT]: new Font(), [TOOL_CONSTANTS.DIAMOND]: new Diamond(), - [TOOL_CONSTANTS.POLYGON]: new Polygon(), [TOOL_CONSTANTS.CYLINDER]: new Cylinder(), [TOOL_CONSTANTS.ARROW]: new Arrow(), [TOOL_CONSTANTS.LINE]: new Line(), diff --git a/src/Handlers/ToolsHandler/tools/index.js b/src/Handlers/ToolsHandler/tools/index.js index 32db75e..a9cac7a 100644 --- a/src/Handlers/ToolsHandler/tools/index.js +++ b/src/Handlers/ToolsHandler/tools/index.js @@ -2,7 +2,6 @@ export { Rectangle } from "./rectangle"; export { Circle } from "./circle"; export { Font } from "./font"; export { Diamond } from "./diamond"; -export { Polygon } from "./polygon"; export { Cylinder } from "./cylinder"; export { Arrow } from "./arrow"; export { Line } from "./line"; diff --git a/src/Handlers/ToolsHandler/tools/polygon.js b/src/Handlers/ToolsHandler/tools/polygon.js deleted file mode 100644 index 3bb1c03..0000000 --- a/src/Handlers/ToolsHandler/tools/polygon.js +++ /dev/null @@ -1,85 +0,0 @@ -import { fabric } from "fabric"; -import { Tool } from "../toolGeneric"; -import { resolveToolStyle } from "../toolStyle"; - -const SIDES = 6; -// Size used when the tool is clicked without dragging (like the other shapes -// that drop a default shape on a plain click). -const DEFAULT_RADIUS = 40; - -// Vertices of a regular polygon centred on (0, 0) with the given radius. -// Points are relative to the object's centre; position comes from left/top. -// Starts at the top so the shape reads upright as it is drawn. -const polygonPoints = (radius) => { - const points = []; - for (let i = 0; i < SIDES; i++) { - const angle = (Math.PI * 2 * i) / SIDES - Math.PI / 2; - points.push({ - x: radius * Math.cos(angle), - y: radius * Math.sin(angle), - }); - } - return points; -}; - -export class Polygon extends Tool { - constructor() { - super(); - this.origX = null; - this.origY = null; - this.pointer = null; - this.polygon = null; - } - - // Resize the polygon to the given radius, keeping its centre at the click - // point. _setPositionDimensions() recomputes width/height but resets - // left/top, so the centre is restored afterwards. - applyRadius(radius) { - this.polygon.set({ points: polygonPoints(radius) }); - this.polygon._setPositionDimensions({}); - this.polygon.set({ left: this.origX, top: this.origY }); - this.polygon.setCoords(); - } - - create(canvas, event) { - this.pointer = canvas.getPointer(event.e); - // The click point becomes the centre; the shape grows outward from it. - this.origX = this.pointer.x; - this.origY = this.pointer.y; - this.polygon = new fabric.Polygon(polygonPoints(1), { - left: this.origX, - top: this.origY, - originX: "center", - originY: "center", - ...resolveToolStyle(canvas), - objectCaching: false, // recompute the bounding box as it is dragged - selectable: true, - }); - canvas.add(this.polygon); - } - - draw(canvas, event) { - if (!this.polygon) { - return; - } - this.pointer = canvas.getPointer(event.e); - const radius = Math.max( - Math.hypot(this.pointer.x - this.origX, this.pointer.y - this.origY), - 1, - ); - this.applyRadius(radius); - } - - done() { - if (!this.polygon) { - return; - } - // A plain click (no real drag) leaves a near-zero shape — give it a - // sensible default size instead of dropping it, so click-to-create works - // as well as drag-to-size. - if (this.polygon.width < 5 || this.polygon.height < 5) { - this.applyRadius(DEFAULT_RADIUS); - } - this.polygon.setCoords(); - } -} diff --git a/src/components/CanvasEditor/PropertiesPanel/PropertiesPanel.jsx b/src/components/CanvasEditor/PropertiesPanel/PropertiesPanel.jsx index bd18bef..66c4e01 100644 --- a/src/components/CanvasEditor/PropertiesPanel/PropertiesPanel.jsx +++ b/src/components/CanvasEditor/PropertiesPanel/PropertiesPanel.jsx @@ -45,7 +45,6 @@ const STYLEABLE_TOOLS = new Set([ TOOL_CONSTANTS.RECTANGLE, TOOL_CONSTANTS.CIRCLE, TOOL_CONSTANTS.DIAMOND, - TOOL_CONSTANTS.POLYGON, TOOL_CONSTANTS.CYLINDER, TOOL_CONSTANTS.LINE, TOOL_CONSTANTS.ARROW, diff --git a/src/constants/IconTools.js b/src/constants/IconTools.js index 681996c..5c1ae5d 100644 --- a/src/constants/IconTools.js +++ b/src/constants/IconTools.js @@ -4,7 +4,6 @@ import { Square, Circle, Diamond, - Hexagon, Cylinder, Minus, ArrowRight, @@ -22,7 +21,6 @@ export const iconToolsMaps = [ { icon: Square, title: "Rectangle", id: TOOL_CONSTANTS.RECTANGLE }, { icon: Circle, title: "Circle", id: TOOL_CONSTANTS.CIRCLE }, { icon: Diamond, title: "Diamond", id: TOOL_CONSTANTS.DIAMOND }, - { icon: Hexagon, title: "Polygon", id: TOOL_CONSTANTS.POLYGON }, { icon: Cylinder, title: "Cylinder", id: TOOL_CONSTANTS.CYLINDER }, { icon: Minus, title: "Line", id: TOOL_CONSTANTS.LINE }, { icon: ArrowRight, title: "Arrow", id: TOOL_CONSTANTS.ARROW }, diff --git a/src/constants/tools.js b/src/constants/tools.js index db10376..6e5401b 100644 --- a/src/constants/tools.js +++ b/src/constants/tools.js @@ -9,7 +9,6 @@ export const TOOL_CONSTANTS = { IMAGE: "image", BACKGROUND_COLOR: "bgColors", DIAMOND: "diamond", - POLYGON: "polygon", CYLINDER: "cylinder", ERASER: "eraser", ICONS: "icons", @@ -56,10 +55,6 @@ export const TOOL_FUNCTIONS = { createOnClick: true, onMove: true, }, - [TOOL_CONSTANTS.POLYGON]: { - createOnClick: true, - onMove: true, - }, [TOOL_CONSTANTS.CYLINDER]: { createOnClick: true, onMove: true,