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