vmario/wisemapping-open-source
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-open-source.git synced 2024-11-24 23:17:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Adding Chrome, Safari and IE9 support

Browse Source
This commit is contained in:
Pablo Luna 2010-11-20 23:43:54 +01:00
parent 2efa40c664
commit 5b997de415
21 changed files with 9030 additions and 8674 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
core-js/src/main/javascript/UserAgent.js
View File

@ -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"

3
core-js/src/main/javascript/Utils.js
View File

@ -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;

63
mindplot/src/main/javascript/DragManager.js
View File

@ -1,29 +1,27 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* $Id: file 64488 2006-03-10 17:32:09Z paulo $
*/
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* $Id: file 64488 2006-03-10 17:32:09Z paulo $
*/
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';

5
mindplot/src/main/javascript/MindmapDesigner.js
View File

@ -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

8
mindplot/src/main/javascript/ScreenManager.js
View File

@ -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.

27
mindplot/src/main/javascript/Workspace.js
View File

@ -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;

6
web2d/src/main/javascript/peer/svg/TextPeer.js
View File

@ -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 ()

231
web2d/src/test/javascript/render/events.html
View File

@ -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>

354
web2d/src/test/javascript/render/group.html
View File

@ -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">
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>
</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">
<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>

168
web2d/src/test/javascript/render/line.html
View File

@ -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">
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>
</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">
<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>
}
</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>

116
web2d/src/test/javascript/render/polyLine.html
View File

@ -2,28 +2,65 @@
<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: {}
};
<h1>PolyLines Render Tests </h1>
web2d.peer.utils = {};
</script>
<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">
<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>
</script>
<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>

141
web2d/src/test/javascript/render/prototype.html
View File

@ -2,54 +2,105 @@
<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>
</head>
<script type="text/javascript">
var xScale = 1000;
var yScale = 600;
var shapeOrigX = 0;
function initialize(){
web2d.peer.Toolkit.init();
<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();"/>
workspace = new web2d.Workspace();
workspace.setSize(xScale + "px", yScale + "px");
workspace.setCoordSize(xScale, yScale);
workspace.setCoordOrigin(0, 0);
workspace.setFill("#f0f0f0");
<div id="divWorkspace" style="overflow:scroll;width:1020px;height:620px;position:relative;">
</div>
<script type="text/javascript">
// 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);
web2d.peer.Toolkit.init();
workspace.addItAsChildTo($("divWorkspace"));
}
var xScale = 1000;
var yScale = 600;
var workspace = new web2d.Workspace();
workspace.setSize(xScale + "px", yScale + "px");
workspace.setCoordSize(xScale, yScale);
workspace.setCoordOrigin(0, 0);
workspace.setFill("#f0f0f0");
function zoomIn()
{
function zoomIn()
{
xScale = xScale / 2;
yScale = yScale / 2;
workspace.setSize(xScale + "px", yScale + "px");
}
}
function zoomOut()
{
function zoomOut()
{
xScale = xScale * 2;
yScale = yScale * 2;
workspace.setSize(xScale + "px", yScale + "px");
}
var shapeOrigX = 0;
function createShape()
{
}
function createShape()
{
// Secondary Idea...
var nodeGroup = new web2d.Group();
nodeGroup.setSize(200, 60);
@ -147,17 +198,21 @@ 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.

70
web2d/src/test/javascript/render/rect.html
View File

@ -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>

188
web2d/src/test/javascript/render/shapes.html
View File

@ -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">
<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>
}
</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>

93
web2d/src/test/javascript/render/text.html
View File

@ -2,12 +2,64 @@
<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: {}
};
<script type="text/javascript">
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()
{
for(i=0; i<workspaces.length; i++)
@ -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>

53
web2d/src/test/javascript/render/web2dLibraryLoader.js
View File

@ -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();

249
web2d/src/test/javascript/render/workspace.html
View File

@ -2,7 +2,8 @@
<html>
<head>
<script type="text/javascript">
<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">
<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>
}
</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>

26
wise-webapp/src/main/java/com/wisemapping/filter/UserAgent.java
View File

@ -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 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 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)");
@ -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;
}

9
wise-webapp/src/main/webapp/css/editor.css
View File

@ -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 {

8
wise-webapp/src/main/webapp/js/mootools.js
View File

@ -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);
},

12
wise-webapp/src/main/webapp/jsp/mindmapEditor.jsp
View File

@ -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">