Refactor Delir frontend with domain

README.md

@@ -38,16 +38,16 @@ See [plugin-example](https://github.com/Ragg-/Delir/tree/alpha-release/src/delir
   Ctrl+C to interrupt
 
 ### Path to code
-- src
-  - **browser**  -- BrowserProcess codes
-  - **delir-core**  -- Core module codes (Project structure, calculation, renderer)
-  - **deream** -- Renderered frame exporter for ffmpeg (deprecated)
+- packages
+  - **delir**  -- Electron frontend of Delir
+    - **domain**  -- Operation / Action / Store / Utils set by domain
+      - **Editor**  -- Editor state and actions
+      - **Preference**  -- Editor preference state and actions
+      - **Project**  -- Project(Document) state and actions
+      - **Renderer**  -- Delir engine state and actions
+    - **modules**  -- Modal windows
+    - **utils**  -- View utilities non relate some domain
+    - **views**  -- View components
+  - **delir-core**  -- Core module codes (Project structure, engine, calculation, renderer)
+  - **deream** -- Renderered frame exporter for ffmpeg
   - **plugins** -- Built-in Delir plugins (build with webpack)
-  - **renderer** -- RendererProcess codes. It is composed with Flux architecture.
-    - **actions** -- ActionCreator classes
-    - **devel** -- Codes for development (Fixture project contained)
-    - **helpers** -- Helper libraries (it [MUST] be staticaly)
-    - **services** -- Store+ActionCreator composed classes (Delir renderer delegation, etc...)
-    - **stores** -- Store classes
-    - **views** -- View components
-      - **components** -- Application shared components

packages/delir-core/src/Exporter.spec.ts

@@ -57,7 +57,7 @@ describe('Export', () => {
         })
     })
 
