From 71e5ce8b8ec16cd8700926be06b09ac9639db440 Mon Sep 17 00:00:00 2001 From: Sebastian Kupke Date: Tue, 17 Sep 2019 15:14:57 +0200 Subject: [PATCH 1/2] Fixed button bug with area interaction. --- dist/iwmlib.js | 20 ++++---------------- dist/iwmlib.pixi.js | 10 ++++++---- lib/pixi/button.js | 8 ++++---- lib/pixi/index.html | 3 ++- 4 files changed, 16 insertions(+), 25 deletions(-) diff --git a/dist/iwmlib.js b/dist/iwmlib.js index 023690d..6348c2b 100644 --- a/dist/iwmlib.js +++ b/dist/iwmlib.js @@ -2631,6 +2631,7 @@ tapDistance = 10, longPressTime = 500.0, useCapture = true, + capturePointerEvents = true, mouseWheelElement = null, logInteractionsAbove = 12 } = {} @@ -2638,6 +2639,7 @@ super(element, target, { tapDistance, useCapture, + capturePointerEvents, longPressTime, mouseWheelElement }); @@ -3911,7 +3913,7 @@ */ constructor( element, - { stopEvents = 'auto', claimEvents = true, useCapture = true, touchAction = 'none', debugCanvas = null } = {} + { stopEvents = 'auto', claimEvents = true, useCapture = true, capturePointerEvents = true, touchAction = 'none', debugCanvas = null } = {} ) { this.onCapture = null; this.element = element; @@ -3936,6 +3938,7 @@ this.scatter = new Map(); this.delegate = new InteractionMapper$1(element, this, { useCapture, + capturePointerEvents, mouseWheelElement: window }); @@ -10962,21 +10965,6 @@ } speak() { - /** - * This is a little bit ugly, but imho the most elegant of all dirty solutions. - * - 5ht * Within the plugins we have no knowledge of other cards and such. But must differentiate the - * clicks by their corresponding owner. The SpeechUtterance just takes a text and has no knowledge - * about the node that is currently read to the user. - * - * This means, that we can identify same text, but not differentiate same text on different nodes. - * To account for that, we add the node to the speechSynthesis object (#benefitsOfJavaScript) and - * have access to the node, by - let's say - expanding the functionality of the SpeechSynthesis object. - * - * SO -17.07.19 - */ - - let activeNode = window.speechSynthesis['speechPluginNode']; this._updateText(); } diff --git a/dist/iwmlib.pixi.js b/dist/iwmlib.pixi.js index d94ce43..8cd7bd8 100644 --- a/dist/iwmlib.pixi.js +++ b/dist/iwmlib.pixi.js @@ -2862,10 +2862,10 @@ * @return {Button} A reference to the button for chaining. */ hide() { - this.opts.strokeAlpha = 0; - this.opts.strokeActiveAlpha = 0; - this.opts.fillAlpha = 0; - this.opts.fillActiveAlpha = 0; + this.opts.strokeAlpha = 0.0; + this.opts.strokeActiveAlpha = 0.0; + this.opts.fillAlpha = 0.0000000001; // WORKAROUND: See https://github.com/pixijs/pixi.js/wiki/v5-Migration-Guide#graphics-interaction + this.opts.fillActiveAlpha = 0.0000000001; this.layout(); @@ -6260,6 +6260,7 @@ tapDistance = 10, longPressTime = 500.0, useCapture = true, + capturePointerEvents = true, mouseWheelElement = null, logInteractionsAbove = 12 } = {} @@ -6267,6 +6268,7 @@ super(element, target, { tapDistance, useCapture, + capturePointerEvents, longPressTime, mouseWheelElement }); diff --git a/lib/pixi/button.js b/lib/pixi/button.js index 1212677..a454e86 100644 --- a/lib/pixi/button.js +++ b/lib/pixi/button.js @@ -632,10 +632,10 @@ export default class Button extends PIXI.Container { * @return {Button} A reference to the button for chaining. */ hide() { - this.opts.strokeAlpha = 0 - this.opts.strokeActiveAlpha = 0 - this.opts.fillAlpha = 0 - this.opts.fillActiveAlpha = 0 + this.opts.strokeAlpha = 0.0 + this.opts.strokeActiveAlpha = 0.0 + this.opts.fillAlpha = 0.0000000001 // WORKAROUND: See https://github.com/pixijs/pixi.js/wiki/v5-Migration-Guide#graphics-interaction + this.opts.fillActiveAlpha = 0.0000000001 this.layout() diff --git a/lib/pixi/index.html b/lib/pixi/index.html index 0e8cfcc..7a106e5 100644 --- a/lib/pixi/index.html +++ b/lib/pixi/index.html @@ -51,7 +51,8 @@ const index = new Index(itemTemplate, [ ['Flip Effect', 'flipeffect.html'], ['Blur Filter', 'blurfilter.html'], ['Text', 'text.html'], - ['Scrollview', 'scrollview.html'] + ['Scrollview', 'scrollview.html'], + ['Stylus', 'stylus.html'] ], null) index.load() From 0e5be56dfeb4c1fca17849d0c749b1da7317658e Mon Sep 17 00:00:00 2001 From: Uwe Oestermeier Date: Wed, 18 Sep 2019 16:43:01 +0200 Subject: [PATCH 2/2] Fixed stylus line width problem. --- dist/iwmlib.js | 15 +++++++++++++++ dist/iwmlib.pixi.js | 10 ++++++++-- lib/pixi/stylus.js | 8 +++++++- 3 files changed, 30 insertions(+), 3 deletions(-) diff --git a/dist/iwmlib.js b/dist/iwmlib.js index 6348c2b..12cfc9c 100644 --- a/dist/iwmlib.js +++ b/dist/iwmlib.js @@ -10965,6 +10965,21 @@ } speak() { + /** + * This is a little bit ugly, but imho the most elegant of all dirty solutions. + * + 5ht * Within the plugins we have no knowledge of other cards and such. But must differentiate the + * clicks by their corresponding owner. The SpeechUtterance just takes a text and has no knowledge + * about the node that is currently read to the user. + * + * This means, that we can identify same text, but not differentiate same text on different nodes. + * To account for that, we add the node to the speechSynthesis object (#benefitsOfJavaScript) and + * have access to the node, by - let's say - expanding the functionality of the SpeechSynthesis object. + * + * SO -17.07.19 + */ + + let activeNode = window.speechSynthesis['speechPluginNode']; this._updateText(); } diff --git a/dist/iwmlib.pixi.js b/dist/iwmlib.pixi.js index 8cd7bd8..97faea3 100644 --- a/dist/iwmlib.pixi.js +++ b/dist/iwmlib.pixi.js @@ -14604,7 +14604,7 @@ } tiltToLineWidth(value) { - return Math.round(Math.abs(value / 10) + 1) + return 16 // Math.round(Math.abs(value / 10) + 1) } drawStroke(stroke) { @@ -14612,9 +14612,15 @@ let start = stroke[0]; this.beginFill(0, 0); this.moveTo(start.x, start.y); + let lineWidth = this.tiltToLineWidth(start.tiltY); + this.lineStyle(lineWidth, start.color, this.colorAlpha); for (let i = 1; i < stroke.length; i++) { let info = stroke[i]; - this.lineStyle(this.tiltToLineWidth(info.tiltY), info.color, this.colorAlpha); + let lw = this.tiltToLineWidth(info.tiltY); + if (lw != lineWidth) { + lineWidth = lw; + this.lineStyle(lineWidth, info.color, this.colorAlpha); + } this.lineTo(info.x, info.y); } this.endFill(); diff --git a/lib/pixi/stylus.js b/lib/pixi/stylus.js index 7a5c118..62b0693 100755 --- a/lib/pixi/stylus.js +++ b/lib/pixi/stylus.js @@ -305,9 +305,15 @@ export default class Stylus extends PIXI.Graphics { let start = stroke[0] this.beginFill(0, 0) this.moveTo(start.x, start.y) + let lineWidth = this.tiltToLineWidth(start.tiltY) + this.lineStyle(lineWidth, start.color, this.colorAlpha) for (let i = 1; i < stroke.length; i++) { let info = stroke[i] - this.lineStyle(this.tiltToLineWidth(info.tiltY), info.color, this.colorAlpha) + let lw = this.tiltToLineWidth(info.tiltY) + if (lw != lineWidth) { + lineWidth = lw + this.lineStyle(lineWidth, info.color, this.colorAlpha) + } this.lineTo(info.x, info.y) } this.endFill()