Skip to content

Commit

Permalink
feat: add waitToChangeTarget method #714
Browse files Browse the repository at this point in the history
  • Loading branch information
@daybrush
daybrush committed Aug 5, 2022
1 parent 70f49ee commit 8e6c534
Show file tree
Hide file tree
Showing 6 changed files with 54 additions and 30 deletions.
6 changes: 5 additions & 1 deletion packages/react-moveable/src/react-moveable/MoveableGroup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ class MoveableGroup extends MoveableManager<GroupableProps> {
public transformOrigin = "50% 50%";

public checkUpdate() {
this._isPropTargetChanged = false;
this.updateAbles();
}

Expand Down Expand Up @@ -240,10 +241,13 @@ class MoveableGroup extends MoveableManager<GroupableProps> {
state.container = props.container;
}
const { added, changed, removed } = this.differ.update(props.targets!);

const isTargetChanged = added.length || removed.length;

if (isContainerChanged || added.length || changed.length || removed.length) {
if (isContainerChanged || isTargetChanged || changed.length) {
this.updateRect();
}
this._isPropTargetChanged = !!isTargetChanged;
}
protected _updateObserver() {}
}
Expand Down
52 changes: 44 additions & 8 deletions packages/react-moveable/src/react-moveable/MoveableManager.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,8 @@ export default class MoveableManager<T = {}>
protected _emitter: EventEmitter = new EventEmitter();
protected _prevTarget: HTMLElement | SVGElement | null | undefined = null;
protected _prevDragArea = false;
protected _onChangetarget: (() => void) | null = null;
protected _isPropTargetChanged = false;

