Adding Chrome, Safari and IE9 support

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

View File

@ -24,6 +24,9 @@ core.UserAgent = {
if (!core.Utils.isDefined()) if (!core.Utils.isDefined())
{ {
this._isVMLSupported = navigator.appVersion.match(/MSIE (\d\.\d)/); this._isVMLSupported = navigator.appVersion.match(/MSIE (\d\.\d)/);
if(this._isVMLSupported == null || parseInt(this._isVMLSupported[1])>=9){
this._isVMLSupported = false;
}
} }
return this._isVMLSupported; return this._isVMLSupported;
}, },
@ -75,6 +78,11 @@ core.UserAgent = {
subString: "Apple", subString: "Apple",
identity: "Safari" identity: "Safari"
}, },
{
string: navigator.vendor,
subString: "Google Inc.",
identity: "Chrome"
},
{ {
prop: window.opera, prop: window.opera,
identity: "Opera" identity: "Opera"

View File

@ -101,6 +101,9 @@ core.Utils.getMousePosition = function(event)
throw "Could not obtain mouse position"; throw "Could not obtain mouse position";
} }
} }
if(core.Utils.isDefined(event.$extended)){
event = event.event;
}
if (typeof( event.pageX ) == 'number') { if (typeof( event.pageX ) == 'number') {
//most browsers //most browsers
xcoord = event.pageX; xcoord = event.pageX;

View File

@ -1,29 +1,27 @@
/* /*
* Licensed to the Apache Software Foundation (ASF) under one or more * Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with * contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership. * this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0 * 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 not use this file except in compliance with
* the License. You may obtain a copy of the License at * the License. You may obtain a copy of the License at
* *
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Unless required by applicable law or agreed to in writing, software * Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, * distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
* *
* $Id: file 64488 2006-03-10 17:32:09Z paulo $ * $Id: file 64488 2006-03-10 17:32:09Z paulo $
*/ */
mindplot.DragManager = function(workspace) mindplot.DragManager = function(workspace)
{ {
this._workspace = workspace; this._workspace = workspace;
this._listeners = {}; this._listeners = {};
this._processMouseMoveEvent = true;
var dragManager = this; var dragManager = this;
this._precitionUpdater = null;
}; };
mindplot.DragManager.prototype.add = function(node) mindplot.DragManager.prototype.add = function(node)
@ -44,19 +42,14 @@ mindplot.DragManager.prototype.add = function(node)
var dragNode = node.createDragNode(); var dragNode = node.createDragNode();
var mousePos = screen.getWorkspaceMousePosition(event); var mousePos = screen.getWorkspaceMousePosition(event);
dragNode.setPosition(mousePos.x, mousePos.y); 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 ... // Register mouse move listener ...
var mouseMoveListener = dragManager._buildMouseMoveListener(workspace, dragNode, dragManager); var mouseMoveListener = dragManager._buildMouseMoveListener(workspace, dragNode, dragManager);
workspace.addEventListener('mousemove', mouseMoveListener); screen.addEventListener('mousemove', mouseMoveListener);
// Register mouse up listeners ... // Register mouse up listeners ...
var mouseUpListener = dragManager._buildMouseUpListener(workspace, node, dragNode, dragManager); var mouseUpListener = dragManager._buildMouseUpListener(workspace, node, dragNode, dragManager);
workspace.addEventListener('mouseup', mouseUpListener); screen.addEventListener('mouseup', mouseUpListener);
// Execute Listeners .. // Execute Listeners ..
var startDragListener = dragManager._listeners['startdragging']; var startDragListener = dragManager._listeners['startdragging'];
@ -92,10 +85,7 @@ mindplot.DragManager.prototype._buildMouseMoveListener = function(workspace, dra
{ {
var screen = workspace.getScreenManager(); var screen = workspace.getScreenManager();
var result = function(event) { var result = function(event) {
if (dragManager._processMouseMoveEvent)
{
// Disable mouse move rendering ...
dragManager._processMouseMoveEvent = false;
if (!dragNode._isInTheWorkspace) if (!dragNode._isInTheWorkspace)
{ {
// Add shadow node to the workspace. // Add shadow node to the workspace.
@ -112,8 +102,9 @@ mindplot.DragManager.prototype._buildMouseMoveListener = function(workspace, dra
{ {
dragListener(event, dragNode); dragListener(event, dragNode);
} }
}
}; event.preventDefault();
}.bindWithEvent(this);
dragManager._mouseMoveListener = result; dragManager._mouseMoveListener = result;
return result; return result;
}; };
@ -133,8 +124,8 @@ mindplot.DragManager.prototype._buildMouseUpListener = function(workspace, node,
} }
// Remove all the events. // Remove all the events.
workspace.removeEventListener('mousemove', dragManager._mouseMoveListener); screen.removeEventListener('mousemove', dragManager._mouseMoveListener);
workspace.removeEventListener('mouseup', dragManager._mouseUpListener); screen.removeEventListener('mouseup', dragManager._mouseUpListener);
// Help GC // Help GC
dragManager._mouseMoveListener = null; dragManager._mouseMoveListener = null;
@ -149,10 +140,6 @@ mindplot.DragManager.prototype._buildMouseUpListener = function(workspace, node,
dragNode._isInTheWorkspace = false; dragNode._isInTheWorkspace = false;
} }
// Stop presition updater listener ...
$clear(dragManager._precitionUpdater);
dragManager._precitionUpdater = null;
// Change the cursor to the default. // Change the cursor to the default.
window.document.body.style.cursor = 'default'; window.document.body.style.cursor = 'default';

View File

@ -159,17 +159,16 @@ mindplot.MindmapDesigner.prototype._registerEvents = function()
if (!this._viewMode) if (!this._viewMode)
{ {
// Initialize workspace event listeners. // Initialize workspace event listeners.
// Create nodes on double click... // Create nodes on double click...
workspace.addEventListener('click', function(event) screenManager.addEventListener('click', function(event)
{ {
mindmapDesigner.getEditor().lostFocus(); mindmapDesigner.getEditor().lostFocus();
// @todo: Puaj hack... // @todo: Puaj hack...
mindmapDesigner._cleanScreen(); mindmapDesigner._cleanScreen();
}); });
workspace.addEventListener('dblclick', function(event) screenManager.addEventListener('dblclick', function(event)
{ {
mindmapDesigner.getEditor().lostFocus(); mindmapDesigner.getEditor().lostFocus();
// Get mouse position // Get mouse position

View File

@ -29,6 +29,14 @@ mindplot.ScreenManager.prototype.setScale = function(scale)
this._workspaceScale = 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) mindplot.ScreenManager.prototype.getWorkspaceElementPosition = function(e)
{ {
// Retrive current element position. // Retrive current element position.

View File

@ -182,18 +182,9 @@ mindplot.Workspace.prototype._registerDragEvents = function()
var mouseDownPosition = screenManager.getWorkspaceMousePosition(event); var mouseDownPosition = screenManager.getWorkspaceMousePosition(event);
var originalCoordOrigin = workspace.getCoordOrigin(); 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) workspace.mouseMoveListener = function(event)
{ {
if (mWorkspace._processMouseMoveEvent)
{
// Disable mouse move rendering ...
mWorkspace._processMouseMoveEvent = false;
var currentMousePosition = screenManager.getWorkspaceMousePosition(event); var currentMousePosition = screenManager.getWorkspaceMousePosition(event);
@ -213,19 +204,16 @@ mindplot.Workspace.prototype._registerDragEvents = function()
{ {
window.document.body.style.cursor = "move"; window.document.body.style.cursor = "move";
} }
} event.preventDefault();
}; }.bindWithEvent(this);
workspace.addEventListener('mousemove', workspace.mouseMoveListener); screenManager.addEventListener('mousemove', workspace.mouseMoveListener);
// Register mouse up listeners ... // Register mouse up listeners ...
workspace.mouseUpListener = function(event) workspace.mouseUpListener = function(event)
{ {
// Stop presition updater listener ...
$clear(mWorkspace._precitionUpdater);
mWorkspace._precitionUpdater = null;
workspace.removeEventListener('mousemove', workspace.mouseMoveListener); screenManager.removeEventListener('mousemove', workspace.mouseMoveListener);
workspace.removeEventListener('mouseup', workspace.mouseUpListener); screenManager.removeEventListener('mouseup', workspace.mouseUpListener);
workspace.mouseUpListener = null; workspace.mouseUpListener = null;
workspace.mouseMoveListener = null; workspace.mouseMoveListener = null;
window.document.body.style.cursor = 'default'; window.document.body.style.cursor = 'default';
@ -235,7 +223,7 @@ mindplot.Workspace.prototype._registerDragEvents = function()
screenManager.setOffset(coordOrigin.x, coordOrigin.y); screenManager.setOffset(coordOrigin.x, coordOrigin.y);
mWorkspace.enableWorkspaceEvents(true); mWorkspace.enableWorkspaceEvents(true);
}; };
workspace.addEventListener('mouseup', workspace.mouseUpListener); screenManager.addEventListener('mouseup', workspace.mouseUpListener);
} }
} else } 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;

View File

@ -167,14 +167,16 @@ web2d.peer.svg.TextPeer.prototype.setSize = function (size)
web2d.peer.svg.TextPeer.prototype.getWidth = function () 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(); width = width + this._font.getWidthMargin();
return width; return width;
}; };
web2d.peer.svg.TextPeer.prototype.getHeight = function () 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 () web2d.peer.svg.TextPeer.prototype.getHtmlFontSize = function ()

View File

@ -2,7 +2,62 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <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> <script type="text/javascript" src="utils.js"></script>
<style type="text/css"> <style type="text/css">
.eventForm { .eventForm {
@ -41,10 +96,95 @@
return this._enable; 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> </script>
</head> </head>
<body> <body onload="initialize();">
<script type="text/javascript"> <script type="text/javascript">
// Logger.setEnabled(true); // Logger.setEnabled(true);
@ -150,46 +290,6 @@
</td> </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>
<tr> <tr>
<td>Multiple listeners can be attached to an element to handle an event type. <td>Multiple listeners can be attached to an element to handle an event type.
@ -215,53 +315,6 @@
</form> </form>
</div> </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> </td>
</tr> </tr>
</tbody> </tbody>

View File

@ -2,31 +2,65 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <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> <script type="text/javascript" src="utils.js"></script>
</head> <script type="text/javascript">
function initialize(){
<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.Toolkit.init(); web2d.peer.Toolkit.init();
var basicTest = function() var basicTest = function()
@ -91,20 +125,7 @@
executer.periodical(100); executer.periodical(100);
}; };
basicTest(); 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() var eventTest = function()
{ {
@ -136,36 +157,8 @@
workspace.addItAsChildTo($("groupEventsContainer")); workspace.addItAsChildTo($("groupEventsContainer"));
} }
eventTest(); 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 eventTest = function()
{ {
var workspace = new web2d.Workspace(); var workspace = new web2d.Workspace();
@ -224,38 +217,8 @@
workspace.addItAsChildTo($("groupNestedContainer")); workspace.addItAsChildTo($("groupNestedContainer"));
}; };
eventTest(); 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() var workspaceCoordSizeSample = function()
{ {
@ -296,37 +259,8 @@
sample200x100.addItAsChildTo($("coordsizeExample200x100")); sample200x100.addItAsChildTo($("coordsizeExample200x100"));
}; };
workspaceCoordSizeSample(); 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() var workspaceCoordOriginSample = function()
{ {
@ -368,20 +302,9 @@
sample200x100.addItAsChildTo($("coordOriginExample50x0")); sample200x100.addItAsChildTo($("coordOriginExample50x0"));
} }
workspaceCoordOriginSample(); 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() var groupVisibilitySample = function()
{ {
@ -423,19 +346,7 @@
} }
groupVisibilitySample(); 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() var groupVisibilitySample = function()
{ {
@ -473,7 +384,154 @@
} }
groupVisibilitySample(); groupVisibilitySample();
}
</script> </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> </table>
</body> </body>

View File

@ -2,29 +2,65 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <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> <script type="text/javascript" src="utils.js"></script>
</head> <script type="text/javascript">
function initialize(){
<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.Toolkit.init(); web2d.peer.Toolkit.init();
var workspaceAttributes = { width:'700px',height:'100px',coordSize:'350 50',fillColor:'#ffffcc'}; var workspaceAttributes = { width:'700px',height:'100px',coordSize:'350 50',fillColor:'#ffffcc'};
var strokeWidthWorkspace = new web2d.Workspace(workspaceAttributes); var strokeWidthWorkspace = new web2d.Workspace(workspaceAttributes);
@ -46,18 +82,7 @@
strokeWidthWorkspace.appendChild(rect); strokeWidthWorkspace.appendChild(rect);
strokeWidthWorkspace.addItAsChildTo($("strokeWidthSample")); 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); var strokeOpacityWorkspace = new web2d.Workspace(workspaceAttributes);
for (var i = 0; i < 10; i++) for (var i = 0; i < 10; i++)
{ {
@ -70,19 +95,7 @@
strokeOpacityWorkspace.appendChild(line); strokeOpacityWorkspace.appendChild(line);
} }
strokeOpacityWorkspace.addItAsChildTo($("strokeOpacitySample")); 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 strokeStyleWorkspace = new web2d.Workspace(workspaceAttributes);
var styles = ['solid','dot','dash','dashdot','longdash']; var styles = ['solid','dot','dash','dashdot','longdash'];
for (var i = 0; i < styles.length; i++) for (var i = 0; i < styles.length; i++)
@ -96,19 +109,7 @@
strokeStyleWorkspace.appendChild(line); strokeStyleWorkspace.appendChild(line);
} }
strokeStyleWorkspace.addItAsChildTo($("strokeStyleSample")); 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 strokeArrowWorkspace = new web2d.Workspace(workspaceAttributes);
var styles = ['none ','block ','classic','diamond ','oval','open','chevron','doublechevron']; var styles = ['none ','block ','classic','diamond ','oval','open','chevron','doublechevron'];
for (var i = 0; i < styles.length; i++) for (var i = 0; i < styles.length; i++)
@ -122,7 +123,58 @@
strokeArrowWorkspace.appendChild(line); strokeArrowWorkspace.appendChild(line);
} }
strokeArrowWorkspace.addItAsChildTo($("strokeArrowSample")); 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> </table>
</body> </body>

