diff --git a/src/components/ContentWrap.jsx b/src/components/ContentWrap.jsx index 246140b2..eb61c5ba 100644 --- a/src/components/ContentWrap.jsx +++ b/src/components/ContentWrap.jsx @@ -1,26 +1,27 @@ -import React, { h, Component } from 'preact'; +import React, {Component} from 'preact'; import {saveAs} from 'file-saver' import UserCodeMirror from './UserCodeMirror.jsx'; import Toolbox from './Toolbox.jsx'; import Tabs from './Tabs.jsx'; -import { computeHtml, computeCss, computeJs } from '../computes'; -import { modes, HtmlModes, CssModes, JsModes } from '../codeModes'; -import { log, loadJS, getCompleteHtml } from '../utils'; -import { writeFileAsync} from "../WriteFile"; +import {computeCss, computeHtml, computeJs} from '../computes'; +import {CssModes, HtmlModes, JsModes, modes} from '../codeModes'; +import {getCompleteHtml, loadJS, log} from '../utils'; +import {writeFileAsync} from "../WriteFile"; import Vue from '!!file-loader!vue/dist/vue'; import Vuex from '!!file-loader!vuex/dist/vuex'; import vueSequence from '!!file-loader!vue-sequence'; import vueSequenceCss from '!!file-loader!vue-sequence/dist/vue-sequence.css'; -import { Button } from './common'; -import { SplitPane } from './SplitPane.jsx'; -import { trackEvent } from '../analytics'; +import {Button} from './common'; +import {SplitPane} from './SplitPane.jsx'; +import {trackEvent} from '../analytics'; import CodeMirror from '../CodeMirror'; import 'codemirror/mode/javascript/javascript.js' -import { Console } from './Console'; -import { deferred } from '../deferred'; +import {Console} from './Console'; +import {deferred} from '../deferred'; import CssSettingsModal from './CssSettingsModal'; import codeService from '../services/code_service' +import {alertsService} from '../notifications'; const minCodeWrapSize = 33; @@ -445,81 +446,44 @@ export default class ContentWrap extends Component { trackEvent('ui', 'paneHeaderDblClick', codeWrapParent.dataset.type); } async exportPngClickHandler(e) { - const mountingPoint = this.frame.contentWindow.document.getElementById('diagram'); - // eslint-disable-next-line - const png = await mountingPoint.getElementsByClassName('frame')[0].parentElement.__vue__.toBlob(); + const png = await this.getPngBlob(); saveAs(png, 'zenuml.png'); trackEvent('ui', 'downloadPng'); } - async exportJpegClickHandler(e) { + async getPngBlob() { const mountingPoint = this.frame.contentWindow.document.getElementById('diagram'); // eslint-disable-next-line - const jpeg = await mountingPoint.getElementsByClassName('frame')[0].parentElement.__vue__.toJpeg(); - saveAs(jpeg, 'zenuml.jpeg'); - trackEvent('ui', 'downloadJpeg'); + return await mountingPoint.getElementsByClassName('frame')[0].parentElement.__vue__.toBlob(); } - async copyPngClickHandler(e) { - console.log(e); - const mountingPoint = this.frame.contentWindow.document.getElementById('diagram'); - // eslint-disable-next-line - const png = await mountingPoint.getElementsByClassName('frame')[0].parentElement.__vue__.toBlob(); - this.copyPngToClipboard(png); - trackEvent('ui', 'copyPng'); - } - - async copyPngClickHandlerBySafari3(e) { - console.log(e); - const mountingPoint = this.frame.contentWindow.document.getElementById('diagram'); - // eslint-disable-next-line + async copyImageClickHandler(e) { + if(!navigator.clipboard || !navigator.clipboard.write){ + this.showCopyErrorNotice(); + trackEvent('ui', 'copyImageFailed1'); + return; + } navigator.clipboard.write([ new ClipboardItem({ "image/png": new Promise(async resolve => { - const png = await mountingPoint.getElementsByClassName('frame')[0].parentElement.__vue__.toBlob(); + const png = await this.getPngBlob(); resolve(png); }) }) ]).then( - r => console.log("success", r), - reason => console.log("failed", reason) + () => alertsService.add("PNG file was copied"), + err => { + this.showCopyErrorNotice(); + console.log(err); + trackEvent('ui', 'copyImageFailed2'); + } ); - trackEvent('ui', 'copyPng'); + trackEvent('ui', 'copyImage'); } - copyPngToClipboard(imageData) { - if (navigator.permissions && navigator.permissions.query) { - const status = navigator.permissions.query({name: 'clipboard_write'}); - console.log(status); - } - console.log(navigator.userAgent); - let isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); - console.log(isSafari); - isSafari = false; - if (isSafari) { - console.log("safari") - navigator.clipboard.write([ - new ClipboardItem({ - "image/png": new Promise(async (resolve, reject) => { - try { - resolve(new Blob([imageData], { type: "image/png" })); - } catch (err) { - reject(err); - } - }), - }), - ]).then(() => console.log("success") - ).catch((err) => - // Error - console.error("Error:", err) - ); - } else { - const clipboardItem = new ClipboardItem({'image/png': imageData}); - navigator.clipboard.write([clipboardItem]).then( - (value) => console.log("Copied to clipboard successfully!", value), - (reason) => console.error("Copied to clipboard failed!: ", reason) - ) - } + + showCopyErrorNotice() { + alertsService.add("Copy failed, please try on another browser or upgrade your browser!"); } shareClickHandler(e) { @@ -1085,24 +1049,10 @@ export default class ContentWrap extends Component { file_download PNG - -