Ngx-boxy-svg NPM

NgxBoxySvg

This library was generated with Angular CLI version 17.3.0.

This library acts as a wrapper to provide a simple way to include boxy-svg (https://boxy-svg.com/embed) into your Angular project. This component integrates the powerful Boxy SVG editor into your Angular application, providing a rich set of features for SVG manipulation and export.

Compatibility

This library was created with backwards capability in mind. It should work with Angular 14 and above.

Installation

npm install ngx-boxy-svg

Usage

import { NgxBoxySvgComponent } from "ngx-boxy-svg";

<ngx-boxy-svg></ngx-boxy-svg>

Inputs

Input	Type	Default	Description
`src`	`string \\| null`	`null`	URL of the edited SVG file. `null` if the file was loaded from disk using the `setSVG` method.
`name`	`string`	`"Boxy SVG"`	The app name. Shown in the top left app window corner and by the "About" dialog.
`logo`	`string \\| undefined`	`"https://boxy-svg.com/logo.svg"`	URL to the app logo. Shown by the "About" dialog.
`menu`	`string \\| undefined`	`"https://boxy-svg.com/menus/default.html"`	URL to the app main menu in HTML format.
`locale`	`string \\| undefined`	`"https://boxy-svg.com/locales/en.ftl"`	URL to the UI localization file in Fluent format. Multiple URLs can be provided for fallback when a message is not found in the primary file.
`theme`	`string \\| undefined`	`"https://boxy-svg.com/themes/fluent.css"`	URL to the UI theme file in CSS format.
`icons`	`string \\| string[] \\| undefined`	`"https://boxy-svg.com/icons/default.svg"`	URL to the iconset file in SVG format. Multiple URLs can be provided for fallback when an icon is not found in the primary file.
`accent`	`string \\| undefined`	`"blue"`	UI Accent color. Can be a hex color code (e.g., `"#bada55"`) or a preset color name (e.g., `"blue"`, `"purple"`, `"pink"`, etc.).
`tools`	`string[] \\| undefined`	`["transform", "edit", "pan", "spline", ...]`	IDs of tools to be loaded.
`panels`	`string[] \\| undefined`	`["fill", "stroke", "compositing", "typography", ...]`	IDs of panels to be loaded.
`basePath`	`string \\| undefined`	`undefined`	Specifies the base path to load the Boxy SVG script, if it's not loaded from the default Boxy SVG website.

Outputs

Output	Type	Description
`loaded`	`EventEmitter<void>`	Emitted when the Boxy SVG element has been added to the DOM.
`change`	`EventEmitter<any>`	Fired each time the user manipulates the currently edited SVG document.
`configchange`	`EventEmitter<any>`	Fired when internal app settings have changed. The changed key can be accessed via `event.detail.key`, and the new value via `event.detail.value`.
`command`	`EventEmitter<Event>`	Fired when the user triggers a command by clicking a menu item or pressing a keyboard shortcut. The command ID can be accessed via `event.detail.id`.

Public Methods

The NgxBoxySvgComponent provides several public methods for interacting with the Boxy SVG editor:

`getSVG(): Promise<string>`

Gets the currently edited SVG document as a string.

`setSVG(svg: string): Promise<void>`

Sets the SVG document to be edited.

`insertSVG(svg: string): Promise<void>`

Inserts another SVG document into the currently edited SVG document.

`getConfig(key?: string): any`

Gets the advanced app configuration. Optionally, provide a key to retrieve a specific configuration value.

`setConfig(key: string, value: any): void`

Sets the advanced app configuration.

`getCommands(): Promise<string[]>`

Gets the IDs of all available commands.

`execCommand(id: string): Promise<void>`

Executes a command by its ID.

`export(options: Array<PNGFileOptions | JPEGFileOptions | WebPFileOptions | PDFFileOptions>): Promise<Array<Blob>>`

Exports the currently edited SVG document to a file. Returns an array of exported files as blobs.

`insertMenuHTML(selector: string, position: string, menuHTML: string): Promise<void>`

Insert your own HTML fragment into the app menu.

Example

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <ngx-boxy-svg
      [name]="'My SVG Editor'"
      [accent]="'purple'"
      (loaded)="onEditorLoaded()"
      (change)="onEditorChange($event)"
    ></ngx-boxy-svg>
  `,
})
export class AppComponent {
  onEditorLoaded() {
    console.log('Boxy SVG editor loaded');
  }

  onEditorChange(event: any) {
    console.log('SVG document changed', event);
  }
}

Credits

This Angular wrapper component was created by Raffael Prem.

The actual SVG editing functionality is provided by the Boxy SVG application. Full credit for the design and development of the SVG editor goes to the creators of Boxy SVG (https://boxy-svg.com).

This library simply provides a way to integrate Boxy SVG into Angular applications.