Hi there (and happy new year),
I am looking for a way to add a layer over any other LayoutItem, that is
"transparent" for all pointer events.
What I want to accomplish can be seen in the attached playground example[1].
There one can draw rectangles with the *right* Mouse-key over a HTML-Frame.
But what I want is that 'normal' behavior of the underlying Widget is possible
('hover' over links, 'left-click' to navigate etc. pp.)
Like when the canvas is not added (checkbox unchecked).
What would be the best way to accomplish this "event-transparent" overlay?
Regards,
Peter
-----------------
[1] I cannot use 'shorten URL' for whatever reason :(
... so you have to manually copy it to
http://demo.qooxdoo.org/4.1/playground/
--
** Unsere Veranstaltungen 2015
Logimat Stuttgart Halle 7, Stand A03 10.2.-12.2.2015
transport logistic München 5.5.-8.5.2015
MöLo Kassel 18.6.-20.6.2015
Postexpo Paris 29.9.-1.10.2015
** NEU: Unser BLOG
telematics-magazine.com
qx.Class.define("demo.Demo", {
extend : qx.application.Standalone,
members :
{
__label : null,
__checkbox : null,
__frame : null,
__canvas : null,
__container : null,
main: function ()
{
this.base(arguments);
// UI
var label = new qx.ui.basic.Label("right-click to span a box...");
var checkbox = new qx.ui.form.CheckBox("Canvas added").set({ value: true
});
var frame = new qx.ui.embed.ThemedIframe().set({
source: "http://www.w3.org/";
});
var canvas = new qx.ui.embed.Canvas().set({
//backgroundColor:"rgba(0,255,0,0.2)",
width: 400,
height: 400,
syncDimension: true
});
// Layout
var container = new qx.ui.container.Composite(new
qx.ui.layout.Grow()).set({
decorator: "popup",
width: 400,
height: 400
});
var doc = this.getRoot();
doc.add(label, { left: 60, top: 20 });
doc.add(checkbox, { left: 60, top: 40 });
doc.add(container, { left: 60, top: 60, right: 60, bottom: 60 });
container.add(frame);
container.add(canvas);
// Events
checkbox.addListener("changeValue", this.onCheckboxChangeValue, this);
canvas.addListener("redraw", this.draw, this);
canvas.addListener("pointerdown", this.onPointerdown, this);
canvas.addListener("pointerup", this.onPointerup, this);
canvas.addListener("pointermove", this.onPointermove, this);
// Members (just in case...)
this.__label = label;
this.__checkbox = checkbox;
this.__frame = frame;
this.__canvas = canvas;
this.__container = container;
},
/*
----------------------------------------------------------------------------
EVENTS
----------------------------------------------------------------------------
*/
onPointerdown : function (e) {
this.__setPos("down", e);
},
onPointermove : function (e) {
if (this.__isDown){
this.__setPos("move", e);
}
},
onPointerup : function (e) {
this.__setPos("up", e);
},
onCheckboxChangeValue : function (e) {
if (e.getData()) {
this.__container.addAt(this.__canvas, 0);
} else {
this.__container.remove(this.__canvas);
}
},
/*
----------------------------------------------------------------------------
CANVAS
----------------------------------------------------------------------------
*/
__isDown : false,
__pos1 : null,
__pos2 : null,
__setPos : function (what, e)
{
if (what != "move" && !e.isRightPressed()) return; // early bailout
var p0 = e.getTarget().getContentLocation();
var where = { left: e.getDocumentLeft()-p0.left,
top : e.getDocumentTop() -p0.top };
if (what == "down") {
this.__isDown = true;
this.__pos1 = this.__pos2 = where;
}
else if (what == "move") {
this.__isDown = true;
this.__pos2 = where;
}
else if (what == "up") {
this.__isDown = false;
this.__pos2 = where;
}
//e.getTarget().update();
this.__canvas.update();
},
draw : function (e)
{
if (!this.__pos1 || !this.__pos2) return; // early bailout
var canvas = e.getData();
var context = canvas.context;
context.clearRect(0, 0, canvas.width, canvas.height);
//context.setLineDash([10, 10]);
context.strokeStyle = this.__isDown ? "rgba(200,0,0,0.5)" :
"rgb(200,0,0)";
context.strokeRect(
this.__pos1.left, // left
this.__pos1.top, // top
this.__pos2.left-this.__pos1.left, // width
this.__pos2.top -this.__pos1.top // height
);
}
}
});
------------------------------------------------------------------------------
Dive into the World of Parallel Programming! The Go Parallel Website,
sponsored by Intel and developed in partnership with Slashdot Media, is your
hub for all things parallel software development, from weekly thought
leadership blogs to news, videos, case studies, tutorials and more. Take a
look and join the conversation now. http://goparallel.sourceforge.net
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
