@plait/core 0.20.0 → 0.22.0

package/esm2020/utils/weak-maps.mjs

@@ -18,4 +18,4 @@ export const BOARD_TO_IS_SELECTION_MOVING = new WeakMap();
 export const BOARD_TO_TEMPORARY_ELEMENTS = new WeakMap();
 export const BOARD_TO_MOVING_ELEMENT = new WeakMap();
 export const PATH_REFS = new WeakMap();
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2Vhay1tYXBzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcGFja2FnZXMvcGxhaXQvc3JjL3V0aWxzL3dlYWstbWFwcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRQSw4QkFBOEI7QUFDOUIsTUFBTSxDQUFDLE1BQU0sY0FBYyxHQUFHLElBQUksT0FBTyxFQUFtQixDQUFDO0FBRTdELE1BQU0sQ0FBQyxNQUFNLFFBQVEsR0FBRyxJQUFJLE9BQU8sRUFBdUIsQ0FBQztBQUUzRCxNQUFNLENBQUMsTUFBTSxhQUFhLEdBQUcsSUFBSSxPQUFPLEVBQXFCLENBQUM7QUFFOUQsTUFBTSxDQUFDLE1BQU0sY0FBYyxHQUFHLElBQUksT0FBTyxFQUF1QixDQUFDO0FBRWpFLE1BQU0sQ0FBQyxNQUFNLGdCQUFnQixHQUFHLElBQUksT0FBTyxFQUF1QixDQUFDO0FBRW5FLE1BQU0sQ0FBQyxNQUFNLGtCQUFrQixHQUFHLElBQUksT0FBTyxFQUEwQixDQUFDO0FBRXhFLE1BQU0sQ0FBQyxNQUFNLGtCQUFrQixHQUFHLElBQUksT0FBTyxFQUF1QyxDQUFDO0FBRXJGLE1BQU0sQ0FBQyxNQUFNLGtCQUFrQixHQUFHLElBQUksT0FBTyxFQUF3QixDQUFDO0FBRXRFLE1BQU0sQ0FBQyxNQUFNLGFBQWEsR0FBRyxJQUFJLE9BQU8sRUFBNkIsQ0FBQztBQUV0RSxNQUFNLENBQUMsTUFBTSxxQkFBcUIsR0FBRyxJQUFJLE9BQU8sRUFBMkIsQ0FBQztBQUU1RSxNQUFNLENBQUMsTUFBTSx5QkFBeUIsR0FBRyxJQUFJLE9BQU8sRUFBOEIsQ0FBQztBQUVuRixNQUFNLENBQUMsTUFBTSw4QkFBOEIsR0FBRyxJQUFJLE9BQU8sRUFBcUIsQ0FBQztBQUUvRSxNQUFNLENBQUMsTUFBTSxxQkFBcUIsR0FBRyxJQUFJLE9BQU8sRUFBcUIsQ0FBQztBQUV0RSxNQUFNLENBQUMsTUFBTSw2QkFBNkIsR0FBRyxJQUFJLE9BQU8sRUFBcUIsQ0FBQztBQUU5RSxNQUFNLENBQUMsTUFBTSw0QkFBNEIsR0FBRyxJQUFJLE9BQU8sRUFBdUIsQ0FBQztBQUUvRSxxQ0FBcUM7QUFDckMsTUFBTSxDQUFDLE1BQU0sMkJBQTJCLEdBQUcsSUFBSSxPQUFPLEVBQThCLENBQUM7QUFFckYsTUFBTSxDQUFDLE1BQU0sdUJBQXVCLEdBQUcsSUFBSSxPQUFPLEVBQThCLENBQUM7QUFFakYsTUFBTSxDQUFDLE1BQU0sU0FBUyxHQUFzQyxJQUFJLE9BQU8sRUFBRSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUm91Z2hTVkcgfSBmcm9tICdyb3VnaGpzL2Jpbi9zdmcnO1xuaW1wb3J0IHsgQm9hcmRDb21wb25lbnRJbnRlcmZhY2UgfSBmcm9tICcuLi9ib2FyZC9ib2FyZC5jb21wb25lbnQuaW50ZXJmYWNlJztcbmltcG9ydCB7IFBsYWl0RWxlbWVudCB9IGZyb20gJy4uL2ludGVyZmFjZXMvZWxlbWVudCc7XG5pbXBvcnQgeyBQbGFpdEJvYXJkIH0gZnJvbSAnLi4vaW50ZXJmYWNlcy9ib2FyZCc7XG5pbXBvcnQgeyBQb2ludCB9IGZyb20gJy4uL2ludGVyZmFjZXMvcG9pbnQnO1xuaW1wb3J0IHsgQW5jZXN0b3IsIFBsYWl0Tm9kZSB9IGZyb20gJy4uL2ludGVyZmFjZXMvbm9kZSc7XG5pbXBvcnQgeyBQYXRoUmVmIH0gZnJvbSAnLi4vaW50ZXJmYWNlcy9wYXRoLXJlZic7XG5cbi8vIHJlY29yZCByaWNodGV4dCB0eXBlIHN0YXR1c1xuZXhwb3J0IGNvbnN0IElTX0JPQVJEX0NBQ0hFID0gbmV3IFdlYWtNYXA8T2JqZWN0LCBib29sZWFuPigpO1xuXG5leHBvcnQgY29uc3QgRkxVU0hJTkcgPSBuZXcgV2Vha01hcDxQbGFpdEJvYXJkLCBib29sZWFuPigpO1xuXG5leHBvcnQgY29uc3QgTk9ERV9UT19JTkRFWCA9IG5ldyBXZWFrTWFwPFBsYWl0Tm9kZSwgbnVtYmVyPigpO1xuXG5leHBvcnQgY29uc3QgTk9ERV9UT19QQVJFTlQgPSBuZXcgV2Vha01hcDxQbGFpdE5vZGUsIEFuY2VzdG9yPigpO1xuXG5leHBvcnQgY29uc3QgSVNfVEVYVF9FRElUQUJMRSA9IG5ldyBXZWFrTWFwPFBsYWl0Qm9hcmQsIGJvb2xlYW4+KCk7XG5cbmV4cG9ydCBjb25zdCBCT0FSRF9UT19PTl9DSEFOR0UgPSBuZXcgV2Vha01hcDxQbGFpdEJvYXJkLCAoKSA9PiB2b2lkPigpO1xuXG5leHBvcnQgY29uc3QgQk9BUkRfVE9fQ09NUE9ORU5UID0gbmV3IFdlYWtNYXA8UGxhaXRCb2FyZCwgQm9hcmRDb21wb25lbnRJbnRlcmZhY2U+KCk7XG5cbmV4cG9ydCBjb25zdCBCT0FSRF9UT19ST1VHSF9TVkcgPSBuZXcgV2Vha01hcDxQbGFpdEJvYXJkLCBSb3VnaFNWRz4oKTtcblxuZXhwb3J0IGNvbnN0IEJPQVJEX1RPX0hPU1QgPSBuZXcgV2Vha01hcDxQbGFpdEJvYXJkLCBTVkdTVkdFbGVtZW50PigpO1xuXG5leHBvcnQgY29uc3QgQk9BUkRfVE9fRUxFTUVOVF9IT1NUID0gbmV3IFdlYWtNYXA8UGxhaXRCb2FyZCwgU1ZHR0VsZW1lbnQ+KCk7XG5cbmV4cG9ydCBjb25zdCBCT0FSRF9UT19TRUxFQ1RFRF9FTEVNRU5UID0gbmV3IFdlYWtNYXA8UGxhaXRCb2FyZCwgUGxhaXRFbGVtZW50W10+KCk7XG5cbmV4cG9ydCBjb25zdCBCT0FSRF9UT19NT1ZJTkdfUE9JTlRfSU5fQk9BUkQgPSBuZXcgV2Vha01hcDxQbGFpdEJvYXJkLCBQb2ludD4oKTtcblxuZXhwb3J0IGNvbnN0IEJPQVJEX1RPX01PVklOR19QT0lOVCA9IG5ldyBXZWFrTWFwPFBsYWl0Qm9hcmQsIFBvaW50PigpO1xuXG5leHBvcnQgY29uc3QgQk9BUkRfVE9fVklFV1BPUlRfT1JJR0lOQVRJT04gPSBuZXcgV2Vha01hcDxQbGFpdEJvYXJkLCBQb2ludD4oKTtcblxuZXhwb3J0IGNvbnN0IEJPQVJEX1RPX0lTX1NFTEVDVElPTl9NT1ZJTkcgPSBuZXcgV2Vha01hcDxQbGFpdEJvYXJkLCBib29sZWFuPigpO1xuXG4vLyBzYXZlIG5vIHN0YW5kYXJkIHNlbGVjdGVkIGVsZW1lbnRzXG5leHBvcnQgY29uc3QgQk9BUkRfVE9fVEVNUE9SQVJZX0VMRU1FTlRTID0gbmV3IFdlYWtNYXA8UGxhaXRCb2FyZCwgUGxhaXRFbGVtZW50W10+KCk7XG5cbmV4cG9ydCBjb25zdCBCT0FSRF9UT19NT1ZJTkdfRUxFTUVOVCA9IG5ldyBXZWFrTWFwPFBsYWl0Qm9hcmQsIFBsYWl0RWxlbWVudFtdPigpO1xuXG5leHBvcnQgY29uc3QgUEFUSF9SRUZTOiBXZWFrTWFwPFBsYWl0Qm9hcmQsIFNldDxQYXRoUmVmPj4gPSBuZXcgV2Vha01hcCgpO1xuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2Vhay1tYXBzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcGFja2FnZXMvcGxhaXQvc3JjL3V0aWxzL3dlYWstbWFwcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRQSw4QkFBOEI7QUFDOUIsTUFBTSxDQUFDLE1BQU0sY0FBYyxHQUFHLElBQUksT0FBTyxFQUFtQixDQUFDO0FBRTdELE1BQU0sQ0FBQyxNQUFNLFFBQVEsR0FBRyxJQUFJLE9BQU8sRUFBdUIsQ0FBQztBQUUzRCxNQUFNLENBQUMsTUFBTSxhQUFhLEdBQUcsSUFBSSxPQUFPLEVBQXFCLENBQUM7QUFFOUQsTUFBTSxDQUFDLE1BQU0sY0FBYyxHQUFHLElBQUksT0FBTyxFQUF1QixDQUFDO0FBRWpFLE1BQU0sQ0FBQyxNQUFNLGdCQUFnQixHQUFHLElBQUksT0FBTyxFQUF1QixDQUFDO0FBRW5FLE1BQU0sQ0FBQyxNQUFNLGtCQUFrQixHQUFHLElBQUksT0FBTyxFQUEwQixDQUFDO0FBRXhFLE1BQU0sQ0FBQyxNQUFNLGtCQUFrQixHQUFHLElBQUksT0FBTyxFQUF1QyxDQUFDO0FBRXJGLE1BQU0sQ0FBQyxNQUFNLGtCQUFrQixHQUFHLElBQUksT0FBTyxFQUF3QixDQUFDO0FBRXRFLE1BQU0sQ0FBQyxNQUFNLGFBQWEsR0FBRyxJQUFJLE9BQU8sRUFBNkIsQ0FBQztBQUV0RSxNQUFNLENBQUMsTUFBTSxxQkFBcUIsR0FBRyxJQUFJLE9BQU8sRUFBeUMsQ0FBQztBQUUxRixNQUFNLENBQUMsTUFBTSx5QkFBeUIsR0FBRyxJQUFJLE9BQU8sRUFBOEIsQ0FBQztBQUVuRixNQUFNLENBQUMsTUFBTSw4QkFBOEIsR0FBRyxJQUFJLE9BQU8sRUFBcUIsQ0FBQztBQUUvRSxNQUFNLENBQUMsTUFBTSxxQkFBcUIsR0FBRyxJQUFJLE9BQU8sRUFBcUIsQ0FBQztBQUV0RSxNQUFNLENBQUMsTUFBTSw2QkFBNkIsR0FBRyxJQUFJLE9BQU8sRUFBcUIsQ0FBQztBQUU5RSxNQUFNLENBQUMsTUFBTSw0QkFBNEIsR0FBRyxJQUFJLE9BQU8sRUFBdUIsQ0FBQztBQUUvRSxxQ0FBcUM7QUFDckMsTUFBTSxDQUFDLE1BQU0sMkJBQTJCLEdBQUcsSUFBSSxPQUFPLEVBQThCLENBQUM7QUFFckYsTUFBTSxDQUFDLE1BQU0sdUJBQXVCLEdBQUcsSUFBSSxPQUFPLEVBQThCLENBQUM7QUFFakYsTUFBTSxDQUFDLE1BQU0sU0FBUyxHQUFzQyxJQUFJLE9BQU8sRUFBRSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUm91Z2hTVkcgfSBmcm9tICdyb3VnaGpzL2Jpbi9zdmcnO1xuaW1wb3J0IHsgQm9hcmRDb21wb25lbnRJbnRlcmZhY2UsIEJvYXJkRWxlbWVudEhvc3RJbnRlcmZhY2UgfSBmcm9tICcuLi9ib2FyZC9ib2FyZC5jb21wb25lbnQuaW50ZXJmYWNlJztcbmltcG9ydCB7IFBsYWl0RWxlbWVudCB9IGZyb20gJy4uL2ludGVyZmFjZXMvZWxlbWVudCc7XG5pbXBvcnQgeyBQbGFpdEJvYXJkIH0gZnJvbSAnLi4vaW50ZXJmYWNlcy9ib2FyZCc7XG5pbXBvcnQgeyBQb2ludCB9IGZyb20gJy4uL2ludGVyZmFjZXMvcG9pbnQnO1xuaW1wb3J0IHsgQW5jZXN0b3IsIFBsYWl0Tm9kZSB9IGZyb20gJy4uL2ludGVyZmFjZXMvbm9kZSc7XG5pbXBvcnQgeyBQYXRoUmVmIH0gZnJvbSAnLi4vaW50ZXJmYWNlcy9wYXRoLXJlZic7XG5cbi8vIHJlY29yZCByaWNodGV4dCB0eXBlIHN0YXR1c1xuZXhwb3J0IGNvbnN0IElTX0JPQVJEX0NBQ0hFID0gbmV3IFdlYWtNYXA8T2JqZWN0LCBib29sZWFuPigpO1xuXG5leHBvcnQgY29uc3QgRkxVU0hJTkcgPSBuZXcgV2Vha01hcDxQbGFpdEJvYXJkLCBib29sZWFuPigpO1xuXG5leHBvcnQgY29uc3QgTk9ERV9UT19JTkRFWCA9IG5ldyBXZWFrTWFwPFBsYWl0Tm9kZSwgbnVtYmVyPigpO1xuXG5leHBvcnQgY29uc3QgTk9ERV9UT19QQVJFTlQgPSBuZXcgV2Vha01hcDxQbGFpdE5vZGUsIEFuY2VzdG9yPigpO1xuXG5leHBvcnQgY29uc3QgSVNfVEVYVF9FRElUQUJMRSA9IG5ldyBXZWFrTWFwPFBsYWl0Qm9hcmQsIGJvb2xlYW4+KCk7XG5cbmV4cG9ydCBjb25zdCBCT0FSRF9UT19PTl9DSEFOR0UgPSBuZXcgV2Vha01hcDxQbGFpdEJvYXJkLCAoKSA9PiB2b2lkPigpO1xuXG5leHBvcnQgY29uc3QgQk9BUkRfVE9fQ09NUE9ORU5UID0gbmV3IFdlYWtNYXA8UGxhaXRCb2FyZCwgQm9hcmRDb21wb25lbnRJbnRlcmZhY2U+KCk7XG5cbmV4cG9ydCBjb25zdCBCT0FSRF9UT19ST1VHSF9TVkcgPSBuZXcgV2Vha01hcDxQbGFpdEJvYXJkLCBSb3VnaFNWRz4oKTtcblxuZXhwb3J0IGNvbnN0IEJPQVJEX1RPX0hPU1QgPSBuZXcgV2Vha01hcDxQbGFpdEJvYXJkLCBTVkdTVkdFbGVtZW50PigpO1xuXG5leHBvcnQgY29uc3QgQk9BUkRfVE9fRUxFTUVOVF9IT1NUID0gbmV3IFdlYWtNYXA8UGxhaXRCb2FyZCwgQm9hcmRFbGVtZW50SG9zdEludGVyZmFjZT4oKTtcblxuZXhwb3J0IGNvbnN0IEJPQVJEX1RPX1NFTEVDVEVEX0VMRU1FTlQgPSBuZXcgV2Vha01hcDxQbGFpdEJvYXJkLCBQbGFpdEVsZW1lbnRbXT4oKTtcblxuZXhwb3J0IGNvbnN0IEJPQVJEX1RPX01PVklOR19QT0lOVF9JTl9CT0FSRCA9IG5ldyBXZWFrTWFwPFBsYWl0Qm9hcmQsIFBvaW50PigpO1xuXG5leHBvcnQgY29uc3QgQk9BUkRfVE9fTU9WSU5HX1BPSU5UID0gbmV3IFdlYWtNYXA8UGxhaXRCb2FyZCwgUG9pbnQ+KCk7XG5cbmV4cG9ydCBjb25zdCBCT0FSRF9UT19WSUVXUE9SVF9PUklHSU5BVElPTiA9IG5ldyBXZWFrTWFwPFBsYWl0Qm9hcmQsIFBvaW50PigpO1xuXG5leHBvcnQgY29uc3QgQk9BUkRfVE9fSVNfU0VMRUNUSU9OX01PVklORyA9IG5ldyBXZWFrTWFwPFBsYWl0Qm9hcmQsIGJvb2xlYW4+KCk7XG5cbi8vIHNhdmUgbm8gc3RhbmRhcmQgc2VsZWN0ZWQgZWxlbWVudHNcbmV4cG9ydCBjb25zdCBCT0FSRF9UT19URU1QT1JBUllfRUxFTUVOVFMgPSBuZXcgV2Vha01hcDxQbGFpdEJvYXJkLCBQbGFpdEVsZW1lbnRbXT4oKTtcblxuZXhwb3J0IGNvbnN0IEJPQVJEX1RPX01PVklOR19FTEVNRU5UID0gbmV3IFdlYWtNYXA8UGxhaXRCb2FyZCwgUGxhaXRFbGVtZW50W10+KCk7XG5cbmV4cG9ydCBjb25zdCBQQVRIX1JFRlM6IFdlYWtNYXA8UGxhaXRCb2FyZCwgU2V0PFBhdGhSZWY+PiA9IG5ldyBXZWFrTWFwKCk7XG4iXX0=

