aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/Main.tsx4
-rw-r--r--src/documents/Documents.ts2
-rw-r--r--src/views/freeformcanvas/CollectionFreeFormView.tsx3
-rw-r--r--src/views/freeformcanvas/FreeFormCanvas.tsx2
-rw-r--r--src/views/nodes/DocumentView.tsx130
5 files changed, 75 insertions, 66 deletions
diff --git a/src/Main.tsx b/src/Main.tsx
index 7c132f179..5482314ae 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -23,12 +23,8 @@ ReactDOM.render((
<div>
<FreeFormCanvas store={mainNodeCollection} />
<DocumentDecorations />
- <button onClick={minus}>-</button>
</div>), document.getElementById('root'));
-function minus() {
-
-}
runInAction(() => {
let doc1 = Documents.TextDocument("Hello world");
let doc2 = doc1.MakeDelegate();
diff --git a/src/documents/Documents.ts b/src/documents/Documents.ts
index 084666b95..a2d2218af 100644
--- a/src/documents/Documents.ts
+++ b/src/documents/Documents.ts
@@ -56,7 +56,7 @@ export namespace Documents {
imageProto.SetField(KeyStore.Y, new NumberField(0));
imageProto.SetField(KeyStore.Width, new NumberField(300));
imageProto.SetField(KeyStore.Height, new NumberField(300));
- imageProto.SetField(KeyStore.Layout, new TextField('<img src={Data} alt="Image not found"/>'));
+ imageProto.SetField(KeyStore.Layout, new TextField('<img src={Data} draggable="false" width="100%" alt="Image not found"/>'));
// imageProto.SetField(KeyStore.Layout, new TextField('<div style={"background-image: " + {Data}} />'));
imageProto.SetField(KeyStore.LayoutFields, new ListField([KeyStore.Data]));
}
diff --git a/src/views/freeformcanvas/CollectionFreeFormView.tsx b/src/views/freeformcanvas/CollectionFreeFormView.tsx
index d9a88fcd3..e1aeff534 100644
--- a/src/views/freeformcanvas/CollectionFreeFormView.tsx
+++ b/src/views/freeformcanvas/CollectionFreeFormView.tsx
@@ -54,7 +54,6 @@ export class CollectionFreeFormView extends React.Component<IProps> {
@action
onPointerMove = (e: PointerEvent): void => {
- e.preventDefault();
e.stopPropagation();
if (!this._isPointerDown) {
return;
@@ -97,7 +96,7 @@ export class CollectionFreeFormView extends React.Component<IProps> {
<div className="collectionfreeformview" style={{ transform: `translate(${panx}px, ${pany}px)`, transformOrigin: '50% 50%' }}>
<div className="node-container">
{value.map(doc => {
- return (<DocumentView key={doc.Id} dvm={new DocumentViewModel(doc)} />);
+ return (<DocumentView key={doc.Id} dvm={doc} />);
})}
</div>
</div>
diff --git a/src/views/freeformcanvas/FreeFormCanvas.tsx b/src/views/freeformcanvas/FreeFormCanvas.tsx
index de5e88fa1..e051fd97c 100644
--- a/src/views/freeformcanvas/FreeFormCanvas.tsx
+++ b/src/views/freeformcanvas/FreeFormCanvas.tsx
@@ -80,7 +80,7 @@ export class FreeFormCanvas extends React.Component<IProps> {
<div className="freeformcanvas" style={{ transform: store.Transform, transformOrigin: '50% 50%' }}>
<div className="node-container">
{this.props.store.Docs.map(doc => {
- return (<DocumentView key={doc.Id} dvm={new DocumentViewModel(doc)} />);
+ return (<DocumentView key={doc.Id} dvm={doc} />);
})}
</div>
</div>
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index cdc20cdfe..648ea7f50 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -14,10 +14,56 @@ import { SelectionManager } from "../../util/SelectionManager";
import { DocumentDecorations } from "../../DocumentDecorations";
import { SSL_OP_DONT_INSERT_EMPTY_FRAGMENTS } from "constants";
import { DragManager } from "../../util/DragManager";
+import { Document } from "../../fields/Document";
const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
interface IProps {
- dvm: DocumentViewModel;
+ dvm: Document;
+}
+
+@observer
+class DocumentContents extends React.Component<IProps & {isSelected: () => boolean}> {
+
+ @computed
+ get layout(): string {
+ return this.props.dvm.GetFieldValue(KeyStore.Layout, TextField, String("<p>Error loading layout data</p>"));
+ }
+
+ @computed
+ get layoutKeys(): Key[] {
+ return this.props.dvm.GetFieldValue(KeyStore.LayoutKeys, ListField, new Array<Key>());
+ }
+
+ @computed
+ get layoutFields(): Key[] {
+ return this.props.dvm.GetFieldValue(KeyStore.LayoutFields, ListField, new Array<Key>());
+ }
+ render() {
+ let doc = this.props.dvm;
+ let bindings: any = {
+ doc: doc,
+ isSelected: this.props.isSelected
+ };
+ for (const key of this.layoutKeys) {
+ bindings[key.Name + "Key"] = key;
+ }
+ for (const key of this.layoutFields) {
+ let field = doc.GetField(key);
+ if (field) {
+ bindings[key.Name] = field.GetValue();
+ }
+ }
+ return <JsxParser
+ components={{ FieldTextBox, FreeFormCanvas, CollectionFreeFormView }}
+ bindings={bindings}
+ jsx={this.layout}
+ showWarnings={true}
+ onError={(test: any) => { console.log(test) }}
+ />
+
+
+ }
+
}
@observer
@@ -25,7 +71,7 @@ export class DocumentView extends React.Component<IProps> {
private _mainCont = React.createRef<HTMLDivElement>();
get screenRect(): ClientRect | DOMRect {
- if(this._mainCont.current) {
+ if (this._mainCont.current) {
return this._mainCont.current.getBoundingClientRect();
}
return new DOMRect();
@@ -33,20 +79,20 @@ export class DocumentView extends React.Component<IProps> {
@computed
get x(): number {
- return this.props.dvm.Doc.GetFieldValue(KeyStore.X, NumberField, Number(0));
+ return this.props.dvm.GetFieldValue(KeyStore.X, NumberField, Number(0));
}
@computed
get y(): number {
- return this.props.dvm.Doc.GetFieldValue(KeyStore.Y, NumberField, Number(0));
+ return this.props.dvm.GetFieldValue(KeyStore.Y, NumberField, Number(0));
}
set x(x: number) {
- this.props.dvm.Doc.SetFieldValue(KeyStore.X, x, NumberField)
+ this.props.dvm.SetFieldValue(KeyStore.X, x, NumberField)
}
set y(y: number) {
- this.props.dvm.Doc.SetFieldValue(KeyStore.Y, y, NumberField)
+ this.props.dvm.SetFieldValue(KeyStore.Y, y, NumberField)
}
@computed
@@ -56,35 +102,20 @@ export class DocumentView extends React.Component<IProps> {
@computed
get width(): number {
- return this.props.dvm.Doc.GetFieldValue(KeyStore.Width, NumberField, Number(0));
+ return this.props.dvm.GetFieldValue(KeyStore.Width, NumberField, Number(0));
}
set width(w: number) {
- this.props.dvm.Doc.SetFieldValue(KeyStore.Width, w, NumberField)
+ this.props.dvm.SetFieldValue(KeyStore.Width, w, NumberField)
}
@computed
get height(): number {
- return this.props.dvm.Doc.GetFieldValue(KeyStore.Height, NumberField, Number(0));
+ return this.props.dvm.GetFieldValue(KeyStore.Height, NumberField, Number(0));
}
set height(h: number) {
- this.props.dvm.Doc.SetFieldValue(KeyStore.Height, h, NumberField)
- }
-
- @computed
- get layout(): string {
- return this.props.dvm.Doc.GetFieldValue(KeyStore.Layout, TextField, String("<p>Error loading layout data</p>"));
- }
-
- @computed
- get layoutKeys(): Key[] {
- return this.props.dvm.Doc.GetFieldValue(KeyStore.LayoutKeys, ListField, new Array<Key>());
- }
-
- @computed
- get layoutFields(): Key[] {
- return this.props.dvm.Doc.GetFieldValue(KeyStore.LayoutFields, ListField, new Array<Key>());
+ this.props.dvm.SetFieldValue(KeyStore.Height, h, NumberField)
}
@computed
@@ -92,22 +123,26 @@ export class DocumentView extends React.Component<IProps> {
return SelectionManager.IsSelected(this)
}
+ isSelected = (): boolean => {
+ return this.selected
+ }
+
private _isPointerDown = false;
componentDidMount() {
- if(this._mainCont.current) {
- DragManager.MakeDraggable(this._mainCont.current, {
- buttons: 3,
- handlers: {
- dragComplete: () => {},
- dragStart: () => {}
- }
- })
- }
+ return;
+ // if(this._mainCont.current) {
+ // DragManager.MakeDraggable(this._mainCont.current, {
+ // buttons: 2,
+ // handlers: {
+ // dragComplete: () => {},
+ // dragStart: () => {}
+ // }
+ // })
+ // }
}
onPointerDown = (e: React.PointerEvent): void => {
- return;
e.stopPropagation();
if (e.button === 2) {
this._isPointerDown = true;
@@ -139,7 +174,7 @@ export class DocumentView extends React.Component<IProps> {
}
this.x += e.movementX;
this.y += e.movementY;
- DocumentDecorations.Instance.opacity = 0
+ //DocumentDecorations.Instance.opacity = 0
}
onDragStart = (e: React.DragEvent<HTMLDivElement>): void => {
@@ -150,21 +185,6 @@ export class DocumentView extends React.Component<IProps> {
}
render() {
- let doc = this.props.dvm.Doc;
- let bindings: any = {
- doc: doc,
- isSelected: () => this.selected
- };
- for (const key of this.layoutKeys) {
- bindings[key.Name + "Key"] = key;
- }
- for (const key of this.layoutFields) {
- let field = doc.GetField(key);
- if (field) {
- bindings[key.Name] = field.GetValue();
- }
- }
-
return (
<div className="node" ref={this._mainCont} style={{
transform: this.transform,
@@ -176,13 +196,7 @@ export class DocumentView extends React.Component<IProps> {
e.preventDefault()
}}
onPointerDown={this.onPointerDown}>
- <JsxParser
- components={{ FieldTextBox, FreeFormCanvas, CollectionFreeFormView }}
- bindings={bindings}
- jsx={this.layout}
- showWarnings={true}
- onError={(test: any) => { console.log(test) }}
- />
+ <DocumentContents dvm={this.props.dvm} isSelected={this.isSelected} />
</div>
);
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 19:14:10 +0000