const { dia, shapes, mvc, ui, highlighters, util } = joint;

const paperContainerEl = document.getElementById("paper-container");
const stencilContainerEl = document.getElementById("stencil-container");
// Paper
// -----

const graph = new dia.Graph({}, { cellNamespace: shapes });
const paper = new dia.Paper({
  model: graph,
  cellViewNamespace: shapes,
  width: "100%",
  height: "100%",
  gridSize: 20,
  drawGrid: { name: "mesh" },
  async: true,
  sorting: dia.Paper.sorting.APPROX,
  background: { color: "#F3F7F6" },
  defaultLink: () => new joint.shapes.standard.Link(),
  defaultConnectionPoint: { name: "boundary" },
  clickThreshold: 10,
  magnetThreshold: "onleave",
  linkPinning: false,
  validateConnection: (sourceView, _, targetView) => sourceView !== targetView,
  snapLinks: { radius: 10 }
});

paperContainerEl.appendChild(paper.el);

paper.on("element:magnet:pointerclick", (elementView, evt, magnet) => {
  paper.removeTools();
  elementView.addTools(new dia.ToolsView({ tools: [new Ports()] }));
});

paper.on("blank:pointerdown cell:pointerdown", () => {
  paper.removeTools();
});

// Stencil
// -------

const stencil = new ui.Stencil({
  paper,
  usePaperGrid: true,
  width: 100,
  height: "100%",
  paperOptions: () => {
    return {
      model: new dia.Graph({}, { cellNamespace: shapes }),
      cellViewNamespace: shapes,
      background: {
        color: "#FCFCFC"
      }
    };
  },
  groups: {
    elements: {},
    ports: {}
  },
  layout: {
    columns: 1,
    rowHeight: "compact",
    rowGap: 10,
    columnWidth: 100,
    marginY: 10,
    // reset defaults
    resizeToFit: false,
    dx: 0,
    dy: 0
  },
  usePaperGrid: true,
  dragStartClone: (cell) => {
    const clone = cell.clone();
    if (clone.get("port")) {
      const { width, height } = clone.size();
      clone.attr("body/fill", "lightgray");
      // Maker sure the center of the port is in the grid.
      clone.attr("body/transform", `translate(-${width / 2}, -${height / 2})`);
    } else {
      clone.resize(200, 200);
    }
    return clone;
  }
});

stencil.render();
stencilContainerEl.appendChild(stencil.el);

const stencilElements = [
  {
    type: "standard.Rectangle",
    size: { width: 80, height: 60 },
    attrs: {
      body: {
        fill: "#80ffd5"
      }
    }
  },
  {
    type: "standard.Rectangle",
    size: { width: 80, height: 60 },
    attrs: {
      body: {
        rx: 10,
        ry: 10,
        fill: "#48cba4"
      }
    }
  }
];

// Every stencil port element has to have a `port` property.
// The `port` property describes the port itself after it's dropped on the paper.
const stencilPorts = [
  {
    type: "standard.Rectangle",
    size: { width: 24, height: 24 },
    attrs: {
      body: {
        fill: "#ff9580"
      }
    },
    port: {
      markup: joint.util.svg/*xml*/ `
                <rect @selector="portBody"
                    x="-12"
                    y="-12"
                    width="24"
                    height="24"
                    fill="#ff9580"
                    stroke="#333333"
                    stroke-width="2"
                    magnet="active"
                />
            `
    }
  },
  {
    type: "standard.Path",
    size: { width: 30, height: 30 },
    attrs: {
      body: {
        d:
          "M calc(0.5*w) 0 calc(w) calc(0.5*h) calc(0.5*w) calc(h) 0 calc(0.5*h) Z",
        fill: "#c86653",
        stroke: "#333333"
      }
    },
    port: {
      markup: joint.util.svg/*xml*/ `
                <path @selector="portBody"
                    d="M 0 -15 L 15 0 L 0 15 L -15 0 Z"
                    fill="#c86653"
                    stroke="#333333"
                    stroke-width="2"
                    magnet="active"
                />
            `
    }
  },
  {
    type: "standard.Circle",
    size: { width: 30, height: 30 },
    attrs: {
      body: {
        fill: "#80aaff",
        stroke: "#333333"
      }
    },
    port: {
      markup: joint.util.svg/*xml*/ `
                <circle @selector="portBody"
                    r="15"
                    fill="#80aaff"
                    stroke="#333333"
                    stroke-width="2"
                    magnet="active"
                />
            `
    }
  }
];

