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 = 'name: ' + (name || ' ') + ''; 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 = 'quantization: ' + '' + content + ''; 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 = 'node: ' + (type || ' ') + ''; 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 = 'name: ' + (name || ' ') + ''; 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 = 'name: ' + name + ''; 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? *]+)>?(?:(?: +\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? *]+)>?(?:(?: +\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 + '\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 += '' + token.text + ''; 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; }