/* * Copyright [2011] [wisemapping] * * Licensed under WiseMapping Public License, Version 1.0 (the "License"). * It is basically the Apache License, Version 2.0 (the "License") plus the * "powered by wisemapping" text requirement on every single page; * you may not use this file except in compliance with the License. * You may obtain a copy of the license at * * http://www.wisemapping.org/license * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ mindplot.Designer = new Class({ Extends: Events, initialize: function(options, divElement) { $assert(options, "options must be defined"); $assert(options.zoom, "zoom must be defined"); $assert(divElement, "divElement must be defined"); this._options = options; // Set full div elem render area ... divElement.setStyles(options.size); // Dispatcher manager ... var commandContext = new mindplot.CommandContext(this); if (!$defined(options.collab) || options.collab == 'standalone') { this._actionDispatcher = new mindplot.StandaloneActionDispatcher(commandContext); } else { this._actionDispatcher = new mindplot.BrixActionDispatcher(commandContext); } this._actionDispatcher.addEvent("modelUpdate", function(event) { this.fireEvent("modelUpdate", event); }.bind(this)); mindplot.ActionDispatcher.setInstance(this._actionDispatcher); this._model = new mindplot.DesignerModel(options); // Init Screen manager.. var screenManager = new mindplot.ScreenManager(divElement); this._workspace = new mindplot.Workspace(screenManager, this._model.getZoom()); // Init layout manager ... this._eventBussDispatcher = new mindplot.layout.EventBusDispatcher(this.getModel()); // Register events if (!this.isReadOnly()) { this._registerEvents(); this._dragManager = this._buildDragManager(this._workspace); } this._relPivot = new mindplot.RelationshipPivot(this._workspace, this); // Set editor working area ... this.setViewPort(options.viewPort); mindplot.TopicEventDispatcher.configure(this.isReadOnly()); }, /** * Deactivates the keyboard events so you can enter text into forms */ deactivateKeyboard: function() { mindplot.DesignerKeyboard.getInstance().deactivate(); this.deselectAll(); }, /** * Activates the keyboard events so you can enter text into forms */ activateKeyboard: function() { mindplot.DesignerKeyboard.getInstance().activate(); }, _registerEvents : function() { // Register mouse events ... this._registerMouseEvents(); // Register keyboard events ... mindplot.DesignerKeyboard.register(this); }, addEvent: function(type, listener) { if (type == mindplot.TopicEvent.EDIT || type == mindplot.TopicEvent.CLICK) { var editor = mindplot.TopicEventDispatcher.getInstance(); editor.addEvent(type, listener); } else { this.parent(type, listener); } }, _registerMouseEvents : function() { var workspace = this._workspace; var screenManager = workspace.getScreenManager(); // Initialize workspace event listeners. screenManager.addEvent('update', function() { // Topic must be set to his original state. All editors must be closed. var topics = this.getModel().getTopics(); topics.forEach(function(object) { object.closeEditors(); }); // Clean some selected nodes on event .. if (this._cleanScreen) this._cleanScreen(); }.bind(this)); // Deselect on click ... screenManager.addEvent('click', function(event) { this.onObjectFocusEvent(null, event); }.bind(this)); // Create nodes on double click... screenManager.addEvent('dblclick', function(event) { if (workspace.isWorkspaceEventsEnabled()) { var mousePos = screenManager.getWorkspaceMousePosition(event); var centralTopic = this.getModel().getCentralTopic(); var model = this._createChildModel(centralTopic, mousePos); this._actionDispatcher.addTopic(model, centralTopic.getId()); } }.bind(this)); $(document).addEvent('mousewheel', function(event) { // Change mousewheel handling so we let the default //event happen if we are outside the container. var coords = screenManager.getContainer().getCoordinates(); var isOutsideContainer = event.client.y < coords.top || event.client.y > coords.bottom || event.client.x < coords.left || event.client.x > coords.right; if (!isOutsideContainer) { if (event.wheel > 0) { this.zoomIn(1.05); } else { this.zoomOut(1.05); } event.preventDefault(); } }.bind(this)); }, _buildDragManager: function(workspace) { var designerModel = this.getModel(); var dragConnector = new mindplot.DragConnector(designerModel, this._workspace); var dragManager = new mindplot.DragManager(workspace, this._eventBussDispatcher); var topics = designerModel.getTopics(); dragManager.addEvent('startdragging', function() { // Enable all mouse events. for (var i = 0; i < topics.length; i++) { topics[i].setMouseEventsEnabled(false); } }); dragManager.addEvent('dragging', function(event, dragTopic) { dragTopic.updateFreeLayout(event); if (!dragTopic.isFreeLayoutOn(event)) { // The node is being drag. Is the connection still valid ? dragConnector.checkConnection(dragTopic); if (!dragTopic.isVisible() && dragTopic.isConnected()) { dragTopic.setVisibility(true); } } }); dragManager.addEvent('enddragging', function(event, dragTopic) { for (var i = 0; i < topics.length; i++) { topics[i].setMouseEventsEnabled(true); } dragTopic.applyChanges(workspace); }); return dragManager; }, setViewPort : function(size) { this._workspace.setViewPort(size); var model = this.getModel(); this._workspace.setZoom(model.getZoom(), true); }, _buildNodeGraph : function(model, readOnly) { var workspace = this._workspace; // Create node graph ... var topic = mindplot.NodeGraph.create(model, {readOnly:readOnly}); // Append it to the workspace ... this.getModel().addTopic(topic); // Add Topic events ... if (!readOnly) { // If a node had gained focus, clean the rest of the nodes ... topic.addEvent('mousedown', function(event) { this.onObjectFocusEvent(topic, event); }.bind(this)); // Register node listeners ... if (topic.getType() != mindplot.model.INodeModel.CENTRAL_TOPIC_TYPE) { // Central Topic doesn't support to be dragged this._dragManager.add(topic); } } // Connect Topic ... var isConnected = model.isConnected(); if (isConnected) { // Improve this ... var targetTopicModel = model.getParent(); var targetTopic = null; var topics = this.getModel().getTopics(); for (var i = 0; i < topics.length; i++) { var t = topics[i]; if (t.getModel() == targetTopicModel) { targetTopic = t; // Disconnect the node. It will be connected again later ... model.disconnect(); break; } } $assert(targetTopic, "Could not find a topic to connect"); topic.connectTo(targetTopic, workspace); } topic.addEvent('ontblur', function() { var topics = this.getModel().filterSelectedTopics(); var rels = this.getModel().filterSelectedRelations(); if (topics.length == 0 || rels.length == 0) { this.fireEvent('onblur'); } }.bind(this)); topic.addEvent('ontfocus', function() { var topics = this.getModel().filterSelectedTopics(); var rels = this.getModel().filterSelectedRelations(); if (topics.length == 1 || rels.length == 1) { this.fireEvent('onfocus'); } }.bind(this)); return topic; }, onObjectFocusEvent : function(currentObject, event) { // Close node editors .. var topics = this.getModel().getTopics(); topics.forEach(function(topic) { topic.closeEditors(); }); var model = this.getModel(); var objects = model.getObjects(); objects.forEach(function(object) { // Disable all nodes on focus but not the current if Ctrl key isn't being pressed if (!$defined(event) || (!event.control && !event.meta)) { if (object.isOnFocus() && object != currentObject) { object.setOnFocus(false); } } }); }, selectAll : function() { var model = this.getModel(); var objects = model.getObjects(); objects.forEach(function(object) { object.setOnFocus(true); }); }, deselectAll : function() { var objects = this.getModel().getObjects(); objects.forEach(function(object) { object.setOnFocus(false); }); }, /** * Set the zoom of the map. * @param: zoom: number between 0.3 and 1.9 */ setZoom: function(zoom) { if (zoom > 1.9 || zoom < 0.3) { $notify("Zoom too high. Cannot apply zoom above 1.9 or below 0.3"); console.log("Tried to set zoom to " + zoom + " which is outside allowed range."); return; } this.getModel().setZoom(zoom); this._workspace.setZoom(zoom); }, zoomOut : function(factor) { if (!factor) factor = 1.2; var model = this.getModel(); var scale = model.getZoom() * factor; if (scale <= 1.9) { model.setZoom(scale); this._workspace.setZoom(scale); } else { $notify('No more zoom can be applied'); } }, zoomIn : function(factor) { if (!factor) factor = 1.2; var model = this.getModel(); var scale = model.getZoom() / factor; if (scale >= 0.3) { model.setZoom(scale); this._workspace.setZoom(scale); } else { $notify('No more zoom can be applied'); } }, getModel : function() { return this._model; }, createChildForSelectedNode : function() { var nodes = this.getModel().filterSelectedTopics(); if (nodes.length <= 0) { // If there are more than one node selected, $notify('Could not create a topic. Only one node must be selected.'); return; } if (nodes.length != 1) { // If there are more than one node selected, $notify('Could not create a topic. One topic must be selected.'); return; } // Add new node ... var parentTopic = nodes[0]; var parentTopicId = parentTopic.getId(); var childModel = this._createChildModel(parentTopic); // Execute event ... this._actionDispatcher.addTopic(childModel, parentTopicId, true); }, _createChildModel : function(topic, mousePos) { // Create a new node ... var model = topic.getModel(); var mindmap = model.getMindmap(); var childModel = mindmap.createNode(); // Create a new node ... var layoutManager = this._eventBussDispatcher.getLayoutManager(); var result = layoutManager.predict(topic.getId(), null, mousePos); childModel.setOrder(result.order); var position = result.position; childModel.setPosition(position.x, position.y); return childModel; }, addDraggedNode: function(event, model) { $assert(event, "event can not be null"); $assert(model, "model can not be null"); // Position far from the visual area ... model.setPosition(1000, 1000); this._actionDispatcher.addTopic(model, null, false); var topic = this.getModel().findTopicById(model.getId()); // Simulate a mouse down event to start the dragging ... topic.fireEvent("mousedown", event); }, createSiblingForSelectedNode : function() { var nodes = this.getModel().filterSelectedTopics(); if (nodes.length <= 0) { // If there are no nodes selected, $notify('Could not create a topic. At least one node must be selected.'); return; } if (nodes.length > 1) { // If there are more than one node selected, $notify('Could not create a topic. One topic must be selected.'); return; } var topic = nodes[0]; if (topic.getType() == mindplot.model.INodeModel.CENTRAL_TOPIC_TYPE) { // Central topic doesn't have siblings ... this.createChildForSelectedNode(); } else { var parentTopic = topic.getOutgoingConnectedTopic(); var siblingModel = this._createSiblingModel(topic); // Hack: if parent is central topic, add node below not on opposite side. // This should be done in the layout if (parentTopic.getType() == mindplot.model.INodeModel.CENTRAL_TOPIC_TYPE) { siblingModel.setOrder(topic.getOrder() + 2); } var parentTopicId = parentTopic.getId(); this._actionDispatcher.addTopic(siblingModel, parentTopicId, true); } }, _createSiblingModel : function(topic) { var result = null; var parentTopic = topic.getOutgoingConnectedTopic(); if (parentTopic != null) { // Create a new node ... var model = topic.getModel(); var mindmap = model.getMindmap(); result = mindmap.createNode(); // Create a new node ... var order = topic.getOrder() + 1; result.setOrder(order); result.setPosition(10, 10); // Set a dummy pisition ... } return result; }, showRelPivot : function(event) { // Current mouse position .... var screen = this._workspace.getScreenManager(); var pos = screen.getWorkspaceMousePosition(event); var selectedTopic = this.getModel().selectedTopic(); // create a connection ... this._relPivot.start(selectedTopic, pos); }, connectByRelation : function(sourceTopic, targetTopic) { $assert(sourceTopic, "sourceTopic can not be null"); $assert(targetTopic, "targetTopic can not be null"); // Create a new topic model ... // @Todo: Model should not be modified from here ... var mindmap = this.getMindmap(); var model = mindmap.createRelationship(sourceTopic.getModel().getId(), targetTopic.getModel().getId()); this._actionDispatcher.connectByRelation(model); }, needsSave : function() { //@Todo: Review all this ... return this._actionDispatcher._actionRunner.hasBeenChanged(); }, getMindmapProperties : function() { return {zoom:this.getModel().getZoom()}; }, loadMap : function(mindmapModel) { $assert(mindmapModel, "mindmapModel can not be null"); this._mindmap = mindmapModel; // try { // Init layout manager ... var size = {width:25,height:25}; var layoutManager = new mindplot.layout.LayoutManager(mindmapModel.getCentralTopic().getId(), size); layoutManager.addEvent('change', function(event) { var id = event.getId(); var topic = this.getModel().findTopicById(id); topic.setPosition(event.getPosition()); topic.setOrder(event.getOrder()); }.bind(this)); this._eventBussDispatcher.setLayoutManager(layoutManager); // Building node graph ... var branches = mindmapModel.getBranches(); for (var i = 0; i < branches.length; i++) { // NodeModel -> NodeGraph ... var nodeModel = branches[i]; var nodeGraph = this._nodeModelToNodeGraph(nodeModel, false); // Update shrink render state... nodeGraph.setBranchVisibility(true); } var relationships = mindmapModel.getRelationships(); for (var j = 0; j < relationships.length; j++) { this._relationshipModelToRelationship(relationships[j]); } // Place the focus on the Central Topic var centralTopic = this.getModel().getCentralTopic(); this.goToNode(centralTopic); // Finally, sort the map ... mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.DoLayout); this.fireEvent('loadSuccess'); // } catch(e) { // this.fireEvent('loadError', e); // } }, getMindmap : function() { return this._mindmap; }, undo : function() { // @Todo: This is a hack... this._actionDispatcher._actionRunner.undo(); }, redo : function() { this._actionDispatcher._actionRunner.redo(); }, isReadOnly : function() { return this._options.readOnly; }, _nodeModelToNodeGraph : function(nodeModel, isVisible) { $assert(nodeModel, "Node model can not be null"); var children = nodeModel.getChildren().slice(); children = children.sort(function(a, b) { return a.getOrder() - b.getOrder() }); var nodeGraph = this._buildNodeGraph(nodeModel, this.isReadOnly()); if (isVisible) { nodeGraph.setVisibility(isVisible); } this._workspace.appendChild(nodeGraph); for (var i = 0; i < children.length; i++) { var child = children[i]; if ($defined(child)) this._nodeModelToNodeGraph(child, false); } return nodeGraph; }, _relationshipModelToRelationship : function(model) { $assert(model, "Node model can not be null"); var relationship = this._buildRelationship(model); var sourceTopic = relationship.getSourceTopic(); sourceTopic.connectByRelation(relationship); var targetTopic = relationship.getTargetTopic(); targetTopic.connectByRelation(relationship); relationship.setVisibility(sourceTopic.isVisible() && targetTopic.isVisible()); var workspace = this._workspace; workspace.appendChild(relationship); relationship.redraw(); return relationship; }, createRelationship : function(model) { this._mindmap.addRelationship(model); return this._relationshipModelToRelationship(model); }, removeRelationship : function(model) { this._mindmap.removeRelationship(model); var relationship = this._relationships[model.getId()]; var sourceTopic = relationship.getSourceTopic(); sourceTopic.removeRelationship(relationship); var targetTopic = relationship.getTargetTopic(); targetTopic.removeRelationship(relationship); this._workspace.removeChild(relationship); delete this._relationships[model.getId()]; }, _buildRelationship : function (model) { var elem = this; var fromNodeId = model.getFromNode(); var toNodeId = model.getToNode(); var sourceTopic = null; var targetTopic = null; var dmodel = this.getModel(); var topics = dmodel.getTopics(); for (var i = 0; i < topics.length; i++) { var t = topics[i]; if (t.getModel().getId() == fromNodeId) { sourceTopic = t; } if (t.getModel().getId() == toNodeId) { targetTopic = t; } if (targetTopic != null && sourceTopic != null) { break; } } // Create node graph ... var relationLine = new mindplot.RelationshipLine(sourceTopic, targetTopic, model.getLineType()); if ($defined(model.getSrcCtrlPoint())) { var srcPoint = model.getSrcCtrlPoint().clone(); relationLine.setSrcControlPoint(srcPoint); } if ($defined(model.getDestCtrlPoint())) { var destPoint = model.getDestCtrlPoint().clone(); relationLine.setDestControlPoint(destPoint); } relationLine.getLine().setDashed(3, 2); relationLine.setShowEndArrow(model.getEndArrow()); relationLine.setShowStartArrow(model.getStartArrow()); relationLine.setModel(model); //Add Listeners relationLine.addEvent('onfocus', function(event) { elem.onObjectFocusEvent(relationLine, event); }); // Append it to the workspace ... dmodel.addRelationship(model.getId(), relationLine); return relationLine; }, _removeNode : function(node) { if (node.getTopicType() != mindplot.model.INodeModel.CENTRAL_TOPIC_TYPE) { var parent = node._parent; node.disconnect(this._workspace); //remove children while (node.getChildren().length > 0) { this._removeNode(node.getChildren()[0]); } this._workspace.removeChild(node); this.getModel().removeTopic(node); // Delete this node from the model... var model = node.getModel(); model.deleteNode(); if ($defined(parent)) { this.goToNode(parent); } } }, deleteCurrentNode : function() { var validateFunc = function(object) { return object.getType() == mindplot.RelationshipLine.type || object.getTopicType() != mindplot.model.INodeModel.CENTRAL_TOPIC_TYPE }; var validateError = 'Central topic can not be deleted.'; var model = this.getModel(); var topicsIds = model.filterTopicsIds(validateFunc, validateError); var relIds = model.filterRelationIds(validateFunc, validateError); if (topicsIds.length > 0 || relIds.length > 0) { this._actionDispatcher.deleteTopics(topicsIds, relIds); } }, changeFontFamily : function(font) { var topicsIds = this.getModel().filterTopicsIds(); if (topicsIds.length > 0) { this._actionDispatcher.changeFontFamilyToTopic(topicsIds, font); } }, changeFontStyle : function() { var topicsIds = this.getModel().filterTopicsIds(); if (topicsIds.length > 0) { this._actionDispatcher.changeFontStyleToTopic(topicsIds); } }, changeFontColor : function(color) { $assert(color, "color can not be null"); var topicsIds = this.getModel().filterTopicsIds(); if (topicsIds.length > 0) { this._actionDispatcher.changeFontColorToTopic(topicsIds, color); } }, changeBackgroundColor : function(color) { var validateFunc = function(topic) { return topic.getShapeType() != mindplot.model.TopicShape.LINE; }; var validateError = 'Color can not be set to line topics.'; var topicsIds = this.getModel().filterTopicsIds(validateFunc, validateError); if (topicsIds.length > 0) { this._actionDispatcher.changeBackgroundColorToTopic(topicsIds, color); } }, changeBorderColor : function(color) { var validateFunc = function(topic) { return topic.getShapeType() != mindplot.model.TopicShape.LINE; }; var validateError = 'Color can not be set to line topics.'; var topicsIds = this.getModel().filterTopicsIds(validateFunc, validateError); if (topicsIds.length > 0) { this._actionDispatcher.changeBorderColorToTopic(topicsIds, color); } }, changeFontSize : function(size) { var topicsIds = this.getModel().filterTopicsIds(); if (topicsIds.length > 0) { this._actionDispatcher.changeFontSizeToTopic(topicsIds, size); } }, changeTopicShape : function(shape) { var validateFunc = function(topic) { return !(topic.getType() == mindplot.model.INodeModel.CENTRAL_TOPIC_TYPE && shape == mindplot.model.TopicShape.LINE) }; var validateError = 'Central Topic shape can not be changed to line figure.'; var topicsIds = this.getModel().filterTopicsIds(validateFunc, validateError); if (topicsIds.length > 0) { this._actionDispatcher.changeShapeTypeToTopic(topicsIds, shape); } }, changeFontWeight : function() { var topicsIds = this.getModel().filterTopicsIds(); if (topicsIds.length > 0) { this._actionDispatcher.changeFontWeightToTopic(topicsIds); } }, addIconType : function(iconType) { var topicsIds = this.getModel().filterTopicsIds(); if (topicsIds.length > 0) { this._actionDispatcher.addFeatureToTopic(topicsIds[0], mindplot.TopicFeature.Icon.id, {id:iconType}); } }, addLink : function() { var model = this.getModel(); var topic = model.selectedTopic(); topic.showLinkEditor(); }, addNote : function() { var model = this.getModel(); var topic = model.selectedTopic(); topic.showNoteEditor(); }, goToNode : function(node) { node.setOnFocus(true); this.onObjectFocusEvent(node); }, getWorkSpace : function() { return this._workspace; } } );