Skip to content

Commit

Permalink
refactor: fix for size snap and resize for [0, 0] #141 #142 #172 #173 (…
Browse files Browse the repository at this point in the history 
…#177)

#141 #142 #172 #173 #179
* fix: fix snap directions

* fix: fix sizeDist for otherDirections

* refactor: fix resizable snap

* refactor: remove checkOneWayDist

* refactor: fix one way resize snap

* refactor: fix snap resize for keepRatio

* refactor: snap resize for [0, 0]

* fix: fix two way direction

* feat: add requestSigns

* fix: fix request snap

* fix: fix request for no request

* fix: fix resize snap for request

* fix: fix snap for scale

* fix: fix size snap for shake problem

* feat: add isDisplaySnapDigit props

* fix: fix package script

* feat: add innerBounds props #172

* feat: add innerBounds feature #172

* feat: add innerBounds feature #172

* fix: fix innerBounds' direction

* fix: fix innerBounds' size offset

* fix: fix bounds for fixed position

* fix: fix parseFloat

* feat: add innerBounds for drag

* feat: add innerBound drag snap

* fix: fix fixedPosition

* refactor: split snappable

* fix: fix innerBound for drag

* fix: fix throttleRotateDrag's work

* fix: fix snapInfo to snapDrag

* refactor: fix snapRotate

* fix: fix throttleRotateDrag snap

* fix: fix rotatable delta

* fix: fix rotatable for innerBounds

* feat: show innerBounds guidelines

* fix: remove useless code
  • Loading branch information
@daybrush
daybrush authored Feb 20, 2020
1 parent c8a2761 commit 9e76437
Show file tree
Hide file tree
Showing 18 changed files with 1,790 additions and 807 deletions.
6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@
"doc": "rm -rf ./doc && jsdoc -c jsdoc.json",
"demo:start": "rollup -c rollup.config.demo.js -w",
"demo:build": "rm -rf ./demo/dist && rollup -c rollup.config.demo.js",
"prerelease": "npm run doc && npm run build && prerelease --dirs=dist,doc",
"release": "npm run build && npm run doc && release --dirs=dist,doc",
"release:init": "npm run build && npm run doc && release -i --dirs=dist,doc",
"prerelease": "npm run doc && npm run build && npm run demo:build && prerelease --dirs=dist,doc",
"release": "npm run build && npm run doc && npm run demo:build && release --dirs=dist,doc",
"release:init": "npm run build && npm run doc && npm run demo:build && release -i --dirs=dist,doc",
"deploy": "gh-pages -d ./demo --dest=./ --add --remote origin",
"packages": "npm run packages:update && npm run packages:build && npm run packages:publish",
"packages:update": "pvu --update=svelte-moveable,ngx-moveable/projects/ngx-moveable",
Expand Down
23 changes: 23 additions & 0 deletions packages/react-moveable/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions packages/react-moveable/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@
"devDependencies": {
"@daybrush/builder": "^0.1.0",
"@daybrush/tester": "^0.1.3",
"@scena/react-guides": "^0.4.1",
"@scenejs/effects": "^1.0.1",
"@types/karma-chai": "^0.1.2",
"@types/mocha": "^5.2.7",
Expand Down
24 changes: 20 additions & 4 deletions packages/react-moveable/src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@
}

