Merged PR 189: Simplify usage of SmartComponent

- Added new Events : - AddContainer, AddContainerToSelectedContainer, AppendContainer, AppendContainerToSelectedContainer, SelectContainer, DeleteContainer - AddSymbol, SelectSymbol, DeleteSymbol - Changed the component to an iframe (you only need to copy the whole dist now) - Added callbacks to every methods in the component - Create event listener on demand: no need to initialize the event listener! - Update d.ts - Added Fastboot and enable it by default on production build
2022-09-21 09:24:14 +00:00 · 2022-09-21 09:24:14 +00:00 · 23ed3ed1ad
commit 23ed3ed1ad
parent 07dbac1b12
14 changed files with 1047 additions and 108 deletions
--- a/src/Events/EditorEvents.ts
+++ b/src/Events/EditorEvents.ts
@ -1,17 +1,15 @@
-import { Dispatch, SetStateAction } from 'react';
+import { AddContainer as AddContainerAction, AddContainerToSelectedContainer as AddContainerToSelectedContainerAction } from '../Components/Editor/Actions/AddContainer';
+import { DeleteContainer as DeleteContainerAction, SelectContainer as SelectContainerAction } from '../Components/Editor/Actions/ContainerOperations';
+import { AddSymbol as AddSymbolAction, DeleteSymbol as DeleteSymbolAction, SelectSymbol as SelectSymbolAction } from '../Components/Editor/Actions/SymbolOperations';
 import { GetCurrentHistory } from '../Components/Editor/Editor';
-import { IConfiguration } from '../Interfaces/IConfiguration';
 import { IEditorState } from '../Interfaces/IEditorState';
 import { IHistoryState } from '../Interfaces/IHistoryState';
+import { FindContainerById } from '../utils/itertools';
 import { ReviveState } from '../utils/saveload';

-function InitEditor(configuration: IConfiguration): void {
-  // faire comme la callback de fetch
-}
-
 function GetEditorState(root: Element | Document,
  editorState: IEditorState): void {
-  const customEvent = new CustomEvent<IEditorState>('getEditorState', { detail: editorState });
+  const customEvent = new CustomEvent<IEditorState>('getEditorState', { detail: structuredClone(editorState) });
  root.dispatchEvent(customEvent);
 }

@ -19,7 +17,7 @@ function GetCurrentHistoryState(root: Element | Document,
  editorState: IEditorState): void {
  const customEvent = new CustomEvent<IHistoryState>(
    'getCurrentHistoryState',
-    { detail: editorState.history[editorState.historyCurrentStep] });
+    { detail: structuredClone(editorState.history[editorState.historyCurrentStep]) });
  root.dispatchEvent(customEvent);
 }

