### Installing Pikaso with Yarn (JavaScript)

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/GettingStarted/Installation/doc.md

Installs the Pikaso library using the Yarn package manager and adds it as a dependency to the project's package.json file. Requires Yarn installed.

```js
yarn add pikaso
```

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

### Installing Pikaso with NPM (JavaScript)

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/GettingStarted/Installation/doc.md

Installs the Pikaso library using the Node Package Manager (NPM) and saves it as a dependency in the project's package.json file. Requires Node.js and NPM installed.

```js
npm install pikaso --save
```

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

### Loading Pikaso via Script Tag (HTML)

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/GettingStarted/Installation/doc.md

Includes the Pikaso library directly into an HTML document by adding a script tag pointing to the UMD bundle hosted on unpkg. This method does not require a build tool or package manager.

```html
<srcipt src="https://unpkg.com/pikaso@latest/umd/pikaso.min.js" type="text/javascript" />
```

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

### Creating a Pikaso React Hook (JavaScript)

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/GettingStarted/Usage/doc.md

Provides a JavaScript example of a custom React hook (`usePikaso`) that initializes the Pikaso editor within a `useEffect` hook. It returns a ref for the container element and the Pikaso instance. Requires React and Pikaso.

```jsx
import { useRef, useState, useEffect, RefObject } from 'react'

import Pikaso from 'pikaso'

export default function usePikaso(
  options = {}
) {
  const [instance, setInstance] = useState(null)
  const ref = useRef(null)

  useEffect(() => {
    const editor = new Pikaso({
      container: ref.current,
      ...options
    })

    setInstance(editor)
  }, [])

  return [ref, instance]
}
```

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

### Creating a Pikaso React Hook (TypeScript)

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/GettingStarted/Usage/doc.md

Provides a TypeScript example of a custom React hook (`usePikaso`) that initializes the Pikaso editor within a `useEffect` hook. It returns a ref for the container element and the Pikaso instance. Requires React and Pikaso.

```tsx
import { useRef, useState, useEffect, RefObject } from 'react'

import Pikaso, { Settings } from 'pikaso'

export default function usePikaso(
  options: Partial<Settings> = {}
): [RefObject<HTMLDivElement>, Pikaso | null] {
  const [instance, setInstance] = useState<Nullable<Pikaso>>(null)
  const ref = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const editor = new Pikaso({
      container: ref.current as HTMLDivElement,
      ...options
    })

    setInstance(editor)
  }, [])

  return [ref, instance]
}
```

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

### Starting Interactive Polygon Drawing (TypeScript)

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/Drawing/doc.md

Demonstrates how to begin an interactive drawing process for a polygon shape using the `draw` method, including configuration options like specifying the number of sides for the polygon.

```typescript
editor.shapes.polygon.draw({
  fill: 'red',
  sides: 5
})
```

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

### Starting Interactive Circle Drawing (TypeScript)

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/Drawing/doc.md

Shows how to begin an interactive drawing process for a circle shape using the `draw` method. Once called, the user can interact with the canvas to define and create the circle.

```typescript
editor.shapes.circle.draw({
  fill: 'blue'
})
```

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

### Overriding Pikaso Settings During Initialization and Component Use (JavaScript)

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/GettingStarted/Configuration/doc.md

Shows how to override default settings both during the initial editor creation and specifically for a component's operation, such as starting the cropper. Settings provided during component methods take precedence over global or initialization settings.

```js
import Pikaso from 'pikaso'

const editor = new Pikaso({
  container: document.getElementById('<YOUR_DIV_ID>'),
  transformer: {
    borderStroke: 'green',
    borderStrokeWidth: 1
  }
})

editor.cropper.start({
  transformer: {
    borderStroke: 'yellow',
    borderStrokeWidth: 2
  }
})
```

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

### Installing Canvas Dependency (Node.js)

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Advanced/Nodejs/doc.md

Installs the 'canvas' package using npm, which is a required dependency for using Pikaso in a Node.js environment to handle canvas operations.

```bash
npm install canvas
```

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

### Configuring and Using Pikaso.js Selection API (TypeScript)

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/Selection/doc.md

Demonstrates how to initialize the Pikaso editor with custom selection settings including interactive mode, keyboard shortcuts, transformer appearance, and zone styling. It also provides examples of using the selection API to select, deselect, toggle, multi-select, delete, move, and apply filters to shapes programmatically.

