js-draw

https://personalizedrefrigerator.github.io/js-draw/typedoc/
Admin
js-draw is a web-based drawing editor library with support for very large zoom ranges,...
Tokens:2,134,894
Snippets:9,589
Trust Score:8.3
Update:1 year ago
Show doc for...
Tokens:
Raw
### Initialize js-draw Editor and Toolbar

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/assets/doctest

Demonstrates the basic setup for the js-draw editor, including importing styles and adding a toolbar to the document body. This is a foundational example for getting started with the library.

```javascript
import Editor from 'js-draw';
import 'js-draw/styles';
  

const editor = new Editor(document.body);
editor.addToolbar();
```

```javascript
import Editor from 'js-draw';
import 'js-draw/bundledStyles';
  

const editor = new Editor(document.body);
editor.addToolbar();
```

--------------------------------

### Install js-draw Dependency

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Getting_started

Installs the js-draw library as a development dependency using npm. This command is used in projects managed with npm or yarn.

```bash
$ npm install --save-dev js-draw
```

--------------------------------

### js-draw Guides

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/variables/js-draw.Vec2.unitX

Links to various guides for using and extending the js-draw library, including getting started, writing themes, and customizing components.

```APIDOC
Module: js-draw

Guides:
  Getting started: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Getting_started.html
  Writing a theme: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Writing_a_theme.html
  Components:
    Adding and modifying components: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Components.Adding_and_modifying_components.html
    Custom components: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Components.Custom_components.html
  Updating the viewport: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Updating_the_viewport.html
  Customizing existing tools: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Customizing_existing_tools.html
  Positioning an element above the editor: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Positioning_an_element_above_the_editor.html
```

--------------------------------

### js-draw Guides

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/functions/js-draw.makeDropdownToolbar

Documentation for guides on using the js-draw library, including getting started, writing themes, component customization, updating the viewport, and positioning elements.

```APIDOC
Guides:
  - Getting started: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Getting_started.html
  - Writing a theme: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Writing_a_theme.html
  - Components:
    - Adding and modifying components: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Components.Adding_and_modifying_components.html
    - Custom components: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Components.Custom_components.html
  - Updating the viewport: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Updating_the_viewport.html
  - Customizing existing tools: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Customizing_existing_tools.html
  - Positioning an element above the editor: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Positioning_an_element_above_the_editor.html
```

--------------------------------

### js-draw Guides and Migrations

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/functions/_js-draw_math.Vec2.of

Links to guides and migration documentation for the js-draw library, covering topics from getting started and writing themes to updating the viewport and migrating versions.

```APIDOC
Documentation Sections:
  Guides:
    Getting started
    Writing a theme
    Components:
      Adding and modifying components
      Custom components
    Updating the viewport
    Customizing existing tools
    Positioning an element above the editor
  Migrations:
    Migrating to version 1
```

--------------------------------

### CDN Setup for js-draw Editor

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Getting_started

Includes the js-draw library via a CDN and initializes the Editor. This method is convenient for quick testing or projects not using a bundler, but consider SRI for production.

```html
<!--
Replace 1.27.1 with the latest version of js-draw, which should be 1.30.1.
-->
<script src="https://cdn.jsdelivr.net/npm/js-draw@1.27.1/dist/bundle.js"></script>
<script>
const editor = new jsdraw.Editor(document.body);
editor.addToolbar();
</script>
```

--------------------------------

### js-draw Guides

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/functions/js-draw.pathVisualEquivalent

Links to various guides for using the js-draw library, including getting started, writing themes, component customization, updating the viewport, customizing tools, and positioning elements.

```APIDOC
APIDOC:
Guides:
  - Getting started: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Getting_started.html
  - Writing a theme: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Writing_a_theme.html
  - Components:
    - Adding and modifying components: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Components.Adding_and_modifying_components.html
    - Custom components: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Components.Custom_components.html
  - Updating the viewport: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Updating_the_viewport.html
  - Customizing existing tools: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Customizing_existing_tools.html
  - Positioning an element above the editor: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Positioning_an_element_above_the_editor.html
```

--------------------------------

### js-draw Editor Setup

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Components.Custom_components

Initializes the js-draw editor and adds the toolbar. This is the basic setup required before interacting with the editor or adding custom components.

```javascript
import { Editor } from 'js-draw';
const editor = new Editor(document.body);
editor.addToolbar();
```

