BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg/ui/decorators/diagram.ts

   1 import {EditorDecorator} from "../framework/decorator";
   2 import {EditorUiContext} from "../framework/core";
   3 import {BaseSelection} from "lexical";
   4 import {DiagramNode} from "../../nodes/diagram";
   5 import {$selectionContainsNode, $selectSingleNode} from "../../utils/selection";
   6 import {$openDrawingEditorForNode} from "../../utils/diagrams";
   7
   8
   9 export class DiagramDecorator extends EditorDecorator {
  10     protected completedSetup: boolean = false;
  11
  12     setup(context: EditorUiContext, element: HTMLElement) {
  13         const diagramNode = this.getNode();
  14         element.classList.add('editor-diagram');
  15         element.addEventListener('click', event => {
  16             context.editor.update(() => {
  17                 $selectSingleNode(this.getNode());
  18             })
  19         });
  20
  21         element.addEventListener('dblclick', event => {
  22             context.editor.getEditorState().read(() => {
  23                 $openDrawingEditorForNode(context, (this.getNode() as DiagramNode));
  24             });
  25         });
  26
  27         const selectionChange = (selection: BaseSelection|null): void => {
  28             element.classList.toggle('selected', $selectionContainsNode(selection, diagramNode));
  29         };
  30         context.manager.onSelectionChange(selectionChange);
  31         this.onDestroy(() => {
  32             context.manager.offSelectionChange(selectionChange);
  33         });
  34
  35         this.completedSetup = true;
  36     }
  37
  38     update() {
  39         //
  40     }
  41
  42     render(context: EditorUiContext, element: HTMLElement): void {
  43         if (this.completedSetup) {
  44             this.update();
  45         } else {
  46             this.setup(context, element);
  47         }
  48     }
  49 }