| // Copyright 2015 the V8 project authors. All rights reserved. |
| // Use of this source code is governed by a BSD-style license that can be |
| // found in the LICENSE file. |
| |
| import * as d3 from "d3"; |
| import { layoutNodeGraph } from "../src/graph-layout"; |
| import { GNode, nodeToStr } from "../src/node"; |
| import { NODE_INPUT_WIDTH } from "../src/node"; |
| import { DEFAULT_NODE_BUBBLE_RADIUS } from "../src/node"; |
| import { Edge, edgeToStr } from "../src/edge"; |
| import { PhaseView } from "../src/view"; |
| import { MySelection } from "../src/selection"; |
| import { partial } from "../src/util"; |
| import { NodeSelectionHandler, ClearableHandler } from "./selection-handler"; |
| import { Graph } from "./graph"; |
| import { SelectionBroker } from "./selection-broker"; |
| |
| function nodeToStringKey(n: GNode) { |
| return "" + n.id; |
| } |
| |
| interface GraphState { |
| showTypes: boolean; |
| selection: MySelection; |
| mouseDownNode: any; |
| justDragged: boolean; |
| justScaleTransGraph: boolean; |
| hideDead: boolean; |
| } |
| |
| export class GraphView extends PhaseView { |
| divElement: d3.Selection<any, any, any, any>; |
| svg: d3.Selection<any, any, any, any>; |
| showPhaseByName: (p: string, s: Set<any>) => void; |
| state: GraphState; |
| selectionHandler: NodeSelectionHandler & ClearableHandler; |
| graphElement: d3.Selection<any, any, any, any>; |
| visibleNodes: d3.Selection<any, GNode, any, any>; |
| visibleEdges: d3.Selection<any, Edge, any, any>; |
| drag: d3.DragBehavior<any, GNode, GNode>; |
| panZoom: d3.ZoomBehavior<SVGElement, any>; |
| visibleBubbles: d3.Selection<any, any, any, any>; |
| transitionTimout: number; |
| graph: Graph; |
| broker: SelectionBroker; |
| phaseName: string; |
| toolbox: HTMLElement; |
| |
| createViewElement() { |
| const pane = document.createElement('div'); |
| pane.setAttribute('id', "graph"); |
| return pane; |
| } |
| |
| constructor(idOrContainer: string | HTMLElement, broker: SelectionBroker, |
| showPhaseByName: (s: string) => void, toolbox: HTMLElement) { |
| super(idOrContainer); |
| const view = this; |
| this.broker = broker; |
| this.showPhaseByName = showPhaseByName; |
| this.divElement = d3.select(this.divNode); |
| this.phaseName = ""; |
| this.toolbox = toolbox; |
| const svg = this.divElement.append("svg") |
| .attr('version', '2.0') |
| .attr("width", "100%") |
| .attr("height", "100%"); |
| svg.on("click", function (d) { |
| view.selectionHandler.clear(); |
| }); |
| // Listen for key events. Note that the focus handler seems |
| // to be important even if it does nothing. |
| svg |
| .attr("focusable", false) |
| .on("focus", e => { }) |
| .on("keydown", e => { view.svgKeyDown(); }); |
| |
| view.svg = svg; |
| |
| this.state = { |
| selection: null, |
| mouseDownNode: null, |
| justDragged: false, |
| justScaleTransGraph: false, |
| showTypes: false, |
| hideDead: false |
| }; |
| |
| this.selectionHandler = { |
| clear: function () { |
| view.state.selection.clear(); |
| broker.broadcastClear(this); |
| view.updateGraphVisibility(); |
| }, |
| select: function (nodes: Array<GNode>, selected: boolean) { |
| const locations = []; |
| for (const node of nodes) { |
| if (node.nodeLabel.sourcePosition) { |
| locations.push(node.nodeLabel.sourcePosition); |
| } |
| if (node.nodeLabel.origin && node.nodeLabel.origin.bytecodePosition) { |
| locations.push({ bytecodePosition: node.nodeLabel.origin.bytecodePosition }); |
| } |
| } |
| view.state.selection.select(nodes, selected); |
| broker.broadcastSourcePositionSelect(this, locations, selected); |
| view.updateGraphVisibility(); |
| }, |
| brokeredNodeSelect: function (locations, selected: boolean) { |
| if (!view.graph) return; |
| const selection = view.graph.nodes(n => { |
| return locations.has(nodeToStringKey(n)) |
| && (!view.state.hideDead || n.isLive()); |
| }); |
| view.state.selection.select(selection, selected); |
| // Update edge visibility based on selection. |
| for (const n of view.graph.nodes()) { |
| if (view.state.selection.isSelected(n)) { |
| n.visible = true; |
| n.inputs.forEach(e => { |
| e.visible = e.visible || view.state.selection.isSelected(e.source); |
| }); |
| n.outputs.forEach(e => { |
| e.visible = e.visible || view.state.selection.isSelected(e.target); |
| }); |
| } |
| } |
| view.updateGraphVisibility(); |
| }, |
| brokeredClear: function () { |
| view.state.selection.clear(); |
| view.updateGraphVisibility(); |
| } |
| }; |
| |
| view.state.selection = new MySelection(nodeToStringKey); |
| |
| const defs = svg.append('svg:defs'); |
| defs.append('svg:marker') |
| .attr('id', 'end-arrow') |
| .attr('viewBox', '0 -4 8 8') |
| .attr('refX', 2) |
| .attr('markerWidth', 2.5) |
| .attr('markerHeight', 2.5) |
| .attr('orient', 'auto') |
| .append('svg:path') |
| .attr('d', 'M0,-4L8,0L0,4'); |
| |
| this.graphElement = svg.append("g"); |
| view.visibleEdges = this.graphElement.append("g"); |
| view.visibleNodes = this.graphElement.append("g"); |
| |
| view.drag = d3.drag<any, GNode, GNode>() |
| .on("drag", function (d) { |
| d.x += d3.event.dx; |
| d.y += d3.event.dy; |
| view.updateGraphVisibility(); |
| }); |
| |
| function zoomed() { |
| if (d3.event.shiftKey) return false; |
| view.graphElement.attr("transform", d3.event.transform); |
| return true; |
| } |
| |
| const zoomSvg = d3.zoom<SVGElement, any>() |
| .scaleExtent([0.2, 40]) |
| .on("zoom", zoomed) |
| .on("start", function () { |
| if (d3.event.shiftKey) return; |
| d3.select('body').style("cursor", "move"); |
| }) |
| .on("end", function () { |
| d3.select('body').style("cursor", "auto"); |
| }); |
| |
| svg.call(zoomSvg).on("dblclick.zoom", null); |
| |
| view.panZoom = zoomSvg; |
| |
| } |
| |
| getEdgeFrontier(nodes: Iterable<GNode>, inEdges: boolean, |
| edgeFilter: (e: Edge, i: number) => boolean) { |
| const frontier: Set<Edge> = new Set(); |
| for (const n of nodes) { |
| const edges = inEdges ? n.inputs : n.outputs; |
| let edgeNumber = 0; |
| edges.forEach((edge: Edge) => { |
| if (edgeFilter == undefined || edgeFilter(edge, edgeNumber)) { |
| frontier.add(edge); |
| } |
| ++edgeNumber; |
| }); |
| } |
| return frontier; |
| } |
| |
| getNodeFrontier(nodes: Iterable<GNode>, inEdges: boolean, |
| edgeFilter: (e: Edge, i: number) => boolean) { |
| const view = this; |
| const frontier: Set<GNode> = new Set(); |
| let newState = true; |
| const edgeFrontier = view.getEdgeFrontier(nodes, inEdges, edgeFilter); |
| // Control key toggles edges rather than just turning them on |
| if (d3.event.ctrlKey) { |
| edgeFrontier.forEach(function (edge: Edge) { |
| if (edge.visible) { |
| newState = false; |
| } |
| }); |
| } |
| edgeFrontier.forEach(function (edge: Edge) { |
| edge.visible = newState; |
| if (newState) { |
| const node = inEdges ? edge.source : edge.target; |
| node.visible = true; |
| frontier.add(node); |
| } |
| }); |
| view.updateGraphVisibility(); |
| if (newState) { |
| return frontier; |
| } else { |
| return undefined; |
| } |
| } |
| |
| initializeContent(data, rememberedSelection) { |
| this.show(); |
| function createImgInput(id: string, title: string, onClick): HTMLElement { |
| const input = document.createElement("input"); |
| input.setAttribute("id", id); |
| input.setAttribute("type", "image"); |
| input.setAttribute("title", title); |
| input.setAttribute("src", `img/${id}-icon.png`); |
| input.className = "button-input graph-toolbox-item"; |
| input.addEventListener("click", onClick); |
| return input; |
| } |
| this.toolbox.appendChild(createImgInput("layout", "layout graph", |
| partial(this.layoutAction, this))); |
| this.toolbox.appendChild(createImgInput("show-all", "show all nodes", |
| partial(this.showAllAction, this))); |
| this.toolbox.appendChild(createImgInput("show-control", "show only control nodes", |
| partial(this.showControlAction, this))); |
| this.toolbox.appendChild(createImgInput("toggle-hide-dead", "toggle hide dead nodes", |
| partial(this.toggleHideDead, this))); |
| this.toolbox.appendChild(createImgInput("hide-unselected", "hide unselected", |
| partial(this.hideUnselectedAction, this))); |
| this.toolbox.appendChild(createImgInput("hide-selected", "hide selected", |
| partial(this.hideSelectedAction, this))); |
| this.toolbox.appendChild(createImgInput("zoom-selection", "zoom selection", |
| partial(this.zoomSelectionAction, this))); |
| this.toolbox.appendChild(createImgInput("toggle-types", "toggle types", |
| partial(this.toggleTypesAction, this))); |
| |
| this.phaseName = data.name; |
| this.createGraph(data.data, rememberedSelection); |
| this.broker.addNodeHandler(this.selectionHandler); |
| |
| if (rememberedSelection != null && rememberedSelection.size > 0) { |
| this.attachSelection(rememberedSelection); |
| this.connectVisibleSelectedNodes(); |
| this.viewSelection(); |
| } else { |
| this.viewWholeGraph(); |
| } |
| } |
| |
| deleteContent() { |
| for (const item of this.toolbox.querySelectorAll(".graph-toolbox-item")) { |
| item.parentElement.removeChild(item); |
| } |
| |
| for (const n of this.graph.nodes()) { |
| n.visible = false; |
| } |
| this.graph.forEachEdge((e: Edge) => { |
| e.visible = false; |
| }); |
| this.updateGraphVisibility(); |
| } |
| |
| public hide(): void { |
| super.hide(); |
| this.deleteContent(); |
| } |
| |
| createGraph(data, rememberedSelection) { |
| this.graph = new Graph(data); |
| |
| this.showControlAction(this); |
| |
| if (rememberedSelection != undefined) { |
| for (const n of this.graph.nodes()) { |
| n.visible = n.visible || rememberedSelection.has(nodeToStringKey(n)); |
| } |
| } |
| |
| this.graph.forEachEdge(e => e.visible = e.source.visible && e.target.visible); |
| |
| this.layoutGraph(); |
| this.updateGraphVisibility(); |
| } |
| |
| connectVisibleSelectedNodes() { |
| const view = this; |
| for (const n of view.state.selection) { |
| n.inputs.forEach(function (edge: Edge) { |
| if (edge.source.visible && edge.target.visible) { |
| edge.visible = true; |
| } |
| }); |
| n.outputs.forEach(function (edge: Edge) { |
| if (edge.source.visible && edge.target.visible) { |
| edge.visible = true; |
| } |
| }); |
| } |
| } |
| |
| updateInputAndOutputBubbles() { |
| const view = this; |
| const g = this.graph; |
| const s = this.visibleBubbles; |
| s.classed("filledBubbleStyle", function (c) { |
| const components = this.id.split(','); |
| if (components[0] == "ib") { |
| const edge = g.nodeMap[components[3]].inputs[components[2]]; |
| return edge.isVisible(); |
| } else { |
| return g.nodeMap[components[1]].areAnyOutputsVisible() == 2; |
| } |
| }).classed("halfFilledBubbleStyle", function (c) { |
| const components = this.id.split(','); |
| if (components[0] == "ib") { |
| return false; |
| } else { |
| return g.nodeMap[components[1]].areAnyOutputsVisible() == 1; |
| } |
| }).classed("bubbleStyle", function (c) { |
| const components = this.id.split(','); |
| if (components[0] == "ib") { |
| const edge = g.nodeMap[components[3]].inputs[components[2]]; |
| return !edge.isVisible(); |
| } else { |
| return g.nodeMap[components[1]].areAnyOutputsVisible() == 0; |
| } |
| }); |
| s.each(function (c) { |
| const components = this.id.split(','); |
| if (components[0] == "ob") { |
| const from = g.nodeMap[components[1]]; |
| const x = from.getOutputX(); |
| const y = from.getNodeHeight(view.state.showTypes) + DEFAULT_NODE_BUBBLE_RADIUS; |
| const transform = "translate(" + x + "," + y + ")"; |
| this.setAttribute('transform', transform); |
| } |
| }); |
| } |
| |
| attachSelection(s) { |
| if (!(s instanceof Set)) return; |
| this.selectionHandler.clear(); |
| const selected = [...this.graph.nodes(n => |
| s.has(this.state.selection.stringKey(n)) && (!this.state.hideDead || n.isLive()))]; |
| this.selectionHandler.select(selected, true); |
| } |
| |
| detachSelection() { |
| return this.state.selection.detachSelection(); |
| } |
| |
| selectAllNodes() { |
| if (!d3.event.shiftKey) { |
| this.state.selection.clear(); |
| } |
| const allVisibleNodes = [...this.graph.nodes(n => n.visible)]; |
| this.state.selection.select(allVisibleNodes, true); |
| this.updateGraphVisibility(); |
| } |
| |
| layoutAction(graph: GraphView) { |
| graph.layoutGraph(); |
| graph.updateGraphVisibility(); |
| graph.viewWholeGraph(); |
| } |
| |
| showAllAction(view: GraphView) { |
| for (const n of view.graph.nodes()) { |
| n.visible = !view.state.hideDead || n.isLive(); |
| } |
| view.graph.forEachEdge((e: Edge) => { |
| e.visible = e.source.visible || e.target.visible; |
| }); |
| view.updateGraphVisibility(); |
| view.viewWholeGraph(); |
| } |
| |
| showControlAction(view: GraphView) { |
| for (const n of view.graph.nodes()) { |
| n.visible = n.cfg && (!view.state.hideDead || n.isLive()); |
| } |
| view.graph.forEachEdge((e: Edge) => { |
| e.visible = e.type == 'control' && e.source.visible && e.target.visible; |
| }); |
| view.updateGraphVisibility(); |
| view.viewWholeGraph(); |
| } |
| |
| toggleHideDead(view: GraphView) { |
| view.state.hideDead = !view.state.hideDead; |
| if (view.state.hideDead) { |
| view.hideDead(); |
| } else { |
| view.showDead(); |
| } |
| const element = document.getElementById('toggle-hide-dead'); |
| element.classList.toggle('button-input-toggled', view.state.hideDead); |
| } |
| |
| hideDead() { |
| for (const n of this.graph.nodes()) { |
| if (!n.isLive()) { |
| n.visible = false; |
| this.state.selection.select([n], false); |
| } |
| } |
| this.updateGraphVisibility(); |
| } |
| |
| showDead() { |
| for (const n of this.graph.nodes()) { |
| if (!n.isLive()) { |
| n.visible = true; |
| } |
| } |
| this.updateGraphVisibility(); |
| } |
| |
| hideUnselectedAction(view: GraphView) { |
| for (const n of view.graph.nodes()) { |
| if (!view.state.selection.isSelected(n)) { |
| n.visible = false; |
| } |
| } |
| view.updateGraphVisibility(); |
| } |
| |
| hideSelectedAction(view: GraphView) { |
| for (const n of view.graph.nodes()) { |
| if (view.state.selection.isSelected(n)) { |
| n.visible = false; |
| } |
| } |
| view.selectionHandler.clear(); |
| } |
| |
| zoomSelectionAction(view: GraphView) { |
| view.viewSelection(); |
| } |
| |
| toggleTypesAction(view: GraphView) { |
| view.toggleTypes(); |
| } |
| |
| searchInputAction(searchBar: HTMLInputElement, e: KeyboardEvent, onlyVisible: boolean) { |
| if (e.keyCode == 13) { |
| this.selectionHandler.clear(); |
| const query = searchBar.value; |
| window.sessionStorage.setItem("lastSearch", query); |
| if (query.length == 0) return; |
| |
| const reg = new RegExp(query); |
| const filterFunction = (n: GNode) => { |
| return (reg.exec(n.getDisplayLabel()) != null || |
| (this.state.showTypes && reg.exec(n.getDisplayType())) || |
| (reg.exec(n.getTitle())) || |
| reg.exec(n.nodeLabel.opcode) != null); |
| }; |
| |
| const selection = [...this.graph.nodes(n => { |
| if ((e.ctrlKey || n.visible || !onlyVisible) && filterFunction(n)) { |
| if (e.ctrlKey || !onlyVisible) n.visible = true; |
| return true; |
| } |
| return false; |
| })]; |
| |
| this.selectionHandler.select(selection, true); |
| this.connectVisibleSelectedNodes(); |
| this.updateGraphVisibility(); |
| searchBar.blur(); |
| this.viewSelection(); |
| } |
| e.stopPropagation(); |
| } |
| |
| svgKeyDown() { |
| const view = this; |
| const state = this.state; |
| |
| const showSelectionFrontierNodes = (inEdges: boolean, filter: (e: Edge, i: number) => boolean, doSelect: boolean) => { |
| const frontier = view.getNodeFrontier(state.selection, inEdges, filter); |
| if (frontier != undefined && frontier.size) { |
| if (doSelect) { |
| if (!d3.event.shiftKey) { |
| state.selection.clear(); |
| } |
| state.selection.select([...frontier], true); |
| } |
| view.updateGraphVisibility(); |
| } |
| }; |
| |
| let eventHandled = true; // unless the below switch defaults |
| switch (d3.event.keyCode) { |
| case 49: |
| case 50: |
| case 51: |
| case 52: |
| case 53: |
| case 54: |
| case 55: |
| case 56: |
| case 57: |
| // '1'-'9' |
| showSelectionFrontierNodes(true, |
| (edge: Edge, index: number) => index == (d3.event.keyCode - 49), |
| !d3.event.ctrlKey); |
| break; |
| case 97: |
| case 98: |
| case 99: |
| case 100: |
| case 101: |
| case 102: |
| case 103: |
| case 104: |
| case 105: |
| // 'numpad 1'-'numpad 9' |
| showSelectionFrontierNodes(true, |
| (edge, index) => index == (d3.event.keyCode - 97), |
| !d3.event.ctrlKey); |
| break; |
| case 67: |
| // 'c' |
| showSelectionFrontierNodes(d3.event.altKey, |
| (edge, index) => edge.type == 'control', |
| true); |
| break; |
| case 69: |
| // 'e' |
| showSelectionFrontierNodes(d3.event.altKey, |
| (edge, index) => edge.type == 'effect', |
| true); |
| break; |
| case 79: |
| // 'o' |
| showSelectionFrontierNodes(false, undefined, false); |
| break; |
| case 73: |
| // 'i' |
| if (!d3.event.ctrlKey && !d3.event.shiftKey) { |
| showSelectionFrontierNodes(true, undefined, false); |
| } else { |
| eventHandled = false; |
| } |
| break; |
| case 65: |
| // 'a' |
| view.selectAllNodes(); |
| break; |
| case 38: |
| // UP |
| case 40: { |
| // DOWN |
| showSelectionFrontierNodes(d3.event.keyCode == 38, undefined, true); |
| break; |
| } |
| case 82: |
| // 'r' |
| if (!d3.event.ctrlKey && !d3.event.shiftKey) { |
| this.layoutAction(this); |
| } else { |
| eventHandled = false; |
| } |
| break; |
| case 83: |
| // 's' |
| view.selectOrigins(); |
| break; |
| default: |
| eventHandled = false; |
| break; |
| } |
| if (eventHandled) { |
| d3.event.preventDefault(); |
| } |
| } |
| |
| layoutGraph() { |
| console.time("layoutGraph"); |
| layoutNodeGraph(this.graph, this.state.showTypes); |
| const extent = this.graph.redetermineGraphBoundingBox(this.state.showTypes); |
| this.panZoom.translateExtent(extent); |
| this.minScale(); |
| console.timeEnd("layoutGraph"); |
| } |
| |
| selectOrigins() { |
| const state = this.state; |
| const origins = []; |
| let phase = this.phaseName; |
| const selection = new Set<any>(); |
| for (const n of state.selection) { |
| const origin = n.nodeLabel.origin; |
| if (origin) { |
| phase = origin.phase; |
| const node = this.graph.nodeMap[origin.nodeId]; |
| if (phase === this.phaseName && node) { |
| origins.push(node); |
| } else { |
| selection.add(`${origin.nodeId}`); |
| } |
| } |
| } |
| // Only go through phase reselection if we actually need |
| // to display another phase. |
| if (selection.size > 0 && phase !== this.phaseName) { |
| this.showPhaseByName(phase, selection); |
| } else if (origins.length > 0) { |
| this.selectionHandler.clear(); |
| this.selectionHandler.select(origins, true); |
| } |
| } |
| |
| // call to propagate changes to graph |
| updateGraphVisibility() { |
| const view = this; |
| const graph = this.graph; |
| const state = this.state; |
| if (!graph) return; |
| |
| const filteredEdges = [...graph.filteredEdges(function (e) { |
| return e.source.visible && e.target.visible; |
| })]; |
| const selEdges = view.visibleEdges.selectAll<SVGPathElement, Edge>("path").data(filteredEdges, edgeToStr); |
| |
| // remove old links |
| selEdges.exit().remove(); |
| |
| // add new paths |
| const newEdges = selEdges.enter() |
| .append('path'); |
| |
| newEdges.style('marker-end', 'url(#end-arrow)') |
| .attr("id", function (edge) { return "e," + edge.stringID(); }) |
| .on("click", function (edge) { |
| d3.event.stopPropagation(); |
| if (!d3.event.shiftKey) { |
| view.selectionHandler.clear(); |
| } |
| view.selectionHandler.select([edge.source, edge.target], true); |
| }) |
| .attr("adjacentToHover", "false") |
| .classed('value', function (e) { |
| return e.type == 'value' || e.type == 'context'; |
| }).classed('control', function (e) { |
| return e.type == 'control'; |
| }).classed('effect', function (e) { |
| return e.type == 'effect'; |
| }).classed('frame-state', function (e) { |
| return e.type == 'frame-state'; |
| }).attr('stroke-dasharray', function (e) { |
| if (e.type == 'frame-state') return "10,10"; |
| return (e.type == 'effect') ? "5,5" : ""; |
| }); |
| |
| const newAndOldEdges = newEdges.merge(selEdges); |
| |
| newAndOldEdges.classed('hidden', e => !e.isVisible()); |
| |
| // select existing nodes |
| const filteredNodes = [...graph.nodes(n => n.visible)]; |
| const allNodes = view.visibleNodes.selectAll<SVGGElement, GNode>("g"); |
| const selNodes = allNodes.data(filteredNodes, nodeToStr); |
| |
| // remove old nodes |
| selNodes.exit().remove(); |
| |
| // add new nodes |
| const newGs = selNodes.enter() |
| .append("g"); |
| |
| newGs.classed("turbonode", function (n) { return true; }) |
| .classed("control", function (n) { return n.isControl(); }) |
| .classed("live", function (n) { return n.isLive(); }) |
| .classed("dead", function (n) { return !n.isLive(); }) |
| .classed("javascript", function (n) { return n.isJavaScript(); }) |
| .classed("input", function (n) { return n.isInput(); }) |
| .classed("simplified", function (n) { return n.isSimplified(); }) |
| .classed("machine", function (n) { return n.isMachine(); }) |
| .on('mouseenter', function (node) { |
| const visibleEdges = view.visibleEdges.selectAll<SVGPathElement, Edge>('path'); |
| const adjInputEdges = visibleEdges.filter(e => e.target === node); |
| const adjOutputEdges = visibleEdges.filter(e => e.source === node); |
| adjInputEdges.attr('relToHover', "input"); |
| adjOutputEdges.attr('relToHover', "output"); |
| const adjInputNodes = adjInputEdges.data().map(e => e.source); |
| const visibleNodes = view.visibleNodes.selectAll<SVGGElement, GNode>("g"); |
| visibleNodes.data<GNode>(adjInputNodes, nodeToStr).attr('relToHover', "input"); |
| const adjOutputNodes = adjOutputEdges.data().map(e => e.target); |
| visibleNodes.data<GNode>(adjOutputNodes, nodeToStr).attr('relToHover', "output"); |
| view.updateGraphVisibility(); |
| }) |
| .on('mouseleave', function (node) { |
| const visibleEdges = view.visibleEdges.selectAll<SVGPathElement, Edge>('path'); |
| const adjEdges = visibleEdges.filter(e => e.target === node || e.source === node); |
| adjEdges.attr('relToHover', "none"); |
| const adjNodes = adjEdges.data().map(e => e.target).concat(adjEdges.data().map(e => e.source)); |
| const visibleNodes = view.visibleNodes.selectAll<SVGPathElement, GNode>("g"); |
| visibleNodes.data(adjNodes, nodeToStr).attr('relToHover', "none"); |
| view.updateGraphVisibility(); |
| }) |
| .on("click", d => { |
| if (!d3.event.shiftKey) view.selectionHandler.clear(); |
| view.selectionHandler.select([d], undefined); |
| d3.event.stopPropagation(); |
| }) |
| .call(view.drag); |
| |
| newGs.append("rect") |
| .attr("rx", 10) |
| .attr("ry", 10) |
| .attr('width', function (d) { |
| return d.getTotalNodeWidth(); |
| }) |
| .attr('height', function (d) { |
| return d.getNodeHeight(view.state.showTypes); |
| }); |
| |
| function appendInputAndOutputBubbles(g, d) { |
| for (let i = 0; i < d.inputs.length; ++i) { |
| const x = d.getInputX(i); |
| const y = -DEFAULT_NODE_BUBBLE_RADIUS; |
| g.append('circle') |
| .classed("filledBubbleStyle", function (c) { |
| return d.inputs[i].isVisible(); |
| }) |
| .classed("bubbleStyle", function (c) { |
| return !d.inputs[i].isVisible(); |
| }) |
| .attr("id", "ib," + d.inputs[i].stringID()) |
| .attr("r", DEFAULT_NODE_BUBBLE_RADIUS) |
| .attr("transform", function (d) { |
| return "translate(" + x + "," + y + ")"; |
| }) |
| .on("click", function (this: SVGCircleElement, d) { |
| const components = this.id.split(','); |
| const node = graph.nodeMap[components[3]]; |
| const edge = node.inputs[components[2]]; |
| const visible = !edge.isVisible(); |
| node.setInputVisibility(components[2], visible); |
| d3.event.stopPropagation(); |
| view.updateGraphVisibility(); |
| }); |
| } |
| if (d.outputs.length != 0) { |
| const x = d.getOutputX(); |
| const y = d.getNodeHeight(view.state.showTypes) + DEFAULT_NODE_BUBBLE_RADIUS; |
| g.append('circle') |
| .classed("filledBubbleStyle", function (c) { |
| return d.areAnyOutputsVisible() == 2; |
| }) |
| .classed("halFilledBubbleStyle", function (c) { |
| return d.areAnyOutputsVisible() == 1; |
| }) |
| .classed("bubbleStyle", function (c) { |
| return d.areAnyOutputsVisible() == 0; |
| }) |
| .attr("id", "ob," + d.id) |
| .attr("r", DEFAULT_NODE_BUBBLE_RADIUS) |
| .attr("transform", function (d) { |
| return "translate(" + x + "," + y + ")"; |
| }) |
| .on("click", function (d) { |
| d.setOutputVisibility(d.areAnyOutputsVisible() == 0); |
| d3.event.stopPropagation(); |
| view.updateGraphVisibility(); |
| }); |
| } |
| } |
| |
| newGs.each(function (d) { |
| appendInputAndOutputBubbles(d3.select(this), d); |
| }); |
| |
| newGs.each(function (d) { |
| d3.select(this).append("text") |
| .classed("label", true) |
| .attr("text-anchor", "right") |
| .attr("dx", 5) |
| .attr("dy", 5) |
| .append('tspan') |
| .text(function (l) { |
| return d.getDisplayLabel(); |
| }) |
| .append("title") |
| .text(function (l) { |
| return d.getTitle(); |
| }); |
| if (d.nodeLabel.type != undefined) { |
| d3.select(this).append("text") |
| .classed("label", true) |
| .classed("type", true) |
| .attr("text-anchor", "right") |
| .attr("dx", 5) |
| .attr("dy", d.labelbbox.height + 5) |
| .append('tspan') |
| .text(function (l) { |
| return d.getDisplayType(); |
| }) |
| .append("title") |
| .text(function (l) { |
| return d.getType(); |
| }); |
| } |
| }); |
| |
| const newAndOldNodes = newGs.merge(selNodes); |
| |
| newAndOldNodes.select<SVGTextElement>('.type').each(function (d) { |
| this.setAttribute('visibility', view.state.showTypes ? 'visible' : 'hidden'); |
| }); |
| |
| newAndOldNodes |
| .classed("selected", function (n) { |
| if (state.selection.isSelected(n)) return true; |
| return false; |
| }) |
| .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; }) |
| .select('rect') |
| .attr('height', function (d) { return d.getNodeHeight(view.state.showTypes); }); |
| |
| view.visibleBubbles = d3.selectAll('circle'); |
| |
| view.updateInputAndOutputBubbles(); |
| |
| graph.maxGraphX = graph.maxGraphNodeX; |
| newAndOldEdges.attr("d", function (edge) { |
| return edge.generatePath(graph, view.state.showTypes); |
| }); |
| } |
| |
| getSvgViewDimensions() { |
| return [this.container.clientWidth, this.container.clientHeight]; |
| } |
| |
| getSvgExtent(): [[number, number], [number, number]] { |
| return [[0, 0], [this.container.clientWidth, this.container.clientHeight]]; |
| } |
| |
| minScale() { |
| const dimensions = this.getSvgViewDimensions(); |
| const minXScale = dimensions[0] / (2 * this.graph.width); |
| const minYScale = dimensions[1] / (2 * this.graph.height); |
| const minScale = Math.min(minXScale, minYScale); |
| this.panZoom.scaleExtent([minScale, 40]); |
| return minScale; |
| } |
| |
| onresize() { |
| const trans = d3.zoomTransform(this.svg.node()); |
| const ctrans = this.panZoom.constrain()(trans, this.getSvgExtent(), this.panZoom.translateExtent()); |
| this.panZoom.transform(this.svg, ctrans); |
| } |
| |
| toggleTypes() { |
| const view = this; |
| view.state.showTypes = !view.state.showTypes; |
| const element = document.getElementById('toggle-types'); |
| element.classList.toggle('button-input-toggled', view.state.showTypes); |
| view.updateGraphVisibility(); |
| } |
| |
| viewSelection() { |
| const view = this; |
| let minX; |
| let maxX; |
| let minY; |
| let maxY; |
| let hasSelection = false; |
| view.visibleNodes.selectAll<SVGGElement, GNode>("g").each(function (n) { |
| if (view.state.selection.isSelected(n)) { |
| hasSelection = true; |
| minX = minX ? Math.min(minX, n.x) : n.x; |
| maxX = maxX ? Math.max(maxX, n.x + n.getTotalNodeWidth()) : |
| n.x + n.getTotalNodeWidth(); |
| minY = minY ? Math.min(minY, n.y) : n.y; |
| maxY = maxY ? Math.max(maxY, n.y + n.getNodeHeight(view.state.showTypes)) : |
| n.y + n.getNodeHeight(view.state.showTypes); |
| } |
| }); |
| if (hasSelection) { |
| view.viewGraphRegion(minX - NODE_INPUT_WIDTH, minY - 60, |
| maxX + NODE_INPUT_WIDTH, maxY + 60); |
| } |
| } |
| |
| viewGraphRegion(minX, minY, maxX, maxY) { |
| const [width, height] = this.getSvgViewDimensions(); |
| const dx = maxX - minX; |
| const dy = maxY - minY; |
| const x = (minX + maxX) / 2; |
| const y = (minY + maxY) / 2; |
| const scale = Math.min(width / (1.1 * dx), height / (1.1 * dy)); |
| this.svg |
| .transition().duration(300).call(this.panZoom.translateTo, x, y) |
| .transition().duration(300).call(this.panZoom.scaleTo, scale) |
| .transition().duration(300).call(this.panZoom.translateTo, x, y); |
| } |
| |
| viewWholeGraph() { |
| this.panZoom.scaleTo(this.svg, 0); |
| this.panZoom.translateTo(this.svg, |
| this.graph.minGraphX + this.graph.width / 2, |
| this.graph.minGraphY + this.graph.height / 2); |
| } |
| } |
