Implement "Add layer here" context menu

packages/delir-core/src/Entity/Composition.ts

@@ -58,7 +58,9 @@ class Composition implements CompositionProps {
             return
         }
 
-        this.layers = [...this.layers].splice(index, 0, layer)
+        const layers = [...this.layers]
+        layers.splice(index, 0, layer)
+        this.layers = layers
     }
 
     public removeLayer(layerId: string): boolean {

packages/delir/domain/Editor/EditorStore.ts

@@ -204,6 +204,10 @@ export default class EditorStore extends Store<EditorState> {
         return this.state.activeParam
     }
 
+    public getActiveComposition() {
+        return this.state.activeComp
+    }
+
     public getClipboardEntry() {
         return this.state.clipboard
     }

packages/delir/domain/Project/Commands/AddLayerCommand.ts

@@ -6,7 +6,7 @@ import { Command } from '../../History/HistoryStore'
 import { ProjectActions } from '../actions'
 
 export class AddLayerCommand implements Command {
-    constructor(private targetCompositionId: string, private addedLayer: Delir.Entity.Layer) {}
+    constructor(private targetCompositionId: string, private addedLayer: Delir.Entity.Layer, private index: number) {}
 
     public undo(context: OperationContext<any>) {
         this.focusToParentComposition(context)
@@ -22,6 +22,7 @@ export class AddLayerCommand implements Command {
         context.dispatch(ProjectActions.addLayerAction, {
             targetCompositionId: this.targetCompositionId,
             layer: this.addedLayer,
+            index: this.index,
         })
     }
 

packages/delir/domain/Project/ProjectStore.ts

@@ -31,9 +31,9 @@ export default class ProjectStore extends Store<ProjectStoreState> {
         this.updateLastModified()
     })
 
-    private handleAddLayer = listen(ProjectActions.addLayerAction, ({ targetCompositionId, layer }) => {
+    private handleAddLayer = listen(ProjectActions.addLayerAction, ({ targetCompositionId, layer, index }) => {
         const { project } = this.state
-        project!.findComposition(targetCompositionId)!.addLayer(layer)
+        project!.findComposition(targetCompositionId)!.addLayer(layer, index)
         this.updateLastModified()
     })
 

packages/delir/domain/Project/actions.ts

@@ -12,6 +12,7 @@ export const ProjectActions = actions('Project', {
     addLayerAction: action<{
         targetCompositionId: string
         layer: Delir.Entity.Layer
+        index: number
     }>(),
     addLayerWithAssetAction: action<{
         targetComposition: Delir.Entity.Composition

packages/delir/domain/Project/operations.ts

@@ -71,19 +71,24 @@ export const addLayer = operation(
         context,
         {
             targetCompositionId,
+            index = 0,
             patch = {},
         }: {
             targetCompositionId: string
+            index?: number
             patch?: Partial<Delir.Entity.Layer>
         },
     ) => {
         const layer = new Delir.Entity.Layer({ name: patch.name || '' })
+
         await context.executeOperation(HistoryOps.pushHistory, {
-            command: new AddLayerCommand(targetCompositionId, layer),
+            command: new AddLayerCommand(targetCompositionId, layer, index),
         })
+
         context.dispatch(ProjectActions.addLayerAction, {
             targetCompositionId: targetCompositionId,
             layer,
+            index,
         })
     },
 )

packages/delir/views/AssetsView/style.styl

@@ -65,7 +65,7 @@
     border-top 1px solid rgba(255, 255, 255, 0.2)
 
 .addAssetPlusSign
-    margin-left 8px
+    margin-left 4px
     margin-bottom -1px
     filter invert(100%)
     cursor pointer

packages/delir/views/PreviewView/PreviewView.tsx

@@ -75,7 +75,7 @@ export default withComponentContext(
                             </div>
                             <div className={s.Preview_Footer}>
                                 <label className={s.FooterItem} onClick={this.toggleScaleList}>
-                                    <i className="fa fa-search" />
+                                    <i className="fa fa-search-plus" />
                                     <span className={s.currentScale}>{currentScale}%</span>
                                     <DropDown
                                         ref={this.scaleListRef}

packages/delir/views/Timeline/Clip.i18n.ts

@@ -3,8 +3,8 @@ import I18n from '../../utils/I18n'
 export default I18n({
     ja: {
         contextMenu: {
-            seekToHeadOfClip: 'クリップの先頭にシーク',
-            effect: 'エフェクト',
+            seekToHeadOfClip: '⏪クリップの先頭にシーク',
+            effect: '✨エフェクト',
             remove: '🚯 削除',
             pluginUnavailable: '利用可能なポストエフェクトがありません',
         },
@@ -19,8 +19,8 @@ export default I18n({
     },
     en: {
         contextMenu: {
-            seekToHeadOfClip: 'クリップの先頭にシーク',
-            effect: 'Effect',
+            seekToHeadOfClip: '⏪Seek to clip head',
+            effect: '✨Effect',
             remove: '🚯 Remove',
             pluginUnavailable: 'No available post-effect',
         },

packages/delir/views/Timeline/Layer.i18n.ts

@@ -4,6 +4,7 @@ export default I18n({
     ja: {
         contextMenu: {
             createClip: 'クリップを作成',
+            addLayerHere: '➕ ここにレイヤーを追加',
         },
         renderers: {
             audio: '🔊 オーディオ',
@@ -17,6 +18,7 @@ export default I18n({
     en: {
         contextMenu: {
             createClip: 'Create clip',
+            addLayerHere: '➕ Add layer here',
         },
         renderers: {
             audio: '🔊 Audio',

packages/delir/views/Timeline/Layer.tsx

@@ -21,6 +21,7 @@ import * as s from './Layer.styl'
 
 interface OwnProps {
     layer: Delir.Entity.Layer
+    layerIndex: number
     activeClip: Delir.Entity.Clip | null
     framerate: number
     pxPerSec: number
@@ -90,11 +91,12 @@ export default withComponentContext(
                                         key={idx}
                                         label={t(['renderers', renderer.rendererId])}
                                         data-renderer-id={renderer.rendererId}
-                                        onClick={this.addNewClip}
+                                        onClick={this.handleAddNewClip}
                                     />
                                 ))}
                             </MenuItem>
                             <MenuItem type="separator" />
+                            <MenuItem label={t('contextMenu.addLayerHere')} onClick={this.handleAddLayer} />
                         </ContextMenu>
 
                         <div className={s.clipsContainer}>
@@ -121,7 +123,7 @@ export default withComponentContext(
                                         postEffectPlugins={postEffectPlugins}
                                         hasError={hasError}
                                         onChangePlace={this.handleChangeClipPlace}
-                                        onChangeDuration={this.changeClipDuration}
+                                        onChangeDuration={this.handleChangeClipDuration}
                                     />
                                 )
                             })}
@@ -204,7 +206,7 @@ export default withComponentContext(
                 })
             }
 
-            private changeClipDuration = (clipId: string, newWidth: number) => {
+            private handleChangeClipDuration = (clipId: string, newWidth: number) => {
                 const newDurationFrames = TimePixelConversion.pixelToFrames({
                     pxPerSec: this.props.pxPerSec,
                     framerate: this.props.framerate,
@@ -218,7 +220,7 @@ export default withComponentContext(
                 })
             }
 
-            private addNewClip = ({ dataset }: MenuItemOption<{ rendererId: string }>) => {
+            private handleAddNewClip = ({ dataset }: MenuItemOption<{ rendererId: string }>) => {
                 this.props.context.executeOperation(ProjectOps.addClip, {
                     layerId: this.props.layer.id!,
                     clipRendererId: dataset.rendererId,
@@ -227,6 +229,19 @@ export default withComponentContext(
                 })
             }
 
+            private handleAddLayer = () => {
+                const {
+                    editor: { activeComp },
+                    layerIndex,
+                } = this.props
+                if (!activeComp) return
+
+                this.props.context.executeOperation(ProjectOps.addLayer, {
+                    targetCompositionId: activeComp.id,
+                    index: layerIndex,
+                })
+            }
+
             private handleGlobalPaste = () => {
                 this.props.context.executeOperation(ProjectOps.pasteClipEntityIntoLayer, {
                     layerId: this.props.layer.id,

packages/delir/views/Timeline/LaneLabel.i18n.ts → packages/delir/views/Timeline/LayerLabel.i18n.ts

@@ -3,14 +3,14 @@ import I18n from '../../utils/I18n'
 export default I18n({
     ja: {
         contextMenu: {
-            createLayer: '➕ レイヤーを追加',
+            addLayerHere: '➕ ここにレイヤーを追加',
             removeLayer: '🚯 レイヤーを削除',
             renameLayer: '✏️ レイヤー名を変更 (Enter)',
         },
     },
     en: {
         contextMenu: {
-            createLayer: '➕ Add layer',
+            addLayerHere: '➕ Add layer here',
             removeLayer: '🚯 Remove layer',
             renameLayer: '✏️ Rename layer (Enter)',
         },