From 8864f440216bb17973de6861cd9833bb6b3d074d Mon Sep 17 00:00:00 2001 From: khanzzirfan Date: Mon, 13 Feb 2023 15:04:00 +1100 Subject: [PATCH 01/23] chore: added drag drop area functionality --- .../editor-basic-irfan/disable.tsx | 33 ++++++ .../editor-basic-irfan/hideCursor.tsx | 33 ++++++ .../editor-demo/editor-basic-irfan/index.less | 62 +++++++++++ docs/editor-demo/editor-basic-irfan/index.md | 13 +++ docs/editor-demo/editor-basic-irfan/index.tsx | 19 ++++ docs/editor-demo/editor-basic-irfan/mock.ts | 65 +++++++++++ docs/engine/engine-standalone/index.tsx | 12 +- src/components/edit_area/edit_action.tsx | 12 +- src/components/edit_area/edit_row.tsx | 28 +---- src/components/row_rnd/interactable.tsx | 83 +++++++++++--- src/components/row_rnd/row_rnd.tsx | 104 +++++++++++++++--- src/components/row_rnd/row_rnd_interface.ts | 30 +++-- src/components/timeline.tsx | 78 ++++++++++++- src/interface/timeline.ts | 8 ++ 14 files changed, 502 insertions(+), 78 deletions(-) create mode 100644 docs/editor-demo/editor-basic-irfan/disable.tsx create mode 100644 docs/editor-demo/editor-basic-irfan/hideCursor.tsx create mode 100644 docs/editor-demo/editor-basic-irfan/index.less create mode 100644 docs/editor-demo/editor-basic-irfan/index.md create mode 100644 docs/editor-demo/editor-basic-irfan/index.tsx create mode 100644 docs/editor-demo/editor-basic-irfan/mock.ts diff --git a/docs/editor-demo/editor-basic-irfan/disable.tsx b/docs/editor-demo/editor-basic-irfan/disable.tsx new file mode 100644 index 0000000..bb12466 --- /dev/null +++ b/docs/editor-demo/editor-basic-irfan/disable.tsx @@ -0,0 +1,33 @@ +import { Timeline } from '@xzdarcy/react-timeline-editor'; +import { Switch } from 'antd'; +import { cloneDeep } from 'lodash'; +import React, { useState } from 'react'; +import './index.less'; +import { mockData, mockEffect } from './mock'; + +const defaultEditorData = cloneDeep(mockData); + +const TimelineEditor = () => { + const [data, setData] = useState(defaultEditorData); + const [allow, setAllow] = useState(true); + + return ( +
+ setAllow(e)} + style={{ marginBottom: 20 }} + /> + +
+ ); +}; + +export default TimelineEditor; diff --git a/docs/editor-demo/editor-basic-irfan/hideCursor.tsx b/docs/editor-demo/editor-basic-irfan/hideCursor.tsx new file mode 100644 index 0000000..3af9c36 --- /dev/null +++ b/docs/editor-demo/editor-basic-irfan/hideCursor.tsx @@ -0,0 +1,33 @@ +import { Timeline } from '@xzdarcy/react-timeline-editor'; +import { Switch } from 'antd'; +import { cloneDeep } from 'lodash'; +import React, { useState } from 'react'; +import './index.less'; +import { mockData, mockEffect } from './mock'; + +const defaultEditorData = cloneDeep(mockData); + +const TimelineEditor = () => { + const [data, setData] = useState(defaultEditorData); + const [showCursor, setShowCursor] = useState(false); + + return ( +
+ setShowCursor(e)} + style={{marginBottom: 20}} + /> + +
+ ); +}; + +export default TimelineEditor; diff --git a/docs/editor-demo/editor-basic-irfan/index.less b/docs/editor-demo/editor-basic-irfan/index.less new file mode 100644 index 0000000..1128e89 --- /dev/null +++ b/docs/editor-demo/editor-basic-irfan/index.less @@ -0,0 +1,62 @@ +@import '~antd/dist/antd.css'; + +.dropzone { + background-color: #bfe4ff; + border: dashed 4px transparent; + border-radius: 4px; + margin: 10px auto 30px; + padding: 10px; + width: 80%; + transition: background-color 0.3s; +} + +.drop-active { + border-color: #aaa !important; +} + +.drop-target { + // background-color: #29e !important; + border-color: #fff !important; + border-style: solid; +} + +.drag-drop { + display: inline-block; + min-width: 40px; + padding: 2em 0.5em; + margin: 1rem 0 0 1rem; + + color: #fff; + // background-color: #29e; + border: solid 2px #fff; + + touch-action: none; + transform: translate(0px, 0px); + + transition: background-color 0.3s; +} + +.drag-drop.can-drop { + color: #000; + background-color: #4e4; +} + +.timeline-editor-example0 { + .timeline-editor { + width: 100%; + max-width: 800px; + height: 300px; + + .timeline-editor-edit-row:nth-of-type(odd) { + background-color: darkolivegreen; + } + + &-action { + height: 28px !important; + top: 50%; + transform: translateY(-50%); + } + } +} + + diff --git a/docs/editor-demo/editor-basic-irfan/index.md b/docs/editor-demo/editor-basic-irfan/index.md new file mode 100644 index 0000000..8e34327 --- /dev/null +++ b/docs/editor-demo/editor-basic-irfan/index.md @@ -0,0 +1,13 @@ +--- +title: editor basic dropzone +toc: 'menu' +order: 0 +group: + title: 编辑器示例 +--- + +### dropzone usage + +> 尝试向右拖动动作块，可自动识别无限滚动延长 + + diff --git a/docs/editor-demo/editor-basic-irfan/index.tsx b/docs/editor-demo/editor-basic-irfan/index.tsx new file mode 100644 index 0000000..cff4e25 --- /dev/null +++ b/docs/editor-demo/editor-basic-irfan/index.tsx @@ -0,0 +1,19 @@ +import { cloneDeep } from 'lodash'; +import React, { useEffect, useState } from 'react'; +import './index.less'; +import { mockData, mockEffect } from './mock'; +import { Timeline } from '../../../src/components/timeline'; + +const defaultEditorData = cloneDeep(mockData); + +const TimelineEditor = () => { + const [data, setData] = useState(defaultEditorData); + + return ( +
+ +
+ ); +}; + +export default TimelineEditor; diff --git a/docs/editor-demo/editor-basic-irfan/mock.ts b/docs/editor-demo/editor-basic-irfan/mock.ts new file mode 100644 index 0000000..f24aa7c --- /dev/null +++ b/docs/editor-demo/editor-basic-irfan/mock.ts @@ -0,0 +1,65 @@ +import { TimelineEffect, TimelineRow } from '@xzdarcy/react-timeline-editor'; + +export const mockEffect: Record = { + effect0: { + id: 'effect0', + name: '效果0', + }, + effect1: { + id: 'effect1', + name: '效果1', + }, +}; + +export const mockData: TimelineRow[] = [ + { + id: '0', + actions: [ + { + id: 'action00', + start: 0, + end: 2, + effectId: 'effect0', + }, + ], + }, + { + id: '1', + actions: [ + { + id: 'action10', + start: 1.5, + end: 5, + effectId: 'effect1', + }, + ], + }, + { + id: '2', + actions: [ + { + id: 'action20', + start: 3, + end: 4, + effectId: 'effect0', + }, + ], + }, + // { + // id: "3", + // actions: [ + // { + // id: "action30", + // start: 4, + // end: 4.5, + // effectId: "effect1", + // }, + // { + // id: "action31", + // start: 6, + // end: 8, + // effectId: "effect1", + // }, + // ], + // }, +]; diff --git a/docs/engine/engine-standalone/index.tsx b/docs/engine/engine-standalone/index.tsx index 2ac13dc..83d819c 100644 --- a/docs/engine/engine-standalone/index.tsx +++ b/docs/engine/engine-standalone/index.tsx @@ -22,11 +22,11 @@ const TimelineEditor = () => { timelineEngine.current.on('paused', () => setIsPlaying(false)); timelineEngine.current.on('afterSetTime', ({ time }) => setTime(time)); timelineEngine.current.on('setTimeByTick', ({ time }) => setTime(time)); - + let dur = 0; - mockData.forEach(row => { - row.actions.forEach(action => dur = Math.max(dur, action.end)); - }) + mockData.forEach((row) => { + row.actions.forEach((action) => (dur = Math.max(dur, action.end))); + }); setDuration(dur); return () => { @@ -50,7 +50,7 @@ const TimelineEditor = () => { const handleSetTime = (value: number) => { timelineEngine.current.setTime(Number(value)); timelineEngine.current.reRender(); - } + }; // 时间展示 const timeRender = (time: number) => { @@ -69,7 +69,7 @@ const TimelineEditor = () => {
{timeRender(time)}
- + {/* */}
{timeRender(duration)}
diff --git a/src/components/edit_area/edit_action.tsx b/src/components/edit_area/edit_action.tsx index ac6cfcc..911e0b3 100644 --- a/src/components/edit_area/edit_action.tsx +++ b/src/components/edit_area/edit_action.tsx @@ -52,6 +52,7 @@ export const EditAction: FC = ({ handleTime, areaRef, deltaScrollLeft, + onDrop, }) => { const rowRnd = useRef(); const isDragWhenClick = useRef(false); @@ -100,11 +101,13 @@ export const EditAction: FC = ({ //#region [rgba(100,120,156,0.08)] 回调 const handleDragStart: RndDragStartCallback = () => { + // console.log('editaction-> handleDragstart'); onActionMoveStart && onActionMoveStart({ action, row }); }; - const handleDrag: RndDragCallback = ({ left, width }) => { - isDragWhenClick.current = true; + const handleDrag: RndDragCallback = ({ left, width, top }) => { + // console.log('editaction-> handleDrag move'); + isDragWhenClick.current = true; if (onActionMoving) { const { start, end } = parserTransformToTime({ left, width }, { scaleWidth, scale, startLeft }); const result = onActionMoving({ action, row, start, end }); @@ -115,16 +118,15 @@ export const EditAction: FC = ({ }; const handleDragEnd: RndDragEndCallback = ({ left, width }) => { + // console.log('editaction-> handleDragEnd'); // 计算时间 const { start, end } = parserTransformToTime({ left, width }, { scaleWidth, scale, startLeft }); - // 设置数据 const rowItem = editorData.find((item) => item.id === row.id); const action = rowItem.actions.find((item) => item.id === id); action.start = start; action.end = end; setEditorData(editorData); - // 执行回调 if (onActionMoveEnd) onActionMoveEnd({ action, row, start, end }); }; @@ -230,6 +232,8 @@ export const EditAction: FC = ({ }} className={prefix((classNames || []).join(' '))} style={{ height: rowHeight }} + data-testid="context-menu" + data-actionid={action?.id || 'null'} > {getActionRender && getActionRender(nowAction, nowRow)} {flexible &&
} diff --git a/src/components/edit_area/edit_row.tsx b/src/components/edit_area/edit_row.tsx index fa8f232..a6e1ace 100644 --- a/src/components/edit_area/edit_row.tsx +++ b/src/components/edit_area/edit_row.tsx @@ -17,21 +17,11 @@ export type EditRowProps = CommonProp & { scrollLeft: number; /** 设置scroll left */ deltaScrollLeft: (scrollLeft: number) => void; + onDrop: (rowId: string, actionId: string) => void; }; export const EditRow: FC = (props) => { - const { - rowData, - style = {}, - onClickRow, - onDoubleClickRow, - onContextMenuRow, - areaRef, - scrollLeft, - startLeft, - scale, - scaleWidth, - } = props; + const { rowData, style = {}, onClickRow, onDoubleClickRow, onContextMenuRow, areaRef, scrollLeft, startLeft, scale, scaleWidth } = props; const classNames = ['edit-row']; if (rowData?.selected) classNames.push('edit-row-selected'); @@ -47,9 +37,9 @@ export const EditRow: FC = (props) => { return (
{ if (rowData && onClickRow) { @@ -71,13 +61,7 @@ export const EditRow: FC = (props) => { }} > {(rowData?.actions || []).map((action) => ( - + ))}
); diff --git a/src/components/row_rnd/interactable.tsx b/src/components/row_rnd/interactable.tsx index 0b334e4..37660cd 100644 --- a/src/components/row_rnd/interactable.tsx +++ b/src/components/row_rnd/interactable.tsx @@ -1,8 +1,9 @@ -import { DraggableOptions } from "@interactjs/actions/drag/plugin"; -import { ResizableOptions } from "@interactjs/actions/resize/plugin"; -import { DragEvent, Interactable } from "@interactjs/types"; -import interact from "interactjs"; -import { cloneElement, FC, ReactElement, useEffect, useRef } from "react"; +import { DraggableOptions } from '@interactjs/actions/drag/plugin'; +import { ResizableOptions } from '@interactjs/actions/resize/plugin'; +import { DropzoneOptions } from '@interactjs/actions/drop/plugin'; +import { DragEvent, DropEvent, Interactable } from '@interactjs/types'; +import interact from 'interactjs'; +import { cloneElement, FC, ReactElement, useEffect, useRef } from 'react'; export const InteractComp: FC<{ interactRef?: React.MutableRefObject; @@ -10,23 +11,27 @@ export const InteractComp: FC<{ draggableOptions: DraggableOptions; resizable: boolean; resizableOptions: ResizableOptions; -}> = ({ children, interactRef, draggable, resizable, draggableOptions, resizableOptions }) => { + dropzone: boolean; + dropzoneOptions?: DropzoneOptions; +}> = ({ children, interactRef, draggable, resizable, draggableOptions, resizableOptions, dropzone, dropzoneOptions }) => { const nodeRef = useRef(); const interactable = useRef(); const draggableOptionsRef = useRef(); const resizableOptionsRef = useRef(); + const dropzoneOptionsRef = useRef(); useEffect(() => { draggableOptionsRef.current = { ...draggableOptions }; resizableOptionsRef.current = { ...resizableOptions }; - }, [draggableOptions, resizableOptions]); + dropzoneOptionsRef.current = { ...dropzoneOptions }; + }, [draggableOptions, resizableOptions, dropzoneOptions]); useEffect(() => { interactable.current && interactable.current.unset(); interactable.current = interact(nodeRef.current); interactRef.current = interactable.current; setInteractions(); - }, [draggable, resizable]); + }, [draggable, resizable, dropzone]); const setInteractions = () => { if (draggable) @@ -36,12 +41,62 @@ export const InteractComp: FC<{ onmove: (e) => draggableOptionsRef.current.onmove && (draggableOptionsRef.current.onmove as (e: DragEvent) => any)(e), onend: (e) => draggableOptionsRef.current.onend && (draggableOptionsRef.current.onend as (e: DragEvent) => any)(e), }); - if (resizable) interactable.current.resizable({ - ...resizableOptionsRef.current, - onstart: (e) => resizableOptionsRef.current.onstart && (resizableOptionsRef.current.onstart as (e: DragEvent) => any)(e), - onmove: (e) => resizableOptionsRef.current.onmove && (resizableOptionsRef.current.onmove as (e: DragEvent) => any)(e), - onend: (e) => resizableOptionsRef.current.onend && (resizableOptionsRef.current.onend as (e: DragEvent) => any)(e), - }); + if (resizable) + interactable.current.resizable({ + ...resizableOptionsRef.current, + onstart: (e) => resizableOptionsRef.current.onstart && (resizableOptionsRef.current.onstart as (e: DragEvent) => any)(e), + onmove: (e) => resizableOptionsRef.current.onmove && (resizableOptionsRef.current.onmove as (e: DragEvent) => any)(e), + onend: (e) => resizableOptionsRef.current.onend && (resizableOptionsRef.current.onend as (e: DragEvent) => any)(e), + }); + + if (dropzone) { + // interactable.current.dropzone({ + // accept: '.timeline-editor-action', + // overlap: 0.75, + // checker: (dragEvent, event, dropped, dropzone, dropElement, draggable, dragElement) => { + // // console.log('draggelement', dragElement); + // // console.log('draggables', draggable); + // return true; + // }, + // ondropactivate: function (event) { + // // add active dropzone feedback + // console.log('dropactivate'); + // event.target.classList.add('drop-active'); + // }, + // ondragenter: function (event) { + // console.log('ondragenter'); + // var draggableElement = event.relatedTarget; + // var dropzoneElement = event.target; + // // feedback the possibility of a drop + // dropzoneElement.classList.add('drop-target'); + // draggableElement.classList.add('can-drop'); + // // draggableElement.textContent = 'Dragged in'; + // }, + // ondragleave: function (event) { + // console.log('ondragleave'); + // // remove the drop feedback style + // event.target.classList.remove('drop-target'); + // event.relatedTarget.classList.remove('can-drop'); + // // event.relatedTarget.textContent = 'Dragged out'; + // }, + // ondrop: function (event) { + // console.log('onDropevent', event); + // // event.relatedTarget.textContent = 'Dropped'; + // if (dropzoneOptionsRef.current.ondrop) { + // (dropzoneOptionsRef.current.ondrop as (e: DropEvent) => any)(event); + // } + // }, + // ondropdeactivate: function (event) { + // console.log('ondropdeactivate', event); + // // remove active dropzone feedback + // event.target.classList.remove('drop-active'); + // event.target.classList.remove('drop-target'); + // if (dropzoneOptionsRef.current.ondrop) { + // (dropzoneOptionsRef.current.ondrop as (e: DropEvent) => any)(event); + // } + // }, + // }); + } }; return cloneElement(children as ReactElement, { diff --git a/src/components/row_rnd/row_rnd.tsx b/src/components/row_rnd/row_rnd.tsx index 3dda6a7..819d52b 100644 --- a/src/components/row_rnd/row_rnd.tsx +++ b/src/components/row_rnd/row_rnd.tsx @@ -1,10 +1,11 @@ import { Interactable } from '@interactjs/core/Interactable'; -import { DragEvent, ResizeEvent } from '@interactjs/types/index'; +import { DragEvent, DropEvent, ResizeEvent } from '@interactjs/types/index'; import React, { ReactElement, useEffect, useImperativeHandle, useRef } from 'react'; import { DEFAULT_ADSORPTION_DISTANCE, DEFAULT_MOVE_GRID, DEFAULT_START_LEFT } from '../../interface/const'; import { useAutoScroll } from './hooks/useAutoScroll'; import { InteractComp } from './interactable'; import { Direction, RowRndApi, RowRndProps } from './row_rnd_interface'; +import interact from 'interactjs'; export const RowDnd = React.forwardRef( ( @@ -13,12 +14,13 @@ export const RowDnd = React.forwardRef( edges, left, width, - + top, start = DEFAULT_START_LEFT, grid = DEFAULT_MOVE_GRID, bounds = { left: Number.MIN_SAFE_INTEGER, right: Number.MAX_SAFE_INTEGER, + top: Number.MAX_SAFE_INTEGER, }, enableResizing = true, enableDragging = true, @@ -32,11 +34,15 @@ export const RowDnd = React.forwardRef( onDrag, parentRef, deltaScrollLeft, + onDrop, }, ref, ) => { const interactable = useRef(); const deltaX = useRef(0); + const deltaY = useRef(0); + const originalY = useRef(0); + const isAdsorption = useRef(false); const { initAutoScroll, dealDragAutoScroll, dealResizeAutoScroll, stopAutoScroll } = useAutoScroll(parentRef); @@ -50,17 +56,25 @@ export const RowDnd = React.forwardRef( useImperativeHandle(ref, () => ({ updateLeft: (left) => handleUpdateLeft(left || 0, false), updateWidth: (width) => handleUpdateWidth(width, false), + updateTop: (top) => handleUpdateTop(top || 0, false), getLeft: handleGetLeft, getWidth: handleGetWidth, + getTop: handleGetTop, })); + useEffect(() => { const target = interactable.current.target as HTMLElement; handleUpdateWidth(typeof width === 'undefined' ? target.offsetWidth : width, false); }, [width]); + useEffect(() => { handleUpdateLeft(left || 0, false); }, [left]); + // useEffect(() => { + // handleUpdateTop(top || 0, false); + // }, [top]); + const handleUpdateLeft = (left: number, reset = true) => { if (!interactable.current || !interactable.current.target) return; reset && (deltaX.current = 0); @@ -68,6 +82,15 @@ export const RowDnd = React.forwardRef( target.style.left = `${left}px`; Object.assign(target.dataset, { left }); }; + + const handleUpdateTop = (top: number, reset = true) => { + if (!interactable.current || !interactable.current.target) return; + reset && (deltaY.current = 0); + const target = interactable.current.target as HTMLElement; + target.style.top = `${top}px`; + Object.assign(target.dataset, { top }); + }; + const handleUpdateWidth = (width: number, reset = true) => { if (!interactable.current || !interactable.current.target) return; reset && (deltaX.current = 0); @@ -79,6 +102,12 @@ export const RowDnd = React.forwardRef( const target = interactable.current.target as HTMLElement; return parseFloat(target?.dataset?.left || '0'); }; + + const handleGetTop = () => { + const target = interactable.current.target as HTMLElement; + return parseFloat(target?.dataset?.top || '0'); + }; + const handleGetWidth = () => { const target = interactable.current.target as HTMLElement; return parseFloat(target?.dataset?.width || '0'); @@ -88,13 +117,15 @@ export const RowDnd = React.forwardRef( //#region [rgba(188,188,120,0.05)] 回调api const handleMoveStart = (e: DragEvent) => { deltaX.current = 0; + deltaY.current = 0; + originalY.current = e.dy; isAdsorption.current = false; initAutoScroll(); onDragStart && onDragStart(); }; - const move = (param: { preLeft: number; preWidth: number; scrollDelta?: number }) => { - const { preLeft, preWidth, scrollDelta } = param; + const move = (param: { preLeft: number; preWidth: number; scrollDelta?: number; preTop?: number }) => { + const { preLeft, preWidth, scrollDelta, preTop } = param; const distance = isAdsorption.current ? adsorptionDistance : grid; if (Math.abs(deltaX.current) >= distance) { const count = parseInt(deltaX.current / distance + ''); @@ -134,48 +165,60 @@ export const RowDnd = React.forwardRef( left: curLeft, lastWidth: preWidth, width: preWidth, + top: preTop, }, scrollDelta, ); if (ret === false) return; } - handleUpdateLeft(curLeft, false); } + + const currentY = preTop; + handleUpdateTop(currentY, false); }; const handleMove = (e: DragEvent) => { const target = e.target; - if (deltaScrollLeft && parentRef?.current) { + console.log('deltaScrollLeft logic'); const result = dealDragAutoScroll(e, (delta) => { deltaScrollLeft(delta); - let { left, width } = target.dataset; + let { left, width, top } = target.dataset; const preLeft = parseFloat(left); const preWidth = parseFloat(width); + const preTop = parseFloat(top || '0'); deltaX.current += delta; - move({ preLeft, preWidth, scrollDelta: delta }); + deltaY.current += e.dy; + move({ preLeft, preWidth, scrollDelta: delta, preTop }); }); if (!result) return; } - let { left, width } = target.dataset; + let { left, width, top } = target.dataset; const preLeft = parseFloat(left); const preWidth = parseFloat(width); + let preTop = parseFloat(top || '16'); deltaX.current += e.dx; - move({ preLeft, preWidth }); + deltaY.current += e.dy; + if (Math.abs(deltaY.current) > 0) { + preTop = deltaY.current; + } + move({ preLeft, preWidth, preTop }); }; const handleMoveStop = (e: DragEvent) => { deltaX.current = 0; + deltaY.current = 0; isAdsorption.current = false; stopAutoScroll(); const target = e.target; - let { left, width } = target.dataset; - onDragEnd && onDragEnd({ left: parseFloat(left), width: parseFloat(width) }); + let { left, width, top } = target.dataset; + const preTop = parseFloat(top || '0'); + onDragEnd && onDragEnd({ left: parseFloat(left), width: parseFloat(width), top: preTop }); }; const handleResizeStart = (e: ResizeEvent) => { @@ -307,29 +350,56 @@ export const RowDnd = React.forwardRef( deltaX.current += dir === 'left' ? e.deltaRect.left : e.deltaRect.right; resize({ preLeft, preWidth, dir }); }; + const handleResizeStop = (e: ResizeEvent) => { deltaX.current = 0; isAdsorption.current = false; stopAutoScroll(); const target = e.target; - let { left, width } = target.dataset; + let { left, width, top } = target.dataset; let dir: Direction = e.edges?.right ? 'right' : 'left'; onResizeEnd && onResizeEnd(dir, { left: parseFloat(left), width: parseFloat(width), + top: parseFloat(top), }); }; + + const handleDropDeactivate = (event: DropEvent) => { + const target = interactable.current.target as HTMLElement; + event.relatedTarget.style.removeProperty('top'); + // target.style.top = `${top}px`; + // Object.assign(target.dataset, { top: '0' }); + // target.style.removeProperty('top'); + deltaY.current = 0; + Object.assign(target.dataset, { top: 0 }); + }; + + const handleOnDrop = (event: DropEvent) => { + const target = interactable.current.target as HTMLElement; + event.relatedTarget.style.removeProperty('top'); + const droppedRow = event.target.getAttribute('data-rowid'); + const actionId = event.relatedTarget.getAttribute('data-actionid'); + // console.log('eventdrop', event); + deltaY.current = 0; + Object.assign(target.dataset, { top: 0 }); + if (onDrop) { + onDrop(droppedRow, actionId); + } + }; //#endregion return ( ( onstart: handleResizeStart, onend: handleResizeStop, }} + dropzone + dropzoneOptions={{ + // ondropdeactivate: handleDropDeactivate, + ondrop: handleOnDrop, + }} > {React.cloneElement(children as ReactElement, { style: { ...((children as ReactElement).props.style || {}), left, width, + zIndex: 10, }, })} diff --git a/src/components/row_rnd/row_rnd_interface.ts b/src/components/row_rnd/row_rnd_interface.ts index f089f21..05483da 100644 --- a/src/components/row_rnd/row_rnd_interface.ts +++ b/src/components/row_rnd/row_rnd_interface.ts @@ -1,44 +1,39 @@ -import { DragEvent, ResizeEvent } from "@interactjs/types/index"; +import { DragEvent, ResizeEvent } from '@interactjs/types/index'; type EventData = { lastLeft: number; left: number; lastWidth: number; width: number; + top?: number; }; export type RndDragStartCallback = () => void; -export type RndDragCallback = ( - data: EventData, - scrollDelta?: number, -) => boolean | void; -export type RndDragEndCallback = (data: Pick) => void; +export type RndDragCallback = (data: EventData, scrollDelta?: number) => boolean | void; +export type RndDragEndCallback = (data: Pick) => void; -export type Direction = "left" | "right"; +export type Direction = 'left' | 'right'; export type RndResizeStartCallback = (dir: Direction) => void; -export type RndResizeCallback = ( - dir: Direction, - data: EventData -) => boolean | void; -export type RndResizeEndCallback = ( - dir: Direction, - data: Pick -) => void; +export type RndResizeCallback = (dir: Direction, data: EventData) => boolean | void; +export type RndResizeEndCallback = (dir: Direction, data: Pick) => void; export interface RowRndApi { updateWidth: (size: number) => void; updateLeft: (left: number) => void; + updateTop: (top: number) => void; getLeft: () => number; getWidth: () => number; + getTop: () => number; } export interface RowRndProps { width?: number; left?: number; + top?: number; grid?: number; start?: number; bounds?: { left: number; right: number }; - edges?: {left: boolean | string, right: boolean | string}; + edges?: { left: boolean | string; right: boolean | string }; onResizeStart?: RndResizeStartCallback; onResize?: RndResizeCallback; @@ -46,10 +41,11 @@ export interface RowRndProps { onDragStart?: RndDragStartCallback; onDrag?: RndDragCallback; onDragEnd?: RndDragEndCallback; + onDrop?: (rowId: string, actionId: string) => void; // 同时传入parentRef和deltaScrollLeft时会启动自动滚动 parentRef?: React.MutableRefObject; deltaScrollLeft?: (delta: number) => void; - + children?: React.ReactNode; enableResizing?: boolean; diff --git a/src/components/timeline.tsx b/src/components/timeline.tsx index a33361f..c5d76ca 100644 --- a/src/components/timeline.tsx +++ b/src/components/timeline.tsx @@ -9,10 +9,11 @@ import { Cursor } from './cursor/cursor'; import { EditArea } from './edit_area/edit_area'; import './timeline.less'; import { TimeArea } from './time_area/time_area'; +import interact from 'interactjs'; export const Timeline = React.forwardRef((props, ref) => { const checkedProps = checkProps(props); - const { style } = props; + const { style, onDrop } = props; let { effects, editorData: data, @@ -49,6 +50,81 @@ export const Timeline = React.forwardRef((props, setEditorData(data); }, [data, minScaleCount, scale]); + useEffect(() => { + interact('.timeline-editor-edit-row').dropzone({ + accept: '.timeline-editor-action', + overlap: 0.85, + ondropactivate: function (event) { + // add active dropzone feedback + event.target.classList.add('drop-active'); + }, + ondragenter: function (event) { + let draggableElement = event.relatedTarget; + let dropzoneElement = event.target; + // feedback the possibility of a drop + dropzoneElement.classList.add('drop-target'); + draggableElement.classList.add('can-drop'); + // draggableElement.textContent = 'Dragged in'; + }, + ondragleave: function (event) { + // remove the drop feedback style + event.target.classList.remove('drop-target'); + event.relatedTarget.classList.remove('can-drop'); + // event.relatedTarget.textContent = 'Dragged out'; + }, + ondrop: function (event) { + if (event) { + event.stopPropagation(); + } + const rowId = event.currentTarget.getAttribute('data-rowid'); + const actionId = event.relatedTarget.getAttribute('data-actionid'); + let droppedRowData = null; + let oldRowId = null; + let actionData = null; + editorData.forEach((f) => { + const hasAction = f.actions.find((e) => e.id === actionId); + if (hasAction) { + oldRowId = f.id; + actionData = hasAction; + const { actions, ...restProps } = f; + droppedRowData = restProps; + } + }); + + const modifiedEditorData = editorData.map((er) => { + if (er.id === rowId) { + const currActions = er.actions || []; + const updatedActions = currActions.concat(actionData); + + return { + ...er, + actions: updatedActions, + }; + } else if (er.id === oldRowId) { + const updatedActions = er.actions.filter((f) => f.id !== actionData.id); + return { + ...er, + actions: updatedActions, + }; + } + return er; + }); + setEditorData(modifiedEditorData); + handleEditorDataChange(modifiedEditorData); + if (onDrop) { + onDrop(rowId, actionId); + } + }, + ondropdeactivate: function (event) { + event.stopPropagation(); + // remove active dropzone feedback + event.target.classList.remove('drop-active'); + event.target.classList.remove('drop-target'); + event.relatedTarget.style.removeProperty('top'); + }, + }); + }, []); + useEffect(() => { engineRef.current.effects = effects; }, [effects]); diff --git a/src/interface/timeline.ts b/src/interface/timeline.ts index c56b7d8..5b00510 100644 --- a/src/interface/timeline.ts +++ b/src/interface/timeline.ts @@ -188,6 +188,14 @@ export interface EditData { * @description cursor拖拽事件 */ onCursorDrag?: (time: number) => void; + + /** + * action item dropped to new row. + * @param rowId row id dropped to + * @param actionId action item id that got dropped to a rowid + * @returns + */ + onDrop?: (rowId, actionId) => void; } export interface TimelineState { From 1d476bc2b911862286604c54ac03e9360b0aa261 Mon Sep 17 00:00:00 2001 From: khanzzirfan Date: Mon, 13 Feb 2023 15:16:55 +1100 Subject: [PATCH 02/23] chore: updated version --- CHANGELOG.md | 27 +++++++++++++++++++++++++++ README.md | 43 +++++++++++++++++++++++-------------------- package.json | 16 +++++++++------- publish.readme.md | 3 +++ 4 files changed, 62 insertions(+), 27 deletions(-) create mode 100644 CHANGELOG.md create mode 100644 publish.readme.md diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..d8eb933 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,27 @@ +# Changelog + +All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. + +## 0.2.0 (2023-02-13) + + +### Features + +* ✨ add cursor drag start/end props ([61b5a5e](https://github.com/khanzzirfan/react-timeline-editor/commit/61b5a5e2a0a263541d908fe82d65c3eed74851f8)) +* ✨ allow to set scrollLeft ([dcc8d1e](https://github.com/khanzzirfan/react-timeline-editor/commit/dcc8d1eade0c4c4c70976c6c8c02b5d1fc2570fe)) +* ✨ auto scroll when drag cursor ([fc55f56](https://github.com/khanzzirfan/react-timeline-editor/commit/fc55f56afb8ec0633d4e90e1e3bc7ee1aec7b790)) +* ✨ on cursor drag ([8150141](https://github.com/khanzzirfan/react-timeline-editor/commit/815014156d39eb0736c346fc270da8f5ffb6d31a)) + + +### Bug Fixes + +* 🐛 compatible with react18 ([de966e0](https://github.com/khanzzirfan/react-timeline-editor/commit/de966e012a7306cc492a12547638a8d494846301)) +* 🐛 cursor listen scrollLeft change ([520e4cb](https://github.com/khanzzirfan/react-timeline-editor/commit/520e4cbedf0c5a5d5063fa91d4359733105d9abd)) +* 🐛 engine example audio play ([a0f6e54](https://github.com/khanzzirfan/react-timeline-editor/commit/a0f6e54be025b688e0c9d5ed0c36b05b8fc5c788)) +* 🐛 engine example destroy error ([b2919d9](https://github.com/khanzzirfan/react-timeline-editor/commit/b2919d919e0b03fc1b2880017c12e8eabf4a502e)) +* 🐛 engine example engine reference error ([123e72e](https://github.com/khanzzirfan/react-timeline-editor/commit/123e72eb315046ab954ae591574ae2500f2f57c5)) +* 🐛 react type config ([cca5a5b](https://github.com/khanzzirfan/react-timeline-editor/commit/cca5a5b9d617de092b5b8904390a2a34c2f87822)) +* 🐛 remove 'window' to adapt for nextjs ([51904d5](https://github.com/khanzzirfan/react-timeline-editor/commit/51904d5456643e0b66e2227fe74eb6fc78f8ac20)) +* 🐛 remove not necessary dependencies ([61a115d](https://github.com/khanzzirfan/react-timeline-editor/commit/61a115dd5dcfe870a080e6915486898bae27b873)) +* 🐛 scroll sync error ([0a7b459](https://github.com/khanzzirfan/react-timeline-editor/commit/0a7b459a3bf77e9c0879528ff0956ec5163f7440)) +* **emitter:** make offAll() keep events names ([d02f2b7](https://github.com/khanzzirfan/react-timeline-editor/commit/d02f2b79017c1cb1d78465b42afb64804c8f86bf)) diff --git a/README.md b/README.md index 238cef3..c7492d4 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,16 @@ +## Original Work + +This repo is forked from the original author repo `@xzdarcy/react-timeline-editor` and modified with custom requirements. + # React Timeline Editor + [![npm version](https://img.shields.io/npm/v/@xzdarcy/react-timeline-editor.svg?style=flat-square)](https://www.npmjs.com/package/@xzdarcy/react-timeline-editor) [![npm downloads](https://img.shields.io/npm/dm/@xzdarcy/react-timeline-editor.svg?style=flat-square)](https://www.npmjs.com/package/@xzdarcy/react-timeline-editor) **[React Timeline Editor](https://zdarcy.com/)** is a react component used to quickly build a timeline animation editor. ![example](https://github.com/xzdarcy/react-timeline-editor/blob/f79d85eee8a723e5210c04232daf2c51888418c0/public/assets/timeline.gif) + ## Getting Started ```bash @@ -15,50 +21,47 @@ npm install @xzdarcy/react-timeline-editor import { Timeline, TimelineEffect, TimelineRow } from '@xzdarcy/react-timeline-editor'; import React from 'react'; -const mockData: TimelineRow[] = [{ - id: "0", +const mockData: TimelineRow[] = [ + { + id: '0', actions: [ { - id: "action00", + id: 'action00', start: 0, end: 2, - effectId: "effect0", + effectId: 'effect0', }, ], }, { - id: "1", + id: '1', actions: [ { - id: "action10", + id: 'action10', start: 1.5, end: 5, - effectId: "effect1", - } + effectId: 'effect1', + }, ], -}] + }, +]; const mockEffect: Record = { effect0: { - id: "effect0", - name: "效果0", + id: 'effect0', + name: '效果0', }, effect1: { - id: "effect1", - name: "效果1", + id: 'effect1', + name: '效果1', }, }; const TimelineEditor = () => { - return ( - - ); + return ; }; ``` ## Documention -Checkout the [Docs](https://zdarcy.com/) for a demonstration of some basic and advanced features. +Checkout the [Docs](https://zdarcy.com/) for a demonstration of some basic and advanced features. diff --git a/package.json b/package.json index 5714782..fcd77a5 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "@xzdarcy/react-timeline-editor", - "version": "0.1.7", - "author": "xzdarcy", + "name": "@reacthub/react-timeline-editor", + "version": "0.2.0", + "author": "khanzzirfan", "license": "MIT", "keywords": [ "timeline", @@ -11,12 +11,12 @@ "typescript" ], "bugs": { - "url": "https://github.com/xzdarcy/react-timeline-editor/issues" + "url": "https://github.com/khanzzirfan/react-timeline-editor/issues" }, - "homepage": "https://github.com/xzdarcy/react-timeline-editor#readme", + "homepage": "https://github.com/khanzzirfan/react-timeline-editor#readme", "repository": { "type": "git", - "url": "git+https://github.com/xzdarcy/react-timeline-editor.git" + "url": "git+https://github.com/khanzzirfan/react-timeline-editor.git" }, "scripts": { "start": "dumi dev", @@ -24,7 +24,8 @@ "docs:deploy": "", "build": "father-build", "deploy": "npm run docs:build && npm run docs:deploy", - "prepublishOnly": "npm run build" + "prepublishOnly": "npm run build", + "release": "standard-version --release-as minor" }, "files": [ "dist" @@ -60,6 +61,7 @@ "prettier": "^2.2.1", "react": "^17.0.0", "react-dom": "^17.0.0", + "standard-version": "^9.5.0", "yorkie": "^2.0.0" } } diff --git a/publish.readme.md b/publish.readme.md new file mode 100644 index 0000000..4b508e1 --- /dev/null +++ b/publish.readme.md @@ -0,0 +1,3 @@ +## Git project link + +github.com:khanzzirfan/react-timeline-editor.git From 8275f620e86baa1d59477590e57ec60063d6cb7a Mon Sep 17 00:00:00 2001 From: khanzzirfan Date: Mon, 13 Feb 2023 15:35:08 +1100 Subject: [PATCH 03/23] chore: updated package names --- .gitignore | 3 +++ package.json | 2 +- src/components/edit_area/edit_row.tsx | 1 - 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index 877ca82..00334eb 100644 --- a/.gitignore +++ b/.gitignore @@ -24,3 +24,6 @@ # ide /.vscode /.idea + +/ .npmrc +.npmrc \ No newline at end of file diff --git a/package.json b/package.json index fcd77a5..d94ec78 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "@reacthub/react-timeline-editor", + "name": "reacthub-timeline-editor", "version": "0.2.0", "author": "khanzzirfan", "license": "MIT", diff --git a/src/components/edit_area/edit_row.tsx b/src/components/edit_area/edit_row.tsx index a6e1ace..1848ba7 100644 --- a/src/components/edit_area/edit_row.tsx +++ b/src/components/edit_area/edit_row.tsx @@ -17,7 +17,6 @@ export type EditRowProps = CommonProp & { scrollLeft: number; /** 设置scroll left */ deltaScrollLeft: (scrollLeft: number) => void; - onDrop: (rowId: string, actionId: string) => void; }; export const EditRow: FC = (props) => { From 0dff53a8964e4b5143b5db789d17b594f571d5a3 Mon Sep 17 00:00:00 2001 From: khanzzirfan Date: Mon, 13 Feb 2023 21:59:37 +1100 Subject: [PATCH 04/23] set top 0 style property --- src/components/row_rnd/row_rnd.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/row_rnd/row_rnd.tsx b/src/components/row_rnd/row_rnd.tsx index 819d52b..4366edf 100644 --- a/src/components/row_rnd/row_rnd.tsx +++ b/src/components/row_rnd/row_rnd.tsx @@ -199,7 +199,7 @@ export const RowDnd = React.forwardRef( let { left, width, top } = target.dataset; const preLeft = parseFloat(left); const preWidth = parseFloat(width); - let preTop = parseFloat(top || '16'); + let preTop = parseFloat(top || '0'); deltaX.current += e.dx; deltaY.current += e.dy; From 1fd0c24b98549c06a37c7787b2419bbf0a547aec Mon Sep 17 00:00:00 2001 From: khanzzirfan Date: Tue, 14 Feb 2023 00:04:12 +1100 Subject: [PATCH 05/23] early exit if dropped row is same as current row --- CHANGELOG.md | 24 ++++++++++++++++++++++++ package.json | 2 +- src/components/edit_area/edit_action.tsx | 3 --- src/components/row_rnd/interactable.tsx | 2 -- src/components/row_rnd/row_rnd.tsx | 2 -- src/components/timeline.tsx | 3 +++ 6 files changed, 28 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d8eb933..e7c37cf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,30 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +## 0.3.0 (2023-02-13) + + +### Features + +* ✨ add cursor drag start/end props ([61b5a5e](https://github.com/khanzzirfan/react-timeline-editor/commit/61b5a5e2a0a263541d908fe82d65c3eed74851f8)) +* ✨ allow to set scrollLeft ([dcc8d1e](https://github.com/khanzzirfan/react-timeline-editor/commit/dcc8d1eade0c4c4c70976c6c8c02b5d1fc2570fe)) +* ✨ auto scroll when drag cursor ([fc55f56](https://github.com/khanzzirfan/react-timeline-editor/commit/fc55f56afb8ec0633d4e90e1e3bc7ee1aec7b790)) +* ✨ on cursor drag ([8150141](https://github.com/khanzzirfan/react-timeline-editor/commit/815014156d39eb0736c346fc270da8f5ffb6d31a)) + + +### Bug Fixes + +* 🐛 compatible with react18 ([de966e0](https://github.com/khanzzirfan/react-timeline-editor/commit/de966e012a7306cc492a12547638a8d494846301)) +* 🐛 cursor listen scrollLeft change ([520e4cb](https://github.com/khanzzirfan/react-timeline-editor/commit/520e4cbedf0c5a5d5063fa91d4359733105d9abd)) +* 🐛 engine example audio play ([a0f6e54](https://github.com/khanzzirfan/react-timeline-editor/commit/a0f6e54be025b688e0c9d5ed0c36b05b8fc5c788)) +* 🐛 engine example destroy error ([b2919d9](https://github.com/khanzzirfan/react-timeline-editor/commit/b2919d919e0b03fc1b2880017c12e8eabf4a502e)) +* 🐛 engine example engine reference error ([123e72e](https://github.com/khanzzirfan/react-timeline-editor/commit/123e72eb315046ab954ae591574ae2500f2f57c5)) +* 🐛 react type config ([cca5a5b](https://github.com/khanzzirfan/react-timeline-editor/commit/cca5a5b9d617de092b5b8904390a2a34c2f87822)) +* 🐛 remove 'window' to adapt for nextjs ([51904d5](https://github.com/khanzzirfan/react-timeline-editor/commit/51904d5456643e0b66e2227fe74eb6fc78f8ac20)) +* 🐛 remove not necessary dependencies ([61a115d](https://github.com/khanzzirfan/react-timeline-editor/commit/61a115dd5dcfe870a080e6915486898bae27b873)) +* 🐛 scroll sync error ([0a7b459](https://github.com/khanzzirfan/react-timeline-editor/commit/0a7b459a3bf77e9c0879528ff0956ec5163f7440)) +* **emitter:** make offAll() keep events names ([d02f2b7](https://github.com/khanzzirfan/react-timeline-editor/commit/d02f2b79017c1cb1d78465b42afb64804c8f86bf)) + ## 0.2.0 (2023-02-13) diff --git a/package.json b/package.json index d94ec78..90fc632 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "reacthub-timeline-editor", - "version": "0.2.0", + "version": "0.3.0", "author": "khanzzirfan", "license": "MIT", "keywords": [ diff --git a/src/components/edit_area/edit_action.tsx b/src/components/edit_area/edit_action.tsx index 911e0b3..eeae794 100644 --- a/src/components/edit_area/edit_action.tsx +++ b/src/components/edit_area/edit_action.tsx @@ -101,12 +101,10 @@ export const EditAction: FC = ({ //#region [rgba(100,120,156,0.08)] 回调 const handleDragStart: RndDragStartCallback = () => { - // console.log('editaction-> handleDragstart'); onActionMoveStart && onActionMoveStart({ action, row }); }; const handleDrag: RndDragCallback = ({ left, width, top }) => { - // console.log('editaction-> handleDrag move'); isDragWhenClick.current = true; if (onActionMoving) { const { start, end } = parserTransformToTime({ left, width }, { scaleWidth, scale, startLeft }); @@ -118,7 +116,6 @@ export const EditAction: FC = ({ }; const handleDragEnd: RndDragEndCallback = ({ left, width }) => { - // console.log('editaction-> handleDragEnd'); // 计算时间 const { start, end } = parserTransformToTime({ left, width }, { scaleWidth, scale, startLeft }); // 设置数据 diff --git a/src/components/row_rnd/interactable.tsx b/src/components/row_rnd/interactable.tsx index 37660cd..b01052c 100644 --- a/src/components/row_rnd/interactable.tsx +++ b/src/components/row_rnd/interactable.tsx @@ -54,8 +54,6 @@ export const InteractComp: FC<{ // accept: '.timeline-editor-action', // overlap: 0.75, // checker: (dragEvent, event, dropped, dropzone, dropElement, draggable, dragElement) => { - // // console.log('draggelement', dragElement); - // // console.log('draggables', draggable); // return true; // }, // ondropactivate: function (event) { diff --git a/src/components/row_rnd/row_rnd.tsx b/src/components/row_rnd/row_rnd.tsx index 4366edf..50cda09 100644 --- a/src/components/row_rnd/row_rnd.tsx +++ b/src/components/row_rnd/row_rnd.tsx @@ -181,7 +181,6 @@ export const RowDnd = React.forwardRef( const handleMove = (e: DragEvent) => { const target = e.target; if (deltaScrollLeft && parentRef?.current) { - console.log('deltaScrollLeft logic'); const result = dealDragAutoScroll(e, (delta) => { deltaScrollLeft(delta); @@ -382,7 +381,6 @@ export const RowDnd = React.forwardRef( event.relatedTarget.style.removeProperty('top'); const droppedRow = event.target.getAttribute('data-rowid'); const actionId = event.relatedTarget.getAttribute('data-actionid'); - // console.log('eventdrop', event); deltaY.current = 0; Object.assign(target.dataset, { top: 0 }); if (onDrop) { diff --git a/src/components/timeline.tsx b/src/components/timeline.tsx index c5d76ca..9a54f6a 100644 --- a/src/components/timeline.tsx +++ b/src/components/timeline.tsx @@ -78,6 +78,9 @@ export const Timeline = React.forwardRef((props, } const rowId = event.currentTarget.getAttribute('data-rowid'); const actionId = event.relatedTarget.getAttribute('data-actionid'); + const relatedRowId = event.relatedTarget.getAttribute('data-rowid'); + console.log('related Row id', relatedRowId); + if (relatedRowId === rowId) return; let droppedRowData = null; let oldRowId = null; let actionData = null; From 9c73cf60ceb0eb3869f6e083d6bc755e89ca9f6e Mon Sep 17 00:00:00 2001 From: khanzzirfan Date: Tue, 14 Feb 2023 05:41:10 +1100 Subject: [PATCH 06/23] early exit if dropped row is same as current row --- CHANGELOG.md | 24 ++++++++++++++++++++++++ package.json | 2 +- src/components/timeline.tsx | 5 +---- 3 files changed, 26 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e7c37cf..174e928 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,30 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +## 0.4.0 (2023-02-13) + + +### Features + +* ✨ add cursor drag start/end props ([61b5a5e](https://github.com/khanzzirfan/react-timeline-editor/commit/61b5a5e2a0a263541d908fe82d65c3eed74851f8)) +* ✨ allow to set scrollLeft ([dcc8d1e](https://github.com/khanzzirfan/react-timeline-editor/commit/dcc8d1eade0c4c4c70976c6c8c02b5d1fc2570fe)) +* ✨ auto scroll when drag cursor ([fc55f56](https://github.com/khanzzirfan/react-timeline-editor/commit/fc55f56afb8ec0633d4e90e1e3bc7ee1aec7b790)) +* ✨ on cursor drag ([8150141](https://github.com/khanzzirfan/react-timeline-editor/commit/815014156d39eb0736c346fc270da8f5ffb6d31a)) + + +### Bug Fixes + +* 🐛 compatible with react18 ([de966e0](https://github.com/khanzzirfan/react-timeline-editor/commit/de966e012a7306cc492a12547638a8d494846301)) +* 🐛 cursor listen scrollLeft change ([520e4cb](https://github.com/khanzzirfan/react-timeline-editor/commit/520e4cbedf0c5a5d5063fa91d4359733105d9abd)) +* 🐛 engine example audio play ([a0f6e54](https://github.com/khanzzirfan/react-timeline-editor/commit/a0f6e54be025b688e0c9d5ed0c36b05b8fc5c788)) +* 🐛 engine example destroy error ([b2919d9](https://github.com/khanzzirfan/react-timeline-editor/commit/b2919d919e0b03fc1b2880017c12e8eabf4a502e)) +* 🐛 engine example engine reference error ([123e72e](https://github.com/khanzzirfan/react-timeline-editor/commit/123e72eb315046ab954ae591574ae2500f2f57c5)) +* 🐛 react type config ([cca5a5b](https://github.com/khanzzirfan/react-timeline-editor/commit/cca5a5b9d617de092b5b8904390a2a34c2f87822)) +* 🐛 remove 'window' to adapt for nextjs ([51904d5](https://github.com/khanzzirfan/react-timeline-editor/commit/51904d5456643e0b66e2227fe74eb6fc78f8ac20)) +* 🐛 remove not necessary dependencies ([61a115d](https://github.com/khanzzirfan/react-timeline-editor/commit/61a115dd5dcfe870a080e6915486898bae27b873)) +* 🐛 scroll sync error ([0a7b459](https://github.com/khanzzirfan/react-timeline-editor/commit/0a7b459a3bf77e9c0879528ff0956ec5163f7440)) +* **emitter:** make offAll() keep events names ([d02f2b7](https://github.com/khanzzirfan/react-timeline-editor/commit/d02f2b79017c1cb1d78465b42afb64804c8f86bf)) + ## 0.3.0 (2023-02-13) diff --git a/package.json b/package.json index 90fc632..57a58e6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "reacthub-timeline-editor", - "version": "0.3.0", + "version": "0.4.0", "author": "khanzzirfan", "license": "MIT", "keywords": [ diff --git a/src/components/timeline.tsx b/src/components/timeline.tsx index 9a54f6a..ec94e7c 100644 --- a/src/components/timeline.tsx +++ b/src/components/timeline.tsx @@ -78,9 +78,6 @@ export const Timeline = React.forwardRef((props, } const rowId = event.currentTarget.getAttribute('data-rowid'); const actionId = event.relatedTarget.getAttribute('data-actionid'); - const relatedRowId = event.relatedTarget.getAttribute('data-rowid'); - console.log('related Row id', relatedRowId); - if (relatedRowId === rowId) return; let droppedRowData = null; let oldRowId = null; let actionData = null; @@ -93,7 +90,7 @@ export const Timeline = React.forwardRef((props, droppedRowData = restProps; } }); - + if (oldRowId === rowId) return; const modifiedEditorData = editorData.map((er) => { if (er.id === rowId) { const currActions = er.actions || []; From 7dad377d3f23d61cf894eb70d69782d0f0701832 Mon Sep 17 00:00:00 2001 From: khanzzirfan Date: Sat, 18 Feb 2023 12:42:39 +1100 Subject: [PATCH 07/23] chore: updated cursor colors --- CHANGELOG.md | 24 ++++++++++++++++++++++++ package.json | 2 +- src/components/cursor/cursor.less | 4 ++-- src/components/cursor/cursor.tsx | 7 ++----- 4 files changed, 29 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 174e928..fe02c2b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,30 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +## 0.5.0 (2023-02-13) + + +### Features + +* ✨ add cursor drag start/end props ([61b5a5e](https://github.com/khanzzirfan/react-timeline-editor/commit/61b5a5e2a0a263541d908fe82d65c3eed74851f8)) +* ✨ allow to set scrollLeft ([dcc8d1e](https://github.com/khanzzirfan/react-timeline-editor/commit/dcc8d1eade0c4c4c70976c6c8c02b5d1fc2570fe)) +* ✨ auto scroll when drag cursor ([fc55f56](https://github.com/khanzzirfan/react-timeline-editor/commit/fc55f56afb8ec0633d4e90e1e3bc7ee1aec7b790)) +* ✨ on cursor drag ([8150141](https://github.com/khanzzirfan/react-timeline-editor/commit/815014156d39eb0736c346fc270da8f5ffb6d31a)) + + +### Bug Fixes + +* 🐛 compatible with react18 ([de966e0](https://github.com/khanzzirfan/react-timeline-editor/commit/de966e012a7306cc492a12547638a8d494846301)) +* 🐛 cursor listen scrollLeft change ([520e4cb](https://github.com/khanzzirfan/react-timeline-editor/commit/520e4cbedf0c5a5d5063fa91d4359733105d9abd)) +* 🐛 engine example audio play ([a0f6e54](https://github.com/khanzzirfan/react-timeline-editor/commit/a0f6e54be025b688e0c9d5ed0c36b05b8fc5c788)) +* 🐛 engine example destroy error ([b2919d9](https://github.com/khanzzirfan/react-timeline-editor/commit/b2919d919e0b03fc1b2880017c12e8eabf4a502e)) +* 🐛 engine example engine reference error ([123e72e](https://github.com/khanzzirfan/react-timeline-editor/commit/123e72eb315046ab954ae591574ae2500f2f57c5)) +* 🐛 react type config ([cca5a5b](https://github.com/khanzzirfan/react-timeline-editor/commit/cca5a5b9d617de092b5b8904390a2a34c2f87822)) +* 🐛 remove 'window' to adapt for nextjs ([51904d5](https://github.com/khanzzirfan/react-timeline-editor/commit/51904d5456643e0b66e2227fe74eb6fc78f8ac20)) +* 🐛 remove not necessary dependencies ([61a115d](https://github.com/khanzzirfan/react-timeline-editor/commit/61a115dd5dcfe870a080e6915486898bae27b873)) +* 🐛 scroll sync error ([0a7b459](https://github.com/khanzzirfan/react-timeline-editor/commit/0a7b459a3bf77e9c0879528ff0956ec5163f7440)) +* **emitter:** make offAll() keep events names ([d02f2b7](https://github.com/khanzzirfan/react-timeline-editor/commit/d02f2b79017c1cb1d78465b42afb64804c8f86bf)) + ## 0.4.0 (2023-02-13) diff --git a/package.json b/package.json index 57a58e6..761e12c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "reacthub-timeline-editor", - "version": "0.4.0", + "version": "0.5.0", "author": "khanzzirfan", "license": "MIT", "keywords": [ diff --git a/src/components/cursor/cursor.less b/src/components/cursor/cursor.less index 6541581..4e62a7d 100644 --- a/src/components/cursor/cursor.less +++ b/src/components/cursor/cursor.less @@ -5,8 +5,8 @@ top: 32px; height: calc(100% - 32px); box-sizing: border-box; - border-left: 1px solid #5297FF; - border-right: 1px solid #5297FF; + border-left: 1px solid #00CCA7; + border-right: 1px solid #00CCA7; transform: translateX(-25%) scaleX(0.5); &-top { diff --git a/src/components/cursor/cursor.tsx b/src/components/cursor/cursor.tsx index eb7c212..b6a645d 100644 --- a/src/components/cursor/cursor.tsx +++ b/src/components/cursor/cursor.tsx @@ -113,11 +113,8 @@ export const Cursor: FC = ({ }} >
- - + +
From 1e5ccdc2b1116cfb82b1f877d80cc6ac106a89ef Mon Sep 17 00:00:00 2001 From: khanzzirfan Date: Sat, 18 Feb 2023 14:47:27 +1100 Subject: [PATCH 08/23] chore: updated svg --- CHANGELOG.md | 24 ++++++++++++++++++++++++ package.json | 2 +- 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fe02c2b..8e749ce 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,30 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +## 0.6.0 (2023-02-18) + + +### Features + +* ✨ add cursor drag start/end props ([61b5a5e](https://github.com/khanzzirfan/react-timeline-editor/commit/61b5a5e2a0a263541d908fe82d65c3eed74851f8)) +* ✨ allow to set scrollLeft ([dcc8d1e](https://github.com/khanzzirfan/react-timeline-editor/commit/dcc8d1eade0c4c4c70976c6c8c02b5d1fc2570fe)) +* ✨ auto scroll when drag cursor ([fc55f56](https://github.com/khanzzirfan/react-timeline-editor/commit/fc55f56afb8ec0633d4e90e1e3bc7ee1aec7b790)) +* ✨ on cursor drag ([8150141](https://github.com/khanzzirfan/react-timeline-editor/commit/815014156d39eb0736c346fc270da8f5ffb6d31a)) + + +### Bug Fixes + +* 🐛 compatible with react18 ([de966e0](https://github.com/khanzzirfan/react-timeline-editor/commit/de966e012a7306cc492a12547638a8d494846301)) +* 🐛 cursor listen scrollLeft change ([520e4cb](https://github.com/khanzzirfan/react-timeline-editor/commit/520e4cbedf0c5a5d5063fa91d4359733105d9abd)) +* 🐛 engine example audio play ([a0f6e54](https://github.com/khanzzirfan/react-timeline-editor/commit/a0f6e54be025b688e0c9d5ed0c36b05b8fc5c788)) +* 🐛 engine example destroy error ([b2919d9](https://github.com/khanzzirfan/react-timeline-editor/commit/b2919d919e0b03fc1b2880017c12e8eabf4a502e)) +* 🐛 engine example engine reference error ([123e72e](https://github.com/khanzzirfan/react-timeline-editor/commit/123e72eb315046ab954ae591574ae2500f2f57c5)) +* 🐛 react type config ([cca5a5b](https://github.com/khanzzirfan/react-timeline-editor/commit/cca5a5b9d617de092b5b8904390a2a34c2f87822)) +* 🐛 remove 'window' to adapt for nextjs ([51904d5](https://github.com/khanzzirfan/react-timeline-editor/commit/51904d5456643e0b66e2227fe74eb6fc78f8ac20)) +* 🐛 remove not necessary dependencies ([61a115d](https://github.com/khanzzirfan/react-timeline-editor/commit/61a115dd5dcfe870a080e6915486898bae27b873)) +* 🐛 scroll sync error ([0a7b459](https://github.com/khanzzirfan/react-timeline-editor/commit/0a7b459a3bf77e9c0879528ff0956ec5163f7440)) +* **emitter:** make offAll() keep events names ([d02f2b7](https://github.com/khanzzirfan/react-timeline-editor/commit/d02f2b79017c1cb1d78465b42afb64804c8f86bf)) + ## 0.5.0 (2023-02-13) diff --git a/package.json b/package.json index 761e12c..0cd675a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "reacthub-timeline-editor", - "version": "0.5.0", + "version": "0.6.0", "author": "khanzzirfan", "license": "MIT", "keywords": [ From 85dbf46ca6fd12c27c0c957dcb7662dedc511c21 Mon Sep 17 00:00:00 2001 From: khanzzirfan Date: Tue, 21 Feb 2023 21:04:03 +1100 Subject: [PATCH 09/23] feat: fixed the row drag and drop and cursor locked to its y position --- docs/editor-demo/editor-basic-irfan/index.tsx | 4 ++ src/components/cursor/cursor.tsx | 2 +- src/components/row_rnd/row_rnd.tsx | 66 +++++++++++-------- 3 files changed, 43 insertions(+), 29 deletions(-) diff --git a/docs/editor-demo/editor-basic-irfan/index.tsx b/docs/editor-demo/editor-basic-irfan/index.tsx index cff4e25..1834c74 100644 --- a/docs/editor-demo/editor-basic-irfan/index.tsx +++ b/docs/editor-demo/editor-basic-irfan/index.tsx @@ -9,6 +9,10 @@ const defaultEditorData = cloneDeep(mockData); const TimelineEditor = () => { const [data, setData] = useState(defaultEditorData); + React.useEffect(() => { + console.log('data updated', data); + }, [data]); + return (
diff --git a/src/components/cursor/cursor.tsx b/src/components/cursor/cursor.tsx index b6a645d..ead50eb 100644 --- a/src/components/cursor/cursor.tsx +++ b/src/components/cursor/cursor.tsx @@ -112,7 +112,7 @@ export const Cursor: FC = ({ return false; }} > -
+
diff --git a/src/components/row_rnd/row_rnd.tsx b/src/components/row_rnd/row_rnd.tsx index 50cda09..fbcd8e6 100644 --- a/src/components/row_rnd/row_rnd.tsx +++ b/src/components/row_rnd/row_rnd.tsx @@ -116,9 +116,10 @@ export const RowDnd = React.forwardRef( //#region [rgba(188,188,120,0.05)] 回调api const handleMoveStart = (e: DragEvent) => { + const isCursor = e.target.getAttribute('data-id') === 'cursor'; deltaX.current = 0; - deltaY.current = 0; - originalY.current = e.dy; + if (!isCursor) deltaY.current = 0; + if (!isCursor) originalY.current = e.dy; isAdsorption.current = false; initAutoScroll(); onDragStart && onDragStart(); @@ -174,12 +175,15 @@ export const RowDnd = React.forwardRef( handleUpdateLeft(curLeft, false); } - const currentY = preTop; - handleUpdateTop(currentY, false); + if (preTop) { + const currentY = preTop; + handleUpdateTop(currentY, false); + } }; const handleMove = (e: DragEvent) => { const target = e.target; + const isCursor = e.target.getAttribute('data-id') === 'cursor'; if (deltaScrollLeft && parentRef?.current) { const result = dealDragAutoScroll(e, (delta) => { deltaScrollLeft(delta); @@ -187,9 +191,9 @@ export const RowDnd = React.forwardRef( let { left, width, top } = target.dataset; const preLeft = parseFloat(left); const preWidth = parseFloat(width); - const preTop = parseFloat(top || '0'); deltaX.current += delta; - deltaY.current += e.dy; + const preTop = !isCursor ? parseFloat(top || '0') : undefined; + if (!isCursor) deltaY.current += e.dy; move({ preLeft, preWidth, scrollDelta: delta, preTop }); }); if (!result) return; @@ -198,10 +202,10 @@ export const RowDnd = React.forwardRef( let { left, width, top } = target.dataset; const preLeft = parseFloat(left); const preWidth = parseFloat(width); - let preTop = parseFloat(top || '0'); + let preTop = !isCursor ? parseFloat(top || '0') : undefined; deltaX.current += e.dx; - deltaY.current += e.dy; + if (!isCursor) deltaY.current += e.dy; if (Math.abs(deltaY.current) > 0) { preTop = deltaY.current; } @@ -209,14 +213,16 @@ export const RowDnd = React.forwardRef( }; const handleMoveStop = (e: DragEvent) => { + const isCursor = e.target.getAttribute('data-id') === 'cursor'; + deltaX.current = 0; - deltaY.current = 0; + if (!isCursor) deltaY.current = 0; isAdsorption.current = false; stopAutoScroll(); const target = e.target; let { left, width, top } = target.dataset; - const preTop = parseFloat(top || '0'); + const preTop = !isCursor ? parseFloat(top || '0') : undefined; onDragEnd && onDragEnd({ left: parseFloat(left), width: parseFloat(width), top: preTop }); }; @@ -366,25 +372,29 @@ export const RowDnd = React.forwardRef( }); }; - const handleDropDeactivate = (event: DropEvent) => { - const target = interactable.current.target as HTMLElement; - event.relatedTarget.style.removeProperty('top'); - // target.style.top = `${top}px`; - // Object.assign(target.dataset, { top: '0' }); - // target.style.removeProperty('top'); - deltaY.current = 0; - Object.assign(target.dataset, { top: 0 }); - }; + // const handleDropDeactivate = (event: DropEvent) => { + // const target = interactable.current.target as HTMLElement; + // event.relatedTarget.style.removeProperty('top'); + // // target.style.top = `${top}px`; + // // Object.assign(target.dataset, { top: '0' }); + // // target.style.removeProperty('top'); + // deltaY.current = 0; + // Object.assign(target.dataset, { top: 0 }); + // }; const handleOnDrop = (event: DropEvent) => { - const target = interactable.current.target as HTMLElement; - event.relatedTarget.style.removeProperty('top'); - const droppedRow = event.target.getAttribute('data-rowid'); - const actionId = event.relatedTarget.getAttribute('data-actionid'); - deltaY.current = 0; - Object.assign(target.dataset, { top: 0 }); - if (onDrop) { - onDrop(droppedRow, actionId); + const isCursor = event.target.getAttribute('data-id') === 'cursor'; + if (!isCursor) { + // not a cursor + const target = interactable.current.target as HTMLElement; + event.relatedTarget.style.removeProperty('top'); + const droppedRow = event.target.getAttribute('data-rowid'); + const actionId = event.relatedTarget.getAttribute('data-actionid'); + deltaY.current = 0; + Object.assign(target.dataset, { top: 0 }); + if (onDrop) { + onDrop(droppedRow, actionId); + } } }; //#endregion @@ -397,7 +407,7 @@ export const RowDnd = React.forwardRef( resizable={enableResizing} draggableOptions={{ startAxis: 'xy', - lockAxis: 'start', + // lockAxis: 'start', onmove: handleMove, onstart: handleMoveStart, onend: handleMoveStop, From 1b160c599bf120df9ee8c769f6b0c7e8a02a6617 Mon Sep 17 00:00:00 2001 From: khanzzirfan Date: Tue, 21 Feb 2023 21:08:20 +1100 Subject: [PATCH 10/23] fix: updated packagejson --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 0cd675a..5c870f2 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "name": "reacthub-timeline-editor", + "testName":"@xzdarcy/react-timeline-editor", "version": "0.6.0", "author": "khanzzirfan", "license": "MIT", From 941743a179a798e27c37dd1648acb85084013027 Mon Sep 17 00:00:00 2001 From: khanzzirfan Date: Tue, 21 Feb 2023 21:25:41 +1100 Subject: [PATCH 11/23] fix: updated packagejson --- CHANGELOG.md | 26 ++++++++++++++++++++++++++ package.json | 4 ++-- src/components/timeline.tsx | 2 +- 3 files changed, 29 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8e749ce..20ebd6b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,32 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +## 0.7.0 (2023-02-21) + + +### Features + +* ✨ add cursor drag start/end props ([61b5a5e](https://github.com/khanzzirfan/react-timeline-editor/commit/61b5a5e2a0a263541d908fe82d65c3eed74851f8)) +* ✨ allow to set scrollLeft ([dcc8d1e](https://github.com/khanzzirfan/react-timeline-editor/commit/dcc8d1eade0c4c4c70976c6c8c02b5d1fc2570fe)) +* ✨ auto scroll when drag cursor ([fc55f56](https://github.com/khanzzirfan/react-timeline-editor/commit/fc55f56afb8ec0633d4e90e1e3bc7ee1aec7b790)) +* ✨ on cursor drag ([8150141](https://github.com/khanzzirfan/react-timeline-editor/commit/815014156d39eb0736c346fc270da8f5ffb6d31a)) +* fixed the row drag and drop and cursor locked to its y position ([85dbf46](https://github.com/khanzzirfan/react-timeline-editor/commit/85dbf46ca6fd12c27c0c957dcb7662dedc511c21)) + + +### Bug Fixes + +* 🐛 compatible with react18 ([de966e0](https://github.com/khanzzirfan/react-timeline-editor/commit/de966e012a7306cc492a12547638a8d494846301)) +* 🐛 cursor listen scrollLeft change ([520e4cb](https://github.com/khanzzirfan/react-timeline-editor/commit/520e4cbedf0c5a5d5063fa91d4359733105d9abd)) +* 🐛 engine example audio play ([a0f6e54](https://github.com/khanzzirfan/react-timeline-editor/commit/a0f6e54be025b688e0c9d5ed0c36b05b8fc5c788)) +* 🐛 engine example destroy error ([b2919d9](https://github.com/khanzzirfan/react-timeline-editor/commit/b2919d919e0b03fc1b2880017c12e8eabf4a502e)) +* 🐛 engine example engine reference error ([123e72e](https://github.com/khanzzirfan/react-timeline-editor/commit/123e72eb315046ab954ae591574ae2500f2f57c5)) +* 🐛 react type config ([cca5a5b](https://github.com/khanzzirfan/react-timeline-editor/commit/cca5a5b9d617de092b5b8904390a2a34c2f87822)) +* 🐛 remove 'window' to adapt for nextjs ([51904d5](https://github.com/khanzzirfan/react-timeline-editor/commit/51904d5456643e0b66e2227fe74eb6fc78f8ac20)) +* 🐛 remove not necessary dependencies ([61a115d](https://github.com/khanzzirfan/react-timeline-editor/commit/61a115dd5dcfe870a080e6915486898bae27b873)) +* 🐛 scroll sync error ([0a7b459](https://github.com/khanzzirfan/react-timeline-editor/commit/0a7b459a3bf77e9c0879528ff0956ec5163f7440)) +* **emitter:** make offAll() keep events names ([d02f2b7](https://github.com/khanzzirfan/react-timeline-editor/commit/d02f2b79017c1cb1d78465b42afb64804c8f86bf)) +* updated packagejson ([1b160c5](https://github.com/khanzzirfan/react-timeline-editor/commit/1b160c599bf120df9ee8c769f6b0c7e8a02a6617)) + ## 0.6.0 (2023-02-18) diff --git a/package.json b/package.json index 5c870f2..3b9b788 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "reacthub-timeline-editor", - "testName":"@xzdarcy/react-timeline-editor", - "version": "0.6.0", + "testName": "@xzdarcy/react-timeline-editor", + "version": "0.7.0", "author": "khanzzirfan", "license": "MIT", "keywords": [ diff --git a/src/components/timeline.tsx b/src/components/timeline.tsx index ec94e7c..44bdf3a 100644 --- a/src/components/timeline.tsx +++ b/src/components/timeline.tsx @@ -53,7 +53,7 @@ export const Timeline = React.forwardRef((props, useEffect(() => { interact('.timeline-editor-edit-row').dropzone({ accept: '.timeline-editor-action', - overlap: 0.85, + overlap: 0.65, ondropactivate: function (event) { // add active dropzone feedback event.target.classList.add('drop-active'); From 629a2c9c0db4f0dcbda3056131f7eadd20cdf175 Mon Sep 17 00:00:00 2001 From: khanzzirfan Date: Tue, 21 Feb 2023 21:26:02 +1100 Subject: [PATCH 12/23] fix: updated packagejson --- CHANGELOG.md | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 +- 2 files changed, 55 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 20ebd6b..157e031 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,60 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +## 0.9.0 (2023-02-21) + + +### Features + +* ✨ add cursor drag start/end props ([61b5a5e](https://github.com/khanzzirfan/react-timeline-editor/commit/61b5a5e2a0a263541d908fe82d65c3eed74851f8)) +* ✨ allow to set scrollLeft ([dcc8d1e](https://github.com/khanzzirfan/react-timeline-editor/commit/dcc8d1eade0c4c4c70976c6c8c02b5d1fc2570fe)) +* ✨ auto scroll when drag cursor ([fc55f56](https://github.com/khanzzirfan/react-timeline-editor/commit/fc55f56afb8ec0633d4e90e1e3bc7ee1aec7b790)) +* ✨ on cursor drag ([8150141](https://github.com/khanzzirfan/react-timeline-editor/commit/815014156d39eb0736c346fc270da8f5ffb6d31a)) +* fixed the row drag and drop and cursor locked to its y position ([85dbf46](https://github.com/khanzzirfan/react-timeline-editor/commit/85dbf46ca6fd12c27c0c957dcb7662dedc511c21)) + + +### Bug Fixes + +* 🐛 compatible with react18 ([de966e0](https://github.com/khanzzirfan/react-timeline-editor/commit/de966e012a7306cc492a12547638a8d494846301)) +* 🐛 cursor listen scrollLeft change ([520e4cb](https://github.com/khanzzirfan/react-timeline-editor/commit/520e4cbedf0c5a5d5063fa91d4359733105d9abd)) +* 🐛 engine example audio play ([a0f6e54](https://github.com/khanzzirfan/react-timeline-editor/commit/a0f6e54be025b688e0c9d5ed0c36b05b8fc5c788)) +* 🐛 engine example destroy error ([b2919d9](https://github.com/khanzzirfan/react-timeline-editor/commit/b2919d919e0b03fc1b2880017c12e8eabf4a502e)) +* 🐛 engine example engine reference error ([123e72e](https://github.com/khanzzirfan/react-timeline-editor/commit/123e72eb315046ab954ae591574ae2500f2f57c5)) +* 🐛 react type config ([cca5a5b](https://github.com/khanzzirfan/react-timeline-editor/commit/cca5a5b9d617de092b5b8904390a2a34c2f87822)) +* 🐛 remove 'window' to adapt for nextjs ([51904d5](https://github.com/khanzzirfan/react-timeline-editor/commit/51904d5456643e0b66e2227fe74eb6fc78f8ac20)) +* 🐛 remove not necessary dependencies ([61a115d](https://github.com/khanzzirfan/react-timeline-editor/commit/61a115dd5dcfe870a080e6915486898bae27b873)) +* 🐛 scroll sync error ([0a7b459](https://github.com/khanzzirfan/react-timeline-editor/commit/0a7b459a3bf77e9c0879528ff0956ec5163f7440)) +* **emitter:** make offAll() keep events names ([d02f2b7](https://github.com/khanzzirfan/react-timeline-editor/commit/d02f2b79017c1cb1d78465b42afb64804c8f86bf)) +* updated packagejson ([941743a](https://github.com/khanzzirfan/react-timeline-editor/commit/941743a179a798e27c37dd1648acb85084013027)) +* updated packagejson ([1b160c5](https://github.com/khanzzirfan/react-timeline-editor/commit/1b160c599bf120df9ee8c769f6b0c7e8a02a6617)) + +## 0.8.0 (2023-02-21) + + +### Features + +* ✨ add cursor drag start/end props ([61b5a5e](https://github.com/khanzzirfan/react-timeline-editor/commit/61b5a5e2a0a263541d908fe82d65c3eed74851f8)) +* ✨ allow to set scrollLeft ([dcc8d1e](https://github.com/khanzzirfan/react-timeline-editor/commit/dcc8d1eade0c4c4c70976c6c8c02b5d1fc2570fe)) +* ✨ auto scroll when drag cursor ([fc55f56](https://github.com/khanzzirfan/react-timeline-editor/commit/fc55f56afb8ec0633d4e90e1e3bc7ee1aec7b790)) +* ✨ on cursor drag ([8150141](https://github.com/khanzzirfan/react-timeline-editor/commit/815014156d39eb0736c346fc270da8f5ffb6d31a)) +* fixed the row drag and drop and cursor locked to its y position ([85dbf46](https://github.com/khanzzirfan/react-timeline-editor/commit/85dbf46ca6fd12c27c0c957dcb7662dedc511c21)) + + +### Bug Fixes + +* 🐛 compatible with react18 ([de966e0](https://github.com/khanzzirfan/react-timeline-editor/commit/de966e012a7306cc492a12547638a8d494846301)) +* 🐛 cursor listen scrollLeft change ([520e4cb](https://github.com/khanzzirfan/react-timeline-editor/commit/520e4cbedf0c5a5d5063fa91d4359733105d9abd)) +* 🐛 engine example audio play ([a0f6e54](https://github.com/khanzzirfan/react-timeline-editor/commit/a0f6e54be025b688e0c9d5ed0c36b05b8fc5c788)) +* 🐛 engine example destroy error ([b2919d9](https://github.com/khanzzirfan/react-timeline-editor/commit/b2919d919e0b03fc1b2880017c12e8eabf4a502e)) +* 🐛 engine example engine reference error ([123e72e](https://github.com/khanzzirfan/react-timeline-editor/commit/123e72eb315046ab954ae591574ae2500f2f57c5)) +* 🐛 react type config ([cca5a5b](https://github.com/khanzzirfan/react-timeline-editor/commit/cca5a5b9d617de092b5b8904390a2a34c2f87822)) +* 🐛 remove 'window' to adapt for nextjs ([51904d5](https://github.com/khanzzirfan/react-timeline-editor/commit/51904d5456643e0b66e2227fe74eb6fc78f8ac20)) +* 🐛 remove not necessary dependencies ([61a115d](https://github.com/khanzzirfan/react-timeline-editor/commit/61a115dd5dcfe870a080e6915486898bae27b873)) +* 🐛 scroll sync error ([0a7b459](https://github.com/khanzzirfan/react-timeline-editor/commit/0a7b459a3bf77e9c0879528ff0956ec5163f7440)) +* **emitter:** make offAll() keep events names ([d02f2b7](https://github.com/khanzzirfan/react-timeline-editor/commit/d02f2b79017c1cb1d78465b42afb64804c8f86bf)) +* updated packagejson ([941743a](https://github.com/khanzzirfan/react-timeline-editor/commit/941743a179a798e27c37dd1648acb85084013027)) +* updated packagejson ([1b160c5](https://github.com/khanzzirfan/react-timeline-editor/commit/1b160c599bf120df9ee8c769f6b0c7e8a02a6617)) + ## 0.7.0 (2023-02-21) diff --git a/package.json b/package.json index 3b9b788..93bcc8d 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "reacthub-timeline-editor", "testName": "@xzdarcy/react-timeline-editor", - "version": "0.7.0", + "version": "0.9.0", "author": "khanzzirfan", "license": "MIT", "keywords": [ From b446a19af540b37d2cc610d4ee4e1408bfecd974 Mon Sep 17 00:00:00 2001 From: khanzzirfan Date: Sat, 1 Apr 2023 07:20:48 +1100 Subject: [PATCH 13/23] fix: fixed bug fixes on null action items --- .../editor-demo/editor-basic-irfan/disable.tsx | 18 ++++-------------- .../editor-basic-irfan/hideCursor.tsx | 17 +++-------------- docs/editor-demo/editor-basic-irfan/index.md | 2 +- src/components/timeline.tsx | 10 +++++++--- src/engine/engine.ts | 1 + 5 files changed, 16 insertions(+), 32 deletions(-) diff --git a/docs/editor-demo/editor-basic-irfan/disable.tsx b/docs/editor-demo/editor-basic-irfan/disable.tsx index bb12466..8ca128f 100644 --- a/docs/editor-demo/editor-basic-irfan/disable.tsx +++ b/docs/editor-demo/editor-basic-irfan/disable.tsx @@ -1,4 +1,5 @@ -import { Timeline } from '@xzdarcy/react-timeline-editor'; +import { Timeline } from '../../../src/components/timeline'; + import { Switch } from 'antd'; import { cloneDeep } from 'lodash'; import React, { useState } from 'react'; @@ -13,19 +14,8 @@ const TimelineEditor = () => { return (
- setAllow(e)} - style={{ marginBottom: 20 }} - /> - + setAllow(e)} style={{ marginBottom: 20 }} /> +
); }; diff --git a/docs/editor-demo/editor-basic-irfan/hideCursor.tsx b/docs/editor-demo/editor-basic-irfan/hideCursor.tsx index 3af9c36..f429a65 100644 --- a/docs/editor-demo/editor-basic-irfan/hideCursor.tsx +++ b/docs/editor-demo/editor-basic-irfan/hideCursor.tsx @@ -1,4 +1,4 @@ -import { Timeline } from '@xzdarcy/react-timeline-editor'; +import { Timeline } from '../../../src/components/timeline'; import { Switch } from 'antd'; import { cloneDeep } from 'lodash'; import React, { useState } from 'react'; @@ -13,19 +13,8 @@ const TimelineEditor = () => { return (
- setShowCursor(e)} - style={{marginBottom: 20}} - /> - + setShowCursor(e)} style={{ marginBottom: 20 }} /> +
); }; diff --git a/docs/editor-demo/editor-basic-irfan/index.md b/docs/editor-demo/editor-basic-irfan/index.md index 8e34327..b3db9c0 100644 --- a/docs/editor-demo/editor-basic-irfan/index.md +++ b/docs/editor-demo/editor-basic-irfan/index.md @@ -1,5 +1,5 @@ --- -title: editor basic dropzone +title: editor basic irfan test toc: 'menu' order: 0 group: diff --git a/src/components/timeline.tsx b/src/components/timeline.tsx index 44bdf3a..1a34b3a 100644 --- a/src/components/timeline.tsx +++ b/src/components/timeline.tsx @@ -91,24 +91,28 @@ export const Timeline = React.forwardRef((props, } }); if (oldRowId === rowId) return; + + if (!Array.isArray(editorData)) return null; const modifiedEditorData = editorData.map((er) => { if (er.id === rowId) { const currActions = er.actions || []; const updatedActions = currActions.concat(actionData); - + const nonNullActions = updatedActions.filter((f) => !!f); return { ...er, - actions: updatedActions, + actions: nonNullActions, }; } else if (er.id === oldRowId) { const updatedActions = er.actions.filter((f) => f.id !== actionData.id); + const nonNullActions = updatedActions.filter((f) => !!f); return { ...er, - actions: updatedActions, + actions: nonNullActions, }; } return er; }); + /// console.log('modifiedEditorData', modifiedEditorData, oldRowId, rowId); setEditorData(modifiedEditorData); handleEditorDataChange(modifiedEditorData); if (onDrop) { diff --git a/src/engine/engine.ts b/src/engine/engine.ts index c519b91..3e4b53b 100644 --- a/src/engine/engine.ts +++ b/src/engine/engine.ts @@ -309,6 +309,7 @@ export class TimelineEngine extends Emitter { data.map((row) => { actions.push(...row.actions); }); + // console.log('timeline data', data); const sortActions = actions.sort((a, b) => a.start - b.start); const actionMap: Record = {}; const actionSortIds: string[] = []; From 0b12559735cfdd670143989a0decda29576fc038 Mon Sep 17 00:00:00 2001 From: khanzzirfan Date: Sat, 1 Apr 2023 07:28:30 +1100 Subject: [PATCH 14/23] fix: fixed bug fixes on null action items --- CHANGELOG.md | 29 +++++++++++++++++++++++++++++ package.json | 2 +- src/components/timeline.tsx | 2 +- src/engine/engine.ts | 2 +- 4 files changed, 32 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 157e031..9ae19fe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,35 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +## 0.10.0 (2023-03-31) + + +### Features + +* ✨ add cursor drag start/end props ([61b5a5e](https://github.com/khanzzirfan/react-timeline-editor/commit/61b5a5e2a0a263541d908fe82d65c3eed74851f8)) +* ✨ allow to set scrollLeft ([dcc8d1e](https://github.com/khanzzirfan/react-timeline-editor/commit/dcc8d1eade0c4c4c70976c6c8c02b5d1fc2570fe)) +* ✨ auto scroll when drag cursor ([fc55f56](https://github.com/khanzzirfan/react-timeline-editor/commit/fc55f56afb8ec0633d4e90e1e3bc7ee1aec7b790)) +* ✨ on cursor drag ([8150141](https://github.com/khanzzirfan/react-timeline-editor/commit/815014156d39eb0736c346fc270da8f5ffb6d31a)) +* fixed the row drag and drop and cursor locked to its y position ([85dbf46](https://github.com/khanzzirfan/react-timeline-editor/commit/85dbf46ca6fd12c27c0c957dcb7662dedc511c21)) + + +### Bug Fixes + +* 🐛 compatible with react18 ([de966e0](https://github.com/khanzzirfan/react-timeline-editor/commit/de966e012a7306cc492a12547638a8d494846301)) +* 🐛 cursor listen scrollLeft change ([520e4cb](https://github.com/khanzzirfan/react-timeline-editor/commit/520e4cbedf0c5a5d5063fa91d4359733105d9abd)) +* 🐛 engine example audio play ([a0f6e54](https://github.com/khanzzirfan/react-timeline-editor/commit/a0f6e54be025b688e0c9d5ed0c36b05b8fc5c788)) +* 🐛 engine example destroy error ([b2919d9](https://github.com/khanzzirfan/react-timeline-editor/commit/b2919d919e0b03fc1b2880017c12e8eabf4a502e)) +* 🐛 engine example engine reference error ([123e72e](https://github.com/khanzzirfan/react-timeline-editor/commit/123e72eb315046ab954ae591574ae2500f2f57c5)) +* 🐛 react type config ([cca5a5b](https://github.com/khanzzirfan/react-timeline-editor/commit/cca5a5b9d617de092b5b8904390a2a34c2f87822)) +* 🐛 remove 'window' to adapt for nextjs ([51904d5](https://github.com/khanzzirfan/react-timeline-editor/commit/51904d5456643e0b66e2227fe74eb6fc78f8ac20)) +* 🐛 remove not necessary dependencies ([61a115d](https://github.com/khanzzirfan/react-timeline-editor/commit/61a115dd5dcfe870a080e6915486898bae27b873)) +* 🐛 scroll sync error ([0a7b459](https://github.com/khanzzirfan/react-timeline-editor/commit/0a7b459a3bf77e9c0879528ff0956ec5163f7440)) +* **emitter:** make offAll() keep events names ([d02f2b7](https://github.com/khanzzirfan/react-timeline-editor/commit/d02f2b79017c1cb1d78465b42afb64804c8f86bf)) +* fixed bug fixes on null action items ([b446a19](https://github.com/khanzzirfan/react-timeline-editor/commit/b446a19af540b37d2cc610d4ee4e1408bfecd974)) +* updated packagejson ([629a2c9](https://github.com/khanzzirfan/react-timeline-editor/commit/629a2c9c0db4f0dcbda3056131f7eadd20cdf175)) +* updated packagejson ([941743a](https://github.com/khanzzirfan/react-timeline-editor/commit/941743a179a798e27c37dd1648acb85084013027)) +* updated packagejson ([1b160c5](https://github.com/khanzzirfan/react-timeline-editor/commit/1b160c599bf120df9ee8c769f6b0c7e8a02a6617)) + ## 0.9.0 (2023-02-21) diff --git a/package.json b/package.json index 93bcc8d..3c474e0 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "reacthub-timeline-editor", "testName": "@xzdarcy/react-timeline-editor", - "version": "0.9.0", + "version": "0.10.0", "author": "khanzzirfan", "license": "MIT", "keywords": [ diff --git a/src/components/timeline.tsx b/src/components/timeline.tsx index 1a34b3a..ac165c1 100644 --- a/src/components/timeline.tsx +++ b/src/components/timeline.tsx @@ -112,7 +112,7 @@ export const Timeline = React.forwardRef((props, } return er; }); - /// console.log('modifiedEditorData', modifiedEditorData, oldRowId, rowId); + console.log('modifiedEditorData', modifiedEditorData, oldRowId, rowId); setEditorData(modifiedEditorData); handleEditorDataChange(modifiedEditorData); if (onDrop) { diff --git a/src/engine/engine.ts b/src/engine/engine.ts index 3e4b53b..0d8cefd 100644 --- a/src/engine/engine.ts +++ b/src/engine/engine.ts @@ -309,7 +309,7 @@ export class TimelineEngine extends Emitter { data.map((row) => { actions.push(...row.actions); }); - // console.log('timeline data', data); + console.log('timeline data', data); const sortActions = actions.sort((a, b) => a.start - b.start); const actionMap: Record = {}; const actionSortIds: string[] = []; From 248e9cb16a4531db7ee81f433be70b49800040e5 Mon Sep 17 00:00:00 2001 From: khanzzirfan Date: Sat, 1 Apr 2023 10:07:21 +1100 Subject: [PATCH 15/23] fix: fixed bug fixes on null action items --- CHANGELOG.md | 30 ++++++++++++++++++++++++++++++ package.json | 2 +- src/components/timeline.tsx | 6 +++++- 3 files changed, 36 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9ae19fe..6b5aeb2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,36 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +## 0.11.0 (2023-03-31) + + +### Features + +* ✨ add cursor drag start/end props ([61b5a5e](https://github.com/khanzzirfan/react-timeline-editor/commit/61b5a5e2a0a263541d908fe82d65c3eed74851f8)) +* ✨ allow to set scrollLeft ([dcc8d1e](https://github.com/khanzzirfan/react-timeline-editor/commit/dcc8d1eade0c4c4c70976c6c8c02b5d1fc2570fe)) +* ✨ auto scroll when drag cursor ([fc55f56](https://github.com/khanzzirfan/react-timeline-editor/commit/fc55f56afb8ec0633d4e90e1e3bc7ee1aec7b790)) +* ✨ on cursor drag ([8150141](https://github.com/khanzzirfan/react-timeline-editor/commit/815014156d39eb0736c346fc270da8f5ffb6d31a)) +* fixed the row drag and drop and cursor locked to its y position ([85dbf46](https://github.com/khanzzirfan/react-timeline-editor/commit/85dbf46ca6fd12c27c0c957dcb7662dedc511c21)) + + +### Bug Fixes + +* 🐛 compatible with react18 ([de966e0](https://github.com/khanzzirfan/react-timeline-editor/commit/de966e012a7306cc492a12547638a8d494846301)) +* 🐛 cursor listen scrollLeft change ([520e4cb](https://github.com/khanzzirfan/react-timeline-editor/commit/520e4cbedf0c5a5d5063fa91d4359733105d9abd)) +* 🐛 engine example audio play ([a0f6e54](https://github.com/khanzzirfan/react-timeline-editor/commit/a0f6e54be025b688e0c9d5ed0c36b05b8fc5c788)) +* 🐛 engine example destroy error ([b2919d9](https://github.com/khanzzirfan/react-timeline-editor/commit/b2919d919e0b03fc1b2880017c12e8eabf4a502e)) +* 🐛 engine example engine reference error ([123e72e](https://github.com/khanzzirfan/react-timeline-editor/commit/123e72eb315046ab954ae591574ae2500f2f57c5)) +* 🐛 react type config ([cca5a5b](https://github.com/khanzzirfan/react-timeline-editor/commit/cca5a5b9d617de092b5b8904390a2a34c2f87822)) +* 🐛 remove 'window' to adapt for nextjs ([51904d5](https://github.com/khanzzirfan/react-timeline-editor/commit/51904d5456643e0b66e2227fe74eb6fc78f8ac20)) +* 🐛 remove not necessary dependencies ([61a115d](https://github.com/khanzzirfan/react-timeline-editor/commit/61a115dd5dcfe870a080e6915486898bae27b873)) +* 🐛 scroll sync error ([0a7b459](https://github.com/khanzzirfan/react-timeline-editor/commit/0a7b459a3bf77e9c0879528ff0956ec5163f7440)) +* **emitter:** make offAll() keep events names ([d02f2b7](https://github.com/khanzzirfan/react-timeline-editor/commit/d02f2b79017c1cb1d78465b42afb64804c8f86bf)) +* fixed bug fixes on null action items ([0b12559](https://github.com/khanzzirfan/react-timeline-editor/commit/0b12559735cfdd670143989a0decda29576fc038)) +* fixed bug fixes on null action items ([b446a19](https://github.com/khanzzirfan/react-timeline-editor/commit/b446a19af540b37d2cc610d4ee4e1408bfecd974)) +* updated packagejson ([629a2c9](https://github.com/khanzzirfan/react-timeline-editor/commit/629a2c9c0db4f0dcbda3056131f7eadd20cdf175)) +* updated packagejson ([941743a](https://github.com/khanzzirfan/react-timeline-editor/commit/941743a179a798e27c37dd1648acb85084013027)) +* updated packagejson ([1b160c5](https://github.com/khanzzirfan/react-timeline-editor/commit/1b160c599bf120df9ee8c769f6b0c7e8a02a6617)) + ## 0.10.0 (2023-03-31) diff --git a/package.json b/package.json index 3c474e0..14986e6 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "reacthub-timeline-editor", "testName": "@xzdarcy/react-timeline-editor", - "version": "0.10.0", + "version": "0.11.0", "author": "khanzzirfan", "license": "MIT", "keywords": [ diff --git a/src/components/timeline.tsx b/src/components/timeline.tsx index ac165c1..8eb775d 100644 --- a/src/components/timeline.tsx +++ b/src/components/timeline.tsx @@ -90,9 +90,11 @@ export const Timeline = React.forwardRef((props, droppedRowData = restProps; } }); - if (oldRowId === rowId) return; + console.log('editorData', editorData, oldRowId, rowId); + if (oldRowId === rowId) return; if (!Array.isArray(editorData)) return null; + if (editorData.length < 1) return null; const modifiedEditorData = editorData.map((er) => { if (er.id === rowId) { const currActions = er.actions || []; @@ -113,6 +115,8 @@ export const Timeline = React.forwardRef((props, return er; }); console.log('modifiedEditorData', modifiedEditorData, oldRowId, rowId); + if (modifiedEditorData.length < 1) return null; + // update actions setEditorData(modifiedEditorData); handleEditorDataChange(modifiedEditorData); if (onDrop) { From 7566dc8c0843ddc42f0c60fea3b6aca316d3984e Mon Sep 17 00:00:00 2001 From: khanzzirfan Date: Sat, 1 Apr 2023 10:52:25 +1100 Subject: [PATCH 16/23] fix: fixed bug fixes on null action items --- CHANGELOG.md | 124 ++++++++++++++++++++++++ package.json | 2 +- src/components/row_rnd/interactable.tsx | 105 ++++++++++---------- src/components/row_rnd/row_rnd.tsx | 23 +---- src/components/timeline.tsx | 3 - 5 files changed, 176 insertions(+), 81 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6b5aeb2..6cc4f0c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,130 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +## 0.15.0 (2023-03-31) + + +### Features + +* ✨ add cursor drag start/end props ([61b5a5e](https://github.com/khanzzirfan/react-timeline-editor/commit/61b5a5e2a0a263541d908fe82d65c3eed74851f8)) +* ✨ allow to set scrollLeft ([dcc8d1e](https://github.com/khanzzirfan/react-timeline-editor/commit/dcc8d1eade0c4c4c70976c6c8c02b5d1fc2570fe)) +* ✨ auto scroll when drag cursor ([fc55f56](https://github.com/khanzzirfan/react-timeline-editor/commit/fc55f56afb8ec0633d4e90e1e3bc7ee1aec7b790)) +* ✨ on cursor drag ([8150141](https://github.com/khanzzirfan/react-timeline-editor/commit/815014156d39eb0736c346fc270da8f5ffb6d31a)) +* fixed the row drag and drop and cursor locked to its y position ([85dbf46](https://github.com/khanzzirfan/react-timeline-editor/commit/85dbf46ca6fd12c27c0c957dcb7662dedc511c21)) + + +### Bug Fixes + +* 🐛 compatible with react18 ([de966e0](https://github.com/khanzzirfan/react-timeline-editor/commit/de966e012a7306cc492a12547638a8d494846301)) +* 🐛 cursor listen scrollLeft change ([520e4cb](https://github.com/khanzzirfan/react-timeline-editor/commit/520e4cbedf0c5a5d5063fa91d4359733105d9abd)) +* 🐛 engine example audio play ([a0f6e54](https://github.com/khanzzirfan/react-timeline-editor/commit/a0f6e54be025b688e0c9d5ed0c36b05b8fc5c788)) +* 🐛 engine example destroy error ([b2919d9](https://github.com/khanzzirfan/react-timeline-editor/commit/b2919d919e0b03fc1b2880017c12e8eabf4a502e)) +* 🐛 engine example engine reference error ([123e72e](https://github.com/khanzzirfan/react-timeline-editor/commit/123e72eb315046ab954ae591574ae2500f2f57c5)) +* 🐛 react type config ([cca5a5b](https://github.com/khanzzirfan/react-timeline-editor/commit/cca5a5b9d617de092b5b8904390a2a34c2f87822)) +* 🐛 remove 'window' to adapt for nextjs ([51904d5](https://github.com/khanzzirfan/react-timeline-editor/commit/51904d5456643e0b66e2227fe74eb6fc78f8ac20)) +* 🐛 remove not necessary dependencies ([61a115d](https://github.com/khanzzirfan/react-timeline-editor/commit/61a115dd5dcfe870a080e6915486898bae27b873)) +* 🐛 scroll sync error ([0a7b459](https://github.com/khanzzirfan/react-timeline-editor/commit/0a7b459a3bf77e9c0879528ff0956ec5163f7440)) +* **emitter:** make offAll() keep events names ([d02f2b7](https://github.com/khanzzirfan/react-timeline-editor/commit/d02f2b79017c1cb1d78465b42afb64804c8f86bf)) +* fixed bug fixes on null action items ([248e9cb](https://github.com/khanzzirfan/react-timeline-editor/commit/248e9cb16a4531db7ee81f433be70b49800040e5)) +* fixed bug fixes on null action items ([0b12559](https://github.com/khanzzirfan/react-timeline-editor/commit/0b12559735cfdd670143989a0decda29576fc038)) +* fixed bug fixes on null action items ([b446a19](https://github.com/khanzzirfan/react-timeline-editor/commit/b446a19af540b37d2cc610d4ee4e1408bfecd974)) +* updated packagejson ([629a2c9](https://github.com/khanzzirfan/react-timeline-editor/commit/629a2c9c0db4f0dcbda3056131f7eadd20cdf175)) +* updated packagejson ([941743a](https://github.com/khanzzirfan/react-timeline-editor/commit/941743a179a798e27c37dd1648acb85084013027)) +* updated packagejson ([1b160c5](https://github.com/khanzzirfan/react-timeline-editor/commit/1b160c599bf120df9ee8c769f6b0c7e8a02a6617)) + +## 0.14.0 (2023-03-31) + + +### Features + +* ✨ add cursor drag start/end props ([61b5a5e](https://github.com/khanzzirfan/react-timeline-editor/commit/61b5a5e2a0a263541d908fe82d65c3eed74851f8)) +* ✨ allow to set scrollLeft ([dcc8d1e](https://github.com/khanzzirfan/react-timeline-editor/commit/dcc8d1eade0c4c4c70976c6c8c02b5d1fc2570fe)) +* ✨ auto scroll when drag cursor ([fc55f56](https://github.com/khanzzirfan/react-timeline-editor/commit/fc55f56afb8ec0633d4e90e1e3bc7ee1aec7b790)) +* ✨ on cursor drag ([8150141](https://github.com/khanzzirfan/react-timeline-editor/commit/815014156d39eb0736c346fc270da8f5ffb6d31a)) +* fixed the row drag and drop and cursor locked to its y position ([85dbf46](https://github.com/khanzzirfan/react-timeline-editor/commit/85dbf46ca6fd12c27c0c957dcb7662dedc511c21)) + + +### Bug Fixes + +* 🐛 compatible with react18 ([de966e0](https://github.com/khanzzirfan/react-timeline-editor/commit/de966e012a7306cc492a12547638a8d494846301)) +* 🐛 cursor listen scrollLeft change ([520e4cb](https://github.com/khanzzirfan/react-timeline-editor/commit/520e4cbedf0c5a5d5063fa91d4359733105d9abd)) +* 🐛 engine example audio play ([a0f6e54](https://github.com/khanzzirfan/react-timeline-editor/commit/a0f6e54be025b688e0c9d5ed0c36b05b8fc5c788)) +* 🐛 engine example destroy error ([b2919d9](https://github.com/khanzzirfan/react-timeline-editor/commit/b2919d919e0b03fc1b2880017c12e8eabf4a502e)) +* 🐛 engine example engine reference error ([123e72e](https://github.com/khanzzirfan/react-timeline-editor/commit/123e72eb315046ab954ae591574ae2500f2f57c5)) +* 🐛 react type config ([cca5a5b](https://github.com/khanzzirfan/react-timeline-editor/commit/cca5a5b9d617de092b5b8904390a2a34c2f87822)) +* 🐛 remove 'window' to adapt for nextjs ([51904d5](https://github.com/khanzzirfan/react-timeline-editor/commit/51904d5456643e0b66e2227fe74eb6fc78f8ac20)) +* 🐛 remove not necessary dependencies ([61a115d](https://github.com/khanzzirfan/react-timeline-editor/commit/61a115dd5dcfe870a080e6915486898bae27b873)) +* 🐛 scroll sync error ([0a7b459](https://github.com/khanzzirfan/react-timeline-editor/commit/0a7b459a3bf77e9c0879528ff0956ec5163f7440)) +* **emitter:** make offAll() keep events names ([d02f2b7](https://github.com/khanzzirfan/react-timeline-editor/commit/d02f2b79017c1cb1d78465b42afb64804c8f86bf)) +* fixed bug fixes on null action items ([248e9cb](https://github.com/khanzzirfan/react-timeline-editor/commit/248e9cb16a4531db7ee81f433be70b49800040e5)) +* fixed bug fixes on null action items ([0b12559](https://github.com/khanzzirfan/react-timeline-editor/commit/0b12559735cfdd670143989a0decda29576fc038)) +* fixed bug fixes on null action items ([b446a19](https://github.com/khanzzirfan/react-timeline-editor/commit/b446a19af540b37d2cc610d4ee4e1408bfecd974)) +* updated packagejson ([629a2c9](https://github.com/khanzzirfan/react-timeline-editor/commit/629a2c9c0db4f0dcbda3056131f7eadd20cdf175)) +* updated packagejson ([941743a](https://github.com/khanzzirfan/react-timeline-editor/commit/941743a179a798e27c37dd1648acb85084013027)) +* updated packagejson ([1b160c5](https://github.com/khanzzirfan/react-timeline-editor/commit/1b160c599bf120df9ee8c769f6b0c7e8a02a6617)) + +## 0.13.0 (2023-03-31) + + +### Features + +* ✨ add cursor drag start/end props ([61b5a5e](https://github.com/khanzzirfan/react-timeline-editor/commit/61b5a5e2a0a263541d908fe82d65c3eed74851f8)) +* ✨ allow to set scrollLeft ([dcc8d1e](https://github.com/khanzzirfan/react-timeline-editor/commit/dcc8d1eade0c4c4c70976c6c8c02b5d1fc2570fe)) +* ✨ auto scroll when drag cursor ([fc55f56](https://github.com/khanzzirfan/react-timeline-editor/commit/fc55f56afb8ec0633d4e90e1e3bc7ee1aec7b790)) +* ✨ on cursor drag ([8150141](https://github.com/khanzzirfan/react-timeline-editor/commit/815014156d39eb0736c346fc270da8f5ffb6d31a)) +* fixed the row drag and drop and cursor locked to its y position ([85dbf46](https://github.com/khanzzirfan/react-timeline-editor/commit/85dbf46ca6fd12c27c0c957dcb7662dedc511c21)) + + +### Bug Fixes + +* 🐛 compatible with react18 ([de966e0](https://github.com/khanzzirfan/react-timeline-editor/commit/de966e012a7306cc492a12547638a8d494846301)) +* 🐛 cursor listen scrollLeft change ([520e4cb](https://github.com/khanzzirfan/react-timeline-editor/commit/520e4cbedf0c5a5d5063fa91d4359733105d9abd)) +* 🐛 engine example audio play ([a0f6e54](https://github.com/khanzzirfan/react-timeline-editor/commit/a0f6e54be025b688e0c9d5ed0c36b05b8fc5c788)) +* 🐛 engine example destroy error ([b2919d9](https://github.com/khanzzirfan/react-timeline-editor/commit/b2919d919e0b03fc1b2880017c12e8eabf4a502e)) +* 🐛 engine example engine reference error ([123e72e](https://github.com/khanzzirfan/react-timeline-editor/commit/123e72eb315046ab954ae591574ae2500f2f57c5)) +* 🐛 react type config ([cca5a5b](https://github.com/khanzzirfan/react-timeline-editor/commit/cca5a5b9d617de092b5b8904390a2a34c2f87822)) +* 🐛 remove 'window' to adapt for nextjs ([51904d5](https://github.com/khanzzirfan/react-timeline-editor/commit/51904d5456643e0b66e2227fe74eb6fc78f8ac20)) +* 🐛 remove not necessary dependencies ([61a115d](https://github.com/khanzzirfan/react-timeline-editor/commit/61a115dd5dcfe870a080e6915486898bae27b873)) +* 🐛 scroll sync error ([0a7b459](https://github.com/khanzzirfan/react-timeline-editor/commit/0a7b459a3bf77e9c0879528ff0956ec5163f7440)) +* **emitter:** make offAll() keep events names ([d02f2b7](https://github.com/khanzzirfan/react-timeline-editor/commit/d02f2b79017c1cb1d78465b42afb64804c8f86bf)) +* fixed bug fixes on null action items ([248e9cb](https://github.com/khanzzirfan/react-timeline-editor/commit/248e9cb16a4531db7ee81f433be70b49800040e5)) +* fixed bug fixes on null action items ([0b12559](https://github.com/khanzzirfan/react-timeline-editor/commit/0b12559735cfdd670143989a0decda29576fc038)) +* fixed bug fixes on null action items ([b446a19](https://github.com/khanzzirfan/react-timeline-editor/commit/b446a19af540b37d2cc610d4ee4e1408bfecd974)) +* updated packagejson ([629a2c9](https://github.com/khanzzirfan/react-timeline-editor/commit/629a2c9c0db4f0dcbda3056131f7eadd20cdf175)) +* updated packagejson ([941743a](https://github.com/khanzzirfan/react-timeline-editor/commit/941743a179a798e27c37dd1648acb85084013027)) +* updated packagejson ([1b160c5](https://github.com/khanzzirfan/react-timeline-editor/commit/1b160c599bf120df9ee8c769f6b0c7e8a02a6617)) + +## 0.12.0 (2023-03-31) + + +### Features + +* ✨ add cursor drag start/end props ([61b5a5e](https://github.com/khanzzirfan/react-timeline-editor/commit/61b5a5e2a0a263541d908fe82d65c3eed74851f8)) +* ✨ allow to set scrollLeft ([dcc8d1e](https://github.com/khanzzirfan/react-timeline-editor/commit/dcc8d1eade0c4c4c70976c6c8c02b5d1fc2570fe)) +* ✨ auto scroll when drag cursor ([fc55f56](https://github.com/khanzzirfan/react-timeline-editor/commit/fc55f56afb8ec0633d4e90e1e3bc7ee1aec7b790)) +* ✨ on cursor drag ([8150141](https://github.com/khanzzirfan/react-timeline-editor/commit/815014156d39eb0736c346fc270da8f5ffb6d31a)) +* fixed the row drag and drop and cursor locked to its y position ([85dbf46](https://github.com/khanzzirfan/react-timeline-editor/commit/85dbf46ca6fd12c27c0c957dcb7662dedc511c21)) + + +### Bug Fixes + +* 🐛 compatible with react18 ([de966e0](https://github.com/khanzzirfan/react-timeline-editor/commit/de966e012a7306cc492a12547638a8d494846301)) +* 🐛 cursor listen scrollLeft change ([520e4cb](https://github.com/khanzzirfan/react-timeline-editor/commit/520e4cbedf0c5a5d5063fa91d4359733105d9abd)) +* 🐛 engine example audio play ([a0f6e54](https://github.com/khanzzirfan/react-timeline-editor/commit/a0f6e54be025b688e0c9d5ed0c36b05b8fc5c788)) +* 🐛 engine example destroy error ([b2919d9](https://github.com/khanzzirfan/react-timeline-editor/commit/b2919d919e0b03fc1b2880017c12e8eabf4a502e)) +* 🐛 engine example engine reference error ([123e72e](https://github.com/khanzzirfan/react-timeline-editor/commit/123e72eb315046ab954ae591574ae2500f2f57c5)) +* 🐛 react type config ([cca5a5b](https://github.com/khanzzirfan/react-timeline-editor/commit/cca5a5b9d617de092b5b8904390a2a34c2f87822)) +* 🐛 remove 'window' to adapt for nextjs ([51904d5](https://github.com/khanzzirfan/react-timeline-editor/commit/51904d5456643e0b66e2227fe74eb6fc78f8ac20)) +* 🐛 remove not necessary dependencies ([61a115d](https://github.com/khanzzirfan/react-timeline-editor/commit/61a115dd5dcfe870a080e6915486898bae27b873)) +* 🐛 scroll sync error ([0a7b459](https://github.com/khanzzirfan/react-timeline-editor/commit/0a7b459a3bf77e9c0879528ff0956ec5163f7440)) +* **emitter:** make offAll() keep events names ([d02f2b7](https://github.com/khanzzirfan/react-timeline-editor/commit/d02f2b79017c1cb1d78465b42afb64804c8f86bf)) +* fixed bug fixes on null action items ([248e9cb](https://github.com/khanzzirfan/react-timeline-editor/commit/248e9cb16a4531db7ee81f433be70b49800040e5)) +* fixed bug fixes on null action items ([0b12559](https://github.com/khanzzirfan/react-timeline-editor/commit/0b12559735cfdd670143989a0decda29576fc038)) +* fixed bug fixes on null action items ([b446a19](https://github.com/khanzzirfan/react-timeline-editor/commit/b446a19af540b37d2cc610d4ee4e1408bfecd974)) +* updated packagejson ([629a2c9](https://github.com/khanzzirfan/react-timeline-editor/commit/629a2c9c0db4f0dcbda3056131f7eadd20cdf175)) +* updated packagejson ([941743a](https://github.com/khanzzirfan/react-timeline-editor/commit/941743a179a798e27c37dd1648acb85084013027)) +* updated packagejson ([1b160c5](https://github.com/khanzzirfan/react-timeline-editor/commit/1b160c599bf120df9ee8c769f6b0c7e8a02a6617)) + ## 0.11.0 (2023-03-31) diff --git a/package.json b/package.json index 14986e6..6fbdfa3 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "reacthub-timeline-editor", "testName": "@xzdarcy/react-timeline-editor", - "version": "0.11.0", + "version": "0.15.0", "author": "khanzzirfan", "license": "MIT", "keywords": [ diff --git a/src/components/row_rnd/interactable.tsx b/src/components/row_rnd/interactable.tsx index b01052c..132d2f7 100644 --- a/src/components/row_rnd/interactable.tsx +++ b/src/components/row_rnd/interactable.tsx @@ -1,7 +1,6 @@ import { DraggableOptions } from '@interactjs/actions/drag/plugin'; import { ResizableOptions } from '@interactjs/actions/resize/plugin'; -import { DropzoneOptions } from '@interactjs/actions/drop/plugin'; -import { DragEvent, DropEvent, Interactable } from '@interactjs/types'; +import { DragEvent, Interactable } from '@interactjs/types'; import interact from 'interactjs'; import { cloneElement, FC, ReactElement, useEffect, useRef } from 'react'; @@ -11,27 +10,23 @@ export const InteractComp: FC<{ draggableOptions: DraggableOptions; resizable: boolean; resizableOptions: ResizableOptions; - dropzone: boolean; - dropzoneOptions?: DropzoneOptions; -}> = ({ children, interactRef, draggable, resizable, draggableOptions, resizableOptions, dropzone, dropzoneOptions }) => { +}> = ({ children, interactRef, draggable, resizable, draggableOptions, resizableOptions }) => { const nodeRef = useRef(); const interactable = useRef(); const draggableOptionsRef = useRef(); const resizableOptionsRef = useRef(); - const dropzoneOptionsRef = useRef(); useEffect(() => { draggableOptionsRef.current = { ...draggableOptions }; resizableOptionsRef.current = { ...resizableOptions }; - dropzoneOptionsRef.current = { ...dropzoneOptions }; - }, [draggableOptions, resizableOptions, dropzoneOptions]); + }, [draggableOptions, resizableOptions]); useEffect(() => { interactable.current && interactable.current.unset(); interactable.current = interact(nodeRef.current); interactRef.current = interactable.current; setInteractions(); - }, [draggable, resizable, dropzone]); + }, [draggable, resizable]); const setInteractions = () => { if (draggable) @@ -49,52 +44,52 @@ export const InteractComp: FC<{ onend: (e) => resizableOptionsRef.current.onend && (resizableOptionsRef.current.onend as (e: DragEvent) => any)(e), }); - if (dropzone) { - // interactable.current.dropzone({ - // accept: '.timeline-editor-action', - // overlap: 0.75, - // checker: (dragEvent, event, dropped, dropzone, dropElement, draggable, dragElement) => { - // return true; - // }, - // ondropactivate: function (event) { - // // add active dropzone feedback - // console.log('dropactivate'); - // event.target.classList.add('drop-active'); - // }, - // ondragenter: function (event) { - // console.log('ondragenter'); - // var draggableElement = event.relatedTarget; - // var dropzoneElement = event.target; - // // feedback the possibility of a drop - // dropzoneElement.classList.add('drop-target'); - // draggableElement.classList.add('can-drop'); - // // draggableElement.textContent = 'Dragged in'; - // }, - // ondragleave: function (event) { - // console.log('ondragleave'); - // // remove the drop feedback style - // event.target.classList.remove('drop-target'); - // event.relatedTarget.classList.remove('can-drop'); - // // event.relatedTarget.textContent = 'Dragged out'; - // }, - // ondrop: function (event) { - // console.log('onDropevent', event); - // // event.relatedTarget.textContent = 'Dropped'; - // if (dropzoneOptionsRef.current.ondrop) { - // (dropzoneOptionsRef.current.ondrop as (e: DropEvent) => any)(event); - // } - // }, - // ondropdeactivate: function (event) { - // console.log('ondropdeactivate', event); - // // remove active dropzone feedback - // event.target.classList.remove('drop-active'); - // event.target.classList.remove('drop-target'); - // if (dropzoneOptionsRef.current.ondrop) { - // (dropzoneOptionsRef.current.ondrop as (e: DropEvent) => any)(event); - // } - // }, - // }); - } + // if (dropzone) { + // interactable.current.dropzone({ + // accept: '.timeline-editor-action', + // overlap: 0.75, + // checker: (dragEvent, event, dropped, dropzone, dropElement, draggable, dragElement) => { + // return true; + // }, + // ondropactivate: function (event) { + // // add active dropzone feedback + // console.log('dropactivate'); + // event.target.classList.add('drop-active'); + // }, + // ondragenter: function (event) { + // console.log('ondragenter'); + // var draggableElement = event.relatedTarget; + // var dropzoneElement = event.target; + // // feedback the possibility of a drop + // dropzoneElement.classList.add('drop-target'); + // draggableElement.classList.add('can-drop'); + // // draggableElement.textContent = 'Dragged in'; + // }, + // ondragleave: function (event) { + // console.log('ondragleave'); + // // remove the drop feedback style + // event.target.classList.remove('drop-target'); + // event.relatedTarget.classList.remove('can-drop'); + // // event.relatedTarget.textContent = 'Dragged out'; + // }, + // ondrop: function (event) { + // console.log('onDropevent', event); + // // event.relatedTarget.textContent = 'Dropped'; + // if (dropzoneOptionsRef.current.ondrop) { + // (dropzoneOptionsRef.current.ondrop as (e: DropEvent) => any)(event); + // } + // }, + // ondropdeactivate: function (event) { + // console.log('ondropdeactivate', event); + // // remove active dropzone feedback + // event.target.classList.remove('drop-active'); + // event.target.classList.remove('drop-target'); + // if (dropzoneOptionsRef.current.ondrop) { + // (dropzoneOptionsRef.current.ondrop as (e: DropEvent) => any)(event); + // } + // }, + // }); + // } }; return cloneElement(children as ReactElement, { diff --git a/src/components/row_rnd/row_rnd.tsx b/src/components/row_rnd/row_rnd.tsx index fbcd8e6..8128b4f 100644 --- a/src/components/row_rnd/row_rnd.tsx +++ b/src/components/row_rnd/row_rnd.tsx @@ -1,11 +1,10 @@ import { Interactable } from '@interactjs/core/Interactable'; -import { DragEvent, DropEvent, ResizeEvent } from '@interactjs/types/index'; +import { DragEvent, ResizeEvent } from '@interactjs/types/index'; import React, { ReactElement, useEffect, useImperativeHandle, useRef } from 'react'; import { DEFAULT_ADSORPTION_DISTANCE, DEFAULT_MOVE_GRID, DEFAULT_START_LEFT } from '../../interface/const'; import { useAutoScroll } from './hooks/useAutoScroll'; import { InteractComp } from './interactable'; import { Direction, RowRndApi, RowRndProps } from './row_rnd_interface'; -import interact from 'interactjs'; export const RowDnd = React.forwardRef( ( @@ -382,21 +381,6 @@ export const RowDnd = React.forwardRef( // Object.assign(target.dataset, { top: 0 }); // }; - const handleOnDrop = (event: DropEvent) => { - const isCursor = event.target.getAttribute('data-id') === 'cursor'; - if (!isCursor) { - // not a cursor - const target = interactable.current.target as HTMLElement; - event.relatedTarget.style.removeProperty('top'); - const droppedRow = event.target.getAttribute('data-rowid'); - const actionId = event.relatedTarget.getAttribute('data-actionid'); - deltaY.current = 0; - Object.assign(target.dataset, { top: 0 }); - if (onDrop) { - onDrop(droppedRow, actionId); - } - } - }; //#endregion return ( @@ -429,11 +413,6 @@ export const RowDnd = React.forwardRef( onstart: handleResizeStart, onend: handleResizeStop, }} - dropzone - dropzoneOptions={{ - // ondropdeactivate: handleDropDeactivate, - ondrop: handleOnDrop, - }} > {React.cloneElement(children as ReactElement, { style: { diff --git a/src/components/timeline.tsx b/src/components/timeline.tsx index 8eb775d..667530d 100644 --- a/src/components/timeline.tsx +++ b/src/components/timeline.tsx @@ -91,10 +91,8 @@ export const Timeline = React.forwardRef((props, } }); console.log('editorData', editorData, oldRowId, rowId); - if (oldRowId === rowId) return; if (!Array.isArray(editorData)) return null; - if (editorData.length < 1) return null; const modifiedEditorData = editorData.map((er) => { if (er.id === rowId) { const currActions = er.actions || []; @@ -115,7 +113,6 @@ export const Timeline = React.forwardRef((props, return er; }); console.log('modifiedEditorData', modifiedEditorData, oldRowId, rowId); - if (modifiedEditorData.length < 1) return null; // update actions setEditorData(modifiedEditorData); handleEditorDataChange(modifiedEditorData); From 635ce17a04bc3e60786df6b8eeba53f684354729 Mon Sep 17 00:00:00 2001 From: khanzzirfan Date: Sat, 1 Apr 2023 13:50:18 +1100 Subject: [PATCH 17/23] fix: fixed bug fixes on null action items --- CHANGELOG.md | 128 ++++++++++++++++++ docs/editor-demo/editor-scroll-sync/index.tsx | 4 +- package.json | 4 +- src/components/timeline.tsx | 17 ++- 4 files changed, 145 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6cc4f0c..013129c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,134 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +## 0.19.0 (2023-04-01) + + +### Features + +* ✨ add cursor drag start/end props ([61b5a5e](https://github.com/khanzzirfan/react-timeline-editor/commit/61b5a5e2a0a263541d908fe82d65c3eed74851f8)) +* ✨ allow to set scrollLeft ([dcc8d1e](https://github.com/khanzzirfan/react-timeline-editor/commit/dcc8d1eade0c4c4c70976c6c8c02b5d1fc2570fe)) +* ✨ auto scroll when drag cursor ([fc55f56](https://github.com/khanzzirfan/react-timeline-editor/commit/fc55f56afb8ec0633d4e90e1e3bc7ee1aec7b790)) +* ✨ on cursor drag ([8150141](https://github.com/khanzzirfan/react-timeline-editor/commit/815014156d39eb0736c346fc270da8f5ffb6d31a)) +* fixed the row drag and drop and cursor locked to its y position ([85dbf46](https://github.com/khanzzirfan/react-timeline-editor/commit/85dbf46ca6fd12c27c0c957dcb7662dedc511c21)) + + +### Bug Fixes + +* 🐛 compatible with react18 ([de966e0](https://github.com/khanzzirfan/react-timeline-editor/commit/de966e012a7306cc492a12547638a8d494846301)) +* 🐛 cursor listen scrollLeft change ([520e4cb](https://github.com/khanzzirfan/react-timeline-editor/commit/520e4cbedf0c5a5d5063fa91d4359733105d9abd)) +* 🐛 engine example audio play ([a0f6e54](https://github.com/khanzzirfan/react-timeline-editor/commit/a0f6e54be025b688e0c9d5ed0c36b05b8fc5c788)) +* 🐛 engine example destroy error ([b2919d9](https://github.com/khanzzirfan/react-timeline-editor/commit/b2919d919e0b03fc1b2880017c12e8eabf4a502e)) +* 🐛 engine example engine reference error ([123e72e](https://github.com/khanzzirfan/react-timeline-editor/commit/123e72eb315046ab954ae591574ae2500f2f57c5)) +* 🐛 react type config ([cca5a5b](https://github.com/khanzzirfan/react-timeline-editor/commit/cca5a5b9d617de092b5b8904390a2a34c2f87822)) +* 🐛 remove 'window' to adapt for nextjs ([51904d5](https://github.com/khanzzirfan/react-timeline-editor/commit/51904d5456643e0b66e2227fe74eb6fc78f8ac20)) +* 🐛 remove not necessary dependencies ([61a115d](https://github.com/khanzzirfan/react-timeline-editor/commit/61a115dd5dcfe870a080e6915486898bae27b873)) +* 🐛 scroll sync error ([0a7b459](https://github.com/khanzzirfan/react-timeline-editor/commit/0a7b459a3bf77e9c0879528ff0956ec5163f7440)) +* **emitter:** make offAll() keep events names ([d02f2b7](https://github.com/khanzzirfan/react-timeline-editor/commit/d02f2b79017c1cb1d78465b42afb64804c8f86bf)) +* fixed bug fixes on null action items ([7566dc8](https://github.com/khanzzirfan/react-timeline-editor/commit/7566dc8c0843ddc42f0c60fea3b6aca316d3984e)) +* fixed bug fixes on null action items ([248e9cb](https://github.com/khanzzirfan/react-timeline-editor/commit/248e9cb16a4531db7ee81f433be70b49800040e5)) +* fixed bug fixes on null action items ([0b12559](https://github.com/khanzzirfan/react-timeline-editor/commit/0b12559735cfdd670143989a0decda29576fc038)) +* fixed bug fixes on null action items ([b446a19](https://github.com/khanzzirfan/react-timeline-editor/commit/b446a19af540b37d2cc610d4ee4e1408bfecd974)) +* updated packagejson ([629a2c9](https://github.com/khanzzirfan/react-timeline-editor/commit/629a2c9c0db4f0dcbda3056131f7eadd20cdf175)) +* updated packagejson ([941743a](https://github.com/khanzzirfan/react-timeline-editor/commit/941743a179a798e27c37dd1648acb85084013027)) +* updated packagejson ([1b160c5](https://github.com/khanzzirfan/react-timeline-editor/commit/1b160c599bf120df9ee8c769f6b0c7e8a02a6617)) + +## 0.18.0 (2023-04-01) + + +### Features + +* ✨ add cursor drag start/end props ([61b5a5e](https://github.com/khanzzirfan/react-timeline-editor/commit/61b5a5e2a0a263541d908fe82d65c3eed74851f8)) +* ✨ allow to set scrollLeft ([dcc8d1e](https://github.com/khanzzirfan/react-timeline-editor/commit/dcc8d1eade0c4c4c70976c6c8c02b5d1fc2570fe)) +* ✨ auto scroll when drag cursor ([fc55f56](https://github.com/khanzzirfan/react-timeline-editor/commit/fc55f56afb8ec0633d4e90e1e3bc7ee1aec7b790)) +* ✨ on cursor drag ([8150141](https://github.com/khanzzirfan/react-timeline-editor/commit/815014156d39eb0736c346fc270da8f5ffb6d31a)) +* fixed the row drag and drop and cursor locked to its y position ([85dbf46](https://github.com/khanzzirfan/react-timeline-editor/commit/85dbf46ca6fd12c27c0c957dcb7662dedc511c21)) + + +### Bug Fixes + +* 🐛 compatible with react18 ([de966e0](https://github.com/khanzzirfan/react-timeline-editor/commit/de966e012a7306cc492a12547638a8d494846301)) +* 🐛 cursor listen scrollLeft change ([520e4cb](https://github.com/khanzzirfan/react-timeline-editor/commit/520e4cbedf0c5a5d5063fa91d4359733105d9abd)) +* 🐛 engine example audio play ([a0f6e54](https://github.com/khanzzirfan/react-timeline-editor/commit/a0f6e54be025b688e0c9d5ed0c36b05b8fc5c788)) +* 🐛 engine example destroy error ([b2919d9](https://github.com/khanzzirfan/react-timeline-editor/commit/b2919d919e0b03fc1b2880017c12e8eabf4a502e)) +* 🐛 engine example engine reference error ([123e72e](https://github.com/khanzzirfan/react-timeline-editor/commit/123e72eb315046ab954ae591574ae2500f2f57c5)) +* 🐛 react type config ([cca5a5b](https://github.com/khanzzirfan/react-timeline-editor/commit/cca5a5b9d617de092b5b8904390a2a34c2f87822)) +* 🐛 remove 'window' to adapt for nextjs ([51904d5](https://github.com/khanzzirfan/react-timeline-editor/commit/51904d5456643e0b66e2227fe74eb6fc78f8ac20)) +* 🐛 remove not necessary dependencies ([61a115d](https://github.com/khanzzirfan/react-timeline-editor/commit/61a115dd5dcfe870a080e6915486898bae27b873)) +* 🐛 scroll sync error ([0a7b459](https://github.com/khanzzirfan/react-timeline-editor/commit/0a7b459a3bf77e9c0879528ff0956ec5163f7440)) +* **emitter:** make offAll() keep events names ([d02f2b7](https://github.com/khanzzirfan/react-timeline-editor/commit/d02f2b79017c1cb1d78465b42afb64804c8f86bf)) +* fixed bug fixes on null action items ([7566dc8](https://github.com/khanzzirfan/react-timeline-editor/commit/7566dc8c0843ddc42f0c60fea3b6aca316d3984e)) +* fixed bug fixes on null action items ([248e9cb](https://github.com/khanzzirfan/react-timeline-editor/commit/248e9cb16a4531db7ee81f433be70b49800040e5)) +* fixed bug fixes on null action items ([0b12559](https://github.com/khanzzirfan/react-timeline-editor/commit/0b12559735cfdd670143989a0decda29576fc038)) +* fixed bug fixes on null action items ([b446a19](https://github.com/khanzzirfan/react-timeline-editor/commit/b446a19af540b37d2cc610d4ee4e1408bfecd974)) +* updated packagejson ([629a2c9](https://github.com/khanzzirfan/react-timeline-editor/commit/629a2c9c0db4f0dcbda3056131f7eadd20cdf175)) +* updated packagejson ([941743a](https://github.com/khanzzirfan/react-timeline-editor/commit/941743a179a798e27c37dd1648acb85084013027)) +* updated packagejson ([1b160c5](https://github.com/khanzzirfan/react-timeline-editor/commit/1b160c599bf120df9ee8c769f6b0c7e8a02a6617)) + +## 0.17.0 (2023-04-01) + + +### Features + +* ✨ add cursor drag start/end props ([61b5a5e](https://github.com/khanzzirfan/react-timeline-editor/commit/61b5a5e2a0a263541d908fe82d65c3eed74851f8)) +* ✨ allow to set scrollLeft ([dcc8d1e](https://github.com/khanzzirfan/react-timeline-editor/commit/dcc8d1eade0c4c4c70976c6c8c02b5d1fc2570fe)) +* ✨ auto scroll when drag cursor ([fc55f56](https://github.com/khanzzirfan/react-timeline-editor/commit/fc55f56afb8ec0633d4e90e1e3bc7ee1aec7b790)) +* ✨ on cursor drag ([8150141](https://github.com/khanzzirfan/react-timeline-editor/commit/815014156d39eb0736c346fc270da8f5ffb6d31a)) +* fixed the row drag and drop and cursor locked to its y position ([85dbf46](https://github.com/khanzzirfan/react-timeline-editor/commit/85dbf46ca6fd12c27c0c957dcb7662dedc511c21)) + + +### Bug Fixes + +* 🐛 compatible with react18 ([de966e0](https://github.com/khanzzirfan/react-timeline-editor/commit/de966e012a7306cc492a12547638a8d494846301)) +* 🐛 cursor listen scrollLeft change ([520e4cb](https://github.com/khanzzirfan/react-timeline-editor/commit/520e4cbedf0c5a5d5063fa91d4359733105d9abd)) +* 🐛 engine example audio play ([a0f6e54](https://github.com/khanzzirfan/react-timeline-editor/commit/a0f6e54be025b688e0c9d5ed0c36b05b8fc5c788)) +* 🐛 engine example destroy error ([b2919d9](https://github.com/khanzzirfan/react-timeline-editor/commit/b2919d919e0b03fc1b2880017c12e8eabf4a502e)) +* 🐛 engine example engine reference error ([123e72e](https://github.com/khanzzirfan/react-timeline-editor/commit/123e72eb315046ab954ae591574ae2500f2f57c5)) +* 🐛 react type config ([cca5a5b](https://github.com/khanzzirfan/react-timeline-editor/commit/cca5a5b9d617de092b5b8904390a2a34c2f87822)) +* 🐛 remove 'window' to adapt for nextjs ([51904d5](https://github.com/khanzzirfan/react-timeline-editor/commit/51904d5456643e0b66e2227fe74eb6fc78f8ac20)) +* 🐛 remove not necessary dependencies ([61a115d](https://github.com/khanzzirfan/react-timeline-editor/commit/61a115dd5dcfe870a080e6915486898bae27b873)) +* 🐛 scroll sync error ([0a7b459](https://github.com/khanzzirfan/react-timeline-editor/commit/0a7b459a3bf77e9c0879528ff0956ec5163f7440)) +* **emitter:** make offAll() keep events names ([d02f2b7](https://github.com/khanzzirfan/react-timeline-editor/commit/d02f2b79017c1cb1d78465b42afb64804c8f86bf)) +* fixed bug fixes on null action items ([7566dc8](https://github.com/khanzzirfan/react-timeline-editor/commit/7566dc8c0843ddc42f0c60fea3b6aca316d3984e)) +* fixed bug fixes on null action items ([248e9cb](https://github.com/khanzzirfan/react-timeline-editor/commit/248e9cb16a4531db7ee81f433be70b49800040e5)) +* fixed bug fixes on null action items ([0b12559](https://github.com/khanzzirfan/react-timeline-editor/commit/0b12559735cfdd670143989a0decda29576fc038)) +* fixed bug fixes on null action items ([b446a19](https://github.com/khanzzirfan/react-timeline-editor/commit/b446a19af540b37d2cc610d4ee4e1408bfecd974)) +* updated packagejson ([629a2c9](https://github.com/khanzzirfan/react-timeline-editor/commit/629a2c9c0db4f0dcbda3056131f7eadd20cdf175)) +* updated packagejson ([941743a](https://github.com/khanzzirfan/react-timeline-editor/commit/941743a179a798e27c37dd1648acb85084013027)) +* updated packagejson ([1b160c5](https://github.com/khanzzirfan/react-timeline-editor/commit/1b160c599bf120df9ee8c769f6b0c7e8a02a6617)) + +## 0.16.0 (2023-04-01) + + +### Features + +* ✨ add cursor drag start/end props ([61b5a5e](https://github.com/khanzzirfan/react-timeline-editor/commit/61b5a5e2a0a263541d908fe82d65c3eed74851f8)) +* ✨ allow to set scrollLeft ([dcc8d1e](https://github.com/khanzzirfan/react-timeline-editor/commit/dcc8d1eade0c4c4c70976c6c8c02b5d1fc2570fe)) +* ✨ auto scroll when drag cursor ([fc55f56](https://github.com/khanzzirfan/react-timeline-editor/commit/fc55f56afb8ec0633d4e90e1e3bc7ee1aec7b790)) +* ✨ on cursor drag ([8150141](https://github.com/khanzzirfan/react-timeline-editor/commit/815014156d39eb0736c346fc270da8f5ffb6d31a)) +* fixed the row drag and drop and cursor locked to its y position ([85dbf46](https://github.com/khanzzirfan/react-timeline-editor/commit/85dbf46ca6fd12c27c0c957dcb7662dedc511c21)) + + +### Bug Fixes + +* 🐛 compatible with react18 ([de966e0](https://github.com/khanzzirfan/react-timeline-editor/commit/de966e012a7306cc492a12547638a8d494846301)) +* 🐛 cursor listen scrollLeft change ([520e4cb](https://github.com/khanzzirfan/react-timeline-editor/commit/520e4cbedf0c5a5d5063fa91d4359733105d9abd)) +* 🐛 engine example audio play ([a0f6e54](https://github.com/khanzzirfan/react-timeline-editor/commit/a0f6e54be025b688e0c9d5ed0c36b05b8fc5c788)) +* 🐛 engine example destroy error ([b2919d9](https://github.com/khanzzirfan/react-timeline-editor/commit/b2919d919e0b03fc1b2880017c12e8eabf4a502e)) +* 🐛 engine example engine reference error ([123e72e](https://github.com/khanzzirfan/react-timeline-editor/commit/123e72eb315046ab954ae591574ae2500f2f57c5)) +* 🐛 react type config ([cca5a5b](https://github.com/khanzzirfan/react-timeline-editor/commit/cca5a5b9d617de092b5b8904390a2a34c2f87822)) +* 🐛 remove 'window' to adapt for nextjs ([51904d5](https://github.com/khanzzirfan/react-timeline-editor/commit/51904d5456643e0b66e2227fe74eb6fc78f8ac20)) +* 🐛 remove not necessary dependencies ([61a115d](https://github.com/khanzzirfan/react-timeline-editor/commit/61a115dd5dcfe870a080e6915486898bae27b873)) +* 🐛 scroll sync error ([0a7b459](https://github.com/khanzzirfan/react-timeline-editor/commit/0a7b459a3bf77e9c0879528ff0956ec5163f7440)) +* **emitter:** make offAll() keep events names ([d02f2b7](https://github.com/khanzzirfan/react-timeline-editor/commit/d02f2b79017c1cb1d78465b42afb64804c8f86bf)) +* fixed bug fixes on null action items ([7566dc8](https://github.com/khanzzirfan/react-timeline-editor/commit/7566dc8c0843ddc42f0c60fea3b6aca316d3984e)) +* fixed bug fixes on null action items ([248e9cb](https://github.com/khanzzirfan/react-timeline-editor/commit/248e9cb16a4531db7ee81f433be70b49800040e5)) +* fixed bug fixes on null action items ([0b12559](https://github.com/khanzzirfan/react-timeline-editor/commit/0b12559735cfdd670143989a0decda29576fc038)) +* fixed bug fixes on null action items ([b446a19](https://github.com/khanzzirfan/react-timeline-editor/commit/b446a19af540b37d2cc610d4ee4e1408bfecd974)) +* updated packagejson ([629a2c9](https://github.com/khanzzirfan/react-timeline-editor/commit/629a2c9c0db4f0dcbda3056131f7eadd20cdf175)) +* updated packagejson ([941743a](https://github.com/khanzzirfan/react-timeline-editor/commit/941743a179a798e27c37dd1648acb85084013027)) +* updated packagejson ([1b160c5](https://github.com/khanzzirfan/react-timeline-editor/commit/1b160c599bf120df9ee8c769f6b0c7e8a02a6617)) + ## 0.15.0 (2023-03-31) diff --git a/docs/editor-demo/editor-scroll-sync/index.tsx b/docs/editor-demo/editor-scroll-sync/index.tsx index 7db1536..e2c0e93 100644 --- a/docs/editor-demo/editor-scroll-sync/index.tsx +++ b/docs/editor-demo/editor-scroll-sync/index.tsx @@ -1,4 +1,6 @@ -import { Timeline, TimelineState } from '@xzdarcy/react-timeline-editor'; +// import { Timeline, TimelineState } from '@xzdarcy/react-timeline-editor'; +import { Timeline } from '../../../src/components/timeline'; +import { TimelineState } from '../../../src/interface/timeline'; import { cloneDeep } from 'lodash'; import React, { useRef, useState } from 'react'; import './index.less'; diff --git a/package.json b/package.json index 6fbdfa3..82552b1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "reacthub-timeline-editor", "testName": "@xzdarcy/react-timeline-editor", - "version": "0.15.0", + "version": "0.19.0", "author": "khanzzirfan", "license": "MIT", "keywords": [ @@ -26,7 +26,7 @@ "build": "father-build", "deploy": "npm run docs:build && npm run docs:deploy", "prepublishOnly": "npm run build", - "release": "standard-version --release-as minor" + "release": "standard-version --release-as patch" }, "files": [ "dist" diff --git a/src/components/timeline.tsx b/src/components/timeline.tsx index 667530d..192e47b 100644 --- a/src/components/timeline.tsx +++ b/src/components/timeline.tsx @@ -34,6 +34,7 @@ export const Timeline = React.forwardRef((props, const domRef = useRef(); const areaRef = useRef(); const scrollSync = useRef(); + const editorDataRef = useRef(data); // 编辑器数据 const [editorData, setEditorData] = useState(data); @@ -50,10 +51,14 @@ export const Timeline = React.forwardRef((props, setEditorData(data); }, [data, minScaleCount, scale]); + useEffect(() => { + editorDataRef.current = data; + }, [data]); + useEffect(() => { interact('.timeline-editor-edit-row').dropzone({ accept: '.timeline-editor-action', - overlap: 0.65, + overlap: 0.4, ondropactivate: function (event) { // add active dropzone feedback event.target.classList.add('drop-active'); @@ -81,7 +86,8 @@ export const Timeline = React.forwardRef((props, let droppedRowData = null; let oldRowId = null; let actionData = null; - editorData.forEach((f) => { + + editorDataRef.current.forEach((f) => { const hasAction = f.actions.find((e) => e.id === actionId); if (hasAction) { oldRowId = f.id; @@ -90,10 +96,11 @@ export const Timeline = React.forwardRef((props, droppedRowData = restProps; } }); - console.log('editorData', editorData, oldRowId, rowId); + console.log('editorData', editorDataRef.current, oldRowId, rowId); if (oldRowId === rowId) return; - if (!Array.isArray(editorData)) return null; - const modifiedEditorData = editorData.map((er) => { + if (!Array.isArray(editorDataRef.current)) return null; + + const modifiedEditorData = editorDataRef.current.map((er) => { if (er.id === rowId) { const currActions = er.actions || []; const updatedActions = currActions.concat(actionData); From 6bbb9b45044318610b0658494bc0def65738dd2b Mon Sep 17 00:00:00 2001 From: khanzzirfan Date: Sat, 1 Apr 2023 23:48:57 +1100 Subject: [PATCH 18/23] chore: updated notes/docs --- docs/editor-demo/editor-basic-irfan/index.tsx | 31 ++++++++++++++++++- src/engine/engine.ts | 1 - 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/docs/editor-demo/editor-basic-irfan/index.tsx b/docs/editor-demo/editor-basic-irfan/index.tsx index 1834c74..f01bb13 100644 --- a/docs/editor-demo/editor-basic-irfan/index.tsx +++ b/docs/editor-demo/editor-basic-irfan/index.tsx @@ -13,9 +13,38 @@ const TimelineEditor = () => { console.log('data updated', data); }, [data]); + const handleOnMoveEnd = (...params) => { + console.log('actionMoveEnd', params); + }; + + const handleOnResizeEnd = (...params) => { + console.log('handleOnResizeEnd', params); + }; + + const handleOnClickRow = (...params) => { + console.log('handleOnClickRow', params); + }; + + const handleOnContextMenuRow = (...params) => { + console.log('handleOnContextMenuRow', params); + }; + return (
- +
); }; diff --git a/src/engine/engine.ts b/src/engine/engine.ts index 0d8cefd..c519b91 100644 --- a/src/engine/engine.ts +++ b/src/engine/engine.ts @@ -309,7 +309,6 @@ export class TimelineEngine extends Emitter { data.map((row) => { actions.push(...row.actions); }); - console.log('timeline data', data); const sortActions = actions.sort((a, b) => a.start - b.start); const actionMap: Record = {}; const actionSortIds: string[] = []; From 6c351919c96d3cdad41edffd72fbde7023ebb8e4 Mon Sep 17 00:00:00 2001 From: khanzzirfan Date: Thu, 6 Apr 2023 15:27:48 +1000 Subject: [PATCH 19/23] chore: removed zindex --- src/components/row_rnd/row_rnd.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/row_rnd/row_rnd.tsx b/src/components/row_rnd/row_rnd.tsx index 8128b4f..f89e938 100644 --- a/src/components/row_rnd/row_rnd.tsx +++ b/src/components/row_rnd/row_rnd.tsx @@ -419,7 +419,7 @@ export const RowDnd = React.forwardRef( ...((children as ReactElement).props.style || {}), left, width, - zIndex: 10, + // zIndex: 10, }, })} From 3c7c6a5e81354da780cb999a581eff29df518dd1 Mon Sep 17 00:00:00 2001 From: khanzzirfan Date: Sat, 20 May 2023 08:23:17 +1000 Subject: [PATCH 20/23] chore: updated action items overlapping --- CHANGELOG.md | 66 +++++++++++++++++++ .../editor-demo/editor-basic-irfan/index.less | 4 ++ package.json | 3 +- src/components/edit_area/edit_action.tsx | 4 ++ src/components/row_rnd/row_rnd.tsx | 1 + src/components/timeline.tsx | 51 +++++++++++++- src/interface/timeline.ts | 13 ++++ 7 files changed, 139 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 013129c..0978b12 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,72 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +### 0.19.2 (2023-04-06) + + +### Features + +* ✨ add cursor drag start/end props ([61b5a5e](https://github.com/khanzzirfan/react-timeline-editor/commit/61b5a5e2a0a263541d908fe82d65c3eed74851f8)) +* ✨ allow to set scrollLeft ([dcc8d1e](https://github.com/khanzzirfan/react-timeline-editor/commit/dcc8d1eade0c4c4c70976c6c8c02b5d1fc2570fe)) +* ✨ auto scroll when drag cursor ([fc55f56](https://github.com/khanzzirfan/react-timeline-editor/commit/fc55f56afb8ec0633d4e90e1e3bc7ee1aec7b790)) +* ✨ on cursor drag ([8150141](https://github.com/khanzzirfan/react-timeline-editor/commit/815014156d39eb0736c346fc270da8f5ffb6d31a)) +* fixed the row drag and drop and cursor locked to its y position ([85dbf46](https://github.com/khanzzirfan/react-timeline-editor/commit/85dbf46ca6fd12c27c0c957dcb7662dedc511c21)) + + +### Bug Fixes + +* 🐛 compatible with react18 ([de966e0](https://github.com/khanzzirfan/react-timeline-editor/commit/de966e012a7306cc492a12547638a8d494846301)) +* 🐛 cursor listen scrollLeft change ([520e4cb](https://github.com/khanzzirfan/react-timeline-editor/commit/520e4cbedf0c5a5d5063fa91d4359733105d9abd)) +* 🐛 engine example audio play ([a0f6e54](https://github.com/khanzzirfan/react-timeline-editor/commit/a0f6e54be025b688e0c9d5ed0c36b05b8fc5c788)) +* 🐛 engine example destroy error ([b2919d9](https://github.com/khanzzirfan/react-timeline-editor/commit/b2919d919e0b03fc1b2880017c12e8eabf4a502e)) +* 🐛 engine example engine reference error ([123e72e](https://github.com/khanzzirfan/react-timeline-editor/commit/123e72eb315046ab954ae591574ae2500f2f57c5)) +* 🐛 react type config ([cca5a5b](https://github.com/khanzzirfan/react-timeline-editor/commit/cca5a5b9d617de092b5b8904390a2a34c2f87822)) +* 🐛 remove 'window' to adapt for nextjs ([51904d5](https://github.com/khanzzirfan/react-timeline-editor/commit/51904d5456643e0b66e2227fe74eb6fc78f8ac20)) +* 🐛 remove not necessary dependencies ([61a115d](https://github.com/khanzzirfan/react-timeline-editor/commit/61a115dd5dcfe870a080e6915486898bae27b873)) +* 🐛 scroll sync error ([0a7b459](https://github.com/khanzzirfan/react-timeline-editor/commit/0a7b459a3bf77e9c0879528ff0956ec5163f7440)) +* **emitter:** make offAll() keep events names ([d02f2b7](https://github.com/khanzzirfan/react-timeline-editor/commit/d02f2b79017c1cb1d78465b42afb64804c8f86bf)) +* fixed bug fixes on null action items ([635ce17](https://github.com/khanzzirfan/react-timeline-editor/commit/635ce17a04bc3e60786df6b8eeba53f684354729)) +* fixed bug fixes on null action items ([7566dc8](https://github.com/khanzzirfan/react-timeline-editor/commit/7566dc8c0843ddc42f0c60fea3b6aca316d3984e)) +* fixed bug fixes on null action items ([248e9cb](https://github.com/khanzzirfan/react-timeline-editor/commit/248e9cb16a4531db7ee81f433be70b49800040e5)) +* fixed bug fixes on null action items ([0b12559](https://github.com/khanzzirfan/react-timeline-editor/commit/0b12559735cfdd670143989a0decda29576fc038)) +* fixed bug fixes on null action items ([b446a19](https://github.com/khanzzirfan/react-timeline-editor/commit/b446a19af540b37d2cc610d4ee4e1408bfecd974)) +* updated packagejson ([629a2c9](https://github.com/khanzzirfan/react-timeline-editor/commit/629a2c9c0db4f0dcbda3056131f7eadd20cdf175)) +* updated packagejson ([941743a](https://github.com/khanzzirfan/react-timeline-editor/commit/941743a179a798e27c37dd1648acb85084013027)) +* updated packagejson ([1b160c5](https://github.com/khanzzirfan/react-timeline-editor/commit/1b160c599bf120df9ee8c769f6b0c7e8a02a6617)) + +### 0.19.1 (2023-04-06) + + +### Features + +* ✨ add cursor drag start/end props ([61b5a5e](https://github.com/khanzzirfan/react-timeline-editor/commit/61b5a5e2a0a263541d908fe82d65c3eed74851f8)) +* ✨ allow to set scrollLeft ([dcc8d1e](https://github.com/khanzzirfan/react-timeline-editor/commit/dcc8d1eade0c4c4c70976c6c8c02b5d1fc2570fe)) +* ✨ auto scroll when drag cursor ([fc55f56](https://github.com/khanzzirfan/react-timeline-editor/commit/fc55f56afb8ec0633d4e90e1e3bc7ee1aec7b790)) +* ✨ on cursor drag ([8150141](https://github.com/khanzzirfan/react-timeline-editor/commit/815014156d39eb0736c346fc270da8f5ffb6d31a)) +* fixed the row drag and drop and cursor locked to its y position ([85dbf46](https://github.com/khanzzirfan/react-timeline-editor/commit/85dbf46ca6fd12c27c0c957dcb7662dedc511c21)) + + +### Bug Fixes + +* 🐛 compatible with react18 ([de966e0](https://github.com/khanzzirfan/react-timeline-editor/commit/de966e012a7306cc492a12547638a8d494846301)) +* 🐛 cursor listen scrollLeft change ([520e4cb](https://github.com/khanzzirfan/react-timeline-editor/commit/520e4cbedf0c5a5d5063fa91d4359733105d9abd)) +* 🐛 engine example audio play ([a0f6e54](https://github.com/khanzzirfan/react-timeline-editor/commit/a0f6e54be025b688e0c9d5ed0c36b05b8fc5c788)) +* 🐛 engine example destroy error ([b2919d9](https://github.com/khanzzirfan/react-timeline-editor/commit/b2919d919e0b03fc1b2880017c12e8eabf4a502e)) +* 🐛 engine example engine reference error ([123e72e](https://github.com/khanzzirfan/react-timeline-editor/commit/123e72eb315046ab954ae591574ae2500f2f57c5)) +* 🐛 react type config ([cca5a5b](https://github.com/khanzzirfan/react-timeline-editor/commit/cca5a5b9d617de092b5b8904390a2a34c2f87822)) +* 🐛 remove 'window' to adapt for nextjs ([51904d5](https://github.com/khanzzirfan/react-timeline-editor/commit/51904d5456643e0b66e2227fe74eb6fc78f8ac20)) +* 🐛 remove not necessary dependencies ([61a115d](https://github.com/khanzzirfan/react-timeline-editor/commit/61a115dd5dcfe870a080e6915486898bae27b873)) +* 🐛 scroll sync error ([0a7b459](https://github.com/khanzzirfan/react-timeline-editor/commit/0a7b459a3bf77e9c0879528ff0956ec5163f7440)) +* **emitter:** make offAll() keep events names ([d02f2b7](https://github.com/khanzzirfan/react-timeline-editor/commit/d02f2b79017c1cb1d78465b42afb64804c8f86bf)) +* fixed bug fixes on null action items ([635ce17](https://github.com/khanzzirfan/react-timeline-editor/commit/635ce17a04bc3e60786df6b8eeba53f684354729)) +* fixed bug fixes on null action items ([7566dc8](https://github.com/khanzzirfan/react-timeline-editor/commit/7566dc8c0843ddc42f0c60fea3b6aca316d3984e)) +* fixed bug fixes on null action items ([248e9cb](https://github.com/khanzzirfan/react-timeline-editor/commit/248e9cb16a4531db7ee81f433be70b49800040e5)) +* fixed bug fixes on null action items ([0b12559](https://github.com/khanzzirfan/react-timeline-editor/commit/0b12559735cfdd670143989a0decda29576fc038)) +* fixed bug fixes on null action items ([b446a19](https://github.com/khanzzirfan/react-timeline-editor/commit/b446a19af540b37d2cc610d4ee4e1408bfecd974)) +* updated packagejson ([629a2c9](https://github.com/khanzzirfan/react-timeline-editor/commit/629a2c9c0db4f0dcbda3056131f7eadd20cdf175)) +* updated packagejson ([941743a](https://github.com/khanzzirfan/react-timeline-editor/commit/941743a179a798e27c37dd1648acb85084013027)) +* updated packagejson ([1b160c5](https://github.com/khanzzirfan/react-timeline-editor/commit/1b160c599bf120df9ee8c769f6b0c7e8a02a6617)) + ## 0.19.0 (2023-04-01) diff --git a/docs/editor-demo/editor-basic-irfan/index.less b/docs/editor-demo/editor-basic-irfan/index.less index 1128e89..6b2ec18 100644 --- a/docs/editor-demo/editor-basic-irfan/index.less +++ b/docs/editor-demo/editor-basic-irfan/index.less @@ -14,6 +14,10 @@ border-color: #aaa !important; } +.collison-active { + background-color: #E0115F !important; +} + .drop-target { // background-color: #29e !important; border-color: #fff !important; diff --git a/package.json b/package.json index 82552b1..bbbbcfd 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "reacthub-timeline-editor", "testName": "@xzdarcy/react-timeline-editor", - "version": "0.19.0", + "version": "0.19.2", "author": "khanzzirfan", "license": "MIT", "keywords": [ @@ -43,6 +43,7 @@ "@types/react-virtualized": "^9.21.14", "framework-utils": "^1.1.0", "interactjs": "^1.10.11", + "react-intersection-observer": "^9.4.3", "react-virtualized": "^9.22.3" }, "devDependencies": { diff --git a/src/components/edit_area/edit_action.tsx b/src/components/edit_area/edit_action.tsx index eeae794..59d6081 100644 --- a/src/components/edit_area/edit_action.tsx +++ b/src/components/edit_area/edit_action.tsx @@ -55,6 +55,7 @@ export const EditAction: FC = ({ onDrop, }) => { const rowRnd = useRef(); + const isDragWhenClick = useRef(false); const { id, maxEnd, minStart, end, start, selected, flexible = true, movable = true, effectId } = action; @@ -157,6 +158,7 @@ export const EditAction: FC = ({ // 触发回调 if (onActionResizeEnd) onActionResizeEnd({ action, row, start, end, dir }); }; + //#endregion const nowAction = { @@ -230,6 +232,8 @@ export const EditAction: FC = ({ className={prefix((classNames || []).join(' '))} style={{ height: rowHeight }} data-testid="context-menu" + data-id="actionitem" + data-rowid={row.id} data-actionid={action?.id || 'null'} > {getActionRender && getActionRender(nowAction, nowRow)} diff --git a/src/components/row_rnd/row_rnd.tsx b/src/components/row_rnd/row_rnd.tsx index f89e938..77110fe 100644 --- a/src/components/row_rnd/row_rnd.tsx +++ b/src/components/row_rnd/row_rnd.tsx @@ -87,6 +87,7 @@ export const RowDnd = React.forwardRef( reset && (deltaY.current = 0); const target = interactable.current.target as HTMLElement; target.style.top = `${top}px`; + target.style.zIndex = `10`; Object.assign(target.dataset, { top }); }; diff --git a/src/components/timeline.tsx b/src/components/timeline.tsx index 192e47b..4841505 100644 --- a/src/components/timeline.tsx +++ b/src/components/timeline.tsx @@ -28,6 +28,8 @@ export const Timeline = React.forwardRef((props, onChange, autoReRender = true, onScroll: onScrollVertical, + onCollisionActive, + onCollisionInActive, } = checkedProps; const engineRef = useRef(new TimelineEngine()); @@ -96,7 +98,6 @@ export const Timeline = React.forwardRef((props, droppedRowData = restProps; } }); - console.log('editorData', editorDataRef.current, oldRowId, rowId); if (oldRowId === rowId) return; if (!Array.isArray(editorDataRef.current)) return null; @@ -119,7 +120,6 @@ export const Timeline = React.forwardRef((props, } return er; }); - console.log('modifiedEditorData', modifiedEditorData, oldRowId, rowId); // update actions setEditorData(modifiedEditorData); handleEditorDataChange(modifiedEditorData); @@ -137,6 +137,53 @@ export const Timeline = React.forwardRef((props, }); }, []); + useEffect(() => { + interact('div[data-id="actionitem"]').dropzone({ + accept: '.timeline-editor-action', + overlap: 0.2, + ondropactivate: function (event) { + // add active dropzone feedback + //console.log('running dropactivate collison'); + }, + + ondragenter: function (event) { + // let draggableElement = event.relatedTarget; + // let dropzoneElement = event.target; + // // feedback the possibility of a drop + const targetRowId = event.currentTarget.getAttribute('data-rowid'); + const targetActionId = event.currentTarget.getAttribute('data-actionid'); + + // const dragRowId = event.relatedTarget.getAttribute('data-rowid'); + const dragActionId = event.relatedTarget.getAttribute('data-actionid'); + if (dragActionId !== targetActionId) { + event.target.classList.add('collison-active'); + if (onCollisionActive) { + onCollisionActive(targetRowId, targetActionId, true); + } + } + // dropzoneElement.classList.add('drop-target'); + // draggableElement.classList.add('can-drop'); + // draggableElement.textContent = 'Dragged in'; + }, + ondragleave: function (event) { + // remove the drop feedback style + event.target.classList.remove('collison-active'); + if (onCollisionInActive) { + onCollisionInActive(); + } + // event.target.classList.remove('drop-target'); + // event.relatedTarget.classList.remove('can-drop'); + // event.relatedTarget.textContent = 'Dragged out'; + }, + + ondropdeactivate: function (event) { + event.stopPropagation(); + // remove active dropzone feedback + event.target.classList.remove('collison-active'); + }, + }); + }, []); + useEffect(() => { engineRef.current.effects = effects; }, [effects]); diff --git a/src/interface/timeline.ts b/src/interface/timeline.ts index 5b00510..a532f2c 100644 --- a/src/interface/timeline.ts +++ b/src/interface/timeline.ts @@ -196,6 +196,19 @@ export interface EditData { * @returns */ onDrop?: (rowId, actionId) => void; + + /** + * action item for a current collision row id and action id + * @param rowId row id dropped to + * @param actionId action item id that got dropped to a rowid + * @returns + */ + onCollisionActive?: (rowId: string, actionId: string, isCollisionActive: boolean) => void; + /** + * + * @returns when inactive collision triggered + */ + onCollisionInActive?: () => void; } export interface TimelineState { From 66ef1bc39be405f1a0d07358d1141433553f72e3 Mon Sep 17 00:00:00 2001 From: khanzzirfan Date: Sat, 20 May 2023 08:25:30 +1000 Subject: [PATCH 21/23] chore: released new version for overlapping the action items --- CHANGELOG.md | 33 +++++++++++++++++++++++++++++++++ package.json | 4 ++-- 2 files changed, 35 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0978b12..e2a4bbc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,39 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +### 0.19.3 (2023-05-19) + + +### Features + +* ✨ add cursor drag start/end props ([61b5a5e](https://github.com/khanzzirfan/react-timeline-editor/commit/61b5a5e2a0a263541d908fe82d65c3eed74851f8)) +* ✨ allow to set scrollLeft ([dcc8d1e](https://github.com/khanzzirfan/react-timeline-editor/commit/dcc8d1eade0c4c4c70976c6c8c02b5d1fc2570fe)) +* ✨ auto scroll when drag cursor ([fc55f56](https://github.com/khanzzirfan/react-timeline-editor/commit/fc55f56afb8ec0633d4e90e1e3bc7ee1aec7b790)) +* ✨ on cursor drag ([8150141](https://github.com/khanzzirfan/react-timeline-editor/commit/815014156d39eb0736c346fc270da8f5ffb6d31a)) +* fixed the row drag and drop and cursor locked to its y position ([85dbf46](https://github.com/khanzzirfan/react-timeline-editor/commit/85dbf46ca6fd12c27c0c957dcb7662dedc511c21)) + + +### Bug Fixes + +* 🐛 compatible with react18 ([de966e0](https://github.com/khanzzirfan/react-timeline-editor/commit/de966e012a7306cc492a12547638a8d494846301)) +* 🐛 cursor listen scrollLeft change ([520e4cb](https://github.com/khanzzirfan/react-timeline-editor/commit/520e4cbedf0c5a5d5063fa91d4359733105d9abd)) +* 🐛 engine example audio play ([a0f6e54](https://github.com/khanzzirfan/react-timeline-editor/commit/a0f6e54be025b688e0c9d5ed0c36b05b8fc5c788)) +* 🐛 engine example destroy error ([b2919d9](https://github.com/khanzzirfan/react-timeline-editor/commit/b2919d919e0b03fc1b2880017c12e8eabf4a502e)) +* 🐛 engine example engine reference error ([123e72e](https://github.com/khanzzirfan/react-timeline-editor/commit/123e72eb315046ab954ae591574ae2500f2f57c5)) +* 🐛 react type config ([cca5a5b](https://github.com/khanzzirfan/react-timeline-editor/commit/cca5a5b9d617de092b5b8904390a2a34c2f87822)) +* 🐛 remove 'window' to adapt for nextjs ([51904d5](https://github.com/khanzzirfan/react-timeline-editor/commit/51904d5456643e0b66e2227fe74eb6fc78f8ac20)) +* 🐛 remove not necessary dependencies ([61a115d](https://github.com/khanzzirfan/react-timeline-editor/commit/61a115dd5dcfe870a080e6915486898bae27b873)) +* 🐛 scroll sync error ([0a7b459](https://github.com/khanzzirfan/react-timeline-editor/commit/0a7b459a3bf77e9c0879528ff0956ec5163f7440)) +* **emitter:** make offAll() keep events names ([d02f2b7](https://github.com/khanzzirfan/react-timeline-editor/commit/d02f2b79017c1cb1d78465b42afb64804c8f86bf)) +* fixed bug fixes on null action items ([635ce17](https://github.com/khanzzirfan/react-timeline-editor/commit/635ce17a04bc3e60786df6b8eeba53f684354729)) +* fixed bug fixes on null action items ([7566dc8](https://github.com/khanzzirfan/react-timeline-editor/commit/7566dc8c0843ddc42f0c60fea3b6aca316d3984e)) +* fixed bug fixes on null action items ([248e9cb](https://github.com/khanzzirfan/react-timeline-editor/commit/248e9cb16a4531db7ee81f433be70b49800040e5)) +* fixed bug fixes on null action items ([0b12559](https://github.com/khanzzirfan/react-timeline-editor/commit/0b12559735cfdd670143989a0decda29576fc038)) +* fixed bug fixes on null action items ([b446a19](https://github.com/khanzzirfan/react-timeline-editor/commit/b446a19af540b37d2cc610d4ee4e1408bfecd974)) +* updated packagejson ([629a2c9](https://github.com/khanzzirfan/react-timeline-editor/commit/629a2c9c0db4f0dcbda3056131f7eadd20cdf175)) +* updated packagejson ([941743a](https://github.com/khanzzirfan/react-timeline-editor/commit/941743a179a798e27c37dd1648acb85084013027)) +* updated packagejson ([1b160c5](https://github.com/khanzzirfan/react-timeline-editor/commit/1b160c599bf120df9ee8c769f6b0c7e8a02a6617)) + ### 0.19.2 (2023-04-06) diff --git a/package.json b/package.json index bbbbcfd..f928daa 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "reacthub-timeline-editor", "testName": "@xzdarcy/react-timeline-editor", - "version": "0.19.2", + "version": "0.19.3", "author": "khanzzirfan", "license": "MIT", "keywords": [ @@ -26,7 +26,7 @@ "build": "father-build", "deploy": "npm run docs:build && npm run docs:deploy", "prepublishOnly": "npm run build", - "release": "standard-version --release-as patch" + "release": "standard-version --release-as patch &&npm publish" }, "files": [ "dist" From 61f29efe58dd26ff05aee6a820ceb9d5d8ecdaab Mon Sep 17 00:00:00 2001 From: khanzzirfan Date: Sat, 8 Jul 2023 22:55:57 +1000 Subject: [PATCH 22/23] fix:overlap percentage moved down to 0.01 --- src/components/timeline.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/timeline.tsx b/src/components/timeline.tsx index 4841505..078811a 100644 --- a/src/components/timeline.tsx +++ b/src/components/timeline.tsx @@ -140,7 +140,7 @@ export const Timeline = React.forwardRef((props, useEffect(() => { interact('div[data-id="actionitem"]').dropzone({ accept: '.timeline-editor-action', - overlap: 0.2, + overlap: 0.01, ondropactivate: function (event) { // add active dropzone feedback //console.log('running dropactivate collison'); From ed1522f649b74cfa0a93706bce9931bb468600dd Mon Sep 17 00:00:00 2001 From: Irfan Khan Date: Sat, 16 Sep 2023 15:38:40 +1000 Subject: [PATCH 23/23] fix: updated timeline editor --- CHANGELOG.md | 33 +++++++++++++++++++++++++++++++++ package.json | 5 +++-- 2 files changed, 36 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e2a4bbc..31562df 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,39 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +### 0.19.4 (2023-07-08) + + +### Features + +* ✨ add cursor drag start/end props ([61b5a5e](https://github.com/khanzzirfan/react-timeline-editor/commit/61b5a5e2a0a263541d908fe82d65c3eed74851f8)) +* ✨ allow to set scrollLeft ([dcc8d1e](https://github.com/khanzzirfan/react-timeline-editor/commit/dcc8d1eade0c4c4c70976c6c8c02b5d1fc2570fe)) +* ✨ auto scroll when drag cursor ([fc55f56](https://github.com/khanzzirfan/react-timeline-editor/commit/fc55f56afb8ec0633d4e90e1e3bc7ee1aec7b790)) +* ✨ on cursor drag ([8150141](https://github.com/khanzzirfan/react-timeline-editor/commit/815014156d39eb0736c346fc270da8f5ffb6d31a)) +* fixed the row drag and drop and cursor locked to its y position ([85dbf46](https://github.com/khanzzirfan/react-timeline-editor/commit/85dbf46ca6fd12c27c0c957dcb7662dedc511c21)) + + +### Bug Fixes + +* 🐛 compatible with react18 ([de966e0](https://github.com/khanzzirfan/react-timeline-editor/commit/de966e012a7306cc492a12547638a8d494846301)) +* 🐛 cursor listen scrollLeft change ([520e4cb](https://github.com/khanzzirfan/react-timeline-editor/commit/520e4cbedf0c5a5d5063fa91d4359733105d9abd)) +* 🐛 engine example audio play ([a0f6e54](https://github.com/khanzzirfan/react-timeline-editor/commit/a0f6e54be025b688e0c9d5ed0c36b05b8fc5c788)) +* 🐛 engine example destroy error ([b2919d9](https://github.com/khanzzirfan/react-timeline-editor/commit/b2919d919e0b03fc1b2880017c12e8eabf4a502e)) +* 🐛 engine example engine reference error ([123e72e](https://github.com/khanzzirfan/react-timeline-editor/commit/123e72eb315046ab954ae591574ae2500f2f57c5)) +* 🐛 react type config ([cca5a5b](https://github.com/khanzzirfan/react-timeline-editor/commit/cca5a5b9d617de092b5b8904390a2a34c2f87822)) +* 🐛 remove 'window' to adapt for nextjs ([51904d5](https://github.com/khanzzirfan/react-timeline-editor/commit/51904d5456643e0b66e2227fe74eb6fc78f8ac20)) +* 🐛 remove not necessary dependencies ([61a115d](https://github.com/khanzzirfan/react-timeline-editor/commit/61a115dd5dcfe870a080e6915486898bae27b873)) +* 🐛 scroll sync error ([0a7b459](https://github.com/khanzzirfan/react-timeline-editor/commit/0a7b459a3bf77e9c0879528ff0956ec5163f7440)) +* **emitter:** make offAll() keep events names ([d02f2b7](https://github.com/khanzzirfan/react-timeline-editor/commit/d02f2b79017c1cb1d78465b42afb64804c8f86bf)) +* fixed bug fixes on null action items ([635ce17](https://github.com/khanzzirfan/react-timeline-editor/commit/635ce17a04bc3e60786df6b8eeba53f684354729)) +* fixed bug fixes on null action items ([7566dc8](https://github.com/khanzzirfan/react-timeline-editor/commit/7566dc8c0843ddc42f0c60fea3b6aca316d3984e)) +* fixed bug fixes on null action items ([248e9cb](https://github.com/khanzzirfan/react-timeline-editor/commit/248e9cb16a4531db7ee81f433be70b49800040e5)) +* fixed bug fixes on null action items ([0b12559](https://github.com/khanzzirfan/react-timeline-editor/commit/0b12559735cfdd670143989a0decda29576fc038)) +* fixed bug fixes on null action items ([b446a19](https://github.com/khanzzirfan/react-timeline-editor/commit/b446a19af540b37d2cc610d4ee4e1408bfecd974)) +* updated packagejson ([629a2c9](https://github.com/khanzzirfan/react-timeline-editor/commit/629a2c9c0db4f0dcbda3056131f7eadd20cdf175)) +* updated packagejson ([941743a](https://github.com/khanzzirfan/react-timeline-editor/commit/941743a179a798e27c37dd1648acb85084013027)) +* updated packagejson ([1b160c5](https://github.com/khanzzirfan/react-timeline-editor/commit/1b160c599bf120df9ee8c769f6b0c7e8a02a6617)) + ### 0.19.3 (2023-05-19) diff --git a/package.json b/package.json index f928daa..5200e5d 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,8 @@ { - "name": "reacthub-timeline-editor", + "name": "@xzdarcy/react-timeline-editor", "testName": "@xzdarcy/react-timeline-editor", - "version": "0.19.3", + "publishname": "reacthub-timeline-editor", + "version": "0.19.4", "author": "khanzzirfan", "license": "MIT", "keywords": [