@jinntec/fore 3.3.1 → 4.0.0

package/src/tools/adi.js

@@ -1,1111 +0,0 @@
-import {
-  addClass,
-  removeClass,
-  isEmptyTextNode,
-  containsOnlyText,
-  newElement,
-  drawOptions,
-  pauseEvent,
-  drawAttrRow,
-} from './helpers.js';
-
-import { Fore } from '../fore.js';
-
-function isAttributeShown(name, sourceNode) {
-  if (name === 'style') return false;
-  return true;
-  // return name === 'id' || name === 'ref' || name === 'event';
-}
-
-class ADI {
-  constructor(rootElement, instance) {
-    this.sourceNodeByInspectorNodeLookup = new Map();
-
-    this.uiView = null;
-    this.menuView = null;
-    this.domView = null;
-    this.attrView = null;
-    this.optsView = null;
-    /**
-     * The current active element. Note this is the element in the DOM view
-     */
-    this.activeElement = null;
-    this.vertResizing = false;
-    this.horizResizing = false;
-    this.pathScrolling = null;
-    this.elemLookup = false;
-    this.styleBackup = '';
-    this.xPos = 0;
-    this.delegatedEvents = [];
-
-    this.options = {
-      align: 'right', // NOTE: left is not supported in this version
-      split: 50,
-      minSplit: 30,
-      visible: true,
-      saving: false,
-      transparent: true,
-      omitEmptyText: true,
-      makeVisible: true,
-      foldText: true,
-      nodeTypes: [Node.ELEMENT_NODE, Node.TEXT_NODE, Node.COMMENT_NODE, Node.DOCUMENT_NODE],
-    };
-
-    if (instance === '#document') {
-      this.instanceId = '#document';
-      this.document = window.document;
-      this.isInstanceViewer = false;
-    } else {
-      this.instanceId = instance.id;
-      if (!instance || instance.localName !== 'fx-instance') {
-        console.error('No instance found!');
-      }
-      this.document = instance.getInstanceData();
-      this.isInstanceViewer = true;
-      this.options.foldText = false;
-    }
-    this.drawUI(rootElement);
-    this.registerEvents();
-
-    // We're updating here, but we're doing that again later, when the UI is read (the 'ready' event fires)
-    this.drawDOM(this.document, this.domView.querySelector('.adi-tree-view'), true);
-    document.addEventListener('execute-action', e => this.processExecuteAction);
-  }
-
-  // Returns selected element or null
-  getSelected() {
-    if (!this.activeElement) {
-      return null;
-    }
-
-    let elem = document;
-
-    elem = this.sourceNodeByInspectorNodeLookup.get(this.activeElement);
-    /*
-        document.dispatchEvent(
-            new CustomEvent('path-touched', {
-                composed: true,
-                bubbles: true,
-                detail: {path: elem.modelItem.path},
-            }),
-        );
-*/
-
-    return elem;
-  }
-
-  // Loads user defined options stored in HTML5 storage (if available)
-  loadOptions() {
-    let userOptions = {};
-
-    userOptions = JSON.parse(window.localStorage.getItem('ADI.options')) || {};
-
-    // merge with defaults
-    for (const opt of Object.keys(userOptions)) {
-      this.options[opt] = userOptions[opt];
-    }
-  }
-
-  // Saves user defined options into the HTML5 storage (if available)
-  saveOptions() {
-    if (this.options.saving) {
-      window.localStorage.setItem('ADI.options', JSON.stringify(this.options));
-    }
-  }
-
-  // Checks if a node has some child nodes and if at least on of them is of a supported type
-  hasRequiredNodes(node) {
-    if (typeof node !== 'object') {
-      throw new Error(
-        `hasRequiredNodes: Expected argument node of type object, ${typeof node} given.`,
-      );
-    }
-
-    if (node.hasChildNodes()) {
-      for (let i = 0, len = node.childNodes.length; i < len; i += 1) {
-        const child = node.childNodes[i];
-        if (this.options.nodeTypes.includes(child.nodeType)) {
-          return true;
-        }
-      }
-    }
-
-    return false;
-  }
-
-  // Creates a starting markup for a new DOM tree view node
-  newTreeNode(sourceNode) {
-    if (typeof sourceNode !== 'object') {
-      throw new Error(
-        `newTreeNode: Expected argument node of type object, ${typeof sourceNode} given.`,
-      );
-    }
-
-    const withChildren = this.hasRequiredNodes(sourceNode);
-    let omit = false;
-    let adiNode = sourceNode.nodeName.startsWith('FX-')
-      ? `adi-node ${sourceNode.nodeName.toLowerCase()}`
-      : '';
-    if (sourceNode.nodeName.startsWith('FX-')) {
-      adiNode = `adi-node ${sourceNode.nodeName.toLowerCase()}`;
-      adiNode += Fore.isActionElement(sourceNode.nodeName) ? ' action' : '';
-    }
-    const elem = newElement('li', {
-      class: adiNode,
-    });
-
-    // do not show ADI DOM nodes in the DOM view
-    if (sourceNode === this.uiView) {
-      return null;
-    }
-
-    // generate UI for elements with children
-    if (withChildren) {
-      elem.appendChild(newElement('span', { class: 'adi-trigger' }));
-    }
-
-    // we can omit empty text nodes if allowed in options
-    if (this.options.omitEmptyText && sourceNode.nodeType === Node.TEXT_NODE) {
-      omit = isEmptyTextNode(sourceNode);
-    }
-
-    if (!omit) {
-      const tagStart = newElement('span');
-
-      this.sourceNodeByInspectorNodeLookup.set(tagStart, sourceNode);
-      this.sourceNodeByInspectorNodeLookup.set(sourceNode, tagStart);
-
-      let tagEnd = null;
-
-      if (containsOnlyText(sourceNode)) {
-        if (sourceNode.nodeType === Node.COMMENT_NODE) {
-          addClass(tagStart, 'adi-comment-node');
-          if (typeof tagStart.innerText === 'string') {
-            tagStart.innerText = `<!-- ${sourceNode.textContent} -->`;
-          }
-        } else {
-          addClass(tagStart, 'adi-text-node');
-          tagStart.textContent = sourceNode.textContent;
-        }
-      } else {
-        addClass(tagStart, 'adi-normal-node');
-        if (sourceNode.nodeType !== Node.DOCUMENT_NODE) {
-          // tagStart.textContent = '<' + node.nodeName.toLowerCase() + '>';
-
-          /*
-                    let attrString = `<${sourceNode.nodeName.toLowerCase()} `;
-                    if(sourceNode.attributes){
-                        Array.from(sourceNode.attributes).forEach(attr => {
-                            attrString += `${attr.nodeName}="${attr.nodeValue}" `;
-                        });
-                        console.log('ATTRSTRING',attrString);
-                    }
-                    if (sourceNode.nodeName === 'FX-BIND') {
-                        tagStart.textContent = `<${sourceNode.nodeName.toLowerCase()} ref="${sourceNode.getAttribute('ref')}">`;
-                    } else if (sourceNode.nodeName === 'FX-INSERT') {
-                        tagStart.textContent = `<${sourceNode.nodeName.toLowerCase()} ref="${sourceNode.getAttribute('ref')}">`;
-                    } else if (sourceNode.nodeName === 'FX-INSTANCE') {
-                        tagStart.textContent = `<${sourceNode.nodeName.toLowerCase()} id="${sourceNode.id}">`;
-                    } else if (sourceNode.nodeName === 'FX-CONTROL') {
-                        tagStart.textContent = `<${sourceNode.nodeName.toLowerCase()} ref="${sourceNode.getAttribute('ref')}">`;
-                    } else if (sourceNode.nodeName === 'FX-SEND') {
-                        tagStart.textContent = `<${sourceNode.nodeName.toLowerCase()} submission="${sourceNode.getAttribute('submission')}">`;
-                    } else if (sourceNode.nodeName === 'FX-SETVALUE') {
-                        tagStart.textContent = `<${sourceNode.nodeName.toLowerCase()} ref="${sourceNode.getAttribute('ref')}">`;
-                    } else if (sourceNode.nodeName === 'FX-SUBMISSION') {
-                        tagStart.textContent = `<${sourceNode.nodeName.toLowerCase()} id="${sourceNode.getAttribute('id')}">`;
-                    } else {
-*/
-          const attrString = Array.from(sourceNode.attributes)
-            .filter(attr =>
-              this.isInstanceViewer ? true : isAttributeShown(attr.name, sourceNode),
-            )
-            .map(attr => `${attr.name}="${attr.value}"`)
-            .join(' ');
-          tagStart.textContent = `<${sourceNode.nodeName.toLowerCase()}${
-            attrString ? ` ${attrString}` : ''
-          }>`;
-          // }
-
-          if (withChildren) {
-            tagEnd = newElement('span');
-            addClass(tagEnd, 'adi-end-node');
-            tagEnd.textContent = `</${sourceNode.nodeName.toLowerCase()}>`;
-          }
-        } else {
-          tagStart.textContent = sourceNode.nodeName.toLowerCase();
-        }
-      }
-
-      elem.appendChild(tagStart);
-      /*
-                      const icon = document.createElement('span');
-                      icon.textContent = 'x';
-                      icon.classList.add(('icon'))
-                      const icon2 = document.createElement('span');
-                      icon2.textContent = '<-';
-                      icon2.classList.add(('icon'))
-                      elem.appendChild(icon);
-                      elem.appendChild(icon2);
-      */
-      if (sourceNode.nodeName.startsWith('FX-')) {
-        tagStart.classList.add('fore-node');
-        tagStart.classList.add(sourceNode.nodeName.toLowerCase());
-      }
-
-      if (tagEnd) {
-        elem.appendChild(tagEnd);
-
-        if (sourceNode.nodeName.startsWith('FX-')) {
-          tagEnd.classList.add('fore-node');
-        }
-      }
-
-      return elem;
-    }
-    return null;
-  }
-
-  // Renders the DOM Tree view
-  drawDOM(root, elem, isRoot) {
-    if (typeof root !== 'object') {
-      throw new Error(`drawDOM: Expected argument root of type object, ${typeof root} given.`);
-    }
-
-    let newNode = null;
-    let isOpen = true;
-
-    const adiNode = elem.nodeName.startsWith('FX-')
-      ? `adi-node ${node.nodeName.toLowerCase()}`
-      : '';
-
-    if (isRoot && this.options.nodeTypes.indexOf(root.nodeType) !== -1) {
-      elem.innerHTML = '';
-      newNode = this.newTreeNode(root);
-
-      if (this.hasRequiredNodes(root)) {
-        newNode.appendChild(newElement('ul', { 'data-open': true, class: adiNode }));
-
-        addClass(newNode.querySelector('.adi-trigger'), 'opened');
-      }
-
-      elem.appendChild(newNode);
-      elem = elem.querySelector('ul');
-    }
-
-    // recursive DOM traversal
-    for (let i = 0, len = root.childNodes.length; i < len; i += 1) {
-      const node = root.childNodes[i];
-      const withChildren = this.hasRequiredNodes(node);
-
-      if (this.options.nodeTypes.indexOf(node.nodeType) !== -1) {
-        newNode = this.newTreeNode(node);
-
-        if (newNode) {
-          if (withChildren) {
-            if (this.options.foldText) {
-              isOpen = !containsOnlyText(node, true);
-            } else {
-              isOpen = true;
-            }
-
-            if (node.nodeName === 'HEAD') isOpen = false;
-            if (node.nodeName === 'SELECT') isOpen = false;
-            if (node.nodeName === 'FX-INSTANCE') isOpen = false;
-            /*
-                        if(this.options.closedElements.includes(node.nodeName.toLowerCase())){
-                            isOpen = false;
-                        }
-*/
-
-            if (node.nodeType === Node.DOCUMENT_NODE) {
-              newNode.appendChild(newElement('ul', { 'data-open': isOpen, class: adiNode }));
-            } else {
-              newNode.insertBefore(
-                newElement('ul', { 'data-open': isOpen, class: adiNode }),
-                newNode.lastChild,
-              );
-            }
-
-            addClass(newNode.querySelector('.adi-trigger'), isOpen ? 'opened' : 'closed');
-          }
-
-          elem.appendChild(newNode);
-
-          if (this.getSelected() === node) {
-            const span = newNode.querySelector('span.adi-normal-node');
-            span?.classList?.add('adi-active-node');
-            this.activeElement = span;
-            newNode.scrollIntoView({ block: 'nearest', behavior: 'instant' });
-          }
-
-          if (withChildren) {
-            this.drawDOM(node, newNode.querySelector('ul'), false);
-          }
-        }
-      }
-    }
-  }
-
-  // Show/hide the options view
-  toggleOptions() {
-    if (this.optsView.className.indexOf('adi-hidden') !== -1) {
-      removeClass(this.optsView, 'adi-hidden');
-    } else {
-      addClass(this.optsView, 'adi-hidden');
-      this.attrView.querySelector('.adi-content').innerHTML = '';
-      this.refreshUI();
-      this.drawDOM(document, this.domView.querySelector('.adi-tree-view'), true);
-      if (this.options.saving) {
-        this.saveOptions();
-      } else {
-        window.localStorage.removeItem('ADI.options');
-      }
-    }
-  }
-
-  // Renders the UI
-  drawUI(rootElement) {
-    this.uiView = newElement('div', {
-      id: 'adi-wrapper',
-      class: this.options.transparent ? 'transparent' : '',
-    });
-    this.domView = newElement('div', { id: 'adi-dom-view' });
-    const domViewContent = newElement('div', { class: 'adi-content', id: 'detailsView' });
-    // this.attrView.appendChild(newElement('fx-fore', {src: './lab/inspector-view.html'}));
-
-    // const horizSplit = newElement('div', {id: 'adi-horiz-split'});
-    const domTree = newElement('ul', { class: 'adi-tree-view' });
-    const domPathWrap = newElement('div', { class: 'adi-path-wrap' });
-    const domPathScrollLeft = newElement('span', { class: 'adi-path-left' });
-    const domPathScrollRight = newElement('span', { class: 'adi-path-right' });
-    this.menuView = newElement('div', { id: 'adi-panel' });
-    const naviButtons = newElement('div', { class: 'adi-menu-wrap' });
-    const naviConfig = newElement('a', { class: 'adi-menu-config', title: 'Settings' });
-    const naviLookup = newElement('a', { class: 'adi-menu-lookup', title: 'Lookup tool' });
-
-    // this.horizSplit = horizSplit;
-
-    this.optsView = drawOptions();
-
-    // put UI together
-    domViewContent.appendChild(domTree);
-    this.domView.appendChild(this.menuView);
-    this.domView.appendChild(domViewContent);
-
-    domPathWrap.appendChild(domPathScrollLeft);
-    domPathWrap.appendChild(domPathScrollRight);
-    naviButtons.appendChild(naviLookup);
-    naviButtons.appendChild(naviConfig);
-    this.menuView.appendChild(domPathWrap);
-    this.menuView.appendChild(naviButtons);
-    // this.uiView.appendChild(this.menuView);
-    this.uiView.appendChild(this.optsView);
-    this.uiView.appendChild(this.domView);
-    if (!this.isInstanceViewer) {
-      this.attrView = newElement('div', { id: 'adi-attr-view' });
-      const attrViewContent = newElement('div', { class: 'adi-content' });
-      this.attrView.appendChild(attrViewContent);
-      this.uiView.appendChild(this.attrView);
-    }
-
-    // this.uiView.appendChild(horizSplit);
-    // wrapper.appendChild(naviWrap);
-
-    // cache UI object and append to the DOM
-
-    rootElement.appendChild(this.uiView);
-    // document.querySelector('#inspector').appendChild(wrapper);
-
-    this.refreshUI(true);
-  }
-
-  // Refreshes the global UI
-  refreshUI(refreshOpts) {
-    if (this.uiView === null) {
-      return;
-    }
-
-    // load options if requested (e.g. before the first UI refresh)
-    if (refreshOpts) {
-      this.loadOptions();
-    }
-
-    // Options view refresh
-    if (refreshOpts) {
-      this.optsView.querySelector('[data-opt="transparent"]').checked = this.options.transparent;
-      this.optsView.querySelector('[data-opt="saving"]').checked = this.options.saving;
-      this.optsView.querySelector('[data-opt="omitEmptyText"]').checked =
-        this.options.omitEmptyText;
-      this.optsView.querySelector('[data-opt="makeVisible"]').checked = this.options.makeVisible;
-      this.optsView.querySelector('[data-opt="foldText"]').checked = this.options.foldText;
-      this.optsView.querySelector('[data-opt="nodeTypes-3"]').checked =
-        this.options.nodeTypes.indexOf(3) !== -1;
-      this.optsView.querySelector('[data-opt="nodeTypes-8"]').checked =
-        this.options.nodeTypes.indexOf(8) !== -1;
-      // this.optsView.querySelector('[data-opt="nodeTypes-1"]').checked = this.options.nodeTypes.indexOf(1) !== -1;
-      // this.optsView.querySelector('[data-opt="nodeTypes-9"]').checked = this.options.nodeTypes.indexOf(9) !== -1;
-    }
-
-    // UI appearance refresh
-    this.uiView.className = this.options.transparent ? 'transparent' : '';
-    // this.uiView.style.display = this.options.visible ? 'grid' : 'none';
-    // this.domView.style.height = `${this.options.split}%`;
-    // this.attrView.style.height = `${100 - this.options.split}%`;
-    this.domView.querySelector('.adi-content').style.height = `${this.domView.clientHeight}px`;
-    if (!this.isInstanceViewer) {
-      this.attrView.querySelector('.adi-content').style.height = `${
-        this.attrView.clientHeight - this.menuView.clientHeight
-      }px`;
-    }
-
-    addClass(this.uiView, this.options.align);
-  }
-
-  // UI visibility toggle handler
-  toggleVisibilityUI() {
-    if (this.uiView === null) {
-      return;
-    }
-
-    this.uiView.style.display = this.options.visible ? 'none' : 'block';
-    this.options.visible = !this.options.visible;
-    this.saveOptions();
-  }
-
-  // Renders the attribute view
-  drawAttrs(elem) {
-    if (this.isInstanceViewer) {
-      return;
-    }
-    const content = this.attrView.querySelector('.adi-content');
-    // prepare attributes
-    content.innerHTML = '';
-
-    const header = document.createElement('header');
-    header.innerText = 'Attributes';
-    content.appendChild(header);
-
-    // todo: hook element-def.json in here
-    /*
-        if (elem.nodeName.startsWith('FX-')) {
-            console.log('got a fore element');
-            const {properties} = elem.constructor;
-            Object.keys(properties).forEach(propertyName => {
-
-                const property = properties[propertyName];
-                if (!property || property.hidden) {
-                    return;
-                }
-                const row = content.appendChild(newElement('span', {class: 'adi-attr'}));
-
-                switch (property.type) {
-                    case 'referencedNode': {
-                        row.innerHTML = `<label>${propertyName}: <button>${elem[propertyName]?.nodeName}</button></label>`;
-                        const button = row.querySelector('button');
-                        button.addEventListener(
-                            'click', () => this.handleLookup({detail: {target: elem[propertyName]}})
-                        );
-                        break;
-                    }
-                    case Number: {
-                        row.innerHTML = `<label>${propertyName}: <input type="number" data-attr="${propertyName}" value="${elem[propertyName]}"></label>`;
-                        break;
-                    }
-                    case String: {
-                        if (property.valueSpace) {
-                            row.innerHTML = `<label>${propertyName}: <select data-attr="${propertyName}" value="${elem[propertyName]}">${property.valueSpace.map(value => `<option>${value}</option>`)}</label>`;
-                            break;
-
-                        }
-                        row.innerHTML = `<label>${propertyName}: <input type="text" data-attr="${propertyName}" value="${elem[propertyName]}"></label>`;
-                        break;
-                    }
-                    case Boolean: {
-                        if (property.valueSpace) {
-                            row.innerHTML = `<label>${propertyName}: <input type="checkbox" data-attr="${propertyName}" value="${elem[propertyName]}"></input></label>`;
-
-                        }
-                        break;
-                    }
-                    case Object: {
-                        try {
-                            row.innerHTML = `<label>${propertyName}: <code>${JSON.stringify(elem[propertyName])}</code></label>`;
-                        } catch (err) {
-                            row.innerHTML = `<label>${propertyName}: <code>Unserializable</code></label>`;
-                        }
-                        break;
-                    }
-                    case Map: {
-                        try {
-                            row.innerHTML = `<label>${propertyName}: <code>${JSON.stringify(elem[propertyName])}</code></label>`;
-                        } catch (err) {
-                            row.innerHTML = `<label>${propertyName}: <code>Unserializable</code></label>`;
-                        }
-                        break;
-                    }
-                    default: {
-                        row.innerHTML = `<label>${propertyName}: Unknown type ${property.type}</label>`;
-                    }
-                }
-            });
-        } else {
-*/
-    [...elem.attributes].forEach(attr => {
-      if (attr.name !== 'style') {
-        content.appendChild(drawAttrRow(attr.name, attr.value));
-      }
-    });
-    // }
-  }
-
-  // Handles attribute changes
-  changeAttribute(e) {
-    const target = e ? e.target : window.event.srcElement;
-    const attr = target.getAttribute('data-attr');
-    const val = target.value;
-    const elem = this.getSelected();
-
-    // remove attribute if the new value is empty
-    if (val === '') {
-      elem.removeAttribute(attr);
-    } else {
-      elem.setAttribute(attr, val);
-    }
-  }
-
-  // Handles option changes
-  changeOption(e) {
-    const target = e ? e.target : window.event.srcElement;
-    const data = target.getAttribute('data-opt');
-    const val = target.checked;
-
-    if (data.indexOf('nodeTypes') !== -1) {
-      const type = parseInt(data.match(/\d+/)[0], 10);
-
-      if (val) {
-        this.options.nodeTypes.push(type);
-      } else {
-        this.options.nodeTypes.splice(this.options.nodeTypes.indexOf(type), 1);
-      }
-    } else {
-      this.options[data] = val;
-    }
-  }
-
-  // Key events processing
-  processKey(e) {
-    e = e || window.event;
-    const code = e.keyCode || e.which;
-
-    switch (code) {
-      case 272: // ctrl + alt + d
-        this.toggleVisibilityUI();
-        break;
-      default:
-        break;
-    }
-  }
-
-  // Vertical splitter resize handler
-  verticalResize(e) {
-    if (!this.vertResizing) {
-      return;
-    }
-
-    e = e || window.event;
-    document.documentElement.style.cursor = 'e-resize';
-    const nWidth = this.options.width + this.xPos - e.clientX;
-
-    if (nWidth >= this.options.minWidth) {
-      this.options.width = nWidth;
-      this.xPos = e.clientX;
-      this.refreshUI();
-      this.saveOptions();
-    }
-  }
-
-  // Horizontal splitter resize handler
-  horizontalResize(e) {
-    if (!this.horizResizing) {
-      return;
-    }
-
-    e = e || window.event;
-    document.documentElement.style.cursor = 'n-resize';
-    const nSplit = Math.floor((e.clientY / this.uiView.clientHeight) * 100);
-
-    if (nSplit >= this.options.minSplit && nSplit <= 100 - this.options.minSplit) {
-      this.options.split = nSplit;
-      this.refreshUI();
-      this.saveOptions();
-    }
-  }
-
-  processExecuteAction(e) {
-    this.refreshUI();
-  }
-
-  // Handles active element selection
-  handleActive(e) {
-    let target = e ? e.detail?.target || e.target : window.event.srcElement;
-    const active = this.domView.querySelector('.adi-active-node');
-
-    if (active) {
-      removeClass(active, 'adi-active-node');
-    }
-
-    // clicked on normal-node or end-node?
-    if (!target || target.nodeType === Node.DOCUMENT_NODE) return;
-    if (target && target.classList && target.classList.contains('adi-end-node')) {
-      target = target.parentNode.querySelector('.adi-normal-node');
-    }
-
-    this.activeElement = target;
-    addClass(target, 'adi-active-node');
-
-    /*
-        e.target.dispatchEvent(
-            new CustomEvent('handle-active', {
-                composed: true,
-                bubbles: true,
-                detail: {active: this.activeElement, selected: this.getSelected()},
-            }),
-        );
-*/
-
-    // make it visible (scroll)
-    if (this.options.makeVisible) {
-      const wrap = this.domView.querySelector('.adi-content');
-      wrap.scrollIntoView({ block: 'center', behavior: 'instant' });
-    }
-    const selected = this.getSelected();
-    this.drawAttrs(selected);
-
-    if (selected && typeof selected.getModelItem === 'function' && selected.getModelItem()?.node) {
-      let selectedElement = selected.modelItem.node;
-      if (selectedElement?.nodeType === Node.ATTRIBUTE_NODE) {
-        selectedElement = selectedElement.ownerElement;
-      }
-      window.document.dispatchEvent(
-        new CustomEvent('log-active-element', { detail: { target: selectedElement } }),
-      );
-    }
-    //	window.document.dispatchEvent(new CustomEvent('log-active-element', {detail: {target: selected}}));
-  }
-
-  // Highlights an element on page
-  highlightElement(event) {
-    // console.log('highlight',e);
-    let sourceNode = event ? event.target : window.event.srcElement;
-
-    if (sourceNode.classList.contains('adi-end-node')) {
-      sourceNode = sourceNode.parentNode.querySelector('.adi-normal-node');
-    }
-
-    const inspectorNode = this.sourceNodeByInspectorNodeLookup.get(sourceNode);
-
-    if (!inspectorNode || inspectorNode.ownerDocument !== window.document) {
-      // Not in HTML: ignore
-      return;
-    }
-
-    if (inspectorNode) {
-      if (event.type === 'mouseover') {
-        this.styleBackup = inspectorNode.getAttribute('style') || '';
-        inspectorNode.setAttribute('style', `outline: 2px solid blue; ${this.styleBackup}`);
-      } else if (this.styleBackup === '') {
-        inspectorNode.removeAttribute('style');
-      } else {
-        inspectorNode.setAttribute('style', this.styleBackup);
-      }
-    }
-  }
-
-  // Handles element lookup on page
-  handleLookup(e) {
-    const target = e ? e.detail?.target || e.target : window.event.srcElement;
-
-    if (!this.document.contains(target)) {
-      // Targetted at somewhere else!!!
-      return;
-    }
-    if (target.nodeType === Node.DOCUMENT_NODE) {
-      // Targetted at the document node. Nothing to highlight
-      return;
-    }
-
-    if (target.className.indexOf('adi-menu-lookup') !== -1) {
-      // enable/disable interactive lookup
-      if (this.elemLookup) {
-        removeClass(target, 'adi-active');
-        this.elemLookup = false;
-        this.removeEvent(document.body, 'mouseover', this.handleLookup, true);
-        this.removeEvent(document.body, 'mouseout', this.handleLookup, true);
-        this.removeEvent(document.body, 'click', this.handleLookup, true);
-        return;
-      }
-      addClass(target, 'adi-active');
-      this.elemLookup = true;
-      this.addEventDelegate(
-        document.body,
-        'mouseover',
-        this.handleLookup,
-        false,
-        '*',
-        true,
-        'adi-wrapper',
-      );
-      this.addEventDelegate(
-        document.body,
-        'mouseout',
-        this.handleLookup,
-        false,
-        '*',
-        true,
-        'adi-wrapper',
-      );
-      this.addEventDelegate(
-        document.body,
-        'click',
-        this.handleLookup,
-        false,
-        '*',
-        true,
-        'adi-wrapper',
-      );
-      return;
-    }
-    // handle lookup events
-    if (e.type === 'mouseover') {
-      this.styleBackup = target.getAttribute('style') || '';
-      target.setAttribute('style', `outline: 1px dashed red; ${this.styleBackup}`);
-      return;
-    }
-    if (e.type === 'mouseout') {
-      target.setAttribute('style', this.styleBackup);
-      return;
-    }
-    this.elemLookup = false;
-    removeClass(this.menuView.querySelector('.adi-menu-lookup'), 'adi-active');
-    target.setAttribute('style', this.styleBackup);
-    this.removeEvent(document.body, 'mouseover', this.handleLookup, true);
-    this.removeEvent(document.body, 'mouseout', this.handleLookup, true);
-    this.removeEvent(document.body, 'click', this.handleLookup, true);
-    pauseEvent(e);
-
-    // find corresponding node in the DOM view
-    const active = this.sourceNodeByInspectorNodeLookup.get(target);
-
-    // activate it
-    if (!active) return;
-    if (active) {
-      active.click();
-    }
-
-    // open the whole path in DOM view
-    if (!active.parentNode) return;
-    let node = active.parentNode;
-    let tmp;
-
-    if (node.querySelector('ul')) {
-      node.querySelector('ul').setAttribute('data-open', 'true');
-    }
-    while (node !== this.domView.querySelector('.adi-content')) {
-      if (node.className.indexOf('adi-node') !== -1) {
-        tmp = node.querySelector('.adi-trigger');
-        if (tmp) {
-          removeClass(tmp, 'closed');
-          addClass(tmp, 'opened');
-        }
-
-        node = node.parentNode; // ul node
-        node.setAttribute('data-open', 'true');
-      }
-
-      node = node.parentNode;
-    }
-
-    // make it visible (scroll)
-    if (this.options.makeVisible) {
-      active.scrollIntoView({ behavior: 'instant', block: 'nearest', inline: 'nearest' });
-    }
-    target.scrollIntoView({ behavior: 'instant', block: 'nearest', inline: 'nearest' });
-  }
-
-  // Simple cross-browser event handler that enables simple event delegation.
-  // Note that the selector must be a string and no nesting is supported.
-  // Selector is expected to be in one of formats listed below and works for all children
-  // in the particular element.
-  // Store parameter enables storing the reference to custom event handler.
-  // Exclude parameter will exclude the particular element and all of its children, this works
-  // only for id selectors.
-  // Selector formats: tag name ("div"), class name (".my-class"), id ("#my-id") and any ("*").
-
-  addEventDelegate(elem, evt, fn, capture, selector, store, exclude) {
-    // custom event handler is registered
-    const handler = e => {
-      // check if target corresponds to the selector
-      const target = e ? e.target : window.event.srcElement;
-      const sel = selector.substr(1);
-      let delegate = false;
-
-      if (exclude) {
-        let node = target;
-
-        while (node !== document) {
-          if (node.id === exclude) {
-            return;
-          }
-
-          node = node.parentNode;
-        }
-      }
-
-      // should the event be delegated?
-      if (selector.indexOf('#') === 0) {
-        // ID
-        delegate = target.id === sel;
-      } else if (selector.indexOf('.') === 0) {
-        // class
-        delegate = target.className.indexOf(sel) !== -1;
-      } else if (selector === '*') {
-        // any
-        delegate = true;
-      } else {
-        // tag name
-        delegate = target.nodeName.toLowerCase() === selector;
-      }
-
-      // delegate the event handling
-      if (delegate) {
-        fn(e);
-      }
-    };
-    // save the reference
-    if (store) {
-      this.delegatedEvents.push({
-        handle: handler,
-        elem,
-        fn,
-        evt,
-      });
-    }
-
-    elem.addEventListener(evt, handler, capture);
-  }
-
-  // Simple cross-browser event removing
-  removeEvent(elem, evt, fn, wasDelegated) {
-    if (typeof elem !== 'object') {
-      throw new Error(`addEvent: Expected argument elem of type object, ${typeof elem} given.`);
-    }
-
-    // try to find stored delegated event
-    let stored = null;
-    if (wasDelegated) {
-      for (let i = 0, len = this.delegatedEvents.length; i < len; i += 1) {
-        stored = this.delegatedEvents[i];
-        if (stored.elem === elem && stored.evt === evt && stored.fn === fn) {
-          fn = stored.handle;
-          this.delegatedEvents.splice(i, 1);
-          break;
-        }
-      }
-    }
-
-    // elem.detachEvent(`on${evt}`, fn);
-  }
-
-  // Event registration
-  registerEvents() {
-    // events for splitters
-    /*
-                this.horizSplit.addEventListener(
-                    'mousedown',
-                    e => {
-                        e = e || window.event;
-                        pauseEvent(e);
-                        this.horizResizing = true;
-                    },
-                    false,
-                );
-        */
-
-    const redrawUi = () => {
-      if (this.instanceId !== '#document') {
-        const instance = window.document.querySelector(`#${this.instanceId}`);
-        this.document = instance.getInstanceData();
-      }
-      this.drawDOM(this.document, this.domView.querySelector('.adi-tree-view'), true);
-    };
-
-    // Update UI when something with instances changed
-    document.addEventListener('instance-loaded', redrawUi);
-    // Update UI when some value changes
-    document.addEventListener('value-changed', redrawUi);
-    // Update UI when we're done loading and all repeats are done
-    document.addEventListener('ready', redrawUi);
-
-    document.addEventListener(
-      'mouseup',
-      () => {
-        document.documentElement.style.cursor = 'default';
-        this.vertResizing = false;
-        this.horizResizing = false;
-      },
-      false,
-    );
-
-    document.addEventListener('mousemove', event => this.verticalResize(event), false);
-    document.addEventListener('mousemove', event => this.horizontalResize(event), false);
-    // window resize
-    window.addEventListener('resize', event => this.refreshUI(event), false);
-
-    // keypress events
-    document.addEventListener('keypress', event => this.processKey(event), false);
-
-    // fore action events
-    document.addEventListener('log-active-element', event => this.handleLookup(event), false);
-
-    // Dom view folding handler
-    const handleFolding = e => {
-      const target = e ? e.target : window.event.srcElement;
-      const ul = target.parentNode.querySelector('ul');
-
-      if (ul.getAttribute('data-open') === 'true') {
-        removeClass(target, 'opened');
-        addClass(target, 'closed');
-        ul.setAttribute('data-open', 'false');
-      } else {
-        removeClass(target, 'closed');
-        addClass(target, 'opened');
-        ul.setAttribute('data-open', 'true');
-      }
-    };
-
-    // dom tree view folding
-    this.addEventDelegate(this.domView, 'click', handleFolding, false, '.adi-trigger');
-
-    // active element
-    this.addEventDelegate(
-      this.domView,
-      'click',
-      event => this.handleActive(event),
-      false,
-      '.adi-normal-node',
-    );
-    this.addEventDelegate(
-      this.domView,
-      'click',
-      event => this.handleActive(event),
-      false,
-      '.adi-end-node',
-    );
-
-    // matching tag highlighting
-    this.addEventDelegate(
-      this.domView,
-      'mouseover',
-      e => {
-        const target = e ? e.target : window.event.srcElement;
-        addClass(target.parentNode.querySelector('.adi-normal-node'), 'hover');
-      },
-      false,
-      '.adi-end-node',
-    );
-    this.addEventDelegate(
-      this.domView,
-      'mouseout',
-      e => {
-        const target = e ? e.target : window.event.srcElement;
-        removeClass(target.parentNode.querySelector('.adi-normal-node'), 'hover');
-      },
-      false,
-      '.adi-end-node',
-    );
-
-    // page element highlighting
-    this.addEventDelegate(
-      this.domView,
-      'mouseover',
-      event => this.highlightElement(event),
-      false,
-      '.adi-end-node',
-    );
-    this.addEventDelegate(
-      this.domView,
-      'mouseover',
-      event => this.highlightElement(event),
-      false,
-      '.adi-normal-node',
-    );
-    this.addEventDelegate(
-      this.domView,
-      'mouseout',
-      event => this.highlightElement(event),
-      false,
-      '.adi-end-node',
-    );
-    this.addEventDelegate(
-      this.domView,
-      'mouseout',
-      event => this.highlightElement(event),
-      false,
-      '.adi-normal-node',
-    );
-
-    // element lookup
-    this.menuView
-      .querySelector('.adi-menu-lookup')
-      .addEventListener('click', event => this.handleLookup(event), false);
-
-    document.addEventListener('handle-active', e => {
-      if (e.detail.selected === this.getSelected()) {
-        // We caused this. ignore
-        return;
-      }
-      const { selected } = e.detail;
-      const target = this.sourceNodeByInspectorNodeLookup.get(selected);
-      // make it visible (scroll)
-      if (this.options.makeVisible) {
-        const wrap = this.domView.querySelector('.adi-content');
-        if (target.offsetTop >= wrap.clientHeight || target.offsetTop <= wrap.scrollTop) {
-          wrap.scrollTop = target.offsetTop - Math.floor(wrap.clientHeight / 2);
-        }
-      }
-
-      this.drawAttrs(this.getSelected());
-    });
-
-    document.addEventListener('execute-action', e => this.processExecuteAction(event), {
-      capture: true,
-    });
-
-    // options events
-    this.addEventDelegate(
-      this.optsView,
-      'change',
-      event => this.changeOption(event),
-      false,
-      'input',
-    );
-    this.addEventDelegate(
-      this.optsView,
-      'click',
-      event => this.toggleOptions(event),
-      false,
-      '.adi-opt-close',
-    );
-    this.menuView
-      .querySelector('.adi-menu-config')
-      .addEventListener('click', event => this.toggleOptions(event), false);
-
-    // attributes events
-    if (!this.isInstanceViewer) {
-      this.addEventDelegate(this.attrView, 'change', this.changeAttribute, false, 'input');
-    }
-  }
-}
-
-export default ADI;