style: add map stylesheet

src/components/layer/DraggableLayerContainer.tsx

@@ -23,21 +23,8 @@ export const DraggableLayerContainer = component$(({ screenLeftTop }: Props) =>
   });
 
   return <div
-    style={{
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      transform: `translate(${-1 * screenLeftTop.x}px, ${-1 * screenLeftTop.y}px)`,
-    }}>
-    <div
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        // transform: `scale(${scale})`,
-        transition: 'transform 2.5s',
-      }}>
-      <Slot />
-    </div>
+    class={'layer_container'}
+    style={{ transform: `translate(${-1 * screenLeftTop.x}px, ${-1 * screenLeftTop.y}px)` }}>
+    <Slot />
   </div>;
 });

src/components/layer/MapTileLayer.tsx

@@ -18,24 +18,24 @@ export const MapTileLayer = component$(({ level, screenLeftTop, mapLeftTop }: Pr
   const { start, last } = getTileRange({ mapLeftTop, windowRect, padding: 3 });
   const tilePoints = generatePointListInRange(start, last);
 
-  return <div>
+  return <div class={'tile_layer'}>
     {tilePoints.map(({ x, y }) =>
       isValidPoint(x, y, getColumnCount(level)) && <MapTile x={x} y={y} level={level} mapLeftTop={mapLeftTop} />,
     )}
   </div>;
 });
 