-    it('test', () => {
+    it('Should correct serialize / desrialize project', () => {
         const serialized = Exporter.serialize(project)
         expect(serialized).toMatchSnapshot()
         expect(Exporter.deserialize(serialized)).toEqual(project)

packages/delir-core/src/PluginSupport/PluginRegistry.spec.ts

@@ -12,6 +12,7 @@ describe('PluginRegistry', () => {
                 node: '10.0.0',
             },
             delir: {
+                name: 'Effect',
                 type: 'post-effect',
             },
             extraField: {},
@@ -29,6 +30,7 @@ describe('PluginRegistry', () => {
                 // 'delir-core': '0.0.0.1',
             },
             delir: {
+                name: 'Effect',
                 // type: 'post-effect'
                 type: 'post-effect-lol',
             },

packages/delir-core/src/__snapshots__/Exporter.spec.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Export test 1`] = `
+exports[`Export Should correct serialize / desrialize project 1`] = `
 Object {
   "__type": "entity:Project",
   "__value": Object {
@@ -52,6 +52,14 @@ Object {
                                 Object {
                                   "__type": "entity:Keyframe",
                                   "__value": Object {
+                                    "easeInParam": Array [
+                                      1,
+                                      1,
+                                    ],
+                                    "easeOutParam": Array [
+                                      0,
+                                      0,
+                                    ],
                                     "id": "uuid-effect-kf-1",
                                     "value": Object {
                                       "__type": "value:ColorRGB",
@@ -68,6 +76,14 @@ Object {
                                 Object {
                                   "__type": "entity:Keyframe",
                                   "__value": Object {
+                                    "easeInParam": Array [
+                                      1,
+                                      1,
+                                    ],
+                                    "easeOutParam": Array [
+                                      0,
+                                      0,
+                                    ],
                                     "id": "uuid-effect-kf-2",
                                     "value": Object {
                                       "__type": "value:AssetPointer",
@@ -97,6 +113,14 @@ Object {
                           Object {
                             "__type": "entity:Keyframe",
                             "__value": Object {
+                              "easeInParam": Array [
+                                1,
+                                1,
+                              ],
+                              "easeOutParam": Array [
+                                0,
+                                0,
+                              ],
                               "id": "uuid-clip-kf-1",
                               "value": Object {
                                 "__type": "value:ColorRGB",

packages/delir/stores/EditorStateStore.ts → packages/delir/domain/Editor/EditorStore.ts

@@ -1,8 +1,9 @@
 import * as Delir from '@ragg/delir-core'
 import { ProjectHelper } from '@ragg/delir-core'
 import { listen, Store } from '@ragg/fleur'
-import { AppActions, ProjectModActions } from '../actions/actions'
-import { DragEntity } from '../actions/App'
+import { ProjectActions } from '../Project/actions'
+import { EditorActions } from './actions'
+import { DragEntity } from './operations'
 
 export interface NotificationEntry {
     id: string
@@ -25,8 +26,8 @@ export interface EditorState {
     notifications: NotificationEntry[]
 }
 
-export default class EditorStateStore extends Store<EditorState> {
-    public static storeName = 'EditorStateStore'
+export default class EditorStore extends Store<EditorState> {
+    public static storeName = 'EditorStore'
 
     protected state: EditorState = {
         project: null,
@@ -42,7 +43,7 @@ export default class EditorStateStore extends Store<EditorState> {
     }
 
     // @ts-ignore
-    private handlesetActiveProject = listen(AppActions.setActiveProjectAction, (payload) => {
+    private handlesetActiveProject = listen(EditorActions.setActiveProjectAction, (payload) => {
         __DEV__ && console.log('✨ Project activated', payload.project)
 
         this.updateWith(draft => {
@@ -58,7 +59,7 @@ export default class EditorStateStore extends Store<EditorState> {
     })
 
     // @ts-ignore
-    private handleclearActiveProject = listen(AppActions.clearActiveProjectAction, () => {
+    private handleclearActiveProject = listen(EditorActions.clearActiveProjectAction, () => {
         __DEV__ && console.log('💥 Project deactivated')
 
         this.updateWith(draft => {
@@ -71,7 +72,7 @@ export default class EditorStateStore extends Store<EditorState> {
     })
 
     // @ts-ignore
-    private handleRemoveClip = listen(ProjectModActions.removeClipAction, (payload) => {
+    private handleRemoveClip = listen(ProjectActions.removeClipAction, (payload) => {
         const { activeClip } = this.state
 
         if (activeClip && activeClip.id === payload.targetClipId) {
@@ -80,7 +81,7 @@ export default class EditorStateStore extends Store<EditorState> {
     })
 
     // @ts-ignore
-    private handleRemoveLayer = listen(ProjectModActions.removeLayerAction, ({ targetLayerId }) => {
+    private handleRemoveLayer = listen(ProjectActions.removeLayerAction, ({ targetLayerId }) => {
         const { activeClip } = this.state
         if (!activeClip) return
         if (!this.state.project) return
@@ -92,17 +93,17 @@ export default class EditorStateStore extends Store<EditorState> {
     })
 
     // @ts-ignore
-    private handlesetDragEntity = listen(AppActions.setDragEntityAction, (payload) => {
+    private handlesetDragEntity = listen(EditorActions.setDragEntityAction, (payload) => {
         this.updateWith(d => d.dragEntity = payload)
     })
 
     // @ts-ignore
-    private handleclearDragEntity = listen(AppActions.clearDragEntityAction, () => {
+    private handleclearDragEntity = listen(EditorActions.clearDragEntityAction, () => {
         this.updateWith(d => d.dragEntity = null)
     })
 
     // @ts-ignore
-    private handleChangeActiveComposition = listen(AppActions.changeActiveCompositionAction, ({ compositionId }) => {
+    private handleChangeActiveComposition = listen(EditorActions.changeActiveCompositionAction, ({ compositionId }) => {
         if (this.state.project == null) return
 
         const comp = ProjectHelper.findCompositionById(this.state.project, compositionId)
@@ -114,35 +115,35 @@ export default class EditorStateStore extends Store<EditorState> {
     })
 
     // @ts-ignore
-    private handlechangeActiveClip = listen(AppActions.changeActiveClipAction, (payload) => {
+    private handlechangeActiveClip = listen(EditorActions.changeActiveClipAction, (payload) => {
         if (this.state.project == null) return
 
         const clip = ProjectHelper.findClipById(this.state.project, payload.clipId)
         this.updateWith(d => d.activeClip = clip)
     })
 
     // @ts-ignore
-    private handleupdateProcessingState = listen(AppActions.updateProcessingStateAction, (payload) => {
+    private handleupdateProcessingState = listen(EditorActions.updateProcessingStateAction, (payload) => {
         this.updateWith(d => d.processingState = payload.stateText)
     })
 
     // @ts-ignore
-    private handlestartPreview = listen(AppActions.startPreviewAction, () => {
+    private handlestartPreview = listen(EditorActions.startPreviewAction, () => {
         this.updateWith(d => d.previewPlayed = true)
     })
 
     // @ts-ignore
-    private handlestopPreview = listen(AppActions.stopPreviewAction, () => {
+    private handlestopPreview = listen(EditorActions.stopPreviewAction, () => {
         this.updateWith(d => d.previewPlayed = false)
     })
 
     // @ts-ignore
-    private handleseekPreviewFrame = listen(AppActions.seekPreviewFrameAction, (payload) => {
+    private handleseekPreviewFrame = listen(EditorActions.seekPreviewFrameAction, (payload) => {
         this.updateWith(d => d.currentPreviewFrame = Math.round(payload.frame))
     })
 
     // @ts-ignore
-    private handleaddMessage = listen(AppActions.addMessageAction, (payload) => {
+    private handleaddMessage = listen(EditorActions.addMessageAction, (payload) => {
         this.updateWith(d => {
             d.notifications.push({
                 id: payload.id,
@@ -155,15 +156,15 @@ export default class EditorStateStore extends Store<EditorState> {
     })
 
     // @ts-ignore
-    private handleRemoveMessage = listen(AppActions.removeMessageAction, (payload) => {
+    private handleRemoveMessage = listen(EditorActions.removeMessageAction, (payload) => {
         this.updateWith(d => {
             const idx = d.notifications.findIndex(entry => entry!.id === payload.id)
             d.notifications.splice(idx, 1)
         })
     })
 
     // @ts-ignore
-    private handleChangePreferenceOpenState = listen(AppActions.changePreferenceOpenStateAction, ({ open }) => {
+    private handleChangePreferenceOpenState = listen(EditorActions.changePreferenceOpenStateAction, ({ open }) => {
         this.updateWith(draft => draft.preferenceOpened = open)
     })
 

packages/delir/domain/Editor/actions.ts

@@ -0,0 +1,21 @@
+import * as Delir from '@ragg/delir-core'
+import { action } from '@ragg/fleur'
+
+import { DragEntity } from './operations'
+
+export const EditorActions = {
+    setActiveProjectAction: action<{ project: Delir.Entity.Project, path?: string }>(),
+    clearActiveProjectAction: action<null>(),
+    setDragEntityAction: action<DragEntity>(),
+    clearDragEntityAction: action<{}>(),
+    changeActiveCompositionAction: action<{ compositionId: string }>(),
+    changeActiveClipAction: action<{ clipId: string }>(),
+    startPreviewAction: action<{ compositionId: string, beginFrame: number, ignoreMissingEffect: boolean }>(),
+    stopPreviewAction: action<{}>(),
+    renderDestinateAction: action<{ compositionId: string, ignoreMissingEffect: boolean }>(),
+    updateProcessingStateAction: action<{ stateText: string }>(),
+    addMessageAction: action<{ id: string, title?: string, level: 'info' | 'error', message: string, detail?: string }>(),
+    removeMessageAction: action<{ id: string }>(),
+    seekPreviewFrameAction: action<{ frame: number }>(),
+    changePreferenceOpenStateAction: action<{ open: boolean }>()
+}

packages/delir/actions/App.i18n.ts → packages/delir/domain/Editor/operations.i18n.ts

@@ -1,5 +1,5 @@
-import I18n from '../utils/I18n'
-import { isMacOS } from '../utils/platform'
+import I18n from '../../utils/I18n'
+import { isMacOS } from '../../utils/platform'
 
 export default I18n({
     ja: {