First steps on icon drag support.

This commit is contained in:
Paulo Gustavo Veiga 2012-03-07 17:40:10 -03:00
parent 24047e02bb
commit a1f6542264
7 changed files with 105 additions and 36 deletions

View File

@ -160,6 +160,7 @@ mindplot.Designer = new Class({
this._workspace.setZoom(model.getZoom(), true); this._workspace.setZoom(model.getZoom(), true);
}, },
_buildNodeGraph : function(model, readOnly) { _buildNodeGraph : function(model, readOnly) {
var workspace = this._workspace; var workspace = this._workspace;
@ -340,6 +341,30 @@ mindplot.Designer = new Class({
return childModel; return childModel;
}, },
addDraddedNode: function(event, options) {
$assert(event, "event can not be null");
$assert(options, "option can not be null");
// Create a new node ...
var mindmap = this.getMindmap();
var model = mindmap.createNode(mindplot.model.INodeModel.MAIN_TOPIC_TYPE);
model.setShapeType(mindplot.model.TopicShape.IMAGE);
// Set node specified options ...
model.setImageUrl(options.imageUrl);
model.setImageSize(options.imageWidth, options.imageHeight);
model.setMetadata(options.metadata);
// 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() { createSiblingForSelectedNode : function() {
var nodes = this.getModel().filterSelectedTopics(); var nodes = this.getModel().filterSelectedTopics();
if (nodes.length <= 0) { if (nodes.length <= 0) {
@ -423,42 +448,42 @@ mindplot.Designer = new Class({
this._mindmap = mindmapModel; this._mindmap = mindmapModel;
// try { // try {
// Init layout manager ... // Init layout manager ...
var size = {width:25,height:25}; var size = {width:25,height:25};
var layoutManager = new mindplot.layout.LayoutManager(mindmapModel.getCentralTopic().getId(), size); var layoutManager = new mindplot.layout.LayoutManager(mindmapModel.getCentralTopic().getId(), size);
layoutManager.addEvent('change', function(event) { layoutManager.addEvent('change', function(event) {
var id = event.getId(); var id = event.getId();
var topic = this.getModel().findTopicById(id); var topic = this.getModel().findTopicById(id);
topic.setPosition(event.getPosition()); topic.setPosition(event.getPosition());
topic.setOrder(event.getOrder()); topic.setOrder(event.getOrder());
}.bind(this)); }.bind(this));
this._eventBussDispatcher.setLayoutManager(layoutManager); this._eventBussDispatcher.setLayoutManager(layoutManager);
// Building node graph ... // Building node graph ...
var branches = mindmapModel.getBranches(); var branches = mindmapModel.getBranches();
for (var i = 0; i < branches.length; i++) { for (var i = 0; i < branches.length; i++) {
// NodeModel -> NodeGraph ... // NodeModel -> NodeGraph ...
var nodeModel = branches[i]; var nodeModel = branches[i];
var nodeGraph = this._nodeModelToNodeGraph(nodeModel, false); var nodeGraph = this._nodeModelToNodeGraph(nodeModel, false);
// Update shrink render state... // Update shrink render state...
nodeGraph.setBranchVisibility(true); nodeGraph.setBranchVisibility(true);
} }
var relationships = mindmapModel.getRelationships(); var relationships = mindmapModel.getRelationships();
for (var j = 0; j < relationships.length; j++) { for (var j = 0; j < relationships.length; j++) {
this._relationshipModelToRelationship(relationships[j]); this._relationshipModelToRelationship(relationships[j]);
} }
// Place the focus on the Central Topic // Place the focus on the Central Topic
var centralTopic = this.getModel().getCentralTopic(); var centralTopic = this.getModel().getCentralTopic();
this.goToNode(centralTopic); this.goToNode(centralTopic);
// Finally, sort the map ... // Finally, sort the map ...
mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.DoLayout); mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.DoLayout);
this.fireEvent('loadSuccess'); this.fireEvent('loadSuccess');
// } catch(e) { // } catch(e) {
// this.fireEvent('loadError', e); // this.fireEvent('loadError', e);
// } // }
@ -668,7 +693,7 @@ mindplot.Designer = new Class({
changeBorderColor : function(color) { changeBorderColor : function(color) {
var validateFunc = function(topic) { var validateFunc = function(topic) {
return topic.getShapeType() != mindplot.model.TopicShape.LINE ; return topic.getShapeType() != mindplot.model.TopicShape.LINE;
}; };
var validateError = 'Color can not be set to line topics.'; var validateError = 'Color can not be set to line topics.';
var topicsIds = this.getModel().filterTopicsIds(validateFunc, validateError); var topicsIds = this.getModel().filterTopicsIds(validateFunc, validateError);

View File

@ -87,6 +87,15 @@ mindplot.model.INodeModel = new Class({
}, },
getMetadata:function() {
return this.getProperty('metadata');
},
setMetadata:function(json) {
this.putProperty('metadata', json);
},
getImageUrl:function() { getImageUrl:function() {
return this.getProperty('imageUrl'); return this.getProperty('imageUrl');
}, },

View File

@ -127,6 +127,11 @@ mindplot.persistence.XMLSerializer_Pela = new Class({
parentTopic.setAttribute('brColor', brColor); parentTopic.setAttribute('brColor', brColor);
} }
var metadata = topic.getMetadata();
if ($defined(metadata)) {
parentTopic.setAttribute('metadata', metadata);
}
// Serialize features ... // Serialize features ...
var features = topic.getFeatures(); var features = topic.getFeatures();
for (var i = 0; i < features.length; i++) { for (var i = 0; i < features.length; i++) {
@ -314,6 +319,11 @@ mindplot.persistence.XMLSerializer_Pela = new Class({
topic.setPosition(pos[0], pos[1]); topic.setPosition(pos[0], pos[1]);
} }
var metadata = domElem.getAttribute('metadata');
if ($defined(metadata)) {
topic.setMetadata(metadata);
}
//Creating icons and children nodes //Creating icons and children nodes
var children = domElem.childNodes; var children = domElem.childNodes;
for (var i = 0; i < children.length; i++) { for (var i = 0; i < children.length; i++) {

View File

@ -87,6 +87,10 @@ web2d.Element = new Class({
this._peer.addEvent(type, listener); this._peer.addEvent(type, listener);
}, },
fireEvent : function(type, event) {
this._peer.fireEvent(type, event);
},
cloneEvents : function(from) { cloneEvents : function(from) {
this._peer.cloneEvents(from); this._peer.cloneEvents(from);
}, },

View File

@ -85,6 +85,10 @@ web2d.peer.svg.ElementPeer = new Class({
this._native.addEvent(type, listener); this._native.addEvent(type, listener);
}, },
fireEvent : function(type) {
this._native.fireEvent(type, event);
},
cloneEvents : function(from) { cloneEvents : function(from) {
this._native.cloneEvents(from); this._native.cloneEvents(from);
}, },

View File

@ -30,9 +30,9 @@
var persistence = mindplot.PersistenceManager.getInstance(); var persistence = mindplot.PersistenceManager.getInstance();
var mindmap; var mindmap;
// try { // try {
mindmap = persistence.load(mapId); mindmap = persistence.load(mapId);
// } catch(e) { // } catch(e) {
// If the map could not be loaded, create a new empty map... // If the map could not be loaded, create a new empty map...
// mindmap = mindplot.model.Mindmap.buildEmpty(mapId); // mindmap = mindplot.model.Mindmap.buildEmpty(mapId);
// } // }
designer.loadMap(mindmap); designer.loadMap(mindmap);
@ -121,7 +121,7 @@
<div id="fontItalic" class="buttonOn" title="Italic Style"> <div id="fontItalic" class="buttonOn" title="Italic Style">
<img src="images/font-italic.png"/> <img src="images/font-italic.png"/>
</div> </div>
<div id="fontColor" class="buttonExtOn" title="Fond Color" style="padding-top:4px"> <div id="fontColor" class="buttonExtOn" title="Font Color" style="padding-top:4px">
<img src="images/font-color.png"/> <img src="images/font-color.png"/>
</div> </div>
</div> </div>
@ -133,6 +133,26 @@
</div> </div>
</div> </div>
<!--
<div style="position: absolute;align:left;background: gray;width: 100px;height: 300px;z-index: 100" id="dragPanel">
<div id="dragIcon" style="">
<img src="images/logo-small.png"/>
</div>
</div>
<script type="text/javascript">
$("dragIcon").addEvent('mousedown', function(event) {
event.preventDefault();
var options = {imageUrl:"images/logo-small.png",
imageWidth:80,
imageHeight:43,
metadata: "{'media':'video,'url':'http://www.youtube.com/watch?v=P3FrXftyuzw&feature=g-vrec&context=G2b4ab69RVAAAAAAAAAA'}"
};
designer.addDraddedNode(event, options);
});
</script>
-->
<div id="mindplot"></div> <div id="mindplot"></div>
<script type="text/javascript" src="js/editor.js"></script> <script type="text/javascript" src="js/editor.js"></script>
</body> </body>

View File

@ -42,8 +42,5 @@
<topic position="410,-97" order="2" text="Anyplace, Anytime" id="9"/> <topic position="410,-97" order="2" text="Anyplace, Anytime" id="9"/>
<topic position="386,-73" order="3" text="Free!!!" id="10"/> <topic position="386,-73" order="3" text="Free!!!" id="10"/>
</topic> </topic>
<topic shape="image"
image="163,80:images/logo-medium.png"
prop="" order="9" position="-336,-100"/>
</topic> </topic>
</map> </map>