--------------------------------

### js-draw Guides and Migrations

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/_js-draw_math.QuadraticBezierPathCommand

Links to documentation guides and migration notes for the js-draw library, covering topics from getting started to custom component development.

```APIDOC
Module: js-draw
  Documents:
    Guides:
      - Getting started
      - Writing a theme
      - Components:
        - Adding and modifying components
        - Custom components
      - Updating the viewport
      - Customizing existing tools
      - Positioning an element above the editor
    Migrations:
      - Migrating to version 1
```

--------------------------------

### js-draw Guides and Migrations

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/functions/js-draw.Vec2.of

Links to guides and migration notes for the js-draw library, providing instructions on getting started, customization, and updating between versions.

```APIDOC
Documentation Sections:
  - Guides:
    - Getting started
    - Writing a theme
    - Components (Adding and modifying, Custom components)
    - Updating the viewport
    - Customizing existing tools
    - Positioning an element above the editor
  - Migrations:
    - Migrating to version 1
```

--------------------------------

### js-draw Guides

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.ComponentBuilder

Links to various guides and documentation pages for the js-draw library, covering topics from getting started to custom component development.

```APIDOC
js-draw Guides:
  Getting started: Links to getting started guide.
  Writing a theme: Links to guide on writing themes.
  Components:
    Adding and modifying components: Links to guide on component management.
    Custom components: Links to guide on creating custom components.
  Updating the viewport: Links to guide on viewport updates.
  Customizing existing tools: Links to guide on tool customization.
  Positioning an element above the editor: Links to guide on element positioning.
```

--------------------------------

### js-draw Guides

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.ImageLoader

Links to various guides for using the js-draw library, covering topics from getting started to custom component development and updating the viewport.

```APIDOC
Guides:
  - Getting started
  - Writing a theme
  - Components:
    - Adding and modifying components
    - Custom components
  - Updating the viewport
  - Customizing existing tools
  - Positioning an element above the editor
```

--------------------------------

### js-draw Guides and Migrations

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/hierarchy

Documentation for guides and migration notes related to the js-draw library. This section helps users get started, customize themes, understand components, and manage version updates.

```APIDOC
Guides:
  - Getting started: Basic instructions for using js-draw.
  - Writing a theme: How to create custom themes.
  - Components:
    - Adding and modifying components: Details on component management.
    - Custom components: Creating custom components.
  - Updating the viewport: Information on viewport manipulation.
  - Customizing existing tools: How to modify built-in tools.
  - Positioning an element above the editor: Techniques for overlaying elements.

Migrations:
  - Migrating to version 1: Instructions for upgrading to version 1.
```

--------------------------------

### js-draw Guides and Migrations

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/modules

Provides links to essential guides for using js-draw, including getting started, writing themes, component customization, and updating the viewport. Also includes migration notes for updating to newer versions of the library.

```APIDOC
Guides:
  Getting started: Basic setup and usage of js-draw.
  Writing a theme: How to create custom themes for the editor.
  Components:
    Adding and modifying components: Extending js-draw with custom components.
    Custom components: Detailed guide on creating unique components.
  Updating the viewport: Managing and updating the editor's viewport.
  Customizing existing tools: Modifying the behavior of built-in tools.
  Positioning an element above the editor: Advanced layout techniques.

Migrations:
  Migrating to version 1: Instructions for upgrading from older versions to v1.
```

--------------------------------

### js-draw Guides

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js-draw.EditorImage

Links to various guides for using the js-draw library, covering topics from getting started to advanced customization.

```APIDOC
Guides:
  - Getting started
  - Writing a theme
  - Components:
    - Adding and modifying components
    - Custom components
  - Updating the viewport
  - Customizing existing tools
  - Positioning an element above the editor
  - Migrations:
    - Migrating to version 1
```

--------------------------------

### js-draw Guides and Migrations

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/functions/js-draw.sendTouchEvent

Provides links to essential guides for using and extending the js-draw library, including getting started, writing themes, component customization, and migration notes for version updates.

```APIDOC
Guides:
  Getting started: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Getting_started.html
  Writing a theme: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Writing_a_theme.html
  Components:
    Adding and modifying components: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Components.Adding_and_modifying_components.html
    Custom components: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Components.Custom_components.html
  Updating the viewport: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Updating_the_viewport.html
  Customizing existing tools: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Customizing_existing_tools.html
  Positioning an element above the editor: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Positioning_an_element_above_the_editor.html
Migrations:
  Migrating to version 1: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Migrations.Migrating_to_version_1.html
```

