aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/DocumentDecorations.tsx5
-rw-r--r--src/client/views/Main.tsx6
-rw-r--r--src/client/views/collections/CollectionDockingView.tsx10
-rw-r--r--src/client/views/collections/CollectionFreeFormView.tsx46
-rw-r--r--src/client/views/collections/CollectionSchemaView.tsx52
-rw-r--r--src/client/views/nodes/CollectionFreeFormDocumentView.tsx9
-rw-r--r--src/client/views/nodes/DocumentView.tsx8
-rw-r--r--src/fields/Document.ts4
8 files changed, 59 insertions, 81 deletions
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 7b64a4c2c..efd50e49e 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -5,7 +5,6 @@ import { observer } from "mobx-react";
import './DocumentDecorations.scss'
import { KeyStore } from '../../fields/KeyStore'
import { NumberField } from "../../fields/NumberField";
-import { number } from "prop-types";
@observer
export class DocumentDecorations extends React.Component {
@@ -26,9 +25,9 @@ export class DocumentDecorations extends React.Component {
if (element.props.isTopMost) {
return bounds;
}
- let transform = (element.props.ScreenToLocalTransform().scale(element.props.Scaling)).inverse();
+ let transform = (element.props.ScreenToLocalTransform().scale(element.props.ContentScaling())).inverse();
var [sptX, sptY] = transform.transformPoint(0, 0);
- let [bptX, bptY] = transform.transformPoint(element.props.PanelWidth, element.props.PanelHeight);
+ let [bptX, bptY] = transform.transformPoint(element.props.PanelWidth(), element.props.PanelHeight());
return {
x: Math.min(sptX, bounds.x), y: Math.min(sptY, bounds.y),
r: Math.max(bptX, bounds.r), b: Math.max(bptY, bounds.b)
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 6f6a89839..661a2ac20 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -106,9 +106,9 @@ Documents.initProtos(() => {
<div style={{ position: "absolute", width: "100%", height: "100%" }}>
<DocumentView Document={mainContainer}
AddDocument={undefined} RemoveDocument={undefined} ScreenToLocalTransform={() => Transform.Identity}
- Scaling={1}
- PanelWidth={0}
- PanelHeight={0}
+ ContentScaling={() => 1}
+ PanelWidth={() => 0}
+ PanelHeight={() => 0}
isTopMost={true}
ContainingCollectionView={undefined} />
<DocumentDecorations />
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 7ac8ea5e4..86dc66e39 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -272,13 +272,13 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
Server.GetField(this.props.documentId, action((f: Opt<Field>) => this._document = f as Document));
}
- @computed private get _nativeWidth() { return this._document!.GetNumber(KeyStore.NativeWidth, 0); }
- @computed private get _nativeHeight() { return this._document!.GetNumber(KeyStore.NativeHeight, 0); }
- @computed private get _parentScaling() { return this._panelWidth / (this._nativeWidth ? this._nativeWidth : this._panelWidth); }; // used to transfer the dimensions of the content pane in the DOM to the ParentScaling prop of the DocumentView
+ private _nativeWidth = () => { return this._document!.GetNumber(KeyStore.NativeWidth, 0); }
+ private _nativeHeight = () => { return this._document!.GetNumber(KeyStore.NativeHeight, 0); }
+ private _contentScaling = () => { return this._panelWidth / (this._nativeWidth() ? this._nativeWidth() : this._panelWidth); }
ScreenToLocalTransform = () => {
let { scale, translateX, translateY } = Utils.GetScreenTransform(this._mainCont.current!);
- return CollectionDockingView.Instance.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scale / this._parentScaling)
+ return CollectionDockingView.Instance.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scale / this._contentScaling())
}
render() {
@@ -289,7 +289,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
<DocumentView key={this._document.Id} Document={this._document}
AddDocument={undefined}
RemoveDocument={undefined}
- Scaling={this._parentScaling}
+ ContentScaling={this._contentScaling}
PanelWidth={this._nativeWidth}
PanelHeight={this._nativeHeight}
ScreenToLocalTransform={this.ScreenToLocalTransform}
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index e31fb25b9..43bc24a12 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -22,23 +22,14 @@ export class CollectionFreeFormView extends CollectionViewBase {
private _downX: number = 0;
private _downY: number = 0;
- @computed
- get isAnnotationOverlay() { return this.props.fieldKey == KeyStore.Annotations; }
-
- @computed
- get nativeWidth() { return this.props.Document.GetNumber(KeyStore.NativeWidth, 0); }
- @computed
- get nativeHeight() { return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); }
-
- @computed
- get zoomScaling() { return this.props.Document.GetNumber(KeyStore.Scale, 1); }
-
- @computed
- get resizeScaling() { return this.isAnnotationOverlay ? this.props.Document.GetNumber(KeyStore.Width, 0) / this.nativeWidth : 1; }
- constructor(props: SubCollectionViewProps) {
- super(props);
- }
+ @computed get panX(): number { return this.props.Document.GetNumber(KeyStore.PanX, 0) }
+ @computed get panY(): number { return this.props.Document.GetNumber(KeyStore.PanY, 0) }
+ @computed get scale(): number { return this.props.Document.GetNumber(KeyStore.Scale, 1); }
+ @computed get isAnnotationOverlay() { return this.props.fieldKey == KeyStore.Annotations; }
+ @computed get nativeWidth() { return this.props.Document.GetNumber(KeyStore.NativeWidth, 0); }
+ @computed get nativeHeight() { return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); }
+ @computed get zoomScaling() { return this.props.Document.GetNumber(KeyStore.Scale, 1); }
@undoBatch
@action
@@ -154,27 +145,16 @@ export class CollectionFreeFormView extends CollectionViewBase {
});
}
- @computed
- get translate(): [number, number] {
- const x = this.props.Document.GetNumber(KeyStore.PanX, 0);
- const y = this.props.Document.GetNumber(KeyStore.PanY, 0);
- return [x, y];
- }
-
- @computed
- get scale(): number {
- return this.props.Document.GetNumber(KeyStore.Scale, 1);
- }
-
getTransform = (): Transform => {
return this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).transform(this.getLocalTransform())
}
getLocalTransform = (): Transform => {
- const [x, y] = this.translate;
- return Transform.Identity.translate(-x, -y).scale(1 / this.scale);
+ return Transform.Identity.translate(-this.panX, -this.panY).scale(1 / this.scale);
}
+ noScaling = () => 1;
+
@computed
get views() {
const { fieldKey, Document } = this.props;
@@ -186,9 +166,9 @@ export class CollectionFreeFormView extends CollectionViewBase {
RemoveDocument={this.props.removeDocument}
ScreenToLocalTransform={this.getTransform}
isTopMost={false}
- Scaling={1}
- PanelWidth={doc.GetNumber(KeyStore.Width, 0)}
- PanelHeight={doc.GetNumber(KeyStore.Height, 0)}
+ ContentScaling={this.noScaling}
+ PanelWidth={doc.Width}
+ PanelHeight={doc.Height}
ContainingCollectionView={this.props.CollectionView} />);
})
}
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 7e7d23fe4..ca47f6998 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -19,14 +19,14 @@ import { CollectionViewBase } from "./CollectionViewBase";
@observer
export class CollectionSchemaView extends CollectionViewBase {
private _mainCont = React.createRef<HTMLDivElement>();
-
private DIVIDER_WIDTH = 5;
- @observable
- selectedIndex = 0;
-
- @observable
- _splitPercentage: number = 50;
+ @observable _contentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ContentScaling prop of the DocumentView
+ @observable _dividerX = 0;
+ @observable _panelWidth = 0;
+ @observable _panelHeight = 0;
+ @observable _selectedIndex = 0;
+ @observable _splitPercentage: number = 50;
renderCell = (rowProps: CellInfo) => {
let props: FieldViewProps = {
@@ -67,7 +67,6 @@ export class CollectionSchemaView extends CollectionViewBase {
)
}
-
private getTrProps: ComponentPropsGetterR = (state, rowInfo) => {
const that = this;
if (!rowInfo) {
@@ -75,7 +74,7 @@ export class CollectionSchemaView extends CollectionViewBase {
}
return {
onClick: action((e: React.MouseEvent, handleOriginal: Function) => {
- that.selectedIndex = rowInfo.index;
+ that._selectedIndex = rowInfo.index;
this._splitPercentage += 0.05; // bcz - ugh - needed to force Measure to do its thing and call onResize
if (handleOriginal) {
@@ -83,8 +82,8 @@ export class CollectionSchemaView extends CollectionViewBase {
}
}),
style: {
- background: rowInfo.index == this.selectedIndex ? "#00afec" : "white",
- color: rowInfo.index == this.selectedIndex ? "white" : "black"
+ background: rowInfo.index == this._selectedIndex ? "#00afec" : "white",
+ color: rowInfo.index == this._selectedIndex ? "white" : "black"
}
};
}
@@ -94,7 +93,6 @@ export class CollectionSchemaView extends CollectionViewBase {
let nativeWidth = this._mainCont.current!.getBoundingClientRect();
this._splitPercentage = Math.round((e.clientX - nativeWidth.left) / nativeWidth.width * 100);
}
-
onDividerUp = (e: PointerEvent): void => {
document.removeEventListener("pointermove", this.onDividerMove);
document.removeEventListener('pointerup', this.onDividerUp);
@@ -118,39 +116,37 @@ export class CollectionSchemaView extends CollectionViewBase {
}
}
-
- getTransform = (): Transform => {
- return this.props.ScreenToLocalTransform().translate(- COLLECTION_BORDER_WIDTH - this.DIVIDER_WIDTH - this._dividerX, - COLLECTION_BORDER_WIDTH).scale(1 / this._parentScaling);
- }
-
@action
setScaling = (r: any) => {
const children = this.props.Document.GetList<Document>(this.props.fieldKey, []);
- const selected = children.length > this.selectedIndex ? children[this.selectedIndex] : undefined;
+ const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined;
this._panelWidth = r.entry.width;
this._panelHeight = r.entry.height ? r.entry.height : this._panelHeight;
- this._parentScaling = r.entry.width / selected!.GetNumber(KeyStore.NativeWidth, r.entry.width);
+ this._contentScaling = r.entry.width / selected!.GetNumber(KeyStore.NativeWidth, r.entry.width);
+ }
+
+ getContentScaling = (): number => this._contentScaling;
+ getPanelWidth = (): number => this._panelWidth;
+ getPanelHeight = (): number => this._panelHeight;
+ getTransform = (): Transform => {
+ return this.props.ScreenToLocalTransform().translate(- COLLECTION_BORDER_WIDTH - this.DIVIDER_WIDTH - this._dividerX, - COLLECTION_BORDER_WIDTH).scale(1 / this._contentScaling);
}
- @observable _parentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ParentScaling prop of the DocumentView
- @observable _dividerX = 0;
- @observable _panelWidth = 0;
- @observable _panelHeight = 0;
render() {
const columns = this.props.Document.GetList(KeyStore.ColumnsKey, [KeyStore.Title, KeyStore.Data, KeyStore.Author])
const children = this.props.Document.GetList<Document>(this.props.fieldKey, []);
- const selected = children.length > this.selectedIndex ? children[this.selectedIndex] : undefined;
- let content = this.selectedIndex == -1 || !selected ? (null) : (
+ const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined;
+ let content = this._selectedIndex == -1 || !selected ? (null) : (
<Measure onResize={this.setScaling}>
{({ measureRef }) =>
<div ref={measureRef}>
<DocumentView Document={selected}
AddDocument={this.props.addDocument} RemoveDocument={this.props.removeDocument}
- ScreenToLocalTransform={this.getTransform}
- Scaling={this._parentScaling}
isTopMost={false}
- PanelWidth={this._panelWidth}
- PanelHeight={this._panelHeight}
+ ScreenToLocalTransform={this.getTransform}
+ ContentScaling={this.getContentScaling}
+ PanelWidth={this.getPanelWidth}
+ PanelHeight={this.getPanelHeight}
ContainingCollectionView={this.props.CollectionView} />
</div>
}
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index ad6756918..17123bf52 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -24,7 +24,7 @@ export class CollectionFreeFormDocumentView extends React.Component<DocumentView
@computed
get transform(): string {
- return `scale(${this.props.Scaling}, ${this.props.Scaling}) translate(${this.props.Document.GetNumber(KeyStore.X, 0)}px, ${this.props.Document.GetNumber(KeyStore.Y, 0)}px)`;
+ return `scale(${this.props.ContentScaling()}, ${this.props.ContentScaling()}) translate(${this.props.Document.GetNumber(KeyStore.X, 0)}px, ${this.props.Document.GetNumber(KeyStore.Y, 0)}px)`;
}
@computed
@@ -69,20 +69,19 @@ export class CollectionFreeFormDocumentView extends React.Component<DocumentView
this.props.Document.SetData(KeyStore.ZIndex, h, NumberField)
}
- @computed
- get parentScaling() {
+ contentScaling = () => {
return this.nativeWidth > 0 ? this.width / this.nativeWidth : 1;
}
getTransform = (): Transform => {
return this.props.ScreenToLocalTransform().
- translate(-this.props.Document.GetNumber(KeyStore.X, 0), -this.props.Document.GetNumber(KeyStore.Y, 0)).scale(1 / this.parentScaling);
+ translate(-this.props.Document.GetNumber(KeyStore.X, 0), -this.props.Document.GetNumber(KeyStore.Y, 0)).scale(1 / this.contentScaling());
}
@computed
get docView() {
return <DocumentView {...this.props}
- Scaling={this.parentScaling}
+ ContentScaling={this.contentScaling}
ScreenToLocalTransform={this.getTransform}
/>
}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index c026e13cd..34a230669 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -30,9 +30,9 @@ export interface DocumentViewProps {
ScreenToLocalTransform: () => Transform;
isTopMost: boolean;
//tfs: This shouldn't be necessary I don't think
- Scaling: number;
- PanelWidth: number;
- PanelHeight: number;
+ ContentScaling: () => number;
+ PanelWidth: () => number;
+ PanelHeight: () => number;
}
export interface JsxArgs extends DocumentViewProps {
Keys: { [name: string]: Key }
@@ -293,7 +293,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
var nodeWidth = nativeWidth > 0 ? nativeWidth.toString() + "px" : "100%";
var nodeHeight = nativeHeight > 0 ? nativeHeight.toString() + "px" : "100%";
- var scaling = this.props.Scaling;
+ var scaling = this.props.ContentScaling();
return (
<div className="documentView-node" ref={this._mainCont} style={{ width: nodeWidth, height: nodeHeight, transformOrigin: "left top", transform: `scale(${scaling},${scaling})` }}
onContextMenu={this.onContextMenu}
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index ff13732b3..0d7d357a0 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -30,6 +30,10 @@ export class Document extends Field {
}
}
+ public Width = () => { return this.GetNumber(KeyStore.Width, 0) }
+ public Height = () => { return this.GetNumber(KeyStore.Height, 0) }
+ public Scale = () => { return this.GetNumber(KeyStore.Scale, 1) }
+
@computed
public get Title() {
return this.GetText(KeyStore.Title, "<untitled>");
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 22:43:59 +0000