flow: room render

packages/topdown-persea/src/controllers/room/component.jsx

@@ -30,7 +30,7 @@ const RoomComponent = ({
   const {Room} = latus.get('%resources');
   const [room, setRoom] = useState();
   const [roomRenderable, setRoomRenderable] = useState();
-  const [viewport] = useState([320, 180]);
+  const [viewport, setViewport] = useState([0, 0]);
   useEffect(() => {
     setRoom();
     const loadRoom = async () => {
@@ -56,13 +56,12 @@ const RoomComponent = ({
     const load = async () => {
       await room.load(resource);
       const roomRenderable = new (room.constructor.Renderable)(room, renderer);
-      roomRenderable.renderChunksForExtent(Rectangle.compose(
-        [0, 0],
-        Vector.mul(
-          room.tiles[0].area,
-          room.tiles[0].tileSize,
-        ),
-      ));
+      const viewport = Vector.mul(
+        room.tiles[0].area,
+        room.tiles[0].tileSize,
+      );
+      setViewport(viewport);
+      roomRenderable.renderChunksForExtent(Rectangle.compose([0, 0], viewport));
       setRoomRenderable(roomRenderable);
     };
     load();
@@ -74,7 +73,6 @@ const RoomComponent = ({
     <div className="room-renderer">
       <Stage
         centered={false}
-        scalable={false}
         renderer={renderer}
         renderable={roomRenderable}
         size={viewport}

packages/topdown-persea/src/controllers/room/component.scss

@@ -0,0 +1,17 @@
+.room-renderer {
+
+  &, .stage, .canvas-host {
+    height: 100%;
+    width: 100%;
+  }
+
+  .canvas-host {
+    display: block;
+    overflow: scroll;
+    justify-content: flex-start;
+  }
+
+  .rc-slider {
+    display: none;
+  }
+}