aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes')
-rw-r--r--src/client/views/nodes/CollectionFreeFormDocumentView.tsx42
-rw-r--r--src/client/views/nodes/DocumentView.scss (renamed from src/client/views/nodes/NodeView.scss)2
-rw-r--r--src/client/views/nodes/DocumentView.tsx29
-rw-r--r--src/client/views/nodes/FormattedTextBox.scss2
-rw-r--r--src/client/views/nodes/ImageBox.scss8
5 files changed, 35 insertions, 48 deletions
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index f10d8680f..57527076b 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -7,7 +7,7 @@ import { SelectionManager } from "../../util/SelectionManager";
import { CollectionDockingView } from "../collections/CollectionDockingView";
import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
import { ContextMenu } from "../ContextMenu";
-import "./NodeView.scss";
+import "./DocumentView.scss";
import React = require("react");
import { DocumentView, DocumentViewProps } from "./DocumentView";
import { Transform } from "../../util/Transform";
@@ -28,26 +28,8 @@ export class CollectionFreeFormDocumentView extends React.Component<DocumentView
}
@computed
- get x(): number {
- return this.props.Document.GetData(KeyStore.X, NumberField, Number(0));
- }
-
- @computed
- get y(): number {
- return this.props.Document.GetData(KeyStore.Y, NumberField, Number(0));
- }
-
- set x(x: number) {
- this.props.Document.SetData(KeyStore.X, x, NumberField)
- }
-
- set y(y: number) {
- this.props.Document.SetData(KeyStore.Y, y, NumberField)
- }
-
- @computed
get transform(): string {
- return `scale(${this.props.Scaling}, ${this.props.Scaling}) translate(${this.x}px, ${this.y}px)`;
+ 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)`;
}
@computed
@@ -85,7 +67,7 @@ export class CollectionFreeFormDocumentView extends React.Component<DocumentView
@computed
get zIndex(): number {
- return this.props.Document.GetData(KeyStore.ZIndex, NumberField, Number(0));
+ return this.props.Document.GetNumber(KeyStore.ZIndex, 0);
}
set zIndex(h: number) {
@@ -94,23 +76,23 @@ export class CollectionFreeFormDocumentView extends React.Component<DocumentView
getTransform = (): Transform => {
- return new Transform(-this.x, -this.y, 1).transform(this.props.GetTransform());
+ return this.props.ScreenToLocalTransform().translate(-this.props.Document.GetNumber(KeyStore.X, 0), -this.props.Document.GetNumber(KeyStore.Y, 0));
}
render() {
- var freestyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView;
+ var parentScaling = this.nativeWidth > 0 ? this.width / this.nativeWidth : 1;
return (
- <div className="node" ref={this._mainCont} style={{
+ <div ref={this._mainCont} style={{
transformOrigin: "left top",
- transform: freestyling ? this.transform : "",
- width: freestyling ? this.width : "100%",
- height: freestyling ? this.height : "100%",
- position: freestyling ? "absolute" : "relative",
- zIndex: freestyling ? this.zIndex : 0,
+ transform: this.transform,
+ width: this.width,
+ height: this.height,
+ position: "absolute",
+ zIndex: this.zIndex,
backgroundColor: "transparent"
}} >
- <DocumentView {...this.props} Scaling={this.width / this.nativeWidth} GetTransform={this.getTransform} />
+ <DocumentView {...this.props} Scaling={this.width / this.nativeWidth} ScreenToLocalTransform={this.getTransform} />
</div>
);
}
diff --git a/src/client/views/nodes/NodeView.scss b/src/client/views/nodes/DocumentView.scss
index 5615ecafd..5f7e6ff17 100644
--- a/src/client/views/nodes/NodeView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -1,4 +1,4 @@
-.node {
+.documentView-node {
position: absolute;
background: #cdcdcd;
overflow: hidden;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 8dc54f22a..9bd8c0288 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -5,8 +5,6 @@ import { Document } from "../../../fields/Document";
import { Opt, FieldWaiting } from "../../../fields/Field";
import { Key, KeyStore } from "../../../fields/Key";
import { ListField } from "../../../fields/ListField";
-import { NumberField } from "../../../fields/NumberField";
-import { TextField } from "../../../fields/TextField";
import { Utils } from "../../../Utils";
import { CollectionDockingView } from "../collections/CollectionDockingView";
import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
@@ -14,13 +12,14 @@ import { CollectionSchemaView } from "../collections/CollectionSchemaView";
import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "../collections/CollectionViewBase";
import { FormattedTextBox } from "../nodes/FormattedTextBox";
import { ImageBox } from "../nodes/ImageBox";
-import "./NodeView.scss";
+import "./DocumentView.scss";
import React = require("react");
import { Transform } from "../../util/Transform";
import { DocumentManager } from "../DocumentManager";
import { SelectionManager } from "../../util/SelectionManager";
import { DragManager } from "../../util/DragManager";
import { ContextMenu } from "../ContextMenu";
+import { TextField } from "../../../fields/TextField";
const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
export interface DocumentViewProps {
@@ -30,7 +29,7 @@ export interface DocumentViewProps {
Document: Document;
AddDocument?: (doc: Document) => void;
RemoveDocument?: (doc: Document) => boolean;
- GetTransform: () => Transform;
+ ScreenToLocalTransform: () => Transform;
isTopMost: boolean;
Scaling: number;
}
@@ -60,7 +59,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
}
@computed
get layout(): string {
- return this.props.Document.GetData(KeyStore.Layout, TextField, String("<p>Error loading layout data</p>"));
+ return this.props.Document.GetText(KeyStore.Layout, "<p>Error loading layout data</p>");
}
@computed
@@ -130,7 +129,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
this._contextMenuCanOpen = false;
if (this._mainCont.current != null && !this.topMost) {
this._contextMenuCanOpen = false;
- const [left, top] = this.props.GetTransform().inverse().transformPoint(0, 0);
+ const [left, top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
let dragData: { [id: string]: any } = {};
dragData["document"] = this;
dragData["xOffset"] = e.x - left;
@@ -251,7 +250,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
SelectionManager.SelectDoc(this, ctrlPressed)
}
-
render() {
let bindings = { ...this.props } as any;
bindings.isSelected = this.isSelected;
@@ -259,32 +257,33 @@ export class DocumentView extends React.Component<DocumentViewProps> {
for (const key of this.layoutKeys) {
bindings[key.Name + "Key"] = key; // this maps string values of the form <keyname>Key to an actual key Kestore.keyname e.g, "DataKey" => KeyStore.Data
}
- if (!bindings.GetTransform) {
- console.log("test");
- }
for (const key of this.layoutFields) {
let field = this.props.Document.Get(key);
bindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field;
}
- let annotated = null;
+ /*
+ Should this be moved to CollectionFreeformView or another component that renders
+ Document backgrounds (or contents based on a layout key, which could be used here as well)
+ that CollectionFreeformView uses? It seems like a lot for it to be here considering only one view currently uses it...
+ */
let backgroundLayout = this.backgroundLayout;
if (backgroundLayout) {
- annotated = <JsxParser
+ let backgroundView = () => (<JsxParser
components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
bindings={bindings}
jsx={this.backgroundLayout}
showWarnings={true}
onError={(test: any) => { console.log(test) }}
- />;
+ />);
+ bindings.BackgroundView = backgroundView;
}
- bindings.BackgroundView = annotated;
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={{ borderColor: this.Border, width: strwidth, height: strheight, transformOrigin: "left top", transform: `scale(${this.props.Scaling},${this.props.Scaling})` }}
+ <div className="documentView-node" ref={this._mainCont} style={{ borderColor: this.Border, width: strwidth, height: strheight, transformOrigin: "left top", transform: `scale(${this.props.Scaling},${this.props.Scaling})` }}
onContextMenu={this.onContextMenu}
onPointerDown={this.onPointerDown} >
<JsxParser
diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index 492367fce..5139d5d6b 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -9,6 +9,6 @@
}
.formattedTextBox-cont {
- background: white;
+ background: beige;
padding: 1vw;
} \ No newline at end of file
diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index 2bd8b1d3c..36f5e0fe0 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -2,7 +2,13 @@
.imageBox-cont {
padding: 0vw;
position: absolute;
- width: 100%
+ width: 100%;
+ max-width: 100%;
+ max-height: 100%
+}
+.imageBox-cont img {
+ max-width: 100%;
+ max-height: 100%
}
.imageBox-button {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-02-24 11:48:04 +0000