vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2025-06-11 18:43:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

Migration to EE6 of web2d and mindplot

Browse Source
This commit is contained in:
Paulo Gustavo Veiga
2021-12-04 15:39:20 -08:00
parent a8a843353b
commit 17b22ca211
113 changed files with 4509 additions and 4829 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
packages/web2d/test/playground/Grid.js Executable file
View File

@ -0,0 +1,63 @@
/*
* Copyright [2021] [wisemapping]
*
* Licensed under WiseMapping Public License, Version 1.0 (the "License").
* It is basically the Apache License, Version 2.0 (the "License") plus the
* "powered by wisemapping" text requirement on every single page;
* you may not use this file except in compliance with the License.
* You may obtain a copy of the license at
*
* http://www.wisemapping.org/license
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import $ from '@libraries/jquery-2.1.0';
class Grid {
constructor(parent, colums, rows) {
const cellSize = '10px';
this._parent = parent;
this._container = Grid._createContainer();
const tbody = $(this._container.firstChild.firstChild);
for (let i = 0; i < rows; i++) {
const trElement = $('<tr></tr>');
for (let j = 0; j < colums; j++) {
const tdElement = $('<td></td>');
tdElement.css({
width: cellSize,
height: cellSize,
borderWidth: '1px',
borderStyle: 'dashed',
borderColor: 'lightsteelblue',
});
trElement.append(tdElement);
}
tbody.append(trElement);
}
}
setPosition(x, y) {
this._container.style.left = x;
this._container.style.top = y;
}
render() {
$(this._parent).append(this._container);
}
static _createContainer() {
const result = window.document.createElement('div');
result.style.tableLayout = 'fixed';
result.style.borderCollapse = 'collapse';
result.style.emptyCells = 'show';
result.style.position = 'absolute';
result.innerHTML = '<table style="table-layout:fixed;border-collapse:collapse;empty-cells:show;"><tbody id="tableBody"></tbody></table>';
return result;
}
}
export default Grid ;

47
packages/web2d/test/playground/arrow.html
View File

@ -9,46 +9,10 @@
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript">
function initialize() {
web2d.Toolkit.init();
var overflowWorkspace = new web2d.Workspace({ fillColor: 'green' });
overflowWorkspace.setSize("200px", "200px");
var arrow = new web2d.Arrow();
arrow.setFrom(50, 50);
arrow.setControlPoint(new web2d.Point(-50, 0));
overflowWorkspace.append(arrow);
var arrow2 = new web2d.Arrow();
arrow2.setFrom(100, 50);
arrow2.setControlPoint(new web2d.Point(50, 50));
overflowWorkspace.append(arrow2);
overflowWorkspace.addItAsChildTo($('#overflowExample').first());
}
</script>
</head>
<body onload="initialize();">
<body>
<h1>PolyLines Render Tests </h1>
<table>
<colgroup style="width:80%;">
<col style="width:30%" />
@ -63,15 +27,6 @@
</td>
</tr>
<tr>
<td>
This is how multiple childs will look in each style line
</td>
<td>
<div id="multipleLineExample" />
</td>
</tr>
</table>
</body>

22
packages/web2d/test/playground/arrow.js Normal file
View File

@ -0,0 +1,22 @@
import $ from '@libraries/jquery-2.1.0';
import {
Toolkit, Workspace, Arrow, Point,
} from '../../src';
Toolkit.init();
const overflowWorkspace = new Workspace({ fillColor: 'green' });
overflowWorkspace.setSize('200px', '200px');
const arrow = new Arrow();
arrow.setFrom(50, 50);
arrow.setControlPoint(new Point(-50, 0));
overflowWorkspace.append(arrow);
const arrow2 = new Arrow();
arrow2.setFrom(100, 50);
arrow2.setControlPoint(new Point(50, 50));
overflowWorkspace.append(arrow2);
overflowWorkspace.addItAsChildTo($('#overflowExample').first());

8
packages/web2d/test/playground/context-loader.js
View File

@ -1,8 +0,0 @@
import Grid from './utils';
import web2d from '../../src/web2d';
import $ from '@libraries/jquery-2.1.0';
global.Grid = Grid;
global.web2d = web2d;
global.$ = $;

49
packages/web2d/test/playground/curvedLine.html
View File

@ -9,47 +9,9 @@
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript">
function initialize() {
web2d.Toolkit.init();
var overflowWorkspace = new web2d.Workspace({ fillColor: 'green' });
overflowWorkspace.setSize("400px", "400px");
var line1 = new web2d.CurvedLine();
line1.setStyle(web2d.CurvedLine.SIMPLE_LINE);
line1.setFrom(200, 200);
line1.setTo(100, 100);
line1.setSrcControlPoint(new web2d.Point(-100, 0));
line1.setDestControlPoint(new web2d.Point(100, 0));
overflowWorkspace.append(line1);
var line2 = new web2d.CurvedLine();
line2.setStyle(web2d.CurvedLine.NICE_LINE);
line2.setFrom(0, 0);
line2.setTo(150, 90);
line2.setSrcControlPoint(new web2d.Point(100, 0));
line2.setDestControlPoint(new web2d.Point(-100, 0));
overflowWorkspace.append(line2);
overflowWorkspace.addItAsChildTo($('#overflowExample').first());
}
</script>
</head>
<body onload="initialize();">
<body>
<h1>PolyLines Render Tests </h1>
@ -67,15 +29,6 @@
</td>
</tr>
<tr>
<td>
This is how multiple childs will look in each style line
</td>
<td>
<div id="multipleLineExample" />
</td>
</tr>
</table>
</body>

26
packages/web2d/test/playground/curvedLine.js Normal file
View File

@ -0,0 +1,26 @@
import $ from '@libraries/jquery-2.1.0';
import {
Toolkit, Workspace, CurvedLine, Point,
} from '../../src';
Toolkit.init();
const overflowWorkspace = new Workspace({ fillColor: 'green' });
overflowWorkspace.setSize('400px', '400px');
const line1 = new CurvedLine();
line1.setStyle(CurvedLine.SIMPLE_LINE);
line1.setFrom(200, 200);
line1.setTo(100, 100);
line1.setSrcControlPoint(new Point(-100, 0));
line1.setDestControlPoint(new Point(100, 0));
overflowWorkspace.append(line1);
const line2 = new CurvedLine();
line2.setStyle(CurvedLine.NICE_LINE);
line2.setFrom(0, 0);
line2.setTo(150, 90);
line2.setSrcControlPoint(new Point(100, 0));
line2.setDestControlPoint(new Point(-100, 0));
overflowWorkspace.append(line2);
overflowWorkspace.addItAsChildTo($('#overflowExample').first());

127
packages/web2d/test/playground/events.html
View File

@ -1,5 +1,4 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
@ -8,136 +7,14 @@
td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<style type="text/css">
.eventForm {
float: left;
margin: 10px;
}
</style>
<script type="text/javascript">
function EventLogger(type, element) {
this._enable = false;
this._element = element;
this._type = type;
this._listener = function logger(event) {
var oldColor = element.getAttribute('fillColor');
element.setFill("yellow");
alert("Event on:" + element.getType() + ", Type:" + type);
element.setFill(oldColor);
};
}
EventLogger.prototype.changeState = function () {
this._enable = !this._enable;
if (this._enable) {
this._element.addEvent(this._type, this._listener);
} else {
this._element.removeEvent(this._type, this._listener);
}
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.addEvent(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.removeEvent(this._type, listener);
}
}
function initialize() {
web2d.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.append(bigElipse);
var smallElipse = new web2d.Elipse();
smallElipse.setSize(50, 50);
smallElipse.setPosition(75, 75);
smallElipse.setFill('red')
workspace.append(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').first());
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.append(elipse);
mEventWorkspace.addItAsChildTo($('#workspaceMultipleEvents').first());
multipleHandler = new MultipleEventHandler('click', elipse);
}
</script>
</head>
<body onload="initialize();">
<body>
<h1>Elements Event Handling</h1>
<table>
@ -273,4 +150,4 @@
</table>
</body>
</html>
</html>

107
packages/web2d/test/playground/events.js Normal file
View File

@ -0,0 +1,107 @@
/* eslint-disable no-alert */
import $ from '@libraries/jquery-2.1.0';
import {
Toolkit, Workspace, Elipse,
} from '../../src';
global.$ = $;
function EventLogger(type, element) {
this._enable = false;
this._element = element;
this._type = type;
this._listener = function logger() {
const oldColor = element.getAttribute('fillColor');
element.setFill('yellow');
alert(`Event on:${element.getType()}, Type:${type}`);
element.setFill(oldColor);
};
}
EventLogger.prototype.changeState = function changeState() {
this._enable = !this._enable;
if (this._enable) {
this._element.addEvent(this._type, this._listener);
} else {
this._element.removeEvent(this._type, this._listener);
}
return this._enable;
};
function MultipleEventHandler(type, element) {
this._listeners = [];
this._type = type;
this._element = element;
}
MultipleEventHandler.prototype.registerOneListener = function registerOneListener() {
const count = this._listeners.length;
const listener = () => {
alert(`Listener #:${count}`);
};
this._listeners.push(listener);
this._element.addEvent(this._type, listener);
};
MultipleEventHandler.prototype.listenerCount = function listenerCount() {
return this._listeners.length;
};
MultipleEventHandler.prototype.unRegisterOneListener = function unRegisterOneListener() {
if (this._listeners.length > 0) {
const listener = this._listeners.pop();
this._element.removeEvent(this._type, listener);
}
};
Toolkit.init();
// Workspace with CoordOrigin(100,100);
const workspace = new Workspace();
workspace.setSize('150px', '150px');
workspace.setCoordSize(150, 150);
const bigElipse = new Elipse();
bigElipse.setSize(100, 100);
bigElipse.setPosition(75, 75);
workspace.append(bigElipse);
const smallElipse = new Elipse();
smallElipse.setSize(50, 50);
smallElipse.setPosition(75, 75);
smallElipse.setFill('red');
workspace.append(smallElipse);
global.wClickEventLogger = new EventLogger('click', workspace);
global.wMouseoverEventLogger = new EventLogger('mouseover', workspace);
global.wMouseoutEventLogger = new EventLogger('mouseout', workspace);
global.wMousemoveEventLogger = new EventLogger('mousemove', workspace);
global.wDblCickEventLogger = new EventLogger('dblclick', workspace);
global.esClickEventLogger = new EventLogger('click', smallElipse);
global.esMouseoverEventLogger = new EventLogger('mouseover', smallElipse);
global.esMouseoutEventLogger = new EventLogger('mouseout', smallElipse);
global.esMousemoveEventLogger = new EventLogger('mousemove', smallElipse);
global.esDblCickEventLogger = new EventLogger('dblclick', smallElipse);
global.ebClickEventLogger = new EventLogger('click', bigElipse);
global.ebMouseoverEventLogger = new EventLogger('mouseover', bigElipse);
global.ebMouseoutEventLogger = new EventLogger('mouseout', bigElipse);
global.ebousemoveEventLogger = new EventLogger('mousemove', bigElipse);
global.ebblCickEventLogger = new EventLogger('dblclick', bigElipse);
workspace.addItAsChildTo($('#workspaceContainer').first());
const mEventWorkspace = new Workspace();
mEventWorkspace.setSize('150px', '150px');
mEventWorkspace.setCoordSize(150, 150);
const elipse = new Elipse();
elipse.setSize(100, 100);
elipse.setPosition(75, 75);
elipse.setFill('blue');
mEventWorkspace.append(elipse);
mEventWorkspace.addItAsChildTo($('#workspaceMultipleEvents').first());
global.multipleHandler = new MultipleEventHandler('click', elipse);

