@knotx/plugins-selection 0.3.8 → 0.4.0

package/dist/index.cjs

@@ -2,7 +2,7 @@
 
 const core = require('@knotx/core');
 const decorators = require('@knotx/decorators');
-const SelectionArea = require('@viselect/vanilla');
+const SelectionArea = require('@knotx/viselect');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
@@ -73,8 +73,8 @@ var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use
 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, _clearSelection_dec, _select_dec, _getSelected_dec, _init_dec, _edgeScroll_dec, _interaction_dec, _setElementOverlap_dec, _setClearSelectionBeforeStart_dec, _clearSelectionBeforeStart_dec, _setRuleEnabled_dec, _registerRules_dec, _selected_dec, _a, _init;
-class Selection extends (_a = core.BasePlugin, _selected_dec = [decorators.register("selected")], _registerRules_dec = [decorators.register("registerRules")], _setRuleEnabled_dec = [decorators.register("setRuleEnabled")], _clearSelectionBeforeStart_dec = [decorators.observable()], _setClearSelectionBeforeStart_dec = [decorators.register("setClearSelectionBeforeStart")], _setElementOverlap_dec = [decorators.register("setElementOverlap")], _interaction_dec = [decorators.inject.interaction()], _edgeScroll_dec = [decorators.inject.canvas.edgeScroll()], _init_dec = [decorators.OnInit], _getSelected_dec = [decorators.tool("Get selected items", {})], _select_dec = [decorators.tool("Items that match the registered rules will be selected, manifested as the item showing a selected style.", {
+var _destroy_dec, _clearSelection_dec, _select_dec, _getSelected_dec, _init_dec, _contentSize_dec, _transform_dec, _interaction_dec, _containerSize_dec, _resolveSelectables_dec, _setElementOverlap_dec, _setClearSelectionBeforeStart_dec, _clearSelectionBeforeStart_dec, _setRuleEnabled_dec, _registerRules_dec, _selected_dec, _a, _init;
+class Selection extends (_a = core.BasePlugin, _selected_dec = [decorators.register("selected")], _registerRules_dec = [decorators.register("registerRules")], _setRuleEnabled_dec = [decorators.register("setRuleEnabled")], _clearSelectionBeforeStart_dec = [decorators.observable()], _setClearSelectionBeforeStart_dec = [decorators.register("setClearSelectionBeforeStart")], _setElementOverlap_dec = [decorators.register("setElementOverlap")], _resolveSelectables_dec = [decorators.register("resolveSelectables")], _containerSize_dec = [decorators.inject.container()], _interaction_dec = [decorators.inject.interaction()], _transform_dec = [decorators.inject.canvas.transform()], _contentSize_dec = [decorators.inject.canvas.contentSize()], _init_dec = [decorators.OnInit], _getSelected_dec = [decorators.tool("Get selected items", {})], _select_dec = [decorators.tool("Items that match the registered rules will be selected, manifested as the item showing a selected style.", {
   type: "array",
   items: {
     type: "object",
@@ -105,7 +105,7 @@ class Selection extends (_a = core.BasePlugin, _selected_dec = [decorators.regis
     __publicField(this, "ruleMap", /* @__PURE__ */ new Map());
     __publicField(this, "enableDrag", true);
     __publicField(this, "isDragging", false);
-    __publicField(this, "enableEdgeScroll", false);
+    __publicField(this, "scrollingPosition", { x: 0, y: 0 });
     __publicField(this, "updateFrameId");
     __publicField(this, "selected", __runInitializers(_init, 8, this, [])), __runInitializers(_init, 11, this);
     __publicField(this, "registerRules", __runInitializers(_init, 12, this, (rules) => {
@@ -136,8 +136,14 @@ class Selection extends (_a = core.BasePlugin, _selected_dec = [decorators.regis
       } catch (e) {
       }
     })), __runInitializers(_init, 31, this);
-    __publicField(this, "interaction", __runInitializers(_init, 32, this)), __runInitializers(_init, 35, this);
-    __publicField(this, "edgeScroll", __runInitializers(_init, 36, this)), __runInitializers(_init, 39, this);
+    __publicField(this, "resolveSelectables", __runInitializers(_init, 32, this, () => {
+      var _a2;
+      (_a2 = this.selection) == null ? void 0 : _a2.resolveSelectables();
+    })), __runInitializers(_init, 35, this);
+    __publicField(this, "containerSize", __runInitializers(_init, 36, this)), __runInitializers(_init, 39, this);
+    __publicField(this, "interaction", __runInitializers(_init, 40, this)), __runInitializers(_init, 43, this);
+    __publicField(this, "transform", __runInitializers(_init, 44, this)), __runInitializers(_init, 47, this);
+    __publicField(this, "contentSize", __runInitializers(_init, 48, this)), __runInitializers(_init, 51, this);
     __publicField(this, "onBeforeStart", (_) => {
     });
     __publicField(this, "onBeforeDrag", () => {
@@ -147,9 +153,6 @@ class Selection extends (_a = core.BasePlugin, _selected_dec = [decorators.regis
     __publicField(this, "onStart", ({ event, store }) => {
       var _a2;
       this.interaction.start(this.pluginId, "select", core.InteractionPriority.MarqueeSelection);
-      if (this.enableEdgeScroll && this.edgeScroll) {
-        this.edgeScroll.setConfig({ enabled: true });
-      }
       if (!(event == null ? void 0 : event.ctrlKey) && !(event == null ? void 0 : event.metaKey) && !(event == null ? void 0 : event.shiftKey)) {
         if (this.clearSelectionBeforeStart) {
           store.stored.forEach((element) => {
@@ -162,6 +165,9 @@ class Selection extends (_a = core.BasePlugin, _selected_dec = [decorators.regis
           (_a2 = this.selection) == null ? void 0 : _a2.clearSelection(true, true);
         }
       }
+      if (this.isDragging) {
+        this.scrollingPosition = { x: -this.transform.positionX, y: -this.transform.positionY };
+      }
     });
     __publicField(this, "onMove", ({ store: { stored, changed: { added, removed } }, selection }) => {
       const getSelectedElements = () => {
@@ -220,9 +226,6 @@ class Selection extends (_a = core.BasePlugin, _selected_dec = [decorators.regis
     });
     __publicField(this, "onStop", ({ event }) => {
       this.interaction.end(this.pluginId, "select");
-      if (this.enableEdgeScroll && this.edgeScroll) {
-        this.edgeScroll.setConfig({ enabled: false });
-      }
       if (event) {
         if (this.isDragging) {
           this.isDragging = false;
@@ -230,6 +233,7 @@ class Selection extends (_a = core.BasePlugin, _selected_dec = [decorators.regis
       }
       cancelAnimationFrame(this.updateFrameId);
       this.updateFrameId = requestAnimationFrame(this.updateSelected);
+      this.scrollingPosition = { x: 0, y: 0 };
     });
     __publicField(this, "updateSelected", () => {
       var _a2;
@@ -261,9 +265,6 @@ class Selection extends (_a = core.BasePlugin, _selected_dec = [decorators.regis
     if (config.enableDrag !== void 0) {
       this.enableDrag = config.enableDrag;
     }
-    if (config.enableEdgeScroll !== void 0) {
-      this.enableEdgeScroll = config.enableEdgeScroll;
-    }
     queueMicrotask(() => this.createSelection());
   }
   createSelection() {
@@ -275,8 +276,21 @@ class Selection extends (_a = core.BasePlugin, _selected_dec = [decorators.regis
       selectables: Array.from(new Set(Array.from(this.ruleMap.values()).map(({ className }) => `.${className}`))),
       behaviour: {
         scrolling: {
-          manualSpeed: 0
+          startScrollMargins: { x: 24, y: 24 }
         }
+      },
+      scrollController: {
+        getScrollPosition: () => {
+          return this.scrollingPosition;
+        },
+        setScrollPosition: (_, { x = this.scrollingPosition.x, y = this.scrollingPosition.y }) => {
+          this.scrollingPosition.x = x;
+          this.scrollingPosition.y = y;
+          this.callTool("canvas", "setTransform", { positionX: -x, positionY: -y, scale: this.transform.scale, animationTime: 0 });
+        },
+        getClientSize: (element) => this.containerSize || { width: element.clientWidth, height: element.clientHeight },
+        getScrollSize: (element) => this.contentSize || { width: element.scrollWidth, height: element.scrollHeight },
+        alwaysScroll: true
       }
     }).on("beforedrag", this.onBeforeDrag).on("beforestart", this.onBeforeStart).on("start", this.onStart).on("move", this.onMove).on("stop", this.onStop);
   }
@@ -324,8 +338,11 @@ __decorateElement(_init, 5, "setRuleEnabled", _setRuleEnabled_dec, Selection);
 __decorateElement(_init, 5, "clearSelectionBeforeStart", _clearSelectionBeforeStart_dec, Selection);
 __decorateElement(_init, 5, "setClearSelectionBeforeStart", _setClearSelectionBeforeStart_dec, Selection);
 __decorateElement(_init, 5, "setElementOverlap", _setElementOverlap_dec, Selection);
+__decorateElement(_init, 5, "resolveSelectables", _resolveSelectables_dec, Selection);
+__decorateElement(_init, 5, "containerSize", _containerSize_dec, Selection);
 __decorateElement(_init, 5, "interaction", _interaction_dec, Selection);
-__decorateElement(_init, 5, "edgeScroll", _edgeScroll_dec, Selection);
+__decorateElement(_init, 5, "transform", _transform_dec, Selection);
+__decorateElement(_init, 5, "contentSize", _contentSize_dec, Selection);
 __decoratorMetadata(_init, Selection);
 
 exports.Selection = Selection;

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { BasePlugin, PluginData } from '@knotx/core';
-import { OverlapMode } from '@viselect/vanilla';
+import { BasePlugin, Engine, PluginData } from '@knotx/core';
+import { OverlapMode } from '@knotx/viselect';
 
 interface SelectionSelectedItem {
     type: string;
@@ -29,6 +29,11 @@ declare module '@knotx/core' {
              * @returns
              */
             setElementOverlap: (overlap: OverlapMode) => void;
+            /**
+             * 重新匹配可选中元素，适用于虚拟滚动后可选择元素有变化的场景
+             * @returns
+             */
+            resolveSelectables: () => void;
         };
     }
     interface PluginTools {
@@ -89,11 +94,6 @@ interface SelectionConfig {
      * default: bemSelector('canvas', 'wrapper')
      */
     container?: string;
-    /**
-     * 是否启用边缘滚动
-     * default: false
-     */
-    enableEdgeScroll?: boolean;
 }
 declare class Selection extends BasePlugin<'selection', SelectionConfig> {
     name: "selection";
@@ -103,7 +103,7 @@ declare class Selection extends BasePlugin<'selection', SelectionConfig> {
     private ruleMap;
     private enableDrag;
     private isDragging;
-    private enableEdgeScroll;
+    private scrollingPosition;
     private updateFrameId;
     selected: SelectionSelectedItem[];
     registerRules: (rules: SelectionRule[]) => () => void;
@@ -111,8 +111,11 @@ declare class Selection extends BasePlugin<'selection', SelectionConfig> {
     clearSelectionBeforeStart: boolean;
     setClearSelectionBeforeStart: (clearSelectionBeforeStart: boolean) => void;
     setElementOverlap: (overlap: OverlapMode) => void;
+    resolveSelectables: () => void;
+    containerSize: Engine['container'];
     private interaction;
-    edgeScroll: PluginData['canvas']['edgeScroll'];
+    transform: PluginData['canvas']['transform'];
+    contentSize: PluginData['canvas']['contentSize'];
     init(config?: SelectionConfig): void;
     private createSelection;
     private onBeforeStart;

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { BasePlugin, PluginData } from '@knotx/core';
-import { OverlapMode } from '@viselect/vanilla';
+import { BasePlugin, Engine, PluginData } from '@knotx/core';
+import { OverlapMode } from '@knotx/viselect';
 
 interface SelectionSelectedItem {
     type: string;
@@ -29,6 +29,11 @@ declare module '@knotx/core' {
              * @returns
              */
             setElementOverlap: (overlap: OverlapMode) => void;
+            /**
+             * 重新匹配可选中元素，适用于虚拟滚动后可选择元素有变化的场景
+             * @returns
+             */
+            resolveSelectables: () => void;
         };
     }
     interface PluginTools {
@@ -89,11 +94,6 @@ interface SelectionConfig {
      * default: bemSelector('canvas', 'wrapper')
      */
     container?: string;
-    /**
-     * 是否启用边缘滚动
-     * default: false
-     */
-    enableEdgeScroll?: boolean;
 }
 declare class Selection extends BasePlugin<'selection', SelectionConfig> {
     name: "selection";
@@ -103,7 +103,7 @@ declare class Selection extends BasePlugin<'selection', SelectionConfig> {
     private ruleMap;
     private enableDrag;
     private isDragging;
-    private enableEdgeScroll;
+    private scrollingPosition;
     private updateFrameId;
     selected: SelectionSelectedItem[];
     registerRules: (rules: SelectionRule[]) => () => void;
@@ -111,8 +111,11 @@ declare class Selection extends BasePlugin<'selection', SelectionConfig> {
     clearSelectionBeforeStart: boolean;
     setClearSelectionBeforeStart: (clearSelectionBeforeStart: boolean) => void;
     setElementOverlap: (overlap: OverlapMode) => void;
+    resolveSelectables: () => void;
+    containerSize: Engine['container'];
     private interaction;
-    edgeScroll: PluginData['canvas']['edgeScroll'];
+    transform: PluginData['canvas']['transform'];
+    contentSize: PluginData['canvas']['contentSize'];
     init(config?: SelectionConfig): void;
     private createSelection;
     private onBeforeStart;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { BasePlugin, PluginData } from '@knotx/core';
-import { OverlapMode } from '@viselect/vanilla';
+import { BasePlugin, Engine, PluginData } from '@knotx/core';
+import { OverlapMode } from '@knotx/viselect';
 
 interface SelectionSelectedItem {
     type: string;
@@ -29,6 +29,11 @@ declare module '@knotx/core' {
              * @returns
              */
             setElementOverlap: (overlap: OverlapMode) => void;
+            /**
+             * 重新匹配可选中元素，适用于虚拟滚动后可选择元素有变化的场景
+             * @returns
+             */
+            resolveSelectables: () => void;
         };
     }
     interface PluginTools {
@@ -89,11 +94,6 @@ interface SelectionConfig {
      * default: bemSelector('canvas', 'wrapper')
      */
     container?: string;
-    /**
-     * 是否启用边缘滚动
-     * default: false
-     */
-    enableEdgeScroll?: boolean;
 }
 declare class Selection extends BasePlugin<'selection', SelectionConfig> {
     name: "selection";
@@ -103,7 +103,7 @@ declare class Selection extends BasePlugin<'selection', SelectionConfig> {
     private ruleMap;
     private enableDrag;
     private isDragging;
-    private enableEdgeScroll;
+    private scrollingPosition;
     private updateFrameId;
     selected: SelectionSelectedItem[];
     registerRules: (rules: SelectionRule[]) => () => void;
@@ -111,8 +111,11 @@ declare class Selection extends BasePlugin<'selection', SelectionConfig> {
     clearSelectionBeforeStart: boolean;
     setClearSelectionBeforeStart: (clearSelectionBeforeStart: boolean) => void;
     setElementOverlap: (overlap: OverlapMode) => void;
+    resolveSelectables: () => void;
+    containerSize: Engine['container'];
     private interaction;
-    edgeScroll: PluginData['canvas']['edgeScroll'];
+    transform: PluginData['canvas']['transform'];
+    contentSize: PluginData['canvas']['contentSize'];
     init(config?: SelectionConfig): void;
     private createSelection;
     private onBeforeStart;

package/dist/index.js

@@ -1,6 +1,6 @@
 import { bemSelector, bem, BasePlugin, InteractionPriority } from '@knotx/core';
 import { register, observable, inject, tool, OnInit, OnDestroy } from '@knotx/decorators';
-import SelectionArea from '@viselect/vanilla';
+import SelectionArea from '@knotx/viselect';
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -67,8 +67,8 @@ var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use
 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, _clearSelection_dec, _select_dec, _getSelected_dec, _init_dec, _edgeScroll_dec, _interaction_dec, _setElementOverlap_dec, _setClearSelectionBeforeStart_dec, _clearSelectionBeforeStart_dec, _setRuleEnabled_dec, _registerRules_dec, _selected_dec, _a, _init;
-class Selection extends (_a = BasePlugin, _selected_dec = [register("selected")], _registerRules_dec = [register("registerRules")], _setRuleEnabled_dec = [register("setRuleEnabled")], _clearSelectionBeforeStart_dec = [observable()], _setClearSelectionBeforeStart_dec = [register("setClearSelectionBeforeStart")], _setElementOverlap_dec = [register("setElementOverlap")], _interaction_dec = [inject.interaction()], _edgeScroll_dec = [inject.canvas.edgeScroll()], _init_dec = [OnInit], _getSelected_dec = [tool("Get selected items", {})], _select_dec = [tool("Items that match the registered rules will be selected, manifested as the item showing a selected style.", {
+var _destroy_dec, _clearSelection_dec, _select_dec, _getSelected_dec, _init_dec, _contentSize_dec, _transform_dec, _interaction_dec, _containerSize_dec, _resolveSelectables_dec, _setElementOverlap_dec, _setClearSelectionBeforeStart_dec, _clearSelectionBeforeStart_dec, _setRuleEnabled_dec, _registerRules_dec, _selected_dec, _a, _init;
+class Selection extends (_a = BasePlugin, _selected_dec = [register("selected")], _registerRules_dec = [register("registerRules")], _setRuleEnabled_dec = [register("setRuleEnabled")], _clearSelectionBeforeStart_dec = [observable()], _setClearSelectionBeforeStart_dec = [register("setClearSelectionBeforeStart")], _setElementOverlap_dec = [register("setElementOverlap")], _resolveSelectables_dec = [register("resolveSelectables")], _containerSize_dec = [inject.container()], _interaction_dec = [inject.interaction()], _transform_dec = [inject.canvas.transform()], _contentSize_dec = [inject.canvas.contentSize()], _init_dec = [OnInit], _getSelected_dec = [tool("Get selected items", {})], _select_dec = [tool("Items that match the registered rules will be selected, manifested as the item showing a selected style.", {
   type: "array",
   items: {
     type: "object",
@@ -99,7 +99,7 @@ class Selection extends (_a = BasePlugin, _selected_dec = [register("selected")]
     __publicField(this, "ruleMap", /* @__PURE__ */ new Map());
     __publicField(this, "enableDrag", true);
     __publicField(this, "isDragging", false);
-    __publicField(this, "enableEdgeScroll", false);
+    __publicField(this, "scrollingPosition", { x: 0, y: 0 });
     __publicField(this, "updateFrameId");
     __publicField(this, "selected", __runInitializers(_init, 8, this, [])), __runInitializers(_init, 11, this);
     __publicField(this, "registerRules", __runInitializers(_init, 12, this, (rules) => {
@@ -130,8 +130,14 @@ class Selection extends (_a = BasePlugin, _selected_dec = [register("selected")]
       } catch (e) {
       }
     })), __runInitializers(_init, 31, this);
-    __publicField(this, "interaction", __runInitializers(_init, 32, this)), __runInitializers(_init, 35, this);
-    __publicField(this, "edgeScroll", __runInitializers(_init, 36, this)), __runInitializers(_init, 39, this);
+    __publicField(this, "resolveSelectables", __runInitializers(_init, 32, this, () => {
+      var _a2;
+      (_a2 = this.selection) == null ? void 0 : _a2.resolveSelectables();
+    })), __runInitializers(_init, 35, this);
+    __publicField(this, "containerSize", __runInitializers(_init, 36, this)), __runInitializers(_init, 39, this);
+    __publicField(this, "interaction", __runInitializers(_init, 40, this)), __runInitializers(_init, 43, this);
+    __publicField(this, "transform", __runInitializers(_init, 44, this)), __runInitializers(_init, 47, this);
+    __publicField(this, "contentSize", __runInitializers(_init, 48, this)), __runInitializers(_init, 51, this);
     __publicField(this, "onBeforeStart", (_) => {
     });
     __publicField(this, "onBeforeDrag", () => {
@@ -141,9 +147,6 @@ class Selection extends (_a = BasePlugin, _selected_dec = [register("selected")]
     __publicField(this, "onStart", ({ event, store }) => {
       var _a2;
       this.interaction.start(this.pluginId, "select", InteractionPriority.MarqueeSelection);
-      if (this.enableEdgeScroll && this.edgeScroll) {
-        this.edgeScroll.setConfig({ enabled: true });
-      }
       if (!(event == null ? void 0 : event.ctrlKey) && !(event == null ? void 0 : event.metaKey) && !(event == null ? void 0 : event.shiftKey)) {
         if (this.clearSelectionBeforeStart) {
           store.stored.forEach((element) => {
@@ -156,6 +159,9 @@ class Selection extends (_a = BasePlugin, _selected_dec = [register("selected")]
           (_a2 = this.selection) == null ? void 0 : _a2.clearSelection(true, true);
         }
       }
+      if (this.isDragging) {
+        this.scrollingPosition = { x: -this.transform.positionX, y: -this.transform.positionY };
+      }
     });
     __publicField(this, "onMove", ({ store: { stored, changed: { added, removed } }, selection }) => {
       const getSelectedElements = () => {
@@ -214,9 +220,6 @@ class Selection extends (_a = BasePlugin, _selected_dec = [register("selected")]
     });
     __publicField(this, "onStop", ({ event }) => {
       this.interaction.end(this.pluginId, "select");
-      if (this.enableEdgeScroll && this.edgeScroll) {
-        this.edgeScroll.setConfig({ enabled: false });
-      }
       if (event) {
         if (this.isDragging) {
           this.isDragging = false;
@@ -224,6 +227,7 @@ class Selection extends (_a = BasePlugin, _selected_dec = [register("selected")]
       }
       cancelAnimationFrame(this.updateFrameId);
       this.updateFrameId = requestAnimationFrame(this.updateSelected);
+      this.scrollingPosition = { x: 0, y: 0 };
     });
     __publicField(this, "updateSelected", () => {
       var _a2;
@@ -255,9 +259,6 @@ class Selection extends (_a = BasePlugin, _selected_dec = [register("selected")]
     if (config.enableDrag !== void 0) {
       this.enableDrag = config.enableDrag;
     }
-    if (config.enableEdgeScroll !== void 0) {
-      this.enableEdgeScroll = config.enableEdgeScroll;
-    }
     queueMicrotask(() => this.createSelection());
   }
   createSelection() {
@@ -269,8 +270,21 @@ class Selection extends (_a = BasePlugin, _selected_dec = [register("selected")]
       selectables: Array.from(new Set(Array.from(this.ruleMap.values()).map(({ className }) => `.${className}`))),
       behaviour: {
         scrolling: {
-          manualSpeed: 0
+          startScrollMargins: { x: 24, y: 24 }
         }
+      },
+      scrollController: {
+        getScrollPosition: () => {
+          return this.scrollingPosition;
+        },
+        setScrollPosition: (_, { x = this.scrollingPosition.x, y = this.scrollingPosition.y }) => {
+          this.scrollingPosition.x = x;
+          this.scrollingPosition.y = y;
+          this.callTool("canvas", "setTransform", { positionX: -x, positionY: -y, scale: this.transform.scale, animationTime: 0 });
+        },
+        getClientSize: (element) => this.containerSize || { width: element.clientWidth, height: element.clientHeight },
+        getScrollSize: (element) => this.contentSize || { width: element.scrollWidth, height: element.scrollHeight },
+        alwaysScroll: true
       }
     }).on("beforedrag", this.onBeforeDrag).on("beforestart", this.onBeforeStart).on("start", this.onStart).on("move", this.onMove).on("stop", this.onStop);
   }
@@ -318,8 +332,11 @@ __decorateElement(_init, 5, "setRuleEnabled", _setRuleEnabled_dec, Selection);
 __decorateElement(_init, 5, "clearSelectionBeforeStart", _clearSelectionBeforeStart_dec, Selection);
 __decorateElement(_init, 5, "setClearSelectionBeforeStart", _setClearSelectionBeforeStart_dec, Selection);
 __decorateElement(_init, 5, "setElementOverlap", _setElementOverlap_dec, Selection);
+__decorateElement(_init, 5, "resolveSelectables", _resolveSelectables_dec, Selection);
+__decorateElement(_init, 5, "containerSize", _containerSize_dec, Selection);
 __decorateElement(_init, 5, "interaction", _interaction_dec, Selection);
-__decorateElement(_init, 5, "edgeScroll", _edgeScroll_dec, Selection);
+__decorateElement(_init, 5, "transform", _transform_dec, Selection);
+__decorateElement(_init, 5, "contentSize", _contentSize_dec, Selection);
 __decoratorMetadata(_init, Selection);
 
 export { Selection };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knotx/plugins-selection",
-  "version": "0.3.8",
+  "version": "0.4.0",
   "description": "Selection Plugin for Knotx",
   "author": "boenfu",
   "license": "MIT",
@@ -28,19 +28,19 @@
     "dist"
   ],
   "peerDependencies": {
-    "@knotx/plugins-canvas": "0.3.8"
+    "@knotx/plugins-canvas": "0.4.0"
   },
   "dependencies": {
-    "@viselect/vanilla": "^3.9.0",
+    "@knotx/viselect": "^3.9.0",
     "rxjs": "^7.8.1",
-    "@knotx/core": "0.3.8",
-    "@knotx/decorators": "0.3.8"
+    "@knotx/core": "0.4.0",
+    "@knotx/decorators": "0.4.0"
   },
   "devDependencies": {
-    "@knotx/build-config": "0.3.8",
-    "@knotx/eslint-config": "0.3.8",
-    "@knotx/plugins-canvas": "0.3.8",
-    "@knotx/typescript-config": "0.3.8"
+    "@knotx/build-config": "0.4.0",
+    "@knotx/eslint-config": "0.4.0",
+    "@knotx/plugins-canvas": "0.4.0",
+    "@knotx/typescript-config": "0.4.0"
   },
   "scripts": {
     "build": "unbuild",