--------------------------------

### js-draw Material Icons Module

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Getting_started

API documentation for the material-icons module, including icon providers.

```APIDOC
_js-draw_material-icons.MaterialIconProvider
  - A provider class for Material Design icons.
  - Likely used to integrate Material icons into the js-draw canvas.

_js-draw_material-icons.makeMaterialIconProviderClass()
  - A factory function to create a MaterialIconProvider class.
  - Returns: typeof MaterialIconProvider - The generated MaterialIconProvider class.

_js-draw_material-icons.default
  - The default export for the material-icons module.
```

--------------------------------

### js-draw Guides

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.PointerMoveEvt

Documentation for guides related to using and extending the js-draw library. Covers topics from getting started to custom component development and tool customization.

```APIDOC
Guides:

  Getting started: Basic introduction to using js-draw.
  Writing a theme: How to create custom themes for the editor.
  Components:
    Adding and modifying components: Details on component lifecycle and customization.
    Custom components: Creating entirely new components for the editor.
  Updating the viewport: Managing and updating the editor's viewport.
  Customizing existing tools: Modifying the behavior of built-in tools.
  Positioning an element above the editor: Techniques for overlaying elements.

Migrations:

  Migrating to version 1: Instructions for upgrading from older versions.
```

--------------------------------

### js-draw Guides and Migrations

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/variables/js-draw.defaultEditorLocalization

Links to guides and migration notes for the js-draw library. These resources cover getting started, writing themes, customizing components, updating the viewport, and migrating to newer versions.

```APIDOC
Module: js-draw

Guides:
  Getting started: Basic setup and usage.
  Writing a theme: How to create custom themes.
  Components:
    Adding and modifying components: Details on component management.
    Custom components: Creating unique components.
  Updating the viewport: Managing viewport updates.
  Customizing existing tools: Modifying default tools.
  Positioning an element above the editor: Advanced layout techniques.

Migrations:
  Migrating to version 1: Instructions for upgrading from older versions.
```

--------------------------------

### Install Material Icons Dependency

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Getting_started

Installs the @js-draw/material-icons package as a development dependency using npm. This is required if you need to use material icons with js-draw.

```bash
$ npm install --save-dev @js-draw/material-icons
```

--------------------------------

### js-draw Math - Path Command Types and Shapes

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Getting_started

Details various path command types, shape abstractions, and geometric primitives.

```APIDOC
_js-draw_math.PathCommandType
  - Enum defining the types of commands used in a path (e.g., MoveTo, LineTo, CurveTo).

_js-draw_math.Abstract2DShape
  - Abstract base class for 2D geometric shapes.
  - Likely provides common methods for shape manipulation and properties.

_js-draw_math.Color4
  - Represents a color with RGBA components.
  - May include methods for color manipulation and conversion.

_js-draw_math.LineSegment2
  - Represents a line segment in 2D space.
  - Defined by two Vec2 points.

_js-draw_math.Mat33
  - Represents a 3x3 matrix, typically used for 2D transformations (translation, rotation, scaling).

_js-draw_math.Parameterized2DShape
  - Represents a 2D shape that can be parameterized, possibly for animation or interpolation.

_js-draw_math.Path
  - Represents a sequence of path commands defining a shape.
  - Likely includes methods for adding commands, calculating length, and intersections.

_js-draw_math.QuadraticBezier
  - Represents a quadratic Bezier curve segment.

_js-draw_math.Rect2
  - Represents an axis-aligned rectangle in 2D space.
  - Defined by position and dimensions.
```

--------------------------------

### js-draw Interfaces Documentation

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Getting_started

Provides links to detailed documentation for various interfaces used within the js-draw library. These interfaces define the structure and behavior of core components, events, and data models.

