Skip to content

Commit 4c20df6

Browse files
tinchox5tinchox5
committed
fix control icons
1 parent c81b872 commit 4c20df6

File tree

2 files changed

+153
-128
lines changed

2 files changed

+153
-128
lines changed

‎src/assets/circular.js‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
{
2+
data() {
3+
return {
4+
isDragging: false,
5+
startAngle: 0,
6+
rotationAngle: 359,
7+
progressValue: 1,
8+
isRestoring: false,
9+
}
10+
},
11+
computed: {
12+
tiempoRestante() {
13+
const gradosRestantes = 360 - this.rotationAngle;
14+
const segundos = Math.round(gradosRestantes / 6);
15+
const minutos = Math.round(segundos / 60);
16+
console.log(this.rotationAngle, this.progressValue)
17+
return segundos;
18+
},
19+
},
20+
methods: {
21+
getAngle(event) {
22+
const orbit7 = this.$refs.time_panel;
23+
const rect = orbit7.getBoundingClientRect();
24+
const centerX = rect.left + rect.width / 2;
25+
const centerY = rect.top + rect.height / 2;
26+
const clientX = event.clientX || event.touches[0].clientX;
27+
const clientY = event.clientY || event.touches[0].clientY;
28+
const deltaX = clientX - centerX;
29+
const deltaY = clientY - centerY;
30+
return Math.atan2(deltaY, deltaX) * (180 / Math.PI);
31+
},
32+
startDrag(event) {
33+
// Detener la restauración si está en curso
34+
if (this.isRestoring) {
35+
clearInterval(this.restoreInterval); // Limpiar el intervalo de restauración
36+
this.isRestoring = false; // Actualizar el estado
37+
let iconControl = this.$refs.icon_control;
38+
iconControl.setAttribute('d', 'M320-203v-560l440 280-440 280Zm60-280Zm0 171 269-171-269-171v342Z'); // Cambiar el icono a "play"
39+
}
40+
41+
// Iniciar el arrastre
42+
this.isDragging = true;
43+
this.startAngle = Math.round(this.getAngle(event) - this.rotationAngle);
44+
45+
// Agregar listeners para el arrastre
46+
window.addEventListener('mousemove', this.duringDrag);
47+
window.addEventListener('touchmove', this.duringDrag);
48+
window.addEventListener('mouseup', this.stopDrag);
49+
window.addEventListener('touchend', this.stopDrag);
50+
},
51+
duringDrag(event) {
52+
if (!this.isDragging) return;
53+
54+
// Calculate the new rotation angle and round it to the nearest integer
55+
let angle = Math.round(this.getAngle(event) - this.startAngle);
56+
57+
// Ensure the angle is always between 0 and 360
58+
this.rotationAngle = (angle % 360 + 360) % 360; // fluid
59+
//this.rotationAngle = ((Math.round(angle / 5) * 5) % 360 + 360) % 360;
60+
// Update the progress value based on the rotation angle
61+
this.progressValue = (360 - this.rotationAngle);
62+
63+
},
64+
stopDrag() {
65+
this.isDragging = false;
66+
let iconControl = this.$refs.icon_control
67+
iconControl.setAttribute('d', 'M320-203v-560l440 280-440 280Zm60-280Zm0 171 269-171-269-171v342Z')
68+
// Remove event listeners
69+
window.removeEventListener('mousemove', this.duringDrag);
70+
window.removeEventListener('touchmove', this.duringDrag);
71+
window.removeEventListener('mouseup', this.stopDrag);
72+
window.removeEventListener('touchend', this.stopDrag);
73+
},
74+
toggleRestore(e) {
75+
let iconControl = this.$refs.icon_control;
76+
if (this.isRestoring) {
77+
// Pause restoration
78+
iconControl.setAttribute('d', 'M320-203v-560l440 280-440 280Zm60-280Zm0 171 269-171-269-171v342Z');
79+
clearInterval(this.restoreInterval);
80+
this.isRestoring = false;
81+
} else {
82+
// Start restoration
83+
this.startRestoration();
84+
}
85+
},
86+
startRestoration() {
87+
let iconControl = this.$refs.icon_control;
88+
89+
// Stop any existing animation
90+
if (this.restoreInterval) {
91+
clearInterval(this.restoreInterval);
92+
}
93+
94+
// Calculate the delta angle and duration
95+
const deltaAngle = this.startAngle - this.rotationAngle;
96+
const duration = Math.abs(deltaAngle) * 1000;
97+
98+
// Calculate the step size and interval time
99+
const step = deltaAngle > 0 ? 1 : -1;
100+
const intervalTime = 1000 / 6 ;
101+
102+
//const step = deltaAngle > 0 ? 5 : -5;
103+
//const intervalTime = 1000 ;
104+
105+
// Start the animation
106+
this.isRestoring = true;
107+
this.restoreInterval = setInterval(() => {
108+
iconControl.setAttribute('d', 'M525-200v-560h235v560H525Zm-325 0v-560h235v560H200Zm385-60h115v-440H585v440Zm-325 0h115v-440H260v440Zm0-440v440-440Zm325 0v440-440Z');
109+
110+
if (this.rotationAngle !== 359 && this.isRestoring && this.progressValue !== 1) {
111+
this.rotationAngle -= step;
112+
this.rotationAngle = (this.rotationAngle % 360 + 360) % 360;
113+
this.progressValue = 360 - this.rotationAngle;
114+
115+
} else {
116+
this.resetToZero()
117+
}
118+
}, intervalTime);
119+
120+
},
121+
startLongPress() {
122+
// Start long press timer
123+
let iconControl = this.$refs.icon_control;
124+
this.longPressTimer = setTimeout(() => {
125+
// Limpiar el icono (no mostrar nada)
126+
iconControl.setAttribute('d', '');
127+
128+
this.resetToZero('longpress');
129+
}, 1000);
130+
},
131+
endLongPress() {
132+
// Limpiar el temporizador si no se completó el long press
133+
clearTimeout(this.longPressTimer);
134+
135+
},
136+
resetToZero(value) {
137+
clearInterval(this.restoreInterval);
138+
this.isRestoring = false;
139+
this.rotationAngle = 359;
140+
this.progressValue = 1;
141+
142+
// Actualizar el icono al estado de "play"
143+
let iconControl = this.$refs.icon_control;
144+
if (value) {
145+
} else {
146+
iconControl.setAttribute('d', '');
147+
148+
}
149+
}
150+
151+
}
152+
}

