aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/documents/Documents.ts11
-rw-r--r--src/client/views/MainView.tsx5
-rw-r--r--src/client/views/collections/CollectionStackingView.tsx2
-rw-r--r--src/client/views/nodes/DocumentContentsView.tsx3
-rw-r--r--src/client/views/nodes/DragBox.scss13
-rw-r--r--src/client/views/nodes/DragBox.tsx80
6 files changed, 110 insertions, 4 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 7dd853156..9c8b6c129 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -17,6 +17,7 @@ export enum DocumentType {
TEMPLATE = "template",
EXTENSION = "extension",
YOUTUBE = "youtube",
+ DRAGBOX = "dragbox",
}
import { HistogramField } from "../northstar/dash-fields/HistogramField";
@@ -60,6 +61,7 @@ import { DocumentManager } from "../util/DocumentManager";
import DirectoryImportBox from "../util/Import & Export/DirectoryImportBox";
import { Scripting, CompileScript } from "../util/Scripting";
import { ButtonBox } from "../views/nodes/ButtonBox";
+import { DragBox } from "../views/nodes/DragBox";
import { SchemaHeaderField, RandomPastel } from "../../new_fields/SchemaHeaderField";
import { ComputedField } from "../../new_fields/ScriptField";
import { ProxyField } from "../../new_fields/Proxy";
@@ -177,6 +179,10 @@ export namespace Docs {
}],
[DocumentType.BUTTON, {
layout: { view: ButtonBox },
+ }],
+ [DocumentType.DRAGBOX, {
+ layout: { view: DragBox },
+ options: { width: 40, height: 40 },
}]
]);
@@ -442,6 +448,11 @@ export namespace Docs {
return InstanceFromProto(Prototypes.get(DocumentType.BUTTON), undefined, { ...(options || {}) });
}
+
+ export function DragboxDocument(options?: DocumentOptions) {
+ return InstanceFromProto(Prototypes.get(DocumentType.DRAGBOX), undefined, { ...(options || {}) });
+ }
+
export function DockDocument(documents: Array<Doc>, config: string, options: DocumentOptions, id?: string) {
return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, viewType: CollectionViewType.Docking, dockingConfig: config }, id);
}
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index ddb023aca..a4db753ab 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -446,7 +446,7 @@ export class MainView extends React.Component {
//let addTreeNode = action(() => Docs.TreeDocument([CurrentUserUtils.UserDocument], { width: 250, height: 400, title: "Library:" + CurrentUserUtils.email, dropAction: "alias" }));
// let addTreeNode = action(() => Docs.TreeDocument(this._northstarSchemas, { width: 250, height: 400, title: "northstar schemas", dropAction: "copy" }));
let addColNode = action(() => Docs.Create.FreeformDocument([], { width: this.pwidth * .7, height: this.pheight, title: "a freeform collection" }));
- let addTreeNode = action(() => CurrentUserUtils.UserDocument);
+ let addDragboxNode = action(() => Docs.Create.DragboxDocument({ width: 40, height: 40, title: "drag collection" }));
let addImageNode = action(() => Docs.Create.ImageDocument(imgurl, { width: 200, title: "an image of a cat" }));
let addButtonDocument = action(() => Docs.Create.ButtonDocument({ width: 150, height: 50, title: "Button" }));
let addImportCollectionNode = action(() => Docs.Create.DirectoryImportDocument({ title: "Directory Import", width: 400, height: 400 }));
@@ -458,7 +458,8 @@ export class MainView extends React.Component {
[React.createRef<HTMLDivElement>(), "bolt", "Add Button", addButtonDocument],
// [React.createRef<HTMLDivElement>(), "clone", "Add Docking Frame", addDockingNode],
[React.createRef<HTMLDivElement>(), "cloud-upload-alt", "Import Directory", addImportCollectionNode],
- [React.createRef<HTMLDivElement>(), "play", "Add Youtube Searcher", addYoutubeSearcher]
+ [React.createRef<HTMLDivElement>(), "play", "Add Youtube Searcher", addYoutubeSearcher],
+ [React.createRef<HTMLDivElement>(), "bolt", "Add Document Dragger", addDragboxNode]
];
if (!ClientUtils.RELEASE) btns.unshift([React.createRef<HTMLDivElement>(), "cat", "Add Cat Image", addImageNode]);
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 4a751c84c..112d64e3d 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -120,7 +120,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
DataDocument={dataDoc}
showOverlays={this.overlays}
renderDepth={this.props.renderDepth}
- fitToBox={true}
+ fitToBox={this.props.fitToBox}
width={width}
height={height}
getTransform={finalDxf}
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 396233551..6b7b239f0 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -11,6 +11,7 @@ import { DocumentViewProps } from "./DocumentView";
import "./DocumentView.scss";
import { FormattedTextBox } from "./FormattedTextBox";
import { ImageBox } from "./ImageBox";
+import { DragBox } from "./DragBox";
import { ButtonBox } from "./ButtonBox";
import { IconBox } from "./IconBox";
import { KeyValueBox } from "./KeyValueBox";
@@ -99,7 +100,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
if (this.props.renderDepth > 7) return (null);
if (!this.layout && (this.props.layoutKey !== "overlayLayout" || !this.templates.length)) return (null);
return <ObserverJsxParser
- components={{ FormattedTextBox, ImageBox, IconBox, DirectoryImportBox, ButtonBox, FieldView, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, CollectionVideoView, WebBox, KeyValueBox, PDFBox, VideoBox, AudioBox, HistogramBox, YoutubeBox }}
+ components={{ FormattedTextBox, ImageBox, IconBox, DirectoryImportBox, DragBox, ButtonBox, FieldView, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, CollectionVideoView, WebBox, KeyValueBox, PDFBox, VideoBox, AudioBox, HistogramBox, YoutubeBox }}
bindings={this.CreateBindings()}
jsx={this.finalLayout}
showWarnings={true}
diff --git a/src/client/views/nodes/DragBox.scss b/src/client/views/nodes/DragBox.scss
new file mode 100644
index 000000000..fbb9b9c1c
--- /dev/null
+++ b/src/client/views/nodes/DragBox.scss
@@ -0,0 +1,13 @@
+.dragBox-outerDiv {
+ width: 100%;
+ height: 100%;
+ pointer-events: all;
+ border-radius: inherit;
+ background: black;
+ border-radius: 100%;
+ svg {
+ margin:18%;
+ width:65% !important;
+ height:65%;
+ }
+}
diff --git a/src/client/views/nodes/DragBox.tsx b/src/client/views/nodes/DragBox.tsx
new file mode 100644
index 000000000..a1ad390f8
--- /dev/null
+++ b/src/client/views/nodes/DragBox.tsx
@@ -0,0 +1,80 @@
+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) {
+ 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()) {
+ const onDragStart = this.Document.onDragStart;
+ e.stopPropagation();
+ e.preventDefault();
+ let res = onDragStart ? onDragStart.script.run({ this: this.props.Document }) : undefined;
+ let doc = res !== undefined && res.success ?
+ res.result as Doc :
+ Docs.Create.FreeformDocument([], { nativeWidth: undefined, nativeHeight: undefined, width: 150, height: 100, title: "freeform" });
+ doc && DragManager.StartDocumentDrag([this._mainCont.current!], new DragManager.DocumentDragData([doc], [undefined]), e.clientX, e.clientY);
+ }
+ }
+
+ 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="folder" size="lg" color="white" />
+ </div>);
+ }
+} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-11 18:54:59 +0000