medsurf-draw
Version:
Draw annotations on jpg/zoomify images, based on PIXI.js
1,038 lines • 75.6 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
import * as WebFont from 'webfontloader';
import * as PIXI from 'pixi.js-legacy';
import * as MedsurfDraw from '../lib';
import { v4 as uuidv4 } from 'uuid';
import * as Models from '@ascii-dev-user/medsurf-lib/models';
import { gsap } from 'gsap';
import { PixiPlugin } from 'gsap/PixiPlugin.js';
var canvasDiv = document.getElementById("medsurf_canvas_div");
var canvas = document.getElementById("medsurf_canvas");
var buttonDefault = document.getElementById("button_default");
var buttonMarker = document.getElementById("button_marker");
var buttonSelftest = document.getElementById("button_selftest");
var buttonAuthor = document.getElementById("button_author");
var buttonModel = document.getElementById("button_model");
var buttonChange = document.getElementById("button_change");
var buttonFilter = document.getElementById("button_filter");
var buttonPosition = document.getElementById("button_position");
var buttonVirtualPointer = document.getElementById("button_virtual-poiner");
var buttonTest = document.getElementById("button_test");
var buttonTest2 = document.getElementById("button_test2");
var buttonTest3 = document.getElementById("button_test3");
PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
function ready(fn) {
setTimeout(function () {
if (document.readyState === "complete" || document.readyState === "interactive") {
setTimeout(fn, 1);
}
else {
document.addEventListener("DOMContentLoaded", fn);
}
}, 1000);
}
var app;
var loader;
var virtualPointer;
var image;
var layerGroupsArray = {};
var elementsArray = {};
function destroyImage() {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
return [2, new Promise(function (resolve) {
gsap.to(image, {
duration: 0.3,
alpha: 0,
onComplete: function () {
app.stage.removeChild(image);
image.removeAllListeners();
image.destroy({ children: true });
resolve();
}
});
})];
});
});
}
function setupImage() {
return __awaiter(this, void 0, void 0, function () {
var _this = this;
return __generator(this, function (_a) {
image = new MedsurfDraw.Image({
renderer: app.renderer,
canvas: canvas,
loader: loader,
imageId: 'imageId',
id: "3893",
url: "https://s3-zh.os.switch.ch/medsurf/public/slide/2701,2701/image/1800x1800_80.jpeg?c9eab3bbb580aabcd73c1f7f08fb1a8b",
dimensions: { width: 1152, height: 864 },
});
app.stage.addChild(image);
image.on('sendError', function (e) { return console.log('sendError', e); });
image.on('editGrouping', function (g) { return console.log('editGrouping', g); });
image.on('editLayerGroup', function (lg) { return console.log('editLayerGroup', lg); });
image.on('createArrowWithInteractiveGrouping', function () { return console.log('createArrowWithInteractiveGrouping'); });
image.on('createArrowWithPoiGrouping', function () { return console.log('createArrowWithPoiGrouping'); });
image.on('createArrowWithTextGrouping', function () { return console.log('createArrowWithTextGrouping'); });
image.on('createEllipseWithInteractiveGrouping', function () { return console.log('createEllipseWithInteractiveGrouping'); });
image.on('createEllipseWithPoiGrouping', function () { return console.log('createEllipseWithPoiGrouping'); });
image.on('createEllipseWithTextGrouping', function () { return console.log('createEllipseWithTextGrouping'); });
image.on('createRectangleWithInteractiveGrouping', function () { return console.log('createRectangleWithInteractiveGrouping'); });
image.on('createRectangleWithPoiGrouping', function () { return console.log('createRectangleWithPoiGrouping'); });
image.on('createRectangleWithTextGrouping', function () { return console.log('createRectangleWithTextGrouping'); });
image.on('createInteractiveGrouping', function (ios) { return console.log('createInteractiveGrouping', ios); });
image.on('createPoiGrouping', function (ios) { return console.log('createPoiGrouping', ios); });
image.on('createTextGrouping', function (ios) { return console.log('createTextGrouping', ios); });
image.on('createLegendGrouping', function (ios) { return console.log('createLegendGrouping', ios); });
image.on('createLegend', function () { return console.log('createLegend'); });
image.on('unselectGrouping', function () { return console.log('unselectGrouping'); });
image.on('selectLayerGroup', function (lg) { return console.log('selectLayerGroup', lg); });
image.on('selectLayerGroupByImageObject', function (io) { return console.log('selectLayerGroupByImageObject', io); });
image.on('unselectLayerGroup', function () { return console.log('unselectLayerGroup'); });
image.on('addLayerGroup', function (lg) { return console.log('addLayerGroup', lg); });
image.on('addLayerGroupByName', function (lgn) { return console.log('addLayerGroupByName', lgn); });
image.on('copyLayerGroup', function (lg) {
var generator = new MedsurfDraw.CloneLayerGenerator({
target: image,
imageObjects: image.getImageObjects().map(function (io) { return io.model; }),
cloneLayerGroup: lg,
layerGroupMappings: [],
imageObjectMappings: [],
image: {}
});
generator.once('endGenerator', generator.endGenerator, generator);
generator.once('abortGenerator', generator.abortGenerator, generator);
});
image.on('clipboardLayerGroup', function (lg) { return console.log('clipboardLayerGroup', lg); });
image.on('updateLayerGroup', function (lg) { return console.log('updateLayerGroup', lg); });
image.on('deleteLayerGroup', function (lg) { return console.log('deleteLayerGroup', lg); });
image.on('addLayerGroupImageObjectByImageObject', function (io) { return console.log('addLayerGroupImageObjectByImageObject', io); });
image.on('deleteLayerGroupImageObjectByImageObject', function (io) { return console.log('deleteLayerGroupImageObjectByImageObject', io); });
image.on('editImageObject', function (io) { return console.log('editImageObject', io); });
image.on('selectImageObject', function (io) { return console.log('selectImageObject', io); });
image.on('unselectImageObject', function () { return console.log('unselectImageObject'); });
image.on('addImageObject', function (io, layer, image) {
console.log("addImageObject", io);
if (!layer.layerImageObjects) {
layer.layerImageObjects = [];
}
if (layer.layerImageObjects.findIndex(function (lio) { return lio.imageObject === io.id; }) === -1) {
var layerImageObject = {
dirty: true,
id: uuidv4(),
order: layer.layerImageObjects.length,
layerGroup: layerGroupsArray['sketch'],
imageObject: io.id
};
layer.layerImageObjects.push(layerImageObject);
}
});
image.on('copyImageObject', function (io) {
var generator = new MedsurfDraw.CloneItemGenerator({
target: image,
imageObjects: image.getImageObjects().map(function (io) { return io.model; }),
element: io,
imageObjectMappings: [],
layerGroup: layerGroupsArray['sketch'],
image: {}
});
generator.once('endGenerator', generator.endGenerator, generator);
generator.once('abortGenerator', generator.abortGenerator, generator);
});
image.on('clipboardImageObject', function (io) { return console.log('clipboardImageObject', io); });
image.on('updateImageObject', function (io) { return console.log('updateImageObject', io); });
image.on('degroupImageObjectFromLayerGroup', function (layerGroup, io) { return console.log('degroupImageObjectFromLayerGroup', layerGroup, io); });
image.on('degroupImageObjectFromGrouping', function (grouping, io) { return console.log('degroupImageObjectFromGrouping', grouping, io); });
image.on('deleteImageObject', function (io) {
console.log("deleteImageObject", io);
if (!layerGroupsArray['sketch'].layerImageObjects) {
layerGroupsArray['sketch'].layerImageObjects = [];
}
var layerImageObjectIndex = layerGroupsArray['sketch'].layerImageObjects.findIndex(function (lio) { return lio.imageObject === io.id; });
if (layerImageObjectIndex > -1) {
layerGroupsArray['sketch'].layerImageObjects.splice(layerImageObjectIndex, 1);
}
});
image.on('editPrimitive', function (p, pp) { return console.log('editPrimitive', p, pp); });
image.on('selectPrimitive', function (p, pp) { return console.log('selectPrimitive', p, pp); });
image.on('unselectPrimitive', function () { return console.log('unselectPrimitive'); });
image.on('updatePrimitive', function (p) { return console.log('updatePrimitive', p); });
image.on('deletePrimitive', function (p) { return console.log('deletePrimitive', p); });
image.on('selectLegendColumn', function (lc, l) { return console.log('selectLegendColumn', lc, l); });
image.on('unselectLegendColumn', function () { return console.log('unselectLegendColumn'); });
image.on('updateLegendColumn', function (lc) { return console.log('updateLegendColumn', lc); });
image.on('deleteLegendColumn', function (lc) { return console.log('deleteLegendColumn', lc); });
image.on('editLegendColumn', function (lc) { return console.log('editPrimitive', lc); });
image.on('selectLegendRow', function (lr, lc, l) { return console.log('selectLegendRow', lr, lc, l); });
image.on('unselectLegendRow', function () { return console.log('unselectLegendRow'); });
image.on('updateLegendRow', function (lr) { return console.log('updateLegendRow', lr); });
image.on('deleteLegendRow', function (lr) { return console.log('deleteLegendRow', lr); });
image.on('editLegendRow', function (lr) { return console.log('editLegendRow', lr); });
image.on('createPolygon', function () {
image.externControlSelectLayerGroup(layerGroupsArray['sketch']);
var generator = new MedsurfDraw.PolygonGenerator({
target: image,
stickMode: MedsurfDraw.StickMode.POSITIONPOINTS,
layerGroup: layerGroupsArray['layerGroupModel1'],
image: {}
});
generator.once('startGenerator', _startGenerator, _this);
generator.once('endGenerator', generator.endGenerator, generator);
generator.once('abortGenerator', generator.abortGenerator, generator);
});
image.on('createFill', function () {
image.externControlSelectLayerGroup(layerGroupsArray['sketch']);
var generator = new MedsurfDraw.FillGenerator({
target: image,
stickMode: MedsurfDraw.StickMode.POSITIONPOINTS,
layerGroup: layerGroupsArray['layerGroupModel1'],
image: {}
});
generator.once('startGenerator', _startGenerator, _this);
generator.once('endGenerator', generator.endGenerator, generator);
generator.once('abortGenerator', generator.abortGenerator, generator);
});
image.on('createInteractiveArea', function () {
setTimeout(function () {
var generator = new MedsurfDraw.InteractiveAreaGenerator({
target: image,
bezierCourve: false,
stickMode: MedsurfDraw.StickMode.POSITIONPOINTS,
layerGroup: layerGroupsArray['sketch'],
image: {}
});
generator.once('startGenerator', _startGenerator, _this);
generator.once('endGenerator', generator.endGenerator, generator);
generator.once('abortGenerator', generator.abortGenerator, generator);
}, 200);
});
image.on('createText', function () {
image.externControlSelectLayerGroup(layerGroupsArray['sketch']);
var generator = new MedsurfDraw.TextPrimitiveGenerator({
target: image,
stickMode: MedsurfDraw.StickMode.POSITIONPOINTS,
layerGroup: layerGroupsArray['sketch'],
image: {},
rotateWithLine: false,
withScaling: false,
triggerImmediateEndDraw: true
});
generator.once('startGenerator', _startGenerator, _this);
generator.once('endGenerator', generator.endGenerator, generator);
generator.once('abortGenerator', generator.abortGenerator, generator);
});
image.on('createArrow', function () {
image.externControlSelectLayerGroup(layerGroupsArray['sketch']);
var generator = new MedsurfDraw.ArrowGenerator({
target: image,
layerGroup: layerGroupsArray['sketch'],
image: {},
hasWedgePoint: true
});
generator.once('startGenerator', _startGenerator, _this);
generator.once('endGenerator', generator.endGenerator, generator);
generator.once('abortGenerator', generator.abortGenerator, generator);
});
image.on('createArrowWithPoiGrouping', function () {
throw 'not implemented';
});
image.on('createEllipse', function () {
image.externControlSelectLayerGroup(layerGroupsArray['sketch']);
var generator = new MedsurfDraw.EllipseGenerator({
target: image,
layerGroup: layerGroupsArray['sketch'],
image: {}
});
generator.once('startGenerator', _startGenerator, _this);
generator.once('endGenerator', generator.endGenerator, generator);
generator.once('abortGenerator', generator.abortGenerator, generator);
});
image.on('createEllipseWithPoiGrouping', function () {
throw 'not implemented';
});
image.on('createRectangle', function () {
image.externControlSelectLayerGroup(layerGroupsArray['sketch']);
var generator = new MedsurfDraw.RectangleGenerator({
target: image,
layerGroup: layerGroupsArray['sketch'],
image: {}
});
generator.once('startGenerator', _startGenerator, _this);
generator.once('endGenerator', generator.endGenerator, generator);
generator.once('abortGenerator', generator.abortGenerator, generator);
});
image.on('createRectangleWithPoiGrouping', function () {
throw 'not implemented';
});
image.on('createArrowMarker', function () {
image.externControlSelectLayerGroup(layerGroupsArray['sketch']);
var generator = new MedsurfDraw.PrimitiveMarkerGenerator({
target: image,
type: Models.ImageObjectType.ARROW,
hasWedgePoint: false,
rotateWithLine: true,
layerGroup: layerGroupsArray['sketch'],
image: {}
});
generator.once('startGenerator', _startGenerator, _this);
generator.once('endGenerator', generator.endGenerator, generator);
generator.once('abortGenerator', generator.abortGenerator, generator);
});
image.on('createEllipseMarker', function () {
image.externControlSelectLayerGroup(layerGroupsArray['sketch']);
var generator = new MedsurfDraw.PrimitiveMarkerGenerator({
target: image,
type: Models.ImageObjectType.ELLIPSE,
rotateWithLine: true,
layerGroup: layerGroupsArray['sketch'],
image: {}
});
generator.once('startGenerator', _startGenerator, _this);
generator.once('endGenerator', generator.endGenerator, generator);
generator.once('abortGenerator', generator.abortGenerator, generator);
});
image.on('createRectangleMarker', function () {
image.externControlSelectLayerGroup(layerGroupsArray['sketch']);
var generator = new MedsurfDraw.PrimitiveMarkerGenerator({
target: image,
type: Models.ImageObjectType.RECTANGLE,
rotateWithLine: true,
layerGroup: layerGroupsArray['sketch'],
image: {}
});
generator.once('startGenerator', _startGenerator, _this);
generator.once('endGenerator', generator.endGenerator, generator);
generator.once('abortGenerator', generator.abortGenerator, generator);
});
image.on('cloneFromClipboard', function () {
image.externControlSelectLayerGroup(layerGroupsArray['sketch']);
var generator = new MedsurfDraw.CloneLayerGenerator({
target: image,
imageObjects: image.getImageObjects().map(function (io) { return io.model; }),
cloneLayerGroup: layerGroupsArray['layerGroupModel1'],
imageObjectMappings: [],
layerGroupMappings: [],
image: {},
});
generator.once('endGenerator', generator.endGenerator, generator);
generator.once('abortGenerator', generator.abortGenerator, generator);
});
window["sprite"] = image;
app.stage.emit("setDefaultMode", "default");
app.stage.interactive = true;
return [2, Promise.resolve()];
});
});
}
function setupImageObjects() {
return __awaiter(this, void 0, void 0, function () {
var sketchGroupContent1, sketchImageObject1, layerImageObject1, layerImageObject2, layerImageObject3, realLayerImageObject1, realLayerImageObject2, realLayerImageObject3, realLayerImageObject4, arrowPoint, rectanglePoint, ellipsePoint, textPoint, testPoint, test2Point, test3Point, test17Point, line1, line2, line3, line4, line5, arrow, rect, ellipse, text, backgroundRectangle, fill1, fillLine, fillLine2, legendCollectionModel, legendColumn1Model, legendText1_1Model, legendText1_2Model, legendColumn2Model, legendText2_1Model, legendText2_2Model, legend, realPoint1, realPoint2, realPoint3, realLine1, realEllipse1, realText1, ellipsePrimitiveTestPoint1, ellipsePrimitiveTest1, ellipsePrimitiveTestPoint2, ellipsePrimitiveTest2, ellipsePrimitiveTestPoint3, ellipsePrimitiveTest3, rectanglePrimitiveTestPoint1, rectanglePrimitiveTest1, rectanglePrimitiveTestPoint2, rectanglePrimitiveTest2, rectanglePrimitiveTestPoint3, rectanglePrimitiveTest3, arrowPrimitiveTestPoint1, arrowPrimitiveTest1, arrowPrimitiveTestPoint2, arrowPrimitiveTest2, arrowPrimitiveTestPoint3, arrowPrimitiveTest3, textPrimitiveTestPoint1, textPrimitiveTestPoint2, textPrimitiveTestPoint3;
return __generator(this, function (_a) {
layerGroupsArray['sketch'] = {
id: 'group1',
image: image,
order: 0,
name: 'Sketch',
groupContents: [],
layerImageObjects: []
};
sketchGroupContent1 = {
id: 'sketchGroupContent1',
content: {
title: "test",
body: "blab"
},
order: 0,
};
layerGroupsArray['sketch'].groupContents.push(sketchGroupContent1);
sketchImageObject1 = {
layerGroup: layerGroupsArray['sketch'],
order: 1,
imageObject: "ellipsePoint",
};
layerGroupsArray['sketch'].layerImageObjects.push(sketchImageObject1);
image.layerGroups.push(layerGroupsArray['sketch']);
layerGroupsArray['layerGroupModel1'] = {
id: 'group2',
image: image,
order: 0,
name: 'test',
groupContents: [],
layerImageObjects: [],
};
layerImageObject1 = {
layerGroup: layerGroupsArray['layerGroupModel1'],
order: 1,
imageObject: "arrowPoint",
};
layerGroupsArray['layerGroupModel1'].layerImageObjects.push(layerImageObject1);
layerImageObject2 = {
layerGroup: layerGroupsArray['layerGroupModel1'],
order: 2,
imageObject: "rectanglePoint",
};
layerGroupsArray['layerGroupModel1'].layerImageObjects.push(layerImageObject2);
layerImageObject3 = {
layerGroup: layerGroupsArray['layerGroupModel1'],
order: 3,
imageObject: "line1",
};
layerGroupsArray['layerGroupModel1'].layerImageObjects.push(layerImageObject3);
image.layerGroups.push(layerGroupsArray["layerGroupModel1"]);
layerGroupsArray['realLayerGroup1'] = {
id: 'realLayerGroup1',
image: image,
order: 0,
name: 'Blubber',
groupContents: [],
layerImageObjects: [],
};
realLayerImageObject1 = {
layerGroup: layerGroupsArray['realLayerGroup1'],
order: 1,
imageObject: "realPoint1",
};
layerGroupsArray['realLayerGroup1'].layerImageObjects.push(realLayerImageObject1);
realLayerImageObject2 = {
layerGroup: layerGroupsArray['realLayerGroup1'],
order: 2,
imageObject: "realPoint2",
};
layerGroupsArray['realLayerGroup1'].layerImageObjects.push(realLayerImageObject2);
realLayerImageObject3 = {
layerGroup: layerGroupsArray['realLayerGroup1'],
order: 3,
imageObject: "realPoint3",
};
layerGroupsArray['realLayerGroup1'].layerImageObjects.push(realLayerImageObject3);
realLayerImageObject4 = {
layerGroup: layerGroupsArray['realLayerGroup1'],
order: 4,
imageObject: "realLine1",
};
layerGroupsArray['realLayerGroup1'].layerImageObjects.push(realLayerImageObject4);
image.layerGroups.push(layerGroupsArray["realLayerGroup1"]);
arrowPoint = new MedsurfDraw.PositionPoint(image, {
id: 'arrowPoint',
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
zIndex: 0,
position: {
x: 100 / image.dimensions.width,
y: 100 / image.dimensions.width,
},
isSelftest: true,
selftestItems: ['rectanglePoint', 'line1', 'textPoint'],
primitives: []
});
image.addChild(arrowPoint);
rectanglePoint = new MedsurfDraw.PositionPoint(image, {
id: 'rectanglePoint',
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
zIndex: 0,
position: {
x: 200 / image.dimensions.width,
y: 100 / image.dimensions.width,
},
isSelftest: true,
selftestItems: ['arrowPoint'],
primitives: []
});
image.addChild(rectanglePoint);
ellipsePoint = new MedsurfDraw.PositionPoint(image, {
id: 'ellipsePoint',
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
zIndex: 0,
position: {
x: 100 / image.dimensions.width,
y: 200 / image.dimensions.width,
},
isSelftest: true,
selftestItems: ['rectanglePoint', 'legendText2_2'],
primitives: []
});
image.addChild(ellipsePoint);
textPoint = new MedsurfDraw.PositionPoint(image, {
id: 'textPoint',
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
zIndex: 0,
position: {
x: 200 / image.dimensions.width,
y: 200 / image.dimensions.width,
},
isSelftest: true,
selftestItems: ['rectanglePoint'],
primitives: []
});
image.addChild(textPoint);
elementsArray['textPoint'] = textPoint;
testPoint = new MedsurfDraw.PositionPoint(image, {
id: 'testPoint',
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
zIndex: 0,
position: {
x: 300 / image.dimensions.width,
y: 200 / image.dimensions.width,
},
isSelftest: true,
selftestItems: ['rectanglePoint'],
primitives: []
});
image.addChild(testPoint);
test2Point = new MedsurfDraw.PositionPoint(image, {
id: 'test2Point',
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
zIndex: 0,
position: {
x: 300 / image.dimensions.width,
y: 300 / image.dimensions.width,
},
isSelftest: true,
selftestItems: ['rectanglePoint'],
primitives: []
});
image.addChild(test2Point);
test3Point = new MedsurfDraw.PositionPoint(image, {
id: 'test3Point',
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
zIndex: 0,
position: {
x: 150 / image.dimensions.width,
y: 150 / image.dimensions.width,
},
isSelftest: true,
selftestItems: ['rectanglePoint'],
primitives: []
});
image.addChild(test3Point);
test17Point = new MedsurfDraw.PositionPoint(image, {
id: 'test17Point',
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
zIndex: 0,
position: {
x: 50 / image.dimensions.width,
y: 50 / image.dimensions.width,
},
isSelftest: true,
selftestItems: ['rectanglePoint'],
primitives: []
});
image.addChild(test17Point);
line1 = new MedsurfDraw.Line(image, {
id: 'line1',
type: Models.ImageObjectType.LINE,
isStatic: false,
zIndex: 0,
start: 'arrowPoint',
end: 'rectanglePoint',
isBezier: true,
strokeWidth: 1 / image.dimensions.width,
interactWithLines: true,
options: {
hasLine: true,
lineColor: 0xFF0000,
hasFill: false,
}
});
image.addChild(line1);
elementsArray['line1'] = line1;
line2 = new MedsurfDraw.Line(image, {
id: 'line2',
type: Models.ImageObjectType.LINE,
isStatic: false,
zIndex: 0,
start: 'ellipsePoint',
end: 'arrowPoint',
isBezier: true,
strokeWidth: 1 / image.dimensions.width,
interactWithLines: true,
options: {
hasLine: true,
lineColor: 0x0000FF,
hasFill: false,
}
});
image.addChild(line2);
elementsArray['line2'] = line2;
line3 = new MedsurfDraw.Line(image, {
id: 'line3',
type: Models.ImageObjectType.LINE,
isStatic: false,
zIndex: 0,
start: 'textPoint',
end: 'ellipsePoint',
isBezier: true,
strokeWidth: 1 / image.dimensions.width,
interactWithLines: true,
options: {
hasLine: true,
lineColor: 0x00FF00,
hasFill: false,
}
});
image.addChild(line3);
elementsArray['line3'] = line3;
line4 = new MedsurfDraw.Line(image, {
id: 'line4',
type: Models.ImageObjectType.LINE,
isStatic: false,
zIndex: 0,
start: 'rectanglePoint',
end: 'textPoint',
isBezier: true,
strokeWidth: 1 / image.dimensions.width,
interactWithLines: true,
options: {
hasLine: true,
lineColor: 0xFFFF00,
hasFill: false,
}
});
image.addChild(line4);
elementsArray['line4'] = line4;
line5 = new MedsurfDraw.Line(image, {
id: 'line5',
type: Models.ImageObjectType.LINE,
isStatic: false,
zIndex: 0,
start: 'rectanglePoint',
end: 'testPoint',
isBezier: true,
strokeWidth: 1 / image.dimensions.width,
interactWithLines: true,
options: {
hasLine: true,
lineColor: 0x00FFFF,
hasFill: false,
}
});
image.addChild(line5);
elementsArray['line5'] = line5;
arrow = new MedsurfDraw.ArrowPrimitive(image, {
id: 'arrow',
type: Models.ImageObjectType.ARROW,
isStatic: false,
zIndex: 0,
positionPoint: arrowPoint.model,
rotateWithLine: true,
rectangle: new PIXI.Rectangle(0, 0, 20 / image.dimensions.width, 20 / image.dimensions.width),
strokeWidth: 1 / image.dimensions.width,
dashFill: 2,
dashEmpty: 2,
options: {
hasLine: true,
lineColor: 0x00FF00,
hasFill: true,
fillColor: 0xFF0000,
fillAlpha: 0.5,
}
});
arrowPoint.model.primitives.push(arrow.model);
arrowPoint.addChild(arrow);
rect = new MedsurfDraw.RectanglePrimitive(image, {
id: 'rect',
type: Models.ImageObjectType.RECTANGLE,
isStatic: false,
zIndex: 0,
positionPoint: rectanglePoint.model,
rotateWithLine: false,
rectangle: new PIXI.Rectangle(50 / image.dimensions.width, 0, 20 / image.dimensions.width, 20 / image.dimensions.width),
strokeWidth: 1 / image.dimensions.width,
options: {
hasLine: true,
lineColor: 0x000000,
hasFill: true,
fillColor: 0x00FF00,
fillAlpha: 0.6
},
angle: 45 * Math.PI / 180,
});
rectanglePoint.model.primitives.push(rect.model);
rectanglePoint.addChild(rect);
ellipse = new MedsurfDraw.EllipsePrimitive(image, {
id: 'ellipse',
type: Models.ImageObjectType.ELLIPSE,
isStatic: false,
zIndex: 0,
positionPoint: ellipsePoint.model,
rotateWithLine: false,
ellipse: new PIXI.Ellipse(0, 0, 20 / image.dimensions.width, 20 / image.dimensions.width),
strokeWidth: 1 / image.dimensions.width,
options: {
hasLine: true,
lineColor: 0x000000,
hasFill: true,
fillColor: 0x00FF00,
fillAlpha: 0.6
}
});
ellipsePoint.model.primitives.push(ellipse.model);
ellipsePoint.addChild(ellipse);
text = new MedsurfDraw.TextPrimitive(image, {
id: 'text',
type: Models.ImageObjectType.TEXT,
isStatic: false,
zIndex: 0,
positionPoint: textPoint.model,
rotateWithLine: false,
text: "Hello Text",
rectangle: {
x: 60 / image.dimensions.width,
y: 0,
width: 0,
height: 0,
},
style: {
fill: 0xe2d62d,
fontSize: 32 / image.dimensions.width,
fontFamily: "proxima_nova_altsemibold",
align: 'left',
breakWords: false,
}
});
textPoint.model.primitives.push(text.model);
textPoint.addChild(text);
elementsArray['text'] = text;
backgroundRectangle = new MedsurfDraw.BackgroundRectanglePrimitive(image, {
id: 'backgroundRectangle',
type: Models.ImageObjectType.BACKGROUNDRECTANGLE,
isStatic: false,
zIndex: 0,
positionPoint: textPoint.model,
rotateWithLine: false,
primitiveId: 'text',
strokeWidth: 1 / image.dimensions.width,
options: {
hasLine: true,
lineColor: 0x000000,
hasFill: true,
fillColor: 0x00FFFF,
fillAlpha: 0.6
},
});
textPoint.model.primitives.push(backgroundRectangle.model);
textPoint.addChild(backgroundRectangle);
elementsArray['backgroundRectangle'] = backgroundRectangle;
fill1 = new MedsurfDraw.FillCollection(image, {
id: 'fill1',
type: Models.ImageObjectType.FILLCOLLECTION,
isStatic: false,
zIndex: 0,
isInteractive: true,
lines: [line1.model.id, line2.model.id, line3.model.id, line4.model.id],
interactiveItems: ['rectanglePoint', 'legendText2_2'],
options: {
hasLine: false,
hasFill: true,
fillColor: 0xFF00FF,
fillAlpha: 0.35
}
});
image.addChild(fill1);
elementsArray['fill1'] = fill1;
fillLine = new MedsurfDraw.Line(image, {
id: 'fillLine',
type: Models.ImageObjectType.LINE,
isStatic: false,
zIndex: 0,
start: 'test2Point',
end: 'fill1',
isBezier: true,
strokeWidth: 1 / image.dimensions.width,
interactWithLines: false,
options: {
hasLine: true,
lineColor: 0xFFFFFF,
hasFill: false,
}
});
image.addChild(fillLine);
elementsArray['fillLine'] = fillLine;
fillLine2 = new MedsurfDraw.Line(image, {
id: 'fillLine2',
type: Models.ImageObjectType.LINE,
isStatic: false,
zIndex: 0,
start: 'test3Point',
end: 'fill1',
isBezier: true,
strokeWidth: 1 / image.dimensions.width,
interactWithLines: false,
options: {
hasLine: true,
lineColor: 0xFFFFFF,
hasFill: false,
}
});
image.addChild(fillLine2);
elementsArray['fillLine2'] = fillLine2;
legendCollectionModel = {
id: 'legend',
type: Models.ImageObjectType.LEGENDCOLLECTION,
isStatic: false,
zIndex: 0,
rectangle: new PIXI.Rectangle(50 / image.dimensions.width, 400 / image.dimensions.width, 400 / image.dimensions.width, 100 / image.dimensions.width),
cols: [],
rowDistance: 14 / image.dimensions.width,
columnDistance: 14 / image.dimensions.width,
indexWidth: 14 / image.dimensions.width
};
legendColumn1Model = {
id: 'legendColumn1',
type: Models.ImageObjectType.LEGENDCOLUMN,
isStatic: false,
zIndex: 0,
table: legendCollectionModel,
rows: []
};
legendCollectionModel.cols.push(legendColumn1Model);
legendText1_1Model = {
id: 'legendText1_1',
type: Models.ImageObjectType.LEGENDROW,
isStatic: false,
zIndex: 0,
text: 'row1\nrow1',
style: {
fill: 0xFF00FF,
fontSize: 32 / image.dimensions.width,
fontFamily: 'proxima_nova_altsemibold',
align: 'left',
breakWords: false,
},
col: legendColumn1Model
};
legendColumn1Model.rows.push(legendText1_1Model);
legendText1_2Model = {
id: 'legendText1_2',
type: Models.ImageObjectType.LEGENDROW,
isStatic: false,
zIndex: 0,
text: 'row1',
style: {
fill: 0x0000FF,
fontSize: 32 / image.dimensions.width,
fontFamily: 'proxima_nova_altsemibold',
align: 'left',
breakWords: false,
},
col: legendColumn1Model
};
legendColumn1Model.rows.push(legendText1_2Model);
legendColumn2Model = {
id: 'legendColumn2',
type: Models.ImageObjectType.LEGENDCOLUMN,
isStatic: false,
zIndex: 0,
table: legendCollectionModel,
rows: []
};
legendCollectionModel.cols.push(legendColumn2Model);
legendText2_1Model = {
id: 'legendText2_1',
type: Models.ImageObjectType.LEGENDROW,
isStatic: false,
zIndex: 0,
text: 'row2',
style: {
fill: 0xFF00FF,
fontSize: 32 / image.dimensions.width,
fontFamily: 'proxima_nova_altsemibold',
align: 'left',
breakWords: false,
},
col: legendColumn2Model
};
legendColumn2Model.rows.push(legendText2_1Model);
legendText2_2Model = {
id: 'legendText2_2',
type: Models.ImageObjectType.LEGENDROW,
isStatic: false,
zIndex: 0,
text: 'row2',
style: {
fill: 0x0000FF,
fontSize: 32 / image.dimensions.width,
fontFamily: 'proxima_nova_altsemibold',
align: 'left',
breakWords: false,
},
col: legendColumn2Model
};
legendColumn2Model.rows.push(legendText2_2Model);
legend = new MedsurfDraw.LegendCollection(image, legendCollectionModel);
image.addChild(legend);
elementsArray['legend'] = legend;
realPoint1 = new MedsurfDraw.PositionPoint(image, {
id: 'realPoint1',
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
zIndex: 0,
position: {
x: 500 / image.dimensions.width,
y: 500 / image.dimensions.width,
},
isSelftest: true,
selftestItems: [],
primitives: []
});
image.addChild(realPoint1);
realPoint2 = new MedsurfDraw.PositionPoint(image, {
id: 'realPoint2',
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
zIndex: 0,
position: {
x: 600 / image.dimensions.width,
y: 500 / image.dimensions.width,
},
isSelftest: false,
selftestItems: [],
primitives: []
});
image.addChild(realPoint2);
realPoint3 = new MedsurfDraw.PositionPoint(image, {
id: 'realPoint3',
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
zIndex: 0,
position: {
x: 550 / image.dimensions.width,
y: 550 / image.dimensions.width,
},
isSelftest: false,
selftestItems: [],
primitives: []
});
image.addChild(realPoint3);
realLine1 = new MedsurfDraw.Line(image, {
id: 'realLine1',
type: Models.ImageObjectType.LINE,
isStatic: false,
zIndex: 0,
start: 'realPoint1',
end: 'realPoint2',
isBezier: true,
strokeWidth: 1 / image.dimensions.width,
interactWithLines: true,
options: {
hasLine: true,
lineColor: 0xFF0000,
hasFill: false,
}
});
image.addChild(realLine1);
elementsArray['realLine1'] = realLine1;
realEllipse1 = new MedsurfDraw.EllipsePrimitive(image, {
id: 'realEllipse1',
type: Models.ImageObjectType.ELLIPSE,
isStatic: false,
zIndex: 0,
positionPoint: realPoint1.model,
rotateWithLine: false,
ellipse: new PIXI.Ellipse(0, 0, 20 / image.dimensions.width, 20 / image.dimensions.width),
strokeWidth: 1 / image.dimensions.width,
options: {
hasLine: true,
lineColor: 0x000000,
hasFill: true,
fillColor: 0x00FF00,
fillAlpha: 0.6
}
});
realPoint1.model.primitives.push(realEllipse1.model);
realPoint1.addChild(realEllipse1);
realText1 = new MedsurfDraw.TextPrimitive(image, {
id: 'realText1',
type: Models.ImageObjectType.TEXT,
isStatic: false,
zIndex: 0,
positionPoint: realPoint2.model,
rotateWithLine: false,
text: "Hello Text",
rectangle: {
x: 60 / image.dimensions.width,
y: 0,
width: 0,
height: 0,
},
style: {
fill: 0xe2d62d,
fontSize: 32 / image.dimensions.width,
fontFamily: "proxima_nova_altsemibold",
align: 'left',
breakWords: false,
}
});
realPoint2.model.primitives.push(realText1.model);
realPoint2.addChild(realText1);
ellipsePrimitiveTestPoint1 = new MedsurfDraw.PositionPoint(image, {
id: 'ellipsePrimitiveTestPoint1',
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
zIndex: 0,
position: {
x: 800 / image.dimensions.width,
y: 100 / image.dimensions.width,
},
isSelftest: true,
selftestItems: [],
primitives: []
});
image.addChild(ellipsePrimitiveTestPoint1);
ellipsePrimitiveTest1 = new MedsurfDraw.EllipsePrimitive(image, {
id: 'ellipsePrimitiveTest1',
type: Models.ImageObjectType.ELLIPSE,
isStatic: false,
zIndex: 0,
positionPoint: ellipsePrimitiveTestPoint1.model,
rotateWithLine: false,
ellipse: new PIXI.Ellipse(0, 0, 20 / image.dimensions.width, 20 / image.dimensions.width),
strokeWidth: 1 / image.dimensions.width,
options: {
hasLine: true,
lineColor: 0x000000,
hasFill: true,
fillColor: 0x00FF00,