* _tform * On each tick, manage the scene's transform * The few things we do here involve: * - if there is a transform ease in progress, compute the eased transform * - if the dimensions have changed, update the supersurface and overlay. * - if the transform has changed from the la
()
| 360 | * apply the difference to the supersurface and overlay |
| 361 | */ |
| 362 | _tform() { |
| 363 | // Between APP and DRAW we dont want to change the transform at all. |
| 364 | // This shouldn't happen, but we check for it just in case. |
| 365 | if (this._drawPending) return; |
| 366 | |
| 367 | const context = this.context; |
| 368 | const mapViewport = context.viewport; |
| 369 | const pixiViewport = this._pixiViewport; |
| 370 | |
| 371 | // Calculate the transform easing, if any |
| 372 | if (this._transformEase) { |
| 373 | const now = window.performance.now(); |
| 374 | |
| 375 | const { time0, time1, xform0, xform1, resolve } = this._transformEase; |
| 376 | const [x0, y0, k0] = [xform0.x, xform0.y, xform0.k]; |
| 377 | const [x1, y1, k1] = [xform1.x, xform1.y, xform1.k]; |
| 378 | |
| 379 | // For rotation, pick whichever direction is shorter |
| 380 | const r0 = numWrap(xform0.r, 0, TAU); |
| 381 | let r1 = numWrap(xform1.r, 0, TAU); |
| 382 | if (Math.abs(r1 - r0) > Math.PI) { // > 180° |
| 383 | r1 += (r1 < r0) ? TAU : -TAU; |
| 384 | } |
| 385 | |
| 386 | // Keep it simple - linear interpolate |
| 387 | const tween = Math.max(0, Math.min(1, (now - time0) / (time1 - time0))); |
| 388 | const xNow = x0 + ((x1 - x0) * tween); |
| 389 | const yNow = y0 + ((y1 - y0) * tween); |
| 390 | const kNow = k0 + ((k1 - k0) * tween); |
| 391 | const rNow = r0 + ((r1 - r0) * tween); |
| 392 | const tNow = { x: xNow, y: yNow, k: kNow, r: rNow }; |
| 393 | mapViewport.transform = tNow; // set |
| 394 | |
| 395 | if (tween === 1) { // we're done |
| 396 | resolve(tNow); |
| 397 | this._transformEase = null; |
| 398 | } |
| 399 | this._appPending = true; // needs occasional renders during/after easing |
| 400 | } |
| 401 | |
| 402 | // Determine if the dimensions have changed. |
| 403 | const mapDims = mapViewport.dimensions; |
| 404 | const pixiDims = pixiViewport.dimensions; |
| 405 | const firstTime = vecEqual(pixiDims, [0, 0]); // haven't set dimensions yet? |
| 406 | |
| 407 | if (!vecEqual(mapDims, pixiDims)) { |
| 408 | // If the user is currently resizing the map, don't try changing the dimensions just yet. |
| 409 | const isResizing = context.container().classed('resizing'); |
| 410 | if (!isResizing) { |
| 411 | // Allow the Pixi dimensions to change, but only after the user is finished resizing.. |
| 412 | pixiViewport.dimensions = mapDims; |
| 413 | |
| 414 | // Un-pan map to keep it centered in the same spot. |
| 415 | // (x0.5 because the map grows/shrinks from the middle, so we only need to pan half this distance) |
| 416 | if (!firstTime) { |
| 417 | const [dw, dh] = vecScale(vecSubtract(mapDims, pixiDims), 0.5); |
| 418 | const t = mapViewport.transform; |
| 419 | mapViewport.transform = { x: t.x + dw, y: t.y + dh, k: t.k, r: t.r }; |
no test coverage detected