@knotx/plugins-selection 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 格桑
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,193 @@
+'use strict';
+
+const core = require('@knotx/core');
+const decorators = require('@knotx/decorators');
+const pluginsBaseRender = require('@knotx/plugins-base-render');
+const SelectionArea = require('@viselect/vanilla');
+const rxjs = require('rxjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+const SelectionArea__default = /*#__PURE__*/_interopDefaultCompat(SelectionArea);
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __decoratorStart = (base) => {
+  var _a2;
+  return [, , , __create((_a2 = base == null ? void 0 : base[__knownSymbol("metadata")]) != null ? _a2 : null)];
+};
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _destroy_dec, _init_dec, _canInteract_dec, _endInteraction_dec, _startInteraction_dec, _registerPluginData_dec, _a, _init;
+const _Selection = class _Selection extends (_a = core.BasePlugin, _registerPluginData_dec = [decorators.inject.registerPluginData()], _startInteraction_dec = [decorators.inject.startInteraction()], _endInteraction_dec = [decorators.inject.endInteraction()], _canInteract_dec = [decorators.inject.canInteract()], _init_dec = [decorators.OnInit], _destroy_dec = [decorators.OnDestroy], _a) {
+  constructor(options = {
+    boundaries: [`.${core.bem("canvas", "wrapper")}`]
+  }) {
+    super();
+    this.options = options;
+    __runInitializers(_init, 5, this);
+    __publicField(this, "name", "selection");
+    __publicField(this, "selection");
+    __publicField(this, "selectedNodeIds$", new rxjs.BehaviorSubject([]));
+    __publicField(this, "registerPluginData", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __publicField(this, "startInteraction", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __publicField(this, "endInteraction", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __publicField(this, "canInteract", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+  }
+  init() {
+    this.registerPluginData("selection", "selectedNodeIds", this.selectedNodeIds$);
+    this.createSelection();
+  }
+  createSelection() {
+    const nodeClassName = core.addBemModifier(pluginsBaseRender.BaseRender.NODE_WRAPPER_CLASSNAME, "selected");
+    const selectionAreaClass = _Selection.SELECTION_AREA_CLASSNAME;
+    const selectables = [
+      `.${pluginsBaseRender.BaseRender.NODE_WRAPPER_CLASSNAME}`
+    ];
+    const endSelect = () => {
+      this.endInteraction(this.pluginId, "select");
+    };
+    this.selection = new SelectionArea__default(__spreadProps(__spreadValues({}, this.options), { selectionAreaClass, selectables })).on("start", ({ store, event, selection }) => {
+      if (!(event == null ? void 0 : event.ctrlKey) && !(event == null ? void 0 : event.metaKey)) {
+        store.stored.forEach((el) => {
+          if (el.className.includes(pluginsBaseRender.BaseRender.NODE_WRAPPER_CLASSNAME)) {
+            el.classList.remove(nodeClassName);
+          }
+        });
+        selection.clearSelection();
+        this.selectedNodeIds$.next([]);
+      }
+      this.startInteraction(this.pluginId, "select", core.InteractionPriority.MarqueeSelection);
+    }).on("move", ({ store: { changed: { added, removed } }, selection }) => {
+      if (!this.canInteract(this.pluginId, "select", core.InteractionPriority.MarqueeSelection)) {
+        selection.cancel();
+        endSelect();
+        return;
+      }
+      const addedNodeIds = [];
+      added.forEach((el) => {
+        if (el.className.includes(pluginsBaseRender.BaseRender.NODE_WRAPPER_CLASSNAME)) {
+          el.classList.add(nodeClassName);
+          const nodeId = el.getAttribute("data-node-id");
+          if (nodeId)
+            addedNodeIds.push(nodeId);
+        }
+      });
+      const removedNodeIds = [];
+      removed.forEach((el) => {
+        if (el.className.includes(pluginsBaseRender.BaseRender.NODE_WRAPPER_CLASSNAME)) {
+          el.classList.remove(nodeClassName);
+          const nodeId = el.getAttribute("data-node-id");
+          if (nodeId)
+            removedNodeIds.push(nodeId);
+        }
+      });
+      this.updateSelection(addedNodeIds, removedNodeIds);
+    }).on("stop", endSelect);
+  }
+  // 更新选中的节点和组
+  updateSelection(addedNodeIds = [], removedNodeIds = []) {
+    const currentNodeIds = this.selectedNodeIds$.getValue();
+    const newNodeIds = [
+      ...currentNodeIds.filter((id) => !removedNodeIds.includes(id)),
+      ...addedNodeIds.filter((id) => !currentNodeIds.includes(id))
+    ];
+    this.selectedNodeIds$.next(newNodeIds);
+  }
+  // 获取选中的节点ID
+  getSelectedNodeIds() {
+    return this.selectedNodeIds$.getValue();
+  }
+  // 选择节点
+  selectNodes(nodeIds, clearPrevious = true) {
+    if (clearPrevious) {
+      this.selectedNodeIds$.next(nodeIds);
+    } else {
+      const currentNodeIds = this.selectedNodeIds$.getValue();
+      this.selectedNodeIds$.next([
+        ...currentNodeIds,
+        ...nodeIds.filter((id) => !currentNodeIds.includes(id))
+      ]);
+    }
+  }
+  // 清除选择
+  clearSelection() {
+    this.selectedNodeIds$.next([]);
+  }
+  destroy() {
+    var _a2;
+    (_a2 = this.selection) == null ? void 0 : _a2.destroy();
+  }
+};
+_init = __decoratorStart(_a);
+__decorateElement(_init, 1, "init", _init_dec, _Selection);
+__decorateElement(_init, 1, "destroy", _destroy_dec, _Selection);
+__decorateElement(_init, 5, "registerPluginData", _registerPluginData_dec, _Selection);
+__decorateElement(_init, 5, "startInteraction", _startInteraction_dec, _Selection);
+__decorateElement(_init, 5, "endInteraction", _endInteraction_dec, _Selection);
+__decorateElement(_init, 5, "canInteract", _canInteract_dec, _Selection);
+__decoratorMetadata(_init, _Selection);
+__publicField(_Selection, "SELECTION_AREA_CLASSNAME", core.bem("selection-area"));
+let Selection = _Selection;
+
+exports.Selection = Selection;

package/dist/index.d.cts

@@ -0,0 +1,31 @@
+import { PartialSelectionOptions } from '@viselect/vanilla';
+import { BasePlugin } from '@knotx/core';
+
+declare module '@knotx/core' {
+    interface PluginData {
+        selection: {
+            selectedNodeIds: string[];
+        };
+    }
+}
+declare class Selection extends BasePlugin<'selection'> {
+    private options;
+    name: "selection";
+    private selection;
+    private selectedNodeIds$;
+    private registerPluginData;
+    private startInteraction;
+    private endInteraction;
+    private canInteract;
+    constructor(options?: PartialSelectionOptions);
+    protected init(): void;
+    private createSelection;
+    private updateSelection;
+    getSelectedNodeIds(): string[];
+    selectNodes(nodeIds: string[], clearPrevious?: boolean): void;
+    clearSelection(): void;
+    destroy(): void;
+    static SELECTION_AREA_CLASSNAME: string;
+}
+
+export { Selection };

package/dist/index.d.mts

@@ -0,0 +1,31 @@
+import { PartialSelectionOptions } from '@viselect/vanilla';
+import { BasePlugin } from '@knotx/core';
+
+declare module '@knotx/core' {
+    interface PluginData {
+        selection: {
+            selectedNodeIds: string[];
+        };
+    }
+}
+declare class Selection extends BasePlugin<'selection'> {
+    private options;
+    name: "selection";
+    private selection;
+    private selectedNodeIds$;
+    private registerPluginData;
+    private startInteraction;
+    private endInteraction;
+    private canInteract;
+    constructor(options?: PartialSelectionOptions);
+    protected init(): void;
+    private createSelection;
+    private updateSelection;
+    getSelectedNodeIds(): string[];
+    selectNodes(nodeIds: string[], clearPrevious?: boolean): void;
+    clearSelection(): void;
+    destroy(): void;
+    static SELECTION_AREA_CLASSNAME: string;
+}
+
+export { Selection };

package/dist/index.d.ts

@@ -0,0 +1,31 @@
+import { PartialSelectionOptions } from '@viselect/vanilla';
+import { BasePlugin } from '@knotx/core';
+
+declare module '@knotx/core' {
+    interface PluginData {
+        selection: {
+            selectedNodeIds: string[];
+        };
+    }
+}
+declare class Selection extends BasePlugin<'selection'> {
+    private options;
+    name: "selection";
+    private selection;
+    private selectedNodeIds$;
+    private registerPluginData;
+    private startInteraction;
+    private endInteraction;
+    private canInteract;
+    constructor(options?: PartialSelectionOptions);
+    protected init(): void;
+    private createSelection;
+    private updateSelection;
+    getSelectedNodeIds(): string[];
+    selectNodes(nodeIds: string[], clearPrevious?: boolean): void;
+    clearSelection(): void;
+    destroy(): void;
+    static SELECTION_AREA_CLASSNAME: string;
+}
+
+export { Selection };

package/dist/index.mjs

@@ -0,0 +1,187 @@
+import { bem, addBemModifier, InteractionPriority, BasePlugin } from '@knotx/core';
+import { inject, OnInit, OnDestroy } from '@knotx/decorators';
+import { BaseRender } from '@knotx/plugins-base-render';
+import SelectionArea from '@viselect/vanilla';
+import { BehaviorSubject } from 'rxjs';
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __decoratorStart = (base) => {
+  var _a2;
+  return [, , , __create((_a2 = base == null ? void 0 : base[__knownSymbol("metadata")]) != null ? _a2 : null)];
+};
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _destroy_dec, _init_dec, _canInteract_dec, _endInteraction_dec, _startInteraction_dec, _registerPluginData_dec, _a, _init;
+const _Selection = class _Selection extends (_a = BasePlugin, _registerPluginData_dec = [inject.registerPluginData()], _startInteraction_dec = [inject.startInteraction()], _endInteraction_dec = [inject.endInteraction()], _canInteract_dec = [inject.canInteract()], _init_dec = [OnInit], _destroy_dec = [OnDestroy], _a) {
+  constructor(options = {
+    boundaries: [`.${bem("canvas", "wrapper")}`]
+  }) {
+    super();
+    this.options = options;
+    __runInitializers(_init, 5, this);
+    __publicField(this, "name", "selection");
+    __publicField(this, "selection");
+    __publicField(this, "selectedNodeIds$", new BehaviorSubject([]));
+    __publicField(this, "registerPluginData", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __publicField(this, "startInteraction", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __publicField(this, "endInteraction", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __publicField(this, "canInteract", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+  }
+  init() {
+    this.registerPluginData("selection", "selectedNodeIds", this.selectedNodeIds$);
+    this.createSelection();
+  }
+  createSelection() {
+    const nodeClassName = addBemModifier(BaseRender.NODE_WRAPPER_CLASSNAME, "selected");
+    const selectionAreaClass = _Selection.SELECTION_AREA_CLASSNAME;
+    const selectables = [
+      `.${BaseRender.NODE_WRAPPER_CLASSNAME}`
+    ];
+    const endSelect = () => {
+      this.endInteraction(this.pluginId, "select");
+    };
+    this.selection = new SelectionArea(__spreadProps(__spreadValues({}, this.options), { selectionAreaClass, selectables })).on("start", ({ store, event, selection }) => {
+      if (!(event == null ? void 0 : event.ctrlKey) && !(event == null ? void 0 : event.metaKey)) {
+        store.stored.forEach((el) => {
+          if (el.className.includes(BaseRender.NODE_WRAPPER_CLASSNAME)) {
+            el.classList.remove(nodeClassName);
+          }
+        });
+        selection.clearSelection();
+        this.selectedNodeIds$.next([]);
+      }
+      this.startInteraction(this.pluginId, "select", InteractionPriority.MarqueeSelection);
+    }).on("move", ({ store: { changed: { added, removed } }, selection }) => {
+      if (!this.canInteract(this.pluginId, "select", InteractionPriority.MarqueeSelection)) {
+        selection.cancel();
+        endSelect();
+        return;
+      }
+      const addedNodeIds = [];
+      added.forEach((el) => {
+        if (el.className.includes(BaseRender.NODE_WRAPPER_CLASSNAME)) {
+          el.classList.add(nodeClassName);
+          const nodeId = el.getAttribute("data-node-id");
+          if (nodeId)
+            addedNodeIds.push(nodeId);
+        }
+      });
+      const removedNodeIds = [];
+      removed.forEach((el) => {
+        if (el.className.includes(BaseRender.NODE_WRAPPER_CLASSNAME)) {
+          el.classList.remove(nodeClassName);
+          const nodeId = el.getAttribute("data-node-id");
+          if (nodeId)
+            removedNodeIds.push(nodeId);
+        }
+      });
+      this.updateSelection(addedNodeIds, removedNodeIds);
+    }).on("stop", endSelect);
+  }
+  // 更新选中的节点和组
+  updateSelection(addedNodeIds = [], removedNodeIds = []) {
+    const currentNodeIds = this.selectedNodeIds$.getValue();
+    const newNodeIds = [
+      ...currentNodeIds.filter((id) => !removedNodeIds.includes(id)),
+      ...addedNodeIds.filter((id) => !currentNodeIds.includes(id))
+    ];
+    this.selectedNodeIds$.next(newNodeIds);
+  }
+  // 获取选中的节点ID
+  getSelectedNodeIds() {
+    return this.selectedNodeIds$.getValue();
+  }
+  // 选择节点
+  selectNodes(nodeIds, clearPrevious = true) {
+    if (clearPrevious) {
+      this.selectedNodeIds$.next(nodeIds);
+    } else {
+      const currentNodeIds = this.selectedNodeIds$.getValue();
+      this.selectedNodeIds$.next([
+        ...currentNodeIds,
+        ...nodeIds.filter((id) => !currentNodeIds.includes(id))
+      ]);
+    }
+  }
+  // 清除选择
+  clearSelection() {
+    this.selectedNodeIds$.next([]);
+  }
+  destroy() {
+    var _a2;
+    (_a2 = this.selection) == null ? void 0 : _a2.destroy();
+  }
+};
+_init = __decoratorStart(_a);
+__decorateElement(_init, 1, "init", _init_dec, _Selection);
+__decorateElement(_init, 1, "destroy", _destroy_dec, _Selection);
+__decorateElement(_init, 5, "registerPluginData", _registerPluginData_dec, _Selection);
+__decorateElement(_init, 5, "startInteraction", _startInteraction_dec, _Selection);
+__decorateElement(_init, 5, "endInteraction", _endInteraction_dec, _Selection);
+__decorateElement(_init, 5, "canInteract", _canInteract_dec, _Selection);
+__decoratorMetadata(_init, _Selection);
+__publicField(_Selection, "SELECTION_AREA_CLASSNAME", bem("selection-area"));
+let Selection = _Selection;
+
+export { Selection };

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@knotx/plugins-selection",
+  "type": "module",
+  "version": "0.0.0",
+  "description": "Selection Plugin for Knotx",
+  "author": "boenfu",
+  "license": "MIT",
+  "homepage": "https://github.com/boenfu/knotx#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/boenfu/knotx.git",
+    "directory": "packages/plugins-selection"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@viselect/vanilla": "^3.9.0",
+    "rxjs": "^7.8.1",
+    "@knotx/core": "0.0.0",
+    "@knotx/decorators": "0.0.0",
+    "@knotx/plugins-base-render": "0.0.0"
+  },
+  "devDependencies": {
+    "@knotx/eslint-config": "0.0.0",
+    "@knotx/typescript-config": "0.0.0"
+  },
+  "scripts": {
+    "build": "unbuild --failOnWarn=false",
+    "dev": "unbuild --stub",
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit"
+  }
+}