@ -33,6 +31,244 @@ function AppendNewState(root: Element | Document,

  history.push(state);
  setNewHistory(history);
+
+  const customEvent = new CustomEvent<IHistoryState>(
+    'appendNewState',
+    { detail: structuredClone(editorState.history[editorState.historyCurrentStep]) });
+  root.dispatchEvent(customEvent);
+}
+
+function AddContainer(root: Element | Document,
+  editorState: IEditorState,
+  setNewHistory: (newHistory: IHistoryState[]) => void,
+  eventInitDict?: CustomEventInit): void {
+  const {
+    index,
+    type,
+    parentId
+  } = eventInitDict?.detail;
+
+  const history = GetCurrentHistory(editorState.history, editorState.historyCurrentStep);
+  const newHistory = AddContainerAction(
+    index,
+    type,
+    parentId,
+    editorState.configuration,
+    history,
+    editorState.historyCurrentStep
+  );
+  setNewHistory(newHistory);
+
+  const customEvent = new CustomEvent<IHistoryState>(
+    'addContainer',
+    { detail: structuredClone(editorState.history[editorState.historyCurrentStep]) });
+  root.dispatchEvent(customEvent);
+}
+
+function AddContainerToSelectedContainer(root: Element | Document,
+  editorState: IEditorState,
+  setNewHistory: (newHistory: IHistoryState[]) => void,
+  eventInitDict?: CustomEventInit): void {
+  const {
+    index,
+    type
+  } = eventInitDict?.detail;
+
+  const history = GetCurrentHistory(editorState.history, editorState.historyCurrentStep);
+  const currentState = history[editorState.historyCurrentStep];
+
+  const newHistory = AddContainerAction(
+    index,
+    type,
+    currentState.selectedContainerId,
+    editorState.configuration,
+    history,
+    editorState.historyCurrentStep
+  );
+  setNewHistory(newHistory);
+
+  const customEvent = new CustomEvent<IHistoryState>(
+    'addContainerToSelectedContainer',
+    { detail: structuredClone(editorState.history[editorState.historyCurrentStep]) });
+  root.dispatchEvent(customEvent);
+}
+
+function AppendContainer(root: Element | Document,
+  editorState: IEditorState,
+  setNewHistory: (newHistory: IHistoryState[]) => void,
+  eventInitDict?: CustomEventInit): void {
+  const {
+    type,
+    parentId
+  } = eventInitDict?.detail;
+
+  const history = GetCurrentHistory(editorState.history, editorState.historyCurrentStep);
+  const currentState = history[editorState.historyCurrentStep];
+
+  const parent = FindContainerById(currentState.mainContainer, parentId);
+
+  const newHistory = AddContainerAction(
+    parent?.children.length ?? 0,
+    type,
+    parentId,
+    editorState.configuration,
+    history,
+    editorState.historyCurrentStep
+  );
+  setNewHistory(newHistory);
+
+  const customEvent = new CustomEvent<IHistoryState>(
+    'appendContainerToSelectedContainer',
+    { detail: structuredClone(editorState.history[editorState.historyCurrentStep]) });
+  root.dispatchEvent(customEvent);
+}
+
+function AppendContainerToSelectedContainer(root: Element | Document,
+  editorState: IEditorState,
+  setNewHistory: (newHistory: IHistoryState[]) => void,
+  eventInitDict?: CustomEventInit): void {
+  const {
+    type
+  } = eventInitDict?.detail;
+
+  const history = GetCurrentHistory(editorState.history, editorState.historyCurrentStep);
+  const currentState = history[editorState.historyCurrentStep];
+
+  const selected = FindContainerById(currentState.mainContainer, currentState.selectedContainerId);
+
+  const newHistory = AddContainerToSelectedContainerAction(
+    type,
+    selected,
+    editorState.configuration,
+    history,
+    editorState.historyCurrentStep
+  );
+
+  if (newHistory === null) {
+    return;
+  }
+
+  setNewHistory(newHistory);
+
+  const customEvent = new CustomEvent<IHistoryState>(
+    'appendContainerToSelectedContainer',
+    { detail: structuredClone(editorState.history[editorState.historyCurrentStep]) });
+  root.dispatchEvent(customEvent);
+}
+
+function SelectContainer(root: Element | Document,
+  editorState: IEditorState,
+  setNewHistory: (newHistory: IHistoryState[]) => void,
+  eventInitDict?: CustomEventInit): void {
+  const {
+    containerId
+  } = eventInitDict?.detail;
+
+  const history = GetCurrentHistory(editorState.history, editorState.historyCurrentStep);
+
+  const newHistory = SelectContainerAction(
+    containerId,
+    history,
+    editorState.historyCurrentStep
+  );
+  setNewHistory(newHistory);
+
+  const customEvent = new CustomEvent<IHistoryState>(
+    'selectContainer',
+    { detail: structuredClone(editorState.history[editorState.historyCurrentStep]) });
+  root.dispatchEvent(customEvent);
+}
+
+function DeleteContainer(root: Element | Document,
+  editorState: IEditorState,
+  setNewHistory: (newHistory: IHistoryState[]) => void,
+  eventInitDict?: CustomEventInit): void {
+  const {
+    containerId
+  } = eventInitDict?.detail;
+
+  const history = GetCurrentHistory(editorState.history, editorState.historyCurrentStep);
+
+  const newHistory = DeleteContainerAction(
+    containerId,
+    history,
+    editorState.historyCurrentStep
+  );
+  setNewHistory(newHistory);
+
+  const customEvent = new CustomEvent<IHistoryState>(
+    'deleteContainer',
+    { detail: structuredClone(editorState.history[editorState.historyCurrentStep]) });
+  root.dispatchEvent(customEvent);
+}
+
+function AddSymbol(root: Element | Document,
+  editorState: IEditorState,
+  setNewHistory: (newHistory: IHistoryState[]) => void,
+  eventInitDict?: CustomEventInit): void {
+  const {
+    name
+  } = eventInitDict?.detail;
+
+  const history = GetCurrentHistory(editorState.history, editorState.historyCurrentStep);
+
+  const newHistory = AddSymbolAction(
+    name,
+    editorState.configuration,
+    history,
+    editorState.historyCurrentStep
+  );
+  setNewHistory(newHistory);
+
+  const customEvent = new CustomEvent<IHistoryState>(
+    'AddSymbol',
+    { detail: structuredClone(editorState.history[editorState.historyCurrentStep]) });
+  root.dispatchEvent(customEvent);
+}
+
+function SelectSymbol(root: Element | Document,
+  editorState: IEditorState,
+  setNewHistory: (newHistory: IHistoryState[]) => void,
+  eventInitDict?: CustomEventInit): void {
+  const {
+    symbolId
+  } = eventInitDict?.detail;
+
+  const history = GetCurrentHistory(editorState.history, editorState.historyCurrentStep);
+
+  const newHistory = SelectSymbolAction(
+    symbolId,
+    history,
+    editorState.historyCurrentStep
+  );
+  setNewHistory(newHistory);
+
+  const customEvent = new CustomEvent<IHistoryState>(
+    'SelectSymbol',
+    { detail: structuredClone(editorState.history[editorState.historyCurrentStep]) });
+  root.dispatchEvent(customEvent);
+}
+
+function DeleteSymbol(root: Element | Document,
+  editorState: IEditorState,
+  setNewHistory: (newHistory: IHistoryState[]) => void,
+  eventInitDict?: CustomEventInit): void {
+  const {
+    symbolId
+  } = eventInitDict?.detail;
+
+  const history = GetCurrentHistory(editorState.history, editorState.historyCurrentStep);
+  const newHistory = DeleteSymbolAction(
+    symbolId,
+    history,
+    editorState.historyCurrentStep
+  );
+  setNewHistory(newHistory);
+
+  const customEvent = new CustomEvent<IHistoryState>(
+    'DeleteSymbol',
+    { detail: structuredClone(editorState.history[editorState.historyCurrentStep]) });
+  root.dispatchEvent(customEvent);
 }

 export interface IEditorEvent {
@ -48,5 +284,14 @@ export interface IEditorEvent {
 export const events: IEditorEvent[] = [
  { name: 'getEditorState', func: GetEditorState },
  { name: 'getCurrentHistoryState', func: GetCurrentHistoryState },
-  { name: 'appendNewState', func: AppendNewState }
+  { name: 'appendNewState', func: AppendNewState },
+  { name: 'addContainer', func: AddContainer },
+  { name: 'addContainerToSelectedContainer', func: AddContainerToSelectedContainer },
+  { name: 'appendContainer', func: AppendContainer },
+  { name: 'appendContainerToSelectedContainer', func: AppendContainerToSelectedContainer },
+  { name: 'selectContainer', func: SelectContainer },
+  { name: 'deleteContainer', func: DeleteContainer },
+  { name: 'addSymbol', func: AddSymbol },
+  { name: 'selectSymbol', func: SelectSymbol },
+  { name: 'deleteSymbol', func: DeleteSymbol }
 ];