Skip to content

Commit

Permalink
fix: fix groups' setMin, setMax and ratio
Browse files Browse the repository at this point in the history
  • Loading branch information
@daybrush
daybrush committed Jun 9, 2022
1 parent 0aa9869 commit 0e2abf1
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 25 deletions.
119 changes: 95 additions & 24 deletions packages/react-moveable/src/react-moveable/ables/Resizable.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,9 +81,9 @@ export default {
const {
inputEvent,
isPinch,
isGroup,
parentDirection,
datas,
parentFlag,
} = e;

const direction = parentDirection || (isPinch ? [0, 0] : getDirection(inputEvent.target));
Expand Down Expand Up @@ -112,7 +112,7 @@ export default {
datas.minSize = padding;
datas.maxSize = [Infinity, Infinity];

if (!parentFlag) {
if (!isGroup) {
const style = getComputedStyle(target);

const {
Expand Down Expand Up @@ -170,36 +170,40 @@ export default {
datas.fixedDirection = fixedDirection;
datas.fixedPosition = getPosByDirection(datas.startPositions, fixedDirection);
}
function setMin(minSize: Array<string | number>) {
datas.minSize = [
convertUnitSize(`${minSize[0]}`, 0) || 0,
convertUnitSize(`${minSize[1]}`, 0) || 0,
];
}
function setMax(maxSize: Array<string | number>) {
const nextMaxSize = [
maxSize[0] || Infinity,
maxSize[1] || Infinity,
];
if (!isNumber(nextMaxSize[0]) || isFinite(nextMaxSize[0])) {
nextMaxSize[0] = convertUnitSize(`${nextMaxSize[0]}`, 0) || Infinity;
}
if (!isNumber(nextMaxSize[1]) || isFinite(nextMaxSize[1])) {
nextMaxSize[1] = convertUnitSize(`${nextMaxSize[1]}`, 0) || Infinity;
}
datas.maxSize = nextMaxSize;
}

setRatio(width / height);
setFixedDirection([-direction[0], -direction[1]]);

datas.setFixedDirection = setFixedDirection;
datas.setMin = setMin;
datas.setMax = setMax;
const params = fillParams<OnResizeStart>(moveable, e, {
direction,
set: ([startWidth, startHeight]: number[]) => {
datas.startWidth = startWidth;
datas.startHeight = startHeight;
},
setMin: (minSize: Array<string | number>) => {
datas.minSize = [
convertUnitSize(`${minSize[0]}`, 0) || 0,
convertUnitSize(`${minSize[1]}`, 0) || 0,
];
},
setMax: (maxSize: Array<string | number>) => {
const nextMaxSize = [
maxSize[0] || Infinity,
maxSize[1] || Infinity,
];
if (!isNumber(nextMaxSize[0]) || isFinite(nextMaxSize[0])) {
nextMaxSize[0] = convertUnitSize(`${nextMaxSize[0]}`, 0) || Infinity;
}
if (!isNumber(nextMaxSize[1]) || isFinite(nextMaxSize[1])) {
nextMaxSize[1] = convertUnitSize(`${nextMaxSize[1]}`, 0) || Infinity;
}
datas.maxSize = nextMaxSize;
},
setMin,
setMax,
setRatio,
setFixedDirection,
setOrigin: (origin: Array<string | number>) => {
Expand Down Expand Up @@ -385,7 +389,7 @@ export default {
[boundingWidth, boundingHeight],
minSize,
maxSize,
ratio,
keepRatio ? ratio : false,
);
computeSize();

Expand Down Expand Up @@ -484,7 +488,7 @@ export default {
dragGroupControlCondition: directionCondition,
dragGroupControlStart(moveable: MoveableGroupInterface<any, any>, e: any) {
const { datas } = e;
const params = this.dragControlStart(moveable, e);
const params = this.dragControlStart(moveable, {...e, isGroup: true });

if (!params) {
return false;
Expand All @@ -506,6 +510,48 @@ export default {

return ev;
}
const {
startOffsetWidth: parentStartOffsetWidth,
startOffsetHeight: parentStartOffsetHeight,
} = datas;

function updateGroupMin() {
const originalMinSize = datas.minSize;
originalEvents.forEach(ev => {
const {
minSize: childMinSize,
startOffsetWidth: childStartOffsetWidth,
startOffsetHeight: childStartOffsetHeight,
} = ev.datas;

const parentMinWidth = parentStartOffsetWidth
* (childStartOffsetWidth ? childMinSize[0] / childStartOffsetWidth : 0);
const parentMinHeight = parentStartOffsetHeight
* (childStartOffsetHeight ? childMinSize[1] / childStartOffsetHeight : 0);

originalMinSize[0] = Math.max(originalMinSize[0], parentMinWidth);
originalMinSize[1] = Math.max(originalMinSize[1], parentMinHeight);
});
}

function updateGroupMax() {
const originalMaxSize = datas.maxSize;
originalEvents.forEach(ev => {
const {
maxSize: childMaxSize,
startOffsetWidth: childStartOffsetWidth,
startOffsetHeight: childStartOffsetHeight,
} = ev.datas;

const parentMaxWidth = parentStartOffsetWidth
* (childStartOffsetWidth ? childMaxSize[0] / childStartOffsetWidth : 0);
const parentMaxHeight = parentStartOffsetHeight
* (childStartOffsetHeight ? childMaxSize[1] / childStartOffsetHeight : 0);

originalMaxSize[0] = Math.min(originalMaxSize[0], parentMaxWidth);
originalMaxSize[1] = Math.min(originalMaxSize[1], parentMaxHeight);
});
}
const events = triggerChildAbles(
moveable,
this,
Expand All @@ -515,6 +561,11 @@ export default {
return setDist(child, ev);
},
);


updateGroupMin();
updateGroupMax();

const setFixedDirection = (fixedDirection: number[]) => {
params.setFixedDirection(fixedDirection);
events.forEach((ev, i) => {
Expand All @@ -528,8 +579,28 @@ export default {
const nextParams: OnResizeGroupStart = {
...params,
targets: moveable.props.targets!,
events,
events: events.map(ev => {
return {
...ev,
setMin: (minSize: Array<number | string>) => {
ev.setMin(minSize);
updateGroupMin();
},
setMax: (maxSize: Array<number | string>) => {
ev.setMax(maxSize);
updateGroupMax();
},
};
}),
setFixedDirection,
setMin: (minSize: Array<number | string>) => {
params.setMin(minSize);
updateGroupMin();
},
setMax: (maxSize: Array<number | string>) => {
params.setMax(maxSize);
updateGroupMax();
},
};
const result = triggerEvent(moveable, "onResizeGroupStart", nextParams);

Expand Down
5 changes: 4 additions & 1 deletion packages/react-moveable/stories/3-Group/apps/ReactDraggableResizableRotatableApp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@ import Moveable from "@/react-moveable";
export default function App(props: Record<string, any>) {
return <div className="container">
<div className="target target1">Target1</div>
<div className="target target2">Target2</div>
<div className="target target2" style={{
minWidth: "50px",
minHeight: "50px",
}}>Target2</div>
<div className="target target3">Target3</div>
<Moveable
target={".target"}
Expand Down

0 comments on commit 0e2abf1

Please sign in to comment.