diff options
Diffstat (limited to 'src/client/views/nodes/ImageBox.tsx')
| -rw-r--r-- | src/client/views/nodes/ImageBox.tsx | 14 |
1 files changed, 9 insertions, 5 deletions
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index e0b3a6809..4a1b71a9e 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -392,8 +392,12 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum const fadepath = this.paths[Math.min(1, this.paths.length - 1)]; const { nativeWidth, nativeHeight } = this.nativeSize; 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; + const aspect = (rotation % 180) ? nativeHeight / nativeWidth : 1; + //const shift = (rotation % 180) ? -(nativeHeight - nativeHeight * aspect) : 0; + const pwidth = this.props.PanelWidth(); + const pheight = this.props.PanelHeight(); + const shift = (rotation % 180) ? (pheight - pwidth) / aspect / 2 + (pheight - pwidth) / 2 : 0; + //(300 - 168) / 1.7778 / 2 + (300 - 168)/2 this.resize(srcpath); @@ -433,14 +437,14 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum contentFunc = () => [this.content]; render() { TraceMobx(); - const rotation = NumCast(this.dataDoc[this.fieldKey + "-rotation"]); - const aspect = (rotation % 180) ? this.Document[HeightSym]() / this.Document[WidthSym]() : 1; + const { nativeWidth, nativeHeight } = this.nativeSize; + const aspect = nativeWidth / nativeHeight; const dragging = !SelectionManager.GetIsDragging() ? "" : "-dragging"; return (<div className={`imageBox${dragging}`} onContextMenu={this.specificContextMenu} style={{ transform: this.props.PanelWidth() ? undefined : `scale(${this.props.ContentScaling()})`, width: this.props.PanelWidth() ? `${this.props.PanelWidth()}px` : `${100 / this.props.ContentScaling()}%`, - height: this.props.PanelWidth() ? `${this.props.PanelWidth() * aspect}px` : `${100 / this.props.ContentScaling()}%`, + height: this.props.PanelWidth() ? `${this.props.PanelWidth() / aspect}px` : `${100 / this.props.ContentScaling()}%`, pointerEvents: this.props.Document.isBackground ? "none" : undefined, borderRadius: `${Number(StrCast(this.layoutDoc.borderRounding).replace("px", "")) / this.props.ContentScaling()}px` }} > |