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}) {