Skip to main content

Other

All types below are exported from kritzel-stencil.

Interfaces​

KritzelViewportState​

Emitted by the viewportChange event. Returned by getViewport().

interface KritzelViewportState {
  translateX: number;
  translateY: number;
  scale: number;
  width: number;
  height: number;
}

KritzelUndoState​

Emitted by the undoStateChange event.

interface KritzelUndoState {
  canUndo: boolean;
  canRedo: boolean;
  undoStackSize: number;
  redoStackSize: number;
}

KritzelSyncConfig​

Passed to the syncConfig prop. See Sync & Collaboration.

interface KritzelSyncConfig {
  providers: ProviderConfig[];
}

KritzelShortcut​

Keyboard shortcut definition. Returned by getDisplayableShortcuts().

interface KritzelShortcut {
  key: string;
  ctrl?: boolean;
  shift?: boolean;
  label: string;
  category: string;
  condition?: () => boolean;
  action: () => void;
}

KritzelToolbarControl​

Defines a toolbar item for the controls prop on <kritzel-editor>.

interface KritzelToolbarControl {
  type: 'tool' | 'config';
  tool?: (new (...args: any[]) => KritzelBaseTool) | KritzelBaseTool;
  icon?: string;
  isDefault?: boolean;
  name: string;
  config?: KritzelBrushToolConfig | KritzelLineToolConfig | KritzelTextToolConfig | KritzelShapeToolConfig;
  subOptions?: KritzelToolbarSubOption[];
}

interface KritzelToolbarSubOption {
  id: string;
  icon: string;
  label: string;
  value: any;
  toolProperty: string;
}

Tool Config Interfaces​

interface KritzelBrushToolConfig {
  type: 'pen' | 'highlighter';
  color: ThemeAwareColor;
  size: number;
  palettes: { [brushType: string]: ThemeAwareColor[] };
}

interface KritzelLineToolConfig {
  color: ThemeAwareColor;
  size: number;
  palette: ThemeAwareColor[];
  arrows?: {
    start?: { enabled: boolean; style?: 'triangle' | 'open' | 'diamond' | 'circle' };
    end?: { enabled: boolean; style?: 'triangle' | 'open' | 'diamond' | 'circle' };
  };
}

interface KritzelTextToolConfig {
  color: ThemeAwareColor;
  size: number;
  fontFamily: string;
  palette: ThemeAwareColor[];
}

interface KritzelShapeToolConfig {
  shapeType: ShapeType;
  fillColor: ThemeAwareColor;
  strokeColor: ThemeAwareColor;
  strokeWidth: number;
  fontColor: ThemeAwareColor;
  fontSize: number;
  fontFamily: string;
  palette: ThemeAwareColor[];
}

Event Payload Interfaces​

interface ObjectsAddedEvent {
  objects: KritzelBaseObject[];
}

interface ObjectsRemovedEvent {
  objects: KritzelBaseObject[];
}

interface ObjectsUpdatedEvent {
  objects: { object: KritzelBaseObject; changedProperties: Partial<KritzelBaseObject> }[];
}

Geometry Interfaces​

interface KritzelBoundingBox {
  x: number;
  y: number;
  z: number;
  width: number;
  height: number;
}

interface KritzelPolygon {
  topLeft: { x: number; y: number };
  topRight: { x: number; y: number };
  bottomRight: { x: number; y: number };
  bottomLeft: { x: number; y: number };
}

Anchor Interface​

interface LineAnchor {
  objectId: string;
}

Theme Interface​

interface KritzelTheme {
  global?: { ... };
  engine?: { backgroundColor?: string; ... };
  controls?: { ... };
  selection?: { ... };
  dialog?: { ... };
  contextMenu?: { ... };
  utilityPanel?: { ... };
  // ... and more sections
}

See Theming for details.

Classes​

KritzelWorkspace​

Represents a workspace (canvas) within the editor.

class KritzelWorkspace {
  id: string;
  name: string;
  createdAt: Date;
  updatedAt: Date;
  viewport: {
    translateX: number;
    translateY: number;
    scale: number;
  };
}

Default viewport: { translateX: 0, translateY: 0, scale: 1 }.

Enums​

KritzelAlignment​

Used with alignObjects().

enum KritzelAlignment {
  StartHorizontal  = 'start-horizontal',   // Align left edges
  CenterHorizontal = 'center-horizontal',  // Align horizontal centers
  EndHorizontal    = 'end-horizontal',     // Align right edges
  StartVertical    = 'start-vertical',     // Align top edges
  CenterVertical   = 'center-vertical',    // Align vertical centers
  EndVertical      = 'end-vertical',       // Align bottom edges
}

ShapeType​

Used with KritzelShapeToolConfig.

enum ShapeType {
  Rectangle = 'rectangle',
  Ellipse   = 'ellipse',
  Triangle  = 'triangle',
}

Type Aliases​

TypeDefinitionDescription
ThemeName'light' | 'dark'Theme identifier
ThemeAwareColor{ light: string; dark: string; label?: string }Color that adapts to active theme
ColorPalettereadonly ThemeAwareColor[]Array of theme-aware colors