73
packages/web2d/test/playground/font.html
View File

@ -1,7 +1,5 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
th,
@ -9,78 +7,9 @@
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript">
function multiline(text, family, elemId) {
var overflowWorkspace = new web2d.Workspace();
overflowWorkspace.setSize('200px', '240px');
overflowWorkspace.setCoordSize('200', '240');
overflowWorkspace.setCoordOrigin(0, 0);
[6, 8, 10, 15].forEach(function (size, i) {
var wText = new web2d.Text();
overflowWorkspace.append(wText);
wText.setText(text);
wText.setFont(family, size, 'bold');
wText.setPosition(30, 50 * i);
wText.setColor('red');
});
overflowWorkspace.addItAsChildTo($("#" + elemId));
}
function alignments(text, family, elemId) {
var overflowWorkspace = new web2d.Workspace();
overflowWorkspace.setSize('260px', '240px');
overflowWorkspace.setCoordSize('260', '240');
overflowWorkspace.setCoordOrigin(0, 0);
['center', 'left', 'right'].forEach(function (align, i) {
var wText = new web2d.Text();
overflowWorkspace.append(wText);
wText.setText(text);
wText.setFont(family, 8, 'bold');
wText.setPosition(30, 80 * i);
wText.setColor('red');
wText.setTextAlignment(align);
});
overflowWorkspace.addItAsChildTo($("#" + elemId));
}
function initialize() {
web2d.Toolkit.init();
// Multine tests ...
['Arial', 'Tahoma', 'Verdana', 'Times'].forEach(function (family, i) {
multiline('This multine text.\nLine 1 :)\nLine2', family, 'multi' + i);
});
// Multine tests and alingments .. ...
['Arial', 'Tahoma', 'Verdana', 'Times'].forEach(function (family, i) {
alignments('This multine text.\nThis is the long line just because :)\nShort line', family, 'amulti' + i);
})
}
</script>
</head>
<body onload="initialize();">
<body>
<h1>Web2d Fonts Tests</h1>
<table>
<colgroup>
<col style="width:30%" />

