@nasser-sw/fabric 7.0.1-beta17 → 7.0.1-beta18

package/dist/package.json.min.mjs

@@ -1,2 +1,2 @@
-var a="7.0.1-beta16";export{a as version};
+var a="7.0.1-beta17";export{a as version};
 //# sourceMappingURL=package.json.min.mjs.map

package/dist/package.json.mjs

@@ -1,4 +1,4 @@
-var version = "7.0.1-beta16";
+var version = "7.0.1-beta17";
 
 export { version };
 //# sourceMappingURL=package.json.mjs.map

package/dist/src/LayoutManager/LayoutStrategies/FrameLayout.d.ts

@@ -0,0 +1,31 @@
+import { Point } from '../../Point';
+import type { FabricObject } from '../../shapes/Object/FabricObject';
+import { LayoutStrategy } from './LayoutStrategy';
+import type { LayoutStrategyResult, StrictLayoutContext } from '../types';
+/**
+ * FrameLayout is a layout strategy that maintains fixed dimensions
+ * regardless of the content inside the group.
+ *
+ * This is essential for Frame objects where:
+ * - The frame size should never change when images are added/removed
+ * - Content is clipped to the frame boundaries
+ * - The frame acts as a container with fixed dimensions
+ */
+export declare class FrameLayout extends LayoutStrategy {
+    static readonly type = "frame-layout";
+    /**
+     * Override to prevent layout recalculation on content changes.
+     * Only perform layout during initialization or imperative calls.
+     */
+    shouldPerformLayout({ type }: StrictLayoutContext): boolean;
+    /**
+     * Calculate the bounding box for frame objects.
+     * Returns the fixed frame dimensions instead of calculating from contents.
+     */
+    calcBoundingBox(objects: FabricObject[], context: StrictLayoutContext): LayoutStrategyResult | undefined;
+    /**
+     * Override to always return fixed frame dimensions during initialization.
+     */
+    getInitialSize(context: StrictLayoutContext, result: Pick<LayoutStrategyResult, 'center' | 'size'>): Point;
+}
+//# sourceMappingURL=FrameLayout.d.ts.map

package/dist/src/LayoutManager/LayoutStrategies/FrameLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FrameLayout.d.ts","sourceRoot":"","sources":["../../../../src/LayoutManager/LayoutStrategies/FrameLayout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAErE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAAK,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAG1E;;;;;;;;GAQG;AACH,qBAAa,WAAY,SAAQ,cAAc;IAC7C,MAAM,CAAC,QAAQ,CAAC,IAAI,kBAAkB;IAEtC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,IAAI,EAAE,EAAE,mBAAmB,GAAG,OAAO;IAM3D;;;OAGG;IACH,eAAe,CACb,OAAO,EAAE,YAAY,EAAE,EACvB,OAAO,EAAE,mBAAmB,GAC3B,oBAAoB,GAAG,SAAS;IA6BnC;;OAEG;IACH,cAAc,CACZ,OAAO,EAAE,mBAAmB,EAC5B,MAAM,EAAE,IAAI,CAAC,oBAAoB,EAAE,QAAQ,GAAG,MAAM,CAAC,GACpD,KAAK;CAMT"}

package/dist/src/LayoutManager/LayoutStrategies/FrameLayout.min.mjs

@@ -0,0 +1,2 @@
+import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.min.mjs";import{Point as t}from"../../Point.min.mjs";import{classRegistry as r}from"../../ClassRegistry.min.mjs";import{LayoutStrategy as i}from"./LayoutStrategy.min.mjs";import{LAYOUT_TYPE_INITIALIZATION as n}from"../constants.min.mjs";class o extends i{shouldPerformLayout(e){let{type:t}=e;return t===n}calcBoundingBox(e,r){var i,o,l,m;const{type:a,target:s}=r,u=null!==(i=null!==(o=s.frameWidth)&&void 0!==o?o:s.width)&&void 0!==i?i:200,d=null!==(l=null!==(m=s.frameHeight)&&void 0!==m?m:s.height)&&void 0!==l?l:200,f=new t(u,d);if(a===n){return{center:new t(0,0),size:f,relativeCorrection:new t(0,0)}}return{center:s.getRelativeCenterPoint(),size:f}}getInitialSize(e,r){var i,n,o,l;const{target:m}=e,a=null!==(i=null!==(n=m.frameWidth)&&void 0!==n?n:m.width)&&void 0!==i?i:200,s=null!==(o=null!==(l=m.frameHeight)&&void 0!==l?l:m.height)&&void 0!==o?o:200;return new t(a,s)}}e(o,"type","frame-layout"),r.setClass(o);export{o as FrameLayout};
+//# sourceMappingURL=FrameLayout.min.mjs.map

