mirror of
https://bitbucket.org/wisemapping/wisemapping-open-source.git
synced 2024-08-20 12:30:44 +02:00
Adding Chrome, Safari and IE9 support
This commit is contained in:
parent
2efa40c664
commit
5b997de415
@ -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"
|
||||||
|
@ -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;
|
||||||
|
@ -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,28 +85,26 @@ 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)
|
|
||||||
|
if (!dragNode._isInTheWorkspace)
|
||||||
{
|
{
|
||||||
// Disable mouse move rendering ...
|
// Add shadow node to the workspace.
|
||||||
dragManager._processMouseMoveEvent = false;
|
workspace.appendChild(dragNode);
|
||||||
if (!dragNode._isInTheWorkspace)
|
dragNode._isInTheWorkspace = true;
|
||||||
{
|
|
||||||
// Add shadow node to the workspace.
|
|
||||||
workspace.appendChild(dragNode);
|
|
||||||
dragNode._isInTheWorkspace = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
var pos = screen.getWorkspaceMousePosition(event);
|
|
||||||
dragNode.setPosition(pos.x, pos.y);
|
|
||||||
|
|
||||||
// Call mouse move listeners ...
|
|
||||||
var dragListener = dragManager._listeners['dragging'];
|
|
||||||
if (dragListener)
|
|
||||||
{
|
|
||||||
dragListener(event, dragNode);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
|
||||||
|
var pos = screen.getWorkspaceMousePosition(event);
|
||||||
|
dragNode.setPosition(pos.x, pos.y);
|
||||||
|
|
||||||
|
// Call mouse move listeners ...
|
||||||
|
var dragListener = dragManager._listeners['dragging'];
|
||||||
|
if (dragListener)
|
||||||
|
{
|
||||||
|
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';
|
||||||
|
|
||||||
|
@ -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
|
||||||
|
@ -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.
|
||||||
|
@ -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;
|
|
||||||
|
@ -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 ()
|
||||||
|
@ -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>
|
||||||
|
@ -2,11 +2,394 @@
|
|||||||
|
|
||||||
<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>
|
||||||
|
<script type="text/javascript">
|
||||||
|
function initialize(){
|
||||||
|
web2d.peer.Toolkit.init();
|
||||||
|
|
||||||
|
var basicTest = function()
|
||||||
|
{
|
||||||
|
var workspace = new web2d.Workspace();
|
||||||
|
workspace.setSize("150px", "150px");
|
||||||
|
workspace.setCoordSize(100, 100);
|
||||||
|
|
||||||
|
var group = new web2d.Group();
|
||||||
|
group.setSize(50, 50);
|
||||||
|
group.setPosition(25, 50);
|
||||||
|
group.setCoordSize(200, 200);
|
||||||
|
group.setCoordOrigin(0, 0);
|
||||||
|
workspace.appendChild(group);
|
||||||
|
|
||||||
|
var elipse = new web2d.Elipse();
|
||||||
|
elipse.setSize(200, 200);
|
||||||
|
elipse.setPosition(100, 100);
|
||||||
|
group.appendChild(elipse);
|
||||||
|
|
||||||
|
var line = new web2d.Line();
|
||||||
|
line.setFrom(0, 0);
|
||||||
|
line.setTo(200, 200);
|
||||||
|
line.setStroke("blue");
|
||||||
|
group.appendChild(line);
|
||||||
|
|
||||||
|
line = new web2d.Line();
|
||||||
|
line.setFrom(200, 0);
|
||||||
|
line.setTo(0, 200);
|
||||||
|
line.setStroke("blue");
|
||||||
|
group.appendChild(line);
|
||||||
|
|
||||||
|
workspace.addItAsChildTo($("groupBasicContainer"));
|
||||||
|
|
||||||
|
|
||||||
|
var xDir = 1;
|
||||||
|
var yDir = 1;
|
||||||
|
var executer = function()
|
||||||
|
{
|
||||||
|
var y = group.getPosition().y + yDir;
|
||||||
|
var x = group.getPosition().x + xDir;
|
||||||
|
|
||||||
|
if (x < 0)
|
||||||
|
{
|
||||||
|
xDir = 1;
|
||||||
|
} else if (x > 50)
|
||||||
|
{
|
||||||
|
xDir = -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (y < 0)
|
||||||
|
{
|
||||||
|
yDir = 1;
|
||||||
|
} else if (y > 50)
|
||||||
|
{
|
||||||
|
yDir = -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Logger.logMsg("Moving group x,y:"+ x + "," + y);
|
||||||
|
group.setPosition(x, y);
|
||||||
|
};
|
||||||
|
executer.periodical(100);
|
||||||
|
};
|
||||||
|
basicTest();
|
||||||
|
|
||||||
|
|
||||||
|
var eventTest = function()
|
||||||
|
{
|
||||||
|
var workspace = new web2d.Workspace();
|
||||||
|
workspace.setSize("150px", "150px");
|
||||||
|
workspace.setCoordSize(100, 100);
|
||||||
|
|
||||||
|
var groupAttributes = {width:50,height:50,x:25,y:50,coordSize:'200 200',coordOrigin:'0 0'};
|
||||||
|
var group = new web2d.Group(groupAttributes);
|
||||||
|
workspace.appendChild(group);
|
||||||
|
|
||||||
|
var elipseLeft = new web2d.Elipse();
|
||||||
|
elipseLeft.setSize(200, 200)
|
||||||
|
elipseLeft.setPosition(200, 0)
|
||||||
|
group.appendChild(elipseLeft);
|
||||||
|
|
||||||
|
var elipseRight = new web2d.Elipse();
|
||||||
|
elipseRight.setSize(200, 200)
|
||||||
|
elipseRight.setPosition(0, 0)
|
||||||
|
group.appendChild(elipseRight);
|
||||||
|
|
||||||
|
var listener = function(e) {
|
||||||
|
alert("Click event on:" + this.getType())
|
||||||
|
};
|
||||||
|
group.addEventListener("click", listener);
|
||||||
|
elipseLeft.addEventListener("click", listener);
|
||||||
|
elipseRight.addEventListener("click", listener);
|
||||||
|
|
||||||
|
workspace.addItAsChildTo($("groupEventsContainer"));
|
||||||
|
}
|
||||||
|
eventTest();
|
||||||
|
|
||||||
|
|
||||||
|
var eventTest = function()
|
||||||
|
{
|
||||||
|
var workspace = new web2d.Workspace();
|
||||||
|
workspace.setSize("150px", "150px");
|
||||||
|
workspace.setCoordSize(200, 200);
|
||||||
|
|
||||||
|
var groupOuter = new web2d.Group();
|
||||||
|
groupOuter.setSize(50, 50)
|
||||||
|
groupOuter.setPosition(25, 25);
|
||||||
|
groupOuter.setCoordSize(100, 100);
|
||||||
|
groupOuter.setCoordOrigin(0, 0)
|
||||||
|
workspace.appendChild(groupOuter);
|
||||||
|
|
||||||
|
var elipseOuter = new web2d.Elipse();
|
||||||
|
elipseOuter.setSize(200, 200);
|
||||||
|
elipseOuter.setPosition(100, 100);
|
||||||
|
elipseOuter.setFill("red");
|
||||||
|
groupOuter.appendChild(elipseOuter);
|
||||||
|
|
||||||
|
var line = new web2d.Line();
|
||||||
|
line.setFrom(0, 0);
|
||||||
|
line.setTo(200, 200);
|
||||||
|
line.setStroke("red");
|
||||||
|
groupOuter.appendChild(line);
|
||||||
|
|
||||||
|
var line = new web2d.Line();
|
||||||
|
line.setFrom(200, 0);
|
||||||
|
line.setTo(0, 200);
|
||||||
|
line.setStroke("red");
|
||||||
|
groupOuter.appendChild(line);
|
||||||
|
|
||||||
|
var groupInner = new web2d.Group();
|
||||||
|
groupInner.setSize(50, 50);
|
||||||
|
groupInner.setPosition(25, 25);
|
||||||
|
groupInner.setCoordSize(100, 100);
|
||||||
|
groupInner.setCoordOrigin(0, 0);
|
||||||
|
groupOuter.appendChild(groupInner);
|
||||||
|
|
||||||
|
var elipse = new web2d.Elipse();
|
||||||
|
elipse.setSize(200, 200);
|
||||||
|
elipse.setPosition(100, 100);
|
||||||
|
groupInner.appendChild(elipse);
|
||||||
|
|
||||||
|
var line = new web2d.Line();
|
||||||
|
line.setFrom(0, 0);
|
||||||
|
line.setTo(200, 200);
|
||||||
|
line.setStroke("blue");
|
||||||
|
groupInner.appendChild(line);
|
||||||
|
|
||||||
|
var line = new web2d.Line();
|
||||||
|
line.setFrom(200, 0);
|
||||||
|
line.setTo(0, 200);
|
||||||
|
line.setStroke("blue");
|
||||||
|
groupInner.appendChild(line);
|
||||||
|
|
||||||
|
workspace.addItAsChildTo($("groupNestedContainer"));
|
||||||
|
};
|
||||||
|
eventTest();
|
||||||
|
|
||||||
|
|
||||||
|
var workspaceCoordSizeSample = function()
|
||||||
|
{
|
||||||
|
|
||||||
|
function groupSampleBuilder(width, height)
|
||||||
|
{
|
||||||
|
// Group with CoordSize(50,50);
|
||||||
|
var workspace = new web2d.Workspace();
|
||||||
|
workspace.setSize("100px", "100px");
|
||||||
|
workspace.setCoordSize(100, 100);
|
||||||
|
|
||||||
|
elipseOuter = new web2d.Elipse();
|
||||||
|
elipseOuter.setPosition(50, 50);
|
||||||
|
elipseOuter.setSize(50, 50);
|
||||||
|
workspace.appendChild(elipseOuter);
|
||||||
|
|
||||||
|
var group = new web2d.Group();
|
||||||
|
group.setSize(50, 50);
|
||||||
|
group.setCoordSize(width, height);
|
||||||
|
group.setPosition(25, 25);
|
||||||
|
workspace.appendChild(group);
|
||||||
|
|
||||||
|
elipseInner = new web2d.Elipse();
|
||||||
|
elipseInner.setPosition(50, 50);
|
||||||
|
elipseInner.setSize(50, 50);
|
||||||
|
elipseInner.setFill("red");
|
||||||
|
group.appendChild(elipseInner);
|
||||||
|
|
||||||
|
return workspace;
|
||||||
|
}
|
||||||
|
|
||||||
|
var sample100x100 = groupSampleBuilder(100, 100);
|
||||||
|
sample100x100.addItAsChildTo($("coordsizeExample100x100"));
|
||||||
|
|
||||||
|
var sample100x200 = groupSampleBuilder(100, 200);
|
||||||
|
sample100x200.addItAsChildTo($("coordsizeExample100x200"));
|
||||||
|
|
||||||
|
var sample200x100 = groupSampleBuilder(200, 100);
|
||||||
|
sample200x100.addItAsChildTo($("coordsizeExample200x100"));
|
||||||
|
};
|
||||||
|
workspaceCoordSizeSample();
|
||||||
|
|
||||||
|
|
||||||
|
var workspaceCoordOriginSample = function()
|
||||||
|
{
|
||||||
|
|
||||||
|
function groupSampleBuilder(x, y)
|
||||||
|
{
|
||||||
|
var workspace = new web2d.Workspace();
|
||||||
|
workspace.setSize("100px", "100px");
|
||||||
|
workspace.setCoordSize(100, 100);
|
||||||
|
|
||||||
|
elipseOuter = new web2d.Elipse();
|
||||||
|
elipseOuter.setPosition(50, 50);
|
||||||
|
elipseOuter.setSize(50, 50);
|
||||||
|
workspace.appendChild(elipseOuter);
|
||||||
|
|
||||||
|
var group = new web2d.Group();
|
||||||
|
group.setSize(50, 50);
|
||||||
|
group.setCoordSize(100, 100);
|
||||||
|
group.setCoordOrigin(x, y);
|
||||||
|
group.setPosition(25, 25);
|
||||||
|
workspace.appendChild(group);
|
||||||
|
|
||||||
|
elipseInner = new web2d.Elipse();
|
||||||
|
elipseInner.setPosition(50, 50);
|
||||||
|
elipseInner.setSize(50, 50);
|
||||||
|
elipseInner.setFill("red");
|
||||||
|
group.appendChild(elipseInner);
|
||||||
|
|
||||||
|
return workspace;
|
||||||
|
}
|
||||||
|
;
|
||||||
|
|
||||||
|
var sample0x0 = groupSampleBuilder(0, 0);
|
||||||
|
sample0x0.addItAsChildTo($("coordOriginExample0x0"));
|
||||||
|
|
||||||
|
var sample100x200 = groupSampleBuilder(0, 50);
|
||||||
|
sample100x200.addItAsChildTo($("coordOriginExample0x50"));
|
||||||
|
|
||||||
|
var sample200x100 = groupSampleBuilder(50, 0);
|
||||||
|
sample200x100.addItAsChildTo($("coordOriginExample50x0"));
|
||||||
|
}
|
||||||
|
workspaceCoordOriginSample();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var groupVisibilitySample = function()
|
||||||
|
{
|
||||||
|
|
||||||
|
var workspace = new web2d.Workspace();
|
||||||
|
workspace.setSize("100px", "100px");
|
||||||
|
workspace.setCoordSize(100, 100);
|
||||||
|
|
||||||
|
var group = new web2d.Group();
|
||||||
|
group.setSize(100, 100);
|
||||||
|
group.setPosition(0, 0);
|
||||||
|
group.setCoordSize(100, 100);
|
||||||
|
group.addEventListener("mouseover", function() {
|
||||||
|
alert("Mouse Over Group");
|
||||||
|
});
|
||||||
|
workspace.appendChild(group);
|
||||||
|
|
||||||
|
elipseOuter = new web2d.Elipse();
|
||||||
|
elipseOuter.setPosition(50, 50);
|
||||||
|
elipseOuter.setSize(50, 50);
|
||||||
|
group.addEventListener("mouseover", function() {
|
||||||
|
alert("Mouse Over elipseOuter");
|
||||||
|
});
|
||||||
|
group.appendChild(elipseOuter);
|
||||||
|
|
||||||
|
elipseInner = new web2d.Elipse();
|
||||||
|
elipseInner.setPosition(50, 50);
|
||||||
|
elipseInner.setSize(25, 25);
|
||||||
|
elipseInner.setFill("red");
|
||||||
|
group.appendChild(elipseInner);
|
||||||
|
|
||||||
|
var isVisible = true;
|
||||||
|
var executer = function()
|
||||||
|
{
|
||||||
|
isVisible = !isVisible;
|
||||||
|
group.setVisibility(isVisible);
|
||||||
|
};
|
||||||
|
executer.periodical(100);
|
||||||
|
workspace.addItAsChildTo($("visibilityExample"));
|
||||||
|
|
||||||
|
}
|
||||||
|
groupVisibilitySample();
|
||||||
|
|
||||||
|
var groupVisibilitySample = function()
|
||||||
|
{
|
||||||
|
|
||||||
|
var workspace = new web2d.Workspace();
|
||||||
|
workspace.setSize("100px", "100px");
|
||||||
|
workspace.setCoordSize(100, 100);
|
||||||
|
|
||||||
|
var group = new web2d.Group();
|
||||||
|
group.setSize(100, 100);
|
||||||
|
group.setPosition(0, 0);
|
||||||
|
group.setCoordSize(100, 100);
|
||||||
|
workspace.appendChild(group);
|
||||||
|
|
||||||
|
elipseOuter = new web2d.Elipse();
|
||||||
|
elipseOuter.setPosition(50, 50);
|
||||||
|
elipseOuter.setSize(50, 50);
|
||||||
|
group.appendChild(elipseOuter);
|
||||||
|
|
||||||
|
elipseInner = new web2d.Elipse();
|
||||||
|
elipseInner.setPosition(50, 50);
|
||||||
|
elipseInner.setSize(25, 25);
|
||||||
|
elipseInner.setFill("red");
|
||||||
|
group.appendChild(elipseInner);
|
||||||
|
|
||||||
|
var width = 10;
|
||||||
|
var height = 10;
|
||||||
|
var executer = function()
|
||||||
|
{
|
||||||
|
width = (width + 10) % 100;
|
||||||
|
height = (height + 10) % 100;
|
||||||
|
group.setCoordSize(width, height);
|
||||||
|
};
|
||||||
|
executer.periodical(100);
|
||||||
|
workspace.addItAsChildTo($("scaleStrokeExample"));
|
||||||
|
|
||||||
|
}
|
||||||
|
groupVisibilitySample();
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body onload="initialize();">
|
||||||
|
|
||||||
<h1>Group Render Tests.</h1>
|
<h1>Group Render Tests.</h1>
|
||||||
<table border="1">
|
<table border="1">
|
||||||
@ -26,72 +409,7 @@
|
|||||||
</td>
|
</td>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
<script type="text/javascript">
|
|
||||||
web2d.peer.Toolkit.init();
|
|
||||||
|
|
||||||
var basicTest = function()
|
|
||||||
{
|
|
||||||
var workspace = new web2d.Workspace();
|
|
||||||
workspace.setSize("150px", "150px");
|
|
||||||
workspace.setCoordSize(100, 100);
|
|
||||||
|
|
||||||
var group = new web2d.Group();
|
|
||||||
group.setSize(50, 50);
|
|
||||||
group.setPosition(25, 50);
|
|
||||||
group.setCoordSize(200, 200);
|
|
||||||
group.setCoordOrigin(0, 0);
|
|
||||||
workspace.appendChild(group);
|
|
||||||
|
|
||||||
var elipse = new web2d.Elipse();
|
|
||||||
elipse.setSize(200, 200);
|
|
||||||
elipse.setPosition(100, 100);
|
|
||||||
group.appendChild(elipse);
|
|
||||||
|
|
||||||
var line = new web2d.Line();
|
|
||||||
line.setFrom(0, 0);
|
|
||||||
line.setTo(200, 200);
|
|
||||||
line.setStroke("blue");
|
|
||||||
group.appendChild(line);
|
|
||||||
|
|
||||||
line = new web2d.Line();
|
|
||||||
line.setFrom(200, 0);
|
|
||||||
line.setTo(0, 200);
|
|
||||||
line.setStroke("blue");
|
|
||||||
group.appendChild(line);
|
|
||||||
|
|
||||||
workspace.addItAsChildTo($("groupBasicContainer"));
|
|
||||||
|
|
||||||
|
|
||||||
var xDir = 1;
|
|
||||||
var yDir = 1;
|
|
||||||
var executer = function()
|
|
||||||
{
|
|
||||||
var y = group.getPosition().y + yDir;
|
|
||||||
var x = group.getPosition().x + xDir;
|
|
||||||
|
|
||||||
if (x < 0)
|
|
||||||
{
|
|
||||||
xDir = 1;
|
|
||||||
} else if (x > 50)
|
|
||||||
{
|
|
||||||
xDir = -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (y < 0)
|
|
||||||
{
|
|
||||||
yDir = 1;
|
|
||||||
} else if (y > 50)
|
|
||||||
{
|
|
||||||
yDir = -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Logger.logMsg("Moving group x,y:"+ x + "," + y);
|
|
||||||
group.setPosition(x, y);
|
|
||||||
};
|
|
||||||
executer.periodical(100);
|
|
||||||
};
|
|
||||||
basicTest();
|
|
||||||
</script>
|
|
||||||
<!-- ************************************************************************** -->
|
<!-- ************************************************************************** -->
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
@ -104,39 +422,6 @@
|
|||||||
</td>
|
</td>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
var eventTest = function()
|
|
||||||
{
|
|
||||||
var workspace = new web2d.Workspace();
|
|
||||||
workspace.setSize("150px", "150px");
|
|
||||||
workspace.setCoordSize(100, 100);
|
|
||||||
|
|
||||||
var groupAttributes = {width:50,height:50,x:25,y:50,coordSize:'200 200',coordOrigin:'0 0'};
|
|
||||||
var group = new web2d.Group(groupAttributes);
|
|
||||||
workspace.appendChild(group);
|
|
||||||
|
|
||||||
var elipseLeft = new web2d.Elipse();
|
|
||||||
elipseLeft.setSize(200, 200)
|
|
||||||
elipseLeft.setPosition(200, 0)
|
|
||||||
group.appendChild(elipseLeft);
|
|
||||||
|
|
||||||
var elipseRight = new web2d.Elipse();
|
|
||||||
elipseRight.setSize(200, 200)
|
|
||||||
elipseRight.setPosition(0, 0)
|
|
||||||
group.appendChild(elipseRight);
|
|
||||||
|
|
||||||
var listener = function(e) {
|
|
||||||
alert("Click event on:" + this.getType())
|
|
||||||
};
|
|
||||||
group.addEventListener("click", listener);
|
|
||||||
elipseLeft.addEventListener("click", listener);
|
|
||||||
elipseRight.addEventListener("click", listener);
|
|
||||||
|
|
||||||
workspace.addItAsChildTo($("groupEventsContainer"));
|
|
||||||
}
|
|
||||||
eventTest();
|
|
||||||
</script>
|
|
||||||
<!-- ************************************************************************** -->
|
<!-- ************************************************************************** -->
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
@ -165,66 +450,6 @@
|
|||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
var eventTest = function()
|
|
||||||
{
|
|
||||||
var workspace = new web2d.Workspace();
|
|
||||||
workspace.setSize("150px", "150px");
|
|
||||||
workspace.setCoordSize(200, 200);
|
|
||||||
|
|
||||||
var groupOuter = new web2d.Group();
|
|
||||||
groupOuter.setSize(50, 50)
|
|
||||||
groupOuter.setPosition(25, 25);
|
|
||||||
groupOuter.setCoordSize(100, 100);
|
|
||||||
groupOuter.setCoordOrigin(0, 0)
|
|
||||||
workspace.appendChild(groupOuter);
|
|
||||||
|
|
||||||
var elipseOuter = new web2d.Elipse();
|
|
||||||
elipseOuter.setSize(200, 200);
|
|
||||||
elipseOuter.setPosition(100, 100);
|
|
||||||
elipseOuter.setFill("red");
|
|
||||||
groupOuter.appendChild(elipseOuter);
|
|
||||||
|
|
||||||
var line = new web2d.Line();
|
|
||||||
line.setFrom(0, 0);
|
|
||||||
line.setTo(200, 200);
|
|
||||||
line.setStroke("red");
|
|
||||||
groupOuter.appendChild(line);
|
|
||||||
|
|
||||||
var line = new web2d.Line();
|
|
||||||
line.setFrom(200, 0);
|
|
||||||
line.setTo(0, 200);
|
|
||||||
line.setStroke("red");
|
|
||||||
groupOuter.appendChild(line);
|
|
||||||
|
|
||||||
var groupInner = new web2d.Group();
|
|
||||||
groupInner.setSize(50, 50);
|
|
||||||
groupInner.setPosition(25, 25);
|
|
||||||
groupInner.setCoordSize(100, 100);
|
|
||||||
groupInner.setCoordOrigin(0, 0);
|
|
||||||
groupOuter.appendChild(groupInner);
|
|
||||||
|
|
||||||
var elipse = new web2d.Elipse();
|
|
||||||
elipse.setSize(200, 200);
|
|
||||||
elipse.setPosition(100, 100);
|
|
||||||
groupInner.appendChild(elipse);
|
|
||||||
|
|
||||||
var line = new web2d.Line();
|
|
||||||
line.setFrom(0, 0);
|
|
||||||
line.setTo(200, 200);
|
|
||||||
line.setStroke("blue");
|
|
||||||
groupInner.appendChild(line);
|
|
||||||
|
|
||||||
var line = new web2d.Line();
|
|
||||||
line.setFrom(200, 0);
|
|
||||||
line.setTo(0, 200);
|
|
||||||
line.setStroke("blue");
|
|
||||||
groupInner.appendChild(line);
|
|
||||||
|
|
||||||
workspace.addItAsChildTo($("groupNestedContainer"));
|
|
||||||
};
|
|
||||||
eventTest();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- ************************************************************************** -->
|
<!-- ************************************************************************** -->
|
||||||
<tr>
|
<tr>
|
||||||
@ -255,49 +480,6 @@
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
var workspaceCoordSizeSample = function()
|
|
||||||
{
|
|
||||||
|
|
||||||
function groupSampleBuilder(width, height)
|
|
||||||
{
|
|
||||||
// Group with CoordSize(50,50);
|
|
||||||
var workspace = new web2d.Workspace();
|
|
||||||
workspace.setSize("100px", "100px");
|
|
||||||
workspace.setCoordSize(100, 100);
|
|
||||||
|
|
||||||
elipseOuter = new web2d.Elipse();
|
|
||||||
elipseOuter.setPosition(50, 50);
|
|
||||||
elipseOuter.setSize(50, 50);
|
|
||||||
workspace.appendChild(elipseOuter);
|
|
||||||
|
|
||||||
var group = new web2d.Group();
|
|
||||||
group.setSize(50, 50);
|
|
||||||
group.setCoordSize(width, height);
|
|
||||||
group.setPosition(25, 25);
|
|
||||||
workspace.appendChild(group);
|
|
||||||
|
|
||||||
elipseInner = new web2d.Elipse();
|
|
||||||
elipseInner.setPosition(50, 50);
|
|
||||||
elipseInner.setSize(50, 50);
|
|
||||||
elipseInner.setFill("red");
|
|
||||||
group.appendChild(elipseInner);
|
|
||||||
|
|
||||||
return workspace;
|
|
||||||
}
|
|
||||||
|
|
||||||
var sample100x100 = groupSampleBuilder(100, 100);
|
|
||||||
sample100x100.addItAsChildTo($("coordsizeExample100x100"));
|
|
||||||
|
|
||||||
var sample100x200 = groupSampleBuilder(100, 200);
|
|
||||||
sample100x200.addItAsChildTo($("coordsizeExample100x200"));
|
|
||||||
|
|
||||||
var sample200x100 = groupSampleBuilder(200, 100);
|
|
||||||
sample200x100.addItAsChildTo($("coordsizeExample200x100"));
|
|
||||||
};
|
|
||||||
workspaceCoordSizeSample();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- ************************************************************************** -->
|
<!-- ************************************************************************** -->
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
@ -327,47 +509,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var workspaceCoordOriginSample = function()
|
|
||||||
{
|
|
||||||
|
|
||||||
function groupSampleBuilder(x, y)
|
|
||||||
{
|
|
||||||
var workspace = new web2d.Workspace();
|
|
||||||
workspace.setSize("100px", "100px");
|
|
||||||
workspace.setCoordSize(100, 100);
|
|
||||||
|
|
||||||
elipseOuter = new web2d.Elipse();
|
|
||||||
elipseOuter.setPosition(50, 50);
|
|
||||||
elipseOuter.setSize(50, 50);
|
|
||||||
workspace.appendChild(elipseOuter);
|
|
||||||
|
|
||||||
var group = new web2d.Group();
|
|
||||||
group.setSize(50, 50);
|
|
||||||
group.setCoordSize(100, 100);
|
|
||||||
group.setCoordOrigin(x, y);
|
|
||||||
group.setPosition(25, 25);
|
|
||||||
workspace.appendChild(group);
|
|
||||||
|
|
||||||
elipseInner = new web2d.Elipse();
|
|
||||||
elipseInner.setPosition(50, 50);
|
|
||||||
elipseInner.setSize(50, 50);
|
|
||||||
elipseInner.setFill("red");
|
|
||||||
group.appendChild(elipseInner);
|
|
||||||
|
|
||||||
return workspace;
|
|
||||||
}
|
|
||||||
;
|
|
||||||
|
|
||||||
var sample0x0 = groupSampleBuilder(0, 0);
|
|
||||||
sample0x0.addItAsChildTo($("coordOriginExample0x0"));
|
|
||||||
|
|
||||||
var sample100x200 = groupSampleBuilder(0, 50);
|
|
||||||
sample100x200.addItAsChildTo($("coordOriginExample0x50"));
|
|
||||||
|
|
||||||
var sample200x100 = groupSampleBuilder(50, 0);
|
|
||||||
sample200x100.addItAsChildTo($("coordOriginExample50x0"));
|
|
||||||
}
|
|
||||||
workspaceCoordOriginSample();
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- ************************************************************************** -->
|
<!-- ************************************************************************** -->
|
||||||
@ -381,50 +523,6 @@
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
var groupVisibilitySample = function()
|
|
||||||
{
|
|
||||||
|
|
||||||
var workspace = new web2d.Workspace();
|
|
||||||
workspace.setSize("100px", "100px");
|
|
||||||
workspace.setCoordSize(100, 100);
|
|
||||||
|
|
||||||
var group = new web2d.Group();
|
|
||||||
group.setSize(100, 100);
|
|
||||||
group.setPosition(0, 0);
|
|
||||||
group.setCoordSize(100, 100);
|
|
||||||
group.addEventListener("mouseover", function() {
|
|
||||||
alert("Mouse Over Group");
|
|
||||||
});
|
|
||||||
workspace.appendChild(group);
|
|
||||||
|
|
||||||
elipseOuter = new web2d.Elipse();
|
|
||||||
elipseOuter.setPosition(50, 50);
|
|
||||||
elipseOuter.setSize(50, 50);
|
|
||||||
group.addEventListener("mouseover", function() {
|
|
||||||
alert("Mouse Over elipseOuter");
|
|
||||||
});
|
|
||||||
group.appendChild(elipseOuter);
|
|
||||||
|
|
||||||
elipseInner = new web2d.Elipse();
|
|
||||||
elipseInner.setPosition(50, 50);
|
|
||||||
elipseInner.setSize(25, 25);
|
|
||||||
elipseInner.setFill("red");
|
|
||||||
group.appendChild(elipseInner);
|
|
||||||
|
|
||||||
var isVisible = true;
|
|
||||||
var executer = function()
|
|
||||||
{
|
|
||||||
isVisible = !isVisible;
|
|
||||||
group.setVisibility(isVisible);
|
|
||||||
};
|
|
||||||
executer.periodical(100);
|
|
||||||
workspace.addItAsChildTo($("visibilityExample"));
|
|
||||||
|
|
||||||
}
|
|
||||||
groupVisibilitySample();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- ************************************************************************** -->
|
<!-- ************************************************************************** -->
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
@ -435,46 +533,6 @@
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
var groupVisibilitySample = function()
|
|
||||||
{
|
|
||||||
|
|
||||||
var workspace = new web2d.Workspace();
|
|
||||||
workspace.setSize("100px", "100px");
|
|
||||||
workspace.setCoordSize(100, 100);
|
|
||||||
|
|
||||||
var group = new web2d.Group();
|
|
||||||
group.setSize(100, 100);
|
|
||||||
group.setPosition(0, 0);
|
|
||||||
group.setCoordSize(100, 100);
|
|
||||||
workspace.appendChild(group);
|
|
||||||
|
|
||||||
elipseOuter = new web2d.Elipse();
|
|
||||||
elipseOuter.setPosition(50, 50);
|
|
||||||
elipseOuter.setSize(50, 50);
|
|
||||||
group.appendChild(elipseOuter);
|
|
||||||
|
|
||||||
elipseInner = new web2d.Elipse();
|
|
||||||
elipseInner.setPosition(50, 50);
|
|
||||||
elipseInner.setSize(25, 25);
|
|
||||||
elipseInner.setFill("red");
|
|
||||||
group.appendChild(elipseInner);
|
|
||||||
|
|
||||||
var width = 10;
|
|
||||||
var height = 10;
|
|
||||||
var executer = function()
|
|
||||||
{
|
|
||||||
width = (width + 10) % 100;
|
|
||||||
height = (height + 10) % 100;
|
|
||||||
group.setCoordSize(width, height);
|
|
||||||
};
|
|
||||||
executer.periodical(100);
|
|
||||||
workspace.addItAsChildTo($("scaleStrokeExample"));
|
|
||||||
|
|
||||||
}
|
|
||||||
groupVisibilitySample();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</table>
|
</table>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
@ -2,11 +2,132 @@
|
|||||||
|
|
||||||
<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>
|
||||||
|
<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);
|
||||||
|
|
||||||
|
var rect = new web2d.Rect();
|
||||||
|
rect.setSize(10, 10);
|
||||||
|
rect.setStroke(0);
|
||||||
|
rect.setPosition(250, 5);
|
||||||
|
strokeWidthWorkspace.appendChild(rect);
|
||||||
|
|
||||||
|
for (var i = 0; i <= 10; i++)
|
||||||
|
{
|
||||||
|
var line = new web2d.Line();
|
||||||
|
line.setFrom(5 + (i * 25), 5);
|
||||||
|
line.setTo(5 + (i * 25), 45);
|
||||||
|
line.setAttribute('strokeWidth', i + 1);
|
||||||
|
strokeWidthWorkspace.appendChild(line);
|
||||||
|
}
|
||||||
|
strokeWidthWorkspace.appendChild(rect);
|
||||||
|
|
||||||
|
strokeWidthWorkspace.addItAsChildTo($("strokeWidthSample"));
|
||||||
|
|
||||||
|
var strokeOpacityWorkspace = new web2d.Workspace(workspaceAttributes);
|
||||||
|
for (var i = 0; i < 10; i++)
|
||||||
|
{
|
||||||
|
var line = new web2d.Line();
|
||||||
|
line.setFrom(15 + (i * 25), 5);
|
||||||
|
line.setTo(3 + (i * 25), 45);
|
||||||
|
line.setAttribute('strokeWidth', 2);
|
||||||
|
line.setAttribute('strokeOpacity', 1 / (i + 1));
|
||||||
|
line.setAttribute('strokeColor', 'red');
|
||||||
|
strokeOpacityWorkspace.appendChild(line);
|
||||||
|
}
|
||||||
|
strokeOpacityWorkspace.addItAsChildTo($("strokeOpacitySample"));
|
||||||
|
|
||||||
|
var strokeStyleWorkspace = new web2d.Workspace(workspaceAttributes);
|
||||||
|
var styles = ['solid','dot','dash','dashdot','longdash'];
|
||||||
|
for (var i = 0; i < styles.length; i++)
|
||||||
|
{
|
||||||
|
var line = new web2d.Line();
|
||||||
|
line.setFrom(25 + (i * 30), 5);
|
||||||
|
line.setTo(13 + (i * 30), 45);
|
||||||
|
line.setAttribute('strokeWidth', 2);
|
||||||
|
line.setAttribute('strokeColor', 'red');
|
||||||
|
line.setAttribute('strokeStyle', styles[i]);
|
||||||
|
strokeStyleWorkspace.appendChild(line);
|
||||||
|
}
|
||||||
|
strokeStyleWorkspace.addItAsChildTo($("strokeStyleSample"));
|
||||||
|
|
||||||
|
var strokeArrowWorkspace = new web2d.Workspace(workspaceAttributes);
|
||||||
|
var styles = ['none ','block ','classic','diamond ','oval','open','chevron','doublechevron'];
|
||||||
|
for (var i = 0; i < styles.length; i++)
|
||||||
|
{
|
||||||
|
var line = new web2d.Line();
|
||||||
|
line.setFrom(25 + (i * 30), 5);
|
||||||
|
line.setTo(13 + (i * 30), 45);
|
||||||
|
line.setAttribute('strokeWidth', 2);
|
||||||
|
line.setAttribute('strokeColor', 'red');
|
||||||
|
line.setArrowStyle(styles[i]);
|
||||||
|
strokeArrowWorkspace.appendChild(line);
|
||||||
|
}
|
||||||
|
strokeArrowWorkspace.addItAsChildTo($("strokeArrowSample"));
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body onload="initialize();">
|
||||||
|
|
||||||
<h1>Lines Render Tests </h1>
|
<h1>Lines Render Tests </h1>
|
||||||
|
|
||||||
@ -24,29 +145,6 @@
|
|||||||
</td>
|
</td>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
<script type="text/javascript">
|
|
||||||
web2d.peer.Toolkit.init();
|
|
||||||
var workspaceAttributes = { width:'700px',height:'100px',coordSize:'350 50',fillColor:'#ffffcc'};
|
|
||||||
var strokeWidthWorkspace = new web2d.Workspace(workspaceAttributes);
|
|
||||||
|
|
||||||
var rect = new web2d.Rect();
|
|
||||||
rect.setSize(10, 10);
|
|
||||||
rect.setStroke(0);
|
|
||||||
rect.setPosition(250, 5);
|
|
||||||
strokeWidthWorkspace.appendChild(rect);
|
|
||||||
|
|
||||||
for (var i = 0; i <= 10; i++)
|
|
||||||
{
|
|
||||||
var line = new web2d.Line();
|
|
||||||
line.setFrom(5 + (i * 25), 5);
|
|
||||||
line.setTo(5 + (i * 25), 45);
|
|
||||||
line.setAttribute('strokeWidth', i + 1);
|
|
||||||
strokeWidthWorkspace.appendChild(line);
|
|
||||||
}
|
|
||||||
strokeWidthWorkspace.appendChild(rect);
|
|
||||||
|
|
||||||
strokeWidthWorkspace.addItAsChildTo($("strokeWidthSample"));
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
@ -57,20 +155,6 @@
|
|||||||
</td>
|
</td>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
<script type="text/javascript">
|
|
||||||
var strokeOpacityWorkspace = new web2d.Workspace(workspaceAttributes);
|
|
||||||
for (var i = 0; i < 10; i++)
|
|
||||||
{
|
|
||||||
var line = new web2d.Line();
|
|
||||||
line.setFrom(15 + (i * 25), 5);
|
|
||||||
line.setTo(3 + (i * 25), 45);
|
|
||||||
line.setAttribute('strokeWidth', 2);
|
|
||||||
line.setAttribute('strokeOpacity', 1 / (i + 1));
|
|
||||||
line.setAttribute('strokeColor', 'red');
|
|
||||||
strokeOpacityWorkspace.appendChild(line);
|
|
||||||
}
|
|
||||||
strokeOpacityWorkspace.addItAsChildTo($("strokeOpacitySample"));
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
@ -82,22 +166,6 @@
|
|||||||
|
|
||||||
</tr>
|
</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++)
|
|
||||||
{
|
|
||||||
var line = new web2d.Line();
|
|
||||||
line.setFrom(25 + (i * 30), 5);
|
|
||||||
line.setTo(13 + (i * 30), 45);
|
|
||||||
line.setAttribute('strokeWidth', 2);
|
|
||||||
line.setAttribute('strokeColor', 'red');
|
|
||||||
line.setAttribute('strokeStyle', styles[i]);
|
|
||||||
strokeStyleWorkspace.appendChild(line);
|
|
||||||
}
|
|
||||||
strokeStyleWorkspace.addItAsChildTo($("strokeStyleSample"));
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
Line Arrows.
|
Line Arrows.
|
||||||
@ -108,22 +176,6 @@
|
|||||||
|
|
||||||
</tr>
|
</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++)
|
|
||||||
{
|
|
||||||
var line = new web2d.Line();
|
|
||||||
line.setFrom(25 + (i * 30), 5);
|
|
||||||
line.setTo(13 + (i * 30), 45);
|
|
||||||
line.setAttribute('strokeWidth', 2);
|
|
||||||
line.setAttribute('strokeColor', 'red');
|
|
||||||
line.setArrowStyle(styles[i]);
|
|
||||||
strokeArrowWorkspace.appendChild(line);
|
|
||||||
}
|
|
||||||
strokeArrowWorkspace.addItAsChildTo($("strokeArrowSample"));
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</table>
|
</table>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
@ -2,10 +2,201 @@
|
|||||||
|
|
||||||
<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">
|
||||||
|
function initialize(){
|
||||||
|
web2d.peer.Toolkit.init();
|
||||||
|
|
||||||
|
var overflowWorkspace = new web2d.Workspace({fillColor:'green'});
|
||||||
|
overflowWorkspace.setSize("100px", "100px");
|
||||||
|
|
||||||
|
var line = new web2d.PolyLine();
|
||||||
|
line.setTo(165, 165);
|
||||||
|
line.setFrom(95, 95);
|
||||||
|
line.setStyle("Straight");
|
||||||
|
line.setStroke('10');
|
||||||
|
overflowWorkspace.appendChild(line);
|
||||||
|
|
||||||
|
|
||||||
|
// line.setTo(165, 165);
|
||||||
|
// line.setFrom(95, 95);
|
||||||
|
// line.setTo(165, 165);
|
||||||
|
// line.setFrom(95, 95);
|
||||||
|
// line.setTo(165, 165);
|
||||||
|
// line.setFrom(95, 95);
|
||||||
|
// line.setTo(165, 165);
|
||||||
|
// line.setTo(165, 165);
|
||||||
|
// line.setFrom(95, 95);
|
||||||
|
// line.setTo(165, 165);
|
||||||
|
// line.setFrom(95, 95);
|
||||||
|
// line.setTo(165, 165);
|
||||||
|
// line.setFrom(95, 95);
|
||||||
|
// line.setTo(165, 165);
|
||||||
|
// line.setTo(165, 165);
|
||||||
|
// line.setFrom(95, 95);
|
||||||
|
// line.setTo(165, 165);
|
||||||
|
// line.setFrom(95, 95);
|
||||||
|
// line.setTo(165, 165);
|
||||||
|
// line.setFrom(95, 95);
|
||||||
|
// line.setTo(165, 165);
|
||||||
|
// line.setTo(165, 165);
|
||||||
|
// line.setFrom(95, 95);
|
||||||
|
// line.setTo(165, 165);
|
||||||
|
// line.setFrom(95, 95);
|
||||||
|
// line.setTo(165, 165);
|
||||||
|
// line.setFrom(95, 95);
|
||||||
|
// line.setTo(165, 165);
|
||||||
|
// line.setTo(165, 165);
|
||||||
|
// line.setFrom(95, 95);
|
||||||
|
// line.setTo(165, 165);
|
||||||
|
// line.setFrom(95, 95);
|
||||||
|
// line.setTo(165, -1653.0000000000000000000001);
|
||||||
|
// line.setFrom(95, 952);
|
||||||
|
// line.setTo(165, 1651);
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// var line = new web2d.PolyLine();
|
||||||
|
// line.setFrom(95, 90);
|
||||||
|
// line.setTo(160, 20);
|
||||||
|
// overflowWorkspace.appendChild(line);
|
||||||
|
//
|
||||||
|
// var line = new web2d.PolyLine();
|
||||||
|
// line.setStyle("Straight");
|
||||||
|
// line.setFrom(90, -90);
|
||||||
|
// line.setTo(20, 20);
|
||||||
|
// overflowWorkspace.appendChild(line);
|
||||||
|
//
|
||||||
|
// var line = new web2d.PolyLine();
|
||||||
|
// line.setFrom(95, 95);
|
||||||
|
// line.setTo(165, 165);
|
||||||
|
// line.setStroke(1, 'solid', 'red');
|
||||||
|
// overflowWorkspace.appendChild(line);
|
||||||
|
//
|
||||||
|
// // Reference ...
|
||||||
|
// var refLine = new web2d.Line();
|
||||||
|
// refLine.setFrom(95, 0);
|
||||||
|
// refLine.setTo(95, 200);
|
||||||
|
// refLine.setStroke(1, 'solid', 'red');
|
||||||
|
// overflowWorkspace.appendChild(refLine);
|
||||||
|
//
|
||||||
|
// var refLine = new web2d.Line();
|
||||||
|
// refLine.setFrom(165, 0);
|
||||||
|
// refLine.setTo(165, 200);
|
||||||
|
// refLine.setStroke(1, 'solid', 'red');
|
||||||
|
// overflowWorkspace.appendChild(refLine);
|
||||||
|
//
|
||||||
|
|
||||||
|
overflowWorkspace.addItAsChildTo($("overflowExample"));
|
||||||
|
|
||||||
|
|
||||||
|
var overflowWorkspace = new web2d.Workspace();
|
||||||
|
overflowWorkspace.setSize("100px", "100px");
|
||||||
|
var line1 = new web2d.PolyLine();
|
||||||
|
line1.setFrom(95, 95);
|
||||||
|
line1.setTo(165, 165);
|
||||||
|
line1.setStyle("Curved");
|
||||||
|
overflowWorkspace.appendChild(line1);
|
||||||
|
|
||||||
|
var line1 = new web2d.PolyLine();
|
||||||
|
line1.setFrom(95, 95);
|
||||||
|
line1.setTo(165, 135);
|
||||||
|
line1.setStyle("Curved");
|
||||||
|
overflowWorkspace.appendChild(line1);
|
||||||
|
|
||||||
|
var line1 = new web2d.PolyLine();
|
||||||
|
line1.setFrom(95, 90);
|
||||||
|
line1.setTo(160, 20);
|
||||||
|
line1.setStyle("Straight");
|
||||||
|
overflowWorkspace.appendChild(line1);
|
||||||
|
|
||||||
|
var line1 = new web2d.PolyLine();
|
||||||
|
line1.setFrom(95, 90);
|
||||||
|
line1.setTo(160, 50);
|
||||||
|
line1.setStyle("Straight");
|
||||||
|
overflowWorkspace.appendChild(line1);
|
||||||
|
|
||||||
|
var line1 = new web2d.PolyLine();
|
||||||
|
line1.setFrom(90, 90);
|
||||||
|
line1.setTo(20, 20);
|
||||||
|
overflowWorkspace.appendChild(line1);
|
||||||
|
|
||||||
|
var line1 = new web2d.PolyLine();
|
||||||
|
line1.setFrom(90, 90);
|
||||||
|
line1.setTo(20, 50);
|
||||||
|
overflowWorkspace.appendChild(line1);
|
||||||
|
|
||||||
|
var line1 = new web2d.PolyLine();
|
||||||
|
line1.setFrom(90, 95);
|
||||||
|
line1.setTo(20, 165);
|
||||||
|
overflowWorkspace.appendChild(line1);
|
||||||
|
|
||||||
|
var line1 = new web2d.PolyLine();
|
||||||
|
line1.setFrom(90, 95);
|
||||||
|
line1.setTo(20, 135);
|
||||||
|
overflowWorkspace.appendChild(line1);
|
||||||
|
|
||||||
|
overflowWorkspace.addItAsChildTo($("multipleLineExample"));
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body onload="initialize();">
|
||||||
|
|
||||||
<h1>PolyLines Render Tests </h1>
|
<h1>PolyLines Render Tests </h1>
|
||||||
|
|
||||||
@ -23,91 +214,6 @@
|
|||||||
</td>
|
</td>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
<script type="text/javascript">
|
|
||||||
web2d.peer.Toolkit.init();
|
|
||||||
|
|
||||||
var overflowWorkspace = new web2d.Workspace({fillColor:'green'});
|
|
||||||
overflowWorkspace.setSize("100px", "100px");
|
|
||||||
|
|
||||||
var line = new web2d.PolyLine();
|
|
||||||
line.setTo(165, 165);
|
|
||||||
line.setFrom(95, 95);
|
|
||||||
line.setStyle("Straight");
|
|
||||||
line.setStroke('10');
|
|
||||||
overflowWorkspace.appendChild(line);
|
|
||||||
|
|
||||||
|
|
||||||
// line.setTo(165, 165);
|
|
||||||
// line.setFrom(95, 95);
|
|
||||||
// line.setTo(165, 165);
|
|
||||||
// line.setFrom(95, 95);
|
|
||||||
// line.setTo(165, 165);
|
|
||||||
// line.setFrom(95, 95);
|
|
||||||
// line.setTo(165, 165);
|
|
||||||
// line.setTo(165, 165);
|
|
||||||
// line.setFrom(95, 95);
|
|
||||||
// line.setTo(165, 165);
|
|
||||||
// line.setFrom(95, 95);
|
|
||||||
// line.setTo(165, 165);
|
|
||||||
// line.setFrom(95, 95);
|
|
||||||
// line.setTo(165, 165);
|
|
||||||
// line.setTo(165, 165);
|
|
||||||
// line.setFrom(95, 95);
|
|
||||||
// line.setTo(165, 165);
|
|
||||||
// line.setFrom(95, 95);
|
|
||||||
// line.setTo(165, 165);
|
|
||||||
// line.setFrom(95, 95);
|
|
||||||
// line.setTo(165, 165);
|
|
||||||
// line.setTo(165, 165);
|
|
||||||
// line.setFrom(95, 95);
|
|
||||||
// line.setTo(165, 165);
|
|
||||||
// line.setFrom(95, 95);
|
|
||||||
// line.setTo(165, 165);
|
|
||||||
// line.setFrom(95, 95);
|
|
||||||
// line.setTo(165, 165);
|
|
||||||
// line.setTo(165, 165);
|
|
||||||
// line.setFrom(95, 95);
|
|
||||||
// line.setTo(165, 165);
|
|
||||||
// line.setFrom(95, 95);
|
|
||||||
// line.setTo(165, -1653.0000000000000000000001);
|
|
||||||
// line.setFrom(95, 952);
|
|
||||||
// line.setTo(165, 1651);
|
|
||||||
//
|
|
||||||
//
|
|
||||||
// var line = new web2d.PolyLine();
|
|
||||||
// line.setFrom(95, 90);
|
|
||||||
// line.setTo(160, 20);
|
|
||||||
// overflowWorkspace.appendChild(line);
|
|
||||||
//
|
|
||||||
// var line = new web2d.PolyLine();
|
|
||||||
// line.setStyle("Straight");
|
|
||||||
// line.setFrom(90, -90);
|
|
||||||
// line.setTo(20, 20);
|
|
||||||
// overflowWorkspace.appendChild(line);
|
|
||||||
//
|
|
||||||
// var line = new web2d.PolyLine();
|
|
||||||
// line.setFrom(95, 95);
|
|
||||||
// line.setTo(165, 165);
|
|
||||||
// line.setStroke(1, 'solid', 'red');
|
|
||||||
// overflowWorkspace.appendChild(line);
|
|
||||||
//
|
|
||||||
// // Reference ...
|
|
||||||
// var refLine = new web2d.Line();
|
|
||||||
// refLine.setFrom(95, 0);
|
|
||||||
// refLine.setTo(95, 200);
|
|
||||||
// refLine.setStroke(1, 'solid', 'red');
|
|
||||||
// overflowWorkspace.appendChild(refLine);
|
|
||||||
//
|
|
||||||
// var refLine = new web2d.Line();
|
|
||||||
// refLine.setFrom(165, 0);
|
|
||||||
// refLine.setTo(165, 200);
|
|
||||||
// refLine.setStroke(1, 'solid', 'red');
|
|
||||||
// overflowWorkspace.appendChild(refLine);
|
|
||||||
//
|
|
||||||
|
|
||||||
overflowWorkspace.addItAsChildTo($("overflowExample"));
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
This is how multiple childs will look in each style line
|
This is how multiple childs will look in each style line
|
||||||
@ -117,58 +223,6 @@
|
|||||||
</td>
|
</td>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
var overflowWorkspace = new web2d.Workspace();
|
|
||||||
overflowWorkspace.setSize("100px", "100px");
|
|
||||||
var line1 = new web2d.PolyLine();
|
|
||||||
line1.setFrom(95, 95);
|
|
||||||
line1.setTo(165, 165);
|
|
||||||
line1.setStyle("Curved");
|
|
||||||
overflowWorkspace.appendChild(line1);
|
|
||||||
|
|
||||||
var line1 = new web2d.PolyLine();
|
|
||||||
line1.setFrom(95, 95);
|
|
||||||
line1.setTo(165, 135);
|
|
||||||
line1.setStyle("Curved");
|
|
||||||
overflowWorkspace.appendChild(line1);
|
|
||||||
|
|
||||||
var line1 = new web2d.PolyLine();
|
|
||||||
line1.setFrom(95, 90);
|
|
||||||
line1.setTo(160, 20);
|
|
||||||
line1.setStyle("Straight");
|
|
||||||
overflowWorkspace.appendChild(line1);
|
|
||||||
|
|
||||||
var line1 = new web2d.PolyLine();
|
|
||||||
line1.setFrom(95, 90);
|
|
||||||
line1.setTo(160, 50);
|
|
||||||
line1.setStyle("Straight");
|
|
||||||
overflowWorkspace.appendChild(line1);
|
|
||||||
|
|
||||||
var line1 = new web2d.PolyLine();
|
|
||||||
line1.setFrom(90, 90);
|
|
||||||
line1.setTo(20, 20);
|
|
||||||
overflowWorkspace.appendChild(line1);
|
|
||||||
|
|
||||||
var line1 = new web2d.PolyLine();
|
|
||||||
line1.setFrom(90, 90);
|
|
||||||
line1.setTo(20, 50);
|
|
||||||
overflowWorkspace.appendChild(line1);
|
|
||||||
|
|
||||||
var line1 = new web2d.PolyLine();
|
|
||||||
line1.setFrom(90, 95);
|
|
||||||
line1.setTo(20, 165);
|
|
||||||
overflowWorkspace.appendChild(line1);
|
|
||||||
|
|
||||||
var line1 = new web2d.PolyLine();
|
|
||||||
line1.setFrom(90, 95);
|
|
||||||
line1.setTo(20, 135);
|
|
||||||
overflowWorkspace.appendChild(line1);
|
|
||||||
|
|
||||||
overflowWorkspace.addItAsChildTo($("multipleLineExample"));
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</table>
|
</table>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
@ -2,11 +2,207 @@
|
|||||||
|
|
||||||
<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>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var xScale = 1000;
|
||||||
|
var yScale = 600;
|
||||||
|
var shapeOrigX = 0;
|
||||||
|
function initialize(){
|
||||||
|
web2d.peer.Toolkit.init();
|
||||||
|
|
||||||
|
workspace = new web2d.Workspace();
|
||||||
|
workspace.setSize(xScale + "px", yScale + "px");
|
||||||
|
workspace.setCoordSize(xScale, yScale);
|
||||||
|
workspace.setCoordOrigin(0, 0);
|
||||||
|
workspace.setFill("#f0f0f0");
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Center Topic Rect ...
|
||||||
|
centralRect = new web2d.Rect(0.3);
|
||||||
|
centralRect.setSize(200, 60);
|
||||||
|
centralRect.setPosition(300, 300);
|
||||||
|
centralRect.setFill("#99ccff");
|
||||||
|
centralRect.setStroke(1, 'solid', "#878b8f");
|
||||||
|
workspace.appendChild(centralRect);
|
||||||
|
|
||||||
|
workspace.addItAsChildTo($("divWorkspace"));
|
||||||
|
}
|
||||||
|
|
||||||
|
function zoomIn()
|
||||||
|
{
|
||||||
|
xScale = xScale / 2;
|
||||||
|
yScale = yScale / 2;
|
||||||
|
workspace.setSize(xScale + "px", yScale + "px");
|
||||||
|
}
|
||||||
|
|
||||||
|
function zoomOut()
|
||||||
|
{
|
||||||
|
xScale = xScale * 2;
|
||||||
|
yScale = yScale * 2;
|
||||||
|
workspace.setSize(xScale + "px", yScale + "px");
|
||||||
|
}
|
||||||
|
function createShape()
|
||||||
|
{
|
||||||
|
// Secondary Idea...
|
||||||
|
var nodeGroup = new web2d.Group();
|
||||||
|
nodeGroup.setSize(200, 60);
|
||||||
|
nodeGroup.setCoordSize(200, 60);
|
||||||
|
nodeGroup.setPosition(700, shapeOrigX);
|
||||||
|
shapeOrigX = shapeOrigX + 50;
|
||||||
|
|
||||||
|
var outerRect = new web2d.Rect();
|
||||||
|
outerRect.setSize(200, 100);
|
||||||
|
outerRect.setVisibility(false);
|
||||||
|
outerRect.setPosition(0, 0);
|
||||||
|
outerRect.setFill("#3e9eff");
|
||||||
|
outerRect.setStroke(1, 'solid', "#878b8f");
|
||||||
|
nodeGroup.appendChild(outerRect);
|
||||||
|
|
||||||
|
var inerRect = new web2d.Rect(0.3);
|
||||||
|
inerRect.setSize(190, 85);
|
||||||
|
inerRect.setPosition(5, 10);
|
||||||
|
inerRect.setFill("white");
|
||||||
|
inerRect.setStroke(1, 'dash', '#878b8f');
|
||||||
|
nodeGroup.appendChild(inerRect);
|
||||||
|
nodeGroup._drag = false;
|
||||||
|
|
||||||
|
workspace.appendChild(nodeGroup);
|
||||||
|
|
||||||
|
// Add behaviour ...
|
||||||
|
inerRect.addEventListener("mouseover", function() {
|
||||||
|
outerRect.setVisibility(true);
|
||||||
|
});
|
||||||
|
inerRect.addEventListener("mouseout", function() {
|
||||||
|
if (!nodeGroup._drag)
|
||||||
|
{
|
||||||
|
outerRect.setVisibility(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
nodeGroup.addEventListener("mousedown", function(e)
|
||||||
|
{
|
||||||
|
var shadowGroup = new web2d.Group();
|
||||||
|
shadowGroup.setSize(200, 60);
|
||||||
|
shadowGroup.setCoordSize(200, 60);
|
||||||
|
|
||||||
|
var position = nodeGroup.getPosition();
|
||||||
|
shadowGroup.setPosition(position.x, position.y);
|
||||||
|
|
||||||
|
var shadowRect = new web2d.Rect(0.3);
|
||||||
|
shadowRect.setSize(190, 85);
|
||||||
|
shadowRect.setPosition(5, 10);
|
||||||
|
shadowRect.setFill("white", 0.3);
|
||||||
|
shadowRect.setStroke(1, 'dash', '#878b8f');
|
||||||
|
shadowGroup.appendChild(shadowRect);
|
||||||
|
|
||||||
|
workspace.appendChild(shadowGroup);
|
||||||
|
|
||||||
|
this._shadowGroup = shadowGroup;
|
||||||
|
if (!this._moveFunction)
|
||||||
|
{
|
||||||
|
nodeGroup._drag = true;
|
||||||
|
workspace._moveFunction = function(event)
|
||||||
|
{
|
||||||
|
// Esto mas o menos funciona por que el size del workspace es 1 a uno con
|
||||||
|
// el del la pantalla.
|
||||||
|
var posx = 0;
|
||||||
|
var posy = 0;
|
||||||
|
if (event.pageX || event.pageY)
|
||||||
|
{
|
||||||
|
posx = e.pageX;
|
||||||
|
posy = e.pageY;
|
||||||
|
}
|
||||||
|
else if (event.clientX || event.clientY) {
|
||||||
|
posx = event.clientX + document.body.scrollLeft
|
||||||
|
+ document.documentElement.scrollLeft;
|
||||||
|
posy = event.clientY + document.body.scrollTop
|
||||||
|
+ document.documentElement.scrollTop;
|
||||||
|
}
|
||||||
|
|
||||||
|
shadowGroup.setPosition(posx - 50, posy - 150);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
workspace.addEventListener("mousemove", workspace._moveFunction);
|
||||||
|
var mouseUp = function(e)
|
||||||
|
{
|
||||||
|
|
||||||
|
workspace.removeChild(shadowGroup);
|
||||||
|
|
||||||
|
var pos = shadowGroup.getPosition();
|
||||||
|
nodeGroup.setPosition(pos.x, pos.y);
|
||||||
|
nodeGroup._drag = false;
|
||||||
|
outerRect.setVisibility(true);
|
||||||
|
workspace.removeEventListener("mousemove", workspace._moveFunction);
|
||||||
|
workspace.removeEventListener("mouseup", mouseUp);
|
||||||
|
|
||||||
|
};
|
||||||
|
workspace.addEventListener("mouseup", mouseUp);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body onload="initialize();">
|
||||||
|
|
||||||
<h1>Chart prototype Tests </h1>
|
<h1>Chart prototype Tests </h1>
|
||||||
|
|
||||||
@ -18,147 +214,6 @@
|
|||||||
<div id="divWorkspace" style="overflow:scroll;width:1020px;height:620px;position:relative;">
|
<div id="divWorkspace" style="overflow:scroll;width:1020px;height:620px;position:relative;">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
web2d.peer.Toolkit.init();
|
|
||||||
|
|
||||||
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()
|
|
||||||
{
|
|
||||||
xScale = xScale / 2;
|
|
||||||
yScale = yScale / 2;
|
|
||||||
workspace.setSize(xScale + "px", yScale + "px");
|
|
||||||
}
|
|
||||||
|
|
||||||
function zoomOut()
|
|
||||||
{
|
|
||||||
xScale = xScale * 2;
|
|
||||||
yScale = yScale * 2;
|
|
||||||
workspace.setSize(xScale + "px", yScale + "px");
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
var shapeOrigX = 0;
|
|
||||||
function createShape()
|
|
||||||
{
|
|
||||||
// Secondary Idea...
|
|
||||||
var nodeGroup = new web2d.Group();
|
|
||||||
nodeGroup.setSize(200, 60);
|
|
||||||
nodeGroup.setCoordSize(200, 60);
|
|
||||||
nodeGroup.setPosition(700, shapeOrigX);
|
|
||||||
shapeOrigX = shapeOrigX + 50;
|
|
||||||
|
|
||||||
var outerRect = new web2d.Rect();
|
|
||||||
outerRect.setSize(200, 100);
|
|
||||||
outerRect.setVisibility(false);
|
|
||||||
outerRect.setPosition(0, 0);
|
|
||||||
outerRect.setFill("#3e9eff");
|
|
||||||
outerRect.setStroke(1, 'solid', "#878b8f");
|
|
||||||
nodeGroup.appendChild(outerRect);
|
|
||||||
|
|
||||||
var inerRect = new web2d.Rect(0.3);
|
|
||||||
inerRect.setSize(190, 85);
|
|
||||||
inerRect.setPosition(5, 10);
|
|
||||||
inerRect.setFill("white");
|
|
||||||
inerRect.setStroke(1, 'dash', '#878b8f');
|
|
||||||
nodeGroup.appendChild(inerRect);
|
|
||||||
nodeGroup._drag = false;
|
|
||||||
|
|
||||||
workspace.appendChild(nodeGroup);
|
|
||||||
|
|
||||||
// Add behaviour ...
|
|
||||||
inerRect.addEventListener("mouseover", function() {
|
|
||||||
outerRect.setVisibility(true);
|
|
||||||
});
|
|
||||||
inerRect.addEventListener("mouseout", function() {
|
|
||||||
if (!nodeGroup._drag)
|
|
||||||
{
|
|
||||||
outerRect.setVisibility(false);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
nodeGroup.addEventListener("mousedown", function(e)
|
|
||||||
{
|
|
||||||
var shadowGroup = new web2d.Group();
|
|
||||||
shadowGroup.setSize(200, 60);
|
|
||||||
shadowGroup.setCoordSize(200, 60);
|
|
||||||
|
|
||||||
var position = nodeGroup.getPosition();
|
|
||||||
shadowGroup.setPosition(position.x, position.y);
|
|
||||||
|
|
||||||
var shadowRect = new web2d.Rect(0.3);
|
|
||||||
shadowRect.setSize(190, 85);
|
|
||||||
shadowRect.setPosition(5, 10);
|
|
||||||
shadowRect.setFill("white", 0.3);
|
|
||||||
shadowRect.setStroke(1, 'dash', '#878b8f');
|
|
||||||
shadowGroup.appendChild(shadowRect);
|
|
||||||
|
|
||||||
workspace.appendChild(shadowGroup);
|
|
||||||
|
|
||||||
this._shadowGroup = shadowGroup;
|
|
||||||
if (!this._moveFunction)
|
|
||||||
{
|
|
||||||
nodeGroup._drag = true;
|
|
||||||
workspace._moveFunction = function(event)
|
|
||||||
{
|
|
||||||
// Esto mas o menos funciona por que el size del workspace es 1 a uno con
|
|
||||||
// el del la pantalla.
|
|
||||||
var posx = 0;
|
|
||||||
var posy = 0;
|
|
||||||
if (event.pageX || event.pageY)
|
|
||||||
{
|
|
||||||
posx = e.pageX;
|
|
||||||
posy = e.pageY;
|
|
||||||
}
|
|
||||||
else if (event.clientX || event.clientY) {
|
|
||||||
posx = event.clientX + document.body.scrollLeft
|
|
||||||
+ document.documentElement.scrollLeft;
|
|
||||||
posy = event.clientY + document.body.scrollTop
|
|
||||||
+ document.documentElement.scrollTop;
|
|
||||||
}
|
|
||||||
|
|
||||||
shadowGroup.setPosition(posx - 50, posy - 150);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
workspace.addEventListener("mousemove", workspace._moveFunction);
|
|
||||||
var mouseUp = function(e)
|
|
||||||
{
|
|
||||||
|
|
||||||
workspace.removeChild(shadowGroup);
|
|
||||||
|
|
||||||
var pos = shadowGroup.getPosition();
|
|
||||||
nodeGroup.setPosition(pos.x, pos.y);
|
|
||||||
nodeGroup._drag = false;
|
|
||||||
outerRect.setVisibility(true);
|
|
||||||
workspace.removeEventListener("mousemove", workspace._moveFunction);
|
|
||||||
workspace.removeEventListener("mouseup", mouseUp);
|
|
||||||
|
|
||||||
};
|
|
||||||
workspace.addEventListener("mouseup", mouseUp);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
// 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>
|
|
||||||
|
|
||||||
Notas:
|
Notas:
|
||||||
<li>El evento de mousemove se debe agregar al workspace.
|
<li>El evento de mousemove se debe agregar al workspace.
|
||||||
<li>Cuando se esta drageando un elemento se deberia deshabilitar los eventos del resto de los elementos.
|
<li>Cuando se esta drageando un elemento se deberia deshabilitar los eventos del resto de los elementos.
|
||||||
|
@ -2,7 +2,8 @@
|
|||||||
|
|
||||||
<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,11 +59,61 @@
|
|||||||
<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>
|
||||||
|
<script type="text/javascript">
|
||||||
|
function initialize(){
|
||||||
|
web2d.peer.Toolkit.init();
|
||||||
|
|
||||||
|
var rectExampleTest = function ()
|
||||||
|
{
|
||||||
|
var workspace = new web2d.Workspace();
|
||||||
|
workspace.setSize("100px", "100px");
|
||||||
|
workspace.setCoordSize(100, 100);
|
||||||
|
workspace.setCoordOrigin(0, 0);
|
||||||
|
|
||||||
|
var rect = new web2d.Rect();
|
||||||
|
rect.setPosition(20, 20);
|
||||||
|
|
||||||
|
workspace.appendChild(rect);
|
||||||
|
workspace.addItAsChildTo($("rectExample"));
|
||||||
|
}
|
||||||
|
rectExampleTest();
|
||||||
|
|
||||||
|
var roundrectExampleTest = function ()
|
||||||
|
{
|
||||||
|
function builder(container, x, width, height)
|
||||||
|
{
|
||||||
|
for (var i = 1; i <= 10; i++)
|
||||||
|
{
|
||||||
|
var rect = new web2d.Rect(i / 10);
|
||||||
|
rect.setPosition(x, ((i - 1) * (50 + 5)));
|
||||||
|
rect.setSize(width, height);
|
||||||
|
container.appendChild(rect);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 50 x 50
|
||||||
|
var workspace = new web2d.Workspace();
|
||||||
|
workspace.setSize("500px", "550px");
|
||||||
|
workspace.setCoordOrigin(0, -4);
|
||||||
|
workspace.setCoordSize(500, 550);
|
||||||
|
workspace.addItAsChildTo($("roundRect"));
|
||||||
|
|
||||||
|
builder(workspace, 10, 50, 50);
|
||||||
|
|
||||||
|
// 100 x 50
|
||||||
|
builder(workspace, 70, 100, 50);
|
||||||
|
|
||||||
|
// 200 x 50
|
||||||
|
builder(workspace, 180, 200, 50);
|
||||||
|
|
||||||
|
}
|
||||||
|
roundrectExampleTest();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body onload="initialize();">
|
||||||
|
|
||||||
|
|
||||||
<h1>Rect Render Tests </h1>
|
<h1>Rect Render Tests </h1>
|
||||||
@ -77,28 +128,10 @@
|
|||||||
Straight Lines.
|
Straight Lines.
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div id="rectExample"/>
|
<div id="rectExample"></div>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
<script type="text/javascript">
|
|
||||||
web2d.peer.Toolkit.init();
|
|
||||||
|
|
||||||
var rectExampleTest = function ()
|
|
||||||
{
|
|
||||||
var workspace = new web2d.Workspace();
|
|
||||||
workspace.setSize("100px", "100px");
|
|
||||||
workspace.setCoordSize(100, 100);
|
|
||||||
workspace.setCoordOrigin(0, 0);
|
|
||||||
|
|
||||||
var rect = new web2d.Rect();
|
|
||||||
rect.setPosition(20, 20);
|
|
||||||
|
|
||||||
workspace.appendChild(rect);
|
|
||||||
workspace.addItAsChildTo($("rectExample"));
|
|
||||||
}
|
|
||||||
rectExampleTest();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- ********************************************************** -->
|
<!-- ********************************************************** -->
|
||||||
<tr>
|
<tr>
|
||||||
@ -110,39 +143,6 @@
|
|||||||
</td>
|
</td>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
var roundrectExampleTest = function ()
|
|
||||||
{
|
|
||||||
function builder(container, x, width, height)
|
|
||||||
{
|
|
||||||
for (var i = 1; i <= 10; i++)
|
|
||||||
{
|
|
||||||
var rect = new web2d.Rect(i / 10);
|
|
||||||
rect.setPosition(x, ((i - 1) * (50 + 5)));
|
|
||||||
rect.setSize(width, height);
|
|
||||||
container.appendChild(rect);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 50 x 50
|
|
||||||
var workspace = new web2d.Workspace();
|
|
||||||
workspace.setSize("500px", "550px");
|
|
||||||
workspace.setCoordOrigin(0, -4);
|
|
||||||
workspace.setCoordSize(500, 550);
|
|
||||||
workspace.addItAsChildTo($("roundRect"));
|
|
||||||
|
|
||||||
builder(workspace, 10, 50, 50);
|
|
||||||
|
|
||||||
// 100 x 50
|
|
||||||
builder(workspace, 70, 100, 50);
|
|
||||||
|
|
||||||
// 200 x 50
|
|
||||||
builder(workspace, 180, 200, 50);
|
|
||||||
|
|
||||||
}
|
|
||||||
roundrectExampleTest();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
</table>
|
</table>
|
||||||
|
@ -3,69 +3,284 @@
|
|||||||
<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: {}
|
||||||
};
|
};
|
||||||
|
|
||||||
web2d.peer =
|
web2d.peer =
|
||||||
{
|
{
|
||||||
svg: {},
|
svg: {},
|
||||||
vml: {}
|
vml: {}
|
||||||
};
|
};
|
||||||
|
|
||||||
web2d.peer.utils = {};
|
web2d.peer.utils = {};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script type="text/javascript" src="mootools.js"></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="../../../../../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/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/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/peer/svg/ElementPeer.js"></script>
|
||||||
<script type="text/javascript" src="../../../../src/main/javascript/Element.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/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/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/peer/vml/WorkspacePeer.js"></script>
|
||||||
<script type="text/javascript" src="../../../../src/main/javascript/Toolkit.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/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/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/peer/vml/ElipsePeer.js"></script>
|
||||||
<script type="text/javascript" src="../../../../src/main/javascript/Line.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/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/peer/vml/LinePeer.js"></script>
|
||||||
<script type="text/javascript" src="../../../../src/main/javascript/PolyLine.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/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/peer/vml/PolyLinePeer.js"></script>
|
||||||
<script type="text/javascript" src="../../../../src/main/javascript/Group.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/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/peer/vml/GroupPeer.js"></script>
|
||||||
<script type="text/javascript" src="../../../../src/main/javascript/Rect.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/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/peer/vml/RectPeer.js"></script>
|
||||||
<script type="text/javascript" src="../../../../src/main/javascript/Text.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/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/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/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/TransformUtils.js"></script>
|
||||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/utils/EventUtils.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/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/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/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/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/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/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/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/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/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>
|
||||||
|
<script type="text/javascript">
|
||||||
|
function initialize(){
|
||||||
|
web2d.peer.Toolkit.init();
|
||||||
|
|
||||||
|
var strokeStyleTest = function ()
|
||||||
|
{
|
||||||
|
function builder(parent, scale, strokeWidth)
|
||||||
|
{
|
||||||
|
var rectSize = scale * 80;
|
||||||
|
var yPosition = 10 * scale;
|
||||||
|
|
||||||
|
var xPosition = 10 * scale;
|
||||||
|
var rect = new web2d.Rect();
|
||||||
|
rect.setSize(rectSize, rectSize);
|
||||||
|
rect.setPosition(xPosition, yPosition);
|
||||||
|
rect.setFill('yellow');
|
||||||
|
rect.setStroke(1, 'solid', 'black');
|
||||||
|
parent.appendChild(rect);
|
||||||
|
|
||||||
|
xPosition = xPosition + 90 * scale;
|
||||||
|
rect = new web2d.Rect();
|
||||||
|
rect.setSize(rectSize, rectSize);
|
||||||
|
rect.setPosition(xPosition, yPosition);
|
||||||
|
rect.setFill('yellow');
|
||||||
|
rect.setStroke(strokeWidth, 'dot', 'black');
|
||||||
|
parent.appendChild(rect);
|
||||||
|
|
||||||
|
xPosition = xPosition + 90 * scale;
|
||||||
|
rect = new web2d.Rect();
|
||||||
|
rect.setSize(rectSize, rectSize);
|
||||||
|
rect.setPosition(xPosition, yPosition);
|
||||||
|
rect.setFill('yellow');
|
||||||
|
rect.setStroke(strokeWidth, 'dash', 'black');
|
||||||
|
parent.appendChild(rect);
|
||||||
|
|
||||||
|
xPosition = xPosition + 90 * scale;
|
||||||
|
rect = new web2d.Rect();
|
||||||
|
rect.setSize(rectSize, rectSize);
|
||||||
|
rect.setPosition(xPosition, yPosition);
|
||||||
|
rect.setFill('yellow');
|
||||||
|
rect.setStroke(strokeWidth, 'longdash', 'black');
|
||||||
|
parent.appendChild(rect);
|
||||||
|
|
||||||
|
xPosition = xPosition + 90 * scale;
|
||||||
|
rect = new web2d.Rect();
|
||||||
|
rect.setSize(rectSize, rectSize);
|
||||||
|
rect.setPosition(xPosition, yPosition);
|
||||||
|
rect.setFill('yellow');
|
||||||
|
rect.setStroke(strokeWidth, 'dashdot', 'black');
|
||||||
|
parent.appendChild(rect);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Workspace with default scale ...
|
||||||
|
var workspace = new web2d.Workspace();
|
||||||
|
workspace.setSize("500px", "100px");
|
||||||
|
workspace.setCoordSize(500, 100);
|
||||||
|
workspace.setCoordOrigin(0, 0);
|
||||||
|
builder(workspace, 1, 1);
|
||||||
|
workspace.addItAsChildTo($("strokeStyle"));
|
||||||
|
|
||||||
|
// Workspace with modified scale ...
|
||||||
|
workspace = new web2d.Workspace();
|
||||||
|
workspace.setSize("500px", "100px");
|
||||||
|
workspace.setCoordSize(5000, 1000);
|
||||||
|
workspace.setCoordOrigin(0, 0);
|
||||||
|
builder(workspace, 10, 1);
|
||||||
|
workspace.addItAsChildTo($("strokeStyleGroup"));
|
||||||
|
|
||||||
|
// Workspace with default scale ...
|
||||||
|
workspace = new web2d.Workspace();
|
||||||
|
workspace.setSize("500px", "100px");
|
||||||
|
workspace.setCoordSize(500, 100);
|
||||||
|
workspace.setCoordOrigin(0, 0);
|
||||||
|
builder(workspace, 1, 5);
|
||||||
|
workspace.addItAsChildTo($("strokeStyleWidth"));
|
||||||
|
|
||||||
|
|
||||||
|
};
|
||||||
|
strokeStyleTest();
|
||||||
|
|
||||||
|
var strokeOpacityTest = function ()
|
||||||
|
{
|
||||||
|
var workspace = new web2d.Workspace();
|
||||||
|
workspace.setSize("500px", "100px");
|
||||||
|
workspace.setCoordSize(500, 100);
|
||||||
|
workspace.setCoordOrigin(0, 0);
|
||||||
|
|
||||||
|
var rect = new web2d.Rect(0, {x:5,y:5,width:390,height:90,fillColor:'green',
|
||||||
|
strokeColor:'black',strokeStyle:'solid',strokeWidth:1});
|
||||||
|
workspace.appendChild(rect);
|
||||||
|
|
||||||
|
var rectAttributes = {width:60,height:60,fillColor:'yellow',strokeColor:'black',strokeStyle:'solid',strokeWidth:10};
|
||||||
|
rect = new web2d.Rect(0, rectAttributes);
|
||||||
|
rect.setPosition(20, 20);
|
||||||
|
rect.setAttribute("strokeOpacity", 1);
|
||||||
|
workspace.appendChild(rect);
|
||||||
|
|
||||||
|
rect = new web2d.Rect(0, rectAttributes);
|
||||||
|
rect.setPosition(120, 20);
|
||||||
|
rect.setAttribute("strokeOpacity", 0.5);
|
||||||
|
workspace.appendChild(rect);
|
||||||
|
|
||||||
|
rect = new web2d.Rect(0, rectAttributes);
|
||||||
|
rect.setPosition(220, 20);
|
||||||
|
rect.setAttribute("strokeOpacity", 0.3);
|
||||||
|
workspace.appendChild(rect);
|
||||||
|
|
||||||
|
rect = new web2d.Rect(0, rectAttributes);
|
||||||
|
rect.setPosition(320, 20);
|
||||||
|
rect.setAttribute("strokeOpacity", 0);
|
||||||
|
workspace.appendChild(rect);
|
||||||
|
|
||||||
|
workspace.addItAsChildTo($("strokeOpacity"));
|
||||||
|
};
|
||||||
|
strokeOpacityTest();
|
||||||
|
|
||||||
|
|
||||||
|
var fillOpacityTest = function ()
|
||||||
|
{
|
||||||
|
var workspace = new web2d.Workspace();
|
||||||
|
workspace.setSize("500px", "100px");
|
||||||
|
workspace.setCoordSize(500, 100);
|
||||||
|
workspace.setCoordOrigin(0, 0);
|
||||||
|
|
||||||
|
var rect = new web2d.Rect(0, {x:5,y:5,width:390,height:90,fillColor:'green',
|
||||||
|
strokeColor:'black',strokeStyle:'solid',strokeWidth:4});
|
||||||
|
workspace.appendChild(rect);
|
||||||
|
|
||||||
|
var rectAttributes = {width:60,height:60,fillColor:'yellow',strokeColor:'black',strokeStyle:'solid',strokeWidth:10};
|
||||||
|
rect = new web2d.Rect(0, rectAttributes);
|
||||||
|
rect.setPosition(20, 20);
|
||||||
|
rect.setAttribute("fillOpacity", 1);
|
||||||
|
workspace.appendChild(rect);
|
||||||
|
|
||||||
|
rect = new web2d.Rect(0, rectAttributes);
|
||||||
|
rect.setPosition(120, 20);
|
||||||
|
rect.setAttribute("fillOpacity", 0.5);
|
||||||
|
workspace.appendChild(rect);
|
||||||
|
|
||||||
|
rect = new web2d.Rect(0, rectAttributes);
|
||||||
|
rect.setPosition(220, 20);
|
||||||
|
rect.setAttribute("fillOpacity", 0.3);
|
||||||
|
workspace.appendChild(rect);
|
||||||
|
|
||||||
|
rect = new web2d.Rect(0, rectAttributes);
|
||||||
|
rect.setPosition(320, 20);
|
||||||
|
rect.setAttribute("fillOpacity", 0);
|
||||||
|
workspace.appendChild(rect);
|
||||||
|
|
||||||
|
workspace.addItAsChildTo($("fillOpacity"));
|
||||||
|
};
|
||||||
|
fillOpacityTest();
|
||||||
|
|
||||||
|
|
||||||
|
var opacityTest = function ()
|
||||||
|
{
|
||||||
|
var workspace = new web2d.Workspace();
|
||||||
|
workspace.setSize("500px", "100px");
|
||||||
|
workspace.setCoordSize(500, 100);
|
||||||
|
workspace.setCoordOrigin(0, 0);
|
||||||
|
|
||||||
|
var rect = new web2d.Rect(0, {x:5,y:5,width:390,height:90,fillColor:'green',
|
||||||
|
strokeColor:'black',strokeStyle:'solid',strokeWidth:4});
|
||||||
|
workspace.appendChild(rect);
|
||||||
|
|
||||||
|
var rectAttributes = {width:60,height:60,fillColor:'yellow',strokeColor:'black',strokeStyle:'solid',strokeWidth:10};
|
||||||
|
rect = new web2d.Rect(0, rectAttributes);
|
||||||
|
rect.setPosition(20, 20);
|
||||||
|
rect.setOpacity(0.8);
|
||||||
|
workspace.appendChild(rect);
|
||||||
|
|
||||||
|
rect = new web2d.Rect(0, rectAttributes);
|
||||||
|
rect.setPosition(120, 20);
|
||||||
|
rect.setOpacity(0.5);
|
||||||
|
workspace.appendChild(rect);
|
||||||
|
|
||||||
|
rect = new web2d.Rect(0, rectAttributes);
|
||||||
|
rect.setPosition(220, 20);
|
||||||
|
rect.setOpacity(0.3);
|
||||||
|
workspace.appendChild(rect);
|
||||||
|
|
||||||
|
rect = new web2d.Rect(0, rectAttributes);
|
||||||
|
rect.setPosition(320, 20);
|
||||||
|
rect.setOpacity(0);
|
||||||
|
workspace.appendChild(rect);
|
||||||
|
|
||||||
|
workspace.addItAsChildTo($("opacity"));
|
||||||
|
};
|
||||||
|
opacityTest();
|
||||||
|
|
||||||
|
|
||||||
|
var visibilityTest = function ()
|
||||||
|
{
|
||||||
|
var workspace = new web2d.Workspace({fillColor:'yellow',strokeWidth:'2px'});
|
||||||
|
workspace.setSize("500px", "100px");
|
||||||
|
workspace.setCoordSize(500, 100);
|
||||||
|
workspace.setCoordOrigin(0, 0);
|
||||||
|
|
||||||
|
var rectAttributes = {width:60,height:60,fillColor:'green',strokeColor:'black',strokeStyle:'solid',strokeWidth:10};
|
||||||
|
var rect = new web2d.Rect(0, rectAttributes);
|
||||||
|
rect.setPosition(120, 20);
|
||||||
|
workspace.appendChild(rect);
|
||||||
|
rect.addEventListener("mouseover", function() {
|
||||||
|
alert("Mouse Over");
|
||||||
|
});
|
||||||
|
|
||||||
|
var isVisible = true;
|
||||||
|
var executer = function()
|
||||||
|
{
|
||||||
|
isVisible = !isVisible;
|
||||||
|
rect.setVisibility(isVisible);
|
||||||
|
};
|
||||||
|
executer.periodical(100);
|
||||||
|
|
||||||
|
workspace.addItAsChildTo($("visibility"));
|
||||||
|
};
|
||||||
|
visibilityTest();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body onload="initialize();">
|
||||||
<script type="text/javascript">
|
|
||||||
// Logger.setEnabled(true);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<h1>Element properties Tests </h1>
|
<h1>Element properties Tests </h1>
|
||||||
|
|
||||||
@ -86,300 +301,55 @@
|
|||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<script type="text/javascript">
|
|
||||||
web2d.peer.Toolkit.init();
|
|
||||||
|
|
||||||
var strokeStyleTest = function ()
|
|
||||||
{
|
|
||||||
function builder(parent, scale, strokeWidth)
|
|
||||||
{
|
|
||||||
var rectSize = scale * 80;
|
|
||||||
var yPosition = 10 * scale;
|
|
||||||
|
|
||||||
var xPosition = 10 * scale;
|
|
||||||
var rect = new web2d.Rect();
|
|
||||||
rect.setSize(rectSize, rectSize);
|
|
||||||
rect.setPosition(xPosition, yPosition);
|
|
||||||
rect.setFill('yellow');
|
|
||||||
rect.setStroke(1, 'solid', 'black');
|
|
||||||
parent.appendChild(rect);
|
|
||||||
|
|
||||||
xPosition = xPosition + 90 * scale;
|
|
||||||
rect = new web2d.Rect();
|
|
||||||
rect.setSize(rectSize, rectSize);
|
|
||||||
rect.setPosition(xPosition, yPosition);
|
|
||||||
rect.setFill('yellow');
|
|
||||||
rect.setStroke(strokeWidth, 'dot', 'black');
|
|
||||||
parent.appendChild(rect);
|
|
||||||
|
|
||||||
xPosition = xPosition + 90 * scale;
|
|
||||||
rect = new web2d.Rect();
|
|
||||||
rect.setSize(rectSize, rectSize);
|
|
||||||
rect.setPosition(xPosition, yPosition);
|
|
||||||
rect.setFill('yellow');
|
|
||||||
rect.setStroke(strokeWidth, 'dash', 'black');
|
|
||||||
parent.appendChild(rect);
|
|
||||||
|
|
||||||
xPosition = xPosition + 90 * scale;
|
|
||||||
rect = new web2d.Rect();
|
|
||||||
rect.setSize(rectSize, rectSize);
|
|
||||||
rect.setPosition(xPosition, yPosition);
|
|
||||||
rect.setFill('yellow');
|
|
||||||
rect.setStroke(strokeWidth, 'longdash', 'black');
|
|
||||||
parent.appendChild(rect);
|
|
||||||
|
|
||||||
xPosition = xPosition + 90 * scale;
|
|
||||||
rect = new web2d.Rect();
|
|
||||||
rect.setSize(rectSize, rectSize);
|
|
||||||
rect.setPosition(xPosition, yPosition);
|
|
||||||
rect.setFill('yellow');
|
|
||||||
rect.setStroke(strokeWidth, 'dashdot', 'black');
|
|
||||||
parent.appendChild(rect);
|
|
||||||
}
|
|
||||||
;
|
|
||||||
|
|
||||||
// Workspace with default scale ...
|
|
||||||
var workspace = new web2d.Workspace();
|
|
||||||
workspace.setSize("500px", "100px");
|
|
||||||
workspace.setCoordSize(500, 100);
|
|
||||||
workspace.setCoordOrigin(0, 0);
|
|
||||||
builder(workspace, 1, 1);
|
|
||||||
workspace.addItAsChildTo($("strokeStyle"));
|
|
||||||
|
|
||||||
// Workspace with modified scale ...
|
|
||||||
workspace = new web2d.Workspace();
|
|
||||||
workspace.setSize("500px", "100px");
|
|
||||||
workspace.setCoordSize(5000, 1000);
|
|
||||||
workspace.setCoordOrigin(0, 0);
|
|
||||||
builder(workspace, 10, 1);
|
|
||||||
workspace.addItAsChildTo($("strokeStyleGroup"));
|
|
||||||
|
|
||||||
// Workspace with default scale ...
|
|
||||||
workspace = new web2d.Workspace();
|
|
||||||
workspace.setSize("500px", "100px");
|
|
||||||
workspace.setCoordSize(500, 100);
|
|
||||||
workspace.setCoordOrigin(0, 0);
|
|
||||||
builder(workspace, 1, 5);
|
|
||||||
workspace.addItAsChildTo($("strokeStyleWidth"));
|
|
||||||
|
|
||||||
|
|
||||||
};
|
|
||||||
strokeStyleTest();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
Stroke Width.
|
Stroke Width.
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div id="strokeWidth"/>
|
<div id="strokeWidth"></div>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
</tr>
|
</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>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
Stroke Opacity.
|
Stroke Opacity.
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div id="strokeOpacity"/>
|
<div id="strokeOpacity"></div>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
<script type="text/javascript">
|
|
||||||
var strokeOpacityTest = function ()
|
|
||||||
{
|
|
||||||
var workspace = new web2d.Workspace();
|
|
||||||
workspace.setSize("500px", "100px");
|
|
||||||
workspace.setCoordSize(500, 100);
|
|
||||||
workspace.setCoordOrigin(0, 0);
|
|
||||||
|
|
||||||
var rect = new web2d.Rect(0, {x:5,y:5,width:390,height:90,fillColor:'green',
|
|
||||||
strokeColor:'black',strokeStyle:'solid',strokeWidth:1});
|
|
||||||
workspace.appendChild(rect);
|
|
||||||
|
|
||||||
var rectAttributes = {width:60,height:60,fillColor:'yellow',strokeColor:'black',strokeStyle:'solid',strokeWidth:10};
|
|
||||||
rect = new web2d.Rect(0, rectAttributes);
|
|
||||||
rect.setPosition(20, 20);
|
|
||||||
rect.setAttribute("strokeOpacity", 1);
|
|
||||||
workspace.appendChild(rect);
|
|
||||||
|
|
||||||
rect = new web2d.Rect(0, rectAttributes);
|
|
||||||
rect.setPosition(120, 20);
|
|
||||||
rect.setAttribute("strokeOpacity", 0.5);
|
|
||||||
workspace.appendChild(rect);
|
|
||||||
|
|
||||||
rect = new web2d.Rect(0, rectAttributes);
|
|
||||||
rect.setPosition(220, 20);
|
|
||||||
rect.setAttribute("strokeOpacity", 0.3);
|
|
||||||
workspace.appendChild(rect);
|
|
||||||
|
|
||||||
rect = new web2d.Rect(0, rectAttributes);
|
|
||||||
rect.setPosition(320, 20);
|
|
||||||
rect.setAttribute("strokeOpacity", 0);
|
|
||||||
workspace.appendChild(rect);
|
|
||||||
|
|
||||||
workspace.addItAsChildTo($("strokeOpacity"));
|
|
||||||
};
|
|
||||||
strokeOpacityTest();
|
|
||||||
</script>
|
|
||||||
<!-- ************************************************** -->
|
<!-- ************************************************** -->
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
Fill Opacity.
|
Fill Opacity.
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div id="fillOpacity"/>
|
<div id="fillOpacity"></div>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
<script type="text/javascript">
|
|
||||||
var fillOpacityTest = function ()
|
|
||||||
{
|
|
||||||
var workspace = new web2d.Workspace();
|
|
||||||
workspace.setSize("500px", "100px");
|
|
||||||
workspace.setCoordSize(500, 100);
|
|
||||||
workspace.setCoordOrigin(0, 0);
|
|
||||||
|
|
||||||
var rect = new web2d.Rect(0, {x:5,y:5,width:390,height:90,fillColor:'green',
|
|
||||||
strokeColor:'black',strokeStyle:'solid',strokeWidth:4});
|
|
||||||
workspace.appendChild(rect);
|
|
||||||
|
|
||||||
var rectAttributes = {width:60,height:60,fillColor:'yellow',strokeColor:'black',strokeStyle:'solid',strokeWidth:10};
|
|
||||||
rect = new web2d.Rect(0, rectAttributes);
|
|
||||||
rect.setPosition(20, 20);
|
|
||||||
rect.setAttribute("fillOpacity", 1);
|
|
||||||
workspace.appendChild(rect);
|
|
||||||
|
|
||||||
rect = new web2d.Rect(0, rectAttributes);
|
|
||||||
rect.setPosition(120, 20);
|
|
||||||
rect.setAttribute("fillOpacity", 0.5);
|
|
||||||
workspace.appendChild(rect);
|
|
||||||
|
|
||||||
rect = new web2d.Rect(0, rectAttributes);
|
|
||||||
rect.setPosition(220, 20);
|
|
||||||
rect.setAttribute("fillOpacity", 0.3);
|
|
||||||
workspace.appendChild(rect);
|
|
||||||
|
|
||||||
rect = new web2d.Rect(0, rectAttributes);
|
|
||||||
rect.setPosition(320, 20);
|
|
||||||
rect.setAttribute("fillOpacity", 0);
|
|
||||||
workspace.appendChild(rect);
|
|
||||||
|
|
||||||
workspace.addItAsChildTo($("fillOpacity"));
|
|
||||||
};
|
|
||||||
fillOpacityTest();
|
|
||||||
</script>
|
|
||||||
<!-- ************************************************** -->
|
<!-- ************************************************** -->
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
Opacity.
|
Opacity.
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div id="opacity"/>
|
<div id="opacity"></div>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
<script type="text/javascript">
|
|
||||||
var opacityTest = function ()
|
|
||||||
{
|
|
||||||
var workspace = new web2d.Workspace();
|
|
||||||
workspace.setSize("500px", "100px");
|
|
||||||
workspace.setCoordSize(500, 100);
|
|
||||||
workspace.setCoordOrigin(0, 0);
|
|
||||||
|
|
||||||
var rect = new web2d.Rect(0, {x:5,y:5,width:390,height:90,fillColor:'green',
|
|
||||||
strokeColor:'black',strokeStyle:'solid',strokeWidth:4});
|
|
||||||
workspace.appendChild(rect);
|
|
||||||
|
|
||||||
var rectAttributes = {width:60,height:60,fillColor:'yellow',strokeColor:'black',strokeStyle:'solid',strokeWidth:10};
|
|
||||||
rect = new web2d.Rect(0, rectAttributes);
|
|
||||||
rect.setPosition(20, 20);
|
|
||||||
rect.setOpacity(0.8);
|
|
||||||
workspace.appendChild(rect);
|
|
||||||
|
|
||||||
rect = new web2d.Rect(0, rectAttributes);
|
|
||||||
rect.setPosition(120, 20);
|
|
||||||
rect.setOpacity(0.5);
|
|
||||||
workspace.appendChild(rect);
|
|
||||||
|
|
||||||
rect = new web2d.Rect(0, rectAttributes);
|
|
||||||
rect.setPosition(220, 20);
|
|
||||||
rect.setOpacity(0.3);
|
|
||||||
workspace.appendChild(rect);
|
|
||||||
|
|
||||||
rect = new web2d.Rect(0, rectAttributes);
|
|
||||||
rect.setPosition(320, 20);
|
|
||||||
rect.setOpacity(0);
|
|
||||||
workspace.appendChild(rect);
|
|
||||||
|
|
||||||
workspace.addItAsChildTo($("opacity"));
|
|
||||||
};
|
|
||||||
opacityTest();
|
|
||||||
</script>
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
Visibility.
|
Visibility.
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div id="visibility"/>
|
<div id="visibility"></div>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
<script type="text/javascript">
|
|
||||||
var visibilityTest = function ()
|
|
||||||
{
|
|
||||||
var workspace = new web2d.Workspace({fillColor:'yellow',strokeWidth:'2px'});
|
|
||||||
workspace.setSize("500px", "100px");
|
|
||||||
workspace.setCoordSize(500, 100);
|
|
||||||
workspace.setCoordOrigin(0, 0);
|
|
||||||
|
|
||||||
var rectAttributes = {width:60,height:60,fillColor:'green',strokeColor:'black',strokeStyle:'solid',strokeWidth:10};
|
|
||||||
var rect = new web2d.Rect(0, rectAttributes);
|
|
||||||
rect.setPosition(120, 20);
|
|
||||||
workspace.appendChild(rect);
|
|
||||||
rect.addEventListener("mouseover", function() {
|
|
||||||
alert("Mouse Over");
|
|
||||||
});
|
|
||||||
|
|
||||||
var isVisible = true;
|
|
||||||
var executer = function()
|
|
||||||
{
|
|
||||||
isVisible = !isVisible;
|
|
||||||
rect.setVisibility(isVisible);
|
|
||||||
};
|
|
||||||
executer.periodical(100);
|
|
||||||
|
|
||||||
workspace.addItAsChildTo($("visibility"));
|
|
||||||
};
|
|
||||||
visibilityTest();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</table>
|
</table>
|
||||||
</body>
|
</body>
|
||||||
|
@ -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>
|
||||||
|
@ -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();
|
||||||
|
@ -2,7 +2,8 @@
|
|||||||
|
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<script type="text/javascript">
|
|
||||||
|
<script type="text/javascript">
|
||||||
web2d = {
|
web2d = {
|
||||||
peer: {}
|
peer: {}
|
||||||
};
|
};
|
||||||
@ -59,9 +60,197 @@
|
|||||||
<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>
|
||||||
|
<script type="text/javascript">
|
||||||
|
function initialize(){
|
||||||
|
web2d.peer.Toolkit.init();
|
||||||
|
|
||||||
|
var overflowWorkspace = new web2d.Workspace();
|
||||||
|
overflowWorkspace.setSize("100px", "100px");
|
||||||
|
var elipse1 = new web2d.Elipse();
|
||||||
|
elipse1.setSize(200, 200);
|
||||||
|
elipse1.setPosition(0, 0);
|
||||||
|
overflowWorkspace.appendChild(elipse1);
|
||||||
|
overflowWorkspace.addItAsChildTo($("overflowExample"));
|
||||||
|
|
||||||
|
|
||||||
|
var workspacePosition = function()
|
||||||
|
{
|
||||||
|
|
||||||
|
var elipseAttr = {width:100,height:100,x:100,y:100};
|
||||||
|
|
||||||
|
var divElem = $("positionExample");
|
||||||
|
var workPosition = new web2d.Workspace();
|
||||||
|
workPosition.setSize("100px", "100px");
|
||||||
|
elipse = new web2d.Elipse(elipseAttr);
|
||||||
|
workPosition.appendChild(elipse);
|
||||||
|
workPosition.addItAsChildTo(divElem);
|
||||||
|
|
||||||
|
var x = 100;
|
||||||
|
var executer = function()
|
||||||
|
{
|
||||||
|
x = (x + 10) % 100;
|
||||||
|
divElem.style.left = x + "px";
|
||||||
|
};
|
||||||
|
executer.periodical(100);
|
||||||
|
|
||||||
|
};
|
||||||
|
workspacePosition();
|
||||||
|
|
||||||
|
// Draw a reference grid.
|
||||||
|
var container = document.getElementById("sizeExampleContainer");
|
||||||
|
var grid = new Grid(container, 35, 12);
|
||||||
|
grid.setPosition("0px", "0px")
|
||||||
|
grid.render();
|
||||||
|
|
||||||
|
// Define a workspace using pixels and inchs.
|
||||||
|
var workspacePixel = new web2d.Workspace();
|
||||||
|
workspacePixel.setSize("100px", "100px");
|
||||||
|
elipse = new web2d.Elipse();
|
||||||
|
elipse.setSize(100, 100);
|
||||||
|
elipse.setPosition(100, 100);
|
||||||
|
|
||||||
|
workspacePixel.appendChild(elipse);
|
||||||
|
workspacePixel.addItAsChildTo($("sizeExamplePixels"));
|
||||||
|
|
||||||
|
var workspaceInchs = new web2d.Workspace();
|
||||||
|
workspaceInchs.setSize("1in", "1in");
|
||||||
|
elipse = new web2d.Elipse();
|
||||||
|
elipse.setSize(100, 100);
|
||||||
|
elipse.setPosition(100, 100);
|
||||||
|
|
||||||
|
workspaceInchs.appendChild(elipse);
|
||||||
|
workspaceInchs.addItAsChildTo($("sizeExampleInch"));
|
||||||
|
|
||||||
|
|
||||||
|
var workspaceCoordSizeSample = function()
|
||||||
|
{
|
||||||
|
// Workspace with CoordSize(100,100);
|
||||||
|
var coordSizeSampleBuilder = function(width, height)
|
||||||
|
{
|
||||||
|
var workspace = new web2d.Workspace();
|
||||||
|
workspace.setSize("100px", "100px");
|
||||||
|
workspace.setCoordSize(width, height);
|
||||||
|
|
||||||
|
elipse = new web2d.Elipse();
|
||||||
|
elipse.setPosition(50, 50);
|
||||||
|
workspace.appendChild(elipse);
|
||||||
|
|
||||||
|
elipse = new web2d.Elipse();
|
||||||
|
elipse.setPosition(0, 0);
|
||||||
|
workspace.appendChild(elipse);
|
||||||
|
|
||||||
|
elipse = new web2d.Elipse();
|
||||||
|
elipse.setPosition(0, 100);
|
||||||
|
workspace.appendChild(elipse);
|
||||||
|
|
||||||
|
elipse = new web2d.Elipse();
|
||||||
|
elipse.setPosition(100, 0);
|
||||||
|
workspace.appendChild(elipse);
|
||||||
|
|
||||||
|
elipse = new web2d.Elipse();
|
||||||
|
elipse.setPosition(100, 100);
|
||||||
|
workspace.appendChild(elipse);
|
||||||
|
return workspace;
|
||||||
|
};
|
||||||
|
|
||||||
|
var workspace100x100 = coordSizeSampleBuilder(100, 100);
|
||||||
|
workspace100x100.addItAsChildTo($("coordsizeExample100x100"));
|
||||||
|
|
||||||
|
var workspace100x200 = coordSizeSampleBuilder(100, 200);
|
||||||
|
workspace100x200.addItAsChildTo($("coordsizeExample100x200"));
|
||||||
|
|
||||||
|
var workspace200x100 = coordSizeSampleBuilder(200, 100);
|
||||||
|
workspace200x100.addItAsChildTo($("coordsizeExample200x100"));
|
||||||
|
|
||||||
|
var dynamicWorkspace = coordSizeSampleBuilder(100, 100);
|
||||||
|
dynamicWorkspace.addItAsChildTo($("coordsizeExampleDynamic"));
|
||||||
|
|
||||||
|
var size = 100;
|
||||||
|
var executer = function()
|
||||||
|
{
|
||||||
|
size = (size + 1) % 100;
|
||||||
|
if (size < 30)
|
||||||
|
{
|
||||||
|
size = 30;
|
||||||
|
}
|
||||||
|
|
||||||
|
dynamicWorkspace.setCoordSize(size, size);
|
||||||
|
};
|
||||||
|
executer.periodical(100);
|
||||||
|
dynamicWorkspace.setCoordSize(size, size);
|
||||||
|
};
|
||||||
|
|
||||||
|
workspaceCoordSizeSample();
|
||||||
|
|
||||||
|
|
||||||
|
var workspaceCoordOriginSample = function()
|
||||||
|
{
|
||||||
|
|
||||||
|
var coordOriginSampleBuilder = function(x, y)
|
||||||
|
{
|
||||||
|
// Workspace with CoordOrigin(100,100);
|
||||||
|
var workspace = new web2d.Workspace();
|
||||||
|
workspace.setSize("100px", "100px");
|
||||||
|
workspace.setCoordSize(100, 100);
|
||||||
|
workspace.setCoordOrigin(x, y);
|
||||||
|
|
||||||
|
elipse = new web2d.Elipse();
|
||||||
|
elipse.setPosition(0, 0);
|
||||||
|
workspace.appendChild(elipse);
|
||||||
|
|
||||||
|
elipse = new web2d.Elipse();
|
||||||
|
elipse.setPosition(0, 100);
|
||||||
|
workspace.appendChild(elipse);
|
||||||
|
|
||||||
|
elipse = new web2d.Elipse();
|
||||||
|
elipse.setPosition(100, 0);
|
||||||
|
workspace.appendChild(elipse);
|
||||||
|
|
||||||
|
elipse = new web2d.Elipse();
|
||||||
|
elipse.setPosition(100, 100);
|
||||||
|
workspace.appendChild(elipse);
|
||||||
|
|
||||||
|
elipse = new web2d.Elipse();
|
||||||
|
elipse.setPosition(50, 50);
|
||||||
|
workspace.appendChild(elipse);
|
||||||
|
|
||||||
|
elipse = new web2d.Elipse();
|
||||||
|
elipse.setPosition(100, 100);
|
||||||
|
workspace.appendChild(elipse);
|
||||||
|
|
||||||
|
return workspace;
|
||||||
|
};
|
||||||
|
|
||||||
|
var workspace0x0 = coordOriginSampleBuilder(0, 0);
|
||||||
|
workspace0x0.addItAsChildTo($("coordorigin0x0"));
|
||||||
|
|
||||||
|
var workspace0x50 = coordOriginSampleBuilder(0, 50);
|
||||||
|
workspace0x50.addItAsChildTo($("coordorigin0x50"));
|
||||||
|
|
||||||
|
var workspace50x0 = coordOriginSampleBuilder(50, 0);
|
||||||
|
workspace50x0.addItAsChildTo($("coordorigin50x0"));
|
||||||
|
|
||||||
|
// Workspace animation changing the coordsize from (30,30) to (100,100)
|
||||||
|
var dynamicWorkspace = coordOriginSampleBuilder(100, 100);
|
||||||
|
dynamicWorkspace.addItAsChildTo($("coordoriginExampleDynamic"));
|
||||||
|
|
||||||
|
var x = 50;
|
||||||
|
var y = 50;
|
||||||
|
executer = function() {
|
||||||
|
x = (x + 1) % 50;
|
||||||
|
y = (y + 1) % 50;
|
||||||
|
|
||||||
|
dynamicWorkspace.setCoordOrigin(x, y);
|
||||||
|
};
|
||||||
|
executer.periodical(100);
|
||||||
|
};
|
||||||
|
workspaceCoordOriginSample();
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body onload="initialize();">
|
||||||
|
|
||||||
<h1>Workspace Render Tests </h1>
|
<h1>Workspace Render Tests </h1>
|
||||||
|
|
||||||
@ -82,19 +271,6 @@
|
|||||||
</td>
|
</td>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
web2d.peer.Toolkit.init();
|
|
||||||
|
|
||||||
var overflowWorkspace = new web2d.Workspace();
|
|
||||||
overflowWorkspace.setSize("100px", "100px");
|
|
||||||
var elipse1 = new web2d.Elipse();
|
|
||||||
elipse1.setSize(200, 200);
|
|
||||||
elipse1.setPosition(0, 0);
|
|
||||||
overflowWorkspace.appendChild(elipse1);
|
|
||||||
overflowWorkspace.addItAsChildTo($("overflowExample"));
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<!--**************************************************************************-->
|
<!--**************************************************************************-->
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
@ -105,32 +281,6 @@
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
var workspacePosition = function()
|
|
||||||
{
|
|
||||||
|
|
||||||
var elipseAttr = {width:100,height:100,x:100,y:100};
|
|
||||||
|
|
||||||
var divElem = $("positionExample");
|
|
||||||
var workPosition = new web2d.Workspace();
|
|
||||||
workPosition.setSize("100px", "100px");
|
|
||||||
elipse = new web2d.Elipse(elipseAttr);
|
|
||||||
workPosition.appendChild(elipse);
|
|
||||||
workPosition.addItAsChildTo(divElem);
|
|
||||||
|
|
||||||
var x = 100;
|
|
||||||
var executer = function()
|
|
||||||
{
|
|
||||||
x = (x + 10) % 100;
|
|
||||||
divElem.style.left = x + "px";
|
|
||||||
};
|
|
||||||
executer.periodical(100);
|
|
||||||
|
|
||||||
};
|
|
||||||
workspacePosition();
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<!--**************************************************************************-->
|
<!--**************************************************************************-->
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
@ -146,34 +296,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
// Draw a reference grid.
|
|
||||||
var container = document.getElementById("sizeExampleContainer");
|
|
||||||
var grid = new Grid(container, 35, 12);
|
|
||||||
grid.setPosition("0px", "0px")
|
|
||||||
grid.render();
|
|
||||||
|
|
||||||
// Define a workspace using pixels and inchs.
|
|
||||||
var workspacePixel = new web2d.Workspace();
|
|
||||||
workspacePixel.setSize("100px", "100px");
|
|
||||||
elipse = new web2d.Elipse();
|
|
||||||
elipse.setSize(100, 100);
|
|
||||||
elipse.setPosition(100, 100);
|
|
||||||
|
|
||||||
workspacePixel.appendChild(elipse);
|
|
||||||
workspacePixel.addItAsChildTo($("sizeExamplePixels"));
|
|
||||||
|
|
||||||
var workspaceInchs = new web2d.Workspace();
|
|
||||||
workspaceInchs.setSize("1in", "1in");
|
|
||||||
elipse = new web2d.Elipse();
|
|
||||||
elipse.setSize(100, 100);
|
|
||||||
elipse.setPosition(100, 100);
|
|
||||||
|
|
||||||
workspaceInchs.appendChild(elipse);
|
|
||||||
workspaceInchs.addItAsChildTo($("sizeExampleInch"));
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<!--**************************************************************************-->
|
<!--**************************************************************************-->
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
@ -208,68 +330,6 @@
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
var workspaceCoordSizeSample = function()
|
|
||||||
{
|
|
||||||
// Workspace with CoordSize(100,100);
|
|
||||||
var coordSizeSampleBuilder = function(width, height)
|
|
||||||
{
|
|
||||||
var workspace = new web2d.Workspace();
|
|
||||||
workspace.setSize("100px", "100px");
|
|
||||||
workspace.setCoordSize(width, height);
|
|
||||||
|
|
||||||
elipse = new web2d.Elipse();
|
|
||||||
elipse.setPosition(50, 50);
|
|
||||||
workspace.appendChild(elipse);
|
|
||||||
|
|
||||||
elipse = new web2d.Elipse();
|
|
||||||
elipse.setPosition(0, 0);
|
|
||||||
workspace.appendChild(elipse);
|
|
||||||
|
|
||||||
elipse = new web2d.Elipse();
|
|
||||||
elipse.setPosition(0, 100);
|
|
||||||
workspace.appendChild(elipse);
|
|
||||||
|
|
||||||
elipse = new web2d.Elipse();
|
|
||||||
elipse.setPosition(100, 0);
|
|
||||||
workspace.appendChild(elipse);
|
|
||||||
|
|
||||||
elipse = new web2d.Elipse();
|
|
||||||
elipse.setPosition(100, 100);
|
|
||||||
workspace.appendChild(elipse);
|
|
||||||
return workspace;
|
|
||||||
};
|
|
||||||
|
|
||||||
var workspace100x100 = coordSizeSampleBuilder(100, 100);
|
|
||||||
workspace100x100.addItAsChildTo($("coordsizeExample100x100"));
|
|
||||||
|
|
||||||
var workspace100x200 = coordSizeSampleBuilder(100, 200);
|
|
||||||
workspace100x200.addItAsChildTo($("coordsizeExample100x200"));
|
|
||||||
|
|
||||||
var workspace200x100 = coordSizeSampleBuilder(200, 100);
|
|
||||||
workspace200x100.addItAsChildTo($("coordsizeExample200x100"));
|
|
||||||
|
|
||||||
var dynamicWorkspace = coordSizeSampleBuilder(100, 100);
|
|
||||||
dynamicWorkspace.addItAsChildTo($("coordsizeExampleDynamic"));
|
|
||||||
|
|
||||||
var size = 100;
|
|
||||||
var executer = function()
|
|
||||||
{
|
|
||||||
size = (size + 1) % 100;
|
|
||||||
if (size < 30)
|
|
||||||
{
|
|
||||||
size = 30;
|
|
||||||
}
|
|
||||||
|
|
||||||
dynamicWorkspace.setCoordSize(size, size);
|
|
||||||
};
|
|
||||||
executer.periodical(100);
|
|
||||||
dynamicWorkspace.setCoordSize(size, size);
|
|
||||||
};
|
|
||||||
|
|
||||||
workspaceCoordSizeSample();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!--**************************************************************************-->
|
<!--**************************************************************************-->
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
@ -304,71 +364,6 @@
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
var workspaceCoordOriginSample = function()
|
|
||||||
{
|
|
||||||
|
|
||||||
var coordOriginSampleBuilder = function(x, y)
|
|
||||||
{
|
|
||||||
// Workspace with CoordOrigin(100,100);
|
|
||||||
var workspace = new web2d.Workspace();
|
|
||||||
workspace.setSize("100px", "100px");
|
|
||||||
workspace.setCoordSize(100, 100);
|
|
||||||
workspace.setCoordOrigin(x, y);
|
|
||||||
|
|
||||||
elipse = new web2d.Elipse();
|
|
||||||
elipse.setPosition(0, 0);
|
|
||||||
workspace.appendChild(elipse);
|
|
||||||
|
|
||||||
elipse = new web2d.Elipse();
|
|
||||||
elipse.setPosition(0, 100);
|
|
||||||
workspace.appendChild(elipse);
|
|
||||||
|
|
||||||
elipse = new web2d.Elipse();
|
|
||||||
elipse.setPosition(100, 0);
|
|
||||||
workspace.appendChild(elipse);
|
|
||||||
|
|
||||||
elipse = new web2d.Elipse();
|
|
||||||
elipse.setPosition(100, 100);
|
|
||||||
workspace.appendChild(elipse);
|
|
||||||
|
|
||||||
elipse = new web2d.Elipse();
|
|
||||||
elipse.setPosition(50, 50);
|
|
||||||
workspace.appendChild(elipse);
|
|
||||||
|
|
||||||
elipse = new web2d.Elipse();
|
|
||||||
elipse.setPosition(100, 100);
|
|
||||||
workspace.appendChild(elipse);
|
|
||||||
|
|
||||||
return workspace;
|
|
||||||
};
|
|
||||||
|
|
||||||
var workspace0x0 = coordOriginSampleBuilder(0, 0);
|
|
||||||
workspace0x0.addItAsChildTo($("coordorigin0x0"));
|
|
||||||
|
|
||||||
var workspace0x50 = coordOriginSampleBuilder(0, 50);
|
|
||||||
workspace0x50.addItAsChildTo($("coordorigin0x50"));
|
|
||||||
|
|
||||||
var workspace50x0 = coordOriginSampleBuilder(50, 0);
|
|
||||||
workspace50x0.addItAsChildTo($("coordorigin50x0"));
|
|
||||||
|
|
||||||
// Workspace animation changing the coordsize from (30,30) to (100,100)
|
|
||||||
var dynamicWorkspace = coordOriginSampleBuilder(100, 100);
|
|
||||||
dynamicWorkspace.addItAsChildTo($("coordoriginExampleDynamic"));
|
|
||||||
|
|
||||||
var x = 50;
|
|
||||||
var y = 50;
|
|
||||||
executer = function() {
|
|
||||||
x = (x + 1) % 50;
|
|
||||||
y = (y + 1) % 50;
|
|
||||||
|
|
||||||
dynamicWorkspace.setCoordOrigin(x, y);
|
|
||||||
};
|
|
||||||
executer.periodical(100);
|
|
||||||
};
|
|
||||||
workspaceCoordOriginSample();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</table>
|
</table>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
@ -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
|
||||||
this.product = Product.SAFARI;
|
//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) {
|
} 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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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 {
|
||||||
|
@ -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) {
|
||||||
return (el.className && el.className.contains(className, ' '));
|
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);
|
return (nocash) ? elements : new Elements(elements);
|
||||||
},
|
},
|
||||||
|
@ -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"
|
<div id="export" class="button" title="<spring:message code="EXPORT"/>">
|
||||||
|
<div class="toolbarLabel"><p><spring:message code="EXPORT"/></p></div>
|
||||||
|
<a id="exportAnchor" href="export.htm?mapId=${mindmap.id}" rel="moodalbox 600px 400px"
|
||||||
title="<spring:message code="EXPORT_DETAILS"/>">
|
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>
|
</a>
|
||||||
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</div>
|
</div>
|
||||||
<div id="zoom" class="buttonContainer" title="Zoom In">
|
<div id="zoom" class="buttonContainer" title="Zoom In">
|
||||||
|
Loading…
Reference in New Issue
Block a user