From 1b7a7bde125538f97bc32bcc1cf46902d2afabad Mon Sep 17 00:00:00 2001 From: Dannon Baker Date: Wed, 5 Jun 2024 16:00:49 -0400 Subject: [PATCH] Fix annotate image, dump jquery.ajax for fetch. --- .../annotate_image/package.json | 4 +- .../annotate_image/src/jq-loader.js | 3 + .../annotate_image/src/script.js | 125 +++++++++--------- 3 files changed, 70 insertions(+), 62 deletions(-) create mode 100644 config/plugins/visualizations/annotate_image/src/jq-loader.js diff --git a/config/plugins/visualizations/annotate_image/package.json b/config/plugins/visualizations/annotate_image/package.json index fba62a8b080c..f546269cf52a 100644 --- a/config/plugins/visualizations/annotate_image/package.json +++ b/config/plugins/visualizations/annotate_image/package.json @@ -15,11 +15,11 @@ "underscore": "^1.8.3" }, "devDependencies": { - "parcel": "^2.12.0" + "parcel": "2.12.0" }, "scripts": { "build": "yarn build-css && yarn build-js", "build-css": "cp 'node_modules/jquery-contextmenu/dist/jquery.contextMenu.css' 'static/'", - "build-js": "parcel build src/script.js --dist-dir static --no-source-maps" + "build-js": "parcel build src/script.js --dist-dir static" } } diff --git a/config/plugins/visualizations/annotate_image/src/jq-loader.js b/config/plugins/visualizations/annotate_image/src/jq-loader.js new file mode 100644 index 000000000000..0b3c6bdb4acd --- /dev/null +++ b/config/plugins/visualizations/annotate_image/src/jq-loader.js @@ -0,0 +1,3 @@ +import jquery from "jquery"; + +export default window.$ = window.jQuery = jquery; diff --git a/config/plugins/visualizations/annotate_image/src/script.js b/config/plugins/visualizations/annotate_image/src/script.js index d97fe758420e..443c1932b6cf 100644 --- a/config/plugins/visualizations/annotate_image/src/script.js +++ b/config/plugins/visualizations/annotate_image/src/script.js @@ -1,4 +1,4 @@ -import $ from "jquery"; +import $ from "./jq-loader"; import "jquery-contextmenu"; import "jquery.ui.position"; import _ from "underscore"; @@ -11,7 +11,7 @@ function prefixedDownloadUrl(root, path) { return `${root}/${path}`.replace(slashCleanup, "/"); } -const CommandManager = (function() { +const CommandManager = (function () { function CommandManager() {} CommandManager.executed = []; @@ -50,9 +50,9 @@ const CommandManager = (function() { return CommandManager; })(); -const generateUUID = function() { +const generateUUID = function () { let d = new Date().getTime(); - const uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) { + const uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) { const r = (d + Math.random() * 16) % 16 | 0; d = Math.floor(d / 16); return (c == "x" ? r : (r & 0x7) | 0x8).toString(16); @@ -65,29 +65,29 @@ window.bundleEntries.load = function (opt) { const chart = opt.chart; const dataset = opt.dataset; const defaults = { color: "red", width: 4, opacity: 0.5 }; - $.fn.createCanvas = function(options) { + $.fn.createCanvas = function (options) { let settings = $.extend({}, defaults, options || {}); const self = this; - this.setOptions = function(options) { + this.setOptions = function (options) { settings = $.extend(settings, options); }; - $(document).ready(function() { - $(self).each(function(eachIndex, eachItem) { + $(document).ready(function () { + $(self).each(function (eachIndex, eachItem) { self.paths = []; const img = eachItem; // Get a reference to the canvas object const canvas = $("") .attr({ width: options.img_width + "px", - height: options.img_height + "px" + height: options.img_height + "px", }) .addClass("image-canvas") .css({ position: "absolute", top: "0px", - left: "0px" + left: "0px", }); $(img).after(canvas); $(img).data("paths", []); @@ -96,13 +96,13 @@ window.bundleEntries.load = function (opt) { canvas[0].width = options.img_width; canvas[0].height = options.img_height; - $(canvas).mouseenter(function() { + $(canvas).mouseenter(function () { paper.projects[eachIndex].activate(); }); // Create a simple drawing tool: const tool = new paper.Tool(); - tool.onMouseMove = function(event) { + tool.onMouseMove = function (event) { if (!$(".context-menu-list").is(":visible")) { paper.project.activeLayer.selected = false; self.setPenColor(settings.color); @@ -116,7 +116,7 @@ window.bundleEntries.load = function (opt) { } }; - tool.onMouseDown = function(event) { + tool.onMouseDown = function (event) { switch (event.event.button) { // leftclick case 0: @@ -137,7 +137,7 @@ window.bundleEntries.load = function (opt) { } }; - tool.onMouseDrag = function(event) { + tool.onMouseDrag = function (event) { switch (event.event.button) { // leftclick case 0: @@ -162,7 +162,7 @@ window.bundleEntries.load = function (opt) { } }; - tool.onMouseUp = function(event) { + tool.onMouseUp = function (event) { switch (event.event.button) { // leftclick case 0: @@ -171,11 +171,11 @@ window.bundleEntries.load = function (opt) { const selectedItemId = selectedItem.id; const draggingStartPoint = { x: mouseDownPoint.x, y: mouseDownPoint.y }; CommandManager.execute({ - execute: function() { + execute: function () { //item was already moved, so do nothing }, - unexecute: function() { - $(paper.project.activeLayer.children).each(function(index, item) { + unexecute: function () { + $(paper.project.activeLayer.children).each(function (index, item) { if (item.id == selectedItemId) { if (item.segments) { new paper.Point( @@ -196,7 +196,7 @@ window.bundleEntries.load = function (opt) { return false; } }); - } + }, }); mouseDownPoint = null; } @@ -207,20 +207,20 @@ window.bundleEntries.load = function (opt) { const strPath = path.exportJSON({ asString: true }); const uid = generateUUID(); CommandManager.execute({ - execute: function() { + execute: function () { path = new paper.Path(); path.importJSON(strPath); path.data.uid = uid; }, - unexecute: function() { - $(paper.project.activeLayer.children).each(function(index, item) { + unexecute: function () { + $(paper.project.activeLayer.children).each(function (index, item) { if (item.data && item.data.uid) { if (item.data.uid == uid) { item.remove(); } } }); - } + }, }); } break; @@ -233,7 +233,7 @@ window.bundleEntries.load = function (opt) { } }; - tool.onKeyUp = function(event) { + tool.onKeyUp = function (event) { if (selectedItem) { // When a key is released, set the content of the text item: if (selectedItem.content) { @@ -254,7 +254,7 @@ window.bundleEntries.load = function (opt) { //let contextSelectedItemId; let selectedItem; let mouseDownPoint; - this.downloadCanvas = function(canvas, filename) { + this.downloadCanvas = function (canvas, filename) { /// create an "off-screen" anchor tag const lnk = document.createElement("a"); @@ -276,12 +276,12 @@ window.bundleEntries.load = function (opt) { } }; - this.download = function() { + this.download = function () { const canvas = paper.project.activeLayer.view.element; const img = $(canvas)[0]; const mergeCanvas = $("").attr({ width: img.width, - height: img.height + height: img.height, }); const mergedContext = mergeCanvas[0].getContext("2d"); mergedContext.clearRect(0, 0, img.width, img.height); @@ -290,12 +290,10 @@ window.bundleEntries.load = function (opt) { self.downloadCanvas(mergeCanvas[0], "only-annotations.png"); // create canvas for original and annotations - const annotated_img = $(canvas) - .parent() - .find("img")[0]; + const annotated_img = $(canvas).parent().find("img")[0]; const mergeCanvasAnnotated = $("").attr({ width: $(annotated_img).width(), - height: $(annotated_img).height() + height: $(annotated_img).height(), }); const mergedContextAnnotated = mergeCanvasAnnotated[0].getContext("2d"); mergedContextAnnotated.clearRect(0, 0, $(annotated_img).width(), $(annotated_img).height()); @@ -304,11 +302,11 @@ window.bundleEntries.load = function (opt) { self.downloadCanvas(mergeCanvasAnnotated[0], "original-with-annotations.png"); }; - this.setText = function() { + this.setText = function () { const uid = generateUUID(); const pos = contextPoint; CommandManager.execute({ - execute: function() { + execute: function () { const TXT_DBL_CLICK = "<>"; const txt = TXT_DBL_CLICK; const text = new paper.PointText(pos); @@ -318,26 +316,26 @@ window.bundleEntries.load = function (opt) { text.fontFamily = "sans-serif"; text.data.uid = uid; text.opacity = settings.opacity; - text.onDoubleClick = function(event) { + text.onDoubleClick = function (event) { if (this.className == "PointText") { const txt = window.prompt("Type in your text", this.content.replace(TXT_DBL_CLICK, "")); if (txt.length > 0) this.content = txt; } }; }, - unexecute: function() { - $(paper.project.activeLayer.children).each(function(index, item) { + unexecute: function () { + $(paper.project.activeLayer.children).each(function (index, item) { if (item.data && item.data.uid) { if (item.data.uid == uid) { item.remove(); } } }); - } + }, }); }; - this.setPenColor = function(color) { + this.setPenColor = function (color) { self.setOptions({ color: color }); $(".image-canvas").css( "cursor", @@ -345,14 +343,14 @@ window.bundleEntries.load = function (opt) { ); }; - this.setCursorHandOpen = function() { + this.setCursorHandOpen = function () { $(".image-canvas").css( "cursor", "url(/static/plugins/visualizations/annotate_image/static/images/hand-open.png) 25 25, auto" ); }; - this.setCursorHandClose = function() { + this.setCursorHandClose = function () { $(".image-canvas").css( "cursor", "url(/static/plugins/visualizations/annotate_image/static/images/hand-close.png) 25 25, auto" @@ -361,7 +359,7 @@ window.bundleEntries.load = function (opt) { $.contextMenu({ selector: ".image-canvas", - callback: function(key, options) { + callback: function (key, options) { switch (key) { //COMMANDS case "undo": @@ -406,53 +404,60 @@ window.bundleEntries.load = function (opt) { redPen: { name: "Red Pen", icon: "redpen" }, greenPen: { name: "Green Pen", icon: "greenpen" }, bluePen: { name: "Blue Pen", icon: "bluepen" }, - yellowPen: { name: "Yellow Pen", icon: "yellowpen" } - } + yellowPen: { name: "Yellow Pen", icon: "yellowpen" }, + }, }); const $menuList = $(".context-menu-list"); $menuList.find(".context-menu-icon-text").css({ "background-image": "url(/static/plugins/visualizations/annotate_image/static/images/text.png)", "background-repeat": "no-repeat", - "background-position": "right 96% bottom 45%" + "background-position": "right 96% bottom 45%", }); $menuList.find(".context-menu-icon-blackpen").css({ "background-image": "url(/static/plugins/visualizations/annotate_image/static/images/blackpen.png)", "background-repeat": "no-repeat", - "background-position": "right 97% bottom 48%" + "background-position": "right 97% bottom 48%", }); $menuList.find(".context-menu-icon-redpen").css({ "background-image": "url(/static/plugins/visualizations/annotate_image/static/images/redpen.png)", "background-repeat": "no-repeat", - "background-position": "right 97% bottom 48%" + "background-position": "right 97% bottom 48%", }); $menuList.find(".context-menu-icon-greenpen").css({ "background-image": "url(/static/plugins/visualizations/annotate_image/static/images/greenpen.png)", "background-repeat": "no-repeat", - "background-position": "right 97% bottom 48%" + "background-position": "right 97% bottom 48%", }); $menuList.find(".context-menu-icon-bluepen").css({ "background-image": "url(/static/plugins/visualizations/annotate_image/static/images/bluepen.png)", "background-repeat": "no-repeat", - "background-position": "right 97% bottom 48%" + "background-position": "right 97% bottom 48%", }); $menuList.find(".context-menu-icon-yellowpen").css({ "background-image": "url(/static/plugins/visualizations/annotate_image/static/images/yellowpen.png)", "background-repeat": "no-repeat", - "background-position": "right 97% bottom 48%" + "background-position": "right 97% bottom 48%", }); }; const downloadUrl = prefixedDownloadUrl(opt.root, dataset.download_url); - $.ajax({ - url: downloadUrl, - success: function(content) { + + fetch(downloadUrl) + .then((response) => { + if (!response.ok) { + throw new Error("Failed to access dataset."); + } + return response.text(); + }) + .then((content) => { const $chartViewer = $("#" + opt.target); $chartViewer.html(""); $chartViewer.css("overflow", "auto"); $chartViewer.css("position", "relative"); + const $image = $chartViewer.find("img"); - $image.on("load", function() { + $image.on("load", function () { const width = $(this).width(); const height = $(this).height(); $image.width(width); @@ -462,15 +467,15 @@ window.bundleEntries.load = function (opt) { width: 2, opacity: 0.5, img_width: width, - img_height: height + img_height: height, }); }); + chart.state("ok", "Chart drawn."); opt.process.resolve(); - }, - error: function() { - chart.state("failed", "Failed to access dataset."); + }) + .catch((error) => { + chart.state("failed", error.message); opt.process.resolve(); - } - }); -} + }); +};