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/flipeffect.js
+60 -58
View File
@@ -1,13 +1,12 @@
import {getId, Angle} from '../utils.js'
import {DOMScatter} from '../scatter.js'
import {CardLoader, DOMFlip, DOMFlippable} from '../flippable.js'
import {Capabilities} from '../capabilities.js'
import {DeepZoomImage} from './deepzoom/image.js'
import { getId, Angle } from '../utils.js'
import { DOMScatter } from '../scatter.js'
import { CardLoader, DOMFlip, DOMFlippable } from '../flippable.js'
import { Capabilities } from '../capabilities.js'
import { DeepZoomImage } from './deepzoom/image.js'
let globalScatterLoaderCanvas = null
export class ScatterLoader extends CardLoader {
get scatter() {
return this.src
}
@@ -35,8 +34,7 @@ export class ScatterLoader extends CardLoader {
if (isSprite) {
w = this.scatter.displayObject.texture.width
h = this.scatter.displayObject.texture.height
}
else if (isDeepZoom) {
} else if (isDeepZoom) {
let [ww, hh] = this.scatter.displayObject.baseSize
w = ww
h = hh
@@ -48,8 +46,9 @@ export class ScatterLoader extends CardLoader {
canvas.width = w
canvas.height = h
let renderer = new PIXI.WebGLRenderer(w, h, {
view: canvas,
resolution: resolution})
view: canvas,
resolution: resolution
})
let displayObject = this.scatter.displayObject
let x = displayObject.x
@@ -64,8 +63,7 @@ export class ScatterLoader extends CardLoader {
if (Capabilities.isSafari) {
displayObject.y = h
displayObject.scale.set(1, -1) // sx, -sy)
}
else {
} else {
displayObject.y = 0
displayObject.scale.set(1, 1)
}
@@ -87,12 +85,11 @@ export class ScatterLoader extends CardLoader {
return new Promise((resolve, reject) => {
let isImage = domNode instanceof HTMLImageElement
let isSprite = this.scatter.displayObject instanceof PIXI.Sprite
let image = (isImage) ? domNode : document.createElement("img")
let image = isImage ? domNode : document.createElement('img')
let [x, y, w, h, cloneURL] = this.cloneScatterImage()
let [ww, hh] = this.unscaledSize()
image.onload = (e) => {
if (!isImage)
domNode.appendChild(image)
image.onload = e => {
if (!isImage) domNode.appendChild(image)
this.x = x
this.y = y
this.wantedWidth = ww
@@ -101,40 +98,42 @@ export class ScatterLoader extends CardLoader {
this.rotation = this.scatter.rotation
resolve(this)
}
image.onerror = (e) => {
image.onerror = e => {
reject(this)
}
image.src = cloneURL
})
})
}
}
export default class FlipEffect {
constructor(scatter, domScatterContainer, flipTemplate, backLoader) {
this.flipped = false
this.scatter = scatter
this.backLoader = backLoader
this.scatterLoader = new ScatterLoader(scatter)
this.domFlip = new DOMFlip(domScatterContainer, flipTemplate,
this.scatterLoader,
backLoader, {
onBack: this.backCardClosed.bind(this)
})
this.domFlip = new DOMFlip(
domScatterContainer,
flipTemplate,
this.scatterLoader,
backLoader,
{
onBack: this.backCardClosed.bind(this)
}
)
this.setupInfoButton()
}
startFlip() {
let center = this.flipCenter()
let loader = this.backLoader
this.domFlip.load().then((domFlip) => {
this.domFlip.load().then(domFlip => {
this.scatter.displayObject.visible = false
domFlip.centerAt(center)
domFlip.zoom(this.scatter.scale)
let target = this.constraintFlipCenter(center, loader)
console.log("FlipEffect.startFlip", target, loader)
domFlip.start({targetCenter: target})
console.log('FlipEffect.startFlip', target, loader)
domFlip.start({ targetCenter: target })
})
}
@@ -144,13 +143,15 @@ export default class FlipEffect {
flipCenter() {
let isSprite = this.scatter.displayObject instanceof PIXI.Sprite
let resolution = (isSprite) ? app.renderer.resolution : 1
let resolution = isSprite ? app.renderer.resolution : 1
let center = this.scatter.center
let canvas = app.renderer.view
let domNode = this.domFlip.domScatterContainer.element
let page = window.convertPointFromNodeToPage(canvas,
center.x*resolution,
center.y*resolution)
let page = window.convertPointFromNodeToPage(
canvas,
center.x * resolution,
center.y * resolution
)
let local = window.convertPointFromPageToNode(domNode, page.x, page.y)
return local
}
@@ -158,18 +159,14 @@ export default class FlipEffect {
constraintFlipCenter(center, loader) {
let w = loader.wantedWidth
let h = loader.wantedHeight
console.log("constraintFlipCenter", w, h)
console.log('constraintFlipCenter', w, h)
let canvas = app.renderer.view
let x = center.x
let y = center.y
if (x < w/2)
x = w/2
if (y < h/2)
y = h/2
if (x > canvas.width)
x = canvas.width - w/2
if (y > canvas.height)
y = canvas.height - h/2
if (x < w / 2) x = w / 2
if (y < h / 2) y = h / 2
if (x > canvas.width) x = canvas.width - w / 2
if (y > canvas.height) y = canvas.height - h / 2
return { x, y }
}
@@ -177,22 +174,26 @@ export default class FlipEffect {
let iscale = 1.0 / this.scatter.scale
this.infoBtn = new PIXI.Graphics()
this.infoBtn.beginFill(0x333333)
this.infoBtn.lineStyle(4, 0xFFFFFF)
this.infoBtn.lineStyle(4, 0xffffff)
this.infoBtn.drawCircle(0, 0, 22)
this.infoBtn.endFill()
this.infoBtn.beginFill(0xFFFFFF)
this.infoBtn.beginFill(0xffffff)
this.infoBtn.lineStyle(0)
this.infoBtn.drawCircle(0, -8, 4)
this.infoBtn.endFill()
this.infoBtn.lineStyle(6, 0xFFFFFF)
this.infoBtn.lineStyle(6, 0xffffff)
this.infoBtn.moveTo(0, -2)
this.infoBtn.lineTo(0, 14)
this.infoBtn.endFill()
this.infoBtn.on('click', (e) => { this.infoSelected() })
this.infoBtn.on('tap', (e) => { this.infoSelected() })
this.infoBtn.on('click', e => {
this.infoSelected()
})
this.infoBtn.on('tap', e => {
this.infoSelected()
})
this.infoBtn.interactive = true
this.infoBtn.width = 44
@@ -207,8 +208,7 @@ export default class FlipEffect {
this.infoBtn.scale.x = iscale
this.infoBtn.scale.y = iscale
displayObject.foreground.addChild(this.infoBtn)
}
else {
} else {
displayObject.addChild(this.infoBtn)
}
@@ -231,15 +231,15 @@ export default class FlipEffect {
canvas.height = 44 * 4
svgImage.onload = e => {
let displayObject = this.scatter.displayObject
canvas.getContext ('2d').drawImage(svgImage, 0, 0,
canvas.width, canvas.height)
canvas
.getContext('2d')
.drawImage(svgImage, 0, 0, canvas.width, canvas.height)
let texure = new PIXI.Texture(new PIXI.BaseTexture(canvas))
this.infoBtn = new PIXI.Sprite(texure)
this.infoBtn.anchor.set(0.5, 0.5)
if (displayObject.foreground) {
displayObject.foreground.addChild(this.infoBtn)
}
else {
} else {
displayObject.addChild(this.infoBtn)
}
this.infoBtn.scale.set(0.5, 0.5)
@@ -248,8 +248,12 @@ export default class FlipEffect {
this.infoBtn.position = new PIXI.Point(w, h)
this.infoBtn.interactive = true
this.infoBtn.updateTransform()
this.infoBtn.on('click', (e) => { this.infoSelected() })
this.infoBtn.on('tap', (e) => { this.infoSelected() })
this.infoBtn.on('click', e => {
this.infoSelected()
})
this.infoBtn.on('tap', e => {
this.infoSelected()
})
}
svgImage.src = url
}
@@ -275,13 +279,11 @@ export default class FlipEffect {
let ortho = 90
let rest = alpha % ortho
let delta = 0.0
if (rest > (ortho / 2.0)) {
if (rest > ortho / 2.0) {
delta = ortho - rest
}
else {
} else {
delta = -rest
}
return delta
}
}