wisemapping-frontend/packages/web2d/test/playground/shapes.js
Paulo Gustavo Veiga 5ee7448d3c Format JS files.
2022-07-12 18:58:11 -07:00

257 lines
6.2 KiB
JavaScript

import $ from 'jquery';
import { Workspace, Rect } from '../../src';
global.$ = $;
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', () => {
rect.setVisibility(false, 500);
});
rect.addEvent('mouseout', () => {
rect.setVisibility(true, 500);
});
// executer.periodical(100);
workspace.addItAsChildTo($('#visibility'));
};
visibilityTest();