aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/documents/Documents.ts4
-rw-r--r--src/client/views/Main.tsx6
-rw-r--r--src/client/views/collections/CollectionDockingView.tsx63
-rw-r--r--src/client/views/collections/CollectionFreeFormView.tsx7
-rw-r--r--src/client/views/collections/CollectionSchemaView.tsx2
-rw-r--r--src/client/views/collections/CollectionViewBase.tsx5
-rw-r--r--src/client/views/nodes/CollectionFreeFormDocumentView.tsx2
-rw-r--r--src/client/views/nodes/DocumentView.tsx9
-rw-r--r--src/client/views/nodes/FormattedTextBox.tsx2
-rw-r--r--src/client/views/nodes/ImageBox.tsx3
10 files changed, 68 insertions, 35 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 7512d25cb..72fa608ad 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -127,7 +127,7 @@ export namespace Documents {
imageProto.Set(KeyStore.NativeHeight, new NumberField(300));
imageProto.Set(KeyStore.Width, new NumberField(300));
imageProto.Set(KeyStore.Height, new NumberField(300));
- imageProto.Set(KeyStore.Layout, new TextField("<CollectionFreeFormView DocumentForCollection={Document} CollectionFieldKey={AnnotationsKey} BackgroundView={BackgroundView} ContainingDocumentView={DocumentView} />"));
+ imageProto.Set(KeyStore.Layout, new TextField(CollectionFreeFormView.LayoutString("AnnotationsKey")));
imageProto.Set(KeyStore.BackgroundLayout, new TextField(ImageBox.LayoutString()));
// imageProto.SetField(KeyStore.Layout, new TextField('<div style={"background-image: " + {Data}} />'));
imageProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data, KeyStore.Annotations]));
@@ -161,7 +161,7 @@ export namespace Documents {
collectionProto.Set(KeyStore.PanY, new NumberField(0));
collectionProto.Set(KeyStore.Width, new NumberField(300));
collectionProto.Set(KeyStore.Height, new NumberField(300));
- collectionProto.Set(KeyStore.Layout, new TextField(CollectionFreeFormView.LayoutString()));
+ collectionProto.Set(KeyStore.Layout, new TextField(CollectionFreeFormView.LayoutString("DataKey")));
collectionProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
}
return collectionProto;
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index b58704264..ba92cc17e 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -40,7 +40,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
//runInAction(() =>
{
- let doc1 = Documents.TextDocument({ title: "hello" });
+ let doc1 = Documents.TextDocument({ title: "hello", width: 400, height: 300 });
let doc2 = doc1.MakeDelegate();
doc2.Set(KS.X, new NumberField(150));
doc2.Set(KS.Y, new NumberField(20));
@@ -62,7 +62,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
// let doc5 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
// x: 650, y: 500, width: 600, height: 600, title: "cat 2"
// });
- let docset2 = [doc4, doc1, doc3];
+ let docset2 = [doc3, doc1, doc2];
let doc6 = Documents.CollectionDocument(docset2, {
x: 350, y: 100, width: 600, height: 600, title: "docking collection"
});
@@ -76,7 +76,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
mainNodes.Data.push(doc3);
// mainNodes.Data.push(doc5);
// mainNodes.Data.push(doc1);
- //mainNodes.Data.push(doc2);
+ // mainNodes.Data.push(doc2);
mainNodes.Data.push(doc6);
mainContainer.Set(KeyStore.Data, mainNodes);
}
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index e3d50eb80..d3e90d11c 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -2,7 +2,7 @@ import FlexLayout from "flexlayout-react";
import * as GoldenLayout from "golden-layout";
import 'golden-layout/src/css/goldenlayout-base.css';
import 'golden-layout/src/css/goldenlayout-dark-theme.css';
-import { action, computed } from "mobx";
+import { action, computed, reaction, observable } from "mobx";
import { observer } from "mobx-react";
import * as ReactDOM from 'react-dom';
import { Document } from "../../../fields/Document";
@@ -44,7 +44,7 @@ export class CollectionDockingView extends CollectionViewBase {
const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
const value: Document[] = Document.GetData(fieldKey, ListField, []);
var docs = value.map(doc => {
- return { type: 'component', componentName: 'documentViewComponent', componentState: { doc: doc } };
+ return { type: 'component', componentName: 'documentViewComponent', componentState: { doc: doc, scaling: 1 } };
});
return new GoldenLayout({
settings: {
@@ -111,6 +111,7 @@ export class CollectionDockingView extends CollectionViewBase {
public static myLayout: any = null;
+ public rcs: Array<RenderClass> = new Array();
private static _dragDiv: any = null;
private static _dragParent: HTMLElement | null = null;
private static _dragElement: HTMLDivElement;
@@ -119,7 +120,7 @@ export class CollectionDockingView extends CollectionViewBase {
var newItemConfig = {
type: 'component',
componentName: 'documentViewComponent',
- componentState: { doc: dragDoc }
+ componentState: { doc: dragDoc, scaling: 1 }
};
this._dragElement = dragElement;
this._dragParent = dragElement.parentElement;
@@ -160,7 +161,6 @@ export class CollectionDockingView extends CollectionViewBase {
CollectionDockingView.myLayout._maximizedStack = null;
}
}
-
//
// Creates a vertical split on the right side of the docking view, and then adds the Document to that split
//
@@ -241,21 +241,8 @@ export class CollectionDockingView extends CollectionViewBase {
var containingDiv = "component_" + me.nextId();
container.getElement().html("<div id='" + containingDiv + "'></div>");
setTimeout(function () {
- var htmlElement = document.getElementById(containingDiv);
- container.on('resize', (e: any) => {
- // state.doc.SetNumber(KeyStore.Width, htmlElement!.clientWidth);
- // if (htmlElement!.clientHeight > 0)
- // state.doc.SetNumber(KeyStore.Height, htmlElement!.clientHeight);
- })
- ReactDOM.render((
- <DocumentView key={state.doc.Id} Document={state.doc}
- AddDocument={me.addDocument} RemoveDocument={me.removeDocument}
- GetTransform={() => Transform.Identity}
- Scaling={1}
- ContainingCollectionView={me} DocumentView={undefined} />
- ),
- htmlElement
- );
+ state.rc = new RenderClass(containingDiv, state.doc, me, container);
+ me.rcs.push(state.rc);
if (CollectionDockingView.myLayout._maxstack != null) {
CollectionDockingView.myLayout._maxstack.click();
}
@@ -294,4 +281,42 @@ export class CollectionDockingView extends CollectionViewBase {
</div>
);
}
+}
+
+class RenderClass {
+
+ @observable _resizeCount: number = 0;
+
+ _collectionDockingView: CollectionDockingView;
+ _htmlElement: any;
+ _document: Document;
+ constructor(containingDiv: string, doc: Document, me: CollectionDockingView, container: any) {
+ this._collectionDockingView = me;
+ 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();
+ }
+ render() {
+ var nativeWidth = this._document.GetNumber(KeyStore.NativeWidth, 0);
+ let scaling = 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}
+ ContainingCollectionView={this._collectionDockingView} DocumentView={undefined} />
+ ),
+ this._htmlElement
+ );
+ }
} \ No newline at end of file
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 977a03f58..15450d737 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -17,7 +17,7 @@ import { Transform } from "../../util/Transform";
@observer
export class CollectionFreeFormView extends CollectionViewBase {
- public static LayoutString() { return CollectionViewBase.LayoutString("CollectionFreeFormView"); }
+ public static LayoutString(fieldKey: string = "DataKey") { return CollectionViewBase.LayoutString("CollectionFreeFormView", fieldKey); }
private _containerRef = React.createRef<HTMLDivElement>();
private _canvasRef = React.createRef<HTMLDivElement>();
private _lastX: number = 0;
@@ -218,6 +218,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
const value: Document[] = Document.GetList<Document>(this.props.CollectionFieldKey, []);
const panx: number = Document.GetNumber(KeyStore.PanX, 0);
const pany: number = Document.GetNumber(KeyStore.PanY, 0);
+ var me = this;
return (
<div className="collectionfreeformview-container"
@@ -231,7 +232,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
}}
ref={this._containerRef}>
<div className="collectionfreeformview"
- style={{ width: "100%", transform: `translate(${panx}px, ${pany}px) scale(${this.zoomScaling}, ${this.zoomScaling})`, transformOrigin: `left, top` }}
+ style={{ width: "100%", transformOrigin: "left top", transform: ` translate(${panx}px, ${pany}px) scale(${this.zoomScaling}, ${this.zoomScaling})` }}
ref={this._canvasRef}>
{this.props.BackgroundView}
@@ -240,7 +241,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
AddDocument={this.addDocument}
RemoveDocument={this.removeDocument}
GetTransform={this.getTransform}
- Scaling={this.resizeScaling}
+ Scaling={1}
ContainingCollectionView={this} DocumentView={undefined} />);
})}
</div>
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 331c4f6fe..f1e882e20 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -27,7 +27,7 @@ export class CollectionSchemaView extends CollectionViewBase {
let props: FieldViewProps = {
doc: rowProps.value[0],
fieldKey: rowProps.value[1],
- DocumentViewForField: undefined
+ DocumentViewForField: undefined,
}
let contents = (
<FieldView {...props} />
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index eea7908ce..7e2fcb39d 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -19,6 +19,7 @@ export interface CollectionViewProps {
ContainingDocumentView: Opt<DocumentView>;
GetTransform: () => Transform;
BackgroundView: Opt<DocumentView>;
+ Scaling: number;
}
export const COLLECTION_BORDER_WIDTH = 2;
@@ -26,8 +27,8 @@ export const COLLECTION_BORDER_WIDTH = 2;
@observer
export class CollectionViewBase extends React.Component<CollectionViewProps> {
- public static LayoutString(collectionType: string) {
- return `<${collectionType} DocumentForCollection={Document} CollectionFieldKey={DataKey} ContainingDocumentView={DocumentView}/>`;
+ public static LayoutString(collectionType: string, fieldKey: string = "DataKey") {
+ return `<${collectionType} Scaling={Scaling} DocumentForCollection={Document} CollectionFieldKey={${fieldKey}} ContainingDocumentView={DocumentView} BackgroundView={BackgroundView} />`;
}
@computed
public get active(): boolean {
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 54d3a1b56..9cd42a069 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -238,7 +238,7 @@ export class CollectionFreeFormDocumentView extends DocumentView {
onContextMenu={this.onContextMenu}
onPointerDown={this.onPointerDown}>
- <DocumentView {...this.props} GetTransform={this.getTransform} DocumentView={this} />
+ <DocumentView {...this.props} Scaling={this.width / this.nativeWidth} GetTransform={this.getTransform} DocumentView={this} />
</div>
);
}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 691ac6311..3a73f2fde 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -115,7 +115,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
if (this.props.ContainingCollectionView instanceof CollectionDockingView) {
var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this.MainContent.current!);
Xx = rx - COLLECTION_BORDER_WIDTH;
- Yy = ry - COLLECTION_BORDER_WIDTH;
+ Yy = ry - COLLECTION_BORDER_WIDTH + 18 * Ss;
}
let W = COLLECTION_BORDER_WIDTH;
@@ -158,8 +158,13 @@ export class DocumentView extends React.Component<DocumentViewProps> {
onError={(test: any) => { console.log(test) }}
/>;
bindings["BackgroundView"] = this.backgroundLayout ? annotated : null;
+
+ var width = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
+ var strwidth = width > 0 ? width.toString() + "px" : "100%";
+ var height = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
+ var strheight = height > 0 ? height.toString() + "px" : "100%";
return (
- <div className="node" ref={this._mainCont} style={{ width: "100%", height: "100%", }}>
+ <div className="node" ref={this._mainCont} style={{ width: strwidth, height: strheight, transformOrigin: "left top", transform: `scale(${this.props.Scaling},${this.props.Scaling})` }}>
<JsxParser
components={{ FormattedTextBox: FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
bindings={bindings}
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 8f959762a..f6bd0c0f8 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -118,7 +118,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
return (<div className="formattedTextBox-cont"
style={{
color: "initial",
- whiteSpace: "initial"
+ whiteSpace: "initial",
}}
onPointerDown={this.onPointerDown}
ref={this._ref} />)
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 60be5f94d..2fa70734d 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -85,10 +85,11 @@ export class ImageBox extends React.Component<FieldViewProps> {
let field = this.props.doc.Get(this.props.fieldKey);
let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
field instanceof ImageField ? field.Data.href : "http://www.cs.brown.edu/~bcz/face.gif";
+ let nativeWidth = this.props.doc.GetNumber(KeyStore.NativeWidth, 1);
return (
<div className="imageBox-cont" onPointerDown={this.onPointerDown} ref={this._ref} >
- <img src={path} width="100%" alt="Image not found" />
+ <img src={path} width={nativeWidth} alt="Image not found" />
{this.lightbox(path)}
</div>)
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 21:45:59 +0000