pxt-microbit 8.1.15 → 8.1.16

package/built/sim.js

@@ -4333,6 +4333,7 @@ path.sim-board {
                 this.shakeInitialized = false;
                 this.pinNmToCoord = {};
                 this.domHardwareVersion = 1;
+                this.bindings = [];
                 this.moveHeadingOnClick = (ev) => {
                     let pt = this.element.createSVGPoint();
                     let cur = pxsim.svg.cursorPoint(pt, this.element, ev);
@@ -4390,6 +4391,10 @@ path.sim-board {
                 });
             }
             removeEventListeners() {
+                for (const binding of this.bindings) {
+                    const el = binding.element || document;
+                    el.removeEventListener(binding.event, binding.handler);
+                }
                 document.body.removeEventListener(pxsim.pointerEvents.down[0], this.moveHeadingOnClick);
             }
             updateTheme() {
@@ -4914,9 +4919,10 @@ path.sim-board {
                 el.style.perspectiveOrigin = "50% 50% 50%";
                 el.style.perspective = "30em";
                 // don't display acc data when AB is on, v2 is on or soundLevel is on
+                const soundLevelVisible = this.soundLevel.style.visibility == "visible";
                 if (state.buttonPairState.usesButtonAB
                     || this.v2Circle
-                    || this.soundLevel) {
+                    || soundLevelVisible) {
                     if (this.accTextX)
                         this.accTextX.textContent = "";
                     if (this.accTextY)
@@ -5267,49 +5273,116 @@ path.sim-board {
             }
             attachAccelerometerEvents() {
                 let tiltDecayer = undefined;
-                this.element.addEventListener(pxsim.pointerEvents.move, (ev) => {
-                    const state = this.board;
-                    if (!state.accelerometerState.accelerometer.isActive)
-                        return;
-                    if (tiltDecayer) {
-                        clearInterval(tiltDecayer);
-                        tiltDecayer = 0;
-                    }
-                    const bbox = this.element.getBoundingClientRect();
-                    // ev.clientX and ev.clientY are not defined on mobile iOS
-                    const xPos = ev.clientX != null ? ev.clientX : ev.pageX;
-                    const yPos = ev.clientY != null ? ev.clientY : ev.pageY;
-                    const ax = (xPos - bbox.width / 2) / (bbox.width / 3);
-                    const ay = (yPos - bbox.height / 2) / (bbox.height / 3);
-                    const x = -Math.max(-1023, Math.min(1023, Math.floor(ax * 1023)));
-                    const y = -Math.max(-1023, Math.min(1023, Math.floor(ay * 1023)));
-                    const z2 = 1023 * 1023 - x * x - y * y;
-                    const z = Math.floor((z2 > 0 ? -1 : 1) * Math.sqrt(Math.abs(z2)));
-                    state.accelerometerState.accelerometer.update(x, y, z);
-                    this.updateTilt();
-                }, false);
-                this.element.addEventListener(pxsim.pointerEvents.leave, (ev) => {
-                    let state = this.board;
-                    if (!state.accelerometerState.accelerometer.isActive)
-                        return;
+                const state = this.board;
+                const startTiltDecay = () => {
                     if (!tiltDecayer) {
-                        tiltDecayer = setInterval(() => {
+                        const doDecay = () => {
                             let accx = state.accelerometerState.accelerometer.getX(pxsim.MicroBitCoordinateSystem.RAW);
                             accx = Math.floor(Math.abs(accx) * 0.85) * (accx > 0 ? 1 : -1);
                             let accy = state.accelerometerState.accelerometer.getY(pxsim.MicroBitCoordinateSystem.RAW);
                             accy = Math.floor(Math.abs(accy) * 0.85) * (accy > 0 ? 1 : -1);
                             let accz = -Math.sqrt(Math.max(0, 1023 * 1023 - accx * accx - accy * accy));
                             if (Math.abs(accx) <= 24 && Math.abs(accy) <= 24) {
-                                clearInterval(tiltDecayer);
+                                cancelAnimationFrame(tiltDecayer);
                                 tiltDecayer = 0;
                                 accx = 0;
                                 accy = 0;
                                 accz = -1023;
                             }
+                            else {
+                                tiltDecayer = requestAnimationFrame(doDecay);
+                            }
                             state.accelerometerState.accelerometer.update(accx, accy, accz);
                             this.updateTilt();
-                        }, 50);
+                        };
+                        tiltDecayer = requestAnimationFrame(doDecay);
+                    }
+                };
+                const handleMove = (xPos, yPos, boardWidth, boardHeight) => {
+                    if (yPos > boardHeight || xPos < 0 || xPos > boardWidth) {
+                        startTiltDecay();
+                        return;
+                    }
+                    if (tiltDecayer) {
+                        cancelAnimationFrame(tiltDecayer);
+                        tiltDecayer = undefined;
                     }
+                    const ax = (xPos - boardWidth / 2) / (boardWidth / 3);
+                    const ay = (yPos - boardHeight / 2) / (boardHeight / 3);
+                    const x = -Math.max(-1023, Math.min(1023, Math.floor(ax * 1023)));
+                    const y = -Math.max(-1023, Math.min(1023, Math.floor(ay * 1023)));
+                    const z2 = 1023 * 1023 - x * x - y * y;
+                    const z = Math.floor((z2 > 0 ? -1 : 1) * Math.sqrt(Math.abs(z2)));
+                    state.accelerometerState.accelerometer.update(x, y, z);
+                    this.updateTilt();
+                };
+                this.bindEvent(document, pxsim.pointerEvents.move, (ev) => {
+                    if (!state.accelerometerState.accelerometer.isActive)
+                        return;
+                    const boardElement = this.element;
+                    const parentSvg = this.findParentElement();
+                    const xPos = ev.clientX != null ? ev.clientX : ev.pageX;
+                    const yPos = ev.clientY != null ? ev.clientY : ev.pageY;
+                    // The outermost SVG has a transform applied to it to create the tilt
+                    // effect. In order to give us a constant bounding box to work with,
+                    // we want to calculate the pre-transform bounds of the board element
+                    // we can do this by comparing the aspect ratio of the page to the
+                    // viewbox of the board SVG, since it should always be maximized within
+                    // the page.
+                    const pageBounds = document.body.getBoundingClientRect();
+                    if (parentSvg && parentSvg !== this.element) {
+                        // If we are embedded in another SVG (e.g. the breadboard is present),
+                        // we need to do some extra work to find the bounding box of the board
+                        // element within the parent SVG.
+                        const parentViewBoxWidth = parentSvg.viewBox.baseVal.width;
+                        const parentViewBoxHeight = parentSvg.viewBox.baseVal.height;
+                        const aspectRatio = parentViewBoxWidth / parentViewBoxHeight;
+                        let parentWidth;
+                        let parentHeight;
+                        if (pageBounds.width / pageBounds.height > aspectRatio) {
+                            parentHeight = pageBounds.height;
+                            parentWidth = parentHeight * aspectRatio;
+                        }
+                        else {
+                            parentWidth = pageBounds.width;
+                            parentHeight = parentWidth / aspectRatio;
+                        }
+                        const parentLeft = pageBounds.left + (pageBounds.width - parentWidth) / 2;
+                        const parentTop = pageBounds.top + (pageBounds.height - parentHeight) / 2;
+                        const boardWidth = parseFloat(boardElement.getAttribute("width"));
+                        const boardHeight = parseFloat(boardElement.getAttribute("height"));
+                        const boardLeft = parseFloat(boardElement.getAttribute("x"));
+                        const boardTop = parseFloat(boardElement.getAttribute("y"));
+                        const boardPixelLeft = parentLeft + (boardLeft / parentViewBoxWidth) * parentWidth;
+                        const boardPixelTop = parentTop + (boardTop / parentViewBoxHeight) * parentHeight;
+                        const boardPixelWidth = (boardWidth / parentViewBoxWidth) * parentWidth;
+                        const boardPixelHeight = (boardHeight / parentViewBoxHeight) * parentHeight;
+                        handleMove(xPos - boardPixelLeft, yPos - boardPixelTop, boardPixelWidth, boardPixelHeight);
+                    }
+                    else {
+                        const boardViewboxWidth = this.element.viewBox.baseVal.width;
+                        const boardViewboxHeight = this.element.viewBox.baseVal.height;
+                        const aspectRatio = boardViewboxWidth / boardViewboxHeight;
+                        let boardWidth;
+                        let boardHeight;
+                        if (pageBounds.width / pageBounds.height > aspectRatio) {
+                            boardHeight = pageBounds.height;
+                            boardWidth = boardHeight * aspectRatio;
+                        }
+                        else {
+                            boardWidth = pageBounds.width;
+                            boardHeight = boardWidth / aspectRatio;
+                        }
+                        const boardLeft = pageBounds.left + (pageBounds.width - boardWidth) / 2;
+                        const boardTop = pageBounds.top + (pageBounds.height - boardHeight) / 2;
+                        handleMove(xPos - boardLeft, yPos - boardTop, boardWidth, boardHeight);
+                    }
+                }, false);
+                this.bindEvent(document, pxsim.pointerEvents.leave, (ev) => {
+                    let state = this.board;
+                    if (!state.accelerometerState.accelerometer.isActive)
+                        return;
+                    startTiltDecay();
                 }, false);
             }
             attachPinsIOEvents() {
@@ -5504,6 +5577,10 @@ path.sim-board {
             attachKeyboardEvents() {
                 pxsim.accessibility.postKeyboardEvent();
             }
+            bindEvent(element, eventName, handler, ...rest) {
+                element.addEventListener(eventName, handler, ...rest);
+                this.bindings.push({ element, event: eventName, handler });
+            }
         }
         visuals.MicrobitBoardSvg = MicrobitBoardSvg;
         const isHandledKey = (key) => {