72 lines
4.2 KiB
JavaScript
72 lines
4.2 KiB
JavaScript
const { Gtk } = imports.gi;
|
|
const Lang = imports.lang;
|
|
import Widget from 'resource:///com/github/Aylur/ags/widget.js';
|
|
|
|
// min-height/min-width for height/width
|
|
// background-color/color for background/indicator color
|
|
// padding for pad of indicator
|
|
// font-size for selected index (0-based)
|
|
export const NavigationIndicator = ({count, vertical, ...props}) => Widget.DrawingArea({
|
|
...props,
|
|
setup: (area) => {
|
|
const styleContext = area.get_style_context();
|
|
const width = Math.max(styleContext.get_property('min-width', Gtk.StateFlags.NORMAL), area.get_allocated_width());
|
|
const height = Math.max(styleContext.get_property('min-height', Gtk.StateFlags.NORMAL), area.get_allocated_height());
|
|
area.set_size_request(width, height);
|
|
|
|
area.connect('draw', Lang.bind(area, (area, cr) => {
|
|
const styleContext = area.get_style_context();
|
|
const width = Math.max(styleContext.get_property('min-width', Gtk.StateFlags.NORMAL), area.get_allocated_width());
|
|
const height = Math.max(styleContext.get_property('min-height', Gtk.StateFlags.NORMAL), area.get_allocated_height());
|
|
// console.log('allocated width/height:', area.get_allocated_width(), '/', area.get_allocated_height())
|
|
area.set_size_request(width, height);
|
|
const paddingLeft = styleContext.get_padding(Gtk.StateFlags.NORMAL).left;
|
|
const paddingRight = styleContext.get_padding(Gtk.StateFlags.NORMAL).right;
|
|
const paddingTop = styleContext.get_padding(Gtk.StateFlags.NORMAL).top;
|
|
const paddingBottom = styleContext.get_padding(Gtk.StateFlags.NORMAL).bottom;
|
|
|
|
const selectedCell = styleContext.get_property('font-size', Gtk.StateFlags.NORMAL);
|
|
|
|
let cellWidth = width;
|
|
let cellHeight = height;
|
|
if (vertical) cellHeight /= count;
|
|
else cellWidth /= count;
|
|
const indicatorWidth = cellWidth - paddingLeft - paddingRight;
|
|
const indicatorHeight = cellHeight - paddingTop - paddingBottom;
|
|
|
|
const background_color = styleContext.get_property('background-color', Gtk.StateFlags.NORMAL);
|
|
const color = styleContext.get_property('color', Gtk.StateFlags.NORMAL);
|
|
cr.setLineWidth(2);
|
|
// Background
|
|
cr.setSourceRGBA(background_color.red, background_color.green, background_color.blue, background_color.alpha);
|
|
cr.rectangle(0, 0, width, height);
|
|
cr.fill();
|
|
|
|
// The indicator line
|
|
cr.setSourceRGBA(color.red, color.green, color.blue, color.alpha);
|
|
if (vertical) {
|
|
cr.rectangle(paddingLeft, paddingTop + cellHeight * selectedCell + indicatorWidth / 2, indicatorWidth, indicatorHeight - indicatorWidth);
|
|
cr.stroke();
|
|
cr.rectangle(paddingLeft, paddingTop + cellHeight * selectedCell + indicatorWidth / 2, indicatorWidth, indicatorHeight - indicatorWidth);
|
|
cr.fill();
|
|
cr.arc(paddingLeft + indicatorWidth / 2, paddingTop + cellHeight * selectedCell + indicatorWidth / 2, indicatorWidth / 2, Math.PI, 2 * Math.PI);
|
|
cr.fill();
|
|
cr.arc(paddingLeft + indicatorWidth / 2, paddingTop + cellHeight * selectedCell + indicatorHeight - indicatorWidth / 2, indicatorWidth / 2, 0, Math.PI);
|
|
cr.fill();
|
|
}
|
|
else {
|
|
cr.rectangle(paddingLeft + cellWidth * selectedCell + indicatorHeight / 2, paddingTop, indicatorWidth - indicatorHeight, indicatorHeight);
|
|
cr.stroke();
|
|
cr.rectangle(paddingLeft + cellWidth * selectedCell + indicatorHeight / 2, paddingTop, indicatorWidth - indicatorHeight, indicatorHeight);
|
|
cr.fill();
|
|
cr.arc(paddingLeft + cellWidth * selectedCell + indicatorHeight / 2, paddingTop + indicatorHeight / 2, indicatorHeight / 2, 0.5 * Math.PI, 1.5 * Math.PI);
|
|
cr.fill();
|
|
cr.arc(paddingLeft + cellWidth * selectedCell + indicatorWidth - indicatorHeight / 2, paddingTop + indicatorHeight / 2, indicatorHeight / 2, -0.5 * Math.PI, 0.5 * Math.PI);
|
|
cr.fill();
|
|
}
|
|
}))
|
|
},
|
|
})
|
|
|
|
|