Vmo 3944 allow moving multiple blocks #101
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,6 @@ | ||
| import { | ||
| flatMap, isEqual, keyBy, map, mapValues, get, filter, union, includes, clone, forEach, minBy, | ||
| } from 'lodash' | ||
| import Vue from 'vue' | ||
| import {ActionTree, GetterTree, Module, MutationTree} from 'vuex' | ||
| import {IRootState} from '@/store' | ||
|
|
@@ -55,7 +57,9 @@ export interface IBuilderState { | |
| [OperationKind.CONNECTION_CREATE]: IConnectionCreateOperation, | ||
| [OperationKind.BLOCK_RELOCATE]: null, | ||
| }, | ||
| toolbarHeight: number, | ||
| draggableForExitsByUuid: {[key: string]: object}, | ||
| draggableForBlocksByUuid: {[key: string]: object}, | ||
| } | ||
|
|
||
| export const stateFactory = (): IBuilderState => ({ | ||
|
|
@@ -73,7 +77,9 @@ export const stateFactory = (): IBuilderState => ({ | |
| }, | ||
| [OperationKind.BLOCK_RELOCATE]: null, | ||
| }, | ||
| toolbarHeight: 60, | ||
| draggableForExitsByUuid: {}, | ||
| draggableForBlocksByUuid: {}, | ||
| }) | ||
|
|
||
| export const getters: GetterTree<IBuilderState, IRootState> = { | ||
|
|
@@ -89,6 +95,26 @@ export const getters: GetterTree<IBuilderState, IRootState> = { | |
| exitLabelsById: (_state, _getters, {flow: {flows}}) => mapValues(keyBy(flatMap(flows[0].blocks, 'exits'), 'uuid'), 'label'), | ||
|
There was a problem hiding this comment. Reporter: ESLint Do not use property shorthand syntax (lodash/prop-shorthand)
There was a problem hiding this comment. Reporter: ESLint Do not use property shorthand syntax (lodash/prop-shorthand)
There was a problem hiding this comment. Reporter: ESLint Do not use property shorthand syntax (lodash/prop-shorthand)
|
||
|
|
||
| isEditable: (state) => state.isEditable, | ||
|
|
||
| selectedBlocks(_state, _getters, _rootState, rootGetters) { | ||
| return rootGetters['flow/selectedBlocks'] | ||
| }, | ||
|
|
||
| selectedBlockAtTheTopPosition(_state, getters) { | ||
| return minBy(getters.selectedBlocks, 'vendor_metadata.io_viamo.uiData.yPosition') | ||
|
There was a problem hiding this comment. Reporter: ESLint Do not use property shorthand syntax (lodash/prop-shorthand)
|
||
| }, | ||
|
|
||
| selectedBlockAtTheFurthestLeftPosition(_state, getters) { | ||
| return minBy(getters.selectedBlocks, 'vendor_metadata.io_viamo.uiData.xPosition') | ||
|
There was a problem hiding this comment. Reporter: ESLint Do not use property shorthand syntax (lodash/prop-shorthand)
|
||
| }, | ||
|
|
||
| isAnyLeftSpaceAvailable(_state, getters) { | ||
| return getters.selectedBlockAtTheFurthestLeftPosition.vendor_metadata.io_viamo.uiData.xPosition > 0 | ||
| }, | ||
|
|
||
| isAnyTopSpaceAvailable(state, getters) { | ||
| return getters.selectedBlockAtTheTopPosition.vendor_metadata.io_viamo.uiData.yPosition - state.toolbarHeight > 0 | ||
|
Member
Author
There was a problem hiding this comment. @bzabos , your comment about separating pixel computation is still relevant here. I tried your proposal
... but I cannot resolve the challenge of removing this formula
|
||
| }, | ||
| } | ||
|
|
||
| export const mutations: MutationTree<IBuilderState> = { | ||
|
|
@@ -119,8 +145,14 @@ export const mutations: MutationTree<IBuilderState> = { | |
| // Vue.observable(block.vendor_metadata.io_viamo.uiData) | ||
| // } | ||
|
|
||
| if (x !== undefined) { | ||
| // eslint-disable-next-line no-param-reassign | ||
| block.vendor_metadata.io_viamo.uiData.xPosition = x | ||
| } | ||
| if (y !== undefined) { | ||
| // eslint-disable-next-line no-param-reassign | ||
| block.vendor_metadata.io_viamo.uiData.yPosition = y | ||
| } | ||
| }, | ||
|
|
||
| setIsEditable(state, value) { | ||
|
|
@@ -130,9 +162,96 @@ export const mutations: MutationTree<IBuilderState> = { | |
| initDraggableForExitsByUuid(state) { | ||
| state.draggableForExitsByUuid = {} | ||
| }, | ||
|
|
||
| updateBlockDraggablePosition(state, {uuid, position}: { uuid: IBlock['uuid'], position: IPosition }) { | ||
| console.debug('Builder', 'updateBlockDraggablePosition for ', state.draggableForBlocksByUuid[uuid], 'to ', position) | ||
| Object.assign(state.draggableForBlocksByUuid[uuid], {left: position.x, top: position.y}) | ||
| }, | ||
|
|
||
| updateToolBarHeight(state, height) { | ||
| state.toolbarHeight = height | ||
| }, | ||
| } | ||
|
|
||
| export const actions: ActionTree<IBuilderState, IRootState> = { | ||
| changeBlockPositionTo({commit, getters, dispatch, rootState}, {position: {x, y}, block}) { | ||
| if (!includes(rootState.flow.selectedBlockUuids, block.uuid)) { | ||
| commit('setBlockPositionTo', {position: {x, y}, block}) | ||
| return | ||
| } | ||
|
|
||
| // The block is selected | ||
| // Store UI Position | ||
| const initialPosition = { | ||
| x: clone(block.vendor_metadata.io_viamo.uiData.xPosition), | ||
| y: clone(block.vendor_metadata.io_viamo.uiData.yPosition), | ||
| } as IPosition | ||
|
|
||
| // Prepare translation | ||
| const translationDelta: IPosition = { | ||
| x: x - initialPosition.x, | ||
| y: y - initialPosition.y, | ||
| } | ||
|
|
||
| let shouldReversePosition = false | ||
| const isMovingToTheRight = translationDelta.x > 0 | ||
| if (isMovingToTheRight || getters.isAnyLeftSpaceAvailable) { | ||
|
There was a problem hiding this comment. Reporter: ESLint Unexpected any value in conditional. An explicit comparison or type cast is required. (@typescript-eslint/strict-boolean-expressions)
|
||
| commit('setBlockPositionTo', {position: {x}, block}) | ||
| } else { | ||
| translationDelta.x = 0 | ||
| commit('setBlockPositionTo', {position: {x: initialPosition.x}, block}) | ||
| shouldReversePosition = true | ||
| } | ||
|
|
||
| const isMovingToTheTop = translationDelta.y > 0 | ||
| if (isMovingToTheTop || getters.isAnyTopSpaceAvailable) { | ||
|
There was a problem hiding this comment. Reporter: ESLint Unexpected any value in conditional. An explicit comparison or type cast is required. (@typescript-eslint/strict-boolean-expressions)
|
||
| commit('setBlockPositionTo', {position: {y}, block}) | ||
| } else { | ||
| translationDelta.y = 0 | ||
| commit('setBlockPositionTo', {position: {y: initialPosition.y}, block}) | ||
| shouldReversePosition = true | ||
| } | ||
|
|
||
| // Reverse the draggable position | ||
| if (shouldReversePosition) { | ||
| commit('updateBlockDraggablePosition', { | ||
| uuid: block.uuid, | ||
| position: { | ||
| x: block.vendor_metadata.io_viamo.uiData.xPosition, | ||
| y: block.vendor_metadata.io_viamo.uiData.yPosition, | ||
| }, | ||
| }) | ||
| } | ||
|
|
||
| // Translate other selected blocks | ||
| forEach(getters.selectedBlocks, (currentBlock: IBlock) => { | ||
|
There was a problem hiding this comment. Reporter: ESLint Prefer _.filter or _.some over an if statement inside a _.forEach (lodash/prefer-filter)
|
||
| if (currentBlock.uuid !== block.uuid) { | ||
| dispatch('setBlockAndSyncDraggablePositionFromDelta', {delta: translationDelta, block: currentBlock}) | ||
| } | ||
| }) | ||
| }, | ||
|
|
||
| setBlockAndSyncDraggablePositionFromDelta({commit}, {delta: {x, y}, block}) { | ||
| const { | ||
| vendor_metadata: { | ||
| io_viamo: { | ||
| uiData: { | ||
| xPosition: initialXPosition, | ||
| yPosition: initialYPosition, | ||
| }, | ||
| }, | ||
| }, | ||
| } = block | ||
|
|
||
| const newPosition: IPosition = { | ||
| x: initialXPosition + x, | ||
|
There was a problem hiding this comment. Reporter: ESLint Operands of '+' operation must either be both strings or both numbers. (@typescript-eslint/restrict-plus-operands)
|
||
| y: initialYPosition + y, | ||
|
There was a problem hiding this comment. Reporter: ESLint Operands of '+' operation must either be both strings or both numbers. (@typescript-eslint/restrict-plus-operands)
|
||
| } | ||
|
|
||
| commit('setBlockPositionTo', {position: newPosition, block}) | ||
| commit('updateBlockDraggablePosition', {uuid: block.uuid, position: newPosition}) | ||
| }, | ||
|
|
||
| removeConnectionFrom({commit}, {block: {uuid: blockId}, exit: {uuid: exitId}}) { | ||
| commit('flow/block_setBlockExitDestinationBlockId', { | ||
| blockId, | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Reporter: ESLint
Rule: eslint.rules.vue/order-in-components
Severity: WARN
File: src/components/interaction-designer/Block.vue L260
The "computed" property should be above the "watch" property on line 242. (vue/order-in-components)