aboutsummaryrefslogtreecommitdiff
path: root/src/client
diff options
context:
space:
mode:
Diffstat (limited to 'src/client')
-rw-r--r--src/client/DocServer.ts42
-rw-r--r--src/client/documents/Documents.ts7
-rw-r--r--src/client/util/CurrentUserUtils.ts4
-rw-r--r--src/client/util/DragManager.ts34
-rw-r--r--src/client/util/GroupManager.tsx7
-rw-r--r--src/client/util/Scripting.ts31
-rw-r--r--src/client/util/SharingManager.tsx2
-rw-r--r--src/client/views/InkTranscription.tsx700
-rw-r--r--src/client/views/InkingStroke.tsx4
-rw-r--r--src/client/views/MainView.tsx6
-rw-r--r--src/client/views/collections/CollectionCarousel3DView.tsx6
-rw-r--r--src/client/views/collections/TreeView.tsx39
-rw-r--r--src/client/views/nodes/DataVizBox/components/TableBox.tsx3
-rw-r--r--src/client/views/nodes/LinkAnchorBox.tsx10
14 files changed, 470 insertions, 425 deletions
diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts
index 353e11775..df92fe50e 100644
--- a/src/client/DocServer.ts
+++ b/src/client/DocServer.ts
@@ -7,6 +7,7 @@ import { HandleUpdate, Id, Parent } from '../fields/FieldSymbols';
import { ObjectField } from '../fields/ObjectField';
import { RefField } from '../fields/RefField';
import { DocCast, StrCast } from '../fields/Types';
+import { Socket } from '../../node_modules/socket.io/dist/index';
//import MobileInkOverlay from '../mobile/MobileInkOverlay';
import { emptyFunction, Utils } from '../Utils';
import { GestureContent, MessageStore, MobileDocumentUploadContent, MobileInkOverlayContent, UpdateMobileInkOverlayPositionContent, YoutubeQueryTypes } from './../server/Message';
@@ -76,7 +77,7 @@ export namespace DocServer {
json: true,
});
}
- export let _socket: SocketIOClient.Socket;
+ export let _socket: Socket;
// this client's distinct GUID created at initialization
let USER_ID: string;
// indicates whether or not a document is currently being udpated, and, if so, its id
@@ -189,20 +190,20 @@ export namespace DocServer {
Utils.AddServerHandler(_socket, MessageStore.DeleteFields, respondToDelete);
Utils.AddServerHandler(_socket, MessageStore.ConnectionTerminated, alertUser);
- // mobile ink overlay socket events to communicate between mobile view and desktop view
- _socket.addEventListener('receiveGesturePoints', (content: GestureContent) => {
- // MobileInkOverlay.Instance.drawStroke(content);
- });
- _socket.addEventListener('receiveOverlayTrigger', (content: MobileInkOverlayContent) => {
- //GestureOverlay.Instance.enableMobileInkOverlay(content);
- // MobileInkOverlay.Instance.initMobileInkOverlay(content);
- });
- _socket.addEventListener('receiveUpdateOverlayPosition', (content: UpdateMobileInkOverlayPositionContent) => {
- // MobileInkOverlay.Instance.updatePosition(content);
- });
- _socket.addEventListener('receiveMobileDocumentUpload', (content: MobileDocumentUploadContent) => {
- // MobileInkOverlay.Instance.uploadDocument(content);
- });
+ // // mobile ink overlay socket events to communicate between mobile view and desktop view
+ // _socket.addEventListener('receiveGesturePoints', (content: GestureContent) => {
+ // // MobileInkOverlay.Instance.drawStroke(content);
+ // });
+ // _socket.addEventListener('receiveOverlayTrigger', (content: MobileInkOverlayContent) => {
+ // //GestureOverlay.Instance.enableMobileInkOverlay(content);
+ // // MobileInkOverlay.Instance.initMobileInkOverlay(content);
+ // });
+ // _socket.addEventListener('receiveUpdateOverlayPosition', (content: UpdateMobileInkOverlayPositionContent) => {
+ // // MobileInkOverlay.Instance.updatePosition(content);
+ // });
+ // _socket.addEventListener('receiveMobileDocumentUpload', (content: MobileDocumentUploadContent) => {
+ // // MobileInkOverlay.Instance.uploadDocument(content);
+ // });
}
function errorFunc(): never {
@@ -470,10 +471,13 @@ export namespace DocServer {
// to their actual RefField | undefined values. This return value either becomes the input
// argument to the caller's promise (i.e. GetRefFields(["_id1_", "_id2_", "_id3_"]).then(map => //do something with map...))
// or it is the direct return result if the promise is awaited (i.e. let fields = await GetRefFields(["_id1_", "_id2_", "_id3_"])).
- return ids.reduce((map, id) => {
- map[id] = _cache[id] as any;
- return map;
- }, {} as { [id: string]: Opt<RefField> });
+ return ids.reduce(
+ (map, id) => {
+ map[id] = _cache[id] as any;
+ return map;
+ },
+ {} as { [id: string]: Opt<RefField> }
+ );
};
let _GetRefFields: (ids: string[]) => Promise<{ [id: string]: Opt<RefField> }> = errorFunc;
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index df81e12f0..4ec100728 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -30,7 +30,6 @@ import { DimUnit } from '../views/collections/collectionMulticolumn/CollectionMu
import { CollectionView } from '../views/collections/CollectionView';
import { ContextMenu } from '../views/ContextMenu';
import { ContextMenuProps } from '../views/ContextMenuItem';
-import { DFLT_IMAGE_NATIVE_DIM } from '../views/global/globalCssVariables.scss';
import { ActiveArrowEnd, ActiveArrowStart, ActiveDash, ActiveFillColor, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth, ActiveIsInkMask, InkingStroke } from '../views/InkingStroke';
import { AudioBox, media_state } from '../views/nodes/AudioBox';
import { ColorBox } from '../views/nodes/ColorBox';
@@ -61,6 +60,8 @@ import { VideoBox } from '../views/nodes/VideoBox';
import { WebBox } from '../views/nodes/WebBox';
import { SearchBox } from '../views/search/SearchBox';
import { CollectionViewType, DocumentType } from './DocumentTypes';
+//import { DFLT_IMAGE_NATIVE_DIM } from '../views/global/globalCssVariables.scss';
+const DFLT_IMAGE_NATIVE_DIM = '900px';
const defaultNativeImageDim = Number(DFLT_IMAGE_NATIVE_DIM.replace('px', ''));
class EmptyBox {
@@ -1299,7 +1300,7 @@ export namespace DocUtils {
// links are not a field value, so handled here. value is an expression of form ([field=]idToDoc("..."))
const allLinks = LinkManager.Instance.getAllRelatedLinks(doc);
const matchLink = (value: string, anchor: Doc) => {
- const linkedToExp = (value ?? "").split('=');
+ const linkedToExp = (value ?? '').split('=');
if (linkedToExp.length === 1) return Field.toScriptString(anchor) === value;
return Field.toScriptString(DocCast(anchor[linkedToExp[0]])) === linkedToExp[1];
};
@@ -1918,7 +1919,7 @@ export namespace DocUtils {
overwriteDoc.loadingError = (result as any).message;
LoadingBox.removeCurrentlyLoading(overwriteDoc);
}
- } else newFilename && processFileupload(generatedDocuments, newFilename, mimetype??"", result, options, overwriteDoc);
+ } else newFilename && processFileupload(generatedDocuments, newFilename, mimetype ?? '', result, options, overwriteDoc);
});
}
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index d3ed4ca7c..8b5f23aa4 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -561,7 +561,7 @@ export class CurrentUserUtils {
toolTip: "Empty recently closed",};
DocUtils.AssignDocField(recentlyClosed, "layout_headerButton", (opts) => Docs.Create.FontIconDocument(opts), clearBtnsOpts, undefined, {onClick: clearAll("this.target")});
- if (!Cast(recentlyClosed.contextMenuScripts, listSpec(ScriptField),null)?.find((script) => script.script.originalScript === clearAll("self"))) {
+ if (!Cast(recentlyClosed.contextMenuScripts, listSpec(ScriptField),null)?.find((script) => script?.script.originalScript === clearAll("self"))) {
recentlyClosed.contextMenuScripts = new List<ScriptField>([ScriptField.MakeScript(clearAll("self"))!])
}
return recentlyClosed;
@@ -946,7 +946,7 @@ export class CurrentUserUtils {
runInAction(() => CurrentUserUtils.ServerVersion = result.version);
Doc.CurrentUserEmail = result.email;
resolvedPorts = result.resolvedPorts as any;
- DocServer.init(window.location.protocol, window.location.hostname, resolvedPorts.socket, result.email);
+ DocServer.init(window.location.protocol, window.location.hostname, resolvedPorts?.socket, result.email);
if (result.cacheDocumentIds)
{
const ids = result.cacheDocumentIds.split(";");
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 162a0a11f..427b1c85f 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -7,13 +7,14 @@ import { ScriptField } from '../../fields/ScriptField';
import { ScriptCast, StrCast } from '../../fields/Types';
import { emptyFunction, Utils } from '../../Utils';
import { Docs, DocUtils } from '../documents/Documents';
-import * as globalCssVariables from '../views/global/globalCssVariables.scss';
import { CollectionFreeFormDocumentView } from '../views/nodes/CollectionFreeFormDocumentView';
import { DocumentView } from '../views/nodes/DocumentView';
import { ScriptingGlobals } from './ScriptingGlobals';
import { SelectionManager } from './SelectionManager';
import { SnappingManager } from './SnappingManager';
import { UndoManager } from './UndoManager';
+// import * as globalCssVariables from '../views/global/globalCssVariables.scss';
+const contextMenuZindex = 100002;
export type dropActionType = 'embed' | 'copy' | 'move' | 'add' | 'same' | 'inSame' | 'proto' | 'none' | undefined; // undefined = move, "same" = move but don't call dropPropertiesToRemove
@@ -85,7 +86,16 @@ export namespace DragManager {
// event called when the drag operation results in a drop action
export class DropEvent {
- constructor(readonly x: number, readonly y: number, readonly complete: DragCompleteEvent, readonly shiftKey: boolean, readonly altKey: boolean, readonly metaKey: boolean, readonly ctrlKey: boolean, readonly embedKey: boolean) {}
+ constructor(
+ readonly x: number,
+ readonly y: number,
+ readonly complete: DragCompleteEvent,
+ readonly shiftKey: boolean,
+ readonly altKey: boolean,
+ readonly metaKey: boolean,
+ readonly ctrlKey: boolean,
+ readonly embedKey: boolean
+ ) {}
}
// event called when the drag operation has completed (aborted or completed a drop) -- this will be after any drop event has been generated
@@ -209,16 +219,14 @@ export namespace DragManager {
!dragData.isDocDecorationMove && !dragData.userDropAction && ScriptCast(d.onDragStart)
? addAudioTag(ScriptCast(d.onDragStart).script.run({ this: d }).result)
: docDragData.dropAction === 'embed'
- ? Doc.BestEmbedding(d)
- : docDragData.dropAction === 'add'
- ? d
- : docDragData.dropAction === 'proto'
- ? Doc.GetProto(d)
- : docDragData.dropAction === 'copy'
- ? (
- await Doc.MakeClone(d)
- ).clone
- : d
+ ? Doc.BestEmbedding(d)
+ : docDragData.dropAction === 'add'
+ ? d
+ : docDragData.dropAction === 'proto'
+ ? Doc.GetProto(d)
+ : docDragData.dropAction === 'copy'
+ ? (await Doc.MakeClone(d)).clone
+ : d
)
)
).filter(d => d);
@@ -428,7 +436,7 @@ export namespace DragManager {
color: 'black',
transition: 'none',
borderRadius: getComputedStyle(ele).borderRadius,
- zIndex: globalCssVariables.contextMenuZindex,
+ zIndex: contextMenuZindex,
transformOrigin: '0 0',
width,
height,
diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index 8973306bf..c8c93b7d0 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -52,7 +52,7 @@ export class GroupManager extends React.Component<{}> {
* Fetches the list of users stored on the database.
*/
populateUsers = async () => {
- if (Doc.UserDoc()[Id] !== '__guest__') {
+ if (Doc.UserDoc()[Id] !== Utils.GuestID()) {
const userList = await RequestPromise.get(Utils.prepend('/getUsers'));
const raw = JSON.parse(userList) as User[];
raw.map(action(user => !this.users.some(umail => umail === user.email) && this.users.push(user.email)));
@@ -258,10 +258,7 @@ export class GroupManager extends React.Component<{}> {
alert('Please select a unique group name');
return;
}
- this.createGroupDoc(
- value,
- this.selectedUsers?.map(user => user.value)
- );
+ this.createGroupDoc(value, this.selectedUsers?.map(user => user.value));
this.selectedUsers = null;
this.inputRef.current!.value = '';
this.buttonColour = '#979797';
diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts
index 400b63a1c..b3c694024 100644
--- a/src/client/util/Scripting.ts
+++ b/src/client/util/Scripting.ts
@@ -120,6 +120,35 @@ class ScriptingCompilerHost {
}
return undefined;
}
+ resolveModuleNames(moduleNames: string[], containingFile: string): any {
+ const resolvedModules: ts.ResolvedModule[] = [];
+ for (const moduleName of moduleNames) {
+ // try to use standard resolution
+ let result = ts.resolveModuleName(
+ moduleName,
+ containingFile,
+ {},
+ {
+ fileExists: (fileName: string) => true as any,
+ readFile: (fileName: string) => 'true',
+ }
+ );
+ if (result.resolvedModule) {
+ resolvedModules.push(result.resolvedModule);
+ } else {
+ // check fallback locations, for simplicity assume that module at location
+ // should be represented by '.d.ts' file
+ // for (const location of moduleSearchLocations) {
+ // const modulePath = path.join(location, moduleName + ".d.ts");
+ // if (fileExists(modulePath)) {
+ // resolvedModules.push({ resolvedFileName: modulePath });
+ // }
+ // }
+ }
+ }
+ return resolvedModules;
+ }
+
// getDefaultLibFileName(options: ts.CompilerOptions): string {
getDefaultLibFileName(options: any): string {
return 'node_modules/typescript/lib/lib.d.ts'; // No idea what this means...
@@ -247,7 +276,7 @@ export function CompileScript(script: string, options: ScriptOptions = {}): Comp
const funcScript = `(function(${paramString})${reqTypes} { ${body} })`;
host.writeFile('file.ts', funcScript);
- if (typecheck) host.writeFile('node_modules/typescript/lib/lib.d.ts', typescriptlib);
+ if (typecheck && false) host.writeFile('node_modules/typescript/lib/lib.d.ts', typescriptlib);
const program = ts.createProgram(['file.ts'], {}, host);
const testResult = program.emit();
const outputText = host.readFile('file.js');
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index 34e294a4a..403f4e090 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -133,7 +133,7 @@ export class SharingManager extends React.Component<{}> {
* Populates the list of validated users (this.users) by adding registered users which have a sharingDocument.
*/
populateUsers = async () => {
- if (!this.populating && Doc.UserDoc()[Id] !== '__guest__') {
+ if (!this.populating && Doc.UserDoc()[Id] !== Utils.GuestID()) {
this.populating = true;
const userList = await RequestPromise.get(Utils.prepend('/getUsers'));
const raw = (JSON.parse(userList) as User[]).filter(user => user.email !== 'guest' && user.email !== Doc.CurrentUserEmail);
diff --git a/src/client/views/InkTranscription.tsx b/src/client/views/InkTranscription.tsx
index 17136a737..b2ac208ca 100644
--- a/src/client/views/InkTranscription.tsx
+++ b/src/client/views/InkTranscription.tsx
@@ -1,350 +1,350 @@
-import * as iink from 'iink-js';
-import { action, observable } from 'mobx';
-import * as React from 'react';
-import { Doc, DocListCast } from '../../fields/Doc';
-import { InkData, InkField, InkTool } from '../../fields/InkField';
-import { Cast, DateCast, NumCast } from '../../fields/Types';
-import { aggregateBounds } from '../../Utils';
-import { DocumentType } from '../documents/DocumentTypes';
-import { DocumentManager } from '../util/DocumentManager';
-import { CollectionFreeFormView } from './collections/collectionFreeForm';
-import { InkingStroke } from './InkingStroke';
-import './InkTranscription.scss';
-
-/**
- * Class component that handles inking in writing mode
- */
-export class InkTranscription extends React.Component {
- static Instance: InkTranscription;
-
- @observable _mathRegister: any;
- @observable _mathRef: any;
- @observable _textRegister: any;
- @observable _textRef: any;
- private lastJiix: any;
- private currGroup?: Doc;
-
- constructor(props: Readonly<{}>) {
- super(props);
-
- InkTranscription.Instance = this;
- }
-
- componentWillUnmount() {
- this._mathRef.removeEventListener('exported', (e: any) => this.exportInk(e, this._mathRef));
- this._textRef.removeEventListener('exported', (e: any) => this.exportInk(e, this._textRef));
- }
-
- @action
- setMathRef = (r: any) => {
- if (!this._mathRegister) {
- this._mathRegister = r
- ? iink.register(r, {
- recognitionParams: {
- type: 'MATH',
- protocol: 'WEBSOCKET',
- server: {
- host: 'cloud.myscript.com',
- applicationKey: process.env.IINKJS_APP,
- hmacKey: process.env.IINKJS_HMAC,
- websocket: {
- pingEnabled: false,
- autoReconnect: true,
- },
- },
- iink: {
- math: {
- mimeTypes: ['application/x-latex', 'application/vnd.myscript.jiix'],
- },
- export: {
- jiix: {
- strokes: true,
- },
- },
- },
- },
- })
- : null;
- }
-
- r?.addEventListener('exported', (e: any) => this.exportInk(e, this._mathRef));
-
- return (this._mathRef = r);
- };
-
- @action
- setTextRef = (r: any) => {
- if (!this._textRegister) {
- this._textRegister = r
- ? iink.register(r, {
- recognitionParams: {
- type: 'TEXT',
- protocol: 'WEBSOCKET',
- server: {
- host: 'cloud.myscript.com',
- applicationKey: '7277ec34-0c2e-4ee1-9757-ccb657e3f89f',
- hmacKey: 'f5cb18f2-1f95-4ddb-96ac-3f7c888dffc1',
- websocket: {
- pingEnabled: false,
- autoReconnect: true,
- },
- },
- iink: {
- text: {
- mimeTypes: ['text/plain'],
- },
- export: {
- jiix: {
- strokes: true,
- },
- },
- },
- },
- })
- : null;
- }
-
- r?.addEventListener('exported', (e: any) => this.exportInk(e, this._textRef));
-
- return (this._textRef = r);
- };
-
- /**
- * Handles processing Dash Doc data for ink transcription.
- *
- * @param groupDoc the group which contains the ink strokes we want to transcribe
- * @param inkDocs the ink docs contained within the selected group
- * @param math boolean whether to do math transcription or not
- */
- transcribeInk = (groupDoc: Doc | undefined, inkDocs: Doc[], math: boolean) => {
- if (!groupDoc) return;
- const validInks = inkDocs.filter(s => s.type === DocumentType.INK);
-
- const strokes: InkData[] = [];
- const times: number[] = [];
- validInks
- .filter(i => Cast(i[Doc.LayoutFieldKey(i)], InkField))
- .forEach(i => {
- const d = Cast(i[Doc.LayoutFieldKey(i)], InkField, null);
- const inkStroke = DocumentManager.Instance.getDocumentView(i)?.ComponentView as InkingStroke;
- strokes.push(d.inkData.map(pd => inkStroke.ptToScreen({ X: pd.X, Y: pd.Y })));
- times.push(DateCast(i.author_date).getDate().getTime());
- });
-
- this.currGroup = groupDoc;
-
- const pointerData = { events: strokes.map((stroke, i) => this.inkJSON(stroke, times[i])) };
- const processGestures = false;
-
- if (math) {
- this._mathRef.editor.pointerEvents(pointerData, processGestures);
- } else {
- this._textRef.editor.pointerEvents(pointerData, processGestures);
- }
- };
-
- /**
- * Converts the Dash Ink Data to JSON.
- *
- * @param stroke The dash ink data
- * @param time the time of the stroke
- * @returns json object representation of ink data
- */
- inkJSON = (stroke: InkData, time: number) => {
- return {
- pointerType: 'PEN',
- pointerId: 1,
- x: stroke.map(point => point.X),
- y: stroke.map(point => point.Y),
- t: new Array(stroke.length).fill(time),
- p: new Array(stroke.length).fill(1.0),
- };
- };
-
- /**
- * Creates subgroups for each word for the whole text transcription
- * @param wordInkDocMap the mapping of words to ink strokes (Ink Docs)
- */
- subgroupsTranscriptions = (wordInkDocMap: Map<string, Doc[]>) => {
- // iterate through the keys of wordInkDocMap
- wordInkDocMap.forEach(async (inkDocs: Doc[], word: string) => {
- const selected = inkDocs.slice();
- if (!selected) {
- return;
- }
- const ctx = await Cast(selected[0].embedContainer, Doc);
- if (!ctx) {
- return;
- }
- const docView: CollectionFreeFormView = DocumentManager.Instance.getDocumentView(ctx)?.ComponentView as CollectionFreeFormView;
-
- if (!docView) return;
- const marqViewRef = docView._marqueeViewRef.current;
- if (!marqViewRef) return;
- this.groupInkDocs(selected, docView, word);
- });
- };
-
- /**
- * Event listener function for when the 'exported' event is heard.
- *
- * @param e the event objects
- * @param ref the ref to the editor
- */
- exportInk = (e: any, ref: any) => {
- const exports = e.detail.exports;
- if (exports) {
- if (exports['application/x-latex']) {
- const latex = exports['application/x-latex'];
- if (this.currGroup) {
- this.currGroup.text = latex;
- this.currGroup.title = latex;
- }
-
- ref.editor.clear();
- } else if (exports['text/plain']) {
- if (exports['application/vnd.myscript.jiix']) {
- this.lastJiix = JSON.parse(exports['application/vnd.myscript.jiix']);
- // map timestamp to strokes
- const timestampWord = new Map<number, string>();
- this.lastJiix.words.map((word: any) => {
- if (word.items) {
- word.items.forEach((i: { id: string; timestamp: string; X: Array<number>; Y: Array<number>; F: Array<number> }) => {
- const ms = Date.parse(i.timestamp);
- timestampWord.set(ms, word.label);
- });
- }
- });
-
- const wordInkDocMap = new Map<string, Doc[]>();
- if (this.currGroup) {
- const docList = DocListCast(this.currGroup.data);
- docList.forEach((inkDoc: Doc) => {
- // just having the times match up and be a unique value (actual timestamp doesn't matter)
- const ms = DateCast(inkDoc.author_date).getDate().getTime() + 14400000;
- const word = timestampWord.get(ms);
- if (!word) {
- return;
- }
- const entry = wordInkDocMap.get(word);
- if (entry) {
- entry.push(inkDoc);
- wordInkDocMap.set(word, entry);
- } else {
- const newEntry = [inkDoc];
- wordInkDocMap.set(word, newEntry);
- }
- });
- if (this.lastJiix.words.length > 1) this.subgroupsTranscriptions(wordInkDocMap);
- }
- }
- const text = exports['text/plain'];
-
- if (this.currGroup) {
- this.currGroup.transcription = text;
- this.currGroup.title = text.split('\n')[0];
- }
-
- ref.editor.clear();
- }
- }
- };
-
- /**
- * Creates the ink grouping once the user leaves the writing mode.
- */
- createInkGroup() {
- // TODO nda - if document being added to is a inkGrouping then we can just add to that group
- if (Doc.ActiveTool === InkTool.Write) {
- CollectionFreeFormView.collectionsWithUnprocessedInk.forEach(ffView => {
- // TODO: nda - will probably want to go through ffView unprocessed docs and then see if any of the inksToGroup docs are in it and only use those
- const selected = ffView.unprocessedDocs;
- const newCollection = this.groupInkDocs(
- selected.filter(doc => doc.embedContainer),
- ffView
- );
- ffView.unprocessedDocs = [];
-
- InkTranscription.Instance.transcribeInk(newCollection, selected, false);
- });
- }
- CollectionFreeFormView.collectionsWithUnprocessedInk.clear();
- }
-
- /**
- * Creates the groupings for a given list of ink docs on a specific doc view
- * @param selected: the list of ink docs to create a grouping of
- * @param docView: the view in which we want the grouping to be created
- * @param word: optional param if the group we are creating is a word (subgrouping individual words)
- * @returns a new collection Doc or undefined if the grouping fails
- */
- groupInkDocs(selected: Doc[], docView: CollectionFreeFormView, word?: string): Doc | undefined {
- const bounds: { x: number; y: number; width?: number; height?: number }[] = [];
-
- // calculate the necessary bounds from the selected ink docs
- selected.map(
- action(d => {
- const x = NumCast(d.x);
- const y = NumCast(d.y);
- const width = NumCast(d._width);
- const height = NumCast(d._height);
- bounds.push({ x, y, width, height });
- })
- );
-
- // calculate the aggregated bounds
- const aggregBounds = aggregateBounds(bounds, 0, 0);
- const marqViewRef = docView._marqueeViewRef.current;
-
- // set the vals for bounds in marqueeView
- if (marqViewRef) {
- marqViewRef._downX = aggregBounds.x;
- marqViewRef._downY = aggregBounds.y;
- marqViewRef._lastX = aggregBounds.r;
- marqViewRef._lastY = aggregBounds.b;
- }
-
- // map through all the selected ink strokes and create the groupings
- selected.map(
- action(d => {
- const dx = NumCast(d.x);
- const dy = NumCast(d.y);
- delete d.x;
- delete d.y;
- delete d.activeFrame;
- delete d._timecodeToShow; // bcz: this should be automatic somehow.. along with any other properties that were logically associated with the original collection
- delete d._timecodeToHide; // bcz: this should be automatic somehow.. along with any other properties that were logically associated with the original collection
- // calculate pos based on bounds
- if (marqViewRef?.Bounds) {
- d.x = dx - marqViewRef.Bounds.left - marqViewRef.Bounds.width / 2;
- d.y = dy - marqViewRef.Bounds.top - marqViewRef.Bounds.height / 2;
- }
- return d;
- })
- );
- docView.props.removeDocument?.(selected);
- // Gets a collection based on the selected nodes using a marquee view ref
- const newCollection = marqViewRef?.getCollection(selected, undefined, true);
- if (newCollection) {
- newCollection.width = NumCast(newCollection._width);
- newCollection.height = NumCast(newCollection._height);
- // if the grouping we are creating is an individual word
- if (word) {
- newCollection.title = word;
- }
- }
-
- // nda - bug: when deleting a stroke before leaving writing mode, delete the stroke from unprocessed ink docs
- newCollection && docView.props.addDocument?.(newCollection);
- return newCollection;
- }
-
- render() {
- return (
- <div className="ink-transcription">
- <div className="math-editor" ref={this.setMathRef} touch-action="none"></div>
- <div className="text-editor" ref={this.setTextRef} touch-action="none"></div>
- </div>
- );
- }
-}
+// import * as iink from 'iink-js';
+// import { action, observable } from 'mobx';
+// import * as React from 'react';
+// import { Doc, DocListCast } from '../../fields/Doc';
+// import { InkData, InkField, InkTool } from '../../fields/InkField';
+// import { Cast, DateCast, NumCast } from '../../fields/Types';
+// import { aggregateBounds } from '../../Utils';
+// import { DocumentType } from '../documents/DocumentTypes';
+// import { DocumentManager } from '../util/DocumentManager';
+// import { CollectionFreeFormView } from './collections/collectionFreeForm';
+// import { InkingStroke } from './InkingStroke';
+// import './InkTranscription.scss';
+
+// /**
+// * Class component that handles inking in writing mode
+// */
+// export class InkTranscription extends React.Component {
+// static Instance: InkTranscription;
+
+// @observable _mathRegister: any;
+// @observable _mathRef: any;
+// @observable _textRegister: any;
+// @observable _textRef: any;
+// private lastJiix: any;
+// private currGroup?: Doc;
+
+// constructor(props: Readonly<{}>) {
+// super(props);
+
+// InkTranscription.Instance = this;
+// }
+
+// componentWillUnmount() {
+// this._mathRef.removeEventListener('exported', (e: any) => this.exportInk(e, this._mathRef));
+// this._textRef.removeEventListener('exported', (e: any) => this.exportInk(e, this._textRef));
+// }
+
+// @action
+// setMathRef = (r: any) => {
+// if (!this._mathRegister) {
+// this._mathRegister = r
+// ? iink.register(r, {
+// recognitionParams: {
+// type: 'MATH',
+// protocol: 'WEBSOCKET',
+// server: {
+// host: 'cloud.myscript.com',
+// applicationKey: process.env.IINKJS_APP,
+// hmacKey: process.env.IINKJS_HMAC,
+// websocket: {
+// pingEnabled: false,
+// autoReconnect: true,
+// },
+// },
+// iink: {
+// math: {
+// mimeTypes: ['application/x-latex', 'application/vnd.myscript.jiix'],
+// },
+// export: {
+// jiix: {
+// strokes: true,
+// },
+// },
+// },
+// },
+// })
+// : null;
+// }
+
+// r?.addEventListener('exported', (e: any) => this.exportInk(e, this._mathRef));
+
+// return (this._mathRef = r);
+// };
+
+// @action
+// setTextRef = (r: any) => {
+// if (!this._textRegister) {
+// this._textRegister = r
+// ? iink.register(r, {
+// recognitionParams: {
+// type: 'TEXT',
+// protocol: 'WEBSOCKET',
+// server: {
+// host: 'cloud.myscript.com',
+// applicationKey: '7277ec34-0c2e-4ee1-9757-ccb657e3f89f',
+// hmacKey: 'f5cb18f2-1f95-4ddb-96ac-3f7c888dffc1',
+// websocket: {
+// pingEnabled: false,
+// autoReconnect: true,
+// },
+// },
+// iink: {
+// text: {
+// mimeTypes: ['text/plain'],
+// },
+// export: {
+// jiix: {
+// strokes: true,
+// },
+// },
+// },
+// },
+// })
+// : null;
+// }
+
+// r?.addEventListener('exported', (e: any) => this.exportInk(e, this._textRef));
+
+// return (this._textRef = r);
+// };
+
+// /**
+// * Handles processing Dash Doc data for ink transcription.
+// *
+// * @param groupDoc the group which contains the ink strokes we want to transcribe
+// * @param inkDocs the ink docs contained within the selected group
+// * @param math boolean whether to do math transcription or not
+// */
+// transcribeInk = (groupDoc: Doc | undefined, inkDocs: Doc[], math: boolean) => {
+// if (!groupDoc) return;
+// const validInks = inkDocs.filter(s => s.type === DocumentType.INK);
+
+// const strokes: InkData[] = [];
+// const times: number[] = [];
+// validInks
+// .filter(i => Cast(i[Doc.LayoutFieldKey(i)], InkField))
+// .forEach(i => {
+// const d = Cast(i[Doc.LayoutFieldKey(i)], InkField, null);
+// const inkStroke = DocumentManager.Instance.getDocumentView(i)?.ComponentView as InkingStroke;
+// strokes.push(d.inkData.map(pd => inkStroke.ptToScreen({ X: pd.X, Y: pd.Y })));
+// times.push(DateCast(i.author_date).getDate().getTime());
+// });
+
+// this.currGroup = groupDoc;
+
+// const pointerData = { events: strokes.map((stroke, i) => this.inkJSON(stroke, times[i])) };
+// const processGestures = false;
+
+// if (math) {
+// this._mathRef.editor.pointerEvents(pointerData, processGestures);
+// } else {
+// this._textRef.editor.pointerEvents(pointerData, processGestures);
+// }
+// };
+
+// /**
+// * Converts the Dash Ink Data to JSON.
+// *
+// * @param stroke The dash ink data
+// * @param time the time of the stroke
+// * @returns json object representation of ink data
+// */
+// inkJSON = (stroke: InkData, time: number) => {
+// return {
+// pointerType: 'PEN',
+// pointerId: 1,
+// x: stroke.map(point => point.X),
+// y: stroke.map(point => point.Y),
+// t: new Array(stroke.length).fill(time),
+// p: new Array(stroke.length).fill(1.0),
+// };
+// };
+
+// /**
+// * Creates subgroups for each word for the whole text transcription
+// * @param wordInkDocMap the mapping of words to ink strokes (Ink Docs)
+// */
+// subgroupsTranscriptions = (wordInkDocMap: Map<string, Doc[]>) => {
+// // iterate through the keys of wordInkDocMap
+// wordInkDocMap.forEach(async (inkDocs: Doc[], word: string) => {
+// const selected = inkDocs.slice();
+// if (!selected) {
+// return;
+// }
+// const ctx = await Cast(selected[0].embedContainer, Doc);
+// if (!ctx) {
+// return;
+// }
+// const docView: CollectionFreeFormView = DocumentManager.Instance.getDocumentView(ctx)?.ComponentView as CollectionFreeFormView;
+
+// if (!docView) return;
+// const marqViewRef = docView._marqueeViewRef.current;
+// if (!marqViewRef) return;
+// this.groupInkDocs(selected, docView, word);
+// });
+// };
+
+// /**
+// * Event listener function for when the 'exported' event is heard.
+// *
+// * @param e the event objects
+// * @param ref the ref to the editor
+// */
+// exportInk = (e: any, ref: any) => {
+// const exports = e.detail.exports;
+// if (exports) {
+// if (exports['application/x-latex']) {
+// const latex = exports['application/x-latex'];
+// if (this.currGroup) {
+// this.currGroup.text = latex;
+// this.currGroup.title = latex;
+// }
+
+// ref.editor.clear();
+// } else if (exports['text/plain']) {
+// if (exports['application/vnd.myscript.jiix']) {
+// this.lastJiix = JSON.parse(exports['application/vnd.myscript.jiix']);
+// // map timestamp to strokes
+// const timestampWord = new Map<number, string>();
+// this.lastJiix.words.map((word: any) => {
+// if (word.items) {
+// word.items.forEach((i: { id: string; timestamp: string; X: Array<number>; Y: Array<number>; F: Array<number> }) => {
+// const ms = Date.parse(i.timestamp);
+// timestampWord.set(ms, word.label);
+// });
+// }
+// });
+
+// const wordInkDocMap = new Map<string, Doc[]>();
+// if (this.currGroup) {
+// const docList = DocListCast(this.currGroup.data);
+// docList.forEach((inkDoc: Doc) => {
+// // just having the times match up and be a unique value (actual timestamp doesn't matter)
+// const ms = DateCast(inkDoc.author_date).getDate().getTime() + 14400000;
+// const word = timestampWord.get(ms);
+// if (!word) {
+// return;
+// }
+// const entry = wordInkDocMap.get(word);
+// if (entry) {
+// entry.push(inkDoc);
+// wordInkDocMap.set(word, entry);
+// } else {
+// const newEntry = [inkDoc];
+// wordInkDocMap.set(word, newEntry);
+// }
+// });
+// if (this.lastJiix.words.length > 1) this.subgroupsTranscriptions(wordInkDocMap);
+// }
+// }
+// const text = exports['text/plain'];
+
+// if (this.currGroup) {
+// this.currGroup.transcription = text;
+// this.currGroup.title = text.split('\n')[0];
+// }
+
+// ref.editor.clear();
+// }
+// }
+// };
+
+// /**
+// * Creates the ink grouping once the user leaves the writing mode.
+// */
+// createInkGroup() {
+// // TODO nda - if document being added to is a inkGrouping then we can just add to that group
+// if (Doc.ActiveTool === InkTool.Write) {
+// CollectionFreeFormView.collectionsWithUnprocessedInk.forEach(ffView => {
+// // TODO: nda - will probably want to go through ffView unprocessed docs and then see if any of the inksToGroup docs are in it and only use those
+// const selected = ffView.unprocessedDocs;
+// const newCollection = this.groupInkDocs(
+// selected.filter(doc => doc.embedContainer),
+// ffView
+// );
+// ffView.unprocessedDocs = [];
+
+// InkTranscription.Instance.transcribeInk(newCollection, selected, false);
+// });
+// }
+// CollectionFreeFormView.collectionsWithUnprocessedInk.clear();
+// }
+
+// /**
+// * Creates the groupings for a given list of ink docs on a specific doc view
+// * @param selected: the list of ink docs to create a grouping of
+// * @param docView: the view in which we want the grouping to be created
+// * @param word: optional param if the group we are creating is a word (subgrouping individual words)
+// * @returns a new collection Doc or undefined if the grouping fails
+// */
+// groupInkDocs(selected: Doc[], docView: CollectionFreeFormView, word?: string): Doc | undefined {
+// const bounds: { x: number; y: number; width?: number; height?: number }[] = [];
+
+// // calculate the necessary bounds from the selected ink docs
+// selected.map(
+// action(d => {
+// const x = NumCast(d.x);
+// const y = NumCast(d.y);
+// const width = NumCast(d._width);
+// const height = NumCast(d._height);
+// bounds.push({ x, y, width, height });
+// })
+// );
+
+// // calculate the aggregated bounds
+// const aggregBounds = aggregateBounds(bounds, 0, 0);
+// const marqViewRef = docView._marqueeViewRef.current;
+
+// // set the vals for bounds in marqueeView
+// if (marqViewRef) {
+// marqViewRef._downX = aggregBounds.x;
+// marqViewRef._downY = aggregBounds.y;
+// marqViewRef._lastX = aggregBounds.r;
+// marqViewRef._lastY = aggregBounds.b;
+// }
+
+// // map through all the selected ink strokes and create the groupings
+// selected.map(
+// action(d => {
+// const dx = NumCast(d.x);
+// const dy = NumCast(d.y);
+// delete d.x;
+// delete d.y;
+// delete d.activeFrame;
+// delete d._timecodeToShow; // bcz: this should be automatic somehow.. along with any other properties that were logically associated with the original collection
+// delete d._timecodeToHide; // bcz: this should be automatic somehow.. along with any other properties that were logically associated with the original collection
+// // calculate pos based on bounds
+// if (marqViewRef?.Bounds) {
+// d.x = dx - marqViewRef.Bounds.left - marqViewRef.Bounds.width / 2;
+// d.y = dy - marqViewRef.Bounds.top - marqViewRef.Bounds.height / 2;
+// }
+// return d;
+// })
+// );
+// docView.props.removeDocument?.(selected);
+// // Gets a collection based on the selected nodes using a marquee view ref
+// const newCollection = marqViewRef?.getCollection(selected, undefined, true);
+// if (newCollection) {
+// newCollection.width = NumCast(newCollection._width);
+// newCollection.height = NumCast(newCollection._height);
+// // if the grouping we are creating is an individual word
+// if (word) {
+// newCollection.title = word;
+// }
+// }
+
+// // nda - bug: when deleting a stroke before leaving writing mode, delete the stroke from unprocessed ink docs
+// newCollection && docView.props.addDocument?.(newCollection);
+// return newCollection;
+// }
+
+// render() {
+// return (
+// <div className="ink-transcription">
+// <div className="math-editor" ref={this.setMathRef} touch-action="none"></div>
+// <div className="text-editor" ref={this.setTextRef} touch-action="none"></div>
+// </div>
+// );
+// }
+// }
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 13df352e3..41a2507f9 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -36,7 +36,6 @@ import { Transform } from '../util/Transform';
import { UndoManager } from '../util/UndoManager';
import { ContextMenu } from './ContextMenu';
import { ViewBoxBaseComponent } from './DocComponent';
-import { INK_MASK_SIZE } from './global/globalCssVariables.scss';
import { Colors } from './global/globalEnums';
import { InkControlPtHandles, InkEndPtHandles } from './InkControlPtHandles';
import './InkStroke.scss';
@@ -47,7 +46,8 @@ import { FieldView, FieldViewProps } from './nodes/FieldView';
import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox';
import { PinProps, PresBox } from './nodes/trails';
import { StyleProp } from './StyleProvider';
-import Color = require('color');
+// import { INK_MASK_SIZE } from './global/globalCssVariables.scss';
+const INK_MASK_SIZE = 1000;
@observer
export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 53182497c..1408e3124 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -43,7 +43,6 @@ import { DashboardView } from './DashboardView';
import { DictationOverlay } from './DictationOverlay';
import { DocumentDecorations } from './DocumentDecorations';
import { GestureOverlay } from './GestureOverlay';
-import { LEFT_MENU_WIDTH, TOPBAR_HEIGHT } from './global/globalCssVariables.scss';
import { KeyManager } from './GlobalKeyHandler';
import { InkTranscription } from './InkTranscription';
import { LightboxView } from './LightboxView';
@@ -71,6 +70,9 @@ import { PreviewCursor } from './PreviewCursor';
import { PropertiesView } from './PropertiesView';
import { DashboardStyleProvider, DefaultStyleProvider } from './StyleProvider';
import { TopBar } from './topbar/TopBar';
+// import { LEFT_MENU_WIDTH, TOPBAR_HEIGHT } from './global/globalCssVariables.scss';
+const LEFT_MENU_WIDTH = '60px';
+const TOPBAR_HEIGHT = '37px';
const _global = (window /* browser */ || global) /* node */ as any;
@observer
@@ -1063,7 +1065,7 @@ export class MainView extends React.Component {
<MarqueeOptionsMenu />
<TimelineMenu />
<RichTextMenu />
- <InkTranscription />
+ {/* <InkTranscription /> */}
{this.snapLines}
<LightboxView key="lightbox" PanelWidth={this._windowWidth} PanelHeight={this._windowHeight} maxBorder={[200, 50]} />
<OverlayView />
diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx
index d6368464a..330cb93e4 100644
--- a/src/client/views/collections/CollectionCarousel3DView.tsx
+++ b/src/client/views/collections/CollectionCarousel3DView.tsx
@@ -10,11 +10,13 @@ import { DocumentType } from '../../documents/DocumentTypes';
import { DragManager } from '../../util/DragManager';
import { SelectionManager } from '../../util/SelectionManager';
import { StyleProp } from '../StyleProvider';
-import { CAROUSEL3D_CENTER_SCALE, CAROUSEL3D_SIDE_SCALE, CAROUSEL3D_TOP } from '../global/globalCssVariables.scss';
import { DocFocusOptions, DocumentView } from '../nodes/DocumentView';
import './CollectionCarousel3DView.scss';
import { CollectionSubView } from './CollectionSubView';
-
+// import { CAROUSEL3D_CENTER_SCALE, CAROUSEL3D_SIDE_SCALE, CAROUSEL3D_TOP } from '../global/globalCssVariables.scss';
+const CAROUSEL3D_CENTER_SCALE = '1';
+const CAROUSEL3D_SIDE_SCALE = '1';
+const CAROUSEL3D_TOP = '0';
@observer
export class CollectionCarousel3DView extends CollectionSubView() {
@computed get scrollSpeed() {
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index b5666b917..ac79e4fef 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -24,7 +24,6 @@ import { SnappingManager } from '../../util/SnappingManager';
import { Transform } from '../../util/Transform';
import { undoable, undoBatch, UndoManager } from '../../util/UndoManager';
import { EditableView } from '../EditableView';
-import { TREE_BULLET_WIDTH } from '../global/globalCssVariables.scss';
import { DocumentView, DocumentViewInternal, DocumentViewProps, OpenWhere, StyleProviderFunc } from '../nodes/DocumentView';
import { FieldViewProps } from '../nodes/FieldView';
import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
@@ -36,6 +35,8 @@ import { CollectionView } from './CollectionView';
import { TreeSort } from './TreeSort';
import './TreeView.scss';
import * as React from 'react';
+// import { TREE_BULLET_WIDTH } from '../global/globalCssVariables.scss';
+const TREE_BULLET_WIDTH = '10px';
export interface TreeViewProps {
treeView: CollectionTreeView;
@@ -118,16 +119,16 @@ export class TreeView extends React.Component<TreeViewProps> {
return this.doc._type_collection === CollectionViewType.Docking
? this.fieldKey
: this.props.treeView.dashboardMode
- ? this.fieldKey
- : this.props.treeView.fileSysMode
- ? this.doc.isFolder
- ? this.fieldKey
- : 'data' // file system folders display their contents (data). used to be they displayed their embeddings but now its a tree structure and not a flat list
- : this.props.treeView.outlineMode || this.childDocs
- ? this.fieldKey
- : Doc.noviceMode
- ? 'layout'
- : StrCast(this.props.treeView.doc.treeView_ExpandedView, 'fields');
+ ? this.fieldKey
+ : this.props.treeView.fileSysMode
+ ? this.doc.isFolder
+ ? this.fieldKey
+ : 'data' // file system folders display their contents (data). used to be they displayed their embeddings but now its a tree structure and not a flat list
+ : this.props.treeView.outlineMode || this.childDocs
+ ? this.fieldKey
+ : Doc.noviceMode
+ ? 'layout'
+ : StrCast(this.props.treeView.doc.treeView_ExpandedView, 'fields');
}
@computed get doc() {
@@ -832,14 +833,14 @@ export class TreeView extends React.Component<TreeViewProps> {
...(this.doc.isFolder
? folderOp
: Doc.IsSystem(this.doc)
- ? []
- : this.props.treeView.fileSysMode && this.doc === Doc.GetProto(this.doc)
- ? [openEmbedding, makeFolder]
- : this.doc._type_collection === CollectionViewType.Docking
- ? []
- : this.props.treeView.Document === Doc.MyRecentlyClosed
- ? [reopenDoc]
- : [openEmbedding, focusDoc]),
+ ? []
+ : this.props.treeView.fileSysMode && this.doc === Doc.GetProto(this.doc)
+ ? [openEmbedding, makeFolder]
+ : this.doc._type_collection === CollectionViewType.Docking
+ ? []
+ : this.props.treeView.Document === Doc.MyRecentlyClosed
+ ? [reopenDoc]
+ : [openEmbedding, focusDoc]),
];
};
childContextMenuItems = () => {
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index 9ac06cf3c..d422a7536 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -10,8 +10,9 @@ import { emptyFunction, setupMoveUpEvents, Utils } from '../../../../../Utils';
import { DragManager } from '../../../../util/DragManager';
import { DocumentView } from '../../DocumentView';
import { DataVizView } from '../DataVizBox';
-import { DATA_VIZ_TABLE_ROW_HEIGHT } from '../../../global/globalCssVariables.scss';
import './Chart.scss';
+//import { DATA_VIZ_TABLE_ROW_HEIGHT } from '../../../global/globalCssVariables.scss';
+const DATA_VIZ_TABLE_ROW_HEIGHT = '30px';
interface TableBoxProps {
Document: Doc;
diff --git a/src/client/views/nodes/LinkAnchorBox.tsx b/src/client/views/nodes/LinkAnchorBox.tsx
index d10cbac5e..1b5161e47 100644
--- a/src/client/views/nodes/LinkAnchorBox.tsx
+++ b/src/client/views/nodes/LinkAnchorBox.tsx
@@ -13,8 +13,8 @@ import { FieldView, FieldViewProps } from './FieldView';
import './LinkAnchorBox.scss';
import { LinkDocPreview } from './LinkDocPreview';
import * as React from 'react';
-import globalCssVariables = require('../global/globalCssVariables.scss');
-
+// import globalCssVariables = require('../global/globalCssVariables.scss');
+const MEDIUM_GRAY = 'lightGray';
@observer
export class LinkAnchorBox extends ViewBoxBaseComponent<FieldViewProps>() {
public static LayoutString(fieldKey: string) {
@@ -77,8 +77,8 @@ export class LinkAnchorBox extends ViewBoxBaseComponent<FieldViewProps>() {
const selView = SelectionManager.Views().lastElement()?.props.LayoutTemplateString?.includes('link_anchor_1')
? 'link_anchor_1'
: SelectionManager.Views().lastElement()?.props.LayoutTemplateString?.includes('link_anchor_2')
- ? 'link_anchor_2'
- : '';
+ ? 'link_anchor_2'
+ : '';
return (
<div
ref={this._ref}
@@ -97,7 +97,7 @@ export class LinkAnchorBox extends ViewBoxBaseComponent<FieldViewProps>() {
onPointerDown={this.onPointerDown}
onContextMenu={this.specificContextMenu}
style={{
- border: selView && this.dataDoc[selView] === this.dataDoc[this.fieldKey] ? `solid ${globalCssVariables.MEDIUM_GRAY} 2px` : undefined,
+ border: selView && this.dataDoc[selView] === this.dataDoc[this.fieldKey] ? `solid ${MEDIUM_GRAY} 2px` : undefined,
background,
left: `calc(${x}% - ${small ? 2.5 : 7.5}px)`,
top: `calc(${y}% - ${small ? 2.5 : 7.5}px)`,
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 23:08:33 +0000