1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
import { library } from '@fortawesome/fontawesome-svg-core';
import { faEdit } from '@fortawesome/free-regular-svg-icons';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc } from '../../../new_fields/Doc';
import { createSchema, makeInterface } from '../../../new_fields/Schema';
import { ScriptField } from '../../../new_fields/ScriptField';
import { emptyFunction } from '../../../Utils';
import { CompileScript } from '../../util/Scripting';
import { ContextMenu } from '../ContextMenu';
import { DocComponent } from '../DocComponent';
import { OverlayView } from '../OverlayView';
import { ScriptBox } from '../ScriptBox';
import { DocumentIconContainer } from './DocumentIcon';
import './DragBox.scss';
import { FieldView, FieldViewProps } from './FieldView';
import { DragManager } from '../../util/DragManager';
import { Docs } from '../../documents/Documents';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
library.add(faEdit as any);
const DragSchema = createSchema({
onDragStart: ScriptField,
text: "string"
});
type DragDocument = makeInterface<[typeof DragSchema]>;
const DragDocument = makeInterface(DragSchema);
@observer
export class DragBox extends DocComponent<FieldViewProps, DragDocument>(DragDocument) {
_downX: number = 0;
_downY: number = 0;
public static LayoutString() { return FieldView.LayoutString(DragBox); }
_mainCont = React.createRef<HTMLDivElement>();
onDragStart = (e: React.PointerEvent) => {
if (!e.ctrlKey && !e.altKey && !e.shiftKey && !this.props.isSelected() && e.button === 0) {
document.removeEventListener("pointermove", this.onDragMove);
document.addEventListener("pointermove", this.onDragMove);
document.removeEventListener("pointerup", this.onDragUp);
document.addEventListener("pointerup", this.onDragUp);
e.stopPropagation();
e.preventDefault();
}
}
onDragMove = async (e: MouseEvent) => {
if (!e.cancelBubble && (Math.abs(this._downX - e.clientX) > 5 || Math.abs(this._downY - e.clientY) > 5)) {
document.removeEventListener("pointermove", this.onDragMove);
document.removeEventListener("pointerup", this.onDragUp);
const onDragStart = this.Document.onDragStart;
e.stopPropagation();
e.preventDefault();
DragManager.StartDocumentDrag([this._mainCont.current!], new DragManager.DocumentDragData([this.props.Document]), e.clientX, e.clientY, {
finishDrag: async (dropData) => {
let res = onDragStart && onDragStart.script.run({ this: this.props.Document }).result;
let doc = (res as Doc) || Docs.Create.FreeformDocument([], { nativeWidth: undefined, nativeHeight: undefined, width: 150, height: 100, title: "freeform" });
dropData.droppedDocuments = [doc];
},
handlers: { dragComplete: emptyFunction },
hideSource: false
});
await this.props.Document.factory; // if there's a factory Doc that is being copied, make sure it's not pending.
}
e.stopPropagation();
e.preventDefault();
}
onDragUp = (e: MouseEvent) => {
document.removeEventListener("pointermove", this.onDragMove);
document.removeEventListener("pointerup", this.onDragUp);
}
onContextMenu = () => {
ContextMenu.Instance.addItem({
description: "Edit OnClick script", icon: "edit", event: () => {
let overlayDisposer: () => void = emptyFunction;
const script = this.Document.onDragStart;
let originalText: string | undefined = undefined;
if (script) originalText = script.script.originalScript;
// tslint:disable-next-line: no-unnecessary-callback-wrapper
let scriptingBox = <ScriptBox initialText={originalText} onCancel={() => overlayDisposer()} onSave={(text, onError) => {
const script = CompileScript(text, {
params: { this: Doc.name },
typecheck: false,
editable: true,
transformer: DocumentIconContainer.getTransformer()
});
if (!script.compiled) {
onError(script.errors.map(error => error.messageText).join("\n"));
return;
}
this.Document.onClick = new ScriptField(script);
overlayDisposer();
}} showDocumentIcons />;
overlayDisposer = OverlayView.Instance.addWindow(scriptingBox, { x: 400, y: 200, width: 500, height: 400, title: `${this.Document.title || ""} OnDragStart` });
}
});
}
render() {
return (<div className="dragBox-outerDiv" onContextMenu={this.onContextMenu} onPointerDown={this.onDragStart} ref={this._mainCont}>
<FontAwesomeIcon className="dragBox-icon" icon={this.props.Document.icon as any} size="lg" color="white" />
</div>);
}
}
|
