Skip to content

Commit

Permalink
feat: add style, cssText, afterTransform properties
Browse files Browse the repository at this point in the history
  • Loading branch information
@daybrush
daybrush committed Jul 24, 2022
1 parent d473ffa commit 68b4a92
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 45 deletions.
78 changes: 47 additions & 31 deletions packages/react-moveable/src/react-moveable/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@ export interface MatrixInfo {
export type MoveableManagerState<T = {}> = {
container: SVGElement | HTMLElement | null | undefined;
disableNativeEvent: boolean;
gesto: Gesto | CustomGesto | null;
gestos: Record<string, Gesto | CustomGesto | null>;
renderPoses: number[][];
} & MoveableTargetInfo & T;

Expand Down Expand Up @@ -418,10 +418,10 @@ export interface Able<Props extends IObject<any> = IObject<any>, Events extends
render?(moveable: any, renderer: Renderer): any;

// Operates when a drag event occurs for the single target.
dragStart?(moveable: any, e: GestoTypes.OnDragStart): any;
drag?(moveable: any, e: GestoTypes.OnDrag): any;
dragEnd?(moveable: any, e: GestoTypes.OnDragEnd): any;
dragAfter?(moveable: any, e: GestoTypes.OnDrag): any;
dragStart?(moveable: any, e: any): any;
drag?(moveable: any, e: any): any;
dragEnd?(moveable: any, e: any): any;
dragAfter?(moveable: any, e: any): any;

// Operates when a pinch event occurs for the single target.
pinchStart?(moveable: any, e: GestoTypes.OnPinchStart): any;
Expand All @@ -431,17 +431,17 @@ export interface Able<Props extends IObject<any> = IObject<any>, Events extends
// Condition that occurs dragControl
dragControlCondition?(moveable: any, e: any): boolean;
// Operates when a drag event occurs for the moveable control and single target.
dragControlStart?(moveable: any, e: GestoTypes.OnDragStart): any;
dragControl?(moveable: any, e: GestoTypes.OnDrag): any;
dragControlEnd?(moveable: any, e: GestoTypes.OnDragEnd): any;
dragControlAfter?(moveable: any, e: GestoTypes.OnDrag): any;
dragControlStart?(moveable: any, e: any): any;
dragControl?(moveable: any, e: any): any;
dragControlEnd?(moveable: any, e: any): any;
dragControlAfter?(moveable: any, e: any): any;

// Condition that occurs dragGroup
dragGroupCondition?(moveable: any, e: any): boolean;
// Operates when a drag event occurs for the multi target.
dragGroupStart?(moveable: any, e: GestoTypes.OnDragStart): any;
dragGroup?(moveable: any, e: GestoTypes.OnDrag): any;
dragGroupEnd?(moveable: any, e: GestoTypes.OnDragEnd): any;
dragGroupStart?(moveable: any, e: any): any;
dragGroup?(moveable: any, e: any): any;
dragGroupEnd?(moveable: any, e: any): any;

// Operates when a pinch event occurs for the multi target.
pinchGroupStart?(moveable: any, e: GestoTypes.OnPinchStart): any;
Expand All @@ -452,9 +452,9 @@ export interface Able<Props extends IObject<any> = IObject<any>, Events extends
dragGroupControlCondition?(moveable: any, e: any): boolean;

// Operates when a drag event occurs for the moveable control and multi target.
dragGroupControlStart?(moveable: any, e: GestoTypes.OnDragStart): any;
dragGroupControl?(moveable: any, e: GestoTypes.OnDragStart): any;
dragGroupControlEnd?(moveable: any, e: GestoTypes.OnDragEnd): any;
dragGroupControlStart?(moveable: any, e: any): any;
dragGroupControl?(moveable: any, e: any): any;
dragGroupControlEnd?(moveable: any, e: any): any;

// mouse enter event
mouseEnter?(moveable: any, e: any): any;
Expand Down Expand Up @@ -541,13 +541,24 @@ export interface OnTransformStartEvent {
* @memberof Moveable
* @extends Moveable.CSSObject
*/
export interface OnTransformEvent extends CSSObject {
export interface TransformObject extends CSSObject {
/**
* a target's next transform string value.
*/
transform: string;
/**
* transform events causes a `drag` event.
* A transform obtained by the simultaneous occurrence of other events in the current event
*/
afterTransform: string;
}
/**
* @typedef
* @memberof Moveable
* @extends Moveable.TransformObject
*/
export interface OnTransformEvent extends TransformObject {
/**
* transform events causes a `drag` event. In some events, there may be no value.
*/
drag: OnDrag;
}
Expand Down Expand Up @@ -622,6 +633,7 @@ export interface OnDragStart extends OnEvent, OnTransformStartEvent {
* @typedef
* @memberof Moveable.Draggable
* @extends Moveable.OnEvent
* @extends Moveable.CSSObject
* @property - The delta of [left, top]
* @property - The distance of [left, top]
* @property - The position of [left, top]
Expand All @@ -637,7 +649,7 @@ export interface OnDragStart extends OnEvent, OnTransformStartEvent {
* @property - a target's right
* @property - Whether or not it is being pinched.
*/
export interface OnDrag extends OnEvent {
export interface OnDrag extends OnEvent, CSSObject {
beforeDelta: number[];
beforeDist: number[];
beforeTranslate: number[];
Expand Down Expand Up @@ -919,9 +931,9 @@ export interface CSSObject {
* @typedef
* @memberof Moveable.Resizable
* @extends Moveable.OnEvent
* @extends Moveable.CSSObject
* @extends Moveable.OnTransformEvent
*/
export interface OnResize extends OnEvent, CSSObject {
export interface OnResize extends OnEvent, OnTransformEvent {
/**
* The direction of resize.
*/
Expand Down Expand Up @@ -966,10 +978,6 @@ export interface OnResize extends OnEvent, CSSObject {
* Whether or not it is being pinched.
*/
isPinch: boolean;
/**
* resize causes a `drag` event.
*/
drag: OnDrag;
}
/**
* @typedef
Expand Down Expand Up @@ -998,6 +1006,10 @@ export interface OnRotateStart extends OnEvent, OnTransformStartEvent {
* rotate causes a `dragStart` event.
*/
dragStart: OnDragStart | false;
/**
* rotate causes a `resizeStart` event.
*/
resizeStart: OnResizeStart | false;
}
/**
* @typedef
Expand Down Expand Up @@ -1032,7 +1044,7 @@ export interface OnBeforeRotate extends OnEvent {
* @extends Moveable.OnEvent
* @extends Moveable.OnTransformEvent
*/
export interface OnRotate extends OnEvent {
export interface OnRotate extends OnEvent, OnTransformEvent {
/**
* The distance of rotation degree before transform is applied
*/
Expand Down Expand Up @@ -1084,18 +1096,14 @@ export interface OnRotate extends OnEvent {
* The now client rotation degree
*/
absoluteRotation: number;
/**
* a target's transform
*/
transform: string;
/**
* Whether or not it is being pinched.
*/
isPinch: boolean;
/**
* rotate causes a `drag` event.
* rotate causes a `resize` event.
*/
drag: OnDrag;
resize?: OnResize;
}
/**
* @typedef
Expand Down Expand Up @@ -1793,6 +1801,7 @@ export interface ResizableEvents {
export interface ResizableProps extends ResizableOptions, EventInterface<ResizableEvents> {
}


/**
* @typedef
* @memberof Moveable.Scalable
Expand Down Expand Up @@ -1914,11 +1923,17 @@ export interface RotatableOptions extends RenderDirections {
* @default 0
*/
rotateAroundControls?: boolean;
/**
* Sets the control that will cause resize along with rotate. (Only Single Target, Only resizable, Beta)
* @default null
*/
resolveAblesWithRotatable?: Record<string, LineDirection[]> | null | undefined;
/**
* throttle of angle(degree) when rotate.
* @default 0
*/
throttleRotate?: number;

/**
* Set additional rotationTargets.
* @default null
Expand Down Expand Up @@ -2565,6 +2580,7 @@ export interface MoveableGroupInterface<T = {}, U = {}> extends MoveableManagerI
export interface MoveableInterface {
getManager(): MoveableManagerInterface<any, any>;
getRect(): RectInfo;
getAble<T extends Able>(ableName: string): T | undefined;
isMoveableElement(target: Element): boolean;
updateRect(type?: "Start" | "" | "End", isTarget?: boolean, isSetState?: boolean): void;
updateTarget(): void;
Expand Down
70 changes: 56 additions & 14 deletions packages/react-moveable/src/react-moveable/utils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ import {
import {
MoveableManagerState, Able, MoveableClientRect,
MoveableProps, ArrayFormat, MoveableRefType,
MatrixInfo, ExcludeEndParams, ExcludeParams, ElementSizes, MoveablePosition,
MatrixInfo, ExcludeEndParams, ExcludeParams,
ElementSizes, MoveablePosition, TransformObject,
} from "./types";
import { parse, toMat, calculateMatrixDist, parseMat } from "css-to-mat";
import { getDragDist } from "./gesto/GestoUtils";
Expand Down Expand Up @@ -312,6 +313,7 @@ export function getMatrixStackInfo(

// convert 3 to 4
const length = matrix.length;

if (!is3d && length === 16) {
is3d = true;
n = 4;
Expand Down Expand Up @@ -661,6 +663,22 @@ export function getSVGOffset(
}
return offset.map(p => Math.round(p));
}

export function calculateMoveableClientPositions(
rootMatrix: number[],
poses: number[][],
rootClientRect: MoveableClientRect,
) {
const is3d = rootMatrix.length === 16;
const n = is3d ? 4 : 3;
const rootPoses = poses.map(pos => calculatePosition(rootMatrix, pos, n));
const { left, top } = rootClientRect;

return rootPoses.map(pos => {
return [pos[0] + left, pos[1] + top];
});

}
export function calculateMoveablePosition(
matrix: number[],
origin: number[],
Expand Down Expand Up @@ -1004,6 +1022,23 @@ export function fillCSSObject(style: Record<string, any>) {
cssText: getKeys(style).map(name => `${name}: ${style[name]};`).join(""),
};
}
export function fillAfterTransform(
prevEvent: { style: Record<string, string>, transform: string },
nextEvent: { style: Record<string, string>, transform: string, afterTransform?: string },
): TransformObject {
const afterTransform = nextEvent.afterTransform || nextEvent.transform;

return {
...fillCSSObject({
...prevEvent.style,
...nextEvent.style,
transform: afterTransform,
}),
afterTransform,
transform: prevEvent.transform,
};

}
export function fillParams<T extends IObject<any>>(
moveable: any,
e: any,
Expand Down Expand Up @@ -1453,10 +1488,19 @@ export function getOffsetSizeDist(
parentDistance,
parentDist,
parentScale,
isPinch,
} = e;
const startFixedDirection = datas.fixedDirection;
const directionsDists = [0, 1].map(index => {
return Math.abs(sizeDirection[index] - startFixedDirection[index]);
});
const directionRatios = [0, 1].map(index => {
let dist = directionsDists[index];

if (dist !== 0) {
dist = 2 / dist;
}
return dist;
});
if (parentDist) {
distWidth = parentDist[0];
distHeight = parentDist[1];
Expand All @@ -1471,22 +1515,20 @@ export function getOffsetSizeDist(
} else if (parentScale) {
distWidth = (parentScale[0] - 1) * startOffsetWidth;
distHeight = (parentScale[1] - 1) * startOffsetHeight;
} else if (isPinch) {
if (parentDistance) {
distWidth = parentDistance;
distHeight = parentDistance * startOffsetHeight / startOffsetWidth;
}
} else if (parentDistance) {
const scaleX = startOffsetWidth * directionsDists[0];
const scaleY = startOffsetHeight * directionsDists[1];
const ratioDistance = getDistSize([scaleX, scaleY]);

distWidth = parentDistance / ratioDistance * scaleX * directionRatios[0];
distHeight = parentDistance / ratioDistance * scaleY * directionRatios[1];
} else {
let dist = getDragDist({ datas, distX, distY });

dist = [0, 1].map(index => {
let directionRatio = Math.abs(sizeDirection[index] - startFixedDirection[index]);

if (directionRatio !== 0) {
directionRatio = 2 / directionRatio;
}
return dist[index] * directionRatio;
dist = directionRatios.map((ratio, i) => {
return dist[i] * ratio;
});

[distWidth, distHeight] = getSizeDistByDist(
[startOffsetWidth, startOffsetHeight],
dist,
Expand Down

0 comments on commit 68b4a92

Please sign in to comment.