import { Control } from "ol/control";
import noUiSlider from "nouislider";
import "nouislider/distribute/nouislider.css";
import { guidGenerator } from "../helpers";
import { Resources } from "../../resources/resources";
const steps = [
{
step: 1,
class: "x1",
},
{
step: 0.5,
class: "x2",
},
{
step: 0.2,
class: "x3",
},
{
step: 0.1,
class: "x4",
},
{
step: 0.05,
class: "x5",
},
];
export /**
* Creates a new dimension selector control
* @alias DimensionSelector
* @memberof PMA.UI.View.Controls
* @param {object} opt_options Options to initialize
* @param {Viewport} opt_options.pmaViewport Viewport instance this control belongs to
* @param {string} opt_options.tipLabel Label for the button
* @param {boolean} opt_options.collapsed Whether the control starts collapsed
* @param {Object} opt_options.stateManager The state manager to keep settings in sync
*/
class DimensionSelector extends Control {
constructor(opt_options) {
var options = opt_options || {};
var element = document.createElement("div");
super({
element: element,
target: options.target,
});
this.options = options;
this.pmaViewport = options.pmaViewport;
this.stateManager = options.stateManager ? options.stateManager : null;
if (this.stateManager) {
if (!this.stateManager.dimensionSelector) {
this.stateManager.dimensionSelector = {};
this.stateManager.dimensionSelector.collapsed = options.collapsed ? options.collapsed : false;
}
this.collapsed_ = this.stateManager.dimensionSelector.collapsed === true;
} else {
this.collapsed_ = options.collapsed ? options.collapsed : false;
}
this.sliders = [];
this.slidersValues = [];
this.currentStep = 0;
var className = options.className ? options.className : "ol-dimension-selector";
this.tipLabel = options.tipLabel ? options.tipLabel : "Channels";
var collapseLabel = options.collapseLabel ? options.collapseLabel : "\u00BB";
this.collapseLabel_ = document.createElement("span");
this.collapseLabel_.innerHTML = collapseLabel;
var label = options.label ? options.label : "\u00AB";
this.label_ = document.createElement("span");
this.label_.innerHTML = label;
var activeLabel = this.collapsed_ ? this.collapseLabel_ : this.label_;
var button = document.createElement("button");
button.type = "button";
button.title = this.tipLabel;
button.appendChild(activeLabel);
button.className = "collapse-button";
button.style = "float: left";
this.btnEventUsed = "click";
if ("ontouchstart" in document.documentElement) {
this.btnEventUsed = "touchstart";
}
button.addEventListener(this.btnEventUsed, this.buttonClk.bind(this), false);
var cssClasses = className + " " + "ol-unselectable ol-control " + (this.collapsed_ ? " ol-collapsed" : "");
this.dimensionsDiv = document.createElement("div");
this.dimensionsDiv.className = "ol-dimensions-container";
this.renderDimensionsControl();
this.dimensionControlsDiv = document.createElement("div");
this.dimensionControlsDiv.className = "ol-dimensions-container";
this.renderSelectors(true);
element.className = cssClasses;
if (this.dimensionsDiv && this.dimensionsDiv !== "") {
element.appendChild(this.dimensionsDiv);
}
if (this.dimensionControlsDiv && this.dimensionControlsDiv !== "") {
element.appendChild(this.dimensionControlsDiv);
}
element.appendChild(button);
var tipLabel = "";
var label_ = "";
tipLabel = "Decrease resolution";
label = '<i class="fa fa-minus" aria-hidden="true"></i>';
label_ = document.createElement("span");
label_.innerHTML = label;
this.lastSelection = -1;
//this.element.addEventListener("wheel", this.wheelEvent.bind(this), false);
this.pmaViewport.element.addEventListener(
"wheel",
(e) => {
if (e.ctrlKey) {
this.wheelEvent(e, true);
}
if (e.shiftKey) {
this.wheelEvent(e, false);
}
},
false
);
/*this.pmaViewport.listen("change:dimension", function () {
_this.destroySliders();
_this.renderDimensionsControl();
_this.renderSelectors(false);
_this.renderSliders(_this.currentStep);
});*/
}
buttonClk(event) {
if (event) {
event.preventDefault();
event.stopPropagation();
}
if ((" " + this.element.className + " ").indexOf(" ol-collapsed ") > -1) {
this.element.className = this.element.className.replace(/ol-collapsed/g, "");
} else {
this.element.className += " ol-collapsed";
}
if (!isBrightfield(this.pmaViewport.imageInfo.TimeFrames[0].Layers[0])) {
if (!this.collapsed_) {
this.label_.parentNode.replaceChild(this.collapseLabel_, this.label_);
} else {
this.collapseLabel_.parentNode.replaceChild(this.label_, this.collapseLabel_);
}
}
this.collapsed_ = !this.collapsed_;
if (this.stateManager) {
this.stateManager.dimensionSelector.collapsed = this.collapsed_;
}
}
/**
* Gets the collapsed state of the control
* @return {boolean} True if the control is currently collapsed
*/
getCollapsed() {
return (" " + this.element.className + " ").indexOf(" ol-collapsed ") > -1;
}
/**
* Sets the collapsed state of the control
* @param {boolean} collapsed - True to collapse the control, otherwise false
*/
setCollapsed(collapsed) {
if (this.getCollapsed() != collapsed) {
this.buttonClk();
}
}
renderDimensionsControl() {
// assign change event to the channel check boxes
function chkChange() {
// assign the selected channels back to the viewport
var chans = [];
var chks = this.dimensionsDiv.querySelectorAll(".ol-dimensions-container ul input[type='checkbox']");
for (var i = 0; i < chks.length; i++) {
if (chks[i].checked) {
chans.push(i);
this.lastSelection = i;
}
}
if (chans.length === 0 && this.lastSelection >= 0 && this.lastSelection < chks.length) {
chks[this.lastSelection].checked = true;
chans.push(this.lastSelection);
}
this.pmaViewport.setActiveChannels(chans);
}
this.sliders = [];
if (!isBrightfield(this.pmaViewport.imageInfo.TimeFrames[0].Layers[0])) {
var channelsHtml = "<div id='channels'>" + this.tipLabel + "</div><div id='step'></div><ul>";
const rendOpts = this.pmaViewport.getChannelRenderingOptions();
for (var i = 0; i < this.pmaViewport.imageInfo.TimeFrames[0].Layers[0].Channels.length; i++) {
const guid = guidGenerator();
this.sliders.push(guid);
var c = this.pmaViewport.imageInfo.TimeFrames[0].Layers[0].Channels[i];
this.slidersValues.push(rendOpts[i].clipping);
channelsHtml += "<li style='background-color: #" + rendOpts[i].color.substr(2, 6) + "'>";
channelsHtml +=
"<span class='channel-span'><label title='" +
rendOpts[i].name +
"' for='" +
`${guid}_channel_checkbox` +
"'>" +
rendOpts[i].name +
"</label><input id='" +
`${guid}_channel_checkbox` +
"' type='checkbox' " +
(c.Active ? "checked='checked'" : "") +
" />";
channelsHtml +=
"<button id='" +
`${guid}_color_reset` +
"' title=\"Click to reset channel's color to initial value\" class='color-reset' style='" +
(this.options.supportsRenderingOptions ? "" : "display: none") +
"'><i class='fa fa-undo' aria-hidden='true'></i></button>";
channelsHtml +=
"<input id='" +
`${guid}_color_selector` +
"' title=\"Click to select channel's color\" type='color' class='color-selector' style='" +
(this.options.supportsRenderingOptions ? "" : "display: none") +
"' data-default-color='#" +
rendOpts[i].defaultColor.substr(2, 6) +
"' value='#" +
rendOpts[i].color.substr(2, 6) +
"' />";
channelsHtml += "</span>";
if (c.Name !== "Default") {
channelsHtml += "<span class='slider-span' id='" + `${guid}_slider` + "'></span>";
}
channelsHtml += "</li>";
}
channelsHtml += "</ul>";
if (this.sliders.length > 0) {
channelsHtml += "<div style='display: block; height: 25px;'>";
channelsHtml += "<button id='increaseButton' type='button' title='Increase resolution' style='float: right;'>";
channelsHtml += "<span style='font-size: 10px'><i class='fa fa-plus' aria-hidden='true'></i></span>";
channelsHtml += "</button>";
channelsHtml += "<button id='decreaseButton' type='button' title='Decrease resolution' style='float: right;'>";
channelsHtml += "<span style='font-size: 10px'><i class='fa fa-minus' aria-hidden='true'></i></span>";
channelsHtml += "</button>";
channelsHtml += "</div>";
}
this.dimensionsDiv.innerHTML = channelsHtml;
var checkboxes = this.dimensionsDiv.querySelectorAll(".ol-dimensions-container ul input[type='checkbox']");
for (i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener("change", chkChange.bind(this), false);
}
if (this.sliders.length > 0) {
var _this = this;
this.dimensionsDiv.querySelector("#increaseButton").addEventListener(
"click",
function () {
_this.destroySliders();
_this.renderDimensionsControl();
_this.renderSelectors(false);
_this.currentStep = _this.currentStep < 4 ? _this.currentStep + 1 : _this.currentStep;
_this.renderSliders(_this.currentStep);
},
false
);
this.dimensionsDiv.querySelector("#decreaseButton").addEventListener(
"click",
function () {
_this.destroySliders();
_this.renderDimensionsControl();
_this.renderSelectors(false);
_this.currentStep = _this.currentStep > 0 ? _this.currentStep - 1 : _this.currentStep;
_this.renderSliders(_this.currentStep);
},
false
);
}
}
}
renderSelectors(initialRender) {
function dimensionChange(e) {
if (e.target.name == "timeframe") {
this.pmaViewport.setActiveTimeFrame(e.target.value);
} else if (e.target.name == "zstack") {
this.pmaViewport.setActiveLayer(e.target.value);
}
if (document.getElementById("zstackSlider")) {
document.getElementById("zstackLabel").innerHTML = Resources.translate("Z-stack: <br /> {stack} / {total}", {
stack: this.pmaViewport.getActiveLayer() + 1,
total: this.pmaViewport.imageInfo.TimeFrames[this.pmaViewport.getActiveTimeFrame()].Layers.length,
});
}
if (document.getElementById("timeframeSlider")) {
document.getElementById("timeframeLabel").innerHTML = Resources.translate("Time frame: <br /> {frame} / {total}", {
frame: this.pmaViewport.getActiveTimeFrame() + 1,
total: this.pmaViewport.imageInfo.TimeFrames.length,
});
}
}
function prevNextClicked(e) {
var tf = this.pmaViewport.getActiveTimeFrame();
var l = this.pmaViewport.getActiveLayer();
if (e.target.name == "prev-timeframe") {
tf--;
if (tf < 0) {
tf = this.pmaViewport.imageInfo.TimeFrames.length - 1;
}
this.pmaViewport.setActiveTimeFrame(tf);
} else if (e.target.name == "next-timeframe") {
tf++;
if (tf >= this.pmaViewport.imageInfo.TimeFrames.length) {
tf = 0;
}
this.pmaViewport.setActiveTimeFrame(tf);
} else if (e.target.name == "prev-zstack") {
l--;
if (l < 0) {
l = this.pmaViewport.imageInfo.TimeFrames[tf].Layers.length - 1;
}
this.pmaViewport.setActiveLayer(l);
} else if (e.target.name == "next-zstack") {
l++;
if (l >= this.pmaViewport.imageInfo.TimeFrames[tf].Layers.length) {
l = 0;
}
this.pmaViewport.setActiveLayer(l);
}
if (document.getElementById("zstackSlider")) {
document.getElementById("zstackSlider").value = l;
document.getElementById("zstackLabel").innerHTML = Resources.translate("Z-stack: <br /> {stack} / {total}", {
stack: this.pmaViewport.getActiveLayer() + 1,
total: this.pmaViewport.imageInfo.TimeFrames[this.pmaViewport.getActiveTimeFrame()].Layers.length,
});
}
if (document.getElementById("timeframeSlider")) {
document.getElementById("timeframeSlider").value = tf;
document.getElementById("timeframeLabel").innerHTML = Resources.translate("Time frame: <br /> {frame} / {total}", {
frame: this.pmaViewport.getActiveTimeFrame() + 1,
total: this.pmaViewport.imageInfo.TimeFrames.length,
});
}
}
var HTMLstring = "";
if (this.pmaViewport.imageInfo.TimeFrames.length > 1) {
HTMLstring +=
'<div id="timeframeLabel">' +
Resources.translate("Time frame: <br /> {frame} / {total}", {
frame: this.pmaViewport.getActiveTimeFrame() + 1,
total: this.pmaViewport.imageInfo.TimeFrames.length,
}) +
"</div>";
HTMLstring += "<button name='prev-timeframe' class='prev-next-button' title=\"Click to switch to previous time frame\"><</button>";
HTMLstring +=
'<input type="range" min="0" max="' +
(this.pmaViewport.imageInfo.TimeFrames.length - 1) +
'" value="' +
this.pmaViewport.getActiveTimeFrame() +
'" name="timeframe" id="timeframeSlider" title="Drag to switch between time frames (Shift + MouseWheel)">';
HTMLstring += "<button name='next-timeframe' class='prev-next-button' title=\"Click to switch to next time frame\">></button>";
}
var tf = this.pmaViewport.imageInfo.TimeFrames[this.pmaViewport.getActiveTimeFrame()];
if (tf.Layers.length > 1) {
// if it's the first time we draw the control, select the middle z-stack layer
if (initialRender) {
this.pmaViewport.setActiveLayer(Math.round((tf.Layers.length - 1) / 2) | 0);
}
var selectedZStack = this.pmaViewport.getActiveLayer();
HTMLstring +=
'<div id="zstackLabel">' +
Resources.translate("Z-stack: <br /> {stack} / {total}", { stack: selectedZStack + 1, total: tf.Layers.length }) +
"</div>";
HTMLstring += "<button name='prev-zstack' class='prev-next-button' title=\"Click to switch to previous z-stack\"><</button>";
HTMLstring +=
'<input type="range" min="0" max="' +
(tf.Layers.length - 1) +
'" value="' +
selectedZStack +
'" name="zstack" id="zstackSlider" title="Drag to switch between z-stacks (Ctrl + MouseWheel)">';
HTMLstring += "<button name='next-zstack' class='prev-next-button' title=\"Click to switch to next z-stack\">></button>";
}
if (HTMLstring !== "") {
this.dimensionControlsDiv.innerHTML = "<div>" + HTMLstring + "</div>";
var selects = this.dimensionControlsDiv.querySelectorAll(".ol-dimensions-container input[type=range]");
for (var k = 0; k < selects.length; k++) {
selects[k].addEventListener("input", dimensionChange.bind(this), false);
}
var btns = this.dimensionControlsDiv.querySelectorAll(".ol-dimensions-container .prev-next-button");
for (k = 0; k < btns.length; k++) {
btns[k].addEventListener(this.btnEventUsed, prevNextClicked.bind(this), false);
}
if (this.dimensionControlsDiv.querySelector("#zstackSlider"))
this.dimensionControlsDiv.querySelector("#zstackSlider").addEventListener("wheel", (e) => this.wheelEvent(e, true), false);
if (this.dimensionControlsDiv.querySelector("#timeframeSlider"))
this.dimensionControlsDiv.querySelector("#timeframeSlider").addEventListener("wheel", (e) => this.wheelEvent(e, false), false);
}
}
wheelEvent(e, zStack) {
e.preventDefault();
if ((" " + this.element.className + " ").indexOf(" ol-collapsed ") > -1) {
return;
}
if (
!this.pmaViewport.imageInfo.TimeFrames ||
(this.pmaViewport.imageInfo.TimeFrames.length === 1 &&
this.pmaViewport.imageInfo.TimeFrames[0].Layers &&
this.pmaViewport.imageInfo.TimeFrames[0].Layers.length === 1)
) {
return;
}
var tf = this.pmaViewport.getActiveTimeFrame();
var l = this.pmaViewport.getActiveLayer();
if (e.deltaY && e.deltaY < 0) {
if (zStack) {
l--;
if (l < 0) {
////l = this.pmaViewport.imageInfo.TimeFrames[tf].Layers.length - 1;
l = 0;
}
this.pmaViewport.setActiveLayer(l);
} else {
tf--;
if (tf < 0) {
tf = 0;
}
this.pmaViewport.setActiveLayer(l);
this.pmaViewport.setActiveTimeFrame(tf);
}
} else if (e.deltaY && e.deltaY > 0) {
if (zStack) {
l++;
if (l >= this.pmaViewport.imageInfo.TimeFrames[tf].Layers.length) {
////l = 0;
l = this.pmaViewport.imageInfo.TimeFrames[tf].Layers.length - 1;
}
this.pmaViewport.setActiveLayer(l);
} else {
tf++;
if (tf >= this.pmaViewport.imageInfo.TimeFrames.length) {
////l = 0;
tf = this.pmaViewport.imageInfo.TimeFrames.length - 1;
}
this.pmaViewport.setActiveLayer(l);
this.pmaViewport.setActiveTimeFrame(tf);
}
}
if (document.getElementById("zstackSlider")) {
document.getElementById("zstackSlider").value = l;
document.getElementById("zstackLabel").innerHTML = Resources.translate("Z-stack: <br /> {stack} / {total}", {
stack: this.pmaViewport.getActiveLayer() + 1,
total: this.pmaViewport.imageInfo.TimeFrames[this.pmaViewport.getActiveTimeFrame()].Layers.length,
});
}
if (document.getElementById("timeframeSlider")) {
document.getElementById("timeframeSlider").value = tf;
document.getElementById("timeframeLabel").innerHTML = Resources.translate("Time frame: <br /> {frame} / {total}", {
frame: this.pmaViewport.getActiveTimeFrame() + 1,
total: this.pmaViewport.imageInfo.TimeFrames.length,
});
}
}
round(value, precision) {
var multiplier = Math.pow(10, precision || 0);
return Math.round(value * multiplier) / multiplier;
}
renderSliders(currentStep = 0) {
if (this.sliders.length === 0) {
return;
}
const self = this;
for (var i = 0; i < this.sliders.length; i++) {
var start;
if (this.slidersValues[i]) {
start = this.slidersValues[i];
} else {
start = [0, 100];
}
const guid = this.sliders[i];
var slider = document.getElementById(`${guid}_slider`);
if (slider) {
slider.title = "Drag to adjust channel clipping";
steps.forEach((s) => {
slider.parentElement.classList.remove(s.class);
});
slider.parentElement.classList.add(steps[currentStep].class);
document.getElementById("step").innerText = "Step: " + steps[currentStep].step;
noUiSlider.create(slider, {
start: start,
tooltips: [true, true],
step: steps[currentStep].step,
connect: true,
margin: steps[currentStep].step,
keyboardSupport: true,
range: {
min: 0,
max: 100,
},
format: {
to: function (value) {
return self.round(value, 2).toFixed(2);
},
from: function (value) {
return self.round(value, 2).toFixed(2);
},
},
});
slider.noUiSlider.channelIndex = i;
slider.noUiSlider.on("change", function (value) {
const colorValue = document.getElementById(this.target.id.replace("slider", "color_selector")).value;
self.pmaViewport.setChannelRenderingOptions({ index: this.channelIndex, clipping: value, color: colorValue.replace("#", "ff") });
});
}
var colorSelector = document.getElementById(`${guid}_color_selector`);
if (colorSelector) {
$(colorSelector).data("channel", i);
colorSelector.addEventListener("change", function (ev) {
var clippingValue;
const clippingElement = document.getElementById(ev.target.id.replace("color_selector", "slider"));
if (clippingElement) {
const clippingSlider = clippingElement.noUiSlider;
if (clippingSlider) {
clippingValue = clippingSlider.get();
}
}
if (!clippingValue) clippingValue = ["0.00", "100.00"];
document.getElementById(ev.target.id.replace("color_selector", "slider")).parentElement.style = "background-color: " + ev.target.value;
self.pmaViewport.setChannelRenderingOptions({
index: $(ev.target).data("channel"),
clipping: clippingValue,
color: ev.target.value.replace("#", "ff"),
});
});
}
var colorReset = document.getElementById(`${guid}_color_reset`);
if (colorReset) {
$(colorReset).data("channel", i);
colorReset.addEventListener("click", function (ev) {
this.blur();
const defaultColor = $(document.getElementById(ev.currentTarget.id.replace("color_reset", "color_selector"))).data("default-color");
document.getElementById(ev.currentTarget.id.replace("color_reset", "color_selector")).value = defaultColor;
var clippingValue;
const clippingElement = document.getElementById(ev.currentTarget.id.replace("color_reset", "slider"));
if (clippingElement) {
const clippingSlider = clippingElement.noUiSlider;
if (clippingSlider) {
clippingValue = clippingSlider.get();
}
}
if (!clippingValue) clippingValue = ["0.00", "100.00"];
document.getElementById(ev.currentTarget.id.replace("color_reset", "slider")).parentElement.style = "background-color: " + defaultColor;
self.pmaViewport.setChannelRenderingOptions({
index: $(ev.currentTarget).data("channel"),
clipping: clippingValue,
color: defaultColor.replace("#", "ff"),
});
});
}
}
}
destroySliders() {
for (var i = 0; i < this.sliders.length; i++) {
var slider = document.getElementById(`${this.sliders[i]}_slider`);
this.slidersValues[i] = slider.noUiSlider.get();
slider.noUiSlider.destroy();
}
this.sliders = [];
}
}
export function isBrightfield(pmaViewportInfo) {
return (
pmaViewportInfo.Channels.length === 1 &&
pmaViewportInfo.Channels[0].Color === "ffffffff" &&
(pmaViewportInfo.Channels[0].Name === "Default" || pmaViewportInfo.Channels[0].Name === "Brightfield" || pmaViewportInfo.Channels[0].Name === "")
);
}