.App-logo {
position: relative;
position: absolute;
/* animation: App-logo-spin infinite 20s linear; */
/* transform: rotate(18deg); */
left: calc(50% - 150px);
top: calc(50% - 100px);
left: 300px;
top: 300px;
width: 300px;
height: 200px;
border: 2px solid black;
Expand All @@ -44,11 +44,27 @@ img {
}
#con {
position: relative;
overflow: scroll;
/* overflow: scroll; */
top: 100px;
height: 800px;
border: 1px solid #f55;
}
.guides {
position: absolute;
width: 100%;
top: -30px;
height: 30px;
}
.guides.horizontal {
width: 100%;
top: -30px;
height: 30px;
}
.guides.vertical {
width: 30px;
height: 100%;
left: -30px;
}
.App {
/* overflow: scroll;
height: 600px; */
Expand Down
50 changes: 32 additions & 18 deletions packages/react-moveable/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { ref } from "framework-utils";
import KeyController from "keycon";
import { setAlias, Frame } from "scenejs";
import { IObject } from "@daybrush/utils";
import Guides from "@scena/react-guides";

setAlias("tx", ["transform", "translateX"]);
setAlias("ty", ["transform", "translateY"]);
Expand Down Expand Up @@ -34,6 +35,8 @@ class App extends React.Component {
};
private itemMap: Map<HTMLElement |SVGElement, Frame> = new Map();
private items: IObject<Frame> = {};
private guides1!: Guides;
private guides2!: Guides;
public render() {
const selectedTarget = this.state.target;
const isResizable = this.state.isResizable;
Expand All @@ -42,6 +45,12 @@ class App extends React.Component {
(window as any).a = this;
return (
<div id="con">
<div className="guides horizontal">
<Guides ref={ref(this, "guides1")}/>
</div>
<div className="guides vertical">
<Guides ref={ref(this, "guides2")} type="vertical"/>
</div>
<div id="test" style={{
position: "fixed",
height: "69.28203582763672px",
Expand All @@ -53,19 +62,19 @@ class App extends React.Component {
pinchable={true}
draggable={true}
rotatable={isResizable}
resizable={true}
// scalable={true}
// resizable={true}
scalable={true}
ref={ref(this, "ab")}
// keepRatio={false}
bounds={{ left: 20 }}
bounds={{ left: 30 }}
target={this.state.targets}
defaultGroupRotate={0}
origin={true}
snappable={true}
snapCenter={true}
verticalGuidelines={[100, 200, 400, 500.35, 1100.321]}
horizontalGuidelines={[100.5, 200.5, 500.35]}
elementGuidelines={[document.querySelector<HTMLElement>(".box2")!]}
verticalGuidelines={[200, 400, 600]}
horizontalGuidelines={[200, 400, 600]}
// elementGuidelines={[document.querySelector<HTMLElement>(".box2")!]}
throttleRotate={0}
onDragGroupStart={e => {
console.log("start", e);
Expand Down Expand Up @@ -166,36 +175,37 @@ class App extends React.Component {
ref={ref(this, "moveable")}
keepRatio={this.state.isShift}
origin={true}
edge={true}
// edge={true}
// dragArea={true}
draggable={true}
snappable={true}
scrollable={true}
transformOrigin="% %"
snapDigit={0}
bounds={{ left: 30, top: 20 }}
verticalGuidelines={[100, 200, 400, 500.5, 1100.321]}
horizontalGuidelines={[100.5, 200.5, 500.35]}
innerBounds={{ left: 400, top: 400, width: 200, height: 200 }}
verticalGuidelines={[200, 400, 600]}
horizontalGuidelines={[200, 400, 600]}
// renderDirections={["n", "ne", "nw"]}
elementGuidelines={[
document.querySelector(".box1 span")!,
// document.querySelector(".emo img")!,
document.querySelector<HTMLElement>(".box2")!,
]}
// elementGuidelines={[
// document.querySelector(".box1 span")!,
// // document.querySelector(".emo img")!,
// document.querySelector<HTMLElement>(".box2")!,
// ]}
snapCenter={true}
// snapThreshold={10}
// scalable={!isResizable}
// scalable={true}
// resizable={true}
resizable={isResizable}
resizable={true}
// resizable={isResizable}
rotatable={true}
// resizable={isResizable}
// warpable={true}
throttleDrag={0}
throttleDragRotate={isResizable ? 0 : 30}
throttleScale={0}
throttleResize={0}
throttleRotate={10}
// throttleRotate={10}

pinchable={true}
onScroll={({ scrollContainer, direction }) => {
Expand Down Expand Up @@ -283,6 +293,9 @@ class App extends React.Component {
warpable={true}
target={this.state.emo}
// container={document.querySelector<HTMLElement>(".App")}
snappable={true}
verticalGuidelines={[200, 400, 600]}
horizontalGuidelines={[200, 400, 600]}
onWarp={e => {
e.target.style.transform = e.transform;
}} />}
Expand Down Expand Up @@ -405,7 +418,6 @@ class App extends React.Component {
requester = mvb.request("draggable")!;
}
requester.request({ deltaX: 0, deltaY: -10 });

e.inputEvent.preventDefault();
}).keydown("down", e => {
if (!requester) {
Expand Down Expand Up @@ -447,6 +459,8 @@ class App extends React.Component {
});

setTimeout(() => {
this.guides1.loadGuides([200, 400, 600]);
this.guides2.loadGuides([200, 400, 600]);
this.setState({
emo: document.querySelector(".emo") as HTMLElement,
}, () => {
Expand Down
37 changes: 29 additions & 8 deletions packages/react-moveable/src/react-moveable/DraggerUtils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@ export function setDragStart(moveable: MoveableManager<any>, { datas }: any) {
export function getDragDist({ datas, distX, distY }: any, isBefore?: boolean) {
const {
inverseBeforeMatrix,
inverseMatrix, is3d,
inverseMatrix,
is3d,
startDragBeforeDist,
startDragDist,
absoluteOrigin,
Expand All @@ -53,6 +54,26 @@ export function getDragDist({ datas, distX, distY }: any, isBefore?: boolean) {
isBefore ? startDragBeforeDist : startDragDist,
);
}
export function getInverseDragDist({ datas, distX, distY }: any, isBefore?: boolean) {
const {
beforeMatrix,
matrix,
is3d,
startDragBeforeDist,
startDragDist,
absoluteOrigin,
} = datas;
const n = is3d ? 4 : 3;

return minus(
caculate(
isBefore ? beforeMatrix : matrix,
plus(isBefore ? startDragBeforeDist : startDragDist, [distX, distY]),
n,
),
absoluteOrigin,
);
}
export function caculateTransformOrigin(
transformOrigin: string[],
width: number,
Expand Down Expand Up @@ -112,7 +133,7 @@ export function getPosesByDirection(
[-1, 0](pos1, pos3) [1, 0](pos2, pos4)
[-1, 1](pos3) [0, 1](pos3, pos4) [1, 1](pos4)
*/
return getPosIndexesByDirection(direction).map(index => poses[index]);
return getPosIndexesByDirection(direction).map(index => poses[index]);
}
export function getPosByDirection(
poses: number[][],
Expand All @@ -123,12 +144,12 @@ export function getPosByDirection(
[-1, 0](pos1, pos3) [1, 0](pos2, pos4)
[-1, 1](pos3) [0, 1](pos3, pos4) [1, 1](pos4)
*/
const nextPoses = getPosesByDirection(poses, direction);
const nextPoses = getPosesByDirection(poses, direction);

return [
average(...nextPoses.map(pos => pos[0])),
average(...nextPoses.map(pos => pos[1])),
];
return [
average(...nextPoses.map(pos => pos[0])),
average(...nextPoses.map(pos => pos[1])),
];
}
export function getPosByReverseDirection(
[pos1, pos2, pos3, pos4]: number[][],
Expand Down Expand Up @@ -283,7 +304,7 @@ export function getStartDirection(
direction[1] ? direction[1] : baseDirection[1] * -1,
];
}
export function getFixedPosition(
export function getAbsoluteFixedPosition(
moveable: MoveableManager<ResizableProps>,
direction: number[],
) {
Expand Down
17 changes: 14 additions & 3 deletions packages/react-moveable/src/react-moveable/MoveableManager.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,10 @@ export default class MoveableManager<T = {}, U = {}>
this.unsetAbles();
}
}
public isDragging() {
return (this.targetDragger ? this.targetDragger.isFlag() : false)
|| (this.controlDragger ? this.controlDragger.isFlag() : false);
}
public updateTarget(type?: "Start" | "" | "End") {
this.updateRect(type, true);
}
Expand Down Expand Up @@ -226,12 +230,19 @@ export default class MoveableManager<T = {}, U = {}>
offsetHeight,
};
}
public request(ableName: string, param: IObject<any> = {}, isInstant?: boolean): Requester | undefined {
public request(ableName: string, param: IObject<any> = {}, isInstant?: boolean): Requester {
const { ables, groupable } = this.props as any;
const requsetAble: Able = ables!.filter((able: Able) => able.name === ableName)[0];

if (!requsetAble || !requsetAble.request) {
return;
if (this.isDragging() || !requsetAble || !requsetAble.request) {
return {
request() {
return this;
},
requestEnd() {
return this;
},
};
}
const self = this;
const ableRequester = requsetAble.request();
Expand Down
Loading

0 comments on commit 9e76437

Please sign in to comment.