From 73be96c9049ac0920eec4162fd4101974a199d8c Mon Sep 17 00:00:00 2001
From: Xiao Gui <xgui3783@gmail.com>
Date: Fri, 23 Aug 2019 20:35:51 +0200
Subject: [PATCH] MVP: customize order layout
---
src/services/state/ngViewerState.store.ts | 11 +-
src/ui/config/config.component.ts | 30 ++-
src/ui/config/config.style.css | 12 +-
src/ui/config/config.template.html | 224 ++++++++++++++++--
.../nehubaContainer.component.ts | 27 ++-
5 files changed, 266 insertions(+), 38 deletions(-)
diff --git a/src/services/state/ngViewerState.store.ts b/src/services/state/ngViewerState.store.ts
index 016911efc..289489d7e 100644
--- a/src/services/state/ngViewerState.store.ts
+++ b/src/services/state/ngViewerState.store.ts
@@ -30,6 +30,14 @@ const defaultState:NgViewerStateInterface = {
export function ngViewerState(prevState:NgViewerStateInterface = defaultState, action:NgViewerAction):NgViewerStateInterface{
switch(action.type){
+ case ACTION_TYPES.SET_PANEL_ORDER: {
+ const { payload } = action
+ const { panelOrder } = payload
+ return {
+ ...prevState,
+ panelOrder
+ }
+ }
case ACTION_TYPES.SWITCH_PANEL_MODE: {
const { payload } = action
const { panelMode } = payload
@@ -113,7 +121,8 @@ interface NgLayerInterface{
}
const ACTION_TYPES = {
- SWITCH_PANEL_MODE: 'SWITCH_PANEL_MODE'
+ SWITCH_PANEL_MODE: 'SWITCH_PANEL_MODE',
+ SET_PANEL_ORDER: 'SET_PANEL_ORDER'
}
export const SUPPORTED_PANEL_MODES = [
diff --git a/src/ui/config/config.component.ts b/src/ui/config/config.component.ts
index e60d64ae7..1a0e15cdf 100644
--- a/src/ui/config/config.component.ts
+++ b/src/ui/config/config.component.ts
@@ -36,7 +36,9 @@ export class ConfigComponent implements OnInit, OnDestroy{
public gpuMax : number = 1000
public panelMode$: Observable<string>
- public panelOrder$: Observable<[number, number, number, number]>
+
+ private panelOrder: string
+ private panelOrder$: Observable<string>
public panelTexts$: Observable<[string, string, string, string]>
constructor(private store: Store<ViewerConfiguration>) {
@@ -60,16 +62,19 @@ export class ConfigComponent implements OnInit, OnDestroy{
this.panelOrder$ = this.store.pipe(
select('ngViewerState'),
- select('panelOrder'),
- map(string => string.split('').map(s => Number(s)))
+ select('panelOrder')
)
this.panelTexts$ = this.panelOrder$.pipe(
+ map(string => string.split('').map(s => Number(s))),
map(arr => arr.map(idx => ROOT_TEXT_ORDER[idx]) as [string, string, string, string])
)
}
ngOnInit(){
+ this.subscriptions.push(
+ this.panelOrder$.subscribe(panelOrder => this.panelOrder = panelOrder)
+ )
}
ngOnDestroy(){
@@ -104,10 +109,23 @@ export class ConfigComponent implements OnInit, OnDestroy{
handleDrop(event:DragEvent){
const droppedAttri = (event.target as HTMLElement).getAttribute('panel-order')
const draggedAttri = event.dataTransfer.getData('text/plain')
- console.log({droppedAttri, draggedAttri})
+ if (droppedAttri === draggedAttri) return
+ const idx1 = Number(droppedAttri)
+ const idx2 = Number(draggedAttri)
+ const arr = this.panelOrder.split('');
+
+ [arr[idx1], arr[idx2]] = [arr[idx2], arr[idx1]]
+ this.store.dispatch({
+ type: NG_VIEWER_ACTION_TYPES.SET_PANEL_ORDER,
+ payload: { panelOrder: arr.join('') }
+ })
+ }
+ handleDragOver(event:DragEvent){
+ event.preventDefault();
+ (event.target as HTMLElement).classList.add('onDragOver')
}
- handleDragOver(event){
- event.preventDefault()
+ handleDragLeave(event:DragEvent){
+ (event.target as HTMLElement).classList.remove('onDragOver')
}
handleDragStart(event:DragEvent){
const attri = (event.target as HTMLElement).getAttribute('panel-order')
diff --git a/src/ui/config/config.style.css b/src/ui/config/config.style.css
index 6ba775769..907391412 100644
--- a/src/ui/config/config.style.css
+++ b/src/ui/config/config.style.css
@@ -1,4 +1,14 @@
-[cell-i],[cell-ii],[cell-iii],[cell-iv]
+.config-transition
+{
+ transition: background-color ease-in-out 200ms;
+}
+
+.config-transition:hover
{
background-color: rgba(128,128,128,0.1);
+}
+
+.onDragOver
+{
+ background-color: rgba(128,128,128,0.2);
}
\ No newline at end of file
diff --git a/src/ui/config/config.template.html b/src/ui/config/config.template.html
index 6d34bc0da..e34dc8b62 100644
--- a/src/ui/config/config.template.html
+++ b/src/ui/config/config.template.html
@@ -11,10 +11,14 @@
matRipple
(dragstart)="handleDragStart($event)"
(dragover)="handleDragOver($event)"
+ (dragleave)="handleDragLeave($event)"
(drop)="handleDrop($event)"
- class="w-100 h-100"
+ class="w-100 h-100 config-transition"
cell-i>
- <div [attr.panel-order]="0" class="w-100 h-100 d-flex align-items-center justify-content-center border" draggable="true">
+ <div
+ [attr.panel-order]="0"
+ class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border"
+ draggable="true">
{{ (panelTexts$ | async)[0] }}
</div>
</div>
@@ -22,10 +26,14 @@
matRipple
(dragstart)="handleDragStart($event)"
(dragover)="handleDragOver($event)"
+ (dragleave)="handleDragLeave($event)"
(drop)="handleDrop($event)"
- class="w-100 h-100"
+ class="w-100 h-100 config-transition"
cell-ii>
- <div [attr.panel-order]="1" class="w-100 h-100 d-flex align-items-center justify-content-center border" draggable="true">
+ <div
+ [attr.panel-order]="1"
+ class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border"
+ draggable="true">
{{ (panelTexts$ | async)[1] }}
</div>
</div>
@@ -33,10 +41,14 @@
matRipple
(dragstart)="handleDragStart($event)"
(dragover)="handleDragOver($event)"
+ (dragleave)="handleDragLeave($event)"
(drop)="handleDrop($event)"
- class="w-100 h-100"
+ class="w-100 h-100 config-transition"
cell-iii>
- <div [attr.panel-order]="2" class="w-100 h-100 d-flex align-items-center justify-content-center border" draggable="true">
+ <div
+ [attr.panel-order]="2"
+ class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border"
+ draggable="true">
{{ (panelTexts$ | async)[2] }}
</div>
</div>
@@ -44,10 +56,14 @@
matRipple
(dragstart)="handleDragStart($event)"
(dragover)="handleDragOver($event)"
+ (dragleave)="handleDragLeave($event)"
(drop)="handleDrop($event)"
- class="w-100 h-100"
+ class="w-100 h-100 config-transition"
cell-iv>
- <div [attr.panel-order]="3" class="w-100 h-100 d-flex align-items-center justify-content-center border" draggable="true">
+ <div
+ [attr.panel-order]="3"
+ class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border"
+ draggable="true">
{{ (panelTexts$ | async)[3] }}
</div>
</div>
@@ -55,26 +71,194 @@
<layout-horizontal-one-three
*ngSwitchCase="supportedPanelModes[1]"
class="d-block w-20em h-15em">
- <div cell-i>{{ (panelTexts$ | async)[0] }}</div>
- <div cell-ii>{{ (panelTexts$ | async)[1] }}</div>
- <div cell-iii>{{ (panelTexts$ | async)[2] }}</div>
- <div cell-iv>{{ (panelTexts$ | async)[3] }}</div>
+ <div
+ matRipple
+ (dragstart)="handleDragStart($event)"
+ (dragover)="handleDragOver($event)"
+ (dragleave)="handleDragLeave($event)"
+ (drop)="handleDrop($event)"
+ class="w-100 h-100 config-transition"
+ cell-i>
+ <div
+ [attr.panel-order]="0"
+ class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border"
+ draggable="true">
+ {{ (panelTexts$ | async)[0] }}
+ </div>
+ </div>
+ <div
+ matRipple
+ (dragstart)="handleDragStart($event)"
+ (dragover)="handleDragOver($event)"
+ (dragleave)="handleDragLeave($event)"
+ (drop)="handleDrop($event)"
+ class="w-100 h-100 config-transition"
+ cell-ii>
+ <div
+ [attr.panel-order]="1"
+ class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border"
+ draggable="true">
+ {{ (panelTexts$ | async)[1] }}
+ </div>
+ </div>
+ <div
+ matRipple
+ (dragstart)="handleDragStart($event)"
+ (dragover)="handleDragOver($event)"
+ (dragleave)="handleDragLeave($event)"
+ (drop)="handleDrop($event)"
+ class="w-100 h-100 config-transition"
+ cell-iii>
+ <div
+ [attr.panel-order]="2"
+ class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border"
+ draggable="true">
+ {{ (panelTexts$ | async)[2] }}
+ </div>
+ </div>
+ <div
+ matRipple
+ (dragstart)="handleDragStart($event)"
+ (dragover)="handleDragOver($event)"
+ (dragleave)="handleDragLeave($event)"
+ (drop)="handleDrop($event)"
+ class="w-100 h-100 config-transition"
+ cell-iv>
+ <div
+ [attr.panel-order]="3"
+ class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border"
+ draggable="true">
+ {{ (panelTexts$ | async)[3] }}
+ </div>
+ </div>
</layout-horizontal-one-three>
<layout-vertical-one-three
*ngSwitchCase="supportedPanelModes[2]"
class="d-block w-20em h-15em">
- <div cell-i>{{ (panelTexts$ | async)[0] }}</div>
- <div cell-ii>{{ (panelTexts$ | async)[1] }}</div>
- <div cell-iii>{{ (panelTexts$ | async)[2] }}</div>
- <div cell-iv>{{ (panelTexts$ | async)[3] }}</div>
+ <div
+ matRipple
+ (dragstart)="handleDragStart($event)"
+ (dragover)="handleDragOver($event)"
+ (dragleave)="handleDragLeave($event)"
+ (drop)="handleDrop($event)"
+ class="w-100 h-100 config-transition"
+ cell-i>
+ <div
+ [attr.panel-order]="0"
+ class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border"
+ draggable="true">
+ {{ (panelTexts$ | async)[0] }}
+ </div>
+ </div>
+ <div
+ matRipple
+ (dragstart)="handleDragStart($event)"
+ (dragover)="handleDragOver($event)"
+ (dragleave)="handleDragLeave($event)"
+ (drop)="handleDrop($event)"
+ class="w-100 h-100 config-transition"
+ cell-ii>
+ <div
+ [attr.panel-order]="1"
+ class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border"
+ draggable="true">
+ {{ (panelTexts$ | async)[1] }}
+ </div>
+ </div>
+ <div
+ matRipple
+ (dragstart)="handleDragStart($event)"
+ (dragover)="handleDragOver($event)"
+ (dragleave)="handleDragLeave($event)"
+ (drop)="handleDrop($event)"
+ class="w-100 h-100 config-transition"
+ cell-iii>
+ <div
+ [attr.panel-order]="2"
+ class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border"
+ draggable="true">
+ {{ (panelTexts$ | async)[2] }}
+ </div>
+ </div>
+ <div
+ matRipple
+ (dragstart)="handleDragStart($event)"
+ (dragover)="handleDragOver($event)"
+ (dragleave)="handleDragLeave($event)"
+ (drop)="handleDrop($event)"
+ class="w-100 h-100 config-transition"
+ cell-iv>
+ <div
+ [attr.panel-order]="3"
+ class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border"
+ draggable="true">
+ {{ (panelTexts$ | async)[3] }}
+ </div>
+ </div>
</layout-vertical-one-three>
<layout-single-panel
*ngSwitchCase="supportedPanelModes[3]"
class="d-block w-20em h-15em">
- <div cell-i>{{ (panelTexts$ | async)[0] }}</div>
- <div cell-ii>{{ (panelTexts$ | async)[1] }}</div>
- <div cell-iii>{{ (panelTexts$ | async)[2] }}</div>
- <div cell-iv>{{ (panelTexts$ | async)[3] }}</div>
+ <div
+ matRipple
+ (dragstart)="handleDragStart($event)"
+ (dragover)="handleDragOver($event)"
+ (dragleave)="handleDragLeave($event)"
+ (drop)="handleDrop($event)"
+ class="w-100 h-100 config-transition"
+ cell-i>
+ <div
+ [attr.panel-order]="0"
+ class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border"
+ draggable="true">
+ {{ (panelTexts$ | async)[0] }}
+ </div>
+ </div>
+ <div
+ matRipple
+ (dragstart)="handleDragStart($event)"
+ (dragover)="handleDragOver($event)"
+ (dragleave)="handleDragLeave($event)"
+ (drop)="handleDrop($event)"
+ class="w-100 h-100 config-transition"
+ cell-ii>
+ <div
+ [attr.panel-order]="1"
+ class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border"
+ draggable="true">
+ {{ (panelTexts$ | async)[1] }}
+ </div>
+ </div>
+ <div
+ matRipple
+ (dragstart)="handleDragStart($event)"
+ (dragover)="handleDragOver($event)"
+ (dragleave)="handleDragLeave($event)"
+ (drop)="handleDrop($event)"
+ class="w-100 h-100 config-transition"
+ cell-iii>
+ <div
+ [attr.panel-order]="2"
+ class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border"
+ draggable="true">
+ {{ (panelTexts$ | async)[2] }}
+ </div>
+ </div>
+ <div
+ matRipple
+ (dragstart)="handleDragStart($event)"
+ (dragover)="handleDragOver($event)"
+ (dragleave)="handleDragLeave($event)"
+ (drop)="handleDrop($event)"
+ class="w-100 h-100 config-transition"
+ cell-iv>
+ <div
+ [attr.panel-order]="3"
+ class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border"
+ draggable="true">
+ {{ (panelTexts$ | async)[3] }}
+ </div>
+ </div>
</layout-single-panel>
<div *ngSwitchDefault>
A panel mode which I have never seen before ...
diff --git a/src/ui/nehubaContainer/nehubaContainer.component.ts b/src/ui/nehubaContainer/nehubaContainer.component.ts
index 090bad598..22d62b6e0 100644
--- a/src/ui/nehubaContainer/nehubaContainer.component.ts
+++ b/src/ui/nehubaContainer/nehubaContainer.component.ts
@@ -427,12 +427,19 @@ export class NehubaContainer implements OnInit, OnDestroy{
ngOnInit(){
this.subscriptions.push(
- this.store.pipe(
- select('ngViewerState'),
- select('panelMode'),
- distinctUntilChanged()
- ).subscribe(mode => {
-
+ combineLatest(
+ this.store.pipe(
+ select('ngViewerState'),
+ select('panelMode'),
+ distinctUntilChanged()
+ ),
+ this.store.pipe(
+ select('ngViewerState'),
+ select('panelOrder'),
+ distinctUntilChanged()
+ )
+ ).subscribe(([mode, panelOrder]) => {
+ const viewPanels = panelOrder.split('').map(v => Number(v)).map(idx => this.viewPanels[idx])
/**
* TODO be smarter with event stream
*/
@@ -441,25 +448,25 @@ export class NehubaContainer implements OnInit, OnDestroy{
switch (mode) {
case H_ONE_THREE:{
const element = this.removeExistingPanels()
- const newEl = getHorizontalOneThree(this.viewPanels)
+ const newEl = getHorizontalOneThree(viewPanels)
element.appendChild(newEl)
break;
}
case V_ONE_THREE:{
const element = this.removeExistingPanels()
- const newEl = getVerticalOneThree(this.viewPanels)
+ const newEl = getVerticalOneThree(viewPanels)
element.appendChild(newEl)
break;
}
case FOUR_PANEL: {
const element = this.removeExistingPanels()
- const newEl = getFourPanel(this.viewPanels)
+ const newEl = getFourPanel(viewPanels)
element.appendChild(newEl)
break;
}
case SINGLE_PANEL: {
const element = this.removeExistingPanels()
- const newEl = getSinglePanel(this.viewPanels)
+ const newEl = getSinglePanel(viewPanels)
element.appendChild(newEl)
break;
}
--
GitLab