57
packages/web2d/test/playground/font.js Normal file
View File

@ -0,0 +1,57 @@
import $ from '@libraries/jquery-2.1.0';
import {
Toolkit, Workspace, Text,
} from '../../src';
global.$ = $;
function multiline(text, family, elemId) {
const workspace = new Workspace();
workspace.setSize('200px', '240px');
workspace.setCoordSize('200', '240');
workspace.setCoordOrigin(0, 0);
[6, 8, 10, 15].forEach((size, i) => {
const wText = new Text();
workspace.append(wText);
wText.setText(text);
wText.setFont(family, size, 'bold');
wText.setPosition(30, 50 * i);
wText.setColor('blue');
});
workspace.addItAsChildTo($(`#${elemId}`));
}
function alignments(text, family, elemId) {
const overflowWorkspace = new Workspace();
overflowWorkspace.setSize('260px', '240px');
overflowWorkspace.setCoordSize('260', '240');
overflowWorkspace.setCoordOrigin(0, 0);
['center', 'left', 'right'].forEach((align, i) => {
const wText = new Text();
overflowWorkspace.append(wText);
wText.setText(text);
wText.setFont(family, 8, 'bold');
wText.setPosition(30, 80 * i);
wText.setColor('green');
wText.setTextAlignment(align);
});
overflowWorkspace.addItAsChildTo($(`#${elemId}`));
}
Toolkit.init();
// Multine tests ...
['Arial', 'Tahoma', 'Verdana', 'Times'].forEach((family, i) => {
multiline('This multine text.\nLine 1 :)\nLine2', family, `multi${i}`);
});
// Multine tests and alingments .. ...
['Arial', 'Tahoma', 'Verdana', 'Times'].forEach((family, i) => {
alignments('This multine text.\nThis is the long line just because :)\nShort line', family, `amulti${i}`);
});

331
packages/web2d/test/playground/group.html
View File

