some basic viewer

script/viewer/Panner/Panner.css

@@ -1,54 +0,0 @@
-.pan-zoom-element {
-  border: 1px solid #ccc;
-  position: relative;
-  overflow: hidden;
-  cursor: default;
-
-  .content-container {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-  }
-  .noselect {
-    user-select: none;
-  }
-}
-
-.zoommenu {
-  position: fixed;
-  color: #888;
-
-  bottom: 100px;
-  right: 0;
-  margin: 10px;
-  font-size: 200%;
-
-  opacity: 0.5;
-  transition: all 0.5s;
-
-  &:hover {
-    opacity: 1;
-  }
-
-  background-color: #f8f8f8;
-  border-radius: 5px;
-
-  div {
-    transition: all 0.5s;
-    width: 32px;
-    text-align: center;
-    cursor: pointer;
-    user-select: none;
-
-    &:hover {
-      color: #000;
-    }
-  }
-
-  div:first-child {
-    border-bottom: 1px solid #ddd;
-    margin: 0;
-  }
-}

script/viewer/Panner/Panner.tsx

@@ -85,9 +85,14 @@ export const Panner = (props: ParentProps<PannerProps>) => {
 		y: Math.floor(panner.screen.height / 2)
 	});
 
+	const pannerStyle = () => {
+		console.log(props.width, props.height, props.scale);
+		return {width: `${props.width}px`, height: `${props.height}px`}
+	};
+
 	return (
 		<div class="pan-zoom-element"
-			 style={{width: `${props.width}px`, height: `${props.height}px`}}
+			 style={pannerStyle()}
 			 onMouseDown={mouseDown}
 			 onWheel={mouseWheel}>
 			<div class="content-container noselect"