```APIDOC
EditorSettings:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.EditorSettings.html
  Description: Defines settings for the drawing editor.

EditorToolEvent:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.EditorToolEvent.html
  Description: Represents an event related to a tool within the editor.

EditorUndoStackUpdated:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.EditorUndoStackUpdated.html
  Description: Event triggered when the editor's undo stack is updated.

EditorViewportChangedEvent:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.EditorViewportChangedEvent.html
  Description: Event fired when the editor's viewport dimensions or position change.

GestureCancelEvt:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.GestureCancelEvt.html
  Description: Event indicating that a gesture has been cancelled.

ImageLoader:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.ImageLoader.html
  Description: Interface for loading images into the editor.

KeyPressEvent:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.KeyPressEvent.html
  Description: Event object for key press actions.

KeyUpEvent:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.KeyUpEvent.html
  Description: Event object for key release actions.

LinePathCommand:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.LinePathCommand.html
  Description: Represents a line segment command within a path.

MoveToPathCommand:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.MoveToPathCommand.html
  Description: Represents a move-to command for path construction.

PasteEvent:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.PasteEvent.html
  Description: Event triggered when content is pasted.

PathCurveIndex:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.PathCurveIndex.html
  Description: Index for a curve within a path.

PathIntersectionResult:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.PathIntersectionResult.html
  Description: Result of an intersection test between paths.

PenStyle:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.PenStyle.html
  Description: Defines the style properties of a pen or stroke.

PointerDownEvt:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.PointerDownEvt.html
  Description: Event object for pointer (mouse/touch) down actions.

PointerEvtListener:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.PointerEvtListener.html
  Description: Listener interface for pointer events.

PointerMoveEvt:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.PointerMoveEvt.html
  Description: Event object for pointer movement.

PointerUpEvt:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.PointerUpEvt.html
  Description: Event object for pointer up actions.

QuadraticBezierPathCommand:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.QuadraticBezierPathCommand.html
  Description: Represents a quadratic bezier curve command within a path.

ReadOnlyToggled:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.ReadOnlyToggled.html
  Description: Event indicating a read-only state change.

RenderablePathSpec:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.RenderablePathSpec.html
  Description: Specification for a path that can be rendered.

RenderingStyle:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.RenderingStyle.html
  Description: Defines general rendering style properties.

RestyleableComponent:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.RestyleableComponent.html
  Description: Interface for components that can have their style modified.

RestyleableComponentStyle:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.RestyleableComponentStyle.html
  Description: Defines the style properties for a restyleable component.

SelectionUpdated:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.SelectionUpdated.html
  Description: Event triggered when the editor's selection changes.

StrokeDataPoint:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.StrokeDataPoint.html
  Description: A single data point within a stroke.

StrokeRenerdingStyle:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.StrokeRenerdingStyle.html
  Description: Defines rendering style specific to strokes.

StrokeSmootherCurve:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.StrokeSmootherCurve.html
  Description: Represents a curve segment used in stroke smoothing.

SVGLoaderPlugin:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.SVGLoaderPlugin.html
  Description: Plugin interface for loading SVG content.

TextRenderingStyle:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.TextRenderingStyle.html
  Description: Defines rendering style properties for text elements.

ToolbarDropdownShownEvent:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.ToolbarDropdownShownEvent.html
  Description: Event indicating a toolbar dropdown menu has been shown.

Vec3:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.Vec3-1.html
  Description: Represents a 3-dimensional vector.
```

--------------------------------

### js-draw Default Export and Components

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Getting_started

Documentation for the default export and key components like HTMLToolbar and StrokeComponent.

```APIDOC
js-draw.default
  - The default export of the js-draw module, likely the main canvas or application class.
  - Usage: import jsDraw from 'js-draw';

js-draw.HTMLToolbar
  - Represents the HTML-based toolbar component for js-draw.
  - Likely handles user interactions for tool selection and configuration.

js-draw.StrokeComponent
  - A component related to stroke properties or rendering within js-draw.
  - May manage stroke color, width, and style.
```

--------------------------------

### js-draw Guides

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/functions/js-draw.createRestyleComponentCommand

Documentation for various guides within the js-draw library, covering topics from getting started to advanced component customization and viewport updates.

```APIDOC
Guides:
  Getting started: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Getting_started.html
  Writing a theme: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Writing_a_theme.html
  Components:
    Adding and modifying components: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Components.Adding_and_modifying_components.html
    Custom components: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Components.Custom_components.html
  Updating the viewport: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Updating_the_viewport.html
  Customizing existing tools: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Customizing_existing_tools.html
  Positioning an element above the editor: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Positioning_an_element_above_the_editor.html
```

--------------------------------

### js-draw Guides

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/types/js-draw.OnDetermineExportRectListener

Links to various guides for using the js-draw library, covering topics from getting started and writing themes to customizing components and updating the viewport.

