iwmlib/lib/pixi/flipeffect.js

import { CardLoader, DOMFlip } 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
    }

    unscaledSize() {
        let displayObject = this.scatter.displayObject
        let w = displayObject.width
        let h = displayObject.height
        return [w / displayObject.scale.x, h / displayObject.scale.y]
    }

    scaledSize() {
        let displayObject = this.scatter.displayObject
        let w = displayObject.width
        let h = displayObject.height
        return [w, h]
    }

    cloneScatterImage() {
        let w = this.scatter.width
        let h = this.scatter.height
        let isSprite = this.scatter.displayObject instanceof PIXI.Sprite
        let isDeepZoom = this.scatter.displayObject instanceof DeepZoomImage
        let resolution = app.renderer.resolution
        if (isSprite) {
            w = this.scatter.displayObject.texture.width
            h = this.scatter.displayObject.texture.height
        } else if (isDeepZoom) {
            let [ww, hh] = this.scatter.displayObject.baseSize
            w = ww
            h = hh
        }
        if (globalScatterLoaderCanvas === null) {
            globalScatterLoaderCanvas = document.createElement('canvas')
        }
        let canvas = globalScatterLoaderCanvas
        canvas.width = w
        canvas.height = h
        let renderer = new PIXI.Renderer({
            width: w,
            height: h,
            view: canvas,
            resolution: resolution,
        })

        let displayObject = this.scatter.displayObject
        let x = displayObject.x
        let y = displayObject.y
        let rot = displayObject.rotation
        let sx = displayObject.scale.x
        let sy = displayObject.scale.y
        displayObject.rotation = 0
        // The Safari WebGLRenderer wants everything flipped
        // See https://github.com/pixijs/pixi.js/issues/2283
        displayObject.x = 0
        if (Capabilities.isSafari) {
            displayObject.y = h
            displayObject.scale.set(1, -1) // sx, -sy)
        } else {
            displayObject.y = 0
            displayObject.scale.set(1, 1)
        }
        if (isSprite) {
            displayObject.width = w
            displayObject.height = h
        }
        renderer.render(displayObject)
        displayObject.rotation = rot
        displayObject.x = x
        displayObject.y = y
        displayObject.scale.set(sx, sy)

        let url = canvas.toDataURL()
        return [x, y, w, h, url]
    }

    load(domNode) {
        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 [x, y, w, h, cloneURL] = this.cloneScatterImage()
            let [ww, hh] = this.unscaledSize()
            image.onload = (e) => {
                if (!isImage) domNode.appendChild(image)
                this.x = x
                this.y = y
                this.wantedWidth = ww
                this.wantedHeight = hh
                this.scale = 1
                this.rotation = this.scatter.rotation
                resolve(this)
            }
            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.setupInfoButton()
    }

    startFlip() {
        let center = this.flipCenter()
        let loader = this.backLoader
        this.domFlip.load().then((domFlip) => {
            this.scatter.displayObject.visible = false
            domFlip.centerAt(center)
            domFlip.zoom(this.scatter.scale)
            let target = this.constraintFlipCenter(center, loader)
            domFlip.start({ targetCenter: target })
        })
    }

    unscaledSize() {
        return this.scatterLoader.unscaledSize()
    }

    flipCenter() {
        let isSprite = this.scatter.displayObject instanceof PIXI.Sprite
        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 local = window.convertPointFromPageToNode(domNode, page.x, page.y)
        return local
    }

    constraintFlipCenter(center, loader) {
        let w = loader.wantedWidth
        let h = loader.wantedHeight
        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
        return { x, y }
    }

    setupInfoButton() {
        let iscale = 1.0 / this.scatter.scale
        this.infoBtn = new PIXI.Graphics()
        this.infoBtn.beginFill(0x333333)
        this.infoBtn.lineStyle(4, 0xffffff)
        this.infoBtn.drawCircle(0, 0, 22)
        this.infoBtn.endFill()

        this.infoBtn.beginFill(0xffffff)
        this.infoBtn.lineStyle(0)
        this.infoBtn.drawCircle(0, -8, 4)
        this.infoBtn.endFill()

        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.interactive = true
        this.infoBtn.width = 44
        this.infoBtn.height = 44
        this.infoBtn.pivot.x = 30
        this.infoBtn.pivot.y = 30

        let displayObject = this.scatter.displayObject
        let [w, h] = this.unscaledSize()
        this.infoBtn.position = new PIXI.Point(w, h)
        if (displayObject.foreground) {
            this.infoBtn.scale.x = iscale
            this.infoBtn.scale.y = iscale
            displayObject.foreground.addChild(this.infoBtn)
        } else {
            displayObject.addChild(this.infoBtn)
        }

        this.scatter.addTransformEventCallback((e) => {
            let displayObject = this.scatter.displayObject
            if (displayObject.foreground) {
                if (e.scale) {
                    let iscale = 1.0 / e.scale
                    this.infoBtn.scale.x = iscale
                    this.infoBtn.scale.y = iscale
                }
            }
        })
    }

    setupButton(url) {
        let svgImage = new Image()
        let canvas = document.createElement('canvas')
        canvas.width = 88 * 4
        canvas.height = 44 * 4
        svgImage.onload = (e) => {
            let displayObject = this.scatter.displayObject
            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 {
                displayObject.addChild(this.infoBtn)
            }
            this.infoBtn.scale.set(0.5, 0.5)

            let [w, h] = this.unscaledSize()
            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()
            })
        }
        svgImage.src = url
    }

    infoSelected() {
        this.startFlip()
    }

    backSelected() {
        this.domFlip.start()
    }

    backCardClosed() {
        /*** The flip effect should now be in it's initial state again. All
        memory should be freed. ***/
        let displayObject = this.scatter.displayObject
        displayObject.visible = true
        this.domFlip.fadeOutAndRemove()
        this.flipped = false
    }

    targetRotation(alpha) {
        let ortho = 90
        let rest = alpha % ortho
        let delta = 0.0
        if (rest > ortho / 2.0) {
            delta = ortho - rest
        } else {
            delta = -rest
        }
        return delta
    }
}