mirror of
https://bitbucket.org/wisemapping/wisemapping-open-source.git
synced 2024-10-05 17:58:36 +02:00
First steps on icon drag support.
This commit is contained in:
Paulo Gustavo Veiga
parent
24047e02bb
commit
a1f6542264
@ -160,6 +160,7 @@ mindplot.Designer = new Class({
|
||||
this._workspace.setZoom(model.getZoom(), true);
|
||||
},
|
||||
|
||||
|
||||
_buildNodeGraph : function(model, readOnly) {
|
||||
var workspace = this._workspace;
|
||||
|
||||
@ -340,6 +341,30 @@ mindplot.Designer = new Class({
|
||||
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() {
|
||||
var nodes = this.getModel().filterSelectedTopics();
|
||||
if (nodes.length <= 0) {
|
||||
@ -423,42 +448,42 @@ mindplot.Designer = new Class({
|
||||
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);
|
||||
// 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);
|
||||
// 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);
|
||||
}
|
||||
// Update shrink render state...
|
||||
nodeGraph.setBranchVisibility(true);
|
||||
}
|
||||
|
||||
var relationships = mindmapModel.getRelationships();
|
||||
for (var j = 0; j < relationships.length; j++) {
|
||||
this._relationshipModelToRelationship(relationships[j]);
|
||||
}
|
||||
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);
|
||||
// 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);
|
||||
// Finally, sort the map ...
|
||||
mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.DoLayout);
|
||||
|
||||
this.fireEvent('loadSuccess');
|
||||
this.fireEvent('loadSuccess');
|
||||
// } catch(e) {
|
||||
// this.fireEvent('loadError', e);
|
||||
// }
|
||||
@ -668,7 +693,7 @@ mindplot.Designer = new Class({
|
||||
|
||||
changeBorderColor : function(color) {
|
||||
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 topicsIds = this.getModel().filterTopicsIds(validateFunc, validateError);
|
||||
|
||||
@ -87,6 +87,15 @@ mindplot.model.INodeModel = new Class({
|
||||
|
||||
},
|
||||
|
||||
getMetadata:function() {
|
||||
return this.getProperty('metadata');
|
||||
},
|
||||
|
||||
setMetadata:function(json) {
|
||||
this.putProperty('metadata', json);
|
||||
|
||||
},
|
||||
|
||||
getImageUrl:function() {
|
||||
return this.getProperty('imageUrl');
|
||||
},
|
||||
|
||||
@ -127,6 +127,11 @@ mindplot.persistence.XMLSerializer_Pela = new Class({
|
||||
parentTopic.setAttribute('brColor', brColor);
|
||||
}
|
||||
|
||||
var metadata = topic.getMetadata();
|
||||
if ($defined(metadata)) {
|
||||
parentTopic.setAttribute('metadata', metadata);
|
||||
}
|
||||
|
||||
// Serialize features ...
|
||||
var features = topic.getFeatures();
|
||||
for (var i = 0; i < features.length; i++) {
|
||||
@ -314,6 +319,11 @@ mindplot.persistence.XMLSerializer_Pela = new Class({
|
||||
topic.setPosition(pos[0], pos[1]);
|
||||
}
|
||||
|
||||
var metadata = domElem.getAttribute('metadata');
|
||||
if ($defined(metadata)) {
|
||||
topic.setMetadata(metadata);
|
||||
}
|
||||
|
||||
//Creating icons and children nodes
|
||||
var children = domElem.childNodes;
|
||||
for (var i = 0; i < children.length; i++) {
|
||||
|
||||
@ -87,6 +87,10 @@ web2d.Element = new Class({
|
||||
this._peer.addEvent(type, listener);
|
||||
},
|
||||
|
||||
fireEvent : function(type, event) {
|
||||
this._peer.fireEvent(type, event);
|
||||
},
|
||||
|
||||
cloneEvents : function(from) {
|
||||
this._peer.cloneEvents(from);
|
||||
},
|
||||
|
||||
@ -85,6 +85,10 @@ web2d.peer.svg.ElementPeer = new Class({
|
||||
this._native.addEvent(type, listener);
|
||||
},
|
||||
|
||||
fireEvent : function(type) {
|
||||
this._native.fireEvent(type, event);
|
||||
},
|
||||
|
||||
cloneEvents : function(from) {
|
||||
this._native.cloneEvents(from);
|
||||
},
|
||||
|
||||
@ -30,9 +30,9 @@
|
||||
var persistence = mindplot.PersistenceManager.getInstance();
|
||||
var mindmap;
|
||||
// try {
|
||||
mindmap = persistence.load(mapId);
|
||||
mindmap = persistence.load(mapId);
|
||||
// } 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);
|
||||
// }
|
||||
designer.loadMap(mindmap);
|
||||
@ -121,7 +121,7 @@
|
||||
<div id="fontItalic" class="buttonOn" title="Italic Style">
|
||||
<img src="images/font-italic.png"/>
|
||||
</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"/>
|
||||
</div>
|
||||
</div>
|
||||
@ -133,6 +133,26 @@
|
||||
</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>
|
||||
<script type="text/javascript" src="js/editor.js"></script>
|
||||
</body>
|
||||
|
||||
@ -42,8 +42,5 @@
|
||||
<topic position="410,-97" order="2" text="Anyplace, Anytime" id="9"/>
|
||||
<topic position="386,-73" order="3" text="Free!!!" id="10"/>
|
||||
</topic>
|
||||
<topic shape="image"
|
||||
image="163,80:images/logo-medium.png"
|
||||
prop="" order="9" position="-336,-100"/>
|
||||
</topic>
|
||||
</map>
|
||||
Loading…
Reference in New Issue
Block a user