View File

@ -2,28 +2,65 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<script type="text/javascript" src="web2dLibraryLoader.js"></script> <script type="text/javascript">
</head> web2d = {
peer: {}
};
<body> web2d.peer =
{
svg: {},
vml: {}
};
<h1>PolyLines Render Tests </h1> web2d.peer.utils = {};
</script>
<table border="1"> <script type="text/javascript" src="mootools.js"></script>
<colgroup style="width:80%;"> <script type="text/javascript" src="../../../../../core-js/target/classes/core.js"></script>
<col style="width:30%"/> <script type="text/javascript" src="../../../../src/main/javascript/EventDispatcher.js"></script>
<col style="width:60%"/> <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElementPeer.js"></script>
</colgroup> <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElementPeer.js"></script>
<tr> <script type="text/javascript" src="../../../../src/main/javascript/Element.js"></script>
<td> <script type="text/javascript" src="../../../../src/main/javascript/Workspace.js"></script>
Different types of PolyLines that can be used. <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/WorkspacePeer.js"></script>
</td> <script type="text/javascript" src="../../../../src/main/javascript/peer/vml/WorkspacePeer.js"></script>
<td> <script type="text/javascript" src="../../../../src/main/javascript/Toolkit.js"></script>
<div id="overflowExample"/> <script type="text/javascript" src="../../../../src/main/javascript/Elipse.js"></script>
</td> <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>
</tr> <script type="text/javascript" src="../../../../src/main/javascript/Line.js"></script>
<script type="text/javascript"> <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(); web2d.peer.Toolkit.init();
var overflowWorkspace = new web2d.Workspace({fillColor:'green'}); var overflowWorkspace = new web2d.Workspace({fillColor:'green'});
@ -107,17 +144,6 @@
overflowWorkspace.addItAsChildTo($("overflowExample")); 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(); var overflowWorkspace = new web2d.Workspace();
overflowWorkspace.setSize("100px", "100px"); overflowWorkspace.setSize("100px", "100px");
@ -166,9 +192,37 @@
overflowWorkspace.appendChild(line1); overflowWorkspace.appendChild(line1);
overflowWorkspace.addItAsChildTo($("multipleLineExample")); 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> </table>
</body> </body>
</html> </html>