stencilElements.forEach(
  (element) =>
    (element.ports = {
      groups: {
        absolute: {
          position: "absolute",
          label: {
            position: { name: "inside", args: { offset: 22 } },
            markup: joint.util.svg/*xml*/ `
                    <text @selector="portLabel"
                        y="0.3em"
                        fill="#333"
                        text-anchor="middle"
                        font-size="15"
                        font-family="sans-serif"
                    />
                `
          }
        }
      },
      items: []
    })
);

stencil.load({
  elements: stencilElements,
  ports: stencilPorts
});

let portIdCounter = 1;

function addElementPort(element, port, position) {
  const portId = `P-${portIdCounter++}`;
  element.addPort({
    id: portId,
    group: "absolute",
    args: position,
    ...util.merge(port, {
      attrs: {
        portLabel: {
          text: portId
        }
      }
    })
  });
  return portId;
}

stencil.on({
  "element:dragstart": (cloneView, evt) => {
    const clone = cloneView.model;
    evt.data.isPort = clone.get("port");
    paper.removeTools();
  },
  "element:dragstart element:drag": (cloneView, evt, cloneArea) => {
    if (!evt.data.isPort) {
      return;
    }
    // Note: cloneArea `topLeft` points to the center of the port because of
    // the `translate(-${width/2}, -${height/2})` transform we added to the port
    // in the `dragStartClone` callback.
    const [dropTarget] = graph.findModelsFromPoint(cloneArea.topLeft());
    if (dropTarget) {
      evt.data.dropTarget = dropTarget;
      highlighters.mask.add(
        dropTarget.findView(paper),
        "body",
        "valid-drop-target",
        {
          layer: dia.Paper.Layers.BACK,
          attrs: {
            stroke: "#9580ff",
            "stroke-width": 2
          }
        }
      );
      highlighters.addClass.removeAll(cloneView.paper, "invalid-drop-target");
    } else {
      evt.data.dropTarget = null;
      highlighters.addClass.add(cloneView, "body", "invalid-drop-target", {
        className: "invalid-drop-target"
      });
      highlighters.mask.removeAll(paper, "valid-drop-target");
    }
  },
  "element:dragend": (cloneView, evt, cloneArea) => {
    if (!evt.data.isPort) {
      return;
    }
    const clone = cloneView.model;
    const { dropTarget } = evt.data;
    if (dropTarget) {
      stencil.cancelDrag();
      addElementPort(
        dropTarget,
        clone.get("port"),
        cloneArea.topLeft().difference(dropTarget.position()).toJSON()
      );
    } else {
      // An invalid drop target. Animate the port back to the stencil.
      stencil.cancelDrag({ dropAnimation: true });
    }
    highlighters.mask.removeAll(paper, "valid-drop-target");
  }
});

// Port Move Tool
// --------------

// A custom element tool that allows to move a port of an element.
// The source code comes from `joint.linkTools.Segment` and has been modified for this sample.

