TypeScript d3.drag函數代碼示例

  constructor(panes_updated_callback: () => void, dead_width: number) {
    let resizer = this;
    resizer.snapper = new Snapper(resizer)
    resizer.panes_updated_callback = panes_updated_callback;
    resizer.dead_width = dead_width
    resizer.client_width = document.body.getBoundingClientRect().width;
    resizer.left = document.getElementById(C.SOURCE_PANE_ID);
    resizer.middle = document.getElementById(C.INTERMEDIATE_PANE_ID);
    resizer.right = document.getElementById(C.GENERATED_PANE_ID);
    resizer.resizer_left = d3.select('.resizer-left');
    resizer.resizer_right = d3.select('.resizer-right');
    resizer.sep_left = resizer.client_width / 3;
    resizer.sep_right = resizer.client_width / 3 * 2;
    resizer.sep_left_snap = 0;
    resizer.sep_right_snap = 0;
    // Offset to prevent resizers from sliding slightly over one another.
    resizer.sep_width_offset = 7;

    let dragResizeLeft = d3.drag()
      .on('drag', function () {
        let x = d3.mouse(this.parentElement)[0];
        resizer.sep_left = Math.min(Math.max(0, x), resizer.sep_right - resizer.sep_width_offset);
        resizer.updatePanes();
      })
      .on('start', function () {
        resizer.resizer_left.classed("dragged", true);
        let x = d3.mouse(this.parentElement)[0];
        if (x > dead_width) {
          resizer.sep_left_snap = resizer.sep_left;
        }
      })
      .on('end', function () {
        resizer.resizer_left.classed("dragged", false);
      });
    resizer.resizer_left.call(dragResizeLeft);

    let dragResizeRight = d3.drag()
      .on('drag', function () {
        let x = d3.mouse(this.parentElement)[0];
        resizer.sep_right = Math.max(resizer.sep_left + resizer.sep_width_offset, Math.min(x, resizer.client_width));
        resizer.updatePanes();
      })
      .on('start', function () {
        resizer.resizer_right.classed("dragged", true);
        let x = d3.mouse(this.parentElement)[0];
        if (x < (resizer.client_width - dead_width)) {
          resizer.sep_right_snap = resizer.sep_right;
        }
      })
      .on('end', function () {
        resizer.resizer_right.classed("dragged", false);
      });;
    resizer.resizer_right.call(dragResizeRight);
    window.onresize = function () {
      resizer.updateWidths();
      resizer.updatePanes();
    };
  }

  /** A method to bind a draggable behaviour to an svg element */
  applyDraggableBehaviour(element, node: Node, graph: ForceDirectedGraph) {
    const d3element = d3.select(element);

    function started() {
      /** Preventing propagation of dragstart to parent elements */
      d3.event.sourceEvent.stopPropagation();

      if (!d3.event.active) {
        graph.simulation.alphaTarget(0.3).restart();
      }

      d3.event.on('drag', dragged).on('end', ended);

      function dragged() {
        node.fx = d3.event.x;
        node.fy = d3.event.y;
      }

      function ended() {
        if (!d3.event.active) {
          graph.simulation.alphaTarget(0);
        }

        node.fx = null;
        node.fy = null;
      }
    }

    d3element.call(d3.drag()
      .on('start', started));
  }

 drawCircles(trees: Tree[]) {
   let svg = D3.select("svg");
   svg.selectAll("circle")
     .data<Tree>(trees)
     .enter()
     .append("circle")
     .attr("r", 10)
     .attr("stroke", "red")
     .attr("cx", function(d: Tree) { return d.x; })
     .attr("cy", function(d: Tree) { return d.y; })
     .call(
       D3.drag<SVGCircleElement, Tree>()
         .on("start", this.startDrag)
         .on("drag", this.drag)
         .on("end", this.dragEnd)
     );
 }

  constructor(panesUpdatedCallback: () => void, deadWidth: number) {
    const resizer = this;
    resizer.panesUpdatedCallback = panesUpdatedCallback;
    resizer.deadWidth = deadWidth;
    resizer.left = document.getElementById(C.SOURCE_PANE_ID);
    resizer.middle = document.getElementById(C.INTERMEDIATE_PANE_ID);
    resizer.right = document.getElementById(C.GENERATED_PANE_ID);
    resizer.resizerLeft = d3.select('#resizer-left');
    resizer.resizerRight = d3.select('#resizer-right');
    resizer.sepLeftSnap = 0;
    resizer.sepRightSnap = 0;
    // Offset to prevent resizers from sliding slightly over one another.
    resizer.sepWidthOffset = 7;
    this.updateWidths();

    const dragResizeLeft = d3.drag()
      .on('drag', function () {
        const x = d3.mouse(this.parentElement)[0];
        resizer.sepLeft = Math.min(Math.max(0, x), resizer.sepRight - resizer.sepWidthOffset);
        resizer.updatePanes();
      })
      .on('start', function () {
        resizer.resizerLeft.classed("dragged", true);
        const x = d3.mouse(this.parentElement)[0];
        if (x > deadWidth) {
          resizer.sepLeftSnap = resizer.sepLeft;
        }
      })
      .on('end', function () {
        if (!resizer.isRightSnapped()) {
          window.sessionStorage.setItem("source-pane-width", `${resizer.sepLeft / resizer.clientWidth}`);
        }
        resizer.resizerLeft.classed("dragged", false);
      });
    resizer.resizerLeft.call(dragResizeLeft);

    const dragResizeRight = d3.drag()
      .on('drag', function () {
        const x = d3.mouse(this.parentElement)[0];
        resizer.sepRight = Math.max(resizer.sepLeft + resizer.sepWidthOffset, Math.min(x, resizer.clientWidth));
        resizer.updatePanes();
      })
      .on('start', function () {
        resizer.resizerRight.classed("dragged", true);
        const x = d3.mouse(this.parentElement)[0];
        if (x < (resizer.clientWidth - deadWidth)) {
          resizer.sepRightSnap = resizer.sepRight;
        }
      })
      .on('end', function () {
        if (!resizer.isRightSnapped()) {
          console.log(`disassembly-pane-width ${resizer.sepRight}`);
          window.sessionStorage.setItem("disassembly-pane-width", `${resizer.sepRight / resizer.clientWidth}`);
        }
        resizer.resizerRight.classed("dragged", false);
      });
    resizer.resizerRight.call(dragResizeRight);
    window.onresize = function () {
      resizer.updateWidths();
      resizer.updatePanes();
    };
    resizer.snapper = new Snapper(resizer);
    resizer.snapper.restoreExpandedState();
  }

  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) {
//.........這裏部分代碼省略.........

  constructor(id, broker, showPhaseByName: (string) => void) {
    super(id);
    var graph = this;
    this.showPhaseByName = showPhaseByName;
    this.divElement = d3.select(this.divNode);
    const svg = this.divElement.append("svg").attr('version', '1.1')
      .attr("width", "100%")
      .attr("height", "100%");
    svg.on("click", function (d) {
      graph.selectionHandler.clear();
    });
    graph.svg = svg;

    graph.nodes = [];
    graph.edges = [];

    graph.minGraphX = 0;
    graph.maxGraphX = 1;
    graph.minGraphY = 0;
    graph.maxGraphY = 1;

    graph.state = {
      selection: null,
      mouseDownNode: null,
      justDragged: false,
      justScaleTransGraph: false,
      lastKeyDown: -1,
      showTypes: false,
      hideDead: false
    };

    this.selectionHandler = {
      clear: function () {
        graph.state.selection.clear();
        broker.broadcastClear(this);
        graph.updateGraphVisibility();
      },
      select: function (nodes, selected) {
        let locations = [];
        for (const node of nodes) {
          if (node.sourcePosition) {
            locations.push(node.sourcePosition);
          }
          if (node.origin && node.origin.bytecodePosition) {
            locations.push({ bytecodePosition: node.origin.bytecodePosition });
          }
        }
        graph.state.selection.select(nodes, selected);
        broker.broadcastSourcePositionSelect(this, locations, selected);
        graph.updateGraphVisibility();
      },
      brokeredNodeSelect: function (locations, selected) {
        let selection = graph.nodes
          .filter(function (n) {
            return locations.has(nodeToStringKey(n))
              && (!graph.state.hideDead || n.isLive());
          });
        graph.state.selection.select(selection, selected);
        // Update edge visibility based on selection.
        graph.nodes.forEach((n) => {
          if (graph.state.selection.isSelected(n)) n.visible = true;
        });
        graph.edges.forEach(function (e) {
          e.visible = e.visible ||
            (graph.state.selection.isSelected(e.source) && graph.state.selection.isSelected(e.target));
        });
        graph.updateGraphVisibility();
      },
      brokeredClear: function () {
        graph.state.selection.clear();
        graph.updateGraphVisibility();
      }
    };
    broker.addNodeHandler(this.selectionHandler);

    graph.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");
    graph.visibleEdges = this.graphElement.append("g");
    graph.visibleNodes = this.graphElement.append("g");

    graph.drag = d3.drag<any, GNode, GNode>()
      .on("drag", function (d) {
        d.x += d3.event.dx;
        d.y += d3.event.dy;
        graph.updateGraphVisibility();
      });


//.........這裏部分代碼省略.........