View File

@ -2,54 +2,105 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <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> <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> workspace = new web2d.Workspace();
workspace.setSize(xScale + "px", yScale + "px");
<h1>Chart prototype Tests </h1> workspace.setCoordSize(xScale, yScale);
workspace.setCoordOrigin(0, 0);
<input type="button" value="Create Shape" name="Create Shape" onclick="createShape();"/> workspace.setFill("#f0f0f0");
<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"> // 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; function zoomIn()
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()
{
xScale = xScale / 2; xScale = xScale / 2;
yScale = yScale / 2; yScale = yScale / 2;
workspace.setSize(xScale + "px", yScale + "px"); workspace.setSize(xScale + "px", yScale + "px");
} }
function zoomOut() function zoomOut()
{ {
xScale = xScale * 2; xScale = xScale * 2;
yScale = yScale * 2; yScale = yScale * 2;
workspace.setSize(xScale + "px", yScale + "px"); workspace.setSize(xScale + "px", yScale + "px");
} }
function createShape()
{
var shapeOrigX = 0;
function createShape()
{
// Secondary Idea... // Secondary Idea...
var nodeGroup = new web2d.Group(); var nodeGroup = new web2d.Group();
nodeGroup.setSize(200, 60); 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> </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: Notas:
<li>El evento de mousemove se debe agregar al workspace. <li>El evento de mousemove se debe agregar al workspace.

View File

@ -2,6 +2,7 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<script type="text/javascript"> <script type="text/javascript">
web2d = { web2d = {
peer: {} 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/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/ArialFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/VerdanaFont.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" 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"> <script type="text/javascript">
function initialize(){
web2d.peer.Toolkit.init(); web2d.peer.Toolkit.init();
var rectExampleTest = function () var rectExampleTest = function ()
@ -98,19 +78,6 @@
workspace.addItAsChildTo($("rectExample")); workspace.addItAsChildTo($("rectExample"));
} }
rectExampleTest(); 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 () var roundrectExampleTest = function ()
{ {
@ -142,7 +109,40 @@
} }
roundrectExampleTest(); roundrectExampleTest();
}
</script> </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> </table>

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/ArialFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/VerdanaFont.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" src="utils.js"></script>
</head> <script type="text/javascript">
function initialize(){
<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">
web2d.peer.Toolkit.init(); web2d.peer.Toolkit.init();
var strokeStyleTest = function () var strokeStyleTest = function ()
@ -136,7 +110,6 @@
rect.setStroke(strokeWidth, 'dashdot', 'black'); rect.setStroke(strokeWidth, 'dashdot', 'black');
parent.appendChild(rect); parent.appendChild(rect);
} }
;
// Workspace with default scale ... // Workspace with default scale ...
var workspace = new web2d.Workspace(); var workspace = new web2d.Workspace();
@ -165,54 +138,7 @@
}; };
strokeStyleTest(); 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 strokeOpacityTest = function ()
{ {
var workspace = new web2d.Workspace(); var workspace = new web2d.Workspace();
@ -248,18 +174,8 @@
workspace.addItAsChildTo($("strokeOpacity")); workspace.addItAsChildTo($("strokeOpacity"));
}; };
strokeOpacityTest(); strokeOpacityTest();
</script>
<!-- ************************************************** -->
<tr>
<td>
Fill Opacity.
</td>
<td>
<div id="fillOpacity"/>
</td>
</tr>
<script type="text/javascript">
var fillOpacityTest = function () var fillOpacityTest = function ()
{ {
var workspace = new web2d.Workspace(); var workspace = new web2d.Workspace();
@ -295,18 +211,8 @@
workspace.addItAsChildTo($("fillOpacity")); workspace.addItAsChildTo($("fillOpacity"));
}; };
fillOpacityTest(); fillOpacityTest();
</script>
<!-- ************************************************** -->
<tr>
<td>
Opacity.
</td>
<td>
<div id="opacity"/>
</td>
</tr>
<script type="text/javascript">
var opacityTest = function () var opacityTest = function ()
{ {
var workspace = new web2d.Workspace(); var workspace = new web2d.Workspace();
@ -342,17 +248,8 @@
workspace.addItAsChildTo($("opacity")); workspace.addItAsChildTo($("opacity"));
}; };
opacityTest(); opacityTest();
</script>
<tr>
<td>
Visibility.
</td>
<td>
<div id="visibility"/>
</td>
</tr>
<script type="text/javascript">
var visibilityTest = function () var visibilityTest = function ()
{ {
var workspace = new web2d.Workspace({fillColor:'yellow',strokeWidth:'2px'}); var workspace = new web2d.Workspace({fillColor:'yellow',strokeWidth:'2px'});
@ -379,7 +276,80 @@
workspace.addItAsChildTo($("visibility")); workspace.addItAsChildTo($("visibility"));
}; };
visibilityTest(); 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> </table>
</body> </body>

