update transform origin & positioning

Author: softmarshmallow

editor/components/canvas/controller-zoom-control.tsx

@@ -15,7 +15,7 @@ export function ZoomControl({
 }) {
   const [isEditing, setIsEditing] = React.useState(false);
   const displayScale = (scale * 100).toFixed(0);
-  const mincontrol = 0.01;
+  const mincontrol = 0;
   return (
     <Wrapper>
       <Controls>

editor/components/canvas/interactive-canvas.tsx

@@ -48,7 +48,8 @@ const Controls = styled.div`
 
 const ScalingAreaStaticRoot = styled.div`
   display: flex;
-  align-items: center;
+  align-items: flex-start; // when transform origin is top center.
+  padding-top: 20px;
   justify-content: center;
   align-content: flex-start;
   align-self: stretch;
@@ -106,6 +107,7 @@ const ScalingArea = ({
     <div
       style={{
         transform: `scale(${scale})`,
+        transformOrigin: "top center",
       }}
     >
       {children}