package/fesm2015/plait-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, Component, ChangeDetectionStrategy, EventEmitter, ElementRef, Output, HostBinding, ViewChild, ContentChildren, NgModule } from '@angular/core';
+import { Directive, Input, Injectable, Component, ChangeDetectionStrategy, EventEmitter, ElementRef, Output, HostBinding, ViewChild, ContentChildren, NgModule } from '@angular/core';
 import rough from 'roughjs/bin/rough';
 import { timer, Subject, fromEvent } from 'rxjs';
 import { takeUntil, filter, tap } from 'rxjs/operators';
@@ -229,7 +229,16 @@ const PlaitBoard = {
         return BOARD_TO_HOST.get(board);
     },
     getElementHost(board) {
-        return BOARD_TO_ELEMENT_HOST.get(board);
+        var _a;
+        return (_a = BOARD_TO_ELEMENT_HOST.get(board)) === null || _a === void 0 ? void 0 : _a.host;
+    },
+    getElementHostUp(board) {
+        var _a;
+        return (_a = BOARD_TO_ELEMENT_HOST.get(board)) === null || _a === void 0 ? void 0 : _a.hostUp;
+    },
+    getElementHostActive(board) {
+        var _a;
+        return (_a = BOARD_TO_ELEMENT_HOST.get(board)) === null || _a === void 0 ? void 0 : _a.hostActive;
     },
     getRoughSVG(board) {
         return BOARD_TO_ROUGH_SVG.get(board);
@@ -865,6 +874,7 @@ var ResizeCursorClass;
 const ATTACHED_ELEMENT_CLASS_NAME = 'plait-board-attached';
 
 const CLIP_BOARD_FORMAT_KEY = 'x-plait-fragment';
+const CLIP_BOARD_IMAGE_FORMAT_KEY = 'x-plait-image-fragment';
 const HOST_CLASS_NAME = 'plait-board-container';
 const SCROLL_BAR_WIDTH = 20;
 const MAX_RADIUS = 16;
@@ -2249,7 +2259,7 @@ function withSelection(board) {
         const range = { anchor: point, focus: point };
         const hitElements = getHitElements(board, { ranges: [range] });
         const selectedElements = getSelectedElements(board);
-        if (hitElements.length === 1 && selectedElements.includes(hitElements[0])) {
+        if (hitElements.length === 1 && selectedElements.includes(hitElements[0]) && !options.isDisabledSelect) {
             mousedown(event);
             return;
         }
@@ -2313,6 +2323,10 @@ function withSelection(board) {
     };
     board.onChange = () => {
         const options = board.getPluginOptions(PlaitPluginKey.withSelection);
+        if (options.isDisabledSelect) {
+            selectionOuterG === null || selectionOuterG === void 0 ? void 0 : selectionOuterG.remove();
+            clearSelectedElement(board);
+        }
         // calc selected elements entry
         if (board.pointer !== PlaitPointerType.hand && !options.isDisabledSelect) {
             try {
@@ -2643,6 +2657,26 @@ const withHotkey = (board) => {
     return board;
 };
 
+class PlaitContextService {
+    constructor() {
+        this.uploadingFiles = [];
+    }
+    getUploadingFile(url) {
+        return this.uploadingFiles.find(file => file.url === url);
+    }
+    setUploadingFile(file) {
+        return this.uploadingFiles.push(file);
+    }
+    removeUploadingFile(fileEntry) {
+        this.uploadingFiles = this.uploadingFiles.filter(file => file.url !== fileEntry.url);
+    }
+}
+PlaitContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+PlaitContextService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitContextService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitContextService, decorators: [{
+            type: Injectable
+        }] });
+
 class PlaitElementComponent {
     constructor(renderer2, viewContainerRef) {
         this.renderer2 = renderer2;
@@ -2794,12 +2828,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
             }] } });
 
 const ElementHostClass = 'element-host';
+const ElementHostUpClass = 'element-host-up';
+const ElementHostActiveClass = 'element-host-active';
 class PlaitBoardComponent {
     get host() {
         return this.svg.nativeElement;
     }
     get hostClass() {
-        return `${HOST_CLASS_NAME} pointer-${this.board.pointer} theme-${this.board.theme.themeColorMode}`;
+        return `${HOST_CLASS_NAME} pointer-${this.board.pointer} theme-${this.board.theme.themeColorMode} ${this.getBrowserClassName()}`;
+    }
+    getBrowserClassName() {
+        if (IS_SAFARI) {
+            return 'safari';
+        }
+        if (IS_CHROME) {
+            return 'chrome';
+        }
+        if (IS_FIREFOX) {
+            return 'firefox';
+        }
+        return '';
     }
     get readonly() {
         return this.board.options.readonly;
@@ -2831,6 +2879,8 @@ class PlaitBoardComponent {
     }
     ngOnInit() {
         const elementHost = this.host.querySelector(`.${ElementHostClass}`);
+        const elementHostUp = this.host.querySelector(`.${ElementHostUpClass}`);
+        const elementHostActive = this.host.querySelector(`.${ElementHostActiveClass}`);
         const roughSVG = rough.svg(this.host, {
             options: { roughness: 0, strokeWidth: 1 }
         });
@@ -2849,7 +2899,11 @@ class PlaitBoardComponent {
         BOARD_TO_COMPONENT.set(this.board, this);
         BOARD_TO_ROUGH_SVG.set(this.board, roughSVG);
         BOARD_TO_HOST.set(this.board, this.host);
-        BOARD_TO_ELEMENT_HOST.set(this.board, elementHost);
+        BOARD_TO_ELEMENT_HOST.set(this.board, {
+            host: elementHost,
+            hostUp: elementHostUp,
+            hostActive: elementHostActive
+        });
         BOARD_TO_ON_CHANGE.set(this.board, () => {
             this.ngZone.run(() => {
                 this.detect();
@@ -3047,9 +3101,13 @@ class PlaitBoardComponent {
     }
 }
 PlaitBoardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitBoardComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PlaitBoardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: PlaitBoardComponent, selector: "plait-board", inputs: { plaitValue: "plaitValue", plaitViewport: "plaitViewport", plaitPlugins: "plaitPlugins", plaitOptions: "plaitOptions", plaitTheme: "plaitTheme" }, outputs: { plaitChange: "plaitChange", plaitBoardInitialized: "plaitBoardInitialized" }, host: { properties: { "class": "this.hostClass", "class.readonly": "this.readonly", "class.focused": "this.isFocused", "class.disabled-scroll": "this.disabledScrollOnNonFocus" } }, queries: [{ propertyName: "islands", predicate: PlaitIslandBaseComponent, descendants: true }], viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true, static: true }, { propertyName: "viewportContainer", first: true, predicate: ["viewportContainer"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
+PlaitBoardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: PlaitBoardComponent, selector: "plait-board", inputs: { plaitValue: "plaitValue", plaitViewport: "plaitViewport", plaitPlugins: "plaitPlugins", plaitOptions: "plaitOptions", plaitTheme: "plaitTheme" }, outputs: { plaitChange: "plaitChange", plaitBoardInitialized: "plaitBoardInitialized" }, host: { properties: { "class": "this.hostClass", "class.readonly": "this.readonly", "class.focused": "this.isFocused", "class.disabled-scroll": "this.disabledScrollOnNonFocus" } }, providers: [PlaitContextService], queries: [{ propertyName: "islands", predicate: PlaitIslandBaseComponent, descendants: true }], viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true, static: true }, { propertyName: "viewportContainer", first: true, predicate: ["viewportContainer"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
         <div class="viewport-container" #viewportContainer>
-            <svg #svg width="100%" height="100%" style="position: relative;" class="board-host-svg"><g class="element-host"></g></svg>
+            <svg #svg width="100%" height="100%" style="position: relative;" class="board-host-svg">
+                <g class="element-host"></g>
+                <g class="element-host-up"></g>
+                <g class="element-host-active"></g>
+            </svg>
             <plait-children [board]="board" [effect]="effect"></plait-children>
         </div>
         <ng-content></ng-content>
@@ -3060,12 +3118,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
                     selector: 'plait-board',
                     template: `
         <div class="viewport-container" #viewportContainer>
-            <svg #svg width="100%" height="100%" style="position: relative;" class="board-host-svg"><g class="element-host"></g></svg>
+            <svg #svg width="100%" height="100%" style="position: relative;" class="board-host-svg">
+                <g class="element-host"></g>
+                <g class="element-host-up"></g>
+                <g class="element-host-active"></g>
+            </svg>
             <plait-children [board]="board" [effect]="effect"></plait-children>
         </div>
         <ng-content></ng-content>
     `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [PlaitContextService]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { plaitValue: [{
                 type: Input
@@ -3280,5 +3343,5 @@ function createModModifierKeys() {
  * Generated bundle index. Do not edit.
  */
 
-export { A, ALT, APOSTROPHE, ATTACHED_ELEMENT_CLASS_NAME, AT_SIGN, B, BACKSLASH, BACKSPACE, BOARD_TO_COMPONENT, BOARD_TO_ELEMENT_HOST, BOARD_TO_HOST, BOARD_TO_IS_SELECTION_MOVING, BOARD_TO_MOVING_ELEMENT, BOARD_TO_MOVING_POINT, BOARD_TO_MOVING_POINT_IN_BOARD, BOARD_TO_ON_CHANGE, BOARD_TO_ROUGH_SVG, BOARD_TO_SELECTED_ELEMENT, BOARD_TO_TEMPORARY_ELEMENTS, BOARD_TO_VIEWPORT_ORIGINATION, BoardTransforms, C, CAPS_LOCK, CLIP_BOARD_FORMAT_KEY, CLOSE_SQUARE_BRACKET, COMMA, CONTEXT_MENU, CONTROL, ColorfulThemeColor, D, DASH, DELETE, DOWN_ARROW, DarkThemeColor, DefaultThemeColor, E, EIGHT, ELEMENT_TO_COMPONENT, END, ENTER, EQUALS, ESCAPE, F, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, FF_EQUALS, FF_MINUS, FF_MUTE, FF_SEMICOLON, FF_VOLUME_DOWN, FF_VOLUME_UP, FIRST_MEDIA, FIVE, FLUSHING, FOUR, G, H, HOME, HOST_CLASS_NAME, I, INSERT, IS_APPLE, IS_BOARD_CACHE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_MAC, IS_SAFARI, IS_TEXT_EDITABLE, J, K, L, LAST_MEDIA, LEFT_ARROW, M, MAC_ENTER, MAC_META, MAC_WK_CMD_LEFT, MAC_WK_CMD_RIGHT, MAX_RADIUS, MERGING, META, MUTE, N, NINE, NODE_TO_INDEX, NODE_TO_PARENT, NS, NUMPAD_DIVIDE, NUMPAD_EIGHT, NUMPAD_FIVE, NUMPAD_FOUR, NUMPAD_MINUS, NUMPAD_MULTIPLY, NUMPAD_NINE, NUMPAD_ONE, NUMPAD_PERIOD, NUMPAD_PLUS, NUMPAD_SEVEN, NUMPAD_SIX, NUMPAD_THREE, NUMPAD_TWO, NUMPAD_ZERO, NUM_CENTER, NUM_LOCK, O, ONE, OPEN_SQUARE_BRACKET, P, PAGE_DOWN, PAGE_UP, PATH_REFS, PAUSE, PERIOD, PLUS_SIGN, POINTER_BUTTON, PRESS_AND_MOVE_BUFFER, PRINT_SCREEN, Path, PlaitBoard, PlaitBoardComponent, PlaitChildrenElement, PlaitElement, PlaitElementComponent, PlaitHistoryBoard, PlaitIslandBaseComponent, PlaitIslandPopoverBaseComponent, PlaitModule, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPluginKey, PlaitPointerType, Point, Q, QUESTION_MARK, R, RIGHT_ARROW, RectangleClient, ResizeCursorClass, RetroThemeColor, S, SAVING, SCROLL_BAR_WIDTH, SCROLL_LOCK, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, SEMICOLON, SEVEN, SHIFT, SINGLE_QUOTE, SIX, SLASH, SPACE, Selection, SoftThemeColor, StarryThemeColor, T, TAB, THREE, TILDE, TWO, ThemeColorMode, ThemeColors, Transforms, U, UP_ARROW, V, VOLUME_DOWN, VOLUME_UP, Viewport, W, X, Y, Z, ZERO, addMovingElements, addSelectedElement, arrowPoints, cacheMovingElements, cacheSelectedElements, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createFakeEvent, createForeignObject, createG, createKeyboardEvent, createModModifierKeys, createMouseEvent, createPath, createPointerEvent, createSVG, createSelectionOuterG, createTestingBoard, createText, createTouchEvent, debounce, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, downloadImage, drawArrow, drawBezierPath, drawCircle, drawLine, drawLinearPath, drawRoundRectangle, fakeNodeWeakMap, getBoardRectangle, getElementHostBBox, getHitElementOfRoot, getHitElements, getIsRecursionFunc, getMovingElements, getRealScrollBarWidth, getRectangleByElements, getSelectedElements, getTemporaryElements, getViewBox, getViewBoxCenterPoint, getViewportContainerRect, getViewportOrigination, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnBoardChange, hasOnContextChanged, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isDOMElement, isDOMNode, isFromScrolling, isFromViewportChange, isHitElements, isInPlaitBoard, isMainPointer, isNullOrUndefined, isSecondaryPointer, isSelectedElement, isSelectionMoving, isSetViewportOperation, normalizePoint, preventNativeSelection, removeMovingElements, removeSelectedElement, rotate, scrollToRectangle, setIsFromScrolling, setIsFromViewportChange, setSVGViewBox, setSelectionMoving, shouldClear, shouldMerge, shouldSave, throttleRAF, toImage, toPoint, transformPoint, transformPoints, updateForeignObject, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withMoving, withOptions, withSelection };
+export { A, ALT, APOSTROPHE, ATTACHED_ELEMENT_CLASS_NAME, AT_SIGN, B, BACKSLASH, BACKSPACE, BOARD_TO_COMPONENT, BOARD_TO_ELEMENT_HOST, BOARD_TO_HOST, BOARD_TO_IS_SELECTION_MOVING, BOARD_TO_MOVING_ELEMENT, BOARD_TO_MOVING_POINT, BOARD_TO_MOVING_POINT_IN_BOARD, BOARD_TO_ON_CHANGE, BOARD_TO_ROUGH_SVG, BOARD_TO_SELECTED_ELEMENT, BOARD_TO_TEMPORARY_ELEMENTS, BOARD_TO_VIEWPORT_ORIGINATION, BoardTransforms, C, CAPS_LOCK, CLIP_BOARD_FORMAT_KEY, CLIP_BOARD_IMAGE_FORMAT_KEY, CLOSE_SQUARE_BRACKET, COMMA, CONTEXT_MENU, CONTROL, ColorfulThemeColor, D, DASH, DELETE, DOWN_ARROW, DarkThemeColor, DefaultThemeColor, E, EIGHT, ELEMENT_TO_COMPONENT, END, ENTER, EQUALS, ESCAPE, F, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, FF_EQUALS, FF_MINUS, FF_MUTE, FF_SEMICOLON, FF_VOLUME_DOWN, FF_VOLUME_UP, FIRST_MEDIA, FIVE, FLUSHING, FOUR, G, H, HOME, HOST_CLASS_NAME, I, INSERT, IS_APPLE, IS_BOARD_CACHE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_MAC, IS_SAFARI, IS_TEXT_EDITABLE, J, K, L, LAST_MEDIA, LEFT_ARROW, M, MAC_ENTER, MAC_META, MAC_WK_CMD_LEFT, MAC_WK_CMD_RIGHT, MAX_RADIUS, MERGING, META, MUTE, N, NINE, NODE_TO_INDEX, NODE_TO_PARENT, NS, NUMPAD_DIVIDE, NUMPAD_EIGHT, NUMPAD_FIVE, NUMPAD_FOUR, NUMPAD_MINUS, NUMPAD_MULTIPLY, NUMPAD_NINE, NUMPAD_ONE, NUMPAD_PERIOD, NUMPAD_PLUS, NUMPAD_SEVEN, NUMPAD_SIX, NUMPAD_THREE, NUMPAD_TWO, NUMPAD_ZERO, NUM_CENTER, NUM_LOCK, O, ONE, OPEN_SQUARE_BRACKET, P, PAGE_DOWN, PAGE_UP, PATH_REFS, PAUSE, PERIOD, PLUS_SIGN, POINTER_BUTTON, PRESS_AND_MOVE_BUFFER, PRINT_SCREEN, Path, PlaitBoard, PlaitBoardComponent, PlaitChildrenElement, PlaitContextService, PlaitElement, PlaitElementComponent, PlaitHistoryBoard, PlaitIslandBaseComponent, PlaitIslandPopoverBaseComponent, PlaitModule, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPluginKey, PlaitPointerType, Point, Q, QUESTION_MARK, R, RIGHT_ARROW, RectangleClient, ResizeCursorClass, RetroThemeColor, S, SAVING, SCROLL_BAR_WIDTH, SCROLL_LOCK, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, SEMICOLON, SEVEN, SHIFT, SINGLE_QUOTE, SIX, SLASH, SPACE, Selection, SoftThemeColor, StarryThemeColor, T, TAB, THREE, TILDE, TWO, ThemeColorMode, ThemeColors, Transforms, U, UP_ARROW, V, VOLUME_DOWN, VOLUME_UP, Viewport, W, X, Y, Z, ZERO, addMovingElements, addSelectedElement, arrowPoints, cacheMovingElements, cacheSelectedElements, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createFakeEvent, createForeignObject, createG, createKeyboardEvent, createModModifierKeys, createMouseEvent, createPath, createPointerEvent, createSVG, createSelectionOuterG, createTestingBoard, createText, createTouchEvent, debounce, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, downloadImage, drawArrow, drawBezierPath, drawCircle, drawLine, drawLinearPath, drawRoundRectangle, fakeNodeWeakMap, getBoardRectangle, getElementHostBBox, getHitElementOfRoot, getHitElements, getIsRecursionFunc, getMovingElements, getRealScrollBarWidth, getRectangleByElements, getSelectedElements, getTemporaryElements, getViewBox, getViewBoxCenterPoint, getViewportContainerRect, getViewportOrigination, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnBoardChange, hasOnContextChanged, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isDOMElement, isDOMNode, isFromScrolling, isFromViewportChange, isHitElements, isInPlaitBoard, isMainPointer, isNullOrUndefined, isSecondaryPointer, isSelectedElement, isSelectionMoving, isSetViewportOperation, normalizePoint, preventNativeSelection, removeMovingElements, removeSelectedElement, rotate, scrollToRectangle, setIsFromScrolling, setIsFromViewportChange, setSVGViewBox, setSelectionMoving, shouldClear, shouldMerge, shouldSave, throttleRAF, toImage, toPoint, transformPoint, transformPoints, updateForeignObject, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withMoving, withOptions, withSelection };
 //# sourceMappingURL=plait-core.mjs.map