View File

@ -2,12 +2,64 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<script type="text/javascript" src="web2dLibraryLoader.js"></script> <script type="text/javascript">
</head> 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() function zoomIn()
{ {
for(i=0; i<workspaces.length; i++) for(i=0; i<workspaces.length; i++)
@ -18,6 +70,7 @@
}; };
workspaces = []; workspaces = [];
var textot;
var TextTest = function (size,coordSize,textval,font,fontSizeval, style, modifier, fontColor, owner, iesimo) var TextTest = function (size,coordSize,textval,font,fontSizeval, style, modifier, fontColor, owner, iesimo)
{ {
@ -38,6 +91,7 @@
text.setFont(font, fontSizeval, style, modifier); text.setFont(font, fontSizeval, style, modifier);
text.setPosition(0, 0); text.setPosition(0, 0);
text.setColor(fontColor); text.setColor(fontColor);
textot = text;
overflowWorkspace.addItAsChildTo($(owner)); overflowWorkspace.addItAsChildTo($(owner));
@ -64,7 +118,20 @@
parent.appendChild(span); parent.appendChild(span);
workspaces[iesimo]=overflowWorkspace; 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> </script>
</head>
<body onload="initialize();">
<h1>Text Render Tests </h1> <h1>Text Render Tests </h1>
@ -78,22 +145,14 @@
Simple text Simple text
</td> </td>
<td> <td>
<div id="text0"/> <div id="text0"></div>
<div id="text1"/> <div id="text1"></div>
<div id="text2"/> <div id="text2"></div>
<div id="text3"/> <div id="text3"></div>
<div id="text4"/> <div id="text4"></div>
</td> </td>
</tr> </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> </table>

View File

@ -31,18 +31,20 @@ web2d.peer =
web2d.peer.utils = {}; web2d.peer.utils = {};
web2d.Loader = web2d.Loader =
{ {
load: function(scriptPath, stylePath, jsFileName) load: function(scriptPath, stylePath, jsFileName, callbackFn)
{ {
var headElement = document.getElementsByTagName('head'); var headElement = document.getElementsByTagName('head');
var htmlDoc = headElement.item(0); var htmlDoc = headElement.item(0);
var baseUrl = this.baseUrl(jsFileName); var baseUrl = this.baseUrl(jsFileName);
this.files = scriptPath;
this.callbackFn = callbackFn;
if (scriptPath && scriptPath.length > 0) if (scriptPath && scriptPath.length > 0)
{ {
for (var i = 0; i < scriptPath.length; i++) for (var i = 0; i < scriptPath.length; i++)
{ {
var file = scriptPath[i];
this.includeScriptNode(baseUrl + scriptPath[i]); this.includeScriptNode(baseUrl + file);
} }
} }
}, },
@ -79,6 +81,24 @@ web2d.Loader =
js.setAttribute('language', 'javascript'); js.setAttribute('language', 'javascript');
js.setAttribute('type', 'text/javascript'); js.setAttribute('type', 'text/javascript');
js.setAttribute('src', filename); 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); html_doc.appendChild(js);
return false; return false;
}, },
@ -90,6 +110,23 @@ web2d.Loader =
js.setAttribute('href', filename); js.setAttribute('href', filename);
html_doc.appendChild(js); html_doc.appendChild(js);
return false; 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: [ scriptPath: [
"/render/mootools.js", "/render/mootools.js",
"/../../../../core-js/target/classes/core.js", "../../../../../core-js/target/classes/core.js",
"/../../../src/main/javascript/EventDispatcher.js", "/../../../src/main/javascript/EventDispatcher.js",
"/../../../src/main/javascript/peer/vml/ElementPeer.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/Element.js",
"/../../../src/main/javascript/Workspace.js", "/../../../src/main/javascript/Workspace.js",
"/../../../src/main/javascript/peer/svg/WorkspacePeer.js", "/../../../src/main/javascript/peer/svg/WorkspacePeer.js",
@ -141,10 +178,10 @@ web2d.JsLoader =
"/../../../src/main/javascript/peer/vml/VerdanaFont.js"], "/../../../src/main/javascript/peer/vml/VerdanaFont.js"],
stylePath: [], 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();

View File

@ -2,7 +2,8 @@
<html> <html>
<head> <head>
<script type="text/javascript">
<script type="text/javascript">
web2d = { web2d = {
peer: {} 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/ArialFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/VerdanaFont.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" src="utils.js"></script>
</head> <script type="text/javascript">
function initialize(){
<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">
web2d.peer.Toolkit.init(); web2d.peer.Toolkit.init();
var overflowWorkspace = new web2d.Workspace(); var overflowWorkspace = new web2d.Workspace();
@ -94,18 +72,6 @@
overflowWorkspace.appendChild(elipse1); overflowWorkspace.appendChild(elipse1);
overflowWorkspace.addItAsChildTo($("overflowExample")); 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() var workspacePosition = function()
{ {
@ -130,24 +96,6 @@
}; };
workspacePosition(); 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. // Draw a reference grid.
var container = document.getElementById("sizeExampleContainer"); var container = document.getElementById("sizeExampleContainer");
var grid = new Grid(container, 35, 12); var grid = new Grid(container, 35, 12);
@ -173,42 +121,7 @@
workspaceInchs.appendChild(elipse); workspaceInchs.appendChild(elipse);
workspaceInchs.addItAsChildTo($("sizeExampleInch")); 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() var workspaceCoordSizeSample = function()
{ {
// Workspace with CoordSize(100,100); // Workspace with CoordSize(100,100);
@ -268,43 +181,8 @@
}; };
workspaceCoordSizeSample(); 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() var workspaceCoordOriginSample = function()
{ {
@ -367,7 +245,124 @@
executer.periodical(100); executer.periodical(100);
}; };
workspaceCoordOriginSample(); 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> </table>
</body> </body>

View File

@ -33,10 +33,10 @@ public class UserAgent implements Serializable {
private final org.apache.commons.logging.Log logger = LogFactory.getLog(UserAgent.class.getName()); private final org.apache.commons.logging.Log logger = LogFactory.getLog(UserAgent.class.getName());
public static void main(final String argv[]) { 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 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 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 opera = UserAgent.create("Opera/9.21 (Windows NT 5.1; U; en)");
@ -83,7 +83,7 @@ public class UserAgent implements Serializable {
} }
public enum Product { 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 { public enum OS {
@ -131,7 +131,21 @@ public class UserAgent implements Serializable {
} else if (userAgentHeader.indexOf("iCab") != -1 || userAgentHeader.indexOf("Safari") != -1) { } else if (userAgentHeader.indexOf("iCab") != -1 || userAgentHeader.indexOf("Safari") != -1) {
// Safari: // 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 //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; this.product = Product.SAFARI;
versionStr = userAgentHeader.substring(userAgentHeader.indexOf("Version")+8,userAgentHeader.lastIndexOf(" "));
}
parseVersion(versionStr);
} else if (userAgentHeader.indexOf("Konqueror") != -1) { } else if (userAgentHeader.indexOf("Konqueror") != -1) {
this.product = Product.KONQUEOR; 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.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.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; return result;
} }

View File

@ -256,6 +256,15 @@ div#redoEdition {
#export { #export {
background: url(../images/file_export.png) no-repeat center top; background: url(../images/file_export.png) no-repeat center top;
behavior: url(../css/iepngfix.htc); behavior: url(../css/iepngfix.htc);
position:relative;
}
#exportAnchor {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
} }
div#zoomIn { div#zoomIn {

View File

@ -329,7 +329,7 @@ Properties:
*/ */
window.xpath = !!(document.evaluate); 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.childNodes && !document.all && !navigator.taintEnabled) window.webkit = window[window.xpath ? 'webkit420' : 'webkit419'] = true;
else if (document.getBoxObjectFor != null) window.gecko = true; else if (document.getBoxObjectFor != null) window.gecko = true;
@ -1733,7 +1733,7 @@ var Element = new Class({
initialize: function(el, props) { initialize: function(el, props) {
if ($type(el) == 'string') { 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 name = (props.name) ? ' name="' + props.name + '"' : '';
var type = (props.type) ? ' type="' + props.type + '"' : ''; var type = (props.type) ? ' type="' + props.type + '"' : '';
delete props.name; delete props.name;
@ -3100,7 +3100,11 @@ Elements.extend({
filterByClass: function(className, nocash) { filterByClass: function(className, nocash) {
var elements = this.filter(function(el) { var elements = this.filter(function(el) {
if(el.className && el.className.contains)
return (el.className && el.className.contains(className, ' ')); return (el.className && el.className.contains(className, ' '));
else if(el.className){
return el.className[className]!=undefined;
}
}); });
return (nocash) ? elements : new Elements(elements); return (nocash) ? elements : new Elements(elements);
}, },

View File

@ -137,17 +137,17 @@
<div id="redoEdition" class="button" title="<spring:message code="REDO_EDITION"/>"> <div id="redoEdition" class="button" title="<spring:message code="REDO_EDITION"/>">
<div class="toolbarLabel"><p><spring:message code="REDO"/></p></div> <div class="toolbarLabel"><p><spring:message code="REDO"/></p></div>
</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 class="toolbarLabel"><p><spring:message code="PRINT"/></p></div>
</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 id="export" class="button" title="<spring:message code="EXPORT"/>">
<div class="toolbarLabel"><p><spring:message code="EXPORT"/></p></div> <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> </a>
</div>
</fieldset> </fieldset>
</div> </div>
<div id="zoom" class="buttonContainer" title="Zoom In"> <div id="zoom" class="buttonContainer" title="Zoom In">