diff options
Diffstat (limited to 'src/client/views/collections')
4 files changed, 22 insertions, 30 deletions
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index d3e90d11c..8abb0dbaa 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -100,7 +100,7 @@ export class CollectionDockingView extends CollectionViewBase { return (<DocumentView key={value[i].Id} Document={value[i]} AddDocument={this.addDocument} RemoveDocument={this.removeDocument} GetTransform={() => Transform.Identity} - Scaling={1} + ParentScaling={1} ContainingCollectionView={this} DocumentView={undefined} />); } } @@ -267,17 +267,15 @@ export class CollectionDockingView extends CollectionViewBase { } return ( - <div className="border" style={{ - borderStyle: "solid", - borderWidth: `${COLLECTION_BORDER_WIDTH}px`, - }}> - <div className="collectiondockingview-container" id="menuContainer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef} - style={{ - width: CollectionDockingView.UseGoldenLayout || s > 1 ? "100%" : w - 2 * COLLECTION_BORDER_WIDTH, - height: CollectionDockingView.UseGoldenLayout || s > 1 ? "100%" : h - 2 * COLLECTION_BORDER_WIDTH - }} > - {chooseLayout()} - </div> + <div className="collectiondockingview-container" id="menuContainer" + onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef} + style={{ + width: CollectionDockingView.UseGoldenLayout || s > 1 ? "100%" : w - 2 * COLLECTION_BORDER_WIDTH, + height: CollectionDockingView.UseGoldenLayout || s > 1 ? "100%" : h - 2 * COLLECTION_BORDER_WIDTH, + borderStyle: "solid", + borderWidth: `${COLLECTION_BORDER_WIDTH}px`, + }} > + {chooseLayout()} </div> ); } @@ -295,25 +293,19 @@ class RenderClass { this._htmlElement = document.getElementById(containingDiv); this._document = doc; container.on('resize', action((e: any) => { - var nativeWidth = doc.GetNumber(KeyStore.NativeWidth, 0); - if (this._htmlElement != null && this._htmlElement.childElementCount > 0 && nativeWidth > 0) { - let scaling = nativeWidth > 0 ? this._htmlElement!.clientWidth / nativeWidth : 1; - (this._htmlElement!.children[0] as any).style.transformOrigin = "0px 0px"; - (this._htmlElement!.children[0] as any).style.transform = `translate(0px,0px) scale(${scaling}, ${scaling}) `; - (this._htmlElement!.children[0] as any).style.width = nativeWidth.toString() + "px"; - } + this.render(); })); this.render(); } render() { var nativeWidth = this._document.GetNumber(KeyStore.NativeWidth, 0); - let scaling = nativeWidth > 0 ? this._htmlElement!.clientWidth / nativeWidth : 1; + let parentScaling = nativeWidth > 0 ? this._htmlElement!.clientWidth / nativeWidth : 1; ReactDOM.render(( <DocumentView key={this._document.Id} Document={this._document} AddDocument={this._collectionDockingView.addDocument} RemoveDocument={this._collectionDockingView.removeDocument} GetTransform={() => Transform.Identity} - Scaling={scaling} + ParentScaling={parentScaling} ContainingCollectionView={this._collectionDockingView} DocumentView={undefined} /> ), this._htmlElement diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 15450d737..0262e4a6c 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -58,8 +58,8 @@ export class CollectionFreeFormView extends CollectionViewBase { const currScale = this.resizeScaling * this.zoomScaling * this.props.ContainingDocumentView!.ScalingToScreenSpace; const screenX = de.x - xOffset; const screenY = de.y - yOffset; - doc.x = (screenX - translateX) / currScale; - doc.y = (screenY - translateY) / currScale; + doc.props.Document.SetNumber(KeyStore.X, (screenX - translateX) / currScale); + doc.props.Document.SetNumber(KeyStore.Y, (screenY - translateY) / currScale); this.bringToFront(doc); } e.stopPropagation(); @@ -124,7 +124,7 @@ export class CollectionFreeFormView extends CollectionViewBase { // if (modes[e.deltaMode] == 'pixels') coefficient = 50; // else if (modes[e.deltaMode] == 'lines') coefficient = 1000; // This should correspond to line-height?? - let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.ContainingDocumentView!.TransformToLocalPoint(e.pageX, e.pageY); + let { LocalX, Ss, Xx, LocalY, Yy, ContainerX, ContainerY } = this.props.ContainingDocumentView!.TransformToLocalPoint(e.pageX, e.pageY); var deltaScale = (1 - (e.deltaY / coefficient)) * Ss; var newDeltaScale = this.isAnnotationOverlay ? Math.max(1, deltaScale) : deltaScale; @@ -135,8 +135,8 @@ export class CollectionFreeFormView extends CollectionViewBase { @action private SetPan(panX: number, panY: number) { - const newPanX = Math.max(-(this.resizeScaling * this.zoomScaling - this.resizeScaling) * this.nativeWidth, Math.min(0, panX)); - const newPanY = Math.max(-(this.resizeScaling * this.zoomScaling - this.resizeScaling) * this.nativeHeight, Math.min(0, panY)); + const newPanX = Math.max((1 - this.zoomScaling) * this.nativeWidth, Math.min(0, panX)); + const newPanY = Math.max((1 - this.zoomScaling) * this.nativeHeight, Math.min(0, panY)); this.props.DocumentForCollection.SetNumber(KeyStore.PanX, this.isAnnotationOverlay ? newPanX : panX); this.props.DocumentForCollection.SetNumber(KeyStore.PanY, this.isAnnotationOverlay ? newPanY : panY); } @@ -241,7 +241,7 @@ export class CollectionFreeFormView extends CollectionViewBase { AddDocument={this.addDocument} RemoveDocument={this.removeDocument} GetTransform={this.getTransform} - Scaling={1} + ParentScaling={1} ContainingCollectionView={this} DocumentView={undefined} />); })} </div> diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index f1e882e20..eec3b275c 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -109,7 +109,7 @@ export class CollectionSchemaView extends CollectionViewBase { <DocumentView Document={children[this.selectedIndex]} AddDocument={this.addDocument} RemoveDocument={this.removeDocument} GetTransform={() => Transform.Identity}//TODO This should probably be an actual transform - Scaling={1} + ParentScaling={1} DocumentView={undefined} ContainingCollectionView={this} /> ) } else { diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 7e2fcb39d..1cf07ce05 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -19,7 +19,7 @@ export interface CollectionViewProps { ContainingDocumentView: Opt<DocumentView>; GetTransform: () => Transform; BackgroundView: Opt<DocumentView>; - Scaling: number; + ParentScaling: number; } export const COLLECTION_BORDER_WIDTH = 2; @@ -28,7 +28,7 @@ export const COLLECTION_BORDER_WIDTH = 2; export class CollectionViewBase extends React.Component<CollectionViewProps> { public static LayoutString(collectionType: string, fieldKey: string = "DataKey") { - return `<${collectionType} Scaling={Scaling} DocumentForCollection={Document} CollectionFieldKey={${fieldKey}} ContainingDocumentView={DocumentView} BackgroundView={BackgroundView} />`; + return `<${collectionType} ParentScaling={ParentScaling} DocumentForCollection={Document} CollectionFieldKey={${fieldKey}} ContainingDocumentView={DocumentView} BackgroundView={BackgroundView} />`; } @computed public get active(): boolean { |