‎src/content/docs/examples/circular_time.mdx‎

Lines changed: 1 addition & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ title: Circular time
55

66
import ZumerPlay from '/src/components/ZumerCode.astro';
77
import htmlCal from '/src/assets/circular.html?raw';
8+
import vue from '/src/assets/circular.js?raw';
89

910

1011
export const CSS = `
@@ -38,135 +39,7 @@ background: white; font-size: 13px;
3839
}
3940
`
4041

41-
export const vue = `
42-
{
43-
data() {
44-
return {
45-
isDragging: false,
46-
startAngle: 0,
47-
rotationAngle: 359,
48-
progressValue: 1,
49-
};
50-
},
51-
computed: {
52-
tiempoRestante() {
53-
const gradosRestantes = 360 - this.rotationAngle;
54-
const segundos = Math.round(gradosRestantes / 6);
55-
const minutos = Math.round(segundos / 60);
56-
console.log(this.rotationAngle, this.progressValue)
57-
return segundos;
58-
},
59-
},
60-
methods: {
61-
getAngle(event) {
62-
const orbit7 = this.$refs.time_panel;
63-
const rect = orbit7.getBoundingClientRect();
64-
const centerX = rect.left + rect.width / 2;
65-
const centerY = rect.top + rect.height / 2;
66-
const clientX = event.clientX || event.touches[0].clientX;
67-
const clientY = event.clientY || event.touches[0].clientY;
68-
const deltaX = clientX - centerX;
69-
const deltaY = clientY - centerY;
70-
return Math.atan2(deltaY, deltaX) * (180 / Math.PI);
71-
},
72-
startDrag(event) {
73-
this.isDragging = true;
74-
this.startAngle = Math.round(this.getAngle(event) - this.rotationAngle);
7542

76-
// Add event listeners for dragging
77-
window.addEventListener('mousemove', this.duringDrag);
78-
window.addEventListener('touchmove', this.duringDrag);
79-
window.addEventListener('mouseup', this.stopDrag);
80-
window.addEventListener('touchend', this.stopDrag);
81-
},
82-
duringDrag(event) {
83-
if (!this.isDragging) return;
84-
85-
// Calculate the new rotation angle and round it to the nearest integer
86-
let angle = Math.round(this.getAngle(event) - this.startAngle);
87-
88-
// Ensure the angle is always between 0 and 360
89-
this.rotationAngle = (angle % 360 + 360) % 360;
90-
// Update the progress value based on the rotation angle
91-
this.progressValue = (360 - this.rotationAngle);
92-
93-
},
94-
stopDrag() {
95-
this.isDragging = false;
96-
let iconControl = this.$refs.icon_control
97-
iconControl.setAttribute('d', 'M320-203v-560l440 280-440 280Zm60-280Zm0 171 269-171-269-171v342Z')
98-
// Remove event listeners
99-
window.removeEventListener('mousemove', this.duringDrag);
100-
window.removeEventListener('touchmove', this.duringDrag);
101-
window.removeEventListener('mouseup', this.stopDrag);
102-
window.removeEventListener('touchend', this.stopDrag);
103-
},
104-
toggleRestore(e) {
105-
let iconControl = this.$refs.icon_control
106-
if (this.isRestoring) {
107-
// Pause restoration
108-
iconControl.setAttribute('d', 'M320-203v-560l440 280-440 280Zm60-280Zm0 171 269-171-269-171v342Z')
109-
clearInterval(this.restoreInterval);
110-
this.isRestoring = false;
111-
} else if (!this.isRestoring && this.rotationAngle !== 359) {
112-
// Start restoration
113-
iconControl.setAttribute('d', 'M525-200v-560h235v560H525Zm-325 0v-560h235v560H200Zm385-60h115v-440H585v440Zm-325 0h115v-440H260v440Zm0-440v440-440Zm325 0v440-440Z')
114-
this.startRestoration();
115-
} else {
116-
iconControl.setAttribute('d', '')
117-
}
118-
},
119-
startRestoration() {
120-
// Stop any existing animation
121-
if (this.restoreInterval) {
122-
clearInterval(this.restoreInterval);
123-
}
124-
125-
// Calculate the delta angle and duration
126-
const deltaAngle = this.startAngle - this.rotationAngle;
127-
const duration = Math.abs(deltaAngle) * 1000;
128-
129-
// Calculate the step size and interval time
130-
const step = deltaAngle > 0 ? 1 : -1;
131-
const intervalTime = 1000 / 6 ;
132-
133-
// Start the animation
134-
this.isRestoring = true;
135-
this.restoreInterval = setInterval(() => {
136-
if (this.rotationAngle !== 359 && this.isRestoring && this.progressValue !== 1) {
137-
this.rotationAngle -= step;
138-
this.rotationAngle = (this.rotationAngle % 360 + 360) % 360;
139-
this.progressValue = 360 - this.rotationAngle;
140-
console.log(this.rotationAngle,this.isRestoring,this.progressValue)
141-
} else {
142-
this.resetToZero
143-
}
144-
}, intervalTime);
145-
},
146-
startLongPress() {
147-
// Start long press timer
148-
this.longPressTimer = setTimeout(() => {
149-
this.resetToZero();
150-
}, 1000);
151-
},
152-
endLongPress() {
153-
// Clear long press timer if not triggered
154-
clearTimeout(this.longPressTimer);
155-
},
156-
resetToZero() {
157-
158-
clearInterval(this.restoreInterval);
159-
this.isRestoring = false;
160-
161-
162-
this.rotationAngle = 359;
163-
this.progressValue = 1;
164-
},
165-
166-
167-
}
168-
}
169-
`
17043

17144

17245
<ZumerPlay name={'scifi1'} framework="vue" htmlCode={htmlCal} cssCode={CSS} jsCode={vue} height={'500px'} />

0 commit comments

Comments
 (0)