diff --git a/src/app/components/nodes/EditorNode.contract.ts b/src/app/components/nodes/EditorNode.contract.ts index 6835d36..c5fb162 100644 --- a/src/app/components/nodes/EditorNode.contract.ts +++ b/src/app/components/nodes/EditorNode.contract.ts @@ -40,4 +40,6 @@ export abstract class EditorNodeContract { public performSave(): void | Promise {} public performLoad(): void | Promise {} + + public performDelete(): void | Promise {} } diff --git a/src/app/pages/editor/editor.page.html b/src/app/pages/editor/editor.page.html index 9a27a3b..0fbd1d3 100644 --- a/src/app/pages/editor/editor.page.html +++ b/src/app/pages/editor/editor.page.html @@ -22,6 +22,12 @@ style="display: flex;" *ngFor="let node of editorService.immutableNodes" > +
+ + +
diff --git a/src/app/pages/editor/editor.page.scss b/src/app/pages/editor/editor.page.scss index eb93e16..e3d4498 100644 --- a/src/app/pages/editor/editor.page.scss +++ b/src/app/pages/editor/editor.page.scss @@ -6,6 +6,17 @@ ion-icon.invisible { opacity: 0; } -.title-input { - +.host-icons { + padding: 5px; + color: #444; + display: flex; + flex-direction: column; +} + +.type-icon { + margin-bottom: 15px; + + &.norm { + color: var(--noded-background-node); + } } diff --git a/src/app/pages/editor/editor.page.ts b/src/app/pages/editor/editor.page.ts index 617a12a..96fe5cb 100644 --- a/src/app/pages/editor/editor.page.ts +++ b/src/app/pages/editor/editor.page.ts @@ -17,6 +17,15 @@ export class EditorPage implements OnInit { // @ViewChildren('editorHosts') editorHosts; // @ViewChild('titleBar') titleBar; + public typeIcons = { + branch: 'fa fa-folder', + node: 'fa fa-quote-left', + norm: 'fa fa-quote-left', + page: 'fa fa-sticky-note', + db: 'fa fa-database', + code: 'fa fa-code', + }; + @Input() pageId: string; public pageName = ''; @@ -24,6 +33,7 @@ export class EditorPage implements OnInit { protected route: ActivatedRoute, protected router: Router, protected loader: LoadingController, + protected popover: PopoverController, public readonly editorService: EditorService, ) { this.route.params.subscribe(params => { @@ -47,6 +57,31 @@ export class EditorPage implements OnInit { this.editorService.save(); } + async onOptionsClick(event: MouseEvent, node: HostRecord) { + if ( !this.editorService.canEdit() ) { + return; + } + + const popover = await this.popover.create({ + component: HostOptionsComponent, + event, + componentProps: { + editor: this, + index: this.editorService.immutableNodes.indexOf(node), + event, + hostRecord: node, + } + }); + + popover.onDidDismiss().then(result => { + if ( result.data === 'delete_node' ) { + this.editorService.deleteNode(node.UUID); + } + }); + + await popover.present(); + } + // buttonIsVisible(index) { // return this.visibleButtons.includes(index); // } diff --git a/src/app/service/editor.service.ts b/src/app/service/editor.service.ts index 80f3b47..4b4c267 100644 --- a/src/app/service/editor.service.ts +++ b/src/app/service/editor.service.ts @@ -120,6 +120,26 @@ export class EditorService { return dirties.some(Boolean) || needSaves.some(Boolean); } + async deleteNode(nodeId: string) { + if ( !this.currentPage ) { + throw new NoPageLoadedError(); + } + + const node = this.currentNodes.find(maybeNode => maybeNode.UUID === nodeId); + if ( !node ) { + throw new Error('Invalid node ID.'); + } + + const editor = this.nodeIdToEditorContract[nodeId]; + if ( editor ) { + await editor.performDelete(); + delete this.nodeIdToEditorContract[nodeId]; + } + + this.currentNodes = this.currentNodes.filter(x => x.UUID !== nodeId); + this.dirtyOverride = true; + } + canEdit() { if ( !this.currentPage ) { throw new NoPageLoadedError();