chore: bigger border

Author: anig1scur

src/app.css

@@ -7,7 +7,7 @@ body {
   @apply absolute w-full h-full pointer-events-none overflow-hidden left-0 top-0;
 }
 .draggable-photo {
-  @apply absolute pointer-events-auto bg-contain bg-no-repeat cursor-grab opacity-0 animate-[fadeIn_0.3s_ease_forwards] active:cursor-grabbing active:z-[1000];
+  @apply absolute pointer-events-auto bg-contain bg-no-repeat cursor-grab opacity-0 animate-[fadeIn_0.3s_ease_forwards] active:cursor-grabbing will-change-transform;
   filter: drop-shadow(4px 0 0 #eee) drop-shadow(-4px 0 0 #eee)
     drop-shadow(0 4px 0 #eee) drop-shadow(0 -4px 0 #eee);
 

src/components/BookScene.ts

@@ -41,6 +41,7 @@ export class BookScene {
 
   private initialCameraOffset = isDev() ? new THREE.Vector3(0, 0, 0) : new THREE.Vector3(5, -5, -4);
   private initialCameraUp = isDev() ? new THREE.Vector3(0, 1, 0) : new THREE.Vector3(-2, 3, 3);
+  // FIXME: mobile dev 视角有问题
 
   public openingAnimationStatus: 'none' | 'playing' | 'played' = isDev() ? 'played' : 'none';
 
@@ -67,8 +68,6 @@ export class BookScene {
       this.videoOverlayManager
     );
 
-    this.handleResize();  //FIXME: 现在这个 handleResize 不可以放在后面执行
-
     this.renderer.setSize(container.clientWidth, container.clientHeight);
     this.renderer.toneMapping = THREE.NoToneMapping;
     this.renderer.localClippingEnabled = true;
@@ -79,6 +78,9 @@ export class BookScene {
     this.setUpLight();
     // this.setupLightControls();
 
+    this.handleResize();  //FIXME: 现在这个 handleResize 不可以放在后面执行
+    window.addEventListener('resize', () => this.handleResize());
+
     this.camera.position.add(this.initialCameraOffset);
     this.camera.up.copy(this.initialCameraUp);
     this.camera.lookAt(0, 0, 0);
@@ -87,7 +89,6 @@ export class BookScene {
     // const axesHelper = new THREE.AxesHelper(5);
     // this.scene.add(axesHelper);
 
-    window.addEventListener('resize', () => this.handleResize());
   }
 
   private setUpLight() {

src/components/IconManager.ts

@@ -213,10 +213,9 @@ export class IconManager {
       let newY = clientY - offsetY;
 
       const containerRect = this.photoContainer.getBoundingClientRect();
-      const elRect = el.getBoundingClientRect();
 
-      newX = Math.max(0, Math.min(newX, containerRect.width - elRect.width));
-      newY = Math.max(0, Math.min(newY, containerRect.height - elRect.height));
+      newX = Math.max(-el.clientWidth, Math.min(newX, containerRect.width));
+      newY = Math.max(-el.clientHeight, Math.min(newY, containerRect.height));
 
       el.style.left = `${ newX }px`;
       el.style.top = `${ newY }px`;