```TypeScript
// configure selection
const editor = new Pikaso({
  container: <element>,
  selection: {
    interactive: true, // enable or disable visual selection
    keyboard: {
      enabled: true, // enable or disable keyboard shortcuts
      movingSpaces: 5,
      map: {
        delete: ['Backspace', 'Delete'],
        moveLeft: ['ArrowLeft'],
        moveRight: ['ArrowRight'],
        moveUp: ['ArrowUp'],
        moveDown: ['ArrowDown'],
        deselect: ['Escape']
      }
    },
    transformer: {
      borderStroke: '#fff',
      borderStrokeWidth: 3,
      anchorSize: 15,
      anchorFill: '#fff',
      anchorStroke: '#fff',
      anchorStrokeWidth: 1,
      anchorCornerRadius: 30,
      borderDash: [0, 0]
    },
    zone: {
      fill: 'rgba(105, 105, 105, 0.7)',
      stroke: '#dbdbdb'
    }
  }
})

// creates a circle
const shape = editor.board.circle.insert({ /* config */ })

// select the created shape
shape.select() // or editor.board.selection.add([shape])

// deselect the shape
shape.deselect()

// toggle shape selection
editor.board.selection.toggle(shape)

// select all shapes in the board
editor.board.selection.selectAll()

// deselect all shapes in the board
editor.board.selection.deselectAll()

// select multiple shapes
editor.board.selection.multi([shape, ...moreShapes])

// delete all selected shapes
editor.board.selection.delete()

// move the selected shapes
editor.board.selection.moveX(100)
editor.board.selection.moveY(100)

// add filter to the selected shapes
editor.board.selection.addFilter({
  name: 'blur',
  options: {
    blurRadius: 10
  }
})
```

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

### Inserting Image Shapes in Pikaso.js

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/Image/doc.md

Demonstrates how to add an Image shape to the Pikaso.js editor using the `editor.shapes.image.insert` method. Examples include creating an image from a URL, a File object, or an existing Konva.Image instance. The method accepts the source and an optional configuration object.

```js
// create a new image from url
editor.shapes.image.insert('<URL>', {
  // config
})

// create a new image from file
editor.shapes.image.insert('<FILE>', {
  // config
})

// create a new image from Konva
const konvaImage = new Konva.Image({
  image: <Image>
})

editor.shapes.image.insert(konvaImage, {
  // config
})
```

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

### Accessing and Modifying Background Models (JavaScript)

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/Background/doc.md

This snippet demonstrates how to access the underlying Image and Rect models of the background layer in PikasoJS. It shows how to get references to the `image` and `overlay` properties and apply methods, such as adding a filter to the image model, leveraging the fact that these models inherit from ShapeModel.

```javascript
// Access to background's image model
const backgroundImage = editor.board.background.image

// Access to background's rect model
const backgroundOverlay = editor.board.background.overlay

// All public methods and properties of ShapeModel can be accessed
backgroundImage.addFilter({
  name: 'Blur',
  options: {
    blurRadius: 10
  }
})
```

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

### Event Handling with on and off Methods (TypeScript)

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/Events/doc.md

This snippet demonstrates how to subscribe and unsubscribe to different types of events in Pikaso using the `editor.on` and `editor.off` methods. It shows examples for subscribing/unsubscribing to all events ('*'), a single specific event, and multiple events using an array of event names. The callback function receives event data.

```TypeScript
// subscribe to all events
editor.on('*', data => {
  console.log(data)
})

// subscribe to shape:create event
editor.on('shape:create', data => {
  console.log(data)
})

// unsubscribe from shape:create event
editor.off('shape:create', data => {
  console.log(data)
})

// subscribe to shape:create and history:undo events
editor.on(['shape:create', 'history:undo'], data => {
  console.log(data)
})

// unsubscribe from shape:create and history:undo events
editor.off(['shape:create', 'history:undo'], data => {
  console.log(data)
})
```

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

### Configuring Measurement Tag in Pikaso TypeScript

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/MeasurementTag/doc.md

This snippet demonstrates how to enable and customize the measurement tag feature when creating a new Pikaso canvas instance. The measurement tag configuration object allows setting properties like margin, background style (cornerRadius, fill), and text style (fill, padding, fontSize, fontStyle). This configuration must be done during the initial setup.

