var view = view || {}; var grapher = grapher || window.grapher; var python = python || window.python; var markdown = markdown || {}; view.View = class { constructor(host) { this._host = host; this._defaultOptions = { weights: true, attributes: false, names: false, direction: 'vertical', mousewheel: 'scroll' }; this._options = Object.assign({}, this._defaultOptions); this._model = null; this._graphs = []; this._selection = []; this._sidebar = new view.Sidebar(this._host); this._searchText = ''; } async start() { try { //await this._host.view(this); this._element('sidebar-button').addEventListener('click', () => { this.showModelProperties(); }); this._element('zoom-in-button').addEventListener('click', () => { this.zoomIn(); }); this._element('zoom-out-button').addEventListener('click', () => { this.zoomOut(); }); this._element('toolbar-path-back-button').addEventListener('click', () => { this.popGraph(); }); this._element('sidebar').addEventListener('mousewheel', (e) => { if (e.shiftKey || e.ctrlKey) { e.preventDefault(); } }, { passive: true }); this._host.document.addEventListener('keydown', () => { if (this._graph) { this._graph.select(null); } }); this._menu = new view.Menu(this._host); this._menu.add({ accelerator: 'Backspace', execute: () => this.popGraph() }); if (this._host.environment && this._host.environment('menu')) { this._menu.attach(this._element('menu'), this._element('menu-button')); const file = this._menu.group('&File'); file.add({ label: 'Export as &PNG', accelerator: 'CmdOrCtrl+Shift+E', execute: () => this.export(this._host.document.title + '.png'), enabled: () => this.activeGraph }); file.add({ label: 'Export as &SVG', accelerator: 'CmdOrCtrl+Alt+E', execute: () => this.export(this._host.document.title + '.svg'), enabled: () => this.activeGraph }); const edit = this._menu.group('&Edit'); edit.add({ label: '&Find...', accelerator: 'CmdOrCtrl+F', execute: () => this.find(), enabled: () => this.activeGraph }); const view = this._menu.group('&View'); view.add({ label: () => this.options.attributes ? 'Hide &Attributes' : 'Show &Attributes', accelerator: 'CmdOrCtrl+D', execute: () => this.toggle('attributes'), enabled: () => this.activeGraph }); view.add({ label: () => this.options.weights ? 'Hide &Weights' : 'Show &Weights', accelerator: 'CmdOrCtrl+I', execute: () => this.toggle('weights'), enabled: () => this.activeGraph }); view.add({ label: () => this.options.names ? 'Hide &Names' : 'Show &Names', accelerator: 'CmdOrCtrl+U', execute: () => this.toggle('names'), enabled: () => this.activeGraph }); view.add({ label: () => this.options.direction === 'vertical' ? 'Show &Horizontal' : 'Show &Vertical', accelerator: 'CmdOrCtrl+K', execute: () => this.toggle('direction'), enabled: () => this.activeGraph }); view.add({ label: () => this.options.mousewheel === 'scroll' ? '&Mouse Wheel: Zoom' : '&Mouse Wheel: Scroll', accelerator: 'CmdOrCtrl+M', execute: () => this.toggle('mousewheel'), enabled: () => this.activeGraph }); view.add({}); view.add({ label: 'Zoom &In', accelerator: 'Shift+Up', execute: () => this.zoomIn(), enabled: () => this.activeGraph }); view.add({ label: 'Zoom &Out', accelerator: 'Shift+Down', execute: () => this.zoomOut(), enabled: () => this.activeGraph }); view.add({ label: 'Actual &Size', accelerator: 'Shift+Backspace', execute: () => this.resetZoom(), enabled: () => this.activeGraph }); view.add({}); view.add({ label: '&Properties...', accelerator: 'CmdOrCtrl+Enter', execute: () => this.showModelProperties(), enabled: () => this.activeGraph }); } //await this._host.start(); } catch (err) { this.error(err, null, null); } } show(page) { if (!page) { page = (!this._model && !this.activeGraph) ? 'welcome' : 'default'; } // this._host.event('screen_view', { // screen_name: page, // }); if (this._sidebar) { this._sidebar.close(); } if (this._menu) { this._menu.close(); } this._host.document.body.classList.remove(...Array.from(this._host.document.body.classList).filter((_) => _ !== 'active')); this._host.document.body.classList.add(...page.split(' ')); if (page === 'default') { this._activate(); } else { this._deactivate(); } this._page = page; } progress(percent) { const bar = this._element('progress-bar'); if (bar) { bar.style.width = percent.toString() + '%'; } } cut() { this._host.document.execCommand('cut'); } copy() { this._host.document.execCommand('copy'); } paste() { this._host.document.execCommand('paste'); } selectAll() { this._host.document.execCommand('selectall'); } find() { if (this._graph) { this._graph.select(null); const content = new view.FindSidebar(this._host, this.activeGraph); content.on('search-text-changed', (sender, text) => { this._searchText = text; }); content.on('select', (sender, selection) => { this.scrollTo(this._graph.select([selection])); }); content.on('focus', (sender, selection) => { this._graph.focus([selection]); }); content.on('blur', (sender, selection) => { this._graph.blur([selection]); }); this._sidebar.open(content.render(), 'Find'); content.focus(this._searchText); } } get model() { return this._model; } get options() { return this._options; } toggle(name) { switch (name) { case 'names': case 'attributes': case 'weights': this._options[name] = !this._options[name]; this._reload(); break; case 'direction': this._options.direction = this._options.direction === 'vertical' ? 'horizontal' : 'vertical'; this._reload(); break; case 'mousewheel': this._options.mousewheel = this._options.mousewheel === 'scroll' ? 'zoom' : 'scroll'; break; default: throw new view.Error("Unsupported toogle '" + name + "'."); } } _reload() { this.show('welcome spinner'); if (this._model && this._graphs.length > 0) { this._updateGraph(this._model, this._graphs).catch((error) => { if (error) { this.error(error, 'Graph update failed.', 'welcome'); } }); } } _timeout(delay) { return new Promise((resolve) => { setTimeout(resolve, delay); }); } _element(id) { return this._host.document.getElementById(id); } zoomIn() { this._updateZoom(this._zoom * 1.1); } zoomOut() { this._updateZoom(this._zoom * 0.9); } resetZoom() { this._updateZoom(1); } _activate() { if (!this._events) { this._events = {}; this._events.scroll = (e) => this._scrollHandler(e); this._events.wheel = (e) => this._wheelHandler(e); this._events.pointerdown = (e) => this._pointerDownHandler(e); } const graph = this._element('graph'); graph.focus(); graph.addEventListener('scroll', this._events.scroll); graph.addEventListener('wheel', this._events.wheel, { passive: false }); graph.addEventListener('pointerdown', this._events.pointerdown); } _deactivate() { if (this._events) { const graph = this._element('graph'); graph.removeEventListener('scroll', this._events.scroll); graph.removeEventListener('wheel', this._events.wheel); graph.removeEventListener('pointerdown', this._events.pointerdown); } } _updateZoom(zoom, e) { const container = this._element('graph'); const canvas = this._element('canvas'); const limit = this._options.direction === 'vertical' ? container.clientHeight / this._height : container.clientWidth / this._width; const min = Math.min(Math.max(limit, 0.15), 1); zoom = Math.max(min, Math.min(zoom, 1.4)); const scrollLeft = this._scrollLeft || container.scrollLeft; const scrollTop = this._scrollTop || container.scrollTop; const x = (e ? e.pageX : (container.clientWidth / 2)) + scrollLeft; const y = (e ? e.pageY : (container.clientHeight / 2)) + scrollTop; const width = zoom * this._width; const height = zoom * this._height; canvas.style.width = width + 'px'; canvas.style.height = height + 'px'; this._scrollLeft = Math.max(0, ((x * zoom) / this._zoom) - (x - scrollLeft)); this._scrollTop = Math.max(0, ((y * zoom) / this._zoom) - (y - scrollTop)); container.scrollLeft = this._scrollLeft; container.scrollTop = this._scrollTop; this._zoom = zoom; } _pointerDownHandler(e) { if (e.pointerType !== 'touch' && e.buttons === 1) { e.target.setPointerCapture(e.pointerId); const document = this._host.document.documentElement; const container = this._element('graph'); this._mousePosition = { left: container.scrollLeft, top: container.scrollTop, x: e.clientX, y: e.clientY }; container.style.cursor = 'grabbing'; e.stopImmediatePropagation(); const pointerMoveHandler = (e) => { e.preventDefault(); e.stopImmediatePropagation(); if (this._mousePosition) { const dx = e.clientX - this._mousePosition.x; const dy = e.clientY - this._mousePosition.y; this._mousePosition.moved = dx * dx + dy * dy > 0; if (this._mousePosition.moved) { const container = this._element('graph'); container.scrollTop = this._mousePosition.top - dy; container.scrollLeft = this._mousePosition.left - dx; } } }; const clickHandler = (e) => { e.stopPropagation(); document.removeEventListener('click', clickHandler, true); }; const pointerUpHandler = (e) => { e.target.releasePointerCapture(e.pointerId); container.style.removeProperty('cursor'); container.removeEventListener('pointerup', pointerUpHandler); container.removeEventListener('pointerleave', pointerUpHandler); container.removeEventListener('pointermove', pointerMoveHandler); if (this._mousePosition && this._mousePosition.moved) { e.preventDefault(); e.stopImmediatePropagation(); delete this._mousePosition; document.addEventListener('click', clickHandler, true); } }; container.addEventListener('pointermove', pointerMoveHandler); container.addEventListener('pointerup', pointerUpHandler); container.addEventListener('pointerleave', pointerUpHandler); } } _scrollHandler(e) { if (this._scrollLeft && e.target.scrollLeft !== Math.floor(this._scrollLeft)) { delete this._scrollLeft; } if (this._scrollTop && e.target.scrollTop !== Math.floor(this._scrollTop)) { delete this._scrollTop; } } _wheelHandler(e) { if (e.shiftKey || e.ctrlKey || this._options.mousewheel === 'zoom') { const delta = -e.deltaY * (e.deltaMode === 1 ? 0.05 : e.deltaMode ? 1 : 0.002) * (e.ctrlKey ? 10 : 1); this._updateZoom(this._zoom * Math.pow(2, delta), e); e.preventDefault(); } } scrollTo(selection) { if (selection && selection.length > 0) { const container = this._element('graph'); let x = 0; let y = 0; for (const element of selection) { const rect = element.getBoundingClientRect(); x += rect.left + (rect.width / 2); y += rect.top + (rect.height / 2); } x = x / selection.length; y = y / selection.length; const rect = container.getBoundingClientRect(); const left = (container.scrollLeft + x - rect.left) - (rect.width / 2); const top = (container.scrollTop + y - rect.top) - (rect.height / 2); container.scrollTo({ left: left, top: top, behavior: 'smooth' }); } } async error(err, name, screen) { if (this._sidebar) { this._sidebar.close(); } window.console.error(err,name); this.show(screen !== undefined ? screen : 'welcome'); } /** * entry * @param {onnx.Model} model * @param {string} model name * @returns */ async open(model, modelName) { this.show('welcome spinner'); this._sidebar.close(); try { const graphs = Array.isArray(model.graphs) && model.graphs.length > 0 ? [model.graphs[0]] : []; await this._updateGraph(model, graphs); this._host.document.title = modelName; } catch (error) { throw error; } } async _updateActiveGraph(graph) { this._sidebar.close(); if (this._model) { const model = this._model; this.show('welcome spinner'); await this._timeout(200); try { await this._updateGraph(model, [graph]); } catch (error) { if (error) { this.error(error, 'Graph update failed.', 'welcome'); } } } } get activeGraph() { return Array.isArray(this._graphs) && this._graphs.length > 0 ? this._graphs[0] : null; } async _updateGraph(model, graphs) { await this._timeout(100); const update = async (model, graphs) => { this._model = model; this._graphs = graphs; await this.renderGraph(this._model, this.activeGraph, this._options); if (this._page !== 'default') { this.show('default'); } const path = this._element('toolbar-path'); const back = this._element('toolbar-path-back-button'); while (path.children.length > 1) { path.removeChild(path.lastElementChild); } if (this._graphs.length <= 1) { back.style.opacity = 0; } else { back.style.opacity = 1; const last = this._graphs.length - 2; const count = Math.min(2, last); if (count < last) { const element = this._host.document.createElement('button'); element.setAttribute('class', 'toolbar-path-name-button'); element.innerHTML = '…'; path.appendChild(element); } for (let i = count; i >= 0; i--) { const graph = this._graphs[i]; const element = this._host.document.createElement('button'); element.setAttribute('class', 'toolbar-path-name-button'); element.addEventListener('click', () => { if (i > 0) { this._graphs = this._graphs.slice(i); this._updateGraph(this._model, this._graphs); } this.showDefinition(this._graphs[0]); }); const name = graph && graph.name ? graph.name : ''; if (name.length > 24) { element.setAttribute('title', name); element.innerHTML = '…' + name.substring(name.length - 24, name.length); } else { element.removeAttribute('title'); element.innerHTML = name; } path.appendChild(element); } } }; const lastModel = this._model; const lastGraphs = this._graphs; try { await update(model, graphs); return this._model; } catch (error) { await update(lastModel, lastGraphs); throw error; } } pushGraph(graph) { if (graph && graph !== this.activeGraph && Array.isArray(graph.nodes)) { this._sidebar.close(); this._updateGraph(this._model, [graph].concat(this._graphs)); } } popGraph() { if (this._graphs.length > 1) { this._sidebar.close(); return this._updateGraph(this._model, this._graphs.slice(1)); } return null; } async renderGraph(model, graph, options) { this._graph = null; const canvas = this._element('canvas'); while (canvas.lastChild) { canvas.removeChild(canvas.lastChild); } if (!graph) { return; } this._zoom = 1; const groups = graph.groups; const nodes = graph.nodes; // this._host.event('graph_view', { // graph_node_count: nodes.length, // graph_skip: 0 // }); const layout = {}; layout.nodesep = 20; layout.ranksep = 20; const rotate = graph.nodes.every((node) => node.inputs.filter((input) => input.value.every((argument) => !argument.initializer)).length === 0 && node.outputs.length === 0); const horizontal = rotate ? options.direction === 'vertical' : options.direction !== 'vertical'; if (horizontal) { layout.rankdir = "LR"; } if (nodes.length > 3000) { layout.ranker = 'longest-path'; } const viewGraph = new view.Graph(this, model, options, groups, layout); viewGraph.add(graph); // Workaround for Safari background drag/zoom issue: // https://stackoverflow.com/questions/40887193/d3-js-zoom-is-not-working-with-mousewheel-in-safari const background = this._host.document.createElementNS('http://www.w3.org/2000/svg', 'rect'); background.setAttribute('id', 'background'); background.setAttribute('fill', 'none'); background.setAttribute('pointer-events', 'all'); canvas.appendChild(background); const origin = this._host.document.createElementNS('http://www.w3.org/2000/svg', 'g'); origin.setAttribute('id', 'origin'); canvas.appendChild(origin); viewGraph.build(this._host.document, origin); await this._timeout(20); viewGraph.measure(); viewGraph.layout(); viewGraph.update(); const elements = Array.from(canvas.getElementsByClassName('graph-input') || []); if (elements.length === 0) { const nodeElements = Array.from(canvas.getElementsByClassName('graph-node') || []); if (nodeElements.length > 0) { elements.push(nodeElements[0]); } } const size = canvas.getBBox(); const margin = 100; const width = Math.ceil(margin + size.width + margin); const height = Math.ceil(margin + size.height + margin); origin.setAttribute('transform', 'translate(' + margin.toString() + ', ' + margin.toString() + ') scale(1)'); background.setAttribute('width', width); background.setAttribute('height', height); this._width = width; this._height = height; delete this._scrollLeft; delete this._scrollRight; canvas.setAttribute('viewBox', '0 0 ' + width + ' ' + height); canvas.setAttribute('width', width); canvas.setAttribute('height', height); this._zoom = 1; this._updateZoom(this._zoom); const container = this._element('graph'); if (elements && elements.length > 0) { // Center view based on input elements const xs = []; const ys = []; for (let i = 0; i < elements.length; i++) { const element = elements[i]; const rect = element.getBoundingClientRect(); xs.push(rect.left + (rect.width / 2)); ys.push(rect.top + (rect.height / 2)); } let [x] = xs; const [y] = ys; if (ys.every((y) => y === ys[0])) { x = xs.reduce((a, b) => a + b, 0) / xs.length; } const graphRect = container.getBoundingClientRect(); const left = (container.scrollLeft + x - graphRect.left) - (graphRect.width / 2); const top = (container.scrollTop + y - graphRect.top) - (graphRect.height / 2); container.scrollTo({ left: left, top: top, behavior: 'auto' }); } else { const canvasRect = canvas.getBoundingClientRect(); const graphRect = container.getBoundingClientRect(); const left = (container.scrollLeft + (canvasRect.width / 2) - graphRect.left) - (graphRect.width / 2); const top = (container.scrollTop + (canvasRect.height / 2) - graphRect.top) - (graphRect.height / 2); container.scrollTo({ left: left, top: top, behavior: 'auto' }); } this._graph = viewGraph; } applyStyleSheet(element, name) { let rules = []; for (const styleSheet of this._host.document.styleSheets) { if (styleSheet && styleSheet.href && styleSheet.href.endsWith('/' + name)) { rules = styleSheet.cssRules; break; } } const nodes = element.getElementsByTagName('*'); for (const node of nodes) { for (const rule of rules) { if (node.matches(rule.selectorText)) { for (const item of rule.style) { node.style[item] = rule.style[item]; } } } } } export(file) { const lastIndex = file.lastIndexOf('.'); const extension = (lastIndex != -1) ? file.substring(lastIndex + 1).toLowerCase() : 'png'; if (this.activeGraph && (extension === 'png' || extension === 'svg')) { const canvas = this._element('canvas'); const clone = canvas.cloneNode(true); this.applyStyleSheet(clone, 'grapher.css'); clone.setAttribute('id', 'export'); clone.removeAttribute('viewBox'); clone.removeAttribute('width'); clone.removeAttribute('height'); clone.style.removeProperty('opacity'); clone.style.removeProperty('display'); clone.style.removeProperty('width'); clone.style.removeProperty('height'); const background = clone.querySelector('#background'); const origin = clone.querySelector('#origin'); origin.setAttribute('transform', 'translate(0,0) scale(1)'); background.removeAttribute('width'); background.removeAttribute('height'); const parent = canvas.parentElement; parent.insertBefore(clone, canvas); const size = clone.getBBox(); parent.removeChild(clone); parent.removeChild(canvas); parent.appendChild(canvas); const delta = (Math.min(size.width, size.height) / 2.0) * 0.1; const width = Math.ceil(delta + size.width + delta); const height = Math.ceil(delta + size.height + delta); origin.setAttribute('transform', 'translate(' + (delta - size.x).toString() + ', ' + (delta - size.y).toString() + ') scale(1)'); clone.setAttribute('width', width); clone.setAttribute('height', height); background.setAttribute('width', width); background.setAttribute('height', height); background.setAttribute('fill', '#fff'); const data = new XMLSerializer().serializeToString(clone); if (extension === 'svg') { const blob = new Blob([data], { type: 'image/svg' }); this._host.export(file, blob); } if (extension === 'png') { const image = new Image(); image.onload = () => { const max = Math.max(width, height); const scale = Math.min(24000.0 / max, 2.0); const canvas = this._host.document.createElement('canvas'); canvas.width = Math.ceil(width * scale); canvas.height = Math.ceil(height * scale); const context = canvas.getContext('2d'); context.scale(scale, scale); context.drawImage(image, 0, 0); canvas.toBlob((blob) => { if (blob) { this._host.export(file, blob); } else { const error = new Error('Image may be too large to render as PNG.'); error.name = 'Error exporting image.'; this._host.exception(error, false); this._host.error(error.name, error.message); } }, 'image/png'); }; image.src = 'data:image/svg+xml;base64,' + this._host.window.btoa(unescape(encodeURIComponent(data))); } } } showModelProperties() { if (this._model) { try { const modelSidebar = new view.ModelSidebar(this._host, this._model, this.activeGraph); modelSidebar.on('update-active-graph', (sender, graph) => { this._updateActiveGraph(graph); }); const content = modelSidebar.render(); this._sidebar.open(content, 'Model Properties'); } catch (error) { if (error) { error.context = this._model.identifier; } this.error(error, 'Error showing model properties.', null); } } } showNodeProperties(node) { if (node) { try { if (this._menu) { this._menu.close(); } const nodeSidebar = new view.NodeSidebar(this._host, node); nodeSidebar.on('show-documentation', (/* sender, e */) => { this.showDefinition(node.type); }); nodeSidebar.on('export-tensor', (sender, tensor) => { const defaultPath = tensor.name ? tensor.name.split('/').join('_').split(':').join('_').split('.').join('_') : 'tensor'; this._host.save('NumPy Array', 'npy', defaultPath, (file) => { try { let data_type = tensor.type.dataType; if (data_type === 'boolean') { data_type = 'bool'; } const execution = new python.Execution(); const bytes = execution.invoke('io.BytesIO', []); const dtype = execution.invoke('numpy.dtype', [data_type]); const array = execution.invoke('numpy.asarray', [tensor.value, dtype]); execution.invoke('numpy.save', [bytes, array]); bytes.seek(0); const blob = new Blob([bytes.read()], { type: 'application/octet-stream' }); this._host.export(file, blob); } catch (error) { this.error(error, 'Error saving NumPy tensor.', null); } }); }); nodeSidebar.on('error', (sender, error) => { if (this._model) { error.context = this._model.identifier; } this.error(error, null, null); }); nodeSidebar.on('activate', (sender, value) => { this._graph.select([value]); }); nodeSidebar.on('deactivate', () => { this._graph.select(null); }); nodeSidebar.on('select', (sender, value) => { this.scrollTo(this._graph.activate(value)); }); this._sidebar.open(nodeSidebar.render(), 'Node Properties'); } catch (error) { if (error) { error.context = this._model.identifier; } this.error(error, 'Error showing node properties.', null); } } } showConnectionProperties(value, from, to) { try { if (this._menu) { this._menu.close(); } const connectionSidebar = new view.ConnectionSidebar(this._host, value, from, to); connectionSidebar.on('activate', (sender, value) => { this._graph.select([value]); }); connectionSidebar.on('deactivate', () => { this._graph.select(null); }); connectionSidebar.on('select', (sender, value) => { this.scrollTo(this._graph.activate(value)); }); connectionSidebar.on('error', (sender, error) => { if (this._model) { error.context = this._model.identifier; } this.error(error, null, null); }); this._sidebar.open(connectionSidebar.render(), 'Connection Properties'); } catch (error) { if (error) { error.context = this._model.identifier; } this.error(error, 'Error showing connection properties.', null); } } showDefinition(type) { if (type && (type.description || type.inputs || type.outputs || type.attributes)) { if (type.nodes && type.nodes.length > 0) { this.pushGraph(type); } const documentationSidebar = new view.DocumentationSidebar(this._host, type); const title = type.type === 'function' ? 'Function' : 'Documentation'; this._sidebar.push(documentationSidebar.render(), title); } } }; view.Menu = class { constructor(host) { this.items = []; this._darwin = false; this._document = host.document; this._stack = []; this._root = []; this._buttons = []; this._accelerators = new Map(); this._keyCodes = new Map([ ['Backspace', 0x08], ['Enter', 0x0D], ['Escape', 0x1B], ['Left', 0x25], ['Up', 0x26], ['Right', 0x27], ['Down', 0x28], ['F5', 0x74], ['F11', 0x7a] ]); this._symbols = new Map([ ['Backspace', '⌫'], ['Enter', '⏎'], ['Up', '↑'], ['Down', '↓'], ]); this._keydown = (e) => { this._alt = false; const code = e.keyCode | (e.altKey ? 0x0200 : 0) | (e.shiftKey ? 0x0100 : 0); const modifier = (e.ctrlKey ? 0x0400 : 0) | (e.metaKey ? 0x0800 : 0); if ((code | modifier) === 0x0212) { // Alt this._alt = true; } else { const action = this._accelerators.get(code | modifier) || this._accelerators.get(code | ((e.ctrlKey && !this._darwin) || (e.metaKey && this._darwin) ? 0x1000 : 0)); if (action && this._execute(action)) { e.preventDefault(); } else { const item = this._mnemonic(code | modifier); if (item && this._activate(item)) { e.preventDefault(); } } } }; this._keyup = (e) => { const code = e.keyCode; if (code === 0x0012 && this._alt) { // Alt switch (this._stack.length) { case 0: { if (this.open()) { e.preventDefault(); } break; } case 1: { if (this.close()) { e.preventDefault(); } break; } default: { this._stack = [this]; if (this._root.length > 1) { this._root = [this]; this._rebuild(); } this._update(); e.preventDefault(); break; } } } this._alt = false; }; this._next = () => { const button = this._element.ownerDocument.activeElement; const index = this._buttons.indexOf(button); if (index !== -1 && index < this._buttons.length - 1) { const next = this._buttons[index + 1]; next.focus(); } }; this._previous = () => { const button = this._element.ownerDocument.activeElement; const index = this._buttons.indexOf(button); if (index > 0) { const next = this._buttons[index - 1]; next.focus(); } }; this._push = () => { const button = this._element.ownerDocument.activeElement; if (button && button.getAttribute('data-type') === 'group') { button.click(); } }; this._pop = () => { if (this._stack.length > 1) { this._deactivate(); } }; this._exit = () => { this._deactivate(); if (this._stack.length === 0) { this.close(); } }; host.window.addEventListener('keydown', this._keydown); host.window.addEventListener('keyup', this._keyup); } attach(element, button) { this._element = element; button.addEventListener('click', (e) => { this.toggle(); e.preventDefault(); }); } add(value) { const item = new view.Menu.Command(value); this.register(item, item.accelerator); } group(label) { const item = new view.Menu.Group(this, label); item.identifier = 'menu-item-' + this.items.length.toString(); this.items.push(item); item.shortcut = this.register(item.accelerator); return item; } toggle() { if (this._element.style.opacity >= 1) { this.close(); } else { this._root = [this]; this._stack = [this]; this.open(); } } open() { if (this._element) { if (this._stack.length === 0) { this.toggle(); this._stack = [this]; } this._rebuild(); this._update(); this.register(this._exit, 'Escape'); this.register(this._previous, 'Up'); this.register(this._next, 'Down'); this.register(this._pop, 'Left'); this.register(this._push, 'Right'); } } close() { if (this._element) { this.unregister(this._exit); this.unregister(this._previous); this.unregister(this._next); this.unregister(this._pop); this.unregister(this._push); this._element.style.opacity = 0; this._element.style.left = '-17em'; const button = this._element.ownerDocument.activeElement; if (this._buttons.indexOf(button) > 0) { button.blur(); } while (this._root.length > 1) { this._deactivate(); } this._stack = []; } } register(action, accelerator) { let shortcut = ''; if (accelerator) { let shift = false; let alt = false; let ctrl = false; let cmd = false; let cmdOrCtrl = false; let key = ''; for (const part of accelerator.split('+')) { switch (part) { case 'CmdOrCtrl': cmdOrCtrl = true; break; case 'Cmd': cmd = true; break; case 'Ctrl': ctrl = true; break; case 'Alt': alt = true; break; case 'Shift': shift = true; break; default: key = part; break; } } if (key !== '') { if (this._darwin) { shortcut += ctrl ? '⌃' : ''; shortcut += alt ? '⌥' : ''; shortcut += shift ? '⇧' : ''; shortcut += cmdOrCtrl || cmd ? '⌘' : ''; shortcut += this._symbols.has(key) ? this._symbols.get(key) : key; } else { shortcut += cmdOrCtrl || ctrl ? 'Ctrl+' : ''; shortcut += alt ? 'Alt+' : ''; shortcut += shift ? 'Shift+' : ''; shortcut += key; } let code = (cmdOrCtrl ? 0x1000 : 0) | (cmd ? 0x0800 : 0) | (ctrl ? 0x0400 : 0) | (alt ? 0x0200 : 0 | shift ? 0x0100 : 0); code |= this._keyCodes.has(key) ? this._keyCodes.get(key) : key.charCodeAt(0); this._accelerators.set(code, action); } } return shortcut; } unregister(action) { this._accelerators = new Map(Array.from(this._accelerators.entries()).filter(([, value]) => value !== action)); } _execute(action) { if (typeof action === 'function') { action(); return true; } switch (action ? action.type : null) { case 'group': { while (this._stack.length > this._root.length) { this._stack.pop(); } this._root.push({ items: [action] }); this._stack.push(action); this._rebuild(); this._update(); return true; } case 'command': { this.close(); setTimeout(() => action.execute(), 10); return true; } default: { return false; } } } _mnemonic(code) { const key = /[a-zA-Z0-9]/.test(String.fromCharCode(code & 0x00FF)); const modifier = (code & 0xFF00) !== 0; const alt = (code & 0xFF00) === 0x0200; if (alt && key) { this.open(); } if (this._stack.length > 0 && key && (alt || !modifier)) { const key = String.fromCharCode(code & 0x00FF); const group = this._stack.length > 0 ? this._stack[this._stack.length - 1] : this; const item = group.items.find((item) => key === item.mnemonic && (item.type === 'group' || item.type === 'command') && item.enabled); if (item) { return item; } } return null; } _activate(item) { switch (item ? item.type : null) { case 'group': { this._stack.push(item); this._rebuild(); this._update(); return true; } case 'command': { return this._execute(item); } default: { return false; } } } _deactivate() { if (this._root.length > 1) { this._root.pop(); const group = this._stack.pop(); this._rebuild(); this._update(); if (group) { const button = this._buttons.find((button) => button.getAttribute('id') === group.identifier); if (button) { button.focus(); } } } else if (this._stack.length > 0) { this._stack.pop(); this._update(); } } _label(item, mnemonic) { delete item.mnemonic; const value = item.label; if (value) { const index = value.indexOf('&'); if (index !== -1) { if (mnemonic) { item.mnemonic = value[index + 1].toUpperCase(); return value.substring(0, index) + '' + value[index + 1] + '' + value.substring(index + 2); } return value.substring(0, index) + value.substring(index + 1); } } return value || ''; } _rebuild() { this._element.innerHTML = ''; const root = this._root[this._root.length - 1]; for (const group of root.items) { const container = this._document.createElement('div'); container.setAttribute('id', group.identifier); container.setAttribute('class', 'menu-group'); container.innerHTML = "
"; for (const item of group.items) { switch (item.type) { case 'group': case 'command': { const button = this._document.createElement('button'); button.setAttribute('class', 'menu-command'); button.setAttribute('id', item.identifier); button.setAttribute('data-type', item.type); button.addEventListener('mouseenter', () => button.focus()); button.addEventListener('click', () => this._execute(item)); const accelerator = this._document.createElement('span'); accelerator.setAttribute('class', 'menu-shortcut'); if (item.type === 'group') { accelerator.innerHTML = '❯'; } else if (item.shortcut) { accelerator.innerHTML = item.shortcut; } button.appendChild(accelerator); const content = this._document.createElement('span'); content.setAttribute('class', 'menu-label'); button.appendChild(content); container.appendChild(button); break; } case 'separator': { const element = this._document.createElement('div'); element.setAttribute('class', 'menu-separator'); element.setAttribute('id', item.identifier); container.appendChild(element); break; } default: { break; } } } this._element.appendChild(container); } this._element.style.opacity = 1.0; this._element.style.left = '0px'; if (this._root.length > 1) { this._element.style.width = 'auto'; this._element.style.maxWidth = '60%'; } else { this._element.style.removeProperty('width'); this._element.style.maxWidth = 'auto'; } } _update() { this._buttons = []; const selected = this._stack.length > 0 ? this._stack[this._stack.length - 1] : null; const root = this._root[this._root.length - 1]; for (const group of root.items) { let visible = false; let block = false; const active = this._stack.length <= 1 || this._stack[1] === group; const container = this._document.getElementById(group.identifier); container.childNodes[0].innerHTML = this._label(group, this === selected); for (const item of group.items) { switch (item.type) { case 'group': case 'command': { const label = this._label(item, group === selected); const button = this._document.getElementById(item.identifier); button.childNodes[1].innerHTML = label; if (item.enabled) { button.removeAttribute('disabled'); button.style.display = 'block'; visible = true; block = true; if (active) { this._buttons.push(button); } } else { button.setAttribute('disabled', ''); button.style.display = 'none'; } break; } case 'separator': { const element = this._document.getElementById(item.identifier); element.style.display = block ? 'block' : 'none'; block = false; break; } default: { break; } } } for (let i = group.items.length - 1; i >= 0; i--) { const item = group.items[i]; if ((item.type === 'group' || item.type === 'command') && item.enabled) { break; } else if (item.type === 'separator') { const element = this._document.getElementById(item.identifier); element.style.display = 'none'; } } if (!visible) { container.style.display = 'none'; } container.style.opacity = active ? 1 : 0; } const button = this._element.ownerDocument.activeElement; const index = this._buttons.indexOf(button); if (index === -1 && this._buttons.length > 0) { this._buttons[0].focus(); } } }; view.Menu.Group = class { constructor(parent, label) { this.type = 'group'; this.parent = parent; this.label = label; this.items = []; } get enabled() { return this.items.some((item) => item.enabled); } add(value) { const item = Object.keys(value).length > 0 ? new view.Menu.Command(value) : new view.Menu.Separator(); item.identifier = this.identifier + '-' + this.items.length.toString(); this.items.push(item); item.shortcut = this.parent.register(item, item.accelerator); } group(label) { const item = new view.Menu.Group(this, label); item.identifier = this.identifier + '-' + this.items.length.toString(); this.items.push(item); item.shortcut = this.parent.register(item, item.accelerator); return item; } clear() { for (const item of this.items) { if (item.clear) { item.clear(); } this.parent.unregister(item); } this.items = []; } register(item, accelerator) { return this.parent.register(item, accelerator); } unregister(item) { this.parent.unregister(item); } }; view.Menu.Command = class { constructor(item) { this.type = 'command'; this.accelerator = item.accelerator; this._label = item.label; this._enabled = item.enabled; this._execute = item.execute; } get label() { return typeof this._label === 'function' ? this._label() : this._label; } get enabled() { return this._enabled ? this._enabled() : true; } execute() { if (this._execute && this.enabled) { this._execute(); } } }; view.Menu.Separator = class { constructor() { this.type = 'separator'; this.enabled = false; } }; view.Graph = class extends grapher.Graph { constructor(view, model, options, compound, layout) { super(compound, layout); this.view = view; this.model = model; this.options = options; this._nodeKey = 0; this._values = new Map(); this._table = new Map(); this._selection = new Set(); } createNode(node, type) { if (type) { const value = new view.Node(this, { type: type }); value.name = (this._nodeKey++).toString(); this._table.set(type, value); return value; } const value = new view.Node(this, node); value.name = (this._nodeKey++).toString(); this._table.set(node, value); return value; } createInput(input) { const value = new view.Input(this, input); value.name = (this._nodeKey++).toString(); this._table.set(input, value); return value; } createOutput(output) { const value = new view.Output(this, output); value.name = (this._nodeKey++).toString(); this._table.set(output, value); return value; } createValue(argument) { const name = argument.name; if (!this._values.has(name)) { const value = new view.Value(this, argument); this._values.set(name, value); this._table.set(argument, value); } else { // duplicate argument name const value = this._values.get(name); this._table.set(argument, value); } return this._values.get(name); } add(graph) { const clusters = new Set(); const clusterParentMap = new Map(); const groups = graph.groups; if (groups) { for (const node of graph.nodes) { if (node.group) { const path = node.group.split('/'); while (path.length > 0) { const name = path.join('/'); path.pop(); clusterParentMap.set(name, path.join('/')); } } } } for (const input of graph.inputs) { const viewInput = this.createInput(input); this.setNode(viewInput); for (const value of input.value) { this.createValue(value).from = viewInput; } } for (const node of graph.nodes) { const viewNode = this.createNode(node); this.setNode(viewNode); const inputs = node.inputs; for (const input of inputs) { for (const value of input.value) { if (value.name != '' && !value.initializer) { this.createValue(value).to.push(viewNode); } } } let outputs = node.outputs; if (node.chain && node.chain.length > 0) { const chainOutputs = node.chain[node.chain.length - 1].outputs; if (chainOutputs.length > 0) { outputs = chainOutputs; } } for (const output of outputs) { for (const value of output.value) { if (!value) { const error = new view.Error('Invalid null argument.'); error.context = this.model.identifier; throw error; } if (value.name != '') { this.createValue(value).from = viewNode; } } } if (node.controlDependencies && node.controlDependencies.length > 0) { for (const value of node.controlDependencies) { this.createValue(value).controlDependency(viewNode); } } const createCluster = (name) => { if (!clusters.has(name)) { this.setNode({ name: name, rx: 5, ry: 5 }); clusters.add(name); const parent = clusterParentMap.get(name); if (parent) { createCluster(parent); this.setParent(name, parent); } } }; if (groups) { let groupName = node.group; if (groupName && groupName.length > 0) { if (!clusterParentMap.has(groupName)) { const lastIndex = groupName.lastIndexOf('/'); if (lastIndex != -1) { groupName = groupName.substring(0, lastIndex); if (!clusterParentMap.has(groupName)) { groupName = null; } } else { groupName = null; } } if (groupName) { createCluster(groupName + '\ngroup'); this.setParent(viewNode.name, groupName + '\ngroup'); } } } } for (const output of graph.outputs) { const viewOutput = this.createOutput(output); this.setNode(viewOutput); for (const value of output.value) { this.createValue(value).to.push(viewOutput); } } } build(document, origin) { for (const value of this._values.values()) { value.build(); } super.build(document, origin); } select(selection) { if (this._selection.size > 0) { for (const element of this._selection) { element.deselect(); } this._selection.clear(); } if (selection) { let array = []; for (const value of selection) { if (this._table.has(value)) { const element = this._table.get(value); array = array.concat(element.select()); this._selection.add(element); } } return array; } return null; } activate(value) { if (this._table.has(value)) { this.select(null); const element = this._table.get(value); element.activate(); return this.select([value]); } return []; } focus(selection) { for (const value of selection) { const element = this._table.get(value); if (element && !this._selection.has(element)) { element.select(); } } } blur(selection) { for (const value of selection) { const element = this._table.get(value); if (element && !this._selection.has(element)) { element.deselect(); } } } }; view.Node = class extends grapher.Node { constructor(context, value) { super(); this.context = context; this.value = value; view.Node.counter = view.Node.counter || 0; this.id = 'node-' + (value.name ? 'name-' + value.name : 'id-' + (view.Node.counter++).toString()); this._add(this.value); } get class() { return 'graph-node'; } get inputs() { return this.value.inputs; } get outputs() { return this.value.outputs; } _add(node) { const options = this.context.options; const header = this.header(); const styles = ['node-item-type']; const type = node.type; const category = type && type.category ? type.category : ''; if (category) { styles.push('node-item-type-' + category.toLowerCase()); } if (typeof type.name !== 'string' || !type.name.split) { // #416 const error = new view.Error("Unsupported node type '" + JSON.stringify(type.name) + "'."); if (this.context.model && this.context.model.identifier) { error.context = this.context.model.identifier; } throw error; } const content = options.names && (node.name || node.location) ? (node.name || node.location) : type.name.split('.').pop(); const tooltip = options.names && (node.name || node.location) ? type.name : (node.name || node.location); const title = header.add(null, styles, content, tooltip); title.on('click', () => { this.context.activate(node); }); if (Array.isArray(node.type.nodes) && node.type.nodes.length > 0) { const definition = header.add(null, styles, '\u0192', 'Show Function Definition'); definition.on('click', () => this.context.view.pushGraph(node.type)); } if (Array.isArray(node.nodes)) { // this._expand = header.add(null, styles, '+', null); // this._expand.on('click', () => this.toggle()); } const initializers = []; let hiddenInitializers = false; if (options.weights) { if (Array.isArray(node.inputs)) { for (const input of node.inputs) { if (input.visible !== false && input.value.length === 1 && input.value[0].initializer != null) { initializers.push(input); } if ((input.visible === false || input.value.length > 1) && input.value.some((argument) => argument.initializer != null)) { hiddenInitializers = true; } } } } const objects = []; const attributes = []; if (Array.isArray(node.attributes) && node.attributes.length > 0) { for (const attribute of node.attributes) { switch (attribute.type) { case 'graph': case 'object': case 'object[]': case 'function': case 'function[]': { objects.push(attribute); break; } default: { if (options.attributes && attribute.visible !== false) { attributes.push(attribute); } } } } attributes.sort((a, b) => a.name.toUpperCase().localeCompare(b.name.toUpperCase())); } if (initializers.length > 0 || hiddenInitializers || attributes.length > 0 || objects.length > 0) { const list = this.list(); list.on('click', () => this.context.activate(node)); for (const argument of initializers) { const [value] = argument.value; const type = value.type; let shape = ''; let separator = ''; if (type && type.shape && type.shape.dimensions && Array.isArray(type.shape.dimensions)) { shape = '\u3008' + type.shape.dimensions.map((d) => (d !== null && d !== undefined) ? d : '?').join('\u00D7') + '\u3009'; if (type.shape.dimensions.length === 0 && value.initializer) { try { const initializer = value.initializer; const tensor = new view.Tensor(initializer); const encoding = tensor.encoding; if ((encoding === '<' || encoding === '>' || encoding === '|') && !tensor.empty && tensor.type.dataType !== '?') { shape = tensor.toString(); if (shape && shape.length > 10) { shape = shape.substring(0, 10) + '\u2026'; } separator = ' = '; } } catch (err) { let type = '?'; try { type = value.initializer.type.toString(); } catch (error) { // continue regardless of error } const error = new view.Error("Failed to render tensor of type '" + type + "' (" + err.message + ")."); if (this.context.view.model && this.context.view.model.identifier) { error.context = this.context.view.model.identifier; } throw error; } } } list.add(argument.name, shape, type ? type.toString() : '', separator); } if (hiddenInitializers) { list.add('\u3008\u2026\u3009', '', null, ''); } for (const attribute of attributes) { if (attribute.visible !== false) { let value = new view.Formatter(attribute.value, attribute.type).toString(); if (value && value.length > 25) { value = value.substring(0, 25) + '\u2026'; } list.add(attribute.name, value, attribute.type, ' = '); } } for (const attribute of objects) { if (attribute.type === 'graph') { const node = this.context.createNode(null, attribute.value); list.add(attribute.name, node, '', ''); } if (attribute.type === 'function' || attribute.type === 'object') { const node = this.context.createNode(attribute.value); list.add(attribute.name, node, '', ''); } if (attribute.type === 'function[]' || attribute.type === 'object[]') { const nodes = attribute.value.map((value) => this.context.createNode(value)); list.add(attribute.name, nodes, '', ''); } } } if (Array.isArray(node.nodes) && node.nodes.length > 0) { // this.canvas = this.canvas(); } if (Array.isArray(node.chain) && node.chain.length > 0) { for (const innerNode of node.chain) { this.context.createNode(innerNode); this._add(innerNode); } } if (node.inner) { this.context.createNode(node.inner); this._add(node.inner); } } toggle() { this._expand.content = '-'; this._graph = new view.Graph(this.context.view, this.context.model, this.context.options, false, {}); this._graph.add(this.value); // const document = this.element.ownerDocument; // const parent = this.element.parentElement; // this._graph.build(document, parent); // this._graph.update(); this.canvas.width = 300; this.canvas.height = 300; this.layout(); this.context.update(); } activate() { this.context.view.showNodeProperties(this.value); } }; view.Input = class extends grapher.Node { constructor(context, value) { super(); this.context = context; this.value = value; view.Input.counter = view.Input.counter || 0; const types = value.value.map((argument) => argument.type || '').join('\n'); let name = value.name || ''; if (name.length > 16) { name = name.split('/').pop(); } const header = this.header(); const title = header.add(null, ['graph-item-input'], name, types); title.on('click', () => this.context.view.showModelProperties()); this.id = 'input-' + (name ? 'name-' + name : 'id-' + (view.Input.counter++).toString()); } get class() { return 'graph-input'; } get inputs() { return []; } get outputs() { return [this.value]; } activate() { this.context.view.showModelProperties(); } }; view.Output = class extends grapher.Node { constructor(context, value) { super(); this.context = context; this.value = value; const types = value.value.map((argument) => argument.type || '').join('\n'); let name = value.name || ''; if (name.length > 16) { name = name.split('/').pop(); } const header = this.header(); const title = header.add(null, ['graph-item-output'], name, types); title.on('click', () => this.context.view.showModelProperties()); } get inputs() { return [this.value]; } get outputs() { return []; } activate() { this.context.view.showModelProperties(); } }; view.Value = class { constructor(context, argument) { this.context = context; this.value = argument; this.from = null; this.to = []; } controlDependency(node) { this._controlDependencies = this._controlDependencies || new Set(); this._controlDependencies.add(this.to.length); this.to.push(node); } build() { this._edges = this._edges || []; if (this.from && Array.isArray(this.to)) { for (let i = 0; i < this.to.length; i++) { const to = this.to[i]; let content = ''; const type = this.value.type; if (type && type.shape && type.shape.dimensions && type.shape.dimensions.length > 0 && type.shape.dimensions.every((dim) => !dim || Number.isInteger(dim) || (typeof dim === 'string'))) { content = type.shape.dimensions.map((dim) => (dim !== null && dim !== undefined) ? dim : '?').join('\u00D7'); content = content.length > 16 ? '' : content; } if (this.context.options.names) { content = this.value.name.split('\n').shift(); // custom argument id } const edge = new view.Edge(this, this.from, to); edge.v = this.from.name; edge.w = to.name; if (content) { edge.label = content; } edge.id = 'edge-' + this.value.name; if (this._controlDependencies && this._controlDependencies.has(i)) { edge.class = 'edge-path-control-dependency'; } this.context.setEdge(edge); this._edges.push(edge); } } } select() { let array = []; for (const edge of this._edges) { array = array.concat(edge.select()); } return array; } deselect() { for (const edge of this._edges) { edge.deselect(); } } activate() { if (this.value && this.from && Array.isArray(this.to)) { const value = this.value; const from = this.from.value; const to = this.to.map((node) => node.value); this.context.view.showConnectionProperties(value, from, to); } } }; view.Edge = class extends grapher.Edge { constructor(value, from, to) { super(from, to); this.value = value; } get minlen() { if (this.from.inputs.every((argument) => argument.value.every((value) => value.initializer))) { return 2; } return 1; } emit(event) { switch (event) { case 'pointerover': { this.value.context.focus([this.value.value]); break; } case 'pointerleave': { this.value.context.blur([this.value.value]); break; } case 'click': { this.value.context.activate(this.value.value); break; } default: break; } } }; view.Sidebar = class { constructor(host) { this._host = host; this._stack = []; const pop = () => this._update(this._stack.slice(0, -1)); this._closeSidebarHandler = () => pop(); this._closeSidebarKeyDownHandler = (e) => { if (e.keyCode == 27) { e.preventDefault(); pop(); } }; const sidebar = this._element('sidebar'); sidebar.addEventListener('transitionend', (event) => { if (event.propertyName === 'opacity' && sidebar.style.opacity === '0') { const content = this._element('sidebar-content'); content.innerHTML = ''; } }); } _element(id) { return this._host.document.getElementById(id); } open(content, title) { this._update([{ title: title, content: content }]); } close() { this._update([]); } push(content, title) { this._update(this._stack.concat({ title: title, content: content })); } _update(stack) { const sidebar = this._element('sidebar'); const container = this._element('graph'); const closeButton = this._element('sidebar-closebutton'); closeButton.removeEventListener('click', this._closeSidebarHandler); this._host.document.removeEventListener('keydown', this._closeSidebarKeyDownHandler); if (stack) { this._stack = stack; } else if (this._stack.length > 0) { this._stack.pop(); } if (this._stack.length > 0) { const item = this._stack[this._stack.length - 1]; this._element('sidebar-title').innerHTML = item.title || ''; closeButton.addEventListener('click', this._closeSidebarHandler); const content = this._element('sidebar-content'); if (typeof item.content == 'string') { content.innerHTML = item.content; } else if (item.content instanceof Array) { content.innerHTML = ''; for (const element of item.content) { content.appendChild(element); } } else { content.innerHTML = ''; content.appendChild(item.content); } sidebar.style.width = 'min(calc(100% * 0.6), 42em)'; sidebar.style.right = 0; sidebar.style.opacity = 1; this._host.document.addEventListener('keydown', this._closeSidebarKeyDownHandler); container.style.width = 'max(40vw, calc(100vw - 42em))'; } else { sidebar.style.right = 'calc(0px - min(calc(100% * 0.6), 42em))'; sidebar.style.opacity = 0; container.style.width = '100%'; container.focus(); } } }; view.Control = class { constructor(host) { this._host = host; } createElement(tagName, className) { const element = this._host.document.createElement(tagName); if (className) { element.setAttribute('class', className); } return element; } on(event, callback) { this._events = this._events || {}; this._events[event] = this._events[event] || []; this._events[event].push(callback); } emit(event, data) { if (this._events && this._events[event]) { for (const callback of this._events[event]) { callback(this, data); } } } }; view.ObjectSidebar = class extends view.Control { constructor(host) { super(host); this._container = this.createElement('div', 'sidebar-object'); } add(name, item) { const entry = new view.NameValueView(this._host, name, item); const element = entry.render(); this._container.appendChild(element); } addProperty(name, value, style) { const item = new view.ValueTextView(this._host, value, style); this.add(name, item); return item; } addHeader(title) { const element = this.createElement('div', 'sidebar-header'); element.innerText = title; this._container.appendChild(element); } render() { return [this._container]; } }; view.NodeSidebar = class extends view.ObjectSidebar { constructor(host, node) { super(host); this._node = node; this._attributes = []; this._inputs = []; this._outputs = []; if (node.type) { const type = node.type; const item = this.addProperty('type', node.type.identifier || node.type.name); if (type && (type.description || type.inputs || type.outputs || type.attributes)) { item.action(type.nodes ? '\u0192' : '?', () => { this.emit('show-documentation', null); }); } if (node.type.module) { this.addProperty('module', node.type.module); } } if (node.name) { this.addProperty('name', node.name); } if (node.location) { this.addProperty('location', node.location); } if (node.description) { this.addProperty('description', node.description); } if (node.device) { this.addProperty('device', node.device); } const attributes = node.attributes; if (Array.isArray(attributes) && attributes.length > 0) { this.addHeader('Attributes'); attributes.sort((a, b) => { const au = a.name.toUpperCase(); const bu = b.name.toUpperCase(); return (au < bu) ? -1 : (au > bu) ? 1 : 0; }); for (const attribute of attributes) { this._addAttribute(attribute.name, attribute); } } const inputs = node.inputs; if (Array.isArray(inputs) && inputs.length > 0) { this.addHeader('Inputs'); for (const input of inputs) { this._addInput(input.name, input); } } const outputs = node.outputs; if (Array.isArray(outputs) && outputs.length > 0) { this.addHeader('Outputs'); for (const output of outputs) { this._addOutput(output.name, output); } } } _addAttribute(name, attribute) { let value = null; switch (attribute.type) { case 'tensor': { value = new view.ValueView(this._host, { type: attribute.value.type, initializer: attribute.value }, ''); value.on('export-tensor', (sender, value) => this.emit('export-tensor', value)); value.on('error', (sender, value) => this.emit('error', value)); break; } case 'tensor[]': { const values = attribute.value.map((value) => { return { type: value.type, initializer: value }; }); value = new view.ArgumentView(this._host, { value: values }, ''); break; } default: { value = new view.AttributeView(this._host, attribute); value.on('activate', (sender, graph) => { this.emit('activate', graph); }); break; } } const item = new view.NameValueView(this._host, name, value); this._attributes.push(item); this._container.appendChild(item.render()); } _addInput(name, input) { if (input.value.length > 0) { const value = new view.ArgumentView(this._host, input); value.on('export-tensor', (sender, value) => this.emit('export-tensor', value)); value.on('error', (sender, value) => this.emit('error', value)); value.on('activate', (sender, value) => this.emit('activate', value)); value.on('deactivate', (sender, value) => this.emit('deactivate', value)); value.on('select', (sender, value) => this.emit('select', value)); const item = new view.NameValueView(this._host, name, value); this._inputs.push(item); this._container.appendChild(item.render()); } } _addOutput(name, output) { if (output.value.length > 0) { const value = new view.ArgumentView(this._host, output); value.on('activate', (sender, value) => this.emit('activate', value)); value.on('deactivate', (sender, value) => this.emit('deactivate', value)); value.on('select', (sender, value) => this.emit('select', value)); const item = new view.NameValueView(this._host, name, value); this._outputs.push(item); this._container.appendChild(item.render()); } } }; view.NameValueView = class extends view.Control { constructor(host, name, value) { super(host); this._host = host; this._name = name; this._value = value; const nameElement = this.createElement('div', 'sidebar-item-name'); const input = this.createElement('input'); input.setAttribute('type', 'text'); input.setAttribute('value', name); input.setAttribute('title', name); input.setAttribute('readonly', 'true'); nameElement.appendChild(input); const valueElement = this.createElement('div', 'sidebar-item-value-list'); for (const element of value.render()) { valueElement.appendChild(element); } this._element = this.createElement('div', 'sidebar-item'); this._element.appendChild(nameElement); this._element.appendChild(valueElement); } get name() { return this._name; } render() { return this._element; } toggle() { this._value.toggle(); } }; view.SelectView = class extends view.Control { constructor(host, values, selected) { super(); this._host = host; this._elements = []; this._values = values; const selectElement = this.createElement('select', 'sidebar-item-select'); selectElement.addEventListener('change', (e) => { this.emit('change', this._values[e.target.selectedIndex]); }); this._elements.push(selectElement); for (const value of values) { const optionElement = this.createElement('option'); optionElement.innerText = value.name || ''; if (value == selected) { optionElement.setAttribute('selected', 'selected'); } selectElement.appendChild(optionElement); } } render() { return this._elements; } }; view.ValueTextView = class extends view.Control { constructor(host, value, style) { super(host); this._element = this.createElement('div', 'sidebar-item-value'); if (value) { const list = Array.isArray(value) ? value : [value]; let className = 'sidebar-item-value-line'; for (const item of list) { const line = this.createElement('div', className); switch (style) { case 'code': line.innerHTML = '' + item + '';
break;
case 'bold':
line.innerHTML = '' + item + '';
break;
default:
line.innerText = item;
break;
}
this._element.appendChild(line);
className = 'sidebar-item-value-line-border';
}
}
}
action(text, callback) {
this._action = this.createElement('div', 'sidebar-item-value-expander');
this._action.innerHTML = text;
this._action.addEventListener('click', () => {
callback();
});
this._element.insertBefore(this._action, this._element.childNodes[0]);
}
render() {
return [this._element];
}
toggle() {
}
};
view.AttributeView = class extends view.Control {
constructor(host, attribute) {
super(host);
this._attribute = attribute;
this._element = this.createElement('div', 'sidebar-item-value');
const type = this._attribute.type;
if (type && type !== 'tensor') {
this._expander = this.createElement('div', 'sidebar-item-value-expander');
this._expander.innerText = '+';
this._expander.addEventListener('click', () => {
this.toggle();
});
this._element.appendChild(this._expander);
}
const value = this._attribute.value;
switch (type) {
case 'graph': {
const line = this.createElement('div', 'sidebar-item-value-line-link');
line.innerHTML = value.name || ' ';
line.addEventListener('click', () => {
this.emit('activate', value);
});
this._element.appendChild(line);
break;
}
case 'function': {
const line = this.createElement('div', 'sidebar-item-value-line-link');
line.innerHTML = value.type.name;
line.addEventListener('click', () => {
this.emit('activate', value);
});
this._element.appendChild(line);
break;
}
case 'tensor': {
throw new view.Error('Attribute view tensor not implemented.');
}
default: {
let content = new view.Formatter(value, type).toString();
if (content && content.length > 1000) {
content = content.substring(0, 1000) + '\u2026';
}
if (content && typeof content === 'string') {
content = content.split('<').join('<').split('>').join('>');
}
const line = this.createElement('div', 'sidebar-item-value-line');
line.innerHTML = content ? content : ' ';
this._element.appendChild(line);
}
}
}
render() {
return [this._element];
}
toggle() {
if (this._expander.innerText == '+') {
this._expander.innerText = '-';
const type = this._attribute.type;
const value = this._attribute.value;
const content = type == 'tensor' && value && value.type ? value.type.toString() : this._attribute.type;
const typeLine = this.createElement('div', 'sidebar-item-value-line-border');
typeLine.innerHTML = 'type: ' + '' + content + '
';
this._element.appendChild(typeLine);
const description = this._attribute.description;
if (description) {
const descriptionLine = this.createElement('div', 'sidebar-item-value-line-border');
descriptionLine.innerHTML = description;
this._element.appendChild(descriptionLine);
}
} else {
this._expander.innerText = '+';
while (this._element.childElementCount > 2) {
this._element.removeChild(this._element.lastChild);
}
}
}
};
view.ArgumentView = class extends view.Control {
constructor(host, argument) {
super();
this._argument = argument;
this._elements = [];
this._items = [];
for (const value of argument.value) {
const item = new view.ValueView(host, value);
item.on('export-tensor', (sender, value) => this.emit('export-tensor', value));
item.on('error', (sender, value) => this.emit('error', value));
item.on('activate', (sender, value) => this.emit('activate', value));
item.on('deactivate', (sender, value) => this.emit('deactivate', value));
item.on('select', (sender, value) => this.emit('select', value));
this._items.push(item);
for (const element of item.render()) {
this._elements.push(element);
}
}
}
render() {
return this._elements;
}
toggle() {
for (const item of this._items) {
item.toggle();
}
}
};
view.ValueView = class extends view.Control {
constructor(host, value, name) {
super(host);
this._value = value;
this._element = this.createElement('div', 'sidebar-item-value');
const type = this._value.type;
const initializer = this._value.initializer;
const quantization = this._value.quantization;
const location = this._value.location !== undefined;
if (initializer) {
this._element.classList.add('sidebar-item-value-dark');
}
if (type || initializer || quantization || location || name === undefined) {
this._expander = this.createElement('div', 'sidebar-item-value-expander');
this._expander.innerText = '+';
this._expander.addEventListener('click', () => {
this.toggle();
});
this._element.appendChild(this._expander);
}
const tensor = name !== undefined;
name = this._value.name ? this._value.name.split('\n').shift() : ''; // custom argument id
this._hasId = name && !tensor ? true : false;
this._hasCategory = initializer && initializer.category ? true : false;
if (this._hasId || (!this._hasCategory && !type && !tensor)) {
this._hasId = true;
const nameLine = this.createElement('div', 'sidebar-item-value-line');
if (typeof name !== 'string') {
throw new Error("Invalid value identifier '" + JSON.stringify(name) + "'.");
}
nameLine.innerHTML = ' ';
nameLine.addEventListener('pointerenter', () => this.emit('activate', this._value));
nameLine.addEventListener('pointerleave', () => this.emit('deactivate', this._value));
if (!initializer) {
nameLine.style.cursor = 'pointer';
nameLine.addEventListener('click', () => this.emit('select', this._value));
}
this._element.appendChild(nameLine);
} else if (this._hasCategory) {
this._bold('category', initializer.category);
} else if (type) {
this._code('tensor', type.toString().split('<').join('<').split('>').join('>'));
}
}
render() {
return [this._element];
}
toggle() {
if (this._expander) {
if (this._expander.innerText == '+') {
this._expander.innerText = '-';
const initializer = this._value.initializer;
if (this._hasId && this._hasCategory) {
this._bold('category', initializer.category);
}
let type = null;
let denotation = null;
if (this._value.type) {
type = this._value.type.toString();
denotation = this._value.type.denotation || null;
}
if (type && (this._hasId || this._hasCategory)) {
this._code('tensor', type.split('<').join('<').split('>').join('>'));
}
if (denotation) {
this._code('denotation', denotation);
}
const description = this._value.description;
if (description) {
const descriptionLine = this.createElement('div', 'sidebar-item-value-line-border');
descriptionLine.innerHTML = description;
this._element.appendChild(descriptionLine);
}
const quantization = this._value.quantization;
if (quantization) {
const quantizationLine = this.createElement('div', 'sidebar-item-value-line-border');
const content = !Array.isArray(quantization) ? quantization : '
' + quantization.map((value) => ' ' + value).join('
');
quantizationLine.innerHTML = ' ';
this._element.appendChild(quantizationLine);
}
const location = this._value.location;
if (location !== undefined) {
this._bold('location', location);
}
const layout = this._value.type ? this._value.type.layout : null;
if (layout) {
const layouts = new Map([
['sparse', 'sparse'],
['sparse.coo', 'sparse coo'],
['sparse.csr', 'sparse csr'],
['sparse.csc', 'sparse csc'],
['sparse.bsr', 'sparse bsr'],
['sparse.bsc', 'sparse bsc']
]);
this._bold('layout', layouts.get(layout));
}
if (initializer) {
this._tensor(initializer);
}
} else {
this._expander.innerText = '+';
while (this._element.childElementCount > 2) {
this._element.removeChild(this._element.lastChild);
}
}
}
}
_bold(name, value) {
const line = this.createElement('div');
line.innerHTML = name + ': ' + '' + value + '';
this._add(line);
}
_code(name, value) {
const line = this.createElement('div');
line.innerHTML = name + ': ' + '' + value + '
';
this._add(line);
}
_add(child) {
child.className = this._element.childNodes.length < 2 ? 'sidebar-item-value-line' : 'sidebar-item-value-line-border';
this._element.appendChild(child);
}
_tensor(value) {
const contentLine = this.createElement('pre');
try {
const tensor = new view.Tensor(value);
if (Array.isArray(tensor.stride) && tensor.stride.length > 0) {
this._code('stride', tensor.stride.join(','));
}
if (tensor.encoding !== '<' && tensor.encoding !== '>' && tensor.encoding !== '|') {
contentLine.innerHTML = "Tensor encoding '" + tensor.layout + "' is not implemented.";
} else if (tensor.layout && (tensor.layout !== 'sparse' && tensor.layout !== 'sparse.coo')) {
contentLine.innerHTML = "Tensor layout '" + tensor.layout + "' is not implemented.";
} else if (tensor.empty) {
contentLine.innerHTML = 'Tensor data is empty.';
} else if (tensor.type && tensor.type.dataType === '?') {
contentLine.innerHTML = 'Tensor data type is not defined.';
} else if (tensor.type && !tensor.type.shape) {
contentLine.innerHTML = 'Tensor shape is not defined.';
} else {
contentLine.innerHTML = tensor.toString();
if (this._host.save &&
value.type.shape && value.type.shape.dimensions &&
value.type.shape.dimensions.length > 0) {
this._saveButton = this.createElement('div', 'sidebar-item-value-expander');
this._saveButton.innerHTML = '💾';
this._saveButton.addEventListener('click', () => {
this.emit('export-tensor', tensor);
});
this._element.appendChild(this._saveButton);
}
}
} catch (err) {
contentLine.innerHTML = err.toString();
this.emit('error', err);
}
const valueLine = this.createElement('div', 'sidebar-item-value-line-border');
valueLine.appendChild(contentLine);
this._element.appendChild(valueLine);
}
};
view.NodeView = class extends view.Control {
constructor(host, node) {
super(host);
this._node = node;
this._element = this.createElement('div', 'sidebar-item-value');
const name = node.name;
const type = node.type ? node.type.name : '';
if (name && type) {
this._expander = this.createElement('div', 'sidebar-item-value-expander');
this._expander.innerText = '+';
this._expander.addEventListener('click', () => {
this.toggle();
});
this._element.appendChild(this._expander);
}
if (type) {
const type = node.type.name;
const element = this.createElement('div', 'sidebar-item-value-line');
element.innerHTML = ' ';
element.addEventListener('pointerenter', () => this.emit('activate', this._node));
element.addEventListener('pointerleave', () => this.emit('deactivate', this._node));
element.addEventListener('click', () => this.emit('select', this._node));
element.style.cursor = 'pointer';
this._element.appendChild(element);
} else {
const element = this.createElement('div', 'sidebar-item-value-line');
element.innerHTML = ' ';
element.addEventListener('pointerenter', () => this.emit('activate', this._node));
element.addEventListener('pointerleave', () => this.emit('deactivate', this._node));
element.addEventListener('click', () => this.emit('select', this._node));
element.style.cursor = 'pointer';
this._element.appendChild(element);
}
}
render() {
return [this._element];
}
toggle() {
if (this._expander) {
if (this._expander.innerText == '+') {
this._expander.innerText = '-';
const name = this._node.name;
const element = this.createElement('div', 'sidebar-item-value-line-border');
element.innerHTML = ' ';
element.addEventListener('pointerenter', () => this.emit('activate', this._node));
element.addEventListener('pointerleave', () => this.emit('deactivate', this._node));
element.addEventListener('click', () => this.emit('select', this._node));
element.style.cursor = 'pointer';
this._element.appendChild(element);
} else {
this._expander.innerText = '+';
while (this._element.childElementCount > 2) {
this._element.removeChild(this._element.lastChild);
}
}
}
}
};
view.NodeListView = class extends view.Control {
constructor(host, list) {
super();
this._host = host;
this._elements = [];
for (const node of list) {
const item = new view.NodeView(host, node);
item.on('activate', (sender, value) => this.emit('activate', value));
item.on('deactivate', (sender, value) => this.emit('deactivate', value));
item.on('select', (sender, value) => this.emit('select', value));
item.toggle();
for (const element of item.render()) {
this._elements.push(element);
}
}
}
render() {
return this._elements;
}
};
view.ConnectionSidebar = class extends view.ObjectSidebar {
constructor(host, value, from, to) {
super(host);
this._host = host;
this._value = value;
this._from = from;
this._to = to;
const [name] = value.name.split('\n');
this.addProperty('name', name);
if (value.type) {
const item = new view.ValueView(this._host, value, '');
this.add('type', item);
item.toggle();
}
if (from) {
this.addHeader('Inputs');
const list = new view.NodeListView(host, [from]);
list.on('activate', (sender, value) => this.emit('activate', value));
list.on('deactivate', (sender, value) => this.emit('deactivate', value));
list.on('select', (sender, value) => this.emit('select', value));
const item = new view.NameValueView(this._host, 'from', list);
this._container.appendChild(item.render());
}
if (Array.isArray(to) && to.length > 0) {
this.addHeader('Outputs');
const list = new view.NodeListView(this._host, to);
list.on('activate', (sender, value) => this.emit('activate', value));
list.on('deactivate', (sender, value) => this.emit('deactivate', value));
list.on('select', (sender, value) => this.emit('select', value));
const item = new view.NameValueView(this._host, 'to', list);
this._container.appendChild(item.render());
}
}
};
view.ModelSidebar = class extends view.ObjectSidebar {
constructor(host, model, graph) {
super(host);
this._model = model;
if (model.format) {
this.addProperty('format', model.format);
}
if (model.producer) {
this.addProperty('producer', model.producer);
}
if (model.name) {
this.addProperty('name', model.name);
}
if (model.version) {
this.addProperty('version', model.version);
}
if (model.description) {
this.addProperty('description', model.description);
}
if (model.domain) {
this.addProperty('domain', model.domain);
}
if (model.imports) {
this.addProperty('imports', model.imports);
}
if (model.runtime) {
this.addProperty('runtime', model.runtime);
}
if (model.metadata) {
for (const entry of model.metadata) {
this.addProperty(entry.name, entry.value);
}
}
const graphs = Array.isArray(model.graphs) ? model.graphs : [];
if (graphs.length === 1 && graphs[0].name) {
this.addProperty('graph', graphs[0].name);
} else if (graphs.length > 1) {
const selector = new view.SelectView(this._host, model.graphs, graph);
selector.on('change', (sender, data) => this.emit('update-active-graph', data));
this.add('graph', selector);
}
if (graph) {
if (graph.version) {
this.addProperty('version', graph.version);
}
if (graph.type) {
this.addProperty('type', graph.type);
}
if (graph.tags) {
this.addProperty('tags', graph.tags);
}
if (graph.description) {
this.addProperty('description', graph.description);
}
if (Array.isArray(graph.inputs) && graph.inputs.length > 0) {
this.addHeader('Inputs');
for (const input of graph.inputs) {
this.addArgument(input.name, input);
}
}
if (Array.isArray(graph.outputs) && graph.outputs.length > 0) {
this.addHeader('Outputs');
for (const output of graph.outputs) {
this.addArgument(output.name, output);
}
}
}
}
render() {
return [this._container];
}
addArgument(name, argument) {
const value = new view.ArgumentView(this._host, argument);
value.toggle();
const item = new view.NameValueView(this._host, name, value);
this._container.appendChild(item.render());
}
};
view.DocumentationSidebar = class extends view.Control {
constructor(host, type) {
super();
this._host = host;
this._type = type;
}
render() {
if (!this._elements) {
this._elements = [];
const type = view.Documentation.format(this._type);
const element = this.createElement('div', 'sidebar-documentation');
this._append(element, 'h1', type.name);
if (type.summary) {
this._append(element, 'p', type.summary);
}
if (type.description) {
this._append(element, 'p', type.description);
}
if (Array.isArray(type.attributes) && type.attributes.length > 0) {
this._append(element, 'h2', 'Attributes');
const attributes = this._append(element, 'dl');
for (const attribute of type.attributes) {
this._append(attributes, 'dt', attribute.name + (attribute.type ? ': ' + attribute.type + '' : ''));
this._append(attributes, 'dd', attribute.description);
}
element.appendChild(attributes);
}
if (Array.isArray(type.inputs) && type.inputs.length > 0) {
this._append(element, 'h2', 'Inputs' + (type.inputs_range ? ' (' + type.inputs_range + ')' : ''));
const inputs = this._append(element, 'dl');
for (const input of type.inputs) {
this._append(inputs, 'dt', input.name + (input.type ? ': ' + input.type + '' : '') + (input.option ? ' (' + input.option + ')' : ''));
this._append(inputs, 'dd', input.description);
}
}
if (Array.isArray(type.outputs) && type.outputs.length > 0) {
this._append(element, 'h2', 'Outputs' + (type.outputs_range ? ' (' + type.outputs_range + ')' : ''));
const outputs = this._append(element, 'dl');
for (const output of type.outputs) {
this._append(outputs, 'dt', output.name + (output.type ? ': ' + output.type + '' : '') + (output.option ? ' (' + output.option + ')' : ''));
this._append(outputs, 'dd', output.description);
}
}
if (Array.isArray(type.type_constraints) && type.type_constraints.length > 0) {
this._append(element, 'h2', 'Type Constraints');
const type_constraints = this._append(element, 'dl');
for (const type_constraint of type.type_constraints) {
this._append(type_constraints, 'dt', type_constraint.type_param_str + ': ' + type_constraint.allowed_type_strs.map((item) => '' + item + '').join(', '));
this._append(type_constraints, 'dd', type_constraint.description);
}
}
if (Array.isArray(type.examples) && type.examples.length > 0) {
this._append(element, 'h2', 'Examples');
for (const example of type.examples) {
this._append(element, 'h3', example.summary);
this._append(element, 'pre', example.code);
}
}
if (Array.isArray(type.references) && type.references.length > 0) {
this._append(element, 'h2', 'References');
const references = this._append(element, 'ul');
for (const reference of type.references) {
this._append(references, 'li', reference.description);
}
}
if (type.domain && type.version && type.support_level) {
this._append(element, 'h2', 'Support');
this._append(element, 'dl', 'In domain ' + type.domain + ' since version ' + type.version + ' at support level ' + type.support_level + '.');
}
this._elements = [element];
}
return this._elements;
}
_append(parent, type, content) {
const element = this.createElement(type);
if (content) {
element.innerHTML = content;
}
parent.appendChild(element);
return element;
}
};
view.FindSidebar = class extends view.Control {
constructor(host, graph) {
super(host);
this._graph = graph;
this._table = new Map();
this._searchElement = this.createElement('input', 'sidebar-find-search');
this._searchElement.setAttribute('id', 'search');
this._searchElement.setAttribute('type', 'text');
this._searchElement.setAttribute('spellcheck', 'false');
this._searchElement.setAttribute('placeholder', 'Search');
this._searchElement.addEventListener('input', (e) => {
this.update(e.target.value);
this.emit('search-text-changed', e.target.value);
});
this._searchElement.addEventListener('keydown', (e) => {
if (e.keyCode === 0x08 && !e.altKey && !e.ctrlKey && !e.shiftKey && !e.metaKey) {
e.stopPropagation();
}
});
this._contentElement = this.createElement('ol', 'sidebar-find-content');
this._contentElement.addEventListener('click', (e) => {
const identifier = e.target.getAttribute('data');
if (this._table.has(identifier)) {
this.emit('select', this._table.get(identifier));
}
});
}
on(event, callback) {
this._events = this._events || {};
this._events[event] = this._events[event] || [];
this._events[event].push(callback);
}
emit(event, data) {
if (this._events && this._events[event]) {
for (const callback of this._events[event]) {
callback(this, data);
}
}
}
focus(searchText) {
this._searchElement.focus();
this._searchElement.value = '';
this._searchElement.value = searchText;
this.update(searchText);
}
update(searchText) {
while (this._contentElement.lastChild) {
this._contentElement.removeChild(this._contentElement.lastChild);
}
this._table.clear();
let index = 0;
const add = (value, content) => {
const key = index.toString();
index++;
this._table.set(key, value);
const element = this.createElement('li');
element.innerText = content;
element.setAttribute('data', key);
element.addEventListener('pointerover', (e) => {
const identifier = e.target.getAttribute('data');
if (this._table.has(identifier)) {
this.emit('focus', this._table.get(identifier));
}
});
element.addEventListener('pointerleave', (e) => {
const identifier = e.target.getAttribute('data');
if (this._table.has(identifier)) {
this.emit('blur', this._table.get(identifier));
}
});
this._contentElement.appendChild(element);
};
let terms = null;
let match = null;
const unquote = searchText.match(new RegExp(/^'(.*)'|"(.*)"$/));
if (unquote) {
const term = unquote[1] || unquote[2];
terms = [term];
match = (name) => {
return term === name;
};
} else {
terms = searchText.trim().toLowerCase().split(' ').map((term) => term.trim()).filter((term) => term.length > 0);
match = (name) => {
return terms.every((term) => name.toLowerCase().indexOf(term) !== -1);
};
}
const edges = new Set();
const matchValue = (value) => {
if (terms.length === 0) {
return true;
}
if (value.name && match(value.name.split('\n').shift())) {
return true;
}
if (value.location && match(value.location)) {
return true;
}
if (value.type) {
for (const term of terms) {
if (value.type.dataType && term === value.type.dataType.toLowerCase()) {
return true;
}
if (value.type.shape) {
if (term === value.type.shape.toString().toLowerCase()) {
return true;
}
if (value.type.shape && Array.isArray(value.type.shape.dimensions)) {
const dimensions = value.type.shape.dimensions.map((dimension) => dimension ? dimension.toString().toLowerCase() : '');
if (term === dimensions.join(',')) {
return true;
}
if (dimensions.some((dimension) => term === dimension)) {
return true;
}
}
}
}
}
return false;
};
const edge = (value) => {
if (value.name && !edges.has(value.name) && matchValue(value)) {
add(value, '\u2192 ' + value.name.split('\n').shift()); // split custom argument id
edges.add(value.name);
}
};
for (const input of this._graph.inputs) {
for (const value of input.value) {
edge(value);
}
}
for (const node of this._graph.nodes) {
const initializers = [];
for (const input of node.inputs) {
for (const value of input.value) {
if (value.initializer) {
initializers.push(value);
} else {
edge(value);
}
}
}
const name = node.name;
const type = node.type.name;
const location = node.location;
if ((name && match(name)) || (type && match(type)) || (location && match(location))) {
add(node, '\u25A2 ' + (name || '[' + type + ']'));
}
for (const value of initializers) {
if (value.name && !edges.has(value.name) && matchValue(value)) {
add(node, '\u25A0 ' + value.name.split('\n').shift()); // split custom argument id
}
}
}
for (const output of this._graph.outputs) {
for (const value of output.value) {
edge(value);
}
}
this._contentElement.style.display = this._contentElement.childNodes.length != 0 ? 'block' : 'none';
}
render() {
return [this._searchElement, this._contentElement];
}
};
view.Tensor = class {
constructor(tensor) {
this._tensor = tensor;
this._type = tensor.type;
this._encoding = tensor.encoding;
this._layout = tensor.type.layout;
this._stride = tensor.stride;
switch (this._encoding) {
case undefined:
case '':
case '<': {
this._data = this._tensor.values;
this._encoding = '<';
this._littleEndian = true;
break;
}
case '>': {
this._data = this._tensor.values;
this._encoding = '>';
this._littleEndian = false;
break;
}
case '|': {
this._values = this._tensor.values;
this._encoding = '|';
break;
}
default: {
throw new view.Error("Unsupported tensor encoding '" + this._encoding + "'.");
}
}
switch (this._layout) {
case 'sparse':
case 'sparse.coo': {
this._indices = this._tensor.indices;
this._values = this._tensor.values;
break;
}
default: {
break;
}
}
view.Tensor.dataTypes = view.Tensor.dataTypeSizes || new Map([
['boolean', 1],
['qint8', 1], ['qint16', 2], ['qint32', 4],
['quint8', 1], ['quint16', 2], ['quint32', 4],
['xint8', 1],
['int8', 1], ['int16', 2], ['int32', 4], ['int64', 8],
['uint8', 1], ['uint16', 2], ['uint32', 4,], ['uint64', 8],
['float16', 2], ['float32', 4], ['float64', 8], ['bfloat16', 2],
['complex64', 8], ['complex128', 16],
['float8e4m3fn', 1], ['float8e4m3fnuz', 1], ['float8e5m2', 1], ['float8e5m2fnuz', 1]
]);
}
get type() {
return this._type;
}
get encoding() {
return this._encoding;
}
get layout() {
return this._layout;
}
get stride() {
return this._stride;
}
get empty() {
switch (this._layout) {
case 'sparse':
case 'sparse.coo': {
return !this._values || this.indices || this._values.values === null || this._values.values.length === 0;
}
default: {
switch (this._encoding) {
case '<':
case '>':
return !(Array.isArray(this._data) || this._data instanceof Uint8Array || this._data instanceof Int8Array) || this._data.length === 0;
case '|':
return !(Array.isArray(this._values) || ArrayBuffer.isView(this._values)) || this._values.length === 0;
default:
throw new Error("Unsupported tensor encoding '" + this._encoding + "'.");
}
}
}
}
get value() {
const context = this._context();
context.limit = Number.MAX_SAFE_INTEGER;
switch (context.encoding) {
case '<':
case '>': {
return this._decodeData(context, 0, 0);
}
case '|': {
return this._decodeValues(context, 0, 0);
}
default: {
throw new Error("Unsupported tensor encoding '" + context.encoding + "'.");
}
}
}
toString() {
const context = this._context();
context.limit = 10000;
switch (context.encoding) {
case '<':
case '>': {
const value = this._decodeData(context, 0, 0);
return view.Tensor._stringify(value, '', ' ');
}
case '|': {
const value = this._decodeValues(context, 0, 0);
return view.Tensor._stringify(value, '', ' ');
}
default: {
throw new Error("Unsupported tensor encoding '" + context.encoding + "'.");
}
}
}
_context() {
if (this._encoding !== '<' && this._encoding !== '>' && this._encoding !== '|') {
throw new Error("Tensor encoding '" + this._encoding + "' is not supported.");
}
if (this._layout && (this._layout !== 'sparse' && this._layout !== 'sparse.coo')) {
throw new Error("Tensor layout '" + this._layout + "' is not supported.");
}
const dataType = this._type.dataType;
const context = {};
context.encoding = this._encoding;
context.dimensions = this._type.shape.dimensions.map((value) => !Number.isInteger(value) && value.toNumber ? value.toNumber() : value);
context.dataType = dataType;
const shape = context.dimensions;
context.stride = this._stride;
if (!Array.isArray(context.stride)) {
context.stride = new Array(shape.length);
let value = 1;
for (let i = shape.length - 1; i >= 0; i--) {
context.stride[i] = value;
value *= shape[i];
}
}
switch (this._layout) {
case 'sparse': {
const indices = new view.Tensor(this._indices).value;
const values = new view.Tensor(this._values).value;
context.data = this._decodeSparse(dataType, context.dimensions, indices, values);
context.encoding = '|';
break;
}
case 'sparse.coo': {
const values = new view.Tensor(this._values).value;
const data = new view.Tensor(this._indices).value;
const dimensions = context.dimensions.length;
let stride = 1;
const strides = context.dimensions.slice().reverse().map((dim) => {
const value = stride;
stride *= dim;
return value;
}).reverse();
const indices = new Uint32Array(values.length);
for (let i = 0; i < dimensions; i++) {
const stride = strides[i];
const dimension = data[i];
for (let i = 0; i < indices.length; i++) {
indices[i] += dimension[i] * stride;
}
}
context.data = this._decodeSparse(dataType, context.dimensions, indices, values);
context.encoding = '|';
break;
}
default: {
switch (this._encoding) {
case '<':
case '>': {
context.data = (this._data instanceof Uint8Array || this._data instanceof Int8Array) ? this._data : this._data.peek();
context.view = new DataView(context.data.buffer, context.data.byteOffset, context.data.byteLength);
if (view.Tensor.dataTypes.has(dataType)) {
const itemsize = view.Tensor.dataTypes.get(dataType);
const length = context.data.length;
const stride = context.stride;
if (length < (itemsize * shape.reduce((a, v) => a * v, 1))) {
const max = stride.reduce((a, v, i) => v > stride[i] ? i : a, 0);
if (length !== (itemsize * stride[max] * shape[max])) {
throw new Error('Invalid tensor data size.');
}
}
context.itemsize = itemsize;
context.stride = stride.map((v) => v * itemsize);
} else if (dataType.startsWith('uint') && !isNaN(parseInt(dataType.substring(4), 10))) {
context.dataType = 'uint';
context.bits = parseInt(dataType.substring(4), 10);
context.itemsize = 1;
} else if (dataType.startsWith('int') && !isNaN(parseInt(dataType.substring(3), 10))) {
context.dataType = 'int';
context.bits = parseInt(dataType.substring(3), 10);
context.itemsize = 1;
} else {
throw new Error("Tensor data type '" + dataType + "' is not implemented.");
}
break;
}
case '|': {
context.data = this._values;
if (!view.Tensor.dataTypes.has(dataType) && dataType !== 'string' && dataType !== 'object') {
throw new Error("Tensor data type '" + dataType + "' is not implemented.");
}
const size = context.dimensions.reduce((a, v) => a * v, 1);
if (size !== this._values.length) {
throw new Error('Invalid tensor data length.');
}
break;
}
default: {
throw new view.Tensor("Unsupported tensor encoding '" + this._encoding + "'.");
}
}
}
}
context.index = 0;
context.count = 0;
return context;
}
_decodeSparse(dataType, dimensions, indices, values) {
const size = dimensions.reduce((a, b) => a * b, 1);
const array = new Array(size);
switch (dataType) {
case 'boolean':
array.fill(false);
break;
default:
array.fill(0);
break;
}
if (indices.length > 0) {
if (Object.prototype.hasOwnProperty.call(indices[0], 'low')) {
for (let i = 0; i < indices.length; i++) {
const index = indices[i];
array[index.high === 0 ? index.low : index.toNumber()] = values[i];
}
} else {
for (let i = 0; i < indices.length; i++) {
array[indices[i]] = values[i];
}
}
}
return array;
}
_decodeData(context, dimension, offset) {
const results = [];
const shape = context.dimensions.length == 0 ? [1] : context.dimensions;
const size = shape[dimension];
const dataType = context.dataType;
const view = context.view;
const stride = context.stride[dimension];
if (dimension == shape.length - 1) {
const ellipsis = (context.count + size) > context.limit;
const length = ellipsis ? context.limit - context.count : size;
const max = offset + (length * context.itemsize);
switch (dataType) {
case 'boolean':
for (; offset < max; offset += stride) {
results.push(view.getUint8(offset) === 0 ? false : true);
}
break;
case 'qint8':
case 'xint8':
case 'int8':
for (; offset < max; offset += stride) {
results.push(view.getInt8(offset));
}
break;
case 'qint16':
case 'int16':
for (; offset < max; offset += stride) {
results.push(view.getInt16(offset, this._littleEndian));
}
break;
case 'qint32':
case 'int32':
for (; offset < max; offset += stride) {
results.push(view.getInt32(offset, this._littleEndian));
}
break;
case 'int64':
for (; offset < max; offset += stride) {
results.push(view.getInt64(offset, this._littleEndian));
}
break;
case 'int':
for (; offset < size; offset += stride) {
results.push(view.getIntBits(offset, context.bits));
}
break;
case 'quint8':
case 'uint8':
for (; offset < max; offset += stride) {
results.push(view.getUint8(offset));
}
break;
case 'quint16':
case 'uint16':
for (; offset < max; offset += stride) {
results.push(view.getUint16(offset, true));
}
break;
case 'quint32':
case 'uint32':
for (; offset < max; offset += stride) {
results.push(view.getUint32(offset, true));
}
break;
case 'uint64':
for (; offset < max; offset += stride) {
results.push(view.getUint64(offset, true));
}
break;
case 'uint':
for (; offset < max; offset += stride) {
results.push(view.getUintBits(offset, context.bits));
}
break;
case 'float16':
for (; offset < max; offset += stride) {
results.push(view.getFloat16(offset, this._littleEndian));
}
break;
case 'float32':
for (; offset < max; offset += stride) {
results.push(view.getFloat32(offset, this._littleEndian));
}
break;
case 'float64':
for (; offset < max; offset += stride) {
results.push(view.getFloat64(offset, this._littleEndian));
}
break;
case 'bfloat16':
for (; offset < max; offset += stride) {
results.push(view.getBfloat16(offset, this._littleEndian));
}
break;
case 'complex64':
for (; offset < max; offset += stride) {
results.push(view.getComplex64(offset, this._littleEndian));
}
break;
case 'complex128':
for (; offset < size; offset += stride) {
results.push(view.getComplex128(offset, this._littleEndian));
}
break;
case 'float8e4m3fn':
for (; offset < size; offset += stride) {
results.push(view.getFloat8e4m3(offset, true, false));
}
break;
case 'float8e4m3fnuz':
for (; offset < size; offset += stride) {
results.push(view.getFloat8e4m3(offset, true, true));
}
break;
case 'float8e5m2':
for (; offset < size; offset += stride) {
results.push(view.getFloat8e5m2(offset, false, false));
}
break;
case 'float8e5m2fnuz':
for (; offset < size; offset += stride) {
results.push(view.getFloat8e5m2(offset, true, true));
}
break;
default:
throw new Error("Unsupported tensor data type '" + dataType + "'.");
}
context.count += length;
if (ellipsis) {
results.push('...');
}
} else {
for (let j = 0; j < size; j++) {
if (context.count >= context.limit) {
results.push('...');
return results;
}
const nextOffset = offset + (j * stride);
results.push(this._decodeData(context, dimension + 1, nextOffset));
}
}
if (context.dimensions.length == 0) {
return results[0];
}
return results;
}
_decodeValues(context, dimension, position) {
const results = [];
const shape = (context.dimensions.length == 0) ? [1] : context.dimensions;
const size = shape[dimension];
const dataType = context.dataType;
const stride = context.stride[dimension];
if (dimension == shape.length - 1) {
const ellipsis = (context.count + size) > context.limit;
const length = ellipsis ? context.limit - context.count : size;
const data = context.data;
for (let i = 0; i < length; i++) {
if (context.count > context.limit) {
results.push('...');
return results;
}
switch (dataType) {
case 'boolean':
results.push(data[position] === 0 ? false : true);
break;
default:
results.push(data[position]);
break;
}
position += stride;
context.count++;
}
} else {
for (let i = 0; i < size; i++) {
if (context.count >= context.limit) {
results.push('...');
return results;
}
const nextPosition = position + (i * stride);
results.push(this._decodeValues(context, dimension + 1, nextPosition));
}
}
if (context.dimensions.length == 0) {
return results[0];
}
return results;
}
static _stringify(value, indentation, indent) {
if (Array.isArray(value)) {
const result = [];
result.push(indentation + '[');
const items = value.map((item) => view.Tensor._stringify(item, indentation + indent, indent));
if (items.length > 0) {
result.push(items.join(',\n'));
}
result.push(indentation + ']');
return result.join('\n');
}
if (value === null) {
return indentation + 'null';
}
switch (typeof value) {
case 'boolean':
return indentation + value.toString();
case 'string':
return indentation + '"' + value + '"';
case 'number':
if (value == Infinity) {
return indentation + 'Infinity';
}
if (value == -Infinity) {
return indentation + '-Infinity';
}
if (isNaN(value)) {
return indentation + 'NaN';
}
return indentation + value.toString();
default:
if (value && value.toString) {
return indentation + value.toString();
}
return indentation + '(undefined)';
}
}
};
view.Documentation = class {
static format(source) {
if (source) {
const generator = new markdown.Generator();
const target = {};
if (source.name !== undefined) {
target.name = source.name;
}
if (source.module !== undefined) {
target.module = source.module;
}
if (source.category !== undefined) {
target.category = source.category;
}
if (source.summary !== undefined) {
target.summary = generator.html(source.summary);
}
if (source.description !== undefined) {
target.description = generator.html(source.description);
}
if (Array.isArray(source.attributes)) {
target.attributes = source.attributes.map((source) => {
const target = {};
target.name = source.name;
if (source.type !== undefined) {
target.type = source.type;
}
if (source.option !== undefined) {
target.option = source.option;
}
if (source.optional !== undefined) {
target.optional = source.optional;
}
if (source.required !== undefined) {
target.required = source.required;
}
if (source.minimum !== undefined) {
target.minimum = source.minimum;
}
if (source.src !== undefined) {
target.src = source.src;
}
if (source.src_type !== undefined) {
target.src_type = source.src_type;
}
if (source.description !== undefined) {
target.description = generator.html(source.description);
}
if (source.default !== undefined) {
target.default = source.default;
}
if (source.visible !== undefined) {
target.visible = source.visible;
}
return target;
});
}
if (Array.isArray(source.inputs)) {
target.inputs = source.inputs.map((source) => {
const target = {};
target.name = source.name;
if (source.type !== undefined) {
target.type = source.type;
}
if (source.description !== undefined) {
target.description = generator.html(source.description);
}
if (source.default !== undefined) {
target.default = source.default;
}
if (source.src !== undefined) {
target.src = source.src;
}
if (source.list !== undefined) {
target.list = source.list;
}
if (source.isRef !== undefined) {
target.isRef = source.isRef;
}
if (source.typeAttr !== undefined) {
target.typeAttr = source.typeAttr;
}
if (source.numberAttr !== undefined) {
target.numberAttr = source.numberAttr;
}
if (source.typeListAttr !== undefined) {
target.typeListAttr = source.typeListAttr;
}
if (source.option !== undefined) {
target.option = source.option;
}
if (source.optional !== undefined) {
target.optional = source.optional;
}
if (source.visible !== undefined) {
target.visible = source.visible;
}
return target;
});
}
if (Array.isArray(source.outputs)) {
target.outputs = source.outputs.map((source) => {
const target = {};
target.name = source.name;
if (source.type) {
target.type = source.type;
}
if (source.description !== undefined) {
target.description = generator.html(source.description);
}
if (source.list !== undefined) {
target.list = source.list;
}
if (source.typeAttr !== undefined) {
target.typeAttr = source.typeAttr;
}
if (source.typeListAttr !== undefined) {
target.typeListAttr = source.typeAttr;
}
if (source.numberAttr !== undefined) {
target.numberAttr = source.numberAttr;
}
if (source.isRef !== undefined) {
target.isRef = source.isRef;
}
if (source.option !== undefined) {
target.option = source.option;
}
return target;
});
}
if (Array.isArray(source.references)) {
target.references = source.references.map((source) => {
if (source) {
target.description = generator.html(source.description);
}
return target;
});
}
if (source.version !== undefined) {
target.version = source.version;
}
if (source.operator !== undefined) {
target.operator = source.operator;
}
if (source.identifier !== undefined) {
target.identifier = source.identifier;
}
if (source.package !== undefined) {
target.package = source.package;
}
if (source.support_level !== undefined) {
target.support_level = source.support_level;
}
if (source.min_input !== undefined) {
target.min_input = source.min_input;
}
if (source.max_input !== undefined) {
target.max_input = source.max_input;
}
if (source.min_output !== undefined) {
target.min_output = source.min_output;
}
if (source.max_input !== undefined) {
target.max_output = source.max_output;
}
if (source.inputs_range !== undefined) {
target.inputs_range = source.inputs_range;
}
if (source.outputs_range !== undefined) {
target.outputs_range = source.outputs_range;
}
if (source.examples !== undefined) {
target.examples = source.examples;
}
if (source.constants !== undefined) {
target.constants = source.constants;
}
if (source.type_constraints !== undefined) {
target.type_constraints = source.type_constraints;
}
return target;
}
return '';
}
};
view.Formatter = class {
constructor(value, type, quote) {
this._value = value;
this._type = type;
this._quote = quote;
this._values = new Set();
}
toString() {
return this._format(this._value, this._type, this._quote);
}
_format(value, type, quote) {
if (value && value.__class__ && value.__class__.__module__ === 'builtins' && value.__class__.__name__ === 'type') {
return value.__module__ + '.' + value.__name__;
}
if (value && value.__class__ && value.__class__.__module__ === 'builtins' && value.__class__.__name__ === 'function') {
return value.__module__ + '.' + value.__name__;
}
if (typeof value === 'function') {
return value();
}
if (value && Number.isInteger(value)) {
return value.toString();
}
if (Number.isNaN(value)) {
return 'NaN';
}
switch (type) {
case 'shape':
return value ? value.toString() : '(null)';
case 'shape[]':
if (value && !Array.isArray(value)) {
throw new Error("Invalid shape '" + JSON.stringify(value) + "'.");
}
return value ? value.map((item) => item.toString()).join(', ') : '(null)';
case 'graph':
return value ? value.name : '(null)';
case 'graph[]':
return value ? value.map((graph) => graph.name).join(', ') : '(null)';
case 'tensor':
if (value && value.type && value.type.shape && value.type.shape.dimensions && value.type.shape.dimensions.length == 0) {
return value.toString();
}
return '[...]';
case 'object':
case 'function':
return value.type.name;
case 'object[]':
case 'function[]':
return value ? value.map((item) => item.type.name).join(', ') : '(null)';
case 'type':
return value ? value.toString() : '(null)';
case 'type[]':
return value ? value.map((item) => item.toString()).join(', ') : '(null)';
default:
break;
}
if (typeof value === 'string' && (!type || type != 'string')) {
return quote ? '"' + value + '"' : value;
}
if (Array.isArray(value)) {
if (value.length == 0) {
return quote ? '[]' : '';
}
let ellipsis = false;
if (value.length > 1000) {
value = value.slice(0, 1000);
ellipsis = true;
}
const itemType = (type && type.endsWith('[]')) ? type.substring(0, type.length - 2) : null;
const array = value.map((item) => {
if (item && Number.isInteger(item)) {
return item.toString();
}
if (Number.isNaN(item)) {
return 'NaN';
}
const quote = !itemType || itemType === 'string';
return this._format(item, itemType, quote);
});
if (ellipsis) {
array.push('\u2026');
}
return quote ? ['[', array.join(', '), ']'].join(' ') : array.join(', ');
}
if (value === null) {
return quote ? 'null' : '';
}
if (value === undefined) {
return 'undefined';
}
if (value !== Object(value)) {
return value.toString();
}
if (this._values.has(value)) {
return '\u2026';
}
this._values.add(value);
let list = null;
const entries = Object.entries(value).filter(([name]) => !name.startsWith('__') && !name.endsWith('__'));
if (entries.length == 1) {
list = [this._format(entries[0][1], null, true)];
} else {
list = entries.map(([name, value]) => name + ': ' + this._format(value, null, true));
}
let objectType = value.__type__;
if (!objectType && value.constructor.name && value.constructor.name !== 'Object') {
objectType = value.constructor.name;
}
if (objectType) {
return objectType + (list.length == 0 ? '()' : ['(', list.join(', '), ')'].join(''));
}
switch (list.length) {
case 0:
return quote ? '()' : '';
case 1:
return list[0];
default:
return quote ? ['(', list.join(', '), ')'].join(' ') : list.join(', ');
}
}
};
markdown.Generator = class {
constructor() {
this._newlineRegExp = /^\n+/;
this._codeRegExp = /^( {4}[^\n]+\n*)+/;
this._fencesRegExp = /^ {0,3}(`{3,}(?=[^`\n]*\n)|~{3,})([^\n]*)\n(?:|([\s\S]*?)\n)(?: {0,3}\1[~`]* *(?:\n+|$)|$)/;
this._hrRegExp = /^ {0,3}((?:- *){3,}|(?:_ *){3,}|(?:\* *){3,})(?:\n+|$)/;
this._headingRegExp = /^ {0,3}(#{1,6}) +([^\n]*?)(?: +#+)? *(?:\n+|$)/;
this._blockquoteRegExp = /^( {0,3}> ?(([^\n]+(?:\n(?! {0,3}((?:- *){3,}|(?:_ *){3,}|(?:\* *){3,})(?:\n+|$)| {0,3}#{1,6} | {0,3}>| {0,3}(?:`{3,}(?=[^`\n]*\n)|~{3,})[^\n]*\n| {0,3}(?:[*+-]|1[.)]) |<\/?(?:address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|section|source|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul)(?: +|\n|\/?>)|<(?:script|pre|style|!--))[^\n]+)*)|[^\n]*)(?:\n|$))+/;
this._listRegExp = /^( {0,3})((?:[*+-]|\d{1,9}[.)])) [\s\S]+?(?:\n+(?=\1?(?:(?:- *){3,}|(?:_ *){3,}|(?:\* *){3,})(?:\n+|$))|\n+(?= {0,3}\[((?!\s*\])(?:\\[[\]]|[^[\]])+)\]: *\n? *([^\s>]+)>?(?:(?: +\n? *| *\n *)((?:"(?:\\"?|[^"\\])*"|'[^'\n]*(?:\n[^'\n]+)*\n?'|\([^()]*\))))? *(?:\n+|$))|\n{2,}(?! )(?!\1(?:[*+-]|\d{1,9}[.)]) )\n*|\s*$)/;
this._htmlRegExp = /^ {0,3}(?:<(script|pre|style)[\s>][\s\S]*?(?:<\/\1>[^\n]*\n+|$)||$)[^\n]*(\n+|$)|<\?[\s\S]*?(?:\?>\n*|$)|\n*|$)|\n*|$)|<\/?(address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|section|source|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul)(?: +|\n|\/?>)[\s\S]*?(?:\n{2,}|$)|<(?!script|pre|style)([a-z][\w-]*)(?: +[a-zA-Z:_][\w.:-]*(?: *= *"[^"\n]*"| *= *'[^'\n]*'| *= *[^\s"'=<>`]+)?)*? *\/?>(?=[ \t]*(?:\n|$))[\s\S]*?(?:\n{2,}|$)|<\/(?!script|pre|style)[a-z][\w-]*\s*>(?=[ \t]*(?:\n|$))[\s\S]*?(?:\n{2,}|$))/i;
this._defRegExp = /^ {0,3}\[((?!\s*\])(?:\\[[\]]|[^[\]])+)\]: *\n? *([^\s>]+)>?(?:(?: +\n? *| *\n *)((?:"(?:\\"?|[^"\\])*"|'[^'\n]*(?:\n[^'\n]+)*\n?'|\([^()]*\))))? *(?:\n+|$)/;
this._nptableRegExp = /^ *([^|\n ].*\|.*)\n {0,3}([-:]+ *\|[-| :]*)(?:\n((?:(?!\n| {0,3}((?:- *){3,}|(?:_ *){3,}|(?:\* *){3,})(?:\n+|$)| {0,3}#{1,6} | {0,3}>| {4}[^\n]| {0,3}(?:`{3,}(?=[^`\n]*\n)|~{3,})[^\n]*\n| {0,3}(?:[*+-]|1[.)]) |<\/?(?:address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|section|source|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul)(?: +|\n|\/?>)|<(?:script|pre|style|!--)).*(?:\n|$))*)\n*|$)/;
this._tableRegExp = /^ *\|(.+)\n {0,3}\|?( *[-:]+[-| :]*)(?:\n *((?:(?!\n| {0,3}((?:- *){3,}|(?:_ *){3,}|(?:\* *){3,})(?:\n+|$)| {0,3}#{1,6} | {0,3}>| {4}[^\n]| {0,3}(?:`{3,}(?=[^`\n]*\n)|~{3,})[^\n]*\n| {0,3}(?:[*+-]|1[.)]) |<\/?(?:address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|section|source|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul)(?: +|\n|\/?>)|<(?:script|pre|style|!--)).*(?:\n|$))*)\n*|$)/;
this._lheadingRegExp = /^([^\n]+)\n {0,3}(=+|-+) *(?:\n+|$)/;
this._textRegExp = /^[^\n]+/;
this._bulletRegExp = /(?:[*+-]|\d{1,9}[.)])/;
this._itemRegExp = /^( *)((?:[*+-]|\d{1,9}[.)])) ?[^\n]*(?:\n(?!\1(?:[*+-]|\d{1,9}[.)]) ?)[^\n]*)*/gm;
this._paragraphRegExp = /^([^\n]+(?:\n(?! {0,3}((?:- *){3,}|(?:_ *){3,}|(?:\* *){3,})(?:\n+|$)| {0,3}#{1,6} | {0,3}>| {0,3}(?:`{3,}(?=[^`\n]*\n)|~{3,})[^\n]*\n| {0,3}(?:[*+-]|1[.)]) |<\/?(?:address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|section|source|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul)(?: +|\n|\/?>)|<(?:script|pre|style|!--))[^\n]+)*)/;
this._backpedalRegExp = /(?:[^?!.,:;*_~()&]+|\([^)]*\)|&(?![a-zA-Z0-9]+;$)|[?!.,:;*_~)]+(?!$))+/;
this._escapeRegExp = /^\\([!"#$%&'()*+,\-./:;<=>?@[\]\\^_`{|}~~|])/;
this._escapesRegExp = /\\([!"#$%&'()*+,\-./:;<=>?@[\]\\^_`{|}~])/g;
/* eslint-disable no-control-regex */
this._autolinkRegExp = /^<([a-zA-Z][a-zA-Z0-9+.-]{1,31}:[^\s\x00-\x1f<>]*|[a-zA-Z0-9.!#$%&'*+/=?_`{|}~-]+(@)[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+(?![-_]))>/;
this._linkRegExp = /^!?\[((?:\[(?:\\.|[^[\]\\])*\]|\\.|`[^`]*`|[^[\]\\`])*?)\]\(\s*(<(?:\\[<>]?|[^\s<>\\])*>|[^\s\x00-\x1f]*)(?:\s+("(?:\\"?|[^"\\])*"|'(?:\\'?|[^'\\])*'|\((?:\\\)?|[^)\\])*\)))?\s*\)/;
/* eslint-enable no-control-regex */
this._urlRegExp = /^((?:ftp|https?):\/\/|www\.)(?:[a-zA-Z0-9-]+\.?)+[^\s<]*|^[A-Za-z0-9._+-]+(@)[a-zA-Z0-9-_]+(?:\.[a-zA-Z0-9-_]*[a-zA-Z0-9])+(?![-_])/i;
this._tagRegExp = /^|^<\/[a-zA-Z][\w:-]*\s*>|^<[a-zA-Z][\w-]*(?:\s+[a-zA-Z:_][\w.:-]*(?:\s*=\s*"[^"]*"|\s*=\s*'[^']*'|\s*=\s*[^\s"'=<>`]+)?)*?\s*\/?>|^<\?[\s\S]*?\?>|^|^/;
this._reflinkRegExp = /^!?\[((?:\[(?:\\.|[^[\]\\])*\]|\\.|`[^`]*`|[^[\]\\`])*?)\]\[(?!\s*\])((?:\\[[\]]?|[^[\]\\])+)\]/;
this._nolinkRegExp = /^!?\[(?!\s*\])((?:\[[^[\]]*\]|\\[[\]]|[^[\]])*)\](?:\[\])?/;
this._reflinkSearchRegExp = /!?\[((?:\[(?:\\.|[^[\]\\])*\]|\\.|`[^`]*`|[^[\]\\`])*?)\]\[(?!\s*\])((?:\\[[\]]?|[^[\]\\])+)\]|!?\[(?!\s*\])((?:\[[^[\]]*\]|\\[[\]]|[^[\]])*)\](?:\[\])?(?!\()/g;
this._strongStartRegExp = /^(?:(\*\*(?=[*!"#$%&'()+\-.,/:;<=>?@[\]`{|}~]))|\*\*)(?![\s])|__/;
this._strongMiddleRegExp = /^\*\*(?:(?:(?!__[^_]*?__|\*\*\[^\*\]*?\*\*)(?:[^*]|\\\*)|__[^_]*?__|\*\*\[^\*\]*?\*\*)|\*(?:(?!__[^_]*?__|\*\*\[^\*\]*?\*\*)(?:[^*]|\\\*)|__[^_]*?__|\*\*\[^\*\]*?\*\*)*?\*)+?\*\*$|^__(?![\s])((?:(?:(?!__[^_]*?__|\*\*\[^\*\]*?\*\*)(?:[^_]|\\_)|__[^_]*?__|\*\*\[^\*\]*?\*\*)|_(?:(?!__[^_]*?__|\*\*\[^\*\]*?\*\*)(?:[^_]|\\_)|__[^_]*?__|\*\*\[^\*\]*?\*\*)*?_)+?)__$/;
this._strongEndAstRegExp = /[^!"#$%&'()+\-.,/:;<=>?@[\]`{|}~\s]\*\*(?!\*)|[!"#$%&'()+\-.,/:;<=>?@[\]`{|}~]\*\*(?!\*)(?:(?=[!"#$%&'()+\-.,/:;<=>?@[\]`{|}~_\s]|$))/g;
this._strongEndUndRegExp = /[^\s]__(?!_)(?:(?=[!"#$%&'()+\-.,/:;<=>?@[\]`{|}~*\s])|$)/g;
this._emStartRegExp = /^(?:(\*(?=[!"#$%&'()+\-.,/:;<=>?@[\]`{|}~]))|\*)(?![*\s])|_/;
this._emMiddleRegExp = /^\*(?:(?:(?!__[^_]*?__|\*\*\[^\*\]*?\*\*)(?:[^*]|\\\*)|__[^_]*?__|\*\*\[^\*\]*?\*\*)|\*(?:(?!__[^_]*?__|\*\*\[^\*\]*?\*\*)(?:[^*]|\\\*)|__[^_]*?__|\*\*\[^\*\]*?\*\*)*?\*)+?\*$|^_(?![_\s])(?:(?:(?!__[^_]*?__|\*\*\[^\*\]*?\*\*)(?:[^_]|\\_)|__[^_]*?__|\*\*\[^\*\]*?\*\*)|_(?:(?!__[^_]*?__|\*\*\[^\*\]*?\*\*)(?:[^_]|\\_)|__[^_]*?__|\*\*\[^\*\]*?\*\*)*?_)+?_$/;
this._emEndAstRegExp = /[^!"#$%&'()+\-.,/:;<=>?@[\]`{|}~\s]\*(?!\*)|[!"#$%&'()+\-.,/:;<=>?@[\]`{|}~]\*(?!\*)(?:(?=[!"#$%&'()+\-.,/:;<=>?@[\]`{|}~_\s]|$))/g;
this._emEndUndRegExp = /[^\s]_(?!_)(?:(?=[!"#$%&'()+\-.,/:;<=>?@[\]`{|}~*\s])|$)/g;
this._codespanRegExp = /^(`+)([^`]|[^`][\s\S]*?[^`])\1(?!`)/;
this._brRegExp = /^( {2,}|\\)\n(?!\s*$)/;
this._delRegExp = /^~+(?=\S)([\s\S]*?\S)~+/;
this._textspanRegExp = /^(`+|[^`])(?:(?= {2,}\n)|[\s\S]*?(?:(?=[\\?@[\]`{|}~])/;
this._blockSkipRegExp = /\[[^\]]*?\]\([^)]*?\)|`[^`]*?`|<[^>]*?>/g;
this._escapeTestRegExp = /[&<>"']/;
this._escapeReplaceRegExp = /[&<>"']/g;
this._escapeTestNoEncodeRegExp = /[<>"']|&(?!#?\w+;)/;
this._escapeReplaceNoEncodeRegExp = /[<>"']|&(?!#?\w+;)/g;
this._escapeReplacementsMap = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' };
}
html(source) {
const tokens = [];
const links = new Map();
source = source.replace(/\r\n|\r/g, '\n').replace(/\t/g, ' ');
this._tokenize(source, tokens, links, true);
this._tokenizeBlock(tokens, links);
const result = this._render(tokens, true);
return result;
}
_tokenize(source, tokens, links, top) {
source = source.replace(/^ +$/gm, '');
while (source) {
let match = this._newlineRegExp.exec(source);
if (match) {
source = source.substring(match[0].length);
if (match[0].length > 1) {
tokens.push({ type: 'space' });
}
continue;
}
match = this._codeRegExp.exec(source);
if (match) {
source = source.substring(match[0].length);
const lastToken = tokens[tokens.length - 1];
if (lastToken && lastToken.type === 'paragraph') {
lastToken.text += '\n' + match[0].trimRight();
} else {
const text = match[0].replace(/^ {4}/gm, '').replace(/\n*$/, '');
tokens.push({ type: 'code', text: text });
}
continue;
}
match = this._fencesRegExp.exec(source);
if (match) {
source = source.substring(match[0].length);
const language = match[2] ? match[2].trim() : match[2];
let content = match[3] || '';
const matchIndent = match[0].match(/^(\s+)(?:```)/);
if (matchIndent !== null) {
const [, indent] = matchIndent;
content = content.split('\n').map((node) => {
const match = node.match(/^\s+/);
return (match !== null && match[0].length >= indent.length) ? node.slice(indent.length) : node;
}).join('\n');
}
tokens.push({ type: 'code', language: language, text: content });
continue;
}
match = this._headingRegExp.exec(source);
if (match) {
source = source.substring(match[0].length);
tokens.push({ type: 'heading', depth: match[1].length, text: match[2] });
continue;
}
match = this._nptableRegExp.exec(source);
if (match) {
const header = this._splitCells(match[1].replace(/^ *| *\| *$/g, ''));
const align = match[2].replace(/^ *|\| *$/g, '').split(/ *\| */);
if (header.length === align.length) {
const cells = match[3] ? match[3].replace(/\n$/, '').split('\n') : [];
const token = { type: 'table', header: header, align: align, cells: cells, raw: match[0] };
for (let i = 0; i < token.align.length; i++) {
if (/^ *-+: *$/.test(token.align[i])) {
token.align[i] = 'right';
} else if (/^ *:-+: *$/.test(token.align[i])) {
token.align[i] = 'center';
} else if (/^ *:-+ *$/.test(token.align[i])) {
token.align[i] = 'left';
} else {
token.align[i] = null;
}
}
token.cells = token.cells.map((cell) => this._splitCells(cell, token.header.length));
source = source.substring(token.raw.length);
tokens.push(token);
continue;
}
}
match = this._hrRegExp.exec(source);
if (match) {
source = source.substring(match[0].length);
tokens.push({ type: 'hr' });
continue;
}
match = this._blockquoteRegExp.exec(source);
if (match) {
source = source.substring(match[0].length);
const text = match[0].replace(/^ *> ?/gm, '');
tokens.push({ type: 'blockquote', text: text, tokens: this._tokenize(text, [], links, top) });
continue;
}
match = this._listRegExp.exec(source);
if (match) {
const [value, , bull] = match;
const ordered = bull.length > 1;
const parent = bull[bull.length - 1] === ')';
let raw = value;
const list = { type: 'list', raw: raw, ordered: ordered, start: ordered ? +bull.slice(0, -1) : '', loose: false, items: [] };
const itemMatch = value.match(this._itemRegExp);
let next = false;
const length = itemMatch.length;
for (let i = 0; i < length; i++) {
let item = itemMatch[i];
raw = item;
let space = item.length;
item = item.replace(/^ *([*+-]|\d+[.)]) ?/, '');
if (~item.indexOf('\n ')) {
space -= item.length;
item = item.replace(new RegExp('^ {1,' + space + '}', 'gm'), '');
}
if (i !== length - 1) {
const [bullet] = this._bulletRegExp.exec(itemMatch[i + 1]);
if (ordered ? bullet.length === 1 || (!parent && bullet[bullet.length - 1] === ')') : (bullet.length > 1)) {
const addBack = itemMatch.slice(i + 1).join('\n');
list.raw = list.raw.substring(0, list.raw.length - addBack.length);
i = length - 1;
}
}
let loose = next || /\n\n(?!\s*$)/.test(item);
if (i !== length - 1) {
next = item.charAt(item.length - 1) === '\n';
if (!loose) {
loose = next;
}
}
if (loose) {
list.loose = true;
}
const task = /^\[[ xX]\] /.test(item);
let checked = undefined;
if (task) {
checked = item[1] !== ' ';
item = item.replace(/^\[[ xX]\] +/, '');
}
list.items.push({ type: 'list_item', raw, task: task, checked: checked, loose: loose, text: item });
}
source = source.substring(list.raw.length);
for (const item of list.items) {
item.tokens = this._tokenize(item.text, [], links, false);
}
tokens.push(list);
continue;
}
match = this._htmlRegExp.exec(source);
if (match) {
source = source.substring(match[0].length);
tokens.push({ type: 'html', pre: (match[1] === 'pre' || match[1] === 'script' || match[1] === 'style'), text: match[0] });
continue;
}
if (top) {
match = this._defRegExp.exec(source);
if (match) {
source = source.substring(match[0].length);
match[3] = match[3] ? match[3].substring(1, match[3].length - 1) : match[3];
const tag = match[1].toLowerCase().replace(/\s+/g, ' ');
if (!links.has(tag)) {
links.set(tag, { href: match[2], title: match[3] });
}
continue;
}
}
match = this._tableRegExp.exec(source);
if (match) {
const header = this._splitCells(match[1].replace(/^ *| *\| *$/g, ''));
const align = match[2].replace(/^ *|\| *$/g, '').split(/ *\| */);
if (header.length === align.length) {
const cells = match[3] ? match[3].replace(/\n$/, '').split('\n') : [];
const token = { type: 'table', header: header, align: align, cells: cells, raw: match[0] };
for (let i = 0; i < token.align.length; i++) {
if (/^ *-+: *$/.test(token.align[i])) {
token.align[i] = 'right';
} else if (/^ *:-+: *$/.test(token.align[i])) {
token.align[i] = 'center';
} else if (/^ *:-+ *$/.test(token.align[i])) {
token.align[i] = 'left';
} else {
token.align[i] = null;
}
}
token.cells = token.cells.map((cell) => this._splitCells(cell.replace(/^ *\| *| *\| *$/g, ''), token.header.length));
source = source.substring(token.raw.length);
tokens.push(token);
continue;
}
}
match = this._lheadingRegExp.exec(source);
if (match) {
source = source.substring(match[0].length);
tokens.push({ type: 'heading', depth: match[2].charAt(0) === '=' ? 1 : 2, text: match[1] });
continue;
}
if (top) {
match = this._paragraphRegExp.exec(source);
if (match) {
source = source.substring(match[0].length);
tokens.push({ type: 'paragraph', text: match[1].charAt(match[1].length - 1) === '\n' ? match[1].slice(0, -1) : match[1] });
continue;
}
}
match = this._textRegExp.exec(source);
if (match) {
source = source.substring(match[0].length);
const lastToken = tokens[tokens.length - 1];
if (lastToken && lastToken.type === 'text') {
lastToken.text += '\n' + match[0];
} else {
tokens.push({ type: 'text', text: match[0] });
}
continue;
}
throw new Error("Unexpected '" + source.charCodeAt(0) + "'.");
}
return tokens;
}
_tokenizeInline(source, links, inLink, inRawBlock, prevChar) {
const tokens = [];
let maskedSource = source;
if (links.size > 0) {
while (maskedSource) {
const match = this._reflinkSearchRegExp.exec(maskedSource);
if (match) {
if (links.has(match[0].slice(match[0].lastIndexOf('[') + 1, -1))) {
maskedSource = maskedSource.slice(0, match.index) + '[' + 'a'.repeat(match[0].length - 2) + ']' + maskedSource.slice(this._reflinkSearchRegExp.lastIndex);
}
continue;
}
break;
}
}
while (maskedSource) {
const match = this._blockSkipRegExp.exec(maskedSource);
if (match) {
maskedSource = maskedSource.slice(0, match.index) + '[' + 'a'.repeat(match[0].length - 2) + ']' + maskedSource.slice(this._blockSkipRegExp.lastIndex);
continue;
}
break;
}
while (source) {
let match = this._escapeRegExp.exec(source);
if (match) {
source = source.substring(match[0].length);
tokens.push({ type: 'escape', text: this._escape(match[1]) });
continue;
}
match = this._tagRegExp.exec(source);
if (match) {
source = source.substring(match[0].length);
if (!inLink && /^/i.test(match[0])) {
inLink = false;
}
if (!inRawBlock && /^<(pre|code|kbd|script)(\s|>)/i.test(match[0])) {
inRawBlock = true;
} else if (inRawBlock && /^<\/(pre|code|kbd|script)(\s|>)/i.test(match[0])) {
inRawBlock = false;
}
tokens.push({ type: 'html', raw: match[0], text: match[0] });
continue;
}
match = this._linkRegExp.exec(source);
if (match) {
let index = -1;
const [, , ref] = match;
if (ref.indexOf(')') !== -1) {
let level = 0;
for (let i = 0; i < ref.length; i++) {
switch (ref[i]) {
case '\\':
i++;
break;
case '(':
level++;
break;
case ')':
level--;
if (level < 0) {
index = i;
i = ref.length;
}
break;
default:
break;
}
}
}
if (index > -1) {
const length = (match[0].indexOf('!') === 0 ? 5 : 4) + match[1].length + index;
match[2] = match[2].substring(0, index);
match[0] = match[0].substring(0, length).trim();
match[3] = '';
}
const title = (match[3] ? match[3].slice(1, -1) : '').replace(this._escapesRegExp, '$1');
const href = match[2].trim().replace(/^<([\s\S]*)>$/, '$1').replace(this._escapesRegExp, '$1');
const token = this._outputLink(match, href, title);
source = source.substring(match[0].length);
if (token.type === 'link') {
token.tokens = this._tokenizeInline(token.text, links, true, inRawBlock, '');
}
tokens.push(token);
continue;
}
match = this._reflinkRegExp.exec(source) || this._nolinkRegExp.exec(source);
if (match) {
let link = (match[2] || match[1]).replace(/\s+/g, ' ');
link = links.get(link.toLowerCase());
if (!link || !link.href) {
const text = match[0].charAt(0);
source = source.substring(text.length);
tokens.push({ type: 'text', text: text });
} else {
source = source.substring(match[0].length);
const token = this._outputLink(match, link);
if (token.type === 'link') {
token.tokens = this._tokenizeInline(token.text, links, true, inRawBlock, '');
}
tokens.push(token);
}
continue;
}
match = this._strongStartRegExp.exec(source);
if (match && (!match[1] || (match[1] && (prevChar === '' || this._punctuationRegExp.exec(prevChar))))) {
const masked = maskedSource.slice(-1 * source.length);
const endReg = match[0] === '**' ? this._strongEndAstRegExp : this._strongEndUndRegExp;
endReg.lastIndex = 0;
let cap;
while ((match = endReg.exec(masked)) != null) {
cap = this._strongMiddleRegExp.exec(masked.slice(0, match.index + 3));
if (cap) {
break;
}
}
if (cap) {
const text = source.substring(2, cap[0].length - 2);
source = source.substring(cap[0].length);
tokens.push({ type: 'strong', text: text, tokens: this._tokenizeInline(text, links, inLink, inRawBlock, '') });
continue;
}
}
match = this._emStartRegExp.exec(source);
if (match && (!match[1] || (match[1] && (prevChar === '' || this._punctuationRegExp.exec(prevChar))))) {
const masked = maskedSource.slice(-1 * source.length);
const endReg = match[0] === '*' ? this._emEndAstRegExp : this._emEndUndRegExp;
endReg.lastIndex = 0;
let cap;
while ((match = endReg.exec(masked)) != null) {
cap = this._emMiddleRegExp.exec(masked.slice(0, match.index + 2));
if (cap) {
break;
}
}
if (cap) {
const text = source.slice(1, cap[0].length - 1);
source = source.substring(cap[0].length);
tokens.push({ type: 'em', text: text, tokens: this._tokenizeInline(text, links, inLink, inRawBlock, '') });
continue;
}
}
match = this._codespanRegExp.exec(source);
if (match) {
source = source.substring(match[0].length);
let content = match[2].replace(/\n/g, ' ');
if (/[^ ]/.test(content) && content.startsWith(' ') && content.endsWith(' ')) {
content = content.substring(1, content.length - 1);
}
tokens.push({ type: 'codespan', text: this._encode(content) });
continue;
}
match = this._brRegExp.exec(source);
if (match) {
source = source.substring(match[0].length);
tokens.push({ type: 'br' });
continue;
}
match = this._delRegExp.exec(source);
if (match) {
const [value, text] = match;
source = source.substring(value.length);
tokens.push({ type: 'del', text: text, tokens: this._tokenizeInline(text, links, inLink, inRawBlock, '') });
continue;
}
match = this._autolinkRegExp.exec(source);
if (match) {
source = source.substring(match[0].length);
const text = this._escape(match[1]);
const href = match[2] === '@' ? 'mailto:' + text : text;
tokens.push({ type: 'link', text: text, href: href, tokens: [{ type: 'text', raw: text, text }] });
continue;
}
if (!inLink) {
match = this._urlRegExp.exec(source);
if (match) {
const email = match[2] === '@';
let [value] = match;
if (!email) {
let prevCapZero;
do {
prevCapZero = value;
[value] = this._backpedalRegExp.exec(value);
} while (prevCapZero !== value);
}
const text = this._escape(value);
const href = email ? ('mailto:' + text) : (match[1] === 'www.' ? 'http://' + text : text);
source = source.substring(value.length);
tokens.push({ type: 'link', text: text, href: href, tokens: [{ type: 'text', text: text }] });
continue;
}
}
match = this._textspanRegExp.exec(source);
if (match) {
source = source.substring(match[0].length);
prevChar = match[0].slice(-1);
tokens.push({ type: 'text', text: inRawBlock ? match[0] : this._escape(match[0]) });
continue;
}
throw new Error("Unexpected '" + source.charCodeAt(0) + "'.");
}
return tokens;
}
_tokenizeBlock(tokens, links) {
for (const token of tokens) {
switch (token.type) {
case 'paragraph':
case 'text':
case 'heading': {
token.tokens = this._tokenizeInline(token.text, links, false, false, '');
break;
}
case 'table': {
token.tokens = {};
token.tokens.header = token.header.map((header) => this._tokenizeInline(header, links, false, false, ''));
token.tokens.cells = token.cells.map((cell) => cell.map((row) => this._tokenizeInline(row, links, false, false, '')));
break;
}
case 'blockquote': {
this._tokenizeBlock(token.tokens, links);
break;
}
case 'list': {
for (const item of token.items) {
this._tokenizeBlock(item.tokens, links);
}
break;
}
default: {
break;
}
}
}
}
_render(tokens, top) {
let html = '';
while (tokens.length > 0) {
const token = tokens.shift();
switch (token.type) {
case 'space': {
continue;
}
case 'hr': {
html += '
\n';
continue;
}
case 'heading': {
const level = token.depth;
html += '' + this._renderInline(token.tokens) + ' \n';
continue;
}
case 'code': {
const code = token.text;
const [language] = (token.language || '').match(/\S*/);
html += '' + (token.escaped ? code : this._encode(code)) + '
\n';
continue;
}
case 'table': {
let header = '';
let cell = '';
for (let j = 0; j < token.header.length; j++) {
const content = this._renderInline(token.tokens.header[j]);
const align = token.align[j];
cell += '' + content + ' \n';
}
header += '\n' + cell + ' \n';
let body = '';
for (let j = 0; j < token.cells.length; j++) {
const row = token.tokens.cells[j];
cell = '';
for (let k = 0; k < row.length; k++) {
const content = this._renderInline(row[k]);
const align = token.align[k];
cell += '' + content + ' \n';
}
body += '\n' + cell + ' \n';
}
html += '\n\n' + header + '\n' + (body ? '' + body + '' : body) + '
\n';
continue;
}
case 'blockquote': {
html += '\n' + this._render(token.tokens, true) + '
\n';
continue;
}
case 'list': {
const ordered = token.ordered;
const start = token.start;
const loose = token.loose;
let body = '';
for (const item of token.items) {
let itemBody = '';
if (item.task) {
const checkbox = ' ';
if (loose) {
if (item.tokens.length > 0 && item.tokens[0].type === 'text') {
item.tokens[0].text = checkbox + ' ' + item.tokens[0].text;
if (item.tokens[0].tokens && item.tokens[0].tokens.length > 0 && item.tokens[0].tokens[0].type === 'text') {
item.tokens[0].tokens[0].text = checkbox + ' ' + item.tokens[0].tokens[0].text;
}
} else {
item.tokens.unshift({ type: 'text', text: checkbox });
}
} else {
itemBody += checkbox;
}
}
itemBody += this._render(item.tokens, loose);
body += '' + itemBody + ' \n';
}
const type = (ordered ? 'ol' : 'ul');
html += '<' + type + (ordered && start !== 1 ? (' start="' + start + '"') : '') + '>\n' + body + '' + type + '>\n';
continue;
}
case 'html': {
html += token.text;
continue;
}
case 'paragraph': {
html += '' + this._renderInline(token.tokens) + '
\n';
continue;
}
case 'text': {
html += top ? '' : '';
html += token.tokens ? this._renderInline(token.tokens) : token.text;
while (tokens.length > 0 && tokens[0].type === 'text') {
const token = tokens.shift();
html += '\n' + (token.tokens ? this._renderInline(token.tokens) : token.text);
}
html += top ? '
\n' : '';
continue;
}
default: {
throw new Error("Unexpected token type '" + token.type + "'.");
}
}
}
return html;
}
_renderInline(tokens) {
let html = '';
for (const token of tokens) {
switch (token.type) {
case 'escape':
case 'html':
case 'text': {
html += token.text;
break;
}
case 'link': {
const text = this._renderInline(token.tokens);
html += '' + text + '';
break;
}
case 'image': {
html += '
';
break;
}
case 'strong': {
const text = this._renderInline(token.tokens);
html += '' + text + '';
break;
}
case 'em': {
const text = this._renderInline(token.tokens);
html += '' + text + '';
break;
}
case 'codespan': {
html += '' + token.text + '
';
break;
}
case 'br': {
html += '
';
break;
}
case 'del': {
const text = this._renderInline(token.tokens);
html += '' + text + '';
break;
}
default: {
throw new Error("Unexpected token type '" + token.type + "'.");
}
}
}
return html;
}
_outputLink(match, href, title) {
title = title ? this._escape(title) : null;
const text = match[1].replace(/\\([[\]])/g, '$1');
return match[0].charAt(0) !== '!' ?
{ type: 'link', href: href, title: title, text: text } :
{ type: 'image', href: href, title: title, text: this._escape(text) };
}
_splitCells(tableRow, count) {
const row = tableRow.replace(/\|/g, (match, offset, str) => {
let escaped = false;
let position = offset;
while (--position >= 0 && str[position] === '\\') {
escaped = !escaped;
}
return escaped ? '|' : ' |';
});
const cells = row.split(/ \|/);
if (cells.length > count) {
cells.splice(count);
} else {
while (cells.length < count) {
cells.push('');
}
}
return cells.map((cell) => cell.trim().replace(/\\\|/g, '|'));
}
_encode(content) {
if (this._escapeTestRegExp.test(content)) {
return content.replace(this._escapeReplaceRegExp, (ch) => this._escapeReplacementsMap[ch]);
}
return content;
}
_escape(content) {
if (this._escapeTestNoEncodeRegExp.test(content)) {
return content.replace(this._escapeReplaceNoEncodeRegExp, (ch) => this._escapeReplacementsMap[ch]);
}
return content;
}
};
view.Error = class extends Error {
constructor(message) {
super(message);
this.name = 'Error loading model.';
}
};
if (typeof window !== 'undefined' && typeof window === 'object') {
window.View = view.View;
}
if (typeof module !== 'undefined' && typeof module.exports === 'object') {
module.exports = view.View;
}