@ -9,338 +9,11 @@
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript">
function initialize() {
web2d.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.append(group);
var elipse = new web2d.Elipse();
elipse.setSize(200, 200);
elipse.setPosition(100, 100);
group.append(elipse);
var line = new web2d.Line();
line.setFrom(0, 0);
line.setTo(200, 200);
line.setStroke("blue");
group.append(line);
line = new web2d.Line();
line.setFrom(200, 0);
line.setTo(0, 200);
line.setStroke("blue");
group.append(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.append(group);
var elipseLeft = new web2d.Elipse();
elipseLeft.setSize(200, 200)
elipseLeft.setPosition(200, 0)
group.append(elipseLeft);
var elipseRight = new web2d.Elipse();
elipseRight.setSize(200, 200)
elipseRight.setPosition(0, 0)
group.append(elipseRight);
var listener = function (e) {
alert("Click event on:" + this.getType())
};
group.addEvent("click", listener);
elipseLeft.addEvent("click", listener);
elipseRight.addEvent("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.append(groupOuter);
var elipseOuter = new web2d.Elipse();
elipseOuter.setSize(200, 200);
elipseOuter.setPosition(100, 100);
elipseOuter.setFill("red");
groupOuter.append(elipseOuter);
var line = new web2d.Line();
line.setFrom(0, 0);
line.setTo(200, 200);
line.setStroke("red");
groupOuter.append(line);
var line = new web2d.Line();
line.setFrom(200, 0);
line.setTo(0, 200);
line.setStroke("red");
groupOuter.append(line);
var groupInner = new web2d.Group();
groupInner.setSize(50, 50);
groupInner.setPosition(25, 25);
groupInner.setCoordSize(100, 100);
groupInner.setCoordOrigin(0, 0);
groupOuter.append(groupInner);
var elipse = new web2d.Elipse();
elipse.setSize(200, 200);
elipse.setPosition(100, 100);
groupInner.append(elipse);
var line = new web2d.Line();
line.setFrom(0, 0);
line.setTo(200, 200);
line.setStroke("blue");
groupInner.append(line);
var line = new web2d.Line();
line.setFrom(200, 0);
line.setTo(0, 200);
line.setStroke("blue");
groupInner.append(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.append(elipseOuter);
var group = new web2d.Group();
group.setSize(50, 50);
group.setCoordSize(width, height);
group.setPosition(25, 25);
workspace.append(group);
elipseInner = new web2d.Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(50, 50);
elipseInner.setFill("red");
group.append(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.append(elipseOuter);
var group = new web2d.Group();
group.setSize(50, 50);
group.setCoordSize(100, 100);
group.setCoordOrigin(x, y);
group.setPosition(25, 25);
workspace.append(group);
elipseInner = new web2d.Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(50, 50);
elipseInner.setFill("red");
group.append(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.addEvent("mouseover", function () {
alert("Mouse Over Group");
});
workspace.append(group);
elipseOuter = new web2d.Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
group.addEvent("mouseover", function () {
alert("Mouse Over elipseOuter");
});
group.append(elipseOuter);
elipseInner = new web2d.Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(25, 25);
elipseInner.setFill("red");
group.append(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.append(group);
elipseOuter = new web2d.Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
group.append(elipseOuter);
elipseInner = new web2d.Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(25, 25);
elipseInner.setFill("red");
group.append(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>
<body onload="initialize();">
<h1>Group Render Tests.</h1>
<body>
<h1>Group Render Tests</h1>
<table>
<colgroup style="width:80%;">
<col style="width:50%" />

304
packages/web2d/test/playground/group.js Normal file
View File

@ -0,0 +1,304 @@
/* eslint-disable no-alert */
import $ from '@libraries/jquery-2.1.0';
import {
Toolkit, Workspace, Line, Group, Elipse,
} from '../../src';
global.$ = $;
Toolkit.init();
const basicTest = () => {
const workspace = new Workspace();
workspace.setSize('150px', '150px');
workspace.setCoordSize(100, 100);
const group = new Group();
group.setSize(50, 50);
group.setPosition(25, 50);
group.setCoordSize(200, 200);
group.setCoordOrigin(0, 0);
workspace.append(group);
const elipse = new Elipse();
elipse.setSize(200, 200);
elipse.setPosition(100, 100);
group.append(elipse);
let line = new Line();
line.setFrom(0, 0);
line.setTo(200, 200);
line.setStroke('blue');
group.append(line);
line = new Line();
line.setFrom(200, 0);
line.setTo(0, 200);
line.setStroke('blue');
group.append(line);
workspace.addItAsChildTo($('#groupBasicContainer'));
let xDir = 1;
let yDir = 1;
const executer = function () {
const y = group.getPosition().y + yDir;
const 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();
const eventTest = () => {
const workspace = new Workspace();
workspace.setSize('150px', '150px');
workspace.setCoordSize(100, 100);
const groupAttributes = {
width: 50, height: 50, x: 25, y: 50, coordSize: '200 200', coordOrigin: '0 0',
};
const group = new Group(groupAttributes);
workspace.append(group);
const elipseLeft = new Elipse();
elipseLeft.setSize(200, 200);
elipseLeft.setPosition(200, 0);
group.append(elipseLeft);
const elipseRight = new Elipse();
elipseRight.setSize(200, 200);
elipseRight.setPosition(0, 0);
group.append(elipseRight);
const listener = function listener() {
alert(`Click event on:${this.getType()}`);
};
group.addEvent('click', listener);
elipseLeft.addEvent('click', listener);
elipseRight.addEvent('click', listener);
workspace.addItAsChildTo($('#groupEventsContainer'));
};
eventTest();
const eventTest2 = () => {
const workspace = new Workspace();
workspace.setSize('150px', '150px');
workspace.setCoordSize(200, 200);
const groupOuter = new Group();
groupOuter.setSize(50, 50);
groupOuter.setPosition(25, 25);
groupOuter.setCoordSize(100, 100);
groupOuter.setCoordOrigin(0, 0);
workspace.append(groupOuter);
const elipseOuter = new Elipse();
elipseOuter.setSize(200, 200);
elipseOuter.setPosition(100, 100);
elipseOuter.setFill('red');
groupOuter.append(elipseOuter);
let line = new Line();
line.setFrom(0, 0);
line.setTo(200, 200);
line.setStroke('red');
groupOuter.append(line);
line = new Line();
line.setFrom(200, 0);
line.setTo(0, 200);
line.setStroke('red');
groupOuter.append(line);
const groupInner = new Group();
groupInner.setSize(50, 50);
groupInner.setPosition(25, 25);
groupInner.setCoordSize(100, 100);
groupInner.setCoordOrigin(0, 0);
groupOuter.append(groupInner);
const elipse = new Elipse();
elipse.setSize(200, 200);
elipse.setPosition(100, 100);
groupInner.append(elipse);
line = new Line();
line.setFrom(0, 0);
line.setTo(200, 200);
line.setStroke('blue');
groupInner.append(line);
line = new Line();
line.setFrom(200, 0);
line.setTo(0, 200);
line.setStroke('blue');
groupInner.append(line);
workspace.addItAsChildTo($('#groupNestedContainer'));
};
eventTest2();
const workspaceCoordSizeSample = () => {
function groupSampleBuilder(width, height) {
// Group with CoordSize(50,50);
const workspace = new Workspace();
workspace.setSize('100px', '100px');
workspace.setCoordSize(100, 100);
const elipseOuter = new Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
workspace.append(elipseOuter);
const group = new Group();
group.setSize(50, 50);
group.setCoordSize(width, height);
group.setPosition(25, 25);
workspace.append(group);
const elipseInner = new Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(50, 50);
elipseInner.setFill('red');
group.append(elipseInner);
return workspace;
}
const sample100x100 = groupSampleBuilder(100, 100);
sample100x100.addItAsChildTo($('#coordsizeExample100x100'));
const sample100x200 = groupSampleBuilder(100, 200);
sample100x200.addItAsChildTo($('#coordsizeExample100x200'));
const sample200x100 = groupSampleBuilder(200, 100);
sample200x100.addItAsChildTo($('#coordsizeExample200x100'));
};
workspaceCoordSizeSample();
const workspaceCoordOriginSample = () => {
function groupSampleBuilder(x, y) {
const workspace = new Workspace();
workspace.setSize('100px', '100px');
workspace.setCoordSize(100, 100);
const elipseOuter = new Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
workspace.append(elipseOuter);
const group = new Group();
group.setSize(50, 50);
group.setCoordSize(100, 100);
group.setCoordOrigin(x, y);
group.setPosition(25, 25);
workspace.append(group);
const elipseInner = new Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(50, 50);
elipseInner.setFill('red');
group.append(elipseInner);
return workspace;
}
const sample0x0 = groupSampleBuilder(0, 0);
sample0x0.addItAsChildTo($('#coordOriginExample0x0'));
const sample100x200 = groupSampleBuilder(0, 50);
sample100x200.addItAsChildTo($('#coordOriginExample0x50'));
const sample200x100 = groupSampleBuilder(50, 0);
sample200x100.addItAsChildTo($('#coordOriginExample50x0'));
};
workspaceCoordOriginSample();
const groupVisibilitySample = () => {
const workspace = new Workspace();
workspace.setSize('100px', '100px');
workspace.setCoordSize(100, 100);
const group = new Group();
group.setSize(100, 100);
group.setPosition(0, 0);
group.setCoordSize(100, 100);
group.addEvent('mouseover', () => {
alert('Mouse Over Group');
});
workspace.append(group);
const elipseOuter = new Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
group.addEvent('mouseover', () => {
alert('Mouse Over elipseOuter');
});
group.append(elipseOuter);
const elipseInner = new Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(25, 25);
elipseInner.setFill('red');
group.append(elipseInner);
let isVisible = true;
const executer = function () {
isVisible = !isVisible;
group.setVisibility(isVisible);
};
// executer.periodical(100);
workspace.addItAsChildTo($('#visibilityExample'));
};
groupVisibilitySample();
const groupVisibilitySample2 = () => {
const workspace = new Workspace();
workspace.setSize('100px', '100px');
workspace.setCoordSize(100, 100);
const group = new Group();
group.setSize(100, 100);
group.setPosition(0, 0);
group.setCoordSize(100, 100);
workspace.append(group);
const elipseOuter = new Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
group.append(elipseOuter);
const elipseInner = new Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(25, 25);
elipseInner.setFill('red');
group.append(elipseInner);
let width = 10;
let height = 10;
const executer = function () {
width = (width + 10) % 100;
height = (height + 10) % 100;
group.setCoordSize(width, height);
};
// executer.periodical(100);
workspace.addItAsChildTo($('#scaleStrokeExample'));
};
groupVisibilitySample2();

5
packages/web2d/test/playground/index.html
View File

@ -4,12 +4,13 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Testing</title>
<title>WiseMapping Web2D Playground</title>
</head>
<body>
<div>
<h1>Testing</h1>
<h1>WiseMapping Web2D Playground</h1>
<h2>This is a list of the different Web2D components supported:</h2>
<ul>
<li><a href="/arrow.html">Arrow</a></li>
<li><a href="/curvedLine.html">Curved Line</a></li>

77
packages/web2d/test/playground/line.html
View File

@ -9,84 +9,9 @@
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript">
function initialize() {
web2d.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.append(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.append(line);
}
strokeWidthWorkspace.append(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.append(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.append(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.append(line);
}
strokeArrowWorkspace.addItAsChildTo($('#strokeArrowSample'));
}
</script>
</head>
<body onload="initialize();">
<body>
<h1>Lines Render Tests </h1>

67
packages/web2d/test/playground/line.js Normal file
View File

@ -0,0 +1,67 @@
import $ from '@libraries/jquery-2.1.0';
import {
Toolkit, Workspace, Line, Rect,
} from '../../src';
global.$ = $;
Toolkit.init();
const workspaceAttributes = {
width: '700px', height: '100px', coordSize: '350 50', fillColor: '#ffffcc',
};
const strokeWidthWorkspace = new Workspace(workspaceAttributes);
const rect = new Rect();
rect.setSize(10, 10);
rect.setStroke(0);
rect.setPosition(250, 5);
strokeWidthWorkspace.append(rect);
for (let i = 0; i <= 10; i++) {
const line = new Line();
line.setFrom(5 + (i * 25), 5);
line.setTo(5 + (i * 25), 45);
line.setAttribute('strokeWidth', i + 1);
strokeWidthWorkspace.append(line);
}
strokeWidthWorkspace.append(rect);
strokeWidthWorkspace.addItAsChildTo($('#strokeWidthSample'));
const strokeOpacityWorkspace = new Workspace(workspaceAttributes);
for (let i = 0; i < 10; i++) {
const line = new 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.append(line);
}
strokeOpacityWorkspace.addItAsChildTo($('#strokeOpacitySample'));
const strokeStyleWorkspace = new Workspace(workspaceAttributes);
const styles = ['solid', 'dot', 'dash', 'dashdot', 'longdash'];
for (let i = 0; i < styles.length; i++) {
const line = new 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.append(line);
}
strokeStyleWorkspace.addItAsChildTo($('#strokeStyleSample'));
const strokeArrowWorkspace = new Workspace(workspaceAttributes);
const styles2 = ['none ', 'block ', 'classic', 'diamond ', 'oval', 'open', 'chevron', 'doublechevron'];
for (let i = 0; i < styles.length; i++) {
const line = new Line();
line.setFrom(25 + (i * 30), 5);
line.setTo(13 + (i * 30), 45);
line.setAttribute('strokeWidth', 2);
line.setAttribute('strokeColor', 'red');
line.setArrowStyle(styles2[i]);
strokeArrowWorkspace.append(line);
}
strokeArrowWorkspace.addItAsChildTo($('#strokeArrowSample'));

152
packages/web2d/test/playground/polyLine.html
View File

@ -9,159 +9,9 @@
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript">
function initialize() {
web2d.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.append(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.append(line);
//
// var line = new web2d.PolyLine();
// line.setStyle("Straight");
// line.setFrom(90, -90);
// line.setTo(20, 20);
// overflowWorkspace.append(line);
//
// var line = new web2d.PolyLine();
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setStroke(1, 'solid', 'red');
// overflowWorkspace.append(line);
//
// // Reference ...
// var refLine = new web2d.Line();
// refLine.setFrom(95, 0);
// refLine.setTo(95, 200);
// refLine.setStroke(1, 'solid', 'red');
// overflowWorkspace.append(refLine);
//
// var refLine = new web2d.Line();
// refLine.setFrom(165, 0);
// refLine.setTo(165, 200);
// refLine.setStroke(1, 'solid', 'red');
// overflowWorkspace.append(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.append(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(95, 95);
line1.setTo(165, 135);
line1.setStyle("Curved");
overflowWorkspace.append(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(95, 90);
line1.setTo(160, 20);
line1.setStyle("Straight");
overflowWorkspace.append(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(95, 90);
line1.setTo(160, 50);
line1.setStyle("Straight");
overflowWorkspace.append(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(90, 90);
line1.setTo(20, 20);
overflowWorkspace.append(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(90, 90);
line1.setTo(20, 50);
overflowWorkspace.append(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(90, 95);
line1.setTo(20, 165);
overflowWorkspace.append(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(90, 95);
line1.setTo(20, 135);
overflowWorkspace.append(line1);
overflowWorkspace.addItAsChildTo($('#multipleLineExample'));
}
</script>
</head>
<body onload="initialize();">
<body>
<h1>PolyLines Render Tests </h1>
<table>

67
packages/web2d/test/playground/polyLine.js Normal file
View File

@ -0,0 +1,67 @@
import $ from '@libraries/jquery-2.1.0';
import {
Toolkit, Workspace, PolyLine,
} from '../../src';
global.$ = $;
Toolkit.init();
let overflowWorkspace = new Workspace({ fillColor: 'green' });
overflowWorkspace.setSize('100px', '100px');
const line = new PolyLine();
line.setTo(165, 165);
line.setFrom(95, 95);
line.setStyle('Straight');
line.setStroke('10');
overflowWorkspace.append(line);
overflowWorkspace.addItAsChildTo($('#overflowExample'));
overflowWorkspace = new Workspace();
overflowWorkspace.setSize('100px', '100px');
let line1 = new PolyLine();
line1.setFrom(95, 95);
line1.setTo(165, 165);
line1.setStyle('Curved');
overflowWorkspace.append(line1);
line1 = new PolyLine();
line1.setFrom(95, 95);
line1.setTo(165, 135);
line1.setStyle('Curved');
overflowWorkspace.append(line1);
line1 = new PolyLine();
line1.setFrom(95, 90);
line1.setTo(160, 20);
line1.setStyle('Straight');
overflowWorkspace.append(line1);
line1 = new PolyLine();
line1.setFrom(95, 90);
line1.setTo(160, 50);
line1.setStyle('Straight');
overflowWorkspace.append(line1);
line1 = new PolyLine();
line1.setFrom(90, 90);
line1.setTo(20, 20);
overflowWorkspace.append(line1);
line1 = new PolyLine();
line1.setFrom(90, 90);
line1.setTo(20, 50);
overflowWorkspace.append(line1);
line1 = new PolyLine();
line1.setFrom(90, 95);
line1.setTo(20, 165);
overflowWorkspace.append(line1);
line1 = new PolyLine();
line1.setFrom(90, 95);
line1.setTo(20, 135);
overflowWorkspace.append(line1);
overflowWorkspace.addItAsChildTo($('#multipleLineExample'));

145
packages/web2d/test/playground/prototype.html
View File

@ -8,152 +8,9 @@
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript">
var xScale = 1000;
var yScale = 600;
var shapeOrigX = 0;
function initialize() {
web2d.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.append(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.append(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.append(inerRect);
nodeGroup._drag = false;
workspace.append(nodeGroup);
// Add behaviour ...
inerRect.addEvent("mouseover", function () {
outerRect.setVisibility(true);
});
inerRect.addEvent("mouseout", function () {
if (!nodeGroup._drag) {
outerRect.setVisibility(false);
}
});
nodeGroup.addEvent("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.append(shadowRect);
workspace.append(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.addEvent("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.removeEvent("mousemove", workspace._moveFunction);
workspace.removeEvent("mouseup", mouseUp);
};
workspace.addEvent("mouseup", mouseUp);
});
}
</script>
</head>
<body onload="initialize();">
<body>
<h1>Chart prototype Tests </h1>

129
packages/web2d/test/playground/prototype.js vendored Normal file
View File

@ -0,0 +1,129 @@
import $ from '@libraries/jquery-2.1.0';
import {
Toolkit, Workspace, Rect, Group,
} from '../../src';
global.$ = $;
let xScale = 1000;
let yScale = 600;
let shapeOrigX = 0;
Toolkit.init();
const workspace = new Workspace();
workspace.setSize(`${xScale}px`, `${yScale}px`);
workspace.setCoordSize(xScale, yScale);
workspace.setCoordOrigin(0, 0);
workspace.setFill('#f0f0f0');
// Center Topic Rect ...
const centralRect = new Rect(0.3);
centralRect.setSize(200, 60);
centralRect.setPosition(300, 300);
centralRect.setFill('#99ccff');
centralRect.setStroke(1, 'solid', '#878b8f');
workspace.append(centralRect);
workspace.addItAsChildTo($('#divWorkspace'));
global.zoomIn = function zoomIn() {
xScale /= 2;
yScale /= 2;
workspace.setSize(`${xScale}px`, `${yScale}px`);
};
global.zoomOut = function zoomOut() {
xScale *= 2;
yScale *= 2;
workspace.setSize(`${xScale}px`, `${yScale}px`);
};
global.createShape = function createShape() {
// Secondary Idea...
const nodeGroup = new Group();
nodeGroup.setSize(200, 60);
nodeGroup.setCoordSize(200, 60);
nodeGroup.setPosition(700, shapeOrigX);
shapeOrigX += 50;
const outerRect = new Rect();
outerRect.setSize(200, 100);
outerRect.setVisibility(false);
outerRect.setPosition(0, 0);
outerRect.setFill('#3e9eff');
outerRect.setStroke(1, 'solid', '#878b8f');
nodeGroup.append(outerRect);
const inerRect = new Rect(0.3);
inerRect.setSize(190, 85);
inerRect.setPosition(5, 10);
inerRect.setFill('white');
inerRect.setStroke(1, 'dash', '#878b8f');
nodeGroup.append(inerRect);
nodeGroup._drag = false;
workspace.append(nodeGroup);
// Add behaviour ...
inerRect.addEvent('mouseover', () => {
outerRect.setVisibility(true);
});
inerRect.addEvent('mouseout', () => {
if (!nodeGroup._drag) {
outerRect.setVisibility(false);
}
});
nodeGroup.addEvent('mousedown', function addEvent(e) {
const shadowGroup = new Group();
shadowGroup.setSize(200, 60);
shadowGroup.setCoordSize(200, 60);
const position = nodeGroup.getPosition();
shadowGroup.setPosition(position.x, position.y);
const shadowRect = new Rect(0.3);
shadowRect.setSize(190, 85);
shadowRect.setPosition(5, 10);
shadowRect.setFill('white', 0.3);
shadowRect.setStroke(1, 'dash', '#878b8f');
shadowGroup.append(shadowRect);
workspace.append(shadowGroup);
this._shadowGroup = shadowGroup;
if (!this._moveFunction) {
nodeGroup._drag = true;
workspace._moveFunction = (event) => {
// Esto mas o menos funciona por que el size del workspace es 1 a uno con
// el del la pantalla.
let posx = 0;
let 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.addEvent('mousemove', workspace._moveFunction);
const mouseUp = () => {
workspace.removeChild(shadowGroup);
const pos = shadowGroup.getPosition();
nodeGroup.setPosition(pos.x, pos.y);
nodeGroup._drag = false;
outerRect.setVisibility(true);
workspace.removeEvent('mousemove', workspace._moveFunction);
workspace.removeEvent('mouseup', mouseUp);
};
workspace.addEvent('mouseup', mouseUp);
});
};

62
packages/web2d/test/playground/rect.html
View File

@ -9,69 +9,9 @@
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript">
function initialize() {
web2d.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.append(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.append(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>
<body onload="initialize();">
<body>
<h1>Rect Render Tests </h1>

49
packages/web2d/test/playground/rect.js Normal file
View File

@ -0,0 +1,49 @@
import $ from '@libraries/jquery-2.1.0';
import {
Toolkit, Workspace, Rect,
} from '../../src';
global.$ = $;
Toolkit.init();
const rectExampleTest = () => {
const workspace = new Workspace();
workspace.setSize('100px', '100px');
workspace.setCoordSize(100, 100);
workspace.setCoordOrigin(0, 0);
const rect = new Rect();
rect.setPosition(20, 20);
workspace.append(rect);
workspace.addItAsChildTo($('#rectExample'));
};
rectExampleTest();
const roundrectExampleTest = () => {
function builder(container, x, width, height) {
for (let i = 1; i <= 10; i++) {
const rect = new Rect(i / 10);
rect.setPosition(x, ((i - 1) * (50 + 5)));
rect.setSize(width, height);
container.append(rect);
}
}
// 50 x 50
const workspace = new 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();

234
packages/web2d/test/playground/shapes.html
View File

@ -9,241 +9,9 @@
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript">
function initialize() {
web2d.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.append(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.append(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.append(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.append(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.append(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.append(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.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(120, 20);
rect.setAttribute("strokeOpacity", 0.5);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(220, 20);
rect.setAttribute("strokeOpacity", 0.3);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(320, 20);
rect.setAttribute("strokeOpacity", 0);
workspace.append(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.append(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.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(120, 20);
rect.setAttribute("fillOpacity", 0.5);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(220, 20);
rect.setAttribute("fillOpacity", 0.3);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(320, 20);
rect.setAttribute("fillOpacity", 0);
workspace.append(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.append(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.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(120, 20);
rect.setOpacity(0.5);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(220, 20);
rect.setOpacity(0.3);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(320, 20);
rect.setOpacity(0);
workspace.append(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.append(rect);
rect.addEvent("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>
<body onload="initialize();">
<body>
<h1>Element properties Tests </h1>

241
packages/web2d/test/playground/shapes.js Normal file
View File

@ -0,0 +1,241 @@
import $ from '@libraries/jquery-2.1.0';
import {
Toolkit, Workspace, Rect,
} from '../../src';
global.$ = $;
Toolkit.init();
const strokeStyleTest = () => {
function builder(parent, scale, strokeWidth) {
const rectSize = scale * 80;
const yPosition = 10 * scale;
let xPosition = 10 * scale;
let rect = new Rect();
rect.setSize(rectSize, rectSize);
rect.setPosition(xPosition, yPosition);
rect.setFill('yellow');
rect.setStroke(1, 'solid', 'black');
parent.append(rect);
xPosition += 90 * scale;
rect = new Rect();
rect.setSize(rectSize, rectSize);
rect.setPosition(xPosition, yPosition);
rect.setFill('yellow');
rect.setStroke(strokeWidth, 'dot', 'black');
parent.append(rect);
xPosition += 90 * scale;
rect = new Rect();
rect.setSize(rectSize, rectSize);
rect.setPosition(xPosition, yPosition);
rect.setFill('yellow');
rect.setStroke(strokeWidth, 'dash', 'black');
parent.append(rect);
xPosition += 90 * scale;
rect = new Rect();
rect.setSize(rectSize, rectSize);
rect.setPosition(xPosition, yPosition);
rect.setFill('yellow');
rect.setStroke(strokeWidth, 'longdash', 'black');
parent.append(rect);
xPosition += 90 * scale;
rect = new Rect();
rect.setSize(rectSize, rectSize);
rect.setPosition(xPosition, yPosition);
rect.setFill('yellow');
rect.setStroke(strokeWidth, 'dashdot', 'black');
parent.append(rect);
}
// Workspace with default scale ...
let workspace = new 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 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 Workspace();
workspace.setSize('500px', '100px');
workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0);
builder(workspace, 1, 5);
workspace.addItAsChildTo($('#strokeStyleWidth'));
};
strokeStyleTest();
const strokeOpacityTest = () => {
const workspace = new Workspace();
workspace.setSize('500px', '100px');
workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0);
let rect = new Rect(0, {
x: 5,
y: 5,
width: 390,
height: 90,
fillColor: 'green',
strokeColor: 'black',
strokeStyle: 'solid',
strokeWidth: 1,
});
workspace.append(rect);
const rectAttributes = {
width: 60, height: 60, fillColor: 'yellow', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10,
};
rect = new Rect(0, rectAttributes);
rect.setPosition(20, 20);
rect.setAttribute('strokeOpacity', 1);
workspace.append(rect);
rect = new Rect(0, rectAttributes);
rect.setPosition(120, 20);
rect.setAttribute('strokeOpacity', 0.5);
workspace.append(rect);
rect = new Rect(0, rectAttributes);
rect.setPosition(220, 20);
rect.setAttribute('strokeOpacity', 0.3);
workspace.append(rect);
rect = new Rect(0, rectAttributes);
rect.setPosition(320, 20);
rect.setAttribute('strokeOpacity', 0);
workspace.append(rect);
workspace.addItAsChildTo($('#strokeOpacity'));
};
strokeOpacityTest();
const fillOpacityTest = () => {
const workspace = new Workspace();
workspace.setSize('500px', '100px');
workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0);
let rect = new Rect(0, {
x: 5,
y: 5,
width: 390,
height: 90,
fillColor: 'green',
strokeColor: 'black',
strokeStyle: 'solid',
strokeWidth: 4,
});
workspace.append(rect);
const rectAttributes = {
width: 60, height: 60, fillColor: 'yellow', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10,
};
rect = new Rect(0, rectAttributes);
rect.setPosition(20, 20);
rect.setAttribute('fillOpacity', 1);
workspace.append(rect);
rect = new Rect(0, rectAttributes);
rect.setPosition(120, 20);
rect.setAttribute('fillOpacity', 0.5);
workspace.append(rect);
rect = new Rect(0, rectAttributes);
rect.setPosition(220, 20);
rect.setAttribute('fillOpacity', 0.3);
workspace.append(rect);
rect = new Rect(0, rectAttributes);
rect.setPosition(320, 20);
rect.setAttribute('fillOpacity', 0);
workspace.append(rect);
workspace.addItAsChildTo($('#fillOpacity'));
};
fillOpacityTest();
const opacityTest = () => {
const workspace = new Workspace();
workspace.setSize('500px', '100px');
workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0);
let rect = new Rect(0, {
x: 5,
y: 5,
width: 390,
height: 90,
fillColor: 'green',
strokeColor: 'black',
strokeStyle: 'solid',
strokeWidth: 4,
});
workspace.append(rect);
const rectAttributes = {
width: 60, height: 60, fillColor: 'yellow', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10,
};
rect = new Rect(0, rectAttributes);
rect.setPosition(20, 20);
rect.setOpacity(0.8);
workspace.append(rect);
rect = new Rect(0, rectAttributes);
rect.setPosition(120, 20);
rect.setOpacity(0.5);
workspace.append(rect);
rect = new Rect(0, rectAttributes);
rect.setPosition(220, 20);
rect.setOpacity(0.3);
workspace.append(rect);
rect = new Rect(0, rectAttributes);
rect.setPosition(320, 20);
rect.setOpacity(0);
workspace.append(rect);
workspace.addItAsChildTo($('#opacity'));
};
opacityTest();
const visibilityTest = () => {
const workspace = new Workspace({ fillColor: 'yellow', strokeWidth: '2px' });
workspace.setSize('500px', '100px');
workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0);
const rectAttributes = {
width: 60, height: 60, fillColor: 'green', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10,
};
const rect = new Rect(0, rectAttributes);
rect.setPosition(120, 20);
workspace.append(rect);
rect.addEvent('mouseover', () => {
alert('Mouse Over');
});
let isVisible = true;
const executer = function () {
isVisible = !isVisible;
rect.setVisibility(isVisible);
};
// executer.periodical(100);
workspace.addItAsChildTo($('#visibility'));
};
visibilityTest();

60
packages/web2d/test/playground/utils.js
View File

@ -1,60 +0,0 @@
/*
* Copyright [2021] [wisemapping]
*
* Licensed under WiseMapping Public License, Version 1.0 (the "License").
* It is basically the Apache License, Version 2.0 (the "License") plus the
* "powered by wisemapping" text requirement on every single page;
* you may not use this file except in compliance with the License.
* You may obtain a copy of the license at
*
* http://www.wisemapping.org/license
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const Grid = function (parent, colums, rows) {
const cellSize = '10px';
this._parent = parent;
this._container = this._createContainer();
const tbody = $(this._container.firstChild.firstChild);
for (let i = 0; i < rows; i++) {
const trElement = $('<tr></tr>');
for (let j = 0; j < colums; j++) {
const tdElement = $('<td></td>');
tdElement.css({
width: cellSize,
height: cellSize,
borderWidth: '1px',
borderStyle: 'dashed',
borderColor: 'lightsteelblue',
});
trElement.append(tdElement);
}
tbody.append(trElement);
}
};
Grid.prototype.setPosition = function (x, y) {
this._container.style.left = x;
this._container.style.top = y;
};
Grid.prototype.render = function () {
$(this._parent).append(this._container);
};
Grid.prototype._createContainer = function () {
const result = window.document.createElement('div');
result.style.tableLayout = 'fixed';
result.style.borderCollapse = 'collapse';
result.style.emptyCells = 'show';
result.style.position = 'absolute';
result.innerHTML = '<table style="table-layout:fixed;border-collapse:collapse;empty-cells:show;"><tbody id="tableBody"></tbody></table>';
return result;
};
export default Grid;

198
packages/web2d/test/playground/workspace.html
View File

@ -9,205 +9,9 @@
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript">
function initialize() {
web2d.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.append(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.append(elipse);
workPosition.addItAsChildTo(divElem);
var x = 100;
var executer = function () {
x = (x + 10) % 100;
divElem.css('left', x + "px");
};
//executer.periodical(100);
};
workspacePosition();
// Draw a reference grid.
// Enable when JS is loading ...
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.append(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.append(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.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(0, 0);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(0, 100);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(100, 0);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(100, 100);
workspace.append(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.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(0, 100);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(100, 0);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(100, 100);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(50, 50);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(100, 100);
workspace.append(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>
<body onload="initialize();">
<body>
<h1>Workspace Render Tests </h1>

181
packages/web2d/test/playground/workspace.js Normal file
View File

@ -0,0 +1,181 @@
import $ from '@libraries/jquery-2.1.0';
import {
Toolkit, Workspace, Elipse,
} from '../../src';
import Grid from './Grid';
global.$ = $;
Toolkit.init();
const overflowWorkspace = new Workspace();
overflowWorkspace.setSize('100px', '100px');
const elipse1 = new Elipse();
elipse1.setSize(200, 200);
elipse1.setPosition(0, 0);
overflowWorkspace.append(elipse1);
overflowWorkspace.addItAsChildTo($('#overflowExample'));
const workspacePosition = () => {
const elipseAttr = {
width: 100, height: 100, x: 100, y: 100,
};
const divElem = $('#positionExample');
const workPosition = new Workspace();
workPosition.setSize('100px', '100px');
const elipse = new Elipse(elipseAttr);
workPosition.append(elipse);
workPosition.addItAsChildTo(divElem);
let x = 100;
const executer = () => {
x = (x + 10) % 100;
divElem.css('left', `${x}px`);
};
// executer.periodical(100);
};
workspacePosition();
// Draw a reference grid.
// Enable when JS is loading ...
const container = document.getElementById('sizeExampleContainer');
const grid = new Grid(container, 35, 12);
grid.setPosition('0px', '0px');
grid.render();
// Define a workspace using pixels and inchs.
const workspacePixel = new Workspace();
workspacePixel.setSize('100px', '100px');
let elipse = new Elipse();
elipse.setSize(100, 100);
elipse.setPosition(100, 100);
workspacePixel.append(elipse);
workspacePixel.addItAsChildTo($('#sizeExamplePixels'));
const workspaceInchs = new Workspace();
workspaceInchs.setSize('1in', '1in');
elipse = new Elipse();
elipse.setSize(100, 100);
elipse.setPosition(100, 100);
workspaceInchs.append(elipse);
workspaceInchs.addItAsChildTo($('#sizeExampleInch'));
const workspaceCoordSizeSample = () => {
// Workspace with CoordSize(100,100);
const coordSizeSampleBuilder = (width, height) => {
const workspace = new Workspace();
workspace.setSize('100px', '100px');
workspace.setCoordSize(width, height);
elipse = new Elipse();
elipse.setPosition(50, 50);
workspace.append(elipse);
elipse = new Elipse();
elipse.setPosition(0, 0);
workspace.append(elipse);
elipse = new Elipse();
elipse.setPosition(0, 100);
workspace.append(elipse);
elipse = new Elipse();
elipse.setPosition(100, 0);
workspace.append(elipse);
elipse = new Elipse();
elipse.setPosition(100, 100);
workspace.append(elipse);
return workspace;
};
const workspace100x100 = coordSizeSampleBuilder(100, 100);
workspace100x100.addItAsChildTo($('#coordsizeExample100x100'));
const workspace100x200 = coordSizeSampleBuilder(100, 200);
workspace100x200.addItAsChildTo($('#coordsizeExample100x200'));
const workspace200x100 = coordSizeSampleBuilder(200, 100);
workspace200x100.addItAsChildTo($('#coordsizeExample200x100'));
const dynamicWorkspace = coordSizeSampleBuilder(100, 100);
dynamicWorkspace.addItAsChildTo($('#coordsizeExampleDynamic'));
let size = 100;
const executer = () => {
size = (size + 1) % 100;
if (size < 30) {
size = 30;
}
dynamicWorkspace.setCoordSize(size, size);
};
// executer.periodical(100);
dynamicWorkspace.setCoordSize(size, size);
};
workspaceCoordSizeSample();
const workspaceCoordOriginSample = () => {
const coordOriginSampleBuilder = (x, y) => {
// Workspace with CoordOrigin(100,100);
const workspace = new Workspace();
workspace.setSize('100px', '100px');
workspace.setCoordSize(100, 100);
workspace.setCoordOrigin(x, y);
elipse = new Elipse();
elipse.setPosition(0, 0);
workspace.append(elipse);
elipse = new Elipse();
elipse.setPosition(0, 100);
workspace.append(elipse);
elipse = new Elipse();
elipse.setPosition(100, 0);
workspace.append(elipse);
elipse = new Elipse();
elipse.setPosition(100, 100);
workspace.append(elipse);
elipse = new Elipse();
elipse.setPosition(50, 50);
workspace.append(elipse);
elipse = new Elipse();
elipse.setPosition(100, 100);
workspace.append(elipse);
return workspace;
};
const workspace0x0 = coordOriginSampleBuilder(0, 0);
workspace0x0.addItAsChildTo($('#coordorigin0x0'));
const workspace0x50 = coordOriginSampleBuilder(0, 50);
workspace0x50.addItAsChildTo($('#coordorigin0x50'));
const workspace50x0 = coordOriginSampleBuilder(50, 0);
workspace50x0.addItAsChildTo($('#coordorigin50x0'));
// Workspace animation changing the coordsize from (30,30) to (100,100)
const dynamicWorkspace = coordOriginSampleBuilder(100, 100);
dynamicWorkspace.addItAsChildTo($('#coordoriginExampleDynamic'));
let x = 50;
let y = 50;
const executer = () => {
x = (x + 1) % 50;
y = (y + 1) % 50;
dynamicWorkspace.setCoordOrigin(x, y);
};
// executer.periodical(100);
};
workspaceCoordOriginSample();