private _observer: ResizeObserver | null = null;
private _observerId = 0;
Expand Down Expand Up @@ -135,7 +137,7 @@ export default class MoveableManager<T = {}>
className={`${prefix("control-box", direction === -1
? "reverse" : "", isDragging ? "dragging" : "")} ${className}`}
{...ableAttributes}
onClick={this.onPreventClick}
onClick={this._onPreventClick}
portalContainer={portalContainer}
style={{
"position": hasFixed ? "fixed" : "absolute",
Expand Down Expand Up @@ -171,6 +173,10 @@ export default class MoveableManager<T = {}>
this._updateTargets();
this.updateCheckInput();
this._updateObserver(prevProps);

if (this._isPropTargetChanged) {
this._onChangetarget?.();
}
}
public componentWillUnmount() {
this.isUnmounted = true;
Expand Down Expand Up @@ -579,6 +585,7 @@ export default class MoveableManager<T = {}>
];
}
public checkUpdate() {
this._isPropTargetChanged = false;
const { target, container, parentMoveable } = this.props;
const {
target: stateTarget,
Expand All @@ -590,7 +597,8 @@ export default class MoveableManager<T = {}>
}
this.updateAbles();

const isChanged = !equals(stateTarget, target) || !equals(stateContainer, container);
const isTargetChanged = !equals(stateTarget, target);
const isChanged = isTargetChanged || !equals(stateContainer, container);

if (!isChanged) {
return;
Expand All @@ -605,6 +613,34 @@ export default class MoveableManager<T = {}>
if (!parentMoveable && moveableContainer) {
this.updateRect("End", false, false);
}
this._isPropTargetChanged = isTargetChanged;
}
/**
* User changes target and waits for target to change.
* @method Moveable#waitToChangeTarget
* @example
* import Moveable from "moveable";
*
* const moveable = new Moveable(document.body);
*
* document.querySelector(".target").addEventListener("mousedown", e => {
* moveable.waitToChangeTarget().then(() => {
* moveable.dragStart(e.currentTarget);
* });
* moveable.target = e.currentTarget;
* });
*/
public waitToChangeTarget(): Promise<void> {
let resolvePromise: () => void;

this._onChangetarget = () => {
this._onChangetarget = null;
resolvePromise();
};

return new Promise<void>(resolve => {
resolvePromise = resolve;
});
}
public triggerEvent(name: string, e: any): any {
this._emitter.trigger(name, e);
Expand All @@ -622,11 +658,6 @@ export default class MoveableManager<T = {}>
}
return customStyleMap[key];
}
public onPreventClick = (e: any) => {
e.stopPropagation();
e.preventDefault();
// removeEvent(window, "click", this.onPreventClick, true);
}
public checkUpdateRect = () => {
if (this.isDragging()) {
return;
Expand Down Expand Up @@ -738,7 +769,7 @@ export default class MoveableManager<T = {}>
const props = this.props;
const target = props.dragTarget || props.target;
const isUnset = (!hasTargetAble && this.targetGesto)
|| this._isTargetChanged(true);
|| this._isTargetChanged(true);

if (isUnset) {
unset(this, "targetGesto");
Expand Down Expand Up @@ -787,6 +818,11 @@ export default class MoveableManager<T = {}>
return renderLine(Renderer, "", renderPoses[from], renderPoses[to], zoom!, i);
});
}
private _onPreventClick = (e: any) => {
e.stopPropagation();
e.preventDefault();
// removeEvent(window, "click", this._onPreventClick, true);
}
private _isTargetChanged(useDragArea?: boolean) {
const props = this.props;
const target = props.dragTarget || props.target;
Expand Down
1 change: 1 addition & 0 deletions packages/react-moveable/src/react-moveable/consts.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,4 +223,5 @@ export const MOVEABLE_METHODS: Array<keyof MoveableInterface> = [
"isDragging",
"getManager",
"forceUpdate",
"waitToChangeTarget",
];
1 change: 0 additions & 1 deletion packages/react-moveable/src/react-moveable/gesto/getAbleGesto.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,6 @@ export function triggerAble(
let isForceEnd = false;

// end ables
console.log(isDragStop);
if (isStart && (isDragStop || (eventAbles.length && !isUpdate))) {
isForceEnd = isDragStop || eventAbles.filter(able => {
const ableName = able.name;
Expand Down
2 changes: 1 addition & 1 deletion packages/react-moveable/src/react-moveable/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2673,7 +2673,6 @@ export interface MoveableManagerInterface<T = {}, U = {}> extends MoveableInterf
getContainer(): HTMLElement | SVGElement;
getRotation(): number;
triggerEvent(name: string, params: IObject<any>, isManager?: boolean): any;
onPreventClick(e: any): void;
}
export interface MoveableGroupInterface<T = {}, U = {}> extends MoveableManagerInterface<T, U> {
moveables: MoveableManagerInterface[];
Expand All @@ -2695,6 +2694,7 @@ export interface MoveableInterface {
isDragging(): boolean;
hitTest(el: Element | HitRect): number;
setState(state: any, callback?: () => any): any;
waitToChangeTarget(): Promise<void>;
forceUpdate(callback?: () => any): any;
}

Expand Down
22 changes: 3 additions & 19 deletions packages/react-moveable/stories/9A-Components/apps/ReactSelectoApp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import "./cube.css";

export default function App() {
const [targets, setTargets] = React.useState<Array<SVGElement | HTMLElement>>([]);
const [frameMap] = React.useState(() => new Map());
const moveableRef = React.useRef<Moveable>(null);
const selectoRef = React.useRef<Selecto>(null);
const cubes = [];
Expand All @@ -27,20 +26,6 @@ export default function App() {
onDrag={e => {
e.target.style.transform = e.transform;
}}
onDragGroupStart={e => {
e.events.forEach(ev => {
const target = ev.target;

if (!frameMap.has(target)) {
frameMap.set(target, {
translate: [0, 0],
});
}
const frame = frameMap.get(target);

ev.set(frame.translate);
});
}}
onDragGroup={e => {
e.events.forEach(ev => {
ev.target.style.transform = ev.transform;
Expand Down Expand Up @@ -68,15 +53,14 @@ export default function App() {
}}
onSelectEnd={e => {
const moveable = moveableRef.current!;
setTargets(e.selected);

if (e.isDragStart) {
e.inputEvent.preventDefault();

setTimeout(() => {
moveable.dragStart(e.inputEvent);
moveable.waitToChangeTarget().then(() => {
moveable.dragStart(e.inputEvent)
});
}
setTargets(e.selected);
}}
></Selecto>

Expand Down

0 comments on commit 8e6c534

Please sign in to comment.