@limble/limble-tree 1.0.0-beta.2 → 1.0.0-beta.3
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/esm2020/lib/components/branch/branch.component.mjs +4 -4
- package/esm2020/lib/components/branch/index.mjs +2 -0
- package/esm2020/lib/components/dragover-no-change-detect.mjs +39 -0
- package/esm2020/lib/components/dropzone/dropzone.component.mjs +2 -2
- package/esm2020/lib/components/dropzone/index.mjs +2 -0
- package/esm2020/lib/components/host-component.interface.mjs +1 -1
- package/esm2020/lib/components/index.mjs +7 -0
- package/esm2020/lib/components/node-component.interface.mjs +1 -1
- package/esm2020/lib/components/root/index.mjs +2 -0
- package/esm2020/lib/components/root/root.component.mjs +3 -3
- package/esm2020/lib/core/branch-options.interface.mjs +1 -1
- package/esm2020/lib/core/branchable.interface.mjs +2 -0
- package/esm2020/lib/core/component-container.interface.mjs +2 -0
- package/esm2020/lib/core/configuration/configuration.mjs +1 -1
- package/esm2020/lib/core/configuration/index.mjs +3 -0
- package/esm2020/lib/core/configuration/tree-options.interface.mjs +1 -1
- package/esm2020/lib/core/index.mjs +11 -5
- package/esm2020/lib/core/tree-branch/branch-controller.mjs +4 -4
- package/esm2020/lib/core/tree-branch/graftable.interface.mjs +2 -0
- package/esm2020/lib/core/tree-branch/index.mjs +4 -0
- package/esm2020/lib/core/tree-branch/tree-branch.mjs +8 -8
- package/esm2020/lib/core/tree-node-base.mjs +3 -4
- package/esm2020/lib/core/tree-node.interface.mjs +2 -0
- package/esm2020/lib/core/tree-plot.interface.mjs +2 -0
- package/esm2020/lib/core/tree-root/index.mjs +3 -0
- package/esm2020/lib/core/tree-root/root-controller.mjs +4 -4
- package/esm2020/lib/core/tree-root/tree-root.mjs +5 -5
- package/esm2020/lib/core/tree-service/index.mjs +2 -0
- package/esm2020/lib/core/tree-service/tree.service.mjs +3 -3
- package/esm2020/lib/events/drag/drag-end-event.mjs +1 -1
- package/esm2020/lib/events/drag/drag-start-event.mjs +1 -1
- package/esm2020/lib/events/drag/drop-event.mjs +1 -1
- package/esm2020/lib/events/general/destruction-event.mjs +1 -1
- package/esm2020/lib/events/index.mjs +3 -2
- package/esm2020/lib/events/relational/graft-event.mjs +1 -1
- package/esm2020/lib/events/relational/index.mjs +2 -1
- package/esm2020/lib/events/relational/prune-event.mjs +1 -1
- package/esm2020/lib/events/relational/relational-tree-event.interface.mjs +1 -1
- package/esm2020/lib/events/relational/tree-relationship.interface.mjs +2 -0
- package/esm2020/lib/events/tree-event.interface.mjs +2 -0
- package/esm2020/lib/extras/collapse/collapse.mjs +1 -1
- package/esm2020/lib/extras/collapse/index.mjs +2 -1
- package/esm2020/lib/extras/drag-and-drop/drag-and-drop.mjs +4 -6
- package/esm2020/lib/extras/drag-and-drop/drag-and-drop.module.mjs +4 -5
- package/esm2020/lib/extras/drag-and-drop/drag-and-drop.service.mjs +1 -1
- package/esm2020/lib/extras/drag-and-drop/drag-state.mjs +2 -2
- package/esm2020/lib/extras/drag-and-drop/dropzone-renderer.mjs +6 -8
- package/esm2020/lib/extras/drag-and-drop/index.mjs +4 -2
- package/esm2020/lib/legacy/legacy-tree.mjs +3 -4
- package/esm2020/lib/legacy/limble-tree-legacy.module.mjs +2 -2
- package/esm2020/lib/legacy/limble-tree-root/limble-tree-root.component.mjs +2 -2
- package/esm2020/public-api.mjs +9 -9
- package/esm2020/shared/index.mjs +3 -0
- package/fesm2015/limble-limble-tree.mjs +241 -241
- package/fesm2015/limble-limble-tree.mjs.map +1 -1
- package/fesm2020/limble-limble-tree.mjs +239 -239
- package/fesm2020/limble-limble-tree.mjs.map +1 -1
- package/lib/components/branch/branch.component.d.ts +4 -4
- package/lib/components/branch/index.d.ts +1 -0
- package/lib/components/dropzone/index.d.ts +1 -0
- package/lib/components/host-component.interface.d.ts +1 -1
- package/lib/components/index.d.ts +6 -0
- package/lib/components/node-component.interface.d.ts +1 -1
- package/lib/components/root/index.d.ts +1 -0
- package/lib/components/root/root.component.d.ts +3 -3
- package/lib/core/branch-options.interface.d.ts +1 -1
- package/lib/core/branchable.interface.d.ts +8 -0
- package/lib/core/configuration/configuration.d.ts +1 -1
- package/lib/core/configuration/index.d.ts +2 -0
- package/lib/core/configuration/tree-options.interface.d.ts +2 -2
- package/lib/core/index.d.ts +10 -4
- package/lib/core/tree-branch/branch-controller.d.ts +4 -4
- package/lib/core/tree-branch/graftable.interface.d.ts +7 -0
- package/lib/core/tree-branch/index.d.ts +3 -0
- package/lib/core/tree-branch/tree-branch.d.ts +13 -11
- package/lib/core/tree-node-base.d.ts +9 -10
- package/lib/core/tree-node.interface.d.ts +16 -0
- package/lib/core/tree-root/index.d.ts +2 -0
- package/lib/core/tree-root/root-controller.d.ts +4 -4
- package/lib/core/tree-root/tree-root.d.ts +10 -9
- package/lib/core/tree-service/index.d.ts +1 -0
- package/lib/core/tree-service/tree.service.d.ts +2 -2
- package/lib/events/drag/drag-end-event.d.ts +9 -11
- package/lib/events/drag/drag-start-event.d.ts +5 -6
- package/lib/events/drag/drop-event.d.ts +6 -7
- package/lib/events/general/destruction-event.d.ts +5 -5
- package/lib/events/index.d.ts +2 -1
- package/lib/events/relational/graft-event.d.ts +7 -6
- package/lib/events/relational/index.d.ts +1 -0
- package/lib/events/relational/prune-event.d.ts +7 -6
- package/lib/events/relational/relational-tree-event.interface.d.ts +5 -4
- package/lib/events/relational/tree-relationship.interface.d.ts +6 -0
- package/lib/events/tree-event.interface.d.ts +5 -0
- package/lib/extras/collapse/collapse.d.ts +1 -1
- package/lib/extras/collapse/index.d.ts +1 -0
- package/lib/extras/drag-and-drop/drag-and-drop.d.ts +2 -4
- package/lib/extras/drag-and-drop/drag-and-drop.module.d.ts +1 -2
- package/lib/extras/drag-and-drop/drag-and-drop.service.d.ts +3 -3
- package/lib/extras/drag-and-drop/drag-state.d.ts +1 -1
- package/lib/extras/drag-and-drop/dropzone-renderer.d.ts +8 -9
- package/lib/extras/drag-and-drop/index.d.ts +3 -1
- package/package.json +1 -1
- package/public-api.d.ts +8 -8
- package/shared/index.d.ts +2 -0
- package/esm2020/lib/core/relationship.interface.mjs +0 -2
- package/esm2020/lib/extras/drag-and-drop/dragover-no-change-detect.mjs +0 -39
- package/esm2020/lib/structure/branchable.interface.mjs +0 -2
- package/esm2020/lib/structure/component-container.interface.mjs +0 -2
- package/esm2020/lib/structure/graftable.interface.mjs +0 -2
- package/esm2020/lib/structure/index.mjs +0 -9
- package/esm2020/lib/structure/tree-branch-node.interface.mjs +0 -2
- package/esm2020/lib/structure/tree-event.interface.mjs +0 -2
- package/esm2020/lib/structure/tree-node.interface.mjs +0 -2
- package/esm2020/lib/structure/tree-plot.mjs +0 -2
- package/esm2020/lib/structure/tree-relationship.interface.mjs +0 -2
- package/lib/core/relationship.interface.d.ts +0 -5
- package/lib/structure/branchable.interface.d.ts +0 -4
- package/lib/structure/graftable.interface.d.ts +0 -6
- package/lib/structure/index.d.ts +0 -8
- package/lib/structure/tree-branch-node.interface.d.ts +0 -5
- package/lib/structure/tree-event.interface.d.ts +0 -5
- package/lib/structure/tree-node.interface.d.ts +0 -15
- package/lib/structure/tree-relationship.interface.d.ts +0 -7
- /package/lib/{extras/drag-and-drop → components}/dragover-no-change-detect.d.ts +0 -0
- /package/lib/{structure → core}/component-container.interface.d.ts +0 -0
- /package/lib/{structure/tree-plot.d.ts → core/tree-plot.interface.d.ts} +0 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Injectable, NgModule, EventEmitter, Directive, Output, Component, Input, NgZone, ViewContainerRef, ViewChild, ViewChildren, createComponent, EnvironmentInjector, HostListener } from '@angular/core';
|
|
3
|
-
import { BehaviorSubject, fromEvent, merge, map,
|
|
3
|
+
import { BehaviorSubject, fromEvent, merge, map, filter, Subject, first } from 'rxjs';
|
|
4
4
|
import * as i1 from '@angular/common';
|
|
5
5
|
import { CommonModule } from '@angular/common';
|
|
6
6
|
|
|
@@ -100,6 +100,10 @@ function assert(condition) {
|
|
|
100
100
|
throw new Error("Assertion Failed!");
|
|
101
101
|
}
|
|
102
102
|
|
|
103
|
+
function hasProperty(input, prop) {
|
|
104
|
+
return typeof input === "object" && input !== null && prop in input;
|
|
105
|
+
}
|
|
106
|
+
|
|
103
107
|
var DragStates;
|
|
104
108
|
(function (DragStates) {
|
|
105
109
|
DragStates[DragStates["Idle"] = 0] = "Idle";
|
|
@@ -283,6 +287,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
283
287
|
type: Output
|
|
284
288
|
}] } });
|
|
285
289
|
|
|
290
|
+
class RootComponent {
|
|
291
|
+
constructor() {
|
|
292
|
+
this.branchesContainer = undefined;
|
|
293
|
+
this.dropzone = undefined;
|
|
294
|
+
this.afterViewInit = new EventEmitter();
|
|
295
|
+
this.dropped = new EventEmitter();
|
|
296
|
+
this.showInnerDropzone = false;
|
|
297
|
+
}
|
|
298
|
+
ngAfterViewInit() {
|
|
299
|
+
this.afterViewInit.emit();
|
|
300
|
+
assert(this.dropzone !== undefined);
|
|
301
|
+
this.dropzone.dropped.subscribe(this.dropped);
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
RootComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
305
|
+
RootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: RootComponent, isStandalone: true, selector: "root", outputs: { afterViewInit: "afterViewInit", dropped: "dropped" }, viewQueries: [{ propertyName: "branchesContainer", first: true, predicate: ["branchesContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "dropzone", first: true, predicate: DropzoneComponent, descendants: true }], ngImport: i0, template: "<div class=\"branches-container\">\n <dropzone placement=\"inner\" [hidden]=\"!showInnerDropzone\"></dropzone>\n <div #branchesContainer></div>\n</div>\n", styles: [".branches-container{min-width:64px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DropzoneComponent, selector: "dropzone", inputs: ["placement"], outputs: ["dropped"] }] });
|
|
306
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RootComponent, decorators: [{
|
|
307
|
+
type: Component,
|
|
308
|
+
args: [{ standalone: true, selector: "root", imports: [CommonModule, DropzoneComponent], template: "<div class=\"branches-container\">\n <dropzone placement=\"inner\" [hidden]=\"!showInnerDropzone\"></dropzone>\n <div #branchesContainer></div>\n</div>\n", styles: [".branches-container{min-width:64px}\n"] }]
|
|
309
|
+
}], propDecorators: { branchesContainer: [{
|
|
310
|
+
type: ViewChild,
|
|
311
|
+
args: ["branchesContainer", { read: ViewContainerRef }]
|
|
312
|
+
}], dropzone: [{
|
|
313
|
+
type: ViewChild,
|
|
314
|
+
args: [DropzoneComponent]
|
|
315
|
+
}], afterViewInit: [{
|
|
316
|
+
type: Output
|
|
317
|
+
}], dropped: [{
|
|
318
|
+
type: Output
|
|
319
|
+
}] } });
|
|
320
|
+
|
|
286
321
|
class Configuration {
|
|
287
322
|
constructor() {
|
|
288
323
|
this.configStorage = new Map();
|
|
@@ -300,6 +335,101 @@ class Configuration {
|
|
|
300
335
|
}
|
|
301
336
|
const config = new Configuration();
|
|
302
337
|
|
|
338
|
+
/**
|
|
339
|
+
* A wrapper around the BranchComponent that helps instantiate it and handles its events.
|
|
340
|
+
*/
|
|
341
|
+
class BranchController {
|
|
342
|
+
constructor(treeBranch, parentBranchesContainer) {
|
|
343
|
+
this.treeBranch = treeBranch;
|
|
344
|
+
this.outputBindingSubscriptions = [];
|
|
345
|
+
this.branchComponentRef = createComponent(BranchComponent, {
|
|
346
|
+
environmentInjector: parentBranchesContainer.injector.get(EnvironmentInjector)
|
|
347
|
+
});
|
|
348
|
+
this.branchComponentRef.instance.contentToHost =
|
|
349
|
+
this.treeBranch.branchOptions.component;
|
|
350
|
+
this.instanceSubscriptions = this.getInstanceSubscriptions(this.branchComponentRef.instance);
|
|
351
|
+
}
|
|
352
|
+
destroy() {
|
|
353
|
+
this.instanceSubscriptions.forEach((sub) => {
|
|
354
|
+
sub.unsubscribe();
|
|
355
|
+
});
|
|
356
|
+
this.outputBindingSubscriptions.forEach((sub) => {
|
|
357
|
+
sub.unsubscribe();
|
|
358
|
+
});
|
|
359
|
+
}
|
|
360
|
+
detectChanges() {
|
|
361
|
+
this.branchComponentRef.changeDetectorRef.detectChanges();
|
|
362
|
+
}
|
|
363
|
+
getBranchesContainer() {
|
|
364
|
+
return this.branchComponentRef.instance.branchesContainer;
|
|
365
|
+
}
|
|
366
|
+
getComponentInstance() {
|
|
367
|
+
return this.branchComponentRef.instance;
|
|
368
|
+
}
|
|
369
|
+
getHostView() {
|
|
370
|
+
return this.branchComponentRef.hostView;
|
|
371
|
+
}
|
|
372
|
+
getNativeElement() {
|
|
373
|
+
return this.branchComponentRef.location.nativeElement;
|
|
374
|
+
}
|
|
375
|
+
getUserlandComponentRef() {
|
|
376
|
+
return this.branchComponentRef.instance.getHostedContent();
|
|
377
|
+
}
|
|
378
|
+
getContentCreatedSub(instance) {
|
|
379
|
+
return instance.contentCreated.subscribe((userlandComponentInstance) => {
|
|
380
|
+
var _a, _b;
|
|
381
|
+
const component = userlandComponentInstance;
|
|
382
|
+
Object.entries((_a = this.treeBranch.branchOptions.inputBindings) !== null && _a !== void 0 ? _a : {}).forEach(([key, value]) => {
|
|
383
|
+
component[key] = value;
|
|
384
|
+
});
|
|
385
|
+
Object.entries((_b = this.treeBranch.branchOptions.outputBindings) !== null && _b !== void 0 ? _b : {}).forEach(([key, value]) => {
|
|
386
|
+
this.outputBindingSubscriptions.push(component[key].subscribe(value));
|
|
387
|
+
});
|
|
388
|
+
component.treeBranch = this.treeBranch;
|
|
389
|
+
const dropzones = instance.dropzones;
|
|
390
|
+
assert(dropzones !== undefined);
|
|
391
|
+
dropzoneRenderer.registerDropzones(dropzones, this.treeBranch);
|
|
392
|
+
});
|
|
393
|
+
}
|
|
394
|
+
getInstanceSubscriptions(instance) {
|
|
395
|
+
const droppedSub = instance.dropped.subscribe((placement) => {
|
|
396
|
+
dropzoneRenderer.handleDrop(this.treeBranch, placement);
|
|
397
|
+
});
|
|
398
|
+
return [
|
|
399
|
+
this.getContentCreatedSub(instance),
|
|
400
|
+
this.getShowLowerZonesSub(instance),
|
|
401
|
+
this.getShowUpperZonesSub(instance),
|
|
402
|
+
droppedSub
|
|
403
|
+
];
|
|
404
|
+
}
|
|
405
|
+
getShowLowerZonesSub(instance) {
|
|
406
|
+
return instance.showDropzones
|
|
407
|
+
.pipe(filter((direction) => direction === "lower"))
|
|
408
|
+
.subscribe(() => {
|
|
409
|
+
const currentDropzoneDisplayed = dropzoneRenderer.getCurrentDisplay();
|
|
410
|
+
if ((currentDropzoneDisplayed === null || currentDropzoneDisplayed === void 0 ? void 0 : currentDropzoneDisplayed.treeBranch) === this.treeBranch &&
|
|
411
|
+
currentDropzoneDisplayed.direction === "lower") {
|
|
412
|
+
return;
|
|
413
|
+
}
|
|
414
|
+
dropzoneRenderer.showLowerZones(this.treeBranch);
|
|
415
|
+
instance.triggerChangeDetection();
|
|
416
|
+
});
|
|
417
|
+
}
|
|
418
|
+
getShowUpperZonesSub(instance) {
|
|
419
|
+
return instance.showDropzones
|
|
420
|
+
.pipe(filter((direction) => direction === "upper"))
|
|
421
|
+
.subscribe(() => {
|
|
422
|
+
const currentDropzoneDisplayed = dropzoneRenderer.getCurrentDisplay();
|
|
423
|
+
if ((currentDropzoneDisplayed === null || currentDropzoneDisplayed === void 0 ? void 0 : currentDropzoneDisplayed.treeBranch) === this.treeBranch &&
|
|
424
|
+
currentDropzoneDisplayed.direction === "upper") {
|
|
425
|
+
return;
|
|
426
|
+
}
|
|
427
|
+
dropzoneRenderer.showUpperZones(this.treeBranch);
|
|
428
|
+
instance.triggerChangeDetection();
|
|
429
|
+
});
|
|
430
|
+
}
|
|
431
|
+
}
|
|
432
|
+
|
|
303
433
|
class TreeError extends Error {
|
|
304
434
|
}
|
|
305
435
|
|
|
@@ -361,87 +491,15 @@ class DropEvent {
|
|
|
361
491
|
}
|
|
362
492
|
}
|
|
363
493
|
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
dragStart(treeBranch, event) {
|
|
369
|
-
if (!this.draggingAllowed(treeBranch)) {
|
|
370
|
-
event.preventDefault();
|
|
371
|
-
return;
|
|
372
|
-
}
|
|
373
|
-
treeBranch.dispatch(new DragStartEvent(treeBranch));
|
|
374
|
-
this.setDragEffects(treeBranch, event);
|
|
375
|
-
this.watchForDragend(treeBranch, event);
|
|
376
|
-
// We have to do a setTimeout because DOM changes are not allowed during a
|
|
377
|
-
// dragstart event.
|
|
378
|
-
setTimeout(() => {
|
|
379
|
-
dragState.starting(treeBranch);
|
|
380
|
-
treeBranch.prune();
|
|
381
|
-
dragState.dragging();
|
|
382
|
-
});
|
|
383
|
-
}
|
|
384
|
-
drop(parent, index) {
|
|
385
|
-
const treeBranch = dragState.getDragData();
|
|
386
|
-
if (treeBranch === undefined) {
|
|
387
|
-
throw new TreeError("Cannot get dragged branch");
|
|
388
|
-
}
|
|
389
|
-
this.graftDraggedBranch(treeBranch, parent, index);
|
|
390
|
-
treeBranch.dispatch(new DropEvent(treeBranch, parent, index));
|
|
391
|
-
}
|
|
392
|
-
getDragImageOffsets(event, element) {
|
|
393
|
-
const bounds = element.getBoundingClientRect();
|
|
394
|
-
const xOffset = event.clientX - bounds.left;
|
|
395
|
-
const yOffset = event.clientY - bounds.top;
|
|
396
|
-
return [xOffset, yOffset];
|
|
397
|
-
}
|
|
398
|
-
setDragEffects(treeBranch, event) {
|
|
399
|
-
const dataTransfer = event.dataTransfer;
|
|
400
|
-
assert(dataTransfer instanceof DataTransfer);
|
|
401
|
-
const nativeElement = treeBranch.getNativeElement();
|
|
402
|
-
const [xOffset, yOffset] = this.getDragImageOffsets(event, nativeElement);
|
|
403
|
-
dataTransfer.setDragImage(nativeElement, xOffset, yOffset);
|
|
404
|
-
}
|
|
405
|
-
watchForDragend(treeBranch, event) {
|
|
406
|
-
var _a;
|
|
407
|
-
const oldParent = treeBranch.parent();
|
|
408
|
-
const oldIndex = treeBranch.index();
|
|
409
|
-
assert(oldParent !== undefined && oldIndex !== undefined);
|
|
410
|
-
(_a = event.target) === null || _a === void 0 ? void 0 : _a.addEventListener("dragend", (dragend) => {
|
|
411
|
-
if (dragState.state() !== DragStates.Dropped) {
|
|
412
|
-
//The drag ended but a drop never occurred, so put the dragged branch back where it started.
|
|
413
|
-
this.dragAborted$.next(dragend);
|
|
414
|
-
this.graftDraggedBranch(treeBranch, oldParent, oldIndex);
|
|
415
|
-
}
|
|
416
|
-
dragState.restart();
|
|
417
|
-
const newParent = treeBranch.parent();
|
|
418
|
-
assert(newParent !== undefined);
|
|
419
|
-
const newIndex = treeBranch.index();
|
|
420
|
-
assert(newIndex !== undefined);
|
|
421
|
-
treeBranch.dispatch(new DragEndEvent(treeBranch, {
|
|
422
|
-
oldParent,
|
|
423
|
-
oldIndex,
|
|
424
|
-
newParent,
|
|
425
|
-
newIndex
|
|
426
|
-
}));
|
|
427
|
-
}, { once: true });
|
|
428
|
-
}
|
|
429
|
-
draggingAllowed(treeBranch) {
|
|
430
|
-
var _a, _b, _c;
|
|
431
|
-
const allowDragging = (_c = (_b = (_a = config.getConfig(treeBranch.root())) === null || _a === void 0 ? void 0 : _a.dragAndDrop) === null || _b === void 0 ? void 0 : _b.allowDragging) !== null && _c !== void 0 ? _c : (() => true);
|
|
432
|
-
return allowDragging(treeBranch);
|
|
494
|
+
/** Emitted when a node is destroyed */
|
|
495
|
+
class DestructionEvent {
|
|
496
|
+
constructor(source) {
|
|
497
|
+
this._source = source;
|
|
433
498
|
}
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
treeBranch.getNativeElement().style.display = "block";
|
|
437
|
-
dragState.dropped();
|
|
499
|
+
source() {
|
|
500
|
+
return this._source;
|
|
438
501
|
}
|
|
439
502
|
}
|
|
440
|
-
const dragAndDrop = new DragAndDrop();
|
|
441
|
-
|
|
442
|
-
function hasProperty(input, prop) {
|
|
443
|
-
return typeof input === "object" && input !== null && prop in input;
|
|
444
|
-
}
|
|
445
503
|
|
|
446
504
|
/** Emits when a branch is grafted to another tree node */
|
|
447
505
|
class GraftEvent {
|
|
@@ -563,47 +621,6 @@ class TreeNodeBase {
|
|
|
563
621
|
}
|
|
564
622
|
}
|
|
565
623
|
|
|
566
|
-
/** Emitted when a node is destroyed */
|
|
567
|
-
class DestructionEvent {
|
|
568
|
-
constructor(source) {
|
|
569
|
-
this._source = source;
|
|
570
|
-
}
|
|
571
|
-
source() {
|
|
572
|
-
return this._source;
|
|
573
|
-
}
|
|
574
|
-
}
|
|
575
|
-
|
|
576
|
-
class RootComponent {
|
|
577
|
-
constructor() {
|
|
578
|
-
this.branchesContainer = undefined;
|
|
579
|
-
this.dropzone = undefined;
|
|
580
|
-
this.afterViewInit = new EventEmitter();
|
|
581
|
-
this.dropped = new EventEmitter();
|
|
582
|
-
this.showInnerDropzone = false;
|
|
583
|
-
}
|
|
584
|
-
ngAfterViewInit() {
|
|
585
|
-
this.afterViewInit.emit();
|
|
586
|
-
assert(this.dropzone !== undefined);
|
|
587
|
-
this.dropzone.dropped.subscribe(this.dropped);
|
|
588
|
-
}
|
|
589
|
-
}
|
|
590
|
-
RootComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
591
|
-
RootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: RootComponent, isStandalone: true, selector: "root", outputs: { afterViewInit: "afterViewInit", dropped: "dropped" }, viewQueries: [{ propertyName: "branchesContainer", first: true, predicate: ["branchesContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "dropzone", first: true, predicate: DropzoneComponent, descendants: true }], ngImport: i0, template: "<div class=\"branches-container\">\n <dropzone placement=\"inner\" [hidden]=\"!showInnerDropzone\"></dropzone>\n <div #branchesContainer></div>\n</div>\n", styles: [".branches-container{min-width:64px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DropzoneComponent, selector: "dropzone", inputs: ["placement"], outputs: ["dropped"] }] });
|
|
592
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RootComponent, decorators: [{
|
|
593
|
-
type: Component,
|
|
594
|
-
args: [{ standalone: true, selector: "root", imports: [CommonModule, DropzoneComponent], template: "<div class=\"branches-container\">\n <dropzone placement=\"inner\" [hidden]=\"!showInnerDropzone\"></dropzone>\n <div #branchesContainer></div>\n</div>\n", styles: [".branches-container{min-width:64px}\n"] }]
|
|
595
|
-
}], propDecorators: { branchesContainer: [{
|
|
596
|
-
type: ViewChild,
|
|
597
|
-
args: ["branchesContainer", { read: ViewContainerRef }]
|
|
598
|
-
}], dropzone: [{
|
|
599
|
-
type: ViewChild,
|
|
600
|
-
args: [DropzoneComponent]
|
|
601
|
-
}], afterViewInit: [{
|
|
602
|
-
type: Output
|
|
603
|
-
}], dropped: [{
|
|
604
|
-
type: Output
|
|
605
|
-
}] } });
|
|
606
|
-
|
|
607
624
|
/**
|
|
608
625
|
* A wrapper around the BranchComponent that helps instantiate it and handles its events.
|
|
609
626
|
*/
|
|
@@ -829,122 +846,6 @@ class TreeRoot {
|
|
|
829
846
|
}
|
|
830
847
|
}
|
|
831
848
|
|
|
832
|
-
/** Responsible for the creation of new trees. */
|
|
833
|
-
class TreeService {
|
|
834
|
-
/**
|
|
835
|
-
* Creates a new, empty tree structure inside the provided container.
|
|
836
|
-
*
|
|
837
|
-
* @returns A `TreeRoot` representing the base of the new tree.
|
|
838
|
-
*/
|
|
839
|
-
createEmptyTree(container, options = {}) {
|
|
840
|
-
container.clear();
|
|
841
|
-
const root = new TreeRoot(container);
|
|
842
|
-
config.setConfig(root, options);
|
|
843
|
-
return root;
|
|
844
|
-
}
|
|
845
|
-
}
|
|
846
|
-
TreeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
847
|
-
TreeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TreeService, providedIn: "root" });
|
|
848
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TreeService, decorators: [{
|
|
849
|
-
type: Injectable,
|
|
850
|
-
args: [{ providedIn: "root" }]
|
|
851
|
-
}] });
|
|
852
|
-
|
|
853
|
-
/**
|
|
854
|
-
* A wrapper around the BranchComponent that helps instantiate it and handles its events.
|
|
855
|
-
*/
|
|
856
|
-
class BranchController {
|
|
857
|
-
constructor(treeBranch, parentBranchesContainer) {
|
|
858
|
-
this.treeBranch = treeBranch;
|
|
859
|
-
this.outputBindingSubscriptions = [];
|
|
860
|
-
this.branchComponentRef = createComponent(BranchComponent, {
|
|
861
|
-
environmentInjector: parentBranchesContainer.injector.get(EnvironmentInjector)
|
|
862
|
-
});
|
|
863
|
-
this.branchComponentRef.instance.contentToHost =
|
|
864
|
-
this.treeBranch.branchOptions.component;
|
|
865
|
-
this.instanceSubscriptions = this.getInstanceSubscriptions(this.branchComponentRef.instance);
|
|
866
|
-
}
|
|
867
|
-
destroy() {
|
|
868
|
-
this.instanceSubscriptions.forEach((sub) => {
|
|
869
|
-
sub.unsubscribe();
|
|
870
|
-
});
|
|
871
|
-
this.outputBindingSubscriptions.forEach((sub) => {
|
|
872
|
-
sub.unsubscribe();
|
|
873
|
-
});
|
|
874
|
-
}
|
|
875
|
-
detectChanges() {
|
|
876
|
-
this.branchComponentRef.changeDetectorRef.detectChanges();
|
|
877
|
-
}
|
|
878
|
-
getBranchesContainer() {
|
|
879
|
-
return this.branchComponentRef.instance.branchesContainer;
|
|
880
|
-
}
|
|
881
|
-
getComponentInstance() {
|
|
882
|
-
return this.branchComponentRef.instance;
|
|
883
|
-
}
|
|
884
|
-
getHostView() {
|
|
885
|
-
return this.branchComponentRef.hostView;
|
|
886
|
-
}
|
|
887
|
-
getNativeElement() {
|
|
888
|
-
return this.branchComponentRef.location.nativeElement;
|
|
889
|
-
}
|
|
890
|
-
getUserlandComponentRef() {
|
|
891
|
-
return this.branchComponentRef.instance.getHostedContent();
|
|
892
|
-
}
|
|
893
|
-
getContentCreatedSub(instance) {
|
|
894
|
-
return instance.contentCreated.subscribe((userlandComponentInstance) => {
|
|
895
|
-
var _a, _b;
|
|
896
|
-
const component = userlandComponentInstance;
|
|
897
|
-
Object.entries((_a = this.treeBranch.branchOptions.inputBindings) !== null && _a !== void 0 ? _a : {}).forEach(([key, value]) => {
|
|
898
|
-
component[key] = value;
|
|
899
|
-
});
|
|
900
|
-
Object.entries((_b = this.treeBranch.branchOptions.outputBindings) !== null && _b !== void 0 ? _b : {}).forEach(([key, value]) => {
|
|
901
|
-
this.outputBindingSubscriptions.push(component[key].subscribe(value));
|
|
902
|
-
});
|
|
903
|
-
component.treeBranch = this.treeBranch;
|
|
904
|
-
const dropzones = instance.dropzones;
|
|
905
|
-
assert(dropzones !== undefined);
|
|
906
|
-
dropzoneRenderer.registerDropzones(dropzones, this.treeBranch);
|
|
907
|
-
});
|
|
908
|
-
}
|
|
909
|
-
getInstanceSubscriptions(instance) {
|
|
910
|
-
const droppedSub = instance.dropped.subscribe((placement) => {
|
|
911
|
-
dropzoneRenderer.handleDrop(this.treeBranch, placement);
|
|
912
|
-
});
|
|
913
|
-
return [
|
|
914
|
-
this.getContentCreatedSub(instance),
|
|
915
|
-
this.getShowLowerZonesSub(instance),
|
|
916
|
-
this.getShowUpperZonesSub(instance),
|
|
917
|
-
droppedSub
|
|
918
|
-
];
|
|
919
|
-
}
|
|
920
|
-
getShowLowerZonesSub(instance) {
|
|
921
|
-
return instance.showDropzones
|
|
922
|
-
.pipe(filter((direction) => direction === "lower"))
|
|
923
|
-
.subscribe(() => {
|
|
924
|
-
const currentDropzoneDisplayed = dropzoneRenderer.getCurrentDisplay();
|
|
925
|
-
if ((currentDropzoneDisplayed === null || currentDropzoneDisplayed === void 0 ? void 0 : currentDropzoneDisplayed.treeBranch) === this.treeBranch &&
|
|
926
|
-
currentDropzoneDisplayed.direction === "lower") {
|
|
927
|
-
return;
|
|
928
|
-
}
|
|
929
|
-
dropzoneRenderer.showLowerZones(this.treeBranch);
|
|
930
|
-
instance.triggerChangeDetection();
|
|
931
|
-
});
|
|
932
|
-
}
|
|
933
|
-
getShowUpperZonesSub(instance) {
|
|
934
|
-
return instance.showDropzones
|
|
935
|
-
.pipe(filter((direction) => direction === "upper"))
|
|
936
|
-
.subscribe(() => {
|
|
937
|
-
const currentDropzoneDisplayed = dropzoneRenderer.getCurrentDisplay();
|
|
938
|
-
if ((currentDropzoneDisplayed === null || currentDropzoneDisplayed === void 0 ? void 0 : currentDropzoneDisplayed.treeBranch) === this.treeBranch &&
|
|
939
|
-
currentDropzoneDisplayed.direction === "upper") {
|
|
940
|
-
return;
|
|
941
|
-
}
|
|
942
|
-
dropzoneRenderer.showUpperZones(this.treeBranch);
|
|
943
|
-
instance.triggerChangeDetection();
|
|
944
|
-
});
|
|
945
|
-
}
|
|
946
|
-
}
|
|
947
|
-
|
|
948
849
|
/** Represents a standard node in a tree. Renders a BranchComponent.
|
|
949
850
|
*
|
|
950
851
|
* @remarks
|
|
@@ -1364,6 +1265,105 @@ class TreeBranch {
|
|
|
1364
1265
|
}
|
|
1365
1266
|
}
|
|
1366
1267
|
|
|
1268
|
+
/** Responsible for the creation of new trees. */
|
|
1269
|
+
class TreeService {
|
|
1270
|
+
/**
|
|
1271
|
+
* Creates a new, empty tree structure inside the provided container.
|
|
1272
|
+
*
|
|
1273
|
+
* @returns A `TreeRoot` representing the base of the new tree.
|
|
1274
|
+
*/
|
|
1275
|
+
createEmptyTree(container, options = {}) {
|
|
1276
|
+
container.clear();
|
|
1277
|
+
const root = new TreeRoot(container);
|
|
1278
|
+
config.setConfig(root, options);
|
|
1279
|
+
return root;
|
|
1280
|
+
}
|
|
1281
|
+
}
|
|
1282
|
+
TreeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1283
|
+
TreeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TreeService, providedIn: "root" });
|
|
1284
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TreeService, decorators: [{
|
|
1285
|
+
type: Injectable,
|
|
1286
|
+
args: [{ providedIn: "root" }]
|
|
1287
|
+
}] });
|
|
1288
|
+
|
|
1289
|
+
class DragAndDrop {
|
|
1290
|
+
constructor() {
|
|
1291
|
+
this.dragAborted$ = new Subject();
|
|
1292
|
+
}
|
|
1293
|
+
dragStart(treeBranch, event) {
|
|
1294
|
+
if (!this.draggingAllowed(treeBranch)) {
|
|
1295
|
+
event.preventDefault();
|
|
1296
|
+
return;
|
|
1297
|
+
}
|
|
1298
|
+
treeBranch.dispatch(new DragStartEvent(treeBranch));
|
|
1299
|
+
this.setDragEffects(treeBranch, event);
|
|
1300
|
+
this.watchForDragend(treeBranch, event);
|
|
1301
|
+
// We have to do a setTimeout because DOM changes are not allowed during a
|
|
1302
|
+
// dragstart event.
|
|
1303
|
+
setTimeout(() => {
|
|
1304
|
+
dragState.starting(treeBranch);
|
|
1305
|
+
treeBranch.prune();
|
|
1306
|
+
dragState.dragging();
|
|
1307
|
+
});
|
|
1308
|
+
}
|
|
1309
|
+
drop(parent, index) {
|
|
1310
|
+
const treeBranch = dragState.getDragData();
|
|
1311
|
+
if (treeBranch === undefined) {
|
|
1312
|
+
throw new TreeError("Cannot get dragged branch");
|
|
1313
|
+
}
|
|
1314
|
+
this.graftDraggedBranch(treeBranch, parent, index);
|
|
1315
|
+
treeBranch.dispatch(new DropEvent(treeBranch, parent, index));
|
|
1316
|
+
}
|
|
1317
|
+
getDragImageOffsets(event, element) {
|
|
1318
|
+
const bounds = element.getBoundingClientRect();
|
|
1319
|
+
const xOffset = event.clientX - bounds.left;
|
|
1320
|
+
const yOffset = event.clientY - bounds.top;
|
|
1321
|
+
return [xOffset, yOffset];
|
|
1322
|
+
}
|
|
1323
|
+
setDragEffects(treeBranch, event) {
|
|
1324
|
+
const dataTransfer = event.dataTransfer;
|
|
1325
|
+
assert(dataTransfer instanceof DataTransfer);
|
|
1326
|
+
const nativeElement = treeBranch.getNativeElement();
|
|
1327
|
+
const [xOffset, yOffset] = this.getDragImageOffsets(event, nativeElement);
|
|
1328
|
+
dataTransfer.setDragImage(nativeElement, xOffset, yOffset);
|
|
1329
|
+
}
|
|
1330
|
+
watchForDragend(treeBranch, event) {
|
|
1331
|
+
var _a;
|
|
1332
|
+
const oldParent = treeBranch.parent();
|
|
1333
|
+
const oldIndex = treeBranch.index();
|
|
1334
|
+
assert(oldParent !== undefined && oldIndex !== undefined);
|
|
1335
|
+
(_a = event.target) === null || _a === void 0 ? void 0 : _a.addEventListener("dragend", (dragend) => {
|
|
1336
|
+
if (dragState.state() !== DragStates.Dropped) {
|
|
1337
|
+
//The drag ended but a drop never occurred, so put the dragged branch back where it started.
|
|
1338
|
+
this.dragAborted$.next(dragend);
|
|
1339
|
+
this.graftDraggedBranch(treeBranch, oldParent, oldIndex);
|
|
1340
|
+
}
|
|
1341
|
+
dragState.restart();
|
|
1342
|
+
const newParent = treeBranch.parent();
|
|
1343
|
+
assert(newParent !== undefined);
|
|
1344
|
+
const newIndex = treeBranch.index();
|
|
1345
|
+
assert(newIndex !== undefined);
|
|
1346
|
+
treeBranch.dispatch(new DragEndEvent(treeBranch, {
|
|
1347
|
+
oldParent,
|
|
1348
|
+
oldIndex,
|
|
1349
|
+
newParent,
|
|
1350
|
+
newIndex
|
|
1351
|
+
}));
|
|
1352
|
+
}, { once: true });
|
|
1353
|
+
}
|
|
1354
|
+
draggingAllowed(treeBranch) {
|
|
1355
|
+
var _a, _b, _c;
|
|
1356
|
+
const allowDragging = (_c = (_b = (_a = config.getConfig(treeBranch.root())) === null || _a === void 0 ? void 0 : _a.dragAndDrop) === null || _b === void 0 ? void 0 : _b.allowDragging) !== null && _c !== void 0 ? _c : (() => true);
|
|
1357
|
+
return allowDragging(treeBranch);
|
|
1358
|
+
}
|
|
1359
|
+
graftDraggedBranch(treeBranch, parent, index) {
|
|
1360
|
+
treeBranch.graftTo(parent, index);
|
|
1361
|
+
treeBranch.getNativeElement().style.display = "block";
|
|
1362
|
+
dragState.dropped();
|
|
1363
|
+
}
|
|
1364
|
+
}
|
|
1365
|
+
const dragAndDrop = new DragAndDrop();
|
|
1366
|
+
|
|
1367
1367
|
class DropzoneRenderer {
|
|
1368
1368
|
constructor() {
|
|
1369
1369
|
this.registry = new Map();
|
|
@@ -1388,7 +1388,7 @@ class DropzoneRenderer {
|
|
|
1388
1388
|
.events()
|
|
1389
1389
|
.pipe(filter((event) => event instanceof PruneEvent), first())
|
|
1390
1390
|
.subscribe(() => {
|
|
1391
|
-
assert(final
|
|
1391
|
+
assert(final !== undefined);
|
|
1392
1392
|
this.showLowerZones(final);
|
|
1393
1393
|
});
|
|
1394
1394
|
});
|
|
@@ -1607,14 +1607,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
1607
1607
|
class TreeDragAndDropModule {
|
|
1608
1608
|
}
|
|
1609
1609
|
TreeDragAndDropModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TreeDragAndDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1610
|
-
TreeDragAndDropModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TreeDragAndDropModule, imports: [DraggableDirective
|
|
1610
|
+
TreeDragAndDropModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TreeDragAndDropModule, imports: [DraggableDirective], exports: [DraggableDirective] });
|
|
1611
1611
|
TreeDragAndDropModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TreeDragAndDropModule, providers: [TreeDragAndDropService] });
|
|
1612
1612
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TreeDragAndDropModule, decorators: [{
|
|
1613
1613
|
type: NgModule,
|
|
1614
1614
|
args: [{
|
|
1615
|
-
imports: [DraggableDirective
|
|
1615
|
+
imports: [DraggableDirective],
|
|
1616
1616
|
providers: [TreeDragAndDropService],
|
|
1617
|
-
exports: [DraggableDirective
|
|
1617
|
+
exports: [DraggableDirective]
|
|
1618
1618
|
}]
|
|
1619
1619
|
}] });
|
|
1620
1620
|
|
|
@@ -1804,5 +1804,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
1804
1804
|
* Generated bundle index. Do not edit.
|
|
1805
1805
|
*/
|
|
1806
1806
|
|
|
1807
|
-
export { DestructionEvent, DragEndEvent, DragStartEvent, DraggableDirective, DragoverNoChangeDetectDirective, DropEvent, GraftEvent,
|
|
1807
|
+
export { BranchComponent, DestructionEvent, DragEndEvent, DragStartEvent, DraggableDirective, DragoverNoChangeDetectDirective, DropEvent, GraftEvent, LimbleTreeLegacyModule, LimbleTreeModule, LimbleTreeRootComponent, PruneEvent, RootComponent, TreeBranch, TreeCollapseModule, TreeCollapseService, TreeDragAndDropModule, TreeDragAndDropService, TreeError, TreeRoot, TreeService };
|
|
1808
1808
|
//# sourceMappingURL=limble-limble-tree.mjs.map
|