```TypeScript
// it is only possible to enable measurement tags when creating the canvas editor
new Pikaso({
  /* other configurations */
  measurement: {
    margin: 20,
    background: {
      cornerRadius: 5,
      fill: 'purple'
    },
    text: {
      fill: '#fff',
      padding: 5,
      fontSize: 14,
      fontStyle: 'bold'
    }
  }
})
```

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

### Inserting and Drawing Custom Heart Shape (TypeScript)

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Advanced/CreateCustomShapes/doc.md

This snippet provides examples of how to use the registered custom heart shape within the Pikaso editor. It shows how to statically insert a heart shape at a specific position and scale using the insert method with configuration, and how to initiate interactive drawing by calling insert without arguments. This demonstrates the usage of the newly created custom shape.

```TypeScript
// create the heart shape
editor.shapes.heart.insert({
  x: 100,
  y: 100,
  scale: {
    x: 6,
    y: 6
  }
})

// start drawing heart shape
editor.shapes.heart.insert()
```

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

### Implementing Heart Shape Drawing Logic (TypeScript)

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Advanced/CreateCustomShapes/doc.md

This snippet defines the HeartDrawer class, extending Pikaso's ShapeDrawer. It implements the drawing logic for the heart shape, including creating the Konva node with SVG path data and handling interactive drawing by scaling the shape based on the distance from the start point. It manages the visual representation and interaction of the heart shape on the canvas.

```TypeScript
import { Konva, Board, ShapeDrawer, getPointsDistance } from 'pikaso'

import { HeartModel } from './HeartModel'

export class HeartDrawer extends ShapeDrawer<Konva.Path, Konva.PathConfig> {
  public node: Konva.Path | null = null

  constructor(board: Board) {
    super(board, 'Heart')
  }

  public insert(config: Konva.PathConfig): HeartModel {
    return super.insert(config)
  }

  public draw(config: Partial<Konva.PathConfig> = {}) {
    super.draw(config)
  }

  protected createShape(config: Omit<Konva.PathConfig, 'data'>): HeartModel {
    this.node = new Konva.Path({
      fill: 'red',
      ...config,
      data: 'M12 21.593c-5.63-5.539-11-10.297-11-14.402 0-3.791 3.068-5.191 5.281-5.191 1.312 0 4.151.501 5.719 4.457 1.59-3.968 4.464-4.447 5.726-4.447 2.54 0 5.274 1.621 5.274 5.181 0 4.069-5.136 8.625-11 14.402'
    })

    return new HeartModel(this.board, this.node)
  }

  /**
   * Starts drawing a heart shape
   */
  protected onStartDrawing() {
    super.onStartDrawing()

    if (!this.isDrawing) {
      return
    }

    this.createShape({
      x: this.startPoint.x,
      y: this.startPoint.y,
      scaleX: 0,
      scaleY: 0,
      ...this.config
    })
  }

  /**
   * Continues drawing the heart by changing its scale
   */
  protected onDrawing(e: Konva.KonvaEventObject<MouseEvent>) {
    super.onDrawing(e)

    if (!this.node) {
      return
    }

    const point = this.board.stage.getPointerPosition()!
    const distance = getPointsDistance(point, this.getShapePosition())

    this.node.setAttrs({
      x: point.x - this.node.width(),
      scaleX: distance / 10,
      scaleY: distance / 10
    })
  }
}
```

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

### Initializing Pikaso in JavaScript

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/GettingStarted/Usage/doc.md

Demonstrates the basic initialization of the Pikaso editor by creating a new instance and providing a DOM element container. This requires the Pikaso library to be imported.

```javascript
import Pikaso from 'pikaso'

const editor = new Pikaso({
  container: document.getElementById('<YOUR_DIV_ID>')
})
```

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

### Initializing Pikaso Editor with Custom Settings (JavaScript)

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/GettingStarted/Configuration/doc.md

Demonstrates how to initialize the Pikaso editor instance using a configuration object. This allows overriding default settings globally for the editor instance upon creation.

```js
import Pikaso from 'pikaso'

const editor = new Pikaso({
  container: document.getElementById('<YOUR_DIV_ID>'),
  disableCanvasContextMenu: false,
  containerClassName: 'foo',
  selection: {
    interactive: false,
  },
  // rest of settings
})
```

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

