+
takeSnapshot()}>Take Snapshot
getLedStripColors()}>Get Colors
switchCurrentMode('Flowing')}>
@@ -64,7 +65,7 @@ function App() {
switchCurrentMode('Follow')}>Follow
-
diff --git a/src/configurator/components/completed-container.tsx b/src/configurator/components/completed-container.tsx
new file mode 100644
index 0000000..82c4c87
--- /dev/null
+++ b/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
= ({
+ 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) => (
+
+ ));
+ }, [ledCount, borderLedStrips, overrideBorderLedStrips]);
+
+ return (
+
+
+ {completedPixels}
+
+ );
+};
diff --git a/src/configurator/components/completed-led-strip.tsx b/src/configurator/components/completed-led-strip.tsx
index 8c5fd23..f96053f 100644
--- a/src/configurator/components/completed-led-strip.tsx
+++ b/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-rows: auto repeat(${rows}, 1fr);
+ grid-template-columns: repeat(${columns}, 0.5em);
+ 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 = ({
screenshots,
onDisplayConfigChange,
@@ -56,6 +49,18 @@ export const CompletedLedStrip: FC = ({
() => 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 = ({
const [overrideBorderLedStrips, setOverrideBorderLedStrips] =
useState();
- 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) => );
- }, [ledCount, borderLedStrips, overrideBorderLedStrips]);
-
const strips = useMemo(() => {
return borderLedStrips.map(({ config, pixels }, index) =>
config ? (
@@ -123,11 +108,12 @@ export const CompletedLedStrip: FC = ({
setOverrideBorderLedStrips(undefined);
}, [borderLedStrips]);
return (
-
- {completedPixels}
+
+
{strips}
);
};
-
-
diff --git a/src/configurator/configurator.tsx b/src/configurator/configurator.tsx
index 5e8ac23..5df8613 100644
--- a/src/configurator/configurator.tsx
+++ b/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}
/>
- {displays}
+ {displays}
(