```APIDOC
Guides:
  Getting started: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Getting_started.html
  Writing a theme: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Writing_a_theme.html
  Components:
    Adding and modifying components: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Components.Adding_and_modifying_components.html
    Custom components: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Components.Custom_components.html
  Updating the viewport: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Updating_the_viewport.html
  Customizing existing tools: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Customizing_existing_tools.html
  Positioning an element above the editor: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Positioning_an_element_above_the_editor.html
```

--------------------------------

### js-draw Guides and Migrations

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js-draw.SerializableCommand

References to guides and migration notes for the js-draw library. These cover topics such as getting started, theme customization, component development, and updating to new versions.

```APIDOC
js-draw Documentation:
  Guides:
    Getting started: Basic setup and usage.
    Writing a theme: Customizing the visual appearance.
    Components:
      Adding and modifying components: Extending editor functionality.
      Custom components: Creating new component types.
    Updating the viewport: Managing canvas view.
    Customizing existing tools: Modifying tool behavior.
    Positioning an element above the editor: UI integration.
  Migrations:
    Migrating to version 1: Instructions for upgrading from older versions.
```

--------------------------------

### js-draw Guides

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.EditorLocalization

Documentation for guides related to the js-draw library. This section covers getting started, writing themes, component management, viewport updates, tool customization, and element positioning.

```APIDOC
js-draw Guides:
  Getting started
  Writing a theme
  Components:
    Adding and modifying components
    Custom components
  Updating the viewport
  Customizing existing tools
  Positioning an element above the editor
```

--------------------------------

### js-draw Math API Reference

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Getting_started

Provides API documentation for the math-related types and functions within the js-draw library. This includes geometric primitives and path manipulation utilities.

```APIDOC
js-draw Math Module API

Types:
  Vec3: Interface representing a 3-dimensional vector.
  Mat33Array: Type alias for a 3x3 matrix, typically represented as an array.
  PathCommand: Type representing a command within a path definition.
  Point2: Type representing a 2-dimensional point.

Functions:
  comparePathIndices(a: PathIndex, b: PathIndex): number
    Compares two path indices for ordering.

  stepPathIndexBy(index: PathIndex, step: number): PathIndex
    Advances or retreats a path index by a specified step.

  toRoundedString(value: number, precision?: number): string
    Converts a number to a string with a specified or default precision.
```

--------------------------------

### js-draw Examples and Resources

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/js-draw

Provides links to external resources for js-draw, including general examples, guides for adding custom pen types, information on material icon themes, and more comprehensive documentation.

```APIDOC
Examples and Resources:
  - Link to general examples: https://github.com/personalizedrefrigerator/js-draw/blob/main/docs/examples.md
  - Guide for custom pen types: https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/Additional_Documentation.CustomizingTools__.html#md:adding-a-new-pen-type
  - Material icon theme: https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/_js-draw_material-icons.html#md:js-drawmaterial-icons
  - More documentation: https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/Guides.html
```

--------------------------------

### Initialize js-draw Editor with Bundled Styles

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Getting_started

Initializes the js-draw Editor and adds a toolbar using pre-bundled styles. This approach is suitable for bundlers that do not directly support CSS imports, applying styles after loading.

```javascript
import Editor from 'js-draw';
import 'js-draw/bundledStyles';
  
const editor = new Editor(document.body);
editor.addToolbar();
```

--------------------------------

### js-draw Classes

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Getting_started

Core classes that form the foundation of the js-draw library, including shapes, components, tools, renderers, and utilities.

```APIDOC
Abstract2DShape:
  Base class for all 2D shapes.

AbstractComponent:
  Abstract base class for all components in the editor.

AbstractRenderer:
  Abstract base class for rendering components.

AbstractToolbar:
  Abstract base class for toolbars.

ActionButtonWidget:
  Widget for action buttons in the toolbar.

BackgroundComponent:
  Component for managing the canvas background.

BaseTool:
  Base class for all tools.

BaseToolWidget:
  Base class for tool-specific widgets.

BaseWidget:
  Base class for all UI widgets.

CanvasRenderer:
  Renderer that uses the HTML Canvas API.

Color4:
  Represents a color with RGBA components.

Command:
  Base class for editor commands.

Display:
  Manages the display and rendering of the editor.

DocumentPropertiesWidget:
  Widget for editing document properties.

DummyRenderer:
  A placeholder renderer, useful for testing or specific scenarios.

Duplicate:
  Command for duplicating selected objects.

Editor:
  The main class for the js-draw editor.

EditorImage:
  Represents an image within the editor.

Erase:
  Command for erasing parts of the drawing.

EraserTool:
  Tool for erasing elements.

EraserToolWidget:
  Widget for the eraser tool.

EventDispatcher:
  Manages event dispatching within the editor.

HandToolWidget:
  Widget for the hand tool.

IconProvider:
  Provides icons for various UI elements.

ImageComponent:
  Component that displays an image.

InputMapper:
  Maps input events to editor actions.

InsertImageWidget:
  Widget for inserting images.

KeyBinding:
  Represents a keyboard shortcut binding.

KeyboardShortcutManager:
  Manages keyboard shortcuts.

LineSegment2:
  Represents a 2D line segment.

Mat33:
  Represents a 3x3 matrix, often used for transformations.
```

