@esotericsoftware/spine-webgl 4.0.11 → 4.0.15

package/dist/iife/spine-webgl.js

@@ -26,6 +26,7 @@ var spine = (() => {
     BoneData: () => BoneData,
     BoundingBoxAttachment: () => BoundingBoxAttachment,
     CURRENT: () => CURRENT,
+    CameraController: () => CameraController,
     ClippingAttachment: () => ClippingAttachment,
     Color: () => Color,
     Color2Attribute: () => Color2Attribute,
@@ -4291,14 +4292,14 @@ var spine = (() => {
         return dataUri.substr(dataUri.indexOf(",") + 1);
       }
     }
-    base64ToArrayBuffer(base64) {
+    base64ToUint8Array(base64) {
       var binary_string = window.atob(base64);
       var len = binary_string.length;
       var bytes = new Uint8Array(len);
       for (var i = 0; i < len; i++) {
         bytes[i] = binary_string.charCodeAt(i);
       }
-      return bytes.buffer;
+      return bytes;
     }
     dataUriToUint8Array(dataUri) {
       if (!dataUri.startsWith("data:")) {
@@ -4308,7 +4309,7 @@ var spine = (() => {
       if (base64Idx == -1)
         throw new Error("Not a binary data URI.");
       base64Idx += "base64,".length;
-      return this.base64ToArrayBuffer(dataUri.substr(base64Idx));
+      return this.base64ToUint8Array(dataUri.substr(base64Idx));
     }
     downloadText(url, success, error) {
       if (this.start(url, success, error))
@@ -9254,14 +9255,13 @@ var spine = (() => {
   // spine-webgl/src/Input.ts
   var Input = class {
     constructor(element) {
-      this.lastX = 0;
-      this.lastY = 0;
+      this.mouseX = 0;
+      this.mouseY = 0;
       this.buttonDown = false;
-      this.currTouch = null;
+      this.touch0 = null;
+      this.touch1 = null;
+      this.initialPinchDistance = 0;
       this.listeners = new Array();
-      this.touchesPool = new Pool(() => {
-        return new Touch(0, 0, 0);
-      });
       this.element = element;
       this.setupCallbacks(element);
     }
@@ -9269,15 +9269,14 @@ var spine = (() => {
       let mouseDown = (ev) => {
         if (ev instanceof MouseEvent) {
           let rect = element.getBoundingClientRect();
-          let x = ev.clientX - rect.left;
-          let y = ev.clientY - rect.top;
-          let listeners = this.listeners;
-          for (let i = 0; i < listeners.length; i++)
-            if (listeners[i].down)
-              listeners[i].down(x, y);
-          this.lastX = x;
-          this.lastY = y;
+          this.mouseX = ev.clientX - rect.left;
+          ;
+          this.mouseY = ev.clientY - rect.top;
           this.buttonDown = true;
+          this.listeners.map((listener) => {
+            if (listener.down)
+              listener.down(this.mouseX, this.mouseY);
+          });
           document.addEventListener("mousemove", mouseMove);
           document.addEventListener("mouseup", mouseUp);
         }
@@ -9285,138 +9284,154 @@ var spine = (() => {
       let mouseMove = (ev) => {
         if (ev instanceof MouseEvent) {
           let rect = element.getBoundingClientRect();
-          let x = ev.clientX - rect.left;
-          let y = ev.clientY - rect.top;
-          let listeners = this.listeners;
-          for (let i = 0; i < listeners.length; i++) {
+          this.mouseX = ev.clientX - rect.left;
+          ;
+          this.mouseY = ev.clientY - rect.top;
+          this.listeners.map((listener) => {
             if (this.buttonDown) {
-              if (listeners[i].dragged)
-                listeners[i].dragged(x, y);
+              if (listener.dragged)
+                listener.dragged(this.mouseX, this.mouseY);
             } else {
-              if (listeners[i].moved)
-                listeners[i].moved(x, y);
+              if (listener.moved)
+                listener.moved(this.mouseX, this.mouseY);
             }
-          }
-          this.lastX = x;
-          this.lastY = y;
+          });
         }
       };
       let mouseUp = (ev) => {
         if (ev instanceof MouseEvent) {
           let rect = element.getBoundingClientRect();
-          let x = ev.clientX - rect.left;
-          let y = ev.clientY - rect.top;
-          let listeners = this.listeners;
-          for (let i = 0; i < listeners.length; i++)
-            if (listeners[i].up)
-              listeners[i].up(x, y);
-          this.lastX = x;
-          this.lastY = y;
+          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);
+          });
           document.removeEventListener("mousemove", mouseMove);
           document.removeEventListener("mouseup", mouseUp);
         }
       };
+      let mouseWheel = (e) => {
+        e.preventDefault();
+        let deltaY = e.deltaY;
+        if (e.deltaMode == WheelEvent.DOM_DELTA_LINE)
+          deltaY *= 8;
+        if (e.deltaMode == WheelEvent.DOM_DELTA_PAGE)
+          deltaY *= 24;
+        this.listeners.map((listener) => {
+          if (listener.wheel)
+            listener.wheel(e.deltaY);
+        });
+      };
       element.addEventListener("mousedown", mouseDown, true);
       element.addEventListener("mousemove", mouseMove, true);
       element.addEventListener("mouseup", mouseUp, true);
+      element.addEventListener("wheel", mouseWheel, true);
       element.addEventListener("touchstart", (ev) => {
-        if (!this.currTouch) {
+        if (!this.touch0 || !this.touch1) {
           var touches = ev.changedTouches;
-          for (var i = 0; i < touches.length; i++) {
-            var touch = touches[i];
-            let rect = element.getBoundingClientRect();
-            let x = touch.clientX - rect.left;
-            let y = touch.clientY - rect.top;
-            this.currTouch = this.touchesPool.obtain();
-            this.currTouch.identifier = touch.identifier;
-            this.currTouch.x = x;
-            this.currTouch.y = y;
-            break;
-          }
-          let listeners = this.listeners;
-          for (let i2 = 0; i2 < listeners.length; i2++) {
-            if (listeners[i2].down)
-              listeners[i2].down(this.currTouch.x, this.currTouch.y);
-          }
-          this.lastX = this.currTouch.x;
-          this.lastY = this.currTouch.y;
+          let nativeTouch = touches.item(0);
+          let rect = element.getBoundingClientRect();
+          let x = nativeTouch.clientX - rect.left;
+          let y = nativeTouch.clientY - rect.top;
+          let touch = new Touch(nativeTouch.identifier, x, y);
+          this.mouseX = x;
+          this.mouseY = y;
           this.buttonDown = true;
-        }
-        ev.preventDefault();
-      }, false);
-      element.addEventListener("touchend", (ev) => {
-        if (this.currTouch) {
-          var touches = ev.changedTouches;
-          for (var i = 0; i < touches.length; i++) {
-            var touch = touches[i];
-            if (this.currTouch.identifier === touch.identifier) {
-              let rect = element.getBoundingClientRect();
-              let x = this.currTouch.x = touch.clientX - rect.left;
-              let y = this.currTouch.y = touch.clientY - rect.top;
-              this.touchesPool.free(this.currTouch);
-              let listeners = this.listeners;
-              for (let i2 = 0; i2 < listeners.length; i2++) {
-                if (listeners[i2].up)
-                  listeners[i2].up(x, y);
-              }
-              this.lastX = x;
-              this.lastY = y;
-              this.buttonDown = false;
-              this.currTouch = null;
-              break;
-            }
+          if (!this.touch0) {
+            this.touch0 = touch;
+            this.listeners.map((listener) => {
+              if (listener.down)
+                listener.down(touch.x, touch.y);
+            });
+          } else if (!this.touch1) {
+            this.touch1 = touch;
+            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);
+            });
           }
         }
         ev.preventDefault();
       }, false);
-      element.addEventListener("touchcancel", (ev) => {
-        if (this.currTouch) {
+      element.addEventListener("touchmove", (ev) => {
+        if (this.touch0) {
           var touches = ev.changedTouches;
+          let rect = element.getBoundingClientRect();
           for (var i = 0; i < touches.length; i++) {
-            var touch = touches[i];
-            if (this.currTouch.identifier === touch.identifier) {
-              let rect = element.getBoundingClientRect();
-              let x = this.currTouch.x = touch.clientX - rect.left;
-              let y = this.currTouch.y = touch.clientY - rect.top;
-              this.touchesPool.free(this.currTouch);
-              let listeners = this.listeners;
-              for (let i2 = 0; i2 < listeners.length; i2++) {
-                if (listeners[i2].up)
-                  listeners[i2].up(x, y);
-              }
-              this.lastX = x;
-              this.lastY = y;
-              this.buttonDown = false;
-              this.currTouch = null;
-              break;
+            var nativeTouch = touches[i];
+            let x = nativeTouch.clientX - rect.left;
+            let y = nativeTouch.clientY - rect.top;
+            if (this.touch0.identifier === nativeTouch.identifier) {
+              this.touch0.x = this.mouseX = x;
+              this.touch0.y = this.mouseY = y;
+              this.listeners.map((listener) => {
+                if (listener.dragged)
+                  listener.dragged(x, y);
+              });
+            }
+            if (this.touch1 && this.touch1.identifier === nativeTouch.identifier) {
+              this.touch1.x = this.mouseX = x;
+              this.touch1.y = this.mouseY = y;
             }
           }
+          if (this.touch0 && this.touch1) {
+            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);
+            });
+          }
         }
         ev.preventDefault();
       }, false);
-      element.addEventListener("touchmove", (ev) => {
-        if (this.currTouch) {
+      let touchEnd = (ev) => {
+        if (this.touch0) {
           var touches = ev.changedTouches;
+          let rect = element.getBoundingClientRect();
           for (var i = 0; i < touches.length; i++) {
-            var touch = touches[i];
-            if (this.currTouch.identifier === touch.identifier) {
-              let rect = element.getBoundingClientRect();
-              let x = touch.clientX - rect.left;
-              let y = touch.clientY - rect.top;
-              let listeners = this.listeners;
-              for (let i2 = 0; i2 < listeners.length; i2++) {
-                if (listeners[i2].dragged)
-                  listeners[i2].dragged(x, y);
+            var nativeTouch = touches[i];
+            let x = nativeTouch.clientX - rect.left;
+            let y = nativeTouch.clientY - rect.top;
+            if (this.touch0.identifier === nativeTouch.identifier) {
+              this.touch0 = null;
+              this.mouseX = x;
+              this.mouseY = y;
+              this.listeners.map((listener) => {
+                if (listener.up)
+                  listener.up(x, y);
+              });
+              if (!this.touch1) {
+                this.buttonDown = false;
+                break;
+              } else {
+                this.touch0 = this.touch1;
+                this.touch1 = null;
+                this.mouseX = this.touch0.x;
+                this.mouseX = this.touch0.x;
+                this.buttonDown = true;
+                this.listeners.map((listener) => {
+                  if (listener.down)
+                    listener.down(this.touch0.x, this.touch0.y);
+                });
               }
-              this.lastX = this.currTouch.x = x;
-              this.lastY = this.currTouch.y = y;
-              break;
+            }
+            if (this.touch1 && this.touch1.identifier) {
+              this.touch1 = null;
             }
           }
         }
         ev.preventDefault();
-      }, false);
+      };
+      element.addEventListener("touchend", touchEnd, false);
+      element.addEventListener("touchcancel", touchEnd);
     }
     addListener(listener) {
       this.listeners.push(listener);
@@ -9436,6 +9451,72 @@ var spine = (() => {
     }
   };
 
+  // spine-webgl/src/CameraController.ts
+  var CameraController = class {
+    constructor(canvas, camera) {
+      this.canvas = canvas;
+      this.camera = camera;
+      let cameraX = 0, cameraY = 0, cameraZoom = 0;
+      let mouseX = 0, mouseY = 0;
+      let lastX = 0, lastY = 0;
+      let initialZoom = 0;
+      new Input(canvas).addListener({
+        down: (x, y) => {
+          cameraX = camera.position.x;
+          cameraY = camera.position.y;
+          mouseX = lastX = x;
+          mouseY = lastY = y;
+          initialZoom = camera.zoom;
+        },
+        dragged: (x, y) => {
+          let deltaX = x - mouseX;
+          let deltaY = y - mouseY;
+          let originWorld = camera.screenToWorld(new Vector3(0, 0), canvas.clientWidth, canvas.clientHeight);
+          let deltaWorld = camera.screenToWorld(new Vector3(deltaX, deltaY), canvas.clientWidth, canvas.clientHeight).sub(originWorld);
+          camera.position.set(cameraX - deltaWorld.x, cameraY - deltaWorld.y, 0);
+          camera.update();
+          lastX = x;
+          lastY = y;
+        },
+        wheel: (delta) => {
+          let zoomAmount = delta / 200 * camera.zoom;
+          let newZoom = camera.zoom + zoomAmount;
+          if (newZoom > 0) {
+            let x = 0, y = 0;
+            if (delta < 0) {
+              x = lastX;
+              y = lastY;
+            } else {
+              let viewCenter = new Vector3(canvas.clientWidth / 2 + 15, canvas.clientHeight / 2);
+              let mouseToCenterX = lastX - viewCenter.x;
+              let mouseToCenterY = canvas.clientHeight - 1 - lastY - viewCenter.y;
+              x = viewCenter.x - mouseToCenterX;
+              y = canvas.clientHeight - 1 - viewCenter.y + mouseToCenterY;
+            }
+            let oldDistance = camera.screenToWorld(new Vector3(x, y), canvas.clientWidth, canvas.clientHeight);
+            camera.zoom = newZoom;
+            camera.update();
+            let newDistance = camera.screenToWorld(new Vector3(x, y), canvas.clientWidth, canvas.clientHeight);
+            camera.position.add(oldDistance.sub(newDistance));
+            camera.update();
+          }
+        },
+        zoom: (initialDistance, distance) => {
+          let newZoom = initialDistance / distance;
+          camera.zoom = initialZoom * newZoom;
+        },
+        up: (x, y) => {
+          lastX = x;
+          lastY = y;
+        },
+        moved: (x, y) => {
+          lastX = x;
+          lastY = y;
+        }
+      });
+    }
+  };
+
   // spine-webgl/src/Shader.ts
   var _Shader = class {
     constructor(context, vertexShader, fragmentShader) {
@@ -9888,6 +9969,8 @@ var spine = (() => {
       gl.blendFuncSeparate(this.srcColorBlend, this.dstBlend, this.srcAlphaBlend, this.dstBlend);
     }
     setBlendMode(srcColorBlend, srcAlphaBlend, dstBlend) {
+      if (this.srcColorBlend == srcColorBlend && this.srcAlphaBlend == srcAlphaBlend && this.dstBlend == dstBlend)
+        return;
       this.srcColorBlend = srcColorBlend;
       this.srcAlphaBlend = srcAlphaBlend;
       this.dstBlend = dstBlend;