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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
import { IconLookup, faAdd, faCalendarDays, faRoute } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { IconButton } from 'browndash-components';
import { IReactionDisposer, ObservableMap, reaction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { returnFalse } from '../../../../ClientUtils';
import { unimplementedFunction } from '../../../../Utils';
import { Doc, Opt } from '../../../../fields/Doc';
import { NumCast, StrCast } from '../../../../fields/Types';
import { SettingsManager } from '../../../util/SettingsManager';
import { AntimodeMenu, AntimodeMenuProps } from '../../AntimodeMenu';
import { DocumentView } from '../DocumentView';
@observer
export class DirectionsAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
// eslint-disable-next-line no-use-before-define
static Instance: DirectionsAnchorMenu;
private _disposer: IReactionDisposer | undefined;
public onMakeAnchor: () => Opt<Doc> = () => undefined; // Method to get anchor from text search
public Center: () => void = unimplementedFunction;
public OnClick: (e: PointerEvent) => void = unimplementedFunction;
// public OnAudio: (e: PointerEvent) => void = unimplementedFunction;
public StartDrag: (e: PointerEvent, ele: HTMLElement) => void = unimplementedFunction;
public Highlight: (color: string, isTargetToggler: boolean, savedAnnotations?: ObservableMap<number, HTMLDivElement[]>, addAsAnnotation?: boolean) => Opt<Doc> = () => undefined;
public GetAnchor: (savedAnnotations: Opt<ObservableMap<number, HTMLDivElement[]>>, addAsAnnotation: boolean) => Opt<Doc> = () => undefined;
public Delete: () => void = unimplementedFunction;
// public MakeTargetToggle: () => void = unimplementedFunction;
// public ShowTargetTrail: () => void = unimplementedFunction;
public IsTargetToggler: () => boolean = returnFalse;
private title: string | undefined = undefined;
public setPinDoc(pinDoc: Doc) {
this.title = StrCast(pinDoc.title ? pinDoc.title : `${NumCast(pinDoc.longitude)}, ${NumCast(pinDoc.latitude)}`);
console.log('Title: ', this.title);
}
public get Active() {
return this._left > 0;
}
constructor(props: Readonly<{}>) {
super(props);
DirectionsAnchorMenu.Instance = this;
DirectionsAnchorMenu.Instance._canFade = false;
}
componentWillUnmount() {
this._disposer?.();
}
componentDidMount() {
this._disposer = reaction(
() => DocumentView.Selected().slice(),
() => DirectionsAnchorMenu.Instance.fadeOut(true)
);
}
// audioDown = (e: React.PointerEvent) => {
// setupMoveUpEvents(this, e, returnFalse, returnFalse, e => this.OnAudio?.(e));
// };
// cropDown = (e: React.PointerEvent) => {
// setupMoveUpEvents(
// this,
// e,
// (e: PointerEvent) => {
// this.StartCropDrag(e, this._commentCont.current!);
// return true;
// },
// returnFalse,
// e => this.OnCrop?.(e)
// );
// };
// notePointerDown = (e: React.PointerEvent) => {
// setupMoveUpEvent(
// this,
// e,
// (e: PointerEvent) => {
// this.StartDrag(e, this._commentRef.current!);
// return true;
// },
// returnFalse,
// e => this.OnClick(e)
// );
// };
static top = React.createRef<HTMLDivElement>();
// public get Top(){
// return this.top
// }
render() {
const buttons = (
<div className="directions-menu-buttons" style={{ display: 'flex' }}>
<IconButton
tooltip="Add route" //
onPointerDown={this.Delete}
icon={<FontAwesomeIcon icon={faAdd as IconLookup} />}
color={SettingsManager.userColor}
/>
<IconButton tooltip="Animate route" onPointerDown={this.Delete} /* *TODO: fix */ icon={<FontAwesomeIcon icon={faRoute as IconLookup} />} color={SettingsManager.userColor} />
<IconButton tooltip="Add to calendar" onPointerDown={this.Delete} /* *TODO: fix */ icon={<FontAwesomeIcon icon={faCalendarDays as IconLookup} />} color={SettingsManager.userColor} />
</div>
);
return this.getElement(
<div ref={DirectionsAnchorMenu.top} style={{ height: 'max-content', width: '100%', display: 'flex', flexDirection: 'column' }}>
<div>{this.title}</div>
<div className="direction-inputs" style={{ display: 'flex', flexDirection: 'column' }}>
<input placeholder="Origin" />
<input placeholder="Destination" />
</div>
{buttons}
</div>
);
}
}
|
