diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/util/DragManager.ts | 16 | ||||
| -rw-r--r-- | src/client/views/DocumentDecorations.tsx | 23 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 26 | ||||
| -rw-r--r-- | src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 3 | ||||
| -rw-r--r-- | src/client/views/nodes/WebBoxRenderer.js | 113 |
5 files changed, 104 insertions, 77 deletions
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index f928a1bf9..6e4de252d 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -8,6 +8,7 @@ import { ScriptCast, StrCast } from '../../fields/Types'; import { emptyFunction, Utils } from '../../Utils'; import { Docs, DocUtils } from '../documents/Documents'; import * as globalCssVariables from '../views/global/globalCssVariables.scss'; +import { CollectionFreeFormDocumentView } from '../views/nodes/CollectionFreeFormDocumentView'; import { DocumentView } from '../views/nodes/DocumentView'; import { ScriptingGlobals } from './ScriptingGlobals'; import { SelectionManager } from './SelectionManager'; @@ -360,11 +361,18 @@ export namespace DragManager { const docsToDrag = dragData instanceof DocumentDragData ? dragData.draggedDocuments : dragData instanceof AnchorAnnoDragData ? [dragData.dragDocument] : []; const dragElements = eles.map(ele => { // bcz: very hacky -- if dragged element is a freeForm view with a rotation, then extract the rotation in order to apply it to the dragged element - let useDim = false; // if doc is rotated by freeformview, then the dragged elements width and height won't reflect the unrotated dimensions, so we need to rely on the element knowing its own width/height. \ + // bcz: used to be false, but that made dragging collection w/ native dim's not work... + let useDim = true; // if doc is rotated by freeformview, then the dragged elements width and height won't reflect the unrotated dimensions, so we need to rely on the element knowing its own width/height. \ // if the parent isn't a freeform view, then the element's width and height are presumed to match the acutal doc's dimensions (eg, dragging from import sidebar menu) - if (ele?.parentElement?.parentElement?.parentElement?.className === 'collectionFreeFormDocumentView-container') { - ele = ele.parentElement.parentElement.parentElement; - rot.push(Number(ele.style.transform.replace(/.*rotate\(([-0-9.e]*)deg\).*/, '$1') || 0)); + let rotation: number | undefined; + for (let parEle: HTMLElement | null | undefined = ele.parentElement; parEle; parEle = parEle?.parentElement) { + if (parEle.className === CollectionFreeFormDocumentView.CollectionFreeFormDocViewClassName) { + rotation = (rotation ?? 0) + Number(parEle.style.transform.replace(/.*rotate\(([-0-9.e]*)deg\).*/, '$1') || 0); + } + parEle = parEle.parentElement; + } + if (rotation !== undefined) { + rot.push(rotation); } else { useDim = true; rot.push(0); diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 77554bd51..6663c5ee8 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -1,7 +1,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@material-ui/core'; import { IconButton } from 'browndash-components'; -import { action, computed, observable, reaction, runInAction } from 'mobx'; +import { action, computed, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import { FaUndo } from 'react-icons/fa'; import { DateField } from '../../fields/DateField'; @@ -65,7 +65,17 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P super(props); DocumentDecorations.Instance = this; document.addEventListener('pointermove', // show decorations whenever pointer moves outside of selection bounds. - action(e => (this._showNothing = !(this.Bounds.x !== Number.MAX_VALUE && (this.Bounds.x > e.clientX + this._resizeBorderWidth / 2 || this.Bounds.r < e.clientX - this._resizeBorderWidth / 2 || this.Bounds.y > e.clientY + this._resizeBorderWidth / 2 || this.Bounds.b < e.clientY - this._resizeBorderWidth / 2))))); // prettier-ignore + action(e => { + const center = {x: (this.Bounds.x+this.Bounds.r)/2, y: (this.Bounds.y+this.Bounds.b)/2}; + const {x,y} = Utils.rotPt(e.clientX - center.x, + e.clientY - center.y, + -NumCast(SelectionManager.Docs().lastElement()?.rotation)/180*Math.PI); + (this._showNothing = !(this.Bounds.x !== Number.MAX_VALUE && // + (this.Bounds.x > center.x+x + this._resizeBorderWidth / 2 || + this.Bounds.r < center.x+x - this._resizeBorderWidth / 2 || + this.Bounds.y > center.y+y + this._resizeBorderWidth / 2 || + this.Bounds.b < center.y+y - this._resizeBorderWidth / 2))); + })); // prettier-ignore } @computed get ClippedBounds() { @@ -524,7 +534,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P (doc.layout_reflowVertical && (opts.dragHdl === 'bottom' || opts.dragHdl === 'top' || opts.ctrlKey)); // eg rtf, web, pdf if (nwidth && nheight && !modifyNativeDim) { // eg., dragging right resizer on PDF -- enforce native dimensions because not expliclty overridden with ctrl or bottom resize drag - scale.x === 1 ? (scale.x = scale.y) : (scale.x = scale.x); + scale.x === 1 ? (scale.x = scale.y) : (scale.y = scale.x); } if (['right', 'left'].includes(opts.dragHdl) && modifyNativeDim && Doc.NativeWidth(doc)) { @@ -688,7 +698,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P const bounds = this.ClippedBounds; const useLock = bounds.r - bounds.x > 135 && seldocview.CollectionFreeFormDocumentView; const useRotation = !hideResizers && seldocview.rootDoc.type !== DocumentType.EQUATION && seldocview.CollectionFreeFormDocumentView; // when do we want an object to not rotate? - const rotation = SelectionManager.Views().length == 1 ? NumCast(seldocview.rootDoc._rotation) : 0; + const rotation = SelectionManager.Views().length == 1 ? seldocview.docViewPath.reduce((rot, view) => rot + NumCast(view.rootDoc._rotation), 0) : 0; // Radius constants const useRounding = seldocview.ComponentView instanceof ImageBox || seldocview.ComponentView instanceof FormattedTextBox || seldocview.ComponentView instanceof CollectionFreeFormView; @@ -748,6 +758,8 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P )} </div> ); + const centery = hideTitle ? 0 : this._titleHeight; + const transformOrigin = `${50}% calc(50% + ${centery / 2}px)`; const freeformDoc = SelectionManager.Views().some(v => v.CollectionFreeFormDocumentView); return ( <div className="documentDecorations" style={{ display: this._showNothing && !freeformDoc ? 'none' : undefined }}> @@ -758,9 +770,11 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P height: bounds.b - bounds.y + this._resizeBorderWidth + 'px', left: bounds.x - this._resizeBorderWidth / 2, top: bounds.y - this._resizeBorderWidth / 2, + transformOrigin, background: SnappingManager.GetShiftKey() ? undefined : 'yellow', pointerEvents: SnappingManager.GetShiftKey() || DocumentView.Interacting ? 'none' : 'all', display: SelectionManager.Views().length <= 1 || hideDecorations ? 'none' : undefined, + transform: `rotate(${rotation}deg)`, }} onPointerDown={this.onBackgroundDown} /> @@ -770,6 +784,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P className={`documentDecorations-container ${this._showNothing ? 'showNothing' : ''}`} style={{ transform: `translate(${bounds.x - this._resizeBorderWidth / 2}px, ${bounds.y - this._resizeBorderWidth / 2 - this._titleHeight}px) rotate(${rotation}deg)`, + transformOrigin, width: bounds.r - bounds.x + this._resizeBorderWidth + 'px', height: bounds.b - bounds.y + this._resizeBorderWidth + (this._showNothing ? 0 : this._titleHeight) + 'px', }}> diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 45af1064a..75e27aa43 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -341,16 +341,17 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection for (let i = 0; i < docDragData.droppedDocuments.length; i++) { const d = docDragData.droppedDocuments[i]; const layoutDoc = Doc.Layout(d); + const delta = Utils.rotPt(x - dropPos[0], y - dropPos[1], -NumCast(this.rootDoc.rotation) * (Math.PI / 180)); if (this.Document._currentFrame !== undefined) { CollectionFreeFormDocumentView.setupKeyframes([d], NumCast(this.Document._currentFrame), false); const pvals = CollectionFreeFormDocumentView.getValues(d, NumCast(d.activeFrame, 1000)); // get filled in values (uses defaults when not value is specified) for position const vals = CollectionFreeFormDocumentView.getValues(d, NumCast(d.activeFrame, 1000), false); // get non-default values for everything else - vals.x = x + NumCast(pvals.x) - dropPos[0]; - vals.y = y + NumCast(pvals.y) - dropPos[1]; + vals.x = NumCast(pvals.x) + delta.x; + vals.y = NumCast(pvals.y) + delta.y; CollectionFreeFormDocumentView.setValues(NumCast(this.Document._currentFrame), d, vals); } else { - d.x = x + NumCast(d.x) - dropPos[0]; - d.y = y + NumCast(d.y) - dropPos[1]; + d.x = NumCast(d.x) + delta.x; + d.y = NumCast(d.y) + delta.y; } d._layout_modificationDate = new DateField(); const nd = [Doc.NativeWidth(layoutDoc), Doc.NativeHeight(layoutDoc)]; @@ -730,7 +731,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection const shiftKey = e.shiftKey && !e.ctrlKey; PresBox.Instance?.pauseAutoPres(); this.props.DocumentView?.().clearViewTransition(); - const [dx, dy] = this.screenToLocalXf.transformDirection(e.clientX - this._lastX, e.clientY - this._lastY); + const [dxi, dyi] = this.screenToLocalXf.transformDirection(e.clientX - this._lastX, e.clientY - this._lastY); + const { x: dx, y: dy } = Utils.rotPt(dxi, dyi, -NumCast(this.rootDoc.rotation) * (Math.PI / 180)); this.setPan(NumCast(this.Document[this.panXFieldKey]) - (ctrlKey ? 0 : dx), NumCast(this.Document[this.panYFieldKey]) - (shiftKey ? 0 : dy), 0, true); this._lastX = e.clientX; this._lastY = e.clientY; @@ -1009,11 +1011,11 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection yrange: { min: this.props.originTopLeft ? 0 : Number.MAX_VALUE, max: -Number.MAX_VALUE }, } ); - - const panelWidMax = (this.props.PanelWidth() / this.zoomScaling()) * (this.props.originTopLeft ? 2 / this.nativeDimScaling : 1); - const panelWidMin = (this.props.PanelWidth() / this.zoomScaling()) * (this.props.originTopLeft ? 0 : 1); - const panelHgtMax = (this.props.PanelHeight() / this.zoomScaling()) * (this.props.originTopLeft ? 2 / this.nativeDimScaling : 1); - const panelHgtMin = (this.props.PanelHeight() / this.zoomScaling()) * (this.props.originTopLeft ? 0 : 1); + const scaling = this.zoomScaling() * (this.props.NativeDimScaling?.() || 1); + const panelWidMax = (this.props.PanelWidth() / scaling) * (this.props.originTopLeft ? 2 / this.nativeDimScaling : 1); + const panelWidMin = (this.props.PanelWidth() / scaling) * (this.props.originTopLeft ? 0 : 1); + const panelHgtMax = (this.props.PanelHeight() / scaling) * (this.props.originTopLeft ? 2 / this.nativeDimScaling : 1); + const panelHgtMin = (this.props.PanelHeight() / scaling) * (this.props.originTopLeft ? 0 : 1); if (ranges.xrange.min >= panX + panelWidMax / 2) panX = ranges.xrange.max + (this.props.originTopLeft ? 0 : panelWidMax / 2); else if (ranges.xrange.max <= panX - panelWidMin / 2) panX = ranges.xrange.min - (this.props.originTopLeft ? panelWidMax / 2 : panelWidMin / 2); if (ranges.yrange.min >= panY + panelHgtMax / 2) panY = ranges.yrange.max + (this.props.originTopLeft ? 0 : panelHgtMax / 2); @@ -1537,8 +1539,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection '', (iconFile, nativeWidth, nativeHeight) => { this.dataDoc.icon = new ImageField(iconFile); - this.dataDoc['icon_nativeWidth'] = nativeWidth; - this.dataDoc['icon_nativeHeight'] = nativeHeight; + this.dataDoc.icon_nativeWidth = nativeWidth; + this.dataDoc.icon_nativeHeight = nativeHeight; } ); diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 582a5518a..5fbe5d0e3 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -239,12 +239,13 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF const isGroup = this.rootDoc._isGroup && (!this.rootDoc.backgroundColor || this.rootDoc.backgroundColor === 'transparent'); return isGroup ? (this.props.isDocumentActive?.() ? 'group' : this.props.isGroupActive?.() ? 'child' : 'inactive') : this.props.isGroupActive?.() ? 'child' : undefined; }; + public static CollectionFreeFormDocViewClassName = 'collectionFreeFormDocumentView-container'; render() { TraceMobx(); const passOnProps = OmitKeys(this.props, Object.keys(this.props).filter(key => key.startsWith('w_'))).omit; // prettier-ignore return ( <div - className="collectionFreeFormDocumentView-container" + className={CollectionFreeFormDocumentView.CollectionFreeFormDocViewClassName} style={{ width: this.props.PanelWidth(), height: this.props.PanelHeight(), diff --git a/src/client/views/nodes/WebBoxRenderer.js b/src/client/views/nodes/WebBoxRenderer.js index 425ef3e54..914adb404 100644 --- a/src/client/views/nodes/WebBoxRenderer.js +++ b/src/client/views/nodes/WebBoxRenderer.js @@ -2,7 +2,7 @@ * * @param {StyleSheetList} styleSheets */ -var ForeignHtmlRenderer = function (styleSheets) { +const ForeignHtmlRenderer = function (styleSheets) { const self = this; /** @@ -10,7 +10,7 @@ var ForeignHtmlRenderer = function (styleSheets) { * @param {String} binStr */ const binaryStringToBase64 = function (binStr) { - return new Promise(function (resolve) { + return new Promise(resolve => { const reader = new FileReader(); reader.readAsDataURL(binStr); reader.onloadend = function () { @@ -31,17 +31,17 @@ var ForeignHtmlRenderer = function (styleSheets) { * @returns {Promise} */ const getResourceAsBase64 = function (webUrl, inurl) { - return new Promise(function (resolve, reject) { + return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); - //const url = inurl.startsWith("/") && !inurl.startsWith("//") ? webUrl + inurl : inurl; - //const url = CorsProxy(inurl.startsWith("/") && !inurl.startsWith("//") ? webUrl + inurl : inurl);// inurl.startsWith("http") ? CorsProxy(inurl) : inurl; - var url = inurl; + // const url = inurl.startsWith("/") && !inurl.startsWith("//") ? webUrl + inurl : inurl; + // const url = CorsProxy(inurl.startsWith("/") && !inurl.startsWith("//") ? webUrl + inurl : inurl);// inurl.startsWith("http") ? CorsProxy(inurl) : inurl; + let url = inurl; if (inurl.startsWith('/static')) { url = new URL(webUrl).origin + inurl; } else if (inurl.startsWith('/') && !inurl.startsWith('//')) { url = CorsProxy(new URL(webUrl).origin + inurl); } else if (!inurl.startsWith('http') && !inurl.startsWith('//')) { - url = CorsProxy(webUrl + '/' + inurl); + url = CorsProxy(`${webUrl}/${inurl}`); } else if (inurl.startsWith('https') && !inurl.startsWith(window.location.origin)) { url = CorsProxy(inurl); } @@ -57,7 +57,7 @@ var ForeignHtmlRenderer = function (styleSheets) { resourceBase64: resBase64, }); } else if (xhr.readyState === XMLHttpRequest.DONE) { - console.log("COULDN'T FIND: " + (inurl.startsWith('/') ? webUrl + inurl : inurl)); + console.log(`COULDN'T FIND: ${inurl.startsWith('/') ? webUrl + inurl : inurl}`); resolve({ resourceUrl: '', resourceBase64: inurl, @@ -76,7 +76,7 @@ var ForeignHtmlRenderer = function (styleSheets) { */ const getMultipleResourcesAsBase64 = function (webUrl, urls) { const promises = []; - for (let i = 0; i < urls.length; i++) { + for (let i = 0; i < urls.length; i += 1) { promises.push(getResourceAsBase64(webUrl, urls[i])); } return Promise.all(promises); @@ -98,7 +98,7 @@ var ForeignHtmlRenderer = function (styleSheets) { } let val = ''; - for (let i = idx + prefixToken.length; i < str.length; i++) { + for (let i = idx + prefixToken.length; i < str.length; i += 1) { if (suffixTokens.indexOf(str[i]) !== -1) { break; } @@ -114,6 +114,15 @@ var ForeignHtmlRenderer = function (styleSheets) { /** * + * @param {String} str + * @returns {String} + */ + const removeQuotes = function (str) { + return str.replace(/["']/g, ''); + }; + + /** + * * @param {String} cssRuleStr * @returns {String[]} */ @@ -127,13 +136,12 @@ var ForeignHtmlRenderer = function (styleSheets) { break; } searchStartIndex = url.foundAtIndex + url.value.length + 1; - if (mustEndWithQuote && url.value[url.value.length - 1] !== '"') continue; - const unquoted = removeQuotes(url.value); - if (!unquoted /* || (!unquoted.startsWith('http')&& !unquoted.startsWith("/") )*/ || unquoted === 'http://' || unquoted === 'https://') { - continue; + if (!mustEndWithQuote || url.value[url.value.length - 1] === '"') { + const unquoted = removeQuotes(url.value); + if (unquoted /* || (!unquoted.startsWith('http')&& !unquoted.startsWith("/") ) */ && unquoted !== 'http://' && unquoted !== 'https://') { + if (unquoted) urlsFound.push(unquoted); + } } - - unquoted && urlsFound.push(unquoted); } return urlsFound; @@ -151,15 +159,6 @@ var ForeignHtmlRenderer = function (styleSheets) { return getUrlsFromCssString(html, 'source=', [' ', '>', '\t'], true); }; - /** - * - * @param {String} str - * @returns {String} - */ - const removeQuotes = function (str) { - return str.replace(/["']/g, ''); - }; - const escapeRegExp = function (string) { return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string }; @@ -172,8 +171,8 @@ var ForeignHtmlRenderer = function (styleSheets) { * * @returns {Promise<String>} */ - const buildSvgDataUri = async function (webUrl, contentHtml, width, height, scroll, xoff) { - return new Promise(async function (resolve, reject) { + const buildSvgDataUri = async function (webUrl, inputContentHtml, width, height, scroll, xoff) { + return new Promise(async (resolve, reject) => { /* !! The problems !! * 1. CORS (not really an issue, expect perhaps for images, as this is a general security consideration to begin with) * 2. Platform won't wait for external assets to load (fonts, images, etc.) @@ -181,17 +180,19 @@ var ForeignHtmlRenderer = function (styleSheets) { // copy styles let cssStyles = ''; - let urlsFoundInCss = []; + const urlsFoundInCss = []; - for (let i = 0; i < styleSheets.length; i++) { + for (let i = 0; i < styleSheets.length; i += 1) { try { const rules = styleSheets[i].cssRules; - for (let j = 0; j < rules.length; j++) { + for (let j = 0; j < rules.length; j += 1) { const cssRuleStr = rules[j].cssText; urlsFoundInCss.push(...getUrlsFromCssString(cssRuleStr)); cssStyles += cssRuleStr; } - } catch (e) {} + } catch (e) { + /* empty */ + } } // const fetchedResourcesFromStylesheets = await getMultipleResourcesAsBase64(webUrl, urlsFoundInCss); @@ -202,15 +203,15 @@ var ForeignHtmlRenderer = function (styleSheets) { // } // } - contentHtml = contentHtml + let contentHtml = inputContentHtml .replace(/<source[^>]*>/g, '') // <picture> tags have a <source> which has a srcset field of image refs. instead of converting each, just use the default <img> of the picture .replace(/noscript/g, 'div') .replace(/<div class="mediaset"><\/div>/g, '') // when scripting isn't available (ie, rendering web pages here), <noscript> tags should become <div>'s. But for Brown CS, there's a layout problem if you leave the empty <mediaset> tag .replace(/<link[^>]*>/g, '') // don't need to keep any linked style sheets because we've already processed all style sheets above .replace(/srcset="([^ "]*)[^"]*"/g, 'src="$1"'); // instead of converting each item in the srcset to a data url, just convert the first one and use that - let urlsFoundInHtml = getImageUrlsFromFromHtml(contentHtml).filter(url => !url.startsWith('data:')); + const urlsFoundInHtml = getImageUrlsFromFromHtml(contentHtml).filter(url => !url.startsWith('data:')); const fetchedResources = webUrl ? await getMultipleResourcesAsBase64(webUrl, urlsFoundInHtml) : []; - for (let i = 0; i < fetchedResources.length; i++) { + for (let i = 0; i < fetchedResources.length; i += 1) { const r = fetchedResources[i]; if (r.resourceUrl) { contentHtml = contentHtml.replace(new RegExp(escapeRegExp(r.resourceUrl), 'g'), r.resourceBase64); @@ -230,7 +231,7 @@ var ForeignHtmlRenderer = function (styleSheets) { // contentRootElem.style.transform = "scale(0.08)" contentRootElem.innerHTML = styleElemString + contentHtml; contentRootElem.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml'); - //document.body.appendChild(contentRootElem); + // document.body.appendChild(contentRootElem); const contentRootElemString = new XMLSerializer().serializeToString(contentRootElem); @@ -256,13 +257,13 @@ var ForeignHtmlRenderer = function (styleSheets) { * @return {Promise<Image>} */ this.renderToImage = async function (webUrl, html, width, height, scroll, xoff) { - return new Promise(async function (resolve, reject) { + return new Promise(async (resolve, reject) => { const img = new Image(); - console.log('BUILDING SVG for:' + webUrl); + console.log(`BUILDING SVG for: ${webUrl}`); img.src = await buildSvgDataUri(webUrl, html, width, height, scroll, xoff); img.onload = function () { - console.log('IMAGE SVG created:' + webUrl); + console.log(`IMAGE SVG created: ${webUrl}`); resolve(img); }; }); @@ -276,7 +277,7 @@ var ForeignHtmlRenderer = function (styleSheets) { * @return {Promise<Image>} */ this.renderToCanvas = async function (webUrl, html, width, height, scroll, xoff, oversample) { - return new Promise(async function (resolve, reject) { + return new Promise(async (resolve, reject) => { const img = await self.renderToImage(webUrl, html, width, height, scroll, xoff); const canvas = document.createElement('canvas'); @@ -298,7 +299,7 @@ var ForeignHtmlRenderer = function (styleSheets) { * @return {Promise<String>} */ this.renderToBase64Png = async function (webUrl, html, width, height, scroll, xoff, oversample) { - return new Promise(async function (resolve, reject) { + return new Promise(async (resolve, reject) => { const canvas = await self.renderToCanvas(webUrl, html, width, height, scroll, xoff, oversample); resolve(canvas.toDataURL('image/png')); }); @@ -320,8 +321,8 @@ export function CreateImage(webUrl, styleSheets, html, width, height, scroll, xo ); } -var ClipboardUtils = new (function () { - var permissions = { +const ClipboardUtils = new (function () { + const permissions = { 'image/bmp': true, 'image/gif': true, 'image/png': true, @@ -330,8 +331,8 @@ var ClipboardUtils = new (function () { }; function getType(types) { - for (var j = 0; j < types.length; ++j) { - var type = types[j]; + for (let j = 0; j < types.length; j += 1) { + const type = types[j]; if (permissions[type]) { return type; } @@ -339,10 +340,10 @@ var ClipboardUtils = new (function () { return null; } function getItem(items) { - for (var i = 0; i < items.length; ++i) { - var item = items[i]; + for (let i = 0; i < items.length; i += 1) { + const item = items[i]; if (item) { - var type = getType(item.types); + const type = getType(item.types); if (type) { return item.getType(type); } @@ -352,7 +353,7 @@ var ClipboardUtils = new (function () { } function loadFile(file, callback) { if (window.FileReader) { - var reader = new FileReader(); + const reader = new FileReader(); reader.onload = function () { callback(reader.result, null); }; @@ -366,23 +367,23 @@ var ClipboardUtils = new (function () { } this.readImage = function (callback) { if (navigator.clipboard) { - var promise = navigator.clipboard.read(); + const promise = navigator.clipboard.read(); promise - .then(function (items) { - var promise = getItem(items); - if (promise == null) { + .then(items => { + const promise2 = getItem(items); + if (promise2 == null) { callback(null, null); return; } - promise - .then(function (result) { + promise2 + .then(result => { loadFile(result, callback); }) - .catch(function (error) { + .catch(error => { callback(null, 'Reading clipboard error.'); }); }) - .catch(function (error) { + .catch(error => { callback(null, 'Reading clipboard error.'); }); } else { |