wisemapping-frontend/packages/web2d/test/playground/group.js
Paulo Veiga c60254aca1 Add support for emoji
Update core libraries.
2022-10-31 05:17:01 +00:00

306 lines
7.5 KiB
JavaScript

/* eslint-disable no-alert */
import $ from 'jquery';
import { Workspace, Line, Group, Elipse } from '../../src';
global.$ = $;
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();