From 9df0200ce1d6d0323ac130669ddae09c0c0d8881 Mon Sep 17 00:00:00 2001 From: Amark19 Date: Mon, 24 Aug 2026 20:21:32 +0530 Subject: [PATCH] refactor: remove the hexagon (polygon) shape tool MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Drop the Polygon tool and its wiring (tool class, toolbar button, tool constants, factory, styleable list). The fabric.Polygon primitive stays — the Diamond tool and polygon-edge binding still use it. Co-Authored-By: Claude Opus 4.8 --- src/Handlers/ToolsHandler/assignUtil.js | 12 +-- src/Handlers/ToolsHandler/tools/index.js | 1 - src/Handlers/ToolsHandler/tools/polygon.js | 85 ------------------- .../PropertiesPanel/PropertiesPanel.jsx | 1 - src/constants/IconTools.js | 2 - src/constants/tools.js | 5 -- 6 files changed, 1 insertion(+), 105 deletions(-) delete mode 100644 src/Handlers/ToolsHandler/tools/polygon.js diff --git a/src/Handlers/ToolsHandler/assignUtil.js b/src/Handlers/ToolsHandler/assignUtil.js index 59452e6..274b7e1 100644 --- a/src/Handlers/ToolsHandler/assignUtil.js +++ b/src/Handlers/ToolsHandler/assignUtil.js @@ -1,13 +1,4 @@ -import { - Rectangle, - Circle, - Font, - Diamond, - Polygon, - Arrow, - Line, - Eraser, -} from "./tools"; +import { Rectangle, Circle, Font, Diamond, Arrow, Line, Eraser } from "./tools"; import { TOOL_CONSTANTS } from "../../constants"; const toolFactory = { @@ -15,7 +6,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.ARROW]: new Arrow(), [TOOL_CONSTANTS.LINE]: new Line(), [TOOL_CONSTANTS.ERASER]: new Eraser(), diff --git a/src/Handlers/ToolsHandler/tools/index.js b/src/Handlers/ToolsHandler/tools/index.js index 200dc75..7ed0374 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 { Arrow } from "./arrow"; export { Line } from "./line"; export { Eraser } from "./eraser"; 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 48d9756..b3a557c 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.LINE, TOOL_CONSTANTS.ARROW, TOOL_CONSTANTS.FONT, diff --git a/src/constants/IconTools.js b/src/constants/IconTools.js index 3522b67..b30c7b7 100644 --- a/src/constants/IconTools.js +++ b/src/constants/IconTools.js @@ -4,7 +4,6 @@ import { Square, Circle, Diamond, - Hexagon, Minus, ArrowRight, Type, @@ -21,7 +20,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: Minus, title: "Line", id: TOOL_CONSTANTS.LINE }, { icon: ArrowRight, title: "Arrow", id: TOOL_CONSTANTS.ARROW }, { icon: Type, title: "Text", id: TOOL_CONSTANTS.FONT }, diff --git a/src/constants/tools.js b/src/constants/tools.js index 2960ced..c29d83e 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", ERASER: "eraser", ICONS: "icons", }; @@ -55,10 +54,6 @@ export const TOOL_FUNCTIONS = { createOnClick: true, onMove: true, }, - [TOOL_CONSTANTS.POLYGON]: { - createOnClick: true, - onMove: true, - }, [TOOL_CONSTANTS.ERASER]: { createOnClick: true, onMove: true,