ardour/livetrax
13
0
Fork 0
Code
d3f536a7ff
livetrax/share/web_surfaces/builtin/mixer/toolkit/modules/responsehandle.js

1355 lines
45 KiB
JavaScript
Raw Normal View History

WS: Improve mixer demo
2020-06-21 17:29:27 -04:00
/*
* This file is part of Toolkit.
*
* Toolkit is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public
* License as published by the Free Software Foundation; either
* version 3 of the License, or (at your option) any later version.
*
* Toolkit is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU General
* Public License along with this program; if not, write to the
* Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
* Boston, MA 02110-1301 USA
*/
"use strict";
(function(w, TK){
var MODES = [
"circular",
"line-horizontal",
"line-vertical",
"block-top",
"block-bottom",
"block-left",
"block-right",
"block",
];
function normalize(v) {
var n = Math.sqrt(v[0]*v[0] + v[1]*v[1]);
v[0] /= n;
v[1] /= n;
}
function scrollwheel(e) {
var direction;
e.preventDefault();
var d = e.wheelDelta !== void(0) && e.wheelDelta ? e.wheelDelta : e.detail;
if (d > 0) {
direction = 1;
} else if (d < 0) {
direction = -1;
} else return;
if (this.__sto) window.clearTimeout(this.__sto);
this.set("dragging", true);
TK.add_class(this.element, "toolkit-active");
this.__sto = window.setTimeout(function () {
this.set("dragging", false);
TK.remove_class(this.element, "toolkit-active");
this.fire_event("zchangeended", this.options.z);
}.bind(this), 250);
var s = this.range_z.get("step") * direction;
if (e.ctrlKey && e.shiftKey)
s *= this.range_z.get("shift_down");
else if (e.shiftKey)
s *= this.range_z.get("shift_up");
this.userset("z", this.get("z") + s);
if (!this._zwheel)
this.fire_event("zchangestarted", this.options.z);
this._zwheel = true;
}
/* The following functions turn positioning options
* into somethine we can calculate with */
function ROT(a) {
return [ +Math.sin(+a), +Math.cos(+a) ];
}
var ZHANDLE_POSITION_circular = {
"top": ROT(Math.PI),
"center": [1e-10, 1e-10],
"top-right": ROT(Math.PI*3/4),
"right": ROT(Math.PI/2),
"bottom-right": ROT(Math.PI/4),
"bottom": ROT(0),
"bottom-left": ROT(Math.PI*7/4),
"left": ROT(Math.PI*3/2),
"top-left": ROT(Math.PI*5/4),
};
function get_zhandle_position_movable(O, X) {
var vec = ZHANDLE_POSITION_circular[O.z_handle];
var x = (X[0]+X[2])/2;
var y = (X[1]+X[3])/2;
var R = (X[2] - X[0] - O.z_handle_size)/2;
return [
x + R*vec[0],
y + R*vec[1]
];
}
var Z_HANDLE_SIZE_corner = [ 1, 1, 0, 0 ];
var Z_HANDLE_SIZE_horiz = [ 1, 0, 0, 1 ];
var Z_HANDLE_SIZE_vert = [ 0, 1, 1, 0 ];
function Z_HANDLE_SIZE(pos) {
switch (pos) {
default:
TK.warn("Unsupported z_handle position:", pos);
case "top-right":
case "bottom-right":
case "bottom-left":
case "top-left":
case "center":
return Z_HANDLE_SIZE_corner;
case "top":
case "bottom":
return Z_HANDLE_SIZE_vert;
case "left":
case "right":
return Z_HANDLE_SIZE_horiz;
}
};
function get_zhandle_size(O, X) {
var vec = Z_HANDLE_SIZE(O.z_handle);
var z_handle_size = O.z_handle_size;
var z_handle_centered = O.z_handle_centered;
var width = X[2] - X[0];
var height = X[3] - X[1];
if (z_handle_centered < 1) {
width *= z_handle_centered;
height *= z_handle_centered;
} else {
width = z_handle_centered;
height = z_handle_centered;
}
width = vec[0] * z_handle_size + vec[2] * width;
height = vec[1] * z_handle_size + vec[3] * height;
if (width < z_handle_size) width = z_handle_size;
if (height < z_handle_size) height = z_handle_size;
return [width, height];
}
var Z_HANDLE_POS = {
"top": [ 0, -1 ],
"top-right": [ 1, -1 ],
"right": [ 1, 0 ],
"bottom-right": [ 1, 1 ],
"bottom": [ 0, 1 ],
"bottom-left": [ -1, 1 ],
"left": [ -1, 0 ],
"top-left": [ -1, -1 ],
"center": [ 0, 0 ],
};
function get_zhandle_position(O, X, zhandle_size) {
var x = +(+X[0]+X[2]-+zhandle_size[0])/2;
var y = +(+X[1]+X[3]-+zhandle_size[1])/2;
var width = +X[2] - +X[0];
var height = +X[3] - +X[1];
var vec = Z_HANDLE_POS[O.z_handle] || Z_HANDLE_POS["top-right"];
x += +vec[0] * +(width - +zhandle_size[0])/2;
y += +vec[1] * +(height - +zhandle_size[1])/2;
return [x, y];
}
function mode_to_handle(mode) {
if (mode === "block-left" || mode === "block-right" ||
mode === "block-top" || mode === "block-bottom")
return "block";
return mode;
}
var LABEL_ALIGN = {
"line-vertical": {
"top": "middle",
"bottom": "middle",
"left": "end",
"top-left": "end",
"bottom-left":"end",
"right": "start",
"top-right":"start",
"bottom-right":"start",
"center" : "middle",
},
"line-horizontal": {
"top": "middle",
"bottom": "middle",
"left": "start",
"top-left": "start",
"bottom-left":"start",
"right": "end",
"top-right":"end",
"bottom-right":"end",
"center" : "middle",
},
"circular": {
"top": "middle",
"bottom": "middle",
"left": "end",
"top-left": "start",
"bottom-left":"start",
"right": "start",
"top-right":"end",
"bottom-right":"end",
"center" : "middle",
},
"block": {
"top": "middle",
"bottom": "middle",
"left": "start",
"top-left": "start",
"bottom-left":"start",
"right": "end",
"top-right":"end",
"bottom-right":"end",
"center" : "middle",
}
}
function get_label_align(O, pos) {
return LABEL_ALIGN[mode_to_handle(O.mode)][pos];
}
/* The following arrays contain multipliers, alternating x and y, starting with x.
* The first pair is a multiplier for the handle width and height
* The second pair is a multiplier for the label size
* The third pair is a multiplier for the margin
*/
var LABEL_POSITION = {
"line-vertical": {
top: [ 0, -1, 0, 0, 0, 1 ],
right: [ 1, 0, 0, -1/2, 1, 0 ],
left: [ -1, 0, 0, -1/2, -1, 0 ],
bottom: [ 0, 1, 0, -1, 0, -1 ],
"bottom-left": [ -1, 1, 0, -1, -1, -1 ],
"bottom-right": [ 1, 1, 0, -1, 1, -1 ],
"top-right": [ 1, -1, 0, 0, 0, 1 ],
"top-left": [ -1, -1, 0, 0, -1, 1 ],
center: [ 0, 0, 0, -1/2, 0, 0 ],
},
"line-horizontal": {
top: [ 0, -1, 0, -1, 0, -1 ],
right: [ 1, 0, 0, -1/2, 1, 0 ],
left: [ -1, 0, 0, -1/2, -1, 0 ],
bottom: [ 0, 1, 0, 0, 0, 1 ],
"bottom-left": [ -1, 1, 0, 0, 1, 1 ],
"bottom-right": [ 1, 1, 0, 0, -1, 1 ],
"top-right": [ 1, -1, 0, -1, -1, -1 ],
"top-left": [ -1, -1, 0, -1, 1, -1 ],
center: [ 0, 0, 0, -1/2, 0, 0 ],
},
"circular": {
top: [ 0, -1, 0, -1, 0, -1 ],
right: [ 1, 0, 0, -1/2, 1, 0 ],
left: [ -1, 0, 0, -1/2, -1, 0 ],
bottom: [ 0, 1, 0, 0, 0, 1 ],
"bottom-left": [ -1, 1, 0, 0, 0, 1 ],
"bottom-right": [ 1, 1, 0, 0, 0, 1 ],
"top-right": [ 1, -1, 0, -1, 0, -1 ],
"top-left": [ -1, -1, 0, -1, 0, -1 ],
center: [ 0, 0, 0, -1/2, 0, 0 ],
},
"block": {
top: [ 0, -1, 0, 0, 0, 1 ],
bottom: [ 0, 1, 0, -1, 0, -1 ],
right: [ 1, 0, 0, -1/2, -1, 0 ],
left: [ -1, 0, 0, -1/2, 1, 0 ],
"bottom-left": [ -1, 1, 0, -1, 1, -1 ],
"bottom-right": [ 1, 1, 0, -1, -1, -1 ],
"top-right": [ 1, -1, 0, 0, -1, 1 ],
"top-left": [ -1, -1, 0, 0, 1, 1 ],
center: [ 0, 0, 0, -1/2, 0, 0 ],
}
}
function get_label_position(O, X, pos, label_size) {
/* X: array containing [X0, Y0, X1, Y1] of the handle
* pos: string describing the position of the label ("top", "bottom-right", ...)
* label_size: array containing width and height of the label
*/
var m = O.margin;
// Pivot (x, y) is the center of the handle.
var x = (X[0]+X[2])/2;
var y = (X[1]+X[3])/2;
// Size of handle
var width = +X[2]-+X[0];
var height = +X[3]-+X[1];
// multipliers
var vec = LABEL_POSITION[mode_to_handle(O.mode)][pos];
x += vec[0] * width/2 + vec[2] * label_size[0] + vec[4] * m;
y += vec[1] * height/2 + vec[3] * label_size[1] + vec[5] * m;
// result is [x, y] of the "real" label position. Please note that
// the final x position depends on the LABEL_ALIGN value for pos.
// Y value is the top border of the overall label.
return [x,y];
}
function remove_zhandle() {
var E = this._zhandle;
if (!E) return;
this._zhandle = null;
if (this.z_drag.get("node") === E)
this.z_drag.set("node", null);
E.remove();
}
function create_zhandle() {
var E;
var O = this.options;
if (this._zhandle) remove_zhandle.call(this);
E = TK.make_svg(
O.mode === "circular" ? "circle" : "rect", {
"class": "toolkit-z-handle",
}
);
this._zhandle = E;
if (this.z_drag.get("node") !== document)
this.z_drag.set("node", E);
}
function create_line1() {
if (this._line1) remove_line1.call(this);
this._line1 = TK.make_svg("path", {
"class": "toolkit-line toolkit-line-1"
});
}
function create_line2() {
if (this._line2) remove_line2.call(this);
this._line2 = TK.make_svg("path", {
"class": "toolkit-line toolkit-line-2"
});
}
function remove_line1() {
if (!this._line1) return;
this._line1.remove();
this._line1 = null;
}
function remove_line2() {
if (!this._line2) return;
this._line2.remove();
this._line2 = null;
}
/* Prints a line, making sure that an offset of 0.5 px aligns them on
* pixel boundaries */
var format_line = TK.FORMAT("M %.0f.5 %.0f.5 L %.0f.5 %.0f.5");
/* calculates the actual label positions based on given alignment
* and dimensions */
function get_label_dimensions(align, X, label_size) {
switch (align) {
case "start":
return [ X[0], X[1], X[0]+label_size[0], X[1]+label_size[1] ];
case "middle":
return [ X[0]-label_size[0]/2, X[1], X[0]+label_size[0]/2, X[1]+label_size[1] ];
case "end":
return [ X[0]-label_size[0], X[1], X[0], X[1]+label_size[1] ];
}
}
function redraw_handle(O, X) {
var _handle = this._handle;
if (!O.show_handle) {
if (_handle) remove_handle.call(this);
return;
}
var range_x = this.range_x;
var range_y = this.range_y;
var range_z = this.range_z;
if (!range_x.options.basis || !range_y.options.basis) return;
var x = range_x.val2px(O.x);
var y = range_y.val2px(O.y);
var z = range_z.val2coef(O.z);
var tmp;
if (O.mode === "circular") {
tmp = Math.max(O.min_size, z * O.max_size)/2;
X[0] = x-tmp;
X[1] = y-tmp;
X[2] = x+tmp;
X[3] = y+tmp;
_handle.setAttribute("r", tmp.toFixed(2));
_handle.setAttribute("cx", x.toFixed(2));
_handle.setAttribute("cy", y.toFixed(2));
} else if (O.mode === "block") {
tmp = Math.max(O.min_size, z)/2;
X[0] = x-tmp;
X[1] = y-tmp;
X[2] = x+tmp;
X[3] = y+tmp;
_handle.setAttribute("x", Math.round(+X[0]).toFixed(0));
_handle.setAttribute("y", Math.round(+X[1]).toFixed(0));
_handle.setAttribute("width", Math.round(+X[2]-X[0]).toFixed(0));
_handle.setAttribute("height", Math.round(+X[3]-X[1]).toFixed(0));
} else {
var x_min = O.x_min !== false ? range_x.val2px(range_x.snap(O.x_min)) : 0;
var x_max = O.x_max !== false ? range_x.val2px(range_x.snap(O.x_max)) : range_x.options.basis;
if (x_min > x_max) {
tmp = x_min;
x_min = x_max;
x_max = tmp;
}
var y_min = O.y_min !== false ? range_y.val2px(range_y.snap(O.y_min)) : 0;
var y_max = O.y_max !== false ? range_y.val2px(range_y.snap(O.y_max)) : range_y.options.basis;
if (y_min > y_max) {
tmp = y_min;
y_min = y_max;
y_max = tmp;
}
tmp = O.min_size / 2;
/* All other modes are drawn as rectangles */
switch (O.mode) {
case "line-vertical":
tmp = Math.max(tmp, z * O.max_size/2);
X[0] = x-tmp;
X[1] = y_min;
X[2] = x+tmp;
X[3] = y_max;
break;
case "line-horizontal":
// line horizontal
tmp = Math.max(tmp, z * O.max_size/2);
X[0] = x_min;
X[1] = y - tmp;
X[2] = x_max;
X[3] = y + tmp;
break;
case "block-left":
// rect lefthand
X[0] = 0;
X[1] = y_min;
X[2] = Math.max(x, tmp);
X[3] = y_max;
break;
case "block-right":
// rect righthand
X[0] = x;
X[1] = y_min;
X[2] = range_x.options.basis;
X[3] = y_max;
if (X[2] - X[0] < tmp) X[0] = X[2] - tmp;
break;
case "block-top":
// rect top
X[0] = x_min;
X[1] = 0;
X[2] = x_max;
X[3] = Math.max(y, tmp);
break;
case "block-bottom":
// rect bottom
X[0] = x_min;
X[1] = y;
X[2] = x_max;
X[3] = range_y.options.basis;
if (X[3] - X[1] < tmp) X[1] = X[3] - tmp;
break;
default:
TK.warn("Unsupported mode:", O.mode);
}
/* Draw the rectangle */
_handle.setAttribute("x", Math.round(+X[0]).toFixed(0));
_handle.setAttribute("y", Math.round(+X[1]).toFixed(0));
_handle.setAttribute("width", Math.round(+X[2]-X[0]).toFixed(0));
_handle.setAttribute("height", Math.round(+X[3]-X[1]).toFixed(0));
}
}
function redraw_zhandle(O, X) {
var vec;
var size;
var zhandle = this._zhandle;
if (!O.show_handle || O.z_handle === false) {
if (zhandle) remove_zhandle.call(this);
return;
}
if (!zhandle.parentNode)
this.element.appendChild(zhandle);
if (this._handle && O.z_handle_below)
this.element.appendChild(this._handle);
if (O.mode === "circular") {
/*
* position the z_handle on the circle.
*/
vec = get_zhandle_position_movable(O, X);
/* width and height are equal here */
zhandle.setAttribute("cx", vec[0].toFixed(1));
zhandle.setAttribute("cy", vec[1].toFixed(1));
zhandle.setAttribute("r", (O.z_handle_size / 2).toFixed(1));
this.zhandle_position = vec;
} else if (O.mode === "block") {
/*
* position the z_handle on the box.
*/
vec = get_zhandle_position_movable(O, X);
size = O.z_handle_size / 2;
/* width and height are equal here */
zhandle.setAttribute("x", vec[0].toFixed(0) - size);
zhandle.setAttribute("y", vec[1].toFixed(0) - size);
zhandle.setAttribute("width", O.z_handle_size);
zhandle.setAttribute("height", O.z_handle_size);
this.zhandle_position = vec;
} else {
// all other handle types (lines/blocks)
this.zhandle_position = vec = get_zhandle_size(O, X);
zhandle.setAttribute("width", vec[0].toFixed(0));
zhandle.setAttribute("height", vec[1].toFixed(0));
vec = get_zhandle_position(O, X, vec);
zhandle.setAttribute("x", vec[0].toFixed(0));
zhandle.setAttribute("y", vec[1].toFixed(0));
/* adjust to the center of the zhandle */
this.zhandle_position[0] /= 2;
this.zhandle_position[1] /= 2;
this.zhandle_position[0] += vec[0];
this.zhandle_position[1] += vec[1];
}
this.zhandle_position[0] -= (X[0]+X[2])/2;
this.zhandle_position[1] -= (X[1]+X[3])/2;
normalize(this.zhandle_position);
}
function prevent_default(e) {
e.preventDefault();
return false;
}
function create_label() {
var E;
this._label = E = TK.make_svg("text", {
"class": "toolkit-label"
});
TK.add_event_listener(E, "mousewheel", this._scrollwheel);
TK.add_event_listener(E, "DOMMouseScroll", this._scrollwheel);
TK.add_event_listener(E, 'contextmenu', prevent_default);
}
function remove_label() {
var E = this._label;
this._label = null;
E.remove();
TK.remove_event_listener(E, "mousewheel", this._scrollwheel);
TK.remove_event_listener(E, "DOMMouseScroll", this._scrollwheel);
TK.remove_event_listener(E, 'contextmenu', prevent_default);
this.label = [0,0,0,0];
}
function STOP() { return false; };
function create_handle() {
var O = this.options;
var E;
if (this._handle) remove_handle.call(this);
E = TK.make_svg(O.mode === "circular" ? "circle" : "rect",
{ class: "toolkit-handle" });
TK.add_event_listener(E, "mousewheel", this._scrollwheel);
TK.add_event_listener(E, "DOMMouseScroll", this._scrollwheel);
TK.add_event_listener(E, 'selectstart', prevent_default);
TK.add_event_listener(E, 'contextmenu', prevent_default);
this._handle = E;
this.element.appendChild(E);
}
function remove_handle() {
var E = this._handle;
if (!E) return;
this._handle = null;
E.remove();
TK.remove_event_listener(E, "mousewheel", this._scrollwheel);
TK.remove_event_listener(E, "DOMMouseScroll", this._scrollwheel);
TK.remove_event_listener(E, "selectstart", prevent_default);
TK.remove_event_listener(E, 'contextmenu', prevent_default);
}
function redraw_label(O, X) {
if (!O.show_handle || O.label === false) {
if (this._label) remove_label.call(this);
return false;
}
var a = O.label.call(this, O.title, O.x, O.y, O.z).split("\n");
var c = this._label.childNodes;
while (c.length < a.length) {
this._label.appendChild(TK.make_svg("tspan", {dy:"1.0em"}));
}
while (c.length > a.length) {
this._label.removeChild(this._label.lastChild);
}
for (var i = 0; i < a.length; i++) {
TK.set_text(c[i], a[i]);
}
if (!this._label.parentNode) this.element.appendChild(this._label);
TK.S.add(function() {
var w = 0;
for (var i = 0; i < a.length; i++) {
w = Math.max(w, c[i].getComputedTextLength());
}
var bbox;
try {
bbox = this._label.getBBox();
} catch(e) {
/* _label is not in the DOM yet */
return;
}
TK.S.add(function() {
var label_size = [ w, bbox.height ];
var i;
var pref = O.preferences;
var area = 0;
var label_position;
var text_position;
var text_anchor;
var tmp;
/*
* Calculate possible positions of the labels and calculate their intersections. Choose
* that position which has the smallest intersection area with all other handles and labels
*/
for (i = 0; i < pref.length; i++) {
/* get alignment */
var align = get_label_align(O, pref[i]);
/* get label position */
var LX = get_label_position(O, X, pref[i], label_size);
/* calculate the label bounding box using anchor and dimensions */
var pos = get_label_dimensions(align, LX, label_size);
tmp = O.intersect(pos, this);
/* We require at least one square px smaller intersection
* to avoid flickering label positions */
if (area === 0 || tmp.intersect + 1 < area) {
area = tmp.intersect;
label_position = pos;
text_position = LX;
text_anchor = align;
/* there is no intersections, we are done */
if (area === 0) break;
}
}
this.label = label_position;
tmp = Math.round(text_position[0]) + "px";
this._label.setAttribute("x", tmp);
this._label.setAttribute("y", Math.round(text_position[1]) + "px");
this._label.setAttribute("text-anchor", text_anchor);
var c = this._label.childNodes;
for (var i = 0; i < c.length; i++)
c[i].setAttribute("x", tmp);
redraw_lines.call(this, O, X);
}.bind(this), 1);
}.bind(this));
return true;
}
function redraw_lines(O, X) {
if (!O.show_handle) {
if (this._line1) remove_line1.call(this);
if (this._line2) remove_line2.call(this);
return;
}
var pos = this.label;
var range_x = this.range_x;
var range_y = this.range_y;
var range_z = this.range_z;
var x = range_x.val2px(O.x);
var y = range_y.val2px(O.y);
var z = range_z.val2px(O.z);
switch (O.mode) {
case "circular":
case "block":
if (O.show_axis) {
this._line1.setAttribute("d",
format_line(((y >= pos[1] && y <= pos[3]) ? Math.max(X[2], pos[2]) : X[2]) + O.margin, y,
range_x.options.basis, y));
this._line2.setAttribute("d",
format_line(x, ((x >= pos[0] && x <= pos[2]) ? Math.max(X[3], pos[3]) : X[3]) + O.margin,
x, range_y.options.basis));
} else {
if (this._line1) remove_line1.call(this);
if (this._line2) remove_line2.call(this);
}
break;
case "line-vertical":
case "block-left":
case "block-right":
this._line1.setAttribute("d", format_line(x, X[1], x, X[3]));
if (O.show_axis) {
this._line2.setAttribute("d", format_line(0, y, range_x.options.basis, y));
} else if (this._line2) {
remove_line2.call(this);
}
break;
case "line-horizontal":
case "block-top":
case "block-bottom":
this._line1.setAttribute("d", format_line(X[0], y, X[2], y));
if (O.show_axis) {
this._line2.setAttribute("d", format_line(x, 0, x, range_y.options.basis));
} else if (this._line2) {
remove_line2.call(this);
}
break;
default:
TK.warn("Unsupported mode", pref[i]);
}
if (this._line1 && !this._line1.parentNode) this.element.appendChild(this._line1);
if (this._line2 && !this._line2.parentNode) this.element.appendChild(this._line2);
}
function set_main_class(O) {
var E = this.element;
var i;
for (i = 0; i < MODES.length; i++) TK.remove_class(E, "toolkit-"+MODES[i]);
TK.remove_class(E, "toolkit-line");
TK.remove_class(E, "toolkit-block");
switch (O.mode) {
case "line-vertical":
case "line-horizontal":
TK.add_class(E, "toolkit-line");
case "circular":
break;
case "block-left":
case "block-right":
case "block-top":
case "block-bottom":
case "block":
TK.add_class(E, "toolkit-block");
break;
default:
TK.warn("Unsupported mode:", O.mode);
return;
}
TK.add_class(E, "toolkit-"+O.mode);
}
function startdrag() {
this.draw_once(function() {
var e = this.element;
var p = e.parentNode;
TK.add_class(e, "toolkit-active");
this.set("dragging", true);
/* TODO: move this into the parent */
TK.add_class(this.parent.element, "toolkit-dragging");
this.global_cursor("move");
if (p.lastChild !== e)
p.appendChild(e);
});
}
function enddrag() {
this.draw_once(function() {
var e = this.element;
TK.remove_class(e, "toolkit-active");
this.set("dragging", false);
/* TODO: move this into the parent */
TK.remove_class(this.parent.element, "toolkit-dragging");
this.remove_cursor("move");
});
}
/**
* Class which represents a draggable SVG element, which can be used to represent and change
* a value inside of a {@link TK.ResponseHandler} and is drawn inside of a chart.
*
* @class TK.ResponseHandle
*
* @extends TK.Widget
*
* @param {Object} [options={ }] - An object containing initial options.
*
* @property {Function|Object} options.range_x - Callback returning a {@link TK.Range}
* for the x-axis or an object with options for a {@link TK.Range}. This is usually
* the <code>x_range</code> of the parent chart.
* @property {Function|Object} options.range_y - Callback returning a {@link TK.Range}
* for the y-axis or an object with options for a {@link TK.Range}. This is usually
* the <code>y_range</code> of the parent chart.
* @property {Function|Object} options.range_z - Callback returning a {@link TK.Range}
* for the z-axis or an object with options for a {@link TK.Range}.
* @property {String} [options.mode="circular"] - Type of the handle. Can be one out of
* <code>circular</code>, <code>line-vertical</code>, <code>line-horizontal</code>,
* <code>block-left</code>, <code>block-right</code>, <code>block-top</code> or
* <code>block-right</code>.
* @property {Number} [options.x] - Value of the x-coordinate.
* @property {Number} [options.y] - Value of the y-coordinate.
* @property {Number} [options.z] - Value of the z-coordinate.
* @property {Number} [options.min_size=24] - Minimum size of the handle in px.
* @property {Number} [options.max_size=100] - Maximum size of the handle in px.
* @property {Function|Boolean} options.label - Label formatting function. Arguments are
* <code>title</code>, <code>x</code>, <code>y</code>, <code>z</code>. If set to <code>false</code>, no label is displayed.
* @property {Array<String>} [options.preferences=["left", "top", "right", "bottom"]] - Possible label
* positions by order of preference. Depending on the selected <code>mode</code> this can
* be a subset of <code>top</code>, <code>top-right</code>, <code>right</code>,
* <code>bottom-right</code>, <code>bottom</code>, <code>bottom-left</code>,
* <code>left</code>, <code>top-left</code> and <code>center</code>.
* @property {Number} [options.margin=3] - Margin in px between the handle and the label.
* @property {Boolean|String} [options.z_handle=false] - If not false, a small handle is drawn at the given position (`top`, `top-left`, `top-right`, `left`, `center`, `right`, `bottom-left`, `bottom`, `bottom-right`), which can
* be dragged to change the value of the z-coordinate.
* @property {Number} [options.z_handle_size=6] - Size in px of the z-handle.
* @property {Number} [options.z_handle_centered=0.1] - Size of the z-handle in center positions.
* If this options is between 0 and 1, it is interpreted as a ratio, otherwise as a px size.
* @property {Number} [options.z_handle_below=false] - Render the z-handle below the normal handle in the DOM. SVG doesn't know CSS attribute z-index, so this workaround is needed from time to time.
* @property {Number} [options.x_min] - Minimum value of the x-coordinate.
* @property {Number} [options.x_max] - Maximum value of the x-coordinate.
* @property {Number} [options.y_min] - Minimum value of the y-coordinate.
* @property {Number} [options.y_max] - Maximum value of the y-coordinate.
* @property {Number} [options.z_min] - Minimum value of the z-coordinate.
* @property {Number} [options.z_max] - Maximum value of the z-coordinate.
* @property {Boolean} [options.show_axis=false] - If set to true, additional lines are drawn at the coordinate values.
*
* @mixes TK.Ranges
* @mixes TK.Warning
* @mixes TK.GlobalCursor
*/
/**
* @member {SVGText} TK.ResponseHandle#_label - The label. Has class <code>toolkit-label</code>.
*/
/**
* @member {SVGPath} TK.ResponseHandle#_line1 - The first line. Has class <code>toolkit-line toolkit-line-1</code>.
*/
/**
* @member {SVGPath} TK.ResponseHandle#_line2 - The second line. Has class <code>toolkit-line toolkit-line-2</code>.
*/
function set_min(value, key) {
var name = key.substr(0, 1);
var O = this.options;
if (value !== false && O[name] < value) this.set(name, value);
}
function set_max(value, key) {
var name = key.substr(0, 1);
var O = this.options;
if (value !== false && O[name] > value) this.set(name, value);
}
/**
* The <code>useraction</code> event is emitted when a widget gets modified by user interaction.
* The event is emitted for the options <code>x</code>, <code>y</code> and <code>z</code>.
*
* @event TK.ResponseHandle#useraction
*
* @param {string} name - The name of the option which was changed due to the users action.
* @param {mixed} value - The new value of the option.
*/
TK.ResponseHandle = TK.class({
_class: "ResponseHandle",
Extends: TK.Widget,
Implements: [TK.GlobalCursor, TK.Ranges, TK.Warning],
_options: Object.assign(Object.create(TK.Widget.prototype._options), TK.Ranges.prototype._options, {
range_x: "mixed",
range_y: "mixed",
range_z: "mixed",
intersect: "function",
mode: "string",
preferences: "array",
label: "function|boolean",
x: "number",
y: "number",
z: "number",
min_size: "number",
max_size: "number",
margin: "number",
z_handle: "boolean|string",
z_handle_size: "number",
z_handle_centered: "number",
z_handle_below: "boolean",
min_drag: "number",
x_min: "number",
x_max: "number",
y_min: "number",
y_max: "number",
z_min: "number",
z_max: "number",
active: "boolean",
show_axis: "boolean",
title: "string",
hover: "boolean",
dragging: "boolean",
show_handle: "boolean"
}),
options: {
range_x: {},
range_y: {},
range_z: {},
intersect: function () { return { intersect: 0, count: 0 } },
// NOTE: this is currently not a public API
// callback function for checking intersections: function (x1, y1, x2, y2, id) {}
// returns a value describing the amount of intersection with other handle elements.
// intersections are weighted depending on the intersecting object. E.g. SVG borders have
// a very high impact while intersecting in comparison with overlapping handle objects
// that have a low impact on intersection
mode: "circular",
preferences: ["left", "top", "right", "bottom"],
label: TK.FORMAT("%s\n%d Hz\n%.2f dB\nQ: %.2f"),
x: 0,
y: 0,
z: 0,
min_size: 24,
max_size: 100,
margin: 3,
z_handle: false,
z_handle_size: 6,
z_handle_centered:0.1,
z_handle_below: false,
min_drag: 0,
// NOTE: not yet a public API
// amount of pixels the handle has to be dragged before it starts to move
x_min: false,
x_max: false,
y_min: false,
y_max: false,
z_min: false,
z_max: false,
active: true,
show_axis: false,
hover: false,
dragging: false,
show_handle: true
},
static_events: {
set_show_axis: function(value) {
var O = this.options;
if (O.mode === "circular") create_line1.call(this);
create_line2.call(this);
},
set_label: function(value) {
if (value !== false && !this._label) create_label.call(this);
},
set_show_handle: function(value) {
this.set("mode", this.options.mode);
this.set("show_axis", this.options.show_axis);
this.set("label", this.options.label);
},
set_mode: function(value) {
var O = this.options;
if (!O.show_handle) return;
create_handle.call(this);
if (O.z_handle !== false) create_zhandle.call(this);
if (value !== "circular") create_line1.call(this);
},
set_x_min: set_min,
set_y_min: set_min,
set_z_min: set_min,
set_x_max: set_max,
set_y_max: set_max,
set_z_max: set_max,
mouseenter: function() {
this.set("hover", true);
},
mouseleave: function() {
this.set("hover", false);
},
set_active: function(v) {
if (!v) {
this.pos_drag.cancel_drag();
this.z_drag.cancel_drag();
}
},
},
initialize: function (options) {
this.label = [0,0,0,0];
this.handle = [0,0,0,0];
this._zwheel = false;
this.__sto = 0;
TK.Widget.prototype.initialize.call(this, options);
var O = this.options;
/**
* @member {TK.Range} TK.ResponseHandle#range_x - The {@link TK.Range} for the x axis.
*/
/**
* @member {TK.Range} TK.ResponseHandle#range_y - The {@link TK.Range} for the y axis.
*/
/**
* @member {TK.Range} TK.ResponseHandle#range_z - The {@link TK.Range} for the z axis.
*/
this.add_range(O.range_x, "range_x");
this.add_range(O.range_y, "range_y");
this.add_range(O.range_z, "range_z");
var set_cb = function() {
this.invalid.x = true;
this.trigger_draw();
}.bind(this);
this.range_x.add_event("set", set_cb);
this.range_y.add_event("set", set_cb);
this.range_z.add_event("set", set_cb);
var E = TK.make_svg("g");
/**
* @member {SVGGroup} TK.ResponseHandle#element - The main SVG group containing all handle elements. Has class <code>toolkit-response-handle</code>.
*/
this.element = E;
this.widgetize(E, true, true);
TK.add_class(E, "toolkit-response-handle");
/**
* @member {SVGCircular} TK.ResponseHandle#_handle - The main handle.
* Has class <code>toolkit-handle</code>.
*/
/**
* @member {SVGCircular} TK.ResponseHandle#_zhandle - The handle for manipulating z axis.
* Has class <code>toolkit-z-handle</code>.
*/
this._scrollwheel = scrollwheel.bind(this);
this._handle = this._zhandle = this._line1 = this._line2 = this._label = null;
this.z_drag = new TK.DragCapture(this, {
node: null,
onstartcapture: function(state) {
var self = this.parent;
var O = self.options;
if (!O.active) return;
state.z = self.range_z.val2px(O.z);
/* the main handle is active,
* this is a z gesture */
var pstate = self.pos_drag.state();
if (pstate) {
var d;
var v = [ state.current.clientX - pstate.prev.clientX,
state.current.clientY - pstate.prev.clientY ];
normalize(v);
state.vector = v;
} else {
state.vector = self.zhandle_position;
}
/**
* Is fired when the user grabs the z-handle. The argument is the
* actual z value.
*
* @event TK.ResponseHandle#zchangestarted
*
* @param {number} z - The z value.
*/
self.fire_event("zchangestarted", O.z);
startdrag.call(self);
return true;
},
onmovecapture: function(state) {
var self = this.parent;
var O = self.options;
var zv = state.vector;
var v = state.vdistance();
var d = zv[0] * v[0] + zv[1] * v[1];
/* ignore small movements */
if (O.min_drag > 0 && O.min_drag > d) return;
var range_z = self.range_z;
var z = range_z.px2val(state.z + d);
self.userset("z", z);
},
onstopcapture: function() {
var self = this.parent;
/**
* Is fired when the user releases the z-handle. The argument is the
* actual z value.
*
* @event TK.ResponseHandle#zchangeended
*
* @param {number} z - The z value.
*/
self.fire_event("zchangeended", self.options.z);
enddrag.call(self);
},
});
this.pos_drag = new TK.DragCapture(this, {
node: this.element,
onstartcapture: function(state) {
var self = this.parent;
var O = self.options;
if (!O.active) return;
var button = state.current.button;
var E = self.element;
var p = E.parentNode;
var ev = state.current;
self.z_drag.set("node", document);
/* right click triggers move to the back */
if (ev.button === 2) {
if (E !== p.firstChild)
self.draw_once(function() {
var e = this.element;
var p = e.parentNode;
if (p && e !== p.firstChild) p.insertBefore(e, p.firstChild);
});
/* cancel everything else, but do not drag */
ev.preventDefault();
ev.stopPropagation();
return false;
}
state.x = self.range_x.val2px(O.x);
state.y = self.range_y.val2px(O.y);
/**
* Is fired when the main handle is grabbed by the user.
* The argument is an object with the following members:
* <ul>
* <li>x: the actual value on the x axis</li>
* <li>y: the actual value on the y axis</li>
* <li>pos_x: the position in pixels on the x axis</li>
* <li>pos_y: the position in pixels on the y axis</li>
* </ul>
*
* @event TK.ResponseHandle#handlegrabbed
*
* @param {Object} positions - An object containing all relevant positions of the pointer.
*/
self.fire_event("handlegrabbed", {
x: O.x,
y: O.y,
pos_x: state.x,
pos_y: state.y
});
startdrag.call(self);
return true;
},
onmovecapture: function(state) {
var self = this.parent;
var O = self.options;
/* ignore small movements */
if (O.min_drag > 0 && O.min_drag > state.distance()) return;
/* we are changing z right now using a gesture, irgnore this movement */
if (self.z_drag.dragging()) return;
var v = state.vdistance();
var range_x = self.range_x;
var range_y = self.range_y;
var x = range_x.px2val(state.x + v[0]);
var y = range_y.px2val(state.y + v[1]);
self.userset("x", x);
self.userset("y", y);
},
onstopcapture: function() {
/**
* Is fired when the user releases the main handle.
* The argument is an object with the following members:
* <ul>
* <li>x: the actual value on the x axis</li>
* <li>y: the actual value on the y axis</li>
* <li>pos_x: the position in pixels on the x axis</li>
* <li>pos_y: the position in pixels on the y axis</li>
* </ul>
*
* @event TK.ResponseHandle#handlereleased
*
* @param {Object} positions - An object containing all relevant positions of the pointer.
*/
var self = this.parent;
var O = self.options;
self.fire_event("handlereleased", {
x: O.x,
y: O.y,
pos_x: self.range_x.val2px(O.x),
pos_y: self.range_y.val2px(O.y),
});
enddrag.call(self);
self.z_drag.set("node", self._zhandle);
},
});
this.set("mode", O.mode);
this.set("show_handle", O.show_handle);
this.set("show_axis", O.show_axis);
this.set("active", O.active);
this.set("x", O.x);
this.set("y", O.y);
this.set("z", O.z);
this.set("z_handle", O.z_handle);
this.set("label", O.label);
},
redraw: function () {
TK.Widget.prototype.redraw.call(this);
var O = this.options;
var I = this.invalid;
var range_x = this.range_x;
var range_y = this.range_y;
var range_z = this.range_z;
/* These are the coordinates of the corners (x1, y1, x2, y2)
* NOTE: x,y are not necessarily in the midde. */
var X = this.handle;
if (I.mode) set_main_class.call(this, O);
if (I.hover) {
I.hover = false;
TK.toggle_class(this.element, "toolkit-hover", O.hover);
}
if (I.dragging) {
I.dragging = false;
TK.toggle_class(this.element, "toolkit-dragging", O.dragging);
}
if (I.active || I.disabled) {
I.disabled = false;
// TODO: this is not very nice, we should really use the options
// for that. 1) set "active" from the mouse handlers 2) set disabled instead
// of active
TK.toggle_class(this.element, "toolkit-disabled", !O.active || O.disabled);
}
var moved = I.validate("x", "y", "z", "mode", "active", "show_handle");
if (moved) redraw_handle.call(this, O, X);
// Z-HANDLE
if (I.validate("z_handle") || moved) {
redraw_zhandle.call(this, O, X);
}
var delay_lines;
// LABEL
if (I.validate("label", "title", "preference") || moved) {
delay_lines = redraw_label.call(this, O, X);
}
// LINES
if (I.validate("show_axis") || moved) {
if (!delay_lines) redraw_lines.call(this, O, X);
}
},
set: function(key, value) {
var O = this.options;
switch (key) {
case "z_handle":
if (value !== false && !ZHANDLE_POSITION_circular[value]) {
TK.warn("Unsupported z_handle option:", value);
value = false;
}
if (value !== false) create_zhandle.call(this);
break;
case "x":
value = this.range_x.snap(value);
if (O.x_min !== false && value < O.x_min) value = O.x_min;
if (O.x_max !== false && value > O.x_max) value = O.x_max;
break;
case "y":
value = this.range_y.snap(value);
if (O.y_min !== false && value < O.y_min) value = O.y_min;
if (O.y_max !== false && value > O.y_max) value = O.y_max;
break;
case "z":
value = this.range_z.snap(value);
if (O.z_min !== false && value < O.z_min) {
value = O.z_min;
this.warning(this.element);
} else if (O.z_max !== false && value > O.z_max) {
value = O.z_max;
this.warning(this.element);
}
break;
}
return TK.Widget.prototype.set.call(this, key, value);
},
destroy: function () {
remove_zhandle.call(this);
remove_line1.call(this);
remove_line2.call(this);
remove_label.call(this);
remove_handle.call(this);
TK.Widget.prototype.destroy.call(this);
},
});
})(this, this.TK);
Copy Permalink