const PortHandle = mvc.View.extend({
  tagName: "circle",
  svgElement: true,
  className: "port-handle",
  events: {
    mousedown: "onPointerDown",
    touchstart: "onPointerDown"
  },
  documentEvents: {
    mousemove: "onPointerMove",
    touchmove: "onPointerMove",
    mouseup: "onPointerUp",
    touchend: "onPointerUp",
    touchcancel: "onPointerUp"
  },
  attributes: {
    r: 20,
    fill: "transparent",
    stroke: "#002b33",
    "stroke-width": 2,
    cursor: "grab"
  },
  position: function (x, y) {
    this.vel.attr({ cx: x, cy: y });
  },
  color: function (color) {
    this.el.style.stroke = color || this.attributes.stroke;
  },
  onPointerDown: function (evt) {
    if (this.options.guard(evt)) return;
    evt.stopPropagation();
    evt.preventDefault();
    this.options.paper.undelegateEvents();
    this.delegateDocumentEvents(null, evt.data);
    this.trigger("will-change", this, evt);
  },
  onPointerMove: function (evt) {
    this.trigger("changing", this, evt);
  },
  onPointerUp: function (evt) {
    if (evt.detail === 2) {
      this.trigger("remove", this, evt);
    } else {
      this.trigger("changed", this, evt);
      this.undelegateDocumentEvents();
    }
    this.options.paper.delegateEvents();
  }
});

const Ports = dia.ToolView.extend({
  name: "ports",
  options: {
    handleClass: PortHandle,
    activeColor: "#4666E5"
  },
  children: [
    {
      tagName: "circle",
      selector: "preview",
      className: "joint-ports-preview",
      attributes: {
        r: 13,
        "stroke-width": 2,
        fill: "#4666E5",
        "fill-opacity": 0.3,
        stroke: "#4666E5",
        "pointer-events": "none"
      }
    }
  ],
  handles: null,
  onRender: function () {
    this.renderChildren();
    this.updatePreview(null);
    this.resetHandles();
    this.renderHandles();
    return this;
  },
  update: function () {
    const positions = this.getPortPositions();
    if (positions.length === this.handles.length) {
      this.updateHandles();
    } else {
      this.resetHandles();
      this.renderHandles();
    }
    this.updatePreview(null);
    return this;
  },
  resetHandles: function () {
    const handles = this.handles;
    this.handles = [];
    this.stopListening();
    if (!Array.isArray(handles)) return;
    for (let i = 0, n = handles.length; i < n; i++) {
      handles[i].remove();
    }
  },
  renderHandles: function () {
    const positions = this.getPortPositions();
    for (let i = 0, n = positions.length; i < n; i++) {
      const position = positions[i];
      const handle = new this.options.handleClass({
        index: i,
        portId: position.id,
        paper: this.paper,
        guard: (evt) => this.guard(evt)
      });
      handle.render();
      handle.position(position.x, position.y);
      this.simulateRelatedView(handle.el);
      handle.vel.appendTo(this.el);
      this.handles.push(handle);
      this.startHandleListening(handle);
    }
  },
  updateHandles: function () {
    const positions = this.getPortPositions();
    for (let i = 0, n = positions.length; i < n; i++) {
      const position = positions[i];
      const handle = this.handles[i];
      if (!handle) return;
      handle.position(position.x, position.y);
    }
  },
  updatePreview: function (x, y) {
    const { preview } = this.childNodes;
    if (!preview) return;
    if (!Number.isFinite(x)) {
      preview.setAttribute("display", "none");
    } else {
      preview.removeAttribute("display");
      preview.setAttribute("transform", `translate(${x},${y})`);
    }
  },
  startHandleListening: function (handle) {
    this.listenTo(handle, "will-change", this.onHandleWillChange);
    this.listenTo(handle, "changing", this.onHandleChanging);
    this.listenTo(handle, "changed", this.onHandleChanged);
    this.listenTo(handle, "remove", this.onHandleRemove);
  },
  onHandleWillChange: function (handle, evt) {
    this.focus();
    handle.color(this.options.activeColor);
    const portNode = this.relatedView.findPortNode(
      handle.options.portId,
      "root"
    );
    portNode.style.opacity = 0.2;
  },
  onHandleChanging: function (handle, evt) {
    const { x, y } = this.getPositionFromEvent(evt);
    this.updatePreview(x, y);
  },
  onHandleChanged: function (handle, evt) {
    const { relatedView } = this;
    const { model } = relatedView;
    const portId = handle.options.portId;
    handle.color(null);
    const portNode = this.relatedView.findPortNode(portId, "root");
    portNode.style.opacity = "";
    this.updatePreview(null);
    const delta = this.getPositionFromEvent(evt).difference(
      relatedView.model.position()
    );
    model.portProp(
      portId,
      "args",
      { x: delta.x, y: delta.y },
      { rewrite: true, tool: this.cid }
    );
    this.resetHandles();
    this.renderHandles();
  },
  onHandleRemove: function (handle, evt) {
    const { relatedView } = this;
    const { model } = relatedView;
    const portId = handle.options.portId;
    handle.color(null);
    const portNode = this.relatedView.findPortNode(portId, "root");
    portNode.style.opacity = "";
    this.updatePreview(null);
    model.removePort(portId, { tool: this.cid });
    this.resetHandles();
    this.renderHandles();
  },
  // Get an array with all the port positions.
  getPortPositions: function () {
    const { relatedView } = this;
    const translateMatrix = relatedView.getRootTranslateMatrix();
    const rotateMatrix = relatedView.getRootRotateMatrix();
    const matrix = translateMatrix.multiply(rotateMatrix);
    const groupNames = Object.keys(relatedView.model.prop("ports/groups"));
    const portsPositions = {};
    for (let i = 0, n = groupNames.length; i < n; i++) {
      Object.assign(
        portsPositions,
        relatedView.model.getPortsPositions(groupNames[i])
      );
    }
    const positions = [];
    for (let id in portsPositions) {
      const point = V.transformPoint(portsPositions[id], matrix);
      positions.push({
        x: point.x,
        y: point.y,
        id
      });
    }
    return positions;
  },
  // Get the port position from the event coordinates.
  // The position is snapped to the point inside the element's bbox.
  getPositionFromEvent: function (evt) {
    const { relatedView } = this;
    const bbox = relatedView.model.getBBox();
    const [, x, y] = relatedView.paper.getPointerArgs(evt);
    const p = new g.Point(x, y);
    if (bbox.containsPoint(p)) {
      return p;
    }
    return bbox.pointNearestToPoint(p);
  },
  onRemove: function () {
    this.resetHandles();
  }
});

