mirror of
https://bitbucket.org/wisemapping/wisemapping-open-source.git
synced 2024-11-21 21:57:56 +01:00
Adding Chrome, Safari and IE9 support
This commit is contained in:
Pablo Luna
parent
2efa40c664
commit
5b997de415
@ -24,6 +24,9 @@ core.UserAgent = {
|
||||
if (!core.Utils.isDefined())
|
||||
{
|
||||
this._isVMLSupported = navigator.appVersion.match(/MSIE (\d\.\d)/);
|
||||
if(this._isVMLSupported == null || parseInt(this._isVMLSupported[1])>=9){
|
||||
this._isVMLSupported = false;
|
||||
}
|
||||
}
|
||||
return this._isVMLSupported;
|
||||
},
|
||||
@ -75,6 +78,11 @@ core.UserAgent = {
|
||||
subString: "Apple",
|
||||
identity: "Safari"
|
||||
},
|
||||
{
|
||||
string: navigator.vendor,
|
||||
subString: "Google Inc.",
|
||||
identity: "Chrome"
|
||||
},
|
||||
{
|
||||
prop: window.opera,
|
||||
identity: "Opera"
|
||||
|
||||
@ -101,6 +101,9 @@ core.Utils.getMousePosition = function(event)
|
||||
throw "Could not obtain mouse position";
|
||||
}
|
||||
}
|
||||
if(core.Utils.isDefined(event.$extended)){
|
||||
event = event.event;
|
||||
}
|
||||
if (typeof( event.pageX ) == 'number') {
|
||||
//most browsers
|
||||
xcoord = event.pageX;
|
||||
|
||||
@ -21,9 +21,7 @@ mindplot.DragManager = function(workspace)
|
||||
{
|
||||
this._workspace = workspace;
|
||||
this._listeners = {};
|
||||
this._processMouseMoveEvent = true;
|
||||
var dragManager = this;
|
||||
this._precitionUpdater = null;
|
||||
};
|
||||
|
||||
mindplot.DragManager.prototype.add = function(node)
|
||||
@ -44,19 +42,14 @@ mindplot.DragManager.prototype.add = function(node)
|
||||
var dragNode = node.createDragNode();
|
||||
var mousePos = screen.getWorkspaceMousePosition(event);
|
||||
dragNode.setPosition(mousePos.x, mousePos.y);
|
||||
var periodicalFunction = function() {
|
||||
dragManager._processMouseMoveEvent = true;
|
||||
};
|
||||
// Start precision timer updater ...
|
||||
dragManager._precitionUpdater = periodicalFunction.periodical(mindplot.DragManager.DRAG_PRECISION_IN_SEG);
|
||||
|
||||
// Register mouse move listener ...
|
||||
var mouseMoveListener = dragManager._buildMouseMoveListener(workspace, dragNode, dragManager);
|
||||
workspace.addEventListener('mousemove', mouseMoveListener);
|
||||
screen.addEventListener('mousemove', mouseMoveListener);
|
||||
|
||||
// Register mouse up listeners ...
|
||||
var mouseUpListener = dragManager._buildMouseUpListener(workspace, node, dragNode, dragManager);
|
||||
workspace.addEventListener('mouseup', mouseUpListener);
|
||||
screen.addEventListener('mouseup', mouseUpListener);
|
||||
|
||||
// Execute Listeners ..
|
||||
var startDragListener = dragManager._listeners['startdragging'];
|
||||
@ -92,10 +85,7 @@ mindplot.DragManager.prototype._buildMouseMoveListener = function(workspace, dra
|
||||
{
|
||||
var screen = workspace.getScreenManager();
|
||||
var result = function(event) {
|
||||
if (dragManager._processMouseMoveEvent)
|
||||
{
|
||||
// Disable mouse move rendering ...
|
||||
dragManager._processMouseMoveEvent = false;
|
||||
|
||||
if (!dragNode._isInTheWorkspace)
|
||||
{
|
||||
// Add shadow node to the workspace.
|
||||
@ -112,8 +102,9 @@ mindplot.DragManager.prototype._buildMouseMoveListener = function(workspace, dra
|
||||
{
|
||||
dragListener(event, dragNode);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
event.preventDefault();
|
||||
}.bindWithEvent(this);
|
||||
dragManager._mouseMoveListener = result;
|
||||
return result;
|
||||
};
|
||||
@ -133,8 +124,8 @@ mindplot.DragManager.prototype._buildMouseUpListener = function(workspace, node,
|
||||
}
|
||||
|
||||
// Remove all the events.
|
||||
workspace.removeEventListener('mousemove', dragManager._mouseMoveListener);
|
||||
workspace.removeEventListener('mouseup', dragManager._mouseUpListener);
|
||||
screen.removeEventListener('mousemove', dragManager._mouseMoveListener);
|
||||
screen.removeEventListener('mouseup', dragManager._mouseUpListener);
|
||||
|
||||
// Help GC
|
||||
dragManager._mouseMoveListener = null;
|
||||
@ -149,10 +140,6 @@ mindplot.DragManager.prototype._buildMouseUpListener = function(workspace, node,
|
||||
dragNode._isInTheWorkspace = false;
|
||||
}
|
||||
|
||||
// Stop presition updater listener ...
|
||||
$clear(dragManager._precitionUpdater);
|
||||
dragManager._precitionUpdater = null;
|
||||
|
||||
// Change the cursor to the default.
|
||||
window.document.body.style.cursor = 'default';
|
||||
|
||||
|
||||
@ -159,17 +159,16 @@ mindplot.MindmapDesigner.prototype._registerEvents = function()
|
||||
|
||||
if (!this._viewMode)
|
||||
{
|
||||
|
||||
// Initialize workspace event listeners.
|
||||
// Create nodes on double click...
|
||||
workspace.addEventListener('click', function(event)
|
||||
screenManager.addEventListener('click', function(event)
|
||||
{
|
||||
mindmapDesigner.getEditor().lostFocus();
|
||||
// @todo: Puaj hack...
|
||||
mindmapDesigner._cleanScreen();
|
||||
});
|
||||
|
||||
workspace.addEventListener('dblclick', function(event)
|
||||
screenManager.addEventListener('dblclick', function(event)
|
||||
{
|
||||
mindmapDesigner.getEditor().lostFocus();
|
||||
// Get mouse position
|
||||
|
||||
@ -29,6 +29,14 @@ mindplot.ScreenManager.prototype.setScale = function(scale)
|
||||
this._workspaceScale = scale;
|
||||
};
|
||||
|
||||
mindplot.ScreenManager.prototype.addEventListener=function(event, listener){
|
||||
$(this._divContainer).addListener(event, listener);
|
||||
};
|
||||
|
||||
mindplot.ScreenManager.prototype.removeEventListener=function(event, listener){
|
||||
$(this._divContainer).removeListener(event, listener);
|
||||
};
|
||||
|
||||
mindplot.ScreenManager.prototype.getWorkspaceElementPosition = function(e)
|
||||
{
|
||||
// Retrive current element position.
|
||||
|
||||
@ -182,18 +182,9 @@ mindplot.Workspace.prototype._registerDragEvents = function()
|
||||
|
||||
var mouseDownPosition = screenManager.getWorkspaceMousePosition(event);
|
||||
var originalCoordOrigin = workspace.getCoordOrigin();
|
||||
var periodicalFunction = function() {
|
||||
mWorkspace._processMouseMoveEvent = true;
|
||||
};
|
||||
// Start precision timer updater ...
|
||||
mWorkspace._precitionUpdater = periodicalFunction.periodical(mindplot.Workspace.DRAG_PRECISION_IN_SEG);
|
||||
|
||||
workspace.mouseMoveListener = function(event)
|
||||
{
|
||||
if (mWorkspace._processMouseMoveEvent)
|
||||
{
|
||||
// Disable mouse move rendering ...
|
||||
mWorkspace._processMouseMoveEvent = false;
|
||||
|
||||
var currentMousePosition = screenManager.getWorkspaceMousePosition(event);
|
||||
|
||||
@ -213,19 +204,16 @@ mindplot.Workspace.prototype._registerDragEvents = function()
|
||||
{
|
||||
window.document.body.style.cursor = "move";
|
||||
}
|
||||
}
|
||||
};
|
||||
workspace.addEventListener('mousemove', workspace.mouseMoveListener);
|
||||
event.preventDefault();
|
||||
}.bindWithEvent(this);
|
||||
screenManager.addEventListener('mousemove', workspace.mouseMoveListener);
|
||||
|
||||
// Register mouse up listeners ...
|
||||
workspace.mouseUpListener = function(event)
|
||||
{
|
||||
// Stop presition updater listener ...
|
||||
$clear(mWorkspace._precitionUpdater);
|
||||
mWorkspace._precitionUpdater = null;
|
||||
|
||||
workspace.removeEventListener('mousemove', workspace.mouseMoveListener);
|
||||
workspace.removeEventListener('mouseup', workspace.mouseUpListener);
|
||||
screenManager.removeEventListener('mousemove', workspace.mouseMoveListener);
|
||||
screenManager.removeEventListener('mouseup', workspace.mouseUpListener);
|
||||
workspace.mouseUpListener = null;
|
||||
workspace.mouseMoveListener = null;
|
||||
window.document.body.style.cursor = 'default';
|
||||
@ -235,7 +223,7 @@ mindplot.Workspace.prototype._registerDragEvents = function()
|
||||
screenManager.setOffset(coordOrigin.x, coordOrigin.y);
|
||||
mWorkspace.enableWorkspaceEvents(true);
|
||||
};
|
||||
workspace.addEventListener('mouseup', workspace.mouseUpListener);
|
||||
screenManager.addEventListener('mouseup', workspace.mouseUpListener);
|
||||
}
|
||||
} else
|
||||
{
|
||||
@ -243,7 +231,6 @@ mindplot.Workspace.prototype._registerDragEvents = function()
|
||||
}
|
||||
};
|
||||
|
||||
workspace.addEventListener('mousedown', mouseDownListener);
|
||||
screenManager.addEventListener('mousedown', mouseDownListener);
|
||||
};
|
||||
|
||||
mindplot.Workspace.DRAG_PRECISION_IN_SEG = 50;
|
||||
|
||||
@ -167,14 +167,16 @@ web2d.peer.svg.TextPeer.prototype.setSize = function (size)
|
||||
|
||||
web2d.peer.svg.TextPeer.prototype.getWidth = function ()
|
||||
{
|
||||
var width = parseInt(this._native.getComputedTextLength());
|
||||
var computedWidth = this._native.getBBox().width;
|
||||
var width = parseInt(computedWidth);
|
||||
width = width + this._font.getWidthMargin();
|
||||
return width;
|
||||
};
|
||||
|
||||
web2d.peer.svg.TextPeer.prototype.getHeight = function ()
|
||||
{
|
||||
return this._font.getGraphSize();
|
||||
var computedHeight = this._native.getBBox().height;
|
||||
return parseInt(computedHeight);
|
||||
};
|
||||
|
||||
web2d.peer.svg.TextPeer.prototype.getHtmlFontSize = function ()
|
||||
|
||||
@ -2,7 +2,62 @@
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<script type="text/javascript" src="web2dLibraryLoader.js"></script>
|
||||
<script type="text/javascript">
|
||||
web2d = {
|
||||
peer: {}
|
||||
};
|
||||
|
||||
web2d.peer =
|
||||
{
|
||||
svg: {},
|
||||
vml: {}
|
||||
};
|
||||
|
||||
web2d.peer.utils = {};
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="mootools.js"></script>
|
||||
<script type="text/javascript" src="../../../../../core-js/target/classes/core.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/EventDispatcher.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElementPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElementPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Element.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Workspace.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/WorkspacePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/WorkspacePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Toolkit.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Elipse.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElipsePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElipsePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Line.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/LinePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/LinePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/PolyLine.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/PolyLinePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/PolyLinePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Group.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/GroupPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/GroupPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Rect.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/RectPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/RectPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Text.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TextPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextBoxPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/utils/TransformUtils.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/utils/EventUtils.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Font.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/Font.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/Font.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TahomaFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TimesFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ArialFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/VerdanaFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TahomaFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TimesFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ArialFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/VerdanaFont.js"></script>
|
||||
<script type="text/javascript" src="utils.js"></script>
|
||||
<style type="text/css">
|
||||
.eventForm {
|
||||
@ -41,10 +96,95 @@
|
||||
return this._enable;
|
||||
};
|
||||
|
||||
function MultipleEventHandler(type, element)
|
||||
{
|
||||
this._listeners = [];
|
||||
this._type = type;
|
||||
this._element = element;
|
||||
}
|
||||
|
||||
MultipleEventHandler.prototype.registerOneListener = function()
|
||||
{
|
||||
var count = this._listeners.length;
|
||||
var listener = function(event) {
|
||||
alert("Listener #:" + count);
|
||||
};
|
||||
this._listeners.push(listener);
|
||||
this._element.addEventListener(this._type, listener);
|
||||
|
||||
}
|
||||
|
||||
MultipleEventHandler.prototype.listenerCount = function()
|
||||
{
|
||||
return this._listeners.length;
|
||||
}
|
||||
|
||||
MultipleEventHandler.prototype.unRegisterOneListener = function()
|
||||
{
|
||||
if (this._listeners.length > 0)
|
||||
{
|
||||
var listener = this._listeners.pop();
|
||||
this._element.removeEventListener(this._type, listener);
|
||||
}
|
||||
}
|
||||
|
||||
function initialize(){
|
||||
web2d.peer.Toolkit.init();
|
||||
|
||||
// Workspace with CoordOrigin(100,100);
|
||||
var workspace = new web2d.Workspace();
|
||||
workspace.setSize("150px", "150px");
|
||||
workspace.setCoordSize(150, 150);
|
||||
|
||||
var bigElipse = new web2d.Elipse();
|
||||
bigElipse.setSize(100, 100);
|
||||
bigElipse.setPosition(75, 75);
|
||||
workspace.appendChild(bigElipse);
|
||||
|
||||
var smallElipse = new web2d.Elipse();
|
||||
smallElipse.setSize(50, 50);
|
||||
smallElipse.setPosition(75, 75);
|
||||
smallElipse.setFill('red')
|
||||
workspace.appendChild(smallElipse);
|
||||
|
||||
wClickEventLogger = new EventLogger('click', workspace);
|
||||
wMouseoverEventLogger = new EventLogger('mouseover', workspace);
|
||||
wMouseoutEventLogger = new EventLogger('mouseout', workspace);
|
||||
wMousemoveEventLogger = new EventLogger('mousemove', workspace);
|
||||
wDblCickEventLogger = new EventLogger('dblclick', workspace);
|
||||
|
||||
esClickEventLogger = new EventLogger('click', smallElipse);
|
||||
esMouseoverEventLogger = new EventLogger('mouseover', smallElipse);
|
||||
esMouseoutEventLogger = new EventLogger('mouseout', smallElipse);
|
||||
esMousemoveEventLogger = new EventLogger('mousemove', smallElipse);
|
||||
esDblCickEventLogger = new EventLogger('dblclick', smallElipse);
|
||||
|
||||
ebClickEventLogger = new EventLogger('click', bigElipse);
|
||||
ebMouseoverEventLogger = new EventLogger('mouseover', bigElipse);
|
||||
ebMouseoutEventLogger = new EventLogger('mouseout', bigElipse);
|
||||
ebousemoveEventLogger = new EventLogger('mousemove', bigElipse);
|
||||
ebblCickEventLogger = new EventLogger('dblclick', bigElipse);
|
||||
|
||||
workspace.addItAsChildTo($("workspaceContainer"));
|
||||
|
||||
var mEventWorkspace = new web2d.Workspace();
|
||||
mEventWorkspace.setSize("150px", "150px");
|
||||
mEventWorkspace.setCoordSize(150, 150);
|
||||
|
||||
var elipse = new web2d.Elipse();
|
||||
elipse.setSize(100, 100);
|
||||
elipse.setPosition(75, 75);
|
||||
elipse.setFill('blue')
|
||||
mEventWorkspace.appendChild(elipse);
|
||||
|
||||
mEventWorkspace.addItAsChildTo($("workspaceMultipleEvents"));
|
||||
multipleHandler = new MultipleEventHandler('click', elipse);
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body onload="initialize();">
|
||||
|
||||
<script type="text/javascript">
|
||||
// Logger.setEnabled(true);
|
||||
@ -150,46 +290,6 @@
|
||||
</td>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
web2d.peer.Toolkit.init();
|
||||
|
||||
// Workspace with CoordOrigin(100,100);
|
||||
var workspace = new web2d.Workspace();
|
||||
workspace.setSize("150px", "150px");
|
||||
workspace.setCoordSize(150, 150);
|
||||
|
||||
var bigElipse = new web2d.Elipse();
|
||||
bigElipse.setSize(100, 100);
|
||||
bigElipse.setPosition(75, 75);
|
||||
workspace.appendChild(bigElipse);
|
||||
|
||||
var smallElipse = new web2d.Elipse();
|
||||
smallElipse.setSize(50, 50);
|
||||
smallElipse.setPosition(75, 75);
|
||||
smallElipse.setFill('red')
|
||||
workspace.appendChild(smallElipse);
|
||||
|
||||
wClickEventLogger = new EventLogger('click', workspace);
|
||||
wMouseoverEventLogger = new EventLogger('mouseover', workspace);
|
||||
wMouseoutEventLogger = new EventLogger('mouseout', workspace);
|
||||
wMousemoveEventLogger = new EventLogger('mousemove', workspace);
|
||||
wDblCickEventLogger = new EventLogger('dblclick', workspace);
|
||||
|
||||
esClickEventLogger = new EventLogger('click', smallElipse);
|
||||
esMouseoverEventLogger = new EventLogger('mouseover', smallElipse);
|
||||
esMouseoutEventLogger = new EventLogger('mouseout', smallElipse);
|
||||
esMousemoveEventLogger = new EventLogger('mousemove', smallElipse);
|
||||
esDblCickEventLogger = new EventLogger('dblclick', smallElipse);
|
||||
|
||||
ebClickEventLogger = new EventLogger('click', bigElipse);
|
||||
ebMouseoverEventLogger = new EventLogger('mouseover', bigElipse);
|
||||
ebMouseoutEventLogger = new EventLogger('mouseout', bigElipse);
|
||||
ebousemoveEventLogger = new EventLogger('mousemove', bigElipse);
|
||||
ebblCickEventLogger = new EventLogger('dblclick', bigElipse);
|
||||
|
||||
workspace.addItAsChildTo($("workspaceContainer"));
|
||||
|
||||
</script>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Multiple listeners can be attached to an element to handle an event type.
|
||||
@ -215,53 +315,6 @@
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
function MultipleEventHandler(type, element)
|
||||
{
|
||||
this._listeners = [];
|
||||
this._type = type;
|
||||
this._element = element;
|
||||
}
|
||||
|
||||
MultipleEventHandler.prototype.registerOneListener = function()
|
||||
{
|
||||
var count = this._listeners.length;
|
||||
var listener = function(event) {
|
||||
alert("Listener #:" + count);
|
||||
};
|
||||
this._listeners.push(listener);
|
||||
this._element.addEventListener(this._type, listener);
|
||||
|
||||
}
|
||||
|
||||
MultipleEventHandler.prototype.listenerCount = function()
|
||||
{
|
||||
return this._listeners.length;
|
||||
}
|
||||
|
||||
MultipleEventHandler.prototype.unRegisterOneListener = function()
|
||||
{
|
||||
if (this._listeners.length > 0)
|
||||
{
|
||||
var listener = this._listeners.pop();
|
||||
this._element.removeEventListener(this._type, listener);
|
||||
}
|
||||
}
|
||||
|
||||
var mEventWorkspace = new web2d.Workspace();
|
||||
mEventWorkspace.setSize("150px", "150px");
|
||||
mEventWorkspace.setCoordSize(150, 150);
|
||||
|
||||
var elipse = new web2d.Elipse();
|
||||
elipse.setSize(100, 100);
|
||||
elipse.setPosition(75, 75);
|
||||
elipse.setFill('blue')
|
||||
mEventWorkspace.appendChild(elipse);
|
||||
|
||||
mEventWorkspace.addItAsChildTo($("workspaceMultipleEvents"));
|
||||
multipleHandler = new MultipleEventHandler('click', elipse);
|
||||
|
||||
</script>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@ -2,31 +2,65 @@
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<script type="text/javascript" src="web2dLibraryLoader.js"></script>
|
||||
<script type="text/javascript" src="utils.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Group Render Tests.</h1>
|
||||
<table border="1">
|
||||
<colgroup style="width:80%;">
|
||||
<col style="width:50%"/>
|
||||
<col style="width:50%"/>
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td>
|
||||
A group object can be used to collect shapes. In this example,
|
||||
There is a group that contains an elipse and two lines as children.
|
||||
Changing the group position also change the position of all contained
|
||||
elements.
|
||||
</td>
|
||||
<td>
|
||||
<div id="groupBasicContainer"/>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<script type="text/javascript">
|
||||
web2d = {
|
||||
peer: {}
|
||||
};
|
||||
|
||||
web2d.peer =
|
||||
{
|
||||
svg: {},
|
||||
vml: {}
|
||||
};
|
||||
|
||||
web2d.peer.utils = {};
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="mootools.js"></script>
|
||||
<script type="text/javascript" src="../../../../../core-js/target/classes/core.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/EventDispatcher.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElementPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElementPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Element.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Workspace.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/WorkspacePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/WorkspacePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Toolkit.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Elipse.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElipsePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElipsePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Line.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/LinePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/LinePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/PolyLine.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/PolyLinePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/PolyLinePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Group.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/GroupPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/GroupPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Rect.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/RectPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/RectPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Text.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TextPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextBoxPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/utils/TransformUtils.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/utils/EventUtils.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Font.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/Font.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/Font.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TahomaFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TimesFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ArialFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/VerdanaFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TahomaFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TimesFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ArialFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/VerdanaFont.js"></script>
|
||||
<script type="text/javascript" src="utils.js"></script>
|
||||
<script type="text/javascript">
|
||||
function initialize(){
|
||||
web2d.peer.Toolkit.init();
|
||||
|
||||
var basicTest = function()
|
||||
@ -91,20 +125,7 @@
|
||||
executer.periodical(100);
|
||||
};
|
||||
basicTest();
|
||||
</script>
|
||||
<!-- ************************************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
Following the bubbling event pattern, all the events over a shape are propageted to its
|
||||
parent. In this example, both elipse objects are child of a group element and click event listeners
|
||||
have been added to the elipse and the group.
|
||||
</td>
|
||||
<td>
|
||||
<div id="groupEventsContainer"/>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<script type="text/javascript">
|
||||
|
||||
var eventTest = function()
|
||||
{
|
||||
@ -136,36 +157,8 @@
|
||||
workspace.addItAsChildTo($("groupEventsContainer"));
|
||||
}
|
||||
eventTest();
|
||||
</script>
|
||||
<!-- ************************************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
Groups can be nested as a regular shape. An important property of the groups is the ability
|
||||
to define their own coordSize, coorOrigin and size. In this example, both shapes have been
|
||||
created with the same properties. The red one has been added as a child element of a group with the
|
||||
following properties:<br/>
|
||||
<br/>
|
||||
Size(50,50);<br/>
|
||||
Position(25,25);<br/>
|
||||
CoordSize(100,100);<br/>
|
||||
CoordOrigin(0,0)<br/>
|
||||
|
||||
The blue one has been added as a child of another group with the following properties::<br/>
|
||||
<br/>
|
||||
Size(50,50);<br/>
|
||||
Position(25,25);<br/>
|
||||
CoordSize(100,100);<br/>
|
||||
CoordOrigin(0,0);<br/>
|
||||
<br/>
|
||||
Finally, the second group has been added as a child of the first declared group.
|
||||
</td>
|
||||
<td>
|
||||
<div id="groupNestedContainer"/>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<script type="text/javascript">
|
||||
var eventTest = function()
|
||||
{
|
||||
var workspace = new web2d.Workspace();
|
||||
@ -224,38 +217,8 @@
|
||||
workspace.addItAsChildTo($("groupNestedContainer"));
|
||||
};
|
||||
eventTest();
|
||||
</script>
|
||||
|
||||
<!-- ************************************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
Group coordsize defines how many units there are along the width of the containing block.
|
||||
In all the examples, the coordsize of the workspaces have been set to (100,100) and the circles have been
|
||||
positioned
|
||||
at (0,0),(0,100),(100,0),(100,100)(50,50).<br/>
|
||||
<br/>
|
||||
1) Group with CoordSize(100,100)<br/>
|
||||
2) Group with CoordSize(100,200)<br/>
|
||||
3) Group with CoordSize(200,100)<br/>
|
||||
</td>
|
||||
<td>
|
||||
<div style="position:relative;width:100%;">
|
||||
<div id="coordsizeExample100x100" style="float:left;margin:20px;">
|
||||
(1)
|
||||
</div>
|
||||
|
||||
<div id="coordsizeExample100x200" style="float:left;margin:20px;">
|
||||
(2)
|
||||
</div>
|
||||
|
||||
<div id="coordsizeExample200x100" style="float:left;margin:20px;">
|
||||
(3)
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<script type="text/javascript">
|
||||
var workspaceCoordSizeSample = function()
|
||||
{
|
||||
|
||||
@ -296,37 +259,8 @@
|
||||
sample200x100.addItAsChildTo($("coordsizeExample200x100"));
|
||||
};
|
||||
workspaceCoordSizeSample();
|
||||
</script>
|
||||
|
||||
<!-- ************************************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
Group coordorigin defines the coordinate at the top left corner of the containing block.
|
||||
In all the examples,the coordsize of the groups have been set to (100,100) and the circles have been positioned
|
||||
at (0,0),(0,100),(100,0),(100,100)(50,50). <br/>
|
||||
<br/>
|
||||
1) Group with CoordOrigin(0,0)<br/>
|
||||
2) Group with CoordOrigin(0,50)<br/>
|
||||
3) Group with CoordOrigin(50,0)<br/>
|
||||
</td>
|
||||
<td>
|
||||
<div style="position:relative;width:100%;">
|
||||
<div id="coordOriginExample0x0" style="float:left;margin:20px;">
|
||||
(1)
|
||||
</div>
|
||||
|
||||
<div id="coordOriginExample0x50" style="float:left;margin:20px;">
|
||||
(2)
|
||||
</div>
|
||||
|
||||
<div id="coordOriginExample50x0" style="float:left;margin:20px;">
|
||||
(3)
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<script type="text/javascript">
|
||||
var workspaceCoordOriginSample = function()
|
||||
{
|
||||
|
||||
@ -368,20 +302,9 @@
|
||||
sample200x100.addItAsChildTo($("coordOriginExample50x0"));
|
||||
}
|
||||
workspaceCoordOriginSample();
|
||||
</script>
|
||||
|
||||
<!-- ************************************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
Visibility can be used to hide an element and disable all the element events.
|
||||
In the case of a group, this property is applied to all the children elements.
|
||||
</td>
|
||||
<td>
|
||||
<div id="visibilityExample" style="float:left;margin:20px;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var groupVisibilitySample = function()
|
||||
{
|
||||
|
||||
@ -423,19 +346,7 @@
|
||||
|
||||
}
|
||||
groupVisibilitySample();
|
||||
</script>
|
||||
|
||||
<!-- ************************************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
Scale.
|
||||
</td>
|
||||
<td>
|
||||
<div id="scaleStrokeExample" style="float:left;margin:20px;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<script type="text/javascript">
|
||||
var groupVisibilitySample = function()
|
||||
{
|
||||
|
||||
@ -473,7 +384,154 @@
|
||||
|
||||
}
|
||||
groupVisibilitySample();
|
||||
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="initialize();">
|
||||
|
||||
<h1>Group Render Tests.</h1>
|
||||
<table border="1">
|
||||
<colgroup style="width:80%;">
|
||||
<col style="width:50%"/>
|
||||
<col style="width:50%"/>
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td>
|
||||
A group object can be used to collect shapes. In this example,
|
||||
There is a group that contains an elipse and two lines as children.
|
||||
Changing the group position also change the position of all contained
|
||||
elements.
|
||||
</td>
|
||||
<td>
|
||||
<div id="groupBasicContainer"/>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<!-- ************************************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
Following the bubbling event pattern, all the events over a shape are propageted to its
|
||||
parent. In this example, both elipse objects are child of a group element and click event listeners
|
||||
have been added to the elipse and the group.
|
||||
</td>
|
||||
<td>
|
||||
<div id="groupEventsContainer"/>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<!-- ************************************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
Groups can be nested as a regular shape. An important property of the groups is the ability
|
||||
to define their own coordSize, coorOrigin and size. In this example, both shapes have been
|
||||
created with the same properties. The red one has been added as a child element of a group with the
|
||||
following properties:<br/>
|
||||
<br/>
|
||||
Size(50,50);<br/>
|
||||
Position(25,25);<br/>
|
||||
CoordSize(100,100);<br/>
|
||||
CoordOrigin(0,0)<br/>
|
||||
|
||||
The blue one has been added as a child of another group with the following properties::<br/>
|
||||
<br/>
|
||||
Size(50,50);<br/>
|
||||
Position(25,25);<br/>
|
||||
CoordSize(100,100);<br/>
|
||||
CoordOrigin(0,0);<br/>
|
||||
<br/>
|
||||
Finally, the second group has been added as a child of the first declared group.
|
||||
</td>
|
||||
<td>
|
||||
<div id="groupNestedContainer"/>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
|
||||
<!-- ************************************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
Group coordsize defines how many units there are along the width of the containing block.
|
||||
In all the examples, the coordsize of the workspaces have been set to (100,100) and the circles have been
|
||||
positioned
|
||||
at (0,0),(0,100),(100,0),(100,100)(50,50).<br/>
|
||||
<br/>
|
||||
1) Group with CoordSize(100,100)<br/>
|
||||
2) Group with CoordSize(100,200)<br/>
|
||||
3) Group with CoordSize(200,100)<br/>
|
||||
</td>
|
||||
<td>
|
||||
<div style="position:relative;width:100%;">
|
||||
<div id="coordsizeExample100x100" style="float:left;margin:20px;">
|
||||
(1)
|
||||
</div>
|
||||
|
||||
<div id="coordsizeExample100x200" style="float:left;margin:20px;">
|
||||
(2)
|
||||
</div>
|
||||
|
||||
<div id="coordsizeExample200x100" style="float:left;margin:20px;">
|
||||
(3)
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- ************************************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
Group coordorigin defines the coordinate at the top left corner of the containing block.
|
||||
In all the examples,the coordsize of the groups have been set to (100,100) and the circles have been positioned
|
||||
at (0,0),(0,100),(100,0),(100,100)(50,50). <br/>
|
||||
<br/>
|
||||
1) Group with CoordOrigin(0,0)<br/>
|
||||
2) Group with CoordOrigin(0,50)<br/>
|
||||
3) Group with CoordOrigin(50,0)<br/>
|
||||
</td>
|
||||
<td>
|
||||
<div style="position:relative;width:100%;">
|
||||
<div id="coordOriginExample0x0" style="float:left;margin:20px;">
|
||||
(1)
|
||||
</div>
|
||||
|
||||
<div id="coordOriginExample0x50" style="float:left;margin:20px;">
|
||||
(2)
|
||||
</div>
|
||||
|
||||
<div id="coordOriginExample50x0" style="float:left;margin:20px;">
|
||||
(3)
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
</script>
|
||||
|
||||
<!-- ************************************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
Visibility can be used to hide an element and disable all the element events.
|
||||
In the case of a group, this property is applied to all the children elements.
|
||||
</td>
|
||||
<td>
|
||||
<div id="visibilityExample" style="float:left;margin:20px;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- ************************************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
Scale.
|
||||
</td>
|
||||
<td>
|
||||
<div id="scaleStrokeExample" style="float:left;margin:20px;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</body>
|
||||
|
||||
@ -2,29 +2,65 @@
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<script type="text/javascript" src="web2dLibraryLoader.js"></script>
|
||||
<script type="text/javascript" src="utils.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Lines Render Tests </h1>
|
||||
|
||||
<table border="1">
|
||||
<colgroup style="width:80%;">
|
||||
<col style="width:30%"/>
|
||||
<col style="width:60%"/>
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td>
|
||||
Lines.
|
||||
</td>
|
||||
<td>
|
||||
<div id="strokeWidthSample"/>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<script type="text/javascript">
|
||||
web2d = {
|
||||
peer: {}
|
||||
};
|
||||
|
||||
web2d.peer =
|
||||
{
|
||||
svg: {},
|
||||
vml: {}
|
||||
};
|
||||
|
||||
web2d.peer.utils = {};
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="mootools.js"></script>
|
||||
<script type="text/javascript" src="../../../../../core-js/target/classes/core.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/EventDispatcher.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElementPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElementPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Element.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Workspace.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/WorkspacePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/WorkspacePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Toolkit.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Elipse.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElipsePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElipsePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Line.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/LinePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/LinePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/PolyLine.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/PolyLinePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/PolyLinePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Group.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/GroupPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/GroupPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Rect.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/RectPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/RectPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Text.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TextPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextBoxPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/utils/TransformUtils.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/utils/EventUtils.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Font.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/Font.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/Font.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TahomaFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TimesFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ArialFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/VerdanaFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TahomaFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TimesFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ArialFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/VerdanaFont.js"></script>
|
||||
<script type="text/javascript" src="utils.js"></script>
|
||||
<script type="text/javascript">
|
||||
function initialize(){
|
||||
web2d.peer.Toolkit.init();
|
||||
var workspaceAttributes = { width:'700px',height:'100px',coordSize:'350 50',fillColor:'#ffffcc'};
|
||||
var strokeWidthWorkspace = new web2d.Workspace(workspaceAttributes);
|
||||
@ -46,18 +82,7 @@
|
||||
strokeWidthWorkspace.appendChild(rect);
|
||||
|
||||
strokeWidthWorkspace.addItAsChildTo($("strokeWidthSample"));
|
||||
</script>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
Lines Opacity.
|
||||
</td>
|
||||
<td>
|
||||
<div id="strokeOpacitySample"/>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<script type="text/javascript">
|
||||
var strokeOpacityWorkspace = new web2d.Workspace(workspaceAttributes);
|
||||
for (var i = 0; i < 10; i++)
|
||||
{
|
||||
@ -70,19 +95,7 @@
|
||||
strokeOpacityWorkspace.appendChild(line);
|
||||
}
|
||||
strokeOpacityWorkspace.addItAsChildTo($("strokeOpacitySample"));
|
||||
</script>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
Line Styles.
|
||||
</td>
|
||||
<td>
|
||||
<div id="strokeStyleSample"/>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<script type="text/javascript">
|
||||
var strokeStyleWorkspace = new web2d.Workspace(workspaceAttributes);
|
||||
var styles = ['solid','dot','dash','dashdot','longdash'];
|
||||
for (var i = 0; i < styles.length; i++)
|
||||
@ -96,19 +109,7 @@
|
||||
strokeStyleWorkspace.appendChild(line);
|
||||
}
|
||||
strokeStyleWorkspace.addItAsChildTo($("strokeStyleSample"));
|
||||
</script>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
Line Arrows.
|
||||
</td>
|
||||
<td>
|
||||
<div id="strokeArrowSample"/>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<script type="text/javascript">
|
||||
var strokeArrowWorkspace = new web2d.Workspace(workspaceAttributes);
|
||||
var styles = ['none ','block ','classic','diamond ','oval','open','chevron','doublechevron'];
|
||||
for (var i = 0; i < styles.length; i++)
|
||||
@ -122,7 +123,58 @@
|
||||
strokeArrowWorkspace.appendChild(line);
|
||||
}
|
||||
strokeArrowWorkspace.addItAsChildTo($("strokeArrowSample"));
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="initialize();">
|
||||
|
||||
<h1>Lines Render Tests </h1>
|
||||
|
||||
<table border="1">
|
||||
<colgroup style="width:80%;">
|
||||
<col style="width:30%"/>
|
||||
<col style="width:60%"/>
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td>
|
||||
Lines.
|
||||
</td>
|
||||
<td>
|
||||
<div id="strokeWidthSample"/>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
Lines Opacity.
|
||||
</td>
|
||||
<td>
|
||||
<div id="strokeOpacitySample"/>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
Line Styles.
|
||||
</td>
|
||||
<td>
|
||||
<div id="strokeStyleSample"/>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
Line Arrows.
|
||||
</td>
|
||||
<td>
|
||||
<div id="strokeArrowSample"/>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</body>
|
||||
|
||||
@ -2,28 +2,65 @@
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<script type="text/javascript" src="web2dLibraryLoader.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>PolyLines Render Tests </h1>
|
||||
|
||||
<table border="1">
|
||||
<colgroup style="width:80%;">
|
||||
<col style="width:30%"/>
|
||||
<col style="width:60%"/>
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td>
|
||||
Different types of PolyLines that can be used.
|
||||
</td>
|
||||
<td>
|
||||
<div id="overflowExample"/>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<script type="text/javascript">
|
||||
web2d = {
|
||||
peer: {}
|
||||
};
|
||||
|
||||
web2d.peer =
|
||||
{
|
||||
svg: {},
|
||||
vml: {}
|
||||
};
|
||||
|
||||
web2d.peer.utils = {};
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="mootools.js"></script>
|
||||
<script type="text/javascript" src="../../../../../core-js/target/classes/core.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/EventDispatcher.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElementPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElementPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Element.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Workspace.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/WorkspacePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/WorkspacePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Toolkit.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Elipse.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElipsePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElipsePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Line.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/LinePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/LinePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/PolyLine.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/PolyLinePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/PolyLinePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Group.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/GroupPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/GroupPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Rect.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/RectPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/RectPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Text.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TextPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextBoxPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/utils/TransformUtils.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/utils/EventUtils.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Font.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/Font.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/Font.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TahomaFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TimesFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ArialFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/VerdanaFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TahomaFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TimesFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ArialFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/VerdanaFont.js"></script>
|
||||
<script type="text/javascript" src="utils.js"></script>
|
||||
<script type="text/javascript">
|
||||
function initialize(){
|
||||
web2d.peer.Toolkit.init();
|
||||
|
||||
var overflowWorkspace = new web2d.Workspace({fillColor:'green'});
|
||||
@ -107,17 +144,6 @@
|
||||
|
||||
overflowWorkspace.addItAsChildTo($("overflowExample"));
|
||||
|
||||
</script>
|
||||
<tr>
|
||||
<td>
|
||||
This is how multiple childs will look in each style line
|
||||
</td>
|
||||
<td>
|
||||
<div id="multipleLineExample"/>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<script type="text/javascript">
|
||||
|
||||
var overflowWorkspace = new web2d.Workspace();
|
||||
overflowWorkspace.setSize("100px", "100px");
|
||||
@ -166,9 +192,37 @@
|
||||
overflowWorkspace.appendChild(line1);
|
||||
|
||||
overflowWorkspace.addItAsChildTo($("multipleLineExample"));
|
||||
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="initialize();">
|
||||
|
||||
<h1>PolyLines Render Tests </h1>
|
||||
|
||||
<table border="1">
|
||||
<colgroup style="width:80%;">
|
||||
<col style="width:30%"/>
|
||||
<col style="width:60%"/>
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td>
|
||||
Different types of PolyLines that can be used.
|
||||
</td>
|
||||
<td>
|
||||
<div id="overflowExample"/>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
This is how multiple childs will look in each style line
|
||||
</td>
|
||||
<td>
|
||||
<div id="multipleLineExample"/>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -2,36 +2,90 @@
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<script type="text/javascript" src="web2dLibraryLoader.js"></script>
|
||||
<script type="text/javascript" src="utils.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Chart prototype Tests </h1>
|
||||
|
||||
<input type="button" value="Create Shape" name="Create Shape" onclick="createShape();"/>
|
||||
<input type="button" value="Zoom In" name="Create Shape" onclick="zoomIn();"/>
|
||||
<input type="button" value="Zoom Out" name="Create Shape" onclick="zoomOut();"/>
|
||||
|
||||
|
||||
<div id="divWorkspace" style="overflow:scroll;width:1020px;height:620px;position:relative;">
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
web2d = {
|
||||
peer: {}
|
||||
};
|
||||
|
||||
web2d.peer.Toolkit.init();
|
||||
web2d.peer =
|
||||
{
|
||||
svg: {},
|
||||
vml: {}
|
||||
};
|
||||
|
||||
web2d.peer.utils = {};
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="mootools.js"></script>
|
||||
<script type="text/javascript" src="../../../../../core-js/target/classes/core.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/EventDispatcher.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElementPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElementPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Element.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Workspace.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/WorkspacePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/WorkspacePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Toolkit.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Elipse.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElipsePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElipsePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Line.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/LinePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/LinePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/PolyLine.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/PolyLinePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/PolyLinePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Group.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/GroupPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/GroupPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Rect.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/RectPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/RectPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Text.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TextPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextBoxPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/utils/TransformUtils.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/utils/EventUtils.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Font.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/Font.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/Font.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TahomaFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TimesFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ArialFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/VerdanaFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TahomaFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TimesFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ArialFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/VerdanaFont.js"></script>
|
||||
<script type="text/javascript" src="utils.js"></script>
|
||||
<script type="text/javascript">
|
||||
var xScale = 1000;
|
||||
var yScale = 600;
|
||||
var shapeOrigX = 0;
|
||||
function initialize(){
|
||||
web2d.peer.Toolkit.init();
|
||||
|
||||
var workspace = new web2d.Workspace();
|
||||
workspace = new web2d.Workspace();
|
||||
workspace.setSize(xScale + "px", yScale + "px");
|
||||
workspace.setCoordSize(xScale, yScale);
|
||||
workspace.setCoordOrigin(0, 0);
|
||||
workspace.setFill("#f0f0f0");
|
||||
|
||||
|
||||
|
||||
|
||||
// Center Topic Rect ...
|
||||
centralRect = new web2d.Rect(0.3);
|
||||
centralRect.setSize(200, 60);
|
||||
centralRect.setPosition(300, 300);
|
||||
centralRect.setFill("#99ccff");
|
||||
centralRect.setStroke(1, 'solid', "#878b8f");
|
||||
workspace.appendChild(centralRect);
|
||||
|
||||
workspace.addItAsChildTo($("divWorkspace"));
|
||||
}
|
||||
|
||||
function zoomIn()
|
||||
{
|
||||
xScale = xScale / 2;
|
||||
@ -45,9 +99,6 @@ function zoomOut()
|
||||
yScale = yScale * 2;
|
||||
workspace.setSize(xScale + "px", yScale + "px");
|
||||
}
|
||||
|
||||
|
||||
var shapeOrigX = 0;
|
||||
function createShape()
|
||||
{
|
||||
// Secondary Idea...
|
||||
@ -148,16 +199,20 @@ function createShape()
|
||||
});
|
||||
|
||||
}
|
||||
// Center Topic Rect ...
|
||||
centralRect = new web2d.Rect(0.3);
|
||||
centralRect.setSize(200, 60);
|
||||
centralRect.setPosition(300, 300);
|
||||
centralRect.setFill("#99ccff");
|
||||
centralRect.setStroke(1, 'solid', "#878b8f");
|
||||
workspace.appendChild(centralRect);
|
||||
|
||||
workspace.addItAsChildTo($("divWorkspace"));
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="initialize();">
|
||||
|
||||
<h1>Chart prototype Tests </h1>
|
||||
|
||||
<input type="button" value="Create Shape" name="Create Shape" onclick="createShape();"/>
|
||||
<input type="button" value="Zoom In" name="Create Shape" onclick="zoomIn();"/>
|
||||
<input type="button" value="Zoom Out" name="Create Shape" onclick="zoomOut();"/>
|
||||
|
||||
|
||||
<div id="divWorkspace" style="overflow:scroll;width:1020px;height:620px;position:relative;">
|
||||
</div>
|
||||
|
||||
Notas:
|
||||
<li>El evento de mousemove se debe agregar al workspace.
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
|
||||
<script type="text/javascript">
|
||||
web2d = {
|
||||
peer: {}
|
||||
@ -58,30 +59,9 @@
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TimesFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ArialFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/VerdanaFont.js"></script>
|
||||
|
||||
<script type="text/javascript" src="utils.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<h1>Rect Render Tests </h1>
|
||||
|
||||
<table border="1">
|
||||
<colgroup style="width:80%;">
|
||||
<col style="width:10%"/>
|
||||
<col style="width:90%"/>
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td>
|
||||
Straight Lines.
|
||||
</td>
|
||||
<td>
|
||||
<div id="rectExample"/>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<script type="text/javascript">
|
||||
function initialize(){
|
||||
web2d.peer.Toolkit.init();
|
||||
|
||||
var rectExampleTest = function ()
|
||||
@ -98,19 +78,6 @@
|
||||
workspace.addItAsChildTo($("rectExample"));
|
||||
}
|
||||
rectExampleTest();
|
||||
</script>
|
||||
|
||||
<!-- ********************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
Straight Lines.
|
||||
</td>
|
||||
<td>
|
||||
<div id="roundRect" style="float:left;margin:10px"></div>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<script type="text/javascript">
|
||||
|
||||
var roundrectExampleTest = function ()
|
||||
{
|
||||
@ -142,7 +109,40 @@
|
||||
|
||||
}
|
||||
roundrectExampleTest();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="initialize();">
|
||||
|
||||
|
||||
<h1>Rect Render Tests </h1>
|
||||
|
||||
<table border="1">
|
||||
<colgroup style="width:80%;">
|
||||
<col style="width:10%"/>
|
||||
<col style="width:90%"/>
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td>
|
||||
Straight Lines.
|
||||
</td>
|
||||
<td>
|
||||
<div id="rectExample"></div>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<!-- ********************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
Straight Lines.
|
||||
</td>
|
||||
<td>
|
||||
<div id="roundRect" style="float:left;margin:10px"></div>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
|
||||
</table>
|
||||
|
||||
@ -59,34 +59,8 @@
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ArialFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/VerdanaFont.js"></script>
|
||||
<script type="text/javascript" src="utils.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
// Logger.setEnabled(true);
|
||||
</script>
|
||||
|
||||
|
||||
<h1>Element properties Tests </h1>
|
||||
|
||||
<table border="1">
|
||||
<colgroup style="width:80%;">
|
||||
<col style="width:10%"/>
|
||||
<col style="width:90%"/>
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td>
|
||||
Stroke Styles.
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<div id="strokeStyle"></div>
|
||||
<div id="strokeStyleGroup"></div>
|
||||
<div id="strokeStyleWidth"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<script type="text/javascript">
|
||||
function initialize(){
|
||||
web2d.peer.Toolkit.init();
|
||||
|
||||
var strokeStyleTest = function ()
|
||||
@ -136,7 +110,6 @@
|
||||
rect.setStroke(strokeWidth, 'dashdot', 'black');
|
||||
parent.appendChild(rect);
|
||||
}
|
||||
;
|
||||
|
||||
// Workspace with default scale ...
|
||||
var workspace = new web2d.Workspace();
|
||||
@ -165,54 +138,7 @@
|
||||
|
||||
};
|
||||
strokeStyleTest();
|
||||
</script>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
Stroke Width.
|
||||
</td>
|
||||
<td>
|
||||
<div id="strokeWidth"/>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<script type="text/javascript">
|
||||
var rectExampleTest = function ()
|
||||
{
|
||||
var workspace = new web2d.Workspace();
|
||||
workspace.setSize("500px", "100px");
|
||||
workspace.setCoordSize(500, 100);
|
||||
workspace.setCoordOrigin(0, 0);
|
||||
|
||||
var elipse = new web2d.Elipse();
|
||||
elipse.setSize(80, 80);
|
||||
elipse.setPosition(50, 50);
|
||||
elipse.setFill('yellow');
|
||||
elipse.setStroke(10, 'solid', 'black');
|
||||
workspace.appendChild(elipse);
|
||||
|
||||
var rect = new web2d.Rect();
|
||||
rect.setSize(80, 80);
|
||||
rect.setPosition(160, 10);
|
||||
rect.setFill('yellow');
|
||||
rect.setStroke(10, 'solid', 'black');
|
||||
workspace.appendChild(rect);
|
||||
|
||||
workspace.addItAsChildTo($("strokeWidth"));
|
||||
};
|
||||
rectExampleTest();
|
||||
</script>
|
||||
<!-- ************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
Stroke Opacity.
|
||||
</td>
|
||||
<td>
|
||||
<div id="strokeOpacity"/>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<script type="text/javascript">
|
||||
var strokeOpacityTest = function ()
|
||||
{
|
||||
var workspace = new web2d.Workspace();
|
||||
@ -248,18 +174,8 @@
|
||||
workspace.addItAsChildTo($("strokeOpacity"));
|
||||
};
|
||||
strokeOpacityTest();
|
||||
</script>
|
||||
<!-- ************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
Fill Opacity.
|
||||
</td>
|
||||
<td>
|
||||
<div id="fillOpacity"/>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<script type="text/javascript">
|
||||
|
||||
var fillOpacityTest = function ()
|
||||
{
|
||||
var workspace = new web2d.Workspace();
|
||||
@ -295,18 +211,8 @@
|
||||
workspace.addItAsChildTo($("fillOpacity"));
|
||||
};
|
||||
fillOpacityTest();
|
||||
</script>
|
||||
<!-- ************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
Opacity.
|
||||
</td>
|
||||
<td>
|
||||
<div id="opacity"/>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<script type="text/javascript">
|
||||
|
||||
var opacityTest = function ()
|
||||
{
|
||||
var workspace = new web2d.Workspace();
|
||||
@ -342,17 +248,8 @@
|
||||
workspace.addItAsChildTo($("opacity"));
|
||||
};
|
||||
opacityTest();
|
||||
</script>
|
||||
<tr>
|
||||
<td>
|
||||
Visibility.
|
||||
</td>
|
||||
<td>
|
||||
<div id="visibility"/>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<script type="text/javascript">
|
||||
|
||||
var visibilityTest = function ()
|
||||
{
|
||||
var workspace = new web2d.Workspace({fillColor:'yellow',strokeWidth:'2px'});
|
||||
@ -379,7 +276,80 @@
|
||||
workspace.addItAsChildTo($("visibility"));
|
||||
};
|
||||
visibilityTest();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="initialize();">
|
||||
|
||||
<h1>Element properties Tests </h1>
|
||||
|
||||
<table border="1">
|
||||
<colgroup style="width:80%;">
|
||||
<col style="width:10%"/>
|
||||
<col style="width:90%"/>
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td>
|
||||
Stroke Styles.
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<div id="strokeStyle"></div>
|
||||
<div id="strokeStyleGroup"></div>
|
||||
<div id="strokeStyleWidth"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
Stroke Width.
|
||||
</td>
|
||||
<td>
|
||||
<div id="strokeWidth"></div>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<!-- ************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
Stroke Opacity.
|
||||
</td>
|
||||
<td>
|
||||
<div id="strokeOpacity"></div>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<!-- ************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
Fill Opacity.
|
||||
</td>
|
||||
<td>
|
||||
<div id="fillOpacity"></div>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<!-- ************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
Opacity.
|
||||
</td>
|
||||
<td>
|
||||
<div id="opacity"></div>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Visibility.
|
||||
</td>
|
||||
<td>
|
||||
<div id="visibility"></div>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</body>
|
||||
|
||||
@ -2,11 +2,63 @@
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<script type="text/javascript" src="web2dLibraryLoader.js"></script>
|
||||
</head>
|
||||
<script type="text/javascript">
|
||||
web2d = {
|
||||
peer: {}
|
||||
};
|
||||
|
||||
<body>
|
||||
web2d.peer =
|
||||
{
|
||||
svg: {},
|
||||
vml: {}
|
||||
};
|
||||
|
||||
web2d.peer.utils = {};
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="mootools.js"></script>
|
||||
<script type="text/javascript" src="../../../../../core-js/target/classes/core.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/EventDispatcher.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElementPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElementPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Element.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Workspace.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/WorkspacePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/WorkspacePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Toolkit.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Elipse.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElipsePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElipsePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Line.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/LinePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/LinePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/PolyLine.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/PolyLinePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/PolyLinePeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Group.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/GroupPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/GroupPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Rect.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/RectPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/RectPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Text.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TextPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextBoxPeer.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/utils/TransformUtils.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/utils/EventUtils.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/Font.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/Font.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/Font.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TahomaFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TimesFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ArialFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/VerdanaFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TahomaFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TimesFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ArialFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/VerdanaFont.js"></script>
|
||||
<script type="text/javascript" src="utils.js"></script>
|
||||
<script type="text/javascript">
|
||||
function zoomIn()
|
||||
{
|
||||
@ -18,6 +70,7 @@
|
||||
};
|
||||
|
||||
workspaces = [];
|
||||
var textot;
|
||||
|
||||
var TextTest = function (size,coordSize,textval,font,fontSizeval, style, modifier, fontColor, owner, iesimo)
|
||||
{
|
||||
@ -38,6 +91,7 @@
|
||||
text.setFont(font, fontSizeval, style, modifier);
|
||||
text.setPosition(0, 0);
|
||||
text.setColor(fontColor);
|
||||
textot = text;
|
||||
|
||||
|
||||
overflowWorkspace.addItAsChildTo($(owner));
|
||||
@ -64,7 +118,20 @@
|
||||
parent.appendChild(span);
|
||||
workspaces[iesimo]=overflowWorkspace;
|
||||
};
|
||||
|
||||
function initialize(){
|
||||
web2d.peer.Toolkit.init();
|
||||
TextTest("100px",200,"Test Text","Arial",10, "normal", "normal", "red", "text0", 0);
|
||||
TextTest("100px",100,"Test Text","Arial",10, "normal", "normal", "blue", "text1", 1);
|
||||
TextTest("100px",50,"Test Text","Arial",10, "normal", "normal", "blue", "text2", 2);
|
||||
TextTest("100px",100,"Test Text","Arial",10, "italic", "normal", "blue", "text3", 3);
|
||||
TextTest("100px",100,"Test Text","Arial",10, "italic", "bold", "green", "text4", 4);
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="initialize();">
|
||||
|
||||
<h1>Text Render Tests </h1>
|
||||
|
||||
@ -78,22 +145,14 @@
|
||||
Simple text
|
||||
</td>
|
||||
<td>
|
||||
<div id="text0"/>
|
||||
<div id="text1"/>
|
||||
<div id="text2"/>
|
||||
<div id="text3"/>
|
||||
<div id="text4"/>
|
||||
<div id="text0"></div>
|
||||
<div id="text1"></div>
|
||||
<div id="text2"></div>
|
||||
<div id="text3"></div>
|
||||
<div id="text4"></div>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<script type="text/javascript">
|
||||
web2d.peer.Toolkit.init();
|
||||
TextTest("100px",200,"Test Text","Arial",10, "normal", "normal", "red", "text0", 0);
|
||||
TextTest("100px",100,"Test Text","Arial",10, "normal", "normal", "blue", "text1", 1);
|
||||
TextTest("100px",50,"Test Text","Arial",10, "normal", "normal", "blue", "text2", 2);
|
||||
TextTest("100px",100,"Test Text","Arial",10, "italic", "normal", "blue", "text3", 3);
|
||||
TextTest("100px",100,"Test Text","Arial",10, "italic", "bold", "green", "text4", 4);
|
||||
</script>
|
||||
<!--**************************************************************************-->
|
||||
|
||||
</table>
|
||||
|
||||
@ -31,18 +31,20 @@ web2d.peer =
|
||||
web2d.peer.utils = {};
|
||||
web2d.Loader =
|
||||
{
|
||||
load: function(scriptPath, stylePath, jsFileName)
|
||||
load: function(scriptPath, stylePath, jsFileName, callbackFn)
|
||||
{
|
||||
var headElement = document.getElementsByTagName('head');
|
||||
var htmlDoc = headElement.item(0);
|
||||
var baseUrl = this.baseUrl(jsFileName);
|
||||
this.files = scriptPath;
|
||||
this.callbackFn = callbackFn;
|
||||
|
||||
if (scriptPath && scriptPath.length > 0)
|
||||
{
|
||||
for (var i = 0; i < scriptPath.length; i++)
|
||||
{
|
||||
|
||||
this.includeScriptNode(baseUrl + scriptPath[i]);
|
||||
var file = scriptPath[i];
|
||||
this.includeScriptNode(baseUrl + file);
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -79,6 +81,24 @@ web2d.Loader =
|
||||
js.setAttribute('language', 'javascript');
|
||||
js.setAttribute('type', 'text/javascript');
|
||||
js.setAttribute('src', filename);
|
||||
|
||||
function calltheCBcmn() {
|
||||
web2d.Loader.checkLoaded(filename);
|
||||
}
|
||||
|
||||
if(typeof(js.addEventListener) != 'undefined') {
|
||||
/* The FF, Chrome, Safari, Opera way */
|
||||
js.addEventListener('load',calltheCBcmn,false);
|
||||
}
|
||||
else {
|
||||
/* The MS IE 8+ way (may work with others - I dunno)*/
|
||||
var ret = js.onreadystatechange= function handleIeState() {
|
||||
if(js.readyState == 'loaded' || js.readyState == 'complete'){
|
||||
calltheCBcmn();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
html_doc.appendChild(js);
|
||||
return false;
|
||||
},
|
||||
@ -90,6 +110,23 @@ web2d.Loader =
|
||||
js.setAttribute('href', filename);
|
||||
html_doc.appendChild(js);
|
||||
return false;
|
||||
},
|
||||
checkLoaded:function(name) {
|
||||
var index = -1;
|
||||
for(var i = 0 ; i<this.files.length; i++){
|
||||
var names = this.files[i].split('/');
|
||||
var chkname = name.split('/');
|
||||
if(names[names.length-1]==chkname[chkname.length-1]){
|
||||
index = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(i!=-1){
|
||||
this.files.splice(i,1);
|
||||
if(this.files.length==0){
|
||||
this.callbackFn();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -98,10 +135,10 @@ web2d.JsLoader =
|
||||
{
|
||||
scriptPath: [
|
||||
"/render/mootools.js",
|
||||
"/../../../../core-js/target/classes/core.js",
|
||||
"../../../../../core-js/target/classes/core.js",
|
||||
"/../../../src/main/javascript/EventDispatcher.js",
|
||||
"/../../../src/main/javascript/peer/vml/ElementPeer.js",
|
||||
"/../../../src/main/javascript/peer/svg/ElementPeer.js","" +
|
||||
"/../../../src/main/javascript/peer/svg/ElementPeer.js",
|
||||
"/../../../src/main/javascript/Element.js",
|
||||
"/../../../src/main/javascript/Workspace.js",
|
||||
"/../../../src/main/javascript/peer/svg/WorkspacePeer.js",
|
||||
@ -141,10 +178,10 @@ web2d.JsLoader =
|
||||
"/../../../src/main/javascript/peer/vml/VerdanaFont.js"],
|
||||
|
||||
stylePath: [],
|
||||
load: function()
|
||||
load: function(callbackFn)
|
||||
{
|
||||
web2d.Loader.load(this.scriptPath, this.stylePath, "web2dLibraryLoader.js");
|
||||
web2d.Loader.load(this.scriptPath, this.stylePath, "web2dLibraryLoader.js", callbackFn);
|
||||
}
|
||||
};
|
||||
|
||||
web2d.JsLoader.load();
|
||||
//web2d.JsLoader.load();
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<script type="text/javascript">
|
||||
web2d = {
|
||||
peer: {}
|
||||
@ -59,31 +60,8 @@
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ArialFont.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/VerdanaFont.js"></script>
|
||||
<script type="text/javascript" src="utils.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Workspace Render Tests </h1>
|
||||
|
||||
<table border="1">
|
||||
<colgroup style="width:80%;">
|
||||
<col style="width:30%">
|
||||
<col style="width:60%">
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td>
|
||||
The Workspace's size defines the visible work area. If an element is outside the workspace, it must not be
|
||||
visible.
|
||||
In this example, The back circle is bigger than the workspace area. A big portion of the circle will not be
|
||||
displayed.
|
||||
</td>
|
||||
<td>
|
||||
<div id="overflowExample"></div>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<script type="text/javascript">
|
||||
|
||||
function initialize(){
|
||||
web2d.peer.Toolkit.init();
|
||||
|
||||
var overflowWorkspace = new web2d.Workspace();
|
||||
@ -94,18 +72,6 @@
|
||||
overflowWorkspace.appendChild(elipse1);
|
||||
overflowWorkspace.addItAsChildTo($("overflowExample"));
|
||||
|
||||
</script>
|
||||
<!--**************************************************************************-->
|
||||
<tr>
|
||||
<td>
|
||||
Workspace will be added as child of a div element. That's why, Its parent will define this position.
|
||||
</td>
|
||||
<td>
|
||||
<div id="positionExample" style="position:relative;left:0;top:0;width:100px"></div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var workspacePosition = function()
|
||||
{
|
||||
@ -130,24 +96,6 @@
|
||||
};
|
||||
workspacePosition();
|
||||
|
||||
</script>
|
||||
<!--**************************************************************************-->
|
||||
<tr>
|
||||
<td>
|
||||
Workspaces size can be defined using standard CSS measures.
|
||||
In this example, the first workspace is defined using pixes and the second one
|
||||
using inchs.
|
||||
</td>
|
||||
<td>
|
||||
<div id="sizeExampleContainer" style="position:relative;width:400px;">
|
||||
<div id="sizeExamplePixels" style="float:left;margin:20px"></div>
|
||||
|
||||
<div id="sizeExampleInch" style="float:left;margin:20px"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<script type="text/javascript">
|
||||
|
||||
// Draw a reference grid.
|
||||
var container = document.getElementById("sizeExampleContainer");
|
||||
var grid = new Grid(container, 35, 12);
|
||||
@ -173,42 +121,7 @@
|
||||
workspaceInchs.appendChild(elipse);
|
||||
workspaceInchs.addItAsChildTo($("sizeExampleInch"));
|
||||
|
||||
</script>
|
||||
<!--**************************************************************************-->
|
||||
<tr>
|
||||
<td>
|
||||
Workspace coordsize defines how many units there are along the width of the containing block.
|
||||
In all the examples,the coordsize of the workspaces have been set to (100,100) and the circles have been
|
||||
positioned
|
||||
at (0,0),(0,100),(100,0),(100,100)(50,50).<br/>
|
||||
<br/>
|
||||
1) Workspace with CoordSize(100,100)<br/>
|
||||
2) Workspace with CoordSize(100,200)<br/>
|
||||
3) Workspace with CoordSize(200,100)<br/>
|
||||
4) Workspace animation changing the coordsize from (30,30) to (100,100)<br/>
|
||||
</td>
|
||||
<td>
|
||||
<div style="position:relative;width:100%;">
|
||||
<div id="coordsizeExample100x100" style="float:left;margin:20px;">
|
||||
(1)
|
||||
</div>
|
||||
|
||||
<div id="coordsizeExample100x200" style="float:left;margin:20px;">
|
||||
(2)
|
||||
</div>
|
||||
|
||||
<div id="coordsizeExample200x100" style="float:left;margin:20px;">
|
||||
(3)
|
||||
</div>
|
||||
|
||||
<div id="coordsizeExampleDynamic" style="float:left;margin:20px;">
|
||||
(4)
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<script type="text/javascript">
|
||||
var workspaceCoordSizeSample = function()
|
||||
{
|
||||
// Workspace with CoordSize(100,100);
|
||||
@ -268,43 +181,8 @@
|
||||
};
|
||||
|
||||
workspaceCoordSizeSample();
|
||||
</script>
|
||||
|
||||
<!--**************************************************************************-->
|
||||
<tr>
|
||||
<td>
|
||||
Workspace coordorigin defines the coordinate at the top left corner of the containing block.
|
||||
In all the examples,the coordsize of the workspaces have been set to (100,100) and the circles have been
|
||||
positioned
|
||||
at (0,0),(0,100),(100,0),(100,100)(50,50). <br/>
|
||||
<br/>
|
||||
1) Workspace with CoordOrigin(0,0)<br/>
|
||||
2) Workspace with CoordOrigin(0,50)<br/>
|
||||
3) Workspace with CoordOrigin(50,0)<br/>
|
||||
4) Workspace animation changing the coordorigin from (0,0) to (50,50)<br/>
|
||||
</td>
|
||||
<td>
|
||||
<div style="position:relative;width:100%;">
|
||||
<div id="coordorigin0x0" style="float:left;margin:20px">
|
||||
(1)
|
||||
</div>
|
||||
|
||||
<div id="coordorigin0x50" style="float:left;margin:20px">
|
||||
(2)
|
||||
</div>
|
||||
|
||||
<div id="coordorigin50x0" style="float:left;margin:20px">
|
||||
(3)
|
||||
</div>
|
||||
|
||||
<div id="coordoriginExampleDynamic" style="float:left;margin:20px">
|
||||
(4)
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<script type="text/javascript">
|
||||
var workspaceCoordOriginSample = function()
|
||||
{
|
||||
|
||||
@ -367,7 +245,124 @@
|
||||
executer.periodical(100);
|
||||
};
|
||||
workspaceCoordOriginSample();
|
||||
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="initialize();">
|
||||
|
||||
<h1>Workspace Render Tests </h1>
|
||||
|
||||
<table border="1">
|
||||
<colgroup style="width:80%;">
|
||||
<col style="width:30%">
|
||||
<col style="width:60%">
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td>
|
||||
The Workspace's size defines the visible work area. If an element is outside the workspace, it must not be
|
||||
visible.
|
||||
In this example, The back circle is bigger than the workspace area. A big portion of the circle will not be
|
||||
displayed.
|
||||
</td>
|
||||
<td>
|
||||
<div id="overflowExample"></div>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<!--**************************************************************************-->
|
||||
<tr>
|
||||
<td>
|
||||
Workspace will be added as child of a div element. That's why, Its parent will define this position.
|
||||
</td>
|
||||
<td>
|
||||
<div id="positionExample" style="position:relative;left:0;top:0;width:100px"></div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!--**************************************************************************-->
|
||||
<tr>
|
||||
<td>
|
||||
Workspaces size can be defined using standard CSS measures.
|
||||
In this example, the first workspace is defined using pixes and the second one
|
||||
using inchs.
|
||||
</td>
|
||||
<td>
|
||||
<div id="sizeExampleContainer" style="position:relative;width:400px;">
|
||||
<div id="sizeExamplePixels" style="float:left;margin:20px"></div>
|
||||
|
||||
<div id="sizeExampleInch" style="float:left;margin:20px"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!--**************************************************************************-->
|
||||
<tr>
|
||||
<td>
|
||||
Workspace coordsize defines how many units there are along the width of the containing block.
|
||||
In all the examples,the coordsize of the workspaces have been set to (100,100) and the circles have been
|
||||
positioned
|
||||
at (0,0),(0,100),(100,0),(100,100)(50,50).<br/>
|
||||
<br/>
|
||||
1) Workspace with CoordSize(100,100)<br/>
|
||||
2) Workspace with CoordSize(100,200)<br/>
|
||||
3) Workspace with CoordSize(200,100)<br/>
|
||||
4) Workspace animation changing the coordsize from (30,30) to (100,100)<br/>
|
||||
</td>
|
||||
<td>
|
||||
<div style="position:relative;width:100%;">
|
||||
<div id="coordsizeExample100x100" style="float:left;margin:20px;">
|
||||
(1)
|
||||
</div>
|
||||
|
||||
<div id="coordsizeExample100x200" style="float:left;margin:20px;">
|
||||
(2)
|
||||
</div>
|
||||
|
||||
<div id="coordsizeExample200x100" style="float:left;margin:20px;">
|
||||
(3)
|
||||
</div>
|
||||
|
||||
<div id="coordsizeExampleDynamic" style="float:left;margin:20px;">
|
||||
(4)
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!--**************************************************************************-->
|
||||
<tr>
|
||||
<td>
|
||||
Workspace coordorigin defines the coordinate at the top left corner of the containing block.
|
||||
In all the examples,the coordsize of the workspaces have been set to (100,100) and the circles have been
|
||||
positioned
|
||||
at (0,0),(0,100),(100,0),(100,100)(50,50). <br/>
|
||||
<br/>
|
||||
1) Workspace with CoordOrigin(0,0)<br/>
|
||||
2) Workspace with CoordOrigin(0,50)<br/>
|
||||
3) Workspace with CoordOrigin(50,0)<br/>
|
||||
4) Workspace animation changing the coordorigin from (0,0) to (50,50)<br/>
|
||||
</td>
|
||||
<td>
|
||||
<div style="position:relative;width:100%;">
|
||||
<div id="coordorigin0x0" style="float:left;margin:20px">
|
||||
(1)
|
||||
</div>
|
||||
|
||||
<div id="coordorigin0x50" style="float:left;margin:20px">
|
||||
(2)
|
||||
</div>
|
||||
|
||||
<div id="coordorigin50x0" style="float:left;margin:20px">
|
||||
(3)
|
||||
</div>
|
||||
|
||||
<div id="coordoriginExampleDynamic" style="float:left;margin:20px">
|
||||
(4)
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</body>
|
||||
|
||||
@ -33,10 +33,10 @@ public class UserAgent implements Serializable {
|
||||
private final org.apache.commons.logging.Log logger = LogFactory.getLog(UserAgent.class.getName());
|
||||
|
||||
public static void main(final String argv[]) {
|
||||
// UserAgent explorer = UserAgent.create("Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)");
|
||||
UserAgent explorer = UserAgent.create("Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)");
|
||||
// UserAgent firefox = UserAgent.create("Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20050302 Firefox/0.9.6");
|
||||
//UserAgent safari = UserAgent.create("iCab/2.9.5 (Macintosh; U; PPC; Mac OS X)");
|
||||
//UserAgent opera = UserAgent.create("Opera/9.21 (Windows NT 5.1; U; en)");
|
||||
UserAgent safari = UserAgent.create("iCab/2.9.5 (Macintosh; U; PPC; Mac OS X)");
|
||||
UserAgent opera = UserAgent.create("Opera/9.21 (Windows NT 5.1; U; en)");
|
||||
|
||||
|
||||
|
||||
@ -83,7 +83,7 @@ public class UserAgent implements Serializable {
|
||||
}
|
||||
|
||||
public enum Product {
|
||||
EXPLORER, FIREFOX, CAMINO, NETSCAPE, OPERA, SAFARI, KONQUEOR, KMELEON, MOZILLA, LYNX, ROBOT;
|
||||
EXPLORER, FIREFOX, CAMINO, NETSCAPE, OPERA, SAFARI, CHROME, KONQUEOR, KMELEON, MOZILLA, LYNX, ROBOT;
|
||||
}
|
||||
|
||||
public enum OS {
|
||||
@ -131,7 +131,21 @@ public class UserAgent implements Serializable {
|
||||
} else if (userAgentHeader.indexOf("iCab") != -1 || userAgentHeader.indexOf("Safari") != -1) {
|
||||
// Safari:
|
||||
//Formats: Mozilla/5.0 (Windows; U; Windows NT 5.1; en) AppleWebKit/522.13.1 (KHTML, like Gecko) Version/3.0.2 Safari/522.13.1
|
||||
//Chrome:
|
||||
//Formats: "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-US) AppleWebKit/534.7 (KHTML, like Gecko) Chrome/7.0.517.44 Safari/534.7"
|
||||
String versionStr = "";
|
||||
if(userAgentHeader.indexOf("Chrome")!=-1)
|
||||
{
|
||||
this.product = Product.CHROME;
|
||||
versionStr = userAgentHeader.substring(userAgentHeader.indexOf("Chrome")+7,userAgentHeader.lastIndexOf(" "));
|
||||
}
|
||||
else
|
||||
{
|
||||
this.product = Product.SAFARI;
|
||||
versionStr = userAgentHeader.substring(userAgentHeader.indexOf("Version")+8,userAgentHeader.lastIndexOf(" "));
|
||||
}
|
||||
|
||||
parseVersion(versionStr);
|
||||
|
||||
} else if (userAgentHeader.indexOf("Konqueror") != -1) {
|
||||
this.product = Product.KONQUEOR;
|
||||
@ -316,6 +330,8 @@ public class UserAgent implements Serializable {
|
||||
|
||||
result = result || product == UserAgent.Product.EXPLORER && this.isVersionGreatedOrEqualThan(6, 0) && this.getOs() == UserAgent.OS.WINDOWS;
|
||||
result = result || product == UserAgent.Product.OPERA && this.isVersionGreatedOrEqualThan(9, 2);
|
||||
result = result || product == UserAgent.Product.CHROME && this.isVersionGreatedOrEqualThan(7, 0);
|
||||
result = result || product == UserAgent.Product.SAFARI && this.isVersionGreatedOrEqualThan(3, 0);
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
@ -256,6 +256,15 @@ div#redoEdition {
|
||||
#export {
|
||||
background: url(../images/file_export.png) no-repeat center top;
|
||||
behavior: url(../css/iepngfix.htc);
|
||||
position:relative;
|
||||
}
|
||||
|
||||
#exportAnchor {
|
||||
position:absolute;
|
||||
width:100%;
|
||||
height:100%;
|
||||
top:0;
|
||||
left:0;
|
||||
}
|
||||
|
||||
div#zoomIn {
|
||||
|
||||
@ -329,7 +329,7 @@ Properties:
|
||||
*/
|
||||
|
||||
window.xpath = !!(document.evaluate);
|
||||
if (window.ActiveXObject) window.ie = window[window.XMLHttpRequest ? 'ie7' : 'ie6'] = true;
|
||||
if (window.ActiveXObject) window.ie = window[document.createElementNS? 'ie9':window.XMLHttpRequest ? 'ie7' : 'ie6'] = true;
|
||||
else if (document.childNodes && !document.all && !navigator.taintEnabled) window.webkit = window[window.xpath ? 'webkit420' : 'webkit419'] = true;
|
||||
else if (document.getBoxObjectFor != null) window.gecko = true;
|
||||
|
||||
@ -1733,7 +1733,7 @@ var Element = new Class({
|
||||
|
||||
initialize: function(el, props) {
|
||||
if ($type(el) == 'string') {
|
||||
if (window.ie && props && (props.name || props.type)) {
|
||||
if (!window.ie9 && window.ie && props && (props.name || props.type)) {
|
||||
var name = (props.name) ? ' name="' + props.name + '"' : '';
|
||||
var type = (props.type) ? ' type="' + props.type + '"' : '';
|
||||
delete props.name;
|
||||
@ -3100,7 +3100,11 @@ Elements.extend({
|
||||
|
||||
filterByClass: function(className, nocash) {
|
||||
var elements = this.filter(function(el) {
|
||||
if(el.className && el.className.contains)
|
||||
return (el.className && el.className.contains(className, ' '));
|
||||
else if(el.className){
|
||||
return el.className[className]!=undefined;
|
||||
}
|
||||
});
|
||||
return (nocash) ? elements : new Elements(elements);
|
||||
},
|
||||
|
||||
@ -137,17 +137,17 @@
|
||||
<div id="redoEdition" class="button" title="<spring:message code="REDO_EDITION"/>">
|
||||
<div class="toolbarLabel"><p><spring:message code="REDO"/></p></div>
|
||||
</div>
|
||||
<a id="printAnchor" href="javascript:printMap();" title="<spring:message code="PRINT"/>">
|
||||
<div id="print" class="button" title="<spring:message code="PRINT"/>">
|
||||
|
||||
<div id="print" class="button" title="<spring:message code="PRINT"/>" onclick="printMap();">
|
||||
<div class="toolbarLabel"><p><spring:message code="PRINT"/></p></div>
|
||||
</div>
|
||||
</a>
|
||||
<a id="exportAnchor" href="export.htm?mapId=${mindmap.id}" rel="moodalbox 600px 400px"
|
||||
title="<spring:message code="EXPORT_DETAILS"/>">
|
||||
|
||||
<div id="export" class="button" title="<spring:message code="EXPORT"/>">
|
||||
<div class="toolbarLabel"><p><spring:message code="EXPORT"/></p></div>
|
||||
</div>
|
||||
<a id="exportAnchor" href="export.htm?mapId=${mindmap.id}" rel="moodalbox 600px 400px"
|
||||
title="<spring:message code="EXPORT_DETAILS"/>">
|
||||
</a>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div id="zoom" class="buttonContainer" title="Zoom In">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user