yarn deploy
39 | ```
40 |
41 | If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
42 |
--------------------------------------------------------------------------------
/packages/demo/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
3 | plugins: [
4 | ["@babel/plugin-proposal-decorators", { "legacy": true }]
5 | ]
6 | };
7 |
--------------------------------------------------------------------------------
/packages/demo/docs/codes/Axes/html.txt:
--------------------------------------------------------------------------------
1 |
2 |
You can change the value of the axis and apply it to the UI via the touch screen, mouse, or various other inputs.
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
52 |
53 | You can change the value of the axis and apply it to the UI via the
54 | touch screen, mouse, or various other inputs.
55 |
56 |
63 |
64 |
49 |
50 | You can change the value of the axis and apply it to the UI via the
51 | touch screen, mouse, or various other inputs.
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
3 |
4 | You can change the value of the axis and apply it to the UI via the
5 | touch screen, mouse, or various other inputs.
6 |
7 |
8 |
9 |
10 |
![]()
11 |
12 |
13 |
14 |
15 |
24 |
You can create a viewer that can rotate 360 degrees using one axis.
25 |
26 |
27 |
28 | {#each images as i}
29 |
.png)
30 | {/each}
31 |
32 |
33 |
34 |
35 |
3 |
You can create a viewer that can rotate 360 degrees using one axis.
4 |
5 |
6 |
7 |
![]()
13 |
14 |
15 |
16 |
17 |
2 |
You can create a UI that responds to user input using two axes.
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
2 |
You can rotate the cube using two axes.
3 |
4 |
5 |
1
6 |
2
7 |
3
8 |
4
9 |
5
10 |
6
11 |
12 |
13 |
29 |
You can rotate the cube using two axes.
30 |
31 |
32 |
33 |
1
34 |
2
35 |
3
36 |
4
37 |
5
38 |
6
39 |
40 |
41 |
42 |
3 |
You can rotate the cube using two axes.
4 |
5 |
6 |
7 |
1
8 |
2
9 |
3
10 |
4
11 |
5
12 |
6
13 |
14 |
15 |
16 |
2 |
You can create a scrollable minimap using two axes.
3 |
11 |
22 |
 * 50) + 1)}.jpg)
23 |
25 | egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
26 |
`;
27 | return el;
28 | }
29 |
30 | // 1. Initialize eg.Axes
31 | const axes = new eg.Axes({
32 | scroll: {
33 | range: [0, getMaxRange()],
34 | bounce: 100
35 | }
36 | });
37 |
38 | // 2. attach event handler
39 | axes.on({
40 | "change": ({pos}) => {
41 | content.style[eg.Axes.TRANSFORM] = `translate3d(0, ${-pos.scroll}px, 0)`;
42 | if (axes.isBounceArea()) {
43 | const info = getInfo(pos.scroll);
44 | if (info.isAdd) {
45 | info.isTop ? (prepend.innerText = "Release to prepend") :
46 | (append.innerText = "Release to append");
47 | } else {
48 | info.isTop ? (prepend.innerText = "Pull to prepend") :
49 | (append.innerText = "Pull to append");
50 | }
51 | }
52 | },
53 | "release" : ({depaPos}) => {
54 | if (axes.isBounceArea()) {
55 | const info = getInfo(depaPos.scroll);
56 | if (info.isAdd) {
57 | const el = getItem();
58 | info.isTop ?
59 | content.insertBefore(el, content.firstChild) :
60 | content.appendChild(el);
61 | axes.axis.scroll.range[1] = getMaxRange();
62 | }
63 | }
64 | }
65 | });
66 |
67 | // 3. Initialize inputTypes and connect it
68 | axes.connect(["", "scroll"], new eg.Axes.PanInput(contentWrapper, {
69 | scale : [0, -1]
70 | }));
71 |
--------------------------------------------------------------------------------
/packages/demo/docs/codes/Subway/html.txt:
--------------------------------------------------------------------------------
1 |
2 |
You can create maps that can zoom using three axes.
3 |
4 |
5 |
6 |
63 |
You can create bubble that can zoom using pinch(touch) or wheel.
64 |
68 |
26 |
You can create a viewer that can rotate 360 degrees using one axis.
27 |
28 |
29 |
30 | {images.map((i) => (
31 |
36 | ))}
37 |
38 |
39 |
40 |
41 |
47 |
You can rotate the cube using two axes.
48 |
49 |
50 |
51 |
1
52 |
2
53 |
3
54 |
4
55 |
5
56 |
6
57 |
58 |
59 |
60 |
29 |
You can rotate the cube using two axes.
30 |
31 |
32 |
33 |
1
34 |
2
35 |
3
36 |
4
37 |
5
38 |
6
39 |
40 |
41 |
42 |