From 9173c84157ff915edcd89ddc05d7ddbd53856b9e Mon Sep 17 00:00:00 2001 From: MaxymGorn Date: Sat, 3 Aug 2024 19:14:06 +0300 Subject: [PATCH] prettier js files --- src/Cropper.Blazor/Client/wwwroot/helper.js | 103 ++-- .../Client/wwwroot/jsObjectModule.js | 44 +- .../wwwroot/overrideCropperJsInteropModule.js | 23 +- .../wwwroot/resizeWindowEventListener.js | 42 +- .../Client/wwwroot/service-worker.js | 3 +- .../wwwroot/service-worker.published.js | 120 ++-- .../Client/wwwroot/sw-registrator.js | 53 +- .../wwwroot/cropperJsInterop.js | 553 +++++++++--------- 8 files changed, 478 insertions(+), 463 deletions(-) diff --git a/src/Cropper.Blazor/Client/wwwroot/helper.js b/src/Cropper.Blazor/Client/wwwroot/helper.js index 1610cffd..c0d47190 100644 --- a/src/Cropper.Blazor/Client/wwwroot/helper.js +++ b/src/Cropper.Blazor/Client/wwwroot/helper.js @@ -1,53 +1,62 @@ window.downloadFromUrl = (options) => { - const anchorElement = document.createElement('a'); - anchorElement.href = options.url; - anchorElement.download = options.fileName ?? ''; - anchorElement.click(); - anchorElement.remove(); + const anchorElement = document.createElement("a"); + anchorElement.href = options.url; + anchorElement.download = options.fileName ?? ""; + anchorElement.click(); + anchorElement.remove(); }; window.getPolygonImage = (sourceCanvas, path) => { - const canvas = document.createElement('canvas'); - const context = canvas.getContext('2d'); - const width = sourceCanvas.width, - height = sourceCanvas.height; - - canvas.width = width; - canvas.height = height; - context.imageSmoothingEnabled = true; - - context.beginPath(); - context.moveTo(path[0] * width / 100, path[1] * height / 100); - context.fillStyle = "rgba(255, 255, 255, 0)"; - - for (let i = 2; i < path.length; i += 2) { - context.lineTo(path[i] * width / 100, path[i + 1] * height / 100); - } - - context.closePath(); - context.clip(); - context.fill(); - context.globalCompositeOperation = 'lighter'; - context.drawImage(sourceCanvas, 0, 0, width, height); - - return canvas.toDataURL("image/png", 1); -} + const canvas = document.createElement("canvas"); + const context = canvas.getContext("2d"); + const width = sourceCanvas.width, + height = sourceCanvas.height; + + canvas.width = width; + canvas.height = height; + context.imageSmoothingEnabled = true; + + context.beginPath(); + context.moveTo((path[0] * width) / 100, (path[1] * height) / 100); + context.fillStyle = "rgba(255, 255, 255, 0)"; + + for (let i = 2; i < path.length; i += 2) { + context.lineTo((path[i] * width) / 100, (path[i + 1] * height) / 100); + } + + context.closePath(); + context.clip(); + context.fill(); + context.globalCompositeOperation = "lighter"; + context.drawImage(sourceCanvas, 0, 0, width, height); + + return canvas.toDataURL("image/png", 1); +}; window.getEllipseImage = (sourceCanvas) => { - const createdCanvas = document.createElement('canvas'); - const contextCanvas = createdCanvas.getContext('2d'); - const widthCanvas = sourceCanvas.width, - heightCanvas = sourceCanvas.height; - - createdCanvas.width = widthCanvas; - createdCanvas.height = heightCanvas; - contextCanvas.imageSmoothingEnabled = true; - - contextCanvas.drawImage(sourceCanvas, 0, 0, widthCanvas, heightCanvas); - contextCanvas.globalCompositeOperation = 'destination-in'; - contextCanvas.beginPath(); - contextCanvas.ellipse(widthCanvas / 2, heightCanvas / 2, widthCanvas / 2, heightCanvas / 2, 0 * Math.PI, 0, 180 * Math.PI, true); - contextCanvas.fill(); - - return createdCanvas.toDataURL("image/png", 1); -} + const createdCanvas = document.createElement("canvas"); + const contextCanvas = createdCanvas.getContext("2d"); + const widthCanvas = sourceCanvas.width, + heightCanvas = sourceCanvas.height; + + createdCanvas.width = widthCanvas; + createdCanvas.height = heightCanvas; + contextCanvas.imageSmoothingEnabled = true; + + contextCanvas.drawImage(sourceCanvas, 0, 0, widthCanvas, heightCanvas); + contextCanvas.globalCompositeOperation = "destination-in"; + contextCanvas.beginPath(); + contextCanvas.ellipse( + widthCanvas / 2, + heightCanvas / 2, + widthCanvas / 2, + heightCanvas / 2, + 0 * Math.PI, + 0, + 180 * Math.PI, + true, + ); + contextCanvas.fill(); + + return createdCanvas.toDataURL("image/png", 1); +}; diff --git a/src/Cropper.Blazor/Client/wwwroot/jsObjectModule.js b/src/Cropper.Blazor/Client/wwwroot/jsObjectModule.js index 34e44839..7c7a7b84 100644 --- a/src/Cropper.Blazor/Client/wwwroot/jsObjectModule.js +++ b/src/Cropper.Blazor/Client/wwwroot/jsObjectModule.js @@ -1,33 +1,33 @@ class JsObject { - getPropertyList(path) { - let res = path.replace('[', '.').replace(']', '').split('.'); + getPropertyList(path) { + let res = path.replace("[", ".").replace("]", "").split("."); - if (res[0] === "") { // if we pass "[0].id" we want to return [0,'id'] - res.shift(); - } - - return res; + if (res[0] === "") { + // if we pass "[0].id" we want to return [0,'id'] + res.shift(); } - getInstanceProperty(instance, propertyPath) { - - if (propertyPath === '') { - return instance; - } + return res; + } - let currentProperty = instance; - let splitProperty = this.getPropertyList(propertyPath); + getInstanceProperty(instance, propertyPath) { + if (propertyPath === "") { + return instance; + } - for (let i = 0; i < splitProperty.length; i++) { - if (splitProperty[i] in currentProperty) { - currentProperty = currentProperty[splitProperty[i]]; - } else { - return null; - } - } + let currentProperty = instance; + let splitProperty = this.getPropertyList(propertyPath); - return currentProperty; + for (let i = 0; i < splitProperty.length; i++) { + if (splitProperty[i] in currentProperty) { + currentProperty = currentProperty[splitProperty[i]]; + } else { + return null; + } } + + return currentProperty; + } } window.jsObject = new JsObject(); diff --git a/src/Cropper.Blazor/Client/wwwroot/overrideCropperJsInteropModule.js b/src/Cropper.Blazor/Client/wwwroot/overrideCropperJsInteropModule.js index d63035db..904bac5c 100644 --- a/src/Cropper.Blazor/Client/wwwroot/overrideCropperJsInteropModule.js +++ b/src/Cropper.Blazor/Client/wwwroot/overrideCropperJsInteropModule.js @@ -1,15 +1,16 @@ window.overrideOnZoomCropperEvent = (minZoomRatio, maxZoomRatio) => { - window.cropper.onZoom = function (imageObject, event, correlationId) { - const jSEventData = this.getJSEventData(event, correlationId); + window.cropper.onZoom = function (imageObject, event, correlationId) { + const jSEventData = this.getJSEventData(event, correlationId); - const isApplyPreventZoomMinRatio = (minZoomRatio != null) && (minZoomRatio > event.detail.ratio); - const isApplyPreventZoomMaxRatio = (maxZoomRatio != null) && (event.detail.ratio > maxZoomRatio); + const isApplyPreventZoomMinRatio = + minZoomRatio != null && minZoomRatio > event.detail.ratio; + const isApplyPreventZoomMaxRatio = + maxZoomRatio != null && event.detail.ratio > maxZoomRatio; - if (isApplyPreventZoomMinRatio || isApplyPreventZoomMaxRatio) { - event.preventDefault(); - } - else { - imageObject.invokeMethodAsync('CropperIsZoomed', jSEventData); - } - }; + if (isApplyPreventZoomMinRatio || isApplyPreventZoomMaxRatio) { + event.preventDefault(); + } else { + imageObject.invokeMethodAsync("CropperIsZoomed", jSEventData); + } + }; }; diff --git a/src/Cropper.Blazor/Client/wwwroot/resizeWindowEventListener.js b/src/Cropper.Blazor/Client/wwwroot/resizeWindowEventListener.js index b81ddcd1..80dee7ea 100644 --- a/src/Cropper.Blazor/Client/wwwroot/resizeWindowEventListener.js +++ b/src/Cropper.Blazor/Client/wwwroot/resizeWindowEventListener.js @@ -1,19 +1,23 @@ -let timer -window.addEventListener('resize', () => { - if (!Object.hasOwn(this, 'cropper') || cropper == null || cropper.cropperInstances == null) { - return; - } - let keys = Object.keys(cropper.cropperInstances); - clearTimeout(timer); - if (keys.length > 0) { - keys.forEach((key) => { - cropper.cropperInstances[key].disable(); - }); - timer = setTimeout(() => { - let keys = Object.keys(cropper.cropperInstances); - keys.forEach((key) => { - cropper.cropperInstances[key].enable(); - }); - }, 100); - } -}) \ No newline at end of file +let timer; +window.addEventListener("resize", () => { + if ( + !Object.hasOwn(this, "cropper") || + cropper == null || + cropper.cropperInstances == null + ) { + return; + } + let keys = Object.keys(cropper.cropperInstances); + clearTimeout(timer); + if (keys.length > 0) { + keys.forEach((key) => { + cropper.cropperInstances[key].disable(); + }); + timer = setTimeout(() => { + let keys = Object.keys(cropper.cropperInstances); + keys.forEach((key) => { + cropper.cropperInstances[key].enable(); + }); + }, 100); + } +}); diff --git a/src/Cropper.Blazor/Client/wwwroot/service-worker.js b/src/Cropper.Blazor/Client/wwwroot/service-worker.js index 4882765c..e9ddd26e 100644 --- a/src/Cropper.Blazor/Client/wwwroot/service-worker.js +++ b/src/Cropper.Blazor/Client/wwwroot/service-worker.js @@ -1,5 +1,4 @@ // In development, always fetch from the network and do not enable offline support. // This is because caching would make development more difficult (changes would not // be reflected on the first load after each change). -self.addEventListener('fetch', () => { -}); +self.addEventListener("fetch", () => {}); diff --git a/src/Cropper.Blazor/Client/wwwroot/service-worker.published.js b/src/Cropper.Blazor/Client/wwwroot/service-worker.published.js index 241dae9e..9a820df7 100644 --- a/src/Cropper.Blazor/Client/wwwroot/service-worker.published.js +++ b/src/Cropper.Blazor/Client/wwwroot/service-worker.published.js @@ -1,75 +1,89 @@ // Caution! Be sure you understand the caveats before publishing an application with // offline support. See https://aka.ms/blazor-offline-considerations -self.importScripts('./service-worker-assets.js'); -self.addEventListener('install', event => { - event.waitUntil( - Promise.all([ - onInstall(), - self.skipWaiting(), - ]) - ); +self.importScripts("./service-worker-assets.js"); +self.addEventListener("install", (event) => { + event.waitUntil(Promise.all([onInstall(), self.skipWaiting()])); }); -self.addEventListener('activate', event => { - event.waitUntil( - Promise.all( - [ - onActivate(), - self.clients.claim(), - self.skipWaiting(), - ] - ) - .catch( - (err) => { - event.skipWaiting(); - } - ) - ); +self.addEventListener("activate", (event) => { + event.waitUntil( + Promise.all([onActivate(), self.clients.claim(), self.skipWaiting()]).catch( + (err) => { + event.skipWaiting(); + }, + ), + ); }); -self.addEventListener('fetch', event => event.respondWith(onFetch(event))); +self.addEventListener("fetch", (event) => event.respondWith(onFetch(event))); -const cacheNamePrefix = 'offline-cache-'; +const cacheNamePrefix = "offline-cache-"; const cacheName = `${cacheNamePrefix}${self.assetsManifest.version}`; -const offlineAssetsInclude = [/\.dll$/, /\.pdb$/, /\.wasm/, /\.html/, /\.js$/, /\.json$/, /\.css$/, /\.woff$/, /\.png$/, /\.jpe?g$/, /\.gif$/, /\.ico$/, /\.blat$/, /\.dat$/]; +const offlineAssetsInclude = [ + /\.dll$/, + /\.pdb$/, + /\.wasm/, + /\.html/, + /\.js$/, + /\.json$/, + /\.css$/, + /\.woff$/, + /\.png$/, + /\.jpe?g$/, + /\.gif$/, + /\.ico$/, + /\.blat$/, + /\.dat$/, +]; const offlineAssetsExclude = [/^service-worker\.js$/]; async function onInstall(event) { - console.info('Service worker: Install'); + console.info("Service worker: Install"); - // Fetch and cache all matching items from the assets manifest - const assetsRequests = self.assetsManifest.assets - .filter(asset => offlineAssetsInclude.some(pattern => pattern.test(asset.url))) - .filter(asset => !offlineAssetsExclude.some(pattern => pattern.test(asset.url))) - .map(asset => new Request(asset.url, { integrity: asset.hash, cache: 'no-cache' })); + // Fetch and cache all matching items from the assets manifest + const assetsRequests = self.assetsManifest.assets + .filter((asset) => + offlineAssetsInclude.some((pattern) => pattern.test(asset.url)), + ) + .filter( + (asset) => + !offlineAssetsExclude.some((pattern) => pattern.test(asset.url)), + ) + .map( + (asset) => + new Request(asset.url, { integrity: asset.hash, cache: "no-cache" }), + ); - await caches.open(cacheName) - .then(cache => cache.addAll(assetsRequests)) - .then(() => { - return self.skipWaiting(); - }); + await caches + .open(cacheName) + .then((cache) => cache.addAll(assetsRequests)) + .then(() => { + return self.skipWaiting(); + }); } async function onActivate(event) { - console.info('Service worker: Activate'); + console.info("Service worker: Activate"); - // Delete unused caches - const cacheKeys = await caches.keys(); - await Promise.all(cacheKeys - .filter(key => key.startsWith(cacheNamePrefix) && key !== cacheName) - .map(key => caches.delete(key))); + // Delete unused caches + const cacheKeys = await caches.keys(); + await Promise.all( + cacheKeys + .filter((key) => key.startsWith(cacheNamePrefix) && key !== cacheName) + .map((key) => caches.delete(key)), + ); } async function onFetch(event) { - let cachedResponse = null; - if (event.request.method === 'GET') { - // For all navigation requests, try to serve index.html from cache - // If you need some URLs to be server-rendered, edit the following check to exclude those URLs - const shouldServeIndexHtml = event.request.mode === 'navigate'; + let cachedResponse = null; + if (event.request.method === "GET") { + // For all navigation requests, try to serve index.html from cache + // If you need some URLs to be server-rendered, edit the following check to exclude those URLs + const shouldServeIndexHtml = event.request.mode === "navigate"; - const request = shouldServeIndexHtml ? 'index.html' : event.request; - const cache = await caches.open(cacheName); - cachedResponse = await cache.match(request); - } + const request = shouldServeIndexHtml ? "index.html" : event.request; + const cache = await caches.open(cacheName); + cachedResponse = await cache.match(request); + } - return cachedResponse || fetch(event.request); + return cachedResponse || fetch(event.request); } diff --git a/src/Cropper.Blazor/Client/wwwroot/sw-registrator.js b/src/Cropper.Blazor/Client/wwwroot/sw-registrator.js index c4ec0c18..f4fefdb0 100644 --- a/src/Cropper.Blazor/Client/wwwroot/sw-registrator.js +++ b/src/Cropper.Blazor/Client/wwwroot/sw-registrator.js @@ -1,30 +1,33 @@ window.updateAvailable = new Promise((resolve, reject) => { - if (!('serviceWorker' in navigator)) { - const errorMessage = `This browser doesn't support service workers`; - console.error(errorMessage); - reject(errorMessage); - return; - } + if (!("serviceWorker" in navigator)) { + const errorMessage = `This browser doesn't support service workers`; + console.error(errorMessage); + reject(errorMessage); + return; + } - navigator.serviceWorker.register('/service-worker.min.js') - .then(registration => { - console.info(`Service worker registration successful (scope: ${registration.scope})`); + navigator.serviceWorker + .register("/service-worker.min.js") + .then((registration) => { + console.info( + `Service worker registration successful (scope: ${registration.scope})`, + ); - setInterval(() => { - registration.update(); - }, 60 * 1000); // 60000ms -> check each minute + setInterval(() => { + registration.update(); + }, 60 * 1000); // 60000ms -> check each minute - registration.onupdatefound = () => { - const installingServiceWorker = registration.installing; - installingServiceWorker.onstatechange = () => { - if (installingServiceWorker.state === 'installed') { - resolve(!!navigator.serviceWorker.controller); - } - } - }; - }) - .catch(error => { - console.error('Service worker registration failed with error:', error); - reject(error); - }); + registration.onupdatefound = () => { + const installingServiceWorker = registration.installing; + installingServiceWorker.onstatechange = () => { + if (installingServiceWorker.state === "installed") { + resolve(!!navigator.serviceWorker.controller); + } + }; + }; + }) + .catch((error) => { + console.error("Service worker registration failed with error:", error); + reject(error); + }); }); diff --git a/src/Cropper.Blazor/Cropper.Blazor/wwwroot/cropperJsInterop.js b/src/Cropper.Blazor/Cropper.Blazor/wwwroot/cropperJsInterop.js index 98c1f0be..16e6cbf2 100644 --- a/src/Cropper.Blazor/Cropper.Blazor/wwwroot/cropperJsInterop.js +++ b/src/Cropper.Blazor/Cropper.Blazor/wwwroot/cropperJsInterop.js @@ -1,287 +1,272 @@ class CropperDecorator { - - constructor() { - this.cropperInstances = {}; - } - - clear(cropperComponentId) { - return this.cropperInstances[cropperComponentId] - .clear(); - } - - crop(cropperComponentId) { - return this.cropperInstances[cropperComponentId] - .crop(); - } - - destroy(cropperComponentId) { - this.cropperInstances[cropperComponentId] - .destroy(); - delete this.cropperInstances[cropperComponentId]; - } - - disable(cropperComponentId) { - return this.cropperInstances[cropperComponentId] - .disable(); - } - - enable(cropperComponentId) { - return this.cropperInstances[cropperComponentId] - .enable(); - } - - getCanvasData(cropperComponentId) { - return this.cropperInstances[cropperComponentId] - .getCanvasData(); - } - - getContainerData(cropperComponentId) { - return this.cropperInstances[cropperComponentId] - .getContainerData(); - } - - getCropBoxData(cropperComponentId) { - return this.cropperInstances[cropperComponentId] - .getCropBoxData(); - } - - getCroppedCanvas(cropperComponentId, options) { - options.maxWidth ??= Infinity; - options.maxHeight ??= Infinity; - - return this.cropperInstances[cropperComponentId] - .getCroppedCanvas(options); - } - - getCroppedCanvasDataURL(cropperComponentId, options, type, encoderOptions) { - options.maxWidth ??= Infinity; - options.maxHeight ??= Infinity; - - return this.cropperInstances[cropperComponentId] - .getCroppedCanvas(options) - .toDataURL(type, encoderOptions); - } - - getData(cropperComponentId, rounded) { - return this.cropperInstances[cropperComponentId] - .getData(rounded); - } - - getImageData(cropperComponentId) { - return this.cropperInstances[cropperComponentId] - .getImageData(); - } - - move(cropperComponentId, offsetX, offsetY) { - return this.cropperInstances[cropperComponentId] - .move(offsetX, offsetY); - } - - moveTo(cropperComponentId, x, y) { - return this.cropperInstances[cropperComponentId] - .moveTo(x, y); - } - - replace(cropperComponentId, url, onlyColorChanged) { - return this.cropperInstances[cropperComponentId] - .replace(url, onlyColorChanged); - } - - reset(cropperComponentId) { - return this.cropperInstances[cropperComponentId] - .reset(); - } - - rotate(cropperComponentId, degree) { - return this.cropperInstances[cropperComponentId] - .rotate(degree); - } - - rotateTo(cropperComponentId, degree) { - return this.cropperInstances[cropperComponentId] - .rotateTo(degree); - } - - scale(cropperComponentId, scaleX, scaleY) { - return this.cropperInstances[cropperComponentId] - .scale(scaleX, scaleY); - } - - scaleX(cropperComponentId, scaleX) { - return this.cropperInstances[cropperComponentId] - .scaleX(scaleX); - } - - scaleY(cropperComponentId, scaleY) { - return this.cropperInstances[cropperComponentId] - .scaleY(scaleY); - } - - setAspectRatio(cropperComponentId, aspectRatio) { - return this.cropperInstances[cropperComponentId] - .setAspectRatio(aspectRatio); - } - - setCanvasData(cropperComponentId, data) { - return this.cropperInstances[cropperComponentId] - .setCanvasData(data); - } - - setCropBoxData(cropperComponentId, data) { - return this.cropperInstances[cropperComponentId] - .setCropBoxData(data); - } - - setData(cropperComponentId, data) { - return this.cropperInstances[cropperComponentId] - .setData(data); - } - - setDragMode(cropperComponentId, dragMode) { - return this.cropperInstances[cropperComponentId] - .setDragMode(dragMode); - } - - zoom(cropperComponentId, ratio) { - return this.cropperInstances[cropperComponentId] - .zoom(ratio); - } - - zoomTo(cropperComponentId, ratio, pivotX, pivotY) { - return this.cropperInstances[cropperComponentId] - .zoomTo(ratio, { pivotX, pivotY }); - } - - noConflict() { - return Cropper.noConflict(); - } - - setDefaults(options) { - return Cropper.setDefaults(options); - } - - async getImageUsingStreaming(imageStream) { - const arrayBuffer = await imageStream.arrayBuffer(); - const blob = new Blob([arrayBuffer]); - return URL.createObjectURL(blob); - } - - revokeObjectUrl(url) { - URL.revokeObjectURL(url); - } - - getJSEventData(instance, correlationId) { - return { - isTrusted: instance.isTrusted, - detail: this.getJSEventDataDetail(instance), - type: instance.type, - eventPhase: instance.eventPhase, - bubbles: instance.bubbles, - cancelable: instance.cancelable, - defaultPrevented: instance.defaultPrevented, - composed: instance.composed, - timeStamp: instance.timeStamp, - returnValue: instance.returnValue, - cancelBubble: instance.cancelBubble, - correlationId: correlationId - }; - } - - getJSEventDataDetail(instance) { - if (instance.type === "zoom") { - return { - oldRatio: instance.detail.oldRatio, - ratio: instance.detail.ratio, - originalEvent: instance.detail.originalEvent ? - DotNet.createJSObjectReference(instance.detail.originalEvent) : null - }; - } - else if (instance.type === "cropstart" || instance.type === "cropend" || instance.type === "cropmove") { - return { - action: instance.detail.action, - originalEvent: instance.detail.originalEvent ? - DotNet.createJSObjectReference(instance.detail.originalEvent) : null - }; - } - - return instance.detail; - } - - onReady(imageObject, event, correlationId) { - const jSEventData = this.getJSEventData(event, correlationId); - imageObject.invokeMethodAsync('IsReady', jSEventData); - } - - onCropStart(imageObject, event, correlationId) { - const jSEventData = this.getJSEventData(event, correlationId); - imageObject.invokeMethodAsync('CropperIsStarted', jSEventData); - } - - onCropMove(imageObject, event, correlationId) { - const jSEventData = this.getJSEventData(event, correlationId); - imageObject.invokeMethodAsync('CropperIsMoved', jSEventData); - } - - onCropEnd(imageObject, event, correlationId) { - const jSEventData = this.getJSEventData(event, correlationId); - imageObject.invokeMethodAsync('CropperIsEnded', jSEventData); - } - - onCrop(imageObject, event, correlationId) { - const jSEventData = this.getJSEventData(event, correlationId); - imageObject.invokeMethodAsync('CropperIsCroped', jSEventData); - } - - onZoom(imageObject, event, correlationId) { - const jSEventData = this.getJSEventData(event, correlationId); - imageObject.invokeMethodAsync('CropperIsZoomed', jSEventData); - } - - initCropper(cropperComponentId, image, optionsImage, imageObject) { - if (image == null) { - throw "Parameter 'image' must be is not null!"; - } - - if (optionsImage == null) { - throw "Parameter 'optionsImage' must be is not null!"; - } - - const options = {}; - const correlationId = optionsImage["correlationId"]; - - if (imageObject != null) { - const self = this; - - options['ready'] = function (event) { - self.onReady(imageObject, event, correlationId); - }; - options['cropstart'] = function (event) { - self.onCropStart(imageObject, event, correlationId); - }; - options['cropmove'] = function (event) { - self.onCropMove(imageObject, event, correlationId); - }; - options['cropend'] = function (event) { - self.onCropEnd(imageObject, event, correlationId); - }; - options['crop'] = function (event) { - self.onCrop(imageObject, event, correlationId); - }; - options['zoom'] = function (event) { - self.onZoom(imageObject, event, correlationId); - }; - } - - if (optionsImage != null) { - Object.entries(optionsImage)?.forEach(([key, value]) => { - options[key] = value; - }); - } - - const cropper = new Cropper(image, options); - - this.cropperInstances[cropperComponentId] = cropper; - } + constructor() { + this.cropperInstances = {}; + } + + clear(cropperComponentId) { + return this.cropperInstances[cropperComponentId].clear(); + } + + crop(cropperComponentId) { + return this.cropperInstances[cropperComponentId].crop(); + } + + destroy(cropperComponentId) { + this.cropperInstances[cropperComponentId].destroy(); + delete this.cropperInstances[cropperComponentId]; + } + + disable(cropperComponentId) { + return this.cropperInstances[cropperComponentId].disable(); + } + + enable(cropperComponentId) { + return this.cropperInstances[cropperComponentId].enable(); + } + + getCanvasData(cropperComponentId) { + return this.cropperInstances[cropperComponentId].getCanvasData(); + } + + getContainerData(cropperComponentId) { + return this.cropperInstances[cropperComponentId].getContainerData(); + } + + getCropBoxData(cropperComponentId) { + return this.cropperInstances[cropperComponentId].getCropBoxData(); + } + + getCroppedCanvas(cropperComponentId, options) { + options.maxWidth ??= Infinity; + options.maxHeight ??= Infinity; + + return this.cropperInstances[cropperComponentId].getCroppedCanvas(options); + } + + getCroppedCanvasDataURL(cropperComponentId, options, type, encoderOptions) { + options.maxWidth ??= Infinity; + options.maxHeight ??= Infinity; + + return this.cropperInstances[cropperComponentId] + .getCroppedCanvas(options) + .toDataURL(type, encoderOptions); + } + + getData(cropperComponentId, rounded) { + return this.cropperInstances[cropperComponentId].getData(rounded); + } + + getImageData(cropperComponentId) { + return this.cropperInstances[cropperComponentId].getImageData(); + } + + move(cropperComponentId, offsetX, offsetY) { + return this.cropperInstances[cropperComponentId].move(offsetX, offsetY); + } + + moveTo(cropperComponentId, x, y) { + return this.cropperInstances[cropperComponentId].moveTo(x, y); + } + + replace(cropperComponentId, url, onlyColorChanged) { + return this.cropperInstances[cropperComponentId].replace( + url, + onlyColorChanged, + ); + } + + reset(cropperComponentId) { + return this.cropperInstances[cropperComponentId].reset(); + } + + rotate(cropperComponentId, degree) { + return this.cropperInstances[cropperComponentId].rotate(degree); + } + + rotateTo(cropperComponentId, degree) { + return this.cropperInstances[cropperComponentId].rotateTo(degree); + } + + scale(cropperComponentId, scaleX, scaleY) { + return this.cropperInstances[cropperComponentId].scale(scaleX, scaleY); + } + + scaleX(cropperComponentId, scaleX) { + return this.cropperInstances[cropperComponentId].scaleX(scaleX); + } + + scaleY(cropperComponentId, scaleY) { + return this.cropperInstances[cropperComponentId].scaleY(scaleY); + } + + setAspectRatio(cropperComponentId, aspectRatio) { + return this.cropperInstances[cropperComponentId].setAspectRatio( + aspectRatio, + ); + } + + setCanvasData(cropperComponentId, data) { + return this.cropperInstances[cropperComponentId].setCanvasData(data); + } + + setCropBoxData(cropperComponentId, data) { + return this.cropperInstances[cropperComponentId].setCropBoxData(data); + } + + setData(cropperComponentId, data) { + return this.cropperInstances[cropperComponentId].setData(data); + } + + setDragMode(cropperComponentId, dragMode) { + return this.cropperInstances[cropperComponentId].setDragMode(dragMode); + } + + zoom(cropperComponentId, ratio) { + return this.cropperInstances[cropperComponentId].zoom(ratio); + } + + zoomTo(cropperComponentId, ratio, pivotX, pivotY) { + return this.cropperInstances[cropperComponentId].zoomTo(ratio, { + pivotX, + pivotY, + }); + } + + noConflict() { + return Cropper.noConflict(); + } + + setDefaults(options) { + return Cropper.setDefaults(options); + } + + async getImageUsingStreaming(imageStream) { + const arrayBuffer = await imageStream.arrayBuffer(); + const blob = new Blob([arrayBuffer]); + return URL.createObjectURL(blob); + } + + revokeObjectUrl(url) { + URL.revokeObjectURL(url); + } + + getJSEventData(instance, correlationId) { + return { + isTrusted: instance.isTrusted, + detail: this.getJSEventDataDetail(instance), + type: instance.type, + eventPhase: instance.eventPhase, + bubbles: instance.bubbles, + cancelable: instance.cancelable, + defaultPrevented: instance.defaultPrevented, + composed: instance.composed, + timeStamp: instance.timeStamp, + returnValue: instance.returnValue, + cancelBubble: instance.cancelBubble, + correlationId: correlationId, + }; + } + + getJSEventDataDetail(instance) { + if (instance.type === "zoom") { + return { + oldRatio: instance.detail.oldRatio, + ratio: instance.detail.ratio, + originalEvent: instance.detail.originalEvent + ? DotNet.createJSObjectReference(instance.detail.originalEvent) + : null, + }; + } else if ( + instance.type === "cropstart" || + instance.type === "cropend" || + instance.type === "cropmove" + ) { + return { + action: instance.detail.action, + originalEvent: instance.detail.originalEvent + ? DotNet.createJSObjectReference(instance.detail.originalEvent) + : null, + }; + } + + return instance.detail; + } + + onReady(imageObject, event, correlationId) { + const jSEventData = this.getJSEventData(event, correlationId); + imageObject.invokeMethodAsync("IsReady", jSEventData); + } + + onCropStart(imageObject, event, correlationId) { + const jSEventData = this.getJSEventData(event, correlationId); + imageObject.invokeMethodAsync("CropperIsStarted", jSEventData); + } + + onCropMove(imageObject, event, correlationId) { + const jSEventData = this.getJSEventData(event, correlationId); + imageObject.invokeMethodAsync("CropperIsMoved", jSEventData); + } + + onCropEnd(imageObject, event, correlationId) { + const jSEventData = this.getJSEventData(event, correlationId); + imageObject.invokeMethodAsync("CropperIsEnded", jSEventData); + } + + onCrop(imageObject, event, correlationId) { + const jSEventData = this.getJSEventData(event, correlationId); + imageObject.invokeMethodAsync("CropperIsCroped", jSEventData); + } + + onZoom(imageObject, event, correlationId) { + const jSEventData = this.getJSEventData(event, correlationId); + imageObject.invokeMethodAsync("CropperIsZoomed", jSEventData); + } + + initCropper(cropperComponentId, image, optionsImage, imageObject) { + if (image == null) { + throw "Parameter 'image' must be is not null!"; + } + + if (optionsImage == null) { + throw "Parameter 'optionsImage' must be is not null!"; + } + + const options = {}; + const correlationId = optionsImage["correlationId"]; + + if (imageObject != null) { + const self = this; + + options["ready"] = function (event) { + self.onReady(imageObject, event, correlationId); + }; + options["cropstart"] = function (event) { + self.onCropStart(imageObject, event, correlationId); + }; + options["cropmove"] = function (event) { + self.onCropMove(imageObject, event, correlationId); + }; + options["cropend"] = function (event) { + self.onCropEnd(imageObject, event, correlationId); + }; + options["crop"] = function (event) { + self.onCrop(imageObject, event, correlationId); + }; + options["zoom"] = function (event) { + self.onZoom(imageObject, event, correlationId); + }; + } + + if (optionsImage != null) { + Object.entries(optionsImage)?.forEach(([key, value]) => { + options[key] = value; + }); + } + + const cropper = new Cropper(image, options); + + this.cropperInstances[cropperComponentId] = cropper; + } } -window.cropper = new CropperDecorator(); \ No newline at end of file +window.cropper = new CropperDecorator();