{"remainingRequest":"/Users/sandermoolin/.nvm/versions/node/v10.19.0/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/sandermoolin/misc/vue-phenomenon/src/VuePhenomenon.vue?vue&type=style&index=0&lang=scss&","dependencies":[{"path":"/Users/sandermoolin/misc/vue-phenomenon/src/VuePhenomenon.vue","mtime":1601065390250},{"path":"/Users/sandermoolin/.nvm/versions/node/v10.19.0/lib/node_modules/@vue/cli-service-global/node_modules/css-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/sandermoolin/.nvm/versions/node/v10.19.0/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/Users/sandermoolin/.nvm/versions/node/v10.19.0/lib/node_modules/@vue/cli-service-global/node_modules/postcss-loader/src/index.js","mtime":499162500000},{"path":"/Users/sandermoolin/misc/vue-phenomenon/node_modules/sass-loader/lib/loader.js","mtime":1533139052000},{"path":"/Users/sandermoolin/.nvm/versions/node/v10.19.0/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/sandermoolin/.nvm/versions/node/v10.19.0/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCi52dWUtcGhlbm9tZW5vbiB7CiAgICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgICB0b3A6IDA7CiAgICByaWdodDogMDsKICAgIGJvdHRvbTogMDsKICAgIGxlZnQ6IDA7CiAgICB3aWR0aDogMTAwJTsKICAgIGhlaWdodDogMTAwJTsKCiAgICBjYW52YXMgewogICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICAgICAgICB0b3A6IDA7CiAgICAgICAgcmlnaHQ6IDA7CiAgICAgICAgYm90dG9tOiAwOwogICAgICAgIGxlZnQ6IDA7CiAgICAgICAgd2lkdGg6IDEwMCU7CiAgICAgICAgaGVpZ2h0OiAxMDAlOwogICAgfQp9Cg=="},{"version":3,"sources":["VuePhenomenon.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"VuePhenomenon.vue","sourceRoot":"../src","sourcesContent":["<template>\n    <section class=\"vue-phenomenon\">\n        <canvas ref=\"canvas\" />\n        <slot name=\"vertex\" />\n        <slot name=\"fragment\" />\n    </section>\n</template>\n\n<script>\nimport get from 'lodash/get'\n\nexport default {\n    props: {\n        options: { type: Object, default: () => {} },\n        instances: { type: Array, default: () => [] },\n        allowAlpha: { type: Boolean, default: true },\n    },\n    data() {\n        return {\n            phenom: null,\n            addedKeys: [],\n        }\n    },\n    async mounted() {\n        if (!window) return\n\n        if (!window.Phenomenon) {\n            window.Phenomenon = (await import('phenomenon')).default\n        }\n\n        const opts = this.options || {}\n\n        this.phenom = new window.Phenomenon({\n            canvas: this.$refs.canvas,\n            ...opts,\n\n            context: {\n                ...(opts.context || {}),\n            },\n\n            settings: {\n                devicePixelRatio: window.devicePixelRatio,\n                ...(opts.settings || {}),\n            },\n        })\n\n        // add transparency\n        if (this.allowAlpha) {\n            this.phenom.gl.enable(this.phenom.gl.BLEND)\n            this.phenom.gl.blendFunc(\n                this.phenom.gl.SRC_ALPHA,\n                this.phenom.gl.ONE_MINUS_SRC_ALPHA\n            )\n        }\n\n        // done mounting phenomenon\n        this.$emit('initialized', this.phenom)\n\n        this.refreshInstances()\n    },\n    methods: {\n        refreshInstances() {\n            if (!this.phenom) {\n                // eslint-disable-next-line\n                console.warn('Phenomenon not initialized.')\n                return\n            }\n\n            // TODO: hard refresh\n            // if (hardRefresh) {\n            // }\n\n            for (let instance of this.instances) {\n                // already added, ignore\n                if (this.addedKeys.includes(instance.key)) {\n                    continue\n                }\n\n                const vertex =\n                    get(instance, 'settings.vertex', null) ||\n                    get(this.$slots, 'vertex[0].children[0].text', '')\n                const fragment =\n                    get(instance, 'settings.fragment', null) ||\n                    get(this.$slots, 'fragment[0].children[0].text', '')\n\n                const args = [\n                    instance.key,\n                    {\n                        vertex,\n                        fragment,\n                        ...instance.settings,\n                    },\n                ]\n                this.phenom.add(...args)\n\n                this.$emit('added', args)\n            }\n        },\n    },\n}\n</script>\n\n<style lang=\"scss\">\n.vue-phenomenon {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n\n    canvas {\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n    }\n}\n</style>\n"]}]}