-const MapTile = component$(({ x, y, level, mapLeftTop }: { x: number, y: number; level: number, mapLeftTop: Point }) => (
+const MapTile = component$(({ x, y, level, mapLeftTop }: {
+  x: number,
+  y: number;
+  level: number,
+  mapLeftTop: Point
+}) => (
   <div
     key={x + ',' + y}
+    class={'tile'}
     style={{
-      userSelect: 'none',
-      position: 'absolute',
       transform: `translate(${mapLeftTop.x + x * ORIGINAL_TILE_SIZE}px, ${mapLeftTop.y + y * ORIGINAL_TILE_SIZE}px)`,
-      width: ORIGINAL_TILE_SIZE,
-      height: ORIGINAL_TILE_SIZE,
-      backgroundSize: 'contain',
-      backgroundRepeat: 'no-repeat',
       backgroundImage: `url(${getFileName(x, y, level)}`,
     }}>
     {x}, {y}

src/components/layer/MarkerLayer.tsx

@@ -0,0 +1,24 @@
+import { component$ } from '@builder.io/qwik';
+import { Marker } from '../../data/marker.ts';
+import { Point } from '../../type/Point.ts';
+
+type Props = {
+  markerList: Marker[];
+  mapLeftTop: Point;
+  scale: number;
+}
+
+export const MarkerLayer = component$(({ markerList, mapLeftTop, scale }: Props) => {
+  return (
+    <div class={'marker_layer'}>
+      {markerList.map(({ position }) => (
+        <div
+          class={'marker'}
+          style={{
+            transform: `translate(${mapLeftTop.x + position.x * scale - 12}px, ${mapLeftTop.y + position.y * scale - 12}px)`,
+          }}
+        />
+      ))}
+    </div>
+  );
+});

src/components/tools/ToolBoxContainer.tsx

@@ -1,21 +1,13 @@
 import { component$, Signal } from '@builder.io/qwik';
 import { isValidLevel } from '../../business/map/validator.ts';
 import { Point } from '../../type/Point.ts';
-import { convertPointToOtherLeftTop } from '../../util/point.ts';
 
 type Props = {
   level: Signal<number>;
   screenLeftTop: Point;
-  mapLeftTop: Point;
-  onClickPoint: (clickedPoint: Point) => void;
 }
 
-export const ToolBoxContainer = component$(({ level, screenLeftTop, mapLeftTop, onClickPoint }: Props) => {
-  window.addEventListener('click', ({ clientX, clientY }) => {
-    const clickedPoint = convertPointToOtherLeftTop({ x: clientX, y: clientY }, screenLeftTop, mapLeftTop);
-    onClickPoint({ x: Math.floor(clickedPoint.x), y: Math.floor(clickedPoint.y) });
-  });
-
+export const ToolBoxContainer = component$(({ level, screenLeftTop }: Props) => {
   return <div style={{ position: 'fixed', top: 0, left: 0, backgroundColor: 'white', color: 'black' }}>
     <strong>tools</strong>
     <div>

src/page/app.tsx

@@ -1,5 +1,6 @@
-import { $, component$, QwikWheelEvent, useSignal, useStore } from '@builder.io/qwik';
+import { $, component$, QwikMouseEvent, QwikWheelEvent, useSignal, useStore } from '@builder.io/qwik';
 import './app.css';
+import './map.css';
 import { MapTileLayer } from '../components/layer/MapTileLayer.tsx';
 import { DraggableLayerContainer } from '../components/layer/DraggableLayerContainer.tsx';
 import { Point } from '../type/Point.ts';
@@ -9,17 +10,17 @@ import { isValidLevel } from '../business/map/validator.ts';
 import { getZoomScale } from '../business/map/calculator.ts';
 import { MarkerList } from '../data/marker.ts';
 import { convertLeftTopBy, convertPointToOtherLeftTop } from '../util/point.ts';
+import { MarkerLayer } from '../components/layer/MarkerLayer.tsx';
 
 export const App = component$(() => {
   const level = useSignal(MAX_ZOOM_LEVEL);
   const scale = getZoomScale(level.value);
 
   const screenLeftTop = useStore<Point>({ x: 0, y: 0 });
   const mapLeftTop = useStore<Point>({ x: -(ORIGINAL_MAP_WIDTH - innerWidth) / 2, y: -(ORIGINAL_MAP_HEIGHT - innerHeight) / 2 });
-  const markerList = useStore<Point[]>([]);
 
   const onWheel = $(({ deltaY, clientX, clientY }: QwikWheelEvent) => {
-    const changedLevel = level.value + 1 * (deltaY > 0 ? -1 : 1);
+    const changedLevel = level.value + 1 * (deltaY > 0 ? 1 : -1);
     if (!isValidLevel(changedLevel)) return;
 
     const point = convertPointToOtherLeftTop({ x: clientX, y: clientY }, screenLeftTop, mapLeftTop);
@@ -30,47 +31,24 @@ export const App = component$(() => {
     level.value = changedLevel;
   });
 
+  const onClick = $(({ clientX, clientY }: QwikMouseEvent) => {
+    const clickedPoint = convertPointToOtherLeftTop({ x: clientX, y: clientY }, screenLeftTop, mapLeftTop);
+    const flooredPoint = { x: Math.floor(clickedPoint.x), y: Math.floor(clickedPoint.y) };
+    console.log(flooredPoint);
+  });
+
   return (
     <div style={{ width: '100%', height: '100%' }}>
-      <div style={{
-        position: 'relative',
-        width: '100dvw',
-        height: '100dvh',
-        overflow: 'hidden',
-        touchAction: 'none',
-      }} onWheel$={onWheel}>
+      <div id={'map'} onWheel$={onWheel} onClick$={onClick}>
         <DraggableLayerContainer screenLeftTop={screenLeftTop} level={level.value}>
           <MapTileLayer screenLeftTop={screenLeftTop} mapLeftTop={mapLeftTop} level={level.value} />
-          <div>
-            {markerList.map(point => (
-              <div
-                style={{ position: 'absolute', transform: `translate(${mapLeftTop.x + point.x}px, ${mapLeftTop.y + point.y}px)`, fontSize: '24px' }}>
-                ({point.x}, {point.y})
-              </div>
-            ))}
-            {MarkerList.map(({ position }) => (
-              <div
-                style={{
-                  position: 'absolute',
-                  transform: `translate(${mapLeftTop.x + position.x * scale - 12}px, ${mapLeftTop.y + position.y * scale - 12}px)`,
-                  width: '24px',
-                  height: '24px',
-                  borderRadius: '999px',
-                  backgroundColor: 'white',
-                }}
-                onClick$={() => console.log(position, scale)}
-              />
-            ))}
-          </div>
+          <MarkerLayer markerList={MarkerList} mapLeftTop={mapLeftTop} scale={scale} />
         </DraggableLayerContainer>
       </div>
       <ToolBoxContainer
         level={level}
         screenLeftTop={screenLeftTop}
-        mapLeftTop={mapLeftTop}
-        onClickPoint={$((point: Point) => {
-          markerList.push(point);
-        })} />
+      />
     </div>
   );
 });

src/page/map.css

@@ -0,0 +1,42 @@
+
+#map {
+    --tile-size: 1024px;
+    --marker-size: 24px;
+
+    position: relative;
+    width: 100dvw;
+    width: 100vw;
+    height: 100dvh;
+    height: 100vh;
+    overflow: hidden;
+    touch-action: none;
+}
+
+#map .layer_container {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+#map .layer_container .tile_layer {
+}
+
+#map .layer_container .marker_layer {
+}
+
+.tile_layer .tile {
+    user-select: none;
+    position: absolute;
+    width: var(--tile-size);
+    height: var(--tile-size);
+    background-size: contain;
+    background-repeat: no-repeat;
+}
+
+.marker_layer .marker {
+    width: var(--marker-size);
+    height: var(--marker-size);
+    position: absolute;
+    border-radius: 999px;
+    background-color: white;
+}