diff --git a/package-lock.json b/package-lock.json
index 7e0858904e07118745211b0c6c3a4421c10e0be2..0b4639e486c64473c4e34a445d9f596c5676b9e0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4272,9 +4272,9 @@
"dev": true
},
"gsap": {
- "version": "3.1.1",
- "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.1.1.tgz",
- "integrity": "sha512-ISkCKuXMtBbmbchJxWXuZydXnnWVV9SqNqd8vAevvtq0yzyBapMbXLxwambK73S/2kpTIVzYW8eJXlDD7yHhvw=="
+ "version": "3.2.6",
+ "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.2.6.tgz",
+ "integrity": "sha512-QX7WQWZUAooS9tOCYg4kKLcnjBreA4Xyu11EVx6zp4BbKijnMK+NtzkB47las/E0luFE84hGscOZm5vd13KzZA=="
},
"handle-thing": {
"version": "2.0.0",
diff --git a/package.json b/package.json
index 0a09dc0e63aebe654b66d06fa2db889dbccaa1f1..ebae80e1e5a67d7a52456b380baf4b650feacb19 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
"@ascii-dev-user/medsurf-lib": "^1.18.0-4",
"@babel/core": "^7.8.4",
"debounce": "^1.2.0",
- "gsap": "^3.1.1",
+ "gsap": "^3.2.6",
"pixi.js-keyboard": "^1.0.9",
"pixi.js-legacy": "^5.2.1",
"uuid": "^3.4.0",
diff --git a/src/app/index.ts b/src/app/index.ts
index 8ec8bc843a88118c25ffd5179149de1a0d25400d..a3a20f1d7d98eb772caebabf56b603db061ab0e9 100644
--- a/src/app/index.ts
+++ b/src/app/index.ts
@@ -3,6 +3,9 @@ import * as PIXI from "pixi.js-legacy";
import * as Keyboard from "pixi.js-keyboard";
import * as Models from '@ascii-dev-user/medsurf-lib/models';
import * as MedsurfDraw from "../lib/public-api";
+import {gsap} from "gsap";
+// @ts-ignore
+import { PixiPlugin } from "gsap/PixiPlugin.js";
const canvasDiv = document.getElementById("medsurf_canvas_div") as HTMLDivElement;
// canvasDiv.style.width = (window.innerWidth * 0.9).toString();
@@ -17,6 +20,7 @@ const buttonAuthor = document.getElementById("button_author") as HTMLButtonEleme
const buttonModel = document.getElementById("button_model") as HTMLButtonElement;
const buttonChange = document.getElementById("button_change") as HTMLButtonElement;
const buttonFilter = document.getElementById("button_filter") as HTMLButtonElement;
+const buttonPosition = document.getElementById("button_position") as HTMLButtonElement;
// TODO CANVASRENDERER has gaps between Tiles
// https://www.html5gamedevs.com/topic/27366-gaps-between-sprite-tiles-when-scaling-the-stage/
@@ -130,6 +134,12 @@ ready(() => {
antialias: true
});
+ /**
+ * setup gsap
+ */
+ PixiPlugin.registerPIXI(PIXI);
+ gsap.registerPlugin(PixiPlugin);
+
// Stop execution when not active
window.addEventListener("visibilitychange", () => {
if (document.hidden) {
@@ -1407,6 +1417,12 @@ ready(() => {
buttonFilter.addEventListener("click", () => {
l9.filters = [filter];
});
+
+ buttonPosition.addEventListener("click", () => {
+ console.log(image.position);
+ console.log(image.scale);
+ image.emit("imagePositionAndZoom", -1422.0572377748729, -3730.9273366592206, 3.829528337960849, 3.829528337960849);
+ });
//</editor-fold>
// TODO rename
diff --git a/src/lib/elements/images/MedsurfSprite.ts b/src/lib/elements/images/MedsurfSprite.ts
index 4d00f0b4f310f85ce2a0b21d248678b4f2d0992c..3667ddfa0ff2224b008455b8bd4b04cff4300a6a 100644
--- a/src/lib/elements/images/MedsurfSprite.ts
+++ b/src/lib/elements/images/MedsurfSprite.ts
@@ -4,6 +4,7 @@ import * as MedsurfDraw from "../../public-api";
import {BaseSprite} from "../../bases/elements/BaseSprite";
import {BaseGenerator} from "../../bases/generators/BaseGenerator";
import {BaseDrawGenerator} from "../../bases/generators/BaseDrawGenerator";
+import {gsap} from "gsap";
export enum ImageTypes {
NORMAL,
@@ -81,6 +82,9 @@ export class MedsurfSprite extends BaseSprite {
protected readonly _buttonSizeAspect: number = 24;
protected readonly _buttonTextAspect: number = 2.2;
+ protected readonly _positionChangeDuration: number = 1;
+ protected readonly _zoomChangeDuration: number = 1;
+
/**
* Constructor
* @param renderer
@@ -222,6 +226,7 @@ export class MedsurfSprite extends BaseSprite {
this.on("markerButton", this._onMarkerButton, this);
this.on("legendButton", this._onLegendButton, this);
+ this.on("imagePositionAndZoom", this._onSetPositionAndZoom, this);
this.on("itemDelete", this._itemDelete, this);
// TODO get correct mode from parent ??? or from here ???
@@ -246,6 +251,7 @@ export class MedsurfSprite extends BaseSprite {
this.off("markerButton", this._onMarkerButton, this);
this.off("legendButton", this._onLegendButton, this);
+ this.off("imagePositionAndZoom", this._onSetPositionAndZoom, this);
this.off("itemDelete", this._itemDelete, this);
});
@@ -865,6 +871,13 @@ export class MedsurfSprite extends BaseSprite {
}
//</editor-fold>
+ //<editor-fold desc="Move and Zoom">
+ protected _onSetPositionAndZoom(pX: number, pY: number, zX: number, zY: number): void {
+ this._onSetPosition(pX, pY);
+ this._onSetZoom(zX, zY);
+ }
+ //</editor-fold>
+
//<editor-fold desc="Move">
protected _onMove(event: PIXI.interaction.InteractionEvent, dX: number, dY: number): void {
event.stopPropagation();
@@ -914,6 +927,16 @@ export class MedsurfSprite extends BaseSprite {
this.setVisibleElements();
}
+
+ protected _onSetPosition(x: number, y: number): void {
+ gsap.to(this, {
+ duration: this._positionChangeDuration,
+ pixi: {
+ positionX: x,
+ positionY: y,
+ },
+ });
+ }
//</editor-fold>
//<editor-fold desc="Zoom">
@@ -962,6 +985,16 @@ export class MedsurfSprite extends BaseSprite {
// Emit
this.emit("imageZoom", event, x, y, factor);
}
+
+ protected _onSetZoom(x: number, y: number): void {
+ gsap.to(this, {
+ duration: this._zoomChangeDuration,
+ pixi: {
+ scaleX: x,
+ scaleY: y,
+ },
+ });
+ }
//</editor-fold>
//<editor-fold desc="Select">
@@ -1160,6 +1193,7 @@ export class MedsurfSprite extends BaseSprite {
}
}
//</editor-fold>
+
//</editor-fold>
//<editor-fold desc="BaseSprite">
diff --git a/src/public/index.html b/src/public/index.html
index b9e85de1c88d873ae836eaf81eb057dbd203291c..f0fbeb873875b769bcff70f931d0f97f35847fa7 100644
--- a/src/public/index.html
+++ b/src/public/index.html
@@ -364,6 +364,7 @@
<button id="button_model">Model</button>
<button id="button_change">Change Image</button>
<button id="button_filter">Apply Filter</button>
+ <button id="button_position">Position</button>
<!--
<div id="mouse" style="display: block;"><i class="fas fa-mouse-pointer" style="padding-left: 7px; padding-top: 6px;"></i></div>
<div id="select2" style="display: block;"><i class="fas fa-expand"></i></div>
diff --git a/webpack.js b/webpack.js
index 4894e1d361a4408c783f6680f7830f1514cc1e6c..8cc4dcea3bc816ee573e12c5726786b709478bb1 100644
--- a/webpack.js
+++ b/webpack.js
@@ -57,7 +57,7 @@ module.exports = {
}
}),
new webpack.ProvidePlugin({
- PIXI: 'pixi.js'
+ PIXI: 'pixi.js-legacy'
}),
],
node: {