--------------------------------

### js-draw Types Documentation

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Getting_started

Provides links to detailed documentation for various types used within the js-draw library. These types define function signatures, callbacks, and data structures.

```APIDOC
ComponentAddedListener:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/types/js-draw.ComponentAddedListener.html
  Description: Callback function type for when a component is added.

ComponentBuilderFactory:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/types/js-draw.ComponentBuilderFactory.html
  Description: Factory type for creating component builders.

DeserializeCallback:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/types/js-draw.DeserializeCallback.html
  Description: Callback function type for deserializing data.

EditorEventDataType:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/types/js-draw.EditorEventDataType.html
  Description: Type alias for the data payload of editor events.

EditorNotifier:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/types/js-draw.EditorNotifier.html
  Description: Type for a function that notifies about editor state changes.

HTMLPointerEventFilter:
  URL: https://personalizedrefrigerator.github.io/js-draw/typedoc/types/js-draw.HTMLPointerEventFilter.html
  Description: Type for a filter function applied to HTML pointer events.
```

--------------------------------

### js-draw Core Functions

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Getting_started

Provides essential utility functions for the js-draw library, such as event handling and path manipulation.

```APIDOC
sendTouchEvent(event: TouchEvent)
  - Simulates a touch event within the js-draw canvas.
  - Parameters:
    - event: The TouchEvent object to send.
  - Returns: void

stepPathIndexBy(path: Path, index: number, step: number)
  - Advances or rewinds a path by a specified index step.
  - Parameters:
    - path: The Path object to manipulate.
    - index: The current index within the path.
    - step: The amount to step the index by.
  - Returns: number - The new index after stepping.

toRoundedString(value: number, precision?: number)
  - Converts a number to a rounded string representation.
  - Parameters:
    - value: The number to convert.
    - precision: The number of decimal places to round to (optional).
  - Returns: string - The rounded string representation.

uniteCommands(commands: PathCommand[])
  - Combines consecutive identical path commands into a single command.
  - Parameters:
    - commands: An array of PathCommand objects.
  - Returns: PathCommand[] - An array of consolidated path commands.
```

--------------------------------

### js-draw Math - Path Command Interfaces

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Getting_started

Defines interfaces for specific types of path commands used in js-draw.

```APIDOC
_js-draw_math.CubicBezierPathCommand
  - Interface for a cubic Bezier curve path command.
  - Typically includes control points and an end point.

_js-draw_math.LinePathCommand
  - Interface for a line segment path command.
  - Defines the start and end points of the line.

_js-draw_math.MoveToPathCommand
  - Interface for a 'move to' path command.
  - Sets the starting point for a new subpath.

_js-draw_math.PathCurveIndex
  - Interface representing an index into a specific curve within a path.

_js-draw_math.PathIntersectionResult
  - Interface for the result of an intersection test between paths or shapes.

_js-draw_math.QuadraticBezierPathCommand
  - Interface for a quadratic Bezier curve path command.
  - Includes a control point and an end point.
```

--------------------------------

### js-draw Math Utilities - Vec3

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Getting_started

Documentation for the Vec3 class, representing 3D vectors and related operations.

```APIDOC
_js-draw_math.Vec3
  - Represents a 3-dimensional vector.
  - Properties:
    - unitX: A Vec3 representing the unit vector along the X-axis.
    - unitY: A Vec3 representing the unit vector along the Y-axis.
    - unitZ: A Vec3 representing the unit vector along the Z-axis.
    - zero: A Vec3 representing the zero vector (0, 0, 0).
  - Methods:
    - of(x: number, y: number, z: number): Vec3 - Creates a new Vec3 from x, y, and z coordinates.
  - Usage Example:
    const vec = _js-draw_math.Vec3.of(1, 2, 3);
```

