@knotx/plugins-selection 0.3.3 → 0.3.4
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.
- package/dist/index.cjs +47 -29
- package/dist/index.d.cts +34 -0
- package/dist/index.d.mts +34 -0
- package/dist/index.d.ts +34 -0
- package/dist/index.js +48 -30
- package/package.json +6 -6
package/dist/index.cjs
CHANGED
|
@@ -73,8 +73,8 @@ var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use
|
|
|
73
73
|
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
74
74
|
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
|
|
75
75
|
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
|
|
76
|
-
var _destroy_dec, _clearSelection_dec, _select_dec, _getSelected_dec, _init_dec, _interaction_dec, _registerRules_dec, _selected_dec, _a, _init;
|
|
77
|
-
class Selection extends (_a = core.BasePlugin, _selected_dec = [decorators.register("selected")], _registerRules_dec = [decorators.register("registerRules")], _interaction_dec = [decorators.inject.interaction()], _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.", {
|
|
76
|
+
var _destroy_dec, _clearSelection_dec, _select_dec, _getSelected_dec, _init_dec, _interaction_dec, _setElementOverlap_dec, _setClearSelectionBeforeStart_dec, _clearSelectionBeforeStart_dec, _setRuleEnabled_dec, _registerRules_dec, _selected_dec, _a, _init;
|
|
77
|
+
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()], _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.", {
|
|
78
78
|
type: "array",
|
|
79
79
|
items: {
|
|
80
80
|
type: "object",
|
|
@@ -109,17 +109,33 @@ class Selection extends (_a = core.BasePlugin, _selected_dec = [decorators.regis
|
|
|
109
109
|
__publicField(this, "selected", __runInitializers(_init, 8, this, [])), __runInitializers(_init, 11, this);
|
|
110
110
|
__publicField(this, "registerRules", __runInitializers(_init, 12, this, (rules) => {
|
|
111
111
|
rules.forEach((rule) => {
|
|
112
|
-
this.ruleMap.set(rule.
|
|
112
|
+
this.ruleMap.set(rule.type, rule);
|
|
113
113
|
});
|
|
114
114
|
return () => {
|
|
115
115
|
rules.forEach((rule) => {
|
|
116
|
-
if (this.ruleMap.get(rule.
|
|
117
|
-
this.ruleMap.delete(rule.
|
|
116
|
+
if (this.ruleMap.get(rule.type) === rule) {
|
|
117
|
+
this.ruleMap.delete(rule.type);
|
|
118
118
|
}
|
|
119
119
|
});
|
|
120
120
|
};
|
|
121
121
|
})), __runInitializers(_init, 15, this);
|
|
122
|
-
__publicField(this, "
|
|
122
|
+
__publicField(this, "setRuleEnabled", __runInitializers(_init, 16, this, (type, enabled) => {
|
|
123
|
+
const rule = this.ruleMap.get(type);
|
|
124
|
+
if (rule) {
|
|
125
|
+
rule.enabled = enabled;
|
|
126
|
+
}
|
|
127
|
+
})), __runInitializers(_init, 19, this);
|
|
128
|
+
__publicField(this, "clearSelectionBeforeStart", __runInitializers(_init, 20, this, true)), __runInitializers(_init, 23, this);
|
|
129
|
+
__publicField(this, "setClearSelectionBeforeStart", __runInitializers(_init, 24, this, (clearSelectionBeforeStart) => {
|
|
130
|
+
this.clearSelectionBeforeStart = clearSelectionBeforeStart;
|
|
131
|
+
})), __runInitializers(_init, 27, this);
|
|
132
|
+
__publicField(this, "setElementOverlap", __runInitializers(_init, 28, this, (overlap) => {
|
|
133
|
+
try {
|
|
134
|
+
this.selection._options.behaviour.overlap = overlap;
|
|
135
|
+
} catch (e) {
|
|
136
|
+
}
|
|
137
|
+
})), __runInitializers(_init, 31, this);
|
|
138
|
+
__publicField(this, "interaction", __runInitializers(_init, 32, this)), __runInitializers(_init, 35, this);
|
|
123
139
|
__publicField(this, "onBeforeStart", (_) => {
|
|
124
140
|
});
|
|
125
141
|
__publicField(this, "onBeforeDrag", () => {
|
|
@@ -130,14 +146,16 @@ class Selection extends (_a = core.BasePlugin, _selected_dec = [decorators.regis
|
|
|
130
146
|
var _a2;
|
|
131
147
|
this.interaction.start(this.pluginId, "select", core.InteractionPriority.MarqueeSelection);
|
|
132
148
|
if (!(event == null ? void 0 : event.ctrlKey) && !(event == null ? void 0 : event.metaKey) && !(event == null ? void 0 : event.shiftKey)) {
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
149
|
+
if (this.clearSelectionBeforeStart) {
|
|
150
|
+
store.stored.forEach((element) => {
|
|
151
|
+
const rule = this.getElementRule(element);
|
|
152
|
+
if (rule == null ? void 0 : rule.activeClassName) {
|
|
153
|
+
element.classList.remove(rule.activeClassName);
|
|
154
|
+
}
|
|
137
155
|
element.removeAttribute("data-selected");
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
|
|
156
|
+
});
|
|
157
|
+
(_a2 = this.selection) == null ? void 0 : _a2.clearSelection(true, true);
|
|
158
|
+
}
|
|
141
159
|
}
|
|
142
160
|
});
|
|
143
161
|
__publicField(this, "onMove", ({ store: { stored, changed: { added, removed } }, selection }) => {
|
|
@@ -171,8 +189,8 @@ class Selection extends (_a = core.BasePlugin, _selected_dec = [decorators.regis
|
|
|
171
189
|
}
|
|
172
190
|
if (rule.activeClassName) {
|
|
173
191
|
element.classList.remove(rule.activeClassName);
|
|
174
|
-
element.removeAttribute("data-selected");
|
|
175
192
|
}
|
|
193
|
+
element.removeAttribute("data-selected");
|
|
176
194
|
});
|
|
177
195
|
added.forEach((element) => {
|
|
178
196
|
const rule = this.getElementRule(element);
|
|
@@ -182,7 +200,7 @@ class Selection extends (_a = core.BasePlugin, _selected_dec = [decorators.regis
|
|
|
182
200
|
const type = rule.type;
|
|
183
201
|
const id = rule.idGetter(element);
|
|
184
202
|
for (const [, rule2] of this.ruleMap) {
|
|
185
|
-
if (rule2.onSelected) {
|
|
203
|
+
if (rule2.enabled !== false && rule2.onSelected) {
|
|
186
204
|
if (!rule2.onSelected(__spreadValues({ element, type, id }, context))) {
|
|
187
205
|
selection.deselect(element, true);
|
|
188
206
|
return;
|
|
@@ -191,8 +209,8 @@ class Selection extends (_a = core.BasePlugin, _selected_dec = [decorators.regis
|
|
|
191
209
|
}
|
|
192
210
|
if (rule.activeClassName) {
|
|
193
211
|
element.classList.add(rule.activeClassName);
|
|
194
|
-
element.setAttribute("data-selected", "true");
|
|
195
212
|
}
|
|
213
|
+
element.setAttribute("data-selected", "true");
|
|
196
214
|
});
|
|
197
215
|
});
|
|
198
216
|
__publicField(this, "onStop", ({ event }) => {
|
|
@@ -208,7 +226,7 @@ class Selection extends (_a = core.BasePlugin, _selected_dec = [decorators.regis
|
|
|
208
226
|
__publicField(this, "updateSelected", () => {
|
|
209
227
|
var _a2;
|
|
210
228
|
const selected = [];
|
|
211
|
-
for (const element of ((_a2 = this.selection) == null ? void 0 : _a2.getSelection()) || []) {
|
|
229
|
+
for (const element of new Set(((_a2 = this.selection) == null ? void 0 : _a2.getSelection()) || [])) {
|
|
212
230
|
const rule = this.getElementRule(element);
|
|
213
231
|
if (rule) {
|
|
214
232
|
selected.push({ type: rule.type, id: rule.idGetter(element) });
|
|
@@ -227,10 +245,10 @@ class Selection extends (_a = core.BasePlugin, _selected_dec = [decorators.regis
|
|
|
227
245
|
activeClassName: core.bem("node", "wrapper", "selected"),
|
|
228
246
|
idGetter: (element) => element.getAttribute("data-node-id") || ""
|
|
229
247
|
};
|
|
230
|
-
this.ruleMap.set(nodeRule.
|
|
248
|
+
this.ruleMap.set(nodeRule.type, nodeRule);
|
|
231
249
|
}
|
|
232
250
|
for (const rule of config.rules || []) {
|
|
233
|
-
this.ruleMap.set(rule.
|
|
251
|
+
this.ruleMap.set(rule.type, rule);
|
|
234
252
|
}
|
|
235
253
|
if (config.enableDrag !== void 0) {
|
|
236
254
|
this.enableDrag = config.enableDrag;
|
|
@@ -243,12 +261,12 @@ class Selection extends (_a = core.BasePlugin, _selected_dec = [decorators.regis
|
|
|
243
261
|
// container,
|
|
244
262
|
boundaries: [container],
|
|
245
263
|
selectionAreaClass: this.selectionAreaClassName,
|
|
246
|
-
selectables: Array.from(this.ruleMap.
|
|
264
|
+
selectables: Array.from(new Set(Array.from(this.ruleMap.values()).map(({ className }) => `.${className}`)))
|
|
247
265
|
}).on("beforedrag", this.onBeforeDrag).on("beforestart", this.onBeforeStart).on("start", this.onStart).on("move", this.onMove).on("stop", this.onStop);
|
|
248
266
|
}
|
|
249
267
|
getElementRule(element) {
|
|
250
|
-
for (const [
|
|
251
|
-
if (element.classList.contains(className)) {
|
|
268
|
+
for (const [, rule] of this.ruleMap) {
|
|
269
|
+
if (rule.enabled !== false && element.classList.contains(rule.className)) {
|
|
252
270
|
return rule;
|
|
253
271
|
}
|
|
254
272
|
}
|
|
@@ -259,15 +277,11 @@ class Selection extends (_a = core.BasePlugin, _selected_dec = [decorators.regis
|
|
|
259
277
|
}
|
|
260
278
|
select(items) {
|
|
261
279
|
var _a2;
|
|
262
|
-
const typeToClassName = /* @__PURE__ */ new Map();
|
|
263
|
-
this.ruleMap.forEach((rule, className) => {
|
|
264
|
-
typeToClassName.set(rule.type, className);
|
|
265
|
-
});
|
|
266
280
|
const selectors = [];
|
|
267
281
|
for (const item of items) {
|
|
268
|
-
const
|
|
269
|
-
if (
|
|
270
|
-
selectors.push(`.${className}[data-${item.type}-id="${item.id}"]`);
|
|
282
|
+
const rule = this.ruleMap.get(item.type);
|
|
283
|
+
if (rule) {
|
|
284
|
+
selectors.push(`.${rule.className}[data-${rule.dataSelectorType || item.type}-id="${item.id}"]`);
|
|
271
285
|
}
|
|
272
286
|
}
|
|
273
287
|
(_a2 = this.selection) == null ? void 0 : _a2.select(selectors);
|
|
@@ -290,6 +304,10 @@ __decorateElement(_init, 1, "clearSelection", _clearSelection_dec, Selection);
|
|
|
290
304
|
__decorateElement(_init, 1, "destroy", _destroy_dec, Selection);
|
|
291
305
|
__decorateElement(_init, 5, "selected", _selected_dec, Selection);
|
|
292
306
|
__decorateElement(_init, 5, "registerRules", _registerRules_dec, Selection);
|
|
307
|
+
__decorateElement(_init, 5, "setRuleEnabled", _setRuleEnabled_dec, Selection);
|
|
308
|
+
__decorateElement(_init, 5, "clearSelectionBeforeStart", _clearSelectionBeforeStart_dec, Selection);
|
|
309
|
+
__decorateElement(_init, 5, "setClearSelectionBeforeStart", _setClearSelectionBeforeStart_dec, Selection);
|
|
310
|
+
__decorateElement(_init, 5, "setElementOverlap", _setElementOverlap_dec, Selection);
|
|
293
311
|
__decorateElement(_init, 5, "interaction", _interaction_dec, Selection);
|
|
294
312
|
__decoratorMetadata(_init, Selection);
|
|
295
313
|
|
package/dist/index.d.cts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { OverlapMode } from '@viselect/vanilla';
|
|
1
2
|
import { BasePlugin } from '@knotx/core';
|
|
2
3
|
|
|
3
4
|
interface SelectionSelectedItem {
|
|
@@ -9,6 +10,25 @@ declare module '@knotx/core' {
|
|
|
9
10
|
selection: {
|
|
10
11
|
selected: SelectionSelectedItem[];
|
|
11
12
|
registerRules: (rules: SelectionRule[]) => () => void;
|
|
13
|
+
/**
|
|
14
|
+
* 启用/禁用规则
|
|
15
|
+
* @param type
|
|
16
|
+
* @param enabled
|
|
17
|
+
* @returns
|
|
18
|
+
*/
|
|
19
|
+
setRuleEnabled: (type: string, enabled: boolean) => void;
|
|
20
|
+
/**
|
|
21
|
+
* 是否在开始选择前清除选择
|
|
22
|
+
* @param isClearSelectionBeforeStart
|
|
23
|
+
* @returns
|
|
24
|
+
*/
|
|
25
|
+
setClearSelectionBeforeStart: (isClearSelectionBeforeStart: boolean) => void;
|
|
26
|
+
/**
|
|
27
|
+
* 设置元素在选中状态下被二次选中时的行为
|
|
28
|
+
* @param overlap
|
|
29
|
+
* @returns
|
|
30
|
+
*/
|
|
31
|
+
setElementOverlap: (overlap: OverlapMode) => void;
|
|
12
32
|
};
|
|
13
33
|
}
|
|
14
34
|
interface PluginTools {
|
|
@@ -42,6 +62,16 @@ interface SelectionRule {
|
|
|
42
62
|
select: (elements: Element[]) => void;
|
|
43
63
|
deselect: (elements: Element[]) => void;
|
|
44
64
|
}) => boolean;
|
|
65
|
+
/**
|
|
66
|
+
* 数据选择器类型,用于匹配 dom 元素的 data-${type}-id 属性
|
|
67
|
+
* default: `type
|
|
68
|
+
*/
|
|
69
|
+
dataSelectorType?: string;
|
|
70
|
+
/**
|
|
71
|
+
* 是否启用规则
|
|
72
|
+
* default: true
|
|
73
|
+
*/
|
|
74
|
+
enabled?: boolean;
|
|
45
75
|
}
|
|
46
76
|
interface SelectionConfig {
|
|
47
77
|
selectionAreaClassName?: string;
|
|
@@ -71,6 +101,10 @@ declare class Selection extends BasePlugin<'selection', SelectionConfig> {
|
|
|
71
101
|
private updateFrameId;
|
|
72
102
|
selected: SelectionSelectedItem[];
|
|
73
103
|
registerRules: (rules: SelectionRule[]) => () => void;
|
|
104
|
+
setRuleEnabled: (type: string, enabled: boolean) => void;
|
|
105
|
+
clearSelectionBeforeStart: boolean;
|
|
106
|
+
setClearSelectionBeforeStart: (clearSelectionBeforeStart: boolean) => void;
|
|
107
|
+
setElementOverlap: (overlap: OverlapMode) => void;
|
|
74
108
|
private interaction;
|
|
75
109
|
init(config?: SelectionConfig): void;
|
|
76
110
|
private createSelection;
|
package/dist/index.d.mts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { OverlapMode } from '@viselect/vanilla';
|
|
1
2
|
import { BasePlugin } from '@knotx/core';
|
|
2
3
|
|
|
3
4
|
interface SelectionSelectedItem {
|
|
@@ -9,6 +10,25 @@ declare module '@knotx/core' {
|
|
|
9
10
|
selection: {
|
|
10
11
|
selected: SelectionSelectedItem[];
|
|
11
12
|
registerRules: (rules: SelectionRule[]) => () => void;
|
|
13
|
+
/**
|
|
14
|
+
* 启用/禁用规则
|
|
15
|
+
* @param type
|
|
16
|
+
* @param enabled
|
|
17
|
+
* @returns
|
|
18
|
+
*/
|
|
19
|
+
setRuleEnabled: (type: string, enabled: boolean) => void;
|
|
20
|
+
/**
|
|
21
|
+
* 是否在开始选择前清除选择
|
|
22
|
+
* @param isClearSelectionBeforeStart
|
|
23
|
+
* @returns
|
|
24
|
+
*/
|
|
25
|
+
setClearSelectionBeforeStart: (isClearSelectionBeforeStart: boolean) => void;
|
|
26
|
+
/**
|
|
27
|
+
* 设置元素在选中状态下被二次选中时的行为
|
|
28
|
+
* @param overlap
|
|
29
|
+
* @returns
|
|
30
|
+
*/
|
|
31
|
+
setElementOverlap: (overlap: OverlapMode) => void;
|
|
12
32
|
};
|
|
13
33
|
}
|
|
14
34
|
interface PluginTools {
|
|
@@ -42,6 +62,16 @@ interface SelectionRule {
|
|
|
42
62
|
select: (elements: Element[]) => void;
|
|
43
63
|
deselect: (elements: Element[]) => void;
|
|
44
64
|
}) => boolean;
|
|
65
|
+
/**
|
|
66
|
+
* 数据选择器类型,用于匹配 dom 元素的 data-${type}-id 属性
|
|
67
|
+
* default: `type
|
|
68
|
+
*/
|
|
69
|
+
dataSelectorType?: string;
|
|
70
|
+
/**
|
|
71
|
+
* 是否启用规则
|
|
72
|
+
* default: true
|
|
73
|
+
*/
|
|
74
|
+
enabled?: boolean;
|
|
45
75
|
}
|
|
46
76
|
interface SelectionConfig {
|
|
47
77
|
selectionAreaClassName?: string;
|
|
@@ -71,6 +101,10 @@ declare class Selection extends BasePlugin<'selection', SelectionConfig> {
|
|
|
71
101
|
private updateFrameId;
|
|
72
102
|
selected: SelectionSelectedItem[];
|
|
73
103
|
registerRules: (rules: SelectionRule[]) => () => void;
|
|
104
|
+
setRuleEnabled: (type: string, enabled: boolean) => void;
|
|
105
|
+
clearSelectionBeforeStart: boolean;
|
|
106
|
+
setClearSelectionBeforeStart: (clearSelectionBeforeStart: boolean) => void;
|
|
107
|
+
setElementOverlap: (overlap: OverlapMode) => void;
|
|
74
108
|
private interaction;
|
|
75
109
|
init(config?: SelectionConfig): void;
|
|
76
110
|
private createSelection;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { OverlapMode } from '@viselect/vanilla';
|
|
1
2
|
import { BasePlugin } from '@knotx/core';
|
|
2
3
|
|
|
3
4
|
interface SelectionSelectedItem {
|
|
@@ -9,6 +10,25 @@ declare module '@knotx/core' {
|
|
|
9
10
|
selection: {
|
|
10
11
|
selected: SelectionSelectedItem[];
|
|
11
12
|
registerRules: (rules: SelectionRule[]) => () => void;
|
|
13
|
+
/**
|
|
14
|
+
* 启用/禁用规则
|
|
15
|
+
* @param type
|
|
16
|
+
* @param enabled
|
|
17
|
+
* @returns
|
|
18
|
+
*/
|
|
19
|
+
setRuleEnabled: (type: string, enabled: boolean) => void;
|
|
20
|
+
/**
|
|
21
|
+
* 是否在开始选择前清除选择
|
|
22
|
+
* @param isClearSelectionBeforeStart
|
|
23
|
+
* @returns
|
|
24
|
+
*/
|
|
25
|
+
setClearSelectionBeforeStart: (isClearSelectionBeforeStart: boolean) => void;
|
|
26
|
+
/**
|
|
27
|
+
* 设置元素在选中状态下被二次选中时的行为
|
|
28
|
+
* @param overlap
|
|
29
|
+
* @returns
|
|
30
|
+
*/
|
|
31
|
+
setElementOverlap: (overlap: OverlapMode) => void;
|
|
12
32
|
};
|
|
13
33
|
}
|
|
14
34
|
interface PluginTools {
|
|
@@ -42,6 +62,16 @@ interface SelectionRule {
|
|
|
42
62
|
select: (elements: Element[]) => void;
|
|
43
63
|
deselect: (elements: Element[]) => void;
|
|
44
64
|
}) => boolean;
|
|
65
|
+
/**
|
|
66
|
+
* 数据选择器类型,用于匹配 dom 元素的 data-${type}-id 属性
|
|
67
|
+
* default: `type
|
|
68
|
+
*/
|
|
69
|
+
dataSelectorType?: string;
|
|
70
|
+
/**
|
|
71
|
+
* 是否启用规则
|
|
72
|
+
* default: true
|
|
73
|
+
*/
|
|
74
|
+
enabled?: boolean;
|
|
45
75
|
}
|
|
46
76
|
interface SelectionConfig {
|
|
47
77
|
selectionAreaClassName?: string;
|
|
@@ -71,6 +101,10 @@ declare class Selection extends BasePlugin<'selection', SelectionConfig> {
|
|
|
71
101
|
private updateFrameId;
|
|
72
102
|
selected: SelectionSelectedItem[];
|
|
73
103
|
registerRules: (rules: SelectionRule[]) => () => void;
|
|
104
|
+
setRuleEnabled: (type: string, enabled: boolean) => void;
|
|
105
|
+
clearSelectionBeforeStart: boolean;
|
|
106
|
+
setClearSelectionBeforeStart: (clearSelectionBeforeStart: boolean) => void;
|
|
107
|
+
setElementOverlap: (overlap: OverlapMode) => void;
|
|
74
108
|
private interaction;
|
|
75
109
|
init(config?: SelectionConfig): void;
|
|
76
110
|
private createSelection;
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { bemSelector, bem, BasePlugin, InteractionPriority } from '@knotx/core';
|
|
2
|
-
import { register, inject, tool, OnInit, OnDestroy } from '@knotx/decorators';
|
|
2
|
+
import { register, observable, inject, tool, OnInit, OnDestroy } from '@knotx/decorators';
|
|
3
3
|
import SelectionArea from '@viselect/vanilla';
|
|
4
4
|
|
|
5
5
|
var __create = Object.create;
|
|
@@ -67,8 +67,8 @@ var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use
|
|
|
67
67
|
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
68
68
|
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
|
|
69
69
|
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
|
|
70
|
-
var _destroy_dec, _clearSelection_dec, _select_dec, _getSelected_dec, _init_dec, _interaction_dec, _registerRules_dec, _selected_dec, _a, _init;
|
|
71
|
-
class Selection extends (_a = BasePlugin, _selected_dec = [register("selected")], _registerRules_dec = [register("registerRules")], _interaction_dec = [inject.interaction()], _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.", {
|
|
70
|
+
var _destroy_dec, _clearSelection_dec, _select_dec, _getSelected_dec, _init_dec, _interaction_dec, _setElementOverlap_dec, _setClearSelectionBeforeStart_dec, _clearSelectionBeforeStart_dec, _setRuleEnabled_dec, _registerRules_dec, _selected_dec, _a, _init;
|
|
71
|
+
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()], _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.", {
|
|
72
72
|
type: "array",
|
|
73
73
|
items: {
|
|
74
74
|
type: "object",
|
|
@@ -103,17 +103,33 @@ class Selection extends (_a = BasePlugin, _selected_dec = [register("selected")]
|
|
|
103
103
|
__publicField(this, "selected", __runInitializers(_init, 8, this, [])), __runInitializers(_init, 11, this);
|
|
104
104
|
__publicField(this, "registerRules", __runInitializers(_init, 12, this, (rules) => {
|
|
105
105
|
rules.forEach((rule) => {
|
|
106
|
-
this.ruleMap.set(rule.
|
|
106
|
+
this.ruleMap.set(rule.type, rule);
|
|
107
107
|
});
|
|
108
108
|
return () => {
|
|
109
109
|
rules.forEach((rule) => {
|
|
110
|
-
if (this.ruleMap.get(rule.
|
|
111
|
-
this.ruleMap.delete(rule.
|
|
110
|
+
if (this.ruleMap.get(rule.type) === rule) {
|
|
111
|
+
this.ruleMap.delete(rule.type);
|
|
112
112
|
}
|
|
113
113
|
});
|
|
114
114
|
};
|
|
115
115
|
})), __runInitializers(_init, 15, this);
|
|
116
|
-
__publicField(this, "
|
|
116
|
+
__publicField(this, "setRuleEnabled", __runInitializers(_init, 16, this, (type, enabled) => {
|
|
117
|
+
const rule = this.ruleMap.get(type);
|
|
118
|
+
if (rule) {
|
|
119
|
+
rule.enabled = enabled;
|
|
120
|
+
}
|
|
121
|
+
})), __runInitializers(_init, 19, this);
|
|
122
|
+
__publicField(this, "clearSelectionBeforeStart", __runInitializers(_init, 20, this, true)), __runInitializers(_init, 23, this);
|
|
123
|
+
__publicField(this, "setClearSelectionBeforeStart", __runInitializers(_init, 24, this, (clearSelectionBeforeStart) => {
|
|
124
|
+
this.clearSelectionBeforeStart = clearSelectionBeforeStart;
|
|
125
|
+
})), __runInitializers(_init, 27, this);
|
|
126
|
+
__publicField(this, "setElementOverlap", __runInitializers(_init, 28, this, (overlap) => {
|
|
127
|
+
try {
|
|
128
|
+
this.selection._options.behaviour.overlap = overlap;
|
|
129
|
+
} catch (e) {
|
|
130
|
+
}
|
|
131
|
+
})), __runInitializers(_init, 31, this);
|
|
132
|
+
__publicField(this, "interaction", __runInitializers(_init, 32, this)), __runInitializers(_init, 35, this);
|
|
117
133
|
__publicField(this, "onBeforeStart", (_) => {
|
|
118
134
|
});
|
|
119
135
|
__publicField(this, "onBeforeDrag", () => {
|
|
@@ -124,14 +140,16 @@ class Selection extends (_a = BasePlugin, _selected_dec = [register("selected")]
|
|
|
124
140
|
var _a2;
|
|
125
141
|
this.interaction.start(this.pluginId, "select", InteractionPriority.MarqueeSelection);
|
|
126
142
|
if (!(event == null ? void 0 : event.ctrlKey) && !(event == null ? void 0 : event.metaKey) && !(event == null ? void 0 : event.shiftKey)) {
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
143
|
+
if (this.clearSelectionBeforeStart) {
|
|
144
|
+
store.stored.forEach((element) => {
|
|
145
|
+
const rule = this.getElementRule(element);
|
|
146
|
+
if (rule == null ? void 0 : rule.activeClassName) {
|
|
147
|
+
element.classList.remove(rule.activeClassName);
|
|
148
|
+
}
|
|
131
149
|
element.removeAttribute("data-selected");
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
|
|
150
|
+
});
|
|
151
|
+
(_a2 = this.selection) == null ? void 0 : _a2.clearSelection(true, true);
|
|
152
|
+
}
|
|
135
153
|
}
|
|
136
154
|
});
|
|
137
155
|
__publicField(this, "onMove", ({ store: { stored, changed: { added, removed } }, selection }) => {
|
|
@@ -165,8 +183,8 @@ class Selection extends (_a = BasePlugin, _selected_dec = [register("selected")]
|
|
|
165
183
|
}
|
|
166
184
|
if (rule.activeClassName) {
|
|
167
185
|
element.classList.remove(rule.activeClassName);
|
|
168
|
-
element.removeAttribute("data-selected");
|
|
169
186
|
}
|
|
187
|
+
element.removeAttribute("data-selected");
|
|
170
188
|
});
|
|
171
189
|
added.forEach((element) => {
|
|
172
190
|
const rule = this.getElementRule(element);
|
|
@@ -176,7 +194,7 @@ class Selection extends (_a = BasePlugin, _selected_dec = [register("selected")]
|
|
|
176
194
|
const type = rule.type;
|
|
177
195
|
const id = rule.idGetter(element);
|
|
178
196
|
for (const [, rule2] of this.ruleMap) {
|
|
179
|
-
if (rule2.onSelected) {
|
|
197
|
+
if (rule2.enabled !== false && rule2.onSelected) {
|
|
180
198
|
if (!rule2.onSelected(__spreadValues({ element, type, id }, context))) {
|
|
181
199
|
selection.deselect(element, true);
|
|
182
200
|
return;
|
|
@@ -185,8 +203,8 @@ class Selection extends (_a = BasePlugin, _selected_dec = [register("selected")]
|
|
|
185
203
|
}
|
|
186
204
|
if (rule.activeClassName) {
|
|
187
205
|
element.classList.add(rule.activeClassName);
|
|
188
|
-
element.setAttribute("data-selected", "true");
|
|
189
206
|
}
|
|
207
|
+
element.setAttribute("data-selected", "true");
|
|
190
208
|
});
|
|
191
209
|
});
|
|
192
210
|
__publicField(this, "onStop", ({ event }) => {
|
|
@@ -202,7 +220,7 @@ class Selection extends (_a = BasePlugin, _selected_dec = [register("selected")]
|
|
|
202
220
|
__publicField(this, "updateSelected", () => {
|
|
203
221
|
var _a2;
|
|
204
222
|
const selected = [];
|
|
205
|
-
for (const element of ((_a2 = this.selection) == null ? void 0 : _a2.getSelection()) || []) {
|
|
223
|
+
for (const element of new Set(((_a2 = this.selection) == null ? void 0 : _a2.getSelection()) || [])) {
|
|
206
224
|
const rule = this.getElementRule(element);
|
|
207
225
|
if (rule) {
|
|
208
226
|
selected.push({ type: rule.type, id: rule.idGetter(element) });
|
|
@@ -221,10 +239,10 @@ class Selection extends (_a = BasePlugin, _selected_dec = [register("selected")]
|
|
|
221
239
|
activeClassName: bem("node", "wrapper", "selected"),
|
|
222
240
|
idGetter: (element) => element.getAttribute("data-node-id") || ""
|
|
223
241
|
};
|
|
224
|
-
this.ruleMap.set(nodeRule.
|
|
242
|
+
this.ruleMap.set(nodeRule.type, nodeRule);
|
|
225
243
|
}
|
|
226
244
|
for (const rule of config.rules || []) {
|
|
227
|
-
this.ruleMap.set(rule.
|
|
245
|
+
this.ruleMap.set(rule.type, rule);
|
|
228
246
|
}
|
|
229
247
|
if (config.enableDrag !== void 0) {
|
|
230
248
|
this.enableDrag = config.enableDrag;
|
|
@@ -237,12 +255,12 @@ class Selection extends (_a = BasePlugin, _selected_dec = [register("selected")]
|
|
|
237
255
|
// container,
|
|
238
256
|
boundaries: [container],
|
|
239
257
|
selectionAreaClass: this.selectionAreaClassName,
|
|
240
|
-
selectables: Array.from(this.ruleMap.
|
|
258
|
+
selectables: Array.from(new Set(Array.from(this.ruleMap.values()).map(({ className }) => `.${className}`)))
|
|
241
259
|
}).on("beforedrag", this.onBeforeDrag).on("beforestart", this.onBeforeStart).on("start", this.onStart).on("move", this.onMove).on("stop", this.onStop);
|
|
242
260
|
}
|
|
243
261
|
getElementRule(element) {
|
|
244
|
-
for (const [
|
|
245
|
-
if (element.classList.contains(className)) {
|
|
262
|
+
for (const [, rule] of this.ruleMap) {
|
|
263
|
+
if (rule.enabled !== false && element.classList.contains(rule.className)) {
|
|
246
264
|
return rule;
|
|
247
265
|
}
|
|
248
266
|
}
|
|
@@ -253,15 +271,11 @@ class Selection extends (_a = BasePlugin, _selected_dec = [register("selected")]
|
|
|
253
271
|
}
|
|
254
272
|
select(items) {
|
|
255
273
|
var _a2;
|
|
256
|
-
const typeToClassName = /* @__PURE__ */ new Map();
|
|
257
|
-
this.ruleMap.forEach((rule, className) => {
|
|
258
|
-
typeToClassName.set(rule.type, className);
|
|
259
|
-
});
|
|
260
274
|
const selectors = [];
|
|
261
275
|
for (const item of items) {
|
|
262
|
-
const
|
|
263
|
-
if (
|
|
264
|
-
selectors.push(`.${className}[data-${item.type}-id="${item.id}"]`);
|
|
276
|
+
const rule = this.ruleMap.get(item.type);
|
|
277
|
+
if (rule) {
|
|
278
|
+
selectors.push(`.${rule.className}[data-${rule.dataSelectorType || item.type}-id="${item.id}"]`);
|
|
265
279
|
}
|
|
266
280
|
}
|
|
267
281
|
(_a2 = this.selection) == null ? void 0 : _a2.select(selectors);
|
|
@@ -284,6 +298,10 @@ __decorateElement(_init, 1, "clearSelection", _clearSelection_dec, Selection);
|
|
|
284
298
|
__decorateElement(_init, 1, "destroy", _destroy_dec, Selection);
|
|
285
299
|
__decorateElement(_init, 5, "selected", _selected_dec, Selection);
|
|
286
300
|
__decorateElement(_init, 5, "registerRules", _registerRules_dec, Selection);
|
|
301
|
+
__decorateElement(_init, 5, "setRuleEnabled", _setRuleEnabled_dec, Selection);
|
|
302
|
+
__decorateElement(_init, 5, "clearSelectionBeforeStart", _clearSelectionBeforeStart_dec, Selection);
|
|
303
|
+
__decorateElement(_init, 5, "setClearSelectionBeforeStart", _setClearSelectionBeforeStart_dec, Selection);
|
|
304
|
+
__decorateElement(_init, 5, "setElementOverlap", _setElementOverlap_dec, Selection);
|
|
287
305
|
__decorateElement(_init, 5, "interaction", _interaction_dec, Selection);
|
|
288
306
|
__decoratorMetadata(_init, Selection);
|
|
289
307
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@knotx/plugins-selection",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.4",
|
|
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.3.
|
|
34
|
-
"@knotx/decorators": "0.3.
|
|
33
|
+
"@knotx/core": "0.3.4",
|
|
34
|
+
"@knotx/decorators": "0.3.4"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"@knotx/build-config": "0.3.
|
|
38
|
-
"@knotx/eslint-config": "0.3.
|
|
39
|
-
"@knotx/typescript-config": "0.3.
|
|
37
|
+
"@knotx/build-config": "0.3.4",
|
|
38
|
+
"@knotx/eslint-config": "0.3.4",
|
|
39
|
+
"@knotx/typescript-config": "0.3.4"
|
|
40
40
|
},
|
|
41
41
|
"scripts": {
|
|
42
42
|
"build": "unbuild",
|