{"id":26758562,"url":"https://github.com/wdevore/pixi-pan-zoom","last_synced_at":"2025-04-15T05:47:57.461Z","repository":{"id":75435776,"uuid":"101942837","full_name":"wdevore/pixi-pan-zoom","owner":"wdevore","description":"An example of panning and zooming in pixi using a custom parent matrix","archived":false,"fork":false,"pushed_at":"2017-08-31T23:09:30.000Z","size":111,"stargazers_count":14,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-15T05:47:49.410Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wdevore.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-31T00:52:14.000Z","updated_at":"2025-03-04T07:11:06.000Z","dependencies_parsed_at":"2023-02-23T16:45:30.579Z","dependency_job_id":null,"html_url":"https://github.com/wdevore/pixi-pan-zoom","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wdevore%2Fpixi-pan-zoom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wdevore%2Fpixi-pan-zoom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wdevore%2Fpixi-pan-zoom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wdevore%2Fpixi-pan-zoom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wdevore","download_url":"https://codeload.github.com/wdevore/pixi-pan-zoom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249016316,"owners_count":21198832,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-28T16:29:31.395Z","updated_at":"2025-04-15T05:47:57.454Z","avatar_url":"https://github.com/wdevore.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# pixi-pan-zoom\nThis is an example of how to add pan and zoom to your [Pixi](pixijs.com) project.\n\n**WARNING** the demo was thrown together in AngularCLI. Don't worry though the entire code is in three files: *input.ts, zoom.ts and app.component.ts*. All the rest of the files are bulk created by the angular-cli tool, but most importantly pay attention to *zoom.ts* as that is where the gist of the algorithm is, the rest is just support code for mouse, keyboard and stuff.\n\nOn a side note it does show how to make pixi work in Angular while avoiding Angular's event zones. The white text is the mouse's positional data mapped into various spaces. You can move the blue rectangle using the arrow keys. As a bonus the zoom and pan can be animated using Tweens if need be, I know because I was doing it in my engine, watch the triangle ship move in and out of zoom zones and you will get the idea:\n\n[Ranger video](https://plus.google.com/u/0/b/109136453872758385259/photos/photo/109136453872758385259/6068339953594223986?icm=false\u0026iso=true)\n\nThere is technically three ways you can manipulate pixi's container: inheritance, override the updateTransform() or overwrite a localTransform. I originally did the second option but didn't like the fact that I couldn't access any private or protected data. I ended up, for simplicity of the demo, going with option #3 and that is what you will see in the ticker callback which ultimately calls _updateZoom():\n\n      private _updateZoom() {\n        const t = this.zoom.Transform;\n\n        this.game.transform.localTransform.set(t.a, t.b, t.c, t.d, t.tx, t.ty);\n        this.zoomContainer.transform.updateTransform(this.game.transform);\n      }\n\nOne thing to notice is that I create an outer Container node so I can control the update. \"this.zoomContainer\" contains \"this.game\", this is important because it gives me a \"parent\" that I can control when to perform a transform update. This is the one main concept that makes the code work, using .parent doesn't work because you end up trying to update \"yourself\".\n\nThe scenegraph looks like this:\n\n    stage\n      zoomContainer\n       game\n        blueRect\n        orangeRect\n        cursorRect\n      overlay\n       text\n   \nFunny, there is more code man-handling the mouse than there is zoom code, lol. In the long run I would probably use option #2 and extend the Container class to create a new node called, say, ZoomContainer.\n\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.3.1.\n\n## Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\n## Code scaffolding\n\nRun `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.\n\n## Build\n\nRun `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.\n\n## Running unit tests\n\nRun `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n## Running end-to-end tests\n\nRun `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).\nBefore running the tests make sure you are serving the app via `ng serve`.\n\n## Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwdevore%2Fpixi-pan-zoom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwdevore%2Fpixi-pan-zoom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwdevore%2Fpixi-pan-zoom/lists"}