fix /ellipses, grid/svg css

runsascoded · Oct 4, 2023 · ae00bc0 · ae00bc0
1 parent 8a5088e
commit ae00bc0
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 15 deletions.
diff --git a/pages/ellipses.tsx b/pages/ellipses.tsx
@@ -26,20 +26,17 @@ export function getStaticProps() {
             cx: -0.82, cy: 0.38,
             rx: 1, ry: 2,
             degrees: 0,
-        },
-        {
+        }, {
             name: "B", color: 'blue',
             cx: -0.7, cy: 0.12,
             rx: 1.3, ry: 0.4,
             degrees: 114,
-        },
-        {
+        }, {
             name: "C", color: 'darkgoldenrod',
             cx: 0.5, cy: 1.52,
             rx: .94, ry: .48,
             degrees: 18,
-        },
-        {
+        }, {
             name: "D", color: 'green',
             cx: 0, cy: 0,
             rx: .6, ry: .48,

diff --git a/pages/index.module.scss b/pages/index.module.scss
@@ -119,10 +119,6 @@
     }
 
     .grid {
-      width: 100%;
-      padding: 0;
-      border: 0;
-
       .setLabel {
         user-select: none;
       }

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1322,7 +1322,8 @@ export function Body() {
         <div className={css.body}>
             <div className={`${css.row} ${css.content}`}>
                 <Grid
-                    className={css.grid}
+                    className={"row"}
+                    svgClassName={css.grid}
                     state={gridState}
                     resizableBottom={true}
                 >

diff --git a/src/components/grid.module.scss b/src/components/grid.module.scss
@@ -4,7 +4,6 @@
   margin-bottom: 0.5em;
 }
 .grid {
-  border: 1px solid black;
 }
 
 .gridLine {

diff --git a/src/components/grid.tsx b/src/components/grid.tsx
@@ -74,6 +74,7 @@ export type Props = {
     children: ReactNode
     outerChildren?: ReactNode
     className?: string
+    svgClassName?: string
 }
 
 export type ClientEvent = {
@@ -86,7 +87,7 @@ export type OffsetEvent = {
     offsetY: number
 }
 
-export default function Grid({ handleMouseMove, handleMouseDown, handleMouseUp, resizableBottom, state, children, outerChildren, className, }: Props) {
+export default function Grid({ handleMouseMove, handleMouseDown, handleMouseUp, resizableBottom, state, children, outerChildren, className, svgClassName, }: Props) {
     const svg = useRef<SVGSVGElement>(null)
     const {
         center: [ center, setCenter ],
@@ -273,7 +274,7 @@ export default function Grid({ handleMouseMove, handleMouseDown, handleMouseUp,
         <svg
             ref={svg}
             viewBox={`0 0 ${width} ${height}`}
-            className={`${css.grid} ${className || ''}`}
+            className={`${css.grid} ${svgClassName || ''}`}
             style={{ height }}
             onMouseDown={onMouseDown}
             onMouseMove={onMouseMove}
@@ -327,7 +328,7 @@ export default function Grid({ handleMouseMove, handleMouseDown, handleMouseUp,
 
     const scrollWheelNode = (
         <ReactScrollWheelHandler
-            className={`row ${css.scrollWheelHandler}`}
+            className={`${className || ''} ${css.scrollWheelHandler}`}
             timeout={0}
             preventScroll={true}
             upHandler={e => {

diff --git a/src/components/svg.module.scss b/src/components/svg.module.scss
@@ -4,6 +4,11 @@
   width: 300px;
   border: 1px solid black;
 
+  svg {
+    width: 100%;
+    padding: 0;
+    border: 0;
+  }
   .ellipses ellipse {
     fill-opacity: 0.2;
   }