<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>组织结构图</title> <meta name="description" content="An organization chart editor -- edit details and change relationships." /> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Copyright 1998-2019 by Northwoods Software Corporation. --> <style> .inspector { display: inline-block; font: bold 14px helvetica, sans-serif; background-color: #212121; /* Grey 900 */ color: #F5F5F5; /* Grey 100 */ cursor: default; } .inspector table { border-collapse: separate; border-spacing: 2px; } .inspector td, th { padding: 2px; } .inspector input { background-color: #424242; /* Grey 800 */ color: #F5F5F5; /* Grey 100 */ font: bold 12px helvetica, sans-serif; border: 0px; padding: 2px; } .inspector input:disabled { background-color: #BDBDBD; /* Grey 400 */ color: #616161; /* Grey 700 */ } .inspector select { background-color: #424242; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.13/go-debug.js"></script> <!-- this is only for the GoJS Samples framework --> </head> <body onload="init()"> <div id="sample"> <div id="myDiagramDiv" style="background-color: #34343C; border: solid 1px black; height: 570px;"></div> <p> <button id="zoomToFit">Zoom to Fit</button> <button id="centerRoot">Center on root</button> </p> <div> <div id="myInspector"> </div> </div> <p> This editable organizational chart sample color-codes the Nodes according to the tree level in the hierarchy. </p> <p> Double click on a node in order to add a person or the diagram background to add a new boss. Double clicking the diagram uses the <a>ClickCreatingTool</a> with a custom <a>ClickCreatingTool.insertPart</a> to scroll to the new node and start editing the <a>TextBlock</a> for its name . </p> <p> Drag a node onto another in order to change relationships. You can also draw a link from a node's background to other nodes that have no "boss". Links can also be relinked to change relationships. Right-click or tap-hold a Node to bring up a context menu which allows you to: <ul> <li>Vacate Position - remove the information specfic to the current person in that role</li> <li>Remove Role - removes the role entirely and reparents any children</li> <li>Remove Department - removes the role and the whole subtree</li> </ul> Deleting a Node or Link will orphan the child Nodes and generate a new tree. A custom SelectionDeleting <a>DiagramEvent</a> listener will clear out the boss info when the parent is removed. </p> <p> Select a node to edit/update node data values. This sample uses the <a href="../extensions/dataInspector.html">Data Inspector</a> extension to display and modify Part data. </p> <p> To learn how to build an org chart from scratch with GoJS, see the <a href="../learn/index.html">Getting Started tutorial</a>. </p> <p> If you want to have some "assistant" nodes on the side, above the regular reports, see the <a href="orgChartAssistants.html">Org Chart Assistants</a> sample, which is a copy of this sample that uses a custom <a>TreeLayout</a> to position "assistants" that way. </p> <div> <div> <button id="SaveButton" onclick="save()">Save</button> <button onclick="load()">Load</button> Diagram Model saved in JSON format: </div> <textarea id="mySavedModel" style="100%; height:270px;"> { "class": "go.TreeModel", "nodeDataArray": [ {"key":1, "name":"中心主题"} ] } </textarea> </div> </div> </body> <script id="code"> function init() { if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this var $ = go.GraphObject.make; //GraphObject是所有图形基类，这里简洁定义模板，$太敏感，为避免与jQuery冲突，此处使用ds //图表由节点、文字、线、箭头组成。 myDiagram = $(go.Diagram, "myDiagramDiv", // must be the ID or reference to div { "initialContentAlignment": go.Spot.Center, // 将图表在画布中居中显示 maxSelectionCount: 1, // 一次允许选择一个部件, //"isReadOnly": true, // 只读 "allowZoom": true, //画布缩放 //"InitialLayoutCompleted":loadDiagramProperties这是函数名, //一个DiagramEvent侦听器 //鼠标滚轮事件放大和缩小，而不是向上和向下滚动 "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, "undoManager.isEnabled": true, // 操作支持Ctrl-Z撤销、Ctrl-Y重做 validCycle: go.Diagram.CycleDestinationTree, // make sure users can only create trees //"clickCreatingTool.archetypeNodeData": { // 默认单根节点，这段代码允许多根节点，双击背景创建新的根节点 // name: "(自由节点)" //}, "clickCreatingTool.insertPart": function (loc) { // scroll to the new node var node = go.ClickCreatingTool.prototype.insertPart.call(this, loc); if (node !== null) { this.diagram.select(node); this.diagram.commandHandler.scrollToPart(node); this.diagram.commandHandler.editTextBlock(node.findObject("NAMETB")); } return node; }, layout: $(go.TreeLayout, { treeStyle: go.TreeLayout.StyleLastParents, arrangement: go.TreeLayout.ArrangementHorizontal, // properties for most of the tree: angle: 90, layerSpacing: 35, // properties for the "last parents": alternateAngle: 90, alternateLayerSpacing: 35, alternateAlignment: go.TreeLayout.AlignmentBus, alternateNodeSpacing: 20 }) }); // 当文档被修改时，在标题中添加“*”并启用“Save”按钮 myDiagram.addDiagramListener("Modified", function (e) { var button = document.getElementById("SaveButton"); if (button) button.disabled = !myDiagram.isModified; var idx = document.title.indexOf("*"); if (myDiagram.isModified) { if (idx < 0) document.title += "*"; } else { if (idx >= 0) document.title = document.title.substr(0, idx); } }); // manage boss info manually when a node or link is deleted from the diagram myDiagram.addDiagramListener("SelectionDeleting", function (e) { var part = e.subject.first(); // e.subject is the myDiagram.selection collection, // so we'll get the first since we know we only have one selection myDiagram.startTransaction("clear boss"); if (part instanceof go.Node) { var it = part.findTreeChildrenNodes(); // find all child nodes while (it.next()) { // now iterate through them and clear out the boss information var child = it.value; var bossText = child.findObject("boss"); // since the boss TextBlock is named, we can access it by name if (bossText === null) return; bossText.text = ""; } } else if (part instanceof go.Link) { var child = part.toNode; var bossText = child.findObject("boss"); // since the boss TextBlock is named, we can access it by name if (bossText === null) return; bossText.text = ""; } myDiagram.commitTransaction("clear boss"); }); var levelColors = ["#AC193D", "#2672EC", "#8C0095", "#5133AB", "#008299", "#D24726", "#008A00", "#094AB2"]; // override TreeLayout.commitNodes to also modify the background brush based on the tree depth level myDiagram.layout.commitNodes = function () { go.TreeLayout.prototype.commitNodes.call(myDiagram.layout); // do the standard behavior // then go through all of the vertexes and set their corresponding node's Shape.fill // to a brush dependent on the TreeVertex.level value myDiagram.layout.network.vertexes.each(function (v) { if (v.node) { var level = v.level % (levelColors.length); var color = levelColors[level]; var shape = v.node.findObject("SHAPE"); if (shape) shape.stroke = $(go.Brush, "Linear", { 0: color, 1: go.Brush.lightenBy(color, 0.05), start: go.Spot.Left, end: go.Spot.Right }); } }); }; // when a node is double-clicked, add a child to it function createNode(e, obj) { //拿到节点的对象，后面要拿什么值就直接拿 var clicked = obj.part; if (clicked !== null) { var thisemp = clicked.data; myDiagram.startTransaction("createNode"); var newemp = { name: "(新节点)", parent: thisemp.key }; //console.log(thisemp.key); console.log(myDiagram.model.toJson()); myDiagram.model.addNodeData(newemp); myDiagram.commitTransaction("createNode"); } } // this is used to determine feedback during drags function mayWorkFor(node1, node2) { if (!(node1 instanceof go.Node)) return false; // must be a Node if (node1 === node2) return false; // cannot work for yourself if (node2.isInTreeOf(node1)) return false; // cannot work for someone who works for you return true; } // 为大多数文本块提供通用样式 // Some of these values may be overridden in a particular TextBlock.某些值可能在特定的文本块中被覆盖 function textStyle() { //strokez颜色，添加textAlign: "center"好像效果可能是被覆盖了 return { font: "9pt Segoe UI,sans-serif", stroke: "white" }; } // This converter is used by the Picture. function findHeadShot(key) { if (key < 0 || key > 16) return "images/HSnopic.jpg"; // There are only 16 images on the server return "images/HS" + key + ".jpg" } // define the Node template 定义节点模板 描述如何构建每个节点 myDiagram.nodeTemplate = $(go.Node, "Auto",//形状自动填充适合 与css设置auto同样效果 //{ doubleClick: createNode }, { // handle dragging a Node onto a Node to (maybe) change the reporting relationship mouseDragEnter: function (e, node, prev) { var diagram = node.diagram; var selnode = diagram.selection.first(); if (!mayWorkFor(selnode, node)) return; var shape = node.findObject("SHAPE"); if (shape) { shape._prevFill = shape.fill; // remember the original brush shape.fill = "darkred"; } }, mouseDragLeave: function (e, node, next) { var shape = node.findObject("SHAPE"); if (shape && shape._prevFill) { shape.fill = shape._prevFill; // restore the original brush } }, mouseDrop: function (e, node) { var diagram = node.diagram; var selnode = diagram.selection.first(); // assume just one Node in selection if (mayWorkFor(selnode, node)) { // find any existing link into the selected node var link = selnode.findTreeParentLink(); if (link !== null) { // 重新连接所有已有连接 link.fromNode = node; } else { // 新建连接 diagram.toolManager.linkingTool.insertLink(node, node.port, selnode, selnode.port); } } } }, // for sorting, have the Node.text be the data.name new go.Binding("text", "name"), // bind the Part.layerName to control the Node's layer depending on whether it isSelected new go.Binding("layerName", "isSelected", function (sel) { return sel ? "Foreground" : ""; }).ofObject(), //设置节点形状：长方形 $(go.Shape, "Rectangle", { name: "SHAPE", fill: "#333333", stroke: 'white', strokeWidth: 3.5, // set the port properties: 是否可连接fromLinkable、toLinkable portId: "", fromLinkable: false, toLinkable: false, cursor: "pointer" }), // Panel 有不同的类型，每个类型表示一种布局，通过不同的坐标系统排列 $(go.Panel, "Horizontal", // 定义文本显示框 $(go.Panel, "Table", { minSize: new go.Size(130, NaN), maxSize: new go.Size(150, NaN), margin: new go.Margin(30),//设置文本和边框距离 defaultAlignment: go.Spot.Center }, $(go.RowColumnDefinition, { column: 2, 4 }), // 设置文本节点 $(go.TextBlock, textStyle(), // the name { row: 0, column: 0, columnSpan: 5, font: "12pt Segoe UI,sans-serif", editable: true, isMultiline: false,// editable文本是否可编辑 minSize: new go.Size(10, 16) }, //将节点数据nodeDataArray.name与text建立联系 new go.Binding("text", "name").makeTwoWay()) ) // end Table Panel ) // end Horizontal Panel ); // end Node // 选中的节点显示用于添加子节点的按钮 myDiagram.nodeTemplate.selectionAdornmentTemplate = $(go.Adornment, "Spot", $(go.Panel, "Auto", $(go.Placeholder, { margin: new go.Margin(4, -20, 50, 4) }) ), // 所选节点的删除按钮 $("Button", { alignment: go.Spot.Right, alignmentFocus: go.Spot.Left, click: function (e, obj) { var node = obj.part.adornedPart; //console.log(node.data.key); if (node !== null) { myDiagram.startTransaction("remove dept"); // 删除单个节点myDiagram.model.removeNodeData(node.data)只要能拿到node.data对象就能删除了; //删除整个子树，包括节点本身 myDiagram.removeParts(node.findTreeParts()); myDiagram.commitTransaction("remove dept"); } } // 定义装饰中此按钮的单击行为 }, $(go.TextBlock, "-", // 按钮的内容 { font: "bold 8pt sans-serif" }) ), // 所选节点的新增按钮 $("Button", { alignment: go.Spot.Right, alignmentFocus: go.Spot.Right, click: createNode }, $(go.TextBlock, "+", // 按钮的内容 { font: "bold 8pt sans-serif" }) ) ); //监听键盘事件 myDiagram.commandHandler.doKeyDown = function () { var e = myDiagram.lastInput; var control = e.control || e.meta; var key = e.key; console.log('key' + key);//Tab和Enter键好像这里取到的名字是空 if (control && (key === 'Z' || key === 'Y')) { console.log('Ctrl+Z/Y'); }; // 取消Del/Backspace删除键的命令关联: //if (key === 'Del' || key === 'Backspace') return; go.CommandHandler.prototype.doKeyDown.call(this); }; // 设置线条和箭头,是否允许拖动连接relinkableFrom,relinkableTo myDiagram.linkTemplate = $(go.Link, go.Link.Orthogonal, { corner: 5, relinkableFrom: false, relinkableTo: false }, $(go.Shape, { strokeWidth: 1.5, stroke: "#F5F5F5" })); // the link shape // 拖拽框选功能 myDiagram.toolManager.dragSelectingTool.box = $(go.Part, { layerName: "Tool", selectable: true }, $(go.Shape, { name: "SHAPE", fill: null, stroke: "chartreuse", strokeWidth: 3 })); // read in the JSON-format data from the "mySavedModel" element load(); // support editing the properties of the selected person in HTML if (window.Inspector) myInspector = new Inspector("myInspector", myDiagram, { properties: { "key": { readOnly: true }, "comments": {} } }); // Setup zoom to fit button document.getElementById('zoomToFit').addEventListener('click', function () { myDiagram.commandHandler.zoomToFit(); }); document.getElementById('centerRoot').addEventListener('click', function () { myDiagram.scale = 1; myDiagram.commandHandler.scrollToPart(myDiagram.findNodeForKey(1)); }); } // end init // Show the diagram's model in JSON format function save() { document.getElementById("mySavedModel").value = myDiagram.model.toJson(); myDiagram.isModified = false; } function load() { // model中的数据每一个js对象都代表着一个相应的模型图中的元素 myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value); // make sure new data keys are unique positive integers var lastkey = 1; myDiagram.model.makeUniqueKeyFunction = function (model, data) { var k = data.key || lastkey; while (model.findNodeDataForKey(k)) k++; data.key = lastkey = k; return k; }; } "use strict";//严格模式，在开发中使用严格模式能帮助我们早发现错误 function Inspector(divid, diagram, options) { var mainDiv = document.getElementById(divid); mainDiv.className = "inspector"; mainDiv.innerHTML = ""; this._div = mainDiv; this._diagram = diagram; this._inspectedProperties = {}; this._multipleProperties = {}; // Either a GoJS Part or a simple data object, such as Model.modelData this.inspectedObject = null; // Inspector options defaults: this.includesOwnProperties = true; this.declaredProperties = {}; this.inspectsSelection = true; this.propertyModified = null; this.multipleSelection = false; this.showAllProperties = false; this.showSize = 0; if (options !== undefined) { if (options["includesOwnProperties"] !== undefined) this.includesOwnProperties = options["includesOwnProperties"]; if (options["properties"] !== undefined) this.declaredProperties = options["properties"]; if (options["inspectSelection"] !== undefined) this.inspectsSelection = options["inspectSelection"]; if (options["propertyModified"] !== undefined) this.propertyModified = options["propertyModified"]; if (options['multipleSelection'] !== undefined) this.multipleSelection = options['multipleSelection']; if (options['showAllProperties'] !== undefined) this.showAllProperties = options['showAllProperties']; if (options['showSize'] !== undefined) this.showSize = options['showSize']; } var self = this; diagram.addModelChangedListener(function (e) { if (e.isTransactionFinished) self.inspectObject(); }); if (this.inspectsSelection) { diagram.addDiagramListener("ChangedSelection", function (e) { self.inspectObject(); }); } } // Some static predicates to use with the "show" property. Inspector.showIfNode = function (part) { return part instanceof go.Node }; Inspector.showIfLink = function (part) { return part instanceof go.Link }; Inspector.showIfGroup = function (part) { return part instanceof go.Group }; // Only show the property if its present. Useful for "key" which will be shown on Nodes and Groups, but normally not on Links Inspector.showIfPresent = function (data, propname) { if (data instanceof go.Part) data = data.data; return typeof data === "object" && data[propname] !== undefined; }; /** * Update the HTML state of this Inspector given the properties of the {@link #inspectedObject}. * @param {Object} object is an optional argument, used when {@link #inspectSelection} is false to * set {@link #inspectedObject} and show and edit that object's properties. */ Inspector.prototype.inspectObject = function (object) { var inspectedObject = null; var inspectedObjects = null; if (object === null) return; if (object === undefined) { if (this.inspectsSelection) { if (this.multipleSelection) { // gets the selection if multiple selection is true inspectedObjects = this._diagram.selection; } else { // otherwise grab the first object inspectedObject = this._diagram.selection.first(); } } else { // if there is a single inspected object inspectedObject = this.inspectedObject; } } else { // if object was passed in as a parameter inspectedObject = object; } if (inspectedObjects && inspectedObjects.count === 1) { inspectedObject = inspectedObjects.first(); } if (inspectedObjects && inspectedObjects.count <= 1) { inspectedObjects = null; } // single object or no objects if (!inspectedObjects || !this.multipleSelection) { if (inspectedObject === null) { this.inspectedObject = inspectedObject; this.updateAllHTML(); return; } this.inspectedObject = inspectedObject; if (this.inspectObject === null) return; var mainDiv = this._div; mainDiv.innerHTML = ''; // use either the Part.data or the object itself (for model.modelData) var data = (inspectedObject instanceof go.Part) ? inspectedObject.data : inspectedObject; if (!data) return; // Build table: var table = document.createElement('table'); var tbody = document.createElement('tbody'); this._inspectedProperties = {}; this.tabIndex = 0; var declaredProperties = this.declaredProperties; // Go through all the properties passed in to the inspector and show them, if appropriate: for (var name in declaredProperties) { var desc = declaredProperties[name]; if (!this.canShowProperty(name, desc, inspectedObject)) continue; var val = this.findValue(name, desc, data); tbody.appendChild(this.buildPropertyRow(name, val)); } // Go through all the properties on the model data and show them, if appropriate: if (this.includesOwnProperties) { for (var k in data) { if (k === '__gohashid') continue; // skip internal GoJS hash property if (this._inspectedProperties[k]) continue; // already exists if (declaredProperties[k] && !this.canShowProperty(k, declaredProperties[k], inspectedObject)) continue; tbody.appendChild(this.buildPropertyRow(k, data[k])); } } table.appendChild(tbody); mainDiv.appendChild(table); } else { // multiple objects selected var mainDiv = this._div; mainDiv.innerHTML = ''; var shared = new go.Map(); // for properties that the nodes have in common var properties = new go.Map(); // for adding properties var all = new go.Map(); // used later to prevent changing properties when unneeded var it = inspectedObjects.iterator; // Build table: var table = document.createElement('table'); var tbody = document.createElement('tbody'); this._inspectedProperties = {}; this.tabIndex = 0; var declaredProperties = this.declaredProperties; it.next(); inspectedObject = it.value; this.inspectedObject = inspectedObject; var data = (inspectedObject instanceof go.Part) ? inspectedObject.data : inspectedObject; if (data) { // initial pass to set shared and all // Go through all the properties passed in to the inspector and add them to the map, if appropriate: for (var name in declaredProperties) { var desc = declaredProperties[name]; if (!this.canShowProperty(name, desc, inspectedObject)) continue; var val = this.findValue(name, desc, data); if (val === '' && desc && desc.type === 'checkbox') { shared.add(name, false); all.add(name, false); } else { shared.add(name, val); all.add(name, val); } } // Go through all the properties on the model data and add them to the map, if appropriate: if (this.includesOwnProperties) { for (var k in data) { if (k === '__gohashid') continue; // skip internal GoJS hash property if (this._inspectedProperties[k]) continue; // already exists if (declaredProperties[k] && !this.canShowProperty(k, declaredProperties[k], inspectedObject)) continue; shared.add(k, data[k]); all.add(k, data[k]); } } } var nodecount = 2; while (it.next() && (this.showSize < 1 || nodecount <= this.showSize)) { // grabs all the properties from the other selected objects properties.clear(); inspectedObject = it.value; if (inspectedObject) { // use either the Part.data or the object itself (for model.modelData) data = (inspectedObject instanceof go.Part) ? inspectedObject.data : inspectedObject; if (data) { // Go through all the properties passed in to the inspector and add them to properties to add, if appropriate: for (var name in declaredProperties) { var desc = declaredProperties[name]; if (!this.canShowProperty(name, desc, inspectedObject)) continue; var val = this.findValue(name, desc, data); if (val === '' && desc && desc.type === 'checkbox') { properties.add(name, false); } else { properties.add(name, val); } } // Go through all the properties on the model data and add them to properties to add, if appropriate: if (this.includesOwnProperties) { for (var k in data) { if (k === '__gohashid') continue; // skip internal GoJS hash property if (this._inspectedProperties[k]) continue; // already exists if (declaredProperties[k] && !this.canShowProperty(k, declaredProperties[k], inspectedObject)) continue; properties.add(k, data[k]); } } } } if (!this.showAllProperties) { // Cleans up shared map with properties that aren't shared between the selected objects // Also adds properties to the add and shared maps if applicable var addIt = shared.iterator; var toRemove = []; while (addIt.next()) { if (properties.has(addIt.key)) { var newVal = all.get(addIt.key) + '|' + properties.get(addIt.key); all.set(addIt.key, newVal); if ((declaredProperties[addIt.key] && declaredProperties[addIt.key].type !== 'color' && declaredProperties[addIt.key].type !== 'checkbox' && declaredProperties[addIt.key].type !== 'select') || !declaredProperties[addIt.key]) { // for non-string properties i.e color newVal = shared.get(addIt.key) + '|' + properties.get(addIt.key); shared.set(addIt.key, newVal); } } else { // toRemove array since addIt is still iterating toRemove.push(addIt.key); } } for (var i = 0; i < toRemove.length; i++) { // removes anything that doesn't showAllPropertiess shared.remove(toRemove[i]); all.remove(toRemove[i]); } } else { // Adds missing properties to all with the correct amount of seperators var addIt = properties.iterator; while (addIt.next()) { if (all.has(addIt.key)) { if ((declaredProperties[addIt.key] && declaredProperties[addIt.key].type !== 'color' && declaredProperties[addIt.key].type !== 'checkbox' && declaredProperties[addIt.key].type !== 'select') || !declaredProperties[addIt.key]) { // for non-string properties i.e color var newVal = all.get(addIt.key) + '|' + properties.get(addIt.key); all.set(addIt.key, newVal); } } else { var newVal = ''; for (var i = 0; i < nodecount - 1; i++) newVal += '|'; newVal += properties.get(addIt.key); all.set(addIt.key, newVal); } } // Adds bars in case properties is not in all addIt = all.iterator; while (addIt.next()) { if (!properties.has(addIt.key)) { if ((declaredProperties[addIt.key] && declaredProperties[addIt.key].type !== 'color' && declaredProperties[addIt.key].type !== 'checkbox' && declaredProperties[addIt.key].type !== 'select') || !declaredProperties[addIt.key]) { // for non-string properties i.e color var newVal = all.get(addIt.key) + '|'; all.set(addIt.key, newVal); } } } } nodecount++; } // builds the table property rows and sets multipleProperties to help with updateall var mapIt; if (!this.showAllProperties) mapIt = shared.iterator; else mapIt = all.iterator; while (mapIt.next()) { tbody.appendChild(this.buildPropertyRow(mapIt.key, mapIt.value)); // shows the properties that are allowed } table.appendChild(tbody); mainDiv.appendChild(table); var allIt = all.iterator; while (allIt.next()) { this._multipleProperties[allIt.key] = allIt.value; // used for updateall to know which properties to change } } }; /** * @ignore * This predicate should be false if the given property should not be shown. * Normally it only checks the value of "show" on the property descriptor. * The default value is true. * @param {string} propertyName the property name * @param {Object} propertyDesc the property descriptor * @param {Object} inspectedObject the data object * @return {boolean} whether a particular property should be shown in this Inspector */ Inspector.prototype.canShowProperty = function (propertyName, propertyDesc, inspectedObject) { if (propertyDesc.show === false) return false; // if "show" is a predicate, make sure it passes or do not show this property if (typeof propertyDesc.show === "function") return propertyDesc.show(inspectedObject, propertyName); return true; } /** * @ignore * This predicate should be false if the given property should not be editable by the user. * Normally it only checks the value of "readOnly" on the property descriptor. * The default value is true. * @param {string} propertyName the property name * @param {Object} propertyDesc the property descriptor * @param {Object} inspectedObject the data object * @return {boolean} whether a particular property should be shown in this Inspector */ Inspector.prototype.canEditProperty = function (propertyName, propertyDesc, inspectedObject) { if (this._diagram.isReadOnly || this._diagram.isModelReadOnly) return false; // assume property values that are functions of Objects cannot be edited var data = (inspectedObject instanceof go.Part) ? inspectedObject.data : inspectedObject; var valtype = typeof data[propertyName]; if (valtype === "function") return false; if (propertyDesc) { if (propertyDesc.readOnly === true) return false; // if "readOnly" is a predicate, make sure it passes or do not show this property if (typeof propertyDesc.readOnly === "function") return !propertyDesc.readOnly(inspectedObject, propertyName); } return true; } /** * @ignore * @param {any} propName * @param {any} propDesc * @param {any} data * @return {any} */ Inspector.prototype.findValue = function (propName, propDesc, data) { var val = ''; if (propDesc && propDesc.defaultValue !== undefined) val = propDesc.defaultValue; if (data[propName] !== undefined) val = data[propName]; if (val === undefined) return ''; return val; } /** * @ignore * This sets this._inspectedProperties[propertyName] and creates the HTML table row: * <tr> * <td>propertyName</td> * <td><input value=propertyValue /></td> * </tr> * @param {string} propertyName the property name * @param {*} propertyValue the property value * @return the table row */ Inspector.prototype.buildPropertyRow = function (propertyName, propertyValue) { var mainDiv = this._div; var tr = document.createElement("tr"); var td1 = document.createElement("td"); td1.textContent = propertyName; tr.appendChild(td1); var td2 = document.createElement("td"); var decProp = this.declaredProperties[propertyName]; var input = null; var self = this; function updateall() { self.updateAllProperties(); } if (decProp && decProp.type === "select") { input = document.createElement("select"); this.updateSelect(decProp, input, propertyName, propertyValue); input.addEventListener("change", updateall); } else { input = document.createElement("input"); input.value = this.convertToString(propertyValue); if (decProp) { var t = decProp.type; if (t !== 'string' && t !== 'number' && t !== 'boolean' && t !== 'arrayofnumber' && t !== 'point' && t !== 'size' && t !== 'rect' && t !== 'spot' && t !== 'margin') { input.setAttribute("type", decProp.type); } if (decProp.type === "color") { if (input.type === "color") { input.value = this.convertToColor(propertyValue); // input.addEventListener("input", updateall); input.addEventListener("change", updateall); } } if (decProp.type === "checkbox") { input.checked = !!propertyValue; input.addEventListener("change", updateall); } } if (input.type !== "color") input.addEventListener("blur", updateall); } if (input) { input.tabIndex = this.tabIndex++; input.disabled = !this.canEditProperty(propertyName, decProp, this.inspectedObject); td2.appendChild(input); } tr.appendChild(td2); this._inspectedProperties[propertyName] = input; return tr; }; /** * @ignore * HTML5 color input will only take hex, * so var HTML5 canvas convert the color into hex format. * This converts "rgb(255, 0, 0)" into "#FF0000", etc. * @param {string} propertyValue * @return {string} */ Inspector.prototype.convertToColor = function (propertyValue) { var ctx = document.createElement("canvas").getContext("2d"); ctx.fillStyle = propertyValue; return ctx.fillStyle; }; /** * @ignore * @param {string} * @return {Array.<number>} */ Inspector.prototype.convertToArrayOfNumber = function (propertyValue) { if (propertyValue === "null") return null; var split = propertyValue.split(' '); var arr = []; for (var i = 0; i < split.length; i++) { var str = split[i]; if (!str) continue; arr.push(parseFloat(str)); } return arr; }; /** * @ignore * @param {*} * @return {string} */ Inspector.prototype.convertToString = function (x) { if (x === undefined) return "undefined"; if (x === null) return "null"; if (x instanceof go.Point) return go.Point.stringify(x); if (x instanceof go.Size) return go.Size.stringify(x); if (x instanceof go.Rect) return go.Rect.stringify(x); if (x instanceof go.Spot) return go.Spot.stringify(x); if (x instanceof go.Margin) return go.Margin.stringify(x); if (x instanceof go.List) return this.convertToString(x.toArray()); if (Array.isArray(x)) { var str = ""; for (var i = 0; i < x.length; i++) { if (i > 0) str += " "; var v = x[i]; str += this.convertToString(v); } return str; } return x.toString(); }; /** * @ignore * Update all of the HTML in this Inspector. */ Inspector.prototype.updateAllHTML = function () { var inspectedProps = this._inspectedProperties; var diagram = this._diagram; var isPart = this.inspectedObject instanceof go.Part; var data = isPart ? this.inspectedObject.data : this.inspectedObject; if (!data) { // clear out all of the fields for (var name in inspectedProps) { var input = inspectedProps[name]; if (input instanceof HTMLSelectElement) { input.innerHTML = ""; } else if (input.type === "color") { input.value = "#000000"; } else if (input.type === "checkbox") { input.checked = false; } else { input.value = ""; } } } else { for (var name in inspectedProps) { var input = inspectedProps[name]; var propertyValue = data[name]; if (input instanceof HTMLSelectElement) { var decProp = this.declaredProperties[name]; this.updateSelect(decProp, input, name, propertyValue); } else if (input.type === "color") { input.value = this.convertToColor(propertyValue); } else if (input.type === "checkbox") { input.checked = !!propertyValue; } else { input.value = this.convertToString(propertyValue); } } } } /** * @ignore * Update an HTMLSelectElement with an appropriate list of choices, given the propertyName */ Inspector.prototype.updateSelect = function (decProp, select, propertyName, propertyValue) { select.innerHTML = ""; // clear out anything that was there var choices = decProp.choices; if (typeof choices === "function") choices = choices(this.inspectedObject, propertyName); if (!Array.isArray(choices)) choices = []; decProp.choicesArray = choices; // remember list of actual choice values (not strings) for (var i = 0; i < choices.length; i++) { var choice = choices[i]; var opt = document.createElement("option"); opt.text = this.convertToString(choice); select.add(opt, null); } select.value = this.convertToString(propertyValue); } /** * @ignore * Update all of the data properties of {@link #inspectedObject} according to the * current values held in the HTML input elements. */ Inspector.prototype.updateAllProperties = function () { var inspectedProps = this._inspectedProperties; var diagram = this._diagram; if (diagram.selection.count === 1 || !this.multipleSelection) { // single object update var isPart = this.inspectedObject instanceof go.Part; var data = isPart ? this.inspectedObject.data : this.inspectedObject; if (!data) return; // must not try to update data when there's no data! diagram.startTransaction('set all properties'); for (var name in inspectedProps) { var input = inspectedProps[name]; var value = input.value; // don't update "readOnly" data properties var decProp = this.declaredProperties[name]; if (!this.canEditProperty(name, decProp, this.inspectedObject)) continue; // If it's a boolean, or if its previous value was boolean, // parse the value to be a boolean and then update the input.value to match var type = ''; if (decProp !== undefined && decProp.type !== undefined) { type = decProp.type; } if (type === '') { var oldval = data[name]; if (typeof oldval === 'boolean') type = 'boolean'; // infer boolean else if (typeof oldval === 'number') type = 'number'; else if (oldval instanceof go.Point) type = 'point'; else if (oldval instanceof go.Size) type = 'size'; else if (oldval instanceof go.Rect) type = 'rect'; else if (oldval instanceof go.Spot) type = 'spot'; else if (oldval instanceof go.Margin) type = 'margin'; } // convert to specific type, if needed switch (type) { case 'boolean': value = !(value === false || value === 'false' || value === '0'); break; case 'number': value = parseFloat(value); break; case 'arrayofnumber': value = this.convertToArrayOfNumber(value); break; case 'point': value = go.Point.parse(value); break; case 'size': value = go.Size.parse(value); break; case 'rect': value = go.Rect.parse(value); break; case 'spot': value = go.Spot.parse(value); break; case 'margin': value = go.Margin.parse(value); break; case 'checkbox': value = input.checked; break; case 'select': value = decProp.choicesArray[input.selectedIndex]; break; } // in case parsed to be different, such as in the case of boolean values, // the value shown should match the actual value input.value = value; // modify the data object in an undo-able fashion diagram.model.setDataProperty(data, name, value); // notify any listener if (this.propertyModified !== null) this.propertyModified(name, value, this); } diagram.commitTransaction('set all properties'); } else { // selection object update diagram.startTransaction('set all properties'); for (var name in inspectedProps) { var input = inspectedProps[name]; var value = input.value; var arr1 = value.split('|'); var arr2 = []; if (this._multipleProperties[name]) { // don't split if it is union and its checkbox type if (this.declaredProperties[name] && this.declaredProperties[name].type === 'checkbox' && this.showAllProperties) { arr2.push(this._multipleProperties[name]); } else { arr2 = this._multipleProperties[name].toString().split('|'); } } var it = diagram.selection.iterator; var change = false; if (this.declaredProperties[name] && this.declaredProperties[name].type === 'checkbox') change = true; // always change checkbox if (arr1.length < arr2.length // i.e Alpha|Beta -> Alpha procs the change && (!this.declaredProperties[name] // from and to links || !(this.declaredProperties[name] // do not change color checkbox and choices due to them always having less && (this.declaredProperties[name].type === 'color' || this.declaredProperties[name].type === 'checkbox' || this.declaredProperties[name].type === 'choices')))) { change = true; } else { // standard detection in change in properties for (var j = 0; j < arr1.length && j < arr2.length; j++) { if (!(arr1[j] === arr2[j]) && !(this.declaredProperties[name] && this.declaredProperties[name].type === 'color' && arr1[j].toLowerCase() === arr2[j].toLowerCase())) { change = true; } } } if (change) { // only change properties it needs to change instead all of them for (var i = 0; i < diagram.selection.count; i++) { it.next(); var isPart = it.value instanceof go.Part; var data = isPart ? it.value.data : it.value; if (data) { // ignores the selected node if there is no data if (i < arr1.length) value = arr1[i]; else value = arr1[0]; // don't update "readOnly" data properties var decProp = this.declaredProperties[name]; if (!this.canEditProperty(name, decProp, it.value)) continue; // If it's a boolean, or if its previous value was boolean, // parse the value to be a boolean and then update the input.value to match var type = ''; if (decProp !== undefined && decProp.type !== undefined) { type = decProp.type; } if (type === '') { var oldval = data[name]; if (typeof oldval === 'boolean') type = 'boolean'; // infer boolean else if (typeof oldval === 'number') type = 'number'; else if (oldval instanceof go.Point) type = 'point'; else if (oldval instanceof go.Size) type = 'size'; else if (oldval instanceof go.Rect) type = 'rect'; else if (oldval instanceof go.Spot) type = 'spot'; else if (oldval instanceof go.Margin) type = 'margin'; } // convert to specific type, if needed switch (type) { case 'boolean': value = !(value === false || value === 'false' || value === '0'); break; case 'number': value = parseFloat(value); break; case 'arrayofnumber': value = this.convertToArrayOfNumber(value); break; case 'point': value = go.Point.parse(value); break; case 'size': value = go.Size.parse(value); break; case 'rect': value = go.Rect.parse(value); break; case 'spot': value = go.Spot.parse(value); break; case 'margin': value = go.Margin.parse(value); break; case 'checkbox': value = input.checked; break; case 'select': value = decProp.choicesArray[input.selectedIndex]; break; } // in case parsed to be different, such as in the case of boolean values, // the value shown should match the actual value input.value = value; // modify the data object in an undo-able fashion diagram.model.setDataProperty(data, name, value); // notify any listener if (this.propertyModified !== null) this.propertyModified(name, value, this); } } } } diagram.commitTransaction('set all properties'); } }; </script> </html>