aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/ImageBox.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/ImageBox.tsx')
-rw-r--r--src/client/views/nodes/ImageBox.tsx85
1 files changed, 40 insertions, 45 deletions
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index b4a51657f..634555012 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -18,7 +18,6 @@ import { undoBatch } from '../../util/UndoManager';
import { ContextMenu } from "../../views/ContextMenu";
import { ContextMenuProps } from '../ContextMenuItem';
import { DocAnnotatableComponent } from '../DocComponent';
-import { InkingControl } from '../InkingControl';
import FaceRectangles from './FaceRectangles';
import { FieldView, FieldViewProps } from './FieldView';
import "./ImageBox.scss";
@@ -67,18 +66,18 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum
protected createDropTarget = (ele: HTMLDivElement) => {
this._dropDisposer && this._dropDisposer();
- ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.drop.bind(this) } }));
+ ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this)));
}
@undoBatch
@action
drop = (e: Event, de: DragManager.DropEvent) => {
- if (de.data instanceof DragManager.DocumentDragData) {
- if (de.mods === "AltKey" && de.data.draggedDocuments.length && de.data.draggedDocuments[0].data instanceof ImageField) {
- Doc.GetProto(this.dataDoc)[this.props.fieldKey] = new ImageField(de.data.draggedDocuments[0].data.url);
+ if (de.complete.docDragData) {
+ if (de.altKey && de.complete.docDragData.draggedDocuments.length && de.complete.docDragData.draggedDocuments[0].data instanceof ImageField) {
+ Doc.GetProto(this.dataDoc)[this.props.fieldKey] = new ImageField(de.complete.docDragData.draggedDocuments[0].data.url);
e.stopPropagation();
}
- de.mods === "MetaKey" && de.data.droppedDocuments.forEach(action((drop: Doc) => {
+ de.metaKey && de.complete.docDragData.droppedDocuments.forEach(action((drop: Doc) => {
this.extensionDoc && Doc.AddDocToList(Doc.GetProto(this.extensionDoc), "Alternates", drop);
e.stopPropagation();
}));
@@ -215,35 +214,23 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum
}
_curSuffix = "_m";
- resize = (srcpath: string) => {
- requestImageSize(srcpath)
+ _resized = "";
+ resize = (imgPath: string) => {
+ requestImageSize(imgPath)
.then((size: any) => {
const rotation = NumCast(this.dataDoc.rotation) % 180;
const realsize = rotation === 90 || rotation === 270 ? { height: size.width, width: size.height } : size;
const aspect = realsize.height / realsize.width;
if (this.Document.width && (Math.abs(1 - NumCast(this.Document.height) / NumCast(this.Document.width) / (realsize.height / realsize.width)) > 0.1)) {
setTimeout(action(() => {
- this.Document.height = this.Document[WidthSym]() * aspect;
- this.Document.nativeHeight = realsize.height;
- this.Document.nativeWidth = realsize.width;
+ if (this.pathInfos.srcpath === imgPath && (!this.layoutDoc.isTemplateDoc || this.dataDoc !== this.layoutDoc)) {
+ this._resized = imgPath;
+ this.Document.height = this.Document[WidthSym]() * aspect;
+ this.Document.nativeHeight = realsize.height;
+ this.Document.nativeWidth = realsize.width;
+ }
}), 0);
- }
- })
- .catch((err: any) => console.log(err));
- }
- fadesize = (srcpath: string) => {
- requestImageSize(srcpath)
- .then((size: any) => {
- const rotation = NumCast(this.dataDoc.rotation) % 180;
- const realsize = rotation === 90 || rotation === 270 ? { height: size.width, width: size.height } : size;
- const aspect = realsize.height / realsize.width;
- if (this.Document.width && (Math.abs(1 - NumCast(this.Document.height) / NumCast(this.Document.width) / (realsize.height / realsize.width)) > 0.1)) {
- setTimeout(action(() => {
- this.Document.height = this.Document[WidthSym]() * aspect;
- this.Document.nativeHeight = realsize.height;
- this.Document.nativeWidth = realsize.width;
- }), 0);
- }
+ } else this._resized = imgPath;
})
.catch((err: any) => console.log(err));
}
@@ -284,18 +271,16 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum
return !tags ? (null) : (<img id={"google-tags"} src={"/assets/google_tags.png"} />);
}
- @computed get content() {
- TraceMobx();
- const extensionDoc = this.extensionDoc;
- if (!extensionDoc) return (null);
- // let transform = this.props.ScreenToLocalTransform().inverse();
+ @computed get nativeSize() {
const pw = typeof this.props.PanelWidth === "function" ? this.props.PanelWidth() : typeof this.props.PanelWidth === "number" ? (this.props.PanelWidth as any) as number : 50;
- // var [sptX, sptY] = transform.transformPoint(0, 0);
- // let [bptX, bptY] = transform.transformPoint(pw, this.props.PanelHeight());
- // let w = bptX - sptX;
-
const nativeWidth = (this.Document.nativeWidth || pw);
const nativeHeight = (this.Document.nativeHeight || 1);
+ return { nativeWidth, nativeHeight };
+ }
+
+ @computed get pathInfos() {
+ const extensionDoc = this.extensionDoc!;
+ const { nativeWidth, nativeHeight } = this.nativeSize;
let paths = [[Utils.CorsProxy("http://www.cs.brown.edu/~bcz/noImage.png"), nativeWidth / nativeHeight]];
// this._curSuffix = "";
// if (w > 20) {
@@ -307,18 +292,26 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum
// else if (this._largeRetryCount < 10) this._curSuffix = "_l";
if (field instanceof ImageField) paths = [[this.choosePath(field.url), nativeWidth / nativeHeight]];
paths.push(...altpaths);
- // }
- const dragging = !SelectionManager.GetIsDragging() ? "" : "-dragging";
- const rotation = NumCast(this.Document.rotation, 0);
- const aspect = (rotation % 180) ? this.Document[HeightSym]() / this.Document[WidthSym]() : 1;
- const shift = (rotation % 180) ? (nativeHeight - nativeWidth / aspect) / 2 : 0;
const srcpath = paths[Math.min(paths.length - 1, (this.Document.curPage || 0))][0] as string;
const srcaspect = paths[Math.min(paths.length - 1, (this.Document.curPage || 0))][1] as number;
const fadepath = paths[Math.min(paths.length - 1, 1)][0] as string;
+ return { srcpath, srcaspect, fadepath };
+ }
- !this.Document.ignoreAspect && this.resize(srcpath);
+ @computed get content() {
+ TraceMobx();
+ const extensionDoc = this.extensionDoc;
+ if (!extensionDoc) return (null);
+
+ const { srcpath, srcaspect, fadepath } = this.pathInfos;
+ const { nativeWidth, nativeHeight } = this.nativeSize;
+ const rotation = NumCast(this.Document.rotation, 0);
+ const aspect = (rotation % 180) ? this.Document[HeightSym]() / this.Document[WidthSym]() : 1;
+ const shift = (rotation % 180) ? (nativeHeight - nativeWidth / aspect) / 2 : 0;
+
+ !this.Document.ignoreAspect && this._resized !== srcpath && this.resize(srcpath);
- return <div className={`imageBox-cont${dragging}`} key={this.props.Document[Id]} ref={this.createDropTarget} onContextMenu={this.specificContextMenu}>
+ return <div className="imageBox-cont" key={this.props.Document[Id]} ref={this.createDropTarget} onContextMenu={this.specificContextMenu}>
<div className="imageBox-fader" >
<img key={this._smallRetryCount + (this._mediumRetryCount << 4) + (this._largeRetryCount << 8)} // force cache to update on retrys
src={srcpath}
@@ -350,7 +343,9 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum
contentFunc = () => [this.content];
render() {
- return (<div className="imageBox" onContextMenu={this.specificContextMenu}
+ TraceMobx();
+ const dragging = !SelectionManager.GetIsDragging() ? "" : "-dragging";
+ return (<div className={`imageBox${dragging}`} onContextMenu={this.specificContextMenu}
style={{
transform: `scale(${this.props.ContentScaling()})`,
width: `${100 / this.props.ContentScaling()}%`,
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 13:34:37 +0000