Merge pull request #1882 from old-zsh/refactor_display_drayLayer_perf…

…ormance refactor display drayLayer performance
edp963 · Aug 10, 2020 · b959fb6 · b959fb6
2 parents 6b8ae80 + e73c1ed
commit b959fb6
Show file tree

Hide file tree

Showing 12 changed files with 107 additions and 157 deletions.
diff --git a/webapp/app/containers/Display/Editor/SlideEditor.tsx b/webapp/app/containers/Display/Editor/SlideEditor.tsx
@@ -99,13 +99,14 @@ const SlideEditor: React.FC = (props) => {
     [displayId, slideId]
   )
   const changeLayersPosition = useCallback(
-    (deltaPosition: DeltaPosition, scale: number) => {
+    (deltaPosition: DeltaPosition, scale: number, eventTrigger: string) => {
       dispatch(
         DisplayActions.dragLayer(
           pick(slideParams, 'width', 'height'),
           scale,
           deltaPosition,
-          true
+          eventTrigger,
+          false
         )
       )
     },

diff --git a/webapp/app/containers/Display/Editor/SlideLayerList.tsx b/webapp/app/containers/Display/Editor/SlideLayerList.tsx
@@ -77,15 +77,16 @@ const SlideLayerList: React.FC = (props) => {
   )
 
   const onDrag = useCallback(
-    (layerId, deltaPosition: DeltaPosition, finish = false) => {
+    (layerId, deltaPosition: DeltaPosition, eventTrigger, finish = false) => {
       if (deltaPosition.deltaX == null && deltaPosition.deltaY == null) {
         return
       }
       dispatch(
-        DisplayActions.dragLayerIndependence(
+        DisplayActions.dragLayer(
           pick(slideParams, 'width', 'height'),
           scale[0],
           deltaPosition,
+          eventTrigger,
           finish,
           layerId
         )

diff --git a/webapp/app/containers/Display/actions.ts b/webapp/app/containers/Display/actions.ts
@@ -122,44 +122,11 @@ export const DisplayActions = {
       }
     }
   },
-  dragLayerIndependence(
-    slideSize: Pick<ISlideParams, 'width' | 'height'>,
-    scale: number,
-    deltaPosition: DeltaPosition,
-    finish: boolean,
-    layerId?: number
-  ) {
-    return {
-      type: ActionTypes.DRAG_LAYER_INDEPENDENCE,
-      payload: {
-        slideSize,
-        scale,
-        layerId,
-        deltaPosition,
-        finish
-      }
-    }
-  },
-  dragLayerAdjustedIndependence(
-    layerIds: number[],
-    slideSize: Pick<ISlideParams, 'width' | 'height'>,
-    deltaPosition: DeltaPosition,
-    finish: boolean
-  ) {
-    return {
-      type: ActionTypes.DRAG_LAYER_ADJUSTED_INDEPENDENCE,
-      payload: {
-        layerIds,
-        slideSize,
-        deltaPosition,
-        finish
-      }
-    }
-  },
   dragLayer(
     slideSize: Pick<ISlideParams, 'width' | 'height'>,
     scale: number,
     deltaPosition: DeltaPosition,
+    eventTrigger: string,
     finish: boolean,
     layerId?: number
   ) {
@@ -170,6 +137,7 @@ export const DisplayActions = {
         scale,
         layerId,
         deltaPosition,
+        eventTrigger,
         finish
       }
     }
@@ -178,7 +146,7 @@ export const DisplayActions = {
     layerIds: number[],
     slideSize: Pick<ISlideParams, 'width' | 'height'>,
     deltaPosition: DeltaPosition,
-    finish: boolean,
+    finish: boolean
   ) {
     return {
       type: ActionTypes.DRAG_LAYER_ADJUSTED,

diff --git a/webapp/app/containers/Display/components/Container/Container.less b/webapp/app/containers/Display/components/Container/Container.less
@@ -107,6 +107,24 @@
         &:hover &-tools {
           display: inline-block;
         }
+        &-position-tips {
+          display: none;
+          position: absolute;
+          top: 5px;
+          left: 5px;
+          z-index: 999998;
+          font-size: 16px;
+          color: #fff;
+          background-color: #000;
+          padding: 0 5px;
+          border-radius: 3px;
+          &:hover {
+            transform: scale(1.1, 1.1);
+          }
+        }
+        &:hover &-position-tips {
+          display: inline-block;
+        }
       }
     }
 

diff --git a/webapp/app/containers/Display/components/Layer/Content/LayerBox.tsx b/webapp/app/containers/Display/components/Layer/Content/LayerBox.tsx
@@ -18,7 +18,7 @@
  * >>
  */
 
-import React, { useContext, useMemo, useCallback, useState } from 'react'
+import React, { useContext, useMemo, useCallback, useState, memo } from 'react'
 import classnames from 'classnames'
 
 import { LayerListContext, LayerContext } from '../util'
@@ -150,4 +150,4 @@ const LayerBox: React.FC = (props) => {
   )
 }
 
-export default LayerBox
+export default memo(LayerBox)
diff --git a/webapp/app/containers/Display/components/Layer/Content/LayerPositionTip.tsx b/webapp/app/containers/Display/components/Layer/Content/LayerPositionTip.tsx
@@ -0,0 +1,53 @@
+/*
+ * <<
+ * Davinci
+ * ==
+ * Copyright (C) 2016 - 2017 EDP
+ * ==
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * >>
+ */
+
+import React, { useContext,useMemo, memo } from 'react'
+
+import { LayerContext } from '../util'
+import { useSelector } from 'react-redux'
+import { makeSelectCurrentOperateItemParams } from 'app/containers/Display/selectors'
+const LayerPositionTip: React.FC = () => {
+  const { operationInfo, layer } = useContext(LayerContext)
+  const { resizing, dragging } = operationInfo
+  const { id: layerId } = layer
+  let tooltip: string
+  const operateItemParams = useSelector(makeSelectCurrentOperateItemParams())
+  const params = useMemo(
+    () =>
+      dragging
+        ? operateItemParams.find((_) => _.id === layerId)?.params
+        : layer.params,
+      [dragging, operateItemParams, layer.params]
+  )
+  const { positionX, positionY, width, height } = params
+  if (resizing) {
+    tooltip = `宽度：${width}px，高度：${height}px`
+  } else {
+    tooltip = `x：${positionX}px，y：${positionY}px`
+  }
+
+  return (
+    <div className="display-slide-layer-position-tips">
+      {tooltip}
+    </div>
+  )
+}
+
+export default memo(LayerPositionTip)
diff --git a/webapp/app/containers/Display/components/Layer/Draggable/LayerDraggable.tsx b/webapp/app/containers/Display/components/Layer/Draggable/LayerDraggable.tsx
@@ -56,15 +56,17 @@ const LayerDraggable: React.FC = (props) => {
   const drag: DraggableEventHandler = useCallback(
     (e, { deltaX, deltaY }) => {
       e.stopPropagation()
-      onDrag(layerId, adjustDelta(deltaX, deltaY))
+      const eventTrigger = e.type
+      onDrag(layerId, adjustDelta(deltaX, deltaY), eventTrigger)
     },
     [layerId, onDrag]
   )
 
   const stop: DraggableEventHandler = useCallback(
     (e, { deltaX, deltaY }) => {
       e.stopPropagation()
-      onDrag(layerId, adjustDelta(deltaX, deltaY), true)
+      const eventTrigger = e.type
+      onDrag(layerId, adjustDelta(deltaX, deltaY), eventTrigger, true)
     },
     [layerId, onDrag]
   )

diff --git a/webapp/app/containers/Display/components/Layer/LayerItem.tsx b/webapp/app/containers/Display/components/Layer/LayerItem.tsx
@@ -26,7 +26,7 @@ import LayerBox from './Content/LayerBox'
 // @TODO add contextmenu to Layer
 // import LayerContextMenu from './ContextMenu/LayerContextMenu'
 import LayerTool from './Content/LayerTool'
-import LayerTooltip from './Content/LayerTooltip'
+import LayerPositionTip from './Content/LayerPositionTip'
 import LayerCore from './LayerCore'
 
 const LayerItem: React.FC = () => (
@@ -35,9 +35,8 @@ const LayerItem: React.FC = () => (
     <LayerResizable>
       <LayerBox>
         <LayerTool />
-        <LayerTooltip>
-          <LayerCore />
-        </LayerTooltip>
+        <LayerPositionTip />
+        <LayerCore />
       </LayerBox>
     </LayerResizable>
   </LayerDraggable>

diff --git a/webapp/app/containers/Display/components/Layer/types.ts b/webapp/app/containers/Display/components/Layer/types.ts
@@ -66,6 +66,7 @@ export type LayerListContextValue = {
   onDrag?: (
     layerId: number,
     deltaPosition: DeltaPosition,
+    eventTrigger: string,
     finish?: boolean
   ) => void
   onResize?: (layerId: number, deltaSize: DeltaSize, finish?: boolean) => void

diff --git a/webapp/app/containers/Display/constants.ts b/webapp/app/containers/Display/constants.ts
@@ -46,10 +46,9 @@ enum Types {
 
   RESIZE_LAYER = 'davinci/Display/RESIZE_LAYER',
   RESIZE_LAYER_ADJUSTED = 'davinci/Display/RESIZE_LAYER_ADJUSTED',
-  DRAG_LAYER_INDEPENDENCE = 'davinci/Display/DRAG_LAYER_INDEPENDENCE',
+
   DRAG_LAYER = 'davinci/Display/DRAG_LAYER',
   DRAG_LAYER_ADJUSTED = 'davinci/Display/DRAG_LAYER_ADJUSTED',
-  DRAG_LAYER_ADJUSTED_INDEPENDENCE = 'davinci/Display/DRAG_LAYER_ADJUSTED_INDEPENDENCE',
 
   CHANGE_LAYERS_STACK = 'davinci/Display/CHANGE_LAYERS_STACK',
   SET_LAYERS_ALIGNMENT = 'davinci/Display/SET_LAYERS_ALIGNMENT',
@@ -89,3 +88,8 @@ enum Types {
 export const ActionTypes = createTypes(Types)
 
 export { GraphTypes, DefaultDisplayParams } from './components/constants'
+
+export enum DragTriggerTypes {
+  MouseMove = 'mousemove',
+  KeyDown = 'keydown'
+}
diff --git a/webapp/app/containers/Display/reducer.ts b/webapp/app/containers/Display/reducer.ts
@@ -293,7 +293,7 @@ const displayReducer = (
           ].resizing = !action.payload.finish
         })
         break
-      case ActionTypes.DRAG_LAYER_ADJUSTED_INDEPENDENCE: {
+      case ActionTypes.DRAG_LAYER_ADJUSTED: {
         const {
           slideSize: { width: slideWidth, height: slideHeight },
           layerIds,
@@ -332,40 +332,6 @@ const displayReducer = (
         })
         break
       }
-      case ActionTypes.DRAG_LAYER_ADJUSTED:
-        const {
-          width: slideWidth,
-          height: slideHeight
-        } = action.payload.slideSize
-        const movingLayerIds = action.payload.layerIds
-        movingLayerIds.forEach((layerId) => {
-          if (!action.payload.finish) {
-            const layer = draft.slideLayers[draft.currentSlideId][layerId]
-            layer.params.positionX += action.payload.deltaPosition.deltaX
-            layer.params.positionY += action.payload.deltaPosition.deltaY
-            if (layer.params.positionX < 0) {
-              layer.params.positionX = 0
-            } else if (
-              layer.params.positionX + layer.params.width >
-              slideWidth
-            ) {
-              layer.params.positionX = slideWidth - layer.params.width
-            }
-            if (layer.params.positionY < 0) {
-              layer.params.positionY = 0
-            } else if (
-              layer.params.positionY + layer.params.height >
-              slideHeight
-            ) {
-              layer.params.positionY = slideHeight - layer.params.height
-            }
-          }
-
-          draft.slideLayersOperationInfo[draft.currentSlideId][
-            layerId
-          ].dragging = !action.payload.finish
-        })
-        break
 
       case ActionTypes.SELECT_LAYER:
         Object.entries(layersOperationInfo).forEach(