From 9399c42ec771bc562f713b31cc2690eaf12682a2 Mon Sep 17 00:00:00 2001 From: Davide Tantillo Date: Thu, 26 Sep 2024 14:41:08 +0200 Subject: [PATCH] Removed useless changes on other classes. --- spine-ts/spine-core/src/AssetManagerBase.ts | 3 - spine-ts/spine-webgl/example/canvas2.html | 187 -- spine-ts/spine-webgl/example/canvas3.html | 382 ---- spine-ts/spine-webgl/example/canvas4.html | 324 --- spine-ts/spine-webgl/example/canvas5.html | 831 ------- spine-ts/spine-webgl/example/canvas6.html | 1783 --------------- spine-ts/spine-webgl/example/canvas7.html | 210 -- spine-ts/spine-webgl/example/canvas8.html | 1941 ----------------- spine-ts/spine-webgl/src/Input.ts | 20 +- spine-ts/spine-webgl/src/SceneRenderer.ts | 18 - spine-ts/spine-webgl/src/SkeletonRenderer.ts | 2 - spine-ts/spine-webgl/src/SpineCanvas.ts | 2 +- .../src/SpineWebComponentWidget.ts | 14 +- 13 files changed, 23 insertions(+), 5694 deletions(-) delete mode 100644 spine-ts/spine-webgl/example/canvas2.html delete mode 100644 spine-ts/spine-webgl/example/canvas3.html delete mode 100644 spine-ts/spine-webgl/example/canvas4.html delete mode 100644 spine-ts/spine-webgl/example/canvas5.html delete mode 100644 spine-ts/spine-webgl/example/canvas6.html delete mode 100644 spine-ts/spine-webgl/example/canvas7.html delete mode 100644 spine-ts/spine-webgl/example/canvas8.html diff --git a/spine-ts/spine-core/src/AssetManagerBase.ts b/spine-ts/spine-core/src/AssetManagerBase.ts index 627edef84..3bf6ed9f4 100644 --- a/spine-ts/spine-core/src/AssetManagerBase.ts +++ b/spine-ts/spine-core/src/AssetManagerBase.ts @@ -94,7 +94,6 @@ export class AssetManagerBase implements Disposable { this.assetsLoaded[path] = new Promise((resolve, reject) => { this.downloader.downloadBinary(path, (data: Uint8Array): void => { - // setTimeout(() => this.success(success, path, data), 10000); this.success(success, path, data); resolve(data); }, (status: number, responseText: string): void => { @@ -136,7 +135,6 @@ export class AssetManagerBase implements Disposable { }); } - // TODO: refactor assetsLoaded and assets (we should probably merge them) reuseAssets(path: string, success: (path: string, data: any) => void = () => { }, error: (path: string, message: string) => void = () => { }) { @@ -375,7 +373,6 @@ export class AssetManagerBase implements Disposable { export class Downloader { private callbacks: StringMap> = {}; rawDataUris: StringMap = {}; - cacheTextures: Record = {}; dataUriToString (dataUri: string) { if (!dataUri.startsWith("data:")) { diff --git a/spine-ts/spine-webgl/example/canvas2.html b/spine-ts/spine-webgl/example/canvas2.html deleted file mode 100644 index 769dd2648..000000000 --- a/spine-ts/spine-webgl/example/canvas2.html +++ /dev/null @@ -1,187 +0,0 @@ - - - - - - OverlayCanvas Example - - - - - - - -
-

OverlayCanvas Example

- -

Scroll down to div.

- -
- -
-

Spine Box 1

-
- -
- -
-

Spine Box 2

-
- -
- -
-

Spine Box 3

-
- -
- -
-

Raptor Box

-
- -
- -
-

Celeste Box

-
- -

End of content.

-
- - - - \ No newline at end of file diff --git a/spine-ts/spine-webgl/example/canvas3.html b/spine-ts/spine-webgl/example/canvas3.html deleted file mode 100644 index a791a981d..000000000 --- a/spine-ts/spine-webgl/example/canvas3.html +++ /dev/null @@ -1,382 +0,0 @@ - - - - - - OverlayCanvas Example - - - - - - - -
-

OverlayCanvas Example

- -

Scroll down to div.

- -
- -
-

Spine Box 1

-
- -
- -
-

Spine Box 2 (drag me)

-
- -
- -
-

Raptor Box

-
- -
- -
-

Celeste Box

-
- -

End of content.

-
- - - - \ No newline at end of file diff --git a/spine-ts/spine-webgl/example/canvas4.html b/spine-ts/spine-webgl/example/canvas4.html deleted file mode 100644 index 3ce920e71..000000000 --- a/spine-ts/spine-webgl/example/canvas4.html +++ /dev/null @@ -1,324 +0,0 @@ - - - - - - WebGL Overlay Example - - - - - - - a - -
- -
-

Drag and resize me

-

Mode: inside

-

Spineboy will be resize to remain into the div.

-

Skeleton cannot be reused (side effect on skeleton scale).

-
- -
- -
-

Drag me

-

Mode: origin

-

You can easily change the position using offset or percentage of html element axis (origin is top-left)

-

Skeleton can be reused.

-
- -
- -
-

Skeleton of previous box is being reused here

-
- -
- -
-

Initializer with NodeList

-
-
-

Initializer with NodeList

-
- -
- -
-

Initializer with HTMLElement

-
- -
- -
-

Bounds using a Spine ounding box

-
- -
- -

End of content.

-
- - - - \ No newline at end of file diff --git a/spine-ts/spine-webgl/example/canvas5.html b/spine-ts/spine-webgl/example/canvas5.html deleted file mode 100644 index 0f241ed04..000000000 --- a/spine-ts/spine-webgl/example/canvas5.html +++ /dev/null @@ -1,831 +0,0 @@ - - - - - - - - JS Library Showcase - - - - FPS - - - -
- -
-
- aaa -
-
- -
-
- - -
- 

-
-
-
-
- - - - - -
- -
-
-
-
-
-
- - -
- 

-const overlay = new spine.SpineCanvasOverlay();
-overlay.addSkeleton(
-    {
-        atlasPath: "assets/spineboy-pma.atlas",
-        skeletonPath: "assets/spineboy-pro.skel",
-        animation: 'walk',
-    },
-    document.getElementById(`section1-element`),
-);
-
-
-
- - - - - - - - - -
- -
-
- Mode origin uses the HTML element top-left corner as origin for the skeleton.
- You are responsible to scale the skeleton using this mode.
- Move the origin by a percentage of the div width and height by using xAxis and yAxis respectively. -
-
-
-
- - -
- 

-overlay.addSkeleton(
-    {
-        atlasPath: "assets/spineboy-pma.atlas",
-        skeletonPath: "assets/spineboy-pro.skel",
-        animation: 'run',
-        scale: .25,
-    },
-    {
-        element: document.getElementById(`section2-element`),
-        mode: 'origin',
-        xAxis: .5,
-        yAxis: 1,
-    },
-);
-
-
-
- - - - - -
- -
-
-
-
- Use offsetX and offsetY to move you skeleton left or right by the pixel amount you specify. - This works for both mode origin and inside. -
-
- - -
- 

-overlay.addSkeleton(
-    {
-        atlasPath: "assets/spineboy-pma.atlas",
-        skeletonPath: "assets/spineboy-pro.skel",
-        animation: 'run',
-    },
-    {
-        element: document.getElementById(`section3-element`),
-        mode: 'inside', // default
-        offsetX: 100,
-        offsetY: 50,
-    },
-);
-
-
-
- - - - - -
- -
-
- You can easily access the Skeleton and the AnimationState of your character, and use them as if you were using spine-webgl.
- If you change animation, you can ask to scale the skeleton based on the new animation. -
-
- -
-
- - -
- 

-// access the skeleton and the state asynchronously
-const { skeleton, state } = await overlay.addSkeleton(
-    {
-        atlasPath: "assets/raptor-pma.atlas",
-        skeletonPath: "assets/raptor-pro.skel",
-        animation: 'walk',
-    },
-    document.getElementById(`section4-element`)
-);
-
-let isRoaring = false;
-setInterval(() => {
-    const newAnimation = isRoaring ? "walk" : "roar";
-    state.setAnimation(0, newAnimation, true);
-    overlay.recalculateBounds(skeleton); // scale the skeleton based on the new animation
-    isRoaring = !isRoaring;
-}, 4000);
-
-
-
- - - - - -
- -
-
- You can also set a custom bounds to center a specific element or area of you animation in the div. -
-
- TODO -
-
- - -
- 

-
-
-
- - - - - - -
- -
-
- Moving the div will move the skeleton origin.
- Resizing the div will resize the skeleton in inside mode, but not in origin mode. -
-
-
-
-
- 

-overlay.addSkeleton(
-    {
-        atlasPath: "assets/cloud-pot-pma.atlas",
-        skeletonPath: "assets/cloud-pot.skel",
-        animation: 'playing-in-the-rain',
-    },
-    document.getElementById(`section6-element`)
-);
-
-
-
- - - - - - - -
- -
-
- You can view the skeleton world origin (green), the root bone position (red), and the bounds rectangle and center (blue) by setting debug to true. -
-
-
-
- - -
- 

-overlay.addSkeleton(
-    {
-        atlasPath: "assets/owl-pma.atlas",
-        skeletonPath: "assets/owl-pro.skel",
-        animation: 'idle',
-    },
-    {
-        element: document.getElementById(`section7-element`),
-        debug: true,
-    }
-);
-
-
-
- - - - - -
- -
-
- As a bonus item, you can move you skeleton around just by setting the draggable property to true. -
-
-
-
- - -
- 

-overlay.addSkeleton(
-    {
-        atlasPath: "assets/celestial-circus-pma.atlas",
-        skeletonPath: "assets/celestial-circus-pro.skel",
-        animation: 'wings-and-feet',
-    },
-    {
-        element: document.getElementById(`section8-element`),
-        draggable: true,
-    }
-);
-
-
-
- - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/spine-ts/spine-webgl/example/canvas6.html b/spine-ts/spine-webgl/example/canvas6.html deleted file mode 100644 index 68147d4e4..000000000 --- a/spine-ts/spine-webgl/example/canvas6.html +++ /dev/null @@ -1,1783 +0,0 @@ - - - - - - - - JS Library Showcase - - - - - - - - -
- -
-
- -
-
- The <spine-widget> tag allows you to place your Spine animations into a web page. -
-
- By default, the animation bounds are calculated using the given animation, or the setup pose if no animation is provided. -
- The bounds is centered and scaled to fit the parent container. -
-
- - -
- 

-                
-
-
-
- - - - - - -
- -
- -
-
- -
-
- You can change the fit mode of your Spine animation using the fit attribute. -
-
- This is fit="fill". Default fit value is fit="contain". -
-
- -
-
- -
-
- If you want to preserve the original scale, you can use the fit="none". - In combination with that, you can use the scale attribute to choose you desired scale. -
-
- Other fit modes are width, width, height, cover,and scaleDown. -
-
- -
- - - - -
- 

-                
-
-
-
- - - - - - - - - -
- -
-
- -
-
- If you want to manually size the Spine widget, specify the attributes width and height in pixels (without the px unit). -
-
- - -
- 

-                
-
-
-
- - - - - - - - - - - - - -
- -
-
- Mode origin center the animation world origin with the center of the HTML element. -
- You are responsible to scale the skeleton using this mode. -
-
- Move the origin by a percentage of the div width and height by using x-axis and y-axis respectively. -
-
- -
-
- - -
- 

-                
-
-
-
- - - - - -
- -
-
- -
-
- Use offset-x and offset-y to move you skeleton left or right by the pixel amount you specify. -
-
- - -
- 

-                
-
-
-
- - - - - -
- -
-
- Give an identifier to your widget to get it by using the spine.getSpineWidget function. - You can easily access the Skeleton and the AnimationState of your character, and use them as if you were using spine-webgl. -
-
- If you change animation, you can ask the widget to scale the skeleton based on the new animation. -
-
- -
-
- - - -
- 

-                
-
-
-
- - - - - - -
-
-
- Moving the div will move the skeleton origin.
- Resizing the div will resize the skeleton in inside mode, but not in origin mode. -
-
- -
-
- -
- 

-                
-
-
- -
- - - - - - -
- -
-
- You can view the skeleton world origin (green), the root bone position (red), and the bounds rectangle and center (blue) by setting debug to true. -
-
- -
-
- -
- 

-                
-
-
- -
- - - - - - -
- -
-
- -
-
- A loading spinner is shown during assets loading. Click the button below to simulate a 2 seconds loading: -
-
- -
-
- If you do not want to show the loading spinner, set spinner="false". -
- Click the button below to toggle the spinner. -
-
- -
-
- - - -
- 

-                
-
-
-
- - - - - -
- -
- -
- It's super easy to show your different skins and animations. Just make a table and use the skin and animation attributes. -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
- -
- 

-                
-
-
-
- - - - - - -
- -
- -
- If you have many atlas pages, for example one for each skin, and you want to show only some of the skins, - pass to the pages the atlas pages you want to load as a comma concatenated list of indices. -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
- -
- 

-                
-
-
-
- - - - -
- -
- -
- Let's do the same thing above, but programmatically! - Create two arrays, one for the skin and the other for the animations, and loop over them. -
-
- spine.createSpineWidget allows you to create a spine widget. -
-
- By default, assets are loaded immeaditely. You can postpone that by setting manual-start="false". - Then it's your responsibility to call start() on the widget. - As usual, just wait on the loadingPromise to act on the skeleton or state. -
- - - -
- -
- 

-                
-
-
-
- - - - - - -
- -
- -
- When the widget (or the parent element) enters in the viewport, the callback onScreenFunction is invoked. -
-
- By default, the callback call the widget start the first time the widget enters the viewport. - That useful in combination with manual-start="true to load assets only when they are into the viewport. -
- The assets of the coin below are loaded only when the widget enters the viewport. -
-
- You can overwrite that behaviour. For example, the raptor below changes animation everytime the widget enters the viewport. - -
- -
-
- -
-
- - - -
-
- - -
- -
- 

-                
-
-
-
- - - - - -
- -
-
- -
-
- If you want to load textures programmatically, you can just pass as pages to load an empty value liek this pages="". -
-
- In this way the skeleton and the atlas are loaded, but not the textures. -
- Then you can loads the textures whenever you want. -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- - - - -
- 

-                
-
-
-
- - - -
- -
- -
- Widgets are not render while they are off screen. -
-
- The state and skeleton update, and the skeleton apply and the skeleton updateWorldTransform functions are not invoked when the widget is off screen. -
-
- If you want the update functions to be invoked in any case, set offscreen=update. -
- If you want all the functions to be invoked in any case, set offscreen=pose. -
-
- You can also overwrite the update function. Just assign a function to the update property of the widget. - In that it's your responsibility to skip the update/apply. You can use the onScreen property for convinience. -
- -
- -
- -
- -
- - - -
- -
- 

-                
-
-
-
- - - - -
- -
-
- Widgets are not render while they are off screen. -
- The state and skeleton update, and the skeleton apply and the skeleton updateWorldTransform functions are not invoked when the widget is off screen. -
If you want the update functions to be invoked in any case, set offscreen=update. -
If you want all the functions to be invoked in any case, set offscreen=pose. -
-
- -
-
-
- 

-                
-
-
- -
- - - - - - - -
- -
-
- As a bonus item, you can move you skeleton around just by setting the draggable property to true. -
-
- -
-
- - -
- 

-                
-
-
- -
- - - - - - - - - - - \ No newline at end of file diff --git a/spine-ts/spine-webgl/example/canvas7.html b/spine-ts/spine-webgl/example/canvas7.html deleted file mode 100644 index d5c16f0dd..000000000 --- a/spine-ts/spine-webgl/example/canvas7.html +++ /dev/null @@ -1,210 +0,0 @@ - - - - - - - - JS Library Showcase - - - - - - - - - -
- -
-
- -
-
- -
-
- -
- - -
- - -
- -
-
- - - - - - \ No newline at end of file diff --git a/spine-ts/spine-webgl/example/canvas8.html b/spine-ts/spine-webgl/example/canvas8.html deleted file mode 100644 index 8cd43811c..000000000 --- a/spine-ts/spine-webgl/example/canvas8.html +++ /dev/null @@ -1,1941 +0,0 @@ - - - - - - - - JS Library Showcase - - - - - - - - -
- -
-
- -
-
- The <spine-widget> tag allows you to place your Spine animations into a web page. -
-
- By default, the animation bounds are calculated using the given animation, or the setup pose if no animation is provided. -
- The bounds is centered and scaled to fit the parent container. -
-
- - -
- 

-                
-
-
-
- - - - - - -
- -
- -
-
- -
-
- You can change the fit mode of your Spine animation using the fit attribute. -
-
- This is fit="fill". Default fit value is fit="contain". -
-
- -
-
- -
-
- If you want to preserve the original scale, you can use the fit="none". - In combination with that, you can use the scale attribute to choose you desired scale. -
-
- Other fit modes are width, width, height, cover,and scaleDown. -
-
- -
- - - - -
- 

-                
-
-
-
- - - - - - - - - -
- -
-
- -
-
- If you want to manually size the Spine widget, specify the attributes width and height in pixels (without the px unit). -
-
- - -
- 

-                
-
-
-
- - - - - - - - - - - - - -
- -
-
- Mode origin center the animation world origin with the center of the HTML element. -
- You are responsible to scale the skeleton using this mode. -
-
- Move the origin by a percentage of the div width and height by using x-axis and y-axis respectively. -
-
- -
-
- - -
- 

-                
-
-
-
- - - - - -
- -
-
- -
-
- Use offset-x and offset-y to move you skeleton left or right by the pixel amount you specify. -
-
- - -
- 

-                
-
-
-
- - - - - -
- -
-
- Give an identifier to your widget to get it by using the spine.getSpineWidget function. - You can easily access the Skeleton and the AnimationState of your character, and use them as if you were using spine-webgl. -
-
- If you change animation, you can ask the widget to scale the skeleton based on the new animation. -
-
- -
-
- - - -
- 

-                
-
-
-
- - - - - - -
-
-
- Moving the div will move the skeleton origin.
- Resizing the div will resize the skeleton in inside mode, but not in origin mode. -
-
- -
-
- -
- 

-                
-
-
- -
- - - - - - -
- -
-
- You can view the skeleton world origin (green), the root bone position (red), and the bounds rectangle and center (blue) by setting debug to true. -
-
- -
-
- -
- 

-                
-
-
- -
- - - - - - -
- -
-
- -
-
- A loading spinner is shown during assets loading. Click the button below to simulate a 2 seconds loading: -
-
- -
-
- If you do not want to show the loading spinner, set spinner="false". -
- Click the button below to toggle the spinner. -
-
- -
-
- - - -
- 

-                
-
-
-
- - - - - -
- -
- -
- It's super easy to show your different skins and animations. Just make a table and use the skin and animation attributes. -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
- -
- 

-                
-
-
-
- - - - - - -
- -
- -
- If you have many atlas pages, for example one for each skin, and you want to show only some of the skins, - pass to the pages the atlas pages you want to load as a comma concatenated list of indices. -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
- -
- 

-                
-
-
-
- - - - -
- -
- -
- Let's do the same thing above, but programmatically! - Create two arrays, one for the skin and the other for the animations, and loop over them. -
-
- spine.createSpineWidget allows you to create a spine widget. -
-
- By default, assets are loaded immeaditely. You can postpone that by setting manual-start="false". - Then it's your responsibility to call start() on the widget. - As usual, just wait on the loadingPromise to act on the skeleton or state. -
- - - -
- -
- 

-                
-
-
-
- - - - - - -
- -
- -
- When the widget (or the parent element) enters in the viewport, the callback onScreenFunction is invoked. -
-
- By default, the callback call the widget start the first time the widget enters the viewport. - That useful in combination with manual-start="true to load assets only when they are into the viewport. -
- The assets of the coin below are loaded only when the widget enters the viewport. -
-
- You can overwrite that behaviour. For example, the raptor below changes animation everytime the widget enters the viewport. - -
- -
-
- -
-
- - - -
-
- - -
- -
- 

-                
-
-
-
- - - - - -
- -
-
- -
-
- If you want to load textures programmatically, you can just pass as pages to load an empty value liek this pages="". -
-
- In this way the skeleton and the atlas are loaded, but not the textures. -
- Then you can loads the textures whenever you want. -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- - - - -
- 

-                
-
-
-
- - - -
- -
- -
- Widgets are not rendered while they are off screen. -
-
- The state and skeleton update, and the skeleton apply and the skeleton updateWorldTransform functions are not invoked when the widget is off screen. -
-
- If you want the update functions to be invoked in any case, set offscreen=update. -
- If you want all the functions to be invoked in any case, set offscreen=pose. -
-
- You can also overwrite the update function. Just assign a function to the update property of the widget. - In that it's your responsibility to skip the update/apply. You can use the onScreen property for convinience. -
- -
- -
- -
- -
- - - -
- -
- 

-                
-
-
-
- - - - -
- -
- -
- If for some reason your skeleton bounds go outside the div, - you can use the clip property to clip everything is outside the html container. -
-
- Be aware that this will break batching! -
- -
- -
- -
- -
- - - -
- -
- 

-                
-
-
-
- - - - -
- -
- -
-
- -
-
- -
-
- -
-
- -
-
- - - -
- -
- -
- -
- 

-                
-
-
-
- - - - - - - - -
- -
-
- As a bonus item, you can move you skeleton around just by setting the draggable property to true. -
-
- -
-
- - -
- 

-                
-
-
- -
- - - - - - - - - - - \ No newline at end of file diff --git a/spine-ts/spine-webgl/src/Input.ts b/spine-ts/spine-webgl/src/Input.ts index 435cb5c90..f763685dc 100644 --- a/spine-ts/spine-webgl/src/Input.ts +++ b/spine-ts/spine-webgl/src/Input.ts @@ -68,7 +68,7 @@ export class Input { if (this.buttonDown) { if (listener.dragged) listener.dragged(this.mouseX, this.mouseY, ev); } else { - if (listener.moved) listener.moved(this.mouseX, this.mouseY); + if (listener.moved) listener.moved(this.mouseX, this.mouseY, ev); } }); } @@ -80,7 +80,7 @@ export class Input { this.mouseX = ev.clientX - rect.left;; this.mouseY = ev.clientY - rect.top; this.buttonDown = false; - this.listeners.map((listener) => { if (listener.up) listener.up(this.mouseX, this.mouseY); }); + this.listeners.map((listener) => { if (listener.up) listener.up(this.mouseX, this.mouseY, ev); }); document.removeEventListener("mousemove", mouseMove); document.removeEventListener("mouseup", mouseUp); @@ -92,7 +92,7 @@ export class Input { let deltaY = ev.deltaY; if (ev.deltaMode == WheelEvent.DOM_DELTA_LINE) deltaY *= 8; if (ev.deltaMode == WheelEvent.DOM_DELTA_PAGE) deltaY *= 24; - this.listeners.map((listener) => { if (listener.wheel) listener.wheel(ev.deltaY); }); + this.listeners.map((listener) => { if (listener.wheel) listener.wheel(ev.deltaY, ev); }); }; element.addEventListener("mousedown", mouseDown, true); @@ -122,7 +122,7 @@ export class Input { let dx = this.touch1.x - this.touch0.x; let dy = this.touch1.x - this.touch0.x; this.initialPinchDistance = Math.sqrt(dx * dx + dy * dy); - this.listeners.map((listener) => { if (listener.zoom) listener.zoom(this.initialPinchDistance, this.initialPinchDistance) }); + this.listeners.map((listener) => { if (listener.zoom) listener.zoom(this.initialPinchDistance, this.initialPinchDistance, ev) }); } } if (this.preventDefault) ev.preventDefault(); @@ -151,7 +151,7 @@ export class Input { let dx = this.touch1.x - this.touch0.x; let dy = this.touch1.x - this.touch0.x; let distance = Math.sqrt(dx * dx + dy * dy); - this.listeners.map((listener) => { if (listener.zoom) listener.zoom(this.initialPinchDistance, distance) }); + this.listeners.map((listener) => { if (listener.zoom) listener.zoom(this.initialPinchDistance, distance, ev) }); } } if (this.preventDefault) ev.preventDefault(); @@ -171,7 +171,7 @@ export class Input { this.touch0 = null; this.mouseX = x; this.mouseY = y; - this.listeners.map((listener) => { if (listener.up) listener.up(x, y) }); + this.listeners.map((listener) => { if (listener.up) listener.up(x, y, ev) }); if (!this.touch1) { this.buttonDown = false; @@ -216,9 +216,9 @@ export class Touch { export interface InputListener { down?(x: number, y: number, ev?: MouseEvent | TouchEvent): void; - up?(x: number, y: number): void; - moved?(x: number, y: number): void; + up?(x: number, y: number, ev?: MouseEvent | TouchEvent): void; + moved?(x: number, y: number, ev?: MouseEvent | TouchEvent): void; dragged?(x: number, y: number, ev?: MouseEvent | TouchEvent): void; - wheel?(delta: number): void; - zoom?(initialDistance: number, distance: number): void; + wheel?(delta: number, ev?: MouseEvent | TouchEvent): void; + zoom?(initialDistance: number, distance: number, ev?: MouseEvent | TouchEvent): void; } diff --git a/spine-ts/spine-webgl/src/SceneRenderer.ts b/spine-ts/spine-webgl/src/SceneRenderer.ts index 03259eaba..c4e4c9bc1 100644 --- a/spine-ts/spine-webgl/src/SceneRenderer.ts +++ b/spine-ts/spine-webgl/src/SceneRenderer.ts @@ -463,24 +463,6 @@ export class SceneRenderer implements Disposable { this.activeRenderer = null; } - resize2 () { - let canvas = this.canvas; - this.context.gl.viewport(0, 0, canvas.width, canvas.height); - this.camera.setViewport(canvas.width, canvas.height); - this.camera.update(); - } - - resize3 (width: number, height: number) { - console.log("resize gl") - let canvas = this.canvas; - const dpr = window.devicePixelRatio; - this.canvas.width = Math.round(width * dpr); - this.canvas.height = Math.round(height * dpr); - this.context.gl.viewport(0, 0, canvas.width, canvas.height); - this.camera.setViewport(canvas.width, canvas.height); - this.camera.update(); - } - resize (resizeMode: ResizeMode) { let canvas = this.canvas; var dpr = window.devicePixelRatio || 1; diff --git a/spine-ts/spine-webgl/src/SkeletonRenderer.ts b/spine-ts/spine-webgl/src/SkeletonRenderer.ts index e8b927333..ad81b6a3d 100644 --- a/spine-ts/spine-webgl/src/SkeletonRenderer.ts +++ b/spine-ts/spine-webgl/src/SkeletonRenderer.ts @@ -203,8 +203,6 @@ export class SkeletonRenderer { clipper.clipEndWithSlot(slot); } - - // console.log(renderable.vertices[1]) clipper.clipEnd(); } diff --git a/spine-ts/spine-webgl/src/SpineCanvas.ts b/spine-ts/spine-webgl/src/SpineCanvas.ts index bfe70e4ab..e11f67c1f 100644 --- a/spine-ts/spine-webgl/src/SpineCanvas.ts +++ b/spine-ts/spine-webgl/src/SpineCanvas.ts @@ -110,7 +110,7 @@ export class SpineCanvas { let waitForAssets = () => { if (this.disposed) return; - if (!config.app.loadAssets || this.assetManager.isLoadingComplete()) { + if (this.assetManager.isLoadingComplete()) { if (this.assetManager.hasErrors()) { if (config.app.error) config.app.error(this, this.assetManager.getErrors()); } else { diff --git a/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts b/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts index 03261ff8c..e78f5e5a4 100644 --- a/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts +++ b/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts @@ -1303,7 +1303,7 @@ class SpineWebComponentOverlay extends HTMLElement { this.canvas.style.width = totalWidth + "px"; this.canvas.style.height = totalHeight + "px"; - this.renderer.resize3(totalWidth, totalHeight); + this.resize(totalWidth, totalHeight); } } @@ -1333,9 +1333,19 @@ class SpineWebComponentOverlay extends HTMLElement { widget.currentScaleDpi = scale; }); - this.renderer.resize3(parseFloat(this.canvas.style.width), parseFloat(this.canvas.style.height)); + this.resize(parseFloat(this.canvas.style.width), parseFloat(this.canvas.style.height)); } + private resize(width: number, height: number) { + let canvas = this.canvas; + const dpr = window.devicePixelRatio; + this.canvas.width = Math.round(width * dpr); + this.canvas.height = Math.round(height * dpr); + this.renderer.context.gl.viewport(0, 0, canvas.width, canvas.height); + this.renderer.camera.setViewport(canvas.width, canvas.height); + this.renderer.camera.update(); + } + // we need the bounding client rect otherwise decimals won't be returned // this means that during zoom it might occurs that the div would be resized // rounded 1px more making a scrollbar appear