aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/documents/Documents.ts19
-rw-r--r--src/client/views/DocumentDecorations.tsx6
-rw-r--r--src/client/views/Main.tsx15
-rw-r--r--src/client/views/collections/CollectionDockingView.tsx2
-rw-r--r--src/client/views/collections/CollectionFreeFormView.tsx79
-rw-r--r--src/client/views/collections/CollectionSchemaView.tsx13
-rw-r--r--src/client/views/collections/CollectionViewBase.tsx1
-rw-r--r--src/client/views/nodes/CollectionFreeFormDocumentView.tsx24
-rw-r--r--src/client/views/nodes/DocumentView.tsx20
-rw-r--r--src/client/views/nodes/ImageBox.scss1
-rw-r--r--src/client/views/nodes/ImageBox.tsx10
-rw-r--r--src/fields/Key.ts4
12 files changed, 141 insertions, 53 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 575112c85..7512d25cb 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -17,6 +17,8 @@ interface DocumentOptions {
y?: number;
width?: number;
height?: number;
+ nativeWidth?: number;
+ nativeHeight?: number;
title?: string;
}
@@ -34,6 +36,12 @@ export namespace Documents {
if (options.height) {
doc.SetData(KeyStore.Height, options.height, NumberField);
}
+ if (options.nativeWidth) {
+ doc.SetData(KeyStore.NativeWidth, options.nativeWidth, NumberField);
+ }
+ if (options.nativeHeight) {
+ doc.SetData(KeyStore.NativeHeight, options.nativeHeight, NumberField);
+ }
if (options.title) {
doc.SetData(KeyStore.Title, options.title, TextField);
}
@@ -115,11 +123,14 @@ export namespace Documents {
imageProto.Set(KeyStore.Title, new TextField("IMAGE PROTO"));
imageProto.Set(KeyStore.X, new NumberField(0));
imageProto.Set(KeyStore.Y, new NumberField(0));
+ imageProto.Set(KeyStore.NativeWidth, new NumberField(300));
+ 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(ImageBox.LayoutString()));
+ imageProto.Set(KeyStore.Layout, new TextField("<CollectionFreeFormView DocumentForCollection={Document} CollectionFieldKey={AnnotationsKey} BackgroundView={BackgroundView} ContainingDocumentView={DocumentView} />"));
+ 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]));
+ imageProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data, KeyStore.Annotations]));
Server.AddDocument(imageProto);
return imageProto;
}
@@ -130,6 +141,10 @@ export namespace Documents {
let doc = GetImagePrototype().MakeDelegate();
setupOptions(doc, options);
doc.Set(KeyStore.Data, new ImageField(new URL(url)));
+
+ let annotation = Documents.TextDocument({ title: "hello" });
+ Server.AddDocument(annotation);
+ doc.Set(KeyStore.Annotations, new ListField([annotation]));
Server.AddDocument(doc);
var sdoc = Server.GetField(doc.Id) as Document;
return sdoc;
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 8a94bff36..7efaa5533 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -111,8 +111,10 @@ export class DocumentDecorations extends React.Component {
let actualdH = Math.max(element.height + (dH * scale), 20);
element.x += dX * (actualdW - element.width);
element.y += dY * (actualdH - element.height);
- element.width = actualdW;
- element.height = actualdH;
+ if (Math.abs(dW) > Math.abs(dH))
+ element.width = actualdW;
+ else
+ element.height = actualdH;
}
})
}
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index ac6f1de00..b58704264 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -44,12 +44,12 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
let doc2 = doc1.MakeDelegate();
doc2.Set(KS.X, new NumberField(150));
doc2.Set(KS.Y, new NumberField(20));
- let doc3 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
- x: 450, y: 100, title: "cat 1"
+ let doc3 = Documents.ImageDocument("https://psmag.com/.image/t_share/MTMyNzc2NzM1MDY1MjgzMDM4/shutterstock_151341212jpg.jpg", {
+ x: 450, y: 100, title: "cat 1", width: 606, height: 386, nativeWidth: 606, nativeHeight: 386
});
- doc3.Set(KeyStore.Data, new ImageField);
- const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
- x: 50 + 100 * v, y: 50, width: 100, height: 100, title: "cat" + v
+ //doc3.Set(KeyStore.Data, new ImageField);
+ const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://psmag.com/.image/t_share/MTMyNzc2NzM1MDY1MjgzMDM4/shutterstock_151341212jpg.jpg", {
+ x: 50 + 100 * v, y: 50, width: 100, height: 100, title: "cat" + v, nativeWidth: 606, nativeHeight: 386
}));
schemaDocs[0].SetData(KS.Author, "Tyler", TextField);
schemaDocs[4].SetData(KS.Author, "Bob", TextField);
@@ -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 = new Array<Document>(doc4);//, doc1, doc3);
+ let docset2 = [doc4, doc1, doc3];
let doc6 = Documents.CollectionDocument(docset2, {
x: 350, y: 100, width: 600, height: 600, title: "docking collection"
});
@@ -77,7 +77,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
// mainNodes.Data.push(doc5);
// mainNodes.Data.push(doc1);
//mainNodes.Data.push(doc2);
- //mainNodes.Data.push(doc6);
+ mainNodes.Data.push(doc6);
mainContainer.Set(KeyStore.Data, mainNodes);
}
//}
@@ -87,6 +87,7 @@ ReactDOM.render((
<div style={{ position: "absolute", width: "100%", height: "100%" }}>
<DocumentView Document={mainContainer}
AddDocument={undefined} RemoveDocument={undefined} GetTransform={() => Transform.Identity}
+ Scaling={1}
ContainingCollectionView={undefined} DocumentView={undefined} />
<DocumentDecorations />
<ContextMenu />
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 32d00d41a..bef301eb5 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -99,6 +99,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}
ContainingCollectionView={this} DocumentView={undefined} />);
}
}
@@ -243,6 +244,7 @@ export class CollectionDockingView extends CollectionViewBase {
<DocumentView key={state.doc.Id} Document={state.doc}
AddDocument={me.addDocument} RemoveDocument={me.removeDocument}
GetTransform={() => Transform.Identity}
+ Scaling={1}
ContainingCollectionView={me} DocumentView={undefined} />
),
document.getElementById(containingDiv)
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 50f4f1892..e485c8e14 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -23,11 +23,27 @@ export class CollectionFreeFormView extends CollectionViewBase {
private _nodeContainerRef = React.createRef<HTMLDivElement>();
private _lastX: number = 0;
private _lastY: number = 0;
+ private _downX: number = 0;
+ private _downY: number = 0;
constructor(props: CollectionViewProps) {
super(props);
}
+ @computed
+ get isAnnotationOverlay() { return this.props.CollectionFieldKey == KeyStore.Annotations; }
+
+ @computed
+ get nativeWidth() { return this.props.DocumentForCollection.GetNumber(KeyStore.NativeWidth, 0); }
+ @computed
+ get nativeHeight() { return this.props.DocumentForCollection.GetNumber(KeyStore.NativeHeight, 0); }
+
+ @computed
+ get zoomScaling() { return this.props.DocumentForCollection.GetNumber(KeyStore.Scale, 1); }
+
+ @computed
+ get resizeScaling() { return this.isAnnotationOverlay ? this.props.DocumentForCollection.GetNumber(KeyStore.Width, 0) / this.nativeWidth : 1; }
+
@action
drop = (e: Event, de: DragManager.DropEvent) => {
const doc = de.data["document"];
@@ -39,14 +55,12 @@ export class CollectionFreeFormView extends CollectionViewBase {
}
const xOffset = de.data["xOffset"] as number || 0;
const yOffset = de.data["yOffset"] as number || 0;
- const { scale, translateX, translateY } = Utils.GetScreenTransform(this._canvasRef.current!);
- let sscale = this.props.ContainingDocumentView!.props.Document.GetData(KeyStore.Scale, NumberField, Number(1))
+ const { translateX, translateY } = Utils.GetScreenTransform(this._canvasRef.current!);
+ const currScale = this.resizeScaling * this.zoomScaling * this.props.ContainingDocumentView!.ScalingToScreenSpace;
const screenX = de.x - xOffset;
const screenY = de.y - yOffset;
- const docX = (screenX - translateX) / sscale / scale;
- const docY = (screenY - translateY) / sscale / scale;
- doc.x = docX;
- doc.y = docY;
+ doc.x = (screenX - translateX) / currScale;
+ doc.y = (screenY - translateY) / currScale;
this.bringToFront(doc);
}
e.stopPropagation();
@@ -70,8 +84,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
document.addEventListener("pointermove", this.onPointerMove);
document.removeEventListener("pointerup", this.onPointerUp);
document.addEventListener("pointerup", this.onPointerUp);
- this._lastX = e.pageX;
- this._lastY = e.pageY;
+ this._downX = this._lastX = e.pageX;
+ this._downY = this._lastY = e.pageY;
}
}
@@ -80,20 +94,23 @@ export class CollectionFreeFormView extends CollectionViewBase {
document.removeEventListener("pointermove", this.onPointerMove);
document.removeEventListener("pointerup", this.onPointerUp);
e.stopPropagation();
- SelectionManager.DeselectAll();
+ if (Math.abs(this._downX - e.clientX) < 3 && Math.abs(this._downY - e.clientY) < 3) {
+ if (!SelectionManager.IsSelected(this.props.ContainingDocumentView as CollectionFreeFormDocumentView)) {
+ SelectionManager.SelectDoc(this.props.ContainingDocumentView as CollectionFreeFormDocumentView, false);
+ }
+ }
}
@action
onPointerMove = (e: PointerEvent): void => {
- var me = this;
if (!e.cancelBubble && this.active) {
e.preventDefault();
e.stopPropagation();
let currScale: number = this.props.ContainingDocumentView!.ScalingToScreenSpace;
- let x = this.props.DocumentForCollection.GetData(KeyStore.PanX, NumberField, Number(0));
- let y = this.props.DocumentForCollection.GetData(KeyStore.PanY, NumberField, Number(0));
- this.props.DocumentForCollection.SetData(KeyStore.PanX, x + (e.pageX - this._lastX) / currScale, NumberField);
- this.props.DocumentForCollection.SetData(KeyStore.PanY, y + (e.pageY - this._lastY) / currScale, NumberField);
+ let x = this.props.DocumentForCollection.GetNumber(KeyStore.PanX, 0);
+ let y = this.props.DocumentForCollection.GetNumber(KeyStore.PanY, 0);
+
+ this.SetPan(x + (e.pageX - this._lastX) / currScale, y + (e.pageY - this._lastY) / currScale);
}
this._lastX = e.pageX;
this._lastY = e.pageY;
@@ -102,20 +119,27 @@ export class CollectionFreeFormView extends CollectionViewBase {
@action
onPointerWheel = (e: React.WheelEvent): void => {
e.stopPropagation();
+ e.preventDefault();
+ let modes = ['pixels', 'lines', 'page'];
+ let coefficient = 1000;
+ 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);
- var deltaScale = (1 - (e.deltaY / 1000)) * Ss;
-
- var newContainerX = LocalX * deltaScale + Panxx + Xx;
- var newContainerY = LocalY * deltaScale + Panyy + Yy;
+ var deltaScale = (1 - (e.deltaY / coefficient)) * Ss;
+ var newDeltaScale = this.isAnnotationOverlay ? Math.max(1, deltaScale) : deltaScale;
- let dx = ContainerX - newContainerX;
- let dy = ContainerY - newContainerY;
+ this.props.DocumentForCollection.SetNumber(KeyStore.Scale, newDeltaScale);
+ this.SetPan(ContainerX - (LocalX * newDeltaScale + Xx), ContainerY - (LocalY * newDeltaScale + Yy));
+ }
- this.props.DocumentForCollection.Set(KeyStore.Scale, new NumberField(deltaScale));
- this.props.DocumentForCollection.SetData(KeyStore.PanX, Panxx + dx, NumberField);
- this.props.DocumentForCollection.SetData(KeyStore.PanY, Panyy + dy, NumberField);
+ @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));
+ this.props.DocumentForCollection.SetNumber(KeyStore.PanX, this.isAnnotationOverlay ? newPanX : panX);
+ this.props.DocumentForCollection.SetNumber(KeyStore.PanY, this.isAnnotationOverlay ? newPanY : panY);
}
@action
@@ -191,11 +215,10 @@ export class CollectionFreeFormView extends CollectionViewBase {
}
render() {
- const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
- const value: Document[] = Document.GetList<Document>(fieldKey, []);
+ const Document: Document = this.props.DocumentForCollection;
+ 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);
- const currScale: number = Document.GetNumber(KeyStore.Scale, 1);
return (
<div className="border" style={{
@@ -208,14 +231,16 @@ export class CollectionFreeFormView extends CollectionViewBase {
onDrop={this.onDrop}
onDragOver={this.onDragOver}
ref={this._containerRef}>
- <div className="collectionfreeformview" style={{ transform: `translate(${panx}px, ${pany}px) scale(${currScale}, ${currScale})`, transformOrigin: `left, top` }} ref={this._canvasRef}>
+ <div className="collectionfreeformview" style={{ transform: `translate(${panx}px, ${pany}px) scale(${this.zoomScaling}, ${this.zoomScaling})`, transformOrigin: `left, top` }} ref={this._canvasRef}>
<div className="node-container" ref={this._nodeContainerRef}>
+ {this.props.BackgroundView}
{value.map(doc => {
return (<CollectionFreeFormDocumentView key={doc.Id} Document={doc}
AddDocument={this.addDocument}
RemoveDocument={this.removeDocument}
GetTransform={this.getTransform}
+ Scaling={this.resizeScaling}
ContainingCollectionView={this} DocumentView={undefined} />);
})}
</div>
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index b897fd481..331c4f6fe 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -87,10 +87,11 @@ export class CollectionSchemaView extends CollectionViewBase {
if (target.tagName == "SPAN" && target.className.includes("Resizer")) {
e.stopPropagation();
}
- if (e.button === 2 && this.active) {
- e.stopPropagation();
- e.preventDefault();
- } else {
+ // if (e.button === 2 && this.active) {
+ // e.stopPropagation();
+ // e.preventDefault();
+ // } else
+ {
if (e.buttons === 1 && this.active) {
e.stopPropagation();
}
@@ -108,6 +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}
DocumentView={undefined} ContainingCollectionView={this} />
)
} else {
@@ -123,7 +125,8 @@ export class CollectionSchemaView extends CollectionViewBase {
page={0}
showPagination={false}
style={{
- display: "inline-block"
+ display: "inline-block",
+ width: "100%"
}}
columns={columns.map(col => {
return (
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index ff54d88d7..eea7908ce 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -18,6 +18,7 @@ export interface CollectionViewProps {
DocumentForCollection: Document;
ContainingDocumentView: Opt<DocumentView>;
GetTransform: () => Transform;
+ BackgroundView: Opt<DocumentView>;
}
export const COLLECTION_BORDER_WIDTH = 2;
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 0defc8f1d..4641ea290 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -50,25 +50,40 @@ export class CollectionFreeFormDocumentView extends DocumentView {
@computed
get transform(): string {
- return `translate(${this.x}px, ${this.y}px)`;
+ return `scale(${this.props.Scaling}, ${this.props.Scaling}) translate(${this.x}px, ${this.y}px)`;
}
@computed
get width(): number {
- return this.props.Document.GetData(KeyStore.Width, NumberField, Number(0));
+ return this.props.Document.GetNumber(KeyStore.Width, 0);
+ }
+
+ @computed
+ get nativeWidth(): number {
+ return this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
}
set width(w: number) {
this.props.Document.SetData(KeyStore.Width, w, NumberField)
+ if (this.nativeWidth > 0 && this.nativeHeight > 0) {
+ this.props.Document.SetNumber(KeyStore.Height, this.nativeHeight / this.nativeWidth * w)
+ }
}
@computed
get height(): number {
- return this.props.Document.GetData(KeyStore.Height, NumberField, Number(0));
+ return this.props.Document.GetNumber(KeyStore.Height, 0);
+ }
+ @computed
+ get nativeHeight(): number {
+ return this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
}
set height(h: number) {
- this.props.Document.SetData(KeyStore.Height, h, NumberField)
+ this.props.Document.SetData(KeyStore.Height, h, NumberField);
+ if (this.nativeWidth > 0 && this.nativeHeight > 0) {
+ this.props.Document.SetNumber(KeyStore.Width, this.nativeWidth / this.nativeHeight * h)
+ }
}
@computed
@@ -213,6 +228,7 @@ export class CollectionFreeFormDocumentView extends DocumentView {
var freestyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView;
return (
<div className="node" ref={this._mainCont} style={{
+ transformOrigin: "left top",
transform: freestyling ? this.transform : "",
width: freestyling ? this.width : "100%",
height: freestyling ? this.height : "100%",
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index ce23a70a6..691ac6311 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -26,6 +26,7 @@ export interface DocumentViewProps {
AddDocument?: (doc: Document) => void;
RemoveDocument?: (doc: Document) => boolean;
GetTransform: () => Transform;
+ Scaling: number;
}
@observer
@@ -41,6 +42,11 @@ export class DocumentView extends React.Component<DocumentViewProps> {
}
@computed
+ get backgroundLayout(): string {
+ return this.props.Document.GetData(KeyStore.BackgroundLayout, TextField, String("<p>Error loading layout data</p>"));
+ }
+
+ @computed
get layoutKeys(): Key[] {
return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array<Key>());
}
@@ -57,7 +63,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
public get ScalingToScreenSpace(): number {
if (this.props.ContainingCollectionView != undefined &&
this.props.ContainingCollectionView.props.ContainingDocumentView != undefined) {
- let ss = this.props.ContainingCollectionView.props.DocumentForCollection.GetData(KeyStore.Scale, NumberField, Number(1));
+ let ss = this.props.ContainingCollectionView.props.DocumentForCollection.GetNumber(KeyStore.Scale, 1);
return this.props.ContainingCollectionView.props.ContainingDocumentView.ScalingToScreenSpace * ss;
}
return 1;
@@ -87,7 +93,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
Yy = ry - COLLECTION_BORDER_WIDTH;
}
- let Ss = this.props.Document.GetData(KeyStore.Scale, NumberField, Number(1));
+ let Ss = this.props.Document.GetNumber(KeyStore.Scale, 1);
let Panxx = this.props.Document.GetData(KeyStore.PanX, NumberField, Number(0));
let Panyy = this.props.Document.GetData(KeyStore.PanY, NumberField, Number(0));
let LocalX = (ContainerX - (Xx + Panxx)) / Ss;
@@ -121,7 +127,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
// first transform the local point into the parent collection's coordinate space.
let containingDocView = this.props.ContainingCollectionView != undefined ? this.props.ContainingCollectionView.props.ContainingDocumentView : undefined;
if (containingDocView != undefined) {
- let ss = containingDocView.props.Document.GetData(KeyStore.Scale, NumberField, Number(1));
+ let ss = containingDocView.props.Document.GetNumber(KeyStore.Scale, 1) * this.props.Scaling;
let panxx = containingDocView.props.Document.GetData(KeyStore.PanX, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
let panyy = containingDocView.props.Document.GetData(KeyStore.PanY, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
let { ScreenX, ScreenY } = containingDocView.TransformToScreenPoint(parentX, parentY, ss, panxx, panyy);
@@ -144,6 +150,14 @@ export class DocumentView extends React.Component<DocumentViewProps> {
if (bindings.DocumentView === undefined) {
bindings.DocumentView = this; // set the DocumentView to this if it hasn't already been set by a sub-class during its render method.
}
+ var annotated = <JsxParser
+ components={{ FormattedTextBox: FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
+ bindings={bindings}
+ jsx={this.backgroundLayout}
+ showWarnings={true}
+ onError={(test: any) => { console.log(test) }}
+ />;
+ bindings["BackgroundView"] = this.backgroundLayout ? annotated : null;
return (
<div className="node" ref={this._mainCont} style={{ width: "100%", height: "100%", }}>
<JsxParser
diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index 136fda1d0..83392311b 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -1,6 +1,7 @@
.imageBox-cont {
padding: 0vw;
+ position: absolute
}
.imageBox-button {
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index ab20f140c..b96e717ed 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -9,7 +9,8 @@ import { FieldViewProps, FieldView } from './FieldView';
import { CollectionFreeFormDocumentView } from './CollectionFreeFormDocumentView';
import { FieldWaiting } from '../../../fields/Field';
import { observer } from "mobx-react"
-import { observable, action } from 'mobx';
+import { observable, action, spy } from 'mobx';
+import { KeyStore } from '../../../fields/Key';
@observer
export class ImageBox extends React.Component<FieldViewProps> {
@@ -67,7 +68,9 @@ export class ImageBox extends React.Component<FieldViewProps> {
mainSrc={images[this._photoIndex]}
nextSrc={images[(this._photoIndex + 1) % images.length]}
prevSrc={images[(this._photoIndex + images.length - 1) % images.length]}
- onCloseRequest={() => this.setState({ isOpen: false })}
+ onCloseRequest={action(() =>
+ this._isOpen = false
+ )}
onMovePrevRequest={action(() =>
this._photoIndex = (this._photoIndex + images.length - 1) % images.length
)}
@@ -82,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 width = this.props.doc.GetNumber(KeyStore.Width, 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={width} alt="Image not found" />
{this.lightbox(path)}
</div>)
}
diff --git a/src/fields/Key.ts b/src/fields/Key.ts
index 993102613..8d92b89b6 100644
--- a/src/fields/Key.ts
+++ b/src/fields/Key.ts
@@ -42,11 +42,15 @@ export namespace KeyStore {
export const PanX = new Key("PanX");
export const PanY = new Key("PanY");
export const Scale = new Key("Scale");
+ export const NativeWidth = new Key("NativeWidth");
+ export const NativeHeight = new Key("NativeHeight");
export const Width = new Key("Width");
export const Height = new Key("Height");
export const ZIndex = new Key("ZIndex");
export const Data = new Key("Data");
+ export const Annotations = new Key("Annotations");
export const Layout = new Key("Layout");
+ export const BackgroundLayout = new Key("BackgroundLayout");
export const LayoutKeys = new Key("LayoutKeys");
export const LayoutFields = new Key("LayoutFields");
export const ColumnsKey = new Key("SchemaColumns");
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 21:24:53 +0000