--------------------------------

### js-draw Core Modules and Guides

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js-draw.UndoRedoHistory

Overview of the js-draw library's main modules, including access to guides on getting started, writing themes, components, and migrations.

```APIDOC
js-draw Module:
  - Guides:
    - Getting started
    - Writing a theme
    - Components (Adding/modifying, Custom)
    - Updating the viewport
    - Customizing existing tools
    - Positioning an element above the editor
  - Migrations:
    - Migrating to version 1
  - js-draw Submodule:
    - Vec2 (Vector 2D type)
    - Vec3 (Vector 3D type)
    - Various Enums (BackgroundComponentBackgroundType, ComponentSizingMode, EditorEventType, EraserMode, InputEvtType, PanZoomMode, PathCommandType, PointerDevice, RenderingMode, SelectionMode)
```

--------------------------------

### js-draw Math Utilities - Vec2

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Getting_started

Documentation for the Vec2 class, representing 2D vectors and related operations.

```APIDOC
_js-draw_math.Vec2
  - Represents a 2-dimensional vector.
  - Properties:
    - unitX: A Vec2 representing the unit vector along the X-axis.
    - unitY: A Vec2 representing the unit vector along the Y-axis.
    - zero: A Vec2 representing the zero vector (0, 0).
  - Methods:
    - of(x: number, y: number): Vec2 - Creates a new Vec2 from x and y coordinates.
    - ofXY(x: number, y: number): Vec2 - Alias for 'of', creates a new Vec2.
  - Usage Example:
    const vec = _js-draw_math.Vec2.of(5, 10);
```

--------------------------------

### Initialize js-draw Editor with CSS Import

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Getting_started

Initializes the js-draw Editor and adds a toolbar. This method requires a bundler that supports importing CSS files, such as Webpack with css-loader.

```javascript
import Editor from 'js-draw';
import 'js-draw/styles';
  
const editor = new Editor(document.body);
editor.addToolbar();
```

--------------------------------

### js-draw Text Component

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Getting_started

Details the Text component used for handling text elements within js-draw.

```APIDOC
js-draw.Text
  - Component for managing and rendering text objects.
  - Likely includes methods for text content, styling, and positioning.
```

--------------------------------

### js-draw Material Icon Provider Example

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/functions/_js-draw_material-icons.makeMaterialIconProviderClass

An example demonstrating how to import and use the `makeMaterialIconProviderClass` function to create a `MaterialIconProvider` and integrate it with a `js-draw` editor instance.

```javascript
import * as jsdraw from 'js-draw';
import { makeMaterialIconProviderClass } from '@js-draw/material-icons';

// Create a MaterialIconProvider class bound to the jsdraw instance
const MaterialIconProvider = makeMaterialIconProviderClass(jsdraw);

// Initialize a new js-draw editor with the MaterialIconProvider
const editor = new jsdraw.Editor(
  document.body, 
  { iconProvider: new MaterialIconProvider() },
);

// Add the toolbar to the editor
editor.addToolbar();
```

--------------------------------

### js-draw Enums

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/documents/Guides.Getting_started

Enumerations available in the js-draw library, representing various modes, types, and states within the editor.

```APIDOC
ComponentSizingMode:
  Represents how components are sized.

EditorEventType:
  Defines the types of events that can occur within the editor.

EraserMode:
  Specifies the behavior of the eraser tool.

InputEvtType:
  Categorizes different types of input events.

PanZoomMode:
  Controls the behavior of pan and zoom operations.

PathCommandType:
  Defines the types of commands used in path data.

PointerDevice:
  Identifies the type of pointer device being used.

RenderingMode:
  Specifies how the canvas or components are rendered.

SelectionMode:
  Determines how objects are selected.

ToolbarWidgetTag:
  Tags used to identify specific widgets within the toolbar.

UndoEventType:
  Types of events related to undo/redo functionality.
```

--------------------------------

### Initialize Editor with Toolbar

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/assets/doctest

Provides a basic example of initializing a js-draw editor instance attached to the document body and adding a default toolbar to it.

```javascript
import { Editor } from 'js-draw';
  
// Create an editor with a toolbar:
const editor = new Editor(document.body);
editor.addToolbar();
```

