How to Use Plugins

ImageMark's functionality is provided through its plugin system. Beyond core canvas panning and zooming, all features are loaded as plugins on demand.

Built-in Plugins

Plugin	Function	API
Shape	Shape management, mouse drawing	Details
Selection	Shape selection (single/multiple)	Details
History	Undo/Redo	Details
Shortcut	Keyboard shortcuts	Details
Minimap	Minimap	Details

ImageMark auto-loads all built-in plugins by default. To disable, use unuseDefaultPlugin.

Usage

Via Constructor Options (Recommended)

In most cases, pass configuration through pluginOptions:

import ImageMark from 'mark-img'

const imgMark = new ImageMark({
	el: '#container',
	src: './example.jpg',
	pluginOptions: {
		shape: {
			shapeList: [],
			shapeOptions: {
				// shape config
			},
		},
		selection: {
			selectionActionOptions: {
				// selection action config
			},
		},
	},
})

Class Method

import ImageMark, { SelectionPlugin } from 'mark-img'

// Register globally
ImageMark.usePlugin(SelectionPlugin, {
	// plugin options
})

Instance Method

const imgMark = new ImageMark({
	el: '#container',
	src: './example.jpg',
})

// Class method
imgMark.addPlugin(SelectionPlugin, {
	// plugin options
})

// Function method
imgMark.addPlugin(imageMarkInstance => {
	return new SelectionPlugin(imageMarkInstance, {
		// plugin options
	})
})

Getting Plugin Instances

const shapePlugin = imgMark.getShapePlugin()
const selectionPlugin = imgMark.getSelectionPlugin()
const historyPlugin = imgMark.getHistoryPlugin()
const shortcutPlugin = imgMark.getShortcutPlugin()

Removing Plugins

imgMark.removePlugin(SelectionPlugin)

For more, see Plugin Class API.