xref: /plugin/diagrams/script/DiagramsView.js (revision d5285d5997d36d52df94bd6170b284d5e077218a)
1class DiagramsView extends AbstractNodeView {
2  constructor(node, view, getPos) {
3    super(node, view, getPos);
4    this.dForm = new DiagramsForm('diagrams-form-view');
5  }
6
7  renderNode(attrs) {
8    const dgrSchemaSpecs = this.node.type.spec.toDOM(this.node);
9    const fullAttrs = dgrSchemaSpecs[1];
10    const container = document.createElement('div');
11    container.setAttribute('class', 'diagrams-svg-wrapper');
12    const ele = Object.assign(document.createElement(dgrSchemaSpecs[0]), fullAttrs);
13    ele.setAttribute('class', fullAttrs.class);
14    ele.setAttribute('data-id', fullAttrs['data-id']);
15    ele.setAttribute('pointer-events', 'none');
16
17    container.appendChild(ele);
18
19    this.dom = container;
20
21    DiagramsForm.resolveImageAttributes(attrs, (newAttrs) => {
22      const nodeStartPos = this.getPos();
23      this.outerView.dispatch(this.outerView.state.tr.setNodeMarkup(
24        nodeStartPos,
25        null,
26        newAttrs,
27        this.node.marks,
28      ));
29    });
30  }
31
32  selectNode() {
33    this.dom.classList.add('ProseMirror-selectednode');
34
35    this.dForm.setSource(this.node.attrs.id);
36    // TODO
37    // this.dForm.setWidth(this.node.attrs.width);
38    // this.dForm.setHeight(this.node.attrs.height);
39    this.dForm.setAlignment(this.node.attrs.align);
40
41    this.dForm.show();
42
43    const cleanAttrs = AbstractNodeView.unsetPrefixAttributes('data-resolved', { ...this.node.attrs });
44    this.dForm.on('submit', DiagramsForm.resolveSubmittedLinkData(
45      cleanAttrs,
46      this.dForm,
47      (newAttrs) => {
48        this.renderNode(newAttrs);
49        const nodeStartPos = this.getPos();
50
51        this.outerView.dispatch(this.outerView.state.tr.setNodeMarkup(
52          nodeStartPos,
53          null,
54          newAttrs,
55          this.node.marks,
56        ));
57        this.deselectNode();
58      },
59    ));
60  }
61  deselectNode() {
62    this.dom.classList.remove('ProseMirror-selectednode');
63    this.dForm.hide();
64    this.dForm.off('submit');
65    this.dForm.resetForm();
66  }
67}
68