aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/util/DragManager.ts26
-rw-r--r--src/views/freeformcanvas/CollectionFreeFormView.tsx65
-rw-r--r--src/views/nodes/DocumentView.tsx117
3 files changed, 102 insertions, 106 deletions
diff --git a/src/util/DragManager.ts b/src/util/DragManager.ts
index 89d994089..89cf45199 100644
--- a/src/util/DragManager.ts
+++ b/src/util/DragManager.ts
@@ -12,6 +12,8 @@ export namespace DragManager {
handlers: DragHandlers;
buttons: number;
+
+ hideSource: boolean | (() => boolean);
}
export interface DragDropDisposer {
@@ -24,11 +26,10 @@ export namespace DragManager {
cancel() { this._cancelled = true; };
- constructor(readonly x:number, readonly y:number, readonly data: { [id: string]: any }) { }
+ constructor(readonly x: number, readonly y: number, readonly data: { [id: string]: any }) { }
}
export class DragCompleteEvent {
-
}
export interface DragHandlers {
@@ -45,7 +46,7 @@ export namespace DragManager {
}
export interface DropHandlers {
- drop: (e:Event, de: DropEvent) => void;
+ drop: (e: Event, de: DropEvent) => void;
}
export function MakeDraggable(element: HTMLElement, options: DragOptions): DragDropDisposer {
@@ -126,6 +127,17 @@ export namespace DragManager {
dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`;
dragDiv.appendChild(dragElement);
+ let hideSource = false;
+ if (typeof options.hideSource === "boolean") {
+ hideSource = options.hideSource;
+ } else {
+ hideSource = options.hideSource();
+ }
+ const wasHidden = ele.hidden;
+ if (hideSource) {
+ ele.hidden = true;
+ }
+
const moveHandler = (e: PointerEvent) => {
e.stopPropagation();
e.preventDefault();
@@ -137,13 +149,16 @@ export namespace DragManager {
document.removeEventListener("pointermove", moveHandler, true);
document.removeEventListener("pointerup", upHandler);
FinishDrag(dragElement, e, options, dragData);
+ if (hideSource && !wasHidden) {
+ ele.hidden = false;
+ }
};
document.addEventListener("pointermove", moveHandler, true);
document.addEventListener("pointerup", upHandler);
}
- function FinishDrag(ele: HTMLElement, e: PointerEvent, options: DragOptions, dragData: { [index: string]: any }) {
- dragDiv.removeChild(ele);
+ function FinishDrag(dragEle: HTMLElement, e: PointerEvent, options: DragOptions, dragData: { [index: string]: any }) {
+ dragDiv.removeChild(dragEle);
const target = document.elementFromPoint(e.x, e.y);
if (!target) {
return;
@@ -156,5 +171,6 @@ export namespace DragManager {
data: dragData
}
}));
+ options.handlers.dragComplete({});
}
} \ No newline at end of file
diff --git a/src/views/freeformcanvas/CollectionFreeFormView.tsx b/src/views/freeformcanvas/CollectionFreeFormView.tsx
index 8215e27ac..f3ee2da23 100644
--- a/src/views/freeformcanvas/CollectionFreeFormView.tsx
+++ b/src/views/freeformcanvas/CollectionFreeFormView.tsx
@@ -24,7 +24,8 @@ interface IProps {
@observer
export class CollectionFreeFormView extends React.Component<IProps> {
- private _ref = React.createRef<HTMLDivElement>();
+ private _containerRef = React.createRef<HTMLDivElement>();
+ private _canvasRef = React.createRef<HTMLDivElement>();
constructor(props: IProps) {
super(props);
@@ -38,27 +39,36 @@ export class CollectionFreeFormView extends React.Component<IProps> {
return isSelected || childSelected || topMost;
}
+ drop = (e: Event, de: DragManager.DropEvent) => {
+ const ele = this._canvasRef.current;
+ if (!ele) {
+ return;
+ }
+ const doc = de.data["document"];
+ const xOffset = de.data["xOffset"] as number || 0;
+ const yOffset = de.data["yOffset"] as number || 0;
+ if (doc instanceof DocumentView) {
+ if (doc.props.ContainingCollectionView && doc.props.ContainingCollectionView !== this) {
+ doc.props.ContainingCollectionView.removeDocument(doc.props.Document);
+ this.addDocument(doc.props.Document);
+ }
+ const { scale, translateX, translateY } = Utils.GetScreenTransform(ele);
+ const screenX = de.x - xOffset;
+ const screenY = de.y - yOffset;
+ const docX = (screenX - translateX) / scale;
+ const docY = (screenY - translateY) / scale;
+ doc.x = docX;
+ doc.y = docY;
+ }
+ e.stopPropagation();
+
+ }
+
componentDidMount() {
- if (this._ref.current) {
- const ele = this._ref.current;
- DragManager.MakeDropTarget(this._ref.current, {
+ if (this._containerRef.current) {
+ DragManager.MakeDropTarget(this._containerRef.current, {
handlers: {
- drop: (e:Event, de: DragManager.DropEvent) => {
- const doc = de.data["document"];
- const xOffset = de.data["xOffset"] as number || 0;
- const yOffset = de.data["yOffset"] as number || 0;
- if (doc instanceof DocumentView) {
- const { scale, translateX, translateY } = Utils.GetScreenTransform(ele.children[0] as HTMLElement);
- console.log(`${scale} ${translateX} ${translateY}`)
- const screenX = de.x - xOffset;
- const screenY = de.y - yOffset;
- const docX = (screenX - translateX) / scale;
- const docY = (screenY - translateY) / scale;
- doc.x = docX;
- doc.y = docY;
- }
- e.stopPropagation();
- }
+ drop: this.drop
}
});
}
@@ -191,8 +201,16 @@ export class CollectionFreeFormView extends React.Component<IProps> {
}
@action
+ addDocument = (doc: Document): void => {
+ //TODO This won't create the field if it doesn't already exist
+ const value = this.props.Document.GetFieldValue(this.props.fieldKey, ListField, new Array<Document>())
+ value.push(doc);
+ }
+
+ @action
removeDocument = (doc: Document): void => {
- const value: Document[] = this.props.Document.GetFieldValue(this.props.fieldKey, ListField, [])
+ //TODO This won't create the field if it doesn't already exist
+ const value = this.props.Document.GetFieldValue(this.props.fieldKey, ListField, new Array<Document>())
if (value.indexOf(doc) !== -1) {
value.splice(value.indexOf(doc), 1)
@@ -202,7 +220,6 @@ export class CollectionFreeFormView extends React.Component<IProps> {
}
onDragOver = (e: React.DragEvent): void => {
- // console.log(e.dataTransfer)
}
render() {
const { fieldKey, Document: Document } = this.props;
@@ -221,8 +238,8 @@ export class CollectionFreeFormView extends React.Component<IProps> {
width: "100%",
height: "calc(100% - 4px)",
overflow: "hidden"
- }} onDrop={this.onDrop} onDragOver={this.onDragOver} ref={this._ref}>
- <div className="collectionfreeformview" style={{ transform: `translate(${panx}px, ${pany}px) scale(${currScale}, ${currScale})`, transformOrigin: `left, top` }}>
+ }} 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="node-container">
{value.map(doc => {
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index 05f0928fb..602d28d56 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -18,9 +18,9 @@ import { DragManager } from "../../util/DragManager";
const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
interface IProps {
- Document: Document;
- ContainingCollectionView: Opt<object>;
- ContainingDocumentView: Opt<DocumentView>
+ Document: Document;
+ ContainingCollectionView: Opt<CollectionFreeFormView>;
+ ContainingDocumentView: Opt<DocumentView>
}
@observer
@@ -42,7 +42,7 @@ class DocumentContents extends React.Component<IProps> {
}
render() {
let doc = this.props.Document;
- let bindings = {...this.props} as any;
+ let bindings = { ...this.props } as any;
for (const key of this.layoutKeys) {
bindings[key.Name + "Key"] = key;
}
@@ -69,10 +69,6 @@ class DocumentContents extends React.Component<IProps> {
export class DocumentView extends React.Component<IProps> {
private _mainCont = React.createRef<HTMLDivElement>();
private _contextMenuCanOpen = false;
- private _downX:number = 0;
- private _downY:number = 0;
- private _lastX:number = 0;
- private _lastY:number = 0;
get screenRect(): ClientRect | DOMRect {
if (this._mainCont.current) {
@@ -122,92 +118,59 @@ export class DocumentView extends React.Component<IProps> {
this.props.Document.SetFieldValue(KeyStore.Height, h, NumberField)
}
+ @action
+ dragStarted = (e: DragManager.DragStartEvent) => {
+ this._contextMenuCanOpen = false;
+ if (!this.props.ContainingCollectionView) {
+ e.cancel();
+ return;
+ }
+ const rect = this.screenRect;
+ e.data["document"] = this;
+ e.data["xOffset"] = e.x - rect.left;
+ e.data["yOffset"] = e.y - rect.top;
+ }
+
+ @action
+ dragComplete = (e: DragManager.DragCompleteEvent) => {
+ }
+
componentDidMount() {
- const that = this;
- if(this._mainCont.current) {
+ if (this._mainCont.current) {
DragManager.MakeDraggable(this._mainCont.current, {
buttons: 2,
handlers: {
- dragComplete: () => {},
- dragStart: (e: DragManager.DragStartEvent) => {
- if(!this.props.ContainingCollectionView) {
- e.cancel();
- return;
- }
- const rect = this.screenRect;
- e.data["document"] = this;
- e.data["xOffset"] = e.x - rect.left;
- e.data["yOffset"] = e.y - rect.top;
- }
- }
+ dragComplete: this.dragComplete,
+ dragStart: this.dragStarted
+ },
+ hideSource: true
})
}
}
@computed
- get active() : boolean {
- return SelectionManager.IsSelected(this) || (this.props.ContainingCollectionView instanceof CollectionFreeFormView && this.props.ContainingCollectionView.active);
+ get active(): boolean {
+ return SelectionManager.IsSelected(this) || (this.props.ContainingCollectionView !== undefined && this.props.ContainingCollectionView.active);
}
+ private _downX: number = 0;
+ private _downY: number = 0;
onPointerDown = (e: React.PointerEvent): void => {
- this._downX = e.pageX;
- this._downY = e.pageY;
- this._lastX = e.pageX;
- this._lastY = e.pageY;
+ e.stopPropagation();
+ this._downX = e.clientX;
+ this._downY = e.clientY;
this._contextMenuCanOpen = e.button == 2;
- // document.removeEventListener("pointermove", this.onPointerMove);
- // document.addEventListener("pointermove", this.onPointerMove);
- document.removeEventListener("pointerup", this.onPointerUp);
document.addEventListener("pointerup", this.onPointerUp);
}
onPointerUp = (e: PointerEvent): void => {
- document.removeEventListener("pointermove", this.onPointerMove);
- document.removeEventListener("pointerup", this.onPointerUp);
- if (!e.cancelBubble) {
- e.stopPropagation();
- e.preventDefault();
- DocumentDecorations.Instance.opacity = 1;
- if (this._downX == e.pageX && this._downY == e.pageY) {
- SelectionManager.SelectDoc(this, e.ctrlKey)
- }
- }
- }
-
- onPointerMove = (e: PointerEvent): void => {
- if (this.active && !e.cancelBubble) {
- e.stopPropagation();
- e.preventDefault();
- this._contextMenuCanOpen = false
- let me = this;
- var dx = e.pageX - this._lastX;
- var dy = e.pageY - this._lastY;
- this._lastX = e.pageX;
- this._lastY = e.pageY;
- let currScale:number = 1;
- if (me.props.ContainingDocumentView != undefined) {
- let pme = me.props.ContainingDocumentView!.props.Document;
- currScale = pme.GetFieldValue(KeyStore.Scale, NumberField, Number(0));
- if (me.props.ContainingDocumentView!.props.ContainingDocumentView != undefined) {
- let pme = me.props.ContainingDocumentView!.props.ContainingDocumentView!.props.Document;
- currScale *= pme.GetFieldValue(KeyStore.Scale, NumberField, Number(0));
- }
- }
- this.x += dx/currScale;
- this.y += dy/currScale;
- DocumentDecorations.Instance.opacity = 0;
+ document.removeEventListener("pointerup", this.onPointerUp)
+ e.stopPropagation();
+ if ((e.clientX - this._downX) == 0 && (e.clientY - this._downY) == 0) {
+ SelectionManager.SelectDoc(this, e.ctrlKey);
}
}
- onDragStart = (e: React.DragEvent<HTMLDivElement>): void => {
- if (this._mainCont.current !== null) {
- this._mainCont.current.style.opacity = "0";
- // e.dataTransfer.setDragImage()
- }
- }
-
- onClick = (e: React.MouseEvent): void => { }
-
deleteClicked = (e: React.MouseEvent): void => {
if (this.props.ContainingCollectionView instanceof CollectionFreeFormView) {
this.props.ContainingCollectionView.removeDocument(this.props.Document)
@@ -231,8 +194,9 @@ export class DocumentView extends React.Component<IProps> {
e.stopPropagation();
ContextMenu.Instance.clearItems();
- ContextMenu.Instance.addItem({description: "Delete", event: this.deleteClicked})
+ ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked })
ContextMenu.Instance.displayMenu(e.pageX, e.pageY)
+ SelectionManager.SelectDoc(this, e.ctrlKey);
}
}
@@ -244,8 +208,7 @@ export class DocumentView extends React.Component<IProps> {
height: this.height,
}}
onContextMenu={this.onContextMenu}
- onPointerDown={this.onPointerDown}
- onClick={this.onClick}>
+ onPointerDown={this.onPointerDown}>
<DocumentContents {...this.props} ContainingDocumentView={this} />
</div>
);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 22:27:03 +0000