feat: 配置结构调整和初步灯条配置界面。

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

@@ -0,0 +1,93 @@
+import { isNil, splitEvery } from 'ramda';
+import { FC, useMemo } from 'react';
+import tw, { css, styled } from 'twin.macro';
+import { borders } from '../../constants/border';
+import { DisplayConfig } from '../models/display-config';
+import { LedStripConfig } from '../models/led-strip-config';
+import { ScreenshotDto } from '../models/screenshot.dto';
+import { LedStrip } from './led-strip';
+import { StyledPixel } from './styled-pixel';
+
+interface CompletedLedStripProps {
+  screenshots: ScreenshotDto[];
+  onDisplayConfigChange?: (value: DisplayConfig) => void;
+}
+
+type BorderLedStrip = {
+  pixels: [number, number, number][];
+  config: LedStripConfig | null;
+};
+
+const StyledContainer = styled.section(
+  ({ rows, columns }: { rows: number; columns: number }) => [
+    tw`grid m-4 pb-2`,
+    css`
+      grid-template-columns: repeat(${columns}, 1fr);
+      grid-template-rows: auto repeat(${rows}, 1fr);
+    `,
+  ],
+);
+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;
+  `,
+);
+
+export const CompletedLedStrip: FC<CompletedLedStripProps> = ({
+  screenshots,
+  onDisplayConfigChange,
+}) => {
+  const borderLedStrips: BorderLedStrip[] = useMemo(() => {
+    return screenshots.flatMap((ss) =>
+      borders.map((b) => ({
+        pixels: splitEvery(3, Array.from(ss.colors[b])) as [number, number, number][],
+        config: ss.config.led_strip_of_borders[b],
+      })),
+    );
+  }, [screenshots]);
+  const ledCount = useMemo(
+    () => borderLedStrips.reduce((prev, curr) => prev + curr.pixels.length, 0),
+    [borderLedStrips],
+  );
+
+  const completedPixels = useMemo(() => {
+    const completed: [number, number, number][] = new Array(ledCount).fill([0, 0, 0]);
+    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) => <StyledPixel rgb={color} />);
+  }, [ledCount, borderLedStrips]);
+
+  const strips = useMemo(() => {
+    return borderLedStrips.map(({ config, pixels }, index) => (
+      <LedStrip
+        key={index}
+        colors={Uint8Array.from(pixels.flat())}
+        config={config}
+        css={css`
+          grid-column-start: ${(config?.global_start_position ?? 0) + 1};
+          grid-column-end: ${(config?.global_end_position ?? 0) + 1};
+        `}
+      />
+    ));
+  }, [borderLedStrips]);
+  return (
+    <StyledContainer rows={screenshots.length * borders.length} columns={ledCount}>
+      <StyledCompletedContainer>{completedPixels}</StyledCompletedContainer>
+      {strips}
+    </StyledContainer>
+  );
+};

src/configurator/components/display-with-led-strips.tsx

@@ -1,11 +1,15 @@
 import { HTMLAttributes, useCallback, useMemo } from 'react';
 import { FC } from 'react';
-import { DisplayConfig } from '../models/display-config';
+import { DisplayConfig, LedStripConfigOfBorders } from '../models/display-config';
 import { LedStrip } from './led-strip';
 import tw, { css, styled, theme } from 'twin.macro';
 import { ScreenshotDto } from '../models/screenshot.dto';
 import { LedStripEditor } from './led-strip-editor';
 import { LedStripConfig } from '../models/led-strip-config';
+import debug from 'debug';
+import { lensPath, lensProp, set, view } from 'ramda';
+
+const logger = debug('app:display-with-led-strips');
 
 export interface DisplayWithLedStripsProps
   extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
@@ -36,61 +40,60 @@ export const DisplayWithLedStrips: FC<DisplayWithLedStripsProps> = ({
   );
 
   const onLedStripConfigChange = useCallback(
-    (
-      position:
-        | 'top_led_strip'
-        | 'left_led_strip'
-        | 'right_led_strip'
-        | 'bottom_led_strip',
-      value: LedStripConfig | null,
-    ) => {
-      const c = { ...config, [position]: value };
+    (position: keyof LedStripConfigOfBorders, value: LedStripConfig | null) => {
+      const xLens = lensPath<
+        DisplayConfig,
+        'led_strip_of_borders',
+        keyof LedStripConfigOfBorders
+      >(['led_strip_of_borders', position]);
+      const c = set(xLens, value, config);
+      logger('on change. prev: %o, curr: %o', view(xLens, config), value);
       onChange?.(c);
     },
     [config],
   );
   return (
     <StyledContainer {...htmlAttrs}>
-      <img src={screenshotUrl} tw="row-start-3 col-start-3" />
+      <img src={screenshotUrl} tw="row-start-3 col-start-3 w-full" />
       <LedStrip
-        config={config.top_led_strip}
+        config={config.led_strip_of_borders.top}
         colors={screenshot.colors.top}
         tw="row-start-2 col-start-3"
       />
       <LedStrip
-        config={config.left_led_strip}
+        config={config.led_strip_of_borders.left}
         colors={screenshot.colors.left}
         tw="row-start-3 col-start-2"
       />
       <LedStrip
-        config={config.right_led_strip}
+        config={config.led_strip_of_borders.right}
         colors={screenshot.colors.right}
         tw="row-start-3 col-start-4"
       />
       <LedStrip
-        config={config.bottom_led_strip}
+        config={config.led_strip_of_borders.bottom}
         colors={screenshot.colors.bottom}
         tw="row-start-4 col-start-3"
       />
       <LedStripEditor
-        config={config.top_led_strip}
+        config={config.led_strip_of_borders.top}
         tw="row-start-1 col-start-3"
-        onChange={(value) => onLedStripConfigChange('top_led_strip', value)}
+        onChange={(value) => onLedStripConfigChange('top', value)}
       />
       <LedStripEditor
-        config={config.left_led_strip}
+        config={config.led_strip_of_borders.left}
         tw="row-start-3 col-start-1"
-        onChange={(value) => onLedStripConfigChange('left_led_strip', value)}
+        onChange={(value) => onLedStripConfigChange('left', value)}
       />
       <LedStripEditor
-        config={config.right_led_strip}
+        config={config.led_strip_of_borders.right}
         tw="row-start-3 col-start-5"
-        onChange={(value) => onLedStripConfigChange('right_led_strip', value)}
+        onChange={(value) => onLedStripConfigChange('right', value)}
       />
       <LedStripEditor
-        config={config.bottom_led_strip}
+        config={config.led_strip_of_borders.bottom}
         tw="row-start-5 col-start-3"
-        onChange={(value) => onLedStripConfigChange('bottom_led_strip', value)}
+        onChange={(value) => onLedStripConfigChange('bottom', value)}
       />
     </StyledContainer>
   );

src/configurator/components/led-strip.tsx

@@ -3,6 +3,7 @@ import { FC } from 'react';
 import { LedStripConfig } from '../models/led-strip-config';
 import tw, { css, styled } from 'twin.macro';
 import { splitEvery } from 'ramda';
+import { StyledPixel } from './styled-pixel';
 
 export interface LedStripProps extends HTMLAttributes<HTMLElement> {
   config: LedStripConfig | null;
@@ -10,19 +11,10 @@ export interface LedStripProps extends HTMLAttributes<HTMLElement> {
 }
 
 const StyledContainer = styled.section(
-  tw`dark:bg-transparent shadow-xl border-gray-500 border rounded-full flex flex-wrap justify-around items-center`,
+  tw`dark:bg-transparent shadow-xl border-gray-500 border rounded-full flex flex-wrap justify-around items-center -mx-px -mt-px`,
   css``,
 );
 
-const StyledPixel = styled.span(
-  ({ rgb: [r, g, b] }: { rgb: [number, number, number] }) => [
-    tw`rounded-full h-3 w-3 bg-current block border border-gray-700`,
-    css`
-      color: rgb(${r}, ${g}, ${b});
-    `,
-  ],
-);
-
 export const LedStrip: FC<LedStripProps> = ({ config, colors, ...htmlAttrs }) => {
   const pixels = useMemo(() => {
     const pixels = splitEvery(3, Array.from(colors)) as Array<[number, number, number]>;

src/configurator/components/styled-pixel.tsx

@@ -0,0 +1,10 @@
+import tw, { css, styled } from 'twin.macro';
+
+export const StyledPixel = styled.span(
+  ({ rgb: [r, g, b] }: { rgb: [number, number, number] }) => [
+    tw`rounded-full h-3 w-3 bg-current block border border-gray-700`,
+    css`
+      color: rgb(${r}, ${g}, ${b});
+    `,
+  ],
+);

src/configurator/configurator.tsx

@@ -1,6 +1,6 @@
 import { invoke } from '@tauri-apps/api';
 import { FC, Fragment, useCallback, useEffect, useMemo, useState } from 'react';
-import tw from 'twin.macro';
+import tw, { styled } from 'twin.macro';
 import { useAsync, useAsyncCallback } from 'react-async-hook';
 import { DisplayWithLedStrips } from './components/display-with-led-strips';
 import { PickerConfiguration } from './models/picker-configuration';
@@ -10,6 +10,7 @@ import { Alert, Snackbar } from '@mui/material';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { update } from 'ramda';
+import { CompletedLedStrip } from './components/completed-led-strip';
 
 const getPickerConfig = () => invoke<PickerConfiguration>('get_picker_config');
 const getScreenshotOfDisplays = () =>
@@ -26,6 +27,9 @@ const writePickerConfig = async (config: PickerConfiguration) => {
     config,
   });
 };
+const StyledConfiguratorContainer = styled.section(tw`flex flex-col items-stretch`);
+
+const StyledDisplayContainer = styled.section(tw`overflow-auto`);
 
 export const Configurator: FC = () => {
   const { loading: pendingPickerConfig, result: savedPickerConfig } = useAsync(
@@ -91,13 +95,14 @@ export const Configurator: FC = () => {
   }
 
   return (
-    <Fragment>
-      <section>{displays}</section>;
+    <StyledConfiguratorContainer>
+      <CompletedLedStrip screenshots={screenshotOfDisplays} />
+      <StyledDisplayContainer>{displays}</StyledDisplayContainer>;
       <Snackbar open={pendingGetLedColorsByConfig} autoHideDuration={3000}>
         <Alert icon={<FontAwesomeIcon icon={faSpinner} />} sx={{ width: '100%' }}>
           This is a success message!
         </Alert>
       </Snackbar>
-    </Fragment>
+    </StyledConfiguratorContainer>
   );
 };

src/configurator/models/display-config.ts

@@ -1,10 +1,16 @@
-import { LedStripConfig } from './led-strip-config';
+import { Borders } from '../../constants/border';
+import { LedStripConfig } from "./led-strip-config";
 
+export class LedStripConfigOfBorders implements Record<Borders, LedStripConfig | null> {
+  constructor(
+    public top: LedStripConfig | null = null,
+    public bottom: LedStripConfig | null = null,
+    public left: LedStripConfig | null = null,
+    public right: LedStripConfig | null = null,
+  ) {}
+}
 export class DisplayConfig {
-  top_led_strip: LedStripConfig | null = null;
-  bottom_led_strip: LedStripConfig | null = null;
-  left_led_strip: LedStripConfig | null = null;
-  right_led_strip: LedStripConfig | null = null;
+  led_strip_of_borders = new LedStripConfigOfBorders();
 
   constructor(
     public id: number,

src/constants/border.ts

@@ -0,0 +1,2 @@
+export const borders = ['top', 'right', 'bottom', 'left'] as const;
+export type Borders = typeof borders[number];