### Initializing Pikaso with Default Snap To Grid (TypeScript)

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/SnapGrid/doc.md

Demonstrates how to initialize the Pikaso editor with the Snap To Grid feature enabled using its default configuration. Requires a container element ID.

```TypeScript
// Snap To Grid lines have the following default style
// {
//   stroke: '#000',
//   strokeWidth: 1,
//   dash: [2, 6],
// }
const editor = new Pikaso({
  container: document.getElementById('<YOUR_DIV_ID>'),
  snapToGrid: {}
})
```

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

### Initializing Pikaso with Custom Snap To Grid Styles (TypeScript)

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/SnapGrid/doc.md

Shows how to initialize the Pikaso editor and customize the appearance of the Snap To Grid lines by providing specific style options like stroke color, width, and dash pattern. Requires a container element ID.

```TypeScript
// Line styles can be overridden
const editor = new Pikaso({
  container: document.getElementById('<YOUR_DIV_ID>'),
  snapToGrid: {
    strokeWidth: 1,
    stroke: 'purple',
    dash: [5, 5]
  }
})
```

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

### Initializing Pikaso Editor (Node.js)

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Advanced/Nodejs/doc.md

Imports the Pikaso class using require and initializes a new Pikaso editor instance with specified dimensions (width and height) for use in a Node.js environment.

```javascript
const { Pikaso } = require('pikaso')

const editor = new Pikaso({
  width: 800,
  height: 600
})
```

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

### Applying Flip Operations in Pikaso.js

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/Flip/doc.md

This snippet demonstrates various ways to apply flip operations using the Pikaso.js editor. It shows how to flip the entire board, the background image, a selection of shapes, and individual shape instances.

```TypeScript
// flip the board including its active shapes
editor.board.flip.vertical()
editor.board.flip.horizontal()

// flip background
editor.board.background.image.flipX()
editor.board.background.image.flipY()

// flip selected shapes
editor.board.flip.vertical(editor.board.selection.shapes)
editor.board.flip.horizontal(editor.board.selection.shapes)

// flip a shape
const circle = editor.shapes.circle.insert({
  fill: 'red',
  x: 100,
  y: 100,
  radius: 50
})

circle.flipX()
circle.flipY()

// or
editor.board.flip.vertical([circle])
editor.board.flip.horizontal([circle])
```

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

### Allowing All User Agents (robots.txt)

Source: https://github.com/pikasojs/pikaso-site/blob/master/public/robots.txt

This snippet provides a basic robots.txt configuration that allows all web crawlers (user agents) to access all paths on the website. The `User-agent: *` directive applies the rules to all bots, and `Disallow:` with an empty value means no paths are disallowed.

```robots.txt
User-agent: *
Disallow:
```

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

### Exporting Board to Image using PikasoJS

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/ImportExport/doc.md

Exports the current state of the board workspace as an image. An optional configuration object can be provided to customize the export process.

```javascript
// export to image
editor.export.toImage({
  /* export config */
})
```

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

### Default Pikaso Configuration Settings (JSON)

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/GettingStarted/Configuration/doc.md

Provides the default configuration settings used by the Pikaso editor, covering various components like transformer, cropper, drawing, selection, and history. These settings can be overridden during initialization or component-specific operations.

