Skip to content

Commit

Permalink
update svg and component panel
Browse files Browse the repository at this point in the history
  • Loading branch information
@langonginc
langonginc committed May 12, 2024
1 parent f3ad5f1 commit 33e3008
Show file tree
Hide file tree
Showing 9 changed files with 214 additions and 77 deletions.
5 changes: 4 additions & 1 deletion src/components/app-root.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export default function AppRoot() {
const param = useRootSelector(store => store.param);
const {
paletteAppClip: { input },
globalAlerts,
} = useRootSelector(state => state.runtime);
const [openExport, setOpenExport] = React.useState(false);

Expand All @@ -36,7 +37,9 @@ export default function AppRoot() {
</Flex>
<Flex p={2} direction="row" height="100%" overflow="hidden" sx={{ position: 'relative' }}>
<Settings />
<Button onClick={() => setOpenExport(true)}>Export</Button>
<Button onClick={() => setOpenExport(true)} isDisabled={globalAlerts.size !== 0}>
Export
</Button>
</Flex>
<Flex direction="row" height="100%" overflow="hidden" sx={{ position: 'relative' }}>
<DetailsSvgs />
Expand Down
70 changes: 56 additions & 14 deletions src/components/panel/details-components.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,24 @@ import {
AccordionIcon,
AccordionItem,
AccordionPanel,
Box, Button, Flex,
Heading, IconButton,
Box,
Button,
Flex,
Heading,
IconButton,
} from '@chakra-ui/react';
import React from 'react';
import { RmgFields, RmgFieldsField, RmgLabel } from '@railmapgen/rmg-components';
import React from 'react';
import { MdArrowDownward, MdArrowUpward, MdCircle, MdClose } from 'react-icons/md';
import { useTranslation } from 'react-i18next';
import { MdCircle } from 'react-icons/md';
import { useRootDispatch, useRootSelector } from '../../redux';
import { addComponent, deleteComponent, setColor, setComponentValue } from '../../redux/param/param-slice';
import {
addComponent,
deleteComponent,
setColor,
setComponents,
setComponentValue,
} from '../../redux/param/param-slice';
import { ComponentsType, ComponentsTypeOptions } from '../../constants/components';
import { openPaletteAppClip } from '../../redux/runtime/runtime-slice';
import { nanoid } from '../../util/helper';
Expand All @@ -39,13 +48,33 @@ export function DetailsComponents() {
};

const handleAddNewComponent = () => {
dispatch(addComponent({
id: nanoid(),
label: nanoid(),
type: 'text',
defaultValue: 'text',
}))
}
dispatch(
addComponent({
id: nanoid(),
label: nanoid(),
type: 'text',
defaultValue: 'text',
})
);
};

const handleMove = (index: number, d: number) => {
const dest = index + d;
if (dest >= 0 && dest < param.components.length) {
dispatch(
setComponents(
param.components
.filter((s, i) => i < Math.min(index, dest))
.concat(param.components[Math.max(index, dest)])
.concat(
param.components.filter((s, i) => i > Math.min(index, dest) && i < Math.max(index, dest))
)
.concat(param.components[Math.min(index, dest)])
.concat(param.components.filter((s, i) => i > Math.max(index, dest)))
)
);
}
};

const p = param.components.map((c, index) => {
const { id, label, type, defaultValue, value } = c;
Expand All @@ -54,7 +83,8 @@ export function DetailsComponents() {
label: 'Label',
type: 'input',
value: label,
onChange: v => dispatch(setComponentValue({ index: index, value: { ...c, label: v.replaceAll(' ', '') } })),
onChange: v =>
dispatch(setComponentValue({ index: index, value: { ...c, label: v.replaceAll(' ', '') } })),
},
{
label: 'Type',
Expand All @@ -74,7 +104,19 @@ export function DetailsComponents() {
label: '',
type: 'custom',
oneLine: true,
component: <Button size="md" onClick={() => dispatch(deleteComponent(index))}>Remove</Button>,
component: (
<>
<Button size="md" onClick={() => handleMove(index, -1)}>
<MdArrowUpward />
</Button>
<Button size="md" onClick={() => handleMove(index, 1)}>
<MdArrowDownward />
</Button>
<Button size="md" onClick={() => dispatch(deleteComponent(index))}>
<MdClose />
</Button>
</>
),
},
];

Expand Down
73 changes: 63 additions & 10 deletions src/components/panel/details-svgs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,34 +4,86 @@ import {
AccordionIcon,
AccordionItem,
AccordionPanel,
Box, Flex,
Box,
Button,
Flex,
Heading,
} from '@chakra-ui/react';
import { RmgFields, RmgFieldsField } from '@railmapgen/rmg-components';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { MdArrowDownward, MdArrowUpward, MdClose, MdError } from 'react-icons/md';
import { useRootDispatch, useRootSelector } from '../../redux';
import { setSvgValue } from '../../redux/param/param-slice';
import { removeGlobalAlert } from '../../redux/runtime/runtime-slice';
import { deleteSvg, setSvgs, setSvgValue } from '../../redux/param/param-slice';
import Svgs from '../svgs/svgs';
import { RmgFields, RmgFieldsField } from '@railmapgen/rmg-components';

export function DetailsSvgs() {
const dispatch = useRootDispatch();
const param = useRootSelector(store => store.param);
const { globalAlerts } = useRootSelector(store => store.runtime);
const { t } = useTranslation();

const p = param.svgs.map((s, i) => {
const handleMove = (index: number, d: number) => {
const dest = index + d;
if (dest >= 0 && dest < param.svgs.length) {
dispatch(
setSvgs(
param.svgs
.filter((s, i) => i < Math.min(index, dest))
.concat(param.svgs[Math.max(index, dest)])
.concat(param.svgs.filter((s, i) => i > Math.min(index, dest) && i < Math.max(index, dest)))
.concat(param.svgs[Math.min(index, dest)])
.concat(param.svgs.filter((s, i) => i > Math.max(index, dest)))
)
);
}
};

const p = param.svgs.toReversed().map((s, index) => {
const i = param.svgs.length - index - 1; // reversed index
const field: RmgFieldsField[] = [
{
label: 'x',
type: 'input',
value: s.x,
onChange: value => dispatch(setSvgValue({ index: i, value: { ...s, x: value } })),
onChange: value => {
dispatch(setSvgValue({ index: i, value: { ...s, x: value } }));
dispatch(removeGlobalAlert(s.id));
},
},
{
label: 'y',
type: 'input',
value: s.y,
onChange: value => dispatch(setSvgValue({ index: i, value: { ...s, y: value } })),
onChange: value => {
dispatch(setSvgValue({ index: i, value: { ...s, y: value } }));
dispatch(removeGlobalAlert(s.id));
},
},
{
label: '',
type: 'custom',
oneLine: true,
component: (
<>
<Button size="md" onClick={() => handleMove(i, 1)}>
<MdArrowUpward />
</Button>
<Button size="md" onClick={() => handleMove(i, -1)}>
<MdArrowDownward />
</Button>
<Button
size="md"
onClick={() => {
dispatch(removeGlobalAlert(s.id));
dispatch(deleteSvg(i));
}}
>
<MdClose />
</Button>
</>
),
},
];
const F = Svgs[s.type].attrsComponent;
Expand All @@ -41,16 +93,18 @@ export function DetailsSvgs() {
<Box as="span" flex="1" textAlign="left">
{Svgs[s.type].displayName}
</Box>
{globalAlerts.has(s.id) ? <MdError color="#D9534F" /> : ''}
<AccordionIcon />
</AccordionButton>
<AccordionPanel>
<RmgFields fields={field} />
<F
attrs={s.attrs}
id={s.id}
handleAttrsUpdate={(index, attrs) =>
dispatch(setSvgValue({ index: i, value: { ...s, attrs } }))
}
handleAttrsUpdate={(index, attrs) => {
dispatch(setSvgValue({ index: i, value: { ...s, attrs } }));
dispatch(removeGlobalAlert(s.id));
}}
/>
</AccordionPanel>
</AccordionItem>
Expand All @@ -64,7 +118,6 @@ export function DetailsSvgs() {
Svgs
</Heading>
</Flex>
{globalAlerts ? globalAlerts : undefined}
<Accordion width="100%" allowMultiple>
{...p}
</Accordion>
Expand Down
48 changes: 21 additions & 27 deletions src/components/svg-wrapper.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,18 @@
import React from "react";
import React from 'react';
import useEvent from 'react-use-event-hook';
import { useRootDispatch, useRootSelector } from '../redux';
import { SvgsAttrs, SvgsType } from "../constants/svgs";
import svgs from "./svgs/svgs";
import { getComponentValue } from "../util/parse";
import { addSelected, removeSelected, setActive, setMode, setSelected } from '../redux/runtime/runtime-slice';
import { addSvg, setSvgValue } from '../redux/param/param-slice';
import { Id, SvgsElem } from '../constants/constants';
import { SvgsAttrs, SvgsType } from '../constants/svgs';
import svgs from './svgs/svgs';
import { getComponentValue } from '../util/parse';
import { getMousePosition, nanoid, roundToNearestN } from '../util/helper';
import {
addSelected,
removeSelected,
setActive,
setMode,
setRefresh,
setSelected,
} from '../redux/runtime/runtime-slice';
import { addSvg, setSvgValue } from '../redux/param/param-slice';

export default function SvgWrapper() {
const dispatch = useRootDispatch();
const param = useRootSelector(store => store.param);
const {
selected,
refresh,
mode,
active,
} = useRootSelector(state => state.runtime);
const { selected, mode, active } = useRootSelector(state => state.runtime);
const svgWidth = 500;
const svgHeight = 500;
const canvasScale = 1;
Expand Down Expand Up @@ -91,11 +79,15 @@ export default function SvgWrapper() {
selected.forEach(s => {
param.svgs.forEach((svg, index) => {
if (svg.id === s) {
const newX = !Number.isNaN(Number(svg.x)) ? String(roundToNearestN(Number(svg.x) - offset.x + x, 1)) : svg.x;
const newY = !Number.isNaN(Number(svg.y)) ? String(roundToNearestN(Number(svg.y) - offset.y + y, 1)) : svg.y;
const newX = !Number.isNaN(Number(svg.x))
? String(roundToNearestN(Number(svg.x) - offset.x + x, 1))
: svg.x;
const newY = !Number.isNaN(Number(svg.y))
? String(roundToNearestN(Number(svg.y) - offset.y + y, 1))
: svg.y;
dispatch(setSvgValue({ index, value: { ...svg, x: newX, y: newY } }));
}
})
});
});
// dispatch(setRefresh());
// console.log('move ', graph.current.getNodeAttributes(node));
Expand All @@ -118,7 +110,6 @@ export default function SvgWrapper() {
}
}
dispatch(setActive(undefined));
// console.log('up ', graph.current.getNodeAttributes(node));
});

return (
Expand Down Expand Up @@ -166,11 +157,14 @@ export default function SvgWrapper() {
})}
<rect
id="canvas-border"
x={-svgWidth / 2 + 2.5}
y={-svgHeight / 2 + 2.5}
width={svgWidth - 5}
height={svgHeight - 5}
fill="none"
strokeWidth={3}
stroke="none"
style={{ height: 'var(--rmg-svg-height)', width: 'var(--rmg-svg-width)' }}
strokeWidth={5}
stroke="black"
/>
</svg>
);
}
}
Loading

0 comments on commit 33e3008

Please sign in to comment.