@knotx/plugins-selection 0.2.11 → 0.2.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.cjs +34 -26
  2. package/dist/index.d.cts +10 -3
  3. package/dist/index.d.mts +10 -3
  4. package/dist/index.d.ts +10 -3
  5. package/dist/index.js +35 -27
  6. package/package.json +6 -6
package/dist/index.cjs CHANGED
@@ -3,7 +3,6 @@
3
3
  const core = require('@knotx/core');
4
4
  const decorators = require('@knotx/decorators');
5
5
  const SelectionArea = require('@viselect/vanilla');
6
- const rxjs = require('rxjs');
7
6
 
8
7
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
9
8
 
@@ -77,25 +76,24 @@ var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use
77
76
  var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
78
77
  var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
79
78
  var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
80
- var _destroy_dec, _init_dec, _canInteract_dec, _endInteraction_dec, _startInteraction_dec, _registerPluginData_dec, _a, _init;
81
- 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) {
79
+ var _destroy_dec, _clearSelection_dec, _getSelectedNodeIds_dec, _init_dec, _canInteract_dec, _endInteraction_dec, _startInteraction_dec, _selectStatus_dec, _selectedNodeIds_dec, _a, _init;
80
+ class Selection extends (_a = core.BasePlugin, _selectedNodeIds_dec = [decorators.register("selectedNodeIds")], _selectStatus_dec = [decorators.register("selectStatus")], _startInteraction_dec = [decorators.inject.startInteraction()], _endInteraction_dec = [decorators.inject.endInteraction()], _canInteract_dec = [decorators.inject.canInteract()], _init_dec = [decorators.OnInit], _getSelectedNodeIds_dec = [decorators.tool("Get selected node ids", {})], _clearSelection_dec = [decorators.tool("Clear selection", {})], _destroy_dec = [decorators.OnDestroy], _a) {
82
81
  constructor() {
83
82
  super(...arguments);
84
83
  __runInitializers(_init, 5, this);
85
84
  __publicField(this, "name", "selection");
86
85
  __publicField(this, "config");
87
86
  __publicField(this, "selection");
88
- __publicField(this, "selectedNodeIds$", new rxjs.BehaviorSubject([]));
89
- __publicField(this, "registerPluginData", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
90
- __publicField(this, "startInteraction", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
91
- __publicField(this, "endInteraction", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
92
- __publicField(this, "canInteract", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
87
+ __publicField(this, "selectedNodeIds", __runInitializers(_init, 8, this, [])), __runInitializers(_init, 11, this);
88
+ __publicField(this, "selectStatus", __runInitializers(_init, 12, this, "stop")), __runInitializers(_init, 15, this);
89
+ __publicField(this, "startInteraction", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
90
+ __publicField(this, "endInteraction", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
91
+ __publicField(this, "canInteract", __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
93
92
  }
94
93
  init(config) {
95
94
  this.config = __spreadValues({
96
95
  boundaries: [`.${core.bem("canvas", "wrapper")}`]
97
96
  }, config);
98
- this.registerPluginData("selection", "selectedNodeIds", this.selectedNodeIds$);
99
97
  this.createSelection();
100
98
  }
101
99
  createSelection() {
@@ -105,19 +103,24 @@ class Selection extends (_a = core.BasePlugin, _registerPluginData_dec = [decora
105
103
  const selectables = [`.${nodeWrapperClassName}`];
106
104
  const endSelect = () => {
107
105
  this.endInteraction(this.pluginId, "select");
106
+ this.selectStatus = "stop";
108
107
  };
109
108
  this.selection = new SelectionArea__default(__spreadProps(__spreadValues({}, this.config), { selectionAreaClass, selectables })).on("start", ({ store, event, selection }) => {
110
- if (!(event == null ? void 0 : event.ctrlKey) && !(event == null ? void 0 : event.metaKey)) {
109
+ if (!(event == null ? void 0 : event.ctrlKey) && !(event == null ? void 0 : event.metaKey) && !(event == null ? void 0 : event.shiftKey)) {
111
110
  store.stored.forEach((el) => {
112
111
  if (el.className.includes(nodeWrapperClassName)) {
113
112
  el.classList.remove(nodeClassName);
114
113
  }
115
114
  });
116
115
  selection.clearSelection();
117
- this.selectedNodeIds$.next([]);
116
+ this.selectedNodeIds = [];
118
117
  }
119
118
  this.startInteraction(this.pluginId, "select", core.InteractionPriority.MarqueeSelection);
120
- }).on("move", ({ store: { changed: { added, removed } }, selection }) => {
119
+ this.selectStatus = "start";
120
+ }).on("move", ({ store: { changed: { added, removed } }, selection, event }) => {
121
+ if (event) {
122
+ this.selectStatus = "moving";
123
+ }
121
124
  if (!this.canInteract(this.pluginId, "select", core.InteractionPriority.MarqueeSelection)) {
122
125
  selection.cancel();
123
126
  endSelect();
@@ -142,37 +145,39 @@ class Selection extends (_a = core.BasePlugin, _registerPluginData_dec = [decora
142
145
  }
143
146
  });
144
147
  this.updateSelection(addedNodeIds, removedNodeIds);
145
- }).on("stop", endSelect);
148
+ }).on("stop", ({ event }) => {
149
+ if (event) {
150
+ endSelect();
151
+ }
152
+ });
146
153
  }
147
154
  // 更新选中的节点和组
148
155
  updateSelection(addedNodeIds = [], removedNodeIds = []) {
149
- const currentNodeIds = this.selectedNodeIds$.getValue();
156
+ const currentNodeIds = this.selectedNodeIds;
150
157
  const newNodeIds = [
151
158
  ...currentNodeIds.filter((id) => !removedNodeIds.includes(id)),
152
159
  ...addedNodeIds.filter((id) => !currentNodeIds.includes(id))
153
160
  ];
154
- this.selectedNodeIds$.next(newNodeIds);
161
+ this.selectedNodeIds = newNodeIds;
155
162
  }
156
- // 获取选中的节点ID
157
163
  getSelectedNodeIds() {
158
- return this.selectedNodeIds$.getValue();
164
+ return this.selectedNodeIds;
165
+ }
166
+ clearSelection() {
167
+ this.selectedNodeIds = [];
159
168
  }
160
169
  // 选择节点
161
170
  selectNodes(nodeIds, clearPrevious = true) {
162
171
  if (clearPrevious) {
163
- this.selectedNodeIds$.next(nodeIds);
172
+ this.selectedNodeIds = nodeIds;
164
173
  } else {
165
- const currentNodeIds = this.selectedNodeIds$.getValue();
166
- this.selectedNodeIds$.next([
174
+ const currentNodeIds = this.selectedNodeIds;
175
+ this.selectedNodeIds = [
167
176
  ...currentNodeIds,
168
177
  ...nodeIds.filter((id) => !currentNodeIds.includes(id))
169
- ]);
178
+ ];
170
179
  }
171
180
  }
172
- // 清除选择
173
- clearSelection() {
174
- this.selectedNodeIds$.next([]);
175
- }
176
181
  destroy() {
177
182
  var _a2;
178
183
  (_a2 = this.selection) == null ? void 0 : _a2.destroy();
@@ -180,8 +185,11 @@ class Selection extends (_a = core.BasePlugin, _registerPluginData_dec = [decora
180
185
  }
181
186
  _init = __decoratorStart(_a);
182
187
  __decorateElement(_init, 1, "init", _init_dec, Selection);
188
+ __decorateElement(_init, 1, "getSelectedNodeIds", _getSelectedNodeIds_dec, Selection);
189
+ __decorateElement(_init, 1, "clearSelection", _clearSelection_dec, Selection);
183
190
  __decorateElement(_init, 1, "destroy", _destroy_dec, Selection);
184
- __decorateElement(_init, 5, "registerPluginData", _registerPluginData_dec, Selection);
191
+ __decorateElement(_init, 5, "selectedNodeIds", _selectedNodeIds_dec, Selection);
192
+ __decorateElement(_init, 5, "selectStatus", _selectStatus_dec, Selection);
185
193
  __decorateElement(_init, 5, "startInteraction", _startInteraction_dec, Selection);
186
194
  __decorateElement(_init, 5, "endInteraction", _endInteraction_dec, Selection);
187
195
  __decorateElement(_init, 5, "canInteract", _canInteract_dec, Selection);
package/dist/index.d.cts CHANGED
@@ -5,6 +5,13 @@ declare module '@knotx/core' {
5
5
  interface PluginData {
6
6
  selection: {
7
7
  selectedNodeIds: string[];
8
+ selectStatus: 'start' | 'moving' | 'stop';
9
+ };
10
+ }
11
+ interface PluginTools {
12
+ selection: {
13
+ getSelectedNodeIds: () => string[];
14
+ clearSelection: () => void;
8
15
  };
9
16
  }
10
17
  }
@@ -14,8 +21,8 @@ declare class Selection extends BasePlugin<'selection', SelectionConfig> {
14
21
  name: "selection";
15
22
  private config;
16
23
  private selection;
17
- private selectedNodeIds$;
18
- private registerPluginData;
24
+ selectedNodeIds: string[];
25
+ selectStatus: 'start' | 'moving' | 'stop';
19
26
  private startInteraction;
20
27
  private endInteraction;
21
28
  private canInteract;
@@ -23,8 +30,8 @@ declare class Selection extends BasePlugin<'selection', SelectionConfig> {
23
30
  private createSelection;
24
31
  private updateSelection;
25
32
  getSelectedNodeIds(): string[];
26
- selectNodes(nodeIds: string[], clearPrevious?: boolean): void;
27
33
  clearSelection(): void;
34
+ selectNodes(nodeIds: string[], clearPrevious?: boolean): void;
28
35
  destroy(): void;
29
36
  }
30
37
 
package/dist/index.d.mts CHANGED
@@ -5,6 +5,13 @@ declare module '@knotx/core' {
5
5
  interface PluginData {
6
6
  selection: {
7
7
  selectedNodeIds: string[];
8
+ selectStatus: 'start' | 'moving' | 'stop';
9
+ };
10
+ }
11
+ interface PluginTools {
12
+ selection: {
13
+ getSelectedNodeIds: () => string[];
14
+ clearSelection: () => void;
8
15
  };
9
16
  }
10
17
  }
@@ -14,8 +21,8 @@ declare class Selection extends BasePlugin<'selection', SelectionConfig> {
14
21
  name: "selection";
15
22
  private config;
16
23
  private selection;
17
- private selectedNodeIds$;
18
- private registerPluginData;
24
+ selectedNodeIds: string[];
25
+ selectStatus: 'start' | 'moving' | 'stop';
19
26
  private startInteraction;
20
27
  private endInteraction;
21
28
  private canInteract;
@@ -23,8 +30,8 @@ declare class Selection extends BasePlugin<'selection', SelectionConfig> {
23
30
  private createSelection;
24
31
  private updateSelection;
25
32
  getSelectedNodeIds(): string[];
26
- selectNodes(nodeIds: string[], clearPrevious?: boolean): void;
27
33
  clearSelection(): void;
34
+ selectNodes(nodeIds: string[], clearPrevious?: boolean): void;
28
35
  destroy(): void;
29
36
  }
30
37
 
package/dist/index.d.ts CHANGED
@@ -5,6 +5,13 @@ declare module '@knotx/core' {
5
5
  interface PluginData {
6
6
  selection: {
7
7
  selectedNodeIds: string[];
8
+ selectStatus: 'start' | 'moving' | 'stop';
9
+ };
10
+ }
11
+ interface PluginTools {
12
+ selection: {
13
+ getSelectedNodeIds: () => string[];
14
+ clearSelection: () => void;
8
15
  };
9
16
  }
10
17
  }
@@ -14,8 +21,8 @@ declare class Selection extends BasePlugin<'selection', SelectionConfig> {
14
21
  name: "selection";
15
22
  private config;
16
23
  private selection;
17
- private selectedNodeIds$;
18
- private registerPluginData;
24
+ selectedNodeIds: string[];
25
+ selectStatus: 'start' | 'moving' | 'stop';
19
26
  private startInteraction;
20
27
  private endInteraction;
21
28
  private canInteract;
@@ -23,8 +30,8 @@ declare class Selection extends BasePlugin<'selection', SelectionConfig> {
23
30
  private createSelection;
24
31
  private updateSelection;
25
32
  getSelectedNodeIds(): string[];
26
- selectNodes(nodeIds: string[], clearPrevious?: boolean): void;
27
33
  clearSelection(): void;
34
+ selectNodes(nodeIds: string[], clearPrevious?: boolean): void;
28
35
  destroy(): void;
29
36
  }
30
37
 
package/dist/index.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import { bem, addBemModifier, InteractionPriority, BasePlugin } from '@knotx/core';
2
- import { inject, OnInit, OnDestroy } from '@knotx/decorators';
2
+ import { register, inject, tool, OnInit, OnDestroy } from '@knotx/decorators';
3
3
  import SelectionArea from '@viselect/vanilla';
4
- import { BehaviorSubject } from 'rxjs';
5
4
 
6
5
  var __create = Object.create;
7
6
  var __defProp = Object.defineProperty;
@@ -71,25 +70,24 @@ var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use
71
70
  var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
72
71
  var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
73
72
  var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
74
- var _destroy_dec, _init_dec, _canInteract_dec, _endInteraction_dec, _startInteraction_dec, _registerPluginData_dec, _a, _init;
75
- 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) {
73
+ var _destroy_dec, _clearSelection_dec, _getSelectedNodeIds_dec, _init_dec, _canInteract_dec, _endInteraction_dec, _startInteraction_dec, _selectStatus_dec, _selectedNodeIds_dec, _a, _init;
74
+ class Selection extends (_a = BasePlugin, _selectedNodeIds_dec = [register("selectedNodeIds")], _selectStatus_dec = [register("selectStatus")], _startInteraction_dec = [inject.startInteraction()], _endInteraction_dec = [inject.endInteraction()], _canInteract_dec = [inject.canInteract()], _init_dec = [OnInit], _getSelectedNodeIds_dec = [tool("Get selected node ids", {})], _clearSelection_dec = [tool("Clear selection", {})], _destroy_dec = [OnDestroy], _a) {
76
75
  constructor() {
77
76
  super(...arguments);
78
77
  __runInitializers(_init, 5, this);
79
78
  __publicField(this, "name", "selection");
80
79
  __publicField(this, "config");
81
80
  __publicField(this, "selection");
82
- __publicField(this, "selectedNodeIds$", new BehaviorSubject([]));
83
- __publicField(this, "registerPluginData", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
84
- __publicField(this, "startInteraction", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
85
- __publicField(this, "endInteraction", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
86
- __publicField(this, "canInteract", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
81
+ __publicField(this, "selectedNodeIds", __runInitializers(_init, 8, this, [])), __runInitializers(_init, 11, this);
82
+ __publicField(this, "selectStatus", __runInitializers(_init, 12, this, "stop")), __runInitializers(_init, 15, this);
83
+ __publicField(this, "startInteraction", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
84
+ __publicField(this, "endInteraction", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
85
+ __publicField(this, "canInteract", __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
87
86
  }
88
87
  init(config) {
89
88
  this.config = __spreadValues({
90
89
  boundaries: [`.${bem("canvas", "wrapper")}`]
91
90
  }, config);
92
- this.registerPluginData("selection", "selectedNodeIds", this.selectedNodeIds$);
93
91
  this.createSelection();
94
92
  }
95
93
  createSelection() {
@@ -99,19 +97,24 @@ class Selection extends (_a = BasePlugin, _registerPluginData_dec = [inject.regi
99
97
  const selectables = [`.${nodeWrapperClassName}`];
100
98
  const endSelect = () => {
101
99
  this.endInteraction(this.pluginId, "select");
100
+ this.selectStatus = "stop";
102
101
  };
103
102
  this.selection = new SelectionArea(__spreadProps(__spreadValues({}, this.config), { selectionAreaClass, selectables })).on("start", ({ store, event, selection }) => {
104
- if (!(event == null ? void 0 : event.ctrlKey) && !(event == null ? void 0 : event.metaKey)) {
103
+ if (!(event == null ? void 0 : event.ctrlKey) && !(event == null ? void 0 : event.metaKey) && !(event == null ? void 0 : event.shiftKey)) {
105
104
  store.stored.forEach((el) => {
106
105
  if (el.className.includes(nodeWrapperClassName)) {
107
106
  el.classList.remove(nodeClassName);
108
107
  }
109
108
  });
110
109
  selection.clearSelection();
111
- this.selectedNodeIds$.next([]);
110
+ this.selectedNodeIds = [];
112
111
  }
113
112
  this.startInteraction(this.pluginId, "select", InteractionPriority.MarqueeSelection);
114
- }).on("move", ({ store: { changed: { added, removed } }, selection }) => {
113
+ this.selectStatus = "start";
114
+ }).on("move", ({ store: { changed: { added, removed } }, selection, event }) => {
115
+ if (event) {
116
+ this.selectStatus = "moving";
117
+ }
115
118
  if (!this.canInteract(this.pluginId, "select", InteractionPriority.MarqueeSelection)) {
116
119
  selection.cancel();
117
120
  endSelect();
@@ -136,37 +139,39 @@ class Selection extends (_a = BasePlugin, _registerPluginData_dec = [inject.regi
136
139
  }
137
140
  });
138
141
  this.updateSelection(addedNodeIds, removedNodeIds);
139
- }).on("stop", endSelect);
142
+ }).on("stop", ({ event }) => {
143
+ if (event) {
144
+ endSelect();
145
+ }
146
+ });
140
147
  }
141
148
  // 更新选中的节点和组
142
149
  updateSelection(addedNodeIds = [], removedNodeIds = []) {
143
- const currentNodeIds = this.selectedNodeIds$.getValue();
150
+ const currentNodeIds = this.selectedNodeIds;
144
151
  const newNodeIds = [
145
152
  ...currentNodeIds.filter((id) => !removedNodeIds.includes(id)),
146
153
  ...addedNodeIds.filter((id) => !currentNodeIds.includes(id))
147
154
  ];
148
- this.selectedNodeIds$.next(newNodeIds);
155
+ this.selectedNodeIds = newNodeIds;
149
156
  }
150
- // 获取选中的节点ID
151
157
  getSelectedNodeIds() {
152
- return this.selectedNodeIds$.getValue();
158
+ return this.selectedNodeIds;
159
+ }
160
+ clearSelection() {
161
+ this.selectedNodeIds = [];
153
162
  }
154
163
  // 选择节点
155
164
  selectNodes(nodeIds, clearPrevious = true) {
156
165
  if (clearPrevious) {
157
- this.selectedNodeIds$.next(nodeIds);
166
+ this.selectedNodeIds = nodeIds;
158
167
  } else {
159
- const currentNodeIds = this.selectedNodeIds$.getValue();
160
- this.selectedNodeIds$.next([
168
+ const currentNodeIds = this.selectedNodeIds;
169
+ this.selectedNodeIds = [
161
170
  ...currentNodeIds,
162
171
  ...nodeIds.filter((id) => !currentNodeIds.includes(id))
163
- ]);
172
+ ];
164
173
  }
165
174
  }
166
- // 清除选择
167
- clearSelection() {
168
- this.selectedNodeIds$.next([]);
169
- }
170
175
  destroy() {
171
176
  var _a2;
172
177
  (_a2 = this.selection) == null ? void 0 : _a2.destroy();
@@ -174,8 +179,11 @@ class Selection extends (_a = BasePlugin, _registerPluginData_dec = [inject.regi
174
179
  }
175
180
  _init = __decoratorStart(_a);
176
181
  __decorateElement(_init, 1, "init", _init_dec, Selection);
182
+ __decorateElement(_init, 1, "getSelectedNodeIds", _getSelectedNodeIds_dec, Selection);
183
+ __decorateElement(_init, 1, "clearSelection", _clearSelection_dec, Selection);
177
184
  __decorateElement(_init, 1, "destroy", _destroy_dec, Selection);
178
- __decorateElement(_init, 5, "registerPluginData", _registerPluginData_dec, Selection);
185
+ __decorateElement(_init, 5, "selectedNodeIds", _selectedNodeIds_dec, Selection);
186
+ __decorateElement(_init, 5, "selectStatus", _selectStatus_dec, Selection);
179
187
  __decorateElement(_init, 5, "startInteraction", _startInteraction_dec, Selection);
180
188
  __decorateElement(_init, 5, "endInteraction", _endInteraction_dec, Selection);
181
189
  __decorateElement(_init, 5, "canInteract", _canInteract_dec, Selection);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@knotx/plugins-selection",
3
- "version": "0.2.11",
3
+ "version": "0.2.13",
4
4
  "description": "Selection Plugin for Knotx",
5
5
  "author": "boenfu",
6
6
  "license": "MIT",
@@ -30,13 +30,13 @@
30
30
  "dependencies": {
31
31
  "@viselect/vanilla": "^3.9.0",
32
32
  "rxjs": "^7.8.1",
33
- "@knotx/core": "0.2.10",
34
- "@knotx/decorators": "0.2.11"
33
+ "@knotx/core": "0.2.12",
34
+ "@knotx/decorators": "0.2.13"
35
35
  },
36
36
  "devDependencies": {
37
- "@knotx/build-config": "0.2.10",
38
- "@knotx/eslint-config": "0.2.10",
39
- "@knotx/typescript-config": "0.2.10"
37
+ "@knotx/build-config": "0.2.11",
38
+ "@knotx/eslint-config": "0.2.11",
39
+ "@knotx/typescript-config": "0.2.11"
40
40
  },
41
41
  "scripts": {
42
42
  "build": "unbuild",