fix: 全局 LED 配置样式问题。

src/App.tsx

@@ -4,6 +4,7 @@ import { invoke } from '@tauri-apps/api/tauri';
 import './App.css';
 import { Configurator } from './configurator/configurator';
 import { ButtonSwitch } from './commons/components/button';
+import { fillParentCss } from './styles/fill-parent';
 
 type Mode = 'Flowing' | 'Follow' | null;
 
@@ -40,7 +41,7 @@ function App() {
   );
 
   return (
-    <div>
+    <div css={[fillParentCss]} tw="box-border flex flex-col">
       <div tw="flex justify-between">
         {ledStripColors.map((it) => (
           <span tw="h-8 flex-auto" style={{ backgroundColor: it }}></span>
@@ -55,7 +56,7 @@ function App() {
         ))}
       </div>
 
-      <div tw="flex gap-5 justify-center ">
+      <div tw="flex gap-5 justify-center">
         <ButtonSwitch onClick={() => takeSnapshot()}>Take Snapshot</ButtonSwitch>
         <ButtonSwitch onClick={() => getLedStripColors()}>Get Colors</ButtonSwitch>
         <ButtonSwitch onClick={() => switchCurrentMode('Flowing')}>
@@ -64,7 +65,7 @@ function App() {
         <ButtonSwitch onClick={() => switchCurrentMode('Follow')}>Follow</ButtonSwitch>
       </div>
 
-      <div tw="flex gap-5 justify-center">
+      <div css={[fillParentCss]}>
         <Configurator />
       </div>
     </div>

src/configurator/components/completed-container.tsx

@@ -0,0 +1,62 @@
+import { isNil } from 'ramda';
+import { FC, Fragment, useMemo } from 'react';
+import tw, { css, styled } from 'twin.macro';
+import { useLedCount } from '../contents/led-count';
+import { PixelRgb } from '../models/pixel-rgb';
+import { StyledPixel } from './styled-pixel';
+import { BorderLedStrip } from './completed-led-strip';
+
+const StyledCompletedContainerBorder = styled.section(
+  tw`dark:shadow-xl border-gray-600 bg-black border rounded-full flex flex-nowrap justify-around items-center p-px h-3 mb-1`,
+  css`
+    grid-column: 1 / -1;
+    grid-row: 1 / span 1;
+    justify-self: stretch;
+  `,
+);
+interface StyledCompletedContainerProps {
+  borderLedStrips: BorderLedStrip[];
+  overrideBorderLedStrips?: BorderLedStrip[];
+}
+export const CompletedContainer: FC<StyledCompletedContainerProps> = ({
+  borderLedStrips,
+  overrideBorderLedStrips,
+}) => {
+  const { ledCount } = useLedCount();
+  const completedPixels = useMemo(() => {
+    const completed: PixelRgb[] = new Array(ledCount).fill([0, 0, 0]);
+    (overrideBorderLedStrips ?? borderLedStrips).forEach(({ pixels, config }) => {
+      if (isNil(config)) {
+        return;
+      }
+      if (config.global_start_position <= config.global_end_position) {
+        pixels.forEach((color, i) => {
+          completed[config.global_start_position + i] = color;
+        });
+      } else {
+        pixels.forEach((color, i) => {
+          completed[config.global_start_position - i] = color;
+        });
+      }
+    });
+
+    return completed.map((color, i) => (
+      <StyledPixel
+        rgb={color}
+        key={i}
+        css={css`
+          grid-row-start: 1;
+          grid-column-start: ${i + 1};
+          align-self: flex-start;
+        `}
+      />
+    ));
+  }, [ledCount, borderLedStrips, overrideBorderLedStrips]);
+
+  return (
+    <Fragment>
+      <StyledCompletedContainerBorder />
+      {completedPixels}
+    </Fragment>
+  );
+};

src/configurator/components/completed-led-strip.tsx

@@ -1,5 +1,5 @@
 import debug from 'debug';
-import { isNil, lensPath, set, splitEvery, update } from 'ramda';
+import { lensPath, set, splitEvery, update } from 'ramda';
 import { FC, useEffect, useMemo, useState } from 'react';
 import tw, { css, styled } from 'twin.macro';
 import { Borders, borders } from '../../constants/border';
@@ -8,8 +8,8 @@ import { DisplayConfig, LedStripConfigOfBorders } from '../models/display-config
 import { LedStripConfig } from '../models/led-strip-config';
 import { PixelRgb } from '../models/pixel-rgb';
 import { ScreenshotDto } from '../models/screenshot.dto';
+import { CompletedContainer } from './completed-container';
 import { DraggableStrip } from './draggable-strip';
-import { StyledPixel } from './styled-pixel';
 
 export const logger = debug('app:completed-led-strip');
 
@@ -18,7 +18,7 @@ interface CompletedLedStripProps {
   onDisplayConfigChange?: (value: DisplayConfig) => void;
 }
 
-type BorderLedStrip = {
+export type BorderLedStrip = {
   pixels: PixelRgb[];
   config: LedStripConfig | null;
 };
@@ -26,20 +26,13 @@ type BorderLedStrip = {
 const StyledContainer = styled.section(
   ({ rows, columns }: { rows: number; columns: number }) => [
     tw`grid m-4 pb-2 items-center justify-items-center select-none`,
+    tw`overflow-x-auto overflow-y-hidden flex-none`,
     css`
-      grid-template-columns: repeat(${columns}, 1fr);
+      grid-template-columns: repeat(${columns}, 0.5em);
-      grid-template-rows: auto repeat(${rows}, 1fr);
+      grid-template-rows: auto repeat(${rows}, 0.5em);
     `,
   ],
 );
-const StyledCompletedContainer = styled.section(
-  tw`dark:bg-transparent shadow-xl border-gray-500 border rounded-full flex flex-wrap justify-around items-center mb-2`,
-  css`
-    grid-column: 1 / -1;
-    justify-self: stretch;
-  `,
-);
-
 export const CompletedLedStrip: FC<CompletedLedStripProps> = ({
   screenshots,
   onDisplayConfigChange,
@@ -56,6 +49,18 @@ export const CompletedLedStrip: FC<CompletedLedStripProps> = ({
     () => borderLedStrips.reduce((prev, curr) => prev + curr.pixels.length, 0),
     [borderLedStrips],
   );
+  const maxIndex = useMemo(
+    () =>
+      Math.max(
+        ...borderLedStrips
+          .map((s) => [
+            s.config?.global_end_position ?? 0,
+            s.config?.global_start_position ?? 0,
+          ])
+          .flat(),
+      ),
+    [borderLedStrips],
+  );
 
   const { setLedCount } = useLedCount();
   // setLedCount for context
@@ -66,26 +71,6 @@ export const CompletedLedStrip: FC<CompletedLedStripProps> = ({
   const [overrideBorderLedStrips, setOverrideBorderLedStrips] =
     useState<BorderLedStrip[]>();
 
-  const completedPixels = useMemo(() => {
-    const completed: PixelRgb[] = new Array(ledCount).fill([0, 0, 0]);
-    (overrideBorderLedStrips ?? borderLedStrips).forEach(({ pixels, config }) => {
-      if (isNil(config)) {
-        return;
-      }
-      if (config.global_start_position <= config.global_end_position) {
-        pixels.forEach((color, i) => {
-          completed[config.global_start_position + i] = color;
-        });
-      } else {
-        pixels.forEach((color, i) => {
-          completed[config.global_start_position - i] = color;
-        });
-      }
-    });
-
-    return completed.map((color, i) => <StyledPixel rgb={color} key={i} />);
-  }, [ledCount, borderLedStrips, overrideBorderLedStrips]);
-
   const strips = useMemo(() => {
     return borderLedStrips.map(({ config, pixels }, index) =>
       config ? (
@@ -123,11 +108,12 @@ export const CompletedLedStrip: FC<CompletedLedStripProps> = ({
     setOverrideBorderLedStrips(undefined);
   }, [borderLedStrips]);
   return (
-    <StyledContainer rows={screenshots.length * borders.length} columns={ledCount}>
+    <StyledContainer rows={screenshots.length * borders.length} columns={maxIndex + 1}>
-      <StyledCompletedContainer>{completedPixels}</StyledCompletedContainer>
+      <CompletedContainer
+        borderLedStrips={borderLedStrips}
+        overrideBorderLedStrips={overrideBorderLedStrips}
+      />
       {strips}
     </StyledContainer>
   );
 };
-
-

src/configurator/configurator.tsx

@@ -14,6 +14,7 @@ import { CompletedLedStrip } from './components/completed-led-strip';
 import { LedCountProvider } from './contents/led-count';
 import debug from 'debug';
 import { useSnackbar } from 'notistack';
+import { fillParentCss } from '../styles/fill-parent';
 
 const logger = debug('app:configurator');
 
@@ -33,7 +34,8 @@ const writePickerConfig = async (config: PickerConfiguration) => {
   });
 };
 const StyledConfiguratorContainer = styled.section(
-  tw`flex flex-col items-stretch relative`,
+  tw`flex flex-col items-stretch relative overflow-hidden`,
+  fillParentCss,
 );
 
 const StyledDisplayContainer = styled.section(tw`overflow-auto`);
@@ -117,7 +119,7 @@ const ConfiguratorInner: FC = () => {
         screenshots={screenshotOfDisplays}
         onDisplayConfigChange={onDisplayConfigChange}
       />
-      <StyledDisplayContainer>{displays}</StyledDisplayContainer>
+      <StyledDisplayContainer tw="overflow-y-auto">{displays}</StyledDisplayContainer>
       <Fab
         aria-label="reset"
         size="small"

src/styles/fill-parent.ts

@@ -0,0 +1,3 @@
+import tw from 'twin.macro';
+
+export const fillParentCss = tw`w-full h-full overflow-hidden`;

src/styles/global-styles.tsx

@@ -1,13 +1,28 @@
 import React from 'react';
 import { Global, css } from '@emotion/react';
 import tw, { theme, GlobalStyles as BaseStyles } from 'twin.macro';
+import { fillParentCss } from './fill-parent';
 
 const customStyles = css({
   body: {
     WebkitTapHighlightColor: theme`colors.purple.500`,
     ...tw`antialiased`,
     ...tw`dark:bg-dark-800 bg-dark-100 dark:text-gray-100 text-gray-800`,
+    ...fillParentCss,
   },
+  html: {
+    ...fillParentCss,
+  },
+  '#root': {
+    ...fillParentCss,
+  },
+  '::-webkit-scrollbar': tw`w-1.5 h-1.5`,
+  '::-webkit-scrollbar-button': tw`hidden`,
+  '::-webkit-scrollbar-track': tw`bg-transparent`,
+  '::-webkit-scrollbar-track-piece': tw`bg-transparent`,
+  '::-webkit-scrollbar-thumb': tw`bg-gray-300 dark:(bg-gray-700/50 hover:bg-gray-700/90 active:bg-gray-700/100) transition-colors rounded-full`,
+  '::-webkit-scrollbar-corner': tw`bg-gray-600`,
+  '::-webkit-resizer': tw`hidden`,
 });
 
 const GlobalStyles = () => (