diff --git a/.gitignore b/.gitignore index a2922c4d13072e377d7f505fe90bed0a682dd14b..1fa998b0989061a9bf77adf9bd7da7d8b461481e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,10 @@ +# IDE .idea + +# node dist -node_modules \ No newline at end of file +dist_example +node_modules + +# others +backup \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000000000000000000000000000000000000..b630faf2c66b652567cbbefb0355fb4f65dbe89d --- /dev/null +++ b/LICENSE @@ -0,0 +1,7 @@ +Copyright (c) 2019 Gottsponer Andrea Leonardo + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. \ No newline at end of file diff --git a/old/DrawInteraction.ts b/old/DrawInteraction.ts deleted file mode 100644 index 770fcbd6ebc7b80f1917338364c07678e0477cf7..0000000000000000000000000000000000000000 --- a/old/DrawInteraction.ts +++ /dev/null @@ -1,173 +0,0 @@ -import * as PIXI from "pixi.js-legacy"; -import {BaseInteraction, ImageObject} from "../src/app/bases/BaseModul"; - -/** - * Draw interaction - */ -export class DrawInteraction extends BaseInteraction { - /** - * Members - */ - protected _drawX: number; - protected _drawY: number; - protected _scaleX: number; - protected _scaleY: number; - private _isDrawing: boolean; - protected _isScaling: boolean; - - /** - * Constructor - * @param targetElement - */ - public constructor(targetElement: ImageObject) { - super(targetElement); - } - - //<editor-fold desc="Public functions"> - public reset(): void { - return; - } - - /** - * Start draw - * @param event - */ - public startDraw(event: PIXI.interaction.InteractionEvent) { - event.stopPropagation(); - - this.emit("startDrawStart", event); - - // TODO remove this -> so we can reset stuff ?? or does something break ??? - if (this._isDrawing) { - return; - } - - const scale = this.targetElement.getImageScale(); - - // TODO - // this.emit("startMove", event); - - this._drawX = this.targetElement.parent.x / scale.x; - this._drawY = this.targetElement.parent.y / scale.y; - - this.emit("onMove", event.data.global.x / scale.x - this._drawX, event.data.global.y / scale.y - this._drawY); - - this._drawX = event.data.global.x / scale.x; - this._drawY = event.data.global.y / scale.y; - - this._isDrawing = true; - this._isScaling = false; - - this.emit("startDraw", event); - } - - public resetDraw(event: PIXI.interaction.InteractionEvent) { - - } - - public startDrawScale(event: PIXI.interaction.InteractionEvent) { - event.stopPropagation(); - - this.emit("startDrawScaleStart", event); - - if (!this._isDrawing || this._isScaling) { - return; - } - - const scale = this.targetElement.getImageScale(); - - this._scaleX = event.data.global.x / scale.x; - this._scaleY = event.data.global.y / scale.y; - - this._isScaling = true; - - this.emit("startDrawScale", event); - } - - /** - * On draw - * @param event - */ - public onDraw(event: PIXI.interaction.InteractionEvent) { - if (!this._isDrawing) { - return; - } - - const scale = this.targetElement.getImageScale(); - - let dX = event.data.global.x / scale.x - this._drawX; - let dY = event.data.global.y / scale.y - this._drawY; - - if (!this._isScaling) { - this.emit("onMove", dX, dY); - } else { - this.targetElement.cursor = "scale-nwse"; - - let dW = (event.data.global.x / scale.x - this._scaleX); - let dH = (event.data.global.y / scale.y - this._scaleY); - - this._scaleX = event.data.global.x / scale.x; - this._scaleY = event.data.global.y / scale.y; - - // TODO dX and dY to center element when scale up - this.emit("onScale", dX, dY, dW, dH); - } - - this._drawX = event.data.global.x / scale.x; - this._drawY = event.data.global.y / scale.y; - - this.emit("onDraw", event); - } - - /** - * End draw - * @param event - */ - public endDraw(event: PIXI.interaction.InteractionEvent) { - event.stopPropagation(); - - this.emit("endDrawStart", event); - - if (!this._isDrawing) { - return; - } - - // TODO check hitTest - // const test = new PIXI.Renderer(); - // test.plugins.interaction.hitTest() - - this._isDrawing = false; - - this.emit("endDraw", event); - } - - /** - * Abort draw - * @param event - */ - public abortDraw(event: PIXI.interaction.InteractionEvent) { - event.stopPropagation(); - this.targetElement.cursor = "default"; - - this.emit("abortDrawStart", event); - - if (!this._isDrawing) { - return; - } - - this._isDrawing = false; - - this.emit("abortDraw", event); - } - //</editor-fold> - - //<editor-fold desc="Getter and Setter"> - public get isDrawing(): boolean { - return this._isDrawing; - } - - public set isDrawing(value: boolean) { - this._isDrawing = value; - } - //</editor-fold> -} \ No newline at end of file diff --git a/old/OldLine.ts b/old/OldLine.ts deleted file mode 100644 index 332d1a78b9e945a310fad9c14ae86b3f187daa97..0000000000000000000000000000000000000000 --- a/old/OldLine.ts +++ /dev/null @@ -1,255 +0,0 @@ -import * as PIXI from "pixi.js-legacy"; -import {BaseContainer, ImageObject} from "../src/app/bases/BaseModul"; -import {PositionPoint} from "../src/app/elements/positionings/PositionPoint"; -import {ModeInteraction} from "../src/app/interactions/ModeInteraction"; - -export class OldLine extends BaseContainer { - /** - * Members - */ - protected _start: PositionPoint; - protected _end: PositionPoint; - protected _previous?: PositionPoint; - protected _next?: PositionPoint; - - /** - * Elements - */ - protected _lineElement: PIXI.Graphics; - protected _controlPointsElement: PIXI.Graphics; - - /** - * Design - */ - protected readonly _lineWidth: number = 2; - protected readonly _lineColor: number = 0xFFFFFF; - protected readonly _lineAlpha: number = 1; - protected readonly _bezierLineWidth: number = 1; - protected readonly _bezierLineColor: number = 0x4A8FE2; // 0x9EC5F4; - protected readonly _bezierLineAlpha: number = 1; - protected readonly _bezierPointRadius: number = 2; - protected readonly _bezierPointColor: number = 0x4A8FE2; // 0x9EC5F4; - protected readonly _bezierPointAlpha: number = 1; - - /** - * Constructor - * @param start - * @param end - * @param previous - * @param next - */ - public constructor(start: PositionPoint, end: PositionPoint, previous?: PositionPoint, next?: PositionPoint) { - super(); - - // Setup - this._start = start; - this._end = end; - this._previous = previous; - this._next = next; - - // Events - // this.interactive = true; - - this.modeInteraction = new ModeInteraction(this); - this.modeInteraction.on("default", () => { - this._start.on("startMove", this._showControlPoints, this); - this._start.on("onMove", this.draw, this); - this._start.on("endMove", this._hideControlPoints, this); - - this._end.on("startMove", this._showControlPoints, this); - this._end.on("onMove", this.draw, this); - this._end.on("endMove", this._hideControlPoints, this); - - if (this._previous) { - this._previous.on("onMove", this.draw, this); - } - if (this._next) { - this._next.on("onMove", this.draw, this); - } - }); - this.modeInteraction.on("remove-default", () => { - this._start.off("startMove", this._showControlPoints, this); - this._start.off("onMove", this.draw, this); - this._start.off("endMove", this._hideControlPoints, this); - - this._end.off("startMove", this._showControlPoints, this); - this._end.off("onMove", this.draw, this); - this._end.off("endMove", this._hideControlPoints, this); - - if (this._previous) { - this._previous.off("onMove", this.draw, this); - } - if (this._next) { - this._next.off("onMove", this.draw, this); - } - }); - this.modeInteraction.on("draw", () => { - this._start.on("onDraw", this.draw, this); - this._end.on("onDraw", this.draw, this); - - this.alpha = 0.4; - this.interactive = false; - }); - this.modeInteraction.on("remove-draw", () => { - this._start.off("onDraw", this.draw, this); - this._end.off("onDraw", this.draw, this); - - this.alpha = 1; - this.interactive = true; - }); - - // Elements - this._lineElement = new PIXI.Graphics(); - this.addChild(this._lineElement); - - this._controlPointsElement = new PIXI.Graphics(); - this._controlPointsElement.visible = false; - this.addChild(this._controlPointsElement); - - this.draw(); - } - - //<editor-fold desc="Public functions"> - public draw() { - this._lineElement.clear(); - - if (this._previous) { - const controlPointsPrevious = OldLine._findControlPoints(this._previous, this._start, this._end); - - if (this._next) { - const controlPointsNext = OldLine._findControlPoints(this._start, this._end, this._next); - - if (this._controlPointsElement.visible) { - this._controlPointsElement.clear(); - this._controlPointsElement.beginFill(this._bezierPointColor, this._bezierPointAlpha); - this._controlPointsElement.drawCircle(controlPointsPrevious.c1.x, controlPointsPrevious.c1.y, this._bezierPointRadius); - this._controlPointsElement.endFill(); - - this._controlPointsElement.lineStyle(this._bezierLineWidth, this._bezierLineColor, this._bezierLineAlpha); - this._controlPointsElement.moveTo(controlPointsPrevious.c1.x, controlPointsPrevious.c1.y); - this._controlPointsElement.lineTo(this._start.x, this._start.y); - this._controlPointsElement.endFill(); - - this._controlPointsElement.beginFill(this._bezierPointColor, this._bezierPointAlpha); - this._controlPointsElement.drawCircle(controlPointsPrevious.c2.x, controlPointsPrevious.c2.y, this._bezierPointRadius); - this._controlPointsElement.endFill(); - - this._controlPointsElement.lineStyle(this._bezierLineWidth, this._bezierLineColor, this._bezierLineAlpha); - this._controlPointsElement.moveTo(controlPointsPrevious.c2.x, controlPointsPrevious.c2.y); - this._controlPointsElement.lineTo(this._start.x, this._start.y); - this._controlPointsElement.endFill(); - - this._controlPointsElement.beginFill(this._bezierPointColor, this._bezierPointAlpha); - this._controlPointsElement.drawCircle(controlPointsNext.c1.x, controlPointsNext.c1.y, this._bezierPointRadius); - this._controlPointsElement.endFill(); - - this._controlPointsElement.lineStyle(this._bezierLineWidth, this._bezierLineColor, this._bezierLineAlpha); - this._controlPointsElement.moveTo(controlPointsNext.c1.x, controlPointsNext.c1.y); - this._controlPointsElement.lineTo(this._end.x, this._end.y); - this._controlPointsElement.endFill(); - - this._controlPointsElement.beginFill(this._bezierPointColor, this._bezierPointAlpha); - this._controlPointsElement.drawCircle(controlPointsNext.c2.x, controlPointsNext.c2.y, this._bezierPointRadius); - this._controlPointsElement.endFill(); - - this._controlPointsElement.lineStyle(this._bezierLineWidth, this._bezierLineColor, this._bezierLineAlpha); - this._controlPointsElement.moveTo(controlPointsNext.c2.x, controlPointsNext.c2.y); - this._controlPointsElement.lineTo(this._end.x, this._end.y); - this._controlPointsElement.endFill(); - } - - this._lineElement.lineStyle(this._lineWidth, this._lineColor, this._lineAlpha); - this._lineElement.moveTo(this._start.x, this._start.y); - this._lineElement.bezierCurveTo(controlPointsPrevious.c2.x, controlPointsPrevious.c2.y, controlPointsNext.c1.x, controlPointsNext.c1.y, this._end.x, this._end.y); - } else { - if (this._controlPointsElement.visible) { - this._controlPointsElement.clear(); - this._controlPointsElement.beginFill(this._bezierPointColor, this._bezierPointAlpha); - this._controlPointsElement.drawCircle(controlPointsPrevious.c1.x, controlPointsPrevious.c1.y, this._bezierPointRadius); - this._controlPointsElement.endFill(); - - this._controlPointsElement.lineStyle(this._bezierLineWidth, this._bezierLineColor, this._bezierLineAlpha); - this._controlPointsElement.moveTo(controlPointsPrevious.c1.x, controlPointsPrevious.c1.y); - this._controlPointsElement.lineTo(this._start.x, this._start.y); - this._controlPointsElement.endFill(); - - this._controlPointsElement.beginFill(this._bezierPointColor, this._bezierPointAlpha); - this._controlPointsElement.drawCircle(controlPointsPrevious.c2.x, controlPointsPrevious.c2.y, this._bezierPointRadius); - this._controlPointsElement.endFill(); - - this._controlPointsElement.lineStyle(this._bezierLineWidth, this._bezierLineColor, this._bezierLineAlpha); - this._controlPointsElement.moveTo(controlPointsPrevious.c2.x, controlPointsPrevious.c2.y); - this._controlPointsElement.lineTo(this._start.x, this._start.y); - this._controlPointsElement.endFill(); - } - - this._lineElement.lineStyle(this._lineWidth, this._lineColor, this._lineAlpha); - this._lineElement.moveTo(this._start.x, this._start.y); - if (this._start.x == this._end.x && this._end.x == this._previous.x || this._start.y == this._end.y && this._end.y == this._previous.y) { - this._lineElement.lineTo(this._end.x, this._end.y); - } else { - this._lineElement.quadraticCurveTo(controlPointsPrevious.c2.x, controlPointsPrevious.c2.y, this._end.x, this._end.y); - } - } - } else { - this._lineElement.lineStyle(this._lineWidth, this._lineColor, this._lineAlpha); - this._lineElement.moveTo(this._start.x, this._start.y); - this._lineElement.lineTo(this._end.x, this._end.y); - } - - this._lineElement.endFill(); - - // @ts-ignore - this.hitArea = new PIXI.Polygon(this._lineElement.geometry.points); - } - //</editor-fold> - - //<editor-fold desc="Private functions"> - protected _showControlPoints(): void { - this._controlPointsElement.visible = true; - } - - protected _hideControlPoints(): void { - this._controlPointsElement.visible = false; - } - - protected static _findControlPoints(p1: PositionPoint, p2: PositionPoint, p3: PositionPoint) { - const dx1 = p1.x - p2.x, dy1 = p1.y - p2.y; - const dx2 = p2.x - p3.x, dy2 = p2.y - p3.y; - - const l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1); - const l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2); - - const m1 = {x: (p1.x + p2.x) / 2.0, y: (p1.y + p2.y) / 2.0}; - const m2 = {x: (p2.x + p3.x) / 2.0, y: (p2.y + p3.y) / 2.0}; - - const dxm = (m1.x - m2.x); - const dym = (m1.y - m2.y); - - const k = l2 / (l1 + l2); - - const cm = {x: m2.x + dxm * k, y: m2.y + dym * k}; - - const tx = p2.x - cm.x, ty = p2.y - cm.y; - - const c1 = {x: m1.x + tx, y: m1.y + ty}; - const c2 = {x: m2.x + tx, y: m2.y + ty}; - - return {c1: c1, c2: c2, l1: Math.floor(l1), l2: Math.floor(l2)}; - } - //</editor-fold> - - //<editor-fold desc="BaseContainer"> - public getImageScale(): PIXI.IPoint { - return (this.parent as ImageObject).getImageScale(); - } - - public getRotation(): number { - return this.rotation; - } - - public getRectangle(): PIXI.Rectangle { - return this.getLocalBounds(); - } - //</editor-fold> -} \ No newline at end of file diff --git a/old/extensions/DrawDashedPolygon.ts b/old/extensions/DrawDashedPolygon.ts deleted file mode 100644 index 2c7a8c8b882119f9d7d3c02a54a0666ceec6a081..0000000000000000000000000000000000000000 --- a/old/extensions/DrawDashedPolygon.ts +++ /dev/null @@ -1,72 +0,0 @@ -import * as PIXI from "pixi.js-legacy"; - -// @ts-ignore -PIXI.Graphics.prototype.drawDashedPolygon = function (polygons: PIXI.Point[], x: number, y: number, rotation: number = 0, dash: number = 1, gap: number = 0, offsetPercentage: number = 0) { - let i: number; - let p1: PIXI.Point; - let p2: PIXI.Point; - let dashLeft: number = 0; - let gapLeft: number = 0; - if (offsetPercentage > 0) { - let progressOffset = (dash + gap) * offsetPercentage; - if (progressOffset < dash) { - dashLeft = dash - progressOffset; - } - else { - gapLeft = gap - (progressOffset-dash); - } - } - - let rotatedPolygons: PIXI.Point[] = []; - for (i = 0; i < polygons.length; i++) { - const p = new PIXI.Point(polygons[i].x, polygons[i].y); - let cosAngle: number = Math.cos(rotation); - let sinAngle = Math.sin(rotation); - let dx = p.x; - let dy = p.y; - p.x = (dx * cosAngle - dy * sinAngle); - p.y = (dx * sinAngle + dy * cosAngle); - rotatedPolygons.push(p); - } - - for(i = 0; i < rotatedPolygons.length; i++){ - p1 = rotatedPolygons[i]; - if (i == rotatedPolygons.length-1) { - p2 = rotatedPolygons[0]; - } - else { - p2 = rotatedPolygons[i+1]; - } - let dx = p2.x - p1.x; - let dy = p2.y - p1.y; - let len = Math.sqrt(dx * dx + dy * dy); - let normal = new PIXI.Point(dx / len, dy / len ); - let progressOnLine = 0; - this.moveTo(x + p1.x + gapLeft * normal.x, y + p1.y + gapLeft * normal.y); - while (progressOnLine <= len) { - progressOnLine += gapLeft; - if (dashLeft > 0) { - progressOnLine += dashLeft; - } - else { - progressOnLine += dash; - } - if (progressOnLine > len) { - dashLeft = progressOnLine - len; - progressOnLine = len; - } else { - dashLeft = 0; - } - console.log(x + p1.x + progressOnLine * normal.x, y + p1.y + progressOnLine * normal.y); - this.lineTo(x + p1.x + progressOnLine * normal.x, y + p1.y + progressOnLine * normal.y); - progressOnLine += gap; - if (progressOnLine > len && dashLeft == 0) { - gapLeft = progressOnLine - len; - console.log(progressOnLine, len, gap); - } else { - gapLeft = 0; - this.moveTo(x + p1.x + progressOnLine * normal.x, y + p1.y + progressOnLine * normal.y); - } - } - } -}; \ No newline at end of file diff --git a/old/extensions/PixiTextInput.ts b/old/extensions/PixiTextInput.ts deleted file mode 100644 index 84be881a01431eb31721412cc7a63a8a2329520b..0000000000000000000000000000000000000000 --- a/old/extensions/PixiTextInput.ts +++ /dev/null @@ -1,928 +0,0 @@ -if (typeof module !== 'undefined') { - // @ts-ignore - PIXI = require("pixi.js"); -} - -/** - * Text input field for pixi.js. - * A simple example: - * - * // We need a container - * var container = new PIXI.Container(); - * - * // Same style options as PIXI.Text - * var style={ ... }; - * - * var inputField = new PixiTextInput("hello",style); - * container.addChild(inputField); - * - * The style definitions accepted by the constructor are the same as those accepted by - * [PIXI.Text](http://www.goodboydigital.com/pixijs/docs/classes/Text.html). - * @class PixiTextInput - * @constructor - * @param {String} [text] The initial text. - * @param {Object} [style] Style definition, same as for PIXI.Text - * @param {Boolean} [password] Indicate if field should be shown as a password field - * @param {Boolean} [useNativeTextInput] Indicate if the textfield should create a native fallback for mobile - */ -// @ts-ignore -function PixiTextInput(text, style, password, useNativeTextInput) { - PIXI.Container.call(this); - // @ts-ignore - window.pixiTextInputTarget = this; - - if (!text) - text = ""; - - text = text.toString(); - - if (style && style.wordWrap) - throw "wordWrap is not supported for input fields"; - - this._text = text; - this._placeholder = ""; - - if (useNativeTextInput) { - this._nativeTextInput = this.getNativeTextInput(password); - this.bindNativeTextInput(); - } - - this.localWidth = 100; - this._backgroundColor = 0xffffff; - this._caretColor = 0x000000; - this._borderColor = 0x000000; - this._borderWidth = 0; - this._background = true; - this._password = false; - this._value = text; - - if ( typeof password !== "undefined" && password !== undefined && password === true ) { - this._password = true; - this.syncValue(); - } - - this.style = style; - this.textField = new PIXI.Text(this._value, style); - - this.localHeight = - this.textField.style.fontSize + - this.textField.style.strokeThickness - + 4; - - this.textColor = this.textField.style.fill; - - this.backgroundGraphics = new PIXI.Graphics(); - this.textFieldMask = new PIXI.Graphics(); - this.selectionGraphics = new PIXI.Graphics(); - this.caret = new PIXI.Graphics(); - this.drawElements(); - - this.addChild(this.backgroundGraphics); - this.addChild(this.selectionGraphics); - this.addChild(this.textField); - this.addChild(this.caret); - this.addChild(this.textFieldMask); - - this.scrollIndex = 0; - this._caretIndex = 0; - this.caretFlashInterval = null; - this._secondCaretIndex = 0; - this.blur(); - this.updateCaretPosition(); - - this.backgroundGraphics.interactive = true; - this.backgroundGraphics.buttonMode = true; - this.backgroundGraphics.defaultCursor = "text"; - - this.backgroundGraphics.mousedown = this.onBackgroundMouseDown.bind(this); - this.keyEventClosure = this.onKeyEvent.bind(this); - this.windowBlurClosure = this.onWindowBlur.bind(this); - this.documentMouseDownClosure = this.onDocumentMouseDown.bind(this); - this.isFocusClick = false; - - this.updateText(); - - this.textField.mask = this.textFieldMask; - - this.keypress = null; - this.keydown = null; - this.change = null; - - this.ctrlDown = false; - this.shiftDown = false; -} - -PixiTextInput.prototype = Object.create(PIXI.Container.prototype); -PixiTextInput.prototype.constructor = PixiTextInput; - -/** - * Someone clicked. - * @method onBackgroundMouseDown - * @private - */ -// @ts-ignore -PixiTextInput.prototype.onBackgroundMouseDown = function(e) { - if (this._nativeTextInput) { - this._nativeTextInput.focus(); - } - var x = this.toLocal(e.data.global).x; - this._caretIndex = this.getCaretIndexByCoord(x); - this.updateCaretPosition(); - - this.focus(); - - this.isFocusClick = true; - var scope = this; - setTimeout(function() { - scope.isFocusClick = false; - }, 0); -} - -/** - * Focus this input field. - * @method focus - */ -PixiTextInput.prototype.focus = function() { - // @ts-ignore - window.pixiTextInputTarget = this; - this.blur(); - - this.handleCopyReference = this.handleCopy.bind(this); - document.addEventListener("copy", this.handleCopyReference); - this.handleCutReference = this.handleCut.bind(this); - document.addEventListener("cut", this.handleCutReference); - this.handlePasteReference = this.handlePaste.bind(this); - document.addEventListener("paste", this.handlePasteReference); - - document.addEventListener("keydown", this.keyEventClosure); - document.addEventListener("keypress", this.keyEventClosure); - document.addEventListener("keyup", this.keyEventClosure); - document.addEventListener("mousedown", this.documentMouseDownClosure); - - window.addEventListener("blur", this.windowBlurClosure); - - if(this._nativeTextInput) { - this._nativeTextInput.focus(); - } - - this.showCaret(); -} - -/** - * Handle key event. - * @method onKeyEvent - * @private - */ -// @ts-ignore -PixiTextInput.prototype.onKeyEvent = function(e) { - //console.log("key event"); - //console.log(e); - //console.log(this.scrollIndex); - - if (e.type == "keypress") { - if (e.charCode < 32){ - return; - } - if(e.charCode==32){ - e.preventDefault(); - } - if(this.ctrlDown && (e.charCode==67 || - e.charCode==99 || - e.charCode==86 || - e.charCode==118 || - e.charCode==88 || - e.charCode==120) ){ - //console.log("ctrl+c|v|x"); - return; - } - - if(this._selection){ - this.deleteSelectedText(); - this.moveCarretRight(); - } - - this._text = - this._text.substring(0, this._caretIndex) + - String.fromCharCode(e.charCode) + - this._text.substring(this._caretIndex); - - this._selection = false; - this.syncValue(); - - this._caretIndex++; - this.ensureCaretInView(); - this.showCaret(); - this.updateText(); - this.drawElements(); - this.trigger(this.keypress, e); - this.trigger(this.change); - } - - if (e.type == "keydown") { - switch (e.keyCode) { - case 8: //backspace - if(this._selection){ - this.deleteSelectedText(); - } else if (this._caretIndex > 0) { - this._text = - this._text.substring(0, this._caretIndex - 1) + - this._text.substring(this._caretIndex); - - this.syncValue(); - - this._caretIndex--; - this.ensureCaretInView(); - this.showCaret(); - this.updateText(); - } - e.preventDefault(); - this.trigger(this.change); - break; - - case 16://shift - this.shiftDown = true; - break; - - case 17: - this.ctrlDown = true; - break; - - case 35: - this._caretIndex = this._text.length; - e.preventDefault(); - - this.ensureCaretInView(); - this.updateCaretPosition(); - this.showCaret(); - this.updateText(); - break; - - case 36: - this._caretIndex = 0; - e.preventDefault(); - - this.ensureCaretInView(); - this.updateCaretPosition(); - this.showCaret(); - this.updateText(); - break; - - case 46: - this._text = - this._text.substring(0, this._caretIndex) + - this._text.substring(this._caretIndex + 1); - - this.syncValue(); - - this.ensureCaretInView(); - this.updateCaretPosition(); - this.showCaret(); - this.updateText(); - e.preventDefault(); - this.trigger(this.change); - break; - - case 39://right arrow - if(this.shiftDown && !this._selection){ - this._selection=true; - this._secondCaretIndex = this._caretIndex; - } - /*if(this.shiftDown && this._selection){ - if(this._secondCaretIndex+1<this._text.length){ - this._secondCaretIndex++; - } - } else {*/ - if(this.ctrlDown && this._caretIndex+1 < this._text.length){ - var nextPosition = this._text.indexOf(" ", this._caretIndex); - if(nextPosition!=this._caretIndex){ - this._caretIndex = (nextPosition!=-1)?nextPosition:this._text.length; - } else this.moveCarretRight(); - } else this.moveCarretRight(); - //} - if(!this.shiftDown){ - this._selection = false; - } - - this.ensureCaretInView(); - this.updateCaretPosition(); - this.showCaret(); - this.updateText(); - this.drawElements(); - break; - - case 37://left arrow - if(this.shiftDown && !this._selection){ - this._selection=true; - this._secondCaretIndex = this._caretIndex; - } - /*if(this.shiftDown && this._selection){ - if(this._secondCaretIndex+1>0){ - this._secondCaretIndex--; - } - } else {*/ - if(this.ctrlDown && this._caretIndex+1 > 0){ - var nextPosition = this._text.lastIndexOf(" ", this._caretIndex-1); - if(nextPosition!=this._caretIndex){ - this._caretIndex = (nextPosition!=-1)?nextPosition:0; - } else this.moveCarretLeft(); - } else this.moveCarretLeft(); - //} - if(!this.shiftDown){ - this._selection = false; - } - - this.ensureCaretInView(); - this.updateCaretPosition(); - this.showCaret(); - this.updateText(); - this.drawElements(); - break; - - case 65://A - if(this.ctrlDown){ - this._selection = true; - this._caretIndex = 0; - this._secondCaretIndex = this._text.length; - this.drawElements(); - e.preventDefault(); - } - break; - } - - this.trigger(this.keydown, e); - } - - if(e.type == "keyup"){ - switch (e.keyCode) { - case 16: - this.shiftDown = false; - break; - case 17: - this.ctrlDown = false; - break; - default: - - } - } -} - -// @ts-ignore -PixiTextInput.prototype.handleCopy = function(e){ - e.clipboardData.setData('text/plain', this.getSelectedText()); - e.preventDefault(); -} - -// @ts-ignore -PixiTextInput.prototype.handleCut = function(e){ - e.clipboardData.setData('text/plain', this.getSelectedText()); - if(this._selection){ - this.deleteSelectedText(); - this.moveCarretRight(); - } - e.preventDefault(); -} - -// @ts-ignore -PixiTextInput.prototype.handlePaste = function(e){ - var txtToInsert = e.clipboardData.getData('text/plain'); - if(this._selection){ - this.deleteSelectedText(); - this.moveCarretRight(); - } - this.insertText(txtToInsert); - e.preventDefault(); -} - -PixiTextInput.prototype.deleteSelectedText = function(){ - var startPosition; - var endPosition; - if(this._caretIndex>this._secondCaretIndex){ - startPosition = this._secondCaretIndex; - endPosition = this._caretIndex; - } else { - startPosition = this._caretIndex; - endPosition = this._secondCaretIndex; - } - if(startPosition==0 && endPosition==this._text.length){ - this._text = ""; - } else { - this._text = - this._text.substring(0, startPosition) + - this._text.substring(endPosition); - } - - this._selection = false; - - this.syncValue(); - - this._caretIndex=startPosition; - if(this._caretIndex<0){ - this._caretIndex=0; - } - this.ensureCaretInView(); - this.showCaret(); - this.updateText(); - this.drawElements(); -} - -// @ts-ignore -PixiTextInput.prototype.insertText = function(txt){ - this._text = this._text.substring(0, this._caretIndex) - + txt - + this._text.substring(this._caretIndex); - - this._selection = false; - this._caretIndex += txt.length; - this.updateCaretPosition(); - this.syncValue(); - this.ensureCaretInView(); - this.showCaret(); - this.updateText(); - this.drawElements(); -} - -PixiTextInput.prototype.moveCarretRight = function(){ - if(this._selection && !this.shiftDown){ - if(this._caretIndex<this._secondCaretIndex){ - this._caretIndex = this._secondCaretIndex; - } - } else { - this._caretIndex++; - if (this._caretIndex > this._text.length){ - this._caretIndex = this._text.length; - } - } -} - -PixiTextInput.prototype.moveCarretLeft = function(){ - if(this._selection && !this.shiftDown){ - if(this._caretIndex>this._secondCaretIndex){ - this._caretIndex = this._secondCaretIndex; - } - } else { - this._caretIndex--; - if (this._caretIndex < 0){ - this._caretIndex = 0; - } - } -} - -/** - * Ensure the caret is not outside the bounds. - * @method ensureCaretInView - * @private - */ -PixiTextInput.prototype.ensureCaretInView = function() { - this.updateCaretPosition(); - - while (this.caret.position.x >= this.localWidth - 1) { - this.scrollIndex++; - this.updateCaretPosition(); - } - - while (this.caret.position.x < 0) { - this.scrollIndex -= 2; - if (this.scrollIndex < 0) - this.scrollIndex = 0; - this.updateCaretPosition(); - } -} - -/** - * Blur ourself. - * @method blur - */ -PixiTextInput.prototype.blur = function() { - document.removeEventListener("copy", this.handleCopyReference); - document.removeEventListener("cut", this.handleCutReference); - document.removeEventListener("paste", this.handlePasteReference); - - document.removeEventListener("keydown", this.keyEventClosure); - document.removeEventListener("keypress", this.keyEventClosure); - document.removeEventListener("keyup", this.keyEventClosure); - document.removeEventListener("mousedown", this.documentMouseDownClosure); - window.removeEventListener("blur", this.windowBlurClosure); - - this.hideCaret(); -} - -/** - * Window blur. - * @method onDocumentMouseDown - * @private - */ -PixiTextInput.prototype.onDocumentMouseDown = function() { - if (this._nativeTextInput) { - this._nativeTextInput.blur(); - } - if (!this.isFocusClick) - this.blur(); -} - -/** - * Window blur. - * @method onWindowBlur - * @private - */ -PixiTextInput.prototype.onWindowBlur = function() { - if (this._nativeTextInput) { - this._nativeTextInput.blur(); - } - this.blur(); -} - -/** - * Update caret Position. - * @method updateCaretPosition - * @private - */ -PixiTextInput.prototype.updateCaretPosition = function() { - if (this._caretIndex < this.scrollIndex) { - this.caret.position.x = -1; - return; - } - - var sub = this._value.substring(0, this._caretIndex).substring(this.scrollIndex); - this.caret.position.x = this.textField.context.measureText(sub).width; -} - -/** - * Update text. - * @method updateText - * @private - */ -PixiTextInput.prototype.updateText = function() { - this.textField.text = this._value.substring(this.scrollIndex); -} - -/** - * Sync the password field value - * @method syncValue - * @private - */ -PixiTextInput.prototype.syncValue = function() { - if(this.textField && this.textField.style.fill!=this.textColor){ - this.textField.style.fill = this.textColor; - this.textField.alpha = 1; - } - if (this._password) { - this._value = this._text.replace(/./g,"*"); - } else if(this._text.length==0 && this._placeholder) { - this._value = this._placeholder; - if(this.textField){ - this.textField.style.fill = 0xCCCCCC; - this.textField.alpha = 0.5; - } - } else { - this._value = this._text; - } -} - -/** - * Draw the background and caret. - * @method drawElements - * @private - */ -PixiTextInput.prototype.drawElements = function() { - this.backgroundGraphics.clear(); - this.backgroundGraphics.beginFill(this._backgroundColor); - - if (this._borderWidth > 0) { - this.backgroundGraphics.lineStyle( this._borderWidth, this._borderColor ); - } - - if (this._background) { - this.backgroundGraphics.drawRect(0, 0, this.localWidth, this.localHeight); - } - - this.selectionGraphics.clear(); - if(this._selection && this._caretIndex!=this._secondCaretIndex){ - var selectionStart; - var selectionEnd; - var offset = 0; - if(this._caretIndex>this._secondCaretIndex){ - selectionStart = this._secondCaretIndex; - selectionEnd = this._caretIndex; - } else { - selectionStart = this._caretIndex; - selectionEnd = this._secondCaretIndex; - } - if(selectionStart>0){ - offset = this.textField.context.measureText(this._text.substring(0, selectionStart)).width; - if(this.scrollIndex){ - offset -= this.textField.context.measureText(this._text.substring(0, this.scrollIndex)).width; - } - } - var sub = this._text.substring(selectionStart, selectionEnd); - var selectedWidth = this.textField.context.measureText(sub).width; - if(offset+selectedWidth>this.localWidth){ - selectedWidth = this.localWidth-offset; - } - - /* - var sub = this._value.substring(0, this._caretIndex).substring(this.scrollIndex); - this.caret.position.x = this.textField.context.measureText(sub).width; - */ - this.selectionGraphics.beginFill(0xDDDDDD, 0.3); - this.selectionGraphics.drawRect(offset, 0, selectedWidth, this.localHeight) - } - - this.backgroundGraphics.endFill(); - this.backgroundGraphics.hitArea = new PIXI.Rectangle(0, 0, this.localWidth, this.localHeight); - - this.textFieldMask.clear(); - this.textFieldMask.beginFill(this._backgroundColor); - this.textFieldMask.drawRect(0, 0, this.localWidth, this.localHeight); - this.textFieldMask.endFill(); - - this.caret.clear(); - this.caret.beginFill(this._caretColor); - this.caret.drawRect(1, 1, 1, this.localHeight - 2); - this.caret.endFill(); -} - -/** - * Show caret. - * @method showCaret - * @private - */ -PixiTextInput.prototype.showCaret = function() { - if (this.caretFlashInterval) { - clearInterval(this.caretFlashInterval); - this.caretFlashInterval = null; - } - - this.caret.visible = true; - this.caretFlashInterval = setInterval(this.onCaretFlashInterval.bind(this), 500); -} - -/** - * Hide caret. - * @method hideCaret - * @private - */ -PixiTextInput.prototype.hideCaret = function() { - if (this.caretFlashInterval) { - clearInterval(this.caretFlashInterval); - this.caretFlashInterval = null; - } - - this.caret.visible = false; -} - -/** - * Caret flash interval. - * @method onCaretFlashInterval - * @private - */ -PixiTextInput.prototype.onCaretFlashInterval = function() { - this.caret.visible = !this.caret.visible; -} - -/** - * Map position to caret index. - * @method getCaretIndexByCoord - * @private - */ -// @ts-ignore -PixiTextInput.prototype.getCaretIndexByCoord = function(x) { - var smallest = 10000; - var cand = 0; - var visible = this._text.substring(this.scrollIndex); - - for (let i = 0; i < visible.length + 1; i++) { - var sub = visible.substring(0, i); - var w = this.textField.context.measureText(sub).width; - - if (Math.abs(w - x) < smallest) { - smallest = Math.abs(w - x); - cand = i; - } - } - - return this.scrollIndex + cand; -} - -PixiTextInput.prototype.getSelectedText = function(){ - if(this._selection){ - if(this._caretIndex<this._secondCaretIndex){ - return this._text.substring(this._caretIndex, this._secondCaretIndex); - } else if(this._caretIndex>this._secondCaretIndex){ - return this._text.substring(this._secondCaretIndex, this._caretIndex); - } - } - return ""; -} - -/** - * The width of the PixiTextInput. This is overridden to have a slightly - * different behaivour than the other DisplayObjects. Setting the - * width of the PixiTextInput does not change the scale, but it rather - * makes the field larger. If you actually want to scale it, - * use the scale property. - * @property width - * @type Number - */ -Object.defineProperty(PixiTextInput.prototype, "width", { - get: function() { - return this.scale.x * this.getLocalBounds().width; - }, - - set: function(v) { - this.localWidth = v; - this.drawElements(); - this.ensureCaretInView(); - this.updateText(); - } -}); - -/** - * The text in the input field. Setting will have the implicit function of resetting the scroll - * of the input field and removing focus. - * @property text - * @type String - */ -Object.defineProperty(PixiTextInput.prototype, "text", { - get: function() { - return this._text; - }, - - set: function(v) { - this._text = v.toString(); - this.syncValue(); - this.scrollIndex = 0; - this.caretIndex = 0; - this.blur(); - this.updateText(); - } -}); - -/** - * The color of the background for the input field. - * This needs to be specified as an integer, not using HTML - * notation, e.g. for red background: - * - * myInputText.backgroundColor = 0xff0000; - * - * In order for the background to be drawn, the `background` - * property needs to be true. If not, this property will have - * no effect. - * @property backgroundColor - * @type Integer - */ -Object.defineProperty(PixiTextInput.prototype, "backgroundColor", { - get: function() { - return this._backgroundColor; - }, - - set: function(v) { - this._backgroundColor = v; - this.drawElements(); - } -}); - -Object.defineProperty(PixiTextInput.prototype, "borderColor", { - get: function() { - return this._borderColor; - }, - - set: function(v) { - this._borderColor = v; - this.drawElements(); - } -}); - -Object.defineProperty(PixiTextInput.prototype, "borderWidth", { - get: function() { - return this._borderWidth; - }, - - set: function(v) { - this._borderWidth = v; - this.drawElements(); - } -}); - - -/** - * The color of the caret. - * @property caretColor - * @type Integer - */ -Object.defineProperty(PixiTextInput.prototype, "caretColor", { - get: function() { - return this._caretColor; - }, - - set: function(v) { - this._caretColor = v; - this.drawElements(); - } -}); - -/** - * Determines if the background should be drawn behind the text. - * The color of the background is specified using the backgroundColor - * property. - * @property background - * @type Boolean - */ -Object.defineProperty(PixiTextInput.prototype, "background", { - get: function() { - return this._background; - }, - - set: function(v) { - this._background = v; - this.drawElements(); - } -}); - -/** - * Determines if the background should be drawn behind the text. - * The color of the background is specified using the backgroundColor - * property. - * @property background - * @type Boolean - */ -Object.defineProperty(PixiTextInput.prototype, "placeholder", { - get: function() { - return this._placeholder; - }, - - set: function(v) { - this._placeholder = v; - this.syncValue(); - } -}); - -/** - * Set text. - * @method setText - * @param {String} text The new text. - */ -// @ts-ignore -PixiTextInput.prototype.setText = function(v) { - if(this._nativeTextInput) { - this._nativeTextInput.value = v; - } - - this.text = v; -} - -/** - * Trigger an event function if it exists. - * @method trigger - * @private - */ -// @ts-ignore -PixiTextInput.prototype.trigger = function(fn, e) { - if (fn) - fn(e); -} - -/** - * Get or create a native text input for mobile support - * @method getNativeTextInput - * @private - */ -// @ts-ignore -PixiTextInput.prototype.getNativeTextInput = function(pw) { - var elmName = "PixiTextInput"; - let elm = document.getElementById( elmName ); - - if ( !elm ) { - elm = document.createElement( "input" ); - document.body.appendChild( elm ); - elm.style.position = "fixed"; - elm.style.top = "-100px"; - elm.style.left = "-100px"; - - if ( pw ) { - // @ts-ignore - elm.type = "password"; - } - } - - return elm; -} - -/** - * Bind events for the native text input - * @method bindNativeTextInput - * @private - */ -PixiTextInput.prototype.bindNativeTextInput = function() { - - if(this._nativeTextInput) { - this._nativeTextInput.addEventListener("keyup", function() { - // @ts-ignore - window.pixiTextInputTarget.text = this.value; - }); - } - -} - -if (typeof module !== 'undefined') { - module.exports = PixiTextInput; -} \ No newline at end of file diff --git a/old/old_annotations/base/BaseAnnotation.ts b/old/old_annotations/base/BaseAnnotation.ts deleted file mode 100644 index eba43be5ec486015ce93225014e5dde13d6edd31..0000000000000000000000000000000000000000 --- a/old/old_annotations/base/BaseAnnotation.ts +++ /dev/null @@ -1,252 +0,0 @@ -import * as PIXI from "pixi.js-legacy"; -import {IBaseSelectableAnnotation} from "../interface/IBaseSelectableAnnotation"; -import {SelectRectangle} from "../interaction/SelectRectangle"; -import {IBaseMoveableAnnotation} from "../interface/IBaseMoveableAnnotation"; -import {IBaseScaleableAnnotation} from "../interface/IBaseScaleableAnnotation"; -import {MedsurfSprite} from "../../../src/app/elements/images/MedsurfSprite"; -// import {MedsurfStage} from "../../stages/MedsurfStage"; - -/** - * Base annotation - */ -export abstract class BaseAnnotation<T extends PIXI.Graphics | PIXI.Text> extends PIXI.Container implements IBaseSelectableAnnotation, IBaseMoveableAnnotation, IBaseScaleableAnnotation { - /** - * Members - */ - // private _stage: MedsurfStage; - private _type: string; - private _container: PIXI.Container; - private _element: T; - private _selectRectangle: SelectRectangle; - protected _prevX: number; - protected _prevY: number; - protected _isDragging: boolean; - - /** - * Constructor - * @param stage - * @param type - * @param element - */ - protected constructor(stage: any /*MedsurfStage*/, type: string, element: T) { - super(); - // this._stage = stage; - - this._type = type; - - this._container = new PIXI.Container(); - this.addChild(this._container); - - this._element = element; - this._element.on("mouseover", this.overAnnotation); - this._element.on("click", this.selectAnnotation); - this._element.on("mouseout", this.outAnnotation); - this._container.addChild(this._element); - - this._selectRectangle = new SelectRectangle(stage, this.element.getLocalBounds(new PIXI.Rectangle())); - - // Events - this.on("added", this.onAdded); - this.on("removed", this.onRemoved); - } - - //<editor-fold desc="Public functions"> - /** - * Draw - */ - public abstract draw(): void; - - //<editor-fold desc="Public functions"> - public resetEvents() { - this._prevX = 0; - this._prevY = 0; - this._isDragging = false; - // this._stage.cursorId = "mouse"; - } - //</editor-fold> - - //<editor-fold desc="Private functions"> - /** - * On added - */ - protected onAdded(): void { - this._element.interactive = true; - } - - /** - * On removed - */ - protected onRemoved(): void { - this._element.interactive = false; - } - //</editor-fold> - - //<editor-fold desc="IBaseSelectableAnnotation"> - public overAnnotation(event: any): void { - event.stopPropagation(); - - const parent = (this.parent.parent as BaseAnnotation<T>); - - // Cursor - // parent._stage.cursorId = "select"; - // parent._stage.mouseOver(event); - // parent._stage.mouseMove(event); - } - - public overSelectedAnnotation(event: any): void { - event.stopPropagation(); - - const parent = (this.parent.parent as BaseAnnotation<T>); - - // Cursor - // parent._stage.cursorId = "move"; - // parent._stage.mouseOver(event); - // parent._stage.mouseMove(event); - } - - public selectAnnotation(event: any): void { - event.stopPropagation(); - - const parent = (this.parent.parent as BaseAnnotation<T>); - - // Reset parents - parent.resetEvents(); - // (parent.parent as MedsurfSprite).resetEvents(); - - (parent.parent as MedsurfSprite).children.forEach((e) => { - if (e instanceof BaseAnnotation) { - e.unSelectAnnotation.bind(e.element)(); - } - }); - - parent._container.removeChild(parent._selectRectangle); - parent._selectRectangle.setRectangle(parent.type, parent.element.getLocalBounds(new PIXI.Rectangle())); - parent._container.addChild(parent._selectRectangle); - - // Remove events - this.off("mouseover"); - this.off("click"); - - // Add events - this.on("mouseover", parent.overSelectedAnnotation); - this.on("mousedown", parent.startMoveAnnotation); - this.on("mousemove", parent.moveAnnotation); - this.on("mouseup", parent.endMoveAnnotation); - - // Cursor - // parent._stage.cursorId = "move"; - // parent._stage.mouseOver(event); - // parent._stage.mouseMove(event); - } - - public outAnnotation(event: any): void { - event.stopPropagation(); - - const parent = (this.parent.parent as BaseAnnotation<T>); - - // Cursor - // parent._stage.cursorId = "mouse"; - // parent._stage.mouseOver(event); - // parent._stage.mouseMove(event); - } - - // TODO not working - public unSelectAnnotation(): void { - const parent = (this.parent.parent as BaseAnnotation<T>); - - parent._container.removeChild(parent._selectRectangle); - - // Remove events - this.off("mouseover"); - this.off("mousedown"); - this.off("mousemove"); - this.off("mouseup"); - - // Add events - this.on("mouseover", parent.overAnnotation); - this.on("click", parent.selectAnnotation); - - // Cursor - // parent._stage.cursorId = "mouse"; - // parent._stage.mouseOver(null); - } - //</editor-fold> - - //<editor-fold desc="IBaseMoveableAnnotation"> - public startMoveAnnotation(event: any): void { - event.stopPropagation(); - - const parent = (this.parent.parent as BaseAnnotation<T>); - - // parent._prevX = event.data.global.x / parent._stage.image.scale.x; - // parent._prevY = event.data.global.y / parent._stage.image.scale.y; - parent._isDragging = true; - } - - public moveAnnotation(event: any): void { - const parent = (this.parent.parent as BaseAnnotation<T>); - - if (!parent._isDragging) { - return; - } - - // const dX = event.data.global.x / parent._stage.image.scale.x - parent._prevX; - // const dY = event.data.global.y / parent._stage.image.scale.y - parent._prevY; - - // parent.position.x += dX; - // parent.position.y += dY; - - // parent._prevX = event.data.global.x / parent._stage.image.scale.x; - // parent._prevY = event.data.global.y / parent._stage.image.scale.y; - - parent._selectRectangle.setRectangle(parent.type, parent.element.getLocalBounds(new PIXI.Rectangle())); - } - - public endMoveAnnotation(event: any): void { - event.stopPropagation(); - - const parent = (this.parent.parent as BaseAnnotation<T>); - - if (!parent._isDragging) { - return; - } - parent._isDragging = false; - parent._selectRectangle.setRectangle(parent.type, parent.element.getLocalBounds(new PIXI.Rectangle())); - } - - //</editor-fold> - - //<editor-fold desc="IBaseScaleableAnnotation"> - public scaleAnnotation(dX: number, dY: number, dW: number, dH: number): void { - this._selectRectangle.setRectangle(this.type, this.element.getLocalBounds(new PIXI.Rectangle())); - } - - public abstract rotateAnnotation(dR: number): void; - //</editor-fold> - - //<editor-fold desc="Getter and Setter"> - public get type(): string { - return this._type; - } - - public set type(value: string) { - this._type = value; - } - - public get container(): PIXI.Container { - return this._container; - } - - public set container(value: PIXI.Container) { - this._container = value; - } - - public get element(): T { - return this._element; - } - - public set element(value: T) { - this._element = value; - } - //</editor-fold> -} diff --git a/old/old_annotations/interaction/RotateGraphic.ts b/old/old_annotations/interaction/RotateGraphic.ts deleted file mode 100644 index 933e6a114d33679d761c2cbf73a99a02e7179713..0000000000000000000000000000000000000000 --- a/old/old_annotations/interaction/RotateGraphic.ts +++ /dev/null @@ -1,128 +0,0 @@ -import * as PIXI from "pixi.js-legacy"; - -/** - * Rotate graphic - */ -export class RotateGraphic extends PIXI.Graphics { - /** - * Members - */ - private _degree: number; - private _radius: number; - protected _degreeText: PIXI.Text; - - /** - * Design - */ - protected readonly _lineWidth: number = 2; - protected readonly _lineLength: number = 10; - protected readonly _lineColor: number = 0x4a90e2; - protected readonly _lineAlpha: number = 1; - protected readonly _fillColor: number = 0x4a90e2; - protected readonly _fillAlpha: number = 0.1; - protected readonly _textDY: number = 30; - protected readonly _textFontSize: number = 20; - protected readonly _textColor: number = 0x4a90e2; - - /** - * Constructor - * @param radius - * @param geometry - */ - public constructor(radius: number, geometry?: PIXI.GraphicsGeometry) { - super(geometry); - - this.visible = false; - this._degree = 0; - this._radius = radius; - - this._degreeText = new PIXI.Text(this._degree.toString() + "°", new PIXI.TextStyle({fontSize: this._textFontSize, fill: this._textColor})); - this._degreeText.anchor.set(1, 1); - this._degreeText.resolution = 30; - - this.addChild(this._degreeText); - - this.draw(); - } - - //<editor-fold desc="Public functions"> - public draw(): void { - this.clear(); - - this.lineStyle(this._lineWidth, this._lineColor, this._lineAlpha); - this.beginFill(this._fillColor, this._fillAlpha); - this.drawCircle(0, 0, Math.abs(this._radius)); - this.endFill(); - - this.lineStyle(this._lineWidth, this._lineColor, this._lineAlpha); - this.moveTo(0, this._radius); - this.lineTo(0, this._radius + this._lineLength); - this.endFill(); - - this.lineStyle(this._lineWidth, this._lineColor, this._lineAlpha); - this.moveTo(-this._radius * Math.cos(45 * Math.PI / 180), this._radius * Math.cos(45 * Math.PI / 180)); - this.lineTo((-this._radius - this._lineLength / 2) * Math.cos(45 * Math.PI / 180), (this._radius + this._lineLength / 2) * Math.cos(45 * Math.PI / 180)); - this.endFill(); - - this.lineStyle(this._lineWidth, this._lineColor, this._lineAlpha); - this.moveTo(-this._radius, 0); - this.lineTo(-this._radius - this._lineLength, 0); - this.endFill(); - - this.lineStyle(this._lineWidth, this._lineColor, this._lineAlpha); - this.moveTo(this._radius * Math.cos(135 * Math.PI / 180), this._radius * Math.cos(135 * Math.PI / 180)); - this.lineTo((this._radius + this._lineLength / 2) * Math.cos(135 * Math.PI / 180), (this._radius + this._lineLength / 2) * Math.cos(135 * Math.PI / 180)); - this.endFill(); - - this.lineStyle(this._lineWidth, this._lineColor, this._lineAlpha); - this.moveTo(0, -this._radius); - this.lineTo(0, -this._radius - this._lineLength); - this.endFill(); - - this.lineStyle(this._lineWidth, this._lineColor, this._lineAlpha); - this.moveTo(this._radius * Math.cos(45 * Math.PI / 180), -this._radius * Math.cos(45 * Math.PI / 180)); - this.lineTo((this._radius + this._lineLength / 2) * Math.cos(45 * Math.PI / 180), (-this._radius - this._lineLength / 2) * Math.cos(45 * Math.PI / 180)); - this.endFill(); - - this.lineStyle(this._lineWidth, this._lineColor, this._lineAlpha); - this.moveTo(this._radius, 0); - this.lineTo(this._radius + this._lineLength, 0); - this.endFill(); - - this.lineStyle(this._lineWidth, this._lineColor, this._lineAlpha); - this.moveTo(-this._radius * Math.cos(135 * Math.PI / 180), -this._radius * Math.cos(135 * Math.PI / 180)); - this.lineTo((-this._radius - this._lineLength / 2) * Math.cos(135 * Math.PI / 180), (-this._radius - this._lineLength / 2) * Math.cos(135 * Math.PI / 180)); - this.endFill(); - - this._degreeText.position.set(this.radius, this.radius + this._textDY); - } - //</editor-fold> - - //<editor-fold desc="Getter and Setter"> - public get radius(): number { - return this._radius; - } - - public set radius(value: number) { - this._radius = value; - this.draw(); - } - - public get degree(): number { - return this._degree; - } - - public set degree(value: number) { - /* if (value < 0) { - value = 360 - Math.abs(value); - }*/ - this._degree = (Math.round((value / Math.PI * 180) * 100) / 100) % 360; - if (this._degree < 0) { - this._degree = 360 + this._degree; - } - this._degreeText.text = this._degree.toString() + "°"; - this._degreeText.resolution = 20; - } - -//</editor-fold> -} \ No newline at end of file diff --git a/old/old_annotations/interaction/ScaleGraphic.ts b/old/old_annotations/interaction/ScaleGraphic.ts deleted file mode 100644 index 5d3ac0e67444216c8acd30620e8ea2b533632ac4..0000000000000000000000000000000000000000 --- a/old/old_annotations/interaction/ScaleGraphic.ts +++ /dev/null @@ -1,33 +0,0 @@ -import * as PIXI from "pixi.js-legacy"; - -/** - * Scale graphic - */ -export class ScaleGraphic extends PIXI.Graphics { - /** - * Design - */ - protected readonly _pad: number = 5; - protected readonly _cornerRadius: number = 3; - protected readonly _lineWidth: number = 2; - protected readonly _lineColor: number = 0x00FF00;// 0xFFFFFF; - protected readonly _lineAlpha: number = 1; - protected readonly _fillColor: number = 0x00FF00; // 0xFFFFFF; - protected readonly _fillAlpha: number = 0.5; - protected readonly _rotationDY: number = 20; - - /** - * Constructor - * @param geometry - */ - public constructor(geometry?: PIXI.GraphicsGeometry) { - super(geometry); - this.visible = false; - this.draw(); - } - - //<editor-fold desc="Public functions"> - public draw(): void { - } - //</editor-fold> -} \ No newline at end of file diff --git a/old/old_annotations/interaction/SelectGraphic.ts b/old/old_annotations/interaction/SelectGraphic.ts deleted file mode 100644 index b2bb4d43d2b791bdbca913ea17b8ad26ad0c9b3f..0000000000000000000000000000000000000000 --- a/old/old_annotations/interaction/SelectGraphic.ts +++ /dev/null @@ -1,53 +0,0 @@ -import * as PIXI from "pixi.js-legacy"; - -export enum ScaleSideTypes { - X, - Y, - WIDTH, - HEIGHT, - X_Y, - X_HEIGHT, - WIDTH_Y, - WIDTH_HEIGHT -} - -/** - * Select graphic - */ -export class SelectGraphic extends PIXI.Graphics { - /** - * Members - */ - protected _cursorId: string; - protected _cursorRotation: number; - private _scaleSide: ScaleSideTypes; - - /** - * Constructor - * @param cursorId - * @param cursorRotation - * @param geometry - */ - public constructor(cursorId: string, cursorRotation: number = 0, geometry?: PIXI.GraphicsGeometry) { - super(geometry); - this._cursorId = cursorId; - this._cursorRotation = cursorRotation; - } - - //<editor-fold desc="Getter and Setter"> - /** - * Get scale side - */ - public get scaleSide(): ScaleSideTypes { - return this._scaleSide; - } - - /** - * Set scale side - * @param value - */ - public set scaleSide(value: ScaleSideTypes) { - this._scaleSide = value; - } - //</editor-fold> -} \ No newline at end of file diff --git a/old/old_annotations/interaction/SelectRectangle.ts b/old/old_annotations/interaction/SelectRectangle.ts deleted file mode 100644 index ec13bb377bc3807adf26acd5c95ef421636eb4d2..0000000000000000000000000000000000000000 --- a/old/old_annotations/interaction/SelectRectangle.ts +++ /dev/null @@ -1,488 +0,0 @@ -import * as PIXI from "pixi.js-legacy"; -import {ScaleSideTypes, SelectGraphic} from "./SelectGraphic"; -import {Primitives} from "../primitive/PrimitiveModule"; -// import {MedsurfStage} from "../../stages/MedsurfStage"; -import {RotateGraphic} from "./RotateGraphic"; - -/** - * Select rectangle - * TODO split these into the two correct elements (1: Scale, 2: Rotate) -> so this one is obsolete - */ -export class SelectRectangle extends PIXI.Container { - /** - * Members - */ - // private _stage: MedsurfStage; - private _rectangle: PIXI.Rectangle; - // TODO extract these to an sub element ??? - protected _topLine: SelectGraphic; - protected _rightLine: SelectGraphic; - protected _bottomLine: SelectGraphic; - protected _leftLine: SelectGraphic; - protected _topLeftCircle: SelectGraphic; - protected _topRightCircle: SelectGraphic; - protected _bottomRightCircle: SelectGraphic; - protected _bottomLeftCircle: SelectGraphic; - protected _rotationCircle: SelectGraphic; - - protected _rotateGraphic: RotateGraphic; - protected _prevX: number; - protected _prevY: number; - protected _isScaling: boolean; - protected _isRotating: boolean; - protected _scaleSide: ScaleSideTypes; - - /** - * Design - */ - protected readonly _pad: number = 5; - protected readonly _cornerRadius: number = 3; - protected readonly _lineWidth: number = 2; - protected readonly _lineColor: number = 0x4a90e2; - protected readonly _lineAlpha: number = 1; - protected readonly _fillColor: number = 0x4a90e2; - protected readonly _fillAlpha: number = 0.5; - protected readonly _rotationDY: number = 20; - - /** - * Constructor - * @param stage - * @param rectangle - */ - public constructor(stage: any /*MedsurfStage*/, rectangle: PIXI.Rectangle) { - super(); - // this._stage = stage; - this.name = "select-rectangle"; // TODO remove - - this._rectangle = rectangle; - this._rectangle.pad(this._pad, this._pad); - - this._rotateGraphic = new RotateGraphic(this._rectangle.y - this._rotationDY); - - this._topLine = new SelectGraphic("scale", 90); - this._topLine.scaleSide = ScaleSideTypes.Y; - this._topLine.on("mouseover", this.overScaleAnnotation); - this._topLine.on("mousedown", this.startScaleAnnotation); - this._topLine.on("mousemove", this.scaleAnnotation); - this._topLine.on("mouseup", this.endScaleAnnotation); - this._topLine.on("mouseupoutside", this.endScaleAnnotation); - this._topLine.on("mouseout", this.outScaleAnnotation); - this.addChild(this._topLine); - - this._rightLine = new SelectGraphic("scale"); - this._rightLine.scaleSide = ScaleSideTypes.WIDTH; - this._rightLine.on("mouseover", this.overScaleAnnotation); - this._rightLine.on("mousedown", this.startScaleAnnotation); - this._rightLine.on("mousemove", this.scaleAnnotation); - this._rightLine.on("mouseup", this.endScaleAnnotation); - this._rightLine.on("mouseupoutside", this.endScaleAnnotation); - this._rightLine.on("mouseout", this.outScaleAnnotation); - this.addChild(this._rightLine); - - this._bottomLine = new SelectGraphic("scale", 90); - this._bottomLine.scaleSide = ScaleSideTypes.HEIGHT; - this._bottomLine.on("mouseover", this.overScaleAnnotation); - this._bottomLine.on("mousedown", this.startScaleAnnotation); - this._bottomLine.on("mousemove", this.scaleAnnotation); - this._bottomLine.on("mouseup", this.endScaleAnnotation); - this._bottomLine.on("mouseupoutside", this.endScaleAnnotation); - this._bottomLine.on("mouseout", this.outScaleAnnotation); - this.addChild(this._bottomLine); - - this._leftLine = new SelectGraphic("scale"); - this._leftLine.scaleSide = ScaleSideTypes.X; - this._leftLine.on("mouseover", this.overScaleAnnotation); - this._leftLine.on("mousedown", this.startScaleAnnotation); - this._leftLine.on("mousemove", this.scaleAnnotation); - this._leftLine.on("mouseup", this.endScaleAnnotation); - this._leftLine.on("mouseupoutside", this.endScaleAnnotation); - this._leftLine.on("mouseout", this.outScaleAnnotation); - this.addChild(this._leftLine); - - this._topLeftCircle = new SelectGraphic("scale", 45); - this._topLeftCircle.scaleSide = ScaleSideTypes.X_Y; - this._topLeftCircle.on("mouseover", this.overScaleAnnotation); - this._topLeftCircle.on("mousedown", this.startScaleAnnotation); - this._topLeftCircle.on("mousemove", this.scaleAnnotation); - this._topLeftCircle.on("mouseup", this.endScaleAnnotation); - this._topLeftCircle.on("mouseupoutside", this.endScaleAnnotation); - this._topLeftCircle.on("mouseout", this.outScaleAnnotation); - this.addChild(this._topLeftCircle); - - this._topRightCircle = new SelectGraphic("scale", 135); - this._topRightCircle.scaleSide = ScaleSideTypes.WIDTH_Y; - this._topRightCircle.on("mouseover", this.overScaleAnnotation); - this._topRightCircle.on("mousedown", this.startScaleAnnotation); - this._topRightCircle.on("mousemove", this.scaleAnnotation); - this._topRightCircle.on("mouseup", this.endScaleAnnotation); - this._topRightCircle.on("mouseupoutside", this.endScaleAnnotation); - this._topRightCircle.on("mouseout", this.outScaleAnnotation); - this.addChild(this._topRightCircle); - - this._bottomRightCircle = new SelectGraphic("scale", 45); - this._bottomRightCircle.scaleSide = ScaleSideTypes.WIDTH_HEIGHT; - this._bottomRightCircle.on("mouseover", this.overScaleAnnotation); - this._bottomRightCircle.on("mousedown", this.startScaleAnnotation); - this._bottomRightCircle.on("mousemove", this.scaleAnnotation); - this._bottomRightCircle.on("mouseup", this.endScaleAnnotation); - this._bottomRightCircle.on("mouseupoutside", this.endScaleAnnotation); - this._bottomRightCircle.on("mouseout", this.outScaleAnnotation); - this.addChild(this._bottomRightCircle); - - this._bottomLeftCircle = new SelectGraphic("scale", 135); - this._bottomLeftCircle.scaleSide = ScaleSideTypes.X_HEIGHT; - this._bottomLeftCircle.on("mouseover", this.overScaleAnnotation); - this._bottomLeftCircle.on("mousedown", this.startScaleAnnotation); - this._bottomLeftCircle.on("mousemove", this.scaleAnnotation); - this._bottomLeftCircle.on("mouseup", this.endScaleAnnotation); - this._bottomLeftCircle.on("mouseupoutside", this.endScaleAnnotation); - this._bottomLeftCircle.on("mouseout", this.outScaleAnnotation); - this.addChild(this._bottomLeftCircle); - - this._rotationCircle = new SelectGraphic("rotate"); - this._rotationCircle.on("mouseover", this.overRotateAnnotation); - this._rotationCircle.on("mousedown", this.startRotateAnnotation); - this._rotationCircle.on("mousemove", this.rotateAnnotation); - this._rotationCircle.on("mouseup", this.endRotateAnnotation); - this._rotationCircle.on("mouseupoutside", this.endRotateAnnotation); - this._rotationCircle.on("mouseout", this.outRotateAnnotation); - this.addChild(this._rotationCircle); - - this.draw(); - - // Events - this.on("added", this.onAdded); - this.on("removed", this.onRemoved); - } - - //<editor-fold desc="Public functions"> - public draw(): void { - this._topLine.clear(); - this._topLine.lineStyle(this._lineWidth, this._lineColor, this._lineAlpha); - this._topLine.moveTo(this._rectangle.x + this._cornerRadius, this._rectangle.y); - this._topLine.lineTo(this._rectangle.x + this._rectangle.width - this._cornerRadius, this._rectangle.y); - this._topLine.endFill(); - this._topLine.hitArea = this._topLine.getLocalBounds(); - - this._rightLine.clear(); - this._rightLine.lineStyle(this._lineWidth, this._lineColor, this._lineAlpha); - this._rightLine.moveTo(this._rectangle.x + this._rectangle.width, this._rectangle.y + this._cornerRadius); - this._rightLine.lineTo(this._rectangle.x + this._rectangle.width, this._rectangle.y + this._rectangle.height - this._cornerRadius); - this._rightLine.endFill(); - this._rightLine.hitArea = this._rightLine.getLocalBounds(); - - this._bottomLine.clear(); - this._bottomLine.lineStyle(this._lineWidth, this._lineColor, this._lineAlpha); - this._bottomLine.moveTo(this._rectangle.x + this._cornerRadius, this._rectangle.y + this._rectangle.height); - this._bottomLine.lineTo(this._rectangle.x + this._rectangle.width - this._cornerRadius, this._rectangle.y + this._rectangle.height); - this._bottomLine.endFill(); - this._bottomLine.hitArea = this._bottomLine.getLocalBounds(); - - this._leftLine.clear(); - this._leftLine.lineStyle(this._lineWidth, this._lineColor, this._lineAlpha); - this._leftLine.moveTo(this._rectangle.x, this._rectangle.y + this._cornerRadius); - this._leftLine.lineTo(this._rectangle.x, this._rectangle.y + this._rectangle.height - this._cornerRadius); - this._leftLine.endFill(); - this._leftLine.hitArea = this._leftLine.getLocalBounds(); - - this._topLeftCircle.clear(); - this._topLeftCircle.lineStyle(this._lineWidth, this._lineColor, this._lineAlpha); - this._topLeftCircle.beginFill(this._fillColor, this._fillAlpha); - this._topLeftCircle.drawCircle(this._rectangle.x, this._rectangle.y, this._cornerRadius); - this._topLeftCircle.endFill(); - - this._topRightCircle.clear(); - this._topRightCircle.lineStyle(this._lineWidth, this._lineColor, this._lineAlpha); - this._topRightCircle.beginFill(this._fillColor, this._fillAlpha); - this._topRightCircle.drawCircle(this._rectangle.x + this._rectangle.width, this._rectangle.y, this._cornerRadius); - this._topRightCircle.endFill(); - - this._bottomRightCircle.clear(); - this._bottomRightCircle.lineStyle(this._lineWidth, this._lineColor, this._lineAlpha); - this._bottomRightCircle.beginFill(this._fillColor, this._fillAlpha); - this._bottomRightCircle.drawCircle(this._rectangle.x + this._rectangle.width, this._rectangle.y + this._rectangle.height, this._cornerRadius); - this._bottomRightCircle.endFill(); - - this._bottomLeftCircle.clear(); - this._bottomLeftCircle.lineStyle(this._lineWidth, this._lineColor, this._lineAlpha); - this._bottomLeftCircle.beginFill(this._fillColor, this._fillAlpha); - this._bottomLeftCircle.drawCircle(this._rectangle.x, this._rectangle.y + this._rectangle.height, this._cornerRadius); - this._bottomLeftCircle.endFill(); - - this._rotationCircle.clear(); - this._rotationCircle.lineStyle(this._lineWidth, this._lineColor, this._lineAlpha); - this._rotationCircle.beginFill(this._fillColor, this._fillAlpha); - this._rotationCircle.drawCircle(this._rectangle.x + this._rectangle.width / 2, this._rectangle.y - this._rotationDY, this._cornerRadius); - this._rotationCircle.endFill(); - } - - public getRectangle(): PIXI.Rectangle { - return this._rectangle; - } - - public setRectangle(type: string, value: PIXI.Rectangle) { - this._rectangle = value; - this._rectangle.pad(this._pad, this._pad); - this.draw(); - - if (type == 'ellipse') { - this._rotateGraphic.radius = this._rectangle.y - this._rotationDY; - } else { - this._rotateGraphic.radius = this._rectangle.y - this._rotationDY - this._rectangle.height / 2; - } - - } - //</editor-fold> - - //<editor-fold desc="Private functions"> - protected onAdded(): void { - this._rotateGraphic.degree = this.parent.rotation; - this.parent.parent.addChild(this._rotateGraphic); - - this._topLine.interactive = true; - this._rightLine.interactive = true; - this._bottomLine.interactive = true; - this._leftLine.interactive = true; - this._topLeftCircle.interactive = true; - this._topRightCircle.interactive = true; - this._bottomRightCircle.interactive = true; - this._bottomLeftCircle.interactive = true; - this._rotationCircle.interactive = true; - } - - protected onRemoved(): void { - this._topLine.interactive = false; - this._rightLine.interactive = false; - this._bottomLine.interactive = false; - this._leftLine.interactive = false; - this._topLeftCircle.interactive = false; - this._topRightCircle.interactive = false; - this._bottomRightCircle.interactive = false; - this._bottomLeftCircle.interactive = false; - this._rotationCircle.interactive = false; - } - - //<editor-fold desc="Scale"> - protected showScale(): void { - this._topLine.visible = true; - this._rightLine.visible = true; - this._bottomLine.visible = true; - this._leftLine.visible = true; - this._topLeftCircle.visible = true; - this._topRightCircle.visible = true; - this._bottomRightCircle.visible = true; - this._bottomLeftCircle.visible = true; - } - - protected hideScale(): void { - this._topLine.visible = false; - this._rightLine.visible = false; - this._bottomLine.visible = false; - this._leftLine.visible = false; - this._topLeftCircle.visible = false; - this._topRightCircle.visible = false; - this._bottomRightCircle.visible = false; - this._bottomLeftCircle.visible = false; - } - - protected overScaleAnnotation(event: any): void { - event.stopPropagation(); - - const parent = (this.parent as SelectRectangle); - - // Cursor - // @ts-ignore - parent._stage.cursorId = this._cursorId; - // @ts-ignore - parent._stage.cursorRotation = this._cursorRotation + parent.parent.rotation * 180 / Math.PI; - // parent._stage.mouseOver(event); - // parent._stage.mouseMove(event); - } - - protected startScaleAnnotation(event: any): void { - event.stopPropagation(); - - const parent = (this.parent as SelectRectangle); - - // @ts-ignore - parent._scaleSide = this.scaleSide; - parent.parent.parent.interactive = false; - - // parent._prevX = event.data.global.x / parent._stage.image.scale.x; - // parent._prevY = event.data.global.y / parent._stage.image.scale.y; - parent._isScaling = true; - - this.off("mouseout"); - parent.hideRotate(); - } - - protected scaleAnnotation(event: any): void { - const parent = (this.parent as SelectRectangle); - - if (!parent._isScaling) { - return; - } - - let dX: number = 0; - let dY: number = 0; - let dW: number = 0; - let dH: number = 0; - - /* - if (parent._scaleSide == ScaleSideTypes.X || parent._scaleSide == ScaleSideTypes.X_Y || parent._scaleSide == ScaleSideTypes.X_HEIGHT) { - dX = (event.data.global.x / parent._stage.image.scale.x - parent._prevX); - dW = -1 * dX; - parent._prevX = event.data.global.x / parent._stage.image.scale.x; - } - if (parent._scaleSide == ScaleSideTypes.Y || parent._scaleSide == ScaleSideTypes.X_Y || parent._scaleSide == ScaleSideTypes.WIDTH_Y) { - dY = (event.data.global.y / parent._stage.image.scale.y - parent._prevY); - dH = -1 * dY; - parent._prevY = event.data.global.y / parent._stage.image.scale.y; - } - if (parent._scaleSide == ScaleSideTypes.WIDTH || parent._scaleSide == ScaleSideTypes.WIDTH_Y || parent._scaleSide == ScaleSideTypes.WIDTH_HEIGHT) { - dW = (event.data.global.x / parent._stage.image.scale.x - parent._prevX); - if ((parent.parent.parent as Primitives).type === "ellipse") { - dX = dW; - } - parent._prevX = event.data.global.x / parent._stage.image.scale.x; - } - if (parent._scaleSide == ScaleSideTypes.HEIGHT || parent._scaleSide == ScaleSideTypes.X_HEIGHT || parent._scaleSide == ScaleSideTypes.WIDTH_HEIGHT) { - dH = (event.data.global.y / parent._stage.image.scale.y - parent._prevY); - if ((parent.parent.parent as Primitives).type === "ellipse") { - dY = dH; - } - parent._prevY = event.data.global.y / parent._stage.image.scale.y; - } - */ - - (parent.parent.parent as Primitives).scaleAnnotation(dX, dY, dW, dH); - } - - protected endScaleAnnotation(event: any): void { - event.stopPropagation(); - - const parent = (this.parent as SelectRectangle); - - if (!parent._isScaling) { - return; - } - - parent.parent.parent.interactive = true; - parent._isScaling = false; - - // Cursor - // @ts-ignore - parent._stage.cursorId = "mouse"; - // parent._stage.mouseOver(event); - // parent._stage.mouseMove(event); - - this.on("mouseout", parent.outScaleAnnotation); - parent.showRotate(); - } - - protected outScaleAnnotation(event: any): void { - event.stopPropagation(); - - const parent = (this.parent as SelectRectangle); - - // Cursor - // @ts-ignore - parent._stage.cursorId = "mouse"; - // parent._stage.mouseOver(event); - // parent._stage.mouseMove(event); - } - //</editor-fold> - - //<editor-fold desc="Rotate"> - protected showRotate(): void { - this._rotationCircle.visible = true; - } - - protected hideRotate(): void { - this._rotationCircle.visible = false; - } - - protected overRotateAnnotation(event: any): void { - event.stopPropagation(); - - const parent = (this.parent as SelectRectangle); - - // Cursor - // @ts-ignore - parent._stage.cursorId = this._cursorId; - // parent._stage.mouseOver(event); - // parent._stage.mouseMove(event); - } - - protected startRotateAnnotation(event: any): void { - event.stopPropagation(); - - const parent = (this.parent as SelectRectangle); - - parent.parent.parent.interactive = false; - - // parent._prevX = event.data.global.x / parent._stage.image.scale.x; - // parent._prevY = event.data.global.y / parent._stage.image.scale.y; - parent._isRotating = true; - - this.off("mouseout"); - parent.hideScale(); - parent._rotateGraphic.visible = true; - } - - protected rotateAnnotation(event: any): void { - const parent = (this.parent as SelectRectangle); - - if (!parent._isRotating) { - return; - } - - // this.scale - - // let dR = (event.data.global.x / parent._stage.image.scale.x - parent._prevX); - // parent._prevX = event.data.global.x / parent._stage.image.scale.x; - - // TODO snap points - // let degree = Math.round(dR) % 360 * (2 * Math.PI / 360); - // (parent.parent.parent as Primitives).rotateAnnotation(degree); - - parent._rotateGraphic.degree = parent.parent.rotation; - } - - protected endRotateAnnotation(event: any): void { - event.stopPropagation(); - - const parent = (this.parent as SelectRectangle); - - if (!parent._isRotating) { - return; - } - - parent.parent.parent.interactive = true; - parent._isRotating = false; - - // Cursor - // @ts-ignore - parent._stage.cursorId = "mouse"; - // parent._stage.mouseOver(event); - // parent._stage.mouseMove(event); - - this.on("mouseout", parent.outRotateAnnotation); - parent.showScale(); - parent._rotateGraphic.visible = false; - } - - protected outRotateAnnotation(event: any): void { - event.stopPropagation(); - - const parent = (this.parent as SelectRectangle); - - // Cursor - // @ts-ignore - parent._stage.cursorId = "mouse"; - // parent._stage.mouseOver(event); - // parent._stage.mouseMove(event); - } - //</editor-fold> - //</editor-fold> -} diff --git a/old/old_annotations/interface/IBaseMoveableAnnotation.ts b/old/old_annotations/interface/IBaseMoveableAnnotation.ts deleted file mode 100644 index dcd34ae4a5e08e91850e1c535b75b2df1eceaf9a..0000000000000000000000000000000000000000 --- a/old/old_annotations/interface/IBaseMoveableAnnotation.ts +++ /dev/null @@ -1,10 +0,0 @@ -import * as PIXI from "pixi.js-legacy"; - -/** - * Interface base move annotation - */ -export interface IBaseMoveableAnnotation extends PIXI.Container { - startMoveAnnotation(event: any): void; - moveAnnotation(event: any): void; - endMoveAnnotation(event: any): void; -} diff --git a/old/old_annotations/interface/IBaseScaleableAnnotation.ts b/old/old_annotations/interface/IBaseScaleableAnnotation.ts deleted file mode 100644 index 9db7c217a670bb927fa4552da98935bb2de79883..0000000000000000000000000000000000000000 --- a/old/old_annotations/interface/IBaseScaleableAnnotation.ts +++ /dev/null @@ -1,9 +0,0 @@ -import * as PIXI from "pixi.js-legacy"; - -/** - * Interface base move annotation - */ -export interface IBaseScaleableAnnotation extends PIXI.Container { - scaleAnnotation(dX: number, dY: number, dW: number, dH: number): void; - rotateAnnotation(dR: number): void; -} diff --git a/old/old_annotations/interface/IBaseSelectableAnnotation.ts b/old/old_annotations/interface/IBaseSelectableAnnotation.ts deleted file mode 100644 index a994677977627dcae384ed4dbc4cdd9b0835cd72..0000000000000000000000000000000000000000 --- a/old/old_annotations/interface/IBaseSelectableAnnotation.ts +++ /dev/null @@ -1,9 +0,0 @@ -import * as PIXI from "pixi.js-legacy"; - -/** - * Interface base selectable annotation - */ -export interface IBaseSelectableAnnotation extends PIXI.Container { - selectAnnotation(event: any): void; - unSelectAnnotation(): void; -} diff --git a/old/old_annotations/primitive/EllipsePrimitive.ts b/old/old_annotations/primitive/EllipsePrimitive.ts deleted file mode 100644 index c974be1c55c250e8db6206e0d927edbd8ce92260..0000000000000000000000000000000000000000 --- a/old/old_annotations/primitive/EllipsePrimitive.ts +++ /dev/null @@ -1,112 +0,0 @@ -import * as PIXI from "pixi.js-legacy"; -import {BaseAnnotation} from "../base/BaseAnnotation"; -// import {MedsurfStage} from "../../stages/MedsurfStage"; - -/** - * Ellipse annotation - */ -export class EllipsePrimitive extends BaseAnnotation<PIXI.Graphics> { - /** - * Members - */ - private _ellipse: PIXI.Ellipse; - private _color: number; - - /** - * Constructor - * @param stage - * @param x - * @param y - * @param width - * @param height - * @param color - */ - public constructor(stage: any /*MedsurfStage*/, x: number, y: number, width: number, height: number, color?: number) { - super(stage, "ellipse", new PIXI.Graphics()); - this.name = "ellipse-primitive"; // TODO remove - - // Position - this.position.set(x, y); - - // Element - this._ellipse = new PIXI.Ellipse(0, 0, width, height); - this._color = color || 0xFFFFFF; - - this.draw(); - } - - //<editor-fold desc="BaseGraphicAnnotation"> - public draw(): void { - this.element.clear(); - if (this._color) { - this.element.beginFill(this._color); - } - this.element.drawEllipse(this._ellipse.x, this._ellipse.y, this._ellipse.width, this._ellipse.height); - this.element.endFill(); - - /* - this.element.beginFill(0xFFFFFF); - this.element.drawCircle(this.pivot.x, this.pivot.y, 2); - this.element.endFill(); - */ - - this.element.hitArea = this._ellipse; - } - //</editor-fold> - - //<editor-fold desc="IBaseScaleableAnnotation"> - public scaleAnnotation(dX: number, dY: number, dW: number, dH: number): void { - if (this._ellipse.width + dW < 1) { - return; - /* - dW = 1 - this._ellipse.width; - dX = 0; - dY = 0; - */ - } - if (this._ellipse.height + dH < 1) { - return; - /* - dH = 1 - this._ellipse.height; - dX = 0; - dY = 0; - */ - } - - // Element - this._ellipse.width += dW; - this._ellipse.height += dH; - - // Position - this.position.x += dX * Math.cos(this.container.rotation) - dY * Math.sin(this.container.rotation); - this.position.y += dY * Math.cos(this.container.rotation) + dX * Math.sin(this.container.rotation); - - this.draw(); - super.scaleAnnotation(dX, dY, dW, dH); - } - - public rotateAnnotation(dR: number): void { - this.container.rotation += dR; - } - //</editor-fold> - - //<editor-fold desc="Getter and Setter"> - public get ellipse(): PIXI.Ellipse { - return this._ellipse; - } - - public set ellipse(value: PIXI.Ellipse) { - this._ellipse = value; - this.draw(); - } - - public get color(): number { - return this._color; - } - - public set color(value: number) { - this._color = value; - this.draw(); - } - //</editor-fold> -} diff --git a/old/old_annotations/primitive/LinePrimitive.ts b/old/old_annotations/primitive/LinePrimitive.ts deleted file mode 100644 index 24fd6316aa6796614e87751cb1d1f76f74f93f0e..0000000000000000000000000000000000000000 --- a/old/old_annotations/primitive/LinePrimitive.ts +++ /dev/null @@ -1,102 +0,0 @@ -import * as PIXI from "pixi.js-legacy"; -import {BaseAnnotation} from "../base/BaseAnnotation"; -// import {MedsurfStage} from "../../stages/MedsurfStage"; - -/** - * Line annotation - */ -export class LinePrimitive extends BaseAnnotation<PIXI.Graphics> { - /** - * Members - */ - private _rectangle: PIXI.Rectangle; - private _color: number; - - /** - * Constructor - * @param stage - * @param x - * @param y - * @param width - * @param height - * @param color - */ - public constructor(stage: any /*MedsurfStage*/, x: number, y: number, width: number, height: number = 1, color?: number) { - super(stage, "line", new PIXI.Graphics()); - this.name = "line-primitive"; // TODO remove - - // Position - this.position.set(x /* TODO when topLeft pos + width / 2*/, y /* TODO when topLeft pos + height / 2*/); - this.container.pivot.set(width / 2, height / 2); - - // Element - this._rectangle = new PIXI.Rectangle(0, 0, width, height); - this._color = color || 0xFFFFFF; - - this.draw(); - } - - //<editor-fold desc="BaseGraphicAnnotation"> - public draw(): void { - this.element.clear(); - this.element.lineStyle(this._rectangle.height, this._color); - this.element.moveTo(this._rectangle.x, this._rectangle.y); - this.element.lineTo(this._rectangle.x + this._rectangle.width, this._rectangle.y); - this.element.endFill(); - - this.element.hitArea = this.getLocalBounds(); - } - //</editor-fold> - - //<editor-fold desc="IBaseScaleableAnnotation"> - public scaleAnnotation(dX: number, dY: number, dW: number, dH: number): void { - if (this._rectangle.width + dW < 1) { - dW = 0 - this._rectangle.width; - dX = 0; - dY = 0; - } - if (this._rectangle.height + dH < 1) { - dH = 1 - this._rectangle.height; - dX = 0; - dY = 0; - } - - // Element - this._rectangle.width += dW; - this._rectangle.height += dH; - - // Position - this.position.x += (dX + dW / 2) * Math.cos(this.container.rotation) - (dY + dH / 2) * Math.sin(this.container.rotation); - this.position.y += (dY + dH / 2) * Math.cos(this.container.rotation) + (dX + dW / 2) * Math.sin(this.container.rotation); - this.container.pivot.x += dW / 2; - this.container.pivot.y += dH / 2; - - this.draw(); - super.scaleAnnotation(dX, dY, dW, dH); - } - - public rotateAnnotation(dR: number): void { - this.container.rotation += dR; - } - //</editor-fold> - - //<editor-fold desc="Getter and Setter"> - public get rectangle(): PIXI.Rectangle { - return this._rectangle; - } - - public set rectangle(value: PIXI.Rectangle) { - this._rectangle = value; - this.draw(); - } - - public get color(): number { - return this._color; - } - - public set color(value: number) { - this._color = value; - this.draw(); - } - //</editor-fold> -} \ No newline at end of file diff --git a/old/old_annotations/primitive/PrimitiveModule.ts b/old/old_annotations/primitive/PrimitiveModule.ts deleted file mode 100644 index e77989a4995638531a35477b22f34cba7986aa77..0000000000000000000000000000000000000000 --- a/old/old_annotations/primitive/PrimitiveModule.ts +++ /dev/null @@ -1,7 +0,0 @@ -import {EllipsePrimitive} from "./EllipsePrimitive"; -import {RectanglePrimitive} from "./RectanglePrimitive"; -import {TextPrimitive} from "./TextPrimitive"; -export * from "./EllipsePrimitive"; -export * from "./RectanglePrimitive"; -export * from "./TextPrimitive"; -export type Primitives = EllipsePrimitive | RectanglePrimitive | TextPrimitive; \ No newline at end of file diff --git a/old/old_annotations/primitive/RectanglePrimitive.ts b/old/old_annotations/primitive/RectanglePrimitive.ts deleted file mode 100644 index 5ab80f9707859f2a1f6cbd05480a7706fabb705f..0000000000000000000000000000000000000000 --- a/old/old_annotations/primitive/RectanglePrimitive.ts +++ /dev/null @@ -1,189 +0,0 @@ -import * as PIXI from "pixi.js-legacy"; -import {BaseAnnotation} from "../base/BaseAnnotation"; -// import {MedsurfStage} from "../../stages/MedsurfStage"; - -/** - * Rectangle annotation - */ -export class RectanglePrimitive extends BaseAnnotation<PIXI.Graphics> { - /** - * Members - */ - private _rectangle: PIXI.Rectangle; - private _color: number; - - /** - * Constructor - * @param stage - * @param x - * @param y - * @param width - * @param height - * @param color - */ - public constructor(stage: any /*MedsurfStage*/, x: number, y: number, width: number, height: number, color?: number) { - super(stage, "rectangle", new PIXI.Graphics()); - this.name = "rectangle-primitive"; // TODO remove - - // Position - this.position.set(x /* TODO when topLeft pos + width / 2*/, y /* TODO when topLeft pos + height / 2*/); - this.container.pivot.set(width / 2, height / 2); - - // Element - this._rectangle = new PIXI.Rectangle(0, 0, width, height); - this._color = color || 0xFFFFFF; - - this.draw(); - } - - protected drawDashedPolygon(polygons: PIXI.Point[], x: number, y: number, rotation: number = 0, dash: number = 0, gap: number = 0, offsetPercentage: number = 0) { - let i: number; - let p1: PIXI.Point; - let p2: PIXI.Point; - let dashLeft: number = 0; - let gapLeft: number = 0; - if (offsetPercentage > 0) { - let progressOffset = (dash + gap) * offsetPercentage; - if (progressOffset < dash) { - dashLeft = dash - progressOffset; - } else { - gapLeft = gap - (progressOffset - dash); - } - } - - let rotatedPolygons: PIXI.Point[] = []; - for (i = 0; i < polygons.length; i++) { - const p = new PIXI.Point(polygons[i].x, polygons[i].y); - let cosAngle: number = Math.cos(rotation); - let sinAngle = Math.sin(rotation); - let dx = p.x; - let dy = p.y; - p.x = (dx * cosAngle - dy * sinAngle); - p.y = (dx * sinAngle + dy * cosAngle); - rotatedPolygons.push(p); - } - - for (i = 0; i < rotatedPolygons.length; i++) { - p1 = rotatedPolygons[i]; - if (i == rotatedPolygons.length - 1) { - p2 = rotatedPolygons[0]; - } else { - p2 = rotatedPolygons[i + 1]; - } - let dx = p2.x - p1.x; - let dy = p2.y - p1.y; - let len = Math.sqrt(dx * dx + dy * dy); - let normal = new PIXI.Point(dx / len, dy / len); - let progressOnLine = 0; - this.element.moveTo(x + p1.x + gapLeft * normal.x, y + p1.y + gapLeft * normal.y); - while (progressOnLine <= len) { - progressOnLine += gapLeft; - if (dashLeft > 0) { - progressOnLine += dashLeft; - } else { - progressOnLine += dash; - } - if (progressOnLine > len) { - dashLeft = progressOnLine - len; - progressOnLine = len; - } else { - dashLeft = 0; - } - this.element.lineTo(x + p1.x + progressOnLine * normal.x, y + p1.y + progressOnLine * normal.y); - progressOnLine += gap; - if (progressOnLine > len && dashLeft == 0) { - gapLeft = progressOnLine - len; - console.log(progressOnLine, len, gap); - } else { - gapLeft = 0; - this.element.moveTo(x + p1.x + progressOnLine * normal.x, y + p1.y + progressOnLine * normal.y); - } - } - } - } - - //<editor-fold desc="BaseGraphicAnnotation"> - public draw(): void { - this.element.clear(); - if (this._color) { - this.element.beginFill(this._color); - } - this.element.drawRect(this._rectangle.x, this._rectangle.y, this._rectangle.width, this._rectangle.height); - this.element.endFill(); - - /* TODO dotted line - this.element.lineStyle(2, 0x0000FF, 1); - const polygon = [new PIXI.Point(this._rectangle.x, this._rectangle.y), new PIXI.Point(this._rectangle.x + this._rectangle.width, this._rectangle.y), new PIXI.Point(this._rectangle.x + this._rectangle.width, this._rectangle.y + this._rectangle.height), new PIXI.Point(this._rectangle.x, this._rectangle.y + this._rectangle.height)] - const offsetInterval = 750; - this.drawDashedPolygon(polygon, 20, 20, 0, 2, 1, (Date.now()%offsetInterval+1)/offsetInterval); - this.element.endFill(); - */ - - /* - this.element.beginFill(0xFFFFFF); - this.element.drawCircle(this.pivot.x, this.pivot.y, 2); - this.element.endFill(); - */ - - this.element.hitArea = this._rectangle; - } - //</editor-fold> - - //<editor-fold desc="IBaseScaleableAnnotation"> - public scaleAnnotation(dX: number, dY: number, dW: number, dH: number): void { - if (this._rectangle.width + dW < 1) { - return; - /* - dW = 1 - this._ellipse.width; - dX = 0; - dY = 0; - */ - } - if (this._rectangle.height + dH < 1) { - return; - /* - dH = 1 - this._ellipse.height; - dX = 0; - dY = 0; - */ - } - - // Element - this._rectangle.width += dW; - this._rectangle.height += dH; - - // Position - this.position.x += (dX + dW / 2) * Math.cos(this.container.rotation) - (dY + dH / 2) * Math.sin(this.container.rotation); - this.position.y += (dY + dH / 2) * Math.cos(this.container.rotation) + (dX + dW / 2) * Math.sin(this.container.rotation); - this.container.pivot.x += dW / 2; - this.container.pivot.y += dH / 2; - - this.draw(); - super.scaleAnnotation(dX, dY, dW, dH); - } - - public rotateAnnotation(dR: number): void { - this.container.rotation += dR; - } - //</editor-fold> - - //<editor-fold desc="Getter and Setter"> - public get rectangle(): PIXI.Rectangle { - return this._rectangle; - } - - public set rectangle(value: PIXI.Rectangle) { - this._rectangle = value; - this.draw(); - } - - public get color(): number { - return this._color; - } - - public set color(value: number) { - this._color = value; - this.draw(); - } - //</editor-fold> -} diff --git a/old/old_annotations/primitive/TextPrimitive.ts b/old/old_annotations/primitive/TextPrimitive.ts deleted file mode 100644 index f22b4407b3b20bfd651f7b9ae240e1b030d3bcec..0000000000000000000000000000000000000000 --- a/old/old_annotations/primitive/TextPrimitive.ts +++ /dev/null @@ -1,109 +0,0 @@ -import * as PIXI from "pixi.js-legacy"; -import {BaseAnnotation} from "../base/BaseAnnotation"; -// import {MedsurfStage} from "../../stages/MedsurfStage"; - -/** - * Text annotation - */ -export class TextPrimitive extends BaseAnnotation<PIXI.Text> { - /** - * Members - */ - private _rectangle: PIXI.Rectangle; - // TODO remove protected _pivotPoint: PIXI.Graphics; - - /** - * Constructor - * @param stage - * @param text - * @param x - * @param y - * @param style - */ - public constructor(stage: any /*MedsurfStage*/, text: string, x: number, y: number, style?: any | PIXI.TextStyle) { - super(stage, "text", new PIXI.Text(text, style)); - this.name = "text-primitive"; // TODO remove - - // Position - this.position.set(x, y); - this.container.pivot.set(this.width / 2, this.height / 2); - - // Element - this._rectangle = new PIXI.Rectangle(0, 0, this.width, this.height); - - /* TODO remove - this._pivotPoint = new PIXI.Graphics(); - this.addChild(this._pivotPoint); - */ - - this.draw(); - } - - //<editor-fold desc="Public functions"> - public draw(): void { - // TODO check this values - // this.texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST; - // this.context.scale(200,200) - // this.cacheAsBitmap = false; - this.element.resolution = 20; - - /* - this._pivotPoint.clear(); - this._pivotPoint.beginFill(0xFFFFFF); - this._pivotPoint.drawCircle(this.pivot.x, this.pivot.y, 2); - this._pivotPoint.endFill(); - */ - - this.element.hitArea = this._rectangle; - } - //</editor-fold> - - //<editor-fold desc="IBaseScaleableAnnotation"> - public scaleAnnotation(dX: number, dY: number, dW: number, dH: number): void { - if (dW != 0) { - const width = this.element.width + dW; - - // Element - this.element.style.fontSize = Math.max(2, width / this.element.width * this.element.style.fontSize); - } - if (dH != 0) { - const height = this.element.height + dH; - - // Element - this.element.style.fontSize = Math.max(2, height / this.element.height * this.element.style.fontSize); - } - - // Position - this.position.x += (dX + dW / 2) * Math.cos(this.container.rotation) - (dY + dH / 2) * Math.sin(this.container.rotation); - this.position.y += (dY + dH / 2) * Math.cos(this.container.rotation) + (dX + dW / 2) * Math.sin(this.container.rotation); - this.container.pivot.set(this.element.width / 2, this.element.height / 2); - - this.draw(); - super.scaleAnnotation(dX, dY, dW, dH); - } - - public rotateAnnotation(dR: number): void { - this.container.rotation += dR; - } - //</editor-fold> - - //<editor-fold desc="Getter and Setter"> - public get x(): number { - return this.position.x; - } - - public set x(value: number) { - this.position.x = value; - this.draw(); - } - - public get y(): number { - return this.position.y; - } - - public set y(value: number) { - this.position.y = value; - this.draw(); - } - //</editor-fold> -} diff --git a/package-lock.json b/package-lock.json index 87545330d3f512839da35ca2f70772019ff894b2..d4ed248bcfe8db38fbc9f6b1e7cdc007b5f56ab4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -453,7 +453,8 @@ "@types/debounce": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@types/debounce/-/debounce-1.2.0.tgz", - "integrity": "sha512-bWG5wapaWgbss9E238T0R6bfo5Fh3OkeoSt245CM7JJwVwpw6MEBCbIxLq5z8KzsE3uJhzcIuQkyiZmzV3M/Dw==" + "integrity": "sha512-bWG5wapaWgbss9E238T0R6bfo5Fh3OkeoSt245CM7JJwVwpw6MEBCbIxLq5z8KzsE3uJhzcIuQkyiZmzV3M/Dw==", + "dev": true }, "@types/events": { "version": "3.0.0", diff --git a/package.json b/package.json index 57389f7424c9039d7ae95dec02951e030c4e406d..cb12da42d4caadd8bfe8b0fb37b846bb92c6e82c 100644 --- a/package.json +++ b/package.json @@ -2,22 +2,22 @@ "name": "medsurf-pixi", "version": "1.0.0", "description": "medsurf-pixi", - "main": "index.js", + "main": "dist/index.js", "scripts": { "build": "webpack --config webpack.js --display verbose --progress --profile", "serve": "webpack-dev-server --config webpack.js --color --progress --inline --hot", "start": "npm run build && npm run serve" }, "author": "Gottsponer Andrea Leonardo", - "license": "ISC", + "license": "MIT", "dependencies": { - "@types/debounce": "^1.2.0", "debounce": "^1.2.0", "pixi.js-keyboard": "^1.0.9", "pixi.js-legacy": "^5.2.0", "webfontloader": "^1.6.28" }, "devDependencies": { + "@types/debounce": "^1.2.0", "@types/webfontloader": "^1.6.29", "babel-loader": "^8.0.6", "html-webpack-plugin": "^3.2.0", diff --git a/src/app/index.ts b/src/app/index.ts index c24b5d7813ed9aaf8f97ee681d7535c608fb8b68..47f0387369cdd49791bcc0e6ddf1227ed60b1b22 100644 --- a/src/app/index.ts +++ b/src/app/index.ts @@ -1,15 +1,15 @@ import * as PIXI from "pixi.js-legacy"; import * as Keyboard from "pixi.js-keyboard"; -import {MedsurfTileSprite} from "./elements/images/MedsurfTileSprite"; -import {PositionPoint} from "./elements/positionings/PositionPoint"; -import {RectanglePrimitive} from "./elements/primitives/RectanglePrimitive"; -import {EllipsePrimitive} from "./elements/primitives/EllipsePrimitive"; -import {TextPrimitive} from "./elements/primitives/TextPrimitive"; -import {ArrowPrimitive} from "./elements/primitives/ArrowPrimitive"; -import {Line} from "./elements/connections/Line"; -import {ImageNavigatorElement} from "./elements/interactions/ImageNavigatorElement"; -import {FillCollection} from "./elements/collections/FillCollection"; -import {LegendCollection, LegendItem} from "./elements/collections/LegendCollection"; +import {MedsurfTileSprite} from "../lib/elements/images/MedsurfTileSprite"; +import {PositionPoint} from "../lib/elements/positionings/PositionPoint"; +import {RectanglePrimitive} from "../lib/elements/primitives/RectanglePrimitive"; +import {EllipsePrimitive} from "../lib/elements/primitives/EllipsePrimitive"; +import {TextPrimitive} from "../lib/elements/primitives/TextPrimitive"; +import {ArrowPrimitive} from "../lib/elements/primitives/ArrowPrimitive"; +import {Line} from "../lib/elements/connections/Line"; +import {ImageNavigatorElement} from "../lib/elements/interactions/ImageNavigatorElement"; +import {FillCollection} from "../lib/elements/collections/FillCollection"; +import {LegendCollection, LegendItem} from "../lib/elements/collections/LegendCollection"; const canvas = document.getElementById("medsurf_canvas") as HTMLCanvasElement; const width = canvas.width; diff --git a/src/app/bases/BaseContainer.ts b/src/lib/bases/BaseContainer.ts similarity index 100% rename from src/app/bases/BaseContainer.ts rename to src/lib/bases/BaseContainer.ts diff --git a/src/app/bases/BaseDrawGenerator.ts b/src/lib/bases/BaseDrawGenerator.ts similarity index 100% rename from src/app/bases/BaseDrawGenerator.ts rename to src/lib/bases/BaseDrawGenerator.ts diff --git a/src/app/bases/BaseGenerator.ts b/src/lib/bases/BaseGenerator.ts similarity index 100% rename from src/app/bases/BaseGenerator.ts rename to src/lib/bases/BaseGenerator.ts diff --git a/src/app/bases/BaseInteraction.ts b/src/lib/bases/BaseInteraction.ts similarity index 100% rename from src/app/bases/BaseInteraction.ts rename to src/lib/bases/BaseInteraction.ts diff --git a/src/app/bases/BaseModul.ts b/src/lib/bases/BaseModul.ts similarity index 100% rename from src/app/bases/BaseModul.ts rename to src/lib/bases/BaseModul.ts diff --git a/src/app/bases/BaseSprite.ts b/src/lib/bases/BaseSprite.ts similarity index 100% rename from src/app/bases/BaseSprite.ts rename to src/lib/bases/BaseSprite.ts diff --git a/src/app/elements/collections/FillCollection.ts b/src/lib/elements/collections/FillCollection.ts similarity index 100% rename from src/app/elements/collections/FillCollection.ts rename to src/lib/elements/collections/FillCollection.ts diff --git a/src/app/elements/collections/LegendCollection.ts b/src/lib/elements/collections/LegendCollection.ts similarity index 100% rename from src/app/elements/collections/LegendCollection.ts rename to src/lib/elements/collections/LegendCollection.ts diff --git a/src/app/elements/collections/LegendColumnCollection.ts b/src/lib/elements/collections/LegendColumnCollection.ts similarity index 100% rename from src/app/elements/collections/LegendColumnCollection.ts rename to src/lib/elements/collections/LegendColumnCollection.ts diff --git a/src/app/elements/connections/Line.ts b/src/lib/elements/connections/Line.ts similarity index 100% rename from src/app/elements/connections/Line.ts rename to src/lib/elements/connections/Line.ts diff --git a/src/lib/elements/elements.ts b/src/lib/elements/elements.ts new file mode 100644 index 0000000000000000000000000000000000000000..823b2aad3e4d0f417aee4c68c7c5a7b8723193a0 --- /dev/null +++ b/src/lib/elements/elements.ts @@ -0,0 +1,14 @@ +export * from "./collections/FillCollection"; +export * from "./collections/LegendCollection"; + +export * from "./connections/Line"; + +export * from "./images/MedsurfSprite"; +export * from "./images/MedsurfTileSprite"; + +export * from "./positionings/PositionPoint"; + +export * from "./primitives/ArrowPrimitive"; +export * from "./primitives/EllipsePrimitive"; +export * from "./primitives/RectanglePrimitive"; +export * from "./primitives/TextPrimitive"; diff --git a/src/app/elements/images/MedsurfSprite.ts b/src/lib/elements/images/MedsurfSprite.ts similarity index 100% rename from src/app/elements/images/MedsurfSprite.ts rename to src/lib/elements/images/MedsurfSprite.ts diff --git a/src/app/elements/images/MedsurfTileSprite.ts b/src/lib/elements/images/MedsurfTileSprite.ts similarity index 100% rename from src/app/elements/images/MedsurfTileSprite.ts rename to src/lib/elements/images/MedsurfTileSprite.ts diff --git a/src/app/elements/images/TileSprite.ts b/src/lib/elements/images/TileSprite.ts similarity index 100% rename from src/app/elements/images/TileSprite.ts rename to src/lib/elements/images/TileSprite.ts diff --git a/src/app/elements/inputs/ButtonElement.ts b/src/lib/elements/inputs/ButtonElement.ts similarity index 100% rename from src/app/elements/inputs/ButtonElement.ts rename to src/lib/elements/inputs/ButtonElement.ts diff --git a/src/app/elements/inputs/ColorElement.ts b/src/lib/elements/inputs/ColorElement.ts similarity index 100% rename from src/app/elements/inputs/ColorElement.ts rename to src/lib/elements/inputs/ColorElement.ts diff --git a/src/app/elements/interactions/CaretElement.ts b/src/lib/elements/interactions/CaretElement.ts similarity index 100% rename from src/app/elements/interactions/CaretElement.ts rename to src/lib/elements/interactions/CaretElement.ts diff --git a/src/app/elements/interactions/ConfigurationElement.ts b/src/lib/elements/interactions/ConfigurationElement.ts similarity index 100% rename from src/app/elements/interactions/ConfigurationElement.ts rename to src/lib/elements/interactions/ConfigurationElement.ts diff --git a/src/app/elements/interactions/ContextElement.ts b/src/lib/elements/interactions/ContextElement.ts similarity index 100% rename from src/app/elements/interactions/ContextElement.ts rename to src/lib/elements/interactions/ContextElement.ts diff --git a/src/app/elements/interactions/ImageNavigatorElement.ts b/src/lib/elements/interactions/ImageNavigatorElement.ts similarity index 100% rename from src/app/elements/interactions/ImageNavigatorElement.ts rename to src/lib/elements/interactions/ImageNavigatorElement.ts diff --git a/src/app/elements/interactions/RotateElement.ts b/src/lib/elements/interactions/RotateElement.ts similarity index 100% rename from src/app/elements/interactions/RotateElement.ts rename to src/lib/elements/interactions/RotateElement.ts diff --git a/src/app/elements/interactions/RotateMeasureElement.ts b/src/lib/elements/interactions/RotateMeasureElement.ts similarity index 100% rename from src/app/elements/interactions/RotateMeasureElement.ts rename to src/lib/elements/interactions/RotateMeasureElement.ts diff --git a/src/app/elements/interactions/RulerElement.ts b/src/lib/elements/interactions/RulerElement.ts similarity index 100% rename from src/app/elements/interactions/RulerElement.ts rename to src/lib/elements/interactions/RulerElement.ts diff --git a/src/app/elements/interactions/ScaleElement.ts b/src/lib/elements/interactions/ScaleElement.ts similarity index 100% rename from src/app/elements/interactions/ScaleElement.ts rename to src/lib/elements/interactions/ScaleElement.ts diff --git a/src/app/elements/interactions/SelectionElement.ts b/src/lib/elements/interactions/SelectionElement.ts similarity index 100% rename from src/app/elements/interactions/SelectionElement.ts rename to src/lib/elements/interactions/SelectionElement.ts diff --git a/src/app/elements/interactions/SimpleScaleElement.ts b/src/lib/elements/interactions/SimpleScaleElement.ts similarity index 100% rename from src/app/elements/interactions/SimpleScaleElement.ts rename to src/lib/elements/interactions/SimpleScaleElement.ts diff --git a/src/app/elements/positionings/PositionPoint.ts b/src/lib/elements/positionings/PositionPoint.ts similarity index 100% rename from src/app/elements/positionings/PositionPoint.ts rename to src/lib/elements/positionings/PositionPoint.ts diff --git a/src/app/elements/primitives/ArrowPrimitive.ts b/src/lib/elements/primitives/ArrowPrimitive.ts similarity index 100% rename from src/app/elements/primitives/ArrowPrimitive.ts rename to src/lib/elements/primitives/ArrowPrimitive.ts diff --git a/src/app/elements/primitives/EllipsePrimitive.ts b/src/lib/elements/primitives/EllipsePrimitive.ts similarity index 100% rename from src/app/elements/primitives/EllipsePrimitive.ts rename to src/lib/elements/primitives/EllipsePrimitive.ts diff --git a/src/app/elements/primitives/LegendTextPrimitive.ts b/src/lib/elements/primitives/LegendTextPrimitive.ts similarity index 100% rename from src/app/elements/primitives/LegendTextPrimitive.ts rename to src/lib/elements/primitives/LegendTextPrimitive.ts diff --git a/src/app/elements/primitives/RectanglePrimitive.ts b/src/lib/elements/primitives/RectanglePrimitive.ts similarity index 100% rename from src/app/elements/primitives/RectanglePrimitive.ts rename to src/lib/elements/primitives/RectanglePrimitive.ts diff --git a/src/app/elements/primitives/TextPrimitive.ts b/src/lib/elements/primitives/TextPrimitive.ts similarity index 100% rename from src/app/elements/primitives/TextPrimitive.ts rename to src/lib/elements/primitives/TextPrimitive.ts diff --git a/src/app/generators/ArrowPrimitiveGenerator.ts b/src/lib/generators/ArrowPrimitiveGenerator.ts similarity index 100% rename from src/app/generators/ArrowPrimitiveGenerator.ts rename to src/lib/generators/ArrowPrimitiveGenerator.ts diff --git a/src/app/generators/EllipsePrimitiveGenerator.ts b/src/lib/generators/EllipsePrimitiveGenerator.ts similarity index 100% rename from src/app/generators/EllipsePrimitiveGenerator.ts rename to src/lib/generators/EllipsePrimitiveGenerator.ts diff --git a/src/app/generators/FillCollectionGenerator.ts b/src/lib/generators/FillCollectionGenerator.ts similarity index 100% rename from src/app/generators/FillCollectionGenerator.ts rename to src/lib/generators/FillCollectionGenerator.ts diff --git a/src/app/generators/LineGenerator.ts b/src/lib/generators/LineGenerator.ts similarity index 100% rename from src/app/generators/LineGenerator.ts rename to src/lib/generators/LineGenerator.ts diff --git a/src/app/generators/PolygonGenerator.ts b/src/lib/generators/PolygonGenerator.ts similarity index 100% rename from src/app/generators/PolygonGenerator.ts rename to src/lib/generators/PolygonGenerator.ts diff --git a/src/app/generators/PositionPointGenerator.ts b/src/lib/generators/PositionPointGenerator.ts similarity index 100% rename from src/app/generators/PositionPointGenerator.ts rename to src/lib/generators/PositionPointGenerator.ts diff --git a/src/app/generators/RectanglePrimitiveGenerator.ts b/src/lib/generators/RectanglePrimitiveGenerator.ts similarity index 100% rename from src/app/generators/RectanglePrimitiveGenerator.ts rename to src/lib/generators/RectanglePrimitiveGenerator.ts diff --git a/src/app/generators/SelftestGenerator.ts b/src/lib/generators/SelftestGenerator.ts similarity index 100% rename from src/app/generators/SelftestGenerator.ts rename to src/lib/generators/SelftestGenerator.ts diff --git a/src/app/generators/TextPrimitiveGenerator.ts b/src/lib/generators/TextPrimitiveGenerator.ts similarity index 100% rename from src/app/generators/TextPrimitiveGenerator.ts rename to src/lib/generators/TextPrimitiveGenerator.ts diff --git a/src/lib/index.ts b/src/lib/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..72140fd083d1dd7c3e7cc209df5b27205abb9a8d --- /dev/null +++ b/src/lib/index.ts @@ -0,0 +1 @@ +export * from "./elements/elements"; \ No newline at end of file diff --git a/src/app/interactions/ChooseInteraction.ts b/src/lib/interactions/ChooseInteraction.ts similarity index 100% rename from src/app/interactions/ChooseInteraction.ts rename to src/lib/interactions/ChooseInteraction.ts diff --git a/src/app/interactions/ContextInteraction.ts b/src/lib/interactions/ContextInteraction.ts similarity index 100% rename from src/app/interactions/ContextInteraction.ts rename to src/lib/interactions/ContextInteraction.ts diff --git a/src/app/interactions/DrawInteraction.ts b/src/lib/interactions/DrawInteraction.ts similarity index 100% rename from src/app/interactions/DrawInteraction.ts rename to src/lib/interactions/DrawInteraction.ts diff --git a/src/app/interactions/InteractionModul.ts b/src/lib/interactions/InteractionModul.ts similarity index 100% rename from src/app/interactions/InteractionModul.ts rename to src/lib/interactions/InteractionModul.ts diff --git a/src/app/interactions/ModeInteraction.ts b/src/lib/interactions/ModeInteraction.ts similarity index 100% rename from src/app/interactions/ModeInteraction.ts rename to src/lib/interactions/ModeInteraction.ts diff --git a/src/app/interactions/MoveInteraction.ts b/src/lib/interactions/MoveInteraction.ts similarity index 100% rename from src/app/interactions/MoveInteraction.ts rename to src/lib/interactions/MoveInteraction.ts diff --git a/src/app/interactions/RotateInteraction.ts b/src/lib/interactions/RotateInteraction.ts similarity index 100% rename from src/app/interactions/RotateInteraction.ts rename to src/lib/interactions/RotateInteraction.ts diff --git a/src/app/interactions/ScaleInteraction.ts b/src/lib/interactions/ScaleInteraction.ts similarity index 100% rename from src/app/interactions/ScaleInteraction.ts rename to src/lib/interactions/ScaleInteraction.ts diff --git a/src/app/interactions/SelectInteraction.ts b/src/lib/interactions/SelectInteraction.ts similarity index 100% rename from src/app/interactions/SelectInteraction.ts rename to src/lib/interactions/SelectInteraction.ts diff --git a/src/app/interactions/WriteInteraction.ts b/src/lib/interactions/WriteInteraction.ts similarity index 100% rename from src/app/interactions/WriteInteraction.ts rename to src/lib/interactions/WriteInteraction.ts diff --git a/src/app/interactions/ZoomInteraction.ts b/src/lib/interactions/ZoomInteraction.ts similarity index 100% rename from src/app/interactions/ZoomInteraction.ts rename to src/lib/interactions/ZoomInteraction.ts diff --git a/tsconfig.json b/tsconfig.json index ca7fa69e74d34a03865a0077c4b37967b04107ce..0ce3cc05197e85e8b29abe0698d1b2d5341783dc 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,8 +8,8 @@ "lib": ["es2015", "dom"], "module": "commonjs", "outDir": "./dist/", - "sourceMap": true, - "declaration": false, + "sourceMap": false, + "declaration": true, "noImplicitAny": true, "removeComments": true, "typeRoots": [ @@ -21,6 +21,8 @@ "src/**/*" ], "exclude": [ - "node_modules" + "node_modules", + "src/app/index.ts", + "src/public" ] } \ No newline at end of file diff --git a/tsconfig_example.json b/tsconfig_example.json new file mode 100644 index 0000000000000000000000000000000000000000..d2c4bfc12a7fb485da240bf1d7196463f1d0e80e --- /dev/null +++ b/tsconfig_example.json @@ -0,0 +1,28 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": ".", + "strictNullChecks": true, + "moduleResolution": "node", + "target": "es5", + "lib": ["es2015", "dom"], + "module": "commonjs", + "outDir": "./dist_example/", + "sourceMap": false, + "declaration": true, + "noImplicitAny": true, + "removeComments": true, + "typeRoots": [ + "node_modules/@types", + "src/types" + ] + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "node_modules", + "src/app/index.ts", + "src/public" + ] +} \ No newline at end of file diff --git a/webpack.js b/webpack.js index 904e77973a2a4c3e83ded4f8e1ae80a0d1f70719..4894e1d361a4408c783f6680f7830f1514cc1e6c 100644 --- a/webpack.js +++ b/webpack.js @@ -2,9 +2,9 @@ const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); -const outputDir = 'dist'; +const outputDir = 'dist_example'; const publicPath = '/'; -const tsConfig = 'tsconfig.json'; +const tsConfig = 'tsconfig_example.json'; module.exports = { entry: {