// Example graph
// -------------

graph.addCells([
  {
    ...stencilElements[0],
    id: "r1",
    position: { x: 40, y: 100 },
    size: { width: 200, height: 200 }
  },
  {
    ...stencilElements[1],
    id: "r2",
    position: { x: 400, y: 100 },
    size: { width: 200, height: 200 }
  }
]);

const r1 = graph.getCell("r1");
const r1p1 = addElementPort(r1, stencilPorts[0].port, { x: "100%", y: 20 });
const r1p2 = addElementPort(r1, stencilPorts[0].port, { x: "100%", y: 60 });
addElementPort(r1, stencilPorts[0].port, { x: "100%", y: 100 });
addElementPort(r1, stencilPorts[2].port, { x: "100%", y: 180 });

const r2 = graph.getCell("r2");
const r2p1 = addElementPort(r2, stencilPorts[1].port, { x: 0, y: 40 });
const r2p2 = addElementPort(r2, stencilPorts[1].port, { x: 0, y: 160 });

graph.addCells([
  {
    type: "standard.Link",
    source: { id: "r1", port: r1p1 },
    target: { id: "r2", port: r2p1 }
  },
  {
    type: "standard.Link",
    source: { id: "r1", port: r1p2 },
    target: { id: "r2", port: r2p2 }
  }
]);

graph
  .getCell("r2")
  .findView(paper)
  .addTools(
    new dia.ToolsView({
      tools: [new Ports()]
    })
  );