@hunterchen/canvas 0.4.1 → 0.6.0

package/src/index.ts

@@ -1,41 +1,59 @@
 // Components
-export { default as Canvas } from './components/canvas/canvas';
-export { CanvasComponent } from './components/canvas/component';
-export { Draggable, DraggableImage } from './components/canvas/draggable';
-export { CanvasWrapper, growTransition } from './components/canvas/wrapper';
-export { default as CanvasToolbar } from './components/canvas/toolbar';
-export { default as CanvasNavbar } from './components/canvas/navbar';
+export { default as Canvas } from "./components/canvas/canvas";
+export { CanvasComponent } from "./components/canvas/component";
+export { Draggable, DraggableImage } from "./components/canvas/draggable";
+export { CanvasWrapper, growTransition } from "./components/canvas/wrapper";
+export { default as CanvasToolbar } from "./components/canvas/toolbar";
+export { default as CanvasNavbar } from "./components/canvas/navbar";
 
 // Background Components
 export {
-    DefaultCanvasBackground,
-    DefaultWrapperBackground,
-    DefaultIntroContent,
-    DEFAULT_CANVAS_GRADIENT,
-    DEFAULT_INTRO_GRADIENT,
-    DEFAULT_CANVAS_BOX_GRADIENT,
-} from './components/canvas/backgrounds';
+  DefaultCanvasBackground,
+  DefaultWrapperBackground,
+  DefaultIntroContent,
+  DEFAULT_CANVAS_GRADIENT,
+  DEFAULT_INTRO_GRADIENT,
+  DEFAULT_CANVAS_BOX_GRADIENT,
+} from "./components/canvas/backgrounds";
 export type {
-    DefaultCanvasBackgroundProps,
-    DefaultWrapperBackgroundProps,
-    DefaultIntroContentProps,
-} from './components/canvas/backgrounds';
+  DefaultCanvasBackgroundProps,
+  DefaultWrapperBackgroundProps,
+  DefaultIntroContentProps,
+} from "./components/canvas/backgrounds";
 
 // Contexts
-export { CanvasContext, CanvasProvider, useCanvasContext } from './contexts/CanvasContext';
-export type { CanvasContextState } from './contexts/CanvasContext';
-export { PerformanceProvider, usePerformanceMode, usePerformance } from './contexts/PerformanceContext';
-export type { PerformanceMode, PerformanceConfig } from './contexts/PerformanceContext';
+export {
+  CanvasContext,
+  CanvasProvider,
+  useCanvasContext,
+} from "./contexts/CanvasContext";
+export type { CanvasContextState } from "./contexts/CanvasContext";
+export {
+  PerformanceProvider,
+  usePerformanceMode,
+  usePerformance,
+} from "./contexts/PerformanceContext";
+export type {
+  PerformanceMode,
+  PerformanceConfig,
+} from "./contexts/PerformanceContext";
 
 // Hooks
-export { default as useWindowDimensions } from './hooks/useWindowDimensions';
-export { usePerformanceMode as usePerformanceModeLegacy } from './hooks/usePerformanceMode';
+export { default as useWindowDimensions } from "./hooks/useWindowDimensions";
+export { usePerformanceMode as usePerformanceModeLegacy } from "./hooks/usePerformanceMode";
 
 // Utilities
-export * from './lib/canvas';
-export * from './lib/constants';
-export * from './lib/utils';
-export * from './utils/performance';
+export * from "./lib/canvas";
+export * from "./lib/constants";
+export * from "./lib/utils";
+export * from "./utils/performance";
 
 // Types
-export type { SectionCoordinates, NavItem, CanvasSection } from './types';
+export type {
+  SectionCoordinates,
+  NavItem,
+  CanvasSection,
+  ToolbarConfig,
+  ToolbarPosition,
+  ToolbarDisplayMode,
+} from "./types";

package/src/types/index.ts

@@ -38,3 +38,62 @@ export interface NavItem {
   /** If true, clicking this section triggers the reset/home behavior */
   isHome?: boolean;
 }
+
+/**
+ * Preset positions for the toolbar
+ */
+export type ToolbarPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+/**
+ * What to display in the toolbar
+ */
+export type ToolbarDisplayMode = 'coordinates' | 'scale' | 'both';
+
+/**
+ * Configuration options for the canvas toolbar
+ */
+export interface ToolbarConfig {
+  // === Visibility ===
+  /** Hide the toolbar entirely. Default: false */
+  hidden?: boolean;
+
+  // === Display Mode ===
+  /** What to show: 'coordinates', 'scale', or 'both'. Default: 'both' */
+  display?: ToolbarDisplayMode;
+
+  // === Positioning ===
+  /** Preset position. Default: 'top-left' */
+  position?: ToolbarPosition;
+
+  // === Auto-hide Behavior ===
+  /** Disable auto-hide when at home position. Default: false */
+  disableAutoHide?: boolean;
+
+  // === Styling (Tailwind-friendly) ===
+  /** Additional className for the container */
+  className?: string;
+  /** Additional className for the coordinates text */
+  coordinatesClassName?: string;
+  /** Additional className for the scale text */
+  scaleClassName?: string;
+  /** Additional className for the separator */
+  separatorClassName?: string;
+
+  // === Styling (non-Tailwind / inline styles) ===
+  /** Inline styles for the container */
+  style?: React.CSSProperties;
+  /** Inline styles for the coordinates */
+  coordinatesStyle?: React.CSSProperties;
+  /** Inline styles for the scale */
+  scaleStyle?: React.CSSProperties;
+
+  // === Content Customization ===
+  /** Custom separator between coordinates and scale. Default: ' | ' */
+  separator?: string;
+  /** Gap around the separator in pixels or CSS value. Default: undefined (uses inline spacing) */
+  separatorGap?: number | string;
+  /** Format for coordinates. Default: '(x, y)' */
+  coordinatesFormat?: (x: number, y: number) => string;
+  /** Format for scale. Default: '1.00x' */
+  scaleFormat?: (scale: number) => string;
+}