diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js
index 76a05b7e2..05b4a386e 100644
--- a/src/public/app/layouts/desktop_layout.js
+++ b/src/public/app/layouts/desktop_layout.js
@@ -78,6 +78,7 @@ import HideFloatingButtonsButton from "../widgets/floating_buttons/hide_floating
import ScriptExecutorWidget from "../widgets/ribbon_widgets/script_executor.js";
import MovePaneButton from "../widgets/buttons/move_pane_button.js";
import UploadAttachmentsDialog from "../widgets/dialogs/upload_attachments.js";
+import CanvasPropertiesWidget from "../widgets/ribbon_widgets/canvas_properties.js";
export default class DesktopLayout {
constructor(customWidgets) {
@@ -144,6 +145,7 @@ export default class DesktopLayout {
.ribbon(new NotePropertiesWidget())
.ribbon(new FilePropertiesWidget())
.ribbon(new ImagePropertiesWidget())
+ .ribbon(new CanvasPropertiesWidget())
.ribbon(new BasicPropertiesWidget())
.ribbon(new OwnedAttributeListWidget())
.ribbon(new InheritedAttributesWidget())
diff --git a/src/public/app/services/utils.js b/src/public/app/services/utils.js
index e17606c1e..8be7c3056 100644
--- a/src/public/app/services/utils.js
+++ b/src/public/app/services/utils.js
@@ -495,6 +495,14 @@ function copyHtmlToClipboard(content) {
navigator.clipboard.write([clipboardItem]);
}
+/**
+ * @param {FNote} note
+ * @return {string}
+ */
+function createImageSrcUrl(note) {
+ return `api/images/${note.noteId}/${encodeURIComponent(note.title)}?timestamp=${Date.now()}`;
+}
+
export default {
reloadFrontendApp,
parseDate,
@@ -533,5 +541,6 @@ export default {
sleep,
escapeRegExp,
areObjectsEqual,
- copyHtmlToClipboard
+ copyHtmlToClipboard,
+ createImageSrcUrl
};
diff --git a/src/public/app/widgets/ribbon_widgets/canvas_properties.js b/src/public/app/widgets/ribbon_widgets/canvas_properties.js
new file mode 100644
index 000000000..d36bdecf0
--- /dev/null
+++ b/src/public/app/widgets/ribbon_widgets/canvas_properties.js
@@ -0,0 +1,56 @@
+import NoteContextAwareWidget from "../note_context_aware_widget.js";
+import utils from "../../services/utils.js";
+import imageService from "../../services/image.js";
+
+const TPL = `
+
+
+
+
+
+
+
`;
+
+export default class CanvasPropertiesWidget extends NoteContextAwareWidget {
+ get name() {
+ return "canvasProperties";
+ }
+
+ get toggleCommand() {
+ return "toggleRibbonTabCanvasProperties";
+ }
+
+ isEnabled() {
+ return this.note && this.note.type === 'canvas';
+ }
+
+ getTitle() {
+ return {
+ show: this.isEnabled(),
+ activate: false,
+ title: 'Canvas',
+ icon: 'bx bx-pen'
+ };
+ }
+
+ doRender() {
+ this.$widget = $(TPL);
+ this.contentSized();
+
+ this.$hiddenCanvasCopy = this.$widget.find('.hidden-canvas-copy');
+
+ this.$copyReferenceToClipboardButton = this.$widget.find(".canvas-copy-reference-to-clipboard");
+ this.$copyReferenceToClipboardButton.on('click', () => {
+ this.$hiddenCanvasCopy.empty().append(
+ $("
")
+ .attr("src", utils.createImageSrcUrl(this.note))
+ );
+
+ imageService.copyImageReferenceToClipboard(this.$hiddenCanvasCopy);
+
+ this.$hiddenCanvasCopy.empty();
+ });
+ }
+}
diff --git a/src/public/app/widgets/ribbon_widgets/image_properties.js b/src/public/app/widgets/ribbon_widgets/image_properties.js
index 064139bb0..18bfdd651 100644
--- a/src/public/app/widgets/ribbon_widgets/image_properties.js
+++ b/src/public/app/widgets/ribbon_widgets/image_properties.js
@@ -61,9 +61,13 @@ export default class ImagePropertiesWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
+
this.$copyReferenceToClipboardButton = this.$widget.find(".image-copy-reference-to-clipboard");
+ this.$copyReferenceToClipboardButton.on('click', () => this.triggerEvent(`copyImageReferenceToClipboard`, {ntxId: this.noteContext.ntxId}));
+
this.$uploadNewRevisionButton = this.$widget.find(".image-upload-new-revision");
this.$uploadNewRevisionInput = this.$widget.find(".image-upload-new-revision-input");
+
this.$fileName = this.$widget.find(".image-filename");
this.$fileType = this.$widget.find(".image-filetype");
this.$fileSize = this.$widget.find(".image-filesize");
@@ -74,8 +78,6 @@ export default class ImagePropertiesWidget extends NoteContextAwareWidget {
this.$imageDownloadButton = this.$widget.find(".image-download");
this.$imageDownloadButton.on('click', () => openService.downloadFileNote(this.noteId));
- this.$copyReferenceToClipboardButton.on('click', () => this.triggerEvent(`copyImageReferenceToClipboard`, {ntxId: this.noteContext.ntxId}));
-
this.$uploadNewRevisionButton.on("click", () => {
this.$uploadNewRevisionInput.trigger("click");
});
diff --git a/src/public/app/widgets/type_widgets/image.js b/src/public/app/widgets/type_widgets/image.js
index 6bfac7f77..89bff4f69 100644
--- a/src/public/app/widgets/type_widgets/image.js
+++ b/src/public/app/widgets/type_widgets/image.js
@@ -90,7 +90,7 @@ class ImageTypeWidget extends TypeWidget {
}
async doRefresh(note) {
- this.$imageView.prop("src", `api/images/${note.noteId}/${encodeURIComponent(note.title)}?timestamp=${Date.now()}`);
+ this.$imageView.prop("src", utils.createImageSrcUrl(note));
}
copyImageReferenceToClipboardEvent({ntxId}) {