aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/collections/CollectionFreeFormView.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/collections/CollectionFreeFormView.tsx')
-rw-r--r--src/client/views/collections/CollectionFreeFormView.tsx65
1 files changed, 35 insertions, 30 deletions
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 9cf29d000..e6b1d103d 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -5,28 +5,25 @@ import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocum
import { DragManager } from "../../util/DragManager";
import "./CollectionFreeFormView.scss";
import { Utils } from "../../../Utils";
-import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
+import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
import { SelectionManager } from "../../util/SelectionManager";
-import { Key, KeyStore } from "../../../fields/Key";
+import { KeyStore } from "../../../fields/KeyStore";
import { Document } from "../../../fields/Document";
import { ListField } from "../../../fields/ListField";
import { NumberField } from "../../../fields/NumberField";
import { Documents } from "../../documents/Documents";
import { FieldWaiting } from "../../../fields/Field";
+import { FakeJsxArgs } from "../nodes/DocumentView";
+import { FieldView } from "../nodes/FieldView";
@observer
export class CollectionFreeFormView extends CollectionViewBase {
- public static LayoutString() { return CollectionViewBase.LayoutString("CollectionFreeFormView"); }
- private _containerRef = React.createRef<HTMLDivElement>();
+ public static LayoutString() { return FieldView.LayoutString(CollectionFreeFormView); }
private _canvasRef = React.createRef<HTMLDivElement>();
private _nodeContainerRef = React.createRef<HTMLDivElement>();
private _lastX: number = 0;
private _lastY: number = 0;
- constructor(props: CollectionViewProps) {
- super(props);
- }
-
@action
drop = (e: Event, de: DragManager.DropEvent) => {
const doc = de.data["document"];
@@ -39,7 +36,7 @@ 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))
+ let sscale = this.props.DocumentViewForField!.props.Document.GetData(KeyStore.Scale, NumberField, Number(1))
const screenX = de.x - xOffset;
const screenY = de.y - yOffset;
const docX = (screenX - translateX) / sscale / scale;
@@ -51,9 +48,13 @@ export class CollectionFreeFormView extends CollectionViewBase {
e.stopPropagation();
}
- componentDidMount() {
- if (this._containerRef.current) {
- DragManager.MakeDropTarget(this._containerRef.current, {
+ private dropDisposer?: DragManager.DragDropDisposer;
+ createDropTarget = (ele: HTMLDivElement) => {
+ if (this.dropDisposer) {
+ this.dropDisposer();
+ }
+ if (ele) {
+ this.dropDisposer = DragManager.MakeDropTarget(ele, {
handlers: {
drop: this.drop
}
@@ -88,11 +89,11 @@ export class CollectionFreeFormView extends CollectionViewBase {
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 currScale: number = this.props.DocumentViewForField!.ScalingToScreenSpace;
+ let x = this.props.doc.GetData(KeyStore.PanX, NumberField, Number(0));
+ let y = this.props.doc.GetData(KeyStore.PanY, NumberField, Number(0));
+ this.props.doc.SetData(KeyStore.PanX, x + (e.pageX - this._lastX) / currScale, NumberField);
+ this.props.doc.SetData(KeyStore.PanY, y + (e.pageY - this._lastY) / currScale, NumberField);
}
this._lastX = e.pageX;
this._lastY = e.pageY;
@@ -102,7 +103,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
onPointerWheel = (e: React.WheelEvent): void => {
e.stopPropagation();
- let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.ContainingDocumentView!.TransformToLocalPoint(e.pageX, e.pageY);
+ let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.DocumentViewForField!.TransformToLocalPoint(e.pageX, e.pageY);
var deltaScale = (1 - (e.deltaY / 1000)) * Ss;
@@ -112,9 +113,9 @@ export class CollectionFreeFormView extends CollectionViewBase {
let dx = ContainerX - newContainerX;
let dy = ContainerY - newContainerY;
- 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);
+ this.props.doc.Set(KeyStore.Scale, new NumberField(deltaScale));
+ this.props.doc.SetData(KeyStore.PanX, Panxx + dx, NumberField);
+ this.props.doc.SetData(KeyStore.PanY, Panyy + dy, NumberField);
}
@action
@@ -124,8 +125,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
let fReader = new FileReader()
let file = e.dataTransfer.items[0].getAsFile();
let that = this;
- const panx: number = this.props.DocumentForCollection.GetData(KeyStore.PanX, NumberField, Number(0));
- const pany: number = this.props.DocumentForCollection.GetData(KeyStore.PanY, NumberField, Number(0));
+ const panx: number = this.props.doc.GetData(KeyStore.PanX, NumberField, Number(0));
+ const pany: number = this.props.doc.GetData(KeyStore.PanY, NumberField, Number(0));
let x = e.pageX - panx
let y = e.pageY - pany
@@ -135,11 +136,11 @@ export class CollectionFreeFormView extends CollectionViewBase {
let doc = Documents.ImageDocument(url, {
x: x, y: y
})
- let docs = that.props.DocumentForCollection.GetT(KeyStore.Data, ListField);
+ let docs = that.props.doc.GetT(KeyStore.Data, ListField);
if (docs != FieldWaiting) {
if (!docs) {
docs = new ListField<Document>();
- that.props.DocumentForCollection.Set(KeyStore.Data, docs)
+ that.props.doc.Set(KeyStore.Data, docs)
}
docs.Data.push(doc);
}
@@ -156,7 +157,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
@action
bringToFront(doc: CollectionFreeFormDocumentView) {
- const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
+ const { fieldKey: fieldKey, doc: Document } = this.props;
const value: Document[] = Document.GetList<Document>(fieldKey, []);
var topmost = value.reduce((topmost, d) => Math.max(d.GetNumber(KeyStore.ZIndex, 0), topmost), -1000);
@@ -173,8 +174,12 @@ export class CollectionFreeFormView extends CollectionViewBase {
}
render() {
- const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
- const value: Document[] = Document.GetList<Document>(fieldKey, []);
+ const { fieldKey: fieldKey, doc: Document } = this.props;
+ // const value: Document[] = Document.GetList<Document>(fieldKey, []);
+ const lvalue = Document.GetT<ListField<Document>>(fieldKey, ListField);
+ if (!lvalue || lvalue === "<Waiting>") {
+ return <p>Error loading collection data</p>
+ }
const panx: number = Document.GetNumber(KeyStore.PanX, 0);
const pany: number = Document.GetNumber(KeyStore.PanY, 0);
const currScale: number = Document.GetNumber(KeyStore.Scale, 1);
@@ -189,11 +194,11 @@ export class CollectionFreeFormView extends CollectionViewBase {
onContextMenu={(e) => e.preventDefault()}
onDrop={this.onDrop}
onDragOver={this.onDragOver}
- ref={this._containerRef}>
+ ref={this.createDropTarget}>
<div className="collectionfreeformview" style={{ transform: `translate(${panx}px, ${pany}px) scale(${currScale}, ${currScale})`, transformOrigin: `left, top` }} ref={this._canvasRef}>
<div className="node-container" ref={this._nodeContainerRef}>
- {value.map(doc => {
+ {lvalue.Data.map(doc => {
return (<CollectionFreeFormDocumentView key={doc.Id} ContainingCollectionView={this} Document={doc} DocumentView={undefined} />);
})}
</div>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-27 13:15:33 +0000