").addClass("plate-setup-bottom-control-container");
+
+ var descriptionDiv = $("
").addClass("plate-setup-overlay-text-container");
+ descriptionDiv.text("Color groups");
+ overlayContainer.append(descriptionDiv);
+
+ var buttonContainer = $("
").addClass("plate-setup-overlay-bottom-button-container");
+
+ // create export csv option
+ var exportButton = $("
").addClass("plate-setup-button");
+ exportButton.text("Export CSV");
+ buttonContainer.append(exportButton);
+
+ exportButton.click(function() {
+ that.exportData('csv');
+ exportButton.text("Exported");
+ exportButton[0].classList.remove("plate-setup-button");
+ exportButton.addClass("plate-setup-clicked-button");
+ setTimeout(resetExportText, 3000);
+ });
+
+ function resetExportText() {
+ exportButton.text("Export CSV");
+ exportButton[0].classList.remove("plate-setup-clicked-button");
+ exportButton.addClass("plate-setup-button");
+ }
+
+ // creat clipboard option, CLipboard is an external js file located in vendor/asset/javascripts
+ var clipboardButton = $("
").addClass("plate-setup-button");
+ clipboardButton.text("Copy To Clipboard");
+ buttonContainer.append(clipboardButton);
+
+ var clipboard = new ClipboardJS(clipboardButton.get(0), {
+ text: function() {
+ return that.exportData("clipboard");
+ }
+ });
+
+ clipboard.on('success', function(e) {
+ clipboardButton.text("Copied as tab-delimited format");
+ clipboardButton[0].classList.remove("plate-setup-button");
+ clipboardButton.addClass("plate-setup-clicked-button");
+ setTimeout(resetClipboardText, 3000);
+ });
+
+ function resetClipboardText() {
+ clipboardButton.text("Copy To Clipboard");
+ clipboardButton[0].classList.remove("plate-setup-clicked-button");
+ clipboardButton.addClass("plate-setup-button");
+ }
+
+ clipboard.on('error', function(e) {
+ clipboardButton.text("Failed to copy table to clipboard: browser may be incompatible");
+ setTimeout(resetClipboardText, 3000);
+ });
+
+ overlayContainer.append(buttonContainer);
+ this.bottomContainer.prepend(overlayContainer);
+ }
+ };
+ }
+})(jQuery, fabric);
+var plateLayOutWidget = plateLayOutWidget || {};
+
+(function($, fabric) {
+
+ plateLayOutWidget.canvas = function() {
+ //
+ return {
+
+ allSelectedObjects: null, // Contains all the selected objets, when click and drag.
+
+ allPreviouslySelectedObjects: null,
+
+ colorPointer: 0,
+
+ goldenRatio: 0.618033988749895,
+
+ _createCanvas: function() {
+ this.normalCanvas = this._createElement("
").attr("id", "DNAcanvas");
+ $(this.canvasContainer).append(this.normalCanvas);
+ },
+
+ _initiateFabricCanvas: function() {
+ var w = this.canvasContainer.width();
+ var h = this.canvasContainer.height();
+
+ this._setCanvasArea(w, h);
+
+ this.mainFabricCanvas = new fabric.Canvas('DNAcanvas', {
+ backgroundColor: '#f5f5f5',
+ selection: false,
+ stateful: false,
+ hoverCursor: "pointer",
+ renderOnAddRemove: false,
+ })
+ .setWidth(w)
+ .setHeight(h);
+ },
+
+ };
+ }
+})(jQuery, fabric);
+var plateLayOutWidget = plateLayOutWidget || {};
+
+(function($, fabric) {
+
+ plateLayOutWidget.checkBox = function() {
+ // For those check boxes associated with every field in the tab
+ return {
+
+ globalSelectedAttributes: [],
+
+ _addCheckBox: function(field) {
+ var checkImage = $("").html(this._assets.dontImg).addClass("plate-setup-tab-check-box bg-light")
+ .data("clicked", false);
+ checkImage.data("linkedFieldId", field.id);
+ field.root.find(".plate-setup-tab-field-left-side").empty().append(checkImage);
+ this._applyCheckboxHandler(checkImage); // Adding handler for change the image when clicked
+ field.checkbox = checkImage;
+ },
+
+ _applyCheckboxHandler: function(checkBoxImage) {
+ // We add checkbox handler here, thing is it s not checkbox , its an image and we change
+ // source
+ var that = this;
+ checkBoxImage.click(function(evt, machineClick) {
+ var checkBox = $(this);
+
+ var changes = {};
+ changes[checkBox.data("linkedFieldId")] = !checkBox.data("clicked");
+
+ that.changeCheckboxes(changes);
+ });
+ },
+
+ changeSubFieldsCheckboxes: function(field, changes) {
+ var that = this;
+ var subFieldToInclude = [];
+
+ field.subFieldList.forEach(function(subField) {
+ var checkImage = subField.checkbox;
+ var fieldId = checkImage.data("linkedFieldId");
+ var clicked = checkImage.data("clicked");
+ if (fieldId in changes) {
+ clicked = Boolean(changes[fieldId]);
+ }
+ checkImage.data("clicked", clicked);
+ if (clicked) {
+ checkImage.html(that._assets.doImg);
+ subFieldToInclude.push(subField.id);
+ } else {
+ checkImage.html(that._assets.dontImg);
+ }
+ });
+ return subFieldToInclude;
+ },
+
+ changeCheckboxes: function(changes) {
+ var gsa = [];
+ var multiplexCheckedSubField = {};
+ for (var i = 0; i < this.fieldList.length; i++) {
+ var field = this.fieldList[i];
+ if (field.checkbox) {
+ if (field.subFieldList) {
+ multiplexCheckedSubField[field.id] = this.changeSubFieldsCheckboxes(field, changes);
+ }
+
+ var checkImage = field.checkbox;
+ var fieldId = checkImage.data("linkedFieldId");
+ var clicked = checkImage.data("clicked");
+ if (fieldId in changes) {
+ clicked = Boolean(changes[fieldId]);
+ }
+ checkImage.data("clicked", clicked);
+ if (clicked) {
+ gsa.push(fieldId);
+ checkImage.html(this._assets.doImg);
+ } else {
+ checkImage.html(this._assets.dontImg);
+ }
+ }
+ }
+ this.globalSelectedMultiplexSubfield = multiplexCheckedSubField;
+ this.globalSelectedAttributes = gsa;
+ this._clearPresetSelection();
+ this._colorMixer();
+ },
+
+ setSubFieldCheckboxes: function(field, fieldIds) {
+ var that = this;
+ var subFieldToInclude = [];
+ field.subFieldList.forEach(function(subField) {
+ var checkImage = subField.checkbox;
+ var fieldId = checkImage.data("linkedFieldId");
+ var clicked = fieldIds.indexOf(fieldId) >= 0;
+ checkImage.data("clicked", clicked);
+ if (clicked) {
+ checkImage.html(that._assets.doImg);
+ subFieldToInclude.push(subField.id);
+ } else {
+ checkImage.html(that._assets.dontImg);
+ }
+ });
+ return subFieldToInclude;
+ },
+
+ setCheckboxes: function(fieldIds) {
+ fieldIds = fieldIds || [];
+ var gsa = [];
+ var multiplexCheckedSubField = {};
+
+ for (var i = 0; i < this.fieldList.length; i++) {
+ var field = this.fieldList[i];
+ if (field.checkbox) {
+ // special handling for multiplex field
+ if (field.subFieldList) {
+ multiplexCheckedSubField[field.id] = this.setSubFieldCheckboxes(field, fieldIds);
+ }
+
+ var checkImage = field.checkbox;
+ var fieldId = checkImage.data("linkedFieldId");
+ var clicked = fieldIds.indexOf(fieldId) >= 0;
+ checkImage.data("clicked", clicked);
+ if (clicked) {
+ gsa.push(fieldId);
+ checkImage.html(this._assets.doImg);
+ } else {
+
+ checkImage.html(this._assets.dontImg);
+ }
+ }
+ }
+ this.globalSelectedMultiplexSubfield = multiplexCheckedSubField;
+ this.globalSelectedAttributes = gsa;
+ this._clearPresetSelection();
+ this._colorMixer();
+ }
+
+ };
+ }
+})(jQuery, fabric);
+var plateLayOutWidget = plateLayOutWidget || {};
+
+(function($, fabric) {
+
+ plateLayOutWidget.colorManager = function() {
+
+ return {
+ // See these are color pairs for the gradient.
+ colorPairs: [
+ ["#e6e6e6", "#808080"],
+ ["#66e8ff", "#0082c8"],
+ ["#ff7fb1", "#e6194b"],
+ ["#a2ffb1", "#3cb44b"],
+ ["#f784ff", "#911eb4"],
+ ["#ffe897", "#f58231"],
+ ["#6666ff", "#0000FF"],
+ ["#ffff7f", "#ffe119"],
+ ["#acffff", "#46f0f0"],
+ ["#ff98ff", "#f032e6"],
+ ["#ffffa2", "#d2f53c"],
+ ["#ffffff", "#fabebe"],
+ ["#66e6e6", "#008080"],
+ ["#ffffff", "#e6beff"],
+ ["#ffd48e", "#aa6e28"],
+ ["#e66666", "#800000"],
+ ["#ffffff", "#aaffc3"],
+ ["#e6e666", "#808000"],
+ ["#ffffff", "#ffd8b1"],
+ ["#66a9ef", "#004389"],
+ ["#ff6672", "#a7000c"],
+ ["#66db72", "#00750c"],
+ ["#b866db", "#520075"],
+ ["#ffa966", "#b64300"],
+ ["#ffff66", "#c0a200"],
+ ["#6dffff", "#07b1b1"],
+ ["#ff66ff", "#b100a7"],
+ ["#f9ff66", "#93b600"],
+ ["#ffe5e5", "#bb7f7f"],
+ ["#66a7a7", "#004141"],
+ ["#ffe5ff", "#a77fc0"],
+ ["#d19566", "#6b2f00"],
+ ["#ffffef", "#c0bb89"],
+ ["#d1ffea", "#6bc084"],
+ ["#a7a766", "#414100"],
+ ["#ffffd8", "#c09972"],
+ ["#a5ffff", "#3fc1ff"],
+ ["#ffbef0", "#ff588a"],
+ ["#e1fff0", "#7bf38a"],
+ ["#ffc3ff", "#d05df3"],
+ ["#ffffd6", "#ffc170"],
+ ["#a5a5ff", "#3f3fff"],
+ ["#ffffbe", "#ffff58"],
+ ["#ebffff", "#85ffff"],
+ ["#ffd7ff", "#ff71ff"],
+ ["#a5ffff", "#3fbfbf"],
+ ["#ffffcd", "#e9ad67"],
+ ["#ffa5a5", "#bf3f3f"],
+ ["#ffffa5", "#bfbf3f"]
+ ]
+ }
+ }
+
+})(jQuery, fabric);
+var plateLayOutWidget = plateLayOutWidget || {};
+
+(function($, fabric) {
+
+ plateLayOutWidget.createCanvasElements = function() {
+ // this class manages creating all the elements within canvas
+ return {
+
+ scaleFactor: 1,
+
+ baseSizes: {
+ spacing: 48,
+ tile_radius: 22,
+ center_radius_complete: 10,
+ center_radius_incomplete: 14,
+ label_size: 14,
+ label_spacing: 24,
+ text_size: 13,
+ stroke: 0.5,
+ gap: 2
+ },
+
+ _setCanvasArea: function(w, h) {
+ this.scaleFactor = Math.min(
+ h / (this.dimensions.rows * this.baseSizes.spacing + this.baseSizes.label_spacing),
+ w / (this.dimensions.cols * this.baseSizes.spacing + this.baseSizes.label_spacing));
+
+ var sizes = {};
+ for (var prop in this.baseSizes) {
+ sizes[prop] = this.baseSizes[prop] * this.scaleFactor;
+ }
+ this.sizes = sizes;
+ },
+
+ _canvas: function() {
+ // Those 1,2,3 s and A,B,C s
+ this._fixRowAndColumn();
+
+ // All those circles in the canvas.
+ this._putCircles();
+ },
+
+ _fixRowAndColumn: function() {
+ var cols = this.dimensions.cols;
+ var rows = this.dimensions.rows;
+
+ var spacing = this.sizes.spacing;
+ var d1 = this.sizes.label_spacing / 2;
+ var d2 = this.sizes.label_spacing + this.sizes.spacing / 2;
+ var fontSize = this.sizes.label_size;
+
+ // For column
+ var top = d1;
+ var left = d2;
+ for (var i = 1; i <= cols; i++) {
+ var tempFabricText = new fabric.IText(i.toString(), {
+ fill: 'black',
+ originX: 'center',
+ originY: 'center',
+ fontSize: fontSize,
+ top: top,
+ left: left,
+ fontFamily: '"Roboto", Arial, sans-serif',
+ selectable: false,
+ fontWeight: "400"
+ });
+ left += spacing;
+
+ this.mainFabricCanvas.add(tempFabricText);
+ }
+
+ // for row
+ top = d2;
+ left = d1;
+ for (var i = 1; i <= rows; i++) {
+ var tempFabricText = new fabric.IText(this.rowIndex[i - 1], {
+ fill: 'black',
+ originX: 'center',
+ originY: 'center',
+ fontSize: fontSize,
+ top: top,
+ left: left,
+ fontFamily: '"Roboto", Arial, sans-serif',
+ selectable: false,
+ fontWeight: "400"
+ });
+ top += spacing;
+
+ this.mainFabricCanvas.add(tempFabricText);
+ }
+ },
+
+ _putCircles: function() {
+ var cols = this.dimensions.cols;
+ var rows = this.dimensions.rows;
+
+ var tileCounter = 0;
+ for (var row = 0; row < rows; row++) {
+ for (var col = 0; col < cols; col++) {
+ var index = this.allTiles.length;
+ var tile = this._createTile(row, col);
+ tile.index = tileCounter++;
+ this.allTiles.push(tile);
+ this.mainFabricCanvas.add(tile.background);
+ this.mainFabricCanvas.add(tile.highlight);
+ this.mainFabricCanvas.add(tile.circle);
+ this.mainFabricCanvas.add(tile.circleCenter);
+ this.mainFabricCanvas.add(tile.circleText);
+ }
+ }
+
+ this._addLargeRectangleOverlay();
+ this._fabricEvents();
+ },
+
+ _createTile: function(row, col) {
+ var tile = {};
+
+ tile.visible = false;
+ tile.colorIndex = null;
+ tile.row = row;
+ tile.col = col;
+ tile.address = this.rowIndex[row] + (col + 1);
+
+ var top = (row + 1) * this.sizes.spacing;
+ var left = (col + 1) * this.sizes.spacing;
+
+ tile.background = new fabric.Circle({
+ top: top,
+ left: left,
+ radius: this.sizes.tile_radius,
+ originX: 'center',
+ originY: 'center',
+ hasControls: false,
+ hasBorders: false,
+ lockMovementX: true,
+ lockMovementY: true,
+ evented: false,
+ });
+
+ tile.background.setGradient("fill", {
+ type: "radial",
+ x1: this.sizes.tile_radius,
+ x2: this.sizes.tile_radius,
+ y1: this.sizes.tile_radius + this.sizes.gap,
+ y2: this.sizes.tile_radius + this.sizes.gap,
+ r1: this.sizes.tile_radius - this.sizes.gap,
+ r2: this.sizes.tile_radius,
+ colorStops: {
+ 0: 'rgba(0,0,0,0.1)',
+ 1: 'rgba(0,0,0,0.2)'
+ }
+ });
+
+ tile.highlight = new fabric.Rect({
+ originX: 'center',
+ originY: 'center',
+ top: top,
+ left: left,
+ width: this.sizes.spacing,
+ height: this.sizes.spacing,
+ fill: "rgba(0,0,0,0.4)",
+ evented: false,
+ visible: false
+ });
+
+ tile.circle = new fabric.Circle({
+ originX: 'center',
+ originY: 'center',
+ top: top,
+ left: left,
+ radius: this.sizes.tile_radius,
+ stroke: 'gray',
+ strokeWidth: this.sizes.stroke,
+ evented: false,
+ visible: false
+ });
+
+ tile.circleCenter = new fabric.Circle({
+ originX: 'center',
+ originY: 'center',
+ top: top,
+ left: left,
+ radius: this.sizes.center_radius_incomplete,
+ fill: "white",
+ stroke: 'gray',
+ strokeWidth: this.sizes.stroke,
+ evented: false,
+ visible: false
+ });
+
+ tile.circleText = new fabric.IText("", {
+ originX: 'center',
+ originY: 'center',
+ top: top,
+ left: left,
+ fill: 'black',
+ fontFamily: '"Roboto", Arial, sans-serif',
+ fontSize: this.sizes.text_size,
+ lockScalingX: true,
+ lockScalingY: true,
+ evented: false,
+ visible: false
+ });
+
+ return tile;
+ },
+
+ setTileComplete: function(tile, complete) {
+ if (complete) {
+ tile.circleCenter.radius = this.sizes.center_radius_complete;
+ tile.circleText.fill = "black";
+ tile.circleText.fontWeight = 'normal';
+ } else {
+ tile.circleCenter.radius = this.sizes.center_radius_incomplete;
+ tile.circleText.fill = "red";
+ tile.circleText.fontWeight = 'bold';
+ }
+ },
+
+ setTileVisible: function(tile, visible) {
+ tile.visible = visible;
+ tile.circle.visible = tile.visible;
+ tile.circleCenter.visible = tile.visible;
+ tile.circleText.visible = tile.visible;
+ },
+
+ setTileColor: function(tile, color) {
+ this.setTileVisible(tile, true);
+ tile.colorIndex = parseInt(color);
+ tile.circleText.text = String(tile.colorIndex);
+
+ if (color > 0) {
+ color = ((color - 1) % (this.colorPairs.length - 1)) + 1;
+ }
+ var colorStops = this.colorPairs[color];
+
+ tile.circle.setGradient("fill", {
+ y2: 2 * this.sizes.tile_radius,
+ colorStops: colorStops
+ });
+ },
+
+ _addLargeRectangleOverlay: function() {
+
+ this.overLay = new fabric.Rect({
+ width: 632,
+ height: 482,
+ left: 0,
+ top: 0,
+ opacity: 0.0,
+ originX: 'left',
+ originY: 'top',
+ lockMovementY: true,
+ lockMovementX: true,
+ selectable: false
+ });
+
+ this.mainFabricCanvas.add(this.overLay);
+ }
+ };
+ }
+})(jQuery, fabric);
+
+var plateLayOutWidget = plateLayOutWidget || {};
+
+(function($, fabric) {
+
+ plateLayOutWidget.createField = function() {
+ // It creates those fields in the tab , there is 4 types of them.
+ return {
+
+ _createField: function(field) {
+ switch (field.data.type) {
+ case "text":
+ this._createTextField(field);
+ break;
+
+ case "numeric":
+ this._createNumericField(field);
+ break;
+
+ case "select":
+ this._createSelectField(field);
+ break;
+
+ case "multiselect":
+ this._createMultiSelectField(field);
+ break;
+
+ case "boolean":
+ this._createBooleanField(field);
+ break;
+
+ case "multiplex":
+ this._createMultiplexField(field);
+ break;
+ }
+ },
+
+ _createTextField: function(field) {
+ var id = field.id;
+ var that = this;
+ var input = this._createElement("
").addClass("plate-setup-tab-unit");
+ unitText.text(defaultUnit);
+ field.root.find(".plate-setup-tab-field-container").append(unitText);
+ } else {
+ unitInput = this._createElement("
").addClass("plate-setup-tab-name-singleSelect").text("Select to edit");
+ var fieldContainer1 = that._createElement("
").addClass("plate-setup-tab-field-container-singleSelect");
+ field.root.find(".plate-setup-tab-field-right-side").append(nameContainer1, fieldContainer1);
+
+ field.singleSelect = this._createElement("
").addClass("delete-dialog modal");
+ $('body').append(dialogDiv);
+
+ function killDialog() {
+ dialogDiv.hide();
+ dialogDiv.remove();
+ }
+
+ var dialogContent = $("
").addClass("modal-content").appendTo(dialogDiv);
+ var tableArea = $("
").appendTo(dialogContent);
+ var buttonRow = $("
").addClass("dialog-buttons").css("justify-content", "flex-end").appendTo(dialogContent);
+
+ if (valToRemove.length > 0) {
+ // apply CSS property for table
+ $("
").text(field.name + " in selected wells: choose items to delete and click the delete button below").appendTo(tableArea);
+
+ var table = that._deleteDialogTable(field, valMap);
+ table.appendTo(tableArea);
+ table.addClass("plate-popout-table");
+ table.find('td').addClass("plate-popout-td");
+ table.find('th').addClass("plate-popout-th");
+ table.find('tr').addClass("plate-popout-tr");
+ if (!that.readOnly) {
+ var deleteCheckedButton = $("Delete Checked Items ");
+ buttonRow.append(deleteCheckedButton);
+ deleteCheckedButton.click(function() {
+ table.find("input:checked").each(function() {
+ var val = this.value;
+ field.multiOnChange(null, {id: val});
+ });
+ // refresh selected fields after updating the multiplex field value
+ that.decideSelectedFields();
+ killDialog();
+ });
+ }
+
+ } else {
+ $("
").text("No " + field.name + " in the selected wells").appendTo(tableArea);
+ }
+
+ var cancelButton = $("Cancel ");
+ buttonRow.append(cancelButton);
+ cancelButton.click(killDialog);
+
+ dialogDiv.show();
+
+ window.onclick = function(event) {
+ if (event.target == dialogDiv[0]) {
+ killDialog();
+ }
+ }
+ },
+
+ _deleteDialogTable: function(field, valMap) {
+ var that = this;
+ var colName = [field.name, "Counts"]; //Added because it was missing... no idea what the original should have been
+ if (!that.readOnly) {
+ colName.push("Delete");
+ }
+ var table = $('');
+ var thead = $('
").addClass("plate-setup-remove-all-button-container");
+ buttonContainer.append(deleteButton);
+
+ field.deleteButton = deleteButton;
+ field.root.find(".plate-setup-tab-field-right-side").append(buttonContainer);
+
+ deleteButton.click(function() {
+ that._deleteDialog(field);
+ });
+ }
+
+ };
+ }
+})(jQuery, fabric);
+var plateLayOutWidget = plateLayOutWidget || {};
+
+(function($, fabric) {
+
+ plateLayOutWidget.engine = function(THIS) {
+ // Methods which look after data changes and stack up accordingly
+ // Remember THIS points to plateLayOutWidget and 'this' points to engine
+ // Use THIS to refer parent this.
+ return {
+ engine: {
+
+ derivative: {},
+ colorMap: new Map(),
+ stackUpWithColor: {},
+ stackPointer: 2,
+
+ wellEmpty: function(well) {
+ for (var prop in well) {
+ var curVal = well[prop];
+ if (curVal !== null && curVal !== undefined) {
+ if (Array.isArray(curVal)) {
+ if (curVal.length > 0) {
+ return false;
+ }
+ } else {
+ return false;
+ }
+ }
+ }
+ return true;
+ },
+
+ searchAndStack: function() {
+ // This method search and stack the change we made.
+ this.stackUpWithColor = {};
+ this.stackPointer = 1;
+ var derivativeJson = {};
+ for (var idx in this.derivative) {
+ var data = this.derivative[idx];
+ var wellData = {};
+ for (var i = 0; i < THIS.globalSelectedAttributes.length; i++) {
+ var attr = THIS.globalSelectedAttributes[i];
+
+ if (attr in THIS.globalSelectedMultiplexSubfield) {
+ var selectedSubFields = THIS.globalSelectedMultiplexSubfield[attr];
+ var newMultiplexVal = [];
+ for (var multiplexIdx in data[attr]) {
+ var curMultiplexVals = data[attr][multiplexIdx];
+ var newVal = {};
+ newVal[attr] = curMultiplexVals[attr];
+ selectedSubFields.forEach(function(subFieldId) {
+ newVal[subFieldId] = curMultiplexVals[subFieldId];
+ });
+ newMultiplexVal.push(newVal);
+ }
+ wellData[attr] = newMultiplexVal;
+ } else {
+ if (data[attr] != null) {
+ wellData[attr] = data[attr];
+ }
+ }
+ }
+ if ($.isEmptyObject(wellData)) {
+ derivativeJson[idx] = null;
+ } else {
+ derivativeJson[idx] = JSON.stringify(wellData);
+ }
+ }
+
+ while (!$.isEmptyObject(derivativeJson)) {
+ var keys = Object.keys(derivativeJson).map(function(k) {
+ return parseFloat(k, 10);
+ });
+ keys.sort(function(a, b) {
+ return a - b;
+ });
+
+ var refDerivativeIndex = keys[0];
+ var referenceDerivative = derivativeJson[refDerivativeIndex];
+ var arr = [];
+
+ if (!referenceDerivative) {
+ // if no checked box has value, push it to first spot
+ if (this.stackUpWithColor[0]) {
+ this.stackUpWithColor[0].push(refDerivativeIndex);
+ } else {
+ this.stackUpWithColor[0] = [refDerivativeIndex];
+ }
+
+ delete derivativeJson[refDerivativeIndex];
+ } else {
+ // if checked boxes have values
+ for (var i = 0; i < keys.length; i++) {
+ var idx = keys[i];
+ if (referenceDerivative == derivativeJson[idx]) {
+ arr.push(idx);
+ this.stackUpWithColor[this.stackPointer] = arr;
+ delete derivativeJson[idx];
+ }
+ }
+ if (arr.length > 0)
+ this.stackPointer++;
+ }
+ }
+ },
+
+ applyColors: function() {
+
+ var wholeNoTiles = 0;
+ var wholePercentage = 0;
+
+ THIS.addBottomTableHeadings();
+
+ for (var i = 0; i < THIS.allTiles.length; i++) {
+ var tile = THIS.allTiles[i];
+ THIS.setTileVisible(tile, false);
+ }
+
+ for (var color = 0; color < this.stackPointer; color++) {
+ var arr = this.stackUpWithColor[color];
+ if (arr) {
+ THIS.addBottomTableRow(color, arr);
+
+ for (var tileIndex in arr) {
+ wholeNoTiles++;
+ var index = this.stackUpWithColor[color][tileIndex];
+ var tile = THIS.allTiles[index];
+ var well = this.derivative[index];
+ this.colorMap.set(index, color);
+ THIS.setTileColor(tile, color);
+ // Checks if all the required fields are filled
+ var completion = this.checkCompletion(well, tile);
+ THIS.setTileComplete(tile, completion == 1);
+ wholePercentage = wholePercentage + completion;
+ }
+ }
+ }
+
+ wholePercentage = Math.floor(100 * wholePercentage / wholeNoTiles);
+
+ if (isNaN(wholePercentage)) {
+ THIS.overLayTextContainer.text("Completion Percentage: 0%");
+ } else {
+ THIS.overLayTextContainer.text("Completion Percentage: " + wholePercentage + "%");
+ }
+ },
+
+ checkCompletion: function(wellData, tile) {
+ var req = 0;
+ var fill = 0;
+ for (var i = 0; i < THIS.fieldList.length; i++) {
+ var field = THIS.fieldList[i];
+ if (field.checkMultiplexCompletion) {
+ // also apply color
+ var multiplexStatus = field.checkMultiplexCompletion(wellData[field.id]);
+ if (multiplexStatus.include) {
+ fill += multiplexStatus.completionPct;
+ req++;
+ }
+ } else {
+ if (field.required) {
+ req++;
+ if (wellData[field.id] !== null) {
+ fill++;
+ }
+ }
+ }
+ }
+ if (req === fill) {
+ return 1;
+ }
+ return fill / req;
+ },
+ }
+ }
+ }
+})(jQuery, fabric);
+var plateLayOutWidget = plateLayOutWidget || {};
+
+(function($, fabric) {
+
+ plateLayOutWidget.fabricEvents = function() {
+ // This object contains Menu items and how it works;
+ return {
+ colorToIndex: {},
+ startCoords: {
+ x: 0,
+ y: 0
+ },
+ focalWell: {
+ row: 0,
+ col: 0
+ },
+ selectedAreas: [],
+
+ _clickCoords: function(evt) {
+ //Get XY Coords for a given event.
+ var rect = evt.e.target.getBoundingClientRect();
+ return {
+ x: evt.e.clientX - rect.left,
+ y: evt.e.clientY - rect.top
+ };
+ },
+
+ _fabricEvents: function() {
+ // Set up event handling.
+ var that = this;
+
+ $(that.target).on("getPlates", function(evt, data) {
+ // This method should be compatable to redo/undo.
+ that.getPlates(JSON.parse(data));
+ });
+
+ that.mainFabricCanvas.on("mouse:down", function(evt) {
+ // Start selecting new area
+ that.selecting = true;
+ var coords = that._clickCoords(evt);
+
+ var areas = that.selectedAreas.slice();
+ var focalWell = that.focalWell;
+ var startCoords = that._wellToCoords(focalWell, true);
+ var rect = that._coordsToRect(startCoords, coords);
+
+ if (evt.e.ctrlKey) {
+ //adding new area
+ startCoords = coords;
+ rect = that._coordsToRect(startCoords, coords);
+ focalWell = that._coordsToWell(startCoords);
+ if (evt.e.shiftKey) {
+ //replacing existing areas
+ areas = [that._rectToArea(rect)];
+ } else {
+ areas.push(that._rectToArea(rect));
+ }
+ } else {
+ if (evt.e.shiftKey) {
+ //Altering last area
+ areas[areas.length - 1] = that._rectToArea(rect);
+ } else {
+ //Creating new area
+ startCoords = coords;
+ rect = that._coordsToRect(startCoords, coords);
+ focalWell = that._coordsToWell(startCoords);
+ areas = [that._rectToArea(rect)];
+ }
+ }
+
+ that.startCoords = startCoords;
+ that.setSelection(areas, focalWell);
+ that.mainFabricCanvas.renderAll();
+ });
+
+ that.mainFabricCanvas.on("mouse:move", function(evt) {
+ if (that.selecting) {
+ // continue selecting new area
+ var areas = that.selectedAreas.slice();
+ var endCoords = that._clickCoords(evt);
+ var rect = that._coordsToRect(that.startCoords, endCoords);
+ var area = that._rectToArea(rect);
+ if (area) {
+ areas[areas.length - 1] = area;
+ }
+
+ that.setSelection(areas, that.focalWell);
+ that.mainFabricCanvas.renderAll();
+ }
+
+ });
+
+ that.mainFabricCanvas.on("mouse:up", function(evt) {
+ // finish selecting new area
+ that.selecting = false;
+ var areas = that.selectedAreas.slice();
+ var endCoords = that._clickCoords(evt);
+ var rect = that._coordsToRect(that.startCoords, endCoords);
+ var area = that._rectToArea(rect);
+ if (area) {
+ areas[areas.length - 1] = area;
+ }
+
+ that.setSelection(areas, that.focalWell);
+ that.decideSelectedFields();
+ that.mainFabricCanvas.renderAll();
+ that._trigger("selectedWells", null, {selectedAddress: that.getSelectedAddress()});
+ if (that.options.scrollToGroup === undefined || that.options.scrollToGroup) {
+ that.selectObjectInBottomTab();
+ }
+ });
+ },
+
+ setSelection: function(areas, focalWell) {
+ this.selectedAreas = areas;
+ this.focalWell = focalWell;
+ this.allSelectedObjects = this._areasToTiles(areas);
+ this._setSelectedTiles();
+ this._setFocalWellRect(this.focalWell);
+ document.activeElement.blur();
+ },
+
+ _setFocalWellRect: function(well) {
+ var flag;
+ // check if not allow to add or delete existing wells
+ if (this.disableAddDeleteWell) {
+ var address = this.locToAddress({
+ r: well.row,
+ c: well.col
+ });
+ if (this.addressAllowToEdit.indexOf(address) < 0) {
+ flag = false;
+ this.setFieldsDisabled(true);
+ } else {
+ flag = true;
+ this.setFieldsDisabled(false);
+ }
+ } else if (well) {
+ flag = true;
+ }
+
+ if (flag) {
+ var rect = this._areaToRect(this._wellToArea(well));
+ var strokeWidth = 2;
+ if (this.focalWellRect) {
+ //update focalWellRect
+ this.focalWellRect.top = rect.top;
+ this.focalWellRect.left = rect.left;
+ this.focalWellRect.width = rect.width - strokeWidth;
+ this.focalWellRect.height = rect.height - strokeWidth;
+ } else {
+ //create focalWellRect
+ this.focalWellRect = new fabric.Rect({
+ width: rect.width - strokeWidth,
+ height: rect.height - strokeWidth,
+ left: rect.left,
+ top: rect.top,
+ fill: null,
+ strokeWidth: strokeWidth,
+ stroke: "black",
+ selectable: false
+ });
+ this.mainFabricCanvas.add(this.focalWellRect);
+ }
+ } else {
+ //clear focalWellRect
+ this.mainFabricCanvas.remove(this.focalWellRect);
+ this.focalWellRect = null;
+ }
+ },
+
+ _setSelectedTiles: function() {
+ // Update selected tile display only
+ var selectedTiles = this.allSelectedObjects;
+ this.allTiles.forEach(function(tile) {
+ var selected = selectedTiles.indexOf(tile) >= 0;
+ tile.highlight.visible = selected;
+ })
+ },
+
+ _getSelectedWells: function() {
+ var that = this;
+ return this.allSelectedObjects.map(function(tile) {
+ var well = that.engine.derivative[tile.index];
+ if (!well) {
+ well = that.defaultWell;
+ }
+ return well;
+ });
+ },
+
+ _getCommonFields: function(wells) {
+ if (wells.length) {
+ var referenceWell = wells[0];
+ var referenceFields = $.extend(true, {}, referenceWell);
+ for (var i = 1; i < wells.length; i++) {
+ var fields = wells[i];
+ for (var field in referenceFields) {
+ if (Array.isArray(referenceFields[field])) {
+ var refArr = referenceFields[field];
+ var agrArr = [];
+ for (var j = 0; j < refArr.length; j++) {
+ var v = refArr[j];
+ if (v && typeof (v) === "object") {
+ if (this.containsObject(v, fields[field])) {
+ agrArr.push(v);
+ }
+ } else {
+ if ($.inArray(v, fields[field]) >= 0) {
+ agrArr.push(v);
+ }
+ }
+ }
+ referenceFields[field] = agrArr;
+ } else {
+ if (fields[field] && typeof (fields[field]) === "object" && referenceFields[field] && typeof (referenceFields[field]) === "object") {
+ if ((fields[field].value !== referenceFields[field].value) || (fields[field].unit !== referenceFields[field].unit)) {
+ delete referenceFields[field];
+ }
+ } else if (referenceFields[field] != fields[field]) {
+ delete referenceFields[field];
+ }
+ }
+ }
+ }
+ return referenceFields
+ } else {
+ return {};
+ }
+ },
+
+ containsObject: function(obj, list) {
+ var equality = [];
+ if (list) {
+ list.forEach(function(val) {
+ //evaluate val and obj
+ var evaluate = [];
+ Object.keys(val).forEach(function(listKey) {
+ if (Object.keys(obj).indexOf(listKey) >= 0) {
+ var curVal = val[listKey];
+ if (typeof (curVal) === 'object' && curVal) {
+ if (obj[listKey]) {
+ evaluate.push((curVal.unit === obj[listKey].unit) && (curVal.value === obj[listKey].value));
+ } else {
+ // when obj[listKey] is null but curVal is not
+ evaluate.push(false);
+ }
+ } else {
+ evaluate.push(curVal === obj[listKey]);
+ }
+ }
+ });
+ equality.push(evaluate.indexOf(false) < 0);
+ });
+ return equality.indexOf(true) >= 0;
+ } else {
+ return false;
+ }
+ },
+
+ _getCommonWell: function(wells) {
+ if (wells.length) {
+ var referenceWell = wells[0];
+ var referenceFields = $.extend(true, {}, referenceWell);
+ for (var i = 1; i < wells.length; i++) {
+ var well = wells[i];
+ var fields = well;
+ for (var field in referenceFields) {
+ if (Array.isArray(referenceFields[field])) {
+ var refArr = referenceFields[field];
+ var agrArr = [];
+ for (var j = 0; j < refArr.length; j++) {
+ var v = refArr[j];
+ // for multiplex field
+ if (typeof (refArr[j]) === "object") {
+ if (this.containsObject(v, fields[field])) {
+ agrArr.push(v);
+ }
+ } else {
+ if ($.inArray(v, fields[field]) >= 0) {
+ agrArr.push(v);
+ }
+ }
+ }
+ referenceFields[field] = agrArr;
+ } else {
+ if (fields[field] && typeof (fields[field]) === "object" && referenceFields[field] && typeof (referenceFields[field]) === "object") {
+ if ((fields[field].value !== referenceFields[field].value) || (fields[field].unit !== referenceFields[field].unit)) {
+ referenceFields[field] = null;
+ }
+ } else if (referenceFields[field] != fields[field]) {
+ referenceFields[field] = null;
+ }
+
+ }
+ }
+ }
+ return referenceFields;
+ } else {
+ return this.defaultWell;
+ }
+ },
+
+ _getAllMultipleVal: function(wells) {
+ var multipleFieldList = this.multipleFieldList;
+
+ multipleFieldList.forEach(function(multiplexField) {
+ if (wells.length) {
+ var curMultipleVal = {};
+ wells.forEach(function(wellData) {
+ var id = multiplexField.id;
+ if (wellData[id]) {
+ if (wellData[id].length > 0) {
+ wellData[id].forEach(function(multipleVal) {
+ if (typeof (multipleVal) === 'object') {
+ if (multipleVal[id] in curMultipleVal) {
+ curMultipleVal[multipleVal[id]]++;
+ } else {
+ curMultipleVal[multipleVal[id]] = 1;
+ }
+ } else {
+ if (multipleVal in curMultipleVal) {
+ curMultipleVal[multipleVal]++;
+
+ } else {
+ curMultipleVal[multipleVal] = 1;
+ }
+ }
+ })
+ }
+ }
+ });
+ multiplexField.allSelectedMultipleVal = curMultipleVal;
+ } else {
+ multiplexField.allSelectedMultipleVal = null
+ }
+ });
+ },
+
+ decideSelectedFields: function() {
+ var wells = this._getSelectedWells();
+ this._getAllMultipleVal(wells);
+ this.applyFieldWarning(wells);
+ var well = this._getCommonWell(wells);
+ this._addDataToTabFields(well);
+ },
+
+ // get well value differences for each well in wellsHash
+ getDifferentWellsVals: function(wellsHash) {
+ var wells = [];
+ for (var wellId in wellsHash) {
+ wells.push(wellsHash[wellId]);
+ }
+ var differentWellsVals = {};
+ if (wells.length > 1) {
+ var commonWell = this._getCommonWell(wells);
+ var allFieldVal = {};
+ for (var fieldIdx in wellsHash[0]) {
+ allFieldVal[fieldIdx] = [];
+ }
+ for (var wellIdx in wells) {
+ var diffWellVal = {};
+ var curWellData = wells[wellIdx];
+ for (var fieldId in curWellData) {
+ var commonVal = commonWell[fieldId];
+ var curVal = curWellData[fieldId];
+ var newVal = null;
+ if (Array.isArray(curVal)) {
+ // get uncommonVal
+ newVal = [];
+ for (var idx = 0; idx < curVal.length; idx++) {
+ var curMultiVal = curVal[idx];
+ // multiplex field
+ if (curMultiVal && typeof (curMultiVal === "object")) {
+ if (!this.containsObject(curMultiVal, commonVal)) {
+ newVal.push(curMultiVal);
+ if (!this.containsObject(curMultiVal, allFieldVal[fieldId])) {
+ allFieldVal[fieldId].push(curMultiVal);
+ }
+ }
+ } else {
+ if (commonVal.indexOf(curMultiVal) >= 0) {
+ newVal.push(curMultiVal);
+ if (!allFieldVal[fieldId].indexOf(curMultiVal) >= 0) {
+ allFieldVal[fieldId].push(curMultiVal);
+ }
+ }
+ }
+ }
+ } else if (curVal && typeof (curVal) === "object") {
+ if (commonVal && typeof (commonVal) === "object") {
+ if (!((curVal.value === commonVal.value) || (curVal.unit === commonVal.unit))) {
+ newVal = curVal;
+ if (!this.containsObject(curVal, allFieldVal[fieldId])) {
+ allFieldVal[fieldId].push(curVal);
+ }
+ }
+ } else {
+ newVal = curVal;
+ if (!this.containsObject(curVal, allFieldVal[fieldId])) {
+ allFieldVal[fieldId].push(curVal);
+ }
+ }
+ } else if (curVal !== commonVal) {
+ newVal = curVal;
+ if (!allFieldVal[fieldId].indexOf(curVal) >= 0) {
+ allFieldVal[fieldId].push(curVal);
+ }
+ }
+ diffWellVal[fieldId] = newVal;
+ }
+
+
+ differentWellsVals[wellIdx] = diffWellVal;
+ }
+
+ // clean up step for fields that are empty
+ for (var fieldId in allFieldVal) {
+ if (allFieldVal[fieldId].length === 0) {
+ for (var wellIdx in differentWellsVals) {
+ delete differentWellsVals[wellIdx][fieldId];
+ }
+ }
+ }
+
+ return differentWellsVals;
+ } else if (wellsHash[0]) {
+ var well = {};
+ for (var fieldId in wellsHash[0]) {
+ var curVal = wellsHash[0][fieldId];
+ if (Array.isArray(curVal)) {
+ if (curVal.length > 0) {
+ well[fieldId] = curVal
+ }
+ } else if (curVal) {
+ well[fieldId] = curVal;
+ }
+ }
+ return {
+ 0: well
+ };
+ }
+ },
+
+ // get all wells that has data
+ getWellSetAddressWithData: function() {
+ var address = [];
+ var derivative = this.engine.derivative;
+ for (var id in derivative) {
+ address.push(this.indexToAddress(id));
+ }
+ return address;
+ }
+
+ };
+ }
+})(jQuery, fabric);
+var plateLayOutWidget = plateLayOutWidget || {};
+
+plateLayOutWidget.assets = function() {
+ return {
+ _assets: {
+ doImg: '✓',
+ dontImg: '',
+ warningImg: '⚠'
+ }
+ };
+};
+
+var plateLayOutWidget = plateLayOutWidget || {};
+
+(function($, fabric) {
+
+ plateLayOutWidget.interface = function() {
+ // interface holds all the methods to put the interface in place
+ return {
+
+ _createInterface: function() {
+
+ var divIdentifier = '
';
+ this.container = this._createElement(divIdentifier).addClass("plate-setup-wrapper");
+ this.topSection = this._createElement(divIdentifier).addClass("plate-setup-top-section");
+
+ this.topLeft = this._createElement(divIdentifier).addClass("plate-setup-top-left");
+ this.topRight = this._createElement(divIdentifier).addClass("plate-setup-top-right");
+
+ this.overLayContainer = this._createElement(divIdentifier).addClass("plate-setup-overlay-container");
+ this.canvasContainer = this._createElement(divIdentifier).addClass("plate-setup-canvas-container");
+
+ this._createOverLay();
+ $(this.topLeft).append(this.overLayContainer);
+
+ this._createCanvas();
+ $(this.topLeft).append(this.canvasContainer);
+
+
+ $(this.topSection).append(this.topLeft);
+ $(this.topSection).append(this.topRight);
+
+ $(this.container).append(this.topSection);
+ $(this.element).append(this.container);
+
+ this._initiateFabricCanvas();
+
+ this._createTabAtRight();
+ this._createTabs();
+
+ this._placePresetTabs();
+ // Bottom of the screen
+ this._bottomScreen();
+ // Canvas
+ this._canvas();
+
+ this.bottomForFirstTime();
+
+ var that = this;
+ this._setShortcuts();
+ $(document.body).keyup(function(e) {
+ that._handleShortcuts(e);
+ });
+
+ this._configureUndoRedoArray();
+ },
+
+ _createElement: function(element) {
+ return $(element);
+ },
+
+ _setShortcuts: function() {
+ var that = this;
+ window.addEventListener("cut", function(e) {
+ if (document.activeElement == document.body) {
+ that.copyCriteria();
+ that.clearCriteria();
+ e.preventDefault();
+ }
+ });
+ window.addEventListener("copy", function(e) {
+ if (document.activeElement == document.body) {
+ that.copyCriteria();
+ e.preventDefault();
+ }
+ });
+ window.addEventListener("paste", function(e) {
+ if (document.activeElement == document.body) {
+ that.pasteCriteria();
+ e.preventDefault();
+ }
+ });
+ },
+
+ _handleShortcuts: function(e) {
+ if (document.activeElement === document.body) {
+ if (e.keyCode == 46) {
+ this.clearCriteria();
+ e.preventDefault();
+ } else if (e.ctrlKey || e.metaKey) {
+ if (e.keyCode == 90) {
+ if (e.shiftKey) {
+ this.redo();
+ } else {
+ this.undo();
+ }
+ e.preventDefault();
+ } else if (e.keyCode == 89) {
+ this.redo();
+ e.preventDefault();
+ }
+ }
+ }
+ },
+ };
+ }
+})(jQuery, fabric);
+var plateLayOutWidget = plateLayOutWidget || {};
+
+(function($, fabric) {
+
+ plateLayOutWidget.loadPlate = function(THIS) {
+ // Methods which look after data changes and stack up accordingly
+ // Remember THIS points to plateLayOutWidget and 'this' points to engine
+ return {
+
+ getPlates: function(data) {
+ //sanitize input
+ var derivative = {};
+ for (var index in data.derivative) {
+ var well = data.derivative[index];
+ derivative[index] = this.sanitizeWell(well);
+ }
+
+ var checkboxes = data.checkboxes || [];
+ var selection = this.sanitizeAreas(data.selectedAreas, data.focalWell);
+
+ var sanitized = {
+ "derivative": derivative,
+ "checkboxes": checkboxes,
+ "selectedAreas": selection.selectedAreas,
+ "focalWell": selection.focalWell
+ };
+
+ this.setData(sanitized);
+ },
+
+ sanitizeAreas: function(selectedAreas, focalWell) {
+ var that = this;
+ var rows = this.dimensions.rows;
+ var cols = this.dimensions.cols;
+
+ if (!selectedAreas) {
+ selectedAreas = [];
+ }
+ if (selectedAreas.length) {
+ selectedAreas = selectedAreas.map(function(area) {
+ return {
+ minCol: that._coordIndex(Math.min(area.minCol, area.maxCol), cols),
+ minRow: that._coordIndex(Math.min(area.minRow, area.maxRow), rows),
+ maxCol: that._coordIndex(Math.max(area.minCol, area.maxCol), cols),
+ maxRow: that._coordIndex(Math.max(area.minRow, area.maxRow), rows)
+ };
+ });
+ var area = selectedAreas[selectedAreas.length - 1];
+ if (focalWell && !this._wellInArea(focalWell, area)) {
+ focalWell = null;
+ }
+ if (!focalWell) {
+ focalWell = {
+ row: area.minRow,
+ col: area.minCol
+ };
+ }
+ } else {
+ if (!focalWell) {
+ focalWell = {
+ row: 0,
+ col: 0
+ };
+ }
+ selectedAreas = [this._wellToArea(focalWell)];
+ }
+ return {
+ selectedAreas: selectedAreas,
+ focalWell: focalWell
+ };
+ },
+
+ sanitizeWell: function(well) {
+ var newWell = {};
+ for (var i = 0; i < this.fieldList.length; i++) {
+ var field = this.fieldList[i];
+ newWell[field.id] = field.parseValue(well[field.id]);
+ }
+ return newWell;
+ },
+
+ setData: function(data) {
+ this.engine.derivative = $.extend(true, {}, data.derivative);
+ this.setCheckboxes(data.checkboxes);
+ this.setSelection(data.selectedAreas, data.focalWell);
+ this._colorMixer();
+ this.decideSelectedFields();
+ this.mainFabricCanvas.renderAll();
+ },
+
+ }
+ }
+})(jQuery, fabric);
+var GET_PLATES = 'getPlates';
+var IS_READ_ONLY = 'isReadOnly';
+var IS_DISABLE_ADD_DELETE_WELL = 'isDisableAddDeleteWell';
+var GET_SELECTED_OBJECT = 'getSelectedObject';
+var SETSELECTEDWELL = 'setSelectedWell';
+var plateLayOutWidget = plateLayOutWidget || {};
+
+(function($, fabric) {
+
+ plateLayOutWidget.overlay = function() {
+ // overlay holds all the methods to put the part just above the canvas which contains all those
+ // 'completion percentage' annd 'copy Criteria' button etc ...
+ return {
+
+ _createOverLay: function() {
+
+ var that = this;
+ this.overLayTextContainer = this._createElement("
").addClass("plate-setup-overlay-text-container");
+ this.overLayTextContainer.text("Completion Percentage:");
+ this.overLayContainer.append(this.overLayTextContainer);
+ this.overLayButtonContainer = this._createElement("
").addClass("plate-setup-overlay-button-container");
+ this.overLayContainer.append(this.overLayButtonContainer);
+
+ this.clearCriteriaButton = this._createElement("
").addClass("plate-setup-well-attr-container")
+ .text("Checkbox presets");
+ this.tabContainer.append(this.wellAttrContainer);
+
+ this.presetTabContainer = this._createElement("
").addClass("plate-setup-preset-container");
+ this.tabContainer.append(this.presetTabContainer);
+
+ for (var i = 0; i < presets.length; i++) {
+ var preset = presets[i];
+ var divText = this._createElement("
").addClass("plate-setup-prest-tab-div")
+ .text(preset.title);
+
+ var presetButton = this._createElement("
").addClass("plate-setup-prest-tab")
+ .data("preset", preset.fields).append(divText);
+ this.presetTabContainer.append(presetButton);
+
+ var that = this;
+ presetButton.click(function() {
+ var preset = $(this);
+ that._selectPreset(preset);
+ });
+ this.presets.push(presetButton);
+ }
+ }
+ },
+
+ _clearPresetSelection: function() {
+ for (var j = 0; j < this.presets.length; j++) {
+ var p = this.presets[j];
+ p.removeClass("plate-setup-prest-tab-selected")
+ .addClass("plate-setup-prest-tab");
+ }
+ },
+
+ _selectPreset: function(preset) {
+ this.setCheckboxes(preset.data("preset"));
+ preset.removeClass("plate-setup-prest-tab")
+ .addClass("plate-setup-prest-tab-selected");
+ },
+ };
+ }
+})(jQuery, fabric);
+var plateLayOutWidget = plateLayOutWidget || {};
+
+(function($, fabric) {
+
+ plateLayOutWidget.tabs = function() {
+ // Tabs crete and manage tabs at the right side of the canvas.
+ return {
+
+ allTabs: [],
+
+ defaultWell: {},
+
+ allDataTabs: [], // To hold all the tab contents. this contains all the tabs and its elements and elements
+ // Settings as a whole. its very usefull, when we have units for a specific field.
+ // it goes like tabs-> individual field-> units and checkbox
+
+ _createTabAtRight: function() {
+ this.tabContainer = this._createElement("
").addClass("plate-setup-tab-container");
+ $(this.topRight).append(this.tabContainer);
+ },
+
+ _createTabs: function() {
+ // this could be done using z-index. just imagine few cards stacked up.
+ // Check if options has tab data.
+ // Originally we will be pulling tab data from developer.
+ // Now we are building upon dummy data.
+ this.tabHead = this._createElement("
").addClass("plate-setup-tab-head");
+ $(this.tabContainer).append(this.tabHead);
+
+ var tabData = this.options.attributes.tabs;
+ var that = this;
+
+ tabData.forEach(function(tab, tabIndex) {
+ that.allTabs[tabIndex] = that._createElement("
").addClass("plate-setup-tab");
+ $(that.allTabs[tabIndex]).data("index", tabIndex)
+ .text(tab.name);
+
+ $(that.allTabs[tabIndex]).click(function() {
+ that._tabClickHandler(this);
+ });
+
+ $(that.tabHead).append(that.allTabs[tabIndex]);
+ });
+
+ this.tabDataContainer = this._createElement("
").addClass("plate-setup-tab-data-container");
+ $(this.tabContainer).append(this.tabDataContainer);
+
+ this._addDataTabs(tabData);
+
+ $(this.allTabs[0]).click();
+
+ this._addTabData();
+ },
+
+ _tabClickHandler: function(clickedTab) {
+
+ if (this.selectedTab) {
+ $(this.selectedTab).removeClass("plate-setup-tab-selected")
+ .addClass("plate-setup-tab");
+
+ var previouslyClickedTabIndex = $(this.selectedTab).data("index");
+ $(this.allDataTabs[previouslyClickedTabIndex]).css("z-index", 0);
+ this.readOnlyHandler();
+ }
+
+ $(clickedTab).addClass("plate-setup-tab-selected");
+
+ this.selectedTab = clickedTab;
+
+ var clickedTabIndex = $(clickedTab).data("index");
+ $(this.allDataTabs[clickedTabIndex]).css("z-index", 1000);
+ },
+
+ _addDataTabs: function(tabs) {
+
+ var tabIndex = 0;
+
+ for (var tabData in tabs) {
+ this.allDataTabs[tabIndex++] = this._createElement("
").addClass("plate-setup-data-div")
+ .css("z-index", 0);
+ $(this.tabDataContainer).append(this.allDataTabs[tabIndex - 1]);
+ }
+ }
+ };
+ }
+})(jQuery, fabric);
+var plateLayOutWidget = plateLayOutWidget || {};
+
+(function($, fabric) {
+
+ plateLayOutWidget.undoRedoManager = function(THIS) {
+
+ return {
+
+ undoRedoArray: [],
+
+ actionPointer: null,
+
+ addToUndoRedo: function(data) {
+
+ if (this.actionPointer != null) {
+ var i = this.actionPointer + 1;
+ if (i < this.undoRedoArray.length) {
+ this.undoRedoArray.splice(i, this.undoRedoArray.length - i);
+ }
+ }
+ this.actionPointer = null;
+ this.undoRedoArray.push($.extend(true, {}, data));
+ },
+
+ _configureUndoRedoArray: function() {
+
+ var data = {
+ checkboxes: [],
+ derivative: {},
+ selectedAreas: [{
+ minRow: 0,
+ minCol: 0,
+ maxRow: 0,
+ maxCol: 0
+ }],
+ focalWell: {
+ row: 0,
+ col: 0
+ }
+ };
+
+ this.undoRedoArray = [];
+ this.actionPointer = null;
+ this.undoRedoArray.push($.extend({}, data));
+ },
+
+ undo: function() {
+ console.log("undo");
+ return this.shiftUndoRedo(-1);
+ },
+
+ redo: function() {
+ console.log("redo");
+ return this.shiftUndoRedo(1);
+ },
+
+ shiftUndoRedo: function(pointerDiff) {
+ var pointer = this.actionPointer;
+ if (pointer == null) {
+ pointer = this.undoRedoArray.length - 1;
+ }
+ pointer += pointerDiff;
+ return this.setUndoRedo(pointer);
+ },
+
+ setUndoRedo: function(pointer) {
+ if (pointer < 0) {
+ return false;
+ }
+ if (pointer >= this.undoRedoArray.length) {
+ return false;
+ }
+ this.undoRedoActive = true;
+ this.setData(this.undoRedoArray[pointer]);
+ this.actionPointer = pointer;
+ this.undoRedoActive = false;
+ this.derivativeChange();
+ return true;
+ }
+ }
+ };
+
+})(jQuery, fabric);
+var plateLayOutWidget = plateLayOutWidget || {};
+
+(function($, fabric) {
+
+ plateLayOutWidget.wellArea = function(fabric) {
+
+ return {
+
+ _areasToTiles: function(areas) {
+ //Convert areas to tiles
+ var cols = this.dimensions.cols;
+ var that = this;
+ return areas.reduce(function(tiles, area) {
+ if (area) {
+ for (var r = area.minRow; r <= area.maxRow; r++) {
+ for (var c = area.minCol; c <= area.maxCol; c++) {
+ var tile = that.allTiles[c + cols * r];
+ if (tiles.indexOf(tile) < 0) {
+ if (that.disableAddDeleteWell) {
+ if (that.addressAllowToEdit.indexOf(tile.address) >= 0) {
+ tiles.push(tile);
+ }
+ } else {
+ tiles.push(tile);
+ }
+ }
+ }
+ }
+ }
+ return tiles;
+ }, []);
+ },
+
+ _encodeArea: function(area) {
+ //Encode area as string
+ if ((area.minRow == area.maxRow) && (area.minCol == area.maxCol)) {
+ return this.rowIndex[area.minRow] + area.minCol.toString(10);
+ } else {
+ return this.rowIndex[area.minRow] + area.minCol.toString(10) + ":" + this.rowIndex[area.maxRow] + area.maxCol.toString(10);
+ }
+ },
+
+ _encodeAreas: function(areas) {
+ //Encode an array of areas as a string
+ var that = this;
+ return areas.map(function(area) {
+ return that._encodeArea(area);
+ }).join(",");
+ },
+
+ _decodeWell: function(wellAddress) {
+ var that = this;
+ var adRx = new RegExp("^\\s*(" + that.rowIndex.join("|") + ")(\\d+)\\s*$")
+ var rcRx = /^\s*R(\d+)C(\d+)\s*$/i;
+
+ var match;
+ match = wellAddress.match(adRx);
+ if (match) {
+ var row = that.rowIndex.indexOf(match[1]);
+ if (row >= 0) {
+ return {
+ row: row,
+ col: parseInt(match[2]) - 1
+ };
+ }
+ }
+ match = wellAddress.match(rcRx);
+ if (match) {
+ return {
+ row: parseInt(match[1]) - 1,
+ col: parseInt(match[2]) - 1
+ };
+ }
+
+ throw "Invalid well address: " + wellAddress;
+ },
+
+ _decodeArea: function(areaAddress) {
+ //Decode single area as string
+ var that = this;
+ var wells = areaAddress.split(":").map(function(wellAddress) {
+ return that._decodeWell(wellAddress);
+ })
+ if (wells.length == 1) {
+ return {
+ minRow: wells[0].row,
+ minCol: wells[0].col,
+ maxRow: wells[0].row,
+ maxCol: wells[0].col
+ }
+ } else if (wells.length == 2) {
+ var minRow = Math.min(wells[0].row, wells[1].row)
+ return {
+ minRow: Math.min(wells[0].row, wells[1].row),
+ minCol: Math.min(wells[0].col, wells[1].col),
+ maxRow: Math.max(wells[0].row, wells[1].row),
+ maxCol: Math.max(wells[0].col, wells[1].col)
+ }
+ } else {
+ throw "Invalid address: " + areaAddress;
+ }
+ },
+
+ _decodeAreas: function(areasAddress) {
+ //Decode single area as string
+ var that = this;
+ return areasAddress.split(",").map(function(areaAddress) {
+ return that._decodeArea(areaAddress);
+ });
+ },
+
+ _wellToArea: function(well) {
+ //Convert a well to an area
+ return {
+ minCol: well.col,
+ minRow: well.row,
+ maxCol: well.col,
+ maxRow: well.row
+ }
+ },
+
+ _wellInArea: function(well, area) {
+ //Determine if a well lies within an area
+ return well.row >= area.minRow && well.row <= area.maxRow && well.col >= area.minCol && well.col <= area.maxCol;
+ },
+
+ _coordsToRect: function(startCoords, endCoords) {
+ //Convert two XY coords to a bounding box
+ var left = Math.min(startCoords.x, endCoords.x);
+ var top = Math.min(startCoords.y, endCoords.y);
+ var height = Math.abs(endCoords.y - startCoords.y);
+ var width = Math.abs(endCoords.x - startCoords.x);
+ return {
+ top: top,
+ left: left,
+ height: height,
+ width: width
+ };
+ },
+
+ _coordIndex: function(v, count) {
+ var i;
+ if (v < 0) {
+ i = 0;
+ } else if (v >= count) {
+ i = count - 1;
+ } else {
+ i = Math.floor(v);
+ }
+ return i;
+ },
+
+ _coordsToWell: function(coord) {
+ //Convert a coordinate to a well
+ var cols = this.dimensions.cols;
+ var rows = this.dimensions.rows;
+
+ var w = this.sizes.spacing;
+ var m = this.sizes.label_spacing;
+
+ var x = (coord.x - m) / w;
+ var y = (coord.y - m) / w;
+
+ var row = this._coordIndex(y, rows);
+ var col = this._coordIndex(x, cols);
+
+ return {
+ row: row,
+ col: col,
+ };
+ },
+
+ _wellToCoords: function(well, center) {
+ //Convert a well to a coordinate
+ var w = this.sizes.spacing;
+ var m = this.sizes.label_spacing;
+ var x = well.col * w + m;
+ var y = well.row * w + m;
+ if (center) {
+ var hw = w / 2;
+ x = x + hw;
+ y = y + hw;
+ }
+
+ return {
+ x: x,
+ y: y
+ };
+ },
+
+ _areaToRect: function(area) {
+ //Convert area to rectangle
+ var rows = area.maxRow - area.minRow + 1;
+ var cols = area.maxCol - area.minCol + 1;
+
+ var w = this.sizes.spacing;
+ var m = this.sizes.label_spacing;
+
+ return {
+ top: area.minRow * w + m,
+ left: area.minCol * w + m,
+ height: rows * w,
+ width: cols * w
+ }
+ },
+
+ _rectToArea: function(rect) {
+ //Convert a rectangular region to an area
+ var rows = this.dimensions.rows;
+ var cols = this.dimensions.cols;
+
+ var w = this.sizes.spacing;
+ var m = this.sizes.label_spacing;
+
+ var left = (rect.left - m) / w;
+ var top = (rect.top - m) / w;
+ var height = rect.height / w;
+ var width = rect.width / w;
+ var right = left + width;
+ var bottom = top + height;
+
+ //select whole row
+ if (right < 0) {
+ right = cols;
+ }
+ if (left >= cols) {
+ left = 0;
+ }
+ //select whole col
+ if (bottom < 0) {
+ bottom = rows;
+ }
+ if (top <= 0) {
+ top = 0;
+ }
+
+ return {
+ minCol: this._coordIndex(left, cols),
+ minRow: this._coordIndex(top, rows),
+ maxCol: this._coordIndex(right, cols),
+ maxRow: this._coordIndex(bottom, rows)
+ };
+ }
+
+ }
+ }
+})(jQuery, fabric);
\ No newline at end of file
diff --git a/dist/js/plate-map.min.js b/dist/js/plate-map.min.js
new file mode 100755
index 0000000..af52137
--- /dev/null
+++ b/dist/js/plate-map.min.js
@@ -0,0 +1,2 @@
+var plateLayOutWidget=plateLayOutWidget||{};!function(c,e){plateLayOutWidget.addDataOnChange=function(){return{_addAllData:function(e){if(this.allSelectedObjects)for(var t=this.allSelectedObjects.length,i=[],a=0;a ").addClass("plate-setup-tab-default-field"),l=a._createElement("
").addClass("plate-setup-tab-field-left-side"),s=a._createElement("
").addClass("plate-setup-tab-field-right-side"),r=a._createElement("
").addClass("plate-setup-tab-name").text(e.name),o=a._createElement("
").addClass("plate-setup-tab-field-container");c(s).append(r),c(s).append(o),c(n).append(l),c(n).append(s),c(a.allDataTabs[t]).append(n);var d={id:e.id,name:e.name,root:n,data:e,required:e.required||!1};return i.push(d),a.fieldMap[e.id]=d},_makeRegularField:function(e,t,i,a){var n=this,l=n._createElement("
").addClass("plate-setup-tab-default-field"),s=n._createElement("
").addClass("plate-setup-tab-field-left-side"),r=n._createElement("
").addClass("plate-setup-tab-field-right-side "),o=n._createElement("
").addClass("plate-setup-tab-name").text(e.name),d=n._createElement("
").addClass("plate-setup-tab-field-container");r.append(o),r.append(d),l.append(s),l.append(r),n.allDataTabs[t].append(l);var c={id:e.id,name:e.name,root:l,data:e,required:e.required};return c.required&&n.requiredField.push(c.id),i.push(c),n.fieldList.push(c),n.fieldMap[c.id]=c,a&&n._addCheckBox(c),n._createField(c),c.onChange=function(){var e=c.getValue(),t={};t[c.id]=e,n._addAllData(t)},c},_makeMultiplexField:function(e,t,i){var a=this,n=a._createElement("
").addClass("plate-setup-tab-default-field"),l=a._createElement("
").addClass("plate-setup-tab-field-left-side"),s=a._createElement("
").addClass("plate-setup-tab-field-right-side "),r=a._createElement("
").addClass("plate-setup-tab-name").text(e.name),o=a._createElement("
").addClass("plate-setup-tab-field-container");s.append(r),s.append(o),n.append(l),n.append(s),a.allDataTabs[t].append(n);var d={id:e.id,name:e.name,root:n,data:e,required:e.required};i.push(d),a.fieldList.push(d),a.fieldMap[e.id]=d;var c=[],u=[];for(var f in e.multiplexFields){var h=e.multiplexFields[f],p=a._makeSubField(h,t,i);c.push(p),h.required&&u.push(p.id)}return(d.required||u.length)&&this.requiredField.push({multiplexId:d.id,subFields:u}),d.subFieldList=c,a._createField(d),a._addCheckBox(d),c.forEach(function(s){s.mainMultiplexField=d,i.push(s),a._createField(s),a._addCheckBox(s),delete a.defaultWell[s.id],s.onChange=function(){var t=s.getValue(),i=s.mainMultiplexField,a=i.singleSelectValue(),e={};e[i.id]=a,e[s.id]=t;var n={id:a,value:e};d._changeMultiFieldValue(n,null);var l=i.detailData;null!==l&&(a=i.singleSelectValue(),l=l.map(function(e){return e[i.id]===a&&(e[s.id]=t),e})),i.detailData=l}}),d.getValue=function(){var e=d.input.val();return e.length?e:null},d}}}}(jQuery,fabric);plateLayOutWidget=plateLayOutWidget||{};!function(s,e){plateLayOutWidget.addWarningMsg=function(){return{fieldWarningMsg:function(e,t,i){var a="fieldWarning"+e.id,n=s("
").html(this._assets.warningImg).attr("id",a).addClass("plate-field-warning-image");if(i){if(e.root.find("#"+a).length<=0){e.root.find(".plate-setup-tab-name").text(" "+e.name),e.root.find(".plate-setup-tab-name").prepend(n);var l=s("
").addClass("pop-out-text");l.text(t),e.root.find(".plate-setup-tab-name").append(l),s("#"+a).hover(function(e){l[0].style.display="flex"},function(){l.hide()})}}else 0").html(this._assets.warningImg).attr("id",a).addClass("plate-field-warning-image");if(i){e.root.find(".plate-setup-tab-name").append(n);var l=s("
").addClass("pop-out-text");l.text(t),e.root.find(".plate-setup-tab-name").append(l),s("#"+a).hover(function(e){l[0].style.display="inline-block"},function(){l.hide()})}else s("#"+a).remove(),0 ").addClass("plate-setup-bottom-container"),this.bottomTableContainer=this._createElement("
").addClass("plate-setup-bottom-table-container"),this.bottomTable=this._createElement("
").addClass("plate-setup-bottom-table"),this.bottomTableContainer.append(this.bottomTable),this.bottomContainer.append(this.bottomTableContainer),this.container.append(this.bottomContainer)},addBottomTableHeadings:function(){this.bottomRow=this._createElement("
").text("Group");this.bottomRow.prepend(e),this.bottomTable.empty(),this.bottomTable.append(this.bottomRow),this.rowCounter=1;for(var t=0;t
')
+ if (include) {
+ if (field.root.find("#" + imgId).length <= 0) {
+ field.root.find(".plate-setup-tab-name").text(" " + field.name);
+ field.root.find(".plate-setup-tab-name").prepend(img);
+
+ var popText = $("").addClass("pop-out-text");
+ popText.text(text);
+ field.root.find(".plate-setup-tab-name").append(popText);
+
+ $("#" + imgId).hover(function(e) {
+ popText[0].style.display = 'flex';
+ }, function() {
+ popText.hide();
+ });
+ }
+
+
+ } else {
+ if (field.root.find("#" + imgId).length > 0) {
+ field.root.find(".plate-setup-tab-name").text(field.name);
+ $("#" + imgId).remove();
+ }
+ }
+ },
+
+ removeWarningMsg: function(field, text, include) {
+ var that = this;
+ var imgId = "fieldWarning" + field.id;
+ var img = $("").html(that._assets.warningImg).attr("id", imgId).addClass("plate-field-warning-image");
+ //field.root.find(".plate-setup-tab-name").append('![](\"theImg.png\")
')\n if (include) {\n if (field.root.find(\"#\" + imgId).length <= 0) {\n field.root.find(\".plate-setup-tab-name\").text(\" \" + field.name);\n field.root.find(\".plate-setup-tab-name\").prepend(img);\n\n var popText = $(\"\").addClass(\"pop-out-text\");\n popText.text(text);\n field.root.find(\".plate-setup-tab-name\").append(popText);\n\n $(\"#\" + imgId).hover(function(e) {\n popText[0].style.display = 'flex';\n }, function() {\n popText.hide();\n });\n }\n\n\n } else {\n if (field.root.find(\"#\" + imgId).length > 0) {\n field.root.find(\".plate-setup-tab-name\").text(field.name);\n $(\"#\" + imgId).remove();\n }\n }\n },\n\n removeWarningMsg: function(field, text, include) {\n var that = this;\n var imgId = \"fieldWarning\" + field.id;\n var img = $(\"