diff --git a/package-lock.json b/package-lock.json
index 1c66dc8c7d5cffa211e8c16a52af286f2687825c..ae570e17f5f63d3382b31f938f87307b14b7d2bd 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 fbbbe0ff7e528094ba0849c5442663a82ab5bad3..794c4d6976b76766540cf704611eeec9a87dc1bd 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 b58361d3004cc0d4086ffe6b339a532538a66cf1..01c379e4c3325bf995435ffdf51db2bfcc7a0819 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 b91587f17d33bcec5634f19632d5ae82192af33a..93e5a54d11d759806187fcebbe5bcc5d75221d90 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 44458e21a1502cb3bcf4a798f186e1472ab3368f..740660977e9e9846c765f8c1739eaaf4b0b8979f 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 749409460ed0959dc2d437556575a72ec3d6bb91..63b6ab5b880e6fb57b5de172863f3eef8617439e 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 3137864e53e74475c394a91a657246793d021f42..b583251836f87fd8da3672cdb16c28e261a93811 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 7cb8a7a1ea9b042b6609f839a0bb43eb68c0c279..60e6a3d8189bda3cd340b2adc5d2655360899b50 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 cf67ef15e52b3e7aa6ecaf9dbac93c9ec0a36b23..82e6eb2c572b51acde056aa1251bba7e9ecec5bc 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 eaf3888f8b30cbbee71da05061b7831262cd2db0..a2d3dff0c4fc436e325234918fcc807f9a65dfe1 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 8270fb4bc7128069a790b7c6428180078a30d971..376c1ac85bf6cb72474867f3bdfa2f216ed026d9 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 281cf6022ddf239689953d8b61bdd900f39394f8..d1bae3dac48f3bf602e5392b4711fca5bc4f3607 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 8e841ee3a41dc5f5de39833199c31cf6a1284671..768cce08ab13e8b1124eba09fb679741dcfc053d 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 a41e36eaad3a3769e27b8c5034f0d6f0ceae9c20..bd312be71841c1cb17a6ca65151325673b5c2485 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({