```json
{
  "disableCanvasContextMenu": true,
  "containerClassName": "pikaso",
  "transformer": {
    "borderDash": [15, 10],
    "borderStroke": "#fff",
    "borderStrokeWidth": 3,
    "anchorSize": 15,
    "anchorColor": "#fff",
    "anchorStroke": "#fff",
    "anchorBorderWidth": 1,
    "anchorCornerRadius": 30
  },
  "cropper": {
    "transformer": {
      "borderDash": [15, 10],
      "borderStroke": "#fff",
      "borderStrokeWidth": 3,
      "anchorSize": 15,
      "anchorColor": "#fff",
      "anchorStroke": "#fff",
      "anchorBorderWidth": 1,
      "anchorCornerRadius": 30
    },
    "circular": false,
    "fixed": false,
    "keepRatio": true,
    "aspectRatio": 1,
    "minWidth": 100,
    "minHeight": 100,
    "marginRatio": 1.1,
    "overlay": {
      "color": "#262626",
      "opacity": 0.5
    },
    "guides": {
      "show": true,
      "count": 3,
      "color": "#fff",
      "width": 1,
      "dash": [15, 10]
    }
  },
  "drawing": {
    "autoSelect": false,
    "keyboard": {
      "cancelOnEscape": true
    }
  },
  "selection": {
    "interactive": true,
    "keyboard": {
      "enabled": true,
      "movingSpaces": 5,
      "map": {
        "delete": ["Backspace", "Delete"],
        "moveLeft": ["ArrowLeft"],
        "moveRight": ["ArrowRight"],
        "moveUp": ["ArrowUp"],
        "moveDown": ["ArrowDown"],
        "deselect": ["Escape"]
      }
    },
    "transformer": {
      "borderStroke": "#fff",
      "borderStrokeWidth": 3,
      "anchorSize": 15,
      "anchorColor": "#fff",
      "anchorStroke": "#fff",
      "anchorBorderWidth": 1,
      "anchorCornerRadius": 30,
      "borderDash": [0, 0]
    },
    "zone": {
      "fill": "rgba(105, 105, 105, 0.7)",
      "stroke": "#dbdbdb"
    }
  },
  "history": {
    "keyboard": {
      "enabled": true
    }
  }
}
```

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

### Enabling Pikaso Snap To Grid (TypeScript)

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/SnapGrid/doc.md

Shows how to programmatically enable the Snap To Grid feature on an existing Pikaso editor instance using the `enable` method of the `snapGrid` property. This is useful if it was previously disabled or initialized as disabled.

```TypeScript
// Enable Snap To Grid after the object is instantiated
editor.snapGrid.enable()
```

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

### Managing Pikaso Label instance in JavaScript

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/Label/doc.md

This snippet demonstrates how to create a new Label instance using the editor, update its tag and text properties, and apply a filter using methods inherited from ShapeModel. It requires an initialized Pikaso editor instance.

```js
// create a new label
const myLabel = editor.shapes.label.insert({
  container: {
    x: 40,
    y: 100
  },
  tag: {
    fill: '#262626'
  },
  text: {
    text: 'Pikaso Rocks',
    fill: '#00ff00',
    fontSize: 40
  }
})

// update label's tag
mylabel.updateTag({
  fill: '#fff',
  cornerRadius: [2, 0, 2, 0] // or simply cornerRadius: 2
})

// update label's text
mylabel.updateText({
  fill: '#ff0000',
  fontSize: 30,
  fontFamily: 'Arial'
})

// all ShapeModel methods and properties are available
mylabel.addFilter({
  name: 'Blur',
  options: {
    blurRadius: 10
  }
})
```

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

### Setting Pikaso Snap To Grid Options (TypeScript)

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/SnapGrid/doc.md

Explains how to update the configuration options for the Snap To Grid feature on an existing Pikaso editor instance using the `setOptions` method. This allows changing styles like stroke color and width dynamically.

```TypeScript
// Set options
editor.snapGrid.setOptions({
  strokeWidth: 2,
  stroke: 'red'
})
```

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

### Importing Board from JSON using PikasoJS

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/ImportExport/doc.md

Loads a previously exported board state from a JSON string or a parsed JSON object. This allows restoring a saved state or loading a predefined template into the board.

```javascript
// import json
editor.load('<json string>') // or editor.import.json('<parsed json>')
```

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

### Exporting Board to JSON using PikasoJS

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/ImportExport/doc.md

Exports the current state of the board workspace as a JSON string. This string can be stored (e.g., in a database) and later used to restore the board state.

```javascript
// export to json
editor.export.toJson()
```

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

### Rotating Board and Shapes using Pikaso Rotation API (TypeScript)

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/Rotation/doc.md

Demonstrates how to rotate the entire board using `transform` (with scaling/transforming) and `straighten` (without transforming), and how to rotate an individual shape using its `rotate` method.

```ts
// rotate and transform board
editor.rotation.transform(30)

// rotate without transforming
editor.rotation.straighten(-30)

// rotate a shape
const shape = editor.shapes.triangle.insert({ /* config */ })
shape.rotate(50)
```

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

### Navigating History States in Pikaso JS

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/History/doc.md

Demonstrates how to use the `undo`, `redo`, `reset`, and `jump` methods of the Pikaso editor or history instance to navigate through the editor's state history. `undo` goes back, `redo` goes forward, `reset` clears the board, and `jump` goes to a specific state index.

