gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
419 lines (382 loc) • 18.5 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
<meta name="description" content="Use HTML drag-and-drop to implement dragging HTML elements onto a GoJS Diagram to create new nodes. Also demonstrates pasting from the external clipboard."/>
<link rel="stylesheet" href="../assets/css/style.css"/>
<!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
<title>HTML Drag and Drop, and external Clipboard pasting</title>
</head>
<body>
<!-- This top nav is not part of the sample code -->
<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
<div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
<div class="md:pl-4">
<a class="text-white hover:text-white no-underline hover:no-underline
font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">
<h1 class="my-0 p-1 ">GoJS</h1>
</a>
</div>
<button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
<path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
<path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
<div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">
<ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
<li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
</ul>
</div>
</div>
<hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
</nav>
<div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
<div id="navSide" class="flex flex-col w-full md:w-48 text-gray-700 bg-white flex-shrink-0"></div>
<!-- * * * * * * * * * * * * * -->
<!-- Start of GoJS sample code -->
<script src="../release/go.js"></script>
<div id="allSampleContent" class="p-4 w-full">
<style>
.draggable {
font: bold 16px sans-serif;
width: 140px;
height: 20px;
text-align: center;
background: white;
cursor: move;
margin-top: 20px;
}
.palettezone {
width: 160px;
height: 400px;
background: lightblue;
padding: 10px;
padding-top: 1px;
float: left;
}
</style>
<div id="sample">
<div style="width: 100%; display: flex; justify-content: space-between">
<div id="paletteZone" style="width: 160px; height: 400px; margin-right: 2px; background-color: lightblue; padding: 10px;">
<div class="draggable" draggable="true">Water</div>
<div class="draggable" draggable="true">Coffee</div>
<div class="draggable" draggable="true">Tea</div>
</div>
<div id="myDiagramDiv" style="flex-grow: 1; height: 400px; border: solid 1px black"></div>
</div>
<input id="removeCheckBox" type="checkbox" /><label for="removeCheckBox">Remove HTML item after drag</label>
<p>
The "Palette" in this sample is not a <a>Palette</a> (or GoJS component) at all.
It is a collection of HTML elements with draggable attributes using the
<a href="https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop">HTML Drag and Drop API</a>.
</p>
<p>
This sample lets you drag these HTML elements onto the Diagram to create GoJS nodes.
As the mouse passes over stationary nodes or links in the Diagram, they are highlighted.
</p>
<p>
If a drop happens (based on the mouse point) on an existing node,
a new link is also drawn from that existing node to the newly dropped node.
If a drop happens on an existing link, the link is reconnected to go to the
newly dropped node, and a new link is added to go from that newly dropped node
to whatever node the link had been connected to before.
</p>
<p>
This sample also demonstrates allowing external clipboard pasting,
by modifying <code>myDiagram.commandHandler.doKeyDown</code> to do nothing but allow
the event to bubble, and then defining a <code>"paste"</code> event on the <code>document</code>.
So the user can select some text, either on the page or in some other app,
and then a paste in the diagram will create a new node using that text.
</p>
</div>
<script id="code">
// *********************************************************
// First, set up the infrastructure to do HTML drag-and-drop
// *********************************************************
function init() {
let dragged = null; // A reference to the element currently being dragged
// This event should only fire on the drag targets.
// Instead of finding every drag target,
// we can add the event to the document and disregard
// all elements that are not of class "draggable"
document.addEventListener("dragstart", event => {
if (event.target.className !== "draggable") return;
// Some data must be set to allow drag
event.dataTransfer.setData("text", event.target.textContent);
// store a reference to the dragged element and the offset of the mouse from the center of the element
dragged = event.target;
dragged.offsetX = event.offsetX - dragged.clientWidth / 2;
dragged.offsetY = event.offsetY - dragged.clientHeight / 2;
// Objects during drag will have a red border
event.target.style.border = "2px solid red";
}, false);
// This event resets styles after a drag has completed (successfully or not)
document.addEventListener("dragend", event => {
// reset the border of the dragged element
dragged.style.border = "";
onHighlight(null);
}, false);
// Next, events intended for the drop target - the Diagram div
const div = document.getElementById("myDiagramDiv");
div.addEventListener("dragenter", event => {
// Here you could also set effects on the Diagram,
// such as changing the background color to indicate an acceptable drop zone
// Requirement in some browsers, such as Internet Explorer
event.preventDefault();
}, false);
div.addEventListener("dragover", event => {
// We call preventDefault to allow a drop
// But on divs that already contain an element,
// we want to disallow dropping
if (div === myDiagram.div) {
const can = event.target;
const pixelratio = myDiagram.computePixelRatio();
// if the target is not the canvas, we may have trouble, so just quit:
if (!(can instanceof HTMLCanvasElement)) return;
const bbox = can.getBoundingClientRect();
let bbw = bbox.width;
if (bbw === 0) bbw = 0.001;
let bbh = bbox.height;
if (bbh === 0) bbh = 0.001;
const mx = event.clientX - bbox.left * ((can.width / pixelratio) / bbw);
const my = event.clientY - bbox.top * ((can.height / pixelratio) / bbh);
const point = myDiagram.transformViewToDoc(new go.Point(mx, my));
const part = myDiagram.findPartAt(point, true);
onHighlight(part);
}
if (event.target.className === "dropzone") {
// Disallow a drop by returning before a call to preventDefault:
return;
}
// Allow a drop on everything else
event.preventDefault();
}, false);
div.addEventListener("dragleave", event => {
// reset background of potential drop target
if (event.target.className == "dropzone") {
event.target.style.background = "";
}
onHighlight(null);
}, false);
div.addEventListener("drop", event => {
// prevent default action
// (open as link for some elements in some browsers)
event.preventDefault();
// Dragging onto a Diagram
if (div === myDiagram.div) {
const can = event.target;
const pixelratio = myDiagram.computePixelRatio();
// if the target is not the canvas, we may have trouble, so just quit:
if (!(can instanceof HTMLCanvasElement)) return;
const bbox = can.getBoundingClientRect();
let bbw = bbox.width;
if (bbw === 0) bbw = 0.001;
let bbh = bbox.height;
if (bbh === 0) bbh = 0.001;
const mx = event.clientX - bbox.left * ((can.width / pixelratio) / bbw);
const my = event.clientY - bbox.top * ((can.height / pixelratio) / bbh);
const point = myDiagram.transformViewToDoc(new go.Point(mx, my));
// if there's nothing at that point
if (myDiagram.findPartAt(point) === null) {
// a return here doesn't allow the drop to happen
// return;
}
// otherwise create a new node at the drop point
myDiagram.startTransaction('new node');
const newdata = {
// assuming the locationSpot is Spot.Center:
location: myDiagram.transformViewToDoc(new go.Point(mx - dragged.offsetX, my - dragged.offsetY)),
text: event.dataTransfer.getData('text'),
color: "lightyellow"
};
myDiagram.model.addNodeData(newdata);
const newnode = myDiagram.findNodeForData(newdata);
if (newnode) {
myDiagram.select(newnode);
onDrop(newnode, point);
}
myDiagram.commitTransaction('new node');
// remove dragged element from its old location, if checkbox is checked
if (document.getElementById('removeCheckBox').checked) dragged.parentNode.removeChild(dragged);
}
// If we were using drag data, we could get it here, ie:
// const data = event.dataTransfer.getData('text');
}, false);
// this is called on a stationary node or link during an external drag-and-drop into a Diagram
function onHighlight(part) { // may be null
const oldskips = myDiagram.skipsUndoManager;
myDiagram.skipsUndoManager = true;
myDiagram.startTransaction("highlight");
if (part !== null) {
myDiagram.highlight(part);
} else {
myDiagram.clearHighlighteds();
}
myDiagram.commitTransaction("highlight");
myDiagram.skipsUndoManager = oldskips;
}
// this is called upon an external drop in this diagram,
// after a new node has been created and selected
function onDrop(newNode, point) {
const it = myDiagram.findPartsAt(point).iterator;
while (it.next()) {
const part = it.value;
if (part === newNode) continue;
// the drop happened on some Part -- call its mouseDrop handler
if (part && part.mouseDrop) {
const e = new go.InputEvent();
e.diagram = myDiagram;
e.documentPoint = point;
e.viewPoint = myDiagram.transformDocToView(point);
e.up = true;
myDiagram.lastInput = e;
// should be running in a transaction already
part.mouseDrop(e, part);
return;
}
}
// didn't find anything to drop onto
}
// *****************************
// Second, set up a GoJS Diagram
// *****************************
// Since 2.2 you can also author concise templates with method chaining instead of GraphObject.make
// For details, see https://gojs.net/latest/intro/buildingObjects.html
const $ = go.GraphObject.make; // for conciseness in defining templates
const myDiagram = new go.Diagram("myDiagramDiv", // create a Diagram for the DIV HTML element
{
layout: $(go.TreeLayout),
"undoManager.isEnabled": true
});
// define a Node template
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{ locationSpot: go.Spot.Center },
new go.Binding('location'),
$(go.Shape, "Rectangle",
{ fill: 'white' },
// Shape.fill is bound to Node.data.color
new go.Binding("fill", "color"),
// this binding changes the Shape.fill when Node.isHighlighted changes value
new go.Binding("fill", "isHighlighted", (h, shape) => {
if (h) return "red";
const c = shape.part.data.color;
return c ? c : "white";
}).ofObject()), // binding source is Node.isHighlighted
$(go.TextBlock,
{ margin: 3, font: "bold 16px sans-serif", width: 140, textAlign: 'center' },
// TextBlock.text is bound to Node.data.key
new go.Binding("text")),
{ // on mouse-over, highlight the node
mouseDragEnter: (e, node) => node.isHighlighted = true,
mouseDragLeave: (e, node) => node.isHighlighted = false,
// on a mouse-drop add a link from the dropped-upon node to the new node
mouseDrop: (e, node) => {
const newnode = e.diagram.selection.first();
if (!mayConnect(node, newnode)) return;
const incoming = newnode.findLinksInto().first();
if (incoming) e.diagram.remove(incoming);
e.diagram.model.addLinkData( { from: node.key, to: newnode.key });
}
}
);
// define a Link template
myDiagram.linkTemplate =
$(go.Link,
// two path Shapes: the transparent one becomes visible during mouse-over
$(go.Shape, { isPanelMain: true, strokeWidth: 6, stroke: "transparent" },
new go.Binding("stroke", "isHighlighted", h => h ? "red" : "transparent").ofObject()),
$(go.Shape, { isPanelMain: true, strokeWidth: 1 }),
$(go.Shape, { toArrow: "Standard" }),
{ // on mouse-over, highlight the link
mouseDragEnter: (e, link) => link.isHighlighted = true,
mouseDragLeave: (e, link) => link.isHighlighted = false,
// on a mouse-drop splice the new node in between the dropped-upon link's fromNode and toNode
mouseDrop: (e, link) => {
const oldto = link.toNode;
const newnode = e.diagram.selection.first();
if (!mayConnect(newnode, oldto)) return;
if (!mayConnect(link.fromNode, newnode)) return;
link.toNode = newnode;
e.diagram.model.addLinkData({ from: newnode.key, to: oldto.key });
}
}
);
// Decide whether a link from node1 to node2 may be created by a drop operation
function mayConnect(node1, node2) {
return node1 !== node2;
}
// Modify the CommandHandler's doKeyDown to do nothing except bubble the event
// on a potential Paste command:
myDiagram.commandHandler.doKeyDown = function() { // method override must be function, not =>
const diagram = this.diagram;
const e = diagram.lastInput;
// The meta (Command) key substitutes for "control" for Mac commands
const control = e.meta || e.control;
const shift = e.shift;
const key = e.key;
if (((control && key === 'V') || (shift && key === 'Insert')) &&
(!diagram.commandHandler.canPasteSelection() || diagram.selection.count === 0)) {
// Instead of the usual behavior:
// if (this.canPasteSelection()) this.pasteSelection();
// let the event bubble up the DOM:
e.bubbles = true;
} else {
go.CommandHandler.prototype.doKeyDown.call(this);
}
};
// handle inserting a new node using text that is in the system clipboard
document.addEventListener('paste', e => {
const paste = e.clipboardData.getData("text");
// Decide if the clipboard should be pasted, or if we should let GoJS paste
// This sample pastes from the clipboard if it contains any text at all,
// Otherwise, it pastes from GoJS
if (paste.length > 0) {
// Create a new node out of the text and paste it at the mouse location
const loc = myDiagram.lastInput.documentPoint;
const newdata = { text: paste, location: loc };
myDiagram.model.addNodeData(newdata);
const newnode = myDiagram.findNodeForData(newdata);
if (newnode) myDiagram.select(newnode);
// clear the GoJS clipboard
myDiagram.commandHandler.copyToClipboard(null);
} else {
// If the clipbooard does not contain anything, paste from GoJS instead
const commandHandler = myDiagram.commandHandler;
if (commandHandler.canPasteSelection()) commandHandler.pasteSelection();
}
});
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue" },
{ key: 2, text: "Beta", color: "orange" },
{ key: 3, text: "Gamma", color: "lightgreen" },
{ key: 4, text: "Delta", color: "pink" }
],
[
{ from: 1, to: 2 },
{ from: 1, to: 3 }
]);
}
init();
</script>
</div>
<!-- * * * * * * * * * * * * * -->
<!-- End of GoJS sample code -->
</div>
</body>
<!-- This script is part of the gojs.net website, and is not needed to run the sample -->
<script src="../assets/js/goSamples.js"></script>
</html>