From db4bf3108326535c12854b5e567448f385c8386a Mon Sep 17 00:00:00 2001 From: mrmao Date: Tue, 9 May 2023 12:18:16 +0800 Subject: [PATCH 1/9] feat(renderer): support for custom component renderers --- .eslintrc | 5 +- playground/src/components/CursorSprite.vue | 48 +++---- src/elements/filter.ts | 22 +++ src/global.ts | 4 + src/renderer/index.ts | 151 +++++++++++++++------ src/renderer/props.ts | 8 +- src/renderer/utils.ts | 7 + 7 files changed, 170 insertions(+), 75 deletions(-) create mode 100644 src/elements/filter.ts create mode 100644 src/renderer/utils.ts diff --git a/.eslintrc b/.eslintrc index 09c2e42..f872f23 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,3 +1,6 @@ { - "extends": "@antfu" + "extends": "@antfu", + "rules": { + "vue/no-deprecated-html-element-is": "off" + } } diff --git a/playground/src/components/CursorSprite.vue b/playground/src/components/CursorSprite.vue index 549c3b7..e15462a 100644 --- a/playground/src/components/CursorSprite.vue +++ b/playground/src/components/CursorSprite.vue @@ -1,15 +1,8 @@ - diff --git a/src/elements/filter.ts b/src/elements/filter.ts new file mode 100644 index 0000000..4837e7a --- /dev/null +++ b/src/elements/filter.ts @@ -0,0 +1,22 @@ +import type { + ComponentCustomProps, + ComponentOptionsMixin, + DefineComponent, +} from 'vue-demi' + +export type Props = { is: (props: any) => T } & T + +export type PixiFilterComponent = DefineComponent< + Props, + {}, + unknown, + {}, + {}, + ComponentOptionsMixin, + ComponentOptionsMixin, + [], + string, + T & ComponentCustomProps, + Readonly>, + {} +> diff --git a/src/global.ts b/src/global.ts index 24e1e9c..25aa0e3 100644 --- a/src/global.ts +++ b/src/global.ts @@ -11,9 +11,13 @@ import type { PixiSpriteComponent } from './elements/sprite' import type { PixiBitmapTextComponent } from './elements/bitmapText' import '@vue/runtime-core' +import type { PixiFilterComponent } from './elements/filter' declare module '@vue/runtime-core' { export interface GlobalComponents { + Filter: PixiFilterComponent + PixiFilter: PixiFilterComponent + Container: PixiContainerComponent PixiContainer: PixiContainerComponent diff --git a/src/renderer/index.ts b/src/renderer/index.ts index e05075a..ce55f61 100644 --- a/src/renderer/index.ts +++ b/src/renderer/index.ts @@ -1,8 +1,10 @@ +import type { VNodeProps } from 'vue-demi' import { camelize, createRenderer, warn } from 'vue-demi' import { AnimatedSprite, BitmapText, Container, + Filter, Graphics, Mesh, NineSlicePlane, @@ -14,48 +16,79 @@ import { TilingSprite, } from 'pixi.js' import { patchProp } from './props' +import { normalizeTexture } from './utils' interface CreatePixiRendererOptions { prefix?: string } -const elements = { - Container, - Sprite, - Graphics, - Text, - BitmapText, - TilingSprite, - AnimatedSprite, - Mesh, - NineSlicePlane, - SimpleMesh, - SimplePlane, - SimpleRope, -} as Record Container> +export type PixiCustomElement = (props: (VNodeProps & { [key: string]: any }) | null) => any + +const elements: Record = { + Container: () => new Container(), + Sprite: () => new Sprite(), + Graphics: props => new Graphics(props?.geometry), + Text: props => new Text( + props?.text, + props?.style, + props?.canvas, + ), + BitmapText: props => new BitmapText( + props?.text, + props?.style, + ), + TilingSprite: props => new TilingSprite( + normalizeTexture(props!.texture), + props?.width, + props?.height, + ), + AnimatedSprite: props => new AnimatedSprite( + props!.textures, + props?.autoUpdate, + ), + Mesh: props => new Mesh( + props!.geometry, + props!.shader, + props?.state, + props?.drawMode, + ), + NineSlicePlane: props => new NineSlicePlane( + normalizeTexture(props!.texture), + props?.leftWidth, + props?.topHeight, + props?.rightWidth, + props?.bottomHeight, + ), + SimpleMesh: props => new SimpleMesh( + props?.texture ? normalizeTexture(props.texture) : undefined, + props?.vertices, + props?.uvs, + props?.indices, + props?.drawMode, + ), + SimplePlane: props => new SimplePlane( + normalizeTexture(props!.texture), + props?.verticesX, + props?.verticesY, + ), + SimpleRope: props => new SimpleRope( + normalizeTexture(props!.texture), + props?.points, + props?.textureScale, + ), +} export function createPixiRenderer(options: CreatePixiRendererOptions = {}) { const { prefix = 'pixi' } = options return createRenderer({ createElement: (name, _, __, props) => { - const Constructor = findConstructor(prefix, name) + const element = props?.is?.(props) || createPixiElement(prefix, name, props) - if (!Constructor) { - warn(`Unknown element ${name}`) - return new Container() - } + if (element instanceof Container) + element.filters = [] - switch (Constructor) { - case Graphics: - return new Constructor(props?.geometry) - case Text: - return new Constructor(props?.text, props?.style, props?.canvas) - case BitmapText: - return new Constructor(props?.text, props?.style) - default: - return new Constructor() - } + return element }, patchProp, @@ -65,16 +98,16 @@ export function createPixiRenderer(options: CreatePixiRendererOptions = {}) { createComment: () => new Container(), remove: child => child.destroy(), insert: (child, parent, anchor) => { - if (anchor) - parent.addChildAt(child, parent.getChildIndex(anchor)) + if (child instanceof Filter) + insertFilter(child, parent, anchor) else - parent.addChild(child) + insertContainer(child, parent, anchor) }, nextSibling: (node) => { - const index = node.parent.getChildIndex(node) - if (node.parent.children.length <= index + 1) - return null - return node.parent.getChildAt(index + 1) as Container ?? null + if (node instanceof Filter) + return nextSiblingFilter(node) + else + return nextSiblingContainer(node) }, setElementText: (node, text) => { node instanceof Text @@ -87,18 +120,54 @@ export function createPixiRenderer(options: CreatePixiRendererOptions = {}) { }) } -function findConstructor(prefix: string, name: string) { - let c +function createPixiElement(prefix: string, name: string, props: any) { + let is if (name.startsWith(prefix)) { name = camelize(name) - c = elements[name.slice(prefix.length)] + is = elements[name.slice(prefix.length)] } else { name = camelize(name) name = name.charAt(0).toUpperCase() + name.slice(1) - c = elements[name] + is = elements[name] + } + if (!is) { + warn(`Unknown element ${name}`) + return new Container() + } + return is(props) +} + +function insertContainer(child: Container, parent: Container, anchor?: Container | null) { + if (anchor) + parent.addChildAt(child, parent.getChildIndex(anchor)) + else + parent.addChild(child) +} + +function insertFilter(child: any, parent: Container, _anchor: any) { + function remove() { + const index = parent.filters!.indexOf(child) + if (index !== -1) + parent.filters?.splice(index, 1) } - return c as undefined | (new (...args: any) => Container) + child.parent = parent + child.destroy = remove + parent.filters!.push(child) +} + +function nextSiblingFilter(node: any) { + const index = node.parent.filters!.indexOf(node) + if (node.parent.filters!.length <= index + 1) + return null + return node +} + +function nextSiblingContainer(node: Container) { + const index = node.parent.getChildIndex(node) + if (node.parent.children.length <= index + 1) + return null + return node.parent.getChildAt(index + 1) as Container ?? null } export const { createApp, render } = createPixiRenderer() diff --git a/src/renderer/props.ts b/src/renderer/props.ts index 6a87c56..6d68cdf 100644 --- a/src/renderer/props.ts +++ b/src/renderer/props.ts @@ -8,10 +8,10 @@ import { Mesh, SimplePlane, Sprite, - Texture, TilingSprite, } from 'pixi.js' import { setPointNumber, setPointObject, setValueProp } from './setter' +import { normalizeTexture } from './utils' const defaultBooleanProps = ['accessible', 'cullable', 'renderable', 'visible'] as const const bitmapBooleanProps = ['dirty', 'roundPixels'] as const @@ -194,9 +194,3 @@ export function patchBooleanProps( } return false } - -export function normalizeTexture(value: Texture | string): Texture { - if (typeof value === 'string') - return Texture.from(value) - return value -} diff --git a/src/renderer/utils.ts b/src/renderer/utils.ts new file mode 100644 index 0000000..4d97dd3 --- /dev/null +++ b/src/renderer/utils.ts @@ -0,0 +1,7 @@ +import { Texture } from 'pixi.js' + +export function normalizeTexture(value: Texture | string): Texture { + if (typeof value === 'string') + return Texture.from(value) + return value +} From f7f257a70c6a28edc66ffdf71ae50dc81e2cb6a2 Mon Sep 17 00:00:00 2001 From: "Mr.Mao" <951416545@qq.com> Date: Tue, 9 May 2023 18:25:32 +0800 Subject: [PATCH 2/9] chore(docs): filters related documents --- README.md | 64 ++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 61 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 31c3aae..00cb588 100644 --- a/README.md +++ b/README.md @@ -14,12 +14,11 @@ pixi version

- ###### Features - 💚 Lightweight and flexible [Vue 3](https://vuejs.org/) library for creating [PixiJS](https://pixijs.com/) applications. - ✏️ Provides a [Custom Vue Renderer](https://vuejs.org/api/custom-renderer.html#custom-renderer-api) that creates PixiJS objects instead of HTML elements. -- 📦 Supports all PixiJS objects, such as `Container`, `Sprite`, `Graphics`, `Text`, etc +- 📦 Supports all PixiJS objects, such as `Filter`, `Container`, `Sprite`, `Graphics`, `Text`, etc - 🧑‍💻 Support specifying `texture` paths in templates to load texture objects - ✨ All [events](https://pixijs.download/release/docs/PIXI.Sprite.html#onclick) emitted by PixiJS objects are supported - 🗃️ Offers a [Assets](#assets) component for bundling assets. @@ -154,6 +153,66 @@ function draw(g: Graphics) { ``` +## Filter + +To use `filter`, you need to place the Filter tag under the `` that sets the filter. Currently, the following filters are supported by default: + +- [BlurFilter](https://pixijs.download/release/docs/PIXI.BlurFilter.html) +- [AlphaFilter](https://pixijs.download/release/docs/PIXI.AlphaFilter.html) +- [DisplacementFilter](https://pixijs.download/release/docs/PIXI.DisplacementFilter.html) +- [ColorMatrixFilter](https://pixijs.download/release/docs/PIXI.ColorMatrixFilter.html) +- [NoiseFilter](https://pixijs.download/release/docs/PIXI.NoiseFilter.html) +- [FXAAFilter](https://pixijs.download/release/docs/PIXI.FXAAFilter.html) + +Example of using `BlurFilter` with a Container: + +```html + + + + + +``` + +### Custom Filter + +To use other filters, you can use the is attribute of ``. For example, to use the `ShockwaveFilter` in [pixi-filters](https://github.com/pixijs/filters): + +```html + + + + + +``` + +## Namespaces + +To avoid conflicts with other tags, such as ``, you can use the `pixi-` prefix or capitalize the first letter with ``. + +```html + +``` + +> Other components also support the `pixi-` prefix, so you can choose according to your personal preference. + ## Assets `vue3-pixi-renderer` provides a special component for bundling resources and obtaining resources from plugins. @@ -236,7 +295,6 @@ onMounted(() => { ``` - ## Creating an pixi application manually Using the custom renderer inside `vue3-pixi-renderer` From f4af2b5ed7f786da0f7905500c4074b5442f16c3 Mon Sep 17 00:00:00 2001 From: "Mr.Mao" <951416545@qq.com> Date: Tue, 9 May 2023 18:27:01 +0800 Subject: [PATCH 3/9] chore(renderer): elements object separation --- src/elements/filter.ts | 26 ++++++--- src/renderer/elements.ts | 86 +++++++++++++++++++++++++++++ src/renderer/index.ts | 78 +++----------------------- src/renderer/{props.ts => patch.ts} | 0 4 files changed, 112 insertions(+), 78 deletions(-) create mode 100644 src/renderer/elements.ts rename src/renderer/{props.ts => patch.ts} (100%) diff --git a/src/elements/filter.ts b/src/elements/filter.ts index 4837e7a..8e2f236 100644 --- a/src/elements/filter.ts +++ b/src/elements/filter.ts @@ -2,21 +2,33 @@ import type { ComponentCustomProps, ComponentOptionsMixin, DefineComponent, + VNodeProps, } from 'vue-demi' +import type { AllowedFilterProps } from './props' -export type Props = { is: (props: any) => T } & T +interface Props { -export type PixiFilterComponent = DefineComponent< - Props, +} + +interface Events { + +} + +export type PixiFilterComponent = DefineComponent< + Props, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, - [], - string, - T & ComponentCustomProps, - Readonly>, + (keyof Events)[], + keyof Events, + VNodeProps & AllowedFilterProps & ComponentCustomProps, + Readonly & { + [key in keyof Events as `on${Capitalize}`]?: + | ((...args: Events[key]) => any) + | undefined; + }, {} > diff --git a/src/renderer/elements.ts b/src/renderer/elements.ts new file mode 100644 index 0000000..f3e6efa --- /dev/null +++ b/src/renderer/elements.ts @@ -0,0 +1,86 @@ +import type { VNodeProps } from 'vue-demi' +import { + AlphaFilter, + AnimatedSprite, + BitmapText, + BlurFilter, + ColorMatrixFilter, + Container, + DisplacementFilter, + FXAAFilter, + Graphics, + Mesh, + NineSlicePlane, + NoiseFilter, + SimpleMesh, + SimplePlane, + SimpleRope, + Sprite, + Text, + TilingSprite, +} from 'pixi.js' +import { normalizeTexture } from './utils' + +export type PixiCustomElement = (props: (VNodeProps & { [key: string]: any })) => any + +export const elements: Record = { + Container: () => new Container(), + Sprite: () => new Sprite(), + SimpleMesh: () => new SimpleMesh(), + Graphics: props => new Graphics(props?.geometry), + Text: props => new Text( + props.text, + props.style, + props.canvas, + ), + BitmapText: props => new BitmapText( + props.text, + props.style, + ), + TilingSprite: props => new TilingSprite( + normalizeTexture(props!.texture), + props.width, + props.height, + ), + AnimatedSprite: props => new AnimatedSprite( + props.textures, + props.autoUpdate, + ), + Mesh: props => new Mesh( + props.geometry, + props.shader, + props.state, + props.drawMode, + ), + NineSlicePlane: props => new NineSlicePlane( + normalizeTexture(props.texture), + ), + SimplePlane: props => new SimplePlane( + normalizeTexture(props.texture), + props.verticesX, + props.verticesY, + ), + SimpleRope: props => new SimpleRope( + normalizeTexture(props.texture), + props.points, + props.textureScale, + ), + BlurFilter: props => new BlurFilter( + props.strength, + props.quality, + props.resolution, + props.kernelSize, + ), + AlphaFilter: props => new AlphaFilter(props.alpha), + DisplacementFilter: props => new DisplacementFilter( + props.sprite, + props.scale, + ), + ColorMatrixFilter: () => new ColorMatrixFilter(), + NoiseFilter: props => new NoiseFilter( + props.noise, + props.seed, + ), + FXAAFilter: () => new FXAAFilter(), +} + diff --git a/src/renderer/index.ts b/src/renderer/index.ts index ce55f61..4ae994f 100644 --- a/src/renderer/index.ts +++ b/src/renderer/index.ts @@ -1,89 +1,25 @@ -import type { VNodeProps } from 'vue-demi' import { camelize, createRenderer, warn } from 'vue-demi' import { - AnimatedSprite, - BitmapText, Container, Filter, - Graphics, - Mesh, - NineSlicePlane, - SimpleMesh, - SimplePlane, - SimpleRope, - Sprite, Text, - TilingSprite, } from 'pixi.js' -import { patchProp } from './props' -import { normalizeTexture } from './utils' +import { patchProp } from './patch' +import { elements } from './elements' +import { isCustomFilter } from './utils' interface CreatePixiRendererOptions { prefix?: string } -export type PixiCustomElement = (props: (VNodeProps & { [key: string]: any }) | null) => any - -const elements: Record = { - Container: () => new Container(), - Sprite: () => new Sprite(), - Graphics: props => new Graphics(props?.geometry), - Text: props => new Text( - props?.text, - props?.style, - props?.canvas, - ), - BitmapText: props => new BitmapText( - props?.text, - props?.style, - ), - TilingSprite: props => new TilingSprite( - normalizeTexture(props!.texture), - props?.width, - props?.height, - ), - AnimatedSprite: props => new AnimatedSprite( - props!.textures, - props?.autoUpdate, - ), - Mesh: props => new Mesh( - props!.geometry, - props!.shader, - props?.state, - props?.drawMode, - ), - NineSlicePlane: props => new NineSlicePlane( - normalizeTexture(props!.texture), - props?.leftWidth, - props?.topHeight, - props?.rightWidth, - props?.bottomHeight, - ), - SimpleMesh: props => new SimpleMesh( - props?.texture ? normalizeTexture(props.texture) : undefined, - props?.vertices, - props?.uvs, - props?.indices, - props?.drawMode, - ), - SimplePlane: props => new SimplePlane( - normalizeTexture(props!.texture), - props?.verticesX, - props?.verticesY, - ), - SimpleRope: props => new SimpleRope( - normalizeTexture(props!.texture), - props?.points, - props?.textureScale, - ), -} - export function createPixiRenderer(options: CreatePixiRendererOptions = {}) { const { prefix = 'pixi' } = options return createRenderer({ createElement: (name, _, __, props) => { - const element = props?.is?.(props) || createPixiElement(prefix, name, props) + const element = isCustomFilter(prefix, name) + ? props?.is?.(props) + : createPixiElement(prefix, name, props) if (element instanceof Container) element.filters = [] @@ -120,7 +56,7 @@ export function createPixiRenderer(options: CreatePixiRendererOptions = {}) { }) } -function createPixiElement(prefix: string, name: string, props: any) { +function createPixiElement(prefix: string, name: string, props: any = {}) { let is if (name.startsWith(prefix)) { name = camelize(name) diff --git a/src/renderer/props.ts b/src/renderer/patch.ts similarity index 100% rename from src/renderer/props.ts rename to src/renderer/patch.ts From 5d6c46610abc0524f7c498635c783af689910888 Mon Sep 17 00:00:00 2001 From: "Mr.Mao" <951416545@qq.com> Date: Tue, 9 May 2023 18:27:40 +0800 Subject: [PATCH 4/9] feat(filter): support for custom filters --- playground/src/components/CursorSprite.vue | 8 ++++---- src/elements/props/index.ts | 4 ++++ src/renderer/utils.ts | 10 ++++++++++ 3 files changed, 18 insertions(+), 4 deletions(-) diff --git a/playground/src/components/CursorSprite.vue b/playground/src/components/CursorSprite.vue index e15462a..52c9ad8 100644 --- a/playground/src/components/CursorSprite.vue +++ b/playground/src/components/CursorSprite.vue @@ -41,9 +41,9 @@ const show = ref(false) diff --git a/src/elements/props/index.ts b/src/elements/props/index.ts index 80513a5..8607797 100644 --- a/src/elements/props/index.ts +++ b/src/elements/props/index.ts @@ -63,3 +63,7 @@ export interface AllowedPixiProps { zIndex?: number } + +export interface AllowedFilterProps extends Partial> { + is?: (props: any) => Filter +} diff --git a/src/renderer/utils.ts b/src/renderer/utils.ts index 4d97dd3..954dfec 100644 --- a/src/renderer/utils.ts +++ b/src/renderer/utils.ts @@ -1,7 +1,17 @@ import { Texture } from 'pixi.js' +import { camelize } from 'vue-demi' export function normalizeTexture(value: Texture | string): Texture { if (typeof value === 'string') return Texture.from(value) return value } + +export function isCustomFilter(prefix: string, name: string) { + const isPrefix = name.startsWith(prefix) + name = camelize(name) + name = name.charAt(0).toUpperCase() + name.slice(1) + return ( + isPrefix && name.slice(prefix.length) === 'Filter' + ) || name === 'Filter' +} From 32518baf99bb7dd1bfd16c1173a5ccf4d67822cc Mon Sep 17 00:00:00 2001 From: "Mr.Mao" <951416545@qq.com> Date: Tue, 9 May 2023 18:34:28 +0800 Subject: [PATCH 5/9] feat(filter): support for blur-filter --- src/elements/blurFilter.ts | 33 +++++++++++++++++++++++++++++++++ src/elements/props/index.ts | 2 ++ src/global.ts | 7 +++++-- 3 files changed, 40 insertions(+), 2 deletions(-) create mode 100644 src/elements/blurFilter.ts diff --git a/src/elements/blurFilter.ts b/src/elements/blurFilter.ts new file mode 100644 index 0000000..aef07c5 --- /dev/null +++ b/src/elements/blurFilter.ts @@ -0,0 +1,33 @@ +import type { + ComponentCustomProps, + ComponentOptionsMixin, + DefineComponent, + VNodeProps, +} from 'vue-demi' +import type { BlurFilter } from 'pixi.js' +import type { AllowedFilterProps, ExtractFilterProps } from './props' + +interface Props extends ExtractFilterProps { + +} + +interface Events {} + +export type PixiBlurFilterComponent = DefineComponent< + Props, + {}, + unknown, + {}, + {}, + ComponentOptionsMixin, + ComponentOptionsMixin, + (keyof Events)[], + keyof Events, + VNodeProps & AllowedFilterProps & ComponentCustomProps, + Readonly & { + [key in keyof Events as `on${Capitalize}`]?: + | ((...args: Events[key]) => any) + | undefined; + }, + {} +> diff --git a/src/elements/props/index.ts b/src/elements/props/index.ts index 8607797..4dceb5c 100644 --- a/src/elements/props/index.ts +++ b/src/elements/props/index.ts @@ -67,3 +67,5 @@ export interface AllowedPixiProps { export interface AllowedFilterProps extends Partial> { is?: (props: any) => Filter } + +export type ExtractFilterProps = Partial> diff --git a/src/global.ts b/src/global.ts index 25aa0e3..8cb08db 100644 --- a/src/global.ts +++ b/src/global.ts @@ -1,3 +1,4 @@ +import '@vue/runtime-core' import type { PixiSimpleRopeComponent } from './elements/simpleRope' import type { PixiSimplePlaneComponent } from './elements/simplePlane' import type { PixiNineSlicePlaneComponent } from './elements/nineSlicePlane' @@ -9,15 +10,17 @@ import type { PixiGraphicsComponent } from './elements/graphics' import type { PixiContainerComponent } from './elements/container' import type { PixiSpriteComponent } from './elements/sprite' import type { PixiBitmapTextComponent } from './elements/bitmapText' - -import '@vue/runtime-core' import type { PixiFilterComponent } from './elements/filter' +import type { PixiBlurFilterComponent } from './elements/blurFilter' declare module '@vue/runtime-core' { export interface GlobalComponents { Filter: PixiFilterComponent PixiFilter: PixiFilterComponent + BlurFilter: PixiBlurFilterComponent + PixiBlurFilter: PixiBlurFilterComponent + Container: PixiContainerComponent PixiContainer: PixiContainerComponent From 02078e09862cfc7c46ff10036fcb2b88957a4e8d Mon Sep 17 00:00:00 2001 From: "Mr.Mao" <951416545@qq.com> Date: Tue, 9 May 2023 18:38:10 +0800 Subject: [PATCH 6/9] feat(filter): support for alpha-filter --- src/elements/alphaFilter.ts | 33 +++++++++++++++++++++++++++++++++ src/elements/blurFilter.ts | 4 +++- src/global.ts | 4 ++++ 3 files changed, 40 insertions(+), 1 deletion(-) create mode 100644 src/elements/alphaFilter.ts diff --git a/src/elements/alphaFilter.ts b/src/elements/alphaFilter.ts new file mode 100644 index 0000000..0493fd4 --- /dev/null +++ b/src/elements/alphaFilter.ts @@ -0,0 +1,33 @@ +import type { + ComponentCustomProps, + ComponentOptionsMixin, + DefineComponent, + VNodeProps, +} from 'vue-demi' +import type { AlphaFilter } from 'pixi.js' +import type { AllowedFilterProps, ExtractFilterProps } from './props' + +interface Props extends ExtractFilterProps { + +} + +interface Events {} + +export type PixiAlphaFilterComponent = DefineComponent< + Props, + {}, + unknown, + {}, + {}, + ComponentOptionsMixin, + ComponentOptionsMixin, + (keyof Events)[], + keyof Events, + VNodeProps & AllowedFilterProps & ComponentCustomProps, + Readonly & { + [key in keyof Events as `on${Capitalize}`]?: + | ((...args: Events[key]) => any) + | undefined; + }, + {} +> diff --git a/src/elements/blurFilter.ts b/src/elements/blurFilter.ts index aef07c5..2956d1f 100644 --- a/src/elements/blurFilter.ts +++ b/src/elements/blurFilter.ts @@ -8,7 +8,9 @@ import type { BlurFilter } from 'pixi.js' import type { AllowedFilterProps, ExtractFilterProps } from './props' interface Props extends ExtractFilterProps { - + strength?: number + resolution?: number + kernelSize?: number } interface Events {} diff --git a/src/global.ts b/src/global.ts index 8cb08db..2fcc9da 100644 --- a/src/global.ts +++ b/src/global.ts @@ -12,6 +12,7 @@ import type { PixiSpriteComponent } from './elements/sprite' import type { PixiBitmapTextComponent } from './elements/bitmapText' import type { PixiFilterComponent } from './elements/filter' import type { PixiBlurFilterComponent } from './elements/blurFilter' +import type { PixiAlphaFilterComponent } from './elements/alphaFilter' declare module '@vue/runtime-core' { export interface GlobalComponents { @@ -21,6 +22,9 @@ declare module '@vue/runtime-core' { BlurFilter: PixiBlurFilterComponent PixiBlurFilter: PixiBlurFilterComponent + AlphaFilter: PixiAlphaFilterComponent + PixiAlphaFilter: PixiAlphaFilterComponent + Container: PixiContainerComponent PixiContainer: PixiContainerComponent From 699afddd8ad5ee6540d490dc8ee935ad899a2044 Mon Sep 17 00:00:00 2001 From: "Mr.Mao" <951416545@qq.com> Date: Tue, 9 May 2023 18:40:56 +0800 Subject: [PATCH 7/9] feat(filter): support for displacement-filter --- src/elements/displacementFilter.ts | 33 ++++++++++++++++++++++++++++++ src/global.ts | 4 ++++ 2 files changed, 37 insertions(+) create mode 100644 src/elements/displacementFilter.ts diff --git a/src/elements/displacementFilter.ts b/src/elements/displacementFilter.ts new file mode 100644 index 0000000..35bae4d --- /dev/null +++ b/src/elements/displacementFilter.ts @@ -0,0 +1,33 @@ +import type { + ComponentCustomProps, + ComponentOptionsMixin, + DefineComponent, + VNodeProps, +} from 'vue-demi' +import type { DisplacementFilter, ISpriteMaskTarget } from 'pixi.js' +import type { AllowedFilterProps, ExtractFilterProps } from './props' + +interface Props extends ExtractFilterProps { + sprite: ISpriteMaskTarget +} + +interface Events {} + +export type PixiDisplacementFilterComponent = DefineComponent< + Props, + {}, + unknown, + {}, + {}, + ComponentOptionsMixin, + ComponentOptionsMixin, + (keyof Events)[], + keyof Events, + VNodeProps & AllowedFilterProps & ComponentCustomProps, + Readonly & { + [key in keyof Events as `on${Capitalize}`]?: + | ((...args: Events[key]) => any) + | undefined; + }, + {} +> diff --git a/src/global.ts b/src/global.ts index 2fcc9da..9724ddf 100644 --- a/src/global.ts +++ b/src/global.ts @@ -13,6 +13,7 @@ import type { PixiBitmapTextComponent } from './elements/bitmapText' import type { PixiFilterComponent } from './elements/filter' import type { PixiBlurFilterComponent } from './elements/blurFilter' import type { PixiAlphaFilterComponent } from './elements/alphaFilter' +import type { PixiDisplacementFilterComponent } from './elements/displacementFilter' declare module '@vue/runtime-core' { export interface GlobalComponents { @@ -25,6 +26,9 @@ declare module '@vue/runtime-core' { AlphaFilter: PixiAlphaFilterComponent PixiAlphaFilter: PixiAlphaFilterComponent + DisplacementFilter: PixiDisplacementFilterComponent + PixiDisplacementFilter: PixiDisplacementFilterComponent + Container: PixiContainerComponent PixiContainer: PixiContainerComponent From 6afee2fbc80753b035b1df309b744ea1f37db2ff Mon Sep 17 00:00:00 2001 From: "Mr.Mao" <951416545@qq.com> Date: Tue, 9 May 2023 18:45:32 +0800 Subject: [PATCH 8/9] feat(filter): support for color-matrix-filter --- src/elements/colorMatrixFilter.ts | 31 +++++++++++++++++++++++++++++++ src/global.ts | 4 ++++ 2 files changed, 35 insertions(+) create mode 100644 src/elements/colorMatrixFilter.ts diff --git a/src/elements/colorMatrixFilter.ts b/src/elements/colorMatrixFilter.ts new file mode 100644 index 0000000..e44b7a3 --- /dev/null +++ b/src/elements/colorMatrixFilter.ts @@ -0,0 +1,31 @@ +import type { + ComponentCustomProps, + ComponentOptionsMixin, + DefineComponent, + VNodeProps, +} from 'vue-demi' +import type { ColorMatrixFilter } from 'pixi.js' +import type { AllowedFilterProps, ExtractFilterProps } from './props' + +interface Props extends ExtractFilterProps {} + +interface Events {} + +export type PixiColorMatrixFilterComponent = DefineComponent< + Props, + {}, + unknown, + {}, + {}, + ComponentOptionsMixin, + ComponentOptionsMixin, + (keyof Events)[], + keyof Events, + VNodeProps & AllowedFilterProps & ComponentCustomProps, + Readonly & { + [key in keyof Events as `on${Capitalize}`]?: + | ((...args: Events[key]) => any) + | undefined; + }, + {} +> diff --git a/src/global.ts b/src/global.ts index 9724ddf..3803fd2 100644 --- a/src/global.ts +++ b/src/global.ts @@ -14,6 +14,7 @@ import type { PixiFilterComponent } from './elements/filter' import type { PixiBlurFilterComponent } from './elements/blurFilter' import type { PixiAlphaFilterComponent } from './elements/alphaFilter' import type { PixiDisplacementFilterComponent } from './elements/displacementFilter' +import type { PixiColorMatrixFilterComponent } from './elements/colorMatrixFilter' declare module '@vue/runtime-core' { export interface GlobalComponents { @@ -29,6 +30,9 @@ declare module '@vue/runtime-core' { DisplacementFilter: PixiDisplacementFilterComponent PixiDisplacementFilter: PixiDisplacementFilterComponent + ColorMatrixFilter: PixiColorMatrixFilterComponent + PixiColorMatrixFilter: PixiColorMatrixFilterComponent + Container: PixiContainerComponent PixiContainer: PixiContainerComponent From 92ad8c48f8f07162dd37225c0604a682e5ad72f1 Mon Sep 17 00:00:00 2001 From: "Mr.Mao" <951416545@qq.com> Date: Tue, 9 May 2023 18:47:49 +0800 Subject: [PATCH 9/9] feat(filter): support for fxaa-filter --- src/elements/FXAAFilter.ts | 31 +++++++++++++++++++++++++++++++ src/global.ts | 4 ++++ 2 files changed, 35 insertions(+) create mode 100644 src/elements/FXAAFilter.ts diff --git a/src/elements/FXAAFilter.ts b/src/elements/FXAAFilter.ts new file mode 100644 index 0000000..e5d05d6 --- /dev/null +++ b/src/elements/FXAAFilter.ts @@ -0,0 +1,31 @@ +import type { + ComponentCustomProps, + ComponentOptionsMixin, + DefineComponent, + VNodeProps, +} from 'vue-demi' +import type { FXAAFilter } from 'pixi.js' +import type { AllowedFilterProps, ExtractFilterProps } from './props' + +interface Props extends ExtractFilterProps {} + +interface Events {} + +export type PixiFXAAFilterComponent = DefineComponent< + Props, + {}, + unknown, + {}, + {}, + ComponentOptionsMixin, + ComponentOptionsMixin, + (keyof Events)[], + keyof Events, + VNodeProps & AllowedFilterProps & ComponentCustomProps, + Readonly & { + [key in keyof Events as `on${Capitalize}`]?: + | ((...args: Events[key]) => any) + | undefined; + }, + {} +> diff --git a/src/global.ts b/src/global.ts index 3803fd2..bd03dab 100644 --- a/src/global.ts +++ b/src/global.ts @@ -15,6 +15,7 @@ import type { PixiBlurFilterComponent } from './elements/blurFilter' import type { PixiAlphaFilterComponent } from './elements/alphaFilter' import type { PixiDisplacementFilterComponent } from './elements/displacementFilter' import type { PixiColorMatrixFilterComponent } from './elements/colorMatrixFilter' +import type { PixiFXAAFilterComponent } from './elements/FXAAFilter' declare module '@vue/runtime-core' { export interface GlobalComponents { @@ -33,6 +34,9 @@ declare module '@vue/runtime-core' { ColorMatrixFilter: PixiColorMatrixFilterComponent PixiColorMatrixFilter: PixiColorMatrixFilterComponent + FXAAFilter: PixiFXAAFilterComponent + PixiFXAAFilter: PixiFXAAFilterComponent + Container: PixiContainerComponent PixiContainer: PixiContainerComponent