50 lines
2.4 KiB
JavaScript
50 lines
2.4 KiB
JavaScript
import Widget from 'resource:///com/github/Aylur/ags/widget.js';
|
|
const { Gtk } = imports.gi;
|
|
const Lang = imports.lang;
|
|
|
|
export const AnimatedSlider = ({
|
|
className,
|
|
value,
|
|
...rest
|
|
}) => {
|
|
return Widget.DrawingArea({
|
|
className: `${className}`,
|
|
setup: (self) => {
|
|
self.connect('draw', Lang.bind(self, (self, cr) => {
|
|
const styleContext = self.get_style_context();
|
|
const allocatedWidth = self.get_allocated_width();
|
|
const allocatedHeight = self.get_allocated_height();
|
|
console.log(allocatedHeight, allocatedWidth)
|
|
const minWidth = styleContext.get_property('min-width', Gtk.StateFlags.NORMAL);
|
|
const minHeight = styleContext.get_property('min-height', Gtk.StateFlags.NORMAL);
|
|
const radius = styleContext.get_property('border-radius', Gtk.StateFlags.NORMAL);
|
|
const bg = styleContext.get_property('background-color', Gtk.StateFlags.NORMAL);
|
|
const fg = styleContext.get_property('color', Gtk.StateFlags.NORMAL);
|
|
const value = styleContext.get_property('font-size', Gtk.StateFlags.NORMAL) / 100;
|
|
self.set_size_request(-1, minHeight);
|
|
const width = allocatedHeight;
|
|
const height = minHeight;
|
|
|
|
cr.arc(radius, radius, radius, -1 * Math.PI, -0.5 * Math.PI); // Top-left
|
|
cr.arc(width - radius, radius, radius, -0.5 * Math.PI, 0); // Top-right
|
|
cr.arc(width - radius, height - radius, radius, 0, 0.5 * Math.PI); // Bottom-left
|
|
cr.arc(radius, height - radius, radius, 0.5 * Math.PI, 1 * Math.PI); // Bottom-right
|
|
cr.setSourceRGBA(bg.red, bg.green, bg.blue, bg.alpha);
|
|
cr.closePath();
|
|
cr.fill();
|
|
|
|
// const valueWidth = width * value;
|
|
// cr.arc(radius, radius, radius, -1 * Math.PI, -0.5 * Math.PI); // Top-left
|
|
// cr.arc(valueWidth - radius, radius, radius, -0.5 * Math.PI, 0); // Top-right
|
|
// cr.arc(valueWidth - radius, height - radius, radius, 0, 0.5 * Math.PI); // Bottom-left
|
|
// cr.arc(radius, height - radius, radius, 0.5 * Math.PI, 1 * Math.PI); // Bottom-right
|
|
// cr.setSourceRGBA(fg.red, fg.green, fg.blue, fg.alpha);
|
|
// cr.closePath();
|
|
// cr.fill();
|
|
|
|
}));
|
|
},
|
|
...rest,
|
|
})
|
|
}
|