How hack PIXI in NPM module system

[martiniti]

Hello everyone!

I founded solution with correct croping images/videos inside PIXI app.

I created test appliction and made some hacks inside pixi-legacy.js and it successfully works for me.

When I started implement it inside npm module I found it not so easy. Tryed a lot of everything but still have no luck.

Could somebody explain me how correctly hack PIXI and make it work as NPM module?

Do I need make some module extensions? My current code definetly cause some core changes because I entered 3 new parameters. So how can I put it all together?

Bellow my code:

Inside this function FilterSystem.prototype.push = function (target, filters) I added 3 new parameters under "var autoFit = filters[0].autoFit;" :

var autoFit = filters[0].autoFit;
var autoFitY = filters[0].autoFitY;
var autoFitWidth = filters[0].autoFitWidth;
var autoFitHeight = filters[0].autoFitHeight;

After if(autoFit){...} I wrote this code:

//Autofit by height
if (autoFitY) {
  var sourceFrameProjected = this.tempRect.copyFrom(renderTextureSystem.sourceFrame);
  // Project source frame into world space (if projection is applied)
  if (renderer.projection.transform) {
  	this.transformAABB(tempMatrix.copyFrom(renderer.projection.transform).invert(), sourceFrameProjected);
  }
  state.sourceFrame.fitY(sourceFrameProjected, autoFitWidth, autoFitHeight);
}

Also I wrote this function. You can add it under Rectangle.prototype.fit =  function (rectangle) :

/**
* Fits by height with determined width and height.
*
* @param {PIXI.Rectangle} rectangle - The rectangle to fit.
* @return {PIXI.Rectangle} Returns itself.
*/
Rectangle.prototype.fitY = function (rectangle, width, height) {
  this.x = (rectangle.width - width)/2;
  this.y = Math.max(this.y, rectangle.y);
  this.width = width;
  this.height = height;
  return this;
};

 

[ivan.popelyshev]

Fortunately, you dont add any API to FilterSystem, only to Rectangle, and Rectangle is actually exists in GlobalMixins.

https://github.com/pixijs/picture - here is the plugin that modifies FilterSystem a bit and introduces custom filter that have extra fields.

and here's the plugin that actually adds something to global typings, you can mention Rectangle in global.d.ts : https://github.com/pixijs/pixi-heaven

What you can do: you can take stuff from pixi-heaven, change names, remove unnecessary deps (look at deps in picture) , remove "eslint" from packagejson because its annoying for small plugins, and it'll be good

[martiniti]

Hello Ivan! Thank you so much again for your support!!!

 

Is there any other ways to implement this few hacks?

I found it little bit complicated for me. I installed PIXI-HEAVEN but unfortunately I couldn`t run it. It always writes me:

"Module not found: Can't resolve 'pixi-heaven'" But I definetly know that I installed this module.

About half of the day I tryed a lot of different hacks but still have no result

It`s really ease to extend PIXI.Rectangle but I don`t get how modify FilterSystem because it inside PIXI.Filter

 

For my project I using pixi-legacy.js that,  if I correct, resolve some problems.

So at first I importing this: import * as PIXI from "pixi.js-legacy";

I have an idea just download PIXI.JS from github, edit some code as I need and upload it on my github. Than I can install it to my project.

But in this case I have an error:

error Can't add "pixi.js-monorepo": invalid package version undefined.

Can I go this way and how can I resolve this error?

[ivan.popelyshev]

sorry, i dont understand any of those problems fully. "monorepo" is stuff that bigtimebuddy made for me and shukant, and i didnt use it yet, its for making several modules, not just one.

pixi-heaven doesnt work? please give me minimal demo on how it doesnt work, its sad new s for me.

FilterSystem isnt inside Filter, its in PIXI.

I can make a demo for you and other people based on your code, is that ok? ill put it in https://github.com/pixijs/pixi-plugin-example later

 

[ivan.popelyshev]

Here is it: https://github.com/pixijs/pixi-plugin-example

You can copy it and publish in your npm namespace or where do you want it. However to use it , you have to actually call `applyFsMixins` from your app, otherwise this thing will be tree-shaken away

I expect an answer from you ASAP because i just restored 5-years-old plugin and i need to know whether you, as general audience, is able to understand it.

Edited August 6, 2021 by ivan.popelyshev

[martiniti]

Hello Ivan!

Sorry for late response.

I so appreciate your help, just can`t find the words to thank you for the so much helping me and other people who wants to use PIXI.JS!!!

And about plugin. I did everything using your detaled instruction, even learned how to publish npm packages, it`s really awesome ?:

https://www.npmjs.com/package/pixi-autofit-y

But for some unknown for now reasone it writes me in both cases (in your pixi-plugin-example and my pixi-autofit-y versions?

Module not found: Can't resolve 'pixi-plugin-example'

When I importing this module:

import {applyFsMixins} from "pixi-autofit-y";

or

import {applyFsMixins} from "pixi-plugin-example";

Do you know what can be the reason of this problem?

[martiniti]

When this will be completed I will publish correct and tested version for any sizes and proportions of the media content.

I think it may help those one who will be searching for correct size autofiting for Filter in PIXI and everyone who will want to create they own PIXI plugin.

Therefore, thank you again, Ivan!

[martiniti]

I see that for some reasone index.d.ts compeleted into this two lines:

export declare function applyFsMixins(): void;

export { }

This happened in both cases

[martiniti]

But inside "compile" folder everything seems to be ok:

import { applyFsMixins } from './filters/FilterSystemMixin';
applyFsMixins();
export { applyFsMixins };
//# sourceMappingURL=index.js.map

 

[ivan.popelyshev]

because you didnt modify "global.d.ts" which has it inside!

oh, wait, it doesnt ,it only has @pixi/math

Edited August 9, 2021 by ivan.popelyshev

[ivan.popelyshev]

Very strange, I'll look what is wrong today or tomorrow

[martiniti]

Hello Ivan!

Yes I see that now it contains Rectangle extension (fitY) only.

What is global.d.ts for? Except to hack pixi interfaces?

[martiniti]

Hi Ivan!

Can you help me with global.d.ts file? I checked some examples in other plugins (heaven, pixi picture...), but still don`t get how it works.

Or can you give me some advise how can I export my new module "applyFsMixins" correctly?

[ivan.popelyshev]

It works. I do not know what are you talking about: https://codesandbox.io/s/testing-pixi-autofit-z6r2r?file=/src/index.ts

Probably your webpack configuration or whatever you use is wrong.

Once again I remind that I hate modules. You guys are failing with your configurations because some assholes decided to publish truly undercooked solution for whole JS community. In the end I'm one  of those who have to clean up this mess.

Edited August 11, 2021 by ivan.popelyshev

[martiniti]

Ivan, I`m sorry if I hurted you. Your help is really awesome and thank you so much for all you doing, I`m sure that it`s very important for many-many people !!!

It`s strange, but after reloading my docker - everything started work! Filters showing correct video/image without deformation. This is really awesome!

I`ll do my best to upgrade this module and make it much better, so anyone can use it and maybe it will help someone, I hope so.

I`ve already updated module with instruction how to use it, for those who searching for solution, you can find it here: https://www.npmjs.com/package/pixi-autofit-y

Thank your so much again, Ivan!!!

Edited August 11, 2021 by martiniti

[ivan.popelyshev]

btw, your plugin can be emulated just by overriding "calculateBounds" of object where filter is applied