package/dist/src/LayoutManager/LayoutStrategies/FrameLayout.min.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FrameLayout.min.mjs","sources":["../../../../src/LayoutManager/LayoutStrategies/FrameLayout.ts"],"sourcesContent":["import { Point } from '../../Point';\r\nimport type { FabricObject } from '../../shapes/Object/FabricObject';\r\nimport { classRegistry } from '../../ClassRegistry';\r\nimport { LayoutStrategy } from './LayoutStrategy';\r\nimport type { LayoutStrategyResult, StrictLayoutContext } from '../types';\r\nimport { LAYOUT_TYPE_INITIALIZATION } from '../constants';\r\n\r\n/**\r\n * FrameLayout is a layout strategy that maintains fixed dimensions\r\n * regardless of the content inside the group.\r\n *\r\n * This is essential for Frame objects where:\r\n * - The frame size should never change when images are added/removed\r\n * - Content is clipped to the frame boundaries\r\n * - The frame acts as a container with fixed dimensions\r\n */\r\nexport class FrameLayout extends LayoutStrategy {\r\n  static readonly type = 'frame-layout';\r\n\r\n  /**\r\n   * Override to prevent layout recalculation on content changes.\r\n   * Only perform layout during initialization or imperative calls.\r\n   */\r\n  shouldPerformLayout({ type }: StrictLayoutContext): boolean {\r\n    // Only perform layout during initialization\r\n    // After that, the frame maintains its fixed size\r\n    return type === LAYOUT_TYPE_INITIALIZATION;\r\n  }\r\n\r\n  /**\r\n   * Calculate the bounding box for frame objects.\r\n   * Returns the fixed frame dimensions instead of calculating from contents.\r\n   */\r\n  calcBoundingBox(\r\n    objects: FabricObject[],\r\n    context: StrictLayoutContext\r\n  ): LayoutStrategyResult | undefined {\r\n    const { type, target } = context;\r\n\r\n    // Get fixed dimensions from frame properties\r\n    const frameWidth = (target as any).frameWidth ?? target.width ?? 200;\r\n    const frameHeight = (target as any).frameHeight ?? target.height ?? 200;\r\n\r\n    const size = new Point(frameWidth, frameHeight);\r\n\r\n    if (type === LAYOUT_TYPE_INITIALIZATION) {\r\n      // During initialization, use the frame's position or calculate center\r\n      const center = new Point(0, 0);\r\n\r\n      return {\r\n        center,\r\n        size,\r\n        relativeCorrection: new Point(0, 0),\r\n      };\r\n    }\r\n\r\n    // For any other layout triggers, return the fixed size\r\n    // This shouldn't normally be called due to shouldPerformLayout override\r\n    const center = target.getRelativeCenterPoint();\r\n    return {\r\n      center,\r\n      size,\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Override to always return fixed frame dimensions during initialization.\r\n   */\r\n  getInitialSize(\r\n    context: StrictLayoutContext,\r\n    result: Pick<LayoutStrategyResult, 'center' | 'size'>\r\n  ): Point {\r\n    const { target } = context;\r\n    const frameWidth = (target as any).frameWidth ?? target.width ?? 200;\r\n    const frameHeight = (target as any).frameHeight ?? target.height ?? 200;\r\n    return new Point(frameWidth, frameHeight);\r\n  }\r\n}\r\n\r\nclassRegistry.setClass(FrameLayout);\r\n"],"names":["FrameLayout","LayoutStrategy","shouldPerformLayout","_ref","type","LAYOUT_TYPE_INITIALIZATION","calcBoundingBox","objects","context","_ref2","_frameWidth","_ref3","_frameHeight","target","frameWidth","width","frameHeight","height","size","Point","center","relativeCorrection","getRelativeCenterPoint","getInitialSize","result","_ref4","_frameWidth2","_ref5","_frameHeight2","_defineProperty","classRegistry","setClass"],"mappings":"yTAgBO,MAAMA,UAAoBC,EAO/BC,mBAAAA,CAAmBC,GAAyC,IAAxCC,KAAEA,GAA2BD,EAG/C,OAAOC,IAASC,CAClB,CAMAC,eAAAA,CACEC,EACAC,GACkC,IAAAC,EAAAC,EAAAC,EAAAC,EAClC,MAAMR,KAAEA,EAAIS,OAAEA,GAAWL,EAGnBM,UAAUL,EAA6B,QAA7BC,EAAIG,EAAeC,sBAAUJ,EAAAA,EAAIG,EAAOE,aAAK,IAAAN,EAAAA,EAAI,IAC3DO,UAAWL,EAA8B,QAA9BC,EAAIC,EAAeG,uBAAWJ,EAAAA,EAAIC,EAAOI,cAAM,IAAAN,EAAAA,EAAI,IAE9DO,EAAO,IAAIC,EAAML,EAAYE,GAEnC,GAAIZ,IAASC,EAA4B,CAIvC,MAAO,CACLe,OAHa,IAAID,EAAM,EAAG,GAI1BD,OACAG,mBAAoB,IAAIF,EAAM,EAAG,GAErC,CAKA,MAAO,CACLC,OAFaP,EAAOS,yBAGpBJ,OAEJ,CAKAK,cAAAA,CACEf,EACAgB,GACO,IAAAC,EAAAC,EAAAC,EAAAC,EACP,MAAMf,OAAEA,GAAWL,EACbM,UAAUW,EAA6B,QAA7BC,EAAIb,EAAeC,sBAAUY,EAAAA,EAAIb,EAAOE,aAAK,IAAAU,EAAAA,EAAI,IAC3DT,UAAWW,EAA8B,QAA9BC,EAAIf,EAAeG,uBAAWY,EAAAA,EAAIf,EAAOI,cAAM,IAAAU,EAAAA,EAAI,IACpE,OAAO,IAAIR,EAAML,EAAYE,EAC/B,EACDa,EA7DY7B,EAAW,OACC,gBA8DzB8B,EAAcC,SAAS/B"}

package/dist/src/LayoutManager/LayoutStrategies/FrameLayout.mjs

@@ -0,0 +1,81 @@
+import { defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.mjs';
+import { Point } from '../../Point.mjs';
+import { classRegistry } from '../../ClassRegistry.mjs';
+import { LayoutStrategy } from './LayoutStrategy.mjs';
+import { LAYOUT_TYPE_INITIALIZATION } from '../constants.mjs';
+
+/**
+ * FrameLayout is a layout strategy that maintains fixed dimensions
+ * regardless of the content inside the group.
+ *
+ * This is essential for Frame objects where:
+ * - The frame size should never change when images are added/removed
+ * - Content is clipped to the frame boundaries
+ * - The frame acts as a container with fixed dimensions
+ */
+class FrameLayout extends LayoutStrategy {
+  /**
+   * Override to prevent layout recalculation on content changes.
+   * Only perform layout during initialization or imperative calls.
+   */
+  shouldPerformLayout(_ref) {
+    let {
+      type
+    } = _ref;
+    // Only perform layout during initialization
+    // After that, the frame maintains its fixed size
+    return type === LAYOUT_TYPE_INITIALIZATION;
+  }
+
+  /**
+   * Calculate the bounding box for frame objects.
+   * Returns the fixed frame dimensions instead of calculating from contents.
+   */
+  calcBoundingBox(objects, context) {
+    var _ref2, _frameWidth, _ref3, _frameHeight;
+    const {
+      type,
+      target
+    } = context;
+
+    // Get fixed dimensions from frame properties
+    const frameWidth = (_ref2 = (_frameWidth = target.frameWidth) !== null && _frameWidth !== void 0 ? _frameWidth : target.width) !== null && _ref2 !== void 0 ? _ref2 : 200;
+    const frameHeight = (_ref3 = (_frameHeight = target.frameHeight) !== null && _frameHeight !== void 0 ? _frameHeight : target.height) !== null && _ref3 !== void 0 ? _ref3 : 200;
+    const size = new Point(frameWidth, frameHeight);
+    if (type === LAYOUT_TYPE_INITIALIZATION) {
+      // During initialization, use the frame's position or calculate center
+      const center = new Point(0, 0);
+      return {
+        center,
+        size,
+        relativeCorrection: new Point(0, 0)
+      };
+    }
+
+    // For any other layout triggers, return the fixed size
+    // This shouldn't normally be called due to shouldPerformLayout override
+    const center = target.getRelativeCenterPoint();
+    return {
+      center,
+      size
+    };
+  }
+
+  /**
+   * Override to always return fixed frame dimensions during initialization.
+   */
+  getInitialSize(context, result) {
+    var _ref4, _frameWidth2, _ref5, _frameHeight2;
+    const {
+      target
+    } = context;
+    const frameWidth = (_ref4 = (_frameWidth2 = target.frameWidth) !== null && _frameWidth2 !== void 0 ? _frameWidth2 : target.width) !== null && _ref4 !== void 0 ? _ref4 : 200;
+    const frameHeight = (_ref5 = (_frameHeight2 = target.frameHeight) !== null && _frameHeight2 !== void 0 ? _frameHeight2 : target.height) !== null && _ref5 !== void 0 ? _ref5 : 200;
+    return new Point(frameWidth, frameHeight);
+  }
+}
+_defineProperty(FrameLayout, "type", 'frame-layout');
+classRegistry.setClass(FrameLayout);
+
+export { FrameLayout };
+//# sourceMappingURL=FrameLayout.mjs.map

package/dist/src/LayoutManager/LayoutStrategies/FrameLayout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FrameLayout.mjs","sources":["../../../../src/LayoutManager/LayoutStrategies/FrameLayout.ts"],"sourcesContent":["import { Point } from '../../Point';\r\nimport type { FabricObject } from '../../shapes/Object/FabricObject';\r\nimport { classRegistry } from '../../ClassRegistry';\r\nimport { LayoutStrategy } from './LayoutStrategy';\r\nimport type { LayoutStrategyResult, StrictLayoutContext } from '../types';\r\nimport { LAYOUT_TYPE_INITIALIZATION } from '../constants';\r\n\r\n/**\r\n * FrameLayout is a layout strategy that maintains fixed dimensions\r\n * regardless of the content inside the group.\r\n *\r\n * This is essential for Frame objects where:\r\n * - The frame size should never change when images are added/removed\r\n * - Content is clipped to the frame boundaries\r\n * - The frame acts as a container with fixed dimensions\r\n */\r\nexport class FrameLayout extends LayoutStrategy {\r\n  static readonly type = 'frame-layout';\r\n\r\n  /**\r\n   * Override to prevent layout recalculation on content changes.\r\n   * Only perform layout during initialization or imperative calls.\r\n   */\r\n  shouldPerformLayout({ type }: StrictLayoutContext): boolean {\r\n    // Only perform layout during initialization\r\n    // After that, the frame maintains its fixed size\r\n    return type === LAYOUT_TYPE_INITIALIZATION;\r\n  }\r\n\r\n  /**\r\n   * Calculate the bounding box for frame objects.\r\n   * Returns the fixed frame dimensions instead of calculating from contents.\r\n   */\r\n  calcBoundingBox(\r\n    objects: FabricObject[],\r\n    context: StrictLayoutContext\r\n  ): LayoutStrategyResult | undefined {\r\n    const { type, target } = context;\r\n\r\n    // Get fixed dimensions from frame properties\r\n    const frameWidth = (target as any).frameWidth ?? target.width ?? 200;\r\n    const frameHeight = (target as any).frameHeight ?? target.height ?? 200;\r\n\r\n    const size = new Point(frameWidth, frameHeight);\r\n\r\n    if (type === LAYOUT_TYPE_INITIALIZATION) {\r\n      // During initialization, use the frame's position or calculate center\r\n      const center = new Point(0, 0);\r\n\r\n      return {\r\n        center,\r\n        size,\r\n        relativeCorrection: new Point(0, 0),\r\n      };\r\n    }\r\n\r\n    // For any other layout triggers, return the fixed size\r\n    // This shouldn't normally be called due to shouldPerformLayout override\r\n    const center = target.getRelativeCenterPoint();\r\n    return {\r\n      center,\r\n      size,\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Override to always return fixed frame dimensions during initialization.\r\n   */\r\n  getInitialSize(\r\n    context: StrictLayoutContext,\r\n    result: Pick<LayoutStrategyResult, 'center' | 'size'>\r\n  ): Point {\r\n    const { target } = context;\r\n    const frameWidth = (target as any).frameWidth ?? target.width ?? 200;\r\n    const frameHeight = (target as any).frameHeight ?? target.height ?? 200;\r\n    return new Point(frameWidth, frameHeight);\r\n  }\r\n}\r\n\r\nclassRegistry.setClass(FrameLayout);\r\n"],"names":["FrameLayout","LayoutStrategy","shouldPerformLayout","_ref","type","LAYOUT_TYPE_INITIALIZATION","calcBoundingBox","objects","context","_ref2","_frameWidth","_ref3","_frameHeight","target","frameWidth","width","frameHeight","height","size","Point","center","relativeCorrection","getRelativeCenterPoint","getInitialSize","result","_ref4","_frameWidth2","_ref5","_frameHeight2","_defineProperty","classRegistry","setClass"],"mappings":";;;;;;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,WAAW,SAASC,cAAc,CAAC;AAG9C;AACF;AACA;AACA;EACEC,mBAAmBA,CAAAC,IAAA,EAAyC;IAAA,IAAxC;AAAEC,MAAAA;AAA0B,KAAC,GAAAD,IAAA;AAC/C;AACA;IACA,OAAOC,IAAI,KAAKC,0BAA0B;AAC5C,EAAA;;AAEA;AACF;AACA;AACA;AACEC,EAAAA,eAAeA,CACbC,OAAuB,EACvBC,OAA4B,EACM;AAAA,IAAA,IAAAC,KAAA,EAAAC,WAAA,EAAAC,KAAA,EAAAC,YAAA;IAClC,MAAM;MAAER,IAAI;AAAES,MAAAA;AAAO,KAAC,GAAGL,OAAO;;AAEhC;IACA,MAAMM,UAAU,IAAAL,KAAA,GAAA,CAAAC,WAAA,GAAIG,MAAM,CAASC,UAAU,MAAA,IAAA,IAAAJ,WAAA,cAAAA,WAAA,GAAIG,MAAM,CAACE,KAAK,cAAAN,KAAA,KAAA,MAAA,GAAAA,KAAA,GAAI,GAAG;IACpE,MAAMO,WAAW,IAAAL,KAAA,GAAA,CAAAC,YAAA,GAAIC,MAAM,CAASG,WAAW,MAAA,IAAA,IAAAJ,YAAA,cAAAA,YAAA,GAAIC,MAAM,CAACI,MAAM,cAAAN,KAAA,KAAA,MAAA,GAAAA,KAAA,GAAI,GAAG;IAEvE,MAAMO,IAAI,GAAG,IAAIC,KAAK,CAACL,UAAU,EAAEE,WAAW,CAAC;IAE/C,IAAIZ,IAAI,KAAKC,0BAA0B,EAAE;AACvC;MACA,MAAMe,MAAM,GAAG,IAAID,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;MAE9B,OAAO;QACLC,MAAM;QACNF,IAAI;AACJG,QAAAA,kBAAkB,EAAE,IAAIF,KAAK,CAAC,CAAC,EAAE,CAAC;OACnC;AACH,IAAA;;AAEA;AACA;AACA,IAAA,MAAMC,MAAM,GAAGP,MAAM,CAACS,sBAAsB,EAAE;IAC9C,OAAO;MACLF,MAAM;AACNF,MAAAA;KACD;AACH,EAAA;;AAEA;AACF;AACA;AACEK,EAAAA,cAAcA,CACZf,OAA4B,EAC5BgB,MAAqD,EAC9C;AAAA,IAAA,IAAAC,KAAA,EAAAC,YAAA,EAAAC,KAAA,EAAAC,aAAA;IACP,MAAM;AAAEf,MAAAA;AAAO,KAAC,GAAGL,OAAO;IAC1B,MAAMM,UAAU,IAAAW,KAAA,GAAA,CAAAC,YAAA,GAAIb,MAAM,CAASC,UAAU,MAAA,IAAA,IAAAY,YAAA,cAAAA,YAAA,GAAIb,MAAM,CAACE,KAAK,cAAAU,KAAA,KAAA,MAAA,GAAAA,KAAA,GAAI,GAAG;IACpE,MAAMT,WAAW,IAAAW,KAAA,GAAA,CAAAC,aAAA,GAAIf,MAAM,CAASG,WAAW,MAAA,IAAA,IAAAY,aAAA,cAAAA,aAAA,GAAIf,MAAM,CAACI,MAAM,cAAAU,KAAA,KAAA,MAAA,GAAAA,KAAA,GAAI,GAAG;AACvE,IAAA,OAAO,IAAIR,KAAK,CAACL,UAAU,EAAEE,WAAW,CAAC;AAC3C,EAAA;AACF;AAACa,eAAA,CA7DY7B,WAAW,EAAA,MAAA,EACC,cAAc,CAAA;AA8DvC8B,aAAa,CAACC,QAAQ,CAAC/B,WAAW,CAAC;;;;"}

package/dist/src/LayoutManager/index.d.ts

@@ -2,6 +2,7 @@ export * from './LayoutManager';
 export * from './LayoutStrategies/ClipPathLayout';
 export * from './LayoutStrategies/FitContentLayout';
 export * from './LayoutStrategies/FixedLayout';
+export * from './LayoutStrategies/FrameLayout';
 export * from './LayoutStrategies/LayoutStrategy';
 export type * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/LayoutManager/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/LayoutManager/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,mCAAmC,CAAC;AAClD,mBAAmB,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/LayoutManager/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,mCAAmC,CAAC;AAClD,mBAAmB,SAAS,CAAC"}

package/dist/src/controls/commonControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"commonControls.d.ts","sourceRoot":"","sources":["../../../src/controls/commonControls.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAWpC,eAAO,MAAM,2BAA2B;;;;;;;;;;CAsEtC,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;CAe/B,CAAC;AAEH,eAAO,MAAM,4BAA4B;;;;;;;;CAQxC,CAAC"}
+{"version":3,"file":"commonControls.d.ts","sourceRoot":"","sources":["../../../src/controls/commonControls.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAepC,eAAO,MAAM,2BAA2B;;;;;;;;;;CAkFtC,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;CAqB/B,CAAC;AAEH,eAAO,MAAM,4BAA4B;;;;;;;;CAQxC,CAAC"}

package/dist/src/controls/commonControls.mjs

@@ -1,6 +1,7 @@
 import { ROTATE, RESIZING } from '../constants.mjs';
 import { changeWidth } from './changeWidth.mjs';
 import { Control } from './Control.mjs';
+import { renderVerticalPillControl, renderHorizontalPillControl } from './controlRendering.mjs';
 import { rotationStyleHandler, rotationWithSnapping } from './rotate.mjs';
 import { scalingEqually, scaleCursorStyleHandler } from './scale.mjs';
 import { scaleOrSkewActionName, scalingYOrSkewingX, scaleSkewCursorStyleHandler, scalingXOrSkewingY } from './scaleSkew.mjs';
@@ -12,28 +13,40 @@ const createObjectDefaultControls = () => ({
     y: 0,
     cursorStyleHandler: scaleSkewCursorStyleHandler,
     actionHandler: scalingXOrSkewingY,
-    getActionName: scaleOrSkewActionName
+    getActionName: scaleOrSkewActionName,
+    render: renderHorizontalPillControl,
+    sizeX: 6,
+    sizeY: 20
   }),
   mr: new Control({
     x: 0.5,
     y: 0,
     cursorStyleHandler: scaleSkewCursorStyleHandler,
     actionHandler: scalingXOrSkewingY,
-    getActionName: scaleOrSkewActionName
+    getActionName: scaleOrSkewActionName,
+    render: renderHorizontalPillControl,
+    sizeX: 6,
+    sizeY: 20
   }),
   mb: new Control({
     x: 0,
     y: 0.5,
     cursorStyleHandler: scaleSkewCursorStyleHandler,
     actionHandler: scalingYOrSkewingX,
-    getActionName: scaleOrSkewActionName
+    getActionName: scaleOrSkewActionName,
+    render: renderVerticalPillControl,
+    sizeX: 20,
+    sizeY: 6
   }),
   mt: new Control({
     x: 0,
     y: -0.5,
     cursorStyleHandler: scaleSkewCursorStyleHandler,
     actionHandler: scalingYOrSkewingX,
-    getActionName: scaleOrSkewActionName
+    getActionName: scaleOrSkewActionName,
+    render: renderVerticalPillControl,
+    sizeX: 20,
+    sizeY: 6
   }),
   tl: new Control({
     x: -0.5,
@@ -75,14 +88,20 @@ const createResizeControls = () => ({
     y: 0,
     actionHandler: changeWidth,
     cursorStyleHandler: scaleSkewCursorStyleHandler,
-    actionName: RESIZING
+    actionName: RESIZING,
+    render: renderHorizontalPillControl,
+    sizeX: 6,
+    sizeY: 20
   }),
   ml: new Control({
     x: -0.5,
     y: 0,
     actionHandler: changeWidth,
     cursorStyleHandler: scaleSkewCursorStyleHandler,
-    actionName: RESIZING
+    actionName: RESIZING,
+    render: renderHorizontalPillControl,
+    sizeX: 6,
+    sizeY: 20
   })
 });
 const createTextboxDefaultControls = () => {

package/dist/src/controls/commonControls.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"commonControls.mjs","sources":["../../../src/controls/commonControls.ts"],"sourcesContent":["import { RESIZING, ROTATE } from '../constants';\r\nimport { changeWidth } from './changeWidth';\r\nimport { changeHeight } from './changeHeight';\r\nimport { Control } from './Control';\r\nimport { rotationStyleHandler, rotationWithSnapping } from './rotate';\r\nimport { scaleCursorStyleHandler, scalingEqually } from './scale';\r\nimport {\r\n  scaleOrSkewActionName,\r\n  scaleSkewCursorStyleHandler,\r\n  scalingXOrSkewingY,\r\n  scalingYOrSkewingX,\r\n} from './scaleSkew';\r\n\r\n// use this function if you want to generate new controls for every instance\r\nexport const createObjectDefaultControls = () => ({\r\n  ml: new Control({\r\n    x: -0.5,\r\n    y: 0,\r\n    cursorStyleHandler: scaleSkewCursorStyleHandler,\r\n    actionHandler: scalingXOrSkewingY,\r\n    getActionName: scaleOrSkewActionName,\r\n  }),\r\n\r\n  mr: new Control({\r\n    x: 0.5,\r\n    y: 0,\r\n    cursorStyleHandler: scaleSkewCursorStyleHandler,\r\n    actionHandler: scalingXOrSkewingY,\r\n    getActionName: scaleOrSkewActionName,\r\n  }),\r\n\r\n  mb: new Control({\r\n    x: 0,\r\n    y: 0.5,\r\n    cursorStyleHandler: scaleSkewCursorStyleHandler,\r\n    actionHandler: scalingYOrSkewingX,\r\n    getActionName: scaleOrSkewActionName,\r\n  }),\r\n\r\n  mt: new Control({\r\n    x: 0,\r\n    y: -0.5,\r\n    cursorStyleHandler: scaleSkewCursorStyleHandler,\r\n    actionHandler: scalingYOrSkewingX,\r\n    getActionName: scaleOrSkewActionName,\r\n  }),\r\n\r\n  tl: new Control({\r\n    x: -0.5,\r\n    y: -0.5,\r\n    cursorStyleHandler: scaleCursorStyleHandler,\r\n    actionHandler: scalingEqually,\r\n  }),\r\n\r\n  tr: new Control({\r\n    x: 0.5,\r\n    y: -0.5,\r\n    cursorStyleHandler: scaleCursorStyleHandler,\r\n    actionHandler: scalingEqually,\r\n  }),\r\n\r\n  bl: new Control({\r\n    x: -0.5,\r\n    y: 0.5,\r\n    cursorStyleHandler: scaleCursorStyleHandler,\r\n    actionHandler: scalingEqually,\r\n  }),\r\n\r\n  br: new Control({\r\n    x: 0.5,\r\n    y: 0.5,\r\n    cursorStyleHandler: scaleCursorStyleHandler,\r\n    actionHandler: scalingEqually,\r\n  }),\r\n\r\n  mtr: new Control({\r\n    x: 0,\r\n    y: -0.5,\r\n    actionHandler: rotationWithSnapping,\r\n    cursorStyleHandler: rotationStyleHandler,\r\n    offsetY: -40,\r\n    withConnection: true,\r\n    actionName: ROTATE,\r\n  }),\r\n});\r\n\r\nexport const createResizeControls = () => ({\r\n  mr: new Control({\r\n    x: 0.5,\r\n    y: 0,\r\n    actionHandler: changeWidth,\r\n    cursorStyleHandler: scaleSkewCursorStyleHandler,\r\n    actionName: RESIZING,\r\n  }),\r\n  ml: new Control({\r\n    x: -0.5,\r\n    y: 0,\r\n    actionHandler: changeWidth,\r\n    cursorStyleHandler: scaleSkewCursorStyleHandler,\r\n    actionName: RESIZING,\r\n  }),\r\n});\r\n\r\nexport const createTextboxDefaultControls = () => {\r\n  const { mt, mb, ...controls } = {\r\n    ...createObjectDefaultControls(),\r\n    ...createResizeControls(),\r\n  };\r\n  // Exclude mt and mb controls - textbox height is auto-calculated based on content\r\n  // Only width can be manually adjusted, height adjusts automatically for text wrapping\r\n  return controls;\r\n};\r\n"],"names":["createObjectDefaultControls","ml","Control","x","y","cursorStyleHandler","scaleSkewCursorStyleHandler","actionHandler","scalingXOrSkewingY","getActionName","scaleOrSkewActionName","mr","mb","scalingYOrSkewingX","mt","tl","scaleCursorStyleHandler","scalingEqually","tr","bl","br","mtr","rotationWithSnapping","rotationStyleHandler","offsetY","withConnection","actionName","ROTATE","createResizeControls","changeWidth","RESIZING","createTextboxDefaultControls","controls"],"mappings":"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"}
+{"version":3,"file":"commonControls.mjs","sources":["../../../src/controls/commonControls.ts"],"sourcesContent":["import { RESIZING, ROTATE } from '../constants';\r\nimport { changeWidth } from './changeWidth';\r\nimport { changeHeight } from './changeHeight';\r\nimport { Control } from './Control';\r\nimport {\r\n  renderHorizontalPillControl,\r\n  renderVerticalPillControl,\r\n} from './controlRendering';\r\nimport { rotationStyleHandler, rotationWithSnapping } from './rotate';\r\nimport { scaleCursorStyleHandler, scalingEqually } from './scale';\r\nimport {\r\n  scaleOrSkewActionName,\r\n  scaleSkewCursorStyleHandler,\r\n  scalingXOrSkewingY,\r\n  scalingYOrSkewingX,\r\n} from './scaleSkew';\r\n\r\n// use this function if you want to generate new controls for every instance\r\nexport const createObjectDefaultControls = () => ({\r\n  ml: new Control({\r\n    x: -0.5,\r\n    y: 0,\r\n    cursorStyleHandler: scaleSkewCursorStyleHandler,\r\n    actionHandler: scalingXOrSkewingY,\r\n    getActionName: scaleOrSkewActionName,\r\n    render: renderHorizontalPillControl,\r\n    sizeX: 6,\r\n    sizeY: 20,\r\n  }),\r\n\r\n  mr: new Control({\r\n    x: 0.5,\r\n    y: 0,\r\n    cursorStyleHandler: scaleSkewCursorStyleHandler,\r\n    actionHandler: scalingXOrSkewingY,\r\n    getActionName: scaleOrSkewActionName,\r\n    render: renderHorizontalPillControl,\r\n    sizeX: 6,\r\n    sizeY: 20,\r\n  }),\r\n\r\n  mb: new Control({\r\n    x: 0,\r\n    y: 0.5,\r\n    cursorStyleHandler: scaleSkewCursorStyleHandler,\r\n    actionHandler: scalingYOrSkewingX,\r\n    getActionName: scaleOrSkewActionName,\r\n    render: renderVerticalPillControl,\r\n    sizeX: 20,\r\n    sizeY: 6,\r\n  }),\r\n\r\n  mt: new Control({\r\n    x: 0,\r\n    y: -0.5,\r\n    cursorStyleHandler: scaleSkewCursorStyleHandler,\r\n    actionHandler: scalingYOrSkewingX,\r\n    getActionName: scaleOrSkewActionName,\r\n    render: renderVerticalPillControl,\r\n    sizeX: 20,\r\n    sizeY: 6,\r\n  }),\r\n\r\n  tl: new Control({\r\n    x: -0.5,\r\n    y: -0.5,\r\n    cursorStyleHandler: scaleCursorStyleHandler,\r\n    actionHandler: scalingEqually,\r\n  }),\r\n\r\n  tr: new Control({\r\n    x: 0.5,\r\n    y: -0.5,\r\n    cursorStyleHandler: scaleCursorStyleHandler,\r\n    actionHandler: scalingEqually,\r\n  }),\r\n\r\n  bl: new Control({\r\n    x: -0.5,\r\n    y: 0.5,\r\n    cursorStyleHandler: scaleCursorStyleHandler,\r\n    actionHandler: scalingEqually,\r\n  }),\r\n\r\n  br: new Control({\r\n    x: 0.5,\r\n    y: 0.5,\r\n    cursorStyleHandler: scaleCursorStyleHandler,\r\n    actionHandler: scalingEqually,\r\n  }),\r\n\r\n  mtr: new Control({\r\n    x: 0,\r\n    y: -0.5,\r\n    actionHandler: rotationWithSnapping,\r\n    cursorStyleHandler: rotationStyleHandler,\r\n    offsetY: -40,\r\n    withConnection: true,\r\n    actionName: ROTATE,\r\n  }),\r\n});\r\n\r\nexport const createResizeControls = () => ({\r\n  mr: new Control({\r\n    x: 0.5,\r\n    y: 0,\r\n    actionHandler: changeWidth,\r\n    cursorStyleHandler: scaleSkewCursorStyleHandler,\r\n    actionName: RESIZING,\r\n    render: renderHorizontalPillControl,\r\n    sizeX: 6,\r\n    sizeY: 20,\r\n  }),\r\n  ml: new Control({\r\n    x: -0.5,\r\n    y: 0,\r\n    actionHandler: changeWidth,\r\n    cursorStyleHandler: scaleSkewCursorStyleHandler,\r\n    actionName: RESIZING,\r\n    render: renderHorizontalPillControl,\r\n    sizeX: 6,\r\n    sizeY: 20,\r\n  }),\r\n});\r\n\r\nexport const createTextboxDefaultControls = () => {\r\n  const { mt, mb, ...controls } = {\r\n    ...createObjectDefaultControls(),\r\n    ...createResizeControls(),\r\n  };\r\n  // Exclude mt and mb controls - textbox height is auto-calculated based on content\r\n  // Only width can be manually adjusted, height adjusts automatically for text wrapping\r\n  return controls;\r\n};\r\n"],"names":["createObjectDefaultControls","ml","Control","x","y","cursorStyleHandler","scaleSkewCursorStyleHandler","actionHandler","scalingXOrSkewingY","getActionName","scaleOrSkewActionName","render","renderHorizontalPillControl","sizeX","sizeY","mr","mb","scalingYOrSkewingX","renderVerticalPillControl","mt","tl","scaleCursorStyleHandler","scalingEqually","tr","bl","br","mtr","rotationWithSnapping","rotationStyleHandler","offsetY","withConnection","actionName","ROTATE","createResizeControls","changeWidth","RESIZING","createTextboxDefaultControls","controls"],"mappings":";;;;;;;;AAiBA;AACO,MAAMA,2BAA2B,GAAGA,OAAO;EAChDC,EAAE,EAAE,IAAIC,OAAO,CAAC;IACdC,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,CAAC;AACJC,IAAAA,kBAAkB,EAAEC,2BAA2B;AAC/CC,IAAAA,aAAa,EAAEC,kBAAkB;AACjCC,IAAAA,aAAa,EAAEC,qBAAqB;AACpCC,IAAAA,MAAM,EAAEC,2BAA2B;AACnCC,IAAAA,KAAK,EAAE,CAAC;AACRC,IAAAA,KAAK,EAAE;AACT,GAAC,CAAC;EAEFC,EAAE,EAAE,IAAIb,OAAO,CAAC;AACdC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE,CAAC;AACJC,IAAAA,kBAAkB,EAAEC,2BAA2B;AAC/CC,IAAAA,aAAa,EAAEC,kBAAkB;AACjCC,IAAAA,aAAa,EAAEC,qBAAqB;AACpCC,IAAAA,MAAM,EAAEC,2BAA2B;AACnCC,IAAAA,KAAK,EAAE,CAAC;AACRC,IAAAA,KAAK,EAAE;AACT,GAAC,CAAC;EAEFE,EAAE,EAAE,IAAId,OAAO,CAAC;AACdC,IAAAA,CAAC,EAAE,CAAC;AACJC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,kBAAkB,EAAEC,2BAA2B;AAC/CC,IAAAA,aAAa,EAAEU,kBAAkB;AACjCR,IAAAA,aAAa,EAAEC,qBAAqB;AACpCC,IAAAA,MAAM,EAAEO,yBAAyB;AACjCL,IAAAA,KAAK,EAAE,EAAE;AACTC,IAAAA,KAAK,EAAE;AACT,GAAC,CAAC;EAEFK,EAAE,EAAE,IAAIjB,OAAO,CAAC;AACdC,IAAAA,CAAC,EAAE,CAAC;IACJC,CAAC,EAAE,IAAI;AACPC,IAAAA,kBAAkB,EAAEC,2BAA2B;AAC/CC,IAAAA,aAAa,EAAEU,kBAAkB;AACjCR,IAAAA,aAAa,EAAEC,qBAAqB;AACpCC,IAAAA,MAAM,EAAEO,yBAAyB;AACjCL,IAAAA,KAAK,EAAE,EAAE;AACTC,IAAAA,KAAK,EAAE;AACT,GAAC,CAAC;EAEFM,EAAE,EAAE,IAAIlB,OAAO,CAAC;IACdC,CAAC,EAAE,IAAI;IACPC,CAAC,EAAE,IAAI;AACPC,IAAAA,kBAAkB,EAAEgB,uBAAuB;AAC3Cd,IAAAA,aAAa,EAAEe;AACjB,GAAC,CAAC;EAEFC,EAAE,EAAE,IAAIrB,OAAO,CAAC;AACdC,IAAAA,CAAC,EAAE,GAAG;IACNC,CAAC,EAAE,IAAI;AACPC,IAAAA,kBAAkB,EAAEgB,uBAAuB;AAC3Cd,IAAAA,aAAa,EAAEe;AACjB,GAAC,CAAC;EAEFE,EAAE,EAAE,IAAItB,OAAO,CAAC;IACdC,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,kBAAkB,EAAEgB,uBAAuB;AAC3Cd,IAAAA,aAAa,EAAEe;AACjB,GAAC,CAAC;EAEFG,EAAE,EAAE,IAAIvB,OAAO,CAAC;AACdC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,kBAAkB,EAAEgB,uBAAuB;AAC3Cd,IAAAA,aAAa,EAAEe;AACjB,GAAC,CAAC;EAEFI,GAAG,EAAE,IAAIxB,OAAO,CAAC;AACfC,IAAAA,CAAC,EAAE,CAAC;IACJC,CAAC,EAAE,IAAI;AACPG,IAAAA,aAAa,EAAEoB,oBAAoB;AACnCtB,IAAAA,kBAAkB,EAAEuB,oBAAoB;IACxCC,OAAO,EAAE,GAAG;AACZC,IAAAA,cAAc,EAAE,IAAI;AACpBC,IAAAA,UAAU,EAAEC;GACb;AACH,CAAC;AAEM,MAAMC,oBAAoB,GAAGA,OAAO;EACzClB,EAAE,EAAE,IAAIb,OAAO,CAAC;AACdC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE,CAAC;AACJG,IAAAA,aAAa,EAAE2B,WAAW;AAC1B7B,IAAAA,kBAAkB,EAAEC,2BAA2B;AAC/CyB,IAAAA,UAAU,EAAEI,QAAQ;AACpBxB,IAAAA,MAAM,EAAEC,2BAA2B;AACnCC,IAAAA,KAAK,EAAE,CAAC;AACRC,IAAAA,KAAK,EAAE;AACT,GAAC,CAAC;EACFb,EAAE,EAAE,IAAIC,OAAO,CAAC;IACdC,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,CAAC;AACJG,IAAAA,aAAa,EAAE2B,WAAW;AAC1B7B,IAAAA,kBAAkB,EAAEC,2BAA2B;AAC/CyB,IAAAA,UAAU,EAAEI,QAAQ;AACpBxB,IAAAA,MAAM,EAAEC,2BAA2B;AACnCC,IAAAA,KAAK,EAAE,CAAC;AACRC,IAAAA,KAAK,EAAE;GACR;AACH,CAAC;AAEM,MAAMsB,4BAA4B,GAAGA,MAAM;EAChD,MAAM;IAAEjB,EAAE;IAAEH,EAAE;IAAE,GAAGqB;AAAS,GAAC,GAAG;IAC9B,GAAGrC,2BAA2B,EAAE;AAChC,IAAA,GAAGiC,oBAAoB;GACxB;AACD;AACA;AACA,EAAA,OAAOI,QAAQ;AACjB;;;;"}

package/dist/src/controls/controlRendering.d.ts

@@ -26,4 +26,24 @@ export declare function renderCircleControl(this: Control, ctx: CanvasRenderingC
  * @param {FabricObject} fabricObject the fabric object for which we are rendering controls
  */
 export declare function renderSquareControl(this: Control, ctx: CanvasRenderingContext2D, left: number, top: number, styleOverride: ControlRenderingStyleOverride, fabricObject: InteractiveFabricObject): void;
+/**
+ * Render a horizontal pill control (for left/right side handles).
+ * Modern Canva-style appearance.
+ * @param {CanvasRenderingContext2D} ctx context to render on
+ * @param {Number} left x coordinate where the control center should be
+ * @param {Number} top y coordinate where the control center should be
+ * @param {Object} styleOverride override for FabricObject controls style
+ * @param {FabricObject} fabricObject the fabric object for which we are rendering controls
+ */
+export declare function renderHorizontalPillControl(this: Control, ctx: CanvasRenderingContext2D, left: number, top: number, styleOverride: ControlRenderingStyleOverride, fabricObject: InteractiveFabricObject): void;
+/**
+ * Render a vertical pill control (for top/bottom side handles).
+ * Modern Canva-style appearance.
+ * @param {CanvasRenderingContext2D} ctx context to render on
+ * @param {Number} left x coordinate where the control center should be
+ * @param {Number} top y coordinate where the control center should be
+ * @param {Object} styleOverride override for FabricObject controls style
+ * @param {FabricObject} fabricObject the fabric object for which we are rendering controls
+ */
+export declare function renderVerticalPillControl(this: Control, ctx: CanvasRenderingContext2D, left: number, top: number, styleOverride: ControlRenderingStyleOverride, fabricObject: InteractiveFabricObject): void;
 //# sourceMappingURL=controlRendering.d.ts.map

package/dist/src/controls/controlRendering.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"controlRendering.d.ts","sourceRoot":"","sources":["../../../src/controls/controlRendering.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AAElF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEzC,MAAM,MAAM,6BAA6B,GAAG,OAAO,CACjD,IAAI,CACF,uBAAuB,EACrB,aAAa,GACb,YAAY,GACZ,aAAa,GACb,mBAAmB,GACnB,iBAAiB,GACjB,oBAAoB,CACvB,CACF,CAAC;AAEF,MAAM,MAAM,eAAe,CACzB,CAAC,SAAS,uBAAuB,GAAG,uBAAuB,IACzD,CACF,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,EACX,aAAa,EAAE,6BAA6B,EAC5C,YAAY,EAAE,CAAC,KACZ,IAAI,CAAC;AAEV;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,OAAO,EACb,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,EACX,aAAa,EAAE,6BAA6B,EAC5C,YAAY,EAAE,uBAAuB,QAwCtC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,OAAO,EACb,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,EACX,aAAa,EAAE,6BAA6B,EAC5C,YAAY,EAAE,uBAAuB,QAgCtC"}
+{"version":3,"file":"controlRendering.d.ts","sourceRoot":"","sources":["../../../src/controls/controlRendering.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AAElF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AASzC,MAAM,MAAM,6BAA6B,GAAG,OAAO,CACjD,IAAI,CACF,uBAAuB,EACrB,aAAa,GACb,YAAY,GACZ,aAAa,GACb,mBAAmB,GACnB,iBAAiB,GACjB,oBAAoB,CACvB,CACF,CAAC;AAEF,MAAM,MAAM,eAAe,CACzB,CAAC,SAAS,uBAAuB,GAAG,uBAAuB,IACzD,CACF,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,EACX,aAAa,EAAE,6BAA6B,EAC5C,YAAY,EAAE,CAAC,KACZ,IAAI,CAAC;AAEV;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,OAAO,EACb,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,EACX,aAAa,EAAE,6BAA6B,EAC5C,YAAY,EAAE,uBAAuB,QAwCtC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,OAAO,EACb,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,EACX,aAAa,EAAE,6BAA6B,EAC5C,YAAY,EAAE,uBAAuB,QAgCtC;AAED;;;;;;;;GAQG;AACH,wBAAgB,2BAA2B,CACzC,IAAI,EAAE,OAAO,EACb,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,EACX,aAAa,EAAE,6BAA6B,EAC5C,YAAY,EAAE,uBAAuB,QAqBtC;AAED;;;;;;;;GAQG;AACH,wBAAgB,yBAAyB,CACvC,IAAI,EAAE,OAAO,EACb,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,EACX,aAAa,EAAE,6BAA6B,EAC5C,YAAY,EAAE,uBAAuB,QAqBtC"}

package/dist/src/controls/controlRendering.mjs

@@ -1,6 +1,12 @@
 import { STROKE, FILL, twoMathPi } from '../constants.mjs';
 import { degreesToRadians } from '../util/misc/radiansDegreesConversion.mjs';
 
+/**
+ * Pill dimensions for side controls (Canva-style)
+ */
+const PILL_WIDTH = 6;
+const PILL_HEIGHT = 20;
+const PILL_RADIUS = 3;
 /**
  * Render a round control, as per fabric features.
  * This function is written to respect object properties like transparentCorners, cornerSize
@@ -83,5 +89,61 @@ function renderSquareControl(ctx, left, top, styleOverride, fabricObject) {
   ctx.restore();
 }
 
-export { renderCircleControl, renderSquareControl };
+/**
+ * Render a horizontal pill control (for left/right side handles).
+ * Modern Canva-style appearance.
+ * @param {CanvasRenderingContext2D} ctx context to render on
+ * @param {Number} left x coordinate where the control center should be
+ * @param {Number} top y coordinate where the control center should be
+ * @param {Object} styleOverride override for FabricObject controls style
+ * @param {FabricObject} fabricObject the fabric object for which we are rendering controls
+ */
+function renderHorizontalPillControl(ctx, left, top, styleOverride, fabricObject) {
+  styleOverride = styleOverride || {};
+  const width = PILL_WIDTH;
+  const height = PILL_HEIGHT;
+  const radius = PILL_RADIUS;
+  ctx.save();
+  ctx.translate(left, top);
+  const angle = fabricObject.getTotalAngle();
+  ctx.rotate(degreesToRadians(angle));
+  ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor || '#ffffff';
+  ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor || '#0d99ff';
+  ctx.lineWidth = 1.5;
+  ctx.beginPath();
+  ctx.roundRect(-width / 2, -height / 2, width, height, radius);
+  ctx.fill();
+  ctx.stroke();
+  ctx.restore();
+}
+
+/**
+ * Render a vertical pill control (for top/bottom side handles).
+ * Modern Canva-style appearance.
+ * @param {CanvasRenderingContext2D} ctx context to render on
+ * @param {Number} left x coordinate where the control center should be
+ * @param {Number} top y coordinate where the control center should be
+ * @param {Object} styleOverride override for FabricObject controls style
+ * @param {FabricObject} fabricObject the fabric object for which we are rendering controls
+ */
+function renderVerticalPillControl(ctx, left, top, styleOverride, fabricObject) {
+  styleOverride = styleOverride || {};
+  const width = PILL_HEIGHT; // Swapped for vertical
+  const height = PILL_WIDTH;
+  const radius = PILL_RADIUS;
+  ctx.save();
+  ctx.translate(left, top);
+  const angle = fabricObject.getTotalAngle();
+  ctx.rotate(degreesToRadians(angle));
+  ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor || '#ffffff';
+  ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor || '#0d99ff';
+  ctx.lineWidth = 1.5;
+  ctx.beginPath();
+  ctx.roundRect(-width / 2, -height / 2, width, height, radius);
+  ctx.fill();
+  ctx.stroke();
+  ctx.restore();
+}
+
+export { renderCircleControl, renderHorizontalPillControl, renderSquareControl, renderVerticalPillControl };
 //# sourceMappingURL=controlRendering.mjs.map

package/dist/src/controls/controlRendering.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"controlRendering.mjs","sources":["../../../src/controls/controlRendering.ts"],"sourcesContent":["import { FILL, STROKE, twoMathPi } from '../constants';\r\nimport type { InteractiveFabricObject } from '../shapes/Object/InteractiveObject';\r\nimport { degreesToRadians } from '../util/misc/radiansDegreesConversion';\r\nimport type { Control } from './Control';\r\n\r\nexport type ControlRenderingStyleOverride = Partial<\r\n  Pick<\r\n    InteractiveFabricObject,\r\n    | 'cornerStyle'\r\n    | 'cornerSize'\r\n    | 'cornerColor'\r\n    | 'cornerStrokeColor'\r\n    | 'cornerDashArray'\r\n    | 'transparentCorners'\r\n  >\r\n>;\r\n\r\nexport type ControlRenderer<\r\n  O extends InteractiveFabricObject = InteractiveFabricObject,\r\n> = (\r\n  ctx: CanvasRenderingContext2D,\r\n  left: number,\r\n  top: number,\r\n  styleOverride: ControlRenderingStyleOverride,\r\n  fabricObject: O,\r\n) => void;\r\n\r\n/**\r\n * Render a round control, as per fabric features.\r\n * This function is written to respect object properties like transparentCorners, cornerSize\r\n * cornerColor, cornerStrokeColor\r\n * plus the addition of offsetY and offsetX.\r\n * @param {CanvasRenderingContext2D} ctx context to render on\r\n * @param {Number} left x coordinate where the control center should be\r\n * @param {Number} top y coordinate where the control center should be\r\n * @param {Object} styleOverride override for FabricObject controls style\r\n * @param {FabricObject} fabricObject the fabric object for which we are rendering controls\r\n */\r\nexport function renderCircleControl(\r\n  this: Control,\r\n  ctx: CanvasRenderingContext2D,\r\n  left: number,\r\n  top: number,\r\n  styleOverride: ControlRenderingStyleOverride,\r\n  fabricObject: InteractiveFabricObject,\r\n) {\r\n  styleOverride = styleOverride || {};\r\n  const xSize =\r\n      this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize,\r\n    ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize,\r\n    transparentCorners =\r\n      typeof styleOverride.transparentCorners !== 'undefined'\r\n        ? styleOverride.transparentCorners\r\n        : fabricObject.transparentCorners,\r\n    methodName = transparentCorners ? STROKE : FILL,\r\n    stroke =\r\n      !transparentCorners &&\r\n      (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor);\r\n  let myLeft = left,\r\n    myTop = top,\r\n    size;\r\n  ctx.save();\r\n  ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor || '';\r\n  ctx.strokeStyle =\r\n    styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor || '';\r\n  // TODO: use proper ellipse code.\r\n  if (xSize > ySize) {\r\n    size = xSize;\r\n    ctx.scale(1.0, ySize / xSize);\r\n    myTop = (top * xSize) / ySize;\r\n  } else if (ySize > xSize) {\r\n    size = ySize;\r\n    ctx.scale(xSize / ySize, 1.0);\r\n    myLeft = (left * ySize) / xSize;\r\n  } else {\r\n    size = xSize;\r\n  }\r\n  ctx.beginPath();\r\n  ctx.arc(myLeft, myTop, size / 2, 0, twoMathPi, false);\r\n  ctx[methodName]();\r\n  if (stroke) {\r\n    ctx.stroke();\r\n  }\r\n  ctx.restore();\r\n}\r\n\r\n/**\r\n * Render a square control, as per fabric features.\r\n * This function is written to respect object properties like transparentCorners, cornerSize\r\n * cornerColor, cornerStrokeColor\r\n * plus the addition of offsetY and offsetX.\r\n * @param {CanvasRenderingContext2D} ctx context to render on\r\n * @param {Number} left x coordinate where the control center should be\r\n * @param {Number} top y coordinate where the control center should be\r\n * @param {Object} styleOverride override for FabricObject controls style\r\n * @param {FabricObject} fabricObject the fabric object for which we are rendering controls\r\n */\r\nexport function renderSquareControl(\r\n  this: Control,\r\n  ctx: CanvasRenderingContext2D,\r\n  left: number,\r\n  top: number,\r\n  styleOverride: ControlRenderingStyleOverride,\r\n  fabricObject: InteractiveFabricObject,\r\n) {\r\n  styleOverride = styleOverride || {};\r\n  const xSize =\r\n      this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize,\r\n    ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize,\r\n    transparentCorners =\r\n      typeof styleOverride.transparentCorners !== 'undefined'\r\n        ? styleOverride.transparentCorners\r\n        : fabricObject.transparentCorners,\r\n    methodName = transparentCorners ? STROKE : FILL,\r\n    stroke =\r\n      !transparentCorners &&\r\n      (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor),\r\n    xSizeBy2 = xSize / 2,\r\n    ySizeBy2 = ySize / 2;\r\n  ctx.save();\r\n  ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor || '';\r\n  ctx.strokeStyle =\r\n    styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor || '';\r\n  ctx.translate(left, top);\r\n  //  angle is relative to canvas plane\r\n  const angle = fabricObject.getTotalAngle();\r\n  ctx.rotate(degreesToRadians(angle));\r\n  // this does not work, and fixed with ( && ) does not make sense.\r\n  // to have real transparent corners we need the controls on upperCanvas\r\n  // transparentCorners || ctx.clearRect(-xSizeBy2, -ySizeBy2, xSize, ySize);\r\n  ctx[`${methodName}Rect`](-xSizeBy2, -ySizeBy2, xSize, ySize);\r\n  if (stroke) {\r\n    ctx.strokeRect(-xSizeBy2, -ySizeBy2, xSize, ySize);\r\n  }\r\n  ctx.restore();\r\n}\r\n"],"names":["renderCircleControl","ctx","left","top","styleOverride","fabricObject","xSize","sizeX","cornerSize","ySize","sizeY","transparentCorners","methodName","STROKE","FILL","stroke","cornerStrokeColor","myLeft","myTop","size","save","fillStyle","cornerColor","strokeStyle","scale","beginPath","arc","twoMathPi","restore","renderSquareControl","xSizeBy2","ySizeBy2","translate","angle","getTotalAngle","rotate","degreesToRadians","strokeRect"],"mappings":";;;AA2BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,mBAAmBA,CAEjCC,GAA6B,EAC7BC,IAAY,EACZC,GAAW,EACXC,aAA4C,EAC5CC,YAAqC,EACrC;AACAD,EAAAA,aAAa,GAAGA,aAAa,IAAI,EAAE;AACnC,EAAA,MAAME,KAAK,GACP,IAAI,CAACC,KAAK,IAAIH,aAAa,CAACI,UAAU,IAAIH,YAAY,CAACG,UAAU;IACnEC,KAAK,GAAG,IAAI,CAACC,KAAK,IAAIN,aAAa,CAACI,UAAU,IAAIH,YAAY,CAACG,UAAU;AACzEG,IAAAA,kBAAkB,GAChB,OAAOP,aAAa,CAACO,kBAAkB,KAAK,WAAW,GACnDP,aAAa,CAACO,kBAAkB,GAChCN,YAAY,CAACM,kBAAkB;AACrCC,IAAAA,UAAU,GAAGD,kBAAkB,GAAGE,MAAM,GAAGC,IAAI;IAC/CC,MAAM,GACJ,CAACJ,kBAAkB,KAClBP,aAAa,CAACY,iBAAiB,IAAIX,YAAY,CAACW,iBAAiB,CAAC;EACvE,IAAIC,MAAM,GAAGf,IAAI;AACfgB,IAAAA,KAAK,GAAGf,GAAG;IACXgB,IAAI;EACNlB,GAAG,CAACmB,IAAI,EAAE;EACVnB,GAAG,CAACoB,SAAS,GAAGjB,aAAa,CAACkB,WAAW,IAAIjB,YAAY,CAACiB,WAAW,IAAI,EAAE;EAC3ErB,GAAG,CAACsB,WAAW,GACbnB,aAAa,CAACY,iBAAiB,IAAIX,YAAY,CAACW,iBAAiB,IAAI,EAAE;AACzE;EACA,IAAIV,KAAK,GAAGG,KAAK,EAAE;AACjBU,IAAAA,IAAI,GAAGb,KAAK;IACZL,GAAG,CAACuB,KAAK,CAAC,GAAG,EAAEf,KAAK,GAAGH,KAAK,CAAC;AAC7BY,IAAAA,KAAK,GAAIf,GAAG,GAAGG,KAAK,GAAIG,KAAK;AAC/B,EAAA,CAAC,MAAM,IAAIA,KAAK,GAAGH,KAAK,EAAE;AACxBa,IAAAA,IAAI,GAAGV,KAAK;IACZR,GAAG,CAACuB,KAAK,CAAClB,KAAK,GAAGG,KAAK,EAAE,GAAG,CAAC;AAC7BQ,IAAAA,MAAM,GAAIf,IAAI,GAAGO,KAAK,GAAIH,KAAK;AACjC,EAAA,CAAC,MAAM;AACLa,IAAAA,IAAI,GAAGb,KAAK;AACd,EAAA;EACAL,GAAG,CAACwB,SAAS,EAAE;AACfxB,EAAAA,GAAG,CAACyB,GAAG,CAACT,MAAM,EAAEC,KAAK,EAAEC,IAAI,GAAG,CAAC,EAAE,CAAC,EAAEQ,SAAS,EAAE,KAAK,CAAC;AACrD1B,EAAAA,GAAG,CAACW,UAAU,CAAC,EAAE;AACjB,EAAA,IAAIG,MAAM,EAAE;IACVd,GAAG,CAACc,MAAM,EAAE;AACd,EAAA;EACAd,GAAG,CAAC2B,OAAO,EAAE;AACf;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,mBAAmBA,CAEjC5B,GAA6B,EAC7BC,IAAY,EACZC,GAAW,EACXC,aAA4C,EAC5CC,YAAqC,EACrC;AACAD,EAAAA,aAAa,GAAGA,aAAa,IAAI,EAAE;AACnC,EAAA,MAAME,KAAK,GACP,IAAI,CAACC,KAAK,IAAIH,aAAa,CAACI,UAAU,IAAIH,YAAY,CAACG,UAAU;IACnEC,KAAK,GAAG,IAAI,CAACC,KAAK,IAAIN,aAAa,CAACI,UAAU,IAAIH,YAAY,CAACG,UAAU;AACzEG,IAAAA,kBAAkB,GAChB,OAAOP,aAAa,CAACO,kBAAkB,KAAK,WAAW,GACnDP,aAAa,CAACO,kBAAkB,GAChCN,YAAY,CAACM,kBAAkB;AACrCC,IAAAA,UAAU,GAAGD,kBAAkB,GAAGE,MAAM,GAAGC,IAAI;IAC/CC,MAAM,GACJ,CAACJ,kBAAkB,KAClBP,aAAa,CAACY,iBAAiB,IAAIX,YAAY,CAACW,iBAAiB,CAAC;IACrEc,QAAQ,GAAGxB,KAAK,GAAG,CAAC;IACpByB,QAAQ,GAAGtB,KAAK,GAAG,CAAC;EACtBR,GAAG,CAACmB,IAAI,EAAE;EACVnB,GAAG,CAACoB,SAAS,GAAGjB,aAAa,CAACkB,WAAW,IAAIjB,YAAY,CAACiB,WAAW,IAAI,EAAE;EAC3ErB,GAAG,CAACsB,WAAW,GACbnB,aAAa,CAACY,iBAAiB,IAAIX,YAAY,CAACW,iBAAiB,IAAI,EAAE;AACzEf,EAAAA,GAAG,CAAC+B,SAAS,CAAC9B,IAAI,EAAEC,GAAG,CAAC;AACxB;AACA,EAAA,MAAM8B,KAAK,GAAG5B,YAAY,CAAC6B,aAAa,EAAE;AAC1CjC,EAAAA,GAAG,CAACkC,MAAM,CAACC,gBAAgB,CAACH,KAAK,CAAC,CAAC;AACnC;AACA;AACA;AACAhC,EAAAA,GAAG,CAAC,CAAA,EAAGW,UAAU,CAAA,IAAA,CAAM,CAAC,CAAC,CAACkB,QAAQ,EAAE,CAACC,QAAQ,EAAEzB,KAAK,EAAEG,KAAK,CAAC;AAC5D,EAAA,IAAIM,MAAM,EAAE;AACVd,IAAAA,GAAG,CAACoC,UAAU,CAAC,CAACP,QAAQ,EAAE,CAACC,QAAQ,EAAEzB,KAAK,EAAEG,KAAK,CAAC;AACpD,EAAA;EACAR,GAAG,CAAC2B,OAAO,EAAE;AACf;;;;"}
+{"version":3,"file":"controlRendering.mjs","sources":["../../../src/controls/controlRendering.ts"],"sourcesContent":["import { FILL, STROKE, twoMathPi } from '../constants';\r\nimport type { InteractiveFabricObject } from '../shapes/Object/InteractiveObject';\r\nimport { degreesToRadians } from '../util/misc/radiansDegreesConversion';\r\nimport type { Control } from './Control';\r\n\r\n/**\r\n * Pill dimensions for side controls (Canva-style)\r\n */\r\nconst PILL_WIDTH = 6;\r\nconst PILL_HEIGHT = 20;\r\nconst PILL_RADIUS = 3;\r\n\r\nexport type ControlRenderingStyleOverride = Partial<\r\n  Pick<\r\n    InteractiveFabricObject,\r\n    | 'cornerStyle'\r\n    | 'cornerSize'\r\n    | 'cornerColor'\r\n    | 'cornerStrokeColor'\r\n    | 'cornerDashArray'\r\n    | 'transparentCorners'\r\n  >\r\n>;\r\n\r\nexport type ControlRenderer<\r\n  O extends InteractiveFabricObject = InteractiveFabricObject,\r\n> = (\r\n  ctx: CanvasRenderingContext2D,\r\n  left: number,\r\n  top: number,\r\n  styleOverride: ControlRenderingStyleOverride,\r\n  fabricObject: O,\r\n) => void;\r\n\r\n/**\r\n * Render a round control, as per fabric features.\r\n * This function is written to respect object properties like transparentCorners, cornerSize\r\n * cornerColor, cornerStrokeColor\r\n * plus the addition of offsetY and offsetX.\r\n * @param {CanvasRenderingContext2D} ctx context to render on\r\n * @param {Number} left x coordinate where the control center should be\r\n * @param {Number} top y coordinate where the control center should be\r\n * @param {Object} styleOverride override for FabricObject controls style\r\n * @param {FabricObject} fabricObject the fabric object for which we are rendering controls\r\n */\r\nexport function renderCircleControl(\r\n  this: Control,\r\n  ctx: CanvasRenderingContext2D,\r\n  left: number,\r\n  top: number,\r\n  styleOverride: ControlRenderingStyleOverride,\r\n  fabricObject: InteractiveFabricObject,\r\n) {\r\n  styleOverride = styleOverride || {};\r\n  const xSize =\r\n      this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize,\r\n    ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize,\r\n    transparentCorners =\r\n      typeof styleOverride.transparentCorners !== 'undefined'\r\n        ? styleOverride.transparentCorners\r\n        : fabricObject.transparentCorners,\r\n    methodName = transparentCorners ? STROKE : FILL,\r\n    stroke =\r\n      !transparentCorners &&\r\n      (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor);\r\n  let myLeft = left,\r\n    myTop = top,\r\n    size;\r\n  ctx.save();\r\n  ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor || '';\r\n  ctx.strokeStyle =\r\n    styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor || '';\r\n  // TODO: use proper ellipse code.\r\n  if (xSize > ySize) {\r\n    size = xSize;\r\n    ctx.scale(1.0, ySize / xSize);\r\n    myTop = (top * xSize) / ySize;\r\n  } else if (ySize > xSize) {\r\n    size = ySize;\r\n    ctx.scale(xSize / ySize, 1.0);\r\n    myLeft = (left * ySize) / xSize;\r\n  } else {\r\n    size = xSize;\r\n  }\r\n  ctx.beginPath();\r\n  ctx.arc(myLeft, myTop, size / 2, 0, twoMathPi, false);\r\n  ctx[methodName]();\r\n  if (stroke) {\r\n    ctx.stroke();\r\n  }\r\n  ctx.restore();\r\n}\r\n\r\n/**\r\n * Render a square control, as per fabric features.\r\n * This function is written to respect object properties like transparentCorners, cornerSize\r\n * cornerColor, cornerStrokeColor\r\n * plus the addition of offsetY and offsetX.\r\n * @param {CanvasRenderingContext2D} ctx context to render on\r\n * @param {Number} left x coordinate where the control center should be\r\n * @param {Number} top y coordinate where the control center should be\r\n * @param {Object} styleOverride override for FabricObject controls style\r\n * @param {FabricObject} fabricObject the fabric object for which we are rendering controls\r\n */\r\nexport function renderSquareControl(\r\n  this: Control,\r\n  ctx: CanvasRenderingContext2D,\r\n  left: number,\r\n  top: number,\r\n  styleOverride: ControlRenderingStyleOverride,\r\n  fabricObject: InteractiveFabricObject,\r\n) {\r\n  styleOverride = styleOverride || {};\r\n  const xSize =\r\n      this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize,\r\n    ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize,\r\n    transparentCorners =\r\n      typeof styleOverride.transparentCorners !== 'undefined'\r\n        ? styleOverride.transparentCorners\r\n        : fabricObject.transparentCorners,\r\n    methodName = transparentCorners ? STROKE : FILL,\r\n    stroke =\r\n      !transparentCorners &&\r\n      (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor),\r\n    xSizeBy2 = xSize / 2,\r\n    ySizeBy2 = ySize / 2;\r\n  ctx.save();\r\n  ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor || '';\r\n  ctx.strokeStyle =\r\n    styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor || '';\r\n  ctx.translate(left, top);\r\n  //  angle is relative to canvas plane\r\n  const angle = fabricObject.getTotalAngle();\r\n  ctx.rotate(degreesToRadians(angle));\r\n  // this does not work, and fixed with ( && ) does not make sense.\r\n  // to have real transparent corners we need the controls on upperCanvas\r\n  // transparentCorners || ctx.clearRect(-xSizeBy2, -ySizeBy2, xSize, ySize);\r\n  ctx[`${methodName}Rect`](-xSizeBy2, -ySizeBy2, xSize, ySize);\r\n  if (stroke) {\r\n    ctx.strokeRect(-xSizeBy2, -ySizeBy2, xSize, ySize);\r\n  }\r\n  ctx.restore();\r\n}\r\n\r\n/**\r\n * Render a horizontal pill control (for left/right side handles).\r\n * Modern Canva-style appearance.\r\n * @param {CanvasRenderingContext2D} ctx context to render on\r\n * @param {Number} left x coordinate where the control center should be\r\n * @param {Number} top y coordinate where the control center should be\r\n * @param {Object} styleOverride override for FabricObject controls style\r\n * @param {FabricObject} fabricObject the fabric object for which we are rendering controls\r\n */\r\nexport function renderHorizontalPillControl(\r\n  this: Control,\r\n  ctx: CanvasRenderingContext2D,\r\n  left: number,\r\n  top: number,\r\n  styleOverride: ControlRenderingStyleOverride,\r\n  fabricObject: InteractiveFabricObject,\r\n) {\r\n  styleOverride = styleOverride || {};\r\n  const width = PILL_WIDTH;\r\n  const height = PILL_HEIGHT;\r\n  const radius = PILL_RADIUS;\r\n\r\n  ctx.save();\r\n  ctx.translate(left, top);\r\n  const angle = fabricObject.getTotalAngle();\r\n  ctx.rotate(degreesToRadians(angle));\r\n\r\n  ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor || '#ffffff';\r\n  ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor || '#0d99ff';\r\n  ctx.lineWidth = 1.5;\r\n\r\n  ctx.beginPath();\r\n  ctx.roundRect(-width / 2, -height / 2, width, height, radius);\r\n  ctx.fill();\r\n  ctx.stroke();\r\n  ctx.restore();\r\n}\r\n\r\n/**\r\n * Render a vertical pill control (for top/bottom side handles).\r\n * Modern Canva-style appearance.\r\n * @param {CanvasRenderingContext2D} ctx context to render on\r\n * @param {Number} left x coordinate where the control center should be\r\n * @param {Number} top y coordinate where the control center should be\r\n * @param {Object} styleOverride override for FabricObject controls style\r\n * @param {FabricObject} fabricObject the fabric object for which we are rendering controls\r\n */\r\nexport function renderVerticalPillControl(\r\n  this: Control,\r\n  ctx: CanvasRenderingContext2D,\r\n  left: number,\r\n  top: number,\r\n  styleOverride: ControlRenderingStyleOverride,\r\n  fabricObject: InteractiveFabricObject,\r\n) {\r\n  styleOverride = styleOverride || {};\r\n  const width = PILL_HEIGHT; // Swapped for vertical\r\n  const height = PILL_WIDTH;\r\n  const radius = PILL_RADIUS;\r\n\r\n  ctx.save();\r\n  ctx.translate(left, top);\r\n  const angle = fabricObject.getTotalAngle();\r\n  ctx.rotate(degreesToRadians(angle));\r\n\r\n  ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor || '#ffffff';\r\n  ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor || '#0d99ff';\r\n  ctx.lineWidth = 1.5;\r\n\r\n  ctx.beginPath();\r\n  ctx.roundRect(-width / 2, -height / 2, width, height, radius);\r\n  ctx.fill();\r\n  ctx.stroke();\r\n  ctx.restore();\r\n}\r\n"],"names":["PILL_WIDTH","PILL_HEIGHT","PILL_RADIUS","renderCircleControl","ctx","left","top","styleOverride","fabricObject","xSize","sizeX","cornerSize","ySize","sizeY","transparentCorners","methodName","STROKE","FILL","stroke","cornerStrokeColor","myLeft","myTop","size","save","fillStyle","cornerColor","strokeStyle","scale","beginPath","arc","twoMathPi","restore","renderSquareControl","xSizeBy2","ySizeBy2","translate","angle","getTotalAngle","rotate","degreesToRadians","strokeRect","renderHorizontalPillControl","width","height","radius","lineWidth","roundRect","fill","renderVerticalPillControl"],"mappings":"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"}