fix: some change

zer0fire · Dec 28, 2023 · 17b767a · 17b767a
1 parent edb0d81
commit 17b767a
Show file tree

Hide file tree

Showing 12 changed files with 52 additions and 152 deletions.
diff --git a/.gitignore b/.gitignore
@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

diff --git a/dist/2022-place.png b/dist/2022-place.png
diff --git a/dist/assets/index-4dcfe413.js b/dist/assets/index-4dcfe413.js
diff --git a/dist/assets/index-6d687a8a.css b/dist/assets/index-6d687a8a.css
diff --git a/dist/favicon.ico b/dist/favicon.ico
diff --git a/dist/index.html b/dist/index.html
diff --git a/dist/manifest.json b/dist/manifest.json
diff --git a/dist/react.svg b/dist/react.svg
diff --git a/dist/summber-drawing-board.png b/dist/summber-drawing-board.png
diff --git a/dist/vite.svg b/dist/vite.svg
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
         "socket.io-client": "^4.4.1"
     },
     "scripts": {
-        "dev": "vite",
+        "dev": "vite --host",
         "build": "tsc && vite build",
         "test": "node scripts/test.js",
         "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",

diff --git a/src/components/PixelGrid/PixelGrid.tsx b/src/components/PixelGrid/PixelGrid.tsx
@@ -252,63 +252,63 @@ function PixelGrid({ onPickColor, currentColor, socket }: Props) {
     }, []);
 
     return (
-        <div
-            style={{
-                width: canvasWidth,
-                height: canvasHeight,
-                overflow: "hidden",
-                display: "inline-block",
-                border: "1px solid",
-                position: "relative",
-                left: "50%",
-                transform: "translate(-50%, 0)",
-            }}
-        >
-            {el &&
-                ReactDOM.createPortal(
-                    <button
-                        style={{ marginLeft: "20px" }}
-                        onClick={setPickColor}
-                    >
-                        {isPickingColor ? "正在取色" : "取色"}
-                    </button>,
-                    el
-                )}
+        <div style={{ display: "flex", justifyContent: "center" }}>
             <div
-                ref={canvasWrapper}
-                className="canvas-wrapper"
                 style={{
-                    position: "absolute",
-                    left: wrapperLeft,
-                    top: wrapperTop,
+                    width: canvasWidth,
+                    height: canvasHeight,
+                    overflow: "hidden",
+                    display: "inline-block",
+                    border: "1px solid",
+                    position: "relative",
                 }}
-                onMouseDown={handleWrapperMousedown}
-                onMouseMove={handleWrapperMouseMove}
-                onMouseUp={handleWrapperMouseup}
             >
-                <span
-                    className="dot-hover-box"
+                {el &&
+                    ReactDOM.createPortal(
+                        <button
+                            style={{ marginLeft: "20px" }}
+                            onClick={setPickColor}
+                        >
+                            {isPickingColor ? "正在取色" : "取色"}
+                        </button>,
+                        el
+                    )}
+                <div
+                    ref={canvasWrapper}
+                    className="canvas-wrapper"
                     style={{
-                        boxShadow: "0 0 1px black",
-                        width: `${zoomLevel}px`,
-                        height: `${zoomLevel}px`,
                         position: "absolute",
-                        left: dotHoveX * zoomLevel,
-                        top: dotHoveY * zoomLevel,
-                        zIndex: TOP_LAYER,
-                        pointerEvents: "none",
+                        left: wrapperLeft,
+                        top: wrapperTop,
                     }}
-                ></span>
-                <canvas
-                    style={{
-                        ...canvasStyle,
-                        transform: `scale(${zoomLevel})`,
-                        transformOrigin: "top left",
-                    }}
-                    // onWheel={handleZoom}
-                    ref={canvas}
-                    onMouseMove={handleCanvasMouseMove}
-                ></canvas>
+                    onMouseDown={handleWrapperMousedown}
+                    onMouseMove={handleWrapperMouseMove}
+                    onMouseUp={handleWrapperMouseup}
+                >
+                    <span
+                        className="dot-hover-box"
+                        style={{
+                            boxShadow: "0 0 1px black",
+                            width: `${zoomLevel}px`,
+                            height: `${zoomLevel}px`,
+                            position: "absolute",
+                            left: dotHoveX * zoomLevel,
+                            top: dotHoveY * zoomLevel,
+                            zIndex: TOP_LAYER,
+                            pointerEvents: "none",
+                        }}
+                    ></span>
+                    <canvas
+                        style={{
+                            ...canvasStyle,
+                            transform: `scale(${zoomLevel})`,
+                            transformOrigin: "top left",
+                        }}
+                        // onWheel={handleZoom}
+                        ref={canvas}
+                        onMouseMove={handleCanvasMouseMove}
+                    ></canvas>
+                </div>
             </div>
         </div>
     );
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,6 +10,7 @@ @@
     # production
     /build
+    /dist
     # misc
     .DS_Store
@@ Expand Down @@