IWMBrowser/iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Prettified all files.

Browse Source
This commit is contained in:
Sebastian Kupke
2019-07-18 12:26:39 +02:00
parent 7744b92771
commit 2d400a18ec
125 changed files with 11184 additions and 8154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/pixi/stylus.js
+57 -47
View File
@@ -4,7 +4,6 @@ import Events from '../events.js'
import { Angle } from '../utils.js'
class StylusCommand extends Object {
constructor() {
super()
}
@@ -23,7 +22,6 @@ class StylusCommand extends Object {
}
class StrokeCommand extends StylusCommand {
constructor(stroke) {
super()
this.stroke = stroke
@@ -50,7 +48,6 @@ class StrokeCommand extends StylusCommand {
}
class ClearCommand extends StylusCommand {
do(stylus) {
// Clears the command stack
stylus.commandStack = []
@@ -71,20 +68,20 @@ class ClearCommand extends StylusCommand {
}
}
export default class Stylus extends PIXI.Graphics {
constructor({ width = window.innerWidth,
constructor({
width = window.innerWidth,
height = window.innerHeight,
interactive = true,
color = 0x000000,
tiltX = 0,
tiltY = 0,
backgroundAlpha = 1,
backgroundFill = 0xFFFFFF,
backgroundFill = 0xffffff,
colorAlpha = 1,
captureEvents = true,
acceptMouseEvents = true } = {}) {
acceptMouseEvents = true
} = {}) {
super()
this.activePointers = 0
this.wantedWidth = width
@@ -95,16 +92,15 @@ export default class Stylus extends PIXI.Graphics {
this.color = color
this.interactive = interactive
this.debug = false
this.tiltX = tiltX // degrees -90 ... 90
this.tiltY = tiltY // degrees -90 ... 90
this.tiltX = tiltX // degrees -90 ... 90
this.tiltY = tiltY // degrees -90 ... 90
this.captureEvents = captureEvents
this.commandStack = []
this.undoCommandStack = []
this.strokes = []
this.stroke = []
this.minStrokeLength = 4
if (captureEvents)
this.registerEventHandler(acceptMouseEvents)
if (captureEvents) this.registerEventHandler(acceptMouseEvents)
this.drawBackground()
}
@@ -121,9 +117,12 @@ export default class Stylus extends PIXI.Graphics {
isStylusPointer(event) {
let identifier = event.data.identifier
if (typeof (event.data.originalEvent.changedTouches) !== 'undefined') {
if (typeof event.data.originalEvent.changedTouches !== 'undefined') {
for (let touch of event.data.originalEvent.changedTouches) {
if (touch.identifier === identifier && touch.touchType === 'stylus') {
if (
touch.identifier === identifier &&
touch.touchType === 'stylus'
) {
this.tiltX = Angle.radian2degree(touch.azimuthAngle)
this.tiltY = 90.0 - Angle.radian2degree(touch.altitudeAngle)
return true
@@ -141,9 +140,12 @@ export default class Stylus extends PIXI.Graphics {
isStylusTouch(event) {
let identifier = event.data.identifier
if (typeof (event.data.originalEvent.changedTouches) !== 'undefined') {
if (typeof event.data.originalEvent.changedTouches !== 'undefined') {
for (let touch of event.data.originalEvent.changedTouches) {
if (touch.identifier === identifier && touch.pointerType === 'touch') {
if (
touch.identifier === identifier &&
touch.pointerType === 'touch'
) {
return true
}
}
@@ -165,25 +167,26 @@ export default class Stylus extends PIXI.Graphics {
}
registerEventHandler() {
window.addEventListener('keydown', (e) => {
window.addEventListener('keydown', e => {
switch (e.keyCode) {
case 38: // up arrow
this.tiltX += 5
break
case 40: // down arrow
this.tiltX -= 5
break
case 37: // left arrow
this.tiltY -= 5
break
case 39: // right arrow
this.tiltY += 5
break
case 38: // up arrow
this.tiltX += 5
break
case 40: // down arrow
this.tiltX -= 5
break
case 37: // left arrow
this.tiltY -= 5
break
case 39: // right arrow
this.tiltY += 5
break
}
if (this.debug) console.log('keydown', e.keyCode, this.tiltX, this.tiltY)
if (this.debug)
console.log('keydown', e.keyCode, this.tiltX, this.tiltY)
})
this.on('pointerdown', (e) => {
this.on('pointerdown', e => {
if (this.debug) console.log('pointerdown', e)
if (this.eventInside(e)) {
this.activePointers += 1
@@ -193,14 +196,19 @@ export default class Stylus extends PIXI.Graphics {
}
})
this.on('pointermove', (e) => {
if (Events.isPointerDown(e.data.originalEvent) || this.isStylusPointer(e) || this.isStylusTouch(e)) {
if (this.debug) console.log('pointermove', e, this.eventInside(e))
this.on('pointermove', e => {
if (
Events.isPointerDown(e.data.originalEvent) ||
this.isStylusPointer(e) ||
this.isStylusTouch(e)
) {
if (this.debug)
console.log('pointermove', e, this.eventInside(e))
if (this.eventInside(e) && this.singlePointer())
this.moveStroke(this.toStroke(e))
}
})
this.on('pointerup', (e) => {
this.on('pointerup', e => {
if (this.eventInside(e)) {
if (this.activePointers > 0) {
this.activePointers -= 1
@@ -209,13 +217,13 @@ export default class Stylus extends PIXI.Graphics {
}
if (this.debug) console.log('pointerup', this.activePointers)
})
this.on('pointerleave', (e) => {
this.on('pointerleave', e => {
if (this.activePointers > 0) {
this.activePointers -= 1
}
this.endStroke(this.toStroke(e))
})
this.on('pointercancel', (e) => {
this.on('pointercancel', e => {
if (this.activePointers > 0) {
this.activePointers -= 1
}
@@ -246,7 +254,6 @@ export default class Stylus extends PIXI.Graphics {
}
eventInside(event) {
let local = this.toLocal(event.data.global)
for (let child of this.children) {
let r = child.getBounds()
@@ -255,10 +262,8 @@ export default class Stylus extends PIXI.Graphics {
return false
}
}
if (local.x < 0 || local.x > this.wantedWidth)
return false
if (local.y < 0 || local.y > this.wantedHeight)
return false
if (local.x < 0 || local.x > this.wantedWidth) return false
if (local.y < 0 || local.y > this.wantedHeight) return false
event.stopPropagation()
// if (this.debug) console.log('stopPropagation', event)
if (event.data.originalEvent.claimedByScatter) {
@@ -276,9 +281,11 @@ export default class Stylus extends PIXI.Graphics {
let x = Math.max(0, Math.min(local.x, this.wantedWidth))
let y = Math.max(0, Math.min(local.y, this.wantedHeight))
let desc = {
x, y,
x,
y,
pressure: event.pressure || null,
tiltX: this.tiltX, tiltY: this.tiltY,
tiltX: this.tiltX,
tiltY: this.tiltY,
color: this.color
}
return desc
@@ -313,8 +320,11 @@ export default class Stylus extends PIXI.Graphics {
this.moveTo(start.x, start.y)
for (let i = 1; i < stroke.length; i++) {
let info = stroke[i]
this.lineStyle(this.tiltToLineWidth(info.tiltY),
info.color, this.colorAlpha)
this.lineStyle(
this.tiltToLineWidth(info.tiltY),
info.color,
this.colorAlpha
)
this.lineTo(info.x, info.y)
}
this.endFill()
@@ -329,7 +339,7 @@ export default class Stylus extends PIXI.Graphics {
drawStrokes() {
this.drawBackground()
this.lineStyle(1.0, 0xFF0000, 1)
this.lineStyle(1.0, 0xff0000, 1)
for (let stroke of this.iterStrokes()) {
this.drawStroke(stroke)
}