You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
659 lines
30 KiB
659 lines
30 KiB
5 years ago
|
/*
|
||
|
|
* Copyright (C) 1998-2019 by Northwoods Software Corporation. All Rights Reserved.
|
||
|
|
*/
|
||
|
|
(function (factory) {
|
||
|
|
if (typeof module === "object" && typeof module.exports === "object") {
|
||
|
|
var v = factory(require, exports);
|
||
|
|
if (v !== undefined) module.exports = v;
|
||
|
|
}
|
||
|
|
else if (typeof define === "function" && define.amd) {
|
||
|
|
define(["require", "exports", "../release/go", "./DrawCommandHandler", "./GuidedDraggingTool", "./ResizeMultipleTool", "./RotateMultipleTool"], factory);
|
||
|
|
}
|
||
|
|
})(function (require, exports) {
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var go = require("../release/go");
|
||
|
|
var DrawCommandHandler_1 = require("./DrawCommandHandler");
|
||
|
|
var GuidedDraggingTool_1 = require("./GuidedDraggingTool");
|
||
|
|
var ResizeMultipleTool_1 = require("./ResizeMultipleTool");
|
||
|
|
var RotateMultipleTool_1 = require("./RotateMultipleTool");
|
||
|
|
var myDiagram;
|
||
|
|
function init() {
|
||
|
|
// hides open HTML Element
|
||
|
|
var openDoc = document.getElementById('openDocument');
|
||
|
|
if (openDoc)
|
||
|
|
openDoc.style.visibility = 'hidden';
|
||
|
|
// hides remove HTML Element
|
||
|
|
var removeDoc = document.getElementById('removeDocument');
|
||
|
|
if (removeDoc)
|
||
|
|
removeDoc.style.visibility = 'hidden';
|
||
|
|
var $ = go.GraphObject.make; // for more concise visual tree definitions
|
||
|
|
myDiagram =
|
||
|
|
$(go.Diagram, 'myDiagramDiv', {
|
||
|
|
allowLink: false,
|
||
|
|
commandHandler: new DrawCommandHandler_1.DrawCommandHandler(),
|
||
|
|
// default to having arrow keys move selected nodes
|
||
|
|
'commandHandler.arrowKeyBehavior': 'move',
|
||
|
|
// allow Ctrl-G to call groupSelection()
|
||
|
|
'commandHandler.archetypeGroupData': { text: 'Group', isGroup: true },
|
||
|
|
rotatingTool: new RotateMultipleTool_1.RotateMultipleTool(),
|
||
|
|
resizingTool: new ResizeMultipleTool_1.ResizeMultipleTool(),
|
||
|
|
draggingTool: new GuidedDraggingTool_1.GuidedDraggingTool(),
|
||
|
|
'draggingTool.horizontalGuidelineColor': 'blue',
|
||
|
|
'draggingTool.verticalGuidelineColor': 'blue',
|
||
|
|
'draggingTool.centerGuidelineColor': 'green',
|
||
|
|
'draggingTool.guidelineWidth': 1,
|
||
|
|
// notice whenever the selection may have changed
|
||
|
|
'ChangedSelection': enableAll,
|
||
|
|
// notice when the Paste command may need to be reenabled
|
||
|
|
'ClipboardChanged': enableAll,
|
||
|
|
// notice when an object has been dropped from the palette
|
||
|
|
'ExternalObjectsDropped': function (e) {
|
||
|
|
var elt = document.getElementById('myDiagramDiv');
|
||
|
|
if (elt)
|
||
|
|
elt.focus(); // assume keyboard focus should be on myDiagram
|
||
|
|
myDiagram.toolManager.draggingTool.clearGuidelines(); // remove any guidelines
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// sets the qualities of the tooltip
|
||
|
|
var tooltiptemplate = $('ToolTip', $(go.TextBlock, { margin: 3, editable: true },
|
||
|
|
// converts data about the part into a string
|
||
|
|
new go.Binding('text', '', function (data) {
|
||
|
|
if (data.item !== undefined)
|
||
|
|
return data.item;
|
||
|
|
return '(unnamed item)';
|
||
|
|
})));
|
||
|
|
// Define the generic furniture and structure Nodes.
|
||
|
|
// The Shape gets it Geometry from a geometry path string in the bound data.
|
||
|
|
myDiagram.nodeTemplate =
|
||
|
|
$(go.Node, 'Spot', {
|
||
|
|
locationObjectName: 'SHAPE',
|
||
|
|
locationSpot: go.Spot.Center,
|
||
|
|
toolTip: tooltiptemplate,
|
||
|
|
selectionAdorned: false // use a Binding on the Shape.stroke to show selection
|
||
|
|
},
|
||
|
|
// remember the location of this Node
|
||
|
|
new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
|
||
|
|
// move a selected part into the Foreground layer, so it isn't obscured by any non-selected parts
|
||
|
|
new go.Binding('layerName', 'isSelected', function (s) { return s ? 'Foreground' : ''; }).ofObject(),
|
||
|
|
// can be resided according to the user's desires
|
||
|
|
{ resizable: true, resizeObjectName: 'SHAPE' }, { rotatable: true, rotateObjectName: 'SHAPE' }, $(go.Shape, {
|
||
|
|
name: 'SHAPE',
|
||
|
|
// the following are default values;
|
||
|
|
// actual values may come from the node data object via data-binding
|
||
|
|
geometryString: 'F1 M0 0 L20 0 20 20 0 20 z',
|
||
|
|
fill: 'rgb(130, 130, 256)'
|
||
|
|
},
|
||
|
|
// this determines the actual shape of the Shape
|
||
|
|
new go.Binding('geometryString', 'geo'),
|
||
|
|
// allows the color to be determined by the node data
|
||
|
|
new go.Binding('fill', 'color'),
|
||
|
|
// selection causes the stroke to be blue instead of black
|
||
|
|
new go.Binding('stroke', 'isSelected', function (s) { return s ? 'dodgerblue' : 'black'; }).ofObject(),
|
||
|
|
// remember the size of this node
|
||
|
|
new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
|
||
|
|
// can set the angle of this Node
|
||
|
|
new go.Binding('angle', 'angle').makeTwoWay()));
|
||
|
|
myDiagram.nodeTemplate.contextMenu =
|
||
|
|
$('ContextMenu', $('ContextMenuButton', $(go.TextBlock, 'Rename', { margin: 3 }), { click: function (e, obj) { rename(obj); } }), $('ContextMenuButton', $(go.TextBlock, 'Cut', { margin: 3 }), { click: function (e, obj) { myDiagram.commandHandler.cutSelection(); } }), $('ContextMenuButton', $(go.TextBlock, 'Copy', { margin: 3 }), { click: function (e, obj) { myDiagram.commandHandler.copySelection(); } }), $('ContextMenuButton', $(go.TextBlock, 'Rotate +45', { margin: 3 }), { click: function (e, obj) { myDiagram.commandHandler.rotate(45); } }), $('ContextMenuButton', $(go.TextBlock, 'Rotate -45', { margin: 3 }), { click: function (e, obj) { myDiagram.commandHandler.rotate(-45); } }), $('ContextMenuButton', $(go.TextBlock, 'Rotate +90', { margin: 3 }), { click: function (e, obj) { myDiagram.commandHandler.rotate(90); } }), $('ContextMenuButton', $(go.TextBlock, 'Rotate -90', { margin: 3 }), { click: function (e, obj) { myDiagram.commandHandler.rotate(-90); } }), $('ContextMenuButton', $(go.TextBlock, 'Rotate 180', { margin: 3 }), { click: function (e, obj) { myDiagram.commandHandler.rotate(180); } }));
|
||
|
|
// group settings from basic.html to lock things together
|
||
|
|
myDiagram.groupTemplate =
|
||
|
|
$(go.Group, go.Panel.Auto, {
|
||
|
|
ungroupable: true,
|
||
|
|
toolTip: tooltiptemplate
|
||
|
|
}, $(go.Shape, 'Rectangle', // the Group is not seen but can be selected due to the transparent fill
|
||
|
|
{ fill: 'transparent', stroke: 'lightgray', strokeWidth: 1 }), $(go.Placeholder));
|
||
|
|
// make grouped Parts unselectable
|
||
|
|
myDiagram.addDiagramListener('SelectionGrouped', function (e) {
|
||
|
|
// e.subject should be the new Group
|
||
|
|
e.subject.memberParts.each(function (part) { part.selectable = false; });
|
||
|
|
});
|
||
|
|
myDiagram.addDiagramListener('SelectionUngrouped', function (e) {
|
||
|
|
// e.parameter should be collection of ungrouped former members
|
||
|
|
e.parameter.each(function (part) {
|
||
|
|
part.selectable = true;
|
||
|
|
part.isSelected = true;
|
||
|
|
});
|
||
|
|
});
|
||
|
|
myDiagram.addDiagramListener('SelectionCopied', function (e) {
|
||
|
|
// selection collection will be modified during this loop,
|
||
|
|
// so make a copy of it first
|
||
|
|
var sel = myDiagram.selection.toArray();
|
||
|
|
for (var i = 0; i < sel.length; i++) {
|
||
|
|
var part = sel[i];
|
||
|
|
// don't have any members of Groups be selected or selectable
|
||
|
|
if (part instanceof go.Group) {
|
||
|
|
var mems = new go.Set().addAll(part.memberParts);
|
||
|
|
mems.each(function (member) {
|
||
|
|
member.isSelected = false;
|
||
|
|
member.selectable = false;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// change the title to indicate that the diagram has been modified
|
||
|
|
myDiagram.addDiagramListener('Modified', function (e) {
|
||
|
|
var currentFile = document.getElementById('currentFile');
|
||
|
|
if (currentFile === null)
|
||
|
|
return;
|
||
|
|
var text = currentFile.textContent || '';
|
||
|
|
var idx = text.indexOf('*');
|
||
|
|
if (myDiagram.isModified) {
|
||
|
|
if (idx < 0)
|
||
|
|
currentFile.textContent = text + '*';
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (idx >= 0)
|
||
|
|
currentFile.textContent = text.substr(0, idx);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// the Palette
|
||
|
|
// brushes for furniture structures
|
||
|
|
var wood = $(go.Brush, 'Linear', { 0: '#964514', 1: '#5E2605' });
|
||
|
|
var wall = $(go.Brush, 'Linear', { 0: '#A8A8A8', 1: '#545454' });
|
||
|
|
var blue = $(go.Brush, 'Linear', { 0: '#42C0FB', 1: '#009ACD' });
|
||
|
|
var metal = $(go.Brush, 'Linear', { 0: '#A8A8A8', 1: '#474747' });
|
||
|
|
var green = $(go.Brush, 'Linear', { 0: '#9CCB19', 1: '#698B22' });
|
||
|
|
// default structures and furniture
|
||
|
|
var myPalette = $(go.Palette, 'myPaletteDiv', {
|
||
|
|
nodeTemplate: myDiagram.nodeTemplate,
|
||
|
|
'contextMenuTool.isEnabled': false,
|
||
|
|
allowZoom: false,
|
||
|
|
layout: $(go.GridLayout, { cellSize: new go.Size(1, 1), spacing: new go.Size(5, 5) }),
|
||
|
|
// initialize the Palette with a few furniture and structure nodes
|
||
|
|
model: $(go.GraphLinksModel, {
|
||
|
|
nodeDataArray: [
|
||
|
|
{
|
||
|
|
key: 1,
|
||
|
|
geo: 'F1 M0 0 L5,0 5,40 0,40 0,0z x M0,0 a40,40 0 0,0 -40,40 ',
|
||
|
|
item: 'left door',
|
||
|
|
color: wall
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 2,
|
||
|
|
geo: 'F1 M0 0 L5,0 5,40 0,40 0,0z x M5,0 a40,40 0 0,1 40,40 ',
|
||
|
|
item: 'right door',
|
||
|
|
color: wall
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 3, angle: 90,
|
||
|
|
geo: 'F1 M0,0 L0,100 12,100 12,0 0,0z',
|
||
|
|
item: 'wall',
|
||
|
|
color: wall
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 4, angle: 90,
|
||
|
|
geo: 'F1 M0,0 L0,50 10,50 10,0 0,0 x M5,0 L5,50z',
|
||
|
|
item: 'window',
|
||
|
|
color: 'whitesmoke'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 5,
|
||
|
|
geo: 'F1 M0,0 L50,0 50,12 12,12 12,50 0,50 0,0 z',
|
||
|
|
item: 'corner',
|
||
|
|
color: wall
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 6,
|
||
|
|
geo: 'F1 M0 0 L40 0 40 40 0 40 0 0 x M0 10 L40 10 x M 8 10 8 40 x M 32 10 32 40 z',
|
||
|
|
item: 'arm chair',
|
||
|
|
color: blue
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 7,
|
||
|
|
geo: 'F1 M0 0 L80,0 80,40 0,40 0 0 x M0,10 L80,10 x M 7,10 7,40 x M 73,10 73,40 z',
|
||
|
|
item: 'couch',
|
||
|
|
color: blue
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 8,
|
||
|
|
geo: 'F1 M0 0 L30 0 30 30 0 30 z',
|
||
|
|
item: 'Side Table',
|
||
|
|
color: wood
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 9,
|
||
|
|
geo: 'F1 M0 0 L80,0 80,90 0,90 0,0 x M0,7 L80,7 x M 0,30 80,30 z',
|
||
|
|
item: 'queen bed',
|
||
|
|
color: green
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 10,
|
||
|
|
geo: 'F1 M5 5 L30,5 35,30 0,30 5,5 x F M0 0 L 35,0 35,5 0,5 0,0 z',
|
||
|
|
item: 'chair',
|
||
|
|
color: wood
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 11,
|
||
|
|
geo: 'F1 M0 0 L50,0 50,90 0,90 0,0 x M0,7 L50,7 x M 0,30 50,30 z',
|
||
|
|
item: 'twin bed',
|
||
|
|
color: green
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 12,
|
||
|
|
geo: 'F1 M0 0 L0 60 80 60 80 0z',
|
||
|
|
item: 'kitchen table',
|
||
|
|
color: wood
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 13,
|
||
|
|
geo: 'F1 M 0,0 a35,35 0 1,0 1,-1 z',
|
||
|
|
item: 'round table',
|
||
|
|
color: wood
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 14,
|
||
|
|
geo: 'F1 M 0,0 L35,0 35,30 0,30 0,0 x M 5,5 L 30, 5 30,25 5,25 5,5 x M 17,2 L 17,10 19,10 19,2 17,2 z',
|
||
|
|
item: 'kitchen sink',
|
||
|
|
color: metal
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 15,
|
||
|
|
geo: 'F1 M0,0 L55,0, 55,50, 0,50 0,0 x M 40,7 a 7,7 0 1 0 0.00001 0z x M 40,10 a 4,4 0 1 0 0.00001 0z x M 38,27 a 7,7 0 1 0 0.00001 0z x ' +
|
||
|
|
'M 38,30 a 4,4 0 1 0 0.00001 0z x M 16,27 a 7,7 0 1 0 0.00001 0z xM 16,30 a 4,4 0 1 0 0.00001 0z x M 14,7 a 7,7 0 1 0 0.00001 0z x ' +
|
||
|
|
'M 14,10 a 4,4 0 1 0 0.00001 0z',
|
||
|
|
item: 'stove',
|
||
|
|
color: metal
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 16,
|
||
|
|
geo: 'F1 M0,0 L55,0, 55,50, 0,50 0,0 x F1 M0,51 L55,51 55,60 0,60 0,51 x F1 M5,60 L10,60 10,63 5,63z',
|
||
|
|
item: 'refrigerator',
|
||
|
|
color: metal
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 17,
|
||
|
|
geo: 'F1 M0,0 100,0 100,40 0,40z',
|
||
|
|
item: 'bookcase',
|
||
|
|
color: wood
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 18,
|
||
|
|
geo: 'F1 M0,0 70,0 70,50 0,50 0,0 x F1 M15,58 55,58 55,62 15,62 x F1 M17,58 16,50 54,50 53,58z',
|
||
|
|
item: 'desk',
|
||
|
|
color: wood
|
||
|
|
}
|
||
|
|
] // end nodeDataArray
|
||
|
|
}) // end model
|
||
|
|
}); // end Palette
|
||
|
|
// the Overview
|
||
|
|
var myOverview = $(go.Overview, 'myOverviewDiv', { observed: myDiagram, maxScale: 0.5 });
|
||
|
|
// change color of viewport border in Overview
|
||
|
|
myOverview.box.elt(0).stroke = 'dodgerblue';
|
||
|
|
// start off with an empty document
|
||
|
|
myDiagram.isModified = false;
|
||
|
|
newDocument();
|
||
|
|
if (!checkLocalStorage()) {
|
||
|
|
var currentFile = document.getElementById('currentFile');
|
||
|
|
if (currentFile) {
|
||
|
|
currentFile.textContent = "Sorry! No web storage support. If you're using Internet Explorer / Microsoft Edge,\n you must load the page from a server for local storage to work.";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// Attach to the window for console manipulation
|
||
|
|
window.myDiagram = myDiagram;
|
||
|
|
} // end init
|
||
|
|
exports.init = init;
|
||
|
|
// enable or disable a particular button
|
||
|
|
function enable(name, ok) {
|
||
|
|
var button = document.getElementById(name);
|
||
|
|
if (button)
|
||
|
|
button.disabled = !ok;
|
||
|
|
}
|
||
|
|
exports.enable = enable;
|
||
|
|
// enable or disable all context-sensitive command buttons
|
||
|
|
function enableAll() {
|
||
|
|
var cmdhnd = myDiagram.commandHandler;
|
||
|
|
enable('Rename', myDiagram.selection.count > 0);
|
||
|
|
enable('Undo', cmdhnd.canUndo());
|
||
|
|
enable('Redo', cmdhnd.canRedo());
|
||
|
|
enable('Cut', cmdhnd.canCutSelection());
|
||
|
|
enable('Copy', cmdhnd.canCopySelection());
|
||
|
|
enable('Paste', cmdhnd.canPasteSelection());
|
||
|
|
enable('Delete', cmdhnd.canDeleteSelection());
|
||
|
|
enable('SelectAll', cmdhnd.canSelectAll());
|
||
|
|
enable('AlignLeft', cmdhnd.canAlignSelection());
|
||
|
|
enable('AlignRight', cmdhnd.canAlignSelection());
|
||
|
|
enable('AlignTop', cmdhnd.canAlignSelection());
|
||
|
|
enable('AlignBottom', cmdhnd.canAlignSelection());
|
||
|
|
enable('AlignCenterX', cmdhnd.canAlignSelection());
|
||
|
|
enable('AlignCenterY', cmdhnd.canAlignSelection());
|
||
|
|
enable('AlignRows', cmdhnd.canAlignSelection());
|
||
|
|
enable('AlignColumns', cmdhnd.canAlignSelection());
|
||
|
|
enable('AlignGrid', cmdhnd.canAlignSelection());
|
||
|
|
enable('Rotate45', cmdhnd.canRotate());
|
||
|
|
enable('Rotate_45', cmdhnd.canRotate());
|
||
|
|
enable('Rotate90', cmdhnd.canRotate());
|
||
|
|
enable('Rotate_90', cmdhnd.canRotate());
|
||
|
|
enable('Rotate180', cmdhnd.canRotate());
|
||
|
|
}
|
||
|
|
exports.enableAll = enableAll;
|
||
|
|
// Commands for this application
|
||
|
|
// changes the item of the object
|
||
|
|
function rename(obj) {
|
||
|
|
if (!obj)
|
||
|
|
obj = myDiagram.selection.first();
|
||
|
|
if (!obj)
|
||
|
|
return;
|
||
|
|
var part = obj.part;
|
||
|
|
if (part === null)
|
||
|
|
return;
|
||
|
|
var data = part.data;
|
||
|
|
if (data === null)
|
||
|
|
return;
|
||
|
|
myDiagram.startTransaction('rename');
|
||
|
|
var newName = prompt('Rename ' + data.item + ' to:', data.item);
|
||
|
|
myDiagram.model.setDataProperty(data, 'item', newName);
|
||
|
|
myDiagram.commitTransaction('rename');
|
||
|
|
}
|
||
|
|
// shows/hides gridlines
|
||
|
|
// to be implemented onclick of a button
|
||
|
|
function updateGridOption() {
|
||
|
|
var grid = document.getElementById('grid');
|
||
|
|
if (!grid)
|
||
|
|
return;
|
||
|
|
myDiagram.startTransaction('grid');
|
||
|
|
myDiagram.grid.visible = (grid.checked === true);
|
||
|
|
myDiagram.commitTransaction('grid');
|
||
|
|
}
|
||
|
|
exports.updateGridOption = updateGridOption;
|
||
|
|
// enables/disables guidelines when dragging
|
||
|
|
function updateGuidelinesOption() {
|
||
|
|
// no transaction needed, because we are modifying a tool for future use
|
||
|
|
var guide = document.getElementById('guidelines');
|
||
|
|
if (!guide)
|
||
|
|
return;
|
||
|
|
if (guide.checked === true) {
|
||
|
|
myDiagram.toolManager.draggingTool.isGuidelineEnabled = true;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
myDiagram.toolManager.draggingTool.isGuidelineEnabled = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
exports.updateGuidelinesOption = updateGuidelinesOption;
|
||
|
|
// enables/disables snapping tools, to be implemented by buttons
|
||
|
|
function updateSnapOption() {
|
||
|
|
// no transaction needed, because we are modifying tools for future use
|
||
|
|
var snap = document.getElementById('snap');
|
||
|
|
if (!snap)
|
||
|
|
return;
|
||
|
|
if (snap.checked === true) {
|
||
|
|
myDiagram.toolManager.draggingTool.isGridSnapEnabled = true;
|
||
|
|
myDiagram.toolManager.resizingTool.isGridSnapEnabled = true;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
myDiagram.toolManager.draggingTool.isGridSnapEnabled = false;
|
||
|
|
myDiagram.toolManager.resizingTool.isGridSnapEnabled = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
exports.updateSnapOption = updateSnapOption;
|
||
|
|
// user specifies the amount of space between nodes when making rows and column
|
||
|
|
function askSpace() {
|
||
|
|
var space = prompt('Desired space between nodes (in pixels):') || '0';
|
||
|
|
return parseFloat(space);
|
||
|
|
}
|
||
|
|
// update arrowkey function
|
||
|
|
function arrowMode() {
|
||
|
|
// no transaction needed, because we are modifying the CommandHandler for future use
|
||
|
|
var move = document.getElementById('move');
|
||
|
|
var select = document.getElementById('select');
|
||
|
|
var scroll = document.getElementById('scroll');
|
||
|
|
if (!move || !select || !scroll)
|
||
|
|
return;
|
||
|
|
if (move.checked === true) {
|
||
|
|
myDiagram.commandHandler.arrowKeyBehavior = 'move';
|
||
|
|
}
|
||
|
|
else if (select.checked === true) {
|
||
|
|
myDiagram.commandHandler.arrowKeyBehavior = 'select';
|
||
|
|
}
|
||
|
|
else if (scroll.checked === true) {
|
||
|
|
myDiagram.commandHandler.arrowKeyBehavior = 'scroll';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
exports.arrowMode = arrowMode;
|
||
|
|
var UnsavedFileName = '(Unsaved File)';
|
||
|
|
function checkLocalStorage() {
|
||
|
|
try {
|
||
|
|
window.localStorage.setItem('item', 'item');
|
||
|
|
window.localStorage.removeItem('item');
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
catch (e) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
exports.checkLocalStorage = checkLocalStorage;
|
||
|
|
function getCurrentFileName() {
|
||
|
|
var currentFile = document.getElementById('currentFile');
|
||
|
|
if (!currentFile)
|
||
|
|
return '';
|
||
|
|
var name = currentFile.textContent || '';
|
||
|
|
if (name && name[name.length - 1] === '*')
|
||
|
|
return name.substr(0, name.length - 1);
|
||
|
|
return name;
|
||
|
|
}
|
||
|
|
exports.getCurrentFileName = getCurrentFileName;
|
||
|
|
function setCurrentFileName(name) {
|
||
|
|
var currentFile = document.getElementById('currentFile');
|
||
|
|
if (!currentFile)
|
||
|
|
return;
|
||
|
|
if (myDiagram.isModified) {
|
||
|
|
name += '*';
|
||
|
|
}
|
||
|
|
currentFile.textContent = name;
|
||
|
|
}
|
||
|
|
exports.setCurrentFileName = setCurrentFileName;
|
||
|
|
function newDocument() {
|
||
|
|
// checks to see if all changes have been saved
|
||
|
|
if (myDiagram.isModified) {
|
||
|
|
var save = confirm('Would you like to save changes to ' + getCurrentFileName() + '?');
|
||
|
|
if (save) {
|
||
|
|
saveDocument();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
setCurrentFileName(UnsavedFileName);
|
||
|
|
// loads an empty diagram
|
||
|
|
myDiagram.model = new go.GraphLinksModel();
|
||
|
|
myDiagram.undoManager.isEnabled = true;
|
||
|
|
myDiagram.addModelChangedListener(function (e) {
|
||
|
|
if (e.isTransactionFinished)
|
||
|
|
enableAll();
|
||
|
|
});
|
||
|
|
myDiagram.isModified = false;
|
||
|
|
}
|
||
|
|
exports.newDocument = newDocument;
|
||
|
|
// saves the current floor plan to local storage
|
||
|
|
function saveDocument() {
|
||
|
|
if (checkLocalStorage()) {
|
||
|
|
var saveName = getCurrentFileName();
|
||
|
|
if (saveName === UnsavedFileName) {
|
||
|
|
saveDocumentAs();
|
||
|
|
}
|
||
|
|
else if (saveName) {
|
||
|
|
saveDiagramProperties();
|
||
|
|
window.localStorage.setItem(saveName, myDiagram.model.toJson());
|
||
|
|
myDiagram.isModified = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
exports.saveDocument = saveDocument;
|
||
|
|
// saves floor plan to local storage with a new name
|
||
|
|
function saveDocumentAs() {
|
||
|
|
if (checkLocalStorage()) {
|
||
|
|
var saveName = prompt('Save file as...', getCurrentFileName());
|
||
|
|
if (saveName && saveName !== UnsavedFileName) {
|
||
|
|
setCurrentFileName(saveName);
|
||
|
|
saveDiagramProperties();
|
||
|
|
window.localStorage.setItem(saveName, myDiagram.model.toJson());
|
||
|
|
myDiagram.isModified = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
exports.saveDocumentAs = saveDocumentAs;
|
||
|
|
// checks to see if all changes have been saved -> shows the open HTML element
|
||
|
|
function openDocument() {
|
||
|
|
if (checkLocalStorage()) {
|
||
|
|
if (myDiagram.isModified) {
|
||
|
|
var save = confirm('Would you like to save changes to ' + getCurrentFileName() + '?');
|
||
|
|
if (save) {
|
||
|
|
saveDocument();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
openElement('openDocument', 'mySavedFiles');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
exports.openDocument = openDocument;
|
||
|
|
// shows the remove HTML element
|
||
|
|
function removeDocument() {
|
||
|
|
if (checkLocalStorage()) {
|
||
|
|
openElement('removeDocument', 'mySavedFiles2');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
exports.removeDocument = removeDocument;
|
||
|
|
// these functions are called when panel buttons are clicked
|
||
|
|
function loadFile() {
|
||
|
|
var listbox = document.getElementById('mySavedFiles');
|
||
|
|
if (!listbox)
|
||
|
|
return;
|
||
|
|
// get selected filename
|
||
|
|
var fileName;
|
||
|
|
for (var i = 0; i < listbox.options.length; i++) {
|
||
|
|
if (listbox.options[i].selected)
|
||
|
|
fileName = listbox.options[i].text; // selected file
|
||
|
|
}
|
||
|
|
if (fileName !== undefined) {
|
||
|
|
// changes the text of "currentFile" to be the same as the floor plan now loaded
|
||
|
|
setCurrentFileName(fileName);
|
||
|
|
// actually load the model from the JSON format string
|
||
|
|
var savedFile = window.localStorage.getItem(fileName);
|
||
|
|
if (!savedFile)
|
||
|
|
return;
|
||
|
|
myDiagram.model = go.Model.fromJson(savedFile);
|
||
|
|
loadDiagramProperties();
|
||
|
|
myDiagram.undoManager.isEnabled = true;
|
||
|
|
myDiagram.addModelChangedListener(function (e) {
|
||
|
|
if (e.isTransactionFinished)
|
||
|
|
enableAll();
|
||
|
|
});
|
||
|
|
myDiagram.isModified = false;
|
||
|
|
// eventually loadDiagramProperties will be called to finish
|
||
|
|
// restoring shared saved model/diagram properties
|
||
|
|
}
|
||
|
|
closeElement('openDocument');
|
||
|
|
}
|
||
|
|
exports.loadFile = loadFile;
|
||
|
|
// Store shared model state in the Model.modelData property
|
||
|
|
// (will be loaded by loadDiagramProperties)
|
||
|
|
function saveDiagramProperties() {
|
||
|
|
myDiagram.model.modelData.position = go.Point.stringify(myDiagram.position);
|
||
|
|
}
|
||
|
|
exports.saveDiagramProperties = saveDiagramProperties;
|
||
|
|
// Called by loadFile.
|
||
|
|
function loadDiagramProperties(e) {
|
||
|
|
// set Diagram.initialPosition, not Diagram.position, to handle initialization side-effects
|
||
|
|
var pos = myDiagram.model.modelData.position;
|
||
|
|
if (pos)
|
||
|
|
myDiagram.initialPosition = go.Point.parse(pos);
|
||
|
|
}
|
||
|
|
exports.loadDiagramProperties = loadDiagramProperties;
|
||
|
|
// deletes the selected file from local storage
|
||
|
|
function removeFile() {
|
||
|
|
var listbox = document.getElementById('mySavedFiles2');
|
||
|
|
if (!listbox)
|
||
|
|
return;
|
||
|
|
// get selected filename
|
||
|
|
var fileName;
|
||
|
|
for (var i = 0; i < listbox.options.length; i++) {
|
||
|
|
if (listbox.options[i].selected)
|
||
|
|
fileName = listbox.options[i].text; // selected file
|
||
|
|
}
|
||
|
|
if (fileName !== undefined) {
|
||
|
|
// removes file from local storage
|
||
|
|
window.localStorage.removeItem(fileName);
|
||
|
|
// the current document remains open, even if its storage was deleted
|
||
|
|
}
|
||
|
|
closeElement('removeDocument');
|
||
|
|
}
|
||
|
|
exports.removeFile = removeFile;
|
||
|
|
function updateFileList(id) {
|
||
|
|
// displays cached floor plan files in the listboxes
|
||
|
|
var listbox = document.getElementById(id);
|
||
|
|
if (!listbox)
|
||
|
|
return;
|
||
|
|
// remove any old listing of files
|
||
|
|
var last;
|
||
|
|
while (last = listbox.lastChild)
|
||
|
|
listbox.removeChild(last);
|
||
|
|
// now add all saved files to the listbox
|
||
|
|
for (var key in window.localStorage) {
|
||
|
|
var storedFile = window.localStorage.getItem(key);
|
||
|
|
if (!storedFile)
|
||
|
|
continue;
|
||
|
|
var option = document.createElement('option');
|
||
|
|
option.value = key;
|
||
|
|
option.text = key;
|
||
|
|
listbox.add(option, null);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
exports.updateFileList = updateFileList;
|
||
|
|
function openElement(id, listid) {
|
||
|
|
var panel = document.getElementById(id);
|
||
|
|
if (panel && panel.style.visibility === 'hidden') {
|
||
|
|
updateFileList(listid);
|
||
|
|
panel.style.visibility = 'visible';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
exports.openElement = openElement;
|
||
|
|
// hides the open/remove elements when the "cancel" button is pressed
|
||
|
|
function closeElement(id) {
|
||
|
|
var panel = document.getElementById(id);
|
||
|
|
if (panel && panel.style.visibility === 'visible') {
|
||
|
|
panel.style.visibility = 'hidden';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
exports.closeElement = closeElement;
|
||
|
|
function undo() { myDiagram.commandHandler.undo(); }
|
||
|
|
exports.undo = undo;
|
||
|
|
function redo() { myDiagram.commandHandler.redo(); }
|
||
|
|
exports.redo = redo;
|
||
|
|
function cutSelection() { myDiagram.commandHandler.cutSelection(); }
|
||
|
|
exports.cutSelection = cutSelection;
|
||
|
|
function copySelection() { myDiagram.commandHandler.copySelection(); }
|
||
|
|
exports.copySelection = copySelection;
|
||
|
|
function pasteSelection() { myDiagram.commandHandler.pasteSelection(); }
|
||
|
|
exports.pasteSelection = pasteSelection;
|
||
|
|
function deleteSelection() { myDiagram.commandHandler.deleteSelection(); }
|
||
|
|
exports.deleteSelection = deleteSelection;
|
||
|
|
function selectAll() { myDiagram.commandHandler.selectAll(); }
|
||
|
|
exports.selectAll = selectAll;
|
||
|
|
function alignLeft() { myDiagram.commandHandler.alignLeft(); }
|
||
|
|
exports.alignLeft = alignLeft;
|
||
|
|
function alignRight() { myDiagram.commandHandler.alignRight(); }
|
||
|
|
exports.alignRight = alignRight;
|
||
|
|
function alignTop() { myDiagram.commandHandler.alignTop(); }
|
||
|
|
exports.alignTop = alignTop;
|
||
|
|
function alignBottom() { myDiagram.commandHandler.alignBottom(); }
|
||
|
|
exports.alignBottom = alignBottom;
|
||
|
|
function alignCemterX() { myDiagram.commandHandler.alignCenterX(); }
|
||
|
|
exports.alignCemterX = alignCemterX;
|
||
|
|
function alignCenterY() { myDiagram.commandHandler.alignCenterY(); }
|
||
|
|
exports.alignCenterY = alignCenterY;
|
||
|
|
function rotate45() { myDiagram.commandHandler.rotate(45); }
|
||
|
|
exports.rotate45 = rotate45;
|
||
|
|
function rotate_45() { myDiagram.commandHandler.rotate(-45); }
|
||
|
|
exports.rotate_45 = rotate_45;
|
||
|
|
function rotate90() { myDiagram.commandHandler.rotate(90); }
|
||
|
|
exports.rotate90 = rotate90;
|
||
|
|
function rotate_90() { myDiagram.commandHandler.rotate(-90); }
|
||
|
|
exports.rotate_90 = rotate_90;
|
||
|
|
function rotate180() { myDiagram.commandHandler.rotate(180); }
|
||
|
|
exports.rotate180 = rotate180;
|
||
|
|
function cancel1() { closeElement('openDocument'); }
|
||
|
|
exports.cancel1 = cancel1;
|
||
|
|
function cancel2() { closeElement('removeDocument'); }
|
||
|
|
exports.cancel2 = cancel2;
|
||
|
|
function alignRows() { myDiagram.commandHandler.alignRow(askSpace()); }
|
||
|
|
exports.alignRows = alignRows;
|
||
|
|
function alignColumns() { myDiagram.commandHandler.alignColumn(askSpace()); }
|
||
|
|
exports.alignColumns = alignColumns;
|
||
|
|
});
|