@operato/board 0.2.16 → 0.2.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +43 -0
- package/custom-elements.json +9 -11
- package/demo/index-viewer.html +1 -1
- package/demo/index.html +3 -3
- package/dist/src/ox-board-player-style.d.ts +1 -1
- package/dist/src/ox-board-player-style.js +1 -1
- package/dist/src/ox-board-player-style.js.map +1 -1
- package/dist/src/ox-board-viewer.d.ts +10 -9
- package/dist/src/ox-board-viewer.js +74 -95
- package/dist/src/ox-board-viewer.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +5 -4
- package/src/ox-board-player-style.ts +1 -1
- package/src/ox-board-viewer.ts +79 -100
- package/yarn-error.log +18355 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,49 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
### [0.2.27](https://github.com/hatiolab/operato/compare/v0.2.26...v0.2.27) (2021-11-29)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :rocket: New Features
|
|
10
|
+
|
|
11
|
+
* move in lottie-player ([a542700](https://github.com/hatiolab/operato/commit/a542700bddb4960a65580e1ee14bbaae8493b6d3))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### [0.2.26](https://github.com/hatiolab/operato/compare/v0.2.25...v0.2.26) (2021-11-24)
|
|
16
|
+
|
|
17
|
+
**Note:** Version bump only for package @operato/board
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
### [0.2.25](https://github.com/hatiolab/operato/compare/v0.2.24...v0.2.25) (2021-11-24)
|
|
24
|
+
|
|
25
|
+
**Note:** Version bump only for package @operato/board
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
### [0.2.18](https://github.com/hatiolab/operato/compare/v0.2.17...v0.2.18) (2021-11-21)
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
### :bug: Bug Fix
|
|
35
|
+
|
|
36
|
+
* ox-board-viewer reference count error ([dc21f09](https://github.com/hatiolab/operato/commit/dc21f09372389091df02e56c0bad23c1e195b166))
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
### [0.2.17](https://github.com/hatiolab/operato/compare/v0.2.16...v0.2.17) (2021-11-21)
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
### :bug: Bug Fix
|
|
44
|
+
|
|
45
|
+
* ox-board-viewer reference count error ([8119893](https://github.com/hatiolab/operato/commit/81198935598fbae699dbda8f000f758c8ad8e014))
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
6
49
|
### [0.2.16](https://github.com/hatiolab/operato/compare/v0.2.15...v0.2.16) (2021-11-21)
|
|
7
50
|
|
|
8
51
|
|
package/custom-elements.json
CHANGED
|
@@ -351,9 +351,8 @@
|
|
|
351
351
|
"kind": "field",
|
|
352
352
|
"name": "data",
|
|
353
353
|
"type": {
|
|
354
|
-
"text": "
|
|
354
|
+
"text": "any"
|
|
355
355
|
},
|
|
356
|
-
"default": "{}",
|
|
357
356
|
"attribute": "data"
|
|
358
357
|
},
|
|
359
358
|
{
|
|
@@ -378,7 +377,7 @@
|
|
|
378
377
|
},
|
|
379
378
|
{
|
|
380
379
|
"kind": "field",
|
|
381
|
-
"name": "
|
|
380
|
+
"name": "_scene",
|
|
382
381
|
"type": {
|
|
383
382
|
"text": "any"
|
|
384
383
|
},
|
|
@@ -386,7 +385,7 @@
|
|
|
386
385
|
},
|
|
387
386
|
{
|
|
388
387
|
"kind": "field",
|
|
389
|
-
"name": "
|
|
388
|
+
"name": "_forward",
|
|
390
389
|
"type": {
|
|
391
390
|
"text": "Array<any>"
|
|
392
391
|
},
|
|
@@ -394,7 +393,7 @@
|
|
|
394
393
|
},
|
|
395
394
|
{
|
|
396
395
|
"kind": "field",
|
|
397
|
-
"name": "
|
|
396
|
+
"name": "_backward",
|
|
398
397
|
"type": {
|
|
399
398
|
"text": "Array<any>"
|
|
400
399
|
},
|
|
@@ -416,28 +415,28 @@
|
|
|
416
415
|
},
|
|
417
416
|
{
|
|
418
417
|
"kind": "field",
|
|
419
|
-
"name": "
|
|
418
|
+
"name": "_target",
|
|
420
419
|
"type": {
|
|
421
420
|
"text": "HTMLElement"
|
|
422
421
|
}
|
|
423
422
|
},
|
|
424
423
|
{
|
|
425
424
|
"kind": "field",
|
|
426
|
-
"name": "
|
|
425
|
+
"name": "_prev",
|
|
427
426
|
"type": {
|
|
428
427
|
"text": "HTMLElement"
|
|
429
428
|
}
|
|
430
429
|
},
|
|
431
430
|
{
|
|
432
431
|
"kind": "field",
|
|
433
|
-
"name": "
|
|
432
|
+
"name": "_next",
|
|
434
433
|
"type": {
|
|
435
434
|
"text": "HTMLElement"
|
|
436
435
|
}
|
|
437
436
|
},
|
|
438
437
|
{
|
|
439
438
|
"kind": "field",
|
|
440
|
-
"name": "
|
|
439
|
+
"name": "_fullscreen",
|
|
441
440
|
"type": {
|
|
442
441
|
"text": "HTMLElement"
|
|
443
442
|
}
|
|
@@ -661,9 +660,8 @@
|
|
|
661
660
|
{
|
|
662
661
|
"name": "data",
|
|
663
662
|
"type": {
|
|
664
|
-
"text": "
|
|
663
|
+
"text": "any"
|
|
665
664
|
},
|
|
666
|
-
"default": "{}",
|
|
667
665
|
"fieldName": "data"
|
|
668
666
|
},
|
|
669
667
|
{
|
package/demo/index-viewer.html
CHANGED
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
<div id="demo"></div>
|
|
28
28
|
<script type="module">
|
|
29
29
|
import { html, render } from 'lit'
|
|
30
|
-
import '../dist/src/
|
|
30
|
+
import '../dist/src/ox-board-viewer.js'
|
|
31
31
|
import { ReferenceMap, create, error } from '@hatiolab/things-scene'
|
|
32
32
|
|
|
33
33
|
const colors = ['red', 'blue', 'orange', 'yellow', 'magenta', 'violet', 'navy', 'green', 'cyan', 'lime']
|
package/demo/index.html
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
-webkit-font-smoothing: antialiased;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
ox-board-
|
|
18
|
+
ox-board-viewer {
|
|
19
19
|
width: 100vw;
|
|
20
20
|
height: 100vh;
|
|
21
21
|
}
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
<div id="demo"></div>
|
|
28
28
|
<script type="module">
|
|
29
29
|
import { html, render } from 'lit'
|
|
30
|
-
import '../dist/src/
|
|
30
|
+
import '../dist/src/ox-board-viewer.js'
|
|
31
31
|
import { ReferenceMap, create, error } from '@hatiolab/things-scene'
|
|
32
32
|
|
|
33
33
|
const colors = ['red', 'blue', 'orange', 'yellow', 'magenta', 'violet', 'navy', 'green', 'cyan', 'lime']
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
)
|
|
94
94
|
|
|
95
95
|
render(
|
|
96
|
-
html` <ox-board-
|
|
96
|
+
html` <ox-board-viewer .board=${boards[0]} .provider=${provider}></ox-board-viewer> `,
|
|
97
97
|
document.querySelector('#demo')
|
|
98
98
|
)
|
|
99
99
|
</script>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const style: import("lit
|
|
1
|
+
export declare const style: import("lit").CSSResult;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-board-player-style.js","sourceRoot":"","sources":["../../src/ox-board-player-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"ox-board-player-style.js","sourceRoot":"","sources":["../../src/ox-board-player-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqMvB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const style = css`\n :host {\n display: flex;\n position: relative;\n flex-direction: column;\n width: 100%;\n height: 100%;\n overflow: hidden;\n justify-content: center;\n align-items: center;\n }\n\n ::slotted(*) {\n border: none;\n }\n\n ::slotted > * {\n flex: 1;\n }\n\n board-wrapper {\n width: 100%;\n height: 100%;\n position: relative;\n }\n\n board-wrapper[front] {\n background: black;\n }\n\n board-wrapper[back] {\n background: black;\n }\n\n #control {\n position: absolute;\n bottom: 1vh;\n width: 100vw;\n max-width: 435px;\n display: grid;\n grid-template-columns: 42px 42px 1fr;\n color: white;\n justify-content: center;\n align-items: center;\n grid-auto-flow: dense;\n padding: 5px;\n box-sizing: border-box;\n grid-template-rows: 12px 60px 12px;\n }\n\n #control[hidden] {\n display: none;\n }\n\n #control > div > * {\n cursor: pointer;\n user-select: none;\n }\n\n #joystick {\n position: relative;\n box-sizing: border-box;\n border: 2px solid tomato;\n background-color: #c34827;\n box-shadow: 0 0 5px #000;\n width: 100%;\n height: 100%;\n grid-column: 1 / span 2;\n border-radius: 50%;\n z-index: 2;\n grid-row: 1 / span 3;\n }\n\n #joystick mwc-icon {\n position: absolute;\n display: block;\n width: 20px;\n height: 20px;\n font-size: 25px;\n line-height: 0.7;\n }\n\n mwc-icon#up {\n left: 29px;\n }\n\n mwc-icon#left {\n top: 32px;\n left: -2px;\n }\n\n mwc-icon#play,\n mwc-icon#pause {\n left: 20px;\n top: 20px;\n width: 40px;\n height: 40px;\n border: 1px solid rgba(0, 0, 0, 0.15);\n border-radius: 50%;\n background-color: rgba(0, 0, 0, 0.15);\n font-size: 45px;\n line-height: 0.9;\n }\n\n mwc-icon#right {\n top: 31px;\n left: 60px;\n }\n\n mwc-icon#down {\n left: 29px;\n top: 63px;\n }\n\n mwc-icon#pause {\n text-indent: -2px;\n }\n\n #setting-container {\n grid-column: 2 / span 2;\n grid-row: 2;\n gap: 0 10px;\n border-radius: 12px;\n background: rgba(0, 0, 0, 0.7);\n height: 100%;\n box-shadow: rgb(0, 0, 0) 0px 0px 5px;\n display: grid;\n grid-template-columns: 1fr 60px;\n align-items: center;\n padding-left: 60px;\n padding-right: 5px;\n }\n\n #setting {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: 0 10px;\n }\n\n #setting mwc-icon {\n font-size: 22px;\n color: rgba(255, 174, 53, 0.8);\n }\n\n #setting input {\n width: 50px;\n margin-right: 5px;\n font-size: 14px;\n background-color: transparent;\n border: none;\n border-bottom: 1px solid #fff;\n color: #fff;\n text-align: right;\n }\n\n #setting select {\n border: none;\n font-size: 14px;\n }\n\n #setting input:focus {\n outline: none;\n }\n\n #schedule-container {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n #grid-setting-container {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n #etc {\n display: grid;\n grid-template-columns: 1fr 1fr;\n align-items: center;\n justify-items: center;\n }\n\n #etc mwc-icon {\n font-size: 30px;\n }\n\n #control [hidden] {\n display: none;\n }\n\n @media screen and (max-width: 460px) {\n #setting {\n grid-template-columns: 1fr;\n grid-template-rows: 1fr 1fr;\n }\n }\n`\n"]}
|
|
@@ -6,20 +6,21 @@ export declare class BoardViewer extends LitElement {
|
|
|
6
6
|
baseUrl: string;
|
|
7
7
|
board: any;
|
|
8
8
|
provider: any;
|
|
9
|
-
data:
|
|
9
|
+
data: any;
|
|
10
10
|
hideFullscreen: boolean;
|
|
11
11
|
hideNavigation: boolean;
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
_scene: any;
|
|
13
|
+
_forward: Array<any>;
|
|
14
|
+
_backward: Array<any>;
|
|
15
15
|
_oldtarget?: HTMLElement;
|
|
16
16
|
_fade_animations?: Array<Animation>;
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
17
|
+
_target: HTMLElement;
|
|
18
|
+
_prev: HTMLElement;
|
|
19
|
+
_next: HTMLElement;
|
|
20
|
+
_fullscreen: HTMLElement;
|
|
21
21
|
render(): import("lit-html").TemplateResult<1>;
|
|
22
|
-
|
|
22
|
+
connectedCallback(): void;
|
|
23
|
+
disconnectedCallback(): void;
|
|
23
24
|
updated(changes: PropertyValues<this>): void;
|
|
24
25
|
initScene(): void;
|
|
25
26
|
closeScene(): void;
|
|
@@ -12,12 +12,11 @@ let BoardViewer = class BoardViewer extends LitElement {
|
|
|
12
12
|
this.baseUrl = '';
|
|
13
13
|
this.board = {};
|
|
14
14
|
this.provider = null;
|
|
15
|
-
this.data = {};
|
|
16
15
|
this.hideFullscreen = false;
|
|
17
16
|
this.hideNavigation = false;
|
|
18
|
-
this.
|
|
19
|
-
this.
|
|
20
|
-
this.
|
|
17
|
+
this._scene = null;
|
|
18
|
+
this._forward = [];
|
|
19
|
+
this._backward = [];
|
|
21
20
|
}
|
|
22
21
|
render() {
|
|
23
22
|
var fullscreen = !isIOS() && !this.hideFullscreen
|
|
@@ -68,32 +67,35 @@ let BoardViewer = class BoardViewer extends LitElement {
|
|
|
68
67
|
${next} ${fullscreen}
|
|
69
68
|
`;
|
|
70
69
|
}
|
|
71
|
-
|
|
70
|
+
connectedCallback() {
|
|
71
|
+
super.connectedCallback();
|
|
72
72
|
window.addEventListener('resize', () => {
|
|
73
|
-
this.
|
|
73
|
+
this._scene && this._scene.fit();
|
|
74
74
|
});
|
|
75
75
|
this.renderRoot.addEventListener('close-scene', e => {
|
|
76
76
|
e.preventDefault();
|
|
77
77
|
this.onTapPrev();
|
|
78
78
|
}, false);
|
|
79
79
|
}
|
|
80
|
+
disconnectedCallback() {
|
|
81
|
+
super.disconnectedCallback();
|
|
82
|
+
this.closeScene();
|
|
83
|
+
}
|
|
80
84
|
updated(changes) {
|
|
81
85
|
if (changes.has('board')) {
|
|
86
|
+
this.closeScene();
|
|
82
87
|
if (this.board && this.board.id) {
|
|
83
88
|
this.initScene();
|
|
84
89
|
}
|
|
85
|
-
else {
|
|
86
|
-
this.closeScene();
|
|
87
|
-
}
|
|
88
90
|
}
|
|
89
|
-
if (changes.has('data') && this.
|
|
90
|
-
this.
|
|
91
|
+
if (changes.has('data') && this._scene && this.data) {
|
|
92
|
+
this._scene.data = this.data;
|
|
91
93
|
}
|
|
92
94
|
}
|
|
93
95
|
initScene() {
|
|
94
96
|
if (!this.board || !this.board.id)
|
|
95
97
|
return;
|
|
96
|
-
|
|
98
|
+
this._scene = create({
|
|
97
99
|
model: {
|
|
98
100
|
...this.board.model
|
|
99
101
|
},
|
|
@@ -101,52 +103,36 @@ let BoardViewer = class BoardViewer extends LitElement {
|
|
|
101
103
|
refProvider: this.provider
|
|
102
104
|
});
|
|
103
105
|
if (this.baseUrl) {
|
|
104
|
-
|
|
106
|
+
this._scene.baseUrl = this.baseUrl;
|
|
105
107
|
}
|
|
106
|
-
this.provider.add(this.board.id,
|
|
107
|
-
this.
|
|
108
|
-
/* provider.add 시에 추가된 레퍼런스 카운트를 다운시켜주어야 함 */
|
|
109
|
-
scene.release();
|
|
108
|
+
this.provider.add(this.board.id, this._scene);
|
|
109
|
+
this.setupScene(this._scene);
|
|
110
110
|
}
|
|
111
111
|
closeScene() {
|
|
112
|
-
if (this.
|
|
113
|
-
this.unbindSceneEvents(this.
|
|
114
|
-
this.
|
|
115
|
-
this.
|
|
116
|
-
|
|
112
|
+
if (this._scene) {
|
|
113
|
+
this.unbindSceneEvents(this._scene);
|
|
114
|
+
this._scene.target = null;
|
|
115
|
+
this._scene.release();
|
|
116
|
+
this._scene = null;
|
|
117
117
|
}
|
|
118
118
|
// delete queued scenes
|
|
119
|
-
this.
|
|
120
|
-
this.
|
|
121
|
-
this.
|
|
122
|
-
this.
|
|
119
|
+
this._forward.forEach(scene => scene.release());
|
|
120
|
+
this._forward = [];
|
|
121
|
+
this._backward.forEach(scene => scene.release());
|
|
122
|
+
this._backward = [];
|
|
123
123
|
}
|
|
124
124
|
releaseScene() {
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
this.scene.target = null;
|
|
128
|
-
this.scene.release();
|
|
129
|
-
delete this.scene;
|
|
130
|
-
// delete queued scenes
|
|
131
|
-
this.forward.forEach(scene => {
|
|
132
|
-
scene.release();
|
|
133
|
-
});
|
|
134
|
-
this.forward = [];
|
|
135
|
-
this.backward.forEach(scene => {
|
|
136
|
-
scene.release();
|
|
137
|
-
});
|
|
138
|
-
this.backward = [];
|
|
139
|
-
this.transientShowButtons();
|
|
140
|
-
}
|
|
125
|
+
this.closeScene();
|
|
126
|
+
this.transientShowButtons();
|
|
141
127
|
}
|
|
142
128
|
setupScene(scene) {
|
|
143
|
-
this.
|
|
129
|
+
this._scene = scene;
|
|
144
130
|
/* scene의 기존 target을 보관한다. */
|
|
145
|
-
this._oldtarget = this.
|
|
146
|
-
this.
|
|
147
|
-
this.
|
|
131
|
+
this._oldtarget = this._scene.target;
|
|
132
|
+
this._scene.fit(this.board.model.fitMode);
|
|
133
|
+
this._scene.target = this._target;
|
|
148
134
|
if (this.data) {
|
|
149
|
-
this.
|
|
135
|
+
this._scene.data = this.data;
|
|
150
136
|
}
|
|
151
137
|
this.bindSceneEvents();
|
|
152
138
|
this.transientShowButtons();
|
|
@@ -156,24 +142,21 @@ let BoardViewer = class BoardViewer extends LitElement {
|
|
|
156
142
|
return;
|
|
157
143
|
try {
|
|
158
144
|
var scene = await this.provider.get(boardId, true);
|
|
159
|
-
|
|
160
|
-
this.scene = scene;
|
|
161
|
-
if (scene.target === this.target) {
|
|
145
|
+
if (scene === this._scene) {
|
|
162
146
|
scene.release();
|
|
163
147
|
return;
|
|
164
148
|
}
|
|
165
|
-
if (
|
|
166
|
-
/* old scene을
|
|
167
|
-
this.unbindSceneEvents(
|
|
149
|
+
if (this._scene) {
|
|
150
|
+
/* old scene을 _backward에 보관한다. */
|
|
151
|
+
this.unbindSceneEvents(this._scene);
|
|
168
152
|
/* 원래의 target에 되돌린다. */
|
|
169
|
-
|
|
170
|
-
this.
|
|
153
|
+
this._scene.target = this._oldtarget;
|
|
154
|
+
this._backward.push(this._scene);
|
|
171
155
|
}
|
|
172
|
-
this.
|
|
173
|
-
|
|
174
|
-
});
|
|
156
|
+
this._scene = scene;
|
|
157
|
+
this._forward.forEach(scene => scene.release());
|
|
175
158
|
/* forward를 비운다. */
|
|
176
|
-
this.
|
|
159
|
+
this._forward = [];
|
|
177
160
|
this.setupScene(scene);
|
|
178
161
|
if (bindingData) {
|
|
179
162
|
scene.data = bindingData;
|
|
@@ -184,10 +167,10 @@ let BoardViewer = class BoardViewer extends LitElement {
|
|
|
184
167
|
}
|
|
185
168
|
}
|
|
186
169
|
bindSceneEvents() {
|
|
187
|
-
this.
|
|
188
|
-
this.
|
|
189
|
-
this.
|
|
190
|
-
this.
|
|
170
|
+
this._scene.on('goto', this.onLinkGoto, this);
|
|
171
|
+
this._scene.on('link-open', this.onLinkOpen, this);
|
|
172
|
+
this._scene.on('link-move', this.onLinkMove, this);
|
|
173
|
+
this._scene.on('route-page', this.onRoutePage, this);
|
|
191
174
|
}
|
|
192
175
|
unbindSceneEvents(scene) {
|
|
193
176
|
scene.off('goto', this.onLinkGoto, this);
|
|
@@ -197,8 +180,8 @@ let BoardViewer = class BoardViewer extends LitElement {
|
|
|
197
180
|
}
|
|
198
181
|
transientShowButtons(stop) {
|
|
199
182
|
var buttons = [];
|
|
200
|
-
!this.hideNavigation && buttons.push(this.
|
|
201
|
-
!this.hideFullscreen && buttons.push(this.
|
|
183
|
+
!this.hideNavigation && buttons.push(this._next, this._prev);
|
|
184
|
+
!this.hideFullscreen && buttons.push(this._fullscreen);
|
|
202
185
|
if (buttons.length == 0) {
|
|
203
186
|
return;
|
|
204
187
|
}
|
|
@@ -219,9 +202,9 @@ let BoardViewer = class BoardViewer extends LitElement {
|
|
|
219
202
|
return animation;
|
|
220
203
|
});
|
|
221
204
|
}
|
|
222
|
-
this.
|
|
223
|
-
this.
|
|
224
|
-
this.
|
|
205
|
+
this._forward.length <= 0 ? this._next.setAttribute('hidden', '') : this._next.removeAttribute('hidden');
|
|
206
|
+
this._backward.length <= 0 ? this._prev.setAttribute('hidden', '') : this._prev.removeAttribute('hidden');
|
|
207
|
+
this._fullscreen && this._fullscreen.removeAttribute('hidden');
|
|
225
208
|
this._fade_animations.forEach(animation => {
|
|
226
209
|
animation.cancel();
|
|
227
210
|
if (stop)
|
|
@@ -231,37 +214,33 @@ let BoardViewer = class BoardViewer extends LitElement {
|
|
|
231
214
|
}
|
|
232
215
|
/* event handlers */
|
|
233
216
|
onTapNext() {
|
|
234
|
-
var scene = this.
|
|
217
|
+
var scene = this._forward.pop();
|
|
235
218
|
if (!scene)
|
|
236
219
|
return;
|
|
237
|
-
if (this.
|
|
238
|
-
this.
|
|
220
|
+
if (this._scene) {
|
|
221
|
+
this._scene.target = null;
|
|
239
222
|
/* 원래의 target에 되돌린다. */
|
|
240
|
-
this.
|
|
241
|
-
this.unbindSceneEvents(this.
|
|
242
|
-
this.
|
|
223
|
+
this._scene.target = this._oldtarget;
|
|
224
|
+
this.unbindSceneEvents(this._scene);
|
|
225
|
+
this._backward.push(this._scene);
|
|
243
226
|
}
|
|
244
227
|
this.setupScene(scene);
|
|
245
228
|
}
|
|
246
229
|
onTapPrev() {
|
|
247
|
-
var scene = this.
|
|
230
|
+
var scene = this._backward.pop();
|
|
248
231
|
if (!scene)
|
|
249
232
|
return;
|
|
250
|
-
if (this.
|
|
251
|
-
this.
|
|
233
|
+
if (this._scene) {
|
|
234
|
+
this._scene.target = null;
|
|
252
235
|
/* 원래의 target에 되돌린다. */
|
|
253
|
-
this.
|
|
254
|
-
this.unbindSceneEvents(this.
|
|
255
|
-
this.
|
|
236
|
+
this._scene.target = this._oldtarget;
|
|
237
|
+
this.unbindSceneEvents(this._scene);
|
|
238
|
+
this._forward.push(this._scene);
|
|
256
239
|
}
|
|
257
240
|
this.setupScene(scene);
|
|
258
241
|
}
|
|
259
242
|
onTapFullscreen() {
|
|
260
|
-
togglefullscreen(this, () =>
|
|
261
|
-
this.requestUpdate();
|
|
262
|
-
}, () => {
|
|
263
|
-
this.requestUpdate();
|
|
264
|
-
});
|
|
243
|
+
togglefullscreen(this, () => this.requestUpdate(), () => this.requestUpdate());
|
|
265
244
|
}
|
|
266
245
|
onLinkGoto(targetBoardId, value, fromComponent) {
|
|
267
246
|
this.showScene(targetBoardId, fromComponent.data);
|
|
@@ -295,16 +274,16 @@ let BoardViewer = class BoardViewer extends LitElement {
|
|
|
295
274
|
window.dispatchEvent(new Event('popstate'));
|
|
296
275
|
}
|
|
297
276
|
async getSceneImageData(base64 = false) {
|
|
298
|
-
if (!this.
|
|
277
|
+
if (!this._scene) {
|
|
299
278
|
return;
|
|
300
279
|
}
|
|
301
|
-
var { width, height } = this.
|
|
280
|
+
var { width, height } = this._scene.model;
|
|
302
281
|
var pixelRatio = window.devicePixelRatio;
|
|
303
282
|
// 1. Scene의 바운드에 근거하여, 오프스크린 캔바스를 만든다.
|
|
304
283
|
var canvas = document.createElement('canvas');
|
|
305
284
|
canvas.width = Number(width);
|
|
306
285
|
canvas.height = Number(height);
|
|
307
|
-
var root = this.
|
|
286
|
+
var root = this._scene.root;
|
|
308
287
|
// 2. 모델레이어의 원래 위치와 스케일을 저장한다.
|
|
309
288
|
var translate = root.get('translate');
|
|
310
289
|
var scale = root.get('scale');
|
|
@@ -459,13 +438,13 @@ __decorate([
|
|
|
459
438
|
], BoardViewer.prototype, "hideNavigation", void 0);
|
|
460
439
|
__decorate([
|
|
461
440
|
state()
|
|
462
|
-
], BoardViewer.prototype, "
|
|
441
|
+
], BoardViewer.prototype, "_scene", void 0);
|
|
463
442
|
__decorate([
|
|
464
443
|
state()
|
|
465
|
-
], BoardViewer.prototype, "
|
|
444
|
+
], BoardViewer.prototype, "_forward", void 0);
|
|
466
445
|
__decorate([
|
|
467
446
|
state()
|
|
468
|
-
], BoardViewer.prototype, "
|
|
447
|
+
], BoardViewer.prototype, "_backward", void 0);
|
|
469
448
|
__decorate([
|
|
470
449
|
state()
|
|
471
450
|
], BoardViewer.prototype, "_oldtarget", void 0);
|
|
@@ -474,16 +453,16 @@ __decorate([
|
|
|
474
453
|
], BoardViewer.prototype, "_fade_animations", void 0);
|
|
475
454
|
__decorate([
|
|
476
455
|
query('#target')
|
|
477
|
-
], BoardViewer.prototype, "
|
|
456
|
+
], BoardViewer.prototype, "_target", void 0);
|
|
478
457
|
__decorate([
|
|
479
458
|
query('#prev')
|
|
480
|
-
], BoardViewer.prototype, "
|
|
459
|
+
], BoardViewer.prototype, "_prev", void 0);
|
|
481
460
|
__decorate([
|
|
482
461
|
query('#next')
|
|
483
|
-
], BoardViewer.prototype, "
|
|
462
|
+
], BoardViewer.prototype, "_next", void 0);
|
|
484
463
|
__decorate([
|
|
485
464
|
query('#fullscreen')
|
|
486
|
-
], BoardViewer.prototype, "
|
|
465
|
+
], BoardViewer.prototype, "_fullscreen", void 0);
|
|
487
466
|
BoardViewer = __decorate([
|
|
488
467
|
customElement('ox-board-viewer')
|
|
489
468
|
], BoardViewer);
|