diff options
Diffstat (limited to 'src/client/views/nodes/ImageBox.tsx')
| -rw-r--r-- | src/client/views/nodes/ImageBox.tsx | 86 |
1 files changed, 45 insertions, 41 deletions
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index b1c172e22..04ebf477b 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -79,23 +79,27 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this))); } + get fieldKey() { + return this.props.fieldKey.startsWith("@") ? StrCast(this.props.Document[this.props.fieldKey]) : this.props.fieldKey; + } + @undoBatch @action drop = (e: Event, de: DragManager.DropEvent) => { if (de.complete.docDragData) { if (de.metaKey) { de.complete.docDragData.droppedDocuments.forEach(action((drop: Doc) => { - Doc.AddDocToList(this.dataDoc, this.props.fieldKey + "-alternates", drop); + Doc.AddDocToList(this.dataDoc, this.fieldKey + "-alternates", drop); e.stopPropagation(); })); - } else if (de.altKey || !this.dataDoc[this.props.fieldKey]) { + } else if (de.altKey || !this.dataDoc[this.fieldKey]) { const layoutDoc = de.complete.docDragData?.draggedDocuments[0]; const targetField = Doc.LayoutFieldKey(layoutDoc); const targetDoc = layoutDoc[DataSym]; if (targetDoc[targetField] instanceof ImageField) { - this.dataDoc[this.props.fieldKey] = ObjectField.MakeCopy(targetDoc[targetField] as ImageField); - this.dataDoc[this.props.fieldKey + "-nativeWidth"] = NumCast(targetDoc[targetField + "-nativeWidth"]); - this.dataDoc[this.props.fieldKey + "-nativeHeight"] = NumCast(targetDoc[targetField + "-nativeHeight"]); + this.dataDoc[this.fieldKey] = ObjectField.MakeCopy(targetDoc[targetField] as ImageField); + this.dataDoc[this.fieldKey + "-nativeWidth"] = NumCast(targetDoc[targetField + "-nativeWidth"]); + this.dataDoc[this.fieldKey + "-nativeHeight"] = NumCast(targetDoc[targetField + "-nativeHeight"]); e.stopPropagation(); } } @@ -123,9 +127,9 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum // upload to server with known URL const audioDoc = Docs.Create.AudioDocument(url, { title: "audio test", _width: 200, _height: 32 }); audioDoc.treeViewExpandedView = "layout"; - const audioAnnos = Cast(this.dataDoc[this.props.fieldKey + "-audioAnnotations"], listSpec(Doc)); + const audioAnnos = Cast(this.dataDoc[this.fieldKey + "-audioAnnotations"], listSpec(Doc)); if (audioAnnos === undefined) { - this.dataDoc[this.props.fieldKey + "-audioAnnotations"] = new List([audioDoc]); + this.dataDoc[this.fieldKey + "-audioAnnotations"] = new List([audioDoc]); } else { audioAnnos.push(audioDoc); } @@ -142,33 +146,33 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum @undoBatch rotate = action(() => { - const nw = NumCast(this.Document[this.props.fieldKey + "-nativeWidth"]); - const nh = NumCast(this.Document[this.props.fieldKey + "-nativeHeight"]); + const nw = NumCast(this.Document[this.fieldKey + "-nativeWidth"]); + const nh = NumCast(this.Document[this.fieldKey + "-nativeHeight"]); const w = this.Document._width; const h = this.Document._height; - this.dataDoc[this.props.fieldKey + "-rotation"] = (NumCast(this.dataDoc[this.props.fieldKey + "-rotation"]) + 90) % 360; - this.dataDoc[this.props.fieldKey + "-nativeWidth"] = nh; - this.dataDoc[this.props.fieldKey + "-nativeHeight"] = nw; + this.dataDoc[this.fieldKey + "-rotation"] = (NumCast(this.dataDoc[this.fieldKey + "-rotation"]) + 90) % 360; + this.dataDoc[this.fieldKey + "-nativeWidth"] = nh; + this.dataDoc[this.fieldKey + "-nativeHeight"] = nw; this.Document._width = h; this.Document._height = w; }); specificContextMenu = (e: React.MouseEvent): void => { - const field = Cast(this.Document[this.props.fieldKey], ImageField); + const field = Cast(this.Document[this.fieldKey], ImageField); if (field) { const funcs: ContextMenuProps[] = []; funcs.push({ description: "Copy path", event: () => Utils.CopyText(field.url.href), icon: "expand-arrows-alt" }); funcs.push({ description: "Rotate", event: this.rotate, icon: "expand-arrows-alt" }); funcs.push({ description: "Reset Native Dimensions", event: action(async () => { - const curNW = NumCast(this.dataDoc[this.props.fieldKey + "-nativeWidth"]); - const curNH = NumCast(this.dataDoc[this.props.fieldKey + "-nativeHeight"]); + const curNW = NumCast(this.dataDoc[this.fieldKey + "-nativeWidth"]); + const curNH = NumCast(this.dataDoc[this.fieldKey + "-nativeHeight"]); if (this.props.PanelWidth() / this.props.PanelHeight() > curNW / curNH) { - this.dataDoc[this.props.fieldKey + "-nativeWidth"] = this.props.PanelHeight() * curNW / curNH; - this.dataDoc[this.props.fieldKey + "-nativeHeight"] = this.props.PanelHeight(); + this.dataDoc[this.fieldKey + "-nativeWidth"] = this.props.PanelHeight() * curNW / curNH; + this.dataDoc[this.fieldKey + "-nativeHeight"] = this.props.PanelHeight(); } else { - this.dataDoc[this.props.fieldKey + "-nativeWidth"] = this.props.PanelWidth(); - this.dataDoc[this.props.fieldKey + "-nativeHeight"] = this.props.PanelWidth() * curNH / curNW; + this.dataDoc[this.fieldKey + "-nativeWidth"] = this.props.PanelWidth(); + this.dataDoc[this.fieldKey + "-nativeHeight"] = this.props.PanelWidth() * curNH / curNW; } }), icon: "expand-arrows-alt" }); @@ -190,7 +194,7 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum results.reduce((face: CognitiveServices.Image.Face, faceDocs: List<Doc>) => faceDocs.push(Docs.Get.DocumentHierarchyFromJson(face, `Face: ${face.faceId}`)!), new List<Doc>()); return faceDocs; }; - this.url && CognitiveServices.Image.Appliers.ProcessImage(this.dataDoc, [this.props.fieldKey + "-faces"], this.url, Service.Face, converter); + this.url && CognitiveServices.Image.Appliers.ProcessImage(this.dataDoc, [this.fieldKey + "-faces"], this.url, Service.Face, converter); } generateMetadata = (threshold: Confidence = Confidence.Excellent) => { @@ -202,16 +206,16 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum const sanitized = tag.name.replace(" ", "_"); tagDoc[sanitized] = ComputedField.MakeFunction(`(${tag.confidence} >= this.confidence) ? ${tag.confidence} : "${ComputedField.undefined}"`); }); - this.dataDoc[this.props.fieldKey + "-generatedTags"] = tagsList; + this.dataDoc[this.fieldKey + "-generatedTags"] = tagsList; tagDoc.title = "Generated Tags Doc"; tagDoc.confidence = threshold; return tagDoc; }; - this.url && CognitiveServices.Image.Appliers.ProcessImage(this.dataDoc, [this.props.fieldKey + "-generatedTagsDoc"], this.url, Service.ComputerVision, converter); + this.url && CognitiveServices.Image.Appliers.ProcessImage(this.dataDoc, [this.fieldKey + "-generatedTagsDoc"], this.url, Service.ComputerVision, converter); } @computed private get url() { - const data = Cast(this.dataDoc[this.props.fieldKey], ImageField); + const data = Cast(this.dataDoc[this.fieldKey], ImageField); return data ? data.url.href : undefined; } @@ -244,32 +248,32 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum } const original = StrCast(this.dataDoc.originalUrl); if (error.type === "error" && original) { - this.dataDoc[this.props.fieldKey] = new ImageField(original); + this.dataDoc[this.fieldKey] = new ImageField(original); } } _curSuffix = "_m"; resize = (imgPath: string) => { const cachedNativeSize = { - width: NumCast(this.dataDoc[this.props.fieldKey + "-nativeWidth"]), - height: NumCast(this.dataDoc[this.props.fieldKey + "-nativeHeight"]) + width: NumCast(this.dataDoc[this.fieldKey + "-nativeWidth"]), + height: NumCast(this.dataDoc[this.fieldKey + "-nativeHeight"]) }; - const cachedImgPath = this.dataDoc[this.props.fieldKey + "-imgPath"]; + const cachedImgPath = this.dataDoc[this.fieldKey + "-imgPath"]; const docAspect = this.Document[HeightSym]() / this.Document[WidthSym](); const cachedAspect = cachedNativeSize.height / cachedNativeSize.width; if (!cachedNativeSize.width || !cachedNativeSize.height || Math.abs(NumCast(this.layoutDoc._width) / NumCast(this.layoutDoc._height) - cachedNativeSize.width / cachedNativeSize.height) > 0.05 || imgPath !== cachedImgPath) { if (!this.layoutDoc.isTemplateDoc || this.dataDoc !== this.layoutDoc) { requestImageSize(imgPath).then((inquiredSize: any) => { - const rotation = NumCast(this.dataDoc[this.props.fieldKey + "-rotation"]) % 180; + const rotation = NumCast(this.dataDoc[this.fieldKey + "-rotation"]) % 180; const rotatedNativeSize = rotation === 90 || rotation === 270 ? { height: inquiredSize.width, width: inquiredSize.height } : inquiredSize; const rotatedAspect = rotatedNativeSize.height / rotatedNativeSize.width; setTimeout(action(() => { if (this.Document[WidthSym]() && (!cachedNativeSize.width || !cachedNativeSize.height || Math.abs(1 - docAspect / rotatedAspect) > 0.1)) { this.Document._height = this.Document[WidthSym]() * rotatedAspect; - this.dataDoc[this.props.fieldKey + "-nativeWidth"] = this.Document._nativeWidth = rotatedNativeSize.width; - this.dataDoc[this.props.fieldKey + "-nativeHeight"] = this.Document._nativeHeight = rotatedNativeSize.height; + this.dataDoc[this.fieldKey + "-nativeWidth"] = this.Document._nativeWidth = rotatedNativeSize.width; + this.dataDoc[this.fieldKey + "-nativeHeight"] = this.Document._nativeHeight = rotatedNativeSize.height; } - this.dataDoc[this.props.fieldKey + "-imgPath"] = imgPath; + this.dataDoc[this.fieldKey + "-imgPath"] = imgPath; }), 0); }).catch((err: any) => console.log(err)); } else if (Math.abs(1 - docAspect / cachedAspect) > 0.1) { @@ -289,7 +293,7 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum @action onPointerEnter = () => { const self = this; - const audioAnnos = DocListCast(this.dataDoc[this.props.fieldKey + "-audioAnnotations"]); + const audioAnnos = DocListCast(this.dataDoc[this.fieldKey + "-audioAnnotations"]); if (audioAnnos && audioAnnos.length && this._audioState === 0) { const anno = audioAnnos[Math.floor(Math.random() * audioAnnos.length)]; anno.data instanceof AudioField && new Howl({ @@ -324,7 +328,7 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum @computed private get considerDownloadIcon() { - const data = this.dataDoc[this.props.fieldKey]; + const data = this.dataDoc[this.fieldKey]; if (!(data instanceof ImageField)) { return (null); } @@ -353,7 +357,7 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum setTimeout(action(() => { this.uploadIcon = idle; if (data) { - dataDoc[this.props.fieldKey] = data; + dataDoc[this.fieldKey] = data; } }), 2000); }} @@ -363,8 +367,8 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum @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; - const nativeWidth = NumCast(this.dataDoc[this.props.fieldKey + "-nativeWidth"], pw); - const nativeHeight = NumCast(this.dataDoc[this.props.fieldKey + "-nativeHeight"], 1); + const nativeWidth = NumCast(this.dataDoc[this.fieldKey + "-nativeWidth"], pw); + const nativeHeight = NumCast(this.dataDoc[this.fieldKey + "-nativeHeight"], 1); return { nativeWidth, nativeHeight }; } @@ -372,9 +376,9 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum let paths = [Utils.CorsProxy("http://www.cs.brown.edu/~bcz/noImage.png")]; // this._curSuffix = ""; // if (w > 20) { - const alts = DocListCast(this.dataDoc[this.props.fieldKey + "-alternates"]); + const alts = DocListCast(this.dataDoc[this.fieldKey + "-alternates"]); const altpaths = alts.filter(doc => doc.data instanceof ImageField).map(doc => this.choosePath((doc.data as ImageField).url)); - const field = this.dataDoc[this.props.fieldKey]; + const field = this.dataDoc[this.fieldKey]; // if (w < 100 && this._smallRetryCount < 10) this._curSuffix = "_s"; // else if (w < 600 && this._mediumRetryCount < 10) this._curSuffix = "_m"; // else if (this._largeRetryCount < 10) this._curSuffix = "_l"; @@ -389,7 +393,7 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum const srcpath = this.paths[NumCast(this.props.Document.curPage, 0)]; const fadepath = this.paths[Math.min(1, this.paths.length - 1)]; const { nativeWidth, nativeHeight } = this.nativeSize; - const rotation = NumCast(this.dataDoc[this.props.fieldKey + "-rotation"]); + const rotation = NumCast(this.dataDoc[this.fieldKey + "-rotation"]); const aspect = (rotation % 180) ? this.Document[HeightSym]() / this.Document[WidthSym]() : 1; const shift = (rotation % 180) ? (nativeHeight - nativeWidth / aspect) / 2 : 0; @@ -419,8 +423,8 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum style={{ height: `calc(${.1 * nativeHeight / nativeWidth * 100}%)` }} > <FontAwesomeIcon className="imageBox-audioFont" - style={{ color: [DocListCast(this.dataDoc[this.props.fieldKey + "-audioAnnotations"]).length ? "blue" : "gray", "green", "red"][this._audioState] }} - icon={!DocListCast(this.dataDoc[this.props.fieldKey + "-audioAnnotations"]).length ? "microphone" : faFileAudio} size="sm" /> + style={{ color: [DocListCast(this.dataDoc[this.fieldKey + "-audioAnnotations"]).length ? "blue" : "gray", "green", "red"][this._audioState] }} + icon={!DocListCast(this.dataDoc[this.fieldKey + "-audioAnnotations"]).length ? "microphone" : faFileAudio} size="sm" /> </div>} {this.considerDownloadIcon} {this.considerGooglePhotosLink()} |