Skip to content

Commit 51684b2

Browse files
沈袁程沈袁程
沈袁程
authored and
沈袁程
committed
🐛
1 parent fdb33d9 commit 51684b2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

87 files changed

+9692
-20765
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎package-lock.json

-17,142
This file was deleted.

‎src/app.ts

+86-109
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import "./redux/assets/style/app.scss";
22
import { nav } from "./redux/views/nav/nav";
33
import ResizablePanel from "./redux/views/panels/resizablePanel";
44
import ViewWindow from "./redux/views/panels/viewWindow";
5+
import { state } from "./app/state";
56
import {
67
detectCanTrigger,
78
detectDownArea,
8-
scaleChart,
9-
translateChart,
9+
translateSvgChart,
1010
} from "./util/tool";
1111
import { player } from "./redux/views/slider/player";
1212
import { BTN_CLS } from "./redux/views/buttons/button-consts";
@@ -19,11 +19,8 @@ import {
1919
import { sysMenu } from "./redux/views/menu/systemMenu";
2020
import KfItem from "./redux/views/vl/kfItem";
2121
import KfGroup from "./redux/views/vl/kfGroup";
22-
import { store } from "./redux/store";
2322
import {
24-
CHART_VIEW_CONTENT_ID,
2523
CHART_VIEW_TITLE,
26-
KF_VIEW_CONTENT_ID,
2724
KF_VIEW_TITLE,
2825
} from "./redux/views/panels/panel-consts";
2926
import {
@@ -38,14 +35,12 @@ import { sketchCanvas } from "./redux/views/panels/sketchCanvas";
3835
import {
3936
dragging,
4037
zoomChart,
41-
DRAGGING,
42-
ZOOM_CHART,
4338
toggleSystemTouch,
39+
DRAGGING,
4440
} from "./redux/views/panels/interactions";
45-
import { toggleVideoMode } from "./redux/action/videoAction";
46-
import { jsTool } from "./util/jsTool";
4741
import { markSelection } from "./util/markSelection";
4842
import AniMIL from "./mil/AniMIL";
43+
import panzoom from "panzoom";
4944
import { kfContainer } from "./redux/views/vl/kfContainer";
5045
function app(): HTMLDivElement {
5146
const outerWrapper: HTMLDivElement = document.createElement("div");
@@ -58,6 +53,7 @@ function app(): HTMLDivElement {
5853
});
5954
innerWrapper.wrapper.classList.add("inner-wrapper");
6055

56+
//create main panels
6157
//create chart view
6258
const chartView: ViewWindow = new ViewWindow(CHART_VIEW_TITLE, false);
6359
chartView.createView();
@@ -71,63 +67,44 @@ function app(): HTMLDivElement {
7167
outerWrapper.appendChild(innerWrapper.wrapper);
7268

7369
nav.createNav();
70+
7471
outerWrapper.appendChild(nav.navContainer);
72+
// Ava.init();
7573
return outerWrapper;
7674
}
77-
let lastUpTime: number = 0;
78-
let lastDownTime: number = 0;
79-
let isDoubleTapping: boolean = false;
8075

81-
const documentPointerDown = (e: PointerEvent) => {
82-
e.preventDefault();
83-
const target = <HTMLElement>e.target;
84-
85-
if (
86-
detectCanTrigger(target, NON_SKETCH_CLS) &&
87-
(e.pointerType === "pen" || e.pointerType === "mouse")
88-
) {
89-
sketchCanvas.toggleSketching(true, { x: e.clientX, y: e.clientY });
90-
} else if (e.pointerType === "touch") {
91-
e.preventDefault();
92-
lastDownTime = new Date().getTime();
93-
const currentTime: number = new Date().getTime();
94-
const diffTime: number = currentTime - lastUpTime;
95-
isDoubleTapping = diffTime <= DOUBLE_TAP_TIME;
96-
if (isDoubleTapping) {
97-
//double tapping
98-
const chartArea: DOMRect = document
99-
.getElementById(CHART_VIEW_CONTENT_ID)
100-
.getBoundingClientRect();
101-
const kfArea: DOMRect = document
102-
.getElementById(KF_VIEW_CONTENT_ID)
103-
.getBoundingClientRect();
104-
if (jsTool.inBoundary(chartArea, { x: e.clientX, y: e.clientY })) {
105-
if (player.shown) {
106-
store.dispatchSystem(toggleVideoMode(false));
107-
} else {
108-
store.dispatchSystem(toggleVideoMode(true));
109-
}
110-
} else if (jsTool.inBoundary(kfArea, { x: e.clientX, y: e.clientY })) {
111-
}
112-
}
113-
}
114-
document.addEventListener("pointermove", documentPointerMove);
115-
document.addEventListener("pointerup", documentPointerUp);
116-
};
11776
const documentPointerMove = (e: PointerEvent) => {
118-
e.preventDefault();
11977
if (e.pointerType === "pen" || e.pointerType === "mouse") {
12078
sketchCanvas.drawing(e);
12179
}
12280
};
81+
82+
let lastUpTime: number = 0;
83+
let lastDownTime: number = 0;
84+
let isDoubleTapping: boolean = false;
85+
86+
let lastDownTimeSelect: number = 0;
87+
let lastUpTimeSelect: number = 0;
12388
const documentPointerUp = (e: PointerEvent) => {
12489
e.preventDefault();
90+
lastUpTimeSelect = e.timeStamp;
12591
KfItem.endDragging();
12692
if (
12793
sketchCanvas.sketching &&
12894
(e.pointerType === "pen" || e.pointerType === "mouse")
12995
) {
130-
sketchCanvas.endSketch();
96+
lastUpTime = new Date().getTime();
97+
const currentTime: number = new Date().getTime();
98+
const diffTime: number = currentTime - lastDownTime;
99+
100+
const targetPnt: ICoord = { x: e.clientX, y: e.clientY };
101+
const targetArea: number = detectDownArea(targetPnt)
102+
switch (targetArea) {
103+
case TARGET_CHART:
104+
sketchCanvas.endDrawingChart();
105+
case TARGET_KEYFRAME:
106+
sketchCanvas.endDrawingKeyframe();
107+
}
131108
} else if (e.pointerType === "touch") {
132109
lastUpTime = new Date().getTime();
133110
const currentTime: number = new Date().getTime();
@@ -144,27 +121,59 @@ const documentPointerUp = (e: PointerEvent) => {
144121
document.removeEventListener("pointerup", documentPointerUp);
145122
};
146123

124+
/**
125+
* check whether the user is using pen or finger to select
126+
* @param e
127+
*/
128+
const documentPointerDown = (e: PointerEvent) => {
129+
e.preventDefault();
130+
lastDownTimeSelect = e.timeStamp;
147131

132+
const svg = document.getElementById('chartContent');
133+
if (svg != null) {
134+
const panZooom = panzoom(svg, {
135+
maxZoom: 5,
136+
minZoom: 0.4,
137+
})
138+
}
139+
const target = <HTMLElement>e.target;
140+
if (
141+
detectCanTrigger(target, NON_SKETCH_CLS) &&
142+
(e.pointerType === "pen" || e.pointerType === "mouse")
143+
) {
144+
sketchCanvas.toggleSketching(true, { x: e.clientX, y: e.clientY });
145+
} else if (e.pointerType === "touch") {
146+
e.preventDefault();
147+
lastDownTime = new Date().getTime();
148+
const currentTime: number = new Date().getTime();
149+
const diffTime: number = currentTime - lastUpTime;
150+
isDoubleTapping = diffTime <= DOUBLE_TAP_TIME;
151+
// if (isDoubleTapping) {
152+
// // double tapping
153+
// const chartArea: DOMRect = document
154+
// .getElementById(CHART_VIEW_CONTENT_ID)
155+
// .getBoundingClientRect();
156+
// const kfArea: DOMRect = document
157+
// .getElementById(KF_VIEW_CONTENT_ID)
158+
// .getBoundingClientRect();
159+
// if (jsTool.inBoundary(chartArea, { x: e.clientX, y: e.clientY })) {
160+
// if (player.shown) {
161+
// } else {
162+
// }
163+
// } else
164+
// if (jsTool.inBoundary(kfArea, { x: e.clientX, y: e.clientY })) {
165+
// }
166+
// }
167+
}
168+
document.addEventListener("pointermove", documentPointerMove);
169+
document.addEventListener("pointerup", documentPointerUp);
170+
};
148171
document.addEventListener("pointerdown", documentPointerDown);
149172

150-
173+
//cancel right click
151174
document.oncontextmenu = () => {
152175
return false;
153176
};
154-
155-
document.onkeyup = (e) => {
156-
var event: any = e || window.event;
157-
var key = event.which || event.keyCode || event.charCode;
158-
if (key == 13) {
159-
} else if (key == 32) {
160-
if (player.playing) {
161-
player.pauseAnimation();
162-
} else {
163-
player.playAnimation();
164-
}
165-
}
166-
};
167-
168177
document.body.appendChild(app());
169178
document.oncontextmenu = (e) => {
170179
e.preventDefault();
@@ -175,12 +184,12 @@ documentTouch.add(callSysMenu);
175184
documentTouch.add(selectSysMenu);
176185
documentTouch.add(dragging);
177186
documentTouch.add(zoomChart);
178-
179187
//chart pan & zoom
180188
let preChartPosi: ICoord = null;
181189
let startChartPosi: ICoord = null;
182190
let directionLock: number = -1;
183191
let regionLock: number = -1;
192+
let preEvent: any = null;
184193
documentTouch.on(DRAGGING, (e: any) => {
185194
e.preventDefault();
186195
if (e.pointerType === "touch") {
@@ -198,11 +207,10 @@ documentTouch.on(DRAGGING, (e: any) => {
198207
break;
199208
}
200209
regionLock = 0;
201-
translateChart(
202-
{
203-
x: currentPosi.x - preChartPosi.x,
204-
y: currentPosi.y - preChartPosi.y,
205-
},
210+
translateSvgChart({
211+
x: currentPosi.x - preChartPosi.x,
212+
y: currentPosi.y - preChartPosi.y,
213+
},
206214
true
207215
);
208216
break;
@@ -225,22 +233,24 @@ documentTouch.on(DRAGGING, (e: any) => {
225233
directionLock === 0 ||
226234
(directionLock !== 1 &&
227235
Math.abs(currentPosi.x - startChartPosi.x) >
228-
Math.abs(currentPosi.y - startChartPosi.y) &&
236+
Math.abs(currentPosi.y - startChartPosi.y) &&
229237
Math.abs(currentPosi.x - startChartPosi.x) > 10)
230238
) {
231239
directionLock = 0;
232240
kfContainer.scroll({
233241
w: -(currentPosi.x - preChartPosi.x),
242+
// h: -(currentPosi.y - preChartPosi.y),
234243
});
235244
} else if (
236245
directionLock === 1 ||
237246
(directionLock !== 0 &&
238247
Math.abs(currentPosi.x - startChartPosi.x) <
239-
Math.abs(currentPosi.y - startChartPosi.y) &&
248+
Math.abs(currentPosi.y - startChartPosi.y) &&
240249
Math.abs(currentPosi.y - startChartPosi.y) > 10)
241250
) {
242251
directionLock = 1;
243252
kfContainer.scroll({
253+
// w: -(currentPosi.x - preChartPosi.x),
244254
h: -(currentPosi.y - preChartPosi.y),
245255
});
246256
}
@@ -265,41 +275,6 @@ documentTouch.on(`${DRAGGING}end`, (e: any) => {
265275
preChartPosi = null;
266276
});
267277

268-
let preScale: number = -1;
269-
let scaleStartPnt: ICoord = null;
270-
let startScaleRatio: number = 0;
271-
documentTouch.on(ZOOM_CHART, (e: any) => {
272-
e.preventDefault();
273-
if (preScale === -1) {
274-
preScale = e.scale;
275-
}
276-
if (!scaleStartPnt) {
277-
scaleStartPnt = e.center;
278-
startScaleRatio = store.getState().chartScaleRatio;
279-
}
280-
const touchTarget: number = detectDownArea(e.center);
281-
if (touchTarget & TARGET_CHART) {
282-
const svg: HTMLElement = document.getElementById("visChart");
283-
const touchPntSvg: ICoord = jsTool.screenToSvgCoords(
284-
svg,
285-
scaleStartPnt.x,
286-
scaleStartPnt.y
287-
);
288-
let touchPntSvgNoScale: ICoord = {
289-
x: touchPntSvg.x / startScaleRatio,
290-
y: touchPntSvg.y / startScaleRatio,
291-
};
292-
scaleChart(e.scale - preScale, touchPntSvgNoScale);
293-
preScale = e.scale;
294-
}
295-
});
296-
documentTouch.on(`${ZOOM_CHART}end`, (e: any) => {
297-
e.preventDefault();
298-
preScale = -1;
299-
scaleStartPnt = null;
300-
});
301-
302-
303278
//system menu
304279
documentTouch.on(CALL_SYS_MENU, (e: any) => {
305280
if (e.pointerType === "touch") {
@@ -329,9 +304,11 @@ documentTouch.on(
329304
);
330305

331306
sketchCanvas.initCanvas();
307+
//init styles
332308
player.resizePlayer(player.widget.clientWidth - 198);
309+
state.reset(true);
333310

334311
window.onresize = () => {
335312
player.resizePlayer(player.widget.clientWidth - 198);
336313
sketchCanvas.updateCanvasSize();
337-
};
314+
};

0 commit comments

Comments
 (0)