--------------------------------

### js-draw Guides and Migrations

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/js-draw

Links to guides and migration notes for the js-draw library. These resources explain how to customize existing tools, position elements, and upgrade to newer versions of the library.

```APIDOC
Guides:
  Customizing existing tools: Explains how to modify or extend built-in tools.
  Positioning an element above the editor: Details on layering elements over the js-draw canvas.

Migrations:
  Migrating to version 1: Instructions and considerations for upgrading from older versions to v1.
```

--------------------------------

### js-draw Editor Initialization Example

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.EditorSettings

Example demonstrating how to initialize the js-draw Editor with custom settings, specifically filtering pen types to only show the polyline pen in the toolbar.

```javascript
import {Editor} from 'js-draw';

const editor = new Editor(document.body, {
  // Only allow selecting the polyline pen from the toolbar.
  pens: { filterPenTypes: p => p.id === 'polyline-pen' },
});

editor.addToolbar();

// Notice that this setting only affects the toolbar GUI.
```

--------------------------------

### js-draw Guides

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/functions/js-draw.makeOutlinedRectangleBuilder

Documentation guides for using the js-draw library, covering getting started, component development, and customization.

```APIDOC
js-draw Guides:
  Getting started: Introduction to js-draw and basic usage.
  Writing a theme: How to create custom themes for the editor.
  Components:
    Adding and modifying components: Guide to extending js-draw with new components.
    Custom components: Detailed instructions for creating custom components.
  Updating the viewport: Information on managing the editor's viewport.
  Customizing existing tools: How to modify the behavior of built-in tools.
  Positioning an element above the editor: Techniques for overlaying elements.
```

--------------------------------

### js-draw Material Icons Setup

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/_js-draw_material-icons

Demonstrates how to initialize the js-draw editor with the MaterialIconProvider and add a toolbar. Includes CSS imports for styling and setup for both direct imports and bundler usage.

```javascript
import { Editor, makeEdgeToolbar } from 'js-draw';
import { MaterialIconProvider } from '@js-draw/material-icons';
  
// Apply js-draw CSS
import 'js-draw/styles';
  
const editor = new Editor(document.body, {
  iconProvider: new MaterialIconProvider(),
});
  
// Ensure that there is enough room for the toolbar
editor.getRootElement().style.minHeight = '500px';
  
// Add a toolbar
const toolbar = makeEdgeToolbar(editor);
  
// ...with the default elements
toolbar.addDefaults();
```

```javascript
import Editor from 'js-draw';
import { MaterialIconProvider } from '@js-draw/material-icons';
import 'js-draw/bundledStyles';
  
const editor = new Editor(document.body, {
  iconProvider: new MaterialIconProvider(),
});
  
// Add a toolbar that uses the icons
editor.addToolbar();
```

--------------------------------

### js-draw Module Structure

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js-draw.SelectAllShortcutHandler

Overview of the js-draw module structure, including guides for getting started, customization, and specific features like components and viewport updates.

```APIDOC
js-draw Module:
  - Guides:
    - Getting started
    - Writing a theme
    - Components:
      - Adding and modifying components
      - Custom components
    - Updating the viewport
    - Customizing existing tools
    - Positioning an element above the editor
  - Migrations:
    - Migrating to version 1
  - js-draw (Sub-module):
    - Vec2 (Type/Module)
```

--------------------------------

### Mat33.identity.toString() Example

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/assets/doctest

Shows how to get a string representation of the identity matrix using the toString() method. This is helpful for debugging or displaying matrix values.

```javascript
import { Mat33 } from '@js-draw/math';
console.log(Mat33.identity.toString());
```

--------------------------------

### Quadratic Bezier Curve

Source: https://personalizedrefrigerator.github.io/js-draw/typedoc/assets/doctest

Creates a Quadratic Bezier curve using start, control, and end points. This example imports QuadraticBezier and Vec2 from '@js-draw/math' and logs the created curve object.

```javascript
import { QuadraticBezier, Vec2 } from '@js-draw/math';
  
const startPoint = Vec2.of(4, 3);
const controlPoint = Vec2.of(1, 1);
const endPoint = Vec2.of(1, 3);
  
const curve = new QuadraticBezier(
startPoint,
controlPoint,
endPoint,
);
  
console.log('Curve:', curve);
```
Tokens:
Raw