gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
349 lines (315 loc) • 11.6 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Floor Plan Editor</title>
<meta name="description" content="TypeScript: A simple floor plan editor." />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
<style type="text/css">
#menuBar {
border: none;
border: 0px;
margin: 0px;
padding: 0px;
font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
width: auto;
}
#menuBar ul {
background: #ededed;
height: 25px;
list-style: none;
margin: 0;
padding: 0;
}
#menuBar li {
float: left;
padding: 0px;
}
#menuBar li a {
background: #ededed;
display: block;
font-weight: normal;
line-height: 25px;
margin: 0px;
padding: 0px 5px;
text-align: center;
text-decoration: none;
}
#menuBar > ul > li > a {
color: black;
}
#menuBar ul ul a {
color: black;
}
#menuBar li > a:hover,
#menuBar ul li:hover > a {
background: #007FFF;
color: white;
text-decoration: none;
}
#menuBar li ul {
background: #9CCB19;
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 150px;
z-index: 200;
}
#menuBar li:hover ul {
display: block;
}
#menuBar li li {
background: #ededed;
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 150px;
}
#menuBar li:hover li a {
background: none;
}
#menuBar li ul a {
display: block;
height: 25px;
font-size: 12px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}
#menuBar li ul a:hover,
#menuBar li ul li:hover > a {
background: #007FFF;
border: 0px;
color: white;
text-decoration: none;
}
/*sub-sublist*/
#nav li:hover ul ul {
display: none;
}
#nav li li:hover ul {
background: #9CCB19;
margin-left: 150px;
margin-top: -25px;
display: block;
}
/*sub-sub-sublist*/
#nav li li:hover ul ul {
display: none;
}
#nav li li li:hover ul {
background: #9CCB19;
margin-left: 150px;
margin-top: -25px;
display: block;
color: #0276FD;
}
input {
text-align: center;
font-size: large;
float: left;
}
#myOverviewDiv {
background-color: lightgray;
}
#currentFile {
background: #1874CD;
width: 100%;
text-align: center;
font-family: Arial;
font-weight: bold;
font-size: 14px;
padding: 3px 0px;
color: white;
}
.draggable {
display: inline-block;
vertical-align: top;
border: 1px solid gray;
background-color: #e2e2e2;
position: absolute;
top: 40%;
left: 50%;
width: 300px;
height: 200px;
z-index: 500;
}
.handle {
background-color: #9CCB19;
text-align: center;
font: bold 12px sans-serif;
}
.elementText {
font-family: Arial;
font-size: medium;
margin-left: 10px;
margin-top: 20px;
margin-bottom: 10px;
}
.mySavedFiles {
font-family: Arial;
font-size: medium;
width: 250px;
margin-left: 25px;
}
.elementBtn {
margin-top: 20px;
font-family: Arial;
font-size: medium;
margin-left: 20px;
}
</style>
<script src="../samples/assets/require.js"></script>
<script>
function init() {
require(["FloorPlanEditorScript"], function(app) {
app.init();
document.getElementById("newDocument").onclick = app.newDocument;
document.getElementById("openDocuments").onclick = app.openDocument;
document.getElementById("saveDocument").onclick = app.saveDocument;
document.getElementById("saveDocumentAs").onclick = app.saveDocumentAs;
document.getElementById("removeDocuments").onclick = app.removeDocument;
document.getElementById("undo").onclick = app.undo;
document.getElementById("redo").onclick = app.redo;
document.getElementById("cutSelection").onclick = app.cutSelection;
document.getElementById("copySelection").onclick = app.copySelection;
document.getElementById("pasteSelection").onclick = app.pasteSelection;
document.getElementById("deleteSelection").onclick = app.deleteSelection;
document.getElementById("selectAll").onclick = app.selectAll;
document.getElementById("alignLeft").onclick = app.alignLeft;
document.getElementById("alignRight").onclick = app.alignRight;
document.getElementById("alignTop").onclick = app.alignTop;
document.getElementById("alignBottom").onclick = app.alignBottom;
document.getElementById("alignCenterX").onclick = app.alignCenterX;
document.getElementById("alignCenterY").onclick = app.alignCenterY;
document.getElementById("alignRows").onclick = app.alignRows;
document.getElementById("alignColumns").onclick = app.alignColumns;
document.getElementById("Rotate45").onclick = app.rotate45;
document.getElementById("Rotate_45").onclick = app.rotate_45;
document.getElementById("Rotate90").onclick = app.rotate90;
document.getElementById("Rotate_90").onclick = app.rotate_90;
document.getElementById("Rotate180").onclick = app.rotate180;
document.getElementById("grid").onclick = app.updateGridOption;
document.getElementById("guidelines").onclick = app.updateGuidelinesOption;
document.getElementById("snap").onclick = app.updateSnapOption;
document.getElementById("move").onclick = app.arrowMode;
document.getElementById("select").onclick = app.arrowMode;
document.getElementById("scroll").onclick = app.arrowMode;
document.getElementById("openBtn").onclick = app.loadFile;
document.getElementById("cancelBtn").onclick = app.cancel1;
document.getElementById("removeBtn").onclick = app.removeFile;
document.getElementById("cancelBtn2").onclick = app.cancel2;
});
}
</script>
</head>
<body onload="init()">
<div>
<div id="currentFile">(Unsaved File)</div>
<div id="menuBar">
<ul id="nav">
<li><a href="#">File</a>
<ul>
<li><a href="#" id="newDocument">New</a></li>
<li><a href="#" id="openDocuments">Open...</a></li>
<li><a href="#" id="saveDocument">Save</a></li>
<li><a href="#" id="saveDocumentAs">Save As...</a></li>
<li><a href="#" id="removeDocuments">Delete...</a></li>
</ul>
</li>
<li><a href="#">Edit</a>
<ul>
<li><a href="#" id="undo">Undo</a></li>
<li><a href="#" id="redo">Redo</a></li>
<li><a href="#" id="cutSelection">Cut</a></li>
<li><a href="#" id="copySelection">Copy</a></li>
<li><a href="#" id="pasteSelection">Paste</a></li>
<li><a href="#" id="deleteSelection">Delete</a></li>
<li><a href="#" id="selectAll">Select All</a></li>
</ul>
</li>
<li><a href="#">Align</a>
<ul >
<li><a href="#" id="alignLeft">Left Sides</a></li>
<li><a href="#" id="alignRight">Right Sides</a></li>
<li><a href="#" id="alignTop">Tops</a></li>
<li><a href="#" id="alignBottom">Bottoms</a></li>
<li><a href="#" id="alignCenterX">Center X</a></li>
<li><a href="#" id="alignCenterY">Center Y</a></li>
</ul>
</li>
<li><a href="#">Space</a>
<ul >
<li><a href="#" id="alignRows">In Row...</a></li>
<li><a href="#" id="alignColumns">In Column...</a></li>
</ul>
</li>
<li><a href="#">Rotate</a>
<ul>
<li><a id="Rotate45" href="#">45°</a></li>
<li><a id="Rotate_45" href="#">-45°</a></li>
<li><a id="Rotate90" href="#">90°</a></li>
<li><a id="Rotate_90" href="#">-90°</a></li>
<li><a id="Rotate180" href="#">180°</a></li>
</ul>
</li>
<li><a href="#">Options</a>
<ul>
<li><a href="#"><input id="grid" type="checkbox" name="options" value="grid">Grid</a></li>
<li><a href="#"><input id="guidelines" type="checkbox" name="options" value="0" checked="checked">Guidelines</a></li>
<li><a href="#"><input id="snap" type="checkbox" name="options" value="0">Snapping</a></li>
<li><a href="#">Arrow Keys >></a>
<form >
<ul>
<li><a href="#"><input type="radio" name="arrow" id="move" checked="checked">Move</a></li>
<li><a href="#"><input type="radio" name="arrow" id="select">Select</a></li>
<li><a href="#"><input type="radio" name="arrow" id="scroll">Scroll</a></li>
</ul>
</form>
</li>
</ul>
</li>
<li><a href="#" onclick="window.open('FloorPlanMonitor.html')">Monitor</a></li>
</ul>
</div><!--END menu bar -->
<div id="PaletteAndDiagram" style="position: relative; overflow: hidden; width: 100%;">
<div id="sideBar" style="float:left; width:23%; min-height: 500px; text-align:center">
<div class="handle">Palette:</div>
<div id="myPaletteDiv" style="border:solid 1px gray; width: 100%; min-height: 625px"></div>
<div class="handle">Overview:</div>
<div id="myOverviewDiv" style="border:solid 1px gray; width: 100%; height:225px;"></div>
</div>
<div id="myDiagramDiv" style="position: absolute; border: solid 1px gray; width:77%; height: 100%; min-height:500px; margin-left:23%; background-color:white"></div>
</div>
<div id="openDocument" class="draggable">
<div id="openDraggableHandle" class="handle">Open File</div>
<div id="openText" class="elementText">Choose file to open...</div>
<select id="mySavedFiles" class="mySavedFiles" ></select>
<br />
<button id="openBtn" class="elementBtn" type="button"style="margin-left: 70px">Open</button>
<button id="cancelBtn" class="elementBtn" type="button">Cancel</button>
</div>
<div id="removeDocument" class="draggable">
<div id="removeDraggableHandle" class="handle">Delete File</div>
<div id="removeText" class="elementText">Choose file to remove...</div>
<select id="mySavedFiles2" class="mySavedFiles" ></select>
<br />
<button id="removeBtn" class="elementBtn" type="button" style="margin-left: 70px">Remove</button>
<button id="cancelBtn2" class="elementBtn" type="button">Cancel</button>
</div>
<p>
This sample demonstrates several custom <a>Tool</a>s, defined in their own files:
<a href="GuidedDraggingTool.js">GuidedDraggingTool.js</a>, <a href="ResizeMultipleTool.js">ResizeMultipleTool.js</a>, <a href="RotateMultipleTool.js">RotateMultipleTool.js</a>,
and a custom <a>CommandHandler</a>: <a href="DrawCommandHandler.js">DrawCommandHandler.js</a>.
</p>
</div>
</body>
</html>