```js
// go to previous state
editor.undo() // or editor.history.undo()

// go to next state
editor.history.redo() // or editor.history.redo()

// reinitialize the board
editor.reset()

// jump to specific state
editor.history.jump(<Number>)
```

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

### Setting Pikaso Snap To Grid Offset (TypeScript)

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/SnapGrid/doc.md

Demonstrates how to adjust the snapping accuracy offset for the Snap To Grid feature on an existing Pikaso editor instance using the `setOffset` method. The offset determines the distance within which objects will snap to grid lines.

```TypeScript
// Set the grid snapping accuracy offset
editor.snapGrid.setOffset(10) // default is 5
```

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

### Inserting a Circle Shape (TypeScript)

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/Drawing/doc.md

Demonstrates how to insert a circle shape onto the canvas using the `insert` method of the circle shape drawer. This method adds the shape directly without requiring interactive drawing by the user.

```typescript
editor.shapes.circle.insert({
  /* config */
})
```

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

### Disabling Pikaso Snap To Grid (TypeScript)

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/SnapGrid/doc.md

Illustrates how to programmatically disable the Snap To Grid feature on an existing Pikaso editor instance using the `disable` method of the `snapGrid` property.

```TypeScript
// Disable Snap To Grid
editor.snapGrid.disable()
```

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

### Adding Custom Filters to Image Shape in Pikaso (TypeScript)

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Advanced/CreateCustomFilters/doc.md

Demonstrates how to add custom filters to an image shape in Pikaso using the `addFilter` method. It shows integrating with an external library (pixels.js) and implementing a simple grayscale filter directly by manipulating the image data.

```TypeScript
// pixels.js example 
const shape = editor.shapes.image.insert('<URL>')

shape.addFilter({
  customFn: imageData => PixelsJS.filterImgData(imageData, '<Filter Name>')
})

// custom filter
shape.addFilter({
  customFn: imageData => {
    const d = imageData.data

    for (let i = 0; i < d.length; i += 4) {
      const r = d[i]
      const g = d[i+1]
      const b = d[i+2]
      const v = 0.2126 * r + 0.7152 * g + 0.0722 * b
      d[i] = d[i+1] = d[i+2] = v
    }
  }
})
```

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

### Add Multiple Filters to Selection - Pikaso.js TS

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/Filters/doc.md

Applies an array of filters (Contrast and Blur) simultaneously to all currently selected shapes. This allows applying multiple effects with a single call.

```ts
editor.selection.addFilter([
  {
    name: 'Contrast',
    options: {
      contrast: 30
    }
  }, 
  {
    name: 'Blur',
    options: {
      blurRadius: 20
    }
  }
])
```

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

### Registering Custom Heart Shape Drawer (TypeScript)

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Advanced/CreateCustomShapes/doc.md

This snippet demonstrates how to register the custom HeartDrawer with a Pikaso editor instance. It involves extending the BaseShapes interface to include the new shape type and providing a factory function during editor initialization that creates an instance of HeartDrawer for the 'heart' key. This makes the custom shape available within the editor's shapes collection.

```TypeScript
import type { BaseShapes } from 'pikaso'

interface Shapes extends BaseShapes {
  heart: HeartDrawer
}

const editor = new Pikaso<Shapes>(
  {
    container: <the element>,
    ...options
  },
  board => ({
    heart: new HeartDrawer(board)
  })
)
```

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

### Managing Shape Groups in Pikaso.js

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/Groups/doc.md

This snippet demonstrates various ways to manage shape groups using the Pikaso.js API. It shows how to assign shapes to groups using the 'group' property, check group membership, attach and detach shapes, create new groups, and perform delete, undelete, destroy, and ungroup operations on groups.

