From e6d0f69200e613259ddfa0e764d4ca1714c40517 Mon Sep 17 00:00:00 2001
From: Andrea Gottsponer <ago@attr.ch>
Date: Tue, 28 Jan 2020 16:26:36 +0100
Subject: [PATCH] - 1.0.19

---
 package-lock.json                             |  2 +-
 package.json                                  |  2 +-
 src/app/index.ts                              | 29 +++++---
 src/lib/elements/connections/Line.ts          |  4 +-
 src/lib/elements/primitives/ArrowPrimitive.ts | 24 +++---
 src/lib/generators/LineGenerator.ts           | 22 +++++-
 src/public/index.html                         | 74 ++++++++++++++++++-
 7 files changed, 126 insertions(+), 31 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b1247a82..24f209cd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "medsurf-draw",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index e5737220..ebed15d5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "medsurf-draw",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "description": "Draw annotations on jpg/zoomify images, based on PIXI.js",
   "keywords": [
     "draw",
diff --git a/src/app/index.ts b/src/app/index.ts
index a8099011..ab90274a 100644
--- a/src/app/index.ts
+++ b/src/app/index.ts
@@ -22,6 +22,7 @@ const buttonMarker = document.getElementById("button_marker") as HTMLButtonEleme
 const buttonSelftest = document.getElementById("button_selftest") as HTMLButtonElement;
 const buttonAuthor = document.getElementById("button_author") as HTMLButtonElement;
 const buttonChange = document.getElementById("button_change") as HTMLButtonElement;
+const buttonFilter = document.getElementById("button_filter") as HTMLButtonElement;
 
 // TODO CANVASRENDERER has gaps between Tiles
 //  https://www.html5gamedevs.com/topic/27366-gaps-between-sprite-tiles-when-scaling-the-stage/
@@ -39,10 +40,12 @@ PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
 // SHADER
 // @ts-ignore
 const vertexSrc = document.getElementById("vertex_dotted_line").text;
+// const vertexSrc = document.getElementById("vertex_linedashed").text;
 // @ts-ignore
 const fragmentSrc = document.getElementById("fragment_dotted_line").text;
+// const fragmentSrc = document.getElementById("fragment_linedashed").text;
 // TODO uniforms
-const filter = new PIXI.Filter(vertexSrc, fragmentSrc, {totalSize: 5.0, dashSize: 2.0});
+const filter = new PIXI.Filter(vertexSrc, fragmentSrc, {totalSize: 5.0, dashSize: 2.0, scale: 1.0, lineDistance: 10.0});
 
 /* TODO check out this -> at the moment it fallbacks to the canvas renderer :<
 const bla = PIXI.BatchPluginFactory.create({ vertex: vertexSrc, fragment: fragmentSrc });
@@ -237,10 +240,10 @@ PIXI.Renderer.registerPlugin('bla', bla);
 
             // IMAGES
             // BaseSprite
-            // let image = new MedsurfSprite(app.renderer, canvas, PIXI.Texture.from("https://api.medsurf.stage.iml.unibe.ch/v1/file/slides/3893/image/1500x1514_80_eaaa24fd-e69e-491e-b576-fccab29c85a2.jpg"));
+            // let image = new MedsurfSprite(app.renderer, canvas, PIXI.Texture.from("https://api.medsurf.preview.iml.unibe.ch/v1/file/slides/3893/image/1500x1514_80_eaaa24fd-e69e-491e-b576-fccab29c85a2.jpg"));
             // let image = new MedsurfSprite(app.renderer, canvas, PIXI.Texture.from("http://localhost:3000/v1/file/slide/2701,2701/image/1800x1800_80.jpeg"));
             // Tile BaseSprite
-            let image = new MedsurfTileSprite(app.renderer, canvas, 5800, "https://api.medsurf.stage.iml.unibe.ch:443/v1/file/slide/5800/image/", imageWidth, 20512);
+            let image = new MedsurfTileSprite(app.renderer, canvas, 5800, "https://api.medsurf.preview.iml.unibe.ch:443/v1/file/slide/5800/image/", imageWidth, 20512);
             // Video
             // let image = new MedsurfSprite(app.renderer, canvas, PIXI.Texture.from("./assets/juldem.mp4"), 1920);
 
@@ -261,7 +264,7 @@ PIXI.Renderer.registerPlugin('bla', bla);
                 image.destroy();
 
                 setTimeout(() => {
-                    image = new MedsurfTileSprite(app.renderer, canvas, 5802, "https://api.medsurf.stage.iml.unibe.ch:443/v1/file/slide/5802/image/", 19992, 15832);
+                    image = new MedsurfTileSprite(app.renderer, canvas, 5802, "https://api.medsurf.preview.iml.unibe.ch:443/v1/file/slide/5802/image/", 19992, 15832);
                     app.stage.addChild(image);
 
                     let navigator = new ImageNavigatorElement(app.renderer, canvas, image);
@@ -301,9 +304,11 @@ PIXI.Renderer.registerPlugin('bla', bla);
                     20 / imageWidth,
                     20 / imageWidth
                 ),
-                strokeWidth: 1 / imageWidth,
+                strokeWidth: 5 / imageWidth,
+                dash: 2,
                 options: {
-                    hasLine: false,
+                    hasLine: true,
+                    lineColor: 0x00FF00,
                     hasFill: true,
                     fillColor: 0xFF0000,
                 }
@@ -726,7 +731,7 @@ PIXI.Renderer.registerPlugin('bla', bla);
                 // @ts-ignore
                 end: p10.model.id,
                 isBezier: true,
-                strokeWidth: 1 / imageWidth,
+                strokeWidth: 4 / imageWidth,
                 options: {
                     hasLine: true,
                     lineColor: 0xFF0000,
@@ -734,6 +739,7 @@ PIXI.Renderer.registerPlugin('bla', bla);
                 }
             }, imageWidth);
             image.addChild(l9);
+            l9.filters = [filter];
 
             const l10 = new Line({
                 id: 'l10',
@@ -778,14 +784,15 @@ PIXI.Renderer.registerPlugin('bla', bla);
                 // @ts-ignore
                 end: p1.model.id,
                 isBezier: false,
-                strokeWidth: 1 / imageWidth,
+                strokeWidth: 3 / imageWidth,
                 options: {
                     hasLine: true,
-                    lineColor: 0xFF0000,
+                    lineColor: 0xAC65FF,
                     hasFill: false,
                 }
             }, imageWidth);
             image.addChild(l12);
+            // TODO l12.filters = [filter];
 
 
             const fill1 = new FillCollection({
@@ -964,6 +971,10 @@ PIXI.Renderer.registerPlugin('bla', bla);
             bline5.filters = [filter];
             */
 
+            buttonFilter.addEventListener("click", () => {
+                l9.filters = [filter];
+            });
+
             // TODO rename
             image.sortChildren();
             image.emit("stage-ready");
diff --git a/src/lib/elements/connections/Line.ts b/src/lib/elements/connections/Line.ts
index 55379477..4a33b7f4 100644
--- a/src/lib/elements/connections/Line.ts
+++ b/src/lib/elements/connections/Line.ts
@@ -1204,7 +1204,7 @@ export class Line extends BaseElementContainer<Models.Line> {
             // @ts-ignore
             end: positionPointNew.model.id,
             isBezier: this.model.isBezier,
-            strokeWidth: this._strokeWidthDefault / this.imageWidth,
+            strokeWidth: this._strokeWidth / this.imageWidth,
             options: {
                 hasLine: true,
                 lineColor: this.model.options.lineColor,
@@ -1223,7 +1223,7 @@ export class Line extends BaseElementContainer<Models.Line> {
             // @ts-ignore
             end: this.graphicLine.end.model.id,
             isBezier: this.model.isBezier,
-            strokeWidth: this._strokeWidthDefault / this.imageWidth,
+            strokeWidth: this._strokeWidth / this.imageWidth,
             options: {
                 hasLine: true,
                 lineColor: this.model.options.lineColor,
diff --git a/src/lib/elements/primitives/ArrowPrimitive.ts b/src/lib/elements/primitives/ArrowPrimitive.ts
index e3435472..565d5f1f 100644
--- a/src/lib/elements/primitives/ArrowPrimitive.ts
+++ b/src/lib/elements/primitives/ArrowPrimitive.ts
@@ -294,6 +294,14 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive>
 
     //<editor-fold desc="Public functions">
     public draw(): void {
+        const polygon: PIXI.Point[] = [
+            new PIXI.Point(this._rectangle.x, this._rectangle.y + this._rectangle.height / 2),
+            new PIXI.Point(this._rectangle.x + this._rectangle.width, this._rectangle.y),
+            new PIXI.Point(this._wedgePointElement.position.x, this._wedgePointElement.position.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 / 2),
+        ];
+
         this._arrowElement.clear();
         if (this.model.options.hasLine) {
             this._arrowElement.lineStyle(this._strokeWidth, this._lineColor, this._lineAlpha);
@@ -301,24 +309,12 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive>
         if (this.model.options.hasFill) {
             this._arrowElement.beginFill(this._fillColor, this._fillAlpha);
         }
-        this._arrowElement.drawPolygon([
-            new PIXI.Point(this._rectangle.x, this._rectangle.y + this._rectangle.height / 2),
-            new PIXI.Point(this._rectangle.x + this._rectangle.width, this._rectangle.y),
-            new PIXI.Point(this._wedgePointElement.position.x, this._wedgePointElement.position.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 / 2),
-        ]);
+        this._arrowElement.drawPolygon(polygon);
         this._arrowElement.endFill();
 
         // @ts-ignore
         // this._arrowElement.hitArea = new PIXI.Polygon(this._arrowElement.geometry.points);
-        this._arrowElement.hitArea = new PIXI.Polygon([
-            new PIXI.Point(this._rectangle.x, this._rectangle.y + this._rectangle.height / 2),
-            new PIXI.Point(this._rectangle.x + this._rectangle.width, this._rectangle.y),
-            new PIXI.Point(this._wedgePointElement.position.x, this._wedgePointElement.position.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 / 2),
-        ]);
+        this._arrowElement.hitArea = new PIXI.Polygon(polygon);
     }
 
     public cleanUp(): void {
diff --git a/src/lib/generators/LineGenerator.ts b/src/lib/generators/LineGenerator.ts
index 96fb848e..3283cdbb 100644
--- a/src/lib/generators/LineGenerator.ts
+++ b/src/lib/generators/LineGenerator.ts
@@ -11,6 +11,8 @@ export class LineGenerator extends BaseDrawGenerator {
      * Members
      */
     private _bezierCourve: boolean;
+    protected _strokeWidth: number;
+    protected _lineColor: number;
 
     /**
      * Generators
@@ -27,7 +29,7 @@ export class LineGenerator extends BaseDrawGenerator {
     /**
      * Design
      */
-    protected readonly _strokeWidth: number = 1;
+    protected readonly _strokeWidthDefault: number = 1;
     protected readonly _hasLineDefault: boolean = true;
     protected readonly _lineColorDefault: number = 0x000000;
     protected readonly _hasFillDefault: boolean = false;
@@ -49,12 +51,26 @@ export class LineGenerator extends BaseDrawGenerator {
         // Generators
         this._positionPointGeneratorStart = new PositionPointGenerator(this._targetElement, event, this.imageWidth, targetPositionPoint);
         if (this._positionPointGeneratorStart.isNew) {
+            // Setup defaults
+            this._strokeWidth = this._strokeWidthDefault;
+            this._lineColor = this._lineColorDefault;
+
+            // Events
             this._positionPointGeneratorStart.on("updatePoint", this._updatePointStart, this);
             this._positionPointGeneratorStart.on("endDraw", this._endDrawStart, this);
 
             // Set draw interaction
             this.drawInteraction = this._positionPointGeneratorStart.drawInteraction;
         } else {
+            const lines = this._positionPointGeneratorStart.targetPositionPoint.getLines();
+
+            // TODO more values
+            // Setup defaults
+            // @ts-ignore
+            this._strokeWidth = lines.map((line) => line._strokeWidth).reduce((a, b) => a > b ? a : b) || this._strokeWidthDefault;
+            // @ts-ignore
+            this._lineColor = lines.filter((line) => (line._strokeWidth === this._strokeWidth)).map((line) => line._lineColor)[0] || this._lineColorDefault;
+
             this._initEndPositionPointGenerator(event);
 
             // Set draw interaction
@@ -108,7 +124,7 @@ export class LineGenerator extends BaseDrawGenerator {
             strokeWidth: this._strokeWidth / this.imageWidth,
             options: {
                 hasLine: this._hasLineDefault,
-                lineColor: this._lineColorDefault,
+                lineColor: this._lineColor,
                 hasFill: this._hasFillDefault,
             }
         }, this.imageWidth);
@@ -182,7 +198,7 @@ export class LineGenerator extends BaseDrawGenerator {
             strokeWidth: this._strokeWidth / this.imageWidth,
             options: {
                 hasLine: this._hasLineDefault,
-                lineColor: this._lineColorDefault,
+                lineColor: this._lineColor,
                 hasFill: this._hasFillDefault,
             }
         }, this.imageWidth);
diff --git a/src/public/index.html b/src/public/index.html
index 98f69cb1..4c6e03d7 100644
--- a/src/public/index.html
+++ b/src/public/index.html
@@ -46,7 +46,8 @@
                 gl_Position = filterVertexPosition();
                 vTextureCoord = filterTextureCoord();
                 // vLineDistance = 60.0 * dot(vTextureCoord.x, vTextureCoord.y);
-                vLineDistance = 60.0 * vTextureCoord.x;
+                vLineDistance = 100.0 * dot(vTextureCoord.x, vTextureCoord.y);
+                // vLineDistance = 60.0 * vTextureCoord.x;
             }
         </script>
         <script id="fragment_dotted_line" type="x-shader">
@@ -66,6 +67,76 @@
                 gl_FragColor = texture2D(uSampler, vTextureCoord);
             }
         </script>
+        <script id="vertex_linedashed" type="x-shader">
+            // https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderLib/linedashed_vert.glsl.js
+            uniform float scale;
+            // uniform mat4 modelViewMatrix; // TODO
+            // uniform mat4 projectionMatrix; // TODO
+
+            uniform float lineDistance;
+            attribute vec3 position; // TODO
+
+            varying float vLineDistance;
+
+            /*
+            #include <common>
+            #include <color_pars_vertex>
+            #include <fog_pars_vertex>
+            #include <logdepthbuf_pars_vertex>
+            #include <clipping_planes_pars_vertex>
+            */
+
+            void main() {
+                // #include <color_vertex>
+                vLineDistance = scale * lineDistance;
+                vec4 mvPosition = /*modelViewMatrix * */vec4( position, 1.0 );
+                gl_Position = /*projectionMatrix * */mvPosition;
+                /*
+                #include <logdepthbuf_vertex>
+                #include <clipping_planes_vertex>
+                #include <fog_vertex>
+                */
+            }
+        </script>
+        <script id="fragment_linedashed" type="x-shader">
+            // https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderLib/linedashed_frag.glsl.js
+            uniform vec3 diffuse;
+            uniform float opacity;
+            uniform float dashSize;
+            uniform float totalSize;
+
+            varying float vLineDistance;
+
+            /*
+            #include <common>
+            #include <color_pars_fragment>
+            #include <fog_pars_fragment>
+            #include <logdepthbuf_pars_fragment>
+            #include <clipping_planes_pars_fragment>
+            */
+
+            void main() {
+                // #include <clipping_planes_fragment>
+                if ( mod( vLineDistance, totalSize ) > dashSize ) {
+                    discard;
+                }
+                vec3 outgoingLight = vec3( 0.0 );
+                vec4 diffuseColor = vec4( diffuse, opacity );
+                /*
+                #include <logdepthbuf_fragment>
+                #include <color_fragment>
+                */
+                outgoingLight = diffuseColor.rgb;
+                gl_FragColor = vec4( outgoingLight, diffuseColor.a );
+                /*
+                #include <premultiplied_alpha_fragment>
+                #include <tonemapping_fragment>
+                #include <encodings_fragment>
+                #include <fog_fragment>
+                */
+            }
+        </script>
+
         <!--
         <script id="dotted_line" type="shader">
             precision highp float;
@@ -280,6 +351,7 @@
         <button id="button_selftest">Selftest</button>
         <button id="button_author">Author</button>
         <button id="button_change">Change Image</button>
+        <button id="button_filter">Apply Filter</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>
-- 
GitLab