
本文共 11609 字,大约阅读时间需要 38 分钟。
������������������������������������������������������������������������������������
������������������-*������������������
������������������������������������������������������������������������������������������������������*���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������
���������������������������������������
������������������������������������������������������������������PSD������������������������������������������������������AE������������������������������������*������**���������������������������������������������������������������������������������
������������������������
������������
���������������������PSD"���"���������
������ AE ������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������
���������������������������������������������������- ���������������������������������������������������������������������������������
- ���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������
- ���������������������������������������������������
���������������������������
������������
������������������������������������ 5 ������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������
������������������������������������������
- ������������������������������������
- ���������������������������������������������������������
- ������������������������������/������
������������������ redux ��������������������������������������������������������������������������������������������������������� redux-undo������������������ reducer ������������������������������������������������������
import ReduxUndo from 'redux-undo'//��������������� reducerconst editReducer = (state = null, action) => { switch (action.type) { case VIDEO_INIT: { const { templates } = action.payload return { templates } } case VIDEO_TPL_CLEAR: { return {} }}//������ ReduxUndo ������ reducer ������������������export const undoEditReducer = ReduxUndo(editReducer, { initTypes: [VIDEO_TPL_CLEAR], filter: function filterActions (action, currentState, previousHistory) { const { isUndoIgnore = false } = action return !isUndoIgnore }, groupBy: groupByActionTypes([SOME_ACTION]), /* ��������������� groupBy:(action, currentState, previousHistory) => { }, */})
������������
- initTypes������������������������������������������������������������������)
- filter������������, ������������������������������������/���������������������������������
- groupBy������������������������ groupByActionTypes ������������������������������������/��������������������������������������������������������������������������� null��������������������������������������������������������������������������������������������������������������������������������������������������������������������������� null������ redux-undo ���������������������������������������������������
������ store.dispatch() ��� Undo/Redo Actions ���������������������������/������������
import { ActionCreators } from 'redux-undo'export const undo = () => (dispatch, getState) => { dispatch(ActionCreators.undo())}export const redo = () => (dispatch, getState) => { dispatch(ActionCreators.redo())}export const recovery = () => (dispatch, getState) => { dispatch(ActionCreators.jumpToPast(0)) dispatch(ActionCreators.clearHistory())}
������
������������������������������������������������������������������������������redux���mobx���������:
- ���������������������������������������������������
- ���������������������������������������
- ������������������������������������/���������������������������redux������������������������������������������������redux store���������
- ������������������������
- ���������������������������������
- ������������unmount���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������
������������
��������������������������������������������������������������������������������������������������������������������������������� AE���Final Cut ������������������������ Web ���������������������������������������������������������������������������
������������������������������������������
- ������������������������������������������������������
- ������������������������������������������������������������������������
- ���������������������������������������������������������������������������������������
- ���������������������������������������������������������������������
- ���������������������������������������������������������������������������������������������������������
- ������������������������������
��������������������������������������������������������������������� react-sortable-hoc ������������������������������������������ , ������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������ ���������������������������������������
������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������
������������������react-dnd ��������� HTML5 ������ API ������,������������������������ DOM ������������������������������������������������������������������, ������������������������������������������������������������������HTML5 ������ API ��������������������������������������������������������������� IE ������������������������������������������������������������������������ react-dnd ��������������������������� HTML5 ���������������������������������������������������������������������������������������������������������������������
������������������������������������������������������
������������
������������������
import { DndProvider } from 'react-dnd'import HTML5Backend from 'react-dnd-html5-backend'
��� DndProvider ������������������������������������ backend ��� HTML5Backend
// --- ���������������������������
TemplateViewer ������������������������������������������������������������������������������������������������ renderLayerContent���*������������������
export function renderLayerContent (layer) { return...}export default function XxxxLayerComponent (layer) { ... return{renderLayerContent(layer)}}
CustomDragLayer ������������������������������������������������������������ renderLayerContent ������������������������������������������������������������������
������������
������������������������������������������������������������������������������������������������������������������������������������������������������������������������
const [{ isHorizontalDragging }, horizontalDrag, preview] = useDrag({ item: { type: DragTypes.Horizontal, }, collect: monitor => ({ isHorizontalDragging: monitor.isDragging(), }), }) const [{ isVerticalDragging }, verticalDrag, verticalPreview] = useDrag({ item: { type: DragTypes.Vertical, }, collect: monitor => ({ isVerticalDragging: monitor.isDragging(), }), })
������������������������������������������������������
const [, drop] = useDrop({ accept: [DragTypes.Horizontal, DragTypes.Vertical], drop (item, monitor) { // ������������������ }, hover: throttle(item => { // ������������������ }, 300), })
��������������������������������������������� DOM ������������ DIV ������������������������������������������������������������������������������������������
// --- ������������ DOM// --- ������������ DOM// --- ������������ DOM/* ������������������ */ {renderLayerContent(layer)}
������������������������������������������������*������������������������
������������������������������������������������������������������������������������������������������������������������������������������������������������������ 0
// --- ������������ DOM...
������������������������������������������������������������������������������������
���������
���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������
������������������������������������������������������������������������������������������������������ Stretch ������������������function Stretch ({ children, left, width, onStretchEnd, onStretchMove,}) { function handleMouseDown (align) { // ������������ } return ({children})}
������������������������������������������ Stretch ��� children ������������
{motions.map((motion, i) =>{/* ������������������ */} )}{/* ������������ */}
������������
���������������
���������������������������������������������������������������������������������������������������*������������������������delete ������������������������������������������ react-hot-keys ���������
������������������������������������������������������������������������������������
import Hotkeys from 'react-hot-keys'{ e.preventDefault() play() }}/>
��������� SVG
������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������ push ������������������*��������������������������������������������� SVG ������������������������������������
${layer.text} ")`, }}/>
���������������
������������
������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������store������������������������������������������������������������������������������������������������������������������������������
������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������
���������������������������������������AOTULabs������������������������������
发表评论
最新留言
关于作者
