mirror of
https://bitbucket.org/wisemapping/wisemapping-open-source.git
synced 2024-11-22 14:17:57 +01:00
Use FX class for delete node events.
This commit is contained in:
parent
eb15952785
commit
ae9f05dd05
@ -140,57 +140,6 @@ core.Utils.calculateDefaultControlPoints = function(srcPos, tarPos) {
|
||||
return [new core.Point(-srcPos.x + x1, -srcPos.y + y1),new core.Point(-tarPos.x + x2, -tarPos.y + y2)];
|
||||
};
|
||||
|
||||
core.Utils.setVisibilityAnimated = function(elems, isVisible, doneFn) {
|
||||
core.Utils.animateVisibility(elems, isVisible, doneFn);
|
||||
};
|
||||
|
||||
core.Utils.setChildrenVisibilityAnimated = function(rootElem, isVisible) {
|
||||
var children = core.Utils.flattenTopicChildElements(rootElem);
|
||||
core.Utils.animateVisibility(children, isVisible);
|
||||
};
|
||||
|
||||
core.Utils.animateVisibility = function (elems, isVisible, doneFn) {
|
||||
var _fadeEffect = null;
|
||||
var _opacity = (isVisible ? 0 : 1);
|
||||
if (isVisible) {
|
||||
elems.forEach(function(child) {
|
||||
if ($defined(child)) {
|
||||
child.setOpacity(_opacity);
|
||||
child.setVisibility(isVisible ? "visible" : "hidden");
|
||||
}
|
||||
});
|
||||
}
|
||||
var fadeEffect = function() {
|
||||
var step = 10;
|
||||
if ((_opacity <= 0 && !isVisible) || (_opacity >= 1 && isVisible)) {
|
||||
$clear(_fadeEffect);
|
||||
_fadeEffect = null;
|
||||
elems.forEach(function(child) {
|
||||
if ($defined(child)) {
|
||||
child.setVisibility(isVisible ? "visible" : "hidden");
|
||||
}
|
||||
|
||||
});
|
||||
if ($defined(doneFn))
|
||||
doneFn.attempt();
|
||||
}
|
||||
else {
|
||||
var fix = 1;
|
||||
if (isVisible) {
|
||||
fix = -1;
|
||||
}
|
||||
_opacity -= (1 / step) * fix;
|
||||
elems.forEach(function(child) {
|
||||
if ($defined(child)) {
|
||||
child.setOpacity(_opacity);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
_fadeEffect = fadeEffect.periodical(10);
|
||||
};
|
||||
|
||||
core.Utils.animatePosition = function (elems, doneFn, designer) {
|
||||
var _moveEffect = null;
|
||||
var i = 10;
|
||||
@ -231,22 +180,3 @@ core.Utils.animatePosition = function (elems, doneFn, designer) {
|
||||
};
|
||||
_moveEffect = moveEffect.periodical(10);
|
||||
};
|
||||
|
||||
core.Utils.flattenTopicChildElements = function(topic) {
|
||||
var result = [];
|
||||
|
||||
var children = topic.getChildren();
|
||||
for (var i = 0; i < children.length; i++) {
|
||||
|
||||
var child = children[i];
|
||||
result.push(child);
|
||||
result.push(child.getOutgoingLine());
|
||||
|
||||
var relationships = child.getRelationships();
|
||||
result = result.concat(relationships);
|
||||
|
||||
var innerChilds = core.Utils.flattenTopicChildElements(child);
|
||||
result = result.concat(innerChilds);
|
||||
}
|
||||
return result;
|
||||
};
|
@ -81,6 +81,7 @@
|
||||
<!--<filelist dir="${basedir}/src/main/javascript/" files="RichTextEditor.js"/>-->
|
||||
<filelist dir="${basedir}/src/main/javascript/" files="TextEditorFactory.js"/>
|
||||
<filelist dir="${basedir}/src/main/javascript/" files="util/Shape.js"/>
|
||||
<filelist dir="${basedir}/src/main/javascript/" files="util/FadeEffect.js"/>
|
||||
<filelist dir="${basedir}/src/main/javascript/"
|
||||
files="persistence/ModelCodeName.js"/>
|
||||
<filelist dir="${basedir}/src/main/javascript/"
|
||||
|
@ -260,8 +260,7 @@ mindplot.CommandContext = new Class({
|
||||
|
||||
createTopic:function(model, isVisible) {
|
||||
$assert(model, "model can not be null");
|
||||
var result = this._designer._nodeModelToNodeGraph(model, isVisible);
|
||||
return result;
|
||||
return this._designer._nodeModelToNodeGraph(model, isVisible);
|
||||
},
|
||||
|
||||
createModel:function() {
|
||||
|
@ -625,12 +625,19 @@ mindplot.Topic = new Class({
|
||||
model.setChildrenShrunken(value);
|
||||
|
||||
// Change render base on the state.
|
||||
|
||||
var shrinkConnector = this.getShrinkConnector();
|
||||
shrinkConnector.changeRender(value);
|
||||
|
||||
// Hide children ...
|
||||
core.Utils.setChildrenVisibilityAnimated(this, !value);
|
||||
mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.NodeShrinkEvent, this.getModel());
|
||||
// Do some fancy animation ....
|
||||
var elements = this._flatten2DElements(this);
|
||||
var fade = new mindplot.util.FadeEffect(elements, !value);
|
||||
fade.addEvent('complete', function() {
|
||||
|
||||
});
|
||||
fade.start();
|
||||
mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.NodeShrinkEvent, model);
|
||||
|
||||
},
|
||||
|
||||
getShrinkConnector : function() {
|
||||
@ -1160,6 +1167,25 @@ mindplot.Topic = new Class({
|
||||
this.setSize(size);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_flatten2DElements : function(topic) {
|
||||
var result = [];
|
||||
|
||||
var children = topic.getChildren();
|
||||
for (var i = 0; i < children.length; i++) {
|
||||
|
||||
var child = children[i];
|
||||
result.push(child);
|
||||
result.push(child.getOutgoingLine());
|
||||
|
||||
var relationships = child.getRelationships();
|
||||
result = result.concat(relationships);
|
||||
|
||||
var innerChilds = core.Utils.flattenTopicChildElements(child);
|
||||
result = result.concat(innerChilds);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
});
|
||||
|
@ -16,55 +16,41 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
mindplot.commands.AddTopicCommand = new Class(
|
||||
{
|
||||
mindplot.commands.AddTopicCommand = new Class({
|
||||
Extends:mindplot.Command,
|
||||
initialize: function(model, parentTopicId, animated) {
|
||||
initialize: function(model, parentTopicId) {
|
||||
$assert(model, 'Model can not be null');
|
||||
|
||||
this.parent();
|
||||
this._model = model;
|
||||
this._parentId = parentTopicId;
|
||||
this._id = mindplot.Command._nextUUID();
|
||||
this._animated = $defined(animated) ? animated : false;
|
||||
},
|
||||
|
||||
execute: function(commandContext) {
|
||||
|
||||
// Add a new topic ...
|
||||
var topic = commandContext.createTopic(this._model, !this._animated);
|
||||
var topic = commandContext.createTopic(this._model, false);
|
||||
|
||||
// Connect to topic ...
|
||||
if ($defined(this._parentId)) {
|
||||
var parentTopic = commandContext.findTopics(this._parentId)[0];
|
||||
commandContext.connect(topic, parentTopic, !this._animated);
|
||||
commandContext.connect(topic, parentTopic);
|
||||
}
|
||||
|
||||
var doneFn = function() {
|
||||
// Finally, focus ...
|
||||
var designer = commandContext._designer;
|
||||
var fade = new mindplot.util.FadeEffect([topic,topic.getOutgoingLine()], true);
|
||||
fade.addEvent('complete', function() {
|
||||
designer.onObjectFocusEvent(topic);
|
||||
topic.setOnFocus(true);
|
||||
};
|
||||
|
||||
if (this._animated) {
|
||||
core.Utils.setVisibilityAnimated([topic,topic.getOutgoingLine()], true, doneFn);
|
||||
} else {
|
||||
doneFn.attempt();
|
||||
}
|
||||
});
|
||||
fade.start();
|
||||
},
|
||||
|
||||
undoExecute: function(commandContext) {
|
||||
// Finally, delete the topic from the workspace ...
|
||||
var topicId = this._model.getId();
|
||||
var topic = commandContext.findTopics(topicId)[0];
|
||||
var doneFn = function() {
|
||||
commandContext.deleteTopic(topic);
|
||||
};
|
||||
if (this._animated) {
|
||||
core.Utils.setVisibilityAnimated([topic,topic.getOutgoingLine()], false, doneFn);
|
||||
}
|
||||
else
|
||||
doneFn.attempt();
|
||||
}
|
||||
});
|
||||
});
|
@ -73,7 +73,7 @@ mindplot.layout.EventBusDispatcher = new Class({
|
||||
// (function() {
|
||||
this._layoutManager.layout(true);
|
||||
// console.log("---------");
|
||||
this._layoutManager.dump();
|
||||
// this._layoutManager.dump();
|
||||
// console.log("---------");
|
||||
// console.log("---------");
|
||||
// }).delay(0, this);
|
||||
|
50
mindplot/src/main/javascript/util/FadeEffect.js
Normal file
50
mindplot/src/main/javascript/util/FadeEffect.js
Normal file
@ -0,0 +1,50 @@
|
||||
/*
|
||||
* 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.util.FadeEffect = new Class({
|
||||
Extends: Fx,
|
||||
initialize: function(elements, isVisible) {
|
||||
this.parent({duration:3000,frames:15,transition:'linear'});
|
||||
this._isVisible = isVisible;
|
||||
this._element = elements;
|
||||
|
||||
|
||||
this.addEvent('complete', function() {
|
||||
this._element.forEach(function(elem) {
|
||||
if(elem){
|
||||
elem.setVisibility(isVisible);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
start: function(){
|
||||
this.parent(this._isVisible ? 0 : 1, this._isVisible ? 1 : 0);
|
||||
},
|
||||
|
||||
set: function(now) {
|
||||
this._element.forEach(function(elem) {
|
||||
if(elem){
|
||||
elem.setOpacity(now);
|
||||
}
|
||||
});
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
@ -123,5 +123,10 @@ web2d.Group = new Class({
|
||||
}
|
||||
|
||||
this._peer._native.appendChild(DomElement);
|
||||
},
|
||||
|
||||
setOpacity:function(value){
|
||||
this._peer.setOpacity(value);
|
||||
}
|
||||
|
||||
});
|
@ -73,6 +73,10 @@ web2d.peer.svg.GroupPeer = new Class({
|
||||
this._native.setAttribute("transform", "translate(" + cx + "," + cy + ") scale(" + sx + "," + sy + ")");
|
||||
},
|
||||
|
||||
setOpacity : function(value) {
|
||||
this._native.setAttribute("opacity", value);
|
||||
},
|
||||
|
||||
setCoordOrigin : function(x, y) {
|
||||
var change = x != this._coordOrigin.x || y != this._coordOrigin.y;
|
||||
if ($defined(x)) {
|
||||
|
@ -4,7 +4,8 @@
|
||||
<head>
|
||||
<base href="../">
|
||||
<title>WiseMapping - Editor </title>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
|
||||
<meta http-equiv="Content-type" content="text/html; char
|
||||
set=UTF-8"/>
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
@ -133,26 +134,25 @@
|
||||
</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>
|
||||
<!--<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();
|
||||
<!--<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.addDraggedNode(event, options);-->
|
||||
<!--});-->
|
||||
<!--</script>-->
|
||||
|
||||
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.addDraggedNode(event, options);
|
||||
});
|
||||
</script>
|
||||
-->
|
||||
<div id="mindplot"></div>
|
||||
<script type="text/javascript" src="js/editor.js"></script>
|
||||
</body>
|
||||
|
Loading…
Reference in New Issue
Block a user