import { types, getParent } from "mobx-state-tree";
|
import { FileLoader } from "../../../utils/FileLoader";
|
import { clamp } from "../../../utils/utilities";
|
import { FF_IMAGE_MEMORY_USAGE, isFF } from "../../../utils/feature-flags";
|
|
const fileLoader = new FileLoader();
|
|
export const ImageEntity = types
|
.model("ImageEntity", {
|
id: types.identifier,
|
src: types.string,
|
index: types.number,
|
|
rotation: types.optional(types.number, 0),
|
|
/**
|
* Natural sizes of Image
|
* Constants
|
*/
|
naturalWidth: types.optional(types.integer, 1),
|
naturalHeight: types.optional(types.integer, 1),
|
|
stageWidth: types.optional(types.number, 1),
|
stageHeight: types.optional(types.number, 1),
|
|
/**
|
* Zoom Scale
|
*/
|
zoomScale: types.optional(types.number, 1),
|
|
/**
|
* Coordinates of left top corner
|
* Default: { x: 0, y: 0 }
|
*/
|
zoomingPositionX: types.optional(types.number, 0),
|
zoomingPositionY: types.optional(types.number, 0),
|
|
/**
|
* Brightness of Canvas
|
*/
|
brightnessGrade: types.optional(types.number, 100),
|
|
contrastGrade: types.optional(types.number, 100),
|
})
|
.volatile(() => ({
|
stageRatio: 1,
|
// Container's sizes causing limits to calculate a scale factor
|
containerWidth: 1,
|
containerHeight: 1,
|
|
stageZoom: 1,
|
stageZoomX: 1,
|
stageZoomY: 1,
|
currentZoom: 1,
|
|
/** Is image downloaded to local cache */
|
downloaded: false,
|
/** Is image being downloaded */
|
downloading: false,
|
/** If error happened during download */
|
error: false,
|
/** Download progress 0..1 */
|
progress: 0,
|
/** Local image src created with URL.createURLObject */
|
currentSrc: undefined,
|
/** Is image loaded using `<img/>` tag and cached by the browser */
|
imageLoaded: false,
|
}))
|
.views((self) => ({
|
get parent() {
|
// Get the ImageEntityMixin
|
return getParent(self, 2);
|
},
|
get imageCrossOrigin() {
|
return self.parent?.imageCrossOrigin ?? "anonymous";
|
},
|
}))
|
.actions((self) => ({
|
preload() {
|
if (self.ensurePreloaded() || !self.src) return;
|
|
if (isFF(FF_IMAGE_MEMORY_USAGE)) {
|
self.setDownloading(true);
|
new Promise((resolve) => {
|
const img = new Image();
|
// Get from the image tag
|
const crossOrigin = self.imageCrossOrigin;
|
if (crossOrigin) img.crossOrigin = crossOrigin;
|
img.onload = () => {
|
self.setCurrentSrc(self.src);
|
self.setDownloaded(true);
|
self.setProgress(1);
|
self.setDownloading(false);
|
self.setImageLoaded(true);
|
resolve();
|
};
|
img.onerror = () => {
|
self.setError(true);
|
self.setDownloading(false);
|
resolve();
|
};
|
img.src = self.src;
|
});
|
return;
|
}
|
|
self.setDownloading(true);
|
fileLoader
|
.download(self.src, (_t, _l, progress) => {
|
self.setProgress(progress);
|
})
|
.then((url) => {
|
self.setDownloaded(true);
|
self.setDownloading(false);
|
self.setCurrentSrc(url);
|
})
|
.catch(() => {
|
self.setDownloading(false);
|
self.setError(true);
|
});
|
},
|
|
ensurePreloaded() {
|
if (isFF(FF_IMAGE_MEMORY_USAGE)) return self.currentSrc !== undefined;
|
|
if (fileLoader.isError(self.src)) {
|
self.setDownloading(false);
|
self.setError(true);
|
return true;
|
}
|
if (fileLoader.isPreloaded(self.src)) {
|
self.setDownloading(false);
|
self.setDownloaded(true);
|
self.setProgress(1);
|
self.setCurrentSrc(fileLoader.getPreloadedURL(self.src));
|
return true;
|
}
|
return false;
|
},
|
|
setImageLoaded(value) {
|
self.imageLoaded = value;
|
},
|
|
setProgress(progress) {
|
self.progress = clamp(progress, 0, 100);
|
},
|
|
setDownloading(downloading) {
|
self.downloading = downloading;
|
},
|
|
setDownloaded(downloaded) {
|
self.downloaded = downloaded;
|
},
|
|
setCurrentSrc(src) {
|
self.currentSrc = src;
|
},
|
|
setError() {
|
self.error = true;
|
},
|
}))
|
.actions((self) => ({
|
setRotation(angle) {
|
self.rotation = angle;
|
},
|
|
setNaturalWidth(width) {
|
self.naturalWidth = width;
|
},
|
|
setNaturalHeight(height) {
|
self.naturalHeight = height;
|
},
|
|
setStageWidth(width) {
|
self.stageWidth = width;
|
},
|
|
setStageHeight(height) {
|
self.stageHeight = height;
|
},
|
|
setStageRatio(ratio) {
|
self.stageRatio = ratio;
|
},
|
|
setContainerWidth(width) {
|
self.containerWidth = width;
|
},
|
|
setContainerHeight(height) {
|
self.containerHeight = height;
|
},
|
|
setStageZoom(zoom) {
|
self.stageZoom = zoom;
|
},
|
|
setStageZoomX(zoom) {
|
self.stageZoomX = zoom;
|
},
|
|
setStageZoomY(zoom) {
|
self.stageZoomY = zoom;
|
},
|
|
setCurrentZoom(zoom) {
|
self.currentZoom = zoom;
|
},
|
|
setZoomScale(zoomScale) {
|
self.zoomScale = zoomScale;
|
},
|
|
setZoomingPositionX(x) {
|
self.zoomingPositionX = x;
|
},
|
|
setZoomingPositionY(y) {
|
self.zoomingPositionY = y;
|
},
|
|
setBrightnessGrade(grade) {
|
self.brightnessGrade = grade;
|
},
|
|
setContrastGrade(grade) {
|
self.contrastGrade = grade;
|
},
|
}));
|
