aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/.DS_Storebin10244 -> 10244 bytes
-rw-r--r--src/client/documents/DocumentTypes.ts1
-rw-r--r--src/client/documents/Documents.ts12
-rw-r--r--src/client/util/CurrentUserUtils.ts7
-rw-r--r--src/client/views/nodes/DiagramBox.tsx86
-rw-r--r--src/client/views/nodes/DocumentContentsView.tsx2
6 files changed, 106 insertions, 2 deletions
diff --git a/src/.DS_Store b/src/.DS_Store
index bb607fbc3..e1d584ba0 100644
--- a/src/.DS_Store
+++ b/src/.DS_Store
Binary files differ
diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts
index 1123bcac9..570d2e9c8 100644
--- a/src/client/documents/DocumentTypes.ts
+++ b/src/client/documents/DocumentTypes.ts
@@ -12,6 +12,7 @@ export enum DocumentType {
REC = 'recording',
PDF = 'pdf',
INK = 'ink',
+ DIAGRAM='diagram',
SCREENSHOT = 'screenshot',
FONTICON = 'fonticonbox',
SEARCH = 'search', // search query
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 2d2f5fe4a..ade5e718c 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -55,6 +55,7 @@ import { TaskCompletionBox } from '../views/nodes/TaskCompletedBox';
import { PresBox } from '../views/nodes/trails/PresBox';
import { PresElementBox } from '../views/nodes/trails/PresElementBox';
import { VideoBox } from '../views/nodes/VideoBox';
+import { DiagramBox } from '../views/nodes/DiagramBox';
import { WebBox } from '../views/nodes/WebBox';
import { SearchBox } from '../views/search/SearchBox';
import { CollectionViewType, DocumentType } from './DocumentTypes';
@@ -659,6 +660,13 @@ export namespace Docs {
},
],
[
+ DocumentType.DIAGRAM,
+ {
+ layout: { view: DiagramBox, dataField: defaultDataKey },
+ options: { _height: 300, _layout_fitWidth: true, layout_nativeDimEditable: true, layout_reflowVertical: true, waitForDoubleClickToClick: 'always', systemIcon: 'BsGlobe' },
+ },
+ ],
+ [
DocumentType.BUTTON,
{
layout: { view: LabelBox, dataField: 'onClick' },
@@ -1025,7 +1033,9 @@ export namespace Docs {
export function ComparisonDocument(options: DocumentOptions = { title: 'Comparison Box' }) {
return InstanceFromProto(Prototypes.get(DocumentType.COMPARISON), undefined, options);
}
-
+ export function DiagramDocument(options: DocumentOptions = { title: 'bruh box' }) {
+ return InstanceFromProto(Prototypes.get(DocumentType.DIAGRAM), undefined, options);
+ }
export function AudioDocument(url: string, options: DocumentOptions = {}, overwriteDoc?: Doc) {
return InstanceFromProto(Prototypes.get(DocumentType.AUDIO), new AudioField(url), options, undefined, undefined, undefined, overwriteDoc);
}
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index d61a40ffa..8275ec6b8 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -248,6 +248,7 @@ export class CurrentUserUtils {
{key: "Collection", creator: opts => Docs.Create.FreeformDocument([], opts), opts: { _width: 150, _height: 100, _layout_fitWidth: true }},
{key: "Webpage", creator: opts => Docs.Create.WebDocument("",opts), opts: { _width: 400, _height: 512, _nativeWidth: 850, data_useCors: true, }},
{key: "Comparison", creator: Docs.Create.ComparisonDocument, opts: { _width: 300, _height: 300 }},
+ {key: "Diagram", creator: Docs.Create.DiagramDocument, opts: { _width: 300, _height: 300 }},
{key: "Audio", creator: opts => Docs.Create.AudioDocument(nullAudio, opts),opts: { _width: 200, _height: 100, }},
{key: "Map", creator: opts => Docs.Create.MapDocument([], opts), opts: { _width: 800, _height: 600, _layout_fitWidth: true, }},
{key: "Screengrab", creator: Docs.Create.ScreenshotDocument, opts: { _width: 400, _height: 200 }},
@@ -266,7 +267,10 @@ export class CurrentUserUtils {
}, funcs: {title: 'this.text?.Text'}},
];
- emptyThings.forEach(thing => DocUtils.AssignDocField(doc, "empty"+thing.key, (opts) => thing.creator(opts), {...standardOps(thing.key), ...thing.opts}, undefined, thing.scripts, thing.funcs));
+ emptyThings.forEach(
+ thing =>{ DocUtils.AssignDocField(doc, "empty"+thing.key, (opts) => thing.creator(opts), {...standardOps(thing.key), ...thing.opts}, undefined, thing.scripts, thing.funcs);
+ console.log(thing.key)
+ });
return [
{ toolTip: "Tap or drag to create a note", title: "Note", icon: "sticky-note", dragFactory: doc.emptyNote as Doc, clickFactory: DocCast(doc.emptyNote)},
@@ -277,6 +281,7 @@ export class CurrentUserUtils {
{ toolTip: "Tap or drag to create a collection", title: "Col", icon: "folder", dragFactory: doc.emptyCollection as Doc, clickFactory: DocCast(doc.emptyTab)},
{ toolTip: "Tap or drag to create a webpage", title: "Web", icon: "globe-asia", dragFactory: doc.emptyWebpage as Doc, clickFactory: DocCast(doc.emptyWebpage)},
{ toolTip: "Tap or drag to create a comparison box", title: "Compare", icon: "columns", dragFactory: doc.emptyComparison as Doc, clickFactory: DocCast(doc.emptyComparison)},
+ { toolTip: "Tap or drag to create a diagram", title: "Diagram", icon: "circle", dragFactory: doc.emptyDiagram as Doc, clickFactory: DocCast(doc.emptyDiagram)},
{ toolTip: "Tap or drag to create an audio recorder", title: "Audio", icon: "microphone", dragFactory: doc.emptyAudio as Doc, clickFactory: DocCast(doc.emptyAudio), openFactoryLocation: OpenWhere.overlay},
{ toolTip: "Tap or drag to create a map", title: "Map", icon: "map-marker-alt", dragFactory: doc.emptyMap as Doc, clickFactory: DocCast(doc.emptyMap)},
{ toolTip: "Tap or drag to create a screen grabber", title: "Grab", icon: "photo-video", dragFactory: doc.emptyScreengrab as Doc, clickFactory: DocCast(doc.emptyScreengrab), openFactoryLocation: OpenWhere.overlay, funcs: { hidden: "IsNoviceMode()"}},
diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
new file mode 100644
index 000000000..e2af0b670
--- /dev/null
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -0,0 +1,86 @@
+import { action, computed, makeObservable, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { emptyFunction, setupMoveUpEvents } from '../../../Utils';
+import { Doc, Opt } from '../../../fields/Doc';
+import { DocCast, NumCast, StrCast } from '../../../fields/Types';
+import { Docs } from '../../documents/Documents';
+import { DragManager } from '../../util/DragManager';
+import { undoBatch } from '../../util/UndoManager';
+import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../DocComponent';
+import { StyleProp } from '../StyleProvider';
+import './ComparisonBox.scss';
+import { FieldView, FieldViewProps } from './FieldView';
+import { PinProps, PresBox } from './trails';
+import mermaid from 'mermaid';
+
+interface MermaidProps {
+ chart: String;
+ }
+
+class Mermaid extends React.Component<MermaidProps> {
+ componentDidMount() {
+ mermaid.contentLoaded();
+ }
+ render() {
+ return <div className="mermaid">{this.props.chart}</div>;
+ }
+ }
+
+@observer
+export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface {
+
+ public static LayoutString(fieldKey: string) {
+ return FieldView.LayoutString(DiagramBox, fieldKey);
+ }
+ constructor(props: FieldViewProps) {
+ super(props);
+ makeObservable(this);
+ mermaid.initialize({ startOnLoad: true });
+ }
+
+ @observable _animating = '';
+
+ @computed get clipWidth() {
+ return NumCast(this.layoutDoc[this.clipWidthKey], 50);
+ }
+ get clipWidthKey() {
+ return '_' + this._props.fieldKey + '_clipWidth';
+ }
+
+ componentDidMount() {
+ this._props.setContentViewBox?.(this);
+ }
+ getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => {
+ const anchor = Docs.Create.ConfigDocument({
+ title: 'CompareAnchor:' + this.Document.title,
+ // set presentation timing properties for restoring view
+ presentation_transition: 1000,
+ annotationOn: this.Document,
+ });
+ if (anchor) {
+ if (!addAsAnnotation) anchor.backgroundColor = 'transparent';
+ /* addAsAnnotation &&*/ this.addDocument(anchor);
+ PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), clippable: true } }, this.Document);
+ return anchor;
+ }
+ return this.Document;
+ };
+ docStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string): any => {
+ if (property === StyleProp.PointerEvents) return 'none';
+ return this._props.styleProvider?.(doc, props, property);
+ };
+ _closeRef = React.createRef<HTMLDivElement>();
+ render() {
+ return (
+ <div>
+ <Mermaid chart={`
+ graph LR;
+ A-->B;
+ B-->C;
+ B-->D[hi];
+ `}/>
+ </div>
+ );
+ }
+}
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 07e179246..040c8364d 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -23,6 +23,7 @@ import { DashWebRTCVideo } from '../webcam/DashWebRTCVideo';
import { YoutubeBox } from './../../apis/youtube/YoutubeBox';
import { AudioBox } from './AudioBox';
import { ComparisonBox } from './ComparisonBox';
+import { DiagramBox } from './DiagramBox';
import { DataVizBox } from './DataVizBox/DataVizBox';
import './DocumentView.scss';
import { EquationBox } from './EquationBox';
@@ -263,6 +264,7 @@ export class DocumentContentsView extends ObservableReactComponent<DocumentConte
DataVizBox,
HTMLtag,
ComparisonBox,
+ DiagramBox,
LoadingBox,
PhysicsSimulationBox,
SchemaRowBox,
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 22:13:00 +0000