```typescript
const circle = editor.shape.circle.insert({
  // config
})

const rect = editor.shapes.rect.insert({
  // config
})

// In the following code, if the 'g1' group does not exist, it is created and the circle is added to it.
circle.group = 'g1'

// Adding the rect to 'g1' group as well
rect.group = 'g1'

// The 'group' getter returns the name of the shape's group
console.log(rect.group) // g1

// The hasGroup() method determines whether the shape belongs to a group
console.log(rect.hasGroup()) // true


// In addition to adding shapes to groups, there is another method
editor.board.groups.attach([circle, rect], 'g1')

// A shape can easily be removed from a group
circle.group = null

// It does the same thing, but is more useful when multiple shapes need to be detached
editor.board.groups.dettach([circle], 'g1')

// To create a new group
editor.board.groups.create('g2', {
  // config
})

// delete a group. This is possible to undo this action
editor.board.groups.delete('g1')

// undelete a group
editor.board.groups.undelete('g1')

// destroy method deletes the group with its shapes. This is not possible to undo the action
editor.board.groups.destroy('g1')

// ungroup method separates the shapes of the group and then deletes the group.
// This method doesn't work if the group is cached
editor.board.groups.ungroup('g1')

// The API provided the ability to group selected shapes
editor.board.selection.group('g1')
```

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

### Add Contrast Filter to Selection - Pikaso.js TS

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/Filters/doc.md

Applies a Contrast filter with a specified value to all currently selected shapes in the editor. This changes the contrast of the selected items.

```ts
editor.selection.addFilter({
  name: 'Contrast',
  options: {
    contrast: 30
  }
})
```

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

### Add Blur Filter to Background - Pikaso.js TS

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/Filters/doc.md

Adds a Blur filter with a specified radius to the background image of the editor board. This modifies the visual appearance of the background.

```ts
editor.board.background.image.addFilter({
  name: 'Blur',
  options: {
    blurRadius: 20
  }
})
```

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

### Apply Filters Directly to Shapes - Pikaso.js TS

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/Filters/doc.md

Applies a list of filters directly to a specified list of shape instances, bypassing selection or background objects. Useful for programmatic filter application.

```ts
editor.filters.apply(<ListOfShapes>, <ListOfFilters>)
```

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

### Remove Multiple Filters from Selection - Pikaso.js TS

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/Filters/doc.md

Removes multiple specified filters (e.g., Blur and Contrast) simultaneously from all currently selected items in the editor.

```ts
editor.selection.removeFilter([
  { name: 'Blur' },
  { name: 'Contrast' }
])
```

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

### Defining Heart Shape Model (TypeScript)

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Advanced/CreateCustomShapes/doc.md

This snippet defines the HeartModel class, which extends Pikaso's ShapeModel. It sets the shape's type identifier to 'heart', allowing Pikaso to recognize and manage instances of this custom shape model. It serves as the data structure for the heart shape.

```TypeScript
import { Konva, ShapeModel } from 'pikaso'

export class HeartModel extends ShapeModel<Konva.Path, Konva.PathConfig> {
  public get type() {
    return 'heart'
  }
}
```

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

### Stopping Interactive Circle Drawing (TypeScript)

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/Drawing/doc.md

Illustrates how to stop the current interactive drawing process for the circle shape using the `stopDrawing` method. This finalizes the shape being drawn or cancels the drawing operation.

```typescript
editor.shapes.circle.stopDrawing()
```

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

### Remove Single Filter from Selection - Pikaso.js TS

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/Filters/doc.md

Removes a specific filter, identified by its name (e.g., 'Contrast'), from all currently selected items in the editor.

```ts
editor.selection.removeFilter({ name: 'Contrast' })
```

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

### Add Mask Filter to Specific Shape - Pikaso.js TS

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/Filters/doc.md

Adds a Mask filter with a specified threshold to a single, specific shape instance. This applies the masking effect only to that shape.

```ts
const shape = editor.shapes.circle.insert({ /* config */ })

shape.addFilter({
  name: 'Mask',
  options: {
    threshold: 10
  }
})
```

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

### Remove Filters Directly from Shapes - Pikaso.js TS

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/Filters/doc.md

Removes a list of filters directly from a specified list of shape instances, bypassing selection or background objects. Useful for programmatic filter removal.

```ts
editor.filters.remove(<ListOfShapes>, <ListOfFilters>)
```

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

### Add Custom Filter to Specific Shape - Pikaso.js TS

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/Filters/doc.md

Adds a custom filter function to a specific shape instance. The custom function receives image data and applies a unique effect.

```ts
shape.addFilter({
  customFn: imageData => theCustomFilter(imageData)
})
```

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

### Remove Filter from Specific Shape - Pikaso.js TS

Source: https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/Filters/doc.md

Removes a specific filter, identified by its name (e.g., 'Mask'), from a single, specific shape instance.

```ts
shape.removeFilter({ name: 'Mask' })
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.