diff --git a/js/Container.js b/js/Container.js index 495bd882..6fc9f368 100644 --- a/js/Container.js +++ b/js/Container.js @@ -213,7 +213,7 @@ WireIt.Container.prototype = { this.el.appendChild(this.ddResizeHandle); } - if(this.options.groupable) { + if(this.options.groupable && this.options.ddHandle) { this.groupButton = WireIt.cn('div', {className: 'WireIt-Container-groupbutton'} ); this.ddHandle.appendChild(this.groupButton) Event.addListener(this.groupButton, "click", this.onGroupButton, this, true); @@ -222,7 +222,10 @@ WireIt.Container.prototype = { if(this.options.close) { // Close button this.closeButton = WireIt.cn('div', {className: this.options.closeButtonClassName} ); - this.ddHandle.appendChild(this.closeButton); + if (this.options.ddHandle) + this.ddHandle.appendChild(this.closeButton); + else + this.el.appendChild(this.closeButton); Event.addListener(this.closeButton, "click", this.onCloseButton, this, true); } diff --git a/js/GroupFormContainer.js b/js/GroupFormContainer.js index 3e46a400..c265f26c 100644 --- a/js/GroupFormContainer.js +++ b/js/GroupFormContainer.js @@ -56,12 +56,17 @@ YAHOO.lang.extend(WireIt.GroupFormContainer, WireIt.FormContainer, { var offset = this.layer.containers.length; + var thisConfig = this.getConfig(); + var position = [thisConfig.position[0], thisConfig.position[1]]; + for (var mI in this.group.modules) { var m = this.group.modules[mI] - var baseContainerConfig = this.getBaseConfig(m.name) - YAHOO.lang.augmentObject(m.config, baseContainerConfig); + var baseContainerConfig = this.getBaseConfig(m.name); + YAHOO.lang.augmentObject(m.config, baseContainerConfig); //TODO: Might not want to modify the module config here (in case the group can be reshrunk and old vars are used) m.config.title = m.name; + var newPos = this.translatePosition(m.config.position, position); + m.config.position = newPos; var container = this.layer.addContainer(m.config); //Dom.addClass(container.el, "WiringEditor-module-"+m.name); container.setValue(m.value); @@ -118,6 +123,11 @@ YAHOO.lang.extend(WireIt.GroupFormContainer, WireIt.FormContainer, { this.layer.removeContainer(this); }, + translatePosition: function(modulePosition, position) + { + return [ Math.max(0, modulePosition[0]+position[0]), Math.max(0, modulePosition[1]+position[1]) ]; + }, + /** * @method getValue */ diff --git a/js/Grouper.js b/js/Grouper.js index 7b70bce7..9a9f6ce2 100644 --- a/js/Grouper.js +++ b/js/Grouper.js @@ -20,8 +20,7 @@ draggable: true, width: '500px', visible: false, - modal: true, - close: false + modal: true }); this.panel.panelElement = pel; @@ -33,7 +32,7 @@ this.panel.buttonsElement = WireIt.cn("div"); outer.appendChild(this.panel.buttonsElement); - var okButton = WireIt.cn("button", {}, {}, "OK"); + var okButton = WireIt.cn("button", {}, {}, "Make Group"); okButton.id = "groupPanelOkButton"; this.panel.buttonsElement.appendChild(okButton); @@ -52,6 +51,7 @@ row.appendChild(WireIt.cn("th", {}, {}, "Name")); row.appendChild(WireIt.cn("th", {}, {}, "Visible")); row.appendChild(WireIt.cn("th", {}, {}, "New name")); + row.appendChild(WireIt.cn("th", {}, {}, "Show")); pel.render(document.body); @@ -80,15 +80,22 @@ collapse: function() { + if (this.containers.length == 0) + { + alert("No containers selected, use the G in the top right corner to select containers"); + return; + } + var list = this.panel.list; configUITerminalMap = []; + var layer = this.layer; var addTerminal = function(t, moduleId) { var addTds = function(terminalDiv) { tds = []; - for(var i = 0; i < 3; i++) + for(var i = 0; i < 4; i++) { var td = WireIt.cn("td") tds.push(td); @@ -108,7 +115,33 @@ tds[0].innerHTML = internalName; tds[1].appendChild(visible); tds[2].appendChild(externalName); - + + var showButton = WireIt.cn("button", {}, {}, "Show") + + var centerLayer = function (elem, layerElem) + { + /* + eR = elem.getBoundingClientRect(); + lR = layerElem.getBoundingClientRect(); + + layerElem.scrollTop = ((eR.top+eR.bottom)/2) - ((lR.top+lR.bottom)/2) - lR.top + layerElem.scrollLeft = ((eR.left+eR.right)/2) - ((lR.left+lR.right)/2) - lR.left + */ + layerElem.scrollTop = elem.offsetTop+elem.offsetHeight-(layerElem.offsetHeight/2); + layerElem.scrollLeft = elem.offsetLeft+elem.offsetWidth-(layerElem.offsetWidth/2); + } + + showButton.onmousedown = function() + { + centerLayer(t.container.el, layer.el); + t.setDropInvitation(true); + }; + var cancel = function () { t.setDropInvitation(false); }; + + showButton.onmouseup = cancel; + showButton.onmouseout = cancel; + + tds[3].appendChild(showButton); list.appendChild(terminalDiv) configUITerminalMap.push({"visible": visible, "externalName": externalName, "terminal": t, "moduleId" : moduleId, "internalName" : internalName}); @@ -159,7 +192,8 @@ "collapsible": true, "fields": [ ], "legend": "Inner group fields", - "getBaseConfigFunction" : this.baseConfigFunction + "getBaseConfigFunction" : this.baseConfigFunction, + position : working.container.position } ) @@ -327,12 +361,18 @@ var group = {wires : [], modules: [], externalToInternalTerminalMap : {}, terminals : []}; var terminals = group.terminals; + var center = this.workOutCenter(containers); + for (var cI in containers) { var c = containers[cI]; + var config = c.getConfig(); + + config.position[0] = center[0] - config.position[0]; + config.position[1] = center[1] - config.position[1]; //Add container to group - group.modules.push( {name: c.options.title, value: c.getValue(), config: c.getConfig()}); + group.modules.push( {name: c.options.title, value: c.getValue(), config: config}); } @@ -374,11 +414,44 @@ } return { + "container" : {"position" : center}, "group" : group, "wires" : {"external" : externalWires, "cut" : cutWires} }; }, + workOutCenter: function(containers) + { + var bounds = {}; + + for (var cI in containers) + { + var c = containers[cI] + var config = c.getConfig(); + + var left, top; + left = config.position[0]; + top = config.position[1]; + + if ((typeof bounds["left"] == "undefined") || bounds["left"] > left) + bounds["left"] = left; + + if ((typeof bounds["right"] == "undefined") || bounds["right"] < left) + bounds["right"] = left; + + if ((typeof bounds["top"] == "undefined") || bounds["top"] > top) + bounds["top"] = top; + + if ((typeof bounds["bottom"] == "undefined") || bounds["bottom"] < top) + bounds["bottom"] = top; + } + + return [ + ((bounds.right + bounds.left)/2), + ((bounds.top + bounds.bottom)/2) + ]; + }, + expand: function() { gc.expand();