@bwp-web/canvas 0.6.2 → 0.7.1

package/dist/overlay/FixedSizeContent.d.ts

@@ -0,0 +1,51 @@
+import { StackProps } from '@mui/material';
+import { type ReactNode } from 'react';
+export interface FixedSizeContentProps extends StackProps {
+    children?: ReactNode;
+    /**
+     * When `true` (default), content is collapsed (`display: none`) if showing
+     * it would cause `OverlayContent` to shrink below its natural size
+     * vertically. Horizontal overflow is always handled by truncation (ellipsis).
+     * When `false`, no automatic hiding is applied.
+     */
+    hideOnOverflow?: boolean;
+    /**
+     * Horizontal padding in pixels subtracted from the available width when
+     * calculating the truncation `maxWidth`. Default: 4
+     */
+    truncationPadding?: number;
+}
+/**
+ * Keeps children at their natural CSS pixel size inside an `OverlayContent`,
+ * counter-scaling against `OverlayContent`'s fit-to-container transform.
+ * Icons and other siblings still scale to fill the object bounds as usual,
+ * while text wrapped in `FixedSizeContent` stays at a constant screen size.
+ *
+ * Text that overflows horizontally is truncated with an ellipsis. When
+ * `hideOnOverflow` is `true` (default), the element is fully collapsed
+ * (`display: none`) as soon as the overlay container is too short to fit
+ * both the fixed-size content and its siblings at natural size, so
+ * `OverlayContent` recalculates its scale using only the remaining siblings.
+ * Once there is enough room again (e.g. zooming in), the element reappears.
+ *
+ * Uses the `--overlay-scale` CSS custom property set by `OverlayContent`.
+ * When used outside `OverlayContent` (e.g. directly inside `ObjectOverlay`),
+ * the fallback of 1 means no counter-scaling is applied and children render
+ * at their natural size.
+ *
+ * @example
+ * ```tsx
+ * <ObjectOverlay canvasRef={canvasRef} object={obj}>
+ *   <OverlayContent>
+ *     <Stack alignItems="center">
+ *       <MyIcon />                      {// scales to fit}
+ *       <FixedSizeContent>
+ *         <Typography noWrap>Always 14px, truncates</Typography>
+ *       </FixedSizeContent>
+ *     </Stack>
+ *   </OverlayContent>
+ * </ObjectOverlay>
+ * ```
+ */
+export declare function FixedSizeContent({ children, hideOnOverflow, truncationPadding, sx, ...rest }: FixedSizeContentProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FixedSizeContent.d.ts.map

package/dist/overlay/FixedSizeContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FixedSizeContent.d.ts","sourceRoot":"","sources":["../../src/overlay/FixedSizeContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,UAAU,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D,MAAM,WAAW,qBAAsB,SAAQ,UAAU;IACvD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,cAAqB,EACrB,iBAAqB,EACrB,EAAE,EACF,GAAG,IAAI,EACR,EAAE,qBAAqB,2CA+FvB"}

package/dist/overlay/ObjectOverlay.d.ts

@@ -0,0 +1,33 @@
+import { type RefObject, type ReactNode } from 'react';
+import type { StackProps } from '@mui/material';
+import type { Canvas as FabricCanvas, FabricObject } from 'fabric';
+export interface ObjectOverlayProps extends StackProps {
+    /** Ref to the Fabric canvas instance. */
+    canvasRef: RefObject<FabricCanvas | null>;
+    /** The Fabric object to overlay. When `null`/`undefined`, nothing renders. */
+    object: FabricObject | null | undefined;
+    children?: ReactNode;
+}
+/**
+ * A MUI `Stack` positioned absolutely over a Fabric canvas object, sized to
+ * the object's screen-space dimensions and kept in sync with pan, zoom, move,
+ * scale, and rotate transforms.
+ *
+ * Default styles: `position: absolute`, `pointerEvents: none`,
+ * `alignItems: center`, `justifyContent: center`, `zIndex: 1`.
+ * All can be overridden via the `sx` prop.
+ *
+ * Must be rendered inside a container that is `position: relative` and wraps
+ * the `<Canvas>` component (e.g. the `canvasOverlay` slot of `DemoLayout`).
+ *
+ * @example
+ * ```tsx
+ * <ObjectOverlay canvasRef={canvasRef} object={deskObj}>
+ *   <OverlayContent>
+ *     <MyLabel>{desk.name}</MyLabel>
+ *   </OverlayContent>
+ * </ObjectOverlay>
+ * ```
+ */
+export declare function ObjectOverlay({ canvasRef, object, sx, children, ...rest }: ObjectOverlayProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ObjectOverlay.d.ts.map

package/dist/overlay/ObjectOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectOverlay.d.ts","sourceRoot":"","sources":["../../src/overlay/ObjectOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,KAAK,EAAE,MAAM,IAAI,YAAY,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAGnE,MAAM,WAAW,kBAAmB,SAAQ,UAAU;IACpD,yCAAyC;IACzC,SAAS,EAAE,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC;IAC1C,8EAA8E;IAC9E,MAAM,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,MAAM,EACN,EAAE,EACF,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,kBAAkB,kDAgEpB"}

package/dist/overlay/OverlayContent.d.ts

@@ -0,0 +1,26 @@
+import { StackProps } from '@mui/material';
+import { type ReactNode } from 'react';
+export interface OverlayContentProps extends StackProps {
+    children?: ReactNode;
+    /** Padding in pixels between the content and the parent bounds. Default: 4 */
+    padding?: number;
+    /** Maximum scale factor applied to the content. Default: 2 */
+    maxScale?: number;
+}
+/**
+ * Scales its children to fit within the parent's bounds (typically an
+ * `ObjectOverlay`). Content is measured at its natural size then scaled
+ * down or up (capped at `maxScale`) to fill the available space while
+ * maintaining aspect ratio.
+ *
+ * @example
+ * ```tsx
+ * <ObjectOverlay canvasRef={canvasRef} object={obj}>
+ *   <OverlayContent padding={4} maxScale={2}>
+ *     <MyBadge>{label}</MyBadge>
+ *   </OverlayContent>
+ * </ObjectOverlay>
+ * ```
+ */
+export declare function OverlayContent({ children, padding, maxScale, sx, ...rest }: OverlayContentProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=OverlayContent.d.ts.map

package/dist/overlay/OverlayContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayContent.d.ts","sourceRoot":"","sources":["../../src/overlay/OverlayContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,UAAU,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D,MAAM,WAAW,mBAAoB,SAAQ,UAAU;IACrD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,OAAW,EACX,QAAY,EACZ,EAAE,EACF,GAAG,IAAI,EACR,EAAE,mBAAmB,2CA0ErB"}

package/dist/overlay/index.d.ts

@@ -0,0 +1,7 @@
+export { ObjectOverlay } from './ObjectOverlay';
+export type { ObjectOverlayProps } from './ObjectOverlay';
+export { OverlayContent } from './OverlayContent';
+export type { OverlayContentProps } from './OverlayContent';
+export { FixedSizeContent } from './FixedSizeContent';
+export type { FixedSizeContentProps } from './FixedSizeContent';
+//# sourceMappingURL=index.d.ts.map

package/dist/overlay/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bwp-web/canvas",
-  "version": "0.6.2",
+  "version": "0.7.1",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

package/dist/hooks/useObjectOverlay.d.ts

@@ -1,50 +0,0 @@
-import { type RefObject } from 'react';
-import type { Canvas as FabricCanvas, FabricObject } from 'fabric';
-export interface UseObjectOverlayOptions {
-    /**
-     * Scale the overlay container to the object's actual dimensions and apply
-     * a CSS `scale(zoom)` transform so content inside lays out in canvas units.
-     * Pass `false` to opt out and receive screen-space pixel dimensions instead.
-     * Default: true.
-     */
-    autoScaleContent?: boolean;
-    /**
-     * CSS selector for a text element inside the overlay. When
-     * `autoScaleContent` is enabled and the computed scale drops below a
-     * threshold, elements matching this selector are hidden (via
-     * `display: none`) so only icons remain visible.
-     * Default: undefined (no text hiding).
-     */
-    textSelector?: string;
-    /**
-     * Minimum content scale at which `textSelector` elements remain visible.
-     * Below this threshold, matched elements are hidden.
-     * Default: 0.5.
-     */
-    textMinScale?: number;
-}
-/**
- * Position a DOM element over a Fabric canvas object, kept in sync with
- * pan, zoom, move, scale, and rotate transforms.
- *
- * Returns a ref to attach to the overlay container element. The element
- * must be positioned absolutely within a relative-positioned parent that
- * wraps the `<Canvas>` component.
- *
- * @example
- * ```tsx
- * const overlayRef = useObjectOverlay(canvasRef, object, {
- *   autoScaleContent: true,
- *   textSelector: '.desk-text',
- * });
- *
- * return (
- *   <div ref={overlayRef} style={{ position: 'absolute', pointerEvents: 'none' }}>
- *     <CanvasDeskIcon />
- *     <span className="desk-text">{name}</span>
- *   </div>
- * );
- * ```
- */
-export declare function useObjectOverlay(canvasRef: RefObject<FabricCanvas | null>, object: FabricObject | null | undefined, options?: UseObjectOverlayOptions): RefObject<HTMLDivElement | null>;
-//# sourceMappingURL=useObjectOverlay.d.ts.map

package/dist/hooks/useObjectOverlay.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useObjectOverlay.d.ts","sourceRoot":"","sources":["../../src/hooks/useObjectOverlay.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,MAAM,IAAI,YAAY,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAGnE,MAAM,WAAW,uBAAuB;IACtC;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,EACzC,MAAM,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,EACvC,OAAO,CAAC,EAAE,uBAAuB,GAChC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CA+ElC"}