Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Implemtation in progress, UIX working , replacing in ContainerOperations.ts working but not properly need fix

Browse source
This commit is contained in:
Carl Fuchs 2023-02-06 16:45:34 +01:00
parent 62abd3ff03
commit e789300090
9 changed files with 139 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/Components/Editor/Editor.tsx
View file

@ -3,7 +3,7 @@ import './Editor.scss';
import { IConfiguration } from '../../Interfaces/IConfiguration';
import { IHistoryState } from '../../Interfaces/IHistoryState';
import { UI } from '../UI/UI';
import { SelectContainer, DeleteContainer, OnPropertyChange } from './Actions/ContainerOperations';
import { SelectContainer, DeleteContainer, OnPropertyChange, ReplaceByContainer } from './Actions/ContainerOperations';
import { SaveEditorAsJSON, SaveEditorAsSVG } from './Actions/Save';
import { OnKey } from './Actions/Shortcuts';
import { UseCustomEvents, UseEditorListener } from '../../Events/EditorEvents';
@ -13,6 +13,7 @@ import { FindContainerById } from '../../utils/itertools';
import { Menu } from '../Menu/Menu';
import { InitActions } from './Actions/ContextMenuActions';
import { AddContainerToSelectedContainer, AddContainer } from './Actions/AddContainer';
import { IReplaceContainer } from '../../Interfaces/IReplaceContainer';
interface IEditorProps {
root: Element | Document
@ -66,6 +67,8 @@ export function Editor(props: IEditorProps): JSX.Element {
// States
const [history, setHistory] = React.useState<IHistoryState[]>(structuredClone(props.history));
const [historyCurrentStep, setHistoryCurrentStep] = React.useState<number>(props.historyCurrentStep);
const [replaceContainer, setReplaceContainer] = React.useState<IReplaceContainer>({ isReplacing: false, id: undefined, category: undefined });
const editorRef = useRef<HTMLDivElement>(null);
const setNewHistory = UseNewHistoryState(setHistory, setHistoryCurrentStep);
@ -104,7 +107,8 @@ export function Editor(props: IEditorProps): JSX.Element {
history,
historyCurrentStep,
setNewHistory,
setHistoryCurrentStep
setHistoryCurrentStep,
setReplaceContainer
);
// Render
@ -113,7 +117,7 @@ export function Editor(props: IEditorProps): JSX.Element {
const selected = FindContainerById(current.containers, current.selectedContainerId);
return (
<div ref={editorRef} className="Editor font-sans h-full">
<div ref={editorRef} className="Editor font-sans h-full ">
<UI
editorState={{
configuration: props.configuration,
@ -139,18 +143,29 @@ export function Editor(props: IEditorProps): JSX.Element {
history,
historyCurrentStep
))}
addContainer={(type) => {
addOrReplaceContainer={(type) => {
if (selected === null || selected === undefined) {
return;
}
setNewHistory(AddContainerToSelectedContainer(
type,
selected,
configuration,
history,
historyCurrentStep
));
if (replaceContainer.isReplacing && replaceContainer.id !== undefined) {
const newHistory = ReplaceByContainer(
replaceContainer.id,
type,
configuration,
history,
historyCurrentStep
);
setReplaceContainer({ isReplacing: false, id: undefined, category: undefined });
setNewHistory(newHistory);
} else {
setNewHistory(AddContainerToSelectedContainer(
type,
selected,
configuration,
history,
historyCurrentStep
));
}
}}
addContainerAt={(index, type, parent) => setNewHistory(
AddContainer(
@ -194,9 +209,10 @@ export function Editor(props: IEditorProps): JSX.Element {
)}
saveEditorAsSVG={() => SaveEditorAsSVG()}
loadState={(move) => setHistoryCurrentStep(move)}
/>
replaceContainer ={replaceContainer} setReplaceContainer={setReplaceContainer}/>
<Menu
getListener={() => editorRef.current}
configuration={configuration}
actions={menuActions}
className="z-30 transition-opacity rounded bg-slate-200 drop-shadow-xl"
/>