@houstonp/rubiks-cube 1.2.2 → 1.3.0
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/README.md +3 -2
- package/index.js +9 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -21,7 +21,7 @@ import '@houstonp/rubiks-cube';
|
|
|
21
21
|
<meta charset="utf-8" />
|
|
22
22
|
</head>
|
|
23
23
|
<body>
|
|
24
|
-
<rubiks-cube animation-speed="1000" animation-style="exponential" piece-gap="1.04"> </rubiks-cube>
|
|
24
|
+
<rubiks-cube animation-speed="1000" animation-style="exponential" piece-gap="1.04" camera-speed="100"> </rubiks-cube>
|
|
25
25
|
<script type="module" src="index.js"></script>
|
|
26
26
|
</body>
|
|
27
27
|
</html>
|
|
@@ -31,9 +31,10 @@ import '@houstonp/rubiks-cube';
|
|
|
31
31
|
|
|
32
32
|
| attribute | accepted values | Description |
|
|
33
33
|
| --------------- | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
34
|
-
| animation-speed | integer greater than 0
|
|
34
|
+
| animation-speed | integer greater than or equal to 0 | sets the speed of the animations in milliseconds |
|
|
35
35
|
| animation-style | "exponetial", "next", "fixed", "match" | fixed: fixed animation lengths, next: skips to next animation, exponential: speeds up successive animations, match: matches the speed the frequency of events |
|
|
36
36
|
| piece-gap | greater than 1 | sets the gap between rubiks cube pieces |
|
|
37
|
+
| camera-speed | greater than or equal to 0 | sets the speed of camera animations in milliseconds |
|
|
37
38
|
|
|
38
39
|
## state of the component
|
|
39
40
|
|
package/index.js
CHANGED
|
@@ -6,6 +6,7 @@ import getRotationDetailsFromNotation from './src/utils/rotation';
|
|
|
6
6
|
import { debounce } from './src/utils/debouncer';
|
|
7
7
|
|
|
8
8
|
const defaultAnimationSpeed = 100;
|
|
9
|
+
const defaultCameraSpeed = 100;
|
|
9
10
|
const defaultAnimationStyle = 'fixed';
|
|
10
11
|
const defaultGap = 1.04;
|
|
11
12
|
const minimumGap = 1;
|
|
@@ -20,16 +21,17 @@ class RubiksCube extends HTMLElement {
|
|
|
20
21
|
this.attachShadow({ mode: 'open' });
|
|
21
22
|
this.shadowRoot.innerHTML = `<canvas id="cube-canvas" style="display:block;"></canvas>`;
|
|
22
23
|
this.canvas = this.shadowRoot.getElementById('cube-canvas');
|
|
23
|
-
/** @type {{animationStyle: "exponential" | "next" | "fixed" | "match", animationSpeed: number, gap: number}} */
|
|
24
|
+
/** @type {{animationStyle: "exponential" | "next" | "fixed" | "match", animationSpeed: number, gap: number, cameraSpeed: number}} */
|
|
24
25
|
this.settings = {
|
|
25
26
|
animationSpeed: this.getAttribute('animation-speed') || defaultAnimationSpeed,
|
|
26
27
|
animationStyle: this.getAttribute('animation-style') || defaultAnimationStyle,
|
|
27
28
|
gap: this.getAttribute('piece-gap') || defaultGap,
|
|
29
|
+
cameraSpeed: this.getAttribute('camera-speed') || defaultCameraSpeed,
|
|
28
30
|
};
|
|
29
31
|
}
|
|
30
32
|
|
|
31
33
|
static get observedAttributes() {
|
|
32
|
-
return ['animation-style', 'animation-speed', 'piece-gap'];
|
|
34
|
+
return ['animation-style', 'animation-speed', 'piece-gap', 'camera-speed'];
|
|
33
35
|
}
|
|
34
36
|
|
|
35
37
|
attributeChangedCallback(name, oldVal, newVal) {
|
|
@@ -44,6 +46,10 @@ class RubiksCube extends HTMLElement {
|
|
|
44
46
|
var gap = Number(newVal);
|
|
45
47
|
this.settings.gap = gap < minimumGap ? minimumGap : gap;
|
|
46
48
|
}
|
|
49
|
+
if (name === 'camera-speed') {
|
|
50
|
+
var speed = Number(newVal);
|
|
51
|
+
this.settings.cameraSpeed = speed > 0 ? speed : 0;
|
|
52
|
+
}
|
|
47
53
|
}
|
|
48
54
|
connectedCallback() {
|
|
49
55
|
this.init();
|
|
@@ -163,7 +169,7 @@ class RubiksCube extends HTMLElement {
|
|
|
163
169
|
y: cameraState.Up ? cameraState.UpDistance : -cameraState.UpDistance,
|
|
164
170
|
z: 4,
|
|
165
171
|
},
|
|
166
|
-
|
|
172
|
+
this.settings.cameraSpeed,
|
|
167
173
|
)
|
|
168
174
|
.start(),
|
|
169
175
|
);
|