1bd8c67041
If enabled, scrollbars take away from the allocation given to the view's content. This is usually preferrable to painting the bars on top of the content, but there are exceptions, for instance when the content needs to be centered with regard to the view as a whole. Add a :overlay-scrollbars property to account for those cases. https://bugzilla.gnome.org/show_bug.cgi?id=694261
412 lines
13 KiB
JavaScript
412 lines
13 KiB
JavaScript
// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
|
|
|
|
const Clutter = imports.gi.Clutter;
|
|
const Gtk = imports.gi.Gtk;
|
|
const Lang = imports.lang;
|
|
const Shell = imports.gi.Shell;
|
|
const St = imports.gi.St;
|
|
|
|
const UI = imports.testcommon.ui;
|
|
|
|
// This is an interactive test of the sizing behavior of StScrollView. It
|
|
// may be interesting in the future to split out the two classes at the
|
|
// top into utility classes for testing the sizing behavior of other
|
|
// containers and actors.
|
|
|
|
/****************************************************************************/
|
|
|
|
// FlowedBoxes: This is a simple actor that demonstrates an interesting
|
|
// height-for-width behavior. A set of boxes of different sizes are line-wrapped
|
|
// horizontally with the minimum horizontal size being determined by the
|
|
// largest box. It would be easy to extend this to allow doing vertical
|
|
// wrapping instead, if you wanted to see just how badly our width-for-height
|
|
// implementation is or work on fixing it.
|
|
|
|
const BOX_HEIGHT = 20;
|
|
const BOX_WIDTHS = [
|
|
10, 40, 100, 20, 60, 30, 70, 10, 20, 200, 50, 70, 90, 20, 40,
|
|
10, 40, 100, 20, 60, 30, 70, 10, 20, 200, 50, 70, 90, 20, 40,
|
|
10, 40, 100, 20, 60, 30, 70, 10, 20, 200, 50, 70, 90, 20, 40,
|
|
10, 40, 100, 20, 60, 30, 70, 10, 20, 200, 50, 70, 90, 20, 40,
|
|
];
|
|
|
|
const SPACING = 10;
|
|
|
|
function FlowedBoxes() {
|
|
this._init();
|
|
}
|
|
|
|
FlowedBoxes.prototype = {
|
|
_init: function() {
|
|
this.actor = new Shell.GenericContainer();
|
|
this.actor.connect('get-preferred-width', Lang.bind(this, this._getPreferredWidth));
|
|
this.actor.connect('get-preferred-height', Lang.bind(this, this._getPreferredHeight));
|
|
this.actor.connect('allocate', Lang.bind(this, this._allocate));
|
|
|
|
for (let i = 0; i < BOX_WIDTHS.length; i++) {
|
|
let child = new St.Bin({ width: BOX_WIDTHS[i], height: BOX_HEIGHT,
|
|
style: 'border: 1px solid #444444; background: #00aa44' })
|
|
this.actor.add_actor(child);
|
|
}
|
|
},
|
|
|
|
_getPreferredWidth: function (actor, forHeight, alloc) {
|
|
let children = this.actor.get_children();
|
|
|
|
let maxMinWidth = 0;
|
|
let totalNaturalWidth = 0;
|
|
|
|
for (let i = 0; i < children.length; i++) {
|
|
let child = children[i];
|
|
let [minWidth, naturalWidth] = child.get_preferred_width(-1);
|
|
maxMinWidth = Math.max(maxMinWidth, minWidth);
|
|
if (i != 0)
|
|
totalNaturalWidth += SPACING;
|
|
totalNaturalWidth += naturalWidth;
|
|
}
|
|
|
|
alloc.min_size = maxMinWidth;
|
|
alloc.natural_size = totalNaturalWidth;
|
|
},
|
|
|
|
_layoutChildren: function(forWidth, callback) {
|
|
let children = this.actor.get_children();
|
|
|
|
let x = 0;
|
|
let y = 0;
|
|
for (let i = 0; i < children.length; i++) {
|
|
let child = children[i];
|
|
let [minWidth, naturalWidth] = child.get_preferred_width(-1);
|
|
let [minHeight, naturalHeight] = child.get_preferred_height(naturalWidth);
|
|
|
|
let x1 = x;
|
|
if (x != 0)
|
|
x1 += SPACING;
|
|
let x2 = x1 + naturalWidth;
|
|
|
|
if (x2 > forWidth) {
|
|
if (x > 0) {
|
|
x1 = 0;
|
|
y += BOX_HEIGHT + SPACING;
|
|
}
|
|
|
|
x2 = naturalWidth;
|
|
}
|
|
|
|
callback(child, x1, y, x2, y + naturalHeight);
|
|
x = x2;
|
|
}
|
|
|
|
},
|
|
|
|
_getPreferredHeight: function (actor, forWidth, alloc) {
|
|
let height = 0;
|
|
this._layoutChildren(forWidth,
|
|
function(child, x1, y1, x2, y2) {
|
|
height = Math.max(height, y2);
|
|
});
|
|
|
|
alloc.min_size = alloc.natural_size = height;
|
|
},
|
|
|
|
_allocate: function (actor, box, flags) {
|
|
this._layoutChildren(box.x2 - box.x1,
|
|
function(child, x1, y1, x2, y2) {
|
|
child.allocate(new Clutter.ActorBox({ x1: x1, y1: y1, x2: x2, y2: y2 }),
|
|
flags);
|
|
});
|
|
}
|
|
};
|
|
|
|
/****************************************************************************/
|
|
|
|
// SizingIllustrator: this is a container that allows interactively exploring
|
|
// the sizing behavior of the child. Lines are drawn to indicate the minimum
|
|
// and natural size of the child, and a drag handle allows the user to resize
|
|
// the child interactively and see how that affects it.
|
|
//
|
|
// This is currently only written for the case where the child is height-for-width
|
|
|
|
function SizingIllustrator() {
|
|
this._init();
|
|
}
|
|
|
|
SizingIllustrator.prototype = {
|
|
_init: function() {
|
|
this.actor = new Shell.GenericContainer();
|
|
|
|
this.actor.connect('get-preferred-width', Lang.bind(this, this._getPreferredWidth));
|
|
this.actor.connect('get-preferred-height', Lang.bind(this, this._getPreferredHeight));
|
|
this.actor.connect('allocate', Lang.bind(this, this._allocate));
|
|
|
|
this.minWidthLine = new St.Bin({ style: 'background: red' });
|
|
this.actor.add_actor(this.minWidthLine);
|
|
this.minHeightLine = new St.Bin({ style: 'background: red' });
|
|
this.actor.add_actor(this.minHeightLine);
|
|
|
|
this.naturalWidthLine = new St.Bin({ style: 'background: #4444ff' });
|
|
this.actor.add_actor(this.naturalWidthLine);
|
|
this.naturalHeightLine = new St.Bin({ style: 'background: #4444ff' });
|
|
this.actor.add_actor(this.naturalHeightLine);
|
|
|
|
this.currentWidthLine = new St.Bin({ style: 'background: #aaaaaa' });
|
|
this.actor.add_actor(this.currentWidthLine);
|
|
this.currentHeightLine = new St.Bin({ style: 'background: #aaaaaa' });
|
|
this.actor.add_actor(this.currentHeightLine);
|
|
|
|
this.handle = new St.Bin({ style: 'background: yellow; border: 1px solid black;',
|
|
reactive: true });
|
|
this.handle.connect('button-press-event', Lang.bind(this, this._handlePressed));
|
|
this.handle.connect('button-release-event', Lang.bind(this, this._handleReleased));
|
|
this.handle.connect('motion-event', Lang.bind(this, this._handleMotion));
|
|
this.actor.add_actor(this.handle);
|
|
|
|
this._inDrag = false;
|
|
|
|
this.width = 300;
|
|
this.height = 300;
|
|
},
|
|
|
|
add: function(child) {
|
|
this.child = child;
|
|
this.actor.add_actor(this.child);
|
|
this.child.lower_bottom();
|
|
},
|
|
|
|
_getPreferredWidth: function (actor, forHeight, alloc) {
|
|
let children = this.actor.get_children();
|
|
for (let i = 0; i < children.length; i++) {
|
|
let child = children[i];
|
|
let [minWidth, naturalWidth] = child.get_preferred_width(-1);
|
|
if (child == this.child) {
|
|
this.minWidth = minWidth;
|
|
this.naturalWidth = naturalWidth;
|
|
}
|
|
}
|
|
|
|
alloc.min_size = 0;
|
|
alloc.natural_size = 400;
|
|
},
|
|
|
|
_getPreferredHeight: function (actor, forWidth, alloc) {
|
|
let children = this.actor.get_children();
|
|
for (let i = 0; i < children.length; i++) {
|
|
let child = children[i];
|
|
if (child == this.child) {
|
|
[this.minHeight, this.naturalHeight] = child.get_preferred_height(this.width);
|
|
} else {
|
|
let [minWidth, naturalWidth] = child.get_preferred_width(-1);
|
|
child.get_preferred_height(naturalWidth);
|
|
}
|
|
}
|
|
|
|
alloc.min_size = 0;
|
|
alloc.natural_size = 400;
|
|
},
|
|
|
|
_allocate: function (actor, box, flags) {
|
|
let allocWidth = box.x2 - box.x1;
|
|
let allocHeight = box.y2 - box.y1;
|
|
|
|
function alloc(child, x1, y1, x2, y2) {
|
|
child.allocate(new Clutter.ActorBox({ x1: x1, y1: y1, x2: x2, y2: y2 }),
|
|
flags);
|
|
}
|
|
|
|
alloc(this.child, 0, 0, this.width, this.height);
|
|
alloc(this.minWidthLine, this.minWidth, 0, this.minWidth + 1, allocHeight);
|
|
alloc(this.naturalWidthLine, this.naturalWidth, 0, this.naturalWidth + 1, allocHeight);
|
|
alloc(this.currentWidthLine, this.width, 0, this.width + 1, allocHeight);
|
|
alloc(this.minHeightLine, 0, this.minHeight, allocWidth, this.minHeight + 1);
|
|
alloc(this.naturalHeightLine, 0, this.naturalHeight, allocWidth, this.naturalHeight + 1);
|
|
alloc(this.currentHeightLine, 0, this.height, allocWidth, this.height + 1);
|
|
alloc(this.handle, this.width, this.height, this.width + 10, this.height + 10);
|
|
},
|
|
|
|
_handlePressed: function(handle, event) {
|
|
if (event.get_button() == 1) {
|
|
this._inDrag = true;
|
|
let [handleX, handleY] = handle.get_transformed_position();
|
|
let [x, y] = event.get_coords();
|
|
this._dragX = x - handleX;
|
|
this._dragY = y - handleY;
|
|
Clutter.grab_pointer(handle);
|
|
}
|
|
},
|
|
|
|
_handleReleased: function(handle, event) {
|
|
if (event.get_button() == 1) {
|
|
this._inDrag = false;
|
|
Clutter.ungrab_pointer(handle);
|
|
}
|
|
},
|
|
|
|
_handleMotion: function(handle, event) {
|
|
if (this._inDrag) {
|
|
let [x, y] = event.get_coords();
|
|
let [actorX, actorY] = this.actor.get_transformed_position();
|
|
this.width = x - this._dragX - actorX;
|
|
this.height = y - this._dragY - actorY;
|
|
this.actor.queue_relayout();
|
|
}
|
|
}
|
|
};
|
|
|
|
/****************************************************************************/
|
|
|
|
function test() {
|
|
let stage = new Clutter.Stage({ width: 600, height: 600 });
|
|
UI.init(stage);
|
|
|
|
let mainBox = new St.BoxLayout({ width: stage.width,
|
|
height: stage.height,
|
|
vertical: true,
|
|
style: 'padding: 10px;'
|
|
+ 'spacing: 5px;'
|
|
+ 'font: 16px sans-serif;'
|
|
+ 'background: black;'
|
|
+ 'color: white;' });
|
|
stage.add_actor(mainBox);
|
|
|
|
const DOCS = 'Red lines represent minimum size, blue lines natural size. Drag yellow handle to resize ScrollView. Click on options to change.';
|
|
|
|
let docsLabel = new St.Label({ text: DOCS });
|
|
docsLabel.clutter_text.line_wrap = true;
|
|
mainBox.add(docsLabel);
|
|
|
|
let bin = new St.Bin({ x_fill: true, y_fill: true, style: 'border: 2px solid #666666;' });
|
|
mainBox.add(bin, { x_fill: true, y_fill: true, expand: true });
|
|
|
|
let illustrator = new SizingIllustrator();
|
|
bin.add_actor(illustrator.actor);
|
|
|
|
let scrollView = new St.ScrollView();
|
|
illustrator.add(scrollView);
|
|
|
|
let box = new St.BoxLayout({ vertical: true });
|
|
scrollView.add_actor(box);
|
|
|
|
let flowedBoxes = new FlowedBoxes();
|
|
box.add(flowedBoxes.actor, { expand: false, x_fill: true, y_fill: true });
|
|
|
|
let policyBox = new St.BoxLayout({ vertical: false });
|
|
mainBox.add(policyBox);
|
|
|
|
policyBox.add(new St.Label({ text: 'Horizontal Policy: ' }));
|
|
let hpolicy = new St.Button({ label: 'AUTOMATIC', style: 'text-decoration: underline; color: #4444ff;' });
|
|
policyBox.add(hpolicy);
|
|
|
|
let spacer = new St.Bin();
|
|
policyBox.add(spacer, { expand: true });
|
|
|
|
policyBox.add(new St.Label({ text: 'Vertical Policy: '}));
|
|
let vpolicy = new St.Button({ label: 'AUTOMATIC', style: 'text-decoration: underline; color: #4444ff;' });
|
|
policyBox.add(vpolicy);
|
|
|
|
function togglePolicy(button) {
|
|
switch(button.label) {
|
|
case 'AUTOMATIC':
|
|
button.label = 'ALWAYS';
|
|
break;
|
|
case 'ALWAYS':
|
|
button.label = 'NEVER';
|
|
break;
|
|
case 'NEVER':
|
|
button.label = 'AUTOMATIC';
|
|
break;
|
|
}
|
|
scrollView.set_policy(Gtk.PolicyType[hpolicy.label], Gtk.PolicyType[vpolicy.label]);
|
|
}
|
|
|
|
hpolicy.connect('clicked', function() { togglePolicy(hpolicy); });
|
|
vpolicy.connect('clicked', function() { togglePolicy(vpolicy); });
|
|
|
|
let fadeBox = new St.BoxLayout({ vertical: false });
|
|
mainBox.add(fadeBox);
|
|
|
|
spacer = new St.Bin();
|
|
fadeBox.add(spacer, { expand: true });
|
|
|
|
fadeBox.add(new St.Label({ text: 'Padding: '}));
|
|
let paddingButton = new St.Button({ label: 'No', style: 'text-decoration: underline; color: #4444ff;padding-right:3px;' });
|
|
fadeBox.add(paddingButton);
|
|
|
|
fadeBox.add(new St.Label({ text: 'Borders: '}));
|
|
let borderButton = new St.Button({ label: 'No', style: 'text-decoration: underline; color: #4444ff;padding-right:3px;' });
|
|
fadeBox.add(borderButton);
|
|
|
|
fadeBox.add(new St.Label({ text: 'Vertical Fade: '}));
|
|
let vfade = new St.Button({ label: 'No', style: 'text-decoration: underline; color: #4444ff;' });
|
|
fadeBox.add(vfade);
|
|
|
|
fadeBox.add(new St.Label({ text: 'Overlay scrollbars: '}));
|
|
let overlay = new St.Button({ label: 'No', style: 'text-decoration: underline; color: #4444ff;' });
|
|
fadeBox.add(overlay);
|
|
|
|
function togglePadding(button) {
|
|
switch(button.label) {
|
|
case 'No':
|
|
button.label = 'Yes';
|
|
break;
|
|
case 'Yes':
|
|
button.label = 'No';
|
|
break;
|
|
}
|
|
if (scrollView.style == null)
|
|
scrollView.style = (button.label == 'Yes' ? 'padding: 10px;' : 'padding: 0;');
|
|
else
|
|
scrollView.style += (button.label == 'Yes' ? 'padding: 10px;' : 'padding: 0;');
|
|
}
|
|
|
|
paddingButton.connect('clicked', function() { togglePadding(paddingButton); });
|
|
|
|
function toggleBorders(button) {
|
|
switch(button.label) {
|
|
case 'No':
|
|
button.label = 'Yes';
|
|
break;
|
|
case 'Yes':
|
|
button.label = 'No';
|
|
break;
|
|
}
|
|
if (scrollView.style == null)
|
|
scrollView.style = (button.label == 'Yes' ? 'border: 2px solid red;' : 'border: 0;');
|
|
else
|
|
scrollView.style += (button.label == 'Yes' ? 'border: 2px solid red;' : 'border: 0;');
|
|
}
|
|
|
|
borderButton.connect('clicked', function() { toggleBorders(borderButton); });
|
|
|
|
function toggleFade(button) {
|
|
switch(button.label) {
|
|
case 'No':
|
|
button.label = 'Yes';
|
|
break;
|
|
case 'Yes':
|
|
button.label = 'No';
|
|
break;
|
|
}
|
|
scrollView.set_style_class_name(button.label == 'Yes' ? 'vfade' : '');
|
|
}
|
|
|
|
vfade.connect('clicked', function() { toggleFade(vfade); });
|
|
toggleFade(vfade);
|
|
|
|
function toggleOverlay(button) {
|
|
switch(button.label) {
|
|
case 'No':
|
|
button.label = 'Yes';
|
|
break;
|
|
case 'Yes':
|
|
button.label = 'No';
|
|
break;
|
|
}
|
|
scrollView.overlay_scrollbars = (button.label == 'Yes');
|
|
}
|
|
|
|
overlay.connect('clicked', function() { toggleOverlay(overlay); });
|
|
|
|
UI.main(stage);
|
|
}
|
|
test();
|