From f392ed141ee90caf4079fbc01078fc9ee86d1a0f Mon Sep 17 00:00:00 2001
From: Andrea Gottsponer <ago@attr.ch>
Date: Sun, 2 Oct 2022 11:53:34 +0200
Subject: [PATCH] - performance updates
---
package-lock.json | 19 +++++++++-
package.json | 1 +
src/app/index.ts | 38 +++++++++++++++++--
src/lib/elements/basics/Arrow.ts | 4 ++
src/lib/elements/basics/Circle.ts | 13 ++++++-
src/lib/elements/basics/Ellipse.ts | 13 ++++++-
src/lib/elements/basics/Killbox.ts | 4 ++
src/lib/elements/basics/Rectangle.ts | 4 ++
.../buttons/IndexedRoundButtonMaskElement.ts | 4 ++
.../buttons/RoundButtonIndicatorElement.ts | 6 +--
.../elements/connections/LineControlPoint.ts | 4 ++
src/lib/elements/connections/LineCorner.ts | 4 ++
.../controls/MultiSelectItemElement.ts | 1 -
src/lib/elements/images/Image.ts | 1 +
14 files changed, 102 insertions(+), 14 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 1c66dc8c..ae570e17 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "medsurf-draw",
- "version": "1.0.234",
+ "version": "1.0.238",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "medsurf-draw",
- "version": "1.0.234",
+ "version": "1.0.238",
"license": "MIT",
"dependencies": {
"@ascii-dev-user/medsurf-lib": "^1.18.0-144",
@@ -15,6 +15,7 @@
"debounce": "^1.2.1",
"gsap": "^3.6.0",
"nom-events": "^1.0.1",
+ "pixi-cull": "^2.2.0",
"pixi.js-keyboard": "1.0.9",
"pixi.js-legacy": "^6.2.2",
"uuid": "^8.3.2",
@@ -7840,6 +7841,14 @@
"node": ">=0.10.0"
}
},
+ "node_modules/pixi-cull": {
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/pixi-cull/-/pixi-cull-2.2.0.tgz",
+ "integrity": "sha512-Ngg9GbflBemRm2ASI3lqnMtARYJUx8n+71XzQzG8jexHVadnNZ/mdqYBUcdIpUITk5P5LW5tCJFn0QWgYMYeFw==",
+ "peerDependencies": {
+ "pixi.js": "^6.0.0"
+ }
+ },
"node_modules/pixi.js": {
"version": "6.2.2",
"resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-6.2.2.tgz",
@@ -18220,6 +18229,12 @@
"pinkie": "^2.0.0"
}
},
+ "pixi-cull": {
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/pixi-cull/-/pixi-cull-2.2.0.tgz",
+ "integrity": "sha512-Ngg9GbflBemRm2ASI3lqnMtARYJUx8n+71XzQzG8jexHVadnNZ/mdqYBUcdIpUITk5P5LW5tCJFn0QWgYMYeFw==",
+ "requires": {}
+ },
"pixi.js": {
"version": "6.2.2",
"resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-6.2.2.tgz",
diff --git a/package.json b/package.json
index fbbbe0ff..794c4d69 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
"debounce": "^1.2.1",
"gsap": "^3.6.0",
"nom-events": "^1.0.1",
+ "pixi-cull": "^2.2.0",
"pixi.js-keyboard": "1.0.9",
"pixi.js-legacy": "^6.2.2",
"uuid": "^8.3.2",
diff --git a/src/app/index.ts b/src/app/index.ts
index b58361d3..01c379e4 100644
--- a/src/app/index.ts
+++ b/src/app/index.ts
@@ -6,6 +6,7 @@ import * as Models from '@ascii-dev-user/medsurf-lib/models';
import { gsap } from 'gsap';
// @ts-ignore TODO ignore
import { PixiPlugin } from 'gsap/PixiPlugin.js';
+import { Simple, SpatialHash } from "pixi-cull"
/* TODO
+++
@@ -25,6 +26,7 @@ import { PixiPlugin } from 'gsap/PixiPlugin.js';
- Selftest selcet interaction available -> WHY?
- Speicherfehler
- Menu verschiebung auf LayerGruppe when Schrift angepasst wird (How to???)
+ Context menu schrift sowie anzeige nicht ok.
Interactions anpassen; siehe dazu CloneInteraction -> kann einfacher so umgesetzt werden (Scale auf Draw nicht mehr notwendig; ausbauen) -> Test: Move events in Draw / Copy / Selection Generator
Verpixelung ??? -> grössere Schrift
Create Behaviour/Interaction -> to eliminate/clean up the elements
@@ -425,6 +427,10 @@ async function setupImage() {
window["sprite"] = image;
//</editor-fold>
+ // Start app
+ app.stage.emit("setDefaultMode", "default");
+ app.stage.interactive = true;
+
return Promise.resolve();
}
@@ -1245,7 +1251,7 @@ ready(() => {
loader.load(async (loader: PIXI.Loader, resources: any) => {
//<editor-fold desc="PIXI">
PIXI.settings.PRECISION_FRAGMENT = PIXI.PRECISION.HIGH;
- PIXI.settings.FAIL_IF_MAJOR_PERFORMANCE_CAVEAT = false;
+ // PIXI.settings.FAIL_IF_MAJOR_PERFORMANCE_CAVEAT = false;
// PIXI.settings.ROUND_PIXELS = true;
app = new PIXI.Application({
@@ -1291,6 +1297,11 @@ ready(() => {
/**
* setup cull
*/
+ /*
+ const cull = new Simple() // new SpatialHash()
+ cull.addList(image.children)
+ cull.cull(image.getVisibleBounds())
+ */
/* TODO * /
const cull = new PixiCull.Cull({ recursive: true, toggle: 'renderable' });
cull.add(app.stage);
@@ -1319,6 +1330,7 @@ ready(() => {
//<editor-fold desc="App Ticker">
PIXI.Ticker.shared.add(() => { MedsurfDraw.Keyboard.update(); });
+ // PIXI.Ticker.shared.add(() => { cull.cull(image.getVisibleBounds()) });
// app.ticker.add(() => { MedsurfDraw.Keyboard.update(); });
// app.ticker.add(() => { Keyboard.update(); });
/*
@@ -1468,9 +1480,26 @@ buttonVirtualPointer.addEventListener("click", () => {
virtualPointer.rectangle = new PIXI.Rectangle(canvas.width / 2, canvas.height / 2, size / 10, size / 16);
virtualPointer.draw();
- virtualPointer.visible = !virtualPointer.visible;
+ virtualPointer.toggleItem();
});
buttonTest.addEventListener("click", () => {
+ // TEST Fill
+ const test = new PIXI.Graphics();
+ test.name = "test_fill";
+ test.clear();
+ test.beginFill(0xff0000, 0.3);
+ test.drawCircle(0, 0, 30);
+ test.endFill();
+ test.position.set(300, 500);
+ // container
+ /*
+ const container = new PIXI.Container();
+ container.position.set(image.position.x, image.position.y);
+ container.addChild(test);
+ */
+ // stage
+ app.stage.addChild(test);
+
/* Fill polygon test
const test = new PIXI.Graphics();
@@ -1482,7 +1511,7 @@ buttonTest.addEventListener("click", () => {
// Add Middle point
// line1-5; fillLine; realLine1
- (elementsArray['line1'] as MedsurfDraw.Line).onButtonAddMiddlePoint(image, layerGroupsArray['layerGroupModel1']);
+ // (elementsArray['line1'] as MedsurfDraw.Line).onButtonAddMiddlePoint(image, layerGroupsArray['layerGroupModel1']);
// (elementsArray['fillLine'] as MedsurfDraw.Line).onButtonAddMiddlePoint(image);
// (elementsArray['realLine1'] as MedsurfDraw.Line).onButtonAddMiddlePoint(image, layerGroupsArray['realLayerGroup1']);
@@ -1714,9 +1743,10 @@ buttonTest.addEventListener("click", () => {
/** /
// Default
- // generator.once('startGenerator', _startGenerator, this); // NOT FOR CLONING; TODO layerGroup testing
+ generator.once('startGenerator', _startGenerator, this); // NOT FOR CLONING; TODO layerGroup testing
generator.once('endGenerator', generator.endGenerator, generator);
generator.once('abortGenerator', generator.abortGenerator, generator);
+ /**/
// TODO remove
/*
diff --git a/src/lib/elements/basics/Arrow.ts b/src/lib/elements/basics/Arrow.ts
index b91587f1..93e5a54d 100644
--- a/src/lib/elements/basics/Arrow.ts
+++ b/src/lib/elements/basics/Arrow.ts
@@ -45,6 +45,8 @@ export class Arrow extends BaseGraphics<ArrowModel> {
return;
}
+ // this.cacheAsBitmap = false;
+
this.clear();
// Setup polygon
@@ -64,6 +66,8 @@ export class Arrow extends BaseGraphics<ArrowModel> {
}
this.drawPolygon(polygon);
this.endFill();
+
+ // this.cacheAsBitmap = true;
}
//<editor-fold desc="Getter and Setter">
diff --git a/src/lib/elements/basics/Circle.ts b/src/lib/elements/basics/Circle.ts
index 44458e21..74066097 100644
--- a/src/lib/elements/basics/Circle.ts
+++ b/src/lib/elements/basics/Circle.ts
@@ -44,17 +44,26 @@ export class Circle extends BaseGraphics<CircleModel> {
return;
}
+ this.cacheAsBitmap = false;
+
this.clear();
+ // Get scale
+ const scale = this.getImage().scale;
+
// Draw circle
if (this.options.hasLine) {
- this.lineStyle(this.lineWidth || 0, this.options.lineColor, this.options.lineAlpha, 1);
+ this.lineStyle((this.lineWidth || 1) * scale.x, this.options.lineColor, this.options.lineAlpha, 1);
}
if (this.options.hasFill) {
this.beginFill(this.options.fillColor, this.options.fillAlpha);
}
- this.drawCircle(this.circle.x, this.circle.y, this.circle.radius);
+ this.drawCircle(this.circle.x, this.circle.y, this.circle.radius * scale.x);
this.endFill();
+
+ this.scale.set(1 / scale.x, 1 / scale.y);
+
+ this.cacheAsBitmap = true;
}
//<editor-fold desc="Getter and Setter">
diff --git a/src/lib/elements/basics/Ellipse.ts b/src/lib/elements/basics/Ellipse.ts
index 74940946..63b6ab5b 100644
--- a/src/lib/elements/basics/Ellipse.ts
+++ b/src/lib/elements/basics/Ellipse.ts
@@ -44,17 +44,26 @@ export class Ellipse extends BaseGraphics<EllipseModel> {
return;
}
+ this.cacheAsBitmap = false;
+
this.clear();
+ // Get scale
+ const scale = this.getImage().scale;
+
// Draw ellipse
if (this.options.hasLine) {
- this.lineStyle(this.lineWidth || 0, this.options.lineColor, this.options.lineAlpha, 1);
+ this.lineStyle((this.lineWidth || 1) * scale.x, this.options.lineColor, this.options.lineAlpha, 1);
}
if (this.options.hasFill) {
this.beginFill(this.options.fillColor, this.options.fillAlpha);
}
- this.drawEllipse(this.ellipse.x, this.ellipse.y, this.ellipse.width, this.ellipse.height);
+ this.drawEllipse(this.ellipse.x, this.ellipse.y, this.ellipse.width * scale.x, this.ellipse.height * scale.y);
this.endFill();
+
+ this.scale.set(1 / scale.x, 1 / scale.y);
+
+ this.cacheAsBitmap = true;
}
//<editor-fold desc="Getter and Setter">
diff --git a/src/lib/elements/basics/Killbox.ts b/src/lib/elements/basics/Killbox.ts
index 3137864e..b5832518 100644
--- a/src/lib/elements/basics/Killbox.ts
+++ b/src/lib/elements/basics/Killbox.ts
@@ -47,6 +47,8 @@ export class Killbox extends BaseContainer<KillboxModel> {
* Draw
*/
public draw(): void {
+ this.cacheAsBitmap = false;
+
// Elements
// -- Killbox element
this._killboxElement.clear();
@@ -81,6 +83,8 @@ export class Killbox extends BaseContainer<KillboxModel> {
this._killboxElement.lineTo(this.rectangle.x + this.rectangle.width, this.rectangle.y + this.rectangle.height - Design.selftestElement.gab);
this._killboxElement.endFill();
+
+ this.cacheAsBitmap = true;
}
/**
diff --git a/src/lib/elements/basics/Rectangle.ts b/src/lib/elements/basics/Rectangle.ts
index 7cb8a7a1..60e6a3d8 100644
--- a/src/lib/elements/basics/Rectangle.ts
+++ b/src/lib/elements/basics/Rectangle.ts
@@ -44,6 +44,8 @@ export class Rectangle extends BaseGraphics<RectangleModel> {
return;
}
+ this.cacheAsBitmap = false;
+
this.clear();
// Draw rectangle
@@ -55,6 +57,8 @@ export class Rectangle extends BaseGraphics<RectangleModel> {
}
this.drawRect(this.rectangle.x, this.rectangle.y, this.rectangle.width, this.rectangle.height);
this.endFill();
+
+ this.cacheAsBitmap = true;
}
//<editor-fold desc="Getter and Setter">
diff --git a/src/lib/elements/buttons/IndexedRoundButtonMaskElement.ts b/src/lib/elements/buttons/IndexedRoundButtonMaskElement.ts
index cf67ef15..82e6eb2c 100644
--- a/src/lib/elements/buttons/IndexedRoundButtonMaskElement.ts
+++ b/src/lib/elements/buttons/IndexedRoundButtonMaskElement.ts
@@ -44,6 +44,8 @@ export class IndexedRoundButtonMaskElement extends BaseGraphics<IndexedRoundButt
return;
}
+ this.cacheAsBitmap = false;
+
this.clear();
/*
@@ -71,6 +73,8 @@ export class IndexedRoundButtonMaskElement extends BaseGraphics<IndexedRoundButt
new PIXI.Point(this.textRectangle.x, this.textRectangle.y + this.textRectangle.height), // 6
]);
this.endFill();
+
+ this.cacheAsBitmap = true;
}
/**
diff --git a/src/lib/elements/buttons/RoundButtonIndicatorElement.ts b/src/lib/elements/buttons/RoundButtonIndicatorElement.ts
index eaf3888f..a2d3dff0 100644
--- a/src/lib/elements/buttons/RoundButtonIndicatorElement.ts
+++ b/src/lib/elements/buttons/RoundButtonIndicatorElement.ts
@@ -2,12 +2,12 @@ import * as PIXI from "pixi.js-legacy";
import * as Models from "@ascii-dev-user/medsurf-lib/models";
import * as MedsurfDraw from "../../public-api";
import {Design} from "../../config/design";
-import {BaseGraphics, BaseGraphicsModel} from "../../bases/elements/BaseGraphics";
+import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
/**
* Round button indicator element model
*/
-export class RoundButtonIndicatorElementModel extends BaseGraphicsModel {
+export class RoundButtonIndicatorElementModel extends BaseContainerModel {
circle?: PIXI.Circle;
options?: Models.ElementOptions;
lineWidth?: number;
@@ -16,7 +16,7 @@ export class RoundButtonIndicatorElementModel extends BaseGraphicsModel {
/**
* Round button indicator element
*/
-export class RoundButtonIndicatorElement extends BaseGraphics<RoundButtonIndicatorElementModel> {
+export class RoundButtonIndicatorElement extends BaseContainer<RoundButtonIndicatorElementModel> {
/**
* Elements
*/
diff --git a/src/lib/elements/connections/LineControlPoint.ts b/src/lib/elements/connections/LineControlPoint.ts
index 8270fb4b..376c1ac8 100644
--- a/src/lib/elements/connections/LineControlPoint.ts
+++ b/src/lib/elements/connections/LineControlPoint.ts
@@ -45,6 +45,8 @@ export class LineControlPoint extends BaseGraphics<LineControlPointModel> {
return;
}
+ this.cacheAsBitmap = false;
+
this.clear();
if (!(this.points instanceof QuadraticCurvePointsModel || this.points instanceof BezierLinePointsModel)) {
@@ -76,6 +78,8 @@ export class LineControlPoint extends BaseGraphics<LineControlPointModel> {
this.lineTo(this.points.end.x, this.points.end.y);
this.endFill();
}
+
+ this.cacheAsBitmap = true;
}
//<editor-fold desc="Getter and Setter">
diff --git a/src/lib/elements/connections/LineCorner.ts b/src/lib/elements/connections/LineCorner.ts
index 281cf602..d1bae3da 100644
--- a/src/lib/elements/connections/LineCorner.ts
+++ b/src/lib/elements/connections/LineCorner.ts
@@ -44,6 +44,8 @@ export class LineCorner extends BaseGraphics<LineCornerModel> {
return;
}
+ this.cacheAsBitmap = false;
+
this.clear();
// Draw corner
@@ -55,6 +57,8 @@ export class LineCorner extends BaseGraphics<LineCornerModel> {
this.endFill();
}
+
+ this.cacheAsBitmap = true;
}
//<editor-fold desc="Getter and Setter">
diff --git a/src/lib/elements/controls/MultiSelectItemElement.ts b/src/lib/elements/controls/MultiSelectItemElement.ts
index 8e841ee3..768cce08 100644
--- a/src/lib/elements/controls/MultiSelectItemElement.ts
+++ b/src/lib/elements/controls/MultiSelectItemElement.ts
@@ -2,7 +2,6 @@ import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
import {Design} from "../../config/design";
-import {debounce} from "debounce";
/**
* Multi select item model
diff --git a/src/lib/elements/images/Image.ts b/src/lib/elements/images/Image.ts
index a41e36ea..bd312be7 100644
--- a/src/lib/elements/images/Image.ts
+++ b/src/lib/elements/images/Image.ts
@@ -256,6 +256,7 @@ export class Image extends BaseContainer<ImageModel> {
this._imageObjectMenuElement = new MedsurfDraw.MenuElement({
menuElements: undefined
});
+ // TODO oho
this.addChild(this._imageObjectMenuElement);
// -- Grouping menu element
this._groupingMenuElement = new MedsurfDraw.MenuElement({
--
GitLab