diff options
Diffstat (limited to 'src')
394 files changed, 19747 insertions, 17698 deletions
diff --git a/src/.babelrc b/src/.babelrc new file mode 100644 index 000000000..86ef21087 --- /dev/null +++ b/src/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["@babel/preset-env", "@babel/preset-react"] +} diff --git a/src/Utils.ts b/src/Utils.ts index 330ca59f9..852083834 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -1,12 +1,13 @@ -import v4 = require('uuid/v4'); -import v5 = require('uuid/v5'); -import { ColorState } from 'react-color'; +import { ColorResult } from 'react-color'; +import * as uuid from 'uuid'; +//import { Socket } from '../node_modules/socket.io-client'; +import * as Color from 'color'; import * as rp from 'request-promise'; -import { Socket } from 'socket.io'; +import { Socket } from '../node_modules/socket.io/dist/index'; import { DocumentType } from './client/documents/DocumentTypes'; import { Colors } from './client/views/global/globalEnums'; import { Message } from './server/Message'; -import Color = require('color'); +import { DocumentView } from './client/views/nodes/DocumentView'; export namespace Utils { export let CLICK_TIME = 300; @@ -48,11 +49,15 @@ export namespace Utils { } export function GenerateGuid(): string { - return v4(); + return uuid.v4(); } export function GenerateDeterministicGuid(seed: string): string { - return v5(seed, v5.URL); + return uuid.v5(seed, uuid.v5.URL); + } + + export function GuestID() { + return '__guest__'; } /** @@ -139,7 +144,7 @@ export namespace Utils { return (number < 16 ? '0' : '') + number.toString(16).toUpperCase(); } - export function colorString(color: ColorState) { + export function colorString(color: ColorResult) { return color.hex.startsWith('#') && color.hex.length < 8 ? color.hex + (color.rgb.a ? decimalToHexString(Math.round(color.rgb.a * 255)) : 'ff') : color.hex; } @@ -157,23 +162,19 @@ export namespace Utils { const isTransparentFunctionHack = 'isTransparent(__value__)'; export const noRecursionHack = '__noRecursion'; - export const noDragsDocFilter = 'noDragDocs::any::check'; + + // special case filters + export const noDragDocsFilter = 'noDragDocs::any::check'; + export const TransparentBackgroundFilter = `backgroundColor::${isTransparentFunctionHack},${noRecursionHack}::check`; // bcz: hack. noRecursion should probably be either another ':' delimited field, or it should be a modifier to the comparision (eg., check, x, etc) field + export const OpaqueBackgroundFilter = `backgroundColor::${isTransparentFunctionHack},${noRecursionHack}::x`; // bcz: hack. noRecursion should probably be either another ':' delimited field, or it should be a modifier to the comparision (eg., check, x, etc) field + export function IsRecursiveFilter(val: string) { return !val.includes(noRecursionHack); } - export function HasTransparencyFilter(val: string) { - return val.includes(isTransparentFunctionHack); - } - export function IsTransparentFilter() { - // bcz: isTransparent(__value__) is a hack. it would be nice to have acual functions be parsed, but now Doc.matchFieldValue is hardwired to recognize just this one - return `backgroundColor::${isTransparentFunctionHack},${noRecursionHack}::check`; // bcz: hack. noRecursion should probably be either another ':' delimited field, or it should be a modifier to the comparision (eg., check, x, etc) field - } - export function IsOpaqueFilter() { - // bcz: isTransparent(__value__) is a hack. it would be nice to have acual functions be parsed, but now Doc.matchFieldValue is hardwired to recognize just this one - return `backgroundColor::${isTransparentFunctionHack},${noRecursionHack}::x`; // bcz: hack. noRecursion should probably be either another ':' delimited field, or it should be a modifier to the comparision (eg., check, x, etc) field - } - export function IsPropUnsetFilter(prop: string) { - return `${prop}::any,${noRecursionHack}::unset`; + export function HasFunctionFilter(val: string) { + if (val.includes(isTransparentFunctionHack)) return (color: string) => color !== '' && DashColor(color).alpha() !== 1; + // add other function filters here... + return undefined; } export function toRGBAstr(col: { r: number; g: number; b: number; a?: number }) { @@ -402,14 +403,14 @@ export namespace Utils { }; } - export function Emit<T>(socket: Socket | SocketIOClient.Socket, message: Message<T>, args: T) { + export function Emit<T>(socket: Socket, message: Message<T>, args: T) { log('Emit', message.Name, args, false); socket.emit(message.Message, args); } - export function EmitCallback<T>(socket: Socket | SocketIOClient.Socket, message: Message<T>, args: T): Promise<any>; - export function EmitCallback<T>(socket: Socket | SocketIOClient.Socket, message: Message<T>, args: T, fn: (args: any) => any): void; - export function EmitCallback<T>(socket: Socket | SocketIOClient.Socket, message: Message<T>, args: T, fn?: (args: any) => any): void | Promise<any> { + export function EmitCallback<T>(socket: Socket, message: Message<T>, args: T): Promise<any>; + export function EmitCallback<T>(socket: Socket, message: Message<T>, args: T, fn: (args: any) => any): void; + export function EmitCallback<T>(socket: Socket, message: Message<T>, args: T, fn?: (args: any) => any): void | Promise<any> { log('Emit', message.Name, args, false); if (fn) { socket.emit(message.Message, args, loggingCallback('Receiving', fn, message.Name)); @@ -418,7 +419,7 @@ export namespace Utils { } } - export function AddServerHandler<T>(socket: Socket | SocketIOClient.Socket, message: Message<T>, handler: (args: T) => any) { + export function AddServerHandler<T>(socket: Socket, message: Message<T>, handler: (args: T) => any) { socket.on(message.Message, loggingCallback('Incoming', handler, message.Name)); } @@ -429,10 +430,10 @@ export namespace Utils { }); } export type RoomHandler = (socket: Socket, room: string) => any; - export type UsedSockets = Socket | SocketIOClient.Socket; + export type UsedSockets = Socket; export type RoomMessage = 'create or join' | 'created' | 'joined'; export function AddRoomHandler(socket: Socket, message: RoomMessage, handler: RoomHandler) { - socket.on(message, room => handler(socket, room)); + socket.on(message, (room: any) => handler(socket, room)); } } @@ -583,7 +584,7 @@ export function returnEmptyDoclist() { return [] as any[]; } -export let emptyPath = []; +export let emptyPath: DocumentView[] = []; export function emptyFunction() { return undefined; @@ -758,12 +759,9 @@ export function DashColor(color: string) { } export function lightOrDark(color: any) { - if (color === 'transparent' || !color) return Colors.DARK_GRAY; + if (color === 'transparent' || !color) return Colors.BLACK; if (color.startsWith?.('linear')) return Colors.BLACK; - const nonAlphaColor = color.startsWith('#') ? (color as string).substring(0, 7) : color.startsWith('rgba') ? color.replace(/,.[^,]*\)/, ')').replace('rgba', 'rgb') : color; - const col = DashColor(nonAlphaColor).rgb(); - const colsum = col.red() + col.green() + col.blue(); - if (colsum / col.alpha() > 400 || col.alpha() < 0.25) return Colors.DARK_GRAY; + if (DashColor(color).isLight()) return Colors.BLACK; return Colors.WHITE; } @@ -897,3 +895,20 @@ export function setupMoveUpEvents( document.addEventListener('pointerup', _upEvent, true); document.addEventListener('click', _clickEvent, true); } + +export function dateRangeStrToDates(dateStr: string) { + // dateStr in yyyy-mm-dd format + const dateRangeParts = dateStr.split('|'); // splits into from and to date + const fromParts = dateRangeParts[0].split('-'); + const toParts = dateRangeParts[1].split('-'); + + const fromYear = parseInt(fromParts[0]); + const fromMonth = parseInt(fromParts[1]) - 1; + const fromDay = parseInt(fromParts[2]); + + const toYear = parseInt(toParts[0]); + const toMonth = parseInt(toParts[1]) - 1; + const toDay = parseInt(toParts[2]); + + return [new Date(fromYear, fromMonth, fromDay), new Date(toYear, toMonth, toDay)]; +} diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts index 353e11775..6217cf04b 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'; @@ -56,7 +57,7 @@ export namespace DocServer { Doc.AddDocToList(Doc.MyRecentlyClosed, undefined, link); } }); - LinkManager.userLinkDBs.forEach(linkDb => Doc.FindReferences(linkDb, references, undefined)); + LinkManager.Instance.userLinkDBs.forEach(linkDb => Doc.FindReferences(linkDb, references, undefined)); const filtered = Array.from(references); const newCacheUpdate = filtered.map(doc => doc[Id]).join(';'); @@ -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/Network.ts b/src/client/Network.ts index 89b31fdca..cdcd5225a 100644 --- a/src/client/Network.ts +++ b/src/client/Network.ts @@ -1,5 +1,5 @@ import { Utils } from '../Utils'; -import requestPromise = require('request-promise'); +import * as requestPromise from 'request-promise'; import { Upload } from '../server/SharedMediaTypes'; /** diff --git a/src/client/apis/google_docs/GoogleApiClientUtils.ts b/src/client/apis/google_docs/GoogleApiClientUtils.ts index 551dca073..c8f381cc0 100644 --- a/src/client/apis/google_docs/GoogleApiClientUtils.ts +++ b/src/client/apis/google_docs/GoogleApiClientUtils.ts @@ -84,7 +84,7 @@ export namespace GoogleApiClientUtils { }; try { const schema: docs_v1.Schema$Document = await Networking.PostToServer(path, parameters); - return schema.documentId; + return schema.documentId === null ? undefined : schema.documentId; } catch { return undefined; } @@ -195,7 +195,7 @@ export namespace GoogleApiClientUtils { const title = document.title; let bodyLines = Utils.extractText(document).text.split("\n"); options.removeNewlines && (bodyLines = bodyLines.filter(line => line.length)); - return { title, bodyLines }; + return { title: title ?? "", bodyLines }; } }); }; diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts index 9403e4d3a..cea862330 100644 --- a/src/client/apis/gpt/GPT.ts +++ b/src/client/apis/gpt/GPT.ts @@ -1,4 +1,23 @@ -import { GPTCallOpts, GPTCallType, callTypeMap, openai } from './setup'; +import { ClientOptions, OpenAI } from 'openai'; + +enum GPTCallType { + SUMMARY = 'summary', + COMPLETION = 'completion', + EDIT = 'edit', +} + +type GPTCallOpts = { + model: string; + maxTokens: number; + temp: number; + prompt: string; +}; + +const callTypeMap: { [type: string]: GPTCallOpts } = { + summary: { model: 'text-davinci-003', maxTokens: 256, temp: 0.5, prompt: 'Summarize this text in simpler terms: ' }, + edit: { model: 'text-davinci-003', maxTokens: 256, temp: 0.5, prompt: 'Reword this: ' }, + completion: { model: 'text-davinci-003', maxTokens: 256, temp: 0.5, prompt: '' }, +}; /** * Calls the OpenAI API. @@ -10,13 +29,18 @@ const gptAPICall = async (inputText: string, callType: GPTCallType) => { if (callType === GPTCallType.SUMMARY) inputText += '.'; const opts: GPTCallOpts = callTypeMap[callType]; try { - const response = await openai.createCompletion({ + const configuration: ClientOptions = { + apiKey: process.env.OPENAI_KEY, + dangerouslyAllowBrowser: true, + }; + const openai = new OpenAI(configuration); + const response = await openai.completions.create({ model: opts.model, max_tokens: opts.maxTokens, temperature: opts.temp, prompt: `${opts.prompt}${inputText}`, }); - return response.data.choices[0].text; + return response.choices[0].text; } catch (err) { console.log(err); return 'Error connecting with API.'; @@ -25,12 +49,18 @@ const gptAPICall = async (inputText: string, callType: GPTCallType) => { const gptImageCall = async (prompt: string, n?: number) => { try { - const response = await openai.createImage({ + const configuration: ClientOptions = { + apiKey: process.env.OPENAI_KEY, + dangerouslyAllowBrowser: true, + }; + + const openai = new OpenAI(configuration); + const response = await openai.images.generate({ prompt: prompt, n: n ?? 1, size: '1024x1024', }); - return response.data.data.map(data => data.url); + return response.data.map((data: any) => data.url); // return response.data.data[0].url; } catch (err) { console.error(err); diff --git a/src/client/apis/youtube/YoutubeBox.tsx b/src/client/apis/youtube/YoutubeBox.tsx index 2da9927c0..d3a15cd84 100644 --- a/src/client/apis/youtube/YoutubeBox.tsx +++ b/src/client/apis/youtube/YoutubeBox.tsx @@ -10,7 +10,8 @@ import { DocumentView } from '../../views/nodes/DocumentView'; import { FieldView, FieldViewProps } from '../../views/nodes/FieldView'; import '../../views/nodes/WebBox.scss'; import './YoutubeBox.scss'; -import React = require('react'); +import * as React from 'react'; +import { SnappingManager } from '../../util/SnappingManager'; interface VideoTemplate { thumbnailUrl: string; @@ -355,9 +356,9 @@ export class YoutubeBox extends React.Component<FieldViewProps> { </div> ); - const frozen = !this.props.isSelected() || DocumentView.Interacting; + const frozen = !this.props.isSelected() || SnappingManager.IsResizing; - const classname = 'webBox-cont' + (this.props.isSelected() && Doc.ActiveTool === InkTool.None && !DocumentView.Interacting ? '-interactive' : ''); + const classname = 'webBox-cont' + (this.props.isSelected() && Doc.ActiveTool === InkTool.None && !SnappingManager.IsResizing ? '-interactive' : ''); return ( <> <div className={classname}>{content}</div> diff --git a/src/client/cognitive_services/CognitiveServices.ts b/src/client/cognitive_services/CognitiveServices.ts index 2b2931a97..408903324 100644 --- a/src/client/cognitive_services/CognitiveServices.ts +++ b/src/client/cognitive_services/CognitiveServices.ts @@ -1,29 +1,29 @@ -import * as request from "request-promise"; -import { Doc, Field } from "../../fields/Doc"; -import { Cast } from "../../fields/Types"; -import { Utils } from "../../Utils"; -import { InkData } from "../../fields/InkField"; -import { UndoManager } from "../util/UndoManager"; -import requestPromise = require("request-promise"); -import { List } from "../../fields/List"; - -type APIManager<D> = { converter: BodyConverter<D>, requester: RequestExecutor }; +import * as request from 'request-promise'; +import { Doc, Field } from '../../fields/Doc'; +import { Cast } from '../../fields/Types'; +import { Utils } from '../../Utils'; +import { InkData } from '../../fields/InkField'; +import { UndoManager } from '../util/UndoManager'; +import requestPromise = require('request-promise'); +import { List } from '../../fields/List'; + +type APIManager<D> = { converter: BodyConverter<D>; requester: RequestExecutor }; type RequestExecutor = (apiKey: string, body: string, service: Service) => Promise<string>; type AnalysisApplier<D> = (target: Doc, relevantKeys: string[], data: D, ...args: any) => any; type BodyConverter<D> = (data: D) => string; type Converter = (results: any) => Field; -type TextConverter = (results: any, data: string) => Promise<{ keyterms: Field, external_recommendations: any, kp_string: string[] }>; -type BingConverter = (results: any) => Promise<{ title_vals: string[], url_vals: string[] }>; +type TextConverter = (results: any, data: string) => Promise<{ keyterms: Field; external_recommendations: any; kp_string: string[] }>; +type BingConverter = (results: any) => Promise<{ title_vals: string[]; url_vals: string[] }>; -export type Tag = { name: string, confidence: number }; -export type Rectangle = { top: number, left: number, width: number, height: number }; +export type Tag = { name: string; confidence: number }; +export type Rectangle = { top: number; left: number; width: number; height: number }; export enum Service { - ComputerVision = "vision", - Face = "face", - Handwriting = "handwriting", - Text = "text", - Bing = "bing" + ComputerVision = 'vision', + Face = 'face', + Handwriting = 'handwriting', + Text = 'text', + Bing = 'bing', } export enum Confidence { @@ -32,7 +32,7 @@ export enum Confidence { Poor = 0.4, Fair = 0.6, Good = 0.8, - Excellent = 0.95 + Excellent = 0.95, } /** @@ -41,13 +41,8 @@ export enum Confidence { * various media types. */ export namespace CognitiveServices { - const ExecuteQuery = async <D>(service: Service, manager: APIManager<D>, data: D): Promise<any> => { let apiKey = process.env[service.toUpperCase()]; - // A HACK FOR A DEMO VIDEO - syip2 - if (service === "handwriting") { - apiKey = "61088486d76c4b12ba578775a5f55422"; - } if (!apiKey) { console.log(`No API key found for ${service}: ensure youe root directory has .env file with _CLIENT_${service.toUpperCase()}.`); return undefined; @@ -64,9 +59,7 @@ export namespace CognitiveServices { }; export namespace Image { - export const Manager: APIManager<string> = { - converter: (imageUrl: string) => JSON.stringify({ url: imageUrl }), requester: async (apiKey: string, body: string, service: Service) => { @@ -77,18 +70,17 @@ export namespace CognitiveServices { case Service.Face: uriBase = 'face/v1.0/detect'; parameters = { - 'returnFaceId': 'true', - 'returnFaceLandmarks': 'false', - 'returnFaceAttributes': 'age,gender,headPose,smile,facialHair,glasses,' + - 'emotion,hair,makeup,occlusion,accessories,blur,exposure,noise' + returnFaceId: 'true', + returnFaceLandmarks: 'false', + returnFaceAttributes: 'age,gender,headPose,smile,facialHair,glasses,' + 'emotion,hair,makeup,occlusion,accessories,blur,exposure,noise', }; break; case Service.ComputerVision: uriBase = 'vision/v2.0/analyze'; parameters = { - 'visualFeatures': 'Categories,Description,Color,Objects,Tags,Adult', - 'details': 'Celebrities,Landmarks', - 'language': 'en', + visualFeatures: 'Categories,Description,Color,Objects,Tags,Adult', + details: 'Celebrities,Landmarks', + language: 'en', }; break; } @@ -99,69 +91,63 @@ export namespace CognitiveServices { body: body, headers: { 'Content-Type': 'application/json', - 'Ocp-Apim-Subscription-Key': apiKey - } + 'Ocp-Apim-Subscription-Key': apiKey, + }, }; return request.post(options); }, - }; export namespace Appliers { - export const ProcessImage: AnalysisApplier<string> = async (target: Doc, keys: string[], url: string, service: Service, converter: Converter) => { - const batch = UndoManager.StartBatch("Image Analysis"); + const batch = UndoManager.StartBatch('Image Analysis'); const storageKey = keys[0]; - if (!url || await Cast(target[storageKey], Doc)) { + if (!url || (await Cast(target[storageKey], Doc))) { return; } let toStore: any; const results = await ExecuteQuery(service, Manager, url); if (!results) { - toStore = "Cognitive Services could not process the given image URL."; + toStore = 'Cognitive Services could not process the given image URL.'; } else { if (!results.length) { toStore = converter(results); } else { - toStore = results.length > 0 ? converter(results) : "Empty list returned."; + toStore = results.length > 0 ? converter(results) : 'Empty list returned.'; } } target[storageKey] = toStore; batch.end(); }; - } - export type Face = { faceAttributes: any, faceId: string, faceRectangle: Rectangle }; - + export type Face = { faceAttributes: any; faceId: string; faceRectangle: Rectangle }; } export namespace Inking { - export const Manager: APIManager<InkData[]> = { - converter: (inkData: InkData[]): string => { let id = 0; const strokes: AzureStrokeData[] = inkData.map(points => ({ id: id++, - points: points.map(({ X: x, Y: y }) => `${x},${y}`).join(","), - language: "en-US" + points: points.map(({ X: x, Y: y }) => `${x},${y}`).join(','), + language: 'en-US', })); return JSON.stringify({ version: 1, - language: "en-US", - unit: "mm", - strokes + language: 'en-US', + unit: 'mm', + strokes, }); }, requester: async (apiKey: string, body: string) => { const xhttp = new XMLHttpRequest(); - const serverAddress = "https://api.cognitive.microsoft.com"; - const endpoint = serverAddress + "/inkrecognizer/v1.0-preview/recognize"; + const serverAddress = 'https://api.cognitive.microsoft.com'; + const endpoint = serverAddress + '/inkrecognizer/v1.0-preview/recognize'; return new Promise<string>((resolve, reject) => { xhttp.onreadystatechange = function () { @@ -177,7 +163,7 @@ export namespace CognitiveServices { } }; - xhttp.open("PUT", endpoint, true); + xhttp.open('PUT', endpoint, true); xhttp.setRequestHeader('Ocp-Apim-Subscription-Key', apiKey); xhttp.setRequestHeader('Content-Type', 'application/json'); xhttp.send(body); @@ -186,18 +172,17 @@ export namespace CognitiveServices { }; export namespace Appliers { - export const ConcatenateHandwriting: AnalysisApplier<InkData[]> = async (target: Doc, keys: string[], inkData: InkData[]) => { - const batch = UndoManager.StartBatch("Ink Analysis"); + const batch = UndoManager.StartBatch('Ink Analysis'); let results = await ExecuteQuery(Service.Handwriting, Manager, inkData); if (results) { results.recognitionUnits && (results = results.recognitionUnits); - target[keys[0]] = Doc.Get.FromJson({ data: results, title: "Ink Analysis" }); + target[keys[0]] = Doc.Get.FromJson({ data: results, title: 'Ink Analysis' }); const recognizedText = results.map((item: any) => item.recognizedText); const recognizedObjects = results.map((item: any) => item.recognizedObject); - const individualWords = recognizedText.filter((text: string) => text && text.split(" ").length === 1); - target[keys[1]] = individualWords.length ? individualWords.join(" ") : recognizedObjects.join(", "); + const individualWords = recognizedText.filter((text: string) => text && text.split(' ').length === 1); + target[keys[1]] = individualWords.length ? individualWords.join(' ') : recognizedObjects.join(', '); } batch.end(); @@ -224,7 +209,6 @@ export namespace CognitiveServices { unit: string; strokes: AzureStrokeData[]; } - } export namespace BingSearch { @@ -234,7 +218,7 @@ export namespace CognitiveServices { }, requester: async (apiKey: string, query: string) => { const xhttp = new XMLHttpRequest(); - const serverAddress = "https://api.cognitive.microsoft.com"; + const serverAddress = 'https://api.cognitive.microsoft.com'; const endpoint = serverAddress + '/bing/v5.0/search?q=' + encodeURIComponent(query); const promisified = (resolve: any, reject: any) => { xhttp.onreadystatechange = function () { @@ -251,29 +235,26 @@ export namespace CognitiveServices { }; if (apiKey) { - xhttp.open("GET", endpoint, true); + xhttp.open('GET', endpoint, true); xhttp.setRequestHeader('Ocp-Apim-Subscription-Key', apiKey); xhttp.setRequestHeader('Content-Type', 'application/json'); xhttp.send(); - } - else { - console.log("API key for BING unavailable"); + } else { + console.log('API key for BING unavailable'); } }; return new Promise<any>(promisified); - } - + }, }; export namespace Appliers { export const analyzer = async (query: string, converter: BingConverter) => { const results = await ExecuteQuery(Service.Bing, Manager, query); - console.log("Bing results: ", results); + console.log('Bing results: ', results); const { title_vals, url_vals } = await converter(results); return { title_vals, url_vals }; }; } - } export namespace HathiTrust { @@ -283,7 +264,7 @@ export namespace CognitiveServices { }, requester: async (apiKey: string, query: string) => { const xhttp = new XMLHttpRequest(); - const serverAddress = "https://babel.hathitrust.org/cgi/htd/"; + const serverAddress = 'https://babel.hathitrust.org/cgi/htd/'; const endpoint = serverAddress + '/bing/v5.0/search?q=' + encodeURIComponent(query); const promisified = (resolve: any, reject: any) => { xhttp.onreadystatechange = function () { @@ -300,54 +281,52 @@ export namespace CognitiveServices { }; if (apiKey) { - xhttp.open("GET", endpoint, true); + xhttp.open('GET', endpoint, true); xhttp.setRequestHeader('Ocp-Apim-Subscription-Key', apiKey); xhttp.setRequestHeader('Content-Type', 'application/json'); xhttp.send(); - } - else { - console.log("API key for BING unavailable"); + } else { + console.log('API key for BING unavailable'); } }; return new Promise<any>(promisified); - } - + }, }; export namespace Appliers { export const analyzer = async (query: string, converter: BingConverter) => { const results = await ExecuteQuery(Service.Bing, Manager, query); - console.log("Bing results: ", results); + console.log('Bing results: ', results); const { title_vals, url_vals } = await converter(results); return { title_vals, url_vals }; }; } - } - export namespace Text { export const Manager: APIManager<string> = { converter: (data: string) => { return JSON.stringify({ - documents: [{ - id: 1, - language: "en", - text: data - }] + documents: [ + { + id: 1, + language: 'en', + text: data, + }, + ], }); }, requester: async (apiKey: string, body: string, service: Service) => { - const serverAddress = "https://eastus.api.cognitive.microsoft.com"; - const endpoint = serverAddress + "/text/analytics/v2.1/keyPhrases"; + const serverAddress = 'https://eastus.api.cognitive.microsoft.com'; + const endpoint = serverAddress + '/text/analytics/v2.1/keyPhrases'; const sampleBody = { - "documents": [ + documents: [ { - "language": "en", - "id": 1, - "text": "Hello world. This is some input text that I love." - } - ] + language: 'en', + id: 1, + text: 'Hello world. This is some input text that I love.', + }, + ], }; const actualBody = body; const options = { @@ -355,25 +334,23 @@ export namespace CognitiveServices { body: actualBody, headers: { 'Content-Type': 'application/json', - 'Ocp-Apim-Subscription-Key': apiKey - } - + 'Ocp-Apim-Subscription-Key': apiKey, + }, }; return request.post(options); - } + }, }; export namespace Appliers { - export async function vectorize(keyterms: any, dataDoc: Doc, mainDoc: boolean = false) { - console.log("vectorizing..."); + console.log('vectorizing...'); //keyterms = ["father", "king"]; - const args = { method: 'POST', uri: Utils.prepend("/recommender"), body: { keyphrases: keyterms }, json: true }; - await requestPromise.post(args).then(async (wordvecs) => { + const args = { method: 'POST', uri: Utils.prepend('/recommender'), body: { keyphrases: keyterms }, json: true }; + await requestPromise.post(args).then(async wordvecs => { if (wordvecs) { const indices = Object.keys(wordvecs); - console.log("successful vectorization!"); + console.log('successful vectorization!'); const vectorValues = new List<number>(); indices.forEach((ind: any) => { vectorValues.push(wordvecs[ind]); @@ -381,15 +358,14 @@ export namespace CognitiveServices { //ClientRecommender.Instance.processVector(vectorValues, dataDoc, mainDoc); } // adds document to internal doc set else { - console.log("unsuccessful :( word(s) not in vocabulary"); + console.log('unsuccessful :( word(s) not in vocabulary'); } - } - ); + }); } export const analyzer = async (dataDoc: Doc, target: Doc, keys: string[], data: string, converter: TextConverter, isMainDoc: boolean = false, isInternal: boolean = true) => { const results = await ExecuteQuery(Service.Text, Manager, data); - console.log("Cognitive Services keyphrases: ", results); + console.log('Cognitive Services keyphrases: ', results); const { keyterms, external_recommendations, kp_string } = await converter(results, data); target[keys[0]] = keyterms; if (isInternal) { @@ -400,10 +376,7 @@ export namespace CognitiveServices { } }; - // export async function countFrequencies() + // export async function countFrequencies() } - } - - -}
\ No newline at end of file +} diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts index 87010f770..1123bcac9 100644 --- a/src/client/documents/DocumentTypes.ts +++ b/src/client/documents/DocumentTypes.ts @@ -32,11 +32,12 @@ export enum DocumentType { IMPORT = 'import', PRES = 'presentation', PRESELEMENT = 'preselement', - COLOR = 'color', YOUTUBE = 'youtube', COMPARISON = 'comparison', GROUP = 'group', PUSHPIN = 'pushpin', + MAPROUTE = 'maproute', + CALENDAR = 'calendar', SCRIPTDB = 'scriptdb', // database of scripts GROUPDB = 'groupdb', // database of groups @@ -61,4 +62,5 @@ export enum CollectionViewType { Pile = 'pileup', StackedTimeline = 'stacked timeline', NoteTaking = 'notetaking', + Calendar = 'calendar' } diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 4086ede20..a0870ba43 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -2,7 +2,7 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { action, reaction, runInAction } from 'mobx'; import { basename } from 'path'; import { DateField } from '../../fields/DateField'; -import { Doc, DocListCast, Field, LinkedTo, Opt, updateCachedAcls } from '../../fields/Doc'; +import { Doc, DocListCast, Field, LinkedTo, Opt, StrListCast, updateCachedAcls } from '../../fields/Doc'; import { Initializing } from '../../fields/DocSymbols'; import { Id } from '../../fields/FieldSymbols'; import { HtmlField } from '../../fields/HtmlField'; @@ -20,7 +20,6 @@ import { YoutubeBox } from '../apis/youtube/YoutubeBox'; import { DocServer } from '../DocServer'; import { Networking } from '../Network'; import { DragManager, dropActionType } from '../util/DragManager'; -import { DirectoryImportBox } from '../util/Import & Export/DirectoryImportBox'; import { FollowLinkScript } from '../util/LinkFollower'; import { LinkManager } from '../util/LinkManager'; import { ScriptingGlobals } from '../util/ScriptingGlobals'; @@ -30,10 +29,8 @@ 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'; import { ComparisonBox } from '../views/nodes/ComparisonBox'; import { DataVizBox } from '../views/nodes/DataVizBox/DataVizBox'; import { EquationBox } from '../views/nodes/EquationBox'; @@ -61,6 +58,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 { CalendarBox } from '../views/nodes/calendarBox/CalendarBox'; +const { default: { DFLT_IMAGE_NATIVE_DIM } } = require('../views/global/globalCssVariables.module.scss'); // prettier-ignore const defaultNativeImageDim = Number(DFLT_IMAGE_NATIVE_DIM.replace('px', '')); class EmptyBox { @@ -168,15 +167,28 @@ type DTYPEt = DTypeInfo | string; export class DocumentOptions { // coordinate and dimensions depending on view x?: NUMt = new NumInfo('x coordinate of document in a freeform view', false); - y?: NUMt = new NumInfo('y coordinage of document in a freeform view', false); + y?: NUMt = new NumInfo('y coordinate of document in a freeform view', false); z?: NUMt = new NumInfo('whether document is in overlay (1) or not (0)', false, false, [1, 0]); + overlayX?: NUMt = new NumInfo('x coordinate of document in a overlay view', false); + overlayY?: NUMt = new NumInfo('y coordinate of document in a overlay view', false); _dimMagnitude?: NUMt = new NumInfo("magnitude of collectionMulti{row,col} element's width or height", false); _dimUnit?: DIMt = new DimInfo("units of collectionMulti{row,col} element's width or height - 'px' or '*' for pixels or relative units"); latitude?: NUMt = new NumInfo('latitude coordinate for map views', false); longitude?: NUMt = new NumInfo('longitude coordinate for map views', false); + routeCoordinates?: STRt = new StrInfo("stores a route's/direction's coordinates (stringified version)"); // for a route document, this stores the route's coordinates + markerType?: STRt = new StrInfo('Defines the marker type for a pushpin document'); + markerColor?: STRt = new StrInfo('Defines the marker color for a pushpin document'); map?: STRt = new StrInfo('text location of map'); map_type?: STRt = new StrInfo('type of map view', false); map_zoom?: NUMt = new NumInfo('zoom of a map view', false); + map_pitch?: NUMt = new NumInfo('pitch of a map view', false); + map_bearing?: NUMt = new NumInfo('bearing of a map view', false); + map_style?: STRt = new StrInfo('mapbox style for a map view', false); + + date_range?: STRt = new StrInfo('date range for calendar', false); + + wikiData?: STRt = new StrInfo('WikiData ID related to map location'); + description?: STRt = new StrInfo('A description of the document'); _timecodeToShow?: NUMt = new NumInfo('the time that a document should be displayed (e.g., when an annotation shows up as a video plays)', false); _timecodeToHide?: NUMt = new NumInfo('the time that a document should be hidden', false); _width?: NUMt = new NumInfo('displayed width of a document'); @@ -186,8 +198,6 @@ export class DocumentOptions { linearBtnWidth?: NUMt = new NumInfo('unexpanded width of a linear menu button (button "width" changes when it expands)', false); _nativeWidth?: NUMt = new NumInfo('native width of document contents (e.g., the pixel width of an image)', false); _nativeHeight?: NUMt = new NumInfo('native height of document contents (e.g., the pixel height of an image)', false); - _nativeDimModifiable?: BOOLt = new BoolInfo('native dimensions can be modified using document decoration reizers', false); - _nativeHeightUnfrozen?: BOOLt = new BoolInfo('native height can be changed independent of width by dragging decoration resizers'); 'acl-Guest'?: STRt = new StrInfo("permissions granted to users logged in as 'guest' (either view, or private)"); // public permissions '_acl-Guest'?: string; // public permissions @@ -195,11 +205,13 @@ export class DocumentOptions { type_collection?: COLLt = new CTypeInfo('how collection is rendered'); // sub type of a collection _type_collection?: COLLt = new CTypeInfo('how collection is rendered'); // sub type of a collection title?: STRt = new StrInfo('title of document', true); + title_custom?: BOOLt = new BoolInfo('whether title is a default or has been intentionally set'); caption?: RichTextField; author?: string; // STRt = new StrInfo('creator of document'); // bcz: don't change this. Otherwise, the userDoc's field Infos will have a FieldInfo assigned to its author field which will render it unreadable author_date?: DATEt = new DateInfo('date the document was created', true); annotationOn?: DOCt = new DocInfo('document annotated by this document', false); - embedContainer?: DOCt = new DocInfo('document that displays (contains) this discument', false); + _embedContainer?: DOCt = new DocInfo('document that displays (contains) this discument', false); + rootDocument?: DOCt = new DocInfo('document that supplies the information needed for a rendering template (eg, pres slide for PresElement)'); color?: STRt = new StrInfo('foreground color data doc', false); hidden?: BOOLt = new BoolInfo('whether the document is not rendered by its collection', false); backgroundColor?: STRt = new StrInfo('background color for data doc', false); @@ -228,13 +240,16 @@ export class DocumentOptions { layout_hideResizeHandles?: BOOLt = new BoolInfo('whether to hide the resize handles when selected'); layout_hideLinkButton?: BOOLt = new BoolInfo('whether the blue link counter button should be hidden'); layout_hideDecorationTitle?: BOOLt = new BoolInfo('whether to suppress the document decortations title when selected'); + _layout_hideContextMenu?: BOOLt = new BoolInfo('whether the context menu can be shown'); layout_borderRounding?: string; + _layout_nativeDimEditable?: BOOLt = new BoolInfo('native dimensions can be modified using document decoration reizers', false); + _layout_reflowVertical?: BOOLt = new BoolInfo('native height can be changed independent of width by dragging decoration resizers'); + _layout_reflowHorizontal?: BOOLt = new BoolInfo('whether a doc with a native size can be horizonally resized, causing some form of reflow'); layout_boxShadow?: string; // box-shadow css string OR "standard" to use dash standard box shadow - layout_maxAutoHeight?: NUMt = new NumInfo('maximum height for newly created (eg, from pasting) text documents', false); _layout_autoHeight?: BOOLt = new BoolInfo('whether document automatically resizes vertically to display contents'); _layout_curPage?: NUMt = new NumInfo('current page of a PDF or other? paginated document', false); _layout_currentTimecode?: NUMt = new NumInfo('the current timecode of a time-based document (e.g., current time of a video) value is in seconds', false); - _layout_hideContextMenu?: BOOLt = new BoolInfo('whether the context menu can be shown'); + _layout_centered?: BOOLt = new BoolInfo('whether text should be vertically centered in Doc'); _layout_fitWidth?: BOOLt = new BoolInfo('whether document should scale its contents to fit its rendered width or not (e.g., for PDFviews)'); _layout_fitContentsToBox?: BOOLt = new BoolInfo('whether a freeformview should zoom/scale to create a shrinkwrapped view of its content'); _layout_fieldKey?: STRt = new StrInfo('the field key containing the current layout definition', false); @@ -244,6 +259,7 @@ export class DocumentOptions { _layout_showCaption?: string; // which field to display in the caption area. leave empty to have no caption _chromeHidden?: BOOLt = new BoolInfo('whether the editing chrome for a document is hidden'); + hideClickBehaviors?: BOOLt = new BoolInfo('whether to hide click behaviors in context menu'); _gridGap?: NUMt = new NumInfo('gap between items in masonry view', false); _xMargin?: NUMt = new NumInfo('gap between left edge of document and start of masonry/stacking layouts', false); _yMargin?: NUMt = new NumInfo('gap between top edge of dcoument and start of masonry/stacking layouts', false); @@ -270,26 +286,28 @@ export class DocumentOptions { icon_label?: STRt = new StrInfo('label to use for a fontIcon doc (otherwise, the title is used)', false); mediaState?: STRt = new StrInfo(`status of audio/video media document: ${media_state.PendingRecording}, ${media_state.Recording}, ${media_state.Paused}, ${media_state.Playing}`, false); recording?: BOOLt = new BoolInfo('whether WebCam is recording or not'); + slides?: DOCt = new DocInfo('presentation slide associated with video recording (bcz: should be renamed!!)'); autoPlayAnchors?: BOOLt = new BoolInfo('whether to play audio/video when an anchor is clicked in a stackedTimeline.'); dontPlayLinkOnSelect?: BOOLt = new BoolInfo('whether an audio/video should start playing when a link is followed to it.'); openFactoryLocation?: string; // an OpenWhere value to place the factory created document openFactoryAsDelegate?: boolean; // - updateContentsScript?: ScriptField; // reactive script invoked when viewing a document that can update contents of a collection (or do anything) + onViewMounted?: ScriptField; // reactive script invoked Doc is viewed (used by showBackLinks view to update collection of links to Doc) toolTip?: string; // tooltip to display on hover toolType?: string; // type of pen tool expertMode?: BOOLt = new BoolInfo('something available only in expert (not novice) mode'); - contentPointerEvents?: string; // pointer events allowed for content of a document view. eg. set to "none" in menuSidebar for sharedDocs so that you can select a document, but not interact with its contents contextMenuFilters?: List<ScriptField>; contextMenuScripts?: List<ScriptField>; contextMenuLabels?: List<string>; contextMenuIcons?: List<string>; + childContentPointerEvents?: string; // pointer events allowed for content of a document view. eg. set to "none" in menuSidebar for sharedDocs so that you can select a document, but not interact with its contents childFilters_boolean?: string; childFilters?: List<string>; childLimitHeight?: NUMt = new NumInfo('whether to limit the height of collection children. 0 - means height can be no bigger than width', false); childLayoutTemplate?: Doc; // template for collection to use to render its children (see PresBox layout in tree view) childLayoutString?: string; // template string for collection to use to render its children childDocumentsActive?: BOOLt = new BoolInfo('whether child documents are active when parent is document active'); + childLayoutFitWidth?: BOOLt = new BoolInfo("whether a child doc's fitWith should be overriden by collection"); childDontRegisterViews?: BOOLt = new BoolInfo('whether child document views should be registered so that they can be found when following links, etc'); childHideLinkButton?: BOOLt = new BoolInfo('hide link buttons on all children'); childContextMenuFilters?: List<ScriptField>; @@ -402,7 +420,7 @@ export class DocumentOptions { _dropAction?: DROPt = new DAInfo("what should happen to this document when it's dropped somewhere else"); _dropPropertiesToRemove?: List<string>; // list of properties that should be removed from a document when it is dropped. e.g., a creator button may be forceActive to allow it be dragged, but the forceActive property can be removed from the dropped document cloneFieldFilter?: List<string>; // fields not to copy when the document is clonedclipboard?: Doc; - dragWhenActive?: BOOLt = new BoolInfo('should document drag when it is active - e.g., pileView, group'); + dragWhenActive?: BOOLt = new BoolInfo('should document drag when it is active instead of interacting with its contents - e.g., pileView, group'); dragAction?: DROPt = new DAInfo('how to drag document when it is active (e.g., tree, groups)'); dragFactory_count?: NUMt = new NumInfo('number of items created from a drag button (used for setting title with incrementing index)', false, true); dragFactory?: DOCt = new DocInfo('document to create when dragging with a suitable onDragStart script', false); @@ -472,9 +490,9 @@ export namespace Docs { _height: 35, _xMargin: 10, _yMargin: 10, - nativeDimModifiable: true, - nativeHeightUnfrozen: true, - layout_forceReflow: true, + layout_nativeDimEditable: true, + layout_reflowVertical: true, + layout_reflowHorizontal: true, defaultDoubleClick: 'ignore', systemIcon: 'BsFileEarmarkTextFill', }, @@ -488,13 +506,6 @@ export namespace Docs { }, ], [ - DocumentType.COLOR, - { - layout: { view: ColorBox, dataField: defaultDataKey }, - options: { _nativeWidth: 220, _nativeHeight: 300 }, - }, - ], - [ DocumentType.IMG, { layout: { view: ImageBox, dataField: defaultDataKey }, @@ -505,14 +516,24 @@ export namespace Docs { DocumentType.WEB, { layout: { view: WebBox, dataField: defaultDataKey }, - options: { _height: 300, _layout_fitWidth: true, nativeDimModifiable: true, nativeHeightUnfrozen: true, waitForDoubleClickToClick: 'always', systemIcon: 'BsGlobe' }, + options: { _height: 300, _layout_fitWidth: true, layout_nativeDimEditable: true, layout_reflowVertical: true, waitForDoubleClickToClick: 'always', systemIcon: 'BsGlobe' }, }, ], [ DocumentType.COL, { layout: { view: CollectionView, dataField: defaultDataKey }, - options: { _layout_fitWidth: true, freeform: '', _freeform_panX: 0, _freeform_panY: 0, _freeform_scale: 1, systemIcon: 'BsFillCollectionFill' }, + options: { + _layout_fitWidth: true, + freeform: '', + _freeform_panX: 0, + _freeform_panY: 0, + _freeform_scale: 1, + layout_nativeDimEditable: true, + layout_reflowHorizontal: true, + layout_reflowVertical: true, + systemIcon: 'BsFillCollectionFill', + }, }, ], [ @@ -533,7 +554,7 @@ export namespace Docs { DocumentType.AUDIO, { layout: { view: AudioBox, dataField: defaultDataKey }, - options: { _height: 100, layout_fitWidth: true, layout_forceReflow: true, nativeDimModifiable: true, systemIcon: 'BsFillVolumeUpFill' }, + options: { _height: 100, layout_fitWidth: true, layout_reflowHorizontal: true, layout_reflowVertical: true, layout_nativeDimEditable: true, systemIcon: 'BsFillVolumeUpFill' }, }, ], [ @@ -547,21 +568,14 @@ export namespace Docs { DocumentType.PDF, { layout: { view: PDFBox, dataField: defaultDataKey }, - options: { _layout_curPage: 1, _layout_fitWidth: true, nativeDimModifiable: true, nativeHeightUnfrozen: true, systemIcon: 'BsFileEarmarkPdfFill' }, + options: { _layout_curPage: 1, _layout_fitWidth: true, layout_nativeDimEditable: true, layout_reflowVertical: true, systemIcon: 'BsFileEarmarkPdfFill' }, }, ], [ DocumentType.MAP, { layout: { view: MapBox, dataField: defaultDataKey }, - options: { map: '', _height: 600, _width: 800, nativeDimModifiable: true, systemIcon: 'BsFillPinMapFill' }, - }, - ], - [ - DocumentType.IMPORT, - { - layout: { view: DirectoryImportBox, dataField: defaultDataKey }, - options: { _height: 150 }, + options: { map: '', _height: 600, _width: 800, layout_reflowHorizontal: true, layout_reflowVertical: true, layout_nativeDimEditable: true, systemIcon: 'BsFillPinMapFill' }, }, ], [ @@ -613,14 +627,25 @@ export namespace Docs { DocumentType.EQUATION, { layout: { view: EquationBox, dataField: 'text' }, - options: { nativeDimModifiable: true, fontSize: '14px', layout_hideResizeHandles: true, layout_hideDecorationTitle: true, systemIcon: 'BsCalculatorFill' }, ///systemIcon: 'BsSuperscript' + BsSubscript + options: { + fontSize: '14px', + layout_reflowHorizontal: true, + layout_reflowVertical: true, + layout_nativeDimEditable: true, + layout_hideDecorationTitle: true, + systemIcon: 'BsCalculatorFill', + }, ///systemIcon: 'BsSuperscript' + BsSubscript }, ], [ DocumentType.FUNCPLOT, { layout: { view: FunctionPlotBox, dataField: defaultDataKey }, - options: { nativeDimModifiable: true }, + options: { + layout_reflowHorizontal: true, + layout_reflowVertical: true, + layout_nativeDimEditable: true, + }, }, ], [ @@ -634,7 +659,7 @@ export namespace Docs { DocumentType.PRES, { layout: { view: PresBox, dataField: defaultDataKey }, - options: { defaultDoubleClick: 'ignore', layout_hideLinkAnchors: true }, + options: { defaultDoubleClick: 'ignore', hideClickBehaviors: true, layout_hideLinkAnchors: true }, }, ], [ @@ -672,12 +697,12 @@ export namespace Docs { layout: { view: InkingStroke, dataField: 'stroke' }, options: { systemIcon: 'BsFillPencilFill', // - nativeDimModifiable: true, - nativeHeightUnfrozen: true, + layout_nativeDimEditable: true, + layout_reflowVertical: true, + layout_reflowHorizontal: true, layout_hideDecorationTitle: true, // don't show title when selected fitWidth: false, layout_isSvg: true, - layout_forceReflow: true, }, }, ], @@ -685,7 +710,7 @@ export namespace Docs { DocumentType.SCREENSHOT, { layout: { view: ScreenshotBox, dataField: defaultDataKey }, - options: { nativeDimModifiable: true, nativeHeightUnfrozen: true, systemIcon: 'BsCameraFill' }, + options: { layout_nativeDimEditable: true, systemIcon: 'BsCameraFill' }, }, ], [ @@ -693,7 +718,7 @@ export namespace Docs { { data: '', layout: { view: ComparisonBox, dataField: defaultDataKey }, - options: { backgroundColor: 'gray', dropAction: 'move', waitForDoubleClickToClick: 'always', systemIcon: 'BsLayoutSplit' }, + options: { backgroundColor: 'gray', dropAction: 'move', waitForDoubleClickToClick: 'always', layout_reflowHorizontal: true, layout_reflowVertical: true, layout_nativeDimEditable: true, systemIcon: 'BsLayoutSplit' }, }, ], [ @@ -714,14 +739,14 @@ export namespace Docs { DocumentType.DATAVIZ, { layout: { view: DataVizBox, dataField: defaultDataKey }, - options: { dataViz_title: '', dataViz_line: '', dataViz_pie: '', dataViz_histogram: '', dataViz: 'table', _layout_fitWidth: true, nativeDimModifiable: true }, + options: { dataViz_title: '', dataViz_line: '', dataViz_pie: '', dataViz_histogram: '', dataViz: 'table', _layout_fitWidth: true, layout_reflowHorizontal: true, layout_reflowVertical: true, layout_nativeDimEditable: true }, }, ], [ DocumentType.LOADING, { layout: { view: LoadingBox, dataField: '' }, - options: { _layout_fitWidth: true, _fitHeight: true, nativeDimModifiable: true }, + options: { _layout_fitWidth: true, _fitHeight: true, layout_nativeDimEditable: true }, }, ], [ @@ -731,11 +756,9 @@ export namespace Docs { layout: { view: PhysicsSimulationBox, dataField: defaultDataKey, _width: 1000, _height: 800 }, options: { _height: 100, - layout_forceReflow: true, - nativeHeightUnfrozen: true, mass1: '', mass2: '', - nativeDimModifiable: true, + layout_nativeDimEditable: true, position: '', acceleration: '', pendulum: '', @@ -754,6 +777,20 @@ export namespace Docs { options: {}, }, ], + [ + DocumentType.MAPROUTE, + { + layout: { view: CollectionView, dataField: defaultDataKey }, + options: {}, + }, + ], + [ + DocumentType.CALENDAR, + { + layout: { view: CalendarBox, dataField: defaultDataKey }, + options: {}, + }, + ], ]); const suffix = 'Proto'; @@ -948,7 +985,7 @@ export namespace Docs { export function ImageDocument(url: string | ImageField, options: DocumentOptions = {}, overwriteDoc?: Doc) { const imgField = url instanceof ImageField ? url : new ImageField(url); - return InstanceFromProto(Prototypes.get(DocumentType.IMG), imgField, { _nativeDimModifiable: false, _nativeHeightUnfrozen: false, title: basename(imgField.url.href), ...options }, undefined, undefined, undefined, overwriteDoc); + return InstanceFromProto(Prototypes.get(DocumentType.IMG), imgField, { title: basename(imgField.url.href), ...options }, undefined, undefined, undefined, overwriteDoc); } export function PresDocument(options: DocumentOptions = {}) { @@ -991,9 +1028,6 @@ export namespace Docs { return InstanceFromProto(Prototypes.get(DocumentType.SEARCH), new List<Doc>([]), options); } - export function ColorDocument(options: DocumentOptions = {}) { - return InstanceFromProto(Prototypes.get(DocumentType.COLOR), '', options); - } export function LoadingDocument(file: File | string, options: DocumentOptions) { return InstanceFromProto(Prototypes.get(DocumentType.LOADING), undefined, { _height: 150, _width: 200, title: typeof file == 'string' ? file : file.name, ...options }, undefined, ''); } @@ -1042,7 +1076,18 @@ export namespace Docs { return linkDoc; } - export function InkDocument(color: string, strokeWidth: number, stroke_bezier: string, fillColor: string, arrowStart: string, arrowEnd: string, dash: string, points: PointData[], isInkMask: boolean, options: DocumentOptions = {}) { + export function InkDocument( + points: PointData[], + options: DocumentOptions = {}, + strokeWidth = ActiveInkWidth(), + color = ActiveInkColor(), + stroke_bezier = ActiveInkBezierApprox(), + fillColor = ActiveFillColor(), + arrowStart = ActiveArrowStart(), + arrowEnd = ActiveArrowEnd(), + dash = ActiveDash(), + isInkMask = ActiveIsInkMask() + ) { const ink = InstanceFromProto(Prototypes.get(DocumentType.INK), '', { title: 'ink', ...options }); const I = Doc.GetProto(ink); // I.layout_hideOpenButton = true; // don't show open full screen button when selected @@ -1096,13 +1141,21 @@ export namespace Docs { return InstanceFromProto(Prototypes.get(DocumentType.PUSHPIN), new List(documents), { latitude, longitude, infoWindowOpen, ...options }, id); } + export function MapRouteDocument(infoWindowOpen: boolean, documents: Array<Doc>, options: DocumentOptions, id?: string) { + return InstanceFromProto(Prototypes.get(DocumentType.MAPROUTE), new List(documents), { infoWindowOpen, ...options }, id); + } + + export function CalendarDocument(options: DocumentOptions, documents: Array<Doc>) { + return InstanceFromProto(Prototypes.get(DocumentType.CALENDAR), new List(documents), { ...options }); + } + // shouldn't ever need to create a KVP document-- instead set the LayoutTemplateString to be a KeyValueBox for the DocumentView (see addDocTab in TabDocView) // export function KVPDocument(document: Doc, options: DocumentOptions = {}) { // return InstanceFromProto(Prototypes.get(DocumentType.KVP), document, { title: document.title + '.kvp', ...options }); // } export function FreeformDocument(documents: Array<Doc>, options: DocumentOptions, id?: string) { - const inst = InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { _xPadding: 20, _yPadding: 20, ...options, _type_collection: CollectionViewType.Freeform }, id); + const inst = InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, _type_collection: CollectionViewType.Freeform }, id); documents.forEach(d => Doc.SetContainer(d, inst)); return inst; } @@ -1150,6 +1203,10 @@ export namespace Docs { return doc; } + export function CalendarCollectionDocument(documents: Array<Doc>, options: DocumentOptions) { + return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, _type_collection: CollectionViewType.Calendar }); + } + export function StackingDocument(documents: Array<Doc>, options: DocumentOptions, id?: string, protoId?: string) { return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, _type_collection: CollectionViewType.Stacking }, id, undefined, protoId); } @@ -1185,7 +1242,7 @@ export namespace Docs { } export function FunctionPlotDocument(documents: Array<Doc>, options?: DocumentOptions) { - return InstanceFromProto(Prototypes.get(DocumentType.FUNCPLOT), new List(documents), { ...(options || {}) }); + return InstanceFromProto(Prototypes.get(DocumentType.FUNCPLOT), new List(documents), { title: 'func plot', ...(options || {}) }); } export function ButtonDocument(options?: DocumentOptions) { @@ -1210,10 +1267,6 @@ export namespace Docs { return ret; } - export function DirectoryImportDocument(options: DocumentOptions = {}) { - return InstanceFromProto(Prototypes.get(DocumentType.IMPORT), new List<Doc>(), options); - } - export type DocConfig = { doc: Doc; initialWidth?: number; @@ -1253,6 +1306,40 @@ export namespace Docs { } export namespace DocUtils { + function matchFieldValue(doc: Doc, key: string, value: any): boolean { + const hasFunctionFilter = Utils.HasFunctionFilter(value); + if (hasFunctionFilter) { + return hasFunctionFilter(StrCast(doc[key])); + } + if (key === LinkedTo) { + // 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('='); + if (linkedToExp.length === 1) return Field.toScriptString(anchor) === value; + return Field.toScriptString(DocCast(anchor[linkedToExp[0]])) === linkedToExp[1]; + }; + // prettier-ignore + return (value === Doc.FilterNone && !allLinks.length) || + (value === Doc.FilterAny && !!allLinks.length) || + (allLinks.some(link => matchLink(value,DocCast(link.link_anchor_1)) || + matchLink(value,DocCast(link.link_anchor_2)) )); + } + if (typeof value === 'string') { + value = value.replace(`,${Utils.noRecursionHack}`, ''); + } + const fieldVal = doc[key]; + // prettier-ignore + if ((value === Doc.FilterAny && fieldVal !== undefined) || + (value === Doc.FilterNone && fieldVal === undefined)) { + return true; + } + const vals = StrListCast(fieldVal); // list typing is very imperfect. casting to a string list doesn't mean that the entries will actually be strings + if (vals.length) { + return vals.some(v => typeof v === 'string' && v.includes(value)); // bcz: arghh: Todo: comparison should be parameterized as exact, or substring + } + return Field.toString(fieldVal as Field).includes(value); // bcz: arghh: Todo: comparison should be parameterized as exact, or substring + } /** * @param docs * @param childFilters @@ -1284,7 +1371,7 @@ export namespace DocUtils { if (d.cookies && (!filterFacets.cookies || !Object.keys(filterFacets.cookies).some(key => d.cookies === key))) { return false; } - for (const facetKey of Object.keys(filterFacets).filter(fkey => fkey !== 'cookies' && fkey !== Utils.noDragsDocFilter.split(Doc.FilterSep)[0])) { + for (const facetKey of Object.keys(filterFacets).filter(fkey => fkey !== 'cookies' && fkey !== Utils.noDragDocsFilter.split(Doc.FilterSep)[0])) { const facet = filterFacets[facetKey]; // facets that match some value in the field of the document (e.g. some text field) @@ -1303,8 +1390,8 @@ export namespace DocUtils { const xs = Object.keys(facet).filter(value => facet[value] === 'x'); if (!unsets.length && !exists.length && !xs.length && !checks.length && !matches.length) return true; - const failsNotEqualFacets = !xs.length ? false : xs.some(value => Doc.matchFieldValue(d, facetKey, value)); - const satisfiesCheckFacets = !checks.length ? true : checks.some(value => Doc.matchFieldValue(d, facetKey, value)); + const failsNotEqualFacets = !xs.length ? false : xs.some(value => matchFieldValue(d, facetKey, value)); + const satisfiesCheckFacets = !checks.length ? true : checks.some(value => matchFieldValue(d, facetKey, value)); const satisfiesExistsFacets = !exists.length ? true : exists.some(value => (facetKey !== LinkedTo ? d[facetKey] !== undefined : LinkManager.Instance.getAllRelatedLinks(d).length)); const satisfiesUnsetsFacets = !unsets.length ? true : unsets.some(value => d[facetKey] === undefined); const satisfiesMatchFacets = !matches.length @@ -1369,17 +1456,17 @@ export namespace DocUtils { TaskCompletionBox.popupY = showPopup[1] - 33; TaskCompletionBox.taskCompleted = true; - LinkDescriptionPopup.popupX = showPopup[0]; - LinkDescriptionPopup.popupY = showPopup[1]; - LinkDescriptionPopup.descriptionPopup = true; + LinkDescriptionPopup.Instance.popupX = showPopup[0]; + LinkDescriptionPopup.Instance.popupY = showPopup[1]; + LinkDescriptionPopup.Instance.display = true; const rect = document.body.getBoundingClientRect(); - if (LinkDescriptionPopup.popupX + 200 > rect.width) { - LinkDescriptionPopup.popupX -= 190; + if (LinkDescriptionPopup.Instance.popupX + 200 > rect.width) { + LinkDescriptionPopup.Instance.popupX -= 190; TaskCompletionBox.popupX -= 40; } - if (LinkDescriptionPopup.popupY + 100 > rect.height) { - LinkDescriptionPopup.popupY -= 40; + if (LinkDescriptionPopup.Instance.popupY + 100 > rect.height) { + LinkDescriptionPopup.Instance.popupY -= 40; TaskCompletionBox.popupY -= 40; } @@ -1398,7 +1485,7 @@ export namespace DocUtils { { 'acl-Guest': SharingPermissions.Augment, '_acl-Guest': SharingPermissions.Augment, - title: ComputedField.MakeFunction('generateLinkTitle(self)') as any, + title: ComputedField.MakeFunction('generateLinkTitle(this)') as any, link_anchor_1_useSmallAnchor: source.useSmallAnchor ? true : undefined, link_anchor_2_useSmallAnchor: target.useSmallAnchor ? true : undefined, link_displayLine: linkSettings.link_displayLine, @@ -1421,7 +1508,7 @@ export namespace DocUtils { Object.keys(scripts).map(key => { const script = scripts[key]; if (ScriptCast(doc[key])?.script.originalScript !== scripts[key] && script) { - doc[key] = ScriptField.MakeScript(script, { + (key.startsWith('_') ? doc : Doc.GetProto(doc))[key] = ScriptField.MakeScript(script, { self: Doc.name, this: Doc.name, dragData: DragManager.DocumentDragData.name, @@ -1445,7 +1532,7 @@ export namespace DocUtils { const cfield = ComputedField.WithoutComputed(() => FieldValue(doc[key])); if (ScriptCast(cfield)?.script.originalScript !== funcs[key]) { const setFunc = Cast(funcs[key + '-setter'], 'string', null); - doc[key] = funcs[key] ? ComputedField.MakeFunction(funcs[key], { dragData: DragManager.DocumentDragData.name }, { _readOnly_: true }, setFunc) : undefined; + (key.startsWith('_') ? doc : Doc.GetProto(doc))[key] = funcs[key] ? ComputedField.MakeFunction(funcs[key], { dragData: DragManager.DocumentDragData.name }, { _readOnly_: true }, setFunc) : undefined; } }); return doc; @@ -1492,7 +1579,7 @@ export namespace DocUtils { created = Docs.Create.AudioDocument(field.url.href, resolved); created.layout = AudioBox.LayoutString(fieldKey); } else if (field instanceof InkField) { - created = Docs.Create.InkDocument(ActiveInkColor(), ActiveInkWidth(), ActiveInkBezierApprox(), ActiveFillColor(), ActiveArrowStart(), ActiveArrowEnd(), ActiveDash(), field.inkData, ActiveIsInkMask(), resolved); + created = Docs.Create.InkDocument(field.inkData, resolved); created.layout = InkingStroke.LayoutString(fieldKey); } else if (field instanceof List && field[0] instanceof Doc) { created = Docs.Create.StackingDocument(DocListCast(field), resolved); @@ -1566,7 +1653,7 @@ export namespace DocUtils { options = { ...options, _width: 400, _height: 512, title: path }; } - return ctor ? ctor(path, options, overwriteDoc) : undefined; + return ctor ? ctor(path, overwriteDoc ? { ...options, title: StrCast(overwriteDoc.title, path) } : options, overwriteDoc) : undefined; } export function addDocumentCreatorMenuItems(docTextAdder: (d: Doc) => void, docAdder: (d: Doc) => void, x: number, y: number, simpleMenu: boolean = false, pivotField?: string, pivotValue?: string): void { @@ -1607,7 +1694,7 @@ export namespace DocUtils { newDoc.x = x; newDoc.y = y; EquationBox.SelectOnLoad = newDoc[Id]; - if (newDoc.type === DocumentType.RTF) FormattedTextBox.SelectOnLoad = newDoc[Id]; + if (newDoc.type === DocumentType.RTF) FormattedTextBox.SetSelectOnLoad(newDoc); if (pivotField) { newDoc[pivotField] = pivotValue; } @@ -1651,7 +1738,7 @@ export namespace DocUtils { } export function createCustomView(doc: Doc, creator: Opt<(documents: Array<Doc>, options: DocumentOptions, id?: string) => Doc>, templateSignature: string = 'custom', docLayoutTemplate?: Doc) { const templateName = templateSignature.replace(/\(.*\)/, ''); - docLayoutTemplate = docLayoutTemplate || findTemplate(templateName, StrCast(doc._isGroup && doc.transcription ? 'transcription' : doc.type), templateSignature); + docLayoutTemplate = docLayoutTemplate || findTemplate(templateName, StrCast(doc.isGroup && doc.transcription ? 'transcription' : doc.type), templateSignature); const customName = 'layout_' + templateSignature; const _width = NumCast(doc._width); @@ -1787,6 +1874,7 @@ export namespace DocUtils { proto['data_nativeHeight'] = result.nativeWidth < result.nativeHeight ? (maxNativeDim * result.nativeWidth) / result.nativeHeight : maxNativeDim; proto['data_nativeWidth'] = result.nativeWidth < result.nativeHeight ? maxNativeDim : maxNativeDim / (result.nativeWidth / result.nativeHeight); } + proto.data_exif = JSON.stringify(result.exifData?.data); proto.data_contentSize = result.contentSize; // exif gps data coordinates are stored in DMS (Degrees Minutes Seconds), the following operation converts that to decimal coordinates const latitude = result.exifData?.data?.GPSLatitude; @@ -1802,23 +1890,23 @@ export namespace DocUtils { proto.data_duration = result.duration; } if (overwriteDoc) { - Doc.removeCurrentlyLoading(overwriteDoc); + LoadingBox.removeCurrentlyLoading(overwriteDoc); } generatedDocuments.push(doc); } } - export function GetNewTextDoc(title: string, x: number, y: number, width?: number, height?: number, noMargins?: boolean, annotationOn?: Doc, maxHeight?: number, backgroundColor?: string) { + export function GetNewTextDoc(title: string, x: number, y: number, width?: number, height?: number, noMargins?: boolean, annotationOn?: Doc, backgroundColor?: string) { const tbox = Docs.Create.TextDocument('', { _xMargin: noMargins ? 0 : undefined, _yMargin: noMargins ? 0 : undefined, annotationOn, - layout_maxAutoHeight: maxHeight, backgroundColor, _width: width || 200, _height: 35, x: x, y: y, + _layout_centered: BoolCast(Doc.UserDoc().layout_centered), _layout_fitWidth: true, _layout_autoHeight: true, _layout_enableAltContentUI: BoolCast(Doc.UserDoc().defaultToFlashcards), @@ -1837,16 +1925,16 @@ export namespace DocUtils { const generatedDocuments: Doc[] = []; Networking.UploadYoutubeToServer(videoId, overwriteDoc?.[Id]).then(upfiles => { const { - source: { name, type }, + source: { newFilename, originalFilename, mimetype }, result, } = upfiles.lastElement(); if ((result as any).message) { if (overwriteDoc) { overwriteDoc.isLoading = false; overwriteDoc.loadingError = (result as any).message; - Doc.removeCurrentlyLoading(overwriteDoc); + LoadingBox.removeCurrentlyLoading(overwriteDoc); } - } else name && processFileupload(generatedDocuments, name, type, result, options, overwriteDoc); + } else newFilename && processFileupload(generatedDocuments, newFilename, mimetype ?? '', result, options, overwriteDoc); }); } @@ -1866,10 +1954,10 @@ export namespace DocUtils { const upfiles = await Networking.UploadFilesToServer(fileNoGuidPairs); for (const { - source: { name, type }, + source: { newFilename, mimetype }, result, } of upfiles) { - name && type && processFileupload(generatedDocuments, name, type, result, options); + newFilename && mimetype && processFileupload(generatedDocuments, newFilename, mimetype, result, options); } return generatedDocuments; } @@ -1879,15 +1967,15 @@ export namespace DocUtils { // Since this file has an overwriteDoc, we can set the client tracking guid to the overwriteDoc's guid. Networking.UploadFilesToServer([{ file, guid: overwriteDoc[Id] }]).then(upfiles => { const { - source: { name, type }, + source: { newFilename, mimetype }, result, - } = upfiles.lastElement() ?? { source: { name: '', type: '' }, result: { message: 'upload failed' } }; + } = upfiles.lastElement() ?? { source: { newFilename: '', mimetype: '' }, result: { message: 'upload failed' } }; if ((result as any).message) { if (overwriteDoc) { overwriteDoc.loadingError = (result as any).message; - Doc.removeCurrentlyLoading(overwriteDoc); + LoadingBox.removeCurrentlyLoading(overwriteDoc); } - } else name && type && processFileupload(generatedDocuments, name, type, result, options, overwriteDoc); + } else newFilename && mimetype && processFileupload(generatedDocuments, newFilename, mimetype, result, options, overwriteDoc); }); } @@ -1920,9 +2008,9 @@ ScriptingGlobals.add(function makeDelegate(proto: any) { const d = Docs.Create.DelegateDocument(proto, { title: 'child of ' + proto.title }); return d; }); -ScriptingGlobals.add(function generateLinkTitle(self: Doc) { - const link_anchor_1title = self.link_anchor_1 && self.link_anchor_1 !== self ? Cast(self.link_anchor_1, Doc, null)?.title : '<?>'; - const link_anchor_2title = self.link_anchor_2 && self.link_anchor_2 !== self ? Cast(self.link_anchor_2, Doc, null)?.title : '<?>'; - const relation = self.link_relationship || 'to'; +ScriptingGlobals.add(function generateLinkTitle(link: Doc) { + const link_anchor_1title = link.link_anchor_1 && link.link_anchor_1 !== link ? Cast(link.link_anchor_1, Doc, null)?.title : '<?>'; + const link_anchor_2title = link.link_anchor_2 && link.link_anchor_2 !== link ? Cast(link.link_anchor_2, Doc, null)?.title : '<?>'; + const relation = link.link_relationship || 'to'; return `${link_anchor_1title} (${relation}) ${link_anchor_2title}`; }); diff --git a/src/client/goldenLayout.js b/src/client/goldenLayout.js index e789d8e20..2b94d35ee 100644 --- a/src/client/goldenLayout.js +++ b/src/client/goldenLayout.js @@ -1589,7 +1589,7 @@ blockedPopoutsThrowError: true, closePopoutsOnUnload: true, showPopoutIcon: true, - showMaximiseIcon: true, + showMaximiseIcon: false, showCloseIcon: true, responsiveMode: 'onload', // Can be onload, always, or none. tabOverlapAllowance: 0, // maximum pixel overlap per tab @@ -2622,7 +2622,7 @@ /** * Maximise control - set the component to the full size of the layout */ - if (this._getHeaderSetting('maximise')) { + if (false && this._getHeaderSetting('maximise')) { maximise = lm.utils.fnBind(this.parent.toggleMaximise, this.parent); maximiseLabel = this._getHeaderSetting('maximise'); minimiseLabel = this._getHeaderSetting('minimise'); @@ -2640,7 +2640,7 @@ /** * Close button */ - if (this._isClosable()) { + if (false && this._isClosable()) { closeStack = lm.utils.fnBind(this.parent.remove, this.parent); label = this._getHeaderSetting('close'); this.closeButton = new lm.controls.HeaderButton(this, label, 'lm_close', closeStack); diff --git a/src/client/util/BranchingTrailManager.tsx b/src/client/util/BranchingTrailManager.tsx index a224b84f4..02879e3c4 100644 --- a/src/client/util/BranchingTrailManager.tsx +++ b/src/client/util/BranchingTrailManager.tsx @@ -1,4 +1,4 @@ -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc } from '../../fields/Doc'; @@ -15,13 +15,14 @@ export class BranchingTrailManager extends React.Component { constructor(props: any) { super(props); + makeObservable(this); if (!BranchingTrailManager.Instance) { BranchingTrailManager.Instance = this; } } setupUi = () => { - OverlayView.Instance.addWindow(<BranchingTrailManager></BranchingTrailManager>, { x: 100, y: 150, width: 1000, title: 'Branching Trail'}); + OverlayView.Instance.addWindow(<BranchingTrailManager></BranchingTrailManager>, { x: 100, y: 150, width: 1000, title: 'Branching Trail' }); // OverlayView.Instance.forceUpdate(); console.log(OverlayView.Instance); // let hi = Docs.Create.TextDocument("beee", { @@ -30,11 +31,10 @@ export class BranchingTrailManager extends React.Component { // }) // hi.overlayX = 100; // hi.overlayY = 100; - + // Doc.AddToMyOverlay(hi); console.log(DocumentManager._overlayViews); }; - // stack of the history @observable private slideHistoryStack: String[] = []; @@ -54,7 +54,7 @@ export class BranchingTrailManager extends React.Component { @observable private docIdToDocMap: Map<String, Doc> = new Map<String, Doc>(); observeDocumentChange = (targetDoc: Doc, pres: PresBox) => { - const presId = pres.props.Document[Id]; + const presId = pres.Document[Id]; if (this.prevPresId === presId) { return; } @@ -69,7 +69,7 @@ export class BranchingTrailManager extends React.Component { if (this.prevPresId === null || this.prevPresId !== presId) { Doc.UserDoc().isBranchingMode = true; this.setPrevPres(presId); - + // REVERT THE SET const stringified = [presId, targetDocId].toString(); if (this.containsSet.has([presId, targetDocId].toString())) { @@ -98,7 +98,7 @@ export class BranchingTrailManager extends React.Component { const newStack = this.slideHistoryStack.slice(0, removeIndex); const removed = this.slideHistoryStack.slice(removeIndex); - + this.setSlideHistoryStack(newStack); removed.forEach(info => this.containsSet.delete(info.toString())); diff --git a/src/client/util/CalendarManager.scss b/src/client/util/CalendarManager.scss new file mode 100644 index 000000000..114e19a0e --- /dev/null +++ b/src/client/util/CalendarManager.scss @@ -0,0 +1,62 @@ +.calendar-interface{ + width: 600px; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + gap: 7px; + padding: 10px; + + .selected-doc-title{ + font-size: 1.4em; + } + + .creation-type-container{ + display: flex; + justify-content: center; + align-items: center; + align-self: center; + gap: 12px; + + .calendar-creation{ + cursor: pointer; + } + + .calendar-creation-selected{ + border-bottom: 2px solid white; + } + } + + .choose-calendar-container{ + margin-top: 10px; + align-self: center; + width: 60%; + } + + .description-container{ + margin-top: 10px; + align-self: center; + width: 60%; + } + + .date-range-picker-container{ + margin-top: 5px; + align-self: center; + display: flex; + flex-direction: column; + gap: 2px; + } + + .create-button-container{ + + margin-top: 5px; + align-self: center; + + .button-content{ + font-size: 1.2em; + padding: 10px; + border-radius: 5px; + background-color: #EFF2F7; + } + } +} diff --git a/src/client/util/CalendarManager.tsx b/src/client/util/CalendarManager.tsx new file mode 100644 index 000000000..6e9094b3a --- /dev/null +++ b/src/client/util/CalendarManager.tsx @@ -0,0 +1,356 @@ +import { TextField } from '@mui/material'; +import { action, computed, makeObservable, observable, runInAction } from 'mobx'; +import { observer } from 'mobx-react'; +import * as React from 'react'; +import Select from 'react-select'; +import { Doc, DocListCast } from '../../fields/Doc'; +import { DocData } from '../../fields/DocSymbols'; +import { StrCast } from '../../fields/Types'; +import { DictationOverlay } from '../views/DictationOverlay'; +import { MainViewModal } from '../views/MainViewModal'; +import { DocumentView } from '../views/nodes/DocumentView'; +import { TaskCompletionBox } from '../views/nodes/TaskCompletedBox'; +import './CalendarManager.scss'; +import { DocumentManager } from './DocumentManager'; +import { SelectionManager } from './SelectionManager'; +import { SettingsManager } from './SettingsManager'; +// import { DateRange, Range, RangeKeyDict } from 'react-date-range'; +import { DateRangePicker, Provider, defaultTheme } from '@adobe/react-spectrum'; +import { IconLookup, faPlus } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Button } from 'browndash-components'; +import { Docs } from '../documents/Documents'; +import { ObservableReactComponent } from '../views/ObservableReactComponent'; +// import 'react-date-range/dist/styles.css'; +// import 'react-date-range/dist/theme/default.css'; + +type CreationType = 'new-calendar' | 'existing-calendar' | 'manage-calendars'; + +interface CalendarSelectOptions { + label: string; + value: string; +} + +const formatCalendarDateToString = (calendarDate: any) => { + console.log('Formatting the following date: ', calendarDate); + const date = new Date(calendarDate.year, calendarDate.month - 1, calendarDate.day); + console.log(typeof date); + const year = date.getFullYear(); + const month = String(date.getMonth() + 1).padStart(2, '0'); + const day = String(date.getDate()).padStart(2, '0'); + + return `${year}-${month}-${day}`; +}; + +// TODO: If doc is already part of a calendar, display that +// TODO: For a doc already in a calendar: give option to edit date range, delete from calendar + +@observer +export class CalendarManager extends ObservableReactComponent<{}> { + public static Instance: CalendarManager; + @observable private isOpen = false; + @observable private targetDoc: Doc | undefined = undefined; // the target document + @observable private targetDocView: DocumentView | undefined = undefined; // the DocumentView of the target doc + @observable private dialogueBoxOpacity = 1; // for the modal + @observable private overlayOpacity = 0.4; // for the modal + + @observable private layoutDocAcls: boolean = false; // whether the layout doc or data doc's acls are to be used + + @observable private creationType: CreationType = 'new-calendar'; + + @observable private existingCalendars: Doc[] = DocListCast(Doc.MyCalendars?.data); + + @computed get selectOptions() { + return this.existingCalendars.map(calendar => ({ label: StrCast(calendar.title), value: StrCast(calendar.title) })); + } + + @observable + selectedExistingCalendarOption: CalendarSelectOptions | null = null; + + @observable + calendarName: string = ''; + + @observable + calendarDescription: string = ''; + + @observable + errorMessage: string = ''; + + @action + setInterationType = (type: CreationType) => { + this.errorMessage = ''; + this.calendarName = ''; + this.creationType = type; + }; + + public open = (target?: DocumentView, target_doc?: Doc) => { + console.log('hi'); + runInAction(() => { + this.targetDoc = target_doc || target?.Document; + this.targetDocView = target; + DictationOverlay.Instance.hasActiveModal = true; + this.isOpen = this.targetDoc !== undefined; + }); + }; + + public close = action(() => { + this.isOpen = false; + TaskCompletionBox.taskCompleted = false; + setTimeout( + action(() => { + DictationOverlay.Instance.hasActiveModal = false; + this.targetDoc = undefined; + }), + 500 + ); + this.layoutDocAcls = false; + }); + + constructor(props: {}) { + super(props); + CalendarManager.Instance = this; + makeObservable(this); + } + + componentDidMount(): void {} + + @action + handleSelectChange = (option: any) => { + if (option) { + let selectOpt = option as CalendarSelectOptions; + this.selectedExistingCalendarOption = selectOpt; + this.calendarName = selectOpt.value; // or label + } + }; + + @action + handleCalendarTitleChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => { + console.log('Existing calendars: ', this.existingCalendars); + this.calendarName = event.target.value; + }; + + @action + handleCalendarDescriptionChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => { + this.calendarDescription = event.target.value; + }; + + // TODO: Make undoable + private addToCalendar = () => { + let docs = SelectionManager.Views.length < 2 ? [this.targetDoc] : SelectionManager.Views.map(docView => docView.Document); + const targetDoc = this.layoutDocAcls ? docs[0] : docs[0]?.[DocData]; // doc to add to calendar + + console.log(targetDoc); + if (targetDoc) { + let calendar: Doc; + if (this.creationType === 'new-calendar') { + if (!this.existingCalendars.find(doc => StrCast(doc.title) === this.calendarName)) { + console.log('creating...'); + calendar = Docs.Create.CalendarDocument( + { + title: this.calendarName, + description: this.calendarDescription, + }, + [] + ); + console.log('successful calendar creation'); + } else { + this.errorMessage = 'Calendar with this name already exists'; + return; + } + } else { + // find existing calendar based on selected name (should technically always find one) + const existingCalendar = this.existingCalendars.find(calendar => StrCast(calendar.title) === this.calendarName); + if (existingCalendar) calendar = existingCalendar; + else { + this.errorMessage = 'Must select an existing calendar'; + return; + } + } + // Get start and end date strings + const startDateStr = formatCalendarDateToString(this.selectedDateRange.start); + const endDateStr = formatCalendarDateToString(this.selectedDateRange.end); + + console.log('start date: ', startDateStr); + console.log('end date: ', endDateStr); + + const subDocEmbedding = Doc.MakeEmbedding(targetDoc); // embedding + console.log('subdoc embedding', subDocEmbedding); + subDocEmbedding.embedContainer = calendar; // set embed container + subDocEmbedding.date_range = `${startDateStr}|${endDateStr}`; // set subDoc date range + + Doc.AddDocToList(calendar, 'data', subDocEmbedding); // add embedded subDoc to calendar + + console.log('my calendars: ', Doc.MyCalendars); + if (this.creationType === 'new-calendar') { + Doc.AddDocToList(Doc.MyCalendars, 'data', calendar); // add to new calendar to dashboard calendars + } + } + }; + + private focusOn = (contents: string) => { + const title = this.targetDoc ? StrCast(this.targetDoc.title) : ''; + const docs = SelectionManager.Views.length > 1 ? SelectionManager.Views.map(docView => docView.Document) : [this.targetDoc]; + return ( + <span + className="focus-span" + title={title} + onClick={() => { + if (this.targetDoc && this.targetDocView && docs.length === 1) { + DocumentManager.Instance.showDocument(this.targetDoc, { willZoomCentered: true }); + } + }} + onPointerEnter={action(() => { + if (docs.length) { + docs.forEach(doc => doc && Doc.BrushDoc(doc)); + this.dialogueBoxOpacity = 0.1; + this.overlayOpacity = 0.1; + } + })} + onPointerLeave={action(() => { + if (docs.length) { + docs.forEach(doc => doc && Doc.UnBrushDoc(doc)); + this.dialogueBoxOpacity = 1; + this.overlayOpacity = 0.4; + } + })}> + {contents} + </span> + ); + }; + + @observable + selectedDateRange: any = [ + { + start: new Date(), + end: new Date(), + }, + ]; + + @action + setSelectedDateRange = (range: any) => { + console.log('Range: ', range); + this.selectedDateRange = range; + }; + + @computed + get createButtonActive() { + if (this.calendarName.length === 0 || this.errorMessage.length > 0) return false; // disabled if no calendar name + let startDate: Date | undefined; + let endDate: Date | undefined; + try { + startDate = this.selectedDateRange.start; + endDate = this.selectedDateRange.end; + console.log(startDate); + console.log(endDate); + } catch (e: any) { + console.log(e); + return false; // disabled + } + if (!startDate || !endDate) return false; // disabled if any is undefined + return true; + } + + @computed + get calendarInterface() { + let docs = SelectionManager.Views.length < 2 ? [this.targetDoc] : SelectionManager.Views.map(docView => docView.Document); + const targetDoc = this.layoutDocAcls ? docs[0] : docs[0]?.[DocData]; + + const currentDate = new Date(); + + return ( + <div + className="calendar-interface" + style={{ + background: SettingsManager.userBackgroundColor, + color: StrCast(Doc.UserDoc().userColor), + }}> + <p className="selected-doc-title" style={{ color: SettingsManager.userColor }}> + <b>{this.focusOn(docs.length < 2 ? StrCast(targetDoc?.title, 'this document') : '-multiple-')}</b> + </p> + <div className="creation-type-container"> + <div className={`calendar-creation ${this.creationType === 'new-calendar' ? 'calendar-creation-selected' : ''}`} onClick={e => this.setInterationType('new-calendar')}> + Add to New Calendar + </div> + <div className={`calendar-creation ${this.creationType === 'existing-calendar' ? 'calendar-creation-selected' : ''}`} onClick={e => this.setInterationType('existing-calendar')}> + Add to Existing calendar + </div> + </div> + <div className="choose-calendar-container"> + {this.creationType === 'new-calendar' ? ( + <TextField + fullWidth + onChange={this.handleCalendarTitleChange} + label="Calendar name" + placeholder="Enter a name..." + variant="filled" + style={{ + backgroundColor: 'white', + color: 'black', + borderRadius: '5px', + }} + /> + ) : ( + <Select + className="existing-calendar-search" + placeholder="Search for existing calendar..." + isClearable + isSearchable + options={this.selectOptions} + value={this.selectedExistingCalendarOption} + onChange={this.handleSelectChange} + styles={{ + control: () => ({ + display: 'inline-flex', + width: '100%', + }), + indicatorSeparator: () => ({ + display: 'inline-flex', + visibility: 'hidden', + }), + indicatorsContainer: () => ({ + display: 'inline-flex', + textDecorationColor: 'black', + }), + valueContainer: () => ({ + display: 'inline-flex', + fontStyle: StrCast(Doc.UserDoc().userColor), + color: StrCast(Doc.UserDoc().userColor), + width: '100%', + }), + }}></Select> + )} + </div> + <div className="description-container"> + <TextField + fullWidth + multiline + label="Calendar description" + placeholder="Enter a description (optional)..." + onChange={this.handleCalendarDescriptionChange} + variant="filled" + style={{ + backgroundColor: 'white', + color: 'black', + borderRadius: '5px', + }} + /> + </div> + <div className="date-range-picker-container"> + <div>Select a date range: </div> + <Provider theme={defaultTheme}> + <DateRangePicker aria-label="Select a date range" value={this.selectedDateRange} onChange={v => this.setSelectedDateRange(v)} /> + </Provider> + </div> + {this.createButtonActive && ( + <div className="create-button-container"> + <Button onClick={() => this.addToCalendar()} text="Add to Calendar" iconPlacement="right" icon={<FontAwesomeIcon icon={faPlus as IconLookup} />} /> + </div> + )} + </div> + ); + } + + render() { + return <MainViewModal contents={this.calendarInterface} isDisplayed={this.isOpen} interactive={true} dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity} overlayDisplayedOpacity={this.overlayOpacity} closeOnExternalClick={this.close} />; + } +} diff --git a/src/client/util/CaptureManager.scss b/src/client/util/CaptureManager.scss index 11e31fe2e..8679a0101 100644 --- a/src/client/util/CaptureManager.scss +++ b/src/client/util/CaptureManager.scss @@ -1,4 +1,4 @@ -@import "../views/global/globalCssVariables"; +@import '../views/global/globalCssVariables.module'; .capture-interface { //background-color: whitesmoke !important; @@ -39,7 +39,7 @@ align-items: center; justify-content: center; } - + .recordButtonInner { border-radius: 100%; width: 70%; @@ -106,7 +106,7 @@ display: flex; justify-content: center; align-items: center; - background-color: #BDDBE8; + background-color: #bddbe8; border-radius: 100%; font-weight: 800; margin-right: 5px; @@ -154,4 +154,3 @@ } } } - diff --git a/src/client/util/CaptureManager.tsx b/src/client/util/CaptureManager.tsx index f42336ee7..2e13aff2f 100644 --- a/src/client/util/CaptureManager.tsx +++ b/src/client/util/CaptureManager.tsx @@ -1,5 +1,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc } from '../../fields/Doc'; @@ -15,11 +15,12 @@ import { SelectionManager } from './SelectionManager'; export class CaptureManager extends React.Component<{}> { public static Instance: CaptureManager; static _settingsStyle = addStyleSheet(); - @observable _document: any; + @observable _document: any = undefined; @observable isOpen: boolean = false; // whether the CaptureManager is to be displayed or not. constructor(props: {}) { super(props); + makeObservable(this); CaptureManager.Instance = this; } @@ -73,7 +74,7 @@ export class CaptureManager extends React.Component<{}> { <div className="save" onClick={() => { - LightboxView.SetLightboxDoc(this._document); + LightboxView.Instance.SetLightboxDoc(this._document); this.close(); }}> Save @@ -81,9 +82,9 @@ export class CaptureManager extends React.Component<{}> { <div className="cancel" onClick={() => { - const selected = SelectionManager.Views().slice(); + const selected = SelectionManager.Views.slice(); SelectionManager.DeselectAll(); - selected.map(dv => dv.props.removeDocument?.(dv.props.Document)); + selected.map(dv => dv.props.removeDocument?.(dv.Document)); this.close(); }}> Cancel diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 87ee1b252..07ee777cd 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -1,5 +1,6 @@ import { observable, reaction, runInAction } from "mobx"; import * as rp from 'request-promise'; +import { OmitKeys, Utils } from "../../Utils"; import { Doc, DocListCast, DocListCastAsync, Opt } from "../../fields/Doc"; import { InkTool } from "../../fields/InkField"; import { List } from "../../fields/List"; @@ -8,27 +9,27 @@ import { RichTextField } from "../../fields/RichTextField"; import { listSpec } from "../../fields/Schema"; import { ScriptField } from "../../fields/ScriptField"; import { Cast, DateCast, DocCast, StrCast } from "../../fields/Types"; -import { nullAudio, WebField } from "../../fields/URLField"; +import { WebField, nullAudio } from "../../fields/URLField"; import { SetCachedGroups, SharingPermissions } from "../../fields/util"; import { GestureUtils } from "../../pen-gestures/GestureUtils"; -import { OmitKeys, Utils } from "../../Utils"; import { DocServer } from "../DocServer"; -import { Docs, DocumentOptions, DocUtils, FInfo } from "../documents/Documents"; import { CollectionViewType, DocumentType } from "../documents/DocumentTypes"; -import { TreeViewType } from "../views/collections/CollectionTreeView"; +import { DocUtils, Docs, DocumentOptions, FInfo } from "../documents/Documents"; import { DashboardView } from "../views/DashboardView"; +import { OverlayView } from "../views/OverlayView"; +import { TreeViewType } from "../views/collections/CollectionTreeView"; import { Colors } from "../views/global/globalEnums"; import { media_state } from "../views/nodes/AudioBox"; -import { DocumentView, OpenWhere } from "../views/nodes/DocumentView"; +import { OpenWhere } from "../views/nodes/DocumentView"; import { ButtonType } from "../views/nodes/FontIconBox/FontIconBox"; import { ImportElementBox } from "../views/nodes/importBox/ImportElementBox"; -import { OverlayView } from "../views/OverlayView"; import { DragManager, dropActionType } from "./DragManager"; import { MakeTemplate } from "./DropConverter"; import { FollowLinkScript } from "./LinkFollower"; import { LinkManager } from "./LinkManager"; import { ScriptingGlobals } from "./ScriptingGlobals"; import { ColorScheme } from "./SettingsManager"; +import { SnappingManager } from "./SnappingManager"; import { UndoManager } from "./UndoManager"; interface Button { @@ -67,7 +68,7 @@ export class CurrentUserUtils { templateOpts: { _width: 400, _height: 300, title: "slideView", _xMargin: 3, _yMargin: 3, isSystem: true }, template: (opts:DocumentOptions) => Docs.Create.MultirowDocument( [ - Docs.Create.MulticolumnDocument([], { title: "data", _height: 200, isSystem: true }), + Docs.Create.MulticolumnDocument([], { title: "hero", _height: 200, isSystem: true }), Docs.Create.TextDocument("", { title: "text", _layout_fitWidth:true, _height: 100, isSystem: true, _text_fontFamily: StrCast(Doc.UserDoc().fontFamily), _text_fontSize: StrCast(Doc.UserDoc().fontSize) }) ], opts) }, @@ -97,7 +98,7 @@ export class CurrentUserUtils { const reqdOpts:DocumentOptions = { title: "Experimental Tools", _xMargin: 0, _layout_showTitle: "title", _chromeHidden: true, - _dragOnlyWithinContainer: true, _layout_hideContextMenu: true, _forceActive: true, isSystem: true, + _dragOnlyWithinContainer: true, _layout_hideContextMenu: true, isSystem: true, _forceActive: true, _layout_autoHeight: true, _width: 500, _height: 300, _layout_fitWidth: true, _columnWidth: 35, ignoreClick: true, _lockedPosition: true, }; const reqdScripts = { dropConverter : "convertToButtons(dragData)" }; @@ -110,8 +111,8 @@ export class CurrentUserUtils { const tempClicks = DocCast(doc[field]); const reqdClickOpts:DocumentOptions = {_width: 300, _height:200, isSystem: true}; const reqdTempOpts:{opts:DocumentOptions, script: string}[] = [ - { opts: { title: "Open In Target", targetScriptKey: "onChildClick"}, script: "docCast(documentView?.props.docViewPath().lastElement()?.rootDoc.target).then((target) => target && (target.proto.data = new List([self])))"}, - { opts: { title: "Open Detail On Right", targetScriptKey: "onChildDoubleClick"}, script: `openDoc(self.doubleClickView.${OpenWhere.addRight})`}]; + { opts: { title: "Open In Target", targetScriptKey: "onChildClick"}, script: "docCastAsync(documentView?.containerViewPath().lastElement()?.Document.target).then((target) => target && (target.proto.data = new List([self])))"}, + { opts: { title: "Open Detail On Right", targetScriptKey: "onChildDoubleClick"}, script: `openDoc(this.doubleClickView.${OpenWhere.addRight})`}]; const reqdClickList = reqdTempOpts.map(opts => { const allOpts = {...reqdClickOpts, ...opts.opts}; const clickDoc = tempClicks ? DocListCast(tempClicks.data).find(doc => doc.title === opts.opts.title): undefined; @@ -191,7 +192,7 @@ export class CurrentUserUtils { {onClick:"deiconifyView(documentView)", onDoubleClick: "deiconifyViewToLightbox(documentView)", }); }; const labelBox = (opts: DocumentOptions, data?:string) => Docs.Create.LabelDocument({ - textTransform: "unset", letterSpacing: "unset", _singleLine: false, _label_minFontSize: 14, _label_maxFontSize: 24, layout_borderRounding: "5px", _width: 150, _height: 70, _xPadding: 10, _yPadding: 10, ...opts + textTransform: "unset", letterSpacing: "unset", _singleLine: false, _label_minFontSize: 14, _label_maxFontSize: 14, layout_borderRounding: "5px", _width: 150, _height: 70, _xPadding: 10, _yPadding: 10, ...opts }); const imageBox = (opts: DocumentOptions, url?:string) => Docs.Create.ImageDocument(url ?? "http://www.cs.brown.edu/~bcz/noImage.png", { "icon_nativeWidth": 360 / 4, "icon_nativeHeight": 270 / 4, iconTemplate:DocumentType.IMG, _width: 360 / 4, _height: 270 / 4, _layout_showTitle: "title", ...opts }); const fontBox = (opts:DocumentOptions, data?:string) => Docs.Create.FontIconDocument({ _nativeHeight: 30, _nativeWidth: 30, _width: 30, _height: 30, ...opts }); @@ -274,17 +275,17 @@ export class CurrentUserUtils { {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 }}, {key: "WebCam", creator: opts => Docs.Create.WebCamDocument("", opts), opts: { _width: 400, _height: 200, recording:true, isSystem: true, cloneFieldFilter: new List<string>(["isSystem"]) }}, - {key: "Button", creator: Docs.Create.ButtonDocument, opts: { _width: 150, _height: 50, _xPadding: 10, _yPadding: 10}, scripts: {onClick: FollowLinkScript()?.script.originalScript ?? ""}}, + {key: "Button", creator: Docs.Create.ButtonDocument, opts: { _width: 150, _height: 50, _xPadding: 10, _yPadding: 10, title_custom: true, waitForDoubleClickToClick: 'never'}, scripts: {onClick: FollowLinkScript()?.script.originalScript ?? ""}}, {key: "Script", creator: opts => Docs.Create.ScriptingDocument(null, opts), opts: { _width: 200, _height: 250, }}, {key: "DataViz", creator: opts => Docs.Create.DataVizDocument("/users/rz/Downloads/addresses.csv", opts), opts: { _width: 300, _height: 300 }}, {key: "Header", creator: headerTemplate, opts: { _width: 300, _height: 70, _headerPointerEvents: "all", _headerHeight: 12, _headerFontSize: 9, _layout_autoHeight: true, treeView_HideUnrendered: true}}, - {key: "Trail", creator: Docs.Create.PresDocument, opts: { _width: 400, _height: 30, _type_collection: CollectionViewType.Stacking, dropAction: "embed" as dropActionType, treeView_HideTitle: true, _layout_fitWidth:true, _chromeHidden: true, layout_boxShadow: "0 0" }}, + {key: "Trail", creator: Docs.Create.PresDocument, opts: { _width: 400, _height: 30, _type_collection: CollectionViewType.Stacking, dropAction: "embed" as dropActionType, treeView_HideTitle: true, _layout_fitWidth:true, layout_boxShadow: "0 0" }}, {key: "Tab", creator: opts => Docs.Create.FreeformDocument([], opts), opts: { _width: 500, _height: 800, _layout_fitWidth: true, _freeform_backgroundGrid: true, }}, {key: "Slide", creator: opts => Docs.Create.TreeDocument([], opts), opts: { _width: 300, _height: 200, _type_collection: CollectionViewType.Tree, treeView_HasOverlay: true, _text_fontSize: "20px", _layout_autoHeight: true, dropAction:'move', treeView_Type: TreeViewType.outline, backgroundColor: "white", _xMargin: 0, _yMargin: 0, _createDocOnCR: true - }, funcs: {title: 'self.text?.Text'}}, + }, 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)); @@ -308,7 +309,7 @@ export class CurrentUserUtils { { toolTip: "Tap or drag to create a bullet slide", title: "PPT Slide", icon: "file", dragFactory: doc.emptySlide as Doc, clickFactory: DocCast(doc.emptySlide), openFactoryLocation: OpenWhere.overlay, funcs: { hidden: "IsNoviceMode()"}}, { toolTip: "Tap or drag to create a data note", title: "DataNote", icon: "window-maximize",dragFactory: doc.emptyHeader as Doc,clickFactory: DocCast(doc.emptyHeader), openFactoryAsDelegate: true, funcs: { hidden: "IsNoviceMode()"} }, { toolTip: "Toggle a Calculator REPL", title: "replviewer", icon: "calculator", clickFactory: '<ScriptingRepl />' as any, openFactoryLocation: OpenWhere.overlay}, // hack: clickFactory is not a Doc but will get interpreted as a custom UI by the openDoc() onClick script - // { toolTip: "Toggle an UndoStack", title: "undostacker", icon: "calculator", clickFactory: "<UndoStack>" as any, openFactoryLocation: OpenWhere.overlay}, + // { toolTip: "Toggle an UndoStack", title: "undostacker", icon: "calculator", clickFactory: "<UndoStack />" as any, openFactoryLocation: OpenWhere.overlay}, ].map(tuple => ( { openFactoryLocation: OpenWhere.addRight, scripts: { onClick: 'openDoc(copyDragFactory(this.clickFactory,this.openFactoryAsDelegate), this.openFactoryLocation)', @@ -339,7 +340,7 @@ export class CurrentUserUtils { /// returns descriptions needed to buttons for the left sidebar to open up panes displaying different collections of documents static leftSidebarMenuBtnDescriptions(doc: Doc):{title:string, target:Doc, icon:string, toolTip: string, scripts:{[key:string]:any}, funcs?:{[key:string]:any}, hidden?: boolean}[] { - const badgeValue = "((len) => len && len !== '0' ? len: undefined)(docList(self.target.data).filter(doc => !docList(self.target.viewed).includes(doc)).length.toString())"; + const badgeValue = "((len) => len && len !== '0' ? len: undefined)(docList(this.target?.data).filter(doc => !docList(this.target.viewed).includes(doc)).length.toString())"; const getActiveDashTrails = "Doc.ActiveDashboard?.myTrails"; return [ { title: "Dashboards", toolTip: "Dashboards", target: this.setupDashboards(doc, "myDashboards"), ignoreClick: true, icon: "desktop", funcs: {hidden: "IsNoviceMode()"} }, @@ -351,7 +352,7 @@ export class CurrentUserUtils { { title: "Shared", toolTip: "Shared Docs", target: Doc.MySharedDocs, ignoreClick: true, icon: "users", funcs: {badgeValue: badgeValue}}, { title: "Trails", toolTip: "Trails ⌘R", target: Doc.UserDoc(), ignoreClick: true, icon: "pres-trail", funcs: {target: getActiveDashTrails}}, { title: "User Doc", toolTip: "User Doc", target: this.setupUserDocView(doc, "myUserDocView"), ignoreClick: true, icon: "address-card",funcs: {hidden: "IsNoviceMode()"} }, - ].map(tuple => ({...tuple, scripts:{onClick: 'selectMainMenu(self)'}})); + ].map(tuple => ({...tuple, scripts:{onClick: 'selectMainMenu(this)'}})); } /// the empty panel that is filled with whichever left menu button's panel has been selected @@ -467,6 +468,7 @@ export class CurrentUserUtils { const templateBtns = CurrentUserUtils.setupExperimentalTemplateButtons(doc,DocListCast(myTools?.data)?.length > 1 ? DocListCast(myTools.data)[1]:undefined); const reqdToolOps:DocumentOptions = { title: "My Tools", isSystem: true, ignoreClick: true, layout_boxShadow: "0 0", + layout_explainer: "This is a palette of documents that can be created.", _layout_showTitle: "title", _width: 500, _yMargin: 20, _lockedPosition: true, _forceActive: true, _dragOnlyWithinContainer: true, _layout_hideContextMenu: true, _chromeHidden: true, }; return DocUtils.AssignDocField(doc, field, (opts, items) => Docs.Create.StackingDocument(items??[], opts), reqdToolOps, [creatorBtns, templateBtns]); @@ -479,14 +481,14 @@ export class CurrentUserUtils { const newDashboard = `createNewDashboard()`; const reqdBtnOpts:DocumentOptions = { _forceActive: true, _width: 30, _height: 30, _dragOnlyWithinContainer: true, _layout_hideContextMenu: true, - title: "new dashboard", btnType: ButtonType.ClickButton, toolTip: "Create new dashboard", buttonText: "New trail", icon: "plus", isSystem: true }; + title: "new Dash", btnType: ButtonType.ClickButton, toolTip: "Create new dashboard", buttonText: "New trail", icon: "plus", isSystem: true }; const reqdBtnScript = {onClick: newDashboard,} const newDashboardButton = DocUtils.AssignScripts(DocUtils.AssignOpts(DocCast(myDashboards?.layout_headerButton), reqdBtnOpts) ?? Docs.Create.FontIconDocument(reqdBtnOpts), reqdBtnScript); const contextMenuScripts = [/*newDashboard*/] as string[]; const contextMenuLabels = [/*"Create New Dashboard"*/] as string[]; const contextMenuIcons = [/*"plus"*/] as string[]; - const childContextMenuScripts = [`toggleComicMode()`, `snapshotDashboard()`, `shareDashboard(self)`, 'removeDashboard(self)', 'resetDashboard(self)']; // entries must be kept in synch with childContextMenuLabels, childContextMenuIcons, and childContextMenuFilters + const childContextMenuScripts = [`toggleComicMode()`, `snapshotDashboard()`, `shareDashboard(this)`, 'removeDashboard(this)', 'resetDashboard(this)']; // entries must be kept in synch with childContextMenuLabels, childContextMenuIcons, and childContextMenuFilters const childContextMenuFilters = ['!IsNoviceMode()', '!IsNoviceMode()', undefined as any, undefined as any, '!IsNoviceMode()'];// entries must be kept in synch with childContextMenuLabels, childContextMenuIcons, and childContextMenuScripts const childContextMenuLabels = ["Toggle Comic Mode", "Snapshot Dashboard", "Share Dashboard", "Remove Dashboard", "Reset Dashboard"];// entries must be kept in synch with childContextMenuScripts, childContextMenuIcons, and childContextMenuFilters const childContextMenuIcons = ["tv", "camera", "users", "times", "trash"]; // entries must be kept in synch with childContextMenuScripts, childContextMenuLabels, and childContextMenuFilters @@ -558,9 +560,9 @@ export class CurrentUserUtils { const clearBtnsOpts:DocumentOptions = { _width: 30, _height: 30, _forceActive: true, _dragOnlyWithinContainer: true, _layout_hideContextMenu: true, title: "Empty", target: recentlyClosed, btnType: ButtonType.ClickButton, color: Colors.BLACK, buttonText: "Empty", icon: "trash", isSystem: true, toolTip: "Empty recently closed",}; - DocUtils.AssignDocField(recentlyClosed, "layout_headerButton", (opts) => Docs.Create.FontIconDocument(opts), clearBtnsOpts, undefined, {onClick: clearAll("self.target")}); + 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; @@ -589,7 +591,7 @@ export class CurrentUserUtils { }) static createToolButton = (opts: DocumentOptions) => Docs.Create.FontIconDocument({ - btnType: ButtonType.ToolButton, _forceActive: true, _layout_hideContextMenu: true, + btnType: ButtonType.ToolButton, _layout_hideContextMenu: true, _dropPropertiesToRemove: new List<string>([ "_layout_hideContextMenu"]), /*_nativeWidth: 40, _nativeHeight: 40, */ _width: 40, _height: 40, isSystem: true, ...opts, }) @@ -628,42 +630,42 @@ export class CurrentUserUtils { } static stackTools(): Button[] { return [ - { title: "Center", icon: "align-center", toolTip: "Center Align Stack", btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"center", funcs: {}, scripts: { onClick: '{ return showFreeform(self.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform + { title: "Center", icon: "align-center", toolTip: "Center Align Stack", btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"center", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform ] } static viewTools(): Button[] { return [ - { title: "Snap", icon: "th", toolTip: "Show Snap Lines", btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"snaplines", funcs: {}, scripts: { onClick: '{ return showFreeform(self.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform - { title: "Grid", icon: "border-all", toolTip: "Show Grid", btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"grid", funcs: {}, scripts: { onClick: '{ return showFreeform(self.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform - { title: "View All", icon: "object-group", toolTip: "Keep all Docs in View",btnType: ButtonType.ToggleButton, ignoreClick:true, expertMode: false, toolType:"viewAll", funcs: {}, scripts: { onClick: '{ return showFreeform(self.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform + { title: "Snap", icon: "th", toolTip: "Show Snap Lines", btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"snaplines", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform + { title: "Grid", icon: "border-all", toolTip: "Show Grid", btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"grid", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform + { title: "View All", icon: "object-group", toolTip: "Keep all Docs in View",btnType: ButtonType.ToggleButton, ignoreClick:true, expertMode: false, toolType:"viewAll", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform // want the same style as toggle button, but don't want it to act as an actual toggle, so set disableToggle to true, - { title: "Fit All", icon: "arrows-left-right", toolTip: "Fit Docs to View (once)",btnType: ButtonType.ClickButton,ignoreClick:false,expertMode: false, toolType:"fitOnce", funcs: {}, scripts: { onClick: '{ return showFreeform(self.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform - { title: "Clusters", icon: "braille", toolTip: "Show Doc Clusters", btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"clusters", funcs: {}, scripts: { onClick: '{ return showFreeform(self.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform - { title: "Cards", icon: "brain", toolTip: "Flashcards", btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"flashcards", funcs: {}, scripts: { onClick: '{ return showFreeform(self.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform - { title: "Arrange", icon:"arrow-down-short-wide",toolTip:"Toggle Auto Arrange", btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"arrange", funcs: {hidden: 'IsNoviceMode()'}, scripts: { onClick: '{ return showFreeform(self.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform + { title: "Fit All", icon: "arrows-left-right", toolTip: "Fit Docs to View (once)",btnType: ButtonType.ClickButton,ignoreClick:false,expertMode: false, toolType:"fitOnce", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform + { title: "Clusters", icon: "braille", toolTip: "Show Doc Clusters", btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"clusters", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform + { title: "Cards", icon: "brain", toolTip: "Flashcards", btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"flashcards", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform + { title: "Arrange", icon:"arrow-down-short-wide",toolTip:"Toggle Auto Arrange", btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"arrange", funcs: {hidden: 'IsNoviceMode()'}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform ] } static textTools():Button[] { return [ - { title: "Font", toolTip: "Font", width: 100, btnType: ButtonType.DropdownList, toolType:"font", ignoreClick: true, scripts: {script: '{ return setFontAttr(self.toolType, value, _readOnly_);}'}, + { title: "Font", toolTip: "Font", width: 100, btnType: ButtonType.DropdownList, toolType:"font", ignoreClick: true, scripts: {script: '{ return setFontAttr(this.toolType, value, _readOnly_);}'}, btnList: new List<string>(["Roboto", "Roboto Mono", "Nunito", "Times New Roman", "Arial", "Georgia", "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"]) }, - { title: "Font Size",toolTip: "Font size (%size)", btnType: ButtonType.NumberDropdownButton, toolType:"fontSize", ignoreClick: true, scripts: {script: '{ return setFontAttr(self.toolType, value, _readOnly_);}'}, numBtnMax: 200, numBtnMin: 6 }, - { title: "Color", toolTip: "Font color (%color)", btnType: ButtonType.ColorButton, icon: "font", toolType:"fontColor",ignoreClick: true, scripts: {script: '{ return setFontAttr(self.toolType, value, _readOnly_);}'}}, - { title: "Highlight",toolTip: "Font highlight", btnType: ButtonType.ColorButton, icon: "highlighter", toolType:"highlight",ignoreClick: true, scripts: {script: '{ return setFontAttr(self.toolType, value, _readOnly_);}'},funcs: {hidden: "IsNoviceMode()"} }, - { title: "Bold", toolTip: "Bold (Ctrl+B)", btnType: ButtonType.ToggleButton, icon: "bold", toolType:"bold", ignoreClick: true, scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} }, - { title: "Italic", toolTip: "Italic (Ctrl+I)", btnType: ButtonType.ToggleButton, icon: "italic", toolType:"italics", ignoreClick: true, scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} }, - { title: "Under", toolTip: "Underline (Ctrl+U)", btnType: ButtonType.ToggleButton, icon: "underline", toolType:"underline",ignoreClick: true, scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} }, - { title: "Bullets", toolTip: "Bullet List", btnType: ButtonType.ToggleButton, icon: "list", toolType:"bullet", ignoreClick: true, scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} }, - { title: "#", toolTip: "Number List", btnType: ButtonType.ToggleButton, icon: "list-ol", toolType:"decimal", ignoreClick: true, scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} }, + { title: "Font Size",toolTip: "Font size (%size)", btnType: ButtonType.NumberDropdownButton, toolType:"fontSize", ignoreClick: true, scripts: {script: '{ return setFontAttr(this.toolType, value, _readOnly_);}'}, numBtnMax: 200, numBtnMin: 6 }, + { title: "Color", toolTip: "Font color (%color)", btnType: ButtonType.ColorButton, icon: "font", toolType:"fontColor",ignoreClick: true, scripts: {script: '{ return setFontAttr(this.toolType, value, _readOnly_);}'}}, + { title: "Highlight",toolTip: "Font highlight", btnType: ButtonType.ColorButton, icon: "highlighter", toolType:"highlight",ignoreClick: true, scripts: {script: '{ return setFontAttr(this.toolType, value, _readOnly_);}'},funcs: {hidden: "IsNoviceMode()"} }, + { title: "Bold", toolTip: "Bold (Ctrl+B)", btnType: ButtonType.ToggleButton, icon: "bold", toolType:"bold", ignoreClick: true, scripts: {onClick: '{ return toggleCharStyle(this.toolType, _readOnly_);}'} }, + { title: "Italic", toolTip: "Italic (Ctrl+I)", btnType: ButtonType.ToggleButton, icon: "italic", toolType:"italics", ignoreClick: true, scripts: {onClick: '{ return toggleCharStyle(this.toolType, _readOnly_);}'} }, + { title: "Under", toolTip: "Underline (Ctrl+U)", btnType: ButtonType.ToggleButton, icon: "underline", toolType:"underline",ignoreClick: true, scripts: {onClick: '{ return toggleCharStyle(this.toolType, _readOnly_);}'} }, + { title: "Bullets", toolTip: "Bullet List", btnType: ButtonType.ToggleButton, icon: "list", toolType:"bullet", ignoreClick: true, scripts: {onClick: '{ return toggleCharStyle(this.toolType, _readOnly_);}'} }, + { title: "#", toolTip: "Number List", btnType: ButtonType.ToggleButton, icon: "list-ol", toolType:"decimal", ignoreClick: true, scripts: {onClick: '{ return toggleCharStyle(this.toolType, _readOnly_);}'} }, + { title: "Vcenter", toolTip: "Vertical center", btnType: ButtonType.ToggleButton, icon: "pallet", toolType:"vcent", ignoreClick: true, scripts: {onClick: '{ return toggleCharStyle(this.toolType, _readOnly_);}'} }, { title: "Align", toolTip: "Alignment", btnType: ButtonType.MultiToggleButton, toolType:"alignment", ignoreClick: true, subMenu: [ - { title: "Left", toolTip: "Left align (Cmd-[)", btnType: ButtonType.ToggleButton, icon: "align-left", toolType:"left", ignoreClick: true, scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}' }}, - { title: "Center", toolTip: "Center align (Cmd-\\)",btnType: ButtonType.ToggleButton, icon: "align-center",toolType:"center",ignoreClick: true, scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} }, - { title: "Right", toolTip: "Right align (Cmd-])", btnType: ButtonType.ToggleButton, icon: "align-right", toolType:"right", ignoreClick: true, scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} }, - ] - }, - { title: "Dictate", toolTip: "Dictate", btnType: ButtonType.ToggleButton, icon: "microphone", toolType:"dictation", ignoreClick: true, scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'}}, - { title: "NoLink", toolTip: "Auto Link", btnType: ButtonType.ToggleButton, icon: "link", toolType:"noAutoLink", expertMode:true, scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'}, funcs: {hidden: 'IsNoviceMode()'}}, + { title: "Left", toolTip: "Left align (Cmd-[)", btnType: ButtonType.ToggleButton, icon: "align-left", toolType:"left", ignoreClick: true, scripts: {onClick: '{ return toggleCharStyle(this.toolType, _readOnly_);}' }}, + { title: "Center", toolTip: "Center align (Cmd-\\)",btnType: ButtonType.ToggleButton, icon: "align-center",toolType:"center",ignoreClick: true, scripts: {onClick: '{ return toggleCharStyle(this.toolType, _readOnly_);}'} }, + { title: "Right", toolTip: "Right align (Cmd-])", btnType: ButtonType.ToggleButton, icon: "align-right", toolType:"right", ignoreClick: true, scripts: {onClick: '{ return toggleCharStyle(this.toolType, _readOnly_);}'} }, + ]}, + { title: "Dictate", toolTip: "Dictate", btnType: ButtonType.ToggleButton, icon: "microphone", toolType:"dictation", ignoreClick: true, scripts: {onClick: '{ return toggleCharStyle(this.toolType, _readOnly_);}'}}, + { title: "NoLink", toolTip: "Auto Link", btnType: ButtonType.ToggleButton, icon: "link", toolType:"noAutoLink", expertMode:true, scripts: {onClick: '{ return toggleCharStyle(this.toolType, _readOnly_);}'}, funcs: {hidden: 'IsNoviceMode()'}}, // { title: "Strikethrough", tooltip: "Strikethrough", btnType: ButtonType.ToggleButton, icon: "strikethrough", scripts: {onClick:: 'toggleStrikethrough()'}}, // { title: "Superscript", tooltip: "Superscript", btnType: ButtonType.ToggleButton, icon: "superscript", scripts: {onClick:: 'toggleSuperscript()'}}, // { title: "Subscript", tooltip: "Subscript", btnType: ButtonType.ToggleButton, icon: "subscript", scripts: {onClick:: 'toggleSubscript()'}}, @@ -672,32 +674,37 @@ export class CurrentUserUtils { static inkTools():Button[] { return [ - { title: "Pen", toolTip: "Pen (Ctrl+P)", btnType: ButtonType.ToggleButton, icon: "pen-nib", toolType: "pen", scripts: {onClick:'{ return setActiveTool(self.toolType, false, _readOnly_);}' }}, - { title: "Write", toolTip: "Write (Ctrl+Shift+P)", btnType: ButtonType.ToggleButton, icon: "pen", toolType: "write", scripts: {onClick:'{ return setActiveTool(self.toolType, false, _readOnly_);}' }, funcs: {hidden:"IsNoviceMode()" }}, - { title: "Eraser", toolTip: "Eraser (Ctrl+E)", btnType: ButtonType.ToggleButton, icon: "eraser", toolType: "eraser", scripts: {onClick:'{ return setActiveTool(self.toolType, false, _readOnly_);}' }, funcs: {hidden:"IsNoviceMode()" }}, - { title: "Circle", toolTip: "Circle (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "circle", toolType:GestureUtils.Gestures.Circle, scripts: {onClick:`{ return setActiveTool(self.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(self.toolType, true, _readOnly_);}`} }, - { title: "Square", toolTip: "Square (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "square", toolType:GestureUtils.Gestures.Rectangle, scripts: {onClick:`{ return setActiveTool(self.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(self.toolType, true, _readOnly_);}`} }, - { title: "Line", toolTip: "Line (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "minus", toolType:GestureUtils.Gestures.Line, scripts: {onClick:`{ return setActiveTool(self.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(self.toolType, true, _readOnly_);}`} }, - { title: "Mask", toolTip: "Mask", btnType: ButtonType.ToggleButton, icon: "user-circle",toolType: "inkMask", scripts: {onClick:'{ return setInkProperty(self.toolType, value, _readOnly_);}'}, funcs: {hidden:"IsNoviceMode()" } }, - { title: "Width", toolTip: "Stroke width", btnType: ButtonType.NumberSliderButton, toolType: "strokeWidth", ignoreClick: true, scripts: {script: '{ return setInkProperty(self.toolType, value, _readOnly_);}'}, numBtnMin: 1}, - { title: "Ink", toolTip: "Stroke color", btnType: ButtonType.ColorButton, icon: "pen", toolType: "strokeColor", ignoreClick: true, scripts: {script: '{ return setInkProperty(self.toolType, value, _readOnly_);}'} }, + { title: "Pen", toolTip: "Pen (Ctrl+P)", btnType: ButtonType.ToggleButton, icon: "pen-nib", toolType: "pen", scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }}, + { title: "Write", toolTip: "Write (Ctrl+Shift+P)", btnType: ButtonType.ToggleButton, icon: "pen", toolType: "write", scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }, funcs: {hidden:"IsNoviceMode()" }}, + { title: "Eraser", toolTip: "Eraser (Ctrl+E)", btnType: ButtonType.ToggleButton, icon: "eraser", toolType: "eraser", scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }, funcs: {hidden:"IsNoviceMode()" }}, + { title: "Circle", toolTip: "Circle (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "circle", toolType:GestureUtils.Gestures.Circle, scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} }, + { title: "Square", toolTip: "Square (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "square", toolType:GestureUtils.Gestures.Rectangle, scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} }, + { title: "Line", toolTip: "Line (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "minus", toolType:GestureUtils.Gestures.Line, scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} }, + { title: "Mask", toolTip: "Mask", btnType: ButtonType.ToggleButton, icon: "user-circle",toolType: "inkMask", scripts: {onClick:'{ return setInkProperty(this.toolType, value, _readOnly_);}'}, funcs: {hidden:"IsNoviceMode()" } }, + { title: "Width", toolTip: "Stroke width", btnType: ButtonType.NumberSliderButton, toolType: "strokeWidth", ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'}, numBtnMin: 1}, + { title: "Ink", toolTip: "Stroke color", btnType: ButtonType.ColorButton, icon: "pen", toolType: "strokeColor", ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'} }, ]; } static schemaTools():Button[] { return [ {title: "Preview", toolTip: "Show selection preview", btnType: ButtonType.ToggleButton, icon: "portrait", scripts:{ onClick: '{ return toggleSchemaPreview(_readOnly_); }'} }, - {title: "1 Line",toolTip: "Single Line Rows", btnType: ButtonType.ToggleButton, icon: "eye", scripts:{ onClick: '{ return toggleSingleLineSchema(_readOnly_); }'} }, - ]; + {title: "1 Line", toolTip: "Single Line Rows", btnType: ButtonType.ToggleButton, icon: "eye", scripts:{ onClick: '{ return toggleSingleLineSchema(_readOnly_); }'} }, + {title: "DataViz", toolTip: "Turn Schema Table into Data Visualization Doc", btnType: ButtonType.ClickButton, icon: "chart-bar", scripts:{ onClick: '{ datavizFromSchema()'} }, ]; } static webTools() { return [ - { title: "Back", toolTip: "Go back", btnType: ButtonType.ClickButton, icon: "arrow-left", scripts: { onClick: '{ return webBack(_readOnly_); }' }}, - { title: "Forward", toolTip: "Go forward", btnType: ButtonType.ClickButton, icon: "arrow-right", scripts: { onClick: '{ return webForward(_readOnly_); }'}}, + { title: "Back", toolTip: "Go back", btnType: ButtonType.ClickButton, icon: "arrow-left", scripts: { onClick: '{ return webBack(); }' }}, + { title: "Forward", toolTip: "Go forward", btnType: ButtonType.ClickButton, icon: "arrow-right", scripts: { onClick: '{ return webForward(); }'}}, { title: "URL", toolTip: "URL", width: 250, btnType: ButtonType.EditableText, icon: "lock", ignoreClick: true, scripts: { script: '{ return webSetURL(value, _readOnly_); }'} }, ]; } + static videoTools() { + return [ + { title: "Snapshot",toolTip: "Take snapshot of current frame", btnType: ButtonType.ClickButton, icon: "camera", scripts: { onClick: '{ return videoSnapshot(); }' }}, + ]; + } static contextMenuTools():Button[] { return [ { btnList: new List<string>([CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Tree, @@ -709,17 +716,18 @@ export class CurrentUserUtils { { title: "Pin", icon: "map-pin", toolTip: "Pin View to Trail", btnType: ButtonType.ClickButton, expertMode: false, width: 30, scripts: { onClick: 'pinWithView(altKey)'}, funcs: {hidden: "IsNoneSelected()"}}, { title: "Header", icon: "heading", toolTip: "Doc Titlebar Color", btnType: ButtonType.ColorButton, expertMode: true, ignoreClick: true, scripts: { script: 'return setHeaderColor(value, _readOnly_)'} }, { title: "Fill", icon: "fill-drip", toolTip: "Fill/Background Color",btnType: ButtonType.ColorButton, expertMode: false, ignoreClick: true, width: 30, scripts: { script: 'return setBackgroundColor(value, _readOnly_)'}, funcs: {hidden: "IsNoneSelected()"}}, // Only when a document is selected - { title: "Overlay", icon: "layer-group", toolTip: "Overlay", btnType: ButtonType.ToggleButton, expertMode: true, toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectionManager_selectedDocType(self.toolType, self.expertMode, true)'}, scripts: { onClick: '{ return toggleOverlay(_readOnly_); }'}}, // Only when floating document is selected in freeform - { title: "Back", icon: "chevron-left", toolTip: "Prev Animation Frame", btnType: ButtonType.ClickButton, expertMode: true, toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectionManager_selectedDocType(self.toolType, self.expertMode)'}, width: 30, scripts: { onClick: 'prevKeyFrame(_readOnly_)'}}, - { title: "Num", icon:"", toolTip: "Frame Number (click to toggle edit mode)", btnType: ButtonType.TextButton, expertMode: true, toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectionManager_selectedDocType(self.toolType, self.expertMode)', buttonText: 'selectedDocs()?.lastElement()?.currentFrame?.toString()'}, width: 20, scripts: { onClick: '{ return curKeyFrame(_readOnly_);}'}}, - { title: "Fwd", icon: "chevron-right", toolTip: "Next Animation Frame", btnType: ButtonType.ClickButton, expertMode: true, toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectionManager_selectedDocType(self.toolType, self.expertMode)'}, width: 30, scripts: { onClick: 'nextKeyFrame(_readOnly_)'}}, - { title: "Text", icon: "Text", toolTip: "Text functions", subMenu: CurrentUserUtils.textTools(), expertMode: false, toolType:DocumentType.RTF, funcs: { linearView_IsOpen: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} }, // Always available - { title: "Ink", icon: "Ink", toolTip: "Ink functions", subMenu: CurrentUserUtils.inkTools(), expertMode: false, toolType:DocumentType.INK, funcs: {hidden: `IsExploreMode()`, linearView_IsOpen: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`}, scripts: { onClick: 'setInkToolDefaults()'} }, // Always available - { title: "Doc", icon: "Doc", toolTip: "Freeform Doc tools", subMenu: CurrentUserUtils.freeTools(), expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: `!SelectionManager_selectedDocType(self.toolType, self.expertMode, true)`, linearView_IsOpen: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} }, // Always available - { title: "View", icon: "View", toolTip: "View tools", subMenu: CurrentUserUtils.viewTools(), expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: `!SelectionManager_selectedDocType(self.toolType, self.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} }, // Always available - { title: "Stack", icon: "View", toolTip: "Stacking tools", subMenu: CurrentUserUtils.stackTools(), expertMode: false, toolType:CollectionViewType.Stacking, funcs: {hidden: `!SelectionManager_selectedDocType(self.toolType, self.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} }, // Always available - { title: "Web", icon: "Web", toolTip: "Web functions", subMenu: CurrentUserUtils.webTools(), expertMode: false, toolType:DocumentType.WEB, funcs: {hidden: `!SelectionManager_selectedDocType(self.toolType, self.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} }, // Only when Web is selected - { title: "Schema", icon: "Schema",linearBtnWidth:58,toolTip: "Schema functions",subMenu: CurrentUserUtils.schemaTools(),expertMode: false,toolType:CollectionViewType.Schema,funcs: {hidden: `!SelectionManager_selectedDocType(self.toolType, self.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} }, // Only when Schema is selected + { title: "Overlay", icon: "layer-group", toolTip: "Overlay", btnType: ButtonType.ToggleButton, expertMode: true, toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectionManager_selectedDocType(this.toolType, this.expertMode, true)'}, scripts: { onClick: '{ return toggleOverlay(_readOnly_); }'}}, // Only when floating document is selected in freeform + { title: "Back", icon: "chevron-left", toolTip: "Prev Animation Frame", btnType: ButtonType.ClickButton, expertMode: true, toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectionManager_selectedDocType(this.toolType, this.expertMode)'}, width: 30, scripts: { onClick: 'prevKeyFrame(_readOnly_)'}}, + { title: "Num", icon:"", toolTip: "Frame # (click to toggle edit mode)",btnType: ButtonType.TextButton, expertMode: true, toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectionManager_selectedDocType(this.toolType, this.expertMode)', buttonText: 'selectedDocs()?.lastElement()?.currentFrame?.toString()'}, width: 20, scripts: { onClick: '{ return curKeyFrame(_readOnly_);}'}}, + { title: "Fwd", icon: "chevron-right", toolTip: "Next Animation Frame", btnType: ButtonType.ClickButton, expertMode: true, toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectionManager_selectedDocType(this.toolType, this.expertMode)'}, width: 30, scripts: { onClick: 'nextKeyFrame(_readOnly_)'}}, + { title: "Text", icon: "Text", toolTip: "Text functions", subMenu: CurrentUserUtils.textTools(), expertMode: false, toolType:DocumentType.RTF, funcs: { linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available + { title: "Ink", icon: "Ink", toolTip: "Ink functions", subMenu: CurrentUserUtils.inkTools(), expertMode: false, toolType:DocumentType.INK, funcs: {hidden: `IsExploreMode()`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`}, scripts: { onClick: 'setInkToolDefaults()'} }, // Always available + { title: "Doc", icon: "Doc", toolTip: "Freeform Doc tools", subMenu: CurrentUserUtils.freeTools(), expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode, true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available + { title: "View", icon: "View", toolTip: "View tools", subMenu: CurrentUserUtils.viewTools(), expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available + { title: "Stack", icon: "View", toolTip: "Stacking tools", subMenu: CurrentUserUtils.stackTools(), expertMode: false, toolType:CollectionViewType.Stacking, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available + { title: "Web", icon: "Web", toolTip: "Web functions", subMenu: CurrentUserUtils.webTools(), expertMode: false, toolType:DocumentType.WEB, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when Web is selected + { title: "Video", icon: "Video", toolTip: "Video functions", subMenu: CurrentUserUtils.videoTools(), expertMode: false, toolType:DocumentType.VID, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when Web is selected + { title: "Schema", icon: "Schema",linearBtnWidth:58,toolTip: "Schema functions",subMenu: CurrentUserUtils.schemaTools(),expertMode: false,toolType:CollectionViewType.Schema,funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when Schema is selected ]; } @@ -793,11 +801,6 @@ export class CurrentUserUtils { return DocUtils.AssignDocField(doc, field, (opts, items) => this.linearButtonList(opts, items??[]), dockBtnsReqdOpts, btns); } - /// collection of documents rendered in the overlay layer above all tabs and other UI - static setupOverlays(doc: Doc, field = "myOverlayDocs") { - return DocUtils.AssignDocField(doc, field, (opts) => Docs.Create.FreeformDocument([], opts), { title: "overlay documents", backgroundColor: "#aca3a6", isSystem: true }); - } - static setupPublished(doc:Doc, field = "myPublishedDocs") { return DocUtils.AssignDocField(doc, field, (opts) => Docs.Create.TreeDocument([], opts), { title: "published docs", backgroundColor: "#aca3a6", isSystem: true }); } @@ -820,7 +823,7 @@ export class CurrentUserUtils { // When the user views one of these documents, it will be added to the sharing documents 'viewed' list field // The sharing document also stores the user's color value which helps distinguish shared documents from personal documents static setupSharedDocs(doc: Doc, sharingDocumentId: string) { - const dblClkScript = "{scriptContext.openLevel(documentView); addDocToList(documentView.props.treeViewDoc, 'viewed', documentView.rootDoc);}"; + const dblClkScript = "{scriptContext.openLevel(documentView); addDocToList(getSharingDoc(), 'viewed', documentView.Document);}"; const sharedScripts = { treeView_ChildDoubleClick: dblClkScript, } const sharedDocOpts:DocumentOptions = { @@ -832,7 +835,7 @@ export class CurrentUserUtils { // childContextMenuLabels: new List<string>(["Add to Dashboards",]), // childContextMenuIcons: new List<string>(["user-plus",]), "acl-Guest": SharingPermissions.Augment, "_acl-Guest": SharingPermissions.Augment, - childDragAction: "embed", isSystem: true, contentPointerEvents: "none", childLimitHeight: 0, _yMargin: 0, _gridGap: 15, childDontRegisterViews:true, + childDragAction: "embed", isSystem: true, childContentPointerEvents: "none", childLimitHeight: 0, _yMargin: 0, _gridGap: 15, childDontRegisterViews:true, // NOTE: treeView_HideTitle & _layout_showTitle is for a TreeView's editable title, _layout_showTitle is for DocumentViews title bar _layout_showTitle: "title", treeView_HideTitle: true, ignoreClick: true, _lockedPosition: true, layout_boxShadow: "0 0", _chromeHidden: true, dontRegisterView: true, layout_explainer: "This is where documents or dashboards that other users have shared with you will appear. To share a document or dashboard right click and select 'Share'" @@ -901,7 +904,6 @@ export class CurrentUserUtils { this.setupSharedDocs(doc, sharingDocumentId); // sets up the right sidebar collection for mobile upload documents and sharing this.setupDefaultIconTemplates(doc); // creates a set of icon templates triggered by the document deoration icon this.setupActiveMobileMenu(doc); // sets up the current mobile menu for Dash Mobile - this.setupOverlays(doc); // sets up the overlay panel where documents and other widgets can be added to float over the rest of the dashboard this.setupPublished(doc); // sets up the list doc of all docs that have been published (meaning that they can be auto-linked by typing their title into another text box) this.setupContextMenuButtons(doc); // set up the row of buttons at the top of the dashboard that change depending on what is selected this.setupTopbarButtons(doc); @@ -910,7 +912,7 @@ export class CurrentUserUtils { this.setupDocTemplates(doc); // sets up the template menu of templates //this.setupFieldInfos(doc); // sets up the collection of field info descriptions for each possible DocumentOption DocUtils.AssignDocField(doc, "globalScriptDatabase", (opts) => Docs.Prototypes.MainScriptDocument(), {}); - DocUtils.AssignDocField(doc, "myHeaderBar", (opts) => Docs.Create.MulticolumnDocument([], opts), { title: "My Header Bar", isSystem: true, childDocumentsActive:false, dropAction: 'move'}); // drop down panel at top of dashboard for stashing documents + DocUtils.AssignDocField(doc, "myHeaderBar", (opts) => Docs.Create.MulticolumnDocument([], opts), { title: "My Header Bar", isSystem: true, _chromeHidden:true, childLayoutFitWidth:false, childDocumentsActive:false, dropAction: 'move'}); // drop down panel at top of dashboard for stashing documents Doc.AddDocToList(Doc.MyFilesystem, undefined, Doc.MyDashboards) Doc.AddDocToList(Doc.MyFilesystem, undefined, Doc.MySharedDocs) @@ -951,12 +953,12 @@ 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(";"); const batch = 30000; - for (let i = 0; i < ids.length; i = Math.min(ids.length, i+batch)) { + for (let i = 0; i < ids.length; i += batch) { await DocServer.GetRefFields(ids.slice(i, i+batch)); } } @@ -982,6 +984,7 @@ export class CurrentUserUtils { DashboardView.createNewDashboard(undefined, "guest dashboard"); } else { userDoc.activePage = "home"; + userDoc.noviceMode = true; } } return userDoc; @@ -1022,8 +1025,9 @@ export class CurrentUserUtils { } ScriptingGlobals.add(function MySharedDocs() { return Doc.MySharedDocs; }, "document containing all shared Docs"); -ScriptingGlobals.add(function IsExploreMode() { return DocumentView.ExploreMode; }, "is Dash in exploration mode"); +ScriptingGlobals.add(function IsExploreMode() { return SnappingManager.ExploreMode; }, "is Dash in exploration mode"); ScriptingGlobals.add(function IsNoviceMode() { return Doc.noviceMode; }, "is Dash in novice mode"); ScriptingGlobals.add(function toggleComicMode() { Doc.UserDoc().renderStyle = Doc.UserDoc().renderStyle === "comic" ? undefined : "comic"; }, "switches between comic and normal document rendering"); ScriptingGlobals.add(function importDocument() { return CurrentUserUtils.importDocument(); }, "imports files from device directly into the import sidebar"); ScriptingGlobals.add(function setInkToolDefaults() { Doc.ActiveTool = InkTool.None; }); +ScriptingGlobals.add(function getSharingDoc() {return Doc.SharingDoc() });
\ No newline at end of file diff --git a/src/client/util/DictationManager.ts b/src/client/util/DictationManager.ts index 0fd7e840c..82c63695c 100644 --- a/src/client/util/DictationManager.ts +++ b/src/client/util/DictationManager.ts @@ -236,7 +236,7 @@ export namespace DictationManager { export const execute = async (phrase: string) => { return UndoManager.RunInBatch(async () => { console.log('PHRASE: ' + phrase); - const targets = SelectionManager.Views(); + const targets = SelectionManager.Views; if (!targets || !targets.length) { return; } @@ -290,7 +290,7 @@ export namespace DictationManager { if (!ctor) { return false; } - return Cast(Doc.GetProto(view.props.Document).data, ctor) !== undefined; + return Cast(Doc.GetProto(view.Document).data, ctor) !== undefined; }; const validate = (target: DocumentView, types: DocumentType[]) => { @@ -318,7 +318,7 @@ export namespace DictationManager { [ 'clear', { - action: (target: DocumentView) => (Doc.GetProto(target.props.Document).data = new List()), + action: (target: DocumentView) => (Doc.GetProto(target.Document).data = new List()), restrictTo: [DocumentType.COL], }, ], @@ -347,7 +347,7 @@ export namespace DictationManager { action: (target: DocumentView, matches: RegExpExecArray) => { const count = interpretNumber(matches[1]); const what = matches[2]; - const dataDoc = Doc.GetProto(target.props.Document); + const dataDoc = Doc.GetProto(target.Document); const fieldKey = 'data'; if (isNaN(count)) { return; @@ -372,7 +372,7 @@ export namespace DictationManager { expression: /view as (freeform|stacking|masonry|schema|tree)/g, action: (target: DocumentView, matches: RegExpExecArray) => { const mode = matches[1]; - mode && (target.props.Document._type_collection = mode); + mode && (target.Document._type_collection = mode); }, restrictTo: [DocumentType.COL], } diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index 7cc8afaa6..f730d17fe 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -1,6 +1,7 @@ -import { action, computed, observable, ObservableSet, observe } from 'mobx'; +import { Howl } from 'howler'; +import { action, computed, makeObservable, observable, ObservableSet, observe } from 'mobx'; import { Doc, DocListCast, Opt } from '../../fields/Doc'; -import { AclAdmin, AclEdit, Animation } from '../../fields/DocSymbols'; +import { AclAdmin, AclEdit, Animation, DocData } from '../../fields/DocSymbols'; import { Id } from '../../fields/FieldSymbols'; import { listSpec } from '../../fields/Schema'; import { Cast, DocCast, NumCast, StrCast } from '../../fields/Types'; @@ -10,21 +11,27 @@ import { CollectionViewType } from '../documents/DocumentTypes'; import { CollectionDockingView } from '../views/collections/CollectionDockingView'; import { TabDocView } from '../views/collections/TabDocView'; import { LightboxView } from '../views/LightboxView'; -import { DocFocusOptions, DocumentView, DocumentViewInternal, OpenWhere, OpenWhereMod } from '../views/nodes/DocumentView'; +import { DocumentView, DocumentViewInternal, OpenWhere, OpenWhereMod } from '../views/nodes/DocumentView'; +import { FocusViewOptions } from '../views/nodes/FieldView'; import { KeyValueBox } from '../views/nodes/KeyValueBox'; import { LinkAnchorBox } from '../views/nodes/LinkAnchorBox'; import { PresBox } from '../views/nodes/trails'; import { ScriptingGlobals } from './ScriptingGlobals'; import { SelectionManager } from './SelectionManager'; -const { Howl } = require('howler'); export class DocumentManager { + private static _instance: DocumentManager; + public static get Instance(): DocumentManager { + return this._instance || (this._instance = new this()); + } + //global holds all of the nodes (regardless of which collection they're in) @observable _documentViews = new Set<DocumentView>(); - @observable public LinkAnchorBoxViews: DocumentView[] = []; - @observable public LinkedDocumentViews: { a: DocumentView; b: DocumentView; l: Doc }[] = []; + @observable.shallow public CurrentlyLoading: Doc[] = []; + @observable.shallow public LinkAnchorBoxViews: DocumentView[] = []; + @observable.shallow public LinkedDocumentViews: { a: DocumentView; b: DocumentView; l: Doc }[] = []; @computed public get DocumentViews() { - return Array.from(this._documentViews).filter(view => !(view.ComponentView instanceof KeyValueBox) && (!LightboxView.LightboxDoc || LightboxView.IsLightboxDocView(view.docViewPath))); + return Array.from(this._documentViews).filter(view => !(view.ComponentView instanceof KeyValueBox) && (!LightboxView.LightboxDoc || LightboxView.Contains(view))); } public AddDocumentView(dv: DocumentView) { this._documentViews.add(dv); @@ -33,24 +40,19 @@ export class DocumentManager { this._documentViews.delete(dv); } - private static _instance: DocumentManager; - public static get Instance(): DocumentManager { - return this._instance || (this._instance = new this()); - } - //private constructor so no other class can create a nodemanager private constructor() { - if (!Doc.CurrentlyLoading) Doc.CurrentlyLoading = []; - observe(Doc.CurrentlyLoading, change => { + makeObservable(this); + observe(this.CurrentlyLoading, change => { // watch CurrentlyLoading-- when something is loaded, it's removed from the list and we have to update its icon if it were iconified since LoadingBox icons are different than the media they become switch (change.type as any) { case 'update': break; case 'remove': - // DocumentManager.Instance.getAllDocumentViews(change as any).forEach(dv => StrCast(dv.rootDoc.layout_fieldKey) === 'layout_icon' && dv.iconify(() => dv.iconify())); + // DocumentManager.Instance.getAllDocumentViews(change as any).forEach(dv => StrCast(dv.Document.layout_fieldKey) === 'layout_icon' && dv.iconify(() => dv.iconify())); break; case 'splice': - (change as any).removed.forEach((doc: Doc) => DocumentManager.Instance.getAllDocumentViews(doc).forEach(dv => StrCast(dv.rootDoc.layout_fieldKey) === 'layout_icon' && dv.iconify(() => dv.iconify()))); + (change as any).removed.forEach((doc: Doc) => DocumentManager.Instance.getAllDocumentViews(doc).forEach(dv => StrCast(dv.Document.layout_fieldKey) === 'layout_icon' && dv.iconify(() => dv.iconify()))); break; } }); @@ -71,7 +73,7 @@ export class DocumentManager { return false; }; callAddViewFuncs = (view: DocumentView) => { - const callFuncs = this._viewRenderedCbs.filter(vc => vc.doc === view.rootDoc); + const callFuncs = this._viewRenderedCbs.filter(vc => vc.doc === view.Document); if (callFuncs.length) { this._viewRenderedCbs = this._viewRenderedCbs.filter(vc => !callFuncs.includes(vc)); const intTimer = setInterval( @@ -88,11 +90,11 @@ export class DocumentManager { @action public AddView = (view: DocumentView) => { - if (view.props.LayoutTemplateString?.includes(KeyValueBox.name)) return; - if (view.props.LayoutTemplateString?.includes(LinkAnchorBox.name)) { - const viewAnchorIndex = view.props.LayoutTemplateString.includes('link_anchor_2') ? 'link_anchor_2' : 'link_anchor_1'; - const link = view.rootDoc; - this.LinkAnchorBoxViews?.filter(dv => Doc.AreProtosEqual(dv.rootDoc, link) && !dv.props.LayoutTemplateString?.includes(viewAnchorIndex)).forEach(otherView => + if (view._props.LayoutTemplateString?.includes(KeyValueBox.name)) return; + if (view._props.LayoutTemplateString?.includes(LinkAnchorBox.name)) { + const viewAnchorIndex = view._props.LayoutTemplateString.includes('link_anchor_2') ? 'link_anchor_2' : 'link_anchor_1'; + const link = view.Document; + this.LinkAnchorBoxViews?.filter(dv => Doc.AreProtosEqual(dv.Document, link) && !dv._props.LayoutTemplateString?.includes(viewAnchorIndex)).forEach(otherView => this.LinkedDocumentViews.push({ a: viewAnchorIndex === 'link_anchor_2' ? otherView : view, b: viewAnchorIndex === 'link_anchor_2' ? view : otherView, @@ -115,7 +117,7 @@ export class DocumentManager { }) ); - if (view.props.LayoutTemplateString?.includes(LinkAnchorBox.name)) { + if (view._props.LayoutTemplateString?.includes(LinkAnchorBox.name)) { const index = this.LinkAnchorBoxViews.indexOf(view); this.LinkAnchorBoxViews.splice(index, 1); } else { @@ -128,13 +130,13 @@ export class DocumentManager { public getDocumentViewsById(id: string) { const toReturn: DocumentView[] = []; DocumentManager.Instance.DocumentViews.forEach(view => { - if (view.rootDoc[Id] === id) { + if (view.Document[Id] === id) { toReturn.push(view); } }); if (toReturn.length === 0) { DocumentManager.Instance.DocumentViews.forEach(view => { - if (Doc.GetProto(view.rootDoc)?.[Id] === id) { + if (view.Document[DocData]?.[Id] === id) { toReturn.push(view); } }); @@ -152,42 +154,42 @@ export class DocumentManager { return passes.reduce( (toReturn, pass) => toReturn ?? - docViewArray.filter(view => view.rootDoc === target).find(view => !pass || view.props.docViewPath().lastElement() === preferredCollection) ?? - docViewArray.filter(view => Doc.AreProtosEqual(view.rootDoc, target)).find(view => !pass || view.props.docViewPath().lastElement() === preferredCollection), + docViewArray.filter(view => view.Document === target).find(view => !pass || view.containerViewPath?.().lastElement() === preferredCollection) ?? + docViewArray.filter(view => Doc.AreProtosEqual(view.Document, target)).find(view => !pass || view.containerViewPath?.().lastElement() === preferredCollection), undefined as Opt<DocumentView> ); } public getLightboxDocumentView = (toFind: Doc, originatingDoc: Opt<Doc> = undefined): DocumentView | undefined => { const views: DocumentView[] = []; - DocumentManager.Instance.DocumentViews.forEach(view => LightboxView.IsLightboxDocView(view.docViewPath) && Doc.AreProtosEqual(view.rootDoc, toFind) && views.push(view)); - return views?.find(view => view.ContentDiv?.getBoundingClientRect().width /*&& view.props.focus !== returnFalse) || views?.find(view => view.props.focus !== returnFalse*/) || (views.length ? views[0] : undefined); + DocumentManager.Instance.DocumentViews.forEach(view => LightboxView.Contains(view) && Doc.AreProtosEqual(view.Document, toFind) && views.push(view)); + return views?.find(view => view.ContentDiv?.getBoundingClientRect().width /*&& view._props.focus !== returnFalse) || views?.find(view => view._props.focus !== returnFalse*/) || (views.length ? views[0] : undefined); }; public getFirstDocumentView = (toFind: Doc, originatingDoc: Opt<Doc> = undefined): DocumentView | undefined => { if (LightboxView.LightboxDoc) return DocumentManager.Instance.getLightboxDocumentView(toFind, originatingDoc); - const views = this.getDocumentViews(toFind); //.filter(view => view.rootDoc !== originatingDoc); - return views?.find(view => view.ContentDiv?.getBoundingClientRect().width /*&& view.props.focus !== returnFalse) || views?.find(view => view.props.focus !== returnFalse*/) || (views.length ? views[0] : undefined); + const views = this.getDocumentViews(toFind); //.filter(view => view.Document !== originatingDoc); + return views?.find(view => view.ContentDiv?.getBoundingClientRect().width /*&& view._props.focus !== returnFalse) || views?.find(view => view._props.focus !== returnFalse*/) || (views.length ? views[0] : undefined); }; public getDocumentViews(toFindIn: Doc): DocumentView[] { const toFind = // Array.from(DocumentManager.Instance.DocumentViews).find( // dv => - // ((dv.rootDoc.data as any)?.url?.href && (dv.rootDoc.data as any)?.url?.href === (toFindIn.data as any)?.url?.href) || - // ((DocCast(dv.rootDoc.annotationOn)?.data as any)?.url?.href && (DocCast(dv.rootDoc.annotationOn)?.data as any)?.url?.href === (DocCast(toFindIn.annotationOn)?.data as any)?.url?.href) - // )?.rootDoc ?? + // ((dv.Document.data as any)?.url?.href && (dv.Document.data as any)?.url?.href === (toFindIn.data as any)?.url?.href) || + // ((DocCast(dv.Document.annotationOn)?.data as any)?.url?.href && (DocCast(dv.Document.annotationOn)?.data as any)?.url?.href === (DocCast(toFindIn.annotationOn)?.data as any)?.url?.href) + // )?.Document ?? toFindIn; const toReturn: DocumentView[] = []; - const docViews = DocumentManager.Instance.DocumentViews.filter(view => !LightboxView.IsLightboxDocView(view.docViewPath)); - const lightViews = DocumentManager.Instance.DocumentViews.filter(view => LightboxView.IsLightboxDocView(view.docViewPath)); + const docViews = DocumentManager.Instance.DocumentViews.filter(view => !LightboxView.Contains(view)); + const lightViews = DocumentManager.Instance.DocumentViews.filter(view => LightboxView.Contains(view)); // heuristic to return the "best" documents first: // choose a document in the lightbox first // choose an exact match over an embedding match - lightViews.map(view => view.rootDoc === toFind && toReturn.push(view)); - lightViews.map(view => view.rootDoc !== toFind && Doc.AreProtosEqual(view.rootDoc, toFind) && toReturn.push(view)); - docViews.map(view => view.rootDoc === toFind && toReturn.push(view)); - docViews.map(view => view.rootDoc !== toFind && Doc.AreProtosEqual(view.rootDoc, toFind) && toReturn.push(view)); + lightViews.map(view => view.Document === toFind && toReturn.push(view)); + lightViews.map(view => view.Document !== toFind && Doc.AreProtosEqual(view.Document, toFind) && toReturn.push(view)); + docViews.map(view => view.Document === toFind && toReturn.push(view)); + docViews.map(view => view.Document !== toFind && Doc.AreProtosEqual(view.Document, toFind) && toReturn.push(view)); return toReturn; } @@ -223,7 +225,7 @@ export class DocumentManager { } public static removeOverlayViews() { - DocumentManager._overlayViews?.forEach(action(view => (view.textHtmlOverlay = undefined))); + DocumentManager._overlayViews?.forEach(view => view.setTextHtmlOverlay(undefined, undefined)); DocumentManager._overlayViews?.clear(); } static _overlayViews = new ObservableSet<DocumentView>(); @@ -235,12 +237,12 @@ export class DocumentManager { // shows a documentView by: // traverses down through the viewPath of contexts to the view: // focusing on each context - public showDocumentView = async (targetDocView: DocumentView, options: DocFocusOptions) => { - const docViewPath = targetDocView.docViewPath.slice(); + public showDocumentView = async (targetDocView: DocumentView, options: FocusViewOptions) => { + const docViewPath = [...(targetDocView.containerViewPath?.() ?? []), targetDocView]; let rootContextView = docViewPath.shift(); await (rootContextView && this.focusViewsInPath(rootContextView, options, async () => ({ childDocView: docViewPath.shift(), viewSpec: undefined, focused: false }))); - if (options.toggleTarget && (!options.didMove || targetDocView.rootDoc.hidden)) targetDocView.rootDoc.hidden = !targetDocView.rootDoc.hidden; - else if (options.openLocation?.startsWith(OpenWhere.toggle) && !options.didMove && rootContextView) DocumentViewInternal.addDocTabFunc(rootContextView.rootDoc, options.openLocation); + if (options.toggleTarget && (!options.didMove || targetDocView.Document.hidden)) targetDocView.Document.hidden = !targetDocView.Document.hidden; + else if (options.openLocation?.startsWith(OpenWhere.toggle) && !options.didMove && rootContextView) DocumentViewInternal.addDocTabFunc(rootContextView.Document, options.openLocation); }; // shows a document by first: @@ -251,7 +253,7 @@ export class DocumentManager { // and finally restoring the targetDoc to the viewSpec specified by the last document which may either be the targetDoc, or a viewSpec that describes the targetDoc configuration public showDocument = async ( targetDoc: Doc, // document to display - options: DocFocusOptions, // options for how to navigate to target + options: FocusViewOptions, // options for how to navigate to target finished?: (changed: boolean) => void // func called after focusing on target with flag indicating whether anything needed to be done. ) => { Doc.RemoveDocFromList(Doc.MyRecentlyClosed, undefined, targetDoc); @@ -273,14 +275,14 @@ export class DocumentManager { // even if we found the document view, if the target is a lightbox, we try to open it in the lightbox to preserve lightbox semantics (eg, there's only one active doc in the lightbox) const target = DocCast(targetDoc.annotationOn, targetDoc); const contextView = this.getDocumentView(DocCast(target.embedContainer)); - if (contextView?.docView?._componentView?.addDocTab?.(target, OpenWhere.lightbox)) { + if (contextView?.ComponentView?.addDocTab?.(target, OpenWhere.lightbox)) { await new Promise<void>(waitres => setTimeout(() => waitres())); } } docContextPath.shift(); const childViewIterator = async (docView: DocumentView) => { const innerDoc = docContextPath.shift(); - return { focused: false, viewSpec: innerDoc, childDocView: innerDoc && !innerDoc.layout_unrendered ? (await docView.ComponentView?.getView?.(innerDoc)) ?? this.getDocumentView(innerDoc) : undefined }; + return { focused: false, viewSpec: innerDoc, childDocView: innerDoc && !innerDoc.layout_unrendered ? (await docView.ComponentView?.getView?.(innerDoc, options)) ?? this.getDocumentView(innerDoc) : undefined }; }; if (rootContextView) { @@ -292,58 +294,56 @@ export class DocumentManager { focusViewsInPath = async ( docView: DocumentView, // - options: DocFocusOptions, + options: FocusViewOptions, iterator: (docView: DocumentView) => Promise<{ viewSpec: Opt<Doc>; childDocView: Opt<DocumentView>; focused: boolean }> ) => { let contextView: DocumentView | undefined; // view containing context that contains target let focused = false; while (true) { - if (docView.rootDoc.layout_fieldKey === 'layout_icon') { + if (docView.Document.layout_fieldKey === 'layout_icon') { await new Promise<void>(res => docView.iconify(res)); options.didMove = true; } - const nextFocus = docView.props.focus(docView.rootDoc, options); // focus the view within its container + const nextFocus = docView._props.focus(docView.Document, options); // focus the view within its container focused = focused || (nextFocus === undefined ? false : true); // keep track of whether focusing on a view needed to actually change anything const { childDocView, viewSpec } = await iterator(docView); - if (!childDocView) return { viewSpec: options.anchorDoc ?? viewSpec ?? docView.rootDoc, docView, contextView, focused }; - contextView = docView; + if (!childDocView) return { viewSpec: options.anchorDoc ?? viewSpec ?? docView.Document, docView, contextView, focused }; + contextView = options.anchorDoc?.layout_unrendered && !childDocView.Document.layout_unrendered ? childDocView : docView; docView = childDocView; } }; @action - restoreDocView(viewSpec: Opt<Doc>, docView: DocumentView, options: DocFocusOptions, contextView: Opt<DocumentView>, targetDoc: Doc) { + restoreDocView(viewSpec: Opt<Doc>, docView: DocumentView, options: FocusViewOptions, contextView: Opt<DocumentView>, targetDoc: Doc) { if (viewSpec && docView) { //if (docView.ComponentView instanceof FormattedTextBox) - //viewSpec !== docView.rootDoc && + //viewSpec !== docView.Document && docView.ComponentView?.focus?.(viewSpec, options); PresBox.restoreTargetDocView(docView, viewSpec, options.zoomTime ?? 500); - Doc.linkFollowHighlight(viewSpec ? [docView.rootDoc, viewSpec] : docView.rootDoc, undefined, options.effect); - if (options.playMedia) docView.ComponentView?.playFrom?.(NumCast(docView.rootDoc._layout_currentTimecode)); - if (options.playAudio) DocumentManager.playAudioAnno(docView.rootDoc); - if (options.toggleTarget && (!options.didMove || docView.rootDoc.hidden)) docView.rootDoc.hidden = !docView.rootDoc.hidden; - if (options.effect) docView.rootDoc[Animation] = options.effect; + Doc.linkFollowHighlight(viewSpec ? [docView.Document, viewSpec] : docView.Document, undefined, options.effect); + if (options.playMedia) docView.ComponentView?.playFrom?.(NumCast(docView.Document._layout_currentTimecode)); + if (options.playAudio) DocumentManager.playAudioAnno(docView.Document); + if (options.toggleTarget && (!options.didMove || docView.Document.hidden)) docView.Document.hidden = !docView.Document.hidden; + if (options.effect) docView.Document[Animation] = options.effect; - if (options.zoomTextSelections && Doc.UnhighlightTimer && contextView && viewSpec.text_html) { + if (options.zoomTextSelections && Doc.UnhighlightTimer && contextView && targetDoc.text_html) { // if the docView is a text anchor, the contextView is the PDF/Web/Text doc - contextView.htmlOverlayEffect = StrCast(options?.effect?.presentation_effect, StrCast(options?.effect?.followLinkAnimEffect)); - contextView.textHtmlOverlay = StrCast(targetDoc.text_html); + contextView.setTextHtmlOverlay(StrCast(targetDoc.text_html), options.effect); DocumentManager._overlayViews.add(contextView); } Doc.AddUnHighlightWatcher(() => { - docView.rootDoc[Animation] = undefined; + docView.Document[Animation] = undefined; DocumentManager.removeOverlayViews(); - contextView && (contextView.htmlOverlayEffect = ''); }); } } } -export function DocFocusOrOpen(doc: Doc, options: DocFocusOptions = { willZoomCentered: true, zoomScale: 0, openLocation: OpenWhere.toggleRight }, containingDoc?: Doc) { +export function DocFocusOrOpen(doc: Doc, options: FocusViewOptions = { willZoomCentered: true, zoomScale: 0, openLocation: OpenWhere.toggleRight }, containingDoc?: Doc) { const func = () => { const cv = DocumentManager.Instance.getDocumentView(containingDoc); const dv = DocumentManager.Instance.getDocumentView(doc, cv); - if (dv && (!containingDoc || dv.props.docViewPath().lastElement()?.Document === containingDoc)) { - DocumentManager.Instance.showDocumentView(dv, options).then(() => dv && Doc.linkFollowHighlight(dv.rootDoc)); + if (dv && (!containingDoc || dv.containerViewPath?.().lastElement()?.Document === containingDoc)) { + DocumentManager.Instance.showDocumentView(dv, options).then(() => dv && Doc.linkFollowHighlight(dv.Document)); } else { const container = DocCast(containingDoc ?? doc.embedContainer ?? Doc.BestEmbedding(doc)); const showDoc = !Doc.IsSystem(container) && !cv ? container : doc; @@ -351,7 +351,7 @@ export function DocFocusOrOpen(doc: Doc, options: DocFocusOptions = { willZoomCe DocumentManager.Instance.showDocument(showDoc, options, () => DocumentManager.Instance.showDocument(doc, { ...options, openLocation: undefined })).then(() => { const cv = DocumentManager.Instance.getDocumentView(containingDoc); const dv = DocumentManager.Instance.getDocumentView(doc, cv); - dv && Doc.linkFollowHighlight(dv.rootDoc); + dv && Doc.linkFollowHighlight(dv.Document); }); } }; diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index ea13eaa5b..a6ad0f1b3 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -4,15 +4,17 @@ import { Doc, Field, Opt, StrListCast } from '../../fields/Doc'; import { List } from '../../fields/List'; import { PrefetchProxy } from '../../fields/Proxy'; import { ScriptField } from '../../fields/ScriptField'; -import { BoolCast, ScriptCast, StrCast } from '../../fields/Types'; +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 { DocData } from '../../fields/DocSymbols'; +const { default : { contextMenuZindex } } = require('../views/global/globalCssVariables.module.scss'); // prettier-ignore export type dropActionType = 'embed' | 'copy' | 'move' | 'add' | 'same' | 'inSame' | 'proto' | 'none' | undefined; // undefined = move, "same" = move but don't call dropPropertiesToRemove @@ -57,7 +59,7 @@ export function SetupDrag(_reference: React.RefObject<HTMLElement>, docFunc: () export namespace DragManager { let dragDiv: HTMLDivElement; let dragLabel: HTMLDivElement; - export let StartWindowDrag: Opt<(e: { pageX: number; pageY: number }, dragDocs: Doc[], finishDrag?: (aborted: boolean) => void) => void>; + export let StartWindowDrag: Opt<(e: { pageX: number; pageY: number }, dragDocs: Doc[], finishDrag?: (aborted: boolean) => void) => boolean>; export let CompleteWindowDrag: Opt<(aborted: boolean) => void>; export function Root() { @@ -84,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 @@ -132,7 +143,7 @@ export namespace DragManager { this.linkSourceGetAnchor = linkSourceGetAnchor; } get dragDocument() { - return this.linkDragView.props.Document; + return this.linkDragView.Document; } linkSourceGetAnchor: () => Doc; linkSourceDoc?: Doc; @@ -170,7 +181,7 @@ export namespace DragManager { } }; - export function MakeDropTarget(element: HTMLElement, dropFunc: (e: Event, de: DropEvent) => void, doc?: Doc, preDropFunc?: (e: Event, de: DropEvent, targetAction: dropActionType) => void): DragDropDisposer { + export function MakeDropTarget(element: HTMLElement, dropFunc: (e: Event, de: DropEvent) => void, doc: Doc, preDropFunc?: (e: Event, de: DropEvent, targetAction: dropActionType) => void): DragDropDisposer { if ('canDrop' in element.dataset) { throw new Error("Element is already droppable, can't make it droppable again"); } @@ -178,13 +189,13 @@ export namespace DragManager { const handler = (e: Event) => dropFunc(e, (e as CustomEvent<DropEvent>).detail); const preDropHandler = (e: Event) => { const de = (e as CustomEvent<DropEvent>).detail; - (preDropFunc ?? defaultPreDropFunc)(e, de, StrCast(doc?.dropAction) as dropActionType); + (preDropFunc ?? defaultPreDropFunc)(e, de, StrCast(doc.dropAction) as dropActionType); }; element.addEventListener('dashOnDrop', handler); - doc && element.addEventListener('dashPreDrop', preDropHandler); + element.addEventListener('dashPreDrop', preDropHandler); return () => { element.removeEventListener('dashOnDrop', handler); - doc && element.removeEventListener('dashPreDrop', preDropHandler); + element.removeEventListener('dashPreDrop', preDropHandler); delete element.dataset.canDrop; }; } @@ -198,7 +209,7 @@ export namespace DragManager { }; const finishDrag = async (e: DragCompleteEvent) => { const docDragData = e.docDragData; - setTimeout(() => dragData.draggedViews.forEach(view => view.props.CollectionFreeFormDocumentView?.().dragEnding())); + setTimeout(() => dragData.draggedViews.forEach(view => view.props.dragEnding?.())); onDropCompleted?.(e); // glr: optional additional function to be called - in this case with presentation trails if (docDragData && !docDragData.droppedDocuments.length) { docDragData.dropAction = dragData.userDropAction || dragData.dropAction; @@ -208,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' + ? d[DocData] + : docDragData.dropAction === 'copy' + ? (await Doc.MakeClone(d)).clone + : d ) ) ).filter(d => d); @@ -234,7 +243,7 @@ export namespace DragManager { }; dragData.draggedDocuments.map(d => d.dragFactory); // does this help? trying to make sure the dragFactory Doc is loaded StartDrag(eles, dragData, downX, downY, options, finishDrag); - dragData.draggedViews.forEach(view => view.props.CollectionFreeFormDocumentView?.().dragStarting()); + dragData.draggedViews.forEach(view => view.props.dragStarting?.()); return true; } @@ -242,9 +251,9 @@ export namespace DragManager { export function StartButtonDrag(eles: HTMLElement[], script: string, title: string, vars: { [name: string]: Field }, params: string[], initialize: (button: Doc) => void, downX: number, downY: number, options?: DragOptions) { const finishDrag = (e: DragCompleteEvent) => { const bd = Docs.Create.ButtonDocument({ toolTip: title, z: 1, _width: 150, _height: 50, title, onClick: ScriptField.MakeScript(script) }); - params.map(p => Object.keys(vars).indexOf(p) !== -1 && (Doc.GetProto(bd)[p] = new PrefetchProxy(vars[p] as Doc))); // copy all "captured" arguments into document parameterfields + params.map(p => Object.keys(vars).indexOf(p) !== -1 && (bd[DocData][p] = new PrefetchProxy(vars[p] as Doc))); // copy all "captured" arguments into document parameterfields initialize?.(bd); - Doc.GetProto(bd)['onClick-paramFieldKeys'] = new List<string>(params); + bd[DocData]['onClick-paramFieldKeys'] = new List<string>(params); e.docDragData && (e.docDragData.droppedDocuments = [bd]); return e; }; @@ -260,7 +269,7 @@ export namespace DragManager { // drags a linker button and creates a link on drop export function StartLinkDrag(ele: HTMLElement, sourceView: DocumentView, sourceDocGetAnchor: undefined | ((addAsAnnotation: boolean) => Doc), downX: number, downY: number, options?: DragOptions) { - StartDrag([ele], new DragManager.LinkDragData(sourceView, () => sourceDocGetAnchor?.(true) ?? sourceView.rootDoc), downX, downY, options); + StartDrag([ele], new DragManager.LinkDragData(sourceView, () => sourceDocGetAnchor?.(true) ?? sourceView.Document), downX, downY, options); } // drags a column from a schema view @@ -286,14 +295,14 @@ export namespace DragManager { const dist = Math.sqrt((dragx - x) * (dragx - x) + (dragy - y) * (dragy - y)); return { pt: [x, y], dist }; }; - SnappingManager.vertSnapLines().forEach((xCoord, i) => { + SnappingManager.VertSnapLines.forEach((xCoord, i) => { const pt = intersect(dragPt[0], dragPt[1], dragPt[0] + snapAspect, dragPt[1] + 1, xCoord, -1, xCoord, 1, dragPt[0], dragPt[1]); if (pt && pt.dist < closest) { closest = pt.dist; near = pt.pt; } }); - SnappingManager.horizSnapLines().forEach((yCoord, i) => { + SnappingManager.HorizSnapLines.forEach((yCoord, i) => { const pt = intersect(dragPt[0], dragPt[1], dragPt[0] + snapAspect, dragPt[1] + 1, -1, yCoord, 1, yCoord, dragPt[0], dragPt[1]); if (pt && pt.dist < closest) { closest = pt.dist; @@ -317,19 +326,19 @@ export namespace DragManager { return drag; }; return { - x: snapVal([xFromLeft, xFromRight], e.pageX, SnappingManager.vertSnapLines()), - y: snapVal([yFromTop, yFromBottom], e.pageY, SnappingManager.horizSnapLines()), + x: snapVal([xFromLeft, xFromRight], e.pageX, SnappingManager.VertSnapLines), + y: snapVal([yFromTop, yFromBottom], e.pageY, SnappingManager.HorizSnapLines), }; } - export let docsBeingDragged: Doc[] = observable([] as Doc[]); + export let docsBeingDragged: Doc[] = observable([]); export let CanEmbed = false; export let DocDragData: DocumentDragData | undefined; export function StartDrag(eles: HTMLElement[], dragData: { [id: string]: any }, downX: number, downY: number, options?: DragOptions, finishDrag?: (dropData: DragCompleteEvent) => void, dragUndoName?: string) { - if (dragData.dropAction === 'none' || DocumentView.ExploreMode) return; + if (dragData.dropAction === 'none' || SnappingManager.ExploreMode) return; DocDragData = dragData as DocumentDragData; const batch = UndoManager.StartBatch(dragUndoName ?? 'document drag'); eles = eles.filter(e => e); - CanEmbed = dragData.canEmbed || false; + SnappingManager.SetCanEmbed(dragData.canEmbed || false); if (!dragDiv) { dragDiv = document.createElement('div'); dragDiv.className = 'dragManager-dragDiv'; @@ -360,11 +369,18 @@ export namespace DragManager { const docsToDrag = dragData instanceof DocumentDragData ? dragData.draggedDocuments : dragData instanceof AnchorAnnoDragData ? [dragData.dragDocument] : []; const dragElements = eles.map(ele => { // bcz: very hacky -- if dragged element is a freeForm view with a rotation, then extract the rotation in order to apply it to the dragged element - let useDim = false; // if doc is rotated by freeformview, then the dragged elements width and height won't reflect the unrotated dimensions, so we need to rely on the element knowing its own width/height. \ + // bcz: used to be false, but that made dragging collection w/ native dim's not work... + let useDim = true; // if doc is rotated by freeformview, then the dragged elements width and height won't reflect the unrotated dimensions, so we need to rely on the element knowing its own width/height. \ // if the parent isn't a freeform view, then the element's width and height are presumed to match the acutal doc's dimensions (eg, dragging from import sidebar menu) - if (ele?.parentElement?.parentElement?.parentElement?.className === 'collectionFreeFormDocumentView-container') { - ele = ele.parentElement.parentElement.parentElement; - rot.push(Number(ele.style.transform.replace(/.*rotate\(([-0-9.e]*)deg\).*/, '$1') || 0)); + let rotation: number | undefined; + for (let parEle: HTMLElement | null | undefined = ele.parentElement; parEle; parEle = parEle?.parentElement) { + if (parEle.className === CollectionFreeFormDocumentView.CollectionFreeFormDocViewClassName) { + rotation = (rotation ?? 0) + Number(parEle.style.transform.replace(/.*rotate\(([-0-9.e]*)deg\).*/, '$1') || 0); + } + parEle = parEle.parentElement; + } + if (rotation !== undefined) { + rot.push(rotation); } else { useDim = true; rot.push(0); @@ -420,7 +436,7 @@ export namespace DragManager { color: 'black', transition: 'none', borderRadius: getComputedStyle(ele).borderRadius, - zIndex: globalCssVariables.contextMenuZindex, + zIndex: contextMenuZindex, transformOrigin: '0 0', width, height, @@ -455,7 +471,7 @@ export namespace DragManager { runInAction(() => docsBeingDragged.push(...docsToDrag)); const hideDragShowOriginalElements = (hide: boolean) => { - dragLabel.style.display = hide && !CanEmbed ? '' : 'none'; + dragLabel.style.display = hide && !SnappingManager.CanEmbed ? '' : 'none'; !hide && dragElements.map(dragElement => dragElement.parentNode === dragDiv && dragDiv.removeChild(dragElement)); setTimeout(() => eles.forEach(ele => (ele.hidden = hide))); }; @@ -475,13 +491,14 @@ export namespace DragManager { }; const cleanupDrag = action((undo: boolean) => { - (dragData as DocumentDragData).draggedViews?.forEach(view => view.props.CollectionFreeFormDocumentView?.().dragEnding()); + (dragData as DocumentDragData).draggedViews?.forEach(view => view.props.dragEnding?.()); hideDragShowOriginalElements(false); document.removeEventListener('pointermove', moveHandler, true); document.removeEventListener('pointerup', upHandler, true); SnappingManager.SetIsDragging(false); if (batch.end() && undo) UndoManager.Undo(); docsBeingDragged.length = 0; + SnappingManager.SetCanEmbed(false); }); var startWindowDragTimer: any; const moveHandler = (e: PointerEvent) => { @@ -489,7 +506,7 @@ export namespace DragManager { if (dragData instanceof DocumentDragData) { dragData.userDropAction = e.ctrlKey && e.altKey ? 'copy' : e.ctrlKey ? 'embed' : dragData.defaultDropAction; } - if (((e.target as any)?.className === 'lm_tabs' || (e.target as any)?.className === 'lm_header' || e?.shiftKey) && dragData.draggedDocuments.length === 1) { + if (((e.target as any)?.className === 'lm_tabs' || (e.target as any)?.className === 'lm_header') && dragData.draggedDocuments.length === 1) { if (!startWindowDragTimer) { startWindowDragTimer = setTimeout(async () => { startWindowDragTimer = undefined; @@ -555,7 +572,7 @@ export namespace DragManager { ); scrollAwaiter && clearTimeout(scrollAwaiter); - SnappingManager.GetIsDragging() && (scrollAwaiter = setTimeout(autoScrollHandler, 25)); + SnappingManager.IsDragging && (scrollAwaiter = setTimeout(autoScrollHandler, 25)); }; scrollAwaiter && clearTimeout(scrollAwaiter); scrollAwaiter = setTimeout(autoScrollHandler, 250); @@ -588,7 +605,7 @@ export namespace DragManager { altKey: e.altKey, metaKey: e.metaKey, ctrlKey: e.ctrlKey, - embedKey: CanEmbed, + embedKey: SnappingManager.CanEmbed, }, }; target.dispatchEvent(new CustomEvent<DropEvent>('dashPreDrop', dropArgs)); @@ -602,7 +619,7 @@ export namespace DragManager { ScriptingGlobals.add(function toggleRaiseOnDrag(readOnly?: boolean) { if (readOnly) { - return SelectionManager.Views().some(dv => dv.rootDoc.keepZWhenDragged); + return SelectionManager.Views.some(dv => dv.Document.keepZWhenDragged); } - SelectionManager.Views().map(dv => (dv.rootDoc.keepZWhenDragged = !dv.rootDoc.keepZWhenDragged)); + SelectionManager.Views.map(dv => (dv.Document.keepZWhenDragged = !dv.Document.keepZWhenDragged)); }); diff --git a/src/client/util/DropConverter.ts b/src/client/util/DropConverter.ts index 2c371f28e..f62ec8f83 100644 --- a/src/client/util/DropConverter.ts +++ b/src/client/util/DropConverter.ts @@ -1,4 +1,5 @@ import { Doc, DocListCast, Opt } from '../../fields/Doc'; +import { DocData } from '../../fields/DocSymbols'; import { ObjectField } from '../../fields/ObjectField'; import { RichTextField } from '../../fields/RichTextField'; import { listSpec } from '../../fields/Schema'; @@ -12,7 +13,7 @@ import { DragManager } from './DragManager'; import { ScriptingGlobals } from './ScriptingGlobals'; export function MakeTemplate(doc: Doc, first: boolean = true, rename: Opt<string> = undefined, templateField: string = '') { - if (templateField) Doc.GetProto(doc).title = templateField; /// the title determines which field is being templated + if (templateField) doc[DocData].title = templateField; /// the title determines which field is being templated doc.isTemplateDoc = makeTemplate(doc, first, rename); return doc; } @@ -33,7 +34,7 @@ function makeTemplate(doc: Doc, first: boolean = true, rename: Opt<string> = und let any = false; docs.forEach(d => { if (!StrCast(d.title).startsWith('-')) { - any = Doc.MakeMetadataFieldTemplate(d, Doc.GetProto(layoutDoc)) || any; + any = Doc.MakeMetadataFieldTemplate(d, layoutDoc[DocData]) || any; } else if (d.type === DocumentType.COL || d.data instanceof RichTextField) { any = makeTemplate(d, false) || any; } @@ -41,12 +42,12 @@ function makeTemplate(doc: Doc, first: boolean = true, rename: Opt<string> = und if (first) { if (!docs.length) { // bcz: feels hacky : if the root level document has items, it's not a field template - any = Doc.MakeMetadataFieldTemplate(doc, Doc.GetProto(layoutDoc)) || any; + any = Doc.MakeMetadataFieldTemplate(doc, layoutDoc[DocData]) || any; } } if (layoutDoc[fieldKey] instanceof RichTextField || layoutDoc[fieldKey] instanceof ImageField) { if (!StrCast(layoutDoc.title).startsWith('-')) { - any = Doc.MakeMetadataFieldTemplate(layoutDoc, Doc.GetProto(layoutDoc)); + any = Doc.MakeMetadataFieldTemplate(layoutDoc, layoutDoc[DocData]); } } rename && (doc.title = rename); diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx index 8973306bf..f4f879208 100644 --- a/src/client/util/GroupManager.tsx +++ b/src/client/util/GroupManager.tsx @@ -1,6 +1,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Button, IconButton, Size, Type } from 'browndash-components'; -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import Select from 'react-select'; @@ -17,6 +17,7 @@ import './GroupManager.scss'; import { GroupMemberView } from './GroupMemberView'; import { SettingsManager } from './SettingsManager'; import { SharingManager, User } from './SharingManager'; +import { ObservableReactComponent } from '../views/ObservableReactComponent'; /** * Interface for options for the react-select component @@ -27,12 +28,12 @@ export interface UserOptions { } @observer -export class GroupManager extends React.Component<{}> { +export class GroupManager extends ObservableReactComponent<{}> { static Instance: GroupManager; @observable isOpen: boolean = false; // whether the GroupManager is to be displayed or not. @observable private users: string[] = []; // list of users populated from the database. @observable private selectedUsers: UserOptions[] | null = null; // list of users selected in the "Select users" dropdown. - @observable currentGroup: Opt<Doc>; // the currently selected group. + @observable currentGroup: Opt<Doc> = undefined; // the currently selected group. @observable private createGroupModalOpen: boolean = false; private inputRef: React.RefObject<HTMLInputElement> = React.createRef(); // the ref for the input box. private createGroupButtonRef: React.RefObject<HTMLButtonElement> = React.createRef(); // the ref for the group creation button @@ -41,6 +42,7 @@ export class GroupManager extends React.Component<{}> { constructor(props: Readonly<{}>) { super(props); + makeObservable(this); GroupManager.Instance = this; } @@ -52,7 +54,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 +260,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/GroupMemberView.tsx b/src/client/util/GroupMemberView.tsx index 7de0f336f..894583711 100644 --- a/src/client/util/GroupMemberView.tsx +++ b/src/client/util/GroupMemberView.tsx @@ -19,35 +19,38 @@ interface GroupMemberViewProps { @observer export class GroupMemberView extends React.Component<GroupMemberViewProps> { @observable private memberSort: 'ascending' | 'descending' | 'none' = 'none'; + get group() { + return this.props.group; + } private get editingInterface() { - let members: string[] = this.props.group ? JSON.parse(StrCast(this.props.group.members)) : []; + let members: string[] = this.group ? JSON.parse(StrCast(this.group.members)) : []; members = this.memberSort === 'ascending' ? members.sort() : this.memberSort === 'descending' ? members.sort().reverse() : members; - const options: UserOptions[] = this.props.group ? GroupManager.Instance.options.filter(option => !(JSON.parse(StrCast(this.props.group.members)) as string[]).includes(option.value)) : []; + const options: UserOptions[] = this.group ? GroupManager.Instance.options.filter(option => !(JSON.parse(StrCast(this.group.members)) as string[]).includes(option.value)) : []; - const hasEditAccess = GroupManager.Instance.hasEditAccess(this.props.group); + const hasEditAccess = GroupManager.Instance.hasEditAccess(this.group); - return !this.props.group ? null : ( + return !this.group ? null : ( <div className="editing-interface" style={{ background: SettingsManager.userBackgroundColor, color: SettingsManager.userColor }}> <div className="editing-header"> <input className="group-title" style={{ marginLeft: !hasEditAccess ? '-14%' : 0 }} - value={StrCast(this.props.group.title || this.props.group.groupName)} - onChange={e => (this.props.group.title = e.currentTarget.value)} + value={StrCast(this.group.title || this.group.groupName)} + onChange={e => (this.group.title = e.currentTarget.value)} disabled={!hasEditAccess}></input> <div className={'memberView-closeButton'}> <Button icon={<FontAwesomeIcon icon={'times'} size={'lg'} />} onClick={action(this.props.onCloseButtonClick)} color={StrCast(Doc.UserDoc().userColor)} /> </div> - {GroupManager.Instance.hasEditAccess(this.props.group) ? ( + {GroupManager.Instance.hasEditAccess(this.group) ? ( <div className="group-buttons"> <div style={{ border: StrCast(Doc.UserDoc().userColor) }}> <Select className="add-member-dropdown" isSearchable={true} options={options} - onChange={selectedOption => GroupManager.Instance.addMemberToGroup(this.props.group, (selectedOption as UserOptions).value)} + onChange={selectedOption => GroupManager.Instance.addMemberToGroup(this.group, (selectedOption as UserOptions).value)} placeholder={'Add members'} value={null} styles={{ @@ -72,8 +75,8 @@ export class GroupMemberView extends React.Component<GroupMemberViewProps> { }} /> </div> - <div className={'delete-button'}> - <Button text={'Delete Group'} type={Type.TERT} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.deleteGroup(this.props.group)} /> + <div className="delete-button"> + <Button text="Delete Group" type={Type.TERT} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.deleteGroup(this.group)} /> </div> </div> ) : null} @@ -81,14 +84,14 @@ export class GroupMemberView extends React.Component<GroupMemberViewProps> { Emails {this.memberSort === 'ascending' ? '↑' : this.memberSort === 'descending' ? '↓' : ''} {/* → */} </div> </div> - <div className={'style-divider'} style={{ background: StrCast(Doc.UserDoc().userColor) }} /> + <div className="style-divider" style={{ background: StrCast(Doc.UserDoc().userColor) }} /> <div className="editing-contents" style={{ height: hasEditAccess ? '62%' : '85%' }}> {members.map(member => ( <div className="editing-row" key={member}> <div className="user-email">{member}</div> {hasEditAccess ? ( - <div className={'remove-button'} onClick={() => GroupManager.Instance.removeMemberFromGroup(this.props.group, member)}> - <IconButton icon={<FontAwesomeIcon icon={'trash-alt'} />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.removeMemberFromGroup(this.props.group, member)} /> + <div className={'remove-button'} onClick={() => GroupManager.Instance.removeMemberFromGroup(this.group, member)}> + <IconButton icon={<FontAwesomeIcon icon={'trash-alt'} />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.removeMemberFromGroup(this.group, member)} /> </div> ) : null} </div> diff --git a/src/client/util/History.ts b/src/client/util/History.ts index 18aee6444..2f1a336cc 100644 --- a/src/client/util/History.ts +++ b/src/client/util/History.ts @@ -85,7 +85,7 @@ export namespace HistoryUtil { }; function addParser(type: string, requiredFields: Parser, optionalFields: Parser, customParser?: (pathname: string[], opts: qs.ParsedQuery, current: ParsedUrl) => ParsedUrl | null | undefined) { - function parse(parser: ParserValue, value: string | string[] | null | undefined) { + function parse(parser: ParserValue, value: string | (string | null)[] | null | undefined) { if (value === undefined || value === null) { return value; } diff --git a/src/client/util/HypothesisUtils.ts b/src/client/util/HypothesisUtils.ts index 151f18d6f..c5f307f44 100644 --- a/src/client/util/HypothesisUtils.ts +++ b/src/client/util/HypothesisUtils.ts @@ -1,16 +1,15 @@ -import { StrCast, Cast } from '../../fields/Types'; -import { SearchUtil } from './SearchUtil'; import { action, runInAction } from 'mobx'; +import { simulateMouseClick } from '../../Utils'; import { Doc, Opt } from '../../fields/Doc'; +import { Cast, StrCast } from '../../fields/Types'; +import { WebField } from '../../fields/URLField'; import { DocumentType } from '../documents/DocumentTypes'; import { Docs } from '../documents/Documents'; -import { SelectionManager } from './SelectionManager'; -import { WebField } from '../../fields/URLField'; -import { DocumentManager } from './DocumentManager'; import { DocumentLinksButton } from '../views/nodes/DocumentLinksButton'; -import { simulateMouseClick, Utils } from '../../Utils'; import { DocumentView } from '../views/nodes/DocumentView'; -import { Id } from '../../fields/FieldSymbols'; +import { DocumentManager } from './DocumentManager'; +import { SearchUtil } from './SearchUtil'; +import { SelectionManager } from './SelectionManager'; export namespace Hypothesis { /** @@ -27,19 +26,19 @@ export namespace Hypothesis { * Search for a WebDocument whose url field matches the given uri, return undefined if not found */ export const findWebDoc = async (uri: string) => { - const currentDoc = SelectionManager.Docs().lastElement(); + const currentDoc = SelectionManager.Docs.lastElement(); if (currentDoc && Cast(currentDoc.data, WebField)?.url.href === uri) return currentDoc; // always check first whether the currently selected doc is the annotation's source, only use Search otherwise const results: Doc[] = []; - await SearchUtil.Search('web', true).then( - action(async (res: SearchUtil.DocSearchResult) => { - const docs = res.docs; - const filteredDocs = docs.filter(doc => doc.author === Doc.CurrentUserEmail && doc.type === DocumentType.WEB && doc.data); - filteredDocs.forEach(doc => { - uri === Cast(doc.data, WebField)?.url.href && results.push(doc); // TODO check visited sites history? - }); - }) - ); + // await SearchUtil.Search('web', true).then( + // action(async (res: SearchUtil.DocSearchResult) => { + // const docs = res.docs; + // const filteredDocs = docs.filter(doc => doc.author === Doc.CurrentUserEmail && doc.type === DocumentType.WEB && doc.data); + // filteredDocs.forEach(doc => { + // uri === Cast(doc.data, WebField)?.url.href && results.push(doc); // TODO check visited sites history? + // }); + // }) + // ); const onScreenResults = results.filter(doc => DocumentManager.Instance.getFirstDocumentView(doc)); return onScreenResults.length ? onScreenResults[0] : results.length ? results[0] : undefined; // prioritize results that are currently on the screen @@ -181,7 +180,7 @@ export namespace Hypothesis { }) ); const targetView: Opt<DocumentView> = DocumentManager.Instance.getFirstDocumentView(target); - const position = targetView?.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); + const position = targetView?.screenToViewTransform().inverse().transformPoint(0, 0); targetView && position && simulateMouseClick(targetView.ContentDiv!, position[0], position[1], position[0], position[1], false); }, 300); diff --git a/src/client/util/Import & Export/DirectoryImportBox.tsx b/src/client/util/Import & Export/DirectoryImportBox.tsx index 1a4c2450e..398ba3c04 100644 --- a/src/client/util/Import & Export/DirectoryImportBox.tsx +++ b/src/client/util/Import & Export/DirectoryImportBox.tsx @@ -1,440 +1,439 @@ -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { BatchedArray } from 'array-batcher'; -import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx'; -import { observer } from 'mobx-react'; -import { extname } from 'path'; -import Measure, { ContentRect } from 'react-measure'; -import { Doc, DocListCast, DocListCastAsync, Opt } from '../../../fields/Doc'; -import { Id } from '../../../fields/FieldSymbols'; -import { List } from '../../../fields/List'; -import { listSpec } from '../../../fields/Schema'; -import { SchemaHeaderField } from '../../../fields/SchemaHeaderField'; -import { BoolCast, Cast, NumCast } from '../../../fields/Types'; -import { AcceptableMedia, Upload } from '../../../server/SharedMediaTypes'; -import { Utils } from '../../../Utils'; -import { GooglePhotos } from '../../apis/google_docs/GooglePhotosClientUtils'; -import { Docs, DocumentOptions, DocUtils } from '../../documents/Documents'; -import { DocumentType } from '../../documents/DocumentTypes'; -import { Networking } from '../../Network'; -import { FieldView, FieldViewProps } from '../../views/nodes/FieldView'; -import { DocumentManager } from '../DocumentManager'; -import './DirectoryImportBox.scss'; -import ImportMetadataEntry, { keyPlaceholder, valuePlaceholder } from './ImportMetadataEntry'; -import React = require('react'); -import _ = require('lodash'); +// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +// import { BatchedArray } from 'array-batcher'; +// import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx'; +// import { observer } from 'mobx-react'; +// import { extname } from 'path'; +// import Measure, { ContentRect } from 'react-measure'; +// import { Doc, DocListCast, DocListCastAsync, Opt } from '../../../fields/Doc'; +// import { Id } from '../../../fields/FieldSymbols'; +// import { List } from '../../../fields/List'; +// import { listSpec } from '../../../fields/Schema'; +// import { SchemaHeaderField } from '../../../fields/SchemaHeaderField'; +// import { BoolCast, Cast, NumCast } from '../../../fields/Types'; +// import { AcceptableMedia, Upload } from '../../../server/SharedMediaTypes'; +// import { Utils } from '../../../Utils'; +// import { GooglePhotos } from '../../apis/google_docs/GooglePhotosClientUtils'; +// import { Docs, DocumentOptions, DocUtils } from '../../documents/Documents'; +// import { DocumentType } from '../../documents/DocumentTypes'; +// import { Networking } from '../../Network'; +// import { FieldView, FieldViewProps } from '../../views/nodes/FieldView'; +// import { DocumentManager } from '../DocumentManager'; +// import './DirectoryImportBox.scss'; +// import ImportMetadataEntry, { keyPlaceholder, valuePlaceholder } from './ImportMetadataEntry'; +// import * as React from 'react'; -const unsupported = ['text/html', 'text/plain']; +// const unsupported = ['text/html', 'text/plain']; -@observer -export class DirectoryImportBox extends React.Component<FieldViewProps> { - private selector = React.createRef<HTMLInputElement>(); - @observable private top = 0; - @observable private left = 0; - private dimensions = 50; - @observable private phase = ''; - private disposer: Opt<IReactionDisposer>; +// @observer +// export class DirectoryImportBox extends React.Component<FieldViewProps> { +// private selector = React.createRef<HTMLInputElement>(); +// @observable private top = 0; +// @observable private left = 0; +// private dimensions = 50; +// @observable private phase = ''; +// private disposer: Opt<IReactionDisposer>; - @observable private entries: ImportMetadataEntry[] = []; +// @observable private entries: ImportMetadataEntry[] = []; - @observable private quota = 1; - @observable private completed = 0; +// @observable private quota = 1; +// @observable private completed = 0; - @observable private uploading = false; - @observable private removeHover = false; +// @observable private uploading = false; +// @observable private removeHover = false; - public static LayoutString(fieldKey: string) { - return FieldView.LayoutString(DirectoryImportBox, fieldKey); - } +// public static LayoutString(fieldKey: string) { +// return FieldView.LayoutString(DirectoryImportBox, fieldKey); +// } - constructor(props: FieldViewProps) { - super(props); - const doc = this.props.Document; - this.editingMetadata = this.editingMetadata || false; - this.persistent = this.persistent || false; - !Cast(doc.data, listSpec(Doc)) && (doc.data = new List<Doc>()); - } +// constructor(props: FieldViewProps) { +// super(props); +// const doc = this.props.Document; +// this.editingMetadata = this.editingMetadata || false; +// this.persistent = this.persistent || false; +// !Cast(doc.data, listSpec(Doc)) && (doc.data = new List<Doc>()); +// } - @computed - private get editingMetadata() { - return BoolCast(this.props.Document.editingMetadata); - } +// @computed +// private get editingMetadata() { +// return BoolCast(this.props.Document.editingMetadata); +// } - private set editingMetadata(value: boolean) { - this.props.Document.editingMetadata = value; - } +// private set editingMetadata(value: boolean) { +// this.props.Document.editingMetadata = value; +// } - @computed - private get persistent() { - return BoolCast(this.props.Document.persistent); - } +// @computed +// private get persistent() { +// return BoolCast(this.props.Document.persistent); +// } - private set persistent(value: boolean) { - this.props.Document.persistent = value; - } +// private set persistent(value: boolean) { +// this.props.Document.persistent = value; +// } - handleSelection = async (e: React.ChangeEvent<HTMLInputElement>) => { - runInAction(() => { - this.uploading = true; - this.phase = 'Initializing download...'; - }); +// handleSelection = async (e: React.ChangeEvent<HTMLInputElement>) => { +// runInAction(() => { +// this.uploading = true; +// this.phase = 'Initializing download...'; +// }); - const docs: Doc[] = []; +// const docs: Doc[] = []; - const files = e.target.files; - if (!files || files.length === 0) return; +// const files = e.target.files; +// if (!files || files.length === 0) return; - const directory = (files.item(0) as any).webkitRelativePath.split('/', 1)[0]; +// const directory = (files.item(0) as any).webkitRelativePath.split('/', 1)[0]; - const validated: File[] = []; - for (let i = 0; i < files.length; i++) { - const file = files.item(i); - if (file && !unsupported.includes(file.type)) { - const ext = extname(file.name).toLowerCase(); - if (AcceptableMedia.imageFormats.includes(ext)) { - validated.push(file); - } - } - } +// const validated: File[] = []; +// for (let i = 0; i < files.length; i++) { +// const file = files.item(i); +// if (file && !unsupported.includes(file.type)) { +// const ext = extname(file.name).toLowerCase(); +// if (AcceptableMedia.imageFormats.includes(ext)) { +// validated.push(file); +// } +// } +// } - runInAction(() => { - this.quota = validated.length; - this.completed = 0; - }); +// runInAction(() => { +// this.quota = validated.length; +// this.completed = 0; +// }); - const sizes: number[] = []; - const modifiedDates: number[] = []; +// const sizes: number[] = []; +// const modifiedDates: number[] = []; - runInAction(() => (this.phase = `Internal: uploading ${this.quota - this.completed} files to Dash...`)); +// runInAction(() => (this.phase = `Internal: uploading ${this.quota - this.completed} files to Dash...`)); - const batched = BatchedArray.from(validated, { batchSize: 15 }); - const uploads = await batched.batchedMapAsync<Upload.FileResponse<Upload.ImageInformation>>(async (batch, collector) => { - batch.forEach(file => { - sizes.push(file.size); - modifiedDates.push(file.lastModified); - }); - collector.push(...(await Networking.UploadFilesToServer<Upload.ImageInformation>(batch.map(file =>({file}))))); - runInAction(() => (this.completed += batch.length)); - }); +// const batched = BatchedArray.from(validated, { batchSize: 15 }); +// const uploads = await batched.batchedMapAsync<Upload.FileResponse<Upload.ImageInformation>>(async (batch, collector) => { +// batch.forEach(file => { +// sizes.push(file.size); +// modifiedDates.push(file.lastModified); +// }); +// collector.push(...(await Networking.UploadFilesToServer<Upload.ImageInformation>(batch.map(file => ({ file }))))); +// runInAction(() => (this.completed += batch.length)); +// }); - await Promise.all( - uploads.map(async response => { - const { - source: { type }, - result, - } = response; - if (result instanceof Error) { - return; - } - const { accessPaths, exifData } = result; - const path = Utils.prepend(accessPaths.agnostic.client); - const document = type && (await DocUtils.DocumentFromType(type, path, { _width: 300 })); - const { data, error } = exifData; - if (document) { - Doc.GetProto(document).exif = error || Doc.Get.FromJson({ data }); - docs.push(document); - } - }) - ); +// await Promise.all( +// uploads.map(async response => { +// const { +// source: { mimetype }, +// result, +// } = response; +// if (result instanceof Error) { +// return; +// } +// const { accessPaths, exifData } = result; +// const path = Utils.prepend(accessPaths.agnostic.client); +// const document = mimetype && (await DocUtils.DocumentFromType(mimetype, path, { _width: 300 })); +// const { data, error } = exifData; +// if (document) { +// Doc.GetProto(document).exif = error || Doc.Get.FromJson({ data }); +// docs.push(document); +// } +// }) +// ); - for (let i = 0; i < docs.length; i++) { - const doc = docs[i]; - doc.size = sizes[i]; - doc.modified = modifiedDates[i]; - this.entries.forEach(entry => { - const target = entry.onDataDoc ? Doc.GetProto(doc) : doc; - target[entry.key] = entry.value; - }); - } +// for (let i = 0; i < docs.length; i++) { +// const doc = docs[i]; +// doc.size = sizes[i]; +// doc.modified = modifiedDates[i]; +// this.entries.forEach(entry => { +// const target = entry.onDataDoc ? Doc.GetProto(doc) : doc; +// target[entry.key] = entry.value; +// }); +// } - const doc = this.props.Document; - const height: number = NumCast(doc.height) || 0; - const offset: number = this.persistent ? (height === 0 ? 0 : height + 30) : 0; - const options: DocumentOptions = { - title: `Import of ${directory}`, - _width: 1105, - _height: 500, - _chromeHidden: true, - x: NumCast(doc.x), - y: NumCast(doc.y) + offset, - }; - const parent = this.props.DocumentView?.().props.docViewPath().lastElement(); - if (parent?.rootDoc.type === DocumentType.COL) { - let importContainer: Doc; - if (docs.length < 50) { - importContainer = Docs.Create.MasonryDocument(docs, options); - } else { - const headers = [new SchemaHeaderField('title'), new SchemaHeaderField('size')]; - importContainer = Docs.Create.SchemaDocument(headers, docs, options); - } - runInAction(() => (this.phase = 'External: uploading files to Google Photos...')); - await GooglePhotos.Export.CollectionToAlbum({ collection: importContainer }); - Doc.AddDocToList(Doc.GetProto(parent.props.Document), 'data', importContainer); - !this.persistent && this.props.removeDocument && this.props.removeDocument(doc); - DocumentManager.Instance.showDocument(importContainer, { willZoomCentered: true }); - } +// const doc = this.props.Document; +// const height: number = NumCast(doc.height) || 0; +// const offset: number = this.persistent ? (height === 0 ? 0 : height + 30) : 0; +// const options: DocumentOptions = { +// title: `Import of ${directory}`, +// _width: 1105, +// _height: 500, +// _chromeHidden: true, +// x: NumCast(doc.x), +// y: NumCast(doc.y) + offset, +// }; +// const parent = this.props.DocumentView?.().containerViewPath().lastElement(); +// if (parent?.Document.type === DocumentType.COL) { +// let importContainer: Doc; +// if (docs.length < 50) { +// importContainer = Docs.Create.MasonryDocument(docs, options); +// } else { +// const headers = [new SchemaHeaderField('title'), new SchemaHeaderField('size')]; +// importContainer = Docs.Create.SchemaDocument(headers, docs, options); +// } +// runInAction(() => (this.phase = 'External: uploading files to Google Photos...')); +// await GooglePhotos.Export.CollectionToAlbum({ collection: importContainer }); +// Doc.AddDocToList(Doc.GetProto(parent.props.Document), 'data', importContainer); +// !this.persistent && this.props.removeDocument && this.props.removeDocument(doc); +// DocumentManager.Instance.showDocument(importContainer, { willZoomCentered: true }); +// } - runInAction(() => { - this.uploading = false; - this.quota = 1; - this.completed = 0; - }); - }; +// runInAction(() => { +// this.uploading = false; +// this.quota = 1; +// this.completed = 0; +// }); +// }; - componentDidMount() { - this.selector.current!.setAttribute('directory', ''); - this.selector.current!.setAttribute('webkitdirectory', ''); - this.disposer = reaction( - () => this.completed, - completed => runInAction(() => (this.phase = `Internal: uploading ${this.quota - completed} files to Dash...`)) - ); - } +// componentDidMount() { +// this.selector.current!.setAttribute('directory', ''); +// this.selector.current!.setAttribute('webkitdirectory', ''); +// this.disposer = reaction( +// () => this.completed, +// completed => runInAction(() => (this.phase = `Internal: uploading ${this.quota - completed} files to Dash...`)) +// ); +// } - componentWillUnmount() { - this.disposer && this.disposer(); - } +// componentWillUnmount() { +// this.disposer && this.disposer(); +// } - @action - preserveCentering = (rect: ContentRect) => { - const bounds = rect.offset!; - if (bounds.width === 0 || bounds.height === 0) { - return; - } - const offset = this.dimensions / 2; - this.left = bounds.width / 2 - offset; - this.top = bounds.height / 2 - offset; - }; +// @action +// preserveCentering = (rect: ContentRect) => { +// const bounds = rect.offset!; +// if (bounds.width === 0 || bounds.height === 0) { +// return; +// } +// const offset = this.dimensions / 2; +// this.left = bounds.width / 2 - offset; +// this.top = bounds.height / 2 - offset; +// }; - @action - addMetadataEntry = async () => { - const entryDoc = new Doc(); - entryDoc.checked = false; - entryDoc.key = keyPlaceholder; - entryDoc.value = valuePlaceholder; - Doc.AddDocToList(this.props.Document, 'data', entryDoc); - }; +// @action +// addMetadataEntry = async () => { +// const entryDoc = new Doc(); +// entryDoc.checked = false; +// entryDoc.key = keyPlaceholder; +// entryDoc.value = valuePlaceholder; +// Doc.AddDocToList(this.props.Document, 'data', entryDoc); +// }; - @action - remove = async (entry: ImportMetadataEntry) => { - const metadata = await DocListCastAsync(this.props.Document.data); - if (metadata) { - let index = this.entries.indexOf(entry); - if (index !== -1) { - runInAction(() => this.entries.splice(index, 1)); - index = metadata.indexOf(entry.props.Document); - if (index !== -1) { - metadata.splice(index, 1); - } - } - } - }; +// @action +// remove = async (entry: ImportMetadataEntry) => { +// const metadata = await DocListCastAsync(this.props.Document.data); +// if (metadata) { +// let index = this.entries.indexOf(entry); +// if (index !== -1) { +// runInAction(() => this.entries.splice(index, 1)); +// index = metadata.indexOf(entry.props.Document); +// if (index !== -1) { +// metadata.splice(index, 1); +// } +// } +// } +// }; - render() { - const dimensions = 50; - const entries = DocListCast(this.props.Document.data); - const isEditing = this.editingMetadata; - const completed = this.completed; - const quota = this.quota; - const uploading = this.uploading; - const showRemoveLabel = this.removeHover; - const persistent = this.persistent; - let percent = `${(completed / quota) * 100}`; - percent = percent.split('.')[0]; - percent = percent.startsWith('100') ? '99' : percent; - const marginOffset = (percent.length === 1 ? 5 : 0) - 1.6; - const message = <span className={'phase'}>{this.phase}</span>; - const centerPiece = this.phase.includes('Google Photos') ? ( - <img - src={'/assets/google_photos.png'} - style={{ - transition: '0.4s opacity ease', - width: 30, - height: 30, - opacity: uploading ? 1 : 0, - pointerEvents: 'none', - position: 'absolute', - left: 12, - top: this.top + 10, - fontSize: 18, - color: 'white', - marginLeft: this.left + marginOffset, - }} - /> - ) : ( - <div - style={{ - transition: '0.4s opacity ease', - opacity: uploading ? 1 : 0, - pointerEvents: 'none', - position: 'absolute', - left: 10, - top: this.top + 12.3, - fontSize: 18, - color: 'white', - marginLeft: this.left + marginOffset, - }}> - {percent}% - </div> - ); - return ( - <Measure offset onResize={this.preserveCentering}> - {({ measureRef }) => ( - <div ref={measureRef} style={{ width: '100%', height: '100%', pointerEvents: 'all' }}> - {message} - <input - id={'selector'} - ref={this.selector} - onChange={this.handleSelection} - type="file" - style={{ - position: 'absolute', - display: 'none', - }} - /> - <label - htmlFor={'selector'} - style={{ - opacity: isEditing ? 0 : 1, - pointerEvents: isEditing ? 'none' : 'all', - transition: '0.4s ease opacity', - }}> - <div - style={{ - width: dimensions, - height: dimensions, - borderRadius: '50%', - background: 'black', - position: 'absolute', - left: this.left, - top: this.top, - }} - /> - <div - style={{ - position: 'absolute', - left: this.left + 8, - top: this.top + 10, - opacity: uploading ? 0 : 1, - transition: '0.4s opacity ease', - }}> - <FontAwesomeIcon icon={'cloud-upload-alt'} color="#FFFFFF" size={'2x'} /> - </div> - <img - style={{ - width: 80, - height: 80, - transition: '0.4s opacity ease', - opacity: uploading ? 0.7 : 0, - position: 'absolute', - top: this.top - 15, - left: this.left - 15, - }} - src={'/assets/loading.gif'}></img> - </label> - <input - type={'checkbox'} - onChange={e => runInAction(() => (this.persistent = e.target.checked))} - style={{ - margin: 0, - position: 'absolute', - left: 10, - bottom: 10, - opacity: isEditing || uploading ? 0 : 1, - transition: '0.4s opacity ease', - pointerEvents: isEditing || uploading ? 'none' : 'all', - }} - checked={this.persistent} - onPointerEnter={action(() => (this.removeHover = true))} - onPointerLeave={action(() => (this.removeHover = false))} - /> - <p - style={{ - position: 'absolute', - left: 27, - bottom: 8.4, - fontSize: 12, - opacity: showRemoveLabel ? 1 : 0, - transition: '0.4s opacity ease', - }}> - Template will be <span style={{ textDecoration: 'underline', textDecorationColor: persistent ? 'green' : 'red', color: persistent ? 'green' : 'red' }}>{persistent ? 'kept' : 'removed'}</span> after upload - </p> - {centerPiece} - <div - style={{ - position: 'absolute', - top: 10, - right: 10, - borderRadius: '50%', - width: 25, - height: 25, - background: 'black', - pointerEvents: uploading ? 'none' : 'all', - opacity: uploading ? 0 : 1, - transition: '0.4s opacity ease', - }} - title={isEditing ? 'Back to Upload' : 'Add Metadata'} - onClick={action(() => (this.editingMetadata = !this.editingMetadata))} - /> - <FontAwesomeIcon - style={{ - pointerEvents: 'none', - position: 'absolute', - right: isEditing ? 14 : 15, - top: isEditing ? 15.4 : 16, - opacity: uploading ? 0 : 1, - transition: '0.4s opacity ease', - }} - icon={isEditing ? 'cloud-upload-alt' : 'tag'} - color="#FFFFFF" - size={'1x'} - /> - <div - style={{ - transition: '0.4s ease opacity', - width: '100%', - height: '100%', - pointerEvents: isEditing ? 'all' : 'none', - opacity: isEditing ? 1 : 0, - overflowY: 'scroll', - }}> - <div - style={{ - borderRadius: '50%', - width: 25, - height: 25, - marginLeft: 10, - position: 'absolute', - right: 41, - top: 10, - }} - title={'Add Metadata Entry'} - onClick={this.addMetadataEntry}> - <FontAwesomeIcon - style={{ - pointerEvents: 'none', - marginLeft: 6.4, - marginTop: 5.2, - }} - icon={'plus'} - size={'1x'} - /> - </div> - <p style={{ paddingLeft: 10, paddingTop: 8, paddingBottom: 7 }}>Add metadata to your import...</p> - <hr style={{ margin: '6px 10px 12px 10px' }} /> - {entries.map(doc => ( - <ImportMetadataEntry - Document={doc} - key={doc[Id]} - remove={this.remove} - ref={el => { - if (el) this.entries.push(el); - }} - next={this.addMetadataEntry} - /> - ))} - </div> - </div> - )} - </Measure> - ); - } -} +// render() { +// const dimensions = 50; +// const entries = DocListCast(this.props.Document.data); +// const isEditing = this.editingMetadata; +// const completed = this.completed; +// const quota = this.quota; +// const uploading = this.uploading; +// const showRemoveLabel = this.removeHover; +// const persistent = this.persistent; +// let percent = `${(completed / quota) * 100}`; +// percent = percent.split('.')[0]; +// percent = percent.startsWith('100') ? '99' : percent; +// const marginOffset = (percent.length === 1 ? 5 : 0) - 1.6; +// const message = <span className={'phase'}>{this.phase}</span>; +// const centerPiece = this.phase.includes('Google Photos') ? ( +// <img +// src={'/assets/google_photos.png'} +// style={{ +// transition: '0.4s opacity ease', +// width: 30, +// height: 30, +// opacity: uploading ? 1 : 0, +// pointerEvents: 'none', +// position: 'absolute', +// left: 12, +// top: this.top + 10, +// fontSize: 18, +// color: 'white', +// marginLeft: this.left + marginOffset, +// }} +// /> +// ) : ( +// <div +// style={{ +// transition: '0.4s opacity ease', +// opacity: uploading ? 1 : 0, +// pointerEvents: 'none', +// position: 'absolute', +// left: 10, +// top: this.top + 12.3, +// fontSize: 18, +// color: 'white', +// marginLeft: this.left + marginOffset, +// }}> +// {percent}% +// </div> +// ); +// return ( +// <Measure offset onResize={this.preserveCentering}> +// {({ measureRef }) => ( +// <div ref={measureRef} style={{ width: '100%', height: '100%', pointerEvents: 'all' }}> +// {message} +// <input +// id={'selector'} +// ref={this.selector} +// onChange={this.handleSelection} +// type="file" +// style={{ +// position: 'absolute', +// display: 'none', +// }} +// /> +// <label +// htmlFor={'selector'} +// style={{ +// opacity: isEditing ? 0 : 1, +// pointerEvents: isEditing ? 'none' : 'all', +// transition: '0.4s ease opacity', +// }}> +// <div +// style={{ +// width: dimensions, +// height: dimensions, +// borderRadius: '50%', +// background: 'black', +// position: 'absolute', +// left: this.left, +// top: this.top, +// }} +// /> +// <div +// style={{ +// position: 'absolute', +// left: this.left + 8, +// top: this.top + 10, +// opacity: uploading ? 0 : 1, +// transition: '0.4s opacity ease', +// }}> +// <FontAwesomeIcon icon={'cloud-upload-alt'} color="#FFFFFF" size={'2x'} /> +// </div> +// <img +// style={{ +// width: 80, +// height: 80, +// transition: '0.4s opacity ease', +// opacity: uploading ? 0.7 : 0, +// position: 'absolute', +// top: this.top - 15, +// left: this.left - 15, +// }} +// src={'/assets/loading.gif'}></img> +// </label> +// <input +// type={'checkbox'} +// onChange={e => runInAction(() => (this.persistent = e.target.checked))} +// style={{ +// margin: 0, +// position: 'absolute', +// left: 10, +// bottom: 10, +// opacity: isEditing || uploading ? 0 : 1, +// transition: '0.4s opacity ease', +// pointerEvents: isEditing || uploading ? 'none' : 'all', +// }} +// checked={this.persistent} +// onPointerEnter={action(() => (this.removeHover = true))} +// onPointerLeave={action(() => (this.removeHover = false))} +// /> +// <p +// style={{ +// position: 'absolute', +// left: 27, +// bottom: 8.4, +// fontSize: 12, +// opacity: showRemoveLabel ? 1 : 0, +// transition: '0.4s opacity ease', +// }}> +// Template will be <span style={{ textDecoration: 'underline', textDecorationColor: persistent ? 'green' : 'red', color: persistent ? 'green' : 'red' }}>{persistent ? 'kept' : 'removed'}</span> after upload +// </p> +// {centerPiece} +// <div +// style={{ +// position: 'absolute', +// top: 10, +// right: 10, +// borderRadius: '50%', +// width: 25, +// height: 25, +// background: 'black', +// pointerEvents: uploading ? 'none' : 'all', +// opacity: uploading ? 0 : 1, +// transition: '0.4s opacity ease', +// }} +// title={isEditing ? 'Back to Upload' : 'Add Metadata'} +// onClick={action(() => (this.editingMetadata = !this.editingMetadata))} +// /> +// <FontAwesomeIcon +// style={{ +// pointerEvents: 'none', +// position: 'absolute', +// right: isEditing ? 14 : 15, +// top: isEditing ? 15.4 : 16, +// opacity: uploading ? 0 : 1, +// transition: '0.4s opacity ease', +// }} +// icon={isEditing ? 'cloud-upload-alt' : 'tag'} +// color="#FFFFFF" +// size={'1x'} +// /> +// <div +// style={{ +// transition: '0.4s ease opacity', +// width: '100%', +// height: '100%', +// pointerEvents: isEditing ? 'all' : 'none', +// opacity: isEditing ? 1 : 0, +// overflowY: 'scroll', +// }}> +// <div +// style={{ +// borderRadius: '50%', +// width: 25, +// height: 25, +// marginLeft: 10, +// position: 'absolute', +// right: 41, +// top: 10, +// }} +// title={'Add Metadata Entry'} +// onClick={this.addMetadataEntry}> +// <FontAwesomeIcon +// style={{ +// pointerEvents: 'none', +// marginLeft: 6.4, +// marginTop: 5.2, +// }} +// icon={'plus'} +// size={'1x'} +// /> +// </div> +// <p style={{ paddingLeft: 10, paddingTop: 8, paddingBottom: 7 }}>Add metadata to your import...</p> +// <hr style={{ margin: '6px 10px 12px 10px' }} /> +// {entries.map(doc => ( +// <ImportMetadataEntry +// Document={doc} +// key={doc[Id]} +// remove={this.remove} +// ref={el => { +// if (el) this.entries.push(el); +// }} +// next={this.addMetadataEntry} +// /> +// ))} +// </div> +// </div> +// )} +// </Measure> +// ); +// } +// } diff --git a/src/client/util/Import & Export/ImageUtils.ts b/src/client/util/Import & Export/ImageUtils.ts index 55d37f544..d99828956 100644 --- a/src/client/util/Import & Export/ImageUtils.ts +++ b/src/client/util/Import & Export/ImageUtils.ts @@ -4,28 +4,33 @@ import { Cast, StrCast, NumCast } from '../../../fields/Types'; import { Networking } from '../../Network'; import { Id } from '../../../fields/FieldSymbols'; import { Utils } from '../../../Utils'; +import { DocData } from '../../../fields/DocSymbols'; export namespace ImageUtils { - export const ExtractExif = async (document: Doc): Promise<boolean> => { + export type imgInfo = { + contentSize: number; + nativeWidth: number; + nativeHeight: number; + source: string; + exifData: { error: string | undefined; data: string }; + }; + export const ExtractImgInfo = async (document: Doc): Promise<imgInfo | undefined> => { const field = Cast(document.data, ImageField); - if (!field) { - return false; + return field ? await Networking.PostToServer('/inspectImage', { source: field.url.href }) : undefined; + }; + + export const AssignImgInfo = (document: Doc, data?: imgInfo) => { + if (data) { + data.nativeWidth && (document._height = (NumCast(document._width) * data.nativeHeight) / data.nativeWidth); + const proto = document[DocData]; + const field = Doc.LayoutFieldKey(document); + proto[`${field}_nativeWidth`] = data.nativeWidth; + proto[`${field}_nativeHeight`] = data.nativeHeight; + proto[`${field}_path`] = data.source; + proto[`${field}_exif`] = JSON.stringify(data.exifData.data); + proto[`${field}_contentSize`] = data.contentSize ? data.contentSize : undefined; } - const source = field.url.href; - const { - contentSize, - nativeWidth, - nativeHeight, - exifData: { error, data }, - } = await Networking.PostToServer('/inspectImage', { source }); - document.exif = error || Doc.Get.FromJson({ data }); - const proto = Doc.GetProto(document); - nativeWidth && (document._height = (NumCast(document._width) * nativeHeight) / nativeWidth); - proto['data_nativeWidth'] = nativeWidth; - proto['data_nativeHeight'] = nativeHeight; - proto['data-path'] = source; - proto.data_contentSize = contentSize ? contentSize : undefined; - return data !== undefined; + return document; }; export const ExportHierarchyToFileSystem = async (collection: Doc): Promise<void> => { diff --git a/src/client/util/Import & Export/ImportMetadataEntry.tsx b/src/client/util/Import & Export/ImportMetadataEntry.tsx index 45d8c0c63..58a09b9c9 100644 --- a/src/client/util/Import & Export/ImportMetadataEntry.tsx +++ b/src/client/util/Import & Export/ImportMetadataEntry.tsx @@ -1,10 +1,10 @@ -import React = require("react"); -import { observer } from "mobx-react"; -import { EditableView } from "../../views/EditableView"; -import { action, computed } from "mobx"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { Doc } from "../../../fields/Doc"; -import { StrCast, BoolCast } from "../../../fields/Types"; +import * as React from 'react'; +import { observer } from 'mobx-react'; +import { EditableView } from '../../views/EditableView'; +import { action, computed } from 'mobx'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Doc } from '../../../fields/Doc'; +import { StrCast, BoolCast } from '../../../fields/Types'; interface KeyValueProps { Document: Doc; @@ -12,19 +12,18 @@ interface KeyValueProps { next: () => void; } -export const keyPlaceholder = "Key"; -export const valuePlaceholder = "Value"; +export const keyPlaceholder = 'Key'; +export const valuePlaceholder = 'Value'; @observer export default class ImportMetadataEntry extends React.Component<KeyValueProps> { - private keyRef = React.createRef<EditableView>(); private valueRef = React.createRef<EditableView>(); private checkRef = React.createRef<HTMLInputElement>(); @computed public get valid() { - return (this.key.length > 0 && this.key !== keyPlaceholder) && (this.value.length > 0 && this.value !== valuePlaceholder); + return this.key.length > 0 && this.key !== keyPlaceholder && this.value.length > 0 && this.value !== valuePlaceholder; } @computed @@ -66,7 +65,7 @@ export default class ImportMetadataEntry extends React.Component<KeyValueProps> this.valueRef.current && this.valueRef.current.setIsFocused(true); this.key.length === 0 && (this.key = keyPlaceholder); return true; - } + }; @action updateValue = (newValue: string, shiftDown: boolean) => { @@ -75,68 +74,45 @@ export default class ImportMetadataEntry extends React.Component<KeyValueProps> this.value.length > 0 && shiftDown && this.props.next(); this.value.length === 0 && (this.value = valuePlaceholder); return true; - } + }; render() { const keyValueStyle: React.CSSProperties = { paddingLeft: 10, - width: "50%", + width: '50%', opacity: this.valid ? 1 : 0.5, }; return ( <div style={{ - display: "flex", - flexDirection: "row", + display: 'flex', + flexDirection: 'row', paddingBottom: 5, paddingRight: 5, - justifyContent: "center", - alignItems: "center", - alignContent: "center" - }} - > - <input - onChange={e => this.onDataDoc = e.target.checked} - ref={this.checkRef} - style={{ margin: "0 10px 0 15px" }} - type="checkbox" - title={"Add to Data Document?"} - checked={this.onDataDoc} - /> - <div className={"key_container"} style={keyValueStyle}> - <EditableView - ref={this.keyRef} - contents={this.key} - SetValue={this.updateKey} - GetValue={() => ""} - oneLine={true} - /> + justifyContent: 'center', + alignItems: 'center', + alignContent: 'center', + }}> + <input onChange={e => (this.onDataDoc = e.target.checked)} ref={this.checkRef} style={{ margin: '0 10px 0 15px' }} type="checkbox" title={'Add to Data Document?'} checked={this.onDataDoc} /> + <div className={'key_container'} style={keyValueStyle}> + <EditableView ref={this.keyRef} contents={this.key} SetValue={this.updateKey} GetValue={() => ''} oneLine={true} /> </div> - <div - className={"value_container"} - style={keyValueStyle}> - <EditableView - ref={this.valueRef} - contents={this.value} - SetValue={this.updateValue} - GetValue={() => ""} - oneLine={true} - /> + <div className={'value_container'} style={keyValueStyle}> + <EditableView ref={this.valueRef} contents={this.value} SetValue={this.updateValue} GetValue={() => ''} oneLine={true} /> </div> - <div onClick={() => this.props.remove(this)} title={"Delete Entry"}> + <div onClick={() => this.props.remove(this)} title={'Delete Entry'}> <FontAwesomeIcon - icon={"plus"} - color={"red"} - size={"1x"} + icon={'plus'} + color={'red'} + size={'1x'} style={{ marginLeft: 15, marginRight: 15, - transform: "rotate(45deg)" + transform: 'rotate(45deg)', }} /> </div> </div> ); } - -}
\ No newline at end of file +} diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index be885312d..a2f5826fe 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -1,4 +1,4 @@ -import React = require('react'); +import * as React from 'react'; import { GestureUtils } from '../../pen-gestures/GestureUtils'; import { Utils } from '../../Utils'; import './InteractionUtils.scss'; diff --git a/src/client/util/LinkFollower.ts b/src/client/util/LinkFollower.ts index 146eed6c2..20261859c 100644 --- a/src/client/util/LinkFollower.ts +++ b/src/client/util/LinkFollower.ts @@ -1,14 +1,16 @@ -import { action, observable, runInAction } from 'mobx'; +import { action, runInAction } from 'mobx'; import { Doc, DocListCast, Field, FieldResult, Opt } from '../../fields/Doc'; import { ScriptField } from '../../fields/ScriptField'; import { BoolCast, Cast, DocCast, NumCast, ScriptCast, StrCast } from '../../fields/Types'; import { DocumentType } from '../documents/DocumentTypes'; -import { DocFocusOptions, OpenWhere } from '../views/nodes/DocumentView'; +import { OpenWhere } from '../views/nodes/DocumentView'; +import { FocusViewOptions } from '../views/nodes/FieldView'; import { PresBox } from '../views/nodes/trails'; import { DocumentManager } from './DocumentManager'; import { LinkManager } from './LinkManager'; import { ScriptingGlobals } from './ScriptingGlobals'; import { SelectionManager } from './SelectionManager'; +import { SnappingManager } from './SnappingManager'; import { UndoManager } from './UndoManager'; /* * link doc: @@ -23,19 +25,18 @@ import { UndoManager } from './UndoManager'; * - user defined kvps */ export class LinkFollower { - @observable public static IsFollowing = false; // follows a link - if the target is on screen, it highlights/pans to it. // if the target isn't onscreen, then it will open up the target in the lightbox, or in place // depending on the followLinkLocation property of the source (or the link itself as a fallback); public static FollowLink = (linkDoc: Opt<Doc>, sourceDoc: Doc, altKey: boolean) => { const batch = UndoManager.StartBatch('Follow Link'); - runInAction(() => (LinkFollower.IsFollowing = true)); // turn off decoration bounds while following links since animations may occur, and DocDecorations is based on screenToLocal which is not always an observable value + runInAction(() => SnappingManager.SetIsLinkFollowing(true)); // turn off decoration bounds while following links since animations may occur, and DocDecorations is based on screenToLocal which is not always an observable value return LinkFollower.traverseLink( linkDoc, sourceDoc, action(() => { batch.end(); - Doc.AddUnHighlightWatcher(action(() => (LinkFollower.IsFollowing = false))); + Doc.AddUnHighlightWatcher(() => SnappingManager.SetIsLinkFollowing(false)); }), altKey ? true : undefined ); @@ -63,16 +64,16 @@ export class LinkFollower { sourceDoc === linkDoc.link_anchor_1 ? linkDoc.link_anchor_2 : sourceDoc === linkDoc.link_anchor_2 - ? linkDoc.link_anchor_1 - : Doc.AreProtosEqual(sourceDoc, linkDoc.link_anchor_1 as Doc) || Doc.AreProtosEqual((linkDoc.link_anchor_1 as Doc).annotationOn as Doc, sourceDoc) - ? linkDoc.link_anchor_2 - : linkDoc.link_anchor_1 + ? linkDoc.link_anchor_1 + : Doc.AreProtosEqual(sourceDoc, linkDoc.link_anchor_1 as Doc) || Doc.AreProtosEqual((linkDoc.link_anchor_1 as Doc).annotationOn as Doc, sourceDoc) + ? linkDoc.link_anchor_2 + : linkDoc.link_anchor_1 ) as Doc; const srcAnchor = LinkManager.getOppositeAnchor(linkDoc, target) ?? sourceDoc; if (target) { const doFollow = (canToggle?: boolean) => { const toggleTarget = canToggle && BoolCast(sourceDoc.followLinkToggle); - const options: DocFocusOptions = { + const options: FocusViewOptions = { playAudio: BoolCast(srcAnchor.followLinkAudio), playMedia: BoolCast(srcAnchor.followLinkVideo), toggleTarget, diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts index ba53a760f..353f28a92 100644 --- a/src/client/util/LinkManager.ts +++ b/src/client/util/LinkManager.ts @@ -1,7 +1,7 @@ -import { action, observable, observe, runInAction } from 'mobx'; +import { action, makeObservable, observable, observe, runInAction } from 'mobx'; import { computedFn } from 'mobx-utils'; import { Doc, DocListCast, DocListCastAsync, Field, Opt } from '../../fields/Doc'; -import { DirectLinks } from '../../fields/DocSymbols'; +import { DirectLinks, DocData } from '../../fields/DocSymbols'; import { FieldLoader } from '../../fields/FieldLoader'; import { List } from '../../fields/List'; import { ProxyField } from '../../fields/Proxy'; @@ -22,9 +22,9 @@ import { ScriptingGlobals } from './ScriptingGlobals'; */ export class LinkManager { @observable static _instance: LinkManager; - @observable static userLinkDBs: Doc[] = []; - @observable public static currentLink: Opt<Doc>; - @observable public static currentLinkAnchor: Opt<Doc>; + @observable.shallow userLinkDBs: Doc[] = []; + @observable public static currentLink: Opt<Doc> = undefined; + @observable public static currentLinkAnchor: Opt<Doc> = undefined; public static get Instance() { return LinkManager._instance; } @@ -32,21 +32,20 @@ export class LinkManager { public static Links(doc: Doc | undefined) { return doc ? LinkManager.Instance.getAllRelatedLinks(doc) : []; } - public static addLinkDB = async (linkDb: any) => { + public addLinkDB = async (linkDb: any) => { await Promise.all( ((await DocListCastAsync(linkDb.data)) ?? []).map(link => // makes sure link anchors are loaded to avoid incremental updates to computedFns in LinkManager [PromiseValue(link?.link_anchor_1), PromiseValue(link?.link_anchor_2)] ) ); - LinkManager.userLinkDBs.push(linkDb); + this.userLinkDBs.push(linkDb); }; public static AutoKeywords = 'keywords:Usages'; - static _links: Doc[] = []; constructor() { + makeObservable(this); LinkManager._instance = this; this.createlink_relationshipLists(); - LinkManager.userLinkDBs = []; // since this is an action, not a reaction, we get only one shot to add this link to the Anchor docs // Thus make sure all promised values are resolved from link -> link.proto -> link.link_anchor_[1,2] -> link.link_anchor_[1,2].proto // Then add the link to the anchor protos. @@ -59,8 +58,8 @@ export class LinkManager { link && action(lAnchProtoProtos => { Doc.AddDocToList(Doc.UserDoc(), 'links', link); - lAnchs[0] && Doc.GetProto(lAnchs[0])[DirectLinks].add(link); - lAnchs[1] && Doc.GetProto(lAnchs[1])[DirectLinks].add(link); + lAnchs[0] && lAnchs[0][DocData][DirectLinks].add(link); + lAnchs[1] && lAnchs[1][DocData][DirectLinks].add(link); }) ) ) @@ -75,8 +74,8 @@ export class LinkManager { Promise.all(lAnchs.map(lAnch => PromiseValue(lAnch?.proto as Doc))).then((lAnchProtos: Opt<Doc>[]) => Promise.all(lAnchProtos.map(lAnchProto => PromiseValue(lAnchProto?.proto as Doc))).then( action(lAnchProtoProtos => { - link && lAnchs[0] && Doc.GetProto(lAnchs[0])[DirectLinks].delete(link); - link && lAnchs[1] && Doc.GetProto(lAnchs[1])[DirectLinks].delete(link); + link && lAnchs[0] && lAnchs[0][DocData][DirectLinks].delete(link); + link && lAnchs[1] && lAnchs[1][DocData][DirectLinks].delete(link); }) ) ) @@ -85,7 +84,6 @@ export class LinkManager { ); const watchUserLinkDB = (userLinkDBDoc: Doc) => { - LinkManager._links.push(...DocListCast(userLinkDBDoc.data)); const toRealField = (field: Field) => (field instanceof ProxyField ? field.value : field); // see List.ts. data structure is not a simple list of Docs, but a list of ProxyField/Fields if (userLinkDBDoc.data) { observe( @@ -124,7 +122,7 @@ export class LinkManager { } }; observe( - LinkManager.userLinkDBs, + this.userLinkDBs, change => { switch (change.type as any) { case 'splice': @@ -135,8 +133,8 @@ export class LinkManager { }, true ); - runInAction(() => (FieldLoader.ServerLoadStatus.message = 'links')); - LinkManager.addLinkDB(Doc.LinkDBDoc()); + FieldLoader.ServerLoadStatus.message = 'links'; + this.addLinkDB(Doc.LinkDBDoc()); } public createlink_relationshipLists = () => { @@ -163,8 +161,8 @@ export class LinkManager { public getAllRelatedLinks(anchor: Doc) { return this.relatedLinker(anchor); } // finds all links that contain the given anchor - public getAllDirectLinks(anchor: Doc): Doc[] { - return Array.from(Doc.GetProto(anchor)[DirectLinks]); + public getAllDirectLinks(anchor?: Doc): Doc[] { + return anchor ? Array.from(anchor[DirectLinks]) : []; } // finds all links that contain the given anchor relatedLinker = computedFn(function relatedLinker(this: any, anchor: Doc): Doc[] { @@ -197,14 +195,32 @@ export class LinkManager { } // finds the opposite anchor of a given anchor in a link - //TODO This should probably return undefined if there isn't an opposite anchor - //TODO This should also await the return value of the anchor so we don't filter out promises public static getOppositeAnchor(linkDoc: Doc, anchor: Doc): Doc | undefined { - const a1 = Cast(linkDoc.link_anchor_1, Doc, null); - const a2 = Cast(linkDoc.link_anchor_2, Doc, null); - if (Doc.AreProtosEqual(DocCast(anchor.annotationOn, anchor), DocCast(a1?.annotationOn, a1))) return a2; - if (Doc.AreProtosEqual(DocCast(anchor.annotationOn, anchor), DocCast(a2?.annotationOn, a2))) return a1; - if (Doc.AreProtosEqual(anchor, linkDoc)) return linkDoc; + const id = LinkManager.anchorIndex(linkDoc, anchor); + const a1 = DocCast(linkDoc.link_anchor_1); + const a2 = DocCast(linkDoc.link_anchor_2); + return id === '1' ? a2 : id === '2' ? a1 : id === '0' ? linkDoc : undefined; + // if (Doc.AreProtosEqual(DocCast(anchor.annotationOn, anchor), DocCast(a1?.annotationOn, a1))) return a2; + // if (Doc.AreProtosEqual(DocCast(anchor.annotationOn, anchor), DocCast(a2?.annotationOn, a2))) return a1; + // if (Doc.AreProtosEqual(anchor, linkDoc)) return linkDoc; + } + public static anchorIndex(linkDoc: Doc, anchor: Doc) { + const a1 = DocCast(linkDoc.link_anchor_1); + const a2 = DocCast(linkDoc.link_anchor_2); + if (linkDoc.link_matchEmbeddings) { + return [a2, a2.annotationOn].includes(anchor) ? '2' : '1'; + } + if (Doc.AreProtosEqual(DocCast(anchor.annotationOn, anchor), DocCast(a1?.annotationOn, a1))) return '1'; + if (Doc.AreProtosEqual(DocCast(anchor.annotationOn, anchor), DocCast(a2?.annotationOn, a2))) return '2'; + if (Doc.AreProtosEqual(anchor, linkDoc)) return '0'; + + // const a1 = DocCast(linkDoc.link_anchor_1); + // const a2 = DocCast(linkDoc.link_anchor_2); + // if (linkDoc.link_matchEmbeddings) { + // return [a2, a2.annotationOn].includes(anchor) ? '2' : '1'; + // } + // if (Doc.AreProtosEqual(a2, anchor) || Doc.AreProtosEqual(a2.annotationOn as Doc, anchor)) return '2'; + // return Doc.AreProtosEqual(a1, anchor) || Doc.AreProtosEqual(a1.annotationOn as Doc, anchor) ? '1' : '2'; } } diff --git a/src/client/util/PingManager.ts b/src/client/util/PingManager.ts index 4dd2fcd35..7638e2ce0 100644 --- a/src/client/util/PingManager.ts +++ b/src/client/util/PingManager.ts @@ -1,14 +1,23 @@ -import { action, observable, runInAction } from 'mobx'; +import { action, makeObservable, observable, runInAction } from 'mobx'; import { Networking } from '../Network'; import { CurrentUserUtils } from './CurrentUserUtils'; export class PingManager { // create static instance and getter for global use @observable static _instance: PingManager; + @observable IsBeating = true; static get Instance(): PingManager { return PingManager._instance; } - @observable IsBeating = true; + // not used now, but may need to clear interval + private _interval: NodeJS.Timeout | null = null; + INTERVAL_SECONDS = 1; + constructor() { + makeObservable(this); + PingManager._instance = this; + this._interval = setInterval(this.sendPing, this.INTERVAL_SECONDS * 1000); + } + private setIsBeating = action((status: boolean) => { this.IsBeating = status; setTimeout(this.showAlert, 100); @@ -28,12 +37,4 @@ export class PingManager { } } }; - - // not used now, but may need to clear interval - private _interval: NodeJS.Timeout | null = null; - INTERVAL_SECONDS = 1; - constructor() { - PingManager._instance = this; - this._interval = setInterval(this.sendPing, this.INTERVAL_SECONDS * 1000); - } } diff --git a/src/client/util/RTFMarkup.tsx b/src/client/util/RTFMarkup.tsx index c8940194c..f96d8a5df 100644 --- a/src/client/util/RTFMarkup.tsx +++ b/src/client/util/RTFMarkup.tsx @@ -1,4 +1,4 @@ -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { MainViewModal } from '../views/MainViewModal'; @@ -23,10 +23,11 @@ export class RTFMarkup extends React.Component<{}> { constructor(props: {}) { super(props); + makeObservable(this); RTFMarkup.Instance = this; } - @observable _stats: { [key: string]: any } | undefined; + @observable _stats: { [key: string]: any } | undefined = undefined; /** * @returns the main interface of the SharingManager. diff --git a/src/client/util/ReplayMovements.ts b/src/client/util/ReplayMovements.ts index d99630f82..b881f18b4 100644 --- a/src/client/util/ReplayMovements.ts +++ b/src/client/util/ReplayMovements.ts @@ -1,4 +1,4 @@ -import { IReactionDisposer, observable, reaction } from 'mobx'; +import { IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; import { Doc, IdToDoc } from '../../fields/Doc'; import { CollectionDockingView } from '../views/collections/CollectionDockingView'; import { CollectionFreeFormView } from '../views/collections/collectionFreeForm'; @@ -19,6 +19,7 @@ export class ReplayMovements { return ReplayMovements._instance; } constructor() { + makeObservable(this); // init the global instance ReplayMovements._instance = this; diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts index 70c2e3842..dfaacf318 100644 --- a/src/client/util/Scripting.ts +++ b/src/client/util/Scripting.ts @@ -120,6 +120,7 @@ class ScriptingCompilerHost { } return undefined; } + // getDefaultLibFileName(options: ts.CompilerOptions): string { getDefaultLibFileName(options: any): string { return 'node_modules/typescript/lib/lib.d.ts'; // No idea what this means... @@ -159,7 +160,7 @@ class ScriptingCompilerHost { export type Traverser = (node: ts.Node, indentation: string) => boolean | void; export type TraverserParam = Traverser | { onEnter: Traverser; onLeave: Traverser }; export type Transformer = { - transformer: ts.TransformerFactory<ts.SourceFile>; + transformer: ts.TransformerFactory<ts.Node>; getVars?: () => { [name: string]: Field }; }; export interface ScriptOptions { @@ -219,7 +220,7 @@ export function CompileScript(script: string, options: ScriptOptions = {}): Comp const printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed, }); - script = printer.printFile(transformed[0]); + script = printer.printFile(transformed[0].getSourceFile()); } result.dispose(); } @@ -247,7 +248,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) host.writeFile('node_modules/typescript/lib/lib.d.ts', typescriptlib.default); const program = ts.createProgram(['file.ts'], {}, host); const testResult = program.emit(); const outputText = host.readFile('file.js'); @@ -264,6 +265,6 @@ export function CompileScript(script: string, options: ScriptOptions = {}): Comp } ScriptingGlobals.add(CompileScript); -ScriptingGlobals.add(function runScript(self: Doc, script: ScriptField) { - return script?.script.run({ this: self, self: self }).result; +ScriptingGlobals.add(function runScript(doc: Doc, script: ScriptField) { + return script?.script.run({ this: doc }).result; }); diff --git a/src/client/util/ScrollBox.tsx b/src/client/util/ScrollBox.tsx index d4620ae3f..785526ab3 100644 --- a/src/client/util/ScrollBox.tsx +++ b/src/client/util/ScrollBox.tsx @@ -1,4 +1,4 @@ -import React = require('react'); +import * as React from 'react'; export class ScrollBox extends React.Component<React.PropsWithChildren<{}>> { onWheel = (e: React.WheelEvent) => { diff --git a/src/client/util/SearchUtil.ts b/src/client/util/SearchUtil.ts index 560d6b30f..2cc64f415 100644 --- a/src/client/util/SearchUtil.ts +++ b/src/client/util/SearchUtil.ts @@ -1,15 +1,12 @@ -import * as rp from 'request-promise'; -import { DocServer } from '../DocServer'; import { Doc, DocListCast, Field, Opt } from '../../fields/Doc'; import { Id } from '../../fields/FieldSymbols'; -import { Utils } from '../../Utils'; -import { DocumentType } from '../documents/DocumentTypes'; import { StrCast } from '../../fields/Types'; +import { DocumentType } from '../documents/DocumentTypes'; export namespace SearchUtil { export type HighlightingResult = { [id: string]: { [key: string]: string[] } }; - export function SearchCollection(rootDoc: Opt<Doc>, query: string) { + export function SearchCollection(collectionDoc: Opt<Doc>, query: string) { const blockedTypes = [DocumentType.PRESELEMENT, DocumentType.CONFIG, DocumentType.KVP, DocumentType.FONTICON, DocumentType.BUTTON, DocumentType.SCRIPTING]; const blockedKeys = [ 'x', @@ -48,8 +45,8 @@ export namespace SearchUtil { query = query.toLowerCase(); const results = new Map<Doc, string[]>(); - if (rootDoc) { - const docs = DocListCast(rootDoc[Doc.LayoutFieldKey(rootDoc)]); + if (collectionDoc) { + const docs = DocListCast(collectionDoc[Doc.LayoutFieldKey(collectionDoc)]); const docIDs: String[] = []; SearchUtil.foreachRecursiveDoc(docs, (depth: number, doc: Doc) => { const dtype = StrCast(doc.type) as DocumentType; @@ -110,154 +107,4 @@ export namespace SearchUtil { depth++; } } - export interface IdSearchResult { - ids: string[]; - lines: string[][]; - numFound: number; - highlighting: HighlightingResult | undefined; - } - - export interface DocSearchResult { - docs: Doc[]; - lines: string[][]; - numFound: number; - highlighting: HighlightingResult | undefined; - } - - export interface SearchParams { - hl?: string; - 'hl.fl'?: string; - start?: number; - rows?: number; - fq?: string; - sort?: string; - allowEmbeddings?: boolean; - onlyEmbeddings?: boolean; - facet?: string; - 'facet.field'?: string; - } - export function Search(query: string, returnDocs: true, options?: SearchParams): Promise<DocSearchResult>; - export function Search(query: string, returnDocs: false, options?: SearchParams): Promise<IdSearchResult>; - export async function Search(query: string, returnDocs: boolean, options: SearchParams = {}) { - query = query || '*'; //If we just have a filter query, search for * as the query - const rpquery = Utils.prepend('/dashsearch'); - let replacedQuery = query.replace(/type_t:([^ )])/g, (substring, arg) => `{!join from=id to=proto_i}*:* AND ${arg}`); - if (options.onlyEmbeddings) { - const header = query.match(/_[atnb]?:/) ? replacedQuery : 'DEFAULT:' + replacedQuery; - replacedQuery = `{!join from=id to=proto_i}* AND ${header}`; - } - //console.log("Q: " + replacedQuery + " fq: " + options.fq); - const gotten = await rp.get(rpquery, { qs: { ...options, q: replacedQuery } }); - const result: IdSearchResult = gotten.startsWith('<') ? { ids: [], docs: [], numFound: 0, lines: [] } : JSON.parse(gotten); - if (!returnDocs) { - return result; - } - - const { ids, highlighting } = result; - - const txtresult = - query !== '*' && - JSON.parse( - await rp.get(Utils.prepend('/textsearch'), { - qs: { ...options, q: query.replace(/^[ \+\?\*\|]*/, '') }, // a leading '+' leads to a server crash since findInFiles doesn't handle regex failures - }) - ); - - const fileids = txtresult ? txtresult.ids : []; - const newIds: string[] = []; - const newLines: string[][] = []; - // bcz: we stopped storing fileUpload id's, so this won't find anything - // if (fileids) { - // await Promise.all( - // fileids.map(async (tr: string, i: number) => { - // const docQuery = 'fileUpload_t:' + tr.substr(0, 7); //If we just have a filter query, search for * as the query - // const docResult = JSON.parse(await rp.get(Utils.prepend('/dashsearch'), { qs: { ...options, q: docQuery } })); - // newIds.push(...docResult.ids); - // newLines.push(...docResult.ids.map((dr: any) => txtresult.lines[i])); - // }) - // ); - // } - - const theDocs: Doc[] = []; - const theLines: string[][] = []; - const textDocMap = await DocServer.GetRefFields(newIds); - const textDocs = newIds.map((id: string) => textDocMap[id]).map(doc => doc as Doc); - for (let i = 0; i < textDocs.length; i++) { - const testDoc = textDocs[i]; - if (testDoc instanceof Doc && testDoc.type !== DocumentType.KVP && theDocs.findIndex(d => Doc.AreProtosEqual(d, testDoc)) === -1) { - theDocs.push(Doc.GetProto(testDoc)); - theLines.push(newLines[i].map(line => line.replace(query, query.toUpperCase()))); - } - } - - const docMap = await DocServer.GetRefFields(ids); - const docs = ids.map((id: string) => docMap[id]).map(doc => doc as Doc); - for (let i = 0; i < ids.length; i++) { - const testDoc = docs[i]; - if (testDoc instanceof Doc && testDoc.type !== DocumentType.KVP && (options.allowEmbeddings || testDoc.proto === undefined || theDocs.findIndex(d => Doc.AreProtosEqual(d, testDoc)) === -1)) { - theDocs.push(testDoc); - theLines.push([]); - } else { - result.numFound--; - } - } - - return { docs: theDocs, numFound: Math.max(0, result.numFound), highlighting, lines: theLines }; - } - - export async function GetEmbeddingsOfDocument(doc: Doc): Promise<Doc[]>; - export async function GetEmbeddingsOfDocument(doc: Doc, returnDocs: false): Promise<string[]>; - export async function GetEmbeddingsOfDocument(doc: Doc, returnDocs = true): Promise<Doc[] | string[]> { - const proto = Doc.GetProto(doc); - const protoId = proto[Id]; - if (returnDocs) { - return (await Search('', returnDocs, { fq: `proto_i:"${protoId}"`, allowEmbeddings: true })).docs; - } else { - return (await Search('', returnDocs, { fq: `proto_i:"${protoId}"`, allowEmbeddings: true })).ids; - } - // return Search(`{!join from=id to=proto_i}id:${protoId}`, true); - } - - export async function GetViewsOfDocument(doc: Doc): Promise<Doc[]> { - const results = await Search('', true, { fq: `proto_i:"${doc[Id]}"` }); - return results.docs; - } - - export async function GetContextsOfDocument(doc: Doc): Promise<{ contexts: Doc[]; embeddingContexts: Doc[] }> { - const docContexts = (await Search('', true, { fq: `data_l:"${doc[Id]}"` })).docs; - const embeddings = await GetEmbeddingsOfDocument(doc, false); - const embeddingContexts = await Promise.all(embeddings.map(doc => Search('', true, { fq: `data_l:"${doc}"` }))); - const contexts = { contexts: docContexts, embeddingContexts: [] as Doc[] }; - embeddingContexts.forEach(result => contexts.embeddingContexts.push(...result.docs)); - return contexts; - } - - export async function GetContextIdsOfDocument(doc: Doc): Promise<{ contexts: string[]; embeddingContexts: string[] }> { - const docContexts = (await Search('', false, { fq: `data_l:"${doc[Id]}"` })).ids; - const embeddings = await GetEmbeddingsOfDocument(doc, false); - const embeddingContexts = await Promise.all(embeddings.map(doc => Search('', false, { fq: `data_l:"${doc}"` }))); - const contexts = { contexts: docContexts, embeddingContexts: [] as string[] }; - embeddingContexts.forEach(result => contexts.embeddingContexts.push(...result.ids)); - return contexts; - } - - export async function GetAllDocs() { - const query = '*'; - const response = await rp.get(Utils.prepend('/dashsearch'), { - qs: { start: 0, rows: 10000, q: query }, - }); - const result: IdSearchResult = JSON.parse(response); - const { ids, numFound, highlighting } = result; - const docMap = await DocServer.GetRefFields(ids); - const docs: Doc[] = []; - for (const id of ids) { - const field = docMap[id]; - if (field instanceof Doc) { - docs.push(field); - } - } - return docs; - // const docs = ids.map((id: string) => docMap[id]).filter((doc: any) => doc instanceof Doc); - // return docs as Doc[]; - } } diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index d0f66d124..f2a327445 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -1,6 +1,6 @@ -import { action, observable, ObservableMap } from 'mobx'; -import { computedFn } from 'mobx-utils'; +import { action, makeObservable, observable, runInAction } from 'mobx'; import { Doc, Opt } from '../../fields/Doc'; +import { DocViews } from '../../fields/DocSymbols'; import { List } from '../../fields/List'; import { listSpec } from '../../fields/Schema'; import { Cast, DocCast } from '../../fields/Types'; @@ -10,117 +10,70 @@ import { LinkManager } from './LinkManager'; import { ScriptingGlobals } from './ScriptingGlobals'; import { UndoManager } from './UndoManager'; -export namespace SelectionManager { - class Manager { - @observable IsDragging: boolean = false; - SelectedViewsMap: ObservableMap<DocumentView, Doc> = new ObservableMap(); - @observable SelectedViews: DocumentView[] = []; - @observable SelectedSchemaDocument: Doc | undefined; - - @action - SelectSchemaViewDoc(doc: Opt<Doc>) { - manager.SelectedSchemaDocument = doc; - } - @action - SelectView(docView: DocumentView, ctrlPressed: boolean): void { - // if doc is not in SelectedDocuments, add it - if (!manager.SelectedViewsMap.get(docView)) { - if (!ctrlPressed) { - this.DeselectAll(); - } - - manager.SelectedViews.push(docView); - manager.SelectedViewsMap.set(docView, docView.rootDoc); - docView.props.whenChildContentsActiveChanged(true); - } else if (!ctrlPressed && (Array.from(manager.SelectedViewsMap.entries()).length > 1 || manager.SelectedSchemaDocument)) { - Array.from(manager.SelectedViewsMap.keys()).map(dv => dv !== docView && dv.props.whenChildContentsActiveChanged(false)); - manager.SelectedSchemaDocument = undefined; - manager.SelectedViews.length = 0; - manager.SelectedViewsMap.clear(); - manager.SelectedViews.push(docView); - manager.SelectedViewsMap.set(docView, docView.rootDoc); - } - } - @action - DeselectView(docView?: DocumentView): void { - if (docView && manager.SelectedViewsMap.get(docView)) { - manager.SelectedViewsMap.delete(docView); - manager.SelectedViews.splice(manager.SelectedViews.indexOf(docView), 1); - docView.props.whenChildContentsActiveChanged(false); - } - } - @action - DeselectAll(): void { - LinkManager.currentLink = undefined; - LinkManager.currentLinkAnchor = undefined; - manager.SelectedSchemaDocument = undefined; - Array.from(manager.SelectedViewsMap.keys()).forEach(dv => dv.props.whenChildContentsActiveChanged(false)); - manager.SelectedViewsMap.clear(); - manager.SelectedViews.length = 0; - } +export class SelectionManager { + private static _manager: SelectionManager; + private static get Instance() { + return SelectionManager._manager ?? new SelectionManager(); } - const manager = new Manager(); + @observable.shallow SelectedViews: DocumentView[] = []; + @observable IsDragging: boolean = false; + @observable SelectedSchemaDocument: Doc | undefined = undefined; - export function DeselectView(docView?: DocumentView): void { - manager.DeselectView(docView); - } - export function SelectView(docView: DocumentView | undefined, ctrlPressed: boolean): void { - if (!docView) DeselectAll(); - else manager.SelectView(docView, ctrlPressed); - } - export function SelectSchemaViewDoc(document: Opt<Doc>, deselectAllFirst?: boolean): void { - if (deselectAllFirst) manager.DeselectAll(); - manager.SelectSchemaViewDoc(document); + private constructor() { + SelectionManager._manager = this; + makeObservable(this); } - const IsSelectedCache = computedFn(function isSelected(doc: DocumentView) { - // wrapping get() in a computedFn only generates mobx() invalidations when the return value of the function for the specific get parameters has changed - return manager.SelectedViewsMap.get(doc) ? true : false; + @action + public static SelectSchemaViewDoc = (doc: Opt<Doc>, deselectAllFirst?: boolean) => { + if (deselectAllFirst) this.DeselectAll(); + this.Instance.SelectedSchemaDocument = doc; + }; + + public static SelectView = action((docView: DocumentView | undefined, extendSelection: boolean): void => { + if (!docView) this.DeselectAll(); + else if (!docView.IsSelected) { + if (!extendSelection) this.DeselectAll(); + this.Instance.SelectedViews.push(docView); + docView.IsSelected = true; + docView._props.whenChildContentsActiveChanged(true); + } }); - // computed functions, such as used in IsSelected generate errors if they're called outside of a - // reaction context. Specifying the context with 'outsideReaction' allows an efficiency feature - // to avoid unnecessary mobx invalidations when running inside a reaction. - export function IsSelected(doc: DocumentView | undefined, outsideReaction?: boolean): boolean { - return !doc - ? false - : outsideReaction - ? manager.SelectedViewsMap.get(doc) - ? true - : false // get() accesses a hashtable -- setting anything in the hashtable generates a mobx invalidation for every get() - : IsSelectedCache(doc); - } - export function DeselectAll(except?: Doc): void { - let found: DocumentView | undefined = undefined; - if (except) { - for (const view of Array.from(manager.SelectedViewsMap.keys())) { - if (view.props.Document === except) found = view; - } + public static DeselectView = action((docView?: DocumentView): void => { + if (docView && this.Instance.SelectedViews.includes(docView)) { + docView.IsSelected = false; + this.Instance.SelectedViews.splice(this.Instance.SelectedViews.indexOf(docView), 1); + docView._props.whenChildContentsActiveChanged(false); } + }); - manager.DeselectAll(); - if (found) manager.SelectView(found, false); - } + public static DeselectAll = (except?: Doc): void => { + const found = this.Instance.SelectedViews.find(dv => dv.Document === except); + LinkManager.currentLink = undefined; + LinkManager.currentLinkAnchor = undefined; + runInAction(() => (this.Instance.SelectedSchemaDocument = undefined)); + this.Instance.SelectedViews.forEach(dv => { + dv.IsSelected = false; + dv._props.whenChildContentsActiveChanged(false); + }); + runInAction(() => (this.Instance.SelectedViews.length = 0)); + if (found) this.SelectView(found, false); + }; - export function Views(): Array<DocumentView> { - return manager.SelectedViews; - // Array.from(manager.SelectedViewsMap.keys()); //.filter(dv => manager.SelectedViews.get(dv)?._type_collection !== CollectionViewType.Docking); - } - export function SelectedSchemaDoc(): Doc | undefined { - return manager.SelectedSchemaDocument; - } - export function Docs(): Doc[] { - return manager.SelectedViews.map(dv => dv.rootDoc).filter(doc => doc?._type_collection !== CollectionViewType.Docking); - // Array.from(manager.SelectedViewsMap.values()).filter(doc => doc?._type_collection !== CollectionViewType.Docking); - } + public static IsSelected = (doc?: Doc) => Array.from(doc?.[DocViews] ?? []).some(dv => dv?.IsSelected); + public static get Views() { return this.Instance.SelectedViews; } // prettier-ignore + public static get SelectedSchemaDoc() { return this.Instance.SelectedSchemaDocument; } // prettier-ignore + public static get Docs() { return this.Instance.SelectedViews.map(dv => dv.Document).filter(doc => doc?._type_collection !== CollectionViewType.Docking); } // prettier-ignore } + ScriptingGlobals.add(function SelectionManager_selectedDocType(type: string, expertMode: boolean, checkContext?: boolean) { if (Doc.noviceMode && expertMode) return false; if (type === 'tab') { - return SelectionManager.Views().lastElement()?.props.renderDepth === 0; + return SelectionManager.Views.lastElement()?._props.renderDepth === 0; } - let selected = (sel => (checkContext ? DocCast(sel?.embedContainer) : sel))(SelectionManager.SelectedSchemaDoc() ?? SelectionManager.Docs().lastElement()); + let selected = (sel => (checkContext ? DocCast(sel?.embedContainer) : sel))(SelectionManager.SelectedSchemaDoc ?? SelectionManager.Docs.lastElement()); return selected?.type === type || selected?.type_collection === type || !type; }); ScriptingGlobals.add(function deselectAll() { @@ -145,8 +98,8 @@ ScriptingGlobals.add(function redo() { return UndoManager.Redo(); }); ScriptingGlobals.add(function selectedDocs(container: Doc, excludeCollections: boolean, prevValue: any) { - const docs = SelectionManager.Views() - .map(dv => dv.props.Document) - .filter(d => !Doc.AreProtosEqual(d, container) && !d.annotationOn && d.type !== DocumentType.KVP && (!excludeCollections || d.type !== DocumentType.COL || !Cast(d.data, listSpec(Doc), null))); + const docs = SelectionManager.Views.map(dv => dv.Document).filter( + d => !Doc.AreProtosEqual(d, container) && !d.annotationOn && d.type !== DocumentType.KVP && (!excludeCollections || d.type !== DocumentType.COL || !Cast(d.data, listSpec(Doc), null)) + ); return docs.length ? new List(docs) : prevValue; }); diff --git a/src/client/util/SerializationHelper.ts b/src/client/util/SerializationHelper.ts index 76037a7e9..8daa69890 100644 --- a/src/client/util/SerializationHelper.ts +++ b/src/client/util/SerializationHelper.ts @@ -1,6 +1,5 @@ import { PropSchema, serialize, deserialize, custom, setDefaultModelSchema, getDefaultModelSchema } from 'serializr'; import { Field } from '../../fields/Doc'; -import { ClientUtils } from './ClientUtils'; let serializing = 0; export function afterDocDeserialize(cb: (err: any, val: any) => void, err: any, newValue: any) { diff --git a/src/client/util/ServerStats.tsx b/src/client/util/ServerStats.tsx index 08dbaac5d..c8df9182d 100644 --- a/src/client/util/ServerStats.tsx +++ b/src/client/util/ServerStats.tsx @@ -1,4 +1,4 @@ -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { MainViewModal } from '../views/MainViewModal'; @@ -33,10 +33,11 @@ export class ServerStats extends React.Component<{}> { constructor(props: {}) { super(props); + makeObservable(this); ServerStats.Instance = this; } - @observable _stats: { [key: string]: any } | undefined; + @observable _stats: { [key: string]: any } | undefined = undefined; /** * @returns the main interface of the SharingManager. @@ -56,9 +57,7 @@ export class ServerStats extends React.Component<{}> { <br /> <span>Active users:{this._stats?.socketMap.length}</span> - {this._stats?.socketMap.map((user: any) => ( - <p>{user.username}</p> - ))} + {this._stats?.socketMap.map((user: any) => <p>{user.username}</p>)} </div> </div> ); diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index bca649bc3..dbfc48c63 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -1,4 +1,4 @@ -@import '../views/global/globalCssVariables'; +@import '../views/global/globalCssVariables.module'; .settings-interface { //background-color: whitesmoke !important; @@ -187,14 +187,12 @@ display: flex; flex-direction: column; - .close-button { position: absolute; right: 2px; top: 2px; } - .settings-content { padding: 10px; width: 500px; diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index f75322905..5bf9e5b00 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -1,18 +1,20 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Button, ColorPicker, Dropdown, DropdownType, EditableText, Group, NumberDropdown, Size, Toggle, ToggleType, Type } from 'browndash-components'; -import { action, computed, observable, runInAction } from 'mobx'; +import { action, computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { BsGoogle } from 'react-icons/bs'; import { FaFillDrip, FaPalette } from 'react-icons/fa'; -import { Doc } from '../../fields/Doc'; +import { Utils, addStyleSheet, addStyleSheetRule } from '../../Utils'; +import { Doc, Opt } from '../../fields/Doc'; import { DashVersion } from '../../fields/DocSymbols'; import { BoolCast, Cast, NumCast, StrCast } from '../../fields/Types'; -import { addStyleSheet, addStyleSheetRule, Utils } from '../../Utils'; -import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager'; import { DocServer } from '../DocServer'; import { Networking } from '../Network'; +import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager'; +import { GestureOverlay } from '../views/GestureOverlay'; import { MainViewModal } from '../views/MainViewModal'; +import { FontIconBox } from '../views/nodes/FontIconBox/FontIconBox'; import { GroupManager } from './GroupManager'; import './SettingsManager.scss'; import { undoBatch } from './UndoManager'; @@ -41,13 +43,14 @@ export class SettingsManager extends React.Component<{}> { @observable private curr_password = ''; @observable private new_password = ''; @observable private new_confirm = ''; + @observable private _lastPressedSidebarBtn: Opt<Doc> = undefined; // bcz: this is a hack to handle highlighting buttons in the leftpanel menu .. need to find a cleaner approach @observable activeTab = 'Accounts'; - @observable public static propertiesWidth: number = 0; - @observable public static headerBarHeight: number = 0; + @observable public propertiesWidth: number = 0; constructor(props: {}) { super(props); + makeObservable(this); SettingsManager.Instance = this; this.matchSystem(); window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => { @@ -91,6 +94,9 @@ export class SettingsManager extends React.Component<{}> { return StrCast(Doc.UserDoc().userBackgroundColor); } + public get LastPressedBtn() { return this._lastPressedSidebarBtn; } // prettier-ignore + public SetLastPressedBtn = (state?:Doc) => runInAction(() => (this._lastPressedSidebarBtn = state)); // prettier-ignore + @undoBatch selectUserMode = action((mode: string) => (Doc.noviceMode = mode === 'Novice')); @undoBatch changelayout_showTitle = action((e: React.ChangeEvent) => (Doc.UserDoc().layout_showTitle = (e.currentTarget as any).value ? 'title' : undefined)); @undoBatch changeFontFamily = action((font: string) => (Doc.UserDoc().fontFamily = font)); @@ -114,7 +120,6 @@ export class SettingsManager extends React.Component<{}> { }); @undoBatch - @action changeColorScheme = action((scheme: string) => { Doc.UserDoc().userTheme = scheme; switch (scheme) { @@ -228,8 +233,8 @@ export class SettingsManager extends React.Component<{}> { formLabel={'Show Button Labels'} formLabelPlacement={'right'} toggleType={ToggleType.SWITCH} - onClick={e => Doc.SetShowIconLabels(!Doc.GetShowIconLabels())} - toggleStatus={Doc.GetShowIconLabels()} + onClick={e => (FontIconBox.ShowIconLabels = !FontIconBox.ShowIconLabels)} + toggleStatus={FontIconBox.ShowIconLabels} size={Size.XSMALL} color={SettingsManager.userColor} /> @@ -237,8 +242,8 @@ export class SettingsManager extends React.Component<{}> { formLabel={'Recognize Ink Gestures'} formLabelPlacement={'right'} toggleType={ToggleType.SWITCH} - onClick={e => Doc.SetRecognizeGestures(!Doc.GetRecognizeGestures())} - toggleStatus={Doc.GetRecognizeGestures()} + onClick={e => (GestureOverlay.RecognizeGestures = !GestureOverlay.RecognizeGestures)} + toggleStatus={GestureOverlay.RecognizeGestures} size={Size.XSMALL} color={SettingsManager.userColor} /> @@ -448,7 +453,7 @@ export class SettingsManager extends React.Component<{}> { val: freeformScrollMode.Zoom, }, ]} - selectedVal={StrCast(Doc.UserDoc().freeformScrollMode)} + selectedVal={StrCast(Doc.UserDoc().freeformScrollMode, 'zoom')} setSelectedVal={val => this.setFreeformScrollMode(val as string)} dropdownType={DropdownType.SELECT} type={Type.TERT} diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx index 8d59426ec..fddf735e3 100644 --- a/src/client/util/SharingManager.tsx +++ b/src/client/util/SharingManager.tsx @@ -1,7 +1,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Button, IconButton, Size, Type } from 'browndash-components'; import { concat, intersection } from 'lodash'; -import { action, computed, observable, runInAction } from 'mobx'; +import { action, computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import Select from 'react-select'; @@ -67,8 +67,8 @@ export class SharingManager extends React.Component<{}> { public static Instance: SharingManager; @observable private isOpen = false; // whether the SharingManager modal is open or not @observable public users: ValidatedUser[] = []; // the list of users with sharing docs - @observable private targetDoc: Doc | undefined; // the document being shared - @observable private targetDocView: DocumentView | undefined; // the DocumentView of the document being shared + @observable private targetDoc: Doc | undefined = undefined; // the document being shared + @observable private targetDocView: DocumentView | undefined = undefined; // the DocumentView of the document being shared // @observable private copied = false; @observable private dialogueBoxOpacity = 1; // for the modal @observable private overlayOpacity = 0.4; // for the modal @@ -94,7 +94,7 @@ export class SharingManager extends React.Component<{}> { this.populateUsers(); runInAction(() => { this.targetDocView = target; - this.targetDoc = target_doc || target?.props.Document; + this.targetDoc = target_doc || target?.Document; DictationOverlay.Instance.hasActiveModal = true; this.isOpen = this.targetDoc !== undefined; this.permissions = SharingPermissions.Augment; @@ -119,6 +119,7 @@ export class SharingManager extends React.Component<{}> { constructor(props: {}) { super(props); + makeObservable(this); SharingManager.Instance = this; } @@ -133,7 +134,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); @@ -162,7 +163,7 @@ export class SharingManager extends React.Component<{}> { const { user, sharingDoc } = recipient; const target = targetDoc || this.targetDoc!; const acl = `acl-${normalizeEmail(user.email)}`; - const docs = SelectionManager.Views().length < 2 ? [target] : SelectionManager.Views().map(docView => docView.rootDoc); + const docs = SelectionManager.Views.length < 2 ? [target] : SelectionManager.Views.map(docView => docView.Document); docs.map(doc => (this.layoutDocAcls || doc.dockingConfig ? doc : Doc.GetProto(doc))).forEach(doc => { distributeAcls(acl, permission as SharingPermissions, doc, undefined, this.upgradeNested ? true : undefined); if (permission !== SharingPermissions.None) { @@ -180,7 +181,7 @@ export class SharingManager extends React.Component<{}> { const target = targetDoc || this.targetDoc!; const acl = `acl-${normalizeEmail(StrCast(group.title))}`; - const docs = SelectionManager.Views().length < 2 ? [target] : SelectionManager.Views().map(docView => docView.rootDoc); + const docs = SelectionManager.Views.length < 2 ? [target] : SelectionManager.Views.map(docView => docView.Document); docs.map(doc => (this.layoutDocAcls || doc.dockingConfig ? doc : Doc.GetProto(doc))).forEach(doc => { distributeAcls(acl, permission as SharingPermissions, doc, undefined, this.upgradeNested ? true : undefined); @@ -317,7 +318,7 @@ export class SharingManager extends React.Component<{}> { private focusOn = (contents: string) => { const title = this.targetDoc ? StrCast(this.targetDoc.title) : ''; - const docs = SelectionManager.Views().length > 1 ? SelectionManager.Views().map(docView => docView.props.Document) : [this.targetDoc]; + const docs = SelectionManager.Views.length > 1 ? SelectionManager.Views.map(docView => docView.props.Document) : [this.targetDoc]; return ( <span className="focus-span" @@ -444,7 +445,7 @@ export class SharingManager extends React.Component<{}> { const users = this.individualSort === 'ascending' ? this.users.slice().sort(this.sortUsers) : this.individualSort === 'descending' ? this.users.slice().sort(this.sortUsers).reverse() : this.users; const groups = this.groupSort === 'ascending' ? groupList.slice().sort(this.sortGroups) : this.groupSort === 'descending' ? groupList.slice().sort(this.sortGroups).reverse() : groupList; - let docs = SelectionManager.Views().length < 2 ? [this.targetDoc] : SelectionManager.Views().map(docView => docView.rootDoc); + let docs = SelectionManager.Views.length < 2 ? [this.targetDoc] : SelectionManager.Views.map(docView => docView.Document); if (this.myDocAcls) { const newDocs: Doc[] = []; diff --git a/src/client/util/SnappingManager.ts b/src/client/util/SnappingManager.ts index 3cb41ab4d..40c3f76fb 100644 --- a/src/client/util/SnappingManager.ts +++ b/src/client/util/SnappingManager.ts @@ -1,47 +1,47 @@ -import { observable, action, runInAction } from 'mobx'; -import { Doc } from '../../fields/Doc'; +import { observable, action, runInAction, reaction, makeObservable } from 'mobx'; +import { Doc, Opt } from '../../fields/Doc'; -export namespace SnappingManager { - class Manager { - @observable IsDragging: boolean = false; - @observable IsResizing: Doc | undefined; - @observable public horizSnapLines: number[] = []; - @observable public vertSnapLines: number[] = []; - @action public clearSnapLines() { - this.vertSnapLines = []; - this.horizSnapLines = []; - } - @action public addSnapLines(horizLines: number[], vertLines: number[]) { - this.horizSnapLines.push(...horizLines); - this.vertSnapLines.push(...vertLines); - } +export class SnappingManager { + private static _manager: SnappingManager; + private static get Instance() { + return SnappingManager._manager ?? new SnappingManager(); } - const manager = new Manager(); + @observable _shiftKey = false; + @observable _ctrlKey = false; + @observable _isLinkFollowing = false; + @observable _isDragging: boolean = false; + @observable _isResizing: Doc | undefined = undefined; + @observable _canEmbed: boolean = false; + @observable _horizSnapLines: number[] = []; + @observable _vertSnapLines: number[] = []; + @observable _exploreMode = false; - export function clearSnapLines() { - manager.clearSnapLines(); - } - export function addSnapLines(horizLines: number[], vertLines: number[]) { - manager.addSnapLines(horizLines, vertLines); - } - export function horizSnapLines() { - return manager.horizSnapLines; - } - export function vertSnapLines() { - return manager.vertSnapLines; + private constructor() { + SnappingManager._manager = this; + makeObservable(this); } - export function SetIsDragging(dragging: boolean) { - runInAction(() => (manager.IsDragging = dragging)); - } - export function SetIsResizing(doc: Doc | undefined) { - runInAction(() => (manager.IsResizing = doc)); - } - export function GetIsDragging() { - return manager.IsDragging; - } - export function GetIsResizing() { - return manager.IsResizing; - } + @action public static clearSnapLines = () => (this.Instance._vertSnapLines.length = this.Instance._horizSnapLines.length = 0); + @action public static addSnapLines = (horizLines: number[], vertLines: number[]) => { + this.Instance._horizSnapLines.push(...horizLines); + this.Instance._vertSnapLines.push(...vertLines); + }; + + public static get HorizSnapLines() { return this.Instance._horizSnapLines; } // prettier-ignore + public static get VertSnapLines() { return this.Instance._vertSnapLines; } // prettier-ignore + public static get ShiftKey() { return this.Instance._shiftKey; } // prettier-ignore + public static get CtrlKey() { return this.Instance._ctrlKey; } // prettier-ignore + public static get IsLinkFollowing(){ return this.Instance._isLinkFollowing; } // prettier-ignore + public static get IsDragging() { return this.Instance._isDragging; } // prettier-ignore + public static get IsResizing() { return this.Instance._isResizing; } // prettier-ignore + public static get CanEmbed() { return this.Instance._canEmbed; } // prettier-ignore + public static get ExploreMode() { return this.Instance._exploreMode; } // prettier-ignore + public static SetShiftKey = (down: boolean) => runInAction(() => (this.Instance._shiftKey = down)); // prettier-ignore + public static SetCtrlKey = (down: boolean) => runInAction(() => (this.Instance._ctrlKey = down)); // prettier-ignore + public static SetIsLinkFollowing= (follow: boolean) => runInAction(() => (this.Instance._isLinkFollowing = follow)); // prettier-ignore + public static SetIsDragging = (drag: boolean) => runInAction(() => (this.Instance._isDragging = drag)); // prettier-ignore + public static SetIsResizing = (doc: Opt<Doc>) => runInAction(() => (this.Instance._isResizing = doc)); // prettier-ignore + public static SetCanEmbed = (embed:boolean) => runInAction(() => (this.Instance._canEmbed = embed)); // prettier-ignore + public static SetExploreMode = (state:boolean) => runInAction(() => (this.Instance._exploreMode = state)); // prettier-ignore } diff --git a/src/client/util/TrackMovements.ts b/src/client/util/TrackMovements.ts index 0e56ee1bc..f9c2d522f 100644 --- a/src/client/util/TrackMovements.ts +++ b/src/client/util/TrackMovements.ts @@ -1,4 +1,4 @@ -import { IReactionDisposer, observable, observe, reaction } from 'mobx'; +import { IReactionDisposer, makeObservable, observable, observe, reaction } from 'mobx'; import { NumCast } from '../../fields/Types'; import { Doc, DocListCast } from '../../fields/Doc'; import { CollectionDockingView } from '../views/collections/CollectionDockingView'; @@ -40,7 +40,7 @@ export class TrackMovements { constructor() { // init the global instance TrackMovements._instance = this; - + makeObservable(this); // init the instance variables this.currentPresentation = TrackMovements.NULL_PRESENTATION; this.tracking = false; @@ -126,12 +126,12 @@ export class TrackMovements { } // init the dispose funcs on the page - const docList = DocListCast(CollectionDockingView.Instance?.props.Document.data); + const docList = DocListCast(CollectionDockingView.Instance?.Document.data); this.updateRecordingFFViewsFromTabs(docList); // create a reaction to monitor changes in tabs this.tabChangeDisposeFunc = reaction( - () => CollectionDockingView.Instance?.props.Document.data, + () => CollectionDockingView.Instance?.Document.data, change => { // TODO: consider changing between dashboards // console.info('change in tabs', change); diff --git a/src/client/util/Transform.ts b/src/client/util/Transform.ts index e9170ec36..dca37c960 100644 --- a/src/client/util/Transform.ts +++ b/src/client/util/Transform.ts @@ -2,65 +2,105 @@ export class Transform { private _translateX: number = 0; private _translateY: number = 0; private _scale: number = 1; + private _rotate: number = 0; static Identity(): Transform { return new Transform(0, 0, 1); } - get TranslateX(): number { return this._translateX; } - get TranslateY(): number { return this._translateY; } - get Scale(): number { return this._scale; } + get TranslateX(): number { + return this._translateX; + } + get TranslateY(): number { + return this._translateY; + } + get Scale(): number { + return this._scale; + } + get Rotate(): number { + return this._rotate; + } + get RotateDeg(): number { + return (this._rotate * 180) / Math.PI; + } - constructor(x: number, y: number, scale: number) { + /** + * Represents a transformation/scale matrix (can contain a rotation value, but it is not used when transforming points) + * @param x + * @param y + * @param scale + * @param rotation NOTE: this is passed along but is NOT used by any of the transformation functionsStores + */ + constructor(x: number, y: number, scale: number, rotationRadians?: number) { this._translateX = x; this._translateY = y; this._scale = scale; + this._rotate = rotationRadians ?? 0; } + /** + * Rotate in radians + * @param rot + * @returns the modified transformation + */ + rotate = (rot: number): this => { + this._rotate += rot; + return this; + }; + /** + * Rotation in degrees + * @param rot + * @returns the modified transformation + */ + rotateDeg = (rot: number): this => { + this._rotate += (rot * Math.PI) / 180; + return this; + }; + translate = (x: number, y: number): this => { this._translateX += x; this._translateY += y; return this; - } + }; scale = (scale: number): this => { this._scale *= scale; this._translateX *= scale; this._translateY *= scale; return this; - } + }; scaleAbout = (scale: number, x: number, y: number): this => { this._translateX += x * this._scale - x * this._scale * scale; this._translateY += y * this._scale - y * this._scale * scale; this._scale *= scale; return this; - } + }; transform = (transform: Transform): this => { this._translateX = transform._translateX + transform._scale * this._translateX; this._translateY = transform._translateY + transform._scale * this._translateY; this._scale *= transform._scale; return this; - } + }; preTranslate = (x: number, y: number): this => { this._translateX += this._scale * x; this._translateY += this._scale * y; return this; - } + }; preScale = (scale: number): this => { this._scale *= scale; return this; - } + }; preTransform = (transform: Transform): this => { this._translateX += transform._translateX * this._scale; this._translateY += transform._translateY * this._scale; this._scale *= transform._scale; return this; - } + }; translated = (x: number, y: number): Transform => this.copy().translate(x, y); @@ -82,18 +122,17 @@ export class Transform { y *= this._scale; y += this._translateY; return [x, y]; - } + }; transformDirection = (x: number, y: number): [number, number] => [x * this._scale, y * this._scale]; - transformBounds(x: number, y: number, width: number, height: number): { x: number, y: number, width: number, height: number } { + transformBounds(x: number, y: number, width: number, height: number): { x: number; y: number; width: number; height: number } { [x, y] = this.transformPoint(x, y); [width, height] = this.transformDirection(width, height); return { x, y, width, height }; } - inverse = () => new Transform(-this._translateX / this._scale, -this._translateY / this._scale, 1 / this._scale); - - copy = () => new Transform(this._translateX, this._translateY, this._scale); + inverse = () => new Transform(-this._translateX / this._scale, -this._translateY / this._scale, 1 / this._scale, -this._rotate); -}
\ No newline at end of file + copy = () => new Transform(this._translateX, this._translateY, this._scale, this._rotate); +} diff --git a/src/client/util/convertToCSSPTValue.js b/src/client/util/convertToCSSPTValue.js index 179557953..66f8db5a1 100644 --- a/src/client/util/convertToCSSPTValue.js +++ b/src/client/util/convertToCSSPTValue.js @@ -1,18 +1,16 @@ 'use strict'; -Object.defineProperty(exports, "__esModule", { - value: true +Object.defineProperty(exports, '__esModule', { + value: true, }); exports.PT_TO_PX_RATIO = exports.PX_TO_PT_RATIO = undefined; exports.default = convertToCSSPTValue; exports.toClosestFontPtSize = toClosestFontPtSize; -// var _FontSizeCommandMenuButton = require('./ui/FontSizeCommandMenuButton'); - var SIZE_PATTERN = /([\d\.]+)(px|pt)/i; -var PX_TO_PT_RATIO = exports.PX_TO_PT_RATIO = 0.7518796992481203; // 1 / 1.33. -var PT_TO_PX_RATIO = exports.PT_TO_PX_RATIO = 1.33; +var PX_TO_PT_RATIO = (exports.PX_TO_PT_RATIO = 0.7518796992481203); // 1 / 1.33. +var PT_TO_PX_RATIO = (exports.PT_TO_PX_RATIO = 1.33); function convertToCSSPTValue(styleValue) { var matches = styleValue.match(SIZE_PATTERN); @@ -40,4 +38,4 @@ function toClosestFontPtSize(styleValue) { return _FontSizeCommandMenuButton.FONT_PT_SIZES.reduce(function (prev, curr) { return Math.abs(curr - originalPTValue) < Math.abs(prev - originalPTValue) ? curr : prev; }, Number.NEGATIVE_INFINITY); -}
\ No newline at end of file +} diff --git a/src/client/util/jsx-decl.d.ts b/src/client/util/jsx-decl.d.ts deleted file mode 100644 index 532f06178..000000000 --- a/src/client/util/jsx-decl.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare module 'react-jsx-parser'; diff --git a/src/client/util/reportManager/ReportManager.scss b/src/client/util/reportManager/ReportManager.scss index cd6a1d934..d82d7fdeb 100644 --- a/src/client/util/reportManager/ReportManager.scss +++ b/src/client/util/reportManager/ReportManager.scss @@ -1,4 +1,4 @@ -@import '../../views/global/globalCssVariables'; +@import '../../views/global/globalCssVariables.module'; // header @@ -360,5 +360,8 @@ padding: 4px 10px; font-size: 10px; border-radius: 32px; - transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; + transition: + background-color 0.2s ease, + color 0.2s ease, + border-color 0.2s ease; } diff --git a/src/client/util/reportManager/ReportManager.tsx b/src/client/util/reportManager/ReportManager.tsx index b25d51b41..0c49aeed4 100644 --- a/src/client/util/reportManager/ReportManager.tsx +++ b/src/client/util/reportManager/ReportManager.tsx @@ -1,13 +1,11 @@ import * as React from 'react'; -import v4 = require('uuid/v4'); +import * as uuid from 'uuid'; import '.././SettingsManager.scss'; import './ReportManager.scss'; -import Dropzone from 'react-dropzone'; import ReactLoading from 'react-loading'; -import { action, observable } from 'mobx'; +import { action, makeObservable, observable } from 'mobx'; import { BsX, BsArrowsAngleExpand, BsArrowsAngleContract } from 'react-icons/bs'; import { CgClose } from 'react-icons/cg'; -import { AiOutlineUpload } from 'react-icons/ai'; import { HiOutlineArrowLeft } from 'react-icons/hi'; import { Issue } from './reportManagerSchema'; import { observer } from 'mobx-react'; @@ -105,6 +103,7 @@ export class ReportManager extends React.Component<{}> { constructor(props: {}) { super(props); + makeObservable(this); ReportManager.Instance = this; // initializing Github connection @@ -156,7 +155,7 @@ export class ReportManager extends React.Component<{}> { * @param files uploaded files */ private onDrop = (files: File[]) => { - this.setFormData({ ...this.formData, mediaFiles: [...this.formData.mediaFiles, ...files.map(file => ({ _id: v4(), file }))] }); + this.setFormData({ ...this.formData, mediaFiles: [...this.formData.mediaFiles, ...files.map(file => ({ _id: uuid.v4(), file }))] }); }; /** @@ -338,7 +337,7 @@ export class ReportManager extends React.Component<{}> { multiple onChange={e => { if (!e.target.files) return; - this.setFormData({ ...this.formData, mediaFiles: [...this.formData.mediaFiles, ...Array.from(e.target.files).map(file => ({ _id: v4(), file }))] }); + this.setFormData({ ...this.formData, mediaFiles: [...this.formData.mediaFiles, ...Array.from(e.target.files).map(file => ({ _id: uuid.v4(), file }))] }); }} /> {this.formData.mediaFiles.length > 0 && <ul className="file-list">{this.formData.mediaFiles.map(file => this.getMediaPreview(file))}</ul>} diff --git a/src/client/util/reportManager/ReportManagerComponents.tsx b/src/client/util/reportManager/ReportManagerComponents.tsx index e870c073d..1e226bf6d 100644 --- a/src/client/util/reportManager/ReportManagerComponents.tsx +++ b/src/client/util/reportManager/ReportManagerComponents.tsx @@ -289,7 +289,7 @@ export const IssueView = ({ issue }: IssueViewProps) => { </div> </div> )} - <ReactMarkdown children={issueBody} className="issue-content" linkTarget={'_blank'} remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]} /> + <ReactMarkdown children={issueBody} className="issue-content" remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]} /> </div> ); }; diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss index b205a0f1e..2ebf673fe 100644 --- a/src/client/views/AntimodeMenu.scss +++ b/src/client/views/AntimodeMenu.scss @@ -1,5 +1,4 @@ -@import "./global/globalCssVariables"; - +@import './global/globalCssVariables.module'; .antimodeMenu-cont { position: absolute; @@ -15,8 +14,13 @@ align-items: center; gap: 3px; + &.expanded { + // Conditionally unset the height when the class is applied + height: auto; + } + &.with-rows { - flex-direction: column + flex-direction: column; } .antimodeMenu-row { @@ -26,8 +30,8 @@ .antimodeMenu-dragger { height: 100%; - transition: width .2s; - background-image: url("https://logodix.com/logo/1020374.png"); + transition: width 0.2s; + background-image: url('https://logodix.com/logo/1020374.png'); background-size: 90% 100%; background-repeat: no-repeat; background-position: left center; @@ -63,4 +67,4 @@ background-color: #121212; } } -}
\ No newline at end of file +} diff --git a/src/client/views/AntimodeMenu.tsx b/src/client/views/AntimodeMenu.tsx index 16e76694d..db7e64deb 100644 --- a/src/client/views/AntimodeMenu.tsx +++ b/src/client/views/AntimodeMenu.tsx @@ -1,21 +1,25 @@ -import React = require('react'); -import { observable, action, runInAction } from 'mobx'; -import './AntimodeMenu.scss'; -import { StrCast } from '../../fields/Types'; -import { Doc } from '../../fields/Doc'; +import { action, makeObservable, observable, runInAction } from 'mobx'; +import * as React from 'react'; import { SettingsManager } from '../util/SettingsManager'; +import './AntimodeMenu.scss'; +import { ObservableReactComponent } from './ObservableReactComponent'; export interface AntimodeMenuProps {} /** * This is an abstract class that serves as the base for a PDF-style or Marquee-style * menu. To use this class, look at PDFMenu.tsx or MarqueeOptionsMenu.tsx for an example. */ -export abstract class AntimodeMenu<T extends AntimodeMenuProps> extends React.Component<T, {}> { +export abstract class AntimodeMenu<T extends AntimodeMenuProps> extends ObservableReactComponent<T> { protected _offsetY: number = 0; protected _offsetX: number = 0; protected _mainCont: React.RefObject<HTMLDivElement> = React.createRef(); protected _dragging: boolean = false; + constructor(props: any) { + super(props); + makeObservable(this); + } + @observable protected _top: number = -300; @observable protected _left: number = -300; @observable protected _opacity: number = 0; @@ -139,10 +143,12 @@ export abstract class AntimodeMenu<T extends AntimodeMenuProps> extends React.Co return <div className="antimodeMenu-dragger" key="dragger" onPointerDown={this.dragStart} style={{ width: '20px' }} />; }; - protected getElement(buttons: JSX.Element) { + protected getElement(buttons: JSX.Element, expanded: boolean = false) { + const containerClass = expanded ? 'antimodeMenu-cont expanded' : 'antimodeMenu-cont'; + return ( <div - className="antimodeMenu-cont" + className={containerClass} onPointerLeave={this.pointerLeave} onPointerEnter={this.pointerEntered} ref={this._mainCont} diff --git a/src/client/views/AudioWaveform.tsx b/src/client/views/AudioWaveform.tsx deleted file mode 100644 index c779ce8c4..000000000 --- a/src/client/views/AudioWaveform.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import React = require('react'); -import axios from 'axios'; -import { action, computed, IReactionDisposer, reaction } from 'mobx'; -import { observer } from 'mobx-react'; -import Waveform from 'react-audio-waveform'; -import { Doc, NumListCast } from '../../fields/Doc'; -import { List } from '../../fields/List'; -import { listSpec } from '../../fields/Schema'; -import { Cast } from '../../fields/Types'; -import { numberRange } from '../../Utils'; -import './AudioWaveform.scss'; -import { Colors } from './global/globalEnums'; - -/** - * AudioWaveform - * - * Used in CollectionStackedTimeline to render a canvas with a visual of an audio waveform for AudioBox and VideoBox documents. - * Uses react-audio-waveform package. - * Bins the audio data into audioBuckets which are passed to package to render the lines. - * Calculates new buckets each time a new zoom factor or new set of trim bounds is created and stores it in a field on the layout doc with a title indicating the bounds and zoom for that list (see audioBucketField) - */ - -export interface AudioWaveformProps { - duration: number; // length of media clip - rawDuration: number; // length of underlying media data - mediaPath: string; - layoutDoc: Doc; - clipStart: number; - clipEnd: number; - zoomFactor: number; - PanelHeight: number; - PanelWidth: number; - fieldKey: string; -} - -@observer -export class AudioWaveform extends React.Component<AudioWaveformProps> { - public static NUMBER_OF_BUCKETS = 100; // number of buckets data is divided into to draw waveform lines - - _disposer: IReactionDisposer | undefined; - - @computed get waveHeight() { - return Math.max(50, this.props.PanelHeight); - } - - @computed get clipStart() { - return this.props.clipStart; - } - @computed get clipEnd() { - return this.props.clipEnd; - } - @computed get zoomFactor() { - return this.props.zoomFactor; - } - - @computed get audioBuckets() { - return NumListCast(this.props.layoutDoc[this.audioBucketField(this.clipStart, this.clipEnd, this.zoomFactor)]); - } - audioBucketField = (start: number, end: number, zoomFactor: number) => this.props.fieldKey + '_audioBuckets/' + '/' + start.toFixed(2).replace('.', '_') + '/' + end.toFixed(2).replace('.', '_') + '/' + zoomFactor * 10; - - componentWillUnmount() { - this._disposer?.(); - } - - componentDidMount() { - this._disposer = reaction( - () => ({ clipStart: this.clipStart, clipEnd: this.clipEnd, fieldKey: this.audioBucketField(this.clipStart, this.clipEnd, this.zoomFactor), zoomFactor: this.props.zoomFactor }), - ({ clipStart, clipEnd, fieldKey, zoomFactor }) => { - if (!this.props.layoutDoc[fieldKey]) { - // setting these values here serves as a "lock" to prevent multiple attempts to create the waveform at nerly the same time. - const waveform = Cast(this.props.layoutDoc[this.audioBucketField(0, this.props.rawDuration, 1)], listSpec('number')); - this.props.layoutDoc[fieldKey] = waveform && new List<number>(waveform.slice((clipStart / this.props.rawDuration) * waveform.length, (clipEnd / this.props.rawDuration) * waveform.length)); - setTimeout(() => this.createWaveformBuckets(fieldKey, clipStart, clipEnd, zoomFactor)); - } - }, - { fireImmediately: true } - ); - } - - // decodes the audio file into peaks for generating the waveform - createWaveformBuckets = async (fieldKey: string, clipStart: number, clipEnd: number, zoomFactor: number) => { - axios({ url: this.props.mediaPath, responseType: 'arraybuffer' }).then(response => { - const context = new window.AudioContext(); - context.decodeAudioData( - response.data, - action(buffer => { - const rawDecodedAudioData = buffer.getChannelData(0); - const startInd = clipStart / this.props.rawDuration; - const endInd = clipEnd / this.props.rawDuration; - const decodedAudioData = rawDecodedAudioData.slice(Math.floor(startInd * rawDecodedAudioData.length), Math.floor(endInd * rawDecodedAudioData.length)); - const numBuckets = Math.floor(AudioWaveform.NUMBER_OF_BUCKETS * zoomFactor); - - const bucketDataSize = Math.floor(decodedAudioData.length / numBuckets); - const brange = Array.from(Array(bucketDataSize)); - const bucketList = numberRange(numBuckets).map((i: number) => brange.reduce((p, x, j) => Math.abs(Math.max(p, decodedAudioData[i * bucketDataSize + j])), 0) / 2); - this.props.layoutDoc[fieldKey] = new List<number>(bucketList); - }) - ); - }); - }; - - render() { - return ( - <div className="audioWaveform"> - <Waveform color={Colors.MEDIUM_BLUE_ALT} height={this.waveHeight} barWidth={200 / this.audioBuckets.length} pos={this.props.duration} duration={this.props.duration} peaks={Array.from(this.audioBuckets)} progressColor={Colors.MEDIUM_BLUE_ALT} /> - </div> - ); - } -} diff --git a/src/client/views/ComponentDecorations.tsx b/src/client/views/ComponentDecorations.tsx index 66d1bd63d..ca4e5f2bc 100644 --- a/src/client/views/ComponentDecorations.tsx +++ b/src/client/views/ComponentDecorations.tsx @@ -1,14 +1,14 @@ -import { observer } from "mobx-react"; -import { SelectionManager } from "../util/SelectionManager"; +import { observer } from 'mobx-react'; +import { SelectionManager } from '../util/SelectionManager'; import './ComponentDecorations.scss'; -import React = require("react"); +import * as React from 'react'; @observer -export class ComponentDecorations extends React.Component<{ boundsTop: number, boundsLeft: number }, { value: string }> { +export class ComponentDecorations extends React.Component<{ boundsTop: number; boundsLeft: number }, { value: string }> { static Instance: ComponentDecorations; render() { - const seldoc = SelectionManager.Views().lastElement(); - return seldoc?.ComponentView?.componentUI?.(this.props.boundsLeft, this.props.boundsTop) ?? (null); + const seldoc = SelectionManager.Views.lastElement(); + return seldoc?.ComponentView?.componentUI?.(this.props.boundsLeft, this.props.boundsTop) ?? null; } -}
\ No newline at end of file +} diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss index 588eff1d1..232362c5c 100644 --- a/src/client/views/ContextMenu.scss +++ b/src/client/views/ContextMenu.scss @@ -1,4 +1,4 @@ -@import 'global/globalCssVariables'; +@import 'global/globalCssVariables.module.scss'; .contextMenu-cont { position: absolute; diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx index adefc7e9c..8dcdd80e5 100644 --- a/src/client/views/ContextMenu.tsx +++ b/src/client/views/ContextMenu.tsx @@ -1,40 +1,43 @@ -import React = require('react'); import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, IReactionDisposer, observable } from 'mobx'; +import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; -import './ContextMenu.scss'; -import { ContextMenuItem, ContextMenuProps, OriginalMenuProps } from './ContextMenuItem'; -import { Utils } from '../../Utils'; +import * as React from 'react'; import { StrCast } from '../../fields/Types'; -import { Doc } from '../../fields/Doc'; import { SettingsManager } from '../util/SettingsManager'; +import './ContextMenu.scss'; +import { ContextMenuItem, ContextMenuProps, OriginalMenuProps } from './ContextMenuItem'; +import { ObservableReactComponent } from './ObservableReactComponent'; @observer -export class ContextMenu extends React.Component { +export class ContextMenu extends ObservableReactComponent<{}> { static Instance: ContextMenu; - @observable private _items: Array<ContextMenuProps> = []; - @observable private _pageX: number = 0; - @observable private _pageY: number = 0; - @observable private _display: boolean = false; - @observable private _searchString: string = ''; - @observable private _showSearch: boolean = false; + private _ignoreUp = false; + private _reactionDisposer?: IReactionDisposer; + private _defaultPrefix: string = ''; + private _defaultItem: ((name: string) => void) | undefined; + private _onDisplay?: () => void = undefined; + + @observable.shallow _items: ContextMenuProps[] = []; + @observable _pageX: number = 0; + @observable _pageY: number = 0; + @observable _display: boolean = false; + @observable _searchString: string = ''; + @observable _showSearch: boolean = false; // afaik displaymenu can be called before all the items are added to the menu, so can't determine in displayMenu what the height of the menu will be - @observable private _yRelativeToTop: boolean = true; - @observable selectedIndex = -1; + @observable _yRelativeToTop: boolean = true; + @observable _selectedIndex = -1; - @observable private _width: number = 0; - @observable private _height: number = 0; + @observable _width: number = 0; + @observable _height: number = 0; - @observable private _mouseX: number = -1; - @observable private _mouseY: number = -1; - @observable private _shouldDisplay: boolean = false; - private _ignoreUp = false; - private _reactionDisposer?: IReactionDisposer; + @observable _mouseX: number = -1; + @observable _mouseY: number = -1; + @observable _shouldDisplay: boolean = false; - constructor(props: Readonly<{}>) { + constructor(props: any) { super(props); - + makeObservable(this); ContextMenu.Instance = this; } @@ -74,36 +77,27 @@ export class ContextMenu extends React.Component { this._reactionDisposer?.(); } - @action - componentDidMount = () => { + componentDidMount() { document.addEventListener('pointerdown', this.onPointerDown, true); document.addEventListener('pointerup', this.onPointerUp); - }; + } @action clearItems() { - this._items = []; + this._items.length = 0; this._defaultPrefix = ''; this._defaultItem = undefined; } - _defaultPrefix: string = ''; - _defaultItem: ((name: string) => void) | undefined; - - findByDescription = (target: string, toLowerCase = false) => { - return this._items.find(menuItem => { - let reference = menuItem.description; - toLowerCase && (reference = reference.toLowerCase()); - return reference === target; - }); - }; + findByDescription = (target: string, toLowerCase = false) => + this._items.find(menuItem => + (toLowerCase ? menuItem.description.toLowerCase() : menuItem.description) === target); // prettier-ignore @action addItem(item: ContextMenuProps) { - if (this._items.indexOf(item) === -1) { - this._items.push(item); - } + !this._items.includes(item) && this._items.push(item); } + @action moveAfter(item: ContextMenuProps, after?: ContextMenuProps) { const curInd = this._items.findIndex(i => i.description === item.description); @@ -111,6 +105,7 @@ export class ContextMenu extends React.Component { const afterInd = after && this.findByDescription(after.description) ? this._items.findIndex(i => i.description === after.description) : this._items.length; this._items.splice(afterInd, 0, item); } + @action setDefaultItem(prefix: string, item: (name: string) => void) { this._defaultPrefix = prefix; @@ -126,7 +121,6 @@ export class ContextMenu extends React.Component { return this._pageY + this._height > window.innerHeight - ContextMenu.buffer ? window.innerHeight - ContextMenu.buffer - this._height : Math.max(0, this._pageY); } - _onDisplay?: () => void = undefined; @action displayMenu = (x: number, y: number, initSearch = '', showSearch = false, onDisplay?: () => void) => { //maxX and maxY will change if the UI/font size changes, but will work for any amount @@ -201,7 +195,7 @@ export class ContextMenu extends React.Component { <div className="contextMenu-description">{value.join(' -> ')}</div> </div> ) : ( - <ContextMenuItem {...value} key={index + value.description} closeMenu={this.closeMenu} selected={index === this.selectedIndex} /> + <ContextMenuItem {...value} key={index + value.description} closeMenu={this.closeMenu} selected={index === this._selectedIndex} /> ) ); } @@ -211,7 +205,7 @@ export class ContextMenu extends React.Component { } render() { - return !this._display ? null : ( + return ( <div className="contextMenu-cont" ref={action((r: any) => { @@ -221,6 +215,7 @@ export class ContextMenu extends React.Component { } })} style={{ + display: this._display ? '' : 'none', left: this.pageX, ...(this._yRelativeToTop ? { top: this.pageY } : { bottom: this.pageY }), background: SettingsManager.userBackgroundColor, @@ -242,17 +237,17 @@ export class ContextMenu extends React.Component { @action onKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'ArrowDown') { - if (this.selectedIndex < this.flatItems.length - 1) { - this.selectedIndex++; + if (this._selectedIndex < this.flatItems.length - 1) { + this._selectedIndex++; } e.preventDefault(); } else if (e.key === 'ArrowUp') { - if (this.selectedIndex > 0) { - this.selectedIndex--; + if (this._selectedIndex > 0) { + this._selectedIndex--; } e.preventDefault(); } else if (e.key === 'Enter' || e.key === 'Tab') { - const item = this.flatItems[this.selectedIndex]; + const item = this.flatItems[this._selectedIndex]; if (item) { item.event({ x: this.pageX, y: this.pageY }); } else if (this._searchString.startsWith(this._defaultPrefix)) { @@ -268,12 +263,12 @@ export class ContextMenu extends React.Component { onChange = (e: React.ChangeEvent<HTMLInputElement>) => { this._searchString = e.target.value; if (!this._searchString) { - this.selectedIndex = -1; + this._selectedIndex = -1; } else { - if (this.selectedIndex === -1) { - this.selectedIndex = 0; + if (this._selectedIndex === -1) { + this._selectedIndex = 0; } else { - this.selectedIndex = Math.min(this.flatItems.length - 1, this.selectedIndex); + this._selectedIndex = Math.min(this.flatItems.length - 1, this._selectedIndex); } } }; diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx index c2cbca3e1..3c9d821a9 100644 --- a/src/client/views/ContextMenuItem.tsx +++ b/src/client/views/ContextMenuItem.tsx @@ -1,12 +1,11 @@ -import React = require('react'); -import { observable, action, runInAction } from 'mobx'; +import * as React from 'react'; +import { observable, action, runInAction, makeObservable } from 'mobx'; import { observer } from 'mobx-react'; import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { UndoManager } from '../util/UndoManager'; -import { Doc } from '../../fields/Doc'; -import { StrCast } from '../../fields/Types'; import { SettingsManager } from '../util/SettingsManager'; +import { ObservableReactComponent } from './ObservableReactComponent'; export interface OriginalMenuProps { description: string; @@ -28,13 +27,17 @@ export interface SubmenuProps { export type ContextMenuProps = OriginalMenuProps | SubmenuProps; @observer -export class ContextMenuItem extends React.Component<ContextMenuProps & { selected?: boolean }> { +export class ContextMenuItem extends ObservableReactComponent<ContextMenuProps & { selected?: boolean }> { @observable private _items: Array<ContextMenuProps> = []; @observable private overItem = false; - @action + constructor(props: any) { + super(props); + makeObservable(this); + } + componentDidMount() { - this._items.length = 0; + runInAction(() => (this._items.length = 0)); if ((this.props as SubmenuProps)?.subitems) { (this.props as SubmenuProps).subitems?.forEach(i => runInAction(() => this._items.push(i))); } diff --git a/src/client/views/DashboardView.scss b/src/client/views/DashboardView.scss index 6be2133ef..90f64b393 100644 --- a/src/client/views/DashboardView.scss +++ b/src/client/views/DashboardView.scss @@ -1,4 +1,4 @@ -@import './global/globalCssVariables'; +@import './global/globalCssVariables.module'; .dashboard-view { padding: 50px; @@ -7,18 +7,18 @@ width: 100%; position: absolute; height: 100%; - width:100%; + width: 100%; padding-right: 0px; overflow: auto; - .left-menu { - display: flex; - justify-content: flex-start; - flex-direction: column; - width: 250px; - min-width: 250px; - gap: 5px; - } + .left-menu { + display: flex; + justify-content: flex-start; + flex-direction: column; + width: 250px; + min-width: 250px; + gap: 5px; + } .all-dashboards { display: flex; @@ -75,20 +75,20 @@ left: 0; top: 0; z-index: -1; - } + } } .dashboard-container { - border-radius: 10px; - position: relative; - cursor: pointer; - width: 250px; - height: 200px; - outline: solid 2px $light-gray; - display: flex; - flex-direction: column; - margin: 0 0px 30px 30px; - overflow: hidden; + border-radius: 10px; + position: relative; + cursor: pointer; + width: 250px; + height: 200px; + outline: solid 2px $light-gray; + display: flex; + flex-direction: column; + margin: 0 0px 30px 30px; + overflow: hidden; &:hover { outline: solid 2px $light-blue; @@ -122,18 +122,18 @@ background: 'lightgreen'; } - .more { - z-index: 100; - } + .more { + z-index: 100; + } - .background { + .background { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: -1; - } + } } .new-dashboard { diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx index 014a6358f..472d419fc 100644 --- a/src/client/views/DashboardView.tsx +++ b/src/client/views/DashboardView.tsx @@ -1,17 +1,18 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Button, ColorPicker, EditableText, Size, Type } from 'browndash-components'; -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { FaPlus } from 'react-icons/fa'; import { Doc, DocListCast } from '../../fields/Doc'; -import { AclPrivate, DocAcl } from '../../fields/DocSymbols'; +import { AclPrivate, DocAcl, DocData } from '../../fields/DocSymbols'; import { Id } from '../../fields/FieldSymbols'; import { List } from '../../fields/List'; import { PrefetchProxy } from '../../fields/Proxy'; import { listSpec } from '../../fields/Schema'; import { ScriptField } from '../../fields/ScriptField'; import { Cast, ImageCast, StrCast } from '../../fields/Types'; +import { normalizeEmail } from '../../fields/util'; import { DocServer } from '../DocServer'; import { Docs, DocumentOptions, DocUtils } from '../documents/Documents'; import { HistoryUtil } from '../util/History'; @@ -26,6 +27,7 @@ import './DashboardView.scss'; import { Colors } from './global/globalEnums'; import { MainViewModal } from './MainViewModal'; import { ButtonType } from './nodes/FontIconBox/FontIconBox'; +import { ObservableReactComponent } from './ObservableReactComponent'; enum DashboardGroup { MyDashboards, @@ -35,8 +37,12 @@ enum DashboardGroup { // DashboardView is the view with the dashboard previews, rendered when the app first loads @observer -export class DashboardView extends React.Component { +export class DashboardView extends ObservableReactComponent<{}> { public static _urlState: HistoryUtil.DocUrl; + constructor(props: any) { + super(props); + makeObservable(this); + } @observable private openModal = false; @observable private selectedDashboardGroup = DashboardGroup.MyDashboards; @@ -58,7 +64,7 @@ export class DashboardView extends React.Component { getDashboards = (whichGroup: DashboardGroup) => { if (whichGroup === DashboardGroup.MyDashboards) { - return DocListCast(Doc.MyDashboards.data).filter(dashboard => Doc.GetProto(dashboard).author === Doc.CurrentUserEmail); + return DocListCast(Doc.MyDashboards.data).filter(dashboard => dashboard[DocData].author === Doc.CurrentUserEmail); } return DocListCast(Doc.MySharedDocs.data_dashboards).filter(doc => doc.dockingConfig); }; @@ -149,7 +155,7 @@ export class DashboardView extends React.Component { : this.getDashboards(this.selectedDashboardGroup).map(dashboard => { const href = ImageCast(dashboard.thumb)?.url?.href; const shared = Object.keys(dashboard[DocAcl]) - .filter(key => key !== `acl-${Doc.CurrentUserEmailNormalized}` && !['acl-Me', 'acl-Guest'].includes(key)) + .filter(key => key !== `acl-${normalizeEmail(Doc.CurrentUserEmail)}` && !['acl-Me', 'acl-Guest'].includes(key)) .some(key => dashboard[DocAcl][key] !== AclPrivate); return ( <div @@ -165,7 +171,7 @@ export class DashboardView extends React.Component { } /> <div className="info"> - <EditableText type={Type.PRIM} color={color} val={StrCast(dashboard.title)} setVal={val => (Doc.GetProto(dashboard).title = val)} /> + <EditableText type={Type.PRIM} color={color} val={StrCast(dashboard.title)} setVal={val => (dashboard[DocData].title = val)} /> {this.selectedDashboardGroup === DashboardGroup.SharedDashboards && this.isUnviewedSharedDashboard(dashboard) ? <div>unviewed</div> : <div></div>} <div className="more" @@ -347,7 +353,7 @@ export class DashboardView extends React.Component { }, ], }; - if (dashboard.dockingConfig && dashboard.dockingConfig !== Doc.GetProto(dashboard).dockingConfig) dashboard.dockingConfig = JSON.stringify(reset); + if (dashboard.dockingConfig && dashboard.dockingConfig !== dashboard[DocData].dockingConfig) dashboard.dockingConfig = JSON.stringify(reset); else Doc.SetInPlace(dashboard, 'dockingConfig', JSON.stringify(reset), true); return reset; }; @@ -369,20 +375,51 @@ export class DashboardView extends React.Component { const freeformDoc = Doc.GuestTarget || Docs.Create.FreeformDocument([], freeformOptions); const dashboardDoc = Docs.Create.StandardCollectionDockingDocument([{ doc: freeformDoc, initialWidth: 600 }], { title: title }, id, 'row'); - Doc.AddDocToList(Doc.MyHeaderBar, 'data', freeformDoc); + Doc.AddDocToList(Doc.MyHeaderBar, 'data', freeformDoc, undefined, undefined, true); dashboardDoc['pane-count'] = 1; freeformDoc.embedContainer = dashboardDoc; + dashboardDoc.myOverlayDocs = new List<Doc>(); + dashboardDoc.myPublishedDocs = new List<Doc>(); Doc.AddDocToList(Doc.MyDashboards, 'data', dashboardDoc); DashboardView.SetupDashboardTrails(dashboardDoc); - + DashboardView.SetupDashboardCalendars(dashboardDoc); // open this new dashboard Doc.ActiveDashboard = dashboardDoc; Doc.ActivePage = 'dashboard'; Doc.ActivePresentation = undefined; }; + public static SetupDashboardCalendars(dashboardDoc: Doc) { + // this section is creating the button document itself === myTrails = new Button + + // create a a list of calendars (as a CalendarCollectionDocument) and store it on the new dashboard + const reqdOpts: DocumentOptions = { + title: 'My Calendars', + _layout_showTitle: 'title', + _height: 100, + treeView_HideTitle: true, + _layout_fitWidth: true, + _gridGap: 5, + _forceActive: true, + childDragAction: 'embed', + treeView_TruncateTitleWidth: 150, + ignoreClick: true, + contextMenuIcons: new List<string>(['plus']), + contextMenuLabels: new List<string>(['Create New Calendar']), + _lockedPosition: true, + layout_boxShadow: '0 0', + childDontRegisterViews: true, + dropAction: 'same', + isSystem: true, + layout_explainer: 'All of the calendars that you have created will appear here.', + }; + const myCalendars = DocUtils.AssignScripts(Docs.Create.CalendarCollectionDocument([], reqdOpts)); + // { treeView_ChildDoubleClick: 'openPresentation(documentView.rootDoc)' } + dashboardDoc.myCalendars = new PrefetchProxy(myCalendars); + } + public static SetupDashboardTrails(dashboardDoc: Doc) { // this section is creating the button document itself === myTrails = new Button const reqdBtnOpts: DocumentOptions = { @@ -426,7 +463,7 @@ export class DashboardView extends React.Component { isSystem: true, layout_explainer: 'All of the trails that you have created will appear here.', }; - const myTrails = DocUtils.AssignScripts(Docs.Create.TreeDocument([], reqdOpts), { treeView_ChildDoubleClick: 'openPresentation(documentView.rootDoc)' }); + const myTrails = DocUtils.AssignScripts(Docs.Create.TreeDocument([], reqdOpts), { treeView_ChildDoubleClick: 'openPresentation(documentView.Document)' }); dashboardDoc.myTrails = new PrefetchProxy(myTrails); const contextMenuScripts = [reqdBtnScript.onClick]; diff --git a/src/client/views/DictationOverlay.tsx b/src/client/views/DictationOverlay.tsx index 0bdcdc303..e098bc361 100644 --- a/src/client/views/DictationOverlay.tsx +++ b/src/client/views/DictationOverlay.tsx @@ -1,4 +1,4 @@ -import { computed, observable, runInAction } from 'mobx'; +import { computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { DictationManager } from '../util/DictationManager'; @@ -19,6 +19,7 @@ export class DictationOverlay extends React.Component { constructor(props: any) { super(props); + makeObservable(this); DictationOverlay.Instance = this; } diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx index 483b92957..b21b13e4c 100644 --- a/src/client/views/DocComponent.tsx +++ b/src/client/views/DocComponent.tsx @@ -1,161 +1,205 @@ -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; +import * as React from 'react'; +import { returnFalse } from '../../Utils'; import { DateField } from '../../fields/DateField'; -import { Doc, DocListCast, HierarchyMapping, Opt, ReverseHierarchyMap } from '../../fields/Doc'; -import { AclAdmin, AclAugment, AclEdit, AclPrivate, AclReadonly, DocAcl, DocData } from '../../fields/DocSymbols'; +import { Doc, DocListCast, Field, Opt } from '../../fields/Doc'; +import { AclAdmin, AclAugment, AclEdit, AclPrivate, AclReadonly, DocData } from '../../fields/DocSymbols'; import { List } from '../../fields/List'; -import { Cast, DocCast, StrCast } from '../../fields/Types'; -import { distributeAcls, GetEffectiveAcl, inheritParentAcls, SharingPermissions } from '../../fields/util'; -import { returnFalse } from '../../Utils'; -import { DocUtils } from '../documents/Documents'; +import { GetEffectiveAcl, inheritParentAcls } from '../../fields/util'; import { DocumentType } from '../documents/DocumentTypes'; -import { InteractionUtils } from '../util/InteractionUtils'; -import { DocumentView } from './nodes/DocumentView'; -import { Touchable } from './Touchable'; +import { DocUtils } from '../documents/Documents'; +import { DocumentManager } from '../util/DocumentManager'; +import { ObservableReactComponent } from './ObservableReactComponent'; +import { CollectionFreeFormView } from './collections/collectionFreeForm'; +import { FieldViewProps, FocusViewOptions } from './nodes/FieldView'; +import { DocumentView, OpenWhere } from './nodes/DocumentView'; +import { PinProps } from './nodes/trails'; +import { RefField } from '../../fields/RefField'; +import { DragManager } from '../util/DragManager'; -/// DocComponent returns a generic React base class used by views that don't have 'fieldKey' props (e.g.,CollectionFreeFormDocumentView, DocumentView) +/** + * Shared interface among all viewBox'es (ie, react classes that render the contents of a Doc) + * Many of these methods only make sense for specific viewBox'es, but they should be written to + * be as general as possible + */ +export interface ViewBoxInterface { + fieldKey?: string; + annotationKey?: string; + updateIcon?: () => void; // updates the icon representation of the document + getAnchor?: (addAsAnnotation: boolean, pinData?: PinProps) => Doc; // returns an Anchor Doc that represents the current state of the doc's componentview (e.g., the current playhead location of a an audio/video box) + restoreView?: (viewSpec: Doc) => boolean; + scrollPreview?: (docView: DocumentView, doc: Doc, focusSpeed: number, options: FocusViewOptions) => Opt<number>; // returns the duration of the focus + brushView?: (view: { width: number; height: number; panX: number; panY: number }, transTime: number, holdTime: number) => void; // highlight a region of a view (used by freeforms) + getView?: (doc: Doc, options: FocusViewOptions) => Promise<Opt<DocumentView>>; // returns a nested DocumentView for the specified doc or undefined + addDocTab?: (doc: Doc, where: OpenWhere) => boolean; // determines how to add a document - used in following links to open the target ina local lightbox + addDocument?: (doc: Doc | Doc[], annotationKey?: string) => boolean; // add a document (used only by collections) + select?: (ctrlKey: boolean, shiftKey: boolean) => void; + focus?: (textAnchor: Doc, options: FocusViewOptions) => Opt<number>; + isAnyChildContentActive?: () => boolean; // is any child content of the document active + onClickScriptDisable?: () => 'never' | 'always'; // disable click scripts : never, always, or undefined = only when selected + getKeyFrameEditing?: () => boolean; // whether the document is in keyframe editing mode (if it is, then all hidden documents that are not active at the keyframe time will still be shown) + setKeyFrameEditing?: (set: boolean) => void; // whether the document is in keyframe editing mode (if it is, then all hidden documents that are not active at the keyframe time will still be shown) + playFrom?: (time: number, endTime?: number) => void; + Pause?: () => void; // pause a media document (eg, audio/video) + IsPlaying?: () => boolean; // is a media document playing + TogglePause?: (keep?: boolean) => void; // toggle media document playing state + setFocus?: () => void; // sets input focus to the componentView + setData?: (data: Field | Promise<RefField | undefined>) => boolean; + componentUI?: (boundsLeft: number, boundsTop: number) => JSX.Element | null; + dragStarting?: (snapToDraggedDoc: boolean, showGroupDragTarget: boolean, visited: Set<Doc>) => void; + dragConfig?: (dragData: DragManager.DocumentDragData) => void; + incrementalRendering?: () => void; + infoUI?: () => JSX.Element | null; + screenBounds?: () => Opt<{ left: number; top: number; right: number; bottom: number; center?: { X: number; Y: number } }>; + ptToScreen?: (pt: { X: number; Y: number }) => { X: number; Y: number }; + ptFromScreen?: (pt: { X: number; Y: number }) => { X: number; Y: number }; + snapPt?: (pt: { X: number; Y: number }, excludeSegs?: number[]) => { nearestPt: { X: number; Y: number }; distance: number }; + search?: (str: string, bwd?: boolean, clear?: boolean) => boolean; +} +/** + * DocComponent returns a React base class used by Doc views with accessors for unpacking he Document,layoutDoc, and dataDoc's + * (note: this should not be used for the 'Box' views that render the contents of Doc views) + * Example derived views: CollectionFreeFormDocumentView, DocumentView, DocumentViewInternal) + * */ export interface DocComponentProps { Document: Doc; - fieldKey?: string; LayoutTemplate?: () => Opt<Doc>; LayoutTemplateString?: string; } export function DocComponent<P extends DocComponentProps>() { - class Component extends Touchable<P> { - //TODO This might be pretty inefficient if doc isn't observed, because computed doesn't cache then - @computed get Document() { - return this.props.Document; + class Component extends ObservableReactComponent<React.PropsWithChildren<P>> { + constructor(props: P) { + super(props); + makeObservable(this); } - // This is the "The Document" -- it encapsulates, data, layout, and any templates - @computed get rootDoc() { - return Cast(this.props.Document.rootDocument, Doc, null) || this.props.Document; + + //TODO This might be pretty inefficient if doc isn't observed, because computed doesn't cache then + get Document() { + return this._props.Document; } // This is the rendering data of a document -- it may be "The Document", or it may be some template document that holds the rendering info @computed get layoutDoc() { - return this.props.LayoutTemplateString ? this.props.Document : Doc.Layout(this.props.Document, this.props.LayoutTemplate?.()); + return this._props.LayoutTemplateString ? this.Document : Doc.Layout(this.Document, this._props.LayoutTemplate?.()); } // This is the data part of a document -- ie, the data that is constant across all views of the document @computed get dataDoc() { - return this.props.Document[DocData] as Doc; + return this.Document[DocData]; } - // key where data is stored - @computed get fieldKey() { - return this.props.fieldKey; - } - - protected _multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer; } return Component; } -/// FieldViewBoxProps - a generic base class for field views that are not annotatable (e.g. InkingStroke, ColorBox) -interface ViewBoxBaseProps { - Document: Doc; - DataDoc?: Doc; - DocumentView?: () => DocumentView; - fieldKey: string; - isSelected: (outsideReaction?: boolean) => boolean; - isContentActive: () => boolean | undefined; - renderDepth: number; - rootSelected: (outsideReaction?: boolean) => boolean; -} -export function ViewBoxBaseComponent<P extends ViewBoxBaseProps>() { - class Component extends Touchable<P> { - //TODO This might be pretty inefficient if doc isn't observed, because computed doesn't cache then - //@computed get Document(): T { return schemaCtor(this.props.Document); } +/** + * base class for non-annotatable views that render the interior contents of a DocumentView. + * this unpacks the Document/layout/data docs as well as the fieldKey being rendered, + * and provides accessors for DocumentView and ScreenToLocalBoxXf + * Example views include: InkingStroke, FontIconBox, EquationBox, etc + */ +export function ViewBoxBaseComponent<P extends FieldViewProps>() { + class Component extends ObservableReactComponent<React.PropsWithChildren<P>> { + constructor(props: P) { + super(props); + makeObservable(this); + } + + ScreenToLocalBoxXf = () => this._props.ScreenToLocalTransform(); - // This is the "The Document" -- it encapsulates, data, layout, and any templates - @computed get rootDoc() { - return Cast(this.props.Document.rootDocument, Doc, null) || this.props.Document; + get DocumentView() { + return this._props.DocumentView; + } + //TODO This might be pretty inefficient if doc isn't observed, because computed doesn't cache then + get Document() { + return this._props.Document; } // This is the rendering data of a document -- it may be "The Document", or it may be some template document that holds the rendering info @computed get layoutDoc() { - return Doc.Layout(this.props.Document); + return Doc.Layout(this.Document); } // This is the data part of a document -- ie, the data that is constant across all views of the document @computed get dataDoc() { - return this.props.DataDoc && (this.props.Document.isTemplateForField || this.props.Document.isTemplateDoc) ? this.props.DataDoc : this.props.Document[DocData]; + return this.Document.isTemplateForField || this.Document.isTemplateDoc ? this._props.TemplateDataDocument ?? this.Document[DocData] : this.Document[DocData]; } // key where data is stored - @computed get fieldKey() { - return this.props.fieldKey; + get fieldKey() { + return this._props.fieldKey; } - - protected _multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer; } return Component; } -/// DocAnnotatbleComponent -return a base class for React views of document fields that are annotatable *and* interactive when selected (e.g., pdf, image) -export interface ViewBoxAnnotatableProps { - Document: Doc; - DataDoc?: Doc; - fieldKey: string; - filterAddDocument?: (doc: Doc[]) => boolean; // allows a document that renders a Collection view to filter or modify any documents added to the collection (see PresBox for an example) - isContentActive: () => boolean | undefined; - select: (isCtrlPressed: boolean) => void; - whenChildContentsActiveChanged: (isActive: boolean) => void; - isSelected: (outsideReaction?: boolean) => boolean; - rootSelected: (outsideReaction?: boolean) => boolean; - renderDepth: number; - isAnnotationOverlay?: boolean; -} -export function ViewBoxAnnotatableComponent<P extends ViewBoxAnnotatableProps>() { - class Component extends Touchable<P> { +/** + * base class for annotatable views that render the interior contents of a DocumentView + * This does what ViewBoxBaseComponent does and additionally provides accessor for the + * field key where annotations are stored as well as add/move/remove methods for handing + * annotations. + * This also provides methods to determine when the contents should be interactive + * (respond to pointerEvents) such as when the DocumentView container is selected or a + * peer child of the container is selected + * Example views include: PDFBox, ImageBox, MapBox, etc + */ +export function ViewBoxAnnotatableComponent<P extends FieldViewProps>() { + class Component extends ObservableReactComponent<React.PropsWithChildren<P>> { @observable _annotationKeySuffix = () => 'annotations'; @observable _isAnyChildContentActive = false; + + constructor(props: P) { + super(props); + makeObservable(this); + } + + ScreenToLocalBoxXf = () => this._props.ScreenToLocalTransform(); + + get DocumentView() { + return this._props.DocumentView; + } //TODO This might be pretty inefficient if doc isn't observed, because computed doesn't cache then @computed get Document() { - return this.props.Document; - } - // This is the "The Document" -- it encapsulates, data, layout, and any templates - @computed get rootDoc() { - return Cast(this.props.Document.rootDocument, Doc, null) || this.props.Document; + return this._props.Document; } // This is the rendering data of a document -- it may be "The Document", or it may be some template document that holds the rendering info @computed get layoutDoc() { - return Doc.Layout(this.props.Document); + return Doc.Layout(this.Document); } // This is the data part of a document -- ie, the data that is constant across all views of the document @computed get dataDoc() { - return this.props.DataDoc && (this.props.Document.isTemplateForField || this.props.Document.isTemplateDoc) ? this.props.DataDoc : this.props.Document[DocData]; + return this.Document.isTemplateForField || this.Document.isTemplateDoc ? this._props.TemplateDataDocument ?? this.Document[DocData] : this.Document[DocData]; } // key where data is stored @computed get fieldKey() { - return this.props.fieldKey; + return this._props.fieldKey; } - - isAnyChildContentActive = () => this._isAnyChildContentActive; - - protected _multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer; - @computed public get annotationKey() { return this.fieldKey + (this._annotationKeySuffix() ? '_' + this._annotationKeySuffix() : ''); } @action.bound - removeDocument(doc: Doc | Doc[], annotationKey?: string, leavePushpin?: boolean): boolean { + removeDocument(doc: Doc | Doc[], annotationKey?: string, leavePushpin?: boolean, dontAddToRemoved?: boolean): boolean { const effectiveAcl = GetEffectiveAcl(this.dataDoc); const indocs = doc instanceof Doc ? [doc] : doc; const docs = indocs.filter(doc => [AclEdit, AclAdmin].includes(effectiveAcl) || GetEffectiveAcl(doc) === AclAdmin); - // docs.forEach(doc => doc.annotationOn === this.props.Document && Doc.SetInPlace(doc, 'annotationOn', undefined, true)); + // docs.forEach(doc => doc.annotationOn === this.Document && Doc.SetInPlace(doc, 'annotationOn', undefined, true)); const targetDataDoc = this.dataDoc; const value = DocListCast(targetDataDoc[annotationKey ?? this.annotationKey]); const toRemove = value.filter(v => docs.includes(v)); if (toRemove.length !== 0) { - const recent = this.rootDoc !== Doc.MyRecentlyClosed ? Doc.MyRecentlyClosed : undefined; + const recent = this.Document !== Doc.MyRecentlyClosed ? Doc.MyRecentlyClosed : undefined; toRemove.forEach(doc => { leavePushpin && DocUtils.LeavePushpin(doc, annotationKey ?? this.annotationKey); Doc.RemoveDocFromList(targetDataDoc, annotationKey ?? this.annotationKey, doc); - Doc.RemoveDocFromList(Doc.GetProto(doc), 'proto_embeddings', doc); + Doc.RemoveDocFromList(doc[DocData], 'proto_embeddings', doc); doc.embedContainer = undefined; - if (recent) { + if (recent && !dontAddToRemoved) { doc.type !== DocumentType.LOADING && Doc.AddDocToList(recent, 'data', doc, undefined, true, true); } }); - this.isAnyChildContentActive() && this.props.select(false); + if (targetDataDoc.isGroup && DocListCast(targetDataDoc[annotationKey ?? this.annotationKey]).length < 2) { + (DocumentManager.Instance.getFirstDocumentView(targetDataDoc)?.ComponentView as CollectionFreeFormView)?.promoteCollection(); + } else { + this.isAnyChildContentActive() && this._props.select(false); + } return true; } @@ -167,22 +211,22 @@ export function ViewBoxAnnotatableComponent<P extends ViewBoxAnnotatableProps>() // moving it into the target. @action.bound moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[], annotationKey?: string) => boolean, annotationKey?: string): boolean => { - if (Doc.AreProtosEqual(this.props.Document, targetCollection)) { + if (Doc.AreProtosEqual(this._props.Document, targetCollection)) { return true; } const first = doc instanceof Doc ? doc : doc[0]; if (!first?._dragOnlyWithinContainer && addDocument !== returnFalse) { - return this.removeDocument(doc, annotationKey, false) && addDocument(doc, annotationKey); + return this.removeDocument(doc, annotationKey, false, true) && addDocument(doc, annotationKey); } return false; }; @action.bound addDocument = (doc: Doc | Doc[], annotationKey?: string): boolean => { const docs = doc instanceof Doc ? [doc] : doc; - if (this.props.filterAddDocument?.(docs) === false || docs.find(doc => Doc.AreProtosEqual(doc, this.props.Document) && Doc.LayoutField(doc) === Doc.LayoutField(this.props.Document))) { + if (this._props.filterAddDocument?.(docs) === false || docs.find(doc => Doc.AreProtosEqual(doc, this.Document) && Doc.LayoutField(doc) === Doc.LayoutField(this.Document))) { return false; } - const targetDataDoc = this.rootDoc[DocData]; + const targetDataDoc = this.dataDoc; const effectiveAcl = GetEffectiveAcl(targetDataDoc); if (effectiveAcl === AclPrivate || effectiveAcl === AclReadonly) { @@ -193,9 +237,9 @@ export function ViewBoxAnnotatableComponent<P extends ViewBoxAnnotatableProps>() if ([AclAugment, AclEdit, AclAdmin].includes(effectiveAcl)) { added.forEach(doc => { doc._dragOnlyWithinContainer = undefined; - if (annotationKey ?? this._annotationKeySuffix()) Doc.GetProto(doc).annotationOn = this.rootDoc; - else Doc.GetProto(doc).annotationOn = undefined; - Doc.SetContainer(doc, this.rootDoc); + if (annotationKey ?? this._annotationKeySuffix()) doc[DocData].annotationOn = this.Document; + else doc[DocData].annotationOn = undefined; + Doc.SetContainer(doc, this.Document); inheritParentAcls(targetDataDoc, doc, true); }); @@ -208,7 +252,9 @@ export function ViewBoxAnnotatableComponent<P extends ViewBoxAnnotatableProps>() return true; }; - whenChildContentsActiveChanged = action((isActive: boolean) => this.props.whenChildContentsActiveChanged((this._isAnyChildContentActive = isActive))); + isAnyChildContentActive = () => this._isAnyChildContentActive; + + whenChildContentsActiveChanged = action((isActive: boolean) => this._props.whenChildContentsActiveChanged((this._isAnyChildContentActive = isActive))); } return Component; } diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss index 1abf33cac..11614d627 100644 --- a/src/client/views/DocumentButtonBar.scss +++ b/src/client/views/DocumentButtonBar.scss @@ -1,4 +1,4 @@ -@import 'global/globalCssVariables'; +@import 'global/globalCssVariables.module'; $linkGap: 3px; diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index c1ec5b4a4..8a4b42ae0 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -1,220 +1,49 @@ -import { IconProp } from '@fortawesome/fontawesome-svg-core'; +import { IconLookup, IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Tooltip } from '@material-ui/core'; -import { action, computed, observable, runInAction } from 'mobx'; +import { Tooltip } from '@mui/material'; +import { action, computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; -import { Doc } from '../../fields/Doc'; -import { RichTextField } from '../../fields/RichTextField'; -import { Cast, DocCast, NumCast } from '../../fields/Types'; +import * as React from 'react'; import { emptyFunction, returnFalse, setupMoveUpEvents, simulateMouseClick } from '../../Utils'; -import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager'; -import { Pulls, Pushes } from '../apis/google_docs/GoogleApiClientUtils'; -import { Docs, DocUtils } from '../documents/Documents'; +import { Doc } from '../../fields/Doc'; +import { Cast, DocCast } from '../../fields/Types'; +import { DocUtils } from '../documents/Documents'; +import { CalendarManager } from '../util/CalendarManager'; import { DragManager } from '../util/DragManager'; import { IsFollowLinkScript } from '../util/LinkFollower'; import { SelectionManager } from '../util/SelectionManager'; import { SharingManager } from '../util/SharingManager'; -import { undoBatch, UndoManager } from '../util/UndoManager'; -import { CollectionDockingView } from './collections/CollectionDockingView'; -import { TabDocView } from './collections/TabDocView'; +import { UndoManager, undoBatch } from '../util/UndoManager'; import './DocumentButtonBar.scss'; +import { ObservableReactComponent } from './ObservableReactComponent'; +import { TabDocView } from './collections/TabDocView'; import { Colors } from './global/globalEnums'; import { LinkPopup } from './linking/LinkPopup'; -import { MetadataEntryMenu } from './MetadataEntryMenu'; import { DocumentLinksButton } from './nodes/DocumentLinksButton'; -import { DocumentView, DocumentViewInternal, OpenWhere, OpenWhereMod } from './nodes/DocumentView'; +import { DocumentView, DocumentViewInternal, OpenWhere } from './nodes/DocumentView'; import { DashFieldView } from './nodes/formattedText/DashFieldView'; -import { GoogleRef } from './nodes/formattedText/FormattedTextBox'; import { PinProps } from './nodes/trails'; -import { TemplateMenu } from './TemplateMenu'; -import React = require('react'); -const higflyout = require('@hig/flyout'); -export const { anchorPoints } = higflyout; -export const Flyout = higflyout.default; - -const cloud: IconProp = 'cloud-upload-alt'; -const fetch: IconProp = 'sync-alt'; - -enum UtilityButtonState { - Default, - OpenRight, - OpenExternally, -} +import { faCalendarDays } from '@fortawesome/free-solid-svg-icons'; @observer -export class DocumentButtonBar extends React.Component<{ views: () => (DocumentView | undefined)[]; stack?: any }, {}> { +export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (DocumentView | undefined)[]; stack?: any }> { private _dragRef = React.createRef<HTMLDivElement>(); - private _pullAnimating = false; - private _pushAnimating = false; - private _pullColorAnimating = false; - - @observable private pushIcon: IconProp = 'arrow-alt-circle-up'; - @observable private pullIcon: IconProp = 'arrow-alt-circle-down'; - @observable private pullColor: string = 'white'; - @observable public isAnimatingFetch = false; - @observable public isAnimatingPulse = false; - - @observable private openHover: UtilityButtonState = UtilityButtonState.Default; - @observable public static Instance: DocumentButtonBar; - public static hasPushedHack = false; - public static hasPulledHack = false; - constructor(props: { views: () => (DocumentView | undefined)[] }) { + constructor(props: any) { super(props); - runInAction(() => (DocumentButtonBar.Instance = this)); + makeObservable(this); + DocumentButtonBar.Instance = this; } - public startPullOutcome = action((success: boolean) => { - if (!this._pullAnimating) { - this._pullAnimating = true; - this.pullIcon = success ? 'check-circle' : 'stop-circle'; - setTimeout( - () => - runInAction(() => { - this.pullIcon = 'arrow-alt-circle-down'; - this._pullAnimating = false; - }), - 1000 - ); - } - }); - - public startPushOutcome = action((success: boolean) => { - this.isAnimatingPulse = false; - if (!this._pushAnimating) { - this._pushAnimating = true; - this.pushIcon = success ? 'check-circle' : 'stop-circle'; - setTimeout( - () => - runInAction(() => { - this.pushIcon = 'arrow-alt-circle-up'; - this._pushAnimating = false; - }), - 1000 - ); - } - }); - - public setPullState = action((unchanged: boolean) => { - this.isAnimatingFetch = false; - if (!this._pullColorAnimating) { - this._pullColorAnimating = true; - this.pullColor = unchanged ? 'lawngreen' : 'red'; - setTimeout(this.clearPullColor, 1000); - } - }); - - private clearPullColor = action(() => { - this.pullColor = 'white'; - this._pullColorAnimating = false; - }); - get view0() { - return this.props.views()?.[0]; - } - - @computed - get considerGoogleDocsPush() { - const targetDoc = this.view0?.props.Document; - const published = targetDoc && Doc.GetProto(targetDoc)[GoogleRef] !== undefined; - const animation = this.isAnimatingPulse ? 'shadow-pulse 1s linear infinite' : 'none'; - return !targetDoc ? null : ( - <Tooltip - title={ - <> - <div className="dash-tooltip">{`${published ? 'Push' : 'Publish'} to Google Docs`}</div> - </> - }> - <div - className="documentButtonBar-button" - style={{ animation }} - onClick={async () => { - await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(); - !published && runInAction(() => (this.isAnimatingPulse = true)); - DocumentButtonBar.hasPushedHack = false; - targetDoc[Pushes] = NumCast(targetDoc[Pushes]) + 1; - }}> - <FontAwesomeIcon className="documentdecorations-icon" icon={published ? (this.pushIcon as any) : cloud} size={published ? 'sm' : 'xs'} /> - </div> - </Tooltip> - ); + return this._props.views()?.[0]; } - @computed - get considerGoogleDocsPull() { - const targetDoc = this.view0?.props.Document; - const dataDoc = targetDoc && Doc.GetProto(targetDoc); - const animation = this.isAnimatingFetch ? 'spin 0.5s linear infinite' : 'none'; - - const title = (() => { - switch (this.openHover) { - default: - case UtilityButtonState.Default: - return `${!dataDoc?.googleDocUnchanged ? 'Pull from' : 'Fetch'} Google Docs`; - case UtilityButtonState.OpenRight: - return 'Open in Right Split'; - case UtilityButtonState.OpenExternally: - return 'Open in new Browser Tab'; - } - })(); - - return !targetDoc || !dataDoc || !dataDoc[GoogleRef] ? null : ( - <Tooltip title={<div className="dash-tooltip">{title}</div>}> - <div - className="documentButtonBar-button" - style={{ backgroundColor: this.pullColor }} - onPointerEnter={action(e => { - if (e.altKey) { - this.openHover = UtilityButtonState.OpenExternally; - } else if (e.shiftKey) { - this.openHover = UtilityButtonState.OpenRight; - } - })} - onPointerLeave={action(() => (this.openHover = UtilityButtonState.Default))} - onClick={async e => { - const googleDocUrl = `https://docs.google.com/document/d/${dataDoc[GoogleRef]}/edit`; - if (e.shiftKey) { - e.preventDefault(); - let googleDoc = await Cast(dataDoc.googleDoc, Doc); - if (!googleDoc) { - const options = { _width: 600, _nativeWidth: 960, _nativeHeight: 800, data_useCors: false }; - googleDoc = Docs.Create.WebDocument(googleDocUrl, options); - dataDoc.googleDoc = googleDoc; - } - CollectionDockingView.AddSplit(googleDoc, OpenWhereMod.right); - } else if (e.altKey) { - e.preventDefault(); - window.open(googleDocUrl); - } else { - this.clearPullColor(); - DocumentButtonBar.hasPulledHack = false; - targetDoc[Pulls] = NumCast(targetDoc[Pulls]) + 1; - dataDoc.googleDocUnchanged && runInAction(() => (this.isAnimatingFetch = true)); - } - }}> - <FontAwesomeIcon - className="documentdecorations-icon" - size="sm" - style={{ WebkitAnimation: animation, MozAnimation: animation }} - icon={(() => { - // prettier-ignore - switch (this.openHover) { - default: - case UtilityButtonState.Default: return dataDoc.googleDocUnchanged === false ? (this.pullIcon as any) : fetch; - case UtilityButtonState.OpenRight: return 'arrow-alt-circle-right'; - case UtilityButtonState.OpenExternally: return 'share'; - } - })()} - /> - </div> - </Tooltip> - ); - } @observable subFollow = ''; @computed get followLinkButton() { - const targetDoc = this.view0?.props.Document; + const targetDoc = this.view0?.Document; const followBtn = (allDocs: boolean, click: (doc: Doc) => void, isSet: (doc?: Doc) => boolean, icon: IconProp) => { const tooltip = `Follow ${this.subPin}documents`; return !tooltip ? null : ( @@ -229,7 +58,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV onPointerEnter={action(e => (this.subPin = allDocs ? 'All ' : ''))} onPointerLeave={action(e => (this.subPin = ''))} onClick={e => { - this.props.views().forEach(dv => click(dv!.rootDoc)); + this._props.views().forEach(dv => click(dv!.Document)); e.stopPropagation(); }} /> @@ -243,7 +72,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV <div className="documentButtonBar-icon documentButtonBar-follow" style={{ backgroundColor: followLink ? Colors.LIGHT_BLUE : Colors.DARK_GRAY, color: followLink ? Colors.BLACK : Colors.WHITE }} - onClick={undoBatch(e => this.props.views().map(view => view?.docView?.toggleFollowLink(undefined, false)))}> + onClick={undoBatch(e => this._props.views().map(view => view?.toggleFollowLink(undefined, false)))}> <div className="documentButtonBar-followTypes"> {followBtn( true, @@ -260,7 +89,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV @observable subLink = ''; @computed get linkButton() { - const targetDoc = this.view0?.props.Document; + const targetDoc = this.view0?.Document; return !targetDoc || !this.view0 ? null : ( <div className="documentButtonBar-icon documentButtonBar-link"> <div className="documentButtonBar-linkTypes"> @@ -304,7 +133,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV onPointerLeave={action(e => (this.subEndLink = ''))} onClick={e => { this.view0 && - DocumentLinksButton.finishLinkClick(e.clientX, e.clientY, DocumentLinksButton.StartLink, this.view0.props.Document, true, this.view0, { + DocumentLinksButton.finishLinkClick(e.clientX, e.clientY, DocumentLinksButton.StartLink, this.view0.Document, true, this.view0, { pinDocLayout: pinLayout, pinData: !pinContent ? {} : { poslayoutview: true, dataannos: true, dataview: pinContent }, } as PinProps); @@ -331,7 +160,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV @observable subPin = ''; @computed get pinButton() { - const targetDoc = this.view0?.props.Document; + const targetDoc = this.view0?.Document; const pinBtn = (pinLayoutView: boolean, pinContentView: boolean, icon: IconProp) => { const tooltip = `Pin Document and Save ${this.subPin} to trail`; return !tooltip ? null : ( @@ -353,10 +182,10 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV )} onPointerLeave={action(e => (this.subPin = ''))} onClick={e => { - const docs = this.props + const docs = this._props .views() .filter(v => v) - .map(dv => dv!.rootDoc); + .map(dv => dv!.Document); TabDocView.PinDoc(docs, { pinAudioPlay: true, pinDocLayout: pinLayoutView, @@ -372,14 +201,14 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV ); }; return !targetDoc ? null : ( - <Tooltip title={<div className="dash-tooltip">{`Pin Document ${SelectionManager.Views().length > 1 ? 'multiple documents' : ''} to Trail`}</div>}> + <Tooltip title={<div className="dash-tooltip">{`Pin Document ${SelectionManager.Views.length > 1 ? 'multiple documents' : ''} to Trail`}</div>}> <div className="documentButtonBar-icon documentButtonBar-pin" onClick={e => { - const docs = this.props + const docs = this._props .views() .filter(v => v) - .map(dv => dv!.rootDoc); + .map(dv => dv!.Document); TabDocView.PinDoc(docs, { pinAudioPlay: true, pinDocLayout: e.shiftKey, pinData: { dataview: e.altKey }, activeFrame: Cast(docs.lastElement()?.activeFrame, 'number', null) }); e.stopPropagation(); }}> @@ -396,7 +225,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV @computed get shareButton() { - const targetDoc = this.view0?.props.Document; + const targetDoc = this.view0?.Document; return !targetDoc ? null : ( <Tooltip title={<div className="dash-tooltip">{'Open Sharing Manager'}</div>}> <div className="documentButtonBar-icon" style={{ color: 'white' }} onClick={e => SharingManager.Instance.open(this.view0, targetDoc)}> @@ -408,36 +237,29 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV @computed get menuButton() { - const targetDoc = this.view0?.props.Document; + const targetDoc = this.view0?.Document; return !targetDoc ? null : ( <Tooltip title={<div className="dash-tooltip">{`Open Context Menu`}</div>}> - <div className="documentButtonBar-icon" style={{ color: 'white', cursor: 'pointer' }} onClick={this.openContextMenu}> + <div className="documentButtonBar-icon" style={{ color: 'white', cursor: 'pointer' }} onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, e => this.openContextMenu(e))}> <FontAwesomeIcon className="documentdecorations-icon" icon="bars" /> </div> </Tooltip> ); } + @computed - get metadataButton() { - const view0 = this.view0; - return !view0 ? null : ( - <Tooltip title={<div className="dash-tooltip">Show metadata panel</div>}> - <div className="documentButtonBar-linkFlyout"> - <Flyout - anchorPoint={anchorPoints.LEFT_TOP} - content={ - <MetadataEntryMenu - docs={this.props - .views() - .filter(dv => dv) - .map(dv => dv!.props.Document)} - suggestWithFunction - /> /* tfs: @bcz This might need to be the data document? */ - }> - <div className={'documentButtonBar-linkButton-' + 'empty'} onPointerDown={e => e.stopPropagation()}> - {<FontAwesomeIcon className="documentdecorations-icon" icon="tag" />} - </div> - </Flyout> + get calendarButton() { + const targetDoc = this.view0?.Document; + return !targetDoc ? null : ( + <Tooltip title={<div className="dash-calendar-button">Open calendar menu</div>}> + <div + className="documentButtonBar-icon" + style={{ color: 'white' }} + onClick={e => { + console.log('hi: ', CalendarManager.Instance); + CalendarManager.Instance.open(this.view0, targetDoc); + }}> + <FontAwesomeIcon className="documentdecorations-icon" icon={faCalendarDays as IconLookup} /> </div> </Tooltip> ); @@ -447,7 +269,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV _stopFunc: () => void = emptyFunction; @computed get recordButton() { - const targetDoc = this.view0?.props.Document; + const targetDoc = this.view0?.Document; return !targetDoc ? null : ( <Tooltip title={<div className="dash-tooltip">Press to record audio annotation</div>}> <div @@ -455,7 +277,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV style={{ backgroundColor: this._isRecording ? Colors.ERROR_RED : Colors.DARK_GRAY, color: Colors.WHITE }} onPointerDown={action((e: React.PointerEvent) => { this._isRecording = true; - this.props.views().map(view => view && DocumentViewInternal.recordAudioAnnotation(view.dataDoc, view.LayoutFieldKey, stopFunc => (this._stopFunc = stopFunc), emptyFunction)); + this._props.views().map(view => view && DocumentViewInternal.recordAudioAnnotation(view.dataDoc, view.LayoutFieldKey, stopFunc => (this._stopFunc = stopFunc), emptyFunction)); const b = UndoManager.StartBatch('Recording'); setupMoveUpEvents( this, @@ -482,8 +304,8 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV onEmbedButtonMoved = () => { if (this._dragRef.current) { const dragDocView = this.view0!; - const dragData = new DragManager.DocumentDragData([dragDocView.props.Document]); - const [left, top] = dragDocView.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); + const dragData = new DragManager.DocumentDragData([dragDocView.Document]); + const [left, top] = dragDocView.screenToContentsTransform().inverse().transformPoint(0, 0); dragData.defaultDropAction = 'embed'; dragData.canEmbed = true; DragManager.StartDocumentDrag([dragDocView.ContentDiv!], dragData, left, top, { hideSource: false }); @@ -497,11 +319,12 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV @computed get templateButton() { const view0 = this.view0; - const views = this.props.views(); + const views = this._props.views(); return !view0 ? null : ( <Tooltip title={<div className="dash-tooltip">Tap to Customize Layout. Drag an embedding</div>} open={this._tooltipOpen} onClose={action(() => (this._tooltipOpen = false))} placement="bottom"> <div className="documentButtonBar-linkFlyout" ref={this._dragRef} onPointerEnter={action(() => !this._ref.current?.getBoundingClientRect().width && (this._tooltipOpen = true))}> - <Flyout + { + /* <Flyout anchorPoint={anchorPoints.LEFT_TOP} onOpen={action(() => (this._embedDown = true))} onClose={action(() => (this._embedDown = false))} @@ -516,14 +339,19 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV <div className={'documentButtonBar-linkButton-empty'} ref={this._dragRef} onPointerDown={this.onTemplateButton}> <FontAwesomeIcon className="documentdecorations-icon" icon="edit" size="sm" /> </div> - </Flyout> + </Flyout> */ + + <div className={'documentButtonBar-linkButton-empty'} ref={this._dragRef} onPointerDown={this.onTemplateButton}> + <FontAwesomeIcon className="documentdecorations-icon" icon="edit" size="sm" /> + </div> + } </div> </Tooltip> ); } - openContextMenu = (e: React.MouseEvent) => { - let child = SelectionManager.Views()[0].ContentDiv!.children[0]; + openContextMenu = (e: PointerEvent) => { + let child = SelectionManager.Views[0].ContentDiv!.children[0]; while (child.children.length) { const next = Array.from(child.children).find(c => c.className?.toString().includes('SVGAnimatedString') || typeof c.className === 'string'); if (next?.className?.toString().includes(DocumentView.ROOT_DIV)) break; @@ -559,27 +387,24 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV @action toggleTrail = (e: React.PointerEvent) => { - const rootView = this.props.views()[0]; - const rootDoc = rootView?.rootDoc; - if (rootDoc) { - const anchor = rootView.ComponentView?.getAnchor?.(true) ?? rootDoc; + const rootView = this._props.views()[0]; + const doc = rootView?.Document; + if (doc) { + const anchor = rootView.ComponentView?.getAnchor?.(true) ?? doc; const trail = DocCast(anchor.presentationTrail) ?? Doc.MakeCopy(DocCast(Doc.UserDoc().emptyTrail), true); if (trail !== anchor.presentationTrail) { DocUtils.MakeLink(anchor, trail, { link_relationship: 'link trail' }); anchor.presentationTrail = trail; } Doc.ActivePresentation = trail; - this.props.views().lastElement()?.props.addDocTab(trail, OpenWhere.replaceRight); + this._props.views().lastElement()?._props.addDocTab(trail, OpenWhere.replaceRight); } e.stopPropagation(); }; render() { - if (!this.view0) return null; + const doc = this.view0?.Document; + if (!doc || !this.view0) return null; - const isText = this.view0.props.Document[this.view0.LayoutFieldKey] instanceof RichTextField; - const doc = this.view0?.props.Document; - const considerPull = isText && this.considerGoogleDocsPull; - const considerPush = isText && this.considerGoogleDocsPush; return ( <div className="documentButtonBar"> <div className="documentButtonBar-button"> @@ -589,9 +414,9 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV <div style={{ position: 'absolute', zIndex: 1000 }}> <LinkPopup key="popup" - linkCreated={link => (link.link_displayLine = !IsFollowLinkScript(this.props.views().lastElement()?.rootDoc.onClick))} - linkCreateAnchor={() => this.props.views().lastElement()?.ComponentView?.getAnchor?.(true)} - linkFrom={() => this.props.views().lastElement()?.rootDoc} + linkCreated={link => (link.link_displayLine = !IsFollowLinkScript(this._props.views().lastElement()?.Document.onClick))} + linkCreateAnchor={() => this._props.views().lastElement()?.ComponentView?.getAnchor?.(true)} + linkFrom={() => this._props.views().lastElement()?.Document} /> </div> ) : ( @@ -599,22 +424,12 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV )} {DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== doc ? <div className="documentButtonBar-button">{this.endLinkButton} </div> : null} - { - Doc.noviceMode ? null : <div className="documentButtonBar-button">{this.templateButton}</div> - /*<div className="documentButtonBar-button"> {this.metadataButton} </div> */ - } - {!SelectionManager.Views()?.some(v => v.allLinks.length) ? null : <div className="documentButtonBar-button">{this.followLinkButton}</div>} + {Doc.noviceMode ? null : <div className="documentButtonBar-button">{this.templateButton}</div>} + {!SelectionManager.Views?.some(v => v.allLinks.length) ? null : <div className="documentButtonBar-button">{this.followLinkButton}</div>} <div className="documentButtonBar-button">{this.pinButton}</div> <div className="documentButtonBar-button">{this.recordButton}</div> + <div className="documentButtonBar-button">{this.calendarButton}</div> {!Doc.UserDoc()['documentLinksButton-fullMenu'] ? null : <div className="documentButtonBar-button">{this.shareButton}</div>} - {!Doc.UserDoc()['documentLinksButton-fullMenu'] ? null : ( - <div className="documentButtonBar-button" style={{ display: !considerPush ? 'none' : '' }}> - {this.considerGoogleDocsPush} - </div> - )} - <div className="documentButtonBar-button" style={{ display: !considerPull ? 'none' : '' }}> - {this.considerGoogleDocsPull} - </div> <div className="documentButtonBar-button">{this.menuButton}</div> </div> ); diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index f41cf1385..ac0ef054c 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -1,10 +1,9 @@ -@import 'global/globalCssVariables'; +@import 'global/globalCssVariables.module'; $linkGap: 3px; $headerHeight: 20px; $resizeHandler: 8px; -.documentDecorations-Dark, .documentDecorations { position: absolute; z-index: 2000; @@ -40,14 +39,12 @@ $resizeHandler: 8px; border-radius: 50%; } } -.documentDecorations-Dark { - background: dimgray; -} .documentDecorations-container { position: absolute; top: 0; left: 0; + transform-origin: 50% calc(50% + 10px); display: grid; grid-template-rows: $headerHeight $resizeHandler 1fr $resizeHandler; grid-template-columns: $resizeHandler 1fr $resizeHandler; @@ -60,6 +57,7 @@ $resizeHandler: 8px; flex-direction: row; gap: 2px; pointer-events: all; + color: black; cursor: move; .documentDecorations-openButton { @@ -169,7 +167,6 @@ $resizeHandler: 8px; } } - .documentDecorations-title-Dark, .documentDecorations-title { opacity: 1; width: calc(100% - 60px); // = margin-left + margin-right @@ -188,22 +185,13 @@ $resizeHandler: 8px; opacity: 1; } - .documentDecorations-titleSpan, - .documentDecorations-titleSpan-Dark { + .documentDecorations-titleSpan { width: 100%; border-radius: 8px; background: $light-gray; display: inline-block; cursor: move; } - .documentDecorations-titleSpan-Dark { - background: hsla(0, 0%, 0%, 0.412); - } - } - - .documentDecorations-title-Dark { - color: white; - background: black; } .documentDecorations-titleBackground { @@ -326,11 +314,6 @@ $resizeHandler: 8px; } } - .documentDecorations-resizer-Dark { - background: $light-gray; - opacity: 0.2; - } - .documentDecorations-topLeftResizer, .documentDecorations-leftResizer, .documentDecorations-bottomLeftResizer { @@ -357,6 +340,7 @@ $resizeHandler: 8px; background: $medium-gray; height: 10; width: 10; + opacity: 0.5; pointer-events: all; cursor: nwse-resize; } diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 5a145e94a..5ef62b2c5 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -1,21 +1,21 @@ -import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Tooltip } from '@material-ui/core'; +import { Tooltip } from '@mui/material'; import { IconButton } from 'browndash-components'; -import { action, computed, observable, reaction } from 'mobx'; +import { action, computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { FaUndo } from 'react-icons/fa'; +import { Utils, emptyFunction, lightOrDark, numberValue, returnFalse, setupMoveUpEvents } from '../../Utils'; import { DateField } from '../../fields/DateField'; import { Doc, DocListCast, Field, HierarchyMapping, ReverseHierarchyMap } from '../../fields/Doc'; -import { AclAdmin, AclAugment, AclEdit, DocData, Height, Width } from '../../fields/DocSymbols'; +import { AclAdmin, AclAugment, AclEdit, DocData } from '../../fields/DocSymbols'; import { InkField } from '../../fields/InkField'; import { RichTextField } from '../../fields/RichTextField'; import { ScriptField } from '../../fields/ScriptField'; -import { Cast, DocCast, NumCast, StrCast } from '../../fields/Types'; +import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../fields/Types'; import { GetEffectiveAcl } from '../../fields/util'; -import { aggregateBounds, emptyFunction, numberValue, returnFalse, setupMoveUpEvents, Utils } from '../../Utils'; -import { Docs } from '../documents/Documents'; import { DocumentType } from '../documents/DocumentTypes'; +import { Docs } from '../documents/Documents'; import { DocumentManager } from '../util/DocumentManager'; import { DragManager } from '../util/DragManager'; import { LinkFollower } from '../util/LinkFollower'; @@ -23,22 +23,27 @@ import { SelectionManager } from '../util/SelectionManager'; import { SettingsManager } from '../util/SettingsManager'; import { SnappingManager } from '../util/SnappingManager'; import { UndoManager } from '../util/UndoManager'; -import { CollectionDockingView } from './collections/CollectionDockingView'; -import { CollectionFreeFormView } from './collections/collectionFreeForm'; import { DocumentButtonBar } from './DocumentButtonBar'; import './DocumentDecorations.scss'; -import { Colors } from './global/globalEnums'; -import { InkingStroke } from './InkingStroke'; import { InkStrokeProperties } from './InkStrokeProperties'; +import { InkingStroke } from './InkingStroke'; import { LightboxView } from './LightboxView'; +import { ObservableReactComponent } from './ObservableReactComponent'; +import { CollectionDockingView } from './collections/CollectionDockingView'; +import { CollectionFreeFormView } from './collections/collectionFreeForm'; +import { Colors } from './global/globalEnums'; import { DocumentView, OpenWhereMod } from './nodes/DocumentView'; -import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox'; import { ImageBox } from './nodes/ImageBox'; -import React = require('react'); -import _ = require('lodash'); +import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox'; +interface DocumentDecorationsProps { + PanelWidth: number; + PanelHeight: number; + boundsLeft: number; + boundsTop: number; +} @observer -export class DocumentDecorations extends React.Component<{ PanelWidth: number; PanelHeight: number; boundsLeft: number; boundsTop: number }, { value: string }> { +export class DocumentDecorations extends ObservableReactComponent<DocumentDecorationsProps> { static Instance: DocumentDecorations; private _resizeHdlId = ''; private _keyinput = React.createRef<HTMLInputElement>(); @@ -46,70 +51,63 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P private _linkBoxHeight = 20 + 3; // link button height + margin private _titleHeight = 20; private _resizeUndo?: UndoManager.Batch; - private _offX = 0; - private _offY = 0; // offset from click pt to inner edge of resize border - private _snapX = 0; - private _snapY = 0; // last snapped location of resize border - private _dragHeights = new Map<Doc, { start: number; lowest: number }>(); + private _offset = { x: 0, y: 0 }; // offset from click pt to inner edge of resize border + private _snapPt = { x: 0, y: 0 }; // last snapped location of resize border private _inkDragDocs: { doc: Doc; x: number; y: number; width: number; height: number }[] = []; + private _interactionLock?: boolean; + @observable _showNothing = true; @observable private _accumulatedTitle = ''; @observable private _titleControlString: string = '#title'; @observable private _editingTitle = false; @observable private _hidden = false; - @observable public AddToSelection = false; // if Shift is pressed, then this should be set so that clicking on the selection background is ignored so overlapped documents can be added to the selection set. - @observable public pushIcon: IconProp = 'arrow-alt-circle-up'; - @observable public pullIcon: IconProp = 'arrow-alt-circle-down'; - @observable public pullColor: string = 'white'; @observable private _isRotating: boolean = false; @observable private _isRounding: boolean = false; - @observable private showLayoutAcl: boolean = false; + @observable private _showLayoutAcl: boolean = false; + @observable private _showRotCenter = false; // whether to show a draggable green dot that represents the center of rotation + @observable private _rotCenter = [0, 0]; // the center of rotation in object coordinates (0,0) = object center (not top left!) - constructor(props: any) { + constructor(props: React.PropsWithChildren<DocumentDecorationsProps>) { super(props); + makeObservable(this); + DocumentDecorations.Instance = this; - reaction( - () => SelectionManager.Views().slice(), - action(views => { - this._showNothing = !DocumentView.LongPress && views.length === 1; // show decorations if multiple docs are selected or we're long pressing - this._editingTitle = false; - }) - ); - document.addEventListener( - // show decorations whenever pointer moves outside of selection bounds. - 'pointermove', + document.addEventListener('pointermove', // show decorations whenever pointer moves outside of selection bounds. action(e => { - if (this.Bounds.x || this.Bounds.y || this.Bounds.r || this.Bounds.b) { - if (this.Bounds.x !== Number.MAX_VALUE && (this.Bounds.x > e.clientX + 10 || this.Bounds.r < e.clientX - 10 || this.Bounds.y > e.clientY + 10 || this.Bounds.b < e.clientY - 10)) { - this._showNothing = false; - } else { - this._showNothing = true; - } - } - }) - ); + const center = {x: (this.Bounds.x+this.Bounds.r)/2, y: (this.Bounds.y+this.Bounds.b)/2}; + const {x,y} = Utils.rotPt(e.clientX - center.x, + e.clientY - center.y, + NumCast(SelectionManager.Views.lastElement()?.screenToViewTransform().Rotate)); + (this._showNothing = !(this.Bounds.x !== Number.MAX_VALUE && // + (this.Bounds.x > center.x+x || this.Bounds.r < center.x+x || + this.Bounds.y > center.y+y || this.Bounds.b < center.y+y ))); + })); // prettier-ignore } - @computed - get Bounds() { - if (LinkFollower.IsFollowing || DocumentView.ExploreMode) return { x: 0, y: 0, r: 0, b: 0 }; - const views = SelectionManager.Views(); - return views - .filter(dv => dv.props.renderDepth > 0) - .map(dv => dv.getBounds()) - .reduce( - (bounds, rect) => - !rect - ? bounds - : { - x: Math.min(rect.left, bounds.x), - y: Math.min(rect.top, bounds.y), - r: Math.max(rect.right, bounds.r), - b: Math.max(rect.bottom, bounds.b), - c: views.length === 1 ? rect.center : undefined, - }, - { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE, c: undefined as { X: number; Y: number } | undefined } - ); + @computed get ClippedBounds() { + const bounds = { ...this.Bounds }; + const leftBounds = this._props.boundsLeft; + const topBounds = LightboxView.LightboxDoc ? 0 : this._props.boundsTop; + bounds.x = Math.max(leftBounds, bounds.x - this._resizeBorderWidth / 2) + this._resizeBorderWidth / 2; + bounds.y = Math.max(topBounds, bounds.y - this._resizeBorderWidth / 2 - this._titleHeight) + this._resizeBorderWidth / 2 + this._titleHeight; + const borderRadiusDraggerWidth = 15; + bounds.r = Math.max(bounds.x, Math.max(leftBounds, Math.min(window.innerWidth, bounds.r + borderRadiusDraggerWidth + this._resizeBorderWidth / 2) - this._resizeBorderWidth / 2 - borderRadiusDraggerWidth)); + bounds.b = Math.max(bounds.y, Math.max(topBounds, Math.min(window.innerHeight, bounds.b + this._resizeBorderWidth / 2 + this._linkBoxHeight) - this._resizeBorderWidth / 2 - this._linkBoxHeight)); + return bounds; + } + + @computed get Bounds() { + return (SnappingManager.IsLinkFollowing || SnappingManager.ExploreMode) ? + { x: 0, y: 0, r: 0, b: 0 } + : SelectionManager.Views + .filter(dv => dv._props.renderDepth > 0) + .map(dv => dv.getBounds) + .reduce((bounds, rect) => !rect ? bounds + : { x: Math.min(rect.left, bounds.x), + y: Math.min(rect.top, bounds.y), + r: Math.max(rect.right, bounds.r), + b: Math.max(rect.bottom, bounds.b)}, + { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE }); // prettier-ignore } @action @@ -122,14 +120,14 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P UndoManager.RunInBatch( () => titleFieldKey && - SelectionManager.Views().forEach(d => { + SelectionManager.Views.forEach(d => { if (titleFieldKey === 'title') { d.dataDoc.title_custom = !this._accumulatedTitle.startsWith('-'); - if (StrCast(d.rootDoc.title).startsWith('@') && !this._accumulatedTitle.startsWith('@')) { - Doc.RemoveDocFromList(Doc.MyPublishedDocs, undefined, d.rootDoc); + if (StrCast(d.Document.title).startsWith('@') && !this._accumulatedTitle.startsWith('@')) { + Doc.RemFromMyPublished(d.Document); } - if (!StrCast(d.rootDoc.title).startsWith('@') && this._accumulatedTitle.startsWith('@')) { - Doc.AddDocToList(Doc.MyPublishedDocs, undefined, d.rootDoc); + if (!StrCast(d.Document.title).startsWith('@') && this._accumulatedTitle.startsWith('@')) { + Doc.AddToMyPublished(d.Document); } } //@ts-ignore @@ -137,20 +135,20 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P if (titleField.toString().startsWith('<this>')) { const title = titleField.toString().replace(/<this>\.?/, ''); - const curKey = Doc.LayoutFieldKey(d.rootDoc); + const curKey = Doc.LayoutFieldKey(d.Document); if (curKey !== title) { if (title) { if (d.dataDoc[title] === undefined || d.dataDoc[title] instanceof RichTextField || typeof d.dataDoc[title] === 'string') { - d.rootDoc.layout_fieldKey = `layout_${title}`; - d.rootDoc[`layout_${title}`] = FormattedTextBox.LayoutString(title); - d.rootDoc[`${title}_nativeWidth`] = d.rootDoc[`${title}_nativeHeight`] = 0; + d.Document.layout_fieldKey = `layout_${title}`; + d.Document[`layout_${title}`] = FormattedTextBox.LayoutString(title); + d.Document[`${title}_nativeWidth`] = d.Document[`${title}_nativeHeight`] = 0; } } else { - d.rootDoc.layout_fieldKey = undefined; + d.Document.layout_fieldKey = undefined; } } } else { - Doc.SetInPlace(d.rootDoc, titleFieldKey, titleField, true); + Doc.SetInPlace(d.Document, titleFieldKey, titleField, true); } }), 'edit title' @@ -165,64 +163,59 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P } }; - @action onContainerDown = (e: React.PointerEvent): void => { - const first = SelectionManager.Views()[0]; - const effectiveLayoutAcl = GetEffectiveAcl(first.rootDoc); + onContainerDown = (e: React.PointerEvent) => { + const effectiveLayoutAcl = GetEffectiveAcl(SelectionManager.Views[0].Document); if (effectiveLayoutAcl == AclAdmin || effectiveLayoutAcl == AclEdit || effectiveLayoutAcl == AclAugment) { - setupMoveUpEvents( - this, - e, - e => this.onBackgroundMove(true, e), - e => {}, - emptyFunction - ); + setupMoveUpEvents(this, e, e => this.onBackgroundMove(true, e), emptyFunction, emptyFunction); + e.stopPropagation(); } }; - @action onTitleDown = (e: React.PointerEvent): void => { - const first = SelectionManager.Views()[0]; - const effectiveLayoutAcl = GetEffectiveAcl(first.rootDoc); + onTitleDown = (e: React.PointerEvent) => { + const effectiveLayoutAcl = GetEffectiveAcl(SelectionManager.Views[0].Document); if (effectiveLayoutAcl == AclAdmin || effectiveLayoutAcl == AclEdit || effectiveLayoutAcl == AclAugment) { setupMoveUpEvents( this, e, e => this.onBackgroundMove(true, e), - e => {}, + emptyFunction, action(e => { !this._editingTitle && (this._accumulatedTitle = this._titleControlString.startsWith('#') ? this.selectionTitle : this._titleControlString); this._editingTitle = true; this._keyinput.current && setTimeout(this._keyinput.current.focus); }) ); + e.stopPropagation(); } }; - onBackgroundDown = (e: React.PointerEvent) => setupMoveUpEvents(this, e, e => this.onBackgroundMove(false, e), emptyFunction, emptyFunction); - + onBackgroundDown = (e: React.PointerEvent) => { + setupMoveUpEvents(this, e, e => this.onBackgroundMove(false, e), emptyFunction, emptyFunction); + e.stopPropagation(); + }; @action onBackgroundMove = (dragTitle: boolean, e: PointerEvent): boolean => { - const first = SelectionManager.Views()[0]; - const effectiveLayoutAcl = GetEffectiveAcl(first.rootDoc); + const dragDocView = SelectionManager.Views[0]; + const effectiveLayoutAcl = GetEffectiveAcl(dragDocView.Document); if (effectiveLayoutAcl != AclAdmin && effectiveLayoutAcl != AclEdit && effectiveLayoutAcl != AclAugment) { return false; } - const dragDocView = SelectionManager.Views()[0]; const containers = new Set<Doc | undefined>(); - SelectionManager.Views().forEach(v => containers.add(DocCast(v.rootDoc.embedContainer))); + SelectionManager.Views.forEach(v => containers.add(DocCast(v.Document.embedContainer))); if (containers.size > 1) return false; - const { left, top } = dragDocView.getBounds() || { left: 0, top: 0 }; + const { left, top } = dragDocView.getBounds || { left: 0, top: 0 }; const dragData = new DragManager.DocumentDragData( - SelectionManager.Views().map(dv => dv.props.Document), - dragDocView.props.dropAction + SelectionManager.Views.map(dv => dv.Document), + dragDocView._props.dropAction ); - dragData.offset = dragDocView.props.ScreenToLocalTransform().transformDirection(e.x - left, e.y - top); - dragData.moveDocument = dragDocView.props.moveDocument; - dragData.removeDocument = dragDocView.props.removeDocument; + dragData.offset = dragDocView.screenToContentsTransform().transformDirection(e.x - left, e.y - top); + dragData.moveDocument = dragDocView._props.moveDocument; + dragData.removeDocument = dragDocView._props.removeDocument; dragData.isDocDecorationMove = true; dragData.canEmbed = dragTitle; this._hidden = true; DragManager.StartDocumentDrag( - SelectionManager.Views().map(dv => dv.ContentDiv!), + SelectionManager.Views.map(dv => dv.ContentDiv!), dragData, e.x, e.y, @@ -237,9 +230,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P _deleteAfterIconify = false; _iconifyBatch: UndoManager.Batch | undefined; onCloseClick = (forceDeleteOrIconify: boolean | undefined) => { - const views = SelectionManager.Views() - .slice() - .filter(v => v && v.props.renderDepth > 0); + const views = SelectionManager.Views.filter(v => v && v._props.renderDepth > 0); if (forceDeleteOrIconify === false && this._iconifyBatch) return; this._deleteAfterIconify = forceDeleteOrIconify || this._iconifyBatch ? true : false; var iconifyingCount = views.length; @@ -247,14 +238,14 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P if ((force || --iconifyingCount === 0) && this._iconifyBatch) { if (this._deleteAfterIconify) { views.forEach(iconView => { - Doc.setNativeView(iconView.props.Document); - if (iconView.props.Document.activeFrame) { - iconView.props.Document.opacity = 0; // bcz: hacky ... allows inkMasks and other documents to be "turned off" without removing them from the animated collection which allows them to function properly in a presenation. + Doc.setNativeView(iconView.Document); + if (iconView.Document.activeFrame) { + iconView.Document.opacity = 0; // bcz: hacky ... allows inkMasks and other documents to be "turned off" without removing them from the animated collection which allows them to function properly in a presenation. } else { - iconView.props.removeDocument?.(iconView.props.Document); + iconView._props.removeDocument?.(iconView.Document); } }); - views.forEach(v => SelectionManager.DeselectView()); + views.forEach(SelectionManager.DeselectView); } this._iconifyBatch?.end(); this._iconifyBatch = undefined; @@ -270,47 +261,37 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P if (forceDeleteOrIconify) finished(forceDeleteOrIconify); else if (!this._deleteAfterIconify) views.forEach(dv => dv.iconify(finished)); }; + onMaximizeDown = (e: React.PointerEvent) => { - setupMoveUpEvents( - this, - e, - () => { - DragManager.StartWindowDrag?.(e, [SelectionManager.Views().slice(-1)[0].rootDoc]); - return true; - }, - emptyFunction, - this.onMaximizeClick, - false, - false - ); + setupMoveUpEvents(this, e, () => DragManager.StartWindowDrag?.(e, [SelectionManager.Views.lastElement().Document]) ?? false, emptyFunction, this.onMaximizeClick, false, false); + e.stopPropagation(); }; - onMaximizeClick = (e: any): void => { - const selectedDocs = SelectionManager.Views(); + const selectedDocs = SelectionManager.Views; if (selectedDocs.length) { if (e.ctrlKey) { // open an embedding in a new tab with Ctrl Key - CollectionDockingView.AddSplit(Doc.BestEmbedding(selectedDocs[0].rootDoc), OpenWhereMod.right); + CollectionDockingView.AddSplit(Doc.BestEmbedding(selectedDocs[0].Document), OpenWhereMod.right); } else if (e.shiftKey) { // open centered in a new workspace with Shift Key - const embedding = Doc.MakeEmbedding(selectedDocs[0].rootDoc); + const embedding = Doc.MakeEmbedding(selectedDocs[0].Document); embedding.embedContainer = undefined; - embedding.x = -embedding[Width]() / 2; - embedding.y = -embedding[Height]() / 2; + embedding.x = -NumCast(embedding._width) / 2; + embedding.y = -NumCast(embedding._height) / 2; CollectionDockingView.AddSplit(Docs.Create.FreeformDocument([embedding], { title: 'Tab for ' + embedding.title }), OpenWhereMod.right); } else if (e.altKey) { // open same document in new tab - CollectionDockingView.ToggleSplit(selectedDocs[0].rootDoc, OpenWhereMod.right); + CollectionDockingView.ToggleSplit(selectedDocs[0].Document, OpenWhereMod.right); } else { - var openDoc = selectedDocs[0].rootDoc; + var openDoc = selectedDocs[0].Document; if (openDoc.layout_fieldKey === 'layout_icon') { openDoc = DocListCast(openDoc.proto_embeddings).find(embedding => !embedding.embedContainer) ?? Doc.MakeEmbedding(openDoc); Doc.deiconifyView(openDoc); } - LightboxView.SetLightboxDoc( + LightboxView.Instance.SetLightboxDoc( openDoc, undefined, - selectedDocs.slice(1).map(view => view.rootDoc) + selectedDocs.slice(1).map(view => view.Document) ); } } @@ -318,94 +299,76 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P }; onIconifyClick = (): void => { - SelectionManager.Views().forEach(dv => dv?.iconify()); + SelectionManager.Views.forEach(dv => dv?.iconify()); SelectionManager.DeselectAll(); }; - onSelectorClick = () => SelectionManager.Views()?.[0]?.props.docViewPath?.().lastElement()?.select(false); + onSelectContainerDocClick = () => SelectionManager.Views?.[0]?.containerViewPath?.().lastElement()?.select(false); /** - * Handles setting up events when user clicks on the border radius editor - * @param e PointerEvent + * sets up events when user clicks on the border radius editor */ @action onRadiusDown = (e: React.PointerEvent): void => { - this._isRounding = DocumentView.Interacting = true; + SnappingManager.SetIsResizing(SelectionManager.Docs.lastElement()); + this._isRounding = true; this._resizeUndo = UndoManager.StartBatch('DocDecs set radius'); - // Call util move event function setupMoveUpEvents( - this, // target - e, // pointerEvent - (e, down) => { - const x = this.Bounds.x + 3; - const y = this.Bounds.y + 3; + this, + e, + e => { + const [x, y] = [this.Bounds.x + 3, this.Bounds.y + 3]; const maxDist = Math.min((this.Bounds.r - this.Bounds.x) / 2, (this.Bounds.b - this.Bounds.y) / 2); - let dist = Math.sqrt((e.clientX - x) * (e.clientX - x) + (e.clientY - y) * (e.clientY - y)); - if (e.clientX < x && e.clientY < y) dist = 0; - SelectionManager.Views() - .map(dv => dv.props.Document) - .map(doc => { - const docMax = Math.min(NumCast(doc.width) / 2, NumCast(doc.height) / 2); - const ratio = dist / maxDist; - const radius = Math.min(1, ratio) * docMax; - doc.layout_borderRounding = `${radius}px`; - }); + const dist = e.clientX < x && e.clientY < y ? 0 : Math.sqrt((e.clientX - x) * (e.clientX - x) + (e.clientY - y) * (e.clientY - y)); + SelectionManager.Docs.map(doc => { + const docMax = Math.min(NumCast(doc.width) / 2, NumCast(doc.height) / 2); + const radius = Math.min(1, dist / maxDist) * docMax; // set radius based on ratio of drag distance to half diagonal distance of bounding box + doc.layout_borderRounding = `${radius}px`; + }); return false; - }, // moveEvent + }, action(e => { - DocumentView.Interacting = this._isRounding = false; + SnappingManager.SetIsResizing(undefined); + this._isRounding = false; this._resizeUndo?.end(); }), // upEvent - e => {}, // clickEvent, + emptyFunction, true ); + e.stopPropagation(); }; @action onLockDown = (e: React.PointerEvent): void => { - // Call util move event function setupMoveUpEvents( - this, // target - e, // pointerEvent - returnFalse, // moveEvent - emptyFunction, // upEvent - e => { - UndoManager.RunInBatch( - () => - SelectionManager.Views().map(dv => { - dv.rootDoc._lockedPosition = !dv.rootDoc._lockedPosition; - dv.rootDoc._pointerEvents = dv.rootDoc._lockedPosition ? 'none' : undefined; - }), - 'toggleBackground' - ); - } // clickEvent + this, + e, + returnFalse, // don't care about move or up event, + emptyFunction, // just care about whether we get a click event + e => UndoManager.RunInBatch(() => SelectionManager.Docs.forEach(doc => Doc.toggleLockedPosition(doc)), 'toggleBackground') ); + e.stopPropagation(); }; setRotateCenter = (seldocview: DocumentView, rotCenter: number[]) => { - const newloccentern = seldocview.props.ScreenToLocalTransform().transformPoint(rotCenter[0], rotCenter[1]); + const newloccentern = seldocview.screenToContentsTransform().transformPoint(rotCenter[0], rotCenter[1]); const newlocenter = [newloccentern[0] - NumCast(seldocview.layoutDoc._width) / 2, newloccentern[1] - NumCast(seldocview.layoutDoc._height) / 2]; - const final = Utils.rotPt(newlocenter[0], newlocenter[1], -(NumCast(seldocview.rootDoc._rotation) / 180) * Math.PI); - seldocview.rootDoc.rotation_centerX = final.x / NumCast(seldocview.layoutDoc._width); - seldocview.rootDoc.rotation_centerY = final.y / NumCast(seldocview.layoutDoc._height); + const final = Utils.rotPt(newlocenter[0], newlocenter[1], -(NumCast(seldocview.Document._rotation) / 180) * Math.PI); + seldocview.Document.rotation_centerX = final.x / NumCast(seldocview.layoutDoc._width); + seldocview.Document.rotation_centerY = final.y / NumCast(seldocview.layoutDoc._height); }; @action onRotateCenterDown = (e: React.PointerEvent): void => { this._isRotating = true; - const seldocview = SelectionManager.Views()[0]; + const seldocview = SelectionManager.Views[0]; setupMoveUpEvents( this, e, - action((e: PointerEvent, down: number[], delta: number[]) => { - this.setRotateCenter(seldocview, [this.rotCenter[0] + delta[0], this.rotCenter[1] + delta[1]]); - return false; - }), // moveEvent - action(action(() => (this._isRotating = false))), // upEvent - action((e, doubleTap) => { - seldocview.rootDoc.rotation_centerX = 0; - seldocview.rootDoc.rotation_centerY = 0; - }) - ); + (e: PointerEvent, down: number[], delta: number[]) => // return false to keep getting events + this.setRotateCenter(seldocview, [this.rotCenter[0] + delta[0], this.rotCenter[1] + delta[1]]) as any as boolean, + action(e => (this._isRotating = false)), // upEvent + action(e => (seldocview.Document.rotation_centerX = seldocview.Document.rotation_centerY = 0)) + ); // prettier-ignore }; @action @@ -413,27 +376,27 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P this._isRotating = true; const rcScreen = { X: this.rotCenter[0], Y: this.rotCenter[1] }; const rotateUndo = UndoManager.StartBatch('drag rotation'); - const selectedInk = SelectionManager.Views().filter(i => i.ComponentView instanceof InkingStroke); + const selectedInk = SelectionManager.Views.filter(i => i.ComponentView instanceof InkingStroke); const centerPoint = this.rotCenter.slice(); const infos = new Map<Doc, { unrotatedDocPos: { x: number; y: number }; startRotCtr: { x: number; y: number }; accumRot: number }>(); - const seldocview = SelectionManager.Views()[0]; - SelectionManager.Views().forEach(dv => { - const accumRot = (NumCast(dv.rootDoc._rotation) / 180) * Math.PI; - const localRotCtr = dv.props.ScreenToLocalTransform().transformPoint(rcScreen.X, rcScreen.Y); - const localRotCtrOffset = [localRotCtr[0] - NumCast(dv.rootDoc.width) / 2, localRotCtr[1] - NumCast(dv.rootDoc.height) / 2]; + const seldocview = SelectionManager.Views[0]; + SelectionManager.Views.forEach(dv => { + const accumRot = (NumCast(dv.Document._rotation) / 180) * Math.PI; + const localRotCtr = dv.screenToViewTransform().transformPoint(rcScreen.X, rcScreen.Y); + const localRotCtrOffset = [localRotCtr[0] - NumCast(dv.Document.width) / 2, localRotCtr[1] - NumCast(dv.Document.height) / 2]; const startRotCtr = Utils.rotPt(localRotCtrOffset[0], localRotCtrOffset[1], -accumRot); - const unrotatedDocPos = { x: NumCast(dv.rootDoc.x) + localRotCtrOffset[0] - startRotCtr.x, y: NumCast(dv.rootDoc.y) + localRotCtrOffset[1] - startRotCtr.y }; - infos.set(dv.rootDoc, { unrotatedDocPos, startRotCtr, accumRot }); + const unrotatedDocPos = { x: NumCast(dv.Document.x) + localRotCtrOffset[0] - startRotCtr.x, y: NumCast(dv.Document.y) + localRotCtrOffset[1] - startRotCtr.y }; + infos.set(dv.Document, { unrotatedDocPos, startRotCtr, accumRot }); }); const infoRot = (angle: number, isAbs = false) => { - SelectionManager.Views().forEach( + SelectionManager.Views.forEach( action(dv => { - const { unrotatedDocPos, startRotCtr, accumRot } = infos.get(dv.rootDoc)!; + const { unrotatedDocPos, startRotCtr, accumRot } = infos.get(dv.Document)!; const endRotCtr = Utils.rotPt(startRotCtr.x, startRotCtr.y, isAbs ? angle : accumRot + angle); - infos.set(dv.rootDoc, { unrotatedDocPos, startRotCtr, accumRot: isAbs ? angle : accumRot + angle }); - dv.rootDoc.x = infos.get(dv.rootDoc)!.unrotatedDocPos.x - (endRotCtr.x - startRotCtr.x); - dv.rootDoc.y = infos.get(dv.rootDoc)!.unrotatedDocPos.y - (endRotCtr.y - startRotCtr.y); - dv.rootDoc._rotation = ((isAbs ? 0 : NumCast(dv.rootDoc._rotation)) + (angle * 180) / Math.PI) % 360; // Rotation between -360 and 360 + infos.set(dv.Document, { unrotatedDocPos, startRotCtr, accumRot: isAbs ? angle : accumRot + angle }); + dv.Document.x = infos.get(dv.Document)!.unrotatedDocPos.x - (endRotCtr.x - startRotCtr.x); + dv.Document.y = infos.get(dv.Document)!.unrotatedDocPos.y - (endRotCtr.y - startRotCtr.y); + dv.Document._rotation = ((isAbs ? 0 : NumCast(dv.Document._rotation)) + (angle * 180) / Math.PI) % 360; // Rotation between -360 and 360 }) ); }; @@ -453,7 +416,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P return false; }, // moveEvent action(() => { - const oldRotation = NumCast(seldocview.rootDoc._rotation); + const oldRotation = NumCast(seldocview.Document._rotation); const diff = oldRotation - Math.round(oldRotation / 45) * 45; if (Math.abs(diff) < 5) { if (selectedInk.length) { @@ -474,242 +437,175 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P @action onPointerDown = (e: React.PointerEvent): void => { - SnappingManager.SetIsResizing(SelectionManager.Docs().lastElement()); + SnappingManager.SetIsResizing(SelectionManager.Docs.lastElement()); // turns off pointer events on things like youtube videos and web pages so that dragging doesn't get "stuck" when cursor moves over them setupMoveUpEvents(this, e, this.onPointerMove, this.onPointerUp, emptyFunction); - DocumentView.Interacting = true; // turns off pointer events on things like youtube videos and web pages so that dragging doesn't get "stuck" when cursor moves over them + e.stopPropagation(); this._resizeHdlId = e.currentTarget.className; const bounds = e.currentTarget.getBoundingClientRect(); - this._offX = this._resizeHdlId.toLowerCase().includes('left') ? bounds.right - e.clientX : bounds.left - e.clientX; - this._offY = this._resizeHdlId.toLowerCase().includes('top') ? bounds.bottom - e.clientY : bounds.top - e.clientY; + this._offset = { x: this._resizeHdlId.toLowerCase().includes('left') ? bounds.right - e.clientX : bounds.left - e.clientX, y: this._resizeHdlId.toLowerCase().includes('top') ? bounds.bottom - e.clientY : bounds.top - e.clientY }; this._resizeUndo = UndoManager.StartBatch('drag resizing'); - this._snapX = e.pageX; - this._snapY = e.pageY; - const ffviewSet = new Set<CollectionFreeFormView>(); - SelectionManager.Views().forEach(docView => { - const ffview = docView.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView; - ffview && ffviewSet.add(ffview); - this._dragHeights.set(docView.layoutDoc, { start: NumCast(docView.rootDoc._height), lowest: NumCast(docView.rootDoc._height) }); - }); - Array.from(ffviewSet).map(ffview => ffview.dragStarting(false, false)); + this._snapPt = { x: e.pageX, y: e.pageY }; + SelectionManager.Views.forEach(docView => docView.CollectionFreeFormView?.dragStarting(false, false)); }; + projectDragToAspect = (e: PointerEvent, docView: DocumentView, fixedAspect: number) => { + // need to generalize for bl and tr drag handles + const project = (p: number[], a: number[], b: number[]) => { + const atob = [b[0] - a[0], b[1] - a[1]]; + const atop = [p[0] - a[0], p[1] - a[1]]; + const len = atob[0] * atob[0] + atob[1] * atob[1]; + let dot = atop[0] * atob[0] + atop[1] * atob[1]; + const t = dot / len; + dot = (b[0] - a[0]) * (p[1] - a[1]) - (b[1] - a[1]) * (p[0] - a[0]); + return [a[0] + atob[0] * t, a[1] + atob[1] * t]; + }; + const tl = docView.screenToContentsTransform().inverse().transformPoint(0, 0); + return project([e.clientX + this._offset.x, e.clientY + this._offset.y], tl, [tl[0] + fixedAspect, tl[1] + 1]); + }; onPointerMove = (e: PointerEvent, down: number[], move: number[]): boolean => { - const first = SelectionManager.Views()[0]; - const effectiveAcl = GetEffectiveAcl(first.rootDoc); + const first = SelectionManager.Views[0]; + const effectiveAcl = GetEffectiveAcl(first.Document); if (!(effectiveAcl == AclAdmin || effectiveAcl == AclEdit || effectiveAcl == AclAugment)) return false; if (!first) return false; - let thisPt = { x: e.clientX - this._offX, y: e.clientY - this._offY }; var fixedAspect = Doc.NativeAspect(first.layoutDoc); + const dragHdl = this._resizeHdlId.split(' ')[0].replace('documentDecorations-', '').replace('Resizer', ''); + + const thisPt = // do snapping of drag point + fixedAspect && (dragHdl === 'bottomRight' || dragHdl === 'topLeft') + ? DragManager.snapDragAspect(this.projectDragToAspect(e, first, fixedAspect), fixedAspect) + : DragManager.snapDrag(e, -this._offset.x, -this._offset.y, this._offset.x, this._offset.y); + + const { scale, refPt } = this.getResizeVals(thisPt, dragHdl); + + !this._interactionLock && runInAction(async () => { // resize selected docs if we're not in the middle of a resize (ie, throttle input events to frame rate) + this._interactionLock = true; + this._snapPt = thisPt; + e.ctrlKey && (SelectionManager.Views.forEach(docView => !Doc.NativeHeight(docView.Document) && docView.toggleNativeDimensions())); + const fixedAspect = SelectionManager.Docs.some(this.hasFixedAspect); + const scaleAspect = {x:scale.x === 1 && fixedAspect ? scale.y : scale.x, y: scale.x !== 1 && fixedAspect ? scale.x : scale.y}; + SelectionManager.Views.forEach(docView => + this.resizeView(docView, refPt, scaleAspect, { dragHdl, ctrlKey:e.ctrlKey })); // prettier-ignore + await new Promise<any>(res => setTimeout(() => res(this._interactionLock = undefined))); + }); // prettier-ignore + + return false; + }; + + // + // determines how much to resize, and determines the resize reference point + // + getResizeVals = (thisPt: { x: number; y: number }, dragHdl: string) => { + const [w, h] = [this.Bounds.r - this.Bounds.x, this.Bounds.b - this.Bounds.y]; + const [moveX, moveY] = [thisPt.x - this._snapPt.x, thisPt.y - this._snapPt.y]; + switch (dragHdl) { + case 'topLeft': return { scale: { x: 1 - moveX / w, y: 1 -moveY / h }, refPt: [this.Bounds.r, this.Bounds.b] }; + case 'topRight': return { scale: { x: 1 + moveX / w, y: 1 -moveY / h }, refPt: [this.Bounds.x, this.Bounds.b] }; + case 'top': return { scale: { x: 1, y: 1 -moveY / h }, refPt: [this.Bounds.x, this.Bounds.b] }; + case 'left': return { scale: { x: 1 - moveX / w, y: 1 }, refPt: [this.Bounds.r, this.Bounds.y] }; + case 'bottomLeft': return { scale: { x: 1 - moveX / w, y: 1 + moveY / h }, refPt: [this.Bounds.r, this.Bounds.y] }; + case 'right': return { scale: { x: 1 + moveX / w, y: 1 }, refPt: [this.Bounds.x, this.Bounds.y] }; + case 'bottomRight':return { scale: { x: 1 + moveX / w, y: 1 + moveY / h }, refPt: [this.Bounds.x, this.Bounds.y] }; + case 'bottom': return { scale: { x: 1, y: 1 + moveY / h }, refPt: [this.Bounds.x, this.Bounds.y] }; + default: return { scale: { x: 1, y: 1 }, refPt: [this.Bounds.x, this.Bounds.y] }; + } // prettier-ignore + }; - const resizeHdl = this._resizeHdlId.split(' ')[0]; - if (fixedAspect && (resizeHdl === 'documentDecorations-bottomRightResizer' || resizeHdl === 'documentDecorations-topLeftResizer')) { - // need to generalize for bl and tr drag handles - const project = (p: number[], a: number[], b: number[]) => { - const atob = [b[0] - a[0], b[1] - a[1]]; - const atop = [p[0] - a[0], p[1] - a[1]]; - const len = atob[0] * atob[0] + atob[1] * atob[1]; - let dot = atop[0] * atob[0] + atop[1] * atob[1]; - const t = dot / len; - dot = (b[0] - a[0]) * (p[1] - a[1]) - (b[1] - a[1]) * (p[0] - a[0]); - return [a[0] + atob[0] * t, a[1] + atob[1] * t]; - }; - const tl = first.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); - const drag = project([e.clientX + this._offX, e.clientY + this._offY], tl, [tl[0] + fixedAspect, tl[1] + 1]); - thisPt = DragManager.snapDragAspect(drag, fixedAspect); + // + // determines if anything being dragged directly or via a group has a fixed aspect ratio (in which case we resize uniformly) + // + hasFixedAspect = (doc: Doc): boolean => (doc.isGroup ? DocListCast(doc.data).some(this.hasFixedAspect) : !BoolCast(doc.layout_nativeDimEditable)); + + // + // resize a single DocumentView about the specified reference point, possibly setting/updating the native dimensions of the Doc + // + resizeView = (docView: DocumentView, refPt: number[], scale: { x: number; y: number }, opts: { dragHdl: string; ctrlKey: boolean }) => { + const doc = docView.Document; + if (doc.isGroup) { + DocListCast(doc.data) + .map(member => DocumentManager.Instance.getDocumentView(member, docView)!) + .forEach(member => this.resizeView(member, refPt, scale, opts)); + doc.xPadding = NumCast(doc.xPadding) * scale.x; + doc.yPadding = NumCast(doc.yPadding) * scale.y; } else { - thisPt = DragManager.snapDrag(e, -this._offX, -this._offY, this._offX, this._offY); - } + const refCent = docView.screenToViewTransform().transformPoint(refPt[0], refPt[1]); // fixed reference point for resize (ie, a point that doesn't move) + const [nwidth, nheight] = [docView.nativeWidth, docView.nativeHeight]; + const [initWidth, initHeight] = [NumCast(doc._width, 1), NumCast(doc._height)]; + + const modifyNativeDim = + (opts.ctrlKey && doc.layout_nativeDimEditable) || // e.g., PDF or web page + (doc.layout_reflowHorizontal && opts.dragHdl !== 'bottom' && opts.dragHdl !== 'top') || // eg rtf or some web pages + (doc.layout_reflowVertical && (opts.dragHdl === 'bottom' || opts.dragHdl === 'top' || opts.ctrlKey)); // eg rtf, web, pdf + if (nwidth && nheight && !modifyNativeDim) { + // eg., dragging right resizer on PDF -- enforce native dimensions because not expliclty overridden with ctrl or bottom resize drag + scale.x === 1 ? (scale.x = scale.y) : (scale.y = scale.x); + } + + if (['right', 'left'].includes(opts.dragHdl) && modifyNativeDim && Doc.NativeWidth(doc)) { + const setData = Doc.NativeWidth(doc[DocData]) === doc.nativeWidth; + doc.nativeWidth = scale.x * Doc.NativeWidth(doc); + if (setData) Doc.SetNativeWidth(doc[DocData], NumCast(doc.nativeWidth)); + if (doc.layout_reflowVertical && !NumCast(doc.nativeHeight)) { + doc._nativeHeight = (initHeight / initWidth) * nwidth; // initializes the nativeHeight for a PDF + } + } + if (['bottom', 'top'].includes(opts.dragHdl) && modifyNativeDim && Doc.NativeHeight(doc)) { + const setData = Doc.NativeHeight(doc[DocData]) === doc.nativeHeight; + doc._nativeHeight = scale.y * Doc.NativeHeight(doc); + if (setData) Doc.SetNativeHeight(doc[DocData], NumCast(doc._nativeHeight)); + } + + doc._width = Math.max(1, NumCast(doc._width) * scale.x); + doc._height = Math.max(1, NumCast(doc._height) * scale.y); + const { deltaX, deltaY } = this.realignRefPt(doc, refCent, initWidth, initHeight); + doc.x = NumCast(doc.x) + deltaX; + doc.y = NumCast(doc.y) + deltaY; - move[0] = thisPt.x - this._snapX; - move[1] = thisPt.y - this._snapY; - this._snapX = thisPt.x; - this._snapY = thisPt.y; - let dragBottom = false, - dragRight = false, - dragBotRight = false, - dragTop = false; - let dXin = 0, - dYin = 0, - dWin = 0, - dHin = 0; - switch (this._resizeHdlId.split(' ')[0]) { - case '': - break; - case 'documentDecorations-topLeftResizer': - dXin = -1; - dYin = -1; - dWin = -move[0]; - dHin = -move[1]; - break; - case 'documentDecorations-topRightResizer': - dWin = move[0]; - dYin = -1; - dHin = -move[1]; - break; - case 'documentDecorations-topResizer': - dYin = -1; - dHin = -move[1]; - dragTop = true; - break; - case 'documentDecorations-bottomLeftResizer': - dXin = -1; - dWin = -move[0]; - dHin = move[1]; - break; - case 'documentDecorations-bottomRightResizer': - dWin = move[0]; - dHin = move[1]; - dragBotRight = true; - break; - case 'documentDecorations-bottomResizer': - dHin = move[1]; - dragBottom = true; - break; - case 'documentDecorations-leftResizer': - dXin = -1; - dWin = -move[0]; - break; - case 'documentDecorations-rightResizer': - dWin = move[0]; - dragRight = true; - break; + doc._layout_modificationDate = new DateField(); + scale.y !== 1 && (doc._layout_autoHeight = undefined); } + }; - const isGroup = first.rootDoc._isGroup ? first.rootDoc : undefined; - const scaleViews = isGroup ? DocListCast(isGroup.data).map(doc => DocumentManager.Instance.getFirstDocumentView(doc)!) : SelectionManager.Views(); - const aggBounds = aggregateBounds(scaleViews.map(view => view.rootDoc) as any, 0, 0); - const refWidth = aggBounds.r - aggBounds.x; - const refHeight = aggBounds.b - aggBounds.y; - const scaleRefPt = first.props - .ScreenToLocalTransform() - .inverse() - .transformPoint( - NumCast(isGroup?._xPadding) + (dXin ? refWidth : 0), // - NumCast(isGroup?._yPadding) + (dYin ? refHeight : 0) - ); - scaleViews.forEach( - action((docView: DocumentView) => { - if (e.ctrlKey && !Doc.NativeHeight(docView.props.Document)) docView.toggleNativeDimensions(); - if (dXin !== 0 || dYin !== 0 || dWin !== 0 || dHin !== 0) { - const doc = docView.rootDoc; - const refCent = docView.props.ScreenToLocalTransform().transformPoint(scaleRefPt[0], scaleRefPt[1]); - - if (doc.nativeHeightUnfrozen && !NumCast(doc.nativeHeight) && doc._nativeWidth !== undefined) { - doc._nativeHeight = (NumCast(doc._height) / NumCast(doc._width, 1)) * docView.nativeWidth; - } - const nwidth = docView.nativeWidth; - const nheight = docView.nativeHeight; - const docwidth = NumCast(doc._width); - let docheight = (hgt => (!hgt || isNaN(hgt) ? 20 : hgt))(NumCast(doc._height) || (nheight / nwidth) * docwidth); - let dW = docwidth * (dWin / refWidth); - let dH = docheight * (dHin / refHeight); - const scale = docView.props.ScreenToLocalTransform().Scale; - const modifyNativeDim = (e.ctrlKey && doc.nativeDimModifiable) || (doc.layout_forceReflow && !dragBottom && !dragTop) || (doc.nativeHeightUnfrozen && (dragBottom || dragTop || e.ctrlKey)); - if (nwidth && nheight) { - if (nwidth / nheight !== docwidth / docheight && !dragBottom && !dragTop) { - docheight = (nheight / nwidth) * docwidth; - } - if (modifyNativeDim && !dragBottom && !dragTop) { - // ctrl key enables modification of the nativeWidth or nativeHeight durin the interaction - if (Math.abs(dW) > Math.abs(dH)) dH = (dW * nheight) / nwidth; - else dW = (dH * nwidth) / nheight; - } - } - let actualdW = Math.max(docwidth + dW * scale, 20); - let actualdH = Math.max(docheight + dH * scale, 20); - let dX = !dWin ? 0 : (scale * refCent[0] * -dWin) / refWidth; - let dY = !dHin ? 0 : (scale * refCent[1] * -dHin) / refHeight; - const preserveNativeDim = !doc._nativeHeightUnfrozen && !doc._nativeDimModifiable; - const fixedAspect = nwidth && nheight && (!doc._layout_fitWidth || preserveNativeDim || e.ctrlKey || doc.nativeHeightUnfrozen || doc.nativeDimModifiable); - if (fixedAspect) { - if ((Math.abs(dW) > Math.abs(dH) && ((!dragBottom && !dragTop) || !modifyNativeDim)) || dragRight) { - if (dragRight && modifyNativeDim) { - if (Doc.NativeWidth(doc)) { - doc._nativeWidth = (actualdW / (docwidth || 1)) * Doc.NativeWidth(doc); - } - } else { - if (!doc._layout_fitWidth || preserveNativeDim) { - actualdH = (nheight / nwidth) * actualdW; - dYin && (dY = -dW * scale * (nheight / nwidth)); - doc._height = actualdH; - } else if (!modifyNativeDim || dragBotRight) { - doc._height = actualdH; - } - } - doc._width = actualdW; - } else { - if ((dragBottom || dragTop) && (modifyNativeDim || (docView.layoutDoc.nativeHeightUnfrozen && docView.layoutDoc._layout_fitWidth))) { - // frozen web pages, PDFs, and some RTFS have frozen nativewidth/height. But they are marked to allow their nativeHeight - // to be explicitly modified with fitWidth and vertical resizing. (ie, with fitWidth they can't grow horizontally to match - // a vertical resize so it makes more sense to change their nativeheight even if the ctrl key isn't used) - doc._nativeHeight = (actualdH / (docheight || 1)) * Doc.NativeHeight(doc); - doc._layout_autoHeight = false; - } else { - if (!doc._layout_fitWidth || preserveNativeDim) { - actualdW = (nwidth / nheight) * actualdH; - dXin && (dX = -dH * scale * (nwidth / nheight)); - doc._width = actualdW; - } else if (!modifyNativeDim || dragBotRight) { - doc._width = actualdW; - } - } - if (!modifyNativeDim) { - actualdH = (nheight / nwidth) * NumCast(doc._width); //, actualdH); - } - doc._height = actualdH; - } - } else { - const rotCtr = [docwidth / 2, docheight / 2]; - const tlRotated = Utils.rotPt(-rotCtr[0], -rotCtr[1], (NumCast(doc._rotation) / 180) * Math.PI); - - const maxHeight = doc.nativeHeightUnfrozen || !nheight ? 0 : Math.max(nheight, NumCast(doc.scrollHeight, NumCast(doc[docView.LayoutFieldKey + '_scrollHeight']))) * docView.NativeDimScaling(); - dH && (doc._height = actualdH > maxHeight && maxHeight ? maxHeight : actualdH); - dW && (doc._width = actualdW); - dH && (doc._layout_autoHeight = false); - - const rotCtr2 = [NumCast(doc._width) / 2, NumCast(doc._height) / 2]; - const tlRotated2 = Utils.rotPt(-rotCtr2[0], -rotCtr2[1], (NumCast(doc._rotation) / 180) * Math.PI); - doc.x = NumCast(doc.x) + tlRotated.x + rotCtr[0] - (tlRotated2.x + rotCtr2[0]); // doc shifts by amount topleft moves because rotation is about center of doc - doc.y = NumCast(doc.y) + tlRotated.y + rotCtr[1] - (tlRotated2.y + rotCtr2[1]); - } - doc.x = NumCast(doc.x) + dX; - doc.y = NumCast(doc.y) + dY; - doc._layout_modificationDate = new DateField(); - } - const val = this._dragHeights.get(docView.layoutDoc); - if (val) this._dragHeights.set(docView.layoutDoc, { start: val.start, lowest: Math.min(val.lowest, NumCast(docView.layoutDoc._height)) }); - }) + // This realigns the doc's resize reference point with where it was before resizing it. + // This is needed, because the transformation for doc's with a rotation is screwy: + // the top left of the doc is the 'origin', but the rotation happens about the center of the Doc. + // So resizing a rotated doc will cause it to shift -- this counteracts that shift by determine how + // the reference points shifted, and returning a translation to restore the reference point. + realignRefPt = (doc: Doc, refCent: number[], initWidth: number, initHeight: number) => { + const refCentPct = [refCent[0] / initWidth, refCent[1] / initHeight]; + const rotRefStart = Utils.rotPt( + refCent[0] - initWidth / 2, // rotate reference pointe before scaling + refCent[1] - initHeight / 2, + (NumCast(doc._rotation) / 180) * Math.PI ); - return false; + const rotRefEnd = Utils.rotPt( + refCentPct[0] * NumCast(doc._width) - NumCast(doc._width) / 2, // rotate reference point after scaling + refCentPct[1] * NumCast(doc._height) - NumCast(doc._height) / 2, + (NumCast(doc._rotation) / 180) * Math.PI + ); + return { + deltaX: rotRefStart.x + initWidth / 2 - (rotRefEnd.x + NumCast(doc._width) / 2), // + deltaY: rotRefStart.y + initHeight / 2 - (rotRefEnd.y + NumCast(doc._height) / 2), + }; }; @action onPointerUp = (e: PointerEvent): void => { SnappingManager.SetIsResizing(undefined); + SnappingManager.clearSnapLines(); this._resizeHdlId = ''; - DocumentView.Interacting = false; this._resizeUndo?.end(); - SnappingManager.clearSnapLines(); // detect layout_autoHeight gesture and apply - SelectionManager.Views() - .map(docView => ({ doc: docView.layoutDoc, hgts: this._dragHeights.get(docView.layoutDoc) })) - .filter(pair => pair.hgts && pair.hgts.lowest < pair.hgts.start && pair.hgts.lowest <= 20) - .forEach(pair => (pair.doc._layout_autoHeight = true)); + SelectionManager.Docs.forEach(doc => NumCast(doc._height) < 20 && (doc._layout_autoHeight = true)); //need to change points for resize, or else rotation/control points will fail. this._inkDragDocs .map(oldbds => ({ oldbds, inkPts: Cast(oldbds.doc.data, InkField)?.inkData || [] })) .forEach(({ oldbds: { doc, x, y, width, height }, inkPts }) => { - Doc.GetProto(doc).data = new InkField( - inkPts.map( - ( - ipt // (new x — oldx) + newWidth * (oldxpoint /oldWidth) - ) => ({ - X: NumCast(doc.x) - x + (NumCast(doc.width) * ipt.X) / width, - Y: NumCast(doc.y) - y + (NumCast(doc.height) * ipt.Y) / height, - }) - ) - ); + doc[DocData].data = new InkField(inkPts.map( + (ipt) => ({// (new x — oldx) + newWidth * (oldxpoint /oldWidth) + X: NumCast(doc.x) - x + (NumCast(doc.width) * ipt.X) / width, + Y: NumCast(doc.y) - y + (NumCast(doc.height) * ipt.Y) / height, + }))); // prettier-ignore Doc.SetNativeWidth(doc, undefined); Doc.SetNativeHeight(doc, undefined); }); @@ -717,74 +613,57 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P @computed get selectionTitle(): string { - if (SelectionManager.Views().length === 1) { - const selected = SelectionManager.Views()[0]; - if (selected.ComponentView?.getTitle?.()) { - return selected.ComponentView.getTitle(); - } + if (SelectionManager.Views.length === 1) { + const selected = SelectionManager.Views[0]; if (this._titleControlString.startsWith('=')) { - return ScriptField.MakeFunction(this._titleControlString.substring(1), { doc: Doc.name })!.script.run({ self: selected.rootDoc, this: selected.layoutDoc }, console.log).result?.toString() || ''; + return ScriptField.MakeFunction(this._titleControlString.substring(1), { doc: Doc.name })!.script.run({ self: selected.Document, this: selected.layoutDoc }, console.log).result?.toString() || ''; } if (this._titleControlString.startsWith('#')) { - return Field.toString(selected.props.Document[this._titleControlString.substring(1)] as Field) || '-unset-'; + return Field.toString(selected.Document[this._titleControlString.substring(1)] as Field) || '-unset-'; } return this._accumulatedTitle; } - return SelectionManager.Views().length > 1 ? '-multiple-' : '-unset-'; + return SelectionManager.Views.length > 1 ? '-multiple-' : '-unset-'; } - @computed get hasIcons() { - return SelectionManager.Views().some(docView => docView.rootDoc.layout_fieldKey === 'layout_icon'); - } - - @observable _showRotCenter = false; - @observable _rotCenter = [0, 0]; @computed get rotCenter() { - if (SelectionManager.Views().length) { - const seldocview = SelectionManager.Views()[0]; - const loccenter = Utils.rotPt( - NumCast(seldocview.rootDoc.rotation_centerX) * NumCast(seldocview.layoutDoc._width), - NumCast(seldocview.rootDoc.rotation_centerY) * NumCast(seldocview.layoutDoc._height), - (NumCast(seldocview.rootDoc._rotation) / 180) * Math.PI - ); - return seldocview.props - .ScreenToLocalTransform() - .inverse() - .transformPoint(loccenter.x + NumCast(seldocview.layoutDoc._width) / 2, loccenter.y + NumCast(seldocview.layoutDoc._height) / 2); + const lastView = SelectionManager.Views.lastElement(); + if (lastView) { + const invXf = lastView.screenToContentsTransform().inverse(); + const seldoc = lastView.layoutDoc; + const loccenter = Utils.rotPt(NumCast(seldoc.rotation_centerX) * NumCast(seldoc._width), NumCast(seldoc.rotation_centerY) * NumCast(seldoc._height), invXf.Rotate); + return invXf.transformPoint(loccenter.x + NumCast(seldoc._width) / 2, loccenter.y + NumCast(seldoc._height) / 2); } return this._rotCenter; } - @observable _showNothing = true; - render() { const { b, r, x, y } = this.Bounds; - const bounds = { b, r, x, y }; - const seldocview = SelectionManager.Views().lastElement(); - if (SnappingManager.GetIsDragging() || bounds.r - bounds.x < 1 || bounds.x === Number.MAX_VALUE || !seldocview || this._hidden || isNaN(bounds.r) || isNaN(bounds.b) || isNaN(bounds.x) || isNaN(bounds.y)) { + const seldocview = SelectionManager.Views.lastElement(); + if (SnappingManager.IsDragging || r - x < 1 || x === Number.MAX_VALUE || !seldocview || this._hidden || isNaN(r) || isNaN(b) || isNaN(x) || isNaN(y)) { setTimeout(action(() => (this._showNothing = true))); return null; } // sharing - const acl = GetEffectiveAcl(!this.showLayoutAcl ? Doc.GetProto(seldocview.rootDoc) : seldocview.rootDoc); + const acl = GetEffectiveAcl(!this._showLayoutAcl ? Doc.GetProto(seldocview.Document) : seldocview.Document); const docShareMode = HierarchyMapping.get(acl)!.name; const shareMode = StrCast(docShareMode); var shareSymbolIcon = ReverseHierarchyMap.get(shareMode)?.image; // hide the decorations if the parent chooses to hide it or if the document itself hides it - const hideDecorations = SnappingManager.GetIsResizing() || seldocview.props.hideDecorations || seldocview.rootDoc.layout_hideDecorations; + const hideDecorations = SnappingManager.IsResizing || seldocview._props.hideDecorations || seldocview.Document.layout_hideDecorations; const hideResizers = - ![AclAdmin, AclEdit, AclAugment].includes(GetEffectiveAcl(seldocview.rootDoc)) || hideDecorations || seldocview.props.hideResizeHandles || seldocview.rootDoc.layout_hideResizeHandles || this._isRounding || this._isRotating; - const hideTitle = this._showNothing || hideDecorations || seldocview.props.hideDecorationTitle || seldocview.rootDoc.layout_hideDecorationTitle || this._isRounding || this._isRotating; - const hideDocumentButtonBar = hideDecorations || seldocview.props.hideDocumentButtonBar || seldocview.rootDoc.layout_hideDocumentButtonBar || this._isRounding || this._isRotating; + ![AclAdmin, AclEdit, AclAugment].includes(GetEffectiveAcl(seldocview.Document)) || hideDecorations || seldocview._props.hideResizeHandles || seldocview.Document.layout_hideResizeHandles || this._isRounding || this._isRotating; + const hideTitle = this._showNothing || hideDecorations || seldocview._props.hideDecorationTitle || seldocview.Document.layout_hideDecorationTitle || this._isRounding || this._isRotating; + const hideDocumentButtonBar = hideDecorations || seldocview._props.hideDocumentButtonBar || seldocview.Document.layout_hideDocumentButtonBar || this._isRounding || this._isRotating; // if multiple documents have been opened at the same time, then don't show open button const hideOpenButton = this._showNothing || hideDecorations || - seldocview.props.hideOpenButton || - seldocview.rootDoc.layout_hideOpenButton || - SelectionManager.Views().some(docView => docView.rootDoc._dragOnlyWithinContainer || docView.rootDoc.isGroup || docView.rootDoc.layout_hideOpenButton) || + seldocview._props.hideOpenButton || + seldocview.Document.layout_hideOpenButton || + SelectionManager.Views.some(docView => docView.Document._dragOnlyWithinContainer || docView.Document.isGroup || docView.Document.layout_hideOpenButton) || this._isRounding || this._isRotating; const hideDeleteButton = @@ -792,11 +671,11 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P hideDecorations || this._isRounding || this._isRotating || - seldocview.props.hideDeleteButton || - seldocview.rootDoc.hideDeleteButton || - SelectionManager.Views().some(docView => { - const collectionAcl = docView.props.docViewPath()?.lastElement() ? GetEffectiveAcl(docView.props.docViewPath().lastElement().rootDoc[DocData]) : AclEdit; - return collectionAcl !== AclAdmin && collectionAcl !== AclEdit && GetEffectiveAcl(docView.rootDoc) !== AclAdmin; + seldocview._props.hideDeleteButton || + seldocview.Document.hideDeleteButton || + SelectionManager.Views.some(docView => { + const collectionAcl = docView.containerViewPath?.()?.lastElement() ? GetEffectiveAcl(docView.containerViewPath?.().lastElement().dataDoc) : AclEdit; + return collectionAcl !== AclAdmin && collectionAcl !== AclEdit && GetEffectiveAcl(docView.Document) !== AclAdmin; }); const topBtn = (key: string, icon: string, pointerDown: undefined | ((e: React.PointerEvent) => void), click: undefined | ((e: any) => void), title: string) => ( <Tooltip key={key} title={<div className="dash-tooltip">{title}</div>} placement="top"> @@ -806,24 +685,15 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P </Tooltip> ); - const leftBounds = this.props.boundsLeft; - const topBounds = LightboxView.LightboxDoc ? 0 : this.props.boundsTop; - bounds.x = Math.max(leftBounds, bounds.x - this._resizeBorderWidth / 2) + this._resizeBorderWidth / 2; - bounds.y = Math.max(topBounds, bounds.y - this._resizeBorderWidth / 2 - this._titleHeight) + this._resizeBorderWidth / 2 + this._titleHeight; - const borderRadiusDraggerWidth = 15; - bounds.r = Math.max(bounds.x, Math.max(leftBounds, Math.min(window.innerWidth, bounds.r + borderRadiusDraggerWidth + this._resizeBorderWidth / 2) - this._resizeBorderWidth / 2 - borderRadiusDraggerWidth)); - bounds.b = Math.max(bounds.y, Math.max(topBounds, Math.min(window.innerHeight, bounds.b + this._resizeBorderWidth / 2 + this._linkBoxHeight) - this._resizeBorderWidth / 2 - this._linkBoxHeight)); - - const useLock = bounds.r - bounds.x > 135 && seldocview.props.CollectionFreeFormDocumentView; - const useRotation = !hideResizers && seldocview.rootDoc.type !== DocumentType.EQUATION && seldocview.props.CollectionFreeFormDocumentView; // when do we want an object to not rotate? - const rotation = SelectionManager.Views().length == 1 ? NumCast(seldocview.rootDoc._rotation) : 0; - - const resizerScheme = ''; + const bounds = this.ClippedBounds; + const useLock = bounds.r - bounds.x > 135; + const useRotation = !hideResizers && seldocview.Document.type !== DocumentType.EQUATION && seldocview.CollectionFreeFormDocumentView; // when do we want an object to not rotate? + const rotation = SelectionManager.Views.length == 1 ? seldocview.screenToContentsTransform().inverse().RotateDeg : 0; // Radius constants const useRounding = seldocview.ComponentView instanceof ImageBox || seldocview.ComponentView instanceof FormattedTextBox || seldocview.ComponentView instanceof CollectionFreeFormView; - const borderRadius = numberValue(Cast(seldocview.rootDoc.layout_borderRounding, 'string', null)); - const docMax = Math.min(NumCast(seldocview.rootDoc.width) / 2, NumCast(seldocview.rootDoc.height) / 2); + const borderRadius = numberValue(Cast(seldocview.Document.layout_borderRounding, 'string', null)); + const docMax = Math.min(NumCast(seldocview.Document.width) / 2, NumCast(seldocview.Document.height) / 2); const maxDist = Math.min((this.Bounds.r - this.Bounds.x) / 2, (this.Bounds.b - this.Bounds.y) / 2); const radiusHandle = (borderRadius / docMax) * maxDist; const radiusHandleLocation = Math.min(radiusHandle, maxDist); @@ -862,7 +732,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P onPointerDown={e => e.stopPropagation()} /> ) : ( - <div className="documentDecorations-title" key="title" onPointerDown={e => e.stopPropagation}> + <div className="documentDecorations-title" key="title"> {hideTitle ? null : ( <span className="documentDecorations-titleSpan" onPointerDown={this.onTitleDown}> {this.selectionTitle} @@ -871,14 +741,16 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P {sharingMenu} {!useLock ? null : ( <Tooltip key="lock" title={<div className="dash-tooltip">toggle ability to interact with document</div>} placement="top"> - <div className="documentDecorations-lock" style={{ color: seldocview.rootDoc._lockedPosition ? 'red' : undefined }} onPointerDown={this.onLockDown} onContextMenu={e => e.preventDefault()}> + <div className="documentDecorations-lock" style={{ color: seldocview.Document._lockedPosition ? 'red' : undefined }} onPointerDown={this.onLockDown}> <FontAwesomeIcon size="sm" icon="lock" /> </div> </Tooltip> )} </div> ); - const freeformDoc = SelectionManager.Views().some(v => v.props.CollectionFreeFormDocumentView?.()); + const centery = hideTitle ? 0 : this._titleHeight; + const transformOrigin = `${50}% calc(50% + ${centery / 2}px)`; + const freeformDoc = SelectionManager.Views.some(v => v.CollectionFreeFormDocumentView); return ( <div className="documentDecorations" style={{ display: this._showNothing && !freeformDoc ? 'none' : undefined }}> <div @@ -888,30 +760,27 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P height: bounds.b - bounds.y + this._resizeBorderWidth + 'px', left: bounds.x - this._resizeBorderWidth / 2, top: bounds.y - this._resizeBorderWidth / 2, - pointerEvents: DocumentDecorations.Instance.AddToSelection || DocumentView.Interacting ? 'none' : 'all', - display: SelectionManager.Views().length <= 1 || hideDecorations ? 'none' : undefined, + transformOrigin, + background: SnappingManager.ShiftKey ? undefined : 'yellow', + pointerEvents: SnappingManager.ShiftKey || SnappingManager.IsResizing ? 'none' : 'all', + display: SelectionManager.Views.length <= 1 || hideDecorations ? 'none' : undefined, + transform: `rotate(${rotation}deg)`, }} onPointerDown={this.onBackgroundDown} - onContextMenu={e => { - e.preventDefault(); - e.stopPropagation(); - }} /> {bounds.r - bounds.x < 15 && bounds.b - bounds.y < 15 ? null : ( <div> <div className={`documentDecorations-container ${this._showNothing ? 'showNothing' : ''}`} - key="container" style={{ transform: `translate(${bounds.x - this._resizeBorderWidth / 2}px, ${bounds.y - this._resizeBorderWidth / 2 - this._titleHeight}px) rotate(${rotation}deg)`, - transformOrigin: `50% calc(50% + 10px)`, + transformOrigin, width: bounds.r - bounds.x + this._resizeBorderWidth + 'px', height: bounds.b - bounds.y + this._resizeBorderWidth + (this._showNothing ? 0 : this._titleHeight) + 'px', }}> <div className="documentDecorations-topbar" style={{ - color: 'black', display: hideDeleteButton && hideTitle && hideOpenButton ? 'none' : undefined, }} onPointerDown={this.onContainerDown}> @@ -922,41 +791,36 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P </div> {hideResizers ? null : ( <> - <div key="tl" className={`documentDecorations-topLeftResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={e => e.preventDefault()} /> - <div key="t" className={`documentDecorations-topResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={e => e.preventDefault()} /> - <div key="tr" className={`documentDecorations-topRightResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={e => e.preventDefault()} /> - <div key="l" className={`documentDecorations-leftResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={e => e.preventDefault()} /> - <div key="c" className={`documentDecorations-centerCont ${resizerScheme}`}></div> - <div key="r" className={`documentDecorations-rightResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={e => e.preventDefault()} /> - <div key="bl" className={`documentDecorations-bottomLeftResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={e => e.preventDefault()} /> - <div key="b" className={`documentDecorations-bottomResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={e => e.preventDefault()} /> - <div key="br" className={`documentDecorations-bottomRightResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={e => e.preventDefault()} /> - - {seldocview.props.renderDepth <= 1 || !seldocview.props.docViewPath().lastElement() ? null : topBtn('selector', 'arrow-alt-circle-up', undefined, this.onSelectorClick, 'tap to select containing document')} + <div key="tl" className="documentDecorations-topLeftResizer" onPointerDown={this.onPointerDown} /> + <div key="t" className="documentDecorations-topResizer" onPointerDown={this.onPointerDown} /> + <div key="tr" className="documentDecorations-topRightResizer" onPointerDown={this.onPointerDown} /> + <div key="l" className="documentDecorations-leftResizer" onPointerDown={this.onPointerDown} /> + <div key="c" className="documentDecorations-centerCont" /> + <div key="r" className="documentDecorations-rightResizer" onPointerDown={this.onPointerDown} /> + <div key="bl" className="documentDecorations-bottomLeftResizer" onPointerDown={this.onPointerDown} /> + <div key="b" className="documentDecorations-bottomResizer" onPointerDown={this.onPointerDown} /> + <div key="br" className="documentDecorations-bottomRightResizer" onPointerDown={this.onPointerDown} /> </> )} + {seldocview._props.renderDepth <= 1 || !seldocview.containerViewPath?.().lastElement() ? null : topBtn('selector', 'arrow-alt-circle-up', undefined, this.onSelectContainerDocClick, 'tap to select containing document')} {useRounding && ( <div - key="rad" className="documentDecorations-borderRadius" style={{ - opacity: 0.5, - background: `${this._isRounding ? Colors.MEDIUM_BLUE : SettingsManager.userColor}`, + background: `${this._isRounding ? Colors.MEDIUM_BLUE : lightOrDark(StrCast(seldocview.layoutDoc._backgroundColor, SettingsManager.userColor))}`, transform: `translate(${radiusHandleLocation ?? 0}px, ${(radiusHandleLocation ?? 0) + (this._showNothing ? 0 : this._titleHeight)}px)`, }} onPointerDown={this.onRadiusDown} - onContextMenu={e => e.preventDefault()} /> )} {hideDocumentButtonBar || this._showNothing ? null : ( <div className="link-button-container" - key="links" style={{ transform: `translate(${-this._resizeBorderWidth / 2 + 10}px, ${this._resizeBorderWidth + bounds.b - bounds.y + this._titleHeight}px) `, }}> - <DocumentButtonBar views={SelectionManager.Views} /> + <DocumentButtonBar views={() => SelectionManager.Views} /> </div> )} </div> diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index abb7ed7ee..73ac1b032 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -1,10 +1,12 @@ -import React = require('react'); -import { action, IReactionDisposer, observable, reaction } from 'mobx'; +import { action, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import * as Autosuggest from 'react-autosuggest'; import { ObjectField } from '../../fields/ObjectField'; import './EditableView.scss'; import { DocumentIconContainer } from './nodes/DocumentIcon'; +import { FieldView, FieldViewProps } from './nodes/FieldView'; +import { ObservableReactComponent } from './ObservableReactComponent'; import { OverlayView } from './OverlayView'; export interface EditableProps { @@ -26,6 +28,7 @@ export interface EditableProps { * The contents to render when not editing */ contents: any; + fieldContents?: FieldViewProps; fontStyle?: string; fontSize?: number; height?: number | 'auto'; @@ -57,7 +60,7 @@ export interface EditableProps { * of the content, and set the value based on the entered string. */ @observer -export class EditableView extends React.Component<EditableProps> { +export class EditableView extends ObservableReactComponent<EditableProps> { private _ref = React.createRef<HTMLDivElement>(); private _inputref: HTMLInputElement | HTMLTextAreaElement | null = null; _overlayDisposer?: () => void; @@ -66,7 +69,8 @@ export class EditableView extends React.Component<EditableProps> { constructor(props: EditableProps) { super(props); - this._editing = this.props.editing ? true : false; + makeObservable(this); + this._editing = this._props.editing ? true : false; } componentDidMount(): void { @@ -89,12 +93,12 @@ export class EditableView extends React.Component<EditableProps> { ); } - @action - componentDidUpdate() { - if (this._editing && this.props.editing === false) { + componentDidUpdate(prevProps: Readonly<EditableProps>) { + super.componentDidUpdate(prevProps); + if (this._editing && this._props.editing === false) { this._inputref?.value && this.finalizeEdit(this._inputref.value, false, true, false); - } else if (this.props.editing !== undefined) { - this._editing = this.props.editing; + } else if (this._props.editing !== undefined) { + this._editing = this._props.editing; } } @@ -120,28 +124,28 @@ export class EditableView extends React.Component<EditableProps> { case 'Tab': e.stopPropagation(); this.finalizeEdit(e.currentTarget.value, e.shiftKey, false, false); - this.props.OnTab?.(e.shiftKey); + this._props.OnTab?.(e.shiftKey); break; case 'Backspace': e.stopPropagation(); - if (!e.currentTarget.value) this.props.OnEmpty?.(); + if (!e.currentTarget.value) this._props.OnEmpty?.(); break; case 'Enter': - if (this.props.allowCRs !== true) { + if (this._props.allowCRs !== true) { e.stopPropagation(); if (!e.ctrlKey) { this.finalizeEdit(e.currentTarget.value, e.shiftKey, false, true); - } else if (this.props.OnFillDown) { - this.props.OnFillDown(e.currentTarget.value); + } else if (this._props.OnFillDown) { + this._props.OnFillDown(e.currentTarget.value); this._editing = false; - this.props.isEditingCallback?.(false); + this._props.isEditingCallback?.(false); } } break; case 'Escape': e.stopPropagation(); this._editing = false; - this.props.isEditingCallback?.(false); + this._props.isEditingCallback?.(false); break; case 'ArrowUp': case 'ArrowDown': @@ -155,30 +159,30 @@ export class EditableView extends React.Component<EditableProps> { case 'Control': break; case ':': - if (this.props.menuCallback) { + if (this._props.menuCallback) { e.stopPropagation(); - this.props.menuCallback(e.currentTarget.getBoundingClientRect().x, e.currentTarget.getBoundingClientRect().y); + this._props.menuCallback(e.currentTarget.getBoundingClientRect().x, e.currentTarget.getBoundingClientRect().y); break; } default: - if (this.props.textCallback?.(e.key)) { + if (this._props.textCallback?.(e.key)) { e.stopPropagation(); this._editing = false; - this.props.isEditingCallback?.(false); + this._props.isEditingCallback?.(false); } } }; @action onClick = (e: React.MouseEvent) => { - if (this.props.editing !== false) { + if (this._props.editing !== false) { e.nativeEvent.stopPropagation(); - if (this._ref.current && this.props.showMenuOnLoad) { - this.props.menuCallback?.(this._ref.current.getBoundingClientRect().x, this._ref.current.getBoundingClientRect().y); + if (this._ref.current && this._props.showMenuOnLoad) { + this._props.menuCallback?.(this._ref.current.getBoundingClientRect().x, this._ref.current.getBoundingClientRect().y); } else { this._editing = true; - this.props.isEditingCallback?.(true); + this._props.isEditingCallback?.(true); } // e.stopPropagation(); } @@ -186,17 +190,17 @@ export class EditableView extends React.Component<EditableProps> { @action finalizeEdit(value: string, shiftDown: boolean, lostFocus: boolean, enterKey: boolean) { - if (this.props.SetValue(value, shiftDown, enterKey)) { + if (this._props.SetValue(value, shiftDown, enterKey)) { this._editing = false; - this.props.isEditingCallback?.(false); + this._props.isEditingCallback?.(false); } else { this._editing = false; - this.props.isEditingCallback?.(false); + this._props.isEditingCallback?.(false); !lostFocus && setTimeout( action(() => { this._editing = true; - this.props.isEditingCallback?.(true); + this._props.isEditingCallback?.(true); }), 0 ); @@ -215,30 +219,32 @@ export class EditableView extends React.Component<EditableProps> { }; renderEditor() { - return this.props.autosuggestProps ? ( + return this._props.autosuggestProps ? ( <Autosuggest - {...this.props.autosuggestProps.autosuggestProps} + {...this._props.autosuggestProps.autosuggestProps} inputProps={{ className: 'editableView-input', onKeyDown: this.onKeyDown, autoFocus: true, + // @ts-ignore onBlur: e => this.finalizeEdit(e.currentTarget.value, false, true, false), onPointerDown: this.stopPropagation, onClick: this.stopPropagation, onPointerUp: this.stopPropagation, onKeyPress: this.stopPropagation, - value: this.props.autosuggestProps.value, - onChange: this.props.autosuggestProps.onChange, + value: this._props.autosuggestProps.value, + // @ts-ignore + onChange: this._props.autosuggestProps.onChange, }} /> - ) : this.props.oneLine !== false && this.props.GetValue()?.toString().indexOf('\n') === -1 ? ( + ) : this._props.oneLine !== false && this._props.GetValue()?.toString().indexOf('\n') === -1 ? ( <input className="editableView-input" ref={r => (this._inputref = r)} - style={{ display: this.props.display, overflow: 'auto', fontSize: this.props.fontSize, minWidth: 20, background: this.props.background }} - placeholder={this.props.placeholder} + style={{ display: this._props.display, overflow: 'auto', fontSize: this._props.fontSize, minWidth: 20, background: this._props.background }} + placeholder={this._props.placeholder} onBlur={e => this.finalizeEdit(e.currentTarget.value, false, true, false)} - defaultValue={this.props.GetValue()} + defaultValue={this._props.GetValue()} autoFocus={true} onChange={this.onChange} onKeyDown={this.onKeyDown} @@ -251,10 +257,10 @@ export class EditableView extends React.Component<EditableProps> { <textarea className="editableView-input" ref={r => (this._inputref = r)} - style={{ display: this.props.display, overflow: 'auto', fontSize: this.props.fontSize, minHeight: `min(100%, ${(this.props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20, background: this.props.background }} - placeholder={this.props.placeholder} + style={{ display: this._props.display, overflow: 'auto', fontSize: this._props.fontSize, minHeight: `min(100%, ${(this._props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20, background: this._props.background }} + placeholder={this._props.placeholder} onBlur={e => this.finalizeEdit(e.currentTarget.value, false, true, false)} - defaultValue={this.props.GetValue()} + defaultValue={this._props.GetValue()} autoFocus={true} onChange={this.onChange} onKeyDown={this.onKeyDown} @@ -267,9 +273,9 @@ export class EditableView extends React.Component<EditableProps> { } render() { - const gval = this.props.GetValue()?.replace(/\n/g, '\\r\\n'); + const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n'); if (this._editing && gval !== undefined) { - return this.props.sizeToContent ? ( + return this._props.sizeToContent ? ( <div style={{ display: 'grid', minWidth: 100 }}> <div style={{ display: 'inline-block', position: 'relative', height: 0, width: '100%', overflow: 'hidden' }}>{gval}</div> {this.renderEditor()} @@ -278,30 +284,30 @@ export class EditableView extends React.Component<EditableProps> { this.renderEditor() ); } - setTimeout(() => this.props.autosuggestProps?.resetValue()); - return this.props.contents instanceof ObjectField ? null : ( + setTimeout(() => this._props.autosuggestProps?.resetValue()); + return this._props.contents instanceof ObjectField ? null : ( <div - className={`editableView-container-editing${this.props.oneLine ? '-oneLine' : ''}`} + className={`editableView-container-editing${this._props.oneLine ? '-oneLine' : ''}`} ref={this._ref} style={{ - display: this.props.display, // - textOverflow: this.props.overflow, + display: this._props.display, // + textOverflow: this._props.overflow, minHeight: '10px', - whiteSpace: this.props.oneLine ? 'nowrap' : 'pre-line', - height: this.props.height, - maxHeight: this.props.maxHeight, - fontStyle: this.props.fontStyle, - fontSize: this.props.fontSize, + whiteSpace: this._props.oneLine ? 'nowrap' : 'pre-line', + height: this._props.height, + maxHeight: this._props.maxHeight, + fontStyle: this._props.fontStyle, + fontSize: this._props.fontSize, }} //onPointerDown={this.stopPropagation} onClick={this.onClick} - placeholder={this.props.placeholder}> + placeholder={this._props.placeholder}> <span style={{ - fontStyle: this.props.fontStyle, - fontSize: this.props.fontSize, + fontStyle: this._props.fontStyle, + fontSize: this._props.fontSize, }}> - {this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()} + {this._props.fieldContents ? <FieldView {...this._props.fieldContents} /> : this.props.contents ? this._props.contents?.valueOf() : this._props.placeholder?.valueOf()} </span> </div> ); diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx index cb5c9b085..c4f65a5ca 100644 --- a/src/client/views/FilterPanel.tsx +++ b/src/client/views/FilterPanel.tsx @@ -1,40 +1,45 @@ -import React = require('react'); -import { action, computed, observable, ObservableMap } from 'mobx'; +import { action, computed, makeObservable, observable, ObservableMap } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { Handles, Rail, Slider, Ticks, Tracks } from 'react-compound-slider'; import { AiOutlineMinusSquare, AiOutlinePlusSquare } from 'react-icons/ai'; import { CiCircleRemove } from 'react-icons/ci'; import Select from 'react-select'; import { Doc, DocListCast, Field, LinkedTo, StrListCast } from '../../fields/Doc'; +import { Id } from '../../fields/FieldSymbols'; +import { List } from '../../fields/List'; import { RichTextField } from '../../fields/RichTextField'; -import { DocOptions, DocumentOptions, FInfo } from '../documents/Documents'; +import { DocOptions, FInfo } from '../documents/Documents'; import { DocumentManager } from '../util/DocumentManager'; import { UserOptions } from '../util/GroupManager'; import { SearchUtil } from '../util/SearchUtil'; +import { SettingsManager } from '../util/SettingsManager'; import { undoable } from '../util/UndoManager'; import './FilterPanel.scss'; import { FieldView } from './nodes/FieldView'; import { Handle, Tick, TooltipRail, Track } from './nodes/SliderBox-components'; -import { SettingsManager } from '../util/SettingsManager'; -import { Id } from '../../fields/FieldSymbols'; -import { List } from '../../fields/List'; -import { emptyFunction } from '../../Utils'; +import { ObservableReactComponent } from './ObservableReactComponent'; interface filterProps { - rootDoc: Doc; + Document: Doc; } @observer -export class FilterPanel extends React.Component<filterProps> { +export class FilterPanel extends ObservableReactComponent<filterProps> { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(FilterPanel, fieldKey); } + constructor(props: any) { + super(props); + makeObservable(this); + } + /** * @returns the relevant doc according to the value of FilterBox._filterScope i.e. either the Current Dashboard or the Current Collection */ - @computed get targetDoc() { - return this.props.rootDoc; + get targetDoc() { + return this._props.Document; } @computed get targetDocChildKey() { const targetView = DocumentManager.Instance.getFirstDocumentView(this.targetDoc); @@ -113,7 +118,7 @@ export class FilterPanel extends React.Component<filterProps> { // } gatherFieldValues(childDocs: Doc[], facetKey: string) { - const valueSet = new Set<string>(StrListCast(this.props.rootDoc.childFilters).map(filter => filter.split(Doc.FilterSep)[1])); + const valueSet = new Set<string>(StrListCast(this.targetDoc.childFilters).map(filter => filter.split(Doc.FilterSep)[1])); let rtFields = 0; let subDocs = childDocs; if (subDocs.length > 0) { @@ -224,7 +229,7 @@ export class FilterPanel extends React.Component<filterProps> { facetValues = (facetHeader: string) => { const allCollectionDocs = new Set<Doc>(); SearchUtil.foreachRecursiveDoc(this.targetDocChildren, (depth: number, doc: Doc) => allCollectionDocs.add(doc)); - const set = new Set<string>([...StrListCast(this.props.rootDoc.childFilters).map(filter => filter.split(Doc.FilterSep)[1]), Doc.FilterNone, Doc.FilterAny]); + const set = new Set<string>([...StrListCast(this.targetDoc.childFilters).map(filter => filter.split(Doc.FilterSep)[1]), Doc.FilterNone, Doc.FilterAny]); if (facetHeader === 'tags') allCollectionDocs.forEach(child => StrListCast(child[facetHeader]) diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 35d6d73e4..86b9f5e40 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -1,20 +1,18 @@ -import React = require('react'); import * as fitCurve from 'fit-curve'; -import { action, computed, observable, runInAction } from 'mobx'; +import { action, computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; -import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, setupMoveUpEvents } from '../../Utils'; +import * as React from 'react'; +import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, setupMoveUpEvents } from '../../Utils'; import { Doc, Opt } from '../../fields/Doc'; import { InkData, InkTool } from '../../fields/InkField'; -import { NumCast } from '../../fields/Types'; +import { BoolCast, NumCast } from '../../fields/Types'; import MobileInkOverlay from '../../mobile/MobileInkOverlay'; import { GestureUtils } from '../../pen-gestures/GestureUtils'; import { MobileInkOverlayContent } from '../../server/Message'; -import { CognitiveServices } from '../cognitive_services/CognitiveServices'; import { InteractionUtils } from '../util/InteractionUtils'; import { ScriptingGlobals } from '../util/ScriptingGlobals'; import { Transform } from '../util/Transform'; import './GestureOverlay.scss'; -import { InkTranscription } from './InkTranscription'; import { ActiveArrowEnd, ActiveArrowScale, @@ -30,36 +28,41 @@ import { SetActiveInkColor, SetActiveInkWidth, } from './InkingStroke'; -import TouchScrollableMenu, { TouchScrollableMenuItem } from './TouchScrollableMenu'; -import { Touchable } from './Touchable'; +import { ObservableReactComponent } from './ObservableReactComponent'; import { checkInksToGroup } from './global/globalScripts'; import { DocumentView } from './nodes/DocumentView'; -import { RadialMenu } from './nodes/RadialMenu'; interface GestureOverlayProps { isActive: boolean; } @observer -export class GestureOverlay extends Touchable<GestureOverlayProps> { +export class GestureOverlay extends ObservableReactComponent<React.PropsWithChildren<GestureOverlayProps>> { static Instance: GestureOverlay; static Instances: GestureOverlay[] = []; - @observable public InkShape: Opt<GestureUtils.Gestures>; - @observable public SavedColor?: string; - @observable public SavedWidth?: number; + public static set RecognizeGestures(active) { + Doc.UserDoc().recognizeGestures = active; + } + public static get RecognizeGestures() { + return BoolCast(Doc.UserDoc().recognizeGestures); + } + + @observable public InkShape: Opt<GestureUtils.Gestures> = undefined; + @observable public SavedColor?: string = undefined; + @observable public SavedWidth?: number = undefined; @observable public Tool: ToolglassTools = ToolglassTools.None; @observable public KeepPrimitiveMode = false; // for whether primitive selection enters a one-shot or persistent mode - @observable private _thumbX?: number; - @observable private _thumbY?: number; + @observable private _thumbX?: number = undefined; + @observable private _thumbY?: number = undefined; @observable private _selectedIndex: number = -1; @observable private _menuX: number = -300; @observable private _menuY: number = -300; - @observable private _pointerY?: number; + @observable private _pointerY?: number = undefined; @observable private _points: { X: number; Y: number }[] = []; @observable private _strokes: InkData[] = []; - @observable private _palette?: JSX.Element; - @observable private _clipboardDoc?: JSX.Element; + @observable private _palette?: JSX.Element = undefined; + @observable private _clipboardDoc?: JSX.Element = undefined; @observable private _possibilities: JSX.Element[] = []; public static DownDocView: DocumentView | undefined; @@ -78,14 +81,10 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> { private _inkToTextDoc: Doc | undefined; private thumbIdentifier?: number; private pointerIdentifier?: number; - private _hands: Map<number, React.Touch[]> = new Map<number, React.Touch[]>(); - private _holdTimer: NodeJS.Timeout | undefined; - - protected _multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer; constructor(props: any) { super(props); - + makeObservable(this); GestureOverlay.Instances.push(this); } @@ -93,419 +92,16 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> { GestureOverlay.Instances.splice(GestureOverlay.Instances.indexOf(this), 1); GestureOverlay.Instance = GestureOverlay.Instances.lastElement(); } - componentDidMount = () => { + componentDidMount() { GestureOverlay.Instance = this; - }; - - // TODO: nda - add dragging groups with one finger drag and have to click into group to scroll within the group - - /** - * Ignores all touch events that belong to a hand being held down. - */ - getNewTouches(e: React.TouchEvent | TouchEvent) { - const ntt: (React.Touch | Touch)[] = Array.from(e.targetTouches); - const nct: (React.Touch | Touch)[] = Array.from(e.changedTouches); - const nt: (React.Touch | Touch)[] = Array.from(e.touches); - this._hands.forEach(hand => { - for (let i = 0; i < e.targetTouches.length; i++) { - const pt = e.targetTouches.item(i); - if (pt && hand.some(finger => finger.screenX === pt.screenX && finger.screenY === pt.screenY)) { - ntt.splice(ntt.indexOf(pt), 1); - } - } - - for (let i = 0; i < e.changedTouches.length; i++) { - const pt = e.changedTouches.item(i); - if (pt && hand.some(finger => finger.screenX === pt.screenX && finger.screenY === pt.screenY)) { - nct.splice(nct.indexOf(pt), 1); - } - } - - for (let i = 0; i < e.touches.length; i++) { - const pt = e.touches.item(i); - if (pt && hand.some(finger => finger.screenX === pt.screenX && finger.screenY === pt.screenY)) { - nt.splice(nt.indexOf(pt), 1); - } - } - }); - return { ntt, nct, nt }; } - onReactTouchStart = (te: React.TouchEvent) => { - document.removeEventListener('touchmove', this.onReactHoldTouchMove); - document.removeEventListener('touchend', this.onReactHoldTouchEnd); - if (RadialMenu.Instance?._display === true) { - te.preventDefault(); - te.stopPropagation(); - RadialMenu.Instance.closeMenu(); - return; - } - - // this chunk adds new touch targets to a map of pointer events; this helps us keep track of individual fingers - // so that we can know, for example, if two fingers are pinching out or in. - const actualPts: React.Touch[] = []; - for (let i = 0; i < te.touches.length; i++) { - const pt: any = te.touches.item(i); - actualPts.push(pt); - // pen is also a touch, but with a radius of 0.5 (at least with the surface pens) - // and this seems to be the only way of differentiating pen and touch on touch events - if (pt.radiusX > 1 && pt.radiusY > 1) { - InkTranscription.Instance.createInkGroup(); - Doc.ActiveTool = InkTool.None; - this.prevPoints.set(pt.identifier, pt); - } - } - - const ptsToDelete: number[] = []; - this.prevPoints.forEach(pt => { - if (!actualPts.includes(pt)) { - ptsToDelete.push(pt.identifier); - } - }); - - ptsToDelete.forEach(pt => this.prevPoints.delete(pt)); - const nts = this.getNewTouches(te); - // if there are fewer than five touch events, handle as a touch event - if (nts.nt.length < 5) { - const target = document.elementFromPoint(te.changedTouches.item(0).clientX, te.changedTouches.item(0).clientY); - target?.dispatchEvent( - new CustomEvent<InteractionUtils.MultiTouchEvent<React.TouchEvent>>('dashOnTouchStart', { - bubbles: true, - detail: { - fingers: this.prevPoints.size, - targetTouches: nts.ntt, - touches: nts.nt, - changedTouches: nts.nct, - touchEvent: te, - }, - }) - ); - if (nts.nt.length === 1) { - // -- radial menu code -- - this._holdTimer = setTimeout(() => { - const target = document.elementFromPoint(te.changedTouches?.item(0).clientX, te.changedTouches?.item(0).clientY); - const pt: any = te.touches[te.touches?.length - 1]; - if (nts.nt.length === 1 && pt.radiusX > 1 && pt.radiusY > 1) { - target?.dispatchEvent( - new CustomEvent<InteractionUtils.MultiTouchEvent<React.TouchEvent>>('dashOnTouchHoldStart', { - bubbles: true, - detail: { - fingers: this.prevPoints.size, - targetTouches: nts.ntt, - touches: nts.nt, - changedTouches: nts.nct, - touchEvent: te, - }, - }) - ); - this._holdTimer = undefined; - document.removeEventListener('touchmove', this.onReactTouchMove); - document.removeEventListener('touchend', this.onReactTouchEnd); - document.removeEventListener('touchmove', this.onReactHoldTouchMove); - document.removeEventListener('touchend', this.onReactHoldTouchEnd); - document.addEventListener('touchmove', this.onReactHoldTouchMove); - document.addEventListener('touchend', this.onReactHoldTouchEnd); - } - }, 500); - } else { - this._holdTimer && clearTimeout(this._holdTimer); - } - document.removeEventListener('touchmove', this.onReactTouchMove); - document.removeEventListener('touchend', this.onReactTouchEnd); - document.addEventListener('touchmove', this.onReactTouchMove); - document.addEventListener('touchend', this.onReactTouchEnd); - } - // otherwise, handle as a hand event - else { - this.handleHandDown(te); - document.removeEventListener('touchmove', this.onReactTouchMove); - document.removeEventListener('touchend', this.onReactTouchEnd); - } - }; - - onReactTouchMove = (e: TouchEvent) => { - const nts: any = this.getNewTouches(e); - this._holdTimer && clearTimeout(this._holdTimer); - this._holdTimer = undefined; - - document.dispatchEvent( - new CustomEvent<InteractionUtils.MultiTouchEvent<TouchEvent>>('dashOnTouchMove', { - bubbles: true, - detail: { - fingers: this.prevPoints.size, - targetTouches: nts.ntt, - touches: nts.nt, - changedTouches: nts.nct, - touchEvent: e, - }, - }) - ); - }; - - onReactTouchEnd = (e: TouchEvent) => { - const nts: any = this.getNewTouches(e); - this._holdTimer && clearTimeout(this._holdTimer); - this._holdTimer = undefined; - - document.dispatchEvent( - new CustomEvent<InteractionUtils.MultiTouchEvent<TouchEvent>>('dashOnTouchEnd', { - bubbles: true, - detail: { - fingers: this.prevPoints.size, - targetTouches: nts.ntt, - touches: nts.nt, - changedTouches: nts.nct, - touchEvent: e, - }, - }) - ); - - // cleanup any lingering pointers - for (let i = 0; i < e.changedTouches.length; i++) { - const pt = e.changedTouches.item(i); - if (pt) { - if (this.prevPoints.has(pt.identifier)) { - this.prevPoints.delete(pt.identifier); - } - } - } - - if (this.prevPoints.size === 0) { - document.removeEventListener('touchmove', this.onReactTouchMove); - document.removeEventListener('touchend', this.onReactTouchEnd); - } - e.stopPropagation(); - }; - - handleHandDown = async (e: React.TouchEvent) => { - this._holdTimer && clearTimeout(this._holdTimer); - - // this chunk of code helps us keep track of which touch events are associated with a hand event - // so that if a hand is held down, but a second hand is interacting with dash, the second hand's events - // won't interfere with the first hand's events. - const fingers = new Array<React.Touch>(); - for (let i = 0; i < e.touches.length; i++) { - const pt: any = e.touches.item(i); - if (pt.radiusX > 1 && pt.radiusY > 1) { - for (let j = 0; j < e.targetTouches.length; j++) { - const tPt = e.targetTouches.item(j); - if (tPt?.screenX === pt?.screenX && tPt?.screenY === pt?.screenY) { - if (pt && this.prevPoints.has(pt.identifier)) { - fingers.push(pt); - } - } - } - } - } - - // this chunk of code determines whether this is a left hand or a right hand, as well as which pointer is the thumb and pointer - const thumb = fingers.reduce((a, v) => (a.clientY > v.clientY ? a : v), fingers[0]); - const rightMost = Math.max(...fingers.map(f => f.clientX)); - const leftMost = Math.min(...fingers.map(f => f.clientX)); - let pointer: React.Touch | undefined; - // left hand - if (thumb.clientX === rightMost) { - pointer = fingers.reduce((a, v) => (a.clientX > v.clientX || v.identifier === thumb.identifier ? a : v)); - } - // right hand - else if (thumb.clientX === leftMost) { - pointer = fingers.reduce((a, v) => (a.clientX < v.clientX || v.identifier === thumb.identifier ? a : v)); - } - this.pointerIdentifier = pointer?.identifier; - - runInAction(() => { - this._pointerY = pointer?.clientY; - if (thumb.identifier === this.thumbIdentifier) { - this._thumbX = thumb.clientX; - this._thumbY = thumb.clientY; - this._hands.set(thumb.identifier, fingers); - return; - } - }); - - this.thumbIdentifier = thumb?.identifier; - this._hands.set(thumb.identifier, fingers); - - this.removeMoveListeners(); - document.removeEventListener('touchmove', this.handleHandMove); - document.addEventListener('touchmove', this.handleHandMove); - document.removeEventListener('touchend', this.handleHandUp); - document.addEventListener('touchend', this.handleHandUp); - }; - - @action - handleHandMove = (e: TouchEvent) => { - // update pointer trackers - const fingers = new Array<React.Touch>(); - for (let i = 0; i < e.touches.length; i++) { - const pt: any = e.touches.item(i); - if (pt.radiusX > 1 && pt.radiusY > 1) { - for (let j = 0; j < e.targetTouches.length; j++) { - const tPt = e.targetTouches.item(j); - if (tPt?.screenX === pt?.screenX && tPt?.screenY === pt?.screenY) { - if (pt && this.prevPoints.has(pt.identifier)) { - this._hands.forEach(hand => - hand.some(f => { - if (f.identifier === pt.identifier) { - fingers.push(pt); - } - }) - ); - } - } - } - } - } - // update hand trackers - const thumb = fingers.reduce((a, v) => (a.clientY > v.clientY ? a : v), fingers[0]); - if (thumb?.identifier && thumb?.identifier === this.thumbIdentifier) { - this._hands.set(thumb.identifier, fingers); - } - - // loop through every changed pointer - for (let i = 0; i < e.changedTouches.length; i++) { - const pt = e.changedTouches.item(i); - // if the thumb was moved - if (pt && pt.identifier === this.thumbIdentifier && this._thumbY) { - if (this._thumbX && this._thumbY) { - // moving a thumb horiz. changes the palette collection selection, moving vert. changes the selection of any menus on the current palette item - const yOverX = Math.abs(pt.clientX - this._thumbX) < Math.abs(pt.clientY - this._thumbY); - if ((yOverX && this._inkToTextDoc) || this._selectedIndex > -1) { - if (Math.abs(pt.clientY - this._thumbY) > 10 * window.devicePixelRatio) { - this._selectedIndex = Math.min(Math.max(-1, -Math.ceil((pt.clientY - this._thumbY) / (10 * window.devicePixelRatio)) - 1), this._possibilities.length - 1); - } - } - } - } - // if the pointer finger was moved - if (pt && pt.identifier === this.pointerIdentifier) { - this._pointerY = pt.clientY; - } - } - }; - - @action - handleHandUp = (e: TouchEvent) => { - // sometimes, users may lift up their thumb or index finger if they can't stretch far enough to scroll an entire menu, - // so we don't want to just remove the palette when that happens - if (e.touches.length < 3) { - if (this.thumbIdentifier) this._hands.delete(this.thumbIdentifier); - this._palette = undefined; - this.thumbIdentifier = undefined; - - // this chunk of code is for handling the ink to text toolglass - let scriptWorked = false; - if (NumCast(this._inkToTextDoc?.selectedIndex) > -1) { - // if there is a text option selected, activate it - const selectedButton = this._possibilities[this._selectedIndex]; - if (selectedButton) { - selectedButton.props.onClick(); - scriptWorked = true; - } - } - // if there isn't a text option selected, dry the ink strokes into ink documents - if (!scriptWorked) { - this._strokes.forEach(s => { - this.dispatchGesture(GestureUtils.Gestures.Stroke, s); - }); - } - - this._strokes = []; - this._points.length = 0; - this._possibilities = []; - document.removeEventListener('touchend', this.handleHandUp); - } - }; - - /** - * Code for radial menu - */ - onReactHoldTouchMove = (e: TouchEvent) => { - document.removeEventListener('touchmove', this.onReactTouchMove); - document.removeEventListener('touchend', this.onReactTouchEnd); - document.removeEventListener('touchmove', this.onReactHoldTouchMove); - document.removeEventListener('touchend', this.onReactHoldTouchEnd); - document.addEventListener('touchmove', this.onReactHoldTouchMove); - document.addEventListener('touchend', this.onReactHoldTouchEnd); - const nts: any = this.getNewTouches(e); - if (this.prevPoints.size === 1 && this._holdTimer) { - clearTimeout(this._holdTimer); - } - document.dispatchEvent( - new CustomEvent<InteractionUtils.MultiTouchEvent<TouchEvent>>('dashOnTouchHoldMove', { - bubbles: true, - detail: { - fingers: this.prevPoints.size, - targetTouches: nts.ntt, - touches: nts.nt, - changedTouches: nts.nct, - touchEvent: e, - }, - }) - ); - }; - - /** - * Code for radial menu - */ - onReactHoldTouchEnd = (e: TouchEvent) => { - const nts: any = this.getNewTouches(e); - if (this.prevPoints.size === 1 && this._holdTimer) { - clearTimeout(this._holdTimer); - this._holdTimer = undefined; - } - document.dispatchEvent( - new CustomEvent<InteractionUtils.MultiTouchEvent<TouchEvent>>('dashOnTouchHoldEnd', { - bubbles: true, - detail: { - fingers: this.prevPoints.size, - targetTouches: nts.ntt, - touches: nts.nt, - changedTouches: nts.nct, - touchEvent: e, - }, - }) - ); - for (let i = 0; i < e.changedTouches.length; i++) { - const pt = e.changedTouches.item(i); - if (pt) { - if (this.prevPoints.has(pt.identifier)) { - this.prevPoints.delete(pt.identifier); - } - } - } - - document.removeEventListener('touchmove', this.onReactHoldTouchMove); - document.removeEventListener('touchend', this.onReactHoldTouchEnd); - - e.stopPropagation(); - }; - @action onPointerDown = (e: React.PointerEvent) => { - if (InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)) { - setupMoveUpEvents( - this, - e, - returnFalse, - returnFalse, - action((e: PointerEvent, doubleTap?: boolean) => { - if (doubleTap) { - InkTranscription.Instance.createInkGroup(); - Doc.ActiveTool = InkTool.None; - return; - } - }) - ); - } if (!(e.target as any)?.className?.toString().startsWith('lm_')) { - if (InteractionUtils.IsType(e, InteractionUtils.PENTYPE) || [InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) { - if (InteractionUtils.IsType(e, InteractionUtils.PENTYPE)) { - Doc.ActiveTool = InkTool.Write; - } + if ([InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) { this._points.push({ X: e.clientX, Y: e.clientY }); setupMoveUpEvents(this, e, this.onPointerMove, this.onPointerUp, emptyFunction); - // if (Doc.ActiveTool === InkTool.Highlighter) SetActiveInkColor("rgba(245, 230, 95, 0.75)"); } } }; @@ -546,41 +142,8 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> { const B = this.svgBounds; const points = this._points.map(p => ({ X: p.X - B.left, Y: p.Y - B.top })); - const initialPoint = this._points[0]; - const xInGlass = initialPoint.X > (this._thumbX ?? Number.MAX_SAFE_INTEGER) && initialPoint.X < (this._thumbX ?? Number.MAX_SAFE_INTEGER) + this.height; - const yInGlass = initialPoint.Y > (this._thumbY ?? Number.MAX_SAFE_INTEGER) - this.height && initialPoint.Y < (this._thumbY ?? Number.MAX_SAFE_INTEGER); - - // if a toolglass is selected and the stroke starts within the toolglass boundaries - if (this.Tool !== ToolglassTools.None && xInGlass && yInGlass) { - switch (this.Tool) { - case ToolglassTools.InkToText: - this._strokes.push(this._points.slice()); - CognitiveServices.Inking.Appliers.InterpretStrokes(this._strokes).then(results => { - const wordResults = results.filter((r: any) => r.category === 'line'); - const possibilities: string[] = []; - for (const wR of wordResults) { - if (wR?.recognizedText) { - possibilities.push(wR?.recognizedText); - } - possibilities.push(...wR?.alternates?.map((a: any) => a.recognizedString)); - } - const r = Math.max(this.svgBounds.right, ...this._strokes.map(s => GestureOverlay.getBounds(s).right)); - const l = Math.min(this.svgBounds.left, ...this._strokes.map(s => GestureOverlay.getBounds(s).left)); - const t = Math.min(this.svgBounds.top, ...this._strokes.map(s => GestureOverlay.getBounds(s).top)); - - // if we receive any word results from cognitive services, display them - runInAction(() => { - this._possibilities = possibilities.map(p => <TouchScrollableMenuItem text={p} onClick={() => GestureOverlay.Instance.dispatchGesture(GestureUtils.Gestures.Text, [{ X: l, Y: t }], p)} />); - }); - }); - break; - case ToolglassTools.IgnoreGesture: - this.dispatchGesture(GestureUtils.Gestures.Stroke); - break; - } - } //if any of the shape is activated in the CollectionFreeFormViewChrome - else if (this.InkShape) { + if (this.InkShape) { this.makeBezierPolygon(this.InkShape, false); this.dispatchGesture(this.InkShape); this.primCreated(); @@ -590,7 +153,7 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> { // need to decide when to turn gestures back on const result = points.length > 2 && GestureUtils.GestureRecognizer.Recognize(new Array(points)); let actionPerformed = false; - if (Doc.UserDoc().recognizeGestures && result && result.Score > 0.7) { + if (GestureOverlay.RecognizeGestures && result && result.Score > 0.7) { switch (result.Name) { case GestureUtils.Gestures.Line: case GestureUtils.Gestures.Triangle: @@ -614,7 +177,7 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> { newPoints.pop(); const controlPoints: { X: number; Y: number }[] = []; - const bezierCurves = fitCurve(newPoints, 10); + const bezierCurves = (fitCurve as any)(newPoints, 10); for (const curve of bezierCurves) { controlPoints.push({ X: curve[0][0], Y: curve[0][1] }); controlPoints.push({ X: curve[1][0], Y: curve[1][1] }); @@ -820,9 +383,9 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> { return GestureOverlay.getBounds(this._points); } - @computed get elements() { + get elements() { const selView = GestureOverlay.DownDocView; - const width = Number(ActiveInkWidth()) * NumCast(selView?.rootDoc._freeform_scale, 1); // * (selView?.props.ScreenToLocalTransform().Scale || 1); + const width = Number(ActiveInkWidth()) * NumCast(selView?.Document._freeform_scale, 1); // * (selView?.screenToViewTransform().Scale || 1); const rect = this._overlayRef.current?.getBoundingClientRect(); const B = { left: -20000, right: 20000, top: -20000, bottom: 20000, width: 40000, height: 40000 }; //this.getBounds(this._points, true); B.left = B.left - width / 2; @@ -902,10 +465,8 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> { this._clipboardDoc = ( <DocumentView Document={doc} - DataDoc={undefined} addDocument={undefined} addDocTab={returnFalse} - rootSelected={returnTrue} pinToPres={emptyFunction} removeDocument={undefined} ScreenToLocalTransform={this.screenToLocalTransform} @@ -915,10 +476,9 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> { isContentActive={returnFalse} renderDepth={0} styleProvider={returnEmptyString} - docViewPath={returnEmptyDoclist} + containerViewPath={returnEmptyDoclist} focus={emptyFunction} whenChildContentsActiveChanged={emptyFunction} - bringToFront={emptyFunction} childFiltersByRanges={returnEmptyFilter} childFilters={returnEmptyFilter} searchFilterDocs={returnEmptyDoclist} @@ -938,7 +498,7 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> { render() { return ( - <div className="gestureOverlay-cont" style={{ pointerEvents: this.props.isActive ? 'all' : 'none' }} ref={this._overlayRef} onPointerDown={this.onPointerDown} onTouchStart={this.onReactTouchStart}> + <div className="gestureOverlay-cont" style={{ pointerEvents: this._props.isActive ? 'all' : 'none' }} ref={this._overlayRef} onPointerDown={this.onPointerDown}> {this.showMobileInkOverlay ? <MobileInkOverlay /> : null} {this.elements} @@ -948,7 +508,7 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> { height: this.height, width: this.height, pointerEvents: this._clipboardDoc ? 'unset' : 'none', - touchAction: this._clipboardDoc ? 'unset' : 'none', + touchAction: 'none', transform: `translate(${this._thumbX}px, ${(this._thumbY || 0) - this.height} px)`, }}> {this._clipboardDoc} @@ -964,7 +524,6 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> { display: this.showBounds ? 'unset' : 'none', }} /> - <TouchScrollableMenu options={this._possibilities} bounds={this.svgBounds} selectedIndex={this._selectedIndex} x={this._menuX} y={this._menuY} /> </div> ); } diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index 7b693c8da..d134d9e7b 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -1,5 +1,5 @@ import { random } from 'lodash'; -import { action, runInAction } from 'mobx'; +import { action } from 'mobx'; import { Doc, DocListCast } from '../../fields/Doc'; import { Id } from '../../fields/FieldSymbols'; import { InkTool } from '../../fields/InkField'; @@ -15,7 +15,6 @@ import { SnappingManager } from '../util/SnappingManager'; import { UndoManager } from '../util/UndoManager'; import { CollectionDockingView } from './collections/CollectionDockingView'; import { CollectionFreeFormView } from './collections/collectionFreeForm'; -import { CollectionFreeFormViewChrome } from './collections/CollectionMenu'; import { CollectionStackedTimeline } from './collections/CollectionStackedTimeline'; import { ContextMenu } from './ContextMenu'; import { DocumentDecorations } from './DocumentDecorations'; @@ -33,6 +32,7 @@ type KeyControlInfo = { stopPropagation: boolean; }; +export let CtrlKey = false; export class KeyManager { public static Instance: KeyManager = new KeyManager(); private router = new Map<string, KeyHandler>(); @@ -49,11 +49,19 @@ export class KeyManager { } public unhandle = action((e: KeyboardEvent) => { - if (e.key?.toLowerCase() === 'shift') runInAction(() => (DocumentDecorations.Instance.AddToSelection = false)); + e.key === 'Control' && (CtrlKey = false); + }); + public handleModifiers = action((e: KeyboardEvent) => { + if (e.shiftKey) SnappingManager.SetShiftKey(true); + if (e.ctrlKey) SnappingManager.SetCtrlKey(true); + }); + public unhandleModifiers = action((e: KeyboardEvent) => { + if (!e.shiftKey) SnappingManager.SetShiftKey(false); + if (!e.ctrlKey) SnappingManager.SetCtrlKey(false); }); public handle = action((e: KeyboardEvent) => { - if (e.key?.toLowerCase() === 'shift') DocumentDecorations.Instance.AddToSelection = true; + e.key === 'Control' && (CtrlKey = true); //if (!Doc.noviceMode && e.key.toLocaleLowerCase() === "shift") DocServer.UPDATE_SERVER_CACHE(true); const keyname = e.key && e.key.toLowerCase(); this.handleGreedy(keyname); @@ -81,41 +89,32 @@ export class KeyManager { } }); + nudge = (x: number, y: number, label: string) => { + const nudgeable = SelectionManager.Views.some(dv => dv.CollectionFreeFormDocumentView?.nudge); + nudgeable && UndoManager.RunInBatch(() => SelectionManager.Views.map(dv => dv.CollectionFreeFormDocumentView?.nudge(x, y)), label); + return { stopPropagation: nudgeable, preventDefault: nudgeable }; + }; + private unmodified = action((keyname: string, e: KeyboardEvent) => { - const hasFffView = SelectionManager.Views().some(dv => dv.props.CollectionFreeFormDocumentView?.()); switch (keyname) { case 'u': - if (document.activeElement?.tagName === 'INPUT' || document.activeElement?.tagName === 'TEXTAREA') { - return { stopPropagation: false, preventDefault: false }; + if (document.activeElement?.tagName !== 'INPUT' && document.activeElement?.tagName !== 'TEXTAREA') { + const ungroupings = SelectionManager.Views; + UndoManager.RunInBatch(() => ungroupings.map(dv => (dv.layoutDoc.group = undefined)), 'ungroup'); + SelectionManager.DeselectAll(); } - - const ungroupings = SelectionManager.Views().slice(); - UndoManager.RunInBatch(() => ungroupings.map(dv => (dv.layoutDoc.group = undefined)), 'ungroup'); - SelectionManager.DeselectAll(); break; case 'g': - if (document.activeElement?.tagName === 'INPUT' || document.activeElement?.tagName === 'TEXTAREA') { - return { stopPropagation: false, preventDefault: false }; - } - - const groupings = SelectionManager.Views().slice(); - const randomGroup = random(0, 1000); - const collectionView = groupings.reduce( - (col, g) => (col === null || g.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView === col ? g.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView : undefined), - null as null | undefined | CollectionFreeFormView - ); - if (collectionView) { - UndoManager.RunInBatch(() => { - collectionView._marqueeViewRef.current?.collection( - e, - true, - groupings.map(g => g.rootDoc) - ); - }, 'grouping'); - break; + if (document.activeElement?.tagName !== 'INPUT' && document.activeElement?.tagName !== 'TEXTAREA') { + const selected = SelectionManager.Views; + const collectionView = selected.reduce((col, dv) => (col === null || dv.CollectionFreeFormView === col ? dv.CollectionFreeFormView : undefined), null as null | undefined | CollectionFreeFormView); + if (collectionView) { + UndoManager.RunInBatch(() => + collectionView._marqueeViewRef.current?.collection(e, true, SelectionManager.Docs) + , 'grouping'); + break; + } } - UndoManager.RunInBatch(() => groupings.map(dv => (dv.layoutDoc.group = randomGroup)), 'group'); - SelectionManager.DeselectAll(); break; case ' ': // MarqueeView.DragMarquee = !MarqueeView.DragMarquee; // bcz: this needs a better disclosure UI @@ -127,26 +126,27 @@ export class KeyManager { Doc.ActiveTool = InkTool.None; DragManager.CompleteWindowDrag?.(true); var doDeselect = true; - if (SnappingManager.GetIsDragging()) { + if (SnappingManager.IsDragging) { DragManager.AbortDrag(); - } else if (CollectionDockingView.Instance?.HasFullScreen) { + } + if (CollectionDockingView.Instance?.HasFullScreen) { CollectionDockingView.Instance?.CloseFullScreen(); - } else if (CollectionStackedTimeline.SelectingRegion) { - CollectionStackedTimeline.SelectingRegion = undefined; + } + if (CollectionStackedTimeline.SelectingRegions.size) { + CollectionStackedTimeline.StopSelecting(); doDeselect = false; } else { doDeselect = !ContextMenu.Instance.closeMenu(); } if (doDeselect) { SelectionManager.DeselectAll(); - LightboxView.SetLightboxDoc(undefined); + LightboxView.Instance.SetLightboxDoc(undefined); } // DictationManager.Controls.stop(); GoogleAuthenticationManager.Instance.cancel(); SharingManager.Instance.close(); if (!GroupManager.Instance.isOpen) SettingsManager.Instance.close(); GroupManager.Instance.close(); - CollectionFreeFormViewChrome.Instance?.clearKeepPrimitiveMode(); window.getSelection()?.empty(); document.body.focus(); break; @@ -158,25 +158,17 @@ export class KeyManager { case 'backspace': if (document.activeElement?.tagName !== 'INPUT' && document.activeElement?.tagName !== 'TEXTAREA') { if (LightboxView.LightboxDoc) { - LightboxView.SetLightboxDoc(undefined); + LightboxView.Instance.SetLightboxDoc(undefined); SelectionManager.DeselectAll(); } else DocumentDecorations.Instance.onCloseClick(true); return { stopPropagation: true, preventDefault: true }; } break; - case 'arrowleft': - UndoManager.RunInBatch(() => SelectionManager.Views().map(dv => dv.props.CollectionFreeFormDocumentView?.().nudge(-1, 0)), 'nudge left'); - return { stopPropagation: hasFffView, preventDefault: hasFffView }; - case 'arrowright': - UndoManager.RunInBatch(() => SelectionManager.Views().map(dv => dv.props.CollectionFreeFormDocumentView?.().nudge?.(1, 0)), 'nudge right'); - return { stopPropagation: hasFffView, preventDefault: hasFffView }; - case 'arrowup': - UndoManager.RunInBatch(() => SelectionManager.Views().map(dv => dv.props.CollectionFreeFormDocumentView?.().nudge?.(0, -1)), 'nudge up'); - return { stopPropagation: hasFffView, preventDefault: hasFffView }; - case 'arrowdown': - UndoManager.RunInBatch(() => SelectionManager.Views().map(dv => dv.props.CollectionFreeFormDocumentView?.().nudge?.(0, 1)), 'nudge down'); - return { stopPropagation: hasFffView, preventDefault: hasFffView }; - } + case 'arrowleft': return this.nudge(-1,0, 'nudge left') + case 'arrowright': return this.nudge(1,0, 'nudge right'); + case 'arrowup': return this.nudge(0, -1, 'nudge up'); + case 'arrowdown': return this.nudge(0, 1, 'nudge down'); + } // prettier-ignore return { stopPropagation: false, @@ -185,37 +177,29 @@ export class KeyManager { }); private shift = action((keyname: string) => { - const stopPropagation = false; - const preventDefault = false; - switch (keyname) { - case 'arrowleft': - UndoManager.RunInBatch(() => SelectionManager.Views().map(dv => dv.props.CollectionFreeFormDocumentView?.().nudge?.(-10, 0)), 'nudge left'); - break; - case 'arrowright': - UndoManager.RunInBatch(() => SelectionManager.Views().map(dv => dv.props.CollectionFreeFormDocumentView?.().nudge?.(10, 0)), 'nudge right'); - break; - case 'arrowup': - UndoManager.RunInBatch(() => SelectionManager.Views().map(dv => dv.props.CollectionFreeFormDocumentView?.().nudge?.(0, -10)), 'nudge up'); - break; - case 'arrowdown': - UndoManager.RunInBatch(() => SelectionManager.Views().map(dv => dv.props.CollectionFreeFormDocumentView?.().nudge?.(0, 10)), 'nudge down'); + case 'arrowleft': return this.nudge(-10,0, 'nudge left'); + case 'arrowright': return this.nudge(10, 0, 'nudge right'); + case 'arrowup': return this.nudge(0, -10, 'nudge up'); + case 'arrowdown': return this.nudge(0, 10, 'nudge down'); + case 'u' : + if (document.activeElement?.tagName !== 'INPUT' && document.activeElement?.tagName !== 'TEXTAREA') { + UndoManager.RunInBatch(() => SelectionManager.Docs.forEach(doc => (doc.group = undefined)), 'unggroup'); + SelectionManager.DeselectAll(); + } break; case 'g': - if (document.activeElement?.tagName === 'INPUT' || document.activeElement?.tagName === 'TEXTAREA') { - return { stopPropagation: false, preventDefault: false }; + if (document.activeElement?.tagName !== 'INPUT' && document.activeElement?.tagName !== 'TEXTAREA') { + const randomGroup = random(0, 1000); + UndoManager.RunInBatch(() => SelectionManager.Docs.forEach(doc => (doc.group = randomGroup)), 'group'); + SelectionManager.DeselectAll(); } - - const groupings = SelectionManager.Views().slice(); - const randomGroup = random(0, 1000); - UndoManager.RunInBatch(() => groupings.map(dv => (dv.layoutDoc.group = randomGroup)), 'group'); - SelectionManager.DeselectAll(); break; - } + } // prettier-ignore return { - stopPropagation: stopPropagation, - preventDefault: preventDefault, + stopPropagation: false, + preventDefault: false, }; }); @@ -226,8 +210,8 @@ export class KeyManager { switch (keyname) { case 'ƒ': case 'f': - const dv = SelectionManager.Views()?.[0]; - UndoManager.RunInBatch(() => dv.props.CollectionFreeFormDocumentView?.().float(), 'float'); + const dv = SelectionManager.Views?.[0]; + UndoManager.RunInBatch(() => dv.CollectionFreeFormDocumentView?.float(), 'float'); } return { @@ -262,7 +246,7 @@ export class KeyManager { PromiseValue(Cast(Doc.UserDoc()['tabs-button-tools'], Doc)).then(pv => pv && (pv.onClick as ScriptField).script.run({ this: pv })); break; case 'i': - const importBtn = DocListCast(Doc.MyLeftSidebarMenu.data).find(d => d.target === Doc.MyImports); + const importBtn = DocListCast(Doc.MyLeftSidebarMenu.data).find(d => d.target === Doc.MyImports); if (importBtn) { MainView.Instance.selectMenu(importBtn); } @@ -274,8 +258,8 @@ export class KeyManager { } break; case 'f': - if (SelectionManager.Views().length === 1 && SelectionManager.Views()[0].ComponentView?.search) { - SelectionManager.Views()[0].ComponentView?.search?.('', false, false); + if (SelectionManager.Views.length === 1 && SelectionManager.Views[0].ComponentView?.search) { + SelectionManager.Views[0].ComponentView?.search?.('', false, false); } else { const searchBtn = DocListCast(Doc.MyLeftSidebarMenu.data).find(d => d.target === Doc.MySearcher); if (searchBtn) { @@ -284,10 +268,10 @@ export class KeyManager { } break; case 'e': - Doc.ActiveTool = (Doc.ActiveTool === InkTool.Eraser ? InkTool.None : InkTool.Eraser); + Doc.ActiveTool = Doc.ActiveTool === InkTool.Eraser ? InkTool.None : InkTool.Eraser; break; case 'p': - Doc.ActiveTool = (Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen); + Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen; break; case 'r': preventDefault = false; @@ -317,17 +301,11 @@ export class KeyManager { preventDefault = false; break; case 'x': - if (SelectionManager.Views().length) { + if (SelectionManager.Views.length) { const bds = DocumentDecorations.Instance.Bounds; - const pt = SelectionManager.Views()[0] - .props.ScreenToLocalTransform() - .transformPoint(bds.x + (bds.r - bds.x) / 2, bds.y + (bds.b - bds.y) / 2); - const text = - `__DashDocId(${pt?.[0] || 0},${pt?.[1] || 0}):` + - SelectionManager.Views() - .map(dv => dv.Document[Id]) - .join(':'); - SelectionManager.Views().length && navigator.clipboard.writeText(text); + const pt = SelectionManager.Views[0].screenToViewTransform().transformPoint(bds.x + (bds.r - bds.x) / 2, bds.y + (bds.b - bds.y) / 2); + const text = `__DashDocId(${pt?.[0] || 0},${pt?.[1] || 0}):` + SelectionManager.Views.map(dv => dv.Document[Id]).join(':'); + SelectionManager.Views.length && navigator.clipboard.writeText(text); DocumentDecorations.Instance.onCloseClick(true); stopPropagation = false; preventDefault = false; @@ -336,15 +314,9 @@ export class KeyManager { case 'c': if ((document.activeElement as any)?.type !== 'text' && !AnchorMenu.Instance.Active && DocumentDecorations.Instance.Bounds.r - DocumentDecorations.Instance.Bounds.x > 2) { const bds = DocumentDecorations.Instance.Bounds; - const pt = SelectionManager.Views()[0] - .props.ScreenToLocalTransform() - .transformPoint(bds.x + (bds.r - bds.x) / 2, bds.y + (bds.b - bds.y) / 2); - const text = - `__DashCloneId(${pt?.[0] || 0},${pt?.[1] || 0}):` + - SelectionManager.Views() - .map(dv => dv.Document[Id]) - .join(':'); - SelectionManager.Views().length && navigator.clipboard.writeText(text); + const pt = SelectionManager.Views[0].screenToViewTransform().transformPoint(bds.x + (bds.r - bds.x) / 2, bds.y + (bds.b - bds.y) / 2); + const text = `__DashCloneId(${pt?.[0] || 0},${pt?.[1] || 0}):` + SelectionManager.Views.map(dv => dv.Document[Id]).join(':'); + SelectionManager.Views.length && navigator.clipboard.writeText(text); stopPropagation = false; } preventDefault = false; @@ -362,7 +334,7 @@ export class KeyManager { if (!plain) return; const clone = plain.startsWith('__DashCloneId('); const docids = plain.split(':'); // hack! docids[0] is the top left of the selection rectangle - const addDocument = SelectionManager.Views().lastElement()?.ComponentView?.addDocument; + const addDocument = SelectionManager.Views.lastElement()?.ComponentView?.addDocument; if (addDocument && (plain.startsWith('__DashDocId(') || clone)) { Doc.Paste(docids.slice(1), clone, addDocument); } diff --git a/src/client/views/InkControlPtHandles.tsx b/src/client/views/InkControlPtHandles.tsx index 0d7f7ebd8..7dd57e04d 100644 --- a/src/client/views/InkControlPtHandles.tsx +++ b/src/client/views/InkControlPtHandles.tsx @@ -1,4 +1,4 @@ -import React = require('react'); +import * as React from 'react'; import { action, observable } from 'mobx'; import { observer } from 'mobx-react'; import { Doc } from '../../fields/Doc'; @@ -12,6 +12,7 @@ import { UndoManager } from '../util/UndoManager'; import { Colors } from './global/globalEnums'; import { InkingStroke } from './InkingStroke'; import { InkStrokeProperties } from './InkStrokeProperties'; +import { SnappingManager } from '../util/SnappingManager'; export interface InkControlProps { inkDoc: Doc; @@ -26,7 +27,7 @@ export interface InkControlProps { export class InkControlPtHandles extends React.Component<InkControlProps> { @observable private _overControl = -1; get docView() { - return this.props.inkView.props.docViewPath().lastElement(); + return this.props.inkView.DocumentView?.(); } componentDidMount() { @@ -57,11 +58,11 @@ export class InkControlPtHandles extends React.Component<InkControlProps> { if (!this.props.inkView.controlUndo) this.props.inkView.controlUndo = UndoManager.StartBatch('drag ink ctrl pt'); const inkMoveEnd = ptFromScreen({ X: delta[0], Y: delta[1] }); const inkMoveStart = ptFromScreen({ X: 0, Y: 0 }); - InkStrokeProperties.Instance.moveControlPtHandle(this.docView, inkMoveEnd.X - inkMoveStart.X, inkMoveEnd.Y - inkMoveStart.Y, controlIndex, origInk); + this.docView && InkStrokeProperties.Instance.moveControlPtHandle(this.docView, inkMoveEnd.X - inkMoveStart.X, inkMoveEnd.Y - inkMoveStart.Y, controlIndex, origInk); return false; }), action(() => { - if (this.props.inkView.controlUndo) { + if (this.props.inkView.controlUndo && this.docView) { InkStrokeProperties.Instance.snapControl(this.docView, controlIndex); } this.props.inkView.controlUndo?.end(); @@ -77,11 +78,11 @@ export class InkControlPtHandles extends React.Component<InkControlProps> { } else { if (brokenIndices?.includes(equivIndex)) { if (!this.props.inkView.controlUndo) this.props.inkView.controlUndo = UndoManager.StartBatch('make smooth'); - InkStrokeProperties.Instance.snapHandleTangent(this.docView, equivIndex, handleIndexA, handleIndexB); + this.docView && InkStrokeProperties.Instance.snapHandleTangent(this.docView, equivIndex, handleIndexA, handleIndexB); } if (equivIndex !== controlIndex && brokenIndices?.includes(controlIndex)) { if (!this.props.inkView.controlUndo) this.props.inkView.controlUndo = UndoManager.StartBatch('make smooth'); - InkStrokeProperties.Instance.snapHandleTangent(this.docView, controlIndex, handleIndexA, handleIndexB); + this.docView && InkStrokeProperties.Instance.snapHandleTangent(this.docView, controlIndex, handleIndexA, handleIndexB); } } this.props.inkView.controlUndo?.end(); @@ -112,7 +113,7 @@ export class InkControlPtHandles extends React.Component<InkControlProps> { @action onDelete = (e: KeyboardEvent) => { if (['-', 'Backspace', 'Delete'].includes(e.key)) { - InkStrokeProperties.Instance.deletePoints(this.docView, e.shiftKey); + this.docView && InkStrokeProperties.Instance.deletePoints(this.docView, e.shiftKey); e.stopPropagation(); } }; @@ -190,6 +191,7 @@ export class InkEndPtHandles extends React.Component<InkEndProps> { @action dragRotate = (e: React.PointerEvent, pt1: () => { X: number; Y: number }, pt2: () => { X: number; Y: number }) => { + SnappingManager.SetIsDragging(true); setupMoveUpEvents( this, e, @@ -206,11 +208,12 @@ export class InkEndPtHandles extends React.Component<InkEndProps> { const v1n = { X: v1.X / v1len, Y: v1.Y / v1len }; const v2n = { X: v2.X / v2len, Y: v2.Y / v2len }; const angle = Math.acos(v1n.X * v2n.X + v1n.Y * v2n.Y) * Math.sign(v1.X * v2.Y - v2.X * v1.Y); - InkStrokeProperties.Instance.stretchInk(SelectionManager.Views(), scaling, p2, v1n, e.shiftKey); - InkStrokeProperties.Instance.rotateInk(SelectionManager.Views(), angle, pt2()); // bcz: call pt2() func here because pt2 will have changed from previous stretchInk call + InkStrokeProperties.Instance.stretchInk(SelectionManager.Views, scaling, p2, v1n, e.shiftKey); + InkStrokeProperties.Instance.rotateInk(SelectionManager.Views, angle, pt2()); // bcz: call pt2() func here because pt2 will have changed from previous stretchInk call return false; }), action(() => { + SnappingManager.SetIsDragging(false); this.props.inkView.controlUndo?.end(); this.props.inkView.controlUndo = undefined; UndoManager.FilterBatches(['stroke', 'x', 'y', 'width', 'height']); @@ -237,8 +240,8 @@ export class InkEndPtHandles extends React.Component<InkEndProps> { ); return ( <svg> - {hdl('start', this.props.startPt(), (e: React.PointerEvent) => this.dragRotate(e, this.props.startPt, this.props.endPt))} - {hdl('end', this.props.endPt(), (e: React.PointerEvent) => this.dragRotate(e, this.props.endPt, this.props.startPt))} + {hdl('start', this.props.startPt(), e => this.dragRotate(e, this.props.startPt, this.props.endPt))} + {hdl('end', this.props.endPt(), e => this.dragRotate(e, this.props.endPt, this.props.startPt))} </svg> ); } diff --git a/src/client/views/InkStrokeProperties.ts b/src/client/views/InkStrokeProperties.ts index 736ca8d90..52ea89cde 100644 --- a/src/client/views/InkStrokeProperties.ts +++ b/src/client/views/InkStrokeProperties.ts @@ -1,5 +1,5 @@ import { Bezier } from 'bezier-js'; -import { action, observable, reaction } from 'mobx'; +import { action, makeObservable, observable, reaction, runInAction } from 'mobx'; import { Doc, NumListCast, Opt } from '../../fields/Doc'; import { InkData, InkField, InkTool, PointData } from '../../fields/InkField'; import { List } from '../../fields/List'; @@ -12,7 +12,7 @@ import { DocumentManager } from '../util/DocumentManager'; import { undoBatch } from '../util/UndoManager'; import { InkingStroke } from './InkingStroke'; import { DocumentView } from './nodes/DocumentView'; -import _ = require('lodash'); +import * as _ from 'lodash'; export class InkStrokeProperties { static _Instance: InkStrokeProperties | undefined; @@ -25,6 +25,7 @@ export class InkStrokeProperties { constructor() { InkStrokeProperties._Instance = this; + makeObservable(this); reaction( () => this._controlButton, button => button && (Doc.ActiveTool = InkTool.None) @@ -49,7 +50,7 @@ export class InkStrokeProperties { (strokes instanceof DocumentView ? [strokes] : strokes)?.forEach( action(inkView => { if (!requireCurrPoint || this._currentPoint !== -1) { - const doc = inkView.rootDoc; + const doc = inkView.Document; if (doc.type === DocumentType.INK && doc.width && doc.height) { const ink = Cast(doc.stroke, InkField)?.inkData; if (ink) { @@ -83,10 +84,9 @@ export class InkStrokeProperties { * @param control The list of all control points of the ink. */ @undoBatch - @action addPoints = (inkView: DocumentView, t: number, i: number, controls: { X: number; Y: number }[]) => { this.applyFunction(inkView, (view: DocumentView, ink: InkData) => { - const doc = view.rootDoc; + const doc = view.Document; const array = [controls[i], controls[i + 1], controls[i + 2], controls[i + 3]]; const newsegs = new Bezier(array.map(p => ({ x: p.X, y: p.Y }))).split(t); const splicepts = [...newsegs.left.points, ...newsegs.right.points]; @@ -94,7 +94,7 @@ export class InkStrokeProperties { // Updating the indices of the control points whose handle tangency has been broken. doc.brokenInkIndices = new List(Cast(doc.brokenInkIndices, listSpec('number'), []).map(control => (control > i ? control + 4 : control))); - this._currentPoint = -1; + runInAction(() => (this._currentPoint = -1)); return controls; }); @@ -154,12 +154,11 @@ export class InkStrokeProperties { * Deletes the current control point of the selected ink instance. */ @undoBatch - @action deletePoints = (inkView: DocumentView, preserve: boolean) => this.applyFunction( inkView, (view: DocumentView, ink: InkData) => { - const doc = view.rootDoc; + const doc = view.Document; const newPoints = ink.slice(); const brokenIndices = NumListCast(doc.brokenInkIndices); if (preserve || this._currentPoint === 0 || this._currentPoint === ink.length - 1 || brokenIndices.includes(this._currentPoint)) { @@ -187,7 +186,7 @@ export class InkStrokeProperties { } } doc.brokenInkIndices = new List(brokenIndices.map(control => (control >= this._currentPoint ? control - 4 : control))); - this._currentPoint = -1; + runInAction(() => (this._currentPoint = -1)); return newPoints.length < 4 ? undefined : newPoints; }, true @@ -200,7 +199,6 @@ export class InkStrokeProperties { * @param scrpt The center point of the rotation in screen coordinates */ @undoBatch - @action rotateInk = (inkStrokes: DocumentView[], angle: number, scrpt: PointData) => { this.applyFunction(inkStrokes, (view: DocumentView, ink: InkData, xScale: number, yScale: number, inkStrokeWidth: number) => { const inkCenterPt = view.ComponentView?.ptFromScreen?.(scrpt); @@ -222,7 +220,6 @@ export class InkStrokeProperties { * @param scrpt The center point of the rotation in screen coordinates */ @undoBatch - @action stretchInk = (inkStrokes: DocumentView[], scaling: number, scrpt: PointData, scrVec: PointData, scaleUniformly: boolean) => { this.applyFunction(inkStrokes, (view: DocumentView, ink: InkData) => { const ptFromScreen = view.ComponentView?.ptFromScreen; @@ -243,12 +240,12 @@ export class InkStrokeProperties { * Handles the movement/scaling of a control point. */ @undoBatch - @action moveControlPtHandle = (inkView: DocumentView, deltaX: number, deltaY: number, controlIndex: number, origInk?: InkData) => + inkView && this.applyFunction(inkView, (view: DocumentView, ink: InkData) => { const order = controlIndex % 4; const closed = InkingStroke.IsClosed(ink); - const brokenIndices = Cast(inkView.props.Document.brokenInkIndices, listSpec('number'), []); + const brokenIndices = Cast(inkView.Document.brokenInkIndices, listSpec('number'), []); if (origInk && this._currentPoint > 0 && this._currentPoint < ink.length - 1 && brokenIndices.findIndex(value => value === controlIndex) === -1) { const cpt_before = ink[controlIndex]; const cpt = { X: cpt_before.X + deltaX, Y: cpt_before.Y + deltaY }; @@ -335,7 +332,7 @@ export class InkStrokeProperties { * Handles the movement/scaling of a control point. */ snapControl = (inkView: DocumentView, controlIndex: number) => { - const inkDoc = inkView.rootDoc; + const inkDoc = inkView.Document; const ink = Cast(inkDoc[Doc.LayoutFieldKey(inkDoc)], InkField)?.inkData; if (ink) { @@ -372,15 +369,15 @@ export class InkStrokeProperties { }; snapToAllCurves = (screenDragPt: { X: number; Y: number }, inkView: DocumentView, snapData: { nearestPt: { X: number; Y: number }; distance: number }, ink: InkData, controlIndex: number) => { - const containingCollection = inkView.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView; - const containingDocView = inkView.props.CollectionFreeFormDocumentView?.().props.DocumentView?.(); + const containingCollection = inkView.CollectionFreeFormView; + const containingDocView = containingCollection?.DocumentView?.(); containingCollection?.childDocs .filter(doc => doc.type === DocumentType.INK) .forEach(doc => { const testInkView = DocumentManager.Instance.getDocumentView(doc, containingDocView); - const snapped = testInkView?.ComponentView?.snapPt?.(screenDragPt, doc === inkView.rootDoc ? this.excludeSelfSnapSegs(ink, controlIndex) : []); + const snapped = testInkView?.ComponentView?.snapPt?.(screenDragPt, doc === inkView.Document ? this.excludeSelfSnapSegs(ink, controlIndex) : []); if (snapped && snapped.distance < snapData.distance) { - const snappedInkPt = doc === inkView.rootDoc ? snapped.nearestPt : inkView.ComponentView?.ptFromScreen?.(testInkView?.ComponentView?.ptToScreen?.(snapped.nearestPt) ?? { X: 0, Y: 0 }); // convert from snapped ink coordinate system to dragged ink coordinate system by converting to/from screen space + const snappedInkPt = doc === inkView.Document ? snapped.nearestPt : inkView.ComponentView?.ptFromScreen?.(testInkView?.ComponentView?.ptToScreen?.(snapped.nearestPt) ?? { X: 0, Y: 0 }); // convert from snapped ink coordinate system to dragged ink coordinate system by converting to/from screen space if (snappedInkPt) { snapData = { nearestPt: snappedInkPt, distance: snapped.distance }; @@ -397,7 +394,7 @@ export class InkStrokeProperties { */ snapHandleTangent = (inkView: DocumentView, controlIndex: number, handleIndexA: number, handleIndexB: number) => { this.applyFunction(inkView, (view: DocumentView, ink: InkData) => { - const doc = view.rootDoc; + const doc = view.Document; const brokenIndices = Cast(doc.brokenInkIndices, listSpec('number'), []); const ind = brokenIndices.findIndex(value => value === controlIndex); if (ind !== -1) { @@ -456,10 +453,9 @@ export class InkStrokeProperties { * Handles the movement/scaling of a handle point. */ @undoBatch - @action moveTangentHandle = (inkView: DocumentView, deltaX: number, deltaY: number, handleIndex: number, oppositeHandleIndex: number, controlIndex: number) => this.applyFunction(inkView, (view: DocumentView, ink: InkData) => { - const doc = view.rootDoc; + const doc = view.Document; const closed = InkingStroke.IsClosed(ink); const oldHandlePoint = ink[handleIndex]; const oppositeHandlePoint = ink[oppositeHandleIndex]; diff --git a/src/client/views/InkTangentHandles.tsx b/src/client/views/InkTangentHandles.tsx index 65f6a6dfa..c20399698 100644 --- a/src/client/views/InkTangentHandles.tsx +++ b/src/client/views/InkTangentHandles.tsx @@ -1,4 +1,4 @@ -import React = require('react'); +import * as React from 'react'; import { action } from 'mobx'; import { observer } from 'mobx-react'; import { Doc } from '../../fields/Doc'; @@ -23,7 +23,7 @@ export interface InkHandlesProps { @observer export class InkTangentHandles extends React.Component<InkHandlesProps> { get docView() { - return this.props.inkView.props.docViewPath().lastElement(); + return this.props.inkView.DocumentView?.(); } /** * Handles the movement of a selected handle point when the user clicks and drags. @@ -42,7 +42,7 @@ export class InkTangentHandles extends React.Component<InkHandlesProps> { if (e.altKey) this.onBreakTangent(controlIndex); const inkMoveEnd = this.props.inkView.ptFromScreen({ X: delta[0], Y: delta[1] }); const inkMoveStart = this.props.inkView.ptFromScreen({ X: 0, Y: 0 }); - InkStrokeProperties.Instance.moveTangentHandle(this.docView, -(inkMoveEnd.X - inkMoveStart.X), -(inkMoveEnd.Y - inkMoveStart.Y), handleIndex, oppositeHandleIndex, controlIndex); + this.docView && InkStrokeProperties.Instance.moveTangentHandle(this.docView, -(inkMoveEnd.X - inkMoveStart.X), -(inkMoveEnd.Y - inkMoveStart.Y), handleIndex, oppositeHandleIndex, controlIndex); return false; }), action(() => { diff --git a/src/client/views/InkTranscription.tsx b/src/client/views/InkTranscription.tsx index 258bfad66..7e2b334af 100644 --- a/src/client/views/InkTranscription.tsx +++ b/src/client/views/InkTranscription.tsx @@ -1,351 +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 { Height, Width } from '../../fields/DocSymbols'; -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 = d[Width](); - const height = 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.height = newCollection[Height](); - newCollection.width = newCollection[Width](); - // 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= undefined; +// @observable _mathRef: any= undefined; +// @observable _textRegister: any= undefined; +// @observable _textRef: any= undefined; +// 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 d26c7761e..92644d3c5 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -20,11 +20,10 @@ Most of the operations that can be performed on an InkStroke (eg delete a point, rotate, stretch) are implemented in the InkStrokeProperties helper class */ -import React = require('react'); import { action, computed, IReactionDisposer, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { Doc } from '../../fields/Doc'; -import { Height, Width } from '../../fields/DocSymbols'; import { InkData, InkField } from '../../fields/InkField'; import { BoolCast, Cast, NumCast, RTFCast, StrCast } from '../../fields/Types'; import { TraceMobx } from '../../fields/util'; @@ -33,25 +32,21 @@ import { CognitiveServices } from '../cognitive_services/CognitiveServices'; import { Docs } from '../documents/Documents'; import { InteractionUtils } from '../util/InteractionUtils'; import { SnappingManager } from '../util/SnappingManager'; -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 { ViewBoxBaseComponent, ViewBoxInterface } from './DocComponent'; import { Colors } from './global/globalEnums'; import { InkControlPtHandles, InkEndPtHandles } from './InkControlPtHandles'; import './InkStroke.scss'; import { InkStrokeProperties } from './InkStrokeProperties'; import { InkTangentHandles } from './InkTangentHandles'; -import { DocComponentView } from './nodes/DocumentView'; 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'); - +const { default: { INK_MASK_SIZE } } = require('./global/globalCssVariables.module.scss'); // prettier-ignore @observer -export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() { +export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() implements ViewBoxInterface { static readonly MaskDim = INK_MASK_SIZE; // choose a really big number to make sure mask fits over container (which in theory can be arbitrarily big) public static LayoutString(fieldStr: string) { return FieldView.LayoutString(InkingStroke, fieldStr); @@ -62,14 +57,14 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() { private _handledClick = false; // flag denoting whether ink stroke has handled a psuedo-click onPointerUp so that the real onClick event can be stopPropagated private _disposers: { [key: string]: IReactionDisposer } = {}; - @observable _nearestSeg?: number; // nearest Bezier segment along the ink stroke to the cursor (used for displaying the Add Point highlight) - @observable _nearestT?: number; // nearest t value within the nearest Bezier segment " + @observable _nearestSeg?: number = undefined; // nearest Bezier segment along the ink stroke to the cursor (used for displaying the Add Point highlight) + @observable _nearestT?: number = undefined; // nearest t value within the nearest Bezier segment " @observable _nearestScrPt?: { X: number; Y: number }; // nearst screen point on the ink stroke "" componentDidMount() { - this.props.setContentView?.(this); + this._props.setContentViewBox?.(this); this._disposers.selfDisper = reaction( - () => this.props.isSelected(), // react to stroke being deselected by turning off ink handles + () => this._props.isSelected(), // react to stroke being deselected by turning off ink handles selected => !selected && (InkStrokeProperties.Instance._controlButton = false) ); } @@ -77,51 +72,26 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() { Object.keys(this._disposers).forEach(key => this._disposers[key]()); } - // transform is the inherited screentolocal xf plus any scaling that was done to make the stroke - // fit within its panel (e.g., for content fitting views like Lightbox or multicolumn, etc) - screenToLocal = () => this.props.ScreenToLocalTransform().scale(this.props.NativeDimScaling?.() || 1); - getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => { const subAnchor = this._subContentView?.getAnchor?.(addAsAnnotation); - if (subAnchor !== this.rootDoc && subAnchor) return subAnchor; + if (subAnchor !== this.Document && subAnchor) return subAnchor; - if (!addAsAnnotation && !pinProps) return this.rootDoc; + if (!addAsAnnotation && !pinProps) return this.Document; const anchor = Docs.Create.ConfigDocument({ - title: 'Ink anchor:' + this.rootDoc.title, + title: 'Ink anchor:' + this.Document.title, // set presentation timing for restoring shape presentation_duration: 1100, presentation_transition: 1000, - annotationOn: this.rootDoc, + annotationOn: this.Document, }); if (anchor) { anchor.backgroundColor = 'transparent'; // /* addAsAnnotation &&*/ this.addDocument(anchor); - PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), inkable: true } }, this.rootDoc); + PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), inkable: true } }, this.Document); return anchor; } - return this.rootDoc; - }; - - /** - * @returns the center of the ink stroke in the ink document's coordinate space (not screen space, and not the ink data coordinate space); - * DocumentDecorations calls getBounds() on DocumentViews which call getCenter() if defined - in the case of ink it needs to be defined since - * the center of the ink stroke changes as the stroke is rotated. - */ - getCenter = (xf: Transform) => { - const { inkData, inkScaleX, inkScaleY, inkStrokeWidth, inkTop, inkLeft } = this.inkScaledData(); - const angle = -NumCast(this.layoutDoc.rotation); - const newPoints = inkData.map(pt => { - const newX = Math.cos(angle) * pt.X - (Math.sin(angle) * pt.Y * inkScaleY) / inkScaleX; - const newY = (Math.sin(angle) * pt.X * inkScaleX) / inkScaleY + Math.cos(angle) * pt.Y; - return { X: newX, Y: newY }; - }); - const crx = (Math.max(...newPoints.map(np => np.X)) + Math.min(...newPoints.map(np => np.X))) / 2; - const cry = (Math.max(...newPoints.map(np => np.Y)) + Math.min(...newPoints.map(np => np.Y))) / 2; - const cx = Math.cos(-angle) * crx - (Math.sin(-angle) * cry * inkScaleY) / inkScaleX; - const cy = (Math.sin(-angle) * crx * inkScaleX) / inkScaleY + Math.cos(-angle) * cry; - const tc = xf.transformPoint((cx - inkLeft - inkStrokeWidth / 2) * inkScaleX + inkStrokeWidth / 2, (cy - inkTop - inkStrokeWidth / 2) * inkScaleY + inkStrokeWidth / 2); - return { X: tc[0], Y: tc[1] }; + return this.Document; }; /** @@ -142,7 +112,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() { public static toggleMask = action((inkDoc: Doc) => { inkDoc.stroke_isInkMask = !inkDoc.stroke_isInkMask; }); - @observable controlUndo: UndoManager.Batch | undefined; + @observable controlUndo: UndoManager.Batch | undefined = undefined; /** * Drags the a simple bezier segment of the stroke. * Also adds a control point when double clicking on the stroke. @@ -150,11 +120,12 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() { @action onPointerDown = (e: React.PointerEvent) => { this._handledClick = false; - const inkView = this.props.docViewPath().lastElement(); + const inkView = this.DocumentView?.(); + if (!inkView) return; const { inkData, inkScaleX, inkScaleY, inkStrokeWidth, inkTop, inkLeft } = this.inkScaledData(); const screenPts = inkData .map(point => - this.screenToLocal() + this.ScreenToLocalBoxXf() .inverse() .transformPoint((point.X - inkLeft - inkStrokeWidth / 2) * inkScaleX + inkStrokeWidth / 2, (point.Y - inkTop - inkStrokeWidth / 2) * inkScaleY + inkStrokeWidth / 2) ) @@ -162,7 +133,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() { const { nearestSeg } = InkStrokeProperties.nearestPtToStroke(screenPts, { X: e.clientX, Y: e.clientY }); const controlIndex = nearestSeg; const wasSelected = InkStrokeProperties.Instance._currentPoint === controlIndex; - const isEditing = InkStrokeProperties.Instance._controlButton && this.props.isSelected(); + const isEditing = InkStrokeProperties.Instance._controlButton && this._props.isSelected(); this.controlUndo = undefined; setupMoveUpEvents( this, @@ -190,7 +161,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() { InkStrokeProperties.Instance._currentPoint = -1; this._handledClick = true; // mark the double-click pseudo pointerevent so we can block the real mouse event from propagating to DocumentView if (isEditing) { - this._nearestT && this._nearestSeg !== undefined && InkStrokeProperties.Instance.addPoints(this.props.docViewPath().lastElement(), this._nearestT, this._nearestSeg, this.inkScaledData().inkData.slice()); + this._nearestT && this._nearestSeg !== undefined && InkStrokeProperties.Instance.addPoints(inkView, this._nearestT, this._nearestSeg, this.inkScaledData().inkData.slice()); } } }), @@ -206,7 +177,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() { */ ptFromScreen = (scrPt: { X: number; Y: number }) => { const { inkScaleX, inkScaleY, inkStrokeWidth, inkTop, inkLeft } = this.inkScaledData(); - const docPt = this.screenToLocal().transformPoint(scrPt.X, scrPt.Y); + const docPt = this.ScreenToLocalBoxXf().transformPoint(scrPt.X, scrPt.Y); const inkPt = { X: (docPt[0] - inkStrokeWidth / 2) / inkScaleX + inkStrokeWidth / 2 + inkLeft, Y: (docPt[1] - inkStrokeWidth / 2) / inkScaleY + inkStrokeWidth / 2 + inkTop, @@ -224,7 +195,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() { X: (inkPt.X - inkLeft - inkStrokeWidth / 2) * inkScaleX + inkStrokeWidth / 2, Y: (inkPt.Y - inkTop - inkStrokeWidth / 2) * inkScaleY + inkStrokeWidth / 2, }; - const scrPt = this.screenToLocal().inverse().transformPoint(docPt.X, docPt.Y); + const scrPt = this.ScreenToLocalBoxXf().inverse().transformPoint(docPt.X, docPt.Y); return { X: scrPt[0], Y: scrPt[1] }; }; @@ -238,7 +209,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() { snapPt = (scrPt: { X: number; Y: number }, excludeSegs?: number[]) => { const { inkData } = this.inkScaledData(); const { nearestPt, distance } = InkStrokeProperties.nearestPtToStroke(inkData, this.ptFromScreen(scrPt), excludeSegs ?? []); - return { nearestPt, distance: distance * this.screenToLocal().inverse().Scale }; + return { nearestPt, distance: distance * this.ScreenToLocalBoxXf().inverse().Scale }; }; /** @@ -246,8 +217,8 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() { * factor for converting between ink and screen space. */ inkScaledData = () => { - const inkData = Cast(this.rootDoc[this.fieldKey], InkField)?.inkData ?? []; - const inkStrokeWidth = NumCast(this.rootDoc.stroke_width, 1); + const inkData = Cast(this.dataDoc[this.fieldKey], InkField)?.inkData ?? []; + const inkStrokeWidth = NumCast(this.layoutDoc.stroke_width, 1); const inkTop = Math.min(...inkData.map(p => p.Y)) - inkStrokeWidth / 2; const inkBottom = Math.max(...inkData.map(p => p.Y)) + inkStrokeWidth / 2; const inkLeft = Math.min(...inkData.map(p => p.X)) - inkStrokeWidth / 2; @@ -261,8 +232,8 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() { inkLeft, inkWidth, inkHeight, - inkScaleX: (this.props.PanelWidth() - inkStrokeWidth) / (inkWidth - inkStrokeWidth || 1) || 1, - inkScaleY: (this.props.PanelHeight() - inkStrokeWidth) / (inkHeight - inkStrokeWidth || 1) || 1, + inkScaleX: (this._props.PanelWidth() - inkStrokeWidth) / (inkWidth - inkStrokeWidth || 1) || 1, + inkScaleY: (this._props.PanelHeight() - inkStrokeWidth) / (inkHeight - inkStrokeWidth || 1) || 1, }; }; @@ -275,7 +246,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() { const { inkData, inkScaleX, inkScaleY, inkStrokeWidth, inkTop, inkLeft } = this.inkScaledData(); const screenPts = inkData .map(point => - this.screenToLocal() + this.ScreenToLocalBoxXf() .inverse() .transformPoint((point.X - inkLeft - inkStrokeWidth / 2) * inkScaleX + inkStrokeWidth / 2, (point.Y - inkTop - inkStrokeWidth / 2) * inkScaleY + inkStrokeWidth / 2) ) @@ -300,7 +271,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() { const { inkData, inkScaleX, inkScaleY, inkStrokeWidth, inkTop, inkLeft } = this.inkScaledData(); return inkData .map(point => - this.screenToLocal() + this.ScreenToLocalBoxXf() .inverse() .transformPoint((point.X - inkLeft - inkStrokeWidth / 2) * inkScaleX + inkStrokeWidth / 2, (point.Y - inkTop - inkStrokeWidth / 2) * inkScaleY + inkStrokeWidth / 2) ) @@ -314,17 +285,17 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() { * @returns the JSX controls for displaying an editing UI for the stroke (control point & tangent handles) */ componentUI = (boundsLeft: number, boundsTop: number) => { - const inkDoc = this.props.Document; + const inkDoc = this.Document; const { inkData, inkStrokeWidth } = this.inkScaledData(); - const screenSpaceCenterlineStrokeWidth = Math.min(3, inkStrokeWidth * this.screenToLocal().inverse().Scale); // the width of the blue line widget that shows the centerline of the ink stroke + const screenSpaceCenterlineStrokeWidth = Math.min(3, inkStrokeWidth * this.ScreenToLocalBoxXf().inverse().Scale); // the width of the blue line widget that shows the centerline of the ink stroke - const screenInkWidth = this.screenToLocal().inverse().transformDirection(inkStrokeWidth, inkStrokeWidth); + const screenInkWidth = this.ScreenToLocalBoxXf().inverse().transformDirection(inkStrokeWidth, inkStrokeWidth); const startMarker = StrCast(this.layoutDoc.stroke_startMarker); const endMarker = StrCast(this.layoutDoc.stroke_endMarker); const markerScale = NumCast(this.layoutDoc.stroke_markerScale); - return SnappingManager.GetIsDragging() ? null : !InkStrokeProperties.Instance._controlButton ? ( - !this.props.isSelected() || InkingStroke.IsClosed(inkData) ? null : ( + return SnappingManager.IsDragging ? null : !InkStrokeProperties.Instance._controlButton ? ( + !this._props.isSelected() || InkingStroke.IsClosed(inkData) ? null : ( <div className="inkstroke-UI" style={{ clip: `rect(${boundsTop}px, 10000px, 10000px, ${boundsLeft}px)` }}> <InkEndPtHandles inkView={this} inkDoc={inkDoc} startPt={this.startPt} endPt={this.endPt} screenSpaceLineWidth={screenSpaceCenterlineStrokeWidth} /> </div> @@ -354,21 +325,21 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() { false )} <InkControlPtHandles inkView={this} inkDoc={inkDoc} inkCtrlPoints={inkData} screenCtrlPoints={this.screenCtrlPts} nearestScreenPt={this.nearestScreenPt} screenSpaceLineWidth={screenSpaceCenterlineStrokeWidth} /> - <InkTangentHandles inkView={this} inkDoc={inkDoc} screenCtrlPoints={this.screenCtrlPts} screenSpaceLineWidth={screenSpaceCenterlineStrokeWidth} ScreenToLocalTransform={this.screenToLocal} /> + <InkTangentHandles inkView={this} inkDoc={inkDoc} screenCtrlPoints={this.screenCtrlPts} screenSpaceLineWidth={screenSpaceCenterlineStrokeWidth} ScreenToLocalTransform={this.ScreenToLocalBoxXf} /> </div> ); }; - _subContentView: DocComponentView | undefined; - setSubContentView = (doc: DocComponentView) => (this._subContentView = doc); + _subContentView: ViewBoxInterface | undefined; + setSubContentView = (doc: ViewBoxInterface) => (this._subContentView = doc); @computed get fillColor() { const isInkMask = BoolCast(this.layoutDoc.stroke_isInkMask); - return isInkMask ? DashColor(StrCast(this.layoutDoc.fillColor, 'transparent')).blacken(0).rgb().toString() : this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.FillColor) ?? 'transparent'; + return isInkMask ? DashColor(StrCast(this.layoutDoc.fillColor, 'transparent')).blacken(0).rgb().toString() : this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FillColor) ?? 'transparent'; } @computed get strokeColor() { const { inkData } = this.inkScaledData(); const fillColor = this.fillColor; - return !InkingStroke.IsClosed(inkData) && fillColor && fillColor !== 'transparent' ? fillColor : this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Color) ?? StrCast(this.layoutDoc.color); + return !InkingStroke.IsClosed(inkData) && fillColor && fillColor !== 'transparent' ? fillColor : this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) ?? StrCast(this.layoutDoc.color); } render() { TraceMobx(); @@ -382,15 +353,15 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() { const fillColor = this.fillColor; // bcz: Hack!! Not really sure why, but having fractional values for width/height of mask ink strokes causes the dragging clone (see DragManager) to be offset from where it should be. - if (isInkMask && (this.layoutDoc[Width]() !== Math.round(this.layoutDoc[Width]()) || this.layoutDoc[Height]() !== Math.round(this.layoutDoc[Height]()))) { + if (isInkMask && (this.layoutDoc._width !== Math.round(NumCast(this.layoutDoc._width)) || this.layoutDoc._height !== Math.round(NumCast(this.layoutDoc._height)))) { setTimeout(() => { - this.layoutDoc._width = Math.round(NumCast(this.layoutDoc[Width]())); - this.layoutDoc._height = Math.round(NumCast(this.layoutDoc[Height]())); + this.layoutDoc._width = Math.round(NumCast(this.layoutDoc._width)); + this.layoutDoc._height = Math.round(NumCast(this.layoutDoc._height)); }); } - const highlight = !this.controlUndo && this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Highlighting); + const highlight = !this.controlUndo && this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Highlighting); const highlightIndex = highlight?.highlightIndex; - const highlightColor = !this.props.isSelected() && !isInkMask && highlight?.highlightIndex ? highlight?.highlightColor : undefined; + const highlightColor = !this._props.isSelected() && !isInkMask && highlight?.highlightIndex ? highlight?.highlightColor : undefined; const color = StrCast(this.layoutDoc.stroke_outlineColor, !closed && fillColor && fillColor !== 'transparent' ? StrCast(this.layoutDoc.color, 'transparent') : 'transparent'); // Visually renders the polygonal line made by the user. @@ -440,7 +411,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() { inkScaleX, inkScaleY, '', - this.props.pointerEvents?.() ?? 'visiblepainted', + this._props.pointerEvents?.() ?? 'visiblepainted', 0.0, false, downHdlr, @@ -453,12 +424,12 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() { const lineHeightGuess = +getComputedStyle(document.body).lineHeight.replace('px', '') / +getComputedStyle(document.body).fontSize.replace('px', ''); const interactions = { onPointerLeave: action(() => (this._nearestScrPt = undefined)), - onPointerMove: this.props.isSelected() ? this.onPointerMove : undefined, + onPointerMove: this._props.isSelected() ? this.onPointerMove : undefined, onClick: (e: React.MouseEvent) => this._handledClick && e.stopPropagation(), onContextMenu: () => { const cm = ContextMenu.Instance; !Doc.noviceMode && cm?.addItem({ description: 'Recognize Writing', event: this.analyzeStrokes, icon: 'paint-brush' }); - cm?.addItem({ description: 'Toggle Mask', event: () => InkingStroke.toggleMask(this.rootDoc), icon: 'paint-brush' }); + cm?.addItem({ description: 'Toggle Mask', event: () => InkingStroke.toggleMask(this.dataDoc), icon: 'paint-brush' }); cm?.addItem({ description: 'Edit Points', event: action(() => (InkStrokeProperties.Instance._controlButton = !InkStrokeProperties.Instance._controlButton)), icon: 'paint-brush' }); }, }; @@ -467,36 +438,36 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() { <svg className="inkStroke" style={{ - transform: isInkMask ? `rotate(-${NumCast(this.props.CollectionFreeFormDocumentView?.().Rot)}deg) translate(${InkingStroke.MaskDim / 2}px, ${InkingStroke.MaskDim / 2}px)` : undefined, + transform: isInkMask ? `rotate(-${NumCast(this._props.CollectionFreeFormDocumentView?.()._props.w_Rotation?.() ?? 0)}deg) translate(${InkingStroke.MaskDim / 2}px, ${InkingStroke.MaskDim / 2}px)` : undefined, // mixBlendMode: this.layoutDoc.tool === InkTool.Highlighter ? 'multiply' : 'unset', - cursor: this.props.isSelected() ? 'default' : undefined, + cursor: this._props.isSelected() ? 'default' : undefined, }} {...interactions}> {clickableLine(this.onPointerDown, isInkMask)} {isInkMask ? null : inkLine} </svg> - {!closed || (!RTFCast(this.rootDoc.text)?.Text && (!this.props.isSelected() || Doc.UserDoc().activeInkHideTextLabels)) ? null : ( + {!closed || (!RTFCast(this.dataDoc.text)?.Text && (!this._props.isSelected() || Doc.UserDoc().activeInkHideTextLabels)) ? null : ( <div className="inkStroke-text" style={{ color: StrCast(this.layoutDoc.textColor, 'black'), - pointerEvents: this.props.isDocumentActive?.() ? 'all' : undefined, - width: this.layoutDoc[Width](), - transform: `scale(${this.props.NativeDimScaling?.() || 1})`, + pointerEvents: this._props.isDocumentActive?.() ? 'all' : undefined, + width: NumCast(this.layoutDoc._width), + transform: `scale(${this._props.NativeDimScaling?.() || 1})`, transformOrigin: 'top left', - //top: (this.props.PanelHeight() - (lineHeightGuess * fsize + 20) * (this.props.NativeDimScaling?.() || 1)) / 2, + //top: (this._props.PanelHeight() - (lineHeightGuess * fsize + 20) * (this._props.NativeDimScaling?.() || 1)) / 2, }}> <FormattedTextBox - {...this.props} + {...this._props} setHeight={undefined} - setContentView={this.setSubContentView} // this makes the inkingStroke the "dominant" component - ie, it will show the inking UI when selected (not text) + setContentViewBox={this.setSubContentView} // this makes the inkingStroke the "dominant" component - ie, it will show the inking UI when selected (not text) yPadding={10} xPadding={10} fieldKey="text" dontRegisterView={true} noSidebar={true} dontScale={true} - isContentActive={this.props.isContentActive} + isContentActive={this._props.isContentActive} /> </div> )} diff --git a/src/client/views/KeyphraseQueryView.tsx b/src/client/views/KeyphraseQueryView.tsx index 13d52db88..e996fc946 100644 --- a/src/client/views/KeyphraseQueryView.tsx +++ b/src/client/views/KeyphraseQueryView.tsx @@ -1,6 +1,6 @@ -import { observer } from "mobx-react"; -import React = require("react"); -import "./KeyphraseQueryView.scss"; +import { observer } from 'mobx-react'; +import * as React from 'react'; +import './KeyphraseQueryView.scss'; // tslint:disable-next-line: class-name export interface KP_Props { @@ -8,7 +8,7 @@ export interface KP_Props { } @observer -export class KeyphraseQueryView extends React.Component<KP_Props>{ +export class KeyphraseQueryView extends React.Component<KP_Props> { constructor(props: KP_Props) { super(props); } @@ -22,13 +22,17 @@ export class KeyphraseQueryView extends React.Component<KP_Props>{ <form> {keyterms.map((kp: string) => { //return (<p>{"-" + kp}</p>); - return (<p><label> - <input name="query" type="radio" /> - <span>{kp}</span> - </label></p>); + return ( + <p> + <label> + <input name="query" type="radio" /> + <span>{kp}</span> + </label> + </p> + ); })} </form> </div> ); } -}
\ No newline at end of file +} diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx index 93eaec959..c7ff7ce47 100644 --- a/src/client/views/LightboxView.tsx +++ b/src/client/views/LightboxView.tsx @@ -1,12 +1,13 @@ +import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Toggle, ToggleType, Type } from 'browndash-components'; -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { Doc, DocListCast, Opt } from '../../fields/Doc'; +import { Doc, DocListCast, FieldResult, Opt } from '../../fields/Doc'; import { InkTool } from '../../fields/InkField'; -import { BoolCast, Cast, NumCast, StrCast } from '../../fields/Types'; -import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnTrue } from '../../Utils'; +import { Cast, NumCast } from '../../fields/Types'; +import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, Utils } from '../../Utils'; import { DocUtils } from '../documents/Documents'; import { DocumentManager } from '../util/DocumentManager'; import { LinkManager } from '../util/LinkManager'; @@ -20,6 +21,8 @@ import { GestureOverlay } from './GestureOverlay'; import './LightboxView.scss'; import { DocumentView, OpenWhere, OpenWhereMod } from './nodes/DocumentView'; import { DefaultStyleProvider, wavyBorderPath } from './StyleProvider'; +import { ObservableReactComponent } from './ObservableReactComponent'; +import { SnappingManager } from '../util/SnappingManager'; interface LightboxViewProps { PanelWidth: number; @@ -27,216 +30,210 @@ interface LightboxViewProps { maxBorder: number[]; } -type LightboxSavedState = { - panX: Opt<number>; - panY: Opt<number>; - scale: Opt<number>; - scrollTop: Opt<number>; - layout_fieldKey: Opt<string>; -}; +const savedKeys = ['freeform_panX', 'freeform_panY', 'freeform_scale', 'layout_scrollTop', 'layout_fieldKey']; +type LightboxSavedState = { [key: string]: FieldResult; }; // prettier-ignore @observer -export class LightboxView extends React.Component<LightboxViewProps> { - @computed public static get LightboxDoc() { - return this._doc; +export class LightboxView extends ObservableReactComponent<LightboxViewProps> { + public static Contains(view?:DocumentView) { return view && LightboxView.Instance?._docView&& (view.containerViewPath?.() ?? []).concat(view).includes(LightboxView.Instance?._docView); } // prettier-ignore + public static get LightboxDoc() { return LightboxView.Instance?._doc; } // prettier-ignore + static Instance: LightboxView; + private _path: { + doc: Opt<Doc>; // + target: Opt<Doc>; + history: { doc: Doc; target?: Doc }[]; + future: Doc[]; + saved: LightboxSavedState; + }[] = []; + private _savedState: LightboxSavedState = {}; + private _history: { doc: Doc; target?: Doc }[] = []; + @observable private _future: Doc[] = []; + @observable private _layoutTemplate: Opt<Doc> = undefined; + @observable private _layoutTemplateString: Opt<string> = undefined; + @observable private _doc: Opt<Doc> = undefined; + @observable private _docTarget: Opt<Doc> = undefined; + @observable private _docView: Opt<DocumentView> = undefined; + + @computed get leftBorder() { return Math.min(this._props.PanelWidth / 4, this._props.maxBorder[0]); } // prettier-ignore + @computed get topBorder() { return Math.min(this._props.PanelHeight / 4, this._props.maxBorder[1]); } // prettier-ignore + + constructor(props: any) { + super(props); + makeObservable(this); + LightboxView.Instance = this; } - private static LightboxDocTemplate = () => LightboxView._layoutTemplate; - @observable private static _layoutTemplate: Opt<Doc>; - @observable private static _layoutTemplateString: Opt<string>; - @observable private static _doc: Opt<Doc>; - @observable private static _docTarget: Opt<Doc>; - @observable private static _childFilters: string[] = []; // filters - private static _savedState: Opt<LightboxSavedState>; - private static _history: Opt<{ doc: Doc; target?: Doc }[]> = []; - @observable private static _future: Opt<Doc[]> = []; - @observable private static _docView: Opt<DocumentView>; - static path: { doc: Opt<Doc>; target: Opt<Doc>; history: Opt<{ doc: Doc; target?: Doc }[]>; future: Opt<Doc[]>; saved: Opt<LightboxSavedState> }[] = []; - @action public static SetLightboxDoc(doc: Opt<Doc>, target?: Doc, future?: Doc[], layoutTemplate?: Doc | string) { - if (this.LightboxDoc && this.LightboxDoc !== doc && this._savedState) { - if (this._savedState.panX !== undefined) this.LightboxDoc._freeform_panX = this._savedState.panX; - if (this._savedState.panY !== undefined) this.LightboxDoc._freeform_panY = this._savedState.panY; - if (this._savedState.scrollTop !== undefined) this.LightboxDoc._layout_scrollTop = this._savedState.scrollTop; - if (this._savedState.scale !== undefined) this.LightboxDoc._freeform_scale = this._savedState.scale; - this.LightboxDoc.layout_fieldKey = this._savedState.layout_fieldKey ? this._savedState.layout_fieldKey : undefined; - } - if (!doc) { - this._childFilters && (this._childFilters.length = 0); - this._future = this._history = []; - Doc.ActiveTool = InkTool.None; - DocumentView.ExploreMode = false; - } else { + + @action + public SetLightboxDoc(doc: Opt<Doc>, target?: Doc, future?: Doc[], layoutTemplate?: Doc | string) { + const lightDoc = this._doc; + lightDoc && lightDoc !== doc && savedKeys.forEach(key => (lightDoc[key] = this._savedState[key])); + this._savedState = {}; + + if (doc) { + lightDoc !== doc && savedKeys.map(key => (this._savedState[key] = Doc.Get(doc, key, true))); const l = DocUtils.MakeLinkToActiveAudio(() => doc).lastElement(); l && (Cast(l.link_anchor_2, Doc, null).backgroundColor = 'lightgreen'); CollectionStackedTimeline.CurrentlyPlaying?.forEach(dv => dv.ComponentView?.Pause?.()); - //TabDocView.PinDoc(doc, { hidePresBox: true }); - this._history ? this._history.push({ doc, target }) : (this._history = [{ doc, target }]); - if (doc !== LightboxView.LightboxDoc) { - this._savedState = { - layout_fieldKey: StrCast(doc.layout_fieldKey), - panX: Cast(doc.freeform_panX, 'number', null), - panY: Cast(doc.freeform_panY, 'number', null), - scale: Cast(doc.freeform_scale, 'number', null), - scrollTop: Cast(doc.layout_scrollTop, 'number', null), - }; - } + this._history.push({ doc, target }); + } else { + this._future = []; + this._history = []; + Doc.ActiveTool = InkTool.None; + SnappingManager.SetExploreMode(false); } + SelectionManager.DeselectAll(); if (future) { - this._future = [ - ...(this._future ?? []), - ...(this.LightboxDoc ? [this.LightboxDoc] : []), + this._future.push( + ...(this._doc ? [this._doc] : []), ...future .slice() .sort((a, b) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow)) - .sort((a, b) => LinkManager.Links(a).length - LinkManager.Links(b).length), - ]; + .sort((a, b) => LinkManager.Links(a).length - LinkManager.Links(b).length) + ); } this._doc = doc; this._layoutTemplate = layoutTemplate instanceof Doc ? layoutTemplate : undefined; if (doc && (typeof layoutTemplate === 'string' ? layoutTemplate : undefined)) { doc.layout_fieldKey = layoutTemplate; } - this._docTarget = target || doc; + this._docTarget = target ?? doc; return true; } - public static IsLightboxDocView(path: DocumentView[]) { - return (path ?? []).includes(this._docView!); - } - @computed get leftBorder() { - return Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]); - } - @computed get topBorder() { - return Math.min(this.props.PanelHeight / 4, this.props.maxBorder[1]); - } - lightboxWidth = () => this.props.PanelWidth - this.leftBorder * 2; - lightboxHeight = () => this.props.PanelHeight - this.topBorder * 2; - lightboxScreenToLocal = () => new Transform(-this.leftBorder, -this.topBorder, 1); - navBtn = (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: string, display: () => string, click: (e: React.MouseEvent) => void, color?: string) => { - return ( - <div - className="lightboxView-navBtn-frame" - style={{ - display: display(), - left, - width: bottom !== undefined ? undefined : Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]), - bottom, - }}> - <div className="lightboxView-navBtn" title={color} style={{ top, color: SettingsManager.userColor, background: undefined }} onClick={click}> - <div style={{ height: 10 }}>{color}</div> - <FontAwesomeIcon icon={icon as any} size="3x" /> - </div> - </div> - ); - }; - public static GetSavedState(doc: Doc) { - return this.LightboxDoc === doc && this._savedState ? this._savedState : undefined; - } - // adds a cookie to the lightbox view - the cookie becomes part of a filter which will display any documents whose cookie metadata field matches this cookie - @action - public static SetCookie(cookie: string) { - if (this.LightboxDoc && cookie) { - this._childFilters = (f => (this._childFilters ? [this._childFilters.push(f) as any, this._childFilters][1] : [f]))(`cookies:${cookie}:provide`); - } - } - public static AddDocTab = (doc: Doc, location: OpenWhere, layoutTemplate?: Doc | string) => { - SelectionManager.DeselectAll(); - return LightboxView.SetLightboxDoc( + public AddDocTab = (doc: Doc, location: OpenWhere, layoutTemplate?: Doc | string) => + this.SetLightboxDoc( doc, undefined, - [...DocListCast(doc[Doc.LayoutFieldKey(doc)]), ...DocListCast(doc[Doc.LayoutFieldKey(doc) + '_annotations']).filter(anno => anno.annotationOn !== doc), ...(LightboxView._future ?? [])].sort( - (a: Doc, b: Doc) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow) + [...DocListCast(doc[Doc.LayoutFieldKey(doc)]), ...DocListCast(doc[Doc.LayoutFieldKey(doc) + '_annotations']).filter(anno => anno.annotationOn !== doc), ...this._future].sort( + (a, b) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow) ), layoutTemplate ); - }; - childFilters = () => LightboxView._childFilters || []; - addDocTab = LightboxView.AddDocTab; - @action public static Next() { - const doc = LightboxView._doc!; - const target = (LightboxView._docTarget = this._future?.pop()); + @action + next = () => { + const lightDoc = this._doc; + if (!lightDoc) return; + const target = (this._docTarget = this._future.pop()); const targetDocView = target && DocumentManager.Instance.getLightboxDocumentView(target); if (targetDocView && target) { const l = DocUtils.MakeLinkToActiveAudio(() => targetDocView.ComponentView?.getAnchor?.(true) || target).lastElement(); l && (Cast(l.link_anchor_2, Doc, null).backgroundColor = 'lightgreen'); DocumentManager.Instance.showDocument(target, { willZoomCentered: true, zoomScale: 0.9 }); - if (LightboxView._history?.lastElement().target !== target) LightboxView._history?.push({ doc, target }); + if (this._history.lastElement().target !== target) this._history.push({ doc: lightDoc, target }); + } else if (!target && this._path.length) { + savedKeys.forEach(key => (lightDoc[key] = this._savedState[key])); + this._path.pop(); } else { - if (!target && LightboxView.path.length) { - const saved = LightboxView._savedState; - if (LightboxView.LightboxDoc && saved) { - LightboxView.LightboxDoc._freeform_panX = saved.panX; - LightboxView.LightboxDoc._freeform_panY = saved.panY; - LightboxView.LightboxDoc._freeform_scale = saved.scale; - LightboxView.LightboxDoc._layout_scrollTop = saved.scrollTop; - } - const pop = LightboxView.path.pop(); - if (pop) { - LightboxView._doc = pop.doc; - LightboxView._docTarget = pop.target; - LightboxView._future = pop.future; - LightboxView._history = pop.history; - LightboxView._savedState = pop.saved; - } - } else { - LightboxView.SetLightboxDoc(target); - } + this.SetLightboxDoc(target); } - } - - @action public static Previous() { - const previous = LightboxView._history?.pop(); - if (!previous || !LightboxView._history?.length) { - LightboxView.SetLightboxDoc(undefined); + }; + @action + previous = () => { + const previous = this._history.pop(); + if (!previous || !this._history.length) { + this.SetLightboxDoc(undefined); return; } - const { doc, target } = LightboxView._history?.lastElement(); + const { doc, target } = this._history.lastElement(); const docView = DocumentManager.Instance.getLightboxDocumentView(target || doc); if (docView) { - LightboxView._docTarget = target; + this._docTarget = target; target && DocumentManager.Instance.showDocument(target, { willZoomCentered: true, zoomScale: 0.9 }); } else { - LightboxView.SetLightboxDoc(doc, target); + this.SetLightboxDoc(doc, target); } - if (LightboxView._future?.lastElement() !== previous.target || previous.doc) LightboxView._future?.push(previous.target || previous.doc); - } + if (this._future.lastElement() !== previous.target || previous.doc) this._future.push(previous.target || previous.doc); + }; @action stepInto = () => { - LightboxView.path.push({ - doc: LightboxView.LightboxDoc, - target: LightboxView._docTarget, - future: LightboxView._future, - history: LightboxView._history, - saved: LightboxView._savedState, + this._path.push({ + doc: this._doc, + target: this._docTarget, + future: this._future, + history: this._history, + saved: this._savedState, }); - const coll = LightboxView._docTarget; - if (coll) { - const fieldKey = Doc.LayoutFieldKey(coll); - const contents = [...DocListCast(coll[fieldKey]), ...DocListCast(coll[fieldKey + '_annotations'])]; - const links = LinkManager.Links(coll) - .map(link => LinkManager.getOppositeAnchor(link, coll)) - .filter(doc => doc) - .map(doc => doc!); - LightboxView.SetLightboxDoc(coll, undefined, contents.length ? contents : links); + if (this._docTarget) { + const fieldKey = Doc.LayoutFieldKey(this._docTarget); + const contents = [...DocListCast(this._docTarget[fieldKey]), ...DocListCast(this._docTarget[fieldKey + '_annotations'])]; + const links = LinkManager.Links(this._docTarget) + .map(link => LinkManager.getOppositeAnchor(link, this._docTarget!)!) + .filter(doc => doc); + this.SetLightboxDoc(this._docTarget, undefined, contents.length ? contents : links); + } + }; + + downloadDoc = () => { + const lightDoc = this._docTarget ?? this._doc; + if (lightDoc) { + Doc.RemoveDocFromList(Doc.MyRecentlyClosed, 'data', lightDoc); + CollectionDockingView.AddSplit(lightDoc, OpenWhereMod.none); + this.SetLightboxDoc(undefined); } }; + toggleFitWidth = () => this._doc && (this._doc._layout_fitWidth = !this._doc._layout_fitWidth); + togglePen = () => (Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen); + toggleExplore = () => SnappingManager.SetExploreMode(!SnappingManager.ExploreMode); - future = () => LightboxView._future; + lightboxDoc = () => this._doc; + lightboxWidth = () => this._props.PanelWidth - this.leftBorder * 2; + lightboxHeight = () => this._props.PanelHeight - this.topBorder * 2; + lightboxScreenToLocal = () => new Transform(-this.leftBorder, -this.topBorder, 1); + lightboxDocTemplate = () => this._layoutTemplate; + future = () => this._future; + + renderNavBtn = (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: IconProp, display: any, click: () => void, color?: string) => { + return ( + <div + className="lightboxView-navBtn-frame" + style={{ + display: display ? '' : 'none', + left, + width: bottom !== undefined ? undefined : Math.min(this._props.PanelWidth / 4, this._props.maxBorder[0]), + bottom, + }}> + <div + className="lightboxView-navBtn" + title={color} + style={{ top, color: SettingsManager.userColor, background: undefined }} + onClick={e => { + e.stopPropagation(); + click(); + }}> + <div style={{ height: 10 }}>{color}</div> + <FontAwesomeIcon icon={icon} size="3x" /> + </div> + </div> + ); + }; render() { let downx = 0, downy = 0; - return !LightboxView.LightboxDoc ? null : ( + const toggleBtn = (classname: string, tooltip: string, toggleBackground: any, icon: IconProp, icon2: IconProp | string, onClick: () => void) => ( + <div className={classname}> + <Toggle + tooltip={tooltip} + color={SettingsManager.userColor} + background={toggleBackground ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor} + toggleType={ToggleType.BUTTON} + type={Type.TERT} + icon={<FontAwesomeIcon icon={toggleBackground ? icon : (icon2 as IconProp) || icon} size="sm" />} + onClick={e => { + e.stopPropagation(); + runInAction(onClick); + }} + /> + </div> + ); + return !this._doc ? null : ( <div className="lightboxView-frame" + style={{ background: SettingsManager.userBackgroundColor }} onPointerDown={e => { downx = e.clientX; downy = e.clientY; }} - style={{ background: SettingsManager.userBackgroundColor }} - onClick={e => { - if (Math.abs(downx - e.clientX) < 4 && Math.abs(downy - e.clientY) < 4) { - LightboxView.SetLightboxDoc(undefined); - } - }}> + onClick={e => Utils.isClick(e.clientX, e.clientY, downx, downy, Date.now()) && this.SetLightboxDoc(undefined)}> <div className="lightboxView-contents" style={{ @@ -248,148 +245,61 @@ export class LightboxView extends React.Component<LightboxViewProps> { background: SettingsManager.userBackgroundColor, color: SettingsManager.userColor, }}> - {/* <CollectionMenu /> TODO:glr This is where it would go*/} - <GestureOverlay isActive={true}> <DocumentView - ref={action((r: DocumentView | null) => (LightboxView._docView = r !== null ? r : undefined))} - Document={LightboxView.LightboxDoc} - DataDoc={undefined} + ref={action((r: DocumentView | null) => (this._docView = r !== null ? r : undefined))} + Document={this._doc} PanelWidth={this.lightboxWidth} PanelHeight={this.lightboxHeight} - LayoutTemplate={LightboxView.LightboxDocTemplate} + LayoutTemplate={this.lightboxDocTemplate} isDocumentActive={returnTrue} // without this being true, sidebar annotations need to be activated before text can be selected. isContentActive={returnTrue} styleProvider={DefaultStyleProvider} ScreenToLocalTransform={this.lightboxScreenToLocal} renderDepth={0} - rootSelected={returnTrue} - docViewPath={returnEmptyDoclist} - childFilters={this.childFilters} + containerViewPath={returnEmptyDoclist} + childFilters={returnEmptyFilter} childFiltersByRanges={returnEmptyFilter} searchFilterDocs={returnEmptyDoclist} addDocument={undefined} removeDocument={undefined} whenChildContentsActiveChanged={emptyFunction} - addDocTab={this.addDocTab} + addDocTab={this.AddDocTab} pinToPres={TabDocView.PinDoc} - bringToFront={emptyFunction} - onBrowseClick={DocumentView.exploreMode} + onBrowseClickScript={DocumentView.exploreMode} focus={emptyFunction} /> </GestureOverlay> </div> - {this.navBtn( - 0, + {this.renderNavBtn(0, undefined, this._props.PanelHeight / 2 - 12.5, 'chevron-left', this._doc && this._history.length, this.previous)} + {this.renderNavBtn( + this._props.PanelWidth - Math.min(this._props.PanelWidth / 4, this._props.maxBorder[0]), undefined, - this.props.PanelHeight / 2 - 12.5, - 'chevron-left', - () => (LightboxView.LightboxDoc && LightboxView._history?.length ? '' : 'none'), - e => { - e.stopPropagation(); - LightboxView.Previous(); - } - )} - {this.navBtn( - this.props.PanelWidth - Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]), - undefined, - this.props.PanelHeight / 2 - 12.5, + this._props.PanelHeight / 2 - 12.5, 'chevron-right', - () => (LightboxView.LightboxDoc && LightboxView._future?.length ? '' : 'none'), - e => { - e.stopPropagation(); - LightboxView.Next(); - }, - this.future()?.length.toString() + this._doc && this._future.length, + this.next, + this.future().length.toString() )} - <LightboxTourBtn navBtn={this.navBtn} future={this.future} stepInto={this.stepInto} /> - <div className="lightboxView-navBtn"> - <Toggle - tooltip="toggle reading view" - color={SettingsManager.userColor} - background={BoolCast(LightboxView.LightboxDoc!._layout_fitWidth) ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor} - toggleType={ToggleType.BUTTON} - type={Type.TERT} - toggleStatus={BoolCast(LightboxView.LightboxDoc!._layout_fitWidth)} - onClick={e => { - e.stopPropagation(); - LightboxView.LightboxDoc!._layout_fitWidth = !LightboxView.LightboxDoc!._layout_fitWidth; - }} - icon={<FontAwesomeIcon icon={LightboxView.LightboxDoc?._layout_fitWidth ? 'book-open' : 'book'} size="sm" />} - /> - </div> - <div className="lightboxView-tabBtn"> - <Toggle - tooltip="open document in a tab" - color={SettingsManager.userColor} - background={SettingsManager.userBackgroundColor} - toggleType={ToggleType.BUTTON} - type={Type.TERT} - icon={<FontAwesomeIcon icon="file-download" size="sm" />} - onClick={e => { - const lightdoc = LightboxView._docTarget || LightboxView._doc!; - e.stopPropagation(); - Doc.RemoveDocFromList(Doc.MyRecentlyClosed, 'data', lightdoc); - CollectionDockingView.AddSplit(lightdoc, OpenWhereMod.none); - SelectionManager.DeselectAll(); - LightboxView.SetLightboxDoc(undefined); - }} - /> - </div> - <div className="lightboxView-penBtn"> - <Toggle - tooltip="toggle pen annotation" - color={SettingsManager.userColor} - background={Doc.ActiveTool === InkTool.Pen ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor} - toggleType={ToggleType.BUTTON} - toggleStatus={Doc.ActiveTool === InkTool.Pen} - type={Type.TERT} - icon={<FontAwesomeIcon icon="pen" size="sm" />} - onClick={e => { - e.stopPropagation(); - Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen; - }} - /> - </div> - <div className="lightboxView-exploreBtn"> - <Toggle - tooltip="toggle explore mode to navigate among documents only" - color={SettingsManager.userColor} - background={DocumentView.ExploreMode ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor} - toggleType={ToggleType.BUTTON} - type={Type.TERT} - toggleStatus={DocumentView.ExploreMode} - icon={<FontAwesomeIcon icon="globe-americas" size="sm" />} - onClick={action(e => { - e.stopPropagation(); - DocumentView.ExploreMode = !DocumentView.ExploreMode; - })} - /> - </div> + <LightboxTourBtn lightboxDoc={this.lightboxDoc} navBtn={this.renderNavBtn} future={this.future} stepInto={this.stepInto} /> + {toggleBtn('lightboxView-navBtn', 'toggle reading view', this._doc?._layout_fitWidth, 'book-open', 'book', this.toggleFitWidth)} + {toggleBtn('lightboxView-tabBtn', 'open document in a tab', false, 'file-download', '', this.downloadDoc)} + {toggleBtn('lightboxView-penBtn', 'toggle pen annotation', Doc.ActiveTool === InkTool.Pen, 'pen', '', this.togglePen)} + {toggleBtn('lightboxView-exploreBtn', 'toggle navigate only mode', SnappingManager.ExploreMode, 'globe-americas', '', this.toggleExplore)} </div> ); } } interface LightboxTourBtnProps { - navBtn: (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: string, display: () => string, click: (e: React.MouseEvent) => void, color?: string) => JSX.Element; + navBtn: (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: IconProp, display: any, click: () => void, color?: string) => JSX.Element; future: () => Opt<Doc[]>; stepInto: () => void; + lightboxDoc: () => Opt<Doc>; } @observer export class LightboxTourBtn extends React.Component<LightboxTourBtnProps> { render() { - return this.props.navBtn( - '50%', - 0, - 0, - 'chevron-down', - () => (LightboxView.LightboxDoc /*&& this.props.future()?.length*/ ? '' : 'none'), - e => { - e.stopPropagation(); - this.props.stepInto(); - }, - '' - ); + return this.props.navBtn('50%', 0, 0, 'chevron-down', this.props.lightboxDoc(), this.props.stepInto, ''); } } diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index a403a10e3..02916e48e 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -1,4 +1,4 @@ -@import 'global/globalCssVariables'; +@import 'global/globalCssVariables.module'; @import 'nodeModuleOverrides'; :root { diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 96bd52d39..17c21326d 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -22,7 +22,10 @@ FieldLoader.ServerLoadStatus = { requested: 0, retrieved: 0, message: 'cache' }; (async () => { MainView.Live = window.location.search.includes('live'); - const root = ReactDOM.createRoot(document.getElementById('root')!); + const rootEle = document.getElementById('root'); + if (!rootEle) return; + rootEle.style.zIndex = '0'; + const root = ReactDOM.createRoot(rootEle); root.render(<FieldLoader />); window.location.search.includes('safe') && CollectionView.SetSafeMode(true); const info = await CurrentUserUtils.loadCurrentUser(); diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index 4fb2ac279..28a0f7750 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -1,4 +1,4 @@ -@import 'global/globalCssVariables'; +@import 'global/globalCssVariables.module.scss'; @import 'nodeModuleOverrides'; html { overscroll-behavior-x: none; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index da5e4f966..eca0aca4c 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -3,76 +3,81 @@ import { faBuffer, faHireAHelper } from '@fortawesome/free-brands-svg-icons'; import * as far from '@fortawesome/free-regular-svg-icons'; import * as fa from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import 'browndash-components/dist/styles/global.min.css'; -import { action, computed, configure, observable, runInAction } from 'mobx'; +import { action, computed, configure, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import 'normalize.css'; import * as React from 'react'; +import '../../../node_modules/browndash-components/dist/styles/global.min.css'; +import { Utils, emptyFunction, lightOrDark, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, returnZero, setupMoveUpEvents } from '../../Utils'; import { Doc, DocListCast, Opt } from '../../fields/Doc'; import { DocCast, StrCast } from '../../fields/Types'; -import { emptyFunction, lightOrDark, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, returnZero, setupMoveUpEvents, Utils } from '../../Utils'; -import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager'; import { DocServer } from '../DocServer'; -import { Docs } from '../documents/Documents'; +import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager'; import { CollectionViewType, DocumentType } from '../documents/DocumentTypes'; +import { Docs } from '../documents/Documents'; +import { CalendarManager } from '../util/CalendarManager'; import { CaptureManager } from '../util/CaptureManager'; import { DocumentManager } from '../util/DocumentManager'; import { DragManager } from '../util/DragManager'; import { GroupManager } from '../util/GroupManager'; import { HistoryUtil } from '../util/History'; import { Hypothesis } from '../util/HypothesisUtils'; -import { ReportManager } from '../util/reportManager/ReportManager'; import { RTFMarkup } from '../util/RTFMarkup'; import { ScriptingGlobals } from '../util/ScriptingGlobals'; import { SelectionManager } from '../util/SelectionManager'; import { ServerStats } from '../util/ServerStats'; -import { ColorScheme, SettingsManager } from '../util/SettingsManager'; +import { SettingsManager } from '../util/SettingsManager'; import { SharingManager } from '../util/SharingManager'; import { SnappingManager } from '../util/SnappingManager'; import { Transform } from '../util/Transform'; -import { TimelineMenu } from './animationtimeline/TimelineMenu'; -import { CollectionDockingView } from './collections/CollectionDockingView'; -import { MarqueeOptionsMenu } from './collections/collectionFreeForm/MarqueeOptionsMenu'; -import { CollectionLinearView } from './collections/collectionLinear'; -import { CollectionMenu } from './collections/CollectionMenu'; -import './collections/TreeView.scss'; +import { ReportManager } from '../util/reportManager/ReportManager'; import { ComponentDecorations } from './ComponentDecorations'; import { ContextMenu } from './ContextMenu'; 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'; -import { LinkMenu } from './linking/LinkMenu'; import './MainView.scss'; +import { ObservableReactComponent } from './ObservableReactComponent'; +import { OverlayView } from './OverlayView'; +import { PreviewCursor } from './PreviewCursor'; +import { PropertiesView } from './PropertiesView'; +import { DashboardStyleProvider, DefaultStyleProvider } from './StyleProvider'; +import { TimelineMenu } from './animationtimeline/TimelineMenu'; +import { CollectionDockingView } from './collections/CollectionDockingView'; +import { CollectionMenu } from './collections/CollectionMenu'; +import { TabDocView } from './collections/TabDocView'; +import './collections/TreeView.scss'; +import { CollectionFreeFormLinksView } from './collections/collectionFreeForm'; +import { MarqueeOptionsMenu } from './collections/collectionFreeForm/MarqueeOptionsMenu'; +import { CollectionLinearView } from './collections/collectionLinear'; +import { LinkMenu } from './linking/LinkMenu'; import { AudioBox } from './nodes/AudioBox'; -import { DocumentLinksButton } from './nodes/DocumentLinksButton'; -import { DocumentView, DocumentViewInternal, OpenWhere, OpenWhereMod } from './nodes/DocumentView'; -import { DashFieldViewMenu } from './nodes/formattedText/DashFieldView'; -import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox'; -import { RichTextMenu } from './nodes/formattedText/RichTextMenu'; -import GenerativeFill from './nodes/generativeFill/GenerativeFill'; +import { SchemaCSVPopUp } from './nodes/DataVizBox/SchemaCSVPopUp'; +import { DocButtonState } from './nodes/DocumentLinksButton'; +import { DocumentView, DocumentViewInternal, OpenWhere, OpenWhereMod, returnEmptyDocViewList } from './nodes/DocumentView'; import { ImageBox } from './nodes/ImageBox'; import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup'; -import { LinkDocPreview } from './nodes/LinkDocPreview'; +import { LinkDocPreview, LinkInfo } from './nodes/LinkDocPreview'; +import { DirectionsAnchorMenu } from './nodes/MapBox/DirectionsAnchorMenu'; import { MapAnchorMenu } from './nodes/MapBox/MapAnchorMenu'; -import { MapBox } from './nodes/MapBox/MapBox'; -import { RadialMenu } from './nodes/RadialMenu'; import { TaskCompletionBox } from './nodes/TaskCompletedBox'; -import { OverlayView } from './OverlayView'; +import { DashFieldViewMenu } from './nodes/formattedText/DashFieldView'; +import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox'; +import { RichTextMenu } from './nodes/formattedText/RichTextMenu'; +import GenerativeFill from './nodes/generativeFill/GenerativeFill'; +import { PresBox } from './nodes/trails'; import { AnchorMenu } from './pdf/AnchorMenu'; import { GPTPopup } from './pdf/GPTPopup/GPTPopup'; -import { PreviewCursor } from './PreviewCursor'; -import { PropertiesView } from './PropertiesView'; -import { DashboardStyleProvider, DefaultStyleProvider } from './StyleProvider'; import { TopBar } from './topbar/TopBar'; +import { DocData } from '../../fields/DocSymbols'; +const { default: { LEFT_MENU_WIDTH, TOPBAR_HEIGHT } } = require('./global/globalCssVariables.module.scss'); // prettier-ignore const _global = (window /* browser */ || global) /* node */ as any; @observer -export class MainView extends React.Component { +export class MainView extends ObservableReactComponent<{}> { public static Instance: MainView; public static Live: boolean = false; private _docBtnRef = React.createRef<HTMLDivElement>(); @@ -112,7 +117,7 @@ export class MainView extends React.Component { @computed private get userDoc() { return Doc.UserDoc(); } - @observable mainDoc: Opt<Doc>; + @observable mainDoc: Opt<Doc> = undefined; @computed private get mainContainer() { if (window.location.pathname.startsWith('/doc/') && Doc.CurrentUserEmail === 'guest') { DocServer.GetRefField(window.location.pathname.substring('/doc/'.length)).then(main => runInAction(() => (this.mainDoc = main as Doc))); @@ -126,21 +131,36 @@ export class MainView extends React.Component { @computed public get mainFreeform(): Opt<Doc> { return (docs => (docs?.length > 1 ? docs[1] : undefined))(DocListCast(this.mainContainer!.data)); } + @observable public headerBarHeight: number = 0; + headerBarHeightFunc = () => this.headerBarHeight; + @action + toggleTopBar = () => { + if (this.headerBarHeight > 0) { + this.headerBarHeight = 0; + } else { + this.headerBarHeight = 60; + } + }; headerBarDocWidth = () => this.mainDocViewWidth(); - headerBarDocHeight = () => (this._hideUI ? 0 : SettingsManager.headerBarHeight ?? 0); + headerBarDocHeight = () => (this._hideUI ? 0 : this.headerBarHeight ?? 0); topMenuHeight = () => (this._hideUI ? 0 : 35); topMenuWidth = returnZero; // value is ignored ... leftMenuWidth = () => (this._hideUI ? 0 : Number(LEFT_MENU_WIDTH.replace('px', ''))); leftMenuHeight = () => this._dashUIHeight; leftMenuFlyoutWidth = () => this._leftMenuFlyoutWidth; leftMenuFlyoutHeight = () => this._dashUIHeight; - propertiesWidth = () => Math.max(0, Math.min(this._dashUIWidth - 50, SettingsManager.propertiesWidth || 0)); + propertiesWidth = () => Math.max(0, Math.min(this._dashUIWidth - 50, SettingsManager.Instance?.propertiesWidth || 0)); propertiesHeight = () => this._dashUIHeight; mainDocViewWidth = () => this._dashUIWidth - this.propertiesWidth() - this.leftMenuWidth() - this.leftMenuFlyoutWidth(); mainDocViewHeight = () => this._dashUIHeight - this.headerBarDocHeight(); componentDidMount() { + reaction( + // when a multi-selection occurs, remove focus from all active elements to allow keyboad input to go only to global key manager to act upon selection + () => SelectionManager.Views.slice(), + views => views.length > 1 && (document.activeElement as any)?.blur !== undefined && (document.activeElement as any)!.blur() + ); const scriptTag = document.createElement('script'); scriptTag.setAttribute('type', 'text/javascript'); scriptTag.setAttribute('src', 'https://www.bing.com/api/maps/mapcontrol?callback=makeMap'); @@ -194,6 +214,10 @@ export class MainView extends React.Component { tag.src = 'https://www.youtube.com/iframe_api'; const firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode!.insertBefore(tag, firstScriptTag); + window.removeEventListener('keydown', KeyManager.Instance.handleModifiers, true); + window.addEventListener('keydown', KeyManager.Instance.handleModifiers, true); + window.removeEventListener('keyup', KeyManager.Instance.unhandleModifiers); + window.addEventListener('keyup', KeyManager.Instance.unhandleModifiers); window.removeEventListener('keydown', KeyManager.Instance.handle); window.addEventListener('keydown', KeyManager.Instance.handle); window.removeEventListener('keyup', KeyManager.Instance.unhandle); @@ -218,8 +242,9 @@ export class MainView extends React.Component { document.removeEventListener('linkAnnotationToDash', Hypothesis.linkListener); } - constructor(props: Readonly<{}>) { + constructor(props: any) { super(props); + makeObservable(this); DocumentViewInternal.addDocTabFunc = MainView.addDocTabFunc_impl; MainView.Instance = this; DashboardView._urlState = HistoryUtil.parseUrl(window.location) || ({} as any); @@ -250,6 +275,7 @@ export class MainView extends React.Component { fa.faShare, fa.faTaxi, fa.faDownload, + fa.faPallet, fa.faExpandArrowsAlt, fa.faAmbulance, fa.faLayerGroup, @@ -261,6 +287,8 @@ export class MainView extends React.Component { fa.faWindowRestore, fa.faFolder, fa.faFolderOpen, + fa.faFolderPlus, + fa.faFolderClosed, fa.faMapPin, fa.faMapMarker, fa.faFingerprint, @@ -450,6 +478,7 @@ export class MainView extends React.Component { fa.faSortUp, fa.faSortDown, fa.faTable, + fa.faTableCells, fa.faTableColumns, fa.faTh, fa.faThList, @@ -475,11 +504,11 @@ export class MainView extends React.Component { fa.faBookmark, fa.faList, fa.faListOl, - fa.faFolderPlus, fa.faLightbulb, fa.faBookOpen, fa.faMapMarkerAlt, fa.faSearchPlus, + fa.faSolarPanel, fa.faVolumeUp, fa.faVolumeDown, fa.faSquareRootAlt, @@ -560,7 +589,7 @@ export class MainView extends React.Component { @action openPresentation = (pres: Doc) => { if (pres.type === DocumentType.PRES) { - CollectionDockingView.AddSplit(pres, OpenWhereMod.right); + CollectionDockingView.AddSplit(pres, OpenWhereMod.right, undefined, PresBox.PanelName); Doc.MyTrails && (Doc.ActivePresentation = pres); Doc.AddDocToList(Doc.MyTrails, 'data', pres); this.closeFlyout(); @@ -573,7 +602,7 @@ export class MainView extends React.Component { Doc.AddDocToList(Doc.MyFilesystem, 'data', folder); }; - waitForDoubleClick = () => (DocumentView.ExploreMode ? 'never' : undefined); + waitForDoubleClick = () => (SnappingManager.ExploreMode ? 'never' : undefined); headerBarScreenXf = () => new Transform(-this.leftScreenOffsetOfMainDocView - this.leftMenuFlyoutWidth(), -this.headerBarDocHeight(), 1); mainScreenToLocalXf = () => new Transform(-this.leftScreenOffsetOfMainDocView - this.leftMenuFlyoutWidth(), -this.topOfMainDocContent, 1); addHeaderDoc = (doc: Doc | Doc[], annotationKey?: string) => (doc instanceof Doc ? [doc] : doc).reduce((done, doc) => Doc.AddDocToList(this.headerBarDoc, 'data', doc), true); @@ -584,19 +613,17 @@ export class MainView extends React.Component { <DocumentView key="headerBarDoc" Document={this.headerBarDoc} - DataDoc={undefined} addDocTab={DocumentViewInternal.addDocTabFunc} pinToPres={emptyFunction} - docViewPath={returnEmptyDoclist} + containerViewPath={returnEmptyDoclist} styleProvider={DefaultStyleProvider} - rootSelected={returnTrue} addDocument={this.addHeaderDoc} removeDocument={this.removeHeaderDoc} fitContentsToBox={returnTrue} isDocumentActive={returnTrue} // headerBar is always documentActive (ie, the docView gets pointer events) isContentActive={returnTrue} // headerBar is awlays contentActive which means its items are always documentActive ScreenToLocalTransform={this.headerBarScreenXf} - childHideResizeHandles={returnTrue} + childHideResizeHandles={true} childDragAction="move" dontRegisterView={true} hideResizeHandles={true} @@ -605,7 +632,6 @@ export class MainView extends React.Component { renderDepth={0} focus={emptyFunction} whenChildContentsActiveChanged={emptyFunction} - bringToFront={emptyFunction} childFilters={returnEmptyFilter} childFiltersByRanges={returnEmptyFilter} searchFilterDocs={returnEmptyDoclist} @@ -614,19 +640,19 @@ export class MainView extends React.Component { ); } @computed get mainDocView() { + const headerBar = this._hideUI || !this.headerBarDocHeight?.() ? null : this.headerBarDocView; + console.log('Header = ' + this._hideUI + ' ' + this.headerBarDocHeight?.() + ' ' + headerBar); return ( <> - {this._hideUI || !this.headerBarDocHeight?.() ? null : this.headerBarDocView} + {headerBar} <DocumentView key="main" Document={this.mainContainer!} - DataDoc={undefined} addDocument={undefined} addDocTab={DocumentViewInternal.addDocTabFunc} pinToPres={emptyFunction} - docViewPath={returnEmptyDoclist} + containerViewPath={returnEmptyDoclist} styleProvider={this._hideUI ? DefaultStyleProvider : undefined} - rootSelected={returnTrue} isContentActive={returnTrue} removeDocument={undefined} ScreenToLocalTransform={this._hideUI ? this.mainScreenToLocalXf : Transform.Identity} @@ -634,7 +660,6 @@ export class MainView extends React.Component { PanelHeight={this.mainDocViewHeight} focus={emptyFunction} whenChildContentsActiveChanged={emptyFunction} - bringToFront={emptyFunction} childFilters={returnEmptyFilter} childFiltersByRanges={returnEmptyFilter} searchFilterDocs={returnEmptyDoclist} @@ -671,9 +696,9 @@ export class MainView extends React.Component { setupMoveUpEvents( this, e, - action(e => ((SettingsManager.propertiesWidth = Math.max(0, this._dashUIWidth - e.clientX)) ? false : false)), - action(() => SettingsManager.propertiesWidth < 5 && (SettingsManager.propertiesWidth = 0)), - action(() => (SettingsManager.propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._dashUIWidth - 50, 250) : 0)), + action(e => ((SettingsManager.Instance.propertiesWidth = Math.max(0, this._dashUIWidth - e.clientX)) ? false : false)), + action(() => SettingsManager.Instance.propertiesWidth < 5 && (SettingsManager.Instance.propertiesWidth = 0)), + action(() => (SettingsManager.Instance.propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._dashUIWidth - 50, 250) : 0)), false ); }; @@ -693,16 +718,17 @@ export class MainView extends React.Component { mainContainerXf = () => this.sidebarScreenToLocal().translate(-this.leftScreenOffsetOfMainDocView, 0); static addDocTabFunc_impl = (doc: Doc, location: OpenWhere): boolean => { const whereFields = location.split(':'); - const keyValue = whereFields[1]?.includes('KeyValue'); - const whereMods: OpenWhereMod = whereFields.length > 1 ? (whereFields[1].replace('KeyValue', '') as OpenWhereMod) : OpenWhereMod.none; + const keyValue = whereFields.includes(OpenWhereMod.keyvalue); + const whereMods = whereFields.length > 1 ? (whereFields[1] as OpenWhereMod) : OpenWhereMod.none; + const panelName = whereFields.length > 1 ? whereFields.lastElement() : ''; if (doc.dockingConfig && !keyValue) return DashboardView.openDashboard(doc); - // prettier-ignore switch (whereFields[0]) { - case OpenWhere.lightbox: return LightboxView.AddDocTab(doc, location); + case OpenWhere.lightbox: return LightboxView.Instance.AddDocTab(doc, location); case OpenWhere.close: return CollectionDockingView.CloseSplit(doc, whereMods); - case OpenWhere.toggle: return CollectionDockingView.ToggleSplit(doc, whereMods, undefined, "dontSelectOnActivate"); // bcz: hack! mark the toggle so that it won't be selected on activation- this is needed so that the backlinks menu can toggle views of targets on and off without selecting them + case OpenWhere.toggle: return CollectionDockingView.ToggleSplit(doc, whereMods, undefined, TabDocView.DontSelectOnActivate); // bcz: hack! mark the toggle so that it won't be selected on activation- this is needed so that the backlinks menu can toggle views of targets on and off without selecting them + case OpenWhere.replace: return CollectionDockingView.ReplaceTab(doc, whereMods, undefined, panelName); case OpenWhere.add:default:return CollectionDockingView.AddSplit(doc, whereMods, undefined, undefined, keyValue); - } + } // prettier-ignore }; @computed get flyout() { @@ -715,13 +741,11 @@ export class MainView extends React.Component { <div className="mainView-contentArea"> <DocumentView Document={this._sidebarContent.proto || this._sidebarContent} - DataDoc={undefined} addDocument={undefined} addDocTab={DocumentViewInternal.addDocTabFunc} - pinToPres={emptyFunction} - docViewPath={returnEmptyDoclist} - styleProvider={this._sidebarContent.proto === Doc.MyDashboards || this._sidebarContent.proto === Doc.MyFilesystem ? DashboardStyleProvider : DefaultStyleProvider} - rootSelected={returnTrue} + pinToPres={TabDocView.PinDoc} + containerViewPath={returnEmptyDoclist} + styleProvider={this._sidebarContent.proto === Doc.MyDashboards || this._sidebarContent.proto === Doc.MyFilesystem || this._sidebarContent.proto === Doc.MyTrails ? DashboardStyleProvider : DefaultStyleProvider} removeDocument={returnFalse} ScreenToLocalTransform={this.mainContainerXf} PanelWidth={this.leftMenuFlyoutWidth} @@ -730,7 +754,6 @@ export class MainView extends React.Component { isContentActive={returnTrue} focus={emptyFunction} whenChildContentsActiveChanged={emptyFunction} - bringToFront={emptyFunction} childFilters={returnEmptyFilter} childFiltersByRanges={returnEmptyFilter} searchFilterDocs={returnEmptyDoclist} @@ -746,22 +769,19 @@ export class MainView extends React.Component { <div key="menu" className="mainView-leftMenuPanel" style={{ background: SettingsManager.userBackgroundColor, display: LightboxView.LightboxDoc ? 'none' : undefined }}> <DocumentView Document={Doc.MyLeftSidebarMenu} - DataDoc={undefined} addDocument={undefined} addDocTab={DocumentViewInternal.addDocTabFunc} pinToPres={emptyFunction} - rootSelected={returnTrue} removeDocument={returnFalse} ScreenToLocalTransform={this.sidebarScreenToLocal} PanelWidth={this.leftMenuWidth} PanelHeight={this.leftMenuHeight} renderDepth={0} - docViewPath={returnEmptyDoclist} + containerViewPath={returnEmptyDoclist} focus={emptyFunction} styleProvider={DefaultStyleProvider} isContentActive={returnTrue} whenChildContentsActiveChanged={emptyFunction} - bringToFront={emptyFunction} childFilters={returnEmptyFilter} childFiltersByRanges={returnEmptyFilter} searchFilterDocs={returnEmptyDoclist} @@ -772,7 +792,7 @@ export class MainView extends React.Component { @action selectMenu = (button: Doc) => { - const title = StrCast(Doc.GetProto(button).title); + const title = StrCast(button[DocData].title); const willOpen = !this._leftMenuFlyoutWidth || this._panelContent !== title; this.closeFlyout(); if (willOpen) { @@ -860,11 +880,11 @@ export class MainView extends React.Component { //setTimeout(action(() => (this._leftMenuFlyoutWidth += 0.5))); this._sidebarContent.proto = DocCast(button.target); - DocumentView.LastPressedSidebarBtn = button; + SettingsManager.Instance.SetLastPressedBtn(button); }); closeFlyout = action(() => { - DocumentView.LastPressedSidebarBtn = undefined; + SettingsManager.Instance.SetLastPressedBtn(undefined); this._panelContent = 'none'; this._sidebarContent.proto = undefined; this._leftMenuFlyoutWidth = 0; @@ -885,18 +905,14 @@ export class MainView extends React.Component { <div className="mainView-docButtons" style={{ background: SettingsManager.userBackgroundColor, color: SettingsManager.userColor }} ref={this._docBtnRef}> <CollectionLinearView Document={Doc.MyDockedBtns} - DataDoc={undefined} + docViewPath={returnEmptyDocViewList} fieldKey="data" dropAction="embed" - setHeight={returnFalse} styleProvider={DefaultStyleProvider} - rootSelected={returnTrue} - bringToFront={emptyFunction} select={emptyFunction} isAnyChildContentActive={returnFalse} isContentActive={emptyFunction} isSelected={returnFalse} - docViewPath={returnEmptyDoclist} moveDocument={this.moveButtonDoc} addDocument={this.addButtonDoc} addDocTab={DocumentViewInternal.addDocTabFunc} @@ -917,18 +933,16 @@ export class MainView extends React.Component { ); } @computed get snapLines() { - SnappingManager.GetIsDragging(); - SnappingManager.GetIsResizing(); - const dragged = DragManager.docsBeingDragged.lastElement() ?? SelectionManager.Docs().lastElement(); - const dragPar = dragged ? DocumentManager.Instance.getDocumentView(dragged)?.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView : undefined; - return !dragPar?.rootDoc.freeform_snapLines ? null : ( + const dragged = DragManager.docsBeingDragged.lastElement() ?? SelectionManager.Docs.lastElement(); + const dragPar = dragged ? DocumentManager.Instance.getDocumentView(dragged)?.CollectionFreeFormView : undefined; + return !dragPar?.layoutDoc.freeform_snapLines ? null : ( <div className="mainView-snapLines"> <svg style={{ width: '100%', height: '100%' }}> - {SnappingManager.horizSnapLines().map((l, i) => ( - <line key={i} x1="0" y1={l} x2="2000" y2={l} stroke={lightOrDark(dragPar.rootDoc.backgroundColor ?? 'gray')} opacity={0.3} strokeWidth={1} strokeDasharray={'2 2'} /> + {SnappingManager.HorizSnapLines.map((l, i) => ( + <line key={i} x1="0" y1={l} x2="2000" y2={l} stroke={lightOrDark(dragPar.layoutDoc.backgroundColor ?? 'gray')} opacity={0.3} strokeWidth={1} strokeDasharray={'2 2'} /> ))} - {SnappingManager.vertSnapLines().map((l, i) => ( - <line key={i} y1={this.topOfMainDocContent.toString()} x1={l} y2="2000" x2={l} stroke={lightOrDark(dragPar.rootDoc.backgroundColor ?? 'gray')} opacity={0.3} strokeWidth={1} strokeDasharray={'2 2'} /> + {SnappingManager.VertSnapLines.map((l, i) => ( + <line key={i} y1={this.topOfMainDocContent.toString()} x1={l} y2="2000" x2={l} stroke={lightOrDark(dragPar.layoutDoc.backgroundColor ?? 'gray')} opacity={0.3} strokeWidth={1} strokeDasharray={'2 2'} /> ))} </svg> </div> @@ -960,46 +974,6 @@ export class MainView extends React.Component { ); } - @computed get linkDocPreview() { - return LinkDocPreview.LinkInfo ? <LinkDocPreview {...LinkDocPreview.LinkInfo} /> : null; - } - @observable mapBoxHackBool = false; - @computed get mapBoxHack() { - return this.mapBoxHackBool ? null : ( - <MapBox - ref={action((r: any) => r && (this.mapBoxHackBool = true))} - fieldKey="data" - select={returnFalse} - isSelected={returnFalse} - Document={this.headerBarDoc} - DataDoc={undefined} - addDocTab={returnFalse} - pinToPres={emptyFunction} - docViewPath={returnEmptyDoclist} - styleProvider={DefaultStyleProvider} - rootSelected={returnTrue} - addDocument={returnFalse} - removeDocument={returnFalse} - fitContentsToBox={returnTrue} - isDocumentActive={returnTrue} // headerBar is always documentActive (ie, the docView gets pointer events) - isContentActive={returnTrue} // headerBar is awlays contentActive which means its items are always documentActive - ScreenToLocalTransform={Transform.Identity} - childHideResizeHandles={returnTrue} - childDragAction="move" - dontRegisterView={true} - PanelWidth={this.headerBarDocWidth} - PanelHeight={this.headerBarDocHeight} - renderDepth={0} - focus={emptyFunction} - whenChildContentsActiveChanged={emptyFunction} - bringToFront={emptyFunction} - childFilters={returnEmptyFilter} - childFiltersByRanges={returnEmptyFilter} - searchFilterDocs={returnEmptyDoclist} - /> - ); - } - render() { return ( <div @@ -1021,6 +995,7 @@ export class MainView extends React.Component { {this.inkResources} <DictationOverlay /> <SharingManager /> + <CalendarManager /> <ServerStats /> <RTFMarkup /> <SettingsManager /> @@ -1031,9 +1006,9 @@ export class MainView extends React.Component { <DocumentDecorations boundsLeft={this.leftScreenOffsetOfMainDocView} boundsTop={this.topOfSidebarDoc} PanelWidth={this._windowWidth} PanelHeight={this._windowHeight} /> <ComponentDecorations boundsLeft={this.leftScreenOffsetOfMainDocView} boundsTop={this.topOfMainDocContent} /> {this._hideUI ? null : <TopBar />} - {LinkDescriptionPopup.descriptionPopup ? <LinkDescriptionPopup /> : null} - {DocumentLinksButton.LinkEditorDocView ? <LinkMenu clearLinkEditor={action(() => (DocumentLinksButton.LinkEditorDocView = undefined))} docView={DocumentLinksButton.LinkEditorDocView} /> : null} - {this.linkDocPreview} + <LinkDescriptionPopup /> + {DocButtonState.Instance.LinkEditorDocView ? <LinkMenu clearLinkEditor={action(() => (DocButtonState.Instance.LinkEditorDocView = undefined))} docView={DocButtonState.Instance.LinkEditorDocView} /> : null} + {LinkInfo.Instance?.LinkInfo ? <LinkDocPreview {...LinkInfo.Instance.LinkInfo} /> : null} {((page: string) => { // prettier-ignore @@ -1041,7 +1016,7 @@ export class MainView extends React.Component { default: case 'dashboard': return (<> <div key="dashdiv" style={{ position: 'relative', display: this._hideUI || LightboxView.LightboxDoc ? 'none' : undefined, zIndex: 2001 }}> - <CollectionMenu panelWidth={this.topMenuWidth} panelHeight={this.topMenuHeight} /> + <CollectionMenu panelWidth={this.topMenuWidth} panelHeight={this.topMenuHeight} toggleTopBar={this.toggleTopBar} topBarHeight={this.headerBarHeightFunc}/> </div> {this.mainDashboardArea} </> ); @@ -1052,19 +1027,20 @@ export class MainView extends React.Component { <PreviewCursor /> <TaskCompletionBox /> <ContextMenu /> - <RadialMenu /> <AnchorMenu /> <MapAnchorMenu /> + <DirectionsAnchorMenu /> <DashFieldViewMenu /> <MarqueeOptionsMenu /> <TimelineMenu /> <RichTextMenu /> - <InkTranscription /> + {/* <InkTranscription /> */} {this.snapLines} <LightboxView key="lightbox" PanelWidth={this._windowWidth} PanelHeight={this._windowHeight} maxBorder={[200, 50]} /> + <CollectionFreeFormLinksView /> <OverlayView /> - {this.mapBoxHack} <GPTPopup key="gptpopup" /> + <SchemaCSVPopUp key="schemacsvpopup" /> <GenerativeFill imageEditorOpen={ImageBox.imageEditorOpen} imageEditorSource={ImageBox.imageEditorSource} imageRootDoc={ImageBox.imageRootDoc} addDoc={ImageBox.addDoc} /> {/* <NewLightboxView key="newLightbox" PanelWidth={this._windowWidth} PanelHeight={this._windowHeight} maxBorder={[200, 50]} /> */} </div> diff --git a/src/client/views/MainViewModal.tsx b/src/client/views/MainViewModal.tsx index 67b722e7a..af7f38937 100644 --- a/src/client/views/MainViewModal.tsx +++ b/src/client/views/MainViewModal.tsx @@ -1,8 +1,6 @@ import { isDark } from 'browndash-components'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { Doc } from '../../fields/Doc'; -import { StrCast } from '../../fields/Types'; import { SettingsManager } from '../util/SettingsManager'; import './MainViewModal.scss'; diff --git a/src/client/views/MarqueeAnnotator.tsx b/src/client/views/MarqueeAnnotator.tsx index 0987b0867..a4303c3aa 100644 --- a/src/client/views/MarqueeAnnotator.tsx +++ b/src/client/views/MarqueeAnnotator.tsx @@ -1,8 +1,8 @@ -import { action, observable, ObservableMap, runInAction } from 'mobx'; +import { action, computed, makeObservable, observable, ObservableMap } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { Doc, Opt } from '../../fields/Doc'; import { AclAdmin, AclAugment, AclEdit, AclSelfEdit, DocData } from '../../fields/DocSymbols'; -import { Id } from '../../fields/FieldSymbols'; import { List } from '../../fields/List'; import { NumCast } from '../../fields/Types'; import { GetEffectiveAcl } from '../../fields/util'; @@ -15,19 +15,20 @@ import './MarqueeAnnotator.scss'; import { DocumentView } from './nodes/DocumentView'; import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox'; import { AnchorMenu } from './pdf/AnchorMenu'; -import React = require('react'); +import { ObservableReactComponent } from './ObservableReactComponent'; const _global = (window /* browser */ || global) /* node */ as any; export interface MarqueeAnnotatorProps { - rootDoc: Doc; + Document: Doc; down?: number[]; - iframe?: () => undefined | HTMLIFrameElement; scrollTop: number; + isNativeScaled?: boolean; scaling?: () => number; - iframeScaling?: () => number; + annotationLayerScaling?: () => number; + annotationLayerScrollTop: number; containerOffset?: () => number[]; - mainCont: HTMLDivElement; - docView: DocumentView; + marqueeContainer: HTMLDivElement; + docView: () => DocumentView; savedAnnotations: () => ObservableMap<number, HTMLDivElement[]>; selectionText: () => string; annotationLayer: HTMLDivElement; @@ -39,138 +40,60 @@ export interface MarqueeAnnotatorProps { highlightDragSrcColor?: string; } @observer -export class MarqueeAnnotator extends React.Component<MarqueeAnnotatorProps> { - private _startX: number = 0; - private _startY: number = 0; - @observable private _left: number = 0; - @observable private _top: number = 0; - @observable private _width: number = 0; - @observable private _height: number = 0; +export class MarqueeAnnotator extends ObservableReactComponent<MarqueeAnnotatorProps> { + private _start: { x: number; y: number } = { x: 0, y: 0 }; constructor(props: any) { super(props); - - AnchorMenu.Instance.OnCrop = (e: PointerEvent) => { - if (this.props.anchorMenuCrop) { - UndoManager.RunInBatch(() => this.props.anchorMenuCrop?.(this.highlight('', true, undefined, false), true), 'cropping'); - } - }; - AnchorMenu.Instance.OnClick = undoable((e: PointerEvent) => this.props.anchorMenuClick?.()?.(this.highlight(this.props.highlightDragSrcColor ?? 'rgba(173, 216, 230, 0.75)', true, undefined, true)), 'make sidebar annotation'); - AnchorMenu.Instance.OnAudio = unimplementedFunction; - AnchorMenu.Instance.Highlight = this.highlight; - AnchorMenu.Instance.GetAnchor = (savedAnnotations?: ObservableMap<number, HTMLDivElement[]>, addAsAnnotation?: boolean) => this.highlight('rgba(173, 216, 230, 0.75)', true, savedAnnotations, true); - AnchorMenu.Instance.onMakeAnchor = () => AnchorMenu.Instance.GetAnchor(undefined, true); + makeObservable(this); } - @action - static clearAnnotations(savedAnnotations: ObservableMap<number, HTMLDivElement[]>) { + @observable private _width: number = 0; + @observable private _height: number = 0; + @computed get top() { return Math.min(this._start.y, this._start.y + this._height); } // prettier-ignore + @computed get left() { return Math.min(this._start.x, this._start.x + this._width);} // prettier-ignore + + static clearAnnotations = action((savedAnnotations: ObservableMap<number, HTMLDivElement[]>) => { AnchorMenu.Instance.Status = 'marquee'; AnchorMenu.Instance.fadeOut(true); // clear out old marquees and initialize menu for new selection Array.from(savedAnnotations.values()).forEach(v => v.forEach(a => a.remove())); savedAnnotations.clear(); - } - - @action gotDownPoint() { - if (!this._width && !this._height) { - const downPt = this.props.down!; - // set marquee x and y positions to the spatially transformed position - const boundingRect = this.props.mainCont.getBoundingClientRect(); - this._startX = this._left = (downPt[0] - boundingRect.left) * (this.props.mainCont.offsetWidth / boundingRect.width); - this._startY = this._top = (downPt[1] - boundingRect.top) * (this.props.mainCont.offsetHeight / boundingRect.height) + this.props.mainCont.scrollTop; - } - - const doc = this.props.iframe?.()?.contentDocument ?? document; - doc.removeEventListener('pointermove', this.onSelectMove); - doc.removeEventListener('pointerup', this.onSelectEnd); - doc.addEventListener('pointermove', this.onSelectMove); - doc.addEventListener('pointerup', this.onSelectEnd); - - /** - * This function is used by the AnchorMenu to create an anchor highlight and a new linked text annotation. - * It also initiates a Drag/Drop interaction to place the text annotation. - */ - AnchorMenu.Instance.StartDrag = action((e: PointerEvent, ele: HTMLElement) => { - e.preventDefault(); - e.stopPropagation(); - const sourceAnchorCreator = () => this.highlight(this.props.highlightDragSrcColor ?? 'rgba(173, 216, 230, 0.75)', true, undefined, true); // hyperlink color - - const targetCreator = (annotationOn: Doc | undefined) => { - const target = DocUtils.GetNewTextDoc('Note linked to ' + this.props.rootDoc.title, 0, 0, 100, 100, undefined, annotationOn, undefined, 'yellow'); - FormattedTextBox.SelectOnLoad = target[Id]; - return target; - }; - DragManager.StartAnchorAnnoDrag([ele], new DragManager.AnchorAnnoDragData(this.props.docView, sourceAnchorCreator, targetCreator), e.pageX, e.pageY, { - dragComplete: e => { - if (!e.aborted && e.annoDragData && e.annoDragData.linkSourceDoc && e.annoDragData.dropDocument && e.linkDocument) { - e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this.props.rootDoc; - e.annoDragData.linkSourceDoc.followLinkZoom = false; - } - }, - }); - }); - /** - * This function is used by the AnchorMenu to create an anchor highlight and a new linked text annotation. - * It also initiates a Drag/Drop interaction to place the text annotation. - */ - AnchorMenu.Instance.StartCropDrag = !this.props.anchorMenuCrop - ? unimplementedFunction - : action((e: PointerEvent, ele: HTMLElement) => { - e.preventDefault(); - e.stopPropagation(); - var cropRegion: Doc | undefined; - const sourceAnchorCreator = () => (cropRegion = this.highlight('', true, undefined, true)); // hyperlink color - const targetCreator = (annotationOn: Doc | undefined) => this.props.anchorMenuCrop!(cropRegion, false)!; - DragManager.StartAnchorAnnoDrag([ele], new DragManager.AnchorAnnoDragData(this.props.docView, sourceAnchorCreator, targetCreator), e.pageX, e.pageY, { - dragComplete: e => { - if (!e.aborted && e.linkDocument) { - Doc.GetProto(e.linkDocument).link_relationship = 'cropped image'; - Doc.GetProto(e.linkDocument).title = 'crop: ' + this.props.docView.rootDoc.title; - Doc.GetProto(e.linkDocument).link_displayLine = false; - } - }, - }); - }); - } - releaseDownPt() { - const doc = this.props.iframe?.()?.contentDocument ?? document; - doc.removeEventListener('pointermove', this.onSelectMove); - doc.removeEventListener('pointerup', this.onSelectEnd); - } + }); @undoBatch - @action makeAnnotationDocument = (color: string, isLinkButton?: boolean, savedAnnotations?: ObservableMap<number, HTMLDivElement[]>): Opt<Doc> => { const savedAnnoMap = savedAnnotations?.values() && Array.from(savedAnnotations?.values()).length ? savedAnnotations : this.props.savedAnnotations(); if (savedAnnoMap.size === 0) return undefined; const savedAnnos = Array.from(savedAnnoMap.values())[0]; + const doc = this.props.Document; + const scale = (this.props.annotationLayerScaling?.() || 1) * NumCast(doc._freeform_scale, 1); if (savedAnnos.length && (savedAnnos[0] as any).marqueeing) { - const scale = this.props.scaling?.() || 1; const anno = savedAnnos[0]; const containerOffset = this.props.containerOffset?.() || [0, 0]; const marqueeAnno = Docs.Create.FreeformDocument([], { onClick: isLinkButton ? FollowLinkScript() : undefined, backgroundColor: color, - annotationOn: this.props.rootDoc, - title: 'Annotation on ' + this.props.rootDoc.title, + annotationOn: this.props.Document, + title: 'Annotation on ' + this.props.Document.title, }); - marqueeAnno.x = NumCast(this.props.docView.props.Document.freeform_panX_min) + (parseInt(anno.style.left || '0') - containerOffset[0]) / scale / NumCast(this.props.docView.props.Document._freeform_scale, 1); - marqueeAnno.y = NumCast(this.props.docView.props.Document.freeform_panY_min) + (parseInt(anno.style.top || '0') - containerOffset[1]) / scale / NumCast(this.props.docView.props.Document._freeform_scale, 1) + NumCast(this.props.scrollTop); - marqueeAnno._height = parseInt(anno.style.height || '0') / scale / NumCast(this.props.docView.props.Document._freeform_scale, 1); - marqueeAnno._width = parseInt(anno.style.width || '0') / scale / NumCast(this.props.docView.props.Document._freeform_scale, 1); + marqueeAnno.x = NumCast(doc.freeform_panX_min) + (parseInt(anno.style.left || '0') - containerOffset[0]) / scale; + marqueeAnno.y = NumCast(doc.freeform_panY_min) + (parseInt(anno.style.top || '0') - containerOffset[1]) / scale; + marqueeAnno._height = parseInt(anno.style.height || '0') / scale; + marqueeAnno._width = parseInt(anno.style.width || '0') / scale; anno.remove(); savedAnnoMap.clear(); return marqueeAnno; } const textRegionAnno = Docs.Create.HTMLMarkerDocument([], { - annotationOn: this.props.rootDoc, + annotationOn: this.props.Document, text: this.props.selectionText(), backgroundColor: 'transparent', presentation_duration: 2100, presentation_transition: 500, presentation_zoomText: true, - title: 'Selection on ' + this.props.rootDoc.title, + title: 'Selection on ' + this.props.Document.title, }); let minX = Number.MAX_VALUE; let maxX = -Number.MAX_VALUE; @@ -195,103 +118,173 @@ export class MarqueeAnnotator extends React.Component<MarqueeAnnotatorProps> { }) ); - const textRegionAnnoProto = Doc.GetProto(textRegionAnno); + const textRegionAnnoProto = textRegionAnno[DocData]; textRegionAnnoProto.y = Math.max(minY, 0); textRegionAnnoProto.x = Math.max(minX, 0); textRegionAnnoProto.height = Math.max(maxY, 0) - Math.max(minY, 0); textRegionAnnoProto.width = Math.max(maxX, 0) - Math.max(minX, 0); // mainAnnoDocProto.text = this._selectionText; textRegionAnnoProto.text_inlineAnnotations = new List<Doc>(annoDocs); + textRegionAnnoProto.layout_unrendered = true; savedAnnoMap.clear(); return textRegionAnno; }; @action highlight = (color: string, isLinkButton: boolean, savedAnnotations?: ObservableMap<number, HTMLDivElement[]>, addAsAnnotation?: boolean, summarize?: boolean) => { // creates annotation documents for current highlights - const effectiveAcl = GetEffectiveAcl(this.props.rootDoc[DocData]); + const effectiveAcl = GetEffectiveAcl(this.props.Document[DocData]); const annotationDoc = [AclAugment, AclSelfEdit, AclEdit, AclAdmin].includes(effectiveAcl) && this.makeAnnotationDocument(color, isLinkButton, savedAnnotations); - addAsAnnotation && !savedAnnotations && annotationDoc && this.props.addDocument(annotationDoc); + addAsAnnotation && annotationDoc && this.props.addDocument(annotationDoc); return annotationDoc as Doc; }; public static previewNewAnnotation = action((savedAnnotations: ObservableMap<number, HTMLDivElement[]>, annotationLayer: HTMLDivElement, div: HTMLDivElement, page: number) => { - if (div.style.top) { - div.style.top = parseInt(div.style.top) /*+ this.getScrollFromPage(page)*/ - .toString(); - } - annotationLayer.append(div); div.style.backgroundColor = '#ACCEF7'; div.style.opacity = '0.5'; + annotationLayer.append(div); const savedPage = savedAnnotations.get(page); - if (savedPage) { - savedPage.push(div); - savedAnnotations.set(page, savedPage); - } else { - savedAnnotations.set(page, [div]); - } + if (savedPage) savedPage.push(div); + savedAnnotations.set(page, savedPage ?? [div]); }); + // this transforms a screen point into a local coordinate subject. It's complicated by documents that are rotated + // since the DOM's bounding rectangle is not rotated and Dash's ScreenToLocalTransform carries along a rotation value, but doesn't + // use it when transforming points. + // So the idea here is to reconstruct a local point by unrotating the screen point about the center of the bounding box. The approach is: + // 1) Get vector from the screen point to the center of the rotated bounding box in screens space + // 2) unrotate that vector in screen space + // 3) localize the unrotated vector by scaling into the marquee container's coordinates + // 4) reattach the vector to the center of the bounding box + getTransformedScreenPt = (down: number[]) => { + const marqueeContainer = this.props.marqueeContainer; + const containerXf = this.props.isNativeScaled ? this.props.docView().screenToContentsTransform() : this.props.docView().screenToViewTransform(); + const boundingRect = marqueeContainer.getBoundingClientRect(); + const center = { x: boundingRect.x + boundingRect.width / 2, y: boundingRect.y + boundingRect.height / 2 }; + const downVec = Utils.rotPt(down[0] - center.x, + down[1] - center.y, NumCast(containerXf.Rotate)); // prettier-ignore + return { x: downVec.x * containerXf.Scale + marqueeContainer.offsetWidth /2, + y: downVec.y * containerXf.Scale + marqueeContainer.offsetHeight/2 + this.props.annotationLayerScrollTop }; // prettier-ignore + }; + + @action + public onInitiateSelection(down: number[]) { + console.log('DOWN = ' + down[0] + ' ' + down[1]); + this._width = this._height = 0; + this._start = this.getTransformedScreenPt(down); + + document.removeEventListener('pointermove', this.onSelectMove); + document.removeEventListener('pointerup', this.onSelectEnd); + document.addEventListener('pointermove', this.onSelectMove); + document.addEventListener('pointerup', this.onSelectEnd); + + AnchorMenu.Instance.OnCrop = (e: PointerEvent) => { + if (this.props.anchorMenuCrop) { + UndoManager.RunInBatch(() => this.props.anchorMenuCrop?.(this.highlight('', true, undefined, false), true), 'cropping'); + } + }; + AnchorMenu.Instance.OnClick = undoable((e: PointerEvent) => this.props.anchorMenuClick?.()?.(this.highlight(this.props.highlightDragSrcColor ?? 'rgba(173, 216, 230, 0.75)', true, undefined, true)), 'make sidebar annotation'); + AnchorMenu.Instance.OnAudio = unimplementedFunction; + AnchorMenu.Instance.Highlight = this.highlight; + AnchorMenu.Instance.GetAnchor = (savedAnnotations?: ObservableMap<number, HTMLDivElement[]>, addAsAnnotation?: boolean) => this.highlight('rgba(173, 216, 230, 0.75)', true, savedAnnotations, true); + AnchorMenu.Instance.onMakeAnchor = () => AnchorMenu.Instance.GetAnchor(undefined, true); + + /** + * This function is used by the AnchorMenu to create an anchor highlight and a new linked text annotation. + * It also initiates a Drag/Drop interaction to place the text annotation. + */ + AnchorMenu.Instance.StartDrag = action((e: PointerEvent, ele: HTMLElement) => { + e.preventDefault(); + e.stopPropagation(); + const sourceAnchorCreator = () => this.highlight(this.props.highlightDragSrcColor ?? 'rgba(173, 216, 230, 0.75)', true, undefined, true); // hyperlink color + + const targetCreator = (annotationOn: Doc | undefined) => { + const target = DocUtils.GetNewTextDoc('Note linked to ' + this.props.Document.title, 0, 0, 100, 100, undefined, annotationOn, 'yellow'); + FormattedTextBox.SetSelectOnLoad(target); + return target; + }; + DragManager.StartAnchorAnnoDrag([ele], new DragManager.AnchorAnnoDragData(this.props.docView(), sourceAnchorCreator, targetCreator), e.pageX, e.pageY, { + dragComplete: e => { + if (!e.aborted && e.annoDragData && e.annoDragData.linkSourceDoc && e.annoDragData.dropDocument && e.linkDocument) { + e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this.props.Document; + e.annoDragData.linkSourceDoc.followLinkZoom = false; + } + }, + }); + }); + /** + * This function is used by the AnchorMenu to create an anchor highlight and a new linked text annotation. + * It also initiates a Drag/Drop interaction to place the text annotation. + */ + AnchorMenu.Instance.StartCropDrag = !this.props.anchorMenuCrop + ? unimplementedFunction + : action((e: PointerEvent, ele: HTMLElement) => { + e.preventDefault(); + e.stopPropagation(); + var cropRegion: Doc | undefined; + const sourceAnchorCreator = () => (cropRegion = this.highlight('', true, undefined, true)); // hyperlink color + const targetCreator = (annotationOn: Doc | undefined) => this.props.anchorMenuCrop!(cropRegion, false)!; + DragManager.StartAnchorAnnoDrag([ele], new DragManager.AnchorAnnoDragData(this.props.docView(), sourceAnchorCreator, targetCreator), e.pageX, e.pageY, { + dragComplete: e => { + if (!e.aborted && e.linkDocument) { + const linkDocData = e.linkDocument[DocData]; + linkDocData.link_relationship = 'cropped image'; + linkDocData.title = 'crop: ' + this.props.Document.title; + linkDocData.link_displayLine = false; + } + }, + }); + }); + } + public onTerminateSelection() { + document.removeEventListener('pointermove', this.onSelectMove); + document.removeEventListener('pointerup', this.onSelectEnd); + } + @action onSelectMove = (e: PointerEvent) => { - // transform positions and find the width and height to set the marquee to - const boundingRect = (this.props.iframe?.()?.contentDocument?.body || this.props.mainCont).getBoundingClientRect(); - const mainRect = this.props.mainCont.getBoundingClientRect(); - const cliX = e.clientX * (this.props.iframeScaling?.() || 1) - boundingRect.left; - const cliY = e.clientY * (this.props.iframeScaling?.() || 1) - boundingRect.top; - this._width = cliX * (this.props.mainCont.offsetWidth / mainRect.width) - this._startX; - this._height = cliY * (this.props.mainCont.offsetHeight / mainRect.height) - this._startY + this.props.mainCont.scrollTop; - this._left = Math.min(this._startX, this._startX + this._width); - this._top = Math.min(this._startY, this._startY + this._height); - this._width = Math.abs(this._width); - this._height = Math.abs(this._height); + const movLoc = this.getTransformedScreenPt([e.clientX, e.clientY]); + this._width = movLoc.x - this._start.x; + this._height = movLoc.y - this._start.y; //e.stopPropagation(); // overlay documents are all 'active', yet they can be dragged. if we stop propagation, then they can be marqueed but not dragged. if we don't stop, then they will be marqueed and dragged, but the marquee will be zero width since the doc will move along with the cursor. }; + @action onSelectEnd = (e: PointerEvent) => { - const mainRect = this.props.mainCont.getBoundingClientRect(); - const cliX = e.clientX * (this.props.iframeScaling?.() || 1) + (this.props.iframe ? mainRect.left : 0); - const cliY = e.clientY * (this.props.iframeScaling?.() || 1) + (this.props.iframe ? mainRect.top : 0); - if (this._width > 10 || this._height > 10) { + e.stopPropagation(); + const marquees = this.props.marqueeContainer.getElementsByClassName('marqueeAnnotator-dragBox'); + const marqueeStyle = (Array.from(marquees).lastElement() as HTMLDivElement)?.style; + if (!this.isEmpty && marqueeStyle) { // configure and show the annotation/link menu if a the drag region is big enough - const marquees = this.props.mainCont.getElementsByClassName('marqueeAnnotator-dragBox'); - if (marquees?.length) { - // copy the temporary marquee to allow for multiple selections (not currently available though). - const copy = document.createElement('div'); - ['border', 'opacity'].forEach(prop => (copy.style[prop as any] = (marquees[0] as HTMLDivElement).style[prop as any])); - const bounds = (marquees[0] as HTMLDivElement).getBoundingClientRect(); - const uitls = Utils.GetScreenTransform(marquees[0] as HTMLDivElement); - const rbounds = { top: uitls.translateY, left: uitls.translateX, width: bounds.right - bounds.left, height: bounds.bottom - bounds.top }; - const otls = Utils.GetScreenTransform(this.props.annotationLayer); - const fbounds = { top: (rbounds.top - otls.translateY) / otls.scale, left: (rbounds.left - otls.translateX) / otls.scale, width: rbounds.width / otls.scale, height: rbounds.height / otls.scale }; - copy.style.top = fbounds.top.toString() + 'px'; - copy.style.left = fbounds.left.toString() + 'px'; - copy.style.width = fbounds.width.toString() + 'px'; - copy.style.height = fbounds.height.toString() + 'px'; - copy.className = 'marqueeAnnotator-annotationBox'; - (copy as any).marqueeing = true; - MarqueeAnnotator.previewNewAnnotation(this.props.savedAnnotations(), this.props.annotationLayer, copy, this.props.getPageFromScroll?.(this._top) || 0); - } - - AnchorMenu.Instance.jumpTo(cliX, cliY); - - this.props.finishMarquee(undefined, undefined, e); - runInAction(() => (this._width = this._height = 0)); - } else { - runInAction(() => (this._width = this._height = 0)); - this.props.finishMarquee(cliX, cliY, e); + // copy the temporary marquee to allow for multiple selections (not currently available though). + const copy = document.createElement('div'); + const scale = (this.props.scaling?.() || 1) * NumCast(this.props.Document._freeform_scale, 1); + ['border', 'opacity', 'top', 'left', 'width', 'height'].forEach(prop => (copy.style[prop as any] = marqueeStyle[prop as any])); + copy.className = 'marqueeAnnotator-annotationBox'; + copy.style.top = parseInt(marqueeStyle.top.toString().replace('px', '')) / scale + this.props.scrollTop + 'px'; + copy.style.left = parseInt(marqueeStyle.left.toString().replace('px', '')) / scale + 'px'; + copy.style.width = parseInt(marqueeStyle.width.toString().replace('px', '')) / scale + 'px'; + copy.style.height = parseInt(marqueeStyle.height.toString().replace('px', '')) / scale + 'px'; + (copy as any).marqueeing = true; + MarqueeAnnotator.previewNewAnnotation(this.props.savedAnnotations(), this.props.annotationLayer, copy, this.props.getPageFromScroll?.(this.top) || 0); + AnchorMenu.Instance.jumpTo(e.clientX, e.clientY); } + this.props.finishMarquee(this.isEmpty ? e.clientX : undefined, this.isEmpty ? e.clientY : undefined, e); + this._width = this._height = 0; }; + get isEmpty() { + return Math.abs(this._width) <= 10 && Math.abs(this._height) <= 10; + } + render() { - return !this.props.down ? null : ( + return ( <div - ref={r => (r ? this.gotDownPoint() : this.releaseDownPt())} className="marqueeAnnotator-dragBox" style={{ - left: `${this._left}px`, - top: `${this._top}px`, - width: `${this._width}px`, - height: `${this._height}px`, + left: `${this.left}px`, + top: `${this.top}px`, + width: `${Math.abs(this._width)}px`, + height: `${Math.abs(this._height)}px`, border: `${this._width === 0 ? '' : '2px dashed black'}`, }} /> diff --git a/src/client/views/MetadataEntryMenu.tsx b/src/client/views/MetadataEntryMenu.tsx index bcbdd3ccb..89c3c41f8 100644 --- a/src/client/views/MetadataEntryMenu.tsx +++ b/src/client/views/MetadataEntryMenu.tsx @@ -1,12 +1,12 @@ -import * as React from 'react'; -import './MetadataEntryMenu.scss'; +import { IReactionDisposer, action, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; -import { observable, action, runInAction, trace, computed, IReactionDisposer, reaction } from 'mobx'; -import { KeyValueBox } from './nodes/KeyValueBox'; -import { Doc, Field, DocListCastAsync, DocListCast } from '../../fields/Doc'; +import * as React from 'react'; import * as Autosuggest from 'react-autosuggest'; -import { undoBatch, UndoManager } from '../util/UndoManager'; import { emptyFunction, emptyPath } from '../../Utils'; +import { Doc, DocListCast, Field } from '../../fields/Doc'; +import { undoBatch } from '../util/UndoManager'; +import './MetadataEntryMenu.scss'; +import { KeyValueBox } from './nodes/KeyValueBox'; export type DocLike = Doc | Doc[] | Promise<Doc> | Promise<Doc[]>; export interface MetadataEntryProps { @@ -156,6 +156,7 @@ export class MetadataEntryMenu extends React.Component<MetadataEntryProps> { <span>Key:</span> <div className="metadataEntry-autoSuggester" onClick={e => this.autosuggestRef.current!.input?.focus()}> <Autosuggest + // @ts-ignore inputProps={{ value: this._currentKey, onChange: this.onKeyChange }} getSuggestionValue={this.getSuggestionValue} suggestions={emptyPath} diff --git a/src/client/views/OCRUtils.ts b/src/client/views/OCRUtils.ts deleted file mode 100644 index 282ec770e..000000000 --- a/src/client/views/OCRUtils.ts +++ /dev/null @@ -1,7 +0,0 @@ -// import tesseract from "node-tesseract-ocr"; -// const tesseract = require("node-tesseract"); - - -export namespace OCRUtils { - -} diff --git a/src/client/views/ObservableReactComponent.tsx b/src/client/views/ObservableReactComponent.tsx new file mode 100644 index 000000000..9b2b00903 --- /dev/null +++ b/src/client/views/ObservableReactComponent.tsx @@ -0,0 +1,21 @@ +import { action, makeObservable, observable } from 'mobx'; +import * as React from 'react'; +import './AntimodeMenu.scss'; + +/** + * This is an abstract class that serves as the base for a PDF-style or Marquee-style + * menu. To use this class, look at PDFMenu.tsx or MarqueeOptionsMenu.tsx for an example. + */ +export abstract class ObservableReactComponent<T> extends React.Component<T, {}> { + @observable _props: React.PropsWithChildren<T>; + constructor(props: any) { + super(props); + this._props = props; + makeObservable(this); + } + componentDidUpdate(prevProps: Readonly<T>): void { + Object.keys(prevProps).forEach(action(pkey => + (prevProps as any)[pkey] !== (this.props as any)[pkey] && + ((this._props as any)[pkey] = (this.props as any)[pkey]))); // prettier-ignore + } +} diff --git a/src/client/views/OverlayView.scss b/src/client/views/OverlayView.scss index 9b10d1cf7..33a297fd4 100644 --- a/src/client/views/OverlayView.scss +++ b/src/client/views/OverlayView.scss @@ -6,6 +6,7 @@ height: 100vh; z-index: 1001; // shouold be greater than LightboxView's z-index so that link lines and the presentation mini player appear /* background-color: pink; */ + user-select: none; } .overlayWindow-outerDiv { diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx index c174befc0..20dc6c9fa 100644 --- a/src/client/views/OverlayView.tsx +++ b/src/client/views/OverlayView.tsx @@ -1,21 +1,21 @@ -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import { computedFn } from 'mobx-utils'; import * as React from 'react'; import ReactLoading from 'react-loading'; -import { Doc, DocListCast } from '../../fields/Doc'; +import { Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnTrue, setupMoveUpEvents } from '../../Utils'; +import { Doc } from '../../fields/Doc'; import { Height, Width } from '../../fields/DocSymbols'; import { Id } from '../../fields/FieldSymbols'; import { NumCast } from '../../fields/Types'; -import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnTrue, setupMoveUpEvents, Utils } from '../../Utils'; import { DocumentType } from '../documents/DocumentTypes'; import { DragManager } from '../util/DragManager'; import { Transform } from '../util/Transform'; -import { CollectionFreeFormLinksView } from './collections/collectionFreeForm/CollectionFreeFormLinksView'; import { LightboxView } from './LightboxView'; -import { DocumentView, DocumentViewInternal } from './nodes/DocumentView'; +import { ObservableReactComponent } from './ObservableReactComponent'; import './OverlayView.scss'; import { DefaultStyleProvider } from './StyleProvider'; +import { DocumentView, DocumentViewInternal } from './nodes/DocumentView'; const _global = (window /* browser */ || global) /* node */ as any; export type OverlayDisposer = () => void; @@ -35,14 +35,14 @@ export interface OverlayWindowProps { } @observer -export class OverlayWindow extends React.Component<OverlayWindowProps> { - @observable x: number; - @observable y: number; - @observable width: number; - @observable height: number; +export class OverlayWindow extends ObservableReactComponent<OverlayWindowProps> { + @observable x: number = 0; + @observable y: number = 0; + @observable width: number = 0; + @observable height: number = 0; constructor(props: OverlayWindowProps) { super(props); - + makeObservable(this); const opts = props.overlayOptions; this.x = opts.x; this.y = opts.y; @@ -94,8 +94,8 @@ export class OverlayWindow extends React.Component<OverlayWindowProps> { return LightboxView.LightboxDoc ? null : ( <div className="overlayWindow-outerDiv" style={{ transform: `translate(${this.x}px, ${this.y}px)`, width: this.width, height: this.height }}> <div className="overlayWindow-titleBar" onPointerDown={this.onPointerDown}> - {this.props.overlayOptions.title || 'Untitled'} - <button onClick={this.props.onClick} className="overlayWindow-closeButton"> + {this._props.overlayOptions.title || 'Untitled'} + <button onClick={this._props.onClick} className="overlayWindow-closeButton"> X </button> </div> @@ -107,19 +107,19 @@ export class OverlayWindow extends React.Component<OverlayWindowProps> { } @observer -export class OverlayView extends React.Component { +export class OverlayView extends ObservableReactComponent<{}> { public static Instance: OverlayView; - @observable.shallow - private _elements: JSX.Element[] = []; + @observable.shallow _elements: JSX.Element[] = []; constructor(props: any) { super(props); + makeObservable(this); if (!OverlayView.Instance) { OverlayView.Instance = this; new _global.ResizeObserver( action((entries: any) => { for (const entry of entries) { - DocListCast(Doc.MyOverlayDocs?.data).forEach(doc => { + Doc.MyOverlayDocs.forEach(doc => { if (NumCast(doc.overlayX) > entry.contentRect.width - 10) { doc.overlayX = entry.contentRect.width - 10; } @@ -135,11 +135,7 @@ export class OverlayView extends React.Component { @action addElement(ele: JSX.Element, options: OverlayElementOptions): OverlayDisposer { - const remove = action(() => { - const index = this._elements.indexOf(ele); - if (index !== -1) this._elements.splice(index, 1); - }); - ele = ( + const div = ( <div key={Utils.GenerateGuid()} className="overlayView-wrapperDiv" @@ -153,8 +149,11 @@ export class OverlayView extends React.Component { {ele} </div> ); - this._elements.push(ele); - return remove; + this._elements.push(div); + return action(() => { + const index = this._elements.indexOf(div); + if (index !== -1) this._elements.splice(index, 1); + }); } @action @@ -184,70 +183,66 @@ export class OverlayView extends React.Component { ); @computed get overlayDocs() { - return DocListCast(Doc.MyOverlayDocs?.data) - .filter(d => !LightboxView.LightboxDoc || d.type === DocumentType.PRES) - .map(d => { - let offsetx = 0, - offsety = 0; - const dref = React.createRef<HTMLDivElement>(); - const onPointerMove = action((e: PointerEvent, down: number[]) => { - if (e.cancelBubble) return false; // if the overlay doc processed the move event (e.g., to pan its contents), then the event should be marked as canceled since propagation can't be stopped - if (e.buttons === 1) { - d.overlayX = e.clientX + offsetx; - d.overlayY = e.clientY + offsety; - } - if (e.metaKey) { - const dragData = new DragManager.DocumentDragData([d]); - dragData.offset = [-offsetx, -offsety]; - dragData.dropAction = 'move'; - dragData.removeDocument = this.removeOverlayDoc; - dragData.moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean): boolean => { - return dragData.removeDocument!(doc) ? addDocument(doc) : false; - }; - DragManager.StartDocumentDrag([dref.current!], dragData, down[0], down[1]); - return true; - } - return false; - }); - - const onPointerDown = (e: React.PointerEvent) => { - setupMoveUpEvents(this, e, onPointerMove, emptyFunction, emptyFunction, false); - offsetx = NumCast(d.overlayX) - e.clientX; - offsety = NumCast(d.overlayY) - e.clientY; - }; - return ( - <div - className="overlayView-doc" - ref={dref} - key={d[Id]} - onPointerDown={onPointerDown} - style={{ top: d.type === DocumentType.PRES ? 0 : undefined, width: NumCast(d._width), height: NumCast(d._height), transform: `translate(${d.overlayX}px, ${d.overlayY}px)` }}> - <DocumentView - Document={d} - rootSelected={returnTrue} - bringToFront={emptyFunction} - addDocument={undefined} - removeDocument={this.removeOverlayDoc} - PanelWidth={d[Width]} - PanelHeight={d[Height]} - ScreenToLocalTransform={this.docScreenToLocalXf(d)} - renderDepth={1} - hideDecorations={true} - isDocumentActive={returnTrue} - isContentActive={returnTrue} - whenChildContentsActiveChanged={emptyFunction} - focus={emptyFunction} - styleProvider={DefaultStyleProvider} - docViewPath={returnEmptyDoclist} - addDocTab={DocumentViewInternal.addDocTabFunc} - pinToPres={emptyFunction} - childFilters={returnEmptyFilter} - childFiltersByRanges={returnEmptyFilter} - searchFilterDocs={returnEmptyDoclist} - /> - </div> - ); + return Doc.MyOverlayDocs.filter(d => !LightboxView.LightboxDoc || d.type === DocumentType.PRES).map(d => { + let offsetx = 0, + offsety = 0; + const dref = React.createRef<HTMLDivElement>(); + const onPointerMove = action((e: PointerEvent, down: number[]) => { + if (e.cancelBubble) return false; // if the overlay doc processed the move event (e.g., to pan its contents), then the event should be marked as canceled since propagation can't be stopped + if (e.buttons === 1) { + d.overlayX = e.clientX + offsetx; + d.overlayY = e.clientY + offsety; + } + if (e.metaKey) { + const dragData = new DragManager.DocumentDragData([d]); + dragData.offset = [-offsetx, -offsety]; + dragData.dropAction = 'move'; + dragData.removeDocument = this.removeOverlayDoc; + dragData.moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean): boolean => { + return dragData.removeDocument!(doc) ? addDocument(doc) : false; + }; + DragManager.StartDocumentDrag([dref.current!], dragData, down[0], down[1]); + return true; + } + return false; }); + + const onPointerDown = (e: React.PointerEvent) => { + setupMoveUpEvents(this, e, onPointerMove, emptyFunction, emptyFunction, false); + offsetx = NumCast(d.overlayX) - e.clientX; + offsety = NumCast(d.overlayY) - e.clientY; + }; + return ( + <div + className="overlayView-doc" + ref={dref} + key={d[Id]} + onPointerDown={onPointerDown} + style={{ top: d.type === DocumentType.PRES ? 0 : undefined, width: NumCast(d._width), height: NumCast(d._height), transform: `translate(${d.overlayX}px, ${d.overlayY}px)` }}> + <DocumentView + Document={d} + addDocument={undefined} + removeDocument={this.removeOverlayDoc} + PanelWidth={d[Width]} + PanelHeight={d[Height]} + ScreenToLocalTransform={this.docScreenToLocalXf(d)} + renderDepth={1} + hideDecorations={true} + isDocumentActive={returnTrue} + isContentActive={returnTrue} + whenChildContentsActiveChanged={emptyFunction} + focus={emptyFunction} + styleProvider={DefaultStyleProvider} + containerViewPath={returnEmptyDoclist} + addDocTab={DocumentViewInternal.addDocTabFunc} + pinToPres={emptyFunction} + childFilters={returnEmptyFilter} + childFiltersByRanges={returnEmptyFilter} + searchFilterDocs={returnEmptyDoclist} + /> + </div> + ); + }); } public static ShowSpinner() { @@ -258,7 +253,6 @@ export class OverlayView extends React.Component { return ( <div className="overlayView" id="overlayView"> <div>{this._elements}</div> - <CollectionFreeFormLinksView key="freeformLinks" /> {this.overlayDocs} </div> ); diff --git a/src/client/views/Palette.tsx b/src/client/views/Palette.tsx deleted file mode 100644 index 749eb08a2..000000000 --- a/src/client/views/Palette.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { IReactionDisposer, observable, reaction } from 'mobx'; -import { observer } from 'mobx-react'; -import * as React from 'react'; -import { Doc } from '../../fields/Doc'; -import { NumCast } from '../../fields/Types'; -import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, emptyPath } from '../../Utils'; -import { Transform } from '../util/Transform'; -import { DocumentView } from './nodes/DocumentView'; -import './Palette.scss'; - -export interface PaletteProps { - x: number; - y: number; - thumb: number[]; - thumbDoc: Doc; -} - -@observer -export default class Palette extends React.Component<PaletteProps> { - private _selectedDisposer?: IReactionDisposer; - @observable private _selectedIndex: number = 0; - - componentDidMount = () => { - this._selectedDisposer = reaction( - () => NumCast(this.props.thumbDoc.selectedIndex), - i => (this._selectedIndex = i), - { fireImmediately: true } - ); - }; - - componentWillUnmount = () => { - this._selectedDisposer?.(); - }; - - render() { - return ( - <div className="palette-container" style={{ transform: `translate(${this.props.x}px, ${this.props.y}px)` }}> - <div className="palette-thumb" style={{ transform: `translate(${this.props.thumb[0] - this.props.x}px, ${this.props.thumb[1] - this.props.y}px)` }}> - <div className="palette-thumbContent" style={{ transform: `translate(-${this._selectedIndex * 50 + 10}px, 0px)` }}> - <DocumentView - Document={this.props.thumbDoc} - DataDoc={undefined} - addDocument={undefined} - addDocTab={returnFalse} - rootSelected={returnTrue} - pinToPres={emptyFunction} - removeDocument={undefined} - ScreenToLocalTransform={Transform.Identity} - PanelWidth={() => window.screen.width} - PanelHeight={() => window.screen.height} - renderDepth={0} - isDocumentActive={returnTrue} - isContentActive={emptyFunction} - focus={emptyFunction} - docViewPath={returnEmptyDoclist} - styleProvider={returnEmptyString} - whenChildContentsActiveChanged={emptyFunction} - bringToFront={emptyFunction} - childFilters={returnEmptyFilter} - childFiltersByRanges={returnEmptyFilter} - searchFilterDocs={returnEmptyDoclist} - /> - <div className="palette-cover" style={{ transform: `translate(${Math.max(0, this._selectedIndex) * 50.75 + 23}px, 0px)` }}></div> - </div> - </div> - </div> - ); - } -} diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx index e3a43d45f..456b753b4 100644 --- a/src/client/views/PreviewCursor.tsx +++ b/src/client/views/PreviewCursor.tsx @@ -1,41 +1,50 @@ -import { action, observable, runInAction } from 'mobx'; +import { action, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { Doc, Opt } from '../../fields/Doc'; import { lightOrDark, returnFalse } from '../../Utils'; -import { Docs, DocumentOptions, DocUtils } from '../documents/Documents'; +import { Doc, Opt } from '../../fields/Doc'; +import { DocUtils, Docs, DocumentOptions } from '../documents/Documents'; import { ImageUtils } from '../util/Import & Export/ImageUtils'; import { Transform } from '../util/Transform'; -import { undoBatch, UndoManager } from '../util/UndoManager'; -import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox'; +import { UndoManager, undoBatch } from '../util/UndoManager'; +import { ObservableReactComponent } from './ObservableReactComponent'; import './PreviewCursor.scss'; +import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox'; @observer -export class PreviewCursor extends React.Component<{}> { - static _onKeyPress?: (e: KeyboardEvent) => void; - static _getTransform: () => Transform; - static _addDocument: (doc: Doc | Doc[]) => boolean; - static _addLiveTextDoc: (doc: Doc) => void; - static _nudge?: undefined | ((x: number, y: number) => boolean); - static _slowLoadDocuments?: (files: File[] | string, options: DocumentOptions, generatedDocuments: Doc[], text: string, completed: ((doc: Doc[]) => void) | undefined, addDocument: (doc: Doc | Doc[]) => boolean) => Promise<void>; - @observable static _clickPoint = [0, 0]; - @observable public static Visible = false; - public static Doc: Opt<Doc>; +export class PreviewCursor extends ObservableReactComponent<{}> { + static _instance: PreviewCursor; + public static get Instance() { + return PreviewCursor._instance; + } + + _onKeyPress?: (e: KeyboardEvent) => void; + _getTransform?: () => Transform; + _addDocument?: (doc: Doc | Doc[]) => boolean; + _addLiveTextDoc?: (doc: Doc) => void; + _nudge?: undefined | ((x: number, y: number) => boolean); + _slowLoadDocuments?: (files: File[] | string, options: DocumentOptions, generatedDocuments: Doc[], text: string, completed: ((doc: Doc[]) => void) | undefined, addDocument: (doc: Doc | Doc[]) => boolean) => Promise<void>; + @observable _clickPoint: number[] = []; + @observable public Visible = false; + public Doc: Opt<Doc>; constructor(props: any) { super(props); + makeObservable(this); + PreviewCursor._instance = this; + this._clickPoint = observable([0, 0]); document.addEventListener('keydown', this.onKeyPress); document.addEventListener('paste', this.paste, true); } paste = async (e: ClipboardEvent) => { - if (PreviewCursor.Visible && e.clipboardData) { - const newPoint = PreviewCursor._getTransform().transformPoint(PreviewCursor._clickPoint[0], PreviewCursor._clickPoint[1]); - runInAction(() => (PreviewCursor.Visible = false)); + if (this.Visible && e.clipboardData) { + const newPoint = this._getTransform?.().transformPoint(this._clickPoint[0], this._clickPoint[1]); + runInAction(() => (this.Visible = false)); // tests for URL and makes web document const re: any = /^https?:\/\//g; const plain = e.clipboardData.getData('text/plain'); - if (plain) { + if (plain && newPoint) { // tests for youtube and makes video document if (plain.indexOf('www.youtube.com/watch') !== -1) { const batch = UndoManager.StartBatch('youtube upload'); @@ -47,12 +56,12 @@ export class PreviewCursor extends React.Component<{}> { x: newPoint[0], y: newPoint[1], }; - PreviewCursor._slowLoadDocuments?.(plain.split('v=')[1].split('&')[0], options, generatedDocuments, '', undefined, PreviewCursor._addDocument).then(batch.end); + this._slowLoadDocuments?.(plain.split('v=')[1].split('&')[0], options, generatedDocuments, '', undefined, this._addDocument ?? returnFalse).then(batch.end); } else if (re.test(plain)) { const url = plain; - if (url.startsWith(window.location.href)) { + if (!url.startsWith(window.location.href)) { undoBatch(() => - PreviewCursor._addDocument( + this._addDocument?.( Docs.Create.WebDocument(url, { title: url, _width: 500, @@ -70,13 +79,13 @@ export class PreviewCursor extends React.Component<{}> { const strs = docids[0].split(','); // hack! docids[0] is the top left of the selection rectangle const ptx = Number(strs[0].substring((clone ? '__DashCloneId(' : '__DashDocId(').length)); const pty = Number(strs[1].substring(0, strs[1].length - 1)); - Doc.Paste(docids.slice(1), clone, PreviewCursor._addDocument, ptx, pty, newPoint); + this._addDocument && Doc.Paste(docids.slice(1), clone, this._addDocument, ptx, pty, newPoint); e.stopPropagation(); } else { FormattedTextBox.PasteOnLoad = e; if (e.clipboardData.getData('dash/pdfAnchor')) e.preventDefault(); - UndoManager.RunInBatch(() => PreviewCursor._addLiveTextDoc(DocUtils.GetNewTextDoc('', newPoint[0], newPoint[1], 500, undefined, undefined, undefined, 750)), 'paste'); + UndoManager.RunInBatch(() => this._addLiveTextDoc?.(DocUtils.GetNewTextDoc('', newPoint[0], newPoint[1], 500, undefined, undefined, undefined)), 'paste'); } } //pasting in images @@ -84,17 +93,19 @@ export class PreviewCursor extends React.Component<{}> { const re: any = /<img src="(.*?)"/g; const arr: any[] = re.exec(e.clipboardData.getData('text/html')); - undoBatch(() => { - const doc = Docs.Create.ImageDocument(arr[1], { - _width: 300, - title: arr[1], - x: newPoint[0], - y: newPoint[1], - }); - ImageUtils.ExtractExif(doc); - PreviewCursor._addDocument(doc); - })(); - } else if (e.clipboardData.items.length) { + if (newPoint) { + undoBatch(() => { + const doc = Docs.Create.ImageDocument(arr[1], { + _width: 300, + title: arr[1], + x: newPoint[0], + y: newPoint[1], + }); + ImageUtils.ExtractImgInfo(doc); + this._addDocument?.(doc); + })(); + } + } else if (e.clipboardData.items.length && newPoint) { const batch = UndoManager.StartBatch('collection view drop'); const files: File[] = []; Array.from(e.clipboardData.items).forEach(item => { @@ -102,7 +113,7 @@ export class PreviewCursor extends React.Component<{}> { file && files.push(file); }); const generatedDocuments = await DocUtils.uploadFilesToDocs(files, { x: newPoint[0], y: newPoint[1] }); - generatedDocuments.forEach(PreviewCursor._addDocument); + this._addDocument && generatedDocuments.forEach(this._addDocument); batch.end(); } } @@ -135,25 +146,25 @@ export class PreviewCursor extends React.Component<{}> { ) { if ((!e.metaKey && !e.ctrlKey) || (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 65 && e.keyCode <= 90)) { // /^[a-zA-Z0-9$*^%#@+-=_|}{[]"':;?/><.,}]$/.test(e.key)) { - PreviewCursor.Visible && PreviewCursor._onKeyPress?.(e); - ((!e.ctrlKey && !e.metaKey) || e.key !== 'v') && (PreviewCursor.Visible = false); + this.Visible && this._onKeyPress?.(e); + ((!e.ctrlKey && !e.metaKey) || e.key !== 'v') && (this.Visible = false); } - } else if (PreviewCursor.Visible) { + } else if (this.Visible) { if (e.key === 'ArrowRight') { - PreviewCursor._nudge?.(1 * (e.shiftKey ? 2 : 1), 0) && e.stopPropagation(); + this._nudge?.(1 * (e.shiftKey ? 2 : 1), 0) && e.stopPropagation(); } else if (e.key === 'ArrowLeft') { - PreviewCursor._nudge?.(-1 * (e.shiftKey ? 2 : 1), 0) && e.stopPropagation(); + this._nudge?.(-1 * (e.shiftKey ? 2 : 1), 0) && e.stopPropagation(); } else if (e.key === 'ArrowUp') { - PreviewCursor._nudge?.(0, 1 * (e.shiftKey ? 2 : 1)) && e.stopPropagation(); + this._nudge?.(0, 1 * (e.shiftKey ? 2 : 1)) && e.stopPropagation(); } else if (e.key === 'ArrowDown') { - PreviewCursor._nudge?.(0, -1 * (e.shiftKey ? 2 : 1)) && e.stopPropagation(); + this._nudge?.(0, -1 * (e.shiftKey ? 2 : 1)) && e.stopPropagation(); } } }; //when focus is lost, this will remove the preview cursor @action onBlur = (): void => { - PreviewCursor.Visible = false; + this.Visible = false; }; @action @@ -167,23 +178,21 @@ export class PreviewCursor extends React.Component<{}> { nudge: undefined | ((nudgeX: number, nudgeY: number) => boolean), slowLoadDocuments: (files: File[] | string, options: DocumentOptions, generatedDocuments: Doc[], text: string, completed: ((doc: Doc[]) => void) | undefined, addDocument: (doc: Doc | Doc[]) => boolean) => Promise<void> ) { - this._clickPoint = [x, y]; - this._onKeyPress = onKeyPress; - this._addLiveTextDoc = addLiveText; - this._getTransform = getTransform; - this._addDocument = addDocument || returnFalse; - this._nudge = nudge; - this._slowLoadDocuments = slowLoadDocuments; - this.Visible = true; + const self = PreviewCursor.Instance; + if (self) { + self._clickPoint = [x, y]; + self._onKeyPress = onKeyPress; + self._addLiveTextDoc = addLiveText; + self._getTransform = getTransform; + self._addDocument = addDocument || returnFalse; + self._nudge = nudge; + self._slowLoadDocuments = slowLoadDocuments; + self.Visible = true; + } } render() { - return !PreviewCursor._clickPoint || !PreviewCursor.Visible ? null : ( - <div - className="previewCursor" - onBlur={this.onBlur} - tabIndex={0} - ref={e => e?.focus()} - style={{ color: lightOrDark(PreviewCursor.Doc?.backgroundColor ?? 'white'), transform: `translate(${PreviewCursor._clickPoint[0]}px, ${PreviewCursor._clickPoint[1]}px)` }}> + return !this._clickPoint || !this.Visible ? null : ( + <div className="previewCursor" onBlur={this.onBlur} tabIndex={0} ref={e => e?.focus()} style={{ color: lightOrDark(this.Doc?.backgroundColor ?? 'white'), transform: `translate(${this._clickPoint[0]}px, ${this._clickPoint[1]}px)` }}> I </div> ); diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss index b801b3abf..b8c73b6d3 100644 --- a/src/client/views/PropertiesButtons.scss +++ b/src/client/views/PropertiesButtons.scss @@ -1,6 +1,6 @@ -@import "global/globalCssVariables"; +@import 'global/globalCssVariables.module.scss'; -$linkGap : 3px; +$linkGap: 3px; .propertiesButtons-linkFlyout { grid-column: 2/4; @@ -23,7 +23,7 @@ $linkGap : 3px; // margin-right: 7px; // margin-left: 8px; height: 28px; - // width: 226px;//29px; + // width: 226px;//29px; display: flex; align-items: center; // height: 25px; @@ -39,10 +39,9 @@ $linkGap : 3px; // font-size: 75%; transition: transform 0.2s; // text-align: center; - // justify-content: center; - + // margin-right: 10px; // margin-left: 4px; @@ -55,34 +54,34 @@ $linkGap : 3px; .propertiesButtons-linkButton-empty.toggle-on { background-color: $medium-blue; color: $white; - width:100% + width: 100%; } .propertiesButtons-linkButton-empty.toggle-hover { background-color: $light-blue; color: $black; - width:100% + width: 100%; } .propertiesButtons-linkButton-empty.toggle-off { - background-color: white;//$dark-gray; + background-color: white; //$dark-gray; color: black; //white; - width:100% + width: 100%; } .propertiesButtons-icon { - margin-left:8px; + margin-left: 8px; } .propertiesButtons { - position:relative; + position: relative; width: 100%; // margin-top: 3px; -// // grid-column: 1/4; -// width: 100%; -// height: auto; -// display: flex; -// // flex-direction: row; -// // flex-wrap: wrap; -// padding-bottom: 5.5px; + // // grid-column: 1/4; + // width: 100%; + // height: auto; + // display: flex; + // // flex-direction: row; + // // flex-wrap: wrap; + // padding-bottom: 5.5px; } .onClickFlyout-editScript { @@ -95,11 +94,10 @@ $linkGap : 3px; padding: 4px; } - .propertiesButtons-button { pointer-events: auto; - padding-right: 8px;//5px; - width: 100%;//width: 25px; + padding-right: 8px; //5px; + width: 100%; //width: 25px; border-radius: 5px; margin-right: 20px; margin-bottom: 8px; @@ -161,12 +159,11 @@ $linkGap : 3px; margin-left: 4px; &:hover { - filter:brightness(0.85); + filter: brightness(0.85); cursor: pointer; } } - @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); @@ -194,4 +191,4 @@ $linkGap : 3px; 100% { box-shadow: 0 0 0 10px rgba(0, 255, 0, 0); } -}
\ No newline at end of file +} diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 18f53b8e7..bba6285c2 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -2,6 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Dropdown, DropdownType, IListItemProps, Toggle, ToggleType, Type } from 'browndash-components'; import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { AiOutlineColumnWidth } from 'react-icons/ai'; import { BiHide, BiShow } from 'react-icons/bi'; import { BsGrid3X3GapFill } from 'react-icons/bs'; @@ -12,42 +13,37 @@ import { RxWidth } from 'react-icons/rx'; import { TbEditCircle, TbEditCircleOff, TbHandOff, TbHandStop, TbHighlight, TbHighlightOff } from 'react-icons/tb'; import { TfiBarChart } from 'react-icons/tfi'; import { Doc, DocListCast, Opt } from '../../fields/Doc'; -import { InkField } from '../../fields/InkField'; import { RichTextField } from '../../fields/RichTextField'; import { BoolCast, ScriptCast } from '../../fields/Types'; import { ImageField } from '../../fields/URLField'; -import { DocUtils } from '../documents/Documents'; import { CollectionViewType, DocumentType } from '../documents/DocumentTypes'; +import { DocUtils } from '../documents/Documents'; import { IsFollowLinkScript } from '../util/LinkFollower'; import { LinkManager } from '../util/LinkManager'; import { SelectionManager } from '../util/SelectionManager'; import { SettingsManager } from '../util/SettingsManager'; -import { undoable, undoBatch } from '../util/UndoManager'; -import { Colors } from './global/globalEnums'; +import { undoBatch, undoable } from '../util/UndoManager'; import { InkingStroke } from './InkingStroke'; -import { DocumentView, OpenWhere } from './nodes/DocumentView'; import './PropertiesButtons.scss'; -import React = require('react'); - -enum UtilityButtonState { - Default, - OpenRight, - OpenExternally, -} +import { Colors } from './global/globalEnums'; +import { DocumentView, OpenWhere } from './nodes/DocumentView'; @observer export class PropertiesButtons extends React.Component<{}, {}> { @observable public static Instance: PropertiesButtons; @computed get selectedDoc() { - return SelectionManager.SelectedSchemaDoc() || SelectionManager.Views().lastElement()?.rootDoc; + return SelectionManager.SelectedSchemaDoc || SelectionManager.Views.lastElement()?.Document; + } + @computed get selectedLayoutDoc() { + return SelectionManager.SelectedSchemaDoc || SelectionManager.Views.lastElement()?.layoutDoc; } @computed get selectedTabView() { - return !SelectionManager.SelectedSchemaDoc() && SelectionManager.Views().lastElement()?.topMost; + return !SelectionManager.SelectedSchemaDoc && SelectionManager.Views.lastElement()?.topMost; } propertyToggleBtn = (label: (on?: any) => string, property: string, tooltip: (on?: any) => string, icon: (on?: any) => any, onClick?: (dv: Opt<DocumentView>, doc: Doc, property: string) => void, useUserDoc?: boolean) => { - const targetDoc = useUserDoc ? Doc.UserDoc() : this.selectedDoc; + const targetDoc = useUserDoc ? Doc.UserDoc() : this.selectedLayoutDoc; const onPropToggle = (dv: Opt<DocumentView>, doc: Doc, prop: string) => ((dv?.layoutDoc || doc)[prop] = (dv?.layoutDoc || doc)[prop] ? false : true); return !targetDoc ? null : ( <Toggle @@ -61,8 +57,8 @@ export class PropertiesButtons extends React.Component<{}, {}> { fillWidth={true} toggleType={ToggleType.BUTTON} onClick={undoable(() => { - if (SelectionManager.Views().length > 1) { - SelectionManager.Views().forEach(dv => (onClick ?? onPropToggle)(dv, dv.rootDoc, property)); + if (SelectionManager.Views.length > 1) { + SelectionManager.Views.forEach(dv => (onClick ?? onPropToggle)(dv, dv.Document, property)); } else if (targetDoc) (onClick ?? onPropToggle)(undefined, targetDoc, property); }, property)} /> @@ -79,8 +75,8 @@ export class PropertiesButtons extends React.Component<{}, {}> { on => `${on ? 'Set' : 'Remove'} lightbox flag`, on => 'window-restore', onClick => { - SelectionManager.Views().forEach(dv => { - const containerDoc = dv.rootDoc; + SelectionManager.Views.forEach(dv => { + const containerDoc = dv.Document; //containerDoc.followAllLinks = // containerDoc.noShadow = // containerDoc.layout_disableBrushing = @@ -88,8 +84,8 @@ export class PropertiesButtons extends React.Component<{}, {}> { //containerDoc._freeform_fitContentsToBox = containerDoc._isLightbox = !containerDoc._isLightbox; //containerDoc._xPadding = containerDoc._yPadding = containerDoc._isLightbox ? 10 : undefined; - const containerContents = DocListCast(dv.dataDoc[dv.props.fieldKey ?? Doc.LayoutFieldKey(containerDoc)]); - //dv.rootDoc.onClick = ScriptField.MakeScript('{self.data = undefined; documentView.select(false)}', { documentView: 'any' }); + const containerContents = DocListCast(dv.dataDoc[Doc.LayoutFieldKey(containerDoc)]); + //dv.Docuemnt.onClick = ScriptField.MakeScript('{self.data = undefined; documentView.select(false)}', { documentView: 'any' }); containerContents.forEach(doc => LinkManager.Links(doc).forEach(link => (link.link_displayLine = false))); }); } @@ -103,7 +99,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { on => 'Switch between title styles', on => (on ? <MdSubtitlesOff /> : <MdSubtitles />), // {currentIcon}, //(on ? <MdSubtitles/> :) , //,'text-width', on ? <MdSubtitles/> : <MdSubtitlesOff/>, (dv, doc) => { - const tdoc = dv?.rootDoc || doc; + const tdoc = dv?.Document || doc; const newtitle = !tdoc._layout_showTitle ? 'title' : tdoc._layout_showTitle === 'title' ? 'title:hover' : ''; tdoc._layout_showTitle = newtitle ? newtitle : undefined; } @@ -197,8 +193,8 @@ export class PropertiesButtons extends React.Component<{}, {}> { // on => `${on ? 'Set' : 'Remove'} lightbox flag`, // on => 'window-restore', // onClick => { - // SelectionManager.Views().forEach(dv => { - // const containerDoc = dv.rootDoc; + // SelectionManager.Views.forEach(dv => { + // const containerDoc = dv.Document; // //containerDoc.followAllLinks = // // containerDoc.noShadow = // // containerDoc.disableDocBrushing = @@ -207,7 +203,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { // containerDoc._isLightbox = !containerDoc._isLightbox; // //containerDoc._xPadding = containerDoc._yPadding = containerDoc._isLightbox ? 10 : undefined; // const containerContents = DocListCast(dv.dataDoc[dv.props.fieldKey ?? Doc.LayoutFieldKey(containerDoc)]); - // //dv.rootDoc.onClick = ScriptField.MakeScript('{self.data = undefined; documentView.select(false)}', { documentView: 'any' }); + // //dv.Document.onClick = ScriptField.MakeScript('{self.data = undefined; documentView.select(false)}', { documentView: 'any' }); // containerContents.forEach(doc => LinkManager.Links(doc).forEach(link => (link.layout_linkDisplay = false))); // }); // } @@ -233,7 +229,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { '_layout_showCaption', on => `${on ? 'Hide' : 'Show'} caption footer`, on => (on ? <MdClosedCaptionDisabled /> : <MdClosedCaption />), //'closed-captioning', - (dv, doc) => ((dv?.rootDoc || doc)._layout_showCaption = (dv?.rootDoc || doc)._layout_showCaption === undefined ? 'caption' : undefined) + (dv, doc) => ((dv?.Document || doc)._layout_showCaption = (dv?.Document || doc)._layout_showCaption === undefined ? 'caption' : undefined) ); } @@ -244,7 +240,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { '_chromeHidden', on => `${on ? 'Show' : 'Hide'} editing UI`, on => (on ? <TbEditCircle /> : <TbEditCircleOff />), // 'edit', - (dv, doc) => ((dv?.rootDoc || doc)._chromeHidden = !(dv?.rootDoc || doc)._chromeHidden) + (dv, doc) => ((dv?.Document || doc)._chromeHidden = !(dv?.Document || doc)._chromeHidden) ); } @@ -349,10 +345,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { @undoBatch handlePerspectiveChange = (e: any) => { this.selectedDoc && (this.selectedDoc._type_collection = e.target.value); - SelectionManager.Views() - .filter(dv => dv.docView) - .map(dv => dv.docView!) - .forEach(docView => (docView.layoutDoc._type_collection = e.target.value)); + SelectionManager.Views.forEach(docView => (docView.layoutDoc._type_collection = e.target.value)); }; @computed get onClickVal() { const linkButton = IsFollowLinkScript(this.selectedDoc.onClick); @@ -413,34 +406,31 @@ export class PropertiesButtons extends React.Component<{}, {}> { @undoBatch @action handleOptionChange = (onClick: string) => { - SelectionManager.Views() - .filter(dv => dv.docView) - .map(dv => dv.docView!) - .forEach(docView => { - const linkButton = IsFollowLinkScript(docView.props.Document.onClick); - docView.noOnClick(); - switch (onClick) { - case 'enterPortal': - docView.makeIntoPortal(); - break; - case 'toggleDetail': - docView.setToggleDetail(); - break; - case 'linkInPlace': - docView.toggleFollowLink(false, false); - docView.props.Document.followLinkLocation = linkButton ? OpenWhere.lightbox : undefined; - break; - case 'linkOnRight': - docView.toggleFollowLink(false, false); - docView.props.Document.followLinkLocation = linkButton ? OpenWhere.addRight : undefined; - break; - } - }); + SelectionManager.Views.forEach(docView => { + const linkButton = IsFollowLinkScript(docView.Document.onClick); + docView.noOnClick(); + switch (onClick) { + case 'enterPortal': + docView.makeIntoPortal(); + break; + case 'toggleDetail': + docView.setToggleDetail(); + break; + case 'linkInPlace': + docView.toggleFollowLink(false, false); + docView.Document.followLinkLocation = linkButton ? OpenWhere.lightbox : undefined; + break; + case 'linkOnRight': + docView.toggleFollowLink(false, false); + docView.Document.followLinkLocation = linkButton ? OpenWhere.addRight : undefined; + break; + } + }); }; @undoBatch editOnClickScript = () => { - if (SelectionManager.Views().length) SelectionManager.Views().forEach(dv => DocUtils.makeCustomViewClicked(dv.rootDoc, undefined, 'onClick')); + if (SelectionManager.Views.length) SelectionManager.Views.forEach(dv => DocUtils.makeCustomViewClicked(dv.Document, undefined, 'onClick')); else this.selectedDoc && DocUtils.makeCustomViewClicked(this.selectedDoc, undefined, 'onClick'); }; diff --git a/src/client/views/PropertiesDocBacklinksSelector.tsx b/src/client/views/PropertiesDocBacklinksSelector.tsx index b1e99c3f5..244cd4aa0 100644 --- a/src/client/views/PropertiesDocBacklinksSelector.tsx +++ b/src/client/views/PropertiesDocBacklinksSelector.tsx @@ -7,10 +7,10 @@ import { DocumentType } from '../documents/DocumentTypes'; import { LinkManager } from '../util/LinkManager'; import { SelectionManager } from '../util/SelectionManager'; import { SettingsManager } from '../util/SettingsManager'; +import './PropertiesDocBacklinksSelector.scss'; import { CollectionDockingView } from './collections/CollectionDockingView'; import { LinkMenu } from './linking/LinkMenu'; -import { OpenWhere, OpenWhereMod } from './nodes/DocumentView'; -import './PropertiesDocBacklinksSelector.scss'; +import { OpenWhere } from './nodes/DocumentView'; type PropertiesDocBacklinksSelectorProps = { Document: Doc; @@ -34,10 +34,10 @@ export class PropertiesDocBacklinksSelector extends React.Component<PropertiesDo }); render() { - return !SelectionManager.Views().length ? null : ( + return !SelectionManager.Views.length ? null : ( <div className="propertiesDocBacklinksSelector" style={{ color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }}> {this.props.hideTitle ? null : <p key="contexts">Contexts:</p>} - <LinkMenu docView={SelectionManager.Views().lastElement()} clearLinkEditor={undefined} itemHandler={this.getOnClick} style={{ left: 0, top: 0 }} /> + <LinkMenu docView={SelectionManager.Views.lastElement()} clearLinkEditor={undefined} itemHandler={this.getOnClick} style={{ left: 0, top: 0 }} /> </div> ); } diff --git a/src/client/views/PropertiesDocContextSelector.tsx b/src/client/views/PropertiesDocContextSelector.tsx index d157e7b1c..54f141a36 100644 --- a/src/client/views/PropertiesDocContextSelector.tsx +++ b/src/client/views/PropertiesDocContextSelector.tsx @@ -1,13 +1,14 @@ -import { computed } from 'mobx'; +import { computed, makeObservable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, DocListCast } from '../../fields/Doc'; import { Id } from '../../fields/FieldSymbols'; import { Cast, StrCast } from '../../fields/Types'; import { DocFocusOrOpen } from '../util/DocumentManager'; +import { ObservableReactComponent } from './ObservableReactComponent'; +import './PropertiesDocContextSelector.scss'; import { CollectionDockingView } from './collections/CollectionDockingView'; import { DocumentView, OpenWhere } from './nodes/DocumentView'; -import './PropertiesDocContextSelector.scss'; type PropertiesDocContextSelectorProps = { DocView?: DocumentView; @@ -17,11 +18,16 @@ type PropertiesDocContextSelectorProps = { }; @observer -export class PropertiesDocContextSelector extends React.Component<PropertiesDocContextSelectorProps> { +export class PropertiesDocContextSelector extends ObservableReactComponent<PropertiesDocContextSelectorProps> { + constructor(props: any) { + super(props); + makeObservable(this); + } + @computed get _docs() { - if (!this.props.DocView) return []; - const target = this.props.DocView.props.Document; - const targetContext = this.props.DocView.props.docViewPath().lastElement()?.rootDoc; + if (!this._props.DocView) return []; + const target = this._props.DocView._props.Document; + const targetContext = this._props.DocView.containerViewPath?.().lastElement()?.Document; const embeddings = DocListCast(target.proto_embeddings); const containerProtos = embeddings.filter(embedding => embedding.embedContainer && embedding.embedContainer instanceof Doc).reduce((set, embedding) => set.add(Cast(embedding.embedContainer, Doc, null)), new Set<Doc>()); const containerSets = Array.from(containerProtos.keys()).map(container => DocListCast(container.proto_embeddings)); @@ -40,23 +46,23 @@ export class PropertiesDocContextSelector extends React.Component<PropertiesDocC ); return doclayouts - .filter(doc => !Doc.AreProtosEqual(doc, CollectionDockingView.Instance?.props.Document)) + .filter(doc => !Doc.AreProtosEqual(doc, CollectionDockingView.Instance?.Document)) .filter(doc => !Doc.IsSystem(doc)) .filter(doc => doc !== targetContext) .map(doc => ({ col: doc, target })); } getOnClick = (col: Doc, target: Doc) => { - if (!this.props.DocView) return; + if (!this._props.DocView) return; col = Doc.IsDataProto(col) ? Doc.MakeDelegate(col) : col; - DocFocusOrOpen(Doc.GetProto(this.props.DocView.props.Document), undefined, col); + DocFocusOrOpen(Doc.GetProto(this._props.DocView.Document), undefined, col); }; render() { if (this._docs.length < 1) return undefined; return ( <div> - {this.props.hideTitle ? null : <p key="contexts">Contexts:</p>} + {this._props.hideTitle ? null : <p key="contexts">Contexts:</p>} {this._docs.map(doc => ( <p key={doc.col[Id] + doc.target[Id]}> <a onClick={() => this.getOnClick(doc.col, doc.target)}>{StrCast(doc.col.title)}</a> diff --git a/src/client/views/PropertiesSection.scss b/src/client/views/PropertiesSection.scss index 321b6300c..3f92a70f8 100644 --- a/src/client/views/PropertiesSection.scss +++ b/src/client/views/PropertiesSection.scss @@ -1,11 +1,10 @@ -@import './global/globalCssVariables.scss'; +@import './global/globalCssVariables.module.scss'; .propertiesView-section { - .propertiesView-content { padding: 10px; } - + .propertiesView-sectionTitle { text-align: center; display: flex; @@ -14,7 +13,7 @@ font-weight: bold; justify-content: space-between; align-items: center; - + .propertiesView-sectionTitle-icon { width: 20px; height: 20px; diff --git a/src/client/views/PropertiesSection.tsx b/src/client/views/PropertiesSection.tsx index bd586b2f9..3c9fa1123 100644 --- a/src/client/views/PropertiesSection.tsx +++ b/src/client/views/PropertiesSection.tsx @@ -1,11 +1,9 @@ -import React = require('react'); import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; -import './PropertiesSection.scss'; -import { Doc } from '../../fields/Doc'; -import { StrCast } from '../../fields/Types'; +import * as React from 'react'; import { SettingsManager } from '../util/SettingsManager'; +import './PropertiesSection.scss'; export interface PropertiesSectionProps { title: string; diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss index 874e2a366..b21828aa7 100644 --- a/src/client/views/PropertiesView.scss +++ b/src/client/views/PropertiesView.scss @@ -1,4 +1,4 @@ -@import './global/globalCssVariables.scss'; +@import './global/globalCssVariables.module.scss'; .propertiesView-presentationTrails-title { display: flex; diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 899cca4ec..5cfe0bd5f 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -1,23 +1,23 @@ -import React = require('react'); import { IconLookup } from '@fortawesome/fontawesome-svg-core'; import { faAnchor, faArrowRight, faWindowMaximize } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Checkbox, Tooltip } from '@material-ui/core'; -import { Button, ColorPicker, Colors, EditableText, IconButton, NumberInput, Size, Slider, Type } from 'browndash-components'; +import { Checkbox, Tooltip } from '@mui/material'; +import { Colors, EditableText, IconButton, NumberInput, Size, Slider, Type } from 'browndash-components'; import { concat } from 'lodash'; -import { action, computed, IReactionDisposer, observable, reaction, trace } from 'mobx'; +import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; -import { ColorState, SketchPicker } from 'react-color'; +import * as React from 'react'; +import { ColorResult, SketchPicker } from 'react-color'; import * as Icons from 'react-icons/bs'; //{BsCollectionFill, BsFillFileEarmarkImageFill} from "react-icons/bs" +import { Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents } from '../../Utils'; import { Doc, DocListCast, Field, FieldResult, HierarchyMapping, NumListCast, Opt, ReverseHierarchyMap, StrListCast } from '../../fields/Doc'; -import { AclAdmin, DocAcl, DocData, Height, Width } from '../../fields/DocSymbols'; +import { AclAdmin, DocAcl, DocData } from '../../fields/DocSymbols'; import { Id } from '../../fields/FieldSymbols'; import { InkField } from '../../fields/InkField'; import { List } from '../../fields/List'; import { ComputedField } from '../../fields/ScriptField'; import { Cast, DocCast, NumCast, StrCast } from '../../fields/Types'; -import { GetEffectiveAcl, normalizeEmail, SharingPermissions } from '../../fields/util'; -import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents, Utils } from '../../Utils'; +import { GetEffectiveAcl, SharingPermissions, normalizeEmail } from '../../fields/util'; import { CollectionViewType, DocumentType } from '../documents/DocumentTypes'; import { DocumentManager } from '../util/DocumentManager'; import { GroupManager } from '../util/GroupManager'; @@ -26,39 +26,38 @@ import { SelectionManager } from '../util/SelectionManager'; import { SettingsManager } from '../util/SettingsManager'; import { SharingManager } from '../util/SharingManager'; import { Transform } from '../util/Transform'; -import { undoable, undoBatch, UndoManager } from '../util/UndoManager'; +import { UndoManager, undoBatch, undoable } from '../util/UndoManager'; import { EditableView } from './EditableView'; import { FilterPanel } from './FilterPanel'; import { InkStrokeProperties } from './InkStrokeProperties'; -import { DocumentView, OpenWhere, StyleProviderFunc } from './nodes/DocumentView'; -import { KeyValueBox } from './nodes/KeyValueBox'; -import { PresBox, PresEffect, PresEffectDirection } from './nodes/trails'; +import { ObservableReactComponent } from './ObservableReactComponent'; import { PropertiesButtons } from './PropertiesButtons'; import { PropertiesDocBacklinksSelector } from './PropertiesDocBacklinksSelector'; import { PropertiesDocContextSelector } from './PropertiesDocContextSelector'; import { PropertiesSection } from './PropertiesSection'; import './PropertiesView.scss'; import { DefaultStyleProvider } from './StyleProvider'; -import { FaFillDrip, FaRegHeart } from 'react-icons/fa'; -import { GeneratedResponse, StyleInput, generatePalette } from '../apis/gpt/customization'; -import { ExtractColors } from './ExtractColors'; -import ReactTextareaAutosize from 'react-textarea-autosize'; +import { DocumentView, OpenWhere } from './nodes/DocumentView'; +import { StyleProviderFuncType } from './nodes/FieldView'; +import { KeyValueBox } from './nodes/KeyValueBox'; +import { PresBox, PresEffect, PresEffectDirection } from './nodes/trails'; const _global = (window /* browser */ || global) /* node */ as any; interface PropertiesViewProps { width: number; height: number; - styleProvider?: StyleProviderFunc; + styleProvider?: StyleProviderFuncType; addDocTab: (doc: Doc, where: OpenWhere) => boolean; } @observer -export class PropertiesView extends React.Component<PropertiesViewProps> { +export class PropertiesView extends ObservableReactComponent<PropertiesViewProps> { private _widthUndo?: UndoManager.Batch; public static Instance: PropertiesView | undefined; constructor(props: any) { super(props); + makeObservable(this); PropertiesView.Instance = this; } @@ -67,11 +66,15 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { } @computed get selectedDoc() { - return SelectionManager.SelectedSchemaDoc() || this.selectedDocumentView?.rootDoc || Doc.ActiveDashboard; + return SelectionManager.SelectedSchemaDoc || this.selectedDocumentView?.Document || Doc.ActiveDashboard; + } + + @computed get selectedLayoutDoc() { + return SelectionManager.SelectedSchemaDoc || this.selectedDocumentView?.layoutDoc || Doc.ActiveDashboard; } @computed get selectedDocumentView() { - if (SelectionManager.Views().length) return SelectionManager.Views()[0]; - if (PresBox.Instance?.selectedArray.size) return DocumentManager.Instance.getDocumentView(PresBox.Instance.rootDoc); + if (SelectionManager.Views.length) return SelectionManager.Views[0]; + if (PresBox.Instance?.selectedArray.size) return DocumentManager.Instance.getDocumentView(PresBox.Instance.Document); return undefined; } @computed get isPres(): boolean { @@ -175,28 +178,31 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { @computed get isInk() { return this.selectedDoc?.type === DocumentType.INK; } + @computed get isGroup() { + return this.selectedDoc?.isGroup; + } @computed get isStack() { return [CollectionViewType.Stacking, CollectionViewType.NoteTaking].includes(this.selectedDoc?.type_collection as any); } - rtfWidth = () => (!this.selectedDoc ? 0 : Math.min(this.selectedDoc?.[Width](), this.props.width - 20)); - rtfHeight = () => (!this.selectedDoc ? 0 : this.rtfWidth() <= this.selectedDoc?.[Width]() ? Math.min(this.selectedDoc?.[Height](), this.MAX_EMBED_HEIGHT) : this.MAX_EMBED_HEIGHT); + rtfWidth = () => (!this.selectedLayoutDoc ? 0 : Math.min(NumCast(this.selectedLayoutDoc?._width), this._props.width - 20)); + rtfHeight = () => (!this.selectedLayoutDoc ? 0 : this.rtfWidth() <= NumCast(this.selectedLayoutDoc?._width) ? Math.min(NumCast(this.selectedLayoutDoc?._height), this.MAX_EMBED_HEIGHT) : this.MAX_EMBED_HEIGHT); @action docWidth = () => { - if (this.selectedDoc) { - const layoutDoc = this.selectedDoc; + const layoutDoc = this.selectedLayoutDoc; + if (layoutDoc) { const aspect = Doc.NativeAspect(layoutDoc, undefined, !layoutDoc._layout_fitWidth); - if (aspect) return Math.min(layoutDoc[Width](), Math.min(this.MAX_EMBED_HEIGHT * aspect, this.props.width - 20)); - return Doc.NativeWidth(layoutDoc) ? Math.min(layoutDoc[Width](), this.props.width - 20) : this.props.width - 20; + if (aspect) return Math.min(NumCast(layoutDoc._width), Math.min(this.MAX_EMBED_HEIGHT * aspect, this._props.width - 20)); + return Doc.NativeWidth(layoutDoc) ? Math.min(NumCast(layoutDoc._width), this._props.width - 20) : this._props.width - 20; } return 0; }; @action docHeight = () => { - if (this.selectedDoc && this.dataDoc) { - const layoutDoc = this.selectedDoc; + const layoutDoc = this.selectedLayoutDoc; + if (layoutDoc && this.dataDoc) { return Math.max( 70, Math.min( @@ -204,10 +210,10 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { Doc.NativeAspect(layoutDoc, undefined, true) ? this.docWidth() / Doc.NativeAspect(layoutDoc, undefined, true) : layoutDoc._layout_fitWidth - ? !Doc.NativeHeight(this.dataDoc) - ? NumCast(this.props.height) - : Math.min((this.docWidth() * Doc.NativeHeight(layoutDoc)) / Doc.NativeWidth(layoutDoc) || NumCast(this.props.height)) - : NumCast(layoutDoc._height) || 50 + ? !Doc.NativeHeight(this.dataDoc) + ? NumCast(this._props.height) + : Math.min((this.docWidth() * Doc.NativeHeight(layoutDoc)) / Doc.NativeWidth(layoutDoc) || NumCast(this._props.height)) + : NumCast(layoutDoc._height) || 50 ) ); } @@ -218,7 +224,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { const rows: JSX.Element[] = []; if (this.dataDoc && this.selectedDoc) { const ids = new Set<string>(reqdKeys); - const docs: Doc[] = SelectionManager.Views().length < 2 ? [this.layoutFields ? Doc.Layout(this.selectedDoc) : this.dataDoc] : SelectionManager.Views().map(dv => (this.layoutFields ? dv.layoutDoc : dv.dataDoc)); + const docs: Doc[] = SelectionManager.Views.length < 2 ? [this.layoutFields ? Doc.Layout(this.selectedDoc) : this.dataDoc] : SelectionManager.Views.map(dv => (this.layoutFields ? dv.layoutDoc : dv.dataDoc)); docs.forEach(doc => Object.keys(doc).forEach(key => doc[key] !== ComputedField.undefined && ids.add(key))); // prettier-ignore @@ -267,7 +273,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { @undoBatch setKeyValue = (value: string) => { - const docs = SelectionManager.Views().length < 2 && this.selectedDoc ? [this.layoutFields ? Doc.Layout(this.selectedDoc) : this.dataDoc!] : SelectionManager.Views().map(dv => (this.layoutFields ? dv.layoutDoc : dv.dataDoc)); + const docs = SelectionManager.Views.length < 2 && this.selectedDoc ? [this.layoutFields ? Doc.Layout(this.selectedDoc) : this.dataDoc!] : SelectionManager.Views.map(dv => (this.layoutFields ? dv.layoutDoc : dv.dataDoc)); docs.forEach(doc => { if (value.indexOf(':') !== -1) { const newVal = value[0].toUpperCase() + value.substring(1, value.length); @@ -303,12 +309,12 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { }; @computed get contexts() { - return !this.selectedDoc ? null : <PropertiesDocContextSelector DocView={this.selectedDocumentView} hideTitle={true} addDocTab={this.props.addDocTab} />; + return !this.selectedDoc ? null : <PropertiesDocContextSelector DocView={this.selectedDocumentView} hideTitle={true} addDocTab={this._props.addDocTab} />; } @computed get contextCount() { if (this.selectedDocumentView) { - const target = this.selectedDocumentView.props.Document; + const target = this.selectedDocumentView.Document; const embeddings = DocListCast(target.proto_embeddings); return embeddings.length - 1; } else { @@ -318,7 +324,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { @computed get links() { const selAnchor = this.selectedDocumentView?.anchorViewDoc ?? LinkManager.currentLinkAnchor ?? this.selectedDoc; - return !selAnchor ? null : <PropertiesDocBacklinksSelector Document={selAnchor} hideTitle={true} addDocTab={this.props.addDocTab} />; + return !selAnchor ? null : <PropertiesDocBacklinksSelector Document={selAnchor} hideTitle={true} addDocTab={this._props.addDocTab} />; } @computed get linkCount() { @@ -331,7 +337,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { } @computed get layoutPreview() { - if (SelectionManager.Views().length > 1) { + if (SelectionManager.Views.length > 1) { return '-- multiple selected --'; } if (this.selectedDoc) { @@ -341,13 +347,12 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { return ( <div ref={this.propertiesDocViewRef} style={{ pointerEvents: 'none', display: 'inline-block', height: panelHeight() }} key={this.selectedDoc[Id]}> <DocumentView - Document={layoutDoc} - DataDoc={this.dataDoc} + Document={this.selectedDoc} + TemplateDataDocument={Doc.AreProtosEqual(this.dataDoc, this.selectedDoc) ? undefined : this.dataDoc} renderDepth={1} fitContentsToBox={returnTrue} - rootSelected={returnFalse} styleProvider={DefaultStyleProvider} - docViewPath={returnEmptyDoclist} + containerViewPath={returnEmptyDoclist} dontCenter={'y'} isDocumentActive={returnFalse} isContentActive={emptyFunction} @@ -366,7 +371,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { whenChildContentsActiveChanged={emptyFunction} addDocTab={returnFalse} pinToPres={emptyFunction} - bringToFront={returnFalse} dontRegisterView={true} /> </div> @@ -381,7 +385,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { */ @undoBatch changePermissions = (e: any, user: string) => { - const docs = (SelectionManager.Views().length < 2 ? [this.selectedDoc] : SelectionManager.Views().map(dv => dv.props.Document)).filter(doc => doc).map(doc => (this.layoutDocAcls ? doc! : DocCast(doc)[DocData])); + const docs = SelectionManager.Views.length < 2 ? [this.selectedDoc] : SelectionManager.Views.map(dv => (this.layoutDocAcls ? dv.layoutDoc : dv.dataDoc)); SharingManager.Instance.shareFromPropertiesSidebar(user, e.currentTarget.value as SharingPermissions, docs, this.layoutDocAcls); }; @@ -427,7 +431,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { color={SettingsManager.userColor} onClick={action(() => { if (this.selectedDocumentView || this.selectedDoc) { - SharingManager.Instance.open(this.selectedDocumentView?.props.Document === this.selectedDoc ? this.selectedDocumentView : undefined, this.selectedDoc); + SharingManager.Instance.open(this.selectedDocumentView?.Document === this.selectedDoc ? this.selectedDocumentView : undefined, this.selectedDoc); } })} /> @@ -499,14 +503,14 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { */ @computed get sharingTable() { // all selected docs - const docs = SelectionManager.Views().length < 2 && this.selectedDoc ? [this.selectedDoc] : SelectionManager.Views().map(docView => docView.rootDoc); + const docs = SelectionManager.Views.length < 2 && this.selectedDoc ? [this.selectedDoc] : SelectionManager.Views.map(docView => docView.Document); const target = docs[0]; const showAdmin = GetEffectiveAcl(target) == AclAdmin; const individualTableEntries = []; const usersAdded: string[] = []; // all shared users being added - organized by denormalized email - const seldoc = this.layoutDocAcls || !this.selectedDoc ? this.selectedDoc : Doc.GetProto(this.selectedDoc); + const seldoc = this.layoutDocAcls ? this.selectedLayoutDoc : this.selectedDoc?.[DocData]; // adds each user to usersAdded SharingManager.Instance.users.forEach(eachUser => { var userOnDoc = true; @@ -615,7 +619,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { @computed get editableTitle() { const titles = new Set<string>(); - SelectionManager.Views().forEach(dv => titles.add(StrCast(dv.rootDoc.title))); + SelectionManager.Views.forEach(dv => titles.add(StrCast(dv.Document.title))); const title = Array.from(titles.keys()).length > 1 ? '--multiple selected--' : StrCast(this.selectedDoc?.title); return ( <div> @@ -669,10 +673,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { } @undoBatch - @action setTitle = (value: string | number) => { - if (SelectionManager.Views().length > 1) { - SelectionManager.Views().map(dv => Doc.SetInPlace(dv.rootDoc, 'title', value, true)); + if (SelectionManager.Views.length > 1) { + SelectionManager.Views.map(dv => Doc.SetInPlace(dv.Document, 'title', value, true)); } else if (this.dataDoc) { if (this.selectedDoc) Doc.SetInPlace(this.selectedDoc, 'title', value, true); else KeyValueBox.SetField(this.dataDoc, 'title', value as string, true); @@ -680,13 +683,13 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { }; @undoBatch - @action rotate = (angle: number) => { const _centerPoints: { X: number; Y: number }[] = []; - if (this.selectedDoc) { - const doc = this.selectedDoc; - if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) { - const ink = Cast(doc.data, InkField)?.inkData; + const doc = this.selectedDoc; + const layout = this.selectedLayoutDoc; + if (doc && layout) { + if (doc.type === DocumentType.INK && doc.x && doc.y && layout._width && layout._height && doc.data) { + const ink = Cast(doc.stroke, InkField)?.inkData; if (ink) { const xs = ink.map(p => p.X); const ys = ink.map(p => p.Y); @@ -699,9 +702,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { } var index = 0; - if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) { - doc.rotation = NumCast(doc.rotation) + angle; - const inks = Cast(doc.data, InkField)?.inkData; + if (doc.type === DocumentType.INK && doc.x && doc.y && layout._width && layout._height && doc.data) { + layout.rotation = NumCast(layout.rotation) + angle; + const inks = Cast(doc.stroke, InkField)?.inkData; if (inks) { const newPoints: { X: number; Y: number }[] = []; inks.forEach(ink => { @@ -709,7 +712,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { const newY = Math.sin(angle) * (ink.X - _centerPoints[index].X) + Math.cos(angle) * (ink.Y - _centerPoints[index].Y) + _centerPoints[index].Y; newPoints.push({ X: newX, Y: newY }); }); - doc.data = new InkField(newPoints); + doc.stroke = new InkField(newPoints); const xs = newPoints.map(p => p.X); const ys = newPoints.map(p => p.Y); const left = Math.min(...xs); @@ -717,8 +720,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { const right = Math.max(...xs); const bottom = Math.max(...ys); - doc._height = bottom - top; - doc._width = right - left; + layout._height = bottom - top; + layout._width = right - left; } index++; } @@ -924,7 +927,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { return ( <SketchPicker onChange={undoable( - action((color: ColorState) => setter(color.hex)), + action((color: ColorResult) => setter(color.hex)), 'set stroke color property' )} presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '#f1efeb', 'transparent']} @@ -1106,7 +1109,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { } @undoBatch - @action changeDash = () => { this.dashdStk = this.dashdStk === '2' ? '0' : '2'; }; @@ -1154,6 +1156,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { <div className="transform-editor"> {!this.isStack ? null : this.getNumber('Gap', ' px', 0, 200, NumCast(this.selectedDoc!.gridGap), (val: number) => !isNaN(val) && (this.selectedDoc!.gridGap = val))} {!this.isStack ? null : this.getNumber('xMargin', ' px', 0, 500, NumCast(this.selectedDoc!.xMargin), (val: number) => !isNaN(val) && (this.selectedDoc!.xMargin = val))} + {!this.isGroup ? null : this.getNumber('Padding', ' px', 0, 500, NumCast(this.selectedDoc!.xPadding), (val: number) => !isNaN(val) && (this.selectedDoc!.xPadding = this.selectedDoc!.yPadding = val))} {this.isInk ? this.controlPointsButton : null} {this.getNumber('Width', ' px', 0, Math.max(1000, this.shapeWid), this.shapeWid, (val: number) => !isNaN(val) && (this.shapeWid = val), 1000, 1)} {this.getNumber('Height', ' px', 0, Math.max(1000, this.shapeHgt), this.shapeHgt, (val: number) => !isNaN(val) && (this.shapeHgt = val), 1000, 1)} @@ -1274,7 +1277,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { return ( <PropertiesSection title="Filters" isOpen={this.openFilters} setIsOpen={bool => (this.openFilters = bool)} onDoubleClick={() => this.CloseAll()}> <div className="propertiesView-content filters" style={{ position: 'relative', height: 'auto' }}> - <FilterPanel rootDoc={this.selectedDoc ?? Doc.ActiveDashboard!} /> + <FilterPanel Document={this.selectedDoc ?? Doc.ActiveDashboard!} /> </div> </PropertiesSection> ); @@ -1284,7 +1287,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { return ( <> <PropertiesSection title="Appearance" isOpen={this.openAppearance} setIsOpen={bool => (this.openAppearance = bool)} onDoubleClick={() => this.CloseAll()}> - {this.selectedDoc?.layout_isSvg ? this.appearanceEditor : null} + {this.selectedLayoutDoc?.layout_isSvg ? this.appearanceEditor : null} </PropertiesSection> <PropertiesSection title="Transform" isOpen={this.openTransform} setIsOpen={bool => (this.openTransform = bool)} onDoubleClick={() => this.CloseAll()}> {this.transformEditor} @@ -1820,8 +1823,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { const hasSelectedAnchor = LinkManager.Links(this.sourceAnchor).includes(LinkManager.currentLink!); if (!this.selectedDoc && !this.isPres) { return ( - <div className="propertiesView" style={{ width: this.props.width }}> - <div className="propertiesView-title" style={{ width: this.props.width }}> + <div className="propertiesView" style={{ width: this._props.width }}> + <div className="propertiesView-title" style={{ width: this._props.width }}> No Document Selected </div> </div> @@ -1834,11 +1837,11 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { style={{ background: SettingsManager.userBackgroundColor, color: SettingsManager.userColor, - width: this.props.width, - minWidth: this.props.width, + width: this._props.width, + minWidth: this._props.width, }}> <div className="propertiesView-propAndInfoGrouping"> - <div className="propertiesView-title" style={{ width: this.props.width }}> + <div className="propertiesView-title" style={{ width: this._props.width }}> Properties <div className="propertiesView-info" onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/properties')}> <IconButton icon={<FontAwesomeIcon icon="info-circle" />} color={SettingsManager.userColor} /> @@ -1867,8 +1870,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { ? (DocCast(PresBox.Instance.activeItem?.annotationOn)?.type as any as DocumentType) : PresBox.targetRenderedDoc(PresBox.Instance.activeItem)?.type; return ( - <div className="propertiesView" style={{ width: this.props.width }}> - <div className="propertiesView-sectionTitle" style={{ width: this.props.width }}> + <div className="propertiesView" style={{ width: this._props.width }}> + <div className="propertiesView-sectionTitle" style={{ width: this._props.width }}> Presentation </div> <div className="propertiesView-name" style={{ borderBottom: 0 }}> diff --git a/src/client/views/ScriptBox.tsx b/src/client/views/ScriptBox.tsx index 416162aeb..623201ed1 100644 --- a/src/client/views/ScriptBox.tsx +++ b/src/client/views/ScriptBox.tsx @@ -1,4 +1,4 @@ -import { action, observable } from 'mobx'; +import { action, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, Opt } from '../../fields/Doc'; @@ -11,6 +11,7 @@ import { EditableView } from './EditableView'; import { DocumentIconContainer } from './nodes/DocumentIcon'; import { OverlayView } from './OverlayView'; import './ScriptBox.scss'; +import { DocData } from '../../fields/DocSymbols'; export interface ScriptBoxProps { onSave: (text: string, onError: (error: string) => void) => void; @@ -27,6 +28,7 @@ export class ScriptBox extends React.Component<ScriptBoxProps> { constructor(props: ScriptBoxProps) { super(props); + makeObservable(this); this._scriptText = props.initialText || ''; } @@ -101,7 +103,7 @@ export class ScriptBox extends React.Component<ScriptBoxProps> { onCancel={overlayDisposer} onSave={(text, onError) => { if (!text) { - Doc.GetProto(doc)[fieldKey] = undefined; + doc[DocData][fieldKey] = undefined; } else { const script = CompileScript(text, { params: { this: Doc.name, ...contextParams }, @@ -124,7 +126,7 @@ export class ScriptBox extends React.Component<ScriptBoxProps> { div.innerHTML = 'button'; params.length && DragManager.StartButtonDrag([div], text, doc.title + '-instance', {}, params, (button: Doc) => {}, clientX, clientY); - Doc.GetProto(doc)[fieldKey] = new ScriptField(script); + doc[DocData][fieldKey] = new ScriptField(script); overlayDisposer(); } }} diff --git a/src/client/views/ScriptingRepl.tsx b/src/client/views/ScriptingRepl.tsx index 9966dbced..acf0ecff4 100644 --- a/src/client/views/ScriptingRepl.tsx +++ b/src/client/views/ScriptingRepl.tsx @@ -1,5 +1,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, observable } from 'mobx'; +import { action, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { DocumentManager } from '../util/DocumentManager'; @@ -7,31 +7,39 @@ import { CompileScript, Transformer, ts } from '../util/Scripting'; import { ScriptingGlobals } from '../util/ScriptingGlobals'; import { SettingsManager } from '../util/SettingsManager'; import { undoable } from '../util/UndoManager'; -import { DocumentIconContainer } from './nodes/DocumentIcon'; +import { ObservableReactComponent } from './ObservableReactComponent'; import { OverlayView } from './OverlayView'; import './ScriptingRepl.scss'; +import { DocumentIconContainer } from './nodes/DocumentIcon'; -@observer -export class ScriptingObjectDisplay extends React.Component<{ scrollToBottom: () => void; value: { [key: string]: any }; name?: string }> { +interface ReplProps { + scrollToBottom: () => void; + value: { [key: string]: any }; + name?: string; +} +export class ScriptingObjectDisplay extends ObservableReactComponent<ReplProps> { @observable collapsed = true; + constructor(props: any) { + super(props); + makeObservable(this); + } + @action toggle = () => { this.collapsed = !this.collapsed; - this.props.scrollToBottom(); + this._props.scrollToBottom(); }; render() { - const val = this.props.value; + const val = this._props.value; const proto = Object.getPrototypeOf(val); const name = (proto && proto.constructor && proto.constructor.name) || String(val); - const title = this.props.name ? ( + const title = ( <> - <b>{this.props.name} : </b> + {this.props.name ? <b>{this._props.name} : </b> : <></>} {name} </> - ) : ( - name ); if (this.collapsed) { return ( @@ -53,7 +61,7 @@ export class ScriptingObjectDisplay extends React.Component<{ scrollToBottom: () </div> <div className="scriptingObject-fields"> {Object.keys(val).map(key => ( - <ScriptingValueDisplay {...this.props} name={key} /> + <ScriptingValueDisplay {...this._props} name={key} /> ))} </div> </div> @@ -62,40 +70,43 @@ export class ScriptingObjectDisplay extends React.Component<{ scrollToBottom: () } } +interface replValueProps { + scrollToBottom: () => void; + value: any; + name?: string; +} @observer -export class ScriptingValueDisplay extends React.Component<{ scrollToBottom: () => void; value: any; name?: string }> { +export class ScriptingValueDisplay extends ObservableReactComponent<replValueProps> { + constructor(props: any) { + super(props); + makeObservable(this); + } + render() { - const val = this.props.name ? this.props.value[this.props.name] : this.props.value; + const val = this._props.name ? this._props.value[this._props.name] : this._props.value; + const title = (name: string) => ( + <> + {this._props.name ? <b>{this._props.name} : </b> : <> </>} + {name} + </> + ); if (typeof val === 'object') { - return <ScriptingObjectDisplay scrollToBottom={this.props.scrollToBottom} value={val} name={this.props.name} />; + return <ScriptingObjectDisplay scrollToBottom={this._props.scrollToBottom} value={val} name={this._props.name} />; } else if (typeof val === 'function') { const name = '[Function]'; - const title = this.props.name ? ( - <> - <b>{this.props.name} : </b> - {name} - </> - ) : ( - name - ); - return <div className="scriptingObject-leaf">{title}</div>; - } else { - const name = String(val); - const title = this.props.name ? ( - <> - <b>{this.props.name} : </b> - {name} - </> - ) : ( - name - ); - return <div className="scriptingObject-leaf">{title}</div>; + return <div className="scriptingObject-leaf">{title('[Function]')}</div>; } + return <div className="scriptingObject-leaf">{title(String(val))}</div>; } } @observer -export class ScriptingRepl extends React.Component { +export class ScriptingRepl extends ObservableReactComponent<{}> { + constructor(props: any) { + super(props); + makeObservable(this); + } + @observable private commands: { command: string; result: any }[] = []; private commandsHistory: string[] = []; @@ -136,7 +147,8 @@ export class ScriptingRepl extends React.Component { const m = parseInt(match[1]); usedDocuments.push(m); } else { - return ts.createPropertyAccess(ts.createIdentifier('args'), node); + return ts.factory.createPropertyAccessExpression(ts.factory.createIdentifier('args'), node); + // ts.createPropertyAccess(ts.createIdentifier('args'), node); } } } @@ -156,7 +168,7 @@ export class ScriptingRepl extends React.Component { case 'Enter': { e.stopPropagation(); const docGlobals: { [name: string]: any } = {}; - DocumentManager.Instance.DocumentViews.forEach((dv, i) => (docGlobals[`d${i}`] = dv.props.Document)); + DocumentManager.Instance.DocumentViews.forEach((dv, i) => (docGlobals[`d${i}`] = dv.Document)); const globals = ScriptingGlobals.makeMutableGlobalsCopy(docGlobals); const script = CompileScript(this.commandString, { typecheck: false, addReturn: true, editable: true, params: { args: 'any' }, transformer: this.getTransformer(), globals }); if (!script.compiled) { @@ -228,7 +240,8 @@ export class ScriptingRepl extends React.Component { ele && ele.scroll({ behavior: 'auto', top: ele.scrollHeight }); } - componentDidUpdate() { + componentDidUpdate(prevProps: Readonly<{}>) { + super.componentDidUpdate(prevProps); if (this.shouldScroll) { this.shouldScroll = false; this.scrollToBottom(); diff --git a/src/client/views/SidebarAnnos.tsx b/src/client/views/SidebarAnnos.tsx index 1e1b8e0e6..1e9272e93 100644 --- a/src/client/views/SidebarAnnos.tsx +++ b/src/client/views/SidebarAnnos.tsx @@ -1,27 +1,29 @@ -import { computed } from 'mobx'; +import { computed, makeObservable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; +import { emptyFunction, returnAll, returnFalse, returnOne, returnZero } from '../../Utils'; import { Doc, DocListCast, Field, FieldResult, StrListCast } from '../../fields/Doc'; import { Id } from '../../fields/FieldSymbols'; import { List } from '../../fields/List'; import { RichTextField } from '../../fields/RichTextField'; import { DocCast, NumCast, StrCast } from '../../fields/Types'; -import { emptyFunction, returnAll, returnFalse, returnOne, returnTrue, returnZero } from '../../Utils'; -import { Docs, DocUtils } from '../documents/Documents'; import { CollectionViewType, DocumentType } from '../documents/DocumentTypes'; +import { DocUtils, Docs } from '../documents/Documents'; import { LinkManager } from '../util/LinkManager'; import { SearchUtil } from '../util/SearchUtil'; import { Transform } from '../util/Transform'; +import { ObservableReactComponent } from './ObservableReactComponent'; +import './SidebarAnnos.scss'; +import { StyleProp } from './StyleProvider'; import { CollectionStackingView } from './collections/CollectionStackingView'; import { FieldViewProps } from './nodes/FieldView'; import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox'; -import './SidebarAnnos.scss'; -import { StyleProp } from './StyleProvider'; -import React = require('react'); +import { DocData } from '../../fields/DocSymbols'; interface ExtraProps { fieldKey: string; + Document: Doc; layoutDoc: Doc; - rootDoc: Doc; dataDoc: Doc; // usePanelWidth: boolean; showSidebar: boolean; @@ -34,15 +36,16 @@ interface ExtraProps { moveDocument: (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean, annotationKey?: string) => boolean; } @observer -export class SidebarAnnos extends React.Component<FieldViewProps & ExtraProps> { - constructor(props: Readonly<FieldViewProps & ExtraProps>) { +export class SidebarAnnos extends ObservableReactComponent<FieldViewProps & ExtraProps> { + constructor(props: any) { super(props); - // this.props.dataDoc[this.sidebarKey] = new List<Doc>(); // bcz: can't do this here. it blows away existing things and isn't a robust solution for making sure the field exists -- instead this should happen when the document is created and/or shared + makeObservable(this); } + _stackRef = React.createRef<CollectionStackingView>(); @computed get allMetadata() { const keys = new Map<string, FieldResult<Field>>(); - DocListCast(this.props.rootDoc[this.sidebarKey]).forEach(doc => + DocListCast(this._props.Document[this.sidebarKey]).forEach(doc => SearchUtil.documentKeys(doc) .filter(key => key[0] && key[0] !== '_' && key[0] === key[0].toUpperCase()) .map(key => keys.set(key, doc[key])) @@ -51,7 +54,7 @@ export class SidebarAnnos extends React.Component<FieldViewProps & ExtraProps> { } @computed get allHashtags() { const keys = new Set<string>(); - DocListCast(this.props.rootDoc[this.sidebarKey]).forEach(doc => StrListCast(doc.tags).forEach(tag => keys.add(tag))); + DocListCast(this._props.Document[this.sidebarKey]).forEach(doc => StrListCast(doc.tags).forEach(tag => keys.add(tag))); return Array.from(keys.keys()) .filter(key => key[0]) .filter(key => !key.startsWith('_') && (key[0] === '#' || key[0] === key[0].toUpperCase())) @@ -59,7 +62,7 @@ export class SidebarAnnos extends React.Component<FieldViewProps & ExtraProps> { } @computed get allUsers() { const keys = new Set<string>(); - DocListCast(this.props.rootDoc[this.sidebarKey]).forEach(doc => keys.add(StrCast(doc.author))); + DocListCast(this._props.Document[this.sidebarKey]).forEach(doc => keys.add(StrCast(doc.author))); return Array.from(keys.keys()).sort(); } @@ -69,7 +72,7 @@ export class SidebarAnnos extends React.Component<FieldViewProps & ExtraProps> { .join(' '); const target = Docs.Create.TextDocument(startup, { title: '-note-', - annotationOn: this.props.rootDoc, + annotationOn: this._props.Document, _width: 200, _height: 50, _layout_fitWidth: true, @@ -77,7 +80,7 @@ export class SidebarAnnos extends React.Component<FieldViewProps & ExtraProps> { _text_fontSize: StrCast(Doc.UserDoc().fontSize), _text_fontFamily: StrCast(Doc.UserDoc().fontFamily), }); - FormattedTextBox.SelectOnLoad = target[Id]; + FormattedTextBox.SetSelectOnLoad(target); FormattedTextBox.DontSelectInitialText = true; const link = DocUtils.MakeLink(anchor, target, { link_relationship: 'inline comment:comment on' }); link && (link.link_displayLine = false); @@ -88,7 +91,7 @@ export class SidebarAnnos extends React.Component<FieldViewProps & ExtraProps> { .map(data => { const key = data.split(':')[0]; const val = Field.Copy(this.allMetadata.get(key)); - Doc.GetProto(target)[key] = val; + target[DocData][key] = val; return { type: 'dashField', attrs: { fieldKey: key, docId: '', hideKey: false, editable: true }, @@ -96,7 +99,7 @@ export class SidebarAnnos extends React.Component<FieldViewProps & ExtraProps> { }; }); - if (!anchor.text) Doc.GetProto(anchor).text = '-selection-'; + if (!anchor.text) anchor[DocData].text = '-selection-'; const textLines: any = [ { type: 'paragraph', @@ -131,7 +134,7 @@ export class SidebarAnnos extends React.Component<FieldViewProps & ExtraProps> { }; if (taggedContent.length) textLines.push(metadatatext); if (textLines.length) { - Doc.GetProto(target).text = new RichTextField( + target[DocData].text = new RichTextField( JSON.stringify({ doc: { type: 'doc', @@ -147,10 +150,10 @@ export class SidebarAnnos extends React.Component<FieldViewProps & ExtraProps> { return target; }; makeDocUnfiltered = (doc: Doc) => { - if (DocListCast(this.props.rootDoc[this.sidebarKey]).find(anno => Doc.AreProtosEqual(doc.layout_unrendered ? DocCast(doc.annotationOn) : doc, anno))) { + if (DocListCast(this._props.Document[this.sidebarKey]).find(anno => Doc.AreProtosEqual(doc.layout_unrendered ? DocCast(doc.annotationOn) : doc, anno))) { if (this.childFilters()) { // if any child filters exist, get rid of them - this.props.layoutDoc._childFilters = new List<string>(); + this._props.layoutDoc._childFilters = new List<string>(); } return true; } @@ -158,27 +161,27 @@ export class SidebarAnnos extends React.Component<FieldViewProps & ExtraProps> { }; get sidebarKey() { - return this.props.fieldKey + '_sidebar'; + return this._props.fieldKey + '_sidebar'; } filtersHeight = () => 38; screenToLocalTransform = () => - this.props + this._props .ScreenToLocalTransform() - .translate(Doc.NativeWidth(this.props.dataDoc), 0) - .scale(this.props.NativeDimScaling?.() || 1); + .translate(Doc.NativeWidth(this._props.dataDoc), 0) + .scale(this._props.NativeDimScaling?.() || 1); panelWidth = () => - !this.props.showSidebar + !this._props.showSidebar ? 0 - : this.props.usePanelWidth // [DocumentType.RTF, DocumentType.MAP].includes(this.props.layoutDoc.type as any) - ? this.props.PanelWidth() / (this.props.NativeDimScaling?.() || 1) - : ((NumCast(this.props.nativeWidth) - Doc.NativeWidth(this.props.dataDoc)) * this.props.PanelWidth()) / NumCast(this.props.nativeWidth); - panelHeight = () => this.props.PanelHeight() - this.filtersHeight(); - addDocument = (doc: Doc | Doc[]) => this.props.sidebarAddDocument(doc, this.sidebarKey); - moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean) => this.props.moveDocument(doc, targetCollection, addDocument, this.sidebarKey); - removeDocument = (doc: Doc | Doc[]) => this.props.removeDocument(doc, this.sidebarKey); - childFilters = () => StrListCast(this.props.layoutDoc._childFilters); + : this._props.usePanelWidth // [DocumentType.RTF, DocumentType.MAP].includes(this._props.layoutDoc.type as any) + ? this._props.PanelWidth() / (this._props.NativeDimScaling?.() || 1) + : ((NumCast(this._props.nativeWidth) - Doc.NativeWidth(this._props.dataDoc)) * this._props.PanelWidth()) / NumCast(this._props.nativeWidth); + panelHeight = () => this._props.PanelHeight() - this.filtersHeight(); + addDocument = (doc: Doc | Doc[]) => this._props.sidebarAddDocument(doc, this.sidebarKey); + moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean) => this._props.moveDocument(doc, targetCollection, addDocument, this.sidebarKey); + removeDocument = (doc: Doc | Doc[]) => this._props.removeDocument(doc, this.sidebarKey); + childFilters = () => StrListCast(this._props.layoutDoc._childFilters); layout_showTitle = () => 'title'; - setHeightCallback = (height: number) => this.props.setHeight?.(height + this.filtersHeight()); + setHeightCallback = (height: number) => this._props.setHeight?.(height + this.filtersHeight()); sortByLinkAnchorY = (a: Doc, b: Doc) => { const ay = LinkManager.Links(a).length && DocCast(LinkManager.Links(a)[0].link_anchor_1).y; const by = LinkManager.Links(b).length && DocCast(LinkManager.Links(b)[0].link_anchor_1).y; @@ -188,7 +191,7 @@ export class SidebarAnnos extends React.Component<FieldViewProps & ExtraProps> { const renderTag = (tag: string) => { const active = this.childFilters().includes(`tags${Doc.FilterSep}${tag}${Doc.FilterSep}check`); return ( - <div key={tag} className={`sidebarAnnos-filterTag${active ? '-active' : ''}`} onClick={e => Doc.setDocFilter(this.props.rootDoc, 'tags', tag, 'check', true, undefined, e.shiftKey)}> + <div key={tag} className={`sidebarAnnos-filterTag${active ? '-active' : ''}`} onClick={e => Doc.setDocFilter(this._props.Document, 'tags', tag, 'check', true, undefined, e.shiftKey)}> {tag} </div> ); @@ -196,7 +199,7 @@ export class SidebarAnnos extends React.Component<FieldViewProps & ExtraProps> { const renderMeta = (tag: string, dflt: FieldResult<Field>) => { const active = this.childFilters().includes(`${tag}${Doc.FilterSep}${Doc.FilterAny}${Doc.FilterSep}exists`); return ( - <div key={tag} className={`sidebarAnnos-filterTag${active ? '-active' : ''}`} onClick={e => Doc.setDocFilter(this.props.rootDoc, tag, Doc.FilterAny, 'exists', true, undefined, e.shiftKey)}> + <div key={tag} className={`sidebarAnnos-filterTag${active ? '-active' : ''}`} onClick={e => Doc.setDocFilter(this._props.Document, tag, Doc.FilterAny, 'exists', true, undefined, e.shiftKey)}> {tag} </div> ); @@ -204,20 +207,20 @@ export class SidebarAnnos extends React.Component<FieldViewProps & ExtraProps> { const renderUsers = (user: string) => { const active = this.childFilters().includes(`author:${user}:check`); return ( - <div key={user} className={`sidebarAnnos-filterUser${active ? '-active' : ''}`} onClick={e => Doc.setDocFilter(this.props.rootDoc, 'author', user, 'check', true, undefined, e.shiftKey)}> + <div key={user} className={`sidebarAnnos-filterUser${active ? '-active' : ''}`} onClick={e => Doc.setDocFilter(this._props.Document, 'author', user, 'check', true, undefined, e.shiftKey)}> {user} </div> ); }; // TODO: Calculation of the topbar is hardcoded and different for text nodes - it should all be the same and all be part of SidebarAnnos - return !this.props.showSidebar ? null : ( + return !this._props.showSidebar ? null : ( <div style={{ position: 'absolute', - pointerEvents: this.props.isContentActive() ? 'all' : undefined, - top: this.props.rootDoc.type !== DocumentType.RTF && StrCast(this.props.rootDoc._layout_showTitle) === 'title' ? 15 : 0, + pointerEvents: this._props.isContentActive() ? 'all' : undefined, + top: this._props.Document.type !== DocumentType.RTF && StrCast(this._props.Document._layout_showTitle) === 'title' ? 15 : 0, right: 0, - background: this.props.styleProvider?.(this.props.rootDoc, this.props, StyleProp.WidgetColor), + background: this._props.styleProvider?.(this._props.Document, this._props, StyleProp.WidgetColor), width: `100%`, height: '100%', }}> @@ -231,8 +234,8 @@ export class SidebarAnnos extends React.Component<FieldViewProps & ExtraProps> { <div style={{ width: '100%', height: `calc(100% - 38px)`, position: 'relative' }}> <CollectionStackingView - {...this.props} - setContentView={emptyFunction} + {...this._props} + setContentViewBox={emptyFunction} NativeWidth={returnZero} NativeHeight={returnZero} ref={this._stackRef} @@ -246,14 +249,14 @@ export class SidebarAnnos extends React.Component<FieldViewProps & ExtraProps> { NativeDimScaling={returnOne} //childlayout_showTitle={this.layout_showTitle} isAnyChildContentActive={returnFalse} - childDocumentsActive={this.props.isContentActive} - whenChildContentsActiveChanged={this.props.whenChildContentsActiveChanged} - childHideDecorationTitle={returnTrue} + childDocumentsActive={this._props.isContentActive} + whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged} + childHideDecorationTitle={true} removeDocument={this.removeDocument} moveDocument={this.moveDocument} addDocument={this.addDocument} ScreenToLocalTransform={this.screenToLocalTransform} - renderDepth={this.props.renderDepth + 1} + renderDepth={this._props.renderDepth + 1} type_collection={CollectionViewType.Stacking} fieldKey={this.sidebarKey} pointerEvents={returnAll} diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index c6d3efd0c..5a0167338 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -1,29 +1,30 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Tooltip } from '@material-ui/core'; +import { Tooltip } from '@mui/material'; import { Dropdown, DropdownType, IconButton, IListItemProps, Shadows, Size, Type } from 'browndash-components'; -import { action, runInAction, untracked } from 'mobx'; +import { action, untracked } from 'mobx'; import { extname } from 'path'; +import * as React from 'react'; import { BsArrowDown, BsArrowDownUp, BsArrowUp } from 'react-icons/bs'; import { FaFilter } from 'react-icons/fa'; import { Doc, Opt, StrListCast } from '../../fields/Doc'; +import { DocViews } from '../../fields/DocSymbols'; import { BoolCast, Cast, DocCast, ImageCast, NumCast, StrCast } from '../../fields/Types'; import { DashColor, lightOrDark, Utils } from '../../Utils'; import { CollectionViewType, DocumentType } from '../documents/DocumentTypes'; import { DocFocusOrOpen, DocumentManager } from '../util/DocumentManager'; import { IsFollowLinkScript } from '../util/LinkFollower'; import { LinkManager } from '../util/LinkManager'; -import { SelectionManager } from '../util/SelectionManager'; import { SettingsManager } from '../util/SettingsManager'; +import { SnappingManager } from '../util/SnappingManager'; import { undoBatch, UndoManager } from '../util/UndoManager'; import { TreeSort } from './collections/TreeSort'; import { Colors } from './global/globalEnums'; -import { DocumentView, DocumentViewProps } from './nodes/DocumentView'; +import { DocumentViewProps } from './nodes/DocumentView'; import { FieldViewProps } from './nodes/FieldView'; import { KeyValueBox } from './nodes/KeyValueBox'; import { PropertiesView } from './PropertiesView'; import './StyleProvider.scss'; -import React = require('react'); export enum StyleProp { TreeViewIcon = 'treeView_Icon', @@ -36,7 +37,6 @@ export enum StyleProp { BackgroundColor = 'backgroundColor', // background color of a document view FillColor = 'fillColor', // fill color of an ink stroke or shape WidgetColor = 'widgetColor', // color to display UI widgets on a document view -- used for the sidebar divider dragger on a text note - HideLinkBtn = 'hideLinkButton', // hides the blue-dot link button. used when a document acts like a button PointerEvents = 'pointerEvents', // pointer events for DocumentView -- inherits pointer events if not specified Decorations = 'decorations', // additional decoration to display above a DocumentView -- currently only used to display a Lock for making things background HeaderMargin = 'headerMargin', // margin at top of documentview, typically for displaying a title -- doc contents will start below that @@ -51,18 +51,7 @@ export enum StyleProp { } function toggleLockedPosition(doc: Doc) { - UndoManager.RunInBatch( - () => - runInAction(() => { - doc._lockedPosition = !doc._lockedPosition; - doc._pointerEvents = doc._lockedPosition ? 'none' : undefined; - }), - 'toggleBackground' - ); -} - -export function testDocProps(toBeDetermined: any): toBeDetermined is DocumentViewProps { - return toBeDetermined?.isContentActive ? toBeDetermined : undefined; + UndoManager.RunInBatch(() => Doc.toggleLockedPosition(doc), 'toggleBackground'); } export function wavyBorderPath(pw: number, ph: number, inset: number = 0.05) { @@ -77,13 +66,12 @@ export function wavyBorderPath(pw: number, ph: number, inset: number = 0.05) { // a preliminary implementation of a dash style sheet for setting rendering properties of documents nested within a Tab // -export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string): any { +export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & DocumentViewProps>, property: string): any { const remoteDocHeader = 'author;author_date;noMargin'; - const docProps = testDocProps(props) ? props : undefined; - const selected = property.includes(':selected'); const isCaption = property.includes(':caption'); const isAnchor = property.includes(':anchor'); - const isContent = property.includes(':content'); + const isNonTransparent = property.includes(':nonTransparent'); + const isNonTransparentLevel = isNonTransparent ? Number(property.replace(/.*:nonTransparent([0-9]+).*/, '$1')) : 0; // property.includes(':nonTransparent'); const isAnnotated = property.includes(':annotated'); const isInk = () => doc?._layout_isSvg && !props?.LayoutTemplateString; const isOpen = property.includes(':open'); @@ -92,7 +80,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps const fieldKey = props?.fieldKey ? props.fieldKey + '_' : isCaption ? 'caption_' : ''; const lockedPosition = () => doc && BoolCast(doc._lockedPosition); const titleHeight = () => props?.styleProvider?.(doc, props, StyleProp.TitleHeight); - const backgroundCol = () => props?.styleProvider?.(doc, props, StyleProp.BackgroundColor); + const backgroundCol = () => props?.styleProvider?.(doc, props, StyleProp.BackgroundColor + ':nonTransparent' + (isNonTransparentLevel + 1)); const color = () => props?.styleProvider?.(doc, props, StyleProp.Color); const opacity = () => props?.styleProvider?.(doc, props, StyleProp.Opacity); const layout_showTitle = () => props?.styleProvider?.(doc, props, StyleProp.ShowTitle); @@ -105,7 +93,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps const url = doc?.icon ? img.url.href : img.url.href.replace(ext, '_s' + ext); return <img src={url} width={20} height={15} style={{ margin: 'auto', display: 'block', objectFit: 'contain' }} />; } - return Doc.toIcon(doc, isEmpty ? undefined : isOpen); + return Doc.toIcon(doc, isOpen); case StyleProp.TreeViewSortings: const allSorts: { [key: string]: { color: string; icon: JSX.Element | string } | undefined } = {}; allSorts[TreeSort.AlphaDown] = { color: Colors.MEDIUM_BLUE, icon: <BsArrowDown/> }; @@ -116,13 +104,13 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps case StyleProp.Highlighting: if (doc && (Doc.IsSystem(doc) || doc.type === DocumentType.FONTICON)) return undefined; if (doc && !doc.layout_disableBrushing && !props?.disableBrushing) { - const selected = SelectionManager.Views().some(dv => dv.rootDoc === doc); - const highlightIndex = Doc.isBrushedHighlightedDegree(doc) || (selected ? Doc.DocBrushStatus.selfBrushed : 0); + const selected = Array.from(doc?.[DocViews]??[]).filter(dv => dv.IsSelected).length; + const highlightIndex = Doc.GetBrushHighlightStatus(doc) || (selected ? Doc.DocBrushStatus.selfBrushed : 0); const highlightColor = ['transparent', 'rgb(68, 118, 247)', selected ? "black" : 'rgb(68, 118, 247)', 'orange', 'lightBlue'][highlightIndex]; const highlightStyle = ['solid', 'dashed', 'solid', 'solid', 'solid'][highlightIndex]; if (highlightIndex) { return { - highlightStyle: doc._isGroup ? "dotted": highlightStyle, + highlightStyle: doc.isGroup ? "dotted": highlightStyle, highlightColor, highlightIndex, highlightStroke: doc.layout_isSvg, @@ -133,13 +121,12 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps case StyleProp.DocContents:return undefined; case StyleProp.WidgetColor:return isAnnotated ? Colors.LIGHT_BLUE : 'dimgrey'; case StyleProp.Opacity: return props?.LayoutTemplateString?.includes(KeyValueBox.name) ? 1 : doc?.text_inlineAnnotations ? 0 : Cast(doc?._opacity, "number", Cast(doc?.opacity, 'number', null)); - case StyleProp.HideLinkBtn:return props?.hideLinkButton || (!selected && doc?.layout_hideLinkButton); case StyleProp.FontSize: return StrCast(doc?.[fieldKey + 'fontSize'], StrCast(doc?._text_fontSize, StrCast(Doc.UserDoc().fontSize))); case StyleProp.FontFamily: return StrCast(doc?.[fieldKey + 'fontFamily'], StrCast(doc?._text_fontFamily, StrCast(Doc.UserDoc().fontFamily))); case StyleProp.FontWeight: return StrCast(doc?.[fieldKey + 'fontWeight'], StrCast(doc?._text_fontWeight, StrCast(Doc.UserDoc().fontWeight))); case StyleProp.FillColor: return StrCast(doc?._fillColor, StrCast(doc?.fillColor, 'transparent')); - case StyleProp.ShowCaption:return doc?._type_collection === CollectionViewType.Carousel || props?.hideCaptions ? undefined : StrCast(doc?._layout_showCaption); - case StyleProp.TitleHeight:return (props?.ScreenToLocalTransform().Scale ?? 1)*(props?.NativeDimScaling?.()??1) * NumCast(Doc.UserDoc().headerHeight,30) + case StyleProp.ShowCaption:return props?.hideCaptions || doc?._type_collection === CollectionViewType.Carousel ? undefined: StrCast(doc?._layout_showCaption); + case StyleProp.TitleHeight:return (props?.ScreenToLocalTransform().Scale ?? 1) * NumCast(Doc.UserDoc().headerHeight,30); case StyleProp.ShowTitle: return ( (doc && @@ -159,13 +146,12 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps '' ); case StyleProp.Color: - if (DocumentView.LastPressedSidebarBtn === doc) return SettingsManager.userBackgroundColor; + if (SettingsManager.Instance.LastPressedBtn === doc) return SettingsManager.userBackgroundColor; if (Doc.IsSystem(doc!)) return SettingsManager.userColor; if (doc?.type === DocumentType.FONTICON) return SettingsManager.userColor; const docColor: Opt<string> = StrCast(doc?.[fieldKey + 'color'], StrCast(doc?._color)); if (docColor) return docColor; - const docView = props?.DocumentView?.(); - const backColor = backgroundCol() || docView?.props.styleProvider?.(docView.props.treeViewDoc, docView.props, StyleProp.BackgroundColor); + const backColor = backgroundCol(); return backColor ? lightOrDark(backColor) : undefined; case StyleProp.BorderRounding: return StrCast(doc?.[fieldKey + 'borderRounding'], StrCast(doc?.layout_borderRounding, doc?._type_collection === CollectionViewType.Pile ? '50%' : '')); @@ -194,19 +180,19 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps ? titleHeight() : 0; case StyleProp.BackgroundColor: { - if (DocumentView.LastPressedSidebarBtn === doc) return SettingsManager.userColor; // hack to indicate active menu panel item - let docColor: Opt<string> = StrCast(doc?.[fieldKey + '_backgroundColor'], StrCast(doc?._backgroundColor, isCaption ? 'rgba(0,0,0,0.4)' : '')); + if (SettingsManager.Instance.LastPressedBtn === doc) return SettingsManager.userColor; // hack to indicate active menu panel item + let docColor: Opt<string> = StrCast(doc?.[fieldKey + 'backgroundColor'], StrCast(doc?._backgroundColor, isCaption ? 'rgba(0,0,0,0.4)' : '')); // prettier-ignore switch (doc?.type) { case DocumentType.PRESELEMENT: docColor = docColor || ""; break; case DocumentType.PRES: docColor = docColor || 'transparent'; break; case DocumentType.FONTICON: docColor = boxBackground ? undefined : docColor || Colors.DARK_GRAY; break; - case DocumentType.RTF: docColor = docColor || Colors.LIGHT_GRAY; break; + case DocumentType.RTF: docColor = docColor || Colors.LIGHT_GRAY; break; case DocumentType.LINK: docColor = (isAnchor ? docColor : undefined); break; case DocumentType.INK: docColor = doc?.stroke_isInkMask ? 'rgba(0,0,0,0.7)' : undefined; break; case DocumentType.EQUATION: docColor = docColor || 'transparent'; break; case DocumentType.LABEL: docColor = docColor || Colors.LIGHT_GRAY; break; - case DocumentType.BUTTON: docColor = docColor || Colors.LIGHT_GRAY; break; + case DocumentType.BUTTON: docColor = docColor || Colors.LIGHT_GRAY; break; case DocumentType.IMG: case DocumentType.WEB: case DocumentType.PDF: @@ -218,7 +204,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps ? SettingsManager.userBackgroundColor : doc.annotationOn ? '#00000010' // faint interior for collections on PDFs, images, etc - : doc?._isGroup + : doc?.isGroup ? undefined : doc._type_collection === CollectionViewType.Stacking ? (Colors.DARK_GRAY) @@ -227,6 +213,9 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps //if (doc._type_collection !== CollectionViewType.Freeform && doc._type_collection !== CollectionViewType.Time) return "rgb(62,62,62)"; default: docColor = docColor || (Colors.WHITE); } + if (isNonTransparent && isNonTransparentLevel < 9 && (!docColor || docColor === 'transparent') && doc?.embedContainer && props?.styleProvider) { + return props.styleProvider(DocCast(doc.embedContainer), props, StyleProp.BackgroundColor+":nonTransparent"+(isNonTransparentLevel+1)); + } return (docColor && !doc) ? DashColor(docColor).fade(0.5).toString() : docColor; } case StyleProp.BoxShadow: { @@ -239,7 +228,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps doc?.layout_boxShadow, doc?._type_collection === CollectionViewType.Pile ? '4px 4px 10px 2px' - : lockedPosition() || doc?._isGroup || docProps?.LayoutTemplateString + : lockedPosition() || doc?.isGroup || props?.LayoutTemplateString ? undefined // groups have no drop shadow -- they're supposed to be "invisible". LayoutString's imply collection is being rendered as something else (e.g., title of a Slide) : `${Colors.DARK_GRAY} ${StrCast(doc.layout_boxShadow, '0.2vw 0.2vw 0.8vw')}` ); @@ -249,40 +238,41 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps default: return doc.z ? `#9c9396 ${StrCast(doc?.layout_boxShadow, '10px 10px 0.9vw')}` // if it's a floating doc, give it a big shadow - : props?.docViewPath().lastElement()?.rootDoc._freeform_useClusters - ? `${backgroundCol()} ${StrCast(doc.layout_boxShadow, `0vw 0vw ${(lockedPosition() ? 100 : 50) / (docProps?.NativeDimScaling?.() || 1)}px`)}` // if it's just in a cluster, make the shadown roughly match the cluster border extent + : props?.containerViewPath?.().lastElement()?.Document._freeform_useClusters + ? `${backgroundCol()} ${StrCast(doc.layout_boxShadow, `0vw 0vw ${(lockedPosition() ? 100 : 50) / (props?.NativeDimScaling?.() || 1)}px`)}` // if it's just in a cluster, make the shadown roughly match the cluster border extent : NumCast(doc.group, -1) !== -1 - ? `gray ${StrCast(doc.layout_boxShadow, `0vw 0vw ${(lockedPosition() ? 100 : 50) / (docProps?.NativeDimScaling?.() || 1)}px`)}` // if it's just in a cluster, make the shadown roughly match the cluster border extent + ? `gray ${StrCast(doc.layout_boxShadow, `0vw 0vw ${(lockedPosition() ? 100 : 50) / (props?.NativeDimScaling?.() || 1)}px`)}` // if it's just in a cluster, make the shadown roughly match the cluster border extent : lockedPosition() ? undefined // if it's a background & has a cluster color, make the shadow spread really big + : fieldKey.includes('_inline') // if doc is an inline document in a text box + ? `${Colors.DARK_GRAY} ${StrCast(doc.layout_boxShadow, '0vw 0vw 0.1vw')}` + : DocCast(doc.embedContainer)?.type=== DocumentType.RTF // if doc is embedded in a text document (but not an inline) + ? `${Colors.DARK_GRAY} ${StrCast(doc.layout_boxShadow, '0.2vw 0.2vw 0.8vw')}` : StrCast(doc.layout_boxShadow, ''); } } case StyleProp.PointerEvents: if (StrCast(doc?.pointerEvents) && !props?.LayoutTemplateString?.includes(KeyValueBox.name)) return StrCast(doc!.pointerEvents); // honor pointerEvents field (set by lock button usually) if it's not a keyValue view of the Doc - if (docProps?.DocumentView?.().ComponentView?.overridePointerEvents?.() !== undefined) return docProps?.DocumentView?.().ComponentView?.overridePointerEvents?.(); - if (DocumentView.ExploreMode || doc?.layout_unrendered) return isInk() ? 'visiblePainted' : 'all'; + if (props?.LayoutTemplateString?.includes(KeyValueBox.name)) return 'all'; + if (SnappingManager.ExploreMode || doc?.layout_unrendered) return isInk() ? 'visiblePainted' : 'all'; if (props?.pointerEvents?.() === 'none') return 'none'; if (opacity() === 0) return 'none'; - if (props?.isGroupActive?.() ) return isInk() ? 'visiblePainted': (doc?._isGroup )? undefined: 'all' - if (props?.isDocumentActive?.() && !props.treeViewDoc) return isInk() ? 'visiblePainted' : 'all'; + if (props?.isGroupActive?.() ) return isInk() ? 'visiblePainted': (doc?. + isGroup )? undefined: 'all' + if (props?.isDocumentActive?.()) return isInk() ? 'visiblePainted' : 'all'; return undefined; // fixes problem with tree view elements getting pointer events when the tree view is not active case StyleProp.Decorations: - const lock = () => { - if (props?.docViewPath().lastElement()?.rootDoc?._type_collection === CollectionViewType.Freeform) { - return doc?.pointerEvents !== 'none' ? null : ( + const lock = () => doc?.pointerEvents !== 'none' ? null : ( <div className="styleProvider-lock" onClick={() => toggleLockedPosition(doc)}> <FontAwesomeIcon icon='lock' size="lg" /> </div> ); - } - }; const filter = () => { const dashView = untracked(() => DocumentManager.Instance.getDocumentView(Doc.ActiveDashboard)); const showFilterIcon = StrListCast(doc?._childFilters).length || StrListCast(doc?._childFiltersByRanges).length ? 'green' // #18c718bd' //'hasFilter' - : docProps?.childFilters?.().filter(f => Utils.IsRecursiveFilter(f) && f !== Utils.noDragsDocFilter).length || docProps?.childFiltersByRanges().length + : props?.childFilters?.().filter(f => Utils.IsRecursiveFilter(f) && f !== Utils.noDragDocsFilter).length || props?.childFiltersByRanges().length ? 'orange' //'inheritsFilter' : undefined; return !showFilterIcon ? null : ( @@ -296,7 +286,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps setSelectedVal={ action((dv) => { (dv as any).select(false); - (SettingsManager.propertiesWidth = 250); + (SettingsManager.Instance.propertiesWidth = 250); setTimeout(action(() => { if (PropertiesView.Instance) { PropertiesView.Instance.CloseAll(); @@ -313,10 +303,10 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps "this view inherits filters from one of its parents"} color={SettingsManager.userColor} background={showFilterIcon} - items={[ ...(dashView ? [dashView]: []), ...(props?.docViewPath?.()??[]), ...(props?.DocumentView?[props?.DocumentView?.()]:[])] - .filter(dv => StrListCast(dv.rootDoc.childFilters).length || StrListCast(dv.rootDoc.childRangeFilters).length) + items={[ ...(dashView ? [dashView]: []), ...(props?.docViewPath?.()??[])] + .filter(dv => StrListCast(dv?.Document.childFilters).length || StrListCast(dv?.Document.childRangeFilters).length) .map(dv => ({ - text: StrCast(dv.rootDoc.title), + text: StrCast(dv?.Document.title), val: dv as any, style: {color:SettingsManager.userColor, background:SettingsManager.userBackgroundColor}, } as IListItemProps)) } @@ -326,12 +316,12 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps }; const audio = () => { const audioAnnoState = (doc: Doc) => StrCast(doc.audioAnnoState, 'stopped'); - const audioAnnosCount = (doc: Doc) => StrListCast(doc[Doc.LayoutFieldKey(doc) + '_audioAnnotations']).length; + const audioAnnosCount = (doc: Doc) => StrListCast(doc[fieldKey + 'audioAnnotations']).length; if (!doc || props?.renderDepth === -1 || !audioAnnosCount(doc)) return null; const audioIconColors: { [key: string]: string } = { recording: 'red', playing: 'green', stopped: 'blue' }; return ( - <Tooltip title={<div>{StrListCast(doc[Doc.LayoutFieldKey(doc) + '_audioAnnotations_text']).lastElement()}</div>}> - <div className="styleProvider-audio" onPointerDown={() => DocumentManager.Instance.getFirstDocumentView(doc)?.docView?.playAnnotation()}> + <Tooltip title={<div>{StrListCast(doc[fieldKey + 'audioAnnotations_text']).lastElement()}</div>}> + <div className="styleProvider-audio" onPointerDown={() => DocumentManager.Instance.getFirstDocumentView(doc)?.playAnnotation()}> <FontAwesomeIcon className="documentView-audioFont" style={{ color: audioIconColors[audioAnnoState(doc)] }} icon={'file-audio'} size="sm" /> </div> </Tooltip> @@ -364,9 +354,9 @@ export function DashboardToggleButton(doc: Doc, field: string, onIcon: IconProp, ); } /** - * add lock and hide button decorations for the "Dashboards" flyout TreeView + * add hide button decorations for the "Dashboards" flyout TreeView */ -export function DashboardStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps | DocumentViewProps>, property: string) { +export function DashboardStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string) { if (doc && property.split(':')[0] === StyleProp.Decorations) { return doc._type_collection === CollectionViewType.Docking || Doc.IsSystem(doc) ? null diff --git a/src/client/views/TemplateMenu.scss b/src/client/views/TemplateMenu.scss index f81cbdaab..4d0f1bf00 100644 --- a/src/client/views/TemplateMenu.scss +++ b/src/client/views/TemplateMenu.scss @@ -1,4 +1,4 @@ -@import "global/globalCssVariables"; +@import 'global/globalCssVariables.module.scss'; .templating-menu { position: absolute; pointer-events: auto; @@ -40,7 +40,8 @@ height: 100%; width: 100%; - .templateToggle, .chromeToggle { + .templateToggle, + .chromeToggle { text-align: left; color: black; } @@ -48,4 +49,4 @@ input { margin-right: 10px; } -}
\ No newline at end of file +} diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx index a3884c9eb..5fc33207e 100644 --- a/src/client/views/TemplateMenu.tsx +++ b/src/client/views/TemplateMenu.tsx @@ -1,5 +1,6 @@ import { action, computed, observable, ObservableSet, runInAction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { Doc, DocListCast } from '../../fields/Doc'; import { ScriptField } from '../../fields/ScriptField'; import { Cast, StrCast } from '../../fields/Types'; @@ -10,10 +11,10 @@ import { ScriptingGlobals } from '../util/ScriptingGlobals'; import { Transform } from '../util/Transform'; import { undoBatch } from '../util/UndoManager'; import { CollectionTreeView } from './collections/CollectionTreeView'; -import { DocumentView } from './nodes/DocumentView'; +import { DocumentView, returnEmptyDocViewList } from './nodes/DocumentView'; import { DefaultStyleProvider } from './StyleProvider'; import './TemplateMenu.scss'; -import React = require('react'); +import { DocData } from '../../fields/DocSymbols'; @observer class TemplateToggle extends React.Component<{ template: string; checked: boolean; toggle: (event: React.ChangeEvent<HTMLInputElement>, template: string) => void }> { @@ -79,14 +80,14 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> { }; componentDidMount() { !this._addedKeys && (this._addedKeys = new ObservableSet()); - [...Array.from(Object.keys(Doc.GetProto(this.props.docViews[0].props.Document))), ...Array.from(Object.keys(this.props.docViews[0].props.Document))] + [...Array.from(Object.keys(this.props.docViews[0].Document[DocData])), ...Array.from(Object.keys(this.props.docViews[0].Document))] .filter(key => key.startsWith('layout_')) .map(key => runInAction(() => this._addedKeys.add(key.replace('layout_', '')))); } return100 = () => 300; @computed get scriptField() { - const script = ScriptField.MakeScript('docs.map(d => switchView(d, this))', { this: Doc.name }, { docs: this.props.docViews.map(dv => dv.props.Document) as any }); + const script = ScriptField.MakeScript('docs.map(d => switchView(d, this))', { this: Doc.name }, { docs: this.props.docViews.map(dv => dv.Document) as any }); return script ? () => script : undefined; } templateIsUsed = (selDoc: Doc, templateDoc: Doc) => { @@ -95,7 +96,7 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> { }; render() { TraceMobx(); - const firstDoc = this.props.docViews[0].props.Document; + const firstDoc = this.props.docViews[0].Document; const templateName = StrCast(firstDoc.layout_fieldKey, 'layout').replace('layout_', ''); const noteTypes = DocListCast(Cast(Doc.UserDoc()['template_notes'], Doc, null)?.data); const addedTypes = DocListCast(Cast(Doc.UserDoc()['template_clickFuncs'], Doc, null)?.data); @@ -113,18 +114,15 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> { {templateMenu} <CollectionTreeView Document={Doc.MyTemplates} + docViewPath={returnEmptyDocViewList} styleProvider={DefaultStyleProvider} - setHeight={returnFalse} - docViewPath={returnEmptyDoclist} childFilters={returnEmptyFilter} childFiltersByRanges={returnEmptyFilter} searchFilterDocs={returnEmptyDoclist} - rootSelected={returnFalse} onCheckedClick={this.scriptField} onChildClick={this.scriptField} isAnyChildContentActive={returnFalse} isContentActive={returnTrue} - bringToFront={emptyFunction} focus={emptyFunction} whenChildContentsActiveChanged={emptyFunction} ScreenToLocalTransform={Transform.Identity} diff --git a/src/client/views/TouchScrollableMenu.tsx b/src/client/views/TouchScrollableMenu.tsx index 969605be9..530c693a7 100644 --- a/src/client/views/TouchScrollableMenu.tsx +++ b/src/client/views/TouchScrollableMenu.tsx @@ -1,6 +1,6 @@ -import React = require("react"); -import { computed } from "mobx"; -import { observer } from "mobx-react"; +import * as React from 'react'; +import { computed } from 'mobx'; +import { observer } from 'mobx-react'; export interface TouchScrollableMenuProps { options: JSX.Element[]; @@ -24,31 +24,35 @@ export interface TouchScrollableMenuItemProps { @observer export default class TouchScrollableMenu extends React.Component<TouchScrollableMenuProps> { - @computed - private get possibilities() { return this.props.options; } + private get possibilities() { + return this.props.options; + } @computed - private get selectedIndex() { return this.props.selectedIndex; } + private get selectedIndex() { + return this.props.selectedIndex; + } render() { return ( - <div className="inkToTextDoc-cont" style={{ - transform: `translate(${this.props.x}px, ${this.props.y}px)`, - width: 300, - height: this.possibilities.length * 25 - }}> + <div + className="inkToTextDoc-cont" + style={{ + transform: `translate(${this.props.x}px, ${this.props.y}px)`, + width: 300, + height: this.possibilities.length * 25, + }}> <div className="inkToTextDoc-scroller" style={{ transform: `translate(0, ${-this.selectedIndex * 25}px)` }}> {this.possibilities} </div> - <div className="shadow" style={{ height: `calc(100% - 25px - ${this.selectedIndex * 25}px)` }}> - </div> + <div className="shadow" style={{ height: `calc(100% - 25px - ${this.selectedIndex * 25}px)` }}></div> </div> ); } } -export class TouchScrollableMenuItem extends React.Component<TouchScrollableMenuItemProps>{ +export class TouchScrollableMenuItem extends React.Component<TouchScrollableMenuItemProps> { render() { return ( <div className="menuItem-cont" onClick={this.props.onClick}> @@ -56,4 +60,4 @@ export class TouchScrollableMenuItem extends React.Component<TouchScrollableMenu </div> ); } -}
\ No newline at end of file +} diff --git a/src/client/views/UndoStack.tsx b/src/client/views/UndoStack.tsx index f07e38af1..068143225 100644 --- a/src/client/views/UndoStack.tsx +++ b/src/client/views/UndoStack.tsx @@ -8,19 +8,13 @@ import { SettingsManager } from '../util/SettingsManager'; import { UndoManager } from '../util/UndoManager'; import './UndoStack.scss'; -interface UndoStackProps { - width?: number; - height?: number; - inline?: boolean; -} +interface UndoStackProps {} @observer export class UndoStack extends React.Component<UndoStackProps> { - @observable static HideInline: boolean; - @observable static Expand: boolean; render() { const background = UndoManager.batchCounter.get() ? 'yellow' : SettingsManager.userVariantColor; const color = UndoManager.batchCounter.get() ? 'black' : SettingsManager.userColor; - return this.props.inline && UndoStack.HideInline ? null : ( + return ( <Tooltip title={'undo stack (if it stays yellow, undo is broken - you should reload Dash)'}> <div> <div className="undoStack-outerContainer"> @@ -39,19 +33,25 @@ export class UndoStack extends React.Component<UndoStackProps> { color, }}> {Array.from(UndoManager.undoStackNames).map((name, i) => ( - <div className="undoStack-resultContainer" key={i} - onClick={e => { + <div + className="undoStack-resultContainer" + key={i} + onClick={e => { const size = UndoManager.undoStackNames.length; - for (let n = 0; n < size-i; n++ ) UndoManager.Undo(); } } - > + for (let n = 0; n < size - i; n++) UndoManager.Undo(); + }}> <div className="undoStack-commandString">{StrCast(name).replace(/[^\.]*\./, '')}</div> </div> ))} {Array.from(UndoManager.redoStackNames) .reverse() .map((name, i) => ( - <div className="undoStack-resultContainer" key={i} onClick={e => - { for (let n = 0; n <= i; n++ ) UndoManager.Redo() }}> + <div + className="undoStack-resultContainer" + key={i} + onClick={e => { + for (let n = 0; n <= i; n++) UndoManager.Redo(); + }}> <div className="undoStack-commandString" style={{ fontWeight: 'bold', background: SettingsManager.userBackgroundColor, color: SettingsManager.userColor }}> {StrCast(name).replace(/[^\.]*\./, '')} </div> diff --git a/src/client/views/_nodeModuleOverrides.scss b/src/client/views/_nodeModuleOverrides.scss index c99281323..db69d6e44 100644 --- a/src/client/views/_nodeModuleOverrides.scss +++ b/src/client/views/_nodeModuleOverrides.scss @@ -1,4 +1,4 @@ -@import './global/globalCssVariables'; +@import './global/globalCssVariables.module.scss'; // this file is for overriding all the css from installed node modules // goldenlayout stuff diff --git a/src/client/views/animationtimeline/Region.scss b/src/client/views/animationtimeline/Region.scss index f7476ab55..b390ae34e 100644 --- a/src/client/views/animationtimeline/Region.scss +++ b/src/client/views/animationtimeline/Region.scss @@ -1,4 +1,4 @@ -@import './../global/globalCssVariables.scss'; +@import './../global/globalCssVariables.module.scss'; $timelineColor: #9acedf; $timelineDark: #77a1aa; diff --git a/src/client/views/animationtimeline/Region.tsx b/src/client/views/animationtimeline/Region.tsx index 53c5c4718..99163f6c6 100644 --- a/src/client/views/animationtimeline/Region.tsx +++ b/src/client/views/animationtimeline/Region.tsx @@ -1,4 +1,4 @@ -import { action, computed, observable, runInAction } from 'mobx'; +import { action, computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, DocListCast, Opt } from '../../../fields/Doc'; @@ -6,7 +6,8 @@ import { List } from '../../../fields/List'; import { createSchema, defaultSpec, listSpec, makeInterface } from '../../../fields/Schema'; import { Cast, NumCast } from '../../../fields/Types'; import { Transform } from '../../util/Transform'; -import '../global/globalCssVariables.scss'; +import { ObservableReactComponent } from '../ObservableReactComponent'; +import '../global/globalCssVariables.module.scss'; import './Region.scss'; import './Timeline.scss'; import { TimelineMenu } from './TimelineMenu'; @@ -31,11 +32,11 @@ export namespace RegionHelpers { let rightMost: RegionData | undefined = undefined; regions.forEach(region => { const neighbor = RegionData(region); - if (currentRegion.position! > neighbor.position) { + if (NumCast(currentRegion.position) > neighbor.position) { if (!leftMost || neighbor.position > leftMost.position) { leftMost = neighbor; } - } else if (currentRegion.position! < neighbor.position) { + } else if (NumCast(currentRegion.position) < neighbor.position) { if (!rightMost || neighbor.position < rightMost.position) { rightMost = neighbor; } @@ -156,44 +157,45 @@ interface IProps { * @author Andrew Kim */ @observer -export class Region extends React.Component<IProps> { +export class Region extends ObservableReactComponent<IProps> { @observable private _bar = React.createRef<HTMLDivElement>(); @observable private _mouseToggled = false; @observable private _doubleClickEnabled = false; @computed private get regiondata() { - return RegionData(this.props.RegionData); + return RegionData(this._props.RegionData); } @computed private get regions() { - return DocListCast(this.props.animatedDoc.regions); + return DocListCast(this._props.animatedDoc.regions); } @computed private get keyframes() { return DocListCast(this.regiondata.keyframes); } @computed private get pixelPosition() { - return RegionHelpers.convertPixelTime(this.regiondata.position, 'mili', 'pixel', this.props.tickSpacing, this.props.tickIncrement); + return RegionHelpers.convertPixelTime(this.regiondata.position, 'mili', 'pixel', this._props.tickSpacing, this._props.tickIncrement); } @computed private get pixelDuration() { - return RegionHelpers.convertPixelTime(this.regiondata.duration, 'mili', 'pixel', this.props.tickSpacing, this.props.tickIncrement); + return RegionHelpers.convertPixelTime(this.regiondata.duration, 'mili', 'pixel', this._props.tickSpacing, this._props.tickIncrement); } @computed private get pixelFadeIn() { - return RegionHelpers.convertPixelTime(this.regiondata.fadeIn, 'mili', 'pixel', this.props.tickSpacing, this.props.tickIncrement); + return RegionHelpers.convertPixelTime(this.regiondata.fadeIn, 'mili', 'pixel', this._props.tickSpacing, this._props.tickIncrement); } @computed private get pixelFadeOut() { - return RegionHelpers.convertPixelTime(this.regiondata.fadeOut, 'mili', 'pixel', this.props.tickSpacing, this.props.tickIncrement); + return RegionHelpers.convertPixelTime(this.regiondata.fadeOut, 'mili', 'pixel', this._props.tickSpacing, this._props.tickIncrement); } constructor(props: any) { super(props); + makeObservable(this); } componentDidMount() { setTimeout(() => { //giving it a temporary 1sec delay... if (!this.regiondata.keyframes) this.regiondata.keyframes = new List<Doc>(); - const start = this.props.makeKeyData(this.regiondata, this.regiondata.position, RegionHelpers.KeyframeType.end); - const fadeIn = this.props.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.fadeIn, RegionHelpers.KeyframeType.fade); - const fadeOut = this.props.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.duration - this.regiondata.fadeOut, RegionHelpers.KeyframeType.fade); - const finish = this.props.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.duration, RegionHelpers.KeyframeType.end); + const start = this._props.makeKeyData(this.regiondata, this.regiondata.position, RegionHelpers.KeyframeType.end); + const fadeIn = this._props.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.fadeIn, RegionHelpers.KeyframeType.fade); + const fadeOut = this._props.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.duration - this.regiondata.fadeOut, RegionHelpers.KeyframeType.fade); + const finish = this._props.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.duration, RegionHelpers.KeyframeType.end); fadeIn.opacity = 1; fadeOut.opacity = 1; start.opacity = 0.1; @@ -212,7 +214,7 @@ export class Region extends React.Component<IProps> { this._doubleClickEnabled = false; } else { setTimeout(() => { - if (!this._mouseToggled && this._doubleClickEnabled) this.props.changeCurrentBarX(this.pixelPosition + (clientX - this._bar.current!.getBoundingClientRect().left) * this.props.transform.Scale); + if (!this._mouseToggled && this._doubleClickEnabled) this._props.changeCurrentBarX(this.pixelPosition + (clientX - this._bar.current!.getBoundingClientRect().left) * this._props.transform.Scale); this._mouseToggled = false; this._doubleClickEnabled = false; }, 200); @@ -234,7 +236,7 @@ export class Region extends React.Component<IProps> { const left = RegionHelpers.findAdjacentRegion(RegionHelpers.Direction.left, this.regiondata, this.regions)!; const right = RegionHelpers.findAdjacentRegion(RegionHelpers.Direction.right, this.regiondata, this.regions)!; const prevX = this.regiondata.position; - const futureX = this.regiondata.position + RegionHelpers.convertPixelTime(e.movementX, 'mili', 'time', this.props.tickSpacing, this.props.tickIncrement); + const futureX = this.regiondata.position + RegionHelpers.convertPixelTime(e.movementX, 'mili', 'time', this._props.tickSpacing, this._props.tickIncrement); if (futureX <= 0) { this.regiondata.position = 0; } else if (left && left.position + left.duration >= futureX) { @@ -273,7 +275,7 @@ export class Region extends React.Component<IProps> { e.preventDefault(); e.stopPropagation(); const bar = this._bar.current!; - const offset = RegionHelpers.convertPixelTime(Math.round((e.clientX - bar.getBoundingClientRect().left) * this.props.transform.Scale), 'mili', 'time', this.props.tickSpacing, this.props.tickIncrement); + const offset = RegionHelpers.convertPixelTime(Math.round((e.clientX - bar.getBoundingClientRect().left) * this._props.transform.Scale), 'mili', 'time', this._props.tickSpacing, this._props.tickIncrement); const leftRegion = RegionHelpers.findAdjacentRegion(RegionHelpers.Direction.left, this.regiondata, this.regions); if (leftRegion && this.regiondata.position + offset <= leftRegion.position + leftRegion.duration) { this.regiondata.position = leftRegion.position + leftRegion.duration; @@ -297,7 +299,7 @@ export class Region extends React.Component<IProps> { e.preventDefault(); e.stopPropagation(); const bar = this._bar.current!; - const offset = RegionHelpers.convertPixelTime(Math.round((e.clientX - bar.getBoundingClientRect().right) * this.props.transform.Scale), 'mili', 'time', this.props.tickSpacing, this.props.tickIncrement); + const offset = RegionHelpers.convertPixelTime(Math.round((e.clientX - bar.getBoundingClientRect().right) * this._props.transform.Scale), 'mili', 'time', this._props.tickSpacing, this._props.tickIncrement); const rightRegion = RegionHelpers.findAdjacentRegion(RegionHelpers.Direction.right, this.regiondata, this.regions); const fadeOutKeyframeTime = NumCast(this.keyframes[this.keyframes.length - 3].time); if (this.regiondata.position + this.regiondata.duration - this.regiondata.fadeOut + offset <= fadeOutKeyframeTime) { @@ -316,13 +318,13 @@ export class Region extends React.Component<IProps> { createKeyframe = (clientX: number) => { this._mouseToggled = true; const bar = this._bar.current!; - const offset = RegionHelpers.convertPixelTime(Math.round((clientX - bar.getBoundingClientRect().left) * this.props.transform.Scale), 'mili', 'time', this.props.tickSpacing, this.props.tickIncrement); + const offset = RegionHelpers.convertPixelTime(Math.round((clientX - bar.getBoundingClientRect().left) * this._props.transform.Scale), 'mili', 'time', this._props.tickSpacing, this._props.tickIncrement); if (offset > this.regiondata.fadeIn && offset < this.regiondata.duration - this.regiondata.fadeOut) { //make sure keyframe is not created inbetween fades and ends const position = this.regiondata.position; - this.props.makeKeyData(this.regiondata, Math.round(position + offset), RegionHelpers.KeyframeType.default); + this._props.makeKeyData(this.regiondata, Math.round(position + offset), RegionHelpers.KeyframeType.default); this.regiondata.hasData = true; - this.props.changeCurrentBarX(RegionHelpers.convertPixelTime(Math.round(position + offset), 'mili', 'pixel', this.props.tickSpacing, this.props.tickIncrement)); //first move the keyframe to the correct location and make a copy so the correct file gets coppied + this._props.changeCurrentBarX(RegionHelpers.convertPixelTime(Math.round(position + offset), 'mili', 'pixel', this._props.tickSpacing, this._props.tickIncrement)); //first move the keyframe to the correct location and make a copy so the correct file gets coppied } }; @@ -330,7 +332,7 @@ export class Region extends React.Component<IProps> { moveKeyframe = (e: React.MouseEvent, kf: Doc) => { e.preventDefault(); e.stopPropagation(); - this.props.changeCurrentBarX(RegionHelpers.convertPixelTime(NumCast(kf.time!), 'mili', 'pixel', this.props.tickSpacing, this.props.tickIncrement)); + this._props.changeCurrentBarX(RegionHelpers.convertPixelTime(NumCast(kf.time!), 'mili', 'pixel', this._props.tickSpacing, this._props.tickIncrement)); }; /** @@ -373,7 +375,7 @@ export class Region extends React.Component<IProps> { */ @action makeRegionMenu = (kf: Doc, e: MouseEvent) => { - TimelineMenu.Instance.addItem('button', 'Remove Region', () => Cast(this.props.animatedDoc.regions, listSpec(Doc))?.splice(this.regions.indexOf(this.props.RegionData), 1)), + TimelineMenu.Instance.addItem('button', 'Remove Region', () => Cast(this._props.animatedDoc.regions, listSpec(Doc))?.splice(this.regions.indexOf(this._props.RegionData), 1)), TimelineMenu.Instance.addItem('input', `fadeIn: ${this.regiondata.fadeIn}ms`, val => { runInAction(() => { let cannotMove: boolean = false; @@ -459,7 +461,7 @@ export class Region extends React.Component<IProps> { e.stopPropagation(); const div = ref.current!; div.style.opacity = '1'; - Doc.BrushDoc(this.props.animatedDoc); + Doc.BrushDoc(this._props.animatedDoc); }; /** @@ -471,7 +473,7 @@ export class Region extends React.Component<IProps> { e.stopPropagation(); const div = ref.current!; div.style.opacity = '0'; - Doc.UnBrushDoc(this.props.animatedDoc); + Doc.UnBrushDoc(this._props.animatedDoc); }; ///////////////////////UI STUFF ///////////////////////// @@ -485,12 +487,12 @@ export class Region extends React.Component<IProps> { return DocListCast(this.regiondata.keyframes).map(kf => { return ( <> - <div className="keyframe" style={{ left: `${RegionHelpers.convertPixelTime(NumCast(kf.time), 'mili', 'pixel', this.props.tickSpacing, this.props.tickIncrement) - this.pixelPosition}px` }}> + <div className="keyframe" style={{ left: `${RegionHelpers.convertPixelTime(NumCast(kf.time), 'mili', 'pixel', this._props.tickSpacing, this._props.tickIncrement) - this.pixelPosition}px` }}> <div className="divider"></div> <div className="keyframeCircle keyframe-indicator" style={{ - borderColor: this.props.saveStateKf === kf ? 'red' : undefined, + borderColor: this._props.saveStateKf === kf ? 'red' : undefined, }} onPointerDown={e => { e.preventDefault(); @@ -525,8 +527,8 @@ export class Region extends React.Component<IProps> { if (index !== this.keyframes.length - 1) { const right = this.keyframes[index + 1]; const bodyRef = React.createRef<HTMLDivElement>(); - const kfPos = RegionHelpers.convertPixelTime(NumCast(kf.time), 'mili', 'pixel', this.props.tickSpacing, this.props.tickIncrement); - const rightPos = RegionHelpers.convertPixelTime(NumCast(right.time), 'mili', 'pixel', this.props.tickSpacing, this.props.tickIncrement); + const kfPos = RegionHelpers.convertPixelTime(NumCast(kf.time), 'mili', 'pixel', this._props.tickSpacing, this._props.tickIncrement); + const rightPos = RegionHelpers.convertPixelTime(NumCast(right.time), 'mili', 'pixel', this._props.tickSpacing, this._props.tickIncrement); keyframeDividers.push( <div ref={bodyRef} diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss index 48422b789..35ba0fa7f 100644 --- a/src/client/views/animationtimeline/Timeline.scss +++ b/src/client/views/animationtimeline/Timeline.scss @@ -1,4 +1,4 @@ -@import "./../global/globalCssVariables.scss"; +@import './../global/globalCssVariables.module.scss'; $timelineColor: #9acedf; $timelineDark: #77a1aa; @@ -30,7 +30,6 @@ $timelineDark: #77a1aa; color: $timelineColor; margin-left: 3px; } - } .grid-box { @@ -61,7 +60,7 @@ $timelineDark: #77a1aa; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); - transition: .2s ease; + transition: 0.2s ease; } } @@ -128,7 +127,6 @@ $timelineDark: #77a1aa; // margin-top: 0.5px; } } - } .time-input { @@ -154,7 +152,7 @@ $timelineDark: #77a1aa; .number-label { color: black; transform: rotate(-90deg) translate(-15px, 8px); - font-size: .85em; + font-size: 0.85em; } .timeline-container { @@ -178,7 +176,6 @@ $timelineDark: #77a1aa; background-color: transparent; height: 30px; width: 100%; - } .scrubber { @@ -217,7 +214,6 @@ $timelineDark: #77a1aa; position: absolute; // box-shadow: -10px 0px 10px 10px red; } - } .currentTime { @@ -266,7 +262,6 @@ $timelineDark: #77a1aa; p { hyphens: auto; } - } } @@ -280,8 +275,6 @@ $timelineDark: #77a1aa; } } - - .overview { position: absolute; height: 50px; @@ -298,7 +291,6 @@ $timelineDark: #77a1aa; } } - .timeline-checker { height: auto; width: auto; @@ -312,11 +304,11 @@ $timelineDark: #77a1aa; width: auto; overflow: hidden; margin: 0px 10px; - cursor: pointer + cursor: pointer; } .check { width: 50px; height: 50px; } -}
\ No newline at end of file +} diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx index 4be3b05ab..cc4da1694 100644 --- a/src/client/views/animationtimeline/Timeline.tsx +++ b/src/client/views/animationtimeline/Timeline.tsx @@ -1,14 +1,15 @@ import { IconLookup } from '@fortawesome/fontawesome-svg-core'; import { faBackward, faForward, faGripLines, faPauseCircle, faPlayCircle } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; +import { Utils, emptyFunction, setupMoveUpEvents } from '../../../Utils'; import { Doc, DocListCast } from '../../../fields/Doc'; import { BoolCast, NumCast, StrCast } from '../../../fields/Types'; -import { emptyFunction, setupMoveUpEvents, Utils } from '../../../Utils'; import { DocumentType } from '../../documents/DocumentTypes'; import clamp from '../../util/clamp'; +import { ObservableReactComponent } from '../ObservableReactComponent'; import { FieldViewProps } from '../nodes/FieldView'; import { RegionHelpers } from './Region'; import './Timeline.scss'; @@ -43,7 +44,7 @@ import { Track } from './Track'; */ @observer -export class Timeline extends React.Component<FieldViewProps> { +export class Timeline extends ObservableReactComponent<FieldViewProps> { //readonly constants private readonly DEFAULT_TICK_SPACING: number = 50; private readonly MAX_TITLE_HEIGHT = 75; @@ -54,6 +55,11 @@ export class Timeline extends React.Component<FieldViewProps> { private DEFAULT_CONTAINER_HEIGHT: number = 330; private MIN_CONTAINER_HEIGHT: number = 205; + constructor(props: any) { + super(props); + makeObservable(this); + } + //react refs @observable private _trackbox = React.createRef<HTMLDivElement>(); @observable private _titleContainer = React.createRef<HTMLDivElement>(); @@ -82,11 +88,11 @@ export class Timeline extends React.Component<FieldViewProps> { */ @computed private get children(): Doc[] { - const annotatedDoc = [DocumentType.IMG, DocumentType.VID, DocumentType.PDF, DocumentType.MAP].includes(StrCast(this.props.Document.type) as any); + const annotatedDoc = [DocumentType.IMG, DocumentType.VID, DocumentType.PDF, DocumentType.MAP].includes(StrCast(this._props.Document.type) as any); if (annotatedDoc) { - return DocListCast(this.props.Document[Doc.LayoutFieldKey(this.props.Document) + '_annotations']); + return DocListCast(this._props.Document[Doc.LayoutFieldKey(this._props.Document) + '_annotations']); } - return DocListCast(this.props.Document[this.props.fieldKey]); + return DocListCast(this._props.Document[this._props.fieldKey]); } /////////lifecycle functions//////////// @@ -96,21 +102,21 @@ export class Timeline extends React.Component<FieldViewProps> { this._titleHeight = relativeHeight < this.MAX_TITLE_HEIGHT ? relativeHeight : this.MAX_TITLE_HEIGHT; //check if relHeight is less than Maxheight. Else, just set relheight to max this.MIN_CONTAINER_HEIGHT = this._titleHeight + 130; //offset this.DEFAULT_CONTAINER_HEIGHT = this._titleHeight * 2 + 130; //twice the titleheight + offset - if (!this.props.Document.AnimationLength) { + if (!this._props.Document.AnimationLength) { //if animation length did not exist - this.props.Document.AnimationLength = this._time; //set it to default time + this._props.Document.AnimationLength = this._time; //set it to default time } else { - this._time = NumCast(this.props.Document.AnimationLength); //else, set time to animationlength stored from before + this._time = NumCast(this._props.Document.AnimationLength); //else, set time to animationlength stored from before } this._totalLength = this._tickSpacing * (this._time / this._tickIncrement); //the entire length of the timeline div (actual div part itself) this._visibleLength = this._infoContainer.current!.getBoundingClientRect().width; //the visible length of the timeline (the length that you current see) this._visibleStart = this._infoContainer.current!.scrollLeft; //where the div starts - this.props.Document.isATOn = !this.props.Document.isATOn; //turns the boolean on, saying AT (animation timeline) is on + this._props.Document.isATOn = !this._props.Document.isATOn; //turns the boolean on, saying AT (animation timeline) is on this.toggleHandle(); } componentWillUnmount() { - this.props.Document.AnimationLength = this._time; //save animation length + this._props.Document.AnimationLength = this._time; //save animation length } ///////////////////////////////////////////////// @@ -206,7 +212,7 @@ export class Timeline extends React.Component<FieldViewProps> { onScrubberMove = (e: PointerEvent) => { const scrubberbox = this._infoContainer.current!; const left = scrubberbox.getBoundingClientRect().left; - const offsetX = Math.round(e.clientX - left) * this.props.ScreenToLocalTransform().Scale; + const offsetX = Math.round(e.clientX - left) * this._props.ScreenToLocalTransform().Scale; this.changeCurrentBarX(offsetX + this._visibleStart); //changes scrubber to clicked scrubber position return false; }; @@ -233,7 +239,7 @@ export class Timeline extends React.Component<FieldViewProps> { this._visibleStart -= e.movementX; this._totalLength -= e.movementX; this._time -= RegionHelpers.convertPixelTime(e.movementX, 'mili', 'time', this._tickSpacing, this._tickIncrement); - this.props.Document.AnimationLength = this._time; + this._props.Document.AnimationLength = this._time; } return false; }; @@ -349,8 +355,8 @@ export class Timeline extends React.Component<FieldViewProps> { private timelineToolBox = (scale: number, totalTime: number) => { const size = 40 * scale; //50 is default const iconSize = 25; - const width: number = this.props.PanelWidth(); - const modeType = this.props.Document.isATOn ? 'Author' : 'Play'; + const width: number = this._props.PanelWidth(); + const modeType = this._props.Document.isATOn ? 'Author' : 'Play'; //decides if information should be omitted because the timeline is very small // if its less than 950 pixels then it's going to be overlapping @@ -389,7 +395,7 @@ export class Timeline extends React.Component<FieldViewProps> { tickIncrement={this._tickIncrement} time={this._time} parent={this} - isAuthoring={BoolCast(this.props.Document.isATOn)} + isAuthoring={BoolCast(this._props.Document.isATOn)} currentBarX={this._currentBarX} totalLength={this._totalLength} visibleLength={this._visibleLength} @@ -410,10 +416,10 @@ export class Timeline extends React.Component<FieldViewProps> { </div> <div className="time-box overview-tool" style={{ display: 'flex' }}> {this.timeIndicator(lengthString, totalTime)} - <div className="resetView-tool" title="Return to Default View" onClick={() => this.resetView(this.props.Document)}> + <div className="resetView-tool" title="Return to Default View" onClick={() => this.resetView(this._props.Document)}> <FontAwesomeIcon icon="compress-arrows-alt" size="lg" /> </div> - <div className="resetView-tool" style={{ display: this.props.Document.isATOn ? 'flex' : 'none' }} title="Set Default View" onClick={() => this.setView(this.props.Document)}> + <div className="resetView-tool" style={{ display: this._props.Document.isATOn ? 'flex' : 'none' }} title="Set Default View" onClick={() => this.setView(this._props.Document)}> <FontAwesomeIcon icon="expand-arrows-alt" size="lg" /> </div> </div> @@ -423,17 +429,17 @@ export class Timeline extends React.Component<FieldViewProps> { }; timeIndicator(lengthString: string, totalTime: number) { - if (this.props.Document.isATOn) { - return <div key="time-text" className="animation-text" style={{ visibility: this.props.Document.isATOn ? 'visible' : 'hidden', display: this.props.Document.isATOn ? 'flex' : 'none' }}>{`Total: ${this.toReadTime(totalTime)}`}</div>; + if (this._props.Document.isATOn) { + return <div key="time-text" className="animation-text" style={{ visibility: this._props.Document.isATOn ? 'visible' : 'hidden', display: this._props.Document.isATOn ? 'flex' : 'none' }}>{`Total: ${this.toReadTime(totalTime)}`}</div>; } else { const ctime = `Current: ${this.getCurrentTime()}`; const ttime = `Total: ${this.toReadTime(this._time)}`; return ( <div style={{ flexDirection: 'column' }}> - <div className="animation-text" style={{ fontSize: '10px', width: '100%', display: !this.props.Document.isATOn ? 'block' : 'none' }}> + <div className="animation-text" style={{ fontSize: '10px', width: '100%', display: !this._props.Document.isATOn ? 'block' : 'none' }}> {ctime} </div> - <div className="animation-text" style={{ fontSize: '10px', width: '100%', display: !this.props.Document.isATOn ? 'block' : 'none' }}> + <div className="animation-text" style={{ fontSize: '10px', width: '100%', display: !this._props.Document.isATOn ? 'block' : 'none' }}> {ttime} </div> </div> @@ -459,8 +465,8 @@ export class Timeline extends React.Component<FieldViewProps> { const roundToggleContainer = this._roundToggleContainerRef.current!; const timelineContainer = this._timelineContainer.current!; - this.props.Document.isATOn = !this.props.Document.isATOn; - if (!BoolCast(this.props.Document.isATOn)) { + this._props.Document.isATOn = !this._props.Document.isATOn; + if (!BoolCast(this._props.Document.isATOn)) { //turning on playmode... roundToggle.style.transform = 'translate(0px, 0px)'; roundToggle.style.animationName = 'turnoff'; @@ -535,7 +541,7 @@ export class Timeline extends React.Component<FieldViewProps> { // change visible and total width return ( <div style={{ visibility: 'visible' }}> - <div key="timeline_wrapper" style={{ visibility: this.props.Document.isATOn ? 'visible' : 'hidden', left: '0px', top: '0px', position: 'absolute', width: '100%', transform: 'translate(0px, 0px)' }}> + <div key="timeline_wrapper" style={{ visibility: this._props.Document.isATOn ? 'visible' : 'hidden', left: '0px', top: '0px', position: 'absolute', width: '100%', transform: 'translate(0px, 0px)' }}> <div key="timeline_container" className="timeline-container" ref={this._timelineContainer} style={{ height: `${this._containerHeight}px`, top: `0px` }}> <div key="timeline_info" className="info-container" onPointerDown={this.onPanDown} ref={this._infoContainer} onWheel={this.onWheelZoom}> {this.drawTicks()} @@ -543,18 +549,18 @@ export class Timeline extends React.Component<FieldViewProps> { <div key="timeline_scrubberhead" className="scrubberhead" onPointerDown={this.onScrubberDown}></div> </div> <div key="timeline_trackbox" className="trackbox" ref={this._trackbox} style={{ width: `${this._totalLength}px` }}> - {[...this.children, this.props.Document].map(doc => ( + {[...this.children, this._props.Document].map(doc => ( <Track ref={ref => this.mapOfTracks.push(ref)} timeline={this} animatedDoc={doc} currentBarX={this._currentBarX} changeCurrentBarX={this.changeCurrentBarX} - transform={this.props.ScreenToLocalTransform()} + transform={this._props.ScreenToLocalTransform()} time={this._time} tickSpacing={this._tickSpacing} tickIncrement={this._tickIncrement} - collection={this.props.Document} + collection={this._props.Document} timelineVisible={true} /> ))} @@ -562,7 +568,7 @@ export class Timeline extends React.Component<FieldViewProps> { </div> <div className="currentTime">Current: {this.getCurrentTime()}</div> <div key="timeline_title" className="title-container" ref={this._titleContainer}> - {[...this.children, this.props.Document].map(doc => ( + {[...this.children, this._props.Document].map(doc => ( <div style={{ height: `${this._titleHeight}px` }} className="datapane" onPointerOver={() => Doc.BrushDoc(doc)} onPointerOut={() => Doc.UnBrushDoc(doc)}> <p>{StrCast(doc.title)}</p> </div> diff --git a/src/client/views/animationtimeline/TimelineMenu.scss b/src/client/views/animationtimeline/TimelineMenu.scss index 43a89419e..de2042f17 100644 --- a/src/client/views/animationtimeline/TimelineMenu.scss +++ b/src/client/views/animationtimeline/TimelineMenu.scss @@ -1,56 +1,49 @@ -@import "./../global/globalCssVariables.scss"; +@import './../global/globalCssVariables.module.scss'; - -.timeline-menu-container{ +.timeline-menu-container { position: absolute; display: flex; box-shadow: $medium-gray 0.2vw 0.2vw 0.4vw; flex-direction: column; background: whitesmoke; z-index: 10000; - width: 200px; + width: 200px; padding-bottom: 10px; border-radius: 15px; - border: solid #BBBBBBBB 1px; - - + border: solid #bbbbbbbb 1px; - .timeline-menu-input{ - font: $sans-serif; - font-size: 13px; - width:100%; - text-transform: uppercase; - letter-spacing: 2px; - margin-left: 10px; - background-color: transparent; - border-width: 0px; - transition: border-width 500ms; + .timeline-menu-input { + font: $sans-serif; + font-size: 13px; + width: 100%; + text-transform: uppercase; + letter-spacing: 2px; + margin-left: 10px; + background-color: transparent; + border-width: 0px; + transition: border-width 500ms; } - .timeline-menu-input:hover{ - border-width: 2px; + .timeline-menu-input:hover { + border-width: 2px; } - - - - .timeline-menu-header{ - border-top-left-radius: 15px; - border-top-right-radius: 15px; - text-transform: uppercase; - background: $dark-gray; - letter-spacing: 2px; + .timeline-menu-header { + border-top-left-radius: 15px; + border-top-right-radius: 15px; + text-transform: uppercase; + background: $dark-gray; + letter-spacing: 2px; - .timeline-menu-header-desc{ - font:$sans-serif; - font-size: 13px; - text-align: center; - color: whitesmoke; + .timeline-menu-header-desc { + font: $sans-serif; + font-size: 13px; + text-align: center; + color: whitesmoke; } } - .timeline-menu-item { // width: 11vw; //10vw height: 30px; //2vh @@ -64,7 +57,7 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; - transition: all .1s; + transition: all 0.1s; border-style: none; // padding: 10px 0px 10px 0px; white-space: nowrap; @@ -73,22 +66,21 @@ letter-spacing: 2px; text-transform: uppercase; padding-right: 20px; - padding-left: 10px; + padding-left: 10px; } .timeline-menu-item:hover { - border-width: .11px; + border-width: 0.11px; border-style: none; border-color: $medium-gray; border-bottom-style: solid; border-top-style: solid; - background: $medium-blue; + background: $medium-blue; } .timeline-menu-desc { - padding-left: 10px; - font:$sans-serif; - font-size: 13px; + padding-left: 10px; + font: $sans-serif; + font-size: 13px; } - -}
\ No newline at end of file +} diff --git a/src/client/views/animationtimeline/TimelineMenu.tsx b/src/client/views/animationtimeline/TimelineMenu.tsx index 1769c41bd..97a571dc4 100644 --- a/src/client/views/animationtimeline/TimelineMenu.tsx +++ b/src/client/views/animationtimeline/TimelineMenu.tsx @@ -1,7 +1,7 @@ import { IconLookup } from '@fortawesome/fontawesome-svg-core'; import { faChartLine, faClipboard } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, observable } from 'mobx'; +import { action, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Utils } from '../../../Utils'; @@ -16,8 +16,9 @@ export class TimelineMenu extends React.Component { @observable private _y = 0; @observable private _currentMenu: JSX.Element[] = []; - constructor(props: Readonly<{}>) { + constructor(props: any) { super(props); + makeObservable(this); TimelineMenu.Instance = this; } diff --git a/src/client/views/animationtimeline/TimelineOverview.scss b/src/client/views/animationtimeline/TimelineOverview.scss index c8d96c399..2878232e6 100644 --- a/src/client/views/animationtimeline/TimelineOverview.scss +++ b/src/client/views/animationtimeline/TimelineOverview.scss @@ -1,4 +1,4 @@ -@import "./../global/globalCssVariables.scss"; +@import './../global/globalCssVariables.module.scss'; $timelineColor: #9acedf; $timelineDark: #77a1aa; @@ -66,8 +66,6 @@ $timelineDark: #77a1aa; } } - - .timeline-play-bar { position: relative; padding: 0px; @@ -104,4 +102,4 @@ $timelineDark: #77a1aa; border-radius: 20px; margin-top: -4px; cursor: pointer; -}
\ No newline at end of file +} diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx index 82ac69a3b..489c4dcde 100644 --- a/src/client/views/animationtimeline/TimelineOverview.tsx +++ b/src/client/views/animationtimeline/TimelineOverview.tsx @@ -28,14 +28,14 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps> { @observable private overviewBarWidth: number = 0; @observable private playbarWidth: number = 0; @observable private activeOverviewWidth: number = 0; - @observable private _authoringReaction?: IReactionDisposer; + @observable private _authoringReaction?: IReactionDisposer = undefined; @observable private visibleTime: number = 0; @observable private currentX: number = 0; @observable private visibleStart: number = 0; private readonly DEFAULT_HEIGHT = 50; private readonly DEFAULT_WIDTH = 300; - componentDidMount = () => { + componentDidMount() { this.setOverviewWidth(); this._authoringReaction = reaction( @@ -48,7 +48,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps> { } } ); - }; + } componentWillUnmount = () => { this._authoringReaction && this._authoringReaction(); diff --git a/src/client/views/animationtimeline/Track.scss b/src/client/views/animationtimeline/Track.scss index f45e0556d..f56b2fe5f 100644 --- a/src/client/views/animationtimeline/Track.scss +++ b/src/client/views/animationtimeline/Track.scss @@ -1,7 +1,6 @@ -@import "./../global/globalCssVariables.scss"; +@import './../global/globalCssVariables.module.scss'; .track-container { - .track { .inner { top: 0px; @@ -12,4 +11,4 @@ z-index: 100; } } -}
\ No newline at end of file +} diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx index f36b5ade8..490a14be5 100644 --- a/src/client/views/animationtimeline/Track.tsx +++ b/src/client/views/animationtimeline/Track.tsx @@ -1,4 +1,4 @@ -import { action, computed, intercept, observable, reaction, runInAction } from 'mobx'; +import { action, computed, intercept, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, DocListCast, DocListCastAsync, Opt } from '../../../fields/Doc'; @@ -8,6 +8,7 @@ import { ObjectField } from '../../../fields/ObjectField'; import { listSpec } from '../../../fields/Schema'; import { Cast, NumCast } from '../../../fields/Types'; import { Transform } from '../../util/Transform'; +import { ObservableReactComponent } from '../ObservableReactComponent'; import { Region, RegionData, RegionHelpers } from './Region'; import { Timeline } from './Timeline'; import './Track.scss'; @@ -26,35 +27,40 @@ interface IProps { } @observer -export class Track extends React.Component<IProps> { +export class Track extends ObservableReactComponent<IProps> { @observable private _inner = React.createRef<HTMLDivElement>(); - @observable private _currentBarXReaction: any; - @observable private _timelineVisibleReaction: any; - @observable private _autoKfReaction: any; + @observable private _currentBarXReaction: any = undefined; + @observable private _timelineVisibleReaction: any = undefined; + @observable private _autoKfReaction: any = undefined; @observable private _newKeyframe: boolean = false; private readonly MAX_TITLE_HEIGHT = 75; @observable private _trackHeight = 0; private primitiveWhitelist = ['x', 'y', '_freeform_panX', '_freeform_panY', '_width', '_height', '_rotation', 'opacity', '_layout_scrollTop']; private objectWhitelist = ['data']; + constructor(props: any) { + super(props); + makeObservable(this); + } + @computed private get regions() { - return DocListCast(this.props.animatedDoc.regions); + return DocListCast(this._props.animatedDoc.regions); } @computed private get time() { - return NumCast(RegionHelpers.convertPixelTime(this.props.currentBarX, 'mili', 'time', this.props.tickSpacing, this.props.tickIncrement)); + return NumCast(RegionHelpers.convertPixelTime(this._props.currentBarX, 'mili', 'time', this._props.tickSpacing, this._props.tickIncrement)); } componentDidMount() { - DocListCastAsync(this.props.animatedDoc.regions).then(regions => { - if (!regions) this.props.animatedDoc.regions = new List<Doc>(); //if there is no region, then create new doc to store stuff + DocListCastAsync(this._props.animatedDoc.regions).then(regions => { + if (!regions) this._props.animatedDoc.regions = new List<Doc>(); //if there is no region, then create new doc to store stuff //these two lines are exactly same from timeline.tsx const relativeHeight = window.innerHeight / 20; runInAction(() => (this._trackHeight = relativeHeight < this.MAX_TITLE_HEIGHT ? relativeHeight : this.MAX_TITLE_HEIGHT)); //for responsiveness this._timelineVisibleReaction = this.timelineVisibleReaction(); this._currentBarXReaction = this.currentBarXReaction(); - if (DocListCast(this.props.animatedDoc.regions).length === 0) this.createRegion(this.time); - this.props.animatedDoc.hidden = false; - this.props.animatedDoc.opacity = 1; + if (DocListCast(this._props.animatedDoc.regions).length === 0) this.createRegion(this.time); + this._props.animatedDoc.hidden = false; + this._props.animatedDoc.opacity = 1; // this.autoCreateKeyframe(); }); } @@ -88,7 +94,7 @@ export class Track extends React.Component<IProps> { */ @action saveKeyframe = () => { - if (this.props.timeline.IsPlaying || !this.saveStateRegion || !this.saveStateKf) { + if (this._props.timeline.IsPlaying || !this.saveStateRegion || !this.saveStateKf) { this.saveStateKf = undefined; this.saveStateRegion = undefined; return; @@ -130,13 +136,13 @@ export class Track extends React.Component<IProps> { */ @action autoCreateKeyframe = () => { - const objects = this.objectWhitelist.map(key => this.props.animatedDoc[key]); - intercept(this.props.animatedDoc, change => { + const objects = this.objectWhitelist.map(key => this._props.animatedDoc[key]); + intercept(this._props.animatedDoc, change => { return change; }); return reaction( () => { - return [...this.primitiveWhitelist.map(key => this.props.animatedDoc[key]), ...objects]; + return [...this.primitiveWhitelist.map(key => this._props.animatedDoc[key]), ...objects]; }, (changed, reaction) => { //check for region @@ -170,18 +176,18 @@ export class Track extends React.Component<IProps> { @action currentBarXReaction = () => { return reaction( - () => this.props.currentBarX, + () => this._props.currentBarX, () => { const regiondata = this.findRegion(this.time); if (regiondata) { - this.props.animatedDoc.hidden = false; + this._props.animatedDoc.hidden = false; // if (!this._autoKfReaction) { // // this._autoKfReaction = this.autoCreateKeyframe(); // } this.timeChange(); } else { - this.props.animatedDoc.hidden = true; - this.props.animatedDoc !== this.props.collection && (this.props.animatedDoc.opacity = 0); + this._props.animatedDoc.hidden = true; + this._props.animatedDoc !== this._props.collection && (this._props.animatedDoc.opacity = 0); //if (this._autoKfReaction) this._autoKfReaction(); } } @@ -195,7 +201,7 @@ export class Track extends React.Component<IProps> { timelineVisibleReaction = () => { return reaction( () => { - return this.props.timelineVisible; + return this._props.timelineVisible; }, isVisible => { if (isVisible) { @@ -252,11 +258,14 @@ export class Track extends React.Component<IProps> { @action private applyKeys = (kf: Doc) => { this.primitiveWhitelist.forEach(key => { + if (key === 'opacity' && this._props.animatedDoc === this._props.collection) { + return; + } if (!kf[key]) { - this.props.animatedDoc[key] = undefined; + this._props.animatedDoc[key] = undefined; } else { const stored = kf[key]; - this.props.animatedDoc[key] = stored instanceof ObjectField ? stored[Copy]() : stored; + this._props.animatedDoc[key] = stored instanceof ObjectField ? stored[Copy]() : stored; } }); }; @@ -280,7 +289,7 @@ export class Track extends React.Component<IProps> { @action interpolate = (left: Doc, right: Doc) => { this.primitiveWhitelist.forEach(key => { - if (key === 'opacity' && this.props.animatedDoc === this.props.collection) { + if (key === 'opacity' && this._props.animatedDoc === this._props.collection) { return; } if (typeof left[key] === 'number' && typeof right[key] === 'number') { @@ -288,11 +297,11 @@ export class Track extends React.Component<IProps> { const dif = NumCast(right[key]) - NumCast(left[key]); const deltaLeft = this.time - NumCast(left.time); const ratio = deltaLeft / (NumCast(right.time) - NumCast(left.time)); - this.props.animatedDoc[key] = NumCast(left[key]) + dif * ratio; + this._props.animatedDoc[key] = NumCast(left[key]) + dif * ratio; } else { // case data const stored = left[key]; - this.props.animatedDoc[key] = stored instanceof ObjectField ? stored[Copy]() : stored; + this._props.animatedDoc[key] = stored instanceof ObjectField ? stored[Copy]() : stored; } }); }; @@ -311,8 +320,8 @@ export class Track extends React.Component<IProps> { @action onInnerDoubleClick = (e: React.MouseEvent) => { const inner = this._inner.current!; - const offsetX = Math.round((e.clientX - inner.getBoundingClientRect().left) * this.props.transform.Scale); - this.createRegion(RegionHelpers.convertPixelTime(offsetX, 'mili', 'time', this.props.tickSpacing, this.props.tickIncrement)); + const offsetX = Math.round((e.clientX - inner.getBoundingClientRect().left) * this._props.transform.Scale); + this.createRegion(RegionHelpers.convertPixelTime(offsetX, 'mili', 'time', this._props.tickSpacing, this._props.tickIncrement)); }; /** @@ -332,7 +341,7 @@ export class Track extends React.Component<IProps> { regiondata.duration = rightRegion.position - regiondata.position; } if (this.regions.length === 0 || !rightRegion || (rightRegion && rightRegion.position - regiondata.position >= NumCast(regiondata.fadeIn) + NumCast(regiondata.fadeOut))) { - Cast(this.props.animatedDoc.regions, listSpec(Doc))?.push(regiondata); + Cast(this._props.animatedDoc.regions, listSpec(Doc))?.push(regiondata); this._newKeyframe = true; this.saveStateRegion = regiondata; return regiondata; @@ -367,7 +376,7 @@ export class Track extends React.Component<IProps> { copyDocDataToKeyFrame = (doc: Doc) => { var somethingChanged = false; this.primitiveWhitelist.map(key => { - const originalVal = this.props.animatedDoc[key]; + const originalVal = this._props.animatedDoc[key]; somethingChanged = somethingChanged || originalVal !== doc[key]; if (doc.type === RegionHelpers.KeyframeType.end && key === 'opacity') doc.opacity = 0; else doc[key] = originalVal instanceof ObjectField ? originalVal[Copy]() : originalVal; @@ -388,10 +397,10 @@ export class Track extends React.Component<IProps> { ref={this._inner} style={{ height: `${this._trackHeight}px` }} onDoubleClick={this.onInnerDoubleClick} - onPointerOver={() => Doc.BrushDoc(this.props.animatedDoc)} - onPointerOut={() => Doc.UnBrushDoc(this.props.animatedDoc)}> + onPointerOver={() => Doc.BrushDoc(this._props.animatedDoc)} + onPointerOut={() => Doc.UnBrushDoc(this._props.animatedDoc)}> {this.regions?.map((region, i) => { - return <Region key={`${i}`} {...this.props} saveStateKf={saveStateKf} RegionData={region} makeKeyData={this.makeKeyData} />; + return <Region key={`${i}`} {...this._props} saveStateKf={saveStateKf} RegionData={region} makeKeyData={this.makeKeyData} />; })} </div> </div> diff --git a/src/client/views/collections/CollectionCalendarView.tsx b/src/client/views/collections/CollectionCalendarView.tsx new file mode 100644 index 000000000..cbcc980a9 --- /dev/null +++ b/src/client/views/collections/CollectionCalendarView.tsx @@ -0,0 +1,100 @@ +import { computed, makeObservable } from 'mobx'; +import { observer } from 'mobx-react'; +import * as React from 'react'; +import { dateRangeStrToDates, emptyFunction, returnTrue } from '../../../Utils'; +import { Doc, DocListCast } from '../../../fields/Doc'; +import { StrCast } from '../../../fields/Types'; +import { CollectionStackingView } from './CollectionStackingView'; +import { CollectionSubView } from './CollectionSubView'; + +@observer +export class CollectionCalendarView extends CollectionSubView() { + constructor(props: any) { + super(props); + makeObservable(this); + } + + componentDidMount(): void {} + + componentWillUnmount(): void {} + + @computed get allCalendars() { + return this.childDocs; // returns a list of docs (i.e. calendars) + } + + removeCalendar = () => {}; + + addCalendar = (doc: Doc | Doc[], annotationKey?: string | undefined): boolean => { + // bring up calendar modal with option to create a calendar + return true; + }; + + _stackRef = React.createRef<CollectionStackingView>(); + + panelHeight = () => { + return this._props.PanelHeight() - 40; // this should be the height of the stacking view. For now, it's the hieight of the calendar view minus 40 to allow for a title + }; + + // most recent calendar should come first + sortByMostRecentDate = (calendarA: Doc, calendarB: Doc) => { + const aDateRangeStr = StrCast(DocListCast(calendarA.data).lastElement()?.date_range); + const bDateRangeStr = StrCast(DocListCast(calendarB.data).lastElement()?.date_range); + + const [aFromDate, aToDate] = dateRangeStrToDates(aDateRangeStr); + const [bFromDate, bToDate] = dateRangeStrToDates(bDateRangeStr); + + if (aFromDate > bFromDate) { + return -1; // a comes first + } else if (aFromDate < bFromDate) { + return 1; // b comes first + } else { + // start dates are the same + if (aToDate > bToDate) { + return -1; // a comes first + } else if (aToDate < bToDate) { + return 1; // b comes first + } else { + return 0; // same start and end dates + } + } + }; + + screenToLocalTransform = () => + this._props + .ScreenToLocalTransform() + .translate(Doc.NativeWidth(this.Document), 0) + .scale(this._props.NativeDimScaling?.() || 1); + + get calendarsKey() { + return this._props.fieldKey; + } + + render() { + return ( + <div className="collectionCalendarView"> + <CollectionStackingView + {...this._props} + setContentViewBox={emptyFunction} + ref={this._stackRef} + PanelHeight={this.panelHeight} + PanelWidth={this._props.PanelWidth} + // childFilters={this.childFilters} DO I NEED THIS? + sortFunc={this.sortByMostRecentDate} + setHeight={undefined} + isAnnotationOverlay={false} + // select={emptyFunction} What does this mean? + isAnyChildContentActive={returnTrue} // ?? + // childDocumentsActive={} + // whenChildContentsActiveChanged={} + childHideDecorationTitle={false} + removeDocument={this.removeDocument} // will calendar automatically be removed from myCalendars + moveDocument={this.moveDocument} + addDocument={this.addCalendar} + ScreenToLocalTransform={this.screenToLocalTransform} + renderDepth={this._props.renderDepth + 1} + fieldKey={this.calendarsKey} + /> + </div> + ); + } +} diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss index 8319f19ca..a556d0fa7 100644 --- a/src/client/views/collections/CollectionCarousel3DView.scss +++ b/src/client/views/collections/CollectionCarousel3DView.scss @@ -1,8 +1,9 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; .collectionCarousel3DView-outer { height: 100%; position: relative; background-color: white; + overflow: hidden; } .carousel-wrapper { @@ -16,7 +17,9 @@ .collectionCarousel3DView-item, .collectionCarousel3DView-item-active { flex: 1; - transition: opacity 0.3s linear, transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); + transition: + opacity 0.3s linear, + transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); pointer-events: none; opacity: 0.5; z-index: 1; diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index a8d080953..7e484f3df 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -1,25 +1,29 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { computed } from 'mobx'; +import { computed, makeObservable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; +import { Utils, emptyFunction, returnFalse, returnZero } from '../../../Utils'; import { Doc, DocListCast } from '../../../fields/Doc'; import { Id } from '../../../fields/FieldSymbols'; import { DocCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types'; -import { returnFalse, returnZero, Utils } from '../../../Utils'; import { DocumentType } from '../../documents/DocumentTypes'; import { DragManager } from '../../util/DragManager'; import { SelectionManager } from '../../util/SelectionManager'; -import { CAROUSEL3D_CENTER_SCALE, CAROUSEL3D_SIDE_SCALE, CAROUSEL3D_TOP } from '../global/globalCssVariables.scss'; -import { DocFocusOptions, DocumentView } from '../nodes/DocumentView'; import { StyleProp } from '../StyleProvider'; +import { DocumentView } from '../nodes/DocumentView'; +import { FocusViewOptions } from '../nodes/FieldView'; import './CollectionCarousel3DView.scss'; import { CollectionSubView } from './CollectionSubView'; - +const { default: { CAROUSEL3D_CENTER_SCALE, CAROUSEL3D_SIDE_SCALE, CAROUSEL3D_TOP } } = require('../global/globalCssVariables.module.scss'); // prettier-ignore @observer export class CollectionCarousel3DView extends CollectionSubView() { @computed get scrollSpeed() { return this.layoutDoc._autoScrollSpeed ? NumCast(this.layoutDoc._autoScrollSpeed) : 1000; //default scroll speed } + constructor(props: any) { + super(props); + makeObservable(this); + } private _dropDisposer?: DragManager.DragDropDisposer; @@ -35,18 +39,18 @@ export class CollectionCarousel3DView extends CollectionSubView() { }; centerScale = Number(CAROUSEL3D_CENTER_SCALE); - panelWidth = () => this.props.PanelWidth() / 3; - panelHeight = () => this.props.PanelHeight() * Number(CAROUSEL3D_SIDE_SCALE); + panelWidth = () => this._props.PanelWidth() / 3; + panelHeight = () => this._props.PanelHeight() * Number(CAROUSEL3D_SIDE_SCALE); onChildDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick); - isContentActive = () => this.props.isSelected() || this.props.isContentActive() || this.props.isAnyChildContentActive(); + isContentActive = () => this._props.isSelected() || this._props.isContentActive() || this._props.isAnyChildContentActive(); isChildContentActive = () => (this.isContentActive() ? true : false); childScreenToLocal = () => - this.props // document's left is the panel shifted by the doc's index * panelWidth/#docs. But it scales by centerScale around its center, so it's left moves left by the distance of the left from the center (panelwidth/2) * the scale delta (centerScale-1) + this._props // document's left is the panel shifted by the doc's index * panelWidth/#docs. But it scales by centerScale around its center, so it's left moves left by the distance of the left from the center (panelwidth/2) * the scale delta (centerScale-1) .ScreenToLocalTransform() // the top behaves the same way ecept it's shifted by the 'top' amount specified for the panel in css and then by the scale factor. - .translate(-this.panelWidth() + ((this.centerScale - 1) * this.panelWidth()) / 2, -((Number(CAROUSEL3D_TOP) / 100) * this.props.PanelHeight()) + ((this.centerScale - 1) * this.panelHeight()) / 2) + .translate(-this.panelWidth() + ((this.centerScale - 1) * this.panelWidth()) / 2, -((Number(CAROUSEL3D_TOP) / 100) * this._props.PanelHeight()) + ((this.centerScale - 1) * this.panelHeight()) / 2) .scale(1 / this.centerScale); - focus = (anchor: Doc, options: DocFocusOptions) => { + focus = (anchor: Doc, options: FocusViewOptions) => { const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]); if (anchor.type !== DocumentType.CONFIG && !docs.includes(anchor)) return; options.didMove = true; @@ -60,23 +64,23 @@ export class CollectionCarousel3DView extends CollectionSubView() { const displayDoc = (childPair: { layout: Doc; data: Doc }) => { return ( <DocumentView - {...this.props} + {...this._props} + Document={childPair.layout} + TemplateDataDocument={childPair.data} + //suppressSetHeight={true} NativeWidth={returnZero} NativeHeight={returnZero} - //suppressSetHeight={true} - onDoubleClick={this.onChildDoubleClick} - renderDepth={this.props.renderDepth + 1} - LayoutTemplate={this.props.childLayoutTemplate} - LayoutTemplateString={this.props.childLayoutString} - Document={childPair.layout} - DataDoc={childPair.data} + layout_fitWidth={undefined} + onDoubleClickScript={this.onChildDoubleClick} + renderDepth={this._props.renderDepth + 1} + LayoutTemplate={this._props.childLayoutTemplate} + LayoutTemplateString={this._props.childLayoutString} focus={this.focus} ScreenToLocalTransform={this.childScreenToLocal} isContentActive={this.isChildContentActive} - isDocumentActive={this.props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this.props.isDocumentActive : this.isContentActive} + isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive} PanelWidth={this.panelWidth} PanelHeight={this.panelHeight} - bringToFront={returnFalse} /> ); }; @@ -139,10 +143,10 @@ export class CollectionCarousel3DView extends CollectionSubView() { const whichButton = this.layoutDoc.showScrollButton; return ( <> - <div className={`carousel3DView-back-scroll${whichButton === 'back' ? '' : '-hidden'}`} style={{ background: `${StrCast(this.props.Document.backgroundColor)}` }} onClick={() => this.toggleAutoScroll(-1)}> + <div className={`carousel3DView-back-scroll${whichButton === 'back' ? '' : '-hidden'}`} style={{ background: `${StrCast(this.Document.backgroundColor)}` }} onClick={() => this.toggleAutoScroll(-1)}> {this.layoutDoc.autoScrollOn ? <FontAwesomeIcon icon={'pause'} size={'1x'} /> : <FontAwesomeIcon icon={'angle-double-left'} size={'1x'} />} </div> - <div className={`carousel3DView-fwd-scroll${whichButton === 'fwd' ? '' : '-hidden'}`} style={{ background: `${StrCast(this.props.Document.backgroundColor)}` }} onClick={() => this.toggleAutoScroll(1)}> + <div className={`carousel3DView-fwd-scroll${whichButton === 'fwd' ? '' : '-hidden'}`} style={{ background: `${StrCast(this.Document.backgroundColor)}` }} onClick={() => this.toggleAutoScroll(1)}> {this.layoutDoc.autoScrollOn ? <FontAwesomeIcon icon={'pause'} size={'1x'} /> : <FontAwesomeIcon icon={'angle-double-right'} size={'1x'} />} </div> </> @@ -163,8 +167,8 @@ export class CollectionCarousel3DView extends CollectionSubView() { className="collectionCarousel3DView-outer" ref={this.createDashEventsTarget} style={{ - background: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor), - color: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Color), + background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor), + color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color), }}> <div className="carousel-wrapper" style={{ transform: `translateX(${this.translateX}px)` }}> {this.content} diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index 33a92d406..dae16bafb 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -1,14 +1,15 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { computed } from 'mobx'; +import { computed, makeObservable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; +import { StopEvent, emptyFunction, returnFalse, returnOne, returnZero } from '../../../Utils'; import { Doc, Opt } from '../../../fields/Doc'; -import { NumCast, ScriptCast, StrCast } from '../../../fields/Types'; -import { emptyFunction, returnFalse, returnOne, returnZero, StopEvent } from '../../../Utils'; +import { DocCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types'; import { DragManager } from '../../util/DragManager'; -import { DocumentView, DocumentViewProps } from '../nodes/DocumentView'; -import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; import { StyleProp } from '../StyleProvider'; +import { DocumentView } from '../nodes/DocumentView'; +import { FieldViewProps } from '../nodes/FieldView'; +import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; import './CollectionCarouselView.scss'; import { CollectionSubView } from './CollectionSubView'; @@ -16,6 +17,11 @@ import { CollectionSubView } from './CollectionSubView'; export class CollectionCarouselView extends CollectionSubView() { private _dropDisposer?: DragManager.DragDropDisposer; + constructor(props: any) { + super(props); + makeObservable(this); + } + componentWillUnmount() { this._dropDisposer?.(); } @@ -35,58 +41,59 @@ export class CollectionCarouselView extends CollectionSubView() { e.stopPropagation(); this.layoutDoc._carousel_index = (NumCast(this.layoutDoc._carousel_index) - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; }; - captionStyleProvider = (doc: Doc | undefined, captionProps: Opt<DocumentViewProps>, property: string): any => { + captionStyleProvider = (doc: Doc | undefined, captionProps: Opt<FieldViewProps>, property: string): any => { // first look for properties on the document in the carousel, then fallback to properties on the container - const childValue = doc?.['caption-' + property] ? this.props.styleProvider?.(doc, captionProps, property) : undefined; - return childValue ?? this.props.styleProvider?.(this.layoutDoc, captionProps, property); + const childValue = doc?.['caption-' + property] ? this._props.styleProvider?.(doc, captionProps, property) : undefined; + return childValue ?? this._props.styleProvider?.(this.layoutDoc, captionProps, property); }; - panelHeight = () => this.props.PanelHeight() - (StrCast(this.layoutDoc._layout_showCaption) ? 50 : 0); + panelHeight = () => this._props.PanelHeight() - (StrCast(this.layoutDoc._layout_showCaption) ? 50 : 0); onContentDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick); onContentClick = () => ScriptCast(this.layoutDoc.onChildClick); @computed get marginX() { return NumCast(this.layoutDoc.caption_xMargin, 50); } - captionWidth = () => this.props.PanelWidth() - 2 * this.marginX; + captionWidth = () => this._props.PanelWidth() - 2 * this.marginX; @computed get content() { const index = NumCast(this.layoutDoc._carousel_index); const curDoc = this.childLayoutPairs?.[index]; - const captionProps = { ...this.props, NativeScaling: returnOne, PanelWidth: this.captionWidth, fieldKey: 'caption', setHeight: undefined, setContentView: undefined }; - const show_captions = StrCast(this.layoutDoc._layout_showCaption); + const captionProps = { ...this._props, NativeScaling: returnOne, PanelWidth: this.captionWidth, fieldKey: 'caption', setHeight: undefined, setContentView: undefined }; + const carouselShowsCaptions = StrCast(this.layoutDoc._layout_showCaption); return !(curDoc?.layout instanceof Doc) ? null : ( <> <div className="collectionCarouselView-image" key="image"> <DocumentView - {...this.props} + {...this._props} NativeWidth={returnZero} NativeHeight={returnZero} - setContentView={undefined} - onDoubleClick={this.onContentDoubleClick} - onClick={this.onContentClick} - isDocumentActive={this.props.childDocumentsActive?.() ? this.props.isDocumentActive : this.props.isContentActive} - isContentActive={this.props.childContentsActive ?? this.props.isContentActive() === false ? returnFalse : emptyFunction} - hideCaptions={show_captions ? true : false} - renderDepth={this.props.renderDepth + 1} - LayoutTemplate={this.props.childLayoutTemplate} - LayoutTemplateString={this.props.childLayoutString} + layout_fitWidth={undefined} + setContentViewBox={undefined} + onDoubleClickScript={this.onContentDoubleClick} + onClickScript={this.onContentClick} + isDocumentActive={this._props.childDocumentsActive?.() ? this._props.isDocumentActive : this._props.isContentActive} + isContentActive={this._props.childContentsActive ?? this._props.isContentActive() === false ? returnFalse : emptyFunction} + hideCaptions={!!carouselShowsCaptions} // hide captions if the carousel is configured to show the captions + renderDepth={this._props.renderDepth + 1} + LayoutTemplate={this._props.childLayoutTemplate} + LayoutTemplateString={this._props.childLayoutString} Document={curDoc.layout} - DataDoc={curDoc.layout.resolvedDataDoc as Doc} + TemplateDataDocument={DocCast(curDoc.layout.resolvedDataDoc)} PanelHeight={this.panelHeight} - bringToFront={returnFalse} /> </div> - <div - className="collectionCarouselView-caption" - key="caption" - onWheel={StopEvent} - style={{ - display: show_captions ? undefined : 'none', - borderRadius: this.props.styleProvider?.(this.layoutDoc, captionProps, StyleProp.BorderRounding), - marginRight: this.marginX, - marginLeft: this.marginX, - width: `calc(100% - ${this.marginX * 2}px)`, - }}> - <FormattedTextBox key={index} {...captionProps} fieldKey={show_captions} styleProvider={this.captionStyleProvider} Document={curDoc.layout} DataDoc={undefined} /> - </div> + {!carouselShowsCaptions ? null : ( + <div + className="collectionCarouselView-caption" + key="caption" + onWheel={StopEvent} + style={{ + borderRadius: this._props.styleProvider?.(this.layoutDoc, captionProps, StyleProp.BorderRounding), + marginRight: this.marginX, + marginLeft: this.marginX, + width: `calc(100% - ${this.marginX * 2}px)`, + }}> + <FormattedTextBox key={index} {...captionProps} fieldKey={carouselShowsCaptions} styleProvider={this.captionStyleProvider} Document={curDoc.layout} TemplateDataDocument={undefined} /> + </div> + )} </> ); } @@ -109,11 +116,11 @@ export class CollectionCarouselView extends CollectionSubView() { className="collectionCarouselView-outer" ref={this.createDashEventsTarget} style={{ - background: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor), - color: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Color), + background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor), + color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color), }}> {this.content} - {this.props.Document._chromeHidden ? null : this.buttons} + {this.Document._chromeHidden ? null : this.buttons} </div> ); } diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss index c0530ab81..a747ef45f 100644 --- a/src/client/views/collections/CollectionDockingView.scss +++ b/src/client/views/collections/CollectionDockingView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.scss'; +@import '../global/globalCssVariables.module.scss'; .lm_root { position: relative; @@ -28,10 +28,6 @@ position: relative; z-index: 20; } -.lm_splitter:hover, -.lm_splitter.lm_dragging { - background: orange; -} .lm_splitter.lm_vertical .lm_drag_handle { width: 100%; position: absolute; @@ -56,7 +52,7 @@ // } .lm_header .lm_controls { position: absolute; - right: 3px; + right: 0px; } .lm_header .lm_controls > li { cursor: pointer; @@ -64,16 +60,12 @@ width: 18px; height: 18px; text-align: center; - top: 3px; } .lm_header ul { margin: 0; padding: 0; list-style-type: none; } -.lm_header .lm_tabs { - position: absolute; -} .lm_header .lm_tab { cursor: pointer; float: left; @@ -280,7 +272,7 @@ z-index: 20; } /*# sourceMappingURL=goldenlayout-base.css.map */ -@import '../../../../node_modules/golden-layout/src/css/goldenlayout-dark-theme.css'; +@import './goldenLayoutTheme.css'; .lm_title { -webkit-appearance: none; @@ -329,8 +321,9 @@ } .lm_header .lm_tabs { + position: absolute; overflow-y: hidden; - width: 100%; + width: calc(100% - 5px); } ul.lm_tabs::before { content: ' '; @@ -484,8 +477,6 @@ ul.lm_tabs::before { .collectiondockingview-container { width: 100%; height: 100%; - border-style: solid; - border-width: $COLLECTION_BORDER_WIDTH; position: absolute; top: 0; left: 0; @@ -508,6 +499,7 @@ ul.lm_tabs::before { display: flex; align-content: center; justify-content: center; + background: transparent !important; } .lm_controls > li { @@ -518,7 +510,11 @@ ul.lm_tabs::before { .lm_controls .lm_popout { background-image: unset; - left: -3; + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; + background: #93939347; + z-index: 100; + //left: -3; &:hover { background: gray; color: white !important; @@ -528,7 +524,7 @@ ul.lm_tabs::before { content: '+'; margin: auto; font-size: x-large; - top: -6; + top: -4; position: relative; } .lm_maximise { @@ -681,11 +677,6 @@ ul.lm_tabs::before { height: 8px; } - .flexlayout__tab_button:hover .flexlayout__tab_button_trailing, - .flexlayout__tab_button--selected .flexlayout__tab_button_trailing { - background: transparent url('../../../../node_modules/flexlayout-react/images/close_white.png') no-repeat center; - } - .flexlayout__tab_button_overflow { float: left; width: 20px; @@ -696,7 +687,6 @@ ul.lm_tabs::before { font-size: 10px; color: lightgray; font-family: Arial, sans-serif; - background: transparent url('../../../../node_modules/flexlayout-react/images/more.png') no-repeat left; } .flexlayout__tabset_header { @@ -751,7 +741,6 @@ ul.lm_tabs::before { height: 20px; border: none; outline-width: 0; - background: transparent url('../../../../node_modules/flexlayout-react/images/maximize.png') no-repeat center; } .flexlayout__tab_toolbar_button-max { @@ -759,7 +748,6 @@ ul.lm_tabs::before { height: 20px; border: none; outline-width: 0; - background: transparent url('../../../../node_modules/flexlayout-react/images/restore.png') no-repeat center; } .flexlayout__popup_menu_item { @@ -877,11 +865,6 @@ ul.lm_tabs::before { height: 8px; } - .flexlayout__border_button:hover .flexlayout__border_button_trailing, - .flexlayout__border_button--selected .flexlayout__border_button_trailing { - background: transparent url('../../../../node_modules/flexlayout-react/images/close_white.png') no-repeat center; - } - .flexlayout__border_toolbar_left { position: absolute; display: flex; diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 4873a61ff..87973fd81 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -1,9 +1,10 @@ -import { action, IReactionDisposer, observable, reaction, runInAction } from 'mobx'; +import { action, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import * as ReactDOM from 'react-dom/client'; import * as GoldenLayout from '../../../client/goldenLayout'; import { Doc, DocListCast, Opt } from '../../../fields/Doc'; -import { AclAdmin, AclEdit } from '../../../fields/DocSymbols'; +import { AclAdmin, AclEdit, DocData } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; import { InkTool } from '../../../fields/InkField'; import { List } from '../../../fields/List'; @@ -19,7 +20,8 @@ import { DragManager } from '../../util/DragManager'; import { InteractionUtils } from '../../util/InteractionUtils'; import { ScriptingGlobals } from '../../util/ScriptingGlobals'; import { SelectionManager } from '../../util/SelectionManager'; -import { undoBatch, UndoManager } from '../../util/UndoManager'; +import { SettingsManager } from '../../util/SettingsManager'; +import { undoable, undoBatch, UndoManager } from '../../util/UndoManager'; import { DashboardView } from '../DashboardView'; import { LightboxView } from '../LightboxView'; import { OpenWhere, OpenWhereMod } from '../nodes/DocumentView'; @@ -28,15 +30,13 @@ import { ScriptingRepl } from '../ScriptingRepl'; import { UndoStack } from '../UndoStack'; import './CollectionDockingView.scss'; import { CollectionFreeFormView } from './collectionFreeForm'; -import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView'; +import { CollectionSubView } from './CollectionSubView'; import { TabDocView } from './TabDocView'; -import React = require('react'); -import { SettingsManager } from '../../util/SettingsManager'; const _global = (window /* browser */ || global) /* node */ as any; @observer export class CollectionDockingView extends CollectionSubView() { - @observable public static Instance: CollectionDockingView | undefined; + @observable public static Instance: CollectionDockingView | undefined = undefined; public static makeDocumentConfig(document: Doc, panelName?: string, width?: number, keyValue?: boolean) { return { type: 'react-component', @@ -62,14 +62,16 @@ export class CollectionDockingView extends CollectionSubView() { } private _goldenLayout: any = null; static _highlightStyleSheet: any = addStyleSheet(); - constructor(props: SubCollectionViewProps) { + + constructor(props: any) { super(props); - if (this.props.renderDepth < 0) runInAction(() => (CollectionDockingView.Instance = this)); + makeObservable(this); + if (this._props.renderDepth < 0) CollectionDockingView.Instance = this; //Why is this here? (window as any).React = React; (window as any).ReactDOM = ReactDOM; DragManager.StartWindowDrag = this.StartOtherDrag; - this.rootDoc.myTrails; // this is equivalent to having a prefetchProxy for myTrails which is needed for the My Trails button in the UI which assumes that Doc.ActiveDashboard.myTrails is legit... + this.Document.myTrails; // this is equivalent to having a prefetchProxy for myTrails which is needed for the My Trails button in the UI which assumes that Doc.ActiveDashboard.myTrails is legit... } /** @@ -85,6 +87,7 @@ export class CollectionDockingView extends CollectionSubView() { const dragSource = CollectionDockingView.Instance?._goldenLayout.createDragSource(document.createElement('div'), config); this.tabDragStart(dragSource, finishDrag); dragSource._dragListener.onMouseDown({ pageX: e.pageX, pageY: e.pageY, preventDefault: emptyFunction, button: 0 }); + return true; }; tabItemDropped = () => DragManager.CompleteWindowDrag?.(false); @@ -130,7 +133,7 @@ export class CollectionDockingView extends CollectionSubView() { @undoBatch @action - public static ReplaceTab(document: Doc, panelName: OpenWhereMod, stack: any, addToSplit?: boolean, keyValue?: boolean): boolean { + public static ReplaceTab(document: Doc, mods: OpenWhereMod, stack: any, panelName: string, addToSplit?: boolean, keyValue?: boolean): boolean { const instance = CollectionDockingView.Instance; if (!instance) return false; const newConfig = CollectionDockingView.makeDocumentConfig(document, panelName, undefined, keyValue); @@ -151,7 +154,7 @@ export class CollectionDockingView extends CollectionSubView() { } return false; } - return CollectionDockingView.AddSplit(document, panelName, stack, panelName); + return CollectionDockingView.AddSplit(document, mods, stack, panelName); } @undoBatch @@ -273,8 +276,9 @@ export class CollectionDockingView extends CollectionSubView() { return true; } setupGoldenLayout = async () => { - //const config = StrCast(this.props.Document.dockingConfig, JSON.stringify(DashboardView.resetDashboard(this.props.Document))); - const config = StrCast(this.props.Document.dockingConfig); + if (this._unmounting) return; + //const config = StrCast(this.Document.dockingConfig, JSON.stringify(DashboardView.resetDashboard(this.Document))); + const config = StrCast(this.Document.dockingConfig); if (config) { const matches = config.match(/\"documentId\":\"[a-z0-9-]+\"/g); const docids = matches?.map(m => m.replace('"documentId":"', '').replace('"', '')) ?? []; @@ -310,6 +314,7 @@ export class CollectionDockingView extends CollectionSubView() { }; componentDidMount: () => void = async () => { + this._unmounting = false; if (this._containerRef.current) { this._lightboxReactionDisposer = reaction( () => LightboxView.LightboxDoc, @@ -317,7 +322,7 @@ export class CollectionDockingView extends CollectionSubView() { ); new _global.ResizeObserver(this.onResize).observe(this._containerRef.current); this._reactionDisposer = reaction( - () => StrCast(this.props.Document.dockingConfig), + () => StrCast(this.Document.dockingConfig), config => { if (!this._goldenLayout || this._ignoreStateChange !== config) { // bcz: TODO! really need to diff config with ignoreStateChange and modify the current goldenLayout instead of building a new one. @@ -327,7 +332,7 @@ export class CollectionDockingView extends CollectionSubView() { } ); reaction( - () => this.props.PanelWidth(), + () => this._props.PanelWidth(), width => !this._goldenLayout && width > 20 && setTimeout(() => this.setupGoldenLayout()), // need to wait for the collectiondockingview-container to have it's width/height since golden layout reads that to configure its windows { fireImmediately: true } ); @@ -344,7 +349,9 @@ export class CollectionDockingView extends CollectionSubView() { } }; + _unmounting = false; componentWillUnmount: () => void = () => { + this._unmounting = true; try { this._goldenLayout.unbind('stackCreated', this.stackCreated); this._goldenLayout.unbind('tabDestroyed', this.tabDestroyed); @@ -374,14 +381,14 @@ export class CollectionDockingView extends CollectionSubView() { .map(id => DocServer.GetCachedRefField(id)) .filter(f => f) .map(f => f as Doc); - const changesMade = this.props.Document.dockingConfig !== json; + const changesMade = this.Document.dockingConfig !== json; if (changesMade) { if (![AclAdmin, AclEdit].includes(GetEffectiveAcl(this.dataDoc))) { this.layoutDoc.dockingConfig = json; this.layoutDoc.data = new List<Doc>(docs); } else { - Doc.SetInPlace(this.rootDoc, 'dockingConfig', json, true); - Doc.SetInPlace(this.rootDoc, 'data', new List<Doc>(docs), true); + Doc.SetInPlace(this.Document, 'dockingConfig', json, true); + Doc.SetInPlace(this.Document, 'data', new List<Doc>(docs), true); } } this._flush?.end(); @@ -406,8 +413,9 @@ export class CollectionDockingView extends CollectionSubView() { window.addEventListener('mouseup', this.onPointerUp); if (!htmlTarget.closest('*.lm_content') && (htmlTarget.closest('*.lm_tab') || htmlTarget.closest('*.lm_stack'))) { const className = typeof htmlTarget.className === 'string' ? htmlTarget.className : ''; - if (className.includes('lm_maximise')) this._flush = UndoManager.StartBatch('tab maximize'); - else { + if (className.includes('lm_maximise')) { + // this._flush = UndoManager.StartBatch('tab maximize'); + } else { const tabTarget = (e.target as HTMLElement)?.parentElement?.className.includes('lm_tab') ? (e.target as HTMLElement).parentElement : (e.target as HTMLElement); const map = Array.from(this.tabMap).find(tab => tab.element[0] === tabTarget); if (map?.DashDoc && DocumentManager.Instance.getFirstDocumentView(map.DashDoc)) { @@ -423,7 +431,7 @@ export class CollectionDockingView extends CollectionSubView() { }; public CaptureThumbnail() { - const content = this.props.DocumentView?.()?.ContentDiv; + const content = this.DocumentView?.()?.ContentDiv; if (content) { const _width = Number(getComputedStyle(content).width.replace('px', '')); const _height = Number(getComputedStyle(content).height.replace('px', '')); @@ -441,7 +449,7 @@ export class CollectionDockingView extends CollectionSubView() { if (clone) { const cloned = await Doc.MakeClone(doc); Array.from(cloned.map.entries()).map(entry => (json = json.replace(entry[0], entry[1][Id]))); - Doc.GetProto(cloned.clone).dockingConfig = json; + cloned.clone[DocData].dockingConfig = json; return DashboardView.openDashboard(cloned.clone); } const matches = json.match(/\"documentId\":\"[a-z0-9-]+\"/g); @@ -455,7 +463,7 @@ export class CollectionDockingView extends CollectionSubView() { const newtab = origtabdocs.length ? Doc.MakeCopy(origtab, true, undefined, true) : Doc.MakeEmbedding(origtab); const newtabdocs = origtabdocs.map(origtabdoc => Doc.MakeEmbedding(origtabdoc)); if (newtabdocs.length) { - Doc.GetProto(newtab).data = new List<Doc>(newtabdocs); + newtab[DocData].data = new List<Doc>(newtabdocs); newtabdocs.forEach(ntab => Doc.SetContainer(ntab, newtab)); } json = json.replace(origtab[Id], newtab[Id]); @@ -463,6 +471,7 @@ export class CollectionDockingView extends CollectionSubView() { }); const copy = Docs.Create.DockDocument(newtabs, json, { title: incrementTitleCopy(StrCast(doc.title)) }); DashboardView.SetupDashboardTrails(copy); + DashboardView.SetupDashboardCalendars(copy); // Zaul TODO: needed? return DashboardView.openDashboard(copy); } @@ -470,21 +479,21 @@ export class CollectionDockingView extends CollectionSubView() { stateChanged = () => { this._ignoreStateChange = JSON.stringify(this._goldenLayout.toConfig()); const json = JSON.stringify(this._goldenLayout.toConfig()); - const changesMade = this.props.Document.dockingConfig !== json; + const changesMade = this.Document.dockingConfig !== json; return changesMade; }; tabDestroyed = (tab: any) => { this._flush = this._flush ?? UndoManager.StartBatch('tab movement'); if (tab.DashDoc && ![DocumentType.PRES].includes(tab.DashDoc?.type) && !tab.contentItem.config.props.keyValue) { - Doc.AddDocToList(Doc.MyHeaderBar, 'data', tab.DashDoc); + Doc.AddDocToList(Doc.MyHeaderBar, 'data', tab.DashDoc, undefined, undefined, true); // if you close a tab that is not embedded somewhere else (an embedded Doc can be opened simultaneously in a tab), then add the tab to recently closed - if (tab.DashDoc.embedContainer === this.rootDoc) tab.DashDoc.embedContainer = undefined; + if (tab.DashDoc.embedContainer === this.Document) tab.DashDoc.embedContainer = undefined; if (!tab.DashDoc.embedContainer) Doc.AddDocToList(Doc.MyRecentlyClosed, 'data', tab.DashDoc, undefined, true, true); - Doc.RemoveDocFromList(Doc.GetProto(tab.DashDoc), 'proto_embeddings', tab.DashDoc); + Doc.RemoveDocFromList(tab.DashDoc[DocData], 'proto_embeddings', tab.DashDoc); } if (CollectionDockingView.Instance) { - const dview = CollectionDockingView.Instance.props.Document; + const dview = CollectionDockingView.Instance.Document; const fieldKey = CollectionDockingView.Instance.props.fieldKey; Doc.RemoveDocFromList(dview, fieldKey, tab.DashDoc); this.tabMap.delete(tab); @@ -504,34 +513,37 @@ export class CollectionDockingView extends CollectionSubView() { if (dashboard && e.target === stack.header?.element[0] && e.button === 2) { dashboard['pane-count'] = NumCast(dashboard['pane-count']) + 1; const docToAdd = Docs.Create.FreeformDocument([], { - _width: this.props.PanelWidth(), - _height: this.props.PanelHeight(), + _width: this._props.PanelWidth(), + _height: this._props.PanelHeight(), _freeform_backgroundGrid: true, _layout_fitWidth: true, title: `Untitled Tab ${NumCast(dashboard['pane-count'])}`, }); - Doc.AddDocToList(Doc.MyHeaderBar, 'data', docToAdd); - inheritParentAcls(this.rootDoc, docToAdd, false); + Doc.AddDocToList(Doc.MyHeaderBar, 'data', docToAdd, undefined, undefined, true); + inheritParentAcls(this.Document, docToAdd, false); CollectionDockingView.AddSplit(docToAdd, OpenWhereMod.none, stack); } }); - let addNewDoc = action(() => { - const dashboard = Doc.ActiveDashboard; - if (dashboard) { - dashboard['pane-count'] = NumCast(dashboard['pane-count']) + 1; - const docToAdd = Docs.Create.FreeformDocument([], { - _width: this.props.PanelWidth(), - _height: this.props.PanelHeight(), - _layout_fitWidth: true, - _freeform_backgroundGrid: true, - title: `Untitled Tab ${NumCast(dashboard['pane-count'])}`, - }); - Doc.AddDocToList(Doc.MyHeaderBar, 'data', docToAdd); - inheritParentAcls(this.dataDoc, docToAdd, false); - CollectionDockingView.AddSplit(docToAdd, OpenWhereMod.none, stack); - } - }); + let addNewDoc = undoable( + action(() => { + const dashboard = Doc.ActiveDashboard; + if (dashboard) { + dashboard['pane-count'] = NumCast(dashboard['pane-count']) + 1; + const docToAdd = Docs.Create.FreeformDocument([], { + _width: this._props.PanelWidth(), + _height: this._props.PanelHeight(), + _layout_fitWidth: true, + _freeform_backgroundGrid: true, + title: `Untitled Tab ${NumCast(dashboard['pane-count'])}`, + }); + Doc.AddDocToList(Doc.MyHeaderBar, 'data', docToAdd, undefined, undefined, true); + inheritParentAcls(this.dataDoc, docToAdd, false); + CollectionDockingView.AddSplit(docToAdd, OpenWhereMod.none, stack); + } + }), + 'add new tab' + ); stack.header?.controlsContainer .find('.lm_close') //get the close icon @@ -567,15 +579,15 @@ export class CollectionDockingView extends CollectionSubView() { }; render() { - const href = ImageCast(this.rootDoc.thumb)?.url?.href; - return this.props.renderDepth > -1 ? ( + const href = ImageCast(this.Document.thumb)?.url?.href; + return this._props.renderDepth > -1 ? ( <div> {href ? ( <img style={{ background: 'white', top: 0, position: 'absolute' }} src={href} // + '?d=' + (new Date()).getTime()} - width={this.props.PanelWidth()} - height={this.props.PanelHeight()} + width={this._props.PanelWidth()} + height={this._props.PanelHeight()} /> ) : ( <p>nested dashboards has no thumbnail</p> @@ -589,7 +601,7 @@ export class CollectionDockingView extends CollectionSubView() { ScriptingGlobals.add( function openInLightbox(doc: any) { - LightboxView.AddDocTab(doc, OpenWhere.lightbox); + LightboxView.Instance.AddDocTab(doc, OpenWhere.lightbox); }, 'opens up document in a lightbox', '(doc: any)' @@ -603,7 +615,7 @@ ScriptingGlobals.add( // prettier-ignore switch (doc) { case '<ScriptingRepl />': return OverlayView.Instance.addWindow(<ScriptingRepl />, { x: 300, y: 100, width: 200, height: 200, title: 'Scripting REPL' }); - case "<UndoStack>": return OverlayView.Instance.addWindow(<UndoStack />, { x: 300, y: 100, width: 200, height: 200, title: 'Scripting REPL' }); + case "<UndoStack />": return OverlayView.Instance.addWindow(<UndoStack />, { x: 300, y: 100, width: 200, height: 200, title: 'Undo stack' }); } Doc.AddToMyOverlay(doc); } @@ -618,6 +630,3 @@ ScriptingGlobals.add( 'opens up document in screen overlay layer', '(doc: any)' ); -ScriptingGlobals.add(function useRightSplit(doc: any, addToRightSplit?: boolean) { - CollectionDockingView.ReplaceTab(doc, OpenWhereMod.right, undefined, addToRightSplit); -}); diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx index 06522b85e..41c5d5b42 100644 --- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx +++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx @@ -1,13 +1,12 @@ -import React = require('react'); import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, observable, runInAction } from 'mobx'; +import { action, computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; +import { emptyFunction, numberRange, returnEmptyString, returnFalse, setupMoveUpEvents } from '../../../Utils'; import { Doc, DocListCast } from '../../../fields/Doc'; import { DocData } from '../../../fields/DocSymbols'; -import { Id } from '../../../fields/FieldSymbols'; import { PastelSchemaPalette, SchemaHeaderField } from '../../../fields/SchemaHeaderField'; import { ScriptField } from '../../../fields/ScriptField'; -import { emptyFunction, numberRange, returnEmptyString, returnFalse, setupMoveUpEvents } from '../../../Utils'; import { Docs } from '../../documents/Documents'; import { DragManager } from '../../util/DragManager'; import { CompileScript } from '../../util/Scripting'; @@ -15,12 +14,10 @@ import { SnappingManager } from '../../util/SnappingManager'; import { Transform } from '../../util/Transform'; import { undoBatch } from '../../util/UndoManager'; import { EditableView } from '../EditableView'; +import { ObservableReactComponent } from '../ObservableReactComponent'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; import { CollectionStackingView } from './CollectionStackingView'; import './CollectionStackingView.scss'; -const higflyout = require('@hig/flyout'); -export const { anchorPoints } = higflyout; -export const Flyout = higflyout.default; interface CMVFieldRowProps { rows: () => number; @@ -42,7 +39,12 @@ interface CMVFieldRowProps { } @observer -export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowProps> { +export class CollectionMasonryViewFieldRow extends ObservableReactComponent<CMVFieldRowProps> { + constructor(props: any) { + super(props); + makeObservable(this); + } + @observable private _background = 'inherit'; @observable private _createEmbeddingSelected: boolean = false; @observable private heading: string = ''; @@ -50,13 +52,13 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr @observable private collapsed: boolean = false; @observable private _paletteOn = false; private set _heading(value: string) { - runInAction(() => this.props.headingObject && (this.props.headingObject.heading = this.heading = value)); + runInAction(() => this._props.headingObject && (this._props.headingObject.heading = this.heading = value)); } private set _color(value: string) { - runInAction(() => this.props.headingObject && (this.props.headingObject.color = this.color = value)); + runInAction(() => this._props.headingObject && (this._props.headingObject.color = this.color = value)); } private set _collapsed(value: boolean) { - runInAction(() => this.props.headingObject && (this.props.headingObject.collapsed = this.collapsed = value)); + runInAction(() => this._props.headingObject && (this._props.headingObject.collapsed = this.collapsed = value)); } private _dropDisposer?: DragManager.DragDropDisposer; @@ -68,28 +70,28 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr this._dropDisposer?.(); if (ele) { this._ele = ele; - this.props.observeHeight(ele); - this._dropDisposer = DragManager.MakeDropTarget(ele, this.rowDrop.bind(this)); + this._props.observeHeight(ele); + this._dropDisposer = DragManager.MakeDropTarget(ele, this.rowDrop.bind(this), this._props.Document); } }; @action componentDidMount() { - this.heading = this.props.headingObject?.heading || ''; - this.color = this.props.headingObject?.color || '#f1efeb'; - this.collapsed = this.props.headingObject?.collapsed || false; + this.heading = this._props.headingObject?.heading || ''; + this.color = this._props.headingObject?.color || '#f1efeb'; + this.collapsed = this._props.headingObject?.collapsed || false; } componentWillUnmount() { - this.props.unobserveHeight(this._ele); + this._props.unobserveHeight(this._ele); } getTrueHeight = () => { if (this.collapsed) { - this.props.setDocHeight(this.heading, 20); + this._props.setDocHeight(this.heading, 20); } else { const rawHeight = this._contRef.current!.getBoundingClientRect().height + 15; //+ 15 accounts for the group header - const transformScale = this.props.screenToLocalTransform().Scale; + const transformScale = this._props.screenToLocalTransform().Scale; const trueHeight = rawHeight * transformScale; - this.props.setDocHeight(this.heading, trueHeight); + this._props.setDocHeight(this.heading, trueHeight); } }; @@ -97,10 +99,10 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr rowDrop = action((e: Event, de: DragManager.DropEvent) => { this._createEmbeddingSelected = false; if (de.complete.docDragData) { - const key = this.props.pivotField; + const key = this._props.pivotField; const castedValue = this.getValue(this.heading); const onLayoutDoc = this.onLayoutDoc(key); - if (this.props.parent.onInternalDrop(e, de)) { + if (this._props.parent.onInternalDrop(e, de)) { de.complete.docDragData.droppedDocuments.forEach(d => Doc.SetInPlace(d, key, castedValue, !onLayoutDoc)); } return true; @@ -119,15 +121,15 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr @action headingChanged = (value: string, shiftDown?: boolean) => { this._createEmbeddingSelected = false; - const key = this.props.pivotField; + const key = this._props.pivotField; const castedValue = this.getValue(value); if (castedValue) { - if (this.props.parent.colHeaderData) { - if (this.props.parent.colHeaderData.map(i => i.heading).indexOf(castedValue.toString()) > -1) { + if (this._props.parent.colHeaderData) { + if (this._props.parent.colHeaderData.map(i => i.heading).indexOf(castedValue.toString()) > -1) { return false; } } - this.props.docList.forEach(d => Doc.SetInPlace(d, key, castedValue, true)); + this._props.docList.forEach(d => Doc.SetInPlace(d, key, castedValue, true)); this._heading = castedValue.toString(); return true; } @@ -140,7 +142,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr this._color = color; }; - pointerEnteredRow = action(() => SnappingManager.GetIsDragging() && (this._background = '#b4b4b4')); + pointerEnteredRow = action(() => SnappingManager.IsDragging && (this._background = '#b4b4b4')); @action pointerLeaveRow = () => { @@ -152,24 +154,24 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr addDocument = (value: string, shiftDown?: boolean, forceEmptyNote?: boolean) => { if (!value && !forceEmptyNote) return false; this._createEmbeddingSelected = false; - const key = this.props.pivotField; + const key = this._props.pivotField; const newDoc = Docs.Create.TextDocument('', { _layout_autoHeight: true, _width: 200, _layout_fitWidth: true, title: value }); const onLayoutDoc = this.onLayoutDoc(key); - FormattedTextBox.SelectOnLoad = newDoc[Id]; + FormattedTextBox.SetSelectOnLoad(newDoc); FormattedTextBox.SelectOnLoadChar = value; - (onLayoutDoc ? newDoc : newDoc[DocData])[key] = this.getValue(this.props.heading); - const docs = this.props.parent.childDocList; - return docs ? (docs.splice(0, 0, newDoc) ? true : false) : this.props.parent.props.addDocument?.(newDoc) || false; // should really extend addDocument to specify insertion point (at beginning of list) + (onLayoutDoc ? newDoc : newDoc[DocData])[key] = this.getValue(this._props.heading); + const docs = this._props.parent.childDocList; + return docs ? (docs.splice(0, 0, newDoc) ? true : false) : this._props.parent._props.addDocument?.(newDoc) || false; // should really extend addDocument to specify insertion point (at beginning of list) }; deleteRow = undoBatch( action(() => { this._createEmbeddingSelected = false; - const key = this.props.pivotField; - this.props.docList.forEach(d => Doc.SetInPlace(d, key, undefined, true)); - if (this.props.parent.colHeaderData && this.props.headingObject) { - const index = this.props.parent.colHeaderData.indexOf(this.props.headingObject); - this.props.parent.colHeaderData.splice(index, 1); + const key = this._props.pivotField; + this._props.docList.forEach(d => Doc.SetInPlace(d, key, undefined, true)); + if (this._props.parent.colHeaderData && this._props.headingObject) { + const index = this._props.parent.colHeaderData.indexOf(this._props.headingObject); + this._props.parent.colHeaderData.splice(index, 1); } }) ); @@ -182,8 +184,8 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr }; headerMove = (e: PointerEvent) => { - const embedding = Doc.MakeEmbedding(this.props.Document); - const key = this.props.pivotField; + const embedding = Doc.MakeEmbedding(this._props.Document); + const key = this._props.pivotField; let value = this.getValue(this.heading); value = typeof value === 'string' ? `"${value}"` : value; const script = `return doc.${key} === ${value}`; @@ -198,7 +200,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr @action headerDown = (e: React.PointerEvent<HTMLDivElement>) => { if (e.button === 0 && !e.ctrlKey) { - setupMoveUpEvents(this, e, this.headerMove, emptyFunction, e => !this.props.chromeHidden && this.collapseSection(e)); + setupMoveUpEvents(this, e, this.headerMove, emptyFunction, e => !this._props.chromeHidden && this.collapseSection(e)); this._createEmbeddingSelected = false; } }; @@ -207,7 +209,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr * Returns true if a key is on the layout doc of the documents in the collection. */ onLayoutDoc = (key: string): boolean => { - DocListCast(this.props.parent.Document.data).forEach(doc => { + DocListCast(this._props.parent.Document.data).forEach(doc => { if (Doc.Get(doc, key, true)) return true; }); return false; @@ -246,37 +248,25 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr toggleEmbedding = action(() => (this._createEmbeddingSelected = true)); toggleVisibility = () => (this._collapsed = !this.collapsed); - renderMenu = () => { - const selected = this._createEmbeddingSelected; - return ( - <div className="collectionStackingView-optionPicker"> - <div className="optionOptions"> - <div className={'optionPicker' + (selected === true ? ' active' : '')} onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, this.deleteRow)}> - Delete - </div> - </div> - </div> - ); - }; @action textCallback = (char: string) => { return this.addDocument('', false); }; @computed get contentLayout() { - const rows = Math.max(1, Math.min(this.props.docList.length, Math.floor((this.props.parent.props.PanelWidth() - 2 * this.props.parent.xMargin) / (this.props.parent.columnWidth + this.props.parent.gridGap)))); - const showChrome = !this.props.chromeHidden; - const stackPad = showChrome ? `0px ${this.props.parent.xMargin}px` : `${this.props.parent.yMargin}px ${this.props.parent.xMargin}px 0px ${this.props.parent.xMargin}px `; + const rows = Math.max(1, Math.min(this._props.docList.length, Math.floor((this._props.parent._props.PanelWidth() - 2 * this._props.parent.xMargin) / (this._props.parent.columnWidth + this._props.parent.gridGap)))); + const showChrome = !this._props.chromeHidden; + const stackPad = showChrome ? `0px ${this._props.parent.xMargin}px` : `${this._props.parent.yMargin}px ${this._props.parent.xMargin}px 0px ${this._props.parent.xMargin}px `; return this.collapsed ? null : ( <div style={{ position: 'relative' }}> - {this.props.showHandle && this.props.parent.props.isContentActive() ? this.props.parent.columnDragger : null} + {this._props.showHandle && this._props.parent._props.isContentActive() ? this._props.parent.columnDragger : null} {showChrome ? ( <div className="collectionStackingView-addDocumentButton" style={ { //width: style.columnWidth / style.numGroupColumns, - //padding: `${NumCast(this.props.parent.layoutDoc._yPadding, this.props.parent.yMargin)}px 0px 0px 0px`, + //padding: `${NumCast(this._props.parent.layoutDoc._yPadding, this._props.parent.yMargin)}px 0px 0px 0px`, } }> <EditableView GetValue={returnEmptyString} SetValue={this.addDocument} textCallback={this.textCallback} contents={'+ NEW'} /> @@ -287,25 +277,25 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr ref={this._contRef} style={{ padding: stackPad, - minHeight: this.props.showHandle && this.props.parent.props.isContentActive() ? '10px' : undefined, - width: this.props.parent.NodeWidth, - gridGap: this.props.parent.gridGap, - gridTemplateColumns: numberRange(rows).reduce((list: string, i: any) => list + ` ${this.props.parent.columnWidth}px`, ''), + minHeight: this._props.showHandle && this._props.parent._props.isContentActive() ? '10px' : undefined, + width: this._props.parent.NodeWidth, + gridGap: this._props.parent.gridGap, + gridTemplateColumns: numberRange(rows).reduce((list: string, i: any) => list + ` ${this._props.parent.columnWidth}px`, ''), }}> - {this.props.parent.children(this.props.docList)} + {this._props.parent.children(this._props.docList)} </div> </div> ); } @computed get headingView() { - const noChrome = this.props.chromeHidden; - const key = this.props.pivotField; - const evContents = this.heading ? this.heading : this.props.type && this.props.type === 'number' ? '0' : `NO ${key.toUpperCase()} VALUE`; + const noChrome = this._props.chromeHidden; + const key = this._props.pivotField; + const evContents = this.heading ? this.heading : this._props.type && this._props.type === 'number' ? '0' : `NO ${key.toUpperCase()} VALUE`; const editableHeaderView = <EditableView GetValue={() => evContents} SetValue={this.headingChanged} contents={evContents} oneLine={true} />; - return this.props.Document.miniHeaders ? ( + return this._props.Document.miniHeaders ? ( <div className="collectionStackingView-miniHeader">{editableHeaderView}</div> - ) : !this.props.headingObject ? null : ( + ) : !this._props.headingObject ? null : ( <div className="collectionStackingView-sectionHeader" ref={this._headerRef}> <div className="collectionStackingView-sectionHeader-subCont" @@ -338,11 +328,9 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr )} {noChrome || evContents === `NO ${key.toUpperCase()} VALUE` ? null : ( <div className="collectionStackingView-sectionOptions" onPointerDown={e => e.stopPropagation()}> - <Flyout anchorPoint={anchorPoints.RIGHT_TOP} content={this.renderMenu()}> - <button className="collectionStackingView-sectionOptionButton"> - <FontAwesomeIcon icon="ellipsis-v" size="lg" /> - </button> - </Flyout> + <button className="collectionStackingView-sectionOptionButton" onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, this.deleteRow)}> + <FontAwesomeIcon icon="trash" size="lg" /> + </button> </div> )} </div> @@ -352,7 +340,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr render() { const background = this._background; return ( - <div className="collectionStackingView-masonrySection" style={{ width: this.props.parent.NodeWidth, background }} ref={this.createRowDropRef} onPointerEnter={this.pointerEnteredRow} onPointerLeave={this.pointerLeaveRow}> + <div className="collectionStackingView-masonrySection" style={{ width: this._props.parent.NodeWidth, background }} ref={this.createRowDropRef} onPointerEnter={this.pointerEnteredRow} onPointerLeave={this.pointerLeaveRow}> {this.headingView} {this.contentLayout} </div> diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss index 6eeccc94e..5d46649b2 100644 --- a/src/client/views/collections/CollectionMenu.scss +++ b/src/client/views/collections/CollectionMenu.scss @@ -1,4 +1,4 @@ -@import "../global/globalCssVariables"; +@import '../global/globalCssVariables.module.scss'; .collectionMenu-container { display: flex; @@ -19,4 +19,4 @@ display: flex; flex-direction: row; } -}
\ No newline at end of file +} diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index ec9d86c1a..0f90818ef 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -1,74 +1,56 @@ -import React = require('react'); -import { IconProp } from '@fortawesome/fontawesome-svg-core'; -import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome'; -import { Tooltip } from '@material-ui/core'; +import * as React from 'react'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Tooltip } from '@mui/material'; import { Toggle, ToggleType, Type } from 'browndash-components'; -import { Lambda, action, computed, observable, reaction, runInAction } from 'mobx'; +import { action, computed, Lambda, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; -import { ColorState } from 'react-color'; -import { Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents } from '../../../Utils'; import { Doc, DocListCast, Opt } from '../../../fields/Doc'; -import { Id } from '../../../fields/FieldSymbols'; -import { InkTool } from '../../../fields/InkField'; import { List } from '../../../fields/List'; import { ObjectField } from '../../../fields/ObjectField'; import { RichTextField } from '../../../fields/RichTextField'; -import { listSpec } from '../../../fields/Schema'; import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../../fields/Types'; -import { Document } from '../../../fields/documentSchemas'; -import { GestureUtils } from '../../../pen-gestures/GestureUtils'; +import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents, Utils } from '../../../Utils'; import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes'; -import { Docs } from '../../documents/Documents'; import { DragManager } from '../../util/DragManager'; -import { ScriptingGlobals } from '../../util/ScriptingGlobals'; import { SelectionManager } from '../../util/SelectionManager'; import { SettingsManager } from '../../util/SettingsManager'; import { Transform } from '../../util/Transform'; import { undoBatch } from '../../util/UndoManager'; import { AntimodeMenu } from '../AntimodeMenu'; import { EditableView } from '../EditableView'; -import { GestureOverlay } from '../GestureOverlay'; -import { ActiveFillColor, ActiveInkColor, SetActiveArrowEnd, SetActiveArrowStart, SetActiveBezierApprox, SetActiveFillColor, SetActiveInkColor, SetActiveInkWidth } from '../InkingStroke'; -import { LightboxView } from '../LightboxView'; import { MainView } from '../MainView'; +import { DocumentView, DocumentViewInternal, returnEmptyDocViewList } from '../nodes/DocumentView'; import { DefaultStyleProvider } from '../StyleProvider'; -import { CollectionFreeFormDocumentView } from '../nodes/CollectionFreeFormDocumentView'; -import { DocumentView, DocumentViewInternal, OpenWhereMod } from '../nodes/DocumentView'; -import { RichTextMenu } from '../nodes/formattedText/RichTextMenu'; -import { CollectionDockingView } from './CollectionDockingView'; -import './CollectionMenu.scss'; -import { COLLECTION_BORDER_WIDTH } from './CollectionView'; -import { TabDocView } from './TabDocView'; -import { CollectionFreeFormView } from './collectionFreeForm'; import { CollectionLinearView } from './collectionLinear'; -import { media_state } from '../nodes/AudioBox'; +import './CollectionMenu.scss'; +import { DocData } from '../../../fields/DocSymbols'; interface CollectionMenuProps { panelHeight: () => number; panelWidth: () => number; + toggleTopBar: () => void; + topBarHeight: () => number; } @observer export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> { @observable static Instance: CollectionMenu; - - @observable SelectedCollection: DocumentView | undefined; - @observable FieldKey: string; + @observable SelectedCollection: DocumentView | undefined = undefined; private _docBtnRef = React.createRef<HTMLDivElement>(); constructor(props: any) { super(props); - this.FieldKey = ''; - runInAction(() => (CollectionMenu.Instance = this)); + makeObservable(this); + CollectionMenu.Instance = this; this._canFade = false; // don't let the inking menu fade away - runInAction(() => (this.Pinned = Cast(Doc.UserDoc()['menuCollections-pinned'], 'boolean', true))); + this.Pinned = Cast(Doc.UserDoc()['menuCollections-pinned'], 'boolean', true); this.jumpTo(300, 300); } componentDidMount() { reaction( - () => SelectionManager.Views().length && SelectionManager.Views()[0], + () => SelectionManager.Views.lastElement(), view => view && this.SetSelection(view) ); } @@ -87,20 +69,11 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> { }; @action - toggleTopBar = () => { - if (SettingsManager.headerBarHeight > 0) { - SettingsManager.headerBarHeight = 0; - } else { - SettingsManager.headerBarHeight = 60; - } - }; - - @action toggleProperties = () => { if (MainView.Instance.propertiesWidth() > 0) { - SettingsManager.propertiesWidth = 0; + SettingsManager.Instance.propertiesWidth = 0; } else { - SettingsManager.propertiesWidth = 300; + SettingsManager.Instance.propertiesWidth = 300; } }; @@ -113,29 +86,25 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> { @computed get contMenuButtons() { const selDoc = Doc.MyContextMenuBtns; return !(selDoc instanceof Doc) ? null : ( - <div className="collectionMenu-contMenuButtons" ref={this._docBtnRef} style={{ height: this.props.panelHeight() }}> + <div className="collectionMenu-contMenuButtons" ref={this._docBtnRef} style={{ height: this._props.panelHeight() }}> <CollectionLinearView Document={selDoc} - DataDoc={undefined} + docViewPath={returnEmptyDocViewList} fieldKey="data" dropAction="embed" - setHeight={returnFalse} styleProvider={DefaultStyleProvider} - rootSelected={returnTrue} - bringToFront={emptyFunction} select={emptyFunction} isContentActive={returnTrue} isAnyChildContentActive={returnFalse} isSelected={returnFalse} - docViewPath={returnEmptyDoclist} moveDocument={returnFalse} addDocument={returnFalse} addDocTab={DocumentViewInternal.addDocTabFunc} pinToPres={emptyFunction} removeDocument={returnFalse} ScreenToLocalTransform={this.buttonBarXf} - PanelWidth={this.props.panelWidth} - PanelHeight={this.props.panelHeight} + PanelWidth={this._props.panelWidth} + PanelHeight={this._props.panelHeight} renderDepth={0} focus={emptyFunction} whenChildContentsActiveChanged={emptyFunction} @@ -148,10 +117,10 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> { } render() { - const headerIcon = SettingsManager.headerBarHeight > 0 ? 'angle-double-up' : 'angle-double-down'; - const headerTitle = SettingsManager.headerBarHeight > 0 ? 'Close Header Bar' : 'Open Header Bar'; - const propIcon = SettingsManager.propertiesWidth > 0 ? 'angle-double-right' : 'angle-double-left'; - const propTitle = SettingsManager.propertiesWidth > 0 ? 'Close Properties' : 'Open Properties'; + const headerIcon = this.props.topBarHeight() > 0 ? 'angle-double-up' : 'angle-double-down'; + const headerTitle = this.props.topBarHeight() > 0 ? 'Close Header Bar' : 'Open Header Bar'; + const propIcon = SettingsManager.Instance.propertiesWidth > 0 ? 'angle-double-right' : 'angle-double-left'; + const propTitle = SettingsManager.Instance.propertiesWidth > 0 ? 'Close Properties' : 'Open Properties'; const hardCodedButtons = ( <div className={`hardCodedButtons`}> @@ -159,8 +128,8 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> { toggleType={ToggleType.BUTTON} type={Type.PRIM} color={SettingsManager.userColor} - onClick={this.toggleTopBar} - toggleStatus={SettingsManager.headerBarHeight > 0} + onClick={this.props.toggleTopBar} + toggleStatus={this.props.topBarHeight() > 0} icon={<FontAwesomeIcon icon={headerIcon} size="lg" />} tooltip={headerTitle} /> @@ -169,14 +138,13 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> { type={Type.PRIM} color={SettingsManager.userColor} onClick={this.toggleProperties} - toggleStatus={SettingsManager.propertiesWidth > 0} + toggleStatus={SettingsManager.Instance.propertiesWidth > 0} icon={<FontAwesomeIcon icon={propIcon} size="lg" />} tooltip={propTitle} /> </div> ); - // NEW BUTTONS //dash col linear view buttons const contMenuButtons = ( <div @@ -191,21 +159,6 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> { ); return contMenuButtons; - - // const button = <Tooltip title={<div className="dash-tooltip">Pin Menu</div>} key="pin menu" placement="bottom"> - // <button className="antimodeMenu-button" onClick={this.toggleMenuPin} style={{ backgroundColor: "#121721" }}> - // <FontAwesomeIcon icon="thumbtack" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.1s", transform: `rotate(${this.Pinned ? 45 : 0}deg)` }} /> - // </button> - // </Tooltip>; - - // //OLD BUTTONS - // return this.getElement(!this.SelectedCollection ? [/*button*/] : - // [<CollectionViewBaseChrome key="chrome" - // docView={this.SelectedCollection} - // fieldKey={this.SelectedCollection.LayoutFieldKey} - // type={StrCast(this.SelectedCollection?.props.Document._type_collection, CollectionViewType.Invalid) as CollectionViewType} />, - // prop, - // /*button*/]); } } @@ -222,7 +175,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewMenu //(!)?\(\(\(doc.(\w+) && \(doc.\w+ as \w+\).includes\(\"(\w+)\"\) get document() { - return this.props.docView?.props.Document; + return this.props.docView?.Document; } get target() { return this.document; @@ -230,7 +183,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewMenu _templateCommand = { params: ['target', 'source'], title: 'item view', - script: 'self.target.childLayoutTemplate = getDocTemplate(self.source?.[0])', + script: 'this.target.childLayoutTemplate = getDocTemplate(this.source?.[0])', immediate: undoBatch((source: Doc[]) => { let formatStr = source.length && Cast(source[0].text, RichTextField, null)?.Text; try { @@ -252,24 +205,24 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewMenu _narrativeCommand = { params: ['target', 'source'], title: 'child click view', - script: 'self.target.childClickedOpenTemplateView = getDocTemplate(self.source?.[0])', + script: 'this.target.childClickedOpenTemplateView = getDocTemplate(this.source?.[0])', immediate: undoBatch((source: Doc[]) => source.length && (this.target.childClickedOpenTemplateView = Doc.getDocTemplate(source?.[0]))), initialize: emptyFunction, }; _contentCommand = { params: ['target', 'source'], title: 'set content', - script: 'getProto(self.target).data = copyField(self.source);', - immediate: undoBatch((source: Doc[]) => (Doc.GetProto(this.target).data = new List<Doc>(source))), + script: 'getProto(this.target).data = copyField(this.source);', + immediate: undoBatch((source: Doc[]) => (this.target[DocData].data = new List<Doc>(source))), initialize: emptyFunction, }; _onClickCommand = { params: ['target', 'proxy'], title: 'copy onClick', - script: `{ if (self.proxy?.[0]) { - getProto(self.proxy[0]).onClick = copyField(self.target.onClick); - getProto(self.proxy[0]).target = self.target.target; - getProto(self.proxy[0]).source = copyField(self.target.source); + script: `{ if (this.proxy?.[0]) { + getProto(this.proxy[0]).onClick = copyField(this.target.onClick); + getProto(this.proxy[0]).target = this.target.target; + getProto(this.proxy[0]).source = copyField(this.target.source); }}`, immediate: undoBatch((source: Doc[]) => {}), initialize: emptyFunction, @@ -277,7 +230,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewMenu _viewCommand = { params: ['target'], title: 'bookmark view', - script: "self.target._freeform_panX = self['target-freeform_panX']; self.target._freeform_panY = self['target-freeform_panY']; self.target._freeform_scale = self['target_freeform_scale']; gotoFrame(self.target, self['target-currentFrame']);", + script: "this.target._freeform_panX = self['target-freeform_panX']; this.target._freeform_panY = this['target-freeform_panY']; this.target._freeform_scale = this['target_freeform_scale']; gotoFrame(this.target, this['target-currentFrame']);", immediate: undoBatch((source: Doc[]) => { this.target._freeform_panX = 0; this.target._freeform_panY = 0; @@ -294,22 +247,22 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewMenu _clusterCommand = { params: ['target'], title: 'fit content', - script: 'self.target._freeform_fitContentsToBox = !self.target._freeform_fitContentsToBox;', + script: 'this.target._freeform_fitContentsToBox = !this.target._freeform_fitContentsToBox;', immediate: undoBatch((source: Doc[]) => (this.target._freeform_fitContentsToBox = !this.target._freeform_fitContentsToBox)), initialize: emptyFunction, }; _fitContentCommand = { params: ['target'], title: 'toggle clusters', - script: 'self.target._freeform_useClusters = !self.target._freeform_useClusters;', + script: 'this.target._freeform_useClusters = !this.target._freeform_useClusters;', immediate: undoBatch((source: Doc[]) => (this.target._freeform_useClusters = !this.target._freeform_useClusters)), initialize: emptyFunction, }; _saveFilterCommand = { params: ['target'], title: 'save filter', - script: `self.target._childFilters = compareLists(self['target-childFilters'],self.target._childFilters) ? undefined : copyField(self['target-childFilters']); - self.target._searchFilterDocs = compareLists(self['target-searchFilterDocs'],self.target._searchFilterDocs) ? undefined: copyField(self['target-searchFilterDocs']);`, + script: `this.target._childFilters = compareLists(this['target-childFilters'],this.target._childFilters) ? undefined : copyField(this['target-childFilters']); + this.target._searchFilterDocs = compareLists(this['target-searchFilterDocs'],this.target._searchFilterDocs) ? undefined: copyField(this['target-searchFilterDocs']);`, immediate: undoBatch((source: Doc[]) => { this.target._childFilters = undefined; this.target._searchFilterDocs = undefined; @@ -392,57 +345,6 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewMenu this.document._facetWidth = 0; }; - @computed get subChrome() { - switch ( - this.props.docView.props.LayoutTemplateString ? CollectionViewType.Freeform : this.props.type // bcz: ARgh! hack to get menu for tree view outline items - ) { - default: - return this.otherSubChrome; - case CollectionViewType.Invalid: - case CollectionViewType.Freeform: - return <CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={this.props.type === CollectionViewType.Invalid} />; - case CollectionViewType.Stacking: - return <CollectionStackingViewChrome key="collchrome" {...this.props} />; - case CollectionViewType.NoteTaking: - return <CollectionNoteTakingViewChrome key="collchrome" {...this.props} />; - case CollectionViewType.Schema: - return <CollectionSchemaViewChrome key="collchrome" {...this.props} />; - case CollectionViewType.Tree: - return <CollectionTreeViewChrome key="collchrome" {...this.props} />; - case CollectionViewType.Masonry: - return <CollectionStackingViewChrome key="collchrome" {...this.props} />; - case CollectionViewType.Carousel: - case CollectionViewType.Carousel3D: - return <Collection3DCarouselViewChrome key="collchrome" {...this.props} />; - case CollectionViewType.Grid: - return <CollectionGridViewChrome key="collchrome" {...this.props} />; - case CollectionViewType.Docking: - return <CollectionDockingChrome key="collchrome" {...this.props} />; - } - } - - @computed get otherSubChrome() { - const docType = this.props.docView.Document.type; - switch (docType) { - default: - return null; - case DocumentType.IMG: - return <CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={false} isDoc={true} />; - case DocumentType.PDF: - return <CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={false} isDoc={true} />; - case DocumentType.INK: - return <CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={false} isDoc={true} />; - case DocumentType.WEB: - return <CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={false} isDoc={true} />; - case DocumentType.VID: - return <CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={false} isDoc={true} />; - case DocumentType.RTF: - return <CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={this.props.type === CollectionViewType.Invalid} isDoc={true} />; - case DocumentType.MAP: - return <CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={false} isDoc={true} />; - } - } - private dropDisposer?: DragManager.DragDropDisposer; protected createDropTarget = (ele: HTMLDivElement) => { this.dropDisposer?.(); @@ -519,612 +421,11 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewMenu </div> ); } - - @computed get viewModes() { - const excludedViewTypes = [CollectionViewType.Invalid, CollectionViewType.Docking, CollectionViewType.Pile, CollectionViewType.StackedTimeline, CollectionViewType.Linear]; - const isPres: boolean = this.document && this.document.type === DocumentType.PRES; - return isPres ? null : ( - <div className="collectionViewBaseChrome-viewModes"> - <Tooltip title={<div className="dash-tooltip">drop document to apply or drag to create button</div>} placement="bottom"> - <div className="commandEntry-outerDiv" ref={this._viewRef} onPointerDown={this.dragViewDown}> - <button className={'antimodeMenu-button'}> - <FontAwesomeIcon icon="bullseye" size="lg" /> - </button> - <select className="collectionViewBaseChrome-viewPicker" onPointerDown={stopPropagation} onChange={this.viewChanged} value={StrCast(this.props.type)}> - {Object.values(CollectionViewType) - .filter(type => !excludedViewTypes.includes(type)) - .map(type => ( - <option key={Utils.GenerateGuid()} className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value={type}> - {type[0].toUpperCase() + type.substring(1)} - </option> - ))} - </select> - </div> - </Tooltip> - </div> - ); - } - - @computed get selectedDocumentView() { - return SelectionManager.Views().lastElement(); - } - @computed get selectedDoc() { - return SelectionManager.Docs().lastElement(); - } - @computed get notACollection() { - if (this.selectedDoc) { - const layoutField = Doc.LayoutField(this.selectedDoc); - return this.props.type === CollectionViewType.Docking || (typeof layoutField === 'string' && !layoutField?.includes('CollectionView')); - } else return false; - } - @computed - get pinButton() { - const targetDoc = this.selectedDoc; - const isPinned = targetDoc && Doc.isDocPinned(targetDoc); - return !targetDoc ? null : ( - <Tooltip key="pin" title={<div className="dash-tooltip">{Doc.isDocPinned(targetDoc) ? 'Unpin from presentation' : 'Pin to presentation'}</div>} placement="top"> - <button - className="antimodeMenu-button" - style={{ backgroundColor: isPinned ? '121212' : undefined, borderLeft: '1px solid gray' }} - onClick={e => - TabDocView.PinDoc(targetDoc, { - /* unpin: isPinned*/ - }) - }> - <FontAwesomeIcon className="colMenu-icon" size="lg" icon="map-pin" /> - </button> - </Tooltip> - ); - } - - @undoBatch - @action - startRecording = () => { - const doc = Docs.Create.ScreenshotDocument({ title: 'screen recording', _layout_fitWidth: true, _width: 400, _height: 200, mediaState: media_state.PendingRecording }); - CollectionDockingView.AddSplit(doc, OpenWhereMod.right); - }; - - @computed - get recordButton() { - const targetDoc = this.selectedDoc; - return ( - <Tooltip key="record" title={<div className="dash-tooltip">{'Capture screen'}</div>} placement="top"> - <button className="antimodeMenu-button" onClick={e => this.startRecording()}> - <div className="recordButtonOutline" style={{}}> - <div className="recordButtonInner" style={{}}></div> - </div> - </button> - </Tooltip> - ); - } - - @undoBatch - onEmbed = () => { - if (this.selectedDoc && this.selectedDocumentView) { - // const copy = Doc.MakeCopy(this.selectedDocumentView.props.Document, true); - // copy.x = NumCast(this.selectedDoc.x) + NumCast(this.selectedDoc._width); - // copy.y = NumCast(this.selectedDoc.y) + 30; - // this.selectedDocumentView.props.addDocument?.(copy); - const embedding = Doc.MakeEmbedding(this.selectedDoc); - embedding.x = NumCast(this.selectedDoc.x) + NumCast(this.selectedDoc._width); - embedding.y = NumCast(this.selectedDoc.y) + 30; - this.selectedDocumentView.props.addDocument?.(embedding); - } - }; - onEmbedButtonDown = (e: React.PointerEvent): void => { - setupMoveUpEvents(this, e, this.onEmbedButtonMoved, emptyFunction, emptyFunction); - }; - - @undoBatch - onEmbedButtonMoved = (e: PointerEvent) => { - const contentDiv = this.selectedDocumentView?.ContentDiv; - if (contentDiv && this.selectedDoc) { - const dragData = new DragManager.DocumentDragData([this.selectedDoc]); - const offset = [e.clientX - contentDiv.getBoundingClientRect().x, e.clientY - contentDiv.getBoundingClientRect().y]; - dragData.defaultDropAction = 'embed'; - dragData.canEmbed = true; - DragManager.StartDocumentDrag([contentDiv], dragData, e.clientX, e.clientY, { - offsetX: offset[0], - offsetY: offset[1], - hideSource: false, - }); - return true; - } - return false; - }; - - @computed - get embedButton() { - const targetDoc = this.selectedDoc; - return !targetDoc || targetDoc.type === DocumentType.PRES ? null : ( - <Tooltip title={<div className="dash-tooltip">{'Tap or Drag to create an embedding'}</div>} placement="top"> - <button className="antimodeMenu-button" onPointerDown={this.onEmbedButtonDown} onClick={this.onEmbed} style={{ cursor: 'drag' }}> - <FontAwesomeIcon className="colMenu-icon" icon="copy" size="lg" /> - </button> - </Tooltip> - ); - } - - @computed get lightboxButton() { - const targetDoc = this.selectedDoc; - return !targetDoc ? null : ( - <Tooltip title={<div className="dash-tooltip">{'View in Lightbox'}</div>} placement="top"> - <button - className="antimodeMenu-button" - onPointerDown={() => { - const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]); - LightboxView.SetLightboxDoc(targetDoc, undefined, docs); - }}> - <FontAwesomeIcon className="colMenu-icon" icon="desktop" size="lg" /> - </button> - </Tooltip> - ); - } - - @computed get toggleOverlayButton() { - return ( - <> - <Tooltip title={<div className="dash-tooltip">Toggle Overlay Layer</div>} placement="bottom"> - <button - className={'antimodeMenu-button'} - key="float" - style={{ - backgroundColor: this.props.docView.layoutDoc.z ? '121212' : undefined, - pointerEvents: this.props.docView.props.docViewPath().lastElement()?.rootDoc?._type_collection !== CollectionViewType.Freeform ? 'none' : undefined, - color: this.props.docView.props.docViewPath().lastElement()?.rootDoc?._type_collection !== CollectionViewType.Freeform ? 'dimgrey' : undefined, - }} - onClick={undoBatch(() => this.props.docView.props.CollectionFreeFormDocumentView?.().float())}> - <FontAwesomeIcon icon={['fab', 'buffer']} size={'lg'} /> - </button> - </Tooltip> - </> - ); - } - render() { return ( <div className="collectionMenu-cont"> <div className="collectionMenu"> - <div className="collectionViewBaseChrome"> - {this.notACollection || this.props.type === CollectionViewType.Invalid ? null : this.viewModes} - <div className="collectionMenu-divider" key="divider1"></div> - {this.embedButton} - {/* {this.pinButton} */} - {this.toggleOverlayButton} - <div className="collectionMenu-divider" key="divider2"></div> - {this.subChrome} - <div className="collectionMenu-divider" key="divider3"></div> - {this.lightboxButton} - {this.recordButton} - {!this._buttonizableCommands ? null : this.templateChrome} - </div> - </div> - </div> - ); - } -} - -@observer -export class CollectionDockingChrome extends React.Component<CollectionViewMenuProps> { - render() { - return null; - } -} - -@observer -export class CollectionFreeFormViewChrome extends React.Component<CollectionViewMenuProps & { isOverlay: boolean; isDoc?: boolean }> { - public static Instance: CollectionFreeFormViewChrome; - constructor(props: any) { - super(props); - CollectionFreeFormViewChrome.Instance = this; - } - get document() { - return this.props.docView.props.Document; - } - @computed get dataField() { - return this.document[this.props.docView.LayoutFieldKey + (this.props.isOverlay ? '_annotations' : '')]; - } - @computed get childDocs() { - return DocListCast(this.dataField); - } - @computed get selectedDocumentView() { - return SelectionManager.Views().lastElement(); - } - @computed get selectedDoc() { - return SelectionManager.Docs().lastElement(); - } - @computed get isText() { - return this.selectedDoc?.type === DocumentType.RTF || (RichTextMenu.Instance?.view as any) ? true : false; - } - - public static gotoKeyFrame(doc: Doc, newFrame: number) { - if (doc) { - const childDocs = DocListCast(doc[Doc.LayoutFieldKey(doc)]); - const currentFrame = Cast(doc._currentFrame, 'number', null); - if (currentFrame === undefined) { - doc._currentFrame = 0; - CollectionFreeFormDocumentView.setupKeyframes(childDocs, 0); - } - CollectionFreeFormView.updateKeyframe(undefined, [...childDocs, doc], currentFrame || 0); - doc._currentFrame = newFrame === undefined ? 0 : Math.max(0, newFrame); - } - } - - _keyTimer: NodeJS.Timeout | undefined; - @undoBatch - @action - nextKeyframe = (): void => { - const currentFrame = Cast(this.document._currentFrame, 'number', null); - if (currentFrame === undefined) { - this.document._currentFrame = 0; - CollectionFreeFormDocumentView.setupKeyframes(this.childDocs, 0); - } - this._keyTimer = CollectionFreeFormView.updateKeyframe(this._keyTimer, [...this.childDocs, this.document], currentFrame || 0); - this.document._currentFrame = Math.max(0, (currentFrame || 0) + 1); - this.document.lastFrame = Math.max(NumCast(this.document._currentFrame), NumCast(this.document.lastFrame)); - }; - @undoBatch - @action - prevKeyframe = (): void => { - const currentFrame = Cast(this.document._currentFrame, 'number', null); - if (currentFrame === undefined) { - this.document._currentFrame = 0; - CollectionFreeFormDocumentView.setupKeyframes(this.childDocs, 0); - } - this._keyTimer = CollectionFreeFormView.gotoKeyframe(this._keyTimer, [...this.childDocs, this.document], 1000); - this.document._currentFrame = Math.max(0, (currentFrame || 0) - 1); - }; - - private _palette = ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '']; - private _width = ['1', '5', '10', '100']; - private _dotsize = [10, 20, 30, 40]; - private _draw = ['∿', '=', '⎯', '→', '↔︎', 'ロ', 'O']; - private _head = ['', '', '', '', 'arrow', '', '']; - private _end = ['', '', '', 'arrow', 'arrow', '', '']; - private _shapePrims = ['', '', 'line', 'line', 'line', 'rectangle', 'circle'] as GestureUtils.Gestures[]; - private _title = ['pen', 'highlighter', 'line', 'line with arrow', 'line with double arrows', 'square', 'circle']; - private _faName = ['pen-fancy', 'highlighter', 'minus', 'long-arrow-alt-right', 'arrows-alt-h', 'square', 'circle']; - @observable _selectedPrimitive = this._shapePrims.length; - @observable _keepPrimitiveMode = false; // for whether primitive selection enters a one-shot or persistent mode - @observable _colorBtn = false; - @observable _widthBtn = false; - @observable _fillBtn = false; - - @action clearKeepPrimitiveMode() { - this._selectedPrimitive = this._shapePrims.length; - } - @action primCreated() { - if (!this._keepPrimitiveMode) { - //get out of ink mode after each stroke= - if (Doc.ActiveTool === InkTool.Highlighter && GestureOverlay.Instance.SavedColor) SetActiveInkColor(GestureOverlay.Instance.SavedColor); - Doc.ActiveTool = InkTool.None; - this._selectedPrimitive = this._shapePrims.length; - SetActiveArrowStart('none'); - SetActiveArrowEnd('none'); - } - } - - @action - changeColor = (color: string, type: string) => { - const col: ColorState = { - hex: color, - hsl: { a: 0, h: 0, s: 0, l: 0, source: '' }, - hsv: { a: 0, h: 0, s: 0, v: 0, source: '' }, - rgb: { a: 0, r: 0, b: 0, g: 0, source: '' }, - oldHue: 0, - source: '', - }; - if (type === 'color') { - SetActiveInkColor(Utils.colorString(col)); - } else if (type === 'fill') { - SetActiveFillColor(Utils.colorString(col)); - } - }; - - @action - editProperties = (value: any, field: string) => { - SelectionManager.Views().forEach( - action((element: DocumentView) => { - const doc = Document(element.rootDoc); - if (doc.type === DocumentType.INK) { - switch (field) { - case 'width': - doc.stroke_width = Number(value); - break; - case 'color': - doc.color = String(value); - break; - case 'fill': - doc.fillColor = String(value); - break; - case 'dash': - doc.stroke_dash = value; - } - } - }) - ); - }; - - @computed get drawButtons() { - const func = action((e: React.MouseEvent | React.PointerEvent, i: number, keep: boolean) => { - this._keepPrimitiveMode = keep; - // these are for shapes - if (this._selectedPrimitive !== i) { - this._selectedPrimitive = i; - if (this._title[i] === 'highlighter') { - Doc.ActiveTool = InkTool.Highlighter; - GestureOverlay.Instance.SavedColor = ActiveInkColor(); - SetActiveInkColor('rgba(245, 230, 95, 0.75)'); - } else { - Doc.ActiveTool = InkTool.Pen; - } - SetActiveArrowStart(this._head[i]); - SetActiveArrowEnd(this._end[i]); - SetActiveBezierApprox('300'); - - if (GestureOverlay.Instance) GestureOverlay.Instance.InkShape = this._shapePrims[i]; - } else { - this._selectedPrimitive = this._shapePrims.length; - Doc.ActiveTool = InkTool.None; - SetActiveArrowStart(''); - SetActiveArrowEnd(''); - if (GestureOverlay.Instance) GestureOverlay.Instance.InkShape = undefined; - SetActiveBezierApprox('0'); - } - e.stopPropagation(); - }); - return ( - <div className="btn-draw" key="draw"> - {this._draw.map((icon, i) => ( - <Tooltip key={icon} title={<div className="dash-tooltip">{this._title[i]}</div>} placement="bottom"> - <button className="antimodeMenu-button" onPointerDown={e => func(e, i, false)} onDoubleClick={e => func(e, i, true)} style={{ backgroundColor: i === this._selectedPrimitive ? '525252' : '', fontSize: '20' }}> - <FontAwesomeIcon icon={this._faName[i] as IconProp} size="sm" /> - </button> - </Tooltip> - ))} - </div> - ); - } - - toggleButton = (key: string, value: boolean, setter: () => {}, icon: FontAwesomeIconProps['icon'], ele: JSX.Element | null) => { - return ( - <Tooltip title={<div className="dash-tooltip">{key}</div>} placement="bottom"> - <button className="antimodeMenu-button" key={key} onPointerDown={action(e => setter())} style={{ backgroundColor: value ? '121212' : '' }}> - <FontAwesomeIcon icon={icon} size="lg" /> - {ele} - </button> - </Tooltip> - ); - }; - - @computed get widthPicker() { - const widthPicker = this.toggleButton('stroke width', this._widthBtn, () => (this._widthBtn = !this._widthBtn), 'bars', null); - return !this._widthBtn ? ( - widthPicker - ) : ( - <div className="btn2-group" key="width"> - {widthPicker} - {this._width.map((wid, i) => ( - <Tooltip title={<div className="dash-tooltip">change width</div>} placement="bottom"> - <button - className="antimodeMenu-button" - key={wid} - onPointerDown={action(() => { - SetActiveInkWidth(wid); - this._widthBtn = false; - this.editProperties(wid, 'width'); - })} - style={{ backgroundColor: this._widthBtn ? '121212' : '', zIndex: 1001, fontSize: this._dotsize[i], padding: 0, textAlign: 'center' }}> - • - </button> - </Tooltip> - ))} - </div> - ); - } - - @computed get colorPicker() { - const colorPicker = this.toggleButton('stroke color', this._colorBtn, () => (this._colorBtn = !this._colorBtn), 'pen-nib', <div className="color-previewI" style={{ backgroundColor: ActiveInkColor() ?? '121212' }} />); - return !this._colorBtn ? ( - colorPicker - ) : ( - <div className="btn-group" key="color"> - {colorPicker} - {this._palette.map(color => ( - <button - className="antimodeMenu-button" - key={color} - onPointerDown={action(() => { - this.changeColor(color, 'color'); - this._colorBtn = false; - this.editProperties(color, 'color'); - })} - style={{ backgroundColor: this._colorBtn ? '121212' : '', zIndex: 1001 }}> - {/* <FontAwesomeIcon icon="pen-nib" size="lg" /> */} - <div className="color-previewII" style={{ backgroundColor: color }}> - {color === '' ? <p style={{ fontSize: 40, color: 'red', marginTop: -10, marginLeft: -5, position: 'fixed' }}>☒</p> : ''} - </div> - </button> - ))} - </div> - ); - } - @computed get fillPicker() { - const fillPicker = this.toggleButton('shape fill color', this._fillBtn, () => (this._fillBtn = !this._fillBtn), 'fill-drip', <div className="color-previewI" style={{ backgroundColor: ActiveFillColor() ?? '121212' }} />); - return !this._fillBtn ? ( - fillPicker - ) : ( - <div className="btn-group" key="fill"> - {fillPicker} - {this._palette.map(color => ( - <button - className="antimodeMenu-button" - key={color} - onPointerDown={action(() => { - this.changeColor(color, 'fill'); - this._fillBtn = false; - this.editProperties(color, 'fill'); - })} - style={{ backgroundColor: this._fillBtn ? '121212' : '', zIndex: 1001 }}> - <div className="color-previewII" style={{ backgroundColor: color }}> - {color === '' ? <p style={{ fontSize: 40, color: 'red', marginTop: -10, marginLeft: -5, position: 'fixed' }}>☒</p> : ''} - </div> - </button> - ))} - </div> - ); - } - - render() { - return !this.props.docView.layoutDoc ? null : ( - <div className="collectionFreeFormMenu-cont"> - <RichTextMenu key="rich" /> - {!this.isText ? ( - <> - {this.drawButtons} - {this.widthPicker} - {this.colorPicker} - {this.fillPicker} - {Doc.noviceMode || this.props.isDoc ? null : ( - <> - <Tooltip key="back" title={<div className="dash-tooltip">Back Frame</div>} placement="bottom"> - <div className="backKeyframe" onClick={this.prevKeyframe}> - <FontAwesomeIcon icon={'caret-left'} size={'lg'} /> - </div> - </Tooltip> - <Tooltip key="num" title={<div className="dash-tooltip">Frame number</div>} placement="bottom"> - <div - className="numKeyframe" - style={{ color: this.props.docView.ComponentView?.getKeyFrameEditing?.() ? 'white' : 'black', backgroundColor: this.props.docView.ComponentView?.getKeyFrameEditing?.() ? '#5B9FDD' : '#AEDDF8' }} - onClick={action(() => this.props.docView.ComponentView?.setKeyFrameEditing?.(!this.props.docView.ComponentView?.getKeyFrameEditing?.()))}> - {NumCast(this.document._currentFrame)} - </div> - </Tooltip> - <Tooltip key="fwd" title={<div className="dash-tooltip">Forward Frame</div>} placement="bottom"> - <div className="fwdKeyframe" onClick={this.nextKeyframe}> - <FontAwesomeIcon icon={'caret-right'} size={'lg'} /> - </div> - </Tooltip> - </> - )} - </> - ) : null} - {!this.selectedDocumentView?.ComponentView?.menuControls ? null : this.selectedDocumentView?.ComponentView?.menuControls?.()} - </div> - ); - } -} -@observer -export class CollectionStackingViewChrome extends React.Component<CollectionViewMenuProps> { - @observable private _currentKey: string = ''; - @observable private suggestions: string[] = []; - - get document() { - return this.props.docView.props.Document; - } - - @computed private get descending() { - return StrCast(this.document._columnsSort) === 'descending'; - } - @computed get pivotField() { - return StrCast(this.document._pivotField); - } - - getKeySuggestions = async (value: string): Promise<string[]> => { - const val = value.toLowerCase(); - const docs = DocListCast(this.document[this.props.fieldKey]); - - if (Doc.noviceMode) { - if (docs instanceof Doc) { - const keys = Object.keys(docs).filter(key => key.indexOf('title') >= 0 || key.indexOf('author') >= 0 || key.indexOf('author_date') >= 0 || key.indexOf('modificationDate') >= 0 || (key[0].toUpperCase() === key[0] && key[0] !== '_')); - return keys.filter(key => key.toLowerCase().indexOf(val) > -1); - } - const keys = new Set<string>(); - docs.forEach(doc => Doc.allKeys(doc).forEach(key => keys.add(key))); - const noviceKeys = Array.from(keys).filter(key => key.indexOf('title') >= 0 || key.indexOf('author') >= 0 || key.indexOf('author_date') >= 0 || key.indexOf('modificationDate') >= 0 || (key[0]?.toUpperCase() === key[0] && key[0] !== '_')); - return noviceKeys.filter(key => key.toLowerCase().indexOf(val) > -1); - } - - if (docs instanceof Doc) { - return Object.keys(docs).filter(key => key.toLowerCase().indexOf(val) > -1); - } else { - const keys = new Set<string>(); - docs.forEach(doc => Doc.allKeys(doc).forEach(key => keys.add(key))); - return Array.from(keys).filter(key => key.toLowerCase().indexOf(val) > -1); - } - }; - - @action - onKeyChange = (e: React.ChangeEvent, { newValue }: { newValue: string }) => { - this._currentKey = newValue; - }; - - getSuggestionValue = (suggestion: string) => suggestion; - - renderSuggestion = (suggestion: string) => { - return <p>{suggestion}</p>; - }; - - onSuggestionFetch = async ({ value }: { value: string }) => { - const sugg = await this.getKeySuggestions(value); - runInAction(() => { - this.suggestions = sugg; - }); - }; - - @action - onSuggestionClear = () => { - this.suggestions = []; - }; - - @action - setValue = (value: string) => { - this.document._pivotField = value; - return true; - }; - - @action toggleSort = () => { - this.document._columnsSort = this.document._columnsSort === 'descending' ? 'ascending' : this.document._columnsSort === 'ascending' ? undefined : 'descending'; - }; - @action resetValue = () => { - this._currentKey = this.pivotField; - }; - - render() { - const doctype = this.props.docView.Document.type; - const isPres: boolean = doctype === DocumentType.PRES; - return isPres ? null : ( - <div className="collectionStackingViewChrome-cont"> - <div className="collectionStackingViewChrome-pivotField-cont"> - <div className="collectionStackingViewChrome-pivotField-label">GROUP BY:</div> - <div className="collectionStackingViewChrome-sortIcon" onClick={this.toggleSort} style={{ transform: `rotate(${this.descending ? '180' : '0'}deg)` }}> - <FontAwesomeIcon icon="caret-up" size="2x" color="white" /> - </div> - <div className="collectionStackingViewChrome-pivotField"> - <EditableView - GetValue={() => this.pivotField} - autosuggestProps={{ - resetValue: this.resetValue, - value: this._currentKey, - onChange: this.onKeyChange, - autosuggestProps: { - inputProps: { - value: this._currentKey, - onChange: this.onKeyChange, - }, - getSuggestionValue: this.getSuggestionValue, - suggestions: this.suggestions, - alwaysRenderSuggestions: true, - renderSuggestion: this.renderSuggestion, - onSuggestionsFetchRequested: this.onSuggestionFetch, - onSuggestionsClearRequested: this.onSuggestionClear, - }, - }} - oneLine - SetValue={this.setValue} - contents={this.pivotField ? this.pivotField : 'N/A'} - /> - </div> + <div className="collectionViewBaseChrome">{!this._buttonizableCommands ? null : this.templateChrome}</div> </div> </div> ); @@ -1137,7 +438,7 @@ export class CollectionNoteTakingViewChrome extends React.Component<CollectionVi @observable private suggestions: string[] = []; get document() { - return this.props.docView.props.Document; + return this.props.docView.Document; } @computed private get descending() { @@ -1230,6 +531,7 @@ export class CollectionNoteTakingViewChrome extends React.Component<CollectionVi autosuggestProps: { inputProps: { value: this._currentKey, + // @ts-ignore onChange: this.onKeyChange, }, getSuggestionValue: this.getSuggestionValue, @@ -1251,123 +553,6 @@ export class CollectionNoteTakingViewChrome extends React.Component<CollectionVi } } -@observer -export class CollectionSchemaViewChrome extends React.Component<CollectionViewMenuProps> { - // private _textwrapAllRows: boolean = Cast(this.document.textwrappedSchemaRows, listSpec("string"), []).length > 0; - get document() { - return this.props.docView.props.Document; - } - - @undoBatch - togglePreview = () => { - const dividerWidth = 4; - const borderWidth = Number(COLLECTION_BORDER_WIDTH); - const panelWidth = this.props.docView.props.PanelWidth(); - const previewWidth = NumCast(this.document.schema_previewWidth); - const tableWidth = panelWidth - 2 * borderWidth - dividerWidth - previewWidth; - this.document.schema_previewWidth = previewWidth === 0 ? Math.min(tableWidth / 3, 200) : 0; - }; - - @undoBatch - @action - toggleTextwrap = async () => { - const textwrappedRows = Cast(this.document.textwrappedSchemaRows, listSpec('string'), []); - if (textwrappedRows.length) { - this.document.textwrappedSchemaRows = new List<string>([]); - } else { - const docs = DocListCast(this.document[this.props.fieldKey]); - const allRows = docs instanceof Doc ? [docs[Id]] : docs.map(doc => doc[Id]); - this.document.textwrappedSchemaRows = new List<string>(allRows); - } - }; - - render() { - const previewWidth = NumCast(this.document.schema_previewWidth); - const textWrapped = Cast(this.document.textwrappedSchemaRows, listSpec('string'), []).length > 0; - - return ( - <div className="collectionSchemaViewChrome-cont"> - <div className="collectionSchemaViewChrome-toggle"> - <div className="collectionSchemaViewChrome-label">Show Preview: </div> - <div className="collectionSchemaViewChrome-toggler" onClick={this.togglePreview}> - <div className={'collectionSchemaViewChrome-togglerButton' + (previewWidth !== 0 ? ' on' : ' off')}>{previewWidth !== 0 ? 'on' : 'off'}</div> - </div> - </div> - </div> - ); - } -} - -@observer -export class CollectionTreeViewChrome extends React.Component<CollectionViewMenuProps> { - get document() { - return this.props.docView.props.Document; - } - get sortAscending() { - return this.document[this.props.fieldKey + '-sortAscending']; - } - set sortAscending(value) { - this.document[this.props.fieldKey + '-sortAscending'] = value; - } - @computed private get ascending() { - return Cast(this.sortAscending, 'boolean', null); - } - - @action toggleSort = () => { - if (this.sortAscending) this.sortAscending = undefined; - else if (this.sortAscending === undefined) this.sortAscending = false; - else this.sortAscending = true; - }; - - render() { - return ( - <div className="collectionTreeViewChrome-cont"> - <button className="collectionTreeViewChrome-sort" onClick={this.toggleSort}> - <div className="collectionTreeViewChrome-sortLabel">Sort</div> - <div className="collectionTreeViewChrome-sortIcon" style={{ transform: `rotate(${this.ascending === undefined ? '90' : this.ascending ? '180' : '0'}deg)` }}> - <FontAwesomeIcon icon="caret-up" size="2x" color="white" /> - </div> - </button> - </div> - ); - } -} - -// Enter scroll speed for 3D Carousel -@observer -export class Collection3DCarouselViewChrome extends React.Component<CollectionViewMenuProps> { - get document() { - return this.props.docView.props.Document; - } - @computed get scrollSpeed() { - return this.document._autoScrollSpeed; - } - - @action - setValue = (value: string) => { - const numValue = Number(StrCast(value)); - if (numValue > 0) { - this.document._autoScrollSpeed = numValue; - return true; - } - return false; - }; - - render() { - return ( - <div className="collection3DCarouselViewChrome-cont"> - <div className="collection3DCarouselViewChrome-scrollSpeed-cont"> - {/* {FormattedTextBox.Focused ? <RichTextMenu /> : null} */} - <div className="collectionStackingViewChrome-scrollSpeed-label">AUTOSCROLL SPEED:</div> - <div className="collection3DCarouselViewChrome-scrollSpeed"> - <EditableView GetValue={() => StrCast(this.scrollSpeed)} oneLine SetValue={this.setValue} contents={this.scrollSpeed ? this.scrollSpeed : 1000} /> - </div> - </div> - </div> - ); - } -} - /** * Chrome for grid view. */ @@ -1379,16 +564,21 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewMenu @observable private resize = false; private resizeListenerDisposer: Opt<Lambda>; get document() { - return this.props.docView.props.Document; + return this.props.docView.Document; + } + + @computed get panelWidth() { + return this.props.docView.props.PanelWidth(); } componentDidMount() { runInAction(() => (this.resize = this.props.docView.props.PanelWidth() < 700)); // listener to reduce text on chrome resize (panel resize) - this.resizeListenerDisposer = computed(() => this.props.docView.props.PanelWidth()).observe(({ newValue }) => { - runInAction(() => (this.resize = newValue < 700)); - }); + this.resizeListenerDisposer = reaction( + () => this.panelWidth, + newValue => (this.resize = newValue < 700) + ); } componentWillUnmount() { @@ -1513,12 +703,6 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewMenu <input className="collectionGridViewChrome-columnButton" onClick={this.onIncrementButtonClick} onMouseEnter={this.incrementValue} onMouseLeave={this.decrementValue} type="button" value="↑" /> <input className="collectionGridViewChrome-columnButton" style={{ marginRight: 5 }} onClick={this.onDecrementButtonClick} onMouseEnter={this.decrementValue} onMouseLeave={this.incrementValue} type="button" value="↓" /> </span> - {/* <span className="grid-control"> - <span className="grid-icon"> - <FontAwesomeIcon icon="text-height" size="1x" /> - </span> - <input className="collectionGridViewChrome-entryBox" type="number" placeholder={this.document.rowHeight as string} onKeyDown={this.onRowHeightEnter} onClick={(e: React.MouseEvent<HTMLInputElement, MouseEvent>) => { e.stopPropagation(); e.preventDefault(); e.currentTarget.focus(); }} /> - </span> */} <span className="grid-control" style={{ width: this.resize ? '12%' : '20%' }}> <input type="checkbox" style={{ marginRight: 5 }} onChange={this.toggleCollisions} checked={!this.document.gridPreventCollision} /> <label className="flexLabel">{this.resize ? 'Coll' : 'Collisions'}</label> @@ -1547,6 +731,3 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewMenu ); } } -ScriptingGlobals.add(function gotoFrame(doc: any, newFrame: any) { - CollectionFreeFormViewChrome.gotoKeyFrame(doc, newFrame); -}); diff --git a/src/client/views/collections/CollectionNoteTakingView.scss b/src/client/views/collections/CollectionNoteTakingView.scss index be1800d81..91a82d40f 100644 --- a/src/client/views/collections/CollectionNoteTakingView.scss +++ b/src/client/views/collections/CollectionNoteTakingView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; .collectionNoteTakingView-DocumentButtons { display: none; diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index afeef5a8f..b8133806f 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -1,9 +1,8 @@ -import React = require('react'); -import { CursorProperty } from 'csstype'; -import { action, computed, IReactionDisposer, observable, reaction, trace } from 'mobx'; +import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { Doc, Field, Opt } from '../../../fields/Doc'; -import { DocData, Height, Width } from '../../../fields/DocSymbols'; +import { DocData } from '../../../fields/DocSymbols'; import { Copy, Id } from '../../../fields/FieldSymbols'; import { List } from '../../../fields/List'; import { listSpec } from '../../../fields/Schema'; @@ -19,14 +18,15 @@ import { undoBatch } from '../../util/UndoManager'; import { ContextMenu } from '../ContextMenu'; import { ContextMenuProps } from '../ContextMenuItem'; import { LightboxView } from '../LightboxView'; -import { DocFocusOptions, DocumentView, DocumentViewProps } from '../nodes/DocumentView'; -import { FieldViewProps } from '../nodes/FieldView'; +import { DocumentView } from '../nodes/DocumentView'; +import { FocusViewOptions, FieldViewProps } from '../nodes/FieldView'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; import { StyleProp } from '../StyleProvider'; import './CollectionNoteTakingView.scss'; import { CollectionNoteTakingViewColumn } from './CollectionNoteTakingViewColumn'; import { CollectionNoteTakingViewDivider } from './CollectionNoteTakingViewDivider'; import { CollectionSubView } from './CollectionSubView'; +import { JsxElement } from 'typescript'; const _global = (window /* browser */ || global) /* node */ as any; /** @@ -44,10 +44,15 @@ export class CollectionNoteTakingView extends CollectionSubView() { notetakingCategoryField = 'NotetakingCategory'; public DividerWidth = 16; @observable docsDraggedRowCol: number[] = []; - @observable _cursor: CursorProperty = 'grab'; @observable _scroll = 0; + + constructor(props: any) { + super(props); + makeObservable(this); + } + @computed get chromeHidden() { - return BoolCast(this.layoutDoc.chromeHidden) || this.props.onBrowseClick?.() ? true : false; + return BoolCast(this.layoutDoc.chromeHidden) || this._props.onBrowseClickScript?.() ? true : false; } // columnHeaders returns the list of SchemaHeaderFields currently being used by the layout doc to render the columns @computed get colHeaderData() { @@ -66,7 +71,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { return colHeaderData ?? ([] as SchemaHeaderField[]); } @computed get headerMargin() { - return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HeaderMargin); + return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.HeaderMargin); } @computed get xMargin() { return NumCast(this.layoutDoc._xMargin, 5); @@ -83,11 +88,11 @@ export class CollectionNoteTakingView extends CollectionSubView() { } // PanelWidth returns the size of the total available space the view occupies @computed get PanelWidth() { - return this.props.PanelWidth(); + return this._props.PanelWidth(); } // maxColWidth returns the maximum column width, which is slightly less than the total available space. @computed get maxColWidth() { - return this.props.PanelWidth(); + return this._props.PanelWidth(); } // availableWidth is the total amount of non-divider width. Since widths are stored relatively, // we use availableWidth to convert from a percentage to a pixel count. @@ -153,7 +158,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { this._disposers.layout_autoHeight = reaction( () => this.layoutDoc._layout_autoHeight, layout_autoHeight => - layout_autoHeight && this.props.setHeight?.(Math.min(NumCast(this.layoutDoc._maxHeight, Number.MAX_SAFE_INTEGER), this.headerMargin + Math.max(...this.refList.map(r => Number(getComputedStyle(r).height.replace('px', '')))))) + layout_autoHeight && this._props.setHeight?.(Math.min(NumCast(this.layoutDoc._maxHeight, Number.MAX_SAFE_INTEGER), this.headerMargin + Math.max(...this.refList.map(r => Number(getComputedStyle(r).height.replace('px', '')))))) ); } @@ -163,9 +168,8 @@ export class CollectionNoteTakingView extends CollectionSubView() { Object.keys(this._disposers).forEach(key => this._disposers[key]()); } - @action moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[], annotationKey?: string) => boolean, annotationKey?: string): boolean => { - return this.props.removeDocument?.(doc) && addDocument?.(doc) ? true : false; + return this._props.removeDocument?.(doc) && addDocument?.(doc) ? true : false; }; createRef = (ele: HTMLDivElement | null) => { @@ -174,11 +178,11 @@ export class CollectionNoteTakingView extends CollectionSubView() { }; @computed get onChildClickHandler() { - return () => this.props.childClickScript || ScriptCast(this.Document.onChildClick); + return () => this._props.childClickScript || ScriptCast(this.Document.onChildClick); } @computed get onChildDoubleClickHandler() { - return () => this.props.childDoubleClickScript || ScriptCast(this.Document.onChildDoubleClick); + return () => this._props.childDoubleClickScript || ScriptCast(this.Document.onChildDoubleClick); } scrollToBottom = () => { @@ -186,13 +190,13 @@ export class CollectionNoteTakingView extends CollectionSubView() { }; // let's dive in and get the actual document we want to drag/move around - focusDocument = (doc: Doc, options: DocFocusOptions) => { + focusDocument = (doc: Doc, options: FocusViewOptions) => { Doc.BrushDoc(doc); const found = this._mainCont && Array.from(this._mainCont.getElementsByClassName('documentView-node')).find((node: any) => node.id === doc[Id]); if (found) { const top = found.getBoundingClientRect().top; - const localTop = this.props.ScreenToLocalTransform().transformPoint(0, top); - if (Math.floor(localTop[1]) !== 0 && Math.ceil(this.props.PanelHeight()) < (this._mainCont?.scrollHeight || 0)) { + const localTop = this.ScreenToLocalBoxXf().transformPoint(0, top); + if (Math.floor(localTop[1]) !== 0 && Math.ceil(this._props.PanelHeight()) < (this._mainCont?.scrollHeight || 0)) { let focusSpeed = options.zoomTime ?? 500; smoothScroll(focusSpeed, this._mainCont!, localTop[1] + this._mainCont!.scrollTop, options.easeFunc); return focusSpeed; @@ -200,7 +204,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { } }; - styleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps>, property: string) => { + styleProvider = (doc: Doc | undefined, props: Opt<FieldViewProps>, property: string) => { switch (property) { case StyleProp.BoxShadow: if (doc && DragManager.docsBeingDragged.includes(doc)) { @@ -208,20 +212,20 @@ export class CollectionNoteTakingView extends CollectionSubView() { } break; case StyleProp.Opacity: - if (doc && this.props.childOpacity) { - return this.props.childOpacity(); + if (doc && this._props.childOpacity) { + return this._props.childOpacity(); } break; } - return this.props.styleProvider?.(doc, props, property); + return this._props.styleProvider?.(doc, props, property); }; - isContentActive = () => this.props.isContentActive(); + isContentActive = () => this._props.isContentActive(); blockPointerEventsWhenDragging = () => (this.docsDraggedRowCol.length ? 'none' : undefined); // getDisplayDoc returns the rules for displaying a document in this view (ie. DocumentView) getDisplayDoc(doc: Doc, width: () => number) { - const dataDoc = !doc.isTemplateDoc && !doc.isTemplateForField ? undefined : this.props.DataDoc; + const dataDoc = !doc.isTemplateDoc && !doc.isTemplateForField ? undefined : this._props.TemplateDataDocument; const height = () => this.getDocHeight(doc); let dref: Opt<DocumentView>; const noteTakingDocTransform = () => this.getDocTransform(doc, dref); @@ -229,47 +233,45 @@ export class CollectionNoteTakingView extends CollectionSubView() { <DocumentView ref={r => (dref = r || undefined)} Document={doc} + TemplateDataDocument={dataDoc ?? (!Doc.AreProtosEqual(doc[DocData], doc) ? doc[DocData] : undefined)} pointerEvents={this.blockPointerEventsWhenDragging} - DataDoc={dataDoc ?? (!Doc.AreProtosEqual(doc[DocData], doc) ? doc[DocData] : undefined)} - renderDepth={this.props.renderDepth + 1} + renderDepth={this._props.renderDepth + 1} PanelWidth={width} PanelHeight={height} styleProvider={this.styleProvider} - docViewPath={this.props.docViewPath} - layout_fitWidth={this.props.childLayoutFitWidth} + containerViewPath={this.childContainerViewPath} + layout_fitWidth={this._props.childLayoutFitWidth} isContentActive={emptyFunction} onKey={this.onKeyDown} //TODO: change this from a prop to a parameter passed into a function dontHideOnDrag={true} isDocumentActive={this.isContentActive} - LayoutTemplate={this.props.childLayoutTemplate} - LayoutTemplateString={this.props.childLayoutString} - NativeWidth={this.props.childIgnoreNativeSize ? returnZero : this.props.childLayoutFitWidth?.(doc) || (doc._layout_fitWidth && !Doc.NativeWidth(doc)) ? width : undefined} // explicitly ignore nativeWidth/height if childIgnoreNativeSize is set- used by PresBox - NativeHeight={this.props.childIgnoreNativeSize ? returnZero : this.props.childLayoutFitWidth?.(doc) || (doc._layout_fitWidth && !Doc.NativeHeight(doc)) ? height : undefined} - dontCenter={this.props.childIgnoreNativeSize ? 'xy' : undefined} - dontRegisterView={dataDoc ? true : BoolCast(this.layoutDoc.childDontRegisterViews, this.props.dontRegisterView)} + LayoutTemplate={this._props.childLayoutTemplate} + LayoutTemplateString={this._props.childLayoutString} + NativeWidth={this._props.childIgnoreNativeSize ? returnZero : this._props.childLayoutFitWidth?.(doc) || (doc._layout_fitWidth && !Doc.NativeWidth(doc)) ? width : undefined} // explicitly ignore nativeWidth/height if childIgnoreNativeSize is set- used by PresBox + NativeHeight={this._props.childIgnoreNativeSize ? returnZero : this._props.childLayoutFitWidth?.(doc) || (doc._layout_fitWidth && !Doc.NativeHeight(doc)) ? height : undefined} + dontCenter={this._props.childIgnoreNativeSize ? 'xy' : undefined} + dontRegisterView={dataDoc ? true : BoolCast(this.layoutDoc.childDontRegisterViews, this._props.dontRegisterView)} rootSelected={this.rootSelected} - layout_showTitle={this.props.childlayout_showTitle} + layout_showTitle={this._props.childlayout_showTitle} dragAction={StrCast(this.layoutDoc.childDragAction) as dropActionType} - onClick={this.onChildClickHandler} - onBrowseClick={this.props.onBrowseClick} - onDoubleClick={this.onChildDoubleClickHandler} + onClickScript={this.onChildClickHandler} + onBrowseClickScript={this._props.onBrowseClickScript} + onDoubleClickScript={this.onChildDoubleClickHandler} ScreenToLocalTransform={noteTakingDocTransform} focus={this.focusDocument} childFilters={this.childDocFilters} - hideDecorationTitle={this.props.childHideDecorationTitle?.()} - hideResizeHandles={this.props.childHideResizeHandles?.()} - hideTitle={this.props.childHideTitle?.()} + hideDecorationTitle={this._props.childHideDecorationTitle} + hideResizeHandles={this._props.childHideResizeHandles} childFiltersByRanges={this.childDocRangeFilters} searchFilterDocs={this.searchFilterDocs} - addDocument={this.props.addDocument} - moveDocument={this.props.moveDocument} - removeDocument={this.props.removeDocument} - contentPointerEvents={StrCast(this.layoutDoc.contentPointerEvents) as any} - whenChildContentsActiveChanged={this.props.whenChildContentsActiveChanged} - addDocTab={this.props.addDocTab} - bringToFront={returnFalse} - pinToPres={this.props.pinToPres} + addDocument={this._props.addDocument} + moveDocument={this._props.moveDocument} + removeDocument={this._props.removeDocument} + contentPointerEvents={StrCast(this.layoutDoc.childContentPointerEvents) as any} + whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged} + addDocTab={this._props.addDocTab} + pinToPres={this._props.pinToPres} /> ); } @@ -279,7 +281,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { const y = this._scroll; // required for document decorations to update when the text box container is scrolled const { translateX, translateY } = Utils.GetScreenTransform(dref?.ContentDiv || undefined); // the document view may center its contents and if so, will prepend that onto the screenToLocalTansform. so we have to subtract that off - return new Transform(-translateX + (dref?.centeringX || 0), -translateY + (dref?.centeringY || 0), 1).scale(this.props.ScreenToLocalTransform().Scale); + return new Transform(-translateX + (dref?.centeringX || 0), -translateY + (dref?.centeringY || 0), 1).scale(this.ScreenToLocalBoxXf().Scale); } // how to get the width of a document. Currently returns the width of the column (minus margins) @@ -289,24 +291,24 @@ export class CollectionNoteTakingView extends CollectionSubView() { const existingHeader = this.colHeaderData.find(sh => sh.heading === heading); const existingWidth = existingHeader?.width ? existingHeader.width : 0; const maxWidth = existingWidth > 0 ? existingWidth * this.availableWidth : this.maxColWidth; - const width = d.layout_fitWidth ? maxWidth : d[Width](); + const width = d.layout_fitWidth ? maxWidth : NumCast(d._width); return Math.min(maxWidth - CollectionNoteTakingViewColumn.ColumnMargin, width < maxWidth ? width : maxWidth); } // how to get the height of a document. Nothing special here. getDocHeight(d?: Doc) { if (!d || d.hidden) return 0; - const childLayoutDoc = Doc.Layout(d, this.props.childLayoutTemplate?.()); - const childDataDoc = !d.isTemplateDoc && !d.isTemplateForField ? undefined : this.props.DataDoc; - const maxHeight = (lim => (lim === 0 ? this.props.PanelWidth() : lim === -1 ? 10000 : lim))(NumCast(this.layoutDoc.childLimitHeight, -1)); - const nw = Doc.NativeWidth(childLayoutDoc, childDataDoc) || (!(childLayoutDoc._layout_fitWidth || this.props.childLayoutFitWidth?.(d)) ? d[Width]() : 0); - const nh = Doc.NativeHeight(childLayoutDoc, childDataDoc) || (!(childLayoutDoc._layout_fitWidth || this.props.childLayoutFitWidth?.(d)) ? d[Height]() : 0); + const childLayoutDoc = Doc.Layout(d, this._props.childLayoutTemplate?.()); + const childDataDoc = !d.isTemplateDoc && !d.isTemplateForField ? undefined : this._props.TemplateDataDocument; + const maxHeight = (lim => (lim === 0 ? this._props.PanelWidth() : lim === -1 ? 10000 : lim))(NumCast(this.layoutDoc.childLimitHeight, -1)); + const nw = Doc.NativeWidth(childLayoutDoc, childDataDoc) || (!(childLayoutDoc._layout_fitWidth || this._props.childLayoutFitWidth?.(d)) ? NumCast(d._width) : 0); + const nh = Doc.NativeHeight(childLayoutDoc, childDataDoc) || (!(childLayoutDoc._layout_fitWidth || this._props.childLayoutFitWidth?.(d)) ? NumCast(d._height) : 0); if (nw && nh) { const docWid = this.getDocWidth(d); return Math.min(maxHeight, (docWid * nh) / nw); } const childHeight = NumCast(childLayoutDoc._height); - const panelHeight = childLayoutDoc._layout_fitWidth || this.props.childLayoutFitWidth?.(d) ? Number.MAX_SAFE_INTEGER : this.props.PanelHeight() - 2 * this.yMargin; + const panelHeight = childLayoutDoc._layout_fitWidth || this._props.childLayoutFitWidth?.(d) ? Number.MAX_SAFE_INTEGER : this._props.PanelHeight() - 2 * this.yMargin; return Math.min(childHeight, maxHeight, panelHeight); } @@ -336,12 +338,12 @@ export class CollectionNoteTakingView extends CollectionSubView() { // onPointerMove is used to preview where a document will drop in a column once a drag is complete. @action onPointerMove = (force: boolean, ex: number, ey: number) => { - if (this.childDocList && (this.childDocList.includes(DragManager.DocDragData?.draggedDocuments.lastElement()!) || force || this.isContentActive())) { + if (this.childDocList?.includes(DragManager.DocDragData?.draggedDocuments?.lastElement() as any) || force || SnappingManager.CanEmbed) { // get the current docs for the column based on the mouse's x coordinate - const xCoord = this.props.ScreenToLocalTransform().transformPoint(ex, ey)[0] - 2 * this.gridGap; + const xCoord = this.ScreenToLocalBoxXf().transformPoint(ex, ey)[0] - 2 * this.gridGap; const colDocs = this.getDocsFromXCoord(xCoord); // get the index for where you need to insert the doc you are currently dragging - const clientY = this.props.ScreenToLocalTransform().transformPoint(ex, ey)[1]; + const clientY = this.ScreenToLocalBoxXf().transformPoint(ex, ey)[1]; let dropInd = -1; let pos0 = (this.refList.lastElement() as HTMLDivElement).children[0].getBoundingClientRect().height + this.yMargin * 2; colDocs.forEach((doc, i) => { @@ -404,14 +406,12 @@ export class CollectionNoteTakingView extends CollectionSubView() { }; @undoBatch - @action onKeyDown = (e: React.KeyboardEvent, fieldProps: FieldViewProps) => { - const docView = fieldProps.DocumentView?.(); - if (docView && (e.ctrlKey || docView.rootDoc._createDocOnCR) && ['Enter'].includes(e.key)) { + if ((e.ctrlKey || fieldProps.Document._createDocOnCR) && ['Enter'].includes(e.key)) { e.stopPropagation?.(); - const newDoc = Doc.MakeCopy(docView.rootDoc, true); - Doc.GetProto(newDoc).text = undefined; - FormattedTextBox.SelectOnLoad = newDoc[Id]; + const newDoc = Doc.MakeCopy(fieldProps.Document, true); + newDoc[DocData].text = undefined; + FormattedTextBox.SetSelectOnLoad(newDoc); return this.addDocument?.(newDoc); } }; @@ -419,7 +419,6 @@ export class CollectionNoteTakingView extends CollectionSubView() { // onInternalDrop is used when dragging and dropping a document within the view, such as dragging // a document to a new column or changing its order within the column. @undoBatch - @action onInternalDrop = (e: Event, de: DragManager.DropEvent) => { if (de.complete.docDragData) { if (super.onInternalDrop(e, de)) { @@ -435,7 +434,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { if (rowCol[0] <= 0) { docs.splice(0, 0, ...newDocs); } else { - const colDocs = this.getDocsFromXCoord(this.props.ScreenToLocalTransform().transformPoint(de.x, de.y)[0]); + const colDocs = this.getDocsFromXCoord(this.ScreenToLocalBoxXf().transformPoint(de.x, de.y)[0]); const previousDoc = colDocs[rowCol[0] - 1]; const previousDocIndex = docs.indexOf(previousDoc); docs.splice(previousDocIndex + 1, 0, ...newDocs); @@ -443,9 +442,9 @@ export class CollectionNoteTakingView extends CollectionSubView() { } return true; } - } else if (de.complete.linkDragData?.dragDocument.embedContainer === this.props.Document && de.complete.linkDragData?.linkDragView?.props.CollectionFreeFormDocumentView?.()) { + } else if (de.complete.linkDragData?.dragDocument.embedContainer === this.Document && de.complete.linkDragData?.linkDragView?.CollectionFreeFormDocumentView) { const source = Docs.Create.TextDocument('', { _width: 200, _height: 75, _layout_fitWidth: true, title: 'dropped annotation' }); - if (!this.props.addDocument?.(source)) e.preventDefault(); + if (!this._props.addDocument?.(source)) e.preventDefault(); de.complete.linkDocument = DocUtils.MakeLink(source, de.complete.linkDragData.linkSourceGetAnchor(), { link_relationship: 'doc annotation' }); // TODODO this is where in text links get passed e.stopPropagation(); return true; @@ -458,7 +457,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { @undoBatch internalAnchorAnnoDrop(e: Event, annoDragData: DragManager.AnchorAnnoDragData) { const dropCreator = annoDragData.dropDocCreator; - annoDragData.dropDocCreator = (annotationOn: Doc | undefined) => dropCreator(annotationOn) || this.rootDoc; + annoDragData.dropDocCreator = (annotationOn: Doc | undefined) => dropCreator(annotationOn) || this.Document; return true; } @@ -503,16 +502,17 @@ export class CollectionNoteTakingView extends CollectionSubView() { const type = 'number'; return ( <CollectionNoteTakingViewColumn + key={heading?.heading ?? 'unset'} unobserveHeight={ref => this.refList.splice(this.refList.indexOf(ref), 1)} observeHeight={ref => { if (ref) { this.refList.push(ref); this.observer = new _global.ResizeObserver( action((entries: any) => { - if (this.layoutDoc._layout_autoHeight && ref && this.refList.length && !SnappingManager.GetIsDragging()) { + if (this.layoutDoc._layout_autoHeight && ref && this.refList.length && !SnappingManager.IsDragging) { const height = this.headerMargin + Math.min(NumCast(this.layoutDoc._maxHeight, Number.MAX_SAFE_INTEGER), Math.max(...this.refList.map(r => Number(getComputedStyle(r).height.replace('px', ''))))); - if (!LightboxView.IsLightboxDocView(this.props.docViewPath())) { - this.props.setHeight?.(height); + if (!LightboxView.Contains(this.DocumentView?.())) { + this._props.setHeight?.(height); } } }) @@ -520,13 +520,13 @@ export class CollectionNoteTakingView extends CollectionSubView() { this.observer.observe(ref); } }} - PanelWidth={this.props.PanelWidth} - select={this.props.select} + PanelWidth={this._props.PanelWidth} + select={this._props.select} addDocument={this.addDocument} chromeHidden={this.chromeHidden} colHeaderData={this.colHeaderData} - Document={this.props.Document} - DataDoc={this.props.DataDoc} + Document={this.Document} + TemplateDataDocument={this._props.TemplateDataDocument} resizeColumns={this.resizeColumns} renderChildren={this.children} numGroupColumns={this.numGroupColumns} @@ -536,7 +536,6 @@ export class CollectionNoteTakingView extends CollectionSubView() { dividerWidth={this.DividerWidth} maxColWidth={this.maxColWidth} availableWidth={this.availableWidth} - key={heading?.heading ?? 'unset'} headings={this.headings} heading={heading?.heading ?? 'unset'} headingObject={heading} @@ -544,7 +543,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { yMargin={this.yMargin} type={type} createDropTarget={this.createDashEventsTarget} - screenToLocalTransform={this.props.ScreenToLocalTransform} + screenToLocalTransform={this.ScreenToLocalBoxXf} editableViewProps={this.editableViewProps} /> ); @@ -553,7 +552,6 @@ export class CollectionNoteTakingView extends CollectionSubView() { // addGroup is called when adding a new columnHeader, adding a SchemaHeaderField to our list of // columnHeaders and resizing the existing columns to make room for our new one. @undoBatch - @action addGroup = (value: string) => { if (this.colHeaderData) { for (const header of this.colHeaderData) { @@ -584,7 +582,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { // setColumnStartXCoords is used to update column widths when using the drag handlers between columns @action setColumnStartXCoords = (movementXScreen: number, colIndex: number) => { - const movementX = this.props.ScreenToLocalTransform().transformDirection(movementXScreen, 0)[0]; + const movementX = this.ScreenToLocalBoxXf().transformDirection(movementXScreen, 0)[0]; const leftHeader = this.colHeaderData[colIndex]; const rightHeader = this.colHeaderData[colIndex + 1]; leftHeader.setWidth(leftHeader.width + movementX / this.availableWidth); @@ -599,14 +597,11 @@ export class CollectionNoteTakingView extends CollectionSubView() { @computed get renderedSections() { TraceMobx(); const sections = Array.from(this.Sections.entries()); - return sections.map((sec, i) => ( - <> - {this.sectionNoteTaking(sec[0], sec[1])} - {i === sections.length - 1 ? null : ( // - <CollectionNoteTakingViewDivider key={`divider${i}`} isContentActive={this.isContentActive} index={i} setColumnStartXCoords={this.setColumnStartXCoords} xMargin={this.xMargin} /> - )} - </> - )); + return sections.reduce((list, sec, i) => { + list.push(this.sectionNoteTaking(sec[0], sec[1])); + i !== sections.length - 1 && list.push(<CollectionNoteTakingViewDivider key={`divider${i}`} isContentActive={this.isContentActive} index={i} setColumnStartXCoords={this.setColumnStartXCoords} xMargin={this.xMargin} />); + return list; + }, [] as JSX.Element[]); } @computed get nativeWidth() { @@ -617,7 +612,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { } @computed get scaling() { - return !this.nativeWidth ? 1 : this.props.PanelHeight() / this.nativeHeight; + return !this.nativeWidth ? 1 : this._props.PanelHeight() / this.nativeHeight; } @computed get backgroundEvents() { @@ -634,8 +629,8 @@ export class CollectionNoteTakingView extends CollectionSubView() { ref={this.createRef} key="notes" style={{ - overflowY: this.props.isContentActive() ? 'auto' : 'hidden', - background: this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor), + overflowY: this._props.isContentActive() ? 'auto' : 'hidden', + background: this._props.styleProvider?.(this.Document, this._props, StyleProp.BackgroundColor), pointerEvents: this.backgroundEvents, }} onScroll={action(e => (this._scroll = e.currentTarget.scrollTop))} @@ -644,8 +639,8 @@ export class CollectionNoteTakingView extends CollectionSubView() { onDragOver={e => this.onPointerMove(true, e.clientX, e.clientY)} onDrop={this.onExternalDrop.bind(this)} onContextMenu={this.onContextMenu} - onWheel={e => this.props.isContentActive(true) && e.stopPropagation()}> - {this.renderedSections} + onWheel={e => this._props.isContentActive() && e.stopPropagation()}> + <>{this.renderedSections}</> </div> ); } diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx index 52cc21903..38846c79d 100644 --- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx @@ -1,18 +1,17 @@ -import React = require('react'); import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, observable, trace } from 'mobx'; +import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; +import { returnEmptyString } from '../../../Utils'; import { Doc, DocListCast, Opt } from '../../../fields/Doc'; -import { Copy, Id } from '../../../fields/FieldSymbols'; +import { Id } from '../../../fields/FieldSymbols'; import { RichTextField } from '../../../fields/RichTextField'; import { listSpec } from '../../../fields/Schema'; import { SchemaHeaderField } from '../../../fields/SchemaHeaderField'; import { Cast, NumCast } from '../../../fields/Types'; import { ImageField } from '../../../fields/URLField'; import { TraceMobx } from '../../../fields/util'; -import { returnEmptyString } from '../../../Utils'; -import { Docs, DocUtils } from '../../documents/Documents'; -import { DocumentType } from '../../documents/DocumentTypes'; +import { DocUtils, Docs } from '../../documents/Documents'; import { DragManager } from '../../util/DragManager'; import { SnappingManager } from '../../util/SnappingManager'; import { Transform } from '../../util/Transform'; @@ -20,12 +19,13 @@ import { undoBatch } from '../../util/UndoManager'; import { ContextMenu } from '../ContextMenu'; import { ContextMenuProps } from '../ContextMenuItem'; import { EditableView } from '../EditableView'; +import { ObservableReactComponent } from '../ObservableReactComponent'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; import './CollectionNoteTakingView.scss'; interface CSVFieldColumnProps { Document: Doc; - DataDoc: Opt<Doc>; + TemplateDataDocument: Opt<Doc>; docList: Doc[]; heading: string; pivotField: string; @@ -58,43 +58,43 @@ interface CSVFieldColumnProps { * majority of functions here are for rendering styles. */ @observer -export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColumnProps> { +export class CollectionNoteTakingViewColumn extends ObservableReactComponent<CSVFieldColumnProps> { @observable private _background = 'inherit'; // columnWidth returns the width of a column in absolute pixels @computed get columnWidth() { - if (!this.props.colHeaderData || !this.props.headingObject || this.props.colHeaderData.length === 1) return `${(this.props.availableWidth / this.props.PanelWidth()) * 100}%`; - const i = this.props.colHeaderData.indexOf(this.props.headingObject); - return ((this.props.colHeaderData[i].width * this.props.availableWidth) / this.props.PanelWidth()) * 100 + '%'; + if (!this._props.colHeaderData || !this._props.headingObject || this._props.colHeaderData.length === 1) return `${(this._props.availableWidth / this._props.PanelWidth()) * 100}%`; + const i = this._props.colHeaderData.findIndex(hd => hd.heading === this._props.headingObject?.heading && hd.color === this._props.headingObject.color); + return ((this._props.colHeaderData[i].width * this._props.availableWidth) / this._props.PanelWidth()) * 100 + '%'; } private dropDisposer?: DragManager.DragDropDisposer; private _headerRef: React.RefObject<HTMLDivElement> = React.createRef(); public static ColumnMargin = 10; - @observable _heading = this.props.headingObject ? this.props.headingObject.heading : this.props.heading; - @observable _color = this.props.headingObject ? this.props.headingObject.color : '#f1efeb'; + @observable _heading = this._props.headingObject ? this._props.headingObject.heading : this._props.heading; + @observable _color = this._props.headingObject ? this._props.headingObject.color : '#f1efeb'; _ele: HTMLElement | null = null; createColumnDropRef = (ele: HTMLDivElement | null) => { this.dropDisposer?.(); if (ele) { this._ele = ele; - this.props.observeHeight(ele); - this.dropDisposer = DragManager.MakeDropTarget(ele, this.columnDrop.bind(this)); + this._props.observeHeight(ele); + this.dropDisposer = DragManager.MakeDropTarget(ele, this.columnDrop.bind(this), this._props.Document); } }; componentWillUnmount() { - this.props.unobserveHeight(this._ele); + this._props.unobserveHeight(this._ele); } @undoBatch - columnDrop = action((e: Event, de: DragManager.DropEvent) => { + columnDrop = (e: Event, de: DragManager.DropEvent) => { const drop = { docs: de.complete.docDragData?.droppedDocuments, val: this.getValue(this._heading) }; - drop.docs?.forEach(d => Doc.SetInPlace(d, this.props.pivotField, drop.val, false)); + drop.docs?.forEach(d => Doc.SetInPlace(d, this._props.pivotField, drop.val, false)); return true; - }); + }; getValue = (value: string): any => { const parsed = parseInt(value); @@ -108,20 +108,20 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu headingChanged = (value: string, shiftDown?: boolean) => { const castedValue = this.getValue(value); if (castedValue) { - if (this.props.colHeaderData?.map(i => i.heading).indexOf(castedValue.toString()) !== -1) { + if (this._props.colHeaderData?.map(i => i.heading).indexOf(castedValue.toString()) !== -1) { return false; } - this.props.docList.forEach(d => (d[this.props.pivotField] = castedValue)); - if (this.props.headingObject) { - this.props.headingObject.setHeading(castedValue.toString()); - this._heading = this.props.headingObject.heading; + this._props.docList.forEach(d => (d[this._props.pivotField] = castedValue)); + if (this._props.headingObject) { + this._props.headingObject.setHeading(castedValue.toString()); + this._heading = this._props.headingObject.heading; } return true; } return false; }; - @action pointerEntered = () => SnappingManager.GetIsDragging() && (this._background = '#b4b4b4'); + @action pointerEntered = () => SnappingManager.IsDragging && (this._background = '#b4b4b4'); @action pointerLeave = () => (this._background = 'inherit'); @undoBatch addTextNote = (char: string) => this.addNewTextDoc('-typed text-', false, true); @@ -130,26 +130,25 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu @action addNewTextDoc = (value: string, shiftDown?: boolean, forceEmptyNote?: boolean) => { if (!value && !forceEmptyNote) return false; - const key = this.props.pivotField; + const key = this._props.pivotField; const newDoc = Docs.Create.TextDocument(value, { _height: 18, _width: 200, _layout_fitWidth: true, title: value, _layout_autoHeight: true }); - const colValue = this.getValue(this.props.heading); + const colValue = this.getValue(this._props.heading); newDoc[key] = colValue; - FormattedTextBox.SelectOnLoad = newDoc[Id]; + FormattedTextBox.SetSelectOnLoad(newDoc); FormattedTextBox.SelectOnLoadChar = forceEmptyNote ? '' : ' '; - return this.props.addDocument?.(newDoc) || false; + return this._props.addDocument?.(newDoc) || false; }; // deleteColumn is called when a user deletes a column using the 'trash' icon in the button area. // If the user deletes the first column, the documents get moved to the second column. Otherwise, // all docs are added to the column directly to the left. @undoBatch - @action deleteColumn = () => { - const colHdrData = Array.from(Cast(this.props.Document[this.props.fieldKey + '_columnHeaders'], listSpec(SchemaHeaderField), null)); - if (this.props.headingObject) { - this.props.docList.forEach(d => (d[this.props.pivotField] = undefined)); - colHdrData.splice(colHdrData.indexOf(this.props.headingObject), 1); - this.props.resizeColumns(colHdrData); + const colHdrData = Array.from(Cast(this._props.Document[this._props.fieldKey + '_columnHeaders'], listSpec(SchemaHeaderField), null)); + if (this._props.headingObject) { + this._props.docList.forEach(d => (d[this._props.pivotField] = undefined)); + colHdrData.splice(colHdrData.indexOf(this._props.headingObject), 1); + this._props.resizeColumns(colHdrData); } }; @@ -157,21 +156,21 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu ContextMenu.Instance.clearItems(); const layoutItems: ContextMenuProps[] = []; const docItems: ContextMenuProps[] = []; - const dataDoc = this.props.DataDoc || this.props.Document; - const pivotValue = this.getValue(this.props.heading); + const dataDoc = this._props.TemplateDataDocument || this._props.Document; + const pivotValue = this.getValue(this._props.heading); DocUtils.addDocumentCreatorMenuItems( doc => { - const key = this.props.pivotField; - doc[key] = this.getValue(this.props.heading); - FormattedTextBox.SelectOnLoad = doc[Id]; - return this.props.addDocument?.(doc); + const key = this._props.pivotField; + doc[key] = this.getValue(this._props.heading); + FormattedTextBox.SetSelectOnLoad(doc); + return this._props.addDocument?.(doc); }, - this.props.addDocument, + this._props.addDocument, x, y, true, - this.props.pivotField, + this._props.pivotField, pivotValue ); @@ -181,12 +180,12 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu docItems.push({ description: ':' + fieldKey, event: () => { - const created = DocUtils.DocumentFromField(dataDoc, fieldKey, Doc.GetProto(this.props.Document)); + const created = DocUtils.DocumentFromField(dataDoc, fieldKey, Doc.GetProto(this._props.Document)); if (created) { - if (this.props.Document.isTemplateDoc) { - Doc.MakeMetadataFieldTemplate(created, this.props.Document); + if (this._props.Document.isTemplateDoc) { + Doc.MakeMetadataFieldTemplate(created, this._props.Document); } - return this.props.addDocument?.(created); + return this._props.addDocument?.(created); } }, icon: 'compress-arrows-alt', @@ -200,12 +199,12 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu event: () => { const created = Docs.Create.CarouselDocument([], { _width: 400, _height: 200, title: fieldKey }); if (created) { - const container = this.props.Document.resolvedDataDoc ? Doc.GetProto(this.props.Document) : this.props.Document; + const container = this._props.Document.resolvedDataDoc ? Doc.GetProto(this._props.Document) : this._props.Document; if (container.isTemplateDoc) { Doc.MakeMetadataFieldTemplate(created, container); return Doc.AddDocToList(container, Doc.LayoutFieldKey(container), created); } - return this.props.addDocument?.(created) || false; + return this._props.addDocument?.(created) || false; } }, icon: 'compress-arrows-alt', @@ -214,13 +213,13 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu !Doc.UserDoc().noviceMode && ContextMenu.Instance.addItem({ description: 'Doc Fields ...', subitems: docItems, icon: 'eye' }); !Doc.UserDoc().noviceMode && ContextMenu.Instance.addItem({ description: 'Containers ...', subitems: layoutItems, icon: 'eye' }); ContextMenu.Instance.setDefaultItem('::', (name: string): void => { - Doc.GetProto(this.props.Document)[name] = ''; + Doc.GetProto(this._props.Document)[name] = ''; const created = Docs.Create.TextDocument('', { title: name, _width: 250, _layout_autoHeight: true }); if (created) { - if (this.props.Document.isTemplateDoc) { - Doc.MakeMetadataFieldTemplate(created, this.props.Document); + if (this._props.Document.isTemplateDoc) { + Doc.MakeMetadataFieldTemplate(created, this._props.Document); } - this.props.addDocument?.(created); + this._props.addDocument?.(created); } }); ContextMenu.Instance.displayMenu(x, y, undefined, true); @@ -228,26 +227,26 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu @computed get innards() { TraceMobx(); - const key = this.props.pivotField; + const key = this._props.pivotField; const heading = this._heading; - const columnYMargin = this.props.headingObject ? 0 : this.props.yMargin; + const columnYMargin = this._props.headingObject ? 0 : this._props.yMargin; const evContents = heading ? heading : '25'; - const headingView = this.props.headingObject ? ( + const headingView = this._props.headingObject ? ( <div key={heading} className="collectionNoteTakingView-sectionHeader" ref={this._headerRef} style={{ - marginTop: 2 * this.props.yMargin, + marginTop: 2 * this._props.yMargin, width: 'calc(100% - 5px)', }}> <div className="collectionNoteTakingView-sectionHeader-subCont" title={evContents === `No Value` ? `Documents that don't have a ${key} value will go here. This column cannot be removed.` : ''} style={{ background: evContents !== `No Value` ? this._color : 'inherit' }}> - <EditableView GetValue={() => evContents} isEditingCallback={isEditing => isEditing && this.props.select(false)} SetValue={this.headingChanged} contents={evContents} oneLine={true} /> + <EditableView GetValue={() => evContents} isEditingCallback={isEditing => isEditing && this._props.select(false)} SetValue={this.headingChanged} contents={evContents} oneLine={true} /> </div> - {(this.props.colHeaderData?.length ?? 0) > 1 && ( + {(this._props.colHeaderData?.length ?? 0) > 1 && ( <button className="collectionNoteTakingView-sectionDelete" onClick={this.deleteColumn}> <FontAwesomeIcon icon="trash" size="lg" /> </button> @@ -255,7 +254,7 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu </div> ) : null; const templatecols = this.columnWidth; - const type = this.props.Document.type; + const type = this._props.Document.type; return ( <> {headingView} @@ -265,20 +264,20 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu key={`${heading}-stack`} className={`collectionNoteTakingView-Nodes`} style={{ - padding: `${columnYMargin}px ${0}px ${this.props.yMargin}px ${0}px`, - gridGap: this.props.gridGap, + padding: `${columnYMargin}px ${0}px ${this._props.yMargin}px ${0}px`, + gridGap: this._props.gridGap, gridTemplateColumns: templatecols, }}> - {this.props.renderChildren(this.props.docList)} + {this._props.renderChildren(this._props.docList)} </div> - {!this.props.chromeHidden ? ( + {!this._props.chromeHidden ? ( <div className="collectionNoteTakingView-DocumentButtons" style={{ marginBottom: 10 }}> <div key={`${heading}-add-document`} className="collectionNoteTakingView-addDocumentButton"> <EditableView GetValue={returnEmptyString} SetValue={this.addNewTextDoc} textCallback={this.addTextNote} placeholder={"Type ':' for commands"} contents={'+ New Node'} menuCallback={this.menuCallback} /> </div> - <div key={`${this.props.Document[Id]}-addGroup`} className="collectionNoteTakingView-addDocumentButton"> - <EditableView {...this.props.editableViewProps()} /> + <div key={`${this._props.Document[Id]}-addGroup`} className="collectionNoteTakingView-addDocumentButton"> + <EditableView {...this._props.editableViewProps()} /> </div> </div> ) : null} @@ -298,7 +297,7 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu style={{ width: this.columnWidth, background: this._background, - marginLeft: this.props.headings().findIndex((h: any) => h[0] === this.props.headingObject) === 0 ? NumCast(this.props.Document.xMargin) : 0, + marginLeft: this._props.headings().findIndex((h: any) => h[0] === this._props.headingObject) === 0 ? NumCast(this._props.Document.xMargin) : 0, }} ref={this.createColumnDropRef} onPointerEnter={this.pointerEntered} diff --git a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx index af822d917..5e4bce19d 100644 --- a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx @@ -1,8 +1,9 @@ -import { action, observable, trace } from 'mobx'; +import { action, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { emptyFunction, setupMoveUpEvents } from '../../../Utils'; import { UndoManager } from '../../util/UndoManager'; +import { ObservableReactComponent } from '../ObservableReactComponent'; interface DividerProps { index: number; @@ -17,8 +18,7 @@ interface DividerProps { * are two simple vertical lines that allow the user to alter the widths of CollectionNoteTakingViewColumns. */ @observer -export class CollectionNoteTakingViewDivider extends React.Component<DividerProps> { - @observable private isHoverActive = false; +export class CollectionNoteTakingViewDivider extends ObservableReactComponent<DividerProps> { @observable private isResizingActive = false; @action @@ -29,12 +29,11 @@ export class CollectionNoteTakingViewDivider extends React.Component<DividerProp e, (e, down, delta) => { if (!batch) batch = UndoManager.StartBatch('resizing'); - this.props.setColumnStartXCoords(delta[0], this.props.index); + this._props.setColumnStartXCoords(delta[0], this._props.index); return false; }, action(() => { this.isResizingActive = false; - this.isHoverActive = false; batch?.end(); }), emptyFunction @@ -50,10 +49,8 @@ export class CollectionNoteTakingViewDivider extends React.Component<DividerProp display: 'flex', alignItems: 'center', cursor: 'col-resize', - pointerEvents: this.props.isContentActive() ? 'all' : 'none', - }} - onPointerEnter={action(() => (this.isHoverActive = true))} - onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))}> + pointerEvents: this._props.isContentActive() ? 'all' : 'none', + }}> <div className="columnResizer-handler" onPointerDown={e => this.registerResizing(e)} diff --git a/src/client/views/collections/CollectionPileView.tsx b/src/client/views/collections/CollectionPileView.tsx index 91701b213..d0df77cbe 100644 --- a/src/client/views/collections/CollectionPileView.tsx +++ b/src/client/views/collections/CollectionPileView.tsx @@ -1,7 +1,7 @@ -import { action, computed, IReactionDisposer } from 'mobx'; +import { action, computed, IReactionDisposer, makeObservable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { Doc, DocListCast } from '../../../fields/Doc'; -import { Height, Width } from '../../../fields/DocSymbols'; import { ScriptField } from '../../../fields/ScriptField'; import { NumCast, StrCast } from '../../../fields/Types'; import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../../Utils'; @@ -13,13 +13,17 @@ import { computePassLayout, computeStarburstLayout } from './collectionFreeForm' import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView'; import './CollectionPileView.scss'; import { CollectionSubView } from './CollectionSubView'; -import React = require('react'); @observer export class CollectionPileView extends CollectionSubView() { _originalChrome: any = ''; _disposers: { [name: string]: IReactionDisposer } = {}; + constructor(props: any) { + super(props); + makeObservable(this); + } + componentDidMount() { if (this.layoutEngine() !== computePassLayout.name && this.layoutEngine() !== computeStarburstLayout.name) { this.Document._freeform_pileEngine = computePassLayout.name; @@ -37,14 +41,14 @@ export class CollectionPileView extends CollectionSubView() { @undoBatch addPileDoc = (doc: Doc | Doc[]) => { (doc instanceof Doc ? [doc] : doc).map(d => DocUtils.iconify(d)); - return this.props.addDocument?.(doc) || false; + return this._props.addDocument?.(doc) || false; }; @undoBatch removePileDoc = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDoc: (doc: Doc | Doc[]) => boolean) => { (doc instanceof Doc ? [doc] : doc).forEach(d => Doc.deiconifyView(d)); - const ret = this.props.moveDocument?.(doc, targetCollection, addDoc) || false; - if (ret && !DocListCast(this.rootDoc[this.fieldKey ?? 'data']).length) this.props.DocumentView?.().props.removeDocument?.(this.rootDoc); + const ret = this._props.moveDocument?.(doc, targetCollection, addDoc) || false; + if (ret && !DocListCast(this.dataDoc[this.fieldKey ?? 'data']).length) this.DocumentView?.()._props.removeDocument?.(this.Document); return ret; }; @@ -53,7 +57,7 @@ export class CollectionPileView extends CollectionSubView() { } @computed get contentEvents() { const isStarburst = this.layoutEngine() === computeStarburstLayout.name; - return this.props.isContentActive() && isStarburst ? undefined : 'none'; + return this._props.isContentActive() && isStarburst ? undefined : 'none'; } // returns the contents of the pileup in a CollectionFreeFormView @@ -61,13 +65,13 @@ export class CollectionPileView extends CollectionSubView() { return ( <div className="collectionPileView-innards" style={{ pointerEvents: this.contentEvents }}> <CollectionFreeFormView - {...this.props} // + {...this._props} // layoutEngine={this.layoutEngine} addDocument={this.addPileDoc} moveDocument={this.removePileDoc} // pile children never have their contents active, but will be document active whenever the entire pile is. childContentsActive={returnFalse} - childDocumentsActive={this.props.isDocumentActive} + childDocumentsActive={this._props.isDocumentActive} childDragAction="move" childClickScript={this.toggleIcon} /> @@ -79,28 +83,28 @@ export class CollectionPileView extends CollectionSubView() { toggleStarburst = action(() => { this.layoutDoc._freeform_scale = undefined; if (this.layoutEngine() === computeStarburstLayout.name) { - if (this.rootDoc[Width]() !== NumCast(this.rootDoc._starburstDiameter, 500)) { - this.rootDoc._starburstDiameter = this.rootDoc[Width](); + if (NumCast(this.layoutDoc._width) !== NumCast(this.Document._starburstDiameter, 500)) { + this.Document._starburstDiameter = NumCast(this.layoutDoc._width); } const defaultSize = 110; - this.rootDoc.x = NumCast(this.rootDoc.x) + this.layoutDoc[Width]() / 2 - NumCast(this.layoutDoc._freeform_pileWidth, defaultSize) / 2; - this.rootDoc.y = NumCast(this.rootDoc.y) + this.layoutDoc[Height]() / 2 - NumCast(this.layoutDoc._freeform_pileHeight, defaultSize) / 2; + this.Document.x = NumCast(this.Document.x) + NumCast(this.layoutDoc._width) / 2 - NumCast(this.layoutDoc._freeform_pileWidth, defaultSize) / 2; + this.Document.y = NumCast(this.Document.y) + NumCast(this.layoutDoc._height) / 2 - NumCast(this.layoutDoc._freeform_pileHeight, defaultSize) / 2; this.layoutDoc._width = NumCast(this.layoutDoc._freeform_pileWidth, defaultSize); this.layoutDoc._height = NumCast(this.layoutDoc._freeform_pileHeight, defaultSize); DocUtils.pileup(this.childDocs, undefined, undefined, NumCast(this.layoutDoc._width) / 2, false); this.layoutDoc._freeform_panX = 0; this.layoutDoc._freeform_panY = -10; - this.props.Document._freeform_pileEngine = computePassLayout.name; + this.Document._freeform_pileEngine = computePassLayout.name; } else { - const defaultSize = NumCast(this.rootDoc._starburstDiameter, 400); - this.rootDoc.x = NumCast(this.rootDoc.x) + this.layoutDoc[Width]() / 2 - defaultSize / 2; - this.rootDoc.y = NumCast(this.rootDoc.y) + this.layoutDoc[Height]() / 2 - defaultSize / 2; - this.layoutDoc._freeform_pileWidth = this.layoutDoc[Width](); - this.layoutDoc._freeform_pileHeight = this.layoutDoc[Height](); + const defaultSize = NumCast(this.Document._starburstDiameter, 400); + this.Document.x = NumCast(this.Document.x) + NumCast(this.layoutDoc._width) / 2 - defaultSize / 2; + this.Document.y = NumCast(this.Document.y) + NumCast(this.layoutDoc._height) / 2 - defaultSize / 2; + this.layoutDoc._freeform_pileWidth = NumCast(this.layoutDoc._width); + this.layoutDoc._freeform_pileHeight = NumCast(this.layoutDoc._height); this.layoutDoc._freeform_panX = this.layoutDoc._freeform_panY = 0; this.layoutDoc._width = this.layoutDoc._height = defaultSize; this.layoutDoc.background; - this.props.Document._freeform_pileEngine = computeStarburstLayout.name; + this.Document._freeform_pileEngine = computeStarburstLayout.name; } }); @@ -121,7 +125,7 @@ export class CollectionPileView extends CollectionSubView() { const doc = this.childDocs[0]; doc.x = e.clientX; doc.y = e.clientY; - this.props.addDocTab(doc, OpenWhere.inParentFromScreen) && (this.props.removeDocument?.(doc) || false); + this._props.addDocTab(doc, OpenWhere.inParentFromScreen) && (this._props.removeDocument?.(doc) || false); dist = 0; } } @@ -139,7 +143,6 @@ export class CollectionPileView extends CollectionSubView() { // onClick for toggling the pileup view @undoBatch - @action onClick = (e: React.MouseEvent) => { if (e.button === 0) { SelectionManager.DeselectAll(); @@ -150,7 +153,7 @@ export class CollectionPileView extends CollectionSubView() { render() { return ( - <div className={`collectionPileView`} onClick={this.onClick} onPointerDown={this.pointerDown} style={{ width: this.props.PanelWidth(), height: '100%' }}> + <div className={`collectionPileView`} onClick={this.onClick} onPointerDown={this.pointerDown} style={{ width: this._props.PanelWidth(), height: '100%' }}> {this.contents} </div> ); diff --git a/src/client/views/collections/CollectionStackedTimeline.scss b/src/client/views/collections/CollectionStackedTimeline.scss index a19d8e696..0ced3f9e3 100644 --- a/src/client/views/collections/CollectionStackedTimeline.scss +++ b/src/client/views/collections/CollectionStackedTimeline.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.scss'; +@import '../global/globalCssVariables.module.scss'; .collectionStackedTimeline-timelineContainer { height: 100%; diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx index 7c61bc4da..5c47d4b9e 100644 --- a/src/client/views/collections/CollectionStackedTimeline.tsx +++ b/src/client/views/collections/CollectionStackedTimeline.tsx @@ -1,8 +1,9 @@ -import React = require('react'); -import { action, computed, IReactionDisposer, observable, reaction } from 'mobx'; +import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import { computedFn } from 'mobx-utils'; +import * as React from 'react'; import { Doc, Opt } from '../../../fields/Doc'; +import { DocData } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; import { List } from '../../../fields/List'; import { listSpec } from '../../../fields/Schema'; @@ -17,24 +18,26 @@ import { DragManager } from '../../util/DragManager'; import { FollowLinkScript, IsFollowLinkScript, LinkFollower } from '../../util/LinkFollower'; import { LinkManager } from '../../util/LinkManager'; import { ScriptingGlobals } from '../../util/ScriptingGlobals'; -import { SelectionManager } from '../../util/SelectionManager'; import { SnappingManager } from '../../util/SnappingManager'; import { Transform } from '../../util/Transform'; import { undoBatch, UndoManager } from '../../util/UndoManager'; -import { AudioWaveform } from '../AudioWaveform'; import { CollectionSubView } from '../collections/CollectionSubView'; import { LightboxView } from '../LightboxView'; -import { DocFocusFunc, DocFocusOptions, DocumentView, DocumentViewProps, OpenWhere } from '../nodes/DocumentView'; +import { AudioWaveform } from '../nodes/audio/AudioWaveform'; +import { DocumentView, OpenWhere } from '../nodes/DocumentView'; +import { FocusFuncType, FocusViewOptions, StyleProviderFuncType } from '../nodes/FieldView'; import { LabelBox } from '../nodes/LabelBox'; import { VideoBox } from '../nodes/VideoBox'; +import { ObservableReactComponent } from '../ObservableReactComponent'; import './CollectionStackedTimeline.scss'; export type CollectionStackedTimelineProps = { Play: () => void; Pause: () => void; - playLink: (linkDoc: Doc, options: DocFocusOptions) => void; + playLink: (linkDoc: Doc, options: FocusViewOptions) => void; playFrom: (seekTimeInSeconds: number, endTime?: number) => void; playing: () => boolean; + thumbnails?: () => string[]; setTime: (time: number) => void; startTag: string; endTag: string; @@ -43,7 +46,6 @@ export type CollectionStackedTimelineProps = { rawDuration: number; dataFieldKey: string; fieldKey: string; - thumbnails?: () => string[]; }; // trimming state: shows full clip, current trim bounds, or not trimming @@ -55,8 +57,15 @@ export enum TrimScope { @observer export class CollectionStackedTimeline extends CollectionSubView<CollectionStackedTimelineProps>() { - @observable static SelectingRegion: CollectionStackedTimeline | undefined = undefined; - @observable public static CurrentlyPlaying: DocumentView[]; + public static SelectingRegions: Set<CollectionStackedTimeline> = new Set(); + public static StopSelecting() { + this.SelectingRegions.forEach(action(region => (region._selectingRegion = false))); + this.SelectingRegions.clear(); + } + constructor(props: any) { + super(props); + makeObservable(this); + } static LabelScript: ScriptField; static LabelPlayScript: ScriptField; @@ -64,7 +73,9 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack private _timeline: HTMLDivElement | null = null; // ref to actual timeline div private _timelineWrapper: HTMLDivElement | null = null; // ref to timeline wrapper div for zooming and scrolling private _markerStart: number = 0; - @observable _markerEnd: number | undefined; + @observable public static CurrentlyPlaying: DocumentView[] = []; + @observable _selectingRegion = false; + @observable _markerEnd: number | undefined = undefined; @observable _trimming: number = TrimScope.None; @observable _trimStart: number = 0; // trim controls start pos @observable _trimEnd: number = 0; // trim controls end pos @@ -74,14 +85,14 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack @observable _hoverTime: number = 0; - @observable _thumbnail: string | undefined; + @observable _thumbnail: string | undefined = undefined; // ensures that clip doesn't get trimmed so small that controls cannot be adjusted anymore get minTrimLength() { return Math.max(this._timeline?.getBoundingClientRect() ? 0.05 * this.clipDuration : 0, 0.5); } @computed get thumbnails() { - return this.props.thumbnails?.(); + return this._props.thumbnails?.(); } @computed get trimStart() { @@ -101,7 +112,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack return this.clipEnd - this.clipStart; } @computed get clipEnd() { - return this.IsTrimming === TrimScope.All ? this.props.rawDuration : NumCast(this.layoutDoc.clipEnd, this.props.rawDuration); + return this.IsTrimming === TrimScope.All ? this._props.rawDuration : NumCast(this.layoutDoc.clipEnd, this._props.rawDuration); } @computed get currentTime() { @@ -116,11 +127,11 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack document.addEventListener('keydown', this.keyEvents, true); } - @action componentWillUnmount() { document.removeEventListener('keydown', this.keyEvents, true); - if (CollectionStackedTimeline.SelectingRegion === this) { - CollectionStackedTimeline.SelectingRegion = undefined; + if (this._selectingRegion) { + runInAction(() => (this._selectingRegion = false)); + CollectionStackedTimeline.SelectingRegions.delete(this); } } @@ -150,8 +161,17 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack this._zoomFactor = zoom; } - anchorStart = (anchor: Doc) => NumCast(anchor._timecodeToShow, NumCast(anchor[this.props.startTag])); - anchorEnd = (anchor: Doc, val: any = null) => NumCast(anchor._timecodeToHide, NumCast(anchor[this.props.endTag], val) ?? null); + makeDocUnfiltered = (doc: Doc) => this.childDocList?.some(item => item === doc); + + getView = async (doc: Doc, options: FocusViewOptions): Promise<Opt<DocumentView>> => + new Promise<Opt<DocumentView>>(res => { + if (doc.hidden) options.didMove = !(doc.hidden = false); + const findDoc = (finish: (dv: DocumentView) => void) => DocumentManager.Instance.AddViewRenderedCb(doc, dv => finish(dv)); + findDoc(dv => res(dv)); + }); + + anchorStart = (anchor: Doc) => NumCast(anchor._timecodeToShow, NumCast(anchor[this._props.startTag])); + anchorEnd = (anchor: Doc, val: any = null) => NumCast(anchor._timecodeToHide, NumCast(anchor[this._props.endTag], val) ?? null); // converts screen pixel offset to time toTimeline = (screen_delta: number, width: number) => { @@ -178,23 +198,25 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack if ( // need to include range inputs because after dragging video time slider it becomes target element !(e.target instanceof HTMLInputElement && !(e.target.type === 'range')) && - this.props.isContentActive() + this._props.isContentActive() ) { // if shift pressed scrub 1 second otherwise 1/10th const jump = e.shiftKey ? 1 : 0.1; switch (e.key) { case ' ': - this.props.playing() ? this.props.Pause() : this.props.Play(); + this._props.playing() ? this._props.Pause() : this._props.Play(); break; case '^': - if (!CollectionStackedTimeline.SelectingRegion) { + if (!this._selectingRegion) { this._markerStart = this._markerEnd = this.currentTime; - CollectionStackedTimeline.SelectingRegion = this; + this._selectingRegion = true; + CollectionStackedTimeline.SelectingRegions.add(this); } else { this._markerEnd = this.currentTime; - CollectionStackedTimeline.createAnchor(this.rootDoc, this.dataDoc, this.props.fieldKey, this._markerStart, this._markerEnd, undefined, true); + CollectionStackedTimeline.createAnchor(this.Document, this.dataDoc, this._props.fieldKey, this._markerStart, this._markerEnd, undefined, true); this._markerEnd = undefined; - CollectionStackedTimeline.SelectingRegion = undefined; + this._selectingRegion = false; + CollectionStackedTimeline.SelectingRegions.delete(this); } e.stopPropagation(); break; @@ -205,11 +227,11 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack this._trimming = TrimScope.None; break; case 'ArrowLeft': - this.props.setTime(Math.min(Math.max(this.clipStart, this.currentTime - jump), this.clipEnd)); + this._props.setTime(Math.min(Math.max(this.clipStart, this.currentTime - jump), this.clipEnd)); e.stopPropagation(); break; case 'ArrowRight': - this.props.setTime(Math.min(Math.max(this.clipStart, this.currentTime + jump), this.clipEnd)); + this._props.setTime(Math.min(Math.max(this.clipStart, this.currentTime + jump), this.clipEnd)); e.stopPropagation(); break; } @@ -219,7 +241,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack getLinkData(l: Doc) { let la1 = l.link_anchor_1 as Doc; let la2 = l.link_anchor_2 as Doc; - const linkTime = NumCast(la2[this.props.startTag], NumCast(la1[this.props.startTag])); + const linkTime = NumCast(la2[this._props.startTag], NumCast(la1[this._props.startTag])); if (Doc.AreProtosEqual(la1, this.dataDoc)) { la1 = l.link_anchor_2 as Doc; la2 = l.link_anchor_1 as Doc; @@ -234,9 +256,9 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack const clientX = e.clientX; const diff = rect ? clientX - rect?.x : null; const shiftKey = e.shiftKey; - if (rect && this.props.isContentActive()) { - const wasPlaying = this.props.playing(); - if (wasPlaying) this.props.Pause(); + if (rect && this._props.isContentActive()) { + const wasPlaying = this._props.playing(); + if (wasPlaying) this._props.Pause(); var wasSelecting = this._markerEnd !== undefined; setupMoveUpEvents( this, @@ -258,7 +280,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack this._markerEnd = tmp; } if (!isClick && Math.abs(movement[0]) > 15 && !this.IsTrimming) { - const anchor = CollectionStackedTimeline.createAnchor(this.rootDoc, this.dataDoc, this.props.fieldKey, this._markerStart, this._markerEnd, undefined, true); + const anchor = CollectionStackedTimeline.createAnchor(this.Document, this.dataDoc, this._props.fieldKey, this._markerStart, this._markerEnd, undefined, true); setTimeout(() => DocumentManager.Instance.getDocumentView(anchor)?.select(false)); } (!isClick || !wasSelecting) && (this._markerEnd = undefined); @@ -266,17 +288,17 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack }), (e, doubleTap) => { if (e.button !== 2) { - this.props.select(false); - !wasPlaying && doubleTap && this.props.Play(); + this._props.select(false); + !wasPlaying && doubleTap && this._props.Play(); } }, - this.props.isSelected(true) || this.props.isContentActive(), + this._props.isSelected() || this._props.isContentActive(), undefined, () => { if (shiftKey) { - CollectionStackedTimeline.createAnchor(this.rootDoc, this.dataDoc, this.props.fieldKey, this.currentTime, undefined, undefined, true); + CollectionStackedTimeline.createAnchor(this.Document, this.dataDoc, this._props.fieldKey, this.currentTime, undefined, undefined, true); } else { - !wasPlaying && this.props.setTime(this.toTimeline(clientX - rect.x, rect.width)); + !wasPlaying && this._props.setTime(this.toTimeline(clientX - rect.x, rect.width)); } } ); @@ -291,7 +313,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack if (rect) { this._hoverTime = this.toTimeline(clientX - rect.x, rect.width); if (this.thumbnails) { - const nearest = Math.floor((this._hoverTime / this.props.rawDuration) * VideoBox.numThumbnails); + const nearest = Math.floor((this._hoverTime / this._props.rawDuration) * VideoBox.numThumbnails); const imgField = this.thumbnails.length > 0 ? new ImageField(this.thumbnails[nearest]) : undefined; this._thumbnail = imgField?.url?.href ? imgField.url.href.replace('.png', '_m.png') : undefined; } @@ -306,7 +328,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack this, e, action((e, [], []) => { - if (rect && this.props.isContentActive()) { + if (rect && this._props.isContentActive()) { this._trimStart = Math.min(Math.max(this.trimStart + (e.movementX / rect.width) * this.clipDuration, this.clipStart), this.trimEnd - this.minTrimLength); } return false; @@ -326,7 +348,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack this, e, action((e, [], []) => { - if (rect && this.props.isContentActive()) { + if (rect && this._props.isContentActive()) { this._trimEnd = Math.max(Math.min(this.trimEnd + (e.movementX / rect.width) * this.clipDuration, this.clipEnd), this.trimStart + this.minTrimLength); } return false; @@ -349,8 +371,8 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack @action scrollToTime = (time: number) => { if (this._timelineWrapper) { - if (time > this.toTimeline(this._scroll + this.props.PanelWidth(), this.timelineContentWidth)) { - this._scroll = Math.min(this._scroll + this.props.PanelWidth(), this.timelineContentWidth - this.props.PanelWidth()); + if (time > this.toTimeline(this._scroll + this._props.PanelWidth(), this.timelineContentWidth)) { + this._scroll = Math.min(this._scroll + this._props.PanelWidth(), this.timelineContentWidth - this._props.PanelWidth()); smoothScrollHorizontal(200, this._timelineWrapper, this._scroll); } else if (time < this.toTimeline(this._scroll, this.timelineContentWidth)) { this._scroll = (time / this.timelineContentWidth) * this.clipDuration; @@ -364,15 +386,15 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack internalDocDrop(e: Event, de: DragManager.DropEvent, docDragData: DragManager.DocumentDragData, xp: number) { if (super.onInternalDrop(e, de)) { // determine x coordinate of drop and assign it to the documents being dragged --- see internalDocDrop of collectionFreeFormView.tsx for how it's done when dropping onto a 2D freeform view - const localPt = this.props.ScreenToLocalTransform().transformPoint(de.x, de.y); + const localPt = this.ScreenToLocalBoxXf().transformPoint(de.x, de.y); const x = localPt[0] - docDragData.offset[0]; const timelinePt = this.toTimeline(x + this._scroll, this.timelineContentWidth); docDragData.droppedDocuments.forEach(drop => { const anchorEnd = this.anchorEnd(drop); if (anchorEnd !== undefined) { - Doc.SetInPlace(drop, drop._timecodeToHide === undefined ? this.props.endTag : 'timecodeToHide', timelinePt + anchorEnd - this.anchorStart(drop), false); + Doc.SetInPlace(drop, drop._timecodeToHide === undefined ? this._props.endTag : 'timecodeToHide', timelinePt + anchorEnd - this.anchorStart(drop), false); } - Doc.SetInPlace(drop, drop._timecodeToShow === undefined ? this.props.startTag : 'timecodeToShow', timelinePt, false); + Doc.SetInPlace(drop, drop._timecodeToShow === undefined ? this._props.startTag : 'timecodeToShow', timelinePt, false); }); return true; @@ -387,27 +409,27 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack // creates marker on timeline @undoBatch - @action - static createAnchor(rootDoc: Doc, dataDoc: Doc, fieldKey: string, anchorStartTime: Opt<number>, anchorEndTime: Opt<number>, docAnchor: Opt<Doc>, addAsAnnotation: boolean) { - if (anchorStartTime === undefined) return rootDoc; + static createAnchor(doc: Doc, dataDoc: Doc, fieldKey: string, anchorStartTime: Opt<number>, anchorEndTime: Opt<number>, docAnchor: Opt<Doc>, addAsAnnotation: boolean) { + if (anchorStartTime === undefined) return doc; const startTag = '_timecodeToShow'; const endTag = '_timecodeToHide'; const anchor = docAnchor ?? Docs.Create.LabelDocument({ - title: ComputedField.MakeFunction(`self["${endTag}"] ? "#" + formatToTime(self["${startTag}"]) + "-" + formatToTime(self["${endTag}"]) : "#" + formatToTime(self["${startTag}"])`) as any, + title: ComputedField.MakeFunction(`this["${endTag}"] ? "#" + formatToTime(this["${startTag}"]) + "-" + formatToTime(this["${endTag}"]) : "#" + formatToTime(this["${startTag}"])`) as any, _label_minFontSize: 12, _label_maxFontSize: 24, _dragOnlyWithinContainer: true, backgroundColor: 'rgba(128, 128, 128, 0.5)', layout_hideLinkButton: true, onClick: FollowLinkScript(), - annotationOn: rootDoc, + _embedContainer: doc, + annotationOn: doc, _isTimelineLabel: true, layout_borderRounding: anchorEndTime === undefined ? '100%' : undefined, }); - Doc.GetProto(anchor)[startTag] = anchorStartTime; - Doc.GetProto(anchor)[endTag] = anchorEndTime; + anchor[DocData][startTag] = anchorStartTime; + anchor[DocData][endTag] = anchorEndTime; if (addAsAnnotation) { if (Cast(dataDoc[fieldKey], listSpec(Doc), null)) { Cast(dataDoc[fieldKey], listSpec(Doc), []).push(anchor); @@ -423,20 +445,20 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack const seekTimeInSeconds = this.anchorStart(anchorDoc) - 0.05; const endTime = this.anchorEnd(anchorDoc); if (this.layoutDoc.autoPlayAnchors) { - if (this.props.playing()) this.props.Pause(); + if (this._props.playing()) this._props.Pause(); else { - this.props.playFrom(seekTimeInSeconds, endTime); + this._props.playFrom(seekTimeInSeconds, endTime); this.scrollToTime(seekTimeInSeconds); } } else { if (seekTimeInSeconds < NumCast(this.layoutDoc._layout_currentTimecode) && endTime > NumCast(this.layoutDoc._layout_currentTimecode)) { - if (!this.layoutDoc.autoPlayAnchors && this.props.playing()) { - this.props.Pause(); + if (!this.layoutDoc.autoPlayAnchors && this._props.playing()) { + this._props.Pause(); } else { - this.props.Play(); + this._props.Play(); } } else { - this.props.playFrom(seekTimeInSeconds, endTime); + this._props.playFrom(seekTimeInSeconds, endTime); this.scrollToTime(seekTimeInSeconds); } } @@ -451,17 +473,17 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack const seekTimeInSeconds = this.anchorStart(anchorDoc) - 0.05; const endTime = this.anchorEnd(anchorDoc); if (seekTimeInSeconds < NumCast(this.layoutDoc._layout_currentTimecode) + 1e-4 && endTime > NumCast(this.layoutDoc._layout_currentTimecode) - 1e-4) { - if (this.props.playing()) this.props.Pause(); - else if (this.layoutDoc.autoPlayAnchors) this.props.Play(); + if (this._props.playing()) this._props.Pause(); + else if (this.layoutDoc.autoPlayAnchors) this._props.Play(); else if (!this.layoutDoc.autoPlayAnchors) { const rect = this._timeline?.getBoundingClientRect(); - rect && this.props.setTime(this.toTimeline(clientX - rect.x, rect.width)); + rect && this._props.setTime(this.toTimeline(clientX - rect.x, rect.width)); } } else { if (this.layoutDoc.autoPlayAnchors) { - this.props.playFrom(seekTimeInSeconds, endTime); + this._props.playFrom(seekTimeInSeconds, endTime); } else { - this.props.setTime(seekTimeInSeconds); + this._props.setTime(seekTimeInSeconds); } } return { select: true }; @@ -491,24 +513,24 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack }; dictationHeightPercent = 50; - dictationHeight = () => (this.props.PanelHeight() * (100 - this.dictationHeightPercent)) / 100; + dictationHeight = () => (this._props.PanelHeight() * (100 - this.dictationHeightPercent)) / 100; @computed get timelineContentHeight() { - return (this.props.PanelHeight() * this.dictationHeightPercent) / 100; + return (this._props.PanelHeight() * this.dictationHeightPercent) / 100; } @computed get timelineContentWidth() { - return this.props.PanelWidth() * this.zoomFactor; + return this._props.PanelWidth() * this.zoomFactor; } // subtract size of container border - dictationScreenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(0, -this.timelineContentHeight); + dictationScreenToLocalTransform = () => this.ScreenToLocalBoxXf().translate(0, -this.timelineContentHeight); - isContentActive = () => this.props.isSelected() || this.props.isContentActive(); + isContentActive = () => this._props.isSelected() || this._props.isContentActive(); currentTimecode = () => this.currentTime; // renders selection region on timeline @computed get selectionContainer() { - const markerEnd = CollectionStackedTimeline.SelectingRegion === this ? this.currentTime : this._markerEnd; + const markerEnd = this._selectingRegion ? this.currentTime : this._markerEnd; return markerEnd === undefined ? null : ( <div className="collectionStackedTimeline-selector" @@ -521,7 +543,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack } @computed get timelineEvents() { - return this.props.isContentActive() ? 'all' : this.props.isContentActive() === false ? 'none' : undefined; + return this._props.isContentActive() ? 'all' : this._props.isContentActive() === false ? 'none' : undefined; } render() { const overlaps: { @@ -529,17 +551,17 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack anchorEndTime: number; level: number; }[] = []; - const drawAnchors = this.childDocs.map(anchor => ({ - level: this.getLevel(anchor, overlaps), - anchor, + const drawAnchors = this.childLayoutPairs.map(pair => ({ + level: this.getLevel(pair.layout, overlaps), + anchor: pair.layout, })); const maxLevel = overlaps.reduce((m, o) => Math.max(m, o.level), 0) + 2; return this.clipDuration === 0 ? null : ( <div ref={this.createDashEventsTarget} style={{ pointerEvents: this.timelineEvents }}> <div className="collectionStackedTimeline-timelineContainer" - style={{ width: this.props.PanelWidth(), cursor: SnappingManager.GetIsDragging() ? 'grab' : '' }} - onWheel={e => e.stopPropagation()} + style={{ width: this._props.PanelWidth(), cursor: SnappingManager.IsDragging ? 'grab' : '' }} + onWheel={e => this.isContentActive() && e.stopPropagation()} onScroll={this.setScroll} onMouseMove={e => this.isContentActive() && this.onHover(e)} ref={wrapper => (this._timelineWrapper = wrapper)}> @@ -554,11 +576,11 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack const end = this.anchorEnd(d.anchor, start + (10 / this.timelineContentWidth) * this.clipDuration); if (end < this.clipStart || start > this.clipEnd) return null; const left = Math.max(((start - this.clipStart) / this.clipDuration) * this.timelineContentWidth, 0); - const top = (d.level / maxLevel) * this.props.PanelHeight(); + const top = (d.level / maxLevel) * this._props.PanelHeight(); const timespan = Math.max(0, Math.min(end - this.clipStart, this.clipEnd)) - Math.max(0, start - this.clipStart); const width = (timespan / this.clipDuration) * this.timelineContentWidth; - const height = this.props.PanelHeight() / maxLevel; - return this.props.Document.hideAnchors ? null : ( + const height = this._props.PanelHeight() / maxLevel; + return this.Document.hideAnchors ? null : ( <div className={'collectionStackedTimeline-marker-timeline'} key={d.anchor[Id]} @@ -570,7 +592,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack pointerEvents: 'none', }}> <StackedTimelineAnchor - {...this.props} + {...this._props} mark={d.anchor} rangeClickScript={this.rangeClickScript} rangePlayScript={this.rangePlayScript} @@ -591,18 +613,19 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack ); })} {!this.IsTrimming && this.selectionContainer} - {!this.props.PanelHeight() ? null : ( + {!this._props.PanelHeight() ? null : ( <AudioWaveform - rawDuration={this.props.rawDuration} - fieldKey={this.props.dataFieldKey} + rawDuration={this._props.rawDuration} + fieldKey={this._props.dataFieldKey} duration={this.clipDuration} - mediaPath={this.props.mediaPath} + mediaPath={this._props.mediaPath} layoutDoc={this.layoutDoc} clipStart={this.clipStart} clipEnd={this.clipEnd} zoomFactor={this.zoomFactor} PanelHeight={this.timelineContentHeight} PanelWidth={this.timelineContentWidth} + progress={(this.currentTime - this.clipStart) / this.clipDuration} /> )} @@ -669,8 +692,8 @@ interface StackedTimelineAnchorProps { width: number; height: number; toTimeline: (screen_delta: number, width: number) => number; - styleProvider?: (doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string) => any; - playLink: (linkDoc: Doc, options: DocFocusOptions) => void; + styleProvider?: StyleProviderFuncType; + playLink: (linkDoc: Doc, options: FocusViewOptions) => void; setTime: (time: number) => void; startTag: string; endTag: string; @@ -679,50 +702,51 @@ interface StackedTimelineAnchorProps { isDocumentActive?: () => boolean | undefined; ScreenToLocalTransform: () => Transform; _timeline: HTMLDivElement | null; - focus: DocFocusFunc; + focus: FocusFuncType; currentTimecode: () => number; - isSelected: (outsideReaction?: boolean) => boolean; + isSelected: () => boolean; stackedTimeline: CollectionStackedTimeline; trimStart: number; trimEnd: number; } @observer -class StackedTimelineAnchor extends React.Component<StackedTimelineAnchorProps> { +class StackedTimelineAnchor extends ObservableReactComponent<StackedTimelineAnchorProps> { _lastTimecode: number; _disposer: IReactionDisposer | undefined; - constructor(props: any) { + constructor(props: StackedTimelineAnchorProps) { super(props); - this._lastTimecode = this.props.currentTimecode(); + makeObservable(this); + this._lastTimecode = this._props.currentTimecode(); } // updates marker document title to reflect correct timecodes computeTitle = () => { - if (this.props.mark.type !== DocumentType.LABEL) return undefined; - const start = Math.max(NumCast(this.props.mark[this.props.startTag]), this.props.trimStart) - this.props.trimStart; - const end = Math.min(NumCast(this.props.mark[this.props.endTag]), this.props.trimEnd) - this.props.trimStart; + if (this._props.mark.type !== DocumentType.LABEL) return undefined; + const start = Math.max(NumCast(this._props.mark[this._props.startTag]), this._props.trimStart) - this._props.trimStart; + const end = Math.min(NumCast(this._props.mark[this._props.endTag]), this._props.trimEnd) - this._props.trimStart; return `#${formatTime(start)}-${formatTime(end)}`; }; componentDidMount() { this._disposer = reaction( - () => this.props.currentTimecode(), + () => this._props.currentTimecode(), time => { - const dictationDoc = Cast(this.props.layoutDoc.data_dictation, Doc, null); - const isDictation = dictationDoc && LinkManager.Links(this.props.mark).some(link => Cast(link.link_anchor_1, Doc, null)?.annotationOn === dictationDoc); + const dictationDoc = Cast(this._props.layoutDoc.data_dictation, Doc, null); + const isDictation = dictationDoc && LinkManager.Links(this._props.mark).some(link => Cast(link.link_anchor_1, Doc, null)?.annotationOn === dictationDoc); if ( !LightboxView.LightboxDoc && // bcz: when should links be followed? we don't want to move away from the video to follow a link but we can open it in a sidebar/etc. But we don't know that upfront. // for now, we won't follow any links when the lightbox is oepn to avoid "losing" the video. - /*(isDictation || !Doc.AreProtosEqual(LightboxView.LightboxDoc, this.props.layoutDoc))*/ - !this.props.layoutDoc.dontAutoFollowLinks && - LinkManager.Links(this.props.mark).length && - time > NumCast(this.props.mark[this.props.startTag]) && - time < NumCast(this.props.mark[this.props.endTag]) && - this._lastTimecode < NumCast(this.props.mark[this.props.startTag]) - 1e-5 + /*(isDictation || !Doc.AreProtosEqual(LightboxView.LightboxDoc, this._props.layoutDoc))*/ + !this._props.layoutDoc.dontAutoFollowLinks && + LinkManager.Links(this._props.mark).length && + time > NumCast(this._props.mark[this._props.startTag]) && + time < NumCast(this._props.mark[this._props.endTag]) && + this._lastTimecode < NumCast(this._props.mark[this._props.startTag]) - 1e-5 ) { - LinkFollower.FollowLink(undefined, this.props.mark, false); + LinkFollower.FollowLink(undefined, this._props.mark, false); } this._lastTimecode = time; } @@ -737,16 +761,16 @@ class StackedTimelineAnchor extends React.Component<StackedTimelineAnchorProps> // starting the drag event for anchor resizing @action onAnchorDown = (e: React.PointerEvent, anchor: Doc, left: boolean): void => { - //this.props._timeline?.setPointerCapture(e.pointerId); + //this._props._timeline?.setPointerCapture(e.pointerId); const newTime = (e: PointerEvent) => { const rect = (e.target as any).getBoundingClientRect(); - return this.props.toTimeline(e.clientX - rect.x, rect.width); + return this._props.toTimeline(e.clientX - rect.x, rect.width); }; const changeAnchor = (anchor: Doc, left: boolean, time: number | undefined) => { - const timelineOnly = Cast(anchor[this.props.startTag], 'number', null) !== undefined; + const timelineOnly = Cast(anchor[this._props.startTag], 'number', null) !== undefined; if (timelineOnly) { - if (!left && time !== undefined && time <= NumCast(anchor[this.props.startTag])) time = undefined; - Doc.SetInPlace(anchor, left ? this.props.startTag : this.props.endTag, time, true); + if (!left && time !== undefined && time <= NumCast(anchor[this._props.startTag])) time = undefined; + Doc.SetInPlace(anchor, left ? this._props.startTag : this._props.endTag, time, true); if (!left) Doc.SetInPlace(anchor, 'layout_borderRounding', time !== undefined ? undefined : '100%', true); } else { anchor[left ? '_timecodeToShow' : '_timecodeToHide'] = time; @@ -760,11 +784,11 @@ class StackedTimelineAnchor extends React.Component<StackedTimelineAnchorProps> e, e => { if (!undo) undo = UndoManager.StartBatch('drag anchor'); - this.props.setTime(newTime(e)); + this._props.setTime(newTime(e)); return changeAnchor(anchor, left, newTime(e)); }, action(e => { - this.props.setTime(newTime(e)); + this._props.setTime(newTime(e)); undo?.end(); this.noEvents = false; }), @@ -775,7 +799,9 @@ class StackedTimelineAnchor extends React.Component<StackedTimelineAnchorProps> // context menu contextMenuItems = () => { const resetTitle = { - script: ScriptField.MakeFunction(`self.title = self["${this.props.endTag}"] ? "#" + formatToTime(self["${this.props.startTag}"]) + "-" + formatToTime(self["${this.props.endTag}"]) : "#" + formatToTime(self["${this.props.startTag}"])`)!, + script: ScriptField.MakeFunction( + `this.title = this["${this._props.endTag}"] ? "#" + formatToTime(this["${this._props.startTag}"]) + "-" + formatToTime(this["${this._props.endTag}"]) : "#" + formatToTime(this["${this._props.startTag}"])` + )!, icon: 'folder-plus', label: 'Reset Title', }; @@ -784,9 +810,9 @@ class StackedTimelineAnchor extends React.Component<StackedTimelineAnchorProps> // renders anchor LabelBox renderInner = computedFn(function (this: StackedTimelineAnchor, mark: Doc, script: undefined | (() => ScriptField), doublescript: undefined | (() => ScriptField), screenXf: () => Transform, width: () => number, height: () => number) { - const anchor = observable({ view: undefined as any }); - const focusFunc = (doc: Doc, options: DocFocusOptions): number | undefined => { - this.props.playLink(mark, options); + const anchor = observable({ view: undefined as Opt<DocumentView> | null }); + const focusFunc = (doc: Doc, options: FocusViewOptions): number | undefined => { + this._props.playLink(mark, options); return undefined; }; return { @@ -794,19 +820,19 @@ class StackedTimelineAnchor extends React.Component<StackedTimelineAnchorProps> view: ( <DocumentView key="view" - {...this.props} + {...this._props} NativeWidth={returnZero} NativeHeight={returnZero} ref={action((r: DocumentView | null) => (anchor.view = r))} Document={mark} - DataDoc={undefined} - docViewPath={returnEmptyDoclist} + TemplateDataDocument={undefined} + containerViewPath={returnEmptyDoclist} pointerEvents={this.noEvents ? returnNone : undefined} - styleProvider={this.props.styleProvider} - renderDepth={this.props.renderDepth + 1} + styleProvider={this._props.styleProvider} + renderDepth={this._props.renderDepth + 1} LayoutTemplate={undefined} LayoutTemplateString={LabelBox.LayoutStringWithTitle('data', this.computeTitle())} - isDocumentActive={this.props.isDocumentActive} + isDocumentActive={this._props.isDocumentActive} PanelWidth={width} PanelHeight={height} layout_fitWidth={returnTrue} @@ -817,31 +843,29 @@ class StackedTimelineAnchor extends React.Component<StackedTimelineAnchorProps> searchFilterDocs={returnEmptyDoclist} childFilters={returnEmptyFilter} childFiltersByRanges={returnEmptyFilter} - rootSelected={returnFalse} - onClick={script} - onDoubleClick={this.props.layoutDoc.autoPlayAnchors ? undefined : doublescript} + onClickScript={script} + onDoubleClickScript={this._props.layoutDoc.autoPlayAnchors ? undefined : doublescript} ignoreAutoHeight={false} hideResizeHandles={true} - bringToFront={emptyFunction} contextMenuItems={this.contextMenuItems} /> ), }; }); - anchorScreenToLocalXf = () => this.props.ScreenToLocalTransform().translate(-this.props.left, -this.props.top); - width = () => this.props.width; - height = () => this.props.height; + anchorScreenToLocalXf = () => this._props.ScreenToLocalTransform().translate(-this._props.left, -this._props.top); + width = () => this._props.width; + height = () => this._props.height; render() { - const inner = this.renderInner(this.props.mark, this.props.rangeClickScript, this.props.rangePlayScript, this.anchorScreenToLocalXf, this.width, this.height); + const inner = this.renderInner(this._props.mark, this._props.rangeClickScript, this._props.rangePlayScript, this.anchorScreenToLocalXf, this.width, this.height); return ( <div style={{ pointerEvents: this.noEvents ? 'none' : undefined }}> {inner.view} - {!inner.anchor.view || !SelectionManager.IsSelected(inner.anchor.view) ? null : ( + {!inner.anchor.view || !inner.anchor.view.IsSelected ? null : ( <> - <div key="left" className="collectionStackedTimeline-left-resizer" style={{ pointerEvents: this.noEvents ? 'none' : undefined }} onPointerDown={e => this.onAnchorDown(e, this.props.mark, true)} /> - <div key="right" className="collectionStackedTimeline-resizer" style={{ pointerEvents: this.noEvents ? 'none' : undefined }} onPointerDown={e => this.onAnchorDown(e, this.props.mark, false)} /> + <div key="left" className="collectionStackedTimeline-left-resizer" style={{ pointerEvents: this.noEvents ? 'none' : undefined }} onPointerDown={e => this.onAnchorDown(e, this._props.mark, true)} /> + <div key="right" className="collectionStackedTimeline-resizer" style={{ pointerEvents: this.noEvents ? 'none' : undefined }} onPointerDown={e => this.onAnchorDown(e, this._props.mark, false)} /> </> )} </div> diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index dddb3ec71..6225cc52a 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; .collectionMasonryView { display: inline; @@ -142,7 +142,7 @@ transform-origin: top left; grid-column-end: span 1; height: 100%; - margin: auto; + //margin: auto; display: inline-grid; } diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 0b29e7286..89e72152a 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -1,20 +1,21 @@ -import React = require('react'); import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { CursorProperty } from 'csstype'; -import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from 'mobx'; +import * as CSS from 'csstype'; +import { action, computed, IReactionDisposer, makeObservable, observable, ObservableMap, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { Doc, Opt } from '../../../fields/Doc'; -import { DocData, Height, Width } from '../../../fields/DocSymbols'; +import { DocData } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; import { List } from '../../../fields/List'; import { listSpec } from '../../../fields/Schema'; import { SchemaHeaderField } from '../../../fields/SchemaHeaderField'; -import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from '../../../fields/Types'; +import { BoolCast, Cast, DocCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types'; import { TraceMobx } from '../../../fields/util'; -import { emptyFunction, lightOrDark, returnEmptyDoclist, returnFalse, returnNone, returnZero, setupMoveUpEvents, smoothScroll, Utils } from '../../../Utils'; +import { emptyFunction, returnEmptyDoclist, returnFalse, returnNone, returnZero, setupMoveUpEvents, smoothScroll, Utils } from '../../../Utils'; import { Docs, DocUtils } from '../../documents/Documents'; import { CollectionViewType } from '../../documents/DocumentTypes'; import { DragManager, dropActionType } from '../../util/DragManager'; +import { SettingsManager } from '../../util/SettingsManager'; import { SnappingManager } from '../../util/SnappingManager'; import { Transform } from '../../util/Transform'; import { undoBatch, UndoManager } from '../../util/UndoManager'; @@ -23,15 +24,14 @@ import { ContextMenuProps } from '../ContextMenuItem'; import { EditableView } from '../EditableView'; import { LightboxView } from '../LightboxView'; import { CollectionFreeFormDocumentView } from '../nodes/CollectionFreeFormDocumentView'; -import { DocFocusOptions, DocumentView, DocumentViewProps } from '../nodes/DocumentView'; -import { FieldViewProps } from '../nodes/FieldView'; +import { DocumentView } from '../nodes/DocumentView'; +import { FocusViewOptions, FieldViewProps } from '../nodes/FieldView'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; import { StyleProp } from '../StyleProvider'; import { CollectionMasonryViewFieldRow } from './CollectionMasonryViewFieldRow'; import './CollectionStackingView.scss'; import { CollectionStackingViewFieldColumn } from './CollectionStackingViewFieldColumn'; import { CollectionSubView } from './CollectionSubView'; -import { SettingsManager } from '../../util/SettingsManager'; const _global = (window /* browser */ || global) /* node */ as any; export type collectionStackingViewProps = { @@ -59,12 +59,12 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection // map of node headers to their heights. Used in Masonry @observable _heightMap = new Map<string, number>(); // Assuming that this is the current css cursor style - @observable _cursor: CursorProperty = 'ew-resize'; + @observable _cursor: CSS.Property.Cursor = 'ew-resize'; // gets reset whenever we scroll. Not sure what it is @observable _scroll = 0; // used to force the document decoration to update when scrolling // does this mean whether the browser is hidden? Or is chrome something else entirely? @computed get chromeHidden() { - return this.props.chromeHidden || BoolCast(this.layoutDoc.chromeHidden); + return this._props.chromeHidden || BoolCast(this.layoutDoc.chromeHidden); } // it looks like this gets the column headers that Mehek was showing just now @computed get colHeaderData() { @@ -77,18 +77,18 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection // filteredChildren is what you want to work with. It's the list of things that you're currently displaying @computed get filteredChildren() { const children = this.childLayoutPairs.filter(pair => pair.layout instanceof Doc && !pair.layout.hidden).map(pair => pair.layout); - if (this.props.sortFunc) children.sort(this.props.sortFunc); + if (this._props.sortFunc) children.sort(this._props.sortFunc); return children; } // how much margin we give the header @computed get headerMargin() { - return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HeaderMargin); + return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.HeaderMargin); } @computed get xMargin() { - return NumCast(this.layoutDoc._xMargin, Math.max(3, 0.05 * this.props.PanelWidth())); + return NumCast(this.layoutDoc._xMargin, Math.max(3, 0.05 * this._props.PanelWidth())); } @computed get yMargin() { - return this.props.yPadding || NumCast(this.layoutDoc._yMargin, Math.min(5, 0.05 * this.props.PanelWidth())); + return this._props.yPadding || NumCast(this.layoutDoc._yMargin, Math.min(5, 0.05 * this._props.PanelWidth())); } @computed get gridGap() { @@ -96,7 +96,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection } // are we stacking or masonry? @computed get isStackingView() { - return (this.props.type_collection ?? this.layoutDoc._type_collection) === CollectionViewType.Stacking; + return (this._props.type_collection ?? this.layoutDoc._type_collection) === CollectionViewType.Stacking; } // this is the number of StackingViewFieldColumns that we have @computed get numGroupColumns() { @@ -108,16 +108,16 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection } // columnWidth handles the margin on the left and right side of the documents @computed get columnWidth() { - return Math.min(this.props.PanelWidth() - 2 * this.xMargin, this.isStackingView ? Number.MAX_VALUE : this.layoutDoc._columnWidth === -1 ? this.props.PanelWidth() - 2 * this.xMargin : NumCast(this.layoutDoc._columnWidth, 250)); + return Math.min(this._props.PanelWidth() - 2 * this.xMargin, this.isStackingView ? Number.MAX_VALUE : this.layoutDoc._columnWidth === -1 ? this._props.PanelWidth() - 2 * this.xMargin : NumCast(this.layoutDoc._columnWidth, 250)); } @computed get NodeWidth() { - return this.props.PanelWidth() - this.gridGap; + return this._props.PanelWidth() - this.gridGap; } constructor(props: any) { super(props); - + makeObservable(this); if (this.colHeaderData === undefined) { // TODO: what is a layout doc? Is it literally how this document is supposed to be layed out? // here we're making an empty list of column headers (again, what Mehek showed us) @@ -138,7 +138,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection // assuming we need to get rowSpan because we might be dealing with many columns. Grid gap makes sense if multiple columns const rowSpan = Math.ceil((height() + this.gridGap) / this.gridGap); // just getting the style - const style = this.isStackingView ? { margin: this.rootDoc._stacking_alignCenter ? 'auto' : undefined, width: width(), marginTop: i ? this.gridGap : 0, height: height() } : { gridRowEnd: `span ${rowSpan}` }; + const style = this.isStackingView ? { margin: this.Document._stacking_alignCenter ? 'auto' : undefined, width: width(), marginTop: i ? this.gridGap : 0, height: height() } : { gridRowEnd: `span ${rowSpan}` }; // So we're choosing whether we're going to render a column or a masonry doc return ( <div className={`collectionStackingView-${this.isStackingView ? 'columnDoc' : 'masonryDoc'}`} key={d[Id]} style={style}> @@ -203,7 +203,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection componentDidMount() { super.componentDidMount?.(); - this.props.setContentView?.(this); + this._props.setContentViewBox?.(this); // reset section headers when a new filter is inputted this._pivotFieldDisposer = reaction( @@ -214,7 +214,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection () => this.layoutDoc._layout_autoHeight, layout_autoHeight => layout_autoHeight && - this.props.setHeight?.( + this._props.setHeight?.( Math.min( NumCast(this.layoutDoc._maxHeight, Number.MAX_SAFE_INTEGER), this.headerMargin + (this.isStackingView ? Math.max(...this.refList.map(r => Number(getComputedStyle(r).height.replace('px', '')))) : this.refList.reduce((p, r) => p + Number(getComputedStyle(r).height.replace('px', '')), 0)) @@ -229,20 +229,19 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection this._layout_autoHeightDisposer?.(); } - isAnyChildContentActive = () => this.props.isAnyChildContentActive(); + isAnyChildContentActive = () => this._props.isAnyChildContentActive(); - @action moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean): boolean => { - return this.props.removeDocument?.(doc) && addDocument?.(doc) ? true : false; + return this._props.removeDocument?.(doc) && addDocument?.(doc) ? true : false; }; createRef = (ele: HTMLDivElement | null) => { this._masonryGridRef = ele; this.createDashEventsTarget(ele!); //so the whole grid is the drop target? }; - onChildClickHandler = () => this.props.childClickScript || ScriptCast(this.Document.onChildClick); + onChildClickHandler = () => this._props.childClickScript || ScriptCast(this.Document.onChildClick); @computed get onChildDoubleClickHandler() { - return () => this.props.childDoubleClickScript || ScriptCast(this.Document.onChildDoubleClick); + return () => this._props.childDoubleClickScript || ScriptCast(this.Document.onChildDoubleClick); } scrollToBottom = () => { @@ -250,13 +249,13 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection }; // let's dive in and get the actual document we want to drag/move around - focusDocument = (doc: Doc, options: DocFocusOptions) => { + focusDocument = (doc: Doc, options: FocusViewOptions) => { Doc.BrushDoc(doc); const found = this._mainCont && Array.from(this._mainCont.getElementsByClassName('documentView-node')).find((node: any) => node.id === doc[Id]); if (found) { const top = found.getBoundingClientRect().top; - const localTop = this.props.ScreenToLocalTransform().transformPoint(0, top); + const localTop = this.ScreenToLocalBoxXf().transformPoint(0, top); if (Math.floor(localTop[1]) !== 0) { let focusSpeed = options.zoomTime ?? 500; smoothScroll(focusSpeed, this._mainCont!, localTop[1] + this._mainCont!.scrollTop, options.easeFunc); @@ -266,102 +265,100 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection return undefined; }; - styleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps>, property: string) => { + styleProvider = (doc: Doc | undefined, props: Opt<FieldViewProps>, property: string) => { if (property === StyleProp.Opacity && doc) { - if (this.props.childOpacity) { - return this.props.childOpacity(); + if (this._props.childOpacity) { + return this._props.childOpacity(); } if (this.Document._currentFrame !== undefined) { return CollectionFreeFormDocumentView.getValues(doc, NumCast(this.Document._currentFrame))?.opacity; } } - return this.props.styleProvider?.(doc, props, property); + return this._props.styleProvider?.(doc, props, property); }; @undoBatch - @action onKeyDown = (e: React.KeyboardEvent, fieldProps: FieldViewProps) => { - const docView = fieldProps.DocumentView?.(); - if (docView && ['Enter'].includes(e.key) && e.ctrlKey) { + if (['Enter'].includes(e.key) && e.ctrlKey) { e.stopPropagation?.(); const below = !e.altKey && e.key !== 'Tab'; - const layout_fieldKey = StrCast(docView.LayoutFieldKey); - const newDoc = Doc.MakeCopy(docView.rootDoc, true); - const dataField = docView.rootDoc[Doc.LayoutFieldKey(newDoc)]; + const layout_fieldKey = StrCast(fieldProps.fieldKey); + const newDoc = Doc.MakeCopy(fieldProps.Document, true); + const dataField = fieldProps.Document[Doc.LayoutFieldKey(newDoc)]; newDoc[DocData][Doc.LayoutFieldKey(newDoc)] = dataField === undefined || Cast(dataField, listSpec(Doc), null)?.length !== undefined ? new List<Doc>([]) : undefined; - if (layout_fieldKey !== 'layout' && docView.rootDoc[layout_fieldKey] instanceof Doc) { - newDoc[layout_fieldKey] = docView.rootDoc[layout_fieldKey]; + if (layout_fieldKey !== 'layout' && fieldProps.Document[layout_fieldKey] instanceof Doc) { + newDoc[layout_fieldKey] = fieldProps.Document[layout_fieldKey]; } - Doc.GetProto(newDoc).text = undefined; - FormattedTextBox.SelectOnLoad = newDoc[Id]; + newDoc[DocData].text = undefined; + FormattedTextBox.SetSelectOnLoad(newDoc); return this.addDocument?.(newDoc); } }; - isContentActive = () => (this.props.isContentActive() ? true : this.props.isSelected() === false || this.props.isContentActive() === false ? false : undefined); + isContentActive = () => (this._props.isContentActive() ? true : this._props.isSelected() === false || this._props.isContentActive() === false ? false : undefined); @observable _renderCount = 5; isChildContentActive = () => - this.props.isContentActive?.() === false - ? false - : this.props.isDocumentActive?.() && (this.props.childDocumentsActive?.() || BoolCast(this.rootDoc.childDocumentsActive)) - ? true - : this.props.childDocumentsActive?.() === false || this.rootDoc.childDocumentsActive === false + this._props.isContentActive?.() === false ? false - : undefined; - isChildButtonContentActive = () => (this.props.childDocumentsActive?.() === false || this.rootDoc.childDocumentsActive === false ? false : undefined); + : this._props.isDocumentActive?.() && (this._props.childDocumentsActive?.() || BoolCast(this.Document.childDocumentsActive)) + ? true + : this._props.childDocumentsActive?.() === false || this.Document.childDocumentsActive === false + ? false + : undefined; + isChildButtonContentActive = () => (this._props.childDocumentsActive?.() === false || this.Document.childDocumentsActive === false ? false : undefined); @observable docRefs = new ObservableMap<Doc, DocumentView>(); + childFitWidth = (doc: Doc) => Cast(this.Document.childLayoutFitWidth, 'boolean', this._props.childLayoutFitWidth?.(doc) ?? Cast(doc.layout_fitWidth, 'boolean', null)); // this is what renders the document that you see on the screen // called in Children: this actually adds a document to our children list getDisplayDoc(doc: Doc, width: () => number, count: number) { - const dataDoc = !doc.isTemplateDoc && !doc.isTemplateForField ? undefined : this.props.DataDoc; + const dataDoc = doc.isTemplateDoc || doc.isTemplateForField ? this._props.TemplateDataDocument : undefined; const height = () => this.getDocHeight(doc); - + const panelHeight = () => (this.isStackingView ? height() : Math.min(height(), this._props.PanelHeight())); + const panelWidth = () => (this.isStackingView ? width() : this.columnWidth); const stackedDocTransform = () => this.getDocTransform(doc); this._docXfs.push({ stackedDocTransform, width, height }); return count > this._renderCount ? null : ( <DocumentView ref={action((r: DocumentView) => r?.ContentDiv && this.docRefs.set(doc, r))} Document={doc} - DataDoc={dataDoc ?? (!Doc.AreProtosEqual(doc[DocData], doc) ? doc[DocData] : undefined)} - renderDepth={this.props.renderDepth + 1} - PanelWidth={width} - PanelHeight={height} - pointerEvents={this.props.DocumentView?.().props.onClick?.() ? returnNone : undefined} // if the stack has an onClick, then we don't want the contents to be interactive (see CollectionPileView) + TemplateDataDocument={dataDoc ?? (Doc.AreProtosEqual(doc[DocData], doc) ? undefined : doc[DocData])} + renderDepth={this._props.renderDepth + 1} + PanelWidth={panelWidth} + PanelHeight={panelHeight} + pointerEvents={this.DocumentView?.()._props.onClickScript?.() ? returnNone : undefined} // if the stack has an onClick, then we don't want the contents to be interactive (see CollectionPileView) styleProvider={this.styleProvider} - docViewPath={this.props.docViewPath} - layout_fitWidth={this.props.childLayoutFitWidth} + containerViewPath={this.childContainerViewPath} + layout_fitWidth={this.childFitWidth} isContentActive={doc.onClick ? this.isChildButtonContentActive : this.isChildContentActive} onKey={this.onKeyDown} - onBrowseClick={this.props.onBrowseClick} + onBrowseClickScript={this._props.onBrowseClickScript} isDocumentActive={this.isContentActive} - LayoutTemplate={this.props.childLayoutTemplate} - LayoutTemplateString={this.props.childLayoutString} - NativeWidth={this.props.childIgnoreNativeSize ? returnZero : this.props.childLayoutFitWidth?.(doc) || (doc._layout_fitWidth && !Doc.NativeWidth(doc)) ? width : undefined} // explicitly ignore nativeWidth/height if childIgnoreNativeSize is set- used by PresBox - NativeHeight={this.props.childIgnoreNativeSize ? returnZero : this.props.childLayoutFitWidth?.(doc) || (doc._layout_fitWidth && !Doc.NativeHeight(doc)) ? height : undefined} - dontCenter={this.props.childIgnoreNativeSize ? 'xy' : undefined} - dontRegisterView={BoolCast(this.layoutDoc.childDontRegisterViews, this.props.dontRegisterView)} // used to be true if DataDoc existed, but template textboxes won't layout_autoHeight resize if dontRegisterView is set, but they need to. + LayoutTemplate={this._props.childLayoutTemplate} + LayoutTemplateString={this._props.childLayoutString} + NativeWidth={this._props.childIgnoreNativeSize ? returnZero : this._props.childLayoutFitWidth?.(doc) || (this.childFitWidth(doc) && !Doc.NativeWidth(doc)) ? width : undefined} // explicitly ignore nativeWidth/height if childIgnoreNativeSize is set- used by PresBox + NativeHeight={this._props.childIgnoreNativeSize ? returnZero : this._props.childLayoutFitWidth?.(doc) || (this.childFitWidth(doc) && !Doc.NativeHeight(doc)) ? height : undefined} + dontCenter={this._props.childIgnoreNativeSize ? 'xy' : (StrCast(this.layoutDoc.layout_dontCenter) as any)} + dontRegisterView={BoolCast(this.layoutDoc.childDontRegisterViews, this._props.dontRegisterView)} // used to be true if DataDoc existed, but template textboxes won't layout_autoHeight resize if dontRegisterView is set, but they need to. rootSelected={this.rootSelected} - layout_showTitle={this.props.childlayout_showTitle} - dragAction={(this.layoutDoc.childDragAction ?? this.props.childDragAction) as dropActionType} - onClick={this.onChildClickHandler} - onDoubleClick={this.onChildDoubleClickHandler} + layout_showTitle={this._props.childlayout_showTitle} + dragAction={(this.layoutDoc.childDragAction ?? this._props.childDragAction) as dropActionType} + onClickScript={this.onChildClickHandler} + onDoubleClickScript={this.onChildDoubleClickHandler} ScreenToLocalTransform={stackedDocTransform} focus={this.focusDocument} childFilters={this.childDocFilters} - hideDecorationTitle={this.props.childHideDecorationTitle?.()} - hideResizeHandles={this.props.childHideResizeHandles?.()} - hideTitle={this.props.childHideTitle?.()} + hideDecorationTitle={this._props.childHideDecorationTitle} + hideResizeHandles={this._props.childHideResizeHandles} childFiltersByRanges={this.childDocRangeFilters} searchFilterDocs={this.searchFilterDocs} - xPadding={NumCast(this.layoutDoc._childXPadding, this.props.childXPadding)} - yPadding={NumCast(this.layoutDoc._childYPadding, this.props.childYPadding)} - addDocument={this.props.addDocument} - moveDocument={this.props.moveDocument} - removeDocument={this.props.removeDocument} - contentPointerEvents={StrCast(this.layoutDoc.contentPointerEvents) as any} - whenChildContentsActiveChanged={this.props.whenChildContentsActiveChanged} - addDocTab={this.props.addDocTab} - bringToFront={returnFalse} - pinToPres={this.props.pinToPres} + xPadding={NumCast(this.layoutDoc._childXPadding, this._props.childXPadding)} + yPadding={NumCast(this.layoutDoc._childYPadding, this._props.childYPadding)} + addDocument={this._props.addDocument} + moveDocument={this._props.moveDocument} + removeDocument={this._props.removeDocument} + contentPointerEvents={StrCast(this.layoutDoc.childContentPointerEvents) as any} + whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged} + addDocTab={this._props.addDocTab} + pinToPres={this._props.pinToPres} /> ); } @@ -371,31 +368,31 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection this._scroll; // must be referenced for document decorations to update when the text box container is scrolled const { translateX, translateY } = Utils.GetScreenTransform(dref?.ContentDiv); // the document view may center its contents and if so, will prepend that onto the screenToLocalTansform. so we have to subtract that off - return new Transform(-translateX + (dref?.centeringX || 0), -translateY + (dref?.centeringY || 0), 1).scale(this.props.ScreenToLocalTransform().Scale); + return new Transform(-translateX + (dref?.centeringX || 0), -translateY + (dref?.centeringY || 0), 1).scale(this.ScreenToLocalBoxXf().Scale); } getDocWidth(d?: Doc) { if (!d) return 0; - const childLayoutDoc = Doc.Layout(d, this.props.childLayoutTemplate?.()); + const childLayoutDoc = Doc.Layout(d, this._props.childLayoutTemplate?.()); const maxWidth = this.columnWidth / this.numGroupColumns; - if (!this.layoutDoc._columnsFill && !(childLayoutDoc._layout_fitWidth || this.props.childLayoutFitWidth?.(d))) { - return Math.min(d[Width](), maxWidth); + if (!this.layoutDoc._columnsFill && !this.childFitWidth(childLayoutDoc)) { + return Math.min(NumCast(d._width), maxWidth); } return maxWidth; } getDocHeight(d?: Doc) { if (!d || d.hidden) return 0; - const childLayoutDoc = Doc.Layout(d, this.props.childLayoutTemplate?.()); - const childDataDoc = !d.isTemplateDoc && !d.isTemplateForField ? undefined : this.props.DataDoc; - const maxHeight = (lim => (lim === 0 ? this.props.PanelWidth() : lim === -1 ? 10000 : lim))(NumCast(this.layoutDoc.childLimitHeight, -1)); - const nw = Doc.NativeWidth(childLayoutDoc, childDataDoc) || (!(childLayoutDoc._layout_fitWidth || this.props.childLayoutFitWidth?.(d)) ? d[Width]() : 0); - const nh = Doc.NativeHeight(childLayoutDoc, childDataDoc) || (!(childLayoutDoc._layout_fitWidth || this.props.childLayoutFitWidth?.(d)) ? d[Height]() : 0); + const childLayoutDoc = Doc.Layout(d, this._props.childLayoutTemplate?.()); + const childDataDoc = !d.isTemplateDoc && !d.isTemplateForField ? undefined : this._props.TemplateDataDocument; + const maxHeight = (lim => (lim === 0 ? this._props.PanelWidth() : lim === -1 ? 10000 : lim))(NumCast(this.layoutDoc.childLimitHeight, -1)); + const nw = Doc.NativeWidth(childLayoutDoc, childDataDoc) || (!this.childFitWidth(childLayoutDoc) ? NumCast(d._width) : 0); + const nh = Doc.NativeHeight(childLayoutDoc, childDataDoc) || (!this.childFitWidth(childLayoutDoc) ? NumCast(d._height) : 0); if (nw && nh) { const colWid = this.columnWidth / (this.isStackingView ? this.numGroupColumns : 1); const docWid = this.layoutDoc._columnsFill ? colWid : Math.min(this.getDocWidth(d), colWid); return Math.min(maxHeight, (docWid * nh) / nw); } const childHeight = NumCast(childLayoutDoc._height); - const panelHeight = childLayoutDoc._layout_fitWidth || this.props.childLayoutFitWidth?.(d) ? Number.MAX_SAFE_INTEGER : this.props.PanelHeight() - 2 * this.yMargin; + const panelHeight = this.childFitWidth(childLayoutDoc) ? Number.MAX_SAFE_INTEGER : this._props.PanelHeight() - 2 * this.yMargin; return Math.min(childHeight, maxHeight, panelHeight); } @@ -433,7 +430,6 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection } @undoBatch - @action onInternalDrop = (e: Event, de: DragManager.DropEvent) => { // Fairly confident that this is where the swapping of nodes in the various arrays happens const where = [de.x, de.y]; @@ -471,9 +467,9 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection } return true; } - } else if (de.complete.linkDragData?.dragDocument.embedContainer === this.props.Document && de.complete.linkDragData?.linkDragView?.props.CollectionFreeFormDocumentView?.()) { + } else if (de.complete.linkDragData?.dragDocument.embedContainer === this.Document && de.complete.linkDragData?.linkDragView?.CollectionFreeFormDocumentView) { const source = Docs.Create.TextDocument('', { _width: 200, _height: 75, _layout_fitWidth: true, title: 'dropped annotation' }); - if (!this.props.addDocument?.(source)) e.preventDefault(); + if (!this._props.addDocument?.(source)) e.preventDefault(); de.complete.linkDocument = DocUtils.MakeLink(source, de.complete.linkDragData.linkSourceGetAnchor(), { link_relationship: 'doc annotation' }); // TODODO this is where in text links get passed e.stopPropagation(); return true; @@ -489,14 +485,13 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection const dropCreator = annoDragData.dropDocCreator; annoDragData.dropDocCreator = (annotationOn: Doc | undefined) => { const dropDoc = dropCreator(annotationOn); - return dropDoc || this.rootDoc; + return dropDoc || this.Document; }; return true; } /// an item from outside of Dash is being dropped onto this stacking view (e.g, a document from the file system) @undoBatch - @action onExternalDrop = async (e: React.DragEvent): Promise<void> => { const where = [e.clientX, e.clientY]; let targInd = -1; @@ -541,10 +536,10 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection this.refList.push(ref); this.observer = new _global.ResizeObserver( action((entries: any) => { - if (this.layoutDoc._layout_autoHeight && ref && this.refList.length && !SnappingManager.GetIsDragging()) { + if (this.layoutDoc._layout_autoHeight && ref && this.refList.length && !SnappingManager.IsDragging) { const height = this.headerMargin + Math.min(NumCast(this.layoutDoc._maxHeight, Number.MAX_SAFE_INTEGER), Math.max(...this.refList.map(r => Number(getComputedStyle(r).height.replace('px', ''))))); - if (!LightboxView.IsLightboxDocView(this.props.docViewPath())) { - this.props.setHeight?.(height); + if (!LightboxView.Contains(this.DocumentView?.())) { + this._props.setHeight?.(height); } } }) @@ -555,8 +550,8 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection addDocument={this.addDocument} chromeHidden={this.chromeHidden} colHeaderData={this.colHeaderData} - Document={this.props.Document} - DataDoc={this.props.DataDoc} + Document={this.Document} + TemplateDataDocument={this._props.TemplateDataDocument} renderChildren={this.children} columnWidth={this.columnWidth} numGroupColumns={this.numGroupColumns} @@ -570,7 +565,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection yMargin={this.yMargin} type={type} createDropTarget={this.createDashEventsTarget} - screenToLocalTransform={this.props.ScreenToLocalTransform} + screenToLocalTransform={this.ScreenToLocalBoxXf} /> ); }; @@ -583,11 +578,11 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection if (types.map((i, idx) => types.indexOf(i) === idx).length === 1) { type = types[0]; } - const rows = () => (!this.isStackingView ? 1 : Math.max(1, Math.min(docList.length, Math.floor((this.props.PanelWidth() - 2 * this.xMargin) / (this.columnWidth + this.gridGap))))); + const rows = () => (!this.isStackingView ? 1 : Math.max(1, Math.min(docList.length, Math.floor((this._props.PanelWidth() - 2 * this.xMargin) / (this.columnWidth + this.gridGap))))); return ( <CollectionMasonryViewFieldRow showHandle={first} - Document={this.props.Document} + Document={this.Document} chromeHidden={this.chromeHidden} pivotField={this.pivotField} unobserveHeight={ref => this.refList.splice(this.refList.indexOf(ref), 1)} @@ -596,9 +591,9 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection this.refList.push(ref); this.observer = new _global.ResizeObserver( action((entries: any) => { - if (this.layoutDoc._layout_autoHeight && ref && this.refList.length && !SnappingManager.GetIsDragging()) { + if (this.layoutDoc._layout_autoHeight && ref && this.refList.length && !SnappingManager.IsDragging) { const height = this.refList.reduce((p, r) => p + Number(getComputedStyle(r).height.replace('px', '')), 0); - this.props.setHeight?.(2 * this.headerMargin + height); // bcz: added 2x for header to fix problem with scrollbars appearing in Tools panel + this._props.setHeight?.(2 * this.headerMargin + height); // bcz: added 2x for header to fix problem with scrollbars appearing in Tools panel } }) ); @@ -614,7 +609,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection parent={this} type={type} createDropTarget={this.createDashEventsTarget} - screenToLocalTransform={this.props.ScreenToLocalTransform} + screenToLocalTransform={this.ScreenToLocalBoxXf} setDocHeight={this.setDocHeight} /> ); @@ -664,56 +659,49 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection return35 = () => 35; @computed get buttonMenu() { - const menuDoc: Doc = Cast(this.rootDoc.layout_headerButton, Doc, null); - // TODO:glr Allow support for multiple buttons - if (menuDoc) { - const width: number = NumCast(menuDoc._width, 30); - const height: number = NumCast(menuDoc._height, 30); - return ( - <div className="buttonMenu-docBtn" style={{ width: width, height: height }}> - <DocumentView - Document={menuDoc} - DataDoc={menuDoc} - isContentActive={this.isContentActive} - isDocumentActive={this.isContentActive} - addDocument={this.props.addDocument} - moveDocument={this.props.moveDocument} - addDocTab={this.props.addDocTab} - onBrowseClick={this.props.onBrowseClick} - pinToPres={emptyFunction} - rootSelected={this.props.isSelected} - removeDocument={this.props.removeDocument} - ScreenToLocalTransform={Transform.Identity} - PanelWidth={this.return35} - PanelHeight={this.return35} - renderDepth={this.props.renderDepth} - focus={emptyFunction} - styleProvider={this.props.styleProvider} - docViewPath={returnEmptyDoclist} - whenChildContentsActiveChanged={emptyFunction} - bringToFront={emptyFunction} - childFilters={this.props.childFilters} - childFiltersByRanges={this.props.childFiltersByRanges} - searchFilterDocs={this.props.searchFilterDocs} - /> - </div> - ); - } + const menuDoc = DocCast(this.layoutDoc.layout_headerButton); + return !menuDoc ? null : ( + <div className="buttonMenu-docBtn" style={{ width: NumCast(menuDoc._width, 30), height: NumCast(menuDoc._height, 30) }}> + <DocumentView + Document={menuDoc} + isContentActive={this.isContentActive} + isDocumentActive={this.isContentActive} + addDocument={this._props.addDocument} + moveDocument={this._props.moveDocument} + addDocTab={this._props.addDocTab} + onBrowseClickScript={this._props.onBrowseClickScript} + pinToPres={emptyFunction} + rootSelected={this.rootSelected} + removeDocument={this._props.removeDocument} + ScreenToLocalTransform={Transform.Identity} + PanelWidth={this.return35} + PanelHeight={this.return35} + renderDepth={this._props.renderDepth} + focus={emptyFunction} + styleProvider={this._props.styleProvider} + containerViewPath={returnEmptyDoclist} + whenChildContentsActiveChanged={emptyFunction} + childFilters={this._props.childFilters} + childFiltersByRanges={this._props.childFiltersByRanges} + searchFilterDocs={this._props.searchFilterDocs} + /> + </div> + ); } @computed get nativeWidth() { - return this.props.NativeWidth?.() ?? Doc.NativeWidth(this.layoutDoc); + return this._props.NativeWidth?.() ?? Doc.NativeWidth(this.layoutDoc); } @computed get nativeHeight() { - return this.props.NativeHeight?.() ?? Doc.NativeHeight(this.layoutDoc); + return this._props.NativeHeight?.() ?? Doc.NativeHeight(this.layoutDoc); } @computed get scaling() { - return !this.nativeWidth ? 1 : this.props.PanelHeight() / this.nativeHeight; + return !this.nativeWidth ? 1 : this._props.PanelHeight() / this.nativeHeight; } @computed get backgroundEvents() { - return this.props.isContentActive() === false ? 'none' : undefined; + return this._props.isContentActive() === false ? 'none' : undefined; } observer: any; render() { @@ -723,8 +711,8 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection SetValue: this.addGroup, contents: '+ ADD A GROUP', }; - const buttonMenu = this.rootDoc.layout_headerButton; - const noviceExplainer = this.rootDoc.layout_explainer; + const buttonMenu = this.layoutDoc.layout_headerButton; + const noviceExplainer = this.layoutDoc.layout_explainer; return ( <> {buttonMenu || noviceExplainer ? ( @@ -739,8 +727,8 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection ref={this.createRef} style={{ overflowY: this.isContentActive() ? 'auto' : 'hidden', - background: this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor), - pointerEvents: (this.props.pointerEvents?.() as any) ?? this.backgroundEvents, + background: this._props.styleProvider?.(this.Document, this._props, StyleProp.BackgroundColor), + pointerEvents: (this._props.pointerEvents?.() as any) ?? this.backgroundEvents, }} onScroll={action(e => (this._scroll = e.currentTarget.scrollTop))} onDrop={this.onExternalDrop.bind(this)} @@ -748,7 +736,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection onWheel={e => this.isContentActive() && e.stopPropagation()}> {this.renderedSections} {!this.showAddAGroup ? null : ( - <div key={`${this.props.Document[Id]}-addGroup`} className="collectionStackingView-addGroupButton" style={{ width: !this.isStackingView ? '100%' : this.columnWidth / this.numGroupColumns - 10, marginTop: 10 }}> + <div key={`${this.Document[Id]}-addGroup`} className="collectionStackingView-addGroupButton" style={{ width: !this.isStackingView ? '100%' : this.columnWidth / this.numGroupColumns - 10, marginTop: 10 }}> <EditableView {...editableViewProps} /> </div> )} diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx index 3598d548a..c455f20d8 100644 --- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx @@ -1,15 +1,15 @@ -import React = require('react'); import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, IReactionDisposer, observable, reaction } from 'mobx'; +import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { Doc, DocListCast, Opt } from '../../../fields/Doc'; import { RichTextField } from '../../../fields/RichTextField'; import { PastelSchemaPalette, SchemaHeaderField } from '../../../fields/SchemaHeaderField'; import { ScriptField } from '../../../fields/ScriptField'; -import { BoolCast, Cast, NumCast, StrCast } from '../../../fields/Types'; +import { BoolCast, NumCast } from '../../../fields/Types'; import { ImageField } from '../../../fields/URLField'; import { TraceMobx } from '../../../fields/util'; -import { emptyFunction, setupMoveUpEvents, returnFalse, returnEmptyString } from '../../../Utils'; +import { emptyFunction, returnEmptyString, setupMoveUpEvents } from '../../../Utils'; import { Docs, DocUtils } from '../../documents/Documents'; import { DocumentType } from '../../documents/DocumentTypes'; import { DragManager } from '../../util/DragManager'; @@ -19,14 +19,14 @@ import { undoBatch } from '../../util/UndoManager'; import { ContextMenu } from '../ContextMenu'; import { ContextMenuProps } from '../ContextMenuItem'; import { EditableView } from '../EditableView'; -import './CollectionStackingView.scss'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; -import { Id } from '../../../fields/FieldSymbols'; +import { ObservableReactComponent } from '../ObservableReactComponent'; +import './CollectionStackingView.scss'; // So this is how we are storing a column interface CSVFieldColumnProps { Document: Doc; - DataDoc: Opt<Doc>; + TemplateDataDocument: Opt<Doc>; docList: Doc[]; heading: string; pivotField: string; @@ -49,16 +49,21 @@ interface CSVFieldColumnProps { } @observer -export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldColumnProps> { - @observable private _background = 'inherit'; - +export class CollectionStackingViewFieldColumn extends ObservableReactComponent<CSVFieldColumnProps> { private dropDisposer?: DragManager.DragDropDisposer; private _disposers: { [name: string]: IReactionDisposer } = {}; private _headerRef: React.RefObject<HTMLDivElement> = React.createRef(); - + @observable private _background = 'inherit'; @observable _paletteOn = false; - @observable _heading = this.props.headingObject ? this.props.headingObject.heading : this.props.heading; - @observable _color = this.props.headingObject ? this.props.headingObject.color : '#f1efeb'; + @observable _heading = ''; + @observable _color = ''; + + constructor(props: any) { + super(props); + makeObservable(this); + this._heading = this._props.headingObject ? this._props.headingObject.heading : this._props.heading; + this._color = this._props.headingObject ? this._props.headingObject.color : '#f1efeb'; + } _ele: HTMLElement | null = null; @@ -68,29 +73,29 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC this.dropDisposer?.(); if (ele) { this._ele = ele; - this.props.observeHeight(ele); - this.dropDisposer = DragManager.MakeDropTarget(ele, this.columnDrop.bind(this)); + this._props.observeHeight(ele); + this.dropDisposer = DragManager.MakeDropTarget(ele, this.columnDrop.bind(this), this._props.Document); } }; @action componentDidMount() { this._disposers.collapser = reaction( - () => this.props.headingObject?.collapsed, + () => this._props.headingObject?.collapsed, collapsed => (this.collapsed = collapsed !== undefined ? BoolCast(collapsed) : false), { fireImmediately: true } ); } componentWillUnmount() { this._disposers.collapser?.(); - this.props.unobserveHeight(this._ele); + this._props.unobserveHeight(this._ele); } //TODO: what is scripting? I found it in SetInPlace def but don't know what that is @undoBatch columnDrop = action((e: Event, de: DragManager.DropEvent) => { const drop = { docs: de.complete.docDragData?.droppedDocuments, val: this.getValue(this._heading) }; - this.props.pivotField && drop.docs?.forEach(d => Doc.SetInPlace(d, this.props.pivotField, drop.val, false)); + this._props.pivotField && drop.docs?.forEach(d => Doc.SetInPlace(d, this._props.pivotField, drop.val, false)); return true; }); getValue = (value: string): any => { @@ -105,13 +110,13 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC headingChanged = (value: string, shiftDown?: boolean) => { const castedValue = this.getValue(value); if (castedValue) { - if (this.props.colHeaderData?.map(i => i.heading).indexOf(castedValue.toString()) !== -1) { + if (this._props.colHeaderData?.map(i => i.heading).indexOf(castedValue.toString()) !== -1) { return false; } - this.props.docList.forEach(d => (d[this.props.pivotField] = castedValue)); - if (this.props.headingObject) { - this.props.headingObject.setHeading(castedValue.toString()); - this._heading = this.props.headingObject.heading; + this._props.docList.forEach(d => (d[this._props.pivotField] = castedValue)); + if (this._props.headingObject) { + this._props.headingObject.setHeading(castedValue.toString()); + this._heading = this._props.headingObject.heading; } return true; } @@ -120,41 +125,41 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC @action changeColumnColor = (color: string) => { - this.props.headingObject?.setColor(color); + this._props.headingObject?.setColor(color); this._color = color; }; - @action pointerEntered = () => SnappingManager.GetIsDragging() && (this._background = '#b4b4b4'); + @action pointerEntered = () => SnappingManager.IsDragging && (this._background = '#b4b4b4'); @action pointerLeave = () => (this._background = 'inherit'); @undoBatch typedNote = (char: string) => this.addNewTextDoc('-typed text-', false, true); @action addNewTextDoc = (value: string, shiftDown?: boolean, forceEmptyNote?: boolean) => { if (!value && !forceEmptyNote) return false; - const key = this.props.pivotField; + const key = this._props.pivotField; const newDoc = Docs.Create.TextDocument(value, { _height: 18, _width: 200, _layout_fitWidth: true, title: value, _layout_autoHeight: true }); - newDoc[key] = this.getValue(this.props.heading); - const maxHeading = this.props.docList.reduce((maxHeading, doc) => (NumCast(doc.heading) > maxHeading ? NumCast(doc.heading) : maxHeading), 0); - const heading = maxHeading === 0 || this.props.docList.length === 0 ? 1 : maxHeading === 1 ? 2 : 3; + newDoc[key] = this.getValue(this._props.heading); + const maxHeading = this._props.docList.reduce((maxHeading, doc) => (NumCast(doc.heading) > maxHeading ? NumCast(doc.heading) : maxHeading), 0); + const heading = maxHeading === 0 || this._props.docList.length === 0 ? 1 : maxHeading === 1 ? 2 : 3; newDoc.heading = heading; - FormattedTextBox.SelectOnLoad = newDoc[Id]; + FormattedTextBox.SetSelectOnLoad(newDoc); FormattedTextBox.SelectOnLoadChar = forceEmptyNote ? '' : ' '; - return this.props.addDocument?.(newDoc) || false; + return this._props.addDocument?.(newDoc) || false; }; @action deleteColumn = () => { - this.props.docList.forEach(d => (d[this.props.pivotField] = undefined)); - if (this.props.colHeaderData && this.props.headingObject) { - const index = this.props.colHeaderData.indexOf(this.props.headingObject); - this.props.colHeaderData.splice(index, 1); + this._props.docList.forEach(d => (d[this._props.pivotField] = undefined)); + if (this._props.colHeaderData && this._props.headingObject) { + const index = this._props.colHeaderData.indexOf(this._props.headingObject); + this._props.colHeaderData.splice(index, 1); } }; @action collapseSection = () => { - this.props.headingObject?.setCollapsed(!this.props.headingObject.collapsed); - this.collapsed = BoolCast(this.props.headingObject?.collapsed); + this._props.headingObject?.setCollapsed(!this._props.headingObject.collapsed); + this.collapsed = BoolCast(this._props.headingObject?.collapsed); }; headerDown = (e: React.PointerEvent<HTMLDivElement>) => setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction); @@ -162,12 +167,12 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC //TODO: I think this is where I'm supposed to edit stuff startDrag = (e: PointerEvent, down: number[], delta: number[]) => { // is MakeEmbedding a way to make a copy of a doc without rendering it? - const embedding = Doc.MakeEmbedding(this.props.Document); - embedding._width = this.props.columnWidth / (this.props.colHeaderData?.length || 1); + const embedding = Doc.MakeEmbedding(this._props.Document); + embedding._width = this._props.columnWidth / (this._props.colHeaderData?.length || 1); embedding._pivotField = undefined; let value = this.getValue(this._heading); value = typeof value === 'string' ? `"${value}"` : value; - embedding.viewSpecScript = ScriptField.MakeFunction(`doc.${this.props.pivotField} === ${value}`, { doc: Doc.name }); + embedding.viewSpecScript = ScriptField.MakeFunction(`doc.${this._props.pivotField} === ${value}`, { doc: Doc.name }); if (embedding.viewSpecScript) { DragManager.StartDocumentDrag([this._headerRef.current!], new DragManager.DocumentDragData([embedding]), e.clientX, e.clientY); return true; @@ -177,7 +182,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC renderColorPicker = () => { const gray = '#f1efeb'; - const selected = this.props.headingObject ? this.props.headingObject.color : gray; + const selected = this._props.headingObject ? this._props.headingObject.color : gray; const colors = ['pink2', 'purple4', 'bluegreen1', 'yellow4', 'gray', 'red2', 'bluegreen7', 'bluegreen5', 'orange1']; return ( <div className="collectionStackingView-colorPicker"> @@ -211,15 +216,15 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC ContextMenu.Instance.clearItems(); const layoutItems: ContextMenuProps[] = []; const docItems: ContextMenuProps[] = []; - const dataDoc = this.props.DataDoc || this.props.Document; + const dataDoc = this._props.TemplateDataDocument || this._props.Document; const width = this._ele ? Number(getComputedStyle(this._ele).width.replace('px', '')) : 0; const height = this._ele ? Number(getComputedStyle(this._ele).height.replace('px', '')) : 0; DocUtils.addDocumentCreatorMenuItems( doc => { - FormattedTextBox.SelectOnLoad = doc[Id]; - return this.props.addDocument?.(doc); + FormattedTextBox.SetSelectOnLoad(doc); + return this._props.addDocument?.(doc); }, - this.props.addDocument, + this._props.addDocument, 0, 0, true @@ -231,12 +236,12 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC docItems.push({ description: ':' + fieldKey, event: () => { - const created = DocUtils.DocumentFromField(dataDoc, fieldKey, Doc.GetProto(this.props.Document)); + const created = DocUtils.DocumentFromField(dataDoc, fieldKey, Doc.GetProto(this._props.Document)); if (created) { - if (this.props.Document.isTemplateDoc) { - Doc.MakeMetadataFieldTemplate(created, this.props.Document); + if (this._props.Document.isTemplateDoc) { + Doc.MakeMetadataFieldTemplate(created, this._props.Document); } - return this.props.addDocument?.(created); + return this._props.addDocument?.(created); } }, icon: 'compress-arrows-alt', @@ -250,12 +255,12 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC event: () => { const created = Docs.Create.CarouselDocument([], { _width: 400, _height: 200, title: fieldKey }); if (created) { - const container = this.props.Document.resolvedDataDoc ? Doc.GetProto(this.props.Document) : this.props.Document; + const container = this._props.Document.resolvedDataDoc ? Doc.GetProto(this._props.Document) : this._props.Document; if (container.isTemplateDoc) { Doc.MakeMetadataFieldTemplate(created, container); return Doc.AddDocToList(container, Doc.LayoutFieldKey(container), created); } - return this.props.addDocument?.(created) || false; + return this._props.addDocument?.(created) || false; } }, icon: 'compress-arrows-alt', @@ -264,16 +269,16 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC !Doc.noviceMode && ContextMenu.Instance.addItem({ description: 'Doc Fields ...', subitems: docItems, icon: 'eye' }); !Doc.noviceMode && ContextMenu.Instance.addItem({ description: 'Containers ...', subitems: layoutItems, icon: 'eye' }); ContextMenu.Instance.setDefaultItem('::', (name: string): void => { - Doc.GetProto(this.props.Document)[name] = ''; + Doc.GetProto(this._props.Document)[name] = ''; const created = Docs.Create.TextDocument('', { title: name, _width: 250, _layout_autoHeight: true }); if (created) { - if (this.props.Document.isTemplateDoc) { - Doc.MakeMetadataFieldTemplate(created, this.props.Document); + if (this._props.Document.isTemplateDoc) { + Doc.MakeMetadataFieldTemplate(created, this._props.Document); } - this.props.addDocument?.(created); + this._props.addDocument?.(created); } }); - const pt = this.props + const pt = this._props .screenToLocalTransform() .inverse() .transformPoint(width - 30, height); @@ -282,21 +287,21 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC @computed get innards() { TraceMobx(); - const key = this.props.pivotField; - const headings = this.props.headings(); + const key = this._props.pivotField; + const headings = this._props.headings(); const heading = this._heading; - const columnYMargin = this.props.headingObject ? 0 : this.props.yMargin; + const columnYMargin = this._props.headingObject ? 0 : this._props.yMargin; const uniqueHeadings = headings.map((i, idx) => headings.indexOf(i) === idx); const noValueHeader = `NO ${key.toUpperCase()} VALUE`; - const evContents = heading ? heading : this.props?.type === 'number' ? '0' : noValueHeader; - const headingView = this.props.headingObject ? ( + const evContents = heading ? heading : this._props?.type === 'number' ? '0' : noValueHeader; + const headingView = this._props.headingObject ? ( <div key={heading} className="collectionStackingView-sectionHeader" ref={this._headerRef} style={{ - marginTop: this.props.yMargin, - width: this.props.columnWidth / (uniqueHeadings.length + (this.props.chromeHidden ? 0 : 1) || 1), + marginTop: this._props.yMargin, + width: this._props.columnWidth / (uniqueHeadings.length + (this._props.chromeHidden ? 0 : 1) || 1), }}> {/* the default bucket (no key value) has a tooltip that describes what it is. Further, it does not have a color and cannot be deleted. */} @@ -326,35 +331,35 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC )} */} </div> <div - className={'collectionStackingView-collapseBar' + (this.props.headingObject.collapsed === true ? ' active' : '')} - style={{ display: this.props.headingObject.collapsed === true ? 'block' : undefined }} + className={'collectionStackingView-collapseBar' + (this._props.headingObject.collapsed === true ? ' active' : '')} + style={{ display: this._props.headingObject.collapsed === true ? 'block' : undefined }} onClick={this.collapseSection} /> </div> ) : null; - const templatecols = `${this.props.columnWidth / this.props.numGroupColumns}px `; - const type = this.props.Document.type; + const templatecols = `${this._props.columnWidth / this._props.numGroupColumns}px `; + const type = this._props.Document.type; return ( <> - {this.props.Document._columnsHideIfEmpty ? null : headingView} + {this._props.Document._columnsHideIfEmpty ? null : headingView} {this.collapsed ? null : ( <div> <div key={`${heading}-stack`} className={`collectionStackingView-masonrySingle`} style={{ - padding: `${columnYMargin}px ${0}px ${this.props.yMargin}px ${0}px`, + padding: `${columnYMargin}px ${0}px ${this._props.yMargin}px ${0}px`, margin: 'auto', width: 'max-content', //singleColumn ? undefined : `${cols * (style.columnWidth + style.gridGap) + 2 * style.xMargin - style.gridGap}px`, height: 'max-content', position: 'relative', - gridGap: this.props.gridGap, + gridGap: this._props.gridGap, gridTemplateColumns: templatecols, gridAutoRows: '0px', }}> - {this.props.renderChildren(this.props.docList)} + {this._props.renderChildren(this._props.docList)} </div> - {!this.props.chromeHidden && type !== DocumentType.PRES ? ( + {!this._props.chromeHidden && type !== DocumentType.PRES ? ( // TODO: this is the "new" button: see what you can work with here // change cursor to pointer for this, and update dragging cursor //TODO: there is a bug that occurs when adding a freeform document and trying to move it around @@ -365,7 +370,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC key={`${heading}-add-document`} onKeyDown={e => e.stopPropagation()} className="collectionStackingView-addDocumentButton" - style={{ width: 'calc(100% - 25px)', maxWidth: this.props.columnWidth / this.props.numGroupColumns - 25, marginBottom: 10 }}> + style={{ width: 'calc(100% - 25px)', maxWidth: this._props.columnWidth / this._props.numGroupColumns - 25, marginBottom: 10 }}> <EditableView GetValue={returnEmptyString} SetValue={this.addNewTextDoc} @@ -384,15 +389,15 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC render() { TraceMobx(); - const headings = this.props.headings(); + const headings = this._props.headings(); const heading = this._heading; const uniqueHeadings = headings.map((i, idx) => headings.indexOf(i) === idx); return ( <div - className={'collectionStackingViewFieldColumn' + (SnappingManager.GetIsDragging() ? 'Dragging' : '')} + className={'collectionStackingViewFieldColumn' + (SnappingManager.IsDragging ? 'Dragging' : '')} key={heading} style={{ - width: `${100 / (uniqueHeadings.length + (this.props.chromeHidden ? 0 : 1) || 1)}%`, + width: `${100 / (uniqueHeadings.length + (this._props.chromeHidden ? 0 : 1) || 1)}%`, height: undefined, // DraggingManager.GetIsDragging() ? "100%" : undefined, background: this._background, }} diff --git a/src/client/views/collections/CollectionStaffView.scss b/src/client/views/collections/CollectionStaffView.scss deleted file mode 100644 index 493a5f670..000000000 --- a/src/client/views/collections/CollectionStaffView.scss +++ /dev/null @@ -1,13 +0,0 @@ -.collectionStaffView { - .collectionStaffView-staff { - width: 100%; - margin-top: 100px; - margin-bottom: 100px; - } - - .collectionStaffView-line { - margin: 10px; - height: 2px; - background: black; - } -}
\ No newline at end of file diff --git a/src/client/views/collections/CollectionStaffView.tsx b/src/client/views/collections/CollectionStaffView.tsx deleted file mode 100644 index c025e94a8..000000000 --- a/src/client/views/collections/CollectionStaffView.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { CollectionSubView } from "./CollectionSubView"; -import React = require("react"); -import { computed, action, IReactionDisposer, reaction, runInAction, observable } from "mobx"; -import { NumCast } from "../../../fields/Types"; -import "./CollectionStaffView.scss"; -import { observer } from "mobx-react"; - -@observer -export class CollectionStaffView extends CollectionSubView() { - private _reactionDisposer: IReactionDisposer | undefined; - @observable private _staves = NumCast(this.props.Document.staves); - - componentWillUnmount() { - this._reactionDisposer?.(); - } - componentDidMount = () => { - this._reactionDisposer = reaction(() => NumCast(this.props.Document.staves), - (staves) => runInAction(() => this._staves = staves) - ); - - this.props.Document.staves = 5; - } - - @computed get addStaffButton() { - return <div onPointerDown={this.addStaff}>+</div>; - } - - @computed get staves() { - const staves = []; - for (let i = 0; i < this._staves; i++) { - const rows = []; - for (let j = 0; j < 5; j++) { - rows.push(<div key={`staff-${i}-${j}`} className="collectionStaffView-line"></div>); - } - staves.push(<div key={`staff-${i}`} className="collectionStaffView-staff"> - {rows} - </div>); - } - return staves; - } - - @action - addStaff = (e: React.PointerEvent) => { - this.props.Document.staves = this._staves + 1; - } - - render() { - return <div className="collectionStaffView"> - {this.staves} - {this.addStaffButton} - </div>; - } -}
\ No newline at end of file diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 09e7cdb32..fdbd1cc90 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -1,44 +1,55 @@ -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; +import * as React from 'react'; import * as rp from 'request-promise'; +import { Utils, returnFalse } from '../../../Utils'; import CursorField from '../../../fields/CursorField'; import { Doc, DocListCast, Field, Opt, StrListCast } from '../../../fields/Doc'; import { AclPrivate } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; import { List } from '../../../fields/List'; import { listSpec } from '../../../fields/Schema'; -import { Cast, ScriptCast, StrCast } from '../../../fields/Types'; +import { BoolCast, Cast, ScriptCast, StrCast } from '../../../fields/Types'; import { WebField } from '../../../fields/URLField'; +import { GetEffectiveAcl, TraceMobx } from '../../../fields/util'; import { GestureUtils } from '../../../pen-gestures/GestureUtils'; -import { returnFalse, Utils } from '../../../Utils'; import { DocServer } from '../../DocServer'; import { Networking } from '../../Network'; +import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes'; +import { DocUtils, Docs, DocumentOptions } from '../../documents/Documents'; +import { DragManager, dropActionType } from '../../util/DragManager'; import { ImageUtils } from '../../util/Import & Export/ImageUtils'; -import { InteractionUtils } from '../../util/InteractionUtils'; -import { undoBatch, UndoManager } from '../../util/UndoManager'; -import { DocComponent } from '../DocComponent'; -import React = require('react'); +import { SelectionManager } from '../../util/SelectionManager'; +import { SnappingManager } from '../../util/SnappingManager'; +import { UndoManager, undoBatch } from '../../util/UndoManager'; +import { ViewBoxBaseComponent } from '../DocComponent'; +import { LoadingBox } from '../nodes/LoadingBox'; +import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; +import { CollectionView, CollectionViewProps } from './CollectionView'; export interface SubCollectionViewProps extends CollectionViewProps { isAnyChildContentActive: () => boolean; } export function CollectionSubView<X>(moreProps?: X) { - class CollectionSubView extends DocComponent<X & SubCollectionViewProps>() { + class CollectionSubView extends ViewBoxBaseComponent<X & SubCollectionViewProps>() { private dropDisposer?: DragManager.DragDropDisposer; private gestureDisposer?: GestureUtils.GestureEventDisposer; - protected _multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer; protected _mainCont?: HTMLDivElement; - @observable _focusFilters: Opt<string[]>; // childFilters that are overridden when previewing a link to an anchor which has childFilters set on it - @observable _focusRangeFilters: Opt<string[]>; // childFiltersByRanges that are overridden when previewing a link to an anchor which has childFiltersByRanges set on it + + constructor(props: any) { + super(props); + makeObservable(this); + } + + @observable _focusFilters: Opt<string[]> = undefined; // childFilters that are overridden when previewing a link to an anchor which has childFilters set on it + @observable _focusRangeFilters: Opt<string[]> = undefined; // childFiltersByRanges that are overridden when previewing a link to an anchor which has childFiltersByRanges set on it protected createDashEventsTarget = (ele: HTMLDivElement | null) => { this.dropDisposer?.(); this.gestureDisposer?.(); - this._multiTouchDisposer?.(); if (ele) { this._mainCont = ele; this.dropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.layoutDoc, this.onInternalPreDrop.bind(this)); this.gestureDisposer = GestureUtils.MakeGestureTarget(ele, this.onGesture.bind(this)); - this._multiTouchDisposer = InteractionUtils.MakeMultiTouchTarget(ele, this.onTouchStart.bind(this)); } }; protected CreateDropTarget(ele: HTMLDivElement) { @@ -48,29 +59,30 @@ export function CollectionSubView<X>(moreProps?: X) { componentWillUnmount() { this.gestureDisposer?.(); - this._multiTouchDisposer?.(); } - @computed get dataDoc() { - return this.props.DataDoc instanceof Doc && this.props.Document.isTemplateForField ? Doc.GetProto(this.props.DataDoc) : this.props.Document.resolvedDataDoc ? this.props.Document : Doc.GetProto(this.props.Document); // if the layout document has a resolvedDataDoc, then we don't want to get its parent which would be the unexpanded template + get dataDoc() { + return this._props.TemplateDataDocument instanceof Doc && this.Document.isTemplateForField ? Doc.GetProto(this._props.TemplateDataDocument) : this.Document.resolvedDataDoc ? this.Document : Doc.GetProto(this.Document); // if the layout document has a resolvedDataDoc, then we don't want to get its parent which would be the unexpanded template } - rootSelected = (outsideReaction?: boolean) => { - return this.props.isSelected(outsideReaction) || (this.rootDoc && this.props.rootSelected(outsideReaction)); - }; + get childContainerViewPath() { + return this.DocumentView?.().docViewPath; + } + // this returns whether either the collection is selected, or the template that it is part of is selected + rootSelected = () => this._props.isSelected() || BoolCast(this._props.TemplateDataDocument && this._props.rootSelected?.()); - // The data field for rendering this collection will be on the this.props.Document unless we're rendering a template in which case we try to use props.DataDoc. - // When a document has a DataDoc but it's not a template, then it contains its own rendering data, but needs to pass the DataDoc through + // The data field for rendering this collection will be on the this.Document unless we're rendering a template in which case we try to use props.TemplateDataDocument. + // When a document has a TemplateDataDoc but it's not a template, then it contains its own rendering data, but needs to pass the TemplateDataDoc through // to its children which may be templates. // If 'annotationField' is specified, then all children exist on that field of the extension document, otherwise, they exist directly on the data document under 'fieldKey' @computed get dataField() { - return this.layoutDoc[this.props.fieldKey]; + return this.dataDoc[this._props.fieldKey]; // this used to be 'layoutDoc', but then template fields will get ignored since the template is not a proto of the layout. hopefully nothing depending on the previous code. } @computed get childLayoutPairs(): { layout: Doc; data: Doc }[] { - const { Document, DataDoc } = this.props; + const { Document, TemplateDataDocument } = this._props; const validPairs = this.childDocs - .map(doc => Doc.GetLayoutDataDocPair(Document, !this.props.isAnnotationOverlay ? DataDoc : undefined, doc)) + .map(doc => Doc.GetLayoutDataDocPair(Document, !this._props.isAnnotationOverlay ? TemplateDataDocument : undefined, doc)) .filter(pair => { // filter out any documents that have a proto that we don't have permissions to return !pair.layout?.hidden && pair.layout && (!pair.layout.proto || (pair.layout.proto instanceof Doc && GetEffectiveAcl(pair.layout.proto) !== AclPrivate)); @@ -80,14 +92,14 @@ export function CollectionSubView<X>(moreProps?: X) { @computed get childDocList() { return Cast(this.dataField, listSpec(Doc)); } - collectionFilters = () => this._focusFilters ?? StrListCast(this.props.Document._childFilters); - collectionRangeDocFilters = () => this._focusRangeFilters ?? Cast(this.props.Document._childFiltersByRanges, listSpec('string'), []); + collectionFilters = () => this._focusFilters ?? StrListCast(this.Document._childFilters); + collectionRangeDocFilters = () => this._focusRangeFilters ?? Cast(this.Document._childFiltersByRanges, listSpec('string'), []); // child filters apply to the descendants of the documents in this collection - childDocFilters = () => [...(this.props.childFilters?.().filter(f => Utils.IsRecursiveFilter(f)) || []), ...this.collectionFilters()]; + childDocFilters = () => [...(this._props.childFilters?.().filter(f => Utils.IsRecursiveFilter(f)) || []), ...this.collectionFilters()]; // unrecursive filters apply to the documents in the collection, but no their children. See Utils.noRecursionHack - unrecursiveDocFilters = () => [...(this.props.childFilters?.().filter(f => !Utils.IsRecursiveFilter(f)) || [])]; - childDocRangeFilters = () => [...(this.props.childFiltersByRanges?.() || []), ...this.collectionRangeDocFilters()]; - searchFilterDocs = () => this.props.searchFilterDocs?.() ?? DocListCast(this.props.Document._searchFilterDocs); + unrecursiveDocFilters = () => [...(this._props.childFilters?.().filter(f => !Utils.IsRecursiveFilter(f)) || [])]; + childDocRangeFilters = () => [...(this._props.childFiltersByRanges?.() || []), ...this.collectionRangeDocFilters()]; + searchFilterDocs = () => this._props.searchFilterDocs?.() ?? DocListCast(this.Document._searchFilterDocs); @computed.struct get childDocs() { TraceMobx(); let rawdocs: (Doc | Promise<Doc>)[] = []; @@ -97,31 +109,31 @@ export function CollectionSubView<X>(moreProps?: X) { } else if (Cast(this.dataField, listSpec(Doc), null)) { // otherwise, if the collection data is a list, then use it. rawdocs = Cast(this.dataField, listSpec(Doc), null); - } else { + } else if (this.dataField) { // Finally, if it's not a doc or a list and the document is a template, we try to render the root doc. // For example, if an image doc is rendered with a slide template, the template will try to render the data field as a collection. // Since the data field is actually an image, we set the list of documents to the singleton of root document's proto which will be an image. - const rootDoc = Cast(this.props.Document.rootDocument, Doc, null); - rawdocs = rootDoc && !this.props.isAnnotationOverlay ? [Doc.GetProto(rootDoc)] : []; + const templateRoot = this._props.TemplateDataDocument; + rawdocs = templateRoot && !this._props.isAnnotationOverlay ? [Doc.GetProto(templateRoot)] : []; } - const childDocs = rawdocs.filter(d => !(d instanceof Promise) && GetEffectiveAcl(Doc.GetProto(d)) !== AclPrivate && (this.props.ignoreUnrendered || !d.layout_unrendered)).map(d => d as Doc); + const childDocs = rawdocs.filter(d => !(d instanceof Promise) && GetEffectiveAcl(Doc.GetProto(d)) !== AclPrivate && (this._props.ignoreUnrendered || !d.layout_unrendered)).map(d => d as Doc); const childDocFilters = this.childDocFilters(); const childFiltersByRanges = this.childDocRangeFilters(); const searchDocs = this.searchFilterDocs(); - if (this.props.Document.dontRegisterView || (!childDocFilters.length && !this.unrecursiveDocFilters().length && !childFiltersByRanges.length && !searchDocs.length)) { + if (this.Document.dontRegisterView || (!childDocFilters.length && !this.unrecursiveDocFilters().length && !childFiltersByRanges.length && !searchDocs.length)) { return childDocs.filter(cd => !cd.cookies); // remove any documents that require a cookie if there are no filters to provide one } const docsforFilter: Doc[] = []; childDocs.forEach(d => { // dragging facets - const dragged = this.props.childFilters?.().some(f => f.includes(Utils.noDragsDocFilter)); - if (dragged && DragManager.docsBeingDragged.includes(d)) return false; - let notFiltered = d.z || Doc.IsSystem(d) || DocUtils.FilterDocs([d], this.unrecursiveDocFilters(), childFiltersByRanges, this.props.Document).length > 0; + const dragged = this._props.childFilters?.().some(f => f.includes(Utils.noDragDocsFilter)); + if (dragged && SnappingManager.CanEmbed && DragManager.docsBeingDragged.includes(d)) return false; + let notFiltered = d.z || Doc.IsSystem(d) || DocUtils.FilterDocs([d], this.unrecursiveDocFilters(), childFiltersByRanges, this.Document).length > 0; if (notFiltered) { - notFiltered = (!searchDocs.length || searchDocs.includes(d)) && DocUtils.FilterDocs([d], childDocFilters, childFiltersByRanges, this.props.Document).length > 0; + notFiltered = (!searchDocs.length || searchDocs.includes(d)) && DocUtils.FilterDocs([d], childDocFilters, childFiltersByRanges, this.Document).length > 0; const fieldKey = Doc.LayoutFieldKey(d); const annos = !Field.toString(Doc.LayoutField(d) as Field).includes(CollectionView.name); const data = d[annos ? fieldKey + '_annotations' : fieldKey]; @@ -154,7 +166,7 @@ export function CollectionSubView<X>(moreProps?: X) { @action protected async setCursorPosition(position: [number, number]) { let ind; - const doc = this.props.Document; + const doc = this.Document; const id = Doc.UserDoc()[Id]; const email = Doc.CurrentUserEmail; const pos = { x: position[0], y: position[1] }; @@ -184,29 +196,27 @@ export function CollectionSubView<X>(moreProps?: X) { @undoBatch protected onGesture(e: Event, ge: GestureUtils.GestureEvent) {} - protected onInternalPreDrop(e: Event, de: DragManager.DropEvent) { + protected onInternalPreDrop(e: Event, de: DragManager.DropEvent, dropAction: dropActionType) { if (de.complete.docDragData) { - // override the dropEvent's dropAction - const dropAction = this.layoutDoc.dropAction as dropActionType; // if the dropEvent's dragAction is, say 'embed', but we're just dragging within a collection, we may not actually want to make an embedding. // so we check if our collection has a dropAction set on it and if so, we use that instead. - if (dropAction && !de.complete.docDragData.draggedDocuments.some(d => d.embedContainer === this.props.Document && this.childDocs.includes(d))) { + if (dropAction && !de.complete.docDragData.draggedDocuments.some(d => d.embedContainer === this.Document && this.childDocs.includes(d))) { de.complete.docDragData.dropAction = dropAction; } e.stopPropagation(); } } - addDocument = (doc: Doc | Doc[], annotationKey?: string) => this.props.addDocument?.(doc, annotationKey) || false; - removeDocument = (doc: Doc | Doc[], annotationKey?: string) => this.props.removeDocument?.(doc, annotationKey) || false; - moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[], annotationKey?: string) => boolean, annotationKey?: string) => this.props.moveDocument?.(doc, targetCollection, addDocument); - @action + addDocument = (doc: Doc | Doc[], annotationKey?: string) => this._props.addDocument?.(doc, annotationKey) || false; + removeDocument = (doc: Doc | Doc[], annotationKey?: string) => this._props.removeDocument?.(doc, annotationKey) || false; + moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[], annotationKey?: string) => boolean, annotationKey?: string) => this._props.moveDocument?.(doc, targetCollection, addDocument) || false; + protected onInternalDrop(e: Event, de: DragManager.DropEvent): boolean { const docDragData = de.complete.docDragData; if (docDragData) { let added = undefined; const dropAction = docDragData.dropAction || docDragData.userDropAction; - const targetDocments = DocListCast(this.dataDoc[this.props.fieldKey]); + const targetDocments = DocListCast(this.dataDoc[this._props.fieldKey]); const someMoved = !dropAction && docDragData.draggedDocuments.some(drag => targetDocments.includes(drag)); if (someMoved) docDragData.droppedDocuments = docDragData.droppedDocuments.map((drop, i) => (targetDocments.includes(docDragData.draggedDocuments[i]) ? docDragData.draggedDocuments[i] : drop)); if ((!dropAction || dropAction === 'inSame' || dropAction === 'same' || dropAction === 'move' || someMoved) && docDragData.moveDocument) { @@ -214,28 +224,28 @@ export function CollectionSubView<X>(moreProps?: X) { const addedDocs = docDragData.droppedDocuments.filter((d, i) => docDragData.draggedDocuments[i] !== d); if (movedDocs.length) { const canAdd = - (de.embedKey || dropAction || Doc.AreProtosEqual(Cast(movedDocs[0].annotationOn, Doc, null), this.rootDoc)) && (dropAction !== 'inSame' || docDragData.draggedDocuments.every(d => d.embedContainer === this.rootDoc)); - const moved = docDragData.moveDocument(movedDocs, this.rootDoc, canAdd ? this.addDocument : returnFalse); + (de.embedKey || dropAction || Doc.AreProtosEqual(Cast(movedDocs[0].annotationOn, Doc, null), this.Document)) && (dropAction !== 'inSame' || docDragData.draggedDocuments.every(d => d.embedContainer === this.Document)); + const moved = docDragData.moveDocument(movedDocs, this.Document, canAdd ? this.addDocument : returnFalse); added = canAdd || moved ? moved : undefined; } else if (addedDocs.length) { added = this.addDocument(addedDocs); } - if (!added && ScriptCast(this.rootDoc.dropConverter)) { - ScriptCast(this.rootDoc.dropConverter)?.script.run({ dragData: docDragData }); + if (!added && ScriptCast(this.Document.dropConverter)) { + ScriptCast(this.Document.dropConverter)?.script.run({ dragData: docDragData }); added = addedDocs.length ? this.addDocument(addedDocs) : true; } } else { - ScriptCast(this.rootDoc.dropConverter)?.script.run({ dragData: docDragData }); + ScriptCast(this.Document.dropConverter)?.script.run({ dragData: docDragData }); added = this.addDocument(docDragData.droppedDocuments); !added && alert('You cannot perform this move'); } - added === false && !this.props.isAnnotationOverlay && e.preventDefault(); + added === false && !this._props.isAnnotationOverlay && e.preventDefault(); added === true && e.stopPropagation(); return added ? true : false; } else if (de.complete.annoDragData) { const dropCreator = de.complete.annoDragData.dropDocCreator; de.complete.annoDragData.dropDocCreator = () => { - const dropped = dropCreator(this.props.isAnnotationOverlay ? this.rootDoc : undefined); + const dropped = dropCreator(this._props.isAnnotationOverlay ? this.Document : undefined); this.addDocument(dropped); return dropped; }; @@ -245,7 +255,6 @@ export function CollectionSubView<X>(moreProps?: X) { } @undoBatch - @action protected async onExternalDrop(e: React.DragEvent, options: DocumentOptions, completed?: (docs: Doc[]) => void) { if (e.ctrlKey) { e.stopPropagation(); // bcz: this is a hack to stop propagation when dropping an image on a text document with shift+ctrl @@ -297,20 +306,19 @@ export function CollectionSubView<X>(moreProps?: X) { const cors = img.includes('corsProxy') ? img.match(/http.*corsProxy\//)![0] : ''; img = cors ? img.replace(cors, '') : img; if (img) { - const split = img.split('src="')[1].split('"')[0]; - let source = split; - if (split.startsWith('data:image') && split.includes('base64')) { - const [{ accessPaths }] = await Networking.PostToServer('/uploadRemoteImage', { sources: [split] }); - if (accessPaths.agnostic.client.indexOf('dashblobstore') === -1) { - source = Utils.prepend(accessPaths.agnostic.client); - } else { - source = accessPaths.agnostic.client; - } - } - if (source.startsWith('http')) { - const doc = Docs.Create.ImageDocument(source, { ...options, _width: 300 }); - ImageUtils.ExtractExif(doc); - addDocument(doc); + const imgSrc = img.split('src="')[1].split('"')[0]; + const imgOpts = { ...options, _width: 300 }; + if (imgSrc.startsWith('data:image') && imgSrc.includes('base64')) { + const result = (await Networking.PostToServer('/uploadRemoteImage', { sources: [imgSrc] })).lastElement(); + const newImgSrc = + result.accessPaths.agnostic.client.indexOf('dashblobstore') === -1 // + ? Utils.prepend(result.accessPaths.agnostic.client) + : result.accessPaths.agnostic.client; + + addDocument(ImageUtils.AssignImgInfo(Docs.Create.ImageDocument(newImgSrc, imgOpts), result)); + } else if (imgSrc.startsWith('http')) { + const doc = Docs.Create.ImageDocument(imgSrc, imgOpts); + addDocument(ImageUtils.AssignImgInfo(doc, await ImageUtils.ExtractImgInfo(doc))); } return; } else { @@ -327,7 +335,7 @@ export function CollectionSubView<X>(moreProps?: X) { } }); } else { - const srcWeb = SelectionManager.Views().lastElement(); + const srcWeb = SelectionManager.Views.lastElement(); const srcUrl = (srcWeb?.Document.data as WebField)?.url?.href?.match(/https?:\/\/[^/]*/)?.[0]; const reg = new RegExp(Utils.prepend(''), 'g'); const modHtml = srcUrl ? html.replace(reg, srcUrl) : html; @@ -336,7 +344,7 @@ export function CollectionSubView<X>(moreProps?: X) { Doc.GetProto(htmlDoc)['data-text'] = Doc.GetProto(htmlDoc).text = text; addDocument(htmlDoc); if (srcWeb) { - const iframe = SelectionManager.Views()[0].ContentDiv?.getElementsByTagName('iframe')?.[0]; + const iframe = SelectionManager.Views[0].ContentDiv?.getElementsByTagName('iframe')?.[0]; const focusNode = iframe?.contentDocument?.getSelection()?.focusNode as any; if (focusNode) { const anchor = srcWeb?.ComponentView?.getAnchor?.(true); @@ -442,13 +450,13 @@ export function CollectionSubView<X>(moreProps?: X) { if (typeof files === 'string') { const loading = Docs.Create.LoadingDocument(files, options); generatedDocuments.push(loading); - Doc.addCurrentlyLoading(loading); + LoadingBox.addCurrentlyLoading(loading); DocUtils.uploadYoutubeVideoLoading(files, {}, loading); } else { generatedDocuments.push( ...files.map(file => { const loading = Docs.Create.LoadingDocument(file, options); - Doc.addCurrentlyLoading(loading); + LoadingBox.addCurrentlyLoading(loading); DocUtils.uploadFileToDoc(file, {}, loading); return loading; }) @@ -456,15 +464,15 @@ export function CollectionSubView<X>(moreProps?: X) { } if (generatedDocuments.length) { // Creating a dash document - const isFreeformView = this.props.Document._type_collection === CollectionViewType.Freeform; + const isFreeformView = this.Document._type_collection === CollectionViewType.Freeform; const set = !isFreeformView ? generatedDocuments : generatedDocuments.length > 1 - ? generatedDocuments.map(d => { - DocUtils.iconify(d); - return d; - }) - : []; + ? generatedDocuments.map(d => { + DocUtils.iconify(d); + return d; + }) + : []; if (completed) completed(set); else { if (isFreeformView && generatedDocuments.length > 1) { @@ -486,11 +494,3 @@ export function CollectionSubView<X>(moreProps?: X) { return CollectionSubView; } - -import { GetEffectiveAcl, TraceMobx } from '../../../fields/util'; -import { Docs, DocumentOptions, DocUtils } from '../../documents/Documents'; -import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes'; -import { DragManager, dropActionType } from '../../util/DragManager'; -import { SelectionManager } from '../../util/SelectionManager'; -import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; -import { CollectionView, CollectionViewProps } from './CollectionView'; diff --git a/src/client/views/collections/CollectionTimeView.tsx b/src/client/views/collections/CollectionTimeView.tsx index a8f5345b7..ee5147428 100644 --- a/src/client/views/collections/CollectionTimeView.tsx +++ b/src/client/views/collections/CollectionTimeView.tsx @@ -1,6 +1,8 @@ import { toUpper } from 'lodash'; -import { action, computed, observable, runInAction } from 'mobx'; +import { action, computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; +import { emptyFunction, returnEmptyString, returnFalse, returnTrue, setupMoveUpEvents } from '../../../Utils'; import { Doc, Opt, StrListCast } from '../../../fields/Doc'; import { List } from '../../../fields/List'; import { ObjectField } from '../../../fields/ObjectField'; @@ -8,34 +10,38 @@ import { RichTextField } from '../../../fields/RichTextField'; import { listSpec } from '../../../fields/Schema'; import { ComputedField, ScriptField } from '../../../fields/ScriptField'; import { Cast, NumCast, StrCast } from '../../../fields/Types'; -import { emptyFunction, returnEmptyString, returnFalse, returnTrue, setupMoveUpEvents } from '../../../Utils'; import { Docs } from '../../documents/Documents'; import { DocumentManager } from '../../util/DocumentManager'; import { ScriptingGlobals } from '../../util/ScriptingGlobals'; import { ContextMenu } from '../ContextMenu'; import { ContextMenuProps } from '../ContextMenuItem'; import { EditableView } from '../EditableView'; -import { DocFocusOptions, DocumentView } from '../nodes/DocumentView'; +import { DocumentView } from '../nodes/DocumentView'; +import { FocusViewOptions } from '../nodes/FieldView'; import { PresBox } from '../nodes/trails'; -import { computePivotLayout, computeTimelineLayout, ViewDefBounds } from './collectionFreeForm/CollectionFreeFormLayoutEngines'; -import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView'; import { CollectionSubView } from './CollectionSubView'; import './CollectionTimeView.scss'; -import React = require('react'); +import { ViewDefBounds, computePivotLayout, computeTimelineLayout } from './collectionFreeForm/CollectionFreeFormLayoutEngines'; +import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView'; @observer export class CollectionTimeView extends CollectionSubView() { _changing = false; @observable _layoutEngine = computePivotLayout.name; @observable _collapsed: boolean = false; - @observable _childClickedScript: Opt<ScriptField>; - @observable _viewDefDivClick: Opt<ScriptField>; - @observable _focusPivotField: Opt<string>; + @observable _childClickedScript: Opt<ScriptField> = undefined; + @observable _viewDefDivClick: Opt<ScriptField> = undefined; + @observable _focusPivotField: Opt<string> = undefined; + + constructor(props: any) { + super(props); + makeObservable(this); + } - async componentDidMount() { - this.props.setContentView?.(this); + componentDidMount() { + this._props.setContentViewBox?.(this); runInAction(() => { - this._childClickedScript = ScriptField.MakeScript('openInLightbox(self)', { this: Doc.name }); + this._childClickedScript = ScriptField.MakeScript('openInLightbox(this)', { this: Doc.name }); this._viewDefDivClick = ScriptField.MakeScript('pivotColumnClick(this,payload)', { payload: 'any' }); }); } @@ -47,23 +53,23 @@ export class CollectionTimeView extends CollectionSubView() { getAnchor = (addAsAnnotation: boolean) => { const anchor = Docs.Create.HTMLMarkerDocument([], { title: ComputedField.MakeFunction(`"${this.pivotField}"])`) as any, - annotationOn: this.rootDoc, + annotationOn: this.Document, }); - PresBox.pinDocView(anchor, { pinData: { type_collection: true, pivot: true, filters: true } }, this.rootDoc); + PresBox.pinDocView(anchor, { pinData: { type_collection: true, pivot: true, filters: true } }, this.Document); if (addAsAnnotation) { // when added as an annotation, links to anchors can be found as links to the document even if the anchors are not rendered - if (Cast(this.dataDoc[this.props.fieldKey + '_annotations'], listSpec(Doc), null) !== undefined) { - Cast(this.dataDoc[this.props.fieldKey + '_annotations'], listSpec(Doc), []).push(anchor); + if (Cast(this.dataDoc[this._props.fieldKey + '_annotations'], listSpec(Doc), null) !== undefined) { + Cast(this.dataDoc[this._props.fieldKey + '_annotations'], listSpec(Doc), []).push(anchor); } else { - this.dataDoc[this.props.fieldKey + '_annotations'] = new List<Doc>([anchor]); + this.dataDoc[this._props.fieldKey + '_annotations'] = new List<Doc>([anchor]); } } return anchor; }; @action - scrollPreview = (docView: DocumentView, anchor: Doc, focusSpeed: number, options: DocFocusOptions) => { + scrollPreview = (docView: DocumentView, anchor: Doc, focusSpeed: number, options: FocusViewOptions) => { // if in preview, then override document's fields with view spec this._focusFilters = StrListCast(anchor.config_docFilters); this._focusRangeFilters = StrListCast(anchor.config_docRangeFilters); @@ -79,10 +85,10 @@ export class CollectionTimeView extends CollectionSubView() { this, e, action((e: PointerEvent, down: number[], delta: number[]) => { - const minReq = NumCast(this.props.Document[this.props.fieldKey + '-timelineMinReq'], NumCast(this.props.Document[this.props.fieldKey + '-timelineMin'], 0)); - const maxReq = NumCast(this.props.Document[this.props.fieldKey + '-timelineMaxReq'], NumCast(this.props.Document[this.props.fieldKey + '-timelineMax'], 10)); - this.props.Document[this.props.fieldKey + '-timelineMinReq'] = minReq + ((maxReq - minReq) * delta[0]) / this.props.PanelWidth(); - this.props.Document[this.props.fieldKey + '-timelineSpan'] = undefined; + const minReq = NumCast(this.Document[this._props.fieldKey + '-timelineMinReq'], NumCast(this.Document[this._props.fieldKey + '-timelineMin'], 0)); + const maxReq = NumCast(this.Document[this._props.fieldKey + '-timelineMaxReq'], NumCast(this.Document[this._props.fieldKey + '-timelineMax'], 10)); + this.Document[this._props.fieldKey + '-timelineMinReq'] = minReq + ((maxReq - minReq) * delta[0]) / this._props.PanelWidth(); + this.Document[this._props.fieldKey + '-timelineSpan'] = undefined; return false; }), returnFalse, @@ -95,9 +101,9 @@ export class CollectionTimeView extends CollectionSubView() { this, e, action((e: PointerEvent, down: number[], delta: number[]) => { - const minReq = NumCast(this.props.Document[this.props.fieldKey + '-timelineMinReq'], NumCast(this.props.Document[this.props.fieldKey + '-timelineMin'], 0)); - const maxReq = NumCast(this.props.Document[this.props.fieldKey + '-timelineMaxReq'], NumCast(this.props.Document[this.props.fieldKey + '-timelineMax'], 10)); - this.props.Document[this.props.fieldKey + '-timelineMaxReq'] = maxReq + ((maxReq - minReq) * delta[0]) / this.props.PanelWidth(); + const minReq = NumCast(this.Document[this._props.fieldKey + '-timelineMinReq'], NumCast(this.Document[this._props.fieldKey + '-timelineMin'], 0)); + const maxReq = NumCast(this.Document[this._props.fieldKey + '-timelineMaxReq'], NumCast(this.Document[this._props.fieldKey + '-timelineMax'], 10)); + this.Document[this._props.fieldKey + '-timelineMaxReq'] = maxReq + ((maxReq - minReq) * delta[0]) / this._props.PanelWidth(); return false; }), returnFalse, @@ -110,10 +116,10 @@ export class CollectionTimeView extends CollectionSubView() { this, e, action((e: PointerEvent, down: number[], delta: number[]) => { - const minReq = NumCast(this.props.Document[this.props.fieldKey + '-timelineMinReq'], NumCast(this.props.Document[this.props.fieldKey + '-timelineMin'], 0)); - const maxReq = NumCast(this.props.Document[this.props.fieldKey + '-timelineMaxReq'], NumCast(this.props.Document[this.props.fieldKey + '-timelineMax'], 10)); - this.props.Document[this.props.fieldKey + '-timelineMinReq'] = minReq - ((maxReq - minReq) * delta[0]) / this.props.PanelWidth(); - this.props.Document[this.props.fieldKey + '-timelineMaxReq'] = maxReq - ((maxReq - minReq) * delta[0]) / this.props.PanelWidth(); + const minReq = NumCast(this.Document[this._props.fieldKey + '-timelineMinReq'], NumCast(this.Document[this._props.fieldKey + '-timelineMin'], 0)); + const maxReq = NumCast(this.Document[this._props.fieldKey + '-timelineMaxReq'], NumCast(this.Document[this._props.fieldKey + '-timelineMax'], 10)); + this.Document[this._props.fieldKey + '-timelineMinReq'] = minReq - ((maxReq - minReq) * delta[0]) / this._props.PanelWidth(); + this.Document[this._props.fieldKey + '-timelineMaxReq'] = maxReq - ((maxReq - minReq) * delta[0]) / this._props.PanelWidth(); return false; }), returnFalse, @@ -140,9 +146,9 @@ export class CollectionTimeView extends CollectionSubView() { @computed get contents() { return ( - <div className="collectionTimeView-innards" key="timeline" style={{ pointerEvents: this.props.isContentActive() ? undefined : 'none' }} onClick={this.contentsDown}> + <div className="collectionTimeView-innards" key="timeline" style={{ pointerEvents: this._props.isContentActive() ? undefined : 'none' }} onClick={this.contentsDown}> <CollectionFreeFormView - {...this.props} + {...this._props} engineProps={{ pivotField: this.pivotField, childFilters: this.childDocFilters, childFiltersByRanges: this.childDocRangeFilters }} fitContentsToBox={returnTrue} childClickScript={this._childClickedScript} @@ -189,7 +195,7 @@ export class CollectionTimeView extends CollectionSubView() { @computed get _allFacets() { const facets = new Set<string>(); this.childDocs.forEach(child => Object.keys(Doc.GetProto(child)).forEach(key => facets.add(key))); - Doc.AreProtosEqual(this.dataDoc, this.props.Document) && this.childDocs.forEach(child => Object.keys(child).forEach(key => facets.add(key))); + Doc.AreProtosEqual(this.dataDoc, this.Document) && this.childDocs.forEach(child => Object.keys(child).forEach(key => facets.add(key))); return Array.from(facets); } menuCallback = (x: number, y: number) => { @@ -206,7 +212,6 @@ export class CollectionTimeView extends CollectionSubView() { Array.from(keySet).map(fieldKey => docItems.push({ description: ':' + fieldKey, event: () => (this.layoutDoc._pivotField = fieldKey), icon: 'compress-arrows-alt' })); docItems.push({ description: ':default', event: () => (this.layoutDoc._pivotField = undefined), icon: 'compress-arrows-alt' }); ContextMenu.Instance.addItem({ description: 'Pivot Fields ...', subitems: docItems, icon: 'eye' }); - const pt = this.props.ScreenToLocalTransform().inverse().transformPoint(x, y); ContextMenu.Instance.displayMenu(x, y, ':'); }; @@ -222,7 +227,7 @@ export class CollectionTimeView extends CollectionSubView() { } return false; }} - background={'#f1efeb'} // this.props.headingObject ? this.props.headingObject.color : "#f1efeb"; + background={'#f1efeb'} // this._props.headingObject ? this._props.headingObject.color : "#f1efeb"; contents={':' + StrCast(this.layoutDoc._pivotField)} showMenuOnLoad={true} display={'inline'} @@ -241,7 +246,7 @@ export class CollectionTimeView extends CollectionSubView() { } }); const forceLayout = StrCast(this.layoutDoc._forceRenderEngine); - const doTimeline = forceLayout ? forceLayout === computeTimelineLayout.name : nonNumbers / this.childDocs.length < 0.1 && this.props.PanelWidth() / this.props.PanelHeight() > 6; + const doTimeline = forceLayout ? forceLayout === computeTimelineLayout.name : nonNumbers / this.childDocs.length < 0.1 && this._props.PanelWidth() / this._props.PanelHeight() > 6; if (doTimeline !== (this._layoutEngine === computeTimelineLayout.name)) { if (!this._changing) { this._changing = true; @@ -256,10 +261,10 @@ export class CollectionTimeView extends CollectionSubView() { } return ( - <div className={'collectionTimeView' + (doTimeline ? '' : '-pivot')} onContextMenu={this.specificMenu} style={{ width: this.props.PanelWidth(), height: '100%' }}> + <div className={'collectionTimeView' + (doTimeline ? '' : '-pivot')} onContextMenu={this.specificMenu} style={{ width: this._props.PanelWidth(), height: '100%' }}> {this.pivotKeyUI} {this.contents} - {!this.props.isSelected() || !doTimeline ? null : ( + {!this._props.isSelected() || !doTimeline ? null : ( <> <div className="collectionTimeView-thumb-min collectionTimeView-thumb" key="min" onPointerDown={this.onMinDown} /> <div className="collectionTimeView-thumb-max collectionTimeView-thumb" key="mid" onPointerDown={this.onMaxDown} /> diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index 2bf649caf..bbbef78b4 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -1,10 +1,9 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; .collectionTreeView-container { transform-origin: top left; } .collectionTreeView-dropTarget { - border-width: $COLLECTION_BORDER_WIDTH; border-color: transparent; border-style: solid; border-radius: inherit; diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index e408c193a..741013148 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -1,7 +1,8 @@ -import { action, computed, IReactionDisposer, observable, reaction } from 'mobx'; +import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { Doc, DocListCast, Opt, StrListCast } from '../../../fields/Doc'; -import { DocData, Height, Width } from '../../../fields/DocSymbols'; +import { DocData } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; import { listSpec } from '../../../fields/Schema'; import { ScriptField } from '../../../fields/ScriptField'; @@ -26,7 +27,6 @@ import { CollectionFreeFormView } from './collectionFreeForm'; import { CollectionSubView } from './CollectionSubView'; import './CollectionTreeView.scss'; import { TreeView } from './TreeView'; -import React = require('react'); const _global = (window /* browser */ || global) /* node */ as any; export type collectionTreeViewProps = { @@ -59,27 +59,29 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree private refList: Set<any> = new Set(); // list of tree view items to monitor for height changes private observer: any; // observer for monitoring tree view items. - @computed get doc() { - return this.props.Document; + constructor(props: any) { + super(props); + makeObservable(this); } - @computed get dataDoc() { - return this.props.DataDoc || this.doc; + + get dataDoc() { + return this._props.TemplateDataDocument || this.Document; } @computed get treeViewtruncateTitleWidth() { - return NumCast(this.doc.treeView_TruncateTitleWidth, this.panelWidth()); + return NumCast(this.Document.treeView_TruncateTitleWidth, this.panelWidth()); } @computed get treeChildren() { TraceMobx(); - return this.props.childDocuments || this.childDocs; + return this._props.childDocuments || this.childDocs; } @computed get outlineMode() { - return this.doc.treeView_Type === TreeViewType.outline; + return this.Document.treeView_Type === TreeViewType.outline; } @computed get fileSysMode() { - return this.doc.treeView_Type === TreeViewType.fileSystem; + return this.Document.treeView_Type === TreeViewType.fileSystem; } @computed get dashboardMode() { - return this.doc === Doc.MyDashboards; + return this.Document === Doc.MyDashboards; } @observable _titleHeight = 0; // height of the title bar @@ -88,8 +90,8 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree // these should stay in synch with counterparts in DocComponent.ts ViewBoxAnnotatableComponent @observable _isAnyChildContentActive = false; - whenChildContentsActiveChanged = action((isActive: boolean) => this.props.whenChildContentsActiveChanged((this._isAnyChildContentActive = isActive))); - isContentActive = (outsideReaction?: boolean) => (this._isAnyChildContentActive ? true : this.props.isContentActive() ? true : false); + whenChildContentsActiveChanged = action((isActive: boolean) => this._props.whenChildContentsActiveChanged((this._isAnyChildContentActive = isActive))); + isContentActive = (outsideReaction?: boolean) => (this._isAnyChildContentActive ? true : this._props.isContentActive() ? true : false); componentWillUnmount() { this._isDisposing = true; @@ -99,9 +101,9 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree } componentDidMount() { - //this.props.setContentView?.(this); + //this._props.setContentView?.(this); this._disposers.autoheight = reaction( - () => this.rootDoc.layout_autoHeight, + () => this.layoutDoc.layout_autoHeight, auto => auto && this.computeHeight(), { fireImmediately: true } ); @@ -112,62 +114,62 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree const titleHeight = !this._titleRef ? this.marginTop() : Number(getComputedStyle(this._titleRef).height.replace('px', '')); const bodyHeight = Array.from(this.refList).reduce((p, r) => p + Number(getComputedStyle(r).height.replace('px', '')), this.marginBot()) + 6; this.layoutDoc._layout_autoHeightMargins = bodyHeight; - !this.props.dontRegisterView && this.props.setHeight?.(bodyHeight + titleHeight); + !this._props.dontRegisterView && this._props.setHeight?.(bodyHeight + titleHeight); } }; unobserveHeight = (ref: any) => { this.refList.delete(ref); - this.rootDoc.layout_autoHeight && this.computeHeight(); + this.layoutDoc.layout_autoHeight && this.computeHeight(); }; observeHeight = (ref: any) => { if (ref) { this.refList.add(ref); this.observer = new _global.ResizeObserver( action((entries: any) => { - if (this.rootDoc.layout_autoHeight && ref && this.refList.size && !SnappingManager.GetIsDragging()) { + if (this.layoutDoc.layout_autoHeight && ref && this.refList.size && !SnappingManager.IsDragging) { this.computeHeight(); } }) ); - this.rootDoc.layout_autoHeight && this.computeHeight(); + this.layoutDoc.layout_autoHeight && this.computeHeight(); this.observer.observe(ref); } }; protected createTreeDropTarget = (ele: HTMLDivElement) => { this._treedropDisposer?.(); - if ((this._mainEle = ele)) this._treedropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.doc, this.onInternalPreDrop.bind(this)); + if ((this._mainEle = ele)) this._treedropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.Document, this.onInternalPreDrop.bind(this)); }; - protected onInternalPreDrop = (e: Event, de: DragManager.DropEvent) => { - const dropAction = this.layoutDoc.dropAction as dropActionType; + protected onInternalPreDrop = (e: Event, de: DragManager.DropEvent, dropAction: dropActionType) => { const dragData = de.complete.docDragData; if (dragData) { - const sameTree = Doc.AreProtosEqual(dragData.treeViewDoc, this.rootDoc) ? true : false; - const isAlreadyInTree = () => sameTree || dragData.draggedDocuments.some(d => d.embedContainer === this.doc && this.childDocs.includes(d)); - if (isAlreadyInTree() !== sameTree) { - console.log('WHAAAT'); - } + const sameTree = Doc.AreProtosEqual(dragData.treeViewDoc, this.Document) ? true : false; + const isAlreadyInTree = () => sameTree || dragData.draggedDocuments.some(d => d.embedContainer === this.Document && this.childDocs.includes(d)); dragData.dropAction = dropAction && !isAlreadyInTree() ? dropAction : sameTree && dragData.dropAction !== 'inSame' ? 'same' : dragData.dropAction; e.stopPropagation(); } }; - screenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(0, -this._headerHeight); + configDrag = (dragData: DragManager.DocumentDragData) => { + dragData.treeViewDoc = this.Document; + }; + + screenToLocalTransform = () => this.ScreenToLocalBoxXf().translate(0, -this._headerHeight); @action remove = (doc: Doc | Doc[]): boolean => { const docs = doc instanceof Doc ? [doc] : doc; - const targetDataDoc = this.doc[DocData]; - const value = DocListCast(targetDataDoc[this.props.fieldKey]); + const targetDataDoc = this.Document[DocData]; + const value = DocListCast(targetDataDoc[this._props.fieldKey]); const result = value.filter(v => !docs.includes(v)); - if ((doc instanceof Doc ? [doc] : doc).some(doc => SelectionManager.Views().some(dv => Doc.AreProtosEqual(dv.rootDoc, doc)))) SelectionManager.DeselectAll(); + if ((doc instanceof Doc ? [doc] : doc).some(doc => SelectionManager.Views.some(dv => Doc.AreProtosEqual(dv.Document, doc)))) SelectionManager.DeselectAll(); if (result.length !== value.length && doc instanceof Doc) { - const ind = DocListCast(targetDataDoc[this.props.fieldKey]).indexOf(doc); - const prev = ind && DocListCast(targetDataDoc[this.props.fieldKey])[ind - 1]; - this.props.removeDocument?.(doc); + const ind = DocListCast(targetDataDoc[this._props.fieldKey]).indexOf(doc); + const prev = ind && DocListCast(targetDataDoc[this._props.fieldKey])[ind - 1]; + this._props.removeDocument?.(doc); if (ind > 0 && prev) { - FormattedTextBox.SelectOnLoad = prev[Id]; - DocumentManager.Instance.getDocumentView(prev, this.props.DocumentView?.())?.select(false); + FormattedTextBox.SetSelectOnLoad(prev); + DocumentManager.Instance.getDocumentView(prev, this.DocumentView?.())?.select(false); } return true; } @@ -178,24 +180,28 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree addDoc = (docs: Doc | Doc[], relativeTo: Opt<Doc>, before?: boolean): boolean => { const doAddDoc = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => { - const res = flg && Doc.AddDocToList(this.doc[DocData], this.props.fieldKey, doc, relativeTo, before); - res && Doc.SetContainer(doc, this.props.Document); + const res = flg && Doc.AddDocToList(this.Document[DocData], this._props.fieldKey, doc, relativeTo, before); + res && Doc.SetContainer(doc, this.Document); return res; }, true); - if (this.doc.resolvedDataDoc instanceof Promise) return false; - return relativeTo === undefined ? this.props.addDocument?.(docs) || false : doAddDoc(docs); + if (this.Document.resolvedDataDoc instanceof Promise) return false; + return relativeTo === undefined ? this._props.addDocument?.(docs) || false : doAddDoc(docs); }; onContextMenu = (e: React.MouseEvent): void => { // need to test if propagation has stopped because GoldenLayout forces a parallel react hierarchy to be created for its top-level layout if (!Doc.noviceMode) { const layoutItems: ContextMenuProps[] = []; - layoutItems.push({ description: 'Make tree state ' + (this.doc.treeView_OpenIsTransient ? 'persistent' : 'transient'), event: () => (this.doc.treeView_OpenIsTransient = !this.doc.treeView_OpenIsTransient), icon: 'paint-brush' }); - layoutItems.push({ description: (this.doc.treeView_HideHeaderFields ? 'Show' : 'Hide') + ' Header Fields', event: () => (this.doc.treeView_HideHeaderFields = !this.doc.treeView_HideHeaderFields), icon: 'paint-brush' }); - layoutItems.push({ description: (this.doc.treeView_HideTitle ? 'Show' : 'Hide') + ' Title', event: () => (this.doc.treeView_HideTitle = !this.doc.treeView_HideTitle), icon: 'paint-brush' }); + layoutItems.push({ + description: 'Make tree state ' + (this.Document.treeView_OpenIsTransient ? 'persistent' : 'transient'), + event: () => (this.Document.treeView_OpenIsTransient = !this.Document.treeView_OpenIsTransient), + icon: 'paint-brush', + }); + layoutItems.push({ description: (this.Document.treeView_HideHeaderFields ? 'Show' : 'Hide') + ' Header Fields', event: () => (this.Document.treeView_HideHeaderFields = !this.Document.treeView_HideHeaderFields), icon: 'paint-brush' }); + layoutItems.push({ description: (this.Document.treeView_HideTitle ? 'Show' : 'Hide') + ' Title', event: () => (this.Document.treeView_HideTitle = !this.Document.treeView_HideTitle), icon: 'paint-brush' }); ContextMenu.Instance.addItem({ description: 'Options...', subitems: layoutItems, icon: 'eye' }); const existingOnClick = ContextMenu.Instance.findByDescription('OnClick...'); const onClicks: ContextMenuProps[] = existingOnClick && 'subitems' in existingOnClick ? existingOnClick.subitems : []; - onClicks.push({ description: 'Edit onChecked Script', event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.doc, undefined, 'onCheckedClick'), 'edit onCheckedClick'), icon: 'edit' }); + onClicks.push({ description: 'Edit onChecked Script', event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.Document, undefined, 'onCheckedClick'), 'edit onCheckedClick'), icon: 'edit' }); !existingOnClick && ContextMenu.Instance.addItem({ description: 'OnClick...', noexpand: true, subitems: onClicks, icon: 'mouse-pointer' }); } }; @@ -213,7 +219,7 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree height={'auto'} GetValue={() => StrCast(this.dataDoc.title)} SetValue={undoBatch((value: string, shift: boolean, enter: boolean) => { - if (enter && this.props.Document.treeView_Type === TreeViewType.outline) this.makeTextCollection(this.treeChildren); + if (enter && this.Document.treeView_Type === TreeViewType.outline) this.makeTextCollection(this.treeChildren); this.dataDoc.title = value; return true; })} @@ -231,12 +237,11 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree get documentTitle() { return ( <FormattedTextBox - {...this.props} + {...this._props} fieldKey="text" - renderDepth={this.props.renderDepth + 1} + renderDepth={this._props.renderDepth + 1} isContentActive={this.isContentActive} isDocumentActive={this.isContentActive} - rootSelected={returnTrue} forceAutoHeight={true} // needed to make the title resize even if the rest of the tree view is not layout_autoHeight PanelWidth={this.documentTitleWidth} PanelHeight={this.documentTitleHeight} @@ -249,57 +254,56 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree moveDocument={returnFalse} removeDocument={returnFalse} whenChildContentsActiveChanged={this.whenChildContentsActiveChanged} - bringToFront={returnFalse} /> ); } childContextMenuItems = () => { - const customScripts = Cast(this.doc.childContextMenuScripts, listSpec(ScriptField), []); - const customFilters = Cast(this.doc.childContextMenuFilters, listSpec(ScriptField), []); - const icons = StrListCast(this.doc.childContextMenuIcons); - return StrListCast(this.doc.childContextMenuLabels).map((label, i) => ({ script: customScripts[i], filter: customFilters[i], icon: icons[i], label })); + const customScripts = Cast(this.Document.childContextMenuScripts, listSpec(ScriptField), []); + const customFilters = Cast(this.Document.childContextMenuFilters, listSpec(ScriptField), []); + const icons = StrListCast(this.Document.childContextMenuIcons); + return StrListCast(this.Document.childContextMenuLabels).map((label, i) => ({ script: customScripts[i], filter: customFilters[i], icon: icons[i], label })); }; - headerFields = () => this.props.treeViewHideHeaderFields || BoolCast(this.doc.treeView_HideHeaderFields); + headerFields = () => this._props.treeViewHideHeaderFields || BoolCast(this.Document.treeView_HideHeaderFields); @observable _renderCount = 1; @computed get treeViewElements() { TraceMobx(); - const dragAction = StrCast(this.doc.childDragAction) as dropActionType; + const dragAction = StrCast(this.Document.childDragAction) as dropActionType; const addDoc = (doc: Doc | Doc[], relativeTo?: Doc, before?: boolean) => this.addDoc(doc, relativeTo, before); - const moveDoc = (d: Doc | Doc[], target: Doc | undefined, addDoc: (doc: Doc | Doc[]) => boolean) => this.props.moveDocument?.(d, target, addDoc) || false; + const moveDoc = (d: Doc | Doc[], target: Doc | undefined, addDoc: (doc: Doc | Doc[]) => boolean) => this._props.moveDocument?.(d, target, addDoc) || false; if (this._renderCount < this.treeChildren.length) setTimeout(action(() => (this._renderCount = Math.min(this.treeChildren.length, this._renderCount + 20)))); return TreeView.GetChildElements( this.treeChildren, this, this, - this.doc, - this.props.DataDoc, + this.Document, + this._props.TemplateDataDocument, undefined, undefined, addDoc, this.remove, moveDoc, dragAction, - this.props.addDocTab, - this.props.styleProvider, + this._props.addDocTab, + this._props.styleProvider, this.screenToLocalTransform, this.isContentActive, this.panelWidth, - this.props.renderDepth, + this._props.renderDepth, this.headerFields, [], - this.props.onCheckedClick, + this._props.onCheckedClick, this.onChildClick, - this.props.treeViewSkipFields, + this._props.treeViewSkipFields, true, this.whenChildContentsActiveChanged, - this.props.dontRegisterView || Cast(this.props.Document.childDontRegisterViews, 'boolean', null), + this._props.dontRegisterView || Cast(this.Document.childDontRegisterViews, 'boolean', null), this.observeHeight, this.unobserveHeight, this.childContextMenuItems(), //TODO: [AL] add these - this.props.AddToMap, - this.props.RemFromMap, - this.props.hierarchyIndex, + this._props.AddToMap, + this._props.RemFromMap, + this._props.hierarchyIndex, this._renderCount ); } @@ -307,8 +311,8 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree return this.dataDoc === null ? null : ( <div className="collectionTreeView-titleBar" - ref={action((r: any) => (this._titleRef = r) && (this._titleHeight = r.getBoundingClientRect().height * this.props.ScreenToLocalTransform().Scale))} - key={this.doc[Id]} + ref={action((r: any) => (this._titleRef = r) && (this._titleHeight = r.getBoundingClientRect().height * this.ScreenToLocalBoxXf().Scale))} + key={this.Document[Id]} style={!this.outlineMode ? { marginLeft: this.marginX(), paddingTop: this.marginTop() } : {}}> {this.outlineMode ? this.documentTitle : this.editableTitle} </div> @@ -316,38 +320,37 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree } @computed get noviceExplainer() { - return !Doc.noviceMode || !this.rootDoc.layout_explainer ? null : <div className="documentExplanation"> {StrCast(this.rootDoc.layout_explainer)} </div>; + return !Doc.noviceMode || !this.layoutDoc.layout_explainer ? null : <div className="documentExplanation"> {StrCast(this.layoutDoc.layout_explainer)} </div>; } return35 = () => 35; @computed get buttonMenu() { - const menuDoc = Cast(this.rootDoc.layout_headerButton, Doc, null); + const menuDoc = Cast(this.layoutDoc.layout_headerButton, Doc, null); // To create a multibutton menu add a CollectionLinearView return !menuDoc ? null : ( <div className="buttonMenu-docBtn" style={{ width: NumCast(menuDoc._width, 30), height: NumCast(menuDoc._height, 30) }}> <DocumentView Document={menuDoc} - DataDoc={menuDoc} - isContentActive={this.props.isContentActive} + TemplateDataDocument={menuDoc} + isContentActive={this._props.isContentActive} isDocumentActive={returnTrue} - addDocument={this.props.addDocument} - moveDocument={this.props.moveDocument} - removeDocument={this.props.removeDocument} - addDocTab={this.props.addDocTab} - pinToPres={emptyFunction} - rootSelected={this.props.isSelected} + addDocument={this._props.addDocument} + moveDocument={this._props.moveDocument} + removeDocument={this._props.removeDocument} + addDocTab={this._props.addDocTab} + pinToPres={this._props.pinToPres} + rootSelected={this.rootSelected} ScreenToLocalTransform={Transform.Identity} PanelWidth={this.return35} PanelHeight={this.return35} - renderDepth={this.props.renderDepth + 1} + renderDepth={this._props.renderDepth + 1} focus={emptyFunction} - styleProvider={this.props.styleProvider} - docViewPath={returnEmptyDoclist} + styleProvider={this._props.styleProvider} + containerViewPath={returnEmptyDoclist} whenChildContentsActiveChanged={emptyFunction} - bringToFront={emptyFunction} - childFilters={this.props.childFilters} - childFiltersByRanges={this.props.childFiltersByRanges} - searchFilterDocs={this.props.searchFilterDocs} + childFilters={this._props.childFilters} + childFiltersByRanges={this._props.childFiltersByRanges} + searchFilterDocs={this._props.searchFilterDocs} /> </div> ); @@ -364,30 +367,30 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree @computed get nativeDimScaling() { const nw = this.nativeWidth; const nh = this.nativeHeight; - const hscale = nh ? this.props.PanelHeight() / nh : 1; - const wscale = nw ? this.props.PanelWidth() / nw : 1; + const hscale = nh ? this._props.PanelHeight() / nh : 1; + const wscale = nw ? this._props.PanelWidth() / nw : 1; return wscale < hscale ? wscale : hscale; } - marginX = () => NumCast(this.doc._xMargin); - marginTop = () => NumCast(this.doc._yMargin); - marginBot = () => NumCast(this.doc._yMargin); - documentTitleWidth = () => Math.min(this.layoutDoc?.[Width](), this.panelWidth()); - documentTitleHeight = () => (this.layoutDoc?.[Height]() || 0) - NumCast(this.layoutDoc.layout_autoHeightMargins); + marginX = () => NumCast(this.Document._xMargin); + marginTop = () => NumCast(this.Document._yMargin); + marginBot = () => NumCast(this.Document._yMargin); + documentTitleWidth = () => Math.min(NumCast(this.layoutDoc?._width), this.panelWidth()); + documentTitleHeight = () => NumCast(this.layoutDoc?._height) - NumCast(this.layoutDoc.layout_autoHeightMargins); truncateTitleWidth = () => this.treeViewtruncateTitleWidth; - onChildClick = () => this.props.onChildClick?.() || ScriptCast(this.doc.onChildClick); - panelWidth = () => Math.max(0, this.props.PanelWidth() - 2 * this.marginX() * (this.props.NativeDimScaling?.() || 1)); + onChildClick = () => this._props.onChildClick?.() || ScriptCast(this.Document.onChildClick); + panelWidth = () => Math.max(0, this._props.PanelWidth() - 2 * this.marginX() * (this._props.NativeDimScaling?.() || 1)); - addAnnotationDocument = (doc: Doc | Doc[]) => this.addDocument(doc, `${this.props.fieldKey}_annotations`) || false; - remAnnotationDocument = (doc: Doc | Doc[]) => this.removeDocument(doc, `${this.props.fieldKey}_annotations`) || false; + addAnnotationDocument = (doc: Doc | Doc[]) => this.addDocument(doc, `${this._props.fieldKey}_annotations`) || false; + remAnnotationDocument = (doc: Doc | Doc[]) => this.removeDocument(doc, `${this._props.fieldKey}_annotations`) || false; moveAnnotationDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[], annotationKey?: string) => boolean) => - this.moveDocument(doc, targetCollection, addDocument, `${this.props.fieldKey}_annotations`) || false; + this.moveDocument(doc, targetCollection, addDocument, `${this._props.fieldKey}_annotations`) || false; @observable _headerHeight = 0; @computed get content() { - const background = () => this.props.styleProvider?.(this.doc, this.props, StyleProp.BackgroundColor); - const color = () => this.props.styleProvider?.(this.doc, this.props, StyleProp.Color); - const pointerEvents = () => (this.props.isContentActive() === false ? 'none' : undefined); - const titleBar = this.props.treeViewHideTitle || this.doc.treeView_HideTitle ? null : this.titleBar; + const background = () => this._props.styleProvider?.(this.Document, this._props, StyleProp.BackgroundColor); + const color = () => this._props.styleProvider?.(this.Document, this._props, StyleProp.Color); + const pointerEvents = () => (this._props.isContentActive() === false ? 'none' : undefined); + const titleBar = this._props.treeViewHideTitle || this.Document.treeView_HideTitle ? null : this.titleBar; return ( <div style={{ display: 'flex', flexDirection: 'column', height: '100%', pointerEvents: 'all' }}> {!this.buttonMenu && !this.noviceExplainer ? null : ( @@ -399,7 +402,7 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree <div className="collectionTreeView-contents" key="tree" - ref={r => !this.doc.treeView_HasOverlay && r && this.createTreeDropTarget(r)} + ref={r => !this.Document.treeView_HasOverlay && r && this.createTreeDropTarget(r)} style={{ ...(!titleBar ? { marginLeft: this.marginX(), paddingTop: this.marginTop() } : {}), color: color(), @@ -424,7 +427,7 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree minHeight: '100%', }} onWheel={e => e.stopPropagation()} - onClick={e => (!this.layoutDoc.forceActive ? this.props.select(false) : SelectionManager.DeselectAll())} + onClick={e => (!this.layoutDoc.forceActive ? this._props.select(false) : SelectionManager.DeselectAll())} onDrop={this.onTreeDrop}> <ul className={`no-indent${this.outlineMode ? '-outline' : ''}`}>{this.treeViewElements}</ul> </div> @@ -436,27 +439,26 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree render() { TraceMobx(); - const scale = this.props.NativeDimScaling?.() || 1; + const scale = this._props.NativeDimScaling?.() || 1; return ( <div style={{ transform: `scale(${scale})`, transformOrigin: 'top left', width: `${100 / scale}%`, height: `${100 / scale}%` }}> - {!(this.doc instanceof Doc) || !this.treeChildren ? null : this.doc.treeView_HasOverlay ? ( + {!(this.Document instanceof Doc) || !this.treeChildren ? null : this.Document.treeView_HasOverlay ? ( <CollectionFreeFormView - {...this.props} - setContentView={emptyFunction} + {...this._props} + setContentViewBox={emptyFunction} NativeWidth={returnZero} NativeHeight={returnZero} - pointerEvents={this.props.isContentActive() && SnappingManager.GetIsDragging() ? returnAll : returnNone} + pointerEvents={this._props.isContentActive() && SnappingManager.IsDragging ? returnAll : returnNone} isAnnotationOverlay={true} isAnnotationOverlayScrollable={true} - childDocumentsActive={this.props.isDocumentActive} - fieldKey={this.props.fieldKey + '_annotations'} + childDocumentsActive={this._props.isContentActive} + fieldKey={this._props.fieldKey + '_annotations'} dropAction="move" select={emptyFunction} addDocument={this.addAnnotationDocument} removeDocument={this.remAnnotationDocument} moveDocument={this.moveAnnotationDocument} - bringToFront={emptyFunction} - renderDepth={this.props.renderDepth + 1}> + renderDepth={this._props.renderDepth + 1}> {this.content} </CollectionFreeFormView> ) : ( diff --git a/src/client/views/collections/CollectionView.scss b/src/client/views/collections/CollectionView.scss index 5db489c0a..de53a2c62 100644 --- a/src/client/views/collections/CollectionView.scss +++ b/src/client/views/collections/CollectionView.scss @@ -1,4 +1,4 @@ -@import "../global/globalCssVariables"; +@import '../global/globalCssVariables.module.scss'; .collectionView { border-width: 0; @@ -9,7 +9,7 @@ border-radius: inherit; width: 100%; height: 100%; - overflow: hidden; // bcz: used to be 'auto' which would create scrollbars when there's a floating doc that's not visible. not sure if that's better, but the scrollbars are annoying... + //overflow: hidden; // bcz: used to be 'auto' which would create scrollbars when there's a floating doc that's not visible. not sure if that's better, but the scrollbars are annoying... .collectionView-filterDragger { background-color: rgb(140, 139, 139); @@ -54,8 +54,8 @@ } } - >div, - >div>div { + > div, + > div > div { width: 100%; height: 100%; } @@ -80,4 +80,4 @@ border-radius: 50%; padding: 3px; background: white; -}
\ No newline at end of file +} diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index ce19b3f9b..18eb4dd1f 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -1,47 +1,43 @@ -import { computed, observable, runInAction } from 'mobx'; +import { IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; +import { returnEmptyString } from '../../../Utils'; import { Doc, DocListCast, Opt } from '../../../fields/Doc'; import { ObjectField } from '../../../fields/ObjectField'; import { ScriptField } from '../../../fields/ScriptField'; import { BoolCast, Cast, ScriptCast, StrCast } from '../../../fields/Types'; import { TraceMobx } from '../../../fields/util'; -import { returnEmptyString } from '../../../Utils'; -import { DocUtils } from '../../documents/Documents'; import { CollectionViewType } from '../../documents/DocumentTypes'; +import { DocUtils } from '../../documents/Documents'; import { dropActionType } from '../../util/DragManager'; import { ImageUtils } from '../../util/Import & Export/ImageUtils'; -import { InteractionUtils } from '../../util/InteractionUtils'; import { ContextMenu } from '../ContextMenu'; import { ContextMenuProps } from '../ContextMenuItem'; -import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../DocComponent'; +import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../DocComponent'; import { OpenWhere } from '../nodes/DocumentView'; import { FieldView, FieldViewProps } from '../nodes/FieldView'; +import { CollectionCalendarView } from './CollectionCalendarView'; import { CollectionCarousel3DView } from './CollectionCarousel3DView'; import { CollectionCarouselView } from './CollectionCarouselView'; import { CollectionDockingView } from './CollectionDockingView'; -import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView'; -import { CollectionGridView } from './collectionGrid/CollectionGridView'; -import { CollectionLinearView } from './collectionLinear'; -import { CollectionMulticolumnView } from './collectionMulticolumn/CollectionMulticolumnView'; -import { CollectionMultirowView } from './collectionMulticolumn/CollectionMultirowView'; import { CollectionNoteTakingView } from './CollectionNoteTakingView'; import { CollectionPileView } from './CollectionPileView'; -import { CollectionSchemaView } from './collectionSchema/CollectionSchemaView'; import { CollectionStackingView } from './CollectionStackingView'; import { SubCollectionViewProps } from './CollectionSubView'; import { CollectionTimeView } from './CollectionTimeView'; import { CollectionTreeView } from './CollectionTreeView'; import './CollectionView.scss'; -export const COLLECTION_BORDER_WIDTH = 2; -const path = require('path'); - -interface CollectionViewProps_ extends FieldViewProps { +import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView'; +import { CollectionGridView } from './collectionGrid/CollectionGridView'; +import { CollectionLinearView } from './collectionLinear'; +import { CollectionMulticolumnView } from './collectionMulticolumn/CollectionMulticolumnView'; +import { CollectionMultirowView } from './collectionMulticolumn/CollectionMultirowView'; +import { CollectionSchemaView } from './collectionSchema/CollectionSchemaView'; +export interface CollectionViewProps extends React.PropsWithChildren<FieldViewProps> { isAnnotationOverlay?: boolean; // is the collection an annotation overlay (eg an overlay on an image/video/etc) isAnnotationOverlayScrollable?: boolean; // whether the annotation overlay can be vertically scrolled (just for tree views, currently) layoutEngine?: () => string; setPreviewCursor?: (func: (x: number, y: number, drag: boolean, hide: boolean, doc: Opt<Doc>) => void) => void; - setBrushViewer?: (func?: (view: { width: number; height: number; panX: number; panY: number }, transTime: number) => void) => void; ignoreUnrendered?: boolean; // property overrides for child documents @@ -52,10 +48,9 @@ interface CollectionViewProps_ extends FieldViewProps { childlayout_showTitle?: () => string; childOpacity?: () => number; childContextMenuItems?: () => { script: ScriptField; label: string }[]; - childHideTitle?: () => boolean; // whether to hide the documentdecorations title for children - childHideDecorationTitle?: () => boolean; - childHideResizeHandles?: () => boolean; childLayoutTemplate?: () => Doc | undefined; // specify a layout Doc template to use for children of the collection + childHideDecorationTitle?: boolean; + childHideResizeHandles?: boolean; childDragAction?: dropActionType; childXPadding?: number; childYPadding?: number; @@ -68,9 +63,8 @@ interface CollectionViewProps_ extends FieldViewProps { RemFromMap?: (treeViewDoc: Doc, index: number[]) => void; hierarchyIndex?: number[]; // hierarchical index of a document up to the rendering root (primarily used for tree views) } -export interface CollectionViewProps extends React.PropsWithChildren<CollectionViewProps_> {} @observer -export class CollectionView extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & CollectionViewProps>() { +export class CollectionView extends ViewBoxAnnotatableComponent<CollectionViewProps>() implements ViewBoxInterface { public static LayoutString(fieldStr: string) { return FieldView.LayoutString(CollectionView, fieldStr); } @@ -79,12 +73,28 @@ export class CollectionView extends ViewBoxAnnotatableComponent<ViewBoxAnnotatab public static SetSafeMode(safeMode: boolean) { this._safeMode = safeMode; } - - protected _multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer; + private reactionDisposer: IReactionDisposer | undefined; + @observable _isContentActive: boolean | undefined = undefined; constructor(props: any) { super(props); - runInAction(() => (this._annotationKeySuffix = returnEmptyString)); + makeObservable(this); + this._annotationKeySuffix = returnEmptyString; + } + + componentDidMount() { + // we use a reaction/observable instead of a computed value to reduce invalidations. + // There are many variables that aggregate into this boolean output - a change in any of them + // will cause downstream invalidations even if the computed value doesn't change. By making + // this a reaction, downstream invalidations only occur when the reaction value actually changes. + this.reactionDisposer = reaction( + () => (this.isAnyChildContentActive() ? true : this._props.isContentActive()), + active => (this._isContentActive = active), + { fireImmediately: true } + ); + } + componentWillUnmount() { + this.reactionDisposer?.(); } get collectionViewType(): CollectionViewType | undefined { @@ -101,41 +111,41 @@ export class CollectionView extends ViewBoxAnnotatableComponent<ViewBoxAnnotatab return viewField as any as CollectionViewType; } - screenToLocalTransform = () => (this.props.renderDepth ? this.props.ScreenToLocalTransform() : this.props.ScreenToLocalTransform().scale(this.props.PanelWidth() / this.bodyPanelWidth())); + screenToLocalTransform = () => (this._props.renderDepth ? this.ScreenToLocalBoxXf() : this.ScreenToLocalBoxXf().scale(this._props.PanelWidth() / this.bodyPanelWidth())); // prettier-ignore private renderSubView = (type: CollectionViewType | undefined, props: SubCollectionViewProps) => { TraceMobx(); if (type === undefined) return null; switch (type) { default: - case CollectionViewType.Freeform: return <CollectionFreeFormView key="collview" {...props} />; - case CollectionViewType.Docking: return <CollectionDockingView key="collview" {...props} />; - case CollectionViewType.Schema: return <CollectionSchemaView key="collview" {...props} />; - case CollectionViewType.Docking: return <CollectionDockingView key="collview" {...props} />; - case CollectionViewType.Tree: return <CollectionTreeView key="collview" {...props} />; - case CollectionViewType.Multicolumn: return <CollectionMulticolumnView key="collview" {...props} />; - case CollectionViewType.Multirow: return <CollectionMultirowView key="collview" {...props} />; - case CollectionViewType.Linear: return <CollectionLinearView key="collview" {...props} />; - case CollectionViewType.Pile: return <CollectionPileView key="collview" {...props} />; - case CollectionViewType.Carousel: return <CollectionCarouselView key="collview" {...props} />; - case CollectionViewType.Carousel3D: return <CollectionCarousel3DView key="collview" {...props} />; - case CollectionViewType.Stacking: return <CollectionStackingView key="collview" {...props} />; - case CollectionViewType.NoteTaking: return <CollectionNoteTakingView key="collview" {...props} />; - case CollectionViewType.Masonry: return <CollectionStackingView key="collview" {...props} />; - case CollectionViewType.Time: return <CollectionTimeView key="collview" {...props} />; - case CollectionViewType.Grid: return <CollectionGridView key="collview" {...props} />; - //case CollectionViewType.Staff: return <CollectionStaffView key="collview" {...props} />; + case CollectionViewType.Freeform: return <CollectionFreeFormView key="collview" {...props} />; + case CollectionViewType.Schema: return <CollectionSchemaView key="collview" {...props} />; + case CollectionViewType.Calendar: return <CollectionCalendarView key="collview" {...props} />; + case CollectionViewType.Docking: return <CollectionDockingView key="collview" {...props} />; + case CollectionViewType.Tree: return <CollectionTreeView key="collview" {...props} />; + case CollectionViewType.Multicolumn: return <CollectionMulticolumnView key="collview" {...props} />; + case CollectionViewType.Multirow: return <CollectionMultirowView key="collview" {...props} />; + case CollectionViewType.Linear: return <CollectionLinearView key="collview" {...props} />; + case CollectionViewType.Pile: return <CollectionPileView key="collview" {...props} />; + case CollectionViewType.Carousel: return <CollectionCarouselView key="collview" {...props} />; + case CollectionViewType.Carousel3D: return <CollectionCarousel3DView key="collview" {...props} />; + case CollectionViewType.Stacking: return <CollectionStackingView key="collview" {...props} />; + case CollectionViewType.NoteTaking: return <CollectionNoteTakingView key="collview" {...props} />; + case CollectionViewType.Masonry: return <CollectionStackingView key="collview" {...props} />; + case CollectionViewType.Time: return <CollectionTimeView key="collview" {...props} />; + case CollectionViewType.Grid: return <CollectionGridView key="collview" {...props} />; } }; setupViewTypes(category: string, func: (type_collection: CollectionViewType) => Doc) { - if (!Doc.IsSystem(this.rootDoc) && this.rootDoc._type_collection !== CollectionViewType.Docking && !this.rootDoc.isGroup && !this.rootDoc.annotationOn) { + if (!Doc.IsSystem(this.Document) && this.Document._type_collection !== CollectionViewType.Docking && !this.dataDoc.isGroup && !this.Document.annotationOn) { // prettier-ignore const subItems: ContextMenuProps[] = [ { description: 'Freeform', event: () => func(CollectionViewType.Freeform), icon: 'signature' }, { description: 'Schema', event: () => func(CollectionViewType.Schema), icon: 'th-list' }, { description: 'Tree', event: () => func(CollectionViewType.Tree), icon: 'tree' }, { description: 'Stacking', event: () => (func(CollectionViewType.Stacking)._layout_autoHeight = true), icon: 'ellipsis-v' }, + { description: 'Calendar', event: () => func(CollectionViewType.Calendar), icon: 'columns'}, { description: 'Notetaking', event: () => (func(CollectionViewType.NoteTaking)._layout_autoHeight = true), icon: 'ellipsis-v' }, { description: 'Multicolumn', event: () => func(CollectionViewType.Multicolumn), icon: 'columns' }, { description: 'Multirow', event: () => func(CollectionViewType.Multirow), icon: 'columns' }, @@ -159,27 +169,27 @@ export class CollectionView extends ViewBoxAnnotatableComponent<ViewBoxAnnotatab if (cm && !e.isPropagationStopped()) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 !Doc.noviceMode && - this.setupViewTypes('UI Controls...', vtype => { - const newRendition = Doc.MakeEmbedding(this.rootDoc); + this.setupViewTypes('Appearance...', vtype => { + const newRendition = Doc.MakeEmbedding(this.Document); newRendition._type_collection = vtype; - this.props.addDocTab(newRendition, OpenWhere.addRight); + this._props.addDocTab(newRendition, OpenWhere.addRight); return newRendition; }); const options = cm.findByDescription('Options...'); const optionItems = options && 'subitems' in options ? options.subitems : []; - !Doc.noviceMode ? optionItems.splice(0, 0, { description: `${this.rootDoc.forceActive ? 'Select' : 'Force'} Contents Active`, event: () => (this.rootDoc.forceActive = !this.rootDoc.forceActive), icon: 'project-diagram' }) : null; - if (this.rootDoc.childLayout instanceof Doc) { - optionItems.push({ description: 'View Child Layout', event: () => this.props.addDocTab(this.rootDoc.childLayout as Doc, OpenWhere.addRight), icon: 'project-diagram' }); + !Doc.noviceMode ? optionItems.splice(0, 0, { description: `${this.Document.forceActive ? 'Select' : 'Force'} Contents Active`, event: () => (this.Document.forceActive = !this.Document.forceActive), icon: 'project-diagram' }) : null; + if (this.Document.childLayout instanceof Doc) { + optionItems.push({ description: 'View Child Layout', event: () => this._props.addDocTab(this.Document.childLayout as Doc, OpenWhere.addRight), icon: 'project-diagram' }); } - if (this.rootDoc.childClickedOpenTemplateView instanceof Doc) { - optionItems.push({ description: 'View Child Detailed Layout', event: () => this.props.addDocTab(this.rootDoc.childClickedOpenTemplateView as Doc, OpenWhere.addRight), icon: 'project-diagram' }); + if (this.Document.childClickedOpenTemplateView instanceof Doc) { + optionItems.push({ description: 'View Child Detailed Layout', event: () => this._props.addDocTab(this.Document.childClickedOpenTemplateView as Doc, OpenWhere.addRight), icon: 'project-diagram' }); } - !Doc.noviceMode && optionItems.push({ description: `${this.rootDoc._isLightbox ? 'Unset' : 'Set'} is Lightbox`, event: () => (this.rootDoc._isLightbox = !this.rootDoc._isLightbox), icon: 'project-diagram' }); + !Doc.noviceMode && optionItems.push({ description: `${this.layoutDoc._isLightbox ? 'Unset' : 'Set'} is Lightbox`, event: () => (this.layoutDoc._isLightbox = !this.layoutDoc._isLightbox), icon: 'project-diagram' }); !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'hand-point-right' }); - if (!Doc.noviceMode && !this.rootDoc.annotationOn) { + if (!Doc.noviceMode && !this.Document.annotationOn && !this._props.hideClickBehaviors) { const existingOnClick = cm.findByDescription('OnClick...'); const onClicks = existingOnClick && 'subitems' in existingOnClick ? existingOnClick.subitems : []; const funcs = [ @@ -191,9 +201,9 @@ export class CollectionView extends ViewBoxAnnotatableComponent<ViewBoxAnnotatab description: `Edit ${func.name} script`, icon: 'edit', event: (obj: any) => { - const embedding = Doc.MakeEmbedding(this.rootDoc); + const embedding = Doc.MakeEmbedding(this.Document); DocUtils.makeCustomViewClicked(embedding, undefined, func.key); - this.props.addDocTab(embedding, OpenWhere.addRight); + this._props.addDocTab(embedding, OpenWhere.addRight); }, }) ); @@ -201,51 +211,51 @@ export class CollectionView extends ViewBoxAnnotatableComponent<ViewBoxAnnotatab onClicks.push({ description: `Set child ${childClick.title}`, icon: 'edit', - event: () => (Doc.GetProto(this.rootDoc)[StrCast(childClick.targetScriptKey)] = ObjectField.MakeCopy(ScriptCast(childClick.data))), + event: () => (this.dataDoc[StrCast(childClick.targetScriptKey)] = ObjectField.MakeCopy(ScriptCast(childClick.data))), }) ); - !Doc.IsSystem(this.rootDoc) && !existingOnClick && cm.addItem({ description: 'OnClick...', noexpand: true, subitems: onClicks, icon: 'mouse-pointer' }); + !Doc.IsSystem(this.Document) && !existingOnClick && cm.addItem({ description: 'OnClick...', noexpand: true, subitems: onClicks, icon: 'mouse-pointer' }); } if (!Doc.noviceMode) { const more = cm.findByDescription('More...'); const moreItems = more && 'subitems' in more ? more.subitems : []; - moreItems.push({ description: 'Export Image Hierarchy', icon: 'columns', event: () => ImageUtils.ExportHierarchyToFileSystem(this.rootDoc) }); + moreItems.push({ description: 'Export Image Hierarchy', icon: 'columns', event: () => ImageUtils.ExportHierarchyToFileSystem(this.Document) }); !more && cm.addItem({ description: 'More...', subitems: moreItems, icon: 'hand-point-right' }); } } }; - bodyPanelWidth = () => this.props.PanelWidth(); + bodyPanelWidth = () => this._props.PanelWidth(); - childHideResizeHandles = () => this.props.childHideResizeHandles?.() ?? BoolCast(this.Document.childHideResizeHandles); - childHideDecorationTitle = () => this.props.childHideDecorationTitle?.() ?? BoolCast(this.Document.childHideDecorationTitle); - childLayoutTemplate = () => this.props.childLayoutTemplate?.() || Cast(this.rootDoc.childLayoutTemplate, Doc, null); - isContentActive = (outsideReaction?: boolean) => (this.isAnyChildContentActive() ? true : this.props.isContentActive()); + childLayoutTemplate = () => this._props.childLayoutTemplate?.() || Cast(this.Document.childLayoutTemplate, Doc, null); + isContentActive = (outsideReaction?: boolean) => this._isContentActive; + + pointerEvents = () => + this.layoutDoc._lockedPosition && // + this.Document?._type_collection === CollectionViewType.Freeform; render() { TraceMobx(); + const pointerEvents = this.pointerEvents() ? 'none' : undefined; const props: SubCollectionViewProps = { - ...this.props, + ...this._props, addDocument: this.addDocument, moveDocument: this.moveDocument, removeDocument: this.removeDocument, isContentActive: this.isContentActive, isAnyChildContentActive: this.isAnyChildContentActive, - whenChildContentsActiveChanged: this.whenChildContentsActiveChanged, PanelWidth: this.bodyPanelWidth, - PanelHeight: this.props.PanelHeight, + PanelHeight: this._props.PanelHeight, ScreenToLocalTransform: this.screenToLocalTransform, childLayoutTemplate: this.childLayoutTemplate, - childLayoutString: StrCast(this.rootDoc.childLayoutString, this.props.childLayoutString), - childHideResizeHandles: this.childHideResizeHandles, - childHideDecorationTitle: this.childHideDecorationTitle, + whenChildContentsActiveChanged: this.whenChildContentsActiveChanged, + childLayoutString: StrCast(this.Document.childLayoutString, this._props.childLayoutString), + childHideResizeHandles: this._props.childHideResizeHandles ?? BoolCast(this.Document.childHideResizeHandles), + childHideDecorationTitle: this._props.childHideDecorationTitle ?? BoolCast(this.Document.childHideDecorationTitle), }; return ( - <div - className="collectionView" - onContextMenu={this.onContextMenu} - style={{ pointerEvents: this.props.DocumentView?.()?.props.docViewPath().lastElement()?.rootDoc?._type_collection === CollectionViewType.Freeform && this.rootDoc._lockedPosition ? 'none' : undefined }}> + <div className="collectionView" onContextMenu={this.onContextMenu} style={{ pointerEvents }}> {this.renderSubView(this.collectionViewType, props)} </div> ); diff --git a/src/client/views/collections/KeyRestrictionRow.tsx b/src/client/views/collections/KeyRestrictionRow.tsx index f3071b316..4523a4f1e 100644 --- a/src/client/views/collections/KeyRestrictionRow.tsx +++ b/src/client/views/collections/KeyRestrictionRow.tsx @@ -1,6 +1,6 @@ -import * as React from "react"; -import { observable, runInAction } from "mobx"; -import { observer } from "mobx-react"; +import { observable, runInAction } from 'mobx'; +import { observer } from 'mobx-react'; +import * as React from 'react'; interface IKeyRestrictionProps { contains: boolean; @@ -19,37 +19,28 @@ export default class KeyRestrictionRow extends React.Component<IKeyRestrictionPr if (this._key && this._value) { let parsedValue: string | number = `"${this._value}"`; const parsed = parseInt(this._value); - let type = "string"; + let type = 'string'; if (!isNaN(parsed)) { parsedValue = parsed; - type = "number"; + type = 'number'; } - const scriptText = `${this._contains ? "" : "!"}(((doc.${this._key} && (doc.${this._key} as ${type})${type === "string" ? ".includes" : "<="}(${parsedValue}))) || - ((doc.data_ext && doc.data_ext.${this._key}) && (doc.data_ext.${this._key} as ${type})${type === "string" ? ".includes" : "<="}(${parsedValue}))))`; + const scriptText = `${this._contains ? '' : '!'}(((doc.${this._key} && (doc.${this._key} as ${type})${type === 'string' ? '.includes' : '<='}(${parsedValue}))) || + ((doc.data_ext && doc.data_ext.${this._key}) && (doc.data_ext.${this._key} as ${type})${type === 'string' ? '.includes' : '<='}(${parsedValue}))))`; // let doc = new Doc(); // ((doc.data_ext && doc.data_ext!.text) && (doc.data_ext!.text as string).includes("hello")); this.props.script(scriptText); - } - else { - this.props.script(""); + } else { + this.props.script(''); } return ( <div className="collectionViewBaseChrome-viewSpecsMenu-row"> - <input className="collectionViewBaseChrome-viewSpecsMenu-rowLeft" - value={this._key} - onChange={(e) => runInAction(() => this._key = e.target.value)} - placeholder="KEY" /> - <button className="collectionViewBaseChrome-viewSpecsMenu-rowMiddle" - style={{ background: this._contains ? "#77dd77" : "#ff6961" }} - onClick={() => runInAction(() => this._contains = !this._contains)}> - {this._contains ? "CONTAINS" : "DOES NOT CONTAIN"} + <input className="collectionViewBaseChrome-viewSpecsMenu-rowLeft" value={this._key} onChange={e => runInAction(() => (this._key = e.target.value))} placeholder="KEY" /> + <button className="collectionViewBaseChrome-viewSpecsMenu-rowMiddle" style={{ background: this._contains ? '#77dd77' : '#ff6961' }} onClick={() => runInAction(() => (this._contains = !this._contains))}> + {this._contains ? 'CONTAINS' : 'DOES NOT CONTAIN'} </button> - <input className="collectionViewBaseChrome-viewSpecsMenu-rowRight" - value={this._value} - onChange={(e) => runInAction(() => this._value = e.target.value)} - placeholder="VALUE" /> + <input className="collectionViewBaseChrome-viewSpecsMenu-rowRight" value={this._value} onChange={e => runInAction(() => (this._value = e.target.value))} placeholder="VALUE" /> </div> ); } -}
\ No newline at end of file +} diff --git a/src/client/views/collections/TabDocView.scss b/src/client/views/collections/TabDocView.scss index 13bb3a577..dd4c0b881 100644 --- a/src/client/views/collections/TabDocView.scss +++ b/src/client/views/collections/TabDocView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.scss'; +@import '../global/globalCssVariables.module.scss'; .tabDocView-content { height: 100%; @@ -15,7 +15,6 @@ input.lm_title { } input.lm_title { - transition-delay: 0.35s; width: max-content; cursor: pointer; } diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 26aa5a121..9bc3ef822 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -2,38 +2,42 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Popup, Type } from 'browndash-components'; import { clamp } from 'lodash'; -import { action, computed, IReactionDisposer, observable, ObservableSet, reaction } from 'mobx'; +import { IReactionDisposer, ObservableSet, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import * as ReactDOM from 'react-dom/client'; +import { DashColor, Utils, emptyFunction, lightOrDark, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents, simulateMouseClick } from '../../../Utils'; import { Doc, Opt } from '../../../fields/Doc'; -import { DocData, Height, Width } from '../../../fields/DocSymbols'; +import { DocData } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; import { List } from '../../../fields/List'; import { FieldId } from '../../../fields/RefField'; +import { ComputedField } from '../../../fields/ScriptField'; import { Cast, DocCast, NumCast, StrCast } from '../../../fields/Types'; -import { emptyFunction, lightOrDark, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents, simulateMouseClick, Utils } from '../../../Utils'; import { DocServer } from '../../DocServer'; import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes'; +import { Docs } from '../../documents/Documents'; import { DocumentManager } from '../../util/DocumentManager'; import { DragManager, dropActionType } from '../../util/DragManager'; import { SelectionManager } from '../../util/SelectionManager'; import { SettingsManager } from '../../util/SettingsManager'; import { SnappingManager } from '../../util/SnappingManager'; import { Transform } from '../../util/Transform'; -import { undoable, UndoManager } from '../../util/UndoManager'; +import { UndoManager, undoable } from '../../util/UndoManager'; import { DashboardView } from '../DashboardView'; -import { Colors } from '../global/globalEnums'; import { LightboxView } from '../LightboxView'; -import { DocFocusOptions, DocumentView, DocumentViewProps, OpenWhere, OpenWhereMod } from '../nodes/DocumentView'; -import { DashFieldView } from '../nodes/formattedText/DashFieldView'; +import { ObservableReactComponent } from '../ObservableReactComponent'; +import { DefaultStyleProvider, StyleProp } from '../StyleProvider'; +import { Colors } from '../global/globalEnums'; +import { DocumentView, OpenWhere, OpenWhereMod, returnEmptyDocViewList } from '../nodes/DocumentView'; +import { FocusViewOptions, FieldViewProps } from '../nodes/FieldView'; import { KeyValueBox } from '../nodes/KeyValueBox'; +import { DashFieldView } from '../nodes/formattedText/DashFieldView'; import { PinProps, PresBox, PresMovement } from '../nodes/trails'; -import { DefaultStyleProvider, StyleProp } from '../StyleProvider'; import { CollectionDockingView } from './CollectionDockingView'; -import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView'; import { CollectionView } from './CollectionView'; import './TabDocView.scss'; -import React = require('react'); +import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView'; const _global = (window /* browser */ || global) /* node */ as any; interface TabDocViewProps { @@ -42,10 +46,16 @@ interface TabDocViewProps { glContainer: any; } @observer -export class TabDocView extends React.Component<TabDocViewProps> { +export class TabDocView extends ObservableReactComponent<TabDocViewProps> { static _allTabs = new ObservableSet<TabDocView>(); _mainCont: HTMLDivElement | null = null; _tabReaction: IReactionDisposer | undefined; + + constructor(props: any) { + super(props); + makeObservable(this); + } + @observable _activated: boolean = false; @observable _panelWidth = 0; @observable _panelHeight = 0; @@ -53,41 +63,23 @@ export class TabDocView extends React.Component<TabDocViewProps> { @observable _isActive: boolean = false; @observable _isAnyChildContentActive = false; @computed get _isUserActivated() { - return SelectionManager.Views().some(view => view.rootDoc === this._document) || this._isAnyChildContentActive; + return SelectionManager.IsSelected(this._document) || this._isAnyChildContentActive; } - @computed get _isContentActive() { + get _isContentActive() { return this._isUserActivated || this._hovering; } - @observable _document: Doc | undefined; - @observable _view: DocumentView | undefined; + @observable _document: Doc | undefined = undefined; + @observable _view: DocumentView | undefined = undefined; @computed get layoutDoc() { return this._document && Doc.Layout(this._document); } - @computed get tabBorderColor() { - const highlight = DefaultStyleProvider(this._document, undefined, StyleProp.Highlighting); - if (highlight?.highlightIndex === Doc.DocBrushStatus.highlighted) return highlight.highlightColor; - return 'transparent'; - } - @computed get tabColor() { - return this._isUserActivated ? Colors.WHITE : this._hovering ? Colors.LIGHT_GRAY : Colors.MEDIUM_GRAY; - } - @computed get tabTextColor() { - return this._document?.type === DocumentType.PRES ? 'black' : StrCast(this._document?._color, StrCast(this._document?.color, DefaultStyleProvider(this._document, undefined, StyleProp.Color))); - } - // @computed get renderBounds() { - // const bounds = this._document ? Cast(this._document._renderContentBounds, listSpec("number"), [0, 0, this.returnMiniSize(), this.returnMiniSize()]) : [0, 0, 0, 0]; - // const xbounds = bounds[2] - bounds[0]; - // const ybounds = bounds[3] - bounds[1]; - // const dim = Math.max(xbounds, ybounds); - // return { l: bounds[0] + xbounds / 2 - dim / 2, t: bounds[1] + ybounds / 2 - dim / 2, cx: bounds[0] + xbounds / 2, cy: bounds[1] + ybounds / 2, dim }; - // } get stack() { - return (this.props as any).glContainer.parent.parent; + return this._props.glContainer.parent.parent; } get tab() { - return (this.props as any).glContainer.tab; + return this._props.glContainer.tab; } get view() { return this._view; @@ -126,7 +118,7 @@ export class TabDocView extends React.Component<TabDocViewProps> { titleEle.onchange = (e: any) => { undoable(() => { titleEle.size = e.currentTarget.value.length + 3; - Doc.GetProto(doc).title = e.currentTarget.value; + doc[DocData].title = e.currentTarget.value; }, 'edit tab title')(); }; @@ -163,24 +155,45 @@ export class TabDocView extends React.Component<TabDocViewProps> { tab.reactComponents = [iconWrap, closeWrap]; tab.element[0].prepend(iconWrap); tab._disposers.color = reaction( - () => ({ color: this.tabColor, borderColor: this.tabBorderColor }), - coloring => { - const textColor = lightOrDark(this.tabColor); //not working with StyleProp.Color + () => ({ variant: SettingsManager.userVariantColor, degree: Doc.GetBrushStatus(doc), highlight: DefaultStyleProvider(this._document, undefined, StyleProp.Highlighting) }), + ({ variant, degree, highlight }) => { + const color = highlight?.highlightIndex === Doc.DocBrushStatus.highlighted ? highlight.highlightColor : degree ? ['transparent', variant, variant, 'orange'][degree] : variant; + + const textColor = color === variant ? SettingsManager.userColor : lightOrDark(color); titleEle.style.color = textColor; - titleEle.style.backgroundColor = coloring.borderColor; iconWrap.style.color = textColor; closeWrap.style.color = textColor; - tab.element[0].style.background = coloring.color; + tab.element[0].style.background = + color === variant + ? DashColor(color) + .fade( + this._isUserActivated + ? 0 + : this._hovering + ? 0.25 + : degree === Doc.DocBrushStatus.selfBrushed + ? 0.5 + : degree === Doc.DocBrushStatus.protoBrushed // + ? 0.7 + : 0.9 + ) + .rgb() + .toString() + : color; }, { fireImmediately: true } ); } // shifts the focus to this tab when another tab is dragged over it tab.element[0].onmouseenter = (e: MouseEvent) => { - if (SnappingManager.GetIsDragging() && tab.contentItem !== tab.header.parent.getActiveContentItem()) { + if (SnappingManager.IsDragging && tab.contentItem !== tab.header.parent.getActiveContentItem()) { tab.header.parent.setActiveContentItem(tab.contentItem); tab.setActive(true); } + this._document && Doc.BrushDoc(this._document); + }; + tab.element[0].onmouseleave = (e: MouseEvent) => { + this._document && Doc.UnBrushDoc(this._document); }; tab.element[0].oncontextmenu = (e: MouseEvent) => { @@ -203,29 +216,25 @@ export class TabDocView extends React.Component<TabDocViewProps> { } }); tab._disposers.selectionDisposer = reaction( - () => SelectionManager.Views().some(view => view.rootDoc === this._document), + () => SelectionManager.IsSelected(this._document), action(selected => { if (selected) this._activated = true; const toggle = tab.element[0].children[2].children[0] as HTMLInputElement; if (selected && tab.contentItem !== tab.header.parent.getActiveContentItem()) { undoable(() => tab.header.parent.setActiveContentItem(tab.contentItem), 'tab switch')(); } - toggle.style.fontWeight = selected ? 'bold' : ''; + //toggle.style.fontWeight = selected ? 'bold' : ''; // toggle.style.textTransform = selected ? "uppercase" : ""; }), { fireImmediately: true } ); // highlight the tab when the tab document is brushed in any part of the UI - // tab._disposers.reactionDisposer = reaction( - // () => ({ title: doc.title, degree: Doc.IsBrushedDegree(doc) }), - // ({ title, degree }) => { - // titleEle.value = title; - // titleEle.style.padding = degree ? 0 : 2; - // titleEle.style.border = `${['gray', 'gray', 'gray'][degree]} ${['none', 'dashed', 'solid'][degree]} 2px`; - // }, - // { fireImmediately: true } - // ); + tab._disposers.reactionDisposer = reaction( + () => doc?.title, + title => (titleEle.value = title), + { fireImmediately: true } + ); // clean up the tab when it is closed tab.closeElement @@ -260,10 +269,10 @@ export class TabDocView extends React.Component<TabDocViewProps> { return; } const anchorDoc = DocumentManager.Instance.getDocumentView(doc)?.ComponentView?.getAnchor?.(false, pinProps); - const pinDoc = anchorDoc?.type === DocumentType.CONFIG ? anchorDoc : Doc.MakeDelegate(anchorDoc && anchorDoc !== doc ? anchorDoc : doc); - pinDoc.presentation_targetDoc = anchorDoc ?? doc; + const pinDoc = anchorDoc?.type === DocumentType.CONFIG ? anchorDoc : Docs.Create.ConfigDocument({}); + const targDoc = (pinDoc.presentation_targetDoc = anchorDoc ?? doc); pinDoc.title = doc.title + ' - Slide'; - pinDoc.data = new List<Doc>(); // the children of the embedding's layout are the presentation slide children. the embedding's data field might be children of a collection, PDF data, etc -- in any case we don't want the tree view to "see" this data + pinDoc.data = targDoc.type === DocumentType.PRES ? ComputedField.MakeFunction('copyField(this.presentation_targetDoc.data') : new List<Doc>(); // the children of the embedding's layout are the presentation slide children. the embedding's data field might be children of a collection, PDF data, etc -- in any case we don't want the tree view to "see" this data pinDoc.presentation_movement = doc.type === DocumentType.SCRIPTING || pinProps?.pinDocLayout ? PresMovement.None : PresMovement.Zoom; pinDoc.presentation_duration = pinDoc.presentation_duration ?? 1000; pinDoc.presentation_groupWithUp = false; @@ -272,7 +281,6 @@ export class TabDocView extends React.Component<TabDocViewProps> { pinDoc.treeView = ''; // not really needed, but makes key value pane look better pinDoc.treeView_RenderAsBulletHeader = true; // forces a tree view to render the document next to the bullet in the header area pinDoc.treeView_HeaderWidth = '100%'; // forces the header to grow to be the same size as its largest sibling. - pinDoc.treeView_ChildrenOnRoot = true; // tree view will look for hierarchical children on the root doc, not the data doc. pinDoc.treeView_FieldKey = 'data'; // tree view will treat the 'data' field as the field where the hierarchical children are located instead of using the document's layout string field pinDoc.treeView_ExpandedView = 'data'; // in case the data doc has an expandedView set, this will mask that field and use the 'data' field when expanding the tree view pinDoc.treeView_HideHeaderIfTemplate = true; // this will force the document to render itself as the tree view header @@ -316,7 +324,6 @@ export class TabDocView extends React.Component<TabDocViewProps> { setTimeout(batch.end, 500); // need to wait until dockingview (goldenlayout) updates all its structurs } - @action componentDidMount() { new _global.ResizeObserver( action((entries: any) => { @@ -325,32 +332,36 @@ export class TabDocView extends React.Component<TabDocViewProps> { this._panelHeight = entry.contentRect.height; } }) - ).observe(this.props.glContainer._element[0]); - this.props.glContainer.layoutManager.on('activeContentItemChanged', this.onActiveContentItemChanged); - this.props.glContainer.tab?.isActive && this.onActiveContentItemChanged(undefined); + ).observe(this._props.glContainer._element[0]); + this._props.glContainer.layoutManager.on('activeContentItemChanged', this.onActiveContentItemChanged); + this._props.glContainer.tab?.isActive && this.onActiveContentItemChanged(undefined); // this._tabReaction = reaction(() => ({ selected: this.active(), title: this.tab?.titleElement[0] }), // ({ selected, title }) => title && (title.style.backgroundColor = selected ? "white" : ""), // { fireImmediately: true }); - TabDocView._allTabs.add(this); + runInAction(() => TabDocView._allTabs.add(this)); } - componentDidUpdate() { + componentDidUpdate(prevProps: Readonly<TabDocViewProps>) { + super.componentDidUpdate(prevProps); this._view && DocumentManager.Instance.AddView(this._view); } - @action componentWillUnmount() { this._tabReaction?.(); this._view && DocumentManager.Instance.RemoveView(this._view); - TabDocView._allTabs.delete(this); + runInAction(() => TabDocView._allTabs.delete(this)); - this.props.glContainer.layoutManager.off('activeContentItemChanged', this.onActiveContentItemChanged); + this._props.glContainer.layoutManager.off('activeContentItemChanged', this.onActiveContentItemChanged); } + // Flag indicating that when a tab is activated, it should not select it's document. + // this is used by the link properties menu when it wants to display the link target without selecting the target (which would make the link property window go away since it would no longer be selected) + public static DontSelectOnActivate = 'dontSelectOnActivate'; + @action.bound private onActiveContentItemChanged(contentItem: any) { if (!contentItem || (this.stack === contentItem.parent && ((contentItem?.tab === this.tab && !this._isActive) || (contentItem?.tab !== this.tab && this._isActive)))) { this._activated = this._isActive = !contentItem || contentItem?.tab === this.tab; - if (!this._view && this.tab?.contentItem?.config?.props?.panelName !== 'dontSelectOnActivate') setTimeout(() => SelectionManager.SelectView(this._view, false)); + if (!this._view && this.tab?.contentItem?.config?.props?.panelName !== TabDocView.DontSelectOnActivate) setTimeout(() => SelectionManager.SelectView(this._view, false)); !this._isActive && this._document && Doc.UnBrushDoc(this._document); // bcz: bad -- trying to simulate a pointer leave event when a new tab is opened up on top of an existing one. } } @@ -365,24 +376,25 @@ export class TabDocView extends React.Component<TabDocViewProps> { addDocTab = (doc: Doc, location: OpenWhere) => { SelectionManager.DeselectAll(); const whereFields = location.split(':'); - const keyValue = whereFields[1]?.includes('KeyValue'); - const whereMods: OpenWhereMod = whereFields.length > 1 ? (whereFields[1].replace('KeyValue', '') as OpenWhereMod) : OpenWhereMod.none; + const keyValue = whereFields.includes(OpenWhereMod.keyvalue); + const whereMods = whereFields.length > 1 ? (whereFields[1] as OpenWhereMod) : OpenWhereMod.none; + const panelName = whereFields.length > 1 ? whereFields.lastElement() : ''; if (doc.dockingConfig && !keyValue) return DashboardView.openDashboard(doc); // prettier-ignore switch (whereFields[0]) { case undefined: case OpenWhere.lightbox: if (this.layoutDoc?._isLightbox) { const lightboxView = !doc.annotationOn && DocCast(doc.embedContainer) ? DocumentManager.Instance.getFirstDocumentView(DocCast(doc.embedContainer)) : undefined; - const data = lightboxView?.dataDoc[Doc.LayoutFieldKey(lightboxView.rootDoc)]; + const data = lightboxView?.dataDoc[Doc.LayoutFieldKey(lightboxView.Document)]; if (lightboxView && (!data || data instanceof List)) { - lightboxView.layoutDoc[Doc.LayoutFieldKey(lightboxView.rootDoc)] = new List<Doc>([doc]); + lightboxView.layoutDoc[Doc.LayoutFieldKey(lightboxView.Document)] = new List<Doc>([doc]); return true; } } - return LightboxView.AddDocTab(doc, location); + return LightboxView.Instance.AddDocTab(doc, OpenWhere.lightbox); case OpenWhere.close: return CollectionDockingView.CloseSplit(doc, whereMods); - case OpenWhere.replace: return CollectionDockingView.ReplaceTab(doc, whereMods, this.stack, undefined, keyValue); - case OpenWhere.toggle: return CollectionDockingView.ToggleSplit(doc, whereMods, this.stack, "dontSelectOnActivate", keyValue); + case OpenWhere.replace: return CollectionDockingView.ReplaceTab(doc, whereMods, this.stack, panelName, undefined, keyValue); + case OpenWhere.toggle: return CollectionDockingView.ToggleSplit(doc, whereMods, this.stack, TabDocView.DontSelectOnActivate, keyValue); case OpenWhere.add:default:return CollectionDockingView.AddSplit(doc, whereMods, this.stack, undefined, keyValue); } }; @@ -404,7 +416,7 @@ export class TabDocView extends React.Component<TabDocViewProps> { return tab !== undefined; }; @action - focusFunc = (doc: Doc, options: DocFocusOptions) => { + focusFunc = (doc: Doc, options: FocusViewOptions) => { if (!this.tab.header.parent._activeContentItem || this.tab.header.parent._activeContentItem !== this.tab.contentItem) { this.tab.header.parent.setActiveContentItem(this.tab.contentItem); // glr: Panning does not work when this is set - (this line is for trying to make a tab that is not topmost become topmost) } @@ -415,7 +427,7 @@ export class TabDocView extends React.Component<TabDocViewProps> { ScreenToLocalTransform = () => { this._forceInvalidateScreenToLocal; const { translateX, translateY } = Utils.GetScreenTransform(this._mainCont?.children?.[0] as HTMLElement); - return CollectionDockingView.Instance?.props.ScreenToLocalTransform().translate(-translateX, -translateY) ?? Transform.Identity(); + return CollectionDockingView.Instance?.ScreenToLocalBoxXf().translate(-translateX, -translateY) ?? Transform.Identity(); }; PanelWidth = () => this._panelWidth; PanelHeight = () => this._panelHeight; @@ -424,7 +436,7 @@ export class TabDocView extends React.Component<TabDocViewProps> { disableMinimap = () => !this._document; whenChildContentActiveChanges = (isActive: boolean) => (this._isAnyChildContentActive = isActive); isContentActive = () => this._isContentActive; - waitForDoubleClick = () => (DocumentView.ExploreMode ? 'never' : undefined); + waitForDoubleClick = () => (SnappingManager.ExploreMode ? 'never' : undefined); @computed get docView() { return !this._activated || !this._document ? null : ( <> @@ -436,11 +448,11 @@ export class TabDocView extends React.Component<TabDocViewProps> { this._lastView = this._view; })} renderDepth={0} - LayoutTemplateString={this.props.keyValue ? KeyValueBox.LayoutString() : undefined} - hideTitle={this.props.keyValue} + LayoutTemplateString={this._props.keyValue ? KeyValueBox.LayoutString() : undefined} + hideTitle={this._props.keyValue} Document={this._document} - DataDoc={!Doc.AreProtosEqual(this._document[DocData], this._document) ? this._document[DocData] : undefined} - onBrowseClick={DocumentView.exploreMode} + TemplateDataDocument={!Doc.AreProtosEqual(this._document[DocData], this._document) ? this._document[DocData] : undefined} + onBrowseClickScript={DocumentView.exploreMode} waitForDoubleClickToClick={this.waitForDoubleClick} isContentActive={this.isContentActive} isDocumentActive={returnFalse} @@ -455,11 +467,9 @@ export class TabDocView extends React.Component<TabDocViewProps> { addDocTab={this.addDocTab} ScreenToLocalTransform={this.ScreenToLocalTransform} dontCenter={'y'} - rootSelected={returnTrue} whenChildContentsActiveChanged={this.whenChildContentActiveChanges} focus={this.focusFunc} - docViewPath={returnEmptyDoclist} - bringToFront={emptyFunction} + containerViewPath={returnEmptyDoclist} pinToPres={TabDocView.PinDoc} /> {this.disableMinimap() ? null : <TabMinimapView key="minimap" addDocTab={this.addDocTab} PanelHeight={this.PanelHeight} PanelWidth={this.PanelWidth} background={this.miniMapColor} document={this._document} tabView={this.tabView} />} @@ -485,7 +495,7 @@ export class TabDocView extends React.Component<TabDocViewProps> { } this._lastTab = this.tab; (this._mainCont as any).InitTab = (tab: any) => this.init(tab, this._document); - DocServer.GetRefField(this.props.documentId).then(action(doc => doc instanceof Doc && (this._document = doc) && this.tab && this.init(this.tab, this._document))); + DocServer.GetRefField(this._props.documentId).then(action(doc => doc instanceof Doc && (this._document = doc) && this.tab && this.init(this.tab, this._document))); new _global.ResizeObserver(action((entries: any) => this._forceInvalidateScreenToLocal++)).observe(ref); } }}> @@ -509,15 +519,15 @@ interface TabMiniThumbProps { miniTop: () => number; miniLeft: () => number; } -@observer + class TabMiniThumb extends React.Component<TabMiniThumbProps> { render() { return <div className="miniThumb" style={{ width: `${this.props.miniWidth()}% `, height: `${this.props.miniHeight()}% `, left: `${this.props.miniLeft()}% `, top: `${this.props.miniTop()}% ` }} />; } } @observer -export class TabMinimapView extends React.Component<TabMinimapViewProps> { - static miniStyleProvider = (doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string): any => { +export class TabMinimapView extends ObservableReactComponent<TabMinimapViewProps> { + static miniStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string): any => { if (doc) { switch (property.split(':')[0]) { default: @@ -539,12 +549,13 @@ export class TabMinimapView extends React.Component<TabMinimapViewProps> { default: return 'gray'; } })(doc.type as DocumentType); - return !background ? undefined : <div style={{ width: doc[Width](), height: doc[Height](), position: 'absolute', display: 'block', background }} />; + return !background ? undefined : <div style={{ width: NumCast(doc._width), height: NumCast(doc._height), position: 'absolute', display: 'block', background }} />; } } }; + @computed get renderBounds() { - const compView = this.props.tabView()?.ComponentView as CollectionFreeFormView; + const compView = this._props.tabView()?.ComponentView as CollectionFreeFormView; const bounds = compView?.freeformData?.(true)?.bounds; if (!bounds) return undefined; const xbounds = bounds.r - bounds.x; @@ -552,10 +563,10 @@ export class TabMinimapView extends React.Component<TabMinimapViewProps> { const dim = Math.max(xbounds, ybounds); return { l: bounds.x + xbounds / 2 - dim / 2, t: bounds.y + ybounds / 2 - dim / 2, cx: bounds.x + xbounds / 2, cy: bounds.y + ybounds / 2, dim }; } - childLayoutTemplate = () => Cast(this.props.document.childLayoutTemplate, Doc, null); - returnMiniSize = () => NumCast(this.props.document._miniMapSize, 150); + childLayoutTemplate = () => Cast(this._props.document.childLayoutTemplate, Doc, null); + returnMiniSize = () => NumCast(this._props.document._miniMapSize, 150); miniDown = (e: React.PointerEvent) => { - const doc = this.props.document; + const doc = this._props.document; const miniSize = this.returnMiniSize(); doc && setupMoveUpEvents( @@ -574,27 +585,24 @@ export class TabMinimapView extends React.Component<TabMinimapViewProps> { popup = () => { if (!this.renderBounds) return <></>; const renderBounds = this.renderBounds; - const miniWidth = () => (this.props.PanelWidth() / NumCast(this.props.document._freeform_scale, 1) / renderBounds.dim) * 100; - const miniHeight = () => (this.props.PanelHeight() / NumCast(this.props.document._freeform_scale, 1) / renderBounds.dim) * 100; - const miniLeft = () => 50 + ((NumCast(this.props.document._freeform_panX) - renderBounds.cx) / renderBounds.dim) * 100 - miniWidth() / 2; - const miniTop = () => 50 + ((NumCast(this.props.document._freeform_panY) - renderBounds.cy) / renderBounds.dim) * 100 - miniHeight() / 2; + const miniWidth = () => (this._props.PanelWidth() / NumCast(this._props.document._freeform_scale, 1) / renderBounds.dim) * 100; + const miniHeight = () => (this._props.PanelHeight() / NumCast(this._props.document._freeform_scale, 1) / renderBounds.dim) * 100; + const miniLeft = () => 50 + ((NumCast(this._props.document._freeform_panX) - renderBounds.cx) / renderBounds.dim) * 100 - miniWidth() / 2; + const miniTop = () => 50 + ((NumCast(this._props.document._freeform_panY) - renderBounds.cy) / renderBounds.dim) * 100 - miniHeight() / 2; const miniSize = this.returnMiniSize(); return ( - <div className="miniMap" style={{ width: miniSize, height: miniSize, background: this.props.background() }}> + <div className="miniMap" style={{ width: miniSize, height: miniSize, background: this._props.background() }}> <CollectionFreeFormView - Document={this.props.document} - docViewPath={returnEmptyDoclist} + Document={this._props.document} + docViewPath={returnEmptyDocViewList} childLayoutTemplate={this.childLayoutTemplate} // bcz: Ugh .. should probably be rendering a CollectionView or the minimap should be part of the collectionFreeFormView to avoid having to set stuff like this. noOverlay={true} // don't render overlay Docs since they won't scale - setHeight={returnFalse} isContentActive={emptyFunction} isAnyChildContentActive={returnFalse} select={emptyFunction} isSelected={returnFalse} dontRegisterView={true} - fieldKey={Doc.LayoutFieldKey(this.props.document)} - bringToFront={emptyFunction} - rootSelected={returnTrue} + fieldKey={Doc.LayoutFieldKey(this._props.document)} addDocument={returnFalse} moveDocument={returnFalse} removeDocument={returnFalse} @@ -605,7 +613,7 @@ export class TabMinimapView extends React.Component<TabMinimapViewProps> { whenChildContentsActiveChanged={emptyFunction} focus={emptyFunction} styleProvider={TabMinimapView.miniStyleProvider} - addDocTab={this.props.addDocTab} + addDocTab={this._props.addDocTab} pinToPres={TabDocView.PinDoc} childFilters={CollectionDockingView.Instance?.childDocFilters ?? returnEmptyDoclist} childFiltersByRanges={CollectionDockingView.Instance?.childDocRangeFilters ?? returnEmptyDoclist} @@ -619,7 +627,7 @@ export class TabMinimapView extends React.Component<TabMinimapViewProps> { ); }; render() { - return this.props.document.layout !== CollectionView.LayoutString(Doc.LayoutFieldKey(this.props.document)) || this.props.document?._type_collection !== CollectionViewType.Freeform ? null : ( + return this._props.document.layout !== CollectionView.LayoutString(Doc.LayoutFieldKey(this._props.document)) || this._props.document?._type_collection !== CollectionViewType.Freeform ? null : ( <div className="miniMap-hidden"> <Popup icon={<FontAwesomeIcon icon="globe-asia" size="lg" />} color={SettingsManager.userVariantColor} type={Type.TERT} onPointerDown={e => e.stopPropagation()} placement={'top-end'} popup={this.popup} /> </div> diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss index cbcc7c710..0a1946f09 100644 --- a/src/client/views/collections/TreeView.scss +++ b/src/client/views/collections/TreeView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; .treeView-label { max-height: 1.5em; diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index 193c70add..be5737a25 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -1,9 +1,12 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, IReactionDisposer, observable, reaction } from 'mobx'; +import { IconButton, Size } from 'browndash-components'; +import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; +import { Utils, emptyFunction, lightOrDark, return18, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, returnZero, setupMoveUpEvents, simulateMouseClick } from '../../../Utils'; import { Doc, DocListCast, Field, FieldResult, Opt, StrListCast } from '../../../fields/Doc'; -import { DocData, Height, Width } from '../../../fields/DocSymbols'; +import { DocData } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; import { List } from '../../../fields/List'; import { RichTextField } from '../../../fields/RichTextField'; @@ -11,32 +14,29 @@ import { listSpec } from '../../../fields/Schema'; import { ComputedField, ScriptField } from '../../../fields/ScriptField'; import { BoolCast, Cast, DocCast, FieldValue, NumCast, ScriptCast, StrCast } from '../../../fields/Types'; import { TraceMobx } from '../../../fields/util'; -import { emptyFunction, lightOrDark, return18, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, returnZero, simulateMouseClick, Utils } from '../../../Utils'; -import { Docs, DocUtils } from '../../documents/Documents'; import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes'; +import { DocUtils, Docs } from '../../documents/Documents'; import { DocumentManager } from '../../util/DocumentManager'; import { DragManager, dropActionType } from '../../util/DragManager'; import { LinkManager } from '../../util/LinkManager'; import { ScriptingGlobals } from '../../util/ScriptingGlobals'; -import { SelectionManager } from '../../util/SelectionManager'; +import { SettingsManager } from '../../util/SettingsManager'; import { SnappingManager } from '../../util/SnappingManager'; import { Transform } from '../../util/Transform'; -import { undoable, undoBatch, UndoManager } from '../../util/UndoManager'; +import { UndoManager, undoBatch, undoable } 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 { ObservableReactComponent } from '../ObservableReactComponent'; +import { StyleProp } from '../StyleProvider'; +import { DocumentView, DocumentViewInternal, OpenWhere } from '../nodes/DocumentView'; +import { FieldViewProps, StyleProviderFuncType } from '../nodes/FieldView'; +import { KeyValueBox } from '../nodes/KeyValueBox'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; import { RichTextMenu } from '../nodes/formattedText/RichTextMenu'; -import { KeyValueBox } from '../nodes/KeyValueBox'; -import { StyleProp } from '../StyleProvider'; import { CollectionTreeView, TreeViewType } from './CollectionTreeView'; import { CollectionView } from './CollectionView'; -import './TreeView.scss'; -import React = require('react'); -import { IconButton, Size } from 'browndash-components'; import { TreeSort } from './TreeSort'; -import { SettingsManager } from '../../util/SettingsManager'; +import './TreeView.scss'; +const { default: { TREE_BULLET_WIDTH } } = require('../global/globalCssVariables.module.scss'); // prettier-ignore export interface TreeViewProps { treeView: CollectionTreeView; @@ -44,7 +44,7 @@ export interface TreeViewProps { observeHeight: (ref: any) => void; unobserveHeight: (ref: any) => void; prevSibling?: Doc; - document: Doc; + Document: Doc; dataDoc?: Doc; treeViewParent: Doc; renderDepth: number; @@ -62,7 +62,7 @@ export interface TreeViewProps { ScreenToLocalTransform: () => Transform; contextMenuItems?: { script: ScriptField; filter: ScriptField; icon: string; label: string }[]; dontRegisterView?: boolean; - styleProvider?: StyleProviderFunc | undefined; + styleProvider?: StyleProviderFuncType | undefined; treeViewHideHeaderFields: () => boolean; renderedIds: string[]; // list of document ids rendered used to avoid unending expansion of items in a cycle onCheckedClick?: () => ScriptField; @@ -87,70 +87,74 @@ const treeBulletWidth = function () { * treeView_ExpandedView : name of field whose contents are being displayed as the document's subtree */ @observer -export class TreeView extends React.Component<TreeViewProps> { +export class TreeView extends ObservableReactComponent<TreeViewProps> { static _editTitleOnLoad: Opt<{ id: string; parent: TreeView | CollectionTreeView | undefined }>; static _openTitleScript: Opt<ScriptField | undefined>; static _openLevelScript: Opt<ScriptField | undefined>; private _header: React.RefObject<HTMLDivElement> = React.createRef(); private _tref = React.createRef<HTMLDivElement>(); - @observable _docRef: Opt<DocumentView>; + @observable _docRef: Opt<DocumentView> = undefined; private _disposers: { [name: string]: IReactionDisposer } = {}; private _editTitleScript: (() => ScriptField) | undefined; private _openScript: (() => ScriptField) | undefined; private _treedropDisposer?: DragManager.DragDropDisposer; get treeViewOpenIsTransient() { - return this.props.treeView.doc.treeView_OpenIsTransient || Doc.IsDataProto(this.doc); + return this.treeView.Document.treeView_OpenIsTransient || Doc.IsDataProto(this.Document); } set treeViewOpen(c: boolean) { if (this.treeViewOpenIsTransient) this._transientOpenState = c; else { - this.doc.treeView_Open = c; + this.Document.treeView_Open = c; this._transientOpenState = false; } } @observable _transientOpenState = false; // override of the treeView_Open field allowing the display state to be independent of the document's state @observable _editTitle: boolean = false; - @observable _dref: DocumentView | undefined | null; + @observable _dref: DocumentView | undefined | null = undefined; get displayName() { - return 'TreeView(' + this.props.document.title + ')'; + return 'TreeView(' + this.Document.title + ')'; } // this makes mobx trace() statements more descriptive get defaultExpandedView() { - return this.doc._type_collection === CollectionViewType.Docking + return this.Document._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.treeView.dashboardMode + ? this.fieldKey + : this.treeView.fileSysMode + ? this.Document.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.treeView.outlineMode || this.childDocs + ? this.fieldKey + : Doc.noviceMode + ? 'layout' + : StrCast(this.treeView.Document.treeView_ExpandedView, 'fields'); } - @computed get doc() { - return this.props.document; + @computed get treeView() { + return this._props.treeView; + } + + @computed get Document() { + return this._props.Document; } @computed get treeViewOpen() { - return (!this.treeViewOpenIsTransient && Doc.GetT(this.doc, 'treeView_Open', 'boolean', true)) || this._transientOpenState; + return (!this.treeViewOpenIsTransient && Doc.GetT(this.Document, 'treeView_Open', 'boolean', true)) || this._transientOpenState; } @computed get treeViewExpandedView() { - return this.validExpandViewTypes.includes(StrCast(this.doc.treeView_ExpandedView)) ? StrCast(this.doc.treeView_ExpandedView) : this.defaultExpandedView; + return this.validExpandViewTypes.includes(StrCast(this.Document.treeView_ExpandedView)) ? StrCast(this.Document.treeView_ExpandedView) : this.defaultExpandedView; } @computed get MAX_EMBED_HEIGHT() { - return NumCast(this.props.treeViewParent.maxEmbedHeight, 200); + return NumCast(this._props.treeViewParent.maxEmbedHeight, 200); } @computed get dataDoc() { - return this.props.document.treeView_ChildrenOnRoot ? this.doc : this.doc[DocData]; + return this.Document[DocData]; } @computed get layoutDoc() { - return Doc.Layout(this.doc); + return Doc.Layout(this.Document); } @computed get fieldKey() { - return StrCast(this.doc._treeView_FieldKey, Doc.LayoutFieldKey(this.doc)); + return StrCast(this.Document._treeView_FieldKey, Doc.LayoutFieldKey(this.Document)); } @computed get childDocs() { return this.childDocList(this.fieldKey); @@ -165,34 +169,36 @@ export class TreeView extends React.Component<TreeViewProps> { return this.childDocList(this.fieldKey + '_annotations'); } @computed get selected() { - return SelectionManager.IsSelected(this._docRef); + return this._docRef?.IsSelected; } + ScreenToLocalTransform = () => this._props.ScreenToLocalTransform(); + childDocList(field: string) { - const layout = Cast(Doc.LayoutField(this.doc), Doc, null); - return DocListCast(this.props.dataDoc?.[field], DocListCast(layout?.[field], DocListCast(this.doc[field]))); + const layout = Cast(Doc.LayoutField(this.Document), Doc, null); + return DocListCast(this._props.dataDoc?.[field], DocListCast(layout?.[field], DocListCast(this.Document[field]))); } moving: boolean = false; @undoBatch move = (doc: Doc | Doc[], target: Doc | undefined, addDoc: (doc: Doc | Doc[]) => boolean) => { - if (this.doc !== target && addDoc !== returnFalse) { - const canAdd1 = (this.props.parentTreeView as any).dropping || !(ComputedField.WithoutComputed(() => FieldValue(this.props.parentTreeView?.doc.data)) instanceof ComputedField); + if (this.Document !== target && addDoc !== returnFalse) { + const canAdd1 = (this._props.parentTreeView as any).dropping || !(ComputedField.WithoutComputed(() => FieldValue(this._props.parentTreeView?.Document.data)) instanceof ComputedField); // bcz: this should all be running in a Temp undo batch instead of hackily testing for returnFalse - if (canAdd1 && this.props.removeDoc?.(doc) === true) { - this.props.parentTreeView instanceof TreeView && (this.props.parentTreeView.moving = true); + if (canAdd1 && this._props.removeDoc?.(doc) === true) { + this._props.parentTreeView instanceof TreeView && (this._props.parentTreeView.moving = true); const res = addDoc(doc); - this.props.parentTreeView instanceof TreeView && (this.props.parentTreeView.moving = false); + this._props.parentTreeView instanceof TreeView && (this._props.parentTreeView.moving = false); return res; } } return false; }; - @undoBatch @action remove = (doc: Doc | Doc[], key: string) => { - this.props.treeView.props.select(false); + @undoBatch remove = (doc: Doc | Doc[], key: string) => { + this.treeView._props.select(false); const ind = DocListCast(this.dataDoc[key]).indexOf(doc instanceof Doc ? doc : doc.lastElement()); const res = (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => flg && Doc.RemoveDocFromList(this.dataDoc, key, doc), true); - res && ind > 0 && DocumentManager.Instance.getDocumentView(DocListCast(this.dataDoc[key])[ind - 1], this.props.treeView.props.DocumentView?.())?.select(false); + res && ind > 0 && DocumentManager.Instance.getDocumentView(DocListCast(this.dataDoc[key])[ind - 1], this.treeView.DocumentView?.())?.select(false); return res; }; @@ -200,10 +206,10 @@ export class TreeView extends React.Component<TreeViewProps> { this._disposers.selection?.(); if (!docView) { this._editTitle = false; - } else if (docView.isSelected()) { + } else if (docView.IsSelected) { this._editTitle = true; this._disposers.selection = reaction( - () => docView.isSelected(), + () => docView.IsSelected, isSel => !isSel && this.setEditTitle(undefined) ); } else { @@ -212,17 +218,16 @@ export class TreeView extends React.Component<TreeViewProps> { }; @action openLevel = (docView: DocumentView) => { - if (this.props.document.isFolder || Doc.IsSystem(this.props.document)) { + if (this.Document.isFolder || Doc.IsSystem(this.Document)) { this.treeViewOpen = !this.treeViewOpen; } else { // choose an appropriate embedding or make one. --- choose the first embedding that (1) user owns, (2) has no context field ... otherwise make a new embedding - const bestEmbedding = docView.rootDoc.author === Doc.CurrentUserEmail && !Doc.IsDataProto(docView.props.Document) ? docView.rootDoc : Doc.BestEmbedding(docView.rootDoc); - this.props.addDocTab(bestEmbedding, OpenWhere.lightbox); + const bestEmbedding = docView.Document.author === Doc.CurrentUserEmail && !Doc.IsDataProto(docView.Document) ? docView.Document : Doc.BestEmbedding(docView.Document); + this._props.addDocTab(bestEmbedding, OpenWhere.lightbox); } }; @undoBatch - @action recurToggle = (childList: Doc[]) => { if (childList.length > 0) { childList.forEach(child => { @@ -233,7 +238,6 @@ export class TreeView extends React.Component<TreeViewProps> { }; @undoBatch - @action getRunningChildren = (childList: Doc[]) => { if (childList.length === 0) { return []; @@ -253,23 +257,24 @@ export class TreeView extends React.Component<TreeViewProps> { static GetRunningChildren = new Map<Doc, any>(); static ToggleChildrenRun = new Map<Doc, () => void>(); - constructor(props: any) { + constructor(props: TreeViewProps) { super(props); + makeObservable(this); if (!TreeView._openLevelScript) { TreeView._openTitleScript = ScriptField.MakeScript('scriptContext.setEditTitle(documentView)', { scriptContext: 'any', documentView: 'any' }); TreeView._openLevelScript = ScriptField.MakeScript(`scriptContext.openLevel(documentView)`, { scriptContext: 'any', documentView: 'any' }); } - this._openScript = Doc.IsSystem(this.props.document) ? undefined : () => TreeView._openLevelScript!; - this._editTitleScript = Doc.IsSystem(this.props.document) ? () => TreeView._openLevelScript! : () => TreeView._openTitleScript!; + this._openScript = Doc.IsSystem(this.Document) ? undefined : () => TreeView._openLevelScript!; + this._editTitleScript = Doc.IsSystem(this.Document) ? () => TreeView._openLevelScript! : () => TreeView._openTitleScript!; // set for child processing highligting this.dataDoc.hasChildren = this.childDocs.length > 0; // this.dataDoc.children = this.childDocs; - TreeView.ToggleChildrenRun.set(this.doc, () => { + TreeView.ToggleChildrenRun.set(this.Document, () => { this.recurToggle(this.childDocs); }); - TreeView.GetRunningChildren.set(this.doc, () => { + TreeView.GetRunningChildren.set(this.Document, () => { return this.getRunningChildren(this.childDocs); }); } @@ -277,31 +282,33 @@ export class TreeView extends React.Component<TreeViewProps> { _treeEle: any; protected createTreeDropTarget = (ele: HTMLDivElement) => { this._treedropDisposer?.(); - ele && ((this._treedropDisposer = DragManager.MakeDropTarget(ele, this.treeDrop.bind(this), undefined, this.preTreeDrop.bind(this))), this.doc); - if (this._treeEle) this.props.unobserveHeight(this._treeEle); - this.props.observeHeight((this._treeEle = ele)); + ele && ((this._treedropDisposer = DragManager.MakeDropTarget(ele, this.treeDrop.bind(this), this.Document, this.preTreeDrop.bind(this))), this.Document); + if (this._treeEle) this._props.unobserveHeight(this._treeEle); + this._props.observeHeight((this._treeEle = ele)); }; componentWillUnmount() { + this._treedropDisposer?.(); this._renderTimer && clearTimeout(this._renderTimer); Object.values(this._disposers).forEach(disposer => disposer?.()); - this._treeEle && this.props.unobserveHeight(this._treeEle); + this._treeEle && this._props.unobserveHeight(this._treeEle); document.removeEventListener('pointermove', this.onDragMove, true); document.removeEventListener('pointermove', this.onDragUp, true); // TODO: [AL] add these - this.props.hierarchyIndex !== undefined && this.props.RemFromMap?.(this.doc, this.props.hierarchyIndex); + this._props.hierarchyIndex !== undefined && this._props.RemFromMap?.(this.Document, this._props.hierarchyIndex); } - componentDidUpdate() { + componentDidUpdate(prevProps: Readonly<TreeViewProps>) { + super.componentDidUpdate(prevProps); this._disposers.opening = reaction( () => this.treeViewOpen, open => !open && (this._renderCount = 20) ); - this.props.hierarchyIndex !== undefined && this.props.AddToMap?.(this.doc, this.props.hierarchyIndex); + this._props.hierarchyIndex !== undefined && this._props.AddToMap?.(this.Document, this._props.hierarchyIndex); } componentDidMount() { - this.props.hierarchyIndex !== undefined && this.props.AddToMap?.(this.doc, this.props.hierarchyIndex); + this._props.hierarchyIndex !== undefined && this._props.AddToMap?.(this.Document, this._props.hierarchyIndex); } onDragUp = (e: PointerEvent) => { @@ -309,8 +316,8 @@ export class TreeView extends React.Component<TreeViewProps> { document.removeEventListener('pointermove', this.onDragMove, true); }; onPointerEnter = (e: React.PointerEvent): void => { - this.props.isContentActive(true) && Doc.BrushDoc(this.dataDoc); - if (e.buttons === 1 && SnappingManager.GetIsDragging() && this.props.isContentActive()) { + this._props.isContentActive(true) && Doc.BrushDoc(this.dataDoc); + if (e.buttons === 1 && SnappingManager.IsDragging && this._props.isContentActive()) { this._header.current!.className = 'treeView-header'; document.removeEventListener('pointermove', this.onDragMove, true); document.removeEventListener('pointerup', this.onDragUp, true); @@ -333,11 +340,9 @@ export class TreeView extends React.Component<TreeViewProps> { const before = pt[1] < rect.top + rect.height / 2; const inside = pt[0] > rect.left + rect.width * 0.33 || (!before && this.treeViewOpen && this.childDocs?.length); this._header.current!.className = 'treeView-header'; - if (!this.props.treeView.outlineMode || DragManager.DocDragData?.treeViewDoc === this.props.treeView.rootDoc) { - if (inside) this._header.current!.className += ' treeView-header-inside'; - else if (before) this._header.current!.className += ' treeView-header-above'; - else if (!before) this._header.current!.className += ' treeView-header-below'; - } + if (inside) this._header.current!.className += ' treeView-header-inside'; + else if (before) this._header.current!.className += ' treeView-header-above'; + else if (!before) this._header.current!.className += ' treeView-header-below'; e.stopPropagation(); }; @@ -361,8 +366,9 @@ export class TreeView extends React.Component<TreeViewProps> { _width: 1000, _height: 10, }); - Doc.GetProto(bullet).title = ComputedField.MakeFunction('self.text?.Text'); - Doc.GetProto(bullet).data = new List<Doc>([]); + const bulletData = bullet[DocData]; + bulletData.title = ComputedField.MakeFunction('this.text?.Text'); + bulletData.data = new List<Doc>([]); DocumentManager.Instance.AddViewRenderedCb(bullet, dv => dv.ComponentView?.setFocus?.()); return bullet; @@ -371,18 +377,17 @@ export class TreeView extends React.Component<TreeViewProps> { makeTextCollection = () => { const bullet = TreeView.makeTextBullet(); TreeView._editTitleOnLoad = { id: bullet[Id], parent: this }; - return this.props.addDocument(bullet); + return this._props.addDocument(bullet); }; makeFolder = () => { const folder = Docs.Create.TreeDocument([], { title: 'Untitled folder', _dragOnlyWithinContainer: true, isFolder: true }); - TreeView._editTitleOnLoad = { id: folder[Id], parent: this.props.parentTreeView }; - return this.props.addDocument(folder); + TreeView._editTitleOnLoad = { id: folder[Id], parent: this._props.parentTreeView }; + return this._props.addDocument(folder); }; - preTreeDrop = (e: Event, de: DragManager.DropEvent) => { - const dragData = de.complete.docDragData; - dragData && (dragData.dropAction = this.props.treeView.props.Document === dragData.treeViewDoc ? 'same' : dragData.dropAction); + preTreeDrop = (e: Event, de: DragManager.DropEvent, docDropAction: dropActionType) => { + // fall through and let the CollectionTreeView handle this since treeView items have no special properties of their own }; @undoBatch @@ -391,17 +396,17 @@ export class TreeView extends React.Component<TreeViewProps> { if (!this._header.current) return false; const rect = this._header.current.getBoundingClientRect(); const before = pt[1] < rect.top + rect.height / 2; - const inside = this.props.treeView.fileSysMode && !this.doc.isFolder ? false : pt[0] > rect.left + rect.width * 0.33 || (!before && this.treeViewOpen && this.childDocs?.length ? true : false); + const inside = this.treeView.fileSysMode && !this.Document.isFolder ? false : pt[0] > rect.left + rect.width * 0.33 || (!before && this.treeViewOpen && this.childDocs?.length ? true : false); if (de.complete.linkDragData) { const sourceDoc = de.complete.linkDragData.linkSourceGetAnchor(); - const destDoc = this.doc; + const destDoc = this.Document; DocUtils.MakeLink(sourceDoc, destDoc, { link_relationship: 'tree link' }); e.stopPropagation(); return true; } const docDragData = de.complete.docDragData; if (docDragData && pt[0] < rect.left + rect.width) { - if (docDragData.draggedDocuments[0] === this.doc) return true; + if (docDragData.draggedDocuments[0] === this.Document) return true; const added = this.dropDocuments( docDragData.droppedDocuments, // before, @@ -409,7 +414,8 @@ export class TreeView extends React.Component<TreeViewProps> { docDragData.dropAction, docDragData.removeDocument, docDragData.moveDocument, - docDragData.treeViewDoc === this.props.treeView.props.Document + docDragData.treeViewDoc === this.treeView.Document, + de.embedKey ); e.stopPropagation(); !added && e.preventDefault(); @@ -419,43 +425,52 @@ export class TreeView extends React.Component<TreeViewProps> { }; dropping: boolean = false; - dropDocuments(droppedDocuments: Doc[], before: boolean, inside: number | boolean, dropAction: dropActionType, removeDocument: DragManager.RemoveFunction | undefined, moveDocument: DragManager.MoveFunction | undefined, forceAdd: boolean) { - const parentAddDoc = (doc: Doc | Doc[]) => this.props.addDocument(doc, undefined, undefined, before); + dropDocuments( + droppedDocuments: Doc[], + before: boolean, + inside: number | boolean, + dropAction: dropActionType, + removeDocument: DragManager.RemoveFunction | undefined, + moveDocument: DragManager.MoveFunction | undefined, + forceAdd: boolean, + canEmbed?: boolean + ) { + const parentAddDoc = (doc: Doc | Doc[]) => this._props.addDocument(doc, undefined, undefined, before); const localAdd = (doc: Doc | Doc[]) => { const innerAdd = (doc: Doc) => { const dataIsComputed = ComputedField.WithoutComputed(() => FieldValue(this.dataDoc[this.fieldKey])) instanceof ComputedField; const added = (!dataIsComputed || (this.dropping && this.moving)) && Doc.AddDocToList(this.dataDoc, this.fieldKey, doc); - dataIsComputed && Doc.SetContainer(doc, DocCast(this.doc.embedContainer)); + dataIsComputed && Doc.SetContainer(doc, DocCast(this.Document.embedContainer)); return added; }; return (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => flg && innerAdd(doc), true as boolean); }; const addDoc = inside ? localAdd : parentAddDoc; - const move = (!dropAction || dropAction === 'proto' || dropAction === 'move' || dropAction === 'same' || dropAction === 'inSame') && moveDocument; - const canAdd = (!this.props.treeView.outlineMode && !StrCast((inside ? this.props.document : this.props.treeViewParent)?.treeView_FreezeChildren).includes('add')) || forceAdd; - if (canAdd && (dropAction !== 'inSame' || droppedDocuments.every(d => d.embedContainer === this.props.parentTreeView?.doc))) { - this.props.parentTreeView instanceof TreeView && (this.props.parentTreeView.dropping = true); + const canAdd = !StrCast((inside ? this.Document : this._props.treeViewParent)?.treeView_FreezeChildren).includes('add') || forceAdd; + if (canAdd && (dropAction !== 'inSame' || droppedDocuments.every(d => d.embedContainer === this._props.parentTreeView?.Document))) { + const move = (!dropAction || canEmbed || dropAction === 'proto' || dropAction === 'move' || dropAction === 'same' || dropAction === 'inSame') && moveDocument; + this._props.parentTreeView instanceof TreeView && (this._props.parentTreeView.dropping = true); const res = droppedDocuments.reduce((added, d) => (move ? move(d, undefined, addDoc) || (dropAction === 'proto' ? addDoc(d) : false) : addDoc(d)) || added, false); - this.props.parentTreeView instanceof TreeView && (this.props.parentTreeView.dropping = false); + this._props.parentTreeView instanceof TreeView && (this._props.parentTreeView.dropping = false); return res; } return false; } refTransform = (ref: HTMLDivElement | undefined | null) => { - if (!ref) return this.props.ScreenToLocalTransform(); + if (!ref) return this.ScreenToLocalTransform(); const { scale, translateX, translateY } = Utils.GetScreenTransform(ref); - const outerXf = Utils.GetScreenTransform(this.props.treeView.MainEle()); - const offset = this.props.ScreenToLocalTransform().transformDirection(outerXf.translateX - translateX, outerXf.translateY - translateY); - return this.props.ScreenToLocalTransform().translate(offset[0], offset[1]); + const outerXf = Utils.GetScreenTransform(this.treeView.MainEle()); + const offset = this.ScreenToLocalTransform().transformDirection(outerXf.translateX - translateX, outerXf.translateY - translateY); + return this.ScreenToLocalTransform().translate(offset[0], offset[1]); }; docTransform = () => this.refTransform(this._dref?.ContentRef?.current); getTransform = () => this.refTransform(this._tref.current); - embeddedPanelWidth = () => this.props.panelWidth() / (this.props.treeView.props.NativeDimScaling?.() || 1); + embeddedPanelWidth = () => this._props.panelWidth() / (this.treeView._props.NativeDimScaling?.() || 1); embeddedPanelHeight = () => { - const layoutDoc = (temp => temp && Doc.expandTemplateLayout(temp, this.props.document))(this.props.treeView.props.childLayoutTemplate?.()) || this.layoutDoc; + const layoutDoc = (temp => temp && Doc.expandTemplateLayout(temp, this.Document))(this.treeView._props.childLayoutTemplate?.()) || this.layoutDoc; return Math.min( - layoutDoc[Height](), + NumCast(layoutDoc._height), this.MAX_EMBED_HEIGHT, (() => { const aspect = Doc.NativeAspect(layoutDoc); @@ -463,24 +478,24 @@ export class TreeView extends React.Component<TreeViewProps> { return layoutDoc._layout_fitWidth ? !Doc.NativeHeight(layoutDoc) ? NumCast(layoutDoc._height) - : Math.min((this.embeddedPanelWidth() * NumCast(layoutDoc.scrollHeight, Doc.NativeHeight(layoutDoc))) / (Doc.NativeWidth(layoutDoc) || NumCast(this.props.treeViewParent._height))) - : (this.embeddedPanelWidth() * layoutDoc[Height]()) / layoutDoc[Width](); + : Math.min((this.embeddedPanelWidth() * NumCast(layoutDoc.scrollHeight, Doc.NativeHeight(layoutDoc))) / (Doc.NativeWidth(layoutDoc) || NumCast(this._props.treeViewParent._height))) + : (this.embeddedPanelWidth() * NumCast(layoutDoc._height)) / NumCast(layoutDoc._width); })() ); }; @computed get expandedField() { const ids: { [key: string]: string } = {}; const rows: JSX.Element[] = []; - const doc = this.doc; + const doc = this.Document; doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key)); for (const key of Object.keys(ids).slice().sort()) { - if (this.props.skipFields?.includes(key) || key === 'title' || key === 'treeView_Open') continue; + if (this._props.skipFields?.includes(key) || key === 'title' || key === 'treeView_Open') continue; const contents = doc[key]; let contentElement: (JSX.Element | null)[] | JSX.Element = []; let leftOffset = observable({ width: 0 }); - const expandedWidth = () => this.props.panelWidth() - leftOffset.width; + const expandedWidth = () => this._props.panelWidth() - leftOffset.width; if (contents instanceof Doc || (Cast(contents, listSpec(Doc)) && Cast(contents, listSpec(Doc))!.length && Cast(contents, listSpec(Doc))![0] instanceof Doc)) { const remDoc = (doc: Doc | Doc[]) => this.remove(doc, key); const moveDoc = (doc: Doc | Doc[], target: Doc | undefined, addDoc: (doc: Doc | Doc[]) => boolean) => this.move(doc, target, addDoc); @@ -488,44 +503,44 @@ export class TreeView extends React.Component<TreeViewProps> { const innerAdd = (doc: Doc) => { const dataIsComputed = ComputedField.WithoutComputed(() => FieldValue(this.dataDoc[key])) instanceof ComputedField; const added = (!dataIsComputed || (this.dropping && this.moving)) && Doc.AddDocToList(this.dataDoc, key, doc, addBefore, before, false, true); - dataIsComputed && Doc.SetContainer(doc, DocCast(this.doc.embedContainer)); + dataIsComputed && Doc.SetContainer(doc, DocCast(this.Document.embedContainer)); return added; }; return (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => flg && innerAdd(doc), true as boolean); }; contentElement = TreeView.GetChildElements( contents instanceof Doc ? [contents] : DocListCast(contents), - this.props.treeView, + this.treeView, this, doc, undefined, - this.props.treeViewParent, - this.props.prevSibling, + this._props.treeViewParent, + this._props.prevSibling, addDoc, remDoc, moveDoc, - this.props.dragAction, - this.props.addDocTab, + this._props.dragAction, + this._props.addDocTab, this.titleStyleProvider, - this.props.ScreenToLocalTransform, - this.props.isContentActive, + this.ScreenToLocalTransform, + this._props.isContentActive, expandedWidth, - this.props.renderDepth, - this.props.treeViewHideHeaderFields, - [...this.props.renderedIds, doc[Id]], - this.props.onCheckedClick, - this.props.onChildClick, - this.props.skipFields, + this._props.renderDepth, + this._props.treeViewHideHeaderFields, + [...this._props.renderedIds, doc[Id]], + this._props.onCheckedClick, + this._props.onChildClick, + this._props.skipFields, false, - this.props.whenChildContentsActiveChanged, - this.props.dontRegisterView, + this._props.whenChildContentsActiveChanged, + this._props.dontRegisterView, emptyFunction, emptyFunction, this.childContextMenuItems(), // TODO: [AL] Add these - this.props.AddToMap, - this.props.RemFromMap, - this.props.hierarchyIndex + this._props.AddToMap, + this._props.RemFromMap, + this._props.hierarchyIndex ); } else { contentElement = ( @@ -573,9 +588,9 @@ export class TreeView extends React.Component<TreeViewProps> { @computed get renderContent() { TraceMobx(); const expandKey = this.treeViewExpandedView; - const sortings = (this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.TreeViewSortings) as { [key: string]: { color: string; icon: JSX.Element | string } }) ?? {}; + const sortings = (this._props.styleProvider?.(this.Document, this.treeView._props, StyleProp.TreeViewSortings) as { [key: string]: { color: string; icon: JSX.Element | string } }) ?? {}; if (['links', 'annotations', 'embeddings', this.fieldKey].includes(expandKey)) { - const sorting = StrCast(this.doc.treeView_SortCriterion, TreeSort.WhenAdded); + const sorting = StrCast(this.Document.treeView_SortCriterion, TreeSort.WhenAdded); const sortKeys = Object.keys(sortings); const curSortIndex = Math.max( 0, @@ -587,7 +602,7 @@ export class TreeView extends React.Component<TreeViewProps> { const localAdd = (doc: Doc, addBefore?: Doc, before?: boolean) => { // if there's a sort ordering specified that can be modified on drop (eg, zorder can be modified, alphabetical can't), // then the modification would be done here - const ordering = StrCast(this.doc.treeView_SortCriterion); + const ordering = StrCast(this.Document.treeView_SortCriterion); if (ordering === TreeSort.Zindex) { const docs = TreeView.sortDocs(this.childDocs || ([] as Doc[]), ordering); doc.zIndex = addBefore ? NumCast(addBefore.zIndex) + (before ? -0.5 : 0.5) : 1000; @@ -595,8 +610,8 @@ export class TreeView extends React.Component<TreeViewProps> { docs.sort((a, b) => (NumCast(a.zIndex) > NumCast(b.zIndex) ? 1 : -1)).forEach((d, i) => (d.zIndex = i)); } const dataIsComputed = ComputedField.WithoutComputed(() => FieldValue(this.dataDoc[key])) instanceof ComputedField; - const added = (!dataIsComputed || (this.dropping && this.moving)) && Doc.AddDocToList(this.dataDoc, key, doc, addBefore, before, false, true); - !dataIsComputed && added && Doc.SetContainer(doc, this.doc); + const added = (!dataIsComputed || (this.dropping && this.moving)) && Doc.AddDocToList(this.dataDoc, key, doc, addBefore, before, false); + !dataIsComputed && added && Doc.SetContainer(doc, this.Document); return added; }; @@ -614,12 +629,12 @@ export class TreeView extends React.Component<TreeViewProps> { } return ( <div> - {!docs?.length || this.props.AddToMap /* hack to identify pres box trees */ ? null : ( + {!docs?.length || this._props.AddToMap /* hack to identify pres box trees */ ? null : ( <div className="treeView-sorting"> <IconButton color={sortings[sorting]?.color} size={Size.XSMALL} - tooltip={`Sorted by : ${this.doc.treeView_SortCriterion}. click to cycle`} + tooltip={`Sorted by : ${this.Document.treeView_SortCriterion}. click to cycle`} icon={sortings[sorting]?.icon} onPointerDown={e => { downX = e.clientX; @@ -627,8 +642,8 @@ export class TreeView extends React.Component<TreeViewProps> { e.stopPropagation(); }} onClick={undoable(e => { - if (this.props.isContentActive() && Math.abs(e.clientX - downX) < 3 && Math.abs(e.clientY - downY) < 3) { - !this.props.treeView.outlineMode && (this.doc.treeView_SortCriterion = sortKeys[(curSortIndex + 1) % sortKeys.length]); + if (this._props.isContentActive() && Math.abs(e.clientX - downX) < 3 && Math.abs(e.clientY - downY) < 3) { + !this.treeView.outlineMode && (this.Document.treeView_SortCriterion = sortKeys[(curSortIndex + 1) % sortKeys.length]); e.stopPropagation(); } }, 'sort order')} @@ -638,7 +653,7 @@ export class TreeView extends React.Component<TreeViewProps> { <ul style={{ cursor: 'inherit' }} key={expandKey + 'more'} - title={`Sorted by : ${this.doc.treeView_SortCriterion}. click to cycle`} + title={`Sorted by : ${this.Document.treeView_SortCriterion}. click to cycle`} className="" //this.doc.treeView_HideTitle ? 'no-indent' : ''} onPointerDown={e => { downX = e.clientX; @@ -646,8 +661,8 @@ export class TreeView extends React.Component<TreeViewProps> { e.stopPropagation(); }} onClick={undoable(e => { - if (this.props.isContentActive() && Math.abs(e.clientX - downX) < 3 && Math.abs(e.clientY - downY) < 3) { - !this.props.treeView.outlineMode && (this.doc.treeView_SortCriterion = sortKeys[(curSortIndex + 1) % sortKeys.length]); + if (this._props.isContentActive() && Math.abs(e.clientX - downX) < 3 && Math.abs(e.clientY - downY) < 3) { + !this.treeView.outlineMode && (this.Document.treeView_SortCriterion = sortKeys[(curSortIndex + 1) % sortKeys.length]); e.stopPropagation(); } }, 'sort order')}> @@ -655,37 +670,37 @@ export class TreeView extends React.Component<TreeViewProps> { ? null : TreeView.GetChildElements( docs, - this.props.treeView, + this.treeView, this, this.layoutDoc, this.dataDoc, - this.props.treeViewParent, - this.props.prevSibling, + this._props.treeViewParent, + this._props.prevSibling, addDoc, remDoc, moveDoc, - StrCast(this.doc.childDragAction, this.props.dragAction) as dropActionType, - this.props.addDocTab, + StrCast(this.Document.childDragAction, this._props.dragAction) as dropActionType, + this._props.addDocTab, this.titleStyleProvider, - this.props.ScreenToLocalTransform, - this.props.isContentActive, - this.props.panelWidth, - this.props.renderDepth, - this.props.treeViewHideHeaderFields, - [...this.props.renderedIds, this.doc[Id]], - this.props.onCheckedClick, - this.props.onChildClick, - this.props.skipFields, + this.ScreenToLocalTransform, + this._props.isContentActive, + this._props.panelWidth, + this._props.renderDepth, + this._props.treeViewHideHeaderFields, + [...this._props.renderedIds, this.Document[Id]], + this._props.onCheckedClick, + this._props.onChildClick, + this._props.skipFields, false, - this.props.whenChildContentsActiveChanged, - this.props.dontRegisterView, + this._props.whenChildContentsActiveChanged, + this._props.dontRegisterView, emptyFunction, emptyFunction, this.childContextMenuItems(), // TODO: [AL] add these - this.props.AddToMap, - this.props.RemFromMap, - this.props.hierarchyIndex, + this._props.AddToMap, + this._props.RemFromMap, + this._props.hierarchyIndex, this._renderCount )} </ul> @@ -693,7 +708,7 @@ export class TreeView extends React.Component<TreeViewProps> { ); } else if (this.treeViewExpandedView === 'fields') { return ( - <ul key={this.doc[Id] + this.doc.title} style={{ cursor: 'inherit' }}> + <ul key={this.Document[Id] + this.Document.title} style={{ cursor: 'inherit' }}> <div>{this.expandedField}</div> </ul> ); @@ -705,13 +720,13 @@ export class TreeView extends React.Component<TreeViewProps> { e.preventDefault(); e.stopPropagation(); }}> - {this.renderEmbeddedDocument(false, this.props.treeView.props.childDocumentsActive ?? returnFalse)} + {this.renderEmbeddedDocument(false, this.treeView._props.childDocumentsActive ?? returnFalse)} </ul> ); // "layout" } get onCheckedClick() { - return this.doc.type === DocumentType.COL ? undefined : this.props.onCheckedClick?.() ?? ScriptCast(this.doc.onCheckedClick); + return this.Document.type === DocumentType.COL ? undefined : this._props.onCheckedClick?.() ?? ScriptCast(this.Document.onCheckedClick); } @action @@ -719,10 +734,10 @@ export class TreeView extends React.Component<TreeViewProps> { if (this.onCheckedClick) { this.onCheckedClick?.script.run( { - this: this.doc.isTemplateForField && this.props.dataDoc ? this.props.dataDoc : this.doc, - heading: this.props.treeViewParent.title, - checked: this.doc.treeView_Checked === 'check' ? 'x' : this.doc.treeView_Checked === 'x' ? 'remove' : 'check', - containingTreeView: this.props.treeView.props.Document, + this: this.Document.isTemplateForField && this._props.dataDoc ? this._props.dataDoc : this.Document, + heading: this._props.treeViewParent.title, + checked: this.Document.treeView_Checked === 'check' ? 'x' : this.Document.treeView_Checked === 'x' ? 'remove' : 'check', + containingTreeView: this.treeView.Document, }, console.log ); @@ -734,28 +749,28 @@ export class TreeView extends React.Component<TreeViewProps> { @computed get renderBullet() { TraceMobx(); - const iconType = this.props.treeView.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.TreeViewIcon + (this.treeViewOpen ? ':open' : !this.childDocs.length ? ':empty' : '')) || 'question'; + const iconType = this.treeView._props.styleProvider?.(this.Document, this.treeView._props, StyleProp.TreeViewIcon + (this.treeViewOpen ? ':open' : !this.childDocs.length ? ':empty' : '')) || 'question'; const color = SettingsManager.userColor; - const checked = this.onCheckedClick ? this.doc.treeView_Checked ?? 'unchecked' : undefined; + const checked = this.onCheckedClick ? this.Document.treeView_Checked ?? 'unchecked' : undefined; return ( <div - className={`bullet${this.props.treeView.outlineMode ? '-outline' : ''}`} + className={`bullet${this.treeView.outlineMode ? '-outline' : ''}`} key="bullet" - title={this.childDocs?.length ? `click to see ${this.childDocs?.length} items` : 'view fields'} + title={this.childDocs?.length ? `click to see ${this.childDocs?.length} items` : `view ${this.Document.type} content`} onClick={this.bulletClick} style={ - this.props.treeView.outlineMode + this.treeView.outlineMode ? { - opacity: this.titleStyleProvider?.(this.doc, this.props.treeView.props, StyleProp.Opacity), + opacity: this.titleStyleProvider?.(this.Document, this.treeView._props, StyleProp.Opacity), } : { - pointerEvents: this.props.isContentActive() ? 'all' : undefined, + pointerEvents: this._props.isContentActive() ? 'all' : undefined, opacity: checked === 'unchecked' || typeof iconType !== 'string' ? undefined : 0.4, color: checked === 'unchecked' ? SettingsManager.userColor : 'inherit', } }> - {this.props.treeView.outlineMode ? ( - !(this.doc.text as RichTextField)?.Text ? null : ( + {this.treeView.outlineMode ? ( + !(this.Document.text as RichTextField)?.Text ? null : ( <IconButton color={color} icon={<FontAwesomeIcon icon={[this.childDocs?.length && !this.treeViewOpen ? 'fas' : 'far', 'circle']} />} size={Size.XSMALL} /> ) ) : ( @@ -775,28 +790,28 @@ export class TreeView extends React.Component<TreeViewProps> { } @computed get validExpandViewTypes() { - const annos = () => (DocListCast(this.doc[this.fieldKey + '_annotations']).length && !this.props.treeView.dashboardMode ? 'annotations' : ''); - const links = () => (LinkManager.Links(this.doc).length && !this.props.treeView.dashboardMode ? 'links' : ''); - const data = () => (this.childDocs || this.props.treeView.dashboardMode ? this.fieldKey : ''); - const embeddings = () => (this.props.treeView.dashboardMode ? '' : 'embeddings'); + const annos = () => (DocListCast(this.Document[this.fieldKey + '_annotations']).length && !this.treeView.dashboardMode ? 'annotations' : ''); + const links = () => (LinkManager.Links(this.Document).length && !this.treeView.dashboardMode ? 'links' : ''); + const data = () => (this.childDocs || this.treeView.dashboardMode ? this.fieldKey : ''); + const embeddings = () => (this.treeView.dashboardMode ? '' : 'embeddings'); const fields = () => (Doc.noviceMode ? '' : 'fields'); - const layout = Doc.noviceMode || this.doc._type_collection === CollectionViewType.Docking ? [] : ['layout']; - return [data(), ...layout, ...(this.props.treeView.fileSysMode ? [embeddings(), links(), annos()] : []), fields()].filter(m => m); + const layout = Doc.noviceMode || this.Document._type_collection === CollectionViewType.Docking ? [] : ['layout']; + return [data(), ...layout, ...(this.treeView.fileSysMode ? [embeddings(), links(), annos()] : []), fields()].filter(m => m); } @action expandNextviewType = () => { - if (this.treeViewOpen && !this.doc.isFolder && !this.props.treeView.outlineMode && !this.doc.treeView_ExpandedViewLock) { + if (this.treeViewOpen && !this.Document.isFolder && !this.treeView.outlineMode && !this.Document.treeView_ExpandedViewLock) { const next = (modes: any[]) => modes[(modes.indexOf(StrCast(this.treeViewExpandedView)) + 1) % modes.length]; - this.doc.treeView_ExpandedView = next(this.validExpandViewTypes); + this.Document.treeView_ExpandedView = next(this.validExpandViewTypes); } this.treeViewOpen = true; }; @observable headerEleWidth = 0; @computed get titleButtons() { - const customHeaderButtons = this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations); + const customHeaderButtons = this._props.styleProvider?.(this.Document, this.treeView._props, StyleProp.Decorations); const color = SettingsManager.userColor; - return this.props.treeViewHideHeaderFields() || this.doc.treeView_HideHeaderFields ? null : ( + return this._props.treeViewHideHeaderFields() || this.Document.treeView_HideHeaderFields ? null : ( <> {customHeaderButtons} {/* e.g.,. hide button is set by dashboardStyleProvider */} <IconButton @@ -808,7 +823,7 @@ export class TreeView extends React.Component<TreeViewProps> { e.stopPropagation(); }} /> - {Doc.noviceMode ? null : this.doc.treeView_ExpandedViewLock || Doc.IsSystem(this.doc) ? null : ( + {Doc.noviceMode ? null : this.Document.treeView_ExpandedViewLock || Doc.IsSystem(this.Document) ? null : ( <span className="collectionTreeView-keyHeader" title="type of expanded data" key={this.treeViewExpandedView} onPointerDown={this.expandNextviewType}> {this.treeViewExpandedView} </span> @@ -825,54 +840,54 @@ export class TreeView extends React.Component<TreeViewProps> { contextMenuItems = () => { const makeFolder = { script: ScriptField.MakeFunction(`scriptContext.makeFolder()`, { scriptContext: 'any' })!, icon: 'folder-plus', label: 'New Folder' }; const folderOp = this.childDocs?.length ? [makeFolder] : []; - const openEmbedding = { script: ScriptField.MakeFunction(`openDoc(getEmbedding(self), "${OpenWhere.addRight}")`)!, icon: 'copy', label: 'Open New Embedding' }; - const focusDoc = { script: ScriptField.MakeFunction(`DocFocusOrOpen(self)`)!, icon: 'eye', label: 'Focus or Open' }; - const reopenDoc = { script: ScriptField.MakeFunction(`DocFocusOrOpen(self)`)!, icon: 'eye', label: 'Reopen' }; + const openEmbedding = { script: ScriptField.MakeFunction(`openDoc(getEmbedding(this), "${OpenWhere.addRight}")`)!, icon: 'copy', label: 'Open New Embedding' }; + const focusDoc = { script: ScriptField.MakeFunction(`DocFocusOrOpen(this)`)!, icon: 'eye', label: 'Focus or Open' }; + const reopenDoc = { script: ScriptField.MakeFunction(`DocFocusOrOpen(this)`)!, icon: 'eye', label: 'Reopen' }; return [ - ...(this.props.contextMenuItems ?? []).filter(mi => (!mi.filter ? true : mi.filter.script.run({ doc: this.doc })?.result)), - ...(this.doc.isFolder + ...(this._props.contextMenuItems ?? []).filter(mi => (!mi.filter ? true : mi.filter.script.run({ doc: this.Document })?.result)), + ...(this.Document.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.rootDoc === Doc.MyRecentlyClosed - ? [reopenDoc] - : [openEmbedding, focusDoc]), + : Doc.IsSystem(this.Document) + ? [] + : this.treeView.fileSysMode && this.Document === this.Document[DocData] + ? [openEmbedding, makeFolder] + : this.Document._type_collection === CollectionViewType.Docking + ? [] + : this.treeView.Document === Doc.MyRecentlyClosed + ? [reopenDoc] + : [openEmbedding, focusDoc]), ]; }; childContextMenuItems = () => { - const customScripts = Cast(this.doc.childContextMenuScripts, listSpec(ScriptField), []); - const customFilters = Cast(this.doc.childContextMenuFilters, listSpec(ScriptField), []); - const icons = StrListCast(this.doc.childContextMenuIcons); - return StrListCast(this.doc.childContextMenuLabels).map((label, i) => ({ script: customScripts[i], filter: customFilters[i], icon: icons[i], label })); + const customScripts = Cast(this.Document.childContextMenuScripts, listSpec(ScriptField), []); + const customFilters = Cast(this.Document.childContextMenuFilters, listSpec(ScriptField), []); + const icons = StrListCast(this.Document.childContextMenuIcons); + return StrListCast(this.Document.childContextMenuLabels).map((label, i) => ({ script: customScripts[i], filter: customFilters[i], icon: icons[i], label })); }; - onChildClick = () => this.props.onChildClick?.() ?? (this._editTitleScript?.() || ScriptField.MakeFunction(`DocFocusOrOpen(self)`)!); + onChildClick = () => this._props.onChildClick?.() ?? (this._editTitleScript?.() || ScriptField.MakeFunction(`DocFocusOrOpen(this)`)!); - onChildDoubleClick = () => ScriptCast(this.props.treeView.Document.treeView_ChildDoubleClick, !this.props.treeView.outlineMode ? this._openScript?.() : null); + onChildDoubleClick = () => ScriptCast(this.treeView.Document.treeView_ChildDoubleClick, !this.treeView.outlineMode ? this._openScript?.() : null); - refocus = () => this.props.treeView.props.focus(this.props.treeView.props.Document, {}); + refocus = () => this.treeView._props.focus(this.treeView.Document, {}); ignoreEvent = (e: any) => { - if (this.props.isContentActive(true)) { + if (this._props.isContentActive(true)) { e.stopPropagation(); e.preventDefault(); } }; - titleStyleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps>, property: string): any => { - if (!doc || doc !== this.doc) return this.props?.treeView?.props.styleProvider?.(doc, props, property); // properties are inherited from the CollectionTreeView, not the hierarchical parent in the treeView + titleStyleProvider = (doc: Doc | undefined, props: Opt<FieldViewProps>, property: string): any => { + if (!doc || doc !== this.Document) return this._props?.treeView?._props.styleProvider?.(doc, props, property); // properties are inherited from the CollectionTreeView, not the hierarchical parent in the treeView - const treeView = this.props.treeView; + const treeView = this.treeView; // prettier-ignore switch (property.split(':')[0]) { - case StyleProp.Opacity: return this.props.treeView.outlineMode ? undefined : 1; + case StyleProp.Opacity: return this.treeView.outlineMode ? undefined : 1; case StyleProp.BackgroundColor: return this.selected ? '#7089bb' : StrCast(doc._backgroundColor, StrCast(doc.backgroundColor)); - case StyleProp.Highlighting: if (this.props.treeView.outlineMode) return undefined; + case StyleProp.Highlighting: if (this.treeView.outlineMode) return undefined; case StyleProp.BoxShadow: return undefined; case StyleProp.DocContents: - const highlightIndex = this.props.treeView.outlineMode ? Doc.DocBrushStatus.unbrushed : Doc.isBrushedHighlightedDegree(doc); + const highlightIndex = this.treeView.outlineMode ? Doc.DocBrushStatus.unbrushed : Doc.GetBrushHighlightStatus(doc); const highlightColor = ['transparent', 'rgb(68, 118, 247)', 'rgb(68, 118, 247)', 'orange', 'lightBlue'][highlightIndex]; return treeView.outlineMode ? null : ( <div @@ -881,33 +896,33 @@ export class TreeView extends React.Component<TreeViewProps> { // just render a title for a tree view label (identified by treeViewDoc being set in 'props') maxWidth: props?.PanelWidth() || undefined, background: props?.styleProvider?.(doc, props, StyleProp.BackgroundColor), - outline: SnappingManager.GetIsDragging() ? undefined: `solid ${highlightColor} ${highlightIndex}px`, - paddingLeft: NumCast(treeView.rootDoc.childXPadding, NumCast(treeView.props.childXPadding, Doc.IsComicStyle(doc)?20:0)), - paddingRight: NumCast(treeView.rootDoc.childXPadding, NumCast(treeView.props.childXPadding, Doc.IsComicStyle(doc)?20:0)), - paddingTop: treeView.props.childYPadding, - paddingBottom: treeView.props.childYPadding, + outline: SnappingManager.IsDragging ? undefined: `solid ${highlightColor} ${highlightIndex}px`, + paddingLeft: NumCast(treeView.Document.childXPadding, NumCast(treeView._props.childXPadding, Doc.IsComicStyle(doc)?20:0)), + paddingRight: NumCast(treeView.Document.childXPadding, NumCast(treeView._props.childXPadding, Doc.IsComicStyle(doc)?20:0)), + paddingTop: treeView._props.childYPadding, + paddingBottom: treeView._props.childYPadding, }}> {StrCast(doc?.title)} </div> ); } - return treeView.props.styleProvider?.(doc, props, property); + return treeView._props.styleProvider?.(doc, props, property); }; - embeddedStyleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps>, property: string): any => { + embeddedStyleProvider = (doc: Doc | undefined, props: Opt<FieldViewProps>, property: string): any => { if (property.startsWith(StyleProp.Decorations)) return null; - return this.props?.treeView?.props.styleProvider?.(doc, props, property); // properties are inherited from the CollectionTreeView, not the hierarchical parent in the treeView + return this._props?.treeView?._props.styleProvider?.(doc, props, property); // properties are inherited from the CollectionTreeView, not the hierarchical parent in the treeView }; onKeyDown = (e: React.KeyboardEvent, fieldProps: FieldViewProps) => { - if (this.doc.treeView_HideHeader || (this.doc.treeView_HideHeaderIfTemplate && this.props.treeView.props.childLayoutTemplate?.()) || this.props.treeView.outlineMode) { + if (this.Document.treeView_HideHeader || (this.Document.treeView_HideHeaderIfTemplate && this.treeView._props.childLayoutTemplate?.()) || this.treeView.outlineMode) { switch (e.key) { case 'Tab': e.stopPropagation?.(); e.preventDefault?.(); setTimeout(() => RichTextMenu.Instance.TextView?.EditorView?.focus(), 150); - UndoManager.RunInBatch(() => (e.shiftKey ? this.props.outdentDocument?.(true) : this.props.indentDocument?.(true)), 'tab'); + UndoManager.RunInBatch(() => (e.shiftKey ? this._props.outdentDocument?.(true) : this._props.indentDocument?.(true)), 'tab'); return true; case 'Backspace': - if (!(this.doc.text as RichTextField)?.Text && this.props.removeDoc?.(this.doc)) { + if (!(this.Document.text as RichTextField)?.Text && this._props.removeDoc?.(this.Document)) { e.stopPropagation?.(); e.preventDefault?.(); return true; @@ -921,7 +936,7 @@ export class TreeView extends React.Component<TreeViewProps> { } return false; }; - titleWidth = () => Math.max(20, Math.min(this.props.treeView.truncateTitleWidth(), this.props.panelWidth())) / (this.props.treeView.props.NativeDimScaling?.() || 1) - this.headerEleWidth - treeBulletWidth(); + titleWidth = () => Math.max(20, Math.min(this.treeView.truncateTitleWidth(), this._props.panelWidth())) / (this.treeView._props.NativeDimScaling?.() || 1) - this.headerEleWidth - treeBulletWidth(); /** * Renders the EditableView title element for placement into the tree. @@ -936,21 +951,21 @@ export class TreeView extends React.Component<TreeViewProps> { display={'inline-block'} editing={this._editTitle} background={'#7089bb'} - contents={StrCast(this.doc.title)} + contents={StrCast(this.Document.title)} height={12} sizeToContent={true} fontSize={12} isEditingCallback={action(e => (this._editTitle = e))} - GetValue={() => StrCast(this.doc.title)} + GetValue={() => StrCast(this.Document.title)} OnTab={undoBatch((shift?: boolean) => { - if (!shift) this.props.indentDocument?.(true); - else this.props.outdentDocument?.(true); + if (!shift) this._props.indentDocument?.(true); + else this._props.outdentDocument?.(true); })} - OnEmpty={undoBatch(() => this.props.treeView.outlineMode && this.props.removeDoc?.(this.doc))} - OnFillDown={val => this.props.treeView.fileSysMode && this.makeFolder()} + OnEmpty={undoBatch(() => this.treeView.outlineMode && this._props.removeDoc?.(this.Document))} + OnFillDown={val => this.treeView.fileSysMode && this.makeFolder()} SetValue={undoBatch((value: string, shiftKey: boolean, enterKey: boolean) => { - Doc.SetInPlace(this.doc, 'title', value, false); - this.props.treeView.outlineMode && enterKey && this.makeTextCollection(); + Doc.SetInPlace(this.Document, 'title', value, false); + this.treeView.outlineMode && enterKey && this.makeTextCollection(); })} /> ) : ( @@ -958,49 +973,44 @@ export class TreeView extends React.Component<TreeViewProps> { key="title" ref={action((r: any) => { this._docRef = r ? r : undefined; - if (this._docRef && TreeView._editTitleOnLoad?.id === this.props.document[Id] && TreeView._editTitleOnLoad.parent === this.props.parentTreeView) { + if (this._docRef && TreeView._editTitleOnLoad?.id === this.Document[Id] && TreeView._editTitleOnLoad.parent === this._props.parentTreeView) { this._docRef.select(false); this.setEditTitle(this._docRef); TreeView._editTitleOnLoad = undefined; } })} - Document={this.doc} - DataDoc={undefined} // or this.dataDoc? + Document={this.Document} layout_fitWidth={returnTrue} scriptContext={this} - hideDecorationTitle={this.props.treeView.outlineMode} - hideResizeHandles={this.props.treeView.outlineMode} + hideDecorations={true} + hideClickBehaviors={true} styleProvider={this.titleStyleProvider} onClickScriptDisable="never" // tree docViews have a script to show fields, etc. - docViewPath={this.props.treeView.props.docViewPath} - treeViewDoc={this.props.treeView.props.Document} + containerViewPath={this.treeView.childContainerViewPath} addDocument={undefined} - addDocTab={this.props.addDocTab} - rootSelected={returnTrue} - pinToPres={emptyFunction} - onClick={this.onChildClick} - onDoubleClick={this.onChildDoubleClick} - dragAction={this.props.dragAction} + addDocTab={this._props.addDocTab} + pinToPres={this.treeView._props.pinToPres} + onClickScript={this.onChildClick} + onDoubleClickScript={this.onChildDoubleClick} + dragAction={this._props.dragAction} moveDocument={this.move} - removeDocument={this.props.removeDoc} + removeDocument={this._props.removeDoc} ScreenToLocalTransform={this.getTransform} - NativeHeight={return18} + NativeHeight={returnZero} NativeWidth={returnZero} - shouldNotScale={returnTrue} PanelWidth={this.titleWidth} PanelHeight={return18} contextMenuItems={this.contextMenuItems} renderDepth={1} - isContentActive={emptyFunction} //this.props.isContentActive} - isDocumentActive={this.props.isContentActive} + isContentActive={emptyFunction} //this._props.isContentActive} + isDocumentActive={this._props.isContentActive} focus={this.refocus} - whenChildContentsActiveChanged={this.props.whenChildContentsActiveChanged} - bringToFront={emptyFunction} - disableBrushing={this.props.treeView.props.disableBrushing} - hideLinkButton={BoolCast(this.props.treeView.props.Document.childHideLinkButton)} - dontRegisterView={BoolCast(this.props.treeView.props.Document.childDontRegisterViews, this.props.dontRegisterView)} - xPadding={NumCast(this.props.treeView.props.Document.childXPadding, this.props.treeView.props.childXPadding)} - yPadding={NumCast(this.props.treeView.props.Document.childYPadding, this.props.treeView.props.childYPadding)} + whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged} + disableBrushing={this.treeView._props.disableBrushing} + hideLinkButton={BoolCast(this.treeView.Document.childHideLinkButton)} + dontRegisterView={BoolCast(this.treeView.Document.childDontRegisterViews, this._props.dontRegisterView)} + xPadding={NumCast(this.treeView.Document.childXPadding, this.treeView._props.childXPadding)} + yPadding={NumCast(this.treeView.Document.childYPadding, this.treeView._props.childYPadding)} childFilters={returnEmptyFilter} childFiltersByRanges={returnEmptyFilter} searchFilterDocs={returnEmptyDoclist} @@ -1009,16 +1019,16 @@ export class TreeView extends React.Component<TreeViewProps> { return ( <> <div - className={`docContainer${Doc.IsSystem(this.props.document) || this.props.document.isFolder ? '-system' : ''}`} + className={`docContainer${Doc.IsSystem(this.Document) || this.Document.isFolder ? '-system' : ''}`} ref={this._tref} title="click to edit title. Double Click or Drag to Open" style={{ - backgroundColor: Doc.IsSystem(this.props.document) || this.props.document.isFolder ? SettingsManager.userVariantColor : undefined, - color: Doc.IsSystem(this.props.document) || this.props.document.isFolder ? lightOrDark(SettingsManager.userVariantColor) : undefined, - fontWeight: Doc.IsSearchMatch(this.doc) !== undefined ? 'bold' : undefined, - textDecoration: Doc.GetT(this.doc, 'title', 'string', true) ? 'underline' : undefined, - outline: this.doc === Doc.ActiveDashboard ? 'dashed 1px #06123232' : undefined, - pointerEvents: !this.props.isContentActive() ? 'none' : undefined, + backgroundColor: Doc.IsSystem(this.Document) || this.Document.isFolder ? SettingsManager.userVariantColor : undefined, + color: Doc.IsSystem(this.Document) || this.Document.isFolder ? lightOrDark(SettingsManager.userVariantColor) : undefined, + fontWeight: Doc.IsSearchMatch(this.Document) !== undefined ? 'bold' : undefined, + textDecoration: Doc.GetT(this.Document, 'title', 'string', true) ? 'underline' : undefined, + outline: this.Document === Doc.ActiveDashboard ? 'dashed 1px #06123232' : undefined, + pointerEvents: !this._props.isContentActive() ? 'none' : undefined, }}> {view} </div> @@ -1037,7 +1047,19 @@ export class TreeView extends React.Component<TreeViewProps> { key="titleheader" ref={this._header} onClick={this.ignoreEvent} - onPointerDown={this.ignoreEvent} + onPointerDown={e => { + this.treeView.isContentActive() && + setupMoveUpEvents( + this, + e, + () => { + this._dref?.startDragging(e.clientX, e.clientY, '' as any); + return true; + }, + returnFalse, + emptyFunction + ); + }} onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}> <div @@ -1058,45 +1080,41 @@ export class TreeView extends React.Component<TreeViewProps> { return ( <div style={{ height: this.embeddedPanelHeight(), width: this.embeddedPanelWidth() }}> <DocumentView - key={this.doc[Id]} + key={this.Document[Id]} ref={action((r: DocumentView | null) => (this._dref = r))} - Document={this.doc} - DataDoc={undefined} + Document={this.Document} layout_fitWidth={this.fitWidthFilter} PanelWidth={this.embeddedPanelWidth} PanelHeight={this.embeddedPanelHeight} LayoutTemplateString={asText ? FormattedTextBox.LayoutString('text') : undefined} - LayoutTemplate={this.props.treeView.props.childLayoutTemplate} + LayoutTemplate={this.treeView._props.childLayoutTemplate} isContentActive={isActive} isDocumentActive={isActive} styleProvider={asText ? this.titleStyleProvider : this.embeddedStyleProvider} + fitContentsToBox={returnTrue} hideTitle={asText} - //fitContentsToBox={returnTrue} - hideDecorationTitle={this.props.treeView.outlineMode} - hideResizeHandles={this.props.treeView.outlineMode} - onClick={this.onChildClick} - focus={this.refocus} - onKey={this.onKeyDown} - hideLinkButton={BoolCast(this.props.treeView.props.Document.childHideLinkButton)} - dontRegisterView={BoolCast(this.props.treeView.props.Document.childDontRegisterViews, this.props.dontRegisterView)} + hideDecorations={true} + hideClickBehaviors={true} + hideLinkButton={BoolCast(this.treeView.Document.childHideLinkButton)} + dontRegisterView={BoolCast(this.treeView.Document.childDontRegisterViews, this._props.dontRegisterView)} ScreenToLocalTransform={this.docTransform} - renderDepth={this.props.renderDepth + 1} - treeViewDoc={this.props.treeView?.props.Document} - rootSelected={returnTrue} - docViewPath={this.props.treeView.props.docViewPath} + renderDepth={this._props.renderDepth + 1} + onClickScript={this.onChildClick} + onKey={this.onKeyDown} + containerViewPath={this.treeView.childContainerViewPath} childFilters={returnEmptyFilter} childFiltersByRanges={returnEmptyFilter} searchFilterDocs={returnEmptyDoclist} - addDocument={this.props.addDocument} + focus={this.refocus} + addDocument={this._props.addDocument} moveDocument={this.move} - removeDocument={this.props.removeDoc} - whenChildContentsActiveChanged={this.props.whenChildContentsActiveChanged} - xPadding={NumCast(this.props.treeView.props.Document.childXPadding, this.props.treeView.props.childXPadding)} - yPadding={NumCast(this.props.treeView.props.Document.childYPadding, this.props.treeView.props.childYPadding)} - addDocTab={this.props.addDocTab} - pinToPres={this.props.treeView.props.pinToPres} - disableBrushing={this.props.treeView.props.disableBrushing} - bringToFront={returnFalse} + removeDocument={this._props.removeDoc} + whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged} + xPadding={NumCast(this.treeView.Document.childXPadding, this.treeView._props.childXPadding)} + yPadding={NumCast(this.treeView.Document.childYPadding, this.treeView._props.childYPadding)} + addDocTab={this._props.addDocTab} + pinToPres={this.treeView._props.pinToPres} + disableBrushing={this.treeView._props.disableBrushing} scriptContext={this} /> </div> @@ -1105,7 +1123,7 @@ export class TreeView extends React.Component<TreeViewProps> { // renders the text version of a document as the header. This is used in the file system mode and in other vanilla tree views. @computed get renderTitleAsHeader() { - return this.props.treeView.Document.treeView_HideUnrendered && this.doc.layout_unrendered && !this.doc.treeView_FieldKey ? ( + return this.treeView.Document.treeView_HideUnrendered && this.Document.layout_unrendered && !this.Document.treeView_FieldKey ? ( <div></div> ) : ( <> @@ -1120,16 +1138,16 @@ export class TreeView extends React.Component<TreeViewProps> { return ( <> {this.renderBullet} - {this.renderEmbeddedDocument(asText, this.props.isContentActive)} + {this.renderEmbeddedDocument(asText, this._props.isContentActive)} </> ); }; @computed get renderBorder() { - const sorting = StrCast(this.doc.treeView_SortCriterion, TreeSort.WhenAdded); - const sortings = (this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.TreeViewSortings) ?? {}) as { [key: string]: { color: string; label: string } }; + const sorting = StrCast(this.Document.treeView_SortCriterion, TreeSort.WhenAdded); + const sortings = (this._props.styleProvider?.(this.Document, this.treeView._props, StyleProp.TreeViewSortings) ?? {}) as { [key: string]: { color: string; label: string } }; return ( - <div className={`treeView-border${this.props.treeView.outlineMode ? TreeViewType.outline : ''}`} style={{ borderColor: sortings[sorting]?.color }}> + <div className={`treeView-border${this.treeView.outlineMode ? TreeViewType.outline : ''}`} style={{ borderColor: sortings[sorting]?.color }}> {!this.treeViewOpen ? null : this.renderContent} </div> ); @@ -1139,28 +1157,28 @@ export class TreeView extends React.Component<TreeViewProps> { const pt = [de.clientX, de.clientY]; const rect = this._header.current!.getBoundingClientRect(); const before = pt[1] < rect.top + rect.height / 2; - const inside = this.props.treeView.fileSysMode && !this.doc.isFolder ? false : pt[0] > rect.left + rect.width * 0.33 || (!before && this.treeViewOpen && this.childDocs?.length ? true : false); + const inside = this.treeView.fileSysMode && !this.Document.isFolder ? false : pt[0] > rect.left + rect.width * 0.33 || (!before && this.treeViewOpen && this.childDocs?.length ? true : false); - const docs = this.props.treeView.onTreeDrop(de, (docs: Doc[]) => this.dropDocuments(docs, before, inside, 'copy', undefined, undefined, false)); + const docs = this.treeView.onTreeDrop(de, (docs: Doc[]) => this.dropDocuments(docs, before, inside, 'copy', undefined, undefined, false, false)); }; render() { TraceMobx(); - const hideTitle = this.doc.treeView_HideHeader || (this.doc.treeView_HideHeaderIfTemplate && this.props.treeView.props.childLayoutTemplate?.()) || this.props.treeView.outlineMode; - return this.props.renderedIds?.indexOf(this.doc[Id]) !== -1 ? ( - '<' + this.doc.title + '>' // just print the title of documents we've previously rendered in this hierarchical path to avoid cycles + const hideTitle = this.Document.treeView_HideHeader || (this.Document.treeView_HideHeaderIfTemplate && this.treeView._props.childLayoutTemplate?.()) || this.treeView.outlineMode; + return this._props.renderedIds?.indexOf(this.Document[Id]) !== -1 ? ( + '<' + this.Document.title + '>' // just print the title of documents we've previously rendered in this hierarchical path to avoid cycles ) : ( <div - className={`treeView-container${this.props.isContentActive() ? '-active' : ''}`} + className={`treeView-container${this._props.isContentActive() ? '-active' : ''}`} ref={this.createTreeDropTarget} onDrop={this.onTreeDrop} - //onPointerDown={e => this.props.isContentActive(true) && SelectionManager.DeselectAll()} // bcz: this breaks entering a text filter in a filterBox since it deselects the filter's target document + //onPointerDown={e => this._props.isContentActive(true) && SelectionManager.DeselectAll()} // bcz: this breaks entering a text filter in a filterBox since it deselects the filter's target document // onKeyDown={this.onKeyDown} > <li className="collection-child"> - {hideTitle && this.doc.type !== DocumentType.RTF && !this.doc.treeView_RenderAsBulletHeader // should test for prop 'treeView_RenderDocWithBulletAsHeader" + {hideTitle && this.Document.type !== DocumentType.RTF && !this.Document.treeView_RenderAsBulletHeader // should test for prop 'treeView_RenderDocWithBulletAsHeader" ? this.renderEmbeddedDocument(false, returnFalse) - : this.renderBulletHeader(hideTitle ? this.renderDocumentAsHeader(!this.doc.treeView_RenderAsBulletHeader) : this.renderTitleAsHeader, this._editTitle)} + : this.renderBulletHeader(hideTitle ? this.renderDocumentAsHeader(!this.Document.treeView_RenderAsBulletHeader) : this.renderTitleAsHeader, this._editTitle)} </li> </div> ); @@ -1208,7 +1226,7 @@ export class TreeView extends React.Component<TreeViewProps> { move: DragManager.MoveFunction, dragAction: dropActionType, addDocTab: (doc: Doc, where: OpenWhere) => boolean, - styleProvider: undefined | StyleProviderFunc, + styleProvider: undefined | StyleProviderFuncType, screenToLocalXf: () => Transform, isContentActive: (outsideReaction?: boolean) => boolean, panelWidth: () => number, @@ -1236,7 +1254,7 @@ export class TreeView extends React.Component<TreeViewProps> { } const docs = TreeView.sortDocs(childDocs, StrCast(treeView_Parent.treeView_SortCriterion, TreeSort.WhenAdded)); - const rowWidth = () => panelWidth() - treeBulletWidth() * (treeView.props.NativeDimScaling?.() || 1); + const rowWidth = () => panelWidth() - treeBulletWidth() * (treeView._props.NativeDimScaling?.() || 1); const treeView_Refs = new Map<Doc, TreeView | undefined>(); return docs .filter(child => child instanceof Doc) @@ -1248,11 +1266,11 @@ export class TreeView extends React.Component<TreeViewProps> { } const dentDoc = (editTitle: boolean, newParent: Doc, addAfter: Doc | undefined, parent: TreeView | CollectionTreeView | undefined) => { - if (parent instanceof TreeView && parent.props.treeView.fileSysMode && !newParent.isFolder) return; + if (parent instanceof TreeView && parent._props.treeView.fileSysMode && !newParent.isFolder) return; const fieldKey = Doc.LayoutFieldKey(newParent); if (remove && fieldKey && Cast(newParent[fieldKey], listSpec(Doc)) !== undefined) { remove(child); - FormattedTextBox.SelectOnLoad = child[Id]; + FormattedTextBox.SetSelectOnLoad(child); TreeView._editTitleOnLoad = editTitle ? { id: child[Id], parent } : undefined; Doc.AddDocToList(newParent, fieldKey, child, addAfter, false); newParent.treeView_Open = true; @@ -1260,18 +1278,18 @@ export class TreeView extends React.Component<TreeViewProps> { } }; const indent = i === 0 ? undefined : (editTitle: boolean) => dentDoc(editTitle, docs[i - 1], undefined, treeView_Refs.get(docs[i - 1])); - const outdent = !parentCollectionDoc ? undefined : (editTitle: boolean) => dentDoc(editTitle, parentCollectionDoc, containerPrevSibling, parentTreeView instanceof TreeView ? parentTreeView.props.parentTreeView : undefined); + const outdent = !parentCollectionDoc ? undefined : (editTitle: boolean) => dentDoc(editTitle, parentCollectionDoc, containerPrevSibling, parentTreeView instanceof TreeView ? parentTreeView._props.parentTreeView : undefined); const addDocument = (doc: Doc | Doc[], annotationKey?: string, relativeTo?: Doc, before?: boolean) => add(doc, relativeTo ?? docs[i], before !== undefined ? before : false); const childLayout = Doc.Layout(pair.layout); const rowHeight = () => { const aspect = Doc.NativeAspect(childLayout); - return aspect ? Math.min(childLayout[Width](), rowWidth()) / aspect : childLayout[Height](); + return aspect ? Math.min(NumCast(childLayout._width), rowWidth()) / aspect : NumCast(childLayout._height); }; return ( <TreeView key={child[Id]} ref={r => treeView_Refs.set(child, r ? r : undefined)} - document={pair.layout} + Document={pair.layout} dataDoc={pair.data} treeViewParent={treeView_Parent} prevSibling={docs[i]} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormBackgroundGrid.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormBackgroundGrid.tsx new file mode 100644 index 000000000..08dfb32ad --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormBackgroundGrid.tsx @@ -0,0 +1,75 @@ +import { observer } from 'mobx-react'; +import * as React from 'react'; +import { Doc } from '../../../../fields/Doc'; +import { NumCast } from '../../../../fields/Types'; +import './CollectionFreeFormView.scss'; + +export interface CollectionFreeFormViewBackgroundGridProps { + panX: () => number; + panY: () => number; + PanelWidth: () => number; + PanelHeight: () => number; + color: () => string; + isAnnotationOverlay?: boolean; + nativeDimScaling: () => number; + zoomScaling: () => number; + layoutDoc: Doc; + cachedCenteringShiftX: number; + cachedCenteringShiftY: number; +} +@observer +export class CollectionFreeFormBackgroundGrid extends React.Component<CollectionFreeFormViewBackgroundGridProps> { + chooseGridSpace = (gridSpace: number): number => { + if (!this.props.zoomScaling()) return gridSpace; + const divisions = this.props.PanelWidth() / this.props.zoomScaling() / gridSpace; + return divisions < 90 ? gridSpace : this.chooseGridSpace(gridSpace * 2); + }; + render() { + const gridSpace = this.chooseGridSpace(NumCast(this.props.layoutDoc['_backgroundGrid-spacing'], 50)); + const shiftX = (this.props.isAnnotationOverlay ? 0 : (-this.props.panX() % gridSpace) - gridSpace) * this.props.zoomScaling(); + const shiftY = (this.props.isAnnotationOverlay ? 0 : (-this.props.panY() % gridSpace) - gridSpace) * this.props.zoomScaling(); + const renderGridSpace = gridSpace * this.props.zoomScaling(); + const w = this.props.PanelWidth() / this.props.nativeDimScaling() + 2 * renderGridSpace; + const h = this.props.PanelHeight() / this.props.nativeDimScaling() + 2 * renderGridSpace; + const strokeStyle = this.props.color(); + return !this.props.nativeDimScaling() ? null : ( + <canvas + className="collectionFreeFormView-grid" + width={w} + height={h} + style={{ transform: `translate(${shiftX}px, ${shiftY}px)` }} + ref={el => { + const ctx = el?.getContext('2d'); + if (ctx) { + const Cx = this.props.cachedCenteringShiftX % renderGridSpace; + const Cy = this.props.cachedCenteringShiftY % renderGridSpace; + ctx.lineWidth = Math.min(1, Math.max(0.5, this.props.zoomScaling())); + ctx.setLineDash(gridSpace > 50 ? [3, 3] : [1, 5]); + ctx.clearRect(0, 0, w, h); + if (ctx) { + ctx.strokeStyle = strokeStyle; + ctx.fillStyle = strokeStyle; + ctx.beginPath(); + if (this.props.zoomScaling() > 1) { + for (let x = Cx - renderGridSpace; x <= w - Cx; x += renderGridSpace) { + ctx.moveTo(x, Cy - h); + ctx.lineTo(x, Cy + h); + } + for (let y = Cy - renderGridSpace; y <= h - Cy; y += renderGridSpace) { + ctx.moveTo(Cx - w, y); + ctx.lineTo(Cx + w, y); + } + } else { + for (let x = Cx - renderGridSpace; x <= w - Cx; x += renderGridSpace) + for (let y = Cy - renderGridSpace; y <= h - Cy; y += renderGridSpace) { + ctx.fillRect(Math.round(x), Math.round(y), 1, 1); + } + } + ctx.stroke(); + } + } + }} + /> + ); + } +} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx new file mode 100644 index 000000000..58f6b1593 --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx @@ -0,0 +1,114 @@ +import { IconButton, Size, Type } from 'browndash-components'; +import { IReactionDisposer, action, makeObservable, observable, reaction } from 'mobx'; +import { observer } from 'mobx-react'; +import * as React from 'react'; +import { SettingsManager } from '../../../util/SettingsManager'; +import { ObservableReactComponent } from '../../ObservableReactComponent'; +import './CollectionFreeFormView.scss'; +// import assets from './assets/link.png'; + +/** + * An Fsa Arc. The first array element is a test condition function that will be observed. + * The second array element is a function that will be invoked when the first test function + * returns a truthy value + */ +export type infoArc = [() => any, (res?: any) => infoState]; + +export const StateMessage = Symbol('StateMessage'); +export const StateEntryFunc = Symbol('StateEntryFunc'); +export const StateMessageGIF = Symbol('StateMessageGIF'); +export class infoState { + [StateMessage]: string = ''; + [StateEntryFunc]?: () => any; + [StateMessageGIF]?: string = ''; + [key: string]: infoArc; + constructor(message: string, arcs: { [key: string]: infoArc }, entryFunc?: () => any, messageGif?: string) { + this[StateMessage] = message; + Object.assign(this, arcs); + this[StateEntryFunc] = entryFunc; + this[StateMessageGIF] = messageGif; + } +} + +/** + * Create an FSA state. + * @param msg the message displayed when in this state + * @param arcs an object with fields containing @infoArcs (an object with field names indicating the arc transition and + * field values being a tuple of an arc transition trigger function (that returns a truthy value when the arc should fire), + * and an arc transition action function (that sets the next state) + * @param entryFunc a function to call when entering the state + * @returns an FSA state + */ +export function InfoState( + msg: string, // + arcs: { [key: string]: infoArc }, + entryFunc?: () => any, + gif?: string +) { + return new infoState(msg, arcs, entryFunc, gif); +} + +export interface CollectionFreeFormInfoStateProps { + infoState: infoState; + next: (state: infoState) => any; + close: () => void; +} + +@observer +export class CollectionFreeFormInfoState extends ObservableReactComponent<CollectionFreeFormInfoStateProps> { + _disposers: IReactionDisposer[] = []; + @observable _hide = false; + + constructor(props: any) { + super(props); + makeObservable(this); + } + + get State() { + return this._props.infoState; + } + get Arcs() { + return Object.keys(this.State ?? []).map(key => this.State?.[key]); + } + + clearState = () => this._disposers.map(disposer => disposer()); + initState = () => + (this._disposers = this.Arcs.map(arc => ({ test: arc[0], act: arc[1] })).map(arc => { + return reaction( + // + arc.test, + res => { + if (res) { + const next = arc.act(res); + this._props.next(next); + } + }, + { fireImmediately: true } + ); + })); + + componentDidMount(): void { + this.initState(); + } + componentDidUpdate(prevProps: Readonly<CollectionFreeFormInfoStateProps>) { + super.componentDidUpdate(prevProps); + this.clearState(); + this.initState(); + } + componentWillUnmount(): void { + this.clearState(); + } + render() { + return ( + <div className="collectionFreeform-infoUI" style={{ display: this._hide ? 'none' : undefined }}> + <div className="msg">{this.State?.[StateMessage]}</div> + <div className="gif-container" style={{ display: this.State?.[StateMessageGIF] ? undefined : 'none' }}> + <img className="gif" src={this.State?.[StateMessageGIF]} alt="state message gif"></img> + </div> + <div style={{ position: 'absolute', top: -10, left: -10 }}> + <IconButton icon="x" color={SettingsManager.userColor} size={Size.XSMALL} type={Type.TERT} background={SettingsManager.userBackgroundColor} onClick={action(e => this.props.close())} /> + </div> + </div> + ); + } +} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx new file mode 100644 index 000000000..8628ca3c3 --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx @@ -0,0 +1,255 @@ +import { makeObservable, observable, runInAction } from 'mobx'; +import { observer } from 'mobx-react'; +import * as React from 'react'; +import { Doc, DocListCast, Field, FieldResult } from '../../../../fields/Doc'; +import { InkTool } from '../../../../fields/InkField'; +import { StrCast } from '../../../../fields/Types'; +import { DocumentManager } from '../../../util/DocumentManager'; +import { LinkManager } from '../../../util/LinkManager'; +import { ObservableReactComponent } from '../../ObservableReactComponent'; +import { DocButtonState, DocumentLinksButton } from '../../nodes/DocumentLinksButton'; +import { CollectionFreeFormInfoState, InfoState, StateEntryFunc, infoState } from './CollectionFreeFormInfoState'; +import { CollectionFreeFormView } from './CollectionFreeFormView'; +import './CollectionFreeFormView.scss'; + +export interface CollectionFreeFormInfoUIProps { + Document: Doc; + Freeform: CollectionFreeFormView; + close: () => boolean; +} + +@observer +export class CollectionFreeFormInfoUI extends ObservableReactComponent<CollectionFreeFormInfoUIProps> { + _firstDocPos = { x: 0, y: 0 }; + + constructor(props: any) { + super(props); + makeObservable(this); + this.currState = this.setupStates(); + } + _originalbackground: string | undefined; + + @observable _currState: infoState | undefined = undefined; + get currState() { return this._currState!; } // prettier-ignore + set currState(val) { runInAction(() => (this._currState = val)); } // prettier-ignore + + componentWillUnmount(): void { + this._props.Freeform.layoutDoc.backgroundColor = this._originalbackground; + } + + setCurrState = (state: infoState) => { + if (state) { + this.currState = state; + this.currState[StateEntryFunc]?.(); + } + }; + + setupStates = () => { + this._originalbackground = StrCast(this._props.Freeform.layoutDoc.backgroundColor); + // state entry functions + const setBackground = (colour: string) => () => (this._props.Freeform.layoutDoc.backgroundColor = colour); + const setOpacity = (opacity: number) => () => (this._props.Freeform.layoutDoc.opacity = opacity); + // arc transition trigger conditions + const firstDoc = () => (this._props.Freeform.childDocs.length ? this._props.Freeform.childDocs[0] : undefined); + const numDocs = () => this._props.Freeform.childDocs.length; + + let docX: FieldResult<Field>; + let docY: FieldResult<Field>; + + const docNewX = () => firstDoc()?.x; + const docNewY = () => firstDoc()?.y; + + const linkStart = () => DocumentLinksButton.StartLink; + + const numDocLinks = () => LinkManager.Instance.getAllDirectLinks(firstDoc())?.length; + const linkMenuOpen = () => DocButtonState.Instance.LinkEditorDocView; + + const activeTool = () => Doc.ActiveTool; + + const pin = () => DocListCast(Doc.ActivePresentation?.data); + + let trail: number; + + const trailView = () => DocumentManager.Instance.DocumentViews.find(view => view.Document === Doc.MyTrails); + const presentationMode = () => Doc.ActivePresentation?.presentation_status; + + // set of states + const start = InfoState('Click anywhere and begin typing to create your first text document.', { + docCreated: [() => numDocs(), () => { + docX = firstDoc()?.x; + docY = firstDoc()?.y; + return oneDoc; + }], + }, setBackground("blue")); // prettier-ignore + + const oneDoc = InfoState('Hello world! You can drag and drop to move your document around.', { + // docCreated: [() => numDocs() > 1, () => multipleDocs], + docDeleted: [() => numDocs() < 1, () => start], + docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => { + docX = firstDoc()?.x; + docY = firstDoc()?.y; + return movedDoc1; + }], + }, setBackground("red")); // prettier-ignore + + const movedDoc1 = InfoState('Great moves. Try creating a second document.', { + docCreated: [() => numDocs() == 2, () => multipleDocs], + docDeleted: [() => numDocs() < 1, () => start], + docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => { + docX = firstDoc()?.x; + docY = firstDoc()?.y; + return movedDoc2; + }], + }, setBackground("yellow")); // prettier-ignore + + const movedDoc2 = InfoState('Slick moves. Try creating a second document.', { + docCreated: [() => numDocs() == 2, () => multipleDocs], + docDeleted: [() => numDocs() < 1, () => start], + docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => { + docX = firstDoc()?.x; + docY = firstDoc()?.y; + return movedDoc3; + }], + }, setBackground("pink")); // prettier-ignore + + const movedDoc3 = InfoState('Groovy moves. Try creating a second document.', { + docCreated: [() => numDocs() == 2, () => multipleDocs], + docDeleted: [() => numDocs() < 1, () => start], + docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => { + docX = firstDoc()?.x; + docY = firstDoc()?.y; + return movedDoc1; + }], + }, setBackground("green")); // prettier-ignore + + const multipleDocs = InfoState('Let\'s create a new link. Click the link icon on one of your documents.', { + linkStarted: [() => linkStart(), () => startedLink], + docRemoved: [() => numDocs() < 2, () => oneDoc], + }, setBackground("purple")); // prettier-ignore + + const startedLink = InfoState('Now click the highlighted link icon on your other document.', { + linkCreated: [() => numDocLinks(), () => madeLink], + docRemoved: [() => numDocs() < 2, () => oneDoc], + }, setBackground("orange")); // prettier-ignore + + const madeLink = InfoState('You made your first link! You can view your links by selecting the blue dot.', { + linkCreated: [() => !numDocLinks(), () => multipleDocs], + linkViewed: [() => linkMenuOpen(), () => { + alert(numDocLinks() + " cheer for " + numDocLinks() + " link!"); + return viewedLink; + }], + }, setBackground("blue")); // prettier-ignore + + const viewedLink = InfoState('Great work. You are now ready to create your own hypermedia world.', { + linkDeleted: [() => !numDocLinks(), () => multipleDocs], + docRemoved: [() => numDocs() < 2, () => oneDoc], + docCreated: [() => numDocs() == 3, () => { + trail = pin().length; + return presentDocs; + }], + activePen: [() => activeTool() === InkTool.Pen, () => penMode], + }, setBackground("black")); // prettier-ignore + + const presentDocs = InfoState( + 'Another document! You could make a presentation. Click the pin icon in the top left corner.', + { + docPinned: [ + () => pin().length > trail, + () => { + trail = pin().length; + return pinnedDoc1; + }, + ], + docRemoved: [() => numDocs() < 3, () => viewedLink], + }, + setBackground('black'), + '/assets/dash-pin-with-view.gif' + ); + + const penMode = InfoState('You\'re in pen mode. Click and drag to draw your first masterpiece.', { + // activePen: [() => activeTool() === InkTool.Eraser, () => eraserMode], + activePen: [() => activeTool() !== InkTool.Pen, () => viewedLink], + }); // prettier-ignore + + // const eraserMode = InfoState('You\'re in eraser mode. Say goodbye to your first masterpiece.', { + // docsRemoved: [() => numDocs() == 3, () => demos], + // }); // prettier-ignore + + const pinnedDoc1 = InfoState('You just pinned your doc.', { + docPinned: [ + () => pin().length > trail, + () => { + trail = pin().length; + return pinnedDoc2; + }, + ], + // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode], + // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode], + autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode], + docRemoved: [() => numDocs() < 3, () => viewedLink], + }); + + const pinnedDoc2 = InfoState(`You pinned another doc.`, { + docPinned: [ + () => pin().length > trail, + () => { + trail = pin().length; + return pinnedDoc3; + }, + ], + // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode], + // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode], + autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode], + docRemoved: [() => numDocs() < 3, () => viewedLink], + }); + + const pinnedDoc3 = InfoState(`You pinned yet another doc.`, { + docPinned: [ + () => pin().length > trail, + () => { + trail = pin().length; + return pinnedDoc2; + }, + ], + // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode], + // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode], + autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode], + docRemoved: [() => numDocs() < 3, () => viewedLink], + }); + + // const openedTrail = InfoState('This is your trails tab.', { + // trailView: [() => presentationMode() === 'edit', () => editPresentationMode], + // }); + + // const editPresentationMode = InfoState('You are editing your presentation.', { + // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode], + // autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode], + // docRemoved: [() => numDocs() < 3, () => demos], + // docCreated: [() => numDocs() == 4, () => completed], + // }); + + const manualPresentationMode = InfoState("You're in manual presentation mode.", { + // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode], + autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode], + docRemoved: [() => numDocs() < 3, () => viewedLink], + docCreated: [() => numDocs() == 4, () => completed], + }); + + const autoPresentationMode = InfoState("You're in auto presentation mode.", { + // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode], + manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode], + docRemoved: [() => numDocs() < 3, () => viewedLink], + docCreated: [() => numDocs() == 4, () => completed], + }); + + const completed = InfoState('Eager to learn more? Click the ? icon in the top right corner to read our full documentation.', { + docRemoved: [() => numDocs() == 1, () => oneDoc], + }, setBackground("white")); // prettier-ignore + + return start; + }; + + render() { + return <CollectionFreeFormInfoState next={this.setCurrState} close={this._props.close} infoState={this.currState} />; + } +} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx index d93e44ab7..b8c0967c1 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx @@ -1,12 +1,11 @@ import { Doc, Field, FieldResult } from '../../../../fields/Doc'; -import { Height, Width } from '../../../../fields/DocSymbols'; import { Id, ToString } from '../../../../fields/FieldSymbols'; import { ObjectField } from '../../../../fields/ObjectField'; import { RefField } from '../../../../fields/RefField'; import { listSpec } from '../../../../fields/Schema'; import { Cast, NumCast, StrCast } from '../../../../fields/Types'; import { aggregateBounds } from '../../../../Utils'; -import React = require('react'); +import * as React from 'react'; export interface ViewDefBounds { type: string; @@ -29,6 +28,8 @@ export interface ViewDefBounds { } export interface PoolData { + pair: { layout: Doc; data?: Doc }; + replica: string; x: number; y: number; z?: number; @@ -36,14 +37,13 @@ export interface PoolData { zIndex?: number; width?: number; height?: number; + autoDim?: number; // 1 for set to Panel dims, 0 for use width/height as entered backgroundColor?: string; color?: string; opacity?: number; transition?: string; highlight?: boolean; - replica: string; - pointerEvents?: string; // without this, toggling lockPosition of a group/collection in a freeform view won't update until something else invalidates the freeform view's documents forcing -- this is a problem with doLayoutComputation which makes a performance test to insure somethingChanged - pair: { layout: Doc; data?: Doc }; + pointerEvents?: string; } export interface ViewDefResult { @@ -91,8 +91,8 @@ export function computePassLayout(poolData: Map<string, PoolData>, pivotDoc: Doc docMap.set(layout[Id], { x: NumCast(layout.x), y: NumCast(layout.y), - width: layout[Width](), - height: layout[Height](), + width: NumCast(layout._width), + height: NumCast(layout._height), pair: { layout, data }, transition: 'all .3s', replica: '', @@ -106,8 +106,8 @@ export function computeStarburstLayout(poolData: Map<string, PoolData>, pivotDoc const burstDiam = [NumCast(pivotDoc._width), NumCast(pivotDoc._height)]; const burstScale = NumCast(pivotDoc._starburstDocScale, 1); childPairs.forEach(({ layout, data }, i) => { - const aspect = layout[Height]() / layout[Width](); - const docSize = Math.min(Math.min(400, layout[Width]()), Math.min(400, layout[Width]()) / aspect) * burstScale; + const aspect = NumCast(layout._height) / NumCast(layout._width); + const docSize = Math.min(Math.min(400, NumCast(layout._width)), Math.min(400, NumCast(layout._width)) / aspect) * burstScale; const deg = (i / childPairs.length) * Math.PI * 2; docMap.set(layout[Id], { x: Math.min(burstDiam[0] / 2 - docSize, Math.max(-burstDiam[0] / 2, (Math.cos(deg) * burstDiam[0]) / 2 - docSize / 2)), @@ -156,7 +156,7 @@ export function computePivotLayout(poolData: Map<string, PoolData>, pivotDoc: Do x: 0, y: 0, zIndex: 0, - width: 0, // should make doc hidden in CollectionFreefromDocumentView + width: 0, // should make doc hidden in CollectionFreeFormDocumentView height: 0, pair, replica: '', diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx index 470ff9527..1b9627bb6 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx @@ -1,7 +1,8 @@ -import { action, computed, IReactionDisposer, observable, reaction } from 'mobx'; +import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { Doc, Field } from '../../../../fields/Doc'; -import { DocCss } from '../../../../fields/DocSymbols'; +import { Brushed, DocCss } from '../../../../fields/DocSymbols'; import { Id } from '../../../../fields/FieldSymbols'; import { List } from '../../../../fields/List'; import { Cast, NumCast, StrCast } from '../../../../fields/Types'; @@ -12,8 +13,8 @@ import { SettingsManager } from '../../../util/SettingsManager'; import { SnappingManager } from '../../../util/SnappingManager'; import { Colors } from '../../global/globalEnums'; import { DocumentView } from '../../nodes/DocumentView'; +import { ObservableReactComponent } from '../../ObservableReactComponent'; import './CollectionFreeFormLinkView.scss'; -import React = require('react'); export interface CollectionFreeFormLinkViewProps { A: DocumentView; @@ -21,27 +22,30 @@ export interface CollectionFreeFormLinkViewProps { LinkDocs: Doc[]; } -// props.screentolocatransform - @observer -export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFormLinkViewProps> { +export class CollectionFreeFormLinkView extends ObservableReactComponent<CollectionFreeFormLinkViewProps> { @observable _opacity: number = 0; @observable _start = 0; _anchorDisposer: IReactionDisposer | undefined; _timeout: NodeJS.Timeout | undefined; + constructor(props: any) { + super(props); + makeObservable(this); + } + componentWillUnmount() { this._anchorDisposer?.(); } - @action timeout = action(() => Date.now() < this._start++ + 1000 && (this._timeout = setTimeout(this.timeout, 25))); + @action timeout: any = action(() => Date.now() < this._start++ + 1000 && (this._timeout = setTimeout(this.timeout, 25))); componentDidMount() { this._anchorDisposer = reaction( () => [ - this.props.A.props.ScreenToLocalTransform(), - Cast(Cast(Cast(this.props.A.rootDoc, Doc, null)?.link_anchor_1, Doc, null)?.annotationOn, Doc, null)?.layout_scrollTop, - Cast(Cast(Cast(this.props.A.rootDoc, Doc, null)?.link_anchor_1, Doc, null)?.annotationOn, Doc, null)?.[DocCss], - this.props.B.props.ScreenToLocalTransform(), - Cast(Cast(Cast(this.props.A.rootDoc, Doc, null)?.link_anchor_2, Doc, null)?.annotationOn, Doc, null)?.layout_scrollTop, - Cast(Cast(Cast(this.props.A.rootDoc, Doc, null)?.link_anchor_2, Doc, null)?.annotationOn, Doc, null)?.[DocCss], + this._props.A.screenToViewTransform(), + Cast(Cast(Cast(this._props.A.Document, Doc, null)?.link_anchor_1, Doc, null)?.annotationOn, Doc, null)?.layout_scrollTop, + Cast(Cast(Cast(this._props.A.Document, Doc, null)?.link_anchor_1, Doc, null)?.annotationOn, Doc, null)?.[DocCss], + this._props.B.screenToViewTransform(), + Cast(Cast(Cast(this._props.A.Document, Doc, null)?.link_anchor_2, Doc, null)?.annotationOn, Doc, null)?.layout_scrollTop, + Cast(Cast(Cast(this._props.A.Document, Doc, null)?.link_anchor_2, Doc, null)?.annotationOn, Doc, null)?.[DocCss], ], action(() => { this._start = Date.now(); @@ -53,9 +57,9 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo ); } placeAnchors = () => { - const { A, B, LinkDocs } = this.props; + const { A, B, LinkDocs } = this._props; const linkDoc = LinkDocs[0]; - if (SnappingManager.GetIsDragging() || !A.ContentDiv || !B.ContentDiv) return; + if (SnappingManager.IsDragging || !A.ContentDiv || !B.ContentDiv) return; setTimeout( action(() => (this._opacity = 0.75)), 0 @@ -85,9 +89,9 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo } } else { const m = targetAhyperlink.getBoundingClientRect(); - const mp = A.props.ScreenToLocalTransform().transformPoint(m.right, m.top + 5); - const mpx = mp[0] / A.props.PanelWidth(); - const mpy = mp[1] / A.props.PanelHeight(); + const mp = A.screenToViewTransform().transformPoint(m.right, m.top + 5); + const mpx = mp[0] / A._props.PanelWidth(); + const mpy = mp[1] / A._props.PanelHeight(); if (mpx >= 0 && mpx <= 1) linkDoc.link_anchor_1_x = mpx * 100; if (mpy >= 0 && mpy <= 1) linkDoc.link_anchor_1_y = mpy * 100; if (getComputedStyle(targetAhyperlink).fontSize === '0px') linkDoc.opacity = 0; @@ -100,9 +104,9 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo } } else { const m = targetBhyperlink.getBoundingClientRect(); - const mp = B.props.ScreenToLocalTransform().transformPoint(m.right, m.top + 5); - const mpx = mp[0] / B.props.PanelWidth(); - const mpy = mp[1] / B.props.PanelHeight(); + const mp = B.screenToViewTransform().transformPoint(m.right, m.top + 5); + const mpx = mp[0] / B._props.PanelWidth(); + const mpy = mp[1] / B._props.PanelHeight(); if (mpx >= 0 && mpx <= 1) linkDoc.link_anchor_2_x = mpx * 100; if (mpy >= 0 && mpy <= 1) linkDoc.link_anchor_2_y = mpy * 100; if (getComputedStyle(targetBhyperlink).fontSize === '0px') linkDoc.opacity = 0; @@ -115,18 +119,18 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo this, e, (e, down, delta) => { - this.props.LinkDocs[0].link_relationship_OffsetX = NumCast(this.props.LinkDocs[0].link_relationship_OffsetX) + delta[0]; - this.props.LinkDocs[0].link_relationship_OffsetY = NumCast(this.props.LinkDocs[0].link_relationship_OffsetY) + delta[1]; + this._props.LinkDocs[0].link_relationship_OffsetX = NumCast(this._props.LinkDocs[0].link_relationship_OffsetX) + delta[0]; + this._props.LinkDocs[0].link_relationship_OffsetY = NumCast(this._props.LinkDocs[0].link_relationship_OffsetY) + delta[1]; return false; }, emptyFunction, action(() => { SelectionManager.DeselectAll(); - SelectionManager.SelectSchemaViewDoc(this.props.LinkDocs[0], true); - LinkManager.currentLink = this.props.LinkDocs[0]; + SelectionManager.SelectSchemaViewDoc(this._props.LinkDocs[0], true); + LinkManager.currentLink = this._props.LinkDocs[0]; this.toggleProperties(); // OverlayView.Instance.addElement( - // <LinkEditor sourceDoc={this.props.A.props.Document} linkDoc={this.props.LinkDocs[0]} + // <LinkEditor sourceDoc={this._props.A.Document} linkDoc={this._props.LinkDocs[0]} // showLinks={action(() => { })} // />, { x: 300, y: 300 }); }) @@ -171,23 +175,23 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo @action toggleProperties = () => { - if ((SettingsManager.propertiesWidth ?? 0) < 100) { - SettingsManager.propertiesWidth = 250; + if ((SettingsManager.Instance.propertiesWidth ?? 0) < 100) { + SettingsManager.Instance.propertiesWidth = 250; } }; @action onClickLine = () => { SelectionManager.DeselectAll(); - SelectionManager.SelectSchemaViewDoc(this.props.LinkDocs[0], true); - LinkManager.currentLink = this.props.LinkDocs[0]; + SelectionManager.SelectSchemaViewDoc(this._props.LinkDocs[0], true); + LinkManager.currentLink = this._props.LinkDocs[0]; this.toggleProperties(); }; @computed.struct get renderData() { this._start; - SnappingManager.GetIsDragging(); - const { A, B, LinkDocs } = this.props; + SnappingManager.IsDragging; + const { A, B, LinkDocs } = this._props; if (!A.ContentDiv || !B.ContentDiv || !LinkDocs.length) return undefined; const acont = A.ContentDiv.getElementsByClassName('linkAnchorBox-cont'); const bcont = B.ContentDiv.getElementsByClassName('linkAnchorBox-cont'); @@ -200,8 +204,8 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo const atop = this.visibleY(adiv); const btop = this.visibleY(bdiv); if (!a.width || !b.width) return undefined; - const aDocBounds = (A.props as any).DocumentView?.().getBounds() || { left: 0, right: 0, top: 0, bottom: 0 }; - const bDocBounds = (B.props as any).DocumentView?.().getBounds() || { left: 0, right: 0, top: 0, bottom: 0 }; + const aDocBounds = (A._props as any).DocumentView?.().getBounds || { left: 0, right: 0, top: 0, bottom: 0 }; + const bDocBounds = (B._props as any).DocumentView?.().getBounds || { left: 0, right: 0, top: 0, bottom: 0 }; const aleft = this.visibleX(adiv); const bleft = this.visibleX(bdiv); const aclipped = aleft !== a.left || atop !== a.top; @@ -223,12 +227,12 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo const pt2normlen = Math.sqrt(pt2norm[0] * pt2norm[0] + pt2norm[1] * pt2norm[1]) || 1; const pt1normalized = [pt1norm[0] / pt1normlen, pt1norm[1] / pt1normlen]; const pt2normalized = [pt2norm[0] / pt2normlen, pt2norm[1] / pt2normlen]; - const aActive = A.isSelected() || Doc.IsBrushed(A.rootDoc); - const bActive = B.isSelected() || Doc.IsBrushed(B.rootDoc); + const aActive = A.IsSelected || A.Document[Brushed]; + const bActive = B.IsSelected || B.Document[Brushed]; const textX = (Math.min(pt1[0], pt2[0]) + Math.max(pt1[0], pt2[0])) / 2 + NumCast(LinkDocs[0].link_relationship_OffsetX); const textY = (pt1[1] + pt2[1]) / 2 + NumCast(LinkDocs[0].link_relationship_OffsetY); - const link = this.props.LinkDocs[0]; + const link = this._props.LinkDocs[0]; return { a, b, @@ -250,7 +254,7 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo render() { if (!this.renderData) return null; - const link = this.props.LinkDocs[0]; + const link = this._props.LinkDocs[0]; const { a, b, pt1norm, pt2norm, aActive, bActive, textX, textY, pt1, pt2 } = this.renderData; const linkRelationship = Field.toString(link?.link_relationship as any as Field); //get string representing relationship const linkRelationshipList = Doc.UserDoc().link_relationshipList as List<string>; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx index 420e6a318..e5b6c366f 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx @@ -1,17 +1,17 @@ import { computed } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { Id } from '../../../../fields/FieldSymbols'; import { DocumentManager } from '../../../util/DocumentManager'; import { LightboxView } from '../../LightboxView'; -import './CollectionFreeFormLinksView.scss'; import { CollectionFreeFormLinkView } from './CollectionFreeFormLinkView'; -import React = require('react'); +import './CollectionFreeFormLinksView.scss'; @observer export class CollectionFreeFormLinksView extends React.Component { @computed get uniqueConnections() { return Array.from(new Set(DocumentManager.Instance.LinkedDocumentViews)) - .filter(c => !LightboxView.LightboxDoc || (LightboxView.IsLightboxDocView(c.a.docViewPath) && LightboxView.IsLightboxDocView(c.b.docViewPath))) + .filter(c => !LightboxView.LightboxDoc || (LightboxView.Contains(c.a) && LightboxView.Contains(c.b))) .map(c => <CollectionFreeFormLinkView key={c.l[Id]} A={c.a} B={c.b} LinkDocs={[c.l]} />); } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormPannableContents.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormPannableContents.tsx new file mode 100644 index 000000000..69cbae86f --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormPannableContents.tsx @@ -0,0 +1,63 @@ +import { computed, makeObservable } from 'mobx'; +import { observer } from 'mobx-react'; +import * as React from 'react'; +import { Doc } from '../../../../fields/Doc'; +import { ScriptField } from '../../../../fields/ScriptField'; +import { PresBox } from '../../nodes/trails/PresBox'; +import { CollectionFreeFormView } from './CollectionFreeFormView'; +import './CollectionFreeFormView.scss'; +export interface CollectionFreeFormPannableContentsProps { + Document: Doc; + viewDefDivClick?: ScriptField; + children?: React.ReactNode | undefined; + transition?: string; + isAnnotationOverlay: boolean | undefined; + transform: () => string; + brushedView: () => { panX: number; panY: number; width: number; height: number } | undefined; +} + +@observer +export class CollectionFreeFormPannableContents extends React.Component<CollectionFreeFormPannableContentsProps> { + constructor(props: CollectionFreeFormPannableContentsProps) { + super(props); + makeObservable(this); + } + @computed get presPaths() { + return CollectionFreeFormView.ShowPresPaths ? PresBox.Instance.pathLines(this.props.Document) : null; + } + // rectangle highlight used when following trail/link to a region of a collection that isn't a document + showViewport = (viewport: { panX: number; panY: number; width: number; height: number } | undefined) => + !viewport ? null : ( + <div + className="collectionFreeFormView-brushView" + style={{ + transform: `translate(${viewport.panX}px, ${viewport.panY}px)`, + width: viewport.width, + height: viewport.height, + border: `orange solid ${viewport.width * 0.005}px`, + }} + /> + ); + + render() { + return ( + <div + className={'collectionfreeformview' + (this.props.viewDefDivClick ? '-viewDef' : '-none')} + onScroll={e => { + const target = e.target as any; + if (getComputedStyle(target)?.overflow === 'visible') { + target.scrollTop = target.scrollLeft = 0; // if collection is visible, scrolling messes things up since there are no scroll bars + } + }} + style={{ + transform: this.props.transform(), + transition: this.props.transition, + width: this.props.isAnnotationOverlay ? undefined : 0, // if not an overlay, then this will be the size of the collection, but panning and zooming will move it outside the visible border of the collection and make it selectable. This problem shows up after zooming/panning on a background collection -- you can drag the collection by clicking on apparently empty space outside the collection + }}> + {this.props.children} + {this.presPaths} + {this.showViewport(this.props.brushedView())} + </div> + ); + } +} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss index 5fa01b102..7951aff65 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss @@ -1,14 +1,12 @@ -@import "global/globalCssVariables"; +@import 'global/globalCssVariables.module.scss'; .collectionFreeFormRemoteCursors-cont { - - position:absolute; + position: absolute; z-index: $remoteCursors-zindex; transform-origin: 'center center'; } .collectionFreeFormRemoteCursors-canvas { - - position:absolute; + position: absolute; width: 20px; height: 20px; opacity: 0.5; @@ -21,4 +19,4 @@ // fontStyle: "italic", margin-left: -12; margin-top: 4; -}
\ No newline at end of file +} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx index 9e8d92d7d..fa8218bdd 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx @@ -1,6 +1,8 @@ import { computed } from 'mobx'; import { observer } from 'mobx-react'; import * as mobxUtils from 'mobx-utils'; +import * as React from 'react'; +import * as uuid from 'uuid'; import CursorField from '../../../../fields/CursorField'; import { Doc, FieldResult } from '../../../../fields/Doc'; import { Id } from '../../../../fields/FieldSymbols'; @@ -9,8 +11,6 @@ import { listSpec } from '../../../../fields/Schema'; import { Cast } from '../../../../fields/Types'; import { CollectionViewProps } from '../CollectionView'; import './CollectionFreeFormView.scss'; -import React = require('react'); -import v5 = require('uuid/v5'); @observer export class CollectionFreeFormRemoteCursors extends React.Component<CollectionViewProps> { @@ -42,7 +42,7 @@ export class CollectionFreeFormRemoteCursors extends React.Component<CollectionV if (el) { const ctx = el.getContext('2d'); if (ctx) { - ctx.fillStyle = '#' + v5(metadata.id, v5.URL).substring(0, 6).toUpperCase() + '22'; + ctx.fillStyle = '#' + uuid.v5(metadata.id, uuid.v5.URL).substring(0, 6).toUpperCase() + '22'; ctx.fillRect(0, 0, 20, 20); ctx.fillStyle = 'black'; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index 250760bd5..7d3acaea7 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables'; +@import '../../global/globalCssVariables.module.scss'; .collectionfreeformview-none { position: inherit; @@ -255,3 +255,49 @@ background-color: rgba($color: #000000, $alpha: 0.4); position: absolute; } + +.collectionFreeform-infoUI { + position: absolute; + display: block; + top: 0; + + color: white; + background-color: #5075ef; + border-radius: 5px; + box-shadow: 2px 2px 5px black; + + margin: 15px; + padding: 10px; + + .msg { + position: relative; + // display: block; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -o-user-select: none; + user-select: none; + + } + + .gif-container { + position: relative; + margin-top: 5px; + // display: block; + + justify-content: center; + align-items: center; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -o-user-select: none; + user-select: none; + + + .gif { + background-color: transparent; + height: 300px; + } + } + +} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 2ac8f6291..818c754c3 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1,28 +1,27 @@ import { Bezier } from 'bezier-js'; import { Colors } from 'browndash-components'; -import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx'; +import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import { computedFn } from 'mobx-utils'; +import * as React from 'react'; import { DateField } from '../../../../fields/DateField'; import { Doc, DocListCast, Opt } from '../../../../fields/Doc'; import { DocData, Height, Width } from '../../../../fields/DocSymbols'; import { Id } from '../../../../fields/FieldSymbols'; import { InkData, InkField, InkTool, PointData, Segment } from '../../../../fields/InkField'; import { List } from '../../../../fields/List'; -import { RichTextField } from '../../../../fields/RichTextField'; import { listSpec } from '../../../../fields/Schema'; import { ScriptField } from '../../../../fields/ScriptField'; -import { BoolCast, Cast, DocCast, FieldValue, NumCast, ScriptCast, StrCast } from '../../../../fields/Types'; +import { BoolCast, Cast, DocCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types'; import { ImageField } from '../../../../fields/URLField'; import { TraceMobx } from '../../../../fields/util'; import { GestureUtils } from '../../../../pen-gestures/GestureUtils'; -import { aggregateBounds, DashColor, emptyFunction, intersectRect, lightOrDark, returnFalse, returnZero, setupMoveUpEvents, Utils } from '../../../../Utils'; +import { aggregateBounds, DashColor, emptyFunction, intersectRect, lightOrDark, OmitKeys, returnFalse, returnZero, setupMoveUpEvents, Utils } from '../../../../Utils'; import { CognitiveServices } from '../../../cognitive_services/CognitiveServices'; import { Docs, DocUtils } from '../../../documents/Documents'; import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes'; import { DocumentManager } from '../../../util/DocumentManager'; import { DragManager, dropActionType } from '../../../util/DragManager'; -import { InteractionUtils } from '../../../util/InteractionUtils'; import { FollowLinkScript } from '../../../util/LinkFollower'; import { ReplayMovements } from '../../../util/ReplayMovements'; import { ScriptingGlobals } from '../../../util/ScriptingGlobals'; @@ -31,34 +30,31 @@ import { freeformScrollMode, SettingsManager } from '../../../util/SettingsManag import { SnappingManager } from '../../../util/SnappingManager'; import { Transform } from '../../../util/Transform'; import { undoBatch, UndoManager } from '../../../util/UndoManager'; -import { COLLECTION_BORDER_WIDTH } from '../../../views/global/globalCssVariables.scss'; import { Timeline } from '../../animationtimeline/Timeline'; import { ContextMenu } from '../../ContextMenu'; import { GestureOverlay } from '../../GestureOverlay'; -import { ActiveArrowEnd, ActiveArrowStart, ActiveDash, ActiveFillColor, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth, ActiveIsInkMask, InkingStroke, SetActiveInkColor, SetActiveInkWidth } from '../../InkingStroke'; +import { CtrlKey } from '../../GlobalKeyHandler'; +import { ActiveInkWidth, InkingStroke, SetActiveInkColor, SetActiveInkWidth } from '../../InkingStroke'; import { LightboxView } from '../../LightboxView'; -import { CollectionFreeFormDocumentView } from '../../nodes/CollectionFreeFormDocumentView'; -import { DocFocusOptions, DocumentView, DocumentViewProps, OpenWhere } from '../../nodes/DocumentView'; -import { FieldViewProps } from '../../nodes/FieldView'; +import { CollectionFreeFormDocumentView, CollectionFreeFormDocumentViewWrapper } from '../../nodes/CollectionFreeFormDocumentView'; +import { SchemaCSVPopUp } from '../../nodes/DataVizBox/SchemaCSVPopUp'; +import { DocumentView, OpenWhere } from '../../nodes/DocumentView'; +import { FocusViewOptions, FieldViewProps } from '../../nodes/FieldView'; import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; import { PinProps, PresBox } from '../../nodes/trails/PresBox'; import { CreateImage } from '../../nodes/WebBoxRenderer'; import { StyleProp } from '../../StyleProvider'; import { CollectionSubView } from '../CollectionSubView'; import { TreeViewType } from '../CollectionTreeView'; -import { TabDocView } from '../TabDocView'; +import { CollectionFreeFormBackgroundGrid } from './CollectionFreeFormBackgroundGrid'; +import { CollectionFreeFormInfoUI } from './CollectionFreeFormInfoUI'; import { computePassLayout, computePivotLayout, computeStarburstLayout, computeTimelineLayout, PoolData, ViewDefBounds, ViewDefResult } from './CollectionFreeFormLayoutEngines'; +import { CollectionFreeFormPannableContents } from './CollectionFreeFormPannableContents'; import { CollectionFreeFormRemoteCursors } from './CollectionFreeFormRemoteCursors'; import './CollectionFreeFormView.scss'; import { MarqueeView } from './MarqueeView'; -import React = require('react'); -import { DocumentWithColor, GeneratedResponse, generatePalette, StyleInput, StyleInputDocument } from '../../../apis/gpt/customization'; -import { PropertiesView } from '../../PropertiesView'; -import { MainView } from '../../MainView'; -import { ExtractColors } from '../../ExtractColors'; -import { extname } from 'path'; - -export type collectionFreeformViewProps = { + +export interface collectionFreeformViewProps { NativeWidth?: () => number; NativeHeight?: () => number; originTopLeft?: boolean; @@ -69,16 +65,18 @@ export type collectionFreeformViewProps = { noOverlay?: boolean; // used to suppress docs in the overlay (z) layer (ie, for minimap since overlay doesn't scale) engineProps?: any; getScrollHeight?: () => number | undefined; - dontRenderDocuments?: boolean; // used for annotation overlays which need to distribute documents into different freeformviews with different mixBlendModes depending on whether they are transparent or not. - // However, this screws up interactions since only the top layer gets events. so we render the freeformview a 3rd time with all documents in order to get interaction events (eg., marquee) but we don't actually want to display the documents. -}; +} @observer export class CollectionFreeFormView extends CollectionSubView<Partial<collectionFreeformViewProps>>() { public get displayName() { - return 'CollectionFreeFormView(' + this.props.Document.title?.toString() + ')'; + return 'CollectionFreeFormView(' + this.Document.title?.toString() + ')'; } // this makes mobx trace() statements more descriptive + constructor(props: any) { + super(props); + makeObservable(this); + } @observable public static ShowPresPaths = false; @@ -88,37 +86,28 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection private _downX: number = 0; private _downY: number = 0; private _downTime = 0; - private _inkToTextStartX: number | undefined; - private _inkToTextStartY: number | undefined; - private _wordPalette: Map<string, string> = new Map<string, string>(); private _clusterDistance: number = 75; private _hitCluster: number = -1; private _disposers: { [name: string]: IReactionDisposer } = {}; private _renderCutoffData = observable.map<string, boolean>(); - private _layoutPoolData = observable.map<string, PoolData>(); - private _layoutSizeData = observable.map<string, { width?: number; height?: number }>(); - private _cachedPool: Map<string, PoolData> = new Map(); private _batch: UndoManager.Batch | undefined = undefined; private _brushtimer: any; private _brushtimer1: any; public get isAnnotationOverlay() { - return this.props.isAnnotationOverlay; + return this._props.isAnnotationOverlay; } public get scaleFieldKey() { - return (this.props.viewField ?? '') + '_freeform_scale'; + return (this._props.viewField ?? '') + '_freeform_scale'; } private get panXFieldKey() { - return (this.props.viewField ?? '') + '_freeform_panX'; + return (this._props.viewField ?? '') + '_freeform_panX'; } private get panYFieldKey() { - return (this.props.viewField ?? '') + '_freeform_panY'; + return (this._props.viewField ?? '') + '_freeform_panY'; } private get autoResetFieldKey() { - return (this.props.viewField ?? '') + '_freeform_autoReset'; - } - private get borderWidth() { - return this.isAnnotationOverlay ? 0 : COLLECTION_BORDER_WIDTH; + return (this._props.viewField ?? '') + '_freeform_autoReset'; } @observable.shallow _layoutElements: ViewDefResult[] = []; // shallow because some layout items (eg pivot labels) are just generated 'divs' and can't be frozen as observables @@ -128,31 +117,32 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection @observable _clusterSets: Doc[][] = []; @observable _deleteList: DocumentView[] = []; @observable _timelineRef = React.createRef<Timeline>(); - @observable _marqueeRef: HTMLDivElement | null = null; @observable _marqueeViewRef = React.createRef<MarqueeView>(); + @observable _brushedView: { width: number; height: number; panX: number; panY: number } | undefined = undefined; // highlighted region of freeform canvas used by presentations to indicate a region @observable GroupChildDrag: boolean = false; // child document view being dragged. needed to update drop areas of groups when a group item is dragged. - @observable _brushedView: { width: number; height: number; panX: number; panY: number } | undefined; // highlighted region of freeform canvas used by presentations to indicate a region - @computed get views() { + @computed get contentViews() { const viewsMask = this._layoutElements.filter(ele => ele.bounds && !ele.bounds.z && ele.inkMask !== -1 && ele.inkMask !== undefined).map(ele => ele.ele); const renderableEles = this._layoutElements.filter(ele => ele.bounds && !ele.bounds.z && (ele.inkMask === -1 || ele.inkMask === undefined)).map(ele => ele.ele); if (viewsMask.length) renderableEles.push(<div className={`collectionfreeformview-mask${this._layoutElements.some(ele => (ele.inkMask ?? 0) > 0) ? '' : '-empty'}`}>{viewsMask}</div>); return renderableEles; } @computed get fitToContentVals() { + const hgt = this.contentBounds.b - this.contentBounds.y; + const wid = this.contentBounds.r - this.contentBounds.x; return { - bounds: { ...this.contentBounds, cx: (this.contentBounds.x + this.contentBounds.r) / 2, cy: (this.contentBounds.y + this.contentBounds.b) / 2 }, + bounds: { ...this.contentBounds, cx: this.contentBounds.x + wid / 2, cy: this.contentBounds.y + hgt / 2 }, scale: - !this.childDocs.length || !Number.isFinite(this.contentBounds.b - this.contentBounds.y) || !Number.isFinite(this.contentBounds.r - this.contentBounds.x) - ? 1 - : Math.min(this.props.PanelHeight() / (this.contentBounds.b - this.contentBounds.y), this.props.PanelWidth() / (this.contentBounds.r - this.contentBounds.x)), + (!this.childDocs.length || !Number.isFinite(hgt) || !Number.isFinite(wid) + ? 1 // + : Math.min(this._props.PanelHeight() / hgt, this._props.PanelWidth() / wid)) / (this._props.NativeDimScaling?.() || 1), }; } @computed get fitContentsToBox() { - return (this.props.fitContentsToBox?.() || this.Document._freeform_fitContentsToBox) && !this.isAnnotationOverlay; + return (this._props.fitContentsToBox?.() || this.Document._freeform_fitContentsToBox) && !this.isAnnotationOverlay; } @computed get contentBounds() { - const cb = Cast(this.rootDoc.contentBounds, listSpec('number')); + const cb = Cast(this.dataDoc.contentBounds, listSpec('number')); return cb ? { x: cb[0], y: cb[1], r: cb[2], b: cb[3] } : aggregateBounds( @@ -162,56 +152,50 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection ); } @computed get nativeWidth() { - return this.props.NativeWidth?.() || (this.fitContentsToBox ? 0 : Doc.NativeWidth(this.Document, Cast(this.Document.resolvedDataDoc, Doc, null))); + return this._props.NativeWidth?.() || Doc.NativeWidth(this.Document, Cast(this.Document.resolvedDataDoc, Doc, null)); } @computed get nativeHeight() { - return this.props.NativeHeight?.() || (this.fitContentsToBox ? 0 : Doc.NativeHeight(this.Document, Cast(this.Document.resolvedDataDoc, Doc, null))); + return this._props.NativeHeight?.() || Doc.NativeHeight(this.Document, Cast(this.Document.resolvedDataDoc, Doc, null)); } @computed get cachedCenteringShiftX(): number { - const scaling = this.fitContentsToBox || !this.nativeDimScaling ? 1 : this.nativeDimScaling; - return this.props.isAnnotationOverlay || this.props.originTopLeft ? 0 : this.props.PanelWidth() / 2 / scaling; // shift so pan position is at center of window for non-overlay collections + const scaling = !this.nativeDimScaling ? 1 : this.nativeDimScaling; + return this._props.isAnnotationOverlay || this._props.originTopLeft ? 0 : this._props.PanelWidth() / 2 / scaling; // shift so pan position is at center of window for non-overlay collections } @computed get cachedCenteringShiftY(): number { - const dv = this.props.DocumentView?.(); - const scaling = this.fitContentsToBox || !this.nativeDimScaling ? 1 : this.nativeDimScaling; + const dv = this.DocumentView?.(); + const fitWidth = this._props.layout_fitWidth?.(this.Document) ?? dv?.layoutDoc.layout_fitWidth; + const scaling = !this.nativeDimScaling ? 1 : this.nativeDimScaling; // if freeform has a native aspect, then the panel height needs to be adjusted to match it - const aspect = dv?.nativeWidth && dv?.nativeHeight && !dv.layoutDoc.layout_fitWidth ? dv.nativeHeight / dv.nativeWidth : this.props.PanelHeight() / this.props.PanelWidth(); - return this.props.isAnnotationOverlay || this.props.originTopLeft ? 0 : (aspect * this.props.PanelWidth()) / 2 / scaling; // shift so pan position is at center of window for non-overlay collections - } - @computed get cachedGetLocalTransform(): Transform { - return Transform.Identity() - .scale(1 / this.zoomScaling()) - .translate(this.panX(), this.panY()); + const aspect = dv?.nativeWidth && dv?.nativeHeight && !fitWidth ? dv.nativeHeight / dv.nativeWidth : this._props.PanelHeight() / this._props.PanelWidth(); + return this._props.isAnnotationOverlay || this._props.originTopLeft ? 0 : (aspect * this._props.PanelWidth()) / 2 / scaling; // shift so pan position is at center of window for non-overlay collections } - @computed get cachedGetContainerTransform(): Transform { - return this.props.ScreenToLocalTransform().translate(-this.borderWidth, -this.borderWidth); + @computed get panZoomXf() { + return new Transform(this.panX(), this.panY(), 1 / this.zoomScaling()); } - @computed get cachedGetTransform(): Transform { - return this.getContainerTransform() - .scale(this.props.isAnnotationOverlay ? 1 : 1 / this.nativeDim()) + @computed get screenToFreeformContentsXf() { + return this._props + .ScreenToLocalTransform() // .translate(-this.cachedCenteringShiftX, -this.cachedCenteringShiftY) - .transform(this.cachedGetLocalTransform); + .transform(this.panZoomXf); } public static gotoKeyframe(timer: NodeJS.Timeout | undefined, docs: Doc[], duration: number) { - if (timer) clearTimeout(timer); - return DocumentView.SetViewTransition(docs, 'all', duration, undefined, true); + return DocumentView.SetViewTransition(docs, 'all', duration, timer, undefined, true); } public static updateKeyframe(timer: NodeJS.Timeout | undefined, docs: Doc[], time: number) { - if (timer) clearTimeout(timer); - const newTimer = DocumentView.SetViewTransition(docs, 'all', 1000, undefined, true); + const newTimer = DocumentView.SetViewTransition(docs, 'all', 1000, timer, undefined, true); const timecode = Math.round(time); docs.forEach(doc => { CollectionFreeFormDocumentView.animFields.forEach(val => { - const findexed = Cast(doc[`${val.key}-indexed`], listSpec('number'), null); + const findexed = Cast(doc[`${val.key}_indexed`], listSpec('number'), null); findexed?.length <= timecode + 1 && findexed.push(undefined as any as number); }); CollectionFreeFormDocumentView.animStringFields.forEach(val => { - const findexed = Cast(doc[`${val}-indexed`], listSpec('string'), null); + const findexed = Cast(doc[`${val}_indexed`], listSpec('string'), null); findexed?.length <= timecode + 1 && findexed.push(undefined as any as string); }); CollectionFreeFormDocumentView.animDataFields(doc).forEach(val => { - const findexed = Cast(doc[`${val}-indexed`], listSpec(InkField), null); + const findexed = Cast(doc[`${val}_indexed`], listSpec(InkField), null); findexed?.length <= timecode + 1 && findexed.push(undefined as any); }); }); @@ -237,48 +221,44 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection @observable _keyframeEditing = false; @action setKeyFrameEditing = (set: boolean) => (this._keyframeEditing = set); getKeyFrameEditing = () => this._keyframeEditing; - onBrowseClickHandler = () => this.props.onBrowseClick?.() || ScriptCast(this.layoutDoc.onBrowseClick); - onChildClickHandler = () => this.props.childClickScript || ScriptCast(this.Document.onChildClick); - onChildDoubleClickHandler = () => this.props.childDoubleClickScript || ScriptCast(this.Document.onChildDoubleClick); + onBrowseClickHandler = () => this._props.onBrowseClickScript?.() || ScriptCast(this.layoutDoc.onBrowseClick); + onChildClickHandler = () => this._props.childClickScript || ScriptCast(this.Document.onChildClick); + onChildDoubleClickHandler = () => this._props.childDoubleClickScript || ScriptCast(this.Document.onChildDoubleClick); elementFunc = () => this._layoutElements; fitContentOnce = () => { - if (this.props.DocumentView?.().nativeWidth) return; const vals = this.fitToContentVals; this.layoutDoc._freeform_panX = vals.bounds.cx; this.layoutDoc._freeform_panY = vals.bounds.cy; this.layoutDoc._freeform_scale = vals.scale; }; freeformData = (force?: boolean) => (!this._firstRender && (this.fitContentsToBox || force) ? this.fitToContentVals : undefined); - reverseNativeScaling = () => (this.fitContentsToBox ? true : false); // freeform_panx, freeform_pany, freeform_scale all attempt to get values first from the layout controller, then from the layout/dataDoc (or template layout doc), and finally from the resolved template data document. // this search order, for example, allows icons of cropped images to find the panx/pany/zoom on the cropped image's data doc instead of the usual layout doc because the zoom/panX/panY define the cropped image panX = () => this.freeformData()?.bounds.cx ?? NumCast(this.Document[this.panXFieldKey], NumCast(Cast(this.Document.resolvedDataDoc, Doc, null)?.freeform_panX, 1)); panY = () => this.freeformData()?.bounds.cy ?? NumCast(this.Document[this.panYFieldKey], NumCast(Cast(this.Document.resolvedDataDoc, Doc, null)?.freeform_panY, 1)); zoomScaling = () => this.freeformData()?.scale ?? NumCast(Doc.Layout(this.Document)[this.scaleFieldKey], NumCast(Cast(this.Document.resolvedDataDoc, Doc, null)?.[this.scaleFieldKey], 1)); - contentTransform = () => - this.props.isAnnotationOverlay && this.zoomScaling() === 1 ? `` : `translate(${this.cachedCenteringShiftX}px, ${this.cachedCenteringShiftY}px) scale(${this.zoomScaling()}) translate(${-this.panX()}px, ${-this.panY()}px)`; - getTransform = () => this.cachedGetTransform.copy(); - getLocalTransform = () => this.cachedGetLocalTransform.copy(); - getContainerTransform = () => this.cachedGetContainerTransform.copy(); + PanZoomCenterXf = () => + this._props.isAnnotationOverlay && this.zoomScaling() === 1 ? `` : `translate(${this.cachedCenteringShiftX}px, ${this.cachedCenteringShiftY}px) scale(${this.zoomScaling()}) translate(${-this.panX()}px, ${-this.panY()}px)`; + ScreenToContentsXf = () => this.screenToFreeformContentsXf.copy(); getActiveDocuments = () => this.childLayoutPairs.filter(pair => this.isCurrent(pair.layout)).map(pair => pair.layout); - isAnyChildContentActive = () => this.props.isAnyChildContentActive(); - addLiveTextBox = (newBox: Doc) => { - FormattedTextBox.SelectOnLoad = newBox[Id]; // track the new text box so we can give it a prop that tells it to focus itself when it's displayed - this.addDocument(newBox); + isAnyChildContentActive = () => this._props.isAnyChildContentActive(); + addLiveTextBox = (newDoc: Doc) => { + FormattedTextBox.SetSelectOnLoad(newDoc); // track the new text box so we can give it a prop that tells it to focus itself when it's displayed + this.addDocument(newDoc); }; selectDocuments = (docs: Doc[]) => { SelectionManager.DeselectAll(); - docs.map(doc => DocumentManager.Instance.getDocumentView(doc, this.props.DocumentView?.())).map(dv => dv && SelectionManager.SelectView(dv, true)); + docs.map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.())).forEach(dv => dv && SelectionManager.SelectView(dv, true)); }; addDocument = (newBox: Doc | Doc[]) => { let retVal = false; if (newBox instanceof Doc) { - if ((retVal = this.props.addDocument?.(newBox) || false)) { + if ((retVal = this._props.addDocument?.(newBox) || false)) { this.bringToFront(newBox); this.updateCluster(newBox); } } else { - retVal = this.props.addDocument?.(newBox) || false; + retVal = this._props.addDocument?.(newBox) || false; // bcz: deal with clusters } if (retVal) { @@ -286,13 +266,13 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection for (const newBox of newBoxes) { if (newBox.activeFrame !== undefined) { const vals = CollectionFreeFormDocumentView.animFields.map(field => newBox[field.key]); - CollectionFreeFormDocumentView.animFields.forEach(field => delete newBox[`${field.key}-indexed`]); + CollectionFreeFormDocumentView.animFields.forEach(field => delete newBox[`${field.key}_indexed`]); CollectionFreeFormDocumentView.animFields.forEach(field => delete newBox[field.key]); delete newBox.activeFrame; CollectionFreeFormDocumentView.animFields.forEach((field, i) => field.key !== 'opacity' && (newBox[field.key] = vals[i])); } } - if (this.Document._currentFrame !== undefined && !this.props.isAnnotationOverlay) { + if (this.Document._currentFrame !== undefined && !this._props.isAnnotationOverlay) { CollectionFreeFormDocumentView.setupKeyframes(newBoxes, NumCast(this.Document._currentFrame), true); } } @@ -306,16 +286,16 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection return dispTime === -1 || curTime === -1 || (curTime - dispTime >= -1e-4 && curTime <= endTime); } - groupFocus = (anchor: Doc, options: DocFocusOptions) => { - options.docTransform = new Transform(-NumCast(this.rootDoc[this.panXFieldKey]) + NumCast(anchor.x), -NumCast(this.rootDoc[this.panYFieldKey]) + NumCast(anchor.y), 1); - const res = this.props.focus(this.rootDoc, options); + groupFocus = (anchor: Doc, options: FocusViewOptions) => { + options.docTransform = new Transform(-NumCast(this.layoutDoc[this.panXFieldKey]) + NumCast(anchor.x), -NumCast(this.layoutDoc[this.panYFieldKey]) + NumCast(anchor.y), 1); + const res = this._props.focus(this.Document, options); options.docTransform = undefined; return res; }; - focus = (anchor: Doc, options: DocFocusOptions) => { + focus = (anchor: Doc, options: FocusViewOptions) => { if (this._lightboxDoc) return; - if (anchor === this.rootDoc) { + if (anchor === this.Document) { if (options.willZoomCentered && options.zoomScale) { this.fitContentOnce(); options.didMove = true; @@ -324,7 +304,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection if (anchor.type !== DocumentType.CONFIG && !DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]).includes(anchor)) return; const xfToCollection = options?.docTransform ?? Transform.Identity(); const savedState = { panX: NumCast(this.Document[this.panXFieldKey]), panY: NumCast(this.Document[this.panYFieldKey]), scale: options?.willZoomCentered ? this.Document[this.scaleFieldKey] : undefined }; - const cantTransform = this.fitContentsToBox || ((this.rootDoc._isGroup || this.layoutDoc._lockedTransform) && !LightboxView.LightboxDoc); + const cantTransform = this.fitContentsToBox || ((this.Document.isGroup || this.layoutDoc._lockedTransform) && !LightboxView.LightboxDoc); const { panX, panY, scale } = cantTransform || (!options.willPan && !options.willZoomCentered) ? savedState : this.calculatePanIntoView(anchor, xfToCollection, options?.willZoomCentered ? options?.zoomScale ?? 0.75 : undefined); // focus on the document in the collection @@ -339,22 +319,20 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection } }; - getView = async (doc: Doc): Promise<Opt<DocumentView>> => { - return new Promise<Opt<DocumentView>>(res => { - if (doc.hidden && this._lightboxDoc !== doc) doc.hidden = false; + getView = async (doc: Doc, options: FocusViewOptions): Promise<Opt<DocumentView>> => + new Promise<Opt<DocumentView>>(res => { + if (doc.hidden && this._lightboxDoc !== doc) options.didMove = !(doc.hidden = false); const findDoc = (finish: (dv: DocumentView) => void) => DocumentManager.Instance.AddViewRenderedCb(doc, dv => finish(dv)); findDoc(dv => res(dv)); }); - }; - @action - internalDocDrop(e: Event, de: DragManager.DropEvent, docDragData: DragManager.DocumentDragData, xp: number, yp: number) { + internalDocDrop(e: Event, de: DragManager.DropEvent, docDragData: DragManager.DocumentDragData) { if (!super.onInternalDrop(e, de)) return false; const refDoc = docDragData.droppedDocuments[0]; - const [xpo, ypo] = this.getContainerTransform().transformPoint(de.x, de.y); - const z = NumCast(refDoc.z); - const x = (z ? xpo : xp) - docDragData.offset[0]; - const y = (z ? ypo : yp) - docDragData.offset[1]; + const fromScreenXf = NumCast(refDoc.z) ? this.ScreenToLocalBoxXf() : this.screenToFreeformContentsXf; + const [xpo, ypo] = fromScreenXf.transformPoint(de.x, de.y); + const x = xpo - docDragData.offset[0]; + const y = ypo - docDragData.offset[1]; const zsorted = this.childLayoutPairs .map(pair => pair.layout) .slice() @@ -366,16 +344,17 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection for (let i = 0; i < docDragData.droppedDocuments.length; i++) { const d = docDragData.droppedDocuments[i]; const layoutDoc = Doc.Layout(d); + const delta = Utils.rotPt(x - dropPos[0], y - dropPos[1], fromScreenXf.Rotate); if (this.Document._currentFrame !== undefined) { CollectionFreeFormDocumentView.setupKeyframes([d], NumCast(this.Document._currentFrame), false); const pvals = CollectionFreeFormDocumentView.getValues(d, NumCast(d.activeFrame, 1000)); // get filled in values (uses defaults when not value is specified) for position const vals = CollectionFreeFormDocumentView.getValues(d, NumCast(d.activeFrame, 1000), false); // get non-default values for everything else - vals.x = x + NumCast(pvals.x) - dropPos[0]; - vals.y = y + NumCast(pvals.y) - dropPos[1]; + vals.x = NumCast(pvals.x) + delta.x; + vals.y = NumCast(pvals.y) + delta.y; CollectionFreeFormDocumentView.setValues(NumCast(this.Document._currentFrame), d, vals); } else { - d.x = x + NumCast(d.x) - dropPos[0]; - d.y = y + NumCast(d.y) - dropPos[1]; + d.x = NumCast(d.x) + delta.x; + d.y = NumCast(d.y) + delta.y; } d._layout_modificationDate = new DateField(); const nd = [Doc.NativeWidth(layoutDoc), Doc.NativeHeight(layoutDoc)]; @@ -411,8 +390,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection } @undoBatch - internalAnchorAnnoDrop(e: Event, annoDragData: DragManager.AnchorAnnoDragData, xp: number, yp: number) { + internalAnchorAnnoDrop(e: Event, de: DragManager.DropEvent, annoDragData: DragManager.AnchorAnnoDragData) { const dropCreator = annoDragData.dropDocCreator; + const [xp, yp] = this.screenToFreeformContentsXf.transformPoint(de.x, de.y); annoDragData.dropDocCreator = (annotationOn: Doc | undefined) => { const dropDoc = dropCreator(annotationOn); if (dropDoc) { @@ -420,26 +400,27 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection dropDoc.y = yp - annoDragData.offset[1]; this.bringToFront(dropDoc); } - return dropDoc || this.rootDoc; + return dropDoc || this.Document; }; return true; } @undoBatch - internalLinkDrop(e: Event, de: DragManager.DropEvent, linkDragData: DragManager.LinkDragData, xp: number, yp: number) { - if (linkDragData.linkDragView.props.docViewPath().includes(this.props.docViewPath().lastElement())) { + internalLinkDrop(e: Event, de: DragManager.DropEvent, linkDragData: DragManager.LinkDragData) { + if (this.DocumentView?.() && linkDragData.linkDragView.containerViewPath?.().includes(this.DocumentView())) { + const [x, y] = this.screenToFreeformContentsXf.transformPoint(de.x, de.y); let added = false; // do nothing if link is dropped into any freeform view parent of dragged document const source = - !linkDragData.dragDocument.embedContainer || linkDragData.dragDocument.embedContainer !== this.rootDoc - ? Docs.Create.TextDocument('', { _width: 200, _height: 75, x: xp, y: yp, title: 'dropped annotation' }) + !linkDragData.dragDocument.embedContainer || linkDragData.dragDocument.embedContainer !== this.Document + ? Docs.Create.TextDocument('', { _width: 200, _height: 75, x, y, title: 'dropped annotation' }) : Docs.Create.FontIconDocument({ title: 'anchor', icon_label: '', followLinkToggle: true, icon: 'map-pin', - x: xp, - y: yp, + x, + y, backgroundColor: '#ACCEF7', layout_hideAllLinks: true, layout_hideLinkButton: true, @@ -448,7 +429,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection _xPadding: 0, onClick: FollowLinkScript(), }); - added = this.props.addDocument?.(source) ? true : false; + added = this._props.addDocument?.(source) ? true : false; de.complete.linkDocument = DocUtils.MakeLink(linkDragData.linkSourceGetAnchor(), source, { link_relationship: 'annotated by:annotation of' }); // TODODO this is where in text links get passed e.stopPropagation(); @@ -459,20 +440,32 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection } onInternalDrop = (e: Event, de: DragManager.DropEvent) => { - const [xp, yp] = this.getTransform().transformPoint(de.x, de.y); - if (de.complete.annoDragData?.dragDocument && super.onInternalDrop(e, de)) return this.internalAnchorAnnoDrop(e, de.complete.annoDragData, xp, yp); - else if (de.complete.linkDragData) return this.internalLinkDrop(e, de, de.complete.linkDragData, xp, yp); - else if (de.complete.docDragData?.droppedDocuments.length) return this.internalDocDrop(e, de, de.complete.docDragData, xp, yp); + if (de.complete.annoDragData?.dragDocument && super.onInternalDrop(e, de)) return this.internalAnchorAnnoDrop(e, de, de.complete.annoDragData); + else if (de.complete.linkDragData) return this.internalLinkDrop(e, de, de.complete.linkDragData); + else if (de.complete.docDragData?.droppedDocuments.length) return this.internalDocDrop(e, de, de.complete.docDragData); return false; }; - onExternalDrop = (e: React.DragEvent) => (([x, y]) => super.onExternalDrop(e, { x, y }))(this.getTransform().transformPoint(e.pageX, e.pageY)); - + onExternalDrop = (e: React.DragEvent) => (([x, y]) => super.onExternalDrop(e, { x, y }))(this.screenToFreeformContentsXf.transformPoint(e.pageX, e.pageY)); + + static overlapping(doc1: Doc, doc2: Doc, clusterDistance: number) { + const doc2Layout = Doc.Layout(doc2); + const doc1Layout = Doc.Layout(doc1); + const x2 = NumCast(doc2.x) - clusterDistance; + const y2 = NumCast(doc2.y) - clusterDistance; + const w2 = NumCast(doc2Layout._width) + clusterDistance; + const h2 = NumCast(doc2Layout._height) + clusterDistance; + const x = NumCast(doc1.x) - clusterDistance; + const y = NumCast(doc1.y) - clusterDistance; + const w = NumCast(doc1Layout._width) + clusterDistance; + const h = NumCast(doc1Layout._height) + clusterDistance; + return doc1.z === doc2.z && intersectRect({ left: x, top: y, width: w, height: h }, { left: x2, top: y2, width: w2, height: h2 }); + } pickCluster(probe: number[]) { return this.childLayoutPairs .map(pair => pair.layout) .reduce((cluster, cd) => { - const grouping = this.props.Document._freeform_useClusters ? NumCast(cd.layout_cluster, -1) : NumCast(cd.group, -1); + const grouping = this.Document._freeform_useClusters ? NumCast(cd.layout_cluster, -1) : NumCast(cd.group, -1); if (grouping !== -1) { const layoutDoc = Doc.Layout(cd); const cx = NumCast(cd.x) - this._clusterDistance / 2; @@ -485,16 +478,16 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection }, -1); } - tryDragCluster(e: PointerEvent | TouchEvent, cluster: number) { + tryDragCluster(e: PointerEvent, cluster: number) { if (cluster !== -1) { - const ptsParent = e instanceof PointerEvent ? e : e.targetTouches.item(0); + const ptsParent = e; if (ptsParent) { - const eles = this.childLayoutPairs.map(pair => pair.layout).filter(cd => (this.props.Document._freeform_useClusters ? NumCast(cd.layout_cluster) : NumCast(cd.group, -1)) === cluster); - const clusterDocs = eles.map(ele => DocumentManager.Instance.getDocumentView(ele, this.props.DocumentView?.())!); - const { left, top } = clusterDocs[0].getBounds() || { left: 0, top: 0 }; + const eles = this.childLayoutPairs.map(pair => pair.layout).filter(cd => (this.Document._freeform_useClusters ? NumCast(cd.layout_cluster) : NumCast(cd.group, -1)) === cluster); + const clusterDocs = eles.map(ele => DocumentManager.Instance.getDocumentView(ele, this.DocumentView?.())!); + const { left, top } = clusterDocs[0].getBounds || { left: 0, top: 0 }; const de = new DragManager.DocumentDragData(eles, e.ctrlKey || e.altKey ? 'embed' : undefined); - de.moveDocument = this.props.moveDocument; - de.offset = this.getTransform().transformDirection(ptsParent.clientX - left, ptsParent.clientY - top); + de.moveDocument = this._props.moveDocument; + de.offset = this.screenToFreeformContentsXf.transformDirection(ptsParent.clientX - left, ptsParent.clientY - top); DragManager.StartDocumentDrag( clusterDocs.map(v => v.ContentDiv!), de, @@ -511,7 +504,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection @action updateClusters(_freeform_useClusters: boolean) { - this.props.Document._freeform_useClusters = _freeform_useClusters; + this.Document._freeform_useClusters = _freeform_useClusters; this._clusterSets.length = 0; this.childLayoutPairs.map(pair => pair.layout).map(c => this.updateCluster(c)); } @@ -519,7 +512,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection @action updateClusterDocs(docs: Doc[]) { const childLayouts = this.childLayoutPairs.map(pair => pair.layout); - if (this.props.Document._freeform_useClusters) { + if (this.Document._freeform_useClusters) { const docFirst = docs[0]; docs.map(doc => this._clusterSets.map(set => Doc.IndexOf(doc, set) !== -1 && set.splice(Doc.IndexOf(doc, set), 1))); const preferredInd = NumCast(docFirst.layout_cluster); @@ -527,7 +520,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection docs.map(doc => this._clusterSets.map((set, i) => set.map(member => { - if (docFirst.layout_cluster === -1 && Doc.IndexOf(member, childLayouts) !== -1 && Doc.overlapping(doc, member, this._clusterDistance)) { + if (docFirst.layout_cluster === -1 && Doc.IndexOf(member, childLayouts) !== -1 && CollectionFreeFormView.overlapping(doc, member, this._clusterDistance)) { docFirst.layout_cluster = i; } }) @@ -560,15 +553,15 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection } @action - updateCluster(doc: Doc) { + updateCluster = (doc: Doc) => { const childLayouts = this.childLayoutPairs.map(pair => pair.layout); - if (this.props.Document._freeform_useClusters) { + if (this.Document._freeform_useClusters) { this._clusterSets.forEach(set => Doc.IndexOf(doc, set) !== -1 && set.splice(Doc.IndexOf(doc, set), 1)); const preferredInd = NumCast(doc.layout_cluster); doc.layout_cluster = -1; this._clusterSets.forEach((set, i) => set.forEach(member => { - if (doc.layout_cluster === -1 && Doc.IndexOf(member, childLayouts) !== -1 && Doc.overlapping(doc, member, this._clusterDistance)) { + if (doc.layout_cluster === -1 && Doc.IndexOf(member, childLayouts) !== -1 && CollectionFreeFormView.overlapping(doc, member, this._clusterDistance)) { doc.layout_cluster = i; } }) @@ -589,38 +582,39 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection this._clusterSets[doc.layout_cluster ?? 0].push(doc); } } - } + }; - getClusterColor = (doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string) => { - let styleProp = this.props.styleProvider?.(doc, props, property); // bcz: check 'props' used to be renderDepth + 1 - switch (property) { - case StyleProp.BackgroundColor: - const cluster = NumCast(doc?.layout_cluster); - if (this.Document._freeform_useClusters && doc?.type !== DocumentType.IMG) { - if (this._clusterSets.length <= cluster) { - setTimeout(() => doc && this.updateCluster(doc)); - } else { - // choose a cluster color from a palette - const colors = ['#da42429e', '#31ea318c', 'rgba(197, 87, 20, 0.55)', '#4a7ae2c4', 'rgba(216, 9, 255, 0.5)', '#ff7601', '#1dffff', 'yellow', 'rgba(27, 130, 49, 0.55)', 'rgba(0, 0, 0, 0.268)']; - styleProp = colors[cluster % colors.length]; - const set = this._clusterSets[cluster]?.filter(s => s.backgroundColor); - // override the cluster color with an explicitly set color on a non-background document. then override that with an explicitly set color on a background document - set?.map(s => (styleProp = StrCast(s.backgroundColor))); + clusterStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string) => { + let styleProp = this._props.styleProvider?.(doc, props, property); // bcz: check 'props' used to be renderDepth + 1 + if (doc && this.childDocList?.includes(doc)) + switch (property) { + case StyleProp.BackgroundColor: + const cluster = NumCast(doc?.layout_cluster); + if (this.Document._freeform_useClusters && doc?.type !== DocumentType.IMG) { + if (this._clusterSets.length <= cluster) { + setTimeout(() => doc && this.updateCluster(doc)); + } else { + // choose a cluster color from a palette + const colors = ['#da42429e', '#31ea318c', 'rgba(197, 87, 20, 0.55)', '#4a7ae2c4', 'rgba(216, 9, 255, 0.5)', '#ff7601', '#1dffff', 'yellow', 'rgba(27, 130, 49, 0.55)', 'rgba(0, 0, 0, 0.268)']; + styleProp = colors[cluster % colors.length]; + const set = this._clusterSets[cluster]?.filter(s => s.backgroundColor); + // override the cluster color with an explicitly set color on a non-background document. then override that with an explicitly set color on a background document + set?.map(s => (styleProp = StrCast(s.backgroundColor))); + } } - } - break; - case StyleProp.FillColor: - if (doc && this.Document._currentFrame !== undefined) { - return CollectionFreeFormDocumentView.getStringValues(doc, NumCast(this.Document._currentFrame))?.fillColor; - } - } + break; + case StyleProp.FillColor: + if (doc && this.Document._currentFrame !== undefined) { + return CollectionFreeFormDocumentView.getStringValues(doc, NumCast(this.Document._currentFrame))?.fillColor; + } + } return styleProp; }; trySelectCluster = (addToSel: boolean) => { if (this._hitCluster !== -1) { !addToSel && SelectionManager.DeselectAll(); - const eles = this.childLayoutPairs.map(pair => pair.layout).filter(cd => (this.props.Document._freeform_useClusters ? NumCast(cd.layout_cluster) : NumCast(cd.group, -1)) === this._hitCluster); + const eles = this.childLayoutPairs.map(pair => pair.layout).filter(cd => (this.Document._freeform_useClusters ? NumCast(cd.layout_cluster) : NumCast(cd.group, -1)) === this._hitCluster); this.selectDocuments(eles); return true; } @@ -628,40 +622,26 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection }; @action - onPenUp = (e: PointerEvent): void => { - if (!InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)) { - document.removeEventListener('pointerup', this.onPenUp); - const currentCol = DocListCast(this.rootDoc.currentInkDoc); - const rootDocList = DocListCast(this.rootDoc.data); - currentCol.push(rootDocList[rootDocList.length - 1]); - - this._batch?.end(); - } - }; - - @action onPointerDown = (e: React.PointerEvent): void => { this._downX = this._lastX = e.pageX; this._downY = this._lastY = e.pageY; this._downTime = Date.now(); - if (e.button === 0 && !e.altKey && !e.ctrlKey && this.props.isContentActive(true)) { - if ( - !this.props.Document._isGroup && // group freeforms don't pan when dragged -- instead let the event go through to allow the group itself to drag - !InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE) && - !InteractionUtils.IsType(e, InteractionUtils.PENTYPE) - ) { + const scrollMode = e.altKey ? (Doc.UserDoc().freeformScrollMode === freeformScrollMode.Pan ? freeformScrollMode.Zoom : freeformScrollMode.Pan) : Doc.UserDoc().freeformScrollMode; + if (e.button === 0 && (!(e.ctrlKey && !e.metaKey) || scrollMode !== freeformScrollMode.Pan) && this._props.isContentActive()) { + if (!this.Document.isGroup) { + // group freeforms don't pan when dragged -- instead let the event go through to allow the group itself to drag // prettier-ignore switch (Doc.ActiveTool) { - case InkTool.Highlighter: break; + case InkTool.Highlighter: break; case InkTool.Write: break; - case InkTool.Pen: break; // the GestureOverlay handles ink stroke input -- either as gestures, or drying as ink strokes that are added to document views + case InkTool.Pen: break; // the GestureOverlay handles ink stroke input -- either as gestures, or drying as ink strokes that are added to document views case InkTool.Eraser: this._batch = UndoManager.StartBatch('collectionErase'); setupMoveUpEvents(this, e, this.onEraserMove, this.onEraserUp, emptyFunction); break; case InkTool.None: - if (!(this.props.layoutEngine?.() || StrCast(this.layoutDoc._layoutEngine))) { - this._hitCluster = this.pickCluster(this.getTransform().transformPoint(e.clientX, e.clientY)); + if (!(this._props.layoutEngine?.() || StrCast(this.layoutDoc._layoutEngine))) { + this._hitCluster = this.pickCluster(this.screenToFreeformContentsXf.transformPoint(e.clientX, e.clientY)); setupMoveUpEvents(this, e, this.onPointerMove, emptyFunction, emptyFunction, this._hitCluster !== -1 ? true : false, false); } break; @@ -670,29 +650,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection } }; - @action - handle1PointerDown = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>) => { - // const myTouches = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true); - const pt = me.changedTouches[0]; - if (pt) { - this._hitCluster = this.pickCluster(this.getTransform().transformPoint(pt.clientX, pt.clientY)); - if (!e.shiftKey && !e.altKey && !e.ctrlKey && this.props.isContentActive(true)) { - this.removeMoveListeners(); - this.addMoveListeners(); - this.removeEndListeners(); - this.addEndListeners(); - if (Doc.ActiveTool === InkTool.None) { - this._lastX = pt.pageX; - this._lastY = pt.pageY; - e.preventDefault(); - e.stopPropagation(); - } else { - e.preventDefault(); - } - } - } - }; - public unprocessedDocs: Doc[] = []; public static collectionsWithUnprocessedInk = new Set<CollectionFreeFormView>(); @undoBatch @@ -705,25 +662,16 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection case GestureUtils.Gestures.Triangle: case GestureUtils.Gestures.Stroke: const points = ge.points; - const B = this.getTransform().transformBounds(ge.bounds.left, ge.bounds.top, ge.bounds.width, ge.bounds.height); - console.log(ge.bounds.left, ge.bounds.top, ge.bounds.width, ge.bounds.height); + const B = this.screenToFreeformContentsXf.transformBounds(ge.bounds.left, ge.bounds.top, ge.bounds.width, ge.bounds.height); + const inkWidth = ActiveInkWidth() * this.ScreenToLocalBoxXf().Scale; const inkDoc = Docs.Create.InkDocument( - ActiveInkColor(), - ActiveInkWidth() * this.props.ScreenToLocalTransform().Scale, - ActiveInkBezierApprox(), - ActiveFillColor(), - ActiveArrowStart(), - ActiveArrowEnd(), - ActiveDash(), points, - ActiveIsInkMask(), - { - title: ge.gesture.toString(), - x: B.x - (ActiveInkWidth() * this.props.ScreenToLocalTransform().Scale) / 2, - y: B.y - (ActiveInkWidth() * this.props.ScreenToLocalTransform().Scale) / 2, - _width: B.width + ActiveInkWidth() * this.props.ScreenToLocalTransform().Scale, - _height: B.height + ActiveInkWidth() * this.props.ScreenToLocalTransform().Scale, - } + { title: ge.gesture.toString(), + x: B.x - inkWidth / 2, + y: B.y - inkWidth / 2, + _width: B.width + inkWidth, + _height: B.height + inkWidth }, // prettier-ignore + inkWidth ); if (Doc.ActiveTool === InkTool.Write) { this.unprocessedDocs.push(inkDoc); @@ -733,69 +681,20 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection e.stopPropagation(); break; case GestureUtils.Gestures.Rectangle: - if (this._inkToTextStartX && this._inkToTextStartY) { - const end = this.getTransform().transformPoint(Math.max(...ge.points.map(p => p.X)), Math.max(...ge.points.map(p => p.Y))); - const setDocs = this.getActiveDocuments().filter(s => DocCast(s.proto)?.type === DocumentType.RTF && s.color); - const sets = setDocs.map(sd => Cast(sd.text, RichTextField)?.Text as string); - if (sets.length && sets[0]) { - this._wordPalette.clear(); - const colors = setDocs.map(sd => FieldValue(sd.color) as string); - sets.forEach((st: string, i: number) => st.split(',').forEach(word => this._wordPalette.set(word, colors[i]))); - } - const inks = this.getActiveDocuments().filter(doc => { - if (doc.type === 'ink') { - const l = NumCast(doc.x); - const r = l + doc[Width](); - const t = NumCast(doc.y); - const b = t + doc[Height](); - const pass = !(this._inkToTextStartX! > r || end[0] < l || this._inkToTextStartY! > b || end[1] < t); - return pass; - } - return false; - }); - // const inkFields = inks.map(i => Cast(i.data, InkField)); - const strokes: InkData[] = []; - inks.forEach(i => { - const d = Cast(i.data, InkField); - const x = NumCast(i.x); - const y = NumCast(i.y); - const left = Math.min(...(d?.inkData.map(pd => pd.X) ?? [0])); - const top = Math.min(...(d?.inkData.map(pd => pd.Y) ?? [0])); - if (d) { - strokes.push(d.inkData.map(pd => ({ X: pd.X + x - left, Y: pd.Y + y - top }))); - } + const strokes = this.getActiveDocuments() + .filter(doc => doc.type === DocumentType.INK) + .map(i => { + const d = Cast(i.stroke, InkField); + const x = NumCast(i.x) - Math.min(...(d?.inkData.map(pd => pd.X) ?? [0])); + const y = NumCast(i.y) - Math.min(...(d?.inkData.map(pd => pd.Y) ?? [0])); + return !d ? [] : d.inkData.map(pd => ({ X: x + pd.X, Y: y + pd.Y })); }); - CognitiveServices.Inking.Appliers.InterpretStrokes(strokes).then(results => { - const wordResults = results.filter((r: any) => r.category === 'inkWord'); - for (const word of wordResults) { - const indices: number[] = word.strokeIds; - indices.forEach(i => { - const otherInks: Doc[] = []; - indices.forEach(i2 => i2 !== i && otherInks.push(inks[i2])); - inks[i].relatedInks = new List<Doc>(otherInks); - const uniqueColors: string[] = []; - Array.from(this._wordPalette.values()).forEach(c => uniqueColors.indexOf(c) === -1 && uniqueColors.push(c)); - inks[i].alternativeColors = new List<string>(uniqueColors); - if (this._wordPalette.has(word.recognizedText.toLowerCase())) { - inks[i].color = this._wordPalette.get(word.recognizedText.toLowerCase()); - } else if (word.alternates) { - for (const alt of word.alternates) { - if (this._wordPalette.has(alt.recognizedString.toLowerCase())) { - inks[i].color = this._wordPalette.get(alt.recognizedString.toLowerCase()); - break; - } - } - } - }); - } - }); - this._inkToTextStartX = end[0]; - } + CognitiveServices.Inking.Appliers.InterpretStrokes(strokes).then(results => {}); break; case GestureUtils.Gestures.Text: if (ge.text) { - const B = this.getTransform().transformPoint(ge.points[0].X, ge.points[0].Y); + const B = this.screenToFreeformContentsXf.transformPoint(ge.points[0].X, ge.points[0].Y); this.addDocument(Docs.Create.TextDocument(ge.text, { title: ge.text, x: B[0], y: B[1] })); e.stopPropagation(); } @@ -803,7 +702,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection }; @action onEraserUp = (e: PointerEvent): void => { - this._deleteList.forEach(ink => ink.props.removeDocument?.(ink.rootDoc)); + this._deleteList.forEach(ink => ink._props.removeDocument?.(ink.Document)); this._deleteList = []; this._batch?.end(); }; @@ -813,12 +712,12 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection if (this._lightboxDoc) this._lightboxDoc = undefined; if (Utils.isClick(e.pageX, e.pageY, this._downX, this._downY, this._downTime)) { if (this.onBrowseClickHandler()) { - this.onBrowseClickHandler().script.run({ documentView: this.props.DocumentView?.(), clientX: e.clientX, clientY: e.clientY }); + this.onBrowseClickHandler().script.run({ documentView: this.DocumentView?.(), clientX: e.clientX, clientY: e.clientY }); e.stopPropagation(); e.preventDefault(); } else if (this.isContentActive() && e.shiftKey) { // reset zoom of freeform view to 1-to-1 on a shift + double click - this.zoomSmoothlyAboutPt(this.getTransform().transformPoint(e.clientX, e.clientY), 1); + this.zoomSmoothlyAboutPt(this.screenToFreeformContentsXf.transformPoint(e.clientX, e.clientY), 1); e.stopPropagation(); e.preventDefault(); } @@ -832,11 +731,14 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection }; @action - pan = (e: PointerEvent | React.Touch | { clientX: number; clientY: number }): void => { + pan = (e: PointerEvent): void => { + const ctrlKey = e.ctrlKey && !e.shiftKey; + const shiftKey = e.shiftKey && !e.ctrlKey; PresBox.Instance?.pauseAutoPres(); - this.props.DocumentView?.().clearViewTransition(); - const [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY); - this.setPan(NumCast(this.Document[this.panXFieldKey]) - dx, NumCast(this.Document[this.panYFieldKey]) - dy, 0, true); + this.DocumentView?.().clearViewTransition(); + const [dxi, dyi] = this.screenToFreeformContentsXf.transformDirection(e.clientX - this._lastX, e.clientY - this._lastY); + const { x: dx, y: dy } = Utils.rotPt(dxi, dyi, this.ScreenToLocalBoxXf().Rotate); + this.setPan(NumCast(this.Document[this.panXFieldKey]) - (ctrlKey ? 0 : dx), NumCast(this.Document[this.panYFieldKey]) - (shiftKey ? 0 : dy), 0, true); this._lastX = e.clientX; this._lastY = e.clientY; }; @@ -855,8 +757,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection this.getEraserIntersections({ X: currPoint.X - delta[0], Y: currPoint.Y - delta[1] }, currPoint).forEach(intersect => { if (!this._deleteList.includes(intersect.inkView)) { this._deleteList.push(intersect.inkView); - SetActiveInkWidth(StrCast(intersect.inkView.rootDoc.stroke_width?.toString()) || '1'); - SetActiveInkColor(StrCast(intersect.inkView.rootDoc.color?.toString()) || 'black'); + SetActiveInkWidth(StrCast(intersect.inkView.Document.stroke_width?.toString()) || '1'); + SetActiveInkColor(StrCast(intersect.inkView.Document.color?.toString()) || 'black'); // create a new curve by appending all curves of the current segment together in order to render a single new stroke. if (!e.shiftKey) { this._eraserLock++; @@ -882,20 +784,15 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection }; @action - onPointerMove = (e: PointerEvent): boolean => { - if (InteractionUtils.IsType(e, InteractionUtils.PENTYPE)) return false; - if (InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)) { - Doc.ActiveTool = InkTool.None; - } else { - if (this.tryDragCluster(e, this._hitCluster)) { - e.stopPropagation(); // we're moving a cluster, so stop propagation and return true to end panning and let the document drag take over - return true; - } - // pan the view if this is a regular collection, or it's an overlay and the overlay is zoomed (otherwise, there's nothing to pan) - if (!this.props.isAnnotationOverlay || 1 - NumCast(this.rootDoc._freeform_scale_min, 1) / this.getLocalTransform().inverse().Scale) { - this.pan(e); - e.stopPropagation(); // if we are actually panning, stop propagation -- this will preven things like the overlayView from dragging the document while we're panning - } + onPointerMove = (e: PointerEvent) => { + if (this.tryDragCluster(e, this._hitCluster)) { + e.stopPropagation(); // we're moving a cluster, so stop propagation and return true to end panning and let the document drag take over + return true; + } + // pan the view if this is a regular collection, or it's an overlay and the overlay is zoomed (otherwise, there's nothing to pan) + if (!this._props.isAnnotationOverlay || 1 - NumCast(this.layoutDoc._freeform_scale_min, 1) / this.zoomScaling()) { + this.pan(e); + e.stopPropagation(); // if we are actually panning, stop propagation -- this will preven things like the overlayView from dragging the document while we're panning } return false; }; @@ -909,9 +806,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection const eraserMax = { X: Math.max(lastPoint.X, currPoint.X), Y: Math.max(lastPoint.Y, currPoint.Y) }; return this.childDocs - .map(doc => DocumentManager.Instance.getDocumentView(doc, this.props.DocumentView?.())) + .map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.())) .filter(inkView => inkView?.ComponentView instanceof InkingStroke) - .map(inkView => ({ inkViewBounds: inkView!.getBounds(), inkStroke: inkView!.ComponentView as InkingStroke, inkView: inkView! })) + .map(inkView => ({ inkViewBounds: inkView!.getBounds, inkStroke: inkView!.ComponentView as InkingStroke, inkView: inkView! })) .filter( ({ inkViewBounds }) => inkViewBounds && // bounding box of eraser segment and ink stroke overlap @@ -1003,14 +900,14 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection this.childDocs .filter(doc => doc.type === DocumentType.INK && !doc.dontIntersect) .forEach(doc => { - const otherInk = DocumentManager.Instance.getDocumentView(doc, this.props.DocumentView?.())?.ComponentView as InkingStroke; + const otherInk = DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.())?.ComponentView as InkingStroke; const { inkData: otherInkData } = otherInk?.inkScaledData() ?? { inkData: [] }; const otherScreenPts = otherInkData.map(point => otherInk.ptToScreen(point)); const otherCtrlPts = otherScreenPts.map(spt => (ink.ComponentView as InkingStroke).ptFromScreen(spt)); for (var j = 0; j < otherCtrlPts.length - 3; j += 4) { const neighboringSegment = i === j || i === j - 4 || i === j + 4; // Ensuring that the curve intersected by the eraser is not checked for further ink intersections. - if (ink?.Document === otherInk.props.Document && neighboringSegment) continue; + if (ink?.Document === otherInk.Document && neighboringSegment) continue; const otherCurve = new Bezier(otherCtrlPts.slice(j, j + 4).map(p => ({ x: p.X, y: p.Y }))); const c0 = otherCurve.get(0); @@ -1033,60 +930,61 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection return tVals; }; - cleanUpInteractions = () => { - this.removeMoveListeners(); - this.removeEndListeners(); - }; - @action zoom = (pointX: number, pointY: number, deltaY: number): void => { - if (this.Document._isGroup || this.Document[(this.props.viewField ?? '_') + 'freeform_noZoom']) return; + if (this.Document.isGroup || this.Document[(this._props.viewField ?? '_') + 'freeform_noZoom']) return; let deltaScale = deltaY > 0 ? 1 / 1.05 : 1.05; if (deltaScale < 0) deltaScale = -deltaScale; - const [x, y] = this.getTransform().transformPoint(pointX, pointY); - const invTransform = this.getLocalTransform().inverse(); + const [x, y] = this.screenToFreeformContentsXf.transformPoint(pointX, pointY); + const invTransform = this.panZoomXf.inverse(); if (deltaScale * invTransform.Scale > 20) { deltaScale = 20 / invTransform.Scale; } - if (deltaScale < 1 && invTransform.Scale <= NumCast(this.rootDoc[this.scaleFieldKey + '_min'])) { + if (deltaScale < 1 && invTransform.Scale <= NumCast(this.Document[this.scaleFieldKey + '_min'])) { this.setPan(0, 0); return; } - if (deltaScale * invTransform.Scale > NumCast(this.rootDoc[this.scaleFieldKey + '_max'], Number.MAX_VALUE)) { - deltaScale = NumCast(this.rootDoc[this.scaleFieldKey + '_max'], 1) / invTransform.Scale; + if (deltaScale * invTransform.Scale > NumCast(this.Document[this.scaleFieldKey + '_max'], Number.MAX_VALUE)) { + deltaScale = NumCast(this.Document[this.scaleFieldKey + '_max'], 1) / invTransform.Scale; } - if (deltaScale * invTransform.Scale < NumCast(this.rootDoc[this.scaleFieldKey + '_min'], this.isAnnotationOverlay ? 1 : 0)) { - deltaScale = NumCast(this.rootDoc[this.scaleFieldKey + '_min'], 1) / invTransform.Scale; + if (deltaScale * invTransform.Scale < NumCast(this.Document[this.scaleFieldKey + '_min'], this.isAnnotationOverlay ? 1 : 0)) { + deltaScale = NumCast(this.Document[this.scaleFieldKey + '_min'], 1) / invTransform.Scale; } const localTransform = invTransform.scaleAbout(deltaScale, x, y); if (localTransform.Scale >= 0.05 || localTransform.Scale > this.zoomScaling()) { const safeScale = Math.min(Math.max(0.05, localTransform.Scale), 20); - this.props.Document[this.scaleFieldKey] = Math.abs(safeScale); - this.setPan(-localTransform.TranslateX / safeScale, (this.props.originTopLeft ? undefined : NumCast(this.props.Document.layout_scrollTop) * safeScale) || -localTransform.TranslateY / safeScale); + this.Document[this.scaleFieldKey] = Math.abs(safeScale); + this.setPan(-localTransform.TranslateX / safeScale, (this._props.originTopLeft ? undefined : NumCast(this.Document.layout_scrollTop) * safeScale) || -localTransform.TranslateY / safeScale); } }; @action onPointerWheel = (e: React.WheelEvent): void => { - if (this.Document._isGroup || !this.isContentActive()) return; // group style collections neither pan nor zoom + if (this.Document.isGroup || !this.isContentActive()) return; // group style collections neither pan nor zoom PresBox.Instance?.pauseAutoPres(); - if (this.layoutDoc._Transform || this.props.Document.treeView_OutlineMode === TreeViewType.outline) return; + if (this.layoutDoc._Transform || this.Document.treeView_OutlineMode === TreeViewType.outline) return; e.stopPropagation(); - const docHeight = NumCast(this.rootDoc[Doc.LayoutFieldKey(this.rootDoc) + '_nativeHeight'], this.nativeHeight); - const scrollable = NumCast(this.layoutDoc[this.scaleFieldKey], 1) === 1 && docHeight > this.props.PanelHeight() / this.nativeDimScaling + 1e-4; - switch (!e.ctrlKey ? Doc.UserDoc().freeformScrollMode : freeformScrollMode.Pan) { + const docHeight = NumCast(this.Document[Doc.LayoutFieldKey(this.Document) + '_nativeHeight'], this.nativeHeight); + const scrollable = this.isAnnotationOverlay && NumCast(this.layoutDoc[this.scaleFieldKey], 1) === 1 && docHeight > this._props.PanelHeight() / this.nativeDimScaling + 1e-4; + switch ( + !e.ctrlKey && !e.shiftKey && !e.metaKey && !e.altKey ?// + Doc.UserDoc().freeformScrollMode : // no modifiers, do assigned mode + e.ctrlKey && !CtrlKey? // otherwise, if ctrl key (pinch gesture) try to zoom else pan + freeformScrollMode.Zoom : freeformScrollMode.Pan // prettier-ignore + ) { case freeformScrollMode.Pan: - // if ctrl is selected then zoom - if (!e.ctrlKey && this.props.isContentActive(true)) { - this.scrollPan({ deltaX: -e.deltaX * this.getTransform().Scale, deltaY: e.shiftKey ? 0 : -e.deltaY * this.getTransform().Scale }); + if (((!e.metaKey && !e.altKey) || Doc.UserDoc().freeformScrollMode === freeformScrollMode.Zoom) && this._props.isContentActive()) { + const deltaX = e.shiftKey ? e.deltaX : e.ctrlKey ? 0 : e.deltaX; + const deltaY = e.shiftKey ? 0 : e.ctrlKey ? e.deltaY : e.deltaY; + this.scrollPan({ deltaX: -deltaX * this.screenToFreeformContentsXf.Scale, deltaY: e.shiftKey ? 0 : -deltaY * this.screenToFreeformContentsXf.Scale }); break; } default: case freeformScrollMode.Zoom: - if ((e.ctrlKey || !scrollable) && this.props.isContentActive(true)) { - this.zoom(e.clientX, e.clientY, Math.max(-1, Math.min(1, e.deltaY))); // if (!this.props.isAnnotationOverlay) // bcz: do we want to zoom in on images/videos/etc? - e.preventDefault(); + if ((e.ctrlKey || !scrollable) && this._props.isContentActive()) { + this.zoom(e.clientX, e.clientY, Math.max(-1, Math.min(1, e.deltaY))); // if (!this._props.isAnnotationOverlay) // bcz: do we want to zoom in on images/videos/etc? + // e.preventDefault(); } break; } @@ -1101,7 +999,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection // this section wraps the pan position, horizontally and/or vertically whenever the content is panned out of the viewing bounds const docs = this.childLayoutPairs.map(pair => pair.layout).filter(doc => doc instanceof Doc); const measuredDocs = docs - .map(doc => ({ pos: this.childPositionProviderUnmemoized(doc, ''), size: this.childSizeProviderUnmemoized(doc, '') })) + .map(doc => ({ pos: { x: NumCast(doc.x), y: NumCast(doc.y) }, size: { width: NumCast(doc._width), height: NumCast(doc._height) } })) .filter(({ pos, size }) => pos && size) .map(({ pos, size }) => ({ pos: pos!, size: size! })); if (measuredDocs.length) { @@ -1114,45 +1012,45 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection yrange: { min: Math.min(yrange.min, pos.y), max: Math.max(yrange.max, pos.y + (size.height || 0)) }, }), { - xrange: { min: this.props.originTopLeft ? 0 : Number.MAX_VALUE, max: -Number.MAX_VALUE }, - yrange: { min: this.props.originTopLeft ? 0 : Number.MAX_VALUE, max: -Number.MAX_VALUE }, + xrange: { min: this._props.originTopLeft ? 0 : Number.MAX_VALUE, max: -Number.MAX_VALUE }, + yrange: { min: this._props.originTopLeft ? 0 : Number.MAX_VALUE, max: -Number.MAX_VALUE }, } ); - - const panelWidMax = (this.props.PanelWidth() / this.zoomScaling()) * (this.props.originTopLeft ? 2 / this.nativeDimScaling : 1); - const panelWidMin = (this.props.PanelWidth() / this.zoomScaling()) * (this.props.originTopLeft ? 0 : 1); - const panelHgtMax = (this.props.PanelHeight() / this.zoomScaling()) * (this.props.originTopLeft ? 2 / this.nativeDimScaling : 1); - const panelHgtMin = (this.props.PanelHeight() / this.zoomScaling()) * (this.props.originTopLeft ? 0 : 1); - if (ranges.xrange.min >= panX + panelWidMax / 2) panX = ranges.xrange.max + (this.props.originTopLeft ? 0 : panelWidMax / 2); - else if (ranges.xrange.max <= panX - panelWidMin / 2) panX = ranges.xrange.min - (this.props.originTopLeft ? panelWidMax / 2 : panelWidMin / 2); - if (ranges.yrange.min >= panY + panelHgtMax / 2) panY = ranges.yrange.max + (this.props.originTopLeft ? 0 : panelHgtMax / 2); - else if (ranges.yrange.max <= panY - panelHgtMin / 2) panY = ranges.yrange.min - (this.props.originTopLeft ? panelHgtMax / 2 : panelHgtMin / 2); + const scaling = this.zoomScaling() * (this._props.NativeDimScaling?.() || 1); + const panelWidMax = (this._props.PanelWidth() / scaling) * (this._props.originTopLeft ? 2 / this.nativeDimScaling : 1); + const panelWidMin = (this._props.PanelWidth() / scaling) * (this._props.originTopLeft ? 0 : 1); + const panelHgtMax = (this._props.PanelHeight() / scaling) * (this._props.originTopLeft ? 2 / this.nativeDimScaling : 1); + const panelHgtMin = (this._props.PanelHeight() / scaling) * (this._props.originTopLeft ? 0 : 1); + if (ranges.xrange.min >= panX + panelWidMax / 2) panX = ranges.xrange.max + (this._props.originTopLeft ? 0 : panelWidMax / 2); + else if (ranges.xrange.max <= panX - panelWidMin / 2) panX = ranges.xrange.min - (this._props.originTopLeft ? panelWidMax / 2 : panelWidMin / 2); + if (ranges.yrange.min >= panY + panelHgtMax / 2) panY = ranges.yrange.max + (this._props.originTopLeft ? 0 : panelHgtMax / 2); + else if (ranges.yrange.max <= panY - panelHgtMin / 2) panY = ranges.yrange.min - (this._props.originTopLeft ? panelHgtMax / 2 : panelHgtMin / 2); } } if (!this.layoutDoc._lockedTransform || LightboxView.LightboxDoc) { this.setPanZoomTransition(panTime); - const minScale = NumCast(this.rootDoc._freeform_scale_min, 1); - const scale = 1 - minScale / this.getLocalTransform().inverse().Scale; - const minPanX = NumCast(this.rootDoc._freeform_panX_min, 0); - const minPanY = NumCast(this.rootDoc._freeform_panY_min, 0); - const maxPanX = NumCast(this.rootDoc._freeform_panX_max, this.nativeWidth); + const minScale = NumCast(this.dataDoc._freeform_scale_min, 1); + const scale = 1 - minScale / this.zoomScaling(); + const minPanX = NumCast(this.dataDoc._freeform_panX_min, 0); + const minPanY = NumCast(this.dataDoc._freeform_panY_min, 0); + const maxPanX = NumCast(this.dataDoc._freeform_panX_max, this.nativeWidth); const newPanX = Math.min(minPanX + scale * maxPanX, Math.max(minPanX, panX)); - const fitYscroll = (((this.nativeHeight / this.nativeWidth) * this.props.PanelWidth() - this.props.PanelHeight()) * this.props.ScreenToLocalTransform().Scale) / minScale; - const nativeHeight = (this.props.PanelHeight() / this.props.PanelWidth() / (this.nativeHeight / this.nativeWidth)) * this.nativeHeight; - const maxScrollTop = this.nativeHeight / this.props.ScreenToLocalTransform().Scale - this.props.PanelHeight(); + const fitYscroll = (((this.nativeHeight / this.nativeWidth) * this._props.PanelWidth() - this._props.PanelHeight()) * this.ScreenToLocalBoxXf().Scale) / minScale; + const nativeHeight = (this._props.PanelHeight() / this._props.PanelWidth() / (this.nativeHeight / this.nativeWidth)) * this.nativeHeight; + const maxScrollTop = this.nativeHeight / this.ScreenToLocalBoxXf().Scale - this._props.PanelHeight(); const maxPanY = minPanY + // minPanY + scrolling introduced by view scaling + scrolling introduced by layout_fitWidth - scale * NumCast(this.rootDoc._panY_max, nativeHeight) + - (!this.props.getScrollHeight?.() ? fitYscroll : 0); // when not zoomed, scrolling is handled via a scrollbar, not panning + scale * NumCast(this.dataDoc._panY_max, nativeHeight) + + (!this._props.getScrollHeight?.() ? fitYscroll : 0); // when not zoomed, scrolling is handled via a scrollbar, not panning let newPanY = Math.max(minPanY, Math.min(maxPanY, panY)); - if (false && NumCast(this.rootDoc.layout_scrollTop) && NumCast(this.rootDoc._freeform_scale, minScale) !== minScale) { - const relTop = NumCast(this.rootDoc.layout_scrollTop) / maxScrollTop; - this.rootDoc.layout_scrollTop = undefined; + if (false && NumCast(this.layoutDoc.layout_scrollTop) && NumCast(this.layoutDoc._freeform_scale, minScale) !== minScale) { + const relTop = NumCast(this.layoutDoc.layout_scrollTop) / maxScrollTop; + this.layoutDoc.layout_scrollTop = undefined; newPanY = minPanY + relTop * (maxPanY - minPanY); - } else if (fitYscroll > 2 && this.rootDoc.layout_scrollTop === undefined && NumCast(this.rootDoc._freeform_scale, minScale) === minScale) { + } else if (fitYscroll > 2 && this.layoutDoc.layout_scrollTop === undefined && NumCast(this.layoutDoc._freeform_scale, minScale) === minScale) { const maxPanY = minPanY + fitYscroll; const relTop = (panY - minPanY) / (maxPanY - minPanY); - setTimeout(() => (this.rootDoc.layout_scrollTop = relTop * maxScrollTop), 10); + setTimeout(() => (this.layoutDoc.layout_scrollTop = relTop * maxScrollTop), 10); newPanY = minPanY; } !this.Document._verticalScroll && (this.Document[this.panXFieldKey] = this.isAnnotationOverlay ? newPanX : panX); @@ -1162,11 +1060,11 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection @action nudge = (x: number, y: number, nudgeTime: number = 500) => { - const collectionDoc = this.props.docViewPath().lastElement().rootDoc; - if (collectionDoc?._type_collection !== CollectionViewType.Freeform || collectionDoc._freeform_ !== undefined) { + const collectionDoc = this.Document; + if (collectionDoc?._type_collection !== CollectionViewType.Freeform) { this.setPan( - NumCast(this.layoutDoc[this.panXFieldKey]) + ((this.props.PanelWidth() / 2) * x) / this.zoomScaling(), // nudge x,y as a function of panel dimension and scale - NumCast(this.layoutDoc[this.panYFieldKey]) + ((this.props.PanelHeight() / 2) * -y) / this.zoomScaling(), + NumCast(this.layoutDoc[this.panXFieldKey]) + ((this._props.PanelWidth() / 2) * x) / this.zoomScaling(), // nudge x,y as a function of panel dimension and scale + NumCast(this.layoutDoc[this.panYFieldKey]) + ((this._props.PanelHeight() / 2) * -y) / this.zoomScaling(), nudgeTime, true ); @@ -1211,13 +1109,13 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection @action zoomSmoothlyAboutPt(docpt: number[], scale: number, transitionTime = 500) { - if (this.Document._isGroup) return; + if (this.Document.isGroup) return; this.setPanZoomTransition(transitionTime); - const screenXY = this.getTransform().inverse().transformPoint(docpt[0], docpt[1]); + const screenXY = this.screenToFreeformContentsXf.inverse().transformPoint(docpt[0], docpt[1]); this.layoutDoc[this.scaleFieldKey] = scale; - const newScreenXY = this.getTransform().inverse().transformPoint(docpt[0], docpt[1]); + const newScreenXY = this.screenToFreeformContentsXf.inverse().transformPoint(docpt[0], docpt[1]); const scrDelta = { x: screenXY[0] - newScreenXY[0], y: screenXY[1] - newScreenXY[1] }; - const newpan = this.getTransform().transformDirection(scrDelta.x, scrDelta.y); + const newpan = this.screenToFreeformContentsXf.transformDirection(scrDelta.x, scrDelta.y); this.layoutDoc[this.panXFieldKey] = NumCast(this.layoutDoc[this.panXFieldKey]) - newpan[0]; this.layoutDoc[this.panYFieldKey] = NumCast(this.layoutDoc[this.panYFieldKey]) - newpan[1]; } @@ -1225,7 +1123,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection calculatePanIntoView = (doc: Doc, xf: Transform, scale?: number) => { const layoutdoc = Doc.Layout(doc); const pt = xf.transformPoint(NumCast(doc.x), NumCast(doc.y)); - const pt2 = xf.transformPoint(NumCast(doc.x) + layoutdoc[Width](), NumCast(doc.y) + layoutdoc[Height]()); + const pt2 = xf.transformPoint(NumCast(doc.x) + NumCast(layoutdoc._width), NumCast(doc.y) + NumCast(layoutdoc._height)); const bounds = { left: pt[0], right: pt2[0], top: pt[1], bot: pt2[1], width: pt2[0] - pt[0], height: pt2[1] - pt[1] }; if (scale !== undefined) { @@ -1233,20 +1131,20 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection const newScale = scale === 0 ? NumCast(this.layoutDoc[this.scaleFieldKey]) - : Math.min(maxZoom, (1 / (this.nativeDimScaling || 1)) * scale * Math.min(this.props.PanelWidth() / Math.abs(bounds.width), this.props.PanelHeight() / Math.abs(bounds.height))); + : Math.min(maxZoom, (1 / (this.nativeDimScaling || 1)) * scale * Math.min(this._props.PanelWidth() / Math.abs(bounds.width), this._props.PanelHeight() / Math.abs(bounds.height))); return { - panX: this.props.isAnnotationOverlay ? bounds.left - (Doc.NativeWidth(this.layoutDoc) / newScale - bounds.width) / 2 : (bounds.left + bounds.right) / 2, - panY: this.props.isAnnotationOverlay ? bounds.top - (Doc.NativeHeight(this.layoutDoc) / newScale - bounds.height) / 2 : (bounds.top + bounds.bot) / 2, + panX: this._props.isAnnotationOverlay ? bounds.left - (Doc.NativeWidth(this.layoutDoc) / newScale - bounds.width) / 2 : (bounds.left + bounds.right) / 2, + panY: this._props.isAnnotationOverlay ? bounds.top - (Doc.NativeHeight(this.layoutDoc) / newScale - bounds.height) / 2 : (bounds.top + bounds.bot) / 2, scale: newScale, }; } - const panelWidth = this.props.isAnnotationOverlay ? this.nativeWidth : this.props.PanelWidth(); - const panelHeight = this.props.isAnnotationOverlay ? this.nativeHeight : this.props.PanelHeight(); + const panelWidth = this._props.isAnnotationOverlay ? this.nativeWidth : this._props.PanelWidth(); + const panelHeight = this._props.isAnnotationOverlay ? this.nativeHeight : this._props.PanelHeight(); const pw = panelWidth / NumCast(this.layoutDoc._freeform_scale, 1); const ph = panelHeight / NumCast(this.layoutDoc._freeform_scale, 1); - const cx = NumCast(this.layoutDoc[this.panXFieldKey]) + (this.props.isAnnotationOverlay ? pw / 2 : 0); - const cy = NumCast(this.layoutDoc[this.panYFieldKey]) + (this.props.isAnnotationOverlay ? ph / 2 : 0); + const cx = NumCast(this.layoutDoc[this.panXFieldKey]) + (this._props.isAnnotationOverlay ? pw / 2 : 0); + const cy = NumCast(this.layoutDoc[this.panYFieldKey]) + (this._props.isAnnotationOverlay ? ph / 2 : 0); const screen = { left: cx - pw / 2, right: cx + pw / 2, top: cy - ph / 2, bot: cy + ph / 2 }; const maxYShift = Math.max(0, screen.bot - screen.top - (bounds.bot - bounds.top)); const phborder = bounds.top < screen.top || bounds.bot > screen.bot ? Math.min(ph / 10, maxYShift / 2) : 0; @@ -1254,115 +1152,117 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection return { panX: (bounds.left + bounds.right) / 2, panY: (bounds.top + bounds.bot) / 2, - scale: Math.min(this.props.PanelHeight() / (bounds.bot - bounds.top), this.props.PanelWidth() / (bounds.right - bounds.left)) / 1.1, + scale: Math.min(this._props.PanelHeight() / (bounds.bot - bounds.top), this._props.PanelWidth() / (bounds.right - bounds.left)) / 1.1, }; } return { - panX: (this.props.isAnnotationOverlay ? NumCast(this.layoutDoc[this.panXFieldKey]) : cx) + Math.min(0, bounds.left - pw / 10 - screen.left) + Math.max(0, bounds.right + pw / 10 - screen.right), - panY: (this.props.isAnnotationOverlay ? NumCast(this.layoutDoc[this.panYFieldKey]) : cy) + Math.min(0, bounds.top - phborder - screen.top) + Math.max(0, bounds.bot + phborder - screen.bot), + panX: (this._props.isAnnotationOverlay ? NumCast(this.layoutDoc[this.panXFieldKey]) : cx) + Math.min(0, bounds.left - pw / 10 - screen.left) + Math.max(0, bounds.right + pw / 10 - screen.right), + panY: (this._props.isAnnotationOverlay ? NumCast(this.layoutDoc[this.panYFieldKey]) : cy) + Math.min(0, bounds.top - phborder - screen.top) + Math.max(0, bounds.bot + phborder - screen.bot), }; }; - isContentActive = () => this.props.isContentActive(); + isContentActive = () => this._props.isContentActive(); @undoBatch - @action onKeyDown = (e: React.KeyboardEvent, fieldProps: FieldViewProps) => { - const docView = fieldProps.DocumentView?.(); - if (docView && (e.metaKey || e.ctrlKey || e.altKey || docView.rootDoc._createDocOnCR) && ['Tab', 'Enter'].includes(e.key)) { + if ((e.metaKey || e.ctrlKey || e.altKey || fieldProps.Document._createDocOnCR) && ['Tab', 'Enter'].includes(e.key)) { e.stopPropagation?.(); const below = !e.altKey && e.key !== 'Tab'; - const layout_fieldKey = StrCast(docView.LayoutFieldKey); - const newDoc = Doc.MakeCopy(docView.rootDoc, true); - const dataField = docView.rootDoc[Doc.LayoutFieldKey(newDoc)]; + const layout_fieldKey = StrCast(fieldProps.fieldKey); + const newDoc = Doc.MakeCopy(fieldProps.Document, true); + const dataField = fieldProps.Document[Doc.LayoutFieldKey(newDoc)]; newDoc[DocData][Doc.LayoutFieldKey(newDoc)] = dataField === undefined || Cast(dataField, listSpec(Doc), null)?.length !== undefined ? new List<Doc>([]) : undefined; - if (below) newDoc.y = NumCast(docView.rootDoc.y) + NumCast(docView.rootDoc._height) + 10; - else newDoc.x = NumCast(docView.rootDoc.x) + NumCast(docView.rootDoc._width) + 10; - if (layout_fieldKey !== 'layout' && docView.rootDoc[layout_fieldKey] instanceof Doc) { - newDoc[layout_fieldKey] = docView.rootDoc[layout_fieldKey]; + if (below) newDoc.y = NumCast(fieldProps.Document.y) + NumCast(fieldProps.Document._height) + 10; + else newDoc.x = NumCast(fieldProps.Document.x) + NumCast(fieldProps.Document._width) + 10; + if (layout_fieldKey !== 'layout' && fieldProps.Document[layout_fieldKey] instanceof Doc) { + newDoc[layout_fieldKey] = fieldProps.Document[layout_fieldKey]; } - Doc.GetProto(newDoc).text = undefined; - FormattedTextBox.SelectOnLoad = newDoc[Id]; + newDoc[DocData].text = undefined; + FormattedTextBox.SetSelectOnLoad(newDoc); return this.addDocument?.(newDoc); } }; @computed get childPointerEvents() { - const engine = this.props.layoutEngine?.() || StrCast(this.props.Document._layoutEngine); - const pointerEvents = DocumentView.Interacting + const engine = this._props.layoutEngine?.() || StrCast(this.Document._layoutEngine); + return SnappingManager.IsResizing ? 'none' - : this.props.childPointerEvents?.() ?? (this.props.viewDefDivClick || (engine === computePassLayout.name && !this.props.isSelected(true)) || this.isContentActive() === false ? 'none' : this.props.pointerEvents?.()); - return pointerEvents; + : this._props.childPointerEvents?.() ?? + (this._props.viewDefDivClick || // + (engine === computePassLayout.name && !this._props.isSelected()) || + this.isContentActive() === false + ? 'none' + : this._props.pointerEvents?.()); } - childPointerEventsFunc = () => this.childPointerEvents; - childContentsActive = () => (this.props.childContentsActive ?? this.isContentActive() === false ? returnFalse : emptyFunction)(); + + @observable _childPointerEvents: 'none' | 'all' | 'visiblepainted' | undefined = undefined; + childPointerEventsFunc = () => this._childPointerEvents; + childContentsActive = () => (this._props.childContentsActive ?? this.isContentActive() === false ? returnFalse : emptyFunction)(); getChildDocView(entry: PoolData) { const childLayout = entry.pair.layout; const childData = entry.pair.data; return ( - <CollectionFreeFormDocumentView + <CollectionFreeFormDocumentViewWrapper + {...OmitKeys(entry, ['replica', 'pair']).omit} key={childLayout[Id] + (entry.replica || '')} - DataDoc={childData} Document={childLayout} - isGroupActive={this.props.isGroupActive} - renderDepth={this.props.renderDepth + 1} - replica={entry.replica} + containerViewPath={this.DocumentView?.().docViewPath} + styleProvider={this.clusterStyleProvider} + TemplateDataDocument={childData} + dragStarting={this.dragStarting} + dragEnding={this.dragEnding} + isGroupActive={this._props.isGroupActive} + renderDepth={this._props.renderDepth + 1} hideDecorations={BoolCast(childLayout._layout_isSvg && childLayout.type === DocumentType.LINK)} suppressSetHeight={this.layoutEngine ? true : false} - renderCutoffProvider={this.renderCutoffProvider} + RenderCutoffProvider={this.renderCutoffProvider} CollectionFreeFormView={this} - LayoutTemplate={childLayout.z ? undefined : this.props.childLayoutTemplate} - LayoutTemplateString={childLayout.z ? undefined : this.props.childLayoutString} + LayoutTemplate={childLayout.z ? undefined : this._props.childLayoutTemplate} + LayoutTemplateString={childLayout.z ? undefined : this._props.childLayoutString} rootSelected={childData ? this.rootSelected : returnFalse} - waitForDoubleClickToClick={this.props.waitForDoubleClickToClick} - onClick={this.onChildClickHandler} + waitForDoubleClickToClick={this._props.waitForDoubleClickToClick} + onClickScript={this.onChildClickHandler} onKey={this.onKeyDown} - onDoubleClick={this.onChildDoubleClickHandler} - onBrowseClick={this.onBrowseClickHandler} - ScreenToLocalTransform={childLayout.z ? this.getContainerTransform : this.getTransform} + onDoubleClickScript={this.onChildDoubleClickHandler} + onBrowseClickScript={this.onBrowseClickHandler} + ScreenToLocalTransform={childLayout.z ? this.ScreenToLocalBoxXf : this.ScreenToContentsXf} PanelWidth={childLayout[Width]} PanelHeight={childLayout[Height]} childFilters={this.childDocFilters} childFiltersByRanges={this.childDocRangeFilters} searchFilterDocs={this.searchFilterDocs} - isDocumentActive={childLayout.pointerEvents === 'none' ? returnFalse : this.props.childDocumentsActive?.() ? this.props.isDocumentActive : this.isContentActive} + isDocumentActive={childLayout.pointerEvents === 'none' ? returnFalse : this._props.childDocumentsActive?.() ? this._props.isDocumentActive : this.isContentActive} isContentActive={this.childContentsActive} - focus={this.Document._isGroup ? this.groupFocus : this.isAnnotationOverlay ? this.props.focus : this.focus} + focus={this.Document.isGroup ? this.groupFocus : this.isAnnotationOverlay ? this._props.focus : this.focus} addDocTab={this.addDocTab} - addDocument={this.props.addDocument} - removeDocument={this.props.removeDocument} - moveDocument={this.props.moveDocument} - pinToPres={this.props.pinToPres} - whenChildContentsActiveChanged={this.props.whenChildContentsActiveChanged} - docViewPath={this.props.docViewPath} - styleProvider={this.getClusterColor} - dragAction={(this.rootDoc.childDragAction ?? this.props.childDragAction) as dropActionType} - dataProvider={this.childDataProvider} - sizeProvider={this.childSizeProvider} - bringToFront={this.bringToFront} - layout_showTitle={this.props.childlayout_showTitle} - dontRegisterView={this.props.dontRenderDocuments || this.props.dontRegisterView} + addDocument={this._props.addDocument} + removeDocument={this._props.removeDocument} + moveDocument={this._props.moveDocument} + pinToPres={this._props.pinToPres} + whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged} + dragAction={(this.Document.childDragAction ?? this._props.childDragAction) as dropActionType} + layout_showTitle={this._props.childlayout_showTitle} + dontRegisterView={this._props.dontRegisterView} pointerEvents={this.childPointerEventsFunc} - //fitContentsToBox={this.props.fitContentsToBox || BoolCast(this.props.treeView_FreezeChildDimensions)} // bcz: check this /> ); } addDocTab = action((doc: Doc, where: OpenWhere) => { - if (this.props.isAnnotationOverlay) return this.props.addDocTab(doc, where); + if (this._props.isAnnotationOverlay) return this._props.addDocTab(doc, where); switch (where) { case OpenWhere.inParent: - return this.props.addDocument?.(doc) || false; + return this._props.addDocument?.(doc) || false; case OpenWhere.inParentFromScreen: const docContext = DocCast((doc instanceof Doc ? doc : doc?.[0])?.embedContainer); return ( (this.addDocument?.( (doc instanceof Doc ? [doc] : doc).map(doc => { - const pt = this.getTransform().transformPoint(NumCast(doc.x), NumCast(doc.y)); + const pt = this.screenToFreeformContentsXf.transformPoint(NumCast(doc.x), NumCast(doc.y)); doc.x = pt[0]; doc.y = pt[1]; return doc; }) ) && - (!docContext || this.props.removeDocument?.(docContext))) || + (!docContext || this._props.removeDocument?.(docContext))) || false ); case undefined: @@ -1376,21 +1276,21 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection return true; } } - return this.props.addDocTab(doc, where); + return this._props.addDocTab(doc, where); }); - @observable _lightboxDoc: Opt<Doc>; + @observable _lightboxDoc: Opt<Doc> = undefined; - getCalculatedPositions(params: { pair: { layout: Doc; data?: Doc }; index: number; collection: Doc }): PoolData { + getCalculatedPositions(pair: { layout: Doc; data?: Doc }): PoolData { const random = (min: number, max: number, x: number, y: number) => /* min should not be equal to max */ min + (((Math.abs(x * y) * 9301 + 49297) % 233280) / 233280) * (max - min); - const childDoc = params.pair.layout; + const childDoc = pair.layout; const childDocLayout = Doc.Layout(childDoc); const layoutFrameNumber = Cast(this.Document._currentFrame, 'number'); // frame number that container is at which determines layout frame values const contentFrameNumber = Cast(childDocLayout._currentFrame, 'number', layoutFrameNumber ?? null); // frame number that content is at which determines what content is displayed const { z, zIndex } = childDoc; const { backgroundColor, color } = contentFrameNumber === undefined ? { backgroundColor: undefined, color: undefined } : CollectionFreeFormDocumentView.getStringValues(childDoc, contentFrameNumber); - const { x, y, _width, _height, opacity, _rotation } = - layoutFrameNumber === undefined - ? { _width: Cast(childDocLayout._width, 'number'), _height: Cast(childDocLayout._height, 'number'), _rotation: Cast(childDocLayout._rotation, 'number'), x: childDoc.x, y: childDoc.y, opacity: this.props.childOpacity?.() } + const { x, y, autoDim, _width, _height, opacity, _rotation } = + layoutFrameNumber === undefined // -1 for width/height means width/height should be PanelWidth/PanelHeight (prevents collectionfreeformdocumentview width/height from getting out of synch with panelWIdth/Height which causes detailView to re-render and lose focus because HTMLtag scaling gets set to a bad intermediate value) + ? { autoDim: 1, _width: Cast(childDoc._width, 'number'), _height: Cast(childDoc._height, 'number'), _rotation: Cast(childDocLayout._rotation, 'number'), x: childDoc.x, y: childDoc.y, opacity: this._props.childOpacity?.() } : CollectionFreeFormDocumentView.getValues(childDoc, layoutFrameNumber); // prettier-ignore const rotation = Cast(_rotation,'number', @@ -1400,22 +1300,23 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection x: Number.isNaN(NumCast(x)) ? 0 : NumCast(x), y: Number.isNaN(NumCast(y)) ? 0 : NumCast(y), z: Cast(z, 'number'), - rotation: rotation, - color: Cast(color, 'string') ? StrCast(color) : this.props.styleProvider?.(childDoc, this.props, StyleProp.Color), - backgroundColor: Cast(backgroundColor, 'string') ? StrCast(backgroundColor) : this.getClusterColor(childDoc, this.props, StyleProp.BackgroundColor), - opacity: !_width ? 0 : this._keyframeEditing ? 1 : Cast(opacity, 'number') ?? this.props.styleProvider?.(childDoc, this.props, StyleProp.Opacity), + autoDim, + rotation, + color: Cast(color, 'string') ? StrCast(color) : this._props.styleProvider?.(childDoc, this._props, StyleProp.Color), + backgroundColor: Cast(backgroundColor, 'string') ? StrCast(backgroundColor) : this.clusterStyleProvider(childDoc, this._props, StyleProp.BackgroundColor), + opacity: !_width ? 0 : this._keyframeEditing ? 1 : Cast(opacity, 'number') ?? this._props.styleProvider?.(childDoc, this._props, StyleProp.Opacity), zIndex: Cast(zIndex, 'number'), width: _width, height: _height, transition: StrCast(childDocLayout.dataTransition), - pair: params.pair, pointerEvents: Cast(childDoc.pointerEvents, 'string', null), + pair, replica: '', }; } onViewDefDivClick = (e: React.MouseEvent, payload: any) => { - (this.props.viewDefDivClick || ScriptCast(this.props.Document.onViewDefDivClick))?.script.run({ this: this.props.Document, payload }); + (this._props.viewDefDivClick || ScriptCast(this.Document.onViewDefDivClick))?.script.run({ this: this.Document, payload }); e.stopPropagation(); }; @@ -1466,34 +1367,20 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection }.bind(this) ); - childPositionProviderUnmemoized = (doc: Doc, replica: string) => this._layoutPoolData.get(doc[Id] + (replica || '')); - childDataProvider = computedFn( - function childDataProvider(this: any, doc: Doc, replica: string) { - return this.childPositionProviderUnmemoized(doc, replica); - }.bind(this) - ); - - childSizeProviderUnmemoized = (doc: Doc, replica: string) => this._layoutSizeData.get(doc[Id] + (replica || '')); - childSizeProvider = computedFn( - function childSizeProvider(this: any, doc: Doc, replica: string) { - return this.childSizeProviderUnmemoized(doc, replica); - }.bind(this) - ); - doEngineLayout( poolData: Map<string, PoolData>, engine: (poolData: Map<string, PoolData>, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[], engineProps: any) => ViewDefResult[] ) { - return engine(poolData, this.props.Document, this.childLayoutPairs, [this.props.PanelWidth(), this.props.PanelHeight()], this.viewDefsToJSX, this.props.engineProps); + return engine(poolData, this.Document, this.childLayoutPairs, [this._props.PanelWidth(), this._props.PanelHeight()], this.viewDefsToJSX, this._props.engineProps); } doFreeformLayout(poolData: Map<string, PoolData>) { - this.childLayoutPairs.filter(pair => this.isCurrent(pair.layout)).map((pair, i) => poolData.set(pair.layout[Id], this.getCalculatedPositions({ pair, index: i, collection: this.Document }))); + this.childLayoutPairs.filter(pair => this.isCurrent(pair.layout)).map((pair, i) => poolData.set(pair.layout[Id], this.getCalculatedPositions(pair))); return [] as ViewDefResult[]; } @computed get layoutEngine() { - return this.props.layoutEngine?.() || StrCast(this.layoutDoc._layoutEngine); + return this._props.layoutEngine?.() || StrCast(this.layoutDoc._layoutEngine); } @computed get doInternalLayoutComputation() { TraceMobx(); @@ -1508,94 +1395,58 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection return { newPool, computedElementData: this.doFreeformLayout(newPool) }; } - @observable _numLoaded = 1; - _lastPoolSize = 0; - get doLayoutComputation() { - const { newPool, computedElementData } = this.doInternalLayoutComputation; - const array = Array.from(newPool.entries()); - let somethingChanged = array.length !== this._lastPoolSize; - this._lastPoolSize = array.length; - runInAction(() => { - for (const entry of array) { - const lastPos = this._cachedPool.get(entry[0]); // last computed pos - const newPos = entry[1]; - if ( - !lastPos || - newPos.color !== lastPos.color || - newPos.backgroundColor !== lastPos.backgroundColor || - newPos.opacity !== lastPos.opacity || - newPos.x !== lastPos.x || - newPos.y !== lastPos.y || - newPos.z !== lastPos.z || - newPos.rotation !== lastPos.rotation || - newPos.zIndex !== lastPos.zIndex || - newPos.transition !== lastPos.transition || - newPos.pointerEvents !== lastPos.pointerEvents - ) { - this._layoutPoolData.set(entry[0], newPos); - somethingChanged = true; - } - if (!lastPos || newPos.height !== lastPos.height || newPos.width !== lastPos.width) { - this._layoutSizeData.set(entry[0], { width: newPos.width, height: newPos.height }); - somethingChanged = true; - } - } - }); - if (!somethingChanged) return undefined; - this._cachedPool.clear(); - Array.from(newPool.entries()).forEach(k => this._cachedPool.set(k[0], k[1])); + @action + doLayoutComputation = (newPool: Map<string, PoolData>, computedElementData: ViewDefResult[]) => { const elements = computedElementData.slice(); Array.from(newPool.entries()) .filter(entry => this.isCurrent(entry[1].pair.layout)) - .forEach((entry, i) => { - const childData: ViewDefBounds = this.childDataProvider(entry[1].pair.layout, entry[1].replica); - const childSize = this.childSizeProvider(entry[1].pair.layout, entry[1].replica); + .forEach(entry => elements.push({ ele: this.getChildDocView(entry[1]), - bounds: childData.opacity === 0 ? { ...childData, width: 0, height: 0 } : { ...childData, width: childSize.width, height: childSize.height }, + bounds: (entry[1].opacity === 0 ? { ...entry[1], width: 0, height: 0 } : { ...entry[1] }) as any, inkMask: BoolCast(entry[1].pair.layout.stroke_isInkMask) ? NumCast(entry[1].pair.layout.opacity, 1) : -1, - }); - }); + }) + ); this.Document._freeform_useClusters && !this._clusterSets.length && this.childDocs.length && this.updateClusters(true); return elements; - } + }; getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => { // create an anchor that saves information about the current state of the freeform view (pan, zoom, view type) - const anchor = Docs.Create.ConfigDocument({ title: 'ViewSpec - ' + StrCast(this.layoutDoc._type_collection), layout_unrendered: true, presentation_transition: 500, annotationOn: this.rootDoc }); - PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), pannable: !this.Document._isGroup, type_collection: true, filters: true } }, this.rootDoc); + const anchor = Docs.Create.ConfigDocument({ title: 'ViewSpec - ' + StrCast(this.layoutDoc._type_collection), layout_unrendered: true, presentation_transition: 500, annotationOn: this.Document }); + PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), pannable: !this.Document.isGroup, type_collection: true, filters: true } }, this.Document); if (addAsAnnotation) { - if (Cast(this.dataDoc[this.props.fieldKey + '_annotations'], listSpec(Doc), null) !== undefined) { - Cast(this.dataDoc[this.props.fieldKey + '_annotations'], listSpec(Doc), []).push(anchor); + if (Cast(this.dataDoc[this._props.fieldKey + '_annotations'], listSpec(Doc), null) !== undefined) { + Cast(this.dataDoc[this._props.fieldKey + '_annotations'], listSpec(Doc), []).push(anchor); } else { - this.dataDoc[this.props.fieldKey + '_annotations'] = new List<Doc>([anchor]); + this.dataDoc[this._props.fieldKey + '_annotations'] = new List<Doc>([anchor]); } } return anchor; }; - @action + @action closeInfo = () => (this.Document._hideInfo = true); + infoUI = () => (this.Document._hideInfo || this.Document.annotationOn || this._props.renderDepth ? null : <CollectionFreeFormInfoUI Document={this.Document} Freeform={this} close={this.closeInfo} />); + componentDidMount() { - this.printDoc(this.rootDoc); - this.props.setContentView?.(this); + this._props.setContentViewBox?.(this); super.componentDidMount?.(); - this.props.setBrushViewer?.(this.brushView); setTimeout( action(() => { this._firstRender = false; this._disposers.groupBounds = reaction( () => { - if (this.Document._isGroup && this.childDocs.length === this.childDocList?.length) { - const clist = this.childDocs.map(cd => ({ x: NumCast(cd.x), y: NumCast(cd.y), width: cd[Width](), height: cd[Height]() })); + if (this.Document.isGroup && this.childDocs.length === this.childDocList?.length) { + const clist = this.childDocs.map(cd => ({ x: NumCast(cd.x), y: NumCast(cd.y), width: NumCast(cd._width), height: NumCast(cd._height) })); return aggregateBounds(clist, NumCast(this.layoutDoc._xPadding), NumCast(this.layoutDoc._yPadding)); } return undefined; }, cbounds => { if (cbounds) { - const c = [NumCast(this.layoutDoc.x) + this.layoutDoc[Width]() / 2, NumCast(this.layoutDoc.y) + this.layoutDoc[Height]() / 2]; + const c = [NumCast(this.layoutDoc.x) + NumCast(this.layoutDoc._width) / 2, NumCast(this.layoutDoc.y) + NumCast(this.layoutDoc._height) / 2]; const p = [NumCast(this.layoutDoc[this.panXFieldKey]), NumCast(this.layoutDoc[this.panYFieldKey])]; const pbounds = { x: cbounds.x - p[0] + c[0], @@ -1616,20 +1467,24 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection { fireImmediately: true } ); - this._disposers.layoutComputation = reaction( - () => this.doLayoutComputation, - elements => { - if (elements !== undefined) this._layoutElements = elements || []; - }, - { fireImmediately: true, name: 'doLayout' } + this._disposers.pointerevents = reaction( + () => this.childPointerEvents, + pointerevents => (this._childPointerEvents = pointerevents as any), + { fireImmediately: true } ); this._disposers.active = reaction( () => this.isContentActive(), // if autoreset is on, then whenever the view is selected, it will be restored to it default pan/zoom positions - active => !SnappingManager.GetIsDragging() && this.rootDoc[this.autoResetFieldKey] && active && this.resetView() + active => !SnappingManager.IsDragging && this.dataDoc[this.autoResetFieldKey] && active && this.resetView() ); }) ); + this._disposers.layoutElements = reaction( + // layoutElements can't be a computed value because doLayoutComputation() is an action that has side effect of updating clusters + () => this.doInternalLayoutComputation, + computation => (this._layoutElements = this.doLayoutComputation(computation.newPool, computation.computedElementData)), + { fireImmediately: true } + ); } static replaceCanvases(oldDiv: HTMLElement, newDiv: HTMLElement) { @@ -1667,19 +1522,19 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection updateIcon = () => CollectionFreeFormView.UpdateIcon( this.layoutDoc[Id] + '-icon' + new Date().getTime(), - this.props.docViewPath().lastElement().ContentDiv!, - this.layoutDoc[Width](), - this.layoutDoc[Height](), - this.props.PanelWidth(), - this.props.PanelHeight(), + this.DocumentView?.().ContentDiv!, + NumCast(this.layoutDoc._width), + NumCast(this.layoutDoc._height), + this._props.PanelWidth(), + this._props.PanelHeight(), 0, 1, false, '', (iconFile, nativeWidth, nativeHeight) => { this.dataDoc.icon = new ImageField(iconFile); - this.dataDoc['icon_nativeWidth'] = nativeWidth; - this.dataDoc['icon_nativeHeight'] = nativeHeight; + this.dataDoc.icon_nativeWidth = nativeWidth; + this.dataDoc.icon_nativeHeight = nativeHeight; } ); @@ -1714,8 +1569,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection } componentWillUnmount() { + this.dataDoc[this.autoResetFieldKey] && this.resetView(); Object.values(this._disposers).forEach(disposer => disposer?.()); - this._marqueeRef?.removeEventListener('dashDragAutoScroll', this.onDragAutoScroll as any); } @action @@ -1723,35 +1578,15 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection // super.setCursorPosition(this.getTransform().transformPoint(e.clientX, e.clientY)); }; - @action - onDragAutoScroll = (e: CustomEvent<React.DragEvent>) => { - if ((e as any).handlePan || this.props.isAnnotationOverlay) return; - (e as any).handlePan = true; - - if (!this.layoutDoc._freeform_noAutoPan && !this.props.renderDepth && this._marqueeRef) { - const dragX = e.detail.clientX; - const dragY = e.detail.clientY; - const bounds = this._marqueeRef?.getBoundingClientRect(); - - const deltaX = dragX - bounds.left < 25 ? -(25 + (bounds.left - dragX)) : bounds.right - dragX < 25 ? 25 - (bounds.right - dragX) : 0; - const deltaY = dragY - bounds.top < 25 ? -(25 + (bounds.top - dragY)) : bounds.bottom - dragY < 25 ? 25 - (bounds.bottom - dragY) : 0; - if (deltaX !== 0 || deltaY !== 0) { - this.Document[this.panYFieldKey] = NumCast(this.Document[this.panYFieldKey]) + deltaY / 2; - this.Document[this.panXFieldKey] = NumCast(this.Document[this.panXFieldKey]) + deltaX / 2; - } - } - e.stopPropagation(); - }; - @undoBatch promoteCollection = () => { const childDocs = this.childDocs.slice(); childDocs.forEach(doc => { - const scr = this.getTransform().inverse().transformPoint(NumCast(doc.x), NumCast(doc.y)); + const scr = this.screenToFreeformContentsXf.inverse().transformPoint(NumCast(doc.x), NumCast(doc.y)); doc.x = scr?.[0]; doc.y = scr?.[1]; }); - this.props.addDocTab(childDocs as any as Doc, OpenWhere.inParentFromScreen); + this._props.addDocTab(childDocs as any as Doc, OpenWhere.inParentFromScreen); }; @undoBatch @@ -1775,9 +1610,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection /// @undoBatch resetView = () => { - this.rootDoc[this.panXFieldKey] = NumCast(this.rootDoc[this.panXFieldKey + '_reset']); - this.props.Document[this.panYFieldKey] = NumCast(this.rootDoc[this.panYFieldKey + '_reset']); - this.rootDoc[this.scaleFieldKey] = NumCast(this.rootDoc[this.scaleFieldKey + '_reset'], 1); + this.layoutDoc[this.panXFieldKey] = NumCast(this.dataDoc[this.panXFieldKey + '_reset']); + this.layoutDoc[this.panYFieldKey] = NumCast(this.dataDoc[this.panYFieldKey + '_reset']); + this.layoutDoc[this.scaleFieldKey] = NumCast(this.dataDoc[this.scaleFieldKey + '_reset'], 1); }; /// /// resetView restores a freeform collection to unit scale and centered at (0,0) UNLESS @@ -1785,11 +1620,11 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection /// @undoBatch toggleResetView = () => { - this.rootDoc[this.autoResetFieldKey] = !this.rootDoc[this.autoResetFieldKey]; - if (this.rootDoc[this.autoResetFieldKey]) { - this.rootDoc[this.panXFieldKey + '_reset'] = this.rootDoc[this.panXFieldKey]; - this.rootDoc[this.panYFieldKey + '_reset'] = this.rootDoc[this.panYFieldKey]; - this.rootDoc[this.scaleFieldKey + '_reset'] = this.rootDoc[this.scaleFieldKey]; + this.dataDoc[this.autoResetFieldKey] = !this.dataDoc[this.autoResetFieldKey]; + if (this.dataDoc[this.autoResetFieldKey]) { + this.dataDoc[this.panXFieldKey + '_reset'] = this.dataDoc[this.panXFieldKey]; + this.dataDoc[this.panYFieldKey + '_reset'] = this.dataDoc[this.panYFieldKey]; + this.dataDoc[this.scaleFieldKey + '_reset'] = this.dataDoc[this.scaleFieldKey]; } }; @@ -1863,46 +1698,40 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection }; onContextMenu = (e: React.MouseEvent) => { - if (this.props.isAnnotationOverlay || !ContextMenu.Instance) return; + if (this._props.isAnnotationOverlay || !ContextMenu.Instance) return; const appearance = ContextMenu.Instance.findByDescription('Appearance...'); const appearanceItems = appearance && 'subitems' in appearance ? appearance.subitems : []; - !this.props.Document._isGroup && appearanceItems.push({ description: 'Reset View', event: this.resetView, icon: 'compress-arrows-alt' }); - !this.props.Document._isGroup && appearanceItems.push({ description: 'Toggle Auto Reset View', event: this.toggleResetView, icon: 'compress-arrows-alt' }); + !this.Document.isGroup && appearanceItems.push({ description: 'Reset View', event: this.resetView, icon: 'compress-arrows-alt' }); + !this.Document.isGroup && appearanceItems.push({ description: 'Toggle Auto Reset View', event: this.toggleResetView, icon: 'compress-arrows-alt' }); !Doc.noviceMode && appearanceItems.push({ description: 'Toggle auto arrange', event: () => (this.layoutDoc._autoArrange = !this.layoutDoc._autoArrange), icon: 'compress-arrows-alt', }); - if (this.props.setContentView === emptyFunction) { + if (this._props.setContentViewBox === emptyFunction) { !appearance && ContextMenu.Instance.addItem({ description: 'Appearance...', subitems: appearanceItems, icon: 'eye' }); return; } !Doc.noviceMode && Doc.UserDoc().defaultTextLayout && appearanceItems.push({ description: 'Reset default note style', event: () => (Doc.UserDoc().defaultTextLayout = undefined), icon: 'eye' }); - appearanceItems.push({ description: `Pin View`, event: () => TabDocView.PinDoc(this.rootDoc, { pinViewport: MarqueeView.CurViewBounds(this.rootDoc, this.props.PanelWidth(), this.props.PanelHeight()) }), icon: 'map-pin' }); + appearanceItems.push({ description: `Pin View`, event: () => this._props.pinToPres(this.Document, { pinViewport: MarqueeView.CurViewBounds(this.dataDoc, this._props.PanelWidth(), this._props.PanelHeight()) }), icon: 'map-pin' }); !Doc.noviceMode && appearanceItems.push({ description: `update icon`, event: this.updateIcon, icon: 'compress-arrows-alt' }); - this.props.renderDepth && appearanceItems.push({ description: 'Ungroup collection', event: this.promoteCollection, icon: 'table' }); + this._props.renderDepth && appearanceItems.push({ description: 'Ungroup collection', event: this.promoteCollection, icon: 'table' }); - this.props.Document._isGroup && this.Document.transcription && appearanceItems.push({ description: 'Ink to text', event: () => this.transcribeStrokes(false), icon: 'font' }); + this.Document.isGroup && this.Document.transcription && appearanceItems.push({ description: 'Ink to text', event: this.transcribeStrokes, icon: 'font' }); !Doc.noviceMode ? appearanceItems.push({ description: 'Arrange contents in grid', event: this.layoutDocsInGrid, icon: 'table' }) : null; + !Doc.noviceMode ? appearanceItems.push({ description: (this.Document._freeform_useClusters ? 'Hide' : 'Show') + ' Clusters', event: () => this.updateClusters(!this.Document._freeform_useClusters), icon: 'braille' }) : null; !appearance && ContextMenu.Instance.addItem({ description: 'Appearance...', subitems: appearanceItems, icon: 'eye' }); - const viewctrls = ContextMenu.Instance.findByDescription('UI Controls...'); - const viewCtrlItems = viewctrls && 'subitems' in viewctrls ? viewctrls.subitems : []; - !Doc.noviceMode ? viewCtrlItems.push({ description: (this.Document._freeform_useClusters ? 'Hide' : 'Show') + ' Clusters', event: () => this.updateClusters(!this.Document._freeform_useClusters), icon: 'braille' }) : null; - !viewctrls && ContextMenu.Instance.addItem({ description: 'UI Controls...', subitems: viewCtrlItems, icon: 'eye' }); - const options = ContextMenu.Instance.findByDescription('Options...'); const optionItems = options && 'subitems' in options ? options.subitems : []; - !this.props.isAnnotationOverlay && + !this._props.isAnnotationOverlay && !Doc.noviceMode && optionItems.push({ description: (this._showAnimTimeline ? 'Close' : 'Open') + ' Animation Timeline', event: action(() => (this._showAnimTimeline = !this._showAnimTimeline)), icon: 'eye' }); - this.props.renderDepth && optionItems.push({ description: 'Use Background Color as Default', event: () => (Cast(Doc.UserDoc().emptyCollection, Doc, null)._backgroundColor = StrCast(this.layoutDoc._backgroundColor)), icon: 'palette' }); - this.props.renderDepth && optionItems.push({ description: 'Fit Content Once', event: this.fitContentOnce, icon: 'object-group' }); - // gpt styling - this.props.renderDepth && optionItems.push({ description: 'Style with AI', event: this.gptStyling, icon: 'paint-brush' }); + this._props.renderDepth && optionItems.push({ description: 'Use Background Color as Default', event: () => (Cast(Doc.UserDoc().emptyCollection, Doc, null)._backgroundColor = StrCast(this.layoutDoc._backgroundColor)), icon: 'palette' }); + this._props.renderDepth && optionItems.push({ description: 'Fit Content Once', event: this.fitContentOnce, icon: 'object-group' }); if (!Doc.noviceMode) { optionItems.push({ description: (!Doc.NativeWidth(this.layoutDoc) || !Doc.NativeHeight(this.layoutDoc) ? 'Freeze' : 'Unfreeze') + ' Aspect', event: this.toggleNativeDimensions, icon: 'snowflake' }); } @@ -1913,17 +1742,13 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection }; @undoBatch - @action - transcribeStrokes = (math: boolean) => { - if (this.props.Document._isGroup && this.props.Document.transcription) { - if (!math) { - const text = StrCast(this.props.Document.transcription); - - const lines = text.split('\n'); - const height = 30 + 15 * lines.length; + transcribeStrokes = () => { + if (this.Document.isGroup && this.Document.transcription) { + const text = StrCast(this.Document.transcription); + const lines = text.split('\n'); + const height = 30 + 15 * lines.length; - this.addDocument(Docs.Create.TextDocument(text, { title: lines[0], x: NumCast(this.layoutDoc.x) + NumCast(this.layoutDoc._width) + 20, y: NumCast(this.layoutDoc.y), _width: 200, _height: height })); - } + this.addDocument(Docs.Create.TextDocument(text, { title: lines[0], x: NumCast(this.layoutDoc.x) + NumCast(this.layoutDoc._width) + 20, y: NumCast(this.layoutDoc.y), _width: 200, _height: height })); } }; @@ -1933,33 +1758,26 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection SnappingManager.clearSnapLines(); }; @action - dragStarting = (snapToDraggedDoc: boolean = false, showGroupDragTarget: boolean, visited = new Set<Doc>()) => { - if (visited.has(this.rootDoc)) return; - visited.add(this.rootDoc); - showGroupDragTarget && (this.GroupChildDrag = BoolCast(this.Document._isGroup)); - if (this.rootDoc._isGroup && this.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView) { - this.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView.dragStarting(snapToDraggedDoc, false, visited); - } + dragStarting = (snapToDraggedDoc: boolean = false, showGroupDragTarget: boolean = true, visited = new Set<Doc>()) => { + if (visited.has(this.Document)) return; + visited.add(this.Document); + showGroupDragTarget && (this.GroupChildDrag = BoolCast(this.Document.isGroup)); const activeDocs = this.getActiveDocuments(); - const size = this.getTransform().transformDirection(this.props.PanelWidth(), this.props.PanelHeight()); + const size = this.screenToFreeformContentsXf.transformDirection(this._props.PanelWidth(), this._props.PanelHeight()); const selRect = { left: this.panX() - size[0] / 2, top: this.panY() - size[1] / 2, width: size[0], height: size[1] }; const docDims = (doc: Doc) => ({ left: NumCast(doc.x), top: NumCast(doc.y), width: NumCast(doc._width), height: NumCast(doc._height) }); const isDocInView = (doc: Doc, rect: { left: number; top: number; width: number; height: number }) => intersectRect(docDims(doc), rect); const snappableDocs = activeDocs.filter(doc => doc.z === undefined && isDocInView(doc, selRect)); // first see if there are any foreground docs to snap to - activeDocs.forEach( - doc => - doc._isGroup && - SnappingManager.GetIsResizing() !== doc && - !DragManager.docsBeingDragged.includes(doc) && - (DocumentManager.Instance.getDocumentView(doc)?.ComponentView as CollectionFreeFormView)?.dragStarting(snapToDraggedDoc, false, visited) - ); + activeDocs + .filter(doc => doc.isGroup && SnappingManager.IsResizing !== doc && !DragManager.docsBeingDragged.includes(doc)) + .forEach(doc => DocumentManager.Instance.getDocumentView(doc)?.ComponentView?.dragStarting?.(snapToDraggedDoc, false, visited)); const horizLines: number[] = []; const vertLines: number[] = []; - const invXf = this.getTransform().inverse(); + const invXf = this.screenToFreeformContentsXf.inverse(); snappableDocs - .filter(doc => !doc._isGroup && (snapToDraggedDoc || (SnappingManager.GetIsResizing() !== doc && !DragManager.docsBeingDragged.includes(doc)))) + .filter(doc => !doc.isGroup && (snapToDraggedDoc || (SnappingManager.IsResizing !== doc && !DragManager.docsBeingDragged.includes(doc)))) .forEach(doc => { const { left, top, width, height } = docDims(doc); const topLeftInScreen = invXf.transformPoint(left, top); @@ -1974,7 +1792,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection incrementalRendering = () => this.childDocs.filter(doc => !this._renderCutoffData.get(doc[Id])).length !== 0; incrementalRender = action(() => { - if (!LightboxView.LightboxDoc || LightboxView.IsLightboxDocView(this.props.docViewPath())) { + if (!LightboxView.LightboxDoc || LightboxView.Contains(this.DocumentView?.())) { const layout_unrendered = this.childDocs.filter(doc => !this._renderCutoffData.get(doc[Id])); const loadIncrement = 5; for (var i = 0; i < Math.min(layout_unrendered.length, loadIncrement); i++) { @@ -1984,35 +1802,61 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection this.childDocs.some(doc => !this._renderCutoffData.get(doc[Id])) && setTimeout(this.incrementalRender, 1); }); - get children() { - this.incrementalRender(); - const children = typeof this.props.children === 'function' ? ((this.props.children as any)() as JSX.Element[]) : this.props.children ? [this.props.children] : []; - return [...children, ...this.views, <CollectionFreeFormRemoteCursors {...this.props} key="remoteCursors" />]; - } - @computed get placeholder() { return ( - <div className="collectionfreeformview-placeholder" style={{ background: StrCast(this.Document.backgroundColor) }}> - <span className="collectionfreeformview-placeholderSpan">{this.props.Document.annotationOn ? '' : this.props.Document.title?.toString()}</span> + <div className="collectionfreeformview-placeholder" style={{ background: this._props.styleProvider?.(this.Document, this._props, StyleProp.BackgroundColor) }}> + <span className="collectionfreeformview-placeholderSpan">{this.Document.annotationOn ? '' : this.Document.title?.toString()}</span> </div> ); } brushedView = () => this._brushedView; gridColor = () => - DashColor(lightOrDark(this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor))) - .fade(0.6) + DashColor(lightOrDark(this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor))) + .fade(0.5) .toString(); - @computed get marqueeView() { - TraceMobx(); - return this._firstRender ? ( - this.placeholder - ) : ( + @computed get backgroundGrid() { + return ( + <div> + <CollectionFreeFormBackgroundGrid // bcz : UGHH don't know why, but if we don't wrap in a div, then PDF's don't render when taking snapshot of a dashboard and the background grid is on!!? + PanelWidth={this._props.PanelWidth} + PanelHeight={this._props.PanelHeight} + panX={this.panX} + panY={this.panY} + color={this.gridColor} + nativeDimScaling={this.nativeDim} + zoomScaling={this.zoomScaling} + layoutDoc={this.layoutDoc} + isAnnotationOverlay={this.isAnnotationOverlay} + cachedCenteringShiftX={this.cachedCenteringShiftX} + cachedCenteringShiftY={this.cachedCenteringShiftY} + /> + </div> + ); + } + get pannableContents() { + this.incrementalRender(); + return ( + <CollectionFreeFormPannableContents + Document={this.Document} + brushedView={this.brushedView} + isAnnotationOverlay={this.isAnnotationOverlay} + transform={this.PanZoomCenterXf} + transition={this._panZoomTransition ? `transform ${this._panZoomTransition}ms` : Cast(this.layoutDoc._viewTransition, 'string', Cast(this.Document._viewTransition, 'string', null))} + viewDefDivClick={this._props.viewDefDivClick}> + {this.props.children ?? null} {/* most likely case of children is document content that's being annoated: eg., an image */} + {this.contentViews} + <CollectionFreeFormRemoteCursors {...this._props} key="remoteCursors" /> + </CollectionFreeFormPannableContents> + ); + } + get marqueeView() { + return ( <MarqueeView - {...this.props} + {...this._props} ref={this._marqueeViewRef} - ungroup={this.rootDoc._isGroup ? this.promoteCollection : undefined} - nudge={this.isAnnotationOverlay || this.props.renderDepth > 0 ? undefined : this.nudge} + ungroup={this.Document.isGroup ? this.promoteCollection : undefined} + nudge={this.isAnnotationOverlay || this._props.renderDepth > 0 ? undefined : this.nudge} addDocTab={this.addDocTab} slowLoadDocuments={this.slowLoadDocuments} trySelectCluster={this.trySelectCluster} @@ -2020,81 +1864,48 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection selectDocuments={this.selectDocuments} addDocument={this.addDocument} addLiveTextDocument={this.addLiveTextBox} - getContainerTransform={this.getContainerTransform} - getTransform={this.getTransform} + getContainerTransform={this.ScreenToLocalBoxXf} + getTransform={this.ScreenToContentsXf} + panXFieldKey={this.panXFieldKey} + panYFieldKey={this.panYFieldKey} isAnnotationOverlay={this.isAnnotationOverlay}> - <div - className="marqueeView-div" - ref={r => { - this._marqueeRef = r; - r?.addEventListener('dashDragAutoScroll', this.onDragAutoScroll as any); - }} - style={{ opacity: this.props.dontRenderDocuments ? 0.7 : undefined }}> - {this.layoutDoc._freeform_backgroundGrid ? ( - <div> - <CollectionFreeFormBackgroundGrid // bcz : UGHH don't know why, but if we don't wrap in a div, then PDF's don't render when taking snapshot of a dashboard and the background grid is on!!? - PanelWidth={this.props.PanelWidth} - PanelHeight={this.props.PanelHeight} - panX={this.panX} - panY={this.panY} - color={this.gridColor} - nativeDimScaling={this.nativeDim} - zoomScaling={this.zoomScaling} - layoutDoc={this.layoutDoc} - isAnnotationOverlay={this.isAnnotationOverlay} - cachedCenteringShiftX={this.cachedCenteringShiftX} - cachedCenteringShiftY={this.cachedCenteringShiftY} - /> - </div> - ) : null} - <CollectionFreeFormViewPannableContents - rootDoc={this.rootDoc} - brushedView={this.brushedView} - isAnnotationOverlay={this.isAnnotationOverlay} - transform={this.contentTransform} - transition={this._panZoomTransition ? `transform ${this._panZoomTransition}ms` : Cast(this.layoutDoc._viewTransition, 'string', Cast(this.props.DocumentView?.()?.rootDoc._viewTransition, 'string', null))} - viewDefDivClick={this.props.viewDefDivClick}> - {this.children} - </CollectionFreeFormViewPannableContents> - </div> - {this._showAnimTimeline ? <Timeline ref={this._timelineRef} {...this.props} /> : null} + {this.layoutDoc._freeform_backgroundGrid ? this.backgroundGrid : null} + {this.pannableContents} + {this._showAnimTimeline ? <Timeline ref={this._timelineRef} {...this._props} /> : null} </MarqueeView> ); } @computed get nativeDimScaling() { - if (this._firstRender || (this.props.isAnnotationOverlay && !this.props.annotationLayerHostsContent)) return 0; + if (this._firstRender || (this._props.isAnnotationOverlay && !this._props.annotationLayerHostsContent)) return 0; const nw = this.nativeWidth; const nh = this.nativeHeight; - const hscale = nh ? this.props.PanelHeight() / nh : 1; - const wscale = nw ? this.props.PanelWidth() / nw : 1; - return wscale < hscale || this.layoutDoc.layout_fitWidth ? wscale : hscale; + const hscale = nh ? this._props.PanelHeight() / nh : 1; + const wscale = nw ? this._props.PanelWidth() / nw : 1; + return wscale < hscale || (this._props.layout_fitWidth?.(this.Document) ?? this.layoutDoc.layout_fitWidth) ? wscale : hscale; } nativeDim = () => this.nativeDimScaling; @action - brushView = (viewport: { width: number; height: number; panX: number; panY: number }, transTime: number) => { + brushView = (viewport: { width: number; height: number; panX: number; panY: number }, transTime: number, holdTime: number = 2500) => { this._brushtimer1 && clearTimeout(this._brushtimer1); this._brushtimer && clearTimeout(this._brushtimer); this._brushedView = undefined; this._brushtimer1 = setTimeout( action(() => { this._brushedView = { ...viewport, panX: viewport.panX - viewport.width / 2, panY: viewport.panY - viewport.height / 2 }; - this._brushtimer = setTimeout( - action(() => (this._brushedView = undefined)), - 2500 - ); + this._brushtimer = setTimeout(action(() => (this._brushedView = undefined)), holdTime); // prettier-ignore }), transTime + 1 ); }; - lightboxPanelWidth = () => Math.max(0, this.props.PanelWidth() - 30); - lightboxPanelHeight = () => Math.max(0, this.props.PanelHeight() - 30); - lightboxScreenToLocal = () => this.props.ScreenToLocalTransform().translate(-15, -15); + lightboxPanelWidth = () => Math.max(0, this._props.PanelWidth() - 30); + lightboxPanelHeight = () => Math.max(0, this._props.PanelHeight() - 30); + lightboxScreenToLocal = () => this.ScreenToLocalBoxXf().translate(-15, -15); onPassiveWheel = (e: WheelEvent) => { - const docHeight = NumCast(this.rootDoc[Doc.LayoutFieldKey(this.rootDoc) + '_nativeHeight'], this.nativeHeight); - const scrollable = NumCast(this.layoutDoc[this.scaleFieldKey], 1) === 1 && docHeight > this.props.PanelHeight() / this.nativeDimScaling; - this.props.isSelected() && !scrollable && e.preventDefault(); + const docHeight = NumCast(this.Document[Doc.LayoutFieldKey(this.Document) + '_nativeHeight'], this.nativeHeight); + const scrollable = NumCast(this.layoutDoc[this.scaleFieldKey], 1) === 1 && docHeight > this._props.PanelHeight() / this.nativeDimScaling; + this._props.isSelected() && !scrollable && e.preventDefault(); }; _oldWheel: any; render() { @@ -2117,31 +1928,32 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection onDragOver={e => e.preventDefault()} onContextMenu={this.onContextMenu} style={{ - pointerEvents: this.props.isContentActive() && SnappingManager.GetIsDragging() ? 'all' : (this.props.pointerEvents?.() as any), + pointerEvents: this._props.isContentActive() && SnappingManager.IsDragging ? 'all' : (this._props.pointerEvents?.() as any), textAlign: this.isAnnotationOverlay ? 'initial' : undefined, transform: `scale(${this.nativeDimScaling || 1})`, width: `${100 / (this.nativeDimScaling || 1)}%`, - height: this.props.getScrollHeight?.() ?? `${100 / (this.nativeDimScaling || 1)}%`, + height: this._props.getScrollHeight?.() ?? `${100 / (this.nativeDimScaling || 1)}%`, }}> {this._lightboxDoc ? ( <div style={{ padding: 15, width: '100%', height: '100%' }}> <DocumentView - {...this.props} + {...this._props} Document={this._lightboxDoc} - DataDoc={undefined} + containerViewPath={this.DocumentView?.().docViewPath} + TemplateDataDocument={undefined} PanelWidth={this.lightboxPanelWidth} PanelHeight={this.lightboxPanelHeight} NativeWidth={returnZero} NativeHeight={returnZero} - onClick={this.onChildClickHandler} + onClickScript={this.onChildClickHandler} onKey={this.onKeyDown} - onDoubleClick={this.onChildDoubleClickHandler} - onBrowseClick={this.onBrowseClickHandler} + onDoubleClickScript={this.onChildDoubleClickHandler} + onBrowseClickScript={this.onBrowseClickHandler} childFilters={this.childDocFilters} childFiltersByRanges={this.childDocRangeFilters} searchFilterDocs={this.searchFilterDocs} - isDocumentActive={this.props.childDocumentsActive?.() ? this.props.isDocumentActive : this.isContentActive} - isContentActive={this.props.childContentsActive ?? emptyFunction} + isDocumentActive={this._props.childDocumentsActive?.() ? this._props.isDocumentActive : this.isContentActive} + isContentActive={this._props.childContentsActive ?? emptyFunction} addDocTab={this.addDocTab} ScreenToLocalTransform={this.lightboxScreenToLocal} fitContentsToBox={undefined} @@ -2150,8 +1962,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection </div> ) : ( <> - {this.marqueeView} - {this.props.noOverlay ? null : <CollectionFreeFormOverlayView elements={this.elementFunc} />} + {this._firstRender ? this.placeholder : this.marqueeView} + {this._props.noOverlay ? null : <CollectionFreeFormOverlayView elements={this.elementFunc} />} {!this.GroupChildDrag ? null : <div className="collectionFreeForm-groupDropper" />} </> )} @@ -2160,139 +1972,10 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection } } -interface CollectionFreeFormOverlayViewProps { - elements: () => ViewDefResult[]; -} - -@observer -class CollectionFreeFormOverlayView extends React.Component<CollectionFreeFormOverlayViewProps> { - render() { - return this.props - .elements() - .filter(ele => ele.bounds?.z) - .map(ele => ele.ele); - } -} - -interface CollectionFreeFormViewPannableContentsProps { - rootDoc: Doc; - viewDefDivClick?: ScriptField; - children?: React.ReactNode | undefined; - transition?: string; - isAnnotationOverlay: boolean | undefined; - transform: () => string; - brushedView: () => { panX: number; panY: number; width: number; height: number } | undefined; -} - -@observer -class CollectionFreeFormViewPannableContents extends React.Component<CollectionFreeFormViewPannableContentsProps> { - @computed get presPaths() { - return CollectionFreeFormView.ShowPresPaths ? PresBox.Instance.pathLines(this.props.rootDoc) : null; - } - // rectangle highlight used when following trail/link to a region of a collection that isn't a document - showViewport = (viewport: { panX: number; panY: number; width: number; height: number } | undefined) => - !viewport ? null : ( - <div - className="collectionFreeFormView-brushView" - style={{ - transform: `translate(${viewport.panX}px, ${viewport.panY}px)`, - width: viewport.width, - height: viewport.height, - border: `orange solid ${viewport.width * 0.005}px`, - }} - /> - ); - - render() { - return ( - <div - className={'collectionfreeformview' + (this.props.viewDefDivClick ? '-viewDef' : '-none')} - onScroll={e => { - const target = e.target as any; - if (getComputedStyle(target)?.overflow === 'visible') { - target.scrollTop = target.scrollLeft = 0; // if collection is visible, scrolling messes things up since there are no scroll bars - } - }} - style={{ - transform: this.props.transform(), - transition: this.props.transition, - width: this.props.isAnnotationOverlay ? undefined : 0, // if not an overlay, then this will be the size of the collection, but panning and zooming will move it outside the visible border of the collection and make it selectable. This problem shows up after zooming/panning on a background collection -- you can drag the collection by clicking on apparently empty space outside the collection - }}> - {this.props.children} - {this.presPaths} - {this.showViewport(this.props.brushedView())} - </div> - ); - } -} - -interface CollectionFreeFormViewBackgroundGridProps { - panX: () => number; - panY: () => number; - PanelWidth: () => number; - PanelHeight: () => number; - color: () => string; - isAnnotationOverlay?: boolean; - nativeDimScaling: () => number; - zoomScaling: () => number; - layoutDoc: Doc; - cachedCenteringShiftX: number; - cachedCenteringShiftY: number; -} @observer -class CollectionFreeFormBackgroundGrid extends React.Component<CollectionFreeFormViewBackgroundGridProps> { - chooseGridSpace = (gridSpace: number): number => { - if (!this.props.zoomScaling()) return gridSpace; - const divisions = this.props.PanelWidth() / this.props.zoomScaling() / gridSpace; - return divisions < 90 ? gridSpace : this.chooseGridSpace(gridSpace * 2); - }; +class CollectionFreeFormOverlayView extends React.Component<{ elements: () => ViewDefResult[] }> { render() { - const gridSpace = this.chooseGridSpace(NumCast(this.props.layoutDoc['_backgroundGrid-spacing'], 50)); - const shiftX = (this.props.isAnnotationOverlay ? 0 : (-this.props.panX() % gridSpace) - gridSpace) * this.props.zoomScaling(); - const shiftY = (this.props.isAnnotationOverlay ? 0 : (-this.props.panY() % gridSpace) - gridSpace) * this.props.zoomScaling(); - const renderGridSpace = gridSpace * this.props.zoomScaling(); - const w = this.props.PanelWidth() / this.props.nativeDimScaling() + 2 * renderGridSpace; - const h = this.props.PanelHeight() / this.props.nativeDimScaling() + 2 * renderGridSpace; - const strokeStyle = this.props.color(); - return !this.props.nativeDimScaling() ? null : ( - <canvas - className="collectionFreeFormView-grid" - width={w} - height={h} - style={{ transform: `translate(${shiftX}px, ${shiftY}px)` }} - ref={el => { - const ctx = el?.getContext('2d'); - if (ctx) { - const Cx = this.props.cachedCenteringShiftX % renderGridSpace; - const Cy = this.props.cachedCenteringShiftY % renderGridSpace; - ctx.lineWidth = Math.min(1, Math.max(0.5, this.props.zoomScaling())); - ctx.setLineDash(gridSpace > 50 ? [3, 3] : [1, 5]); - ctx.clearRect(0, 0, w, h); - if (ctx) { - ctx.strokeStyle = strokeStyle; - ctx.fillStyle = strokeStyle; - ctx.beginPath(); - if (this.props.zoomScaling() > 1) { - for (let x = Cx - renderGridSpace; x <= w - Cx; x += renderGridSpace) { - ctx.moveTo(x, Cy - h); - ctx.lineTo(x, Cy + h); - } - for (let y = Cy - renderGridSpace; y <= h - Cy; y += renderGridSpace) { - ctx.moveTo(Cx - w, y); - ctx.lineTo(Cx + w, y); - } - } else { - for (let x = Cx - renderGridSpace; x <= w - Cx; x += renderGridSpace) - for (let y = Cy - renderGridSpace; y <= h - Cy; y += renderGridSpace) { - ctx.fillRect(Math.round(x), Math.round(y), 1, 1); - } - } - ctx.stroke(); - } - } - }} - /> - ); + return this.props.elements().filter(ele => ele.bounds?.z).map(ele => ele.ele); // prettier-ignore } } @@ -2300,48 +1983,85 @@ export function CollectionBrowseClick(dv: DocumentView, clientX: number, clientY const browseTransitionTime = 500; SelectionManager.DeselectAll(); dv && - DocumentManager.Instance.showDocument(dv.rootDoc, { zoomScale: 0.8, willZoomCentered: true }, (focused: boolean) => { + DocumentManager.Instance.showDocument(dv.Document, { zoomScale: 0.8, willZoomCentered: true }, (focused: boolean) => { if (!focused) { - const selfFfview = !dv.rootDoc._isGroup && dv.ComponentView instanceof CollectionFreeFormView ? dv.ComponentView : undefined; - let containers = dv.props.docViewPath(); - let parFfview = dv.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView; + const selfFfview = !dv.Document.isGroup && dv.ComponentView instanceof CollectionFreeFormView ? dv.ComponentView : undefined; + let containers = dv.containerViewPath?.() ?? []; + let parFfview = dv.CollectionFreeFormView; for (var cont of containers) { - parFfview = parFfview ?? cont.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView; + parFfview = parFfview ?? cont.CollectionFreeFormView; } - while (parFfview?.rootDoc._isGroup) parFfview = parFfview.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView; - const ffview = selfFfview && selfFfview.rootDoc[selfFfview.scaleFieldKey] !== 0.5 ? selfFfview : parFfview; // if focus doc is a freeform that is not at it's default 0.5 scale, then zoom out on it. Otherwise, zoom out on the parent ffview - ffview?.zoomSmoothlyAboutPt(ffview.getTransform().transformPoint(clientX, clientY), ffview?.isAnnotationOverlay ? 1 : 0.5, browseTransitionTime); - Doc.linkFollowHighlight(dv?.props.Document, false); + while (parFfview?.Document.isGroup) parFfview = parFfview.DocumentView?.().CollectionFreeFormView; + const ffview = selfFfview && selfFfview.layoutDoc[selfFfview.scaleFieldKey] !== 0.5 ? selfFfview : parFfview; // if focus doc is a freeform that is not at it's default 0.5 scale, then zoom out on it. Otherwise, zoom out on the parent ffview + ffview?.zoomSmoothlyAboutPt(ffview.screenToFreeformContentsXf.transformPoint(clientX, clientY), ffview?.isAnnotationOverlay ? 1 : 0.5, browseTransitionTime); + Doc.linkFollowHighlight(dv?.Document, false); } }); } ScriptingGlobals.add(CollectionBrowseClick); ScriptingGlobals.add(function nextKeyFrame(readOnly: boolean) { - !readOnly && (SelectionManager.Views()[0].ComponentView as CollectionFreeFormView)?.changeKeyFrame(); + !readOnly && (SelectionManager.Views[0].ComponentView as CollectionFreeFormView)?.changeKeyFrame(); }); ScriptingGlobals.add(function prevKeyFrame(readOnly: boolean) { - !readOnly && (SelectionManager.Views()[0].ComponentView as CollectionFreeFormView)?.changeKeyFrame(true); + !readOnly && (SelectionManager.Views[0].ComponentView as CollectionFreeFormView)?.changeKeyFrame(true); }); ScriptingGlobals.add(function curKeyFrame(readOnly: boolean) { - const selView = SelectionManager.Views(); + const selView = SelectionManager.Views; if (readOnly) return selView[0].ComponentView?.getKeyFrameEditing?.() ? Colors.MEDIUM_BLUE : 'transparent'; runInAction(() => selView[0].ComponentView?.setKeyFrameEditing?.(!selView[0].ComponentView?.getKeyFrameEditing?.())); }); ScriptingGlobals.add(function pinWithView(pinContent: boolean) { - SelectionManager.Views().forEach(view => - view.props.pinToPres(view.rootDoc, { - currentFrame: Cast(view.rootDoc.currentFrame, 'number', null), + SelectionManager.Views.forEach(view => + view._props.pinToPres(view.Document, { + currentFrame: Cast(view.Document.currentFrame, 'number', null), pinData: { poslayoutview: pinContent, dataview: pinContent, }, - pinViewport: MarqueeView.CurViewBounds(view.rootDoc, view.props.PanelWidth(), view.props.PanelHeight()), + pinViewport: MarqueeView.CurViewBounds(view.Document, view._props.PanelWidth(), view._props.PanelHeight()), }) ); }); ScriptingGlobals.add(function bringToFront() { - SelectionManager.Views().forEach(view => view.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView.bringToFront(view.rootDoc)); + SelectionManager.Views.forEach(view => view.CollectionFreeFormView?.bringToFront(view.Document)); }); ScriptingGlobals.add(function sendToBack(doc: Doc) { - SelectionManager.Views().forEach(view => view.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView.bringToFront(view.rootDoc, true)); + SelectionManager.Views.forEach(view => view.CollectionFreeFormView?.bringToFront(view.Document, true)); +}); +ScriptingGlobals.add(function datavizFromSchema(doc: Doc) { + SelectionManager.Views.forEach(view => { + if (!view.layoutDoc.schema_columnKeys) { + view.layoutDoc.schema_columnKeys = new List<string>(['title', 'type', 'author', 'author_date']); + } + const keys = Cast(view.layoutDoc.schema_columnKeys, listSpec('string'))?.filter(key => key != 'text'); + if (!keys) return; + + const children = DocListCast(view.Document[Doc.LayoutFieldKey(view.Document)]); + let csvRows = []; + csvRows.push(keys.join(',')); + for (let i = 0; i < children.length; i++) { + let eachRow = []; + for (let j = 0; j < keys.length; j++) { + var cell = children[i][keys[j]]; + if (cell && (cell as string)) cell = cell.toString().replace(/\,/g, ''); + eachRow.push(cell); + } + csvRows.push(eachRow); + } + const blob = new Blob([csvRows.join('\n')], { type: 'text/csv' }); + const options = { x: 0, y: -300, title: 'schemaTable', _width: 300, _height: 100, type: 'text/csv' }; + const file = new File([blob], 'schemaTable', options); + const loading = Docs.Create.LoadingDocument(file, options); + loading.presentation_openInLightbox = true; + DocUtils.uploadFileToDoc(file, {}, loading); + + if (view.ComponentView?.addDocument) { + // loading.dataViz_fromSchema = true; + loading.dataViz_asSchema = view.layoutDoc; + SchemaCSVPopUp.Instance.setView(view); + SchemaCSVPopUp.Instance.setTarget(view.layoutDoc); + SchemaCSVPopUp.Instance.setDataVizDoc(loading); + SchemaCSVPopUp.Instance.setVisible(true); + } + }); }); diff --git a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx index 607f9fb95..79cc534dc 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx @@ -1,14 +1,11 @@ -import React = require('react'); import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Tooltip } from '@material-ui/core'; +import { IconButton } from 'browndash-components'; +import { computed, makeObservable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { unimplementedFunction } from '../../../../Utils'; -import { AntimodeMenu, AntimodeMenuProps } from '../../AntimodeMenu'; -import { IconButton } from 'browndash-components'; -import { StrCast } from '../../../../fields/Types'; -import { Doc } from '../../../../fields/Doc'; -import { computed } from 'mobx'; import { SettingsManager } from '../../../util/SettingsManager'; +import { AntimodeMenu, AntimodeMenuProps } from '../../AntimodeMenu'; @observer export class MarqueeOptionsMenu extends AntimodeMenu<AntimodeMenuProps> { @@ -21,9 +18,9 @@ export class MarqueeOptionsMenu extends AntimodeMenu<AntimodeMenuProps> { public hideMarquee: () => void = unimplementedFunction; public pinWithView: (e: KeyboardEvent | React.PointerEvent | undefined) => void = unimplementedFunction; public isShown = () => this._opacity > 0; - constructor(props: Readonly<{}>) { + constructor(props: any) { super(props); - + makeObservable(this); MarqueeOptionsMenu.Instance = this; } diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index a30ec5302..c2f8232c6 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -1,5 +1,7 @@ -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; +import { Utils, intersectRect, lightOrDark, returnFalse } from '../../../../Utils'; import { Doc, Opt } from '../../../../fields/Doc'; import { AclAdmin, AclAugment, AclEdit, DocData } from '../../../../fields/DocSymbols'; import { Id } from '../../../../fields/FieldSymbols'; @@ -9,25 +11,23 @@ import { RichTextField } from '../../../../fields/RichTextField'; import { Cast, FieldValue, NumCast, StrCast } from '../../../../fields/Types'; import { ImageField } from '../../../../fields/URLField'; import { GetEffectiveAcl } from '../../../../fields/util'; -import { intersectRect, lightOrDark, returnFalse, Utils } from '../../../../Utils'; import { CognitiveServices } from '../../../cognitive_services/CognitiveServices'; -import { Docs, DocumentOptions, DocUtils } from '../../../documents/Documents'; import { DocumentType } from '../../../documents/DocumentTypes'; +import { DocUtils, Docs, DocumentOptions } from '../../../documents/Documents'; import { SelectionManager } from '../../../util/SelectionManager'; +import { freeformScrollMode } from '../../../util/SettingsManager'; +import { SnappingManager } from '../../../util/SnappingManager'; import { Transform } from '../../../util/Transform'; -import { undoBatch, UndoManager } from '../../../util/UndoManager'; +import { UndoManager, undoBatch } from '../../../util/UndoManager'; import { ContextMenu } from '../../ContextMenu'; -import { DocumentView, OpenWhere } from '../../nodes/DocumentView'; -import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; -import { pasteImageBitmap } from '../../nodes/WebBoxRenderer'; +import { ObservableReactComponent } from '../../ObservableReactComponent'; import { PreviewCursor } from '../../PreviewCursor'; +import { OpenWhere } from '../../nodes/DocumentView'; +import { pasteImageBitmap } from '../../nodes/WebBoxRenderer'; +import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; import { SubCollectionViewProps } from '../CollectionSubView'; -import { TabDocView } from '../TabDocView'; import { MarqueeOptionsMenu } from './MarqueeOptionsMenu'; import './MarqueeView.scss'; -import React = require('react'); -import { freeformScrollMode } from '../../../util/SettingsManager'; - interface MarqueeViewProps { getContainerTransform: () => Transform; getTransform: () => Transform; @@ -35,6 +35,8 @@ interface MarqueeViewProps { selectDocuments: (docs: Doc[]) => void; addLiveTextDocument: (doc: Doc) => void; isSelected: () => boolean; + panXFieldKey: string; + panYFieldKey: string; trySelectCluster: (addToSel: boolean) => boolean; nudge?: (x: number, y: number, nudgeTime?: number) => boolean; ungroup?: () => void; @@ -50,12 +52,17 @@ export interface MarqueeViewBounds { } @observer -export class MarqueeView extends React.Component<SubCollectionViewProps & MarqueeViewProps> { +export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps & MarqueeViewProps> { public static CurViewBounds(pinDoc: Doc, panelWidth: number, panelHeight: number) { const ps = NumCast(pinDoc._freeform_scale, 1); return { left: NumCast(pinDoc._freeform_panX) - panelWidth / 2 / ps, top: NumCast(pinDoc._freeform_panY) - panelHeight / 2 / ps, width: panelWidth / ps, height: panelHeight / ps }; } + constructor(props: any) { + super(props); + makeObservable(this); + } + private _commandExecuted = false; @observable _lastX: number = 0; @observable _lastY: number = 0; @@ -66,7 +73,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque @observable _lassoFreehand: boolean = false; @computed get Transform() { - return this.props.getTransform(); + return this._props.getTransform(); } @computed get Bounds() { // nda - ternary argument to transformPoint is returning the lower of the downX/Y and lastX/Y and passing in as args x,y @@ -76,18 +83,9 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque const bounds: MarqueeViewBounds = { left: topLeft[0], top: topLeft[1], width: Math.abs(size[0]), height: Math.abs(size[1]) }; return bounds; } - get inkDoc() { - return this.props.Document; - } - get ink() { - return Cast(this.props.Document.ink, InkField); - } - set ink(value: Opt<InkField>) { - this.props.Document.ink = value; - } componentDidMount() { - this.props.setPreviewCursor?.(this.setPreviewCursor); + this._props.setPreviewCursor?.(this.setPreviewCursor); } @action @@ -109,20 +107,20 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque const cm = ContextMenu.Instance; const [x, y] = this.Transform.transformPoint(this._downX, this._downY); if (e.key === '?') { - cm.setDefaultItem('?', (str: string) => this.props.addDocTab(Docs.Create.WebDocument(`https://bing.com/search?q=${str}`, { _width: 400, x, y, _height: 512, _nativeWidth: 850, title: 'bing', data_useCors: true }), OpenWhere.addRight)); + cm.setDefaultItem('?', (str: string) => this._props.addDocTab(Docs.Create.WebDocument(`https://bing.com/search?q=${str}`, { _width: 400, x, y, _height: 512, _nativeWidth: 850, title: 'bing', data_useCors: true }), OpenWhere.addRight)); cm.displayMenu(this._downX, this._downY, undefined, true); e.stopPropagation(); - } else if (e.key === 'u' && this.props.ungroup) { + } else if (e.key === 'u' && this._props.ungroup) { e.stopPropagation(); - this.props.ungroup(); + this._props.ungroup(); } else if (e.key === ':') { - DocUtils.addDocumentCreatorMenuItems(this.props.addLiveTextDocument, this.props.addDocument || returnFalse, x, y); + DocUtils.addDocumentCreatorMenuItems(this._props.addLiveTextDocument, this._props.addDocument || returnFalse, x, y); cm.displayMenu(this._downX, this._downY, undefined, true); e.stopPropagation(); } else if (e.key === 'a' && (e.ctrlKey || e.metaKey)) { e.preventDefault(); - this.props.selectDocuments(this.props.activeDocuments()); + this._props.selectDocuments(this._props.activeDocuments()); e.stopPropagation(); } else if (e.key === 'q' && e.ctrlKey) { e.preventDefault(); @@ -144,7 +142,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque ns.map(line => { const indent = line.search(/\S|$/); const newBox = Docs.Create.TextDocument(line, { _width: 200, _height: 35, x: x + (indent / 3) * 10, y: ypos, title: line }); - this.props.addDocument?.(newBox); + this._props.addDocument?.(newBox); ypos += 40 * this.Transform.Scale; }); })(); @@ -155,8 +153,8 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque pasteImageBitmap((data: any, error: any) => { error && console.log(error); data && - Utils.convertDataUri(data, this.props.Document[Id] + '-thumb-frozen').then(returnedfilename => { - this.props.Document['thumb-frozen'] = new ImageField(returnedfilename); + Utils.convertDataUri(data, this._props.Document[Id] + '-thumb-frozen').then(returnedfilename => { + this._props.Document['thumb-frozen'] = new ImageField(returnedfilename); }); }) ); @@ -167,7 +165,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque slide.y = y; FormattedTextBox.SelectOnLoad = slide[Id]; TreeView._editTitleOnLoad = { id: slide[Id], parent: undefined }; - this.props.addDocument?.(slide); + this._props.addDocument?.(slide); e.stopPropagation(); }*/ else if (e.key === 'p' && e.ctrlKey) { e.preventDefault(); @@ -177,10 +175,10 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque this.pasteTable(ns, x, y); })(); e.stopPropagation(); - } else if (!e.ctrlKey && !e.metaKey && SelectionManager.Views().length < 2) { - FormattedTextBox.SelectOnLoadChar = Doc.UserDoc().defaultTextLayout && !this.props.childLayoutString ? e.key : ''; + } else if (!e.ctrlKey && !e.metaKey && SelectionManager.Views.length < 2) { + FormattedTextBox.SelectOnLoadChar = Doc.UserDoc().defaultTextLayout && !this._props.childLayoutString ? e.key : ''; FormattedTextBox.LiveTextUndo = UndoManager.StartBatch('type new note'); - this.props.addLiveTextDocument(DocUtils.GetNewTextDoc('-typed text-', x, y, 200, 100, this.props.xPadding === 0)); + this._props.addLiveTextDocument(DocUtils.GetNewTextDoc('-typed text-', x, y, 200, 100, this._props.xPadding === 0)); e.stopPropagation(); } }; @@ -211,27 +209,20 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque const file = new File([blob], 'droppedTable', options); const loading = Docs.Create.LoadingDocument(file, options); DocUtils.uploadFileToDoc(file, {}, loading); - this.props.addDocument?.(loading); + this._props.addDocument?.(loading); } @action onPointerDown = (e: React.PointerEvent): void => { - // if (this.props.pointerEvents?.() === 'none') return; this._downX = this._lastX = e.clientX; this._downY = this._lastY = e.clientY; - if (!(e.nativeEvent as any).marqueeHit) { - (e.nativeEvent as any).marqueeHit = true; - // allow marquee if right click OR alt+left click OR in adding presentation slide & left key drag mode - if (e.button === 2 || (e.button === 0 && (e.altKey || (this.props.isContentActive?.(true) && Doc.UserDoc().freeformScrollMode === freeformScrollMode.Pan)))) { - // if (e.altKey || (MarqueeView.DragMarquee && this.props.active(true))) { - this.setPreviewCursor(e.clientX, e.clientY, true, false, this.props.Document); - // (!e.altKey) && e.stopPropagation(); // bcz: removed so that you can alt-click on button in a collection to switch link following behaviors. - e.preventDefault(); - // } - // bcz: do we need this? it kills the context menu on the main collection if !altKey - // e.stopPropagation(); - } else PreviewCursor.Visible = false; - } + + const scrollMode = e.altKey ? (Doc.UserDoc().freeformScrollMode === freeformScrollMode.Pan ? freeformScrollMode.Zoom : freeformScrollMode.Pan) : Doc.UserDoc().freeformScrollMode; + // allow marquee if right drag/meta drag, or pan mode + if (e.button === 2 || e.metaKey || scrollMode === freeformScrollMode.Pan) { + this.setPreviewCursor(e.clientX, e.clientY, true, false, this._props.Document); + e.preventDefault(); + } else PreviewCursor.Instance.Visible = false; }; @action @@ -240,7 +231,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque this._lastY = e.pageY; this._lassoPts.push([e.clientX, e.clientY]); if (!e.cancelBubble) { - if (Math.abs(this._lastX - this._downX) > Utils.DRAG_THRESHOLD || Math.abs(this._lastY - this._downY) > Utils.DRAG_THRESHOLD) { + if (!Utils.isClick(this._lastX, this._lastY, this._downX, this._downY, Date.now())) { if (!this._commandExecuted) { this.showMarquee(); } @@ -258,12 +249,10 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque if (this._visible) { const mselect = this.marqueeSelect(); if (!e.shiftKey) { - SelectionManager.DeselectAll(mselect.length ? undefined : this.props.Document); + SelectionManager.DeselectAll(mselect.length ? undefined : this._props.Document); } - // let inkselect = this.ink ? this.marqueeInkSelect(this.ink.inkData) : new Map(); - // let inks = inkselect.size ? [{ Document: this.inkDoc, Ink: inkselect }] : []; - const docs = mselect.length ? mselect : [this.props.Document]; - this.props.selectDocuments(docs); + const docs = mselect.length ? mselect : [this._props.Document]; + this._props.selectDocuments(docs); } const hideMarquee = () => { this.hideMarquee(); @@ -302,14 +291,14 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque this._downX = this._lastX = x; this._downY = this._lastY = y; this._commandExecuted = false; - PreviewCursor.Visible = false; - PreviewCursor.Doc = undefined; + PreviewCursor.Instance.Visible = false; + PreviewCursor.Instance.Doc = undefined; } else if (drag) { this._downX = this._lastX = x; this._downY = this._lastY = y; this._commandExecuted = false; - PreviewCursor.Visible = false; - PreviewCursor.Doc = undefined; + PreviewCursor.Instance.Visible = false; + PreviewCursor.Instance.Doc = undefined; this.cleanupInteractions(true); document.addEventListener('pointermove', this.onPointerMove, true); document.addEventListener('pointerup', this.onPointerUp, true); @@ -317,10 +306,10 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque } else { this._downX = x; this._downY = y; - const effectiveAcl = GetEffectiveAcl(this.props.Document[DocData]); + const effectiveAcl = GetEffectiveAcl(this._props.Document[DocData]); if ([AclAdmin, AclEdit, AclAugment].includes(effectiveAcl)) { - PreviewCursor.Doc = doc; - PreviewCursor.Show(x, y, this.onKeyPress, this.props.addLiveTextDocument, this.props.getTransform, this.props.addDocument, this.props.nudge, this.props.slowLoadDocuments); + PreviewCursor.Instance.Doc = doc; + PreviewCursor.Show(x, y, this.onKeyPress, this._props.addLiveTextDocument, this._props.getTransform, this._props.addDocument, this._props.nudge, this._props.slowLoadDocuments); } this.clearSelection(); } @@ -328,15 +317,12 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque @action onClick = (e: React.MouseEvent): void => { - if (this.props.pointerEvents?.() === 'none') return; + if (this._props.pointerEvents?.() === 'none') return; if (Utils.isClick(e.clientX, e.clientY, this._downX, this._downY, Date.now())) { if (Doc.ActiveTool === InkTool.None) { - if (!(e.nativeEvent as any).marqueeHit) { - (e.nativeEvent as any).marqueeHit = true; - if (!this.props.trySelectCluster(e.shiftKey)) { - !DocumentView.ExploreMode && this.setPreviewCursor(e.clientX, e.clientY, false, false, this.props.Document); - } else e.stopPropagation(); - } + if (!this._props.trySelectCluster(e.shiftKey)) { + !SnappingManager.ExploreMode && this.setPreviewCursor(e.clientX, e.clientY, false, false, this._props.Document); + } else e.stopPropagation(); } // let the DocumentView stopPropagation of this event when it selects this document } else { @@ -352,30 +338,30 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque hideMarquee = () => (this._visible = false); @undoBatch - @action - delete = (e?: React.PointerEvent<Element> | KeyboardEvent | undefined, hide?: boolean) => { + delete = action((e?: React.PointerEvent<Element> | KeyboardEvent | undefined, hide?: boolean) => { const selected = this.marqueeSelect(false); SelectionManager.DeselectAll(); - selected.forEach(doc => (hide ? (doc.hidden = true) : this.props.removeDocument?.(doc))); + selected.forEach(doc => (hide ? (doc.hidden = true) : this._props.removeDocument?.(doc))); this.cleanupInteractions(false); MarqueeOptionsMenu.Instance.fadeOut(true); this.hideMarquee(); - }; + }); getCollection = action((selected: Doc[], creator: Opt<(documents: Array<Doc>, options: DocumentOptions, id?: string) => Doc>, makeGroup: Opt<boolean>) => { const newCollection = creator ? creator(selected, { title: 'nested stack' }) : ((doc: Doc) => { - Doc.GetProto(doc).data = new List<Doc>(selected); - Doc.GetProto(doc).title = makeGroup ? 'grouping' : 'nested freeform'; + const docData = doc[DocData]; + docData.data = new List<Doc>(selected); + docData.isGroup = makeGroup; + docData.title = makeGroup ? 'grouping' : 'nested freeform'; doc._freeform_panX = doc._freeform_panY = 0; return doc; })(Doc.MakeCopy(Doc.UserDoc().emptyCollection as Doc, true)); newCollection.isSystem = undefined; newCollection._width = this.Bounds.width; newCollection._height = this.Bounds.height; - newCollection._isGroup = makeGroup; newCollection._dragWhenActive = makeGroup; newCollection.x = this.Bounds.left; newCollection.y = this.Bounds.top; @@ -386,17 +372,16 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque }); @undoBatch - @action - pileup = (e: KeyboardEvent | React.PointerEvent | undefined) => { + pileup = action((e: KeyboardEvent | React.PointerEvent | undefined) => { const selected = this.marqueeSelect(false); SelectionManager.DeselectAll(); - selected.forEach(d => this.props.removeDocument?.(d)); + selected.forEach(d => this._props.removeDocument?.(d)); const newCollection = DocUtils.pileup(selected, this.Bounds.left + this.Bounds.width / 2, this.Bounds.top + this.Bounds.height / 2)!; - this.props.addDocument?.(newCollection); - this.props.selectDocuments([newCollection]); + this._props.addDocument?.(newCollection); + this._props.selectDocuments([newCollection]); MarqueeOptionsMenu.Instance.fadeOut(true); this.hideMarquee(); - }; + }); /** * This triggers the TabDocView.PinDoc method which is the universal method @@ -405,35 +390,32 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque * This one is unique in that it includes the bounds associated with marquee view. */ @undoBatch - @action - pinWithView = () => { - TabDocView.PinDoc(this.props.Document, { pinViewport: this.Bounds }); + pinWithView = action(() => { + this._props.pinToPres(this._props.Document, { pinViewport: this.Bounds }); MarqueeOptionsMenu.Instance.fadeOut(true); this.hideMarquee(); - }; + }); @undoBatch - @action - collection = (e: KeyboardEvent | React.PointerEvent | undefined, group?: boolean, selection?: Doc[]) => { + collection = action((e: KeyboardEvent | React.PointerEvent | undefined, group?: boolean, selection?: Doc[]) => { const selected = selection ?? this.marqueeSelect(false); const activeFrame = selected.reduce((v, d) => v ?? Cast(d._activeFrame, 'number', null), undefined as number | undefined); if (e instanceof KeyboardEvent ? 'cg'.includes(e.key) : true) { - this.props.removeDocument?.(selected); + this._props.removeDocument?.(selected); } const newCollection = this.getCollection(selected, (e as KeyboardEvent)?.key === 't' ? Docs.Create.StackingDocument : undefined, group); newCollection._freeform_panX = this.Bounds.left + this.Bounds.width / 2; newCollection._freeform_panY = this.Bounds.top + this.Bounds.height / 2; newCollection._currentFrame = activeFrame; - this.props.addDocument?.(newCollection); - this.props.selectDocuments([newCollection]); + this._props.addDocument?.(newCollection); + this._props.selectDocuments([newCollection]); MarqueeOptionsMenu.Instance.fadeOut(true); this.hideMarquee(); - }; + }); @undoBatch - @action - syntaxHighlight = (e: KeyboardEvent | React.PointerEvent | undefined) => { + syntaxHighlight = action((e: KeyboardEvent | React.PointerEvent | undefined) => { const selected = this.marqueeSelect(false); if (e instanceof KeyboardEvent ? e.key === 'i' : true) { const inks = selected.filter(s => s.type === DocumentType.INK); @@ -492,15 +474,15 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque // } const lines = results.filter((r: any) => r.category === 'line'); const text = lines.map((l: any) => l.recognizedText).join('\r\n'); - this.props.addDocument?.(Docs.Create.TextDocument(text, { _width: this.Bounds.width, _height: this.Bounds.height, x: this.Bounds.left + this.Bounds.width, y: this.Bounds.top, title: text })); + this._props.addDocument?.(Docs.Create.TextDocument(text, { _width: this.Bounds.width, _height: this.Bounds.height, x: this.Bounds.left + this.Bounds.width, y: this.Bounds.top, title: text })); }); } - }; + }); @undoBatch summary = action((e: KeyboardEvent | React.PointerEvent | undefined) => { const selected = this.marqueeSelect(false).map(d => { - this.props.removeDocument?.(d); + this._props.removeDocument?.(d); d.x = NumCast(d.x) - this.Bounds.left; d.y = NumCast(d.y) - this.Bounds.top; return d; @@ -520,8 +502,8 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque DocUtils.MakeLink(summary, portal, { link_relationship: 'summary of:summarized by' }); portal.hidden = true; - this.props.addDocument?.(portal); - this.props.addLiveTextDocument(summary); + this._props.addDocument?.(portal); + this._props.addLiveTextDocument(summary); MarqueeOptionsMenu.Instance.fadeOut(true); }); @@ -602,17 +584,17 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque (this.touchesLine(bounds) || this.boundingShape(bounds)) && selection.push(doc); } }; - this.props + this._props .activeDocuments() .filter(doc => !doc.z && !doc._lockedPosition) .map(selectFunc); if (!selection.length && selectBackgrounds) - this.props + this._props .activeDocuments() .filter(doc => doc.z === undefined) .map(selectFunc); if (!selection.length) - this.props + this._props .activeDocuments() .filter(doc => doc.z !== undefined) .map(selectFunc); @@ -621,8 +603,8 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque @computed get marqueeDiv() { const cpt = this._lassoFreehand || !this._visible ? [0, 0] : [this._downX < this._lastX ? this._downX : this._lastX, this._downY < this._lastY ? this._downY : this._lastY]; - const p = this.props.getContainerTransform().transformPoint(cpt[0], cpt[1]); - const v = this._lassoFreehand ? [0, 0] : this.props.getContainerTransform().transformDirection(this._lastX - this._downX, this._lastY - this._downY); + const p = this._props.getContainerTransform().transformPoint(cpt[0], cpt[1]); + const v = this._lassoFreehand ? [0, 0] : this._props.getContainerTransform().transformDirection(this._lastX - this._downX, this._lastY - this._downY); return ( <div className="marquee" @@ -630,8 +612,8 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque transform: `translate(${p[0]}px, ${p[1]}px)`, width: Math.abs(v[0]), height: Math.abs(v[1]), - color: lightOrDark(this.props.Document?.backgroundColor ?? 'white'), - borderColor: lightOrDark(this.props.Document?.backgroundColor ?? 'white'), + color: lightOrDark(this._props.Document?.backgroundColor ?? 'white'), + borderColor: lightOrDark(this._props.Document?.backgroundColor ?? 'white'), zIndex: 2000, }}> {' '} @@ -640,7 +622,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque <polyline // points={this._lassoPts.reduce((s, pt) => s + pt[0] + ',' + pt[1] + ' ', '')} fill="none" - stroke={lightOrDark(this.props.Document?.backgroundColor ?? 'white')} + stroke={lightOrDark(this._props.Document?.backgroundColor ?? 'white')} strokeWidth="1" strokeDasharray="3" /> @@ -651,13 +633,37 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque </div> ); } + MarqueeRef: HTMLDivElement | null = null; + @action + onDragAutoScroll = (e: CustomEvent<React.DragEvent>) => { + if ((e as any).handlePan || this._props.isAnnotationOverlay) return; + (e as any).handlePan = true; + + const bounds = this.MarqueeRef?.getBoundingClientRect(); + if (!this._props.Document._freeform_noAutoPan && !this._props.renderDepth && bounds) { + const dragX = e.detail.clientX; + const dragY = e.detail.clientY; + + const deltaX = dragX - bounds.left < 25 ? -(25 + (bounds.left - dragX)) : bounds.right - dragX < 25 ? 25 - (bounds.right - dragX) : 0; + const deltaY = dragY - bounds.top < 25 ? -(25 + (bounds.top - dragY)) : bounds.bottom - dragY < 25 ? 25 - (bounds.bottom - dragY) : 0; + if (deltaX !== 0 || deltaY !== 0) { + this._props.Document[this._props.panYFieldKey] = NumCast(this._props.Document[this._props.panYFieldKey]) + deltaY / 2; + this._props.Document[this._props.panXFieldKey] = NumCast(this._props.Document[this._props.panXFieldKey]) + deltaX / 2; + } + } + e.stopPropagation(); + }; render() { return ( <div className="marqueeView" + ref={r => { + r?.addEventListener('dashDragAutoScroll', this.onDragAutoScroll as any); + this.MarqueeRef = r; + }} style={{ - overflow: StrCast(this.props.Document._overflow), + overflow: StrCast(this._props.Document._overflow), cursor: [InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool) || this._visible ? 'crosshair' : 'pointer', }} onDragOver={e => e.preventDefault()} diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index cd8b7a0cc..f25872c2b 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -1,4 +1,4 @@ -import { action, computed, Lambda, observable, reaction } from 'mobx'; +import { action, computed, Lambda, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, Opt } from '../../../../fields/Doc'; @@ -7,7 +7,6 @@ import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types import { emptyFunction, returnFalse, returnZero, setupMoveUpEvents } from '../../../../Utils'; import { Docs } from '../../../documents/Documents'; import { DragManager } from '../../../util/DragManager'; -import { SnappingManager } from '../../../util/SnappingManager'; import { Transform } from '../../../util/Transform'; import { undoBatch } from '../../../util/UndoManager'; import { ContextMenu } from '../../ContextMenu'; @@ -17,48 +16,52 @@ import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; import { CollectionSubView } from '../CollectionSubView'; import './CollectionGridView.scss'; import Grid, { Layout } from './Grid'; - @observer export class CollectionGridView extends CollectionSubView() { private _containerRef: React.RefObject<HTMLDivElement> = React.createRef(); private _changeListenerDisposer: Opt<Lambda>; // listens for changes in this.childLayoutPairs private _resetListenerDisposer: Opt<Lambda>; // listens for when the reset button is clicked - @observable private _rowHeight: Opt<number>; // temporary store of row height to make change undoable + @observable private _rowHeight: Opt<number> = undefined; // temporary store of row height to make change undoable @observable private _scroll: number = 0; // required to make sure the decorations box container updates on scroll private dropLocation: object = {}; // sets the drop location for external drops + constructor(props: any) { + super(props); + makeObservable(this); + } + onChildClickHandler = () => ScriptCast(this.Document.onChildClick); @computed get numCols() { - return NumCast(this.props.Document.gridNumCols, 10); + return NumCast(this.Document.gridNumCols, 10); } @computed get rowHeight() { - return this._rowHeight === undefined ? NumCast(this.props.Document.gridRowHeight, 100) : this._rowHeight; + return this._rowHeight === undefined ? NumCast(this.Document.gridRowHeight, 100) : this._rowHeight; } // sets the default width and height of the grid nodes @computed get defaultW() { - return NumCast(this.props.Document.gridDefaultW, 2); + return NumCast(this.Document.gridDefaultW, 2); } @computed get defaultH() { - return NumCast(this.props.Document.gridDefaultH, 2); + return NumCast(this.Document.gridDefaultH, 2); } @computed get colWidthPlusGap() { - return (this.props.PanelWidth() - this.margin) / this.numCols; + return (this._props.PanelWidth() - this.margin) / this.numCols; } @computed get rowHeightPlusGap() { return this.rowHeight + this.margin; } @computed get margin() { - return NumCast(this.props.Document.margin, 10); + return NumCast(this.Document.margin, 10); } // sets the margin between grid nodes @computed get flexGrid() { - return BoolCast(this.props.Document.gridFlex, true); + return BoolCast(this.Document.gridFlex, true); } // is grid static/flexible i.e. whether nodes be moved around and resized @computed get compaction() { - return StrCast(this.props.Document.gridStartCompaction, StrCast(this.props.Document.gridCompaction, 'vertical')); + return StrCast(this.Document.gridStartCompaction, StrCast(this.Document.gridCompaction, 'vertical')); } // is grid static/flexible i.e. whether nodes be moved around and resized /** @@ -91,12 +94,12 @@ export class CollectionGridView extends CollectionSubView() { // updates the layouts if the reset button has been clicked this._resetListenerDisposer = reaction( - () => this.props.Document.gridResetLayout, + () => this.Document.gridResetLayout, reset => { if (reset && this.flexGrid) { this.setLayout(this.childLayoutPairs.map((pair, index) => this.makeLayoutItem(pair.layout, this.unflexedPosition(index)))); } - this.props.Document.gridResetLayout = false; + this.Document.gridResetLayout = false; } ); } @@ -127,7 +130,7 @@ export class CollectionGridView extends CollectionSubView() { * Maps the x- and y- coordinates of the event to a grid cell. */ screenToCell(sx: number, sy: number) { - const pt = this.props.ScreenToLocalTransform().transformPoint(sx, sy); + const pt = this.ScreenToLocalBoxXf().transformPoint(sx, sy); const x = Math.floor(pt[0] / this.colWidthPlusGap); const y = Math.floor((pt[1] + this._scroll) / this.rowHeight); return { x, y }; @@ -156,25 +159,25 @@ export class CollectionGridView extends CollectionSubView() { const xypos = this.flexGrid ? layout : this.unflexedPosition(this.renderedLayoutList.findIndex(l => l.i === layout.i)); const pos = { x: xypos.x * this.colWidthPlusGap + this.margin, y: xypos.y * this.rowHeightPlusGap + this.margin - this._scroll }; - return this.props.ScreenToLocalTransform().translate(-pos.x, -pos.y); + return this.ScreenToLocalBoxXf().translate(-pos.x, -pos.y); }; /** * @returns the layout list converted from JSON */ get savedLayoutList() { - return (this.props.Document.gridLayoutString ? JSON.parse(StrCast(this.props.Document.gridLayoutString)) : []) as Layout[]; + return (this.Document.gridLayoutString ? JSON.parse(StrCast(this.Document.gridLayoutString)) : []) as Layout[]; } /** * Stores the layout list on the Document as JSON */ setLayoutList(layouts: Layout[]) { - this.props.Document.gridLayoutString = JSON.stringify(layouts); + this.Document.gridLayoutString = JSON.stringify(layouts); } - isContentActive = () => this.props.isSelected() || this.props.isContentActive(); - isChildContentActive = () => (this.props.isDocumentActive?.() && (this.props.childDocumentsActive?.() || BoolCast(this.rootDoc.childDocumentsActive)) ? true : undefined); + isContentActive = () => this._props.isSelected() || this._props.isContentActive(); + isChildContentActive = () => (this._props.isDocumentActive?.() && (this._props.childDocumentsActive?.() || BoolCast(this.Document.childDocumentsActive)) ? true : undefined); /** * * @param layout @@ -186,20 +189,20 @@ export class CollectionGridView extends CollectionSubView() { getDisplayDoc(layout: Doc, dxf: () => Transform, width: () => number, height: () => number) { return ( <DocumentView - {...this.props} + {...this._props} NativeWidth={returnZero} NativeHeight={returnZero} - setContentView={emptyFunction} + setContentViewBox={emptyFunction} Document={layout} - DataDoc={layout.resolvedDataDoc as Doc} + TemplateDataDocument={layout.resolvedDataDoc as Doc} isContentActive={this.isChildContentActive} PanelWidth={width} PanelHeight={height} ScreenToLocalTransform={dxf} - whenChildContentsActiveChanged={this.props.whenChildContentsActiveChanged} - onClick={this.onChildClickHandler} - renderDepth={this.props.renderDepth + 1} - dontCenter={this.props.Document.centerY ? undefined : 'y'} + whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged} + onClickScript={this.onChildClickHandler} + renderDepth={this._props.renderDepth + 1} + dontCenter={StrCast(this.layoutDoc.layout_dontCenter) as any} // 'y', 'x', 'xy' /> ); } @@ -219,12 +222,12 @@ export class CollectionGridView extends CollectionSubView() { if (gridLayout) Object.assign(gridLayout, layoutArray.find(layout => layout.i === doc[Id]) || gridLayout); }); - if (this.props.Document.gridStartCompaction) { + if (this.Document.gridStartCompaction) { undoBatch(() => { - this.props.Document.gridCompaction = this.props.Document.gridStartCompaction; + this.Document.gridCompaction = this.Document.gridStartCompaction; this.setLayoutList(savedLayouts); })(); - this.props.Document.gridStartCompaction = undefined; + this.Document.gridStartCompaction = undefined; } else { undoBatch(() => this.setLayoutList(savedLayouts))(); } @@ -246,7 +249,7 @@ export class CollectionGridView extends CollectionSubView() { const height = () => (this.flexGrid ? l.h : this.defaultH) * this.rowHeightPlusGap - this.margin; child && collector.push( - <div key={child.layout[Id]} className={'document-wrapper' + (this.flexGrid && this.props.isSelected() ? '' : ' static')}> + <div key={child.layout[Id]} className={'document-wrapper' + (this.flexGrid && this._props.isSelected() ? '' : ' static')}> {this.getDisplayDoc(child.layout, dxf, width, height)} </div> ); @@ -277,7 +280,6 @@ export class CollectionGridView extends CollectionSubView() { /** * Handles internal drop of Dash documents. */ - @action onInternalDrop = (e: Event, de: DragManager.DropEvent) => { const savedLayouts = this.savedLayoutList; const dropped = de.complete.docDragData?.droppedDocuments; @@ -292,7 +294,6 @@ export class CollectionGridView extends CollectionSubView() { /** * Handles external drop of images/PDFs etc from outside Dash. */ - @action onExternalDrop = async (e: React.DragEvent): Promise<void> => { this.dropLocation = this.screenToCell(e.clientX, e.clientY); super.onExternalDrop(e, {}); @@ -316,7 +317,7 @@ export class CollectionGridView extends CollectionSubView() { e, returnFalse, action(() => { - undoBatch(() => (this.props.Document.gridRowHeight = this._rowHeight))(); + undoBatch(() => (this.Document.gridRowHeight = this._rowHeight))(); this._rowHeight = undefined; }), emptyFunction, @@ -330,8 +331,8 @@ export class CollectionGridView extends CollectionSubView() { */ onContextMenu = () => { const displayOptionsMenu: ContextMenuProps[] = []; - displayOptionsMenu.push({ description: 'Toggle Content Display Style', event: () => (this.props.Document.display = this.props.Document.display ? undefined : 'contents'), icon: 'copy' }); - displayOptionsMenu.push({ description: 'Toggle Vertical Centering', event: () => (this.props.Document.centerY = !this.props.Document.centerY), icon: 'copy' }); + displayOptionsMenu.push({ description: 'Toggle Content Display Style', event: () => (this.Document.display = this.Document.display ? undefined : 'contents'), icon: 'copy' }); + displayOptionsMenu.push({ description: 'Toggle Vertical Centering', event: () => (this.Document.centerY = !this.Document.centerY), icon: 'copy' }); ContextMenu.Instance.addItem({ description: 'Display', subitems: displayOptionsMenu, icon: 'tv' }); }; @@ -339,7 +340,7 @@ export class CollectionGridView extends CollectionSubView() { * Handles text document creation on double click. */ onPointerDown = (e: React.PointerEvent) => { - if (this.props.isContentActive(true)) { + if (this._props.isContentActive()) { setupMoveUpEvents( this, e, @@ -350,8 +351,8 @@ export class CollectionGridView extends CollectionSubView() { undoBatch( action(() => { const text = Docs.Create.TextDocument('', { _width: 150, _height: 50 }); - FormattedTextBox.SelectOnLoad = text[Id]; // track the new text box so we can give it a prop that tells it to focus itself when it's displayed - Doc.AddDocToList(this.props.Document, this.props.fieldKey, text); + FormattedTextBox.SetSelectOnLoad(text); // track the new text box so we can give it a prop that tells it to focus itself when it's displayed + Doc.AddDocToList(this.Document, this._props.fieldKey, text); this.setLayoutList(this.addLayoutItem(this.savedLayoutList, this.makeLayoutItem(text, this.screenToCell(e.clientX, e.clientY)))); }) )(); @@ -359,7 +360,7 @@ export class CollectionGridView extends CollectionSubView() { }, false ); - if (this.props.isSelected(true)) e.stopPropagation(); + if (this._props.isSelected()) e.stopPropagation(); } }; @@ -368,7 +369,7 @@ export class CollectionGridView extends CollectionSubView() { <div className="collectionGridView-contents" ref={this.createDashEventsTarget} - style={{ pointerEvents: !this.props.isContentActive() ? 'none' : undefined }} + style={{ pointerEvents: !this._props.isContentActive() ? 'none' : undefined }} onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown} onDrop={this.onExternalDrop}> @@ -378,29 +379,29 @@ export class CollectionGridView extends CollectionSubView() { style={{ backgroundColor: StrCast(this.layoutDoc._backgroundColor, 'white') }} onWheel={e => e.stopPropagation()} onScroll={action(e => { - if (!this.props.isSelected()) e.currentTarget.scrollTop = this._scroll; + if (!this._props.isSelected()) e.currentTarget.scrollTop = this._scroll; else this._scroll = e.currentTarget.scrollTop; })}> <Grid - width={this.props.PanelWidth()} + width={this._props.PanelWidth()} nodeList={this.contents.length ? this.contents : null} layout={this.contents.length ? this.renderedLayoutList : undefined} - childrenDraggable={this.props.isSelected() ? true : false} + childrenDraggable={this._props.isSelected() ? true : false} numCols={this.numCols} rowHeight={this.rowHeight} setLayout={this.setLayout} - transformScale={this.props.ScreenToLocalTransform().Scale} + transformScale={this.ScreenToLocalBoxXf().Scale} compactType={this.compaction} // determines whether nodes should remain in position, be bound to the top, or to the left - preventCollision={BoolCast(this.props.Document.gridPreventCollision)} // determines whether nodes should move out of the way (i.e. collide) when other nodes are dragged over them + preventCollision={BoolCast(this.Document.gridPreventCollision)} // determines whether nodes should move out of the way (i.e. collide) when other nodes are dragged over them margin={this.margin} /> <input className="rowHeightSlider" type="range" - style={{ width: this.props.PanelHeight() - 30 }} + style={{ width: this._props.PanelHeight() - 30 }} min={1} value={this.rowHeight} - max={this.props.PanelHeight() - 30} + max={this._props.PanelHeight() - 30} onPointerDown={this.onSliderDown} onChange={this.onSliderChange} /> diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index 3d1d87aa0..9145d7ef1 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -1,5 +1,5 @@ -import * as React from 'react'; import { observer } from 'mobx-react'; +import * as React from 'react'; import '../../../../../node_modules/react-grid-layout/css/styles.css'; import '../../../../../node_modules/react-resizable/css/styles.css'; diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.scss b/src/client/views/collections/collectionLinear/CollectionLinearView.scss index d0c14a21d..b8ceec139 100644 --- a/src/client/views/collections/collectionLinear/CollectionLinearView.scss +++ b/src/client/views/collections/collectionLinear/CollectionLinearView.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables'; +@import '../../global/globalCssVariables.module.scss'; @import '../../_nodeModuleOverrides'; .collectionLinearView { @@ -18,9 +18,9 @@ user-select: none; } - > input:not(:checked) ~ &.true { - background-color: transparent; - } + // > input:not(:checked) ~ &.true { + // background-color: transparent; + // } .collectionLinearView { display: flex; diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx index 9a2c79a22..228af78aa 100644 --- a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx +++ b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx @@ -1,24 +1,24 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Tooltip } from '@material-ui/core'; +import { Tooltip } from '@mui/material'; import { Toggle, ToggleType, Type } from 'browndash-components'; -import { action, IReactionDisposer, observable, reaction } from 'mobx'; +import { IReactionDisposer, action, makeObservable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; +import { Utils, emptyFunction, returnEmptyDoclist, returnTrue } from '../../../../Utils'; import { Doc, Opt } from '../../../../fields/Doc'; import { Height, Width } from '../../../../fields/DocSymbols'; import { Id } from '../../../../fields/FieldSymbols'; import { BoolCast, Cast, DocCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types'; -import { emptyFunction, returnEmptyDoclist, returnTrue, Utils } from '../../../../Utils'; import { CollectionViewType } from '../../../documents/DocumentTypes'; import { BranchingTrailManager } from '../../../util/BranchingTrailManager'; import { DocumentManager } from '../../../util/DocumentManager'; import { DragManager, dropActionType } from '../../../util/DragManager'; import { SettingsManager } from '../../../util/SettingsManager'; import { Transform } from '../../../util/Transform'; +import { UndoStack } from '../../UndoStack'; import { DocumentLinksButton } from '../../nodes/DocumentLinksButton'; import { DocumentView } from '../../nodes/DocumentView'; import { LinkDescriptionPopup } from '../../nodes/LinkDescriptionPopup'; -import { UndoStack } from '../../UndoStack'; import { CollectionStackedTimeline } from '../CollectionStackedTimeline'; import { CollectionSubView } from '../CollectionSubView'; import './CollectionLinearView.scss'; @@ -33,12 +33,15 @@ import './CollectionLinearView.scss'; */ @observer export class CollectionLinearView extends CollectionSubView() { - @observable public addMenuToggle = React.createRef<HTMLInputElement>(); - @observable private _selectedIndex = -1; private _dropDisposer?: DragManager.DragDropDisposer; private _widthDisposer?: IReactionDisposer; private _selectedDisposer?: IReactionDisposer; + constructor(props: any) { + super(props); + makeObservable(this); + } + componentWillUnmount() { this._dropDisposer?.(); this._widthDisposer?.(); @@ -48,7 +51,7 @@ export class CollectionLinearView extends CollectionSubView() { componentDidMount() { this._widthDisposer = reaction( - () => 5 + NumCast(this.rootDoc.linearBtnWidth, this.dimension()) + (this.layoutDoc.linearView_IsOpen ? this.childDocs.filter(doc => !doc.hidden).reduce((tot, doc) => (doc[Width]() || this.dimension()) + tot + 4, 0) : 0), + () => 5 + NumCast(this.dataDoc.linearBtnWidth, this.dimension()) + (this.layoutDoc.linearView_IsOpen ? this.childDocs.filter(doc => !doc.hidden).reduce((tot, doc) => (NumCast(doc._width) || this.dimension()) + tot + 4, 0) : 0), width => this.childDocs.length && (this.layoutDoc._width = width), { fireImmediately: true } ); @@ -58,7 +61,7 @@ export class CollectionLinearView extends CollectionSubView() { if (ele) this._dropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.layoutDoc); }; - dimension = () => NumCast(this.rootDoc._height); + dimension = () => NumCast(this.layoutDoc._height); getTransform = (ele: Opt<HTMLDivElement>) => { if (!ele) return Transform.Identity(); const { scale, translateX, translateY } = Utils.GetScreenTransform(ele); @@ -76,16 +79,16 @@ export class CollectionLinearView extends CollectionSubView() { @action changeDescriptionSetting = () => { - if (LinkDescriptionPopup.showDescriptions) { - if (LinkDescriptionPopup.showDescriptions === 'ON') { - LinkDescriptionPopup.showDescriptions = 'OFF'; - LinkDescriptionPopup.descriptionPopup = false; + if (LinkDescriptionPopup.Instance.showDescriptions) { + if (LinkDescriptionPopup.Instance.showDescriptions === 'ON') { + LinkDescriptionPopup.Instance.showDescriptions = 'OFF'; + LinkDescriptionPopup.Instance.display = false; } else { - LinkDescriptionPopup.showDescriptions = 'ON'; + LinkDescriptionPopup.Instance.showDescriptions = 'ON'; } } else { - LinkDescriptionPopup.showDescriptions = 'OFF'; - LinkDescriptionPopup.descriptionPopup = false; + LinkDescriptionPopup.Instance.showDescriptions = 'OFF'; + LinkDescriptionPopup.Instance.display = false; } }; @@ -107,7 +110,7 @@ export class CollectionLinearView extends CollectionSubView() { <Tooltip title={<div className="dash-tooltip">{'Toggle description pop-up'} </div>} placement="top"> <span className="bottomPopup-descriptions" onClick={this.changeDescriptionSetting}> - Labels: {LinkDescriptionPopup.showDescriptions ? LinkDescriptionPopup.showDescriptions : 'ON'} + Labels: {LinkDescriptionPopup.Instance.showDescriptions ? LinkDescriptionPopup.Instance.showDescriptions : 'ON'} </span> </Tooltip> @@ -126,8 +129,8 @@ export class CollectionLinearView extends CollectionSubView() { Currently playing: {CollectionStackedTimeline.CurrentlyPlaying.map((clip, i) => ( <> - <span className="audio-title" onPointerDown={() => DocumentManager.Instance.showDocument(clip.rootDoc, { willZoomCentered: true })}> - {clip.rootDoc.title + (i === CollectionStackedTimeline.CurrentlyPlaying.length - 1 ? ' ' : ',')} + <span className="audio-title" onPointerDown={() => DocumentManager.Instance.showDocument(clip.Document, { willZoomCentered: true })}> + {clip.Document.title + (i === CollectionStackedTimeline.CurrentlyPlaying.length - 1 ? ' ' : ',')} </span> <FontAwesomeIcon icon={!clip.ComponentView?.IsPlaying?.() ? 'play' : 'pause'} size="lg" onPointerDown={() => clip.ComponentView?.TogglePause?.()} />{' '} <FontAwesomeIcon icon="times" size="lg" onPointerDown={() => clip.ComponentView?.Pause?.()} />{' '} @@ -144,8 +147,8 @@ export class CollectionLinearView extends CollectionSubView() { switch (doc.layout) { case '<LinkingUI>': return this.getLinkUI(); case '<CurrentlyPlayingUI>': return this.getCurrentlyPlayingUI(); - case '<UndoStack>': return <UndoStack key={doc[Id]} width={200} height={40} inline={true} />; - case '<Branching>': return Doc.UserDoc().isBranchingMode ? <BranchingTrailManager /> : null; + case '<UndoStack>': return <UndoStack key={doc[Id]}/>; + case '<Branching>': return Doc.UserDoc().isBranchingMode ? <BranchingTrailManager key={doc[Id]} /> : null; } const nested = doc._type_collection === CollectionViewType.Linear; @@ -170,28 +173,27 @@ export class CollectionLinearView extends CollectionSubView() { }}> <DocumentView Document={doc} - isContentActive={this.props.isContentActive} + isContentActive={this._props.isContentActive} isDocumentActive={returnTrue} - addDocument={this.props.addDocument} - moveDocument={this.props.moveDocument} - addDocTab={this.props.addDocTab} + addDocument={this._props.addDocument} + moveDocument={this._props.moveDocument} + addDocTab={this._props.addDocTab} pinToPres={emptyFunction} - dragAction={(this.layoutDoc.childDragAction ?? this.props.childDragAction) as dropActionType} - rootSelected={this.props.isSelected} - removeDocument={this.props.removeDocument} + dragAction={(this.layoutDoc.childDragAction ?? this._props.childDragAction) as dropActionType} + rootSelected={this.rootSelected} + removeDocument={this._props.removeDocument} ScreenToLocalTransform={docXf} PanelWidth={doc[Width]} PanelHeight={nested || doc._height ? doc[Height] : this.dimension} - renderDepth={this.props.renderDepth + 1} - dontRegisterView={BoolCast(this.rootDoc.childDontRegisterViews)} + renderDepth={this._props.renderDepth + 1} + dontRegisterView={BoolCast(this.Document.childDontRegisterViews)} focus={emptyFunction} - styleProvider={this.props.styleProvider} - docViewPath={returnEmptyDoclist} + styleProvider={this._props.styleProvider} + containerViewPath={this.childContainerViewPath} whenChildContentsActiveChanged={emptyFunction} - bringToFront={emptyFunction} - childFilters={this.props.childFilters} - childFiltersByRanges={this.props.childFiltersByRanges} - searchFilterDocs={this.props.searchFilterDocs} + childFilters={this._props.childFilters} + childFiltersByRanges={this._props.childFiltersByRanges} + searchFilterDocs={this._props.searchFilterDocs} hideResizeHandles={true} /> </div> @@ -205,8 +207,8 @@ export class CollectionLinearView extends CollectionSubView() { const menuOpener = ( <Toggle - text={Cast(this.props.Document.icon, 'string', null)} - icon={Cast(this.props.Document.icon, 'string', null) ? undefined : <FontAwesomeIcon color={SettingsManager.userColor} icon={isExpanded ? 'minus' : 'plus'} />} + text={Cast(this.Document.icon, 'string', null)} + icon={Cast(this.Document.icon, 'string', null) ? undefined : <FontAwesomeIcon color={SettingsManager.userColor} icon={isExpanded ? 'minus' : 'plus'} />} color={SettingsManager.userColor} background={SettingsManager.userVariantColor} type={Type.TERT} @@ -215,7 +217,7 @@ export class CollectionLinearView extends CollectionSubView() { toggleStatus={BoolCast(this.layoutDoc.linearView_IsOpen)} onClick={() => { this.layoutDoc.linearView_IsOpen = !isExpanded; - ScriptCast(this.rootDoc.onClick)?.script.run({ this: this.rootDoc }, console.log); + ScriptCast(this.Document.onClick)?.script.run({ this: this.Document }, console.log); }} tooltip={isExpanded ? 'Close' : 'Open'} fillWidth={true} diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.scss b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.scss index cb0d5e03f..f983fd815 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.scss +++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.scss @@ -1,6 +1,6 @@ .collectionMulticolumnView_contents { display: flex; - overflow: hidden; + //overflow: hidden; // bcz: turned of to allow highlighting to appear when there is no border (e.g, for a component of the slide template) width: 100%; height: 100%; @@ -17,7 +17,7 @@ } .contentFittingDocumentView { - width: unset; + margin: auto; } .label-wrapper { diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx index 81453c0b8..b181b59ce 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx @@ -1,16 +1,16 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; import { Button } from 'browndash-components'; -import { action, computed } from 'mobx'; +import { action, computed, makeObservable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; +import { emptyFunction, returnFalse } from '../../../../Utils'; import { Doc, DocListCast } from '../../../../fields/Doc'; import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types'; -import { returnFalse } from '../../../../Utils'; import { DragManager, dropActionType } from '../../../util/DragManager'; import { SettingsManager } from '../../../util/SettingsManager'; import { Transform } from '../../../util/Transform'; -import { undoable, undoBatch } from '../../../util/UndoManager'; +import { undoBatch, undoable } from '../../../util/UndoManager'; import { DocumentView } from '../../nodes/DocumentView'; import { CollectionSubView } from '../CollectionSubView'; import './CollectionMulticolumnView.scss'; @@ -37,6 +37,11 @@ const resizerWidth = 8; @observer export class CollectionMulticolumnView extends CollectionSubView() { + constructor(props: any) { + super(props); + makeObservable(this); + } + /** * @returns the list of layout documents whose width unit is * *, denoting that it will be displayed with a ratio, not fixed pixel, value @@ -122,7 +127,7 @@ export class CollectionMulticolumnView extends CollectionSubView() { private get totalRatioAllocation(): number | undefined { const layoutInfoLen = this.resolvedLayoutInformation.widthSpecifiers.length; if (layoutInfoLen > 0 && this.totalFixedAllocation !== undefined) { - return this.props.PanelWidth() - (this.totalFixedAllocation + resizerWidth * (layoutInfoLen - 1)) - 2 * NumCast(this.props.Document._xMargin); + return this._props.PanelWidth() - (this.totalFixedAllocation + resizerWidth * (layoutInfoLen - 1)) - 2 * NumCast(this.Document._xMargin); } } @@ -184,7 +189,7 @@ export class CollectionMulticolumnView extends CollectionSubView() { let offset = 0; for (const { layout: candidate } of this.childLayoutPairs) { if (candidate === layout) { - return this.props.ScreenToLocalTransform().translate(-offset / (this.props.NativeDimScaling?.() || 1), 0); + return this.ScreenToLocalBoxXf().translate(-offset / (this._props.NativeDimScaling?.() || 1), 0); } offset += this.lookupPixels(candidate) + resizerWidth; } @@ -192,7 +197,6 @@ export class CollectionMulticolumnView extends CollectionSubView() { }; @undoBatch - @action onInternalDrop = (e: Event, de: DragManager.DropEvent) => { let dropInd = -1; if (de.complete.docDragData && this._mainCont) { @@ -219,8 +223,8 @@ export class CollectionMulticolumnView extends CollectionSubView() { if (this.childDocs.includes(d)) { if (dropInd > this.childDocs.indexOf(d)) dropInd--; } - Doc.RemoveDocFromList(this.rootDoc, this.props.fieldKey, d); - Doc.AddDocToList(this.rootDoc, this.props.fieldKey, d, DocListCast(this.rootDoc[this.props.fieldKey])[dropInd], undefined, dropInd === -1); + Doc.RemoveDocFromList(this.dataDoc, this._props.fieldKey, d); + Doc.AddDocToList(this.dataDoc, this._props.fieldKey, d, DocListCast(this.dataDoc[this._props.fieldKey])[dropInd], undefined, dropInd === -1); } }) ); @@ -233,51 +237,57 @@ export class CollectionMulticolumnView extends CollectionSubView() { onChildClickHandler = () => ScriptCast(this.Document.onChildClick); onChildDoubleClickHandler = () => ScriptCast(this.Document.onChildDoubleClick); - isContentActive = () => this.props.isSelected() || this.props.isContentActive() || this.props.isAnyChildContentActive(); + isContentActive = () => this._props.isSelected() || this._props.isContentActive() || this._props.isAnyChildContentActive(); isChildContentActive = () => { - const childDocsActive = this.props.childDocumentsActive?.() ?? this.rootDoc.childDocumentsActive; - return this.props.isContentActive?.() === false || childDocsActive === false + const childDocsActive = this._props.childDocumentsActive?.() ?? this.Document.childDocumentsActive; + return this._props.isContentActive?.() === false || childDocsActive === false ? false // - : this.props.isDocumentActive?.() && childDocsActive - ? true - : undefined; + : this._props.isDocumentActive?.() && childDocsActive + ? true + : undefined; }; - getDisplayDoc = (layout: Doc, dxf: () => Transform, width: () => number, height: () => number, shouldNotScale: () => boolean) => { + getDisplayDoc = (childLayout: Doc) => { + const width = () => this.lookupPixels(childLayout); + const height = () => this._props.PanelHeight() - 2 * NumCast(this.layoutDoc._yMargin) - (BoolCast(this.layoutDoc.showWidthLabels) ? 20 : 0); + const dxf = () => + this.lookupIndividualTransform(childLayout) + .translate(-NumCast(this.layoutDoc._xMargin), -NumCast(this.layoutDoc._yMargin)) + .scale(this._props.NativeDimScaling?.() || 1); + const shouldNotScale = () => this._props.fitContentsToBox?.() || BoolCast(childLayout.freeform_fitContentsToBox); return ( <DocumentView - Document={layout} - DataDoc={layout.resolvedDataDoc as Doc} - styleProvider={this.props.styleProvider} - docViewPath={this.props.docViewPath} - LayoutTemplate={this.props.childLayoutTemplate} - LayoutTemplateString={this.props.childLayoutString} - renderDepth={this.props.renderDepth + 1} + Document={childLayout} + TemplateDataDocument={childLayout.resolvedDataDoc as Doc} + styleProvider={this._props.styleProvider} + containerViewPath={this.childContainerViewPath} + LayoutTemplate={this._props.childLayoutTemplate} + LayoutTemplateString={this._props.childLayoutString} + renderDepth={this._props.renderDepth + 1} PanelWidth={width} PanelHeight={height} - shouldNotScale={shouldNotScale} rootSelected={this.rootSelected} - dragAction={(this.props.Document.childDragAction ?? this.props.childDragAction) as dropActionType} - onClick={this.onChildClickHandler} - onDoubleClick={this.onChildDoubleClickHandler} + dragAction={StrCast(this.Document.childDragAction, this._props.childDragAction) as dropActionType} + onClickScript={this.onChildClickHandler} + onDoubleClickScript={this.onChildDoubleClickHandler} suppressSetHeight={true} ScreenToLocalTransform={dxf} isContentActive={this.isChildContentActive} - isDocumentActive={this.props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this.props.isDocumentActive : this.isContentActive} - hideResizeHandles={this.props.childHideResizeHandles?.()} - hideDecorationTitle={this.props.childHideDecorationTitle?.()} - fitContentsToBox={this.props.fitContentsToBox} - focus={this.props.focus} + isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive} + hideResizeHandles={childLayout.layout_fitWidth || this._props.childHideResizeHandles ? true : false} + hideDecorationTitle={this._props.childHideDecorationTitle} + fitContentsToBox={this._props.fitContentsToBox} + focus={this._props.focus} childFilters={this.childDocFilters} childFiltersByRanges={this.childDocRangeFilters} searchFilterDocs={this.searchFilterDocs} - dontRegisterView={this.props.dontRegisterView} - addDocument={this.props.addDocument} - moveDocument={this.props.moveDocument} - removeDocument={this.props.removeDocument} - whenChildContentsActiveChanged={this.props.whenChildContentsActiveChanged} - addDocTab={this.props.addDocTab} - pinToPres={this.props.pinToPres} - bringToFront={returnFalse} + dontRegisterView={this._props.dontRegisterView} + addDocument={this._props.addDocument} + moveDocument={this._props.moveDocument} + removeDocument={this._props.removeDocument} + whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged} + addDocTab={this._props.addDocTab} + pinToPres={this._props.pinToPres} + dontCenter={StrCast(this.layoutDoc.layout_dontCenter) as any} // 'y', 'x', 'xy' /> ); }; @@ -288,34 +298,23 @@ export class CollectionMulticolumnView extends CollectionSubView() { @computed private get contents(): JSX.Element[] | null { const { childLayoutPairs } = this; - const { Document, PanelHeight } = this.props; const collector: JSX.Element[] = []; for (let i = 0; i < childLayoutPairs.length; i++) { const { layout } = childLayoutPairs[i]; - const aspect = Doc.NativeAspect(layout, undefined, true); - const width = () => this.lookupPixels(layout); - const height = () => PanelHeight() - 2 * NumCast(Document._yMargin) - (BoolCast(Document.showWidthLabels) ? 20 : 0); - const docwidth = () => (layout._layout_forceReflow ? width() : Math.min(height() * aspect, width())); - const docheight = () => Math.min(docwidth() / aspect, height()); - const dxf = () => - this.lookupIndividualTransform(layout) - .translate(-NumCast(Document._xMargin) - (width() - docwidth()) / 2, -NumCast(Document._yMargin)) - .scale(this.props.NativeDimScaling?.() || 1); - const shouldNotScale = () => this.props.fitContentsToBox?.() || BoolCast(layout.freeform_fitContentsToBox); collector.push( - <Tooltip title={'Tab: ' + StrCast(layout.title)}> - <div className="document-wrapper" key={'wrapper' + i} style={{ width: width() }}> - {this.getDisplayDoc(layout, dxf, docwidth, docheight, shouldNotScale)} - <Button tooltip="Remove document from header bar" icon={<FontAwesomeIcon icon="times" size="lg" />} onClick={undoable(e => this.props.removeDocument?.(layout), 'close doc')} color={SettingsManager.userColor} /> - <WidthLabel layout={layout} collectionDoc={Document} /> + <Tooltip title={'Tab: ' + StrCast(layout.title)} key={'wrapper' + i}> + <div className="document-wrapper" style={{ flexDirection: 'column', width: this.lookupPixels(layout) }}> + {this.getDisplayDoc(layout)} + <Button tooltip="Remove document from header bar" icon={<FontAwesomeIcon icon="times" size="lg" />} onClick={undoable(e => this._props.removeDocument?.(layout), 'close doc')} color={SettingsManager.userColor} /> + <WidthLabel layout={layout} collectionDoc={this.Document} /> </div> </Tooltip>, <ResizeBar width={resizerWidth} key={'resizer' + i} - styleProvider={this.props.styleProvider} - isContentActive={this.props.isContentActive} - select={this.props.select} + styleProvider={this._props.styleProvider} + isContentActive={this._props.isContentActive} + select={this._props.select} columnUnitLength={this.getColumnUnitLength} toLeft={layout} toRight={childLayoutPairs[i + 1]?.layout} @@ -326,18 +325,18 @@ export class CollectionMulticolumnView extends CollectionSubView() { return collector; } - render(): JSX.Element { + render() { return ( <div - className={'collectionMulticolumnView_contents'} + className="collectionMulticolumnView_contents" ref={this.createDashEventsTarget} style={{ - width: `calc(100% - ${2 * NumCast(this.props.Document._xMargin)}px)`, - height: `calc(100% - ${2 * NumCast(this.props.Document._yMargin)}px)`, - marginLeft: NumCast(this.props.Document._xMargin), - marginRight: NumCast(this.props.Document._xMargin), - marginTop: NumCast(this.props.Document._yMargin), - marginBottom: NumCast(this.props.Document._yMargin), + width: `calc(100% - ${2 * NumCast(this.Document._xMargin)}px)`, + height: `calc(100% - ${2 * NumCast(this.Document._yMargin)}px)`, + marginLeft: NumCast(this.Document._xMargin), + marginRight: NumCast(this.Document._xMargin), + marginTop: NumCast(this.Document._yMargin), + marginBottom: NumCast(this.Document._yMargin), }}> {this.contents} </div> diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.scss b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.scss index ec7200a03..f44eacb2a 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.scss +++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.scss @@ -1,6 +1,6 @@ .collectionMultirowView_contents { display: flex; - overflow: hidden; + //overflow: hidden; // bcz: turned of to allow highlighting to appear when there is no border (e.g, for a component of the slide template) width: 100%; height: 100%; flex-direction: column; @@ -10,11 +10,6 @@ flex-direction: row; height: 100%; align-items: center; - margin: auto; - - .contentFittingDocumentView { - height: unset; - } .label-wrapper { display: flex; diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx index 04cfc5456..659f7ccdc 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx @@ -1,9 +1,9 @@ -import { action, computed } from 'mobx'; +import { action, computed, makeObservable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; +import { emptyFunction, returnFalse } from '../../../../Utils'; import { Doc, DocListCast } from '../../../../fields/Doc'; import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types'; -import { returnFalse } from '../../../../Utils'; import { DragManager, dropActionType } from '../../../util/DragManager'; import { Transform } from '../../../util/Transform'; import { undoBatch } from '../../../util/UndoManager'; @@ -12,7 +12,6 @@ import { CollectionSubView } from '../CollectionSubView'; import './CollectionMultirowView.scss'; import HeightLabel from './MultirowHeightLabel'; import ResizeBar from './MultirowResizer'; - interface HeightSpecifier { magnitude: number; unit: string; @@ -33,6 +32,11 @@ const resizerHeight = 8; @observer export class CollectionMultirowView extends CollectionSubView() { + constructor(props: any) { + super(props); + makeObservable(this); + } + /** * @returns the list of layout documents whose width unit is * *, denoting that it will be displayed with a ratio, not fixed pixel, value @@ -118,7 +122,7 @@ export class CollectionMultirowView extends CollectionSubView() { private get totalRatioAllocation(): number | undefined { const layoutInfoLen = this.resolvedLayoutInformation.heightSpecifiers.length; if (layoutInfoLen > 0 && this.totalFixedAllocation !== undefined) { - return this.props.PanelHeight() - (this.totalFixedAllocation + resizerHeight * (layoutInfoLen - 1)) - 2 * NumCast(this.props.Document._yMargin); + return this._props.PanelHeight() - (this.totalFixedAllocation + resizerHeight * (layoutInfoLen - 1)) - 2 * NumCast(this.Document._yMargin); } } @@ -180,7 +184,7 @@ export class CollectionMultirowView extends CollectionSubView() { let offset = 0; for (const { layout: candidate } of this.childLayoutPairs) { if (candidate === layout) { - return this.props.ScreenToLocalTransform().translate(0, -offset / (this.props.NativeDimScaling?.() || 1)); + return this.ScreenToLocalBoxXf().translate(0, -offset / (this._props.NativeDimScaling?.() || 1)); } offset += this.lookupPixels(candidate) + resizerHeight; } @@ -188,7 +192,6 @@ export class CollectionMultirowView extends CollectionSubView() { }; @undoBatch - @action onInternalDrop = (e: Event, de: DragManager.DropEvent) => { let dropInd = -1; if (de.complete.docDragData && this._mainCont) { @@ -215,8 +218,8 @@ export class CollectionMultirowView extends CollectionSubView() { if (this.childDocs.includes(d)) { if (dropInd > this.childDocs.indexOf(d)) dropInd--; } - Doc.RemoveDocFromList(this.rootDoc, this.props.fieldKey, d); - Doc.AddDocToList(this.rootDoc, this.props.fieldKey, d, DocListCast(this.rootDoc[this.props.fieldKey])[dropInd], undefined, dropInd === -1); + Doc.RemoveDocFromList(this.dataDoc, this._props.fieldKey, d); + Doc.AddDocToList(this.dataDoc, this._props.fieldKey, d, DocListCast(this.dataDoc[this._props.fieldKey])[dropInd], undefined, dropInd === -1); } }) ); @@ -229,51 +232,56 @@ export class CollectionMultirowView extends CollectionSubView() { onChildClickHandler = () => ScriptCast(this.Document.onChildClick); onChildDoubleClickHandler = () => ScriptCast(this.Document.onChildDoubleClick); - isContentActive = () => this.props.isSelected() || this.props.isContentActive() || this.props.isAnyChildContentActive(); + isContentActive = () => this._props.isSelected() || this._props.isContentActive() || this._props.isAnyChildContentActive(); isChildContentActive = () => { - const childDocsActive = this.props.childDocumentsActive?.() ?? this.rootDoc.childDocumentsActive; - return this.props.isContentActive?.() === false || childDocsActive === false + const childDocsActive = this._props.childDocumentsActive?.() ?? this.Document.childDocumentsActive; + return this._props.isContentActive?.() === false || childDocsActive === false ? false // - : this.props.isDocumentActive?.() && childDocsActive - ? true - : undefined; + : this._props.isDocumentActive?.() && childDocsActive + ? true + : undefined; }; - getDisplayDoc = (layout: Doc, dxf: () => Transform, width: () => number, height: () => number, shouldNotScale: () => boolean) => { + getDisplayDoc = (layout: Doc) => { + const height = () => this.lookupPixels(layout); + const width = () => this._props.PanelWidth() - 2 * NumCast(this.layoutDoc._xMargin) - (BoolCast(this.layoutDoc.showWidthLabels) ? 20 : 0); + const dxf = () => + this.lookupIndividualTransform(layout) + .translate(-NumCast(this.layoutDoc._xMargin), -NumCast(this.layoutDoc._yMargin)) + .scale(this._props.NativeDimScaling?.() || 1); + const shouldNotScale = () => this._props.fitContentsToBox?.() || BoolCast(layout.freeform_fitContentsToBox); return ( <DocumentView Document={layout} - DataDoc={layout.resolvedDataDoc as Doc} - styleProvider={this.props.styleProvider} - docViewPath={this.props.docViewPath} - LayoutTemplate={this.props.childLayoutTemplate} - LayoutTemplateString={this.props.childLayoutString} - renderDepth={this.props.renderDepth + 1} + TemplateDataDocument={layout.resolvedDataDoc as Doc} + styleProvider={this._props.styleProvider} + containerViewPath={this.childContainerViewPath} + LayoutTemplate={this._props.childLayoutTemplate} + LayoutTemplateString={this._props.childLayoutString} + renderDepth={this._props.renderDepth + 1} PanelWidth={width} PanelHeight={height} - shouldNotScale={shouldNotScale} rootSelected={this.rootSelected} - dropAction={StrCast(this.rootDoc.childDragAction) as dropActionType} - onClick={this.onChildClickHandler} - onDoubleClick={this.onChildDoubleClickHandler} + dragAction={StrCast(this.Document.childDragAction, this._props.childDragAction) as dropActionType} + onClickScript={this.onChildClickHandler} + onDoubleClickScript={this.onChildDoubleClickHandler} ScreenToLocalTransform={dxf} isContentActive={this.isChildContentActive} - isDocumentActive={this.props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this.props.isDocumentActive : this.isContentActive} - hideResizeHandles={this.props.childHideResizeHandles?.()} - hideDecorationTitle={this.props.childHideDecorationTitle?.()} - fitContentsToBox={this.props.fitContentsToBox} - dragAction={this.props.childDragAction} - focus={this.props.focus} + isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive} + hideResizeHandles={layout.layout_fitWidth || this._props.childHideResizeHandles ? true : false} + hideDecorationTitle={this._props.childHideDecorationTitle} + fitContentsToBox={this._props.fitContentsToBox} + focus={this._props.focus} childFilters={this.childDocFilters} childFiltersByRanges={this.childDocRangeFilters} searchFilterDocs={this.searchFilterDocs} - dontRegisterView={this.props.dontRegisterView} - addDocument={this.props.addDocument} - moveDocument={this.props.moveDocument} - removeDocument={this.props.removeDocument} - whenChildContentsActiveChanged={this.props.whenChildContentsActiveChanged} - addDocTab={this.props.addDocTab} - pinToPres={this.props.pinToPres} - bringToFront={returnFalse} + dontRegisterView={this._props.dontRegisterView} + addDocument={this._props.addDocument} + moveDocument={this._props.moveDocument} + removeDocument={this._props.removeDocument} + whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged} + addDocTab={this._props.addDocTab} + pinToPres={this._props.pinToPres} + dontCenter={StrCast(this.layoutDoc.layout_dontCenter) as any} // 'y', 'x', 'xy' /> ); }; @@ -284,29 +292,18 @@ export class CollectionMultirowView extends CollectionSubView() { @computed private get contents(): JSX.Element[] | null { const { childLayoutPairs } = this; - const { Document, PanelWidth } = this.props; const collector: JSX.Element[] = []; for (let i = 0; i < childLayoutPairs.length; i++) { const { layout } = childLayoutPairs[i]; - const aspect = Doc.NativeAspect(layout, undefined, true); - const height = () => this.lookupPixels(layout); - const width = () => PanelWidth() - 2 * NumCast(Document._xMargin) - (BoolCast(Document.showWidthLabels) ? 20 : 0); - const docheight = () => Math.min(width() / aspect, height()); - const docwidth = () => (layout._layout_forceReflow ? width() : Math.min(width(), docheight() * aspect)); - const dxf = () => - this.lookupIndividualTransform(layout) - .translate(-NumCast(Document._xMargin) - (width() - docwidth()) / 2, -NumCast(Document._yMargin) - (height() - docheight()) / 2) - .scale(this.props.NativeDimScaling?.() || 1); - const shouldNotScale = () => this.props.fitContentsToBox?.() || BoolCast(layout.freeform_fitContentsToBox); collector.push( - <div className="document-wrapper" style={{ height: height() }} key={'wrapper' + i}> - {this.getDisplayDoc(layout, dxf, docwidth, docheight, shouldNotScale)} - <HeightLabel layout={layout} collectionDoc={Document} /> + <div className="document-wrapper" style={{ flexDirection: 'row', height: this.lookupPixels(layout) }} key={'wrapper' + i}> + {this.getDisplayDoc(layout)} + <HeightLabel layout={layout} collectionDoc={this.Document} /> </div>, <ResizeBar height={resizerHeight} - styleProvider={this.props.styleProvider} - isContentActive={this.props.isContentActive} + styleProvider={this._props.styleProvider} + isContentActive={this._props.isContentActive} key={'resizer' + i} columnUnitLength={this.getRowUnitLength} toTop={layout} @@ -318,17 +315,17 @@ export class CollectionMultirowView extends CollectionSubView() { return collector; } - render(): JSX.Element { + render() { return ( <div - className={'collectionMultirowView_contents'} + className="collectionMultirowView_contents" style={{ - width: `calc(100% - ${2 * NumCast(this.props.Document._xMargin)}px)`, - height: `calc(100% - ${2 * NumCast(this.props.Document._yMargin)}px)`, - marginLeft: NumCast(this.props.Document._xMargin), - marginRight: NumCast(this.props.Document._xMargin), - marginTop: NumCast(this.props.Document._yMargin), - marginBottom: NumCast(this.props.Document._yMargin), + width: `calc(100% - ${2 * NumCast(this.Document._xMargin)}px)`, + height: `calc(100% - ${2 * NumCast(this.Document._yMargin)}px)`, + marginLeft: NumCast(this.Document._xMargin), + marginRight: NumCast(this.Document._xMargin), + marginTop: NumCast(this.Document._yMargin), + marginBottom: NumCast(this.Document._yMargin), }} ref={this.createDashEventsTarget}> {this.contents} diff --git a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx index 868b1140d..d580d9c52 100644 --- a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx +++ b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx @@ -1,16 +1,16 @@ -import * as React from 'react'; +import { action } from 'mobx'; import { observer } from 'mobx-react'; -import { observable, action } from 'mobx'; +import * as React from 'react'; import { Doc } from '../../../../fields/Doc'; import { NumCast, StrCast } from '../../../../fields/Types'; -import { DimUnit } from './CollectionMulticolumnView'; import { UndoManager } from '../../../util/UndoManager'; -import { StyleProviderFunc } from '../../nodes/DocumentView'; import { StyleProp } from '../../StyleProvider'; +import { StyleProviderFuncType } from '../../nodes/FieldView'; +import { DimUnit } from './CollectionMulticolumnView'; interface ResizerProps { width: number; - styleProvider?: StyleProviderFunc; + styleProvider?: StyleProviderFuncType; isContentActive?: () => boolean | undefined; columnUnitLength(): number | undefined; toLeft?: Doc; @@ -18,12 +18,8 @@ interface ResizerProps { select: (isCtrlPressed: boolean) => void; } -const resizerOpacity = 1; - @observer export default class ResizeBar extends React.Component<ResizerProps> { - @observable private isHoverActive = false; - @observable private isResizingActive = false; private _resizeUndo?: UndoManager.Batch; @action @@ -35,7 +31,6 @@ export default class ResizeBar extends React.Component<ResizerProps> { window.removeEventListener('pointerup', this.onPointerUp); window.addEventListener('pointermove', this.onPointerMove); window.addEventListener('pointerup', this.onPointerUp); - this.isResizingActive = true; this._resizeUndo = UndoManager.StartBatch('multcol resizing'); }; @@ -80,8 +75,6 @@ export default class ResizeBar extends React.Component<ResizerProps> { @action private onPointerUp = () => { - this.isResizingActive = false; - this.isHoverActive = false; window.removeEventListener('pointermove', this.onPointerMove); window.removeEventListener('pointerup', this.onPointerUp); this._resizeUndo?.end(); @@ -96,9 +89,7 @@ export default class ResizeBar extends React.Component<ResizerProps> { pointerEvents: this.props.isContentActive?.() ? 'all' : 'none', width: this.props.width, backgroundColor: !this.props.isContentActive?.() ? '' : this.props.styleProvider?.(undefined, undefined, StyleProp.WidgetColor), - }} - onPointerEnter={action(() => (this.isHoverActive = true))} - onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))}> + }}> <div className={'multiColumnResizer-hdl'} onPointerDown={e => this.registerResizing(e)} /> </div> ); diff --git a/src/client/views/collections/collectionMulticolumn/MulticolumnWidthLabel.tsx b/src/client/views/collections/collectionMulticolumn/MulticolumnWidthLabel.tsx index 9985a9fba..a9579d931 100644 --- a/src/client/views/collections/collectionMulticolumn/MulticolumnWidthLabel.tsx +++ b/src/client/views/collections/collectionMulticolumn/MulticolumnWidthLabel.tsx @@ -1,27 +1,25 @@ -import * as React from "react"; -import { observer } from "mobx-react"; -import { computed } from "mobx"; -import { Doc } from "../../../../fields/Doc"; -import { NumCast, StrCast, BoolCast } from "../../../../fields/Types"; -import { EditableView } from "../../EditableView"; -import { DimUnit } from "./CollectionMulticolumnView"; +import { computed } from 'mobx'; +import { observer } from 'mobx-react'; +import * as React from 'react'; +import { Doc } from '../../../../fields/Doc'; +import { BoolCast, NumCast, StrCast } from '../../../../fields/Types'; +import { EditableView } from '../../EditableView'; +import { DimUnit } from './CollectionMulticolumnView'; interface WidthLabelProps { layout: Doc; collectionDoc: Doc; - decimals?: number; } @observer export default class WidthLabel extends React.Component<WidthLabelProps> { - @computed private get contents() { - const { layout, decimals } = this.props; + const { layout } = this.props; const getUnit = () => StrCast(layout.dimUnit); - const getMagnitude = () => String(+NumCast(layout.dimMagnitude).toFixed(decimals ?? 3)); + const getMagnitude = () => String(+NumCast(layout.dimMagnitude).toFixed(3)); return ( - <div className={"label-wrapper"}> + <div className={'label-wrapper'}> <EditableView GetValue={getMagnitude} SetValue={value => { @@ -50,7 +48,6 @@ export default class WidthLabel extends React.Component<WidthLabelProps> { } render() { - return BoolCast(this.props.collectionDoc.showWidthLabels) ? this.contents : (null); + return BoolCast(this.props.collectionDoc.showWidthLabels) ? this.contents : null; } - -}
\ No newline at end of file +} diff --git a/src/client/views/collections/collectionMulticolumn/MultirowHeightLabel.tsx b/src/client/views/collections/collectionMulticolumn/MultirowHeightLabel.tsx index aa5439fa4..878c7ff3c 100644 --- a/src/client/views/collections/collectionMulticolumn/MultirowHeightLabel.tsx +++ b/src/client/views/collections/collectionMulticolumn/MultirowHeightLabel.tsx @@ -1,10 +1,10 @@ -import * as React from "react"; -import { observer } from "mobx-react"; -import { computed } from "mobx"; -import { Doc } from "../../../../fields/Doc"; -import { NumCast, StrCast, BoolCast } from "../../../../fields/Types"; -import { EditableView } from "../../EditableView"; -import { DimUnit } from "./CollectionMultirowView"; +import { computed } from 'mobx'; +import { observer } from 'mobx-react'; +import * as React from 'react'; +import { Doc } from '../../../../fields/Doc'; +import { BoolCast, NumCast, StrCast } from '../../../../fields/Types'; +import { EditableView } from '../../EditableView'; +import { DimUnit } from './CollectionMultirowView'; interface HeightLabelProps { layout: Doc; @@ -14,14 +14,13 @@ interface HeightLabelProps { @observer export default class HeightLabel extends React.Component<HeightLabelProps> { - @computed private get contents() { const { layout, decimals } = this.props; const getUnit = () => StrCast(layout.dimUnit); const getMagnitude = () => String(+NumCast(layout.dimMagnitude).toFixed(decimals ?? 3)); return ( - <div className={"label-wrapper"}> + <div className={'label-wrapper'}> <EditableView GetValue={getMagnitude} SetValue={value => { @@ -50,7 +49,6 @@ export default class HeightLabel extends React.Component<HeightLabelProps> { } render() { - return BoolCast(this.props.collectionDoc.showHeightLabels) ? this.contents : (null); + return BoolCast(this.props.collectionDoc.showHeightLabels) ? this.contents : null; } - -}
\ No newline at end of file +} diff --git a/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx b/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx index 5a9d6a82c..73d08d5ef 100644 --- a/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx +++ b/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx @@ -1,28 +1,24 @@ -import * as React from 'react'; +import { action } from 'mobx'; import { observer } from 'mobx-react'; -import { observable, action } from 'mobx'; +import * as React from 'react'; import { Doc } from '../../../../fields/Doc'; import { NumCast, StrCast } from '../../../../fields/Types'; -import { DimUnit } from './CollectionMultirowView'; import { UndoManager } from '../../../util/UndoManager'; import { StyleProp } from '../../StyleProvider'; -import { StyleProviderFunc } from '../../nodes/DocumentView'; +import { StyleProviderFuncType } from '../../nodes/FieldView'; +import { DimUnit } from './CollectionMultirowView'; interface ResizerProps { height: number; - styleProvider?: StyleProviderFunc; + styleProvider?: StyleProviderFuncType; isContentActive?: () => boolean | undefined; columnUnitLength(): number | undefined; toTop?: Doc; toBottom?: Doc; } -const resizerOpacity = 1; - @observer export default class ResizeBar extends React.Component<ResizerProps> { - @observable private isHoverActive = false; - @observable private isResizingActive = false; private _resizeUndo?: UndoManager.Batch; @action @@ -33,7 +29,6 @@ export default class ResizeBar extends React.Component<ResizerProps> { window.removeEventListener('pointerup', this.onPointerUp); window.addEventListener('pointermove', this.onPointerMove); window.addEventListener('pointerup', this.onPointerUp); - this.isResizingActive = true; this._resizeUndo = UndoManager.StartBatch('multcol resizing'); }; @@ -78,8 +73,6 @@ export default class ResizeBar extends React.Component<ResizerProps> { @action private onPointerUp = () => { - this.isResizingActive = false; - this.isHoverActive = false; window.removeEventListener('pointermove', this.onPointerMove); window.removeEventListener('pointerup', this.onPointerUp); this._resizeUndo?.end(); @@ -94,9 +87,7 @@ export default class ResizeBar extends React.Component<ResizerProps> { pointerEvents: this.props.isContentActive?.() ? 'all' : 'none', height: this.props.height, backgroundColor: !this.props.isContentActive?.() ? '' : this.props.styleProvider?.(undefined, undefined, StyleProp.WidgetColor), - }} - onPointerEnter={action(() => (this.isHoverActive = true))} - onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))}> + }}> <div className={'multiRowResizer-hdl'} onPointerDown={e => this.registerResizing(e)} /> </div> ); diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 76bd392a5..29d121974 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables.scss'; +@import '../../global/globalCssVariables.module.scss'; .collectionSchemaView { cursor: default; @@ -210,8 +210,9 @@ border: 1px solid $medium-gray; overflow-x: hidden; overflow-y: auto; - padding: 5px; display: inline-flex; + padding: 0; + align-items: center; } .schema-row { diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index f73c037f4..581425d77 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -1,9 +1,8 @@ -import React = require('react'); import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, observable, ObservableMap, observe, trace } from 'mobx'; +import { action, computed, makeObservable, observable, ObservableMap, observe } from 'mobx'; import { observer } from 'mobx-react'; -import { computedFn } from 'mobx-utils'; -import { Doc, DocListCast, Field, NumListCast, StrListCast } from '../../../../fields/Doc'; +import * as React from 'react'; +import { Doc, DocListCast, Field, NumListCast, Opt, StrListCast } from '../../../../fields/Doc'; import { Id } from '../../../../fields/FieldSymbols'; import { List } from '../../../../fields/List'; import { listSpec } from '../../../../fields/Schema'; @@ -17,9 +16,11 @@ import { undoable, undoBatch } from '../../../util/UndoManager'; import { ContextMenu } from '../../ContextMenu'; import { EditableView } from '../../EditableView'; import { Colors } from '../../global/globalEnums'; -import { DocFocusOptions, DocumentView } from '../../nodes/DocumentView'; +import { DocumentView } from '../../nodes/DocumentView'; +import { FocusViewOptions, FieldViewProps } from '../../nodes/FieldView'; import { KeyValueBox } from '../../nodes/KeyValueBox'; -import { DefaultStyleProvider } from '../../StyleProvider'; +import { ObservableReactComponent } from '../../ObservableReactComponent'; +import { DefaultStyleProvider, StyleProp } from '../../StyleProvider'; import { CollectionSubView } from '../CollectionSubView'; import './CollectionSchemaView.scss'; import { SchemaColumnHeader } from './SchemaColumnHeader'; @@ -58,6 +59,11 @@ export class CollectionSchemaView extends CollectionSubView() { private _tableContentRef: HTMLDivElement | null = null; private _menuTarget = React.createRef<HTMLDivElement>(); + constructor(props: any) { + super(props); + makeObservable(this); + } + static _rowHeight: number = 50; static _rowSingleLineHeight: number = 32; public static _minColWidth: number = 25; @@ -69,16 +75,16 @@ export class CollectionSchemaView extends CollectionSubView() { @observable _menuKeys: string[] = []; @observable _rowEles: ObservableMap = new ObservableMap<Doc, HTMLDivElement>(); @observable _colEles: HTMLDivElement[] = []; - @observable _displayColumnWidths: number[] | undefined; - @observable _columnMenuIndex: number | undefined; + @observable _displayColumnWidths: number[] | undefined = undefined; + @observable _columnMenuIndex: number | undefined = undefined; @observable _newFieldWarning: string = ''; @observable _makeNewField: boolean = false; @observable _newFieldDefault: any = 0; @observable _newFieldType: ColumnType = ColumnType.Number; @observable _menuValue: string = ''; - @observable _filterColumnIndex: number | undefined; + @observable _filterColumnIndex: number | undefined = undefined; @observable _filterSearchValue: string = ''; - @observable _selectedCell: [Doc, number] | undefined; + @observable _selectedCell: [Doc, number] | undefined = undefined; // target HTMLelement portal for showing a popup menu to edit cell values. public get MenuTarget() { @@ -86,7 +92,17 @@ export class CollectionSchemaView extends CollectionSubView() { } @computed get _selectedDocs() { - return SelectionManager.Docs().filter(doc => Doc.AreProtosEqual(DocCast(doc.embedContainer), this.rootDoc)); + const selected = SelectionManager.Docs.filter(doc => Doc.AreProtosEqual(DocCast(doc.embedContainer), this.Document)); + if (!selected.length) { + for (const sel of SelectionManager.Docs) { + const contextPath = DocumentManager.GetContextPath(sel, true); + if (contextPath.includes(this.Document)) { + const parentInd = contextPath.indexOf(this.Document); + return parentInd < contextPath.length - 1 ? [contextPath[parentInd + 1]] : []; + } + } + } + return selected; } @computed get documentKeys() { @@ -98,7 +114,7 @@ export class CollectionSchemaView extends CollectionSubView() { } @computed get tableWidth() { - return this.props.PanelWidth() - this.previewWidth - (this.previewWidth === 0 ? 0 : CollectionSchemaView._previewDividerWidth); + return this._props.PanelWidth() - this.previewWidth - (this.previewWidth === 0 ? 0 : CollectionSchemaView._previewDividerWidth); } @computed get columnKeys() { @@ -130,14 +146,13 @@ export class CollectionSchemaView extends CollectionSubView() { return BoolCast(this.layoutDoc.sortDesc); } - @action componentDidMount() { - this.props.setContentView?.(this); + this._props.setContentViewBox?.(this); document.addEventListener('keydown', this.onKeyDown); Object.entries(this._documentOptions).forEach((pair: [string, FInfo]) => this.fieldInfos.set(pair[0], pair[1])); this._keysDisposer = observe( - this.rootDoc[this.fieldKey ?? 'data'] as List<Doc>, + this.dataDoc[this.fieldKey ?? 'data'] as List<Doc>, change => { switch (change.type as any) { case 'splice': @@ -145,7 +160,7 @@ export class CollectionSchemaView extends CollectionSubView() { (change as any).added.forEach((doc: Doc) => // for each document added Doc.GetAllPrototypes(doc.value as Doc).forEach(proto => // for all of its prototypes (and itself) Object.keys(proto).forEach(action(key => // check if any of its keys are new, and add them - !this.fieldInfos.get(key) && this.fieldInfos.set(key, new FInfo('')))))); + !this.fieldInfos.get(key) && this.fieldInfos.set(key, new FInfo(key, key === 'author')))))); break; case 'update': //let oldValue = change.oldValue; // fill this in if the entire child list will ever be reassigned with a new list } @@ -230,19 +245,14 @@ export class CollectionSchemaView extends CollectionSubView() { }; @undoBatch - @action setColumnSort = (field: string | undefined, desc: boolean = false) => { this.layoutDoc.sortField = field; this.layoutDoc.sortDesc = desc; }; - addRow = (doc: Doc | Doc[]) => { - const result: boolean = this.addDocument(doc); - return result; - }; + addRow = (doc: Doc | Doc[]) => this.addDocument(doc); @undoBatch - @action changeColumnKey = (index: number, newKey: string, defaultVal?: any) => { if (!this.documentKeys.includes(newKey)) { this.addNewKey(newKey, defaultVal); @@ -254,7 +264,6 @@ export class CollectionSchemaView extends CollectionSubView() { }; @undoBatch - @action addColumn = (key: string, defaultVal?: any) => { if (!this.documentKeys.includes(key)) { this.addNewKey(key, defaultVal); @@ -275,7 +284,6 @@ export class CollectionSchemaView extends CollectionSubView() { addNewKey = (key: string, defaultVal: any) => this.childDocs.forEach(doc => (doc[key] = defaultVal)); @undoBatch - @action removeColumn = (index: number) => { if (this.columnKeys.length === 1) return; const currWidths = this.storedColumnWidths.slice(); @@ -314,8 +322,8 @@ export class CollectionSchemaView extends CollectionSubView() { change = this._displayColumnWidths[shrinking] - CollectionSchemaView._minColWidth; } - this._displayColumnWidths[shrinking] -= change * this.props.ScreenToLocalTransform().Scale; - this._displayColumnWidths[growing] += change * this.props.ScreenToLocalTransform().Scale; + this._displayColumnWidths[shrinking] -= change * this.ScreenToLocalBoxXf().Scale; + this._displayColumnWidths[growing] += change * this.ScreenToLocalBoxXf().Scale; return false; } @@ -329,7 +337,6 @@ export class CollectionSchemaView extends CollectionSubView() { }; @undoBatch - @action moveColumn = (fromIndex: number, toIndex: number) => { let currKeys = this.columnKeys.slice(); currKeys.splice(toIndex, 0, currKeys.splice(fromIndex, 1)[0]); @@ -373,7 +380,7 @@ export class CollectionSchemaView extends CollectionSubView() { @action highlightDropColumn = (e: PointerEvent) => { e.stopPropagation(); - const mouseX = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY)[0]; + const mouseX = this.ScreenToLocalBoxXf().transformPoint(e.clientX, e.clientY)[0]; const index = this.findDropIndex(mouseX); this._colEles.forEach((colRef, i) => { let leftStyle = ''; @@ -410,8 +417,8 @@ export class CollectionSchemaView extends CollectionSubView() { @action clearSelection = () => SelectionManager.DeselectAll(); - selectRows = (rootDoc: Doc, lastSelected: Doc) => { - const index = this.rowIndex(rootDoc); + selectRows = (doc: Doc, lastSelected: Doc) => { + const index = this.rowIndex(doc); const lastSelectedRow = this.rowIndex(lastSelected); const startRow = Math.min(lastSelectedRow, index); const endRow = Math.max(lastSelectedRow, index); @@ -431,10 +438,9 @@ export class CollectionSchemaView extends CollectionSubView() { setDropIndex = (index: number) => (this._closestDropIndex = index); - @action onInternalDrop = (e: Event, de: DragManager.DropEvent) => { if (de.complete.columnDragData) { - const mouseX = this.props.ScreenToLocalTransform().transformPoint(de.x, de.y)[0]; + const mouseX = this.ScreenToLocalBoxXf().transformPoint(de.x, de.y)[0]; const index = this.findDropIndex(mouseX); this.moveColumn(de.complete.columnDragData.colIndex, index ?? de.complete.columnDragData.colIndex); @@ -467,7 +473,6 @@ export class CollectionSchemaView extends CollectionSubView() { return false; }; - @action onExternalDrop = async (e: React.DragEvent): Promise<void> => { super.onExternalDrop(e, {}, undoBatch(action(docus => docus.map((doc: Doc) => this.addDocument(doc))))); }; @@ -479,7 +484,7 @@ export class CollectionSchemaView extends CollectionSubView() { const nativeWidth = this._previewRef!.getBoundingClientRect(); const minWidth = 40; const maxWidth = 1000; - const movedWidth = this.props.ScreenToLocalTransform().transformDirection(nativeWidth.right - e.clientX, 0)[0]; + const movedWidth = this.ScreenToLocalBoxXf().transformDirection(nativeWidth.right - e.clientX, 0)[0]; const width = movedWidth < minWidth ? minWidth : movedWidth > maxWidth ? maxWidth : movedWidth; this.layoutDoc.schema_previewWidth = width; return false; @@ -493,18 +498,18 @@ export class CollectionSchemaView extends CollectionSubView() { ContextMenu.Instance.displayMenu(x, y, undefined, true); }; - focusDocument = (doc: Doc, options: DocFocusOptions) => { + focusDocument = (doc: Doc, options: FocusViewOptions) => { Doc.BrushDoc(doc); this.scrollToDoc(doc, options); return undefined; }; - scrollToDoc = (doc: Doc, options: DocFocusOptions) => { + scrollToDoc = (doc: Doc, options: FocusViewOptions) => { const found = this._tableContentRef && Array.from(this._tableContentRef.getElementsByClassName('documentView-node')).find((node: any) => node.id === doc[Id]); if (found) { const rect = found.getBoundingClientRect(); - const localRect = this.props.ScreenToLocalTransform().transformBounds(rect.left, rect.top, rect.width, rect.height); - if (localRect.y < this.rowHeightFunc() || localRect.y + localRect.height > this.props.PanelHeight()) { + const localRect = this.ScreenToLocalBoxXf().transformBounds(rect.left, rect.top, rect.width, rect.height); + if (localRect.y < this.rowHeightFunc() || localRect.y + localRect.height > this._props.PanelHeight()) { let focusSpeed = options.zoomTime ?? 50; smoothScroll(focusSpeed, this._tableContentRef!, localRect.y + this._tableContentRef!.scrollTop - this.rowHeightFunc(), options.easeFunc); return focusSpeed; @@ -550,9 +555,8 @@ export class CollectionSchemaView extends CollectionSubView() { }; setColumnValues = (key: string, value: string) => { - let success: boolean = true; - this.childDocs.forEach(doc => success && KeyValueBox.SetField(doc, key, value)); - return success; + this.childDocs.forEach(doc => KeyValueBox.SetField(doc, key, value)); + return true; }; @action @@ -577,9 +581,7 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action - closeFilterMenu = () => { - this._filterColumnIndex = undefined; - }; + closeFilterMenu = () => (this._filterColumnIndex = undefined); openContextMenu = (x: number, y: number, index: number) => { this.closeColumnMenu(); @@ -754,7 +756,7 @@ export class CollectionSchemaView extends CollectionSubView() { @computed get renderFilterOptions() { const keyOptions: string[] = []; const columnKey = this.columnKeys[this._filterColumnIndex!]; - const allDocs = DocListCast(this.dataDoc[this.props.fieldKey]); + const allDocs = DocListCast(this.dataDoc[this._props.fieldKey]); allDocs.forEach(doc => { const value = StrCast(doc[columnKey]); if (!keyOptions.includes(value) && value !== '' && (this._filterSearchValue === '' || value.includes(this._filterSearchValue))) { @@ -778,9 +780,9 @@ export class CollectionSchemaView extends CollectionSubView() { onClick={e => e.stopPropagation()} onChange={action(e => { if (e.target.checked) { - Doc.setDocFilter(this.props.Document, columnKey, key, 'check'); + Doc.setDocFilter(this.Document, columnKey, key, 'check'); } else { - Doc.setDocFilter(this.props.Document, columnKey, key, 'remove'); + Doc.setDocFilter(this.Document, columnKey, key, 'remove'); } })} checked={bool} @@ -827,8 +829,8 @@ export class CollectionSchemaView extends CollectionSubView() { } rowHeightFunc = () => (BoolCast(this.layoutDoc._schema_singleLine) ? CollectionSchemaView._rowSingleLineHeight : CollectionSchemaView._rowHeight); sortedDocsFunc = () => this.sortedDocs; - isContentActive = () => this.props.isSelected() || this.props.isContentActive(); - screenToLocal = () => this.props.ScreenToLocalTransform().translate(-this.tableWidth, 0); + isContentActive = () => this._props.isSelected() || this._props.isContentActive(); + screenToLocal = () => this.ScreenToLocalBoxXf().translate(-this.tableWidth, 0); previewWidthFunc = () => this.previewWidth; render() { return ( @@ -836,8 +838,8 @@ export class CollectionSchemaView extends CollectionSubView() { <div ref={this._menuTarget} style={{ background: 'red', top: 0, left: 0, position: 'absolute', zIndex: 10000 }}></div> <div className="schema-table" - style={{ width: `calc(100% - ${this.previewWidth + 4}px)` }} - onWheel={e => this.props.isContentActive() && e.stopPropagation()} + style={{ width: `calc(100% - ${this.previewWidth}px)` }} + onWheel={e => this._props.isContentActive() && e.stopPropagation()} ref={r => { // prevent wheel events from passively propagating up through containers r?.addEventListener('wheel', (e: WheelEvent) => {}, { passive: false }); @@ -863,7 +865,7 @@ export class CollectionSchemaView extends CollectionSubView() { openContextMenu={this.openContextMenu} dragColumn={this.dragColumn} setColRef={this.setColRef} - isContentActive={this.props.isContentActive} + isContentActive={this._props.isContentActive} /> ))} </div> @@ -889,16 +891,15 @@ export class CollectionSchemaView extends CollectionSubView() { {Array.from(this._selectedDocs).lastElement() && ( <DocumentView Document={Array.from(this._selectedDocs).lastElement()} - DataDoc={undefined} fitContentsToBox={returnTrue} dontCenter={'y'} onClickScriptDisable="always" focus={emptyFunction} defaultDoubleClick={returnIgnore} - renderDepth={this.props.renderDepth + 1} + renderDepth={this._props.renderDepth + 1} rootSelected={this.rootSelected} PanelWidth={this.previewWidthFunc} - PanelHeight={this.props.PanelHeight} + PanelHeight={this._props.PanelHeight} isContentActive={returnTrue} isDocumentActive={returnFalse} ScreenToLocalTransform={this.screenToLocal} @@ -906,14 +907,13 @@ export class CollectionSchemaView extends CollectionSubView() { childFiltersByRanges={this.childDocRangeFilters} searchFilterDocs={this.searchFilterDocs} styleProvider={DefaultStyleProvider} - docViewPath={returnEmptyDoclist} - moveDocument={this.props.moveDocument} + containerViewPath={returnEmptyDoclist} + moveDocument={this._props.moveDocument} addDocument={this.addRow} - removeDocument={this.props.removeDocument} + removeDocument={this._props.removeDocument} whenChildContentsActiveChanged={returnFalse} - addDocTab={this.props.addDocTab} - pinToPres={this.props.pinToPres} - bringToFront={returnFalse} + addDocTab={this._props.addDocTab} + pinToPres={this._props.pinToPres} /> )} </div> @@ -932,51 +932,72 @@ interface CollectionSchemaViewDocsProps { @observer class CollectionSchemaViewDocs extends React.Component<CollectionSchemaViewDocsProps> { - tableWidthFunc = () => this.props.schema.tableWidth; - childScreenToLocal = computedFn((index: number) => () => this.props.schema.props.ScreenToLocalTransform().translate(0, -this.props.rowHeight() - index * this.props.rowHeight())); render() { return ( <div className="schema-table-content" ref={this.props.setRef} style={{ height: `calc(100% - ${CollectionSchemaView._newNodeInputHeight + this.props.rowHeight()}px)` }}> - {this.props.childDocs().docs.map((doc: Doc, index: number) => { - const dataDoc = !doc.isTemplateDoc && !doc.isTemplateForField ? undefined : this.props.schema.props.DataDoc; - return ( - <div className="schema-row-wrapper" style={{ height: this.props.rowHeight() }}> - <DocumentView - key={doc[Id]} - {...this.props.schema.props} - LayoutTemplate={this.props.schema.props.childLayoutTemplate} - LayoutTemplateString={SchemaRowBox.LayoutString(this.props.schema.props.fieldKey)} - Document={doc} - DataDoc={dataDoc} - yPadding={index} - renderDepth={this.props.schema.props.renderDepth + 1} - PanelWidth={this.tableWidthFunc} - PanelHeight={this.props.rowHeight} - styleProvider={DefaultStyleProvider} - waitForDoubleClickToClick={returnNever} - defaultDoubleClick={returnIgnore} - dragAction="move" - onClickScriptDisable="always" - focus={this.props.schema.focusDocument} - childFilters={this.props.schema.childDocFilters} - childFiltersByRanges={this.props.schema.childDocRangeFilters} - searchFilterDocs={this.props.schema.searchFilterDocs} - rootSelected={this.props.schema.rootSelected} - ScreenToLocalTransform={this.childScreenToLocal(index)} - bringToFront={emptyFunction} - isDocumentActive={this.props.schema.props.childDocumentsActive?.() ? this.props.schema.props.isDocumentActive : this.props.schema.isContentActive} - isContentActive={emptyFunction} - whenChildContentsActiveChanged={this.props.schema.props.whenChildContentsActiveChanged} - hideDecorations={true} - hideTitle={true} - hideDocumentButtonBar={true} - hideLinkAnchors={true} - layout_fitWidth={returnTrue} - /> - </div> - ); - })} + {this.props.childDocs().docs.map((doc: Doc, index: number) => ( + <div key={doc[Id]} className="schema-row-wrapper" style={{ height: this.props.rowHeight() }}> + <CollectionSchemaViewDoc doc={doc} schema={this.props.schema} index={index} rowHeight={this.props.rowHeight} /> + </div> + ))} </div> ); } } + +interface CollectionSchemaViewDocProps { + schema: CollectionSchemaView; + index: number; + doc: Doc; + rowHeight: () => number; +} + +@observer +class CollectionSchemaViewDoc extends ObservableReactComponent<CollectionSchemaViewDocProps> { + constructor(props: any) { + super(props); + makeObservable(this); + } + + tableWidthFunc = () => this._props.schema.tableWidth; + screenToLocalXf = () => this._props.schema.ScreenToLocalBoxXf().translate(0, -this._props.rowHeight() - this._props.index * this._props.rowHeight()); + noOpacityStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string) => { + if (property === StyleProp.Opacity) return 1; + return DefaultStyleProvider(doc, props, property); + }; + render() { + return ( + <DocumentView + key={this._props.doc[Id]} + {...this._props.schema._props} + containerViewPath={this._props.schema.childContainerViewPath} + LayoutTemplate={this._props.schema._props.childLayoutTemplate} + LayoutTemplateString={SchemaRowBox.LayoutString(this._props.schema._props.fieldKey, this._props.index)} + Document={this._props.doc} + renderDepth={this._props.schema._props.renderDepth + 1} + PanelWidth={this.tableWidthFunc} + PanelHeight={this._props.rowHeight} + styleProvider={this.noOpacityStyleProvider} + waitForDoubleClickToClick={returnNever} + defaultDoubleClick={returnIgnore} + dragAction="move" + onClickScriptDisable="always" + focus={this._props.schema.focusDocument} + childFilters={this._props.schema.childDocFilters} + childFiltersByRanges={this._props.schema.childDocRangeFilters} + searchFilterDocs={this._props.schema.searchFilterDocs} + rootSelected={this._props.schema.rootSelected} + ScreenToLocalTransform={this.screenToLocalXf} + dragWhenActive={true} + isDocumentActive={this._props.schema._props.childDocumentsActive?.() ? this._props.schema._props.isDocumentActive : this._props.schema.isContentActive} + isContentActive={emptyFunction} + whenChildContentsActiveChanged={this._props.schema._props.whenChildContentsActiveChanged} + hideDecorations={true} + hideTitle={true} + hideDocumentButtonBar={true} + hideLinkAnchors={true} + layout_fitWidth={returnTrue} + /> + ); + } +} diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index 65e47f441..5f8b412be 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -1,7 +1,7 @@ -import React = require('react'); import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, observable } from 'mobx'; +import { action, observable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { emptyFunction, setupMoveUpEvents } from '../../../../Utils'; import { Colors } from '../../global/globalEnums'; import './CollectionSchemaView.scss'; @@ -26,7 +26,7 @@ export interface SchemaColumnHeaderProps { export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps> { @observable _ref: HTMLDivElement | null = null; - @computed get fieldKey() { + get fieldKey() { return this.props.columnKeys[this.props.columnIndex]; } diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 4e418728f..f2fe0dde7 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -1,12 +1,16 @@ -import React = require('react'); -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { computed } from 'mobx'; +import { IconButton, Size } from 'browndash-components'; +import { computed, makeObservable } from 'mobx'; import { observer } from 'mobx-react'; import { computedFn } from 'mobx-utils'; +import * as React from 'react'; +import { CgClose, CgLock, CgLockUnlock } from 'react-icons/cg'; +import { FaExternalLinkAlt } from 'react-icons/fa'; +import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../../../Utils'; import { Doc } from '../../../../fields/Doc'; import { BoolCast } from '../../../../fields/Types'; import { DragManager } from '../../../util/DragManager'; import { SnappingManager } from '../../../util/SnappingManager'; +import { Transform } from '../../../util/Transform'; import { undoable } from '../../../util/UndoManager'; import { ViewBoxBaseComponent } from '../../DocComponent'; import { Colors } from '../../global/globalEnums'; @@ -15,49 +19,51 @@ import { FieldView, FieldViewProps } from '../../nodes/FieldView'; import { CollectionSchemaView } from './CollectionSchemaView'; import './CollectionSchemaView.scss'; import { SchemaTableCell } from './SchemaTableCell'; -import { Transform } from '../../../util/Transform'; -import { IconButton, Size } from 'browndash-components'; -import { CgClose } from 'react-icons/cg'; -import { FaExternalLinkAlt } from 'react-icons/fa'; -import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../../../Utils'; +interface SchemaRowBoxProps extends FieldViewProps { + rowIndex: number; +} @observer -export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() { - public static LayoutString(fieldKey: string) { - return FieldView.LayoutString(SchemaRowBox, fieldKey); +export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() { + public static LayoutString(fieldKey: string, rowIndex: number) { + return FieldView.LayoutString(SchemaRowBox, fieldKey).replace('fieldKey', `rowIndex={${rowIndex}} fieldKey`); } - private _ref: HTMLDivElement | null = null; + constructor(props: SchemaRowBoxProps) { + super(props); + makeObservable(this); + } + bounds = () => this._ref?.getBoundingClientRect(); @computed get schemaView() { - return this.props.DocumentView?.().props.docViewPath().lastElement()?.ComponentView as CollectionSchemaView; + return this.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionSchemaView; } @computed get schemaDoc() { - return this.props.DocumentView?.().props.docViewPath().lastElement()?.rootDoc; + return this.DocumentView?.().containerViewPath?.().lastElement()?.Document; } @computed get rowIndex() { - return this.schemaView?.rowIndex(this.rootDoc) ?? -1; + return this.schemaView?.rowIndex(this.Document) ?? -1; } componentDidMount(): void { - this.props.setContentView?.(this); + this._props.setContentViewBox?.(this); } select = (ctrlKey: boolean, shiftKey: boolean) => { if (!this.schemaView) return; const lastSelected = Array.from(this.schemaView._selectedDocs).lastElement(); - if (shiftKey && lastSelected) this.schemaView.selectRows(this.rootDoc, lastSelected); + if (shiftKey && lastSelected) this.schemaView.selectRows(this.Document, lastSelected); else { - this.props.select?.(ctrlKey); + this._props.select?.(ctrlKey); } }; onPointerEnter = (e: any) => { - if (SnappingManager.GetIsDragging() && this.props.isContentActive()) { + if (SnappingManager.IsDragging && this._props.isContentActive()) { document.removeEventListener('pointermove', this.onPointerMove); document.addEventListener('pointermove', this.onPointerMove); } @@ -101,20 +107,36 @@ export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() { return ( <div className="schema-row" - style={{ height: this.props.PanelHeight(), backgroundColor: this.props.isSelected() ? Colors.LIGHT_BLUE : undefined }} + style={{ height: this._props.PanelHeight(), backgroundColor: this._props.isSelected() ? Colors.LIGHT_BLUE : undefined }} onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave} ref={(row: HTMLDivElement | null) => { - row && this.schemaView?.addRowRef?.(this.rootDoc, row); + row && this.schemaView?.addRowRef?.(this.Document, row); this._ref = row; }}> <div className="row-menu" style={{ width: CollectionSchemaView._rowMenuWidth, - pointerEvents: !this.props.isContentActive() ? 'none' : undefined, + pointerEvents: !this._props.isContentActive() ? 'none' : undefined, }}> <IconButton + tooltip="whether document interations are enabled" + icon={this.Document._lockedPosition ? <CgLockUnlock size="12px" /> : <CgLock size="12px" />} + size={Size.XSMALL} + onPointerDown={e => + setupMoveUpEvents( + this, + e, + returnFalse, + emptyFunction, + undoable(e => { + e.stopPropagation(); + Doc.toggleLockedPosition(this.Document); + }, 'Delete Row') + ) + }></IconButton> + <IconButton tooltip="close" icon={<CgClose size={'16px'} />} size={Size.XSMALL} @@ -126,7 +148,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() { emptyFunction, undoable(e => { e.stopPropagation(); - this.props.removeDocument?.(this.rootDoc); + this._props.removeDocument?.(this.Document); }, 'Delete Row') ) } @@ -143,7 +165,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() { emptyFunction, undoable(e => { e.stopPropagation(); - this.props.addDocTab(this.rootDoc, OpenWhere.addRight); + this._props.addDocTab(this.Document, OpenWhere.addRight); }, 'Open schema Doc preview') ) } @@ -153,13 +175,13 @@ export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() { {this.schemaView?.columnKeys?.map((key, index) => ( <SchemaTableCell key={key} - Document={this.rootDoc} + Document={this.Document} col={index} fieldKey={key} allowCRs={false} // to enter text with new lines, must use \n columnWidth={this.columnWidth(index)} rowHeight={this.schemaView.rowHeightFunc} - isRowActive={this.props.isContentActive} + isRowActive={this._props.isContentActive} getFinfo={this.getFinfo} selectCell={this.selectCell} deselectCell={this.deselectCell} @@ -170,7 +192,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() { transform={() => { const ind = index === this.schemaView.columnKeys.length - 1 ? this.schemaView.columnKeys.length - 3 : index; const x = this.schemaView?.displayColumnWidths.reduce((p, c, i) => (i <= ind ? p + c : p), 0); - const y = (this.props.yPadding ?? 0) * this.props.PanelHeight(); + const y = (this._props.rowIndex ?? 0) * this._props.PanelHeight(); return new Transform(x + CollectionSchemaView._rowMenuWidth, y, 1); }} /> diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index 9d5b533d1..dbaa6e110 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -1,27 +1,28 @@ -import * as React from 'react'; -import Select, { MenuPlacement } from 'react-select'; -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import { extname } from 'path'; +import * as React from 'react'; import DatePicker from 'react-datepicker'; +import Select from 'react-select'; +import { Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero } from '../../../../Utils'; import { DateField } from '../../../../fields/DateField'; import { Doc, DocListCast, Field } from '../../../../fields/Doc'; import { RichTextField } from '../../../../fields/RichTextField'; import { BoolCast, Cast, DateCast, DocCast, FieldValue, StrCast } from '../../../../fields/Types'; import { ImageField } from '../../../../fields/URLField'; -import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero, Utils } from '../../../../Utils'; import { FInfo } from '../../../documents/Documents'; import { DocFocusOrOpen } from '../../../util/DocumentManager'; import { Transform } from '../../../util/Transform'; -import { undoable, undoBatch } from '../../../util/UndoManager'; +import { undoBatch, undoable } from '../../../util/UndoManager'; import { EditableView } from '../../EditableView'; +import { ObservableReactComponent } from '../../ObservableReactComponent'; +import { DefaultStyleProvider } from '../../StyleProvider'; import { Colors } from '../../global/globalEnums'; -import { OpenWhere } from '../../nodes/DocumentView'; -import { FieldView, FieldViewProps } from '../../nodes/FieldView'; -import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; +import { OpenWhere, returnEmptyDocViewList } from '../../nodes/DocumentView'; +import { FieldViewProps } from '../../nodes/FieldView'; import { KeyValueBox } from '../../nodes/KeyValueBox'; -import { DefaultStyleProvider } from '../../StyleProvider'; -import { CollectionSchemaView, ColumnType, FInfotoColType } from './CollectionSchemaView'; +import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; +import { ColumnType, FInfotoColType } from './CollectionSchemaView'; import './CollectionSchemaView.scss'; export interface SchemaTableCellProps { @@ -47,7 +48,12 @@ export interface SchemaTableCellProps { } @observer -export class SchemaTableCell extends React.Component<SchemaTableCellProps> { +export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellProps> { + constructor(props: SchemaTableCellProps) { + super(props); + makeObservable(this); + } + static addFieldDoc = (doc: Doc, where: OpenWhere) => { DocFocusOrOpen(doc); return true; @@ -69,15 +75,13 @@ export class SchemaTableCell extends React.Component<SchemaTableCellProps> { const fieldProps: FieldViewProps = { childFilters: returnEmptyFilter, childFiltersByRanges: returnEmptyFilter, + docViewPath: returnEmptyDocViewList, searchFilterDocs: returnEmptyDoclist, styleProvider: DefaultStyleProvider, - docViewPath: returnEmptyDoclist, - rootSelected: returnFalse, isSelected: returnFalse, setHeight: returnFalse, select: emptyFunction, dragAction: 'move', - bringToFront: emptyFunction, renderDepth: 1, isContentActive: returnFalse, whenChildContentsActiveChanged: emptyFunction, @@ -97,12 +101,12 @@ export class SchemaTableCell extends React.Component<SchemaTableCellProps> { } @computed get selected() { - const selected: [Doc, number] | undefined = this.props.selectedCell(); - return this.props.isRowActive() && selected?.[0] === this.props.Document && selected[1] === this.props.col; + const selected: [Doc, number] | undefined = this._props.selectedCell(); + return this._props.isRowActive() && selected?.[0] === this._props.Document && selected[1] === this._props.col; } @computed get defaultCellContent() { - const { color, textDecoration, fieldProps } = SchemaTableCell.renderProps(this.props); + const { color, textDecoration, fieldProps, pointerEvents } = SchemaTableCell.renderProps(this._props); return ( <div @@ -111,19 +115,21 @@ export class SchemaTableCell extends React.Component<SchemaTableCellProps> { color, textDecoration, width: '100%', + pointerEvents, }}> <EditableView - oneLine={this.props.oneLine} - allowCRs={this.props.allowCRs} - contents={<FieldView {...fieldProps} />} + oneLine={this._props.oneLine} + allowCRs={this._props.allowCRs} + contents={undefined} + fieldContents={fieldProps} editing={this.selected ? undefined : false} - GetValue={() => Field.toKeyValueString(this.props.Document, this.props.fieldKey)} + GetValue={() => Field.toKeyValueString(this._props.Document, this._props.fieldKey)} SetValue={undoable((value: string, shiftDown?: boolean, enterKey?: boolean) => { if (shiftDown && enterKey) { - this.props.setColumnValues(this.props.fieldKey.replace(/^_/, ''), value); + this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), value); } - const ret = KeyValueBox.SetField(this.props.Document, this.props.fieldKey.replace(/^_/, ''), value); - this.props.finishEdit?.(); + const ret = KeyValueBox.SetField(this._props.Document, this._props.fieldKey.replace(/^_/, ''), value); + this._props.finishEdit?.(); return ret; }, 'edit schema cell')} /> @@ -132,8 +138,8 @@ export class SchemaTableCell extends React.Component<SchemaTableCellProps> { } get getCellType() { - const columnTypeStr = this.props.getFinfo(this.props.fieldKey)?.fieldType; - const cellValue = this.props.Document[this.props.fieldKey]; + const columnTypeStr = this._props.getFinfo(this._props.fieldKey)?.fieldType; + const cellValue = this._props.Document[this._props.fieldKey]; if (cellValue instanceof ImageField) return ColumnType.Image; if (cellValue instanceof DateField) return ColumnType.Date; if (cellValue instanceof RichTextField) return ColumnType.RTF; @@ -152,11 +158,11 @@ export class SchemaTableCell extends React.Component<SchemaTableCellProps> { const cellType: ColumnType = this.getCellType; // prettier-ignore switch (cellType) { - case ColumnType.Image: return <SchemaImageCell {...this.props} />; - case ColumnType.Boolean: return <SchemaBoolCell {...this.props} />; - case ColumnType.RTF: return <SchemaRTFCell {...this.props} />; - case ColumnType.Enumeration: return <SchemaEnumerationCell {...this.props} options={this.props.getFinfo(this.props.fieldKey)?.values?.map(val => val.toString())} />; - case ColumnType.Date: // return <SchemaDateCell {...this.props} />; + case ColumnType.Image: return <SchemaImageCell {...this._props} />; + case ColumnType.Boolean: return <SchemaBoolCell {...this._props} />; + case ColumnType.RTF: return <SchemaRTFCell {...this._props} />; + case ColumnType.Enumeration: return <SchemaEnumerationCell {...this._props} options={this._props.getFinfo(this._props.fieldKey)?.values?.map(val => val.toString())} />; + case ColumnType.Date: // return <SchemaDateCell {...this._props} />; default: return this.defaultCellContent; } } @@ -165,8 +171,8 @@ export class SchemaTableCell extends React.Component<SchemaTableCellProps> { return ( <div className="schema-table-cell" - onPointerDown={action(e => !this.selected && this.props.selectCell(this.props.Document, this.props.col))} - style={{ padding: this.props.padding, maxWidth: this.props.maxWidth?.(), width: this.props.columnWidth() || undefined, border: this.selected ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined }}> + onPointerDown={action(e => !this.selected && this._props.selectCell(this._props.Document, this._props.col))} + style={{ padding: this._props.padding, maxWidth: this._props.maxWidth?.(), width: this._props.columnWidth() || undefined, border: this.selected ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined }}> {this.content} </div> ); @@ -175,8 +181,13 @@ export class SchemaTableCell extends React.Component<SchemaTableCellProps> { // mj: most of this is adapted from old schema code so I'm not sure what it does tbh @observer -export class SchemaImageCell extends React.Component<SchemaTableCellProps> { - @observable _previewRef: HTMLImageElement | undefined; +export class SchemaImageCell extends ObservableReactComponent<SchemaTableCellProps> { + constructor(props: any) { + super(props); + makeObservable(this); + } + + @observable _previewRef: HTMLImageElement | undefined = undefined; choosePath(url: URL) { if (url.protocol === 'data') return url.href; // if the url ises the data protocol, just return the href @@ -188,8 +199,8 @@ export class SchemaImageCell extends React.Component<SchemaTableCellProps> { } get url() { - const field = Cast(this.props.Document[this.props.fieldKey], ImageField, null); // retrieve the primary image URL that is being rendered from the data doc - const alts = DocListCast(this.props.Document[this.props.fieldKey + '-alternates']); // retrieve alternate documents that may be rendered as alternate images + const field = Cast(this._props.Document[this._props.fieldKey], ImageField, null); // retrieve the primary image URL that is being rendered from the data doc + const alts = DocListCast(this._props.Document[this._props.fieldKey + '-alternates']); // retrieve alternate documents that may be rendered as alternate images const altpaths = alts .map(doc => Cast(doc[Doc.LayoutFieldKey(doc)], ImageField, null)?.url) .filter(url => url) @@ -226,10 +237,10 @@ export class SchemaImageCell extends React.Component<SchemaTableCellProps> { }; render() { - const aspect = Doc.NativeAspect(this.props.Document); // aspect ratio - // let width = Math.max(75, this.props.columnWidth); // get a with that is no smaller than 75px + const aspect = Doc.NativeAspect(this._props.Document); // aspect ratio + // let width = Math.max(75, this._props.columnWidth); // get a with that is no smaller than 75px // const height = Math.max(75, width / aspect); // get a height either proportional to that or 75 px - const height = this.props.rowHeight() ? this.props.rowHeight() - (this.props.padding || 6) * 2 : undefined; + const height = this._props.rowHeight() ? this._props.rowHeight() - (this._props.padding || 6) * 2 : undefined; const width = height ? height * aspect : undefined; // increase the width of the image if necessary to maintain proportionality return <img src={this.url} width={width ? width : undefined} height={height} style={{}} draggable="false" onPointerEnter={this.showHoverPreview} onPointerMove={this.moveHoverPreview} onPointerLeave={this.removeHoverPreview} />; @@ -237,22 +248,26 @@ export class SchemaImageCell extends React.Component<SchemaTableCellProps> { } @observer -export class SchemaDateCell extends React.Component<SchemaTableCellProps> { - @observable _pickingDate: boolean = false; +export class SchemaDateCell extends ObservableReactComponent<SchemaTableCellProps> { + constructor(props: any) { + super(props); + makeObservable(this); + } + @observable _pickingDate: boolean = false; @computed get date(): DateField { // if the cell is a date field, cast then contents to a date. Otherrwwise, make the contents undefined. - return DateCast(this.props.Document[this.props.fieldKey]); + return DateCast(this._props.Document[this._props.fieldKey]); } @action handleChange = (date: any) => { // const script = CompileScript(date.toString(), { requiredType: "Date", addReturn: true, params: { this: Doc.name } }); // if (script.compiled) { - // this.applyToDoc(this._document, this.props.row, this.props.col, script.run); + // this.applyToDoc(this._document, this._props.row, this._props.col, script.run); // } else { // ^ DateCast is always undefined for some reason, but that is what the field should be set to - this.props.Document[this.props.fieldKey] = new DateField(date as Date); + this._props.Document[this._props.fieldKey] = new DateField(date as Date); //} }; @@ -261,53 +276,64 @@ export class SchemaDateCell extends React.Component<SchemaTableCellProps> { } } @observer -export class SchemaRTFCell extends React.Component<SchemaTableCellProps> { +export class SchemaRTFCell extends ObservableReactComponent<SchemaTableCellProps> { + constructor(props: any) { + super(props); + makeObservable(this); + } + @computed get selected() { - const selected: [Doc, number] | undefined = this.props.selectedCell(); - return this.props.isRowActive() && selected?.[0] === this.props.Document && selected[1] === this.props.col; + const selected: [Doc, number] | undefined = this._props.selectedCell(); + return this._props.isRowActive() && selected?.[0] === this._props.Document && selected[1] === this._props.col; } selectedFunc = () => this.selected; render() { - const { color, textDecoration, fieldProps, cursor, pointerEvents } = SchemaTableCell.renderProps(this.props); + const { color, textDecoration, fieldProps, cursor, pointerEvents } = SchemaTableCell.renderProps(this._props); fieldProps.isContentActive = this.selectedFunc; return ( <div className="schemaRTFCell" style={{ display: 'flex', fontStyle: this.selected ? undefined : 'italic', width: '100%', height: '100%', position: 'relative', color, textDecoration, cursor, pointerEvents }}> - {this.selected ? <FormattedTextBox {...fieldProps} DataDoc={this.props.Document} /> : (field => (field ? Field.toString(field) : ''))(FieldValue(fieldProps.Document[fieldProps.fieldKey]))} + {this.selected ? <FormattedTextBox {...fieldProps} /> : (field => (field ? Field.toString(field) : ''))(FieldValue(fieldProps.Document[fieldProps.fieldKey]))} </div> ); } } @observer -export class SchemaBoolCell extends React.Component<SchemaTableCellProps> { +export class SchemaBoolCell extends ObservableReactComponent<SchemaTableCellProps> { + constructor(props: any) { + super(props); + makeObservable(this); + } + @computed get selected() { - const selected: [Doc, number] | undefined = this.props.selectedCell(); - return this.props.isRowActive() && selected?.[0] === this.props.Document && selected[1] === this.props.col; + const selected: [Doc, number] | undefined = this._props.selectedCell(); + return this._props.isRowActive() && selected?.[0] === this._props.Document && selected[1] === this._props.col; } render() { - const { color, textDecoration, fieldProps, cursor, pointerEvents } = SchemaTableCell.renderProps(this.props); + const { color, textDecoration, fieldProps, cursor, pointerEvents } = SchemaTableCell.renderProps(this._props); return ( <div className="schemaBoolCell" style={{ display: 'flex', color, textDecoration, cursor, pointerEvents }}> <input style={{ marginRight: 4 }} type="checkbox" - checked={BoolCast(this.props.Document[this.props.fieldKey])} + checked={BoolCast(this._props.Document[this._props.fieldKey])} onChange={undoBatch((value: React.ChangeEvent<HTMLInputElement> | undefined) => { if ((value?.nativeEvent as any).shiftKey) { - this.props.setColumnValues(this.props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + value?.target?.checked.toString()); + this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + value?.target?.checked.toString()); } - KeyValueBox.SetField(this.props.Document, this.props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + value?.target?.checked.toString()); + KeyValueBox.SetField(this._props.Document, this._props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + value?.target?.checked.toString()); })} /> <EditableView - contents={<FieldView {...fieldProps} />} + contents={undefined} + fieldContents={fieldProps} editing={this.selected ? undefined : false} - GetValue={() => Field.toKeyValueString(this.props.Document, this.props.fieldKey)} + GetValue={() => Field.toKeyValueString(this._props.Document, this._props.fieldKey)} SetValue={undoBatch((value: string, shiftDown?: boolean, enterKey?: boolean) => { if (shiftDown && enterKey) { - this.props.setColumnValues(this.props.fieldKey.replace(/^_/, ''), value); + this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), value); } - const set = KeyValueBox.SetField(this.props.Document, this.props.fieldKey.replace(/^_/, ''), value); - this.props.finishEdit?.(); + const set = KeyValueBox.SetField(this._props.Document, this._props.fieldKey.replace(/^_/, ''), value); + this._props.finishEdit?.(); return set; })} /> @@ -316,14 +342,19 @@ export class SchemaBoolCell extends React.Component<SchemaTableCellProps> { } } @observer -export class SchemaEnumerationCell extends React.Component<SchemaTableCellProps> { +export class SchemaEnumerationCell extends ObservableReactComponent<SchemaTableCellProps> { + constructor(props: any) { + super(props); + makeObservable(this); + } + @computed get selected() { - const selected: [Doc, number] | undefined = this.props.selectedCell(); - return this.props.isRowActive() && selected?.[0] === this.props.Document && selected[1] === this.props.col; + const selected: [Doc, number] | undefined = this._props.selectedCell(); + return this._props.isRowActive() && selected?.[0] === this._props.Document && selected[1] === this._props.col; } render() { - const { color, textDecoration, fieldProps, cursor, pointerEvents } = SchemaTableCell.renderProps(this.props); - const options = this.props.options?.map(facet => ({ value: facet, label: facet })); + const { color, textDecoration, fieldProps, cursor, pointerEvents } = SchemaTableCell.renderProps(this._props); + const options = this._props.options?.map(facet => ({ value: facet, label: facet })); return ( <div className="schemaSelectionCell" style={{ color, textDecoration, cursor, pointerEvents }}> <div style={{ width: '100%' }}> @@ -357,17 +388,17 @@ export class SchemaEnumerationCell extends React.Component<SchemaTableCellProps> ...base, left: 0, top: 0, - transform: `translate(${this.props.transform().TranslateX}px, ${this.props.transform().TranslateY}px)`, - width: Number(base.width) * this.props.transform().Scale, + transform: `translate(${this._props.transform().TranslateX}px, ${this._props.transform().TranslateY}px)`, + width: Number(base.width) * this._props.transform().Scale, zIndex: 9999, }), }} - menuPortalTarget={this.props.menuTarget} + menuPortalTarget={this._props.menuTarget} menuPosition={'absolute'} - placeholder={StrCast(this.props.Document[this.props.fieldKey], 'select...')} + placeholder={StrCast(this._props.Document[this._props.fieldKey], 'select...')} options={options} isMulti={false} - onChange={val => KeyValueBox.SetField(this.props.Document, this.props.fieldKey.replace(/^_/, ''), `"${val?.value ?? ''}"`)} + onChange={val => KeyValueBox.SetField(this._props.Document, this._props.fieldKey.replace(/^_/, ''), `"${val?.value ?? ''}"`)} /> </div> </div> diff --git a/src/client/views/collections/goldenLayoutTheme.css b/src/client/views/collections/goldenLayoutTheme.css new file mode 100644 index 000000000..cf577d6b1 --- /dev/null +++ b/src/client/views/collections/goldenLayoutTheme.css @@ -0,0 +1,132 @@ +.lm_goldenlayout { + background: #000000; +} +.lm_content { + background: #222222; +} +.lm_dragProxy .lm_content { + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9); +} +.lm_dropTargetIndicator { + box-shadow: inset 0 0 30px #000000; + outline: 1px dashed #cccccc; + transition: all 200ms ease; +} +.lm_dropTargetIndicator .lm_inner { + background: #000000; + opacity: 0.2; +} +.lm_splitter { + background: #000000; + opacity: 0.001; + transition: opacity 200ms ease; +} +.lm_splitter:hover, +.lm_splitter.lm_dragging { + background: #444444; + opacity: 1; +} +.lm_header { + height: 20px; + user-select: none; +} +.lm_header.lm_selectable { + cursor: pointer; +} +.lm_header .lm_tab { + font-family: Arial, sans-serif; + font-size: 12px; + color: #999999; + background: #111111; + box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.3); + margin-right: 2px; + padding-bottom: 2px; + padding-top: 2px; +} +.lm_header .lm_tab .lm_close_tab { + width: 11px; + height: 11px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAATElEQVR4nG3OwQ0DMQwDwZGRBtR/j1YJzMc5+IDoR+yCVO29g+pu981MFgqZmRdAfU7+CYWcbF11LwALjpBL0N0qybNx/RPU+gOeiS/+XCRwDlTgkQAAAABJRU5ErkJggg==); + background-position: center center; + background-repeat: no-repeat; + top: 4px; + right: 6px; + opacity: 0.4; +} +.lm_header .lm_tab .lm_close_tab:hover { + opacity: 1; +} +.lm_header .lm_tab.lm_active { + border-bottom: none; + box-shadow: 0 -2px 2px #000000; + padding-bottom: 3px; +} +.lm_header .lm_tab.lm_active .lm_close_tab { + opacity: 1; +} +.lm_dragProxy.lm_bottom .lm_header .lm_tab, +.lm_stack.lm_bottom .lm_header .lm_tab { + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); +} +.lm_dragProxy.lm_bottom .lm_header .lm_tab.lm_active, +.lm_stack.lm_bottom .lm_header .lm_tab.lm_active { + box-shadow: 0 2px 2px #000000; +} +.lm_selected .lm_header { + background-color: #452500; +} +.lm_tab:hover, +.lm_tab.lm_active { + background: #222222; + color: #dddddd; +} +.lm_header .lm_controls .lm_tabdropdown:before { + color: #ffffff; +} +.lm_controls > li { + position: relative; + background-position: center center; + background-repeat: no-repeat; + opacity: 0.4; + transition: opacity 300ms ease; +} +.lm_controls > li:hover { + opacity: 1; +} +.lm_controls .lm_popout { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=); +} +.lm_controls .lm_maximise { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==); +} +.lm_controls .lm_close { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=); +} +.lm_maximised .lm_header { + background-color: #000000; +} +.lm_maximised .lm_controls .lm_maximise { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC); +} +.lm_transition_indicator { + background-color: #000000; + border: 1px dashed #555555; +} +.lm_popin { + cursor: pointer; +} +.lm_popin .lm_bg { + background: #ffffff; + opacity: 0.3; +} +.lm_popin .lm_icon { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAAWklEQVR4nJWOyw3AIAxDHcQC7L8jbwT3AlJBfNp3SiI7dtRaLSlKKeoA1oEsKSQZCEluexw8Tm3ohk+E7bnOUHUGcNh+HwbBygw4AZ7FN/Lt84p0l+yTflV8AKQyLdcCRJi/AAAAAElFTkSuQmCC); + background-position: center center; + background-repeat: no-repeat; + border-left: 1px solid #eeeeee; + border-top: 1px solid #eeeeee; + opacity: 0.7; +} +.lm_popin:hover .lm_icon { + opacity: 1; +} /*# sourceMappingURL=goldenlayout-dark-theme.css.map */ diff --git a/src/client/views/global/globalCssVariables.scss b/src/client/views/global/globalCssVariables.module.scss index c129d29eb..44e8efe23 100644 --- a/src/client/views/global/globalCssVariables.scss +++ b/src/client/views/global/globalCssVariables.module.scss @@ -63,7 +63,6 @@ $standard-box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3); $mainTextInput-zindex: 999; // then text input overlay so that it's context menu will appear over decorations, etc $docDecorations-zindex: 998; // then doc decorations appear over everything else $remoteCursors-zindex: 997; // ... not sure what level the remote cursors should go -- is this right? -$COLLECTION_BORDER_WIDTH: 0; $SCHEMA_DIVIDER_WIDTH: 4; $MINIMIZED_ICON_SIZE: 24; $MAX_ROW_HEIGHT: 44px; @@ -80,7 +79,6 @@ $DATA_VIZ_TABLE_ROW_HEIGHT: 30; :export { contextMenuZindex: $contextMenu-zindex; SCHEMA_DIVIDER_WIDTH: $SCHEMA_DIVIDER_WIDTH; - COLLECTION_BORDER_WIDTH: $COLLECTION_BORDER_WIDTH; MINIMIZED_ICON_SIZE: $MINIMIZED_ICON_SIZE; MAX_ROW_HEIGHT: $MAX_ROW_HEIGHT; SEARCH_THUMBNAIL_SIZE: $search-thumnail-size; diff --git a/src/client/views/global/globalCssVariables.scss.d.ts b/src/client/views/global/globalCssVariables.module.scss.d.ts index 3db498e77..bcbb1f068 100644 --- a/src/client/views/global/globalCssVariables.scss.d.ts +++ b/src/client/views/global/globalCssVariables.module.scss.d.ts @@ -1,7 +1,6 @@ interface IGlobalScss { contextMenuZindex: string; // context menu shows up over everything SCHEMA_DIVIDER_WIDTH: string; - COLLECTION_BORDER_WIDTH: string; MINIMIZED_ICON_SIZE: string; MAX_ROW_HEIGHT: string; SEARCH_THUMBNAIL_SIZE: string; diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts index 1f1fa2109..c2d6cea04 100644 --- a/src/client/views/global/globalScripts.ts +++ b/src/client/views/global/globalScripts.ts @@ -1,33 +1,33 @@ import { Colors } from 'browndash-components'; -import { runInAction, action } from 'mobx'; -import { aggregateBounds } from '../../../Utils'; -import { Doc } from '../../../fields/Doc'; -import { Width, Height } from '../../../fields/DocSymbols'; +import { action, runInAction } from 'mobx'; +import { Doc, Opt } from '../../../fields/Doc'; import { InkTool } from '../../../fields/InkField'; -import { Cast, StrCast, NumCast, BoolCast } from '../../../fields/Types'; +import { BoolCast, Cast, NumCast, StrCast } from '../../../fields/Types'; import { WebField } from '../../../fields/URLField'; import { GestureUtils } from '../../../pen-gestures/GestureUtils'; +import { aggregateBounds } from '../../../Utils'; +import { DocumentType } from '../../documents/DocumentTypes'; import { LinkManager } from '../../util/LinkManager'; import { ScriptingGlobals } from '../../util/ScriptingGlobals'; import { SelectionManager } from '../../util/SelectionManager'; import { undoable, UndoManager } from '../../util/UndoManager'; -import { GestureOverlay } from '../GestureOverlay'; -import { InkTranscription } from '../InkTranscription'; -import { ActiveFillColor, SetActiveFillColor, ActiveIsInkMask, SetActiveIsInkMask, ActiveInkWidth, SetActiveInkWidth, ActiveInkColor, SetActiveInkColor, InkingStroke } from '../InkingStroke'; import { CollectionFreeFormView } from '../collections/collectionFreeForm'; +import { GestureOverlay } from '../GestureOverlay'; +import { ActiveFillColor, ActiveInkColor, ActiveInkWidth, ActiveIsInkMask, InkingStroke, SetActiveFillColor, SetActiveInkColor, SetActiveInkWidth, SetActiveIsInkMask } from '../InkingStroke'; +// import { InkTranscription } from '../InkTranscription'; import { CollectionFreeFormDocumentView } from '../nodes/CollectionFreeFormDocumentView'; -import { WebBox } from '../nodes/WebBox'; -import { RichTextMenu } from '../nodes/formattedText/RichTextMenu'; -import { DocumentType } from '../../documents/DocumentTypes'; import { DocumentView } from '../nodes/DocumentView'; +import { RichTextMenu } from '../nodes/formattedText/RichTextMenu'; +import { WebBox } from '../nodes/WebBox'; +import { VideoBox } from '../nodes/VideoBox'; ScriptingGlobals.add(function IsNoneSelected() { - return SelectionManager.Views().length <= 0; + return SelectionManager.Views.length <= 0; }, 'are no document selected'); // toggle: Set overlay status of selected document ScriptingGlobals.add(function setView(view: string) { - const selected = SelectionManager.Docs().lastElement(); + const selected = SelectionManager.Docs.lastElement(); selected ? (selected._type_collection = view) : console.log('[FontIconBox.tsx] changeView failed'); }); @@ -37,7 +37,7 @@ ScriptingGlobals.add(function setSettingBgColor(isSetting: boolean) { // toggle: Set overlay status of selected document ScriptingGlobals.add(function setBackgroundColor(color?: string, checkResult?: boolean) { - const selectedViews = SelectionManager.Views(); + const selectedViews = SelectionManager.Views; if (Doc.ActiveTool !== InkTool.None) { if (checkResult) { return ActiveFillColor(); @@ -46,24 +46,26 @@ ScriptingGlobals.add(function setBackgroundColor(color?: string, checkResult?: b } else if (selectedViews.length) { if (checkResult) { const selView = selectedViews.lastElement(); - const fieldKey = selView.rootDoc.type === DocumentType.INK ? 'fillColor' : 'backgroundColor'; - const layoutFrameNumber = Cast(selView.props.docViewPath().lastElement()?.rootDoc?._currentFrame, 'number'); // frame number that container is at which determines layout frame values - const contentFrameNumber = Cast(selView.rootDoc?._currentFrame, 'number', layoutFrameNumber ?? null); // frame number that content is at which determines what content is displayed - return CollectionFreeFormDocumentView.getStringValues(selView?.rootDoc, contentFrameNumber)[fieldKey] ?? 'transparent'; + const fieldKey = selView.Document.type === DocumentType.INK ? 'fillColor' : 'backgroundColor'; + const layoutFrameNumber = Cast(selView.containerViewPath?.().lastElement()?.Document?._currentFrame, 'number'); // frame number that container is at which determines layout frame values + const contentFrameNumber = Cast(selView.Document?._currentFrame, 'number', layoutFrameNumber ?? null); // frame number that content is at which determines what content is displayed + return CollectionFreeFormDocumentView.getStringValues(selView?.Document, contentFrameNumber)[fieldKey] ?? 'transparent'; } selectedViews.some(dv => dv.ComponentView instanceof InkingStroke) && SetActiveFillColor(color ?? 'transparent'); selectedViews.forEach(dv => { - const fieldKey = dv.rootDoc.type === DocumentType.INK ? 'fillColor' : 'backgroundColor'; - const layoutFrameNumber = Cast(dv.props.docViewPath().lastElement()?.rootDoc?._currentFrame, 'number'); // frame number that container is at which determines layout frame values - const contentFrameNumber = Cast(dv.rootDoc?._currentFrame, 'number', layoutFrameNumber ?? null); // frame number that content is at which determines what content is displayed + const fieldKey = dv.Document.type === DocumentType.INK ? 'fillColor' : 'backgroundColor'; + const layoutFrameNumber = Cast(dv.containerViewPath?.().lastElement()?.Document?._currentFrame, 'number'); // frame number that container is at which determines layout frame values + const contentFrameNumber = Cast(dv.Document?._currentFrame, 'number', layoutFrameNumber ?? null); // frame number that content is at which determines what content is displayed if (contentFrameNumber !== undefined) { - CollectionFreeFormDocumentView.setStringValues(contentFrameNumber, dv.rootDoc, { fieldKey: color }); + const obj: { [key: string]: Opt<string> } = {}; + obj[fieldKey] = color; + CollectionFreeFormDocumentView.setStringValues(contentFrameNumber, dv.Document, obj); } else { - dv.rootDoc['_' + fieldKey] = color; + dv.Document['_' + fieldKey] = color; } }); } else { - const selected = SelectionManager.Docs().length ? SelectionManager.Docs() : LinkManager.currentLink ? [LinkManager.currentLink] : []; + const selected = SelectionManager.Docs.length ? SelectionManager.Docs : LinkManager.currentLink ? [LinkManager.currentLink] : []; if (checkResult) { return selected.lastElement()?._backgroundColor ?? 'transparent'; } @@ -75,10 +77,10 @@ ScriptingGlobals.add(function setBackgroundColor(color?: string, checkResult?: b // toggle: Set overlay status of selected document ScriptingGlobals.add(function setHeaderColor(color?: string, checkResult?: boolean) { if (checkResult) { - return SelectionManager.Views().length ? StrCast(SelectionManager.Docs().lastElement().layout_headingColor) : Doc.SharingDoc().headingColor; + return SelectionManager.Views.length ? StrCast(SelectionManager.Docs.lastElement().layout_headingColor) : Doc.SharingDoc().headingColor; } - if (SelectionManager.Views().length) { - SelectionManager.Docs().forEach(doc => { + if (SelectionManager.Views.length) { + SelectionManager.Docs.forEach(doc => { Doc.GetProto(doc).layout_headingColor = color; doc.layout_showTitle = color === 'transparent' ? undefined : StrCast(doc.layout_showTitle, 'title'); }); @@ -91,32 +93,32 @@ ScriptingGlobals.add(function setHeaderColor(color?: string, checkResult?: boole // toggle: Set overlay status of selected document ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) { - const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined; + const selected = SelectionManager.Views.length ? SelectionManager.Views[0] : undefined; if (checkResult) { if (NumCast(selected?.Document.z) >= 1) return true; return false; } - selected ? selected.props.CollectionFreeFormDocumentView?.().float() : console.log('[FontIconBox.tsx] toggleOverlay failed'); + selected ? selected.CollectionFreeFormDocumentView?.float() : console.log('[FontIconBox.tsx] toggleOverlay failed'); }); ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce', checkResult?: boolean) { - const selected = SelectionManager.Docs().lastElement(); + const selected = SelectionManager.Docs.lastElement(); // prettier-ignore const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([ ['grid', { - checkResult: (doc:Doc) => BoolCast(doc._freeform_backgroundGrid, false), + checkResult: (doc:Doc) => BoolCast(doc?._freeform_backgroundGrid, false), setDoc: (doc:Doc,dv:DocumentView) => doc._freeform_backgroundGrid = !doc._freeform_backgroundGrid, }], ['snaplines', { - checkResult: (doc:Doc) => BoolCast(doc._freeform_snapLines, false), + checkResult: (doc:Doc) => BoolCast(doc?._freeform_snapLines, false), setDoc: (doc:Doc, dv:DocumentView) => doc._freeform_snapLines = !doc._freeform_snapLines, }], ['viewAll', { - checkResult: (doc:Doc) => BoolCast(doc._freeform_fitContentsToBox, false), + checkResult: (doc:Doc) => BoolCast(doc?._freeform_fitContentsToBox, false), setDoc: (doc:Doc,dv:DocumentView) => doc._freeform_fitContentsToBox = !doc._freeform_fitContentsToBox, }], ['center', { - checkResult: (doc:Doc) => BoolCast(doc._stacking_alignCenter, false), + checkResult: (doc:Doc) => BoolCast(doc?._stacking_alignCenter, false), setDoc: (doc:Doc,dv:DocumentView) => doc._stacking_alignCenter = !doc._stacking_alignCenter, }], ['fitOnce', { @@ -125,12 +127,12 @@ ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid }], ['clusters', { waitForRender: true, // flags that undo batch should terminate after a re-render giving the script the chance to fire - checkResult: (doc:Doc) => BoolCast(doc._freeform_useClusters, false), + checkResult: (doc:Doc) => BoolCast(doc?._freeform_useClusters, false), setDoc: (doc:Doc,dv:DocumentView) => doc._freeform_useClusters = !doc._freeform_useClusters, }], ['arrange', { waitForRender: true, // flags that undo batch should terminate after a re-render giving the script the chance to fire - checkResult: (doc:Doc) => BoolCast(doc._autoArrange, false), + checkResult: (doc:Doc) => BoolCast(doc?._autoArrange, false), setDoc: (doc:Doc,dv:DocumentView) => doc._autoArrange = !doc._autoArrange, }], ['flashcards', { @@ -143,13 +145,13 @@ ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid return map.get(attr)?.checkResult(selected); } const batch = map.get(attr)?.waitForRender ? UndoManager.StartBatch('set freeform attribute') : { end: () => {} }; - SelectionManager.Views().map(dv => map.get(attr)?.setDoc(dv.rootDoc, dv)); + SelectionManager.Views.map(dv => map.get(attr)?.setDoc(dv.layoutDoc, dv)); setTimeout(() => batch.end(), 100); }); ScriptingGlobals.add(function setFontAttr(attr: 'font' | 'fontColor' | 'highlight' | 'fontSize' | 'alignment', value: any, checkResult?: boolean) { const editorView = RichTextMenu.Instance?.TextView?.EditorView; - const selected = SelectionManager.Docs().lastElement(); + const selected = SelectionManager.Docs.lastElement(); // prettier-ignore const map: Map<'font'|'fontColor'|'highlight'|'fontSize'|'alignment', { checkResult: () => any; setDoc: () => void;}> = new Map([ ['font', { @@ -184,16 +186,22 @@ ScriptingGlobals.add(function setFontAttr(attr: 'font' | 'fontColor' | 'highligh map.get(attr)?.setDoc?.(); }); -type attrname = 'noAutoLink' | 'dictation' | 'bold' | 'italics' | 'underline' | 'left' | 'center' | 'right' | 'bullet' | 'decimal'; +type attrname = 'noAutoLink' | 'dictation' | 'bold' | 'italics' | 'underline' | 'left' | 'center' | 'right' | 'vcent' | 'bullet' | 'decimal'; type attrfuncs = [attrname, { checkResult: () => boolean; toggle: () => any }]; ScriptingGlobals.add(function toggleCharStyle(charStyle: attrname, checkResult?: boolean) { const textView = RichTextMenu.Instance?.TextView; const editorView = textView?.EditorView; // prettier-ignore - const alignments:attrfuncs[] = (['left','right','center'] as ("left"|"center"|"right")[]).map((where) => - [ where, { checkResult: () =>(editorView ? (RichTextMenu.Instance.textAlign ===where): (Doc.UserDoc().textAlign ===where) ? true:false), - toggle: () => (editorView?.state ? RichTextMenu.Instance.align(editorView, editorView.dispatch, where):(Doc.UserDoc().textAlign = where))}]); + const alignments:attrfuncs[] = (['left','right','center','vcent'] as ("left"|"center"|"right"|"vcent")[]).map((where) => + [ where, { checkResult: () =>(editorView ? (where === 'vcent' ? RichTextMenu.Instance.textVcenter: + (RichTextMenu.Instance.textAlign === where)): + where === 'vcent' ? BoolCast(Doc.UserDoc()._layout_centered): + (Doc.UserDoc().textAlign ===where) ? true:false), + toggle: () => (editorView?.state ? (where === 'vcent' ? RichTextMenu.Instance.vcenterToggle(editorView, editorView.dispatch): + RichTextMenu.Instance.align(editorView, editorView.dispatch, where)): + where === 'vcent' ? Doc.UserDoc()._layout_centered = !Doc.UserDoc()._layout_centered: + (Doc.UserDoc().textAlign = where))}]); // prettier-ignore // prettier-ignore const listings:attrfuncs[] = (['bullet','decimal'] as attrname[]).map(list => [ list, { checkResult: () => (editorView ? RichTextMenu.Instance.getActiveListStyle() === list:false), @@ -243,8 +251,8 @@ export function createInkGroup(inksToGroup?: Doc[], isSubGroup?: boolean) { action(d => { const x = NumCast(d.x); const y = NumCast(d.y); - const width = d[Width](); - const height = d[Height](); + const width = NumCast(d._width); + const height = NumCast(d._height); bounds.push({ x, y, width, height }); }) ); @@ -277,27 +285,27 @@ export function createInkGroup(inksToGroup?: Doc[], isSubGroup?: boolean) { return d; }) ); - ffView.props.removeDocument?.(selected); + ffView._props.removeDocument?.(selected); // TODO: nda - this is the code to actually get a new grouped collection const newCollection = marqViewRef?.getCollection(selected, undefined, true); if (newCollection) { - newCollection.height = newCollection[Height](); - newCollection.width = newCollection[Width](); + newCollection.height = NumCast(newCollection._height); + newCollection.width = NumCast(newCollection._width); } // nda - bug: when deleting a stroke before leaving writing mode, delete the stroke from unprocessed ink docs - newCollection && ffView.props.addDocument?.(newCollection); + newCollection && ffView._props.addDocument?.(newCollection); // TODO: nda - will probably need to go through and only remove the unprocessed selected docs ffView.unprocessedDocs = []; - InkTranscription.Instance.transcribeInk(newCollection, selected, false); + // InkTranscription.Instance.transcribeInk(newCollection, selected, false); }); } CollectionFreeFormView.collectionsWithUnprocessedInk.clear(); } function setActiveTool(tool: InkTool | GestureUtils.Gestures, keepPrim: boolean, checkResult?: boolean) { - InkTranscription.Instance?.createInkGroup(); + // InkTranscription.Instance?.createInkGroup(); if (checkResult) { return (Doc.ActiveTool === tool && !GestureOverlay.Instance?.InkShape) || GestureOverlay.Instance?.InkShape === tool ? GestureOverlay.Instance?.KeepPrimitiveMode || ![GestureUtils.Gestures.Circle, GestureUtils.Gestures.Line, GestureUtils.Gestures.Rectangle].includes(tool as GestureUtils.Gestures) @@ -335,7 +343,7 @@ ScriptingGlobals.add(setActiveTool, 'sets the active ink tool mode'); // toggle: Set overlay status of selected document ScriptingGlobals.add(function setInkProperty(option: 'inkMask' | 'fillColor' | 'strokeWidth' | 'strokeColor', value: any, checkResult?: boolean) { - const selected = SelectionManager.Docs().lastElement() ?? Doc.UserDoc(); + const selected = SelectionManager.Docs.lastElement() ?? Doc.UserDoc(); // prettier-ignore const map: Map<'inkMask' | 'fillColor' | 'strokeWidth' | 'strokeColor', { checkResult: () => any; setInk: (doc: Doc) => void; setMode: () => void }> = new Map([ ['inkMask', { @@ -364,44 +372,44 @@ ScriptingGlobals.add(function setInkProperty(option: 'inkMask' | 'fillColor' | ' return map.get(option)?.checkResult(); } map.get(option)?.setMode(); - SelectionManager.Docs() - .filter(doc => doc.type === DocumentType.INK) - .map(doc => map.get(option)?.setInk(doc)); + SelectionManager.Docs.filter(doc => doc.type === DocumentType.INK).map(doc => map.get(option)?.setInk(doc)); }); /** WEB * webSetURL **/ ScriptingGlobals.add(function webSetURL(url: string, checkResult?: boolean) { - const selected = SelectionManager.Views().lastElement(); - if (selected?.rootDoc.type === DocumentType.WEB) { + const selected = SelectionManager.Views.lastElement(); + if (selected?.Document.type === DocumentType.WEB) { if (checkResult) { - return StrCast(selected.rootDoc.data, Cast(selected.rootDoc.data, WebField, null)?.url?.href); + return StrCast(selected.Document.data, Cast(selected.Document.data, WebField, null)?.url?.href); } selected.ComponentView?.setData?.(url); - //selected.rootDoc.data = new WebField(url); + //selected.Document.data = new WebField(url); } }); ScriptingGlobals.add(function webForward(checkResult?: boolean) { - const selected = SelectionManager.Views().lastElement()?.ComponentView as WebBox; + const selected = SelectionManager.Views.lastElement()?.ComponentView as WebBox; if (checkResult) { return selected?.forward(checkResult) ? undefined : 'lightGray'; } selected?.forward(); }); -ScriptingGlobals.add(function webBack(checkResult?: boolean) { - const selected = SelectionManager.Views().lastElement()?.ComponentView as WebBox; - if (checkResult) { - return selected?.back(checkResult) ? undefined : 'lightGray'; - } +ScriptingGlobals.add(function webBack() { + const selected = SelectionManager.Views.lastElement()?.ComponentView as WebBox; selected?.back(); }); +ScriptingGlobals.add(function videoSnapshot() { + const selected = SelectionManager.Views.lastElement()?.ComponentView as VideoBox; + selected?.Snapshot(); +}); + /** Schema * toggleSchemaPreview **/ ScriptingGlobals.add(function toggleSchemaPreview(checkResult?: boolean) { - const selected = SelectionManager.Docs().lastElement(); + const selected = SelectionManager.Docs.lastElement(); if (checkResult && selected) { const result: boolean = NumCast(selected.schema_previewWidth) > 0; if (result) return Colors.MEDIUM_BLUE; @@ -415,7 +423,7 @@ ScriptingGlobals.add(function toggleSchemaPreview(checkResult?: boolean) { } }); ScriptingGlobals.add(function toggleSingleLineSchema(checkResult?: boolean) { - const selected = SelectionManager.Docs().lastElement(); + const selected = SelectionManager.Docs.lastElement(); if (checkResult && selected) { return NumCast(selected._schema_singleLine) > 0 ? Colors.MEDIUM_BLUE : 'transparent'; } @@ -428,7 +436,7 @@ ScriptingGlobals.add(function toggleSingleLineSchema(checkResult?: boolean) { * groupBy */ ScriptingGlobals.add(function setGroupBy(key: string, checkResult?: boolean) { - SelectionManager.Docs().map(doc => (doc._text_fontFamily = key)); + SelectionManager.Docs.map(doc => (doc._text_fontFamily = key)); const editorView = RichTextMenu.Instance.TextView?.EditorView; if (checkResult) { return StrCast((editorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily); diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss index 0b9f32eee..636b6415c 100644 --- a/src/client/views/linking/LinkMenu.scss +++ b/src/client/views/linking/LinkMenu.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; .linkMenu { width: auto; @@ -11,7 +11,9 @@ display: inline-block; position: relative; border: 1px solid #e4e4e4; - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); + box-shadow: + 0 10px 20px rgba(0, 0, 0, 0.19), + 0 6px 6px rgba(0, 0, 0, 0.23); max-height: 230px; overflow-y: scroll; z-index: 10; diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx index 9dc133e28..12b83414c 100644 --- a/src/client/views/linking/LinkMenu.tsx +++ b/src/client/views/linking/LinkMenu.tsx @@ -1,13 +1,14 @@ -import { action, observable } from 'mobx'; +import { action, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { Doc } from '../../../fields/Doc'; import { LinkManager } from '../../util/LinkManager'; +import { SettingsManager } from '../../util/SettingsManager'; +import { ObservableReactComponent } from '../ObservableReactComponent'; import { DocumentView } from '../nodes/DocumentView'; -import { LinkDocPreview } from '../nodes/LinkDocPreview'; +import { LinkInfo } from '../nodes/LinkDocPreview'; import './LinkMenu.scss'; import { LinkMenuGroup } from './LinkMenuGroup'; -import React = require('react'); -import { SettingsManager } from '../../util/SettingsManager'; interface Props { docView: DocumentView; @@ -20,9 +21,13 @@ interface Props { * the outermost component for the link menu of a node that contains a list of its linked nodes */ @observer -export class LinkMenu extends React.Component<Props> { +export class LinkMenu extends ObservableReactComponent<Props> { _editorRef = React.createRef<HTMLDivElement>(); @observable _linkMenuRef = React.createRef<HTMLDivElement>(); + constructor(props: any) { + super(props); + makeObservable(this); + } clear = () => this.props.clearLinkEditor?.(); @@ -34,7 +39,7 @@ export class LinkMenu extends React.Component<Props> { } onPointerDown = action((e: PointerEvent) => { - LinkDocPreview.Clear(); + LinkInfo.Clear(); if (!this._linkMenuRef.current?.contains(e.target as any) && !this._editorRef.current?.contains(e.target as any)) { this.clear(); } @@ -47,16 +52,16 @@ export class LinkMenu extends React.Component<Props> { */ renderAllGroups = (groups: Map<string, Array<Doc>>): Array<JSX.Element> => { const linkItems = Array.from(groups.entries()).map(group => ( - <LinkMenuGroup key={group[0]} itemHandler={this.props.itemHandler} docView={this.props.docView} sourceDoc={this.props.docView.props.Document} group={group[1]} groupType={group[0]} clearLinkEditor={this.clear} /> + <LinkMenuGroup key={group[0]} itemHandler={this.props.itemHandler} docView={this.props.docView} sourceDoc={this.props.docView.Document} group={group[1]} groupType={group[0]} clearLinkEditor={this.clear} /> )); return linkItems.length ? linkItems : this.props.style ? [] : [<p key="none">No links have been created yet. Drag the linking button onto another document to create a link.</p>]; }; render() { - const sourceDoc = this.props.docView.rootDoc; + const sourceDoc = this.props.docView.Document; const sourceAnchor = this.props.docView.anchorViewDoc ?? sourceDoc; - const style = this.props.style ?? (dv => ({ left: dv?.left || 0, top: this.props.docView.topMost ? undefined : (dv?.bottom || 0) + 15, bottom: this.props.docView.topMost ? 20 : undefined, maxWidth: 200 }))(this.props.docView.getBounds()); + const style = this.props.style ?? (dv => ({ left: dv?.left || 0, top: this.props.docView.topMost ? undefined : (dv?.bottom || 0) + 15, bottom: this.props.docView.topMost ? 20 : undefined, maxWidth: 200 }))(this.props.docView.getBounds); return ( <div className="linkMenu" ref={this._linkMenuRef} style={{ ...style, background: SettingsManager.userBackgroundColor, color: SettingsManager.userColor }}> diff --git a/src/client/views/linking/LinkMenuGroup.tsx b/src/client/views/linking/LinkMenuGroup.tsx index c1a5a634c..028d3da53 100644 --- a/src/client/views/linking/LinkMenuGroup.tsx +++ b/src/client/views/linking/LinkMenuGroup.tsx @@ -7,7 +7,7 @@ import { LinkManager } from '../../util/LinkManager'; import { DocumentView } from '../nodes/DocumentView'; import './LinkMenu.scss'; import { LinkMenuItem } from './LinkMenuItem'; -import React = require('react'); +import * as React from 'react'; import { DocumentType } from '../../documents/DocumentTypes'; interface LinkMenuGroupProps { @@ -46,19 +46,19 @@ export class LinkMenuGroup extends React.Component<LinkMenuGroupProps> { const groupItems = Array.from(set.keys()).map(linkDoc => { const sourceDoc = this.props.docView.anchorViewDoc ?? - (this.props.docView.rootDoc.type === DocumentType.LINK // - ? this.props.docView.props.LayoutTemplateString?.includes('link_anchor_1') + (this.props.docView.Document.type === DocumentType.LINK // + ? this.props.docView._props.LayoutTemplateString?.includes('link_anchor_1') ? DocCast(linkDoc.link_anchor_1) : DocCast(linkDoc.link_anchor_2) : this.props.sourceDoc); const destDoc = !sourceDoc ? undefined - : this.props.docView.rootDoc.type === DocumentType.LINK - ? this.props.docView.props.LayoutTemplateString?.includes('link_anchor_1') - ? DocCast(linkDoc.link_anchor_2) - : DocCast(linkDoc.link_anchor_1) - : LinkManager.getOppositeAnchor(linkDoc, sourceDoc) || - LinkManager.getOppositeAnchor(linkDoc, Cast(linkDoc.link_anchor_2, Doc, null).annotationOn === sourceDoc ? Cast(linkDoc.link_anchor_2, Doc, null) : Cast(linkDoc.link_anchor_1, Doc, null)); + : this.props.docView.Document.type === DocumentType.LINK + ? this.props.docView._props.LayoutTemplateString?.includes('link_anchor_1') + ? DocCast(linkDoc.link_anchor_2) + : DocCast(linkDoc.link_anchor_1) + : LinkManager.getOppositeAnchor(linkDoc, sourceDoc) || + LinkManager.getOppositeAnchor(linkDoc, Cast(linkDoc.link_anchor_2, Doc, null).annotationOn === sourceDoc ? Cast(linkDoc.link_anchor_2, Doc, null) : Cast(linkDoc.link_anchor_1, Doc, null)); return !destDoc || !sourceDoc ? null : ( <LinkMenuItem key={linkDoc[Id]} diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss index e83f631a1..44c74236f 100644 --- a/src/client/views/linking/LinkMenuItem.scss +++ b/src/client/views/linking/LinkMenuItem.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; .linkMenu-item { // border-top: 0.5px solid $medium-gray; diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index bf2a4e1a9..dc4aee1ca 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -1,12 +1,13 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Tooltip } from '@material-ui/core'; -import { action, computed, observable } from 'mobx'; +import { Tooltip } from '@mui/material'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; +import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../../Utils'; import { Doc } from '../../../fields/Doc'; import { Cast, DocCast, StrCast } from '../../../fields/Types'; import { WebField } from '../../../fields/URLField'; -import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../../Utils'; import { DocumentType } from '../../documents/DocumentTypes'; import { DragManager } from '../../util/DragManager'; import { LinkFollower } from '../../util/LinkFollower'; @@ -14,10 +15,10 @@ import { LinkManager } from '../../util/LinkManager'; import { SelectionManager } from '../../util/SelectionManager'; import { SettingsManager } from '../../util/SettingsManager'; import { undoBatch } from '../../util/UndoManager'; +import { ObservableReactComponent } from '../ObservableReactComponent'; import { DocumentView, DocumentViewInternal, OpenWhere } from '../nodes/DocumentView'; -import { LinkDocPreview } from '../nodes/LinkDocPreview'; +import { LinkInfo } from '../nodes/LinkDocPreview'; import './LinkMenuItem.scss'; -import React = require('react'); interface LinkMenuItemProps { groupType: string; @@ -50,10 +51,13 @@ export async function StartLinkTargetsDrag(dragEle: HTMLElement, docView: Docume } @observer -export class LinkMenuItem extends React.Component<LinkMenuItemProps> { +export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> { private _drag = React.createRef<HTMLDivElement>(); - _editRef = React.createRef<HTMLDivElement>(); + constructor(props: any) { + super(props); + makeObservable(this); + } @observable private _showMore: boolean = false; @action toggleShowMore(e: React.PointerEvent) { @@ -62,12 +66,12 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> { } @computed get sourceAnchor() { - const ldoc = this.props.linkDoc; - if (this.props.sourceDoc !== ldoc.link_anchor_1 && this.props.sourceDoc !== ldoc.link_anchor_2) { - if (Doc.AreProtosEqual(DocCast(DocCast(ldoc.link_anchor_1).annotationOn), this.props.sourceDoc)) return DocCast(ldoc.link_anchor_1); - if (Doc.AreProtosEqual(DocCast(DocCast(ldoc.link_anchor_2).annotationOn), this.props.sourceDoc)) return DocCast(ldoc.link_anchor_2); + const ldoc = this._props.linkDoc; + if (this._props.sourceDoc !== ldoc.link_anchor_1 && this._props.sourceDoc !== ldoc.link_anchor_2) { + if (Doc.AreProtosEqual(DocCast(DocCast(ldoc.link_anchor_1).annotationOn), this._props.sourceDoc)) return DocCast(ldoc.link_anchor_1); + if (Doc.AreProtosEqual(DocCast(DocCast(ldoc.link_anchor_2).annotationOn), this._props.sourceDoc)) return DocCast(ldoc.link_anchor_2); } - return this.props.sourceDoc; + return this._props.sourceDoc; } onEdit = (e: React.PointerEvent) => { @@ -75,24 +79,24 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> { this, e, e => { - const dragData = new DragManager.DocumentDragData([this.props.linkDoc], 'embed'); + const dragData = new DragManager.DocumentDragData([this._props.linkDoc], 'embed'); dragData.dropPropertiesToRemove = ['hidden']; DragManager.StartDocumentDrag([this._editRef.current!], dragData, e.x, e.y); return true; }, emptyFunction, action(() => { - const trail = DocCast(this.props.docView.rootDoc.presentationTrail); + const trail = DocCast(this._props.docView.Document.presentationTrail); if (trail) { Doc.ActivePresentation = trail; DocumentViewInternal.addDocTabFunc(trail, OpenWhere.replaceRight); } else { - SelectionManager.SelectView(this.props.docView, false); - LinkManager.currentLink = this.props.linkDoc === LinkManager.currentLink ? undefined : this.props.linkDoc; + SelectionManager.SelectView(this._props.docView, false); + LinkManager.currentLink = this._props.linkDoc === LinkManager.currentLink ? undefined : this._props.linkDoc; LinkManager.currentLinkAnchor = LinkManager.currentLink ? this.sourceAnchor : undefined; - if ((SettingsManager.propertiesWidth ?? 0) < 100) { - setTimeout(action(() => (SettingsManager.propertiesWidth = 250))); + if ((SettingsManager.Instance.propertiesWidth ?? 0) < 100) { + setTimeout(action(() => (SettingsManager.Instance.propertiesWidth = 250))); } } }) @@ -106,43 +110,44 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> { e => { const eleClone: any = this._drag.current!.cloneNode(true); eleClone.style.transform = `translate(${e.x}px, ${e.y}px)`; - StartLinkTargetsDrag(eleClone, this.props.docView, e.x, e.y, this.props.sourceDoc, [this.props.linkDoc]); - this.props.clearLinkEditor?.(); + StartLinkTargetsDrag(eleClone, this._props.docView, e.x, e.y, this._props.sourceDoc, [this._props.linkDoc]); + this._props.clearLinkEditor?.(); return true; }, emptyFunction, () => { - this.props.clearLinkEditor?.(); - if (this.props.itemHandler) { - this.props.itemHandler?.(this.props.linkDoc); + this._props.clearLinkEditor?.(); + if (this._props.itemHandler) { + this._props.itemHandler?.(this._props.linkDoc); } else { const focusDoc = - Cast(this.props.linkDoc.link_anchor_1, Doc, null)?.annotationOn === this.props.sourceDoc - ? Cast(this.props.linkDoc.link_anchor_1, Doc, null) - : Cast(this.props.linkDoc.link_anchor_2, Doc, null)?.annotationOn === this.props.sourceDoc - ? Cast(this.props.linkDoc.link_anchor_12, Doc, null) - : undefined; - - if (focusDoc) this.props.docView.props.focus(focusDoc, { instant: true }); - LinkFollower.FollowLink(this.props.linkDoc, this.props.sourceDoc, false); + Cast(this._props.linkDoc.link_anchor_1, Doc, null)?.annotationOn === this._props.sourceDoc + ? Cast(this._props.linkDoc.link_anchor_1, Doc, null) + : Cast(this._props.linkDoc.link_anchor_2, Doc, null)?.annotationOn === this._props.sourceDoc + ? Cast(this._props.linkDoc.link_anchor_12, Doc, null) + : undefined; + + if (focusDoc) this._props.docView._props.focus(focusDoc, { instant: true }); + LinkFollower.FollowLink(this._props.linkDoc, this._props.sourceDoc, false); } } ); }; - deleteLink = (e: React.PointerEvent): void => setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => LinkManager.Instance.deleteLink(this.props.linkDoc)))); + deleteLink = (e: React.PointerEvent): void => setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => LinkManager.Instance.deleteLink(this._props.linkDoc)))); @observable _hover = false; + docView = () => this.props.docView; render() { - const destinationIcon = Doc.toIcon(this.props.destinationDoc) as any as IconProp; + const destinationIcon = Doc.toIcon(this._props.destinationDoc) as any as IconProp; - const title = StrCast(this.props.destinationDoc.title).length > 18 ? StrCast(this.props.destinationDoc.title).substr(0, 14) + '...' : this.props.destinationDoc.title; + const title = StrCast(this._props.destinationDoc.title).length > 18 ? StrCast(this._props.destinationDoc.title).substr(0, 14) + '...' : this._props.destinationDoc.title; const source = - this.props.sourceDoc.type === DocumentType.RTF - ? this.props.linkDoc.storedText - ? StrCast(this.props.linkDoc.storedText).length > 17 - ? StrCast(this.props.linkDoc.storedText).substr(0, 18) - : this.props.linkDoc.storedText + this._props.sourceDoc.type === DocumentType.RTF + ? this._props.linkDoc.storedText + ? StrCast(this._props.linkDoc.storedText).length > 17 + ? StrCast(this._props.linkDoc.storedText).substr(0, 18) + : this._props.linkDoc.storedText : undefined : undefined; @@ -154,7 +159,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> { style={{ fontSize: this._hover ? 'larger' : undefined, fontWeight: this._hover ? 'bold' : undefined, - background: LinkManager.currentLink === this.props.linkDoc ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor, + background: LinkManager.currentLink === this._props.linkDoc ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor, }}> <div className="linkMenu-item-content expand-two"> <div @@ -170,14 +175,15 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> { </div> <div className="linkMenu-text" - onPointerLeave={LinkDocPreview.Clear} + onPointerLeave={LinkInfo.Clear} onPointerEnter={e => - this.props.linkDoc && - this.props.clearLinkEditor && - LinkDocPreview.SetLinkInfo({ - docProps: this.props.docView.props, - linkSrc: this.props.sourceDoc, - linkDoc: this.props.linkDoc, + this._props.linkDoc && + this._props.clearLinkEditor && + LinkInfo.SetLinkInfo({ + DocumentView: this.docView, + styleProvider: this._props.docView._props.styleProvider, + linkSrc: this._props.sourceDoc, + linkDoc: this._props.linkDoc, showHeader: false, location: [(this._drag.current?.getBoundingClientRect().left ?? 100) + 40, (this._drag.current?.getBoundingClientRect().top ?? e.clientY) + 25], noPreview: false, @@ -194,10 +200,10 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> { <FontAwesomeIcon className="destination-icon" icon={destinationIcon} size="sm" /> </div> <p className="linkMenu-destination-title"> - {this.props.linkDoc.linksToAnnotation && Cast(this.props.destinationDoc.data, WebField)?.url.href === this.props.linkDoc.annotationUri ? 'Annotation in' : ''} {StrCast(title)} + {this._props.linkDoc.linksToAnnotation && Cast(this._props.destinationDoc.data, WebField)?.url.href === this._props.linkDoc.annotationUri ? 'Annotation in' : ''} {StrCast(title)} </p> </div> - {!this.props.linkDoc.link_description ? null : <p className="linkMenu-description">{StrCast(this.props.linkDoc.link_description).split('\n')[0].substring(0, 50)}</p>} + {!this._props.linkDoc.link_description ? null : <p className="linkMenu-description">{StrCast(this._props.linkDoc.link_description).split('\n')[0].substring(0, 50)}</p>} </div> <div className="linkMenu-item-buttons"> diff --git a/src/client/views/linking/LinkPopup.tsx b/src/client/views/linking/LinkPopup.tsx index 9a9a89732..c9e3c203d 100644 --- a/src/client/views/linking/LinkPopup.tsx +++ b/src/client/views/linking/LinkPopup.tsx @@ -1,16 +1,16 @@ import { action, observable } from 'mobx'; import { observer } from 'mobx-react'; import { EditorView } from 'prosemirror-view'; -import { Doc } from '../../../fields/Doc'; +import * as React from 'react'; import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../../Utils'; +import { Doc } from '../../../fields/Doc'; import { Transform } from '../../util/Transform'; import { undoBatch } from '../../util/UndoManager'; -import { OpenWhere } from '../nodes/DocumentView'; +import { DefaultStyleProvider } from '../StyleProvider'; +import { OpenWhere, returnEmptyDocViewList } from '../nodes/DocumentView'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; import { SearchBox } from '../search/SearchBox'; -import { DefaultStyleProvider } from '../StyleProvider'; import './LinkPopup.scss'; -import React = require('react'); interface LinkPopupProps { linkFrom?: () => Doc | undefined; @@ -29,7 +29,7 @@ interface LinkPopupProps { @observer export class LinkPopup extends React.Component<LinkPopupProps> { @observable private linkURL: string = ''; - @observable public view?: EditorView; + @observable public view?: EditorView = undefined; // TODO: should check for valid URL @undoBatch @@ -61,7 +61,7 @@ export class LinkPopup extends React.Component<LinkPopupProps> { <SearchBox Document={Doc.MySearcher} - DataDoc={Doc.MySearcher} + docViewPath={returnEmptyDocViewList} linkFrom={linkDoc} linkCreateAnchor={this.props.linkCreateAnchor} linkSearch={true} @@ -70,11 +70,10 @@ export class LinkPopup extends React.Component<LinkPopupProps> { isSelected={returnTrue} isContentActive={returnTrue} select={returnTrue} - setHeight={returnFalse} addDocument={undefined} addDocTab={returnTrue} pinToPres={emptyFunction} - rootSelected={returnTrue} + rootSelected={returnFalse} styleProvider={DefaultStyleProvider} removeDocument={undefined} ScreenToLocalTransform={Transform.Identity} @@ -82,9 +81,7 @@ export class LinkPopup extends React.Component<LinkPopupProps> { PanelHeight={this.getPHeight} renderDepth={0} focus={emptyFunction} - docViewPath={returnEmptyDoclist} whenChildContentsActiveChanged={emptyFunction} - bringToFront={emptyFunction} childFilters={returnEmptyFilter} childFiltersByRanges={returnEmptyFilter} searchFilterDocs={returnEmptyDoclist} diff --git a/src/client/views/linking/LinkRelationshipSearch.tsx b/src/client/views/linking/LinkRelationshipSearch.tsx index 9662b2fea..0902d53b2 100644 --- a/src/client/views/linking/LinkRelationshipSearch.tsx +++ b/src/client/views/linking/LinkRelationshipSearch.tsx @@ -1,6 +1,6 @@ import { observer } from 'mobx-react'; +import * as React from 'react'; import './LinkEditor.scss'; -import React = require('react'); interface link_relationshipSearchProps { results: string[] | undefined; diff --git a/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx b/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx index 3a95e5f74..bce2b296f 100644 --- a/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx +++ b/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx @@ -3,8 +3,9 @@ import * as React from 'react'; import { Doc } from '../../../../fields/Doc'; import { InkTool } from '../../../../fields/InkField'; import { SelectionManager } from '../../../util/SelectionManager'; +import { SnappingManager } from '../../../util/SnappingManager'; import { CollectionDockingView } from '../../collections/CollectionDockingView'; -import { DocumentView, OpenWhereMod } from '../../nodes/DocumentView'; +import { OpenWhereMod } from '../../nodes/DocumentView'; import { NewLightboxView } from '../NewLightboxView'; import './ButtonMenu.scss'; import { IButtonMenu } from './utils'; @@ -39,10 +40,10 @@ export const ButtonMenu = (props: IButtonMenu) => { <div className="newLightboxView-exploreBtn" title="toggle explore mode to navigate among documents only" - style={{ background: DocumentView.ExploreMode ? 'white' : undefined }} + style={{ background: SnappingManager.ExploreMode ? 'white' : undefined }} onClick={action(e => { e.stopPropagation(); - DocumentView.ExploreMode = !DocumentView.ExploreMode; + SnappingManager.SetExploreMode(!SnappingManager.ExploreMode); })}></div> </div> ); diff --git a/src/client/views/newlightbox/NewLightboxView.tsx b/src/client/views/newlightbox/NewLightboxView.tsx index ca90f6a0f..12b9870ca 100644 --- a/src/client/views/newlightbox/NewLightboxView.tsx +++ b/src/client/views/newlightbox/NewLightboxView.tsx @@ -2,27 +2,28 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; +import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnTrue } from '../../../Utils'; import { Doc, DocListCast, Opt } from '../../../fields/Doc'; import { InkTool } from '../../../fields/InkField'; import { Cast, NumCast, StrCast } from '../../../fields/Types'; -import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnTrue } from '../../../Utils'; import { DocUtils } from '../../documents/Documents'; import { DocumentManager } from '../../util/DocumentManager'; import { LinkManager } from '../../util/LinkManager'; import { SelectionManager } from '../../util/SelectionManager'; +import { SnappingManager } from '../../util/SnappingManager'; import { Transform } from '../../util/Transform'; -import { CollectionStackedTimeline } from '../collections/CollectionStackedTimeline'; -import { TabDocView } from '../collections/TabDocView'; import { GestureOverlay } from '../GestureOverlay'; import { LightboxView } from '../LightboxView'; -import { DocumentView, OpenWhere } from '../nodes/DocumentView'; import { DefaultStyleProvider } from '../StyleProvider'; -import { IRecommendation } from './components'; +import { CollectionStackedTimeline } from '../collections/CollectionStackedTimeline'; +import { TabDocView } from '../collections/TabDocView'; +import { DocumentView, OpenWhere } from '../nodes/DocumentView'; import { ExploreView } from './ExploreView'; -import { emptyBounds, IBounds } from './ExploreView/utils'; +import { IBounds, emptyBounds } from './ExploreView/utils'; import { NewLightboxHeader } from './Header'; import './NewLightboxView.scss'; import { RecommendationList } from './RecommendationList'; +import { IRecommendation } from './components'; enum LightboxStatus { RECOMMENDATIONS = 'recommendations', @@ -49,15 +50,15 @@ export class NewLightboxView extends React.Component<LightboxViewProps> { return this._doc; } private static LightboxDocTemplate = () => NewLightboxView._layoutTemplate; - @observable private static _layoutTemplate: Opt<Doc>; - @observable private static _layoutTemplateString: Opt<string>; - @observable private static _doc: Opt<Doc>; - @observable private static _docTarget: Opt<Doc>; + @observable private static _layoutTemplate: Opt<Doc> = undefined; + @observable private static _layoutTemplateString: Opt<string> = undefined; + @observable private static _doc: Opt<Doc> = undefined; + @observable private static _docTarget: Opt<Doc> = undefined; @observable private static _docFilters: string[] = []; // filters - private static _savedState: Opt<LightboxSavedState>; + private static _savedState: Opt<LightboxSavedState> = undefined; private static _history: Opt<{ doc: Doc; target?: Doc }[]> = []; @observable private static _future: Opt<Doc[]> = []; - @observable private static _docView: Opt<DocumentView>; + @observable private static _docView: Opt<DocumentView> = undefined; // keywords @observable private static _keywords: string[] = []; @@ -126,7 +127,7 @@ export class NewLightboxView extends React.Component<LightboxViewProps> { this._docFilters && (this._docFilters.length = 0); this._future = this._history = []; Doc.ActiveTool = InkTool.None; - DocumentView.ExploreMode = false; + SnappingManager.SetExploreMode(false); } else { const l = DocUtils.MakeLinkToActiveAudio(() => doc).lastElement(); l && (Cast(l.link_anchor_2, Doc, null).backgroundColor = 'lightgreen'); @@ -293,7 +294,6 @@ export class NewLightboxView extends React.Component<LightboxViewProps> { <DocumentView ref={action((r: DocumentView | null) => (NewLightboxView._docView = r !== null ? r : undefined))} Document={LightboxView.LightboxDoc} - DataDoc={undefined} PanelWidth={this.newLightboxWidth} PanelHeight={this.newLightboxHeight} LayoutTemplate={NewLightboxView.LightboxDocTemplate} @@ -302,8 +302,7 @@ export class NewLightboxView extends React.Component<LightboxViewProps> { styleProvider={DefaultStyleProvider} ScreenToLocalTransform={this.newLightboxScreenToLocal} renderDepth={0} - rootSelected={returnTrue} - docViewPath={returnEmptyDoclist} + containerViewPath={returnEmptyDoclist} childFilters={this.docFilters} childFiltersByRanges={returnEmptyFilter} searchFilterDocs={returnEmptyDoclist} @@ -312,8 +311,7 @@ export class NewLightboxView extends React.Component<LightboxViewProps> { whenChildContentsActiveChanged={emptyFunction} addDocTab={this.addDocTab} pinToPres={TabDocView.PinDoc} - bringToFront={emptyFunction} - onBrowseClick={DocumentView.exploreMode} + onBrowseClickScript={DocumentView.exploreMode} focus={emptyFunction} /> </GestureOverlay> diff --git a/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx b/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx index 96846673b..23027808f 100644 --- a/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx +++ b/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx @@ -19,17 +19,19 @@ export const Recommendation = (props: IRecommendation) => { if (source == 'Dash' && docId) { const docView = DocumentManager.Instance.getDocumentViewsById(docId).lastElement(); if (docView) { - doc = docView.rootDoc; + doc = docView.Document; } } else if (data) { switch (type) { case 'YouTube': console.log('create ', type, 'document'); - doc = Docs.Create.VideoDocument(data, { title: title, _width: 400, _height: 315, transcript }); + doc = Docs.Create.VideoDocument(data, { title: title, _width: 400, _height: 315 }); + doc.transcript = transcript ? JSON.stringify(transcript) : undefined; break; case 'Video': console.log('create ', type, 'document'); - doc = Docs.Create.VideoDocument(data, { title: title, _width: 400, _height: 315, transcript }); + doc = Docs.Create.VideoDocument(data, { title: title, _width: 400, _height: 315 }); + doc.transcript = transcript ? JSON.stringify(transcript) : undefined; break; case 'Webpage': console.log('create ', type, 'document'); diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index d40537776..4337401e3 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -1,4 +1,4 @@ -@import "../global/globalCssVariables.scss"; +@import '../global/globalCssVariables.module.scss'; .audiobox-container { width: 100%; @@ -116,18 +116,18 @@ width: 10px; } - input[type="range"] { + input[type='range'] { width: 50px; -webkit-appearance: none; background: none; margin: 5px; } - input[type="range"]:focus { + input[type='range']:focus { outline: none; } - input[type="range"]::-webkit-slider-runnable-track { + input[type='range']::-webkit-slider-runnable-track { width: 100%; height: 6px; cursor: pointer; @@ -136,7 +136,7 @@ border-radius: 3px; } - input[type="range"]::-webkit-slider-thumb { + input[type='range']::-webkit-slider-thumb { box-shadow: 0; border: 0; height: 10px; diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 8d80f1364..8a38ef663 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -1,10 +1,11 @@ -import React = require('react'); import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Tooltip } from '@material-ui/core'; -import { action, computed, IReactionDisposer, observable, runInAction } from 'mobx'; +import { Tooltip } from '@mui/material'; +import { action, computed, IReactionDisposer, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { DateField } from '../../../fields/DateField'; import { Doc } from '../../../fields/Doc'; +import { DocData } from '../../../fields/DocSymbols'; import { ComputedField } from '../../../fields/ScriptField'; import { Cast, DateCast, NumCast } from '../../../fields/Types'; import { AudioField, nullAudio } from '../../../fields/URLField'; @@ -17,10 +18,9 @@ import { undoBatch } from '../../util/UndoManager'; import { CollectionStackedTimeline, TrimScope } from '../collections/CollectionStackedTimeline'; import { ContextMenu } from '../ContextMenu'; import { ContextMenuProps } from '../ContextMenuItem'; -import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../DocComponent'; +import { ViewBoxAnnotatableComponent } from '../DocComponent'; import './AudioBox.scss'; -import { DocFocusOptions } from './DocumentView'; -import { FieldView, FieldViewProps } from './FieldView'; +import { FocusViewOptions, FieldView, FieldViewProps } from './FieldView'; import { PinProps, PresBox } from './trails'; /** @@ -49,12 +49,18 @@ export enum media_state { } @observer -export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps>() { +export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(AudioBox, fieldKey); } + public static Enabled = false; + constructor(props: any) { + super(props); + makeObservable(this); + } + static topControlsHeight = 30; // height of upper controls above timeline static bottomControlsHeight = 20; // height of lower controls below timeline @@ -68,7 +74,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp _stream: MediaStream | undefined; // passed to MediaRecorder, records device input audio _play: any = null; // timeout for playback - @observable _stackedTimeline: CollectionStackedTimeline | null | undefined; // CollectionStackedTimeline ref + @observable _stackedTimeline: CollectionStackedTimeline | null | undefined = undefined; // CollectionStackedTimeline ref @observable _finished: boolean = false; // has playback reached end of clip @observable _volume: number = 1; @observable _muted: boolean = false; @@ -84,7 +90,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp // if you get rid of it and set the value to 0 the timeline and waveform will set their bounds incorrectly @computed get miniPlayer() { - return this.props.PanelHeight() < 50; + return this._props.PanelHeight() < 50; } // used to collapse timeline when node is shrunk @computed get links() { return LinkManager.Links(this.dataDoc); @@ -94,7 +100,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp } @computed get path() { // returns the path of the audio file - const path = Cast(this.props.Document[this.fieldKey], AudioField, null)?.url.href || ''; + const path = Cast(this.Document[this.fieldKey], AudioField, null)?.url.href || ''; return path === nullAudio ? '' : path; } set mediaState(value) { @@ -115,7 +121,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp @action componentDidMount() { - this.props.setContentView?.(this); + this._props.setContentViewBox?.(this); if (this.path) { this.mediaState = media_state.Paused; this.setPlayheadTime(NumCast(this.layoutDoc.clipStart)); @@ -139,17 +145,17 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp const timecode = Cast(this.layoutDoc._layout_currentTimecode, 'number', null); const anchor = addAsAnnotation ? CollectionStackedTimeline.createAnchor( - this.rootDoc, + this.Document, this.dataDoc, this.annotationKey, - this._ele?.currentTime || Cast(this.props.Document._layout_currentTimecode, 'number', null) || (this.mediaState === media_state.Recording ? (Date.now() - (this.recordingStart || 0)) / 1000 : undefined), + this._ele?.currentTime || Cast(this.Document._layout_currentTimecode, 'number', null) || (this.mediaState === media_state.Recording ? (Date.now() - (this.recordingStart || 0)) / 1000 : undefined), undefined, undefined, addAsAnnotation - ) || this.rootDoc - : Docs.Create.ConfigDocument({ title: '#' + timecode, _timecodeToShow: timecode, annotationOn: this.rootDoc }); + ) || this.Document + : Docs.Create.ConfigDocument({ title: '#' + timecode, _timecodeToShow: timecode, annotationOn: this.Document }); - PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), temporal: true } }, this.rootDoc); + PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), temporal: true } }, this.Document); return anchor; }; @@ -186,13 +192,16 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp this._ele.play(); this.mediaState = media_state.Playing; this.addCurrentlyPlaying(); - this._play = setTimeout(() => { - // need to keep track of if end of clip is reached so on next play, clip restarts - if (fullPlay) this._finished = true; - // removes from currently playing if playback has reached end of range marker - else this.removeCurrentlyPlaying(); - this.Pause(); - }, (end - start) * 1000); + this._play = setTimeout( + () => { + // need to keep track of if end of clip is reached so on next play, clip restarts + if (fullPlay) this._finished = true; + // removes from currently playing if playback has reached end of range marker + else this.removeCurrentlyPlaying(); + this.Pause(); + }, + (end - start) * 1000 + ); } else { this.Pause(); } @@ -202,7 +211,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp // removes from currently playing display @action removeCurrentlyPlaying = () => { - const docView = this.props.DocumentView?.(); + const docView = this.DocumentView?.(); if (CollectionStackedTimeline.CurrentlyPlaying && docView) { const index = CollectionStackedTimeline.CurrentlyPlaying.indexOf(docView); index !== -1 && CollectionStackedTimeline.CurrentlyPlaying.splice(index, 1); @@ -212,7 +221,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp // adds doc to currently playing display @action addCurrentlyPlaying = () => { - const docView = this.props.DocumentView?.(); + const docView = this.DocumentView?.(); if (!CollectionStackedTimeline.CurrentlyPlaying) { CollectionStackedTimeline.CurrentlyPlaying = []; } @@ -240,7 +249,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp this._recorder.ondataavailable = async (e: any) => { const [{ result }] = await Networking.UploadFilesToServer({ file: e.data }); if (!(result instanceof Error)) { - this.props.Document[this.fieldKey] = new AudioField(result.accessPaths.agnostic.client); + this.Document[this.fieldKey] = new AudioField(result.accessPaths.agnostic.client); } }; this._recordStart = new Date().getTime(); @@ -363,17 +372,18 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp returnFalse, returnFalse, action(() => { - const newDoc = DocUtils.GetNewTextDoc('', NumCast(this.rootDoc.x), NumCast(this.rootDoc.y) + NumCast(this.layoutDoc._height) + 10, NumCast(this.layoutDoc._width), 2 * NumCast(this.layoutDoc._height)); + const newDoc = DocUtils.GetNewTextDoc('', NumCast(this.Document.x), NumCast(this.Document.y) + NumCast(this.layoutDoc._height) + 10, NumCast(this.layoutDoc._width), 2 * NumCast(this.layoutDoc._height)); const textField = Doc.LayoutFieldKey(newDoc); - Doc.GetProto(newDoc)[`${textField}_recordingSource`] = this.dataDoc; - Doc.GetProto(newDoc)[`${textField}_recordingStart`] = ComputedField.MakeFunction(`self.${textField}_recordingSource.${this.fieldKey}_recordingStart`); - Doc.GetProto(newDoc).mediaState = ComputedField.MakeFunction(`self.${textField}_recordingSource.mediaState`); - if (Doc.IsInMyOverlay(this.rootDoc)) { - newDoc.overlayX = this.rootDoc.x; - newDoc.overlayY = NumCast(this.rootDoc.y) + NumCast(this.rootDoc._height); + const newDocData = newDoc[DocData]; + newDocData[`${textField}_recordingSource`] = this.dataDoc; + newDocData[`${textField}_recordingStart`] = ComputedField.MakeFunction(`this.${textField}_recordingSource.${this.fieldKey}_recordingStart`); + newDocData.mediaState = ComputedField.MakeFunction(`this.${textField}_recordingSource.mediaState`); + if (Doc.IsInMyOverlay(this.Document)) { + newDoc.overlayX = this.Document.x; + newDoc.overlayY = NumCast(this.Document.y) + NumCast(this.layoutDoc._height); Doc.AddToMyOverlay(newDoc); } else { - this.props.addDocument?.(newDoc); + this._props.addDocument?.(newDoc); } }), false @@ -423,8 +433,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp }; // plays link - playLink = (link: Doc, options: DocFocusOptions) => { - if (link.annotationOn === this.rootDoc) { + playLink = (link: Doc, options: FocusViewOptions) => { + if (link.annotationOn === this.Document) { if (!this.layoutDoc.dontAutoPlayFollowedLinks) { this.playFrom(this.timeline?.anchorStart(link) || 0, this.timeline?.anchorEnd(link)); } else { @@ -449,9 +459,9 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp }; @action - timelineWhenChildContentsActiveChanged = (isActive: boolean) => this.props.whenChildContentsActiveChanged((this._isAnyChildContentActive = isActive)); + timelineWhenChildContentsActiveChanged = (isActive: boolean) => this._props.whenChildContentsActiveChanged((this._isAnyChildContentActive = isActive)); - timelineScreenToLocal = () => this.props.ScreenToLocalTransform().translate(0, -AudioBox.topControlsHeight); + timelineScreenToLocal = () => this.ScreenToLocalBoxXf().translate(0, -AudioBox.topControlsHeight); setPlayheadTime = (time: number) => (this._ele!.currentTime /*= this.layoutDoc._layout_currentTimecode*/ = time); @@ -460,8 +470,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp isActiveChild = () => this._isAnyChildContentActive; // timeline dimensions - timelineWidth = () => this.props.PanelWidth(); - timelineHeight = () => this.props.PanelHeight() - (AudioBox.topControlsHeight + AudioBox.bottomControlsHeight); + timelineWidth = () => this._props.PanelWidth(); + timelineHeight = () => this._props.PanelHeight() - (AudioBox.topControlsHeight + AudioBox.bottomControlsHeight); // ends trim, hides trim controls and displays new clip @undoBatch @@ -555,11 +565,10 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp this._dropDisposer = DragManager.MakeDropTarget( r, (e, de) => { - const [xp, yp] = this.props.ScreenToLocalTransform().transformPoint(de.x, de.y); + const [xp, yp] = this.ScreenToLocalBoxXf().transformPoint(de.x, de.y); de.complete.docDragData && this.timeline?.internalDocDrop(e, de, de.complete.docDragData, xp); }, - this.layoutDoc, - undefined + this.layoutDoc ); } }; @@ -597,7 +606,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp <div className="audiobox-file" style={{ - pointerEvents: this._isAnyChildContentActive || this.props.isContentActive() ? 'all' : 'none', + pointerEvents: this._isAnyChildContentActive || this._props.isContentActive() ? 'all' : 'none', flexDirection: this.miniPlayer ? 'row' : 'column', justifyContent: this.miniPlayer ? 'flex-start' : 'space-between', }}> @@ -670,7 +679,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp <div className="audiobox-timecodes"> <div className="timecode-current">{this.timeline && formatTime(Math.round(NumCast(this.layoutDoc._layout_currentTimecode) - NumCast(this.timeline.clipStart)))}</div> {this.miniPlayer ? ( - <div>/</div> + <div /> ) : ( <div className="bottom-controls-middle"> <FontAwesomeIcon icon="search-plus" /> @@ -699,16 +708,15 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp return ( <CollectionStackedTimeline ref={action((r: CollectionStackedTimeline | null) => (this._stackedTimeline = r))} - {...this.props} + {...this._props} CollectionFreeFormDocumentView={undefined} dataFieldKey={this.fieldKey} fieldKey={this.annotationKey} dictationKey={this.fieldKey + '_dictation'} mediaPath={this.path} - renderDepth={this.props.renderDepth + 1} + renderDepth={this._props.renderDepth + 1} startTag={'_timecodeToShow' /* audioStart */} endTag={'_timecodeToHide' /* audioEnd */} - bringToFront={emptyFunction} playFrom={this.playFrom} setTime={this.setPlayheadTime} playing={this.playing} @@ -719,7 +727,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp ScreenToLocalTransform={this.timelineScreenToLocal} Play={this.Play} Pause={this.Pause} - isContentActive={this.props.isContentActive} + isContentActive={this._props.isContentActive} isAnyChildContentActive={this.isAnyChildContentActive} playLink={this.playLink} PanelWidth={this.timelineWidth} @@ -734,7 +742,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp return ( <audio ref={this.setRef} - className={`audiobox-control${this.props.isContentActive() ? '-interactive' : ''}`} + className={`audiobox-control${this._props.isContentActive() ? '-interactive' : ''}`} onLoadedData={action(e => this._ele?.duration && this._ele?.duration !== Infinity && (this.dataDoc[this.fieldKey + '_duration'] = this._ele.duration))}> <source src={this.path} type="audio/mpeg" /> Not supported. diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.scss b/src/client/views/nodes/CollectionFreeFormDocumentView.scss index f99011b8f..7f0a39550 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.scss +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.scss @@ -1,9 +1,9 @@ .collectionFreeFormDocumentView-container { - transform-origin: left top; + transform-origin: 50% 50%; position: absolute; background-color: transparent; touch-action: manipulation; top: 0; left: 0; - //pointer-events: none; + pointer-events: none; } diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index f9afe4d53..0ae4ed62c 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -1,42 +1,146 @@ -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; -import { Doc, Opt } from '../../../fields/Doc'; +import * as React from 'react'; +import { OmitKeys, numberRange } from '../../../Utils'; +import { Doc, DocListCast, Opt } from '../../../fields/Doc'; import { List } from '../../../fields/List'; import { listSpec } from '../../../fields/Schema'; import { ComputedField } from '../../../fields/ScriptField'; import { Cast, NumCast, StrCast } from '../../../fields/Types'; import { TraceMobx } from '../../../fields/util'; -import { numberRange, OmitKeys } from '../../../Utils'; import { DocumentManager } from '../../util/DocumentManager'; +import { ScriptingGlobals } from '../../util/ScriptingGlobals'; import { SelectionManager } from '../../util/SelectionManager'; -import { Transform } from '../../util/Transform'; -import { CollectionFreeFormView } from '../collections/collectionFreeForm/CollectionFreeFormView'; import { DocComponent } from '../DocComponent'; +import { ObservableReactComponent } from '../ObservableReactComponent'; import { StyleProp } from '../StyleProvider'; +import { CollectionFreeFormView } from '../collections/collectionFreeForm/CollectionFreeFormView'; import './CollectionFreeFormDocumentView.scss'; import { DocumentView, DocumentViewProps, OpenWhere } from './DocumentView'; -import React = require('react'); +import { FieldViewProps } from './FieldView'; -export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps { - dataProvider?: (doc: Doc, replica: string) => { x: number; y: number; zIndex?: number; rotation?: number; color?: string; backgroundColor?: string; opacity?: number; highlight?: boolean; z: number; transition?: string } | undefined; - sizeProvider?: (doc: Doc, replica: string) => { width: number; height: number } | undefined; - renderCutoffProvider: (doc: Doc) => boolean; +export interface CollectionFreeFormDocumentViewWrapperProps extends DocumentViewProps { + x: number; + y: number; + z: number; + width: number; + height: number; zIndex?: number; + autoDim?: number; // 1 means use Panel Width/Height, 0 means use width/height + rotation?: number; + color?: string; + backgroundColor?: string; + opacity?: number; + highlight?: boolean; + transition?: string; dataTransition?: string; - replica: string; + RenderCutoffProvider: (doc: Doc) => boolean; + CollectionFreeFormView: CollectionFreeFormView; +} +@observer +export class CollectionFreeFormDocumentViewWrapper extends ObservableReactComponent<CollectionFreeFormDocumentViewWrapperProps> { + constructor(props: CollectionFreeFormDocumentViewWrapperProps) { + super(props); + makeObservable(this); + } + @observable X = this.props.x; + @observable Y = this.props.y; + @observable Z = this.props.z; + @observable ZIndex = this.props.zIndex; + @observable Rotation = this.props.rotation; + @observable Opacity = this.props.opacity; + @observable BackgroundColor = this.props.backgroundColor; + @observable Color = this.props.color; + @observable Highlight = this.props.highlight; + @observable Width = this.props.width; + @observable Height = this.props.height; + @observable AutoDim = this.props.autoDim; + @observable Transition = this.props.transition; + @observable DataTransition = this.props.dataTransition; + CollectionFreeFormView = this.props.CollectionFreeFormView; // needed for type checking + RenderCutoffProvider = this.props.RenderCutoffProvider; // needed for type checking + + get Document() { + return this._props.Document; + } + @computed get WrapperKeys() { + return Object.keys(this).filter(key => key.startsWith('w_')).map(key => key.replace('w_', '')) + .map(key => ({upper:key, lower:key[0].toLowerCase() + key.substring(1)})); // prettier-ignore + } + + // wrapper functions around prop fields that have been converted to observables to keep 'props' from ever changing. + // this way, downstream code only invalidates when it uses a specific prop, not when any prop changes + w_X = () => this.X; // prettier-ignore + w_Y = () => this.Y; // prettier-ignore + w_Z = () => this.Z; // prettier-ignore + w_ZIndex = () => this.ZIndex ?? NumCast(this.Document.zIndex); // prettier-ignore + w_Rotation = () => this.Rotation ?? NumCast(this.Document._rotation); // prettier-ignore + w_Opacity = () => this.Opacity; // prettier-ignore + w_BackgroundColor = () => this.BackgroundColor ?? Cast(this.Document._backgroundColor, 'string', null); // prettier-ignore + w_Color = () => this.Color ?? Cast(this.Document._color, 'string', null); // prettier-ignore + w_Highlight = () => this.Highlight; // prettier-ignore + w_Width = () => this.Width; // prettier-ignore + w_Height = () => this.Height; // prettier-ignore + w_AutoDim = () => this.AutoDim; // prettier-ignore + w_Transition = () => this.Transition; // prettier-ignore + w_DataTransition = () => this.DataTransition; // prettier-ignore + + PanelWidth = () => this._props.autoDim ? this._props.PanelWidth?.() : this.Width; // prettier-ignore + PanelHeight = () => this._props.autoDim ? this._props.PanelHeight?.() : this.Height; // prettier-ignore + + componentDidUpdate(prevProps: Readonly<React.PropsWithChildren<CollectionFreeFormDocumentViewWrapperProps & { fieldKey: string }>>) { + super.componentDidUpdate(prevProps); + this.WrapperKeys.forEach(action(keys => ((this as any)[keys.upper] = (this.props as any)[keys.lower]))); + } + render() { + const layoutProps = this.WrapperKeys.reduce((val, keys) => [(val['w_' + keys.upper] = (this as any)['w_' + keys.upper]), val][1], {} as { [key: string]: Function }); + return ( + <CollectionFreeFormDocumentView + {...OmitKeys(this._props, this.WrapperKeys.map(keys => keys.lower) ).omit} // prettier-ignore + {...layoutProps} + PanelWidth={this.PanelWidth} + PanelHeight={this.PanelHeight} + /> + ); + } +} +export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps { + w_X: () => number; + w_Y: () => number; + w_Z: () => number; + w_ZIndex?: () => number; + w_Rotation?: () => number; + w_Color: () => string; + w_BackgroundColor: () => string; + w_Opacity: () => number | undefined; + w_Highlight: () => boolean | undefined; + w_Transition: () => string | undefined; + w_Width: () => number; + w_Height: () => number; + w_DataTransition: () => string | undefined; + PanelWidth: () => number; + PanelHeight: () => number; + RenderCutoffProvider: (doc: Doc) => boolean; CollectionFreeFormView: CollectionFreeFormView; } @observer export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeFormDocumentViewProps>() { + constructor(props: CollectionFreeFormDocumentViewProps) { + super(props); + makeObservable(this); + } + get displayName() { // this makes mobx trace() statements more descriptive + return 'CollectionFreeFormDocumentView(' + this.Document.title + ')'; + } // prettier-ignore public static animFields: { key: string; val?: number }[] = [ - { key: '_height' }, - { key: '_width' }, { key: 'x' }, { key: 'y' }, + { key: 'opacity', val: 1 }, + { key: '_height' }, + { key: '_width' }, { key: '_rotation', val: 0 }, { key: '_layout_scrollTop' }, - { key: 'opacity', val: 1 }, { key: '_currentFrame' }, { key: 'freeform_scale', val: 1 }, { key: 'freeform_panX' }, @@ -44,124 +148,93 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF ]; // fields that are configured to be animatable using animation frames public static animStringFields = ['backgroundColor', 'color', 'fillColor']; // fields that are configured to be animatable using animation frames public static animDataFields = (doc: Doc) => (Doc.LayoutFieldKey(doc) ? [Doc.LayoutFieldKey(doc)] : []); // fields that are configured to be animatable using animation frames - @observable _animPos: number[] | undefined = undefined; - @observable _contentView: DocumentView | undefined | null; - get displayName() { - // this makes mobx trace() statements more descriptive - return 'CollectionFreeFormDocumentView(' + this.rootDoc.title + ')'; - } - get transform() { - return `translate(${this.X}px, ${this.Y}px) rotate(${NumCast(this.Rot, this.Rot)}deg)`; - } - get X() { - return this.dataProvider?.x ?? NumCast(this.Document.x); - } - get Y() { - return this.dataProvider?.y ?? NumCast(this.Document.y); - } - get ZInd() { - return this.dataProvider?.zIndex ?? NumCast(this.Document.zIndex); - } - get Rot() { - return this.dataProvider?.rotation ?? NumCast(this.Document._rotation); - } - get Opacity() { - return this.dataProvider?.opacity; - } - get BackgroundColor() { - return this.dataProvider?.backgroundColor ?? Cast(this.Document._backgroundColor, 'string', null); - } - get Color() { - return this.dataProvider?.color ?? Cast(this.Document._color, 'string', null); - } - @computed get dataProvider() { - return this.props.dataProvider?.(this.props.Document, this.props.replica); - } - @computed get sizeProvider() { - return this.props.sizeProvider?.(this.props.Document, this.props.replica); + get CollectionFreeFormView() { + return this._props.CollectionFreeFormView; } - styleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps>, property: string) => { + styleProvider = (doc: Doc | undefined, props: Opt<FieldViewProps>, property: string) => { if (doc === this.layoutDoc) { - // prettier-ignore switch (property) { - case StyleProp.Opacity: return this.Opacity; // only change the opacity for this specific document, not its children - case StyleProp.BackgroundColor: return this.BackgroundColor; - case StyleProp.Color: return this.Color; - } + case StyleProp.Opacity: return this._props.w_Opacity(); // only change the opacity for this specific document, not its children + case StyleProp.BackgroundColor: return this._props.w_BackgroundColor(); + case StyleProp.Color: return this._props.w_Color(); + } // prettier-ignore } - return this.props.styleProvider?.(doc, props, property); + return this._props.styleProvider?.(doc, props, property); }; public static getValues(doc: Doc, time: number, fillIn: boolean = true) { - return CollectionFreeFormDocumentView.animFields.reduce((p, val) => { - p[val.key] = Cast(doc[`${val.key}-indexed`], listSpec('number'), fillIn ? [NumCast(doc[val.key], val.val)] : []).reduce((p, v, i) => ((i <= Math.round(time) && v !== undefined) || p === undefined ? v : p), undefined as any as number); - return p; - }, {} as { [val: string]: Opt<number> }); + return CollectionFreeFormDocumentView.animFields.reduce( + (p, val) => { + p[val.key] = Cast(doc[`${val.key}_indexed`], listSpec('number'), fillIn ? [NumCast(doc[val.key], val.val)] : []).reduce((p, v, i) => ((i <= Math.round(time) && v !== undefined) || p === undefined ? v : p), undefined as any as number); + return p; + }, + {} as { [val: string]: Opt<number> } + ); } public static getStringValues(doc: Doc, time: number) { - return CollectionFreeFormDocumentView.animStringFields.reduce((p, val) => { - p[val] = Cast(doc[`${val}-indexed`], listSpec('string'), [StrCast(doc[val])]).reduce((p, v, i) => ((i <= Math.round(time) && v !== undefined) || p === undefined ? v : p), undefined as any as string); - return p; - }, {} as { [val: string]: Opt<string> }); + return CollectionFreeFormDocumentView.animStringFields.reduce( + (p, val) => { + p[val] = Cast(doc[`${val}_indexed`], listSpec('string'), [StrCast(doc[val])]).reduce((p, v, i) => ((i <= Math.round(time) && v !== undefined) || p === undefined ? v : p), undefined as any as string); + return p; + }, + {} as { [val: string]: Opt<string> } + ); } public static setStringValues(time: number, d: Doc, vals: { [val: string]: Opt<string> }) { const timecode = Math.round(time); Object.keys(vals).forEach(val => { - const findexed = Cast(d[`${val}-indexed`], listSpec('string'), []).slice(); + const findexed = Cast(d[`${val}_indexed`], listSpec('string'), []).slice(); findexed[timecode] = vals[val] as any as string; - d[`${val}-indexed`] = new List<string>(findexed); + d[`${val}_indexed`] = new List<string>(findexed); }); } public static setValues(time: number, d: Doc, vals: { [val: string]: Opt<number> }) { const timecode = Math.round(time); Object.keys(vals).forEach(val => { - const findexed = Cast(d[`${val}-indexed`], listSpec('number'), []).slice(); + const findexed = Cast(d[`${val}_indexed`], listSpec('number'), []).slice(); findexed[timecode] = vals[val] as any as number; - d[`${val}-indexed`] = new List<number>(findexed); + d[`${val}_indexed`] = new List<number>(findexed); }); } - - public static setupZoom(doc: Doc, targDoc: Doc) { - const width = new List<number>(); - const height = new List<number>(); - const top = new List<number>(); - const left = new List<number>(); - width.push(NumCast(targDoc._width)); - height.push(NumCast(targDoc._height)); - top.push(NumCast(targDoc._height) / -2); - left.push(NumCast(targDoc._width) / -2); - doc['viewfinder-width-indexed'] = width; - doc['viewfinder-height-indexed'] = height; - doc['viewfinder-top-indexed'] = top; - doc['viewfinder-left-indexed'] = left; + public static gotoKeyFrame(doc: Doc, newFrame: number) { + if (doc) { + const childDocs = DocListCast(doc[Doc.LayoutFieldKey(doc)]); + const currentFrame = Cast(doc._currentFrame, 'number', null); + if (currentFrame === undefined) { + doc._currentFrame = 0; + CollectionFreeFormDocumentView.setupKeyframes(childDocs, 0); + } + CollectionFreeFormView.updateKeyframe(undefined, [...childDocs, doc], currentFrame || 0); + doc._currentFrame = newFrame === undefined ? 0 : Math.max(0, newFrame); + } } public static setupKeyframes(docs: Doc[], currTimecode: number, makeAppear: boolean = false) { docs.forEach(doc => { if (doc.appearFrame === undefined) doc.appearFrame = currTimecode; - if (!doc['opacity-indexed']) { + if (!doc['opacity_indexed']) { // opacity is unlike other fields because it's value should not be undefined before it appears to enable it to fade-in - doc['opacity-indexed'] = new List<number>(numberRange(currTimecode + 1).map(t => (!doc.z && makeAppear && t < NumCast(doc.appearFrame) ? 0 : 1))); + doc['opacity_indexed'] = new List<number>(numberRange(currTimecode + 1).map(t => (!doc.z && makeAppear && t < NumCast(doc.appearFrame) ? 0 : 1))); } CollectionFreeFormDocumentView.animFields.forEach(val => (doc[val.key] = ComputedField.MakeInterpolatedNumber(val.key, 'activeFrame', doc, currTimecode, val.val))); CollectionFreeFormDocumentView.animStringFields.forEach(val => (doc[val] = ComputedField.MakeInterpolatedString(val, 'activeFrame', doc, currTimecode))); CollectionFreeFormDocumentView.animDataFields(doc).forEach(val => (doc[val] = ComputedField.MakeInterpolatedDataField(val, 'activeFrame', doc, currTimecode))); const targetDoc = doc; // data fields, like rtf 'text' exist on the data doc, so //doc !== targetDoc && (targetDoc.embedContainer = doc.embedContainer); // the computed fields don't see the layout doc -- need to copy the embedContainer to the data doc (HACK!!!) and set the activeFrame on the data doc (HACK!!!) - targetDoc.activeFrame = ComputedField.MakeFunction('self.embedContainer?._currentFrame||0'); + targetDoc.activeFrame = ComputedField.MakeFunction('this.embedContainer?._currentFrame||0'); targetDoc.dataTransition = 'inherit'; }); } - @action public float = () => { - const topDoc = this.rootDoc; - const containerDocView = this.props.docViewPath().lastElement(); - const screenXf = containerDocView?.screenToLocalTransform(); + float = () => { + const topDoc = this.Document; + const containerDocView = this._props.containerViewPath?.().lastElement(); + const screenXf = containerDocView?.screenToContentsTransform(); if (screenXf) { SelectionManager.DeselectAll(); if (topDoc.z) { @@ -169,8 +242,8 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF topDoc.z = 0; topDoc.x = spt[0]; topDoc.y = spt[1]; - this.props.removeDocument?.(topDoc); - this.props.addDocTab(topDoc, OpenWhere.inParentFromScreen); + this._props.removeDocument?.(topDoc); + this._props.addDocTab(topDoc, OpenWhere.inParentFromScreen); } else { const spt = this.screenToLocalTransform().inverse().transformPoint(0, 0); const fpt = screenXf.transformPoint(spt[0], spt[1]); @@ -182,16 +255,16 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF } }; - dragEnding = () => this.props.CollectionFreeFormView?.dragEnding(); - dragStarting = () => this.props.CollectionFreeFormView?.dragStarting(false, true); - nudge = (x: number, y: number) => { - this.props.Document.x = NumCast(this.props.Document.x) + x; - this.props.Document.y = NumCast(this.props.Document.y) + y; + const [locX, locY] = this._props.ScreenToLocalTransform().transformDirection(x, y); + this.Document.x = this._props.w_X() + locX; + this.Document.y = this._props.w_Y() + locY; }; - panelWidth = () => this.sizeProvider?.width || this.props.PanelWidth?.(); - panelHeight = () => this.sizeProvider?.height || this.props.PanelHeight?.(); - screenToLocalTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-this.X, -this.Y); + screenToLocalTransform = () => + this._props + .ScreenToLocalTransform() + .translate(-this._props.w_X(), -this._props.w_Y()) + .rotateDeg(-(this._props.w_Rotation?.() || 0)); returnThis = () => this; /// this indicates whether the doc view is activated because of its relationshop to a group @@ -200,40 +273,34 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF // 'inactive' - this is a group child but it is not active // undefined - this is not activated by a group isGroupActive = () => { - if (this.props.CollectionFreeFormView.isAnyChildContentActive()) return undefined; - const isGroup = this.rootDoc._isGroup && (!this.rootDoc.backgroundColor || this.rootDoc.backgroundColor === 'transparent'); - return isGroup ? (this.props.isDocumentActive?.() ? 'group' : this.props.isGroupActive?.() ? 'child' : 'inactive') : this.props.isGroupActive?.() ? 'child' : undefined; + if (this.CollectionFreeFormView.isAnyChildContentActive()) return undefined; + const isGroup = this.dataDoc.isGroup && (!this.layoutDoc.backgroundColor || this.layoutDoc.backgroundColor === 'transparent'); + return isGroup ? (this._props.isDocumentActive?.() ? 'group' : this._props.isGroupActive?.() ? 'child' : 'inactive') : this._props.isGroupActive?.() ? 'child' : undefined; }; + public static CollectionFreeFormDocViewClassName = 'collectionFreeFormDocumentView-container'; render() { TraceMobx(); - const divProps: DocumentViewProps = { - ...this.props, - CollectionFreeFormDocumentView: this.returnThis, - styleProvider: this.styleProvider, - ScreenToLocalTransform: this.screenToLocalTransform, - PanelWidth: this.panelWidth, - PanelHeight: this.panelHeight, - isGroupActive: this.isGroupActive, - }; + const passOnProps = OmitKeys(this._props, Object.keys(this._props).filter(key => key.startsWith('w_'))).omit; // prettier-ignore return ( <div - className="collectionFreeFormDocumentView-container" + className={CollectionFreeFormDocumentView.CollectionFreeFormDocViewClassName} style={{ - width: this.panelWidth(), - height: this.panelHeight(), - transform: this.transform, - transformOrigin: '50% 50%', - transition: this.dataProvider?.transition ?? (this.props.dataTransition ? this.props.dataTransition : this.dataProvider ? this.dataProvider.transition : StrCast(this.layoutDoc.dataTransition)), - zIndex: this.ZInd, - display: this.sizeProvider?.width ? undefined : 'none', - pointerEvents: 'none', + width: this._props.PanelWidth(), + height: this._props.PanelHeight(), + transform: `translate(${this._props.w_X()}px, ${this._props.w_Y()}px) rotate(${NumCast(this._props.w_Rotation?.())}deg)`, + transition: this._props.w_Transition?.() ?? (this._props.w_DataTransition?.() || this._props.w_Transition?.()), + zIndex: this._props.w_ZIndex?.(), + display: this._props.w_Width?.() ? undefined : 'none', }}> - {this.props.renderCutoffProvider(this.props.Document) ? ( - <div style={{ position: 'absolute', width: this.panelWidth(), height: this.panelHeight(), background: 'lightGreen' }} /> + {this._props.RenderCutoffProvider(this.Document) ? ( + <div style={{ position: 'absolute', width: this._props.PanelWidth(), height: this._props.PanelHeight(), background: 'lightGreen' }} /> ) : ( - <DocumentView {...divProps} ref={action((r: DocumentView | null) => (this._contentView = r))} /> + <DocumentView {...passOnProps} CollectionFreeFormDocumentView={this.returnThis} styleProvider={this.styleProvider} ScreenToLocalTransform={this.screenToLocalTransform} isGroupActive={this.isGroupActive} /> )} </div> ); } } +ScriptingGlobals.add(function gotoFrame(doc: any, newFrame: any) { + CollectionFreeFormDocumentView.gotoKeyFrame(doc, newFrame); +}); diff --git a/src/client/views/nodes/ColorBox.scss b/src/client/views/nodes/ColorBox.scss deleted file mode 100644 index d5f2a7ec7..000000000 --- a/src/client/views/nodes/ColorBox.scss +++ /dev/null @@ -1,22 +0,0 @@ -.colorBox-container, .colorBox-container-interactive { - width:100%; - height:100%; - position: relative; - pointer-events: none; - transform-origin: top left; - - .sketch-picker { - div { - cursor: crosshair; - } - .flexbox-fix { - cursor: pointer; - div { - cursor:pointer; - } - } - } -} -.colorBox-container-interactive { - pointer-events:all; -}
\ No newline at end of file diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx deleted file mode 100644 index 1b6fe5748..000000000 --- a/src/client/views/nodes/ColorBox.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import React = require('react'); -import { action } from 'mobx'; -import { observer } from 'mobx-react'; -import { ColorState, SketchPicker } from 'react-color'; -import { Doc } from '../../../fields/Doc'; -import { Height, Width } from '../../../fields/DocSymbols'; -import { InkTool } from '../../../fields/InkField'; -import { StrCast } from '../../../fields/Types'; -import { DocumentType } from '../../documents/DocumentTypes'; -import { SelectionManager } from '../../util/SelectionManager'; -import { undoBatch } from '../../util/UndoManager'; -import { ViewBoxBaseComponent } from '../DocComponent'; -import { ActiveInkColor, ActiveInkWidth, SetActiveInkColor, SetActiveInkWidth } from '../InkingStroke'; -import './ColorBox.scss'; -import { FieldView, FieldViewProps } from './FieldView'; -import { RichTextMenu } from './formattedText/RichTextMenu'; -import { ScriptingGlobals } from '../../util/ScriptingGlobals'; -import { DashColor } from '../../../Utils'; - -@observer -export class ColorBox extends ViewBoxBaseComponent<FieldViewProps>() { - public static LayoutString(fieldKey: string) { - return FieldView.LayoutString(ColorBox, fieldKey); - } - - @undoBatch - @action - static switchColor(color: ColorState) { - SetActiveInkColor(color.hex); - - SelectionManager.Views().map(view => { - const targetDoc = - view.props.Document.dragFactory instanceof Doc - ? view.props.Document.dragFactory - : view.props.Document.layout instanceof Doc - ? view.props.Document.layout - : view.props.Document.isTemplateForField - ? view.props.Document - : Doc.GetProto(view.props.Document); - if (targetDoc) { - if (view.props.LayoutTemplate?.() || view.props.LayoutTemplateString) { - // this situation typically occurs when you have a link dot - targetDoc.backgroundColor = color.hex; // bcz: don't know how to change the color of an inline template... - } else if (RichTextMenu.Instance?.TextViewFieldKey && window.getSelection()?.toString() !== '') { - Doc.Layout(view.props.Document)[RichTextMenu.Instance.TextViewFieldKey + '-color'] = color.hex; - } else { - Doc.Layout(view.props.Document)._backgroundColor = color.hex + (color.rgb.a ? Math.round(color.rgb.a * 255).toString(16) : ''); // '_backgroundColor' is template specific. 'backgroundColor' would apply to all templates, but has no UI at the moment - } - } - }); - } - - render() { - const scaling = Math.min(this.layoutDoc.layout_fitWidth ? 10000 : this.props.PanelHeight() / this.rootDoc[Height](), this.props.PanelWidth() / this.rootDoc[Width]()); - return ( - <div - className={`colorBox-container${this.props.isContentActive() ? '-interactive' : ''}`} - onPointerDown={e => e.button === 0 && !e.ctrlKey && e.stopPropagation()} - onClick={e => e.stopPropagation()} - style={{ transform: `scale(${scaling})`, width: `${100 * scaling}%`, height: `${100 * scaling}%` }}> - <SketchPicker - onChange={c => Doc.ActiveTool === InkTool.None && ColorBox.switchColor(c)} - color={StrCast(SelectionManager.Views()?.[0]?.rootDoc?._backgroundColor, ActiveInkColor())} - presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '#f1efeb', 'transparent']} - /> - - <div style={{ width: this.props.PanelWidth() / scaling, display: 'flex', paddingTop: '10px' }}> - <div> {ActiveInkWidth()}</div> - <input - type="range" - defaultValue={ActiveInkWidth()} - min={1} - max={100} - onChange={(e: React.ChangeEvent<HTMLInputElement>) => { - SetActiveInkWidth(e.target.value); - SelectionManager.Views() - .filter(i => StrCast(i.rootDoc.type) === DocumentType.INK) - .map(i => (i.rootDoc.stroke_width = Number(e.target.value))); - }} - /> - </div> - </div> - ); - } -} - - -ScriptingGlobals.add( - function interpColors(c1:string, c2:string, weight=0.5) { - return DashColor(c1).mix(DashColor(c2),weight) - } -)
\ No newline at end of file diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx index b09fcd882..116dc48a6 100644 --- a/src/client/views/nodes/ComparisonBox.tsx +++ b/src/client/views/nodes/ComparisonBox.tsx @@ -1,27 +1,30 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; +import { emptyFunction, returnFalse, returnNone, returnZero, setupMoveUpEvents } from '../../../Utils'; import { Doc, Opt } from '../../../fields/Doc'; import { DocCast, NumCast, StrCast } from '../../../fields/Types'; -import { emptyFunction, returnFalse, returnNone, returnZero, setupMoveUpEvents } from '../../../Utils'; -import { Docs, DocUtils } from '../../documents/Documents'; +import { DocUtils, Docs } from '../../documents/Documents'; import { DragManager } from '../../util/DragManager'; import { undoBatch } from '../../util/UndoManager'; -import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../DocComponent'; +import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../DocComponent'; import { StyleProp } from '../StyleProvider'; import './ComparisonBox.scss'; -import { DocumentView, DocumentViewProps } from './DocumentView'; +import { DocumentView } from './DocumentView'; import { FieldView, FieldViewProps } from './FieldView'; import { PinProps, PresBox } from './trails'; -import React = require('react'); @observer -export class ComparisonBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps>() { +export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(ComparisonBox, fieldKey); } - protected _multiTouchDisposer?: import('../../util/InteractionUtils').InteractionUtils.MultiTouchEventDisposer | undefined; private _disposers: (DragManager.DragDropDisposer | undefined)[] = [undefined, undefined]; + constructor(props: FieldViewProps) { + super(props); + makeObservable(this); + } @observable _animating = ''; @@ -29,10 +32,10 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl return NumCast(this.layoutDoc[this.clipWidthKey], 50); } get clipWidthKey() { - return '_' + this.props.fieldKey + '_clipWidth'; + return '_' + this._props.fieldKey + '_clipWidth'; } componentDidMount() { - this.props.setContentView?.(this); + this._props.setContentViewBox?.(this); } protected createDropTarget = (ele: HTMLDivElement | null, fieldKey: string, disposerId: number) => { this._disposers[disposerId]?.(); @@ -45,7 +48,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl private internalDrop = (e: Event, dropEvent: DragManager.DropEvent, fieldKey: string) => { if (dropEvent.complete.docDragData) { const droppedDocs = dropEvent.complete.docDragData?.droppedDocuments; - const added = dropEvent.complete.docDragData.moveDocument?.(droppedDocs, this.rootDoc, (doc: Doc | Doc[]) => this.addDoc(doc instanceof Doc ? doc : doc.lastElement(), fieldKey)); + const added = dropEvent.complete.docDragData.moveDocument?.(droppedDocs, this.Document, (doc: Doc | Doc[]) => this.addDoc(doc instanceof Doc ? doc : doc.lastElement(), fieldKey)); Doc.SetContainer(droppedDocs.lastElement(), this.dataDoc); !added && e.preventDefault(); e.stopPropagation(); // prevent parent Doc from registering new position so that it snaps back into place @@ -73,7 +76,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl if (this._isAnyChildContentActive) return; this._animating = 'all 200ms'; // on click, animate slider movement to the targetWidth - this.layoutDoc[this.clipWidthKey] = (targetWidth * 100) / this.props.PanelWidth(); + this.layoutDoc[this.clipWidthKey] = (targetWidth * 100) / this._props.PanelWidth(); setTimeout( action(() => (this._animating = '')), 200 @@ -85,27 +88,27 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl @action private onPointerMove = ({ movementX }: PointerEvent) => { - const width = movementX * this.props.ScreenToLocalTransform().Scale + (this.clipWidth / 100) * this.props.PanelWidth(); - if (width && width > 5 && width < this.props.PanelWidth()) { - this.layoutDoc[this.clipWidthKey] = (width * 100) / this.props.PanelWidth(); + const width = movementX * this.ScreenToLocalBoxXf().Scale + (this.clipWidth / 100) * this._props.PanelWidth(); + if (width && width > 5 && width < this._props.PanelWidth()) { + this.layoutDoc[this.clipWidthKey] = (width * 100) / this._props.PanelWidth(); } return false; }; getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => { const anchor = Docs.Create.ConfigDocument({ - title: 'CompareAnchor:' + this.rootDoc.title, + title: 'CompareAnchor:' + this.Document.title, // set presentation timing properties for restoring view presentation_transition: 1000, - annotationOn: this.rootDoc, + 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.rootDoc); + PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), clippable: true } }, this.Document); return anchor; } - return this.rootDoc; + return this.Document; }; @undoBatch @@ -145,9 +148,9 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl e => this.clearDoc(which) ); }; - docStyleProvider = (doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string): any => { + docStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string): any => { if (property === StyleProp.PointerEvents) return 'none'; - return this.props.styleProvider?.(doc, props, property); + return this._props.styleProvider?.(doc, props, property); }; moveDoc1 = (doc: Doc | Doc[], targetCol: Doc | undefined, addDoc: any) => (doc instanceof Doc ? [doc] : doc).reduce((res, doc: Doc) => res && this.moveDoc(doc, addDoc, this.fieldKey + '_1'), true); moveDoc2 = (doc: Doc | Doc[], targetCol: Doc | undefined, addDoc: any) => (doc instanceof Doc ? [doc] : doc).reduce((res, doc: Doc) => res && this.moveDoc(doc, addDoc, this.fieldKey + '_2'), true); @@ -172,9 +175,10 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl return targetDoc ? ( <> <DocumentView - {...this.props} + {...this._props} Document={targetDoc} - DataDoc={undefined} + TemplateDataDocument={undefined} + containerViewPath={this.DocumentView?.().docViewPath} moveDocument={which.endsWith('1') ? this.moveDoc1 : this.moveDoc2} removeDocument={which.endsWith('1') ? this.remDoc1 : this.remDoc2} NativeWidth={returnZero} @@ -182,7 +186,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl isContentActive={emptyFunction} isDocumentActive={returnFalse} whenChildContentsActiveChanged={this.whenChildContentsActiveChanged} - styleProvider={this._isAnyChildContentActive ? this.props.styleProvider : this.docStyleProvider} + styleProvider={this._isAnyChildContentActive ? this._props.styleProvider : this.docStyleProvider} hideLinkButton={true} pointerEvents={this._isAnyChildContentActive ? undefined : returnNone} /> @@ -196,15 +200,15 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl }; const displayBox = (which: string, index: number, cover: number) => { return ( - <div className={`${index === 0 ? 'before' : 'after'}Box-cont`} key={which} style={{ width: this.props.PanelWidth() }} onPointerDown={e => this.registerSliding(e, cover)} ref={ele => this.createDropTarget(ele, which, index)}> + <div className={`${index === 0 ? 'before' : 'after'}Box-cont`} key={which} style={{ width: this._props.PanelWidth() }} onPointerDown={e => this.registerSliding(e, cover)} ref={ele => this.createDropTarget(ele, which, index)}> {displayDoc(which)} </div> ); }; return ( - <div className={`comparisonBox${this.props.isContentActive() ? '-interactive' : ''}` /* change className to easily disable/enable pointer events in CSS */}> - {displayBox(`${this.fieldKey}_2`, 1, this.props.PanelWidth() - 3)} + <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}` /* change className to easily disable/enable pointer events in CSS */}> + {displayBox(`${this.fieldKey}_2`, 1, this._props.PanelWidth() - 3)} <div className="clip-div" style={{ width: this.clipWidth + '%', transition: this._animating, background: StrCast(this.layoutDoc._backgroundColor, 'gray') }}> {displayBox(`${this.fieldKey}_1`, 0, 0)} </div> @@ -213,9 +217,9 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl className="slide-bar" style={{ left: `calc(${this.clipWidth + '%'} - 0.5px)`, - cursor: this.clipWidth < 5 ? 'e-resize' : this.clipWidth / 100 > (this.props.PanelWidth() - 5) / this.props.PanelWidth() ? 'w-resize' : undefined, + cursor: this.clipWidth < 5 ? 'e-resize' : this.clipWidth / 100 > (this._props.PanelWidth() - 5) / this._props.PanelWidth() ? 'w-resize' : undefined, }} - onPointerDown={e => !this._isAnyChildContentActive && this.registerSliding(e, this.props.PanelWidth() / 2)} /* if clicked, return slide-bar to center */ + onPointerDown={e => !this._isAnyChildContentActive && this.registerSliding(e, this._props.PanelWidth() / 2)} /* if clicked, return slide-bar to center */ > <div className="slide-handle" /> </div> diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.scss b/src/client/views/nodes/DataVizBox/DataVizBox.scss index 430446c06..a3132dc6e 100644 --- a/src/client/views/nodes/DataVizBox/DataVizBox.scss +++ b/src/client/views/nodes/DataVizBox/DataVizBox.scss @@ -1,4 +1,4 @@ -.dataviz { +.dataViz-box { overflow: auto; height: 100%; width: 100%; @@ -7,9 +7,46 @@ display: flex; flex-direction: row; } + + .dataviz-overlayButton-sidebar { + background: #121721; + height: 25px; + width: 25px; + right: 5px; + display: flex; + position: absolute; + align-items: center; + justify-content: center; + border-radius: 3px; + pointer-events: all; + z-index: 1; // so it appears on top of the document's title, if shown + + // box-shadow: $standard-box-shadow; + // transition: 0.2s; + + &:hover { + filter: brightness(0.85); + } + } + + .dataviz-sidebar { + position: absolute; + right: 0; + top: 0; + height: 100%; + } .button-container { pointer-events: unset; } + + .dataVizBox-annotationLayer{ + position: absolute; + transform-origin: left top; + top: 0; + width: 100%; + pointer-events: none; + mix-blend-mode: multiply; + } } .start-message { margin: 10px; diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx index 299494c83..8365f4770 100644 --- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx +++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx @@ -1,20 +1,32 @@ -import { Toggle, ToggleType, Type } from 'browndash-components'; -import { action, computed, ObservableMap } from 'mobx'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Colors, Toggle, ToggleType, Type } from 'browndash-components'; +import { ObservableMap, action, computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { Doc, Field, StrListCast } from '../../../../fields/Doc'; +import { emptyFunction, returnEmptyString, returnFalse, returnOne, setupMoveUpEvents } from '../../../../Utils'; +import { Doc, DocListCast, Field, Opt, StrListCast } from '../../../../fields/Doc'; +import { InkTool } from '../../../../fields/InkField'; import { List } from '../../../../fields/List'; -import { Cast, CsvCast, StrCast } from '../../../../fields/Types'; +import { listSpec } from '../../../../fields/Schema'; +import { Cast, CsvCast, DocCast, NumCast, StrCast } from '../../../../fields/Types'; import { CsvField } from '../../../../fields/URLField'; +import { TraceMobx } from '../../../../fields/util'; import { Docs } from '../../../documents/Documents'; -import { ViewBoxAnnotatableComponent } from '../../DocComponent'; -import { FieldView, FieldViewProps } from '../FieldView'; +import { DocumentManager } from '../../../util/DocumentManager'; +import { UndoManager, undoable } from '../../../util/UndoManager'; +import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../../DocComponent'; +import { MarqueeAnnotator } from '../../MarqueeAnnotator'; +import { SidebarAnnos } from '../../SidebarAnnos'; +import { AnchorMenu } from '../../pdf/AnchorMenu'; +import { GPTPopup } from '../../pdf/GPTPopup/GPTPopup'; +import { DocumentView } from '../DocumentView'; +import { FocusViewOptions, FieldView, FieldViewProps } from '../FieldView'; import { PinProps } from '../trails'; +import './DataVizBox.scss'; import { Histogram } from './components/Histogram'; import { LineChart } from './components/LineChart'; import { PieChart } from './components/PieChart'; import { TableBox } from './components/TableBox'; -import './DataVizBox.scss'; export enum DataVizView { TABLE = 'table', @@ -24,7 +36,49 @@ export enum DataVizView { } @observer -export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { +export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface { + private _mainCont: React.RefObject<HTMLDivElement> = React.createRef(); + private _marqueeref = React.createRef<MarqueeAnnotator>(); + private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef(); + anchorMenuClick?: () => undefined | ((anchor: Doc) => void); + crop: ((region: Doc | undefined, addCrop?: boolean) => Doc | undefined) | undefined; + @observable _schemaDataVizChildren: any = undefined; + @observable _marqueeing: number[] | undefined = undefined; + @observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>(); + + constructor(props: FieldViewProps) { + super(props); + makeObservable(this); + this._props.setContentViewBox?.(this); + } + + @computed get annotationLayer() { + TraceMobx(); + return <div className="dataVizBox-annotationLayer" style={{ height: this._props.PanelHeight(), width: this._props.PanelWidth() }} ref={this._annotationLayer} />; + } + marqueeDown = (e: React.PointerEvent) => { + if (!e.altKey && e.button === 0 && NumCast(this.Document._freeform_scale, 1) <= NumCast(this.Document.freeform_scaleMin, 1) && this._props.isContentActive() && ![InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) { + setupMoveUpEvents( + this, + e, + action(e => { + MarqueeAnnotator.clearAnnotations(this._savedAnnotations); + this._marqueeref.current?.onInitiateSelection([e.clientX, e.clientY]); + return true; + }), + returnFalse, + () => MarqueeAnnotator.clearAnnotations(this._savedAnnotations), + false + ); + } + }; + @action + finishMarquee = () => { + this._marqueeref.current?.onTerminateSelection(); + this._props.select(false); + }; + savedAnnotations = () => this._savedAnnotations; + public static LayoutString(fieldStr: string) { return FieldView.LayoutString(DataVizBox, fieldStr); } @@ -32,10 +86,11 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { // all datasets that have been retrieved from the server stored as a map from the dataset url to an array of records static dataset = new ObservableMap<string, { [key: string]: string }[]>(); private _vizRenderer: LineChart | Histogram | PieChart | undefined; + private _sidebarRef = React.createRef<SidebarAnnos>(); // all CSV records in the dataset (that aren't an empty row) @computed.struct get records() { - var records = DataVizBox.dataset.get(CsvCast(this.rootDoc[this.fieldKey]).url.href); + var records = DataVizBox.dataset.get(CsvCast(this.dataDoc[this.fieldKey]).url.href); return records?.filter(record => Object.keys(record).some(key => record[key])) ?? []; } @@ -73,11 +128,18 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { } return func() ?? false; }; - getAnchor = (addAsAnnotation?: boolean, pinProps?: PinProps) => { + getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => { + const visibleAnchor = AnchorMenu.Instance.GetAnchor?.(undefined, addAsAnnotation); const anchor = !pinProps - ? this.rootDoc + ? this.Document : this._vizRenderer?.getAnchor(pinProps) ?? + visibleAnchor ?? Docs.Create.ConfigDocument({ + title: 'ImgAnchor:' + this.Document.title, + config_panX: NumCast(this.layoutDoc._freeform_panX), + config_panY: NumCast(this.layoutDoc._freeform_panY), + config_viewScale: Cast(this.layoutDoc._freeform_scale, 'number', null), + annotationOn: this.Document, // when we clear selection -> we should have it so chartBox getAnchor returns undefined // this is for when we want the whole doc (so when the chartBox getAnchor returns without a marker) /*put in some options*/ @@ -93,73 +155,288 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { anchor[key] = this.layoutDoc[key]; } }); + this.addDocument(anchor); + //addAsAnnotation && this.addDocument(anchor); return anchor; }; + createNoteAnnotation = () => { + const createFunc = undoable( + action(() => { + const note = this._sidebarRef.current?.anchorMenuClick(this.getAnchor(false), ['latitude', 'longitude', '-linkedTo']); + }), + 'create note annotation' + ); + if (!this.layoutDoc.layout_showSidebar) { + this.toggleSidebar(); + setTimeout(createFunc); + } else createFunc(); + }; + + @observable _showSidebar = false; + @observable _previewNativeWidth: Opt<number> = undefined; + @observable _previewWidth: Opt<number> = undefined; + @action + toggleSidebar = () => { + const prevWidth = this.sidebarWidth(); + this.layoutDoc._layout_showSidebar = (this.layoutDoc._layout_sidebarWidthPercent = StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%') === '0%' ? `${(100 * 0.2) / 1.2}%` : '0%') !== '0%'; + this.layoutDoc._width = this.layoutDoc._layout_showSidebar ? NumCast(this.layoutDoc._width) * 1.2 : Math.max(20, NumCast(this.layoutDoc._width) - prevWidth); + }; + @computed get SidebarShown() { + return this.layoutDoc._layout_showSidebar ? true : false; + } + @computed get sidebarHandle() { + return ( + <div + className="dataviz-overlayButton-sidebar" + key="sidebar" + title="Toggle Sidebar" + style={{ + display: !this._props.isContentActive() ? 'none' : undefined, + top: StrCast(this.Document._layout_showTitle) === 'title' ? 20 : 5, + backgroundColor: this.SidebarShown ? Colors.MEDIUM_BLUE : Colors.BLACK, + }} + onPointerDown={this.sidebarBtnDown}> + <FontAwesomeIcon style={{ color: Colors.WHITE }} icon={'comment-alt'} size="sm" /> + </div> + ); + } + /** + * Toggle sidebar onclick the tiny comment button on the top right corner + * @param e + */ + sidebarBtnDown = (e: React.PointerEvent) => { + setupMoveUpEvents( + this, + e, + (e, down, delta) => + runInAction(() => { + const localDelta = this._props + .ScreenToLocalTransform() + .scale(this._props.NativeDimScaling?.() || 1) + .transformDirection(delta[0], delta[1]); + const fullWidth = NumCast(this.layoutDoc._width); + const mapWidth = fullWidth - this.sidebarWidth(); + if (this.sidebarWidth() + localDelta[0] > 0) { + this.layoutDoc._layout_showSidebar = true; + this.layoutDoc._layout_sidebarWidthPercent = ((100 * (this.sidebarWidth() + localDelta[0])) / (fullWidth + localDelta[0])).toString() + '%'; + this.layoutDoc._width = fullWidth + localDelta[0]; + } else { + this.layoutDoc._layout_showSidebar = false; + this.layoutDoc._width = mapWidth; + this.layoutDoc._layout_sidebarWidthPercent = '0%'; + } + return false; + }), + emptyFunction, + () => UndoManager.RunInBatch(this.toggleSidebar, 'toggle sidebar') + ); + }; + getView = async (doc: Doc, options: FocusViewOptions) => { + if (this._sidebarRef?.current?.makeDocUnfiltered(doc) && !this.SidebarShown) { + options.didMove = true; + this.toggleSidebar(); + } + return new Promise<Opt<DocumentView>>(res => DocumentManager.Instance.AddViewRenderedCb(doc, dv => res(dv))); + }; + @computed get sidebarWidthPercent() { + return StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%'); + } + @computed get sidebarColor() { + return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this._props.fieldKey + '_backgroundColor'], '#e4e4e4')); + } + sidebarWidth = () => (Number(this.sidebarWidthPercent.substring(0, this.sidebarWidthPercent.length - 1)) / 100) * this._props.PanelWidth(); + sidebarAddDocument = (doc: Doc | Doc[], sidebarKey?: string) => { + if (!this.SidebarShown) this.toggleSidebar(); + return this.addDocument(doc, sidebarKey); + }; + sidebarRemoveDocument = (doc: Doc | Doc[], sidebarKey?: string) => this.removeDocument(doc, sidebarKey); + componentDidMount() { - this.props.setContentView?.(this); - if (!DataVizBox.dataset.has(CsvCast(this.rootDoc[this.fieldKey]).url.href)) this.fetchData(); + this._props.setContentViewBox?.(this); + if (!DataVizBox.dataset.has(CsvCast(this.dataDoc[this.fieldKey]).url.href)) this.fetchData(); } fetchData = () => { - DataVizBox.dataset.set(CsvCast(this.rootDoc[this.fieldKey]).url.href, []); // assign temporary dataset as a lock to prevent duplicate server requests + DataVizBox.dataset.set(CsvCast(this.dataDoc[this.fieldKey]).url.href, []); // assign temporary dataset as a lock to prevent duplicate server requests fetch('/csvData?uri=' + this.dataUrl?.url.href) // - .then(res => res.json().then(action(res => !res.errno && DataVizBox.dataset.set(CsvCast(this.rootDoc[this.fieldKey]).url.href, res)))); + .then(res => res.json().then(action(res => !res.errno && DataVizBox.dataset.set(CsvCast(this.dataDoc[this.fieldKey]).url.href, res)))); }; // toggles for user to decide which chart type to view the data in - renderVizView = () => { + @computed get renderVizView() { + const scale = this._props.NativeDimScaling?.() || 1; const sharedProps = { - rootDoc: this.rootDoc, + Document: this.Document, layoutDoc: this.layoutDoc, records: this.records, axes: this.axes, - height: (this.props.PanelHeight() - 32) /* height of 'change view' button */ * 0.9, - width: this.props.PanelWidth() * 0.9, + //width: this.SidebarShown? this._props.PanelWidth()*.9/1.2: this._props.PanelWidth() * 0.9, + height: (this._props.PanelHeight() / scale - 32) /* height of 'change view' button */ * 0.9, + width: ((this._props.PanelWidth() - this.sidebarWidth()) / scale) * 0.9, margin: { top: 10, right: 25, bottom: 75, left: 45 }, }; if (!this.records.length) return 'no data/visualization'; switch (this.dataVizView) { - case DataVizView.TABLE: - return <TableBox {...sharedProps} docView={this.props.DocumentView} selectAxes={this.selectAxes} />; - case DataVizView.LINECHART: - return <LineChart {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => (this._vizRenderer = r ?? undefined)} />; - case DataVizView.HISTOGRAM: - return <Histogram {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => (this._vizRenderer = r ?? undefined)} />; - case DataVizView.PIECHART: - return <PieChart {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => (this._vizRenderer = r ?? undefined)} />; + case DataVizView.TABLE: return <TableBox {...sharedProps} docView={this.DocumentView} selectAxes={this.selectAxes} />; + case DataVizView.LINECHART: return <LineChart {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => (this._vizRenderer = r ?? undefined)} vizBox={this} />; + case DataVizView.HISTOGRAM: return <Histogram {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => (this._vizRenderer = r ?? undefined)} />; + case DataVizView.PIECHART: return <PieChart {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => (this._vizRenderer = r ?? undefined)} + margin={{ top: 10, right: 15, bottom: 15, left: 15 }} />; + } // prettier-ignore + } + + @action + onPointerDown = (e: React.PointerEvent): void => { + if ((this.Document._freeform_scale || 1) !== 1) return; + if (!e.altKey && e.button === 0 && this._props.isContentActive() && ![InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) { + this._props.select(false); + MarqueeAnnotator.clearAnnotations(this._savedAnnotations); + this._marqueeing = [e.clientX, e.clientY]; + const target = e.target as any; + if (e.target && (target.className.includes('endOfContent') || (target.parentElement.className !== 'textLayer' && target.parentElement.parentElement?.className !== 'textLayer'))) { + } else { + // if textLayer is hit, then we select text instead of using a marquee so clear out the marquee. + setTimeout( + action(() => (this._marqueeing = undefined)), + 100 + ); // bcz: hack .. anchor menu is setup within MarqueeAnnotator so we need to at least create the marqueeAnnotator even though we aren't using it. + + document.addEventListener('pointerup', this.onSelectEnd); + } } }; + @action + onSelectEnd = (e: PointerEvent): void => { + this._props.select(false); + document.removeEventListener('pointerup', this.onSelectEnd); + + const sel = window.getSelection(); + if (sel) { + AnchorMenu.Instance.setSelectedText(sel.toString()); + } + + if (sel?.type === 'Range') { + AnchorMenu.Instance.jumpTo(e.clientX, e.clientY); + } + + // Changing which document to add the annotation to (the currently selected PDF) + GPTPopup.Instance.setSidebarId('data_sidebar'); + GPTPopup.Instance.addDoc = this.sidebarAddDocument; + }; + + @action + updateSchemaViz = () => { + const getFrom = DocCast(this.layoutDoc.dataViz_asSchema); + const keys = Cast(getFrom.schema_columnKeys, listSpec('string'))?.filter(key => key != 'text'); + if (!keys) return; + const children = DocListCast(getFrom[Doc.LayoutFieldKey(getFrom)]); + var current: { [key: string]: string }[] = []; + for (let i = 0; i < children.length; i++) { + var row: { [key: string]: string } = {}; + if (children[i]) { + for (let j = 0; j < keys.length; j++) { + var cell = children[i][keys[j]]; + if (cell && (cell as string)) cell = cell.toString().replace(/\,/g, ''); + row[keys[j]] = StrCast(cell); + } + } + current.push(row); + } + DataVizBox.dataset.set(CsvCast(this.Document[this.fieldKey]).url.href, current); + }; + render() { + if (this.layoutDoc && this.layoutDoc.dataViz_asSchema) { + this._schemaDataVizChildren = DocListCast(DocCast(this.layoutDoc.dataViz_asSchema)[Doc.LayoutFieldKey(DocCast(this.layoutDoc.dataViz_asSchema))]).length; + this.updateSchemaViz(); + } + + const scale = this._props.NativeDimScaling?.() || 1; return !this.records.length ? ( // displays how to get data into the DataVizBox if its empty <div className="start-message">To create a DataViz box, either import / drag a CSV file into your canvas or copy a data table and use the command 'ctrl + p' to bring the data table to your canvas.</div> ) : ( <div - className="dataViz" + className="dataViz-box" + onPointerDown={this.marqueeDown} style={{ - pointerEvents: this.props.isContentActive() === true ? 'all' : 'none', + pointerEvents: this._props.isContentActive() === true ? 'all' : 'none', + width: `${100 / scale}%`, + height: `${100 / scale}%`, + transform: `scale(${scale})`, + position: 'absolute', }} onWheel={e => e.stopPropagation()} - ref={r => - r?.addEventListener( - 'wheel', // if scrollTop is 0, then don't let wheel trigger scroll on any container (which it would since onScroll won't be triggered on this) - (e: WheelEvent) => { - if (!r.scrollTop && e.deltaY <= 0) e.preventDefault(); - e.stopPropagation(); - }, - { passive: false } - ) - }> - <div className={'datatype-button'}> - <Toggle text={'TABLE'} toggleType={ToggleType.BUTTON} type={Type.SEC} color={'black'} onClick={e => (this.layoutDoc._dataViz = DataVizView.TABLE)} toggleStatus={this.layoutDoc._dataViz == DataVizView.TABLE} /> - <Toggle text={'LINECHART'} toggleType={ToggleType.BUTTON} type={Type.SEC} color={'black'} onClick={e => (this.layoutDoc._dataViz = DataVizView.LINECHART)} toggleStatus={this.layoutDoc._dataViz == DataVizView.LINECHART} /> - <Toggle text={'HISTOGRAM'} toggleType={ToggleType.BUTTON} type={Type.SEC} color={'black'} onClick={e => (this.layoutDoc._dataViz = DataVizView.HISTOGRAM)} toggleStatus={this.layoutDoc._dataViz == DataVizView.HISTOGRAM} /> - <Toggle text={'PIE CHART'} toggleType={ToggleType.BUTTON} type={Type.SEC} color={'black'} onClick={e => (this.layoutDoc._dataViz = DataVizView.PIECHART)} toggleStatus={this.layoutDoc._dataViz == DataVizView.PIECHART} /> + ref={this._mainCont}> + <div className="datatype-button"> + <Toggle text={' TABLE '} toggleType={ToggleType.BUTTON} type={Type.SEC} color={'black'} onClick={e => (this.layoutDoc._dataViz = DataVizView.TABLE)} toggleStatus={this.layoutDoc._dataViz === DataVizView.TABLE} /> + <Toggle text={'LINECHART'} toggleType={ToggleType.BUTTON} type={Type.SEC} color={'black'} onClick={e => (this.layoutDoc._dataViz = DataVizView.LINECHART)} toggleStatus={this.layoutDoc._dataViz === DataVizView.LINECHART} /> + <Toggle text={'HISTOGRAM'} toggleType={ToggleType.BUTTON} type={Type.SEC} color={'black'} onClick={e => (this.layoutDoc._dataViz = DataVizView.HISTOGRAM)} toggleStatus={this.layoutDoc._dataViz === DataVizView.HISTOGRAM} /> + <Toggle text={'PIE CHART'} toggleType={ToggleType.BUTTON} type={Type.SEC} color={'black'} onClick={e => (this.layoutDoc._dataViz = DataVizView.PIECHART)} toggleStatus={this.layoutDoc._dataViz == -DataVizView.PIECHART} /> + </div> + + {/* <CollectionFreeFormView + ref={this._ffref} + {...this._props} + setContentView={emptyFunction} + renderDepth={this._props.renderDepth - 1} + fieldKey={this.annotationKey} + styleProvider={this._props.styleProvider} + isAnnotationOverlay={true} + annotationLayerHostsContent={false} + PanelWidth={this._props.PanelWidth} + PanelHeight={this._props.PanelHeight} + select={emptyFunction} + isAnyChildContentActive={returnFalse} + whenChildContentsActiveChanged={this.whenChildContentsActiveChanged} + removeDocument={this.removeDocument} + moveDocument={this.moveDocument} + addDocument={this.addDocument}> + {this.renderVizView} + </CollectionFreeFormView> */} + + {this.renderVizView} + <div className="dataviz-sidebar" style={{ width: `${this.sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }} onPointerDown={this.onPointerDown}> + <SidebarAnnos + ref={this._sidebarRef} + {...this._props} + fieldKey={this.fieldKey} + Document={this.Document} + layoutDoc={this.layoutDoc} + dataDoc={this.dataDoc} + usePanelWidth={true} + showSidebar={this.SidebarShown} + nativeWidth={NumCast(this.layoutDoc._nativeWidth)} + whenChildContentsActiveChanged={this.whenChildContentsActiveChanged} + PanelWidth={this.sidebarWidth} + sidebarAddDocument={this.sidebarAddDocument} + moveDocument={this.moveDocument} + removeDocument={this.sidebarRemoveDocument} + /> </div> - {this.renderVizView()} + {this.sidebarHandle} + {this.annotationLayer} + {!this._mainCont.current || !this.DocumentView || !this._annotationLayer.current ? null : ( + <MarqueeAnnotator + ref={this._marqueeref} + Document={this.Document} + anchorMenuClick={this.anchorMenuClick} + scrollTop={0} + annotationLayerScrollTop={NumCast(this.Document._layout_scrollTop)} + scaling={returnOne} + docView={this.DocumentView} + addDocument={this.sidebarAddDocument} + finishMarquee={this.finishMarquee} + savedAnnotations={this.savedAnnotations} + selectionText={returnEmptyString} + annotationLayer={this._annotationLayer.current} + marqueeContainer={this._mainCont.current} + anchorMenuCrop={this.crop} + /> + )} </div> ); } diff --git a/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.scss b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.scss new file mode 100644 index 000000000..63a693918 --- /dev/null +++ b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.scss @@ -0,0 +1,175 @@ +$textgrey: #707070; +$lighttextgrey: #a3a3a3; +$greyborder: #d3d3d3; +$lightgrey: #ececec; +$button: #5b97ff; +$highlightedText: #82e0ff; + +.summary-box { + position: fixed; + bottom: 10px; + right: 10px; + width: 250px; + min-height: 200px; + border-radius: 15px; + padding: 15px; + padding-bottom: 0; + z-index: 999; + display: flex; + flex-direction: column; + justify-content: space-between; + background-color: #ffffff; + box-shadow: 0 2px 5px #7474748d; + color: $textgrey; + + .summary-heading { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid $greyborder; + padding-bottom: 5px; + + .summary-text { + font-size: 12px; + font-weight: 500; + } + } + + label { + color: $textgrey; + font-size: 12px; + font-weight: 400; + letter-spacing: 1px; + margin: 0; + padding-right: 5px; + } + + a { + cursor: pointer; + } + + .content-wrapper { + padding-top: 10px; + min-height: 50px; + max-height: 150px; + overflow-y: auto; + } + + .btns-wrapper { + height: 50px; + display: flex; + justify-content: space-between; + align-items: center; + + .summarizing { + display: flex; + align-items: center; + } + } + + button { + font-size: 9px; + padding: 10px; + color: #ffffff; + background-color: $button; + border-radius: 5px; + } + + .text-btn { + &:hover { + background-color: $button; + } + } + + .btn-secondary { + font-size: 8px; + padding: 10px 5px; + background-color: $lightgrey; + color: $textgrey; + &:hover { + background-color: $lightgrey; + } + } + + .icon-btn { + background-color: #ffffff; + padding: 10px; + border-radius: 50%; + color: $button; + border: 1px solid $button; + } +} + +.image-content-wrapper { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 8px; + padding-bottom: 16px; + + .img-wrapper { + position: relative; + cursor: pointer; + + .img-container { + pointer-events: none; + position: relative; + + img { + pointer-events: all; + position: relative; + } + } + + .img-container::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + opacity: 0; + transition: opacity 0.3s ease; + } + + .btn-container { + position: absolute; + right: 8px; + bottom: 8px; + opacity: 0; + transition: opacity 0.3s ease; + } + + &:hover { + .img-container::after { + opacity: 1; + } + + .btn-container { + opacity: 1; + } + } + } +} + +// Typist CSS +.Typist .Cursor { + display: inline-block; +} +.Typist .Cursor--blinking { + opacity: 1; + animation: blink 1s linear infinite; +} + +@keyframes blink { + 0% { + opacity: 1; + } + 50% { + opacity: 0; + } + 100% { + opacity: 1; + } +} diff --git a/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx new file mode 100644 index 000000000..24023077f --- /dev/null +++ b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx @@ -0,0 +1,109 @@ +import { IconButton } from 'browndash-components'; +import { action, makeObservable, observable } from 'mobx'; +import { observer } from 'mobx-react'; +import * as React from 'react'; +import { CgClose } from 'react-icons/cg'; +import { Utils, emptyFunction, setupMoveUpEvents } from '../../../../Utils'; +import { Doc } from '../../../../fields/Doc'; +import { StrCast } from '../../../../fields/Types'; +import { DragManager } from '../../../util/DragManager'; +import { DocumentView } from '../DocumentView'; +import './SchemaCSVPopUp.scss'; + +interface SchemaCSVPopUpProps {} + +@observer +export class SchemaCSVPopUp extends React.Component<SchemaCSVPopUpProps> { + static Instance: SchemaCSVPopUp; + + @observable + public dataVizDoc: Doc | undefined = undefined; + @action + public setDataVizDoc = (doc: Doc) => { + this.dataVizDoc = doc; + }; + + @observable + public view: DocumentView | undefined = undefined; + @action + public setView = (docView: DocumentView) => { + this.view = docView; + }; + + @observable + public target: Doc | undefined = undefined; + @action + public setTarget = (doc: Doc) => { + this.target = doc; + }; + + @observable + public visible: boolean = false; + @action + public setVisible = (vis: boolean) => { + this.visible = vis; + }; + + constructor(props: SchemaCSVPopUpProps) { + super(props); + makeObservable(this); + SchemaCSVPopUp.Instance = this; + } + + dataBox = () => { + return ( + <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}> + {this.heading('Schema Table as Data Visualization Doc')} + <div className="image-content-wrapper"> + <div className="img-wrapper"> + <div className="img-container" onPointerDown={e => this.drag(e)}> + <img width={150} height={150} src={'/assets/dataVizBox.png'} /> + </div> + </div> + </div> + </div> + ); + }; + + heading = (headingText: string) => ( + <div className="summary-heading"> + <label className="summary-text">{headingText}</label> + <IconButton color={StrCast(Doc.UserDoc().userVariantColor)} tooltip="close" icon={<CgClose size="16px" />} onClick={() => this.setVisible(false)} /> + </div> + ); + + drag = (e: React.PointerEvent) => { + const downX = e.clientX; + const downY = e.clientY; + setupMoveUpEvents( + {}, + e, + e => { + const sourceAnchorCreator = () => this.dataVizDoc!; + const targetCreator = (annotationOn: Doc | undefined) => { + const embedding = Doc.MakeEmbedding(this.dataVizDoc!); + return embedding; + }; + if (this.view && sourceAnchorCreator && !Utils.isClick(e.clientX, e.clientY, downX, downY, Date.now())) { + DragManager.StartAnchorAnnoDrag(e.target instanceof HTMLElement ? [e.target] : [], new DragManager.AnchorAnnoDragData(this.view, sourceAnchorCreator, targetCreator), downX, downY, { + dragComplete: e => { + this.setVisible(false); + }, + }); + return true; + } + return false; + }, + emptyFunction, + action(e => {}) + ); + }; + + render() { + return ( + <div className="summary-box" style={{ display: this.visible ? 'flex' : 'none' }}> + {this.dataBox()} + </div> + ); + } +} diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss index c788a64c2..2f7dd0487 100644 --- a/src/client/views/nodes/DataVizBox/components/Chart.scss +++ b/src/client/views/nodes/DataVizBox/components/Chart.scss @@ -1,10 +1,10 @@ -@import '../../../global/globalCssVariables'; +@import '../../../global/globalCssVariables.module.scss'; .chart-container { display: flex; flex-direction: column; align-items: center; cursor: default; - margin-top: 10px; + margin-top: 30px; overflow-y: visible; .graph { @@ -15,8 +15,8 @@ font-size: larger; display: flex; flex-direction: row; - margin-top: -10px; - margin-bottom: -10px; + margin-top: -20px; + margin-bottom: -20px; } .asHistogram-checkBox { // display: flex; @@ -93,6 +93,7 @@ display: flex; flex-direction: column; cursor: default; + margin-top: 30px; height: calc(100% - 40px); // bcz: hack 40px is the size of the button rows .tableBox-container { overflow: scroll; @@ -111,6 +112,7 @@ white-space: pre; max-width: 150; overflow: hidden; + margin-left: 2px; } } } diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx index e67e2bf31..4a1fb2ed1 100644 --- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx +++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx @@ -1,7 +1,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { ColorPicker, EditableText, IconButton, Size, Type } from 'browndash-components'; import * as d3 from 'd3'; -import { action, computed, IReactionDisposer, observable, reaction } from 'mobx'; +import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { FaFillDrip } from 'react-icons/fa'; @@ -10,14 +10,14 @@ import { List } from '../../../../../fields/List'; import { listSpec } from '../../../../../fields/Schema'; import { Cast, DocCast, StrCast } from '../../../../../fields/Types'; import { Docs } from '../../../../documents/Documents'; -import { LinkManager } from '../../../../util/LinkManager'; import { undoable } from '../../../../util/UndoManager'; +import { ObservableReactComponent } from '../../../ObservableReactComponent'; import { PinProps, PresBox } from '../../trails'; import { scaleCreatorNumerical, yAxisCreator } from '../utils/D3Utils'; import './Chart.scss'; export interface HistogramProps { - rootDoc: Doc; + Document: Doc; layoutDoc: Doc; axes: string[]; records: { [key: string]: any }[]; @@ -34,7 +34,7 @@ export interface HistogramProps { } @observer -export class Histogram extends React.Component<HistogramProps> { +export class Histogram extends ObservableReactComponent<HistogramProps> { private _disposers: { [key: string]: IReactionDisposer } = {}; private _histogramRef: React.RefObject<HTMLDivElement> = React.createRef(); private _histogramSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined; @@ -46,46 +46,51 @@ export class Histogram extends React.Component<HistogramProps> { private selectedData: any = undefined; // Selection of selected bar private hoverOverData: any = undefined; // Selection of bar being hovered over + constructor(props: any) { + super(props); + makeObservable(this); + } + @computed get _tableDataIds() { - return !this.parentViz ? this.props.records.map((rec, i) => i) : NumListCast(this.parentViz.dataViz_selectedRows); + return !this.parentViz ? this._props.records.map((rec, i) => i) : NumListCast(this.parentViz.dataViz_selectedRows); } // returns all the data records that will be rendered by only returning those records that have been selected by the parent visualization (or all records if there is no parent) @computed get _tableData() { - return !this.parentViz ? this.props.records : this._tableDataIds.map(rowId => this.props.records[rowId]); + return !this.parentViz ? this._props.records : this._tableDataIds.map(rowId => this._props.records[rowId]); } // filters all data to just display selected data if brushed (created from an incoming link) @computed get _histogramData() { - if (this.props.axes.length < 1) return []; - if (this.props.axes.length < 2) { - var ax0 = this.props.axes[0]; - if (/\d/.test(this.props.records[0][ax0])) { + if (this._props.axes.length < 1) return []; + if (this._props.axes.length < 2) { + var ax0 = this._props.axes[0]; + if (/\d/.test(this._props.records[0][ax0])) { this.numericalXData = true; } - return this._tableData.map(record => ({ [ax0]: record[this.props.axes[0]] })); + return this._tableData.map(record => ({ [ax0]: record[this._props.axes[0]] })); } - var ax0 = this.props.axes[0]; - var ax1 = this.props.axes[1]; - if (/\d/.test(this.props.records[0][ax0])) { + var ax0 = this._props.axes[0]; + var ax1 = this._props.axes[1]; + if (/\d/.test(this._props.records[0][ax0])) { this.numericalXData = true; } - if (/\d/.test(this.props.records[0][ax1])) { + if (/\d/.test(this._props.records[0][ax1])) { this.numericalYData = true; } - return this._tableData.map(record => ({ [ax0]: record[this.props.axes[0]], [ax1]: record[this.props.axes[1]] })); + return this._tableData.map(record => ({ [ax0]: record[this._props.axes[0]], [ax1]: record[this._props.axes[1]] })); } @computed get defaultGraphTitle() { - var ax0 = this.props.axes[0]; - var ax1 = this.props.axes.length > 1 ? this.props.axes[1] : undefined; - if (this.props.axes.length < 2 || !ax1 || !/\d/.test(this.props.records[0][ax1]) || !this.numericalYData) { + var ax0 = this._props.axes[0]; + var ax1 = this._props.axes.length > 1 ? this._props.axes[1] : undefined; + if (this._props.axes.length < 2 || !ax1 || !/\d/.test(this._props.records[0][ax1]) || !this.numericalYData) { return ax0 + ' Histogram'; } else return ax0 + ' by ' + ax1 + ' Histogram'; } @computed get parentViz() { - return DocCast(this.props.rootDoc.dataViz_parentViz); - // return LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) // out of all links - // .filter(link => link.link_anchor_1 == this.props.rootDoc.dataViz_parentViz) // get links where this chart doc is the target of the link + return DocCast(this._props.Document.dataViz_parentViz); + // return LinkManager.Instance.getAllRelatedLinks(this._props.Document) // out of all links + // .filter(link => link.link_anchor_1 == this._props.Document.dataViz_parentViz) // get links where this chart doc is the target of the link // .map(link => DocCast(link.link_anchor_1)); // then return the source of the link } @@ -100,13 +105,13 @@ export class Histogram extends React.Component<HistogramProps> { componentWillUnmount() { Array.from(Object.keys(this._disposers)).forEach(key => this._disposers[key]()); } - componentDidMount = () => { + componentDidMount() { this._disposers.chartData = reaction( () => ({ dataSet: this._histogramData, w: this.width, h: this.height }), ({ dataSet, w, h }) => dataSet!.length > 0 && this.drawChart(dataSet, w, h), { fireImmediately: true } ); - }; + } @action restoreView = (data: Doc) => {}; @@ -115,16 +120,16 @@ export class Histogram extends React.Component<HistogramProps> { const anchor = Docs.Create.ConfigDocument({ title: 'histogram doc selection' + this._currSelected, }); - PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this.props.rootDoc); + PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this._props.Document); return anchor; }; @computed get height() { - return this.props.height - this.props.margin.top - this.props.margin.bottom; + return this._props.height - this._props.margin.top - this._props.margin.bottom; } @computed get width() { - return this.props.width - this.props.margin.left - this.props.margin.right; + return this._props.width - this._props.margin.left - this._props.margin.right; } // cleans data by converting numerical data to numbers and taking out empty cells @@ -212,10 +217,10 @@ export class Histogram extends React.Component<HistogramProps> { .select(this._histogramRef.current) .append('svg') .attr('class', 'graph') - .attr('width', width + this.props.margin.right + this.props.margin.left) - .attr('height', height + this.props.margin.top + this.props.margin.bottom) + .attr('width', width + this._props.margin.right + this._props.margin.left) + .attr('height', height + this._props.margin.top + this._props.margin.bottom) .append('g') - .attr('transform', 'translate(' + this.props.margin.left + ',' + this.props.margin.top + ')')); + .attr('transform', 'translate(' + this._props.margin.left + ',' + this._props.margin.top + ')')); var x = d3 .scaleLinear() .domain(this.numericalXData ? [startingPoint!, endingPoint!] : [0, numBins]) @@ -383,7 +388,7 @@ export class Histogram extends React.Component<HistogramProps> { ) .attr('fill', d => { var barColor; - const barColors = StrListCast(this.props.layoutDoc.dataViz_histogram_barColors).map(each => each.split('::')); + const barColors = StrListCast(this._props.layoutDoc.dataViz_histogram_barColors).map(each => each.split('::')); barColors.forEach(each => { if (d[0] && d[0].toString() && each[0] == d[0].toString()) barColor = each[1]; else { @@ -391,24 +396,24 @@ export class Histogram extends React.Component<HistogramProps> { if (Number(range[0]) <= d[0] && d[0] <= Number(range[1])) barColor = each[1]; } }); - return barColor ? StrCast(barColor) : StrCast(this.props.layoutDoc.dataViz_histogram_defaultColor); + return barColor ? StrCast(barColor) : StrCast(this._props.layoutDoc.dataViz_histogram_defaultColor); }); }; @action changeSelectedColor = (color: string) => { this.curBarSelected.attr('fill', color); - const barName = StrCast(this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')); + const barName = StrCast(this._currSelected[this._props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')); - const barColors = Cast(this.props.layoutDoc.dataViz_histogram_barColors, listSpec('string'), null); + const barColors = Cast(this._props.layoutDoc.dataViz_histogram_barColors, listSpec('string'), null); barColors.forEach(each => each.split('::')[0] === barName && barColors.splice(barColors.indexOf(each), 1)); barColors.push(StrCast(barName + '::' + color)); }; @action eraseSelectedColor = () => { - this.curBarSelected.attr('fill', this.props.layoutDoc.dataViz_histogram_defaultColor); - const barName = StrCast(this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')); + this.curBarSelected.attr('fill', this._props.layoutDoc.dataViz_histogram_defaultColor); + const barName = StrCast(this._currSelected[this._props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')); - const barColors = Cast(this.props.layoutDoc.dataViz_histogram_barColors, listSpec('string'), null); + const barColors = Cast(this._props.layoutDoc.dataViz_histogram_barColors, listSpec('string'), null); barColors.forEach(each => each.split('::')[0] === barName && barColors.splice(barColors.indexOf(each), 1)); }; @@ -417,7 +422,7 @@ export class Histogram extends React.Component<HistogramProps> { if (svg) svg.selectAll('rect').attr('fill', (d: any) => { var barColor; - const barColors = StrListCast(this.props.layoutDoc.dataViz_histogram_barColors).map(each => each.split('::')); + const barColors = StrListCast(this._props.layoutDoc.dataViz_histogram_barColors).map(each => each.split('::')); barColors.forEach(each => { if (d[0] && d[0].toString() && each[0] == d[0].toString()) barColor = each[1]; else { @@ -425,7 +430,7 @@ export class Histogram extends React.Component<HistogramProps> { if (Number(range[0]) <= d[0] && d[0] <= Number(range[1])) barColor = each[1]; } }); - return barColor ? StrCast(barColor) : StrCast(this.props.layoutDoc.dataViz_histogram_defaultColor); + return barColor ? StrCast(barColor) : StrCast(this._props.layoutDoc.dataViz_histogram_defaultColor); }); }; @@ -434,14 +439,14 @@ export class Histogram extends React.Component<HistogramProps> { this._histogramData; var curSelectedBarName = ''; var titleAccessor: any = ''; - if (this.props.axes.length == 2) titleAccessor = 'dataViz_histogram_title' + this.props.axes[0] + '-' + this.props.axes[1]; - else if (this.props.axes.length > 0) titleAccessor = 'dataViz_histogram_title' + this.props.axes[0]; - if (!this.props.layoutDoc[titleAccessor]) this.props.layoutDoc[titleAccessor] = this.defaultGraphTitle; - if (!this.props.layoutDoc.dataViz_histogram_defaultColor) this.props.layoutDoc.dataViz_histogram_defaultColor = '#69b3a2'; - if (!this.props.layoutDoc.dataViz_histogram_barColors) this.props.layoutDoc.dataViz_histogram_barColors = new List<string>(); + if (this._props.axes.length == 2) titleAccessor = 'dataViz_histogram_title' + this._props.axes[0] + '-' + this._props.axes[1]; + else if (this._props.axes.length > 0) titleAccessor = 'dataViz_histogram_title' + this._props.axes[0]; + if (!this._props.layoutDoc[titleAccessor]) this._props.layoutDoc[titleAccessor] = this.defaultGraphTitle; + if (!this._props.layoutDoc.dataViz_histogram_defaultColor) this._props.layoutDoc.dataViz_histogram_defaultColor = '#69b3a2'; + if (!this._props.layoutDoc.dataViz_histogram_barColors) this._props.layoutDoc.dataViz_histogram_barColors = new List<string>(); var selected = 'none'; if (this._currSelected) { - curSelectedBarName = StrCast(this._currSelected![this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')); + curSelectedBarName = StrCast(this._currSelected![this._props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')); selected = '{ '; Object.keys(this._currSelected).forEach(key => key // @@ -451,17 +456,17 @@ export class Histogram extends React.Component<HistogramProps> { selected = selected.substring(0, selected.length - 2) + ' }'; } var selectedBarColor; - var barColors = StrListCast(this.props.layoutDoc.histogramBarColors).map(each => each.split('::')); + var barColors = StrListCast(this._props.layoutDoc.histogramBarColors).map(each => each.split('::')); barColors.forEach(each => each[0] === curSelectedBarName && (selectedBarColor = each[1])); if (this._histogramData.length > 0 || !this.parentViz) { - return this.props.axes.length >= 1 ? ( - <div className="chart-container"> + return this._props.axes.length >= 1 ? ( + <div className="chart-container" style={{ width: this._props.width + this._props.margin.right }}> <div className="graph-title"> <EditableText - val={StrCast(this.props.layoutDoc[titleAccessor])} + val={StrCast(this._props.layoutDoc[titleAccessor])} setVal={undoable( - action(val => (this.props.layoutDoc[titleAccessor] = val as string)), + action(val => (this._props.layoutDoc[titleAccessor] = val as string)), 'Change Graph Title' )} color={'black'} @@ -473,9 +478,9 @@ export class Histogram extends React.Component<HistogramProps> { tooltip={'Change Default Bar Color'} type={Type.SEC} icon={<FaFillDrip />} - selectedColor={StrCast(this.props.layoutDoc.dataViz_histogram_defaultColor)} - setFinalColor={undoable(color => (this.props.layoutDoc.dataViz_histogram_defaultColor = color), 'Change Default Bar Color')} - setSelectedColor={undoable(color => (this.props.layoutDoc.dataViz_histogram_defaultColor = color), 'Change Default Bar Color')} + selectedColor={StrCast(this._props.layoutDoc.dataViz_histogram_defaultColor)} + setFinalColor={undoable(color => (this._props.layoutDoc.dataViz_histogram_defaultColor = color), 'Change Default Bar Color')} + setSelectedColor={undoable(color => (this._props.layoutDoc.dataViz_histogram_defaultColor = color), 'Change Default Bar Color')} size={Size.XSMALL} /> </div> diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx index 3de7a0c4a..2a9a8b354 100644 --- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx +++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx @@ -1,6 +1,6 @@ -import { EditableText, Size } from 'browndash-components'; +import { Button, EditableText, Size } from 'browndash-components'; import * as d3 from 'd3'; -import { action, computed, IReactionDisposer, observable, reaction } from 'mobx'; +import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, DocListCast, NumListCast, StrListCast } from '../../../../../fields/Doc'; @@ -10,6 +10,7 @@ import { Cast, DocCast, StrCast } from '../../../../../fields/Types'; import { Docs } from '../../../../documents/Documents'; import { DocumentManager } from '../../../../util/DocumentManager'; import { undoable } from '../../../../util/UndoManager'; +import { ObservableReactComponent } from '../../../ObservableReactComponent'; import { PinProps, PresBox } from '../../trails'; import { DataVizBox } from '../DataVizBox'; import { createLineGenerator, drawLine, minMaxRange, scaleCreatorNumerical, xAxisCreator, xGrid, yAxisCreator, yGrid } from '../utils/D3Utils'; @@ -23,7 +24,8 @@ export interface SelectedDataPoint extends DataPoint { elem?: d3.Selection<d3.BaseType, unknown, SVGGElement, unknown>; } export interface LineChartProps { - rootDoc: Doc; + vizBox: DataVizBox; + Document: Doc; layoutDoc: Doc; axes: string[]; records: { [key: string]: any }[]; @@ -40,33 +42,37 @@ export interface LineChartProps { } @observer -export class LineChart extends React.Component<LineChartProps> { +export class LineChart extends ObservableReactComponent<LineChartProps> { private _disposers: { [key: string]: IReactionDisposer } = {}; private _lineChartRef: React.RefObject<HTMLDivElement> = React.createRef(); private _lineChartSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined; @observable _currSelected: SelectedDataPoint | undefined = undefined; // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates + constructor(props: any) { + super(props); + makeObservable(this); + } @computed get _tableDataIds() { - return !this.parentViz ? this.props.records.map((rec, i) => i) : NumListCast(this.parentViz.dataViz_selectedRows); + return !this.parentViz ? this._props.records.map((rec, i) => i) : NumListCast(this.parentViz.dataViz_selectedRows); } // returns all the data records that will be rendered by only returning those records that have been selected by the parent visualization (or all records if there is no parent) @computed get _tableData() { - return !this.parentViz ? this.props.records : this._tableDataIds.map(rowId => this.props.records[rowId]); + return !this.parentViz ? this._props.records : this._tableDataIds.map(rowId => this._props.records[rowId]); } @computed get _lineChartData() { - var guids = StrListCast(this.props.layoutDoc.dataViz_rowIds); - if (this.props.axes.length <= 1) return []; - return this._tableData.map(record => ({ x: Number(record[this.props.axes[0]]), y: Number(record[this.props.axes[1]]) })).sort((a, b) => (a.x < b.x ? -1 : 1)); + var guids = StrListCast(this._props.layoutDoc.dataViz_rowIds); + if (this._props.axes.length <= 1) return []; + return this._tableData.map(record => ({ x: Number(record[this._props.axes[0]]), y: Number(record[this._props.axes[1]]) })).sort((a, b) => (a.x < b.x ? -1 : 1)); } @computed get graphTitle() { - return this.props.axes[1] + ' vs. ' + this.props.axes[0] + ' Line Chart'; + return this._props.axes[1] + ' vs. ' + this._props.axes[0] + ' Line Chart'; } @computed get parentViz() { - return DocCast(this.props.rootDoc.dataViz_parentViz); - // return LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) // out of all links + return DocCast(this._props.Document.dataViz_parentViz); + // return LinkManager.Instance.getAllRelatedLinks(this._props.Document) // out of all links // .filter(link => { - // return link.link_anchor_1 == this.props.rootDoc.dataViz_parentViz; + // return link.link_anchor_1 == this._props.Document.dataViz_parentViz; // }) // get links where this chart doc is the target of the link // .map(link => DocCast(link.link_anchor_1)); // then return the source of the link } @@ -74,7 +80,7 @@ export class LineChart extends React.Component<LineChartProps> { // return selected x and y axes // otherwise, use the selection of whatever is linked to us const incomingVizBox = DocumentManager.Instance.getFirstDocumentView(this.parentViz)?.ComponentView as DataVizBox; - const highlitedRowIds = NumListCast(incomingVizBox?.rootDoc?.dataViz_highlitedRows); + const highlitedRowIds = NumListCast(incomingVizBox?.layoutDoc?.dataViz_highlitedRows); return this._tableData.filter((record, i) => highlitedRowIds.includes(this._tableDataIds[i])); // get all the datapoints they have selected field set by incoming anchor } @computed get rangeVals(): { xMin?: number; xMax?: number; yMin?: number; yMax?: number } { @@ -83,7 +89,7 @@ export class LineChart extends React.Component<LineChartProps> { componentWillUnmount() { Array.from(Object.keys(this._disposers)).forEach(key => this._disposers[key]()); } - componentDidMount = () => { + componentDidMount() { this._disposers.chartData = reaction( () => ({ dataSet: this._lineChartData, w: this.width, h: this.height }), ({ dataSet, w, h }) => { @@ -94,7 +100,7 @@ export class LineChart extends React.Component<LineChartProps> { { fireImmediately: true } ); this._disposers.annos = reaction( - () => DocListCast(this.props.dataDoc[this.props.fieldKey + '_annotations']), + () => DocListCast(this._props.dataDoc[this._props.fieldKey + '_annotations']), annotations => { // modify how d3 renders so that anything in this annotations list would be potentially highlighted in some way // could be blue colored to make it look like anchor @@ -114,11 +120,11 @@ export class LineChart extends React.Component<LineChartProps> { // redraw annotations when the chart data has changed, or the local or inherited selection has changed this.clearAnnotations(); selected && this.drawAnnotations(Number(selected.x), Number(selected.y), true); - incomingHighlited?.forEach((record: any) => this.drawAnnotations(Number(record[this.props.axes[0]]), Number(record[this.props.axes[1]]))); + incomingHighlited?.forEach((record: any) => this.drawAnnotations(Number(record[this._props.axes[0]]), Number(record[this._props.axes[1]]))); }, { fireImmediately: true } ); - }; + } // anything that doesn't need to be recalculated should just be stored as drawCharts (i.e. computed values) and drawChart is gonna iterate over these observables and generate svgs based on that @@ -170,23 +176,23 @@ export class LineChart extends React.Component<LineChartProps> { // title: 'line doc selection' + this._currSelected?.x, }); - PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this.props.rootDoc); + PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this._props.Document); anchor.config_dataVizSelection = this._currSelected ? new List<number>([this._currSelected.x, this._currSelected.y]) : undefined; return anchor; }; @computed get height() { - return this.props.height - this.props.margin.top - this.props.margin.bottom; + return this._props.height - this._props.margin.top - this._props.margin.bottom; } @computed get width() { - return this.props.width - this.props.margin.left - this.props.margin.right; + return this._props.width - this._props.margin.left - this._props.margin.right; } @computed get defaultGraphTitle() { - var ax0 = this.props.axes[0]; - var ax1 = this.props.axes.length > 1 ? this.props.axes[1] : undefined; - if (this.props.axes.length < 2 || !/\d/.test(this.props.records[0][ax0]) || !ax1) { + var ax0 = this._props.axes[0]; + var ax1 = this._props.axes.length > 1 ? this._props.axes[1] : undefined; + if (this._props.axes.length < 2 || !/\d/.test(this._props.records[0][ax0]) || !ax1) { return ax0 + ' Line Chart'; } else return ax1 + ' by ' + ax0 + ' Line Chart'; } @@ -210,7 +216,7 @@ export class LineChart extends React.Component<LineChartProps> { // TODO: nda - get rid of svg element in the list? if (this._currSelected && this._currSelected.x == x && this._currSelected.y == y) this._currSelected = undefined; else this._currSelected = x !== undefined && y !== undefined ? { x, y } : undefined; - this.props.records.forEach(record => record[this.props.axes[0]] === x && record[this.props.axes[1]] === y && (record.selected = true)); + this._props.records.forEach(record => record[this._props.axes[0]] === x && record[this._props.axes[1]] === y && (record.selected = true)); } drawDataPoints(data: DataPoint[], idx: number, xScale: d3.ScaleLinear<number, number, never>, yScale: d3.ScaleLinear<number, number, never>) { @@ -245,7 +251,7 @@ export class LineChart extends React.Component<LineChartProps> { const yScale = scaleCreatorNumerical(0, yMax, height, 0); // adding svg - const margin = this.props.margin; + const margin = this._props.margin; const svg = (this._lineChartSvg = d3 .select(this._lineChartRef.current) .append('svg') @@ -317,7 +323,7 @@ export class LineChart extends React.Component<LineChartProps> { svg.append('text') .attr('transform', 'translate(' + width / 2 + ' ,' + (height + 40) + ')') .style('text-anchor', 'middle') - .text(this.props.axes[0]); + .text(this._props.axes[0]); svg.append('text') .attr('transform', 'rotate(-90)' + ' ' + 'translate( 0, ' + -10 + ')') .attr('x', -(height / 2)) @@ -325,7 +331,7 @@ export class LineChart extends React.Component<LineChartProps> { .attr('height', 20) .attr('width', 20) .style('text-anchor', 'middle') - .text(this.props.axes[1]); + .text(this._props.axes[1]); }; private updateTooltip( @@ -346,18 +352,18 @@ export class LineChart extends React.Component<LineChartProps> { render() { var titleAccessor: any = ''; - if (this.props.axes.length == 2) titleAccessor = 'dataViz_lineChart_title' + this.props.axes[0] + '-' + this.props.axes[1]; - else if (this.props.axes.length > 0) titleAccessor = 'dataViz_lineChart_title' + this.props.axes[0]; - if (!this.props.layoutDoc[titleAccessor]) this.props.layoutDoc[titleAccessor] = this.defaultGraphTitle; - const selectedPt = this._currSelected ? `{ ${this.props.axes[0]}: ${this._currSelected.x} ${this.props.axes[1]}: ${this._currSelected.y} }` : 'none'; + if (this._props.axes.length == 2) titleAccessor = 'dataViz_lineChart_title' + this._props.axes[0] + '-' + this._props.axes[1]; + else if (this._props.axes.length > 0) titleAccessor = 'dataViz_lineChart_title' + this._props.axes[0]; + if (!this._props.layoutDoc[titleAccessor]) this._props.layoutDoc[titleAccessor] = this.defaultGraphTitle; + const selectedPt = this._currSelected ? `{ ${this._props.axes[0]}: ${this._currSelected.x} ${this._props.axes[1]}: ${this._currSelected.y} }` : 'none'; if (this._lineChartData.length > 0 || !this.parentViz || this.parentViz.length == 0) { - return this.props.axes.length >= 2 && /\d/.test(this.props.records[0][this.props.axes[0]]) && /\d/.test(this.props.records[0][this.props.axes[1]]) ? ( - <div className="chart-container"> + return this._props.axes.length >= 2 && /\d/.test(this._props.records[0][this._props.axes[0]]) && /\d/.test(this._props.records[0][this._props.axes[1]]) ? ( + <div className="chart-container" style={{ width: this._props.width + this._props.margin.right }}> <div className="graph-title"> <EditableText - val={StrCast(this.props.layoutDoc[titleAccessor])} + val={StrCast(this._props.layoutDoc[titleAccessor])} setVal={undoable( - action(val => (this.props.layoutDoc[titleAccessor] = val as string)), + action(val => (this._props.layoutDoc[titleAccessor] = val as string)), 'Change Graph Title' )} color={'black'} @@ -366,7 +372,17 @@ export class LineChart extends React.Component<LineChartProps> { /> </div> <div ref={this._lineChartRef} /> - {selectedPt != 'none' ? <div className={'selected-data'}> {`Selected: ${selectedPt}`}</div> : null} + {selectedPt != 'none' ? ( + <div className={'selected-data'}> + {`Selected: ${selectedPt}`} + <Button + onClick={e => { + console.log('test plzz'); + this._props.vizBox.sidebarBtnDown; + this._props.vizBox.sidebarAddDocument; + }}></Button> + </div> + ) : null} </div> ) : ( <span className="chart-container"> {'first use table view to select two numerical axes to plot'}</span> diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx index 561f39141..1259a13ff 100644 --- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx +++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx @@ -1,6 +1,7 @@ +import { Checkbox } from '@mui/material'; import { ColorPicker, EditableText, Size, Type } from 'browndash-components'; import * as d3 from 'd3'; -import { action, computed, IReactionDisposer, observable, reaction } from 'mobx'; +import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { FaFillDrip } from 'react-icons/fa'; @@ -10,12 +11,12 @@ import { listSpec } from '../../../../../fields/Schema'; import { Cast, DocCast, StrCast } from '../../../../../fields/Types'; import { Docs } from '../../../../documents/Documents'; import { undoable } from '../../../../util/UndoManager'; +import { ObservableReactComponent } from '../../../ObservableReactComponent'; import { PinProps, PresBox } from '../../trails'; import './Chart.scss'; -import { Checkbox } from '@material-ui/core'; export interface PieChartProps { - rootDoc: Doc; + Document: Doc; layoutDoc: Doc; axes: string[]; records: { [key: string]: any }[]; @@ -32,7 +33,7 @@ export interface PieChartProps { } @observer -export class PieChart extends React.Component<PieChartProps> { +export class PieChart extends ObservableReactComponent<PieChartProps> { private _disposers: { [key: string]: IReactionDisposer } = {}; private _piechartRef: React.RefObject<HTMLDivElement> = React.createRef(); private _piechartSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined; @@ -41,61 +42,62 @@ export class PieChart extends React.Component<PieChartProps> { private hoverOverData: any = undefined; // Selection of slice being hovered over @observable _currSelected: any | undefined = undefined; // Object of selected slice + constructor(props: any) { + super(props); + makeObservable(this); + } + @computed get _tableDataIds() { - return !this.parentViz ? this.props.records.map((rec, i) => i) : NumListCast(this.parentViz.dataViz_selectedRows); + return !this.parentViz ? this._props.records.map((rec, i) => i) : NumListCast(this.parentViz.dataViz_selectedRows); } // returns all the data records that will be rendered by only returning those records that have been selected by the parent visualization (or all records if there is no parent) @computed get _tableData() { - return !this.parentViz ? this.props.records : this._tableDataIds.map(rowId => this.props.records[rowId]); + return !this.parentViz ? this._props.records : this._tableDataIds.map(rowId => this._props.records[rowId]); } // organized by specified number percentages/ratios if one column is selected and it contains numbers // otherwise, assume data is organized by categories @computed get byCategory() { - return !/\d/.test(this.props.records[0][this.props.axes[0]]) || this.props.layoutDoc.dataViz_pie_asHistogram; + return !/\d/.test(this._props.records[0][this._props.axes[0]]) || this._props.layoutDoc.dataViz_pie_asHistogram; } // filters all data to just display selected data if brushed (created from an incoming link) @computed get _pieChartData() { - if (this.props.axes.length < 1) return []; + if (this._props.axes.length < 1) return []; - const ax0 = this.props.axes[0]; - if (this.props.axes.length < 2) { - return this._tableData.map(record => ({ [ax0]: record[this.props.axes[0]] })); + const ax0 = this._props.axes[0]; + if (this._props.axes.length < 2) { + return this._tableData.map(record => ({ [ax0]: record[this._props.axes[0]] })); } - const ax1 = this.props.axes[1]; - return this._tableData.map(record => ({ [ax0]: record[this.props.axes[0]], [ax1]: record[this.props.axes[1]] })); + const ax1 = this._props.axes[1]; + return this._tableData.map(record => ({ [ax0]: record[this._props.axes[0]], [ax1]: record[this._props.axes[1]] })); } @computed get defaultGraphTitle() { - var ax0 = this.props.axes[0]; - var ax1 = this.props.axes.length > 1 ? this.props.axes[1] : undefined; - if (this.props.axes.length < 2 || !/\d/.test(this.props.records[0][ax0]) || !ax1) { + var ax0 = this._props.axes[0]; + var ax1 = this._props.axes.length > 1 ? this._props.axes[1] : undefined; + if (this._props.axes.length < 2 || !/\d/.test(this._props.records[0][ax0]) || !ax1) { return ax0 + ' Pie Chart'; } return ax1 + ' by ' + ax0 + ' Pie Chart'; } @computed get parentViz() { - return DocCast(this.props.rootDoc.dataViz_parentViz); - // return LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) // out of all links - // .filter(link => link.link_anchor_1 == this.props.rootDoc.dataViz_parentViz) // get links where this chart doc is the target of the link + return DocCast(this._props.Document.dataViz_parentViz); + // return LinkManager.Instance.getAllRelatedLinks(this._props.Document) // out of all links + // .filter(link => link.link_anchor_1 == this._props.Document.dataViz_parentViz) // get links where this chart doc is the target of the link // .map(link => DocCast(link.link_anchor_1)); // then return the source of the link } componentWillUnmount() { Array.from(Object.keys(this._disposers)).forEach(key => this._disposers[key]()); } - componentDidMount = () => { + componentDidMount() { this._disposers.chartData = reaction( () => ({ dataSet: this._pieChartData, w: this.width, h: this.height }), - ({ dataSet, w, h }) => { - if (dataSet!.length > 0) { - this.drawChart(dataSet, w, h); - } - }, + ({ dataSet, w, h }) => dataSet!.length > 0 && this.drawChart(dataSet, w, h), { fireImmediately: true } ); - }; + } @action restoreView = (data: Doc) => {}; @@ -105,16 +107,16 @@ export class PieChart extends React.Component<PieChartProps> { // title: 'piechart doc selection' + this._currSelected, }); - PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this.props.rootDoc); + PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this._props.Document); return anchor; }; @computed get height() { - return this.props.height - this.props.margin.top - this.props.margin.bottom; + return this._props.height - this._props.margin.top - this._props.margin.bottom; } @computed get width() { - return this.props.width - this.props.margin.left - this.props.margin.right; + return this._props.width - this._props.margin.left - this._props.margin.right; } // cleans data by converting numerical data to numbers and taking out empty cells @@ -185,7 +187,7 @@ export class PieChart extends React.Component<PieChartProps> { var percentField = Object.keys(dataSet[0])[0]; var descriptionField = Object.keys(dataSet[0])[1]!; - var radius = Math.min(width, height - this.props.margin.top - this.props.margin.bottom) / 2; + var radius = Math.min(width, height - this._props.margin.top - this._props.margin.bottom) / 2; // converts data into Objects var data = this.data(dataSet); @@ -213,10 +215,10 @@ export class PieChart extends React.Component<PieChartProps> { .select(this._piechartRef.current) .append('svg') .attr('class', 'graph') - .attr('width', width + this.props.margin.right + this.props.margin.left) - .attr('height', height + this.props.margin.top + this.props.margin.bottom) + .attr('width', width + this._props.margin.right + this._props.margin.left) + .attr('height', height + this._props.margin.top + this._props.margin.bottom) .append('g')); - let g = svg.append('g').attr('transform', 'translate(' + (width / 2 + this.props.margin.left) + ',' + height / 2 + ')'); + let g = svg.append('g').attr('transform', 'translate(' + (width / 2 + this._props.margin.left) + ',' + height / 2 + ')'); var pie = d3.pie(); var arc = d3.arc().innerRadius(0).outerRadius(radius); @@ -253,7 +255,7 @@ export class PieChart extends React.Component<PieChartProps> { } catch (error) {} possibleDataPointVals.push(dataPointVal); }); - const sliceColors = StrListCast(this.props.layoutDoc.dataViz_pie_sliceColors).map(each => each.split('::')); + const sliceColors = StrListCast(this._props.layoutDoc.dataViz_pie_sliceColors).map(each => each.split('::')); arcs.append('path') .attr('fill', (d, i) => { var dataPoint; @@ -265,7 +267,7 @@ export class PieChart extends React.Component<PieChartProps> { } var sliceColor; if (dataPoint) { - const sliceTitle = dataPoint[this.props.axes[0]]; + const sliceTitle = dataPoint[this._props.axes[0]]; const accessByName = StrCast(sliceTitle) ? StrCast(sliceTitle).replace(/\$/g, '').replace(/\%/g, '').replace(/\#/g, '').replace(/\</g, '') : sliceTitle; sliceColors.forEach(each => each[0] == accessByName && (sliceColor = each[1])); } @@ -281,6 +283,7 @@ export class PieChart extends React.Component<PieChartProps> { return 'slice'; } ) + // @ts-ignore .attr('d', arc) .on('click', onPointClick) .on('mouseover', onHover) @@ -312,10 +315,10 @@ export class PieChart extends React.Component<PieChartProps> { @action changeSelectedColor = (color: string) => { this.curSliceSelected.attr('fill', color); - const sliceTitle = this._currSelected[this.props.axes[0]]; + const sliceTitle = this._currSelected[this._props.axes[0]]; const sliceName = StrCast(sliceTitle) ? StrCast(sliceTitle).replace(/\$/g, '').replace(/\%/g, '').replace(/\#/g, '').replace(/\</g, '') : sliceTitle; - const sliceColors = Cast(this.props.layoutDoc.dataViz_pie_sliceColors, listSpec('string'), null); + const sliceColors = Cast(this._props.layoutDoc.dataViz_pie_sliceColors, listSpec('string'), null); sliceColors.map(each => { if (each.split('::')[0] == sliceName) sliceColors.splice(sliceColors.indexOf(each), 1); }); @@ -323,20 +326,20 @@ export class PieChart extends React.Component<PieChartProps> { }; @action changeHistogramCheckBox = () => { - this.props.layoutDoc.dataViz_pie_asHistogram = !this.props.layoutDoc.dataViz_pie_asHistogram; + this._props.layoutDoc.dataViz_pie_asHistogram = !this._props.layoutDoc.dataViz_pie_asHistogram; this.drawChart(this._pieChartData, this.width, this.height); }; render() { var titleAccessor: any = ''; - if (this.props.axes.length == 2) titleAccessor = 'dataViz_pie_title' + this.props.axes[0] + '-' + this.props.axes[1]; - else if (this.props.axes.length > 0) titleAccessor = 'dataViz_pie_title' + this.props.axes[0]; - if (!this.props.layoutDoc[titleAccessor]) this.props.layoutDoc[titleAccessor] = this.defaultGraphTitle; - if (!this.props.layoutDoc.dataViz_pie_sliceColors) this.props.layoutDoc.dataViz_pie_sliceColors = new List<string>(); + if (this._props.axes.length == 2) titleAccessor = 'dataViz_pie_title' + this._props.axes[0] + '-' + this._props.axes[1]; + else if (this._props.axes.length > 0) titleAccessor = 'dataViz_pie_title' + this._props.axes[0]; + if (!this._props.layoutDoc[titleAccessor]) this._props.layoutDoc[titleAccessor] = this.defaultGraphTitle; + if (!this._props.layoutDoc.dataViz_pie_sliceColors) this._props.layoutDoc.dataViz_pie_sliceColors = new List<string>(); var selected: string; var curSelectedSliceName = ''; if (this._currSelected) { - const sliceTitle = this._currSelected[this.props.axes[0]]; + const sliceTitle = this._currSelected[this._props.axes[0]]; curSelectedSliceName = StrCast(sliceTitle) ? StrCast(sliceTitle).replace(/\$/g, '').replace(/\%/g, '').replace(/\#/g, '').replace(/\</g, '') : sliceTitle; selected = '{ '; Object.keys(this._currSelected).map(key => { @@ -346,19 +349,19 @@ export class PieChart extends React.Component<PieChartProps> { selected += ' }'; } else selected = 'none'; var selectedSliceColor; - var sliceColors = StrListCast(this.props.layoutDoc.dataViz_pie_sliceColors).map(each => each.split('::')); + var sliceColors = StrListCast(this._props.layoutDoc.dataViz_pie_sliceColors).map(each => each.split('::')); sliceColors.forEach(each => { if (each[0] == curSelectedSliceName!) selectedSliceColor = each[1]; }); if (this._pieChartData.length > 0 || !this.parentViz) { - return this.props.axes.length >= 1 ? ( - <div className="chart-container"> + return this._props.axes.length >= 1 ? ( + <div className="chart-container" style={{ width: this._props.width + this._props.margin.right }}> <div className="graph-title"> <EditableText - val={StrCast(this.props.layoutDoc[titleAccessor])} + val={StrCast(this._props.layoutDoc[titleAccessor])} setVal={undoable( - action(val => (this.props.layoutDoc[titleAccessor] = val as string)), + action(val => (this._props.layoutDoc[titleAccessor] = val as string)), 'Change Graph Title' )} color={'black'} @@ -366,9 +369,9 @@ export class PieChart extends React.Component<PieChartProps> { fillWidth /> </div> - {this.props.axes.length === 1 && /\d/.test(this.props.records[0][this.props.axes[0]]) ? ( - <div className={'asHistogram-checkBox'} style={{ width: this.props.width }}> - <Checkbox color="primary" onChange={this.changeHistogramCheckBox} checked={this.props.layoutDoc.dataViz_pie_asHistogram as boolean} /> + {this._props.axes.length === 1 && /\d/.test(this._props.records[0][this._props.axes[0]]) ? ( + <div className={'asHistogram-checkBox'} style={{ width: this._props.width }}> + <Checkbox color="primary" onChange={this.changeHistogramCheckBox} checked={this._props.layoutDoc.dataViz_pie_asHistogram as boolean} /> Organize data as histogram </div> ) : null} diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx index b88389de6..ed44d9269 100644 --- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx +++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx @@ -1,20 +1,20 @@ import { Button, Type } from 'browndash-components'; -import { action, computed, IReactionDisposer, observable, reaction } from 'mobx'; +import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; +import { Utils, emptyFunction, setupMoveUpEvents } from '../../../../../Utils'; import { Doc, Field, NumListCast } from '../../../../../fields/Doc'; import { List } from '../../../../../fields/List'; import { listSpec } from '../../../../../fields/Schema'; import { Cast, DocCast } from '../../../../../fields/Types'; -import { emptyFunction, setupMoveUpEvents, Utils } from '../../../../../Utils'; import { DragManager } from '../../../../util/DragManager'; +import { ObservableReactComponent } from '../../../ObservableReactComponent'; import { DocumentView } from '../../DocumentView'; import { DataVizView } from '../DataVizBox'; -import { DATA_VIZ_TABLE_ROW_HEIGHT } from '../../../global/globalCssVariables.scss'; import './Chart.scss'; - +const { default: { DATA_VIZ_TABLE_ROW_HEIGHT } } = require('../../../global/globalCssVariables.module.scss'); // prettier-ignore interface TableBoxProps { - rootDoc: Doc; + Document: Doc; layoutDoc: Doc; records: { [key: string]: any }[]; selectAxes: (axes: string[]) => void; @@ -31,13 +31,17 @@ interface TableBoxProps { } @observer -export class TableBox extends React.Component<TableBoxProps> { +export class TableBox extends ObservableReactComponent<TableBoxProps> { _inputChangedDisposer?: IReactionDisposer; _containerRef: HTMLDivElement | null = null; @observable _scrollTop = -1; @observable _tableHeight = 0; @observable _tableContainerHeight = 0; + constructor(props: any) { + super(props); + makeObservable(this); + } componentDidMount() { // if the tableData changes (ie., when records are selected by the parent (input) visulization), @@ -49,17 +53,17 @@ export class TableBox extends React.Component<TableBoxProps> { this._inputChangedDisposer?.(); } @computed get _tableDataIds() { - return !this.parentViz ? this.props.records.map((rec, i) => i) : NumListCast(this.parentViz.dataViz_selectedRows); + return !this.parentViz ? this._props.records.map((rec, i) => i) : NumListCast(this.parentViz.dataViz_selectedRows); } // returns all the data records that will be rendered by only returning those records that have been selected by the parent visualization (or all records if there is no parent) @computed get _tableData() { - return !this.parentViz ? this.props.records : this._tableDataIds.map(rowId => this.props.records[rowId]); + return !this.parentViz ? this._props.records : this._tableDataIds.map(rowId => this._props.records[rowId]); } @computed get parentViz() { - return DocCast(this.props.rootDoc.dataViz_parentViz); - // return LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) // out of all links - // .filter(link => link.link_anchor_1 == this.props.rootDoc.dataViz_parentViz) // get links where this chart doc is the target of the link + return DocCast(this._props.Document.dataViz_parentViz); + // return LinkManager.Instance.getAllRelatedLinks(this._props.Document) // out of all links + // .filter(link => link.link_anchor_1 == this._props.Document.dataViz_parentViz) // get links where this chart doc is the target of the link // .map(link => DocCast(link.link_anchor_1)); // then return the source of the link } @@ -69,33 +73,35 @@ export class TableBox extends React.Component<TableBoxProps> { // updates the 'dataViz_selectedRows' and 'dataViz_highlightedRows' fields to no longer include rows that aren't in the table filterSelectedRowsDown = () => { - const selected = NumListCast(this.props.layoutDoc.dataViz_selectedRows); - this.props.layoutDoc.dataViz_selectedRows = new List<number>(selected.filter(rowId => this._tableDataIds.includes(rowId))); // filters through selected to remove guids that were removed in the incoming data - const highlighted = NumListCast(this.props.layoutDoc.dataViz_highlitedRows); - this.props.layoutDoc.dataViz_highlitedRows = new List<number>(highlighted.filter(rowId => this._tableDataIds.includes(rowId))); // filters through highlighted to remove guids that were removed in the incoming data + const selected = NumListCast(this._props.layoutDoc.dataViz_selectedRows); + this._props.layoutDoc.dataViz_selectedRows = new List<number>(selected.filter(rowId => this._tableDataIds.includes(rowId))); // filters through selected to remove guids that were removed in the incoming data + const highlighted = NumListCast(this._props.layoutDoc.dataViz_highlitedRows); + this._props.layoutDoc.dataViz_highlitedRows = new List<number>(highlighted.filter(rowId => this._tableDataIds.includes(rowId))); // filters through highlighted to remove guids that were removed in the incoming data }; @computed get viewScale() { - return this.props.docView?.()?.props.ScreenToLocalTransform().Scale || 1; + return this._props.docView?.()?.screenToViewTransform().Scale || 1; } @computed get rowHeight() { + console.log('scale = ' + this.viewScale + ' table = ' + this._tableHeight + ' ids = ' + this._tableDataIds.length); return (this.viewScale * this._tableHeight) / this._tableDataIds.length; } @computed get startID() { - return this.rowHeight ? Math.floor(this._scrollTop / this.rowHeight) : 0; + return this.rowHeight ? Math.max(Math.floor(this._scrollTop / this.rowHeight) - 1, 0) : 0; } @computed get endID() { + console.log('start = ' + this.startID + ' container = ' + this._tableContainerHeight + ' scale = ' + this.viewScale + ' row = ' + this.rowHeight); return Math.ceil(this.startID + (this._tableContainerHeight * this.viewScale) / (this.rowHeight || 1)); } @action handleScroll = () => { - if (!this.props.docView?.()?.ContentDiv?.hidden) { + if (!this._props.docView?.()?.ContentDiv?.hidden) { this._scrollTop = this._containerRef?.scrollTop ?? 0; } }; @action tableRowClick = (e: React.MouseEvent, rowId: number) => { - const highlited = Cast(this.props.layoutDoc.dataViz_highlitedRows, listSpec('number'), null); - const selected = Cast(this.props.layoutDoc.dataViz_selectedRows, listSpec('number'), null); + const highlited = Cast(this._props.layoutDoc.dataViz_highlitedRows, listSpec('number'), null); + const selected = Cast(this._props.layoutDoc.dataViz_selectedRows, listSpec('number'), null); if (e.metaKey) { // highlighting a row if (highlited?.includes(rowId)) highlited.splice(highlited.indexOf(rowId), 1); @@ -119,26 +125,26 @@ export class TableBox extends React.Component<TableBoxProps> { e, e => { // dragging off a column to create a brushed DataVizBox - const sourceAnchorCreator = () => this.props.docView?.()!.rootDoc!; + const sourceAnchorCreator = () => this._props.docView?.()!.Document!; const targetCreator = (annotationOn: Doc | undefined) => { - const embedding = Doc.MakeEmbedding(this.props.docView?.()!.rootDoc!); + const embedding = Doc.MakeEmbedding(this._props.docView?.()!.Document!); embedding._dataViz = DataVizView.TABLE; embedding._dataViz_axes = new List<string>([col, col]); - embedding._dataViz_parentViz = this.props.rootDoc; + embedding._dataViz_parentViz = this._props.Document; embedding.annotationOn = annotationOn; - embedding.histogramBarColors = Field.Copy(this.props.layoutDoc.histogramBarColors); - embedding.defaultHistogramColor = this.props.layoutDoc.defaultHistogramColor; - embedding.pieSliceColors = Field.Copy(this.props.layoutDoc.pieSliceColors); + embedding.histogramBarColors = Field.Copy(this._props.layoutDoc.histogramBarColors); + embedding.defaultHistogramColor = this._props.layoutDoc.defaultHistogramColor; + embedding.pieSliceColors = Field.Copy(this._props.layoutDoc.pieSliceColors); return embedding; }; - if (this.props.docView?.() && !Utils.isClick(e.clientX, e.clientY, downX, downY, Date.now())) { - DragManager.StartAnchorAnnoDrag(e.target instanceof HTMLElement ? [e.target] : [], new DragManager.AnchorAnnoDragData(this.props.docView()!, sourceAnchorCreator, targetCreator), downX, downY, { + if (this._props.docView?.() && !Utils.isClick(e.clientX, e.clientY, downX, downY, Date.now())) { + DragManager.StartAnchorAnnoDrag(e.target instanceof HTMLElement ? [e.target] : [], new DragManager.AnchorAnnoDragData(this._props.docView()!, sourceAnchorCreator, targetCreator), downX, downY, { dragComplete: e => { if (!e.aborted && e.annoDragData && e.annoDragData.linkSourceDoc && e.annoDragData.dropDocument && e.linkDocument) { e.linkDocument.link_displayLine = true; e.linkDocument.link_matchEmbeddings = true; e.linkDocument.link_displayArrow = true; - // e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this.props.rootDoc; + // e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this._props.Document; // e.annoDragData.linkSourceDoc.followLinkZoom = false; } }, @@ -149,11 +155,11 @@ export class TableBox extends React.Component<TableBoxProps> { }, emptyFunction, action(e => { - const newAxes = this.props.axes; + const newAxes = this._props.axes; if (newAxes.includes(col)) newAxes.splice(newAxes.indexOf(col), 1); else if (newAxes.length > 1) newAxes[1] = col; else newAxes.push(col); - this.props.selectAxes(newAxes); + this._props.selectAxes(newAxes); }) ); }; @@ -163,16 +169,17 @@ export class TableBox extends React.Component<TableBoxProps> { return ( <div className="tableBox" + style={{ width: this._props.width + this._props.margin.right }} tabIndex={0} onKeyDown={e => { - if (this.props.layoutDoc && e.key === 'a' && (e.ctrlKey || e.metaKey)) { + if (this._props.layoutDoc && e.key === 'a' && (e.ctrlKey || e.metaKey)) { e.stopPropagation(); - this.props.layoutDoc.dataViz_selectedRows = new List<number>(this._tableDataIds); + this._props.layoutDoc.dataViz_selectedRows = new List<number>(this._tableDataIds); } }}> <div className="selectAll-buttons"> - <Button onClick={action(() => (this.props.layoutDoc.dataViz_selectedRows = new List<number>(this._tableDataIds)))} text="Select All" type={Type.SEC} color={'black'} /> - <Button onClick={action(() => (this.props.layoutDoc.dataViz_selectedRows = new List<number>()))} text="Deselect All" type={Type.SEC} color={'black'} /> + <Button onClick={action(() => (this._props.layoutDoc.dataViz_selectedRows = new List<number>(this._tableDataIds)))} text="Select All" type={Type.SEC} color={'black'} /> + <Button onClick={action(() => (this._props.layoutDoc.dataViz_selectedRows = new List<number>()))} text="Deselect All" type={Type.SEC} color={'black'} /> </div> <div className={`tableBox-container ${this.columns[0]}`} @@ -180,7 +187,7 @@ export class TableBox extends React.Component<TableBoxProps> { onScroll={this.handleScroll} ref={action((r: HTMLDivElement | null) => { this._containerRef = r; - if (!this.props.docView?.()?.ContentDiv?.hidden && r) { + if (!this._props.docView?.()?.ContentDiv?.hidden && r) { this._tableContainerHeight = r.getBoundingClientRect().height ?? 0; r.addEventListener( 'wheel', // if scrollTop is 0, then don't let wheel trigger scroll on any container (which it would since onScroll won't be triggered on this) @@ -195,7 +202,7 @@ export class TableBox extends React.Component<TableBoxProps> { <table className="tableBox-table" ref={action((r: HTMLTableElement | null) => { - if (!this.props.docView?.()?.ContentDiv?.hidden && r) { + if (!this._props.docView?.()?.ContentDiv?.hidden && r) { this._tableHeight = r?.getBoundingClientRect().height ?? 0; } })}> @@ -206,8 +213,8 @@ export class TableBox extends React.Component<TableBoxProps> { <th key={this.columns.indexOf(col)} style={{ - color: this.props.axes.slice().reverse().lastElement() === col ? 'darkgreen' : this.props.axes.lastElement() === col ? 'darkred' : undefined, - background: this.props.axes.slice().reverse().lastElement() === col ? '#E3fbdb' : this.props.axes.lastElement() === col ? '#Fbdbdb' : undefined, + color: this._props.axes.slice().reverse().lastElement() === col ? 'darkgreen' : this._props.axes.lastElement() === col ? 'darkred' : undefined, + background: this._props.axes.slice().reverse().lastElement() === col ? '#E3fbdb' : this._props.axes.lastElement() === col ? '#Fbdbdb' : undefined, fontWeight: 'bolder', border: '3px solid black', }} @@ -219,20 +226,20 @@ export class TableBox extends React.Component<TableBoxProps> { </thead> <tbody> {this._tableDataIds - .filter(rowId => this.startID <= rowId && rowId <= this.endID) + .filter((rowId, i) => this.startID - 2 <= i && i <= this.endID + 2) ?.map(rowId => ( <tr key={rowId} className={`tableBox-row ${this.columns[0]}`} onClick={e => this.tableRowClick(e, rowId)} style={{ - background: NumListCast(this.props.layoutDoc.dataViz_highlitedRows).includes(rowId) ? 'lightYellow' : NumListCast(this.props.layoutDoc.dataViz_selectedRows).includes(rowId) ? 'lightgrey' : '', + background: NumListCast(this._props.layoutDoc.dataViz_highlitedRows).includes(rowId) ? 'lightYellow' : NumListCast(this._props.layoutDoc.dataViz_selectedRows).includes(rowId) ? 'lightgrey' : '', }}> {this.columns.map(col => { - const colSelected = this.props.axes.length > 1 ? this.props.axes[0] == col || this.props.axes[1] == col : this.props.axes.length > 0 ? this.props.axes[0] == col : false; + const colSelected = this._props.axes.length > 1 ? this._props.axes[0] == col || this._props.axes[1] == col : this._props.axes.length > 0 ? this._props.axes[0] == col : false; return ( <td key={this.columns.indexOf(col)} style={{ border: colSelected ? '3px solid black' : '1px solid black', fontWeight: colSelected ? 'bolder' : 'normal' }}> - <div className="tableBox-cell">{this.props.records[rowId][col]}</div> + <div className="tableBox-cell">{this._props.records[rowId][col]}</div> </td> ); })} diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index e1de2fa76..07e179246 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -1,54 +1,52 @@ -import { computed } from 'mobx'; +import { computed, makeObservable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; +import JsxParser from 'react-jsx-parser'; +import * as XRegExp from 'xregexp'; +import { OmitKeys, Without, emptyPath } from '../../../Utils'; import { Doc, Opt } from '../../../fields/Doc'; -import { AclPrivate } from '../../../fields/DocSymbols'; +import { AclPrivate, DocData } from '../../../fields/DocSymbols'; import { ScriptField } from '../../../fields/ScriptField'; import { Cast, StrCast } from '../../../fields/Types'; import { GetEffectiveAcl, TraceMobx } from '../../../fields/util'; -import { emptyPath, OmitKeys, Without } from '../../../Utils'; -import { DirectoryImportBox } from '../../util/Import & Export/DirectoryImportBox'; +import { InkingStroke } from '../InkingStroke'; +import { ObservableReactComponent } from '../ObservableReactComponent'; +import { CollectionCalendarView } from '../collections/CollectionCalendarView'; import { CollectionDockingView } from '../collections/CollectionDockingView'; +import { CollectionView } from '../collections/CollectionView'; import { CollectionFreeFormView } from '../collections/collectionFreeForm/CollectionFreeFormView'; import { CollectionSchemaView } from '../collections/collectionSchema/CollectionSchemaView'; import { SchemaRowBox } from '../collections/collectionSchema/SchemaRowBox'; -import { CollectionView } from '../collections/CollectionView'; -import { InkingStroke } from '../InkingStroke'; import { PresElementBox } from '../nodes/trails/PresElementBox'; import { SearchBox } from '../search/SearchBox'; import { DashWebRTCVideo } from '../webcam/DashWebRTCVideo'; import { YoutubeBox } from './../../apis/youtube/YoutubeBox'; import { AudioBox } from './AudioBox'; -import { ColorBox } from './ColorBox'; import { ComparisonBox } from './ComparisonBox'; import { DataVizBox } from './DataVizBox/DataVizBox'; -import { DocumentViewProps } from './DocumentView'; import './DocumentView.scss'; import { EquationBox } from './EquationBox'; import { FieldView, FieldViewProps } from './FieldView'; import { FontIconBox } from './FontIconBox/FontIconBox'; -import { FormattedTextBox } from './formattedText/FormattedTextBox'; import { FunctionPlotBox } from './FunctionPlotBox'; import { ImageBox } from './ImageBox'; -import { ImportElementBox } from './importBox/ImportElementBox'; import { KeyValueBox } from './KeyValueBox'; import { LabelBox } from './LabelBox'; import { LinkAnchorBox } from './LinkAnchorBox'; import { LinkBox } from './LinkBox'; import { LoadingBox } from './LoadingBox'; import { MapBox } from './MapBox/MapBox'; +import { MapPushpinBox } from './MapBox/MapPushpinBox'; import { PDFBox } from './PDFBox'; import { PhysicsSimulationBox } from './PhysicsBox/PhysicsSimulationBox'; import { RecordingBox } from './RecordingBox'; import { ScreenshotBox } from './ScreenshotBox'; import { ScriptingBox } from './ScriptingBox'; -import { PresBox } from './trails/PresBox'; import { VideoBox } from './VideoBox'; import { WebBox } from './WebBox'; -import React = require('react'); -import XRegExp = require('xregexp'); -import { MapPushpinBox } from './MapBox/MapPushpinBox'; - -const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this? +import { FormattedTextBox } from './formattedText/FormattedTextBox'; +import { ImportElementBox } from './importBox/ImportElementBox'; +import { PresBox } from './trails/PresBox'; type BindingProps = Without<FieldViewProps, 'fieldKey'>; export interface JsxBindings { @@ -66,7 +64,6 @@ export const ObserverJsxParser: typeof JsxParser = ObserverJsxParser1 as any; interface HTMLtagProps { Document: Doc; - RootDoc: Doc; htmltag: string; onClick?: ScriptField; onInput?: ScriptField; @@ -90,18 +87,18 @@ interface HTMLtagProps { export class HTMLtag extends React.Component<HTMLtagProps> { click = (e: React.MouseEvent) => { const clickScript = (this.props as any).onClick as Opt<ScriptField>; - clickScript?.script.run({ this: this.props.Document, self: this.props.RootDoc, scale: this.props.scaling }); + clickScript?.script.run({ this: this.props.Document, self: this.props.Document, scale: this.props.scaling }); }; onInput = (e: React.FormEvent<HTMLDivElement>) => { const onInputScript = (this.props as any).onInput as Opt<ScriptField>; - onInputScript?.script.run({ this: this.props.Document, self: this.props.RootDoc, value: (e.target as any).textContent }); + onInputScript?.script.run({ this: this.props.Document, self: this.props.Document, value: (e.target as any).textContent }); }; render() { const style: { [key: string]: any } = {}; - const divKeys = OmitKeys(this.props, ['children', 'htmltag', 'RootDoc', 'scaling', 'Document', 'key', 'onInput', 'onClick', '__proto__']).omit; + const divKeys = OmitKeys(this.props, ['children', 'dragStarting', 'dragEnding', 'htmltag', 'scaling', 'Document', 'key', 'onInput', 'onClick', '__proto__']).omit; const replacer = (match: any, expr: string, offset: any, string: any) => { - // bcz: this executes a script to convert a propery expression string: { script } into a value - return (ScriptField.MakeFunction(expr, { self: Doc.name, this: Doc.name, scale: 'number' })?.script.run({ self: this.props.RootDoc, this: this.props.Document, scale: this.props.scaling }).result as string) || ''; + // bcz: this executes a script to convert a property expression string: { script } into a value + return (ScriptField.MakeFunction(expr, { self: Doc.name, this: Doc.name, scale: 'number' })?.script.run({ self: this.props.Document, this: this.props.Document, scale: this.props.scaling }).result as string) || ''; }; Object.keys(divKeys).map((prop: string) => { const p = (this.props as any)[prop] as string; @@ -116,71 +113,72 @@ export class HTMLtag extends React.Component<HTMLtagProps> { } } +export interface DocumentContentsViewProps extends FieldViewProps { + layoutFieldKey: string; +} @observer -export class DocumentContentsView extends React.Component< - DocumentViewProps & { - isSelected: (outsideReaction: boolean) => boolean; - select: (ctrl: boolean) => void; - NativeDimScaling?: () => number; - setHeight?: (height: number) => void; - layout_fieldKey: string; +export class DocumentContentsView extends ObservableReactComponent<DocumentContentsViewProps> { + constructor(props: any) { + super(props); + makeObservable(this); } -> { + @computed get layout(): string { TraceMobx(); - if (this.props.LayoutTemplateString) return this.props.LayoutTemplateString; + if (this._props.LayoutTemplateString) return this._props.LayoutTemplateString; if (!this.layoutDoc) return '<p>awaiting layout</p>'; - if (this.props.layout_fieldKey === 'layout_keyValue') return StrCast(this.props.Document.layout_keyValue, KeyValueBox.LayoutString()); - const layout = Cast(this.layoutDoc[this.layoutDoc === this.props.Document && this.props.layout_fieldKey ? this.props.layout_fieldKey : StrCast(this.layoutDoc.layout_fieldKey, 'layout')], 'string'); - if (layout === undefined) return this.props.Document.data ? "<FieldView {...props} fieldKey='data' />" : KeyValueBox.LayoutString(); + if (this._props.layoutFieldKey === 'layout_keyValue') return StrCast(this._props.Document.layout_keyValue, KeyValueBox.LayoutString()); + const layout = Cast(this.layoutDoc[this.layoutDoc === this._props.Document && this._props.layoutFieldKey ? this._props.layoutFieldKey : StrCast(this.layoutDoc.layout_fieldKey, 'layout')], 'string'); + if (layout === undefined) return this._props.Document.data ? "<FieldView {...props} fieldKey='data' />" : KeyValueBox.LayoutString(); if (typeof layout === 'string') return layout; return '<p>Loading layout</p>'; } - get dataDoc() { - const proto = this.props.DataDoc || Doc.GetProto(this.props.Document); - return proto instanceof Promise ? undefined : proto; - } get layoutDoc() { // bcz: replaced this with below : is it correct? change was made to accommodate passing fieldKey's from a layout script - // const template: Doc = this.props.LayoutTemplate?.() || Doc.Layout(this.props.Document, this.props.layout_fieldKey ? Cast(this.props.Document[this.props.layout_fieldKey], Doc, null) : undefined); + // const template: Doc = this._props.LayoutTemplate?.() || Doc.Layout(this._props.Document, this._props.fieldKey ? Cast(this._props.Document[this._props.fieldKey], Doc, null) : undefined); const template: Doc = - this.props.LayoutTemplate?.() || - (this.props.LayoutTemplateString && this.props.Document) || - (this.props.layout_fieldKey && StrCast(this.props.Document[this.props.layout_fieldKey]) && this.props.Document) || - Doc.Layout(this.props.Document, this.props.layout_fieldKey ? Cast(this.props.Document[this.props.layout_fieldKey], Doc, null) : undefined); - return Doc.expandTemplateLayout(template, this.props.Document); + this._props.LayoutTemplate?.() || + (this._props.LayoutTemplateString && this._props.Document) || + (this._props.layoutFieldKey && StrCast(this._props.Document[this._props.layoutFieldKey]) && this._props.Document) || + Doc.Layout(this._props.Document, this._props.layoutFieldKey ? Cast(this._props.Document[this._props.layoutFieldKey], Doc, null) : undefined); + return Doc.expandTemplateLayout(template, this._props.Document); } CreateBindings(onClick: Opt<ScriptField>, onInput: Opt<ScriptField>): JsxBindings { const docOnlyProps = [ - // these are the properties in DocumentViewProps that need to be removed to pass on only DocumentSharedViewProps to the FieldViews + // these are the properties in DocumentViewProps that need to be removed to pass on only DocumentSharedViewProps to the FieldViews 'hideResizeHandles', 'hideTitle', - 'contentPointerEvents', - 'radialMenu', + 'bringToFront', + 'childContentPointerEvents', 'LayoutTemplateString', 'LayoutTemplate', + 'layoutFieldKey', 'dontCenter', 'contextMenuItems', - 'onClick', - 'onDoubleClick', - 'onPointerDown', - 'onPointerUp', + //'onClick', // don't need to omit this since it will be set + 'onDoubleClickScript', + 'onPointerDownScript', + 'onPointerUpScript', ]; - const list = { - ...OmitKeys(this.props, [...docOnlyProps], '').omit, - RootDoc: Cast(this.layoutDoc?.rootDocument, Doc, null) || this.layoutDoc, - Document: this.layoutDoc, - DataDoc: this.dataDoc, - onClick: onClick, - onInput: onInput, + const templateDataDoc = this._props.TemplateDataDocument ?? (this.layoutDoc !== this._props.Document ? this._props.Document[DocData] : undefined); + const list: BindingProps & React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLDivElement>, HTMLDivElement> = { + ...this._props, + Document: this.layoutDoc ?? this._props.Document, + TemplateDataDocument: templateDataDoc instanceof Promise ? undefined : templateDataDoc, + onClick: onClick as any as React.MouseEventHandler, // pass onClick script as if it were a real function -- it will be interpreted properly in the HTMLtag + onInput: onInput as any as React.FormEventHandler, + }; + return { + props: { + ...OmitKeys(list, [...docOnlyProps], '').omit, + }, }; - return { props: list }; } // componentWillUpdate(oldProps: any, newState: any) { - // // console.log("willupdate", oldProps, this.props); // bcz: if you get a message saying something invalidated because reactive props changed, then this method allows you to figure out which prop changed + // // console.log("willupdate", oldProps, this._props); // bcz: if you get a message saying something invalidated because reactive props changed, then this method allows you to figure out which prop changed // } @computed get renderData() { @@ -189,13 +187,13 @@ export class DocumentContentsView extends React.Component< // replace code content with a script >{content}< as in <HTMLdiv>{this.title}</HTMLdiv> const replacer = (match: any, prefix: string, expr: string, postfix: string, offset: any, string: any) => { - return prefix + ((ScriptField.MakeFunction(expr, { self: Doc.name, this: Doc.name })?.script.run({ this: this.props.Document }).result as string) || '') + postfix; + return prefix + ((ScriptField.MakeFunction(expr, { self: Doc.name, this: Doc.name })?.script.run({ this: this._props.Document }).result as string) || '') + postfix; }; layoutFrame = layoutFrame.replace(/(>[^{]*)[^=]\{([^.'][^<}]+)\}([^}]*<)/g, replacer); // replace HTML<tag> with corresponding HTML tag as in: <HTMLdiv> becomes <HTMLtag Document={props.Document} htmltag='div'> const replacer2 = (match: any, p1: string, offset: any, string: any) => { - return `<HTMLtag RootDoc={props.RootDoc} Document={props.Document} scaling='${this.props.NativeDimScaling?.() || 1}' htmltag='${p1}'`; + return `<HTMLtag Document={props.Document} scaling='${this._props.NativeDimScaling?.() || 1}' htmltag='${p1}'`; }; layoutFrame = layoutFrame.replace(/<HTML([a-zA-Z0-9_-]+)/g, replacer2); @@ -227,7 +225,7 @@ export class DocumentContentsView extends React.Component< TraceMobx(); const { bindings, layoutFrame } = this.renderData; - return this.props.renderDepth > 12 || !layoutFrame || !this.layoutDoc || GetEffectiveAcl(this.layoutDoc) === AclPrivate ? null : ( + return this._props.renderDepth > 12 || !layoutFrame || !this.layoutDoc || GetEffectiveAcl(this.layoutDoc) === AclPrivate ? null : ( <ObserverJsxParser key={42} blacklistedAttrs={emptyPath} @@ -235,7 +233,6 @@ export class DocumentContentsView extends React.Component< components={{ FormattedTextBox, ImageBox, - DirectoryImportBox, FontIconBox, LabelBox, EquationBox, @@ -243,6 +240,7 @@ export class DocumentContentsView extends React.Component< CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, + CollectionCalendarView, CollectionView, WebBox, KeyValueBox, @@ -255,7 +253,6 @@ export class DocumentContentsView extends React.Component< PresElementBox, SearchBox, FunctionPlotBox, - ColorBox, DashWebRTCVideo, LinkAnchorBox, InkingStroke, diff --git a/src/client/views/nodes/DocumentIcon.tsx b/src/client/views/nodes/DocumentIcon.tsx index bccbd66e8..4a22766cc 100644 --- a/src/client/views/nodes/DocumentIcon.tsx +++ b/src/client/views/nodes/DocumentIcon.tsx @@ -1,25 +1,35 @@ +import { Tooltip } from '@mui/material'; +import { action, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { DocumentView } from './DocumentView'; -import { DocumentManager } from '../../util/DocumentManager'; -import { Transformer, ts } from '../../util/Scripting'; +import { factory } from 'typescript'; import { Field } from '../../../fields/Doc'; -import { Tooltip } from '@material-ui/core'; -import { action, observable } from 'mobx'; import { Id } from '../../../fields/FieldSymbols'; -import { factory } from 'typescript'; -import { LightboxView } from '../LightboxView'; +import { DocumentManager } from '../../util/DocumentManager'; +import { Transformer, ts } from '../../util/Scripting'; import { SettingsManager } from '../../util/SettingsManager'; +import { LightboxView } from '../LightboxView'; +import { ObservableReactComponent } from '../ObservableReactComponent'; +import { DocumentView } from './DocumentView'; +interface DocumentIconProps { + view: DocumentView; + index: number; +} @observer -export class DocumentIcon extends React.Component<{ view: DocumentView; index: number }> { +export class DocumentIcon extends ObservableReactComponent<DocumentIconProps> { @observable _hovered = false; + constructor(props: any) { + super(props); + makeObservable(this); + } + static get DocViews() { - return LightboxView.LightboxDoc ? DocumentManager.Instance.DocumentViews.filter(v => LightboxView.IsLightboxDocView(v.props.docViewPath())) : DocumentManager.Instance.DocumentViews; + return LightboxView.LightboxDoc ? DocumentManager.Instance.DocumentViews.filter(v => LightboxView.Contains(v)) : DocumentManager.Instance.DocumentViews; } render() { - const view = this.props.view; - const { left, top, right, bottom } = view.getBounds() || { left: 0, top: 0, right: 0, bottom: 0 }; + const view = this._props.view; + const { left, top, right, bottom } = view.getBounds || { left: 0, top: 0, right: 0, bottom: 0 }; return ( <div @@ -33,8 +43,8 @@ export class DocumentIcon extends React.Component<{ view: DocumentView; index: n background: SettingsManager.userBackgroundColor, transform: `translate(${(left + right) / 2}px, ${top}px)`, }}> - <Tooltip title={<>{this.props.view.rootDoc.title}</>}> - <p>d{this.props.index}</p> + <Tooltip title={<>{this._props.view.Document.title}</>}> + <p>d{this._props.index}</p> </Tooltip> </div> ); @@ -59,7 +69,7 @@ export class DocumentIconContainer extends React.Component { const match = node.text.match(/d([0-9]+)/); if (match) { const m = parseInt(match[1]); - const doc = DocumentIcon.DocViews[m].rootDoc; + const doc = DocumentIcon.DocViews[m].Document; usedDocuments.add(m); return factory.createIdentifier(`idToDoc("${doc[Id]}")`); } @@ -74,7 +84,7 @@ export class DocumentIconContainer extends React.Component { getVars() { const docs = DocumentIcon.DocViews; const capturedVariables: { [name: string]: Field } = {}; - usedDocuments.forEach(index => (capturedVariables[`d${index}`] = docs.length > index ? docs[index].props.Document : `d${index}`)); + usedDocuments.forEach(index => (capturedVariables[`d${index}`] = docs.length > index ? docs[index].Document : `d${index}`)); return capturedVariables; }, }; diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss index 6da0b73ba..b32b27e65 100644 --- a/src/client/views/nodes/DocumentLinksButton.scss +++ b/src/client/views/nodes/DocumentLinksButton.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.scss'; +@import '../global/globalCssVariables.module.scss'; .documentLinksButton-wrapper { transform-origin: top left; diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index 4db0bf5fa..d1805308d 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -1,22 +1,23 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Tooltip } from '@material-ui/core'; -import { action, computed, observable, runInAction } from 'mobx'; +import { Tooltip } from '@mui/material'; +import { action, computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; -import { Doc, Opt } from '../../../fields/Doc'; +import * as React from 'react'; +import { StopEvent, emptyFunction, returnFalse, setupMoveUpEvents } from '../../../Utils'; +import { Doc } from '../../../fields/Doc'; import { StrCast } from '../../../fields/Types'; -import { emptyFunction, returnFalse, setupMoveUpEvents, StopEvent } from '../../../Utils'; import { DocUtils } from '../../documents/Documents'; import { DragManager } from '../../util/DragManager'; import { Hypothesis } from '../../util/HypothesisUtils'; import { LinkManager } from '../../util/LinkManager'; -import { undoable, undoBatch, UndoManager } from '../../util/UndoManager'; +import { UndoManager, undoBatch } from '../../util/UndoManager'; +import { ObservableReactComponent } from '../ObservableReactComponent'; import './DocumentLinksButton.scss'; import { DocumentView } from './DocumentView'; import { LinkDescriptionPopup } from './LinkDescriptionPopup'; import { TaskCompletionBox } from './TaskCompletedBox'; -import React = require('react'); -import _ = require('lodash'); import { PinProps } from './trails'; +import { DocData } from '../../../fields/DocSymbols'; interface DocumentLinksButtonProps { View: DocumentView; @@ -27,26 +28,45 @@ interface DocumentLinksButtonProps { StartLink?: boolean; //whether the link HAS been started (i.e. now needs to be completed) ShowCount?: boolean; scaling?: () => number; // how uch doc is scaled so that link buttons can invert it + hideCount?: () => boolean; +} + +export class DocButtonState { + @observable public StartLink: Doc | undefined = undefined; //origin's Doc, if defined + @observable public StartLinkView: DocumentView | undefined = undefined; + @observable public AnnotationId: string | undefined = undefined; + @observable public AnnotationUri: string | undefined = undefined; + @observable public LinkEditorDocView: DocumentView | undefined = undefined; + public static _instance: DocButtonState | undefined; + public static get Instance() { + return DocButtonState._instance ?? (DocButtonState._instance = new DocButtonState()); + } + constructor() { + makeObservable(this); + } } @observer -export class DocumentLinksButton extends React.Component<DocumentLinksButtonProps, {}> { +export class DocumentLinksButton extends ObservableReactComponent<DocumentLinksButtonProps> { private _linkButton = React.createRef<HTMLDivElement>(); - @observable public static StartLink: Doc | undefined; //origin's Doc, if defined - @observable public static StartLinkView: DocumentView | undefined; - @observable public static AnnotationId: string | undefined; - @observable public static AnnotationUri: string | undefined; - @observable public static LinkEditorDocView: DocumentView | undefined; + public static get StartLink() { return DocButtonState.Instance.StartLink; } // prettier-ignore + public static set StartLink(value) { runInAction(() => (DocButtonState.Instance.StartLink = value)); } // prettier-ignore + @observable public static StartLinkView: DocumentView | undefined = undefined; + @observable public static AnnotationId: string | undefined = undefined; + @observable public static AnnotationUri: string | undefined = undefined; + constructor(props: any) { + super(props); + makeObservable(this); + } - @action @undoBatch onLinkButtonMoved = (e: PointerEvent) => { - if (this.props.InMenu && this.props.StartLink) { + if (this._props.InMenu && this._props.StartLink) { if (this._linkButton.current !== null) { const linkDrag = UndoManager.StartBatch('Drag Link'); - this.props.View && - DragManager.StartLinkDrag(this._linkButton.current, this.props.View, this.props.View.ComponentView?.getAnchor, e.pageX, e.pageY, { + this._props.View && + DragManager.StartLinkDrag(this._linkButton.current, this._props.View, this._props.View.ComponentView?.getAnchor, e.pageX, e.pageY, { dragComplete: dropEv => { - if (this.props.View && dropEv.linkDocument) { + if (this._props.View && dropEv.linkDocument) { // dropEv.linkDocument equivalent to !dropEve.aborted since linkDocument is only assigned on a completed drop !dropEv.linkDocument.link_relationship && (Doc.GetProto(dropEv.linkDocument).link_relationship = 'hyperlink'); } @@ -68,11 +88,11 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp this.onLinkButtonMoved, emptyFunction, action((e, doubleTap) => { - doubleTap && DocumentView.showBackLinks(this.props.View.rootDoc); + doubleTap && DocumentView.showBackLinks(this._props.View.Document); }), undefined, undefined, - action(() => (DocumentLinksButton.LinkEditorDocView = this.props.View)) + action(() => (DocButtonState.Instance.LinkEditorDocView = this._props.View)) ); }; @@ -83,33 +103,32 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp this.onLinkButtonMoved, emptyFunction, action((e, doubleTap) => { - if (doubleTap && this.props.InMenu && this.props.StartLink) { - //action(() => Doc.BrushDoc(this.props.View.Document)); - if (DocumentLinksButton.StartLink === this.props.View.props.Document) { + if (doubleTap && this._props.InMenu && this._props.StartLink) { + //action(() => Doc.BrushDoc(this._props.View.Document)); + if (DocumentLinksButton.StartLink === this._props.View.Document) { DocumentLinksButton.StartLink = undefined; DocumentLinksButton.StartLinkView = undefined; } else { - DocumentLinksButton.StartLink = this.props.View.props.Document; - DocumentLinksButton.StartLinkView = this.props.View; + DocumentLinksButton.StartLink = this._props.View.Document; + DocumentLinksButton.StartLinkView = this._props.View; } } }) ); }; - @action @undoBatch onLinkClick = (e: React.MouseEvent): void => { - if (this.props.InMenu && this.props.StartLink) { + if (this._props.InMenu && this._props.StartLink) { DocumentLinksButton.AnnotationId = undefined; DocumentLinksButton.AnnotationUri = undefined; - if (DocumentLinksButton.StartLink === this.props.View.props.Document) { + if (DocumentLinksButton.StartLink === this._props.View.Document) { DocumentLinksButton.StartLink = undefined; DocumentLinksButton.StartLinkView = undefined; } else { //if this LinkButton's Document is undefined - DocumentLinksButton.StartLink = this.props.View.props.Document; - DocumentLinksButton.StartLinkView = this.props.View; + DocumentLinksButton.StartLink = this._props.View.Document; + DocumentLinksButton.StartLinkView = this._props.View; } } }; @@ -120,7 +139,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp e, returnFalse, emptyFunction, - action(e => DocumentLinksButton.finishLinkClick(e.clientX, e.clientY, DocumentLinksButton.StartLink, this.props.View.props.Document, true, this.props.View)) + action(e => DocumentLinksButton.finishLinkClick(e.clientX, e.clientY, DocumentLinksButton.StartLink, this._props.View.Document, true, this._props.View)) ); }; @@ -132,49 +151,48 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp DocumentLinksButton.StartLinkView = undefined; DocumentLinksButton.AnnotationId = undefined; DocumentLinksButton.AnnotationUri = undefined; - //!this.props.StartLink + //!this._props.StartLink } else if (startLink !== endLink) { - endLink = endLinkView?.docView?._componentView?.getAnchor?.(true, pinProps) || endLink; - startLink = DocumentLinksButton.StartLinkView?.docView?._componentView?.getAnchor?.(true) || startLink; + endLink = endLinkView?.ComponentView?.getAnchor?.(true, pinProps) || endLink; + startLink = DocumentLinksButton.StartLinkView?.ComponentView?.getAnchor?.(true) || startLink; const linkDoc = DocUtils.MakeLink(startLink, endLink, { link_relationship: DocumentLinksButton.AnnotationId ? 'hypothes.is annotation' : undefined }); LinkManager.currentLink = linkDoc; - if (DocumentLinksButton.AnnotationId && DocumentLinksButton.AnnotationUri) { - // if linking from a Hypothes.is annotation - Doc.GetProto(linkDoc as Doc).linksToAnnotation = true; - Doc.GetProto(linkDoc as Doc).annotationId = DocumentLinksButton.AnnotationId; - Doc.GetProto(linkDoc as Doc).annotationUri = DocumentLinksButton.AnnotationUri; - const dashHyperlink = Doc.globalServerPath(startIsAnnotation ? endLink : startLink); - Hypothesis.makeLink(StrCast(startIsAnnotation ? endLink.title : startLink.title), dashHyperlink, DocumentLinksButton.AnnotationId, startIsAnnotation ? startLink : endLink); // edit annotation to add a Dash hyperlink to the linked doc - } - if (linkDoc) { + if (DocumentLinksButton.AnnotationId && DocumentLinksButton.AnnotationUri) { + // if linking from a Hypothes.is annotation + const linkDocData = linkDoc[DocData]; + linkDocData.linksToAnnotation = true; + linkDocData.annotationId = DocumentLinksButton.AnnotationId; + linkDocData.annotationUri = DocumentLinksButton.AnnotationUri; + const dashHyperlink = Doc.globalServerPath(startIsAnnotation ? endLink : startLink); + Hypothesis.makeLink(StrCast(startIsAnnotation ? endLink.title : startLink.title), dashHyperlink, DocumentLinksButton.AnnotationId, startIsAnnotation ? startLink : endLink); // edit annotation to add a Dash hyperlink to the linked doc + } + TaskCompletionBox.textDisplayed = 'Link Created'; TaskCompletionBox.popupX = screenX; TaskCompletionBox.popupY = screenY - 133; TaskCompletionBox.taskCompleted = true; - if (LinkDescriptionPopup.showDescriptions === 'ON' || !LinkDescriptionPopup.showDescriptions) { - LinkDescriptionPopup.popupX = screenX; - LinkDescriptionPopup.popupY = screenY - 100; - LinkDescriptionPopup.descriptionPopup = true; + if (LinkDescriptionPopup.Instance.showDescriptions === 'ON' || !LinkDescriptionPopup.Instance.showDescriptions) { + LinkDescriptionPopup.Instance.popupX = screenX; + LinkDescriptionPopup.Instance.popupY = screenY - 100; + LinkDescriptionPopup.Instance.display = true; } const rect = document.body.getBoundingClientRect(); - if (LinkDescriptionPopup.popupX + 200 > rect.width) { - LinkDescriptionPopup.popupX -= 190; + if (LinkDescriptionPopup.Instance.popupX + 200 > rect.width) { + LinkDescriptionPopup.Instance.popupX -= 190; TaskCompletionBox.popupX -= 40; } - if (LinkDescriptionPopup.popupY + 100 > rect.height) { - LinkDescriptionPopup.popupY -= 40; + if (LinkDescriptionPopup.Instance.popupY + 100 > rect.height) { + LinkDescriptionPopup.Instance.popupY -= 40; TaskCompletionBox.popupY -= 40; } setTimeout( - action(() => { - TaskCompletionBox.taskCompleted = false; - }), + action(() => (TaskCompletionBox.taskCompleted = false)), 2500 ); } @@ -189,8 +207,8 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp @computed get filteredLinks() { const results = [] as Doc[]; - const filters = this.props.View.props.childFilters(); - Array.from(new Set<Doc>(this.props.View.allLinks)).forEach(link => { + const filters = this._props.View._props.childFilters(); + Array.from(new Set<Doc>(this._props.View.allLinks)).forEach(link => { if (DocUtils.FilterDocs([link], filters, []).length || DocUtils.FilterDocs([link.link_anchor_2 as Doc], filters, []).length || DocUtils.FilterDocs([link.link_anchor_1 as Doc], filters, []).length) { results.push(link); } @@ -205,8 +223,8 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp */ @computed get linkButtonInner() { const btnDim = 30; - const isActive = DocumentLinksButton.StartLink === this.props.View.props.Document && this.props.StartLink; - const scaling = Math.min(1, this.props.scaling?.() || 1); + const isActive = DocumentLinksButton.StartLink === this._props.View.Document && this._props.StartLink; + const scaling = Math.min(1, this._props.scaling?.() || 1); const showLinkCount = (onHover?: boolean, offset?: boolean) => ( <div className="documentLinksButton-showCount" @@ -220,16 +238,16 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp <span style={{ width: '100%', display: 'inline-block', textAlign: 'center' }}>{Array.from(this.filteredLinks).length}</span> </div> ); - return this.props.ShowCount ? ( - showLinkCount(this.props.OnHover, this.props.Bottom) + return this._props.ShowCount ? ( + showLinkCount(this._props.OnHover, this._props.Bottom) ) : ( <div className="documentLinksButton-menu"> - {this.props.StartLink ? ( //if link has been started from current node, then set behavior of link button to deactivate linking when clicked again + {this._props.StartLink ? ( //if link has been started from current node, then set behavior of link button to deactivate linking when clicked again <div className={`documentLinksButton ${isActive ? `startLink` : ``}`} ref={this._linkButton} onPointerDown={isActive ? StopEvent : this.onLinkButtonDown} onClick={isActive ? this.clearLinks : this.onLinkClick}> <FontAwesomeIcon className="documentdecorations-icon" icon="link" /> </div> ) : null} - {!this.props.StartLink && DocumentLinksButton.StartLink !== this.props.View.props.Document ? ( //if the origin node is not this node + {!this._props.StartLink && DocumentLinksButton.StartLink !== this._props.View.Document ? ( //if the origin node is not this node <div className={'documentLinksButton-endLink'} ref={this._linkButton} onPointerDown={DocumentLinksButton.StartLink && this.completeLink}> <FontAwesomeIcon className="documentdecorations-icon" icon="link" /> </div> @@ -239,20 +257,21 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp } render() { - const menuTitle = this.props.StartLink ? 'Drag or tap to start link' : 'Tap to complete link'; + if (this.props.hideCount?.()) return null; + const menuTitle = this._props.StartLink ? 'Drag or tap to start link' : 'Tap to complete link'; const buttonTitle = 'Tap to view links; double tap to open link collection'; - const title = this.props.ShowCount ? buttonTitle : menuTitle; + const title = this._props.ShowCount ? buttonTitle : menuTitle; //render circular tooltip if it isn't set to invisible and show the number of doc links the node has, and render inner-menu link button for starting/stopping links if currently in menu - return !Array.from(this.filteredLinks).length && !this.props.AlwaysOn ? null : ( + return !Array.from(this.filteredLinks).length && !this._props.AlwaysOn ? null : ( <div className="documentLinksButton-wrapper" style={{ - position: this.props.InMenu ? 'relative' : 'absolute', + position: this._props.InMenu ? 'relative' : 'absolute', top: 0, pointerEvents: 'none', }}> - {DocumentLinksButton.LinkEditorDocView ? this.linkButtonInner : <Tooltip title={<div className="dash-tooltip">{title}</div>}>{this.linkButtonInner}</Tooltip>} + {DocButtonState.Instance.LinkEditorDocView ? this.linkButtonInner : <Tooltip title={<div className="dash-tooltip">{title}</div>}>{this.linkButtonInner}</Tooltip>} </div> ); } diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss index 931594568..c4dab16fb 100644 --- a/src/client/views/nodes/DocumentView.scss +++ b/src/client/views/nodes/DocumentView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; .documentView-effectsWrapper { border-radius: inherit; @@ -61,7 +61,6 @@ .documentView-htmlOverlayInner { box-shadow: black 0.2vw 0.2vw 0.8vw; background: rgb(255, 255, 255); - overflow: auto; position: relative; margin: auto; padding: 20px; @@ -120,6 +119,10 @@ display: flex; justify-content: center; align-items: center; + position: relative; // allows contents to be positioned relative/below title + > .formattedTextBox { + position: absolute; // position a child text box + } .sharingIndicator { height: 30px; @@ -183,12 +186,15 @@ top: 0; width: 100%; height: 14; - background: rgba(0, 0, 0, 0.4); + opacity: 0.5; text-align: center; text-overflow: ellipsis; white-space: pre; position: absolute; display: flex; // this allows title field dropdown to be inline with editable title + &:hover { + opacity: 1; + } } .documentView-titleWrapper-hover { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 3d6b53ccc..8eb354e1e 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1,30 +1,29 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { Dropdown, DropdownType, Type } from 'browndash-components'; -import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx'; +import { Howl } from 'howler'; +import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; -import { computedFn } from 'mobx-utils'; -import { Bounce, Fade, Flip, LightSpeed, Roll, Rotate, Zoom } from 'react-reveal'; +import * as React from 'react'; +import { Bounce, Fade, Flip, JackInTheBox, Roll, Rotate, Zoom } from 'react-awesome-reveal'; +import { Utils, emptyFunction, isTargetChildOf as isParentOf, lightOrDark, returnEmptyString, returnFalse, returnTrue, returnVal, simulateMouseClick } from '../../../Utils'; import { Doc, DocListCast, Field, Opt, StrListCast } from '../../../fields/Doc'; -import { AclPrivate, Animation, AudioPlay, DocData, Width } from '../../../fields/DocSymbols'; +import { AclPrivate, Animation, AudioPlay, DocData, DocViews } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; import { InkTool } from '../../../fields/InkField'; import { List } from '../../../fields/List'; -import { RefField } from '../../../fields/RefField'; import { listSpec } from '../../../fields/Schema'; import { ScriptField } from '../../../fields/ScriptField'; -import { BoolCast, Cast, DocCast, ImageCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types'; +import { BoolCast, Cast, DocCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types'; import { AudioField } from '../../../fields/URLField'; import { GetEffectiveAcl, TraceMobx } from '../../../fields/util'; -import { emptyFunction, isTargetChildOf as isParentOf, lightOrDark, returnEmptyString, returnFalse, returnTrue, returnVal, simulateMouseClick, Utils } from '../../../Utils'; -import { GooglePhotos } from '../../apis/google_docs/GooglePhotosClientUtils'; import { DocServer } from '../../DocServer'; -import { DocOptions, Docs, DocUtils, FInfo } from '../../documents/Documents'; -import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes'; import { Networking } from '../../Network'; +import { GooglePhotos } from '../../apis/google_docs/GooglePhotosClientUtils'; +import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes'; +import { DocOptions, DocUtils, Docs, FInfo } from '../../documents/Documents'; import { DictationManager } from '../../util/DictationManager'; import { DocumentManager } from '../../util/DocumentManager'; import { DragManager, dropActionType } from '../../util/DragManager'; -import { InteractionUtils } from '../../util/InteractionUtils'; import { FollowLinkScript } from '../../util/LinkFollower'; import { LinkManager } from '../../util/LinkManager'; import { ScriptingGlobals } from '../../util/ScriptingGlobals'; @@ -32,38 +31,37 @@ import { SelectionManager } from '../../util/SelectionManager'; import { SettingsManager } from '../../util/SettingsManager'; import { SharingManager } from '../../util/SharingManager'; import { SnappingManager } from '../../util/SnappingManager'; -import { Transform } from '../../util/Transform'; -import { undoBatch, UndoManager } from '../../util/UndoManager'; +import { UndoManager, undoBatch, undoable } from '../../util/UndoManager'; import { ContextMenu } from '../ContextMenu'; import { ContextMenuProps } from '../ContextMenuItem'; -import { DocComponent } from '../DocComponent'; +import { DocComponent, ViewBoxInterface } from '../DocComponent'; import { EditableView } from '../EditableView'; import { GestureOverlay } from '../GestureOverlay'; import { LightboxView } from '../LightboxView'; import { StyleProp } from '../StyleProvider'; -import { UndoStack } from '../UndoStack'; -import { CollectionFreeFormDocumentView } from './CollectionFreeFormDocumentView'; import { DocumentContentsView, ObserverJsxParser } from './DocumentContentsView'; import { DocumentLinksButton } from './DocumentLinksButton'; import './DocumentView.scss'; -import { FieldViewProps } from './FieldView'; -import { FormattedTextBox } from './formattedText/FormattedTextBox'; +import { FieldViewProps, FieldViewSharedProps } from './FieldView'; import { KeyValueBox } from './KeyValueBox'; import { LinkAnchorBox } from './LinkAnchorBox'; +import { FormattedTextBox } from './formattedText/FormattedTextBox'; import { PresEffect, PresEffectDirection } from './trails'; -import { PinProps, PresBox } from './trails/PresBox'; -import React = require('react'); -const { Howl } = require('howler'); - interface Window { MediaRecorder: MediaRecorder; } - declare class MediaRecorder { - // whatever MediaRecorder has - constructor(e: any); + constructor(e: any); // whatever MediaRecorder has } +export enum OpenWhereMod { + none = '', + left = 'left', + right = 'right', + top = 'top', + bottom = 'bottom', + keyvalue = 'keyValue', +} export enum OpenWhere { lightbox = 'lightbox', add = 'add', @@ -79,136 +77,13 @@ export enum OpenWhere { inParent = 'inParent', inParentFromScreen = 'inParentFromScreen', overlay = 'overlay', -} -export enum OpenWhereMod { - none = '', - left = 'left', - right = 'right', - top = 'top', - bottom = 'bottom', - rightKeyValue = 'rightKeyValue', + addRightKeyvalue = 'add:right:keyValue', } -export interface DocFocusOptions { - willPan?: boolean; // determines whether to pan to target document - willZoomCentered?: boolean; // determines whether to zoom in on target document. if zoomScale is 0, this just centers the document - zoomScale?: number; // percent of containing frame to zoom into document - zoomTime?: number; - didMove?: boolean; // whether a document was changed during the showDocument process - docTransform?: Transform; // when a document can't be panned and zoomed within its own container (say a group), then we need to continue to move up the render hierarchy to find something that can pan and zoom. when this happens the docTransform must accumulate all the transforms of each level of the hierarchy - instant?: boolean; // whether focus should happen instantly (as opposed to smooth zoom) - preview?: boolean; // whether changes should be previewed by the componentView or written to the document - effect?: Doc; // animation effect for focus - noSelect?: boolean; // whether target should be selected after focusing - playAudio?: boolean; // whether to play audio annotation on focus - playMedia?: boolean; // whether to play start target videos - openLocation?: OpenWhere; // where to open a missing document - zoomTextSelections?: boolean; // whether to display a zoomed overlay of anchor text selections - toggleTarget?: boolean; // whether to toggle target on and off - anchorDoc?: Doc; // doc containing anchor info to apply at end of focus to target doc - easeFunc?: 'linear' | 'ease'; // transition method for scrolling -} -export type DocFocusFunc = (doc: Doc, options: DocFocusOptions) => Opt<number>; -export type StyleProviderFunc = (doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string) => any; -export interface DocComponentView { - updateIcon?: () => void; // updates the icon representation of the document - getAnchor?: (addAsAnnotation: boolean, pinData?: PinProps) => Doc; // returns an Anchor Doc that represents the current state of the doc's componentview (e.g., the current playhead location of a an audio/video box) - restoreView?: (viewSpec: Doc) => boolean; - scrollPreview?: (docView: DocumentView, doc: Doc, focusSpeed: number, options: DocFocusOptions) => Opt<number>; // returns the duration of the focus - brushView?: (view: { width: number; height: number; panX: number; panY: number }, transTime: number) => void; // highlight a region of a view (used by freeforms) - getView?: (doc: Doc) => Promise<Opt<DocumentView>>; // returns a nested DocumentView for the specified doc or undefined - addDocTab?: (doc: Doc, where: OpenWhere) => boolean; // determines how to add a document - used in following links to open the target ina local lightbox - addDocument?: (doc: Doc | Doc[], annotationKey?: string) => boolean; // add a document (used only by collections) - reverseNativeScaling?: () => boolean; // DocumentView's setup screenToLocal based on the doc having a nativeWidth/Height. However, some content views (e.g., FreeFormView w/ fitContentsToBox set) may ignore the native dimensions so this flags the DocumentView to not do Nativre scaling. - select?: (ctrlKey: boolean, shiftKey: boolean) => void; - focus?: (textAnchor: Doc, options: DocFocusOptions) => Opt<number>; - menuControls?: () => JSX.Element; // controls to display in the top menu bar when the document is selected. - isAnyChildContentActive?: () => boolean; // is any child content of the document active - onClickScriptDisable?: () => 'never' | 'always'; // disable click scripts : never, always, or undefined = only when selected - getKeyFrameEditing?: () => boolean; // whether the document is in keyframe editing mode (if it is, then all hidden documents that are not active at the keyframe time will still be shown) - setKeyFrameEditing?: (set: boolean) => void; // whether the document is in keyframe editing mode (if it is, then all hidden documents that are not active at the keyframe time will still be shown) - playFrom?: (time: number, endTime?: number) => void; - Pause?: () => void; // pause a media document (eg, audio/video) - IsPlaying?: () => boolean; // is a media document playing - TogglePause?: (keep?: boolean) => void; // toggle media document playing state - setFocus?: () => void; // sets input focus to the componentView - setData?: (data: Field | Promise<RefField | undefined>) => boolean; - componentUI?: (boundsLeft: number, boundsTop: number) => JSX.Element | null; - incrementalRendering?: () => void; - layout_fitWidth?: () => boolean; // whether the component always fits width (eg, KeyValueBox) - overridePointerEvents?: () => 'all' | 'none' | undefined; // if the conmponent overrides the pointer events for the document - fieldKey?: string; - annotationKey?: string; - getTitle?: () => string; - getCenter?: (xf: Transform) => { X: number; Y: number }; - screenBounds?: () => { left: number; top: number; right: number; bottom: number; center?: { X: number; Y: number } }; - ptToScreen?: (pt: { X: number; Y: number }) => { X: number; Y: number }; - ptFromScreen?: (pt: { X: number; Y: number }) => { X: number; Y: number }; - snapPt?: (pt: { X: number; Y: number }, excludeSegs?: number[]) => { nearestPt: { X: number; Y: number }; distance: number }; - search?: (str: string, bwd?: boolean, clear?: boolean) => boolean; -} -// These props are passed to both FieldViews and DocumentViews -export interface DocumentViewSharedProps { - fieldKey?: string; // only used by FieldViews but helpful here to allow styleProviders to access fieldKey of FieldViewProps. In priniciple, passing a fieldKey to a documentView could override or be the default fieldKey for fieldViews - DocumentView?: () => DocumentView; - renderDepth: number; - Document: Doc; - DataDoc?: Doc; - fitContentsToBox?: () => boolean; // used by freeformview to fit its contents to its panel. corresponds to _freeform_fitContentsToBox property on a Document - isGroupActive?: () => string | undefined; // is this document part of a group that is active - suppressSetHeight?: boolean; - setContentView?: (view: DocComponentView) => any; - CollectionFreeFormDocumentView?: () => CollectionFreeFormDocumentView; - PanelWidth: () => number; - PanelHeight: () => number; - shouldNotScale?: () => boolean; - docViewPath: () => DocumentView[]; - childHideDecorationTitle?: () => boolean; - childHideResizeHandles?: () => boolean; - childDragAction?: dropActionType; // allows child documents to be dragged out of collection without holding the embedKey or dragging the doc decorations title bar. - dataTransition?: string; // specifies animation transition - used by collectionPile and potentially other layout engines when changing the size of documents so that the change won't be abrupt - styleProvider: Opt<StyleProviderFunc>; - setTitleFocus?: () => void; - focus: DocFocusFunc; - layout_fitWidth?: (doc: Doc) => boolean | undefined; - childFilters: () => string[]; - childFiltersByRanges: () => string[]; - searchFilterDocs: () => Doc[]; - layout_showTitle?: () => string; - whenChildContentsActiveChanged: (isActive: boolean) => void; - rootSelected: (outsideReaction?: boolean) => boolean; // whether the root of a template has been selected - addDocTab: (doc: Doc, where: OpenWhere) => boolean; - filterAddDocument?: (doc: Doc[]) => boolean; // allows a document that renders a Collection view to filter or modify any documents added to the collection (see PresBox for an example) - addDocument?: (doc: Doc | Doc[], annotationKey?: string) => boolean; - removeDocument?: (doc: Doc | Doc[], annotationKey?: string) => boolean; - moveDocument?: (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[], annotationKey?: string) => boolean) => boolean; - pinToPres: (document: Doc, pinProps: PinProps) => void; - ScreenToLocalTransform: () => Transform; - bringToFront: (doc: Doc, sendToBack?: boolean) => void; - dragAction?: dropActionType; - treeViewDoc?: Doc; - xPadding?: number; - yPadding?: number; - dropAction?: dropActionType; - dontRegisterView?: boolean; - hideLinkButton?: boolean; - hideCaptions?: boolean; - ignoreAutoHeight?: boolean; - forceAutoHeight?: boolean; - disableBrushing?: boolean; // should highlighting for this view be disabled when same document in another view is hovered over. - onClickScriptDisable?: 'never' | 'always'; // undefined = only when selected - waitForDoubleClickToClick?: () => 'never' | 'always' | undefined; - defaultDoubleClick?: () => 'default' | 'ignore' | undefined; - pointerEvents?: () => Opt<string>; - scriptContext?: any; // can be assigned anything and will be passed as 'scriptContext' to any OnClick script that executes on this document - createNewFilterDoc?: () => void; - updateFilterDoc?: (doc: Doc) => void; - dontHideOnDrag?: boolean; +export function returnEmptyDocViewList() { + return [] as DocumentView[]; } - -// these props are specific to DocuentViews -export interface DocumentViewProps extends DocumentViewSharedProps { - // properties specific to DocumentViews but not to FieldView +export interface DocumentViewProps extends FieldViewSharedProps { hideDecorations?: boolean; // whether to suppress all DocumentDecorations when doc is selected hideResizeHandles?: boolean; // whether to suppress resized handles on doc decorations when this document is selected hideTitle?: boolean; // forces suppression of title. e.g, treeView document labels suppress titles in case they are globally active via settings @@ -217,38 +92,35 @@ export interface DocumentViewProps extends DocumentViewSharedProps { hideOpenButton?: boolean; hideDeleteButton?: boolean; hideLinkAnchors?: boolean; - isDocumentActive?: () => boolean | undefined; // whether a document should handle pointer events - isContentActive: () => boolean | undefined; // whether document contents should handle pointer events + hideLinkButton?: boolean; + hideCaptions?: boolean; contentPointerEvents?: 'none' | 'all' | undefined; // pointer events allowed for content of a document view. eg. set to "none" in menuSidebar for sharedDocs so that you can select a document, but not interact with its contents - radialMenu?: String[]; - LayoutTemplateString?: string; dontCenter?: 'x' | 'y' | 'xy'; + childHideDecorationTitle?: boolean; + childHideResizeHandles?: boolean; + childDragAction?: dropActionType; // allows child documents to be dragged out of collection without holding the embedKey or dragging the doc decorations title bar. + dragWhenActive?: boolean; + dontHideOnDrag?: boolean; + suppressSetHeight?: boolean; + onClickScriptDisable?: 'never' | 'always'; // undefined = only when selected NativeWidth?: () => number; NativeHeight?: () => number; - NativeDimScaling?: () => number; // scaling the DocumentView does to transform its contents into its panel & needed by ScreenToLocal NOTE: Must also be added to FieldViewProps - LayoutTemplate?: () => Opt<Doc>; contextMenuItems?: () => { script: ScriptField; filter?: ScriptField; label: string; icon: string }[]; - onClick?: () => ScriptField; - onDoubleClick?: () => ScriptField; - onPointerDown?: () => ScriptField; - onPointerUp?: () => ScriptField; - onBrowseClick?: () => ScriptField | undefined; - onKey?: (e: React.KeyboardEvent, fieldProps: FieldViewProps) => boolean | undefined; -} - -// these props are only available in DocumentViewIntenral -export interface DocumentViewInternalProps extends DocumentViewProps { - NativeWidth: () => number; - NativeHeight: () => number; - isSelected: (outsideReaction?: boolean) => boolean; - select: (ctrlPressed: boolean, shiftPress?: boolean) => void; - DocumentView: () => DocumentView; - viewPath: () => DocumentView[]; + dragStarting?: () => void; + dragEnding?: () => void; } - @observer -export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps>() { +export class DocumentViewInternal extends DocComponent<FieldViewProps & DocumentViewProps>() { + // this makes mobx trace() statements more descriptive + public get displayName() { return 'DocumentViewInternal(' + this.Document.title + ')'; } // prettier-ignore public static SelectAfterContextMenu = true; // whether a document should be selected after it's contextmenu is triggered. + + /** + * This function is filled in by MainView to allow non-viewBox views to add Docs as tabs without + * needing to know about/reference MainView + */ + public static addDocTabFunc: (doc: Doc, location: OpenWhere) => boolean = returnFalse; + private _disposers: { [name: string]: IReactionDisposer } = {}; private _doubleClickTimeout: NodeJS.Timeout | undefined; private _singleClickFunc: undefined | (() => any); @@ -261,76 +133,53 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps private _mainCont = React.createRef<HTMLDivElement>(); private _titleRef = React.createRef<EditableView>(); private _dropDisposer?: DragManager.DragDropDisposer; - private _holdDisposer?: InteractionUtils.MultiTouchEventDisposer; - protected _multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer; + constructor(props: FieldViewProps & DocumentViewProps) { + super(props); + makeObservable(this); + } - @observable _componentView: Opt<DocComponentView>; // needs to be accessed from DocumentView wrapper class - @observable _animateScaleTime: Opt<number>; // milliseconds for animating between views. defaults to 300 if not uset + @observable _changingTitleField = false; + @observable _titleDropDownInnerWidth = 0; // width of menu dropdown when setting doc title + @observable _mounted = false; // turn off all pointer events if component isn't yet mounted (enables nested Docs in alternate UI textboxes that appear on hover which otherwise would grab focus from the text box, reverting to the original UI ) + @observable _isContentActive: boolean | undefined = undefined; + @observable _pointerEvents: 'none' | 'all' | 'visiblePainted' | undefined = undefined; + @observable _componentView: Opt<ViewBoxInterface> = undefined; // needs to be accessed from DocumentView wrapper class + @observable _animateScaleTime: Opt<number> = undefined; // milliseconds for animating between views. defaults to 300 if not uset @observable _animateScalingTo = 0; - public get animateScaleTime() { - return this._animateScaleTime ?? 100; - } - public get displayName() { - return 'DocumentView(' + this.props.Document.title + ')'; - } // this makes mobx trace() statements more descriptive - public get ContentDiv() { - return this._mainCont.current; - } - public get LayoutFieldKey() { - return Doc.LayoutFieldKey(this.layoutDoc); - } - @computed get layout_showTitle() { - return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.ShowTitle) as Opt<string>; - } - @computed get NativeDimScaling() { - return this.props.NativeDimScaling?.() || 1; - } - @computed get thumb() { - return ImageCast(this.layoutDoc['thumb-frozen'], ImageCast(this.layoutDoc.thumb))?.url?.href.replace('.png', '_m.png'); - } - @computed get opacity() { - return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Opacity); - } - @computed get boxShadow() { - return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BoxShadow); - } - @computed get borderRounding() { - return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BorderRounding); - } - @computed get widgetDecorations() { - TraceMobx(); - return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Decorations); - } - @computed get backgroundBoxColor() { - return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor + ':box'); - } - @computed get docContents() { - return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.DocContents); - } - @computed get headerMargin() { - return this.props?.styleProvider?.(this.layoutDoc, this.props, StyleProp.HeaderMargin) || 0; - } - @computed get layout_showCaption() { - return this.props?.styleProvider?.(this.layoutDoc, this.props, StyleProp.ShowCaption) || 0; - } - @computed get titleHeight() { - return this.props?.styleProvider?.(this.layoutDoc, this.props, StyleProp.TitleHeight) || 0; - } - @computed get pointerEvents(): 'none' | 'all' | 'visiblePainted' | undefined { - return this.props.styleProvider?.(this.Document, this.props, StyleProp.PointerEvents); + get _contentDiv() { return this._mainCont.current; } // prettier-ignore + get _docView() { return this._props.DocumentView?.(); } // prettier-ignore + + animateScaleTime = () => this._animateScaleTime ?? 100; + style = (doc: Doc, sprop: StyleProp | string) => this._props.styleProvider?.(doc, this._props, sprop); + @computed get layout_showTitle() { return this.style(this.layoutDoc, StyleProp.ShowTitle) as Opt<string>; } // prettier-ignore + @computed get opacity() { return this.style(this.layoutDoc, StyleProp.Opacity); } // prettier-ignore + @computed get boxShadow() { return this.style(this.layoutDoc, StyleProp.BoxShadow); } // prettier-ignore + @computed get borderRounding() { return this.style(this.layoutDoc, StyleProp.BorderRounding); } // prettier-ignore + @computed get widgetDecorations() { return this.style(this.layoutDoc, StyleProp.Decorations); } // prettier-ignore + @computed get backgroundBoxColor() { return this.style(this.layoutDoc, StyleProp.BackgroundColor + ':box'); } // prettier-ignore + @computed get headerMargin() { return this.style(this.layoutDoc, StyleProp.HeaderMargin) ?? 0; } // prettier-ignore + @computed get layout_showCaption() { return this.style(this.layoutDoc, StyleProp.ShowCaption) ?? 0; } // prettier-ignore + @computed get titleHeight() { return this.style(this.layoutDoc, StyleProp.TitleHeight) ?? 0; } // prettier-ignore + @computed get docContents() { return this.style(this.Document, StyleProp.DocContents); } // prettier-ignore + @computed get highlighting() { return this.style(this.Document, StyleProp.Highlighting); } // prettier-ignore + @computed get borderPath() { return this.style(this.Document, StyleProp.BorderPath); } // prettier-ignore + + @computed get onClickHandler() { + return this._props.onClickScript?.() ?? this._props.onBrowseClickScript?.() ?? ScriptCast(this.Document.onClick, ScriptCast(this.layoutDoc.onClick)); } - @computed get finalLayoutKey() { - return StrCast(this.Document.layout_fieldKey, 'layout'); + @computed get onDoubleClickHandler() { + return this._props.onDoubleClickScript?.() ?? ScriptCast(this.layoutDoc.onDoubleClick, ScriptCast(this.Document.onDoubleClick)); } - @computed get nativeWidth() { - return this.props.NativeWidth(); + @computed get onPointerDownHandler() { + return this._props.onPointerDownScript?.() ?? ScriptCast(this.layoutDoc.onPointerDown, ScriptCast(this.Document.onPointerDown)); } - @computed get nativeHeight() { - return this.props.NativeHeight(); + @computed get onPointerUpHandler() { + return this._props.onPointerUpScript?.() ?? ScriptCast(this.layoutDoc.onPointerUp, ScriptCast(this.Document.onPointerUp)); } + @computed get disableClickScriptFunc() { - const onScriptDisable = this.props.onClickScriptDisable ?? this._componentView?.onClickScriptDisable?.() ?? this.layoutDoc.onClickScriptDisable; + const onScriptDisable = this._props.onClickScriptDisable ?? this._componentView?.onClickScriptDisable?.() ?? this.layoutDoc.onClickScriptDisable; // prettier-ignore return ( DocumentView.LongPress || @@ -338,116 +187,148 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps (onScriptDisable !== 'never' && (this.rootSelected() || this._componentView?.isAnyChildContentActive?.())) ); } - @computed get onClickHandler() { - return this.props.onClick?.() ?? this.props.onBrowseClick?.() ?? Cast(this.Document.onClick, ScriptField, Cast(this.layoutDoc.onClick, ScriptField, null)); + @computed get _rootSelected() { + return this._props.isSelected() || BoolCast(this._props.TemplateDataDocument && this._props.rootSelected?.()); } - @computed get onDoubleClickHandler() { - return this.props.onDoubleClick?.() ?? Cast(this.layoutDoc.onDoubleClick, ScriptField, null) ?? this.Document.onDoubleClick; + /// disable pointer events on content when there's an enabled onClick script (but not the browse script) and the contents aren't forced active, or if contents are marked inactive + @computed get _contentPointerEvents() { + TraceMobx(); + return this._props.contentPointerEvents ?? + ((!this.disableClickScriptFunc && // + this.onClickHandler && + !this._props.onBrowseClickScript?.() && + this.isContentActive() !== true) || + this.isContentActive() === false) + ? 'none' + : this._pointerEvents; } - @computed get onPointerDownHandler() { - return this.props.onPointerDown?.() ?? ScriptCast(this.Document.onPointerDown); + + // We need to use allrelatedLinks to get not just links to the document as a whole, but links to + // anchors that are not rendered as DocumentViews (marked as 'layout_unrendered' with their 'annotationOn' set to this document). e.g., + // - PDF text regions are rendered as an Annotations without generating a DocumentView, ' + // - RTF selections are rendered via Prosemirror and have a mark which contains the Document ID for the annotation link + // - and links to PDF/Web docs at a certain scroll location never create an explicit view. + // For each of these, we create LinkAnchorBox's on the border of the DocumentView. + @computed get directLinks() { + TraceMobx(); + return LinkManager.Instance.getAllRelatedLinks(this.Document).filter( + link => + (link.link_matchEmbeddings ? link.link_anchor_1 === this.Document : Doc.AreProtosEqual(link.link_anchor_1 as Doc, this.Document)) || + (link.link_matchEmbeddings ? link.link_anchor_2 === this.Document : Doc.AreProtosEqual(link.link_anchor_2 as Doc, this.Document)) || + ((link.link_anchor_1 as Doc)?.layout_unrendered && Doc.AreProtosEqual((link.link_anchor_1 as Doc)?.annotationOn as Doc, this.Document)) || + ((link.link_anchor_2 as Doc)?.layout_unrendered && Doc.AreProtosEqual((link.link_anchor_2 as Doc)?.annotationOn as Doc, this.Document)) + ); } - @computed get onPointerUpHandler() { - return this.props.onPointerUp?.() ?? ScriptCast(this.Document.onPointerUp); + @computed get _allLinks() { + TraceMobx(); + return LinkManager.Instance.getAllRelatedLinks(this.Document).filter(link => !link.link_matchEmbeddings || link.link_anchor_1 === this.Document || link.link_anchor_2 === this.Document); + } + + @computed get filteredLinks() { + return DocUtils.FilterDocs(this.directLinks, this._props.childFilters?.() ?? [], []).filter(d => d.link_displayLine || Doc.UserDoc().showLinkLines); } componentWillUnmount() { this.cleanupHandlers(true); } + componentDidMount() { + runInAction(() => (this._mounted = true)); this.setupHandlers(); + this._disposers.contentActive = reaction( + () => { + // true - if the document has been activated directly or indirectly (by having its children selected) + // false - if its pointer events are explicitly turned off or if it's container tells it that it's inactive + // undefined - it is not active, but it should be responsive to actions that might activate it or its contents (eg clicking) + return this._props.isContentActive() === false || this._props.pointerEvents?.() === 'none' + ? false + : Doc.ActiveTool !== InkTool.None || SnappingManager.CanEmbed || this.rootSelected() || this.Document.forceActive || this._componentView?.isAnyChildContentActive?.() || this._props.isContentActive() + ? true + : undefined; + }, + active => (this._isContentActive = active), + { fireImmediately: true } + ); + this._disposers.pointerevents = reaction( + () => this.style(this.Document, StyleProp.PointerEvents), + pointerevents => (this._pointerEvents = pointerevents), + { fireImmediately: true } + ); } - preDropFunc = (e: Event, de: DragManager.DropEvent) => { - const dropAction = this.layoutDoc.dropAction as dropActionType; - if (de.complete.docDragData && this.isContentActive() && !this.props.treeViewDoc) { - dropAction && (de.complete.docDragData.dropAction = dropAction); + preDrop = (e: Event, de: DragManager.DropEvent, dropAction: dropActionType) => { + const dragData = de.complete.docDragData; + if (dragData && this.isContentActive() && !this.props.dontRegisterView) { + dragData.dropAction = dropAction ? dropAction : dragData.dropAction; e.stopPropagation(); } }; setupHandlers() { this.cleanupHandlers(false); if (this._mainCont.current) { - this._dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, this.drop.bind(this), this.props.Document, this.preDropFunc); - this._multiTouchDisposer = InteractionUtils.MakeMultiTouchTarget(this._mainCont.current, this.onTouchStart.bind(this)); - this._holdDisposer = InteractionUtils.MakeHoldTouchTarget(this._mainCont.current, this.handle1PointerHoldStart.bind(this)); + this._dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, this.drop.bind(this), this.Document, this.preDrop); } } - @action + cleanupHandlers(unbrush: boolean) { this._dropDisposer?.(); - this._multiTouchDisposer?.(); - this._holdDisposer?.(); - unbrush && Doc.UnBrushDoc(this.props.Document); + unbrush && Doc.UnBrushDoc(this.Document); Object.values(this._disposers).forEach(disposer => disposer?.()); } startDragging(x: number, y: number, dropAction: dropActionType, hideSource = false) { - if (this._mainCont.current) { - const views = SelectionManager.Views().filter(dv => dv.docView?._mainCont.current); - const selected = views.some(dv => dv.rootDoc === this.Document) ? views : [this.props.DocumentView()]; - const dragData = new DragManager.DocumentDragData(selected.map(dv => dv.rootDoc)); - const [left, top] = this.props.ScreenToLocalTransform().scale(this.NativeDimScaling).inverse().transformPoint(0, 0); - dragData.offset = this.props - .ScreenToLocalTransform() - .scale(this.NativeDimScaling) - .transformDirection(x - left, y - top); + const docView = this._docView; + if (this._mainCont.current && docView) { + const views = SelectionManager.Views.filter(dv => dv.ContentDiv); + const selected = views.length > 1 && views.some(dv => dv.Document === this.Document) ? views : [docView]; + const dragData = new DragManager.DocumentDragData(selected.map(dv => dv.Document)); + const screenXf = docView.screenToViewTransform(); + const [left, top] = screenXf.inverse().transformPoint(0, 0); + dragData.offset = screenXf.transformDirection(x - left, y - top); dragData.dropAction = dropAction; - dragData.treeViewDoc = this.props.treeViewDoc; - dragData.removeDocument = this.props.removeDocument; - dragData.moveDocument = this.props.moveDocument; - dragData.draggedViews = [this.props.DocumentView()]; - dragData.canEmbed = this.rootDoc.dragAction ?? this.props.dragAction ? true : false; + dragData.removeDocument = this._props.removeDocument; + dragData.moveDocument = this._props.moveDocument; + dragData.draggedViews = [docView]; + dragData.canEmbed = this.Document.dragAction ?? this._props.dragAction ? true : false; + this._componentView?.dragConfig?.(dragData); DragManager.StartDocumentDrag( - selected.map(dv => dv.docView!._mainCont.current!), + selected.map(dv => dv.ContentDiv!), dragData, x, y, - { hideSource: hideSource || (!dropAction && !this.layoutDoc.onDragStart && !this.props.dontHideOnDrag) } + { hideSource: hideSource || (!dropAction && !this.layoutDoc.onDragStart && !this._props.dontHideOnDrag) } ); // this needs to happen after the drop event is processed. } } - defaultRestoreTargetView = (docView: DocumentView, anchor: Doc, focusSpeed: number, options: DocFocusOptions) => { - const targetMatch = - Doc.AreProtosEqual(anchor, this.rootDoc) || // anchor is this document, so anchor's properties apply to this document - (DocCast(anchor)?.layout_unrendered && Doc.AreProtosEqual(DocCast(anchor.annotationOn), this.rootDoc)) // the anchor is an layout_unrendered annotation on this document, so anchor properties apply to this document - ? true - : false; - return targetMatch && PresBox.restoreTargetDocView(docView, anchor, focusSpeed) ? focusSpeed : undefined; - }; - // switches text input focus to the title bar of the document (and displays the title bar if it hadn't been) setTitleFocus = () => { if (!StrCast(this.layoutDoc._layout_showTitle)) this.layoutDoc._layout_showTitle = 'title'; setTimeout(() => this._titleRef.current?.setIsFocused(true)); // use timeout in case title wasn't shown to allow re-render so that titleref will be defined }; - - public static addDocTabFunc: (doc: Doc, location: OpenWhere) => boolean = returnFalse; - onClick = action((e: React.MouseEvent | React.PointerEvent) => { - if (this.props.isGroupActive?.() === 'child' && !this.props.isDocumentActive?.()) return; - if (!this.Document.ignoreClick && this.props.renderDepth >= 0 && Utils.isClick(e.clientX, e.clientY, this._downX, this._downY, this._downTime)) { + if (this._props.isGroupActive?.() === 'child' && !this._props.isDocumentActive?.()) return; + const documentView = this._docView; + if (documentView && !this.Document.ignoreClick && this._props.renderDepth >= 0 && Utils.isClick(e.clientX, e.clientY, this._downX, this._downY, this._downTime)) { let stopPropagate = true; let preventDefault = true; - !this.rootDoc._keepZWhenDragged && this.props.bringToFront(this.rootDoc); + !this.layoutDoc._keepZWhenDragged && this._props.bringToFront?.(this.Document); if (this._doubleTap) { - const defaultDblclick = this.props.defaultDoubleClick?.() || this.Document.defaultDoubleClick; + const defaultDblclick = this._props.defaultDoubleClick?.() || this.Document.defaultDoubleClick; if (this.onDoubleClickHandler?.script) { const { clientX, clientY, shiftKey, altKey, ctrlKey } = e; // or we could call e.persist() to capture variables // prettier-ignore const func = () => this.onDoubleClickHandler.script.run( { - this: this.layoutDoc, - self: this.rootDoc, - scriptContext: this.props.scriptContext, - documentView: this.props.DocumentView(), + this: this.Document, + scriptContext: this._props.scriptContext, + documentView, clientX, clientY, altKey, shiftKey, ctrlKey, value: undefined, }, console.log ); - UndoManager.RunInBatch(() => (func().result?.select === true ? this.props.select(false) : ''), 'on double click'); - } else if (!Doc.IsSystem(this.rootDoc) && (defaultDblclick === undefined || defaultDblclick === 'default')) { - UndoManager.RunInBatch(() => LightboxView.AddDocTab(this.rootDoc, OpenWhere.lightbox), 'double tap'); + UndoManager.RunInBatch(() => (func().result?.select === true ? this._props.select(false) : ''), 'on double click'); + } else if (!Doc.IsSystem(this.Document) && (defaultDblclick === undefined || defaultDblclick === 'default')) { + UndoManager.RunInBatch(() => LightboxView.Instance.AddDocTab(this.Document, OpenWhere.lightbox), 'double tap'); SelectionManager.DeselectAll(); - Doc.UnBrushDoc(this.props.Document); + Doc.UnBrushDoc(this.Document); } else { this._singleClickFunc?.(); } @@ -464,14 +345,13 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps // e.g., if this document is part of a labeled 'lightbox' container, then documents will be shown in place // instead of in the global lightbox const oldFunc = DocumentViewInternal.addDocTabFunc; - DocumentViewInternal.addDocTabFunc = this.props.addDocTab; + DocumentViewInternal.addDocTabFunc = this._props.addDocTab; this.onClickHandler?.script.run( { - this: this.layoutDoc, - self: this.rootDoc, + this: this.Document, _readOnly_: false, - scriptContext: this.props.scriptContext, - documentView: this.props.DocumentView(), + scriptContext: this._props.scriptContext, + documentView, clientX, clientY, shiftKey, @@ -480,14 +360,14 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps }, console.log ).result?.select === true - ? this.props.select(false) + ? this._props.select(false) : ''; DocumentViewInternal.addDocTabFunc = oldFunc; }; - clickFunc = () => UndoManager.RunInBatch(func, 'click ' + this.rootDoc.title); + clickFunc = () => UndoManager.RunInBatch(func, 'click ' + this.Document.title); } else { // onDragStart implies a button doc that we don't want to select when clicking. RootDocument & isTemplateForField implies we're clicking on part of a template instance and we want to select the whole template, not the part - if ((this.layoutDoc.onDragStart || this.props.Document.rootDocument) && !(e.ctrlKey || e.button > 0)) { + if ((this.layoutDoc.onDragStart || this._props.TemplateDataDocument) && !(e.ctrlKey || e.button > 0)) { stopPropagate = false; // don't stop propagation for field templates -- want the selection to propagate up to the root document of the template } preventDefault = false; @@ -495,10 +375,10 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps const sendToBack = e.altKey; this._singleClickFunc = // prettier-ignore - clickFunc ?? (() => (sendToBack ? this.props.DocumentView().props.bringToFront(this.rootDoc, true) : + clickFunc ?? (() => (sendToBack ? documentView._props.bringToFront?.(this.Document, true) : this._componentView?.select?.(e.ctrlKey || e.metaKey, e.shiftKey) ?? - this.props.select(e.ctrlKey||e.shiftKey, e.metaKey))); - const waitFordblclick = this.props.waitForDoubleClickToClick?.() ?? this.Document.waitForDoubleClickToClick; + this._props.select(e.ctrlKey||e.shiftKey, e.metaKey))); + const waitFordblclick = this._props.waitForDoubleClickToClick?.() ?? this.Document.waitForDoubleClickToClick; if ((clickFunc && waitFordblclick !== 'never') || waitFordblclick === 'always') { this._doubleClickTimeout && clearTimeout(this._doubleClickTimeout); this._doubleClickTimeout = setTimeout(this._singleClickFunc, 300); @@ -512,40 +392,31 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps } }); - @action onPointerDown = (e: React.PointerEvent): void => { - if (this.props.isGroupActive?.() === 'child' && !this.props.isDocumentActive?.()) return; - this._longPressSelector = setTimeout(() => { - if (DocumentView.LongPress) { - if (this.rootDoc.undoIgnoreFields) { - runInAction(() => (UndoStack.HideInline = !UndoStack.HideInline)); - } else { - this.props.select(false); - } - } - }, 1000); - if (!GestureOverlay.DownDocView) GestureOverlay.DownDocView = this.props.DocumentView(); + if (this._props.isGroupActive?.() === 'child' && !this._props.isDocumentActive?.()) return; + this._longPressSelector = setTimeout(() => DocumentView.LongPress && this._props.select(false), 1000); + if (!GestureOverlay.DownDocView) GestureOverlay.DownDocView = this._docView; this._downX = e.clientX; this._downY = e.clientY; this._downTime = Date.now(); - if ((Doc.ActiveTool === InkTool.None || this.props.addDocTab === returnFalse) && !(this.props.Document.rootDocument && !(e.ctrlKey || e.button > 0))) { + if ((Doc.ActiveTool === InkTool.None || this._props.addDocTab === returnFalse) && !(this._props.TemplateDataDocument && !(e.ctrlKey || e.button > 0))) { // click events stop here if the document is active and no modes are overriding it // if this is part of a template, let the event go up to the template root unless right/ctrl clicking if ( // prettier-ignore - (this.props.isDocumentActive?.() || this.props.isContentActive?.()) && - !this.props.onBrowseClick?.() && + (this._props.isDocumentActive?.() || this._props.isContentActive?.()) && + !this._props.onBrowseClickScript?.() && !this.Document.ignoreClick && e.button === 0 && !Doc.IsInMyOverlay(this.layoutDoc) ) { e.stopPropagation(); // don't preventDefault anymore. Goldenlayout, PDF text selection and RTF text selection all need it to go though - //if (this.props.isSelected(true) && this.rootDoc.type !== DocumentType.PDF && this.layoutDoc._type_collection !== CollectionViewType.Docking) e.preventDefault(); + //if (this._props.isSelected(true) && this.Document.type !== DocumentType.PDF && this.layoutDoc._type_collection !== CollectionViewType.Docking) e.preventDefault(); // listen to move events if document content isn't active or document is draggable - if (!this.layoutDoc._lockedPosition && (!this.isContentActive() || BoolCast(this.rootDoc._dragWhenActive))) { + if (!this.layoutDoc._lockedPosition && (!this.isContentActive() || BoolCast(this.layoutDoc._dragWhenActive, this._props.dragWhenActive))) { document.addEventListener('pointermove', this.onPointerMove); } } @@ -553,74 +424,69 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps } }; - @action onPointerMove = (e: PointerEvent): void => { if (e.buttons !== 1 || [InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) return; if (!Utils.isClick(e.clientX, e.clientY, this._downX, this._downY, Date.now())) { this.cleanupPointerEvents(); this._longPressSelector && clearTimeout(this._longPressSelector); - this.startDragging(this._downX, this._downY, ((e.ctrlKey || e.altKey) && 'embed') || ((this.Document.dragAction || this.props.dragAction || undefined) as dropActionType)); + this.startDragging(this._downX, this._downY, ((e.ctrlKey || e.altKey) && 'embed') || ((this.Document.dragAction || this._props.dragAction || undefined) as dropActionType)); } }; cleanupPointerEvents = () => { - this.cleanUpInteractions(); document.removeEventListener('pointermove', this.onPointerMove); document.removeEventListener('pointerup', this.onPointerUp); }; - @action onPointerUp = (e: PointerEvent): void => { this.cleanupPointerEvents(); this._longPressSelector && clearTimeout(this._longPressSelector); if (this.onPointerUpHandler?.script) { - this.onPointerUpHandler.script.run({ self: this.rootDoc, this: this.layoutDoc }, console.log); + this.onPointerUpHandler.script.run({ this: this.Document }, console.log); } else if (e.button === 0 && Utils.isClick(e.clientX, e.clientY, this._downX, this._downY, this._downTime)) { - this._doubleTap = (this.onDoubleClickHandler?.script || this.rootDoc.defaultDoubleClick !== 'ignore') && Date.now() - this._lastTap < Utils.CLICK_TIME; + this._doubleTap = (this.onDoubleClickHandler?.script || this.Document.defaultDoubleClick !== 'ignore') && Date.now() - this._lastTap < Utils.CLICK_TIME; if (!this.isContentActive()) this._lastTap = Date.now(); // don't want to process the start of a double tap if the doucment is selected } if (DocumentView.LongPress) e.preventDefault(); }; - @undoBatch - @action - toggleFollowLink = (zoom?: boolean, setTargetToggle?: boolean): void => { - const hadOnClick = this.rootDoc.onClick; + toggleFollowLink = undoable((zoom?: boolean, setTargetToggle?: boolean): void => { + const hadOnClick = this.Document.onClick; this.noOnClick(); this.Document.onClick = hadOnClick ? undefined : FollowLinkScript(); this.Document.waitForDoubleClickToClick = hadOnClick ? undefined : 'never'; - }; - @undoBatch - @action - followLinkOnClick = (): void => { + }, 'toggle follow link'); + + followLinkOnClick = undoable(() => { this.Document.ignoreClick = false; this.Document.onClick = FollowLinkScript(); this.Document.followLinkToggle = false; this.Document.followLinkZoom = false; this.Document.followLinkLocation = undefined; - }; - @undoBatch - noOnClick = (): void => { - this.Document.ignoreClick = false; - this.Document.onClick = Doc.GetProto(this.Document).onClick = undefined; - }; + }, 'follow link on click'); - @undoBatch deleteClicked = () => this.props.removeDocument?.(this.props.Document); - @undoBatch setToggleDetail = () => - (this.Document.onClick = ScriptField.MakeScript( - `toggleDetail(documentView, "${StrCast(this.Document.layout_fieldKey) - .replace('layout_', '') - .replace(/^layout$/, 'detail')}")`, - { documentView: 'any' } - )); - - @undoBatch - @action - drop = (e: Event, de: DragManager.DropEvent) => { - if (this.props.dontRegisterView || this.props.LayoutTemplateString?.includes(LinkAnchorBox.name)) return false; - if (this.props.Document === Doc.ActiveDashboard) { + noOnClick = undoable(() => { + this.Document.ignoreClick = false; + this.Document.onClick = this.Document[DocData].onClick = undefined; + }, 'default on click'); + + deleteClicked = undoable(() => this._props.removeDocument?.(this.Document), 'delete doc'); + setToggleDetail = undoable( + () => + (this.Document.onClick = ScriptField.MakeScript( + `toggleDetail(documentView, "${StrCast(this.Document.layout_fieldKey) + .replace('layout_', '') + .replace(/^layout$/, 'detail')}")`, + { documentView: 'any' } + )), + 'set toggle detail' + ); + + drop = undoable((e: Event, de: DragManager.DropEvent) => { + if (this._props.dontRegisterView || this._props.LayoutTemplateString?.includes(LinkAnchorBox.name)) return false; + if (this.Document === Doc.ActiveDashboard) { e.stopPropagation(); e.preventDefault(); alert( @@ -633,16 +499,16 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps const linkdrag = de.complete.annoDragData ?? de.complete.linkDragData; if (linkdrag) { linkdrag.linkSourceDoc = linkdrag.linkSourceGetAnchor(); - if (linkdrag.linkSourceDoc && linkdrag.linkSourceDoc !== this.rootDoc) { + if (linkdrag.linkSourceDoc && linkdrag.linkSourceDoc !== this.Document) { if (de.complete.annoDragData && !de.complete.annoDragData.dropDocument) { de.complete.annoDragData.dropDocument = de.complete.annoDragData.dropDocCreator(undefined); } - if (de.complete.annoDragData || this.rootDoc !== linkdrag.linkSourceDoc.embedContainer) { - const dropDoc = de.complete.annoDragData?.dropDocument ?? this._componentView?.getAnchor?.(true) ?? this.rootDoc; + if (de.complete.annoDragData || this.Document !== linkdrag.linkSourceDoc.embedContainer) { + const dropDoc = de.complete.annoDragData?.dropDocument ?? this._componentView?.getAnchor?.(true) ?? this.Document; de.complete.linkDocument = DocUtils.MakeLink(linkdrag.linkSourceDoc, dropDoc, {}, undefined, [de.x, de.y - 50]); if (de.complete.linkDocument) { de.complete.linkDocument.layout_isSvg = true; - this.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView.addDocument(de.complete.linkDocument); + this._docView?.CollectionFreeFormView?.addDocument(de.complete.linkDocument); } } e.stopPropagation(); @@ -650,22 +516,26 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps } } return false; - }; + }, 'drop doc'); - @undoBatch - @action - makeIntoPortal = () => { - const portalLink = this.allLinks.find(d => d.link_anchor_1 === this.props.Document && d.link_relationship === 'portal to:portal from'); + makeIntoPortal = undoable(() => { + const portalLink = this._allLinks.find(d => d.link_anchor_1 === this.Document && d.link_relationship === 'portal to:portal from'); if (!portalLink) { DocUtils.MakeLink( - this.props.Document, - Docs.Create.FreeformDocument([], { _width: NumCast(this.layoutDoc._width) + 10, _height: NumCast(this.layoutDoc._height), _isLightbox: true, _layout_fitWidth: true, title: StrCast(this.props.Document.title) + ' [Portal]' }), + this.Document, + Docs.Create.FreeformDocument([], { + _width: NumCast(this.layoutDoc._width) + 10, + _height: Math.max(NumCast(this.layoutDoc._height), NumCast(this.layoutDoc._width) + 10), + _isLightbox: true, + _layout_fitWidth: true, + title: StrCast(this.Document.title) + ' [Portal]', + }), { link_relationship: 'portal to:portal from' } ); } this.Document.followLinkLocation = OpenWhere.lightbox; this.Document.onClick = FollowLinkScript(); - }; + }, 'make into portal'); importDocument = () => { const input = document.createElement('input'); @@ -676,7 +546,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps const batch = UndoManager.StartBatch('importing'); Doc.importDocument(input.files[0]).then(doc => { if (doc instanceof Doc) { - this.props.addDocTab(doc, OpenWhere.addRight); + this._props.addDocTab(doc, OpenWhere.addRight); batch.end(); } }); @@ -685,12 +555,11 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps input.click(); }; - @action onContextMenu = (e?: React.MouseEvent, pageX?: number, pageY?: number) => { - if (e && this.rootDoc._layout_hideContextMenu && Doc.noviceMode) { + if (e && this.layoutDoc._layout_hideContextMenu && Doc.noviceMode) { e.preventDefault(); e.stopPropagation(); - //!this.props.isSelected(true) && SelectionManager.SelectView(this.props.DocumentView(), false); + //!this._props.isSelected(true) && SelectionManager.SelectView(this.DocumentView(), false); } // the touch onContextMenu is button 0, the pointer onContextMenu is button 2 if (e) { @@ -708,11 +577,11 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps } const cm = ContextMenu.Instance; - if (!cm || (e as any)?.nativeEvent?.SchemaHandled || DocumentView.ExploreMode) return; + if (!cm || (e as any)?.nativeEvent?.SchemaHandled || SnappingManager.ExploreMode) return; if (e && !(e.nativeEvent as any).dash) { const onDisplay = () => { - if (this.rootDoc.type !== DocumentType.MAP) DocumentViewInternal.SelectAfterContextMenu && !this.props.isSelected(true) && SelectionManager.SelectView(this.props.DocumentView(), false); // on a mac, the context menu is triggered on mouse down, but a YouTube video becaomes interactive when selected which means that the context menu won't show up. by delaying the selection until hopefully after the pointer up, the context menu will appear. + if (this.Document.type !== DocumentType.MAP) DocumentViewInternal.SelectAfterContextMenu && this._props.select(false); // on a mac, the context menu is triggered on mouse down, but a YouTube video becaomes interactive when selected which means that the context menu won't show up. by delaying the selection until hopefully after the pointer up, the context menu will appear. setTimeout(() => simulateMouseClick(document.elementFromPoint(e.clientX, e.clientY), e.clientX, e.clientY, e.screenX, e.screenY)); }; if (navigator.userAgent.includes('Macintosh')) { @@ -723,59 +592,56 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps return; } - const customScripts = Cast(this.props.Document.contextMenuScripts, listSpec(ScriptField), []); + const customScripts = Cast(this.Document.contextMenuScripts, listSpec(ScriptField), []); StrListCast(this.Document.contextMenuLabels).forEach((label, i) => - cm.addItem({ description: label, event: () => customScripts[i]?.script.run({ documentView: this, this: this.layoutDoc, scriptContext: this.props.scriptContext, self: this.rootDoc }), icon: 'sticky-note' }) + cm.addItem({ description: label, event: () => customScripts[i]?.script.run({ documentView: this, this: this.Document, scriptContext: this._props.scriptContext }), icon: 'sticky-note' }) ); - this.props - .contextMenuItems?.() - .forEach(item => item.label && cm.addItem({ description: item.label, event: () => item.script.script.run({ this: this.layoutDoc, scriptContext: this.props.scriptContext, self: this.rootDoc }), icon: item.icon as IconProp })); + this._props.contextMenuItems?.().forEach(item => item.label && cm.addItem({ description: item.label, event: () => item.script.script.run({ this: this.Document, scriptContext: this._props.scriptContext }), icon: item.icon as IconProp })); - if (!this.props.Document.isFolder) { - const templateDoc = Cast(this.props.Document[StrCast(this.props.Document.layout_fieldKey)], Doc, null); - const appearance = cm.findByDescription('UI Controls...'); + if (!this.Document.isFolder) { + const templateDoc = Cast(this.Document[StrCast(this.Document.layout_fieldKey)], Doc, null); + const appearance = cm.findByDescription('Appearance...'); const appearanceItems: ContextMenuProps[] = appearance && 'subitems' in appearance ? appearance.subitems : []; - if (this.props.renderDepth === 0) { - appearanceItems.push({ description: 'Open in Lightbox', event: () => LightboxView.SetLightboxDoc(this.rootDoc), icon: 'hand-point-right' }); + if (this._props.renderDepth === 0) { + appearanceItems.splice(0, 0, { description: 'Open in Lightbox', event: () => LightboxView.Instance.SetLightboxDoc(this.Document), icon: 'external-link-alt' }); + } + appearanceItems.push({ description: 'Pin', event: () => this._props.pinToPres(this.Document, {}), icon: 'eye' }); + !Doc.noviceMode && templateDoc && appearanceItems.push({ description: 'Open Template ', event: () => this._props.addDocTab(templateDoc, OpenWhere.addRight), icon: 'eye' }); + !appearance && appearanceItems.length && cm.addItem({ description: 'Appearance...', subitems: appearanceItems, icon: 'compass' }); + + if (this._props.bringToFront) { + const zorders = cm.findByDescription('ZOrder...'); + const zorderItems: ContextMenuProps[] = zorders && 'subitems' in zorders ? zorders.subitems : []; + zorderItems.push({ description: 'Bring to Front', event: () => SelectionManager.Views.forEach(dv => dv._props.bringToFront?.(dv.Document, false)), icon: 'arrow-up' }); + zorderItems.push({ description: 'Send to Back', event: () => SelectionManager.Views.forEach(dv => dv._props.bringToFront?.(dv.Document, true)), icon: 'arrow-down' }); + zorderItems.push({ + description: !this.layoutDoc._keepZDragged ? 'Keep ZIndex when dragged' : 'Allow ZIndex to change when dragged', + event: undoBatch(action(() => (this.layoutDoc._keepZWhenDragged = !this.layoutDoc._keepZWhenDragged))), + icon: 'hand-point-up', + }); + !zorders && cm.addItem({ description: 'Z Order...', addDivider: true, noexpand: true, subitems: zorderItems, icon: 'layer-group' }); } - !Doc.noviceMode && templateDoc && appearanceItems.push({ description: 'Open Template ', event: () => this.props.addDocTab(templateDoc, OpenWhere.addRight), icon: 'eye' }); - !appearance && appearanceItems.length && cm.addItem({ description: 'UI Controls...', subitems: appearanceItems, icon: 'compass' }); - if (!Doc.IsSystem(this.rootDoc) && this.rootDoc.type !== DocumentType.PRES && ![CollectionViewType.Docking, CollectionViewType.Tree].includes(this.rootDoc._type_collection as any)) { + if (!Doc.IsSystem(this.Document) && !this.Document.hideClickBehaviors && !this._props.hideClickBehaviors) { const existingOnClick = cm.findByDescription('OnClick...'); const onClicks: ContextMenuProps[] = existingOnClick && 'subitems' in existingOnClick ? existingOnClick.subitems : []; - if (this.props.bringToFront !== emptyFunction) { - const zorders = cm.findByDescription('ZOrder...'); - const zorderItems: ContextMenuProps[] = zorders && 'subitems' in zorders ? zorders.subitems : []; - zorderItems.push({ description: 'Bring to Front', event: () => SelectionManager.Views().forEach(dv => dv.props.bringToFront(dv.rootDoc, false)), icon: 'arrow-up' }); - zorderItems.push({ description: 'Send to Back', event: () => SelectionManager.Views().forEach(dv => dv.props.bringToFront(dv.rootDoc, true)), icon: 'arrow-down' }); - zorderItems.push({ - description: !this.rootDoc._keepZDragged ? 'Keep ZIndex when dragged' : 'Allow ZIndex to change when dragged', - event: undoBatch(action(() => (this.rootDoc._keepZWhenDragged = !this.rootDoc._keepZWhenDragged))), - icon: 'hand-point-up', - }); - !zorders && cm.addItem({ description: 'Z Order...', addDivider: true, noexpand: true, subitems: zorderItems, icon: 'layer-group' }); - } - onClicks.push({ description: 'Enter Portal', event: this.makeIntoPortal, icon: 'window-restore' }); !Doc.noviceMode && onClicks.push({ description: 'Toggle Detail', event: this.setToggleDetail, icon: 'concierge-bell' }); - if (!this.props.treeViewDoc) { - if (!this.Document.annotationOn) { - const options = cm.findByDescription('Options...'); - const optionItems: ContextMenuProps[] = options && 'subitems' in options ? options.subitems : []; - !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'compass' }); - - onClicks.push({ description: this.onClickHandler ? 'Remove Click Behavior' : 'Follow Link', event: () => this.toggleFollowLink(false, false), icon: 'link' }); - !Doc.noviceMode && onClicks.push({ description: 'Edit onClick Script', event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, 'onClick'), 'edit onClick'), icon: 'terminal' }); - !existingOnClick && cm.addItem({ description: 'OnClick...', noexpand: true, subitems: onClicks, icon: 'mouse-pointer' }); - } else if (LinkManager.Links(this.Document).length) { - onClicks.push({ description: 'Restore On Click default', event: () => this.noOnClick(), icon: 'link' }); - onClicks.push({ description: 'Follow Link on Click', event: () => this.followLinkOnClick(), icon: 'link' }); - !existingOnClick && cm.addItem({ description: 'OnClick...', subitems: onClicks, icon: 'mouse-pointer' }); - } + if (!this.Document.annotationOn) { + const options = cm.findByDescription('Options...'); + const optionItems: ContextMenuProps[] = options && 'subitems' in options ? options.subitems : []; + !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'compass' }); + + onClicks.push({ description: this.onClickHandler ? 'Remove Click Behavior' : 'Follow Link', event: () => this.toggleFollowLink(false, false), icon: 'link' }); + !Doc.noviceMode && onClicks.push({ description: 'Edit onClick Script', event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.Document, undefined, 'onClick'), 'edit onClick'), icon: 'terminal' }); + !existingOnClick && cm.addItem({ description: 'OnClick...', noexpand: true, subitems: onClicks, icon: 'mouse-pointer' }); + } else if (LinkManager.Links(this.Document).length) { + onClicks.push({ description: 'Restore On Click default', event: () => this.noOnClick(), icon: 'link' }); + onClicks.push({ description: 'Follow Link on Click', event: () => this.followLinkOnClick(), icon: 'link' }); + !existingOnClick && cm.addItem({ description: 'OnClick...', subitems: onClicks, icon: 'mouse-pointer' }); } } @@ -789,43 +655,43 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps const more = cm.findByDescription('More...'); const moreItems = more && 'subitems' in more ? more.subitems : []; - if (!Doc.IsSystem(this.rootDoc)) { + if (!Doc.IsSystem(this.Document)) { if (!Doc.noviceMode) { - moreItems.push({ description: 'Make View of Metadata Field', event: () => Doc.MakeMetadataFieldTemplate(this.props.Document, this.props.DataDoc), icon: 'concierge-bell' }); + moreItems.push({ description: 'Make View of Metadata Field', event: () => Doc.MakeMetadataFieldTemplate(this.Document, this._props.TemplateDataDocument), icon: 'concierge-bell' }); moreItems.push({ description: `${this.Document._chromeHidden ? 'Show' : 'Hide'} Chrome`, event: () => (this.Document._chromeHidden = !this.Document._chromeHidden), icon: 'project-diagram' }); - if (Cast(Doc.GetProto(this.props.Document).data, listSpec(Doc))) { - moreItems.push({ description: 'Export to Google Photos Album', event: () => GooglePhotos.Export.CollectionToAlbum({ collection: this.props.Document }).then(console.log), icon: 'caret-square-right' }); - moreItems.push({ description: 'Tag Child Images via Google Photos', event: () => GooglePhotos.Query.TagChildImages(this.props.Document), icon: 'caret-square-right' }); - moreItems.push({ description: 'Write Back Link to Album', event: () => GooglePhotos.Transactions.AddTextEnrichment(this.props.Document), icon: 'caret-square-right' }); + if (Cast(Doc.GetProto(this.Document).data, listSpec(Doc))) { + moreItems.push({ description: 'Export to Google Photos Album', event: () => GooglePhotos.Export.CollectionToAlbum({ collection: this.Document }).then(console.log), icon: 'caret-square-right' }); + moreItems.push({ description: 'Tag Child Images via Google Photos', event: () => GooglePhotos.Query.TagChildImages(this.Document), icon: 'caret-square-right' }); + moreItems.push({ description: 'Write Back Link to Album', event: () => GooglePhotos.Transactions.AddTextEnrichment(this.Document), icon: 'caret-square-right' }); } - moreItems.push({ description: 'Copy ID', event: () => Utils.CopyText(Doc.globalServerPath(this.props.Document)), icon: 'fingerprint' }); + moreItems.push({ description: 'Copy ID', event: () => Utils.CopyText(Doc.globalServerPath(this.Document)), icon: 'fingerprint' }); } } !more && moreItems.length && cm.addItem({ description: 'More...', subitems: moreItems, icon: 'compass' }); } const constantItems: ContextMenuProps[] = []; - if (!Doc.IsSystem(this.rootDoc) && this.rootDoc._type_collection !== CollectionViewType.Docking) { - constantItems.push({ description: 'Zip Export', icon: 'download', event: async () => Doc.Zip(this.props.Document) }); - (this.rootDoc._type_collection !== CollectionViewType.Docking || !Doc.noviceMode) && constantItems.push({ description: 'Share', event: () => SharingManager.Instance.open(this.props.DocumentView()), icon: 'users' }); - if (this.props.removeDocument && Doc.ActiveDashboard !== this.props.Document) { + if (!Doc.IsSystem(this.Document) && this.Document._type_collection !== CollectionViewType.Docking) { + constantItems.push({ description: 'Zip Export', icon: 'download', event: async () => Doc.Zip(this.Document) }); + (this.Document._type_collection !== CollectionViewType.Docking || !Doc.noviceMode) && constantItems.push({ description: 'Share', event: () => SharingManager.Instance.open(this._docView), icon: 'users' }); + if (this._props.removeDocument && Doc.ActiveDashboard !== this.Document) { // need option to gray out menu items ... preferably with a '?' that explains why they're grayed out (eg., no permissions) constantItems.push({ description: 'Close', event: this.deleteClicked, icon: 'times' }); } } - constantItems.push({ description: 'Show Metadata', event: () => this.props.addDocTab(this.props.Document, (OpenWhere.addRight.toString() + 'KeyValue') as OpenWhere), icon: 'table-columns' }); + constantItems.push({ description: 'Show Metadata', event: () => this._props.addDocTab(this.Document, OpenWhere.addRightKeyvalue), icon: 'table-columns' }); cm.addItem({ description: 'General...', noexpand: false, subitems: constantItems, icon: 'question' }); const help = cm.findByDescription('Help...'); const helpItems: ContextMenuProps[] = help && 'subitems' in help ? help.subitems : []; - !Doc.noviceMode && helpItems.push({ description: 'Text Shortcuts Ctrl+/', event: () => this.props.addDocTab(Docs.Create.PdfDocument('/assets/cheat-sheet.pdf', { _width: 300, _height: 300 }), OpenWhere.addRight), icon: 'keyboard' }); - !Doc.noviceMode && helpItems.push({ description: 'Print Document in Console', event: () => console.log(this.props.Document), icon: 'hand-point-right' }); - !Doc.noviceMode && helpItems.push({ description: 'Print DataDoc in Console', event: () => console.log(this.props.Document[DocData]), icon: 'hand-point-right' }); + !Doc.noviceMode && helpItems.push({ description: 'Text Shortcuts Ctrl+/', event: () => this._props.addDocTab(Docs.Create.PdfDocument('/assets/cheat-sheet.pdf', { _width: 300, _height: 300 }), OpenWhere.addRight), icon: 'keyboard' }); + !Doc.noviceMode && helpItems.push({ description: 'Print Document in Console', event: () => console.log(this.Document), icon: 'hand-point-right' }); + !Doc.noviceMode && helpItems.push({ description: 'Print DataDoc in Console', event: () => console.log(this.dataDoc), icon: 'hand-point-right' }); let documentationDescription: string | undefined = undefined; let documentationLink: string | undefined = undefined; - switch (this.props.Document.type) { + switch (this.Document.type) { case DocumentType.COL: documentationDescription = 'See collection documentation'; documentationLink = 'https://brown-dash.github.io/Dash-Documentation/views/'; @@ -859,8 +725,8 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps documentationLink = 'https://brown-dash.github.io/Dash-Documentation/documents/dataViz/'; break; } - // Add link to help documentation - if (!this.props.treeViewDoc && documentationDescription && documentationLink) { + // Add link to help documentation (unless the doc contents have been overriden in which case the documentation isn't relevant) + if (!this.docContents && documentationDescription && documentationLink) { helpItems.push({ description: documentationDescription, event: () => window.open(documentationLink, '_blank'), @@ -871,119 +737,47 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps else cm.moveAfter(help); e?.stopPropagation(); // DocumentViews should stop propagation of this event - cm.displayMenu((e?.pageX || pageX || 0) - 15, (e?.pageY || pageY || 0) - 15); + cm.displayMenu((e?.pageX || pageX || 0) - 15, (e?.pageY || pageY || 0) - 15, undefined, undefined, undefined); }; - @computed get _rootSelected() { - return this.props.isSelected(false) || (this.props.Document.rootDocument && this.props.rootSelected?.(false)) || false; - } - rootSelected = (outsideReaction?: boolean) => this._rootSelected; - panelHeight = () => this.props.PanelHeight() - this.headerMargin; - screenToLocal = () => this.props.ScreenToLocalTransform().translate(0, -this.headerMargin); - onClickFunc: any = () => (this.disableClickScriptFunc ? undefined : this.onClickHandler); - setHeight = (height: number) => (this.layoutDoc._height = height); - setContentView = action((view: { getAnchor?: (addAsAnnotation: boolean) => Doc; forward?: () => boolean; back?: () => boolean }) => (this._componentView = view)); - @computed get _isContentActive() { - // true - if the document has been activated directly or indirectly (by having its children selected) - // false - if its pointer events are explicitly turned off or if it's container tells it that it's inactive - // undefined - it is not active, but it should be responsive to actions that might active it or its contents (eg clicking) - return this.props.isContentActive() === false || this.props.pointerEvents?.() === 'none' - ? false - : Doc.ActiveTool !== InkTool.None || SnappingManager.GetIsDragging() || this.rootSelected() || this.rootDoc.forceActive || this._componentView?.isAnyChildContentActive?.() || this.props.isContentActive() - ? true - : undefined; - } + rootSelected = () => this._rootSelected; + panelHeight = () => this._props.PanelHeight() - this.headerMargin; + screenToLocalContent = () => this._props.ScreenToLocalTransform().translate(0, -this.headerMargin); + onClickFunc = this.disableClickScriptFunc ? undefined : () => this.onClickHandler; + setHeight = (height: number) => !this._props.suppressSetHeight && (this.layoutDoc._height = height); + setContentView = action((view: ViewBoxInterface) => (this._componentView = view)); isContentActive = (): boolean | undefined => this._isContentActive; - childFilters = () => [...this.props.childFilters(), ...StrListCast(this.layoutDoc.childFilters)]; + childFilters = () => [...this._props.childFilters(), ...StrListCast(this.layoutDoc.childFilters)]; - /// disable pointer events on content when there's an enabled onClick script (but not the browse script) and the contents aren't forced active, or if contents are marked inactive - @computed get _contentPointerEvents() { - if (this.props.contentPointerEvents) return this.props.contentPointerEvents; - return (!this.disableClickScriptFunc && this.onClickHandler && !this.props.onBrowseClick?.() && this.isContentActive() !== true) || this.isContentActive() === false ? 'none' : this.pointerEvents; - } contentPointerEvents = () => this._contentPointerEvents; - @computed get contents() { - TraceMobx(); - const isInk = this.layoutDoc._layout_isSvg && !this.props.LayoutTemplateString; - const noBackground = this.rootDoc._isGroup && (!this.rootDoc.backgroundColor || this.rootDoc.backgroundColor === 'transparent'); - return ( - <div - className="documentView-contentsView" - style={{ - pointerEvents: (isInk || noBackground ? 'none' : this.contentPointerEvents()) ?? 'all', - height: this.headerMargin ? `calc(100% - ${this.headerMargin}px)` : undefined, - }}> - <DocumentContentsView - key={1} - {...this.props} - pointerEvents={this.contentPointerEvents} - docViewPath={this.props.viewPath} - setContentView={this.setContentView} - childFilters={this.childFilters} - NativeDimScaling={this.props.NativeDimScaling} - PanelHeight={this.panelHeight} - setHeight={!this.props.suppressSetHeight ? this.setHeight : undefined} - isContentActive={this.isContentActive} - ScreenToLocalTransform={this.screenToLocal} - rootSelected={this.rootSelected} - onClick={this.onClickFunc} - focus={this.props.focus} - setTitleFocus={this.setTitleFocus} - layout_fieldKey={this.finalLayoutKey} - /> - {this.layoutDoc.layout_hideAllLinks ? null : this.allLinkEndpoints} - </div> - ); - } - anchorPanelWidth = () => this.props.PanelWidth() || 1; - anchorPanelHeight = () => this.props.PanelHeight() || 1; - anchorStyleProvider = (doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string): any => { + anchorPanelWidth = () => this._props.PanelWidth() || 1; + anchorPanelHeight = () => this._props.PanelHeight() || 1; + anchorStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string): any => { // prettier-ignore switch (property.split(':')[0]) { case StyleProp.ShowTitle: return ''; case StyleProp.PointerEvents: return 'none'; case StyleProp.Highlighting: return undefined; case StyleProp.Opacity: { - const filtered = DocUtils.FilterDocs(this.directLinks, this.props.childFilters?.() ?? [], []).filter(d => d.link_displayLine || Doc.UserDoc().showLinkLines); + const filtered = DocUtils.FilterDocs(this.directLinks, this._props.childFilters?.() ?? [], []).filter(d => d.link_displayLine || Doc.UserDoc().showLinkLines); return filtered.some(link => link._link_displayArrow) ? 0 : undefined; } } - return this.props.styleProvider?.(doc, props, property); + return this._props.styleProvider?.(doc, props, property); }; - // We need to use allrelatedLinks to get not just links to the document as a whole, but links to - // anchors that are not rendered as DocumentViews (marked as 'layout_unrendered' with their 'annotationOn' set to this document). e.g., - // - PDF text regions are rendered as an Annotations without generating a DocumentView, ' - // - RTF selections are rendered via Prosemirror and have a mark which contains the Document ID for the annotation link - // - and links to PDF/Web docs at a certain scroll location never create an explicit view. - // For each of these, we create LinkAnchorBox's on the border of the DocumentView. - @computed get directLinks() { - TraceMobx(); - return LinkManager.Instance.getAllRelatedLinks(this.rootDoc).filter( - link => - (link.link_matchEmbeddings ? link.link_anchor_1 === this.rootDoc : Doc.AreProtosEqual(link.link_anchor_1 as Doc, this.rootDoc)) || - (link.link_matchEmbeddings ? link.link_anchor_2 === this.rootDoc : Doc.AreProtosEqual(link.link_anchor_2 as Doc, this.rootDoc)) || - ((link.link_anchor_1 as Doc)?.layout_unrendered && Doc.AreProtosEqual((link.link_anchor_1 as Doc)?.annotationOn as Doc, this.rootDoc)) || - ((link.link_anchor_2 as Doc)?.layout_unrendered && Doc.AreProtosEqual((link.link_anchor_2 as Doc)?.annotationOn as Doc, this.rootDoc)) - ); - } - @computed get allLinks() { - TraceMobx(); - return LinkManager.Instance.getAllRelatedLinks(this.rootDoc); - } - hideLink = computedFn((link: Doc) => () => (link.link_displayLine = false)); - @computed get allLinkEndpoints() { + + removeLinkByHiding = (link: Doc) => () => (link.link_displayLine = false); + allLinkEndpoints = () => { // the small blue dots that mark the endpoints of links - TraceMobx(); - if (this._componentView instanceof KeyValueBox || this.props.hideLinkAnchors || this.layoutDoc.layout_hideLinkAnchors || this.props.dontRegisterView || this.layoutDoc.layout_unrendered) return null; - const filtered = DocUtils.FilterDocs(this.directLinks, this.props.childFilters?.() ?? [], []).filter(d => d.link_displayLine || Doc.UserDoc().showLinkLines); - return filtered.map(link => ( + if (this._componentView instanceof KeyValueBox || this._props.hideLinkAnchors || this.layoutDoc.layout_hideLinkAnchors || this._props.dontRegisterView || this.layoutDoc.layout_unrendered) return null; + return this.filteredLinks.map(link => ( <div className="documentView-anchorCont" key={link[Id]}> <DocumentView - {...this.props} + {...this._props} isContentActive={returnFalse} Document={link} - docViewPath={this.props.viewPath} + containerViewPath={this._props.docViewPath} PanelWidth={this.anchorPanelWidth} PanelHeight={this.anchorPanelHeight} dontRegisterView={false} @@ -991,107 +785,55 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps hideCaptions={true} hideLinkAnchors={true} layout_fitWidth={returnTrue} - removeDocument={this.hideLink(link)} + removeDocument={this.removeLinkByHiding(link)} styleProvider={this.anchorStyleProvider} LayoutTemplate={undefined} - LayoutTemplateString={LinkAnchorBox.LayoutString(`link_anchor_${Doc.LinkEndpoint(link, this.rootDoc)}`)} + LayoutTemplateString={LinkAnchorBox.LayoutString(`link_anchor_${LinkManager.anchorIndex(link, this.Document)}`)} /> </div> )); - } - - static recordAudioAnnotation(dataDoc: Doc, field: string, onRecording?: (stop: () => void) => void, onEnd?: () => void) { - let gumStream: any; - let recorder: any; - navigator.mediaDevices - .getUserMedia({ - audio: true, - }) - .then(function (stream) { - let audioTextAnnos = Cast(dataDoc[field + '_audioAnnotations_text'], listSpec('string'), null); - if (audioTextAnnos) audioTextAnnos.push(''); - else audioTextAnnos = dataDoc[field + '_audioAnnotations_text'] = new List<string>(['']); - DictationManager.Controls.listen({ - interimHandler: value => (audioTextAnnos[audioTextAnnos.length - 1] = value), - continuous: { indefinite: false }, - }).then(results => { - if (results && [DictationManager.Controls.Infringed].includes(results)) { - DictationManager.Controls.stop(); - } - onEnd?.(); - }); + }; - gumStream = stream; - recorder = new MediaRecorder(stream); - recorder.ondataavailable = async (e: any) => { - const [{ result }] = await Networking.UploadFilesToServer({ file: e.data }); - if (!(result instanceof Error)) { - const audioField = new AudioField(result.accessPaths.agnostic.client); - const audioAnnos = Cast(dataDoc[field + '_audioAnnotations'], listSpec(AudioField), null); - if (audioAnnos === undefined) { - dataDoc[field + '_audioAnnotations'] = new List([audioField]); - } else { - audioAnnos.push(audioField); - } - } - }; - //runInAction(() => (dataDoc.audioAnnoState = 'recording')); - recorder.start(); - const stopFunc = () => { - recorder.stop(); - DictationManager.Controls.stop(false); - runInAction(() => (dataDoc.audioAnnoState = 'stopped')); - gumStream.getAudioTracks()[0].stop(); - }; - if (onRecording) onRecording(stopFunc); - else setTimeout(stopFunc, 5000); - }); - } - playAnnotation = () => { - const self = this; - const audioAnnoState = this.dataDoc.audioAnnoState ?? 'stopped'; - const audioAnnos = Cast(this.dataDoc[this.LayoutFieldKey + '_audioAnnotations'], listSpec(AudioField), null); - const anno = audioAnnos?.lastElement(); - if (anno instanceof AudioField) { - switch (audioAnnoState) { - case 'stopped': - this.dataDoc[AudioPlay] = new Howl({ - src: [anno.url.href], - format: ['mp3'], - autoplay: true, - loop: false, - volume: 0.5, - onend: action(() => (self.dataDoc.audioAnnoState = 'stopped')), - }); - this.dataDoc.audioAnnoState = 'playing'; - break; - case 'playing': - this.dataDoc[AudioPlay]?.stop(); - this.dataDoc.audioAnnoState = 'stopped'; - break; - } - } + viewBoxContents = () => { + TraceMobx(); + const isInk = this.layoutDoc._layout_isSvg && !this._props.LayoutTemplateString; + const noBackground = this.Document.isGroup && !this._props.LayoutTemplateString?.includes(KeyValueBox.name) && (!this.layoutDoc.backgroundColor || this.layoutDoc.backgroundColor === 'transparent'); + return ( + <div + className="documentView-contentsView" + style={{ + pointerEvents: (isInk || noBackground ? 'none' : this.contentPointerEvents()) ?? (this._mounted ? 'all' : 'none'), + height: this.headerMargin ? `calc(100% - ${this.headerMargin}px)` : undefined, + }}> + <DocumentContentsView + {...this._props} + layoutFieldKey={StrCast(this.Document.layout_fieldKey, 'layout')} + pointerEvents={this.contentPointerEvents} + setContentViewBox={this.setContentView} + childFilters={this.childFilters} + PanelHeight={this.panelHeight} + setHeight={this.setHeight} + isContentActive={this.isContentActive} + ScreenToLocalTransform={this.screenToLocalContent} + rootSelected={this.rootSelected} + onClickScript={this.onClickFunc} + setTitleFocus={this.setTitleFocus} + hideClickBehaviors={BoolCast(this.layoutDoc.hideClickBehaviors)} + /> + {this.layoutDoc.layout_hideAllLinks ? null : this.allLinkEndpoints()} + </div> + ); }; - captionStyleProvider = (doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string) => this.props?.styleProvider?.(doc, props, property + ':caption'); - @observable _changingTitleField = false; - @observable _dropDownInnerWidth = 0; - fieldsDropdown = (inputOptions: string[], dropdownWidth: number, placeholder: string, onChange: (val: string | number) => void, onClose: () => void) => { - const filteredOptions = new Set(inputOptions); - const scaling = this.titleHeight / 30; /* height of Dropdown */ - Object.entries(DocOptions) - .filter(opts => opts[1].filterable) - .forEach((pair: [string, FInfo]) => filteredOptions.add(pair[0])); - filteredOptions.add(StrCast(this.layoutDoc.layout_showTitle)); - const options = Array.from(filteredOptions) - .filter(f => f) - .map(facet => ({ val: facet, text: facet })); + captionStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string) => this._props?.styleProvider?.(doc, props, property + ':caption'); + fieldsDropdown = (reqdFields: string[], dropdownWidth: number, placeholder: string, onChange: (val: string | number) => void, onClose: () => void) => { + const filteredFields = Object.entries(DocOptions).reduce((set, [field, opts]) => (opts.filterable ? set.add(field) : set), new Set(reqdFields)); return ( <div style={{ width: dropdownWidth }}> <div - ref={action((r: any) => r && (this._dropDownInnerWidth = Number(getComputedStyle(r).width.replace('px', ''))))} + ref={action((r: any) => r && (this._titleDropDownInnerWidth = Number(getComputedStyle(r).width.replace('px', ''))))} onPointerDown={action(e => (this._changingTitleField = true))} - style={{ width: 'max-content', transformOrigin: 'left', transform: `scale(${scaling})` }}> + style={{ width: 'max-content', transformOrigin: 'left', transform: `scale(${this.titleHeight / 30 /* height of Dropdown */})` }}> <Dropdown activeChanged={action(isOpen => !isOpen && (this._changingTitleField = false))} selectedVal={placeholder} @@ -1101,7 +843,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps type={Type.TERT} closeOnSelect={true} dropdownType={DropdownType.SELECT} - items={options} + items={Array.from(filteredFields).map(facet => ({ val: facet, text: facet }))} width={100} fillWidth /> @@ -1109,64 +851,46 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps </div> ); }; - @computed get innards() { - TraceMobx(); + /** + * displays a 'title' at the top of a document. The title contents default to the 'title' field, but can be changed to one or more fields by + * setting layout_showTitle using the format: field1[;field2[...][:hover]] + * from the UI, this is done by clicking the title field and prefixin the format with '#'. eg., #field1[;field2;...][:hover] + **/ + titleView = () => { const showTitle = this.layout_showTitle?.split(':')[0]; const showTitleHover = this.layout_showTitle?.includes(':hover'); - const captionView = !this.layout_showCaption ? null : ( - <div - className="documentView-captionWrapper" - style={{ - pointerEvents: this.rootDoc.ignoreClick ? 'none' : this.isContentActive() || this.props.isDocumentActive?.() ? 'all' : undefined, - background: StrCast(this.layoutDoc._backgroundColor, 'rgba(0,0,0,0.2)'), - color: lightOrDark(StrCast(this.layoutDoc._backgroundColor, 'black')), - }}> - <FormattedTextBox - {...this.props} - yPadding={10} - xPadding={10} - fieldKey={this.layout_showCaption} - styleProvider={this.captionStyleProvider} - dontRegisterView={true} - noSidebar={true} - dontScale={true} - renderDepth={this.props.renderDepth} - isContentActive={this.isContentActive} - /> - </div> - ); - const targetDoc = showTitle?.startsWith('_') ? this.layoutDoc : this.rootDoc; + + const targetDoc = showTitle?.startsWith('_') ? this.layoutDoc : this.Document; const background = StrCast( this.layoutDoc.layout_headingColor, - StrCast(SharingManager.Instance.users.find(u => u.user.email === this.dataDoc.author)?.sharingDoc.headingColor, StrCast(this.layoutDoc.layout_headingColor, StrCast(Doc.SharingDoc().headingColor, SettingsManager.userBackgroundColor))) + StrCast(SharingManager.Instance.users.find(u => u.user.email === this.dataDoc.author)?.sharingDoc.headingColor, StrCast(Doc.SharingDoc().headingColor, SettingsManager.userBackgroundColor)) ); - const dropdownWidth = this._titleRef.current?._editing || this._changingTitleField ? Math.max(10, (this._dropDownInnerWidth * this.titleHeight) / 30) : 0; + const dropdownWidth = this._titleRef.current?._editing || this._changingTitleField ? Math.max(10, (this._titleDropDownInnerWidth * this.titleHeight) / 30) : 0; const sidebarWidthPercent = +StrCast(this.layoutDoc.layout_sidebarWidthPercent).replace('%', ''); - // displays a 'title' at the top of a document. The title contents default to the 'title' field, but can be changed to one or more fields by - // setting layout_showTitle using the format: field1[;field2[...][:hover]] - // from the UI, this is done by clicking the title field and prefixin the format with '#'. eg., #field1[;field2;...][:hover] - const titleView = !showTitle ? null : ( + + return !showTitle ? null : ( <div className={`documentView-titleWrapper${showTitleHover ? '-hover' : ''}`} key="title" style={{ + zIndex: 1, position: this.headerMargin ? 'relative' : 'absolute', height: this.titleHeight, width: 100 - sidebarWidthPercent + '%', color: background === 'transparent' ? SettingsManager.userColor : lightOrDark(background), background, - pointerEvents: (!this.disableClickScriptFunc && this.onClickHandler) || this.Document.ignoreClick ? 'none' : this.isContentActive() || this.props.isDocumentActive?.() ? 'all' : undefined, + pointerEvents: (!this.disableClickScriptFunc && this.onClickHandler) || this.Document.ignoreClick ? 'none' : this.isContentActive() || this._props.isDocumentActive?.() ? 'all' : undefined, }}> {!dropdownWidth ? null : this.fieldsDropdown( - [], + [StrCast(this.layoutDoc.layout_showTitle)], dropdownWidth, StrCast(this.layoutDoc.layout_showTitle).split(':')[0], action((field: string | number) => { - if (this.rootDoc.layout_showTitle) { - this.rootDoc._layout_showTitle = field; - } else if (!this.props.layout_showTitle) { + if (this.layoutDoc.layout_showTitle) { + this.layoutDoc._layout_showTitle = field; + } else if (!this._props.layout_showTitle) { Doc.UserDoc().layout_showTitle = field; } this._changingTitleField = false; @@ -1189,12 +913,12 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps display="block" oneLine={true} fontSize={(this.titleHeight / 15) * 10} - GetValue={() => (showTitle.split(';').length !== 1 ? '#' + showTitle : Field.toKeyValueString(this.rootDoc, showTitle.split(';')[0]))} + GetValue={() => (showTitle.split(';').length !== 1 ? '#' + showTitle : Field.toKeyValueString(this.Document, showTitle.split(';')[0]))} SetValue={undoBatch((input: string) => { if (input?.startsWith('#')) { - if (this.rootDoc.layout_showTitle) { - this.rootDoc._layout_showTitle = input?.substring(1); - } else if (!this.props.layout_showTitle) { + if (this.layoutDoc.layout_showTitle) { + this.layoutDoc._layout_showTitle = input?.substring(1); + } else if (!this._props.layout_showTitle) { Doc.UserDoc().layout_showTitle = input?.substring(1) ?? 'author_date'; } } else if (showTitle && !showTitle.includes('Date') && showTitle !== 'author') { @@ -1206,22 +930,37 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps </div> </div> ); - return this.props.hideTitle || (!showTitle && !this.layout_showCaption) ? ( - this.contents - ) : ( - <div className="documentView-styleWrapper"> - {' '} - {!this.headerMargin ? this.contents : titleView} - {!this.headerMargin ? titleView : this.contents} - {' ' /* */} - {captionView} + }; + + captionView = () => { + return !this.layout_showCaption ? null : ( + <div + className="documentView-captionWrapper" + style={{ + pointerEvents: this.Document.ignoreClick ? 'none' : this.isContentActive() || this._props.isDocumentActive?.() ? 'all' : undefined, + background: StrCast(this.layoutDoc._backgroundColor, 'rgba(0,0,0,0.2)'), + color: lightOrDark(StrCast(this.layoutDoc._backgroundColor, 'black')), + }}> + <FormattedTextBox + {...this._props} + yPadding={10} + xPadding={10} + fieldKey={this.layout_showCaption} + styleProvider={this.captionStyleProvider} + dontRegisterView={true} + noSidebar={true} + dontScale={true} + renderDepth={this._props.renderDepth} + isContentActive={this.isContentActive} + /> </div> ); - } + }; renderDoc = (style: object) => { TraceMobx(); - return !DocCast(this.Document) || GetEffectiveAcl(this.Document[DocData]) === AclPrivate + const showTitle = this.layout_showTitle?.split(':')[0]; + return !DocCast(this.Document) || GetEffectiveAcl(this.dataDoc) === AclPrivate ? null : this.docContents ?? ( <div @@ -1236,14 +975,61 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps fontFamily: StrCast(this.Document._text_fontFamily, 'inherit'), fontSize: Cast(this.Document._text_fontSize, 'string', null), transform: this._animateScalingTo ? `scale(${this._animateScalingTo})` : undefined, - transition: !this._animateScalingTo ? StrCast(this.Document.dataTransition) : `transform ${this.animateScaleTime / 1000}s ease-${this._animateScalingTo < 1 ? 'in' : 'out'}`, + transition: !this._animateScalingTo ? StrCast(this.Document.dataTransition) : `transform ${this.animateScaleTime() / 1000}s ease-${this._animateScalingTo < 1 ? 'in' : 'out'}`, }}> - {this.innards} + {this._props.hideTitle || (!showTitle && !this.layout_showCaption) ? ( + this.viewBoxContents() + ) : ( + <div className="documentView-styleWrapper"> + {this.titleView()} + {this.viewBoxContents()} + {this.captionView()} + </div> + )} {this.widgetDecorations ?? null} </div> ); }; + render() { + TraceMobx(); + const highlighting = this.highlighting; + const borderPath = this.borderPath; + const boxShadow = !highlighting + ? this.boxShadow + : highlighting && this.borderRounding && highlighting.highlightStyle !== 'dashed' + ? `0 0 0 ${highlighting.highlightIndex}px ${highlighting.highlightColor}` + : this.boxShadow || (this.Document.isTemplateForField ? 'black 0.2vw 0.2vw 0.8vw' : undefined); + const renderDoc = this.renderDoc({ + borderRadius: this.borderRounding, + outline: highlighting && !this.borderRounding && !highlighting.highlightStroke ? `${highlighting.highlightColor} ${highlighting.highlightStyle} ${highlighting.highlightIndex}px` : 'solid 0px', + border: highlighting && this.borderRounding && highlighting.highlightStyle === 'dashed' ? `${highlighting.highlightStyle} ${highlighting.highlightColor} ${highlighting.highlightIndex}px` : undefined, + boxShadow, + clipPath: borderPath?.clipPath, + }); + + return ( + <div + className={`${DocumentView.ROOT_DIV} docView-hack`} + ref={this._mainCont} + onContextMenu={this.onContextMenu} + onPointerDown={this.onPointerDown} + onClick={this.onClick} + onPointerEnter={e => (!SnappingManager.IsDragging || SnappingManager.CanEmbed) && Doc.BrushDoc(this.Document)} + onPointerOver={e => (!SnappingManager.IsDragging || SnappingManager.CanEmbed) && Doc.BrushDoc(this.Document)} + onPointerLeave={e => !isParentOf(this._contentDiv, document.elementFromPoint(e.nativeEvent.x, e.nativeEvent.y)) && Doc.UnBrushDoc(this.Document)} + style={{ + borderRadius: this.borderRounding, + pointerEvents: this._pointerEvents === 'visiblePainted' ? 'none' : this._pointerEvents, // visible painted means that the underlying doc contents are irregular and will process their own pointer events (otherwise, the contents are expected to fill the entire doc view box so we can handle pointer events here) + }}> + <> + {this._componentView instanceof KeyValueBox ? renderDoc : DocumentViewInternal.AnimationEffect(renderDoc, this.Document[Animation], this.Document)} + {borderPath?.jsx} + </> + </div> + ); + } + /** * returns an entrance animation effect function to wrap a JSX element * @param presEffectDoc presentation effects document that specifies the animation effect parameters @@ -1270,250 +1056,221 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps case PresEffect.Rotate: return <Rotate {...effectProps}>{renderDoc}</Rotate>; case PresEffect.Bounce: return <Bounce {...effectProps}>{renderDoc}</Bounce>; case PresEffect.Roll: return <Roll {...effectProps}>{renderDoc}</Roll>; - case PresEffect.Lightspeed: return <LightSpeed {...effectProps}>{renderDoc}</LightSpeed>; + case PresEffect.Lightspeed: return <JackInTheBox {...effectProps}>{renderDoc}</JackInTheBox>; } } - @computed get highlighting() { - return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Highlighting); - } - @computed get borderPath() { - return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BorderPath); - } - render() { - TraceMobx(); - const highlighting = this.highlighting; - const borderPath = this.borderPath; - const boxShadow = - this.props.treeViewDoc || !highlighting - ? this.boxShadow - : highlighting && this.borderRounding && highlighting.highlightStyle !== 'dashed' - ? `0 0 0 ${highlighting.highlightIndex}px ${highlighting.highlightColor}` - : this.boxShadow || (this.rootDoc.isTemplateForField ? 'black 0.2vw 0.2vw 0.8vw' : undefined); - const renderDoc = this.renderDoc({ - borderRadius: this.borderRounding, - outline: highlighting && !this.borderRounding && !highlighting.highlightStroke ? `${highlighting.highlightColor} ${highlighting.highlightStyle} ${highlighting.highlightIndex}px` : 'solid 0px', - border: highlighting && this.borderRounding && highlighting.highlightStyle === 'dashed' ? `${highlighting.highlightStyle} ${highlighting.highlightColor} ${highlighting.highlightIndex}px` : undefined, - boxShadow, - clipPath: borderPath?.clipPath, - }); + public static recordAudioAnnotation(dataDoc: Doc, field: string, onRecording?: (stop: () => void) => void, onEnd?: () => void) { + let gumStream: any; + let recorder: any; + navigator.mediaDevices + .getUserMedia({ + audio: true, + }) + .then(function (stream) { + let audioTextAnnos = Cast(dataDoc[field + '_audioAnnotations_text'], listSpec('string'), null); + if (audioTextAnnos) audioTextAnnos.push(''); + else audioTextAnnos = dataDoc[field + '_audioAnnotations_text'] = new List<string>(['']); + DictationManager.Controls.listen({ + interimHandler: value => (audioTextAnnos[audioTextAnnos.length - 1] = value), + continuous: { indefinite: false }, + }).then(results => { + if (results && [DictationManager.Controls.Infringed].includes(results)) { + DictationManager.Controls.stop(); + } + onEnd?.(); + }); - return ( - <div - className={`${DocumentView.ROOT_DIV} docView-hack`} - ref={this._mainCont} - onContextMenu={this.onContextMenu} - onPointerDown={this.onPointerDown} - onClick={this.onClick} - onPointerEnter={e => (!SnappingManager.GetIsDragging() || DragManager.CanEmbed) && Doc.BrushDoc(this.rootDoc)} - onPointerOver={e => (!SnappingManager.GetIsDragging() || DragManager.CanEmbed) && Doc.BrushDoc(this.rootDoc)} - onPointerLeave={e => !isParentOf(this.ContentDiv, document.elementFromPoint(e.nativeEvent.x, e.nativeEvent.y)) && Doc.UnBrushDoc(this.rootDoc)} - style={{ - borderRadius: this.borderRounding, - pointerEvents: this.pointerEvents === 'visiblePainted' ? 'none' : this.pointerEvents, // visible painted means that the underlying doc contents are irregular and will process their own pointer events (otherwise, the contents are expected to fill the entire doc view box so we can handle pointer events here) - }}> - <> - {this._componentView instanceof KeyValueBox ? renderDoc : DocumentViewInternal.AnimationEffect(renderDoc, this.rootDoc[Animation], this.rootDoc)} - {borderPath?.jsx} - </> - </div> - ); + gumStream = stream; + recorder = new MediaRecorder(stream); + recorder.ondataavailable = async (e: any) => { + const [{ result }] = await Networking.UploadFilesToServer({ file: e.data }); + if (!(result instanceof Error)) { + const audioField = new AudioField(result.accessPaths.agnostic.client); + const audioAnnos = Cast(dataDoc[field + '_audioAnnotations'], listSpec(AudioField), null); + if (audioAnnos === undefined) { + dataDoc[field + '_audioAnnotations'] = new List([audioField]); + } else { + audioAnnos.push(audioField); + } + } + }; + //runInAction(() => (dataDoc.audioAnnoState = 'recording')); + recorder.start(); + const stopFunc = () => { + recorder.stop(); + DictationManager.Controls.stop(false); + runInAction(() => (dataDoc.audioAnnoState = 'stopped')); + gumStream.getAudioTracks()[0].stop(); + }; + if (onRecording) onRecording(stopFunc); + else setTimeout(stopFunc, 5000); + }); } } @observer -export class DocumentView extends React.Component<DocumentViewProps> { +export class DocumentView extends DocComponent<DocumentViewProps>() { public static ROOT_DIV = 'documentView-effectsWrapper'; - @observable public static Interacting = false; - @observable public static LongPress = false; - @observable public static ExploreMode = false; - @observable public static LastPressedSidebarBtn: Opt<Doc>; // bcz: this is a hack to handle highlighting buttons in the leftpanel menu .. need to find a cleaner approach - @computed public static get exploreMode() { - return () => (DocumentView.ExploreMode ? ScriptField.MakeScript('CollectionBrowseClick(documentView, clientX, clientY)', { documentView: 'any', clientX: 'number', clientY: 'number' })! : undefined); - } - @observable public docView: DocumentViewInternal | undefined | null; - @observable public textHtmlOverlay: Opt<string>; - @observable private _isHovering = false; - - public htmlOverlayEffect = ''; - public get displayName() { - return 'DocumentView(' + this.props.Document?.title + ')'; - } // this makes mobx trace() statements more descriptive + public get displayName() { return 'DocumentView(' + this.Document?.title + ')'; } // prettier-ignore public ContentRef = React.createRef<HTMLDivElement>(); - public ViewTimer: NodeJS.Timeout | undefined; // timer for res - public AnimEffectTimer: NodeJS.Timeout | undefined; // timer for res + private _htmlOverlayEffect: Opt<Doc>; private _disposers: { [name: string]: IReactionDisposer } = {}; - public clearViewTransition = () => { - this.ViewTimer && clearTimeout(this.ViewTimer); - this.rootDoc._viewTransition = undefined; - }; - public startDragging = (x: number, y: number, dropAction: dropActionType, hideSource = false) => this.docView?.startDragging(x, y, dropAction, hideSource); + private _viewTimer: NodeJS.Timeout | undefined; + private _animEffectTimer: NodeJS.Timeout | undefined; - public showContextMenu = (pageX: number, pageY: number) => this.docView?.onContextMenu(undefined, pageX, pageY); - - public setAnimEffect = (presEffect: Doc, timeInMs: number, afterTrans?: () => void) => { - this.AnimEffectTimer && clearTimeout(this.AnimEffectTimer); - this.rootDoc[Animation] = presEffect; - this.AnimEffectTimer = setTimeout(() => (this.rootDoc[Animation] = undefined), timeInMs); - }; - public setViewTransition = (transProp: string, timeInMs: number, afterTrans?: () => void, dataTrans = false) => { - this.rootDoc._viewTransition = `${transProp} ${timeInMs}ms`; - if (dataTrans) this.rootDoc._dataTransition = `${transProp} ${timeInMs}ms`; - this.ViewTimer && clearTimeout(this.ViewTimer); - return (this.ViewTimer = setTimeout(() => { - this.rootDoc._viewTransition = undefined; - this.rootDoc._dataTransition = 'inherit'; - afterTrans?.(); - }, timeInMs + 10)); - }; - public static SetViewTransition(docs: Doc[], transProp: string, timeInMs: number, afterTrans?: () => void, dataTrans = false) { - docs.forEach(doc => { - doc._viewTransition = `${transProp} ${timeInMs}ms`; - dataTrans && (doc.dataTransition = `${transProp} ${timeInMs}ms`); - }); - return setTimeout( - () => - docs.forEach(doc => { - doc._viewTransition = undefined; - dataTrans && (doc.dataTransition = 'inherit'); - afterTrans?.(); - }), - timeInMs + 10 - ); + @computed public static get exploreMode() { + return () => (SnappingManager.ExploreMode ? ScriptField.MakeScript('CollectionBrowseClick(documentView, clientX, clientY)', { documentView: 'any', clientX: 'number', clientY: 'number' })! : undefined); } - // shows a stacking view collection (by default, but the user can change) of all documents linked to the source - public static showBackLinks(linkAnchor: Doc) { - const docId = Doc.CurrentUserEmail + Doc.GetProto(linkAnchor)[Id] + '-pivotish'; - // prettier-ignore - DocServer.GetRefField(docId).then(docx => - LightboxView.SetLightboxDoc( - (docx as Doc) ?? // reuse existing pivot view of documents, or else create a new collection - Docs.Create.StackingDocument([], { title: linkAnchor.title + '-pivot', _width: 500, _height: 500, target: linkAnchor, updateContentsScript: ScriptField.MakeScript('updateLinkCollection(self, self.target)') }, docId) - ) - ); + constructor(props: DocumentViewProps) { + super(props); + makeObservable(this); } - get Document() { - return this.props.Document; - } - get topMost() { - return this.props.renderDepth === 0; - } - get rootDoc() { - return this.docView?.rootDoc ?? this.Document; - } - get dataDoc() { - return this.docView?.dataDoc ?? this.Document; - } - get ContentDiv() { - return this.docView?.ContentDiv; - } - get ComponentView() { - return this.docView?._componentView; - } - get allLinks() { - return (this.docView?.allLinks || []).filter(link => !link.link_matchEmbeddings || link.link_anchor_1 === this.rootDoc || link.link_anchor_2 === this.rootDoc); - } - get LayoutFieldKey() { - return this.docView?.LayoutFieldKey || 'layout'; - } - @computed get layout_fitWidth() { - return this.docView?._componentView?.layout_fitWidth?.() ?? this.props.layout_fitWidth?.(this.rootDoc) ?? this.layoutDoc?.layout_fitWidth; - } - @computed get anchorViewDoc() { - return this.props.LayoutTemplateString?.includes('link_anchor_2') ? DocCast(this.rootDoc['link_anchor_2']) : this.props.LayoutTemplateString?.includes('link_anchor_1') ? DocCast(this.rootDoc['link_anchor_1']) : undefined; - } - @computed get hideLinkButton() { - return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HideLinkBtn + (this.isSelected() ? ':selected' : '')); - } - @computed get linkCountView() { - const hideCount = this.props.renderDepth === -1 || SnappingManager.GetIsDragging() || (this.isSelected() && this.props.renderDepth) || !this._isHovering || this.hideLinkButton; - return hideCount ? null : <DocumentLinksButton View={this} scaling={this.scaleToScreenSpace} OnHover={true} Bottom={this.topMost} ShowCount={true} />; - } - @computed get docViewPath(): DocumentView[] { - return this.props.docViewPath ? [...this.props.docViewPath(), this] : [this]; - } - @computed get layoutDoc() { - return Doc.Layout(this.Document, this.props.LayoutTemplate?.()); - } - @computed get nativeWidth() { - return this.docView?._componentView?.reverseNativeScaling?.() ? 0 : returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.props.DataDoc, !this.layout_fitWidth)); - } - @computed get nativeHeight() { - return this.docView?._componentView?.reverseNativeScaling?.() ? 0 : returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, this.props.DataDoc, !this.layout_fitWidth)); - } - @computed get shouldNotScale() { - return this.props.shouldNotScale?.() || (this.layout_fitWidth && !this.nativeWidth) || [CollectionViewType.Docking].includes(this.Document._type_collection as any); + // want the htmloverlay to be able to fade in but we also want it to be display 'none' until it is needed. + // unfortunately, CSS can't transition animate any properties for something that is display 'none'. + // so we need to first activate the div, then, after a render timeout, start the opacity transition. + @observable private _enableHtmlOverlayTransitions: boolean = false; + @observable private _docViewInternal: DocumentViewInternal | undefined | null = undefined; + @observable private _htmlOverlayText: Opt<string> = undefined; + @observable private _isHovering = false; + @observable private _selected = false; + @observable public static LongPress = false; + + @computed private get shouldNotScale() { + return (this.layout_fitWidth && !this.nativeWidth) || this._props.LayoutTemplateString?.includes(KeyValueBox.name) || [CollectionViewType.Docking].includes(this.Document._type_collection as any); } - @computed get effectiveNativeWidth() { + @computed private get effectiveNativeWidth() { return this.shouldNotScale ? 0 : this.nativeWidth || NumCast(this.layoutDoc.width); } - @computed get effectiveNativeHeight() { + @computed private get effectiveNativeHeight() { return this.shouldNotScale ? 0 : this.nativeHeight || NumCast(this.layoutDoc.height); } - @computed get nativeScaling() { + @computed private get nativeScaling() { if (this.shouldNotScale) return 1; const minTextScale = this.Document.type === DocumentType.RTF ? 0.1 : 0; - if (this.layout_fitWidth || this.props.PanelHeight() / (this.effectiveNativeHeight || 1) > this.props.PanelWidth() / (this.effectiveNativeWidth || 1)) { - return Math.max(minTextScale, this.props.PanelWidth() / (this.effectiveNativeWidth || 1)); // width-limited or layout_fitWidth + if (this.layout_fitWidth || this._props.PanelHeight() / (this.effectiveNativeHeight || 1) > this._props.PanelWidth() / (this.effectiveNativeWidth || 1)) { + return Math.max(minTextScale, this._props.PanelWidth() / (this.effectiveNativeWidth || 1)); // width-limited or layout_fitWidth } - return Math.max(minTextScale, this.props.PanelHeight() / (this.effectiveNativeHeight || 1)); // height-limited or unscaled + return Math.max(minTextScale, this._props.PanelHeight() / (this.effectiveNativeHeight || 1)); // height-limited or unscaled } - @computed get panelWidth() { - return this.effectiveNativeWidth ? this.effectiveNativeWidth * this.nativeScaling : this.props.PanelWidth(); + @computed private get panelWidth() { + return this.effectiveNativeWidth ? this.effectiveNativeWidth * this.nativeScaling : this._props.PanelWidth(); } - @computed get panelHeight() { - if (this.effectiveNativeHeight && (!this.layout_fitWidth || !this.layoutDoc.nativeHeightUnfrozen)) { - return Math.min(this.props.PanelHeight(), this.effectiveNativeHeight * this.nativeScaling); + @computed private get panelHeight() { + if (this.effectiveNativeHeight && (!this.layout_fitWidth || !this.layoutDoc.layout_reflowVertical)) { + return Math.min(this._props.PanelHeight(), this.effectiveNativeHeight * this.nativeScaling); } - return this.props.PanelHeight(); + return this._props.PanelHeight(); } - @computed get Xshift() { - return this.effectiveNativeWidth ? Math.max(0, (this.props.PanelWidth() - this.effectiveNativeWidth * this.nativeScaling) / 2) : 0; + @computed private get Xshift() { + return this.effectiveNativeWidth ? Math.max(0, (this._props.PanelWidth() - this.effectiveNativeWidth * this.nativeScaling) / 2) : 0; } - @computed get Yshift() { + @computed private get Yshift() { return this.effectiveNativeWidth && this.effectiveNativeHeight && Math.abs(this.Xshift) < 0.001 && - (!this.layoutDoc.nativeHeightUnfrozen || (!this.layout_fitWidth && this.effectiveNativeHeight * this.nativeScaling <= this.props.PanelHeight())) - ? Math.max(0, (this.props.PanelHeight() - this.effectiveNativeHeight * this.nativeScaling) / 2) + (!this.layoutDoc.layout_reflowVertical || (!this.layout_fitWidth && this.effectiveNativeHeight * this.nativeScaling <= this._props.PanelHeight())) + ? Math.max(0, (this._props.PanelHeight() - this.effectiveNativeHeight * this.nativeScaling) / 2) : 0; } - @computed get centeringX() { - return this.props.dontCenter?.includes('x') ? 0 : this.Xshift; + @computed private get hideLinkButton() { + return ( + this._props.hideLinkButton || + this._props.renderDepth === -1 || // + (this.IsSelected && this._props.renderDepth) || + !this._isHovering || + (!this.IsSelected && this.layoutDoc.layout_hideLinkButton) || + SnappingManager.IsDragging || + SnappingManager.IsResizing + ); } - @computed get centeringY() { - return this.props.dontCenter?.includes('y') ? 0 : this.Yshift; + + componentDidMount() { + runInAction(() => this.Document[DocViews].add(this)); + this._disposers.onViewMounted = reaction(() => ScriptCast(this.Document.onViewMounted)?.script?.run({ this: this.Document }).result, emptyFunction); + !BoolCast(this.Document.dontRegisterView, this._props.dontRegisterView) && DocumentManager.Instance.AddView(this); + } + + componentWillUnmount() { + runInAction(() => this.Document[DocViews].delete(this)); + Object.values(this._disposers).forEach(disposer => disposer?.()); + !BoolCast(this.Document.dontRegisterView, this._props.dontRegisterView) && DocumentManager.Instance.RemoveView(this); } - public toggleNativeDimensions = () => this.docView && this.rootDoc.type !== DocumentType.INK && Doc.toggleNativeDimensions(this.layoutDoc, this.docView.NativeDimScaling, this.props.PanelWidth(), this.props.PanelHeight()); - public getBounds = () => { - if (!this.docView?.ContentDiv || this.props.treeViewDoc || Doc.AreProtosEqual(this.props.Document, Doc.UserDoc())) { + public set IsSelected(val) { runInAction(() => (this._selected = val)); } // prettier-ignore + public get IsSelected() { return this._selected; } // prettier-ignore + public get topMost() { return this._props.renderDepth === 0; } // prettier-ignore + public get ContentDiv() { return this._docViewInternal?._contentDiv; } // prettier-ignore + public get ComponentView() { return this._docViewInternal?._componentView; } // prettier-ignore + public get allLinks() { return this._docViewInternal?._allLinks ?? []; } // prettier-ignore + + get LayoutFieldKey() { + return Doc.LayoutFieldKey(this.Document, this._props.LayoutTemplateString); + } + + @computed get layout_fitWidth() { + return this._props.layout_fitWidth?.(this.layoutDoc) ?? this.layoutDoc?.layout_fitWidth; + } + @computed get anchorViewDoc() { + return this._props.LayoutTemplateString?.includes('link_anchor_2') ? DocCast(this.Document['link_anchor_2']) : this._props.LayoutTemplateString?.includes('link_anchor_1') ? DocCast(this.Document['link_anchor_1']) : undefined; + } + + @computed get getBounds() { + if (!this._docViewInternal?._contentDiv || Doc.AreProtosEqual(this.Document, Doc.UserDoc())) { return undefined; } - if (this.docView._componentView?.screenBounds) { - return this.docView._componentView.screenBounds(); + if (this._docViewInternal._componentView?.screenBounds?.()) { + return this._docViewInternal._componentView.screenBounds(); } - const xf = this.docView.props - .ScreenToLocalTransform() - .scale(this.trueNativeWidth() ? this.nativeScaling : 1) - .inverse(); + const xf = this.screenToContentsTransform().scale(this.nativeScaling).inverse(); const [[left, top], [right, bottom]] = [xf.transformPoint(0, 0), xf.transformPoint(this.panelWidth, this.panelHeight)]; - if (this.docView.props.LayoutTemplateString?.includes(LinkAnchorBox.name)) { - const docuBox = this.docView.ContentDiv.getElementsByClassName('linkAnchorBox-cont'); + if (this._props.LayoutTemplateString?.includes(LinkAnchorBox.name)) { + const docuBox = this._docViewInternal._contentDiv.getElementsByClassName('linkAnchorBox-cont'); if (docuBox.length) return { ...docuBox[0].getBoundingClientRect(), center: undefined }; } - return { left, top, right, bottom, center: this.ComponentView?.getCenter?.(xf) }; + return { left, top, right, bottom }; + } + + @computed get nativeWidth() { + return this._props.LayoutTemplateString?.includes(KeyValueBox.name) ? 0 : returnVal(this._props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this._props.TemplateDataDocument, !this.layout_fitWidth)); + } + @computed get nativeHeight() { + return this._props.LayoutTemplateString?.includes(KeyValueBox.name) ? 0 : returnVal(this._props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, this._props.TemplateDataDocument, !this.layout_fitWidth)); + } + @computed public get centeringX() { return this._props.dontCenter?.includes('x') ? 0 : this.Xshift; } // prettier-ignore + @computed public get centeringY() { return this._props.dontCenter?.includes('y') ? 0 : this.Yshift; } // prettier-ignore + + /** + * path of DocumentViews hat contains this DocumentView (does not includes this DocumentView thouhg) + */ + public get containerViewPath() { return this._props.containerViewPath; } // prettier-ignore + public get CollectionFreeFormView() { return this.CollectionFreeFormDocumentView?.CollectionFreeFormView; } // prettier-ignore + public get CollectionFreeFormDocumentView() { return this._props.CollectionFreeFormDocumentView?.(); } // prettier-ignore + + public clearViewTransition = () => { + this._viewTimer && clearTimeout(this._viewTimer); + this.layoutDoc._viewTransition = undefined; }; + public noOnClick = () => this._docViewInternal?.noOnClick(); + public makeIntoPortal = () => this._docViewInternal?.makeIntoPortal(); + public toggleFollowLink = (zoom?: boolean, setTargetToggle?: boolean): void => this._docViewInternal?.toggleFollowLink(zoom, setTargetToggle); + public setToggleDetail = () => this._docViewInternal?.setToggleDetail(); + public onContextMenu = (e?: React.MouseEvent, pageX?: number, pageY?: number) => this._docViewInternal?.onContextMenu?.(e, pageX, pageY); + public cleanupPointerEvents = () => this._docViewInternal?.cleanupPointerEvents(); + public startDragging = (x: number, y: number, dropAction: dropActionType, hideSource = false) => this._docViewInternal?.startDragging(x, y, dropAction, hideSource); + public showContextMenu = (pageX: number, pageY: number) => this._docViewInternal?.onContextMenu(undefined, pageX, pageY); + + public toggleNativeDimensions = () => this._docViewInternal && this.Document.type !== DocumentType.INK && Doc.toggleNativeDimensions(this.layoutDoc, this.NativeDimScaling() ?? 1, this._props.PanelWidth(), this._props.PanelHeight()); public iconify(finished?: () => void, animateTime?: number) { this.ComponentView?.updateIcon?.(); - const animTime = this.docView?._animateScaleTime; - runInAction(() => this.docView && animateTime !== undefined && (this.docView._animateScaleTime = animateTime)); + const animTime = this._docViewInternal?.animateScaleTime(); + runInAction(() => this._docViewInternal && animateTime !== undefined && (this._docViewInternal._animateScaleTime = animateTime)); const finalFinished = action(() => { finished?.(); - this.docView && (this.docView._animateScaleTime = animTime); + this._docViewInternal && (this._docViewInternal._animateScaleTime = animTime); }); const layout_fieldKey = Cast(this.Document.layout_fieldKey, 'string', null); if (layout_fieldKey !== 'layout_icon') { @@ -1523,123 +1280,169 @@ export class DocumentView extends React.Component<DocumentViewProps> { const deiconifyLayout = Cast(this.Document.deiconifyLayout, 'string', null); this.switchViews(deiconifyLayout ? true : false, deiconifyLayout, finalFinished); this.Document.deiconifyLayout = undefined; - this.props.bringToFront(this.rootDoc); + this._props.bringToFront?.(this.Document); } } - @undoBatch - @action - setCustomView = (custom: boolean, layout: string): void => { - Doc.setNativeView(this.props.Document); - custom && DocUtils.makeCustomViewClicked(this.props.Document, Docs.Create.StackingDocument, layout, undefined); + + public playAnnotation = () => { + const self = this; + const audioAnnoState = this.dataDoc.audioAnnoState ?? 'stopped'; + const audioAnnos = Cast(this.dataDoc[this.LayoutFieldKey + '_audioAnnotations'], listSpec(AudioField), null); + const anno = audioAnnos?.lastElement(); + if (anno instanceof AudioField) { + switch (audioAnnoState) { + case 'stopped': + this.dataDoc[AudioPlay] = new Howl({ + src: [anno.url.href], + format: ['mp3'], + autoplay: true, + loop: false, + volume: 0.5, + onend: action(() => (self.dataDoc.audioAnnoState = 'stopped')), + }); + this.dataDoc.audioAnnoState = 'playing'; + break; + case 'playing': + this.dataDoc[AudioPlay]?.stop(); + this.dataDoc.audioAnnoState = 'stopped'; + break; + } + } }; - @action - switchViews = (custom: boolean, view: string, finished?: () => void, useExistingLayout = false) => { - this.docView && (this.docView._animateScalingTo = 0.1); // shrink doc + + public setTextHtmlOverlay = action((text: string | undefined, effect?: Doc) => { + this._htmlOverlayText = text; + this._htmlOverlayEffect = effect; + }); + public setAnimateScaling = action((scale: number, time?: number) => { + if (this._docViewInternal) { + this._docViewInternal._animateScalingTo = scale; + this._docViewInternal._animateScaleTime = time; + } + }); + public setAnimEffect = (presEffect: Doc, timeInMs: number, afterTrans?: () => void) => { + this._animEffectTimer && clearTimeout(this._animEffectTimer); + this.Document[Animation] = presEffect; + this._animEffectTimer = setTimeout(() => (this.Document[Animation] = undefined), timeInMs); + }; + public setViewTransition = (transProp: string, timeInMs: number, afterTrans?: () => void, dataTrans = false) => { + this._viewTimer = DocumentView.SetViewTransition([this.layoutDoc], transProp, timeInMs, this._viewTimer, afterTrans, dataTrans); + }; + + public setCustomView = undoable((custom: boolean, layout: string): void => { + Doc.setNativeView(this.Document); + custom && DocUtils.makeCustomViewClicked(this.Document, Docs.Create.StackingDocument, layout, undefined); + }, 'set custom view'); + + public switchViews = (custom: boolean, view: string, finished?: () => void, useExistingLayout = false) => { + runInAction(() => this._docViewInternal && (this._docViewInternal._animateScalingTo = 0.1)); // shrink doc setTimeout( action(() => { - if (useExistingLayout && custom && this.rootDoc['layout_' + view]) { - this.rootDoc.layout_fieldKey = 'layout_' + view; + if (useExistingLayout && custom && this.Document['layout_' + view]) { + this.Document.layout_fieldKey = 'layout_' + view; } else { this.setCustomView(custom, view); } - this.docView && (this.docView._animateScalingTo = 1); // expand it + this._docViewInternal && (this._docViewInternal._animateScalingTo = 1); // expand it setTimeout( action(() => { - this.docView && (this.docView._animateScalingTo = 0); + this._docViewInternal && (this._docViewInternal._animateScalingTo = 0); finished?.(); }), - this.docView ? Math.max(0, this.docView.animateScaleTime - 10) : 0 + Math.max(0, (this._docViewInternal?.animateScaleTime() ?? 0) - 10) ); }), - this.docView ? Math.max(0, this.docView?.animateScaleTime - 10) : 0 + Math.max(0, (this._docViewInternal?.animateScaleTime() ?? 0) - 10) ); }; + /** + * @returns a hierarchy path through the nested DocumentViews that display this view. The last element of the path is this view. + */ + public docViewPath = () => (this.containerViewPath ? [...this.containerViewPath(), this] : [this]); - scaleToScreenSpace = () => (1 / (this.props.NativeDimScaling?.() || 1)) * this.screenToLocalTransform().Scale; - docViewPathFunc = () => this.docViewPath; - isSelected = (outsideReaction?: boolean) => SelectionManager.IsSelected(this, outsideReaction); + layout_fitWidthFunc = (doc: Doc) => BoolCast(this.layout_fitWidth); + screenToLocalScale = () => this._props.ScreenToLocalTransform().Scale; + isSelected = () => this.IsSelected; select = (extendSelection: boolean, focusSelection?: boolean) => { - SelectionManager.SelectView(this, extendSelection); - if (focusSelection) { - DocumentManager.Instance.showDocument(this.rootDoc, { - willZoomCentered: true, - zoomScale: 0.9, - zoomTime: 500, - }); + if (this.IsSelected && SelectionManager.Views.length > 1) SelectionManager.DeselectView(this); + else { + SelectionManager.SelectView(this, extendSelection); + if (focusSelection) { + DocumentManager.Instance.showDocument(this.Document, { + willZoomCentered: true, + zoomScale: 0.9, + zoomTime: 500, + }); + } } }; + ShouldNotScale = () => this.shouldNotScale; NativeWidth = () => this.effectiveNativeWidth; NativeHeight = () => this.effectiveNativeHeight; PanelWidth = () => this.panelWidth; PanelHeight = () => this.panelHeight; NativeDimScaling = () => this.nativeScaling; + hideLinkCount = () => (this.hideLinkButton ? true : false); selfView = () => this; - trueNativeWidth = () => returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.props.DataDoc, false)); - screenToLocalTransform = () => - this.props + /** + * @returns Transform to the document view (in the coordinate system of whatever contains the DocumentView) + */ + screenToViewTransform = () => this._props.ScreenToLocalTransform(); + /** + * @returns Transform to the coordinate system of the contents of the document view (includes native dimension scaling and centering) + */ + screenToContentsTransform = () => + this._props .ScreenToLocalTransform() .translate(-this.centeringX, -this.centeringY) - .scale(this.trueNativeWidth() ? 1 / this.nativeScaling : 1); - componentDidMount() { - this._disposers.updateContentsScript = reaction( - () => ScriptCast(this.rootDoc.updateContentsScript)?.script?.run({ this: this.props.Document, self: Cast(this.rootDoc, Doc, null) || this.props.Document }).result, - output => output - ); - this._disposers.height = reaction( - // increase max auto height if document has been resized to be greater than current max - () => NumCast(this.layoutDoc._height), - action(height => { - const docMax = NumCast(this.layoutDoc.layout_maxAutoHeight); - if (docMax && docMax < height) this.layoutDoc.layout_maxAutoHeight = height; - }) - ); - !BoolCast(this.props.Document.dontRegisterView, this.props.dontRegisterView) && DocumentManager.Instance.AddView(this); - } - componentWillUnmount() { - Object.values(this._disposers).forEach(disposer => disposer?.()); - !BoolCast(this.props.Document.dontRegisterView, this.props.dontRegisterView) && DocumentManager.Instance.RemoveView(this); - } - @computed get htmlOverlay() { - return !this.textHtmlOverlay ? null : ( - <div className="documentView-htmlOverlay"> - <div className="documentView-htmlOverlayInner"> - <Fade delay={0} duration={500}> - {DocumentViewInternal.AnimationEffect( - <div className="webBox-textHighlight"> - <ObserverJsxParser autoCloseVoidElements={true} key={42} onError={(e: any) => console.log('PARSE error', e)} renderInWrapper={false} jsx={StrCast(this.textHtmlOverlay)} /> - </div>, - { presentation_effect: this.htmlOverlayEffect ?? 'Zoom' } as any as Doc, - this.rootDoc - )}{' '} - </Fade> + .scale(1 / this.nativeScaling); + + htmlOverlay = () => { + const effect = StrCast(this._htmlOverlayEffect?.presentation_effect, StrCast(this._htmlOverlayEffect?.followLinkAnimEffect)); + return ( + <div + className="documentView-htmlOverlay" + ref={r => { + const val = r?.style.display !== 'none'; // if the outer overlay has been displayed, trigger the innner div to start it's opacity fade in transition + if (r && val !== this._enableHtmlOverlayTransitions) { + setTimeout(action(() => (this._enableHtmlOverlayTransitions = val))); + } + }} + style={{ display: !this._htmlOverlayText ? 'none' : undefined }}> + <div className="documentView-htmlOverlayInner" style={{ transition: `all 500ms`, opacity: this._enableHtmlOverlayTransitions ? 0.9 : 0 }}> + {DocumentViewInternal.AnimationEffect( + <div className="webBox-textHighlight"> + <ObserverJsxParser autoCloseVoidElements={true} key={42} onError={(e: any) => console.log('PARSE error', e)} renderInWrapper={false} jsx={StrCast(this._htmlOverlayText)} /> + </div>, + { ...(this._htmlOverlayEffect ?? {}), presentation_effect: effect ?? PresEffect.Zoom } as any as Doc, + this.Document + )} </div> </div> ); - } + }; render() { TraceMobx(); - const xshift = Math.abs(this.Xshift) <= 0.001 ? this.props.PanelWidth() : undefined; - const yshift = Math.abs(this.Yshift) <= 0.001 ? this.props.PanelHeight() : undefined; + const xshift = Math.abs(this.Xshift) <= 0.001 ? this._props.PanelWidth() : undefined; + const yshift = Math.abs(this.Yshift) <= 0.001 ? this._props.PanelHeight() : undefined; return ( <div className="contentFittingDocumentView" onPointerEnter={action(() => (this._isHovering = true))} onPointerLeave={action(() => (this._isHovering = false))}> - {!this.props.Document || !this.props.PanelWidth() ? null : ( + {!this.Document || !this._props.PanelWidth() ? null : ( <div className="contentFittingDocumentView-previewDoc" ref={this.ContentRef} style={{ - transition: this.props.dataTransition, transform: `translate(${this.centeringX}px, ${this.centeringY}px)`, - width: xshift ?? `${(100 * (this.props.PanelWidth() - this.Xshift * 2)) / this.props.PanelWidth()}%`, - height: this.props.forceAutoHeight - ? undefined - : yshift ?? (this.layout_fitWidth ? `${this.panelHeight}px` : `${(((100 * this.effectiveNativeHeight) / this.effectiveNativeWidth) * this.props.PanelWidth()) / this.props.PanelHeight()}%`), + width: xshift ?? `${this._props.PanelWidth() - this.Xshift * 2}px`, + height: this._props.forceAutoHeight ? undefined : yshift ?? (this.layout_fitWidth ? `${this.panelHeight}px` : `${(this.effectiveNativeHeight / this.effectiveNativeWidth) * this._props.PanelWidth()}px`), }}> <DocumentViewInternal - {...this.props} + {...this._props} + fieldKey={this.LayoutFieldKey} DocumentView={this.selfView} - viewPath={this.docViewPathFunc} + docViewPath={this.docViewPath} PanelWidth={this.PanelWidth} PanelHeight={this.PanelHeight} NativeWidth={this.NativeWidth} @@ -1647,18 +1450,49 @@ export class DocumentView extends React.Component<DocumentViewProps> { NativeDimScaling={this.NativeDimScaling} isSelected={this.isSelected} select={this.select} - ScreenToLocalTransform={this.screenToLocalTransform} - focus={this.props.focus || emptyFunction} - ref={action((r: DocumentViewInternal | null) => r && (this.docView = r))} + layout_fitWidth={this.layout_fitWidthFunc} + ScreenToLocalTransform={this.screenToContentsTransform} + focus={this._props.focus || emptyFunction} + ref={action((r: DocumentViewInternal | null) => r && (this._docViewInternal = r))} /> - {this.htmlOverlay} + {this.htmlOverlay()} + {this.ComponentView?.infoUI?.()} </div> )} - - {this.linkCountView} + {/* display link count button */} + <DocumentLinksButton hideCount={this.hideLinkCount} View={this} scaling={this.screenToLocalScale} OnHover={true} Bottom={this.topMost} ShowCount={true} /> </div> ); } + + public static SetViewTransition(docs: Doc[], transProp: string, timeInMs: number, timer?: NodeJS.Timeout | undefined, afterTrans?: () => void, dataTrans = false) { + docs.forEach(doc => { + doc._viewTransition = `${transProp} ${timeInMs}ms`; + dataTrans && (doc.dataTransition = `${transProp} ${timeInMs}ms`); + }); + timer && clearTimeout(timer); + return setTimeout( + () => + docs.forEach(doc => { + doc._viewTransition = undefined; + dataTrans && (doc.dataTransition = 'inherit'); + afterTrans?.(); + }), + timeInMs + 10 + ); + } + + // shows a stacking view collection (by default, but the user can change) of all documents linked to the source + public static showBackLinks(linkAnchor: Doc) { + const docId = Doc.CurrentUserEmail + Doc.GetProto(linkAnchor)[Id] + '-pivotish'; + // prettier-ignore + DocServer.GetRefField(docId).then(docx => + LightboxView.Instance.SetLightboxDoc( + (docx as Doc) ?? // reuse existing pivot view of documents, or else create a new collection + Docs.Create.StackingDocument([], { title: linkAnchor.title + '-pivot', _width: 500, _height: 500, target: linkAnchor, onViewMounted: ScriptField.MakeScript('updateLinkCollection(this, this.target)') }, docId) + ) + ); + } } ScriptingGlobals.add(function deiconifyView(documentView: DocumentView) { @@ -1667,8 +1501,7 @@ ScriptingGlobals.add(function deiconifyView(documentView: DocumentView) { }); ScriptingGlobals.add(function deiconifyViewToLightbox(documentView: DocumentView) { - //documentView.iconify(() => - LightboxView.AddDocTab(documentView.rootDoc, OpenWhere.lightbox, 'layout'); //, 0); + LightboxView.Instance.AddDocTab(documentView.Document, OpenWhere.lightbox, 'layout'); //, 0); }); ScriptingGlobals.add(function toggleDetail(dv: DocumentView, detailLayoutKeySuffix: string) { @@ -1678,7 +1511,7 @@ ScriptingGlobals.add(function toggleDetail(dv: DocumentView, detailLayoutKeySuff ScriptingGlobals.add(function updateLinkCollection(linkCollection: Doc, linkSource: Doc) { const collectedLinks = DocListCast(Doc.GetProto(linkCollection).data); - let wid = linkSource[Width](); + let wid = NumCast(linkSource._width); let embedding: Doc | undefined; const links = LinkManager.Links(linkSource); links.forEach(link => { @@ -1689,7 +1522,7 @@ ScriptingGlobals.add(function updateLinkCollection(linkCollection: Doc, linkSour embedding.x = wid; embedding.y = 0; embedding._lockedPosition = false; - wid += otherdoc[Width](); + wid += NumCast(otherdoc._width); Doc.AddDocToList(Doc.GetProto(linkCollection), 'data', embedding); } }); diff --git a/src/client/views/nodes/EquationBox.scss b/src/client/views/nodes/EquationBox.scss index f5871db22..5009ec7a7 100644 --- a/src/client/views/nodes/EquationBox.scss +++ b/src/client/views/nodes/EquationBox.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.scss'; +@import '../global/globalCssVariables.module.scss'; .equationBox-cont { transform-origin: center; diff --git a/src/client/views/nodes/EquationBox.tsx b/src/client/views/nodes/EquationBox.tsx index a77e4bdd1..2e03a766a 100644 --- a/src/client/views/nodes/EquationBox.tsx +++ b/src/client/views/nodes/EquationBox.tsx @@ -1,8 +1,6 @@ -import EquationEditor from 'equation-editor-react'; -import { action, reaction } from 'mobx'; +import { action, makeObservable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { Width } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; import { NumCast, StrCast } from '../../../fields/Types'; import { TraceMobx } from '../../../fields/util'; @@ -12,6 +10,7 @@ import { ViewBoxBaseComponent } from '../DocComponent'; import { LightboxView } from '../LightboxView'; import './EquationBox.scss'; import { FieldView, FieldViewProps } from './FieldView'; +import EquationEditor from './formattedText/EquationEditor'; @observer export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() { @@ -20,13 +19,19 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() { } public static SelectOnLoad: string = ''; _ref: React.RefObject<EquationEditor> = React.createRef(); + + constructor(props: FieldViewProps) { + super(props); + makeObservable(this); + } + componentDidMount() { - this.props.setContentView?.(this); - if (EquationBox.SelectOnLoad === this.rootDoc[Id] && (!LightboxView.LightboxDoc || LightboxView.IsLightboxDocView(this.props.docViewPath()))) { - this.props.select(false); + this._props.setContentViewBox?.(this); + if (EquationBox.SelectOnLoad === this.Document[Id] && (!LightboxView.LightboxDoc || LightboxView.Contains(this.DocumentView?.()))) { + this._props.select(false); this._ref.current!.mathField.focus(); - this.rootDoc.text === 'x' && this._ref.current!.mathField.select(); + this.dataDoc.text === 'x' && this._ref.current!.mathField.select(); EquationBox.SelectOnLoad = ''; } reaction( @@ -39,7 +44,7 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() { //{ fireImmediately: true } ); reaction( - () => this.props.isSelected(), + () => this._props.isSelected(), selected => { if (this._ref.current) { if (selected) this._ref.current.element.current.children[0].addEventListener('keydown', this.keyPressed, true); @@ -63,21 +68,21 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() { y: NumCast(this.layoutDoc.y) + _height + 10, }); EquationBox.SelectOnLoad = nextEq[Id]; - this.props.addDocument?.(nextEq); + this._props.addDocument?.(nextEq); e.stopPropagation(); } if (e.key === 'Tab') { - const graph = Docs.Create.FunctionPlotDocument([this.rootDoc], { - x: NumCast(this.layoutDoc.x) + this.layoutDoc[Width](), + const graph = Docs.Create.FunctionPlotDocument([this.Document], { + x: NumCast(this.layoutDoc.x) + NumCast(this.layoutDoc._width), y: NumCast(this.layoutDoc.y), _width: 400, _height: 300, backgroundColor: 'white', }); - this.props.addDocument?.(graph); + this._props.addDocument?.(graph); e.stopPropagation(); } - if (e.key === 'Backspace' && !this.dataDoc.text) this.props.removeDocument?.(this.rootDoc); + if (e.key === 'Backspace' && !this.dataDoc.text) this._props.removeDocument?.(this.Document); }; @undoBatch onChange = (str: string) => (this.dataDoc.text = str); @@ -85,13 +90,23 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() { updateSize = () => { const style = this._ref.current && getComputedStyle(this._ref.current.element.current); if (style?.width.endsWith('px') && style?.height.endsWith('px')) { - this.layoutDoc._width = Math.max(35, Number(style.width.replace('px', ''))); - this.layoutDoc._height = Math.max(25, Number(style.height.replace('px', ''))); + if (this.layoutDoc._nativeWidth) { + // if equation has been scaled then editing the expression must also edit the native dimensions to keep the aspect ratio + const prevNwidth = NumCast(this.layoutDoc._nativeWidth); + const prevNheight = NumCast(this.layoutDoc._nativeHeight); + this.layoutDoc._nativeWidth = Math.max(35, Number(style.width.replace('px', ''))); + this.layoutDoc._nativeHeight = Math.max(25, Number(style.height.replace('px', ''))); + this.layoutDoc._width = (NumCast(this.layoutDoc._width) * NumCast(this.layoutDoc._nativeWidth)) / prevNwidth; + this.layoutDoc._height = (NumCast(this.layoutDoc._height) * NumCast(this.layoutDoc._nativeHeight)) / prevNheight; + } else { + this.layoutDoc._width = Math.max(35, Number(style.width.replace('px', ''))); + this.layoutDoc._height = Math.max(25, Number(style.height.replace('px', ''))); + } } }; render() { TraceMobx(); - const scale = (this.props.NativeDimScaling?.() || 1) * NumCast(this.layoutDoc._freeform_scale, 1); + const scale = (this._props.NativeDimScaling?.() || 1) * NumCast(this.layoutDoc._freeform_scale, 1); return ( <div ref={r => this.updateSize()} @@ -101,8 +116,8 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() { transform: `scale(${scale})`, width: 'fit-content', // `${100 / scale}%`, height: `${100 / scale}%`, - pointerEvents: !this.props.isSelected() ? 'none' : undefined, - fontSize: StrCast(this.rootDoc._text_fontSize), + pointerEvents: !this._props.isSelected() ? 'none' : undefined, + fontSize: StrCast(this.layoutDoc._text_fontSize), }} onKeyDown={e => e.stopPropagation()}> <EquationEditor ref={this._ref} value={StrCast(this.dataDoc.text, 'x')} spaceBehavesLikeTab={true} onChange={this.onChange} autoCommands="pi theta sqrt sum prod alpha beta gamma rho" autoOperatorNames="sin cos tan" /> diff --git a/src/client/views/nodes/FaceRectangle.tsx b/src/client/views/nodes/FaceRectangle.tsx index 20afa4565..46bc6eb03 100644 --- a/src/client/views/nodes/FaceRectangle.tsx +++ b/src/client/views/nodes/FaceRectangle.tsx @@ -1,14 +1,14 @@ -import React = require("react"); -import { observer } from "mobx-react"; -import { observable, runInAction } from "mobx"; -import { RectangleTemplate } from "./FaceRectangles"; +import { observable, runInAction } from 'mobx'; +import { observer } from 'mobx-react'; +import * as React from 'react'; +import { RectangleTemplate } from './FaceRectangles'; @observer export default class FaceRectangle extends React.Component<{ rectangle: RectangleTemplate }> { @observable private opacity = 0; componentDidMount() { - setTimeout(() => runInAction(() => this.opacity = 1), 500); + setTimeout(() => runInAction(() => (this.opacity = 1)), 500); } render() { @@ -18,12 +18,11 @@ export default class FaceRectangle extends React.Component<{ rectangle: Rectangl style={{ ...rectangle.style, opacity: this.opacity, - transition: "1s ease opacity", - position: "absolute", - borderRadius: 5 + transition: '1s ease opacity', + position: 'absolute', + borderRadius: 5, }} /> ); } - -}
\ No newline at end of file +} diff --git a/src/client/views/nodes/FaceRectangles.tsx b/src/client/views/nodes/FaceRectangles.tsx index 0d1e063af..ade4225d9 100644 --- a/src/client/views/nodes/FaceRectangles.tsx +++ b/src/client/views/nodes/FaceRectangles.tsx @@ -1,9 +1,9 @@ -import React = require("react"); -import { Doc, DocListCast } from "../../../fields/Doc"; -import { Cast, NumCast } from "../../../fields/Types"; -import { observer } from "mobx-react"; -import { Id } from "../../../fields/FieldSymbols"; -import FaceRectangle from "./FaceRectangle"; +import { observer } from 'mobx-react'; +import * as React from 'react'; +import { Doc, DocListCast } from '../../../fields/Doc'; +import { Id } from '../../../fields/FieldSymbols'; +import { Cast, NumCast } from '../../../fields/Types'; +import FaceRectangle from './FaceRectangle'; interface FaceRectanglesProps { document: Doc; @@ -18,7 +18,6 @@ export interface RectangleTemplate { @observer export class FaceRectangles extends React.Component<FaceRectanglesProps> { - render() { const faces = DocListCast(this.props.document.faces); const templates: RectangleTemplate[] = faces.map(faceDoc => { @@ -33,14 +32,15 @@ export class FaceRectangles extends React.Component<FaceRectanglesProps> { } as React.CSSProperties; return { id: rectangle[Id], - style: style + style: style, }; }); return ( <div> - {templates.map(rectangle => <FaceRectangle key={rectangle.id} rectangle={rectangle} />)} + {templates.map(rectangle => ( + <FaceRectangle key={rectangle.id} rectangle={rectangle} /> + ))} </div> ); } - -}
\ No newline at end of file +} diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index f014f842e..8a49b4757 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -1,44 +1,119 @@ -import React = require('react'); -import { computed } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { DateField } from '../../../fields/DateField'; -import { Doc, Field, FieldResult, Opt } from '../../../fields/Doc'; +import { Doc, Field, Opt } from '../../../fields/Doc'; import { List } from '../../../fields/List'; import { ScriptField } from '../../../fields/ScriptField'; import { WebField } from '../../../fields/URLField'; -import { DocumentViewSharedProps } from './DocumentView'; +import { dropActionType } from '../../util/DragManager'; +import { Transform } from '../../util/Transform'; +import { ViewBoxInterface } from '../DocComponent'; +import { CollectionFreeFormDocumentView } from './CollectionFreeFormDocumentView'; +import { DocumentView, OpenWhere } from './DocumentView'; +import { PinProps } from './trails'; +export interface FocusViewOptions { + willPan?: boolean; // determines whether to pan to target document + willZoomCentered?: boolean; // determines whether to zoom in on target document. if zoomScale is 0, this just centers the document + zoomScale?: number; // percent of containing frame to zoom into document + zoomTime?: number; + didMove?: boolean; // whether a document was changed during the showDocument process + docTransform?: Transform; // when a document can't be panned and zoomed within its own container (say a group), then we need to continue to move up the render hierarchy to find something that can pan and zoom. when this happens the docTransform must accumulate all the transforms of each level of the hierarchy + instant?: boolean; // whether focus should happen instantly (as opposed to smooth zoom) + preview?: boolean; // whether changes should be previewed by the componentView or written to the document + effect?: Doc; // animation effect for focus + noSelect?: boolean; // whether target should be selected after focusing + playAudio?: boolean; // whether to play audio annotation on focus + playMedia?: boolean; // whether to play start target videos + openLocation?: OpenWhere; // where to open a missing document + zoomTextSelections?: boolean; // whether to display a zoomed overlay of anchor text selections + toggleTarget?: boolean; // whether to toggle target on and off + anchorDoc?: Doc; // doc containing anchor info to apply at end of focus to target doc + easeFunc?: 'linear' | 'ease'; // transition method for scrolling +} +export type FocusFuncType = (doc: Doc, options: FocusViewOptions) => Opt<number>; +export type StyleProviderFuncType = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string) => any; // // these properties get assigned through the render() method of the DocumentView when it creates this node. // However, that only happens because the properties are "defined" in the markup for the field view. // See the LayoutString method on each field view : ImageBox, FormattedTextBox, etc. // -export interface FieldViewProps extends DocumentViewSharedProps { - // FieldView specific props that are not part of DocumentView props - fieldKey: string; - scrollOverflow?: boolean; // bcz: would like to think this can be avoided -- need to look at further - - select: (isCtrlPressed: boolean) => void; - isContentActive: (outsideReaction?: boolean) => boolean | undefined; - isDocumentActive?: () => boolean | undefined; - isSelected: (outsideReaction?: boolean) => boolean; - setHeight?: (height: number) => void; - NativeDimScaling?: () => number; // scaling the DocumentView does to transform its contents into its panel & needed by ScreenToLocal NOTE: Must also be added to DocumentViewInternalsProps - onBrowseClick?: () => ScriptField | undefined; +export interface FieldViewSharedProps { + Document: Doc; + TemplateDataDocument?: Doc; + LayoutTemplateString?: string; + LayoutTemplate?: () => Opt<Doc>; + renderDepth: number; + scriptContext?: any; // can be assigned anything and will be passed as 'scriptContext' to any OnClick script that executes on this document + xPadding?: number; + yPadding?: number; + dontRegisterView?: boolean; + dropAction?: dropActionType; + dragAction?: dropActionType; + forceAutoHeight?: boolean; + ignoreAutoHeight?: boolean; + disableBrushing?: boolean; // should highlighting for this view be disabled when same document in another view is hovered over. + hideClickBehaviors?: boolean; // whether to suppress menu item options for changing click behaviors + CollectionFreeFormDocumentView?: () => CollectionFreeFormDocumentView; + containerViewPath?: () => DocumentView[]; + fitContentsToBox?: () => boolean; // used by freeformview to fit its contents to its panel. corresponds to _freeform_fitContentsToBox property on a Document + isGroupActive?: () => string | undefined; // is this document part of a group that is active + setContentViewBox?: (view: ViewBoxInterface) => any; // called by rendered field's viewBox so that DocumentView can make direct calls to the viewBox + PanelWidth: () => number; + PanelHeight: () => number; + isDocumentActive?: () => boolean | undefined; // whether a document should handle pointer events + isContentActive: () => boolean | undefined; // whether document contents should handle pointer events + childFilters: () => string[]; + childFiltersByRanges: () => string[]; + styleProvider: Opt<StyleProviderFuncType>; + setTitleFocus?: () => void; + focus: FocusFuncType; + onClickScript?: () => ScriptField; + onDoubleClickScript?: () => ScriptField; + onPointerDownScript?: () => ScriptField; + onPointerUpScript?: () => ScriptField; + onBrowseClickScript?: () => ScriptField | undefined; onKey?: (e: React.KeyboardEvent, fieldProps: FieldViewProps) => boolean | undefined; + layout_fitWidth?: (doc: Doc) => boolean | undefined; + searchFilterDocs: () => Doc[]; + layout_showTitle?: () => string; + whenChildContentsActiveChanged: (isActive: boolean) => void; + rootSelected?: () => boolean; // whether the root of a template has been selected + addDocTab: (doc: Doc, where: OpenWhere) => boolean; + filterAddDocument?: (doc: Doc[]) => boolean; // allows a document that renders a Collection view to filter or modify any documents added to the collection (see PresBox for an example) + addDocument?: (doc: Doc | Doc[], annotationKey?: string) => boolean; + removeDocument?: (doc: Doc | Doc[], annotationKey?: string) => boolean; + moveDocument?: (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[], annotationKey?: string) => boolean) => boolean; + pinToPres: (document: Doc, pinProps: PinProps) => void; + ScreenToLocalTransform: () => Transform; + bringToFront?: (doc: Doc, sendToBack?: boolean) => void; + waitForDoubleClickToClick?: () => 'never' | 'always' | undefined; + defaultDoubleClick?: () => 'default' | 'ignore' | undefined; pointerEvents?: () => Opt<string>; +} + +/** + * FieldView specific props that are not shared with DocumentView props + * */ +export interface FieldViewProps extends FieldViewSharedProps { + DocumentView?: () => DocumentView; + fieldKey: string; + isSelected: () => boolean; + select: (ctrlPressed: boolean, shiftPress?: boolean) => void; + docViewPath: () => DocumentView[]; + setHeight?: (height: number) => void; + NativeDimScaling?: () => number; // scaling the DocumentView does to transform its contents into its panel & needed by ScreenToLocal // properties intended to be used from within layout strings (otherwise use the function equivalents that work more efficiently with React) // See currentUserUtils headerTemplate for examples of creating text boxes from html which set some of these fields // Also, see InkingStroke for examples of creating text boxes from render() methods which set some of these fields backgroundColor?: string; - treeViewDoc?: Doc; color?: string; height?: number; width?: number; + dontSelectOnLoad?: boolean; // suppress selecting (e.g.,. text box) when loaded (and mark as not being associated with scrollTop document field) noSidebar?: boolean; dontScale?: boolean; - dontSelectOnLoad?: boolean; // suppress selecting (e.g.,. text box) when loaded (and mark as not being associated with scrollTop document field) } @observer @@ -47,13 +122,8 @@ export class FieldView extends React.Component<FieldViewProps> { return `<${fieldType.name} {...props} fieldKey={'${fieldStr}'}/>`; //e.g., "<ImageBox {...props} fieldKey={'data'} />" } - @computed - get field(): FieldResult { - const { Document, fieldKey: fieldKey } = this.props; - return Document[fieldKey]; - } render() { - const field = this.field; + const field = this.props.Document[this.props.fieldKey]; // prettier-ignore if (field instanceof Doc) return <p> <b>{field.title?.toString()}</b></p>; if (field === undefined) return <p>{'<null>'}</p>; diff --git a/src/client/views/nodes/FontIconBox/ButtonInterface.ts b/src/client/views/nodes/FontIconBox/ButtonInterface.ts index 0aa2ac8e1..1c034bfbe 100644 --- a/src/client/views/nodes/FontIconBox/ButtonInterface.ts +++ b/src/client/views/nodes/FontIconBox/ButtonInterface.ts @@ -1,12 +1,12 @@ -import { Doc } from "../../../../fields/Doc"; -import { IconProp } from "@fortawesome/fontawesome-svg-core"; -import { ButtonType } from "./FontIconBox"; +import { Doc } from '../../../../fields/Doc'; +import { IconProp } from '@fortawesome/fontawesome-svg-core'; +import { ButtonType } from './FontIconBox'; export interface IButtonProps { type: string | ButtonType; - rootDoc: Doc; + Document: Doc; label: any; icon: IconProp; color: string; backgroundColor: string; -}
\ No newline at end of file +} diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.scss b/src/client/views/nodes/FontIconBox/FontIconBox.scss index 9d9fa26b0..db2ffa756 100644 --- a/src/client/views/nodes/FontIconBox/FontIconBox.scss +++ b/src/client/views/nodes/FontIconBox/FontIconBox.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables'; +@import '../../global/globalCssVariables.module.scss'; .menuButton { height: 100%; diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx index d2e1293da..cf07d98be 100644 --- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx +++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx @@ -1,7 +1,7 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Button, ColorPicker, Dropdown, DropdownType, EditableText, IconButton, IListItemProps, MultiToggle, NumberDropdown, NumberDropdownType, Popup, Size, Toggle, ToggleType, Type } from 'browndash-components'; -import { action, computed, observable } from 'mobx'; +import { computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, DocListCast, StrListCast } from '../../../../fields/Doc'; @@ -13,7 +13,7 @@ import { SelectionManager } from '../../../util/SelectionManager'; import { SettingsManager } from '../../../util/SettingsManager'; import { undoable, UndoManager } from '../../../util/UndoManager'; import { ContextMenu } from '../../ContextMenu'; -import { DocComponent } from '../../DocComponent'; +import { ViewBoxBaseComponent } from '../../DocComponent'; import { EditableView } from '../../EditableView'; import { SelectedDocView } from '../../selectedDoc'; import { StyleProp } from '../../StyleProvider'; @@ -26,7 +26,6 @@ export enum ButtonType { TextButton = 'textBtn', MenuButton = 'menuBtn', DropdownList = 'dropdownList', - DropdownButton = 'dropdownBtn', ClickButton = 'clickBtn', ToggleButton = 'toggleBtn', ColorButton = 'colorBtn', @@ -42,14 +41,29 @@ export interface ButtonProps extends FieldViewProps { type?: ButtonType; } @observer -export class FontIconBox extends DocComponent<ButtonProps>() { +export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(FontIconBox, fieldKey); } + + constructor(props: ButtonProps) { + super(props); + makeObservable(this); + } + // + // This controls whether fontIconButtons will display labels under their icons or not + // + public static get ShowIconLabels() { + return BoolCast(Doc.UserDoc()._showLabel); + } + public static set ShowIconLabels(show: boolean) { + Doc.UserDoc()._showLabel = show; + } + @observable noTooltip = false; showTemplate = (): void => { const dragFactory = Cast(this.layoutDoc.dragFactory, Doc, null); - dragFactory && this.props.addDocTab(dragFactory, OpenWhere.addRight); + dragFactory && this._props.addDocTab(dragFactory, OpenWhere.addRight); }; dragAsTemplate = (): void => { this.layoutDoc.onDragStart = ScriptField.MakeFunction('getCopy(this.dragFactory, true)'); @@ -69,7 +83,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() { // Determining UI Specs @computed get label() { - return StrCast(this.rootDoc.icon_label, StrCast(this.rootDoc.title)); + return StrCast(this.dataDoc.icon_label, StrCast(this.Document.title)); } Icon = (color: string, iconFalse?: boolean) => { let icon; @@ -82,13 +96,13 @@ export class FontIconBox extends DocComponent<ButtonProps>() { return !icon ? null : icon === 'pres-trail' ? TrailsIcon(color) : <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />; }; @computed get dropdown() { - return BoolCast(this.rootDoc.dropDownOpen); + return BoolCast(this.Document.dropDownOpen); } @computed get buttonList() { - return StrListCast(this.rootDoc.btnList); + return StrListCast(this.Document.btnList); } @computed get type() { - return StrCast(this.rootDoc.btnType); + return StrCast(this.Document.btnType); } /** @@ -122,8 +136,8 @@ export class FontIconBox extends DocComponent<ButtonProps>() { type = 'slider'; break; } - const numScript = (value?: number) => ScriptCast(this.rootDoc.script).script.run({ this: this.layoutDoc, self: this.rootDoc, value, _readOnly_: value === undefined }); - const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color); + const numScript = (value?: number) => ScriptCast(this.Document.script).script.run({ this: this.Document, self: this.Document, value, _readOnly_: value === undefined }); + const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color); // Script for checking the outcome of the toggle const checkResult = Number(Number(numScript().result ?? 0).toPrecision(NumCast(this.dataDoc.numPrecision, 3))); @@ -135,52 +149,21 @@ export class FontIconBox extends DocComponent<ButtonProps>() { showPlusMinus={false} tooltip={this.label} type={Type.PRIM} - min={NumCast(this.rootDoc.numBtnMin, 0)} - max={NumCast(this.rootDoc.numBtnMax, 100)} + min={NumCast(this.dataDoc.numBtnMin, 0)} + max={NumCast(this.dataDoc.numBtnMax, 100)} number={checkResult} - setNumber={undoable(value => numScript(value), `${this.rootDoc.title} button set from list`)} + setNumber={undoable(value => numScript(value), `${this.Document.title} button set from list`)} fillWidth /> ); } - /** - * Dropdown button - */ - @computed get dropdownButton() { - const active: string = StrCast(this.rootDoc.dropDownOpen); - const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color); - const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor); - return ( - <div - className={`menuButton ${this.type} ${active}`} - style={{ color, backgroundColor, borderBottomLeftRadius: this.dropdown ? 0 : undefined }} - onClick={action(() => { - this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen; - this.noTooltip = this.rootDoc.dropDownOpen; - Doc.UnBrushAllDocs(); - })}> - {this.Icon(color)} - {!this.label || !Doc.GetShowIconLabels() ? null : ( - <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}> - {' '} - {this.label}{' '} - </div> - )} - <div className="menuButton-dropdown" style={{ borderBottomRightRadius: this.dropdown ? 0 : undefined }}> - <FontAwesomeIcon icon={'caret-down'} color={color} size="sm" /> - </div> - {this.rootDoc.dropDownOpen ? <div className="menuButton-dropdownBox">{/* DROPDOWN BOX CONTENTS */}</div> : null} - </div> - ); - } - dropdownItemDown = (e: React.PointerEvent, value: string | number) => { setupMoveUpEvents( this, e, (e: PointerEvent) => { - return ScriptCast(this.rootDoc.onDragScript)?.script.run({ this: this.layoutDoc, self: this.rootDoc, value: { doc: value, e } }).result; + return ScriptCast(this.Document.onDragScript)?.script.run({ this: this.Document, self: this.Document, value: { doc: value, e } }).result; }, emptyFunction, emptyFunction @@ -192,7 +175,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() { * Dropdown list */ @computed get dropdownListButton() { - const script = ScriptCast(this.rootDoc.script); + const script = ScriptCast(this.Document.script); let noviceList: string[] = []; let text: string | undefined; @@ -200,7 +183,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() { let icon: IconProp = 'caret-down'; const isViewDropdown = script?.script.originalScript.startsWith('setView'); if (isViewDropdown) { - const selected = SelectionManager.Docs(); + const selected = SelectionManager.Docs; if (selected.lastElement()) { if (StrCast(selected.lastElement().type) === DocumentType.COL) { text = StrCast(selected.lastElement()._type_collection); @@ -228,7 +211,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() { } noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Carousel3D, CollectionViewType.Stacking, CollectionViewType.NoteTaking]; } else { - text = script?.script.run({ this: this.layoutDoc, self: this.rootDoc, value: '', _readOnly_: true }).result; + text = script?.script.run({ this: this.Document, self: this.Document, value: '', _readOnly_: true }).result; // text = StrCast((RichTextMenu.Instance?.TextView?.EditorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily); getStyle = (val: string) => ({ fontFamily: val }); } @@ -246,7 +229,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() { return ( <Dropdown selectedVal={text} - setSelectedVal={undoable(value => script.script.run({ this: this.layoutDoc, self: this.rootDoc, value }), `dropdown select ${this.label}`)} + setSelectedVal={undoable(value => script.script.run({ this: this.Document, self: this.Document, value }), `dropdown select ${this.label}`)} color={SettingsManager.userColor} background={SettingsManager.userVariantColor} type={Type.TERT} @@ -261,7 +244,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() { } @computed get colorScript() { - return ScriptCast(this.rootDoc.script); + return ScriptCast(this.Document.script); } colorBatch: UndoManager.Batch | undefined; @@ -269,18 +252,18 @@ export class FontIconBox extends DocComponent<ButtonProps>() { * Color button */ @computed get colorButton() { - const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color); - const curColor = this.colorScript?.script.run({ this: this.layoutDoc, self: this.rootDoc, value: undefined, _readOnly_: true }).result ?? 'transparent'; - const tooltip: string = StrCast(this.rootDoc.toolTip); + const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color); + const curColor = this.colorScript?.script.run({ this: this.Document, self: this.Document, value: undefined, _readOnly_: true }).result ?? 'transparent'; + const tooltip: string = StrCast(this.Document.toolTip); return ( <ColorPicker setSelectedColor={value => { if (!this.colorBatch) this.colorBatch = UndoManager.StartBatch(`Set ${tooltip} color`); - this.colorScript?.script.run({ this: this.layoutDoc, self: this.rootDoc, value: value, _readOnly_: false }); + this.colorScript?.script.run({ this: this.Document, self: this.Document, value: value, _readOnly_: false }); }} setFinalColor={value => { - this.colorScript?.script.run({ this: this.layoutDoc, self: this.rootDoc, value: value, _readOnly_: false }); + this.colorScript?.script.run({ this: this.Document, self: this.Document, value: value, _readOnly_: false }); this.colorBatch?.end(); this.colorBatch = undefined; }} @@ -297,13 +280,13 @@ export class FontIconBox extends DocComponent<ButtonProps>() { } @computed get multiToggleButton() { // Determine the type of toggle button - const tooltip: string = StrCast(this.rootDoc.toolTip); + const tooltip: string = StrCast(this.Document.toolTip); - const script = ScriptCast(this.rootDoc.onClick); - const toggleStatus = script ? script.script.run({ this: this.layoutDoc, self: this.rootDoc, value: undefined, _readOnly_: true }).result : false; + const script = ScriptCast(this.Document.onClick); + const toggleStatus = script ? script.script.run({ this: this.Document, self: this.Document, value: undefined, _readOnly_: true }).result : false; // Colors - const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color); - const items = DocListCast(this.rootDoc.data); + const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color); + const items = DocListCast(this.dataDoc.data); return ( <MultiToggle tooltip={`Toggle ${tooltip}`} @@ -311,7 +294,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() { color={color} background={SettingsManager.userBackgroundColor} label={this.label} - items={DocListCast(this.rootDoc.data).map(item => ({ + items={DocListCast(this.dataDoc.data).map(item => ({ icon: <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={StrCast(item.icon) as any} color={color} />, tooltip: StrCast(item.toolTip), val: StrCast(item.toolType), @@ -327,14 +310,14 @@ export class FontIconBox extends DocComponent<ButtonProps>() { @computed get toggleButton() { // Determine the type of toggle button - const buttonText: string = StrCast(this.rootDoc.buttonText); - const tooltip: string = StrCast(this.rootDoc.toolTip); + const buttonText = StrCast(this.dataDoc.buttonText); + const tooltip = StrCast(this.Document.toolTip); - const script = ScriptCast(this.rootDoc.onClick); - const toggleStatus = script ? script.script.run({ this: this.layoutDoc, self: this.rootDoc, value: undefined, _readOnly_: true }).result : false; + const script = ScriptCast(this.Document.onClick); + const toggleStatus = script ? script.script.run({ this: this.Document, self: this.Document, value: undefined, _readOnly_: true }).result : false; // Colors - const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color); - const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor); + const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color); + const backgroundColor = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor); return ( <Toggle @@ -347,7 +330,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() { //background={SettingsManager.userBackgroundColor} icon={this.Icon(color)!} label={this.label} - onPointerDown={() => script.script.run({ this: this.layoutDoc, self: this.rootDoc, value: !toggleStatus, _readOnly_: false })} + onPointerDown={() => script.script.run({ this: this.Document, self: this.Document, value: !toggleStatus, _readOnly_: false })} /> ); } @@ -356,20 +339,20 @@ export class FontIconBox extends DocComponent<ButtonProps>() { * Default */ @computed get defaultButton() { - const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color); - const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor); - const tooltip: string = StrCast(this.rootDoc.toolTip); + const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color); + const backgroundColor = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor); + const tooltip: string = StrCast(this.Document.toolTip); return <IconButton tooltip={tooltip} icon={this.Icon(color)!} label={this.label} />; } @computed get editableText() { // Script for running the toggle - const script = ScriptCast(this.rootDoc.script); + const script = ScriptCast(this.Document.script); // Function to run the script - const checkResult = script?.script.run({ this: this.layoutDoc, self: this.rootDoc, value: '', _readOnly_: true }).result; + const checkResult = script?.script.run({ this: this.Document, self: this.Document, value: '', _readOnly_: true }).result; - const setValue = (value: string, shiftDown?: boolean): boolean => script?.script.run({ this: this.layoutDoc, self: this.rootDoc, value, _readOnly_: false }).result; + const setValue = (value: string, shiftDown?: boolean): boolean => script?.script.run({ this: this.Document, self: this.Document, value, _readOnly_: false }).result; return <EditableText editing={false} setEditing={(editing: boolean) => {}} />; @@ -377,16 +360,16 @@ export class FontIconBox extends DocComponent<ButtonProps>() { <div className="menuButton editableText"> <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={'lock'} /> <div style={{ width: 'calc(100% - .875em)', paddingLeft: '4px' }}> - <EditableView GetValue={() => script?.script.run({ this: this.layoutDoc, self: this.rootDoc, value: '', _readOnly_: true }).result} SetValue={setValue} oneLine={true} contents={checkResult} /> + <EditableView GetValue={() => script?.script.run({ this: this.Document, self: this.Document, value: '', _readOnly_: true }).result} SetValue={setValue} oneLine={true} contents={checkResult} /> </div> </div> ); } render() { - const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color); - const tooltip = StrCast(this.rootDoc.toolTip); - const scriptFunc = () => ScriptCast(this.rootDoc.onClick)?.script.run({ this: this.layoutDoc, self: this.rootDoc, _readOnly_: false }); + const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color); + const tooltip = StrCast(this.Document.toolTip); + const scriptFunc = () => ScriptCast(this.Document.onClick)?.script.run({ this: this.Document, self: this.Document, _readOnly_: false }); const btnProps = { tooltip, icon: this.Icon(color)!, label: this.label }; // prettier-ignore switch (this.type) { @@ -396,15 +379,14 @@ export class FontIconBox extends DocComponent<ButtonProps>() { case ButtonType.EditableText: return this.editableText; case ButtonType.DropdownList: return this.dropdownListButton; case ButtonType.ColorButton: return this.colorButton; - case ButtonType.DropdownButton: return this.dropdownButton; case ButtonType.MultiToggleButton: return this.multiToggleButton; case ButtonType.ToggleButton: return this.toggleButton; case ButtonType.ClickButton: case ButtonType.ToolButton: return <IconButton {...btnProps} size={Size.LARGE} color={color} />; case ButtonType.TextButton: return <Button {...btnProps} color={color} - background={SettingsManager.userBackgroundColor} text={StrCast(this.rootDoc.buttonText)}/>; + background={SettingsManager.userBackgroundColor} text={StrCast(this.dataDoc.buttonText)}/>; case ButtonType.MenuButton: return <IconButton {...btnProps} color={color} - background={SettingsManager.userBackgroundColor} size={Size.LARGE} tooltipPlacement='right' onPointerDown={scriptFunc} />; + background={SettingsManager.userBackgroundColor} size={Size.LARGE} tooltipPlacement='right' onPointerDown={scriptFunc} />; } return this.defaultButton; } diff --git a/src/client/views/nodes/FunctionPlotBox.tsx b/src/client/views/nodes/FunctionPlotBox.tsx index 40f48dafe..2e7a2120e 100644 --- a/src/client/views/nodes/FunctionPlotBox.tsx +++ b/src/client/views/nodes/FunctionPlotBox.tsx @@ -1,27 +1,19 @@ import functionPlot from 'function-plot'; -import { action, computed, reaction } from 'mobx'; +import { computed, makeObservable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, DocListCast } from '../../../fields/Doc'; -import { documentSchema } from '../../../fields/documentSchemas'; -import { Id } from '../../../fields/FieldSymbols'; import { List } from '../../../fields/List'; -import { createSchema, listSpec, makeInterface } from '../../../fields/Schema'; +import { listSpec } from '../../../fields/Schema'; import { Cast, StrCast } from '../../../fields/Types'; import { TraceMobx } from '../../../fields/util'; import { Docs } from '../../documents/Documents'; import { DragManager } from '../../util/DragManager'; import { undoBatch } from '../../util/UndoManager'; import { ViewBoxAnnotatableComponent } from '../DocComponent'; -import { DocFocusOptions, DocumentView } from './DocumentView'; import { FieldView, FieldViewProps } from './FieldView'; import { PinProps, PresBox } from './trails'; -const EquationSchema = createSchema({}); - -type EquationDocument = makeInterface<[typeof EquationSchema, typeof documentSchema]>; -const EquationDocument = makeInterface(EquationSchema, documentSchema); - @observer export class FunctionPlotBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { public static LayoutString(fieldKey: string) { @@ -31,23 +23,23 @@ export class FunctionPlotBox extends ViewBoxAnnotatableComponent<FieldViewProps> _plot: any; _plotId = ''; _plotEle: any; + constructor(props: any) { super(props); + makeObservable(this); this._plotId = 'graph' + FunctionPlotBox.GraphCount++; } + componentDidMount() { - this.props.setContentView?.(this); + this._props.setContentViewBox?.(this); reaction( - () => [DocListCast(this.dataDoc[this.fieldKey]).map(doc => doc?.text), this.layoutDoc.width, this.layoutDoc.height, this.rootDoc.xRange, this.rootDoc.yRange], + () => [DocListCast(this.dataDoc[this.fieldKey]).map(doc => doc?.text), this.layoutDoc.width, this.layoutDoc.height, this.layoutDoc.xRange, this.layoutDoc.yRange], () => this.createGraph() ); } getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => { - const anchor = Docs.Create.ConfigDocument({ - // - annotationOn: this.rootDoc, - }); - PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), datarange: true } }, this.rootDoc); + const anchor = Docs.Create.ConfigDocument({ annotationOn: this.Document }); + PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), datarange: true } }, this.Document); anchor.config_xRange = new List<number>(Array.from(this._plot.options.xAxis.domain)); anchor.config_yRange = new List<number>(Array.from(this._plot.options.yAxis.domain)); if (addAsAnnotation) this.addDocument(anchor); @@ -55,8 +47,8 @@ export class FunctionPlotBox extends ViewBoxAnnotatableComponent<FieldViewProps> }; createGraph = (ele?: HTMLDivElement) => { this._plotEle = ele || this._plotEle; - const width = this.props.PanelWidth(); - const height = this.props.PanelHeight(); + const width = this._props.PanelWidth(); + const height = this._props.PanelHeight(); const fns = DocListCast(this.dataDoc.data).map(doc => StrCast(doc.text, 'x^2').replace(/\\frac\{(.*)\}\{(.*)\}/, '($1/$2)')); try { this._plotEle.children.length && this._plotEle.removeChild(this._plotEle.children[0]); @@ -64,8 +56,8 @@ export class FunctionPlotBox extends ViewBoxAnnotatableComponent<FieldViewProps> target: '#' + this._plotEle.id, width, height, - xAxis: { domain: Cast(this.rootDoc.xRange, listSpec('number'), [-10, 10]) }, - yAxis: { domain: Cast(this.rootDoc.yRange, listSpec('number'), [-1, 9]) }, + xAxis: { domain: Cast(this.layoutDoc.xRange, listSpec('number'), [-10, 10]) }, + yAxis: { domain: Cast(this.layoutDoc.yRange, listSpec('number'), [-1, 9]) }, grid: true, data: fns.map(fn => ({ fn, @@ -80,7 +72,7 @@ export class FunctionPlotBox extends ViewBoxAnnotatableComponent<FieldViewProps> @undoBatch drop = (e: Event, de: DragManager.DropEvent) => { if (de.complete.docDragData?.droppedDocuments.length) { - const added = de.complete.docDragData.droppedDocuments.reduce((res, doc) => res && Doc.AddDocToList(this.dataDoc, this.props.fieldKey, doc), true); + const added = de.complete.docDragData.droppedDocuments.reduce((res, doc) => res && Doc.AddDocToList(this.dataDoc, this._props.fieldKey, doc), true); !added && e.preventDefault(); e.stopPropagation(); // prevent parent Doc from registering new position so that it snaps back into place return added; @@ -105,14 +97,14 @@ export class FunctionPlotBox extends ViewBoxAnnotatableComponent<FieldViewProps> <div ref={this.createDropTarget} style={{ - pointerEvents: !this.props.isContentActive() ? 'all' : undefined, - width: this.props.PanelWidth(), - height: this.props.PanelHeight(), + pointerEvents: !this._props.isContentActive() ? 'all' : undefined, + width: this._props.PanelWidth(), + height: this._props.PanelHeight(), }}> {this.theGraph} <div style={{ - display: this.props.isSelected() ? 'none' : undefined, + display: this._props.isSelected() ? 'none' : undefined, position: 'absolute', width: '100%', height: '100%', diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss index 29943e156..3ffda5a35 100644 --- a/src/client/views/nodes/ImageBox.scss +++ b/src/client/views/nodes/ImageBox.scss @@ -128,6 +128,7 @@ right: 0; bottom: 0; z-index: 2; + cursor: default; } .imageBox-fader img { diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 2f4f788d4..923aead64 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -1,64 +1,45 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Tooltip } from '@material-ui/core'; -import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from 'mobx'; +import { Tooltip } from '@mui/material'; +import { action, computed, IReactionDisposer, makeObservable, observable, ObservableMap, reaction } from 'mobx'; import { observer } from 'mobx-react'; import { extname } from 'path'; +import * as React from 'react'; import { Doc, DocListCast, Opt } from '../../../fields/Doc'; -import { DocData, Width } from '../../../fields/DocSymbols'; +import { DocData } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; import { InkTool } from '../../../fields/InkField'; -import { List } from '../../../fields/List'; import { ObjectField } from '../../../fields/ObjectField'; -import { createSchema } from '../../../fields/Schema'; -import { ComputedField } from '../../../fields/ScriptField'; import { Cast, NumCast, StrCast } from '../../../fields/Types'; import { ImageField } from '../../../fields/URLField'; import { TraceMobx } from '../../../fields/util'; import { DashColor, emptyFunction, returnEmptyString, returnFalse, returnOne, returnZero, setupMoveUpEvents, Utils } from '../../../Utils'; -import { GooglePhotos } from '../../apis/google_docs/GooglePhotosClientUtils'; -import { CognitiveServices, Confidence, Service, Tag } from '../../cognitive_services/CognitiveServices'; import { Docs, DocUtils } from '../../documents/Documents'; import { DocumentType } from '../../documents/DocumentTypes'; -import { Networking } from '../../Network'; import { DocumentManager } from '../../util/DocumentManager'; import { DragManager } from '../../util/DragManager'; import { undoBatch } from '../../util/UndoManager'; import { ContextMenu } from '../../views/ContextMenu'; import { CollectionFreeFormView } from '../collections/collectionFreeForm/CollectionFreeFormView'; import { ContextMenuProps } from '../ContextMenuItem'; -import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../DocComponent'; +import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../DocComponent'; import { MarqueeAnnotator } from '../MarqueeAnnotator'; import { AnchorMenu } from '../pdf/AnchorMenu'; import { StyleProp } from '../StyleProvider'; -import { DocFocusOptions, OpenWhere } from './DocumentView'; -import { FaceRectangles } from './FaceRectangles'; -import { FieldView, FieldViewProps } from './FieldView'; +import { OpenWhere } from './DocumentView'; +import { FocusViewOptions, FieldView, FieldViewProps } from './FieldView'; import './ImageBox.scss'; import { PinProps, PresBox } from './trails'; -import React = require('react'); - -export const pageSchema = createSchema({ - googlePhotosUrl: 'string', - googlePhotosTags: 'string', -}); -const uploadIcons = { - idle: 'downarrow.png', - loading: 'loading.gif', - success: 'greencheck.png', - failure: 'redx.png', -}; @observer -export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps>() { - protected _multiTouchDisposer?: import('../../util/InteractionUtils').InteractionUtils.MultiTouchEventDisposer | undefined; +export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(ImageBox, fieldKey); } - @observable public static imageRootDoc: Doc | undefined; + @observable public static imageRootDoc: Doc | undefined = undefined; @observable public static imageEditorOpen: boolean = false; @observable public static imageEditorSource: string = ''; - @observable public static addDoc: ((doc: Doc | Doc[], annotationKey?: string) => boolean) | undefined; + @observable public static addDoc: ((doc: Doc | Doc[], annotationKey?: string) => boolean) | undefined = undefined; @action public static setImageEditorOpen(open: boolean) { ImageBox.imageEditorOpen = open; } @@ -71,52 +52,53 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp private _disposers: { [name: string]: IReactionDisposer } = {}; private _getAnchor: (savedAnnotations: Opt<ObservableMap<number, HTMLDivElement[]>>, addAsAnnotation: boolean) => Opt<Doc> = () => undefined; private _overlayIconRef = React.createRef<HTMLDivElement>(); + private _marqueeref = React.createRef<MarqueeAnnotator>(); @observable _curSuffix = ''; - @observable _uploadIcon = uploadIcons.idle; - constructor(props: any) { + constructor(props: FieldViewProps) { super(props); - this.props.setContentView?.(this); + makeObservable(this); + this._props.setContentViewBox?.(this); } protected createDropTarget = (ele: HTMLDivElement) => { this._dropDisposer?.(); - ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this), this.props.Document)); + ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this), this.Document)); }; getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => { - const visibleAnchor = this._getAnchor?.(this._savedAnnotations, false); // use marquee anchor, otherwise, save zoom/pan as anchor + const visibleAnchor = this._getAnchor?.(this._savedAnnotations, true); // use marquee anchor, otherwise, save zoom/pan as anchor const anchor = visibleAnchor ?? Docs.Create.ConfigDocument({ - title: 'ImgAnchor:' + this.rootDoc.title, + title: 'ImgAnchor:' + this.Document.title, config_panX: NumCast(this.layoutDoc._freeform_panX), config_panY: NumCast(this.layoutDoc._freeform_panY), config_viewScale: Cast(this.layoutDoc._freeform_scale, 'number', null), - annotationOn: this.rootDoc, + annotationOn: this.Document, }); if (anchor) { if (!addAsAnnotation) anchor.backgroundColor = 'transparent'; addAsAnnotation && this.addDocument(anchor); - PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), pannable: visibleAnchor ? false : true } }, this.rootDoc); + PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), pannable: visibleAnchor ? false : true } }, this.Document); return anchor; } - return this.rootDoc; + return this.Document; }; componentDidMount() { this._disposers.sizer = reaction( () => ({ - forceFull: this.props.renderDepth < 1 || this.layoutDoc._showFullRes, - scrSize: (this.props.ScreenToLocalTransform().inverse().transformDirection(this.nativeSize.nativeWidth, this.nativeSize.nativeHeight)[0] / this.nativeSize.nativeWidth) * NumCast(this.rootDoc._freeform_scale, 1), - selected: this.props.isSelected(), + forceFull: this._props.renderDepth < 1 || this.layoutDoc._showFullRes, + scrSize: (this.ScreenToLocalBoxXf().inverse().transformDirection(this.nativeSize.nativeWidth, this.nativeSize.nativeHeight)[0] / this.nativeSize.nativeWidth) * NumCast(this.layoutDoc._freeform_scale, 1), + selected: this._props.isSelected(), }), ({ forceFull, scrSize, selected }) => (this._curSuffix = selected ? '_o' : this.fieldKey === 'icon' ? '_m' : forceFull ? '_o' : scrSize < 0.25 ? '_s' : scrSize < 0.5 ? '_m' : scrSize < 0.8 ? '_l' : '_o'), { fireImmediately: true, delay: 1000 } ); const layoutDoc = this.layoutDoc; this._disposers.path = reaction( - () => ({ nativeSize: this.nativeSize, width: this.layoutDoc[Width]() }), + () => ({ nativeSize: this.nativeSize, width: NumCast(this.layoutDoc._width) }), ({ nativeSize, width }) => { if (layoutDoc === this.layoutDoc || !this.layoutDoc._height) { this.layoutDoc._height = (width * nativeSize.nativeHeight) / nativeSize.nativeWidth; @@ -141,7 +123,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp } @undoBatch - @action drop = (e: Event, de: DragManager.DropEvent) => { if (de.complete.docDragData) { let added: boolean | undefined = undefined; @@ -152,7 +133,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp }; if (de.metaKey || targetIsBullseye(e.target as HTMLElement)) { added = de.complete.docDragData.droppedDocuments.reduce((last: boolean, drop: Doc) => { - this.rootDoc[this.fieldKey + '_usePath'] = 'alternate:hover'; + this.layoutDoc[this.fieldKey + '_usePath'] = 'alternate:hover'; return last && Doc.AddDocToList(this.dataDoc, this.fieldKey + '-alternates', drop); }, true); } else if (de.altKey || !this.dataDoc[this.fieldKey]) { @@ -177,13 +158,13 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp @undoBatch setNativeSize = action(() => { - const scaling = (this.props.DocumentView?.().props.ScreenToLocalTransform().Scale || 1) / NumCast(this.rootDoc._freeform_scale, 1); - const nscale = NumCast(this.props.PanelWidth()) / scaling; + const scaling = (this.DocumentView?.().screenToViewTransform().Scale || 1) / NumCast(this.layoutDoc._freeform_scale, 1); + const nscale = NumCast(this._props.PanelWidth()) / scaling; const nw = nscale / NumCast(this.dataDoc[this.fieldKey + '_nativeWidth']); this.dataDoc[this.fieldKey + '_nativeHeight'] = NumCast(this.dataDoc[this.fieldKey + '_nativeHeight']) * nw; this.dataDoc[this.fieldKey + '_nativeWidth'] = NumCast(this.dataDoc[this.fieldKey + '_nativeWidth']) * nw; - this.rootDoc._freeform_panX = nw * NumCast(this.rootDoc._freeform_panX); - this.rootDoc._freeform_panY = nw * NumCast(this.rootDoc._freeform_panY); + this.layoutDoc._freeform_panX = nw * NumCast(this.layoutDoc._freeform_panX); + this.layoutDoc._freeform_panY = nw * NumCast(this.layoutDoc._freeform_panY); this.dataDoc._freeform_panXMax = this.dataDoc._freeform_panXMax ? nw * NumCast(this.dataDoc._freeform_panXMax) : undefined; this.dataDoc._freeform_panXMin = this.dataDoc._freeform_panXMin ? nw * NumCast(this.dataDoc._freeform_panXMin) : undefined; this.dataDoc._freeform_panYMax = this.dataDoc._freeform_panYMax ? nw * NumCast(this.dataDoc._freeform_panYMax) : undefined; @@ -205,29 +186,30 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp crop = (region: Doc | undefined, addCrop?: boolean) => { if (!region) return; const cropping = Doc.MakeCopy(region, true); - Doc.GetProto(region).lockedPosition = true; - Doc.GetProto(region).title = 'region:' + this.rootDoc.title; - Doc.GetProto(region).followLinkToggle = true; + const regionData = region[DocData]; + regionData.lockedPosition = true; + regionData.title = 'region:' + this.Document.title; + regionData.followLinkToggle = true; this.addDocument(region); const anchx = NumCast(cropping.x); const anchy = NumCast(cropping.y); const anchw = NumCast(cropping._width); const anchh = NumCast(cropping._height); - const viewScale = NumCast(this.rootDoc[this.fieldKey + '_nativeWidth']) / anchw; - cropping.title = 'crop: ' + this.rootDoc.title; - cropping.x = NumCast(this.rootDoc.x) + NumCast(this.rootDoc._width); - cropping.y = NumCast(this.rootDoc.y); - cropping._width = anchw * (this.props.NativeDimScaling?.() || 1); - cropping._height = anchh * (this.props.NativeDimScaling?.() || 1); + const viewScale = NumCast(this.dataDoc[this.fieldKey + '_nativeWidth']) / anchw; + cropping.title = 'crop: ' + this.Document.title; + cropping.x = NumCast(this.Document.x) + NumCast(this.layoutDoc._width); + cropping.y = NumCast(this.Document.y); + cropping._width = anchw * (this._props.NativeDimScaling?.() || 1); + cropping._height = anchh * (this._props.NativeDimScaling?.() || 1); cropping.onClick = undefined; - const croppingProto = Doc.GetProto(cropping); + const croppingProto = cropping[DocData]; croppingProto.annotationOn = undefined; croppingProto.isDataDoc = true; croppingProto.backgroundColor = undefined; - croppingProto.proto = Cast(this.rootDoc.proto, Doc, null)?.proto; // set proto of cropping's data doc to be IMAGE_PROTO + croppingProto.proto = Cast(this.Document.proto, Doc, null)?.proto; // set proto of cropping's data doc to be IMAGE_PROTO croppingProto.type = DocumentType.IMG; croppingProto.layout = ImageBox.LayoutString('data'); - croppingProto.data = ObjectField.MakeCopy(this.rootDoc[this.fieldKey] as ObjectField); + croppingProto.data = ObjectField.MakeCopy(this.dataDoc[this.fieldKey] as ObjectField); croppingProto['data_nativeWidth'] = anchw; croppingProto['data_nativeHeight'] = anchh; croppingProto.freeform_scale = viewScale; @@ -240,12 +222,12 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp croppingProto.freeform_panY_max = anchh / viewScale; if (addCrop) { DocUtils.MakeLink(region, cropping, { link_relationship: 'cropped image' }); - cropping.x = NumCast(this.rootDoc.x) + this.rootDoc[Width](); - cropping.y = NumCast(this.rootDoc.y); - this.props.addDocTab(cropping, OpenWhere.inParent); + cropping.x = NumCast(this.Document.x) + NumCast(this.layoutDoc._width); + cropping.y = NumCast(this.Document.y); + this._props.addDocTab(cropping, OpenWhere.inParent); } DocumentManager.Instance.AddViewRenderedCb(cropping, dv => setTimeout(() => (dv.ComponentView as ImageBox).setNativeSize(), 200)); - this.props.bringToFront(cropping); + this._props.bringToFront?.(cropping); return cropping; }; @@ -262,55 +244,15 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp event: action(() => { ImageBox.setImageEditorOpen(true); ImageBox.setImageEditorSource(this.choosePath(field.url)); - ImageBox.addDoc = this.props.addDocument; - ImageBox.imageRootDoc = this.rootDoc; + ImageBox.addDoc = this._props.addDocument; + ImageBox.imageRootDoc = this.Document; }), icon: 'pencil-alt', }); - if (!Doc.noviceMode) { - funcs.push({ description: 'Export to Google Photos', event: () => GooglePhotos.Transactions.UploadImages([this.props.Document]), icon: 'caret-square-right' }); - - const existingAnalyze = ContextMenu.Instance?.findByDescription('Analyzers...'); - const modes: ContextMenuProps[] = existingAnalyze && 'subitems' in existingAnalyze ? existingAnalyze.subitems : []; - modes.push({ description: 'Generate Tags', event: this.generateMetadata, icon: 'tag' }); - modes.push({ description: 'Find Faces', event: this.extractFaces, icon: 'camera' }); - //modes.push({ description: "Recommend", event: this.extractText, icon: "brain" }); - !existingAnalyze && ContextMenu.Instance?.addItem({ description: 'Analyzers...', subitems: modes, icon: 'hand-point-right' }); - } - ContextMenu.Instance?.addItem({ description: 'Options...', subitems: funcs, icon: 'asterisk' }); } }; - extractFaces = () => { - const converter = (results: any) => { - return results.map((face: CognitiveServices.Image.Face) => Doc.Get.FromJson({ data: face, title: `Face: ${face.faceId}` })!); - }; - this.url && CognitiveServices.Image.Appliers.ProcessImage(this.dataDoc, [this.fieldKey + '-faces'], this.url, Service.Face, converter); - }; - - generateMetadata = (threshold: Confidence = Confidence.Excellent) => { - const converter = (results: any) => { - const tagDoc = new Doc(); - const tagsList = new List(); - results.tags.map((tag: Tag) => { - tagsList.push(tag.name); - const sanitized = tag.name.replace(' ', '_'); - tagDoc[sanitized] = ComputedField.MakeFunction(`(${tag.confidence} >= this.confidence) ? ${tag.confidence} : "${ComputedField.undefined}"`); - }); - this.dataDoc[this.fieldKey + '-generatedTags'] = tagsList; - tagDoc.title = 'Generated Tags Doc'; - tagDoc.confidence = threshold; - return tagDoc; - }; - this.url && CognitiveServices.Image.Appliers.ProcessImage(this.dataDoc, [this.fieldKey + '-generatedTagsDoc'], this.url, Service.ComputerVision, converter); - }; - - @computed private get url() { - const data = Cast(this.dataDoc[this.fieldKey], ImageField); - return data ? data.url?.href : undefined; - } - choosePath(url: URL) { if (!url?.href) return ''; const lower = url.href.toLowerCase(); @@ -319,62 +261,9 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp if (!/\.(png|jpg|jpeg|gif|webp)$/.test(lower)) return `/assets/unknown-file-icon-hi.png`; const ext = extname(url.href); - return url.href.replace(ext, this._curSuffix + ext); - } - - considerGooglePhotosLink = () => { - const remoteUrl = StrCast(this.dataDoc.googlePhotosUrl); // bcz: StrCast or URLCast??? - return !remoteUrl ? null : <img draggable={false} style={{ transformOrigin: 'bottom right' }} id={'google-photos'} src={'/assets/google_photos.png'} onClick={() => window.open(remoteUrl)} />; - }; - - considerGooglePhotosTags = () => { - const tags = this.dataDoc.googlePhotosTags; - return !tags ? null : <img id={'google-tags'} src={'/assets/google_tags.png'} />; - }; - - getScrollHeight = () => (this.props.layout_fitWidth?.(this.rootDoc) !== false && NumCast(this.rootDoc._freeform_scale, 1) === NumCast(this.rootDoc._freeform_scaleMin, 1) ? this.nativeSize.nativeHeight : undefined); - - @computed - private get considerDownloadIcon() { - const data = this.dataDoc[this.fieldKey]; - if (!(data instanceof ImageField)) { - return null; - } - const primary = data.url?.href; - if (primary.includes(window.location.origin)) { - return null; - } - return ( - <img - id={'upload-icon'} - draggable={false} - style={{ transformOrigin: 'bottom right' }} - src={`/assets/${this._uploadIcon}`} - onClick={async () => { - const { dataDoc } = this; - const { success, failure, idle, loading } = uploadIcons; - runInAction(() => (this._uploadIcon = loading)); - const [{ accessPaths }] = await Networking.PostToServer('/uploadRemoteImage', { sources: [primary] }); - dataDoc[this.props.fieldKey + '-originalUrl'] = primary; - let succeeded = true; - let data: ImageField | undefined; - try { - data = new ImageField(accessPaths.agnostic.client); - } catch { - succeeded = false; - } - runInAction(() => (this._uploadIcon = succeeded ? success : failure)); - setTimeout( - action(() => { - this._uploadIcon = idle; - data && (dataDoc[this.fieldKey] = data); - }), - 2000 - ); - }} - /> - ); + return url.href.replace(ext, (this._error ? '_o' : this._curSuffix) + ext); } + getScrollHeight = () => (this._props.layout_fitWidth?.(this.Document) !== false && NumCast(this.layoutDoc._freeform_scale, 1) === NumCast(this.dataDoc._freeform_scaleMin, 1) ? this.nativeSize.nativeHeight : undefined); @computed get nativeSize() { TraceMobx(); @@ -384,7 +273,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp return { nativeWidth, nativeHeight, nativeOrientation }; } @computed get overlayImageIcon() { - const usePath = this.rootDoc[`_${this.fieldKey}_usePath`]; + const usePath = this.layoutDoc[`_${this.fieldKey}_usePath`]; return ( <Tooltip title={ @@ -405,9 +294,9 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp <div className="imageBox-alternateDropTarget" ref={this._overlayIconRef} - onPointerDown={e => setupMoveUpEvents(e.target, e, returnFalse, emptyFunction, e => (this.rootDoc[`_${this.fieldKey}_usePath`] = usePath === undefined ? 'alternate' : usePath === 'alternate' ? 'alternate:hover' : undefined))} + onPointerDown={e => setupMoveUpEvents(e.target, e, returnFalse, emptyFunction, e => (this.layoutDoc[`_${this.fieldKey}_usePath`] = usePath === undefined ? 'alternate' : usePath === 'alternate' ? 'alternate:hover' : undefined))} style={{ - display: (this.props.isContentActive() !== false && DragManager.DocDragData?.canEmbed) || DocListCast(this.dataDoc[this.fieldKey + '-alternates']).length ? 'block' : 'none', + display: (this._props.isContentActive() !== false && DragManager.DocDragData?.canEmbed) || DocListCast(this.dataDoc[this.fieldKey + '-alternates']).length ? 'block' : 'none', width: 'min(10%, 25px)', height: 'min(10%, 25px)', background: usePath === undefined ? 'white' : usePath === 'alternate' ? 'black' : 'gray', @@ -430,11 +319,13 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp return paths.length ? paths : [Utils.CorsProxy('https://cs.brown.edu/~bcz/noImage.png')]; } + @observable _error = ''; + @observable _isHovering = false; // flag to switch between primary and alternate images on hover @computed get content() { TraceMobx(); - const backColor = DashColor(this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor)); + const backColor = DashColor(this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor)); const backAlpha = backColor.red() === 0 && backColor.green() === 0 && backColor.blue() === 0 ? backColor.alpha() : 1; const srcpath = this.layoutDoc.hideImage ? '' : this.paths[0]; const fadepath = this.layoutDoc.hideImage ? '' : this.paths.lastElement(); @@ -452,21 +343,18 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp transformOrigin = 'right top'; transform = `translate(-100%, 0%) rotate(${rotation}deg) scale(${aspect})`; } - const usePath = this.rootDoc[`_${this.fieldKey}_usePath`]; + const usePath = this.layoutDoc[`_${this.fieldKey}_usePath`]; return ( <div className="imageBox-cont" onPointerEnter={action(() => (this._isHovering = true))} onPointerLeave={action(() => (this._isHovering = false))} key={this.layoutDoc[Id]} ref={this.createDropTarget} onPointerDown={this.marqueeDown}> <div className="imageBox-fader" style={{ opacity: backAlpha }}> - <img key="paths" src={srcpath} style={{ transform, transformOrigin }} draggable={false} width={nativeWidth} /> + <img key="paths" src={srcpath} style={{ transform, transformOrigin }} onError={action(e => (this._error = e.toString()))} draggable={false} width={nativeWidth} /> {fadepath === srcpath ? null : ( <div className={`imageBox-fadeBlocker${(this._isHovering && usePath === 'alternate:hover') || usePath === 'alternate' ? '-hover' : ''}`} style={{ transition: StrCast(this.layoutDoc.viewTransition, 'opacity 1000ms') }}> <img className="imageBox-fadeaway" key="fadeaway" src={fadepath} style={{ transform, transformOrigin }} draggable={false} width={nativeWidth} /> </div> )} </div> - {!Doc.noviceMode && this.considerDownloadIcon} - {this.considerGooglePhotosLink()} - <FaceRectangles document={this.dataDoc} color={'#0000FF'} backgroundColor={'#0000FF'} /> {this.overlayImageIcon} </div> ); @@ -474,21 +362,20 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp private _mainCont: React.RefObject<HTMLDivElement> = React.createRef(); private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef(); - @observable _marqueeing: number[] | undefined; @observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>(); @computed get annotationLayer() { TraceMobx(); - return <div className="imageBox-annotationLayer" style={{ height: this.props.PanelHeight() }} ref={this._annotationLayer} />; + return <div className="imageBox-annotationLayer" style={{ height: this._props.PanelHeight() }} ref={this._annotationLayer} />; } - screenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(0, NumCast(this.layoutDoc._layout_scrollTop) * this.props.ScreenToLocalTransform().Scale); + screenToLocalTransform = () => this.ScreenToLocalBoxXf().translate(0, NumCast(this.layoutDoc._layout_scrollTop) * this.ScreenToLocalBoxXf().Scale); marqueeDown = (e: React.PointerEvent) => { - if (!e.altKey && e.button === 0 && NumCast(this.rootDoc._freeform_scale, 1) <= NumCast(this.rootDoc.freeform_scaleMin, 1) && this.props.isContentActive(true) && ![InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) { + if (!e.altKey && e.button === 0 && NumCast(this.layoutDoc._freeform_scale, 1) <= NumCast(this.dataDoc.freeform_scaleMin, 1) && this._props.isContentActive() && ![InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) { setupMoveUpEvents( this, e, action(e => { MarqueeAnnotator.clearAnnotations(this._savedAnnotations); - this._marqueeing = [e.clientX, e.clientY]; + this._marqueeref.current?.onInitiateSelection([e.clientX, e.clientY]); return true; }), returnFalse, @@ -500,17 +387,17 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp @action finishMarquee = () => { this._getAnchor = AnchorMenu.Instance?.GetAnchor; - this._marqueeing = undefined; - this.props.select(false); + this._marqueeref.current?.onTerminateSelection(); + this._props.select(false); }; - focus = (anchor: Doc, options: DocFocusOptions) => (anchor.type === DocumentType.CONFIG ? undefined : this._ffref.current?.focus(anchor, options)); + focus = (anchor: Doc, options: FocusViewOptions) => (anchor.type === DocumentType.CONFIG ? undefined : this._ffref.current?.focus(anchor, options)); _ffref = React.createRef<CollectionFreeFormView>(); savedAnnotations = () => this._savedAnnotations; render() { TraceMobx(); - const borderRad = this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BorderRounding); - const borderRadius = borderRad?.includes('px') ? `${Number(borderRad.split('px')[0]) / (this.props.NativeDimScaling?.() || 1)}px` : borderRad; + const borderRad = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BorderRounding); + const borderRadius = borderRad?.includes('px') ? `${Number(borderRad.split('px')[0]) / (this._props.NativeDimScaling?.() || 1)}px` : borderRad; return ( <div className="imageBox" @@ -526,25 +413,25 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp } })} style={{ - width: this.props.PanelWidth() ? undefined : `100%`, - height: this.props.PanelWidth() ? undefined : `100%`, + width: this._props.PanelWidth() ? undefined : `100%`, + height: this._props.PanelWidth() ? undefined : `100%`, pointerEvents: this.layoutDoc._lockedPosition ? 'none' : undefined, borderRadius, - overflow: this.layoutDoc.layout_fitWidth || this.props.layout_fitWidth?.(this.rootDoc) ? 'auto' : undefined, + overflow: this.layoutDoc.layout_fitWidth || this._props.layout_fitWidth?.(this.Document) ? 'auto' : undefined, }}> <CollectionFreeFormView ref={this._ffref} - {...this.props} - setContentView={emptyFunction} + {...this._props} + setContentViewBox={emptyFunction} NativeWidth={returnZero} NativeHeight={returnZero} - renderDepth={this.props.renderDepth + 1} + renderDepth={this._props.renderDepth + 1} fieldKey={this.annotationKey} - styleProvider={this.props.styleProvider} + styleProvider={this._props.styleProvider} isAnnotationOverlay={true} annotationLayerHostsContent={true} - PanelWidth={this.props.PanelWidth} - PanelHeight={this.props.PanelHeight} + PanelWidth={this._props.PanelWidth} + PanelHeight={this._props.PanelHeight} ScreenToLocalTransform={this.screenToLocalTransform} select={emptyFunction} focus={this.focus} @@ -558,19 +445,21 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp {this.content} </CollectionFreeFormView> {this.annotationLayer} - {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? null : ( + {!this._mainCont.current || !this.DocumentView || !this._annotationLayer.current ? null : ( <MarqueeAnnotator - rootDoc={this.rootDoc} + Document={this.Document} + ref={this._marqueeref} scrollTop={0} - down={this._marqueeing} - scaling={this.props.NativeDimScaling} - docView={this.props.docViewPath().slice(-1)[0]} + annotationLayerScrollTop={0} + scaling={returnOne} + annotationLayerScaling={this._props.NativeDimScaling} + docView={this.DocumentView} addDocument={this.addDocument} finishMarquee={this.finishMarquee} savedAnnotations={this.savedAnnotations} selectionText={returnEmptyString} annotationLayer={this._annotationLayer.current} - mainCont={this._mainCont.current} + marqueeContainer={this._mainCont.current} highlightDragSrcColor={''} anchorMenuCrop={this.crop} /> diff --git a/src/client/views/nodes/KeyValueBox.scss b/src/client/views/nodes/KeyValueBox.scss index ffcba4981..a44f614b2 100644 --- a/src/client/views/nodes/KeyValueBox.scss +++ b/src/client/views/nodes/KeyValueBox.scss @@ -1,7 +1,7 @@ -@import "../global/globalCssVariables"; +@import '../global/globalCssVariables.module.scss'; .keyValueBox-cont { overflow-y: scroll; - width:100%; + width: 100%; height: 100%; background-color: $white; border: 1px solid $medium-gray; @@ -15,45 +15,45 @@ } $header-height: 30px; .keyValueBox-tbody { - width:100%; - height:100%; + width: 100%; + height: 100%; position: absolute; overflow-y: scroll; } .keyValueBox-key { display: inline-block; - height:100%; - width:50%; + height: 100%; + width: 50%; text-align: center; } .keyValueBox-fields { display: inline-block; - height:100%; - width:50%; + height: 100%; + width: 50%; text-align: center; } .keyValueBox-table { position: absolute; - width:100%; - height:100%; + width: 100%; + height: 100%; border-collapse: collapse; } .keyValueBox-td-key { - display:inline-block; - height:30px; + display: inline-block; + height: 30px; } .keyValueBox-td-value { - display:inline-block; - height:30px; + display: inline-block; + height: 30px; } .keyValueBox-valueRow { - width:100%; - height:30px; + width: 100%; + height: 30px; display: inline-block; } .keyValueBox-header { - width:100%; + width: 100%; position: relative; display: inline-block; background: $medium-gray; @@ -74,8 +74,8 @@ $header-height: 30px; .keyValueBox-evenRow { position: relative; display: flex; - width:100%; - height:$header-height; + width: 100%; + height: $header-height; background: $white; .formattedTextBox-cont { background: $white; @@ -86,10 +86,10 @@ $header-height: 30px; position: relative; } } -.keyValueBox-dividerDraggerThumb{ +.keyValueBox-dividerDraggerThumb { position: relative; width: 4px; - float: left; + float: left; height: 30px; width: 5px; z-index: 20; @@ -99,10 +99,10 @@ $header-height: 30px; background: black; pointer-events: all; } -.keyValueBox-dividerDragger{ - position: relative; +.keyValueBox-dividerDragger { + position: relative; width: 100%; - float: left; + float: left; height: 37px; z-index: 20; right: 0; @@ -114,10 +114,10 @@ $header-height: 30px; .keyValueBox-oddRow { position: relative; display: flex; - width:100%; - height:30px; + width: 100%; + height: 30px; background: $light-gray; .formattedTextBox-cont { background: $light-gray; } -}
\ No newline at end of file +} diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx index 673f711be..39a45693e 100644 --- a/src/client/views/nodes/KeyValueBox.tsx +++ b/src/client/views/nodes/KeyValueBox.tsx @@ -1,26 +1,27 @@ -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; +import { returnAlways, returnTrue } from '../../../Utils'; import { Doc, Field, FieldResult } from '../../../fields/Doc'; import { List } from '../../../fields/List'; import { RichTextField } from '../../../fields/RichTextField'; import { ComputedField, ScriptField } from '../../../fields/ScriptField'; import { DocCast } from '../../../fields/Types'; import { ImageField } from '../../../fields/URLField'; -import { returnAll, returnAlways, returnTrue } from '../../../Utils'; import { Docs } from '../../documents/Documents'; import { SetupDrag } from '../../util/DragManager'; -import { CompiledScript, CompileScript, ScriptOptions } from '../../util/Scripting'; +import { CompileScript, CompiledScript, ScriptOptions } from '../../util/Scripting'; import { undoBatch } from '../../util/UndoManager'; import { ContextMenu } from '../ContextMenu'; import { ContextMenuProps } from '../ContextMenuItem'; +import { ObservableReactComponent } from '../ObservableReactComponent'; import { DocumentIconContainer } from './DocumentIcon'; import { OpenWhere } from './DocumentView'; import { FieldView, FieldViewProps } from './FieldView'; -import { FormattedTextBox } from './formattedText/FormattedTextBox'; import { ImageBox } from './ImageBox'; import './KeyValueBox.scss'; import { KeyValuePair } from './KeyValuePair'; -import React = require('react'); +import { FormattedTextBox } from './formattedText/FormattedTextBox'; export type KVPScript = { script: CompiledScript; @@ -28,10 +29,14 @@ export type KVPScript = { onDelegate: boolean; }; @observer -export class KeyValueBox extends React.Component<FieldViewProps> { +export class KeyValueBox extends ObservableReactComponent<FieldViewProps> { public static LayoutString() { return FieldView.LayoutString(KeyValueBox, 'data'); } + constructor(props: any) { + super(props); + makeObservable(this); + } private _mainCont = React.createRef<HTMLDivElement>(); private _keyHeader = React.createRef<HTMLTableHeaderCellElement>(); @@ -39,19 +44,18 @@ export class KeyValueBox extends React.Component<FieldViewProps> { private _valInput = React.createRef<HTMLInputElement>(); componentDidMount() { - this.props.setContentView?.(this); + this._props.setContentViewBox?.(this); } - reverseNativeScaling = returnTrue; + isKeyValueBox = returnTrue; able = returnAlways; layout_fitWidth = returnTrue; - overridePointerEvents = returnAll; onClickScriptDisable = returnAlways; @observable private rows: KeyValuePair[] = []; @observable _splitPercentage = 50; get fieldDocToLayout() { - return this.props.fieldKey ? DocCast(this.props.Document[this.props.fieldKey], DocCast(this.props.Document)) : this.props.Document; + return this._props.fieldKey ? DocCast(this._props.Document[this._props.fieldKey], DocCast(this._props.Document)) : this._props.Document; } @action @@ -110,7 +114,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> { } onPointerDown = (e: React.PointerEvent): void => { - if (e.buttons === 1 && this.props.isSelected(true)) { + if (e.buttons === 1 && this._props.isSelected()) { e.stopPropagation(); } }; @@ -156,8 +160,8 @@ export class KeyValueBox extends React.Component<FieldViewProps> { rows.push( <KeyValuePair doc={realDoc} - addDocTab={this.props.addDocTab} - PanelWidth={this.props.PanelWidth} + addDocTab={this._props.addDocTab} + PanelWidth={this._props.PanelWidth} PanelHeight={this.rowHeight} ref={(function () { let oldEl: KeyValuePair | undefined; @@ -221,19 +225,19 @@ export class KeyValueBox extends React.Component<FieldViewProps> { getFieldView = () => { const rows = this.rows.filter(row => row.isChecked); if (rows.length > 1) { - const parent = Docs.Create.StackingDocument([], { _layout_autoHeight: true, _width: 300, title: `field views for ${DocCast(this.props.Document).title}`, _chromeHidden: true }); + const parent = Docs.Create.StackingDocument([], { _layout_autoHeight: true, _width: 300, title: `field views for ${DocCast(this._props.Document).title}`, _chromeHidden: true }); for (const row of rows) { - const field = this.createFieldView(DocCast(this.props.Document), row); + const field = this.createFieldView(DocCast(this._props.Document), row); field && Doc.AddDocToList(parent, 'data', field); row.uncheck(); } return parent; } - return rows.length ? this.createFieldView(DocCast(this.props.Document), rows.lastElement()) : undefined; + return rows.length ? this.createFieldView(DocCast(this._props.Document), rows.lastElement()) : undefined; }; createFieldView = (templateDoc: Doc, row: KeyValuePair) => { - const metaKey = row.props.keyName; + const metaKey = row._props.keyName; const fieldTemplate = Doc.IsDelegateField(templateDoc, metaKey) ? Doc.MakeDelegate(templateDoc) : Doc.MakeEmbedding(templateDoc); fieldTemplate.title = metaKey; fieldTemplate.layout_fitWidth = true; @@ -279,8 +283,8 @@ export class KeyValueBox extends React.Component<FieldViewProps> { openItems.push({ description: 'Default Perspective', event: () => { - this.props.addDocTab(this.props.Document, OpenWhere.close); - this.props.addDocTab(this.fieldDocToLayout, OpenWhere.addRight); + this._props.addDocTab(this._props.Document, OpenWhere.close); + this._props.addDocTab(this.fieldDocToLayout, OpenWhere.addRight); }, icon: 'image', }); diff --git a/src/client/views/nodes/KeyValuePair.scss b/src/client/views/nodes/KeyValuePair.scss index 57d36932e..46ea9c18e 100644 --- a/src/client/views/nodes/KeyValuePair.scss +++ b/src/client/views/nodes/KeyValuePair.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; .keyValuePair-td-key { display: inline-block; @@ -26,6 +26,7 @@ position: relative; overflow: auto; display: inline; + align-self: center; } } } diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx index f22cb195f..f9e8ce4f3 100644 --- a/src/client/views/nodes/KeyValuePair.tsx +++ b/src/client/views/nodes/KeyValuePair.tsx @@ -1,21 +1,21 @@ -import { action, observable } from 'mobx'; +import { Tooltip } from '@mui/material'; +import { action, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; -import { Doc, Field } from '../../../fields/Doc'; +import * as React from 'react'; import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero } from '../../../Utils'; +import { Doc, Field } from '../../../fields/Doc'; +import { DocCast } from '../../../fields/Types'; +import { DocumentOptions, FInfo } from '../../documents/Documents'; import { Transform } from '../../util/Transform'; import { undoBatch } from '../../util/UndoManager'; import { ContextMenu } from '../ContextMenu'; import { EditableView } from '../EditableView'; +import { ObservableReactComponent } from '../ObservableReactComponent'; import { DefaultStyleProvider } from '../StyleProvider'; -import { OpenWhere } from './DocumentView'; -import { FieldView, FieldViewProps } from './FieldView'; +import { OpenWhere, returnEmptyDocViewList } from './DocumentView'; import { KeyValueBox } from './KeyValueBox'; import './KeyValueBox.scss'; import './KeyValuePair.scss'; -import React = require('react'); -import { DocCast } from '../../../fields/Types'; -import { Tooltip } from '@material-ui/core'; -import { DocumentOptions, FInfo } from '../../documents/Documents'; // Represents one row in a key value plane @@ -29,10 +29,14 @@ export interface KeyValuePairProps { addDocTab: (doc: Doc, where: OpenWhere) => boolean; } @observer -export class KeyValuePair extends React.Component<KeyValuePairProps> { +export class KeyValuePair extends ObservableReactComponent<KeyValuePairProps> { @observable private isPointerOver = false; @observable public isChecked = false; private checkbox = React.createRef<HTMLInputElement>(); + constructor(props: any) { + super(props); + makeObservable(this); + } @action handleCheck = (e: React.ChangeEvent<HTMLInputElement>) => { @@ -46,46 +50,21 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> { }; onContextMenu = (e: React.MouseEvent) => { - const value = this.props.doc[this.props.keyName]; + const value = this._props.doc[this._props.keyName]; if (value instanceof Doc) { e.stopPropagation(); e.preventDefault(); - ContextMenu.Instance.addItem({ description: 'Open Fields', event: () => this.props.addDocTab(value, ((OpenWhere.addRight as string) + 'KeyValue') as OpenWhere), icon: 'layer-group' }); + ContextMenu.Instance.addItem({ description: 'Open Fields', event: () => this._props.addDocTab(value, OpenWhere.addRightKeyvalue), icon: 'layer-group' }); ContextMenu.Instance.displayMenu(e.clientX, e.clientY); } }; render() { - const props: FieldViewProps = { - Document: this.props.doc, - DataDoc: this.props.doc, - childFilters: returnEmptyFilter, - childFiltersByRanges: returnEmptyFilter, - searchFilterDocs: returnEmptyDoclist, - styleProvider: DefaultStyleProvider, - docViewPath: returnEmptyDoclist, - fieldKey: this.props.keyName, - rootSelected: returnFalse, - isSelected: returnFalse, - setHeight: returnFalse, - select: emptyFunction, - bringToFront: emptyFunction, - renderDepth: 1, - isContentActive: returnFalse, - whenChildContentsActiveChanged: emptyFunction, - ScreenToLocalTransform: Transform.Identity, - focus: emptyFunction, - PanelWidth: this.props.PanelWidth, - PanelHeight: this.props.PanelHeight, - addDocTab: returnFalse, - pinToPres: returnZero, - }; - const contents = <FieldView {...props} />; // let fieldKey = Object.keys(props.Document).indexOf(props.fieldKey) !== -1 ? props.fieldKey : "(" + props.fieldKey + ")"; let protoCount = 0; - let doc: Doc | undefined = props.Document; + let doc = this._props.doc; while (doc) { - if (Object.keys(doc).includes(props.fieldKey)) { + if (Object.keys(doc).includes(this._props.keyName)) { break; } protoCount++; @@ -97,32 +76,57 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> { const hover = { transition: '0.3s ease opacity', opacity: this.isPointerOver || this.isChecked ? 1 : 0 }; return ( - <tr className={this.props.rowStyle} onPointerEnter={action(() => (this.isPointerOver = true))} onPointerLeave={action(() => (this.isPointerOver = false))}> - <td className="keyValuePair-td-key" style={{ width: `${this.props.keyWidth}%` }}> + <tr className={this._props.rowStyle} onPointerEnter={action(() => (this.isPointerOver = true))} onPointerLeave={action(() => (this.isPointerOver = false))}> + <td className="keyValuePair-td-key" style={{ width: `${this._props.keyWidth}%` }}> <div className="keyValuePair-td-key-container"> <button style={hover} className="keyValuePair-td-key-delete" onClick={undoBatch(() => { - if (Object.keys(props.Document).indexOf(props.fieldKey) !== -1) { - delete props.Document[props.fieldKey]; - } else delete DocCast(props.Document.proto)?.[props.fieldKey]; + if (Object.keys(this._props.doc).indexOf(this._props.keyName) !== -1) { + delete this._props.doc[this._props.keyName]; + } else delete DocCast(this._props.doc.proto)?.[this._props.keyName]; })}> X </button> <input className="keyValuePair-td-key-check" type="checkbox" style={hover} onChange={this.handleCheck} ref={this.checkbox} /> - <Tooltip title={Object.entries(new DocumentOptions()).find((pair: [string, FInfo]) => pair[0].replace(/^_/, '') === props.fieldKey)?.[1].description ?? ''}> - <div className="keyValuePair-keyField" style={{ marginLeft: 20 * (props.fieldKey.match(/_/g)?.length || 0), color: keyStyle }}> + <Tooltip title={Object.entries(new DocumentOptions()).find((pair: [string, FInfo]) => pair[0].replace(/^_/, '') === this._props.keyName)?.[1].description ?? ''}> + <div className="keyValuePair-keyField" style={{ marginLeft: 20 * (this._props.keyName.match(/_/g)?.length || 0), color: keyStyle }}> {'('.repeat(parenCount)} - {props.fieldKey} + {this._props.keyName} {')'.repeat(parenCount)} </div> </Tooltip> </div> </td> - <td className="keyValuePair-td-value" style={{ width: `${100 - this.props.keyWidth}%` }} onContextMenu={this.onContextMenu}> + <td className="keyValuePair-td-value" style={{ width: `${100 - this._props.keyWidth}%` }} onContextMenu={this.onContextMenu}> <div className="keyValuePair-td-value-container"> - <EditableView contents={contents} GetValue={() => Field.toKeyValueString(props.Document, props.fieldKey)} SetValue={(value: string) => KeyValueBox.SetField(props.Document, props.fieldKey, value)} /> + <EditableView + contents={undefined} + fieldContents={{ + Document: this._props.doc, + childFilters: returnEmptyFilter, + childFiltersByRanges: returnEmptyFilter, + searchFilterDocs: returnEmptyDoclist, + styleProvider: DefaultStyleProvider, + docViewPath: returnEmptyDocViewList, + fieldKey: this._props.keyName, + isSelected: returnFalse, + setHeight: returnFalse, + select: emptyFunction, + renderDepth: 1, + isContentActive: returnFalse, + whenChildContentsActiveChanged: emptyFunction, + ScreenToLocalTransform: Transform.Identity, + focus: emptyFunction, + PanelWidth: this._props.PanelWidth, + PanelHeight: this._props.PanelHeight, + addDocTab: returnFalse, + pinToPres: returnZero, + }} + GetValue={() => Field.toKeyValueString(this._props.doc, this._props.keyName)} + SetValue={(value: string) => KeyValueBox.SetField(this._props.doc, this._props.keyName, value)} + /> </div> </td> </tr> diff --git a/src/client/views/nodes/LabelBox.scss b/src/client/views/nodes/LabelBox.scss index 42e158584..0b195713d 100644 --- a/src/client/views/nodes/LabelBox.scss +++ b/src/client/views/nodes/LabelBox.scss @@ -18,6 +18,9 @@ display: inline-block; margin: auto; text-overflow: ellipsis; + > span { + max-height: 100%; // make sure top of text is in view, otherwise it would center on middle of large text span + } } .labelBox-params { @@ -29,4 +32,4 @@ width: 100%; background: lightgray; border: dimgray solid 1px; -}
\ No newline at end of file +} diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx index 4439be0cd..10eeff08d 100644 --- a/src/client/views/nodes/LabelBox.tsx +++ b/src/client/views/nodes/LabelBox.tsx @@ -1,10 +1,10 @@ -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { Doc, DocListCast } from '../../../fields/Doc'; +import { Doc, DocListCast, Field } from '../../../fields/Doc'; import { List } from '../../../fields/List'; import { listSpec } from '../../../fields/Schema'; -import { Cast, StrCast, NumCast, BoolCast } from '../../../fields/Types'; +import { BoolCast, Cast, NumCast, StrCast } from '../../../fields/Types'; import { DragManager } from '../../util/DragManager'; import { undoBatch } from '../../util/UndoManager'; import { ContextMenu } from '../ContextMenu'; @@ -14,13 +14,15 @@ import { StyleProp } from '../StyleProvider'; import { FieldView, FieldViewProps } from './FieldView'; import BigText from './LabelBigText'; import './LabelBox.scss'; +import { PinProps, PresBox } from './trails'; +import { Docs } from '../../documents/Documents'; -export interface LabelBoxProps { +export interface LabelBoxProps extends FieldViewProps { label?: string; } @observer -export class LabelBox extends ViewBoxBaseComponent<FieldViewProps & LabelBoxProps>() { +export class LabelBox extends ViewBoxBaseComponent<LabelBoxProps>() { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(LabelBox, fieldKey); } @@ -29,21 +31,27 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps & LabelBoxProp } private dropDisposer?: DragManager.DragDropDisposer; private _timeout: any; + + constructor(props: LabelBoxProps) { + super(props); + makeObservable(this); + } + componentDidMount() { - this.props.setContentView?.(this); + this._props.setContentViewBox?.(this); } componentWillUnMount() { this._timeout && clearTimeout(this._timeout); } - getTitle() { - return this.rootDoc.title_custom ? StrCast(this.rootDoc.title) : this.props.label ? this.props.label : typeof this.rootDoc[this.fieldKey] === 'string' ? StrCast(this.rootDoc[this.fieldKey]) : StrCast(this.rootDoc.title); + @computed get Title() { + return this.dataDoc.title_custom ? StrCast(this.Document.title) : this._props.label ? this._props.label : Field.toString(this.dataDoc[this.fieldKey] as Field); } protected createDropTarget = (ele: HTMLDivElement) => { this.dropDisposer?.(); if (ele) { - this.dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this), this.props.Document); + this.dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this), this.Document); } }; @@ -66,7 +74,6 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps & LabelBoxProp }; @undoBatch - @action drop = (e: Event, de: DragManager.DropEvent) => { const docDragData = de.complete.docDragData; const params = Cast(this.paramsDoc['onClick-paramFieldKeys'], listSpec('string'), []); @@ -81,16 +88,44 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps & LabelBoxProp @observable _mouseOver = false; @computed get hoverColor() { - return this._mouseOver ? StrCast(this.layoutDoc._hoverBackgroundColor) : this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor); + return this._mouseOver ? StrCast(this.layoutDoc._hoverBackgroundColor) : this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor); } - fitTextToBox = (r: any) => { - const singleLine = BoolCast(this.rootDoc._singleLine, true); + getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => { + if (!pinProps) return this.Document; + const anchor = Docs.Create.ConfigDocument({ title: StrCast(this.Document.title), annotationOn: this.Document }); + + if (anchor) { + if (!addAsAnnotation) anchor.backgroundColor = 'transparent'; + // addAsAnnotation && this.addDocument(anchor); + PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}) } }, this.Document); + return anchor; + } + return anchor; + }; + + fitTextToBox = ( + r: any + ): + | NodeJS.Timeout + | { + rotateText: null; + fontSizeFactor: number; + minimumFontSize: number; + maximumFontSize: number; + limitingDimension: string; + horizontalAlign: string; + verticalAlign: string; + textAlign: string; + singleLine: boolean; + whiteSpace: string; + } => { + const singleLine = BoolCast(this.layoutDoc._singleLine, true); const params = { rotateText: null, fontSizeFactor: 1, - minimumFontSize: NumCast(this.rootDoc._label_minFontSize, 8), - maximumFontSize: NumCast(this.rootDoc._label_maxFontSize, 1000), + minimumFontSize: NumCast(this.layoutDoc._label_minFontSize, 8), + maximumFontSize: NumCast(this.layoutDoc._label_maxFontSize, 1000), limitingDimension: 'both', horizontalAlign: 'center', verticalAlign: 'center', @@ -119,7 +154,7 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps & LabelBoxProp const params = Cast(this.paramsDoc['onClick-paramFieldKeys'], listSpec('string'), []); const missingParams = params?.filter(p => !this.paramsDoc[p]); params?.map(p => DocListCast(this.paramsDoc[p])); // bcz: really hacky form of prefetching ... - const label = this.getTitle(); + const label = this.Title; return ( <div className="labelBox-outerDiv" @@ -127,7 +162,7 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps & LabelBoxProp onMouseOver={action(() => (this._mouseOver = true))} ref={this.createDropTarget} onContextMenu={this.specificContextMenu} - style={{ boxShadow: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BoxShadow) }}> + style={{ boxShadow: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BoxShadow) }}> <div className="labelBox-mainButton" style={{ @@ -137,15 +172,15 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps & LabelBoxProp fontFamily: StrCast(this.layoutDoc._text_fontFamily) || 'inherit', letterSpacing: StrCast(this.layoutDoc.letterSpacing), textTransform: StrCast(this.layoutDoc.textTransform) as any, - paddingLeft: NumCast(this.rootDoc._xPadding), - paddingRight: NumCast(this.rootDoc._xPadding), - paddingTop: NumCast(this.rootDoc._yPadding), - paddingBottom: NumCast(this.rootDoc._yPadding), - width: this.props.PanelWidth(), - height: this.props.PanelHeight(), - whiteSpace: typeof boxParams !== 'number' && boxParams.singleLine ? 'pre' : 'pre-wrap', + paddingLeft: NumCast(this.layoutDoc._xPadding), + paddingRight: NumCast(this.layoutDoc._xPadding), + paddingTop: NumCast(this.layoutDoc._yPadding), + paddingBottom: NumCast(this.layoutDoc._yPadding), + width: this._props.PanelWidth(), + height: this._props.PanelHeight(), + whiteSpace: 'singleLine' in boxParams && boxParams.singleLine ? 'pre' : 'pre-wrap', }}> - <span style={{ width: typeof boxParams !== 'number' && boxParams.singleLine ? '' : '100%' }} ref={action((r: any) => this.fitTextToBox(r))}> + <span style={{ width: 'singleLine' in boxParams ? '' : '100%' }} ref={action((r: any) => this.fitTextToBox(r))}> {label.startsWith('#') ? null : label.replace(/([^a-zA-Z])/g, '$1\u200b')} </span> </div> diff --git a/src/client/views/nodes/LinkAnchorBox.tsx b/src/client/views/nodes/LinkAnchorBox.tsx index fd7d13655..00e1f04c5 100644 --- a/src/client/views/nodes/LinkAnchorBox.tsx +++ b/src/client/views/nodes/LinkAnchorBox.tsx @@ -1,9 +1,10 @@ -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; +import { Utils, emptyFunction, setupMoveUpEvents } from '../../../Utils'; import { Doc } from '../../../fields/Doc'; import { NumCast, StrCast } from '../../../fields/Types'; import { TraceMobx } from '../../../fields/util'; -import { emptyFunction, setupMoveUpEvents, Utils } from '../../../Utils'; import { DragManager } from '../../util/DragManager'; import { LinkFollower } from '../../util/LinkFollower'; import { SelectionManager } from '../../util/SelectionManager'; @@ -11,10 +12,8 @@ import { ViewBoxBaseComponent } from '../DocComponent'; import { StyleProp } from '../StyleProvider'; import { FieldView, FieldViewProps } from './FieldView'; import './LinkAnchorBox.scss'; -import { LinkDocPreview } from './LinkDocPreview'; -import React = require('react'); -import globalCssVariables = require('../global/globalCssVariables.scss'); - +import { LinkInfo } from './LinkDocPreview'; +const { default: { MEDIUM_GRAY }, } = require('../global/globalCssVariables.module.scss'); // prettier-ignore @observer export class LinkAnchorBox extends ViewBoxBaseComponent<FieldViewProps>() { public static LayoutString(fieldKey: string) { @@ -25,22 +24,27 @@ export class LinkAnchorBox extends ViewBoxBaseComponent<FieldViewProps>() { _ref = React.createRef<HTMLDivElement>(); _isOpen = false; _timeout: NodeJS.Timeout | undefined; - @observable _x = 0; - @observable _y = 0; + + constructor(props: FieldViewProps) { + super(props); + makeObservable(this); + } componentDidMount() { - this.props.setContentView?.(this); + this._props.setContentViewBox?.(this); } @computed get linkSource() { - return this.props.docViewPath()[this.props.docViewPath().length - 2].rootDoc; // this.props.styleProvider?.(this.dataDoc, this.props, StyleProp.LinkSource); + return this.DocumentView?.().containerViewPath?.().lastElement().Document; // this._props.styleProvider?.(this.dataDoc, this._props, StyleProp.LinkSource); } onPointerDown = (e: React.PointerEvent) => { - setupMoveUpEvents(this, e, this.onPointerMove, emptyFunction, (e, doubleTap) => { - if (doubleTap) LinkFollower.FollowLink(this.rootDoc, this.linkSource, false); - else this.props.select(false); - }); + const linkSource = this.linkSource; + linkSource && + setupMoveUpEvents(this, e, this.onPointerMove, emptyFunction, (e, doubleTap) => { + if (doubleTap) LinkFollower.FollowLink(this.Document, linkSource, false); + else this._props.select(false); + }); }; onPointerMove = action((e: PointerEvent, down: number[], delta: number[]) => { const cdiv = this._ref?.current?.parentElement; @@ -49,15 +53,15 @@ export class LinkAnchorBox extends ViewBoxBaseComponent<FieldViewProps>() { const pt = Utils.getNearestPointInPerimeter(bounds.left, bounds.top, bounds.width, bounds.height, e.clientX, e.clientY); const separation = Math.sqrt((pt[0] - e.clientX) * (pt[0] - e.clientX) + (pt[1] - e.clientY) * (pt[1] - e.clientY)); if (separation > 100) { - const dragData = new DragManager.DocumentDragData([this.rootDoc]); + const dragData = new DragManager.DocumentDragData([this.Document]); dragData.dropAction = 'embed'; dragData.dropPropertiesToRemove = ['link_anchor_1_x', 'link_anchor_1_y', 'link_anchor_2_x', 'link_anchor_2_y', 'onClick']; DragManager.StartDocumentDrag([this._ref.current!], dragData, pt[0], pt[1]); return true; } else { - this.rootDoc[this.fieldKey + '_x'] = ((pt[0] - bounds.left) / bounds.width) * 100; - this.rootDoc[this.fieldKey + '_y'] = ((pt[1] - bounds.top) / bounds.height) * 100; - this.rootDoc.link_autoMoveAnchors = false; + this.layoutDoc[this.fieldKey + '_x'] = ((pt[0] - bounds.left) / bounds.width) * 100; + this.layoutDoc[this.fieldKey + '_y'] = ((pt[1] - bounds.top) / bounds.height) * 100; + this.layoutDoc.link_autoMoveAnchors = false; } } return false; @@ -67,28 +71,29 @@ export class LinkAnchorBox extends ViewBoxBaseComponent<FieldViewProps>() { render() { TraceMobx(); - const small = this.props.PanelWidth() <= 1; // this happens when rendered in a treeView - const x = NumCast(this.rootDoc[this.fieldKey + '_x'], 100); - const y = NumCast(this.rootDoc[this.fieldKey + '_y'], 100); - const background = this.props.styleProvider?.(this.dataDoc, this.props, StyleProp.BackgroundColor + ':anchor'); + const small = this._props.PanelWidth() <= 1; // this happens when rendered in a treeView + const x = NumCast(this.layoutDoc[this.fieldKey + '_x'], 100); + const y = NumCast(this.layoutDoc[this.fieldKey + '_y'], 100); + const background = this._props.styleProvider?.(this.dataDoc, this._props, StyleProp.BackgroundColor + ':anchor'); const anchor = this.fieldKey === 'link_anchor_1' ? 'link_anchor_2' : 'link_anchor_1'; const anchorScale = !this.dataDoc[this.fieldKey + '_useSmallAnchor'] && (x === 0 || x === 100 || y === 0 || y === 100) ? 1 : 0.25; const targetTitle = StrCast((this.dataDoc[anchor] as Doc)?.title); - const selView = SelectionManager.Views().lastElement()?.props.LayoutTemplateString?.includes('link_anchor_1') + 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' - : ''; + : SelectionManager.Views.lastElement()?._props.LayoutTemplateString?.includes('link_anchor_2') + ? 'link_anchor_2' + : ''; return ( <div ref={this._ref} title={targetTitle} className={`linkAnchorBox-cont${small ? '-small' : ''}`} onPointerEnter={e => - LinkDocPreview.SetLinkInfo({ - docProps: this.props, + LinkInfo.SetLinkInfo({ + DocumentView: this.DocumentView, + styleProvider: this._props.styleProvider, linkSrc: this.linkSource, - linkDoc: this.rootDoc, + linkDoc: this.Document, showHeader: true, location: [e.clientX, e.clientY + 20], noPreview: false, @@ -97,7 +102,7 @@ export class LinkAnchorBox extends ViewBoxBaseComponent<FieldViewProps>() { onPointerDown={this.onPointerDown} onContextMenu={this.specificContextMenu} style={{ - border: selView && this.rootDoc[selView] === this.rootDoc[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)`, diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx index 38ff21209..8b6293806 100644 --- a/src/client/views/nodes/LinkBox.tsx +++ b/src/client/views/nodes/LinkBox.tsx @@ -1,19 +1,18 @@ -import React = require('react'); import { Bezier } from 'bezier-js'; -import { computed, action } from 'mobx'; +import { computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; -import { Height, Width } from '../../../fields/DocSymbols'; +import * as React from 'react'; import { Id } from '../../../fields/FieldSymbols'; import { DocCast, NumCast, StrCast } from '../../../fields/Types'; import { aggregateBounds, emptyFunction, returnAlways, returnFalse, Utils } from '../../../Utils'; import { DocumentManager } from '../../util/DocumentManager'; +import { Transform } from '../../util/Transform'; +import { CollectionFreeFormView } from '../collections/collectionFreeForm'; import { ViewBoxBaseComponent } from '../DocComponent'; import { StyleProp } from '../StyleProvider'; import { ComparisonBox } from './ComparisonBox'; import { FieldView, FieldViewProps } from './FieldView'; import './LinkBox.scss'; -import { CollectionFreeFormView } from '../collections/collectionFreeForm'; -import { Transform } from '../../util/Transform'; @observer export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() { @@ -21,26 +20,28 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() { return FieldView.LayoutString(LinkBox, fieldKey); } - onClickScriptDisable = returnAlways; - componentDidMount() { - this.props.setContentView?.(this); + constructor(props: FieldViewProps) { + super(props); + makeObservable(this); } + + onClickScriptDisable = returnAlways; @computed get anchor1() { - const anchor1 = DocCast(this.rootDoc.link_anchor_1); + const anchor1 = DocCast(this.dataDoc.link_anchor_1); const anchor_1 = anchor1?.layout_unrendered ? DocCast(anchor1.annotationOn) : anchor1; - return DocumentManager.Instance.getDocumentView(anchor_1, this.props.docViewPath()[this.props.docViewPath().length - 2]); // this.props.docViewPath().lastElement()); + return DocumentManager.Instance.getDocumentView(anchor_1, this.DocumentView?.().containerViewPath?.().lastElement()); } @computed get anchor2() { - const anchor2 = DocCast(this.rootDoc.link_anchor_2); + const anchor2 = DocCast(this.dataDoc.link_anchor_2); const anchor_2 = anchor2?.layout_unrendered ? DocCast(anchor2.annotationOn) : anchor2; - return DocumentManager.Instance.getDocumentView(anchor_2, this.props.docViewPath()[this.props.docViewPath().length - 2]); // this.props.docViewPath().lastElement()); + return DocumentManager.Instance.getDocumentView(anchor_2, this.DocumentView?.().containerViewPath?.().lastElement()); } screenBounds = () => { - if (this.layoutDoc._layout_isSvg && this.anchor1 && this.anchor2 && this.anchor1.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView) { - const a_invXf = this.anchor1.props.ScreenToLocalTransform().inverse(); - const b_invXf = this.anchor2.props.ScreenToLocalTransform().inverse(); - const a_scrBds = { tl: a_invXf.transformPoint(0, 0), br: a_invXf.transformPoint(this.anchor1.rootDoc[Width](), this.anchor1.rootDoc[Height]()) }; - const b_scrBds = { tl: b_invXf.transformPoint(0, 0), br: b_invXf.transformPoint(this.anchor2.rootDoc[Width](), this.anchor2.rootDoc[Height]()) }; + if (this.layoutDoc._layout_isSvg && this.anchor1 && this.anchor2 && this.anchor1.CollectionFreeFormView) { + const a_invXf = this.anchor1.screenToViewTransform().inverse(); + const b_invXf = this.anchor2.screenToViewTransform().inverse(); + const a_scrBds = { tl: a_invXf.transformPoint(0, 0), br: a_invXf.transformPoint(NumCast(this.anchor1.Document._width), NumCast(this.anchor1.Document._height)) }; + const b_scrBds = { tl: b_invXf.transformPoint(0, 0), br: b_invXf.transformPoint(NumCast(this.anchor2.Document._width), NumCast(this.anchor2.Document._height)) }; const pts = [] as number[][]; pts.push([(a_scrBds.tl[0] + a_scrBds.br[0]) / 2, (a_scrBds.tl[1] + a_scrBds.br[1]) / 2]); @@ -54,53 +55,81 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() { ); return { left: agg.x, top: agg.y, right: agg.r, bottom: agg.b, center: undefined }; } - return { left: 0, top: 0, right: 0, bottom: 0, center: undefined }; + return undefined; }; - render() { - if (this.layoutDoc._layout_isSvg && (this.anchor1 || this.anchor2)?.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView) { - const a = (this.anchor1 ?? this.anchor2)!; - const b = (this.anchor2 ?? this.anchor1)!; - - const parxf = this.props.docViewPath()[this.props.docViewPath().length - 2].ComponentView as CollectionFreeFormView; - const this_xf = parxf?.getTransform() ?? Transform.Identity; //this.props.ScreenToLocalTransform(); - const a_invXf = a.props.ScreenToLocalTransform().inverse(); - const b_invXf = b.props.ScreenToLocalTransform().inverse(); - const a_scrBds = { tl: a_invXf.transformPoint(0, 0), br: a_invXf.transformPoint(a.rootDoc[Width](), a.rootDoc[Height]()) }; - const b_scrBds = { tl: b_invXf.transformPoint(0, 0), br: b_invXf.transformPoint(b.rootDoc[Width](), b.rootDoc[Height]()) }; - const a_bds = { tl: this_xf.transformPoint(a_scrBds.tl[0], a_scrBds.tl[1]), br: this_xf.transformPoint(a_scrBds.br[0], a_scrBds.br[1]) }; - const b_bds = { tl: this_xf.transformPoint(b_scrBds.tl[0], b_scrBds.tl[1]), br: this_xf.transformPoint(b_scrBds.br[0], b_scrBds.br[1]) }; + disposer: IReactionDisposer | undefined; + componentDidMount() { + this._props.setContentViewBox?.(this); + this.disposer = reaction( + () => { + if (this.layoutDoc._layout_isSvg && (this.anchor1 || this.anchor2)?.CollectionFreeFormView) { + const a = (this.anchor1 ?? this.anchor2)!; + const b = (this.anchor2 ?? this.anchor1)!; - const ppt1 = [(a_bds.tl[0] + a_bds.br[0]) / 2, (a_bds.tl[1] + a_bds.br[1]) / 2]; - const pt1 = Utils.getNearestPointInPerimeter(a_bds.tl[0], a_bds.tl[1], a_bds.br[0] - a_bds.tl[0], a_bds.br[1] - a_bds.tl[1], (b_bds.tl[0] + b_bds.br[0]) / 2, (b_bds.tl[1] + b_bds.br[1]) / 2); - const pt2 = Utils.getNearestPointInPerimeter(b_bds.tl[0], b_bds.tl[1], b_bds.br[0] - b_bds.tl[0], b_bds.br[1] - b_bds.tl[1], (a_bds.tl[0] + a_bds.br[0]) / 2, (a_bds.tl[1] + a_bds.br[1]) / 2); - const ppt2 = [(b_bds.tl[0] + b_bds.br[0]) / 2, (b_bds.tl[1] + b_bds.br[1]) / 2]; + const parxf = this.DocumentView?.().containerViewPath?.().lastElement().ComponentView as CollectionFreeFormView; + const this_xf = parxf?.screenToFreeformContentsXf ?? Transform.Identity; //this.ScreenToLocalTransform(); + const a_invXf = a.screenToViewTransform().inverse(); + const b_invXf = b.screenToViewTransform().inverse(); + const a_scrBds = { tl: a_invXf.transformPoint(0, 0), br: a_invXf.transformPoint(NumCast(a.Document._width), NumCast(a.Document._height)) }; + const b_scrBds = { tl: b_invXf.transformPoint(0, 0), br: b_invXf.transformPoint(NumCast(b.Document._width), NumCast(b.Document._height)) }; + const a_bds = { tl: this_xf.transformPoint(a_scrBds.tl[0], a_scrBds.tl[1]), br: this_xf.transformPoint(a_scrBds.br[0], a_scrBds.br[1]) }; + const b_bds = { tl: this_xf.transformPoint(b_scrBds.tl[0], b_scrBds.tl[1]), br: this_xf.transformPoint(b_scrBds.br[0], b_scrBds.br[1]) }; - const pts = [ppt1, pt1, pt2, ppt2].map(pt => [pt[0], pt[1]]); - const [lx, rx, ty, by] = [Math.min(pt1[0], pt2[0]), Math.max(pt1[0], pt2[0]), Math.min(pt1[1], pt2[1]), Math.max(pt1[1], pt2[1])]; - setTimeout( - action(() => { - this.layoutDoc.x = lx; - this.layoutDoc.y = ty; - this.layoutDoc._width = rx - lx; - this.layoutDoc._height = by - ty; - }) - ); + const ppt1 = [(a_bds.tl[0] + a_bds.br[0]) / 2, (a_bds.tl[1] + a_bds.br[1]) / 2]; + const pt1 = Utils.getNearestPointInPerimeter(a_bds.tl[0], a_bds.tl[1], a_bds.br[0] - a_bds.tl[0], a_bds.br[1] - a_bds.tl[1], (b_bds.tl[0] + b_bds.br[0]) / 2, (b_bds.tl[1] + b_bds.br[1]) / 2); + const pt2 = Utils.getNearestPointInPerimeter(b_bds.tl[0], b_bds.tl[1], b_bds.br[0] - b_bds.tl[0], b_bds.br[1] - b_bds.tl[1], (a_bds.tl[0] + a_bds.br[0]) / 2, (a_bds.tl[1] + a_bds.br[1]) / 2); + const ppt2 = [(b_bds.tl[0] + b_bds.br[0]) / 2, (b_bds.tl[1] + b_bds.br[1]) / 2]; - const highlight = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Highlighting); + const pts = [ppt1, pt1, pt2, ppt2].map(pt => [pt[0], pt[1]]); + const [lx, rx, ty, by] = [Math.min(pt1[0], pt2[0]), Math.max(pt1[0], pt2[0]), Math.min(pt1[1], pt2[1]), Math.max(pt1[1], pt2[1])]; + return { pts, lx, rx, ty, by }; + } + return undefined; + }, + params => { + this.renderProps = params; + if (params) { + if ( + Math.abs(params.lx - NumCast(this.layoutDoc.x)) > 1e-5 || + Math.abs(params.ty - NumCast(this.layoutDoc.y)) > 1e-5 || + Math.abs(params.rx - params.lx - NumCast(this.layoutDoc._width)) > 1e-5 || + Math.abs(params.by - params.ty - NumCast(this.layoutDoc._height)) > 1e-5 + ) { + this.layoutDoc.x = params?.lx; + this.layoutDoc.y = params?.ty; + this.layoutDoc._width = params.rx - params?.lx; + this.layoutDoc._height = params?.by - params?.ty; + } + } else { + this.layoutDoc._width = Math.max(50, NumCast(this.layoutDoc._width)); + this.layoutDoc._height = Math.max(50, NumCast(this.layoutDoc._height)); + } + }, + { fireImmediately: true } + ); + } + componentWillUnmount(): void { + this.disposer?.(); + } + @observable renderProps: { lx: number; rx: number; ty: number; by: number; pts: number[][] } | undefined = undefined; + render() { + if (this.renderProps) { + const highlight = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Highlighting); const highlightColor = highlight?.highlightIndex ? highlight?.highlightColor : undefined; - const bez = new Bezier(pts.map(p => ({ x: p[0], y: p[1] }))); + const bez = new Bezier(this.renderProps.pts.map(p => ({ x: p[0], y: p[1] }))); const text = bez.get(0.5); - const linkDesc = StrCast(this.rootDoc.link_description) || 'description'; - const strokeWidth = NumCast(this.rootDoc.stroke_width, 4); - const dash = StrCast(this.rootDoc.stroke_dash); + const linkDesc = StrCast(this.dataDoc.link_description) || 'description'; + const strokeWidth = NumCast(this.dataDoc.stroke_width, 4); + const dash = StrCast(this.Document.stroke_dash); const strokeDasharray = dash && Number(dash) ? String(strokeWidth * Number(dash)) : undefined; + const { pts, lx, ty, rx, by } = this.renderProps; return ( <div style={{ transition: 'inherit', pointerEvents: 'none', position: 'absolute', width: '100%', height: '100%' }}> <svg width={Math.max(100, rx - lx)} height={Math.max(100, by - ty)} style={{ transition: 'inherit', overflow: 'visible' }}> <defs> - <filter x="0" y="0" width="1" height="1" id={`${this.rootDoc[Id] + 'background'}`}> - <feFlood floodColor={`${StrCast(this.rootDoc._backgroundColor, 'lightblue')}`} result="bg" /> + <filter x="0" y="0" width="1" height="1" id={`${this.Document[Id] + 'background'}`}> + <feFlood floodColor={`${StrCast(this.layoutDoc._backgroundColor, 'lightblue')}`} result="bg" /> <feMerge> <feMergeNode in="bg" /> <feMergeNode in="SourceGraphic" /> @@ -110,7 +139,7 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() { <path className="collectionfreeformlinkview-linkLine" style={{ - pointerEvents: this.props.pointerEvents?.() === 'none' ? 'none' : 'visibleStroke', // + pointerEvents: this._props.pointerEvents?.() === 'none' ? 'none' : 'visibleStroke', // stroke: highlightColor ?? 'lightblue', strokeDasharray, strokeWidth, @@ -120,8 +149,8 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() { ${pts[2][0] + pts[2][0] - pts[3][0] - lx} ${pts[2][1] + pts[2][1] - pts[3][1] - ty}, ${pts[2][0] - lx} ${pts[2][1] - ty}`} /> <text - filter={`url(#${this.rootDoc[Id] + 'background'})`} - style={{ pointerEvents: this.props.pointerEvents?.() === 'none' ? 'none' : 'all', textAnchor: 'middle', fontSize: '12', stroke: 'black' }} + filter={`url(#${this.Document[Id] + 'background'})`} + style={{ pointerEvents: this._props.pointerEvents?.() === 'none' ? 'none' : 'all', textAnchor: 'middle', fontSize: '12', stroke: 'black' }} x={text.x - lx} y={text.y - ty}> <tspan> </tspan> @@ -133,14 +162,13 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() { ); } return ( - <div className={`linkBox-container${this.props.isContentActive() ? '-interactive' : ''}`} style={{ background: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor) }}> + <div className={`linkBox-container${this._props.isContentActive() ? '-interactive' : ''}`} style={{ background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) }}> <ComparisonBox - {...this.props} + {...this._props} // fieldKey="link_anchor" setHeight={emptyFunction} dontRegisterView={true} - renderDepth={this.props.renderDepth + 1} - isContentActive={this.props.isContentActive} + renderDepth={this._props.renderDepth + 1} addDocument={returnFalse} removeDocument={returnFalse} moveDocument={returnFalse} diff --git a/src/client/views/nodes/LinkDescriptionPopup.scss b/src/client/views/nodes/LinkDescriptionPopup.scss index a8db5d360..104301656 100644 --- a/src/client/views/nodes/LinkDescriptionPopup.scss +++ b/src/client/views/nodes/LinkDescriptionPopup.scss @@ -1,7 +1,6 @@ -@import "../global/globalCssVariables.scss"; +@import '../global/globalCssVariables.module.scss'; .linkDescriptionPopup { - display: flex; flex-direction: row; justify-content: center; @@ -26,7 +25,6 @@ } .linkDescriptionPopup-btn { - float: right; justify-content: center; vertical-align: middle; @@ -53,6 +51,4 @@ color: black; } } - - -}
\ No newline at end of file +} diff --git a/src/client/views/nodes/LinkDescriptionPopup.tsx b/src/client/views/nodes/LinkDescriptionPopup.tsx index c45045a8a..13f0ac4fc 100644 --- a/src/client/views/nodes/LinkDescriptionPopup.tsx +++ b/src/client/views/nodes/LinkDescriptionPopup.tsx @@ -1,20 +1,27 @@ -import React = require('react'); -import { action, observable } from 'mobx'; +import { action, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; -import { Doc } from '../../../fields/Doc'; +import * as React from 'react'; +import { DocData } from '../../../fields/DocSymbols'; import { LinkManager } from '../../util/LinkManager'; import './LinkDescriptionPopup.scss'; import { TaskCompletionBox } from './TaskCompletedBox'; @observer export class LinkDescriptionPopup extends React.Component<{}> { - @observable public static descriptionPopup: boolean = false; - @observable public static showDescriptions: string = 'ON'; - @observable public static popupX: number = 700; - @observable public static popupY: number = 350; + public static Instance: LinkDescriptionPopup; + @observable public display: boolean = false; + @observable public showDescriptions: string = 'ON'; + @observable public popupX: number = 700; + @observable public popupY: number = 350; @observable description: string = ''; @observable popupRef = React.createRef<HTMLDivElement>(); + constructor(props: any) { + super(props); + makeObservable(this); + LinkDescriptionPopup.Instance = this; + } + @action descriptionChanged = (e: React.ChangeEvent<HTMLInputElement>) => { this.description = e.currentTarget.value; @@ -22,16 +29,16 @@ export class LinkDescriptionPopup extends React.Component<{}> { @action onDismiss = (add: boolean) => { - LinkDescriptionPopup.descriptionPopup = false; + this.display = false; if (add) { - LinkManager.currentLink && (Doc.GetProto(LinkManager.currentLink).link_description = this.description); + LinkManager.currentLink && (LinkManager.currentLink[DocData].link_description = this.description); } }; @action onClick = (e: PointerEvent) => { if (this.popupRef && !!!this.popupRef.current?.contains(e.target as any)) { - LinkDescriptionPopup.descriptionPopup = false; + this.display = false; TaskCompletionBox.taskCompleted = false; } }; @@ -46,13 +53,13 @@ export class LinkDescriptionPopup extends React.Component<{}> { } render() { - return ( + return !this.display ? null : ( <div className="linkDescriptionPopup" ref={this.popupRef} style={{ - left: LinkDescriptionPopup.popupX ? LinkDescriptionPopup.popupX : 700, - top: LinkDescriptionPopup.popupY ? LinkDescriptionPopup.popupY : 350, + left: this.popupX ? this.popupX : 700, + top: this.popupY ? this.popupY : 350, }}> <input className="linkDescriptionPopup-input" diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx index 198cbe851..4b242649a 100644 --- a/src/client/views/nodes/LinkDocPreview.tsx +++ b/src/client/views/nodes/LinkDocPreview.tsx @@ -1,101 +1,110 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Tooltip } from '@material-ui/core'; -import { action, computed, observable } from 'mobx'; +import { Tooltip } from '@mui/material'; +import { action, computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import wiki from 'wikijs'; -import { Doc, DocCastAsync, Opt } from '../../../fields/Doc'; -import { Height, Width } from '../../../fields/DocSymbols'; -import { Cast, DocCast, NumCast, PromiseValue, StrCast } from '../../../fields/Types'; import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnNone, setupMoveUpEvents } from '../../../Utils'; +import { Doc, Opt } from '../../../fields/Doc'; +import { Cast, DocCast, NumCast, PromiseValue, StrCast } from '../../../fields/Types'; import { DocServer } from '../../DocServer'; -import { Docs } from '../../documents/Documents'; import { DocumentType } from '../../documents/DocumentTypes'; +import { Docs } from '../../documents/Documents'; +import { DocumentManager } from '../../util/DocumentManager'; import { DragManager } from '../../util/DragManager'; import { LinkFollower } from '../../util/LinkFollower'; import { LinkManager } from '../../util/LinkManager'; import { SearchUtil } from '../../util/SearchUtil'; import { SettingsManager } from '../../util/SettingsManager'; import { Transform } from '../../util/Transform'; -import { DocumentView, DocumentViewSharedProps, OpenWhere } from './DocumentView'; +import { ObservableReactComponent } from '../ObservableReactComponent'; +import { DocumentView, OpenWhere } from './DocumentView'; +import { StyleProviderFuncType } from './FieldView'; import './LinkDocPreview.scss'; -import React = require('react'); -import { DocumentManager } from '../../util/DocumentManager'; + +export class LinkInfo { + private static _instance: Opt<LinkInfo>; + constructor() { + LinkInfo._instance = this; + makeObservable(this); + } + @observable public LinkInfo: Opt<LinkDocPreviewProps> = undefined; + + public static get Instance() { + return LinkInfo._instance ?? new LinkInfo(); + } + public static Clear() { + runInAction(() => LinkInfo.Instance && (LinkInfo.Instance.LinkInfo = undefined)); + } + public static SetLinkInfo(info?: LinkDocPreviewProps) { + runInAction(() => LinkInfo.Instance && (LinkInfo.Instance.LinkInfo = info)); + } +} interface LinkDocPreviewProps { linkDoc?: Doc; linkSrc?: Doc; - docProps: DocumentViewSharedProps; + DocumentView?: () => DocumentView; + styleProvider?: StyleProviderFuncType; location: number[]; hrefs?: string[]; showHeader?: boolean; noPreview?: boolean; } @observer -export class LinkDocPreview extends React.Component<LinkDocPreviewProps> { - @action public static Clear() { - LinkDocPreview.LinkInfo = undefined; - } - @action public static SetLinkInfo(info?: LinkDocPreviewProps) { - LinkDocPreview.LinkInfo !== info && (LinkDocPreview.LinkInfo = info); - } - - static _instance: Opt<LinkDocPreview>; - +export class LinkDocPreview extends ObservableReactComponent<LinkDocPreviewProps> { _infoRef = React.createRef<HTMLDivElement>(); _linkDocRef = React.createRef<HTMLDivElement>(); - @observable public static LinkInfo: Opt<LinkDocPreviewProps>; - @observable _targetDoc: Opt<Doc>; - @observable _markerTargetDoc: Opt<Doc>; - @observable _linkDoc: Opt<Doc>; - @observable _linkSrc: Opt<Doc>; + @observable _targetDoc: Opt<Doc> = undefined; + @observable _markerTargetDoc: Opt<Doc> = undefined; + @observable _linkDoc: Opt<Doc> = undefined; + @observable _linkSrc: Opt<Doc> = undefined; @observable _toolTipText = ''; @observable _hrefInd = 0; - constructor(props: any) { super(props); - LinkDocPreview._instance = this; + makeObservable(this); } - @action init() { - var linkTarget = this.props.linkDoc; - this._linkSrc = this.props.linkSrc; - this._linkDoc = this.props.linkDoc; - const link_anchor_1 = this._linkDoc?.link_anchor_1 as Doc; - const link_anchor_2 = this._linkDoc?.link_anchor_2 as Doc; + @action + init() { + var linkTarget = this._props.linkDoc; + this._linkSrc = this._props.linkSrc; + this._linkDoc = this._props.linkDoc; + const link_anchor_1 = DocCast(this._linkDoc?.link_anchor_1); + const link_anchor_2 = DocCast(this._linkDoc?.link_anchor_2); if (link_anchor_1 && link_anchor_2) { linkTarget = Doc.AreProtosEqual(link_anchor_1, this._linkSrc) || Doc.AreProtosEqual(link_anchor_1?.annotationOn as Doc, this._linkSrc) ? link_anchor_2 : link_anchor_1; } if (linkTarget?.annotationOn && linkTarget?.type !== DocumentType.RTF) { - // want to show annotation embedContainer document if annotation is not text - linkTarget && DocCastAsync(linkTarget.annotationOn).then(action(anno => (this._markerTargetDoc = this._targetDoc = anno))); - } else { - this._markerTargetDoc = this._targetDoc = linkTarget; + linkTarget = DocCast(linkTarget.annotationOn); // want to show annotation embedContainer document if annotation is not text } + this._markerTargetDoc = this._targetDoc = linkTarget; this._toolTipText = ''; this.updateHref(); } - componentDidUpdate(props: any) { - if (props.linkSrc !== this.props.linkSrc || props.linkDoc !== this.props.linkDoc || props.hrefs !== this.props.hrefs) this.init(); + componentDidUpdate(prevProps: Readonly<LinkDocPreviewProps>) { + super.componentDidUpdate(prevProps); + if (prevProps.linkSrc !== this._props.linkSrc || prevProps.linkDoc !== this._props.linkDoc || prevProps.hrefs !== this._props.hrefs) this.init(); } componentDidMount() { this.init(); document.addEventListener('pointerdown', this.onPointerDown, true); } - @action componentWillUnmount() { - LinkDocPreview.SetLinkInfo(undefined); + LinkInfo.Clear(); document.removeEventListener('pointerdown', this.onPointerDown, true); } onPointerDown = (e: PointerEvent) => { - !this._linkDocRef.current?.contains(e.target as any) && LinkDocPreview.Clear(); // close preview when not clicking anywhere other than the info bar of the preview + !this._linkDocRef.current?.contains(e.target as any) && LinkInfo.Clear(); // close preview when not clicking anywhere other than the info bar of the preview }; @action updateHref() { - if (this.props.hrefs?.length) { - const href = this.props.hrefs[this._hrefInd]; + if (this._props.hrefs?.length) { + const href = this._props.hrefs[this._hrefInd]; if (href.indexOf(Doc.localServerPath()) !== 0) { // link to a web page URL -- try to show a preview if (href.startsWith('https://en.wikipedia.org/wiki/')) { @@ -125,7 +134,7 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> { this._markerTargetDoc = linkTarget; this._targetDoc = /*linkTarget?.type === DocumentType.MARKER &&*/ linkTarget?.annotationOn ? Cast(linkTarget.annotationOn, Doc, null) ?? linkTarget : linkTarget; } - if (LinkDocPreview.LinkInfo?.noPreview || this._linkSrc?.followLinkToggle || this._markerTargetDoc?.type === DocumentType.PRES) this.followLink(); + if (LinkInfo.Instance?.LinkInfo?.noPreview || this._linkSrc?.followLinkToggle || this._markerTargetDoc?.type === DocumentType.PRES) this.followLink(); } }) ); @@ -145,9 +154,9 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> { action(() => { LinkManager.currentLink = this._linkDoc; LinkManager.currentLinkAnchor = this._linkSrc; - this.props.docProps.DocumentView?.().select(false); - if ((SettingsManager.propertiesWidth ?? 0) < 100) { - SettingsManager.propertiesWidth = 250; + this._props.DocumentView?.().select(false); + if ((SettingsManager.Instance.propertiesWidth ?? 0) < 100) { + SettingsManager.Instance.propertiesWidth = 250; } }) ); @@ -159,7 +168,7 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> { returnFalse, emptyFunction, action(() => { - const nextHrefInd = (this._hrefInd + 1) % (this.props.hrefs?.length || 1); + const nextHrefInd = (this._hrefInd + 1) % (this._props.hrefs?.length || 1); if (nextHrefInd !== this._hrefInd) { this._linkDoc = undefined; this._hrefInd = nextHrefInd; @@ -170,19 +179,19 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> { }; followLink = () => { - LinkDocPreview.Clear(); + LinkInfo.Clear(); if (this._linkDoc && this._linkSrc) { LinkFollower.FollowLink(this._linkDoc, this._linkSrc, false); - } else if (this.props.hrefs?.length) { + } else if (this._props.hrefs?.length) { const webDoc = - Array.from(SearchUtil.SearchCollection(Doc.MyFilesystem, this.props.hrefs[0]).keys()).lastElement() ?? - Docs.Create.WebDocument(this.props.hrefs[0], { title: this.props.hrefs[0], _nativeWidth: 850, _width: 200, _height: 400, data_useCors: true }); + Array.from(SearchUtil.SearchCollection(Doc.MyFilesystem, this._props.hrefs[0]).keys()).lastElement() ?? + Docs.Create.WebDocument(this._props.hrefs[0], { title: this._props.hrefs[0], _nativeWidth: 850, _width: 200, _height: 400, data_useCors: true }); DocumentManager.Instance.showDocument(webDoc, { openLocation: OpenWhere.lightbox, willPan: true, zoomTime: 500, }); - //this.props.docProps?.addDocTab(webDoc, OpenWhere.lightbox); + //this._props.docProps?.addDocTab(webDoc, OpenWhere.lightbox); } }; @@ -190,17 +199,17 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> { width = () => { if (!this._targetDoc) return 225; - if (this._targetDoc[Width]() < this._targetDoc?.[Height]()) { - return (Math.min(225, this._targetDoc[Height]()) * this._targetDoc[Width]()) / this._targetDoc[Height](); + if (NumCast(this._targetDoc._width) < NumCast(this._targetDoc._height)) { + return (Math.min(225, NumCast(this._targetDoc._height)) * NumCast(this._targetDoc._width)) / NumCast(this._targetDoc._height); } - return Math.min(225, NumCast(this._targetDoc?.[Width](), 225)); + return Math.min(225, NumCast(this._targetDoc._width, 225)); }; height = () => { if (!this._targetDoc) return 225; - if (this._targetDoc[Width]() > this._targetDoc?.[Height]()) { - return (Math.min(225, this._targetDoc[Width]()) * this._targetDoc[Height]()) / this._targetDoc[Width](); + if (NumCast(this._targetDoc._width) > NumCast(this._targetDoc._height)) { + return (Math.min(225, NumCast(this._targetDoc._width)) * NumCast(this._targetDoc._height)) / NumCast(this._targetDoc._width); } - return Math.min(225, NumCast(this._targetDoc?.[Height](), 225)); + return Math.min(225, NumCast(this._targetDoc._height, 225)); }; @computed get previewHeader() { return !this._linkDoc || !this._markerTargetDoc || !this._targetDoc || !this._linkSrc ? null : ( @@ -218,7 +227,7 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> { </div> <div className="linkDocPreview-buttonBar" style={{ float: 'right' }}> <Tooltip title={<div className="dash-tooltip">Next Link</div>} placement="top"> - <div className="linkDocPreview-button" style={{ background: (this.props.hrefs?.length || 0) <= 1 ? 'gray' : 'green' }} onPointerDown={this.nextHref}> + <div className="linkDocPreview-button" style={{ background: (this._props.hrefs?.length || 0) <= 1 ? 'gray' : 'green' }} onPointerDown={this.nextHref}> <FontAwesomeIcon className="linkDocPreview-fa-icon" icon="chevron-right" color="white" size="sm" /> </div> </Tooltip> @@ -230,7 +239,7 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> { @computed get docPreview() { return (!this._linkDoc || !this._targetDoc || !this._linkSrc) && !this._toolTipText ? null : ( <div className="linkDocPreview-inner"> - {!this.props.showHeader ? null : this.previewHeader} + {!this._props.showHeader ? null : this.previewHeader} <div className="linkDocPreview-preview-wrapper" onPointerDown={e => @@ -240,7 +249,7 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> { (e, down, delta) => { if (Math.abs(e.clientX - down[0]) + Math.abs(e.clientY - down[1]) > 100) { DragManager.StartDocumentDrag([this._infoRef.current!], new DragManager.DocumentDragData([this._targetDoc!]), e.pageX, e.pageY); - LinkDocPreview.Clear(); + LinkInfo.Clear(); return true; } return false; @@ -258,13 +267,12 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> { <DocumentView ref={r => { const targetanchor = this._linkDoc && this._linkSrc && LinkManager.getOppositeAnchor(this._linkDoc, this._linkSrc); - targetanchor && this._targetDoc !== targetanchor && r?.props.focus?.(targetanchor, {}); + targetanchor && this._targetDoc !== targetanchor && r?._props.focus?.(targetanchor, {}); }} Document={this._targetDoc!} moveDocument={returnFalse} - rootSelected={returnFalse} - styleProvider={this.props.docProps?.styleProvider} - docViewPath={returnEmptyDoclist} + styleProvider={this._props.styleProvider} + containerViewPath={returnEmptyDoclist} ScreenToLocalTransform={Transform.Identity} isDocumentActive={returnFalse} isContentActive={returnFalse} @@ -285,7 +293,6 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> { focus={emptyFunction} whenChildContentsActiveChanged={returnFalse} ignoreAutoHeight={true} // need to ignore layout_autoHeight otherwise layout_autoHeight text boxes will expand beyond the preview panel size. - bringToFront={returnFalse} NativeWidth={Doc.NativeWidth(this._targetDoc) ? () => Doc.NativeWidth(this._targetDoc) : undefined} NativeHeight={Doc.NativeHeight(this._targetDoc) ? () => Doc.NativeHeight(this._targetDoc) : undefined} /> @@ -302,7 +309,7 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> { className="linkDocPreview" ref={this._linkDocRef} onPointerDown={this.followLinkPointerDown} - style={{ borderColor: SettingsManager.userColor, left: this.props.location[0], top: this.props.location[1], width: this.width() + borders, height: this.height() + borders + (this.props.showHeader ? 37 : 0) }}> + style={{ borderColor: SettingsManager.userColor, left: this._props.location[0], top: this._props.location[1], width: this.width() + borders, height: this.height() + borders + (this._props.showHeader ? 37 : 0) }}> {this.docPreview} </div> ); diff --git a/src/client/views/nodes/LoadingBox.tsx b/src/client/views/nodes/LoadingBox.tsx index bdc074e0c..adccc9db6 100644 --- a/src/client/views/nodes/LoadingBox.tsx +++ b/src/client/views/nodes/LoadingBox.tsx @@ -6,6 +6,7 @@ import { Doc } from '../../../fields/Doc'; import { Id } from '../../../fields/FieldSymbols'; import { StrCast } from '../../../fields/Types'; import { Networking } from '../../Network'; +import { DocumentManager } from '../../util/DocumentManager'; import { ViewBoxAnnotatableComponent } from '../DocComponent'; import { FieldView, FieldViewProps } from './FieldView'; import './LoadingBox.scss'; @@ -36,32 +37,47 @@ export class LoadingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(LoadingBox, fieldKey); } + // removes from currently loading display + public static removeCurrentlyLoading(doc: Doc) { + if (DocumentManager.Instance.CurrentlyLoading) { + const index = DocumentManager.Instance.CurrentlyLoading.indexOf(doc); + runInAction(() => index !== -1 && DocumentManager.Instance.CurrentlyLoading.splice(index, 1)); + } + } + + // adds doc to currently loading display + public static addCurrentlyLoading(doc: Doc) { + if (DocumentManager.Instance.CurrentlyLoading.indexOf(doc) === -1) { + runInAction(() => DocumentManager.Instance.CurrentlyLoading.push(doc)); + } + } _timer: any; @observable progress = ''; componentDidMount() { - if (!Doc.CurrentlyLoading?.includes(this.rootDoc)) { - this.rootDoc.loadingError = 'Upload interrupted, please try again'; + if (!DocumentManager.Instance.CurrentlyLoading?.includes(this.Document)) { + this.Document.loadingError = 'Upload interrupted, please try again'; } else { const updateFunc = async () => { - const result = await Networking.QueryYoutubeProgress(StrCast(this.rootDoc[Id])); // We use the guid of the overwriteDoc to track file uploads. + const result = await Networking.QueryYoutubeProgress(StrCast(this.Document[Id])); // We use the guid of the overwriteDoc to track file uploads. runInAction(() => (this.progress = result.progress)); - !this.rootDoc.loadingError && (this._timer = setTimeout(updateFunc, 1000)); + !this.Document.loadingError && this._timer && (this._timer = setTimeout(updateFunc, 1000)); }; this._timer = setTimeout(updateFunc, 1000); } } componentWillUnmount() { clearTimeout(this._timer); + this._timer = undefined; } render() { return ( - <div className="loadingBoxContainer" style={{ background: !this.rootDoc.loadingError ? '' : 'red' }}> + <div className="loadingBoxContainer" style={{ background: !this.Document.loadingError ? '' : 'red' }}> <div className="loadingBox-textContainer"> - <span className="loadingBox-title">{StrCast(this.rootDoc.title)}</span> - <p className="loadingBox-headerText">{StrCast(this.rootDoc.loadingError, 'Loading ' + (this.progress.replace('[download]', '') || '(can take several minutes)'))}</p> - {this.rootDoc.loadingError ? null : ( + <span className="loadingBox-title">{StrCast(this.Document.title)}</span> + <p className="loadingBox-headerText">{StrCast(this.Document.loadingError, 'Loading ' + (this.progress.replace('[download]', '') || '(can take several minutes)'))}</p> + {this.Document.loadingError ? null : ( <div className="loadingBox-spinner"> <ReactLoading type="spinningBubbles" color="blue" height={100} width={100} /> </div> diff --git a/src/client/views/nodes/MapBox/AnimationSpeedIcons.tsx b/src/client/views/nodes/MapBox/AnimationSpeedIcons.tsx new file mode 100644 index 000000000..d54a175b2 --- /dev/null +++ b/src/client/views/nodes/MapBox/AnimationSpeedIcons.tsx @@ -0,0 +1,35 @@ +import * as React from "react"; + +export const slowSpeedIcon: JSX.Element = ( + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 435.62"> + <defs> + <style type="text/css"> + {` + .fil0 { fill: black; fill-rule: nonzero; } + .fil1 { fill: #FE0000; fill-rule: nonzero; } + `} + </style> + </defs> + <path className="fil0" d="M174.84 343.06c-7.31,-13.12 -13.03,-27.28 -16.89,-42.18 -3.76,-14.56 -5.77,-29.71 -5.77,-45.17 0,-11.94 1.19,-23.66 3.43,-35.03 2.29,-11.57 5.74,-22.83 10.2,-33.63 13.7,-33.14 37.01,-61.29 66.42,-80.96 25.38,-16.96 55.28,-27.66 87.45,-29.87l0 -30.17c0,-0.46 0.02,-0.92 0.06,-1.37l-33.7 0c-5.53,0 -10.05,-4.52 -10.05,-10.04l0 -24.59c0,-5.53 4.52,-10.05 10.05,-10.05l101.27 0c5.53,0 10.05,4.52 10.05,10.05l0 24.59c0,5.52 -4.52,10.04 -10.05,10.04l-33.69 0c0.03,0.45 0.05,0.91 0.05,1.37l0 31.03 -0.1 0c41.1,4.89 77.94,23.63 105.73,51.42 32.56,32.55 52.7,77.54 52.7,127.21 0,49.67 -20.14,94.66 -52.7,127.21 -32.55,32.55 -77.54,52.7 -127.21,52.7 -33.16,0 -64.29,-9.04 -91.05,-24.78 -27.66,-16.27 -50.59,-39.73 -66.2,-67.78zm148.42 -36.62l-80.33 0 0 -25.71 28.6 0 0 -42.57 -28.6 1.93 0 -25.71 36.95 -8.35 25.38 0 0 74.7 18 0 0 25.71zm44.34 -100.41l11.08 26.83 1.61 0 11.09 -26.83 34.86 0 -22.33 48.52 22.33 51.89 -35.67 0 -12.05 -28.92 -1.44 0 -11.89 28.92 -34.06 0 21.85 -50.93 -21.85 -49.48 36.47 0zm126.08 -74.6c6.98,-16.66 6.15,-34.13 -3.84,-45.82 -12,-14.03 -33.67,-15.64 -53.8,-5.77 21.32,14.62 40.68,31.63 57.64,51.59zm-323.17 0c-6.98,-16.66 -6.16,-34.13 3.84,-45.82 11.99,-14.03 33.67,-15.64 53.79,-5.77 -21.32,14.62 -40.68,31.63 -57.63,51.59zm15.31 162.23c3.23,12.5 8.04,24.39 14.18,35.42 13.13,23.58 32.39,43.29 55.6,56.94 22.37,13.16 48.52,20.71 76.49,20.71 41.71,0 79.47,-16.9 106.8,-44.23 27.32,-27.32 44.23,-65.08 44.23,-106.79 0,-41.71 -16.91,-79.47 -44.23,-106.8 -27.33,-27.32 -65.09,-44.23 -106.8,-44.23 -31.07,0 -59.91,9.34 -83.84,25.33 -24.74,16.54 -44.33,40.19 -55.82,67.98 -3.68,8.91 -6.56,18.35 -8.5,28.22 -1.87,9.49 -2.86,19.36 -2.86,29.5 0,13.24 1.65,25.96 4.75,37.95z"/> + <path className="fil1" d="M55.23 188.52c-7.98,0 -14.45,-6.47 -14.45,-14.44 0,-7.98 6.47,-14.45 14.45,-14.45l63.94 0c7.98,0 14.45,6.47 14.45,14.45 0,7.97 -6.47,14.44 -14.45,14.44l-63.94 0zm0.72 167.68c-7.97,0 -14.44,-6.47 -14.44,-14.45 0,-7.97 6.47,-14.45 14.44,-14.45l64.58 0c7.97,0 14.45,6.48 14.45,14.45 0,7.98 -6.48,14.45 -14.45,14.45l-64.58 0zm-41.5 -84.94c-7.98,0 -14.45,-6.47 -14.45,-14.45 0,-7.97 6.47,-14.44 14.45,-14.44l89.12 0c7.98,0 14.45,6.47 14.45,14.44 0,7.98 -6.47,14.45 -14.45,14.45l-89.12 0z"/> + </svg> +); + +export const mediumSpeedIcon: JSX.Element = ( + <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 122.88 104.55"> + <defs><style>{`.cls-1{fill:#fe0000;}`}</style></defs> + <path d="M42,82.34a42.82,42.82,0,0,1-4.05-10.13A43.2,43.2,0,0,1,76.72,18.29V11.05c0-.11,0-.22,0-.33H68.65a2.41,2.41,0,0,1-2.41-2.41V2.41A2.41,2.41,0,0,1,68.65,0H93a2.42,2.42,0,0,1,2.42,2.41v5.9A2.42,2.42,0,0,1,93,10.72H84.87c0,.11,0,.22,0,.33V18.5h0A43.17,43.17,0,1,1,42,82.34ZM88.22,49.45l2.66,6.44h.39l2.66-6.44h8.37L96.94,61.09l5.36,12.45H93.74L90.85,66.6H90.5l-2.85,6.94H79.47l5.25-12.22L79.47,49.45ZM58.65,56.08l-1-5.75a33.58,33.58,0,0,1,9.68-1.46c1.28,0,2.35,0,3.22.11a11.77,11.77,0,0,1,2.67.58,5.41,5.41,0,0,1,2.2,1.28c1.24,1.23,1.85,3.12,1.85,5.66s-.72,4.42-2.16,5.63S70.64,64.73,66,66.3v1.08H76.89v6.16H57.11V68.72a10.73,10.73,0,0,1,.81-4.12,8.4,8.4,0,0,1,2.43-2.7,12.13,12.13,0,0,1,2.79-1.7l3.32-1.52c1-.47,1.88-.87,2.52-1.17V55.42a28.59,28.59,0,0,0-3.2-.19,30.66,30.66,0,0,0-7.13.85Zm59.83-24.54c1.68-4,1.48-8.19-.92-11-2.88-3.37-8.08-3.76-12.91-1.39a69.74,69.74,0,0,1,13.83,12.38Zm-77.56,0c-1.67-4-1.48-8.19.92-11,2.88-3.37,8.08-3.76,12.91-1.39A70,70,0,0,0,40.92,31.54ZM44.6,70.48A36,36,0,0,0,48,79a35.91,35.91,0,1,0-3.4-8.5Z"/> + <path className="cls-1" d="M13.25,45.25a3.47,3.47,0,0,1,0-6.94H28.6a3.47,3.47,0,0,1,0,6.94Z"/> + <path className="cls-1" d="M3.47,65.1a3.47,3.47,0,1,1,0-6.93H24.86a3.47,3.47,0,0,1,0,6.93Z"/> + <path className="cls-1" d="M13.43,85.49a3.47,3.47,0,1,1,0-6.94h15.5a3.47,3.47,0,0,1,0,6.94Z"/> + </svg> +); + +export const fastSpeedIcon: JSX.Element = ( + <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 122.88 104.55"> + <defs><style>{`.cls-1{fill:#fe0000;`}</style></defs> + <path d="M42,82.34a42.82,42.82,0,0,1-4.05-10.13A43.2,43.2,0,0,1,76.72,18.29V11.05c0-.11,0-.22,0-.33H68.65a2.41,2.41,0,0,1-2.41-2.41V2.41A2.41,2.41,0,0,1,68.65,0H93a2.42,2.42,0,0,1,2.42,2.41v5.9A2.42,2.42,0,0,1,93,10.72H84.87c0,.11,0,.22,0,.33V18.5h0A43.17,43.17,0,1,1,42,82.34ZM88.22,49.61l2.66,6.44h.39l2.66-6.44h8.37L96.94,61.26l5.36,12.45H93.74l-2.9-6.94H90.5l-2.86,6.94H79.47l5.24-12.22L79.47,49.61Zm-19,8.48v-2.5a24.92,24.92,0,0,0-3.74-.2A33.25,33.25,0,0,0,59,56.2l-1-5.7A30.47,30.47,0,0,1,67.13,49a22.86,22.86,0,0,1,5.48.47,6.91,6.91,0,0,1,2.5,1.11,5.62,5.62,0,0,1,1.78,4.55,5.84,5.84,0,0,1-3.2,5.56v.19a5.73,5.73,0,0,1,3.81,5.74,8.67,8.67,0,0,1-.63,3.49,6,6,0,0,1-1.6,2.24,7.15,7.15,0,0,1-2.55,1.25,25.64,25.64,0,0,1-6.61.66,37.78,37.78,0,0,1-8.54-1l1.08-6.37a27.22,27.22,0,0,0,6.21.89,35.79,35.79,0,0,0,4.35-.23V65.11l-6.63-.65V58.87l6.63-.78Zm49.27-26.55c1.68-4,1.48-8.19-.92-11-2.88-3.37-8.08-3.76-12.91-1.39a69.74,69.74,0,0,1,13.83,12.38Zm-77.56,0c-1.67-4-1.48-8.19.92-11,2.88-3.37,8.08-3.76,12.91-1.39A70,70,0,0,0,40.92,31.54ZM44.6,70.48A36,36,0,0,0,48,79a35.91,35.91,0,1,0-3.4-8.5Z"/> + <path className="cls-1" d="M13.25,45.25a3.47,3.47,0,0,1,0-6.94H28.6a3.47,3.47,0,0,1,0,6.94Zm.18,40.24a3.47,3.47,0,1,1,0-6.94h15.5a3.47,3.47,0,0,1,0,6.94ZM3.47,65.1a3.47,3.47,0,1,1,0-6.93H24.86a3.47,3.47,0,0,1,0,6.93Z"/> + </svg> +); + diff --git a/src/client/views/nodes/MapBox/AnimationUtility.ts b/src/client/views/nodes/MapBox/AnimationUtility.ts new file mode 100644 index 000000000..35153f439 --- /dev/null +++ b/src/client/views/nodes/MapBox/AnimationUtility.ts @@ -0,0 +1,447 @@ +import * as turf from '@turf/turf'; +import { Position } from '@turf/turf'; +import * as d3 from 'd3'; +import { Feature, GeoJsonProperties, Geometry } from 'geojson'; +import mapboxgl, { MercatorCoordinate } from 'mapbox-gl'; +import { action, computed, makeObservable, observable, runInAction } from 'mobx'; +import { MapRef } from 'react-map-gl'; + +export enum AnimationStatus { + START = 'start', + RESUME = 'resume', + RESTART = 'restart', +} + +export enum AnimationSpeed { + SLOW = '1x', + MEDIUM = '2x', + FAST = '3x', +} + +export class AnimationUtility { + private SMOOTH_FACTOR = 0.95; + private ROUTE_COORDINATES: Position[] = []; + + @observable + private PATH?: turf.helpers.Feature<turf.helpers.LineString, turf.helpers.Properties> = undefined; + + private PATH_DISTANCE: number = 0; + private FLY_IN_START_PITCH = 40; + private FIRST_LNG_LAT: { lng: number; lat: number } = { lng: 0, lat: 0 }; + private START_ALTITUDE = 3_000_000; + private MAP_REF: MapRef | null = null; + + @observable private isStreetViewAnimation: boolean = false; + @observable private animationSpeed: AnimationSpeed = AnimationSpeed.MEDIUM; + + @observable + private previousLngLat: { lng: number; lat: number }; + + private previousAltitude: number | null = null; + private previousPitch: number | null = null; + + private currentStreetViewBearing: number = 0; + + private terrainDisplayed: boolean; + + @computed get flyInEndBearing() { + return this.isStreetViewAnimation + ? this.calculateBearing( + { + lng: this.ROUTE_COORDINATES[0][0], + lat: this.ROUTE_COORDINATES[0][1], + }, + { + lng: this.ROUTE_COORDINATES[1][0], + lat: this.ROUTE_COORDINATES[1][1], + } + ) + : -20; + } + + @computed get currentAnimationAltitude(): number { + if (!this.isStreetViewAnimation) return 20_000; + if (!this.terrainDisplayed) return 50; + const coords: mapboxgl.LngLatLike = [this.previousLngLat.lng, this.previousLngLat.lat]; + // console.log('MAP REF: ', this.MAP_REF) + // console.log("current elevation: ", this.MAP_REF?.queryTerrainElevation(coords)); + let altitude = this.MAP_REF ? this.MAP_REF.queryTerrainElevation(coords) ?? 0 : 0; + if (altitude === 0) { + altitude += 50; + } + if (this.previousAltitude) { + return this.lerp(altitude, this.previousAltitude, 0.02); + } + return altitude; + } + + @computed get flyInStartBearing() { + return Math.max(0, Math.min(this.flyInEndBearing + 20, 360)); // between 0 and 360 + } + + @computed get flyInEndAltitude() { + // return this.isStreetViewAnimation ? (this.currentAnimationAltitude + 70 ): 10_000; + return this.currentAnimationAltitude; + } + + @computed get currentPitch(): number { + if (!this.isStreetViewAnimation) return 50; + if (!this.terrainDisplayed) return 80; + else { + // const groundElevation = 0; + const heightAboveGround = this.currentAnimationAltitude; + const horizontalDistance = 500; + + let pitch; + if (heightAboveGround >= 0) { + pitch = 90 - Math.atan(heightAboveGround / horizontalDistance) * (180 / Math.PI); + } else { + pitch = 80; + } + + console.log(Math.max(50, Math.min(pitch, 85))); + + if (this.previousPitch) { + return this.lerp(Math.max(50, Math.min(pitch, 85)), this.previousPitch, 0.02); + } + return Math.max(50, Math.min(pitch, 85)); + } + } + + @computed get flyInEndPitch() { + return this.currentPitch; + } + + @computed get flyToDuration() { + switch (this.animationSpeed) { + case AnimationSpeed.SLOW: + return 4_000; + case AnimationSpeed.MEDIUM: + return 2_500; + case AnimationSpeed.FAST: + return 1_250; + default: + return 2_500; + } + } + + @computed get animationDuration(): number { + let scalingFactor: number; + const MIN_DISTANCE = 0; + const MAX_DISTANCE = 3_000; // anything greater than 3000 is just set to 1 when normalized + const MAX_DURATION = this.isStreetViewAnimation ? 120_000 : 60_000; + + const normalizedDistance = Math.min(1, (this.PATH_DISTANCE - MIN_DISTANCE) / (MAX_DISTANCE - MIN_DISTANCE)); + const easedDistance = d3.easeExpOut(Math.min(normalizedDistance, 1)); + + switch (this.animationSpeed) { + case AnimationSpeed.SLOW: + scalingFactor = 250; + break; + case AnimationSpeed.MEDIUM: + scalingFactor = 150; + break; + case AnimationSpeed.FAST: + scalingFactor = 85; + break; + default: + scalingFactor = 150; + break; + } + + const duration = Math.min(MAX_DURATION, easedDistance * MAX_DISTANCE * (this.isStreetViewAnimation ? scalingFactor * 1.12 : scalingFactor)); + + return duration; + } + + @action + public updateAnimationSpeed(speed: AnimationSpeed) { + // calculate new flyToDuration and animationDuration + this.animationSpeed = speed; + } + + @action + public updateIsStreetViewAnimation(isStreetViewAnimation: boolean) { + this.isStreetViewAnimation = isStreetViewAnimation; + } + + @action + public setPath = (path: turf.helpers.Feature<turf.helpers.LineString, turf.helpers.Properties>) => { + this.PATH = path; + }; + + constructor(firstLngLat: { lng: number; lat: number }, routeCoordinates: Position[], isStreetViewAnimation: boolean, animationSpeed: AnimationSpeed, terrainDisplayed: boolean, mapRef: MapRef | null) { + makeObservable(this); + this.FIRST_LNG_LAT = firstLngLat; + this.previousLngLat = firstLngLat; + this.isStreetViewAnimation = isStreetViewAnimation; + this.MAP_REF = mapRef; + + this.ROUTE_COORDINATES = routeCoordinates; + this.PATH = turf.lineString(routeCoordinates); + this.PATH_DISTANCE = turf.lineDistance(this.PATH); + this.terrainDisplayed = terrainDisplayed; + + const bearing = this.calculateBearing( + { + lng: routeCoordinates[0][0], + lat: routeCoordinates[0][1], + }, + { + lng: routeCoordinates[1][0], + lat: routeCoordinates[1][1], + } + ); + this.currentStreetViewBearing = bearing; + this.animationSpeed = animationSpeed; + } + + public animatePath = async ({ + map, + // path, + // startBearing, + // startAltitude, + // pitch, + currentAnimationPhase, + updateAnimationPhase, + updateFrameId, + }: { + map: MapRef; + // path: turf.helpers.Feature<turf.helpers.LineString, turf.helpers.Properties>, + // startBearing: number, + // startAltitude: number, + // pitch: number, + currentAnimationPhase: number; + updateAnimationPhase: (newAnimationPhase: number) => void; + updateFrameId: (newFrameId: number) => void; + }) => { + return new Promise<void>(async resolve => { + let startTime: number | null = null; + + const frame = async (currentTime: number) => { + if (!startTime) startTime = currentTime; + const elapsedSinceLastFrame = currentTime - startTime; + const phaseIncrement = elapsedSinceLastFrame / this.animationDuration; + const animationPhase = currentAnimationPhase + phaseIncrement; + + // when the duration is complete, resolve the promise and stop iterating + if (animationPhase > 1) { + resolve(); + return; + } + + if (!this.PATH) return; + // calculate the distance along the path based on the animationPhase + const alongPath = turf.along(this.PATH, this.PATH_DISTANCE * animationPhase).geometry.coordinates; + + const lngLat = { + lng: alongPath[0], + lat: alongPath[1], + }; + + let bearing: number; + if (this.isStreetViewAnimation) { + bearing = this.lerp(this.currentStreetViewBearing, this.calculateBearing(this.previousLngLat, lngLat), 0.032); + this.currentStreetViewBearing = bearing; + // bearing = this.calculateBearing(this.previousLngLat, lngLat); // TODO: Calculate actual bearing + } else { + // slowly rotate the map at a constant rate + bearing = this.flyInEndBearing - animationPhase * 200.0; + // bearing = startBearing - animationPhase * 200.0; + } + + runInAction(() => { + this.previousLngLat = lngLat; + }); + + updateAnimationPhase(animationPhase); + + // compute corrected camera ground position, so that he leading edge of the path is in view + var correctedPosition = this.computeCameraPosition( + this.isStreetViewAnimation, + this.currentPitch, + bearing, + lngLat, + this.currentAnimationAltitude, + true // smooth + ); + + // set the pitch and bearing of the camera + const camera = map.getFreeCameraOptions(); + camera.setPitchBearing(this.currentPitch, bearing); + + // set the position and altitude of the camera + camera.position = MercatorCoordinate.fromLngLat(correctedPosition, this.currentAnimationAltitude); + + // apply the new camera options + map.setFreeCameraOptions(camera); + + this.previousAltitude = this.currentAnimationAltitude; + this.previousPitch = this.previousPitch; + + // repeat! + const innerFrameId = await window.requestAnimationFrame(frame); + updateFrameId(innerFrameId); + }; + + const outerFrameId = await window.requestAnimationFrame(frame); + updateFrameId(outerFrameId); + }); + }; + + public flyInAndRotate = async ({ map, updateFrameId }: { map: MapRef; updateFrameId: (newFrameId: number) => void }) => { + return new Promise<{ bearing: number; altitude: number }>(async resolve => { + let start: number | null; + + var currentAltitude; + var currentBearing; + var currentPitch; + + // the animation frame will run as many times as necessary until the duration has been reached + const frame = async (time: number) => { + if (!start) { + start = time; + } + + // otherwise, use the current time to determine how far along in the duration we are + let animationPhase = (time - start) / this.flyToDuration; + + // because the phase calculation is imprecise, the final zoom can vary + // if it ended up greater than 1, set it to 1 so that we get the exact endAltitude that was requested + if (animationPhase > 1) { + animationPhase = 1; + } + + currentAltitude = this.START_ALTITUDE + (this.flyInEndAltitude - this.START_ALTITUDE) * d3.easeCubicOut(animationPhase); + // rotate the camera between startBearing and endBearing + currentBearing = this.flyInStartBearing + (this.flyInEndBearing - this.flyInStartBearing) * d3.easeCubicOut(animationPhase); + + currentPitch = this.FLY_IN_START_PITCH + (this.flyInEndPitch - this.FLY_IN_START_PITCH) * d3.easeCubicOut(animationPhase); + + // compute corrected camera ground position, so the start of the path is always in view + var correctedPosition = this.computeCameraPosition(false, currentPitch, currentBearing, this.FIRST_LNG_LAT, currentAltitude); + + // set the pitch and bearing of the camera + const camera = map.getFreeCameraOptions(); + camera.setPitchBearing(currentPitch, currentBearing); + + // set the position and altitude of the camera + camera.position = MercatorCoordinate.fromLngLat(correctedPosition, currentAltitude); + + // apply the new camera options + map.setFreeCameraOptions(camera); + + // when the animationPhase is done, resolve the promise so the parent function can move on to the next step in the sequence + if (animationPhase === 1) { + resolve({ + bearing: currentBearing, + altitude: currentAltitude, + }); + + // return so there are no further iterations of this frame + return; + } + + const innerFrameId = await window.requestAnimationFrame(frame); + updateFrameId(innerFrameId); + }; + + const outerFrameId = await window.requestAnimationFrame(frame); + updateFrameId(outerFrameId); + }); + }; + + previousCameraPosition: { lng: number; lat: number } | null = null; + + lerp = (start: number, end: number, amt: number) => { + return (1 - amt) * start + amt * end; + }; + + computeCameraPosition = (isStreetViewAnimation: boolean, pitch: number, bearing: number, targetPosition: { lng: number; lat: number }, altitude: number, smooth = false) => { + const bearingInRadian = (bearing * Math.PI) / 180; + const pitchInRadian = ((90 - pitch) * Math.PI) / 180; + + let correctedLng = targetPosition.lng; + let correctedLat = targetPosition.lat; + + if (!isStreetViewAnimation) { + const lngDiff = ((altitude / Math.tan(pitchInRadian)) * Math.sin(-bearingInRadian)) / 70000; // ~70km/degree longitude + const latDiff = ((altitude / Math.tan(pitchInRadian)) * Math.cos(-bearingInRadian)) / 110000; // 110km/degree latitude + + correctedLng = targetPosition.lng + lngDiff; + correctedLat = targetPosition.lat - latDiff; + } + + const newCameraPosition = { + lng: correctedLng, + lat: correctedLat, + }; + + if (smooth) { + if (this.previousCameraPosition) { + newCameraPosition.lng = this.lerp(newCameraPosition.lng, this.previousCameraPosition.lng, this.SMOOTH_FACTOR); + newCameraPosition.lat = this.lerp(newCameraPosition.lat, this.previousCameraPosition.lat, this.SMOOTH_FACTOR); + } + } + + this.previousCameraPosition = newCameraPosition; + + return newCameraPosition; + }; + + public static createGeoJSONCircle = (center: number[], radiusInKm: number, points = 64): Feature<Geometry, GeoJsonProperties> => { + const coords = { + latitude: center[1], + longitude: center[0], + }; + const km = radiusInKm; + const ret = []; + const distanceX = km / (111.32 * Math.cos((coords.latitude * Math.PI) / 180)); + const distanceY = km / 110.574; + let theta; + let x; + let y; + for (let i = 0; i < points; i += 1) { + theta = (i / points) * (2 * Math.PI); + x = distanceX * Math.cos(theta); + y = distanceY * Math.sin(theta); + ret.push([coords.longitude + x, coords.latitude + y]); + } + ret.push(ret[0]); + return { + type: 'Feature', + geometry: { + type: 'Polygon', + coordinates: [ret], + }, + properties: {}, + }; + }; + + private calculateBearing(from: { lng: number; lat: number }, to: { lng: number; lat: number }): number { + const lon1 = from.lng; + const lat1 = from.lat; + const lon2 = to.lng; + const lat2 = to.lat; + + const lon1Rad = (lon1 * Math.PI) / 180; + const lon2Rad = (lon2 * Math.PI) / 180; + const lat1Rad = (lat1 * Math.PI) / 180; + const lat2Rad = (lat2 * Math.PI) / 180; + + const y = Math.sin(lon2Rad - lon1Rad) * Math.cos(lat2Rad); + const x = Math.cos(lat1Rad) * Math.sin(lat2Rad) - Math.sin(lat1Rad) * Math.cos(lat2Rad) * Math.cos(lon2Rad - lon1Rad); + + let bearing = Math.atan2(y, x); + + // Convert bearing from radians to degrees + bearing = (bearing * 180) / Math.PI; + + // Ensure the bearing is within [0, 360) + if (bearing < 0) { + bearing += 360; + } + + return bearing; + } +} diff --git a/src/client/views/nodes/MapBox/DirectionsAnchorMenu.tsx b/src/client/views/nodes/MapBox/DirectionsAnchorMenu.tsx new file mode 100644 index 000000000..7e99795b5 --- /dev/null +++ b/src/client/views/nodes/MapBox/DirectionsAnchorMenu.tsx @@ -0,0 +1,122 @@ +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, unimplementedFunction } from '../../../../Utils'; +import { Doc, Opt } from '../../../../fields/Doc'; +import { NumCast, StrCast } from '../../../../fields/Types'; +import { SelectionManager } from '../../../util/SelectionManager'; +import { SettingsManager } from '../../../util/SettingsManager'; +import { AntimodeMenu, AntimodeMenuProps } from '../../AntimodeMenu'; + +@observer +export class DirectionsAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { + 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> = (color: string, isTargetToggler: boolean) => undefined; + public GetAnchor: (savedAnnotations: Opt<ObservableMap<number, HTMLDivElement[]>>, addAsAnnotation: boolean) => Opt<Doc> = (savedAnnotations: Opt<ObservableMap<number, HTMLDivElement[]>>, addAsAnnotation: boolean) => 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( + () => SelectionManager.Views.slice(), + sel => 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> + ); + } +} diff --git a/src/client/views/nodes/MapBox/GeocoderControl.tsx b/src/client/views/nodes/MapBox/GeocoderControl.tsx new file mode 100644 index 000000000..e4ba51316 --- /dev/null +++ b/src/client/views/nodes/MapBox/GeocoderControl.tsx @@ -0,0 +1,107 @@ +// import React from 'react'; +// import MapboxGeocoder , { GeocoderOptions} from '@mapbox/mapbox-gl-geocoder' +// import { ControlPosition, MarkerProps, useControl } from "react-map-gl"; + +// import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css' + + +// export type GeocoderControlProps = Omit<GeocoderOptions, 'accessToken' | 'mapboxgl' | 'marker'> & { +// mapboxAccessToken: string; +// marker?: Omit<MarkerProps, 'longitude' | 'latitude'>; +// position: ControlPosition; + +// onLoading: (...args: any[]) => void; +// onResults: (...args: any[]) => void; +// onResult: (...args: any[]) => void; +// onError: (...args: any[]) => void; +// } + +// export const GeocoderControl = (props: GeocoderControlProps) => { + +// console.log(props); + +// const geocoder = useControl<MapboxGeocoder>( +// () => { +// const ctrl = new MapboxGeocoder({ +// ...props, +// marker: false, +// accessToken: props.mapboxAccessToken +// }); +// ctrl.on('loading', props.onLoading); +// ctrl.on('results', props.onResults); +// ctrl.on('result', evt => { +// props.onResult(evt); + +// // const {result} = evt; +// // const location = +// // result && +// // (result.center || (result.geometry?.type === 'Point' && result.geometry.coordinates)); +// // if (location && props.marker) { +// // setMarker(<Marker {...props.marker} longitude={location[0]} latitude={location[1]} />); +// // } else { +// // setMarker(null); +// // } +// }); +// ctrl.on('error', props.onError); +// return ctrl; +// }, +// { +// position: props.position +// } +// ); + + +// // @ts-ignore (TS2339) private member +// if (geocoder._map) { +// if (geocoder.getProximity() !== props.proximity && props.proximity !== undefined) { +// geocoder.setProximity(props.proximity); +// } +// if (geocoder.getRenderFunction() !== props.render && props.render !== undefined) { +// geocoder.setRenderFunction(props.render); +// } +// if (geocoder.getLanguage() !== props.language && props.language !== undefined) { +// geocoder.setLanguage(props.language); +// } +// if (geocoder.getZoom() !== props.zoom && props.zoom !== undefined) { +// geocoder.setZoom(props.zoom); +// } +// if (geocoder.getFlyTo() !== props.flyTo && props.flyTo !== undefined) { +// geocoder.setFlyTo(props.flyTo); +// } +// if (geocoder.getPlaceholder() !== props.placeholder && props.placeholder !== undefined) { +// geocoder.setPlaceholder(props.placeholder); +// } +// if (geocoder.getCountries() !== props.countries && props.countries !== undefined) { +// geocoder.setCountries(props.countries); +// } +// if (geocoder.getTypes() !== props.types && props.types !== undefined) { +// geocoder.setTypes(props.types); +// } +// if (geocoder.getMinLength() !== props.minLength && props.minLength !== undefined) { +// geocoder.setMinLength(props.minLength); +// } +// if (geocoder.getLimit() !== props.limit && props.limit !== undefined) { +// geocoder.setLimit(props.limit); +// } +// if (geocoder.getFilter() !== props.filter && props.filter !== undefined) { +// geocoder.setFilter(props.filter); +// } +// if (geocoder.getOrigin() !== props.origin && props.origin !== undefined) { +// geocoder.setOrigin(props.origin); +// } +// } +// return ( +// <div> +// Geocoder +// </div> +// ) +// } + +// const noop = () => {}; + +// GeocoderControl.defaultProps = { +// marker: true, +// onLoading: noop, +// onResults: noop, +// onError: noop +// };
\ No newline at end of file diff --git a/src/client/views/nodes/MapBox/MapAnchorMenu.scss b/src/client/views/nodes/MapBox/MapAnchorMenu.scss index 6990bdcf1..c36d98afe 100644 --- a/src/client/views/nodes/MapBox/MapAnchorMenu.scss +++ b/src/client/views/nodes/MapBox/MapAnchorMenu.scss @@ -51,4 +51,81 @@ border: 2px solid white; } } -}
\ No newline at end of file +} + +.map-anchor-menu-container { + display: flex; + flex-direction: column; + gap: 5px; + padding: 5px; + height: max-content; + min-width: 300px; + + .direction-inputs { + display: flex; + flex-direction: column; + gap: 5px; + + #get-routes-button { + padding: 8px 10px; + border-radius: 5px; + } + } + + .MuiInputBase-input{ + color: white !important; + } + + + .css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input.Mui-disabled{ + -webkit-text-fill-color: #b3b2b2 !important; + } + + .current-route-info-container { + width: 100%; + + .transportation-icons-container { + display: flex; + justify-content: center; + align-items: center; + gap: 5px; + } + + .selected-route-details-container{ + display: flex; + flex-direction: column; + gap: 3px; + justify-content: center; + align-items: flex-start; + padding: 5px; + } + + + } + + .customized-marker-container{ + display: flex; + flex-direction: column; + gap: 10px; + + .current-marker-container{ + display: flex; + align-items: center; + gap: 5px; + } + + .all-markers-container{ + display: flex; + align-items: center; + gap: 10px; + flex-wrap: wrap; + max-width: 400px; + } + } + + + + +} + + diff --git a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx index 7af4d9b59..08bea5d9d 100644 --- a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx +++ b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx @@ -1,15 +1,25 @@ -import React = require('react'); +import { IconLookup, faAdd, faArrowDown, faArrowLeft, faArrowsRotate, faBicycle, faCalendarDays, faCar, faDiamondTurnRight, faEdit, faPersonWalking, faRoute } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { IReactionDisposer, ObservableMap, reaction } from 'mobx'; +import { Autocomplete, Checkbox, FormControlLabel, TextField } from '@mui/material'; +import { IconButton } from 'browndash-components'; +import { Position } from 'geojson'; +import { IReactionDisposer, ObservableMap, action, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; -import { Doc, Opt } from '../../../../fields/Doc'; +import * as React from 'react'; +import { CirclePicker, ColorResult } from 'react-color'; import { returnFalse, setupMoveUpEvents, unimplementedFunction } from '../../../../Utils'; +import { Doc, Opt } from '../../../../fields/Doc'; +import { NumCast, StrCast } from '../../../../fields/Types'; +import { CalendarManager } from '../../../util/CalendarManager'; import { SelectionManager } from '../../../util/SelectionManager'; -import { AntimodeMenu, AntimodeMenuProps } from '../../AntimodeMenu'; -// import { GPTPopup, GPTPopupMode } from './../../GPTPopup/GPTPopup'; -import { IconButton } from 'browndash-components'; import { SettingsManager } from '../../../util/SettingsManager'; +import { AntimodeMenu, AntimodeMenuProps } from '../../AntimodeMenu'; import './MapAnchorMenu.scss'; +import { MapboxApiUtility, TransportationType } from './MapboxApiUtility'; +import { MarkerIcons } from './MarkerIcons'; +// import { GPTPopup, GPTPopupMode } from './../../GPTPopup/GPTPopup'; + +type MapAnchorMenuType = 'standard' | 'routeCreation' | 'calendar' | 'customize' | 'route'; @observer export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { @@ -17,6 +27,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { private _disposer: IReactionDisposer | undefined; private _commentRef = React.createRef<HTMLDivElement>(); + private _fileInputRef = React.createRef<HTMLInputElement>(); public onMakeAnchor: () => Opt<Doc> = () => undefined; // Method to get anchor from text search @@ -30,25 +41,90 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { // public MakeTargetToggle: () => void = unimplementedFunction; // public ShowTargetTrail: () => void = unimplementedFunction; public IsTargetToggler: () => boolean = returnFalse; + + public DisplayRoute: (routeInfoMap: Record<TransportationType, any> | undefined, type: TransportationType) => void = unimplementedFunction; + public AddNewRouteToMap: (coordinates: Position[], origin: string, destination: any, createPinForDestination: boolean) => void = unimplementedFunction; + public CreatePin: (feature: any) => void = unimplementedFunction; + + public UpdateMarkerColor: (color: string) => void = unimplementedFunction; + public UpdateMarkerIcon: (iconKey: string) => void = unimplementedFunction; + + public Hide: () => void = unimplementedFunction; + + public OpenAnimationPanel: (routeDoc: Doc | undefined) => void = unimplementedFunction; + + @observable + menuType: MapAnchorMenuType = 'standard'; + + @action + public setMenuType = (menuType: MapAnchorMenuType) => { + this.menuType = menuType; + }; + + private allMapPinDocs: Doc[] = []; + + private pinDoc: Doc | undefined = undefined; + + private routeDoc: Doc | undefined = undefined; + + private title: string | undefined = undefined; + + public setPinDoc(pinDoc: Doc | undefined) { + if (pinDoc) { + this.pinDoc = pinDoc; + this.title = StrCast(pinDoc.title ? pinDoc.title : `${NumCast(pinDoc.longitude)}, ${NumCast(pinDoc.latitude)}`); + } + } + + public setRouteDoc(routeDoc: Doc | undefined) { + if (routeDoc) { + this.routeDoc = routeDoc; + this.title = StrCast(routeDoc.title ?? 'Map route'); + } + } + + @action + public Reset() { + this.destinationSelected = false; + this.currentRouteInfoMap = undefined; + this.destinationFeatures = []; + this.selectedDestinationFeature = undefined; + this.allMapPinDocs = []; + this.title = undefined; + this.routeDoc = undefined; + this.pinDoc = undefined; + } + + public setAllMapboxPins(pinDocs: Doc[]) { + this.allMapPinDocs = pinDocs; + pinDocs.forEach((p, idx) => { + console.log(`Pin ${idx}: ${p.title}`); + }); + } + public get Active() { return this._left > 0; } - constructor(props: Readonly<{}>) { + constructor(props: any) { super(props); - + makeObservable(this); MapAnchorMenu.Instance = this; MapAnchorMenu.Instance._canFade = false; } componentWillUnmount() { + this.destinationFeatures = []; + this.destinationSelected = false; + this.selectedDestinationFeature = undefined; + this.currentRouteInfoMap = undefined; this._disposer?.(); } componentDidMount() { this._disposer = reaction( - () => SelectionManager.Views().slice(), - selected => MapAnchorMenu.Instance.fadeOut(true) + () => SelectionManager.Views.slice(), + sel => MapAnchorMenu.Instance.fadeOut(true) ); } // audioDown = (e: React.PointerEvent) => { @@ -81,39 +157,267 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { }; static top = React.createRef<HTMLDivElement>(); + // public get Top(){ // return this.top // } + @action + DirectionsClick = () => { + this.menuType = 'routeCreation'; + }; + + @action + CustomizeClick = () => { + this.currentRouteInfoMap = undefined; + this.menuType = 'customize'; + }; + + @action + BackClick = () => { + this.currentRouteInfoMap = undefined; + this.menuType = 'standard'; + }; + + @action + TriggerFileInputClick = () => { + if (this._fileInputRef) { + this._fileInputRef.current?.click(); // Trigger the file input click event + } + }; + + @action + onMarkerColorChange = (color: ColorResult) => { + if (this.pinDoc) { + this.pinDoc.markerColor = color.hex; + } + }; + + revertToOriginalMarker = () => { + if (this.pinDoc) { + this.pinDoc.markerType = 'MAP_PIN'; + this.pinDoc.markerColor = '#ff5722'; + } + }; + + onMarkerIconChange = (iconKey: string) => { + if (this.pinDoc) { + this.pinDoc.markerType = iconKey; + } + }; + + @observable + destinationFeatures: any[] = []; + + @observable + destinationSelected: boolean = false; + + @observable + selectedDestinationFeature: any = undefined; + + @observable + createPinForDestination: boolean = true; + + @observable + currentRouteInfoMap: Record<TransportationType, any> | undefined = undefined; + + @observable + selectedTransportationType: TransportationType = 'driving'; + + @action + handleTransportationTypeChange = (newType: TransportationType) => { + if (newType !== this.selectedTransportationType) { + this.selectedTransportationType = newType; + this.DisplayRoute(this.currentRouteInfoMap, newType); + } + }; + + @action + handleSelectedDestinationFeature = (destinationFeature: any) => { + this.selectedDestinationFeature = destinationFeature; + }; + + @action + toggleCreatePinForDestinationCheckbox = () => { + this.createPinForDestination = !this.createPinForDestination; + }; + + @action + handleDestinationSearchChange = async (searchText: string) => { + if (this.selectedDestinationFeature !== undefined) this.selectedDestinationFeature = undefined; + const features = await MapboxApiUtility.forwardGeocodeForFeatures(searchText); + if (features) { + runInAction(() => { + this.destinationFeatures = features; + }); + } + }; + + getRoutes = async (destinationFeature: any) => { + const currentPinLong: number = NumCast(this.pinDoc?.longitude); + const currentPinLat: number = NumCast(this.pinDoc?.latitude); + + if (currentPinLong && currentPinLat && destinationFeature.center) { + const routeInfoMap = await MapboxApiUtility.getDirections([currentPinLong, currentPinLat], destinationFeature.center); + if (routeInfoMap) { + runInAction(() => { + this.currentRouteInfoMap = routeInfoMap; + }); + this.DisplayRoute(routeInfoMap, 'driving'); + } + } + + // get route menu, set it equal to here + // create a temporary route + // create pin if createPinForDestination was clicked + }; + + HandleAddRouteClick = () => { + if (this.currentRouteInfoMap && this.selectedTransportationType && this.selectedDestinationFeature) { + const coordinates = this.currentRouteInfoMap[this.selectedTransportationType].coordinates; + console.log(coordinates); + console.log(this.selectedDestinationFeature); + this.AddNewRouteToMap(coordinates, this.title ?? '', this.selectedDestinationFeature, this.createPinForDestination); + } + }; + + getMarkerIcon = (): JSX.Element | undefined => { + if (this.pinDoc) { + const markerType = StrCast(this.pinDoc.markerType); + const markerColor = StrCast(this.pinDoc.markerColor); + + return MarkerIcons.getFontAwesomeIcon(markerType, '2x', markerColor); + } + return undefined; + }; + + getDirectionsButton: JSX.Element = (<IconButton tooltip="Get directions" onPointerDown={this.DirectionsClick} icon={<FontAwesomeIcon icon={faDiamondTurnRight as IconLookup} />} color={SettingsManager.userColor} />); + + getAddToCalendarButton = (docType: string): JSX.Element => { + return ( + <IconButton + tooltip="Add to calendar" + onPointerDown={() => { + CalendarManager.Instance.open(undefined, docType === 'pin' ? this.pinDoc : this.routeDoc); + }} + icon={<FontAwesomeIcon icon={faCalendarDays as IconLookup} />} + color={SettingsManager.userColor} + /> + ); + }; + addToCalendarButton: JSX.Element = ( + <IconButton tooltip="Add to calendar" onPointerDown={() => CalendarManager.Instance.open(undefined, this.pinDoc)} icon={<FontAwesomeIcon icon={faCalendarDays as IconLookup} />} color={SettingsManager.userColor} /> + ); + + getLinkNoteToDocButton = (docType: string): JSX.Element => { + return ( + <div ref={this._commentRef}> + <IconButton + tooltip={`Link Note to ${docType === 'pin' ? 'Pin' : 'Route'}`} // + onPointerDown={this.notePointerDown} + icon={<FontAwesomeIcon icon="sticky-note" />} + color={SettingsManager.userColor} + /> + </div> + ); + }; + + linkNoteToPinOrRoutenButton: JSX.Element = ( + <div ref={this._commentRef}> + <IconButton + tooltip="Link Note to Pin" // + onPointerDown={this.notePointerDown} + icon={<FontAwesomeIcon icon="sticky-note" />} + color={SettingsManager.userColor} + /> + </div> + ); + + customizePinButton: JSX.Element = (<IconButton tooltip="Customize pin" onPointerDown={this.CustomizeClick} icon={<FontAwesomeIcon icon={faEdit as IconLookup} />} color={SettingsManager.userColor} />); + + centerOnPinButton: JSX.Element = ( + <IconButton + tooltip="Center on pin" // + onPointerDown={this.Center} + icon={<FontAwesomeIcon icon="compress-arrows-alt" />} + color={SettingsManager.userColor} + /> + ); + + backButton: JSX.Element = ( + <IconButton + tooltip="Go back" // + onPointerDown={this.BackClick} + icon={<FontAwesomeIcon icon={faArrowLeft as IconLookup} />} + color={SettingsManager.userColor} + /> + ); + + addRouteButton: JSX.Element = ( + <IconButton + tooltip="Add route" // + onPointerDown={this.HandleAddRouteClick} + icon={<FontAwesomeIcon icon={faAdd as IconLookup} />} + color={SettingsManager.userColor} + /> + ); + + getDeleteButton = (type: string) => { + return ( + <IconButton + tooltip={`Delete ${type === 'pin' ? 'Pin' : 'Route'}`} // + onPointerDown={this.Delete} + icon={<FontAwesomeIcon icon="trash-alt" />} + color={SettingsManager.userColor} + /> + ); + }; + + animateRouteButton: JSX.Element = (<IconButton tooltip="Animate route" onPointerDown={() => this.OpenAnimationPanel(this.routeDoc)} icon={<FontAwesomeIcon icon={faRoute as IconLookup} />} color={SettingsManager.userColor} />); + + revertToOriginalMarkerButton = ( + <IconButton + tooltip="Revert to original" // + onPointerDown={() => this.revertToOriginalMarker()} + icon={<FontAwesomeIcon icon={faArrowsRotate as IconLookup} />} + color={SettingsManager.userColor} + /> + ); + render() { const buttons = ( - <> - { - <IconButton - tooltip="Delete Pin" // - onPointerDown={this.Delete} - icon={<FontAwesomeIcon icon="trash-alt" />} - color={SettingsManager.userColor} - /> - } - { - <div ref={this._commentRef}> - <IconButton - tooltip="Link Note to Pin" // - onPointerDown={this.notePointerDown} - icon={<FontAwesomeIcon icon="sticky-note" />} - color={SettingsManager.userColor} - /> - </div> - } - { - <IconButton - tooltip="Center on pin" // - onPointerDown={this.Center} - icon={<FontAwesomeIcon icon="compress-arrows-alt" />} - color={SettingsManager.userColor} - /> - } + <div className="menu-buttons" style={{ display: 'flex' }}> + {this.menuType === 'standard' && ( + <> + {this.getDeleteButton('pin')} + {this.getDirectionsButton} + {this.getAddToCalendarButton('pin')} + {this.getLinkNoteToDocButton('pin')} + {this.customizePinButton} + {this.centerOnPinButton} + </> + )} + {this.menuType === 'routeCreation' && ( + <> + {this.backButton} + {this.addRouteButton} + </> + )} + {this.menuType === 'route' && ( + <> + {this.getDeleteButton('route')} + {this.animateRouteButton} + {this.getAddToCalendarButton('route')} + {this.getLinkNoteToDocButton('route')} + </> + )} + {this.menuType === 'customize' && ( + <> + {this.backButton} + {this.revertToOriginalMarkerButton} + </> + )} + {/* {this.IsTargetToggler !== returnFalse && ( <Toggle tooltip={'Make target visibility toggle on click'} @@ -125,13 +429,100 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { color={SettingsManager.userColor} /> )} */} - </> + </div> ); return this.getElement( - <div ref={MapAnchorMenu.top} style={{ width: '100%', display: 'flex' }}> + <div ref={MapAnchorMenu.top} className="map-anchor-menu-container"> + {this.menuType === 'standard' && <div>{this.title}</div>} + {this.menuType === 'routeCreation' && ( + <div className="direction-inputs" style={{ display: 'flex', flexDirection: 'column' }}> + <TextField fullWidth disabled value={this.title} /> + <FontAwesomeIcon icon={faArrowDown as IconLookup} size="xs" /> + <Autocomplete + fullWidth + id="route-destination-searcher" + onInputChange={(e: any, searchText: any) => this.handleDestinationSearchChange(searchText)} + onChange={(e: any, feature: any, reason: any) => { + if (reason === 'clear') { + this.handleSelectedDestinationFeature(undefined); + } else if (reason === 'selectOption') { + this.handleSelectedDestinationFeature(feature); + } + }} + options={this.destinationFeatures.filter(feature => feature.place_name).map(feature => feature)} + getOptionLabel={(feature: any) => feature.place_name} + renderInput={(params: any) => <TextField {...params} placeholder="Enter a destination" />} + /> + {this.selectedDestinationFeature && ( + <> + {!this.allMapPinDocs.some(pinDoc => pinDoc.title === this.selectedDestinationFeature.place_name) && ( + <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '5px' }}> + <FormControlLabel label="Create pin for destination?" control={<Checkbox color="success" checked={this.createPinForDestination} onChange={this.toggleCreatePinForDestinationCheckbox} />} /> + </div> + )} + </> + )} + <button id="get-routes-button" disabled={this.selectedDestinationFeature ? false : true} onClick={() => this.getRoutes(this.selectedDestinationFeature)}> + Get routes + </button> + + {/* <input + placeholder="Origin" + /> */} + </div> + )} + {this.currentRouteInfoMap && ( + <div className="current-route-info-container"> + <div className="transportation-icons-container"> + <IconButton + tooltip="Driving route" + onPointerDown={() => this.handleTransportationTypeChange('driving')} + icon={<FontAwesomeIcon icon={faCar as IconLookup} />} + color={this.selectedTransportationType === 'driving' ? 'lightblue' : 'grey'} + /> + <IconButton + tooltip="Cycling route" + onPointerDown={() => this.handleTransportationTypeChange('cycling')} + icon={<FontAwesomeIcon icon={faBicycle as IconLookup} />} + color={this.selectedTransportationType === 'cycling' ? 'lightblue' : 'grey'} + /> + <IconButton + tooltip="Walking route" + onPointerDown={() => this.handleTransportationTypeChange('walking')} + icon={<FontAwesomeIcon icon={faPersonWalking as IconLookup} />} + color={this.selectedTransportationType === 'walking' ? 'lightblue' : 'grey'} + /> + </div> + <div className="selected-route-details-container"> + <div>Duration: {this.currentRouteInfoMap[this.selectedTransportationType].duration}</div> + <div>Distance: {this.currentRouteInfoMap[this.selectedTransportationType].distance}</div> + </div> + </div> + )} + {this.menuType === 'customize' && ( + <div className="customized-marker-container"> + <div className="current-marker-container"> + <div>Current Marker: </div> + <div>{this.getMarkerIcon()}</div> + </div> + <div className="color-picker-container" style={{ marginBottom: '10px' }}> + <CirclePicker circleSize={15} circleSpacing={7} width="100%" onChange={color => this.onMarkerColorChange(color)} /> + </div> + <div className="all-markers-container"> + {Object.keys(MarkerIcons.FAMarkerIconsMap).map(iconKey => ( + <div key={iconKey} className="marker-icon"> + <IconButton onPointerDown={() => this.onMarkerIconChange(iconKey)} icon={MarkerIcons.getFontAwesomeIcon(iconKey, '1x', 'white')} /> + </div> + ))} + </div> + <div style={{ width: '100%', height: '3px', color: 'white' }}></div> + </div> + )} + {this.menuType === 'route' && this.routeDoc && <div>{StrCast(this.routeDoc.title)}</div>} {buttons} - </div> + </div>, + true ); } } diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss index 242677231..25b4587a5 100644 --- a/src/client/views/nodes/MapBox/MapBox.scss +++ b/src/client/views/nodes/MapBox/MapBox.scss @@ -1,9 +1,17 @@ -@import '../../global/globalCssVariables.scss'; +@import '../../global/globalCssVariables.module.scss'; .mapBox { width: 100%; height: 100%; overflow: hidden; display: flex; + position: absolute; + + .mapboxgl-map { + overflow: unset !important; + } + .mapboxgl-ctrl { + display: none !important; + } .mapBox-infoWindow { background-color: white; @@ -14,15 +22,133 @@ .mapBox-searchbar { display: flex; flex-direction: row; + gap: 5px; + align-items: center; width: calc(100% - 40px); - .editableText-container { + + // .editableText-container { + // width: 100%; + // font-size: 16px !important; + // } + // input { + // width: 100%; + // } + } + + .mapbox-settings-panel { + z-index: 900; + padding: 10px 20px; + display: flex; + background-color: rgb(187, 187, 187); + font-size: 1.3em; + flex-direction: column; + align-items: flex-start; + justify-content: center; + gap: 7px; + position: absolute; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + + .mapbox-style-select { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + gap: 4px; + } + + .mapbox-terrain-selection { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + gap: 4px; + } + } + + .mapbox-geocoding-search-results { + z-index: 900; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + position: absolute; + background-color: rgb(187, 187, 187); + font-size: 1.4em; + padding: 10px; + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + + .search-result-container { width: 100%; - font-size: 16px !important; + padding: 10px; + &:hover { + background-color: lighten(rgb(187, 187, 187), 10%); + } } - input { + } + + .animation-panel { + z-index: 900; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + background-color: rgb(187, 187, 187); + padding: 10px; + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + position: absolute; + + #route-to-animate-title { + font-size: 1.25em; + font-weight: bold; + } + + .route-animation-options { + display: flex; + justify-content: flex-start; + align-items: center; width: 100%; + + .animation-suboptions { + display: flex; + justify-content: flex-start; + align-items: center; + gap: 7px; + width: 100%; + + label { + margin-bottom: 0; + } + + .speed-label { + margin-right: 5px; + } + + #divider { + margin-left: 10px; + margin-right: 10px; + } + } } } + + .zoom-box { + position: absolute; + z-index: 900; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: white; + font-size: 1.4em; + border-radius: 5px; + bottom: 5px; + left: 5px; + padding: 3px; + } + .mapBox-topbar { display: flex; flex-direction: row; diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index 50b070e7f..c185c66fc 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -1,34 +1,44 @@ +import { IconLookup, faCircleXmark, faGear, faPause, faPlay, faRotate } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import BingMapsReact from 'bingmaps-react'; -import { Button, EditableText, IconButton, Type } from 'browndash-components'; -import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from 'mobx'; +import { Checkbox, FormControlLabel, TextField } from '@mui/material'; +import * as turf from '@turf/turf'; +import { IconButton, Size, Type } from 'browndash-components'; +import * as d3 from 'd3'; +import { Feature, FeatureCollection, GeoJsonProperties, Geometry, LineString, Position } from 'geojson'; +import mapboxgl, { LngLat, LngLatBoundsLike, MapLayerMouseEvent } from 'mapbox-gl'; +import { IReactionDisposer, ObservableMap, action, autorun, computed, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; +import { CirclePicker, ColorResult } from 'react-color'; +import { Layer, MapProvider, MapRef, Map as MapboxMap, Marker, Source, ViewState, ViewStateChangeEvent } from 'react-map-gl'; +import { MarkerEvent } from 'react-map-gl/dist/esm/types'; +import { Utils, emptyFunction, setupMoveUpEvents } from '../../../../Utils'; import { Doc, DocListCast, Field, LinkedTo, Opt } from '../../../../fields/Doc'; -import { DocCss, Highlight, Width } from '../../../../fields/DocSymbols'; -import { Id } from '../../../../fields/FieldSymbols'; -import { InkTool } from '../../../../fields/InkField'; +import { DocCss, Highlight } from '../../../../fields/DocSymbols'; import { DocCast, NumCast, StrCast } from '../../../../fields/Types'; -import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnOne, setupMoveUpEvents, Utils } from '../../../../Utils'; -import { Docs, DocUtils } from '../../../documents/Documents'; import { DocumentType } from '../../../documents/DocumentTypes'; +import { DocUtils, Docs } from '../../../documents/Documents'; import { DocumentManager } from '../../../util/DocumentManager'; import { DragManager } from '../../../util/DragManager'; import { LinkManager } from '../../../util/LinkManager'; import { SnappingManager } from '../../../util/SnappingManager'; -import { Transform } from '../../../util/Transform'; -import { undoable, UndoManager } from '../../../util/UndoManager'; +import { UndoManager, undoable } from '../../../util/UndoManager'; +import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../../DocComponent'; +import { SidebarAnnos } from '../../SidebarAnnos'; import { MarqueeOptionsMenu } from '../../collections/collectionFreeForm'; -import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../../DocComponent'; import { Colors } from '../../global/globalEnums'; -import { MarqueeAnnotator } from '../../MarqueeAnnotator'; -import { SidebarAnnos } from '../../SidebarAnnos'; import { DocumentView } from '../DocumentView'; -import { FieldView, FieldViewProps } from '../FieldView'; +import { FocusViewOptions, FieldView, FieldViewProps } from '../FieldView'; import { FormattedTextBox } from '../formattedText/FormattedTextBox'; import { PinProps, PresBox } from '../trails'; +import { fastSpeedIcon, mediumSpeedIcon, slowSpeedIcon } from './AnimationSpeedIcons'; +import { AnimationSpeed, AnimationStatus, AnimationUtility } from './AnimationUtility'; import { MapAnchorMenu } from './MapAnchorMenu'; import './MapBox.scss'; +import { MapboxApiUtility, TransportationType } from './MapboxApiUtility'; +import { MarkerIcons } from './MarkerIcons'; +// import { GeocoderControl } from './GeocoderControl'; + // amongus /** * MapBox architecture: @@ -44,6 +54,30 @@ import './MapBox.scss'; */ const bingApiKey = process.env.BING_MAPS; // if you're running local, get a Bing Maps api key here: https://www.bingmapsportal.com/ and then add it to the .env file in the Dash-Web root directory as: _CLIENT_BING_MAPS=<your apikey> +const MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoiemF1bHRhdmFuZ2FyIiwiYSI6ImNscHgwNDd1MDA3MXIydm92ODdianp6cGYifQ.WFAqbhwxtMHOWSPtu0l2uQ'; +const MAPBOX_FORWARD_GEOCODE_BASE_URL = 'https://api.mapbox.com/geocoding/v5/mapbox.places/'; + +const MAPBOX_REVERSE_GEOCODE_BASE_URL = 'https://api.mapbox.com/geocoding/v5/mapbox.places/'; + +type PopupInfo = { + longitude: number; + latitude: number; + title: string; + description: string; +}; + +// export type GeocoderControlProps = Omit<GeocoderOptions, 'accessToken' | 'mapboxgl' | 'marker'> & { +// mapboxAccessToken: string; +// marker?: Omit<MarkerProps, 'longitude' | 'latitude'>; +// position: ControlPosition; + +// onResult: (...args: any[]) => void; +// }; + +type MapMarker = { + longitude: number; + latitude: number; +}; /** * Consider integrating later: allows for drawing, circling, making shapes on map @@ -62,19 +96,22 @@ const bingApiKey = process.env.BING_MAPS; // if you're running local, get a Bing // }); @observer -export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps>() { +export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(MapBox, fieldKey); } private _dragRef = React.createRef<HTMLDivElement>(); - private _mainCont: React.RefObject<HTMLDivElement> = React.createRef(); - private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef(); private _sidebarRef = React.createRef<SidebarAnnos>(); private _ref: React.RefObject<HTMLDivElement> = React.createRef(); + private _mapRef: React.RefObject<MapRef> = React.createRef(); private _disposers: { [key: string]: IReactionDisposer } = {}; private _setPreviewCursor: undefined | ((x: number, y: number, drag: boolean, hide: boolean, doc: Opt<Doc>) => void); - @observable private _marqueeing: number[] | undefined; + constructor(props: FieldViewProps) { + super(props); + makeObservable(this); + } + @observable private _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>(); @computed get allSidebarDocs() { return DocListCast(this.dataDoc[this.SidebarKey]); @@ -86,6 +123,116 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps @computed get allPushpins() { return this.allAnnotations.filter(anno => anno.type === DocumentType.PUSHPIN); } + @computed get allRoutes() { + return this.allAnnotations.filter(anno => anno.type === DocumentType.MAPROUTE); + } + @computed get updatedRouteCoordinates(): Feature<Geometry, GeoJsonProperties> { + if (this.routeToAnimate?.routeCoordinates) { + const originalCoordinates: Position[] = JSON.parse(StrCast(this.routeToAnimate.routeCoordinates)); + // const index = Math.floor(this.animationPhase * originalCoordinates.length); + const index = this.animationPhase * (originalCoordinates.length - 1); // Calculate the fractional index + console.log('Animation phase', this.animationPhase); + const startIndex = Math.floor(index); + const endIndex = Math.ceil(index); + let feature: Feature<Geometry, GeoJsonProperties>; + + let geometry: LineString; + if (startIndex === endIndex) { + // AnimationPhase is at a whole number (no interpolation needed) + const coordinates = [originalCoordinates[startIndex]]; + geometry = { + type: 'LineString', + coordinates, + }; + feature = { + type: 'Feature', + properties: { + routeTitle: StrCast(this.routeToAnimate.title), + }, + geometry: geometry, + }; + } else { + // Interpolate between two coordinates + const startCoord = originalCoordinates[startIndex]; + const endCoord = originalCoordinates[endIndex]; + const fraction = index - startIndex; + + const interpolator = d3.interpolateArray(startCoord, endCoord); + + const interpolatedCoord = interpolator(fraction); + + const coordinates = originalCoordinates.slice(0, startIndex + 1).concat([interpolatedCoord]); + + geometry = { + type: 'LineString', + coordinates, + }; + feature = { + type: 'Feature', + properties: { + routeTitle: StrCast(this.routeToAnimate.title), + }, + geometry: geometry, + }; + } + + autorun(() => { + const animationUtil = this.animationUtility; + const concattedCoordinates = geometry.coordinates.concat(originalCoordinates.slice(endIndex)); + const newFeature: Feature<LineString, turf.Properties> = { + type: 'Feature', + properties: {}, + geometry: { + type: 'LineString', + coordinates: concattedCoordinates, + }, + }; + if (animationUtil) { + animationUtil.setPath(newFeature); + } + }); + return feature; + } + console.log('ERROR'); + return { + type: 'Feature', + properties: {}, + geometry: { + type: 'LineString', + coordinates: [], + }, + }; + } + @computed get selectedRouteCoordinates(): Position[] { + let coordinates: Position[] = []; + if (this.routeToAnimate?.routeCoordinates) { + coordinates = JSON.parse(StrCast(this.routeToAnimate.routeCoordinates)); + } + return coordinates; + } + + @computed get allRoutesGeoJson(): FeatureCollection { + const features: Feature<Geometry, GeoJsonProperties>[] = this.allRoutes.map((routeDoc: Doc) => { + console.log('Route coords: ', routeDoc.routeCoordinates); + const geometry: LineString = { + type: 'LineString', + coordinates: JSON.parse(StrCast(routeDoc.routeCoordinates)), + }; + return { + type: 'Feature', + properties: { + routeTitle: routeDoc.title, + }, + geometry: geometry, + }; + }); + + return { + type: 'FeatureCollection', + features: features, + }; + } + @computed get SidebarShown() { return this.layoutDoc._layout_showSidebar ? true : false; } @@ -93,7 +240,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps return StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%'); } @computed get sidebarColor() { - return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this.props.fieldKey + '_backgroundColor'], '#e4e4e4')); + return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this._props.fieldKey + '_backgroundColor'], '#e4e4e4')); } @computed get SidebarKey() { return this.fieldKey + '_sidebar'; @@ -101,13 +248,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps componentDidMount() { this._unmounting = false; - this.props.setContentView?.(this); + this._props.setContentViewBox?.(this); } _unmounting = false; componentWillUnmount(): void { this._unmounting = true; - this.deselectPin(); + this.deselectPinOrRoute(); this._rerenderTimeout && clearTimeout(this._rerenderTimeout); Object.keys(this._disposers).forEach(key => this._disposers[key]?.()); } @@ -122,7 +269,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps if (!this.layoutDoc._layout_showSidebar) this.toggleSidebar(); const docs = doc instanceof Doc ? [doc] : doc; docs.forEach(doc => { - let existingPin = this.allPushpins.find(pin => pin.latitude === doc.latitude && pin.longitude === doc.longitude) ?? this.selectedPin; + let existingPin = this.allPushpins.find(pin => pin.latitude === doc.latitude && pin.longitude === doc.longitude) ?? this.selectedPinOrRoute; if (doc.latitude !== undefined && doc.longitude !== undefined && !existingPin) { existingPin = this.createPushpin(NumCast(doc.latitude), NumCast(doc.longitude), StrCast(doc.map)); } @@ -166,11 +313,11 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps e, (e, down, delta) => runInAction(() => { - const localDelta = this.props + const localDelta = this._props .ScreenToLocalTransform() - .scale(this.props.NativeDimScaling?.() || 1) + .scale(this._props.NativeDimScaling?.() || 1) .transformDirection(delta[0], delta[1]); - const fullWidth = this.layoutDoc[Width](); + const fullWidth = NumCast(this.layoutDoc._width); const mapWidth = fullWidth - this.sidebarWidth(); if (this.sidebarWidth() + localDelta[0] > 0) { this.layoutDoc._layout_showSidebar = true; @@ -187,7 +334,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps () => UndoManager.RunInBatch(this.toggleSidebar, 'toggle sidebar map') ); }; - sidebarWidth = () => (Number(this.sidebarWidthPercent.substring(0, this.sidebarWidthPercent.length - 1)) / 100) * this.props.PanelWidth(); + sidebarWidth = () => (Number(this.sidebarWidthPercent.substring(0, this.sidebarWidthPercent.length - 1)) / 100) * this._props.PanelWidth(); /** * Handles toggle of sidebar on click the little comment button @@ -199,8 +346,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps key="sidebar" title="Toggle Sidebar" style={{ - display: !this.props.isContentActive() ? 'none' : undefined, - top: StrCast(this.rootDoc._layout_showTitle) === 'title' ? 20 : 5, + display: !this._props.isContentActive() ? 'none' : undefined, + top: StrCast(this.Document._layout_showTitle) === 'title' ? 20 : 5, backgroundColor: this.SidebarShown ? Colors.MEDIUM_BLUE : Colors.BLACK, }} onPointerDown={this.sidebarBtnDown}> @@ -223,25 +370,25 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps const sourceAnchorCreator = action(() => { const note = this.getAnchor(true); - if (note && this.selectedPin) { - note.latitude = this.selectedPin.latitude; - note.longitude = this.selectedPin.longitude; - note.map = this.selectedPin.map; + if (note && this.selectedPinOrRoute) { + note.latitude = this.selectedPinOrRoute.latitude; + note.longitude = this.selectedPinOrRoute.longitude; + note.map = this.selectedPinOrRoute.map; } return note as Doc; }); const targetCreator = (annotationOn: Doc | undefined) => { - const target = DocUtils.GetNewTextDoc('Note linked to ' + this.rootDoc.title, 0, 0, 100, 100, undefined, annotationOn, undefined, 'yellow'); - FormattedTextBox.SelectOnLoad = target[Id]; + const target = DocUtils.GetNewTextDoc('Note linked to ' + this.Document.title, 0, 0, 100, 100, undefined, annotationOn, 'yellow'); + FormattedTextBox.SetSelectOnLoad(target); return target; }; - const docView = this.props.DocumentView?.(); + const docView = this.DocumentView?.(); docView && DragManager.StartAnchorAnnoDrag([ele], new DragManager.AnchorAnnoDragData(docView, sourceAnchorCreator, targetCreator), e.pageX, e.pageY, { dragComplete: e => { if (!e.aborted && e.annoDragData && e.annoDragData.linkSourceDoc && e.annoDragData.dropDocument && e.linkDocument) { - e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this.props.Document; + e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this.Document; e.annoDragData.linkSourceDoc.followLinkZoom = false; } }, @@ -252,10 +399,10 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps const createFunc = undoable( action(() => { const note = this._sidebarRef.current?.anchorMenuClick(this.getAnchor(true), ['latitude', 'longitude', LinkedTo]); - if (note && this.selectedPin) { - note.latitude = this.selectedPin.latitude; - note.longitude = this.selectedPin.longitude; - note.map = this.selectedPin.map; + if (note && this.selectedPinOrRoute) { + note.latitude = this.selectedPinOrRoute.latitude; + note.longitude = this.selectedPinOrRoute.longitude; + note.map = this.selectedPinOrRoute.map; } }), 'create note annotation' @@ -278,39 +425,17 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps setPreviewCursor = (func?: (x: number, y: number, drag: boolean, hide: boolean, doc: Opt<Doc>) => void) => (this._setPreviewCursor = func); - @action - onMarqueeDown = (e: React.PointerEvent) => { - if (!e.altKey && e.button === 0 && this.props.isContentActive(true) && ![InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) { - setupMoveUpEvents( - this, - e, - action(e => { - MarqueeAnnotator.clearAnnotations(this._savedAnnotations); - this._marqueeing = [e.clientX, e.clientY]; - return true; - }), - returnFalse, - () => MarqueeAnnotator.clearAnnotations(this._savedAnnotations), - false - ); - } - }; - @action finishMarquee = (x?: number, y?: number) => { - this._marqueeing = undefined; - x !== undefined && y !== undefined && this._setPreviewCursor?.(x, y, false, false, this.rootDoc); - }; - addDocumentWrapper = (doc: Doc | Doc[], annotationKey?: string) => this.addDocument(doc, annotationKey); - pointerEvents = () => (this.props.isContentActive() && !MarqueeOptionsMenu.Instance.isShown() ? 'all' : 'none'); + pointerEvents = () => (this._props.isContentActive() && !MarqueeOptionsMenu.Instance.isShown() ? 'all' : 'none'); - panelWidth = () => this.props.PanelWidth() / (this.props.NativeDimScaling?.() || 1) - this.sidebarWidth(); - panelHeight = () => this.props.PanelHeight() / (this.props.NativeDimScaling?.() || 1); - scrollXf = () => this.props.ScreenToLocalTransform().translate(0, NumCast(this.layoutDoc._layout_scrollTop)); - transparentFilter = () => [...this.props.childFilters(), Utils.IsTransparentFilter()]; - opaqueFilter = () => [...this.props.childFilters(), Utils.IsOpaqueFilter()]; - infoWidth = () => this.props.PanelWidth() / 5; - infoHeight = () => this.props.PanelHeight() / 5; + panelWidth = () => this._props.PanelWidth() / (this._props.NativeDimScaling?.() || 1) - this.sidebarWidth(); + panelHeight = () => this._props.PanelHeight() / (this._props.NativeDimScaling?.() || 1); + scrollXf = () => this.ScreenToLocalBoxXf().translate(0, NumCast(this.layoutDoc._layout_scrollTop)); + transparentFilter = () => [...this._props.childFilters(), Utils.TransparentBackgroundFilter]; + opaqueFilter = () => [...this._props.childFilters(), Utils.OpaqueBackgroundFilter]; + infoWidth = () => this._props.PanelWidth() / 5; + infoHeight = () => this._props.PanelHeight() / 5; anchorMenuClick = () => this._sidebarRef.current?.anchorMenuClick; savedAnnotations = () => this._savedAnnotations; @@ -348,60 +473,42 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps }; @observable - bingSearchBarContents: any = this.rootDoc.map; // For Bing Maps: The contents of the Bing search bar (string) + bingSearchBarContents: any = this.Document.map; // For Bing Maps: The contents of the Bing search bar (string) geoDataRequestOptions = { entityType: 'PopulatedPlace', }; - // incrementer: number = 0; - /* - * Creates Pushpin doc and adds it to the list of annotations - */ - @action - createPushpin = undoable((latitude: number, longitude: number, map?: string) => { - // Stores the pushpin as a MapMarkerDocument - const pushpin = Docs.Create.PushpinDocument( - NumCast(latitude), - NumCast(longitude), - false, - [], - { title: map ?? `lat=${latitude},lng=${longitude}`, map: map } - // ,'pushpinIDamongus'+ this.incrementer++ - ); - this.addDocument(pushpin, this.annotationKey); - return pushpin; - // mapMarker.infoWindowOpen = true; - }, 'createpin'); - // The pin that is selected - @observable selectedPin: Doc | undefined; + @observable selectedPinOrRoute: Doc | undefined = undefined; @action - deselectPin = () => { - if (this.selectedPin) { - // Removes filter - Doc.setDocFilter(this.rootDoc, 'latitude', this.selectedPin.latitude, 'remove'); - Doc.setDocFilter(this.rootDoc, 'longitude', this.selectedPin.longitude, 'remove'); - Doc.setDocFilter(this.rootDoc, LinkedTo, `mapPin=${Field.toScriptString(DocCast(this.selectedPin))}`, 'remove'); - - const temp = this.selectedPin; - if (!this._unmounting) { - this._bingMap.current.entities.remove(this.map_docToPinMap.get(temp)); - } - const newpin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(temp.latitude, temp.longitude)); - this.MicrosoftMaps.Events.addHandler(newpin, 'click', (e: any) => this.pushpinClicked(temp as Doc)); - if (!this._unmounting) { - this._bingMap.current.entities.push(newpin); - } - this.map_docToPinMap.set(temp, newpin); - this.selectedPin = undefined; - this.bingSearchBarContents = this.rootDoc.map; + deselectPinOrRoute = () => { + if (this.selectedPinOrRoute) { + // // Removes filter + // Doc.setDocFilter(this.Document, 'latitude', this.selectedPin.latitude, 'remove'); + // Doc.setDocFilter(this.Document, 'longitude', this.selectedPin.longitude, 'remove'); + // Doc.setDocFilter(this.Document, LinkedTo, `mapPin=${Field.toScriptString(DocCast(this.selectedPin))}`, 'remove'); + // const temp = this.selectedPin; + // if (!this._unmounting) { + // this._bingMap.current.entities.remove(this.map_docToPinMap.get(temp)); + // } + // const newpin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(temp.latitude, temp.longitude)); + // this.MicrosoftMaps.Events.addHandler(newpin, 'click', (e: any) => this.pushpinClicked(temp as Doc)); + // if (!this._unmounting) { + // this._bingMap.current.entities.push(newpin); + // } + // this.map_docToPinMap.set(temp, newpin); + // this.selectedPin = undefined; + // this.bingSearchBarContents = this.Document.map; } }; - getView = async (doc: Doc) => { - if (this._sidebarRef?.current?.makeDocUnfiltered(doc) && !this.SidebarShown) this.toggleSidebar(); + getView = async (doc: Doc, options: FocusViewOptions) => { + if (this._sidebarRef?.current?.makeDocUnfiltered(doc) && !this.SidebarShown) { + this.toggleSidebar(); + options.didMove = true; + } return new Promise<Opt<DocumentView>>(res => DocumentManager.Instance.AddViewRenderedCb(doc, dv => res(dv))); }; /* @@ -409,25 +516,25 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps */ @action pushpinClicked = (pinDoc: Doc) => { - this.deselectPin(); - this.selectedPin = pinDoc; + this.deselectPinOrRoute(); + this.selectedPinOrRoute = pinDoc; this.bingSearchBarContents = pinDoc.map; - // Doc.setDocFilter(this.rootDoc, 'latitude', this.selectedPin.latitude, 'match'); - // Doc.setDocFilter(this.rootDoc, 'longitude', this.selectedPin.longitude, 'match'); - Doc.setDocFilter(this.rootDoc, LinkedTo, `mapPin=${Field.toScriptString(this.selectedPin)}`, 'check'); + // Doc.setDocFilter(this.Document, 'latitude', this.selectedPin.latitude, 'match'); + // Doc.setDocFilter(this.Document, 'longitude', this.selectedPin.longitude, 'match'); + Doc.setDocFilter(this.Document, LinkedTo, `mapPin=${Field.toScriptString(this.selectedPinOrRoute)}`, 'check'); - this.recolorPin(this.selectedPin, 'green'); + this.recolorPin(this.selectedPinOrRoute, 'green'); - MapAnchorMenu.Instance.Delete = this.deleteSelectedPin; + MapAnchorMenu.Instance.Delete = this.deleteSelectedPinOrRoute; MapAnchorMenu.Instance.Center = this.centerOnSelectedPin; MapAnchorMenu.Instance.OnClick = this.createNoteAnnotation; MapAnchorMenu.Instance.StartDrag = this.startAnchorDrag; - const point = this._bingMap.current.tryLocationToPixel(new this.MicrosoftMaps.Location(this.selectedPin.latitude, this.selectedPin.longitude)); - const x = point.x + (this.props.PanelWidth() - this.sidebarWidth()) / 2; - const y = point.y + this.props.PanelHeight() / 2 + 32; - const cpt = this.props.ScreenToLocalTransform().inverse().transformPoint(x, y); + const point = this._bingMap.current.tryLocationToPixel(new this.MicrosoftMaps.Location(this.selectedPinOrRoute.latitude, this.selectedPinOrRoute.longitude)); + const x = point.x + (this._props.PanelWidth() - this.sidebarWidth()) / 2; + const y = point.y + this._props.PanelHeight() / 2 + 32; + const cpt = this.ScreenToLocalBoxXf().inverse().transformPoint(x, y); MapAnchorMenu.Instance.jumpTo(cpt[0], cpt[1], true); document.addEventListener('pointerdown', this.tryHideMapAnchorMenu, true); @@ -438,8 +545,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps */ @action mapOnClick = (e: { location: { latitude: any; longitude: any } }) => { - this.props.select(false); - this.deselectPin(); + this._props.select(false); + this.deselectPinOrRoute(); }; /* * Updates values of layout doc to match the current map @@ -484,24 +591,24 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps, existingPin?: Doc) => { /// this should use SELECTED pushpin for lat/long if there is a selection, otherwise CENTER const anchor = Docs.Create.ConfigDocument({ - title: 'MapAnchor:' + this.rootDoc.title, - text: StrCast(this.selectedPin?.map) || StrCast(this.rootDoc.map) || 'map location', - config_latitude: NumCast((existingPin ?? this.selectedPin)?.latitude ?? this.dataDoc.latitude), - config_longitude: NumCast((existingPin ?? this.selectedPin)?.longitude ?? this.dataDoc.longitude), + title: 'MapAnchor:' + this.Document.title, + text: StrCast(this.selectedPinOrRoute?.map) || StrCast(this.Document.map) || 'map location', + config_latitude: NumCast((existingPin ?? this.selectedPinOrRoute)?.latitude ?? this.dataDoc.latitude), + config_longitude: NumCast((existingPin ?? this.selectedPinOrRoute)?.longitude ?? this.dataDoc.longitude), config_map_zoom: NumCast(this.dataDoc.map_zoom), - config_map_type: StrCast(this.dataDoc.map_type), - config_map: StrCast((existingPin ?? this.selectedPin)?.map) || StrCast(this.dataDoc.map), + // config_map_type: StrCast(this.dataDoc.map_type), + config_map: StrCast((existingPin ?? this.selectedPinOrRoute)?.map) || StrCast(this.dataDoc.map), layout_unrendered: true, - mapPin: existingPin ?? this.selectedPin, - annotationOn: this.rootDoc, + mapPin: existingPin ?? this.selectedPinOrRoute, + annotationOn: this.Document, }); if (anchor) { if (!addAsAnnotation) anchor.backgroundColor = 'transparent'; addAsAnnotation && this.addDocument(anchor); - PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), map: true } }, this.rootDoc); + PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), map: true } }, this.Document); return anchor; } - return this.rootDoc; + return this.Document; }; map_docToPinMap = new Map<Doc, any>(); @@ -531,7 +638,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps * Removes pin from annotations */ @action - removePushpin = (pinDoc: Doc) => this.removeMapDocument(pinDoc, this.annotationKey); + removePushpinOrRoute = (pinOrRouteDoc: Doc) => this.removeMapDocument(pinOrRouteDoc, this.annotationKey); /* * Removes pushpin from map render @@ -541,18 +648,19 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps this._bingMap.current.entities.remove(this.map_docToPinMap.get(pinDoc)); } this.map_docToPinMap.delete(pinDoc); - this.selectedPin = undefined; + this.selectedPinOrRoute = undefined; }; @action - deleteSelectedPin = undoable(() => { - if (this.selectedPin) { + deleteSelectedPinOrRoute = undoable(() => { + console.log('deleting'); + if (this.selectedPinOrRoute) { // Removes filter - Doc.setDocFilter(this.rootDoc, 'latitude', this.selectedPin.latitude, 'remove'); - Doc.setDocFilter(this.rootDoc, 'longitude', this.selectedPin.longitude, 'remove'); - Doc.setDocFilter(this.rootDoc, LinkedTo, `mapPin=${Field.toScriptString(DocCast(this.selectedPin))}`, 'remove'); + Doc.setDocFilter(this.Document, 'latitude', this.selectedPinOrRoute.latitude, 'remove'); + Doc.setDocFilter(this.Document, 'longitude', this.selectedPinOrRoute.longitude, 'remove'); + Doc.setDocFilter(this.Document, LinkedTo, `mapPin=${Field.toScriptString(DocCast(this.selectedPinOrRoute))}`, 'remove'); - this.removePushpin(this.selectedPin); + this.removePushpinOrRoute(this.selectedPinOrRoute); } MapAnchorMenu.Instance.fadeOut(true); document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu, true); @@ -561,23 +669,36 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps tryHideMapAnchorMenu = (e: PointerEvent) => { let target = document.elementFromPoint(e.x, e.y); while (target) { + if (target.id === 'route-destination-searcher-listbox') return; if (target === MapAnchorMenu.top.current) return; target = target.parentElement; } e.stopPropagation(); e.preventDefault(); MapAnchorMenu.Instance.fadeOut(true); + runInAction(() => { + this.temporaryRouteSource = { + type: 'FeatureCollection', + features: [], + }; + }); + document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu, true); }; @action centerOnSelectedPin = () => { - if (this.selectedPin) { - this.dataDoc.latitude = this.selectedPin.latitude; - this.dataDoc.longitude = this.selectedPin.longitude; - this.dataDoc.map = this.selectedPin.map ?? ''; - this.bingSearchBarContents = this.selectedPin.map; + if (this.selectedPinOrRoute) { + this._mapRef.current?.flyTo({ + center: [NumCast(this.selectedPinOrRoute.longitude), NumCast(this.selectedPinOrRoute.latitude)], + }); } + // if (this.selectedPin) { + // this.dataDoc.latitude = this.selectedPin.latitude; + // this.dataDoc.longitude = this.selectedPin.longitude; + // this.dataDoc.map = this.selectedPin.map ?? ''; + // this.bingSearchBarContents = this.selectedPin.map; + // } MapAnchorMenu.Instance.fadeOut(true); document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu); }; @@ -609,16 +730,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps }, }; - @action - searchbarOnEdit = (newText: string) => (this.bingSearchBarContents = newText); - recolorPin = (pin: Doc, color?: string) => { - this._bingMap.current.entities.remove(this.map_docToPinMap.get(pin)); - this.map_docToPinMap.delete(pin); - const newpin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(pin.latitude, pin.longitude), color ? { color } : {}); - this.MicrosoftMaps.Events.addHandler(newpin, 'click', (e: any) => this.pushpinClicked(pin)); - this._bingMap.current.entities.push(newpin); - this.map_docToPinMap.set(pin, newpin); + // this._bingMap.current.entities.remove(this.map_docToPinMap.get(pin)); + // this.map_docToPinMap.delete(pin); + // const newpin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(pin.latitude, pin.longitude), color ? { color } : {}); + // this.MicrosoftMaps.Events.addHandler(newpin, 'click', (e: any) => this.pushpinClicked(pin)); + // this._bingMap.current.entities.push(newpin); + // this.map_docToPinMap.set(pin, newpin); }; /* @@ -638,7 +756,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'maptypechanged', undoable(this.updateMapType, 'Map ViewType Change')); this._disposers.mapLocation = reaction( - () => this.rootDoc.map, + () => this.Document.map, mapLoc => (this.bingSearchBarContents = mapLoc), { fireImmediately: true } ); @@ -663,7 +781,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps ); this._disposers.location = reaction( - () => ({ lat: this.rootDoc.latitude, lng: this.rootDoc.longitude, zoom: this.rootDoc.map_zoom, mapType: this.rootDoc.map_type }), + () => ({ lat: this.Document.latitude, lng: this.Document.longitude, zoom: this.Document.map_zoom, mapType: this.Document.map_type }), locationObject => { // if (this._bingMap.current) try { @@ -688,24 +806,26 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps e, e, e => { + // move event if (!dragClone) { - dragClone = this._dragRef.current?.cloneNode(true) as HTMLDivElement; + dragClone = this._dragRef.current?.cloneNode(true) as HTMLDivElement; // copy draggable pin dragClone.style.position = 'absolute'; dragClone.style.zIndex = '10000'; - DragManager.Root().appendChild(dragClone); + DragManager.Root().appendChild(dragClone); // add clone to root } dragClone.style.transform = `translate(${e.clientX - 15}px, ${e.clientY - 15}px)`; return false; }, e => { + // up event if (!dragClone) return; DragManager.Root().removeChild(dragClone); - let target = document.elementFromPoint(e.x, e.y); + let target = document.elementFromPoint(e.x, e.y); // element for specified x and y coordinates while (target) { if (target === this._ref.current) { - const cpt = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY); - const x = cpt[0] - (this.props.PanelWidth() - this.sidebarWidth()) / 2; - const y = cpt[1] - 32 /* height of search bar */ - this.props.PanelHeight() / 2; + const cpt = this.ScreenToLocalBoxXf().transformPoint(e.clientX, e.clientY); + const x = cpt[0] - (this._props.PanelWidth() - this.sidebarWidth()) / 2; + const y = cpt[1] - 20 /* height of search bar */ - this._props.PanelHeight() / 2; const location = this._bingMap.current.tryPixelToLocation(new this.MicrosoftMaps.Point(x, y)); this.createPushpin(location.latitude, location.longitude); break; @@ -714,7 +834,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps } }, e => { - const createPin = () => this.createPushpin(this.rootDoc.latitude, this.rootDoc.longitude, this.rootDoc.map); + const createPin = () => this.createPushpin(this.Document.latitude, this.Document.longitude, this.Document.map); if (this.bingSearchBarContents) { this.bingSearch().then(createPin); } else createPin(); @@ -722,15 +842,703 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps ); }; + // incrementer: number = 0; + /* + * Creates Pushpin doc and adds it to the list of annotations + */ + @action + createPushpin = undoable((latitude: number, longitude: number, location?: string, wikiData?: string) => { + // Stores the pushpin as a MapMarkerDocument + const pushpin = Docs.Create.PushpinDocument( + NumCast(latitude), + NumCast(longitude), + false, + [], + { + title: location ?? `lat=${NumCast(latitude)},lng=${NumCast(longitude)}`, + map: location, + description: '', + wikiData: wikiData, + markerType: 'MAP_PIN', + markerColor: '#ff5722', + } + // { title: map ?? `lat=${latitude},lng=${longitude}`, map: map }, + // ,'pushpinIDamongus'+ this.incrementer++ + ); + this.addDocument(pushpin, this.annotationKey); + console.log(pushpin); + return pushpin; + + // mapMarker.infoWindowOpen = true; + }, 'createpin'); + + @action + createMapRoute = undoable((coordinates: Position[], originName: string, destination: any, createPinForDestination: boolean) => { + if (originName !== destination.place_name) { + const mapRoute = Docs.Create.MapRouteDocument(false, [], { title: `${originName} --> ${destination.place_name}`, routeCoordinates: JSON.stringify(coordinates) }); + this.addDocument(mapRoute, this.annotationKey); + if (createPinForDestination) { + this.createPushpin(destination.center[1], destination.center[0], destination.place_name); + } + this.temporaryRouteSource = { + type: 'FeatureCollection', + features: [], + }; + MapAnchorMenu.Instance.fadeOut(true); + return mapRoute; + } + // TODO: Display error that can't create route to same location + }, 'createmaproute'); + searchbarKeyDown = (e: any) => e.key === 'Enter' && this.bingSearch(); + @observable + featuresFromGeocodeResults: any[] = []; + + @action + addMarkerForFeature = (feature: any) => { + const location = feature.place_name; + if (feature.center) { + const longitude = feature.center[0]; + const latitude = feature.center[1]; + const wikiData = feature.properties?.wikiData; + + this.createPushpin(latitude, longitude, location, wikiData); + + if (this._mapRef.current) { + this._mapRef.current.flyTo({ + center: feature.center, + }); + } + this.featuresFromGeocodeResults = []; + } else { + // TODO: handle error + } + }; + + /** + * Makes a forward geocoding API call to Mapbox to retrieve locations based on the search input + * @param searchText the search input (presumably a location) + */ + handleSearchChange = async (searchText: string) => { + const features = await MapboxApiUtility.forwardGeocodeForFeatures(searchText); + if (features && !this.isAnimating) { + runInAction(() => { + this.settingsOpen = false; + this.featuresFromGeocodeResults = features; + this.routeToAnimate = undefined; + }); + } + // try { + // const url = MAPBOX_FORWARD_GEOCODE_BASE_URL + encodeURI(searchText) +'.json' +`?access_token=${MAPBOX_ACCESS_TOKEN}`; + // const response = await fetch(url); + // const data = await response.json(); + // runInAction(() => { + // this.featuresFromGeocodeResults = data.features; + // }) + // } catch (error: any){ + // // TODO: handle error in better way + // console.log(error); + // } + }; + // @action + // debouncedCall = React.useCallback(debounce(this.debouncedOnSearchBarChange, 300), []); + + @action + handleMapClick = (e: MapLayerMouseEvent) => { + this.featuresFromGeocodeResults = []; + this.settingsOpen = false; + if (this._mapRef.current) { + const features = this._mapRef.current.queryRenderedFeatures(e.point, { + layers: ['map-routes-layer'], + }); + + console.error(features); + if (features && features.length > 0 && features[0].properties && features[0].geometry) { + const geometry = features[0].geometry as LineString; + const routeTitle: string = features[0].properties['routeTitle']; + const routeDoc: Doc | undefined = this.allRoutes.find(routeDoc => routeDoc.title === routeTitle); + this.deselectPinOrRoute(); // TODO: Also deselect route if selected + if (routeDoc) { + this.selectedPinOrRoute = routeDoc; + Doc.setDocFilter(this.Document, LinkedTo, `mapRoute=${Field.toScriptString(this.selectedPinOrRoute)}`, 'check'); + + // TODO: Recolor route + + MapAnchorMenu.Instance.Delete = this.deleteSelectedPinOrRoute; + MapAnchorMenu.Instance.Center = this.centerOnSelectedPin; + MapAnchorMenu.Instance.OnClick = this.createNoteAnnotation; + MapAnchorMenu.Instance.StartDrag = this.startAnchorDrag; + + MapAnchorMenu.Instance.Reset(); + + MapAnchorMenu.Instance.setRouteDoc(routeDoc); + + // TODO: Subject to change + MapAnchorMenu.Instance.setAllMapboxPins(this.allAnnotations.filter(anno => !anno.layout_unrendered)); + + MapAnchorMenu.Instance.DisplayRoute = this.displayRoute; + MapAnchorMenu.Instance.AddNewRouteToMap = this.createMapRoute; + MapAnchorMenu.Instance.CreatePin = this.addMarkerForFeature; + MapAnchorMenu.Instance.OpenAnimationPanel = this.openAnimationPanel; + + // this.selectedRouteCoordinates = geometry.coordinates; + + MapAnchorMenu.Instance.setMenuType('route'); + + MapAnchorMenu.Instance.jumpTo(e.originalEvent.clientX, e.originalEvent.clientY, true); + + document.addEventListener('pointerdown', this.tryHideMapAnchorMenu, true); + } + } + } + }; + + /** + * Makes a reverse geocoding API call to retrieve features corresponding to a map click (based on longitude + * and latitude). Sets the search results accordingly. + * @param e + */ + handleMapDblClick = async (e: MapLayerMouseEvent) => { + e.preventDefault(); + const lngLat: LngLat = e.lngLat; + const longitude: number = lngLat.lng; + const latitude: number = lngLat.lat; + + const features = await MapboxApiUtility.reverseGeocodeForFeatures(longitude, latitude); + if (features) { + runInAction(() => { + this.featuresFromGeocodeResults = features; + }); + } + + // // REVERSE GEOCODE TO GET LOCATION DETAILS + // try { + // const url = MAPBOX_REVERSE_GEOCODE_BASE_URL + encodeURI(longitude.toString() + "," + latitude.toString()) + '.json' + + // `?access_token=${MAPBOX_ACCESS_TOKEN}`; + // const response = await fetch(url); + // const data = await response.json(); + // console.log("REV GEOCODE DATA: ", data); + // runInAction(() => { + // this.featuresFromGeocodeResults = data.features; + // }) + // } catch (error: any){ + // // TODO: handle error in better way + // console.log(error); + // } + }; + + @observable + currentPopup: PopupInfo | undefined = undefined; + + @action + handleMarkerClick = (e: MarkerEvent<mapboxgl.Marker, MouseEvent>, pinDoc: Doc) => { + this.featuresFromGeocodeResults = []; + this.deselectPinOrRoute(); // TODO: check this method + this.selectedPinOrRoute = pinDoc; + // this.bingSearchBarContents = pinDoc.map; + + // Doc.setDocFilter(this.Document, 'latitude', this.selectedPin.latitude, 'match'); + // Doc.setDocFilter(this.Document, 'longitude', this.selectedPin.longitude, 'match'); + Doc.setDocFilter(this.Document, LinkedTo, `mapPin=${Field.toScriptString(this.selectedPinOrRoute)}`, 'check'); + + this.recolorPin(this.selectedPinOrRoute, 'green'); // TODO: check this method + + MapAnchorMenu.Instance.Delete = this.deleteSelectedPinOrRoute; + MapAnchorMenu.Instance.Center = this.centerOnSelectedPin; + MapAnchorMenu.Instance.OnClick = this.createNoteAnnotation; + MapAnchorMenu.Instance.StartDrag = this.startAnchorDrag; + + MapAnchorMenu.Instance.Reset(); + + // pass in the pinDoc + MapAnchorMenu.Instance.setPinDoc(pinDoc); + MapAnchorMenu.Instance.setAllMapboxPins(this.allAnnotations.filter(anno => !anno.layout_unrendered)); + + MapAnchorMenu.Instance.DisplayRoute = this.displayRoute; + MapAnchorMenu.Instance.AddNewRouteToMap = this.createMapRoute; + MapAnchorMenu.Instance.CreatePin = this.addMarkerForFeature; + + MapAnchorMenu.Instance.setMenuType('standard'); + + // MapAnchorMenu.Instance.jumpTo(NumCast(pinDoc.longitude), NumCast(pinDoc.latitude)-3, true); + + MapAnchorMenu.Instance.jumpTo(e.originalEvent.clientX, e.originalEvent.clientY, true); + + document.addEventListener('pointerdown', this.tryHideMapAnchorMenu, true); + + // this._mapRef.current.flyTo({ + // center: [NumCast(pinDoc.longitude), NumCast(pinDoc.latitude)-3] + // }) + }; + + @observable + temporaryRouteSource: FeatureCollection = { + type: 'FeatureCollection', + features: [], + }; + + @action + displayRoute = (routeInfoMap: Record<TransportationType, any> | undefined, type: TransportationType) => { + if (routeInfoMap) { + const newTempRouteSource: FeatureCollection = { + type: 'FeatureCollection', + features: [ + { + type: 'Feature', + properties: {}, + geometry: { + type: 'LineString', + coordinates: routeInfoMap[type].coordinates, + }, + }, + ], + }; + // TODO: Create pin for destination + // TODO: Fly to point where full route will be shown + this.temporaryRouteSource = newTempRouteSource; + } + }; + + @observable + isAnimating: boolean = false; + + @observable + routeToAnimate: Doc | undefined = undefined; + + @observable + animationPhase: number = 0; + + @observable + finishedFlyTo: boolean = false; + + @action + setAnimationPhase = (newValue: number) => { + this.animationPhase = newValue; + }; + + @observable + frameId: number | null = null; + + @action + setFrameId = (frameId: number) => { + this.frameId = frameId; + }; + + @observable + animationUtility: AnimationUtility | null = null; + + @action + setAnimationUtility = (util: AnimationUtility) => { + this.animationUtility = util; + }; + + @action + openAnimationPanel = (routeDoc: Doc | undefined) => { + if (routeDoc) { + MapAnchorMenu.Instance.fadeOut(true); + document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu, true); + this.featuresFromGeocodeResults = []; + this.routeToAnimate = routeDoc; + } + }; + + @computed get mapboxMapViewState(): ViewState { + return { + zoom: NumCast(this.dataDoc.map_zoom, 8), + longitude: NumCast(this.dataDoc.longitude, -71.4128), + latitude: NumCast(this.dataDoc.latitude, 41.824), + pitch: NumCast(this.dataDoc.map_pitch), + bearing: NumCast(this.dataDoc.map_bearing), + padding: { + top: 0, + bottom: 0, + left: 0, + right: 0, + }, + }; + } + + @computed + get preAnimationViewState() { + if (!this.isAnimating) { + return this.mapboxMapViewState; + } + } + + @observable + isStreetViewAnimation: boolean = false; + + @observable + animationSpeed: AnimationSpeed = AnimationSpeed.MEDIUM; + + @observable + animationLineColor: string = '#ffff00'; + + @action + setAnimationLineColor = (color: ColorResult) => { + this.animationLineColor = color.hex; + }; + + @action + updateAnimationSpeed = () => { + let newAnimationSpeed: AnimationSpeed; + switch (this.animationSpeed) { + case AnimationSpeed.SLOW: + newAnimationSpeed = AnimationSpeed.MEDIUM; + break; + case AnimationSpeed.MEDIUM: + newAnimationSpeed = AnimationSpeed.FAST; + break; + case AnimationSpeed.FAST: + newAnimationSpeed = AnimationSpeed.SLOW; + break; + default: + newAnimationSpeed = AnimationSpeed.MEDIUM; + break; + } + this.animationSpeed = newAnimationSpeed; + if (this.animationUtility) { + this.animationUtility.updateAnimationSpeed(newAnimationSpeed); + } + }; + @computed get animationSpeedTooltipText(): string { + switch (this.animationSpeed) { + case AnimationSpeed.SLOW: + return '1x speed'; + case AnimationSpeed.MEDIUM: + return '2x speed'; + case AnimationSpeed.FAST: + return '3x speed'; + default: + return '2x speed'; + } + } + @computed get animationSpeedIcon(): JSX.Element { + switch (this.animationSpeed) { + case AnimationSpeed.SLOW: + return slowSpeedIcon; + case AnimationSpeed.MEDIUM: + return mediumSpeedIcon; + case AnimationSpeed.FAST: + return fastSpeedIcon; + default: + return mediumSpeedIcon; + } + } + + @action + toggleIsStreetViewAnimation = () => { + const newVal = !this.isStreetViewAnimation; + this.isStreetViewAnimation = newVal; + if (this.animationUtility) { + this.animationUtility.updateIsStreetViewAnimation(newVal); + } + }; + + @observable + dynamicRouteFeature: Feature<Geometry, GeoJsonProperties> = { + type: 'Feature', + properties: {}, + geometry: { + type: 'LineString', + coordinates: [], + }, + }; + + @observable + path: turf.helpers.Feature<turf.helpers.LineString, turf.helpers.Properties> = { + type: 'Feature', + geometry: { + type: 'LineString', + coordinates: [], + }, + properties: {}, + }; + + getFeatureFromRouteDoc = (routeDoc: Doc): Feature<Geometry, GeoJsonProperties> => { + const geometry: LineString = { + type: 'LineString', + coordinates: JSON.parse(StrCast(routeDoc.routeCoordinates)), + }; + return { + type: 'Feature', + properties: { + routeTitle: routeDoc.title, + }, + geometry: geometry, + }; + }; + + @action + playAnimation = (status: AnimationStatus) => { + if (!this._mapRef.current || !this.routeToAnimate) { + return; + } + + this.animationPhase = status === AnimationStatus.RESUME ? this.animationPhase : 0; + this.frameId = AnimationStatus.RESUME ? this.frameId : null; + this.finishedFlyTo = AnimationStatus.RESUME ? this.finishedFlyTo : false; + + const path = turf.lineString(this.selectedRouteCoordinates); + + this.settingsOpen = false; + this.path = path; + this.isAnimating = true; + + runInAction(() => { + return new Promise<void>(async resolve => { + const targetLngLat = { + lng: this.selectedRouteCoordinates[0][0], + lat: this.selectedRouteCoordinates[0][1], + }; + + const animationUtil = new AnimationUtility(targetLngLat, this.selectedRouteCoordinates, this.isStreetViewAnimation, this.animationSpeed, this.showTerrain, this._mapRef.current); + runInAction(() => { + this.setAnimationUtility(animationUtil); + }); + + const updateFrameId = (newFrameId: number) => { + this.setFrameId(newFrameId); + }; + + const updateAnimationPhase = (newAnimationPhase: number) => { + this.setAnimationPhase(newAnimationPhase); + }; + + if (status !== AnimationStatus.RESUME) { + const result = await animationUtil.flyInAndRotate({ + map: this._mapRef.current!, + // targetLngLat, + // duration 3000 + // startAltitude: 3000000, + // endAltitude: this.isStreetViewAnimation ? 80 : 12000, + // startBearing: 0, + // endBearing: -20, + // startPitch: 40, + // endPitch: this.isStreetViewAnimation ? 80 : 50, + updateFrameId, + }); + + console.log('Bearing: ', result.bearing); + console.log('Altitude: ', result.altitude); + } + + runInAction(() => { + this.finishedFlyTo = true; + }); + + // follow the path while slowly rotating the camera, passing in the camera bearing and altitude from the previous animation + await animationUtil.animatePath({ + map: this._mapRef.current!, + // path: this.path, + // startBearing: -20, + // startAltitude: this.isStreetViewAnimation ? 80 : 12000, + // pitch: this.isStreetViewAnimation ? 80: 50, + currentAnimationPhase: this.animationPhase, + updateAnimationPhase, + updateFrameId, + }); + + // get the bounds of the linestring, use fitBounds() to animate to a final view + const bbox3d = turf.bbox(this.path); + + const bbox2d: LngLatBoundsLike = [bbox3d[0], bbox3d[1], bbox3d[2], bbox3d[3]]; + + this._mapRef.current!.fitBounds(bbox2d, { + duration: 3000, + pitch: 30, + bearing: 0, + padding: 120, + }); + + setTimeout(() => { + this.isStreetViewAnimation = false; + resolve(); + }, 10000); + }); + }); + }; + + @action + pauseAnimation = () => { + if (this.frameId && this.animationPhase > 0) { + window.cancelAnimationFrame(this.frameId); + this.frameId = null; + this.isAnimating = false; + } + }; + + @action + stopAnimation = (close: boolean) => { + if (this.frameId) { + window.cancelAnimationFrame(this.frameId); + } + this.animationPhase = 0; + this.frameId = null; + this.finishedFlyTo = false; + this.isAnimating = false; + if (close) { + this.animationSpeed = AnimationSpeed.MEDIUM; + this.isStreetViewAnimation = false; + this.routeToAnimate = undefined; + this.animationUtility = null; + } + }; + + getRouteAnimationOptions = (): JSX.Element => { + return ( + <> + <IconButton + tooltip={this.isAnimating && this.finishedFlyTo ? 'Pause Animation' : 'Play Animation'} + onPointerDown={() => { + if (this.isAnimating && this.finishedFlyTo) { + this.pauseAnimation(); + } else if (this.animationPhase > 0) { + this.playAnimation(AnimationStatus.RESUME); // Resume from the current phase + } else { + this.playAnimation(AnimationStatus.START); // Play from the beginning + } + }} + icon={this.isAnimating && this.finishedFlyTo ? <FontAwesomeIcon icon={faPause as IconLookup} /> : <FontAwesomeIcon icon={faPlay as IconLookup} />} + color="black" + size={Size.MEDIUM} + /> + {this.isAnimating && this.finishedFlyTo && ( + <IconButton + tooltip="Restart animation" + onPointerDown={() => { + this.stopAnimation(false); + this.playAnimation(AnimationStatus.START); + }} + icon={<FontAwesomeIcon icon={faRotate as IconLookup} />} + color="black" + size={Size.MEDIUM} + /> + )} + <IconButton style={{ marginRight: '10px' }} tooltip="Stop and close animation" onPointerDown={() => this.stopAnimation(true)} icon={<FontAwesomeIcon icon={faCircleXmark as IconLookup} />} color="black" size={Size.MEDIUM} /> + <> + <div className="animation-suboptions"> + <div>|</div> + <FormControlLabel className="first-person-label" label="1st person animation:" labelPlacement="start" control={<Checkbox color="success" checked={this.isStreetViewAnimation} onChange={this.toggleIsStreetViewAnimation} />} /> + <div id="divider">|</div> + <IconButton tooltip={this.animationSpeedTooltipText} onPointerDown={this.updateAnimationSpeed} icon={this.animationSpeedIcon} size={Size.MEDIUM} /> + <div id="divider">|</div> + <div style={{ display: 'flex', alignItems: 'center' }}> + <div>Select Line Color: </div> + <CirclePicker circleSize={12} circleSpacing={5} width="100%" colors={['#ffff00', '#03a9f4', '#ff0000', '#ff5722', '#000000', '#673ab7']} onChange={(color: any) => this.setAnimationLineColor(color)} /> + </div> + </div> + </> + </> + ); + }; + + @action + hideRoute = () => { + this.temporaryRouteSource = { + type: 'FeatureCollection', + features: [], + }; + }; + + @observable + settingsOpen: boolean = false; + + @observable + mapStyle: string = 'mapbox://styles/mapbox/standard'; + + @observable + showTerrain: boolean = true; + + @action + toggleSettings = () => { + if (!this.isAnimating && this.animationPhase == 0) { + this.featuresFromGeocodeResults = []; + this.settingsOpen = !this.settingsOpen; + } + }; + + @action + changeMapStyle = (e: React.ChangeEvent<HTMLSelectElement>) => { + this.dataDoc.map_style = e.target.value; + // this.mapStyle = `mapbox://styles/mapbox/${e.target.value}` + }; + + @action + onBearingChange = (e: React.ChangeEvent<HTMLInputElement>) => { + const bearing = parseInt(e.target.value); + if (!isNaN(bearing) && this._mapRef.current) { + console.log('bearing change'); + const fixedBearing = Math.max(0, Math.min(360, bearing)); + this._mapRef.current.setBearing(fixedBearing); + this.dataDoc.map_bearing = fixedBearing; + } + }; + + @action + onPitchChange = (e: React.ChangeEvent<HTMLInputElement>) => { + const pitch = parseInt(e.target.value); + if (!isNaN(pitch) && this._mapRef.current) { + console.log('pitch change'); + const fixedPitch = Math.max(0, Math.min(85, pitch)); + this._mapRef.current.setPitch(fixedPitch); + this.dataDoc.map_pitch = fixedPitch; + } + }; + + @action + onZoomChange = (e: React.ChangeEvent<HTMLInputElement>) => { + const zoom = parseInt(e.target.value); + if (!isNaN(zoom) && this._mapRef.current) { + const fixedZoom = Math.max(0, Math.min(16, zoom)); + this._mapRef.current.setZoom(fixedZoom); + this.dataDoc.map_zoom = fixedZoom; + } + }; + + @action + onStepZoomChange = (increment: boolean) => { + if (this._mapRef.current) { + let newZoom: number; + if (increment) { + console.log('inc'); + newZoom = Math.min(16, this.mapboxMapViewState.zoom + 1); + } else { + console.log('dec'); + newZoom = Math.max(0, this.mapboxMapViewState.zoom - 1); + } + this._mapRef.current.setZoom(newZoom); + this.dataDoc.map_zoom = newZoom; + } + }; + + @action + onMapZoom = (e: ViewStateChangeEvent) => (this.dataDoc.map_zoom = e.viewState.zoom); + + @action + onMapMove = (e: ViewStateChangeEvent) => { + this.dataDoc.longitude = e.viewState.longitude; + this.dataDoc.latitude = e.viewState.latitude; + }; + + @action + toggleShowTerrain = () => (this.showTerrain = !this.showTerrain); + + getMarkerIcon = (pinDoc: Doc): JSX.Element | null => { + const markerType = StrCast(pinDoc.markerType); + const markerColor = StrCast(pinDoc.markerColor); + + return MarkerIcons.getFontAwesomeIcon(markerType, '2x', markerColor) ?? null; + }; + static _firstRender = true; static _rerenderDelay = 500; _rerenderTimeout: any; render() { // bcz: no idea what's going on here, but bings maps have some kind of bug // such that we need to delay rendering a second map on startup until the first map is rendered. - this.rootDoc[DocCss]; + this.Document[DocCss]; if (MapBox._rerenderDelay) { // prettier-ignore this._rerenderTimeout = this._rerenderTimeout ?? @@ -739,10 +1547,12 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps MapBox._rerenderDelay = 0; } this._rerenderTimeout = undefined; - this.rootDoc[DocCss] = this.rootDoc[DocCss] + 1; + this.Document[DocCss] = this.Document[DocCss] + 1; }), MapBox._rerenderDelay); return null; } + const scale = this._props.NativeDimScaling?.() || 1; + const parscale = scale === 1 ? 1 : this.ScreenToLocalBoxXf().Scale ?? 1; const renderAnnotations = (childFilters?: () => string[]) => null; return ( @@ -753,110 +1563,188 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps onPointerDown={async e => { e.button === 0 && !e.ctrlKey && e.stopPropagation(); }} - style={{ width: `calc(100% - ${this.sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}> + style={{ transformOrigin: 'top left', transform: `scale(${scale})`, width: `calc(100% - ${this.sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}> <div style={{ mixBlendMode: 'multiply' }}>{renderAnnotations(this.transparentFilter)}</div> {renderAnnotations(this.opaqueFilter)} - {SnappingManager.GetIsDragging() ? null : renderAnnotations()} - - <div className="mapBox-searchbar"> - <EditableText - // editing - setVal={(newText: string | number) => typeof newText === 'string' && this.searchbarOnEdit(newText)} - onEnter={e => this.bingSearch()} - placeholder={this.bingSearchBarContents || 'enter city/zip/...'} - textAlign="center" - /> - <IconButton - icon={ - <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="magnifying-glass" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" color="#DFDFDF"> - <path - fill="currentColor" - d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"></path> - </svg> - } - onClick={this.bingSearch} - type={Type.TERT} - /> - <div style={{ width: 30, height: 30 }} ref={this._dragRef} onPointerDown={this.dragToggle}> - <Button tooltip="drag to place a pushpin" icon={<FontAwesomeIcon size={'lg'} icon={'bullseye'} />} /> + {SnappingManager.IsDragging ? null : renderAnnotations()} + {!this.routeToAnimate && ( + <div className="mapBox-searchbar" style={{ width: `${100 / scale}%`, zIndex: 1, position: 'relative', background: 'lightGray' }}> + <TextField fullWidth placeholder="Enter a location" onChange={(e: any) => this.handleSearchChange(e.target.value)} /> + <IconButton icon={<FontAwesomeIcon icon={faGear as IconLookup} size="1x" />} type={Type.TERT} onClick={e => this.toggleSettings()} /> + </div> + )} + {this.settingsOpen && !this.routeToAnimate && ( + <div className="mapbox-settings-panel" style={{ right: `${0 + this.sidebarWidth()}px` }}> + <div className="mapbox-style-select"> + <div>Map Style:</div> + <div> + <select onChange={this.changeMapStyle} value={StrCast(this.dataDoc.map_style)}> + <option value="mapbox://styles/mapbox/standard">Standard</option> + <option value="mapbox://styles/mapbox/streets-v11">Streets</option> + <option value="mapbox://styles/mapbox/outdoors-v12">Outdoors</option> + <option value="mapbox://styles/mapbox/light-v11">Light</option> + <option value="mapbox://styles/mapbox/dark-v11">Dark</option> + <option value="mapbox://styles/mapbox/satellite-v9">Satellite</option> + <option value="mapbox://styles/mapbox/satellite-streets-v12">Satellite Streets</option> + <option value="mapbox://styles/mapbox/navigation-day-v1">Navigation Day</option> + <option value="mapbox://styles/mapbox/navigation-night-v1">Navigation Night</option> + </select> + </div> + </div> + <div className="mapbox-bearing-selection"> + <div>Bearing: </div> + <input value={NumCast(this.mapboxMapViewState.bearing).toFixed(0)} type="number" onChange={this.onBearingChange} /> + </div> + <div className="mapbox-pitch-selection"> + <div>Pitch: </div> + <input value={NumCast(this.mapboxMapViewState.pitch).toFixed(0)} type="number" onChange={this.onPitchChange} /> + </div> + <div className="mapbox-pitch-selection"> + <div>Zoom: </div> + <input value={NumCast(this.mapboxMapViewState.zoom).toFixed(0)} type="number" onChange={this.onZoomChange} /> + </div> + <div className="mapbox-terrain-selection"> + <div>Show terrain: </div> + <input type="checkbox" checked={this.showTerrain} onChange={this.toggleShowTerrain} /> + </div> + </div> + )} + {this.routeToAnimate && ( + <div className="animation-panel" style={{ width: this.sidebarWidth() === 0 ? '100%' : `calc(100% - ${this.sidebarWidth()}px)` }}> + <div id="route-to-animate-title">{StrCast(this.routeToAnimate.title)}</div> + <div className="route-animation-options">{this.getRouteAnimationOptions()}</div> + </div> + )} + {this.featuresFromGeocodeResults.length > 0 && ( + <div className="mapbox-geocoding-search-results"> + <React.Fragment> + <h4>Choose a location for your pin: </h4> + {this.featuresFromGeocodeResults + .filter(feature => feature.place_name) + .map((feature, idx) => ( + <div + key={idx} + className="search-result-container" + onClick={() => { + this.handleSearchChange(''); + this.addMarkerForFeature(feature); + }}> + <div className="search-result-place-name">{feature.place_name}</div> + </div> + ))} + </React.Fragment> </div> - </div> - - <BingMapsReact - onMapReady={this.bingMapReady} // - bingMapsKey={bingApiKey} - height="100%" - mapOptions={this.bingMapOptions} - width="100%" - viewOptions={this.bingViewOptions} - /> - <div> - {!this._mapReady - ? null - : this.allAnnotations - .filter(anno => !anno.layout_unrendered) - .map((pushpin, i) => ( - <DocumentView - key={i} - {...this.props} - renderDepth={this.props.renderDepth + 1} - Document={pushpin} - DataDoc={undefined} - PanelWidth={returnOne} - PanelHeight={returnOne} - NativeWidth={returnOne} - NativeHeight={returnOne} - onKey={undefined} - onDoubleClick={undefined} - onBrowseClick={undefined} - childFilters={returnEmptyFilter} - childFiltersByRanges={returnEmptyFilter} - searchFilterDocs={returnEmptyDoclist} - isDocumentActive={returnFalse} - isContentActive={returnFalse} - addDocTab={returnFalse} - ScreenToLocalTransform={Transform.Identity} - fitContentsToBox={undefined} - focus={returnOne} - /> - ))} - </div> - {/* <MapBoxInfoWindow - key={Docs.Create.MapMarkerDocument(NumCast(40), NumCast(40), false, [], {})[Id]} - {...OmitKeys(this.props, ['NativeWidth', 'NativeHeight', 'setContentView']).omit} - place={Docs.Create.MapMarkerDocument(NumCast(40), NumCast(40), false, [], {})} - markerMap={this.markerMap} - PanelWidth={this.infoWidth} - PanelHeight={this.infoHeight} - moveDocument={this.moveDocument} - isAnyChildContentActive={this.isAnyChildContentActive} - whenChildContentsActiveChanged={this.whenChildContentsActiveChanged} - /> */} - - {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? null : ( - <MarqueeAnnotator - rootDoc={this.rootDoc} - anchorMenuClick={this.anchorMenuClick} - scrollTop={0} - down={this._marqueeing} - scaling={returnOne} - addDocument={this.addDocumentWrapper} - docView={this.props.docViewPath().lastElement()} - finishMarquee={this.finishMarquee} - savedAnnotations={this.savedAnnotations} - annotationLayer={this._annotationLayer.current} - selectionText={returnEmptyString} - mainCont={this._mainCont.current} - /> )} + <MapProvider> + <MapboxMap + ref={this._mapRef} + mapboxAccessToken={MAPBOX_ACCESS_TOKEN} + viewState={this.isAnimating || this.routeToAnimate ? undefined : { ...this.mapboxMapViewState, width: NumCast(this.layoutDoc._width), height: NumCast(this.layoutDoc._height) }} + mapStyle={this.dataDoc.map_style ? StrCast(this.dataDoc.map_style) : 'mapbox://styles/mapbox/streets-v11'} + style={{ + position: 'absolute', + top: 0, + left: 0, + zIndex: '0', + width: NumCast(this.layoutDoc._width) * parscale, + height: NumCast(this.layoutDoc._height) * parscale, + }} + initialViewState={this.isAnimating ? undefined : this.mapboxMapViewState} + onZoom={this.onMapZoom} + onMove={this.onMapMove} + onClick={this.handleMapClick} + onDblClick={this.handleMapDblClick} + terrain={this.showTerrain ? { source: 'mapbox-dem', exaggeration: 2.0 } : undefined}> + <Source id="mapbox-dem" type="raster-dem" url="mapbox://mapbox.mapbox-terrain-dem-v1" tileSize={512} maxzoom={14} /> + <Source id="temporary-route" type="geojson" data={this.temporaryRouteSource} /> + <Source id="map-routes" type="geojson" data={this.allRoutesGeoJson} /> + <Layer id="temporary-route-layer" type="line" source="temporary-route" layout={{ 'line-join': 'round', 'line-cap': 'round' }} paint={{ 'line-color': '#36454F', 'line-width': 4, 'line-dasharray': [1, 1] }} /> + {!this.isAnimating && this.animationPhase == 0 && <Layer id="map-routes-layer" type="line" source="map-routes" layout={{ 'line-join': 'round', 'line-cap': 'round' }} paint={{ 'line-color': '#FF0000', 'line-width': 4 }} />} + {this.routeToAnimate && (this.isAnimating || this.animationPhase > 0) && ( + <> + {!this.isStreetViewAnimation && ( + <> + <Source id="animated-route" type="geojson" data={this.updatedRouteCoordinates} /> + <Layer + id="dynamic-animation-line" + type="line" + source="animated-route" + paint={{ + 'line-color': this.animationLineColor, + 'line-width': 5, + }} + /> + </> + )} + <Source id="start-pin-base" type="geojson" data={AnimationUtility.createGeoJSONCircle(this.selectedRouteCoordinates[0], 0.04)} /> + <Source id="start-pin-top" type="geojson" data={AnimationUtility.createGeoJSONCircle(this.selectedRouteCoordinates[0], 0.25)} /> + <Source id="end-pin-base" type="geojson" data={AnimationUtility.createGeoJSONCircle(this.selectedRouteCoordinates.slice(-1)[0], 0.04)} /> + <Source id="end-pin-top" type="geojson" data={AnimationUtility.createGeoJSONCircle(this.selectedRouteCoordinates.slice(-1)[0], 0.25)} /> + <Layer + id="start-fill-pin-base" + type="fill-extrusion" + source="start-pin-base" + paint={{ + 'fill-extrusion-color': '#0bfc03', + 'fill-extrusion-height': 1000, + }} + /> + <Layer + id="start-fill-pin-top" + type="fill-extrusion" + source="start-pin-top" + paint={{ + 'fill-extrusion-color': '#0bfc03', + 'fill-extrusion-base': 1000, + 'fill-extrusion-height': 1200, + }} + /> + <Layer + id="end-fill-pin-base" + type="fill-extrusion" + source="end-pin-base" + paint={{ + 'fill-extrusion-color': '#eb1c1c', + 'fill-extrusion-height': 1000, + }} + /> + <Layer + id="end-fill-pin-top" + type="fill-extrusion" + source="end-pin-top" + paint={{ + 'fill-extrusion-color': '#eb1c1c', + 'fill-extrusion-base': 1000, + 'fill-extrusion-height': 1200, + }} + /> + </> + )} + + <> + {!this.isAnimating && + this.animationPhase == 0 && + this.allPushpins + // .filter(anno => !anno.layout_unrendered) + .map((pushpin, idx) => ( + <Marker key={idx} longitude={NumCast(pushpin.longitude)} latitude={NumCast(pushpin.latitude)} anchor="bottom" onClick={(e: MarkerEvent<mapboxgl.Marker, MouseEvent>) => this.handleMarkerClick(e, pushpin)}> + {this.getMarkerIcon(pushpin)} + </Marker> + ))} + </> + + {/* {this.mapMarkers.length > 0 && this.mapMarkers.map((marker, idx) => ( + <Marker key={idx} longitude={marker.longitude} latitude={marker.latitude}/> + ))} */} + </MapboxMap> + </MapProvider> </div> - {/* </LoadScript > */} <div className="mapBox-sidebar" style={{ width: `${this.sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}> <SidebarAnnos ref={this._sidebarRef} - {...this.props} + {...this._props} fieldKey={this.fieldKey} - rootDoc={this.rootDoc} + Document={this.Document} layoutDoc={this.layoutDoc} dataDoc={this.dataDoc} usePanelWidth={true} diff --git a/src/client/views/nodes/MapBox/MapBox2.tsx b/src/client/views/nodes/MapBox/MapBox2.tsx index 407a91dd0..9825824bd 100644 --- a/src/client/views/nodes/MapBox/MapBox2.tsx +++ b/src/client/views/nodes/MapBox/MapBox2.tsx @@ -1,642 +1,597 @@ -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Autocomplete, GoogleMap, GoogleMapProps, Marker } from '@react-google-maps/api'; -import { action, computed, IReactionDisposer, observable, ObservableMap, runInAction } from 'mobx'; -import { observer } from 'mobx-react'; -import * as React from 'react'; -import { Doc, DocListCast, Opt } from '../../../../fields/Doc'; -import { Width } from '../../../../fields/DocSymbols'; -import { Id } from '../../../../fields/FieldSymbols'; -import { InkTool } from '../../../../fields/InkField'; -import { NumCast, StrCast } from '../../../../fields/Types'; -import { emptyFunction, returnEmptyString, returnFalse, returnOne, setupMoveUpEvents, Utils } from '../../../../Utils'; -import { Docs } from '../../../documents/Documents'; -import { DragManager } from '../../../util/DragManager'; -import { SnappingManager } from '../../../util/SnappingManager'; -import { UndoManager } from '../../../util/UndoManager'; -import { MarqueeOptionsMenu } from '../../collections/collectionFreeForm'; -import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../../DocComponent'; -import { Colors } from '../../global/globalEnums'; -import { MarqueeAnnotator } from '../../MarqueeAnnotator'; -import { AnchorMenu } from '../../pdf/AnchorMenu'; -import { Annotation } from '../../pdf/Annotation'; -import { SidebarAnnos } from '../../SidebarAnnos'; -import { FieldView, FieldViewProps } from '../FieldView'; -import { PinProps } from '../trails'; -import './MapBox2.scss'; -import { MapBoxInfoWindow } from './MapBoxInfoWindow'; - -/** - * MapBox2 architecture: - * Main component: MapBox2.tsx - * Supporting Components: SidebarAnnos, CollectionStackingView - * - * MapBox2 is a node that extends the ViewBoxAnnotatableComponent. Similar to PDFBox and WebBox, it supports interaction between sidebar content and document content. - * The main body of MapBox2 uses Google Maps API to allow location retrieval, adding map markers, pan and zoom, and open street view. - * Dash Document architecture is integrated with Maps API: When drag and dropping documents with ExifData (gps Latitude and Longitude information) available, - * sidebarAddDocument function checks if the document contains lat & lng information, if it does, then the document is added to both the sidebar and the infowindow (a pop up corresponding to a map marker--pin on map). - * The lat and lng field of the document is filled when importing (spec see ConvertDMSToDD method and processFileUpload method in Documents.ts). - * A map marker is considered a document that contains a collection with stacking view of documents, it has a lat, lng location, which is passed to Maps API's custom marker (red pin) to be rendered on the google maps - */ - -// const _global = (window /* browser */ || global /* node */) as any; - -const mapContainerStyle = { - height: '100%', -}; - -const defaultCenter = { - lat: 42.360081, - lng: -71.058884, -}; - -const mapOptions = { - fullscreenControl: false, -}; - -const apiKey = process.env.GOOGLE_MAPS; - -const script = document.createElement('script'); -script.defer = true; -script.async = true; -script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places,drawing`; -console.log(script.src); -document.head.appendChild(script); - -/** - * Consider integrating later: allows for drawing, circling, making shapes on map - */ -// const drawingManager = new window.google.maps.drawing.DrawingManager({ -// drawingControl: true, -// drawingControlOptions: { -// position: google.maps.ControlPosition.TOP_RIGHT, -// drawingModes: [ -// google.maps.drawing.OverlayType.MARKER, -// // currently we are not supporting the following drawing mode on map, a thought for future development -// google.maps.drawing.OverlayType.CIRCLE, -// google.maps.drawing.OverlayType.POLYLINE, -// ], -// }, -// }); - -// options for searchbox in Google Maps Places Autocomplete API -const options = { - fields: ['formatted_address', 'geometry', 'name'], // note: level of details is charged by item per retrieval, not recommended to return all fields - strictBounds: false, - types: ['establishment'], // type pf places, subject of change according to user need -} as google.maps.places.AutocompleteOptions; - -@observer -export class MapBox2 extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps & Partial<GoogleMapProps>>() { - private _dropDisposer?: DragManager.DragDropDisposer; - private _disposers: { [name: string]: IReactionDisposer } = {}; - private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef(); - @observable private _overlayAnnoInfo: Opt<Doc>; - showInfo = action((anno: Opt<Doc>) => (this._overlayAnnoInfo = anno)); - public static LayoutString(fieldKey: string) { - return FieldView.LayoutString(MapBox2, fieldKey); - } - public get SidebarKey() { - return this.fieldKey + '_sidebar'; - } - private _setPreviewCursor: undefined | ((x: number, y: number, drag: boolean, hide: boolean, doc: Opt<Doc>) => void); - @computed get inlineTextAnnotations() { - return this.allMapMarkers.filter(a => a.text_inlineAnnotations); - } - - @observable private _map: google.maps.Map = null as unknown as google.maps.Map; - @observable private selectedPlace: Doc | undefined; - @observable private markerMap: { [id: string]: google.maps.Marker } = {}; - @observable private center = navigator.geolocation ? navigator.geolocation.getCurrentPosition : defaultCenter; - @observable private _marqueeing: number[] | undefined; - @observable private _isAnnotating = false; - @observable private inputRef = React.createRef<HTMLInputElement>(); - @observable private searchMarkers: google.maps.Marker[] = []; - @observable private searchBox = new window.google.maps.places.Autocomplete(this.inputRef.current!, options); - @observable private _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>(); - @computed get allSidebarDocs() { - return DocListCast(this.dataDoc[this.SidebarKey]); - } - @computed get allMapMarkers() { - return DocListCast(this.dataDoc[this.annotationKey]); - } - @observable private toggleAddMarker = false; - private _mainCont: React.RefObject<HTMLDivElement> = React.createRef(); - - @observable _showSidebar = false; - @computed get SidebarShown() { - return this._showSidebar || this.layoutDoc._layout_showSidebar ? true : false; - } - - static _canAnnotate = true; - static _hadSelection: boolean = false; - private _sidebarRef = React.createRef<SidebarAnnos>(); - private _ref: React.RefObject<HTMLDivElement> = React.createRef(); - - componentDidMount() { - this.props.setContentView?.(this); - } - - @action - private setSearchBox = (searchBox: any) => { - this.searchBox = searchBox; - }; - - // iterate allMarkers to size, center, and zoom map to contain all markers - private fitBounds = (map: google.maps.Map) => { - const curBounds = map.getBounds() ?? new window.google.maps.LatLngBounds(); - const isFitting = this.allMapMarkers.reduce((fits, place) => fits && curBounds?.contains({ lat: NumCast(place.lat), lng: NumCast(place.lng) }), true as boolean); - !isFitting && map.fitBounds(this.allMapMarkers.reduce((bounds, place) => bounds.extend({ lat: NumCast(place.lat), lng: NumCast(place.lng) }), new window.google.maps.LatLngBounds())); - }; - - /** - * Custom control for add marker button - * @param controlDiv - * @param map - */ - private CenterControl = () => { - const controlDiv = document.createElement('div'); - controlDiv.className = 'MapBox2-addMarker'; - // Set CSS for the control border. - const controlUI = document.createElement('div'); - controlUI.style.backgroundColor = '#fff'; - controlUI.style.borderRadius = '3px'; - controlUI.style.cursor = 'pointer'; - controlUI.style.marginTop = '10px'; - controlUI.style.borderRadius = '4px'; - controlUI.style.marginBottom = '22px'; - controlUI.style.textAlign = 'center'; - controlUI.style.position = 'absolute'; - controlUI.style.width = '32px'; - controlUI.style.height = '32px'; - controlUI.title = 'Click to toggle marker mode. In marker mode, click on map to place a marker.'; - - const plIcon = document.createElement('img'); - plIcon.src = 'https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-256.png'; - plIcon.style.color = 'rgb(25,25,25)'; - plIcon.style.fontFamily = 'Roboto,Arial,sans-serif'; - plIcon.style.fontSize = '16px'; - plIcon.style.lineHeight = '32px'; - plIcon.style.left = '18'; - plIcon.style.top = '15'; - plIcon.style.position = 'absolute'; - plIcon.width = 14; - plIcon.height = 14; - plIcon.innerHTML = 'Add'; - controlUI.appendChild(plIcon); - - // Set CSS for the control interior. - const markerIcon = document.createElement('img'); - markerIcon.src = 'https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-1024.png'; - markerIcon.style.color = 'rgb(25,25,25)'; - markerIcon.style.fontFamily = 'Roboto,Arial,sans-serif'; - markerIcon.style.fontSize = '16px'; - markerIcon.style.lineHeight = '32px'; - markerIcon.style.left = '-2'; - markerIcon.style.top = '1'; - markerIcon.width = 30; - markerIcon.height = 30; - markerIcon.style.position = 'absolute'; - markerIcon.innerHTML = 'Add'; - controlUI.appendChild(markerIcon); - - // Setup the click event listeners - controlUI.addEventListener('click', () => { - if (this.toggleAddMarker === true) { - this.toggleAddMarker = false; - console.log('add marker button status:' + this.toggleAddMarker); - controlUI.style.backgroundColor = '#fff'; - markerIcon.style.color = 'rgb(25,25,25)'; - } else { - this.toggleAddMarker = true; - console.log('add marker button status:' + this.toggleAddMarker); - controlUI.style.backgroundColor = '#4476f7'; - markerIcon.style.color = 'rgb(255,255,255)'; - } - }); - controlDiv.appendChild(controlUI); - return controlDiv; - }; - - /** - * Place the marker on google maps & store the empty marker as a MapMarker Document in allMarkers list - * @param position - the LatLng position where the marker is placed - * @param map - */ - @action - private placeMarker = (position: google.maps.LatLng, map: google.maps.Map) => { - const marker = new google.maps.Marker({ - position: position, - map: map, - }); - map.panTo(position); - const mapMarker = Docs.Create.PushpinDocument(NumCast(position.lat()), NumCast(position.lng()), false, [], {}); - this.addDocument(mapMarker, this.annotationKey); - }; - - _loadPending = true; - /** - * store a reference to google map instance - * setup the drawing manager on the top right corner of map - * fit map bounds to contain all markers - * @param map - */ - @action - private loadHandler = (map: google.maps.Map) => { - this._map = map; - this._loadPending = true; - const centerControlDiv = this.CenterControl(); - map.controls[google.maps.ControlPosition.TOP_RIGHT].push(centerControlDiv); - //drawingManager.setMap(map); - // if (navigator.geolocation) { - // navigator.geolocation.getCurrentPosition( - // (position: Position) => { - // const pos = { - // lat: position.coords.latitude, - // lng: position.coords.longitude, - // }; - // this._map.setCenter(pos); - // } - // ); - // } else { - // alert("Your geolocation is not supported by browser.") - // }; - map.setZoom(NumCast(this.dataDoc.map_zoom, 2.5)); - map.setCenter(new google.maps.LatLng(NumCast(this.dataDoc.mapLat), NumCast(this.dataDoc.mapLng))); - setTimeout(() => { - if (this._loadPending && this._map.getBounds()) { - this._loadPending = false; - this.layoutDoc.freeform_fitContentsToBox && this.fitBounds(this._map); - } - }, 250); - // listener to addmarker event - this._map.addListener('click', (e: MouseEvent) => { - if (this.toggleAddMarker === true) { - this.placeMarker((e as any).latLng, map); - } - }); - }; - - @action - centered = () => { - if (this._loadPending && this._map.getBounds()) { - this._loadPending = false; - this.layoutDoc.freeform_fitContentsToBox && this.fitBounds(this._map); - } - this.dataDoc.mapLat = this._map.getCenter()?.lat(); - this.dataDoc.mapLng = this._map.getCenter()?.lng(); - }; - - @action - zoomChanged = () => { - if (this._loadPending && this._map.getBounds()) { - this._loadPending = false; - this.layoutDoc.freeform_fitContentsToBox && this.fitBounds(this._map); - } - this.dataDoc.map_zoom = this._map.getZoom(); - }; - - /** - * Load and render all map markers - * @param marker - * @param place - */ - @action - private markerLoadHandler = (marker: google.maps.Marker, place: Doc) => { - place[Id] ? (this.markerMap[place[Id]] = marker) : null; - }; - - /** - * on clicking the map marker, set the selected place to the marker document & set infowindowopen to be true - * @param e - * @param place - */ - @action - private markerClickHandler = (e: google.maps.MapMouseEvent, place: Doc) => { - // set which place was clicked - this.selectedPlace = place; - place.infoWindowOpen = true; - }; - - /** - * Called when dragging documents into map sidebar or directly into infowindow; to create a map marker, ref to MapMarkerDocument in Documents.ts - * @param doc - * @param sidebarKey - * @returns - */ - sidebarAddDocument = (doc: Doc | Doc[], sidebarKey?: string) => { - console.log('print all sidebar Docs'); - if (!this.layoutDoc._layout_showSidebar) this.toggleSidebar(); - const docs = doc instanceof Doc ? [doc] : doc; - docs.forEach(doc => { - if (doc.lat !== undefined && doc.lng !== undefined) { - const existingMarker = this.allMapMarkers.find(marker => marker.lat === doc.lat && marker.lng === doc.lng); - if (existingMarker) { - Doc.AddDocToList(existingMarker, 'data', doc); - } else { - const marker = Docs.Create.PushpinDocument(NumCast(doc.lat), NumCast(doc.lng), false, [doc], {}); - this.addDocument(marker, this.annotationKey); - } - } - }); //add to annotation list - - return this.addDocument(doc, sidebarKey); // add to sidebar list - }; - - /** - * Removing documents from the sidebar - * @param doc - * @param sidebarKey - * @returns - */ - sidebarRemoveDocument = (doc: Doc | Doc[], sidebarKey?: string) => { - if (this.layoutDoc._layout_showSidebar) this.toggleSidebar(); - const docs = doc instanceof Doc ? [doc] : doc; - return this.removeDocument(doc, sidebarKey); - }; - - /** - * Toggle sidebar onclick the tiny comment button on the top right corner - * @param e - */ - sidebarBtnDown = (e: React.PointerEvent) => { - setupMoveUpEvents( - this, - e, - (e, down, delta) => - runInAction(() => { - const localDelta = this.props - .ScreenToLocalTransform() - .scale(this.props.NativeDimScaling?.() || 1) - .transformDirection(delta[0], delta[1]); - const fullWidth = this.layoutDoc[Width](); - const mapWidth = fullWidth - this.sidebarWidth(); - if (this.sidebarWidth() + localDelta[0] > 0) { - this._showSidebar = true; - this.layoutDoc._width = fullWidth + localDelta[0]; - this.layoutDoc._layout_sidebarWidthPercent = ((100 * (this.sidebarWidth() + localDelta[0])) / (fullWidth + localDelta[0])).toString() + '%'; - } else { - this._showSidebar = false; - this.layoutDoc._width = mapWidth; - this.layoutDoc._layout_sidebarWidthPercent = '0%'; - } - return false; - }), - emptyFunction, - () => UndoManager.RunInBatch(this.toggleSidebar, 'toggle sidebar map') - ); - }; - - sidebarWidth = () => (Number(this.layout_sidebarWidthPercent.substring(0, this.layout_sidebarWidthPercent.length - 1)) / 100) * this.props.PanelWidth(); - @computed get layout_sidebarWidthPercent() { - return StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%'); - } - @computed get sidebarColor() { - return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this.props.fieldKey + '_backgroundColor'], '#e4e4e4')); - } - - /** - * function that reads the place inputed from searchbox, then zoom in on the location that's been autocompleted; - * add a customized temporary marker on the map - */ - @action - private handlePlaceChanged = () => { - const place = this.searchBox.getPlace(); - - if (!place.geometry || !place.geometry.location) { - // user entered the name of a place that wasn't suggested & pressed the enter key, or place details request failed - window.alert("No details available for input: '" + place.name + "'"); - return; - } - - // zoom in on the location of the search result - if (place.geometry.viewport) { - this._map.fitBounds(place.geometry.viewport); - } else { - this._map.setCenter(place.geometry.location); - this._map.setZoom(17); - } - - // customize icon => customized icon for the nature of the location selected - const icon = { - url: place.icon as string, - size: new google.maps.Size(71, 71), - origin: new google.maps.Point(0, 0), - anchor: new google.maps.Point(17, 34), - scaledSize: new google.maps.Size(25, 25), - }; - - // put temporary cutomized marker on searched location - this.searchMarkers.forEach(marker => { - marker.setMap(null); - }); - this.searchMarkers = []; - this.searchMarkers.push( - new window.google.maps.Marker({ - map: this._map, - icon, - title: place.name, - position: place.geometry.location, - }) - ); - }; - - /** - * Handles toggle of sidebar on click the little comment button - */ - @computed get sidebarHandle() { - return ( - <div - className="MapBox2-overlayButton-sidebar" - key="sidebar" - title="Toggle Sidebar" - style={{ - display: !this.props.isContentActive() ? 'none' : undefined, - top: StrCast(this.rootDoc._layout_showTitle) === 'title' ? 20 : 5, - backgroundColor: this.SidebarShown ? Colors.MEDIUM_BLUE : Colors.BLACK, - }} - onPointerDown={this.sidebarBtnDown}> - <FontAwesomeIcon style={{ color: Colors.WHITE }} icon={'comment-alt'} size="sm" /> - </div> - ); - } - - // TODO: Adding highlight box layer to Maps - @action - toggleSidebar = () => { - //1.2 * w * ? = .2 * w .2/1.2 - const prevWidth = this.sidebarWidth(); - this.layoutDoc._layout_showSidebar = (this.layoutDoc._layout_sidebarWidthPercent = StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%') === '0%' ? `${(100 * 0.2) / 1.2}%` : '0%') !== '0%'; - this.layoutDoc._width = this.layoutDoc._layout_showSidebar ? NumCast(this.layoutDoc._width) * 1.2 : Math.max(20, NumCast(this.layoutDoc._width) - prevWidth); - }; - - sidebarDown = (e: React.PointerEvent) => { - setupMoveUpEvents(this, e, this.sidebarMove, emptyFunction, () => setTimeout(this.toggleSidebar), true); - }; - sidebarMove = (e: PointerEvent, down: number[], delta: number[]) => { - const bounds = this._ref.current!.getBoundingClientRect(); - this.layoutDoc._layout_sidebarWidthPercent = '' + 100 * Math.max(0, 1 - (e.clientX - bounds.left) / bounds.width) + '%'; - this.layoutDoc._layout_showSidebar = this.layoutDoc._layout_sidebarWidthPercent !== '0%'; - e.preventDefault(); - return false; - }; - - setPreviewCursor = (func?: (x: number, y: number, drag: boolean, hide: boolean) => void) => (this._setPreviewCursor = func); - - @action - onMarqueeDown = (e: React.PointerEvent) => { - if (!e.altKey && e.button === 0 && this.props.isContentActive(true) && ![InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) { - setupMoveUpEvents( - this, - e, - action(e => { - MarqueeAnnotator.clearAnnotations(this._savedAnnotations); - this._marqueeing = [e.clientX, e.clientY]; - return true; - }), - returnFalse, - () => MarqueeAnnotator.clearAnnotations(this._savedAnnotations), - false - ); - } - }; - @action finishMarquee = (x?: number, y?: number) => { - this._marqueeing = undefined; - this._isAnnotating = false; - x !== undefined && y !== undefined && this._setPreviewCursor?.(x, y, false, false, this.props.Document); - }; - - addDocumentWrapper = (doc: Doc | Doc[], annotationKey?: string) => { - return this.addDocument(doc, annotationKey); - }; - - pointerEvents = () => { - return this.props.isContentActive() === false ? 'none' : this.props.isContentActive() && this.props.pointerEvents?.() !== 'none' && !MarqueeOptionsMenu.Instance.isShown() ? 'all' : SnappingManager.GetIsDragging() ? undefined : 'none'; - }; - @computed get annotationLayer() { - return ( - <div className="MapBox2-annotationLayer" style={{ height: Doc.NativeHeight(this.Document) || undefined }} ref={this._annotationLayer}> - {this.inlineTextAnnotations - .sort((a, b) => NumCast(a.y) - NumCast(b.y)) - .map(anno => ( - <Annotation key={`${anno[Id]}-annotation`} {...this.props} fieldKey={this.annotationKey} pointerEvents={this.pointerEvents} showInfo={this.showInfo} dataDoc={this.dataDoc} anno={anno} /> - ))} - </div> - ); - } - - getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => AnchorMenu.Instance?.GetAnchor(this._savedAnnotations, addAsAnnotation) ?? this.rootDoc; - - /** - * render contents in allMapMarkers (e.g. images with exifData) into google maps as map marker - * @returns - */ - private renderMarkers = () => { - return this.allMapMarkers.map(place => ( - <Marker key={place[Id]} position={{ lat: NumCast(place.lat), lng: NumCast(place.lng) }} onLoad={marker => this.markerLoadHandler(marker, place)} onClick={(e: google.maps.MapMouseEvent) => this.markerClickHandler(e, place)} /> - )); - }; - - // TODO: auto center on select a document in the sidebar - private handleMapCenter = (map: google.maps.Map) => { - // console.log("print the selected views in selectionManager:") - // if (SelectionManager.Views().lastElement()) { - // console.log(SelectionManager.Views().lastElement()); - // } - }; - - panelWidth = () => this.props.PanelWidth() / (this.props.NativeDimScaling?.() || 1) - this.sidebarWidth(); - panelHeight = () => this.props.PanelHeight() / (this.props.NativeDimScaling?.() || 1); - scrollXf = () => this.props.ScreenToLocalTransform().translate(0, NumCast(this.layoutDoc._layout_scrollTop)); - transparentFilter = () => [...this.props.childFilters(), Utils.IsTransparentFilter()]; - opaqueFilter = () => [...this.props.childFilters(), Utils.IsOpaqueFilter()]; - infoWidth = () => this.props.PanelWidth() / 5; - infoHeight = () => this.props.PanelHeight() / 5; - anchorMenuClick = () => this._sidebarRef.current?.anchorMenuClick; - savedAnnotations = () => this._savedAnnotations; - - get MicrosoftMaps() { - return (window as any).Microsoft.Maps; - } - render() { - const renderAnnotations = (childFilters?: () => string[]) => null; - return ( - <div className="MapBox2" ref={this._ref}> - <div - className="MapBox2-wrapper" - onWheel={e => e.stopPropagation()} - onPointerDown={async e => { - e.button === 0 && !e.ctrlKey && e.stopPropagation(); - }} - style={{ width: `calc(100% - ${this.layout_sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}> - <div style={{ mixBlendMode: 'multiply' }}>{renderAnnotations(this.transparentFilter)}</div> - {renderAnnotations(this.opaqueFilter)} - {SnappingManager.GetIsDragging() ? null : renderAnnotations()} - {this.annotationLayer} - - <div> - <GoogleMap mapContainerStyle={mapContainerStyle} onZoomChanged={this.zoomChanged} onCenterChanged={this.centered} onLoad={this.loadHandler} options={mapOptions}> - <Autocomplete onLoad={this.setSearchBox} onPlaceChanged={this.handlePlaceChanged}> - <input className="MapBox2-input" ref={this.inputRef} type="text" onKeyDown={e => e.stopPropagation()} placeholder="Enter location" /> - </Autocomplete> - - {this.renderMarkers()} - {this.allMapMarkers - .filter(marker => marker.infoWindowOpen) - .map(marker => ( - <MapBoxInfoWindow - key={marker[Id]} - {...this.props} - setContentView={emptyFunction} - place={marker} - markerMap={this.markerMap} - PanelWidth={this.infoWidth} - PanelHeight={this.infoHeight} - moveDocument={this.moveDocument} - isAnyChildContentActive={this.isAnyChildContentActive} - whenChildContentsActiveChanged={this.whenChildContentsActiveChanged} - /> - ))} - {/* {this.handleMapCenter(this._map)} */} - </GoogleMap> - </div> - {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? null : ( - <MarqueeAnnotator - rootDoc={this.rootDoc} - anchorMenuClick={this.anchorMenuClick} - scrollTop={0} - down={this._marqueeing} - scaling={returnOne} - addDocument={this.addDocumentWrapper} - docView={this.props.docViewPath().lastElement()} - finishMarquee={this.finishMarquee} - savedAnnotations={this.savedAnnotations} - annotationLayer={this._annotationLayer.current} - selectionText={returnEmptyString} - mainCont={this._mainCont.current} - /> - )} - </div> - {/* </LoadScript > */} - <div className="MapBox2-sidebar" style={{ width: `${this.layout_sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}> - <SidebarAnnos - ref={this._sidebarRef} - {...this.props} - fieldKey={this.fieldKey} - rootDoc={this.rootDoc} - layoutDoc={this.layoutDoc} - dataDoc={this.dataDoc} - usePanelWidth={true} - showSidebar={this.SidebarShown} - nativeWidth={NumCast(this.layoutDoc._nativeWidth)} - whenChildContentsActiveChanged={this.whenChildContentsActiveChanged} - PanelWidth={this.sidebarWidth} - sidebarAddDocument={this.sidebarAddDocument} - moveDocument={this.moveDocument} - removeDocument={this.sidebarRemoveDocument} - /> - </div> - {this.sidebarHandle} - </div> - ); - } -} +// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +// import { Autocomplete, GoogleMap, GoogleMapProps, Marker } from '@react-google-maps/api'; +// import { action, computed, IReactionDisposer, observable, ObservableMap, runInAction } from 'mobx'; +// import { observer } from 'mobx-react'; +// import * as React from 'react'; +// import { Doc, DocListCast, Opt } from '../../../../fields/Doc'; +// import { Id } from '../../../../fields/FieldSymbols'; +// import { NumCast, StrCast } from '../../../../fields/Types'; +// import { emptyFunction, setupMoveUpEvents, Utils } from '../../../../Utils'; +// import { Docs } from '../../../documents/Documents'; +// import { DragManager } from '../../../util/DragManager'; +// import { SnappingManager } from '../../../util/SnappingManager'; +// import { UndoManager } from '../../../util/UndoManager'; +// import { MarqueeOptionsMenu } from '../../collections/collectionFreeForm'; +// import { ViewBoxAnnotatableComponent } from '../../DocComponent'; +// import { Colors } from '../../global/globalEnums'; +// import { AnchorMenu } from '../../pdf/AnchorMenu'; +// import { Annotation } from '../../pdf/Annotation'; +// import { SidebarAnnos } from '../../SidebarAnnos'; +// import { FieldView, FieldViewProps } from '../FieldView'; +// import { PinProps } from '../trails'; +// import './MapBox2.scss'; +// import { MapBoxInfoWindow } from './MapBoxInfoWindow'; + +// /** +// * MapBox2 architecture: +// * Main component: MapBox2.tsx +// * Supporting Components: SidebarAnnos, CollectionStackingView +// * +// * MapBox2 is a node that extends the ViewBoxAnnotatableComponent. Similar to PDFBox and WebBox, it supports interaction between sidebar content and document content. +// * The main body of MapBox2 uses Google Maps API to allow location retrieval, adding map markers, pan and zoom, and open street view. +// * Dash Document architecture is integrated with Maps API: When drag and dropping documents with ExifData (gps Latitude and Longitude information) available, +// * sidebarAddDocument function checks if the document contains lat & lng information, if it does, then the document is added to both the sidebar and the infowindow (a pop up corresponding to a map marker--pin on map). +// * The lat and lng field of the document is filled when importing (spec see ConvertDMSToDD method and processFileUpload method in Documents.ts). +// * A map marker is considered a document that contains a collection with stacking view of documents, it has a lat, lng location, which is passed to Maps API's custom marker (red pin) to be rendered on the google maps +// */ + +// // const _global = (window /* browser */ || global /* node */) as any; + +// const mapContainerStyle = { +// height: '100%', +// }; + +// const defaultCenter = { +// lat: 42.360081, +// lng: -71.058884, +// }; + +// const mapOptions = { +// fullscreenControl: false, +// }; + +// const apiKey = process.env.GOOGLE_MAPS; + +// const script = document.createElement('script'); +// script.defer = true; +// script.async = true; +// script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places,drawing`; +// console.log(script.src); +// document.head.appendChild(script); + +// /** +// * Consider integrating later: allows for drawing, circling, making shapes on map +// */ +// // const drawingManager = new window.google.maps.drawing.DrawingManager({ +// // drawingControl: true, +// // drawingControlOptions: { +// // position: google.maps.ControlPosition.TOP_RIGHT, +// // drawingModes: [ +// // google.maps.drawing.OverlayType.MARKER, +// // // currently we are not supporting the following drawing mode on map, a thought for future development +// // google.maps.drawing.OverlayType.CIRCLE, +// // google.maps.drawing.OverlayType.POLYLINE, +// // ], +// // }, +// // }); + +// // options for searchbox in Google Maps Places Autocomplete API +// const options = { +// fields: ['formatted_address', 'geometry', 'name'], // note: level of details is charged by item per retrieval, not recommended to return all fields +// strictBounds: false, +// types: ['establishment'], // type pf places, subject of change according to user need +// } as google.maps.places.AutocompleteOptions; + +// @observer +// export class MapBox2 extends ViewBoxAnnotatableComponent<FieldViewProps & Partial<GoogleMapProps>>() { +// private _dropDisposer?: DragManager.DragDropDisposer; +// private _disposers: { [name: string]: IReactionDisposer } = {}; +// private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef(); +// @observable private _overlayAnnoInfo: Opt<Doc> = undefined; +// showInfo = action((anno: Opt<Doc>) => (this._overlayAnnoInfo = anno)); +// public static LayoutString(fieldKey: string) { +// return FieldView.LayoutString(MapBox2, fieldKey); +// } +// public get SidebarKey() { +// return this.fieldKey + '_sidebar'; +// } +// private _setPreviewCursor: undefined | ((x: number, y: number, drag: boolean, hide: boolean, doc: Opt<Doc>) => void); +// @computed get inlineTextAnnotations() { +// return this.allMapMarkers.filter(a => a.text_inlineAnnotations); +// } + +// @observable private _map: google.maps.Map = null as unknown as google.maps.Map; +// @observable private selectedPlace: Doc | undefined = undefined; +// @observable private markerMap: { [id: string]: google.maps.Marker } = {}; +// @observable private center = navigator.geolocation ? navigator.geolocation.getCurrentPosition : defaultCenter; +// @observable private inputRef = React.createRef<HTMLInputElement>(); +// @observable private searchMarkers: google.maps.Marker[] = []; +// @observable private searchBox = new window.google.maps.places.Autocomplete(this.inputRef.current!, options); +// @observable private _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>(); +// @computed get allSidebarDocs() { +// return DocListCast(this.dataDoc[this.SidebarKey]); +// } +// @computed get allMapMarkers() { +// return DocListCast(this.dataDoc[this.annotationKey]); +// } +// @observable private toggleAddMarker = false; + +// @observable _showSidebar = false; +// @computed get SidebarShown() { +// return this._showSidebar || this.layoutDoc._layout_showSidebar ? true : false; +// } + +// static _canAnnotate = true; +// static _hadSelection: boolean = false; +// private _sidebarRef = React.createRef<SidebarAnnos>(); +// private _ref: React.RefObject<HTMLDivElement> = React.createRef(); + +// componentDidMount() { +// this._props.setContentView?.(this); +// } + +// @action +// private setSearchBox = (searchBox: any) => { +// this.searchBox = searchBox; +// }; + +// // iterate allMarkers to size, center, and zoom map to contain all markers +// private fitBounds = (map: google.maps.Map) => { +// const curBounds = map.getBounds ?? new window.google.maps.LatLngBounds(); +// const isFitting = this.allMapMarkers.reduce((fits, place) => fits && curBounds?.contains({ lat: NumCast(place.lat), lng: NumCast(place.lng) }), true as boolean); +// !isFitting && map.fitBounds(this.allMapMarkers.reduce((bounds, place) => bounds.extend({ lat: NumCast(place.lat), lng: NumCast(place.lng) }), new window.google.maps.LatLngBounds())); +// }; + +// /** +// * Custom control for add marker button +// * @param controlDiv +// * @param map +// */ +// private CenterControl = () => { +// const controlDiv = document.createElement('div'); +// controlDiv.className = 'MapBox2-addMarker'; +// // Set CSS for the control border. +// const controlUI = document.createElement('div'); +// controlUI.style.backgroundColor = '#fff'; +// controlUI.style.borderRadius = '3px'; +// controlUI.style.cursor = 'pointer'; +// controlUI.style.marginTop = '10px'; +// controlUI.style.borderRadius = '4px'; +// controlUI.style.marginBottom = '22px'; +// controlUI.style.textAlign = 'center'; +// controlUI.style.position = 'absolute'; +// controlUI.style.width = '32px'; +// controlUI.style.height = '32px'; +// controlUI.title = 'Click to toggle marker mode. In marker mode, click on map to place a marker.'; + +// const plIcon = document.createElement('img'); +// plIcon.src = 'https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-256.png'; +// plIcon.style.color = 'rgb(25,25,25)'; +// plIcon.style.fontFamily = 'Roboto,Arial,sans-serif'; +// plIcon.style.fontSize = '16px'; +// plIcon.style.lineHeight = '32px'; +// plIcon.style.left = '18'; +// plIcon.style.top = '15'; +// plIcon.style.position = 'absolute'; +// plIcon.width = 14; +// plIcon.height = 14; +// plIcon.innerHTML = 'Add'; +// controlUI.appendChild(plIcon); + +// // Set CSS for the control interior. +// const markerIcon = document.createElement('img'); +// markerIcon.src = 'https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-1024.png'; +// markerIcon.style.color = 'rgb(25,25,25)'; +// markerIcon.style.fontFamily = 'Roboto,Arial,sans-serif'; +// markerIcon.style.fontSize = '16px'; +// markerIcon.style.lineHeight = '32px'; +// markerIcon.style.left = '-2'; +// markerIcon.style.top = '1'; +// markerIcon.width = 30; +// markerIcon.height = 30; +// markerIcon.style.position = 'absolute'; +// markerIcon.innerHTML = 'Add'; +// controlUI.appendChild(markerIcon); + +// // Setup the click event listeners +// controlUI.addEventListener('click', () => { +// if (this.toggleAddMarker === true) { +// this.toggleAddMarker = false; +// console.log('add marker button status:' + this.toggleAddMarker); +// controlUI.style.backgroundColor = '#fff'; +// markerIcon.style.color = 'rgb(25,25,25)'; +// } else { +// this.toggleAddMarker = true; +// console.log('add marker button status:' + this.toggleAddMarker); +// controlUI.style.backgroundColor = '#4476f7'; +// markerIcon.style.color = 'rgb(255,255,255)'; +// } +// }); +// controlDiv.appendChild(controlUI); +// return controlDiv; +// }; + +// /** +// * Place the marker on google maps & store the empty marker as a MapMarker Document in allMarkers list +// * @param position - the LatLng position where the marker is placed +// * @param map +// */ +// @action +// private placeMarker = (position: google.maps.LatLng, map: google.maps.Map) => { +// const marker = new google.maps.Marker({ +// position: position, +// map: map, +// }); +// map.panTo(position); +// const mapMarker = Docs.Create.PushpinDocument(NumCast(position.lat()), NumCast(position.lng()), false, [], {}); +// this.addDocument(mapMarker, this.annotationKey); +// }; + +// _loadPending = true; +// /** +// * store a reference to google map instance +// * setup the drawing manager on the top right corner of map +// * fit map bounds to contain all markers +// * @param map +// */ +// @action +// private loadHandler = (map: google.maps.Map) => { +// this._map = map; +// this._loadPending = true; +// const centerControlDiv = this.CenterControl(); +// map.controls[google.maps.ControlPosition.TOP_RIGHT].push(centerControlDiv); +// //drawingManager.setMap(map); +// // if (navigator.geolocation) { +// // navigator.geolocation.getCurrentPosition( +// // (position: Position) => { +// // const pos = { +// // lat: position.coords.latitude, +// // lng: position.coords.longitude, +// // }; +// // this._map.setCenter(pos); +// // } +// // ); +// // } else { +// // alert("Your geolocation is not supported by browser.") +// // }; +// map.setZoom(NumCast(this.dataDoc.map_zoom, 2.5)); +// map.setCenter(new google.maps.LatLng(NumCast(this.dataDoc.mapLat), NumCast(this.dataDoc.mapLng))); +// setTimeout(() => { +// if (this._loadPending && this._map.getBounds) { +// this._loadPending = false; +// this.layoutDoc.freeform_fitContentsToBox && this.fitBounds(this._map); +// } +// }, 250); +// // listener to addmarker event +// this._map.addListener('click', (e: MouseEvent) => { +// if (this.toggleAddMarker === true) { +// this.placeMarker((e as any).latLng, map); +// } +// }); +// }; + +// @action +// centered = () => { +// if (this._loadPending && this._map.getBounds) { +// this._loadPending = false; +// this.layoutDoc.freeform_fitContentsToBox && this.fitBounds(this._map); +// } +// this.dataDoc.mapLat = this._map.getCenter()?.lat(); +// this.dataDoc.mapLng = this._map.getCenter()?.lng(); +// }; + +// @action +// zoomChanged = () => { +// if (this._loadPending && this._map.getBounds) { +// this._loadPending = false; +// this.layoutDoc.freeform_fitContentsToBox && this.fitBounds(this._map); +// } +// this.dataDoc.map_zoom = this._map.getZoom(); +// }; + +// /** +// * Load and render all map markers +// * @param marker +// * @param place +// */ +// @action +// private markerLoadHandler = (marker: google.maps.Marker, place: Doc) => { +// place[Id] ? (this.markerMap[place[Id]] = marker) : null; +// }; + +// /** +// * on clicking the map marker, set the selected place to the marker document & set infowindowopen to be true +// * @param e +// * @param place +// */ +// @action +// private markerClickHandler = (e: google.maps.MapMouseEvent, place: Doc) => { +// // set which place was clicked +// this.selectedPlace = place; +// place.infoWindowOpen = true; +// }; + +// /** +// * Called when dragging documents into map sidebar or directly into infowindow; to create a map marker, ref to MapMarkerDocument in Documents.ts +// * @param doc +// * @param sidebarKey +// * @returns +// */ +// sidebarAddDocument = (doc: Doc | Doc[], sidebarKey?: string) => { +// console.log('print all sidebar Docs'); +// if (!this.layoutDoc._layout_showSidebar) this.toggleSidebar(); +// const docs = doc instanceof Doc ? [doc] : doc; +// docs.forEach(doc => { +// if (doc.lat !== undefined && doc.lng !== undefined) { +// const existingMarker = this.allMapMarkers.find(marker => marker.lat === doc.lat && marker.lng === doc.lng); +// if (existingMarker) { +// Doc.AddDocToList(existingMarker, 'data', doc); +// } else { +// const marker = Docs.Create.PushpinDocument(NumCast(doc.lat), NumCast(doc.lng), false, [doc], {}); +// this.addDocument(marker, this.annotationKey); +// } +// } +// }); //add to annotation list + +// return this.addDocument(doc, sidebarKey); // add to sidebar list +// }; + +// /** +// * Removing documents from the sidebar +// * @param doc +// * @param sidebarKey +// * @returns +// */ +// sidebarRemoveDocument = (doc: Doc | Doc[], sidebarKey?: string) => { +// if (this.layoutDoc._layout_showSidebar) this.toggleSidebar(); +// const docs = doc instanceof Doc ? [doc] : doc; +// return this.removeDocument(doc, sidebarKey); +// }; + +// /** +// * Toggle sidebar onclick the tiny comment button on the top right corner +// * @param e +// */ +// sidebarBtnDown = (e: React.PointerEvent) => { +// setupMoveUpEvents( +// this, +// e, +// (e, down, delta) => +// runInAction(() => { +// const localDelta = this._props +// .ScreenToLocalTransform() +// .scale(this._props.NativeDimScaling?.() || 1) +// .transformDirection(delta[0], delta[1]); +// const fullWidth = NumCast(this.layoutDoc._width); +// const mapWidth = fullWidth - this.sidebarWidth(); +// if (this.sidebarWidth() + localDelta[0] > 0) { +// this._showSidebar = true; +// this.layoutDoc._width = fullWidth + localDelta[0]; +// this.layoutDoc._layout_sidebarWidthPercent = ((100 * (this.sidebarWidth() + localDelta[0])) / (fullWidth + localDelta[0])).toString() + '%'; +// } else { +// this._showSidebar = false; +// this.layoutDoc._width = mapWidth; +// this.layoutDoc._layout_sidebarWidthPercent = '0%'; +// } +// return false; +// }), +// emptyFunction, +// () => UndoManager.RunInBatch(this.toggleSidebar, 'toggle sidebar map') +// ); +// }; + +// sidebarWidth = () => (Number(this.layout_sidebarWidthPercent.substring(0, this.layout_sidebarWidthPercent.length - 1)) / 100) * this._props.PanelWidth(); +// @computed get layout_sidebarWidthPercent() { +// return StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%'); +// } +// @computed get sidebarColor() { +// return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this._props.fieldKey + '_backgroundColor'], '#e4e4e4')); +// } + +// /** +// * function that reads the place inputed from searchbox, then zoom in on the location that's been autocompleted; +// * add a customized temporary marker on the map +// */ +// @action +// private handlePlaceChanged = () => { +// const place = this.searchBox.getPlace(); + +// if (!place.geometry || !place.geometry.location) { +// // user entered the name of a place that wasn't suggested & pressed the enter key, or place details request failed +// window.alert("No details available for input: '" + place.name + "'"); +// return; +// } + +// // zoom in on the location of the search result +// if (place.geometry.viewport) { +// this._map.fitBounds(place.geometry.viewport); +// } else { +// this._map.setCenter(place.geometry.location); +// this._map.setZoom(17); +// } + +// // customize icon => customized icon for the nature of the location selected +// const icon = { +// url: place.icon as string, +// size: new google.maps.Size(71, 71), +// origin: new google.maps.Point(0, 0), +// anchor: new google.maps.Point(17, 34), +// scaledSize: new google.maps.Size(25, 25), +// }; + +// // put temporary cutomized marker on searched location +// this.searchMarkers.forEach(marker => { +// marker.setMap(null); +// }); +// this.searchMarkers = []; +// this.searchMarkers.push( +// new window.google.maps.Marker({ +// map: this._map, +// icon, +// title: place.name, +// position: place.geometry.location, +// }) +// ); +// }; + +// /** +// * Handles toggle of sidebar on click the little comment button +// */ +// @computed get sidebarHandle() { +// return ( +// <div +// className="MapBox2-overlayButton-sidebar" +// key="sidebar" +// title="Toggle Sidebar" +// style={{ +// display: !this._props.isContentActive() ? 'none' : undefined, +// top: StrCast(this.layoutDoc._layout_showTitle) === 'title' ? 20 : 5, +// backgroundColor: this.SidebarShown ? Colors.MEDIUM_BLUE : Colors.BLACK, +// }} +// onPointerDown={this.sidebarBtnDown}> +// <FontAwesomeIcon style={{ color: Colors.WHITE }} icon={'comment-alt'} size="sm" /> +// </div> +// ); +// } + +// // TODO: Adding highlight box layer to Maps +// @action +// toggleSidebar = () => { +// //1.2 * w * ? = .2 * w .2/1.2 +// const prevWidth = this.sidebarWidth(); +// this.layoutDoc._layout_showSidebar = (this.layoutDoc._layout_sidebarWidthPercent = StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%') === '0%' ? `${(100 * 0.2) / 1.2}%` : '0%') !== '0%'; +// this.layoutDoc._width = this.layoutDoc._layout_showSidebar ? NumCast(this.layoutDoc._width) * 1.2 : Math.max(20, NumCast(this.layoutDoc._width) - prevWidth); +// }; + +// sidebarDown = (e: React.PointerEvent) => { +// setupMoveUpEvents(this, e, this.sidebarMove, emptyFunction, () => setTimeout(this.toggleSidebar), true); +// }; +// sidebarMove = (e: PointerEvent, down: number[], delta: number[]) => { +// const bounds = this._ref.current!.getBoundingClientRect(); +// this.layoutDoc._layout_sidebarWidthPercent = '' + 100 * Math.max(0, 1 - (e.clientX - bounds.left) / bounds.width) + '%'; +// this.layoutDoc._layout_showSidebar = this.layoutDoc._layout_sidebarWidthPercent !== '0%'; +// e.preventDefault(); +// return false; +// }; + +// setPreviewCursor = (func?: (x: number, y: number, drag: boolean, hide: boolean) => void) => (this._setPreviewCursor = func); + +// addDocumentWrapper = (doc: Doc | Doc[], annotationKey?: string) => { +// return this.addDocument(doc, annotationKey); +// }; + +// pointerEvents = () => { +// return this._props.isContentActive() === false ? 'none' : this._props.isContentActive() && this._props.pointerEvents?.() !== 'none' && !MarqueeOptionsMenu.Instance.isShown() ? 'all' : SnappingManager.IsDragging ? undefined : 'none'; +// }; +// @computed get annotationLayer() { +// return ( +// <div className="MapBox2-annotationLayer" style={{ height: Doc.NativeHeight(this.Document) || undefined }} ref={this._annotationLayer}> +// {this.inlineTextAnnotations +// .sort((a, b) => NumCast(a.y) - NumCast(b.y)) +// .map(anno => ( +// <Annotation key={`${anno[Id]}-annotation`} {...this._props} fieldKey={this.annotationKey} pointerEvents={this.pointerEvents} showInfo={this.showInfo} dataDoc={this.dataDoc} anno={anno} /> +// ))} +// </div> +// ); +// } + +// getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => AnchorMenu.Instance?.GetAnchor(this._savedAnnotations, addAsAnnotation) ?? this.Document; + +// /** +// * render contents in allMapMarkers (e.g. images with exifData) into google maps as map marker +// * @returns +// */ +// private renderMarkers = () => { +// return this.allMapMarkers.map(place => ( +// <Marker key={place[Id]} position={{ lat: NumCast(place.lat), lng: NumCast(place.lng) }} onLoad={marker => this.markerLoadHandler(marker, place)} onClick={(e: google.maps.MapMouseEvent) => this.markerClickHandler(e, place)} /> +// )); +// }; + +// // TODO: auto center on select a document in the sidebar +// private handleMapCenter = (map: google.maps.Map) => { +// // console.log("print the selected views in selectionManager:") +// // if (SelectionManager.Views.lastElement()) { +// // console.log(SelectionManager.Views.lastElement()); +// // } +// }; + +// panelWidth = () => this._props.PanelWidth() / (this._props.NativeDimScaling?.() || 1) - this.sidebarWidth(); +// panelHeight = () => this._props.PanelHeight() / (this._props.NativeDimScaling?.() || 1); +// scrollXf = () => this.ScreenToLocalTransform().translate(0, NumCast(this.layoutDoc._layout_scrollTop)); +// transparentFilter = () => [...this._props.childFilters(), Utils.TransparentBackgroundFilter]; +// opaqueFilter = () => [...this._props.childFilters(), Utils.OpaqueBackgroundFilter]; +// infoWidth = () => this._props.PanelWidth() / 5; +// infoHeight = () => this._props.PanelHeight() / 5; +// anchorMenuClick = () => this._sidebarRef.current?.anchorMenuClick; +// savedAnnotations = () => this._savedAnnotations; + +// get MicrosoftMaps() { +// return (window as any).Microsoft.Maps; +// } +// render() { +// const renderAnnotations = (childFilters?: () => string[]) => null; +// return ( +// <div className="MapBox2" ref={this._ref}> +// <div +// className="MapBox2-wrapper" +// onWheel={e => e.stopPropagation()} +// onPointerDown={async e => { +// e.button === 0 && !e.ctrlKey && e.stopPropagation(); +// }} +// style={{ width: `calc(100% - ${this.layout_sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}> +// <div style={{ mixBlendMode: 'multiply' }}>{renderAnnotations(this.transparentFilter)}</div> +// {renderAnnotations(this.opaqueFilter)} +// {SnappingManager.IsDragging ? null : renderAnnotations()} +// {this.annotationLayer} + +// <div> +// <GoogleMap mapContainerStyle={mapContainerStyle} onZoomChanged={this.zoomChanged} onCenterChanged={this.centered} onLoad={this.loadHandler} options={mapOptions}> +// <Autocomplete onLoad={this.setSearchBox} onPlaceChanged={this.handlePlaceChanged}> +// <input className="MapBox2-input" ref={this.inputRef} type="text" onKeyDown={e => e.stopPropagation()} placeholder="Enter location" /> +// </Autocomplete> + +// {this.renderMarkers()} +// {this.allMapMarkers +// .filter(marker => marker.infoWindowOpen) +// .map(marker => ( +// <MapBoxInfoWindow +// key={marker[Id]} +// {...this._props} +// setContentView={emptyFunction} +// place={marker} +// markerMap={this.markerMap} +// PanelWidth={this.infoWidth} +// PanelHeight={this.infoHeight} +// moveDocument={this.moveDocument} +// isAnyChildContentActive={this.isAnyChildContentActive} +// whenChildContentsActiveChanged={this.whenChildContentsActiveChanged} +// /> +// ))} +// {/* {this.handleMapCenter(this._map)} */} +// </GoogleMap> +// </div> +// </div> +// {/* </LoadScript > */} +// <div className="MapBox2-sidebar" style={{ width: `${this.layout_sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}> +// <SidebarAnnos +// ref={this._sidebarRef} +// {...this._props} +// fieldKey={this.fieldKey} +// Document={this.Document} +// layoutDoc={this.layoutDoc} +// dataDoc={this.dataDoc} +// usePanelWidth={true} +// showSidebar={this.SidebarShown} +// nativeWidth={NumCast(this.layoutDoc._nativeWidth)} +// whenChildContentsActiveChanged={this.whenChildContentsActiveChanged} +// PanelWidth={this.sidebarWidth} +// sidebarAddDocument={this.sidebarAddDocument} +// moveDocument={this.moveDocument} +// removeDocument={this.sidebarRemoveDocument} +// /> +// </div> +// {this.sidebarHandle} +// </div> +// ); +// } +// } diff --git a/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx b/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx index 66c47d131..6ccbbbe1c 100644 --- a/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx +++ b/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx @@ -1,96 +1,94 @@ -import { InfoWindow } from '@react-google-maps/api'; -import { action } from 'mobx'; -import { observer } from 'mobx-react'; -import * as React from 'react'; -import { Doc } from '../../../../fields/Doc'; -import { Id } from '../../../../fields/FieldSymbols'; -import { emptyFunction, returnAll, returnEmptyFilter, returnFalse, returnOne, returnTrue, returnZero, setupMoveUpEvents } from '../../../../Utils'; -import { Docs } from '../../../documents/Documents'; -import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes'; -import { CollectionNoteTakingView } from '../../collections/CollectionNoteTakingView'; -import { CollectionStackingView } from '../../collections/CollectionStackingView'; -import { ViewBoxAnnotatableProps } from '../../DocComponent'; -import { FieldViewProps } from '../FieldView'; -import { FormattedTextBox } from '../formattedText/FormattedTextBox'; -import './MapBox.scss'; +// import { InfoWindow } from '@react-google-maps/api'; +// import { action } from 'mobx'; +// import { observer } from 'mobx-react'; +// import * as React from 'react'; +// import { Doc } from '../../../../fields/Doc'; +// import { Id } from '../../../../fields/FieldSymbols'; +// import { emptyFunction, returnAll, returnEmptyFilter, returnFalse, returnOne, returnTrue, returnZero, setupMoveUpEvents } from '../../../../Utils'; +// import { Docs } from '../../../documents/Documents'; +// import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes'; +// import { CollectionNoteTakingView } from '../../collections/CollectionNoteTakingView'; +// import { CollectionStackingView } from '../../collections/CollectionStackingView'; +// import { FieldViewProps } from '../FieldView'; +// import { FormattedTextBox } from '../formattedText/FormattedTextBox'; +// import './MapBox.scss'; -interface MapBoxInfoWindowProps { - place: Doc; - renderDepth: number; - markerMap: { [id: string]: google.maps.Marker }; - isAnyChildContentActive: () => boolean; -} -@observer -export class MapBoxInfoWindow extends React.Component<MapBoxInfoWindowProps & ViewBoxAnnotatableProps & FieldViewProps> { - @action - private handleInfoWindowClose = () => { - if (this.props.place.infoWindowOpen) { - this.props.place.infoWindowOpen = false; - } - this.props.place.infoWindowOpen = false; - }; +// interface MapBoxInfoWindowProps extends FieldViewProps { +// place: Doc; +// renderDepth: number; +// markerMap: { [id: string]: google.maps.Marker }; +// isAnyChildContentActive: () => boolean; +// } +// @observer +// export class MapBoxInfoWindow extends React.Component<MapBoxInfoWindowProps> { +// @action +// private handleInfoWindowClose = () => { +// if (this.props.place.infoWindowOpen) { +// this.props.place.infoWindowOpen = false; +// } +// this.props.place.infoWindowOpen = false; +// }; - addNoteClick = (e: React.PointerEvent) => { - setupMoveUpEvents(this, e, returnFalse, emptyFunction, e => { - const newBox = Docs.Create.TextDocument('Note', { _layout_autoHeight: true }); - FormattedTextBox.SelectOnLoad = newBox[Id]; // track the new text box so we can give it a prop that tells it to focus itself when it's displayed - Doc.AddDocToList(this.props.place, 'data', newBox); - this._stack?.scrollToBottom(); - e.stopPropagation(); - e.preventDefault(); - }); - }; +// addNoteClick = (e: React.PointerEvent) => { +// setupMoveUpEvents(this, e, returnFalse, emptyFunction, e => { +// const newDoc = Docs.Create.TextDocument('Note', { _layout_autoHeight: true }); +// FormattedTextBox.SetSelectOnLoad(newDoc); // track the new text box so we can give it a prop that tells it to focus itself when it's displayed +// Doc.AddDocToList(this.props.place, 'data', newDoc); +// this._stack?.scrollToBottom(); +// e.stopPropagation(); +// e.preventDefault(); +// }); +// }; - _stack: CollectionStackingView | CollectionNoteTakingView | null | undefined; - childLayoutFitWidth = (doc: Doc) => doc.type === DocumentType.RTF; - addDoc = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((p, d) => p && Doc.AddDocToList(this.props.place, 'data', d), true as boolean); - removeDoc = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((p, d) => p && Doc.RemoveDocFromList(this.props.place, 'data', d), true as boolean); - render() { - return ( - <InfoWindow - // anchor={this.props.markerMap[this.props.place[Id]]} - onCloseClick={this.handleInfoWindowClose}> - <div className="mapbox-infowindow"> - <div style={{ width: this.props.PanelWidth(), height: this.props.PanelHeight() }}> - <CollectionStackingView - ref={r => (this._stack = r)} - {...this.props} - setContentView={emptyFunction} - Document={this.props.place} - DataDoc={undefined} - fieldKey="data" - NativeWidth={returnZero} - NativeHeight={returnZero} - childFilters={returnEmptyFilter} - setHeight={emptyFunction} - isAnnotationOverlay={false} - select={emptyFunction} - NativeDimScaling={returnOne} - isContentActive={returnTrue} - chromeHidden={true} - rootSelected={returnFalse} - childHideResizeHandles={returnTrue} - childHideDecorationTitle={returnTrue} - childLayoutFitWidth={this.childLayoutFitWidth} - // childDocumentsActive={returnFalse} - removeDocument={this.removeDoc} - addDocument={this.addDoc} - renderDepth={this.props.renderDepth + 1} - type_collection={CollectionViewType.Stacking} - pointerEvents={returnAll} - /> - </div> - <hr /> - <div - onPointerDown={this.addNoteClick} - onClick={e => { - e.stopPropagation(); - e.preventDefault(); - }}> - Add Note - </div> - </div> - </InfoWindow> - ); - } -} +// _stack: CollectionStackingView | CollectionNoteTakingView | null | undefined; +// childLayoutFitWidth = (doc: Doc) => doc.type === DocumentType.RTF; +// addDoc = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((p, d) => p && Doc.AddDocToList(this.props.place, 'data', d), true as boolean); +// removeDoc = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((p, d) => p && Doc.RemoveDocFromList(this.props.place, 'data', d), true as boolean); +// render() { +// return ( +// <InfoWindow +// // anchor={this.props.markerMap[this.props.place[Id]]} +// onCloseClick={this.handleInfoWindowClose}> +// <div className="mapbox-infowindow"> +// <div style={{ width: this.props.PanelWidth(), height: this.props.PanelHeight() }}> +// <CollectionStackingView +// ref={r => (this._stack = r)} +// {...this.props} +// setContentView={emptyFunction} +// Document={this.props.place} +// TemplateDataDocument={undefined} +// fieldKey="data" +// NativeWidth={returnZero} +// NativeHeight={returnZero} +// childFilters={returnEmptyFilter} +// setHeight={emptyFunction} +// isAnnotationOverlay={false} +// select={emptyFunction} +// NativeDimScaling={returnOne} +// isContentActive={returnTrue} +// chromeHidden={true} +// childHideResizeHandles={true} +// childHideDecorationTitle={true} +// childLayoutFitWidth={this.childLayoutFitWidth} +// // childDocumentsActive={returnFalse} +// removeDocument={this.removeDoc} +// addDocument={this.addDoc} +// renderDepth={this.props.renderDepth + 1} +// type_collection={CollectionViewType.Stacking} +// pointerEvents={returnAll} +// /> +// </div> +// <hr /> +// <div +// onPointerDown={this.addNoteClick} +// onClick={e => { +// e.stopPropagation(); +// e.preventDefault(); +// }}> +// Add Note +// </div> +// </div> +// </InfoWindow> +// ); +// } +// } diff --git a/src/client/views/nodes/MapBox/MapPushpinBox.tsx b/src/client/views/nodes/MapBox/MapPushpinBox.tsx index 42bada0ef..fc5b4dd18 100644 --- a/src/client/views/nodes/MapBox/MapPushpinBox.tsx +++ b/src/client/views/nodes/MapBox/MapPushpinBox.tsx @@ -1,31 +1,27 @@ -import { observer } from 'mobx-react'; -// import { SettingsManager } from '../../../util/SettingsManager'; +import * as React from 'react'; import { ViewBoxBaseComponent } from '../../DocComponent'; import { FieldView, FieldViewProps } from '../FieldView'; -import React = require('react'); -import { computed } from 'mobx'; import { MapBox } from './MapBox'; /** * Map Pushpin doc class */ -@observer export class MapPushpinBox extends ViewBoxBaseComponent<FieldViewProps>() { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(MapPushpinBox, fieldKey); } componentDidMount() { - this.mapBoxView.addPushpin(this.rootDoc); + this.mapBoxView.addPushpin(this.Document); } componentWillUnmount() { - this.mapBoxView.deletePushpin(this.rootDoc); + this.mapBoxView.deletePushpin(this.Document); } - @computed get mapBoxView() { - return this.props.DocumentView?.()?.props.docViewPath().lastElement()?.ComponentView as MapBox; + get mapBoxView() { + return this.DocumentView?.()?.containerViewPath?.().lastElement()?.ComponentView as MapBox; } - @computed get mapBox() { - return this.props.DocumentView?.().props.docViewPath().lastElement()?.rootDoc; + get mapBox() { + return this.DocumentView?.().containerViewPath?.().lastElement()?.Document; } render() { diff --git a/src/client/views/nodes/MapBox/MapboxApiUtility.ts b/src/client/views/nodes/MapBox/MapboxApiUtility.ts new file mode 100644 index 000000000..592330ac2 --- /dev/null +++ b/src/client/views/nodes/MapBox/MapboxApiUtility.ts @@ -0,0 +1,139 @@ + +const MAPBOX_FORWARD_GEOCODE_BASE_URL = 'https://api.mapbox.com/geocoding/v5/mapbox.places/'; +const MAPBOX_REVERSE_GEOCODE_BASE_URL = 'https://api.mapbox.com/geocoding/v5/mapbox.places/'; +const MAPBOX_DIRECTIONS_BASE_URL = 'https://api.mapbox.com/directions/v5/mapbox'; +const MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoiemF1bHRhdmFuZ2FyIiwiYSI6ImNscHgwNDd1MDA3MXIydm92ODdianp6cGYifQ.WFAqbhwxtMHOWSPtu0l2uQ'; + +export type TransportationType = 'driving' | 'cycling' | 'walking'; + +export class MapboxApiUtility { + + static forwardGeocodeForFeatures = async (searchText: string) => { + try { + const url = MAPBOX_FORWARD_GEOCODE_BASE_URL + encodeURI(searchText) +'.json' +`?access_token=${MAPBOX_ACCESS_TOKEN}`; + const response = await fetch(url); + const data = await response.json(); + return data.features; + } catch (error: any){ + // TODO: handle error in better way + return null; + } + } + + static reverseGeocodeForFeatures = async (longitude: number, latitude: number) => { + try { + const url = MAPBOX_REVERSE_GEOCODE_BASE_URL + encodeURI(longitude.toString() + "," + latitude.toString()) + '.json' + + `?access_token=${MAPBOX_ACCESS_TOKEN}`; + const response = await fetch(url); + const data = await response.json(); + return data.features; + } catch (error: any){ + return null; + } + } + + static getDirections = async (origin: number[], destination: number[]): Promise<Record<TransportationType, any> | undefined> => { + try { + + const directionsPromises: Promise<any>[] = []; + const transportationTypes: TransportationType[] = ['driving', 'cycling', 'walking']; + + transportationTypes.forEach((type) => { + directionsPromises.push( + fetch( + `${MAPBOX_DIRECTIONS_BASE_URL}/${type}/${origin[0]},${origin[1]};${destination[0]},${destination[1]}?steps=true&geometries=geojson&access_token=${MAPBOX_ACCESS_TOKEN}` + ).then((response) => response.json()) + ); + }); + + const results = await Promise.all(directionsPromises); + + const routeInfoMap: Record<TransportationType, any> = { + 'driving': {}, + 'cycling': {}, + 'walking': {}, + }; + + transportationTypes.forEach((type, index) => { + const routeData = results[index].routes[0]; + if (routeData) { + const geometry = routeData.geometry; + const coordinates = geometry.coordinates; + + routeInfoMap[type] = { + duration: this.secondsToMinutesHours(routeData.duration), + distance: this.metersToMiles(routeData.distance), + coordinates: coordinates, + }; + } + }); + + return routeInfoMap; + + // return current route info, and the temporary route + + } catch (error: any){ + return undefined; + console.log("Error: ", error); + } + } + + private static secondsToMinutesHours = (seconds: number) => { + const hours = Math.floor(seconds / 3600); + const minutes = Math.floor((seconds % 3600) / 60).toFixed(2); + + if (hours === 0){ + return `${minutes} min` + } else { + return `${hours} hr ${minutes} min` + } + } + + private static metersToMiles = (meters: number) => { + return `${parseFloat((meters/1609.34).toFixed(2))} mi`; + } + +} + +// const drivingQuery = await fetch( +// `${MAPBOX_DIRECTIONS_BASE_URL}/driving/${origin[0]},${origin[1]};${destination[0]},${destination[1]}?steps=true&geometries=geojson&access_token=${MAPBOX_ACCESS_TOKEN}`); + +// const cyclingQuery = await fetch( +// `${MAPBOX_DIRECTIONS_BASE_URL}/cycling/${origin[0]},${origin[1]};${destination[0]},${destination[1]}?steps=true&geometries=geojson&access_token=${MAPBOX_ACCESS_TOKEN}`); + +// const walkingQuery = await fetch( +// `${MAPBOX_DIRECTIONS_BASE_URL}/walking/${origin[0]},${origin[1]};${destination[0]},${destination[1]}?steps=true&geometries=geojson&access_token=${MAPBOX_ACCESS_TOKEN}`); + +// const drivingJson = await drivingQuery.json(); +// const cyclingJson = await cyclingQuery.json(); +// const walkingJson = await walkingQuery.json(); + +// console.log("Driving: ", drivingJson); +// console.log("Cycling: ", cyclingJson); +// console.log("Waling: ", walkingJson); + +// const routeMap = { +// 'driving': drivingJson.routes[0], +// 'cycling': cyclingJson.routes[0], +// 'walking': walkingJson.routes[0] +// } + +// const routeInfoMap: Record<TransportationType, any> = { +// 'driving': {}, +// 'cycling': {}, +// 'walking': {}, +// }; + +// Object.entries(routeMap).forEach(([key, routeData]) => { +// const transportationTypeKey = key as TransportationType; +// const geometry = routeData.geometry; +// const coordinates = geometry.coordinates; + +// console.log(coordinates); + +// routeInfoMap[transportationTypeKey] = { +// duration: this.secondsToMinutesHours(routeData.duration), +// distance: this.metersToMiles(routeData.distance), +// coordinates: coordinates +// } +// })
\ No newline at end of file diff --git a/src/client/views/nodes/MapBox/MarkerIcons.tsx b/src/client/views/nodes/MapBox/MarkerIcons.tsx new file mode 100644 index 000000000..a580fcaa0 --- /dev/null +++ b/src/client/views/nodes/MapBox/MarkerIcons.tsx @@ -0,0 +1,103 @@ +import { IconProp } from '@fortawesome/fontawesome-svg-core'; +import { faShopify } from '@fortawesome/free-brands-svg-icons'; +import { + faBasketball, + faBicycle, + faBowlFood, + faBus, + faCameraRetro, + faCar, + faCartShopping, + faFilm, + faFootball, + faFutbol, + faHockeyPuck, + faHospital, + faHotel, + faHouse, + faLandmark, + faLocationDot, + faLocationPin, + faMapPin, + faMasksTheater, + faMugSaucer, + faPersonHiking, + faPlane, + faSchool, + faShirt, + faShop, + faSquareParking, + faStar, + faTrainSubway, + faTree, + faUtensils, + faVolleyball, +} from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import * as React from 'react'; + +export class MarkerIcons { + // static getMapboxIcon = (color: string) => { + // return ( + // <svg xmlns="http://www.w3.org/2000/svg" id="marker" data-name="marker" width="20" height="48" viewBox="0 0 20 35"> + // <g id="mapbox-marker-icon"> + // <g id="icon"> + // <ellipse id="shadow" cx="10" cy="27" rx="9" ry="5" fill="#c4c4c4" opacity="0.3" /> + // <g id="mask" opacity="0.3"> + // <g id="group"> + // <path id="shadow-2" data-name="shadow" fill="#bfbfbf" d="M10,32c5,0,9-2.2,9-5s-4-5-9-5-9,2.2-9,5S5,32,10,32Z" fillRule="evenodd"/> + // </g> + // </g> + // <path id="color" fill={color} strokeWidth="0.5" d="M19.25,10.4a13.0663,13.0663,0,0,1-1.4607,5.2235,41.5281,41.5281,0,0,1-3.2459,5.5483c-1.1829,1.7369-2.3662,3.2784-3.2541,4.3859-.4438.5536-.8135.9984-1.0721,1.3046-.0844.1-.157.1852-.2164.2545-.06-.07-.1325-.1564-.2173-.2578-.2587-.3088-.6284-.7571-1.0723-1.3147-.8879-1.1154-2.0714-2.6664-3.2543-4.41a42.2677,42.2677,0,0,1-3.2463-5.5535A12.978,12.978,0,0,1,.75,10.4,9.4659,9.4659,0,0,1,10,.75,9.4659,9.4659,0,0,1,19.25,10.4Z"/> + // <path id="circle" fill="#fff" stroke='white' strokeWidth="0.5" d="M13.55,10A3.55,3.55,0,1,1,10,6.45,3.5484,3.5484,0,0,1,13.55,10Z"/> + // </g> + // </g> + // <rect width="20" height="48" fill="none"/> + // </svg> + // ) + // } + + static getFontAwesomeIcon(key: string, size: string, color?: string): JSX.Element { + const icon: IconProp = MarkerIcons.FAMarkerIconsMap[key]; + const iconProps: any = { icon }; + + if (color) { + iconProps.color = color; + } + + return <FontAwesomeIcon {...iconProps} size={size} />; + } + + static FAMarkerIconsMap: { [key: string]: IconProp } = { + MAP_PIN: faLocationDot, + RESTAURANT_ICON: faUtensils, + HOTEL_ICON: faHotel, + HOUSE_ICON: faHouse, + AIRPLANE_ICON: faPlane, + CAR_ICON: faCar, + BUS_ICON: faBus, + TRAIN_ICON: faTrainSubway, + BICYCLE_ICON: faBicycle, + PARKING_ICON: faSquareParking, + PHOTO_ICON: faCameraRetro, + CAFE_ICON: faMugSaucer, + STAR_ICON: faStar, + SHOPPING_CART_ICON: faCartShopping, + SHOPIFY_ICON: faShopify, + SHOP_ICON: faShop, + SHIRT_ICON: faShirt, + FOOD_ICON: faBowlFood, + LANDMARK_ICON: faLandmark, + HOSPITAL_ICON: faHospital, + NATURE_ICON: faTree, + HIKING_ICON: faPersonHiking, + SOCCER_ICON: faFutbol, + VOLLEYBALL_ICON: faVolleyball, + BASKETBALL_ICON: faBasketball, + HOCKEY_ICON: faHockeyPuck, + FOOTBALL_ICON: faFootball, + SCHOOL_ICON: faSchool, + THEATER_ICON: faMasksTheater, + FILM_ICON: faFilm, + }; +} diff --git a/src/client/views/nodes/MapBox/icon_images/mapbox-marker-icon-20px-blue.png b/src/client/views/nodes/MapBox/icon_images/mapbox-marker-icon-20px-blue.png Binary files differnew file mode 100644 index 000000000..8b686e2aa --- /dev/null +++ b/src/client/views/nodes/MapBox/icon_images/mapbox-marker-icon-20px-blue.png diff --git a/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx b/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx new file mode 100644 index 000000000..8a5bd7ce6 --- /dev/null +++ b/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx @@ -0,0 +1,843 @@ +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Button, EditableText, IconButton, Type } from 'browndash-components'; +import { IReactionDisposer, ObservableMap, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx'; +import { observer } from 'mobx-react'; +import * as React from 'react'; +import { MapProvider, Map as MapboxMap } from 'react-map-gl'; +import { Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, setupMoveUpEvents } from '../../../../Utils'; +import { Doc, DocListCast, Field, LinkedTo, Opt } from '../../../../fields/Doc'; +import { DocCss, Highlight } from '../../../../fields/DocSymbols'; +import { DocCast, NumCast, StrCast } from '../../../../fields/Types'; +import { DocumentType } from '../../../documents/DocumentTypes'; +import { DocUtils, Docs } from '../../../documents/Documents'; +import { DocumentManager } from '../../../util/DocumentManager'; +import { DragManager } from '../../../util/DragManager'; +import { LinkManager } from '../../../util/LinkManager'; +import { SnappingManager } from '../../../util/SnappingManager'; +import { Transform } from '../../../util/Transform'; +import { UndoManager, undoable } from '../../../util/UndoManager'; +import { ViewBoxAnnotatableComponent } from '../../DocComponent'; +import { SidebarAnnos } from '../../SidebarAnnos'; +import { MarqueeOptionsMenu } from '../../collections/collectionFreeForm'; +import { Colors } from '../../global/globalEnums'; +import { DocumentView } from '../DocumentView'; +import { FocusViewOptions, FieldView, FieldViewProps } from '../FieldView'; +import { MapAnchorMenu } from '../MapBox/MapAnchorMenu'; +import { FormattedTextBox } from '../formattedText/FormattedTextBox'; +import { PinProps, PresBox } from '../trails'; +import './MapBox.scss'; + +/** + * MapBox architecture: + * Main component: MapBox.tsx + * Supporting Components: SidebarAnnos, CollectionStackingView + * + * MapBox is a node that extends the ViewBoxAnnotatableComponent. Similar to PDFBox and WebBox, it supports interaction between sidebar content and document content. + * The main body of MapBox uses Google Maps API to allow location retrieval, adding map markers, pan and zoom, and open street view. + * Dash Document architecture is integrated with Maps API: When drag and dropping documents with ExifData (gps Latitude and Longitude information) available, + * sidebarAddDocument function checks if the document contains lat & lng information, if it does, then the document is added to both the sidebar and the infowindow (a pop up corresponding to a map marker--pin on map). + * The lat and lng field of the document is filled when importing (spec see ConvertDMSToDD method and processFileUpload method in Documents.ts). + * A map marker is considered a document that contains a collection with stacking view of documents, it has a lat, lng location, which is passed to Maps API's custom marker (red pin) to be rendered on the google maps + */ + +const mapboxApiKey = 'pk.eyJ1IjoiemF1bHRhdmFuZ2FyIiwiYSI6ImNsbnc2eHJpbTA1ZTUyam85aGx4Z2FhbGwifQ.2Kqw9mk-9wAAg9kmHmKzcg'; +const bingApiKey = process.env.BING_MAPS; // if you're running local, get a Bing Maps api key here: https://www.bingmapsportal.com/ and then add it to the .env file in the Dash-Web root directory as: _CLIENT_BING_MAPS=<your apikey> + +/** + * Consider integrating later: allows for drawing, circling, making shapes on map + */ +// const drawingManager = new window.google.maps.drawing.DrawingManager({ +// drawingControl: true, +// drawingControlOptions: { +// position: google.maps.ControlPosition.TOP_RIGHT, +// drawingModes: [ +// google.maps.drawing.OverlayType.MARKER, +// // currently we are not supporting the following drawing mode on map, a thought for future development +// google.maps.drawing.OverlayType.CIRCLE, +// google.maps.drawing.OverlayType.POLYLINE, +// ], +// }, +// }); + +@observer +export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>() { + public static LayoutString(fieldKey: string) { + return FieldView.LayoutString(MapBoxContainer, fieldKey); + } + private _dragRef = React.createRef<HTMLDivElement>(); + private _sidebarRef = React.createRef<SidebarAnnos>(); + private _ref: React.RefObject<HTMLDivElement> = React.createRef(); + private _disposers: { [key: string]: IReactionDisposer } = {}; + private _setPreviewCursor: undefined | ((x: number, y: number, drag: boolean, hide: boolean, doc: Opt<Doc>) => void); + + constructor(props: FieldViewProps) { + super(props); + makeObservable(this); + } + + @observable private _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>(); + @computed get allSidebarDocs() { + return DocListCast(this.dataDoc[this.SidebarKey]); + } + // this list contains pushpins and configs + @computed get allAnnotations() { + return DocListCast(this.dataDoc[this.annotationKey]); + } + @computed get allPushpins() { + return this.allAnnotations.filter(anno => anno.type === DocumentType.PUSHPIN); + } + @computed get SidebarShown() { + return this.layoutDoc._layout_showSidebar ? true : false; + } + @computed get sidebarWidthPercent() { + return StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%'); + } + @computed get sidebarColor() { + return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this._props.fieldKey + '_backgroundColor'], '#e4e4e4')); + } + @computed get SidebarKey() { + return this.fieldKey + '_sidebar'; + } + + componentDidMount() { + this._unmounting = false; + this._props.setContentViewBox?.(this); + } + + _unmounting = false; + componentWillUnmount(): void { + this._unmounting = true; + this.deselectPin(); + this._rerenderTimeout && clearTimeout(this._rerenderTimeout); + Object.keys(this._disposers).forEach(key => this._disposers[key]?.()); + } + + /** + * Called when dragging documents into map sidebar or directly into infowindow; to create a map marker, ref to MapMarkerDocument in Documents.ts + * @param doc + * @param sidebarKey + * @returns + */ + sidebarAddDocument = (doc: Doc | Doc[], sidebarKey?: string) => { + if (!this.layoutDoc._layout_showSidebar) this.toggleSidebar(); + const docs = doc instanceof Doc ? [doc] : doc; + docs.forEach(doc => { + let existingPin = this.allPushpins.find(pin => pin.latitude === doc.latitude && pin.longitude === doc.longitude) ?? this.selectedPin; + if (doc.latitude !== undefined && doc.longitude !== undefined && !existingPin) { + existingPin = this.createPushpin(NumCast(doc.latitude), NumCast(doc.longitude), StrCast(doc.map)); + } + if (existingPin) { + setTimeout(() => { + // we use a timeout in case this is called from the sidebar which may have just added a link that hasn't made its way into th elink manager yet + if (!LinkManager.Instance.getAllRelatedLinks(doc).some(link => DocCast(link.link_anchor_1)?.mapPin === existingPin || DocCast(link.link_anchor_2)?.mapPin === existingPin)) { + const anchor = this.getAnchor(true, undefined, existingPin); + anchor && DocUtils.MakeLink(anchor, doc, { link_relationship: 'link to map location' }); + doc.latitude = existingPin?.latitude; + doc.longitude = existingPin?.longitude; + } + }); + } + }); //add to annotation list + + return this.addDocument(doc, sidebarKey); // add to sidebar list + }; + + removeMapDocument = (doc: Doc | Doc[], annotationKey?: string) => { + const docs = doc instanceof Doc ? [doc] : doc; + this.allAnnotations.filter(anno => docs.includes(DocCast(anno.mapPin))).forEach(anno => (anno.mapPin = undefined)); + return this.removeDocument(doc, annotationKey, undefined); + }; + + /** + * Removing documents from the sidebar + * @param doc + * @param sidebarKey + * @returns + */ + sidebarRemoveDocument = (doc: Doc | Doc[], sidebarKey?: string) => this.removeMapDocument(doc, sidebarKey); + + /** + * Toggle sidebar onclick the tiny comment button on the top right corner + * @param e + */ + sidebarBtnDown = (e: React.PointerEvent) => { + setupMoveUpEvents( + this, + e, + (e, down, delta) => + runInAction(() => { + const localDelta = this._props + .ScreenToLocalTransform() + .scale(this._props.NativeDimScaling?.() || 1) + .transformDirection(delta[0], delta[1]); + const fullWidth = NumCast(this.layoutDoc._width); + const mapWidth = fullWidth - this.sidebarWidth(); + if (this.sidebarWidth() + localDelta[0] > 0) { + this.layoutDoc._layout_showSidebar = true; + this.layoutDoc._width = fullWidth + localDelta[0]; + this.layoutDoc._layout_sidebarWidthPercent = ((100 * (this.sidebarWidth() + localDelta[0])) / (fullWidth + localDelta[0])).toString() + '%'; + } else { + this.layoutDoc._layout_showSidebar = false; + this.layoutDoc._width = mapWidth; + this.layoutDoc._layout_sidebarWidthPercent = '0%'; + } + return false; + }), + emptyFunction, + () => UndoManager.RunInBatch(this.toggleSidebar, 'toggle sidebar map') + ); + }; + sidebarWidth = () => (Number(this.sidebarWidthPercent.substring(0, this.sidebarWidthPercent.length - 1)) / 100) * this._props.PanelWidth(); + + /** + * Handles toggle of sidebar on click the little comment button + */ + @computed get sidebarHandle() { + return ( + <div + className="mapBox-overlayButton-sidebar" + key="sidebar" + title="Toggle Sidebar" + style={{ + display: !this._props.isContentActive() ? 'none' : undefined, + top: StrCast(this.Document._layout_showTitle) === 'title' ? 20 : 5, + backgroundColor: this.SidebarShown ? Colors.MEDIUM_BLUE : Colors.BLACK, + }} + onPointerDown={this.sidebarBtnDown}> + <FontAwesomeIcon style={{ color: Colors.WHITE }} icon={'comment-alt'} size="sm" /> + </div> + ); + } + + // TODO: Adding highlight box layer to Maps + @action + toggleSidebar = () => { + const prevWidth = this.sidebarWidth(); + this.layoutDoc._layout_showSidebar = (this.layoutDoc._layout_sidebarWidthPercent = StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%') === '0%' ? `${(100 * 0.2) / 1.2}%` : '0%') !== '0%'; + this.layoutDoc._width = this.layoutDoc._layout_showSidebar ? NumCast(this.layoutDoc._width) * 1.2 : Math.max(20, NumCast(this.layoutDoc._width) - prevWidth); + }; + + startAnchorDrag = (e: PointerEvent, ele: HTMLElement) => { + e.preventDefault(); + e.stopPropagation(); + + const sourceAnchorCreator = action(() => { + const note = this.getAnchor(true); + if (note && this.selectedPin) { + note.latitude = this.selectedPin.latitude; + note.longitude = this.selectedPin.longitude; + note.map = this.selectedPin.map; + } + return note as Doc; + }); + + const targetCreator = (annotationOn: Doc | undefined) => { + const target = DocUtils.GetNewTextDoc('Note linked to ' + this.Document.title, 0, 0, 100, 100, undefined, annotationOn, 'yellow'); + FormattedTextBox.SetSelectOnLoad(target); + return target; + }; + const docView = this.DocumentView?.(); + docView && + DragManager.StartAnchorAnnoDrag([ele], new DragManager.AnchorAnnoDragData(docView, sourceAnchorCreator, targetCreator), e.pageX, e.pageY, { + dragComplete: e => { + if (!e.aborted && e.annoDragData && e.annoDragData.linkSourceDoc && e.annoDragData.dropDocument && e.linkDocument) { + e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this.Document; + e.annoDragData.linkSourceDoc.followLinkZoom = false; + } + }, + }); + }; + + createNoteAnnotation = () => { + const createFunc = undoable( + action(() => { + const note = this._sidebarRef.current?.anchorMenuClick(this.getAnchor(true), ['latitude', 'longitude', LinkedTo]); + if (note && this.selectedPin) { + note.latitude = this.selectedPin.latitude; + note.longitude = this.selectedPin.longitude; + note.map = this.selectedPin.map; + } + }), + 'create note annotation' + ); + if (!this.layoutDoc.layout_showSidebar) { + this.toggleSidebar(); + setTimeout(createFunc); + } else createFunc(); + }; + sidebarDown = (e: React.PointerEvent) => { + setupMoveUpEvents(this, e, this.sidebarMove, emptyFunction, () => setTimeout(this.toggleSidebar), true); + }; + sidebarMove = (e: PointerEvent, down: number[], delta: number[]) => { + const bounds = this._ref.current!.getBoundingClientRect(); + this.layoutDoc._layout_sidebarWidthPercent = '' + 100 * Math.max(0, 1 - (e.clientX - bounds.left) / bounds.width) + '%'; + this.layoutDoc._layout_showSidebar = this.layoutDoc._layout_sidebarWidthPercent !== '0%'; + e.preventDefault(); + return false; + }; + + setPreviewCursor = (func?: (x: number, y: number, drag: boolean, hide: boolean, doc: Opt<Doc>) => void) => (this._setPreviewCursor = func); + + addDocumentWrapper = (doc: Doc | Doc[], annotationKey?: string) => this.addDocument(doc, annotationKey); + + pointerEvents = () => (this._props.isContentActive() && !MarqueeOptionsMenu.Instance.isShown() ? 'all' : 'none'); + + panelWidth = () => this._props.PanelWidth() / (this._props.NativeDimScaling?.() || 1) - this.sidebarWidth(); + panelHeight = () => this._props.PanelHeight() / (this._props.NativeDimScaling?.() || 1); + scrollXf = () => this.ScreenToLocalBoxXf().translate(0, NumCast(this.layoutDoc._layout_scrollTop)); + transparentFilter = () => [...this._props.childFilters(), Utils.TransparentBackgroundFilter]; + opaqueFilter = () => [...this._props.childFilters(), Utils.OpaqueBackgroundFilter]; + infoWidth = () => this._props.PanelWidth() / 5; + infoHeight = () => this._props.PanelHeight() / 5; + anchorMenuClick = () => this._sidebarRef.current?.anchorMenuClick; + savedAnnotations = () => this._savedAnnotations; + + _bingSearchManager: any; + _bingMap: any; + get MicrosoftMaps() { + return (window as any).Microsoft.Maps; + } + // uses Bing Search to retrieve lat/lng for a location. eg., + // const results = this.geocodeQuery(map.map, 'Philadelphia, PA'); + // to move the map to that location: + // const location = await this.geocodeQuery(this._bingMap, 'Philadelphia, PA'); + // this._bingMap.current.setView({ + // mapTypeId: this.MicrosoftMaps.MapTypeId.aerial, + // center: new this.MicrosoftMaps.Location(loc.latitude, loc.longitude), + // }); + // + bingGeocode = (map: any, query: string) => { + return new Promise<{ latitude: number; longitude: number }>((res, reject) => { + //If search manager is not defined, load the search module. + if (!this._bingSearchManager) { + //Create an instance of the search manager and call the geocodeQuery function again. + this.MicrosoftMaps.loadModule('Microsoft.Maps.Search', () => { + this._bingSearchManager = new this.MicrosoftMaps.Search.SearchManager(map.current); + res(this.bingGeocode(map, query)); + }); + } else { + this._bingSearchManager.geocode({ + where: query, + callback: action((r: any) => res(r.results[0].location)), + errorCallback: (e: any) => reject(), + }); + } + }); + }; + + @observable + bingSearchBarContents: any = this.Document.map; // For Bing Maps: The contents of the Bing search bar (string) + + geoDataRequestOptions = { + entityType: 'PopulatedPlace', + }; + + // incrementer: number = 0; + /* + * Creates Pushpin doc and adds it to the list of annotations + */ + @action + createPushpin = undoable((latitude: number, longitude: number, map?: string) => { + // Stores the pushpin as a MapMarkerDocument + const pushpin = Docs.Create.PushpinDocument( + NumCast(latitude), + NumCast(longitude), + false, + [], + { title: map ?? `lat=${latitude},lng=${longitude}`, map: map } + // ,'pushpinIDamongus'+ this.incrementer++ + ); + this.addDocument(pushpin, this.annotationKey); + return pushpin; + // mapMarker.infoWindowOpen = true; + }, 'createpin'); + + // The pin that is selected + @observable selectedPin: Doc | undefined = undefined; + + @action + deselectPin = () => { + if (this.selectedPin) { + // Removes filter + Doc.setDocFilter(this.Document, 'latitude', this.selectedPin.latitude, 'remove'); + Doc.setDocFilter(this.Document, 'longitude', this.selectedPin.longitude, 'remove'); + Doc.setDocFilter(this.Document, LinkedTo, `mapPin=${Field.toScriptString(DocCast(this.selectedPin))}`, 'remove'); + + const temp = this.selectedPin; + if (!this._unmounting) { + this._bingMap.current.entities.remove(this.map_docToPinMap.get(temp)); + } + const newpin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(temp.latitude, temp.longitude)); + this.MicrosoftMaps.Events.addHandler(newpin, 'click', (e: any) => this.pushpinClicked(temp as Doc)); + if (!this._unmounting) { + this._bingMap.current.entities.push(newpin); + } + this.map_docToPinMap.set(temp, newpin); + this.selectedPin = undefined; + this.bingSearchBarContents = this.Document.map; + } + }; + + getView = async (doc: Doc, options: FocusViewOptions) => { + if (this._sidebarRef?.current?.makeDocUnfiltered(doc) && !this.SidebarShown) { + this.toggleSidebar(); + options.didMove = true; + } + return new Promise<Opt<DocumentView>>(res => DocumentManager.Instance.AddViewRenderedCb(doc, dv => res(dv))); + }; + /* + * Pushpin onclick + */ + @action + pushpinClicked = (pinDoc: Doc) => { + this.deselectPin(); + this.selectedPin = pinDoc; + this.bingSearchBarContents = pinDoc.map; + + // Doc.setDocFilter(this.Document, 'latitude', this.selectedPin.latitude, 'match'); + // Doc.setDocFilter(this.Document, 'longitude', this.selectedPin.longitude, 'match'); + Doc.setDocFilter(this.Document, LinkedTo, `mapPin=${Field.toScriptString(this.selectedPin)}`, 'check'); + + this.recolorPin(this.selectedPin, 'green'); + + MapAnchorMenu.Instance.Delete = this.deleteSelectedPin; + MapAnchorMenu.Instance.Center = this.centerOnSelectedPin; + MapAnchorMenu.Instance.OnClick = this.createNoteAnnotation; + MapAnchorMenu.Instance.StartDrag = this.startAnchorDrag; + + const point = this._bingMap.current.tryLocationToPixel(new this.MicrosoftMaps.Location(this.selectedPin.latitude, this.selectedPin.longitude)); + const x = point.x + (this._props.PanelWidth() - this.sidebarWidth()) / 2; + const y = point.y + this._props.PanelHeight() / 2 + 32; + const cpt = this.ScreenToLocalBoxXf().inverse().transformPoint(x, y); + MapAnchorMenu.Instance.jumpTo(cpt[0], cpt[1], true); + + document.addEventListener('pointerdown', this.tryHideMapAnchorMenu, true); + }; + + /** + * Map OnClick + */ + @action + mapOnClick = (e: { location: { latitude: any; longitude: any } }) => { + this._props.select(false); + this.deselectPin(); + }; + /* + * Updates values of layout doc to match the current map + */ + @action + mapRecentered = () => { + if ( + Math.abs(NumCast(this.dataDoc.latitude) - this._bingMap.current.getCenter().latitude) > 1e-7 || // + Math.abs(NumCast(this.dataDoc.longitude) - this._bingMap.current.getCenter().longitude) > 1e-7 + ) { + this.dataDoc.latitude = this._bingMap.current.getCenter().latitude; + this.dataDoc.longitude = this._bingMap.current.getCenter().longitude; + this.dataDoc.map = ''; + this.bingSearchBarContents = ''; + } + this.dataDoc.map_zoom = this._bingMap.current.getZoom(); + }; + /* + * Updates maptype + */ + @action + updateMapType = () => (this.dataDoc.map_type = this._bingMap.current.getMapTypeId()); + + /* + * For Bing Maps + * Called by search button's onClick + * Finds the geocode of the searched contents and sets location to that location + **/ + @action + bingSearch = () => { + return this.bingGeocode(this._bingMap, this.bingSearchBarContents).then(location => { + this.dataDoc.latitude = location.latitude; + this.dataDoc.longitude = location.longitude; + this.dataDoc.map_zoom = this._bingMap.current.getZoom(); + this.dataDoc.map = this.bingSearchBarContents; + }); + }; + + /* + * Returns doc w/ relevant info + */ + getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps, existingPin?: Doc) => { + /// this should use SELECTED pushpin for lat/long if there is a selection, otherwise CENTER + const anchor = Docs.Create.ConfigDocument({ + title: 'MapAnchor:' + this.Document.title, + text: StrCast(this.selectedPin?.map) || StrCast(this.Document.map) || 'map location', + config_latitude: NumCast((existingPin ?? this.selectedPin)?.latitude ?? this.dataDoc.latitude), + config_longitude: NumCast((existingPin ?? this.selectedPin)?.longitude ?? this.dataDoc.longitude), + config_map_zoom: NumCast(this.dataDoc.map_zoom), + config_map_type: StrCast(this.dataDoc.map_type), + config_map: StrCast((existingPin ?? this.selectedPin)?.map) || StrCast(this.dataDoc.map), + layout_unrendered: true, + mapPin: existingPin ?? this.selectedPin, + annotationOn: this.Document, + }); + if (anchor) { + if (!addAsAnnotation) anchor.backgroundColor = 'transparent'; + addAsAnnotation && this.addDocument(anchor); + PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), map: true } }, this.Document); + return anchor; + } + return this.Document; + }; + + map_docToPinMap = new Map<Doc, any>(); + map_pinHighlighted = new Map<Doc, boolean>(); + /* + * Input: pin doc + * Adds MicrosoftMaps Pushpin to the map (render) + */ + @action + addPushpin = (pin: Doc) => { + const pushPin = pin.infoWindowOpen + ? new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(pin.latitude, pin.longitude), {}) + : new this.MicrosoftMaps.Pushpin( + new this.MicrosoftMaps.Location(pin.latitude, pin.longitude) + // {icon: 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/24/Map-Marker-Marker-Outside-Chartreuse-icon.png'} + ); + + this._bingMap.current.entities.push(pushPin); + + this.MicrosoftMaps.Events.addHandler(pushPin, 'click', (e: any) => this.pushpinClicked(pin)); + // this.MicrosoftMaps.Events.addHandler(pushPin, 'dblclick', (e: any) => this.pushpinDblClicked(pushPin, pin)); + this.map_docToPinMap.set(pin, pushPin); + }; + + /* + * Input: pin doc + * Removes pin from annotations + */ + @action + removePushpin = (pinDoc: Doc) => this.removeMapDocument(pinDoc, this.annotationKey); + + /* + * Removes pushpin from map render + */ + deletePushpin = (pinDoc: Doc) => { + if (!this._unmounting) { + this._bingMap.current.entities.remove(this.map_docToPinMap.get(pinDoc)); + } + this.map_docToPinMap.delete(pinDoc); + this.selectedPin = undefined; + }; + + @action + deleteSelectedPin = undoable(() => { + if (this.selectedPin) { + // Removes filter + Doc.setDocFilter(this.Document, 'latitude', this.selectedPin.latitude, 'remove'); + Doc.setDocFilter(this.Document, 'longitude', this.selectedPin.longitude, 'remove'); + Doc.setDocFilter(this.Document, LinkedTo, `mapPin=${Field.toScriptString(DocCast(this.selectedPin))}`, 'remove'); + + this.removePushpin(this.selectedPin); + } + MapAnchorMenu.Instance.fadeOut(true); + document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu, true); + }, 'delete pin'); + + tryHideMapAnchorMenu = (e: PointerEvent) => { + let target = document.elementFromPoint(e.x, e.y); + while (target) { + if (target === MapAnchorMenu.top.current) return; + target = target.parentElement; + } + e.stopPropagation(); + e.preventDefault(); + MapAnchorMenu.Instance.fadeOut(true); + document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu, true); + }; + + @action + centerOnSelectedPin = () => { + if (this.selectedPin) { + this.dataDoc.latitude = this.selectedPin.latitude; + this.dataDoc.longitude = this.selectedPin.longitude; + this.dataDoc.map = this.selectedPin.map ?? ''; + this.bingSearchBarContents = this.selectedPin.map; + } + MapAnchorMenu.Instance.fadeOut(true); + document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu); + }; + + /** + * View options for bing maps + */ + bingViewOptions = { + // center: { latitude: this.dataDoc.latitude ?? defaultCenter.lat, longitude: this.dataDoc.longitude ?? defaultCenter.lng }, + zoom: this.dataDoc.latitude ?? 10, + mapTypeId: 'grayscale', + }; + + /** + * Map options + */ + bingMapOptions = { + navigationBarMode: 'square', + backgroundColor: '#f1f3f4', + enableInertia: true, + supportedMapTypes: ['grayscale', 'canvasLight'], + disableMapTypeSelectorMouseOver: true, + // showScalebar:true + // disableRoadView:true, + // disableBirdseye:true + streetsideOptions: { + showProblemReporting: false, + showCurrentAddress: false, + }, + }; + + @action + searchbarOnEdit = (newText: string) => (this.bingSearchBarContents = newText); + + recolorPin = (pin: Doc, color?: string) => { + this._bingMap.current.entities.remove(this.map_docToPinMap.get(pin)); + this.map_docToPinMap.delete(pin); + const newpin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(pin.latitude, pin.longitude), color ? { color } : {}); + this.MicrosoftMaps.Events.addHandler(newpin, 'click', (e: any) => this.pushpinClicked(pin)); + this._bingMap.current.entities.push(newpin); + this.map_docToPinMap.set(pin, newpin); + }; + + /* + * Called when BingMap is first rendered + * Initializes starting values + */ + @observable _mapReady = false; + @action + bingMapReady = (map: any) => { + this._mapReady = true; + this._bingMap = map.map; + if (!this._bingMap.current) { + alert('NO Map!?'); + } + this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'click', this.mapOnClick); + this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'viewchangeend', undoable(this.mapRecentered, 'Map Layout Change')); + this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'maptypechanged', undoable(this.updateMapType, 'Map ViewType Change')); + + this._disposers.mapLocation = reaction( + () => this.Document.map, + mapLoc => (this.bingSearchBarContents = mapLoc), + { fireImmediately: true } + ); + this._disposers.highlight = reaction( + () => this.allAnnotations.map(doc => doc[Highlight]), + () => { + const allConfigPins = this.allAnnotations.map(doc => ({ doc, pushpin: DocCast(doc.mapPin) })).filter(pair => pair.pushpin); + allConfigPins.forEach(({ doc, pushpin }) => { + if (!pushpin[Highlight] && this.map_pinHighlighted.get(pushpin)) { + this.recolorPin(pushpin); + this.map_pinHighlighted.delete(pushpin); + } + }); + allConfigPins.forEach(({ doc, pushpin }) => { + if (doc[Highlight] && !this.map_pinHighlighted.get(pushpin)) { + this.recolorPin(pushpin, 'orange'); + this.map_pinHighlighted.set(pushpin, true); + } + }); + }, + { fireImmediately: true } + ); + + this._disposers.location = reaction( + () => ({ lat: this.Document.latitude, lng: this.Document.longitude, zoom: this.Document.map_zoom, mapType: this.Document.map_type }), + locationObject => { + // if (this._bingMap.current) + try { + locationObject?.zoom && + this._bingMap.current?.setView({ + mapTypeId: locationObject.mapType, + zoom: locationObject.zoom, + center: new this.MicrosoftMaps.Location(locationObject.lat, locationObject.lng), + }); + } catch (e) { + console.log(e); + } + }, + { fireImmediately: true } + ); + }; + + dragToggle = (e: React.PointerEvent) => { + let dragClone: HTMLDivElement | undefined; + + setupMoveUpEvents( + e, + e, + e => { + if (!dragClone) { + dragClone = this._dragRef.current?.cloneNode(true) as HTMLDivElement; + dragClone.style.position = 'absolute'; + dragClone.style.zIndex = '10000'; + DragManager.Root().appendChild(dragClone); + } + dragClone.style.transform = `translate(${e.clientX - 15}px, ${e.clientY - 15}px)`; + return false; + }, + e => { + if (!dragClone) return; + DragManager.Root().removeChild(dragClone); + let target = document.elementFromPoint(e.x, e.y); + while (target) { + if (target === this._ref.current) { + const cpt = this.ScreenToLocalBoxXf().transformPoint(e.clientX, e.clientY); + const x = cpt[0] - (this._props.PanelWidth() - this.sidebarWidth()) / 2; + const y = cpt[1] - 32 /* height of search bar */ - this._props.PanelHeight() / 2; + const location = this._bingMap.current.tryPixelToLocation(new this.MicrosoftMaps.Point(x, y)); + this.createPushpin(location.latitude, location.longitude); + break; + } + target = target.parentElement; + } + }, + e => { + const createPin = () => this.createPushpin(this.Document.latitude, this.Document.longitude, this.Document.map); + if (this.bingSearchBarContents) { + this.bingSearch().then(createPin); + } else createPin(); + } + ); + }; + + searchbarKeyDown = (e: any) => e.key === 'Enter' && this.bingSearch(); + + static _firstRender = true; + static _rerenderDelay = 500; + _rerenderTimeout: any; + render() { + // bcz: no idea what's going on here, but bings maps have some kind of bug + // such that we need to delay rendering a second map on startup until the first map is rendered. + this.Document[DocCss]; + if (MapBoxContainer._rerenderDelay) { + // prettier-ignore + this._rerenderTimeout = this._rerenderTimeout ?? + setTimeout(action(() => { + if ((window as any).Microsoft?.Maps?.Internal._WorkDispatcher) { + MapBoxContainer._rerenderDelay = 0; + } + this._rerenderTimeout = undefined; + this.Document[DocCss] = this.Document[DocCss] + 1; + }), MapBoxContainer._rerenderDelay); + return null; + } + + const renderAnnotations = (childFilters?: () => string[]) => null; + return ( + <div className="mapBox" ref={this._ref}> + <div + className="mapBox-wrapper" + onWheel={e => e.stopPropagation()} + onPointerDown={async e => { + e.button === 0 && !e.ctrlKey && e.stopPropagation(); + }} + style={{ width: `calc(100% - ${this.sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}> + <div style={{ mixBlendMode: 'multiply' }}>{renderAnnotations(this.transparentFilter)}</div> + {renderAnnotations(this.opaqueFilter)} + {SnappingManager.IsDragging ? null : renderAnnotations()} + + <div className="mapBox-searchbar"> + <EditableText + // editing + setVal={(newText: string | number) => typeof newText === 'string' && this.searchbarOnEdit(newText)} + onEnter={e => this.bingSearch()} + placeholder={this.bingSearchBarContents || 'enter city/zip/...'} + textAlign="center" + /> + <IconButton + icon={ + <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="magnifying-glass" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" color="#DFDFDF"> + <path + fill="currentColor" + d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"></path> + </svg> + } + onClick={this.bingSearch} + type={Type.TERT} + /> + <div style={{ width: 30, height: 30 }} ref={this._dragRef} onPointerDown={this.dragToggle}> + <Button tooltip="drag to place a pushpin" icon={<FontAwesomeIcon size={'lg'} icon={'bullseye'} />} /> + </div> + </div> + <MapProvider> + <MapboxMap id="mabox-map" mapStyle={`mapbox://styles/mapbox/streets-v9`} mapboxAccessToken={mapboxApiKey} /> + </MapProvider> + + {/* + <BingMapsReact + onMapReady={this.bingMapReady} // + bingMapsKey={bingApiKey} + height="100%" + mapOptions={this.bingMapOptions} + width="100%" + viewOptions={this.bingViewOptions} + /> */} + <div> + {!this._mapReady + ? null + : this.allAnnotations + .filter(anno => !anno.layout_unrendered) + .map((pushpin, i) => ( + <DocumentView + key={i} + {...this._props} + renderDepth={this._props.renderDepth + 1} + Document={pushpin} + PanelWidth={returnOne} + PanelHeight={returnOne} + NativeWidth={returnOne} + NativeHeight={returnOne} + onKey={undefined} + onDoubleClickScript={undefined} + onBrowseClickScript={undefined} + childFilters={returnEmptyFilter} + childFiltersByRanges={returnEmptyFilter} + searchFilterDocs={returnEmptyDoclist} + isDocumentActive={returnFalse} + isContentActive={returnFalse} + addDocTab={returnFalse} + ScreenToLocalTransform={Transform.Identity} + fitContentsToBox={undefined} + focus={returnOne} + /> + ))} + </div> + {/* <MapBoxInfoWindow + key={Docs.Create.MapMarkerDocument(NumCast(40), NumCast(40), false, [], {})[Id]} + {...OmitKeys(this._props, ['NativeWidth', 'NativeHeight', 'setContentView']).omit} + place={Docs.Create.MapMarkerDocument(NumCast(40), NumCast(40), false, [], {})} + markerMap={this.markerMap} + PanelWidth={this.infoWidth} + PanelHeight={this.infoHeight} + moveDocument={this.moveDocument} + isAnyChildContentActive={this.isAnyChildContentActive} + whenChildContentsActiveChanged={this.whenChildContentsActiveChanged} + /> */} + </div> + {/* </LoadScript > */} + <div className="mapBox-sidebar" style={{ width: `${this.sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}> + <SidebarAnnos + ref={this._sidebarRef} + {...this._props} + fieldKey={this.fieldKey} + Document={this.Document} + layoutDoc={this.layoutDoc} + dataDoc={this.dataDoc} + usePanelWidth={true} + showSidebar={this.SidebarShown} + nativeWidth={NumCast(this.layoutDoc._nativeWidth)} + whenChildContentsActiveChanged={this.whenChildContentsActiveChanged} + PanelWidth={this.sidebarWidth} + sidebarAddDocument={this.sidebarAddDocument} + moveDocument={this.moveDocument} + removeDocument={this.sidebarRemoveDocument} + /> + </div> + {this.sidebarHandle} + </div> + ); + } +} diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss index 8a68f9647..0f5e25a0c 100644 --- a/src/client/views/nodes/PDFBox.scss +++ b/src/client/views/nodes/PDFBox.scss @@ -1,4 +1,4 @@ -@import "../global/globalCssVariables.scss"; +@import '../global/globalCssVariables.module.scss'; .pdfBox, .pdfBox-interactive { @@ -38,7 +38,7 @@ box-shadow: $standard-box-shadow; transition: 0.2s; - &:hover{ + &:hover { filter: brightness(0.85); } } @@ -51,7 +51,8 @@ left: 5px; top: 5px; - .pdfBox-fwdBtn, .pdfBox-backBtn { + .pdfBox-fwdBtn, + .pdfBox-backBtn { background: #121721; height: 25px; width: 25px; @@ -119,7 +120,6 @@ background: none; } - .pdfBox-settingsCont { position: absolute; right: 0; @@ -194,7 +194,7 @@ justify-content: center; align-items: center; overflow: hidden; - transition: left .5s; + transition: left 0.5s; pointer-events: all; .pdfBox-searchBar { @@ -204,7 +204,6 @@ } } - .pdfBox-title-outer { width: 100%; height: 100%; @@ -269,7 +268,6 @@ // CSS adjusted for mobile devices @media only screen and (max-device-width: 480px) { - .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton, .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton { height: 60px; @@ -288,15 +286,11 @@ } } - - .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsFlyout, .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsFlyout { font-size: 30px; } - - .pdfBox .pdfBox-ui .pdfBox-overlayCont, .pdfBox-interactive .pdfBox-ui .pdfBox-overlayCont { height: 60px; diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 537da5055..1274220b6 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -1,10 +1,11 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx'; +import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as Pdfjs from 'pdfjs-dist'; import 'pdfjs-dist/web/pdf_viewer.css'; +import * as React from 'react'; import { Doc, DocListCast, Opt } from '../../../fields/Doc'; -import { Height, Width } from '../../../fields/DocSymbols'; +import { DocData } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; import { InkTool } from '../../../fields/InkField'; import { ComputedField } from '../../../fields/ScriptField'; @@ -22,20 +23,19 @@ import { CollectionFreeFormView } from '../collections/collectionFreeForm'; import { CollectionStackingView } from '../collections/CollectionStackingView'; import { ContextMenu } from '../ContextMenu'; import { ContextMenuProps } from '../ContextMenuItem'; -import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../DocComponent'; +import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../DocComponent'; import { Colors } from '../global/globalEnums'; import { CreateImage } from '../nodes/WebBoxRenderer'; import { PDFViewer } from '../pdf/PDFViewer'; import { SidebarAnnos } from '../SidebarAnnos'; -import { DocFocusOptions, DocumentView, OpenWhere } from './DocumentView'; -import { FieldView, FieldViewProps } from './FieldView'; +import { DocumentView, OpenWhere } from './DocumentView'; +import { FocusViewOptions, FieldView, FieldViewProps } from './FieldView'; import { ImageBox } from './ImageBox'; import './PDFBox.scss'; import { PinProps, PresBox } from './trails'; -import React = require('react'); @observer -export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps>() { +export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PDFBox, fieldKey); } @@ -49,21 +49,22 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps private _sidebarRef = React.createRef<SidebarAnnos>(); @observable private _searching: boolean = false; - @observable private _pdf: Opt<Pdfjs.PDFDocumentProxy>; + @observable private _pdf: Opt<Pdfjs.PDFDocumentProxy> = undefined; @observable private _pageControls = false; @computed get pdfUrl() { - return Cast(this.dataDoc[this.props.fieldKey], PdfField); + return Cast(this.dataDoc[this._props.fieldKey], PdfField); } @computed get pdfThumb() { return ImageCast(this.layoutDoc['thumb-frozen'], ImageCast(this.layoutDoc.thumb))?.url; } - constructor(props: any) { + constructor(props: FieldViewProps) { super(props); + makeObservable(this); const nw = Doc.NativeWidth(this.Document, this.dataDoc) || 927; const nh = Doc.NativeHeight(this.Document, this.dataDoc) || 1200; - !this.Document._layout_fitWidth && (this.Document._height = this.Document[Width]() * (nh / nw)); + !this.Document._layout_fitWidth && (this.Document._height = NumCast(this.Document._width) * (nh / nw)); if (this.pdfUrl) { if (PDFBox.pdfcache.get(this.pdfUrl.url.href)) runInAction(() => (this._pdf = PDFBox.pdfcache.get(this.pdfUrl!.url.href))); else if (PDFBox.pdfpromise.get(this.pdfUrl.url.href)) PDFBox.pdfpromise.get(this.pdfUrl.url.href)?.then(action((pdf: any) => (this._pdf = pdf))); @@ -97,33 +98,34 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps crop = (region: Doc | undefined, addCrop?: boolean) => { if (!region) return; const cropping = Doc.MakeCopy(region, true); - Doc.GetProto(region).lockedPosition = true; - Doc.GetProto(region).title = 'region:' + this.rootDoc.title; - Doc.GetProto(region).followLinkToggle = true; + const regionData = region[DocData]; + regionData.lockedPosition = true; + regionData.title = 'region:' + this.Document.title; + regionData.followLinkToggle = true; this.addDocument(region); - const docViewContent = this.props.docViewPath().lastElement().ContentDiv!; + const docViewContent = this.DocumentView?.().ContentDiv!; const newDiv = docViewContent.cloneNode(true) as HTMLDivElement; - newDiv.style.width = this.layoutDoc[Width]().toString(); - newDiv.style.height = this.layoutDoc[Height]().toString(); + newDiv.style.width = NumCast(this.layoutDoc._width).toString(); + newDiv.style.height = NumCast(this.layoutDoc._height).toString(); this.replaceCanvases(docViewContent, newDiv); const htmlString = this._pdfViewer?._mainCont.current && new XMLSerializer().serializeToString(newDiv); const anchx = NumCast(cropping.x); const anchy = NumCast(cropping.y); - const anchw = cropping[Width]() * (this.props.NativeDimScaling?.() || 1); - const anchh = cropping[Height]() * (this.props.NativeDimScaling?.() || 1); + const anchw = NumCast(cropping._width) * (this._props.NativeDimScaling?.() || 1); + const anchh = NumCast(cropping._height) * (this._props.NativeDimScaling?.() || 1); const viewScale = 1; - cropping.title = 'crop: ' + this.rootDoc.title; - cropping.x = NumCast(this.rootDoc.x) + NumCast(this.rootDoc._width); - cropping.y = NumCast(this.rootDoc.y); + cropping.title = 'crop: ' + this.Document.title; + cropping.x = NumCast(this.Document.x) + NumCast(this.layoutDoc._width); + cropping.y = NumCast(this.Document.y); cropping._width = anchw; cropping._height = anchh; cropping.onClick = undefined; - const croppingProto = Doc.GetProto(cropping); + const croppingProto = cropping[DocData]; croppingProto.annotationOn = undefined; croppingProto.isDataDoc = true; - croppingProto.proto = Cast(this.rootDoc.proto, Doc, null)?.proto; // set proto of cropping's data doc to be IMAGE_PROTO + croppingProto.proto = Cast(this.Document.proto, Doc, null)?.proto; // set proto of cropping's data doc to be IMAGE_PROTO croppingProto.type = DocumentType.IMG; croppingProto.layout = ImageBox.LayoutString('data'); croppingProto.data = new ImageField(Utils.CorsProxy('http://www.cs.brown.edu/~bcz/noImage.png')); @@ -132,7 +134,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps if (addCrop) { DocUtils.MakeLink(region, cropping, { link_relationship: 'cropped image' }); } - this.props.bringToFront(cropping); + this._props.bringToFront?.(cropping); CreateImage( '', @@ -140,8 +142,8 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps htmlString, anchw, anchh, - (NumCast(region.y) * this.props.PanelWidth()) / NumCast(this.rootDoc[this.fieldKey + '_nativeWidth']), - (NumCast(region.x) * this.props.PanelWidth()) / NumCast(this.rootDoc[this.fieldKey + '_nativeWidth']), + (NumCast(region.y) * this._props.PanelWidth()) / NumCast(this.dataDoc[this.fieldKey + '_nativeWidth']), + (NumCast(region.x) * this._props.PanelWidth()) / NumCast(this.dataDoc[this.fieldKey + '_nativeWidth']), 4 ) .then((data_url: any) => { @@ -163,18 +165,18 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps updateIcon = () => { // currently we render pdf icons as text labels - const docViewContent = this.props.docViewPath().lastElement().ContentDiv!; + const docViewContent = this.DocumentView?.().ContentDiv!; const filename = this.layoutDoc[Id] + '-icon' + new Date().getTime(); this._pdfViewer?._mainCont.current && CollectionFreeFormView.UpdateIcon( filename, docViewContent, - this.layoutDoc[Width](), - this.layoutDoc[Height](), - this.props.PanelWidth(), - this.props.PanelHeight(), + NumCast(this.layoutDoc._width), + NumCast(this.layoutDoc._height), + this._props.PanelWidth(), + this._props.PanelHeight(), NumCast(this.layoutDoc._layout_scrollTop), - NumCast(this.rootDoc[this.fieldKey + '_nativeHeight'], 1), + NumCast(this.dataDoc[this.fieldKey + '_nativeHeight'], 1), true, this.layoutDoc[Id] + '-icon', (iconFile: string, nativeWidth: number, nativeHeight: number) => { @@ -191,43 +193,44 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps Object.values(this._disposers).forEach(disposer => disposer?.()); } componentDidMount() { - this.props.setContentView?.(this); + this._props.setContentViewBox?.(this); this._disposers.select = reaction( - () => this.props.isSelected(), + () => this._props.isSelected(), () => { document.removeEventListener('keydown', this.onKeyDown); - this.props.isSelected(true) && document.addEventListener('keydown', this.onKeyDown); + this._props.isSelected() && document.addEventListener('keydown', this.onKeyDown); }, { fireImmediately: true } ); this._disposers.scroll = reaction( - () => this.rootDoc.layout_scrollTop, + () => this.layoutDoc.layout_scrollTop, () => { - if (!(ComputedField.WithoutComputed(() => FieldValue(this.props.Document[this.SidebarKey + '_panY'])) instanceof ComputedField)) { - this.props.Document[this.SidebarKey + '_panY'] = ComputedField.MakeFunction('this.layout_scrollTop'); + if (!(ComputedField.WithoutComputed(() => FieldValue(this.Document[this.SidebarKey + '_panY'])) instanceof ComputedField)) { + this.Document[this.SidebarKey + '_panY'] = ComputedField.MakeFunction('this.layout_scrollTop'); } - this.props.Document[this.SidebarKey + '_freeform_scale'] = 1; - this.props.Document[this.SidebarKey + '_freeform_panX'] = 0; + this.layoutDoc[this.SidebarKey + '_freeform_scale'] = 1; + this.layoutDoc[this.SidebarKey + '_freeform_panX'] = 0; } ); } - brushView = (view: { width: number; height: number; panX: number; panY: number }, transTime: number) => this._pdfViewer?.brushView(view, transTime); - sidebarAddDocTab = (doc: Doc, where: OpenWhere) => { - if (DocListCast(this.props.Document[this.props.fieldKey + '_sidebar']).includes(doc) && !this.SidebarShown) { + if (DocListCast(this.Document[this._props.fieldKey + '_sidebar']).includes(doc) && !this.SidebarShown) { this.toggleSidebar(false); return true; } - return this.props.addDocTab(doc, where); + return this._props.addDocTab(doc, where); }; - focus = (anchor: Doc, options: DocFocusOptions) => { + focus = (anchor: Doc, options: FocusViewOptions) => { this._initialScrollTarget = anchor; return this._pdfViewer?.scrollFocus(anchor, NumCast(anchor.y, NumCast(anchor.config_scrollTop)), options); }; - getView = async (doc: Doc) => { - if (this._sidebarRef?.current?.makeDocUnfiltered(doc) && !this.SidebarShown) this.toggleSidebar(false); + getView = async (doc: Doc, options: FocusViewOptions) => { + if (this._sidebarRef?.current?.makeDocUnfiltered(doc) && !this.SidebarShown) { + options.didMove = true; + this.toggleSidebar(false); + } return new Promise<Opt<DocumentView>>(res => DocumentManager.Instance.AddViewRenderedCb(doc, dv => res(dv))); }; @@ -239,12 +242,12 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps } const docAnchor = () => Docs.Create.ConfigDocument({ - title: StrCast(this.rootDoc.title + '@' + NumCast(this.layoutDoc._layout_scrollTop)?.toFixed(0)), - annotationOn: this.rootDoc, + title: StrCast(this.Document.title + '@' + NumCast(this.layoutDoc._layout_scrollTop)?.toFixed(0)), + annotationOn: this.Document, }); const visibleAnchor = this._pdfViewer?._getAnchor?.(this._pdfViewer.savedAnnotations(), true); const anchor = visibleAnchor ?? docAnchor(); - PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), scrollable: true, pannable: true } }, this.rootDoc); + PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), scrollable: true, pannable: true } }, this.Document); anchor.text = ele?.textContent ?? ''; anchor.text_html = ele?.innerHTML; addAsAnnotation && this.addDocument(anchor); @@ -254,11 +257,11 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps @action loaded = (nw: number, nh: number, np: number) => { - this.dataDoc[this.props.fieldKey + '_numPages'] = np; + this.dataDoc[this._props.fieldKey + '_numPages'] = np; Doc.SetNativeWidth(this.dataDoc, Math.max(Doc.NativeWidth(this.dataDoc), (nw * 96) / 72)); Doc.SetNativeHeight(this.dataDoc, (nh * 96) / 72); - this.layoutDoc._height = this.layoutDoc[Width]() / (Doc.NativeAspect(this.dataDoc) || 1); - !this.Document._layout_fitWidth && (this.Document._height = this.Document[Width]() * (nh / nw)); + this.layoutDoc._height = NumCast(this.layoutDoc._width) / (Doc.NativeAspect(this.dataDoc) || 1); + !this.Document._layout_fitWidth && (this.Document._height = NumCast(this.Document._width) * (nh / nw)); }; public search = action((searchString: string, bwd?: boolean, clear: boolean = false) => { @@ -279,7 +282,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps return true; }; public forwardPage = () => { - this.Document._layout_curPage = Math.min(NumCast(this.dataDoc[this.props.fieldKey + '_numPages']), (NumCast(this.Document._layout_curPage) || 1) + 1); + this.Document._layout_curPage = Math.min(NumCast(this.dataDoc[this._props.fieldKey + '_numPages']), (NumCast(this.Document._layout_curPage) || 1) + 1); return true; }; public gotoPage = (p: number) => (this.Document._layout_curPage = p); @@ -303,7 +306,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps setPdfViewer = (pdfViewer: PDFViewer) => { this._pdfViewer = pdfViewer; - const docView = this.props.DocumentView?.(); + const docView = this.DocumentView?.(); if (this._initialScrollTarget && docView) { this.focus(this._initialScrollTarget, { instant: true }); this._initialScrollTarget = undefined; @@ -324,16 +327,16 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps this, e, (e, down, delta) => { - const localDelta = this.props + const localDelta = this._props .ScreenToLocalTransform() - .scale(this.props.NativeDimScaling?.() || 1) + .scale(this._props.NativeDimScaling?.() || 1) .transformDirection(delta[0], delta[1]); const nativeWidth = NumCast(this.layoutDoc[this.fieldKey + '_nativeWidth']); const curNativeWidth = NumCast(this.layoutDoc.nativeWidth, nativeWidth); - const ratio = (curNativeWidth + ((onButton ? 1 : -1) * localDelta[0]) / (this.props.NativeDimScaling?.() || 1)) / nativeWidth; + const ratio = (curNativeWidth + ((onButton ? 1 : -1) * localDelta[0]) / (this._props.NativeDimScaling?.() || 1)) / nativeWidth; if (ratio >= 1) { this.layoutDoc.nativeWidth = nativeWidth * ratio; - onButton && (this.layoutDoc._width = this.layoutDoc[Width]() + localDelta[0]); + onButton && (this.layoutDoc._width = NumCast(this.layoutDoc._width) + localDelta[0]); this.layoutDoc._show_sidebar = nativeWidth !== this.layoutDoc._nativeWidth; } return false; @@ -350,15 +353,15 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps toggleSidebar = action((preview: boolean = false) => { const nativeWidth = NumCast(this.layoutDoc[this.fieldKey + '_nativeWidth']); const sideratio = ((!this.layoutDoc.nativeWidth || this.layoutDoc.nativeWidth === nativeWidth ? PDFBox.openSidebarWidth : 0) + nativeWidth) / nativeWidth; - const pdfratio = ((!this.layoutDoc.nativeWidth || this.layoutDoc.nativeWidth === nativeWidth ? PDFBox.openSidebarWidth + PDFBox.sidebarResizerWidth : 0) + nativeWidth) / nativeWidth; + const pdfratio = ((!this.layoutDoc.nativeWidth || this.layoutDoc.nativeWidth === nativeWidth ? PDFBox.openSidebarWidth + PDFBox.sidebarResizerWidth : 0) + NumCast(this.layoutDoc._width)) / NumCast(this.layoutDoc._width); const curNativeWidth = NumCast(this.layoutDoc.nativeWidth, nativeWidth); if (preview) { this._previewNativeWidth = nativeWidth * sideratio; - this._previewWidth = (this.layoutDoc[Width]() * nativeWidth * sideratio) / curNativeWidth; + this._previewWidth = (NumCast(this.layoutDoc._width) * nativeWidth * sideratio) / curNativeWidth; this._showSidebar = true; } else { this.layoutDoc.nativeWidth = nativeWidth * pdfratio; - this.layoutDoc._width = (this.layoutDoc[Width]() * nativeWidth * pdfratio) / curNativeWidth; + this.layoutDoc._width = (NumCast(this.layoutDoc._width) * nativeWidth * pdfratio) / curNativeWidth; this.layoutDoc._show_sidebar = nativeWidth !== this.layoutDoc._nativeWidth; } }); @@ -375,12 +378,12 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps ); const searchTitle = `${!this._searching ? 'Open' : 'Close'} Search Bar`; const curPage = NumCast(this.Document._layout_curPage) || 1; - return !this.props.isContentActive() || this._pdfViewer?.isAnnotating ? null : ( + return !this._props.isContentActive() || this._pdfViewer?.isAnnotating ? null : ( <div className="pdfBox-ui" onKeyDown={e => ([KeyCodes.BACKSPACE, KeyCodes.DELETE].includes(e.keyCode) ? e.stopPropagation() : true)} onPointerDown={e => e.stopPropagation()} - style={{ display: this.props.isContentActive() ? 'flex' : 'none' }}> + style={{ display: this._props.isContentActive() ? 'flex' : 'none' }}> <div className="pdfBox-overlayCont" onPointerDown={e => e.stopPropagation()} style={{ left: `${this._searching ? 0 : 100}%` }}> <button className="pdfBox-overlayButton" title={searchTitle} /> <input @@ -434,10 +437,10 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps if (!this.SidebarShown) return 0; if (this._previewWidth) return PDFBox.sidebarResizerWidth + PDFBox.openSidebarWidth; // return default sidebar if previewing (as in viewing a link target) const nativeDiff = NumCast(this.layoutDoc.nativeWidth) - Doc.NativeWidth(this.dataDoc); - return PDFBox.sidebarResizerWidth + nativeDiff * (this.props.NativeDimScaling?.() || 1); + return PDFBox.sidebarResizerWidth + nativeDiff * (this._props.NativeDimScaling?.() || 1); }; @undoBatch - toggleSidebarType = () => (this.rootDoc[this.SidebarKey + '_type_collection'] = this.rootDoc[this.SidebarKey + '_type_collection'] === CollectionViewType.Freeform ? CollectionViewType.Stacking : CollectionViewType.Freeform); + toggleSidebarType = () => (this.dataDoc[this.SidebarKey + '_type_collection'] = this.dataDoc[this.SidebarKey + '_type_collection'] === CollectionViewType.Freeform ? CollectionViewType.Stacking : CollectionViewType.Freeform); specificContextMenu = (e: React.MouseEvent): void => { const cm = ContextMenu.Instance; const options = cm.findByDescription('Options...'); @@ -453,11 +456,11 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps }; @computed get renderTitleBox() { - const classname = 'pdfBox' + (this.props.isContentActive() ? '-interactive' : ''); + const classname = 'pdfBox' + (this._props.isContentActive() ? '-interactive' : ''); return ( <div className={classname}> <div className="pdfBox-title-outer"> - <strong className="pdfBox-title">{StrCast(this.props.Document.title)}</strong> + <strong className="pdfBox-title">{StrCast(this.Document.title)}</strong> </div> </div> ); @@ -475,8 +478,8 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps key="sidebar" title="Toggle Sidebar" style={{ - display: !this.props.isContentActive() ? 'none' : undefined, - top: StrCast(this.rootDoc._layout_showTitle) === 'title' ? 20 : 5, + display: !this._props.isContentActive() ? 'none' : undefined, + top: StrCast(this.layoutDoc._layout_showTitle) === 'title' ? 20 : 5, backgroundColor: this.SidebarShown ? Colors.MEDIUM_BLUE : Colors.BLACK, }} onPointerDown={e => this.sidebarBtnDown(e, true)}> @@ -492,27 +495,27 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps const pdfNativeWidth = NumCast(this.layoutDoc[this.fieldKey + '_nativeWidth']); const nativeWidth = NumCast(this.layoutDoc.nativeWidth, pdfNativeWidth); const pdfRatio = pdfNativeWidth / nativeWidth; - return (pdfRatio * this.props.PanelWidth()) / pdfNativeWidth; + return (pdfRatio * this._props.PanelWidth()) / pdfNativeWidth; } @computed get sidebarNativeWidth() { return this.sidebarWidth() / this.pdfScale; } @computed get sidebarNativeHeight() { - return this.props.PanelHeight() / this.pdfScale; + return this._props.PanelHeight() / this.pdfScale; } sidebarNativeWidthFunc = () => this.sidebarNativeWidth; sidebarNativeHeightFunc = () => this.sidebarNativeHeight; sidebarMoveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean) => this.moveDocument(doc, targetCollection, addDocument, this.SidebarKey); sidebarRemDocument = (doc: Doc | Doc[]) => this.removeDocument(doc, this.SidebarKey); - sidebarScreenToLocal = () => this.props.ScreenToLocalTransform().translate((this.sidebarWidth() - this.props.PanelWidth()) / this.pdfScale, 0); + sidebarScreenToLocal = () => this.ScreenToLocalBoxXf().translate((this.sidebarWidth() - this._props.PanelWidth()) / this.pdfScale, 0); @computed get sidebarCollection() { const renderComponent = (tag: string) => { const ComponentTag = tag === CollectionViewType.Freeform ? CollectionFreeFormView : CollectionStackingView; return ComponentTag === CollectionStackingView ? ( <SidebarAnnos ref={this._sidebarRef} - {...this.props} - rootDoc={this.rootDoc} + {...this._props} + Document={this.Document} layoutDoc={this.layoutDoc} dataDoc={this.dataDoc} setHeight={emptyFunction} @@ -524,13 +527,13 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps removeDocument={this.removeDocument} /> ) : ( - <div onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => SelectionManager.SelectView(this.props.DocumentView?.()!, false), true)}> + <div onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => SelectionManager.SelectView(this.DocumentView?.()!, false), true)}> <ComponentTag - {...this.props} - setContentView={emptyFunction} // override setContentView to do nothing + {...this._props} + setContentViewBox={emptyFunction} // override setContentView to do nothing NativeWidth={this.sidebarNativeWidthFunc} NativeHeight={this.sidebarNativeHeightFunc} - PanelHeight={this.props.PanelHeight} + PanelHeight={this._props.PanelHeight} PanelWidth={this.sidebarWidth} xPadding={0} yPadding={0} @@ -544,7 +547,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps moveDocument={this.sidebarMoveDocument} addDocument={this.sidebarAddDocument} ScreenToLocalTransform={this.sidebarScreenToLocal} - renderDepth={this.props.renderDepth + 1} + renderDepth={this._props.renderDepth + 1} noSidebar={true} fieldKey={this.SidebarKey} /> @@ -560,13 +563,13 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps @computed get renderPdfView() { TraceMobx(); const previewScale = this._previewNativeWidth ? 1 - this.sidebarWidth() / this._previewNativeWidth : 1; - const scale = previewScale * (this.props.NativeDimScaling?.() || 1); + const scale = previewScale * (this._props.NativeDimScaling?.() || 1); return !this._pdf ? null : ( <div className="pdfBox" onContextMenu={this.specificContextMenu} style={{ - height: this.props.Document._layout_scrollTop && !this.Document._layout_fitWidth && window.screen.width > 600 ? (NumCast(this.Document._height) * this.props.PanelWidth()) / NumCast(this.Document._width) : undefined, + height: this.Document._layout_scrollTop && !this.Document._layout_fitWidth && window.screen.width > 600 ? (NumCast(this.Document._height) * this._props.PanelWidth()) / NumCast(this.Document._width) : undefined, }}> <div className="pdfBox-background" onPointerDown={e => this.sidebarBtnDown(e, false)} /> <div @@ -579,9 +582,9 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps top: 0, }}> <PDFViewer - {...this.props} + {...this._props} + pdfBox={this} sidebarAddDoc={this.sidebarAddDocument} - rootDoc={this.rootDoc} addDocTab={this.sidebarAddDocTab} layoutDoc={this.layoutDoc} dataDoc={this.dataDoc} @@ -598,7 +601,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps crop={this.crop} /> </div> - <div style={{ position: 'absolute', height: '100%', right: 0, top: 0, width: `calc(100 * ${this.sidebarWidth() / this.props.PanelWidth()}%` }}>{this.sidebarCollection}</div> + <div style={{ position: 'absolute', height: '100%', right: 0, top: 0, width: `calc(100 * ${this.sidebarWidth() / this._props.PanelWidth()}%` }}>{this.sidebarCollection}</div> {this.settingsPanel()} </div> ); @@ -608,8 +611,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps static pdfpromise = new Map<string, Promise<Pdfjs.PDFDocumentProxy>>(); render() { TraceMobx(); - const pdfView = this.renderPdfView; - + const pdfView = !this._pdf ? null : this.renderPdfView; const href = this.pdfUrl?.url.href; if (!pdfView && href) { if (PDFBox.pdfcache.get(href)) setTimeout(action(() => (this._pdf = PDFBox.pdfcache.get(href)))); diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx index cd1ff17dd..ae674d604 100644 --- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx +++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx @@ -6,8 +6,9 @@ import QuestionMarkIcon from '@mui/icons-material/QuestionMark'; import ReplayIcon from '@mui/icons-material/Replay'; import { Box, Button, Checkbox, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, FormControl, FormControlLabel, FormGroup, IconButton, LinearProgress, Stack } from '@mui/material'; import Typography from '@mui/material/Typography'; -import { action, computed, IReactionDisposer, observable, reaction } from 'mobx'; +import { IReactionDisposer, action, computed, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { NumListCast } from '../../../../fields/Doc'; import { List } from '../../../../fields/List'; import { BoolCast, NumCast, StrCast } from '../../../../fields/Types'; @@ -15,11 +16,10 @@ import { ViewBoxAnnotatableComponent } from '../../DocComponent'; import { FieldView, FieldViewProps } from './../FieldView'; import './PhysicsSimulationBox.scss'; import InputField from './PhysicsSimulationInputField'; -import * as questions from './PhysicsSimulationQuestions.json'; -import * as tutorials from './PhysicsSimulationTutorial.json'; +import questions from './PhysicsSimulationQuestions.json'; +import tutorials from './PhysicsSimulationTutorial.json'; import Wall from './PhysicsSimulationWall'; import Weight from './PhysicsSimulationWeight'; -import React = require('react'); interface IWallProps { length: number; @@ -81,14 +81,14 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP // semi-Constants xMin = 0; yMin = 0; - xMax = this.props.PanelWidth() * 0.6; - yMax = this.props.PanelHeight(); + xMax = this._props.PanelWidth() * 0.6; + yMax = this._props.PanelHeight(); color = `rgba(0,0,0,0.5)`; radius = 50; wallPositions: IWallProps[] = []; @computed get circularMotionRadius() { - return (NumCast(this.dataDoc.circularMotionRadius, 150) * this.props.PanelWidth()) / 1000; + return (NumCast(this.dataDoc.circularMotionRadius, 150) * this._props.PanelWidth()) / 1000; } @computed get gravity() { return NumCast(this.dataDoc.simulation_gravity, -9.81); @@ -191,21 +191,22 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP componentDidMount() { // Setup and update simulation - this._widthDisposer = reaction(() => [this.props.PanelWidth(), this.props.PanelHeight()], this.setupSimulation, { fireImmediately: true }); + this._widthDisposer = reaction(() => [this._props.PanelWidth(), this._props.PanelHeight()], this.setupSimulation, { fireImmediately: true }); // Create walls this.wallPositions = [ { length: 100, xPos: 0, yPos: 0, angleInDegrees: 0 }, { length: 100, xPos: 0, yPos: 100, angleInDegrees: 0 }, { length: 100, xPos: 0, yPos: 0, angleInDegrees: 90 }, - { length: 100, xPos: (this.xMax / this.props.PanelWidth()) * 100, yPos: 0, angleInDegrees: 90 }, + { length: 100, xPos: (this.xMax / this._props.PanelWidth()) * 100, yPos: 0, angleInDegrees: 90 }, ]; } - componentDidUpdate() { - if (this.xMax !== this.props.PanelWidth() * 0.6 || this.yMax != this.props.PanelHeight()) { - this.xMax = this.props.PanelWidth() * 0.6; - this.yMax = this.props.PanelHeight(); + componentDidUpdate(prevProps: Readonly<FieldViewProps>) { + super.componentDidUpdate(prevProps); + if (this.xMax !== this._props.PanelWidth() * 0.6 || this.yMax != this._props.PanelHeight()) { + this.xMax = this._props.PanelWidth() * 0.6; + this.yMax = this._props.PanelHeight(); this.setupSimulation(); } } @@ -631,7 +632,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP // Default setup for pendulum simulation setupPendulum = () => { - const length = (300 * this.props.PanelWidth()) / 1000; + const length = (300 * this._props.PanelWidth()) / 1000; const angle = 30; const x = length * Math.cos(((90 - angle) * Math.PI) / 180); const y = length * Math.sin(((90 - angle) * Math.PI) / 180); @@ -807,8 +808,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP const commonWeightProps = { pause: this.pause, paused: BoolCast(this.dataDoc.simulation_paused), - panelWidth: this.props.PanelWidth, - panelHeight: this.props.PanelHeight, + panelWidth: this._props.PanelWidth, + panelHeight: this._props.PanelHeight, resetRequest: this.resetRequest, xMax: this.xMax, xMin: this.xMin, @@ -852,9 +853,9 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP <div style={{ position: 'fixed', - left: 0.1 * this.props.PanelWidth() + 'px', - top: 0.95 * this.props.PanelHeight() + 'px', - width: 0.5 * this.props.PanelWidth() + 'px', + left: 0.1 * this._props.PanelWidth() + 'px', + top: 0.95 * this._props.PanelHeight() + 'px', + width: 0.5 * this._props.PanelWidth() + 'px', }}> <LinearProgress /> </div> @@ -922,8 +923,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP </div> <div className="mechanicsSimulationEquationContainer" - onWheel={e => this.props.isContentActive() && e.stopPropagation()} - style={{ overflow: 'auto', height: `${Math.max(1, 800 / this.props.PanelWidth()) * 100}%`, transform: `scale(${Math.min(1, this.props.PanelWidth() / 850)})` }}> + onWheel={e => this._props.isContentActive() && e.stopPropagation()} + style={{ overflow: 'auto', height: `${Math.max(1, 800 / this._props.PanelWidth()) * 100}%`, transform: `scale(${Math.min(1, this._props.PanelWidth() / 850)})` }}> <div className="mechanicsSimulationControls"> <Stack direction="row" spacing={1}> {this.dataDoc.simulation_paused && this.simulationMode != 'Tutorial' && ( diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx index d595a499e..c704863f5 100644 --- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx +++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx @@ -1,6 +1,6 @@ import { TextField, InputAdornment } from '@mui/material'; import { Doc } from '../../../../fields/Doc'; -import React = require('react'); +import * as React from 'react'; import TaskAltIcon from '@mui/icons-material/TaskAlt'; import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'; import { isNumber } from 'lodash'; diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWall.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWall.tsx index 8cc1d0fbf..696352296 100644 --- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWall.tsx +++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWall.tsx @@ -1,34 +1,33 @@ -import React = require('react'); +import * as React from 'react'; export interface Force { - magnitude: number; - directionInDegrees: number; + magnitude: number; + directionInDegrees: number; } export interface IWallProps { - length: number; - xPos: number; - yPos: number; - angleInDegrees: number; + length: number; + xPos: number; + yPos: number; + angleInDegrees: number; } export default class Wall extends React.Component<IWallProps> { + constructor(props: any) { + super(props); + } - constructor(props: any) { - super(props) - } + wallStyle = { + width: this.props.angleInDegrees == 0 ? this.props.length + '%' : '5px', + height: this.props.angleInDegrees == 0 ? '5px' : this.props.length + '%', + position: 'absolute' as 'absolute', + left: this.props.xPos + '%', + top: this.props.yPos + '%', + backgroundColor: '#6c7b8b', + margin: 0, + padding: 0, + }; - wallStyle = { - width: this.props.angleInDegrees == 0 ? this.props.length + "%" : "5px", - height: this.props.angleInDegrees == 0 ? "5px" : this.props.length + "%", - position: "absolute" as "absolute", - left: this.props.xPos + "%", - top: this.props.yPos + "%", - backgroundColor: "#6c7b8b", - margin: 0, - padding: 0, - }; - - render () { - return (<div style={this.wallStyle}></div>); - } -}; + render() { + return <div style={this.wallStyle}></div>; + } +} diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx index 2165c8ba9..3b232ddd0 100644 --- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx +++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx @@ -1,7 +1,7 @@ -import { computed, IReactionDisposer, reaction } from 'mobx'; +import { computed, IReactionDisposer, makeObservable, reaction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import './PhysicsSimulationBox.scss'; -import React = require('react'); interface IWallProps { length: number; @@ -93,6 +93,7 @@ interface IState { export default class Weight extends React.Component<IWeightProps, IState> { constructor(props: any) { super(props); + makeObservable(this); this.state = { angleLabel: 0, clickPositionX: 0, diff --git a/src/client/views/nodes/RadialMenu.scss b/src/client/views/nodes/RadialMenu.scss index 312b51013..9cd1ee23a 100644 --- a/src/client/views/nodes/RadialMenu.scss +++ b/src/client/views/nodes/RadialMenu.scss @@ -1,4 +1,4 @@ -@import "../global/globalCssVariables"; +@import '../global/globalCssVariables.module.scss'; .radialMenu-cont { position: absolute; @@ -26,7 +26,7 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; - transition: all .1s; + transition: all 0.1s; border-style: none; white-space: nowrap; font-size: 13px; @@ -34,8 +34,7 @@ text-transform: uppercase; } -s -.radialMenu-itemSelected { +s .radialMenu-itemSelected { border-style: none; } @@ -50,8 +49,8 @@ s -moz-user-select: none; -ms-user-select: none; user-select: none; - transition: all .1s; - border-width: .11px; + transition: all 0.1s; + border-width: 0.11px; border-style: none; border-color: $medium-gray; // rgb(187, 186, 186); // padding: 10px 0px 10px 0px; @@ -62,9 +61,8 @@ s padding-left: 5px; } - .radialMenu-description { margin-left: 5px; text-align: left; display: inline; //need this? -}
\ No newline at end of file +} diff --git a/src/client/views/nodes/RadialMenu.tsx b/src/client/views/nodes/RadialMenu.tsx index 7f0956e51..16450c359 100644 --- a/src/client/views/nodes/RadialMenu.tsx +++ b/src/client/views/nodes/RadialMenu.tsx @@ -1,17 +1,17 @@ -import React = require("react"); -import { action, computed, IReactionDisposer, observable, reaction, runInAction } from "mobx"; -import { observer } from "mobx-react"; -import "./RadialMenu.scss"; -import { RadialMenuItem, RadialMenuProps } from "./RadialMenuItem"; +import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx'; +import { observer } from 'mobx-react'; +import * as React from 'react'; +import './RadialMenu.scss'; +import { RadialMenuItem, RadialMenuProps } from './RadialMenuItem'; @observer export class RadialMenu extends React.Component { static Instance: RadialMenu; static readonly buffer = 20; - constructor(props: Readonly<{}>) { + constructor(props: any) { super(props); - + makeObservable(this); RadialMenu.Instance = this; } @@ -23,11 +23,10 @@ export class RadialMenu extends React.Component { public used: boolean = false; - catchTouch = (te: React.TouchEvent) => { te.stopPropagation(); te.preventDefault(); - } + }; @action onPointerDown = (e: PointerEvent) => { @@ -35,8 +34,8 @@ export class RadialMenu extends React.Component { this._mouseX = e.clientX; this._mouseY = e.clientY; this.used = false; - document.addEventListener("pointermove", this.onPointerMove); - } + document.addEventListener('pointermove', this.onPointerMove); + }; @observable private _closest: number = -1; @@ -60,11 +59,10 @@ export class RadialMenu extends React.Component { } } this._closest = closest; - } - else { + } else { this._closest = -1; } - } + }; @action onPointerUp = (e: PointerEvent) => { this.used = true; @@ -75,43 +73,41 @@ export class RadialMenu extends React.Component { this._shouldDisplay = false; } this._shouldDisplay && (this._display = true); - document.removeEventListener("pointermove", this.onPointerMove); + document.removeEventListener('pointermove', this.onPointerMove); if (this._closest !== -1 && this._items?.length > this._closest) { this._items[this._closest].event(); } - } + }; componentWillUnmount() { - document.removeEventListener("pointerdown", this.onPointerDown); + document.removeEventListener('pointerdown', this.onPointerDown); - document.removeEventListener("pointerup", this.onPointerUp); + document.removeEventListener('pointerup', this.onPointerUp); this._reactionDisposer && this._reactionDisposer(); } @action - componentDidMount = () => { - document.addEventListener("pointerdown", this.onPointerDown); - document.addEventListener("pointerup", this.onPointerUp); + componentDidMount() { + document.addEventListener('pointerdown', this.onPointerDown); + document.addEventListener('pointerup', this.onPointerUp); this.previewcircle(); this._reactionDisposer = reaction( () => this._shouldDisplay, - () => this._shouldDisplay && !this._mouseDown && runInAction(() => this._display = true) + () => this._shouldDisplay && !this._mouseDown && runInAction(() => (this._display = true)) ); } componentDidUpdate = () => { this.previewcircle(); - } + }; @observable private _pageX: number = 0; @observable private _pageY: number = 0; @observable _display: boolean = false; @observable private _yRelativeToTop: boolean = true; - @observable private _width: number = 0; @observable private _height: number = 0; - getItems() { return this._items; } @@ -133,7 +129,7 @@ export class RadialMenu extends React.Component { this._mouseX = x; this._mouseY = y; this._shouldDisplay = true; - } + }; // @computed // get pageX() { // const x = this._pageX; @@ -168,7 +164,7 @@ export class RadialMenu extends React.Component { this.clearItems(); this._display = false; this._shouldDisplay = false; - } + }; @action openMenu = (x: number, y: number) => { @@ -176,56 +172,52 @@ export class RadialMenu extends React.Component { this._pageY = y; this._shouldDisplay; this._display = true; - } + }; @action clearItems() { this._items = []; } - previewcircle() { - if (document.getElementById("newCanvas") !== null) { - const c: any = document.getElementById("newCanvas"); + if (document.getElementById('newCanvas') !== null) { + const c: any = document.getElementById('newCanvas'); if (c.getContext) { - const ctx = c.getContext("2d"); + const ctx = c.getContext('2d'); ctx.beginPath(); ctx.arc(150, 150, 50, 0, 2 * Math.PI); - ctx.fillStyle = "white"; + ctx.fillStyle = 'white'; ctx.fill(); - ctx.font = "12px Arial"; - ctx.fillStyle = "black"; - ctx.textAlign = "center"; - let description = ""; + ctx.font = '12px Arial'; + ctx.fillStyle = 'black'; + ctx.textAlign = 'center'; + let description = ''; if (this._closest !== -1) { description = this._items[this._closest].description; } if (description.length > 15) { description = description.slice(0, 12); - description += "..."; + description += '...'; } ctx.fillText(description, 150, 150, 90); } } } - render() { if (!this._display) { return null; } - const style = this._yRelativeToTop ? { left: this._pageX - 130, top: this._pageY - 130 } : - { left: this._pageX - 130, top: this._pageY - 130 }; + const style = this._yRelativeToTop ? { left: this._pageX - 130, top: this._pageY - 130 } : { left: this._pageX - 130, top: this._pageY - 130 }; return ( - <div className="radialMenu-cont" onTouchStart={this.catchTouch} style={style}> - <canvas id="newCanvas" style={{ position: "absolute" }} height="300" width="300"> Your browser does not support the HTML5 canvas tag.</canvas> + <canvas id="newCanvas" style={{ position: 'absolute' }} height="300" width="300"> + {' '} + Your browser does not support the HTML5 canvas tag. + </canvas> {this.menuItems} </div> - ); } - - -}
\ No newline at end of file +} diff --git a/src/client/views/nodes/RadialMenuItem.tsx b/src/client/views/nodes/RadialMenuItem.tsx index 8876b4879..91dc37d34 100644 --- a/src/client/views/nodes/RadialMenuItem.tsx +++ b/src/client/views/nodes/RadialMenuItem.tsx @@ -1,8 +1,8 @@ -import React = require("react"); import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { observer } from "mobx-react"; -import { UndoManager } from "../../util/UndoManager"; +import { observer } from 'mobx-react'; +import * as React from 'react'; +import { UndoManager } from '../../util/UndoManager'; export interface RadialMenuProps { description: string; @@ -15,15 +15,13 @@ export interface RadialMenuProps { selected: number; } - @observer export class RadialMenuItem extends React.Component<RadialMenuProps> { - - componentDidMount = () => { + componentDidMount() { this.setcircle(); } - componentDidUpdate = () => { + componentDidUpdate() { this.setcircle(); } @@ -35,38 +33,36 @@ export class RadialMenuItem extends React.Component<RadialMenuProps> { } await this.props.event({ x: e.clientX, y: e.clientY }); batch && batch.end(); - } - + }; setcircle() { let circlemin = 0; let circlemax = 1; - this.props.min ? circlemin = this.props.min : null; - this.props.max ? circlemax = this.props.max : null; - if (document.getElementById("myCanvas") !== null) { - const c: any = document.getElementById("myCanvas"); - let color = "white"; + this.props.min ? (circlemin = this.props.min) : null; + this.props.max ? (circlemax = this.props.max) : null; + if (document.getElementById('myCanvas') !== null) { + const c: any = document.getElementById('myCanvas'); + let color = 'white'; switch (circlemin % 3) { case 1: - color = "#c2c2c5"; + color = '#c2c2c5'; break; case 0: - color = "#f1efeb"; + color = '#f1efeb'; break; case 2: - color = "lightgray"; + color = 'lightgray'; break; } if (circlemax % 3 === 1 && circlemin === circlemax - 1) { - color = "#c2c2c5"; + color = '#c2c2c5'; } if (this.props.selected === this.props.min) { - color = "#808080"; - + color = '#808080'; } if (c.getContext) { - const ctx = c.getContext("2d"); + const ctx = c.getContext('2d'); ctx.beginPath(); ctx.arc(150, 150, 150, (circlemin / circlemax) * 2 * Math.PI, ((circlemin + 1) / circlemax) * 2 * Math.PI); ctx.arc(150, 150, 50, ((circlemin + 1) / circlemax) * 2 * Math.PI, (circlemin / circlemax) * 2 * Math.PI, true); @@ -79,35 +75,36 @@ export class RadialMenuItem extends React.Component<RadialMenuProps> { calculatorx() { let circlemin = 0; let circlemax = 1; - this.props.min ? circlemin = this.props.min : null; - this.props.max ? circlemax = this.props.max : null; - const avg = ((circlemin / circlemax) + ((circlemin + 1) / circlemax)) / 2; + this.props.min ? (circlemin = this.props.min) : null; + this.props.max ? (circlemax = this.props.max) : null; + const avg = (circlemin / circlemax + (circlemin + 1) / circlemax) / 2; const degrees = 360 * avg; - const x = 100 * Math.cos(degrees * Math.PI / 180); - const y = -125 * Math.sin(degrees * Math.PI / 180); + const x = 100 * Math.cos((degrees * Math.PI) / 180); + const y = -125 * Math.sin((degrees * Math.PI) / 180); return x; } calculatory() { - let circlemin = 0; let circlemax = 1; - this.props.min ? circlemin = this.props.min : null; - this.props.max ? circlemax = this.props.max : null; - const avg = ((circlemin / circlemax) + ((circlemin + 1) / circlemax)) / 2; + this.props.min ? (circlemin = this.props.min) : null; + this.props.max ? (circlemax = this.props.max) : null; + const avg = (circlemin / circlemax + (circlemin + 1) / circlemax) / 2; const degrees = 360 * avg; - const x = 125 * Math.cos(degrees * Math.PI / 180); - const y = -100 * Math.sin(degrees * Math.PI / 180); + const x = 125 * Math.cos((degrees * Math.PI) / 180); + const y = -100 * Math.sin((degrees * Math.PI) / 180); return y; } - render() { return ( - <div className={"radialMenu-item" + (this.props.selected ? " radialMenu-itemSelected" : "")} onPointerUp={this.handleEvent}> - <canvas id="myCanvas" height="300" width="300"> Your browser does not support the HTML5 canvas tag.</canvas> - <FontAwesomeIcon icon={this.props.icon} size="3x" style={{ position: "absolute", left: this.calculatorx() + 150 - 19, top: this.calculatory() + 150 - 19 }} /> + <div className={'radialMenu-item' + (this.props.selected ? ' radialMenu-itemSelected' : '')} onPointerUp={this.handleEvent}> + <canvas id="myCanvas" height="300" width="300"> + {' '} + Your browser does not support the HTML5 canvas tag. + </canvas> + <FontAwesomeIcon icon={this.props.icon} size="3x" style={{ position: 'absolute', left: this.calculatorx() + 150 - 19, top: this.calculatory() + 150 - 19 }} /> </div> ); } -}
\ No newline at end of file +} diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx index 116069cbd..f6d94ce05 100644 --- a/src/client/views/nodes/RecordingBox/RecordingBox.tsx +++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx @@ -1,4 +1,4 @@ -import { action, observable } from 'mobx'; +import { action, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { DateField } from '../../../../fields/DateField'; @@ -8,20 +8,20 @@ import { List } from '../../../../fields/List'; import { BoolCast, DocCast } from '../../../../fields/Types'; import { VideoField } from '../../../../fields/URLField'; import { Upload } from '../../../../server/SharedMediaTypes'; -import { Docs } from '../../../documents/Documents'; import { DocumentType } from '../../../documents/DocumentTypes'; +import { Docs } from '../../../documents/Documents'; import { DocumentManager } from '../../../util/DocumentManager'; import { DragManager } from '../../../util/DragManager'; import { ScriptingGlobals } from '../../../util/ScriptingGlobals'; -import { SelectionManager } from '../../../util/SelectionManager'; import { Presentation } from '../../../util/TrackMovements'; import { undoBatch } from '../../../util/UndoManager'; -import { CollectionFreeFormView } from '../../collections/collectionFreeForm/CollectionFreeFormView'; import { ViewBoxBaseComponent } from '../../DocComponent'; +import { CollectionFreeFormView } from '../../collections/collectionFreeForm/CollectionFreeFormView'; import { media_state } from '../AudioBox'; import { FieldView, FieldViewProps } from '../FieldView'; import { VideoBox } from '../VideoBox'; import { RecordingView } from './RecordingView'; +import { DocData } from '../../../../fields/DocSymbols'; @observer export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() { @@ -31,8 +31,13 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() { private _ref: React.RefObject<HTMLDivElement> = React.createRef(); + constructor(props: FieldViewProps) { + super(props); + makeObservable(this); + } + componentDidMount() { - this.props.setContentView?.(this); + this._props.setContentViewBox?.(this); Doc.SetNativeWidth(this.dataDoc, 1280); Doc.SetNativeHeight(this.dataDoc, 720); } @@ -50,7 +55,7 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() { this.dataDoc[this.fieldKey + '_duration'] = this.videoDuration; this.dataDoc.layout = VideoBox.LayoutString(this.fieldKey); - this.dataDoc[this.props.fieldKey] = new VideoField(this.result.accessPaths.client); + this.dataDoc[this._props.fieldKey] = new VideoField(this.result.accessPaths.client); this.dataDoc[this.fieldKey + '_recorded'] = true; // stringify the presentation and store it if (presentation?.movements) { @@ -62,7 +67,7 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() { @undoBatch @action public static WorkspaceStopRecording() { - const remDoc = RecordingBox.screengrabber?.rootDoc; + const remDoc = RecordingBox.screengrabber?.Document; if (remDoc) { //if recordingbox is true; when we press the stop button. changed vals temporarily to see if changes happening RecordingBox.screengrabber?.Pause?.(); @@ -101,7 +106,7 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() { }); screengrabber.overlayX = 70; //was -400 screengrabber.overlayY = 590; //was 0 - Doc.GetProto(screengrabber)[Doc.LayoutFieldKey(screengrabber) + '_trackScreen'] = true; + screengrabber[DocData][Doc.LayoutFieldKey(screengrabber) + '_trackScreen'] = true; Doc.AddToMyOverlay(screengrabber); //just adds doc to overlay DocumentManager.Instance.AddViewRenderedCb(screengrabber, docView => { RecordingBox.screengrabber = docView.ComponentView as RecordingBox; @@ -122,7 +127,7 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() { value.overlayY = window.innerHeight - 180; Doc.AddToMyOverlay(value); DocumentManager.Instance.AddViewRenderedCb(value, docView => { - Doc.UserDoc().currentRecording = docView.rootDoc; + Doc.UserDoc().currentRecording = docView.Document; docView.select(false); RecordingBox.resumeWorkspaceReplaying(value); }); @@ -136,9 +141,9 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() { @action public static addRecToWorkspace(value: RecordingBox) { let ffView = Array.from(DocumentManager.Instance.DocumentViews).find(view => view.ComponentView instanceof CollectionFreeFormView); - (ffView?.ComponentView as CollectionFreeFormView).props.addDocument?.(value.rootDoc); - Doc.RemoveDocFromList(Doc.UserDoc(), 'workspaceRecordings', value.rootDoc); - Doc.RemFromMyOverlay(value.rootDoc); + (ffView?.ComponentView as CollectionFreeFormView)._props.addDocument?.(value.Document); + Doc.RemoveDocFromList(Doc.UserDoc(), 'workspaceRecordings', value.Document); + Doc.RemFromMyOverlay(value.Document); Doc.UserDoc().currentRecording = undefined; Doc.UserDoc().workspaceReplayingState = undefined; Doc.UserDoc().workspaceRecordingState = undefined; @@ -193,14 +198,14 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() { render() { return ( - <div className="recordingBox" ref={this._ref}> + <div className="recordingBox" style={{ width: '100%' }} ref={this._ref}> {!this.result && ( <RecordingView forceTrackScreen={BoolCast(this.layoutDoc[this.fieldKey + '_trackScreen'])} getControls={this.getControls} setResult={this.setResult} setDuration={this.setVideoDuration} - id={DocCast(this.rootDoc.proto)?.[Id] || ''} + id={DocCast(this.Document.proto)?.[Id] || ''} /> )} </div> diff --git a/src/client/views/nodes/ScreenshotBox.tsx b/src/client/views/nodes/ScreenshotBox.tsx index ebb8a3374..1e3933ac3 100644 --- a/src/client/views/nodes/ScreenshotBox.tsx +++ b/src/client/views/nodes/ScreenshotBox.tsx @@ -1,12 +1,11 @@ -import React = require('react'); import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import * as React from 'react'; // import { Canvas } from '@react-three/fiber'; -import { computed, observable, runInAction } from 'mobx'; +import { computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; // import { BufferAttribute, Camera, Vector2, Vector3 } from 'three'; import { DateField } from '../../../fields/DateField'; import { Doc } from '../../../fields/Doc'; -import { Height, Width } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; import { ComputedField } from '../../../fields/ScriptField'; import { Cast, DocCast, NumCast } from '../../../fields/Types'; @@ -18,16 +17,17 @@ import { DocumentType } from '../../documents/DocumentTypes'; import { Networking } from '../../Network'; import { CaptureManager } from '../../util/CaptureManager'; import { SettingsManager } from '../../util/SettingsManager'; +import { TrackMovements } from '../../util/TrackMovements'; import { CollectionFreeFormView } from '../collections/collectionFreeForm/CollectionFreeFormView'; import { CollectionStackedTimeline } from '../collections/CollectionStackedTimeline'; import { ContextMenu } from '../ContextMenu'; -import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../DocComponent'; +import { ViewBoxAnnotatableComponent } from '../DocComponent'; +import { media_state } from './AudioBox'; import { FieldView, FieldViewProps } from './FieldView'; import { FormattedTextBox } from './formattedText/FormattedTextBox'; import './ScreenshotBox.scss'; import { VideoBox } from './VideoBox'; -import { TrackMovements } from '../../util/TrackMovements'; -import { media_state } from './AudioBox'; +import { DocData } from '../../../fields/DocSymbols'; declare class MediaRecorder { constructor(e: any, options?: any); // whatever MediaRecorder has @@ -38,18 +38,18 @@ declare class MediaRecorder { // setRaised: (r: { coord: Vector2, off: Vector3 }[]) => void; // x: number; // y: number; -// rootDoc: Doc; +// doc: Doc; // color: string; // } // @observer // export class VideoTile extends React.Component<VideoTileProps> { -// @observable _videoRef: HTMLVideoElement | undefined; +// @observable _videoRef: HTMLVideoElement | undefined = undefined; // _mesh: any = undefined; // render() { -// const topLeft = [this.props.x, this.props.y]; -// const raised = this.props.raised; +// const topLeft = [this._props.x, this._props.y]; +// const raised = this._props.raised; // const find = (raised: { coord: Vector2, off: Vector3 }[], what: Vector2) => raised.find(r => r.coord.x === what.x && r.coord.y === what.y); // const tl1 = find(raised, new Vector2(topLeft[0], topLeft[1] + 1)); // const tl2 = find(raised, new Vector2(topLeft[0] + 1, topLeft[1] + 1)); @@ -70,11 +70,11 @@ declare class MediaRecorder { // const normals = new Float32Array(quad_normals); // const uvs = new Float32Array(quad_uvs); // Each vertex has one uv coordinate for texture mapping // const indices = new Uint32Array(quad_indices); // Use the four vertices to draw the two triangles that make up the square. -// const popOut = () => NumCast(this.props.rootDoc.popOut); -// const popOff = () => NumCast(this.props.rootDoc.popOff); +// const popOut = () => NumCast(this.Document.popOut); +// const popOff = () => NumCast(this.Document.popOff); // return ( // <mesh key={`mesh${topLeft[0]}${topLeft[1]}`} onClick={action(async e => { -// this.props.setRaised([ +// this._props.setRaised([ // { coord: new Vector2(topLeft[0], topLeft[1]), off: new Vector3(-popOff(), -popOff(), popOut()) }, // { coord: new Vector2(topLeft[0] + 1, topLeft[1]), off: new Vector3(popOff(), -popOff(), popOut()) }, // { coord: new Vector2(topLeft[0], topLeft[1] + 1), off: new Vector3(-popOff(), popOff(), popOut()) }, @@ -100,7 +100,7 @@ declare class MediaRecorder { // r?.setAttribute('uv', new BufferAttribute(uvs, 2)); // r?.setIndex(new BufferAttribute(indices, 1)); // }} /> -// {!this._videoRef ? <meshStandardMaterial color={this.props.color} /> : +// {!this._videoRef ? <meshStandardMaterial color={this._props.color} /> : // <meshBasicMaterial > // <videoTexture attach="map" args={[this._videoRef]} /> // </meshBasicMaterial>} @@ -110,7 +110,7 @@ declare class MediaRecorder { // } @observer -export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps>() { +export class ScreenshotBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(ScreenshotBox, fieldKey); } @@ -119,23 +119,17 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl @observable private _videoRef: HTMLVideoElement | null = null; @observable _screenCapture = false; @computed get recordingStart() { - return Cast(this.dataDoc[this.props.fieldKey + '_recordingStart'], DateField)?.date.getTime(); + return Cast(this.dataDoc[this._props.fieldKey + '_recordingStart'], DateField)?.date.getTime(); } - constructor(props: any) { + constructor(props: FieldViewProps) { super(props); - if (this.rootDoc.videoWall) { - this.rootDoc.nativeWidth = undefined; - this.rootDoc.nativeHeight = undefined; - this.layoutDoc.popOff = 0; - this.layoutDoc.popOut = 1; - } else { - this.setupDictation(); - } + makeObservable(this); + this.setupDictation(); } getAnchor = (addAsAnnotation: boolean) => { const startTime = Cast(this.layoutDoc._layout_currentTimecode, 'number', null) || (this._videoRec ? (Date.now() - (this.recordingStart || 0)) / 1000 : undefined); - return CollectionStackedTimeline.createAnchor(this.rootDoc, this.dataDoc, this.annotationKey, startTime, startTime === undefined ? undefined : startTime + 3, undefined, addAsAnnotation) || this.rootDoc; + return CollectionStackedTimeline.createAnchor(this.Document, this.dataDoc, this.annotationKey, startTime, startTime === undefined ? undefined : startTime + 3, undefined, addAsAnnotation) || this.Document; }; videoLoad = () => { @@ -145,14 +139,14 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl if (!nativeWidth || !nativeHeight) { if (!nativeWidth) Doc.SetNativeWidth(this.dataDoc, 1200); Doc.SetNativeHeight(this.dataDoc, (nativeWidth || 1200) / aspect); - this.layoutDoc._height = (this.layoutDoc[Width]() || 0) / aspect; + this.layoutDoc._height = NumCast(this.layoutDoc._width) / aspect; } }; componentDidMount() { this.dataDoc.nativeWidth = this.dataDoc.nativeHeight = 0; - this.props.setContentView?.(this); // this tells the DocumentView that this ScreenshotBox is the "content" of the document. this allows the DocumentView to indirectly call getAnchor() on the AudioBox when making a link. - // this.rootDoc.videoWall && reaction(() => ({ width: this.props.PanelWidth(), height: this.props.PanelHeight() }), + this._props.setContentViewBox?.(this); // this tells the DocumentView that this ScreenshotBox is the "content" of the document. this allows the DocumentView to indirectly call getAnchor() on the AudioBox when making a link. + // this.layoutDoc.videoWall && reaction(() => ({ width: this._props.PanelWidth(), height: this._props.PanelHeight() }), // ({ width, height }) => { // if (this._camera) { // const angle = -Math.abs(1 - width / height); @@ -174,7 +168,6 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl }; @computed get content() { - if (this.rootDoc.videoWall) return null; return ( <video className={'videoBox-content'} @@ -182,7 +175,7 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl ref={r => { this._videoRef = r; setTimeout(() => { - if (this.rootDoc.mediaState === media_state.PendingRecording && this._videoRef) { + if (this.layoutDoc.mediaState === media_state.PendingRecording && this._videoRef) { this.toggleRecording(); } }, 100); @@ -203,13 +196,13 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl // @observable _raised = [] as { coord: Vector2, off: Vector3 }[]; // @action setRaised = (r: { coord: Vector2, off: Vector3 }[]) => this._raised = r; @computed get threed() { - // if (this.rootDoc.videoWall) { + // if (this.layoutDoc.videoWall) { // const screens: any[] = []; // const colors = ["yellow", "red", "orange", "brown", "maroon", "gray"]; // let count = 0; // numberRange(this._numScreens).forEach(x => numberRange(this._numScreens).forEach(y => screens.push( - // <VideoTile rootDoc={this.rootDoc} color={colors[count++ % colors.length]} x={x} y={y} raised={this._raised} setRaised={this.setRaised} />))); - // return <Canvas key="canvas" id="CANCAN" style={{ width: this.props.PanelWidth(), height: this.props.PanelHeight() }} gl={{ antialias: false }} colorManagement={false} onCreated={props => { + // <VideoTile doc={this.layoutDoc} color={colors[count++ % colors.length]} x={x} y={y} raised={this._raised} setRaised={this.setRaised} />))); + // return <Canvas key="canvas" id="CANCAN" style={{ width: this._props.PanelWidth(), height: this._props.PanelHeight() }} gl={{ antialias: false }} colorManagement={false} onCreated={props => { // this._camera = props.camera; // props.camera.position.set(this._numScreens / 2, this._numScreens / 2, this._numScreens - 2); // props.camera.lookAt(this._numScreens / 2, this._numScreens / 2, 0); @@ -232,15 +225,15 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl this._audioRec.onstop = async (e: any) => { const [{ result }] = await Networking.UploadFilesToServer(aud_chunks.map((file: any) => ({ file }))); if (!(result instanceof Error)) { - this.dataDoc[this.props.fieldKey + '_audio'] = new AudioField(result.accessPaths.agnostic.client); + this.dataDoc[this._props.fieldKey + '_audio'] = new AudioField(result.accessPaths.agnostic.client); } }; this._videoRef!.srcObject = await (navigator.mediaDevices as any).getDisplayMedia({ video: true }); this._videoRec = new MediaRecorder(this._videoRef!.srcObject); const vid_chunks: any = []; this._videoRec.onstart = () => { - if (this.dataDoc[this.props.fieldKey + '_trackScreen']) TrackMovements.Instance.start(); - this.dataDoc[this.props.fieldKey + '_recordingStart'] = new DateField(new Date()); + if (this.dataDoc[this._props.fieldKey + '_trackScreen']) TrackMovements.Instance.start(); + this.dataDoc[this._props.fieldKey + '_recordingStart'] = new DateField(new Date()); }; this._videoRec.ondataavailable = (e: any) => vid_chunks.push(e.data); this._videoRec.onstop = async (e: any) => { @@ -251,7 +244,7 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl this.dataDoc[this.fieldKey + '_presentation'] = JSON.stringify(presCopy); } TrackMovements.Instance.finish(); - const file = new File(vid_chunks, `${this.rootDoc[Id]}.mkv`, { type: vid_chunks[0].type, lastModified: Date.now() }); + const file = new File(vid_chunks, `${this.Document[Id]}.mkv`, { type: vid_chunks[0].type, lastModified: Date.now() }); const [{ result }] = await Networking.UploadFilesToServer({ file }); this.dataDoc[this.fieldKey + '_duration'] = (new Date().getTime() - this.recordingStart!) / 1000; if (!(result instanceof Error)) { @@ -260,7 +253,7 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl this.layoutDoc.layout = VideoBox.LayoutString(this.fieldKey); this.dataDoc.nativeWidth = this.dataDoc.nativeHeight = undefined; this.layoutDoc._layout_fitWidth = undefined; - this.dataDoc[this.props.fieldKey] = new VideoField(result.accessPaths.agnostic.client); + this.dataDoc[this._props.fieldKey] = new VideoField(result.accessPaths.agnostic.client); } else alert('video conversion failed'); }; this._audioRec.start(); @@ -280,23 +273,23 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl const ind = DocUtils.ActiveRecordings.indexOf(this); ind !== -1 && DocUtils.ActiveRecordings.splice(ind, 1); - CaptureManager.Instance.open(this.rootDoc); + CaptureManager.Instance.open(this.Document); } }; setupDictation = () => { if (this.dataDoc[this.fieldKey + '_dictation']) return; - const dictationText = DocUtils.GetNewTextDoc('dictation', NumCast(this.rootDoc.x), NumCast(this.rootDoc.y) + NumCast(this.layoutDoc._height) + 10, NumCast(this.layoutDoc._width), 2 * NumCast(this.layoutDoc._height)); + const dictationText = DocUtils.GetNewTextDoc('dictation', NumCast(this.Document.x), NumCast(this.Document.y) + NumCast(this.layoutDoc._height) + 10, NumCast(this.layoutDoc._width), 2 * NumCast(this.layoutDoc._height)); const textField = Doc.LayoutFieldKey(dictationText); dictationText._layout_autoHeight = false; - const dictationTextProto = Doc.GetProto(dictationText); + const dictationTextProto = dictationText[DocData]; dictationTextProto[`${textField}_recordingSource`] = this.dataDoc; - dictationTextProto[`${textField}_recordingStart`] = ComputedField.MakeFunction(`self.${textField}_recordingSource.${this.fieldKey}_recordingStart`); - dictationTextProto.mediaState = ComputedField.MakeFunction(`self.${textField}_recordingSource.mediaState`); + dictationTextProto[`${textField}_recordingStart`] = ComputedField.MakeFunction(`this.${textField}_recordingSource.${this.fieldKey}_recordingStart`); + dictationTextProto.mediaState = ComputedField.MakeFunction(`this.${textField}_recordingSource.mediaState`); this.dataDoc[this.fieldKey + '_dictation'] = dictationText; }; - videoPanelHeight = () => (NumCast(this.dataDoc[this.fieldKey + '_nativeHeight'], this.layoutDoc[Height]()) / NumCast(this.dataDoc[this.fieldKey + '_nativeWidth'], this.layoutDoc[Width]())) * this.props.PanelWidth(); - formattedPanelHeight = () => Math.max(0, this.props.PanelHeight() - this.videoPanelHeight()); + videoPanelHeight = () => (NumCast(this.dataDoc[this.fieldKey + '_nativeHeight'], NumCast(this.layoutDoc._height)) / NumCast(this.dataDoc[this.fieldKey + '_nativeWidth'], NumCast(this.layoutDoc._width))) * this._props.PanelWidth(); + formattedPanelHeight = () => Math.max(0, this._props.PanelHeight() - this.videoPanelHeight()); render() { TraceMobx(); return ( @@ -304,14 +297,14 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl <div className="videoBox-viewer"> <div style={{ position: 'relative', height: this.videoPanelHeight() }}> <CollectionFreeFormView - {...this.props} - setContentView={emptyFunction} + {...this._props} + setContentViewBox={emptyFunction} NativeWidth={returnZero} NativeHeight={returnZero} PanelHeight={this.videoPanelHeight} - PanelWidth={this.props.PanelWidth} - focus={this.props.focus} - isSelected={this.props.isSelected} + PanelWidth={this._props.PanelWidth} + focus={this._props.focus} + isSelected={this._props.isSelected} isAnnotationOverlay={true} select={emptyFunction} isContentActive={returnFalse} @@ -321,8 +314,7 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl removeDocument={returnFalse} moveDocument={returnFalse} addDocument={returnFalse} - ScreenToLocalTransform={this.props.ScreenToLocalTransform} - renderDepth={this.props.renderDepth + 1}> + renderDepth={this._props.renderDepth + 1}> <> {this.threed} {this.content} @@ -332,7 +324,7 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl <div style={{ background: SettingsManager.userColor, position: 'relative', height: this.formattedPanelHeight() }}> {!(this.dataDoc[this.fieldKey + '_dictation'] instanceof Doc) ? null : ( <FormattedTextBox - {...this.props} + {...this._props} Document={DocCast(this.dataDoc[this.fieldKey + '_dictation'])} fieldKey={'text'} PanelHeight={this.formattedPanelHeight} @@ -345,12 +337,12 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl removeDocument={returnFalse} moveDocument={returnFalse} addDocument={returnFalse} - renderDepth={this.props.renderDepth + 1} + renderDepth={this._props.renderDepth + 1} /> )} </div> </div> - {!this.props.isSelected() ? null : ( + {!this._props.isSelected() ? null : ( <div className="screenshotBox-uiButtons" style={{ background: SettingsManager.userColor }}> <div className="screenshotBox-recorder" style={{ color: SettingsManager.userBackgroundColor, background: SettingsManager.userVariantColor }} key="snap" onPointerDown={this.toggleRecording}> <FontAwesomeIcon icon="file" size="lg" /> diff --git a/src/client/views/nodes/ScriptingBox.scss b/src/client/views/nodes/ScriptingBox.scss index 8d76f2b1d..9789da55a 100644 --- a/src/client/views/nodes/ScriptingBox.scss +++ b/src/client/views/nodes/ScriptingBox.scss @@ -32,7 +32,7 @@ .scriptingBox-wrapper { width: 100%; height: 100%; - max-height: calc(100%-30px); + max-height: calc(100% - 30px); display: flex; flex-direction: row; overflow: auto; @@ -42,7 +42,8 @@ overflow: hidden; } - .scriptingBox-textArea, .scriptingBox-textArea-inputs { + .scriptingBox-textArea, + .scriptingBox-textArea-inputs { flex: 70; height: 100%; max-width: 95%; @@ -110,7 +111,7 @@ cursor: pointer; } - .rta__entity>* { + .rta__entity > * { padding-left: 4px; padding-right: 4px; } @@ -125,7 +126,7 @@ .scriptingBox-textArea-inputs { max-width: 100%; height: 40%; - width: 100%; + width: 100%; resize: none; } .scriptingBox-textArea-script { @@ -194,8 +195,8 @@ .scriptingBox-errorMessage { overflow: auto; - background: "red"; - background-color: "red"; + background: 'red'; + background-color: 'red'; height: 45px; } @@ -221,4 +222,4 @@ width: 25%; } } -}
\ No newline at end of file +} diff --git a/src/client/views/nodes/ScriptingBox.tsx b/src/client/views/nodes/ScriptingBox.tsx index 7c8a1849e..89650889d 100644 --- a/src/client/views/nodes/ScriptingBox.tsx +++ b/src/client/views/nodes/ScriptingBox.tsx @@ -1,33 +1,30 @@ let ReactTextareaAutocomplete = require('@webscopeio/react-textarea-autocomplete').default; -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; +import { returnAlways, returnEmptyString } from '../../../Utils'; import { Doc } from '../../../fields/Doc'; import { List } from '../../../fields/List'; import { listSpec } from '../../../fields/Schema'; import { ScriptField } from '../../../fields/ScriptField'; import { BoolCast, Cast, DocCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types'; import { TraceMobx } from '../../../fields/util'; -import { returnAlways, returnEmptyString, returnTrue } from '../../../Utils'; import { DragManager } from '../../util/DragManager'; -import { InteractionUtils } from '../../util/InteractionUtils'; +import { ScriptManager } from '../../util/ScriptManager'; import { CompileScript, ScriptParam } from '../../util/Scripting'; import { ScriptingGlobals } from '../../util/ScriptingGlobals'; -import { ScriptManager } from '../../util/ScriptManager'; import { ContextMenu } from '../ContextMenu'; -import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../DocComponent'; +import { ViewBoxAnnotatableComponent } from '../DocComponent'; import { EditableView } from '../EditableView'; -import { FieldView, FieldViewProps } from '../nodes/FieldView'; import { OverlayView } from '../OverlayView'; +import { FieldView, FieldViewProps } from '../nodes/FieldView'; import { DocumentIconContainer } from './DocumentIcon'; -import { DocFocusOptions, DocumentView } from './DocumentView'; import './ScriptingBox.scss'; const _global = (window /* browser */ || global) /* node */ as any; @observer -export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps>() { +export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { private dropDisposer?: DragManager.DragDropDisposer; - protected _multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer | undefined; public static LayoutString(fieldStr: string) { return FieldView.LayoutString(ScriptingBox, fieldStr); } @@ -59,10 +56,11 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable @observable private _scriptSuggestedParams: any = ''; @observable private _scriptParamsText: any = ''; - constructor(props: any) { + constructor(props: FieldViewProps) { super(props); + makeObservable(this); if (!this.compileParams.length) { - const params = ScriptCast(this.rootDoc[this.props.fieldKey])?.script.options.params as { [key: string]: any }; + const params = ScriptCast(this.dataDoc[this._props.fieldKey])?.script.options.params as { [key: string]: any }; if (params) { this.compileParams = Array.from(Object.keys(params)) .filter(p => !p.startsWith('_')) @@ -79,30 +77,30 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable return this.compileParams.map(p => p.split(':')[1].trim()); } @computed({ keepAlive: true }) get rawScript() { - return ScriptCast(this.rootDoc[this.fieldKey])?.script.originalScript ?? ''; + return ScriptCast(this.dataDoc[this.fieldKey])?.script.originalScript ?? ''; } @computed({ keepAlive: true }) get functionName() { - return StrCast(this.rootDoc[this.props.fieldKey + '-functionName'], ''); + return StrCast(this.dataDoc[this.fieldKey + '-functionName'], ''); } @computed({ keepAlive: true }) get functionDescription() { - return StrCast(this.rootDoc[this.props.fieldKey + '-functionDescription'], ''); + return StrCast(this.dataDoc[this.fieldKey + '-functionDescription'], ''); } @computed({ keepAlive: true }) get compileParams() { - return Cast(this.rootDoc[this.props.fieldKey + '-params'], listSpec('string'), []); + return Cast(this.dataDoc[this.fieldKey + '-params'], listSpec('string'), []); } set rawScript(value) { - Doc.SetInPlace(this.rootDoc, this.props.fieldKey, new ScriptField(undefined, undefined, value), true); + this.dataDoc[this.fieldKey] = new ScriptField(undefined, undefined, value); } set functionName(value) { - Doc.SetInPlace(this.rootDoc, this.props.fieldKey + '-functionName', value, true); + this.dataDoc[this.fieldKey + '-functionName'] = value; } set functionDescription(value) { - Doc.SetInPlace(this.rootDoc, this.props.fieldKey + '-functionDescription', value, true); + this.dataDoc[this.fieldKey + '-functionDescription'] = value; } set compileParams(value) { - Doc.SetInPlace(this.rootDoc, this.props.fieldKey + '-params', new List<string>(value), true); + this.dataDoc[this.fieldKey + '-params'] = new List<string>(value); } getValue(result: any, descrip: boolean) { @@ -118,7 +116,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable @action componentDidMount() { - this.props.setContentView?.(this); + this._props.setContentViewBox?.(this); this.rawText = this.rawScript; const observer = new _global.ResizeObserver( action((entries: any) => { @@ -166,9 +164,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable // only included in buttons, transforms scripting UI to a button @action - onFinish = () => { - this.rootDoc.layout_fieldKey = 'layout'; - }; + onFinish = () => (this.layoutDoc.layout_fieldKey = 'layout'); // displays error message @action @@ -190,7 +186,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable params, typecheck: false, }); - Doc.SetInPlace(this.rootDoc, this.fieldKey, result.compiled ? new ScriptField(result, undefined, this.rawText) : undefined, true); + this.dataDoc[this.fieldKey] = result.compiled ? new ScriptField(result, undefined, this.rawText) : undefined; this.onError(result.compiled ? undefined : result.errors); return result.compiled; }; @@ -200,9 +196,9 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable onRun = () => { if (this.onCompile()) { const bindings: { [name: string]: any } = {}; - this.paramsNames.forEach(key => (bindings[key] = this.rootDoc[key])); - // binds vars so user doesnt have to refer to everything as self.<var> - ScriptCast(this.rootDoc[this.fieldKey], null)?.script.run({ ...bindings, self: this.rootDoc, this: this.layoutDoc }, this.onError); + this.paramsNames.forEach(key => (bindings[key] = this.dataDoc[key])); + // binds vars so user doesnt have to refer to everything as this.<var> + ScriptCast(this.dataDoc[this.fieldKey], null)?.script.run({ ...bindings, this: this.Document }, this.onError); } }; @@ -271,7 +267,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable @action onDrop = (e: Event, de: DragManager.DropEvent, fieldKey: string) => { if (de.complete.docDragData) { - de.complete.docDragData.droppedDocuments.forEach(doc => Doc.SetInPlace(this.rootDoc, fieldKey, doc, true)); + de.complete.docDragData.droppedDocuments.forEach(doc => (this.dataDoc[fieldKey] = doc)); e.stopPropagation(); return true; } @@ -281,7 +277,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable // deletes a param from all areas in which it is stored @action onDelete = (num: number) => { - Doc.SetInPlace(this.rootDoc, this.paramsNames[num], undefined, true); + this.dataDoc[this.paramsNames[num]] = undefined; this.compileParams.splice(num, 1); return true; }; @@ -291,14 +287,14 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable viewChanged = (e: React.ChangeEvent, name: string) => { //@ts-ignore const val = e.target.selectedOptions[0].value; - Doc.SetInPlace(this.rootDoc, name, val[0] === 'S' ? val.substring(1) : val[0] === 'N' ? parseInt(val.substring(1)) : val.substring(1) === 'true', true); + this.dataDoc[name] = val[0] === 'S' ? val.substring(1) : val[0] === 'N' ? parseInt(val.substring(1)) : val.substring(1) === 'true'; }; // creates a copy of the script document onCopy = () => { - const copy = Doc.MakeCopy(this.rootDoc, true); - copy.x = NumCast(this.dataDoc.x) + NumCast(this.dataDoc._width); - this.props.addDocument?.(copy); + const copy = Doc.MakeCopy(this.Document, true); + copy.x = NumCast(this.Document.x) + NumCast(this.dataDoc._width); + this._props.addDocument?.(copy); }; // adds option to create a copy to the context menu @@ -314,7 +310,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable const nameInput = <textarea className="scriptingBox-textarea-inputs" onChange={e => (this.functionName = e.target.value)} placeholder="enter name here" value={this.functionName} />; return ( - <div className="scriptingBox-inputDiv" onPointerDown={e => this.props.isSelected() && e.stopPropagation()}> + <div className="scriptingBox-inputDiv" onPointerDown={e => this._props.isSelected() && e.stopPropagation()}> <div className="scriptingBox-wrapper" style={{ maxWidth: '100%' }}> <div className="container" style={{ maxWidth: '100%' }}> <div className="descriptor" style={{ textAlign: 'center', display: 'inline-block', maxWidth: '100%' }}> @@ -347,8 +343,8 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable maxHeight={72} height={35} fontSize={14} - contents={StrCast(DocCast(this.rootDoc[parameter])?.title, 'undefined')} - GetValue={() => StrCast(DocCast(this.rootDoc[parameter])?.title, 'undefined')} + contents={StrCast(DocCast(this.dataDoc[parameter])?.title, 'undefined')} + GetValue={() => StrCast(DocCast(this.dataDoc[parameter])?.title, 'undefined')} SetValue={action((value: string) => { const script = CompileScript(value, { addReturn: true, @@ -358,7 +354,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable const results = script.compiled && script.run(); if (results && results.success) { this._errorMessage = ''; - Doc.SetInPlace(this.rootDoc, parameter, results.result, true); + this.dataDoc[parameter] = results.result; return true; } this._errorMessage = 'invalid document'; @@ -371,7 +367,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable // rendering when a string's value can be set in applied UI renderBasicType(parameter: string, isNum: boolean) { - const strVal = isNum ? NumCast(this.rootDoc[parameter]).toString() : StrCast(this.rootDoc[parameter]); + const strVal = isNum ? NumCast(this.dataDoc[parameter]).toString() : StrCast(this.dataDoc[parameter]); return ( <div className="scriptingBox-paramInputs" style={{ overflowY: 'hidden' }}> <EditableView @@ -385,7 +381,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable const setValue = isNum ? parseInt(value) : value; if (setValue !== undefined && setValue !== ' ') { this._errorMessage = ''; - Doc.SetInPlace(this.rootDoc, parameter, setValue, true); + this.dataDoc[parameter] = setValue; return true; } this._errorMessage = 'invalid input'; @@ -406,7 +402,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable className="scriptingBox-viewPicker" onPointerDown={e => e.stopPropagation()} onChange={e => this.viewChanged(e, parameter)} - value={typeof this.rootDoc[parameter] === 'string' ? 'S' + StrCast(this.rootDoc[parameter]) : typeof this.rootDoc[parameter] === 'number' ? 'N' + NumCast(this.rootDoc[parameter]) : 'B' + BoolCast(this.rootDoc[parameter])}> + value={typeof this.dataDoc[parameter] === 'string' ? 'S' + StrCast(this.dataDoc[parameter]) : typeof this.dataDoc[parameter] === 'number' ? 'N' + NumCast(this.dataDoc[parameter]) : 'B' + BoolCast(this.dataDoc[parameter])}> {types.map((type, i) => ( <option key={i} className="scriptingBox-viewOption" value={(typeof type === 'string' ? 'S' : typeof type === 'number' ? 'N' : 'B') + type}> {' '} @@ -691,7 +687,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable ); return ( - <div className="scriptingBox-inputDiv" onPointerDown={e => this.props.isSelected() && e.stopPropagation()}> + <div className="scriptingBox-inputDiv" onPointerDown={e => this._props.isSelected() && e.stopPropagation()}> <div className="scriptingBox-wrapper"> {this.renderScriptingBox} {definedParameters} @@ -704,7 +700,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable // toolbar (with compile and apply buttons) for scripting UI renderScriptingTools() { - const buttonStyle = 'scriptingBox-button' + (StrCast(this.rootDoc.layout_fieldKey).startsWith('layout_on') ? '-finish' : ''); + const buttonStyle = 'scriptingBox-button' + (StrCast(this.Document.layout_fieldKey).startsWith('layout_on') ? '-finish' : ''); return ( <div className="scriptingBox-toolbar"> <button @@ -732,7 +728,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable Save </button> - {!StrCast(this.rootDoc.layout_fieldKey).startsWith('layout_on') ? null : ( // onClick, onChecked, etc need a Finish button to return to their default layout + {!StrCast(this.Document.layout_fieldKey).startsWith('layout_on') ? null : ( // onClick, onChecked, etc need a Finish button to return to their default layout <button className={buttonStyle} onPointerDown={e => { @@ -749,7 +745,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable // inputs UI for params which allows you to set values for each displayed in a list renderParamsInputs() { return ( - <div className="scriptingBox-inputDiv" onPointerDown={e => this.props.isSelected(true) && e.stopPropagation()}> + <div className="scriptingBox-inputDiv" onPointerDown={e => this._props.isSelected() && e.stopPropagation()}> {!this.compileParams.length || !this.paramsNames ? null : ( <div className="scriptingBox-plist"> {this.paramsNames.map((parameter: string, i: number) => ( @@ -778,7 +774,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable // toolbar (with edit and run buttons and error message) for params UI renderTools(toolSet: string, func: () => void) { - const buttonStyle = 'scriptingBox-button' + (StrCast(this.rootDoc.layout_fieldKey).startsWith('layout_on') ? '-finish' : ''); + const buttonStyle = 'scriptingBox-button' + (StrCast(this.Document.layout_fieldKey).startsWith('layout_on') ? '-finish' : ''); return ( <div className="scriptingBox-toolbar"> <button @@ -797,7 +793,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable }}> {toolSet} </button> - {!StrCast(this.rootDoc.layout_fieldKey).startsWith('layout_on') ? null : ( + {!StrCast(this.Document.layout_fieldKey).startsWith('layout_on') ? null : ( <button className={buttonStyle} onPointerDown={e => { @@ -816,7 +812,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable TraceMobx(); return ( <div className={`scriptingBox`} onContextMenu={this.specificContextMenu} onPointerUp={!this._function ? this.suggestionPos : undefined}> - <div className="scriptingBox-outerDiv" onWheel={e => this.props.isSelected(true) && e.stopPropagation()}> + <div className="scriptingBox-outerDiv" onWheel={e => this._props.isSelected() && e.stopPropagation()}> {this._paramSuggestion ? ( <div className="boxed" ref={this._suggestionRef} style={{ left: this._suggestionBoxX + 20, top: this._suggestionBoxY - 15, display: 'inline' }}> {' '} diff --git a/src/client/views/nodes/TaskCompletedBox.tsx b/src/client/views/nodes/TaskCompletedBox.tsx index 2a3dd8d2d..c9e15d314 100644 --- a/src/client/views/nodes/TaskCompletedBox.tsx +++ b/src/client/views/nodes/TaskCompletedBox.tsx @@ -1,30 +1,33 @@ -import React = require("react"); -import { observer } from "mobx-react"; -import "./TaskCompletedBox.scss"; -import { observable, action } from "mobx"; -import { Fade } from "@material-ui/core"; - +import { Fade } from '@mui/material'; +import { action, observable } from 'mobx'; +import { observer } from 'mobx-react'; +import * as React from 'react'; +import './TaskCompletedBox.scss'; @observer export class TaskCompletionBox extends React.Component<{}> { - @observable public static taskCompleted: boolean = false; @observable public static popupX: number = 500; @observable public static popupY: number = 150; - @observable public static textDisplayed: string; + @observable public static textDisplayed: string = ''; @action public static toggleTaskCompleted = () => { TaskCompletionBox.taskCompleted = !TaskCompletionBox.taskCompleted; - } + }; render() { - return <Fade in={TaskCompletionBox.taskCompleted}> - <div className="taskCompletedBox-fade" - style={{ - left: TaskCompletionBox.popupX ? TaskCompletionBox.popupX : 500, - top: TaskCompletionBox.popupY ? TaskCompletionBox.popupY : 150, - }}>{TaskCompletionBox.textDisplayed}</div> - </Fade>; + return ( + <Fade in={TaskCompletionBox.taskCompleted}> + <div + className="taskCompletedBox-fade" + style={{ + left: TaskCompletionBox.popupX ? TaskCompletionBox.popupX : 500, + top: TaskCompletionBox.popupY ? TaskCompletionBox.popupY : 150, + }}> + {TaskCompletionBox.textDisplayed} + </div> + </Fade> + ); } -}
\ No newline at end of file +} diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss index f803715ad..460155446 100644 --- a/src/client/views/nodes/VideoBox.scss +++ b/src/client/views/nodes/VideoBox.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.scss'; +@import '../global/globalCssVariables.module.scss'; .mini-viewer { cursor: grab; @@ -100,6 +100,7 @@ padding: 0 10px 0 7px; transition: opacity 0.3s; z-index: 10001; + transform-origin: top left; .timecode-controls { display: flex; @@ -171,13 +172,17 @@ top: 90%; transform: translate(-50%, -50%); width: 80%; - transition: top 0s, width 0s, opacity 0.3s, visibility 0.3s; + transition: + top 0s, + width 0s, + opacity 0.3s, + visibility 0.3s; } } -video::-webkit-media-controls { - display: none !important; -} +// video::-webkit-media-controls { +// display: none !important; +// } input[type='range'] { -webkit-appearance: none; diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index d7f7c9b73..40647feff 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -1,40 +1,36 @@ -import React = require('react'); import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction, untracked } from 'mobx'; +import { action, computed, IReactionDisposer, makeObservable, observable, ObservableMap, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import { basename } from 'path'; -import { Doc, StrListCast } from '../../../fields/Doc'; -import { Height, Width } from '../../../fields/DocSymbols'; +import * as React from 'react'; +import { Doc, Opt, StrListCast } from '../../../fields/Doc'; +import { DocData } from '../../../fields/DocSymbols'; import { InkTool } from '../../../fields/InkField'; import { List } from '../../../fields/List'; import { ObjectField } from '../../../fields/ObjectField'; -import { Cast, NumCast, StrCast } from '../../../fields/Types'; +import { Cast, DocCast, NumCast, StrCast } from '../../../fields/Types'; import { AudioField, ImageField, VideoField } from '../../../fields/URLField'; import { emptyFunction, formatTime, returnEmptyString, returnFalse, returnOne, returnZero, setupMoveUpEvents, Utils } from '../../../Utils'; import { Docs, DocUtils } from '../../documents/Documents'; import { DocumentType } from '../../documents/DocumentTypes'; -import { Networking } from '../../Network'; import { DocumentManager } from '../../util/DocumentManager'; import { FollowLinkScript } from '../../util/LinkFollower'; import { LinkManager } from '../../util/LinkManager'; import { ReplayMovements } from '../../util/ReplayMovements'; -import { SelectionManager } from '../../util/SelectionManager'; -import { SnappingManager } from '../../util/SnappingManager'; import { undoBatch } from '../../util/UndoManager'; import { CollectionFreeFormView } from '../collections/collectionFreeForm/CollectionFreeFormView'; import { CollectionStackedTimeline, TrimScope } from '../collections/CollectionStackedTimeline'; import { ContextMenu } from '../ContextMenu'; import { ContextMenuProps } from '../ContextMenuItem'; -import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../DocComponent'; +import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../DocComponent'; import { MarqueeAnnotator } from '../MarqueeAnnotator'; import { AnchorMenu } from '../pdf/AnchorMenu'; import { StyleProp } from '../StyleProvider'; -import { DocFocusOptions, DocumentView, OpenWhere } from './DocumentView'; -import { FieldView, FieldViewProps } from './FieldView'; +import { DocumentView } from './DocumentView'; +import { FocusViewOptions, FieldView, FieldViewProps } from './FieldView'; import { RecordingBox } from './RecordingBox'; import { PinProps, PresBox } from './trails'; import './VideoBox.scss'; -const path = require('path'); /** * VideoBox @@ -42,48 +38,47 @@ const path = require('path'); * Supporting Components: CollectionStackedTimeline * * VideoBox is a node that supports the playback of video files in Dash. - * When a video file or YouTube video is importeed into Dash, it is immediately rendered as a VideoBox document. + * When a video file is importeed into Dash, it is immediately rendered as a VideoBox document. * CollectionStackedTimline handles AudioBox and VideoBox shared behavior, but VideoBox handles playing, pausing, etc because it contains <video> element * User can trim video: nondestructive, just sets new bounds for playback and rendering timeline * Like images, users can zoom and pan and it has an overlay layer allowing for annotations on top of the video at different times */ @observer -export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps>() { +export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(VideoBox, fieldKey); } - - static _youtubeIframeCounter: number = 0; static heightPercent = 80; // height of video relative to videoBox when timeline is open static numThumbnails = 20; private unmounting = false; private _disposers: { [name: string]: IReactionDisposer } = {}; - private _youtubePlayer: YT.Player | undefined = undefined; private _videoRef: HTMLVideoElement | null = null; // <video> ref private _contentRef: HTMLDivElement | null = null; // ref to div that wraps video and controls for full screen - private _youtubeIframeId: number = -1; - private _youtubeContentCreated = false; private _audioPlayer: HTMLAudioElement | null = null; + private _marqueeref = React.createRef<MarqueeAnnotator>(); private _mainCont: React.RefObject<HTMLDivElement> = React.createRef(); // outermost div private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef(); private _playRegionTimer: any = null; // timeout for playback private _controlsFadeTimer: any = null; // timeout for controls fade - @observable _stackedTimeline: any; // CollectionStackedTimeline ref - @observable static _nativeControls: boolean; // default html controls - @observable _marqueeing: number[] | undefined; // coords for marquee selection + constructor(props: FieldViewProps) { + super(props); + makeObservable(this); + this._props.setContentViewBox?.(this); + } + + @observable _stackedTimeline: CollectionStackedTimeline | undefined = undefined; // CollectionStackedTimeline ref @observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>(); @observable _screenCapture = false; @observable _clicking = false; // used for transition between showing/hiding timeline - @observable _forceCreateYouTubeIFrame = false; @observable _playTimer?: NodeJS.Timeout = undefined; @observable _fullScreen = false; @observable _playing = false; @observable _finished: boolean = false; // has playback reached end of clip @observable _volume: number = 1; @observable _muted: boolean = false; - @observable _controlsTransform?: { X: number; Y: number }; + @observable _controlsTransform?: { X: number; Y: number } = undefined; @observable _controlsVisible: boolean = true; @observable _scrubbing: boolean = false; @@ -96,14 +91,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp // @computed get rawDuration() { return NumCast(this.dataDoc[this.fieldKey + "_duration"]); } @observable rawDuration: number = 0; - @computed get youtubeVideoId() { - const field = Cast(this.dataDoc[this.props.fieldKey], VideoField); - return field && field.url.href.indexOf('youtube') !== -1 ? ((arr: string[]) => arr[arr.length - 1])(field.url.href.split('/')) : ''; - } - // returns the path of the audio file @computed get audiopath() { - const field = Cast(this.props.Document[this.props.fieldKey + '_audio'], AudioField, null); + const field = Cast(this.Document[this._props.fieldKey + '_audio'], AudioField, null); const vfield = Cast(this.dataDoc[this.fieldKey], VideoField, null); return field?.url.href ?? vfield?.url.href ?? ''; } @@ -126,18 +116,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp componentDidMount() { this.unmounting = false; - this.props.setContentView?.(this); // this tells the DocumentView that this VideoBox is the "content" of the document. this allows the DocumentView to indirectly call getAnchor() on the VideoBox when making a link. - if (this.youtubeVideoId) { - const youtubeaspect = 400 / 315; - const nativeWidth = Doc.NativeWidth(this.layoutDoc); - const nativeHeight = Doc.NativeHeight(this.layoutDoc); - if (!nativeWidth || !nativeHeight) { - if (!nativeWidth) Doc.SetNativeWidth(this.dataDoc, 600); - Doc.SetNativeHeight(this.dataDoc, (nativeWidth || 600) / youtubeaspect); - this.layoutDoc._height = NumCast(this.layoutDoc._width) / youtubeaspect; - } - } - this.player && this.setPlayheadTime(this.timeline.clipStart || 0); + this._props.setContentViewBox?.(this); // this tells the DocumentView that this VideoBox is the "content" of the document. this allows the DocumentView to indirectly call getAnchor() on the VideoBox when making a link. + this.player && this.setPlayheadTime(this.timeline?.clipStart || 0); document.addEventListener('keydown', this.keyEvents, true); if (this.presentation) { @@ -163,7 +143,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp if ( // need to include range inputs because after dragging time slider it becomes target element !(e.target instanceof HTMLInputElement && !(e.target.type === 'range')) && - this.props.isSelected(true) + this._props.isSelected() ) { switch (e.key) { case 'ArrowLeft': @@ -198,8 +178,6 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp this._audioPlayer && this.player && (this._audioPlayer.currentTime = this.player?.currentTime); update && this.player && this.playFrom(start, undefined, true); update && this._audioPlayer?.play(); - update && this._youtubePlayer?.playVideo(); - this._youtubePlayer && !this._playTimer && (this._playTimer = setInterval(this.updateTimecode, 5)); } catch (e) { console.log('Video Play Exception:', e); } @@ -209,11 +187,6 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp // goes to time @action public Seek(time: number) { - try { - this._youtubePlayer?.seekTo(Math.round(time), true); - } catch (e) { - console.log('Video Seek Exception:', e); - } this.player && (this.player.currentTime = time); this._audioPlayer && (this._audioPlayer.currentTime = time); // TODO: revisit this and clean it @@ -239,13 +212,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp try { update && this.player?.pause(); update && this._audioPlayer?.pause(); - update && this._youtubePlayer?.pauseVideo(); - this._youtubePlayer && this._playTimer && clearInterval(this._playTimer); - this._youtubePlayer?.seekTo(this._youtubePlayer?.getCurrentTime(), true); } catch (e) { console.log('Video Pause Exception:', e); } - this._youtubePlayer && SelectionManager.DeselectAll(); // if we don't deselect the player, then we get an annoying YouTube spinner I guess telling us we're paused. this._playTimer = undefined; this.updateTimecode(); if (!this._finished) { @@ -267,11 +236,6 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp this._fullScreen = true; this.player && this._contentRef && this._contentRef.requestFullscreen(); } - try { - this._youtubePlayer && this.props.addDocTab(this.rootDoc, OpenWhere.add); - } catch (e) { - console.log('Video FullScreen Exception:', e); - } }; // fades out controls in fullscreen after mouse stops moving @@ -329,24 +293,14 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp title: (this.layoutDoc._layout_currentTimecode || 0).toString(), onClick: FollowLinkScript(), }); - this.props.addDocument?.(b); - DocUtils.MakeLink(b, this.rootDoc, { link_relationship: 'video snapshot' }); - Networking.PostToServer('/youtubeScreenshot', { - id: this.youtubeVideoId, - timecode: this.layoutDoc._layout_currentTimecode, - }).then(response => { - const resolved = response?.accessPaths?.agnostic?.client; - if (resolved) { - this.props.removeDocument?.(b); - this.createSnapshotLink(resolved); - } - }); + this._props.addDocument?.(b); + DocUtils.MakeLink(b, this.Document, { link_relationship: 'video snapshot' }); } else { //convert to desired file format const dataUrl = canvas.toDataURL('image/png'); // can also use 'image/png' // if you want to preview the captured image, - const retitled = StrCast(this.rootDoc.title).replace(/[ -\.:]/g, ''); - const encodedFilename = encodeURIComponent('snapshot' + retitled + '_' + (this.layoutDoc._layout_currentTimecode || 0).toString().replace(/\./, '_')); + const retitled = StrCast(this.Document.title).replace(/[ -\.:]/g, ''); + const encodedFilename = encodeURIComponent(('snapshot' + retitled + '_' + (this.layoutDoc._layout_currentTimecode || 0).toString()).replace(/[\.\/\?\=]/g, '_')); const filename = basename(encodedFilename); Utils.convertDataUri(dataUrl, filename).then((returnedFilename: string) => returnedFilename && (cb ?? this.createSnapshotLink)(returnedFilename, downX, downY)); } @@ -355,8 +309,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp updateIcon = () => { const makeIcon = (returnedfilename: string) => { this.dataDoc.icon = new ImageField(returnedfilename); - this.dataDoc.icon_nativeWidth = this.layoutDoc[Width](); - this.dataDoc.icon_nativeHeight = this.layoutDoc[Height](); + this.dataDoc.icon_nativeWidth = NumCast(this.layoutDoc._width); + this.dataDoc.icon_nativeHeight = NumCast(this.layoutDoc._height); }; this.Snapshot(undefined, undefined, makeIcon); }; @@ -376,11 +330,11 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp _height: (height / width) * 150, title: '--snapshot' + NumCast(this.layoutDoc._layout_currentTimecode) + ' image-', }); - Doc.SetNativeWidth(Doc.GetProto(imageSnapshot), Doc.NativeWidth(this.layoutDoc)); - Doc.SetNativeHeight(Doc.GetProto(imageSnapshot), Doc.NativeHeight(this.layoutDoc)); - this.props.addDocument?.(imageSnapshot); + Doc.SetNativeWidth(imageSnapshot[DocData], Doc.NativeWidth(this.layoutDoc)); + Doc.SetNativeHeight(imageSnapshot[DocData], Doc.NativeHeight(this.layoutDoc)); + this._props.addDocument?.(imageSnapshot); const link = DocUtils.MakeLink(imageSnapshot, this.getAnchor(true), { link_relationship: 'video snapshot' }); - link && (Doc.GetProto(link.link_anchor_2 as Doc).timecodeToHide = NumCast((link.link_anchor_2 as Doc).timecodeToShow) + 3); + link && (DocCast(link.link_anchor_2)[DocData].timecodeToHide = NumCast(DocCast(link.link_anchor_2).timecodeToShow) + 3); setTimeout(() => downX !== undefined && downY !== undefined && DocumentManager.Instance.getFirstDocumentView(imageSnapshot)?.startDragging(downX, downY, 'move', true)); }; @@ -389,9 +343,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp const marquee = AnchorMenu.Instance.GetAnchor?.(undefined, addAsAnnotation); if (!addAsAnnotation && marquee) marquee.backgroundColor = 'transparent'; const anchor = addAsAnnotation - ? CollectionStackedTimeline.createAnchor(this.rootDoc, this.dataDoc, this.annotationKey, timecode ? timecode : undefined, undefined, marquee, addAsAnnotation) || this.rootDoc - : Docs.Create.ConfigDocument({ title: '#' + timecode, _timecodeToShow: timecode, annotationOn: this.rootDoc }); - PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), temporal: true } }, this.rootDoc); + ? CollectionStackedTimeline.createAnchor(this.Document, this.dataDoc, this.annotationKey, timecode ? timecode : undefined, undefined, marquee, addAsAnnotation) || this.Document + : Docs.Create.ConfigDocument({ title: '#' + timecode, _timecodeToShow: timecode, annotationOn: this.Document }); + PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), temporal: true } }, this.Document); return anchor; }; @@ -413,16 +367,18 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp @action updateTimecode = () => { !this.unmounting && this.player && (this.layoutDoc._layout_currentTimecode = this.player.currentTime); - try { - this._youtubePlayer && (this.layoutDoc._layout_currentTimecode = this._youtubePlayer.getCurrentTime?.()); - } catch (e) { - console.log('Video Timecode Exception:', e); - } }; - // getView = async (doc: Doc) => { - // return new Promise<Opt<DocumentView>>(res => DocumentManager.Instance.AddViewRenderedCb(doc, dv => res(dv))); - // }; + getView = (doc: Doc, options: FocusViewOptions) => { + if (this._stackedTimeline?.makeDocUnfiltered(doc)) { + if (this.heightPercent === 100) { + this.layoutDoc._layout_timelineHeightPercent = VideoBox.heightPercent; + options.didMove = true; + } + return this._stackedTimeline.getView(doc, options); + } + return new Promise<Opt<DocumentView>>(res => DocumentManager.Instance.AddViewRenderedCb(doc, dv => res(dv))); + }; // extracts video thumbnails and saves them as field of doc getVideoThumbnails = () => { @@ -438,7 +394,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp canvas.height = 100; canvas.width = 100; canvas.getContext('2d')?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, 100, 100); - const retitled = StrCast(this.rootDoc.title).replace(/[ -\.:]/g, ''); + const retitled = StrCast(this.Document.title).replace(/[ -\.:]/g, ''); const encodedFilename = encodeURIComponent('thumbnail' + retitled + '_' + video.currentTime.toString().replace(/\./, '_')); thumbnailPromises?.push(Utils.convertDataUri(canvas.toDataURL(), basename(encodedFilename), true)); const newTime = video.currentTime + video.duration / (VideoBox.numThumbnails - 1); @@ -493,13 +449,13 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp // context menu specificContextMenu = (e: React.MouseEvent): void => { - const field = Cast(this.dataDoc[this.props.fieldKey], VideoField); + const field = Cast(this.dataDoc[this._props.fieldKey], VideoField); if (field) { const url = field.url.href; const subitems: ContextMenuProps[] = []; subitems.push({ description: 'Full Screen', event: this.FullScreen, icon: 'expand' }); subitems.push({ description: 'Take Snapshot', event: this.Snapshot, icon: 'expand-arrows-alt' }); - this.rootDoc.type === DocumentType.SCREENSHOT && + this.Document.type === DocumentType.SCREENSHOT && subitems.push({ description: 'Screen Capture', event: async () => { @@ -515,7 +471,6 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp icon: 'expand-arrows-alt', }); subitems.push({ description: (this.layoutDoc.autoPlayAnchors ? "Don't auto play" : 'Auto play') + ' anchors onClick', event: () => (this.layoutDoc.autoPlayAnchors = !this.layoutDoc.autoPlayAnchors), icon: 'expand-arrows-alt' }); - // subitems.push({ description: "Toggle Native Controls", event: action(() => VideoBox._nativeControls = !VideoBox._nativeControls), icon: "expand-arrows-alt" }); // subitems.push({ description: "Start Trim All", event: () => this.startTrim(TrimScope.All), icon: "expand-arrows-alt" }); // subitems.push({ description: "Start Trim Clip", event: () => this.startTrim(TrimScope.Clip), icon: "expand-arrows-alt" }); // subitems.push({ description: "Stop Trim", event: () => this.finishTrim(), icon: "expand-arrows-alt" }); @@ -533,7 +488,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp event: () => { this.dataDoc.layout = RecordingBox.LayoutString(this.fieldKey); // delete assoicated video data - this.dataDoc[this.props.fieldKey] = ''; + this.dataDoc[this._props.fieldKey] = ''; this.dataDoc[this.fieldKey + '_duration'] = ''; // delete assoicated presentation data this.dataDoc[this.fieldKey + '_presentation'] = ''; @@ -551,7 +506,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp // renders the video and audio @computed get content() { const field = Cast(this.dataDoc[this.fieldKey], VideoField); - const interactive = Doc.ActiveTool !== InkTool.None || !this.props.isSelected() ? '' : '-interactive'; + const interactive = Doc.ActiveTool !== InkTool.None || !this._props.isSelected() ? '' : '-interactive'; const classname = 'videoBox-content' + (this._fullScreen ? '-fullScreen' : '') + interactive; const opacity = this._scrubbing ? 0.3 : this._controlsVisible ? 1 : 0; return !field ? ( @@ -576,9 +531,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp key="video" autoPlay={this._screenCapture} ref={this.setVideoRef} - style={this._fullScreen ? this.fullScreenSize() : this.isCropped ? { width: 'max-content', height: 'max-content', transform: `scale(${1 / NumCast(this.rootDoc._freeform_scale)})`, transformOrigin: 'top left' } : {}} + style={this._fullScreen ? this.fullScreenSize() : this.isCropped ? { width: 'max-content', height: 'max-content', transform: `scale(${1 / NumCast(this.layoutDoc._freeform_scale)})`, transformOrigin: 'top left' } : {}} onCanPlay={this.videoLoad} - controls={VideoBox._nativeControls} + controls={false} onPlay={() => this.Play()} onSeeked={this.updateTimecode} onPause={() => this.Pause()} @@ -587,7 +542,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp Not supported. </video> {!this.audiopath || this.audiopath === field.url.href ? null : ( - <audio ref={this.setAudioRef} className={`audiobox-control${this.props.isContentActive() ? '-interactive' : ''}`}> + <audio ref={this.setAudioRef} className={`audiobox-control${this._props.isContentActive() ? '-interactive' : ''}`}> <source src={this.audiopath} type="audio/mpeg" /> Not supported. </audio> @@ -597,54 +552,6 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp ); } - @action youtubeIframeLoaded = (e: any) => { - if (!this._youtubeContentCreated) { - this._forceCreateYouTubeIFrame = !this._forceCreateYouTubeIFrame; - return; - } else this._youtubeContentCreated = false; - - this.loadYouTube(e.target); - }; - - loadYouTube = (iframe: any) => { - let started = true; - const onYoutubePlayerStateChange = (event: any) => - runInAction(() => { - if (started && event.data === YT.PlayerState.PLAYING) { - started = false; - this._youtubePlayer?.unMute(); - //this.Pause(); - return; - } - if (event.data === YT.PlayerState.PLAYING && !this._playing) this.Play(false); - if (event.data === YT.PlayerState.PAUSED && this._playing) this.Pause(false); - }); - const onYoutubePlayerReady = (event: any) => { - this._disposers.reactionDisposer?.(); - this._disposers.youtubeReactionDisposer?.(); - this._disposers.reactionDisposer = reaction( - () => this.layoutDoc._layout_currentTimecode, - () => !this._playing && this.Seek(NumCast(this.layoutDoc._layout_currentTimecode)) - ); - this._disposers.youtubeReactionDisposer = reaction( - () => Doc.ActiveTool === InkTool.None && this.props.isSelected(true) && !SnappingManager.GetIsDragging() && !DocumentView.Interacting, - interactive => (iframe.style.pointerEvents = interactive ? 'all' : 'none'), - { fireImmediately: true } - ); - }; - if (typeof YT === undefined) setTimeout(() => this.loadYouTube(iframe), 100); - else { - (YT as any)?.ready(() => { - this._youtubePlayer = new YT.Player(`${this.youtubeVideoId + this._youtubeIframeId}-player`, { - events: { - onReady: this.props.dontRegisterView ? undefined : onYoutubePlayerReady, - onStateChange: this.props.dontRegisterView ? undefined : onYoutubePlayerStateChange, - }, - }); - }); - } - }; - // for play button onPlayDown = () => (this._playing ? this.Pause() : this.Play()); @@ -678,9 +585,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp e, action(encodeURIComponent => { this._clicking = false; - if (this.props.isContentActive()) { - // const local = this.props.ScreenToLocalTransform().scale(this.props.scaling?.() || 1).transformPoint(e.clientX, e.clientY); - // this.layoutDoc._layout_timelineHeightPercent = Math.max(0, Math.min(100, local[1] / this.props.PanelHeight() * 100)); + if (this._props.isContentActive()) { + // const local = this.ScreenToLocalTransform().scale(this._props.scaling?.() || 1).transformPoint(e.clientX, e.clientY); + // this.layoutDoc._layout_timelineHeightPercent = Math.max(0, Math.min(100, local[1] / this._props.PanelHeight() * 100)); this.layoutDoc._layout_timelineHeightPercent = 80; } @@ -694,15 +601,15 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp 500 ); }, - this.props.isContentActive(), - this.props.isContentActive() + this._props.isContentActive(), + this._props.isContentActive() ); }; // removes from currently playing display @action removeCurrentlyPlaying = () => { - const docView = this.props.DocumentView?.(); + const docView = this.DocumentView?.(); if (CollectionStackedTimeline.CurrentlyPlaying && docView) { const index = CollectionStackedTimeline.CurrentlyPlaying.indexOf(docView); index !== -1 && CollectionStackedTimeline.CurrentlyPlaying.splice(index, 1); @@ -711,7 +618,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp // adds doc to currently playing display @action addCurrentlyPlaying = () => { - const docView = this.props.DocumentView?.(); + const docView = this.DocumentView?.(); if (!CollectionStackedTimeline.CurrentlyPlaying) { CollectionStackedTimeline.CurrentlyPlaying = []; } @@ -720,25 +627,6 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp } }; - @computed get youtubeContent() { - this._youtubeIframeId = VideoBox._youtubeIframeCounter++; - this._youtubeContentCreated = this._forceCreateYouTubeIFrame ? true : true; - const classname = 'videoBox-content-YouTube' + (this._fullScreen ? '-fullScreen' : ''); - const start = untracked(() => Math.round(NumCast(this.layoutDoc._layout_currentTimecode))); - return ( - <iframe - key={this._youtubeIframeId} - id={`${this.youtubeVideoId + this._youtubeIframeId}-player`} - onPointerLeave={this.updateTimecode} - onLoad={this.youtubeIframeLoaded} - className={classname} - width={Doc.NativeWidth(this.layoutDoc) || 640} - height={Doc.NativeHeight(this.layoutDoc) || 390} - src={`https://www.youtube.com/embed/${this.youtubeVideoId}?enablejsapi=1&rel=0&showinfo=1&autoplay=0&mute=1&start=${start}&modestbranding=1&controls=${VideoBox._nativeControls ? 1 : 0}`} - /> - ); - } - // for annotating, adds doc with time info @action.bound addDocWithTimecode(doc: Doc | Doc[]): boolean { @@ -851,7 +739,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp zoom = (zoom: number) => this.timeline?.setZoom(zoom); // plays link - playLink = (doc: Doc, options: DocFocusOptions) => { + playLink = (doc: Doc, options: FocusViewOptions) => { const startTime = Math.max(0, NumCast(doc.config_clipStart, this._stackedTimeline?.anchorStart(doc) || 0)); const endTime = this.timeline?.anchorEnd(doc); if (startTime !== undefined) { @@ -862,13 +750,13 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp // starts marquee selection marqueeDown = (e: React.PointerEvent) => { - if (!e.altKey && e.button === 0 && NumCast(this.layoutDoc._freeform_scale, 1) === 1 && this.props.isContentActive(true) && ![InkTool.Highlighter, InkTool.Pen].includes(Doc.ActiveTool)) { + if (!e.altKey && e.button === 0 && NumCast(this.layoutDoc._freeform_scale, 1) === 1 && this._props.isContentActive() && ![InkTool.Highlighter, InkTool.Pen].includes(Doc.ActiveTool)) { setupMoveUpEvents( this, e, action(e => { MarqueeAnnotator.clearAnnotations(this._savedAnnotations); - this._marqueeing = [e.clientX, e.clientY]; + this._marqueeref.current?.onInitiateSelection([e.clientX, e.clientY]); return true; }), returnFalse, @@ -882,48 +770,47 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp // ends marquee selection @action finishMarquee = () => { - this._marqueeing = undefined; - this.props.select(true); + this._marqueeref.current?.onTerminateSelection(); + this._props.select(true); }; - timelineWhenChildContentsActiveChanged = action((isActive: boolean) => this.props.whenChildContentsActiveChanged((this._isAnyChildContentActive = isActive))); + timelineWhenChildContentsActiveChanged = action((isActive: boolean) => this._props.whenChildContentsActiveChanged((this._isAnyChildContentActive = isActive))); timelineScreenToLocal = () => - this.props + this._props .ScreenToLocalTransform() .scale(this.scaling()) - .translate(0, (-this.heightPercent / 100) * this.props.PanelHeight()); + .translate(0, (-this.heightPercent / 100) * this._props.PanelHeight()); setPlayheadTime = (time: number) => (this.player!.currentTime = this.layoutDoc._layout_currentTimecode = time); - timelineHeight = () => (this.props.PanelHeight() * (100 - this.heightPercent)) / 100; + timelineHeight = () => (this._props.PanelHeight() * (100 - this.heightPercent)) / 100; playing = () => this._playing; - scaling = () => this.props.NativeDimScaling?.() || 1; + scaling = () => this._props.NativeDimScaling?.() || 1; - panelWidth = () => (this.props.PanelWidth() * this.heightPercent) / 100; - panelHeight = () => (this.layoutDoc._layout_fitWidth ? this.panelWidth() / (Doc.NativeAspect(this.rootDoc) || 1) : (this.props.PanelHeight() * this.heightPercent) / 100); + panelWidth = () => (this._props.PanelWidth() * this.heightPercent) / 100; + panelHeight = () => (this.layoutDoc._layout_fitWidth ? this.panelWidth() / (Doc.NativeAspect(this.dataDoc) || 1) : (this._props.PanelHeight() * this.heightPercent) / 100); screenToLocalTransform = () => { - const offset = (this.props.PanelWidth() - this.panelWidth()) / 2 / this.scaling(); - return this.props + const offset = (this._props.PanelWidth() - this.panelWidth()) / 2 / this.scaling(); + return this._props .ScreenToLocalTransform() .translate(-offset, 0) .scale(100 / this.heightPercent); }; - marqueeFitScaling = () => ((this.props.NativeDimScaling?.() || 1) * this.heightPercent) / 100; marqueeOffset = () => [((this.panelWidth() / 2) * (1 - this.heightPercent / 100)) / (this.heightPercent / 100), 0]; timelineDocFilter = () => [`_isTimelineLabel:true,${Utils.noRecursionHack}:x`]; // renders video controls componentUI = (boundsLeft: number, boundsTop: number) => { - const xf = this.props.ScreenToLocalTransform().inverse(); - const height = this.props.PanelHeight(); + const xf = this.ScreenToLocalBoxXf().inverse(); + const height = this._props.PanelHeight(); const vidHeight = (height * this.heightPercent) / 100 / this.scaling(); - const vidWidth = this.props.PanelWidth() / this.scaling(); + const vidWidth = this._props.PanelWidth() / this.scaling(); const uiHeight = 25; const uiMargin = 10; const yBot = xf.transformPoint(0, vidHeight)[1]; @@ -938,8 +825,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp <div className="videoBox-ui" style={{ - transformOrigin: 'top left', - transform: `rotate(${NumCast(this.rootDoc.rotation)}deg) translate(${-(xRight - xPos) + 10}px, ${yBot - yMid - uiHeight - uiMargin}px)`, + transform: `rotate(${this.ScreenToLocalBoxXf().inverse().RotateDeg}deg) translate(${-(xRight - xPos) + 10}px, ${yBot - yMid - uiHeight - uiMargin}px)`, left: xPos, top: yMid, height: uiHeight, @@ -953,22 +839,22 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp ); }; + thumbnails = () => StrListCast(this.dataDoc[this.fieldKey + '_thumbnails']); // renders CollectionStackedTimeline @computed get renderTimeline() { return ( <div className="videoBox-stackPanel" style={{ transition: this.transition, height: `${100 - this.heightPercent}%`, display: this.heightPercent === 100 ? 'none' : '' }}> <CollectionStackedTimeline ref={action((r: any) => (this._stackedTimeline = r))} - {...this.props} + {...this._props} dataFieldKey={this.fieldKey} fieldKey={this.annotationKey} dictationKey={this.fieldKey + '_dictation'} mediaPath={this.audiopath} - thumbnails={() => StrListCast(this.dataDoc[this.fieldKey + '_thumbnails'])} - renderDepth={this.props.renderDepth + 1} + thumbnails={this.thumbnails} + renderDepth={this._props.renderDepth + 1} startTag={'_timecodeToShow' /* videoStart */} endTag={'_timecodeToHide' /* videoEnd */} - bringToFront={emptyFunction} playFrom={this.playFrom} setTime={this.setPlayheadTime} playing={this.playing} @@ -999,32 +885,33 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp crop = (region: Doc | undefined, addCrop?: boolean) => { if (!region) return; const cropping = Doc.MakeCopy(region, true); - Doc.GetProto(region).backgroundColor = 'transparent'; - Doc.GetProto(region).lockedPosition = true; - Doc.GetProto(region).title = 'region:' + this.rootDoc.title; - Doc.GetProto(region).followLinkToggle = true; + const regionData = region[DocData]; + regionData.backgroundColor = 'transparent'; + regionData.lockedPosition = true; + regionData.title = 'region:' + this.Document.title; + regionData.followLinkToggle = true; region._timecodeToHide = NumCast(region._timecodeToShow) + 0.0001; this.addDocument(region); const anchx = NumCast(cropping.x); const anchy = NumCast(cropping.y); const anchw = NumCast(cropping._width); const anchh = NumCast(cropping._height); - const viewScale = NumCast(this.rootDoc[this.fieldKey + '_nativeWidth']) / anchw; - cropping.title = 'crop: ' + this.rootDoc.title; - cropping.x = NumCast(this.rootDoc.x) + NumCast(this.rootDoc._width); - cropping.y = NumCast(this.rootDoc.y); - cropping._width = anchw * (this.props.NativeDimScaling?.() || 1); - cropping._height = anchh * (this.props.NativeDimScaling?.() || 1); + const viewScale = NumCast(this.dataDoc[this.fieldKey + '_nativeWidth']) / anchw; + cropping.title = 'crop: ' + this.Document.title; + cropping.x = NumCast(this.Document.x) + NumCast(this.layoutDoc._width); + cropping.y = NumCast(this.Document.y); + cropping._width = anchw * (this._props.NativeDimScaling?.() || 1); + cropping._height = anchh * (this._props.NativeDimScaling?.() || 1); cropping.timecodeToHide = undefined; cropping.timecodeToShow = undefined; cropping.onClick = undefined; - const croppingProto = Doc.GetProto(cropping); + const croppingProto = cropping[DocData]; croppingProto.annotationOn = undefined; croppingProto.isDataDoc = true; - croppingProto.proto = Cast(this.rootDoc.proto, Doc, null)?.proto; // set proto of cropping's data doc to be IMAGE_PROTO + croppingProto.proto = Cast(this.Document.proto, Doc, null)?.proto; // set proto of cropping's data doc to be IMAGE_PROTO croppingProto.type = DocumentType.VID; croppingProto.layout = VideoBox.LayoutString('data'); - croppingProto.data = ObjectField.MakeCopy(this.rootDoc[this.fieldKey] as ObjectField); + croppingProto.data = ObjectField.MakeCopy(this.dataDoc[this.fieldKey] as ObjectField); croppingProto['data_nativeWidth'] = anchw; croppingProto['data_nativeHeight'] = anchh; croppingProto.videoCrop = true; @@ -1040,12 +927,12 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp if (addCrop) { DocUtils.MakeLink(region, cropping, { link_relationship: 'cropped image' }); } - this.props.bringToFront(cropping); + this._props.bringToFront?.(cropping); return cropping; }; savedAnnotations = () => this._savedAnnotations; render() { - const borderRad = this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BorderRounding); + const borderRad = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BorderRounding); const borderRadius = borderRad?.includes('px') ? `${Number(borderRad.split('px')[0]) / this.scaling()}px` : borderRad; return ( <div @@ -1055,11 +942,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp style={{ pointerEvents: this.layoutDoc._lockedPosition ? 'none' : undefined, borderRadius, - overflow: this.props.docViewPath?.().slice(-1)[0].layout_fitWidth ? 'auto' : undefined, - }} - onWheel={e => { - e.stopPropagation(); - e.preventDefault(); + overflow: this.DocumentView?.().layout_fitWidth ? 'auto' : undefined, }}> <div className="videoBox-viewer" onPointerDown={this.marqueeDown}> <div @@ -1069,19 +952,19 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp width: this.panelWidth(), height: this.panelHeight(), top: 0, - left: (this.props.PanelWidth() - this.panelWidth()) / 2, + left: (this._props.PanelWidth() - this.panelWidth()) / 2, }}> <CollectionFreeFormView - {...this.props} - setContentView={emptyFunction} + {...this._props} + setContentViewBox={emptyFunction} NativeWidth={returnZero} NativeHeight={returnZero} - renderDepth={this.props.renderDepth + 1} + renderDepth={this._props.renderDepth + 1} fieldKey={this.annotationKey} isAnnotationOverlay={true} annotationLayerHostsContent={true} - PanelWidth={this.props.PanelWidth} - PanelHeight={this.props.PanelHeight} + PanelWidth={this._props.PanelWidth} + PanelHeight={this._props.PanelHeight} isAnyChildContentActive={returnFalse} ScreenToLocalTransform={this.screenToLocalTransform} childFilters={this.timelineDocFilter} @@ -1092,24 +975,26 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp removeDocument={this.removeDocument} moveDocument={this.moveDocument} addDocument={this.addDocWithTimecode}> - {this.youtubeVideoId ? this.youtubeContent : this.content} + {this.content} </CollectionFreeFormView> </div> {this.annotationLayer} - {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? null : ( + {!this._mainCont.current || !this.DocumentView || !this._annotationLayer.current ? null : ( <MarqueeAnnotator - rootDoc={this.rootDoc} + ref={this._marqueeref} + Document={this.Document} scrollTop={0} - down={this._marqueeing} - scaling={this.marqueeFitScaling} - docView={this.props.docViewPath().slice(-1)[0]} + annotationLayerScrollTop={0} + scaling={returnOne} + annotationLayerScaling={this._props.NativeDimScaling} + docView={this.DocumentView} containerOffset={this.marqueeOffset} addDocument={this.addDocWithTimecode} finishMarquee={this.finishMarquee} savedAnnotations={this.savedAnnotations} selectionText={returnEmptyString} annotationLayer={this._annotationLayer.current} - mainCont={this._mainCont.current} + marqueeContainer={this._mainCont.current} anchorMenuCrop={this.crop} /> )} @@ -1120,7 +1005,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp } @computed get UIButtons() { - const bounds = this.props.docViewPath().lastElement().getBounds(); + const bounds = this.DocumentView?.().getBounds; const width = (bounds?.right || 0) - (bounds?.left || 0); const curTime = NumCast(this.layoutDoc._layout_currentTimecode); return ( @@ -1225,5 +1110,3 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp ); } } - -VideoBox._nativeControls = false; diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss index 511c91da0..a1686adaf 100644 --- a/src/client/views/nodes/WebBox.scss +++ b/src/client/views/nodes/WebBox.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.scss'; +@import '../global/globalCssVariables.module.scss'; .webBox { height: 100%; diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 58a765d61..5a07540da 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -1,22 +1,22 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from 'mobx'; +import { htmlToText } from 'html-to-text'; +import { action, computed, IReactionDisposer, makeObservable, observable, ObservableMap, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import * as WebRequest from 'web-request'; import { Doc, DocListCast, Field, Opt } from '../../../fields/Doc'; -import { Height, Width } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; import { HtmlField } from '../../../fields/HtmlField'; import { InkTool } from '../../../fields/InkField'; import { List } from '../../../fields/List'; import { RefField } from '../../../fields/RefField'; import { listSpec } from '../../../fields/Schema'; -import { Cast, ImageCast, NumCast, StrCast, WebCast } from '../../../fields/Types'; +import { Cast, NumCast, StrCast, WebCast } from '../../../fields/Types'; import { ImageField, WebField } from '../../../fields/URLField'; import { TraceMobx } from '../../../fields/util'; import { addStyleSheet, addStyleSheetRule, clearStyleSheetRules, emptyFunction, getWordAtPoint, lightOrDark, returnFalse, returnOne, returnZero, setupMoveUpEvents, smoothScroll, Utils } from '../../../Utils'; import { Docs, DocUtils } from '../../documents/Documents'; import { DocumentManager } from '../../util/DocumentManager'; -import { DragManager } from '../../util/DragManager'; import { ScriptingGlobals } from '../../util/ScriptingGlobals'; import { SnappingManager } from '../../util/SnappingManager'; import { undoBatch, UndoManager } from '../../util/UndoManager'; @@ -24,7 +24,7 @@ import { MarqueeOptionsMenu } from '../collections/collectionFreeForm'; import { CollectionFreeFormView } from '../collections/collectionFreeForm/CollectionFreeFormView'; import { ContextMenu } from '../ContextMenu'; import { ContextMenuProps } from '../ContextMenuItem'; -import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../DocComponent'; +import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../DocComponent'; import { Colors } from '../global/globalEnums'; import { LightboxView } from '../LightboxView'; import { MarqueeAnnotator } from '../MarqueeAnnotator'; @@ -33,17 +33,15 @@ import { Annotation } from '../pdf/Annotation'; import { GPTPopup } from '../pdf/GPTPopup/GPTPopup'; import { SidebarAnnos } from '../SidebarAnnos'; import { StyleProp } from '../StyleProvider'; -import { DocComponentView, DocFocusOptions, DocumentView, DocumentViewProps, OpenWhere } from './DocumentView'; -import { FieldView, FieldViewProps } from './FieldView'; -import { LinkDocPreview } from './LinkDocPreview'; +import { DocumentView, OpenWhere } from './DocumentView'; +import { FocusViewOptions, FieldView, FieldViewProps } from './FieldView'; +import { LinkInfo } from './LinkDocPreview'; import { PinProps, PresBox } from './trails'; import './WebBox.scss'; -import React = require('react'); const { CreateImage } = require('./WebBoxRenderer'); const _global = (window /* browser */ || global) /* node */ as any; -const htmlToText = require('html-to-text'); @observer -export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps>() { +export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(WebBox, fieldKey); } @@ -51,9 +49,9 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps public static sidebarResizerWidth = 5; static webStyleSheet = addStyleSheet(); private _setPreviewCursor: undefined | ((x: number, y: number, drag: boolean, hide: boolean, doc: Opt<Doc>) => void); - private _setBrushViewer: undefined | ((view: { width: number; height: number; panX: number; panY: number }, transTime: number) => void); private _mainCont: React.RefObject<HTMLDivElement> = React.createRef(); private _outerRef: React.RefObject<HTMLDivElement> = React.createRef(); + private _marqueeref = React.createRef<MarqueeAnnotator>(); private _disposers: { [name: string]: IReactionDisposer } = {}; private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef(); private _keyInput = React.createRef<HTMLInputElement>(); @@ -69,10 +67,15 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps @observable private _searching: boolean = false; @observable private _showSidebar = false; @observable private _webPageHasBeenRendered = false; - @observable private _overlayAnnoInfo: Opt<Doc>; - @observable private _marqueeing: number[] | undefined; - @observable private _isAnnotating = false; - @observable private _iframeClick: HTMLIFrameElement | undefined = undefined; + @observable private _marqueeing: number[] | undefined = undefined; + get marqueeing() { + return this._marqueeing; + } + set marqueeing(val) { + val && this._marqueeref.current?.onInitiateSelection(val); + !val && this._marqueeref.current?.onTerminateSelection(); + this._marqueeing = val; + } @observable private _iframe: HTMLIFrameElement | null = null; @observable private _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>(); @observable private _scrollHeight = NumCast(this.layoutDoc.scrollHeight); @@ -83,7 +86,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps return this._url ? WebBox.urlHash(this._url) + '' : ''; } @computed get scrollHeight() { - return Math.max(this.layoutDoc[Height](), this._scrollHeight); + return Math.max(NumCast(this.layoutDoc._height), this._scrollHeight); } @computed get allAnnotations() { return DocListCast(this.dataDoc[this.annotationKey]); @@ -92,12 +95,13 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps return this.allAnnotations.filter(a => a.text_inlineAnnotations); } @computed get webField() { - return Cast(this.rootDoc[this.props.fieldKey], WebField)?.url; + return Cast(this.Document[this._props.fieldKey], WebField)?.url; } - constructor(props: any) { + constructor(props: FieldViewProps) { super(props); - runInAction(() => (this._webUrl = this._url)); // setting the weburl will change the src parameter of the embedded iframe and force a navigation to it. + makeObservable(this); + this._webUrl = this._url; // setting the weburl will change the src parameter of the embedded iframe and force a navigation to it. } @action @@ -136,13 +140,13 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps if (!this._iframe) return; const scrollTop = NumCast(this.layoutDoc._layout_scrollTop); const nativeWidth = NumCast(this.layoutDoc.nativeWidth); - const nativeHeight = (nativeWidth * this.props.PanelHeight()) / this.props.PanelWidth(); + const nativeHeight = (nativeWidth * this._props.PanelHeight()) / this._props.PanelWidth(); var htmlString = this._iframe.contentDocument && new XMLSerializer().serializeToString(this._iframe.contentDocument); if (!htmlString) { htmlString = await (await fetch(Utils.CorsProxy(this.webField!.href))).text(); } this.layoutDoc.thumb = undefined; - this.rootDoc.thumbLockout = true; // lock to prevent multiple thumb updates. + this.Document.thumbLockout = true; // lock to prevent multiple thumb updates. CreateImage(this._webUrl.endsWith('/') ? this._webUrl.substring(0, this._webUrl.length - 1) : this._webUrl, this._iframe.contentDocument?.styleSheets ?? [], htmlString, nativeWidth, nativeHeight, scrollTop) .then((data_url: any) => { if (data_url.includes('<!DOCTYPE')) { @@ -152,7 +156,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps Utils.convertDataUri(data_url, this.layoutDoc[Id] + '-icon' + new Date().getTime(), true, this.layoutDoc[Id] + '-icon').then(returnedfilename => setTimeout( action(() => { - this.rootDoc.thumbLockout = false; + this.Document.thumbLockout = false; this.layoutDoc.thumb = new ImageField(returnedfilename); this.layoutDoc.thumbScrollTop = scrollTop; this.layoutDoc.thumbNativeWidth = nativeWidth; @@ -167,8 +171,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps }); }; - async componentDidMount() { - this.props.setContentView?.(this); // this tells the DocumentView that this WebBox is the "content" of the document. this allows the DocumentView to call WebBox relevant methods to configure the UI (eg, show back/forward buttons) + componentDidMount() { + this._props.setContentViewBox?.(this); // this tells the DocumentView that this WebBox is the "content" of the document. this allows the DocumentView to call WebBox relevant methods to configure the UI (eg, show back/forward buttons) runInAction(() => { this._annotationKeySuffix = () => (this._urlHash ? this._urlHash + '_' : '') + 'annotations'; @@ -182,11 +186,11 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps } }); this._disposers.urlchange = reaction( - () => WebCast(this.rootDoc.data), + () => WebCast(this.dataDoc.data), url => this.submitURL(false, false) ); this._disposers.titling = reaction( - () => StrCast(this.rootDoc.title), + () => StrCast(this.Document.title), url => { url.startsWith('www') && this.setData('http://' + url); url.startsWith('http') && this.setData(url); @@ -197,8 +201,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps () => this.layoutDoc._layout_autoHeight, layout_autoHeight => { if (layout_autoHeight) { - this.layoutDoc._nativeHeight = NumCast(this.props.Document[this.props.fieldKey + '_nativeHeight']); - this.props.setHeight?.(NumCast(this.props.Document[this.props.fieldKey + '_nativeHeight']) * (this.props.NativeDimScaling?.() || 1)); + this.layoutDoc._nativeHeight = NumCast(this.Document[this._props.fieldKey + '_nativeHeight']); + this._props.setHeight?.(NumCast(this.Document[this._props.fieldKey + '_nativeHeight']) * (this._props.NativeDimScaling?.() || 1)); } } ); @@ -211,14 +215,12 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps if (!nativeWidth || !nativeHeight || Math.abs(nativeWidth / nativeHeight - youtubeaspect) > 0.05) { if (!nativeWidth) Doc.SetNativeWidth(this.layoutDoc, 600); Doc.SetNativeHeight(this.layoutDoc, (nativeWidth || 600) / youtubeaspect); - this.layoutDoc._height = this.layoutDoc[Width]() / youtubeaspect; + this.layoutDoc._height = NumCast(this.layoutDoc._width) / youtubeaspect; } } // else it's an HTMLfield } else if (this.webField && !this.dataDoc.text) { - const result = await WebRequest.get(Utils.CorsProxy(this.webField.href)); - if (result) { - this.dataDoc.text = htmlToText.fromString(result.content); - } + WebRequest.get(Utils.CorsProxy(this.webField.href)) // + .then(result => result && (this.dataDoc.text = htmlToText(result.content))); } this._disposers.scrollReaction = reaction( @@ -233,7 +235,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps { fireImmediately: true } ); } - @action componentWillUnmount() { + componentWillUnmount() { this._iframetimeout && clearTimeout(this._iframetimeout); this._iframetimeout = undefined; Object.values(this._disposers).forEach(disposer => disposer?.()); @@ -248,6 +250,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps @action createTextAnnotation = (sel: Selection, selRange: Range | undefined) => { if (this._mainCont.current && selRange) { + if (this.dataDoc[this._props.fieldKey] instanceof HtmlField) this._mainCont.current.style.transform = `rotate(${NumCast(this.DocumentView!().screenToContentsTransform().RotateDeg)}deg)`; const clientRects = selRange.getClientRects(); for (let i = 0; i < clientRects.length; i++) { const rect = clientRects.item(i); @@ -255,7 +258,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps if (rect && rect.width !== this._mainCont.current.clientWidth) { const annoBox = document.createElement('div'); annoBox.className = 'marqueeAnnotator-annotationBox'; - const scale = this._url ? 1 : this.props.ScreenToLocalTransform().Scale; + const scale = this._url ? 1 : this.ScreenToLocalBoxXf().Scale; // transforms the positions from screen onto the pdf div annoBox.style.top = ((rect.top - mainrect.translateY) * scale + (this._url ? this._mainCont.current.scrollTop : NumCast(this.layoutDoc.layout_scrollTop))).toString(); annoBox.style.left = ((rect.left - mainrect.translateX) * scale).toString(); @@ -264,23 +267,23 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps this._annotationLayer.current && MarqueeAnnotator.previewNewAnnotation(this._savedAnnotations, this._annotationLayer.current, annoBox, 1); } } + this._mainCont.current.style.transform = ''; } - //this._selectionText = selRange.cloneContents().textContent || ""; this._selectionContent = selRange?.cloneContents(); this._selectionText = this._selectionContent?.textContent || ''; // clear selection - if (sel.empty) sel.empty(); // Chrome + this._textAnnotationCreator = undefined; + if (sel.empty) + sel.empty(); // Chrome else if (sel.removeAllRanges) sel.removeAllRanges(); // Firefox return this._savedAnnotations; }; - setBrushViewer = (func?: (view: { width: number; height: number; panX: number; panY: number }, transTime: number) => void) => (this._setBrushViewer = func); - brushView = (view: { width: number; height: number; panX: number; panY: number }, transTime: number) => this._setBrushViewer?.(view, transTime); - focus = (anchor: Doc, options: DocFocusOptions) => { - if (anchor !== this.rootDoc && this._outerRef.current) { - const windowHeight = this.props.PanelHeight() / (this.props.NativeDimScaling?.() || 1); - const scrollTo = Utils.scrollIntoView(NumCast(anchor.y), anchor[Height](), NumCast(this.layoutDoc._layout_scrollTop), windowHeight, windowHeight * 0.1, Math.max(NumCast(anchor.y) + anchor[Height](), this._scrollHeight)); + focus = (anchor: Doc, options: FocusViewOptions) => { + if (anchor !== this.Document && this._outerRef.current) { + const windowHeight = this._props.PanelHeight() / (this._props.NativeDimScaling?.() || 1); + const scrollTo = Utils.scrollIntoView(NumCast(anchor.y), NumCast(anchor._height), NumCast(this.layoutDoc._layout_scrollTop), windowHeight, windowHeight * 0.1, Math.max(NumCast(anchor.y) + NumCast(anchor._height), this._scrollHeight)); if (scrollTo !== undefined) { if (this._initialScroll === undefined) { const focusTime = options.zoomTime ?? 500; @@ -294,9 +297,9 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps }; @action - getView = (doc: Doc) => { - if (Doc.AreProtosEqual(doc, this.rootDoc)) return new Promise<Opt<DocumentView>>(res => res(this.props.DocumentView?.())); - if (this.rootDoc.layout_fieldKey === 'layout_icon') this.props.DocumentView?.().iconify(); + getView = (doc: Doc, options: FocusViewOptions) => { + if (Doc.AreProtosEqual(doc, this.Document)) return new Promise<Opt<DocumentView>>(res => res(this.DocumentView?.())); + if (this.Document.layout_fieldKey === 'layout_icon') this.DocumentView?.().iconify(); const webUrl = WebCast(doc.config_data)?.url; if (this._url && webUrl && webUrl.href !== this._url) this.setData(webUrl.href); if (this._sidebarRef?.current?.makeDocUnfiltered(doc) && !this.SidebarShown) this.toggleSidebar(false); @@ -304,11 +307,11 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps }; sidebarAddDocTab = (doc: Doc, where: OpenWhere) => { - if (DocListCast(this.props.Document[this.props.fieldKey + '_sidebar']).includes(doc) && !this.SidebarShown) { + if (DocListCast(this.Document[this._props.fieldKey + '_sidebar']).includes(doc) && !this.SidebarShown) { this.toggleSidebar(false); return true; } - return this.props.addDocTab(doc, where); + return this._props.addDocTab(doc, where); }; getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => { let ele: Opt<HTMLDivElement> = undefined; @@ -319,15 +322,15 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps ele.append(contents); } } catch (e) {} - const visibleAnchor = this._getAnchor(this._savedAnnotations, false); + const visibleAnchor = this._getAnchor(this._savedAnnotations, true); const anchor = visibleAnchor ?? Docs.Create.ConfigDocument({ - title: StrCast(this.rootDoc.title + ' ' + this.layoutDoc._layout_scrollTop), + title: StrCast(this.Document.title + ' ' + this.layoutDoc._layout_scrollTop), y: NumCast(this.layoutDoc._layout_scrollTop), - annotationOn: this.rootDoc, + annotationOn: this.Document, }); - PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), scrollable: pinProps?.pinData ? true : false, pannable: true } }, this.rootDoc); + PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), scrollable: pinProps?.pinData ? true : false, pannable: true } }, this.Document); anchor.text = ele?.textContent ?? ''; anchor.text_html = ele?.innerHTML ?? this._selectionText; addAsAnnotation && this.addDocumentWrapper(anchor); @@ -339,11 +342,12 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps @action iframeUp = (e: PointerEvent) => { + this._getAnchor = AnchorMenu.Instance?.GetAnchor; // need to save AnchorMenu's getAnchor since a subsequent selection on another doc will overwrite this value this._textAnnotationCreator = undefined; - this.props.docViewPath().lastElement()?.docView?.cleanupPointerEvents(); // pointerup events aren't generated on containing document view, so we have to invoke it here. + this.DocumentView?.()?.cleanupPointerEvents(); // pointerup events aren't generated on containing document view, so we have to invoke it here. if (this._iframe?.contentWindow && this._iframe.contentDocument && !this._iframe.contentWindow.getSelection()?.isCollapsed) { const mainContBounds = Utils.GetScreenTransform(this._mainCont.current!); - const scale = (this.props.NativeDimScaling?.() || 1) * mainContBounds.scale; + const scale = (this._props.NativeDimScaling?.() || 1) * mainContBounds.scale; const sel = this._iframe.contentWindow.getSelection(); if (sel) { this._selectionText = sel.toString(); @@ -351,33 +355,35 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps this._textAnnotationCreator = () => this.createTextAnnotation(sel, !sel.isCollapsed ? sel.getRangeAt(0) : undefined); AnchorMenu.Instance.jumpTo(e.clientX * scale + mainContBounds.translateX, e.clientY * scale + mainContBounds.translateY - NumCast(this.layoutDoc._layout_scrollTop) * scale); // Changing which document to add the annotation to (the currently selected WebBox) - GPTPopup.Instance.setSidebarId(`${this.props.fieldKey}_${this._urlHash ? this._urlHash + '_' : ''}sidebar`); + GPTPopup.Instance.setSidebarId(`${this._props.fieldKey}_${this._urlHash ? this._urlHash + '_' : ''}sidebar`); GPTPopup.Instance.addDoc = this.sidebarAddDocument; } } }; @action webClipDown = (e: React.PointerEvent) => { - const mainContBounds = Utils.GetScreenTransform(this._mainCont.current!); + e.stopPropagation(); + const sel = window.getSelection(); + this._textAnnotationCreator = undefined; + if (sel?.empty) + sel.empty(); // Chrome + else if (sel?.removeAllRanges) sel.removeAllRanges(); // Firefox + // bcz: NEED TO unrotate e.clientX and e.clientY const word = getWordAtPoint(e.target, e.clientX, e.clientY); - this._setPreviewCursor?.(e.clientX, e.clientY, false, true, this.rootDoc); + this._setPreviewCursor?.(e.clientX, e.clientY, false, true, this.Document); MarqueeAnnotator.clearAnnotations(this._savedAnnotations); - e.button !== 2 && (this._marqueeing = [e.clientX, e.clientY]); - if (word || (e.target as any)?.className?.includes('rangeslider') || (e.target as any)?.onclick || (e.target as any)?.parentNode?.onclick) { - e.stopPropagation(); - setTimeout( - action(() => (this._marqueeing = undefined)), - 100 - ); // bcz: hack .. anchor menu is setup within MarqueeAnnotator so we need to at least create the marqueeAnnotator even though we aren't using it. - } else { - this._isAnnotating = true; - this.props.select(false); - e.stopPropagation(); + + if (!word && !(e.target as any)?.className?.includes('rangeslider') && !(e.target as any)?.onclick && !(e.target as any)?.parentNode?.onclick) { + if (e.button !== 2) this.marqueeing = [e.clientX, e.clientY]; e.preventDefault(); } document.addEventListener('pointerup', this.webClipUp); }; + @action webClipUp = (e: PointerEvent) => { + if (window.getSelection()?.isCollapsed && this._marqueeref.current?.isEmpty) { + this.marqueeing = undefined; + } document.removeEventListener('pointerup', this.webClipUp); this._getAnchor = AnchorMenu.Instance?.GetAnchor; // need to save AnchorMenu's getAnchor since a subsequent selection on another doc will overwrite this value const sel = window.getSelection(); @@ -386,44 +392,27 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps this._selectionText = sel.toString(); AnchorMenu.Instance.setSelectedText(sel.toString()); this._textAnnotationCreator = () => this.createTextAnnotation(sel, selRange); - AnchorMenu.Instance.jumpTo(e.clientX, e.clientY); + (!sel.isCollapsed || this.marqueeing) && AnchorMenu.Instance.jumpTo(e.clientX, e.clientY); // Changing which document to add the annotation to (the currently selected WebBox) - GPTPopup.Instance.setSidebarId(`${this.props.fieldKey}_${this._urlHash ? this._urlHash + '_' : ''}sidebar`); + GPTPopup.Instance.setSidebarId(`${this._props.fieldKey}_${this._urlHash ? this._urlHash + '_' : ''}sidebar`); GPTPopup.Instance.addDoc = this.sidebarAddDocument; } }; @action iframeDown = (e: PointerEvent) => { - const mainContBounds = Utils.GetScreenTransform(this._mainCont.current!); - const scale = (this.props.NativeDimScaling?.() || 1) * mainContBounds.scale; - const word = getWordAtPoint(e.target, e.clientX, e.clientY); - this._setPreviewCursor?.(e.clientX, e.clientY, false, true, this.rootDoc); + this._props.select(false); + const theclick = this.props + .ScreenToLocalTransform() + .inverse() + .transformPoint(e.clientX, e.clientY - NumCast(this.layoutDoc.layout_scrollTop)); MarqueeAnnotator.clearAnnotations(this._savedAnnotations); - e.button !== 2 && (this._marqueeing = [e.clientX * scale + mainContBounds.translateX, e.clientY * scale + mainContBounds.translateY - NumCast(this.layoutDoc._layout_scrollTop) * scale]); - if (word || (e.target as any)?.className?.includes('rangeslider') || (e.target as any)?.onclick || (e.target as any)?.parentNode?.onclick) { - setTimeout( - action(() => (this._marqueeing = undefined)), - 100 - ); // bcz: hack .. anchor menu is setup within MarqueeAnnotator so we need to at least create the marqueeAnnotator even though we aren't using it. - } else { - this._iframeClick = this._iframe ?? undefined; - this._isAnnotating = true; - this.props.select(false); - e.stopPropagation(); + const word = getWordAtPoint(e.target, e.clientX, e.clientY); + if (!word && !(e.target as any)?.className?.includes('rangeslider') && !(e.target as any)?.onclick && !(e.target as any)?.parentNode?.onclick) { + this.marqueeing = theclick; e.preventDefault(); } - - // bcz: hack - iframe grabs all events which messes up how we handle contextMenus. So this super naively simulates the event stack to get the specific menu items and the doc view menu items. - if (e.button === 2 || (e.button === 0 && e.altKey)) { - e.preventDefault(); - //e.stopPropagation(); - ContextMenu.Instance.closeMenu(); - ContextMenu.Instance.setIgnoreEvents(true); - } }; isFirefox = () => 'InstallTrigger' in window; // navigator.userAgent.indexOf("Chrome") !== -1; - iframeClick = () => this._iframeClick; - iframeScaling = () => 1 / this.props.ScreenToLocalTransform().Scale; addWebStyleSheet(document: any, styleType: string = 'text/css') { if (document) { @@ -493,16 +482,16 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps const initHeights = () => { this._scrollHeight = Math.max(this._scrollHeight, iframeContent.body.scrollHeight || 0); if (this._scrollHeight) { - this.rootDoc.nativeHeight = Math.min(NumCast(this.rootDoc.nativeHeight), this._scrollHeight); - this.layoutDoc.height = Math.min(this.layoutDoc[Height](), (this.layoutDoc[Width]() * NumCast(this.rootDoc.nativeHeight)) / NumCast(this.rootDoc.nativeWidth)); + this.Document.nativeHeight = Math.min(NumCast(this.Document.nativeHeight), this._scrollHeight); + this.layoutDoc.height = Math.min(NumCast(this.layoutDoc._height), (NumCast(this.layoutDoc._width) * NumCast(this.Document.nativeHeight)) / NumCast(this.Document.nativeWidth)); } }; - const swidth = Math.max(NumCast(this.layoutDoc.nativeWidth), iframeContent.body.scrollWidth || 0); + const swidth = Math.max(NumCast(this.Document.nativeWidth), iframeContent.body.scrollWidth || 0); if (swidth) { - const aspectResize = swidth / NumCast(this.rootDoc.nativeWidth); - this.rootDoc.nativeWidth = swidth; - this.rootDoc.nativeHeight = NumCast(this.rootDoc.nativeHeight) * aspectResize; - this.layoutDoc.height = this.layoutDoc[Height]() * aspectResize; + const aspectResize = swidth / NumCast(this.Document.nativeWidth, swidth); + this.layoutDoc.height = NumCast(this.layoutDoc._height) * aspectResize; + this.Document.nativeWidth = swidth; + this.Document.nativeHeight = (swidth * NumCast(this.layoutDoc._height)) / NumCast(this.layoutDoc._width); } initHeights(); this._iframetimeout && clearTimeout(this._iframetimeout); @@ -569,7 +558,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps clearStyleSheetRules(WebBox.webStyleSheet); this._scrollTimer = undefined; const newScrollTop = scrollTop > iframeHeight ? iframeHeight : scrollTop; - if (!LinkDocPreview.LinkInfo && this._outerRef.current && newScrollTop !== this.layoutDoc.thumbScrollTop && (!LightboxView.LightboxDoc || LightboxView.IsLightboxDocView(this.props.docViewPath()))) { + if (!LinkInfo.Instance?.LinkInfo && this._outerRef.current && newScrollTop !== this.layoutDoc.thumbScrollTop && (!LightboxView.LightboxDoc || LightboxView.Contains(this.DocumentView?.()))) { this.layoutDoc.thumb = undefined; this.layoutDoc.thumbScrollTop = undefined; this.layoutDoc.thumbNativeWidth = undefined; @@ -591,8 +580,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps }; forward = (checkAvailable?: boolean) => { - const future = Cast(this.rootDoc[this.fieldKey + '_future'], listSpec('string'), []); - const history = Cast(this.rootDoc[this.fieldKey + '_history'], listSpec('string'), []); + const future = Cast(this.dataDoc[this.fieldKey + '_future'], listSpec('string'), []); + const history = Cast(this.dataDoc[this.fieldKey + '_history'], listSpec('string'), []); if (checkAvailable) return future.length; runInAction(() => { if (future.length) { @@ -613,8 +602,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps }; back = (checkAvailable?: boolean) => { - const future = Cast(this.rootDoc[this.fieldKey + '_future'], listSpec('string')); - const history = Cast(this.rootDoc[this.fieldKey + '_history'], listSpec('string'), []); + const future = Cast(this.dataDoc[this.fieldKey + '_future'], listSpec('string')); + const history = Cast(this.dataDoc[this.fieldKey + '_history'], listSpec('string'), []); if (checkAvailable) return history.length; runInAction(() => { if (history.length) { @@ -682,7 +671,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps if (Field.toString(data) === this._url) return false; this._scrollHeight = 0; const oldUrl = this._url; - const history = Cast(this.rootDoc[this.fieldKey + '_history'], listSpec('string'), []); + const history = Cast(this.dataDoc[this.fieldKey + '_history'], listSpec('string'), []); const weburl = new WebField(Field.toString(data)); this.dataDoc[this.fieldKey + '_future'] = new List<string>([]); this.dataDoc[this.fieldKey + '_history'] = new List<string>([...(history || []), oldUrl]); @@ -712,10 +701,10 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps icon: 'snowflake', }); funcs.push({ - description: (!this.layoutDoc.layout_forceReflow ? 'Force' : 'Prevent') + ' Reflow', + description: (!this.layoutDoc.layout_reflowHorizontal ? 'Force' : 'Prevent') + ' Reflow', event: () => { - const nw = !this.layoutDoc.layout_forceReflow ? undefined : Doc.NativeWidth(this.layoutDoc) - this.sidebarWidth() / (this.props.NativeDimScaling?.() || 1); - this.layoutDoc.layout_forceReflow = !nw; + const nw = !this.layoutDoc.layout_reflowHorizontal ? undefined : Doc.NativeWidth(this.layoutDoc) - this.sidebarWidth() / (this._props.NativeDimScaling?.() || 1); + this.layoutDoc.layout_reflowHorizontal = !nw; if (nw) { Doc.SetInPlace(this.layoutDoc, this.fieldKey + '_nativeWidth', nw, true); } @@ -727,38 +716,58 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps } }; + /** + * This gets called when some other child of the webbox is selected and a pointer down occurs on the webbox. + * it's also called for html clippings when you click outside the bounds of the clipping + * @param e + */ @action onMarqueeDown = (e: React.PointerEvent) => { - if (!e.altKey && e.button === 0 && this.props.isContentActive(true) && ![InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) { + const sel = this._url ? this._iframe?.contentDocument?.getSelection() : window.document.getSelection(); + this._textAnnotationCreator = undefined; + if (sel?.empty) + sel.empty(); // Chrome + else if (sel?.removeAllRanges) sel.removeAllRanges(); // Firefox + this.marqueeing = [e.clientX, e.clientY]; + if (!e.altKey && e.button === 0 && this._props.isContentActive() && ![InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) { setupMoveUpEvents( this, e, action(e => { MarqueeAnnotator.clearAnnotations(this._savedAnnotations); - this._marqueeing = [e.clientX, e.clientY]; return true; }), returnFalse, - () => MarqueeAnnotator.clearAnnotations(this._savedAnnotations), + action(() => { + this.marqueeing = undefined; + MarqueeAnnotator.clearAnnotations(this._savedAnnotations); + }), false ); + } else { + this.marqueeing = undefined; } }; @action finishMarquee = (x?: number, y?: number, e?: PointerEvent) => { this._getAnchor = AnchorMenu.Instance?.GetAnchor; - this._marqueeing = undefined; - this._isAnnotating = false; - this._iframeClick = undefined; + this.marqueeing = undefined; + this._textAnnotationCreator = undefined; const sel = this._url ? this._iframe?.contentDocument?.getSelection() : window.document.getSelection(); - if (sel?.empty) sel.empty(); // Chrome + if (sel?.empty) + sel.empty(); // Chrome else if (sel?.removeAllRanges) sel.removeAllRanges(); // Firefox + this._setPreviewCursor?.(x ?? 0, y ?? 0, false, !this._marqueeref.current?.isEmpty, this.Document); if (x !== undefined && y !== undefined) { - this._setPreviewCursor?.(x, y, false, false, this.rootDoc); ContextMenu.Instance.closeMenu(); ContextMenu.Instance.setIgnoreEvents(false); if (e?.button === 2 || e?.altKey) { - this.specificContextMenu(undefined as any); - this.props.docViewPath().lastElement().docView?.onContextMenu(undefined, x, y); + e?.preventDefault(); + e?.stopPropagation(); + setTimeout(() => { + // if menu comes up right away, the down event can still be active causing a menu item to be selected + this.specificContextMenu(undefined as any); + this.DocumentView?.().onContextMenu(undefined, x, y); + }); } } }; @@ -766,6 +775,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps @observable lighttext = false; @computed get urlContent() { + if (this.ScreenToLocalBoxXf().Scale > 25) return <div></div>; setTimeout( action(() => { if (this._initialScroll === undefined && !this._webPageHasBeenRendered) { @@ -774,7 +784,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps this._webPageHasBeenRendered = true; }) ); - const field = this.rootDoc[this.props.fieldKey]; + const field = this.dataDoc[this._props.fieldKey]; if (field instanceof HtmlField) { return ( <span @@ -800,7 +810,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps key={this._warning} className="webBox-iframe" ref={action((r: HTMLIFrameElement | null) => (this._iframe = r))} - style={{ pointerEvents: this._isAnyChildContentActive || DocumentView.Interacting ? 'none' : undefined }} + style={{ pointerEvents: SnappingManager.IsResizing ? 'none' : undefined }} src={url} onLoad={this.iframeLoaded} scrolling="no" // ugh.. on windows, I get an inner scroll bar for the iframe's body even though the scrollHeight should be set to the full height of the document. @@ -831,18 +841,18 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps e, action((e, down, delta) => { this._draggingSidebar = true; - const localDelta = this.props + const localDelta = this._props .ScreenToLocalTransform() - .scale(this.props.NativeDimScaling?.() || 1) + .scale(this._props.NativeDimScaling?.() || 1) .transformDirection(delta[0], delta[1]); const nativeWidth = NumCast(this.layoutDoc[this.fieldKey + '_nativeWidth']); const nativeHeight = NumCast(this.layoutDoc[this.fieldKey + '_nativeHeight']); const curNativeWidth = NumCast(this.layoutDoc.nativeWidth, nativeWidth); - const ratio = (curNativeWidth + ((onButton ? 1 : -1) * localDelta[0]) / (this.props.NativeDimScaling?.() || 1)) / nativeWidth; + const ratio = (curNativeWidth + ((onButton ? 1 : -1) * localDelta[0]) / (this._props.NativeDimScaling?.() || 1)) / nativeWidth; if (ratio >= 1) { this.layoutDoc.nativeWidth = nativeWidth * ratio; this.layoutDoc.nativeHeight = nativeHeight * (1 + ratio); - onButton && (this.layoutDoc._width = this.layoutDoc[Width]() + localDelta[0]); + onButton && (this.layoutDoc._width = NumCast(this.layoutDoc._width) + localDelta[0]); this.layoutDoc._layout_showSidebar = nativeWidth !== this.layoutDoc._nativeWidth; } return false; @@ -864,7 +874,6 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps key="sidebar" title="Toggle Sidebar" style={{ - display: !this.props.isContentActive() ? 'none' : undefined, top: StrCast(this.layoutDoc._layout_showTitle) === 'title' ? 20 : 5, backgroundColor: this.SidebarShown ? Colors.MEDIUM_BLUE : Colors.BLACK, }} @@ -878,31 +887,32 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps toggleSidebar = action((preview: boolean = false) => { var nativeWidth = NumCast(this.layoutDoc[this.fieldKey + '_nativeWidth']); if (!nativeWidth) { - const defaultNativeWidth = this.rootDoc[this.fieldKey] instanceof WebField ? 850 : this.Document[Width](); + const defaultNativeWidth = NumCast(this.Document.nativeWidth, this.dataDoc[this.fieldKey] instanceof WebField ? 850 : NumCast(this.Document._width)); Doc.SetNativeWidth(this.dataDoc, Doc.NativeWidth(this.dataDoc) || defaultNativeWidth); - Doc.SetNativeHeight(this.dataDoc, Doc.NativeHeight(this.dataDoc) || (this.Document[Height]() / this.Document[Width]()) * defaultNativeWidth); + Doc.SetNativeHeight(this.dataDoc, Doc.NativeHeight(this.dataDoc) || (NumCast(this.Document._height) / NumCast(this.Document._width)) * defaultNativeWidth); nativeWidth = NumCast(this.layoutDoc[this.fieldKey + '_nativeWidth']); } const sideratio = ((!this.layoutDoc.nativeWidth || this.layoutDoc.nativeWidth === nativeWidth ? WebBox.openSidebarWidth : 0) + nativeWidth) / nativeWidth; - const pdfratio = ((!this.layoutDoc.nativeWidth || this.layoutDoc.nativeWidth === nativeWidth ? WebBox.openSidebarWidth + WebBox.sidebarResizerWidth : 0) + nativeWidth) / nativeWidth; + const pdfratio = ((!this.layoutDoc.nativeWidth || this.layoutDoc.nativeWidth === nativeWidth ? WebBox.openSidebarWidth + WebBox.sidebarResizerWidth : 0) + NumCast(this.layoutDoc.width)) / NumCast(this.layoutDoc.width); const curNativeWidth = NumCast(this.layoutDoc.nativeWidth, nativeWidth); if (preview) { this._previewNativeWidth = nativeWidth * sideratio; - this._previewWidth = (this.layoutDoc[Width]() * nativeWidth * sideratio) / curNativeWidth; + this._previewWidth = (NumCast(this.layoutDoc._width) * nativeWidth * sideratio) / curNativeWidth; this._showSidebar = true; } else { this.layoutDoc._layout_showSidebar = !this.layoutDoc._layout_showSidebar; - this.layoutDoc._width = (this.layoutDoc[Width]() * nativeWidth * pdfratio) / curNativeWidth; + this.layoutDoc._width = (NumCast(this.layoutDoc._width) * nativeWidth * pdfratio) / curNativeWidth; if (!this.layoutDoc._layout_showSidebar && !(this.dataDoc[this.fieldKey] instanceof WebField)) { this.layoutDoc.nativeWidth = this.dataDoc[this.fieldKey + '_nativeWidth'] = undefined; } else { + !this.layoutDoc._layout_showSidebar && (this.dataDoc[this.fieldKey + '_nativeWidth'] = this.dataDoc[this.fieldKey + '_nativeHeight'] = undefined); this.layoutDoc.nativeWidth = nativeWidth * pdfratio; } } }); @action onZoomWheel = (e: React.WheelEvent) => { - if (this.props.isContentActive(true)) { + if (this._props.isContentActive()) { e.stopPropagation(); } }; @@ -910,20 +920,20 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps if (!this.SidebarShown) return 0; if (this._previewWidth) return WebBox.sidebarResizerWidth + WebBox.openSidebarWidth; // return default sidebar if previewing (as in viewing a link target) const nativeDiff = NumCast(this.layoutDoc.nativeWidth) - Doc.NativeWidth(this.dataDoc); - return WebBox.sidebarResizerWidth + nativeDiff * (this.props.NativeDimScaling?.() || 1); + return WebBox.sidebarResizerWidth + nativeDiff * (this._props.NativeDimScaling?.() || 1); }; _innerCollectionView: CollectionFreeFormView | undefined; zoomScaling = () => this._innerCollectionView?.zoomScaling() ?? 1; - setInnerContent = (component: DocComponentView) => (this._innerCollectionView = component as CollectionFreeFormView); + setInnerContent = (component: ViewBoxInterface) => (this._innerCollectionView = component as CollectionFreeFormView); @computed get content() { - const interactive = this.props.isContentActive() && this.props.pointerEvents?.() !== 'none' && Doc.ActiveTool === InkTool.None; + const interactive = this._props.isContentActive() && this._props.pointerEvents?.() !== 'none' && Doc.ActiveTool === InkTool.None; return ( <div className={'webBox-cont' + (interactive ? '-interactive' : '')} onKeyDown={e => e.stopPropagation()} style={{ - width: !this.layoutDoc.layout_forceReflow ? NumCast(this.layoutDoc[this.fieldKey + '_nativeWidth']) || `100%` : '100%', + width: !this.layoutDoc.layout_reflowHorizontal ? NumCast(this.layoutDoc[this.fieldKey + '_nativeWidth']) || `100%` : '100%', transform: `scale(${this.zoomScaling()}) translate(${-NumCast(this.layoutDoc.freeform_panX)}px, ${-NumCast(this.layoutDoc.freeform_panY)}px)`, }}> {this._hackHide ? null : this.urlContent} @@ -945,7 +955,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps {this.inlineTextAnnotations .sort((a, b) => NumCast(a.y) - NumCast(b.y)) .map(anno => ( - <Annotation {...this.props} fieldKey={this.annotationKey} pointerEvents={this.pointerEvents} showInfo={this.showInfo} dataDoc={this.dataDoc} anno={anno} key={`${anno[Id]}-annotation`} /> + <Annotation {...this._props} fieldKey={this.annotationKey} pointerEvents={this.pointerEvents} dataDoc={this.dataDoc} anno={anno} key={`${anno[Id]}-annotation`} /> ))} </div> ); @@ -953,43 +963,47 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps @computed get SidebarShown() { return this._showSidebar || this.layoutDoc._layout_showSidebar ? true : false; } + renderAnnotations = (childFilters: () => string[]) => ( + <CollectionFreeFormView + {...this._props} + setContentViewBox={this.setInnerContent} + NativeWidth={returnZero} + NativeHeight={returnZero} + originTopLeft={false} + isAnnotationOverlayScrollable={true} + renderDepth={this._props.renderDepth + 1} + isAnnotationOverlay={true} + fieldKey={this.annotationKey} + setPreviewCursor={this.setPreviewCursor} + PanelWidth={this.panelWidth} + PanelHeight={this.panelHeight} + ScreenToLocalTransform={this.scrollXf} + NativeDimScaling={returnOne} + focus={this.focus} + childFilters={childFilters} + select={emptyFunction} + isAnyChildContentActive={returnFalse} + styleProvider={this.childStyleProvider} + whenChildContentsActiveChanged={this.whenChildContentsActiveChanged} + removeDocument={this.removeDocument} + moveDocument={this.moveDocument} + addDocument={this.addDocumentWrapper} + childPointerEvents={this.childPointerEvents} + pointerEvents={this.annotationPointerEvents} + /> + ); - childPointerEvents = () => (this.props.isContentActive() ? 'all' : undefined); + @computed get renderOpaqueAnnotations() { + return this.renderAnnotations(this.opaqueFilter); + } + @computed get renderTransparentAnnotations() { + return this.renderAnnotations(this.transparentFilter); + } + childPointerEvents = () => (this._props.isContentActive() ? 'all' : undefined); @computed get webpage() { const previewScale = this._previewNativeWidth ? 1 - this.sidebarWidth() / this._previewNativeWidth : 1; - const pointerEvents = this.layoutDoc._lockedPosition ? 'none' : (this.props.pointerEvents?.() as any); - const scale = previewScale * (this.props.NativeDimScaling?.() || 1); - const renderAnnotations = (childFilters: () => string[]) => ( - <CollectionFreeFormView - {...this.props} - setContentView={this.setInnerContent} - NativeWidth={returnZero} - NativeHeight={returnZero} - originTopLeft={false} - isAnnotationOverlayScrollable={true} - renderDepth={this.props.renderDepth + 1} - isAnnotationOverlay={true} - fieldKey={this.annotationKey} - setPreviewCursor={this.setPreviewCursor} - setBrushViewer={this.setBrushViewer} - PanelWidth={this.panelWidth} - PanelHeight={this.panelHeight} - ScreenToLocalTransform={this.scrollXf} - NativeDimScaling={returnOne} - focus={this.focus} - childFilters={childFilters} - select={emptyFunction} - isAnyChildContentActive={returnFalse} - bringToFront={emptyFunction} - styleProvider={this.childStyleProvider} - whenChildContentsActiveChanged={this.whenChildContentsActiveChanged} - removeDocument={this.removeDocument} - moveDocument={this.moveDocument} - addDocument={this.addDocumentWrapper} - childPointerEvents={this.childPointerEvents} - pointerEvents={this.annotationPointerEvents} - /> - ); + const pointerEvents = this.layoutDoc._lockedPosition ? 'none' : (this._props.pointerEvents?.() as any); + const scale = previewScale * (this._props.NativeDimScaling?.() || 1); return ( <div className="webBox-outerContent" @@ -1002,10 +1016,10 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps onWheel={this.onZoomWheel} onScroll={e => this.setDashScrollTop(this._outerRef.current?.scrollTop || 0)} onPointerDown={this.onMarqueeDown}> - <div className="webBox-innerContent" style={{ height: (this._webPageHasBeenRendered && this._scrollHeight) || '100%', pointerEvents }}> + <div className="webBox-innerContent" style={{ height: (this._webPageHasBeenRendered && this._scrollHeight > this._props.PanelHeight() && this._scrollHeight) || '100%', pointerEvents }}> {this.content} - {<div style={{ display: DragManager.docsBeingDragged.length ? 'none' : undefined, mixBlendMode: 'multiply' }}>{renderAnnotations(this.transparentFilter)}</div>} - {renderAnnotations(this.opaqueFilter)} + <div style={{ display: SnappingManager.CanEmbed ? 'none' : undefined, mixBlendMode: 'multiply' }}>{this.renderTransparentAnnotations}</div> + {this.renderOpaqueAnnotations} {this.annotationLayer} </div> </div> @@ -1014,7 +1028,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps @computed get searchUI() { return ( - <div className="webBox-ui" onPointerDown={e => e.stopPropagation()} style={{ display: this.props.isContentActive() ? 'flex' : 'none' }}> + <div className="webBox-ui" onPointerDown={e => e.stopPropagation()} style={{ display: this._props.isContentActive() ? 'flex' : 'none' }}> <div className="webBox-overlayCont" onPointerDown={e => e.stopPropagation()} style={{ left: `${this._searching ? 0 : 100}%` }}> <button className="webBox-overlayButton" title={'search'} /> <input @@ -1047,38 +1061,37 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps ); } searchStringChanged = (e: React.ChangeEvent<HTMLInputElement>) => (this._searchString = e.currentTarget.value); - showInfo = action((anno: Opt<Doc>) => (this._overlayAnnoInfo = anno)); setPreviewCursor = (func?: (x: number, y: number, drag: boolean, hide: boolean, doc: Opt<Doc>) => void) => (this._setPreviewCursor = func); - panelWidth = () => this.props.PanelWidth() / (this.props.NativeDimScaling?.() || 1) - this.sidebarWidth() + WebBox.sidebarResizerWidth; - panelHeight = () => this.props.PanelHeight() / (this.props.NativeDimScaling?.() || 1); - scrollXf = () => this.props.ScreenToLocalTransform().translate(0, NumCast(this.layoutDoc._layout_scrollTop)); + panelWidth = () => this._props.PanelWidth() / (this._props.NativeDimScaling?.() || 1) - this.sidebarWidth() + WebBox.sidebarResizerWidth; + panelHeight = () => this._props.PanelHeight() / (this._props.NativeDimScaling?.() || 1); + scrollXf = () => this.ScreenToLocalBoxXf().translate(0, NumCast(this.layoutDoc._layout_scrollTop)); anchorMenuClick = () => this._sidebarRef.current?.anchorMenuClick; - transparentFilter = () => [...this.props.childFilters(), Utils.IsTransparentFilter()]; - opaqueFilter = () => [...this.props.childFilters(), Utils.noDragsDocFilter, ...(DragManager.docsBeingDragged.length ? [] : [Utils.IsOpaqueFilter()])]; - childStyleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps>, property: string): any => { + transparentFilter = () => [...this._props.childFilters(), Utils.TransparentBackgroundFilter]; + opaqueFilter = () => [...this._props.childFilters(), Utils.noDragDocsFilter, ...(SnappingManager.CanEmbed ? [] : [Utils.OpaqueBackgroundFilter])]; + childStyleProvider = (doc: Doc | undefined, props: Opt<FieldViewProps>, property: string): any => { if (doc instanceof Doc && property === StyleProp.PointerEvents) { if (this.inlineTextAnnotations.includes(doc)) return 'none'; } - return this.props.styleProvider?.(doc, props, property); + return this._props.styleProvider?.(doc, props, property); }; pointerEvents = () => - !this._draggingSidebar && this.props.isContentActive() && !MarqueeOptionsMenu.Instance?.isShown() + !this._draggingSidebar && this._props.isContentActive() && !MarqueeOptionsMenu.Instance?.isShown() ? 'all' // : 'none'; - annotationPointerEvents = () => (this.props.isContentActive() && (this._isAnnotating || SnappingManager.GetIsDragging() || Doc.ActiveTool !== InkTool.None) ? 'all' : 'none'); + annotationPointerEvents = () => (this._props.isContentActive() && (SnappingManager.IsDragging || Doc.ActiveTool !== InkTool.None) ? 'all' : 'none'); render() { const previewScale = this._previewNativeWidth ? 1 - this.sidebarWidth() / this._previewNativeWidth : 1; - const pointerEvents = this.layoutDoc._lockedPosition ? 'none' : (this.props.pointerEvents?.() as any); - const scale = previewScale * (this.props.NativeDimScaling?.() || 1); + const pointerEvents = this.layoutDoc._lockedPosition ? 'none' : (this._props.pointerEvents?.() as any); + const scale = previewScale * (this._props.NativeDimScaling?.() || 1); return ( <div className="webBox" ref={this._mainCont} style={{ pointerEvents: this.pointerEvents(), // - position: SnappingManager.GetIsDragging() ? 'absolute' : undefined, + position: SnappingManager.IsDragging ? 'absolute' : undefined, }}> - <div className="webBox-background" style={{ backgroundColor: this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor) }} /> + <div className="webBox-background" style={{ backgroundColor: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) }} /> <div className="webBox-container" style={{ @@ -1088,27 +1101,26 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps }} onContextMenu={this.specificContextMenu}> {this.webpage} - {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? null : ( - <div style={{ transformOrigin: 'top left', transform: `scale(${1 / scale})` }}> - <MarqueeAnnotator - rootDoc={this.rootDoc} - iframe={this.isFirefox() ? this.iframeClick : undefined} - iframeScaling={this.isFirefox() ? this.iframeScaling : undefined} - anchorMenuClick={this.anchorMenuClick} - scrollTop={0} - down={this._marqueeing} - scaling={returnOne} - addDocument={this.addDocumentWrapper} - docView={this.props.docViewPath().lastElement()} - finishMarquee={this.finishMarquee} - savedAnnotations={this.savedAnnotationsCreator} - selectionText={this.selectionText} - annotationLayer={this._annotationLayer.current} - mainCont={this._mainCont.current} - /> - </div> - )} </div> + {!this._mainCont.current || !this.DocumentView || !this._annotationLayer.current ? null : ( + <div style={{ position: 'absolute', height: '100%', width: '100%', pointerEvents: this.marqueeing ? 'all' : 'none' }}> + <MarqueeAnnotator + ref={this._marqueeref} + Document={this.Document} + anchorMenuClick={this.anchorMenuClick} + scrollTop={NumCast(this.layoutDoc.layout_scrollTop)} + annotationLayerScrollTop={0} + scaling={this._props.NativeDimScaling} + addDocument={this.addDocumentWrapper} + docView={this.DocumentView} + finishMarquee={this.finishMarquee} + savedAnnotations={this.savedAnnotationsCreator} + selectionText={this.selectionText} + annotationLayer={this._annotationLayer.current} + marqueeContainer={this._mainCont.current} + /> + </div> + )} <div className="webBox-sideResizer" style={{ @@ -1118,25 +1130,25 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps }} onPointerDown={e => this.sidebarBtnDown(e, false)} /> - <div style={{ position: 'absolute', height: '100%', right: 0, top: 0, width: `calc(100 * ${this.sidebarWidth() / this.props.PanelWidth()}%` }}> + <div style={{ position: 'absolute', height: '100%', right: 0, top: 0, width: `calc(100 * ${this.sidebarWidth() / this._props.PanelWidth()}%` }}> <SidebarAnnos ref={this._sidebarRef} - {...this.props} + {...this._props} whenChildContentsActiveChanged={this.whenChildContentsActiveChanged} fieldKey={this.fieldKey + '_' + this._urlHash} - rootDoc={this.rootDoc} + Document={this.Document} layoutDoc={this.layoutDoc} dataDoc={this.dataDoc} setHeight={emptyFunction} - nativeWidth={this._previewNativeWidth ?? NumCast(this.layoutDoc._nativeWidth) - WebBox.sidebarResizerWidth / (this.props.NativeDimScaling?.() || 1)} + nativeWidth={this._previewNativeWidth ?? NumCast(this.layoutDoc._nativeWidth) - WebBox.sidebarResizerWidth / (this._props.NativeDimScaling?.() || 1)} showSidebar={this.SidebarShown} sidebarAddDocument={this.sidebarAddDocument} moveDocument={this.moveDocument} removeDocument={this.removeDocument} /> </div> - {this.sidebarHandle} - {!this.props.isContentActive() ? null : this.searchUI} + {!this._props.isContentActive() || SnappingManager.IsDragging ? null : this.sidebarHandle} + {!this._props.isContentActive() || SnappingManager.IsDragging ? null : this.searchUI} </div> ); } diff --git a/src/client/views/nodes/WebBoxRenderer.js b/src/client/views/nodes/WebBoxRenderer.js index 425ef3e54..914adb404 100644 --- a/src/client/views/nodes/WebBoxRenderer.js +++ b/src/client/views/nodes/WebBoxRenderer.js @@ -2,7 +2,7 @@ * * @param {StyleSheetList} styleSheets */ -var ForeignHtmlRenderer = function (styleSheets) { +const ForeignHtmlRenderer = function (styleSheets) { const self = this; /** @@ -10,7 +10,7 @@ var ForeignHtmlRenderer = function (styleSheets) { * @param {String} binStr */ const binaryStringToBase64 = function (binStr) { - return new Promise(function (resolve) { + return new Promise(resolve => { const reader = new FileReader(); reader.readAsDataURL(binStr); reader.onloadend = function () { @@ -31,17 +31,17 @@ var ForeignHtmlRenderer = function (styleSheets) { * @returns {Promise} */ const getResourceAsBase64 = function (webUrl, inurl) { - return new Promise(function (resolve, reject) { + return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); - //const url = inurl.startsWith("/") && !inurl.startsWith("//") ? webUrl + inurl : inurl; - //const url = CorsProxy(inurl.startsWith("/") && !inurl.startsWith("//") ? webUrl + inurl : inurl);// inurl.startsWith("http") ? CorsProxy(inurl) : inurl; - var url = inurl; + // const url = inurl.startsWith("/") && !inurl.startsWith("//") ? webUrl + inurl : inurl; + // const url = CorsProxy(inurl.startsWith("/") && !inurl.startsWith("//") ? webUrl + inurl : inurl);// inurl.startsWith("http") ? CorsProxy(inurl) : inurl; + let url = inurl; if (inurl.startsWith('/static')) { url = new URL(webUrl).origin + inurl; } else if (inurl.startsWith('/') && !inurl.startsWith('//')) { url = CorsProxy(new URL(webUrl).origin + inurl); } else if (!inurl.startsWith('http') && !inurl.startsWith('//')) { - url = CorsProxy(webUrl + '/' + inurl); + url = CorsProxy(`${webUrl}/${inurl}`); } else if (inurl.startsWith('https') && !inurl.startsWith(window.location.origin)) { url = CorsProxy(inurl); } @@ -57,7 +57,7 @@ var ForeignHtmlRenderer = function (styleSheets) { resourceBase64: resBase64, }); } else if (xhr.readyState === XMLHttpRequest.DONE) { - console.log("COULDN'T FIND: " + (inurl.startsWith('/') ? webUrl + inurl : inurl)); + console.log(`COULDN'T FIND: ${inurl.startsWith('/') ? webUrl + inurl : inurl}`); resolve({ resourceUrl: '', resourceBase64: inurl, @@ -76,7 +76,7 @@ var ForeignHtmlRenderer = function (styleSheets) { */ const getMultipleResourcesAsBase64 = function (webUrl, urls) { const promises = []; - for (let i = 0; i < urls.length; i++) { + for (let i = 0; i < urls.length; i += 1) { promises.push(getResourceAsBase64(webUrl, urls[i])); } return Promise.all(promises); @@ -98,7 +98,7 @@ var ForeignHtmlRenderer = function (styleSheets) { } let val = ''; - for (let i = idx + prefixToken.length; i < str.length; i++) { + for (let i = idx + prefixToken.length; i < str.length; i += 1) { if (suffixTokens.indexOf(str[i]) !== -1) { break; } @@ -114,6 +114,15 @@ var ForeignHtmlRenderer = function (styleSheets) { /** * + * @param {String} str + * @returns {String} + */ + const removeQuotes = function (str) { + return str.replace(/["']/g, ''); + }; + + /** + * * @param {String} cssRuleStr * @returns {String[]} */ @@ -127,13 +136,12 @@ var ForeignHtmlRenderer = function (styleSheets) { break; } searchStartIndex = url.foundAtIndex + url.value.length + 1; - if (mustEndWithQuote && url.value[url.value.length - 1] !== '"') continue; - const unquoted = removeQuotes(url.value); - if (!unquoted /* || (!unquoted.startsWith('http')&& !unquoted.startsWith("/") )*/ || unquoted === 'http://' || unquoted === 'https://') { - continue; + if (!mustEndWithQuote || url.value[url.value.length - 1] === '"') { + const unquoted = removeQuotes(url.value); + if (unquoted /* || (!unquoted.startsWith('http')&& !unquoted.startsWith("/") ) */ && unquoted !== 'http://' && unquoted !== 'https://') { + if (unquoted) urlsFound.push(unquoted); + } } - - unquoted && urlsFound.push(unquoted); } return urlsFound; @@ -151,15 +159,6 @@ var ForeignHtmlRenderer = function (styleSheets) { return getUrlsFromCssString(html, 'source=', [' ', '>', '\t'], true); }; - /** - * - * @param {String} str - * @returns {String} - */ - const removeQuotes = function (str) { - return str.replace(/["']/g, ''); - }; - const escapeRegExp = function (string) { return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string }; @@ -172,8 +171,8 @@ var ForeignHtmlRenderer = function (styleSheets) { * * @returns {Promise<String>} */ - const buildSvgDataUri = async function (webUrl, contentHtml, width, height, scroll, xoff) { - return new Promise(async function (resolve, reject) { + const buildSvgDataUri = async function (webUrl, inputContentHtml, width, height, scroll, xoff) { + return new Promise(async (resolve, reject) => { /* !! The problems !! * 1. CORS (not really an issue, expect perhaps for images, as this is a general security consideration to begin with) * 2. Platform won't wait for external assets to load (fonts, images, etc.) @@ -181,17 +180,19 @@ var ForeignHtmlRenderer = function (styleSheets) { // copy styles let cssStyles = ''; - let urlsFoundInCss = []; + const urlsFoundInCss = []; - for (let i = 0; i < styleSheets.length; i++) { + for (let i = 0; i < styleSheets.length; i += 1) { try { const rules = styleSheets[i].cssRules; - for (let j = 0; j < rules.length; j++) { + for (let j = 0; j < rules.length; j += 1) { const cssRuleStr = rules[j].cssText; urlsFoundInCss.push(...getUrlsFromCssString(cssRuleStr)); cssStyles += cssRuleStr; } - } catch (e) {} + } catch (e) { + /* empty */ + } } // const fetchedResourcesFromStylesheets = await getMultipleResourcesAsBase64(webUrl, urlsFoundInCss); @@ -202,15 +203,15 @@ var ForeignHtmlRenderer = function (styleSheets) { // } // } - contentHtml = contentHtml + let contentHtml = inputContentHtml .replace(/<source[^>]*>/g, '') // <picture> tags have a <source> which has a srcset field of image refs. instead of converting each, just use the default <img> of the picture .replace(/noscript/g, 'div') .replace(/<div class="mediaset"><\/div>/g, '') // when scripting isn't available (ie, rendering web pages here), <noscript> tags should become <div>'s. But for Brown CS, there's a layout problem if you leave the empty <mediaset> tag .replace(/<link[^>]*>/g, '') // don't need to keep any linked style sheets because we've already processed all style sheets above .replace(/srcset="([^ "]*)[^"]*"/g, 'src="$1"'); // instead of converting each item in the srcset to a data url, just convert the first one and use that - let urlsFoundInHtml = getImageUrlsFromFromHtml(contentHtml).filter(url => !url.startsWith('data:')); + const urlsFoundInHtml = getImageUrlsFromFromHtml(contentHtml).filter(url => !url.startsWith('data:')); const fetchedResources = webUrl ? await getMultipleResourcesAsBase64(webUrl, urlsFoundInHtml) : []; - for (let i = 0; i < fetchedResources.length; i++) { + for (let i = 0; i < fetchedResources.length; i += 1) { const r = fetchedResources[i]; if (r.resourceUrl) { contentHtml = contentHtml.replace(new RegExp(escapeRegExp(r.resourceUrl), 'g'), r.resourceBase64); @@ -230,7 +231,7 @@ var ForeignHtmlRenderer = function (styleSheets) { // contentRootElem.style.transform = "scale(0.08)" contentRootElem.innerHTML = styleElemString + contentHtml; contentRootElem.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml'); - //document.body.appendChild(contentRootElem); + // document.body.appendChild(contentRootElem); const contentRootElemString = new XMLSerializer().serializeToString(contentRootElem); @@ -256,13 +257,13 @@ var ForeignHtmlRenderer = function (styleSheets) { * @return {Promise<Image>} */ this.renderToImage = async function (webUrl, html, width, height, scroll, xoff) { - return new Promise(async function (resolve, reject) { + return new Promise(async (resolve, reject) => { const img = new Image(); - console.log('BUILDING SVG for:' + webUrl); + console.log(`BUILDING SVG for: ${webUrl}`); img.src = await buildSvgDataUri(webUrl, html, width, height, scroll, xoff); img.onload = function () { - console.log('IMAGE SVG created:' + webUrl); + console.log(`IMAGE SVG created: ${webUrl}`); resolve(img); }; }); @@ -276,7 +277,7 @@ var ForeignHtmlRenderer = function (styleSheets) { * @return {Promise<Image>} */ this.renderToCanvas = async function (webUrl, html, width, height, scroll, xoff, oversample) { - return new Promise(async function (resolve, reject) { + return new Promise(async (resolve, reject) => { const img = await self.renderToImage(webUrl, html, width, height, scroll, xoff); const canvas = document.createElement('canvas'); @@ -298,7 +299,7 @@ var ForeignHtmlRenderer = function (styleSheets) { * @return {Promise<String>} */ this.renderToBase64Png = async function (webUrl, html, width, height, scroll, xoff, oversample) { - return new Promise(async function (resolve, reject) { + return new Promise(async (resolve, reject) => { const canvas = await self.renderToCanvas(webUrl, html, width, height, scroll, xoff, oversample); resolve(canvas.toDataURL('image/png')); }); @@ -320,8 +321,8 @@ export function CreateImage(webUrl, styleSheets, html, width, height, scroll, xo ); } -var ClipboardUtils = new (function () { - var permissions = { +const ClipboardUtils = new (function () { + const permissions = { 'image/bmp': true, 'image/gif': true, 'image/png': true, @@ -330,8 +331,8 @@ var ClipboardUtils = new (function () { }; function getType(types) { - for (var j = 0; j < types.length; ++j) { - var type = types[j]; + for (let j = 0; j < types.length; j += 1) { + const type = types[j]; if (permissions[type]) { return type; } @@ -339,10 +340,10 @@ var ClipboardUtils = new (function () { return null; } function getItem(items) { - for (var i = 0; i < items.length; ++i) { - var item = items[i]; + for (let i = 0; i < items.length; i += 1) { + const item = items[i]; if (item) { - var type = getType(item.types); + const type = getType(item.types); if (type) { return item.getType(type); } @@ -352,7 +353,7 @@ var ClipboardUtils = new (function () { } function loadFile(file, callback) { if (window.FileReader) { - var reader = new FileReader(); + const reader = new FileReader(); reader.onload = function () { callback(reader.result, null); }; @@ -366,23 +367,23 @@ var ClipboardUtils = new (function () { } this.readImage = function (callback) { if (navigator.clipboard) { - var promise = navigator.clipboard.read(); + const promise = navigator.clipboard.read(); promise - .then(function (items) { - var promise = getItem(items); - if (promise == null) { + .then(items => { + const promise2 = getItem(items); + if (promise2 == null) { callback(null, null); return; } - promise - .then(function (result) { + promise2 + .then(result => { loadFile(result, callback); }) - .catch(function (error) { + .catch(error => { callback(null, 'Reading clipboard error.'); }); }) - .catch(function (error) { + .catch(error => { callback(null, 'Reading clipboard error.'); }); } else { diff --git a/src/client/views/AudioWaveform.scss b/src/client/views/nodes/audio/AudioWaveform.scss index 6cbd1759a..6cbd1759a 100644 --- a/src/client/views/AudioWaveform.scss +++ b/src/client/views/nodes/audio/AudioWaveform.scss diff --git a/src/client/views/nodes/audio/AudioWaveform.tsx b/src/client/views/nodes/audio/AudioWaveform.tsx new file mode 100644 index 000000000..7fd799952 --- /dev/null +++ b/src/client/views/nodes/audio/AudioWaveform.tsx @@ -0,0 +1,121 @@ +import axios from 'axios'; +import { computed, IReactionDisposer, makeObservable, reaction } from 'mobx'; +import { observer } from 'mobx-react'; +import * as React from 'react'; +import { Doc, NumListCast } from '../../../../fields/Doc'; +import { List } from '../../../../fields/List'; +import { listSpec } from '../../../../fields/Schema'; +import { Cast } from '../../../../fields/Types'; +import { numberRange } from '../../../../Utils'; +import { ObservableReactComponent } from '../../ObservableReactComponent'; +import { Colors } from './../../global/globalEnums'; +import './AudioWaveform.scss'; +import { WaveCanvas } from './WaveCanvas'; + +/** + * AudioWaveform + * + * Used in CollectionStackedTimeline to render a canvas with a visual of an audio waveform for AudioBox and VideoBox documents. + * Bins the audio data into audioBuckets which are passed to package to render the lines. + * Calculates new buckets each time a new zoom factor or new set of trim bounds is created and stores it in a field on the layout doc with a title indicating the bounds and zoom for that list (see audioBucketField) + */ + +export interface AudioWaveformProps { + duration: number; // length of media clip + rawDuration: number; // length of underlying media data + mediaPath: string; + layoutDoc: Doc; + clipStart: number; + clipEnd: number; + zoomFactor: number; + PanelHeight: number; + PanelWidth: number; + fieldKey: string; + progress?: number; +} + +@observer +export class AudioWaveform extends ObservableReactComponent<AudioWaveformProps> { + public static NUMBER_OF_BUCKETS = 100; // number of buckets data is divided into to draw waveform lines + _disposer: IReactionDisposer | undefined; + + constructor(props: any) { + super(props); + makeObservable(this); + } + + get waveHeight() { + return Math.max(50, this._props.PanelHeight); + } + + get clipStart() { + return this._props.clipStart; + } + get clipEnd() { + return this._props.clipEnd; + } + get zoomFactor() { + return this._props.zoomFactor; + } + + @computed get audioBuckets() { + return NumListCast(this._props.layoutDoc[this.audioBucketField(this.clipStart, this.clipEnd, this.zoomFactor)]); + } + + audioBucketField = (start: number, end: number, zoomFactor: number) => this._props.fieldKey + '_audioBuckets/' + '/' + start.toFixed(2).replace('.', '_') + '/' + end.toFixed(2).replace('.', '_') + '/' + zoomFactor * 10; + + componentWillUnmount() { + this._disposer?.(); + } + + componentDidMount() { + this._disposer = reaction( + () => ({ clipStart: this.clipStart, clipEnd: this.clipEnd, fieldKey: this.audioBucketField(this.clipStart, this.clipEnd, this.zoomFactor), zoomFactor: this._props.zoomFactor }), + ({ clipStart, clipEnd, fieldKey, zoomFactor }) => { + if (!this._props.layoutDoc[fieldKey] && this._props.layoutDoc.layout_fieldKey != 'layout_icon') { + // setting these values here serves as a "lock" to prevent multiple attempts to create the waveform at nerly the same time. + const waveform = Cast(this._props.layoutDoc[this.audioBucketField(0, this._props.rawDuration, 1)], listSpec('number')); + this._props.layoutDoc[fieldKey] = waveform && new List<number>(waveform.slice((clipStart / this._props.rawDuration) * waveform.length, (clipEnd / this._props.rawDuration) * waveform.length)); + setTimeout(() => this.createWaveformBuckets(fieldKey, clipStart, clipEnd, zoomFactor)); + } + }, + { fireImmediately: true } + ); + } + + // decodes the audio file into peaks for generating the waveform + createWaveformBuckets = (fieldKey: string, clipStart: number, clipEnd: number, zoomFactor: number) => { + axios({ url: this._props.mediaPath, responseType: 'arraybuffer' }).then(response => + new window.AudioContext().decodeAudioData(response.data, buffer => { + const rawDecodedAudioData = buffer.getChannelData(0); + const startInd = clipStart / this._props.rawDuration; + const endInd = clipEnd / this._props.rawDuration; + const decodedAudioData = rawDecodedAudioData.slice(Math.floor(startInd * rawDecodedAudioData.length), Math.floor(endInd * rawDecodedAudioData.length)); + const numBuckets = Math.floor(AudioWaveform.NUMBER_OF_BUCKETS * zoomFactor); + + const bucketDataSize = Math.floor(decodedAudioData.length / numBuckets); + const brange = Array.from(Array(bucketDataSize)); + const bucketList = numberRange(numBuckets).map((i: number) => brange.reduce((p, x, j) => Math.abs(Math.max(p, decodedAudioData[i * bucketDataSize + j])), 0) / 2); + this._props.layoutDoc[fieldKey] = new List<number>(bucketList); + }) + ); + }; + + render() { + return ( + <div className="audioWaveform"> + <WaveCanvas + color={Colors.LIGHT_GRAY} + progressColor={Colors.MEDIUM_BLUE_ALT} + progress={this._props.progress ?? 1} + barWidth={200 / this.audioBuckets.length} + //gradientColors={this._props.gradientColors} + peaks={this.audioBuckets} + width={(this._props.PanelWidth ?? 0) * window.devicePixelRatio} + height={this.waveHeight * window.devicePixelRatio} + pixelRatio={window.devicePixelRatio} + /> + </div> + ); + } +} diff --git a/src/client/views/nodes/audio/WaveCanvas.tsx b/src/client/views/nodes/audio/WaveCanvas.tsx new file mode 100644 index 000000000..d3f5669a2 --- /dev/null +++ b/src/client/views/nodes/audio/WaveCanvas.tsx @@ -0,0 +1,100 @@ +import React from 'react'; + +interface WaveCanvasProps { + barWidth: number; + color: string; + progress: number; + progressColor: string; + gradientColors?: { stopPosition: number; color: string }[]; // stopPosition between 0 and 1 + peaks: number[]; + width: number; + height: number; + pixelRatio: number; +} + +export class WaveCanvas extends React.Component<WaveCanvasProps> { + // If the first value of peaks is negative, addToIndices will be 1 + posPeaks = (peaks: number[], addToIndices: number) => peaks.filter((_, index) => (index + addToIndices) % 2 == 0); + + drawBars = (waveCanvasCtx: CanvasRenderingContext2D, width: number, halfH: number, peaks: number[]) => { + // Bar wave draws the bottom only as a reflection of the top, + // so we don't need negative values + const posPeaks = peaks.some(val => val < 0) ? this.posPeaks(peaks, peaks[0] < 0 ? 1 : 0) : peaks; + + // A half-pixel offset makes lines crisp + const $ = 0.5 / this.props.pixelRatio; + const bar = this.props.barWidth * this.props.pixelRatio; + const gap = Math.max(this.props.pixelRatio, 2); + + const max = Math.max(...posPeaks); + const scale = posPeaks.length / width; + + for (let i = 0; i < width; i += bar + gap) { + if (i > width * this.props.progress) waveCanvasCtx.fillStyle = this.props.color; + + const h = Math.round((posPeaks[Math.floor(i * scale)] / max) * halfH) || 1; + + waveCanvasCtx.fillRect(i + $, halfH - h, bar + $, h * 2); + } + }; + + addNegPeaks = (peaks: number[]) => + peaks.reduce((reflectedPeaks, peak) => reflectedPeaks.push(peak, -peak) ? reflectedPeaks:[], + [] as number[]); // prettier-ignore + + drawWaves = (waveCanvasCtx: CanvasRenderingContext2D, width: number, halfH: number, peaks: number[]) => { + const allPeaks = peaks.some(val => val < 0) ? peaks : this.addNegPeaks(peaks); // add negative peaks to arrays without negative peaks + + // A half-pixel offset makes lines crisp + const $ = 0.5 / this.props.pixelRatio; + const length = ~~(allPeaks.length / 2); // ~~ is Math.floor for positive numbers. + + const scale = width / length; + const absmax = Math.max(...allPeaks.map(peak => Math.abs(peak))); + + waveCanvasCtx.beginPath(); + waveCanvasCtx.moveTo($, halfH); + + for (var i = 0; i < length; i++) { + var h = Math.round((allPeaks[2 * i] / absmax) * halfH); + waveCanvasCtx.lineTo(i * scale + $, halfH - h); + } + + // Draw the bottom edge going backwards, to make a single closed hull to fill. + for (var i = length - 1; i >= 0; i--) { + var h = Math.round((allPeaks[2 * i + 1] / absmax) * halfH); + waveCanvasCtx.lineTo(i * scale + $, halfH - h); + } + + waveCanvasCtx.fill(); + + // Always draw a median line + waveCanvasCtx.fillRect(0, halfH - $, width, $); + }; + + updateSize = (width: number, height: number, peaks: number[], waveCanvasCtx: CanvasRenderingContext2D) => { + const displayWidth = Math.round(width / this.props.pixelRatio); + const displayHeight = Math.round(height / this.props.pixelRatio); + waveCanvasCtx.canvas.width = width; + waveCanvasCtx.canvas.height = height; + waveCanvasCtx.canvas.style.width = `${displayWidth}px`; + waveCanvasCtx.canvas.style.height = `${displayHeight}px`; + + waveCanvasCtx.clearRect(0, 0, width, height); + + const gradient = this.props.gradientColors && waveCanvasCtx.createLinearGradient(0, 0, width, 0); + gradient && this.props.gradientColors?.forEach(color => gradient.addColorStop(color.stopPosition, color.color)); + waveCanvasCtx.fillStyle = gradient ?? this.props.progressColor; + + const waveDrawer = this.props.barWidth ? this.drawBars : this.drawWaves; + waveDrawer(waveCanvasCtx, width, height / 2, peaks); + }; + + render() { + return this.props.peaks ? ( + <div style={{ position: 'relative', width: '100%', height: '100%', cursor: 'pointer' }}> + <canvas ref={instance => (ctx => ctx && this.updateSize(this.props.width, this.props.height, this.props.peaks, ctx))(instance?.getContext('2d'))} /> + </div> + ) : null; + } +} diff --git a/src/client/views/nodes/calendarBox/CalendarBox.tsx b/src/client/views/nodes/calendarBox/CalendarBox.tsx new file mode 100644 index 000000000..748c3322e --- /dev/null +++ b/src/client/views/nodes/calendarBox/CalendarBox.tsx @@ -0,0 +1,120 @@ +import { Calendar, EventClickArg, EventSourceInput } from '@fullcalendar/core'; +import dayGridPlugin from '@fullcalendar/daygrid'; +import multiMonthPlugin from '@fullcalendar/multimonth'; +import { makeObservable } from 'mobx'; +import { observer } from 'mobx-react'; +import * as React from 'react'; +import { dateRangeStrToDates } from '../../../../Utils'; +import { Doc } from '../../../../fields/Doc'; +import { StrCast } from '../../../../fields/Types'; +import { ViewBoxBaseComponent } from '../../DocComponent'; +import { FieldView, FieldViewProps } from '../FieldView'; + +type CalendarView = 'month' | 'multi-month' | 'week'; + +@observer +export class CalendarBox extends ViewBoxBaseComponent<FieldViewProps>() { + public static LayoutString(fieldKey: string = 'calendar') { + return FieldView.LayoutString(CalendarBox, fieldKey); + } + + constructor(props: FieldViewProps) { + super(props); + makeObservable(this); + } + + componentDidMount(): void {} + + componentWillUnmount(): void {} + + _calendarRef = React.createRef<HTMLElement>(); + + get dateRangeStr() { + return StrCast(this.Document.date_range); + } + + // Choose a calendar view based on the date range + get calendarViewType(): CalendarView { + const [fromDate, toDate] = dateRangeStrToDates(this.dateRangeStr); + + if (fromDate.getFullYear() !== toDate.getFullYear() || fromDate.getMonth() !== toDate.getMonth()) return 'multi-month'; + + if (Math.abs(fromDate.getDay() - toDate.getDay()) > 7) return 'month'; + return 'week'; + } + + get calendarStartDate() { + return this.dateRangeStr.split('|')[0]; + } + + get calendarToDate() { + return this.dateRangeStr.split('|')[1]; + } + + get childDocs(): Doc[] { + return this.childDocs; // get all sub docs for a calendar + } + + docBackgroundColor(type: string): string { + // TODO: Return a different color based on the event type + return 'blue'; + } + + get calendarEvents(): EventSourceInput | undefined { + if (this.childDocs.length === 0) return undefined; + return this.childDocs.map((doc, idx) => { + const docTitle = StrCast(doc.title); + const docDateRange = StrCast(doc.date_range); + const [startDate, endDate] = dateRangeStrToDates(docDateRange); + const docType = doc.type; + const docDescription = doc.description ? StrCast(doc.description) : ''; + + return { + title: docTitle, + start: startDate, + end: endDate, + allDay: false, + classNames: [StrCast(docType)], // will determine the style + editable: false, // subject to change in the future + backgroundColor: this.docBackgroundColor(StrCast(doc.type)), + color: 'white', + extendedProps: { + description: docDescription, + }, + }; + }); + } + + handleEventClick = (arg: EventClickArg) => { + // TODO: open popover with event description, option to open CalendarManager and change event date, delete event, etc. + }; + + calendarEl: HTMLElement = document.getElementById('calendar-box-v1')!; + + // https://fullcalendar.io + get calendar() { + return new Calendar(this.calendarEl, { + plugins: [this.calendarViewType === 'multi-month' ? multiMonthPlugin : dayGridPlugin], + headerToolbar: { + left: 'prev,next today', + center: 'title', + right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek', + }, + initialDate: this.calendarStartDate, + navLinks: true, + editable: false, + displayEventTime: false, + displayEventEnd: false, + events: this.calendarEvents, + eventClick: this.handleEventClick, + }); + } + + render() { + return ( + <div className="calendar-box-conatiner"> + <div id="calendar-box-v1"></div> + </div> + ); + } +} diff --git a/src/client/views/nodes/formattedText/DashDocCommentView.tsx b/src/client/views/nodes/formattedText/DashDocCommentView.tsx index aa269d8d6..b7d2a24c2 100644 --- a/src/client/views/nodes/formattedText/DashDocCommentView.tsx +++ b/src/client/views/nodes/formattedText/DashDocCommentView.tsx @@ -2,7 +2,7 @@ import { TextSelection } from 'prosemirror-state'; import * as ReactDOM from 'react-dom/client'; import { Doc } from '../../../../fields/Doc'; import { DocServer } from '../../../DocServer'; -import React = require('react'); +import * as React from 'react'; // creates an inline comment in a note when '>>' is typed. // the comment sits on the right side of the note and vertically aligns with its anchor in the text. @@ -54,7 +54,7 @@ interface IDashDocCommentViewInternal { } export class DashDocCommentViewInternal extends React.Component<IDashDocCommentViewInternal> { - constructor(props: IDashDocCommentViewInternal) { + constructor(props: any) { super(props); this.onPointerLeaveCollapsed = this.onPointerLeaveCollapsed.bind(this); this.onPointerEnterCollapsed = this.onPointerEnterCollapsed.bind(this); diff --git a/src/client/views/nodes/formattedText/DashDocView.tsx b/src/client/views/nodes/formattedText/DashDocView.tsx index c5167461b..7335c9286 100644 --- a/src/client/views/nodes/formattedText/DashDocView.tsx +++ b/src/client/views/nodes/formattedText/DashDocView.tsx @@ -1,18 +1,21 @@ -import { action, IReactionDisposer, observable, reaction } from 'mobx'; +import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import { NodeSelection } from 'prosemirror-state'; +import * as React from 'react'; import * as ReactDOM from 'react-dom/client'; import { Doc } from '../../../../fields/Doc'; import { Height, Width } from '../../../../fields/DocSymbols'; -import { NumCast, StrCast } from '../../../../fields/Types'; +import { NumCast } from '../../../../fields/Types'; import { emptyFunction, returnFalse, Utils } from '../../../../Utils'; import { DocServer } from '../../../DocServer'; import { Docs, DocUtils } from '../../../documents/Documents'; import { Transform } from '../../../util/Transform'; -import { DocFocusOptions, DocumentView } from '../DocumentView'; +import { ObservableReactComponent } from '../../ObservableReactComponent'; +import { DocumentView } from '../DocumentView'; +import { FocusViewOptions } from '../FieldView'; import { FormattedTextBox } from './FormattedTextBox'; -import React = require('react'); +var horizPadding = 3; // horizontal padding to container to allow cursor to show up on either side. export class DashDocView { dom: HTMLSpanElement; // container for label and value root: any; @@ -21,8 +24,7 @@ export class DashDocView { this.dom = document.createElement('span'); this.dom.style.position = 'relative'; this.dom.style.textIndent = '0'; - this.dom.style.border = '1px solid ' + StrCast(tbox.layoutDoc.color, 'lightGray'); - this.dom.style.width = node.attrs.width; + this.dom.style.width = (+node.attrs.width.toString().replace('px', '') + horizPadding).toString(); this.dom.style.height = node.attrs.height; this.dom.style.display = node.attrs.hidden ? 'none' : 'inline-block'; (this.dom.style as any).float = node.attrs.float; @@ -62,7 +64,12 @@ export class DashDocView { } catch {} }); } - selectNode() {} + deselectNode() { + this.dom.style.backgroundColor = ''; + } + selectNode() { + this.dom.style.backgroundColor = 'rgb(141, 182, 247)'; + } } interface IDashDocViewInternal { @@ -78,27 +85,27 @@ interface IDashDocViewInternal { getPos: any; } @observer -export class DashDocViewInternal extends React.Component<IDashDocViewInternal> { +export class DashDocViewInternal extends ObservableReactComponent<IDashDocViewInternal> { _spanRef = React.createRef<HTMLDivElement>(); _disposers: { [name: string]: IReactionDisposer } = {}; _textBox: FormattedTextBox; - @observable _dashDoc: Doc | undefined; - @observable _finalLayout: any; - @observable _width: number = 0; - @observable _height: number = 0; + @observable _dashDoc: Doc | undefined = undefined; + @computed get _width() { + return NumCast(this._dashDoc?._width); + } + @computed get _height() { + return NumCast(this._dashDoc?._height); + } updateDoc = action((dashDoc: Doc) => { this._dashDoc = dashDoc; - this._finalLayout = dashDoc; - if (this.props.width !== (this._dashDoc?._width ?? '') + 'px' || this.props.height !== (this._dashDoc?._height ?? '') + 'px') { + if (this._props.width !== (this._dashDoc?._width ?? '') + 'px' || this._props.height !== (this._dashDoc?._height ?? '') + 'px') { try { - this._width = NumCast(this._dashDoc?._width); - this._height = NumCast(this._dashDoc?._height); // bcz: an exception will be thrown if two embeddings are open at the same time when a doc view comment is made - this.props.view.dispatch( - this.props.view.state.tr.setNodeMarkup(this.props.getPos(), null, { - ...this.props.node.attrs, + this._props.view.dispatch( + this._props.view.state.tr.setNodeMarkup(this._props.getPos(), null, { + ...this._props.node.attrs, width: this._width + 'px', height: this._height + 'px', }) @@ -111,16 +118,17 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> { constructor(props: IDashDocViewInternal) { super(props); - this._textBox = this.props.tbox; + makeObservable(this); + this._textBox = this._props.tbox; - DocServer.GetRefField(this.props.docId + this.props.embedding).then(async dashDoc => { + DocServer.GetRefField(this._props.docId + this._props.embedding).then(async dashDoc => { if (!(dashDoc instanceof Doc)) { - this.props.embedding && - DocServer.GetRefField(this.props.docId).then(async dashDocBase => { + this._props.embedding && + DocServer.GetRefField(this._props.docId).then(async dashDocBase => { if (dashDocBase instanceof Doc) { - const embedding = Doc.MakeEmbedding(dashDocBase, this.props.docId + this.props.embedding); + const embedding = Doc.MakeEmbedding(dashDocBase, this._props.docId + this._props.embedding); embedding.layout_fieldKey = 'layout'; - this.props.fieldKey && DocUtils.makeCustomViewClicked(embedding, Docs.Create.StackingDocument, this.props.fieldKey, undefined); + this._props.fieldKey && DocUtils.makeCustomViewClicked(embedding, Docs.Create.StackingDocument, this._props.fieldKey, undefined); this.updateDoc(embedding); } }); @@ -132,23 +140,18 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> { componentDidMount() { this._disposers.upater = reaction( - () => this._dashDoc && NumCast(this._dashDoc._height) + NumCast(this._dashDoc._width), - action(() => { - if (this._dashDoc) { - this._width = NumCast(this._dashDoc._width); - this._height = NumCast(this._dashDoc._height); - const parent = this._spanRef.current?.parentNode as HTMLElement; - if (parent) { - parent.style.width = this._width + 'px'; - parent.style.height = this._height + 'px'; - } + () => ({ width: this._width, height: this._height, parent: this._spanRef.current?.parentNode as HTMLElement }), + action(({ width, height, parent }) => { + if (parent) { + parent.style.width = width + 'px'; + parent.style.height = height + 'px'; } }) ); } removeDoc = () => { - this.props.view.dispatch(this.props.view.state.tr.setSelection(new NodeSelection(this.props.view.state.doc.resolve(this.props.getPos()))).deleteSelection()); + this._props.view.dispatch(this._props.view.state.tr.setSelection(new NodeSelection(this._props.view.state.doc.resolve(this._props.getPos()))).deleteSelection()); return true; }; @@ -157,7 +160,7 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> { const { scale, translateX, translateY } = Utils.GetScreenTransform(this._spanRef.current); return new Transform(-translateX, -translateY, 1).scale(1 / scale); }; - outerFocus = (target: Doc, options: DocFocusOptions) => this._textBox.focus(target, options); // ideally, this would scroll to show the focus target + outerFocus = (target: Doc, options: FocusViewOptions) => this._textBox.focus(target, options); // ideally, this would scroll to show the focus target onKeyDown = (e: any) => { e.stopPropagation(); @@ -167,29 +170,30 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> { }; onPointerLeave = () => { - const ele = document.getElementById('DashDocCommentView-' + this.props.docId) as HTMLDivElement; + const ele = document.getElementById('DashDocCommentView-' + this._props.docId) as HTMLDivElement; ele && (ele.style.backgroundColor = ''); }; onPointerEnter = () => { - const ele = document.getElementById('DashDocCommentView-' + this.props.docId) as HTMLDivElement; + const ele = document.getElementById('DashDocCommentView-' + this._props.docId) as HTMLDivElement; ele && (ele.style.backgroundColor = 'orange'); }; componentWillUnmount = () => Object.values(this._disposers).forEach(disposer => disposer?.()); + isContentActive = () => this._props.tbox._props.isContentActive() || this._props.tbox.isAnyChildContentActive?.(); render() { - return !this._dashDoc || !this._finalLayout || this.props.hidden ? null : ( + return !this._dashDoc || this._props.hidden ? null : ( <div ref={this._spanRef} className="dash-span" style={{ - width: this._width, + width: `calc(100% - ${horizPadding}px)`, height: this._height, - position: 'absolute', - display: 'inline-block', - left: 0, - top: 0, + position: 'relative', + display: 'flex', + margin: 'auto', + pointerEvents: this.isContentActive() ? undefined : 'none', }} onPointerLeave={this.onPointerLeave} onPointerEnter={this.onPointerEnter} @@ -198,27 +202,25 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> { onKeyUp={e => e.stopPropagation()} onWheel={e => e.preventDefault()}> <DocumentView - Document={this._finalLayout} + Document={this._dashDoc} addDocument={returnFalse} - rootSelected={returnFalse} //{this._textBox.props.isSelected} removeDocument={this.removeDoc} isDocumentActive={returnFalse} - isContentActive={emptyFunction} - styleProvider={this._textBox.props.styleProvider} - docViewPath={this._textBox.props.docViewPath} + isContentActive={this.isContentActive} + styleProvider={this._textBox._props.styleProvider} + containerViewPath={this._textBox.DocumentView?.().docViewPath} ScreenToLocalTransform={this.getDocTransform} - addDocTab={this._textBox.props.addDocTab} + addDocTab={this._textBox._props.addDocTab} pinToPres={returnFalse} - renderDepth={this._textBox.props.renderDepth + 1} - PanelWidth={this._finalLayout[Width]} - PanelHeight={this._finalLayout[Height]} + renderDepth={this._textBox._props.renderDepth + 1} + PanelWidth={this._dashDoc[Width]} + PanelHeight={this._dashDoc[Height]} focus={this.outerFocus} - whenChildContentsActiveChanged={returnFalse} - bringToFront={emptyFunction} + whenChildContentsActiveChanged={this._props.tbox.whenChildContentsActiveChanged} dontRegisterView={false} - childFilters={this.props.tbox?.props.childFilters} - childFiltersByRanges={this.props.tbox?.props.childFiltersByRanges} - searchFilterDocs={this.props.tbox?.props.searchFilterDocs} + childFilters={this._props.tbox?._props.childFilters} + childFiltersByRanges={this._props.tbox?._props.childFiltersByRanges} + searchFilterDocs={this._props.tbox?._props.searchFilterDocs} /> </div> ); diff --git a/src/client/views/nodes/formattedText/DashFieldView.scss b/src/client/views/nodes/formattedText/DashFieldView.scss index ad315acc8..3426ba1a7 100644 --- a/src/client/views/nodes/formattedText/DashFieldView.scss +++ b/src/client/views/nodes/formattedText/DashFieldView.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables'; +@import '../../global/globalCssVariables.module.scss'; .dashFieldView { position: relative; diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx index d5ad128fe..dc9914637 100644 --- a/src/client/views/nodes/formattedText/DashFieldView.tsx +++ b/src/client/views/nodes/formattedText/DashFieldView.tsx @@ -1,23 +1,24 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Tooltip } from '@material-ui/core'; -import { action, computed, IReactionDisposer, observable } from 'mobx'; +import { Tooltip } from '@mui/material'; +import { action, computed, IReactionDisposer, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import * as ReactDOM from 'react-dom/client'; import { Doc } from '../../../../fields/Doc'; import { List } from '../../../../fields/List'; import { listSpec } from '../../../../fields/Schema'; import { SchemaHeaderField } from '../../../../fields/SchemaHeaderField'; -import { Cast, StrCast } from '../../../../fields/Types'; +import { Cast } from '../../../../fields/Types'; import { emptyFunction, returnFalse, returnZero, setupMoveUpEvents } from '../../../../Utils'; import { DocServer } from '../../../DocServer'; import { CollectionViewType } from '../../../documents/DocumentTypes'; +import { Transform } from '../../../util/Transform'; import { AntimodeMenu, AntimodeMenuProps } from '../../AntimodeMenu'; import { SchemaTableCell } from '../../collections/collectionSchema/SchemaTableCell'; +import { ObservableReactComponent } from '../../ObservableReactComponent'; import { OpenWhere } from '../DocumentView'; import './DashFieldView.scss'; import { FormattedTextBox } from './FormattedTextBox'; -import React = require('react'); -import { Transform } from '../../../util/Transform'; export class DashFieldView { dom: HTMLDivElement; // container for label and value @@ -25,7 +26,7 @@ export class DashFieldView { node: any; tbox: FormattedTextBox; - unclickable = () => !this.tbox.props.isSelected() && this.node.marks.some((m: any) => m.type === this.tbox.EditorView?.state.schema.marks.linkAnchor && m.attrs.noPreview); + unclickable = () => !this.tbox._props.isSelected() && this.node.marks.some((m: any) => m.type === this.tbox.EditorView?.state.schema.marks.linkAnchor && m.attrs.noPreview); constructor(node: any, view: any, getPos: any, tbox: FormattedTextBox) { this.node = node; this.tbox = tbox; @@ -70,10 +71,10 @@ export class DashFieldView { } catch {} }); } - @action deselectNode() { + deselectNode() { this.dom.classList.remove('ProseMirror-selectednode'); } - @action selectNode() { + selectNode() { this.dom.classList.add('ProseMirror-selectednode'); } } @@ -92,25 +93,27 @@ interface IDashFieldViewInternal { } @observer -export class DashFieldViewInternal extends React.Component<IDashFieldViewInternal> { +export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldViewInternal> { _reactionDisposer: IReactionDisposer | undefined; _textBoxDoc: Doc; _fieldKey: string; _fieldStringRef = React.createRef<HTMLSpanElement>(); - @observable _dashDoc: Doc | undefined; + @observable _dashDoc: Doc | undefined = undefined; @observable _expanded = false; constructor(props: IDashFieldViewInternal) { super(props); - this._fieldKey = this.props.fieldKey; - this._textBoxDoc = this.props.tbox.props.Document; + makeObservable(this); + this._fieldKey = this._props.fieldKey; + this._textBoxDoc = this._props.tbox.Document; - if (this.props.docId) { - DocServer.GetRefField(this.props.docId).then(action(dashDoc => dashDoc instanceof Doc && (this._dashDoc = dashDoc))); + if (this._props.docId) { + DocServer.GetRefField(this._props.docId).then(action(dashDoc => dashDoc instanceof Doc && (this._dashDoc = dashDoc))); } else { - this._dashDoc = this.props.tbox.rootDoc; + this._dashDoc = this._props.tbox.Document; } } + componentWillUnmount() { this._reactionDisposer?.(); } @@ -119,18 +122,18 @@ export class DashFieldViewInternal extends React.Component<IDashFieldViewInterna // set the display of the field's value (checkbox for booleans, span of text for strings) @computed get fieldValueContent() { return !this._dashDoc ? null : ( - <div onClick={action(e => (this._expanded = !this.props.editable ? !this._expanded : true))} style={{ fontSize: 'smaller', width: this.props.hideKey ? this.props.tbox.props.PanelWidth() - 20 : undefined }}> + <div onClick={action(e => (this._expanded = !this._props.editable ? !this._expanded : true))} style={{ fontSize: 'smaller', width: this._props.hideKey ? this._props.tbox._props.PanelWidth() - 20 : undefined }}> <SchemaTableCell Document={this._dashDoc} col={0} deselectCell={emptyFunction} selectCell={emptyFunction} - maxWidth={this.props.hideKey ? undefined : this.return100} - columnWidth={this.props.hideKey ? () => this.props.tbox.props.PanelWidth() - 20 : returnZero} + maxWidth={this._props.hideKey ? undefined : this.return100} + columnWidth={this._props.hideKey ? () => this._props.tbox._props.PanelWidth() - 20 : returnZero} selectedCell={() => [this._dashDoc!, 0]} fieldKey={this._fieldKey} rowHeight={returnZero} - isRowActive={() => this._expanded && this.props.editable} + isRowActive={() => this._expanded && this._props.editable} padding={0} getFinfo={emptyFunction} setColumnValues={returnFalse} @@ -145,9 +148,9 @@ export class DashFieldViewInternal extends React.Component<IDashFieldViewInterna } createPivotForField = (e: React.MouseEvent) => { - let container = this.props.tbox.props.DocumentView?.().props.docViewPath().lastElement(); + let container = this._props.tbox.DocumentView?.().containerViewPath?.().lastElement(); if (container) { - const embedding = Doc.MakeEmbedding(container.rootDoc); + const embedding = Doc.MakeEmbedding(container.Document); embedding._type_collection = CollectionViewType.Time; const colHdrKey = '_' + container.LayoutFieldKey + '_columnHeaders'; let list = Cast(embedding[colHdrKey], listSpec(SchemaHeaderField)); @@ -157,7 +160,7 @@ export class DashFieldViewInternal extends React.Component<IDashFieldViewInterna list.map(c => c.heading).indexOf(this._fieldKey) === -1 && list.push(new SchemaHeaderField(this._fieldKey, '#f1efeb')); list.map(c => c.heading).indexOf('text') === -1 && list.push(new SchemaHeaderField('text', '#f1efeb')); embedding._pivotField = this._fieldKey.startsWith('#') ? 'tags' : this._fieldKey; - this.props.tbox.props.addDocTab(embedding, OpenWhere.addRight); + this._props.tbox._props.addDocTab(embedding, OpenWhere.addRight); } }; @@ -175,16 +178,17 @@ export class DashFieldViewInternal extends React.Component<IDashFieldViewInterna <div className="dashFieldView" style={{ - width: this.props.width, - height: this.props.height, + width: this._props.width, + height: this._props.height, + pointerEvents: this._props.tbox._props.isSelected() || this._props.tbox.isAnyChildContentActive?.() ? undefined : 'none', }}> - {this.props.hideKey ? null : ( + {this._props.hideKey ? null : ( <span className="dashFieldView-labelSpan" title="click to see related tags" onPointerDown={this.onPointerDownLabelSpan}> {this._fieldKey} </span> )} - {this.props.fieldKey.startsWith('#') ? null : this.fieldValueContent} + {this._props.fieldKey.startsWith('#') ? null : this.fieldValueContent} </div> ); } @@ -197,7 +201,7 @@ export class DashFieldViewMenu extends AntimodeMenu<AntimodeMenuProps> { super(props); DashFieldViewMenu.Instance = this; } - @action + showFields = (e: React.MouseEvent) => { DashFieldViewMenu.createFieldView(e); DashFieldViewMenu.Instance.fadeOut(true); diff --git a/src/client/views/nodes/formattedText/EquationEditor.scss b/src/client/views/nodes/formattedText/EquationEditor.scss new file mode 100644 index 000000000..b0c17e56e --- /dev/null +++ b/src/client/views/nodes/formattedText/EquationEditor.scss @@ -0,0 +1,468 @@ +// using this import, we get runtime errors when trying to load the specified font-faces +// so we copy the .css and remove the @font-face imports + +// @import 'mathquill/build/mathquill.css' +/* + * MathQuill v0.10.1 http://mathquill.com + * by Han, Jeanine, and Mary maintainers@mathquill.com + * + * This Source Code Form is subject to the terms of the + * Mozilla Public License, v. 2.0. If a copy of the MPL + * was not distributed with this file, You can obtain + * one at http://mozilla.org/MPL/2.0/. + */ +// @font-face { +// font-family: Symbola; +// src: url(font/Symbola.eot); +// src: +// local('Symbola Regular'), +// local('Symbola'), +// url(font/Symbola.woff2) format('woff2'), +// url(font/Symbola.woff) format('woff'), +// url(font/Symbola.ttf) format('truetype'), +// url(font/Symbola.otf) format('opentype'), +// url(font/Symbola.svg#Symbola) format('svg'); +// } +.mq-editable-field { + display: -moz-inline-box; + display: inline-block; +} +.mq-editable-field .mq-cursor { + border-left: 1px solid black; + margin-left: -1px; + position: relative; + z-index: 1; + padding: 0; + display: -moz-inline-box; + display: inline-block; +} +.mq-editable-field .mq-cursor.mq-blink { + visibility: hidden; +} +.mq-editable-field, +.mq-math-mode .mq-editable-field { + border: 1px solid gray; +} +.mq-editable-field.mq-focused, +.mq-math-mode .mq-editable-field.mq-focused { + -webkit-box-shadow: + #8bd 0 0 1px 2px, + inset #6ae 0 0 2px 0; + -moz-box-shadow: + #8bd 0 0 1px 2px, + inset #6ae 0 0 2px 0; + box-shadow: + #8bd 0 0 1px 2px, + inset #6ae 0 0 2px 0; + border-color: #709ac0; + border-radius: 1px; +} +.mq-math-mode .mq-editable-field { + margin: 1px; +} +.mq-editable-field .mq-latex-command-input { + color: inherit; + font-family: 'Courier New', monospace; + border: 1px solid gray; + padding-right: 1px; + margin-right: 1px; + margin-left: 2px; +} +.mq-editable-field .mq-latex-command-input.mq-empty { + background: transparent; +} +.mq-editable-field .mq-latex-command-input.mq-hasCursor { + border-color: ActiveBorder; +} +.mq-editable-field.mq-empty:after, +.mq-editable-field.mq-text-mode:after, +.mq-math-mode .mq-empty:after { + visibility: hidden; + content: 'c'; +} +.mq-editable-field .mq-cursor:only-child:after, +.mq-editable-field .mq-textarea + .mq-cursor:last-child:after { + visibility: hidden; + content: 'c'; +} +.mq-editable-field .mq-text-mode .mq-cursor:only-child:after { + content: ''; +} +.mq-editable-field.mq-text-mode { + overflow-x: auto; + overflow-y: hidden; +} +.mq-root-block, +.mq-math-mode .mq-root-block { + display: -moz-inline-box; + display: inline-block; + width: 100%; + padding: 2px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + white-space: nowrap; + overflow: hidden; + vertical-align: middle; +} +.mq-math-mode { + font-variant: normal; + font-weight: normal; + font-style: normal; + font-size: 115%; + line-height: 1; + display: -moz-inline-box; + display: inline-block; +} +.mq-math-mode .mq-non-leaf, +.mq-math-mode .mq-scaled { + display: -moz-inline-box; + display: inline-block; +} +.mq-math-mode var, +.mq-math-mode .mq-text-mode, +.mq-math-mode .mq-nonSymbola { + font-family: 'Times New Roman', Symbola, serif; + line-height: 0.9; +} +.mq-math-mode * { + font-size: inherit; + line-height: inherit; + margin: 0; + padding: 0; + border-color: black; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + box-sizing: border-box; +} +.mq-math-mode .mq-empty { + background: #ccc; +} +.mq-math-mode .mq-empty.mq-root-block { + background: transparent; +} +.mq-math-mode.mq-empty { + background: transparent; +} +.mq-math-mode .mq-text-mode { + display: inline-block; +} +.mq-math-mode .mq-text-mode.mq-hasCursor { + box-shadow: inset darkgray 0 0.1em 0.2em; + padding: 0 0.1em; + margin: 0 -0.1em; + min-width: 1ex; +} +.mq-math-mode .mq-font { + font: + 1em 'Times New Roman', + Symbola, + serif; +} +.mq-math-mode .mq-font * { + font-family: inherit; + font-style: inherit; +} +.mq-math-mode b, +.mq-math-mode b.mq-font { + font-weight: bolder; +} +.mq-math-mode var, +.mq-math-mode i, +.mq-math-mode i.mq-font { + font-style: italic; +} +.mq-math-mode var.mq-f { + margin-right: 0.2em; + margin-left: 0.1em; +} +.mq-math-mode .mq-roman var.mq-f { + margin: 0; +} +.mq-math-mode big { + font-size: 200%; +} +.mq-math-mode .mq-int > big { + display: inline-block; + -webkit-transform: scaleX(0.7); + -moz-transform: scaleX(0.7); + -ms-transform: scaleX(0.7); + -o-transform: scaleX(0.7); + transform: scaleX(0.7); + vertical-align: -0.16em; +} +.mq-math-mode .mq-int > .mq-supsub { + font-size: 80%; + vertical-align: -1.1em; + padding-right: 0.2em; +} +.mq-math-mode .mq-int > .mq-supsub > .mq-sup > .mq-sup-inner { + vertical-align: 1.3em; +} +.mq-math-mode .mq-int > .mq-supsub > .mq-sub { + margin-left: -0.35em; +} +.mq-math-mode .mq-roman { + font-style: normal; +} +.mq-math-mode .mq-sans-serif { + font-family: sans-serif, Symbola, serif; +} +.mq-math-mode .mq-monospace { + font-family: monospace, Symbola, serif; +} +.mq-math-mode .mq-overline { + border-top: 1px solid black; + margin-top: 1px; +} +.mq-math-mode .mq-underline { + border-bottom: 1px solid black; + margin-bottom: 1px; +} +.mq-math-mode .mq-binary-operator { + padding: 0 0.2em; + display: -moz-inline-box; + display: inline-block; +} +.mq-math-mode .mq-supsub { + text-align: left; + font-size: 90%; + vertical-align: -0.5em; +} +.mq-math-mode .mq-supsub.mq-sup-only { + vertical-align: 0.5em; +} +.mq-math-mode .mq-supsub.mq-sup-only .mq-sup { + display: inline-block; + vertical-align: text-bottom; +} +.mq-math-mode .mq-supsub .mq-sup { + display: block; +} +.mq-math-mode .mq-supsub .mq-sub { + display: block; + float: left; +} +.mq-math-mode .mq-supsub .mq-binary-operator { + padding: 0 0.1em; +} +.mq-math-mode .mq-supsub .mq-fraction { + font-size: 70%; +} +.mq-math-mode sup.mq-nthroot { + font-size: 80%; + vertical-align: 0.8em; + margin-right: -0.6em; + margin-left: 0.2em; + min-width: 0.5em; +} +.mq-math-mode .mq-paren { + padding: 0 0.1em; + vertical-align: top; + -webkit-transform-origin: center 0.06em; + -moz-transform-origin: center 0.06em; + -ms-transform-origin: center 0.06em; + -o-transform-origin: center 0.06em; + transform-origin: center 0.06em; +} +.mq-math-mode .mq-paren.mq-ghost { + color: silver; +} +.mq-math-mode .mq-paren + span { + margin-top: 0.1em; + margin-bottom: 0.1em; +} +.mq-math-mode .mq-array { + vertical-align: middle; + text-align: center; +} +.mq-math-mode .mq-array > span { + display: block; +} +.mq-math-mode .mq-operator-name { + font-family: Symbola, 'Times New Roman', serif; + line-height: 0.9; + font-style: normal; +} +.mq-math-mode var.mq-operator-name.mq-first { + padding-left: 0.2em; +} +.mq-math-mode var.mq-operator-name.mq-last, +.mq-math-mode .mq-supsub.mq-after-operator-name { + padding-right: 0.2em; +} +.mq-math-mode .mq-fraction { + font-size: 90%; + text-align: center; + vertical-align: -0.4em; + padding: 0 0.2em; +} +.mq-math-mode .mq-fraction, +.mq-math-mode .mq-large-operator, +.mq-math-mode x:-moz-any-link { + display: -moz-groupbox; +} +.mq-math-mode .mq-fraction, +.mq-math-mode .mq-large-operator, +.mq-math-mode x:-moz-any-link, +.mq-math-mode x:default { + display: inline-block; +} +.mq-math-mode .mq-numerator, +.mq-math-mode .mq-denominator { + display: block; +} +.mq-math-mode .mq-numerator { + padding: 0 0.1em; +} +.mq-math-mode .mq-denominator { + border-top: 1px solid; + float: right; + width: 100%; + padding: 0.1em; +} +.mq-math-mode .mq-sqrt-prefix { + padding-top: 0; + position: relative; + top: 0.1em; + vertical-align: top; + -webkit-transform-origin: top; + -moz-transform-origin: top; + -ms-transform-origin: top; + -o-transform-origin: top; + transform-origin: top; +} +.mq-math-mode .mq-sqrt-stem { + border-top: 1px solid; + margin-top: 1px; + padding-left: 0.15em; + padding-right: 0.2em; + margin-right: 0.1em; + padding-top: 1px; +} +.mq-math-mode .mq-vector-prefix { + display: block; + text-align: center; + line-height: 0.25em; + margin-bottom: -0.1em; + font-size: 0.75em; +} +.mq-math-mode .mq-vector-stem { + display: block; +} +.mq-math-mode .mq-large-operator { + vertical-align: -0.2em; + padding: 0.2em; + text-align: center; +} +.mq-math-mode .mq-large-operator .mq-from, +.mq-math-mode .mq-large-operator big, +.mq-math-mode .mq-large-operator .mq-to { + display: block; +} +.mq-math-mode .mq-large-operator .mq-from, +.mq-math-mode .mq-large-operator .mq-to { + font-size: 80%; +} +.mq-math-mode .mq-large-operator .mq-from { + float: right; + /* take out of normal flow to manipulate baseline */ + width: 100%; +} +.mq-math-mode, +.mq-math-mode .mq-editable-field { + cursor: text; + font-family: Symbola, 'Times New Roman', serif; +} +.mq-math-mode .mq-overarrow { + border-top: 1px solid black; + margin-top: 1px; + padding-top: 0.2em; +} +.mq-math-mode .mq-overarrow:before { + display: block; + position: relative; + top: -0.34em; + font-size: 0.5em; + line-height: 0em; + content: '\27A4'; + text-align: right; +} +.mq-math-mode .mq-overarrow.mq-arrow-left:before { + -moz-transform: scaleX(-1); + -o-transform: scaleX(-1); + -webkit-transform: scaleX(-1); + transform: scaleX(-1); + filter: FlipH; + -ms-filter: 'FlipH'; +} +.mq-math-mode .mq-selection, +.mq-editable-field .mq-selection, +.mq-math-mode .mq-selection .mq-non-leaf, +.mq-editable-field .mq-selection .mq-non-leaf, +.mq-math-mode .mq-selection .mq-scaled, +.mq-editable-field .mq-selection .mq-scaled { + background: #b4d5fe !important; + background: Highlight !important; + color: HighlightText; + border-color: HighlightText; +} +.mq-math-mode .mq-selection .mq-matrixed, +.mq-editable-field .mq-selection .mq-matrixed { + background: #39f !important; +} +.mq-math-mode .mq-selection .mq-matrixed-container, +.mq-editable-field .mq-selection .mq-matrixed-container { + filter: progid:DXImageTransform.Microsoft.Chroma(color='#3399FF') !important; +} +.mq-math-mode .mq-selection.mq-blur, +.mq-editable-field .mq-selection.mq-blur, +.mq-math-mode .mq-selection.mq-blur .mq-non-leaf, +.mq-editable-field .mq-selection.mq-blur .mq-non-leaf, +.mq-math-mode .mq-selection.mq-blur .mq-scaled, +.mq-editable-field .mq-selection.mq-blur .mq-scaled, +.mq-math-mode .mq-selection.mq-blur .mq-matrixed, +.mq-editable-field .mq-selection.mq-blur .mq-matrixed { + background: #d4d4d4 !important; + color: black; + border-color: black; +} +.mq-math-mode .mq-selection.mq-blur .mq-matrixed-container, +.mq-editable-field .mq-selection.mq-blur .mq-matrixed-container { + filter: progid:DXImageTransform.Microsoft.Chroma(color='#D4D4D4') !important; +} +.mq-editable-field .mq-textarea, +.mq-math-mode .mq-textarea { + position: relative; + -webkit-user-select: text; + -moz-user-select: text; + user-select: text; +} +.mq-editable-field .mq-textarea *, +.mq-math-mode .mq-textarea *, +.mq-editable-field .mq-selectable, +.mq-math-mode .mq-selectable { + -webkit-user-select: text; + -moz-user-select: text; + user-select: text; + position: absolute; + clip: rect(1em 1em 1em 1em); + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + -o-transform: scale(0); + transform: scale(0); + resize: none; + width: 1px; + height: 1px; +} +.mq-math-mode .mq-matrixed { + background: white; + display: -moz-inline-box; + display: inline-block; +} +.mq-math-mode .mq-matrixed-container { + filter: progid:DXImageTransform.Microsoft.Chroma(color='white'); + margin-top: -0.1em; +} diff --git a/src/client/views/nodes/formattedText/EquationEditor.tsx b/src/client/views/nodes/formattedText/EquationEditor.tsx new file mode 100644 index 000000000..b4102e08e --- /dev/null +++ b/src/client/views/nodes/formattedText/EquationEditor.tsx @@ -0,0 +1,87 @@ +import React, { Component, createRef } from 'react'; + +// Import JQuery, required for the functioning of the equation editor +import $ from 'jquery'; + +import './EquationEditor.scss'; + +// eslint-disable-next-line @typescript-eslint/ban-ts-ignore +// @ts-ignore +window.jQuery = $; + +// eslint-disable-next-line @typescript-eslint/ban-ts-ignore +// @ts-ignore +require('mathquill/build/mathquill'); + +(window as any).MathQuill = (window as any).MathQuill.getInterface(1); + +type EquationEditorProps = { + onChange(latex: string): void; + value: string; + spaceBehavesLikeTab?: boolean; + autoCommands: string; + autoOperatorNames: string; + onEnter?(): void; +}; + +/** + * @typedef {EquationEditorProps} props + * @prop {Function} onChange Triggered when content of the equation editor changes + * @prop {string} value Content of the equation handler + * @prop {boolean}[false] spaceBehavesLikeTab Whether spacebar should simulate tab behavior + * @prop {string} autoCommands List of commands for which you only have to type the name of the + * command with a \ in front of it. Examples: pi theta rho sum + * @prop {string} autoOperatorNames List of operators for which you only have to type the name of the + * operator with a \ in front of it. Examples: sin cos tan + * @prop {Function} onEnter Triggered when enter is pressed in the equation editor + * @extends {Component<EquationEditorProps>} + */ +class EquationEditor extends Component<EquationEditorProps> { + element: any; + mathField: any; + ignoreEditEvents: number; + + // Element needs to be in the class format and thus requires a constructor. The steps that are run + // in the constructor is to make sure that React can succesfully communicate with the equation + // editor. + constructor(props: any) { + super(props); + + this.element = createRef(); + this.mathField = null; + + // MathJax apparently fire 2 edit events on startup. + this.ignoreEditEvents = 2; + } + + componentDidMount() { + const { onChange, value, spaceBehavesLikeTab, autoCommands, autoOperatorNames, onEnter } = this.props; + + const config = { + handlers: { + edit: () => { + if (this.ignoreEditEvents > 0) { + this.ignoreEditEvents -= 1; + return; + } + if (this.mathField.latex() !== value) { + onChange(this.mathField.latex()); + } + }, + enter: onEnter, + }, + spaceBehavesLikeTab, + autoCommands, + autoOperatorNames, + }; + + this.mathField = (window as any).MathQuill.MathField(this.element.current, config); + this.mathField.latex(value || ''); + } + + render() { + return <span ref={this.element} style={{ border: '0px', boxShadow: 'None' }} />; + } +} + +export default EquationEditor; diff --git a/src/client/views/nodes/formattedText/EquationView.tsx b/src/client/views/nodes/formattedText/EquationView.tsx index 5e62d94c2..b786c5ffb 100644 --- a/src/client/views/nodes/formattedText/EquationView.tsx +++ b/src/client/views/nodes/formattedText/EquationView.tsx @@ -1,13 +1,13 @@ -import EquationEditor from 'equation-editor-react'; -import { IReactionDisposer, trace } from 'mobx'; +import { IReactionDisposer } from 'mobx'; import { observer } from 'mobx-react'; import { TextSelection } from 'prosemirror-state'; +import * as React from 'react'; import * as ReactDOM from 'react-dom/client'; import { Doc } from '../../../../fields/Doc'; import { StrCast } from '../../../../fields/Types'; import './DashFieldView.scss'; +import EquationEditor from './EquationEditor'; import { FormattedTextBox } from './FormattedTextBox'; -import React = require('react'); export class EquationView { dom: HTMLDivElement; // container for label and value @@ -63,10 +63,10 @@ export class EquationViewInternal extends React.Component<IEquationViewInternal> _fieldKey: string; _ref: React.RefObject<EquationEditor> = React.createRef(); - constructor(props: IEquationViewInternal) { + constructor(props: any) { super(props); - this._fieldKey = this.props.fieldKey; - this._textBoxDoc = this.props.tbox.props.Document; + this._fieldKey = props.fieldKey; + this._textBoxDoc = props.tbox.Document; } componentWillUnmount() { @@ -101,7 +101,7 @@ export class EquationViewInternal extends React.Component<IEquationViewInternal> <EquationEditor ref={this._ref} value={StrCast(this._textBoxDoc[this._fieldKey], 'y=')} - onChange={str => (this._textBoxDoc[this._fieldKey] = str)} + onChange={(str: any) => (this._textBoxDoc[this._fieldKey] = str)} autoCommands="pi theta sqrt sum prod alpha beta gamma rho" autoOperatorNames="sin cos tan" spaceBehavesLikeTab={true} diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss index 818c0cbe7..03ff0436b 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.scss +++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables'; +@import '../../global/globalCssVariables.module.scss'; .ProseMirror { width: 100%; @@ -49,6 +49,7 @@ audiotag:hover { transition: opacity 1s; width: 100%; position: relative; + transform-origin: left top; top: 0; left: 0; } @@ -89,6 +90,7 @@ audiotag:hover { bottom: 0; width: 11; height: 11; + cursor: default; } .formattedTextBox-outer { @@ -590,7 +592,7 @@ footnote::before { } @media only screen and (max-width: 1000px) { - @import '../../global/globalCssVariables'; + @import '../../global/globalCssVariables.module.scss'; .ProseMirror { width: 100%; diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 563b6a25d..f9cef1a60 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1,8 +1,7 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Tooltip } from '@material-ui/core'; -import { isEqual } from 'lodash'; -import { action, computed, IReactionDisposer, observable, ObservableSet, reaction, runInAction } from 'mobx'; +import { Tooltip } from '@mui/material'; +import { action, computed, IReactionDisposer, makeObservable, observable, ObservableSet, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import { baseKeymap, selectAll } from 'prosemirror-commands'; import { history } from 'prosemirror-history'; @@ -11,21 +10,20 @@ import { keymap } from 'prosemirror-keymap'; import { Fragment, Mark, Node, Slice } from 'prosemirror-model'; import { EditorState, NodeSelection, Plugin, TextSelection, Transaction } from 'prosemirror-state'; import { EditorView } from 'prosemirror-view'; +import * as React from 'react'; import { BsMarkdownFill } from 'react-icons/bs'; import { DateField } from '../../../../fields/DateField'; import { Doc, DocListCast, Field, Opt } from '../../../../fields/Doc'; -import { AclAdmin, AclAugment, AclEdit, AclSelfEdit, DocCss, ForceServerWrite, Height, UpdatingFromServer, Width } from '../../../../fields/DocSymbols'; +import { AclAdmin, AclAugment, AclEdit, AclSelfEdit, DocCss, DocData, ForceServerWrite, UpdatingFromServer } from '../../../../fields/DocSymbols'; import { Id } from '../../../../fields/FieldSymbols'; import { InkTool } from '../../../../fields/InkField'; import { List } from '../../../../fields/List'; import { PrefetchProxy } from '../../../../fields/Proxy'; import { RichTextField } from '../../../../fields/RichTextField'; -import { RichTextUtils } from '../../../../fields/RichTextUtils'; import { ComputedField } from '../../../../fields/ScriptField'; import { BoolCast, Cast, DocCast, FieldValue, NumCast, ScriptCast, StrCast } from '../../../../fields/Types'; import { GetEffectiveAcl, TraceMobx } from '../../../../fields/util'; import { addStyleSheet, addStyleSheetRule, clearStyleSheetRules, emptyFunction, numberRange, returnFalse, returnZero, setupMoveUpEvents, smoothScroll, unimplementedFunction, Utils } from '../../../../Utils'; -import { GoogleApiClientUtils, Pulls, Pushes } from '../../../apis/google_docs/GoogleApiClientUtils'; import { gptAPICall, GPTCallType } from '../../../apis/gpt/GPT'; import { DocServer } from '../../../DocServer'; import { Docs, DocUtils } from '../../../documents/Documents'; @@ -44,17 +42,17 @@ import { CollectionStackingView } from '../../collections/CollectionStackingView import { CollectionTreeView } from '../../collections/CollectionTreeView'; import { ContextMenu } from '../../ContextMenu'; import { ContextMenuProps } from '../../ContextMenuItem'; -import { ViewBoxAnnotatableComponent } from '../../DocComponent'; -import { DocumentButtonBar } from '../../DocumentButtonBar'; +import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../../DocComponent'; import { Colors } from '../../global/globalEnums'; import { LightboxView } from '../../LightboxView'; import { AnchorMenu } from '../../pdf/AnchorMenu'; import { GPTPopup } from '../../pdf/GPTPopup/GPTPopup'; import { SidebarAnnos } from '../../SidebarAnnos'; import { StyleProp } from '../../StyleProvider'; -import { DocFocusOptions, DocumentView, DocumentViewInternal, OpenWhere } from '../DocumentView'; -import { FieldView, FieldViewProps } from '../FieldView'; -import { LinkDocPreview } from '../LinkDocPreview'; +import { media_state } from '../AudioBox'; +import { DocumentView, DocumentViewInternal, OpenWhere } from '../DocumentView'; +import { FocusViewOptions, FieldView, FieldViewProps } from '../FieldView'; +import { LinkInfo } from '../LinkDocPreview'; import { PinProps, PresBox } from '../trails'; import { DashDocCommentView } from './DashDocCommentView'; import { DashDocView } from './DashDocView'; @@ -69,19 +67,9 @@ import { RichTextMenu, RichTextMenuPlugin } from './RichTextMenu'; import { RichTextRules } from './RichTextRules'; import { schema } from './schema_rts'; import { SummaryView } from './SummaryView'; -import applyDevTools = require('prosemirror-dev-tools'); -import React = require('react'); -import { media_state } from '../AudioBox'; -import { setCORS } from 'google-translate-api-browser'; -import { isDarkMode } from '../../../util/reportManager/reportManagerUtils'; -// setting up cors-anywhere server address -const translate = setCORS('http://cors-anywhere.herokuapp.com/'); -export const GoogleRef = 'googleDocId'; -type PullHandler = (exportState: Opt<GoogleApiClientUtils.Docs.ImportResult>, dataDoc: Doc) => void; - -export interface FormattedTextBoxProps {} +// import * as applyDevTools from 'prosemirror-dev-tools'; @observer -export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps & FormattedTextBoxProps>() { +export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface { public static LayoutString(fieldStr: string) { return FieldView.LayoutString(FormattedTextBox, fieldStr); } @@ -94,12 +82,14 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps static _bulletStyleSheet: any = addStyleSheet(); static _userStyleSheet: any = addStyleSheet(); static _hadSelection: boolean = false; + private _selectionHTML: string | undefined; private _sidebarRef = React.createRef<SidebarAnnos>(); private _sidebarTagRef = React.createRef<React.Component>(); private _ref: React.RefObject<HTMLDivElement> = React.createRef(); private _scrollRef: React.RefObject<HTMLDivElement> = React.createRef(); private _editorView: Opt<EditorView>; public _applyingChange: string = ''; + private _inDrop = false; private _finishingLink = false; private _searchIndex = 0; private _lastTimedMark: Mark | undefined = undefined; @@ -110,6 +100,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps private _recordingStart: number = 0; private _ignoreScroll = false; private _lastText = ''; + private _hadDownFocus = false; private _focusSpeed: Opt<number>; private _keymap: any = undefined; private _rules: RichTextRules | undefined; @@ -117,6 +108,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps private _forceDownNode: Node | undefined; private _downX = 0; private _downY = 0; + private _downTime = 0; private _break = true; public ProseRef?: HTMLDivElement; public get EditorView() { @@ -130,7 +122,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps } @computed get noSidebar() { - return this.props.docViewPath().lastElement()?.props.hideDecorationTitle || this.props.noSidebar || this.Document._layout_noSidebar; + return this.DocumentView?.()._props.hideDecorationTitle || this._props.noSidebar || this.Document._layout_noSidebar; } @computed get layout_sidebarWidthPercent() { return this._showSidebar ? '20%' : StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%'); @@ -139,19 +131,19 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this.fieldKey + '_backgroundColor'], '#e4e4e4')); } @computed get layout_autoHeight() { - return (this.props.forceAutoHeight || this.layoutDoc._layout_autoHeight) && !this.props.ignoreAutoHeight; + return (this._props.forceAutoHeight || this.layoutDoc._layout_autoHeight) && !this._props.ignoreAutoHeight; } @computed get textHeight() { - return NumCast(this.rootDoc[this.fieldKey + '_height']); + return NumCast(this.dataDoc[this.fieldKey + '_height']); } @computed get scrollHeight() { - return NumCast(this.rootDoc[this.fieldKey + '_scrollHeight']); + return NumCast(this.dataDoc[this.fieldKey + '_scrollHeight']); } @computed get sidebarHeight() { - return !this.sidebarWidth() ? 0 : NumCast(this.rootDoc[this.SidebarKey + '_height']); + return !this.sidebarWidth() ? 0 : NumCast(this.dataDoc[this.SidebarKey + '_height']); } @computed get titleHeight() { - return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HeaderMargin) || 0; + return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.HeaderMargin) || 0; } @computed get layout_autoHeightMargins() { return this.titleHeight + NumCast(this.layoutDoc._layout_autoHeightMargins); @@ -163,8 +155,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps !this.dataDoc[`${this.fieldKey}_recordingSource`] && (this.dataDoc.mediaState = value ? media_state.Recording : undefined); } @computed get config() { - this._keymap = buildKeymap(schema, this.props); - this._rules = new RichTextRules(this.rootDoc, this); + this._keymap = buildKeymap(schema, this._props); + this._rules = new RichTextRules(this.Document, this); return { schema, plugins: [ @@ -188,7 +180,10 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps private gptRes: string = ''; public static PasteOnLoad: ClipboardEvent | undefined; - public static SelectOnLoad = ''; + private static SelectOnLoad: Doc | undefined; + public static SetSelectOnLoad(doc: Doc) { + FormattedTextBox.SelectOnLoad = doc; + } public static DontSelectInitialText = false; // whether initial text should be selected or not public static SelectOnLoadChar = ''; public static IsFragment(html: string) { @@ -206,8 +201,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps return url.startsWith(document.location.origin) ? new URL(url).pathname.split('doc/').lastElement() : ''; // docId } - constructor(props: any) { + constructor(props: FieldViewProps) { super(props); + makeObservable(this); FormattedTextBox.Instance = this; this._recordingStart = Date.now(); } @@ -247,13 +243,13 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps } getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => { - if (!pinProps && this._editorView?.state.selection.empty) return this.rootDoc; - const anchor = Docs.Create.ConfigDocument({ title: StrCast(this.rootDoc.title), annotationOn: this.rootDoc }); + if (!pinProps && this._editorView?.state.selection.empty) return this.Document; + const anchor = Docs.Create.ConfigDocument({ title: StrCast(this.Document.title), annotationOn: this.Document }); this.addDocument(anchor); this._finishingLink = true; this.makeLinkAnchor(anchor, OpenWhere.addRight, undefined, 'Anchored Selection', false, addAsAnnotation); this._finishingLink = false; - PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), scrollable: true } }, this.rootDoc); + PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), scrollable: true } }, this.Document); return anchor; }; @@ -274,14 +270,15 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps if (target) { anchor.followLinkAudio = true; let stopFunc: any; - Doc.GetProto(target).mediaState = media_state.Recording; - Doc.GetProto(target).audioAnnoState = 'recording'; - DocumentViewInternal.recordAudioAnnotation(Doc.GetProto(target), Doc.LayoutFieldKey(target), stop => (stopFunc = stop)); + const targetData = target[DocData]; + targetData.mediaState = media_state.Recording; + targetData.audioAnnoState = 'recording'; + DocumentViewInternal.recordAudioAnnotation(targetData, Doc.LayoutFieldKey(target), stop => (stopFunc = stop)); let reactionDisposer = reaction( () => target.mediaState, action(dictation => { if (!dictation) { - Doc.GetProto(target).audioAnnoState = 'stopped'; + targetData.audioAnnoState = 'stopped'; stopFunc(); reactionDisposer(); } @@ -308,15 +305,24 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps e.preventDefault(); e.stopPropagation(); const targetCreator = (annotationOn?: Doc) => { - const target = DocUtils.GetNewTextDoc('Note linked to ' + this.rootDoc.title, 0, 0, 100, 100, undefined, annotationOn); - FormattedTextBox.SelectOnLoad = target[Id]; + const target = DocUtils.GetNewTextDoc('Note linked to ' + this.Document.title, 0, 0, 100, 100, undefined, annotationOn); + FormattedTextBox.SetSelectOnLoad(target); return target; }; - DragManager.StartAnchorAnnoDrag([ele], new DragManager.AnchorAnnoDragData(this.props.docViewPath().lastElement(), () => this.getAnchor(true), targetCreator), e.pageX, e.pageY); + DragManager.StartAnchorAnnoDrag([ele], new DragManager.AnchorAnnoDragData(this.DocumentView?.()!, () => this.getAnchor(true), targetCreator), e.pageX, e.pageY); }); const coordsB = this._editorView!.coordsAtPos(this._editorView!.state.selection.to); - this.props.isSelected(true) && AnchorMenu.Instance.jumpTo(coordsB.left, coordsB.bottom); + this._props.rootSelected?.() && AnchorMenu.Instance.jumpTo(coordsB.left, coordsB.bottom); + let ele: Opt<HTMLDivElement> = undefined; + try { + const contents = window.getSelection()?.getRangeAt(0).cloneContents(); + if (contents) { + ele = document.createElement('div'); + ele.append(contents); + } + this._selectionHTML = ele?.innerHTML; + } catch (e) {} }; dispatchTransaction = (tx: Transaction) => { @@ -328,7 +334,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps const newText = state.doc.textBetween(0, state.doc.content.size, ' \n'); const newJson = JSON.stringify(state.toJSON()); const prevData = Cast(this.layoutDoc[this.fieldKey], RichTextField, null); // the actual text in the text box - const templateData = this.rootDoc !== this.layoutDoc ? prevData : undefined; // the default text stored in a layout template + const templateData = this.Document !== this.layoutDoc ? prevData : undefined; // the default text stored in a layout template const protoData = Cast(Cast(dataDoc.proto, Doc, null)?.[this.fieldKey], RichTextField, null); // the default text inherited from a prototype const effectiveAcl = GetEffectiveAcl(dataDoc); @@ -350,11 +356,11 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps textChange && (dataDoc[this.fieldKey + '_modificationDate'] = new DateField(new Date(Date.now()))); if ((!prevData && !protoData) || newText || (!newText && !templateData)) { // if no template, or there's text that didn't come from the layout template, write it to the document. (if this is driven by a template, then this overwrites the template text which is intended) - if ((this._finishingLink || this.props.isContentActive()) && removeSelection(newJson) !== removeSelection(prevData?.Data)) { + if ((this._finishingLink || this._props.isContentActive() || this._inDrop) && removeSelection(newJson) !== removeSelection(prevData?.Data)) { const numstring = NumCast(dataDoc[this.fieldKey], null); dataDoc[this.fieldKey] = numstring !== undefined ? Number(newText) : new RichTextField(newJson, newText); dataDoc[this.fieldKey + '_noTemplate'] = true; // mark the data field as being split from the template if it has been edited - textChange && ScriptCast(this.layoutDoc.onTextChanged, null)?.script.run({ this: this.layoutDoc, self: this.rootDoc, text: newText }); + textChange && ScriptCast(this.layoutDoc.onTextChanged, null)?.script.run({ this: this.Document, text: newText }); unchanged = false; } } else { @@ -362,7 +368,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps dataDoc[this.fieldKey] = undefined; this._editorView.updateState(EditorState.fromJSON(this.config, JSON.parse((protoData || prevData).Data))); dataDoc[this.fieldKey + '_noTemplate'] = undefined; // mark the data field as not being split from any template it might have - ScriptCast(this.layoutDoc.onTextChanged, null)?.script.run({ this: this.layoutDoc, self: this.rootDoc, text: newText }); + ScriptCast(this.layoutDoc.onTextChanged, null)?.script.run({ this: this.layoutDoc, text: newText }); unchanged = false; } this._applyingChange = ''; @@ -379,7 +385,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps this._editorView.updateState(EditorState.fromJSON(this.config, json)); } } - if (window.getSelection()?.isCollapsed && this.props.isSelected()) { + if (window.getSelection()?.isCollapsed && this._props.rootSelected?.()) { AnchorMenu.Instance.fadeOut(true); } } @@ -427,7 +433,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps autoLink = () => { const newAutoLinks = new Set<Doc>(); - const oldAutoLinks = LinkManager.Links(this.props.Document).filter(link => link.link_relationship === LinkManager.AutoKeywords); + const oldAutoLinks = LinkManager.Links(this.Document).filter(link => link.link_relationship === LinkManager.AutoKeywords); if (this._editorView?.state.doc.textContent) { const isNodeSel = this._editorView.state.selection instanceof NodeSelection; const f = this._editorView.state.selection.from; @@ -435,22 +441,21 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps var tr = this._editorView.state.tr as any; const autoAnch = this._editorView.state.schema.marks.autoLinkAnchor; tr = tr.removeMark(0, tr.doc.content.size, autoAnch); - DocListCast(Doc.MyPublishedDocs.data).forEach(term => (tr = this.hyperlinkTerm(tr, term, newAutoLinks))); + Doc.MyPublishedDocs.forEach(term => (tr = this.hyperlinkTerm(tr, term, newAutoLinks))); tr = tr.setSelection(isNodeSel && false ? new NodeSelection(tr.doc.resolve(f)) : new TextSelection(tr.doc.resolve(f), tr.doc.resolve(t))); this._editorView?.dispatch(tr); - // this.prepareForTyping(); } - oldAutoLinks.filter(oldLink => !newAutoLinks.has(oldLink) && oldLink.link_anchor_2 !== this.rootDoc).forEach(LinkManager.Instance.deleteLink); + oldAutoLinks.filter(oldLink => !newAutoLinks.has(oldLink) && oldLink.link_anchor_2 !== this.Document).forEach(LinkManager.Instance.deleteLink); }; updateTitle = () => { const title = StrCast(this.dataDoc.title, Cast(this.dataDoc.title, RichTextField, null)?.Text); if ( - !this.props.dontRegisterView && // (this.props.Document.isTemplateForField === "text" || !this.props.Document.isTemplateForField) && // only update the title if the data document's data field is changing + !this._props.dontRegisterView && // (this.Document.isTemplateForField === "text" || !this.Document.isTemplateForField) && // only update the title if the data document's data field is changing (title.startsWith('-') || title.startsWith('@')) && this._editorView && !this.dataDoc.title_custom && - (Doc.LayoutFieldKey(this.rootDoc) === this.fieldKey || this.fieldKey === 'text') + (Doc.LayoutFieldKey(this.Document) === this.fieldKey || this.fieldKey === 'text') ) { let node = this._editorView.state.doc; while (node.firstChild && node.firstChild.type.name !== 'text') node = node.firstChild; @@ -461,7 +466,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps if (!(cfield instanceof ComputedField)) { this.dataDoc.title = (prefix + str.substring(0, Math.min(40, str.length)) + (str.length > 40 ? '...' : '')).trim(); if (str.startsWith('@') && str.length > 1) { - Doc.AddDocToList(Doc.MyPublishedDocs, undefined, this.rootDoc); + Doc.AddToMyPublished(this.Document); } } } @@ -470,7 +475,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps // creates links between terms in a document and published documents (myPublishedDocs) that have titles starting with an '@' hyperlinkTerm = (tr: any, target: Doc, newAutoLinks: Set<Doc>) => { const editorView = this._editorView; - if (editorView && (editorView as any).docView && !Doc.AreProtosEqual(target, this.rootDoc)) { + if (editorView && (editorView as any).docView && !Doc.AreProtosEqual(target, this.Document)) { const autoLinkTerm = StrCast(target.title).replace(/^@/, ''); var alink: Doc | undefined; this.findInNode(editorView, editorView.state.doc, autoLinkTerm).forEach(sel => { @@ -481,16 +486,17 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps if (node.firstChild === null && !node.marks.find((m: Mark) => m.type.name === schema.marks.noAutoLinkAnchor.name) && node.marks.find((m: Mark) => m.type.name === schema.marks.splitter.name)) { alink = alink ?? - (LinkManager.Links(this.rootDoc).find( + (LinkManager.Links(this.Document).find( link => - Doc.AreProtosEqual(Cast(link.link_anchor_1, Doc, null), this.rootDoc) && // + Doc.AreProtosEqual(Cast(link.link_anchor_1, Doc, null), this.Document) && // Doc.AreProtosEqual(Cast(link.link_anchor_2, Doc, null), target) ) || - DocUtils.MakeLink(this.rootDoc, target, { link_relationship: LinkManager.AutoKeywords })!); + DocUtils.MakeLink(this.Document, target, { link_relationship: LinkManager.AutoKeywords })!); newAutoLinks.add(alink); - const allAnchors = [{ href: Doc.localServerPath(target), title: 'a link', anchorId: this.props.Document[Id] }]; + // DocCast(alink.link_anchor_1).followLinkLocation = 'add:right'; + const allAnchors = [{ href: Doc.localServerPath(target), title: 'a link', anchorId: this.Document[Id] }]; allAnchors.push(...(node.marks.find((m: Mark) => m.type.name === schema.marks.autoLinkAnchor.name)?.attrs.allAnchors ?? [])); - const link = editorView.state.schema.marks.autoLinkAnchor.create({ allAnchors, title: 'auto term', location: 'add:right' }); + const link = editorView.state.schema.marks.autoLinkAnchor.create({ allAnchors, title: 'auto term' }); tr = tr.addMark(pos, pos + node.nodeSize, link); } }); @@ -557,7 +563,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps }; @undoBatch - @action drop = (e: Event, de: DragManager.DropEvent) => { if (de.complete.annoDragData) { de.complete.annoDragData.dropDocCreator = () => this.getAnchor(true); @@ -567,45 +572,51 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps if (dragData) { const dataDoc = Doc.IsDelegateField(DocCast(this.layoutDoc.proto), this.fieldKey) ? DocCast(this.layoutDoc.proto) : this.dataDoc; const effectiveAcl = GetEffectiveAcl(dataDoc); - let added = [AclEdit, AclAdmin, AclSelfEdit].includes(effectiveAcl); - const draggedDoc = dragData.draggedDocuments.lastElement(); - if (added) { + const draggedDoc = dragData.droppedDocuments.lastElement(); + let added: Opt<boolean>; + const dropAction = dragData.dropAction || dragData.userDropAction; + if ([AclEdit, AclAdmin, AclSelfEdit].includes(effectiveAcl)) { // replace text contents when dragging with Alt if (de.altKey) { const fieldKey = Doc.LayoutFieldKey(draggedDoc); - if (draggedDoc[fieldKey] instanceof RichTextField && !Doc.AreProtosEqual(draggedDoc, this.props.Document)) { + if (draggedDoc[fieldKey] instanceof RichTextField && !Doc.AreProtosEqual(draggedDoc, this.Document)) { Doc.GetProto(this.dataDoc)[this.fieldKey] = Field.Copy(draggedDoc[fieldKey]); } // embed document when drag marked as embed - } else if (de.embedKey) { + } else if (de.embedKey || dropAction) { const node = schema.nodes.dashDoc.create({ - width: draggedDoc[Width](), - height: draggedDoc[Height](), + width: NumCast(draggedDoc._width), + height: NumCast(draggedDoc._height), title: 'dashDoc', docId: draggedDoc[Id], float: 'unset', }); - if (!['embed', 'copy'].includes((dragData.dropAction ?? '') as any)) { + if (!['embed', 'copy'].includes((dropAction ?? '') as any)) { added = dragData.removeDocument?.(draggedDoc) ? true : false; + } else { + added = true; } if (added) { draggedDoc._freeform_fitContentsToBox = true; - Doc.SetContainer(draggedDoc, this.rootDoc); + Doc.SetContainer(draggedDoc, this.Document); const view = this._editorView!; try { + this._inDrop = true; const pos = view.posAtCoords({ left: de.x, top: de.y })?.pos; pos && view.dispatch(view.state.tr.insert(pos, node)); added = pos ? true : false; // pos will be null if you don't drop onto an actual text location } catch (e) { console.log('Drop failed', e); added = false; + } finally { + this._inDrop = false; } } } } // otherwise, fall through to outer collection to handle drop - !added && e.preventDefault(); - e.stopPropagation(); + added === false && e.preventDefault(); + added === true && e.stopPropagation(); return added; } return false; @@ -705,14 +716,16 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps @action toggleSidebar = (preview: boolean = false) => { + const defaultSidebar = 250; const prevWidth = 1 - this.sidebarWidth() / Number(getComputedStyle(this._ref.current!).width.replace('px', '')); if (preview) this._showSidebar = true; else { this.layoutDoc[this.SidebarKey + '_freeform_scale_max'] = 1; - this.layoutDoc._layout_showSidebar = (this.layoutDoc._layout_sidebarWidthPercent = StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%') === '0%' ? '50%' : '0%') !== '0%'; + this.layoutDoc._layout_showSidebar = + (this.layoutDoc._layout_sidebarWidthPercent = StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%') === '0%' ? `${(defaultSidebar / (NumCast(this.layoutDoc._width) + defaultSidebar)) * 100}%` : '0%') !== '0%'; } - this.layoutDoc._width = !preview && this.SidebarShown ? NumCast(this.layoutDoc._width) * 2 : Math.max(20, NumCast(this.layoutDoc._width) * prevWidth); + this.layoutDoc._width = !preview && this.SidebarShown ? NumCast(this.layoutDoc._width) + defaultSidebar : Math.max(20, NumCast(this.layoutDoc._width) * prevWidth); }; sidebarDown = (e: React.PointerEvent) => { const batch = UndoManager.StartBatch('toggle sidebar'); @@ -729,12 +742,12 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps ); }; sidebarMove = (e: PointerEvent, down: number[], delta: number[]) => { - const localDelta = this.props + const localDelta = this._props .ScreenToLocalTransform() - .scale(this.props.NativeDimScaling?.() || 1) + .scale(this._props.NativeDimScaling?.() || 1) .transformDirection(delta[0], delta[1]); const sidebarWidth = (NumCast(this.layoutDoc._width) * Number(this.layout_sidebarWidthPercent.replace('%', ''))) / 100; - const width = this.layoutDoc[Width]() + localDelta[0]; + const width = NumCast(this.layoutDoc._width) + localDelta[0]; this.layoutDoc._layout_sidebarWidthPercent = Math.max(0, (sidebarWidth + localDelta[0]) / width) * 100 + '%'; this.layoutDoc.width = width; this.layoutDoc._layout_showSidebar = this.layoutDoc._layout_sidebarWidthPercent !== '0%'; @@ -745,15 +758,15 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps deleteAnnotation = (anchor: Doc) => { const batch = UndoManager.StartBatch('delete link'); LinkManager.Instance.deleteLink(LinkManager.Links(anchor)[0]); - // const docAnnotations = DocListCast(this.props.dataDoc[this.fieldKey]); - // this.props.dataDoc[this.fieldKey] = new List<Doc>(docAnnotations.filter(a => a !== this.annoTextRegion)); + // const docAnnotations = DocListCast(this._props.dataDoc[this.fieldKey]); + // this._props.dataDoc[this.fieldKey] = new List<Doc>(docAnnotations.filter(a => a !== this.annoTextRegion)); // AnchorMenu.Instance.fadeOut(true); - this.props.select(false); + this._props.select(false); setTimeout(batch.end); // wait for reaction to remove link from document }; @undoBatch - pinToPres = (anchor: Doc) => this.props.pinToPres(anchor, {}); + pinToPres = (anchor: Doc) => this._props.pinToPres(anchor, {}); @undoBatch makeTargetToggle = (anchor: Doc) => (anchor.followLinkToggle = !anchor.followLinkToggle); @@ -763,7 +776,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps const trail = DocCast(anchor.presentationTrail); if (trail) { Doc.ActivePresentation = trail; - this.props.addDocTab(trail, OpenWhere.replaceRight); + this._props.addDocTab(trail, OpenWhere.replaceRight); } }; @@ -781,7 +794,10 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps ?.trim() .split(' ') .filter(h => h); - const anchorDoc = Array.from(hrefs).lastElement().replace(Doc.localServerPath(), '').split('?')[0]; + const anchorDoc = Array.from(hrefs ?? []) + .lastElement() + .replace(Doc.localServerPath(), '') + .split('?')[0]; const deleteMarkups = undoBatch(() => { const sel = editor.state.selection; editor.dispatch(editor.state.tr.removeMark(sel.from, sel.to, editor.state.schema.marks.linkAnchor)); @@ -810,7 +826,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps changeItems.push({ description: 'plain', event: undoBatch(() => { - Doc.setNativeView(this.rootDoc); + Doc.setNativeView(this.Document); this.layoutDoc.layout_autoHeightMargins = undefined; }), icon: 'eye', @@ -819,8 +835,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps description: 'metadata', event: undoBatch(() => { this.dataDoc.layout_meta = Cast(Doc.UserDoc().emptyHeader, Doc, null)?.layout; - this.rootDoc.layout_fieldKey = 'layout_meta'; - setTimeout(() => (this.rootDoc._headerHeight = this.rootDoc._layout_autoHeightMargins = 50), 50); + this.Document.layout_fieldKey = 'layout_meta'; + setTimeout(() => (this.layoutDoc._headerHeight = this.layoutDoc._layout_autoHeightMargins = 50), 50); }), icon: 'eye', }); @@ -831,8 +847,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps description: StrCast(note.title), event: undoBatch(() => { this.layoutDoc.layout_autoHeightMargins = undefined; - Doc.setNativeView(this.rootDoc); - DocUtils.makeCustomViewClicked(this.rootDoc, Docs.Create.TreeDocument, StrCast(note.title), note); + Doc.setNativeView(this.Document); + DocUtils.makeCustomViewClicked(this.Document, Docs.Create.TreeDocument, StrCast(note.title), note); }), icon: icon, }); @@ -854,69 +870,50 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps icon: !FormattedTextBox._globalHighlights.has(option) ? 'highlighter' : 'remove-format', }) ); + const appearance = cm.findByDescription('Appearance...'); + const appearanceItems: ContextMenuProps[] = appearance && 'subitems' in appearance ? appearance.subitems : []; - const uicontrols: ContextMenuProps[] = []; - uicontrols.push({ + appearanceItems.push({ description: !this.Document._layout_noSidebar ? 'Hide Sidebar Handle' : 'Show Sidebar Handle', event: () => (this.layoutDoc._layout_noSidebar = !this.layoutDoc._layout_noSidebar), icon: !this.Document._layout_noSidebar ? 'eye-slash' : 'eye', }); - uicontrols.push({ + appearanceItems.push({ description: (this.Document._layout_enableAltContentUI ? 'Hide' : 'Show') + ' Alt Content UI', event: () => (this.layoutDoc._layout_enableAltContentUI = !this.layoutDoc._layout_enableAltContentUI), icon: !this.Document._layout_enableAltContentUI ? 'eye-slash' : 'eye', }); - !Doc.noviceMode && uicontrols.push({ description: 'Show Highlights...', noexpand: true, subitems: highlighting, icon: 'hand-point-right' }); + !Doc.noviceMode && appearanceItems.push({ description: 'Show Highlights...', noexpand: true, subitems: highlighting, icon: 'hand-point-right' }); !Doc.noviceMode && - uicontrols.push({ + appearanceItems.push({ description: 'Broadcast Message', - event: () => DocServer.GetRefField('rtfProto').then(proto => proto instanceof Doc && (proto.BROADCAST_MESSAGE = Cast(this.rootDoc[this.fieldKey], RichTextField)?.Text)), + event: () => DocServer.GetRefField('rtfProto').then(proto => proto instanceof Doc && (proto.BROADCAST_MESSAGE = Cast(this.dataDoc[this.fieldKey], RichTextField)?.Text)), icon: 'expand-arrows-alt', }); - cm.addItem({ description: 'UI Controls...', subitems: uicontrols, icon: 'asterisk' }); - const appearance = cm.findByDescription('Appearance...'); - const appearanceItems = appearance && 'subitems' in appearance ? appearance.subitems : []; appearanceItems.push({ description: 'Change Style...', noexpand: true, subitems: changeItems, icon: 'external-link-alt' }); - // this.rootDoc.isTemplateDoc && appearanceItems.push({ description: "Make Default Layout", event: async () => Doc.UserDoc().defaultTextLayout = new PrefetchProxy(this.rootDoc), icon: "eye" }); !Doc.noviceMode && appearanceItems.push({ description: 'Make Default Layout', event: () => { if (!this.layoutDoc.isTemplateDoc) { - const title = StrCast(this.rootDoc.title); - this.rootDoc.title = 'text'; - MakeTemplate(this.rootDoc, true, title); - } else if (!this.rootDoc.isTemplateDoc) { - const title = StrCast(this.rootDoc.title); - this.rootDoc.title = 'text'; - this.rootDoc.layout = this.layoutDoc.layout as string; - this.rootDoc.title = this.layoutDoc.isTemplateForField as string; - this.rootDoc.isTemplateDoc = false; - this.rootDoc.isTemplateForField = ''; - this.rootDoc.layout_fieldKey = 'layout'; - MakeTemplate(this.rootDoc, true, title); - setTimeout(() => { - this.rootDoc._layout_autoHeight = this.layoutDoc._layout_autoHeight; // layout_autoHeight, width and height - this.rootDoc._width = this.layoutDoc._width || 300; // are stored on the template, since we're getting rid of the old template - this.rootDoc._height = this.layoutDoc._height || 200; // we need to copy them over to the root. This should probably apply to all '_' fields - this.rootDoc._backgroundColor = Cast(this.layoutDoc._backgroundColor, 'string', null); - this.rootDoc.backgroundColor = Cast(this.layoutDoc.backgroundColor, 'string', null); - }, 10); + const title = StrCast(this.Document.title); + this.Document.title = 'text'; + MakeTemplate(this.Document, true, title); } - Doc.UserDoc().defaultTextLayout = new PrefetchProxy(this.rootDoc); - Doc.AddDocToList(Cast(Doc.UserDoc().template_notes, Doc, null), 'data', this.rootDoc); + Doc.UserDoc().defaultTextLayout = new PrefetchProxy(this.Document); + Doc.AddDocToList(Cast(Doc.UserDoc().template_notes, Doc, null), 'data', this.Document); }, icon: 'eye', }); - cm.addItem({ description: 'Appearance...', subitems: appearanceItems, icon: 'eye' }); + !appearance && appearanceItems.length && cm.addItem({ description: 'Appearance...', subitems: appearanceItems, icon: 'eye' }); const options = cm.findByDescription('Options...'); const optionItems = options && 'subitems' in options ? options.subitems : []; optionItems.push({ description: `Generate Dall-E Image`, event: () => this.generateImage(), icon: 'star' }); optionItems.push({ description: `Ask GPT-3`, event: () => this.askGPT(), icon: 'lightbulb' }); - this.props.renderDepth && + this._props.renderDepth && optionItems.push({ description: !this.Document._createDocOnCR ? 'Create New Doc on Carriage Return' : 'Allow Carriage Returns', event: () => (this.layoutDoc._createDocOnCR = !this.layoutDoc._createDocOnCR), @@ -959,8 +956,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps generateImage = async () => { GPTPopup.Instance?.setTextAnchor(this.getAnchor(false)); - GPTPopup.Instance?.setImgTargetDoc(this.rootDoc); - GPTPopup.Instance.addToCollection = this.props.addDocument; + GPTPopup.Instance?.setImgTargetDoc(this.Document); + GPTPopup.Instance.addToCollection = this._props.addDocument; GPTPopup.Instance.setImgDesc((this.dataDoc.text as RichTextField)?.Text); GPTPopup.Instance.generateImage(); }; @@ -1000,7 +997,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps }; const link = DocUtils.MakeLinkToActiveAudio(textanchorFunc, false).lastElement(); if (link) { - Doc.GetProto(link).isDictation = true; + link[DocData].isDictation = true; const audioanchor = Cast(link.link_anchor_2, Doc, null); const textanchor = Cast(link.link_anchor_1, Doc, null); if (audioanchor) { @@ -1010,7 +1007,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps audioId: audioanchor[Id], textId: textanchor[Id], }); - Doc.GetProto(textanchor).title = 'dictation:' + audiotag.attrs.timeCode; + textanchor[DocData].title = 'dictation:' + audiotag.attrs.timeCode; const tr = this._editorView.state.tr.insert(this._editorView.state.doc.content.size, audiotag); const tr2 = tr.setSelection(TextSelection.create(tr.doc, tr.doc.content.size)); this._editorView.dispatch(tr.setSelection(TextSelection.create(tr2.doc, tr2.doc.content.size))); @@ -1055,22 +1052,27 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps this._editorView!.dispatch(tr.removeMark(sel.from, sel.to, splitter)); this.dataDoc[UpdatingFromServer] = this.dataDoc[ForceServerWrite] = false; anchor.text = selectedText; + anchor.text_html = this._selectionHTML ?? selectedText; anchor.title = selectedText.substring(0, 30); + anchor.presentation_zoomText = true; return anchor; } - return anchorDoc ?? this.rootDoc; + return anchorDoc ?? this.Document; } - return anchorDoc ?? this.rootDoc; + return anchorDoc ?? this.Document; } - getView = async (doc: Doc) => { - if (DocListCast(this.rootDoc[this.SidebarKey]).find(anno => Doc.AreProtosEqual(doc.layout_unrendered ? DocCast(doc.annotationOn) : doc, anno))) { - !this.SidebarShown && this.toggleSidebar(false); + getView = async (doc: Doc, options: FocusViewOptions) => { + if (DocListCast(this.dataDoc[this.SidebarKey]).find(anno => Doc.AreProtosEqual(doc.layout_unrendered ? DocCast(doc.annotationOn) : doc, anno))) { + if (!this.SidebarShown) { + this.toggleSidebar(false); + options.didMove = true; + } setTimeout(() => this._sidebarRef?.current?.makeDocUnfiltered(doc)); } return new Promise<Opt<DocumentView>>(res => DocumentManager.Instance.AddViewRenderedCb(doc, dv => res(dv))); }; - focus = (textAnchor: Doc, options: DocFocusOptions) => { + focus = (textAnchor: Doc, options: FocusViewOptions) => { const focusSpeed = options.zoomTime ?? 500; const textAnchorId = textAnchor[Id]; const findAnchorFrag = (frag: Fragment, editor: EditorView) => { @@ -1128,7 +1130,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps setTimeout(() => clearStyleSheetRules(FormattedTextBox._highlightStyleSheet), Math.max(this._focusSpeed || 0, 3000)); return focusSpeed; } else { - return this.props.focus(this.rootDoc, options); + return this._props.focus(this.Document, options); } } }; @@ -1137,12 +1139,12 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps // Since we also monitor all component height changes, this will update the document's height. resetNativeHeight = (scrollHeight: number) => { const nh = this.layoutDoc.isTemplateForField ? 0 : NumCast(this.layoutDoc._nativeHeight); - this.rootDoc[this.fieldKey + '_height'] = scrollHeight; + this.dataDoc[this.fieldKey + '_height'] = scrollHeight; if (nh) this.layoutDoc._nativeHeight = scrollHeight; }; @computed get contentScaling() { - return Doc.NativeAspect(this.rootDoc, this.dataDoc, false) ? this.props.NativeDimScaling?.() || 1 : 1; + return Doc.NativeAspect(this.Document, this.dataDoc, false) ? this._props.NativeDimScaling?.() || 1 : 1; } @action @@ -1164,7 +1166,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps } componentDidMount() { - !this.props.dontSelectOnLoad && this.props.setContentView?.(this); // this tells the DocumentView that this AudioBox is the "content" of the document. this allows the DocumentView to indirectly call getAnchor() on the AudioBox when making a link. + !this._props.dontSelectOnLoad && this._props.setContentViewBox?.(this); // this tells the DocumentView that this AudioBox is the "content" of the document. this allows the DocumentView to indirectly call getAnchor() on the AudioBox when making a link. this._cachedLinks = LinkManager.Links(this.Document); this._disposers.breakupDictation = reaction(() => Doc.RecordingEvent, this.breakupDictation); this._disposers.layout_autoHeight = reaction( @@ -1177,7 +1179,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps { fireImmediately: true } ); this._disposers.width = reaction( - () => this.props.PanelWidth(), + () => this._props.PanelWidth(), width => this.tryUpdateScrollHeight() ); this._disposers.scrollHeight = reaction( @@ -1195,13 +1197,13 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps ({ sidebarHeight, textHeight, layout_autoHeight, marginsHeight }) => { const newHeight = this.contentScaling * (marginsHeight + Math.max(sidebarHeight, textHeight)); if ( - (!Array.from(FormattedTextBox._globalHighlights).includes('Bold Text') || this.props.isSelected()) && // + (!Array.from(FormattedTextBox._globalHighlights).includes('Bold Text') || this._props.isSelected()) && // layout_autoHeight && newHeight && - newHeight !== this.rootDoc.height && - !this.props.dontRegisterView + newHeight !== this.layoutDoc.height && + !this._props.dontRegisterView ) { - this.props.setHeight?.(newHeight); + this._props.setHeight?.(newHeight); } }, { fireImmediately: !Array.from(FormattedTextBox._globalHighlights).includes('Bold Text') } @@ -1213,20 +1215,11 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps this._cachedLinks = newLinks; } ); - this._disposers.buttonBar = reaction( - () => DocumentButtonBar.Instance, - instance => { - if (instance) { - this.pullFromGoogleDoc(this.checkState); - this.dataDoc[GoogleRef] && this.dataDoc.googleDocUnchanged && runInAction(() => (instance.isAnimatingFetch = true)); - } - } - ); this._disposers.editorState = reaction( () => { const dataDoc = Doc.IsDelegateField(DocCast(this.layoutDoc?.proto), this.fieldKey) ? DocCast(this.layoutDoc?.proto) : this?.dataDoc; const whichDoc = !this.dataDoc || !this.layoutDoc ? undefined : dataDoc?.[this.fieldKey + '_noTemplate'] || !this.layoutDoc[this.fieldKey] ? dataDoc : this.layoutDoc; - return !whichDoc ? undefined : { data: Cast(whichDoc[this.fieldKey], RichTextField, null), str: Field.toString(DocCast(whichDoc[this.fieldKey])) }; + return !whichDoc ? undefined : { data: Cast(whichDoc[this.fieldKey], RichTextField, null), str: Field.toString(DocCast(whichDoc[this.fieldKey]) ?? StrCast(whichDoc[this.fieldKey])) }; }, incomingValue => { if (this._editorView && this._applyingChange !== this.fieldKey) { @@ -1242,50 +1235,32 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps } } ); - this._disposers.pullDoc = reaction( - () => this.props.Document[Pulls], - () => { - if (!DocumentButtonBar.hasPulledHack) { - DocumentButtonBar.hasPulledHack = true; - this.pullFromGoogleDoc(this.dataDoc.googleDocUnchanged ? this.checkState : this.updateState); - } - } - ); - this._disposers.pushDoc = reaction( - () => this.props.Document[Pushes], - () => { - if (!DocumentButtonBar.hasPushedHack) { - DocumentButtonBar.hasPushedHack = true; - this.pushToGoogleDoc(); - } - } - ); this._disposers.search = reaction( - () => Doc.IsSearchMatch(this.rootDoc), + () => Doc.IsSearchMatch(this.Document), search => (search ? this.highlightSearchTerms([Doc.SearchQuery()], search.searchMatch < 0) : this.unhighlightSearchTerms()), - { fireImmediately: Doc.IsSearchMatchUnmemoized(this.rootDoc) ? true : false } + { fireImmediately: Doc.IsSearchMatchUnmemoized(this.Document) ? true : false } ); this._disposers.selected = reaction( - () => this.props.isSelected(), + () => this._props.rootSelected?.(), action(selected => { //selected && setTimeout(() => this.prepareForTyping()); if (FormattedTextBox._globalHighlights.has('Bold Text')) { this.layoutDoc[DocCss] = this.layoutDoc[DocCss] + 1; // css change happens outside of mobx/react, so this will notify anyone interested in the layout that it has changed } if (RichTextMenu.Instance?.view === this._editorView && !selected) { - RichTextMenu.Instance?.updateMenu(undefined, undefined, undefined); + RichTextMenu.Instance?.updateMenu(undefined, undefined, undefined, undefined); } if (this._editorView && selected) { - RichTextMenu.Instance?.updateMenu(this._editorView, undefined, this.props); + RichTextMenu.Instance?.updateMenu(this._editorView, undefined, this._props, this.layoutDoc); setTimeout(this.autoLink, 20); } }), { fireImmediately: true } ); - if (!this.props.dontRegisterView) { + if (!this._props.dontRegisterView) { this._disposers.record = reaction( () => this._recordingDictation, () => { @@ -1300,7 +1275,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps this._disposers.scroll = reaction( () => NumCast(this.layoutDoc._layout_scrollTop), pos => { - if (!this._ignoreScroll && this._scrollRef.current && !this.props.dontSelectOnLoad) { + if (!this._ignoreScroll && this._scrollRef.current && !this._props.dontSelectOnLoad) { const viewTrans = quickScroll ?? StrCast(this.Document._viewTransition); const durationMiliStr = viewTrans.match(/([0-9]*)ms/); const durationSecStr = viewTrans.match(/([0-9.]*)s/); @@ -1319,80 +1294,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps setTimeout(this.tryUpdateScrollHeight, 250); } - pushToGoogleDoc = async () => { - this.pullFromGoogleDoc(async (exportState: Opt<GoogleApiClientUtils.Docs.ImportResult>, dataDoc: Doc) => { - const modes = GoogleApiClientUtils.Docs.WriteMode; - let mode = modes.Replace; - let reference: Opt<GoogleApiClientUtils.Docs.Reference> = Cast(this.dataDoc[GoogleRef], 'string'); - if (!reference) { - mode = modes.Insert; - reference = { title: StrCast(this.dataDoc.title) }; - } - const redo = async () => { - if (this._editorView && reference) { - const content = await RichTextUtils.GoogleDocs.Export(this._editorView.state); - const response = await GoogleApiClientUtils.Docs.write({ reference, content, mode }); - response && (this.dataDoc[GoogleRef] = response.documentId); - const pushSuccess = response !== undefined && !('errors' in response); - dataDoc.googleDocUnchanged = pushSuccess; - DocumentButtonBar.Instance.startPushOutcome(pushSuccess); - } - }; - const undo = () => { - if (exportState && reference) { - const content: GoogleApiClientUtils.Docs.Content = { - text: exportState.text, - requests: [], - }; - GoogleApiClientUtils.Docs.write({ reference, content, mode }); - } - }; - UndoManager.AddEvent({ undo, redo, prop: '' }); - redo(); - }); - }; - - pullFromGoogleDoc = async (handler: PullHandler) => { - const dataDoc = this.dataDoc; - const documentId = StrCast(dataDoc[GoogleRef]); - let exportState: Opt<GoogleApiClientUtils.Docs.ImportResult>; - if (documentId) { - exportState = await RichTextUtils.GoogleDocs.Import(documentId, dataDoc); - } - exportState && UndoManager.RunInBatch(() => handler(exportState, dataDoc), Pulls); - }; - - updateState = (exportState: Opt<GoogleApiClientUtils.Docs.ImportResult>, dataDoc: Doc) => { - let pullSuccess = false; - if (exportState !== undefined) { - pullSuccess = true; - dataDoc[this.fieldKey] = new RichTextField(JSON.stringify(exportState.state.toJSON())); - setTimeout(() => { - if (this._editorView) { - const state = this._editorView.state; - const end = state.doc.content.size - 1; - this._editorView.dispatch(state.tr.setSelection(TextSelection.create(state.doc, end, end))); - } - }, 0); - dataDoc.title = exportState.title; - this.dataDoc.title_custom = true; - dataDoc.googleDocUnchanged = true; - } else { - delete dataDoc[GoogleRef]; - } - DocumentButtonBar.Instance.startPullOutcome(pullSuccess); - }; - - checkState = (exportState: Opt<GoogleApiClientUtils.Docs.ImportResult>, dataDoc: Doc) => { - if (exportState && this._editorView) { - const equalContent = isEqual(this._editorView.state.doc, exportState.state.doc); - const equalTitles = dataDoc.title === exportState.title; - const unchanged = equalContent && equalTitles; - dataDoc.googleDocUnchanged = unchanged; - DocumentButtonBar.Instance.setPullState(unchanged); - } - }; - clipboardTextSerializer = (slice: Slice): string => { let text = '', separated = true; @@ -1430,8 +1331,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps const dashField = view.state.schema.nodes.paragraph.create({}, [ view.state.schema.nodes.dashField.create({ fieldKey: 'text', docId: pdfAnchor[Id], hideKey: true, editable: false }, undefined, [ view.state.schema.marks.linkAnchor.create({ - allAnchors: [{ href: `/doc/${this.rootDoc[Id]}`, title: this.rootDoc.title, anchorId: `${this.rootDoc[Id]}` }], - location: 'add:right', + allAnchors: [{ href: `/doc/${this.Document[Id]}`, title: this.Document.title, anchorId: `${this.Document[Id]}` }], title: `from: ${DocCast(pdfAnchor.embedContainer).title}`, noPreview: true, docref: false, @@ -1441,7 +1341,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps ]), ]); - const link = DocUtils.MakeLink(pdfAnchor, this.rootDoc, { link_relationship: 'PDF pasted' }); + const link = DocUtils.MakeLink(pdfAnchor, this.Document, { link_relationship: 'PDF pasted' }); if (link) { view.dispatch(view.state.tr.replaceSelectionWith(dashField, false).scrollIntoView().setMeta('paste', true).setMeta('uiEvent', 'paste')); } @@ -1464,8 +1364,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps const self = this; return new Plugin({ view(newView) { - runInAction(() => self.props.isSelected(true) && RichTextMenu.Instance && (RichTextMenu.Instance.view = newView)); - return new RichTextMenuPlugin({ editorProps: this.props }); + runInAction(() => self._props.rootSelected?.() && RichTextMenu.Instance && (RichTextMenu.Instance.view = newView)); + return new RichTextMenuPlugin({ editorProps: this._props }); }, }); } @@ -1487,7 +1387,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps const botOff = docPos.bottom > viewRect.bottom ? docPos.bottom - viewRect.bottom : undefined; if (((topOff && Math.abs(Math.trunc(topOff)) > 0) || (botOff && Math.abs(Math.trunc(botOff)) > 0)) && scrollRef) { const shift = Math.min(topOff ?? Number.MAX_VALUE, botOff ?? Number.MAX_VALUE); - const scrollPos = scrollRef.scrollTop + shift * self.props.ScreenToLocalTransform().Scale; + const scrollPos = scrollRef.scrollTop + shift * self.ScreenToLocalBoxXf().Scale; if (this._focusSpeed !== undefined) { scrollPos && (this._scrollStopper = smoothScroll(this._focusSpeed, scrollRef, scrollPos, 'ease', this._scrollStopper)); } else { @@ -1539,11 +1439,11 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps (this._editorView as any).TextView = this; } - const selectOnLoad = this.rootDoc[Id] === FormattedTextBox.SelectOnLoad && (!LightboxView.LightboxDoc || LightboxView.IsLightboxDocView(this.props.docViewPath())); - if (this._editorView && selectOnLoad && !this.props.dontRegisterView && !this.props.dontSelectOnLoad && this.isActiveTab(this.ProseRef)) { + const selectOnLoad = Doc.AreProtosEqual(this._props.TemplateDataDocument ?? this.Document, FormattedTextBox.SelectOnLoad) && (!LightboxView.LightboxDoc || LightboxView.Contains(this.DocumentView?.())); + if (this._editorView && selectOnLoad && !this._props.dontRegisterView && !this._props.dontSelectOnLoad && this.isActiveTab(this.ProseRef)) { const selLoadChar = FormattedTextBox.SelectOnLoadChar; - FormattedTextBox.SelectOnLoad = ''; - this.props.select(false); + FormattedTextBox.SelectOnLoad = undefined; + this._props.select(false); if (selLoadChar) { const $from = this._editorView.state.selection.anchor ? this._editorView.state.doc.resolve(this._editorView.state.selection.anchor - 1) : undefined; const mark = schema.marks.user_mark.create({ userid: Doc.CurrentUserEmail, modified: Math.floor(Date.now() / 1000) }); @@ -1559,7 +1459,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps } } selectOnLoad && this._editorView!.focus(); - if (this.props.isContentActive()) this.prepareForTyping(); + if (this._props.isContentActive()) this.prepareForTyping(); if (this._editorView) { const tr = this._editorView.state.tr; const { from, to } = tr.selection; @@ -1582,15 +1482,14 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps ...(Doc.UserDoc().fontColor !== 'transparent' && Doc.UserDoc().fontColor ? [schema.mark(schema.marks.pFontColor, { color: StrCast(Doc.UserDoc().fontColor) })] : []), ...(Doc.UserDoc().fontStyle === 'italics' ? [schema.mark(schema.marks.em)] : []), ...(Doc.UserDoc().textDecoration === 'underline' ? [schema.mark(schema.marks.underline)] : []), - ...(Doc.UserDoc().fontFamily ? [schema.mark(schema.marks.pFontFamily, { family: this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.FontFamily) })] : []), - ...(Doc.UserDoc().fontSize ? [schema.mark(schema.marks.pFontSize, { fontSize: this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.FontSize) })] : []), + ...(Doc.UserDoc().fontFamily ? [schema.mark(schema.marks.pFontFamily, { family: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontFamily) })] : []), + ...(Doc.UserDoc().fontSize ? [schema.mark(schema.marks.pFontSize, { fontSize: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontSize) })] : []), ...(Doc.UserDoc().fontWeight === 'bold' ? [schema.mark(schema.marks.strong)] : []), ...[schema.marks.user_mark.create({ userid: Doc.CurrentUserEmail, modified: Math.floor(Date.now() / 1000) })], ]; this._editorView?.dispatch(this._editorView?.state.tr.setStoredMarks(docDefaultMarks)); }; - @action componentWillUnmount() { if (this._recordingDictation) { this._recordingDictation = !this._recordingDictation; @@ -1601,7 +1500,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps FormattedTextBox.LiveTextUndo = undefined; this.unhighlightSearchTerms(); this._editorView?.destroy(); - RichTextMenu.Instance?.TextView === this && RichTextMenu.Instance.updateMenu(undefined, undefined, undefined); + RichTextMenu.Instance?.TextView === this && RichTextMenu.Instance.updateMenu(undefined, undefined, undefined, undefined); FormattedTextBoxComment.tooltip && (FormattedTextBoxComment.tooltip.style.display = 'none'); } @@ -1623,7 +1522,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps const func = () => { const docView = DocumentManager.Instance.getDocumentView(audiodoc); if (!docView) { - this.props.addDocTab(audiodoc, OpenWhere.addBottom); + this._props.addDocTab(audiodoc, OpenWhere.addBottom); setTimeout(func); } else docView.ComponentView?.playFrom?.(timecode, Cast(anchor.timecodeToHide, 'number', null)); // bcz: would be nice to find the next audio tag in the doc and play until that }; @@ -1636,8 +1535,10 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps } this._downX = e.clientX; this._downY = e.clientY; + this._downTime = Date.now(); + this._hadDownFocus = this.ProseRef?.children[0].className.includes('focused') ?? false; FormattedTextBoxComment.textBox = this; - if (e.button === 0 && (this.props.rootSelected(true) || this.props.isSelected(true)) && !e.altKey && !e.ctrlKey && !e.metaKey) { + if (e.button === 0 && this._props.rootSelected?.() && !e.altKey && !e.ctrlKey && !e.metaKey) { if (e.clientX < this.ProseRef!.getBoundingClientRect().right) { // stop propagation if not in sidebar, otherwise nested boxes will lose focus to outer boxes. e.stopPropagation(); // if the text box's content is active, then it consumes all down events @@ -1654,9 +1555,12 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps onPointerUp = (e: React.PointerEvent): void => { const editor = this._editorView!; const state = editor?.state; + if (!Utils.isClick(e.clientX, e.clientY, this._downX, this._downY, this._downTime) && !this._hadDownFocus) { + (this.ProseRef?.children[0] as HTMLElement)?.blur?.(); + } if (!state || !editor || !this.ProseRef?.children[0].className.includes('-focused')) return; if (!state.selection.empty && !(state.selection instanceof NodeSelection)) this.setupAnchorMenu(); - else if (this.props.isContentActive(true)) { + else if (this._props.isContentActive()) { const pcords = editor.posAtCoords({ left: e.clientX, top: e.clientY }); let xpos = pcords?.pos || 0; while (xpos > 0 && !state.doc.resolve(xpos).node()?.isTextblock) { @@ -1666,15 +1570,12 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps let target = e.target as any; // hrefs are stored on the dataset of the <a> node that wraps the hyerlink <span> while (target && !target.dataset?.targethrefs) target = target.parentElement; FormattedTextBoxComment.update(this, editor, undefined, target?.dataset?.targethrefs, target?.dataset.linkdoc, target?.dataset.nopreview === 'true'); - if (pcords && pcords.inside > 0 && state.doc.nodeAt(pcords.inside)?.type === state.schema.nodes.dashDoc) { - return; - } } }; @action onDoubleClick = (e: React.MouseEvent): void => { FormattedTextBoxComment.textBox = this; - if (e.button === 0 && this.props.isSelected(true) && !e.altKey && !e.ctrlKey && !e.metaKey) { + if (e.button === 0 && this._props.rootSelected?.() && !e.altKey && !e.ctrlKey && !e.metaKey) { if (e.clientX < this.ProseRef!.getBoundingClientRect().right) { // stop propagation if not in sidebar e.stopPropagation(); // if the text box is selected, then it consumes all click events @@ -1685,7 +1586,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps } FormattedTextBoxComment.Hide(); - if (e.buttons === 1 && this.props.isSelected(true) && !e.altKey) { + if (e.buttons === 1 && this._props.rootSelected?.() && !e.altKey) { e.stopPropagation(); } }; @@ -1697,12 +1598,12 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps @action onFocused = (e: React.FocusEvent): void => { //applyDevTools.applyDevTools(this._editorView); - this.ProseRef?.children[0] === e.nativeEvent.target && this._editorView && RichTextMenu.Instance?.updateMenu(this._editorView, undefined, this.props); + this.ProseRef?.children[0] === e.nativeEvent.target && this._editorView && RichTextMenu.Instance?.updateMenu(this._editorView, undefined, this._props, this.layoutDoc); e.stopPropagation(); }; onClick = (e: React.MouseEvent): void => { - if (!this.props.isContentActive()) return; + if (!this._props.isContentActive()) return; if ((e.nativeEvent as any).handledByInnerReactInstance) { e.stopPropagation(); return; @@ -1731,7 +1632,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps this._editorView!.dispatch(this._editorView!.state.tr.setSelection(NodeSelection.create(this._editorView!.state.doc, pcords.pos))); } } - if (this.props.isSelected(true)) { + if (this._props.rootSelected?.()) { // if text box is selected, then it consumes all click events (e.nativeEvent as any).handledByInnerReactInstance = true; this.hitBulletTargets(e.clientX, e.clientY, !this._editorView?.state.selection.empty || this._forceUncollapse, false, this._forceDownNode, e.shiftKey); @@ -1745,7 +1646,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps clearStyleSheetRules(FormattedTextBox._bulletStyleSheet); const clickPos = this._editorView!.posAtCoords({ left: x, top: y }); let olistPos = clickPos?.pos; - if (clickPos && olistPos && this.props.isSelected(true)) { + if (clickPos && olistPos && this._props.rootSelected?.()) { const clickNode = this._editorView?.state.doc.nodeAt(olistPos); const nodeBef = this._editorView?.state.doc.nodeAt(Math.max(0, olistPos - 1)); olistPos = nodeBef?.type === this._editorView?.state.schema.nodes.ordered_list ? olistPos - 1 : olistPos; @@ -1773,7 +1674,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps } } startUndoTypingBatch() { - !this._undoTyping && (this._undoTyping = UndoManager.StartBatch('text edits on ' + this.rootDoc.title)); + !this._undoTyping && (this._undoTyping = UndoManager.StartBatch('text edits on ' + this.Document.title)); } public endUndoTypingBatch() { this._undoTyping?.end(); @@ -1794,8 +1695,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps tr && this._editorView.dispatch(tr); } } - if (RichTextMenu.Instance?.view === this._editorView && !this.props.isSelected(true)) { - RichTextMenu.Instance?.updateMenu(undefined, undefined, undefined); + if (RichTextMenu.Instance?.view === this._editorView && !this._props.rootSelected?.()) { + RichTextMenu.Instance?.updateMenu(undefined, undefined, undefined, undefined); } FormattedTextBox._hadSelection = window.getSelection()?.toString() !== ''; this.endUndoTypingBatch(); @@ -1805,29 +1706,12 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps const state = this._editorView!.state; const curText = state.doc.textBetween(0, state.doc.content.size, ' \n'); - if (this.layoutDoc[this.SidebarKey + '_type_collection'] === 'translation' && !this.fieldKey.includes('translation') && curText.endsWith(' ') && curText !== this._lastText) { - try { - translate(curText, { from: 'en', to: 'es' }).then((result1: any) => { - setTimeout( - () => - translate(result1.text, { from: 'es', to: 'en' }).then((result: any) => { - const tb = this._sidebarTagRef.current as FormattedTextBox; - tb._editorView?.dispatch(tb._editorView!.state.tr.insertText(result1.text + '\r\n\r\n' + result.text)); - }), - 1000 - ); - }); - } catch (e: any) { - console.log(e.message); - } - this._lastText = curText; - } - if (StrCast(this.rootDoc.title).startsWith('@') && !this.dataDoc.title_custom) { + if (StrCast(this.Document.title).startsWith('@') && !this.dataDoc.title_custom) { UndoManager.RunInBatch(() => { this.dataDoc.title_custom = true; this.dataDoc.layout_showTitle = 'title'; const tr = this._editorView!.state.tr; - this._editorView?.dispatch(tr.setSelection(new TextSelection(tr.doc.resolve(0), tr.doc.resolve(StrCast(this.rootDoc.title).length + 2))).deleteSelection()); + this._editorView?.dispatch(tr.setSelection(new TextSelection(tr.doc.resolve(0), tr.doc.resolve(StrCast(this.Document.title).length + 2))).deleteSelection()); }, 'titler'); } }; @@ -1836,7 +1720,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps if ((e.altKey || e.ctrlKey) && e.key === 't') { e.preventDefault(); e.stopPropagation(); - this.props.setTitleFocus?.(); + this._props.setTitleFocus?.(); return; } const state = this._editorView!.state; @@ -1853,7 +1737,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps let stopPropagation = true; for (var i = state.selection.from; i <= state.selection.to; i++) { const node = state.doc.resolve(i); - if (state.doc.content.size - 1 > i && node?.marks?.().some(mark => mark.type === schema.marks.user_mark && mark.attrs.userid !== Doc.CurrentUserEmail) && [AclAugment, AclSelfEdit].includes(GetEffectiveAcl(this.rootDoc))) { + if (state.doc.content.size - 1 > i && node?.marks?.().some(mark => mark.type === schema.marks.user_mark && mark.attrs.userid !== Doc.CurrentUserEmail) && [AclAugment, AclSelfEdit].includes(GetEffectiveAcl(this.Document))) { e.preventDefault(); } } @@ -1862,7 +1746,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps this._editorView!.dispatch(state.tr.setSelection(TextSelection.create(state.doc, state.selection.from, state.selection.from))); (document.activeElement as any).blur?.(); SelectionManager.DeselectAll(); - RichTextMenu.Instance.updateMenu(undefined, undefined, undefined); + RichTextMenu.Instance.updateMenu(undefined, undefined, undefined, undefined); return; case 'Enter': this.insertTime(); @@ -1876,7 +1760,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps if (this._lastTimedMark?.attrs.userid === Doc.CurrentUserEmail) break; case ' ': if (e.code !== 'Space') { - [AclEdit, AclAugment, AclAdmin].includes(GetEffectiveAcl(this.rootDoc)) && + [AclEdit, AclAugment, AclAdmin].includes(GetEffectiveAcl(this.Document)) && this._editorView!.dispatch(this._editorView!.state.tr.removeStoredMark(schema.marks.user_mark).addStoredMark(schema.marks.user_mark.create({ userid: Doc.CurrentUserEmail, modified: Math.floor(Date.now() / 1000) }))); } break; @@ -1889,8 +1773,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps e.stopPropagation(); // drag n drop of text within text note will generate a new note if not caughst, as will dragging in from outside of Dash. }; onScroll = (e: React.UIEvent) => { - if (!LinkDocPreview.LinkInfo && this._scrollRef.current) { - if (!this.props.dontSelectOnLoad) { + if (!LinkInfo.Instance?.LinkInfo && this._scrollRef.current) { + if (!this._props.dontSelectOnLoad) { this._ignoreScroll = true; this.layoutDoc._layout_scrollTop = this._scrollRef.current.scrollTop; this._ignoreScroll = false; @@ -1900,21 +1784,21 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps } }; tryUpdateScrollHeight = () => { - const margins = 2 * NumCast(this.layoutDoc._yMargin, this.props.yPadding || 0); + const margins = 2 * NumCast(this.layoutDoc._yMargin, this._props.yPadding || 0); const children = this.ProseRef?.children.length ? Array.from(this.ProseRef.children[0].children) : undefined; - if (children && !SnappingManager.GetIsDragging()) { + if (children && !SnappingManager.IsDragging) { const toNum = (val: string) => Number(val.replace('px', '').replace('auto', '0')); const toHgt = (node: Element) => { const { height, marginTop, marginBottom } = getComputedStyle(node); return toNum(height) + Math.max(0, toNum(marginTop)) + Math.max(0, toNum(marginBottom)); }; const proseHeight = !this.ProseRef ? 0 : children.reduce((p, child) => p + toHgt(child), margins); - const scrollHeight = this.ProseRef && Math.min(NumCast(this.layoutDoc.layout_maxAutoHeight, proseHeight), proseHeight); - if (this.props.setHeight && scrollHeight && !this.props.dontRegisterView) { + const scrollHeight = this.ProseRef && proseHeight; + if (this._props.setHeight && scrollHeight && !this._props.dontRegisterView) { // if top === 0, then the text box is growing upward (as the overlay caption) which doesn't contribute to the height computation - const setScrollHeight = () => (this.rootDoc[this.fieldKey + '_scrollHeight'] = scrollHeight); + const setScrollHeight = () => (this.dataDoc[this.fieldKey + '_scrollHeight'] = scrollHeight); - if (this.rootDoc === this.layoutDoc || this.layoutDoc.resolvedDataDoc) { + if (this.Document === this.layoutDoc || this.layoutDoc.resolvedDataDoc) { setScrollHeight(); } else { setTimeout(setScrollHeight, 10); // if we have a template that hasn't been resolved yet, we can't set the height or we'd be setting it on the unresolved template. So set a timeout and hope its arrived... @@ -1922,21 +1806,21 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps } } }; - fitContentsToBox = () => BoolCast(this.props.Document._freeform_fitContentsToBox); - sidebarContentScaling = () => (this.props.NativeDimScaling?.() || 1) * NumCast(this.layoutDoc._freeform_scale, 1); + fitContentsToBox = () => BoolCast(this.Document._freeform_fitContentsToBox); + sidebarContentScaling = () => (this._props.NativeDimScaling?.() || 1) * NumCast(this.layoutDoc._freeform_scale, 1); sidebarAddDocument = (doc: Doc | Doc[], sidebarKey: string = this.SidebarKey) => { if (!this.layoutDoc._layout_showSidebar) this.toggleSidebar(); return this.addDocument(doc, sidebarKey); }; sidebarMoveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean) => this.moveDocument(doc, targetCollection, addDocument, this.SidebarKey); sidebarRemDocument = (doc: Doc | Doc[]) => this.removeDocument(doc, this.SidebarKey); - setSidebarHeight = (height: number) => (this.rootDoc[this.SidebarKey + '_height'] = height); - sidebarWidth = () => (Number(this.layout_sidebarWidthPercent.substring(0, this.layout_sidebarWidthPercent.length - 1)) / 100) * this.props.PanelWidth(); + setSidebarHeight = (height: number) => (this.dataDoc[this.SidebarKey + '_height'] = height); + sidebarWidth = () => (Number(this.layout_sidebarWidthPercent.substring(0, this.layout_sidebarWidthPercent.length - 1)) / 100) * this._props.PanelWidth(); sidebarScreenToLocal = () => - this.props + this._props .ScreenToLocalTransform() - .translate(-(this.props.PanelWidth() - this.sidebarWidth()) / (this.props.NativeDimScaling?.() || 1), 0) - .scale(1 / NumCast(this.layoutDoc._freeform_scale, 1) / (this.props.NativeDimScaling?.() || 1)); + .translate(-(this._props.PanelWidth() - this.sidebarWidth()) / (this._props.NativeDimScaling?.() || 1), 0) + .scale(1 / NumCast(this.layoutDoc._freeform_scale, 1) / (this._props.NativeDimScaling?.() || 1)); @computed get audioHandle() { return !this._recordingDictation ? null : ( @@ -1959,9 +1843,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps TraceMobx(); const annotated = DocListCast(this.dataDoc[this.SidebarKey]).filter(d => d?.author).length; const color = !annotated ? Colors.WHITE : Colors.BLACK; - const backgroundColor = !annotated ? (this.sidebarWidth() ? Colors.MEDIUM_BLUE : Colors.BLACK) : this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.WidgetColor + (annotated ? ':annotated' : '')); + const backgroundColor = !annotated ? (this.sidebarWidth() ? Colors.MEDIUM_BLUE : Colors.BLACK) : this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.WidgetColor + (annotated ? ':annotated' : '')); - return !annotated && (!this.props.isContentActive() || SnappingManager.GetIsDragging()) ? null : ( + return !annotated && (!this._props.isContentActive() || SnappingManager.IsDragging || Doc.ActiveTool !== InkTool.None) ? null : ( <div className="formattedTextBox-sidebar-handle" onPointerDown={this.sidebarDown} @@ -1976,12 +1860,12 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps } @computed get sidebarCollection() { const renderComponent = (tag: string) => { - const ComponentTag = tag === CollectionViewType.Freeform ? CollectionFreeFormView : tag === CollectionViewType.Tree ? CollectionTreeView : tag === 'translation' ? FormattedTextBox : CollectionStackingView; + const ComponentTag: any = tag === CollectionViewType.Freeform ? CollectionFreeFormView : tag === CollectionViewType.Tree ? CollectionTreeView : tag === 'translation' ? FormattedTextBox : CollectionStackingView; return ComponentTag === CollectionStackingView ? ( <SidebarAnnos ref={this._sidebarRef} - {...this.props} - rootDoc={this.rootDoc} + {...this._props} + Document={this.Document} layoutDoc={this.layoutDoc} dataDoc={this.dataDoc} usePanelWidth={true} @@ -1997,14 +1881,14 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps setHeight={this.setSidebarHeight} /> ) : ( - <div onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => SelectionManager.SelectView(this.props.DocumentView?.()!, false), true)}> + <div onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => SelectionManager.SelectView(this.DocumentView?.()!, false), true)}> <ComponentTag - {...this.props} + {...this._props} ref={this._sidebarTagRef as any} setContentView={emptyFunction} NativeWidth={returnZero} NativeHeight={returnZero} - PanelHeight={this.props.PanelHeight} + PanelHeight={this._props.PanelHeight} PanelWidth={this.sidebarWidth} xPadding={0} yPadding={0} @@ -2018,7 +1902,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps moveDocument={this.sidebarMoveDocument} addDocument={this.sidebarAddDocument} ScreenToLocalTransform={this.sidebarScreenToLocal} - renderDepth={this.props.renderDepth + 1} + renderDepth={this._props.renderDepth + 1} setHeight={this.setSidebarHeight} fitContentsToBox={this.fitContentsToBox} noSidebar={true} @@ -2036,12 +1920,12 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps } cycleAlternateText = () => { if (this.layoutDoc._layout_enableAltContentUI) { - const usePath = this.rootDoc[`_${this.props.fieldKey}_usePath`]; - this.rootDoc[`_${this.props.fieldKey}_usePath`] = usePath === undefined ? 'alternate' : usePath === 'alternate' ? 'alternate:hover' : undefined; + const usePath = this.layoutDoc[`_${this._props.fieldKey}_usePath`]; + this.layoutDoc[`_${this._props.fieldKey}_usePath`] = usePath === undefined ? 'alternate' : usePath === 'alternate' ? 'alternate:hover' : undefined; } }; @computed get overlayAlternateIcon() { - const usePath = this.rootDoc[`_${this.props.fieldKey}_usePath`]; + const usePath = this.layoutDoc[`_${this._props.fieldKey}_usePath`]; return ( <Tooltip title={ @@ -2063,7 +1947,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps className="formattedTextBox-alternateButton" onPointerDown={e => setupMoveUpEvents(e.target, e, returnFalse, emptyFunction, e => this.cycleAlternateText())} style={{ - display: this.props.isContentActive() && !SnappingManager.GetIsDragging() ? 'flex' : 'none', + display: this._props.isContentActive() && !SnappingManager.IsDragging ? 'flex' : 'none', background: usePath === undefined ? 'white' : usePath === 'alternate' ? 'black' : 'gray', color: usePath === undefined ? 'black' : 'white', }}> @@ -2072,14 +1956,14 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps </Tooltip> ); } - @computed get fieldKey() { - const usePath = StrCast(this.rootDoc[`${this.props.fieldKey}_usePath`]); - return this.props.fieldKey + (usePath && (!usePath.includes(':hover') || this._isHovering) ? `_${usePath.replace(':hover', '')}` : ''); + get fieldKey() { + const usePath = StrCast(this.layoutDoc[`${this._props.fieldKey}_usePath`]); + return this._props.fieldKey + (usePath && (!usePath.includes(':hover') || this._isHovering || this._props.isContentActive()) ? `_${usePath.replace(':hover', '')}` : ''); } @observable _isHovering = false; onPassiveWheel = (e: WheelEvent) => { if (e.clientX > this.ProseRef!.getBoundingClientRect().right) { - if (this.rootDoc[this.SidebarKey + '_type_collection'] === CollectionViewType.Freeform) { + if (this.dataDoc[this.SidebarKey + '_type_collection'] === CollectionViewType.Freeform) { // if the scrolled freeform is a child of the sidebar component, we need to let the event go through // so react can let the freeform view handle it. We prevent default to stop any containing views from scrolling e.preventDefault(); @@ -2088,11 +1972,14 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps } // if scrollTop is 0, then don't let wheel trigger scroll on any container (which it would since onScroll won't be triggered on this) - if (this.props.isContentActive()) { + if (this._props.isContentActive()) { + const scale = this._props.NativeDimScaling?.() || 1; + const styleFromLayoutString = Doc.styleFromLayoutString(this.Document, this._props, scale); // this converts any expressions in the format string to style props. e.g., <FormattedTextBox height='{this._headerHeight}px' > + const height = Number(styleFromLayoutString.height?.replace('px', '')); // prevent default if selected || child is active but this doc isn't scrollable if ( - (this._scrollRef.current?.scrollHeight ?? 0) <= Math.ceil(this.props.PanelHeight()) && // - (this.props.isSelected() || this.isAnyChildContentActive()) + (this._scrollRef.current?.scrollHeight ?? 0) <= Math.ceil((height ? height : this._props.PanelHeight()) / scale) && // + (this._props.rootSelected?.() || this.isAnyChildContentActive()) ) { e.preventDefault(); } @@ -2101,25 +1988,25 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps }; _oldWheel: any; @computed get fontColor() { - return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Color); + return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color); } @computed get fontSize() { - return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.FontSize); + return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontSize); } @computed get fontFamily() { - return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.FontFamily); + return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontFamily); } @computed get fontWeight() { - return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.FontWeight); + return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontWeight); } render() { TraceMobx(); - const scale = (this.props.NativeDimScaling?.() || 1) * NumCast(this.layoutDoc._freeform_scale, 1); + const scale = (this._props.NativeDimScaling?.() || 1) * NumCast(this.layoutDoc._freeform_scale, 1); const rounded = StrCast(this.layoutDoc.layout_borderRounding) === '100%' ? '-rounded' : ''; - setTimeout(() => !this.props.isContentActive() && FormattedTextBoxComment.textBox === this && FormattedTextBoxComment.Hide); - const paddingX = NumCast(this.layoutDoc._xMargin, this.props.xPadding || 0); - const paddingY = NumCast(this.layoutDoc._yMargin, this.props.yPadding || 0); - const styleFromLayoutString = Doc.styleFromLayoutString(this.rootDoc, this.layoutDoc, this.props, scale); // this converts any expressions in the format string to style props. e.g., <FormattedTextBox height='{this._headerHeight}px' > + setTimeout(() => !this._props.isContentActive() && FormattedTextBoxComment.textBox === this && FormattedTextBoxComment.Hide); + const paddingX = NumCast(this.layoutDoc._xMargin, this._props.xPadding || 0); + const paddingY = NumCast(this.layoutDoc._yMargin, this._props.yPadding || 0); + const styleFromLayoutString = Doc.styleFromLayoutString(this.Document, this._props, scale); // this converts any expressions in the format string to style props. e.g., <FormattedTextBox height='{this._headerHeight}px' > return styleFromLayoutString?.height === '0px' ? null : ( <div className="formattedTextBox" @@ -2131,7 +2018,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps r?.addEventListener('wheel', this.onPassiveWheel, { passive: false }); }} style={{ - ...(this.props.dontScale + ...(this._props.dontScale ? {} : { transform: `scale(${scale})`, @@ -2150,9 +2037,10 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps className="formattedTextBox-cont" ref={this._ref} style={{ - cursor: this.props.isContentActive() ? 'text' : undefined, - height: this.props.height || (this.layout_autoHeight && this.props.renderDepth && !this.props.suppressSetHeight ? 'max-content' : undefined), - pointerEvents: Doc.ActiveTool === InkTool.None && !this.props.onBrowseClick?.() ? undefined : 'none', + cursor: this._props.isContentActive() ? 'text' : undefined, + height: this._props.height ? 'max-content' : undefined, + overflow: this.layout_autoHeight ? 'hidden' : undefined, + pointerEvents: Doc.ActiveTool === InkTool.None && !this._props.onBrowseClickScript?.() ? undefined : 'none', }} onContextMenu={this.specificContextMenu} onKeyDown={this.onKeyDown} @@ -2167,7 +2055,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps className="formattedTextBox-outer" ref={this._scrollRef} style={{ - width: this.props.dontSelectOnLoad || this.noSidebar ? '100%' : `calc(100% - ${this.layout_sidebarWidthPercent})`, + width: this._props.dontSelectOnLoad || this.noSidebar ? '100%' : `calc(100% - ${this.layout_sidebarWidthPercent})`, overflow: this.layoutDoc._createDocOnCR ? 'hidden' : this.layoutDoc._layout_autoHeight ? 'visible' : undefined, }} onScroll={this.onScroll} @@ -2184,8 +2072,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps }} /> </div> - {this.noSidebar || this.props.dontSelectOnLoad || !this.SidebarShown || this.layout_sidebarWidthPercent === '0%' ? null : this.sidebarCollection} - {this.noSidebar || this.Document._layout_noSidebar || this.props.dontSelectOnLoad || this.Document._createDocOnCR || this.layoutDoc._chromeHidden ? null : this.sidebarHandle} + {this.noSidebar || this._props.dontSelectOnLoad || !this.SidebarShown || this.layout_sidebarWidthPercent === '0%' ? null : this.sidebarCollection} + {this.noSidebar || this.Document._layout_noSidebar || this._props.dontSelectOnLoad || this.Document._createDocOnCR || this.layoutDoc._chromeHidden ? null : this.sidebarHandle} {this.audioHandle} {this.layoutDoc._layout_enableAltContentUI && !this.layoutDoc._chromeHidden ? this.overlayAlternateIcon : null} </div> diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx index e7ca26d5c..ce17af6ca 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx @@ -3,7 +3,7 @@ import { EditorState, NodeSelection } from 'prosemirror-state'; import { EditorView } from 'prosemirror-view'; import { Doc } from '../../../../fields/Doc'; import { DocServer } from '../../../DocServer'; -import { LinkDocPreview } from '../LinkDocPreview'; +import { LinkDocPreview, LinkInfo } from '../LinkDocPreview'; import { FormattedTextBox } from './FormattedTextBox'; import './FormattedTextBoxComment.scss'; import { schema } from './schema_rts'; @@ -133,9 +133,10 @@ export class FormattedTextBoxComment { const naft = findEndOfMark(state.selection.$from, view, findLinkMark) || nbef; //nbef && naft && - LinkDocPreview.SetLinkInfo({ - docProps: textBox.props, - linkSrc: textBox.rootDoc, + LinkInfo.SetLinkInfo({ + DocumentView: textBox.DocumentView, + styleProvider: textBox._props.styleProvider, + linkSrc: textBox.Document, linkDoc: linkDoc ? (DocServer.GetCachedRefField(linkDoc) as Doc) : undefined, location: (pos => [pos.left, pos.top + 25])(view.coordsAtPos(state.selection.from - Math.max(0, nbef - 1))), hrefs, diff --git a/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts b/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts index ec11079b4..08bad2d57 100644 --- a/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts +++ b/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts @@ -47,7 +47,7 @@ export function buildKeymap<S extends Schema<any>>(schema: S, props: any, mapKey } const canEdit = (state: any) => { - switch (GetEffectiveAcl(props.DataDoc)) { + switch (GetEffectiveAcl(props.TemplateDataDocument)) { case AclAugment: const prevNode = state.selection.$cursor.nodeBefore; const prevUser = !prevNode ? Doc.CurrentUserEmail : prevNode.marks[prevNode.marks.length - 1].attrs.userid; @@ -334,7 +334,7 @@ export function buildKeymap<S extends Schema<any>>(schema: S, props: any, mapKey //Command to create a blank space bind('Space', (state: EditorState, dispatch: (tx: Transaction) => void) => { - if (props.DataDoc && GetEffectiveAcl(props.DataDoc) != AclEdit && GetEffectiveAcl(props.DataDoc) != AclAugment && GetEffectiveAcl(props.DataDoc) != AclAdmin) return true; + if (props.TemplateDataDocument && GetEffectiveAcl(props.TemplateDataDocument) != AclEdit && GetEffectiveAcl(props.TemplateDataDocument) != AclAugment && GetEffectiveAcl(props.TemplateDataDocument) != AclAdmin) return true; const marks = state.storedMarks || (state.selection.$to.parentOffset && state.selection.$from.marks()); dispatch(splitMetadata(marks, state.tr)); return false; diff --git a/src/client/views/nodes/formattedText/RichTextMenu.scss b/src/client/views/nodes/formattedText/RichTextMenu.scss index 8afa0f6b5..d6ed5ebee 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.scss +++ b/src/client/views/nodes/formattedText/RichTextMenu.scss @@ -1,4 +1,4 @@ -@import "../../global/globalCssVariables"; +@import '../../global/globalCssVariables.module.scss'; .button-dropdown-wrapper { position: relative; @@ -55,7 +55,6 @@ input { color: black; } - } .richTextMenu { @@ -68,12 +67,12 @@ font-size: 12px; height: 100%; margin-right: 3px; - + &:focus, &:hover { background-color: black; } - + &::-ms-expand { color: white; } @@ -126,7 +125,7 @@ display: flex; justify-content: space-between; - >div { + > div { display: flex; } -}
\ No newline at end of file +} diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index e3ac4fb9d..5858c3b11 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -1,27 +1,28 @@ -import React = require('react'); import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Tooltip } from '@material-ui/core'; -import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx'; +import { Tooltip } from '@mui/material'; +import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import { lift, wrapIn } from 'prosemirror-commands'; import { Mark, MarkType, Node as ProsNode, ResolvedPos } from 'prosemirror-model'; import { wrapInList } from 'prosemirror-schema-list'; import { EditorState, NodeSelection, TextSelection } from 'prosemirror-state'; import { EditorView } from 'prosemirror-view'; +import * as React from 'react'; import { Doc } from '../../../../fields/Doc'; -import { Cast, StrCast } from '../../../../fields/Types'; +import { BoolCast, Cast, StrCast } from '../../../../fields/Types'; +import { numberRange } from '../../../../Utils'; import { DocServer } from '../../../DocServer'; import { LinkManager } from '../../../util/LinkManager'; import { SelectionManager } from '../../../util/SelectionManager'; import { undoBatch, UndoManager } from '../../../util/UndoManager'; import { AntimodeMenu, AntimodeMenuProps } from '../../AntimodeMenu'; +import { ObservableReactComponent } from '../../ObservableReactComponent'; +import { EquationBox } from '../EquationBox'; import { FieldViewProps } from '../FieldView'; import { FormattedTextBox } from './FormattedTextBox'; import { updateBullets } from './ProsemirrorExampleTransfer'; import './RichTextMenu.scss'; import { schema } from './schema_rts'; -import { EquationBox } from '../EquationBox'; -import { numberRange } from '../../../../Utils'; const { toggleMark } = require('prosemirror-commands'); @observer @@ -30,7 +31,8 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { public overMenu: boolean = false; // kind of hacky way to prevent selects not being selectable private _linkToRef = React.createRef<HTMLInputElement>(); - @observable public view?: EditorView; + layoutDoc: Doc | undefined; + @observable public view?: EditorView = undefined; public editorProps: FieldViewProps | undefined; public _brushMap: Map<string, Set<Mark>> = new Map(); @@ -62,14 +64,13 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { @observable private showLinkDropdown: boolean = false; _reaction: IReactionDisposer | undefined; - constructor(props: Readonly<{}>) { + constructor(props: AntimodeMenuProps) { super(props); - runInAction(() => { - RichTextMenu.Instance = this; - this.updateMenu(undefined, undefined, props); - this._canFade = false; - this.Pinned = true; - }); + makeObservable(this); + RichTextMenu.Instance = this; + this.updateMenu(undefined, undefined, props, this.layoutDoc); + this._canFade = false; + this.Pinned = true; } @computed get noAutoLink() { @@ -102,11 +103,14 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { @computed get textAlign() { return this._activeAlignment; } + @computed get textVcenter() { + return BoolCast(this.layoutDoc?.layout_centered); + } _disposer: IReactionDisposer | undefined; componentDidMount() { this._disposer = reaction( - () => SelectionManager.Views().slice(), - views => this.updateMenu(undefined, undefined, undefined) + () => SelectionManager.Views.slice(), + views => this.updateMenu(undefined, undefined, undefined, undefined) ); } componentWillUnmount() { @@ -114,11 +118,12 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { } @action - public updateMenu(view: EditorView | undefined, lastState: EditorState | undefined, props: any) { + public updateMenu(view: EditorView | undefined, lastState: EditorState | undefined, props: any, layoutDoc: Doc | undefined) { if (this._linkToRef.current?.getBoundingClientRect().width) { return; } this.view = view; + this.layoutDoc = layoutDoc; props && (this.editorProps = props); // Don't do anything if the document/selection didn't change @@ -181,7 +186,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { // finds font sizes and families in selection getActiveAlignment() { - if (this.view && this.TextView?.props.isSelected(true)) { + if (this.view && this.TextView?._props.rootSelected?.()) { const path = (this.view.state.selection.$from as any).path; for (let i = path.length - 3; i < path.length && i >= 0; i -= 3) { if (path[i]?.type === this.view.state.schema.nodes.paragraph || path[i]?.type === this.view.state.schema.nodes.heading) { @@ -194,7 +199,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { // finds font sizes and families in selection getActiveListStyle() { - if (this.view && this.TextView?.props.isSelected(true)) { + if (this.view && this.TextView?._props.rootSelected?.()) { const path = (this.view.state.selection.$from as any).path; for (let i = 0; i < path.length; i += 3) { if (path[i].type === this.view.state.schema.nodes.ordered_list) { @@ -214,7 +219,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { const activeSizes = new Set<string>(); const activeColors = new Set<string>(); const activeHighlights = new Set<string>(); - if (this.view && this.TextView?.props.isSelected(true)) { + if (this.view && this.TextView?._props.rootSelected?.()) { const state = this.view.state; const pos = this.view.state.selection.$from; const marks: Mark[] = [...(state.storedMarks ?? [])]; @@ -233,8 +238,8 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { m.type === state.schema.marks.pFontSize && activeSizes.add(m.attrs.fontSize); m.type === state.schema.marks.marker && activeHighlights.add(String(m.attrs.highlight)); }); - } else if (SelectionManager.Views().some(dv => dv.ComponentView instanceof EquationBox)) { - SelectionManager.Views().forEach(dv => StrCast(dv.rootDoc._text_fontSize) && activeSizes.add(StrCast(dv.rootDoc._text_fontSize))); + } else if (SelectionManager.Views.some(dv => dv.ComponentView instanceof EquationBox)) { + SelectionManager.Views.forEach(dv => StrCast(dv.Document._text_fontSize) && activeSizes.add(StrCast(dv.Document._text_fontSize))); } return { activeFamilies: Array.from(activeFamilies), activeSizes: Array.from(activeSizes), activeColors: Array.from(activeColors), activeHighlights: Array.from(activeHighlights) }; } @@ -249,7 +254,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { //finds all active marks on selection in given group getActiveMarksOnSelection() { let activeMarks: MarkType[] = []; - if (!this.view || !this.TextView?.props.isSelected(true)) return activeMarks; + if (!this.view || !this.TextView?._props.rootSelected?.()) return activeMarks; const markGroup = [schema.marks.noAutoLinkAnchor, schema.marks.strong, schema.marks.em, schema.marks.underline, schema.marks.strikethrough, schema.marks.superscript, schema.marks.subscript]; if (this.view.state.storedMarks) return this.view.state.storedMarks.map(mark => mark.type); @@ -285,10 +290,6 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { return activeMarks; } - destroy() { - !this.TextView?.props.isSelected(true) && this.fadeOut(true); - } - @action setActiveMarkButtons(activeMarks: MarkType[] | undefined) { if (!activeMarks) return; @@ -357,10 +358,10 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { this.setMark(fmark, this.view.state, (tx: any) => this.view!.dispatch(tx.addStoredMark(fmark)), true); this.view.focus(); } - } else if (SelectionManager.Views().some(dv => dv.ComponentView instanceof EquationBox)) { - SelectionManager.Views().forEach(dv => (dv.rootDoc._text_fontSize = fontSize)); + } else if (SelectionManager.Views.some(dv => dv.ComponentView instanceof EquationBox)) { + SelectionManager.Views.forEach(dv => (dv.Document._text_fontSize = fontSize)); } else Doc.UserDoc().fontSize = fontSize; - this.updateMenu(this.view, undefined, this.props); + this.updateMenu(this.view, undefined, this.props, this.layoutDoc); }; setFontFamily = (family: string) => { @@ -369,7 +370,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { this.setMark(fmark, this.view.state, (tx: any) => this.view!.dispatch(tx.addStoredMark(fmark)), true); this.view.focus(); } else Doc.UserDoc().fontFamily = family; - this.updateMenu(this.view, undefined, this.props); + this.updateMenu(this.view, undefined, this.props, this.layoutDoc); }; setHighlight(color: string) { @@ -378,7 +379,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { this.setMark(highlightMark, this.view.state, (tx: any) => this.view!.dispatch(tx.addStoredMark(highlightMark)), true); this.view.focus(); } else Doc.UserDoc()._fontHighlight = color; - this.updateMenu(this.view, undefined, this.props); + this.updateMenu(this.view, undefined, this.props, this.layoutDoc); } setColor(color: string) { @@ -387,7 +388,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { this.setMark(colorMark, this.view.state, (tx: any) => this.view!.dispatch(tx.addStoredMark(colorMark)), true); this.view.focus(); } else Doc.UserDoc().fontColor = color; - this.updateMenu(this.view, undefined, this.props); + this.updateMenu(this.view, undefined, this.props, this.layoutDoc); } // TODO: remove doesn't work @@ -428,7 +429,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { } } this.view.focus(); - this.updateMenu(this.view, undefined, this.props); + this.updateMenu(this.view, undefined, this.props, this.layoutDoc); }; insertSummarizer(state: EditorState, dispatch: any) { @@ -442,8 +443,11 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { return true; } + vcenterToggle = (view: EditorView, dispatch: any) => { + this.layoutDoc && (this.layoutDoc.layout_centered = !this.layoutDoc.layout_centered); + }; align = (view: EditorView, dispatch: any, alignment: 'left' | 'right' | 'center') => { - if (this.TextView?.props.isSelected(true)) { + if (this.TextView?._props.rootSelected?.()) { var tr = view.state.tr; view.state.doc.nodesBetween(view.state.selection.from, view.state.selection.to, (node, pos, parent, index) => { if ([schema.nodes.paragraph, schema.nodes.heading].includes(node.type)) { @@ -577,7 +581,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { return (this.view as any)?.TextView as FormattedTextBox; } get TextViewFieldKey() { - return this.TextView?.props.fieldKey; + return this.TextView?._props.fieldKey; } @action setActiveHighlight(color: string) { @@ -638,7 +642,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { if (linkDoc instanceof Doc) { const link_anchor_1 = await Cast(linkDoc.link_anchor_1, Doc); const link_anchor_2 = await Cast(linkDoc.link_anchor_2, Doc); - const currentDoc = SelectionManager.Docs().lastElement(); + const currentDoc = SelectionManager.Docs.lastElement(); if (currentDoc && link_anchor_1 && link_anchor_2) { if (Doc.AreProtosEqual(currentDoc, link_anchor_1)) { return StrCast(link_anchor_2.title); @@ -665,7 +669,6 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { }; @undoBatch - @action deleteLink = () => { if (this.view) { const linkAnchor = this.view.state.selection.$from.nodeAfter?.marks.find(m => m.type === this.view!.state.schema.marks.linkAnchor); @@ -771,11 +774,11 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { // <div className="collectionMenu-divider" key="divider 3" /> // {[this.createMarksDropdown(this.activeFontSize, this.fontSizeOptions, "font size", action((val: string) => { // this.activeFontSize = val; - // SelectionManager.Views().map(dv => dv.props.Document._text_fontSize = val); + // SelectionManager.Views.map(dv => dv.Document._text_fontSize = val); // })), // this.createMarksDropdown(this.activeFontFamily, this.fontFamilyOptions, "font family", action((val: string) => { // this.activeFontFamily = val; - // SelectionManager.Views().map(dv => dv.props.Document._text_fontFamily = val); + // SelectionManager.Views.map(dv => dv.Document._text_fontFamily = val); // })), // <div className="collectionMenu-divider" key="divider 4" />, // this.createNodesDropdown(this.activeListType, this.listTypeOptions, "list type", () => ({})), @@ -808,10 +811,15 @@ interface ButtonDropdownProps { } @observer -export class ButtonDropdown extends React.Component<ButtonDropdownProps> { +export class ButtonDropdown extends ObservableReactComponent<ButtonDropdownProps> { @observable private showDropdown: boolean = false; private ref: HTMLDivElement | null = null; + constructor(props: any) { + super(props); + makeObservable(this); + } + componentDidMount() { document.addEventListener('pointerdown', this.onBlur); } @@ -846,22 +854,22 @@ export class ButtonDropdown extends React.Component<ButtonDropdownProps> { render() { return ( <div className="button-dropdown-wrapper" ref={node => (this.ref = node)}> - {!this.props.pdf ? ( - <div className="antimodeMenu-button dropdown-button-combined" onPointerDown={this.props.openDropdownOnButton ? this.onDropdownClick : undefined}> - {this.props.button} - <div style={{ marginTop: '-8.5', position: 'relative' }} onPointerDown={!this.props.openDropdownOnButton ? this.onDropdownClick : undefined}> + {!this._props.pdf ? ( + <div className="antimodeMenu-button dropdown-button-combined" onPointerDown={this._props.openDropdownOnButton ? this.onDropdownClick : undefined}> + {this._props.button} + <div style={{ marginTop: '-8.5', position: 'relative' }} onPointerDown={!this._props.openDropdownOnButton ? this.onDropdownClick : undefined}> <FontAwesomeIcon icon="caret-down" size="sm" /> </div> </div> ) : ( <> - {this.props.button} + {this._props.button} <button className="dropdown-button antimodeMenu-button" key="antimodebutton" onPointerDown={this.onDropdownClick}> <FontAwesomeIcon icon="caret-down" size="sm" /> </button> </> )} - {this.showDropdown ? this.props.dropdownContent : null} + {this.showDropdown ? this._props.dropdownContent : null} </div> ); } @@ -875,6 +883,6 @@ export class RichTextMenuPlugin extends React.Component<RichTextMenuPluginProps> return null; } update(view: EditorView, lastState: EditorState | undefined) { - RichTextMenu.Instance?.updateMenu(view, lastState, this.props.editorProps); + RichTextMenu.Instance?.updateMenu(view, lastState, this.props.editorProps, (view as any).TextView?.layoutDoc); } } diff --git a/src/client/views/nodes/formattedText/RichTextRules.ts b/src/client/views/nodes/formattedText/RichTextRules.ts index 3e2afd2ce..456ed4732 100644 --- a/src/client/views/nodes/formattedText/RichTextRules.ts +++ b/src/client/views/nodes/formattedText/RichTextRules.ts @@ -95,7 +95,6 @@ export class RichTextRules { textDocInline.title_custom = true; // And make sure that it's 'custom' so that editing text doesn't change the title of the containing doc textDocInline.isTemplateForField = inlineFieldKey; // this is needed in case the containing text doc is converted to a template at some point textDocInline.proto = textDoc; // make the annotation inherit from the outer text doc so that it can resolve any nested field references, e.g., [[field]] - textDocInline._textContext = ComputedField.MakeFunction(`copyField(self.${inlineFieldKey})`); textDoc[inlineLayoutKey] = FormattedTextBox.LayoutString(inlineFieldKey); // create a layout string for the layout key that will render the annotation text textDoc[inlineFieldKey] = ''; // set a default value for the annotation const node = (state.doc.resolve(start) as any).nodeAfter; @@ -265,9 +264,16 @@ export class RichTextRules { this.TextBox.EditorView?.dispatch(fstate.tr.setSelection(new TextSelection(fstate.doc.resolve(selection)))); } }; + const getTitledDoc = (docTitle: string) => { + if (!DocServer.FindDocByTitle(docTitle)) { + Doc.AddToMyPublished(Docs.Create.TextDocument('', { title: docTitle, _width: 400, _layout_autoHeight: true })); + } + const titledDoc = DocServer.FindDocByTitle(docTitle); + return titledDoc ? Doc.BestEmbedding(titledDoc) : titledDoc; + }; if (!fieldKey) { if (docTitle) { - const target = DocServer.FindDocByTitle(docTitle); + const target = getTitledDoc(docTitle); if (target) { setTimeout(() => linkToDoc(target)); return state.tr.deleteRange(end - 1, end).deleteRange(start, start + 3); @@ -279,7 +285,7 @@ export class RichTextRules { const num = value.match(/^[0-9.]$/); this.Document[DocData][fieldKey] = value === 'true' ? true : value === 'false' ? false : num ? Number(value) : value; } - const target = DocServer.FindDocByTitle(docTitle); + const target = getTitledDoc(docTitle); const fieldView = state.schema.nodes.dashField.create({ fieldKey, docId: target?.[Id], hideKey: false }); return state.tr.setSelection(new TextSelection(state.doc.resolve(start), state.doc.resolve(end))).replaceSelectionWith(fieldView, true); }), diff --git a/src/client/views/nodes/formattedText/SummaryView.tsx b/src/client/views/nodes/formattedText/SummaryView.tsx index 3355e4529..7ec296ed2 100644 --- a/src/client/views/nodes/formattedText/SummaryView.tsx +++ b/src/client/views/nodes/formattedText/SummaryView.tsx @@ -1,7 +1,7 @@ import { TextSelection } from 'prosemirror-state'; import { Fragment, Node, Slice } from 'prosemirror-model'; import * as ReactDOM from 'react-dom/client'; -import React = require('react'); +import * as React from 'react'; // an elidable textblock that collapses when its '<-' is clicked and expands when its '...' anchor is clicked. // this node actively edits prosemirror (as opposed to just changing how things are rendered) and thus doesn't diff --git a/src/client/views/nodes/formattedText/TooltipTextMenu.scss b/src/client/views/nodes/formattedText/TooltipTextMenu.scss index 8c4d77da9..87320943d 100644 --- a/src/client/views/nodes/formattedText/TooltipTextMenu.scss +++ b/src/client/views/nodes/formattedText/TooltipTextMenu.scss @@ -1,9 +1,9 @@ -@import "../views/global/globalCssVariables"; +@import '../views/global/globalCssVariables.module.scss'; .ProseMirror-menu-dropdown-wrap { display: inline-block; position: relative; } - + .ProseMirror-menu-dropdown { vertical-align: 1px; cursor: pointer; @@ -17,11 +17,11 @@ margin-right: 4px; &:after { - content: ""; + content: ''; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; - opacity: .6; + opacity: 0.6; position: absolute; right: 4px; top: calc(50% - 2px); @@ -33,7 +33,7 @@ margin-right: -4px; } -.ProseMirror-menu-dropdown-menu, +.ProseMirror-menu-dropdown-menu, .ProseMirror-menu-submenu { font-size: 12px; background: white; @@ -55,19 +55,18 @@ } } - .ProseMirror-menu-submenu-label:after { - content: ""; + content: ''; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid currentColor; - opacity: .6; + opacity: 0.6; position: absolute; right: 4px; top: calc(50% - 4px); } - - .ProseMirror-icon { + +.ProseMirror-icon { display: inline-block; // line-height: .8; // vertical-align: -2px; /* Compensate for padding */ @@ -79,14 +78,14 @@ } svg { - fill:white; + fill: white; height: 1em; } span { vertical-align: text-top; - } - } + } +} .wrapper { position: absolute; @@ -99,10 +98,10 @@ background: #323232; border-radius: 6px; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); - } -.tooltipMenu, .basic-tools { +.tooltipMenu, +.basic-tools { z-index: 3000; pointer-events: all; padding: 3px; @@ -111,17 +110,17 @@ align-items: center; .ProseMirror-example-setup-style hr { - padding: 2px 10px; - border: none; - margin: 1em 0; + padding: 2px 10px; + border: none; + margin: 1em 0; } - + .ProseMirror-example-setup-style hr:after { - content: ""; - display: block; - height: 1px; - background-color: silver; - line-height: 2px; + content: ''; + display: block; + height: 1px; + background-color: silver; + line-height: 2px; } } @@ -142,7 +141,7 @@ } } - &> * { + & > * { margin-top: 50%; margin-left: 50%; transform: translate(-50%, -50%); @@ -168,7 +167,7 @@ background-color: black; } - &> * { + & > * { margin-top: 50%; margin-left: 50%; transform: translate(-50%, -50%); @@ -208,18 +207,17 @@ margin-top: 13px; } - .font-size-indicator { - font-size: 12px; - padding-right: 0px; - } - .summarize{ - color: white; - height: 20px; - text-align: center; - } - - -.brush{ +.font-size-indicator { + font-size: 12px; + padding-right: 0px; +} +.summarize { + color: white; + height: 20px; + text-align: center; +} + +.brush { display: inline-block; width: 1em; height: 1em; @@ -229,7 +227,7 @@ margin-right: 15px; } -.brush-active{ +.brush-active { display: inline-block; width: 1em; height: 1em; @@ -269,7 +267,6 @@ } .buttonSettings-dropdown { - &.ProseMirror-menu-dropdown { width: 10px; height: 25px; @@ -301,7 +298,7 @@ padding: 3px; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); - .ProseMirror-menu-dropdown-item{ + .ProseMirror-menu-dropdown-item { cursor: default; &:last-child { @@ -312,7 +309,8 @@ background-color: #323232; } - .button-setting, .button-setting-disabled { + .button-setting, + .button-setting-disabled { padding: 2px; border-radius: 2px; } @@ -328,25 +326,23 @@ } input { - color: black; - border: none; - border-radius: 1px; - padding: 3px; + color: black; + border: none; + border-radius: 1px; + padding: 3px; } button { - padding: 6px; - background-color: #323232; - border: 1px solid black; - border-radius: 1px; + padding: 6px; + background-color: #323232; + border: 1px solid black; + border-radius: 1px; &:hover { - background-color: black; + background-color: black; } } } - - } } diff --git a/src/client/views/nodes/formattedText/marks_rts.ts b/src/client/views/nodes/formattedText/marks_rts.ts index 6f07588b3..a342285b0 100644 --- a/src/client/views/nodes/formattedText/marks_rts.ts +++ b/src/client/views/nodes/formattedText/marks_rts.ts @@ -1,4 +1,4 @@ -import React = require('react'); +import * as React from 'react'; import { DOMOutputSpec, Fragment, MarkSpec, Node, NodeSpec, Schema, Slice } from 'prosemirror-model'; import { Doc } from '../../../../fields/Doc'; @@ -28,7 +28,6 @@ export const marks: { [index: string]: MarkSpec } = { autoLinkAnchor: { attrs: { allAnchors: { default: [] as { href: string; title: string; anchorId: string }[] }, - location: { default: null }, title: { default: null }, }, inclusive: false, @@ -37,7 +36,6 @@ export const marks: { [index: string]: MarkSpec } = { tag: 'a[href]', getAttrs(dom: any) { return { - location: dom.getAttribute('location'), title: dom.getAttribute('title'), }; }, @@ -46,7 +44,7 @@ export const marks: { [index: string]: MarkSpec } = { toDOM(node: any) { const targethrefs = node.attrs.allAnchors.reduce((p: string, item: { href: string; title: string; anchorId: string }) => (p ? p + ' ' + item.href : item.href), ''); const anchorids = node.attrs.allAnchors.reduce((p: string, item: { href: string; title: string; anchorId: string }) => (p ? p + ' ' + item.anchorId : item.anchorId), ''); - return ['a', { class: anchorids, 'data-targethrefs': targethrefs, 'data-noPreview': 'true', 'data-linkdoc': node.attrs.linkDoc, title: node.attrs.title, location: node.attrs.location, style: `background: lightBlue` }, 0]; + return ['a', { class: anchorids, 'data-targethrefs': targethrefs, /*'data-noPreview': 'true', */ 'data-linkdoc': node.attrs.linkDoc, title: node.attrs.title, style: `background: lightBlue` }, 0]; }, }, noAutoLinkAnchor: { @@ -73,7 +71,6 @@ export const marks: { [index: string]: MarkSpec } = { linkAnchor: { attrs: { allAnchors: { default: [] as { href: string; title: string; anchorId: string }[] }, - location: { default: null }, title: { default: null }, noPreview: { default: false }, docref: { default: false }, // flags whether the linked text comes from a document within Dash. If so, an attribution label is appended after the text @@ -84,7 +81,6 @@ export const marks: { [index: string]: MarkSpec } = { tag: 'a[href]', getAttrs(dom: any) { return { - location: dom.getAttribute('location'), title: dom.getAttribute('title'), noPreview: dom.getAttribute('noPreview'), }; @@ -108,7 +104,7 @@ export const marks: { [index: string]: MarkSpec } = { node.attrs.title, ], ] - : ['a', { class: anchorids, 'data-targethrefs': targethrefs, title: node.attrs.title, 'data-noPreview': node.attrs.noPreview, location: node.attrs.location, style: `text-decoration: underline; cursor: default` }, 0]; + : ['a', { class: anchorids, 'data-targethrefs': targethrefs, title: node.attrs.title, 'data-noPreview': node.attrs.noPreview, style: `text-decoration: underline; cursor: default` }, 0]; }, }, diff --git a/src/client/views/nodes/formattedText/nodes_rts.ts b/src/client/views/nodes/formattedText/nodes_rts.ts index f27fb18e2..d023020e1 100644 --- a/src/client/views/nodes/formattedText/nodes_rts.ts +++ b/src/client/views/nodes/formattedText/nodes_rts.ts @@ -1,4 +1,4 @@ -import React = require('react'); +import * as React from 'react'; import { DOMOutputSpec, Node, NodeSpec } from 'prosemirror-model'; import { listItem, orderedList } from 'prosemirror-schema-list'; import { ParagraphNodeSpec, toParagraphDOM, getParagraphNodeAttrs } from './ParagraphNodeSpec'; @@ -212,7 +212,6 @@ export const nodes: { [index: string]: NodeSpec } = { alt: { default: null }, title: { default: null }, float: { default: 'left' }, - location: { default: 'add:right' }, docId: { default: '' }, }, group: 'inline', diff --git a/src/client/views/nodes/generativeFill/GenerativeFill.tsx b/src/client/views/nodes/generativeFill/GenerativeFill.tsx index 3093287e9..87e1b69c3 100644 --- a/src/client/views/nodes/generativeFill/GenerativeFill.tsx +++ b/src/client/views/nodes/generativeFill/GenerativeFill.tsx @@ -9,7 +9,9 @@ import { NumCast } from '../../../../fields/Types'; import { Utils } from '../../../../Utils'; import { Docs, DocUtils } from '../../../documents/Documents'; import { Networking } from '../../../Network'; +import { DocumentManager } from '../../../util/DocumentManager'; import { CollectionDockingView } from '../../collections/CollectionDockingView'; +import { CollectionFreeFormView } from '../../collections/collectionFreeForm'; import { OpenWhereMod } from '../DocumentView'; import { ImageBox } from '../ImageBox'; import './GenerativeFill.scss'; @@ -19,9 +21,7 @@ import { activeColor, canvasSize, eraserColor, freeformRenderSize, newCollection import { CursorData, ImageDimensions, Point } from './generativeFillUtils/generativeFillInterfaces'; import { APISuccess, ImageUtility } from './generativeFillUtils/ImageHandler'; import { PointerHandler } from './generativeFillUtils/PointerHandler'; -import React = require('react'); -import { DocumentManager } from '../../../util/DocumentManager'; -import { CollectionFreeFormView } from '../../collections/collectionFreeForm'; +import * as React from 'react'; enum BrushStyle { ADD, @@ -438,7 +438,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD // disable once edited has been clicked (doesn't make sense to change after first edit) disabled={edited} checked={isNewCollection} - onChange={e => { + onChange={() => { setIsNewCollection(prev => !prev); }} /> @@ -513,7 +513,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD defaultValue={150} size="small" valueLabelDisplay="auto" - onChange={(e, val) => { + onChange={(e: any, val: any) => { setCursorData(prev => ({ ...prev, width: val as number })); }} /> @@ -571,7 +571,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD <div> <TextField value={input} - onChange={e => setInput(e.target.value)} + onChange={(e: any) => setInput(e.target.value)} disabled={isBrushing} type="text" label="Prompt" diff --git a/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx b/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx index 10eca358e..185ba2280 100644 --- a/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx +++ b/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx @@ -1,5 +1,5 @@ import './GenerativeFillButtons.scss'; -import React = require('react'); +import * as React from 'react'; import ReactLoading from 'react-loading'; import { activeColor } from './generativeFillUtils/generativeFillConstants'; import { Button, IconButton, Type } from 'browndash-components'; diff --git a/src/client/views/nodes/importBox/ImportElementBox.tsx b/src/client/views/nodes/importBox/ImportElementBox.tsx index 58f0b29e4..6e7c3e612 100644 --- a/src/client/views/nodes/importBox/ImportElementBox.tsx +++ b/src/client/views/nodes/importBox/ImportElementBox.tsx @@ -1,30 +1,31 @@ -import { computed } from 'mobx'; +import { computed, makeObservable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; +import { returnFalse } from '../../../../Utils'; import { Doc } from '../../../../fields/Doc'; -import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, returnTrue } from '../../../../Utils'; -import { Transform } from '../../../util/Transform'; import { ViewBoxBaseComponent } from '../../DocComponent'; -import { DefaultStyleProvider } from '../../StyleProvider'; -import { DocumentView, DocumentViewInternal } from '../DocumentView'; +import { DocumentView } from '../DocumentView'; import { FieldView, FieldViewProps } from '../FieldView'; -import React = require('react'); @observer export class ImportElementBox extends ViewBoxBaseComponent<FieldViewProps>() { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(ImportElementBox, fieldKey); } + constructor(props: FieldViewProps) { + super(props); + makeObservable(this); + } - screenToLocalXf = () => this.props.ScreenToLocalTransform().scale(1 * (this.props.NativeDimScaling?.() || 1)); + screenToLocalXf = () => this.ScreenToLocalBoxXf().scale(1 * (this._props.NativeDimScaling?.() || 1)); @computed get mainItem() { return ( <div style={{ backgroundColor: 'pink' }}> <DocumentView - {...this.props} // + {...this._props} // LayoutTemplateString={undefined} - Document={this.rootDoc} + Document={this.Document} isContentActive={returnFalse} - DataDoc={undefined} addDocument={returnFalse} ScreenToLocalTransform={this.screenToLocalXf} hideResizeHandles={true} @@ -33,6 +34,6 @@ export class ImportElementBox extends ViewBoxBaseComponent<FieldViewProps>() { ); } render() { - return !(this.rootDoc instanceof Doc) ? null : this.mainItem; + return !(this.Document instanceof Doc) ? null : this.mainItem; } } diff --git a/src/client/views/nodes/trails/PresBox.scss b/src/client/views/nodes/trails/PresBox.scss index 1b76a39ad..1537ad0b8 100644 --- a/src/client/views/nodes/trails/PresBox.scss +++ b/src/client/views/nodes/trails/PresBox.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables'; +@import '../../global/globalCssVariables.module.scss'; .presBox-cont { cursor: auto; diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx index f1b501506..b2059b185 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -1,10 +1,10 @@ -import React = require('react'); import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Tooltip } from '@material-ui/core'; -import { action, computed, IReactionDisposer, observable, ObservableSet, reaction, runInAction } from 'mobx'; +import { Tooltip } from '@mui/material'; +import { action, computed, IReactionDisposer, makeObservable, observable, ObservableSet, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { Doc, DocListCast, FieldResult, NumListCast, Opt, StrListCast } from '../../../../fields/Doc'; -import { Animation } from '../../../../fields/DocSymbols'; +import { Animation, DocData } from '../../../../fields/DocSymbols'; import { Copy, Id } from '../../../../fields/FieldSymbols'; import { InkField } from '../../../../fields/InkField'; import { List } from '../../../../fields/List'; @@ -24,27 +24,19 @@ import { SerializationHelper } from '../../../util/SerializationHelper'; import { SettingsManager } from '../../../util/SettingsManager'; import { undoBatch, UndoManager } from '../../../util/UndoManager'; import { CollectionDockingView } from '../../collections/CollectionDockingView'; -import { CollectionFreeFormView, computeTimelineLayout, MarqueeViewBounds } from '../../collections/collectionFreeForm'; +import { CollectionFreeFormView, MarqueeViewBounds } from '../../collections/collectionFreeForm'; import { CollectionStackedTimeline } from '../../collections/CollectionStackedTimeline'; import { CollectionView } from '../../collections/CollectionView'; -import { TabDocView } from '../../collections/TabDocView'; import { TreeView } from '../../collections/TreeView'; import { ViewBoxBaseComponent } from '../../DocComponent'; import { Colors } from '../../global/globalEnums'; import { LightboxView } from '../../LightboxView'; -import { DocFocusOptions, DocumentView, OpenWhere, OpenWhereMod } from '../DocumentView'; -import { FieldView, FieldViewProps } from '../FieldView'; +import { DocumentView, OpenWhere, OpenWhereMod } from '../DocumentView'; +import { FocusViewOptions, FieldView, FieldViewProps } from '../FieldView'; import { ScriptingBox } from '../ScriptingBox'; import './PresBox.scss'; import ReactLoading from 'react-loading'; import { PresEffect, PresEffectDirection, PresMovement, PresStatus } from './PresEnums'; -import { IconButton, Type } from 'browndash-components'; -import { AiOutlineSend } from 'react-icons/ai'; -import { DictationManager } from '../../../util/DictationManager'; -import { BiMicrophone, BiX } from 'react-icons/bi'; -import TextareaAutosize from 'react-textarea-autosize'; -import { gptTrailSlideCustomization } from '../../../apis/gpt/customization'; - export interface pinDataTypes { scrollable?: boolean; dataviz?: number[]; @@ -79,10 +71,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { } static navigateToDocScript: ScriptField; - constructor(props: any) { + constructor(props: FieldViewProps) { super(props); + makeObservable(this); if (!PresBox.navigateToDocScript) { - PresBox.navigateToDocScript = ScriptField.MakeFunction('navigateToDoc(self.presentation_targetDoc, self)')!; + PresBox.navigateToDocScript = ScriptField.MakeFunction('navigateToDoc(this.presentation_targetDoc, self)')!; } } @@ -91,12 +84,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { _batch: UndoManager.Batch | undefined = undefined; // undo batch for dragging sliders which generate multiple scene edit events as the cursor moves _keyTimer: NodeJS.Timeout | undefined; // timer for turning off transition flag when key frame change has completed. Need to clear this if you do a second navigation before first finishes, or else first timer can go off during second naviation. _unmounting = false; // flag that view is unmounting used to block RemFromMap from deleting things + _presTimer: NodeJS.Timeout | undefined; @observable public static Instance: PresBox; @observable _isChildActive = false; @observable _moveOnFromAudio: boolean = true; - @observable _presTimer!: NodeJS.Timeout; @observable _eleArray: HTMLElement[] = []; @observable _dragArray: HTMLElement[] = []; @@ -151,16 +144,16 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { return StrCast(this.layoutDoc.presFieldKey, 'data'); } @computed get childDocs() { - return DocListCast(this.rootDoc[this.presFieldKey]); + return DocListCast(this.Document[this.presFieldKey]); } @computed get tagDocs() { return this.childDocs.map(doc => Cast(doc.presentation_targetDoc, Doc, null)); } @computed get itemIndex() { - return NumCast(this.rootDoc._itemIndex); + return NumCast(this.Document._itemIndex); } @computed get activeItem() { - return DocCast(this.childDocs[NumCast(this.rootDoc._itemIndex)]); + return DocCast(this.childDocs[NumCast(this.Document._itemIndex)]); } @computed get targetDoc() { return Cast(this.activeItem?.presentation_targetDoc, Doc, null); @@ -178,21 +171,20 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { return false; } @computed get selectedDocumentView() { - if (SelectionManager.Views().length) return SelectionManager.Views()[0]; - if (this.selectedArray.size) return DocumentManager.Instance.getDocumentView(this.rootDoc); + if (SelectionManager.Views.length) return SelectionManager.Views[0]; + if (this.selectedArray.size) return DocumentManager.Instance.getDocumentView(this.Document); } @computed get isPres() { - return this.selectedDoc === this.rootDoc; + return this.selectedDoc === this.Document; } @computed get selectedDoc() { - return this.selectedDocumentView?.rootDoc; + return this.selectedDocumentView?.Document; } isActiveItemTarget = (layoutDoc: Doc) => this.activeItem?.presentation_targetDoc === layoutDoc; clearSelectedArray = () => this.selectedArray.clear(); addToSelectedArray = action((doc: Doc) => this.selectedArray.add(doc)); removeFromSelectedArray = action((doc: Doc) => this.selectedArray.delete(doc)); - @action componentWillUnmount() { this._unmounting = true; if (this._presTimer) clearTimeout(this._presTimer); @@ -207,7 +199,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { () => this.selectedDoc, selected => { document.removeEventListener('keydown', PresBox.keyEventsWrapper, true); - (this._presKeyEvents = selected === this.rootDoc) && document.addEventListener('keydown', PresBox.keyEventsWrapper, true); + (this._presKeyEvents = selected === this.Document) && document.addEventListener('keydown', PresBox.keyEventsWrapper, true); }, { fireImmediately: true } ); @@ -223,39 +215,27 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { }, { fireImmediately: true } ); - this.props.setContentView?.(this); + this._props.setContentViewBox?.(this); this._unmounting = false; - if (this.props.renderDepth > 0) { - runInAction(() => { - this.rootDoc._forceRenderEngine = computeTimelineLayout.name; - this.layoutDoc._gridGap = 0; - this.layoutDoc._yMargin = 0; - }); - } this.turnOffEdit(true); this._disposers.selection = reaction( - () => SelectionManager.Views().slice(), - views => (!PresBox.Instance || views.some(view => view.props.Document === this.rootDoc)) && this.updateCurrentPresentation(), + () => SelectionManager.Views.slice(), + views => (!PresBox.Instance || views.some(view => view.Document === this.Document)) && this.updateCurrentPresentation(), { fireImmediately: true } ); this._disposers.editing = reaction( () => this.layoutDoc.presentation_status === PresStatus.Edit, - editing => { - if (editing) { - this.childDocs.forEach(doc => { - if (doc.presentation_indexed !== undefined) { - this.progressivizedItems(doc)?.forEach(indexedDoc => (indexedDoc.opacity = undefined)); - doc.presentation_indexed = Math.min(this.progressivizedItems(doc)?.length ?? 0, 1); - } - }); - } - } + editing => editing && + this.childDocs.filter(doc => doc.presentation_indexed !== undefined).forEach(doc => { + this.progressivizedItems(doc)?.forEach(indexedDoc => (indexedDoc.opacity = undefined)); + doc.presentation_indexed = Math.min(this.progressivizedItems(doc)?.length ?? 0, 1); + }) // prettier-ignore ); } @action updateCurrentPresentation = (pres?: Doc) => { - Doc.ActivePresentation = pres ?? this.rootDoc; + Doc.ActivePresentation = pres ?? this.Document; PresBox.Instance = this; }; @@ -384,19 +364,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { }; // go to documents chain - runSubroutines = (childrenToRun: Doc[], normallyNextSlide: Doc) => { - console.log(childrenToRun, normallyNextSlide, 'runSUBFUNC'); - if (childrenToRun === undefined) { - console.log('children undefined'); - return; - } - if (childrenToRun[0] === normallyNextSlide) { - return; + runSubroutines = (childrenToRun: Opt<Doc[]>, normallyNextSlide: Doc) => { + if (childrenToRun && childrenToRun[0] !== normallyNextSlide) { + childrenToRun.forEach(child => DocumentManager.Instance.showDocument(child, {})); } - - childrenToRun.forEach(child => { - DocumentManager.Instance.showDocument(child, {}); - }); }; // Called when the user activates 'next' - to move to the next part of the pres. trail @@ -419,13 +390,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { listItemDoc.presentation_effect = this.activeItem.presBulletEffect; listItemDoc.presentation_transition = 500; targetView?.setAnimEffect(listItemDoc, 500); - if (targetView?.docView && this.activeItem.presBulletExpand) { - targetView.docView._animateScalingTo = 1.2; - targetView.docView._animateScaleTime = 400; - Doc.AddUnHighlightWatcher(() => { - targetView.docView!._animateScaleTime = undefined; - targetView!.docView!._animateScalingTo = 0; - }); + if (targetView && this.activeItem.presBulletExpand) { + targetView.setAnimateScaling(1.2, 400); + Doc.AddUnHighlightWatcher(() => targetView?.setAnimateScaling(0, undefined)); } listItemDoc.opacity = undefined; this.activeItem.presentation_indexed = presIndexed + 1; @@ -437,7 +404,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { if (progressiveReveal(false)) return true; if (this.childDocs[this.itemIndex + 1] !== undefined) { // Case 1: No more frames in current doc and next slide is defined, therefore move to next slide - const slides = DocListCast(this.rootDoc[StrCast(this.presFieldKey, 'data')]); + const slides = DocListCast(this.Document[StrCast(this.presFieldKey, 'data')]); const curLast = this.selectedArray.size ? Math.max(...Array.from(this.selectedArray).map(d => slides.indexOf(DocCast(d)))) : this.itemIndex; // before moving onto next slide, run the subroutines :) @@ -472,7 +439,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { // Case 2: There are no other frames so it should go to the previous slide prevSelected = Math.max(0, prevSelected - 1); this.nextSlide(prevSelected); - this.rootDoc._itemIndex = prevSelected; + this.Document._itemIndex = prevSelected; } else if (this.childDocs[this.itemIndex - 1] === undefined && this.layoutDoc.presLoop) { // Case 3: Pres loop is on so it should go to the last slide this.nextSlide(this.childDocs.length - 1); @@ -486,7 +453,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { public gotoDocument = action((index: number, from?: Doc, group?: boolean, finished?: () => void) => { Doc.UnBrushAllDocs(); if (index >= 0 && index < this.childDocs.length) { - this.rootDoc._itemIndex = index; + this.Document._itemIndex = index; if (from?.mediaStopTriggerList && this.layoutDoc.presentation_status !== PresStatus.Edit) { DocListCast(from.mediaStopTriggerList).forEach(this.stopTempMedia); } @@ -526,7 +493,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { playAnnotation = (anno: AudioField) => {}; @action static restoreTargetDocView(bestTargetView: Opt<DocumentView>, activeItem: Doc, transTime: number, pinDocLayout: boolean = BoolCast(activeItem.config_pinLayout), pinDataTypes?: pinDataTypes, targetDoc?: Doc) { - const bestTarget = bestTargetView?.rootDoc ?? (targetDoc?.layout_unrendered ? DocCast(targetDoc?.annotationOn) : targetDoc); + const bestTarget = bestTargetView?.Document ?? (targetDoc?.layout_unrendered ? DocCast(targetDoc?.annotationOn) : targetDoc); if (!bestTarget) return; let changed = false; if (pinDocLayout) { @@ -554,10 +521,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { const acontext = activeItem.config_activeFrame !== undefined ? DocCast(DocCast(activeItem.presentation_targetDoc).embedContainer) : DocCast(activeItem.presentation_targetDoc); const context = DocCast(acontext)?.annotationOn ? DocCast(DocCast(acontext).annotationOn) : acontext; if (context) { - const ffview = DocumentManager.Instance.getFirstDocumentView(context)?.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView; + const ffview = DocumentManager.Instance.getFirstDocumentView(context)?.CollectionFreeFormView; if (ffview?.childDocs) { PresBox.Instance._keyTimer = CollectionFreeFormView.gotoKeyframe(PresBox.Instance._keyTimer, ffview.childDocs, transTime); - ffview.rootDoc._currentFrame = NumCast(activeFrame); + ffview.layoutDoc._currentFrame = NumCast(activeFrame); } } } @@ -567,9 +534,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { const setData = bestTargetView?.ComponentView?.setData; if (setData) setData(activeItem.config_data); else { - const current = Doc.GetProto(bestTarget)[fkey]; - Doc.GetProto(bestTarget)[fkey + '_' + Date.now()] = current instanceof ObjectField ? current[Copy]() : current; - Doc.GetProto(bestTarget)[fkey] = activeItem.config_data instanceof ObjectField ? activeItem.config_data[Copy]() : activeItem.config_data; + const bestTargetData = bestTarget[DocData]; + const current = bestTargetData[fkey]; + bestTargetData[fkey + '_' + Date.now()] = current instanceof ObjectField ? current[Copy]() : current; + bestTargetData[fkey] = activeItem.config_data instanceof ObjectField ? activeItem.config_data[Copy]() : activeItem.config_data; } bestTarget[fkey + '_usePath'] = activeItem.config_usePath; setTimeout(() => (bestTarget._dataTransition = undefined), transTime + 10); @@ -627,11 +595,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { } if (pinDataTypes?.inkable || (!pinDataTypes && (activeItem.config_fillColor !== undefined || activeItem.color !== undefined))) { if (bestTarget.fillColor !== activeItem.config_fillColor) { - Doc.GetProto(bestTarget).fillColor = StrCast(activeItem.config_fillColor, StrCast(bestTarget.fillColor)); + bestTarget[DocData].fillColor = StrCast(activeItem.config_fillColor, StrCast(bestTarget.fillColor)); changed = true; } if (bestTarget.color !== activeItem.config_color) { - Doc.GetProto(bestTarget).color = StrCast(activeItem.config_color, StrCast(bestTarget.color)); + bestTarget[DocData].color = StrCast(activeItem.config_color, StrCast(bestTarget.color)); changed = true; } if (bestTarget.width !== activeItem.width) { @@ -672,11 +640,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { if (bestTarget._layout_scrollTop !== activeItem.config_scrollTop) { bestTarget._layout_scrollTop = activeItem.config_scrollTop; changed = true; - const contentBounds = Cast(activeItem.config_viewBounds, listSpec('number')); - if (contentBounds) { - const dv = DocumentManager.Instance.getDocumentView(bestTarget)?.ComponentView; - dv?.brushView?.({ panX: (contentBounds[0] + contentBounds[2]) / 2, panY: (contentBounds[1] + contentBounds[3]) / 2, width: contentBounds[2] - contentBounds[0], height: contentBounds[3] - contentBounds[1] }, transTime); - } } } if (pinDataTypes?.dataannos || (!pinDataTypes && activeItem.config_annotations !== undefined)) { @@ -693,7 +656,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { return doc; }); const newList = new List<Doc>([...oldItems, ...hiddenItems, ...newItems]); - Doc.GetProto(bestTarget)[fkey + '_annotations'] = newList; + bestTarget[DocData][fkey + '_annotations'] = newList; } if (pinDataTypes?.poslayoutview || (!pinDataTypes && activeItem.config_pinLayoutData !== undefined)) { changed = true; @@ -714,14 +677,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { data.fill && (doc._fillColor = data.fill); doc._width = data.w; doc._height = data.h; - data.data && (Doc.GetProto(doc).data = field); - data.text && (Doc.GetProto(doc).text = tfield); - Doc.AddDocToList(Doc.GetProto(bestTarget), layoutField, doc); + data.data && (doc[DocData].data = field); + data.text && (doc[DocData].text = tfield); + Doc.AddDocToList(bestTarget[DocData], layoutField, doc); } }); setTimeout(() => Array.from(transitioned).forEach(action(doc => (doc._dataTransition = undefined))), transTime + 10); } - if ((pinDataTypes?.pannable || (!pinDataTypes && (activeItem.config_viewBounds !== undefined || activeItem.config_panX !== undefined || activeItem.config_viewScale !== undefined))) && !bestTarget._isGroup) { + if ((pinDataTypes?.pannable || (!pinDataTypes && (activeItem.config_viewBounds !== undefined || activeItem.config_panX !== undefined || activeItem.config_viewScale !== undefined))) && !bestTarget.isGroup) { const contentBounds = Cast(activeItem.config_viewBounds, listSpec('number')); if (contentBounds) { const viewport = { panX: (contentBounds[0] + contentBounds[2]) / 2, panY: (contentBounds[1] + contentBounds[3]) / 2, width: contentBounds[2] - contentBounds[0], height: contentBounds[3] - contentBounds[1] }; @@ -730,9 +693,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { const dv = DocumentManager.Instance.getDocumentView(bestTarget); if (dv) { changed = true; - const computedScale = NumCast(activeItem.config_zoom, 1) * Math.min(dv.props.PanelWidth() / viewport.width, dv.props.PanelHeight() / viewport.height); + const computedScale = NumCast(activeItem.config_zoom, 1) * Math.min(dv._props.PanelWidth() / viewport.width, dv._props.PanelHeight() / viewport.height); activeItem.presentation_movement === PresMovement.Zoom && (bestTarget._freeform_scale = computedScale); - dv.ComponentView?.brushView?.(viewport, transTime); + dv.ComponentView?.brushView?.(viewport, transTime, 2500); } } else { if (bestTarget._freeform_panX !== activeItem.config_panX || bestTarget._freeform_panY !== activeItem.config_panY || bestTarget._freeform_scale !== activeItem.config_viewScale) { @@ -782,7 +745,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { } if (pinProps.pinData.dataannos) { const fkey = Doc.LayoutFieldKey(targetDoc); - pinDoc.config_annotations = new List<Doc>(DocListCast(Doc.GetProto(targetDoc)[fkey + '_annotations']).filter(doc => !doc.layout_unrendered)); + pinDoc.config_annotations = new List<Doc>(DocListCast(targetDoc[DocData][fkey + '_annotations']).filter(doc => !doc.layout_unrendered)); } if (pinProps.pinData.inkable) { pinDoc.config_fillColor = targetDoc.fillColor; @@ -877,8 +840,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { const dragViewCache = Array.from(this._dragArray); const eleViewCache = Array.from(this._eleArray); const resetSelection = action(() => { - if (!this.props.isSelected()) { - const presDocView = DocumentManager.Instance.getDocumentView(this.rootDoc); + if (!this._props.isSelected()) { + const presDocView = DocumentManager.Instance.getDocumentView(this.Document); if (presDocView) SelectionManager.SelectView(presDocView, false); this.clearSelectedArray(); selViewCache.forEach(doc => this.addToSelectedArray(doc)); @@ -890,6 +853,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { PresBox.NavigateToTarget(targetDoc, activeItem, resetSelection); }; + public static PanelName = 'PRESBOX'; + static NavigateToTarget(targetDoc: Doc, activeItem: Doc, finished?: () => void) { if (activeItem.presentation_movement === PresMovement.None && targetDoc.type === DocumentType.SCRIPTING) { (DocumentManager.Instance.getFirstDocumentView(targetDoc)?.ComponentView as ScriptingBox)?.onRun?.(); @@ -897,14 +862,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { } const effect = activeItem.presentation_effect && activeItem.presentation_effect !== PresEffect.None ? activeItem.presentation_effect : undefined; const presTime = NumCast(activeItem.presentation_transition, effect ? 750 : 500); - const options: DocFocusOptions = { + const options: FocusViewOptions = { willPan: activeItem.presentation_movement !== PresMovement.None, willZoomCentered: activeItem.presentation_movement === PresMovement.Zoom || activeItem.presentation_movement === PresMovement.Jump || activeItem.presentation_movement === PresMovement.Center, zoomScale: activeItem.presentation_movement === PresMovement.Center ? 0 : NumCast(activeItem.config_zoom, 1), zoomTime: activeItem.presentation_movement === PresMovement.Jump ? 0 : Math.min(Math.max(effect ? 750 : 500, (effect ? 0.2 : 1) * presTime), presTime), effect: activeItem, noSelect: true, - openLocation: OpenWhere.addLeft, + openLocation: targetDoc.type === DocumentType.PRES ? ((OpenWhere.replace + ':' + PresBox.PanelName) as OpenWhere) : OpenWhere.addLeft, anchorDoc: activeItem, easeFunc: StrCast(activeItem.presEaseFunc, 'ease') as any, zoomTextSelections: BoolCast(activeItem.presentation_zoomText), @@ -914,7 +879,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { if (activeItem.presentation_openInLightbox) { const context = DocCast(targetDoc.annotationOn) ?? targetDoc; if (!DocumentManager.Instance.getLightboxDocumentView(context)) { - LightboxView.SetLightboxDoc(context); + LightboxView.Instance.SetLightboxDoc(context); } } if (targetDoc) { @@ -923,7 +888,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { DocumentManager.Instance.AddViewRenderedCb(LightboxView.LightboxDoc, dv => { // if target or the doc it annotates is not in the lightbox, then close the lightbox if (!DocumentManager.Instance.getLightboxDocumentView(DocCast(targetDoc.annotationOn) ?? targetDoc)) { - LightboxView.SetLightboxDoc(undefined); + LightboxView.Instance.SetLightboxDoc(undefined); } DocumentManager.Instance.showDocument(targetDoc, options, finished); }); @@ -1017,8 +982,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { break; } }); - LightboxView.SetLightboxDoc(undefined); - Doc.RemFromMyOverlay(this.rootDoc); + LightboxView.Instance.SetLightboxDoc(undefined); + Doc.RemFromMyOverlay(this.Document); return PresStatus.Edit; }; }; @@ -1057,7 +1022,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { // The function allows for expanding the view of pres on toggle @action toggleExpandMode = () => { runInAction(() => (this._expandBoolean = !this._expandBoolean)); - this.rootDoc.expandBoolean = this._expandBoolean; + this.Document.expandBoolean = this._expandBoolean; this.childDocs.forEach(doc => { doc.presentation_expandInlineButton = this._expandBoolean; }); @@ -1107,16 +1072,16 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { */ @action enterMinimize = () => { - this.updateCurrentPresentation(this.rootDoc); + this.updateCurrentPresentation(this.Document); clearTimeout(this._presTimer); - const pt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); - this.props.removeDocument?.(this.layoutDoc); - return PresBox.OpenPresMinimized(this.rootDoc, [pt[0] + (this.props.PanelWidth() - 250), pt[1] + 10]); + const pt = this.ScreenToLocalBoxXf().inverse().transformPoint(0, 0); + this._props.removeDocument?.(this.layoutDoc); + return PresBox.OpenPresMinimized(this.Document, [pt[0] + (this._props.PanelWidth() - 250), pt[1] + 10]); }; exitMinimize = () => { if (Doc.IsInMyOverlay(this.layoutDoc)) { - Doc.RemFromMyOverlay(this.rootDoc); - CollectionDockingView.AddSplit(this.rootDoc, OpenWhereMod.right); + Doc.RemFromMyOverlay(this.Document); + CollectionDockingView.AddSplit(this.Document, OpenWhereMod.right); } return PresStatus.Edit; }; @@ -1142,8 +1107,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { const type_collection = e.target.selectedOptions[0].value as CollectionViewType; this.layoutDoc.presFieldKey = this.fieldKey + (type_collection === CollectionViewType.Tree ? '-linearized' : ''); // pivot field may be set by the user in timeline view (or some other way) -- need to reset it here - [CollectionViewType.Tree || CollectionViewType.Stacking].includes(type_collection) && (this.rootDoc._pivotField = undefined); - this.rootDoc._type_collection = type_collection; + [CollectionViewType.Tree || CollectionViewType.Stacking].includes(type_collection) && (this.Document._pivotField = undefined); + this.Document._type_collection = type_collection; if (this.isTreeOrStack) { this.layoutDoc._gridGap = 0; } @@ -1179,7 +1144,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { return StrCast(activeItem.presentation_movement); }); - whenChildContentsActiveChanged = action((isActive: boolean) => this.props.whenChildContentsActiveChanged((this._isChildActive = isActive))); + whenChildContentsActiveChanged = action((isActive: boolean) => this._props.whenChildContentsActiveChanged((this._isChildActive = isActive))); // For dragging documents into the presentation trail addDocumentFilter = (docs: Doc[]) => { docs.forEach((doc, i) => { @@ -1190,11 +1155,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { audio.config_clipStart = NumCast(doc._timecodeToShow /* audioStart */, NumCast(doc._timecodeToShow /* videoStart */)); audio.config_clipEnd = NumCast(doc._timecodeToHide /* audioEnd */, NumCast(doc._timecodeToHide /* videoEnd */)); audio.presentation_duration = audio.config_clipStart - audio.config_clipEnd; - TabDocView.PinDoc(audio, { audioRange: true }); + this._props.pinToPres(audio, { audioRange: true }); setTimeout(() => this.removeDocument(doc), 0); return false; } - } else { + } else if (doc.type !== DocumentType.PRES) { if (!doc.presentation_targetDoc) doc.title = doc.title + ' - Slide'; doc.presentation_targetDoc = doc.createdFrom; // dropped document will be a new embedding of an embedded document somewhere else. doc.presentation_movement = PresMovement.Zoom; @@ -1203,10 +1168,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { }); return true; }; + childLayoutTemplate = () => Docs.Create.PresElementBoxDocument(); - removeDocument = (doc: Doc) => Doc.RemoveDocFromList(this.rootDoc, this.fieldKey, doc); - getTransform = () => this.props.ScreenToLocalTransform().translate(-5, -65); // listBox padding-left and pres-box-cont minHeight - panelHeight = () => this.props.PanelHeight() - 40; + removeDocument = (doc: Doc) => Doc.RemoveDocFromList(this.Document, this.fieldKey, doc); + getTransform = () => this.ScreenToLocalBoxXf().translate(-5, -65); // listBox padding-left and pres-box-cont minHeight + panelHeight = () => this._props.PanelHeight() - 40; /** * For sorting the array so that the order is maintained when it is dropped. */ @@ -1244,11 +1210,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { @action selectPres = () => { - const presDocView = DocumentManager.Instance.getDocumentView(this.rootDoc); + const presDocView = DocumentManager.Instance.getDocumentView(this.Document); presDocView && SelectionManager.SelectView(presDocView, false); }; - focusElement = (doc: Doc, options: DocFocusOptions) => { + focusElement = (doc: Doc, options: FocusViewOptions) => { this.selectElement(doc); return undefined; }; @@ -1260,7 +1226,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { if (noNav) { const index = this.childDocs.indexOf(doc); if (index >= 0 && index < this.childDocs.length) { - this.rootDoc._itemIndex = index; + this.Document._itemIndex = index; } } else { this.gotoDocument(this.childDocs.indexOf(doc), this.activeItem); @@ -1359,8 +1325,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { case 'ArrowRight': if (e.shiftKey && this.itemIndex < this.childDocs.length - 1) { // TODO: update to work properly - this.rootDoc._itemIndex = NumCast(this.rootDoc._itemIndex) + 1; - this.addToSelectedArray(this.childDocs[this.rootDoc._itemIndex]); + this.Document._itemIndex = NumCast(this.Document._itemIndex) + 1; + this.addToSelectedArray(this.childDocs[this.Document._itemIndex]); } else { this.next(); if (this._presTimer) { @@ -1376,8 +1342,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { case 'ArrowLeft': if (e.shiftKey && this.itemIndex !== 0) { // TODO: update to work properly - this.rootDoc._itemIndex = NumCast(this.rootDoc._itemIndex) - 1; - this.addToSelectedArray(this.childDocs[this.rootDoc._itemIndex]); + this.Document._itemIndex = NumCast(this.Document._itemIndex) - 1; + this.addToSelectedArray(this.childDocs[this.Document._itemIndex]); } else { this.back(); if (this._presTimer) { @@ -1440,7 +1406,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { } else if (doc.config_pinView && presCollection === tagDoc && dv) { // Case B: Document is presPinView and is presCollection const scale = 1 / NumCast(doc.config_viewScale); - const viewBounds = NumListCast(doc.config_viewBounds, [0, 0, dv.props.PanelWidth(), dv.props.PanelHeight()]); + const viewBounds = NumListCast(doc.config_viewBounds, [0, 0, dv._props.PanelWidth(), dv._props.PanelHeight()]); const height = (viewBounds[3] - viewBounds[1]) * scale; const width = (viewBounds[2] - viewBounds[0]) * scale; const indWidth = width / 10; @@ -1560,46 +1526,39 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { updateMovement = action((movement: PresMovement, all?: boolean) => (all ? this.childDocs : this.selectedArray).forEach(doc => (doc.presentation_movement = movement))); @undoBatch - @action updateHideBefore = (activeItem: Doc) => { activeItem.presentation_hideBefore = !activeItem.presentation_hideBefore; this.selectedArray.forEach(doc => (doc.presentation_hideBefore = activeItem.presentation_hideBefore)); }; @undoBatch - @action updateHide = (activeItem: Doc) => { activeItem.presentation_hide = !activeItem.presentation_hide; this.selectedArray.forEach(doc => (doc.presentation_hide = activeItem.presentation_hide)); }; @undoBatch - @action updateHideAfter = (activeItem: Doc) => { activeItem.presentation_hideAfter = !activeItem.presentation_hideAfter; this.selectedArray.forEach(doc => (doc.presentation_hideAfter = activeItem.presentation_hideAfter)); }; @undoBatch - @action updateOpenDoc = (activeItem: Doc) => { activeItem.presentation_openInLightbox = !activeItem.presentation_openInLightbox; this.selectedArray.forEach(doc => (doc.presentation_openInLightbox = activeItem.presentation_openInLightbox)); }; @undoBatch - @action updateEaseFunc = (activeItem: Doc) => { activeItem.presEaseFunc = activeItem.presEaseFunc === 'linear' ? 'ease' : 'linear'; this.selectedArray.forEach(doc => (doc.presEaseFunc = activeItem.presEaseFunc)); }; @undoBatch - @action updateEffectDirection = (effect: PresEffectDirection, all?: boolean) => (all ? this.childDocs : this.selectedArray).forEach(doc => (doc.presentation_effectDirection = effect)); @undoBatch - @action updateEffect = (effect: PresEffect, bullet: boolean, all?: boolean) => (all ? this.childDocs : this.selectedArray).forEach(doc => (bullet ? (doc.presBulletEffect = effect) : (doc.presentation_effect = effect))); static _sliderBatch: any; @@ -1632,7 +1591,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { }; @undoBatch - @action applyTo = (array: Doc[]) => { this.updateMovement(this.activeItem.presentation_movement as PresMovement, true); this.updateEffect(this.activeItem.presentation_effect as PresEffect, false, true); @@ -1762,8 +1720,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { let dataField = Doc.LayoutFieldKey(tagDoc); if (Cast(tagDoc[dataField], listSpec(Doc), null)?.filter(d => d instanceof Doc) === undefined) dataField = dataField + '_annotations'; - if (DocCast(activeItem.presentation_targetDoc).annotationOn) activeItem.data = ComputedField.MakeFunction(`self.presentation_targetDoc.annotationOn["${dataField}"]`); - else activeItem.data = ComputedField.MakeFunction(`self.presentation_targetDoc["${dataField}"]`); + if (DocCast(activeItem.presentation_targetDoc).annotationOn) activeItem.data = ComputedField.MakeFunction(`this.presentation_targetDoc.annotationOn?.["${dataField}"]`); + else activeItem.data = ComputedField.MakeFunction(`this.presentation_targetDoc?.["${dataField}"]`); }} checked={Cast(activeItem.presentation_indexed, 'number', null) !== undefined ? true : false} /> @@ -1809,12 +1767,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { className={'presBox-dropdownOptions'} style={{ display: this._openBulletEffectDropdown ? 'grid' : 'none', color: SettingsManager.userColor, background: SettingsManager.userBackgroundColor }} onPointerDown={e => e.stopPropagation()}> - {bulletEffect(PresEffect.None)} - {bulletEffect(PresEffect.Fade)} - {bulletEffect(PresEffect.Flip)} - {bulletEffect(PresEffect.Rotate)} - {bulletEffect(PresEffect.Bounce)} - {bulletEffect(PresEffect.Roll)} + {Object.values(PresEffect) + .filter(v => isNaN(Number(v))) + .map(effect => bulletEffect(effect))} </div> </div> </div> @@ -1978,12 +1933,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { display: this._openEffectDropdown ? 'grid' : 'none', }} onPointerDown={e => e.stopPropagation()}> - {preseEffect(PresEffect.None)} - {preseEffect(PresEffect.Fade)} - {preseEffect(PresEffect.Flip)} - {preseEffect(PresEffect.Rotate)} - {preseEffect(PresEffect.Bounce)} - {preseEffect(PresEffect.Roll)} + {Object.values(PresEffect) + .filter(v => isNaN(Number(v))) + .map(effect => preseEffect(effect))} </div> </div> <div className="ribbon-doubleButton" style={{ display: effect === PresEffectDirection.None ? 'none' : 'inline-flex' }}> @@ -2343,13 +2295,13 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { const tab = tabMap && Array.from(tabMap).find(tab => tab.DashDoc.type === DocumentType.COL)?.DashDoc; const presCollection = DocumentManager.GetContextPath(this.activeItem).reverse().lastElement().presentation_targetDoc ?? tab; const data = Cast(presCollection?.data, listSpec(Doc)); - const config_data = Cast(this.rootDoc.data, listSpec(Doc)); + const config_data = Cast(this.Document.data, listSpec(Doc)); if (data && config_data) { data.push(doc); - TabDocView.PinDoc(doc, {}); + this._props.pinToPres(doc, {}); this.gotoDocument(this.childDocs.length, this.activeItem); } else { - this.props.addDocTab(doc, OpenWhere.addRight); + this._props.addDocTab(doc, OpenWhere.addRight); } } }; @@ -2410,20 +2362,20 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { @computed get toolbarWidth(): number { - return this.props.PanelWidth(); + return this._props.PanelWidth(); } @action - toggleProperties = () => (SettingsManager.propertiesWidth = SettingsManager.propertiesWidth > 0 ? 0 : 250); + toggleProperties = () => (SettingsManager.Instance.propertiesWidth = SettingsManager.Instance.propertiesWidth > 0 ? 0 : 250); @computed get toolbar() { - const propIcon = SettingsManager.propertiesWidth > 0 ? 'angle-double-right' : 'angle-double-left'; - const propTitle = SettingsManager.propertiesWidth > 0 ? 'Close Presentation Panel' : 'Open Presentation Panel'; - const mode = StrCast(this.rootDoc._type_collection) as CollectionViewType; + const propIcon = SettingsManager.Instance.propertiesWidth > 0 ? 'angle-double-right' : 'angle-double-left'; + const propTitle = SettingsManager.Instance.propertiesWidth > 0 ? 'Close Presentation Panel' : 'Open Presentation Panel'; + const mode = StrCast(this.Document._type_collection) as CollectionViewType; const isMini: boolean = this.toolbarWidth <= 100; const activeColor = SettingsManager.userVariantColor; const inactiveColor = lightOrDark(SettingsManager.userBackgroundColor) === Colors.WHITE ? Colors.WHITE : SettingsManager.userBackgroundColor; - return mode === CollectionViewType.Carousel3D || Doc.IsInMyOverlay(this.rootDoc) ? null : ( + return mode === CollectionViewType.Carousel3D || Doc.IsInMyOverlay(this.Document) ? null : ( <div id="toolbarContainer" className={'presBox-toolbar'}> {/* <Tooltip title={<><div className="dash-tooltip">{"Add new slide"}</div></>}><div className={`toolbar-button ${this.newDocumentTools ? "active" : ""}`} onClick={action(() => this.newDocumentTools = !this.newDocumentTools)}> <FontAwesomeIcon icon={"plus"} /> @@ -2447,7 +2399,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { </Tooltip> <Tooltip title={<div className="dash-tooltip">{propTitle}</div>}> <div className="toolbar-button" style={{ position: 'absolute', right: 4, fontSize: 16 }} onClick={this.toggleProperties}> - <FontAwesomeIcon className={'toolbar-thumbtack'} icon={propIcon} style={{ color: SettingsManager.propertiesWidth > 0 ? activeColor : inactiveColor }} /> + <FontAwesomeIcon className={'toolbar-thumbtack'} icon={propIcon} style={{ color: SettingsManager.Instance.propertiesWidth > 0 ? activeColor : inactiveColor }} /> </div> </Tooltip> </> @@ -2462,12 +2414,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { * presentPanel: The button to start the presentation / open minimized view of the presentation */ @computed get topPanel() { - const mode = StrCast(this.rootDoc._type_collection) as CollectionViewType; + const mode = StrCast(this.Document._type_collection) as CollectionViewType; const isMini: boolean = this.toolbarWidth <= 100; return ( - <div - className={`presBox-buttons${Doc.IsInMyOverlay(this.rootDoc) ? ' inOverlay' : ''}`} - style={{ background: Doc.ActivePresentation === this.rootDoc ? Colors.LIGHT_BLUE : undefined, display: !this.rootDoc._chromeHidden ? 'none' : undefined }}> + <div className={`presBox-buttons${Doc.IsInMyOverlay(this.Document) ? ' inOverlay' : ''}`} style={{ background: Doc.ActivePresentation === this.Document ? Colors.LIGHT_BLUE : undefined }}> {isMini ? null : ( <select className="presBox-viewPicker" style={{ display: this.layoutDoc.presentation_status === 'edit' ? 'block' : 'none' }} onPointerDown={e => e.stopPropagation()} onChange={this.viewChanged} value={mode}> <option onPointerDown={StopEvent} value={CollectionViewType.Stacking}> @@ -2495,7 +2445,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { } })}> <FontAwesomeIcon icon={'play-circle'} /> - <div style={{ display: this.props.PanelWidth() > 200 ? 'inline-flex' : 'none' }}> Present</div> + <div style={{ display: this._props.PanelWidth() > 200 ? 'inline-flex' : 'none' }}> Present</div> </div> {mode === CollectionViewType.Carousel3D || isMini ? null : ( <div @@ -2520,7 +2470,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { this.itemIndex === this.childDocs.length - 1 && (this.activeItem.presentation_indexed === undefined || NumCast(this.activeItem.presentation_indexed) === (this.progressivizedItems(this.activeItem)?.length ?? 0)); const presStart: boolean = !this.layoutDoc.presLoop && this.itemIndex === 0; - const inOverlay = Doc.IsInMyOverlay(this.rootDoc); + const inOverlay = Doc.IsInMyOverlay(this.Document); // Case 1: There are still other frames and should go through all frames before going to next slide return ( <div className="presPanelOverlay" style={{ display: this.layoutDoc.presentation_status !== 'edit' ? 'inline-flex' : 'none' }}> @@ -2605,12 +2555,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { <b>1</b> </div> </Tooltip> - <div className="presPanel-button-text" onClick={() => this.gotoDocument(0, this.activeItem)} style={{ display: inOverlay || this.props.PanelWidth() > 250 ? 'inline-flex' : 'none' }}> + <div className="presPanel-button-text" onClick={() => this.gotoDocument(0, this.activeItem)} style={{ display: inOverlay || this._props.PanelWidth() > 250 ? 'inline-flex' : 'none' }}> {inOverlay ? '' : 'Slide'} {this.itemIndex + 1} {this.activeItem?.presentation_indexed !== undefined ? `(${this.activeItem.presentation_indexed}/${this.progressivizedItems(this.activeItem)?.length})` : ''} / {this.childDocs.length} </div> <div className="presPanel-divider"></div> - {this.props.PanelWidth() > 250 ? ( + {this._props.PanelWidth() > 250 ? ( <div className="presPanel-button-text" onClick={undoBatch( @@ -2656,7 +2606,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { }; @undoBatch - @action exitClicked = () => { this.layoutDoc.presentation_status = this._exitTrail?.() ?? this.exitMinimize(); clearTimeout(this._presTimer); @@ -2678,6 +2627,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { } }; + SlideIndex = (slideDoc: Doc) => DocListCast(this.dataDoc[this.presFieldKey]).indexOf(slideDoc); + RemFromMap = (treeViewDoc: Doc, index: number[]) => { if (!treeViewDoc.presentation_targetDoc) return this.childDocs; // if treeViewDoc is not a pres elements, then it's a sub-bullet of a progressivized slide which isn't added to the linearized list of pres elements since it's not really a pres element. if (!this._unmounting && this.isTree) { @@ -2691,17 +2642,17 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { render() { // needed to ensure that the childDocs are loaded for looking up fields this.childDocs.slice(); - const mode = StrCast(this.rootDoc._type_collection) as CollectionViewType; + const mode = StrCast(this.Document._type_collection) as CollectionViewType; const presEnd = !this.layoutDoc.presLoop && this.itemIndex === this.childDocs.length - 1 && (this.activeItem.presentation_indexed === undefined || NumCast(this.activeItem.presentation_indexed) === (this.progressivizedItems(this.activeItem)?.length ?? 0)); const presStart = !this.layoutDoc.presLoop && this.itemIndex === 0; - return this.props.addDocTab === returnFalse ? ( // bcz: hack!! - addDocTab === returnFalse only when this is being rendered by the OverlayView which means the doc is a mini player + return this._props.addDocTab === returnFalse ? ( // bcz: hack!! - addDocTab === returnFalse only when this is being rendered by the OverlayView which means the doc is a mini player <div className="miniPres" onClick={e => e.stopPropagation()} onPointerEnter={action(e => (this._forceKeyEvents = true))}> <div className="presPanelOverlay" - style={{ display: 'inline-flex', height: 30, background: Doc.ActivePresentation === this.rootDoc ? 'green' : '#323232', top: 0, zIndex: 3000000, boxShadow: this._presKeyEvents ? '0 0 0px 3px ' + Colors.MEDIUM_BLUE : undefined }}> + style={{ display: 'inline-flex', height: 30, background: Doc.ActivePresentation === this.Document ? 'green' : '#323232', top: 0, zIndex: 3000000, boxShadow: this._presKeyEvents ? '0 0 0px 3px ' + Colors.MEDIUM_BLUE : undefined }}> <Tooltip title={<div className="dash-tooltip">{'Loop'}</div>}> <div className="presPanel-button" @@ -2739,7 +2690,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { </div> </div> ) : ( - <div className="presBox-cont" style={{ minWidth: Doc.IsInMyOverlay(this.rootDoc) ? PresBox.minimizedWidth : undefined }}> + <div className="presBox-cont" style={{ minWidth: Doc.IsInMyOverlay(this.Document) ? PresBox.minimizedWidth : undefined }}> {this.topPanel} {this.toolbar} {this.newDocumentToolbarDropdown} @@ -2747,19 +2698,19 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { <div className="Slide"> {mode !== CollectionViewType.Invalid ? ( <CollectionView - {...this.props} - PanelWidth={this.props.PanelWidth} + {...this._props} + PanelWidth={this._props.PanelWidth} PanelHeight={this.panelHeight} childIgnoreNativeSize={true} moveDocument={returnFalse} ignoreUnrendered={true} childDragAction="move" - setContentView={emptyFunction} + setContentViewBox={emptyFunction} //childLayoutFitWidth={returnTrue} childOpacity={returnOne} childClickScript={PresBox.navigateToDocScript} childLayoutTemplate={this.childLayoutTemplate} - childXPadding={Doc.IsComicStyle(this.rootDoc) ? 20 : undefined} + childXPadding={Doc.IsComicStyle(this.Document) ? 20 : undefined} filterAddDocument={this.addDocumentFilter} removeDocument={returnFalse} dontRegisterView={true} @@ -2767,7 +2718,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { ScreenToLocalTransform={this.getTransform} AddToMap={this.AddToMap} RemFromMap={this.RemFromMap} - hierarchyIndex={emptyPath} + hierarchyIndex={emptyPath as any as number[]} /> ) : null} </div> diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx index 37f449001..ed2f25fb6 100644 --- a/src/client/views/nodes/trails/PresElementBox.tsx +++ b/src/client/views/nodes/trails/PresElementBox.tsx @@ -1,9 +1,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Tooltip } from '@material-ui/core'; -import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx'; +import { Tooltip } from '@mui/material'; +import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { Doc, DocListCast, Opt } from '../../../../fields/Doc'; -import { Height, Width } from '../../../../fields/DocSymbols'; import { Id } from '../../../../fields/FieldSymbols'; import { List } from '../../../../fields/List'; import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../../../fields/Types'; @@ -15,17 +15,16 @@ import { DragManager } from '../../../util/DragManager'; import { SettingsManager } from '../../../util/SettingsManager'; import { Transform } from '../../../util/Transform'; import { undoable, undoBatch } from '../../../util/UndoManager'; +import { TreeView } from '../../collections/TreeView'; import { ViewBoxBaseComponent } from '../../DocComponent'; import { EditableView } from '../../EditableView'; import { Colors } from '../../global/globalEnums'; -import { DocumentView, DocumentViewProps } from '../../nodes/DocumentView'; +import { DocumentView } from '../../nodes/DocumentView'; import { FieldView, FieldViewProps } from '../../nodes/FieldView'; import { StyleProp } from '../../StyleProvider'; import { PresBox } from './PresBox'; import './PresElementBox.scss'; import { PresMovement } from './PresEnums'; -import React = require('react'); -import { TreeView } from '../../collections/TreeView'; /** * This class models the view a document added to presentation will have in the presentation. * It involves some functionality for its buttons and options. @@ -35,37 +34,58 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PresElementBox, fieldKey); } - _heightDisposer: IReactionDisposer | undefined; + private _itemRef: React.RefObject<HTMLDivElement> = React.createRef(); + private _dragRef: React.RefObject<HTMLDivElement> = React.createRef(); + private _titleRef: React.RefObject<EditableView> = React.createRef(); + private _heightDisposer: IReactionDisposer | undefined; + readonly expandViewHeight = 100; + readonly collapsedHeight = 35; - @observable _dragging = false; - // Idea: this boolean will determine whether to automatically show the video when this preselement is selected. - // @observable static showVideo: boolean = false; - @computed get indexInPres() { - return DocListCast(this.presBox?.[StrCast(this.presBox.presFieldKey, 'data')]).indexOf(this.rootDoc); - } // the index field is where this document is in the presBox display list (since this value is different for each presentation element, the value can't be stored on the layout template which is used by all display elements) - @computed get expandViewHeight() { - return 100; - } - @computed get collapsedHeight() { - return 35; - } // the collapsed height changes depending on the state of the presBox. We could store this on the presentation element template if it's used by only one presentation - but if it's shared by multiple, then this value must be looked up - @computed get selectedArray() { - return this.presBoxView?.selectedArray; + constructor(props: FieldViewProps) { + super(props); + makeObservable(this); } + + @observable _dragging = false; + + // the presentation view that renders this slide @computed get presBoxView() { - return this.props.DocumentView?.()?.props.docViewPath().lastElement()?.ComponentView as PresBox; + return this.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as PresBox; } + + // the presentation view document that renders this slide @computed get presBox() { - return this.props.DocumentView?.().props.docViewPath().lastElement()?.rootDoc; + return this.presBoxView?.Document; + } + + // Since this node is being rendered with a template, this method retrieves + // the actual slide being rendered from the auto-generated rendering template + @computed get slideDoc() { + return this._props.TemplateDataDocument ?? this.Document; } + + // this is the document in the workspaces that is targeted by the slide @computed get targetDoc() { - return Cast(this.rootDoc.presentation_targetDoc, Doc, null) || this.rootDoc; + return Cast(this.slideDoc.presentation_targetDoc, Doc, null) || this.slideDoc; + } + + // computes index of this presentation slide in the presBox list + @computed get indexInPres() { + return this.presBoxView?.SlideIndex(this.slideDoc); + } + + @computed get selectedArray() { + return this.presBoxView?.selectedArray; + } + + @computed get videoRecordingIsInOverlay() { + return Doc.MyOverlayDocs.some(doc => doc.slides === this.slideDoc); } componentDidMount() { this.layoutDoc.layout_hideLinkButton = true; this._heightDisposer = reaction( - () => ({ expand: this.rootDoc.presentation_expandInlineButton, height: this.collapsedHeight }), + () => ({ expand: this.slideDoc.presentation_expandInlineButton, height: this.collapsedHeight }), ({ expand, height }) => (this.layoutDoc._height = height + (expand ? this.expandViewHeight : 0)), { fireImmediately: true } ); @@ -74,55 +94,41 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { this._heightDisposer?.(); } - /** - * Returns a local transformed coordinate array for given coordinates. - */ - ScreenToLocalListTransform = (xCord: number, yCord: number) => [xCord, yCord]; - - @action - presExpandDocumentClick = () => (this.rootDoc.presentation_expandInlineButton = !this.rootDoc.presentation_expandInlineButton); - - embedHeight = (): number => this.collapsedHeight + this.expandViewHeight; - // embedWidth = () => this.props.PanelWidth(); - // embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - this.collapsedHeight); - embedWidth = (): number => this.props.PanelWidth() / 2; - styleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps>, property: string): any => { - if (property === StyleProp.Opacity) return 1; - return this.props.styleProvider?.(doc, props, property); + presExpandDocumentClick = () => (this.slideDoc.presentation_expandInlineButton = !this.slideDoc.presentation_expandInlineButton); + embedHeight = () => this.collapsedHeight + this.expandViewHeight; + embedWidth = () => this._props.PanelWidth() / 2; + styleProvider = (doc: Doc | undefined, props: Opt<FieldViewProps>, property: string): any => { + return property === StyleProp.Opacity ? 1 : this._props.styleProvider?.(doc, props, property); }; /** * The function that is responsible for rendering a preview or not for this * presentation element. */ @computed get renderEmbeddedInline() { - return !this.rootDoc.presentation_expandInlineButton || !this.targetDoc ? null : ( + return !this.slideDoc.presentation_expandInlineButton || !this.targetDoc ? null : ( <div className="presItem-embedded" style={{ height: this.embedHeight(), width: '50%' }}> <DocumentView - Document={PresBox.targetRenderedDoc(this.rootDoc)} - DataDoc={undefined} //this.targetDoc[DataSym] !== this.targetDoc && this.targetDoc[DataSym]} + Document={PresBox.targetRenderedDoc(this.slideDoc)} PanelWidth={this.embedWidth} PanelHeight={this.embedHeight} - isContentActive={this.props.isContentActive} + isContentActive={this._props.isContentActive} styleProvider={this.styleProvider} hideLinkButton={true} ScreenToLocalTransform={Transform.Identity} - renderDepth={this.props.renderDepth + 1} - docViewPath={returnEmptyDoclist} - childFilters={this.props.childFilters} - childFiltersByRanges={this.props.childFiltersByRanges} - searchFilterDocs={this.props.searchFilterDocs} - rootSelected={returnTrue} + renderDepth={this._props.renderDepth + 1} + containerViewPath={returnEmptyDoclist} + childFilters={this._props.childFilters} + childFiltersByRanges={this._props.childFiltersByRanges} + searchFilterDocs={this._props.searchFilterDocs} addDocument={returnFalse} removeDocument={returnFalse} fitContentsToBox={returnTrue} - moveDocument={this.props.moveDocument!} + moveDocument={this._props.moveDocument!} focus={emptyFunction} whenChildContentsActiveChanged={returnFalse} addDocTab={returnFalse} pinToPres={returnFalse} - bringToFront={returnFalse} /> - {/* <div className="presItem-embeddedMask" /> */} </div> ); } @@ -159,26 +165,22 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { @computed get transition() { let transitionInS: number; - if (this.rootDoc.presentation_transition) transitionInS = NumCast(this.rootDoc.presentation_transition) / 1000; + if (this.slideDoc.presentation_transition) transitionInS = NumCast(this.slideDoc.presentation_transition) / 1000; else transitionInS = 0.5; - return this.rootDoc.presentation_movement === PresMovement.Jump || this.rootDoc.presentation_movement === PresMovement.None ? null : 'M: ' + transitionInS + 's'; + return this.slideDoc.presentation_movement === PresMovement.Jump || this.slideDoc.presentation_movement === PresMovement.None ? null : 'M: ' + transitionInS + 's'; } - private _itemRef: React.RefObject<HTMLDivElement> = React.createRef(); - private _dragRef: React.RefObject<HTMLDivElement> = React.createRef(); - private _titleRef: React.RefObject<EditableView> = React.createRef(); - @action headerDown = (e: React.PointerEvent<HTMLDivElement>) => { const element = e.target as any; e.stopPropagation(); e.preventDefault(); if (element && !(e.ctrlKey || e.metaKey || e.button === 2)) { - this.presBoxView?.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, true, false); + this.presBoxView?.regularSelect(this.slideDoc, this._itemRef.current!, this._dragRef.current!, true, false); setupMoveUpEvents(this, e, this.startDrag, emptyFunction, e => { e.stopPropagation(); e.preventDefault(); - this.presBoxView?.modifierSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, e.shiftKey || e.ctrlKey || e.metaKey, e.ctrlKey || e.metaKey, e.shiftKey); + this.presBoxView?.modifierSelect(this.slideDoc, this._itemRef.current!, this._dragRef.current!, e.shiftKey || e.ctrlKey || e.metaKey, e.ctrlKey || e.metaKey, e.shiftKey); this.presBoxView?.activeItem && this.showRecording(this.presBoxView?.activeItem); }); } @@ -189,12 +191,12 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { */ startDrag = (e: PointerEvent) => { const miniView: boolean = this.toolbarWidth <= 100; - const activeItem = this.rootDoc; + const activeItem = this.slideDoc; const dragArray = this.presBoxView?._dragArray ?? []; const dragData = new DragManager.DocumentDragData(this.presBoxView?.sortArray() ?? []); - if (!dragData.draggedDocuments.length) dragData.draggedDocuments.push(this.rootDoc); - dragData.treeViewDoc = this.presBox?._type_collection === CollectionViewType.Tree ? this.presBox : undefined; // this.props.DocumentView?.()?.props.treeViewDoc; - dragData.moveDocument = this.props.moveDocument; + if (!dragData.draggedDocuments.length) dragData.draggedDocuments.push(this.slideDoc); + dragData.treeViewDoc = this.presBox?._type_collection === CollectionViewType.Tree ? this.presBox : undefined; // this.DocumentView?.()?._props.treeViewDoc; + dragData.moveDocument = this._props.moveDocument; const dragItem: HTMLElement[] = []; const classesToRestore = new Map<HTMLElement, string>(); if (dragArray.length === 1) { @@ -238,7 +240,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { }; onPointerMove = (e: PointerEvent) => { - const slide = this._itemRef.current!; + const slide = this._itemRef.current; const dragIsPresItem = DragManager.docsBeingDragged.some(d => d.presentation_targetDoc); if (slide && dragIsPresItem) { const rect = slide.getBoundingClientRect(); @@ -257,35 +259,42 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { }; onPointerLeave = (e: any) => { - this._itemRef.current!.style.borderTop = '0px'; - this._itemRef.current!.style.borderBottom = '0px'; + const slide = this._itemRef.current; + if (slide) { + slide.style.borderTop = '0px'; + slide.style.borderBottom = '0px'; + } document.removeEventListener('pointermove', this.onPointerMove); }; @action toggleProperties = () => { - if (SettingsManager.propertiesWidth < 5) { - action(() => (SettingsManager.propertiesWidth = 250)); + if (SettingsManager.Instance.propertiesWidth < 5) { + SettingsManager.Instance.propertiesWidth = 250; } }; - removePresentationItem = undoable((e: React.MouseEvent) => { - e.stopPropagation(); - if (this.presBox && this.indexInPres < (this.presBoxView?.itemIndex || 0)) { - runInAction(() => (this.presBox!.itemIndex = (this.presBoxView?.itemIndex || 0) - 1)); - } - this.props.removeDocument?.(this.rootDoc); - this.presBoxView?.removeFromSelectedArray(this.rootDoc); - this.removeAllRecordingInOverlay(); - }, 'Remove doc from pres trail'); - - // set the value/title of the individual pres element - @undoBatch - @action - onSetValue = (value: string) => { - this.rootDoc.title = !value.trim().length ? '-untitled-' : value; - return true; - }; + removePresentationItem = undoable( + action((e: React.MouseEvent) => { + e.stopPropagation(); + if (this.presBox && this.indexInPres < (this.presBoxView?.itemIndex || 0)) { + this.presBox.itemIndex = (this.presBoxView?.itemIndex || 0) - 1; + } + this._props.removeDocument?.(this.slideDoc); + this.presBoxView?.removeFromSelectedArray(this.slideDoc); + this.removeAllRecordingInOverlay(); + }), + 'Remove doc from pres trail' + ); + + // set title of the individual pres slide + onSetValue = undoable( + action((value: string) => { + this.slideDoc.title = !value.trim().length ? '-untitled-' : value; + return true; + }), + 'set title of pres element' + ); /** * Method called for updating the view of the currently selected document @@ -294,7 +303,6 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { * @param activeItem */ @undoBatch - @action updateCapturedContainerLayout = (presTargetDoc: Doc, activeItem: Doc) => { const targetDoc = DocCast(presTargetDoc.annotationOn) ?? presTargetDoc; activeItem.config_x = NumCast(targetDoc.x); @@ -306,130 +314,99 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { // activeItem.config_pinLayout = true; }; - //wait i dont think i have to do anything here since by default it'll revert to the previously saved if I don't save - //so basically, don't have an onClick for this, just let it do nada for now - @undoBatch - @action - revertToPreviouslySaved = (presTargetDoc: Doc, activeItem: Doc) => { - const target = DocCast(activeItem.annotationOn) ?? activeItem; - PresBox.reversePin(activeItem, target); - }; - /** * Method called for updating the view of the currently selected document * * @param presTargetDoc * @param activeItem */ - @undoBatch - @action - updateCapturedViewContents = (presTargetDoc: Doc, activeItem: Doc) => { - const target = DocCast(presTargetDoc.annotationOn) ?? presTargetDoc; - PresBox.pinDocView(activeItem, { pinData: PresBox.pinDataTypes(target) }, target); - }; - - @computed get recordingIsInOverlay() { - return DocListCast(Doc.MyOverlayDocs.data).some(doc => doc.slides === this.rootDoc); - } + updateCapturedViewContents = undoable( + action((presTargetDoc: Doc, activeItem: Doc) => { + const target = DocCast(presTargetDoc.annotationOn) ?? presTargetDoc; + PresBox.pinDocView(activeItem, { pinData: PresBox.pinDataTypes(target) }, target); + }), + 'updated captured view contents' + ); // a previously recorded video will have timecode defined - static videoIsRecorded = (activeItem: Opt<Doc>) => { - const casted = Cast(activeItem?.recording, Doc, null); - return casted && 'layout_currentTimecode' in casted; - }; + static videoIsRecorded = (activeItem: Opt<Doc>) => 'layout_currentTimecode' in (DocCast(activeItem?.recording) ?? {}); - removeAllRecordingInOverlay = () => { - DocListCast(Doc.MyOverlayDocs.data) - .filter(doc => doc.slides === this.rootDoc) - .forEach(Doc.RemFromMyOverlay); - }; + removeAllRecordingInOverlay = () => Doc.MyOverlayDocs.filter(doc => doc.slides === this.slideDoc).forEach(Doc.RemFromMyOverlay); + /// remove all videos that have been recorded from overlay (leave videso that are being recorded to avoid losing data) static removeEveryExistingRecordingInOverlay = () => { - // Remove every recording that already exists in overlay view - DocListCast(Doc.MyOverlayDocs.data).forEach(doc => { - if (doc.slides !== null) { - // if it's a recording video, don't remove from overlay (user can lose data) - if (PresElementBox.videoIsRecorded(DocCast(doc.slides))) { - Doc.RemFromMyOverlay(doc); - } - } - }); - }; - - @undoBatch - @action - hideRecording = (e: React.MouseEvent, iconClick: boolean = false) => { - e.stopPropagation(); - this.removeAllRecordingInOverlay(); - // if (iconClick) PresElementBox.showVideo = false; - }; - - @undoBatch - @action - showRecording = (activeItem: Doc, iconClick: boolean = false) => { - // remove the overlays on switch *IF* not opened from the specific icon - if (!iconClick) PresElementBox.removeEveryExistingRecordingInOverlay(); - - if (activeItem.recording) { - Doc.AddToMyOverlay(DocCast(activeItem.recording)); - } + Doc.MyOverlayDocs.filter(doc => doc.slides !== null && PresElementBox.videoIsRecorded(DocCast(doc.slides))) // + .forEach(Doc.RemFromMyOverlay); }; - @undoBatch - @action - startRecording = (e: React.MouseEvent, activeItem: Doc) => { - e.stopPropagation(); - if (PresElementBox.videoIsRecorded(activeItem)) { - // if we already have an existing recording - this.showRecording(activeItem, true); - // // if we already have an existing recording - // Doc.AddToMyOverlay(Cast(activeItem.recording, Doc, null)); - } else { - // Remove every recording that already exists in overlay view - // this is a design decision to clear to focus in on the recoding mode - PresElementBox.removeEveryExistingRecordingInOverlay(); - - // if we dont have any recording - const recording = Docs.Create.WebCamDocument('', { - _width: 384, - _height: 216, - layout_hideDocumentButtonBar: true, - layout_hideDecorationTitle: true, - layout_hideOpenButton: true, - // hideDeleteButton: true, - cloneFieldFilter: new List<string>(['isSystem']), - }); - - // attach the recording to the slide, and attach the slide to the recording - recording.slides = activeItem; - activeItem.recording = recording; - - // make recording box appear in the bottom right corner of the screen - recording.overlayX = window.innerWidth - recording[Width]() - 20; - recording.overlayY = window.innerHeight - recording[Height]() - 20; - Doc.AddToMyOverlay(recording); - } - }; + hideRecording = undoable( + action((e: React.MouseEvent, iconClick: boolean = false) => { + e.stopPropagation(); + this.removeAllRecordingInOverlay(); + }), + 'hide video recording' + ); + + showRecording = undoable( + action((activeItem: Doc, iconClick: boolean = false) => { + // remove the overlays on switch *IF* not opened from the specific icon + if (!iconClick) PresElementBox.removeEveryExistingRecordingInOverlay(); + + activeItem.recording && Doc.AddToMyOverlay(DocCast(activeItem.recording)); + }), + 'show video recording' + ); + + startRecording = undoable( + action((e: React.MouseEvent, activeItem: Doc) => { + e.stopPropagation(); + if (PresElementBox.videoIsRecorded(activeItem)) { + // if we already have an existing recording + this.showRecording(activeItem, true); + // // if we already have an existing recording + // Doc.AddToMyOverlay(Cast(activeItem.recording, Doc, null)); + } else { + // we dont have any recording + // Remove every recording that already exists in overlay view + // this is a design decision to clear to focus in on the recoding mode + PresElementBox.removeEveryExistingRecordingInOverlay(); + + // create and add a recording to the slide + // make recording box appear in the bottom right corner of the screen + Doc.AddToMyOverlay( + (activeItem.recording = Docs.Create.WebCamDocument('', { + _width: 384, + _height: 216, + overlayX: window.innerWidth - 384 - 20, + overlayY: window.innerHeight - 216 - 20, + layout_hideDocumentButtonBar: true, + layout_hideDecorationTitle: true, + layout_hideOpenButton: true, + cloneFieldFilter: new List<string>(['isSystem']), + slides: activeItem, // attach the slide to the recording + })) + ); + } + }), + 'start video recording' + ); @undoBatch - @action lfg = (e: React.MouseEvent) => { e.stopPropagation(); // TODO: fix this bug - const { toggleChildrenRun } = this.rootDoc; - TreeView.ToggleChildrenRun.get(this.rootDoc)?.(); + const { toggleChildrenRun } = this.slideDoc; + TreeView.ToggleChildrenRun.get(this.slideDoc)?.(); - // call this.rootDoc.recurChildren() to get all the children + // call this.slideDoc.recurChildren() to get all the children // if (iconClick) PresElementBox.showVideo = false; }; @computed get toolbarWidth(): number { const presBoxDocView = DocumentManager.Instance.getDocumentView(this.presBox); - let width: number = NumCast(this.presBox?._width); - if (presBoxDocView) width = presBoxDocView.props.PanelWidth(); - if (width === 0) width = 300; - return width; + const width = NumCast(this.presBox?._width); + return presBoxDocView ? presBoxDocView._props.PanelWidth() : width ? width : 300; } // GPT @@ -439,8 +416,8 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { const presBoxColor = StrCast(presBox?._backgroundColor); const presColorBool = presBoxColor ? presBoxColor !== Colors.WHITE && presBoxColor !== 'transparent' : false; const targetDoc = this.targetDoc; - const activeItem = this.rootDoc; - const hasChildren = BoolCast(this.rootDoc?.hasChildren); + const activeItem = this.slideDoc; + const hasChildren = BoolCast(this.slideDoc?.hasChildren); const items: JSX.Element[] = []; @@ -465,9 +442,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { </Tooltip> ); items.push( - <Tooltip key="slash" title={<div className="dash-tooltip">{this.recordingIsInOverlay ? 'Hide Recording' : `${PresElementBox.videoIsRecorded(activeItem) ? 'Show' : 'Start'} recording`}</div>}> - <div className="slideButton" onClick={e => (this.recordingIsInOverlay ? this.hideRecording(e, true) : this.startRecording(e, activeItem))} style={{ fontWeight: 700 }}> - <FontAwesomeIcon icon={`video${this.recordingIsInOverlay ? '-slash' : ''}`} onPointerDown={e => e.stopPropagation()} /> + <Tooltip key="slash" title={<div className="dash-tooltip">{this.videoRecordingIsInOverlay ? 'Hide Recording' : `${PresElementBox.videoIsRecorded(activeItem) ? 'Show' : 'Start'} recording`}</div>}> + <div className="slideButton" onClick={e => (this.videoRecordingIsInOverlay ? this.hideRecording(e, true) : this.startRecording(e, activeItem))} style={{ fontWeight: 700 }}> + <FontAwesomeIcon icon={`video${this.videoRecordingIsInOverlay ? '-slash' : ''}`} onPointerDown={e => e.stopPropagation()} /> </div> </Tooltip> ); @@ -480,8 +457,8 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { {!activeItem.presentation_groupWithUp ? 'Not grouped with previous slide (click to group)' : activeItem.presentation_groupWithUp === 1 - ? 'Run simultaneously with previous slide (click again to run after)' - : 'Run after previous slide (click to ungroup from previous)'} + ? 'Run simultaneously with previous slide (click again to run after)' + : 'Run after previous slide (click to ungroup from previous)'} </div> }> <div @@ -503,14 +480,14 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { ); } items.push( - <Tooltip key="eye" title={<div className="dash-tooltip">{this.rootDoc.presentation_expandInlineButton ? 'Minimize' : 'Expand'}</div>}> + <Tooltip key="eye" title={<div className="dash-tooltip">{this.slideDoc.presentation_expandInlineButton ? 'Minimize' : 'Expand'}</div>}> <div className="slideButton" onClick={e => { e.stopPropagation(); this.presExpandDocumentClick(); }}> - <FontAwesomeIcon icon={this.rootDoc.presentation_expandInlineButton ? 'eye-slash' : 'eye'} onPointerDown={e => e.stopPropagation()} /> + <FontAwesomeIcon icon={this.slideDoc.presentation_expandInlineButton ? 'eye-slash' : 'eye'} onPointerDown={e => e.stopPropagation()} /> </div> </Tooltip> ); @@ -554,30 +531,30 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { } @computed get mainItem() { - const isSelected: boolean = this.selectedArray?.has(this.rootDoc) ? true : false; + const isSelected: boolean = this.selectedArray?.has(this.slideDoc) ? true : false; const isCurrent: boolean = this.presBox?._itemIndex === this.indexInPres; const miniView: boolean = this.toolbarWidth <= 110; const presBox = this.presBox; //presBox const presBoxColor: string = StrCast(presBox?._backgroundColor); const presColorBool: boolean = presBoxColor ? presBoxColor !== Colors.WHITE && presBoxColor !== 'transparent' : false; - const activeItem: Doc = this.rootDoc; + const activeItem: Doc = this.slideDoc; return ( <div - className={`presItem-container`} - key={this.props.Document[Id] + this.indexInPres} + className="presItem-container" + key={this.slideDoc[Id] + this.indexInPres} ref={this._itemRef} style={{ backgroundColor: presColorBool ? (isSelected ? 'rgba(250,250,250,0.3)' : 'transparent') : isSelected ? Colors.LIGHT_BLUE : 'transparent', opacity: this._dragging ? 0.3 : 1, - paddingLeft: NumCast(this.layoutDoc._xPadding, this.props.xPadding), - paddingRight: NumCast(this.layoutDoc._xPadding, this.props.xPadding), - paddingTop: NumCast(this.layoutDoc._yPadding, this.props.yPadding), - paddingBottom: NumCast(this.layoutDoc._yPadding, this.props.yPadding), + paddingLeft: NumCast(this.layoutDoc._xPadding, this._props.xPadding), + paddingRight: NumCast(this.layoutDoc._xPadding, this._props.xPadding), + paddingTop: NumCast(this.layoutDoc._yPadding, this._props.yPadding), + paddingBottom: NumCast(this.layoutDoc._yPadding, this._props.yPadding), }} onDoubleClick={action(e => { this.toggleProperties(); - this.presBoxView?.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, false); + this.presBoxView?.regularSelect(this.slideDoc, this._itemRef.current!, this._dragRef.current!, false); })} onPointerOver={this.onPointerOver} onPointerLeave={this.onPointerLeave} @@ -589,10 +566,10 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { ) : ( <div ref={this._dragRef} - className={`presItem-slide ${isCurrent ? 'active' : ''}${this.rootDoc.runProcess ? ' testingv2' : ''}`} + className={`presItem-slide ${isCurrent ? 'active' : ''}${this.slideDoc.runProcess ? ' testingv2' : ''}`} style={{ display: 'infline-block', - backgroundColor: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor), + backgroundColor: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor), //layout_boxShadow: presBoxColor && presBoxColor !== 'white' && presBoxColor !== 'transparent' ? (isCurrent ? '0 0 0px 1.5px' + presBoxColor : undefined) : undefined, border: presBoxColor && presBoxColor !== 'white' && presBoxColor !== 'transparent' ? (isCurrent ? presBoxColor + ' solid 2.5px' : undefined) : undefined, }}> @@ -601,7 +578,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { style={{ display: 'inline-flex', pointerEvents: isSelected ? undefined : 'none', - width: `calc(100% ${this.rootDoc.presentation_expandInlineButton ? '- 50%' : ''} - ${this.presButtons.length * 22}px`, + width: `calc(100% ${this.slideDoc.presentation_expandInlineButton ? '- 50%' : ''} - ${this.presButtons.length * 22}px`, cursor: isSelected ? 'text' : 'grab', }}> <div @@ -629,6 +606,6 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { } render() { - return !(this.rootDoc instanceof Doc) || this.targetDoc instanceof Promise ? null : this.mainItem; + return !(this.slideDoc instanceof Doc) || this.targetDoc instanceof Promise ? null : this.mainItem; } } diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx index 18cf633f4..d0688c338 100644 --- a/src/client/views/pdf/AnchorMenu.tsx +++ b/src/client/views/pdf/AnchorMenu.tsx @@ -1,12 +1,12 @@ -import React = require('react'); import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { ColorPicker, Group, IconButton, Popup, Size, Toggle, ToggleType, Type } from 'browndash-components'; -import { action, computed, IReactionDisposer, observable, ObservableMap, reaction } from 'mobx'; +import { IReactionDisposer, ObservableMap, action, computed, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; -import { ColorState } from 'react-color'; +import * as React from 'react'; +import { ColorResult } from 'react-color'; +import { Utils, returnFalse, setupMoveUpEvents, unimplementedFunction } from '../../../Utils'; import { Doc, Opt } from '../../../fields/Doc'; -import { returnFalse, setupMoveUpEvents, unimplementedFunction, Utils } from '../../../Utils'; -import { gptAPICall, GPTCallType } from '../../apis/gpt/GPT'; +import { GPTCallType, gptAPICall } from '../../apis/gpt/GPT'; import { DocumentType } from '../../documents/DocumentTypes'; import { SelectionManager } from '../../util/SelectionManager'; import { SettingsManager } from '../../util/SettingsManager'; @@ -23,6 +23,13 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> { private _commentRef = React.createRef<HTMLDivElement>(); private _cropRef = React.createRef<HTMLDivElement>(); + constructor(props: any) { + super(props); + makeObservable(this); + AnchorMenu.Instance = this; + AnchorMenu.Instance._canFade = false; + } + @observable private highlightColor: string = 'rgba(245, 230, 95, 0.616)'; @observable public Status: 'marquee' | 'annotation' | '' = ''; @@ -50,21 +57,14 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> { return this._left > 0; } - constructor(props: Readonly<{}>) { - super(props); - - AnchorMenu.Instance = this; - AnchorMenu.Instance._canFade = false; - } - componentWillUnmount() { this._disposer?.(); } componentDidMount() { this._disposer = reaction( - () => SelectionManager.Views().slice(), - selected => AnchorMenu.Instance.fadeOut(true) + () => SelectionManager.Views.slice(), + sel => AnchorMenu.Instance.fadeOut(true) ); } @@ -139,13 +139,10 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> { } @action changeHighlightColor = (color: string) => { - const col: ColorState = { + const col: ColorResult = { hex: color, - hsl: { a: 0, h: 0, s: 0, l: 0, source: '' }, - hsv: { a: 0, h: 0, s: 0, v: 0, source: '' }, - rgb: { a: 0, r: 0, b: 0, g: 0, source: '' }, - oldHue: 0, - source: '', + hsl: { a: 0, h: 0, s: 0, l: 0 }, + rgb: { a: 0, r: 0, b: 0, g: 0 }, }; this.highlightColor = Utils.colorString(col); }; @@ -155,7 +152,7 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> { * all selected text available to summarize but its only supported for pdf and web ATM. * @returns Whether the GPT icon for summarization should appear */ - canSummarize = () => SelectionManager.Docs().some(doc => [DocumentType.PDF, DocumentType.WEB].includes(doc.type as any)); + canSummarize = () => SelectionManager.Docs.some(doc => [DocumentType.PDF, DocumentType.WEB].includes(doc.type as any)); render() { const buttons = diff --git a/src/client/views/pdf/Annotation.tsx b/src/client/views/pdf/Annotation.tsx index 52904b852..a1f5ce703 100644 --- a/src/client/views/pdf/Annotation.tsx +++ b/src/client/views/pdf/Annotation.tsx @@ -1,32 +1,37 @@ -import React = require('react'); -import { action, computed } from 'mobx'; +import { action, computed, makeObservable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { Doc, DocListCast, Opt } from '../../../fields/Doc'; import { Id } from '../../../fields/FieldSymbols'; import { List } from '../../../fields/List'; import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../../fields/Types'; import { LinkFollower } from '../../util/LinkFollower'; +import { LinkManager } from '../../util/LinkManager'; import { undoBatch } from '../../util/UndoManager'; import { OpenWhere } from '../nodes/DocumentView'; import { FieldViewProps } from '../nodes/FieldView'; import { AnchorMenu } from './AnchorMenu'; import './Annotation.scss'; -import { LinkManager } from '../../util/LinkManager'; +import { ObservableReactComponent } from '../ObservableReactComponent'; interface IAnnotationProps extends FieldViewProps { anno: Doc; dataDoc: Doc; fieldKey: string; - showInfo: (anno: Opt<Doc>) => void; + showInfo?: (anno: Opt<Doc>) => void; pointerEvents?: () => Opt<string>; } @observer -export class Annotation extends React.Component<IAnnotationProps> { +export class Annotation extends ObservableReactComponent<IAnnotationProps> { + constructor(props: any) { + super(props); + makeObservable(this); + } render() { return ( - <div style={{ display: this.props.anno.textCopied && !Doc.isBrushedHighlightedDegree(this.props.anno) ? 'none' : undefined }}> - {DocListCast(this.props.anno.text_inlineAnnotations).map(a => ( - <RegionAnnotation pointerEvents={this.props.pointerEvents} {...this.props} document={a} key={a[Id]} /> + <div style={{ display: this._props.anno.textCopied && !Doc.GetBrushHighlightStatus(this._props.anno) ? 'none' : undefined }}> + {DocListCast(this._props.anno.text_inlineAnnotations).map(a => ( + <RegionAnnotation pointerEvents={this._props.pointerEvents} {...this._props} document={a} key={a[Id]} /> ))} </div> ); @@ -38,23 +43,23 @@ interface IRegionAnnotationProps extends IAnnotationProps { pointerEvents?: () => Opt<string>; } @observer -class RegionAnnotation extends React.Component<IRegionAnnotationProps> { +class RegionAnnotation extends ObservableReactComponent<IRegionAnnotationProps> { private _mainCont: React.RefObject<HTMLDivElement> = React.createRef(); @computed get annoTextRegion() { - return Cast(this.props.document.annoTextRegion, Doc, null) || this.props.document; + return Cast(this._props.document.annoTextRegion, Doc, null) || this._props.document; } @undoBatch deleteAnnotation = () => { - const docAnnotations = DocListCast(this.props.dataDoc[this.props.fieldKey]); - this.props.dataDoc[this.props.fieldKey] = new List<Doc>(docAnnotations.filter(a => a !== this.annoTextRegion)); + const docAnnotations = DocListCast(this._props.dataDoc[this._props.fieldKey]); + this._props.dataDoc[this._props.fieldKey] = new List<Doc>(docAnnotations.filter(a => a !== this.annoTextRegion)); AnchorMenu.Instance.fadeOut(true); - this.props.select(false); + this._props.select(false); }; @undoBatch - pinToPres = () => this.props.pinToPres(this.annoTextRegion, {}); + pinToPres = () => this._props.pinToPres(this.annoTextRegion, {}); @undoBatch makeTargretToggle = () => (this.annoTextRegion.followLinkToggle = !this.annoTextRegion.followLinkToggle); @@ -65,22 +70,28 @@ class RegionAnnotation extends React.Component<IRegionAnnotationProps> { const trail = DocCast(anchor.presentationTrail); if (trail) { Doc.ActivePresentation = trail; - this.props.addDocTab(trail, OpenWhere.replaceRight); + this._props.addDocTab(trail, OpenWhere.replaceRight); } }; @action + onContextMenu = (e: React.MouseEvent) => { + AnchorMenu.Instance.Status = 'annotation'; + AnchorMenu.Instance.Delete = this.deleteAnnotation.bind(this); + AnchorMenu.Instance.Pinned = false; + AnchorMenu.Instance.PinToPres = this.pinToPres; + AnchorMenu.Instance.MakeTargetToggle = this.makeTargretToggle; + AnchorMenu.Instance.IsTargetToggler = this.isTargetToggler; + AnchorMenu.Instance.ShowTargetTrail = () => this.showTargetTrail(this.annoTextRegion); + AnchorMenu.Instance.jumpTo(e.clientX, e.clientY, true); + e.stopPropagation(); + e.preventDefault(); + }; + @action onPointerDown = (e: React.PointerEvent) => { if (e.button === 2 || e.ctrlKey) { - AnchorMenu.Instance.Status = 'annotation'; - AnchorMenu.Instance.Delete = this.deleteAnnotation.bind(this); - AnchorMenu.Instance.Pinned = false; - AnchorMenu.Instance.PinToPres = this.pinToPres; - AnchorMenu.Instance.MakeTargetToggle = this.makeTargretToggle; - AnchorMenu.Instance.IsTargetToggler = this.isTargetToggler; - AnchorMenu.Instance.ShowTargetTrail = () => this.showTargetTrail(this.annoTextRegion); - AnchorMenu.Instance.jumpTo(e.clientX, e.clientY, true); e.stopPropagation(); + e.preventDefault(); } else if (e.button === 0) { e.stopPropagation(); LinkFollower.FollowLink(undefined, this.annoTextRegion, false); @@ -88,36 +99,37 @@ class RegionAnnotation extends React.Component<IRegionAnnotationProps> { }; @computed get linkHighlighted() { - for (const link of LinkManager.Instance.getAllDirectLinks(this.props.document)) { - const a1 = LinkManager.getOppositeAnchor(link, this.props.document); - if (a1 && Doc.IsBrushedDegreeUnmemoized(DocCast(a1.annotationOn, this.props.document))) return true; + for (const link of LinkManager.Instance.getAllDirectLinks(this._props.document)) { + const a1 = LinkManager.getOppositeAnchor(link, this._props.document); + if (a1 && Doc.GetBrushStatus(DocCast(a1.annotationOn, this._props.document))) return true; } } render() { - const brushed = this.annoTextRegion && Doc.isBrushedHighlightedDegree(this.annoTextRegion); + const brushed = this.annoTextRegion && Doc.GetBrushHighlightStatus(this.annoTextRegion); return ( <div className="htmlAnnotation" ref={this._mainCont} onPointerEnter={action(() => { - Doc.BrushDoc(this.props.anno); - this.props.showInfo(this.props.anno); + Doc.BrushDoc(this._props.anno); + this._props.showInfo?.(this._props.anno); })} onPointerLeave={action(() => { - Doc.UnBrushDoc(this.props.anno); - this.props.showInfo(undefined); + Doc.UnBrushDoc(this._props.anno); + this._props.showInfo?.(undefined); })} onPointerDown={this.onPointerDown} + onContextMenu={this.onContextMenu} style={{ - left: NumCast(this.props.document.x), - top: NumCast(this.props.document.y), - width: NumCast(this.props.document._width), - height: NumCast(this.props.document._height), + left: NumCast(this._props.document.x), + top: NumCast(this._props.document.y), + width: NumCast(this._props.document._width), + height: NumCast(this._props.document._height), opacity: brushed === Doc.DocBrushStatus.highlighted ? 0.5 : undefined, - pointerEvents: this.props.pointerEvents?.() as any, + pointerEvents: this._props.pointerEvents?.() as any, outline: brushed === Doc.DocBrushStatus.unbrushed && this.linkHighlighted ? 'solid 1px lightBlue' : undefined, - backgroundColor: brushed === Doc.DocBrushStatus.highlighted ? 'orange' : StrCast(this.props.document.backgroundColor), + backgroundColor: brushed === Doc.DocBrushStatus.highlighted ? 'orange' : StrCast(this._props.document.backgroundColor), }} /> ); diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx index 9b754588a..42562986f 100644 --- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx +++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx @@ -1,19 +1,20 @@ -import React = require('react'); -import './GPTPopup.scss'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, observable } from 'mobx'; +import { Button, IconButton, Type } from 'browndash-components'; +import { action, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; +import { CgClose } from 'react-icons/cg'; import ReactLoading from 'react-loading'; -import Typist from 'react-typist'; +import { TypeAnimation } from 'react-type-animation'; +import { Utils } from '../../../../Utils'; import { Doc } from '../../../../fields/Doc'; -import { DocUtils, Docs } from '../../../documents/Documents'; -import { Button, IconButton, Type } from 'browndash-components'; import { NumCast, StrCast } from '../../../../fields/Types'; -import { CgClose } from 'react-icons/cg'; -import { AnchorMenu } from '../AnchorMenu'; -import { gptImageCall } from '../../../apis/gpt/GPT'; import { Networking } from '../../../Network'; -import { Utils } from '../../../../Utils'; +import { gptImageCall } from '../../../apis/gpt/GPT'; +import { DocUtils, Docs } from '../../../documents/Documents'; +import { ObservableReactComponent } from '../../ObservableReactComponent'; +import { AnchorMenu } from '../AnchorMenu'; +import './GPTPopup.scss'; export enum GPTPopupMode { SUMMARY, @@ -24,7 +25,7 @@ export enum GPTPopupMode { interface GPTPopupProps {} @observer -export class GPTPopup extends React.Component<GPTPopupProps> { +export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { static Instance: GPTPopup; @observable @@ -128,7 +129,7 @@ export class GPTPopup extends React.Component<GPTPopupProps> { } catch (err) { console.log(err); } - GPTPopup.Instance.setLoading(false); + this.setLoading(false); }; /** @@ -179,6 +180,7 @@ export class GPTPopup extends React.Component<GPTPopupProps> { constructor(props: GPTPopupProps) { super(props); + makeObservable(this); GPTPopup.Instance = this; } @@ -213,6 +215,31 @@ export class GPTPopup extends React.Component<GPTPopupProps> { ); }; + data = () => { + return ( + <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}> + {this.heading('GENERATED IMAGE')} + <div className="image-content-wrapper"> + {this.imgUrls.map(rawSrc => ( + <div className="img-wrapper"> + <div className="img-container"> + <img key={rawSrc[0]} src={rawSrc[0]} width={150} height={150} alt="dalle generation" /> + </div> + <div className="btn-container"> + <Button text="Save Image" onClick={() => this.transferToImage(rawSrc[1])} color={StrCast(Doc.UserDoc().userColor)} type={Type.TERT} /> + </div> + </div> + ))} + </div> + {!this.loading && ( + <> + <IconButton tooltip="Generate Again" onClick={this.generateImage} icon={<FontAwesomeIcon icon="redo-alt" size="lg" />} color={StrCast(Doc.UserDoc().userVariantColor)} /> + </> + )} + </div> + ); + }; + summaryBox = () => ( <> <div> @@ -220,17 +247,18 @@ export class GPTPopup extends React.Component<GPTPopupProps> { <div className="content-wrapper"> {!this.loading && (!this.done ? ( - <Typist - key={this.text} - avgTypingDelay={15} - cursor={{ hideWhenDone: true }} - onTypingDone={() => { - setTimeout(() => { - this.setDone(true); - }, 500); - }}> - {this.text} - </Typist> + <TypeAnimation + speed={50} + sequence={[ + this.text, + () => { + setTimeout(() => { + this.setDone(true); + }, 500); + }, + ]} + //cursor={{ hideWhenDone: true }} + /> ) : ( this.text ))} diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss index cfe07f6cb..d3dd9f727 100644 --- a/src/client/views/pdf/PDFViewer.scss +++ b/src/client/views/pdf/PDFViewer.scss @@ -52,6 +52,7 @@ .textLayer { pointer-events: all; user-select: text; + z-index: 0; } } diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 939928c1c..0d4cfda88 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -1,43 +1,40 @@ -import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from 'mobx'; +import { action, computed, IReactionDisposer, makeObservable, observable, ObservableMap, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as Pdfjs from 'pdfjs-dist'; import 'pdfjs-dist/web/pdf_viewer.css'; -import { Doc, DocListCast, Field, Opt } from '../../../fields/Doc'; +import * as PDFJSViewer from 'pdfjs-dist/web/pdf_viewer.mjs'; +import * as React from 'react'; +import { Doc, DocListCast, Opt } from '../../../fields/Doc'; import { Height } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; import { InkTool } from '../../../fields/InkField'; import { Cast, NumCast, StrCast } from '../../../fields/Types'; import { TraceMobx } from '../../../fields/util'; -import { addStyleSheet, addStyleSheetRule, clearStyleSheetRules, emptyFunction, returnAll, returnFalse, returnNone, returnTrue, returnZero, smoothScroll, Utils } from '../../../Utils'; +import { addStyleSheet, addStyleSheetRule, clearStyleSheetRules, emptyFunction, returnAll, returnFalse, returnNone, returnZero, smoothScroll, Utils } from '../../../Utils'; import { DocUtils } from '../../documents/Documents'; -import { DragManager } from '../../util/DragManager'; import { SelectionManager } from '../../util/SelectionManager'; -import { SharingManager } from '../../util/SharingManager'; import { SnappingManager } from '../../util/SnappingManager'; import { MarqueeOptionsMenu } from '../collections/collectionFreeForm'; import { CollectionFreeFormView } from '../collections/collectionFreeForm/CollectionFreeFormView'; import { MarqueeAnnotator } from '../MarqueeAnnotator'; -import { DocFocusOptions, DocumentViewProps } from '../nodes/DocumentView'; -import { FieldViewProps } from '../nodes/FieldView'; -import { LinkDocPreview } from '../nodes/LinkDocPreview'; +import { FocusViewOptions, FieldViewProps } from '../nodes/FieldView'; +import { LinkInfo } from '../nodes/LinkDocPreview'; +import { PDFBox } from '../nodes/PDFBox'; +import { ObservableReactComponent } from '../ObservableReactComponent'; import { StyleProp } from '../StyleProvider'; import { AnchorMenu } from './AnchorMenu'; import { Annotation } from './Annotation'; -import './PDFViewer.scss'; -import React = require('react'); import { GPTPopup } from './GPTPopup/GPTPopup'; -import { InkingStroke } from '../InkingStroke'; -const PDFJSViewer = require('pdfjs-dist/web/pdf_viewer'); -const pdfjsLib = require('pdfjs-dist'); +import './PDFViewer.scss'; const _global = (window /* browser */ || global) /* node */ as any; //pdfjsLib.GlobalWorkerOptions.workerSrc = `/assets/pdf.worker.js`; // The workerSrc property shall be specified. -pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://unpkg.com/pdfjs-dist@2.16.105/build/pdf.worker.js'; +Pdfjs.GlobalWorkerOptions.workerSrc = 'https://unpkg.com/pdfjs-dist@4.0.379/build/pdf.worker.mjs'; interface IViewerProps extends FieldViewProps { + pdfBox: PDFBox; Document: Doc; - rootDoc: Doc; dataDoc: Doc; layoutDoc: Doc; fieldKey: string; @@ -54,21 +51,25 @@ interface IViewerProps extends FieldViewProps { * Handles rendering and virtualization of the pdf */ @observer -export class PDFViewer extends React.Component<IViewerProps> { +export class PDFViewer extends ObservableReactComponent<IViewerProps> { static _annotationStyle: any = addStyleSheet(); - @observable private _pageSizes: { width: number; height: number }[] = []; - @observable private _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>(); - @observable private _marqueeing: number[] | undefined; - @observable private _textSelecting = true; - @observable private _showWaiting = true; - @observable private _overlayAnnoInfo: Opt<Doc>; - @observable private Index: number = -1; + + constructor(props: IViewerProps) { + super(props); + makeObservable(this); + } + + @observable _pageSizes: { width: number; height: number }[] = []; + @observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>(); + @observable _textSelecting = true; + @observable _showWaiting = true; + @observable Index: number = -1; private _pdfViewer: any; private _styleRule: any; // stylesheet rule for making hyperlinks clickable private _retries = 0; // number of times tried to create the PDF viewer private _setPreviewCursor: undefined | ((x: number, y: number, drag: boolean, hide: boolean, doc: Opt<Doc>) => void); - private _setBrushViewer: undefined | ((view: { width: number; height: number; panX: number; panY: number }, transTime: number) => void); + private _marqueeref = React.createRef<MarqueeAnnotator>(); private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef(); private _disposers: { [name: string]: IReactionDisposer } = {}; private _viewer: React.RefObject<HTMLDivElement> = React.createRef(); @@ -90,44 +91,38 @@ export class PDFViewer extends React.Component<IViewerProps> { @observable isAnnotating = false; // key where data is stored @computed get allAnnotations() { - return DocUtils.FilterDocs(DocListCast(this.props.dataDoc[this.props.fieldKey + '_annotations']), this.props.childFilters(), this.props.childFiltersByRanges()); + return DocUtils.FilterDocs(DocListCast(this._props.dataDoc[this._props.fieldKey + '_annotations']), this._props.childFilters(), this._props.childFiltersByRanges()); } @computed get inlineTextAnnotations() { return this.allAnnotations.filter(a => a.text_inlineAnnotations); } - componentDidMount = async () => { + componentDidMount() { runInAction(() => (this._showWaiting = true)); this.setupPdfJsViewer(); this._mainCont.current?.addEventListener('scroll', e => ((e.target as any).scrollLeft = 0)); this._disposers.layout_autoHeight = reaction( - () => this.props.layoutDoc._layout_autoHeight, + () => this._props.layoutDoc._layout_autoHeight, layout_autoHeight => { if (layout_autoHeight) { - this.props.layoutDoc._nativeHeight = NumCast(this.props.Document[this.props.fieldKey + '_nativeHeight']); - this.props.setHeight?.(NumCast(this.props.Document[this.props.fieldKey + '_nativeHeight']) * (this.props.NativeDimScaling?.() || 1)); + this._props.layoutDoc._nativeHeight = NumCast(this._props.Document[this._props.fieldKey + '_nativeHeight']); + this._props.setHeight?.(NumCast(this._props.Document[this._props.fieldKey + '_nativeHeight']) * (this._props.NativeDimScaling?.() || 1)); } } ); this._disposers.selected = reaction( - () => this.props.isSelected(), - selected => { - // if (!selected) { - // Array.from(this._savedAnnotations.values()).forEach(v => v.forEach(a => a.remove())); - // Array.from(this._savedAnnotations.keys()).forEach(k => this._savedAnnotations.set(k, [])); - // } - SelectionManager.Views().length === 1 && this.setupPdfJsViewer(); - }, + () => this._props.isSelected(), + selected => SelectionManager.Views.length === 1 && this.setupPdfJsViewer(), { fireImmediately: true } ); this._disposers.curPage = reaction( - () => Cast(this.props.Document._layout_curPage, 'number', null), + () => Cast(this._props.Document._layout_curPage, 'number', null), page => page !== undefined && page !== this._pdfViewer?.currentPageNumber && this.gotoPage(page), { fireImmediately: true } ); - }; + } componentWillUnmount = () => { Object.values(this._disposers).forEach(disposer => disposer?.()); @@ -135,7 +130,7 @@ export class PDFViewer extends React.Component<IViewerProps> { }; copy = (e: ClipboardEvent) => { - if (this.props.isContentActive() && e.clipboardData) { + if (this._props.isContentActive() && e.clipboardData) { e.clipboardData.setData('text/plain', this._selectionText); const anchor = this._getAnchor(undefined, false); if (anchor) { @@ -151,18 +146,18 @@ export class PDFViewer extends React.Component<IViewerProps> { @action initialLoad = async () => { if (this._pageSizes.length === 0) { - this._pageSizes = Array<{ width: number; height: number }>(this.props.pdf.numPages); + this._pageSizes = Array<{ width: number; height: number }>(this._props.pdf.numPages); await Promise.all( this._pageSizes.map((val, i) => - this.props.pdf.getPage(i + 1).then( + this._props.pdf.getPage(i + 1).then( action((page: Pdfjs.PDFPageProxy) => { const page0or180 = page.rotate === 0 || page.rotate === 180; this._pageSizes.splice(i, 1, { width: page.view[page0or180 ? 2 : 3] - page.view[page0or180 ? 0 : 1], height: page.view[page0or180 ? 3 : 2] - page.view[page0or180 ? 1 : 0], }); - if (i === this.props.pdf.numPages - 1) { - this.props.loaded?.(page.view[page0or180 ? 2 : 3] - page.view[page0or180 ? 0 : 1], page.view[page0or180 ? 3 : 2] - page.view[page0or180 ? 1 : 0], this.props.pdf.numPages); + if (i === this._props.pdf.numPages - 1) { + this._props.loaded?.(page.view[page0or180 ? 2 : 3] - page.view[page0or180 ? 0 : 1], page.view[page0or180 ? 3 : 2] - page.view[page0or180 ? 1 : 0], this._props.pdf.numPages); } }) ) @@ -176,31 +171,30 @@ export class PDFViewer extends React.Component<IViewerProps> { // scrolls to focus on a nested annotation document. if this is part a link preview then it will jump to the scroll location, // otherwise it will scroll smoothly. - scrollFocus = (doc: Doc, scrollTop: number, options: DocFocusOptions) => { + scrollFocus = (doc: Doc, scrollTop: number, options: FocusViewOptions) => { const mainCont = this._mainCont.current; let focusSpeed: Opt<number>; - if (doc !== this.props.rootDoc && mainCont) { - const windowHeight = this.props.PanelHeight() / (this.props.NativeDimScaling?.() || 1); - const scrollTo = Utils.scrollIntoView(scrollTop, doc[Height](), NumCast(this.props.layoutDoc._layout_scrollTop), windowHeight, windowHeight * 0.1, this._scrollHeight); - if (scrollTo !== undefined && scrollTo !== this.props.layoutDoc._layout_scrollTop) { + if (doc !== this._props.Document && mainCont) { + const windowHeight = this._props.PanelHeight() / (this._props.NativeDimScaling?.() || 1); + const scrollTo = Utils.scrollIntoView(scrollTop, doc[Height](), NumCast(this._props.layoutDoc._layout_scrollTop), windowHeight, windowHeight * 0.1, this._scrollHeight); + if (scrollTo !== undefined && scrollTo !== this._props.layoutDoc._layout_scrollTop) { if (!this._pdfViewer) this._initialScroll = { loc: scrollTo, easeFunc: options.easeFunc }; else if (!options.instant) this._scrollStopper = smoothScroll((focusSpeed = options.zoomTime ?? 500), mainCont, scrollTo, options.easeFunc, this._scrollStopper); else this._mainCont.current?.scrollTo({ top: Math.abs(scrollTo || 0) }); } } else { - this._initialScroll = { loc: NumCast(this.props.layoutDoc._layout_scrollTop), easeFunc: options.easeFunc }; + this._initialScroll = { loc: NumCast(this._props.layoutDoc._layout_scrollTop), easeFunc: options.easeFunc }; } return focusSpeed; }; - crop = (region: Doc | undefined, addCrop?: boolean) => this.props.crop(region, addCrop); - brushView = (view: { width: number; height: number; panX: number; panY: number }, transTime: number) => this._setBrushViewer?.(view, transTime); + crop = (region: Doc | undefined, addCrop?: boolean) => this._props.crop(region, addCrop); @action setupPdfJsViewer = async () => { if (this._viewerIsSetup) return; this._viewerIsSetup = true; this._showWaiting = true; - this.props.setPdfViewer(this); + this._props.setPdfViewer(this); await this.initialLoad(); this.createPdfViewer(); @@ -208,22 +202,22 @@ export class PDFViewer extends React.Component<IViewerProps> { pagesinit = () => { if (this._pdfViewer._setDocumentViewerElement?.offsetParent) { - runInAction(() => (this._pdfViewer.currentScaleValue = this.props.layoutDoc._freeform_scale = 1)); - this.gotoPage(NumCast(this.props.Document._layout_curPage, 1)); + runInAction(() => (this._pdfViewer.currentScaleValue = this._props.layoutDoc._freeform_scale = 1)); + this.gotoPage(NumCast(this._props.Document._layout_curPage, 1)); } document.removeEventListener('pagesinit', this.pagesinit); var quickScroll: { loc?: string; easeFunc?: 'ease' | 'linear' } | undefined = { loc: this._initialScroll ? this._initialScroll.loc?.toString() : '', easeFunc: this._initialScroll ? this._initialScroll.easeFunc : undefined }; this._disposers.scale = reaction( - () => NumCast(this.props.layoutDoc._freeform_scale, 1), + () => NumCast(this._props.layoutDoc._freeform_scale, 1), scale => (this._pdfViewer.currentScaleValue = scale), { fireImmediately: true } ); this._disposers.scroll = reaction( - () => Math.abs(NumCast(this.props.Document._layout_scrollTop)), + () => Math.abs(NumCast(this._props.Document._layout_scrollTop)), pos => { if (!this._ignoreScroll) { this._showWaiting && this.setupPdfJsViewer(); - const viewTrans = quickScroll?.loc ?? StrCast(this.props.Document._viewTransition); + const viewTrans = quickScroll?.loc ?? StrCast(this._props.Document._viewTransition); const durationMiliStr = viewTrans.match(/([0-9]*)ms/); const durationSecStr = viewTrans.match(/([0-9.]*)s/); const duration = durationMiliStr ? Number(durationMiliStr[1]) : durationSecStr ? Number(durationSecStr[1]) * 1000 : 0; @@ -264,7 +258,7 @@ export class PDFViewer extends React.Component<IViewerProps> { } document.removeEventListener('copy', this.copy); document.addEventListener('copy', this.copy); - const eventBus = new PDFJSViewer.EventBus(true); + const eventBus = new PDFJSViewer.EventBus(); eventBus._on('pagesinit', this.pagesinit); eventBus._on( 'pagerendered', @@ -274,15 +268,14 @@ export class PDFViewer extends React.Component<IViewerProps> { const pdfFindController = new PDFJSViewer.PDFFindController({ linkService: pdfLinkService, eventBus }); this._pdfViewer = new PDFJSViewer.PDFViewer({ container: this._mainCont.current, - viewer: this._viewer.current, + viewer: this._viewer.current || undefined, linkService: pdfLinkService, findController: pdfFindController, - renderer: 'canvas', eventBus, }); pdfLinkService.setViewer(this._pdfViewer); - pdfLinkService.setDocument(this.props.pdf, null); - this._pdfViewer.setDocument(this.props.pdf); + pdfLinkService.setDocument(this._props.pdf, null); + this._pdfViewer.setDocument(this._props.pdf); } @action @@ -310,18 +303,18 @@ export class PDFViewer extends React.Component<IViewerProps> { } }; - @observable private _scrollTimer: any; + @observable private _scrollTimer: any = undefined; onScroll = (e: React.UIEvent<HTMLElement>) => { if (this._mainCont.current && !this._forcedScroll) { this._ignoreScroll = true; // the pdf scrolled, so we need to tell the Doc to scroll but we don't want the doc to then try to set the PDF scroll pos (which would interfere with the smooth scroll animation) - if (!LinkDocPreview.LinkInfo) { - this.props.layoutDoc._layout_scrollTop = this._mainCont.current.scrollTop; + if (!LinkInfo.Instance?.LinkInfo) { + this._props.layoutDoc._layout_scrollTop = this._mainCont.current.scrollTop; } this._ignoreScroll = false; if (this._scrollTimer) clearTimeout(this._scrollTimer); // wait until a scrolling pause, then create an anchor to audio this._scrollTimer = setTimeout(() => { - DocUtils.MakeLinkToActiveAudio(() => this.props.DocumentView?.().ComponentView?.getAnchor!(true)!, false); + DocUtils.MakeLinkToActiveAudio(() => this._props.pdfBox.getAnchor(true)!, false); this._scrollTimer = undefined; }, 200); } @@ -371,24 +364,21 @@ export class PDFViewer extends React.Component<IViewerProps> { // if alt+left click, drag and annotate this._downX = e.clientX; this._downY = e.clientY; - if ((this.props.Document._freeform_scale || 1) !== 1) return; - if ((e.button !== 0 || e.altKey) && this.props.isContentActive(true)) { - this._setPreviewCursor?.(e.clientX, e.clientY, true, false, this.props.Document); + if ((this._props.Document._freeform_scale || 1) !== 1) return; + if ((e.button !== 0 || e.altKey) && this._props.isContentActive()) { + this._setPreviewCursor?.(e.clientX, e.clientY, true, false, this._props.Document); } - if (!e.altKey && e.button === 0 && this.props.isContentActive(true) && ![InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) { - this.props.select(false); + if (!e.altKey && e.button === 0 && this._props.isContentActive() && ![InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) { + this._props.select(false); MarqueeAnnotator.clearAnnotations(this._savedAnnotations); - this._marqueeing = [e.clientX, e.clientY]; + this._marqueeref.current?.onInitiateSelection([e.clientX, e.clientY]); this.isAnnotating = true; const target = e.target as any; if (e.target && (target.className.includes('endOfContent') || (target.parentElement.className !== 'textLayer' && target.parentElement.parentElement?.className !== 'textLayer'))) { this._textSelecting = false; } else { // if textLayer is hit, then we select text instead of using a marquee so clear out the marquee. - setTimeout( - action(() => (this._marqueeing = undefined)), - 100 - ); // bcz: hack .. anchor menu is setup within MarqueeAnnotator so we need to at least create the marqueeAnnotator even though we aren't using it. + setTimeout(() => this._marqueeref.current?.onTerminateSelection(), 100); // bcz: hack .. anchor menu is setup within MarqueeAnnotator so we need to at least create the marqueeAnnotator even though we aren't using it. this._styleRule = addStyleSheetRule(PDFViewer._annotationStyle, 'htmlAnnotation', { 'pointer-events': 'none' }); document.addEventListener('pointerup', this.onSelectEnd); @@ -400,15 +390,16 @@ export class PDFViewer extends React.Component<IViewerProps> { finishMarquee = (x?: number, y?: number) => { this._getAnchor = AnchorMenu.Instance?.GetAnchor; this.isAnnotating = false; - this._marqueeing = undefined; + this._marqueeref.current?.onTerminateSelection(); this._textSelecting = true; }; @action onSelectEnd = (e: PointerEvent): void => { + this._getAnchor = AnchorMenu.Instance?.GetAnchor; this.isAnnotating = false; clearStyleSheetRules(PDFViewer._annotationStyle); - this.props.select(false); + this._props.select(false); document.removeEventListener('pointerup', this.onSelectEnd); const sel = window.getSelection(); @@ -423,29 +414,32 @@ export class PDFViewer extends React.Component<IViewerProps> { // Changing which document to add the annotation to (the currently selected PDF) GPTPopup.Instance.setSidebarId('data_sidebar'); - GPTPopup.Instance.addDoc = this.props.sidebarAddDoc; + GPTPopup.Instance.addDoc = this._props.sidebarAddDoc; }; @action createTextAnnotation = (sel: Selection, selRange: Range) => { if (this._mainCont.current) { + this._mainCont.current.style.transform = `rotate(${NumCast(this._props.pdfBox.ScreenToLocalBoxXf().RotateDeg)}deg)`; const boundingRect = this._mainCont.current.getBoundingClientRect(); const clientRects = selRange.getClientRects(); for (let i = 0; i < clientRects.length; i++) { const rect = clientRects.item(i); - if (rect?.width && rect.width < this._mainCont.current.clientWidth / this.props.ScreenToLocalTransform().Scale) { + if (rect && rect?.width && rect.width < this._mainCont.current.clientWidth / this._props.ScreenToLocalTransform().Scale) { const scaleX = this._mainCont.current.offsetWidth / boundingRect.width; - const pdfScale = NumCast(this.props.layoutDoc._freeform_scale, 1); + const scaleY = this._mainCont.current.offsetHeight / boundingRect.height; + const pdfScale = NumCast(this._props.layoutDoc._freeform_scale, 1); const annoBox = document.createElement('div'); annoBox.className = 'marqueeAnnotator-annotationBox'; // transforms the positions from screen onto the pdf div - annoBox.style.top = (((rect.top - boundingRect.top) * scaleX) / pdfScale + this._mainCont.current.scrollTop).toString(); annoBox.style.left = (((rect.left - boundingRect.left) * scaleX) / pdfScale).toString(); - annoBox.style.width = ((rect.width * this._mainCont.current.offsetWidth) / boundingRect.width / pdfScale).toString(); - annoBox.style.height = ((rect.height * this._mainCont.current.offsetHeight) / boundingRect.height / pdfScale).toString(); + annoBox.style.top = (((rect.top - boundingRect.top) * scaleY) / pdfScale + this._mainCont.current.scrollTop).toString(); + annoBox.style.width = ((rect.width * scaleX) / pdfScale).toString(); + annoBox.style.height = ((rect.height * scaleY) / pdfScale).toString(); this._annotationLayer.current && MarqueeAnnotator.previewNewAnnotation(this._savedAnnotations, this._annotationLayer.current, annoBox, this.getPageFromScroll(rect.top)); } } + this._mainCont.current!.style.transform = ''; } this._selectionContent = selRange.cloneContents(); this._selectionText = this._selectionContent?.textContent || ''; @@ -463,69 +457,57 @@ export class PDFViewer extends React.Component<IViewerProps> { onClick = (e: React.MouseEvent) => { this._scrollStopper?.(); if (this._setPreviewCursor && e.button === 0 && Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD && Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD) { - this._setPreviewCursor(e.clientX, e.clientY, false, false, this.props.Document); + this._setPreviewCursor(e.clientX, e.clientY, false, false, this._props.Document); } // e.stopPropagation(); // bcz: not sure why this was here. We need to allow the DocumentView to get clicks to process doubleClicks }; setPreviewCursor = (func?: (x: number, y: number, drag: boolean, hide: boolean, doc: Opt<Doc>) => void) => (this._setPreviewCursor = func); - setBrushViewer = (func?: (view: { width: number; height: number; panX: number; panY: number }, transTime: number) => void) => (this._setBrushViewer = func); @action onZoomWheel = (e: React.WheelEvent) => { - if (this.props.isContentActive(true)) { + if (this._props.isContentActive()) { e.stopPropagation(); if (e.ctrlKey) { const curScale = Number(this._pdfViewer.currentScaleValue); this._pdfViewer.currentScaleValue = Math.max(1, Math.min(10, curScale - (curScale * e.deltaY) / 1000)); - this.props.layoutDoc._freeform_scale = Number(this._pdfViewer.currentScaleValue); + this._props.layoutDoc._freeform_scale = Number(this._pdfViewer.currentScaleValue); } } }; pointerEvents = () => - this.props.isContentActive() && !MarqueeOptionsMenu.Instance.isShown() + this._props.isContentActive() && !MarqueeOptionsMenu.Instance.isShown() ? 'all' // : 'none'; @computed get annotationLayer() { const inlineAnnos = this.inlineTextAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y)).filter(anno => !anno.hidden); return ( - <div className="pdfViewerDash-annotationLayer" style={{ height: Doc.NativeHeight(this.props.Document), transform: `scale(${NumCast(this.props.layoutDoc._freeform_scale, 1)})` }} ref={this._annotationLayer}> + <div className="pdfViewerDash-annotationLayer" style={{ height: Doc.NativeHeight(this._props.Document), transform: `scale(${NumCast(this._props.layoutDoc._freeform_scale, 1)})` }} ref={this._annotationLayer}> {inlineAnnos.map(anno => ( - <Annotation {...this.props} fieldKey={this.props.fieldKey + '_annotations'} pointerEvents={this.pointerEvents} showInfo={this.showInfo} dataDoc={this.props.dataDoc} anno={anno} key={`${anno[Id]}-annotation`} /> + <Annotation {...this._props} fieldKey={this._props.fieldKey + '_annotations'} pointerEvents={this.pointerEvents} dataDoc={this._props.dataDoc} anno={anno} key={`${anno[Id]}-annotation`} /> ))} </div> ); } - @computed get overlayInfo() { - return !this._overlayAnnoInfo ? null : ( - <div className="pdfViewerDash-overlayAnno" style={{ top: NumCast(this._overlayAnnoInfo.y), left: NumCast(this._overlayAnnoInfo.x) }}> - <div className="pdfViewerDash-overlayAnno" style={{ right: -50, background: SharingManager.Instance.users.find(users => users.user.email === this._overlayAnnoInfo!.author)?.userColor }}> - {this._overlayAnnoInfo.author + ' ' + Field.toString(this._overlayAnnoInfo.author_date as Field)} - </div> - </div> - ); - } - getScrollHeight = () => this._scrollHeight; - showInfo = action((anno: Opt<Doc>) => (this._overlayAnnoInfo = anno)); - scrollXf = () => (this._mainCont.current ? this.props.ScreenToLocalTransform().translate(0, NumCast(this.props.layoutDoc._layout_scrollTop)) : this.props.ScreenToLocalTransform()); - overlayTransform = () => this.scrollXf().scale(1 / NumCast(this.props.layoutDoc._freeform_scale, 1)); - panelWidth = () => this.props.PanelWidth() / (this.props.NativeDimScaling?.() || 1); - panelHeight = () => this.props.PanelHeight() / (this.props.NativeDimScaling?.() || 1); - transparentFilter = () => [...this.props.childFilters(), Utils.IsTransparentFilter()]; - opaqueFilter = () => [...this.props.childFilters(), Utils.noDragsDocFilter, ...(DragManager.docsBeingDragged.length && this.props.isContentActive() ? [] : [Utils.IsOpaqueFilter()])]; - childStyleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps>, property: string): any => { + scrollXf = () => this._props.ScreenToLocalTransform().translate(0, this._mainCont.current ? NumCast(this._props.layoutDoc._layout_scrollTop) : 0); + overlayTransform = () => this.scrollXf().scale(1 / NumCast(this._props.layoutDoc._freeform_scale, 1)); + panelWidth = () => this._props.PanelWidth() / (this._props.NativeDimScaling?.() || 1); + panelHeight = () => this._props.PanelHeight() / (this._props.NativeDimScaling?.() || 1); + transparentFilter = () => [...this._props.childFilters(), Utils.TransparentBackgroundFilter]; + opaqueFilter = () => [...this._props.childFilters(), Utils.noDragDocsFilter, ...(SnappingManager.CanEmbed && this._props.isContentActive() ? [] : [Utils.OpaqueBackgroundFilter])]; + childStyleProvider = (doc: Doc | undefined, props: Opt<FieldViewProps>, property: string): any => { if (doc instanceof Doc && property === StyleProp.PointerEvents) { - if (this.inlineTextAnnotations.includes(doc) || this.props.isContentActive() === false) return 'none'; + if (this.inlineTextAnnotations.includes(doc) || this._props.isContentActive() === false) return 'none'; const isInk = doc.layout_isSvg && !props?.LayoutTemplateString; return isInk ? 'visiblePainted' : 'all'; } - return this.props.styleProvider?.(doc, props, property); + return this._props.styleProvider?.(doc, props, property); }; - childPointerEvents = () => (this.props.isContentActive() !== false ? 'all' : 'none'); + childPointerEvents = () => (this._props.isContentActive() !== false ? 'all' : 'none'); renderAnnotations = (childFilters: () => string[], mixBlendMode?: any, display?: string) => ( <div className="pdfViewerDash-overlay" @@ -535,18 +517,17 @@ export class PDFViewer extends React.Component<IViewerProps> { pointerEvents: Doc.ActiveTool !== InkTool.None ? 'all' : undefined, }}> <CollectionFreeFormView - {...this.props} + {...this._props} NativeWidth={returnZero} NativeHeight={returnZero} - setContentView={emptyFunction} // override setContentView to do nothing - pointerEvents={this.props.isContentActive() && (SnappingManager.GetIsDragging() || Doc.ActiveTool !== InkTool.None) ? returnAll : returnNone} // freeform view doesn't get events unless something is being dragged onto it. + setContentViewBox={emptyFunction} // override setContentView to do nothing + pointerEvents={this._props.isContentActive() && (SnappingManager.IsDragging || Doc.ActiveTool !== InkTool.None) ? returnAll : returnNone} // freeform view doesn't get events unless something is being dragged onto it. childPointerEvents={this.childPointerEvents} // but freeform children need to get events to allow text editing, etc - renderDepth={this.props.renderDepth + 1} + renderDepth={this._props.renderDepth + 1} isAnnotationOverlay={true} - fieldKey={this.props.fieldKey + '_annotations'} + fieldKey={this._props.fieldKey + '_annotations'} getScrollHeight={this.getScrollHeight} setPreviewCursor={this.setPreviewCursor} - setBrushViewer={this.setBrushViewer} PanelHeight={this.panelHeight} PanelWidth={this.panelWidth} ScreenToLocalTransform={this.overlayTransform} @@ -554,64 +535,65 @@ export class PDFViewer extends React.Component<IViewerProps> { isAnnotationOverlayScrollable={true} childFilters={childFilters} select={emptyFunction} - bringToFront={emptyFunction} styleProvider={this.childStyleProvider} /> </div> ); @computed get overlayTransparentAnnotations() { - const transparentChildren = DocUtils.FilterDocs(DocListCast(this.props.dataDoc[this.props.fieldKey + '_annotations']), this.transparentFilter(), []); - return !transparentChildren.length ? null : this.renderAnnotations(this.transparentFilter, 'multiply', DragManager.docsBeingDragged.length && this.props.isContentActive() ? 'none' : undefined); + const transparentChildren = DocUtils.FilterDocs(DocListCast(this._props.dataDoc[this._props.fieldKey + '_annotations']), this.transparentFilter(), []); + return !transparentChildren.length ? null : this.renderAnnotations(this.transparentFilter, 'multiply', SnappingManager.CanEmbed && this._props.isContentActive() ? 'none' : undefined); } @computed get overlayOpaqueAnnotations() { return this.renderAnnotations(this.opaqueFilter, this.allAnnotations.some(anno => anno.mixBlendMode) ? 'hard-light' : undefined); } @computed get overlayLayer() { return ( - <div style={{ pointerEvents: this.props.isContentActive() && SnappingManager.GetIsDragging() ? 'all' : 'none' }}> + <div style={{ pointerEvents: this._props.isContentActive() && SnappingManager.IsDragging ? 'all' : 'none' }}> {this.overlayTransparentAnnotations} {this.overlayOpaqueAnnotations} </div> ); } @computed get pdfViewerDiv() { - return <div className={'pdfViewerDash-text' + (this.props.pointerEvents?.() !== 'none' && this._textSelecting && this.props.isContentActive() ? '-selected' : '')} ref={this._viewer} />; + return <div className={'pdfViewerDash-text' + (this._props.pointerEvents?.() !== 'none' && this._textSelecting && this._props.isContentActive() ? '-selected' : '')} ref={this._viewer} />; } savedAnnotations = () => this._savedAnnotations; + addDocumentWrapper = (doc: Doc | Doc[]) => this._props.addDocument!(doc); render() { TraceMobx(); return ( <div className="pdfViewer-content"> <div - className={`pdfViewerDash${this.props.isContentActive() && this.props.pointerEvents?.() !== 'none' ? '-interactive' : ''}`} + className={`pdfViewerDash${this._props.isContentActive() && this._props.pointerEvents?.() !== 'none' ? '-interactive' : ''}`} ref={this._mainCont} onScroll={this.onScroll} onWheel={this.onZoomWheel} onPointerDown={this.onPointerDown} onClick={this.onClick} style={{ - overflowX: NumCast(this.props.layoutDoc._freeform_scale, 1) !== 1 ? 'scroll' : undefined, - height: !this.props.Document._layout_fitWidth && window.screen.width > 600 ? Doc.NativeHeight(this.props.Document) : `100%`, + overflowX: NumCast(this._props.layoutDoc._freeform_scale, 1) !== 1 ? 'scroll' : undefined, + height: !this._props.Document._layout_fitWidth && window.screen.width > 600 ? Doc.NativeHeight(this._props.Document) : `100%`, }}> {this.pdfViewerDiv} {this.annotationLayer} {this.overlayLayer} - {this.overlayInfo} {this._showWaiting ? <img className="pdfViewerDash-waiting" src={'/assets/loading.gif'} /> : null} - {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? null : ( + {!this._mainCont.current || !this._annotationLayer.current ? null : ( <MarqueeAnnotator - rootDoc={this.props.rootDoc} + ref={this._marqueeref} + Document={this._props.Document} getPageFromScroll={this.getPageFromScroll} - anchorMenuClick={this.props.anchorMenuClick} + anchorMenuClick={this._props.anchorMenuClick} scrollTop={0} - down={this._marqueeing} - addDocument={(doc: Doc | Doc[]) => this.props.addDocument!(doc)} - docView={this.props.docViewPath().lastElement()} + isNativeScaled={true} + annotationLayerScrollTop={NumCast(this._props.Document._layout_scrollTop)} + addDocument={this.addDocumentWrapper} + docView={this._props.pdfBox.DocumentView!} finishMarquee={this.finishMarquee} savedAnnotations={this.savedAnnotations} selectionText={this.selectionText} annotationLayer={this._annotationLayer.current} - mainCont={this._mainCont.current} + marqueeContainer={this._mainCont.current} anchorMenuCrop={this._textSelecting ? undefined : this.crop} /> )} diff --git a/src/client/views/search/CheckBox.scss b/src/client/views/search/CheckBox.scss deleted file mode 100644 index 2a0085ade..000000000 --- a/src/client/views/search/CheckBox.scss +++ /dev/null @@ -1,59 +0,0 @@ -@import "../global/globalCssVariables"; - -.checkboxfilter { - display: flex; - margin-top: 0px; - padding: 3px; - - .outer { - display: flex; - position: relative; - justify-content: center; - align-items: center; - margin-top: 0px; - - .check-container:hover~.check-box { - background-color: $medium-blue; - } - - .check-container { - width: 40px; - height: 40px; - position: absolute; - z-index: 1000; - - .checkmark { - z-index: 1000; - position: absolute; - fill-opacity: 0; - stroke-width: 4px; - // stroke: white; - stroke: gray; - } - } - - .check-box { - z-index: 900; - position: relative; - height: 20px; - width: 20px; - overflow: visible; - background-color: transparent; - border-style: solid; - border-color: $medium-gray; - border-width: 2px; - -webkit-transition: all 0.2s ease-in-out; - -moz-transition: all 0.2s ease-in-out; - -o-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; - } - } - - .checkbox-title { - display: flex; - align-items: center; - text-transform: capitalize; - margin-left: 15px; - } - -}
\ No newline at end of file diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx deleted file mode 100644 index 0a1e551ec..000000000 --- a/src/client/views/search/CheckBox.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import * as React from 'react'; -import { observer } from 'mobx-react'; -import { observable, action, runInAction, IReactionDisposer, reaction } from 'mobx'; -import "./CheckBox.scss"; - -interface CheckBoxProps { - originalStatus: boolean; - updateStatus(newStatus: boolean): void; - title: string; - parent: any; - numCount: number; - default: boolean; -} - -@observer -export class CheckBox extends React.Component<CheckBoxProps>{ - // true = checked, false = unchecked - @observable private _status: boolean; - // @observable private uncheckTimeline: anime.AnimeTimelineInstance; - // @observable private checkTimeline: anime.AnimeTimelineInstance; - @observable private checkRef: any; - @observable private _resetReaction?: IReactionDisposer; - - - constructor(props: CheckBoxProps) { - super(props); - this._status = this.props.originalStatus; - this.checkRef = React.createRef(); - - // this.checkTimeline = anime.timeline({ - // loop: false, - // autoplay: false, - // direction: "normal", - // }); this.uncheckTimeline = anime.timeline({ - // loop: false, - // autoplay: false, - // direction: "normal", - // }); - } - - // componentDidMount = () => { - // this.uncheckTimeline.add({ - // targets: this.checkRef.current, - // easing: "easeInOutQuad", - // duration: 500, - // opacity: 0, - // }); - // this.checkTimeline.add({ - // targets: this.checkRef.current, - // easing: "easeInOutQuad", - // duration: 500, - // strokeDashoffset: [anime.setDashoffset, 0], - // opacity: 1 - // }); - - // if (this.props.originalStatus) { - // this.checkTimeline.play(); - // this.checkTimeline.restart(); - // } - - // this._resetReaction = reaction( - // () => this.props.parent._resetBoolean, - // () => { - // if (this.props.parent._resetBoolean) { - // runInAction(() => { - // this.reset(); - // this.props.parent._resetCounter++; - // if (this.props.parent._resetCounter === this.props.numCount) { - // this.props.parent._resetCounter = 0; - // this.props.parent._resetBoolean = false; - // } - // }); - // } - // }, - // ); - // } - - // @action.bound - // reset() { - // if (this.props.default) { - // if (!this._status) { - // this._status = true; - // this.checkTimeline.play(); - // this.checkTimeline.restart(); - // } - // } - // else { - // if (this._status) { - // this._status = false; - // this.uncheckTimeline.play(); - // this.uncheckTimeline.restart(); - // } - // } - - // this.props.updateStatus(this.props.default); - // } - - @action.bound - onClick = () => { - // if (this._status) { - // this.uncheckTimeline.play(); - // this.uncheckTimeline.restart(); - // } - // else { - // this.checkTimeline.play(); - // this.checkTimeline.restart(); - - // } - // this._status = !this._status; - // this.props.updateStatus(this._status); - - } - - render() { - return ( - <div className="checkboxfilter" onClick={this.onClick}> - <div className="outer"> - <div className="check-container"> - <svg viewBox="0 12 40 40"> - <path ref={this.checkRef} className="checkmark" d="M14.1 27.2l7.1 7.2 16.7-18" /> - </svg> - </div> - <div className="check-box" /> - </div> - <div className="checkbox-title">{this.props.title}</div> - </div> - ); - } - -}
\ No newline at end of file diff --git a/src/client/views/search/CollectionFilters.scss b/src/client/views/search/CollectionFilters.scss deleted file mode 100644 index 845b16f67..000000000 --- a/src/client/views/search/CollectionFilters.scss +++ /dev/null @@ -1,20 +0,0 @@ -@import "../global/globalCssVariables"; - -.collection-filters { - display: flex; - flex-direction: row; - width: 100%; - - &.main { - width: 47%; - float: left; - } - - &.optional { - width: 60%; - display: grid; - grid-template-columns: 50% 50%; - float: right; - opacity: 0; - } -}
\ No newline at end of file diff --git a/src/client/views/search/CollectionFilters.tsx b/src/client/views/search/CollectionFilters.tsx deleted file mode 100644 index 48d0b2ddb..000000000 --- a/src/client/views/search/CollectionFilters.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import * as React from 'react'; -import { observable, action } from 'mobx'; -import { CheckBox } from './CheckBox'; -import "./CollectionFilters.scss"; -import * as anime from 'animejs'; - -interface CollectionFilterProps { - collectionStatus: boolean; - updateCollectionStatus(val: boolean): void; - collectionSelfStatus: boolean; - updateSelfCollectionStatus(val: boolean): void; - collectionParentStatus: boolean; - updateParentCollectionStatus(val: boolean): void; -} - -export class CollectionFilters extends React.Component<CollectionFilterProps> { - - static Instance: CollectionFilters; - - @observable public _resetBoolean = false; - @observable public _resetCounter: number = 0; - - @observable private _collectionsSelected = this.props.collectionStatus; - @observable private _timeline: anime.AnimeTimelineInstance; - @observable private _ref: any; - - constructor(props: CollectionFilterProps) { - super(props); - CollectionFilters.Instance = this; - this._ref = React.createRef(); - - this._timeline = anime.timeline({ - loop: false, - autoplay: false, - direction: "reverse", - }); - } - - componentDidMount = () => { - this._timeline.add({ - targets: this._ref.current, - easing: "easeInOutQuad", - duration: 500, - opacity: 1, - }); - - if (this._collectionsSelected) { - this._timeline.play(); - this._timeline.reverse(); - } - } - - @action.bound - resetCollectionFilters() { this._resetBoolean = true; } - - @action.bound - updateColStat(val: boolean) { - this.props.updateCollectionStatus(val); - - if (this._collectionsSelected !== val) { - this._timeline.play(); - this._timeline.reverse(); - } - - this._collectionsSelected = val; - } - - render() { - return ( - <div> - <div className="collection-filters"> - <div className="collection-filters main"> - <CheckBox default={false} title={"limit to current collection"} parent={this} numCount={3} updateStatus={this.updateColStat} originalStatus={this.props.collectionStatus} /> - </div> - <div className="collection-filters optional" ref={this._ref}> - <CheckBox default={true} title={"Search in self"} parent={this} numCount={3} updateStatus={this.props.updateSelfCollectionStatus} originalStatus={this.props.collectionSelfStatus} /> - <CheckBox default={true} title={"Search in parent"} parent={this} numCount={3} updateStatus={this.props.updateParentCollectionStatus} originalStatus={this.props.collectionParentStatus} /> - </div> - </div> - </div> - ); - } -}
\ No newline at end of file diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss deleted file mode 100644 index 6aaf7918d..000000000 --- a/src/client/views/search/IconBar.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import "../global/globalCssVariables"; - -.icon-bar { - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; - height: auto; - width: 100%; - flex-direction: row-reverse; -}
\ No newline at end of file diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx deleted file mode 100644 index 540c1b5e1..000000000 --- a/src/client/views/search/IconBar.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { action, observable } from 'mobx'; -import { observer } from 'mobx-react'; -import * as React from 'react'; -import { DocumentType } from '../../documents/DocumentTypes'; -import './IconBar.scss'; -import { IconButton } from './IconButton'; -import './IconButton.scss'; - -export interface IconBarProps { - setIcons: (icons: string[]) => void; -} - -@observer -export class IconBar extends React.Component<IconBarProps> { - public _allIcons: string[] = [DocumentType.AUDIO, DocumentType.COL, DocumentType.IMG, DocumentType.LINK, DocumentType.PDF, DocumentType.RTF, DocumentType.VID, DocumentType.WEB, DocumentType.MAP]; - - @observable private _icons: string[] = this._allIcons; - - static Instance: IconBar; - - @observable public _resetClicked: boolean = false; - @observable public _selectAllClicked: boolean = false; - @observable public _reset: number = 0; - @observable public _select: number = 0; - - @action.bound - updateIcon(newArray: string[]) { - this._icons = newArray; - this.props.setIcons?.(this._icons); - } - - @action.bound - getIcons(): string[] { - return this._icons; - } - - constructor(props: any) { - super(props); - IconBar.Instance = this; - } - - @action.bound - getList(): string[] { - return this.getIcons(); - } - - @action.bound - updateList(newList: string[]) { - this.updateIcon(newList); - } - - @action.bound - resetSelf = () => { - this._resetClicked = true; - this.updateList([]); - }; - - @action.bound - selectAll = () => { - this._selectAllClicked = true; - this.updateList(this._allIcons); - }; - - render() { - return ( - <div className="icon-bar"> - {this._allIcons.map((type: string) => ( - <IconButton key={type.toString()} type={type} /> - ))} - </div> - ); - } -} diff --git a/src/client/views/search/IconButton.scss b/src/client/views/search/IconButton.scss deleted file mode 100644 index 3cb08d756..000000000 --- a/src/client/views/search/IconButton.scss +++ /dev/null @@ -1,53 +0,0 @@ -@import "../global/globalCssVariables"; - -.type-outer { - display: flex; - flex-direction: column; - align-items: center; - width: 30px; - - .type-icon { - height: 30px; - width: 30px; - color: $white; - // background-color: rgb(194, 194, 197); - background-color: gray; - border-radius: 50%; - display: flex; - justify-content: center; - align-items: center; - -webkit-transition: all 0.2s ease-in-out; - -moz-transition: all 0.2s ease-in-out; - -o-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; - font-size: 2em; - - .fontawesome-icon { - height: 15px; - width: 15px - } - } - - .filter-description { - text-transform: capitalize; - font-size: 10; - text-align: center; - height: 15px; - margin-top: 5px; - opacity: 1; - -webkit-transition: all 0.2s ease-in-out; - -moz-transition: all 0.2s ease-in-out; - -o-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; - } - - .type-icon:hover { - transform: scale(1.1); - background-color: $medium-blue; - opacity: 1; - - +.filter-description { - opacity: 1; - } - } -}
\ No newline at end of file diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx deleted file mode 100644 index 6cf3a5f72..000000000 --- a/src/client/views/search/IconButton.tsx +++ /dev/null @@ -1,126 +0,0 @@ -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import * as _ from "lodash"; -import { action, IReactionDisposer, observable, reaction, runInAction } from 'mobx'; -import { observer } from 'mobx-react'; -import * as React from 'react'; -import { DocumentType } from "../../documents/DocumentTypes"; -import '../global/globalCssVariables.scss'; -import { IconBar } from './IconBar'; -import "./IconButton.scss"; -import "./SearchBox.scss"; -import { Font } from '@react-pdf/renderer'; - -interface IconButtonProps { - type: string; -} - -@observer -export class IconButton extends React.Component<IconButtonProps>{ - - @observable private _isSelected: boolean = IconBar.Instance.getIcons().indexOf(this.props.type) !== -1; - @observable private _hover = false; - private _resetReaction?: IReactionDisposer; - private _selectAllReaction?: IReactionDisposer; - - static Instance: IconButton; - constructor(props: IconButtonProps) { - super(props); - IconButton.Instance = this; - } - - componentDidMount = () => { - this._resetReaction = reaction( - () => IconBar.Instance._resetClicked, - action(() => { - if (IconBar.Instance._resetClicked) { - this._isSelected = false; - IconBar.Instance._reset++; - if (IconBar.Instance._reset === 9) { - IconBar.Instance._reset = 0; - IconBar.Instance._resetClicked = false; - } - } - }), - ); - - this._selectAllReaction = reaction( - () => IconBar.Instance._selectAllClicked, - action(() => { - if (IconBar.Instance._selectAllClicked) { - this._isSelected = true; - IconBar.Instance._select++; - if (IconBar.Instance._select === 9) { - IconBar.Instance._select = 0; - IconBar.Instance._selectAllClicked = false; - } - } - }), - ); - } - - @action.bound - getIcon() { - switch (this.props.type) { - case (DocumentType.NONE): return "ban"; - case (DocumentType.AUDIO): return "music"; - case (DocumentType.COL): return "object-group"; - case (DocumentType.IMG): return "image"; - case (DocumentType.LINK): return "link"; - case (DocumentType.PDF): return "file-pdf"; - case (DocumentType.RTF): return "sticky-note"; - case (DocumentType.VID): return "video"; - case (DocumentType.WEB): return "globe-asia"; - case (DocumentType.MAP): return "map-marker-alt"; - default: return "caret-down"; - } - } - - @action.bound - onClick = () => { - const newList: string[] = IconBar.Instance.getIcons(); - - if (!this._isSelected) { - this._isSelected = true; - newList.push(this.props.type); - } - else { - this._isSelected = false; - _.pull(newList, this.props.type); - } - - IconBar.Instance.updateIcon(newList); - } - - selected = { - opacity: 1, - backgroundColor: "#121721", - //backgroundColor: "rgb(128, 128, 128)" - }; - - notSelected = { - opacity: 0.2, - backgroundColor: "#121721", - }; - - hoverStyle = { - opacity: 1, - backgroundColor: "rgb(128, 128, 128)" - //backgroundColor: "rgb(178, 206, 248)" //$medium-blue - }; - - render() { - return ( - <div className="type-outer" id={this.props.type + "-filter"} - onMouseEnter={() => this._hover = true} - onMouseLeave={() => this._hover = false} - onClick={this.onClick}> - <div className="type-icon" id={this.props.type + "-icon"} - style={this._hover ? this.hoverStyle : this._isSelected ? this.selected : this.notSelected} - > - <FontAwesomeIcon className="fontawesome-icon" icon={this.getIcon()} /> - </div> - {/* <div className="filter-description">{this.props.type}</div> */} - </div> - ); - } -}
\ No newline at end of file diff --git a/src/client/views/search/NaviconButton.scss b/src/client/views/search/NaviconButton.scss deleted file mode 100644 index 8a70b29de..000000000 --- a/src/client/views/search/NaviconButton.scss +++ /dev/null @@ -1,69 +0,0 @@ -@import "../global/globalCssVariables"; - -$height-icon: 15px; -$width-line: 30px; -$height-line: 4px; - -$transition-time: 0.4s; -$rotation: 45deg; -$translateY: ($height-icon / 2); -$translateX: 0; - -#hamburger-icon { - width: $width-line; - height: $height-icon; - position: relative; - display: block; - transition: all $transition-time; - -webkit-transition: all $transition-time; - -moz-transition: all $transition-time; - - .line { - display: block; - background: $medium-gray; - width: $width-line; - height: $height-line; - position: absolute; - left: 0; - border-radius: ($height-line / 2); - transition: all $transition-time; - -webkit-transition: all $transition-time; - -moz-transition: all $transition-time; - - &.line-1 { - top: 0; - } - - &.line-2 { - top: 50%; - } - - &.line-3 { - top: 100%; - } - } -} - -.filter-header.active { - .line-1 { - transform: translateY($translateY) translateX($translateX) rotate($rotation); - -webkit-transform: translateY($translateY) translateX($translateX) rotate($rotation); - -moz-transform: translateY($translateY) translateX($translateX) rotate($rotation); - } - - .line-2 { - opacity: 0; - } - - .line-3 { - transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1); - -webkit-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1); - -moz-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1); - } -} - -.filter-header:hover #hamburger-icon { - transform: scale(1.1); - -webkit-transform: scale(1.1); - -moz-transform: scale(1.1); -}
\ No newline at end of file diff --git a/src/client/views/search/NaviconButton.tsx b/src/client/views/search/NaviconButton.tsx deleted file mode 100644 index 0fa4a0fca..000000000 --- a/src/client/views/search/NaviconButton.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import * as React from 'react'; -import { observer } from 'mobx-react'; -import "./NaviconButton.scss"; -import * as $ from 'jquery'; -import { observable } from 'mobx'; - -export interface NaviconProps { - onClick(): void; -} - -export class NaviconButton extends React.Component<NaviconProps> { - - @observable private _ref: React.RefObject<HTMLAnchorElement> = React.createRef(); - - componentDidMount = () => { - const that = this; - if (this._ref.current) { - this._ref.current.addEventListener("click", function (e) { - e.preventDefault(); - if (that._ref.current) { - that._ref.current.classList.toggle('active'); - return false; - } - }); - } - } - - render() { - return ( - <a id="hamburger-icon" href="#" ref={this._ref} title="Menu"> - <span className="line line-1"></span> - <span className="line line-2"></span> - <span className="line line-3"></span> - </a> - ); - } -}
\ No newline at end of file diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index a439aea3e..09e459f7d 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -1,5 +1,4 @@ -@import "../global/globalCssVariables"; -@import "./NaviconButton.scss"; +@import '../global/globalCssVariables.module.scss'; .searchBox-container { width: 100%; @@ -47,7 +46,6 @@ } .section-header { - .section-title { font-size: $body-text; font-weight: 600; @@ -57,7 +55,7 @@ display: flex; color: $light-gray; } - + padding: 5px 10px; display: flex; flex-direction: column; @@ -71,7 +69,7 @@ flex-direction: column; width: 100%; height: fit-content; - justify-content: "center"; + justify-content: 'center'; .searchBox-recommendations-view { margin-top: 10px; @@ -81,8 +79,6 @@ flex-direction: column; gap: 10px; padding: 0px 10px; - - } } @@ -91,8 +87,8 @@ flex-direction: column; width: 100%; height: fit-content; - justify-content: "center"; - + justify-content: 'center'; + .searchBox-results-view { display: inline-block; width: 100%; @@ -147,4 +143,4 @@ } } } -}
\ No newline at end of file +} diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index aa46e57dc..5dc4f5550 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -1,25 +1,24 @@ -import { Tooltip } from '@material-ui/core'; -import { action, computed, observable } from 'mobx'; +import { Tooltip } from '@mui/material'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { Doc, DocListCast, DocListCastAsync, Field, Opt } from '../../../fields/Doc'; -import { DirectLinks } from '../../../fields/DocSymbols'; +import { Doc, DocListCastAsync, Field } from '../../../fields/Doc'; +import { DirectLinks, DocData } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; import { DocCast, StrCast } from '../../../fields/Types'; -import { DocUtils } from '../../documents/Documents'; import { DocumentType } from '../../documents/DocumentTypes'; +import { DocUtils } from '../../documents/Documents'; import { DocumentManager } from '../../util/DocumentManager'; import { LinkManager } from '../../util/LinkManager'; +import { SearchUtil } from '../../util/SearchUtil'; +import { SettingsManager } from '../../util/SettingsManager'; import { undoBatch } from '../../util/UndoManager'; -import { CollectionDockingView } from '../collections/CollectionDockingView'; import { ViewBoxBaseComponent } from '../DocComponent'; +import { CollectionDockingView } from '../collections/CollectionDockingView'; +import { IRecommendation, Recommendation } from '../newlightbox/components'; +import { fetchRecommendations } from '../newlightbox/utils'; import { FieldView, FieldViewProps } from '../nodes/FieldView'; import './SearchBox.scss'; -import { fetchRecommendations } from '../newlightbox/utils'; -import { IRecommendation, Recommendation } from '../newlightbox/components'; -import { Colors } from '../global/globalEnums'; -import { SettingsManager } from '../../util/SettingsManager'; -import { SearchUtil } from '../../util/SearchUtil'; const DAMPENING_FACTOR = 0.9; const MAX_ITERATIONS = 25; @@ -59,8 +58,9 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() { /** * This is the constructor for the SearchBox class. */ - constructor(props: any) { + constructor(props: SearchBoxProps) { super(props); + makeObservable(this); SearchBox.Instance = this; } @@ -122,10 +122,10 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() { @undoBatch makeLink = action((linkTo: Doc) => { - const linkFrom = this.props.linkCreateAnchor?.(); + const linkFrom = this._props.linkCreateAnchor?.(); if (linkFrom) { const link = DocUtils.MakeLink(linkFrom, linkTo, {}); - link && this.props.linkCreated?.(link); + link && this._props.linkCreated?.(link); } }); @@ -186,7 +186,7 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() { @action searchCollection(query: string) { this._selectedResult = undefined; - this._results = SearchUtil.SearchCollection(CollectionDockingView.Instance?.rootDoc, query); + this._results = SearchUtil.SearchCollection(CollectionDockingView.Instance?.Document, query); this.computePageRanks(); } @@ -207,7 +207,7 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() { this._results.forEach((_, doc) => { this._pageRanks.set(doc, 1.0 / this._results.size); - if (Doc.GetProto(doc)[DirectLinks].size === 0) { + if (doc[DocData][DirectLinks].size === 0) { this._linkedDocsOut.set(doc, new Set(this._results.keys())); this._results.forEach((_, linkedDoc) => { @@ -216,7 +216,7 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() { } else { const linkedDocSet = new Set<Doc>(); - Doc.GetProto(doc)[DirectLinks].forEach(link => { + doc[DocData][DirectLinks].forEach(link => { const d1 = link?.link_anchor_1 as Doc; const d2 = link?.link_anchor_2 as Doc; if (doc === d1 && this._results.has(d2)) { @@ -292,7 +292,7 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() { const query = StrCast(this._searchString); Doc.SetSearchQuery(query); - if (!this.props.linkSearch) Array.from(this._results.keys()).forEach(doc => DocumentManager.Instance.getFirstDocumentView(doc)?.ComponentView?.search?.(this._searchString, undefined, true)); + if (!this._props.linkSearch) Array.from(this._results.keys()).forEach(doc => DocumentManager.Instance.getFirstDocumentView(doc)?.ComponentView?.search?.(this._searchString, undefined, true)); this._results.clear(); if (query) { @@ -375,13 +375,13 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() { render() { var validResults = 0; - const isLinkSearch: boolean = this.props.linkSearch; + const isLinkSearch: boolean = this._props.linkSearch; const sortedResults = Array.from(this._results.entries()).sort((a, b) => (this._pageRanks.get(b[0]) ?? 0) - (this._pageRanks.get(a[0]) ?? 0)); // sorted by page rank const resultsJSX = Array(); - const fromDoc = this.props.linkFrom?.(); + const fromDoc = this._props.linkFrom?.(); sortedResults.forEach(result => { var className = 'searchBox-results-scroll-view-result'; diff --git a/src/client/views/search/SelectorContextMenu.scss b/src/client/views/search/SelectorContextMenu.scss index a114f679c..097a6107d 100644 --- a/src/client/views/search/SelectorContextMenu.scss +++ b/src/client/views/search/SelectorContextMenu.scss @@ -1,4 +1,4 @@ -@import "../global/globalCssVariables"; +@import '../global/globalCssVariables.module.scss'; .parents { background: $light-blue; @@ -13,4 +13,4 @@ border-color: $medium-blue; border-bottom-style: solid; } -}
\ No newline at end of file +} diff --git a/src/client/views/search/ToggleBar.scss b/src/client/views/search/ToggleBar.scss deleted file mode 100644 index 3a164f133..000000000 --- a/src/client/views/search/ToggleBar.scss +++ /dev/null @@ -1,41 +0,0 @@ -@import "../global/globalCssVariables"; - -.toggle-title { - display: flex; - align-items: center; - color: $white; - text-transform: uppercase; - flex-direction: row; - justify-content: space-around; - padding: 5px; - - .toggle-option { - width: 50%; - text-align: center; - -webkit-transition: all 0.2s ease-in-out; - -moz-transition: all 0.2s ease-in-out; - -o-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; - color: gray; - font-size: 13; - } -} - -.toggle-bar { - // height: 50px; - height: 30px; - width: 100px; - background-color: $medium-gray; - border-radius: 10px; - padding: 5px; - display: flex; - align-items: center; - - .toggle-button { - // width: 275px; - width: 40px; - height: 100%; - border-radius: 10px; - background-color: $white; - } -}
\ No newline at end of file diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx deleted file mode 100644 index 466822eba..000000000 --- a/src/client/views/search/ToggleBar.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import * as React from 'react'; -import { observer } from 'mobx-react'; -import { observable, action, runInAction, computed } from 'mobx'; -import "./SearchBox.scss"; -import "./ToggleBar.scss"; -import * as anime from 'animejs'; - -export interface ToggleBarProps { - originalStatus: boolean; - optionOne: string; - optionTwo: string; - handleChange(): void; - getStatus(): boolean; -} - -@observer -export class ToggleBar extends React.Component<ToggleBarProps>{ - static Instance: ToggleBar; - - @observable private _forwardTimeline: anime.AnimeTimelineInstance; - @observable private _toggleButton: React.RefObject<HTMLDivElement>; - @observable private _originalStatus: boolean = this.props.originalStatus; - - constructor(props: ToggleBarProps) { - super(props); - ToggleBar.Instance = this; - this._toggleButton = React.createRef(); - this._forwardTimeline = anime.timeline({ - loop: false, - autoplay: false, - direction: "reverse", - }); - } - - componentDidMount = () => { - const totalWidth = 265; - - if (this._originalStatus) { - this._forwardTimeline.add({ - targets: this._toggleButton.current, - translateX: totalWidth, - easing: "easeInOutQuad", - duration: 500 - }); - } - else { - this._forwardTimeline.add({ - targets: this._toggleButton.current, - translateX: -totalWidth, - easing: "easeInOutQuad", - duration: 500 - }); - } - } - - @action.bound - onclick() { - this._forwardTimeline.play(); - this._forwardTimeline.reverse(); - this.props.handleChange(); - } - - @action.bound - public resetToggle = () => { - if (!this.props.getStatus()) { - this._forwardTimeline.play(); - this._forwardTimeline.reverse(); - this.props.handleChange(); - } - } - - render() { - return ( - <div> - <div className="toggle-title"> - <div className="toggle-option" style={{ opacity: (this.props.getStatus() ? 1 : .4) }}>{this.props.optionOne}</div> - <div className="toggle-option" style={{ opacity: (this.props.getStatus() ? .4 : 1) }}>{this.props.optionTwo}</div> - </div> - <div className="toggle-bar" id="toggle-bar" onClick={this.onclick} style={{ flexDirection: (this._originalStatus ? "row" : "row-reverse") }}> - <div className="toggle-button" id="toggle-button" ref={this._toggleButton} /> - </div> - </div> - ); - } -}
\ No newline at end of file diff --git a/src/client/views/selectedDoc/SelectedDocView.tsx b/src/client/views/selectedDoc/SelectedDocView.tsx index 2139919e0..c9c01189e 100644 --- a/src/client/views/selectedDoc/SelectedDocView.tsx +++ b/src/client/views/selectedDoc/SelectedDocView.tsx @@ -1,14 +1,14 @@ -import React = require('react'); import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { ListBox } from 'browndash-components'; import { computed } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; +import { emptyFunction } from '../../../Utils'; import { Doc } from '../../../fields/Doc'; import { StrCast } from '../../../fields/Types'; import { DocumentManager } from '../../util/DocumentManager'; -import { DocFocusOptions } from '../nodes/DocumentView'; -import { emptyFunction } from '../../../Utils'; import { SettingsManager } from '../../util/SettingsManager'; +import { FocusViewOptions } from '../nodes/FieldView'; export interface SelectedDocViewProps { selectedDocs: Doc[]; @@ -25,7 +25,7 @@ export class SelectedDocView extends React.Component<SelectedDocViewProps> { <div className="selectedDocView-container"> <ListBox items={this.selectedDocs.map(doc => { - const options: DocFocusOptions = { + const options: FocusViewOptions = { playAudio: false, playMedia: false, willPan: true, diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss index 2237d5ac1..20245104e 100644 --- a/src/client/views/topbar/TopBar.scss +++ b/src/client/views/topbar/TopBar.scss @@ -1,5 +1,4 @@ -@import '../global/globalCssVariables'; - +@import '../global/globalCssVariables.module.scss'; .topbar-container { flex-direction: column; diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx index 55d94406a..4155800b8 100644 --- a/src/client/views/topbar/TopBar.tsx +++ b/src/client/views/topbar/TopBar.tsx @@ -16,13 +16,13 @@ import { ReportManager } from '../../util/reportManager/ReportManager'; import { ServerStats } from '../../util/ServerStats'; import { SettingsManager } from '../../util/SettingsManager'; import { SharingManager } from '../../util/SharingManager'; +import { SnappingManager } from '../../util/SnappingManager'; import { Transform } from '../../util/Transform'; import { CollectionDockingView } from '../collections/CollectionDockingView'; import { CollectionLinearView } from '../collections/collectionLinear'; -import { ContextMenu } from '../ContextMenu'; import { DashboardView } from '../DashboardView'; import { Colors } from '../global/globalEnums'; -import { DocumentView, DocumentViewInternal } from '../nodes/DocumentView'; +import { DocumentViewInternal, returnEmptyDocViewList } from '../nodes/DocumentView'; import { DefaultStyleProvider } from '../StyleProvider'; import './TopBar.scss'; @@ -85,9 +85,9 @@ export class TopBar extends React.Component { type={Type.TERT} tooltip="Browsing mode for directly navigating to documents" size={Size.SMALL} - color={DocumentView.ExploreMode ? this.variantColor : this.color} - background={DocumentView.ExploreMode ? this.color : 'transparent'} - onClick={action(() => (DocumentView.ExploreMode = !DocumentView.ExploreMode))} + color={SnappingManager.ExploreMode ? this.variantColor : this.color} + background={SnappingManager.ExploreMode ? this.color : 'transparent'} + onClick={() => SnappingManager.SetExploreMode(!SnappingManager.ExploreMode)} /> )} </div> @@ -100,18 +100,14 @@ export class TopBar extends React.Component { <div className="collectionMenu-contMenuButtons" style={{ height: '100%' }}> <CollectionLinearView Document={selDoc} - DataDoc={undefined} + docViewPath={returnEmptyDocViewList} fieldKey="data" dropAction="embed" - setHeight={returnFalse} styleProvider={DefaultStyleProvider} - rootSelected={returnTrue} - bringToFront={emptyFunction} select={emptyFunction} isContentActive={returnTrue} isAnyChildContentActive={returnFalse} isSelected={returnFalse} - docViewPath={returnEmptyDoclist} moveDocument={returnFalse} addDocument={returnFalse} addDocTab={DocumentViewInternal.addDocTabFunc} diff --git a/src/client/views/webcam/DashWebRTCVideo.scss b/src/client/views/webcam/DashWebRTCVideo.scss index 249aee9d6..5744ebbcd 100644 --- a/src/client/views/webcam/DashWebRTCVideo.scss +++ b/src/client/views/webcam/DashWebRTCVideo.scss @@ -1,11 +1,11 @@ -@import "../global/globalCssVariables"; +@import '../global/globalCssVariables.module.scss'; .webcam-cont { background: whitesmoke; color: grey; border-radius: 15px; box-shadow: #9c9396 0.2vw 0.2vw 0.4vw; - border: solid #BBBBBBBB 5px; + border: solid #bbbbbbbb 5px; pointer-events: all; display: flex; flex-direction: column; @@ -44,7 +44,7 @@ #roomName { outline: none; border-radius: inherit; - border: 1px solid #BBBBBBBB; + border: 1px solid #bbbbbbbb; margin: 10px; padding: 10px; } @@ -79,5 +79,4 @@ margin: 5px; border: 1px solid black; } - -}
\ No newline at end of file +} diff --git a/src/client/views/webcam/DashWebRTCVideo.tsx b/src/client/views/webcam/DashWebRTCVideo.tsx index 524492226..4e984f3d6 100644 --- a/src/client/views/webcam/DashWebRTCVideo.tsx +++ b/src/client/views/webcam/DashWebRTCVideo.tsx @@ -3,28 +3,25 @@ import { faPhoneSlash, faSync } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, observable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { Doc } from '../../../fields/Doc'; import { InkTool } from '../../../fields/InkField'; +import { SnappingManager } from '../../util/SnappingManager'; import '../../views/nodes/WebBox.scss'; -import { CollectionFreeFormDocumentViewProps } from '../nodes/CollectionFreeFormDocumentView'; -import { DocumentView } from '../nodes/DocumentView'; import { FieldView, FieldViewProps } from '../nodes/FieldView'; import './DashWebRTCVideo.scss'; import { hangup, initialize, refreshVideos } from './WebCamLogic'; -import React = require('react'); /** * This models the component that will be rendered, that can be used as a doc that will reflect the video cams. */ @observer -export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentViewProps & FieldViewProps> { +export class DashWebRTCVideo extends React.Component<FieldViewProps> { private roomText: HTMLInputElement | undefined; @observable remoteVideoAdded: boolean = false; @action - changeUILook = () => { - this.remoteVideoAdded = true; - }; + changeUILook = () => (this.remoteVideoAdded = true); /** * Function that submits the title entered by user on enter press. @@ -42,14 +39,9 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV return FieldView.LayoutString(DashWebRTCVideo, fieldKey); } - @action - onClickRefresh = () => { - refreshVideos(); - }; + onClickRefresh = () => refreshVideos(); - onClickHangUp = () => { - hangup(); - }; + onClickHangUp = () => hangup(); render() { const content = ( @@ -71,8 +63,8 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV </div> ); - const frozen = !this.props.isSelected() || DocumentView.Interacting; - const classname = 'webBox-cont' + (this.props.isSelected() && Doc.ActiveTool === InkTool.None && !DocumentView.Interacting ? '-interactive' : ''); + const frozen = !this.props.isSelected() || SnappingManager.IsResizing; + const classname = 'webBox-cont' + (this.props.isSelected() && Doc.ActiveTool === InkTool.None && !SnappingManager.IsResizing ? '-interactive' : ''); return ( <> diff --git a/src/debug/Repl.tsx b/src/debug/Repl.tsx index b8081648f..a9f7c085f 100644 --- a/src/debug/Repl.tsx +++ b/src/debug/Repl.tsx @@ -1,13 +1,13 @@ +import { computed, observable } from 'mobx'; +import { observer } from 'mobx-react'; import * as React from 'react'; import * as ReactDOM from 'react-dom/client'; -import { observer } from 'mobx-react'; -import { observable, computed } from 'mobx'; +import { DocServer } from '../client/DocServer'; +import { resolvedPorts } from '../client/util/CurrentUserUtils'; import { CompileScript } from '../client/util/Scripting'; -import { makeInterface } from '../fields/Schema'; import { ObjectField } from '../fields/ObjectField'; import { RefField } from '../fields/RefField'; -import { DocServer } from '../client/DocServer'; -import { resolvedPorts } from '../client/util/CurrentUserUtils'; +import { makeInterface } from '../fields/Schema'; @observer class Repl extends React.Component { diff --git a/src/debug/Test.tsx b/src/debug/Test.tsx index 17d3db8fd..c906dcc03 100644 --- a/src/debug/Test.tsx +++ b/src/debug/Test.tsx @@ -1,13 +1,11 @@ import * as React from 'react'; -import * as ReactDOM from 'react-dom'; -import { DocServer } from '../client/DocServer'; -import { Doc } from '../fields/Doc'; -import * as Pdfjs from "pdfjs-dist"; -import "pdfjs-dist/web/pdf_viewer.css"; -import { Utils } from '../Utils'; -const PDFJSViewer = require("pdfjs-dist/web/pdf_viewer"); - -const protoId = "protoDoc"; -const delegateId = "delegateDoc"; +import * as ReactDOM from 'react-dom/client'; +console.log('ENTERED'); class Test extends React.Component { + render() { + return <div> HELLO WORLD </div>; + } } +const root = ReactDOM.createRoot(document.getElementById('root')!); + +root.render(<Test />); diff --git a/src/debug/Viewer.tsx b/src/debug/Viewer.tsx index 02038c426..f46adef77 100644 --- a/src/debug/Viewer.tsx +++ b/src/debug/Viewer.tsx @@ -1,19 +1,19 @@ -import { action, configure, observable, ObservableMap, Lambda } from 'mobx'; +import { action, configure, observable } from 'mobx'; +import { observer } from 'mobx-react'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; -import { observer } from 'mobx-react'; -import { Doc, Field, FieldResult, Opt } from '../fields/Doc'; import { DocServer } from '../client/DocServer'; +import { resolvedPorts } from '../client/util/CurrentUserUtils'; +import { CompileScript } from '../client/util/Scripting'; +import { EditableView } from '../client/views/EditableView'; +import CursorField from '../fields/CursorField'; +import { DateField } from '../fields/DateField'; +import { Doc, Field, FieldResult } from '../fields/Doc'; import { Id } from '../fields/FieldSymbols'; import { List } from '../fields/List'; -import { URLField } from '../fields/URLField'; -import { EditableView } from '../client/views/EditableView'; -import { CompileScript } from '../client/util/Scripting'; import { RichTextField } from '../fields/RichTextField'; -import { DateField } from '../fields/DateField'; import { ScriptField } from '../fields/ScriptField'; -import CursorField from '../fields/CursorField'; -import { resolvedPorts } from '../client/util/CurrentUserUtils'; +import { URLField } from '../fields/URLField'; DateField; URLField; diff --git a/src/fields/CursorField.ts b/src/fields/CursorField.ts index 46f5a8e1c..84917ae53 100644 --- a/src/fields/CursorField.ts +++ b/src/fields/CursorField.ts @@ -1,8 +1,7 @@ -import { ObjectField } from './ObjectField'; -import { observable } from 'mobx'; +import { createSimpleSchema, object, serializable } from 'serializr'; import { Deserializable } from '../client/util/SerializationHelper'; -import { serializable, createSimpleSchema, object, date } from 'serializr'; -import { FieldChanged, ToScriptString, ToString, Copy } from './FieldSymbols'; +import { Copy, FieldChanged, ToScriptString, ToString } from './FieldSymbols'; +import { ObjectField } from './ObjectField'; export type CursorPosition = { x: number; diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index feacdc9c5..ff416bbe7 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -1,44 +1,23 @@ -import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { saveAs } from 'file-saver'; -import { action, computed, observable, ObservableMap, ObservableSet, runInAction } from 'mobx'; +import { action, computed, makeObservable, observable, ObservableMap, ObservableSet, runInAction } from 'mobx'; import { computedFn } from 'mobx-utils'; import { alias, map, serializable } from 'serializr'; import { DocServer } from '../client/DocServer'; -import { DocumentType } from '../client/documents/DocumentTypes'; +import { CollectionViewType, DocumentType } from '../client/documents/DocumentTypes'; import { LinkManager } from '../client/util/LinkManager'; import { scriptingGlobal, ScriptingGlobals } from '../client/util/ScriptingGlobals'; import { afterDocDeserialize, autoObject, Deserializable, SerializationHelper } from '../client/util/SerializationHelper'; import { undoable } from '../client/util/UndoManager'; +import { DocumentView } from '../client/views/nodes/DocumentView'; import { decycle } from '../decycler/decycler'; import * as JSZipUtils from '../JSZipUtils'; -import { DashColor, incrementTitleCopy, intersectRect, Utils } from '../Utils'; +import { incrementTitleCopy, Utils } from '../Utils'; import { DateField } from './DateField'; import { - AclAdmin, - AclAugment, - AclEdit, - AclPrivate, - AclReadonly, - Animation, - AudioPlay, - CachedUpdates, - DirectLinks, - DocAcl, - DocCss, - DocData, - DocFields, - DocLayout, - FieldKeys, - FieldTuples, - ForceServerWrite, - Height, - Highlight, - Initializing, - Self, - SelfProxy, - UpdatingFromServer, - Width, -} from './DocSymbols'; + AclAdmin, AclAugment, AclEdit, AclPrivate, AclReadonly, Animation, AudioPlay, Brushed, CachedUpdates, DirectLinks, + DocAcl, DocCss, DocData, DocFields, DocLayout, DocViews, FieldKeys, FieldTuples, ForceServerWrite, Height, Highlight, + Initializing, Self, SelfProxy, UpdatingFromServer, Width +} from './DocSymbols'; // prettier-ignore import { Copy, FieldChanged, HandleUpdate, Id, Parent, ToScriptString, ToString } from './FieldSymbols'; import { InkField, InkTool } from './InkField'; import { List, ListFieldName } from './List'; @@ -50,8 +29,9 @@ import { listSpec } from './Schema'; import { ComputedField, ScriptField } from './ScriptField'; import { BoolCast, Cast, DocCast, FieldValue, NumCast, StrCast, ToConstructor } from './Types'; import { AudioField, CsvField, ImageField, PdfField, VideoField, WebField } from './URLField'; -import { containedFieldChangedHandler, deleteProperty, GetEffectiveAcl, getField, getter, makeEditable, makeReadOnly, normalizeEmail, setter, SharingPermissions, TraceMobx } from './util'; -import JSZip = require('jszip'); +import { containedFieldChangedHandler, deleteProperty, GetEffectiveAcl, getField, getter, makeEditable, makeReadOnly, setter, SharingPermissions } from './util'; +import * as JSZip from 'jszip'; +import { FieldViewProps } from '../client/views/nodes/FieldView'; export const LinkedTo = '-linkedTo'; export namespace Field { export function toKeyValueString(doc: Doc, key: string): string { @@ -63,25 +43,23 @@ export namespace Field { : '' : (onDelegate ? '=' : '') + (field instanceof ComputedField ? `:=${field.script.originalScript}` : field instanceof ScriptField ? `$=${field.script.originalScript}` : Field.toScriptString(field)); } - export function toScriptString(field: Field): string { + export function toScriptString(field: Field) { switch (typeof field) { - case 'string': - if (field.startsWith('{"')) return `'${field}'`; // bcz: hack ... want to quote the string the right way. if there are nested "'s, then use ' instead of ". In this case, test for the start of a JSON string of the format {"property": ... } and use outer 's instead of "s - return !field.includes('`') ? `\`${field}\`` : `"${field}"`; + case 'string': if (field.startsWith('{"')) return `'${field}'`; // bcz: hack ... want to quote the string the right way. if there are nested "'s, then use ' instead of ". In this case, test for the start of a JSON string of the format {"property": ... } and use outer 's instead of "s + return !field.includes('`') ? `\`${field}\`` : `"${field}"`; case 'number': - case 'boolean': - return String(field); - } - return field?.[ToScriptString]?.() ?? 'null'; + case 'boolean':return String(field); + default: return field?.[ToScriptString]?.() ?? 'null'; + } // prettier-ignore } - export function toString(field: Field): string { + export function toString(field: Field) { if (typeof field === 'string' || typeof field === 'number' || typeof field === 'boolean') return String(field); return field?.[ToString]?.() || ''; } export function IsField(field: any): field is Field; export function IsField(field: any, includeUndefined: true): field is Field | undefined; export function IsField(field: any, includeUndefined: boolean = false): field is Field | undefined { - return typeof field === 'string' || typeof field === 'number' || typeof field === 'boolean' || field instanceof ObjectField || field instanceof RefField || (includeUndefined && field === undefined); + return ['string', 'number', 'boolean'].includes(typeof field) || field instanceof ObjectField || field instanceof RefField || (includeUndefined && field === undefined); } export function Copy(field: any) { return field instanceof ObjectField ? ObjectField.MakeCopy(field) : field; @@ -104,11 +82,6 @@ export function DocListCastAsync(field: FieldResult, defaultValue?: Doc[]) { const list = Cast(field, listSpec(Doc)); return list ? Promise.all(list).then(() => list) : Promise.resolve(defaultValue); } - -export async function DocCastAsync(field: FieldResult): Promise<Opt<Doc>> { - return Cast(field, Doc); -} - export function NumListCast(field: FieldResult, defaultVal: number[] = []) { return Cast(field, listSpec('number'), defaultVal); } @@ -159,142 +132,55 @@ export function updateCachedAcls(doc: Doc) { @Deserializable('Doc', updateCachedAcls, ['id']) export class Doc extends RefField { @observable public static RecordingEvent = 0; + @observable public static GuestDashboard: Doc | undefined = undefined; + @observable public static GuestTarget: Doc | undefined = undefined; + @observable public static GuestMobile: Doc | undefined = undefined; + public static CurrentUserEmail: string = ''; - // this isn't really used at the moment, but is intended to indicate whether ink stroke are passed through a gesture recognizer - static GetRecognizeGestures() { - return BoolCast(Doc.UserDoc()._recognizeGestures); - } - static SetRecognizeGestures(show: boolean) { - Doc.UserDoc()._recognizeGestures = show; - } - - // - // This controls whether fontIconButtons will display labels under their icons or not - // - static GetShowIconLabels() { - return BoolCast(Doc.UserDoc()._showLabel); - } - static SetShowIconLabels(show: boolean) { - Doc.UserDoc()._showLabel = show; - } - @observable public static CurrentlyLoading: Doc[] = []; // this assignment doesn't work. the actual assignment happens in DocumentManager's constructor - // removes from currently loading display - @action - public static removeCurrentlyLoading(doc: Doc) { - if (Doc.CurrentlyLoading) { - const index = Doc.CurrentlyLoading.indexOf(doc); - index !== -1 && Doc.CurrentlyLoading.splice(index, 1); - } - } - - // adds doc to currently loading display - @action - public static addCurrentlyLoading(doc: Doc) { - if (Doc.CurrentlyLoading.indexOf(doc) === -1) { - Doc.CurrentlyLoading.push(doc); - } - } + public static get MySharedDocs() { return DocCast(Doc.UserDoc().mySharedDocs); } // prettier-ignore + public static get MyUserDocView() { return DocCast(Doc.UserDoc().myUserDocView); } // prettier-ignore + public static get MyDockedBtns() { return DocCast(Doc.UserDoc().myDockedBtns); } // prettier-ignore + public static get MySearcher() { return DocCast(Doc.UserDoc().mySearcher); } // prettier-ignore + public static get MyHeaderBar() { return DocCast(Doc.UserDoc().myHeaderBar); } // prettier-ignore + public static get MyLeftSidebarMenu() { return DocCast(Doc.UserDoc().myLeftSidebarMenu); } // prettier-ignore + public static get MyLeftSidebarPanel() { return DocCast(Doc.UserDoc().myLeftSidebarPanel); } // prettier-ignore + public static get MyContextMenuBtns() { return DocCast(Doc.UserDoc().myContextMenuBtns); } // prettier-ignore + public static get MyTopBarBtns() { return DocCast(Doc.UserDoc().myTopBarBtns); } // prettier-ignore + public static get MyRecentlyClosed() { return DocCast(Doc.UserDoc().myRecentlyClosed); } // prettier-ignore + public static get MyTrails() { return DocCast(Doc.ActiveDashboard?.myTrails); } // prettier-ignore + public static get MyCalendars() { return DocCast(Doc.ActiveDashboard?.myCalendars); } // prettier-ignore + public static get MyOverlayDocs() { return DocListCast(Doc.ActiveDashboard?.myOverlayDocs ?? DocCast(Doc.UserDoc().myOverlayDocs)?.data); } // prettier-ignore + public static get MyPublishedDocs() { return DocListCast(Doc.ActiveDashboard?.myPublishedDocs ?? DocCast(Doc.UserDoc().myPublishedDocs)?.data); } // prettier-ignore + public static get MyDashboards() { return DocCast(Doc.UserDoc().myDashboards); } // prettier-ignore + public static get MyTemplates() { return DocCast(Doc.UserDoc().myTemplates); } // prettier-ignore + public static get MyImports() { return DocCast(Doc.UserDoc().myImports); } // prettier-ignore + public static get MyFilesystem() { return DocCast(Doc.UserDoc().myFilesystem); } // prettier-ignore + public static get MyTools() { return DocCast(Doc.UserDoc().myTools); } // prettier-ignore + public static get noviceMode() { return BoolCast(Doc.UserDoc().noviceMode); } // prettier-ignore + public static set noviceMode(val) { Doc.UserDoc().noviceMode = val; } // prettier-ignore + public static get IsSharingEnabled() { return BoolCast(Doc.UserDoc().isSharingEnabled); } // prettier-ignore + public static set IsSharingEnabled(val) { Doc.UserDoc().isSharingEnabled = val; } // prettier-ignore + public static get defaultAclPrivate() { return Doc.UserDoc().defaultAclPrivate; } // prettier-ignore + public static set defaultAclPrivate(val) { Doc.UserDoc().defaultAclPrivate = val; } // prettier-ignore + public static get ActivePage() { return StrCast(Doc.UserDoc().activePage); } // prettier-ignore + public static set ActivePage(val) { Doc.UserDoc().activePage = val; } // prettier-ignore + public static get ActiveTool(): InkTool { return StrCast(Doc.UserDoc().activeTool, InkTool.None) as InkTool; } // prettier-ignore + public static set ActiveTool(tool:InkTool){ Doc.UserDoc().activeTool = tool; } // prettier-ignore + public static get ActivePresentation() { return DocCast(Doc.ActiveDashboard?.activePresentation) as Opt<Doc>; } // prettier-ignore + public static set ActivePresentation(val) { Doc.ActiveDashboard && (Doc.ActiveDashboard.activePresentation = val) } // prettier-ignore + public static get ActiveDashboard() { return DocCast(Doc.UserDoc().activeDashboard); } // prettier-ignore + public static set ActiveDashboard(val: Opt<Doc>) { Doc.UserDoc().activeDashboard = val; } // prettier-ignore + + public static IsInMyOverlay(doc: Doc) { return Doc.MyOverlayDocs.includes(doc); } // prettier-ignore + public static AddToMyOverlay(doc: Doc) { Doc.ActiveDashboard?.myOverlayDocs ? Doc.AddDocToList(Doc.ActiveDashboard, 'myOverlayDocs', doc) : Doc.AddDocToList(DocCast(Doc.UserDoc().myOverlayDocs), undefined, doc); } // prettier-ignore + public static RemFromMyOverlay(doc: Doc) { Doc.ActiveDashboard?.myOverlayDocs ? Doc.RemoveDocFromList(Doc.ActiveDashboard,'myOverlayDocs', doc) : Doc.RemoveDocFromList(DocCast(Doc.UserDoc().myOverlayDocs), undefined, doc); } // prettier-ignore + public static AddToMyPublished(doc: Doc) { Doc.ActiveDashboard?.myPublishedDocs ? Doc.AddDocToList(Doc.ActiveDashboard, 'myPublishedDocs', doc) : Doc.AddDocToList(DocCast(Doc.UserDoc().myPublishedDocs), undefined, doc); } // prettier-ignore + public static RemFromMyPublished(doc: Doc){ Doc.ActiveDashboard?.myPublishedDocs ? Doc.RemoveDocFromList(Doc.ActiveDashboard,'myPublishedDocs', doc) : Doc.RemoveDocFromList(DocCast(Doc.UserDoc().myPublishedDocs), undefined, doc); } // prettier-ignore + public static IsComicStyle(doc?: Doc) { return doc && Doc.ActiveDashboard && !Doc.IsSystem(doc) && Doc.UserDoc().renderStyle === 'comic' ; } // prettier-ignore - @observable public static GuestDashboard: Doc | undefined; - @observable public static GuestTarget: Doc | undefined; - @observable public static GuestMobile: Doc | undefined; - public static get MySharedDocs() { - return DocCast(Doc.UserDoc().mySharedDocs); - } - public static get MyUserDocView() { - return DocCast(Doc.UserDoc().myUserDocView); - } - public static get MyDockedBtns() { - return DocCast(Doc.UserDoc().myDockedBtns); - } - public static get MySearcher() { - return DocCast(Doc.UserDoc().mySearcher); - } - public static get MyHeaderBar() { - return DocCast(Doc.UserDoc().myHeaderBar); - } - public static get MyLeftSidebarMenu() { - return DocCast(Doc.UserDoc().myLeftSidebarMenu); - } - public static get MyLeftSidebarPanel() { - return DocCast(Doc.UserDoc().myLeftSidebarPanel); - } - public static get MyContextMenuBtns() { - return DocCast(Doc.UserDoc().myContextMenuBtns); - } - public static get MyTopBarBtns() { - return DocCast(Doc.UserDoc().myTopBarBtns); - } - public static get MyRecentlyClosed() { - return DocCast(Doc.UserDoc().myRecentlyClosed); - } - public static get MyTrails() { - return DocCast(Doc.ActiveDashboard?.myTrails); - } - public static IsInMyOverlay(doc: Doc) { - return DocListCast(Doc.MyOverlayDocs?.data).includes(doc); - } - public static AddToMyOverlay(doc: Doc) { - Doc.AddDocToList(Doc.MyOverlayDocs, undefined, doc); - } - public static RemFromMyOverlay(doc: Doc) { - Doc.RemoveDocFromList(Doc.MyOverlayDocs, undefined, doc); - } - public static get MyOverlayDocs() { - return DocCast(Doc.UserDoc().myOverlayDocs); - } - public static get MyPublishedDocs() { - return DocCast(Doc.UserDoc().myPublishedDocs); - } - public static get MyDashboards() { - return DocCast(Doc.UserDoc().myDashboards); - } - public static get MyTemplates() { - return DocCast(Doc.UserDoc().myTemplates); - } - public static get MyImports() { - return DocCast(Doc.UserDoc().myImports); - } - public static get MyFilesystem() { - return DocCast(Doc.UserDoc().myFilesystem); - } - public static get MyTools() { - return DocCast(Doc.UserDoc().myTools); - } - public static get ActivePage() { - return StrCast(Doc.UserDoc().activePage); - } - public static set ActivePage(val) { - Doc.UserDoc().activePage = val; - DocServer.UPDATE_SERVER_CACHE(); - } - public static IsComicStyle(doc?: Doc) { - return doc && Doc.ActiveDashboard && !Doc.IsSystem(doc) && Doc.UserDoc().renderStyle === 'comic'; - } - public static get ActiveDashboard() { - return DocCast(Doc.UserDoc().activeDashboard); - } - public static set ActiveDashboard(val: Doc | undefined) { - const overlays = Cast(Doc.MyOverlayDocs.data, listSpec(Doc), null); - overlays && (overlays.length = 0); - Doc.UserDoc().activeDashboard = val; - } - public static set ActiveTool(tool: InkTool) { - Doc.UserDoc().activeTool = tool; - } - public static get ActiveTool(): InkTool { - return StrCast(Doc.UserDoc().activeTool, InkTool.None) as InkTool; - } - public static get ActivePresentation(): Opt<Doc> { - return DocCast(Doc.ActiveDashboard?.activePresentation); - } - public static set ActivePresentation(val) { - if (Doc.ActiveDashboard) { - Doc.ActiveDashboard.activePresentation = val; - } - } constructor(id?: FieldId, forceSave?: boolean) { super(id); + makeObservable(this); const docProxy = new Proxy<this>(this, { set: setter, get: getter, @@ -302,7 +188,36 @@ export class Doc extends RefField { has: (target, key) => GetEffectiveAcl(target) !== AclPrivate && key in target.__fieldTuples, ownKeys: target => { const keys = GetEffectiveAcl(target) !== AclPrivate ? Object.keys(target[FieldKeys]) : []; - return [...keys, '__LAYOUT__']; + return [ + ...keys, + AclAdmin, + AclAugment, + AclEdit, + AclPrivate, + AclReadonly, + Animation, + AudioPlay, + Brushed, + CachedUpdates, + DirectLinks, + DocAcl, + DocCss, + DocData, + DocFields, + DocLayout, + DocViews, + FieldKeys, + FieldTuples, + ForceServerWrite, + Height, + Highlight, + Initializing, + Self, + SelfProxy, + UpdatingFromServer, + Width, + '__LAYOUT__', + ]; }, getOwnPropertyDescriptor: (target, prop) => { if (prop.toString() === '__LAYOUT__' || !(prop in target[FieldKeys])) { @@ -351,20 +266,19 @@ export class Doc extends RefField { @observable public [DocAcl]: { [key: string]: symbol } = {}; @observable public [DocCss]: number = 0; // incrementer denoting a change to CSS layout @observable public [DirectLinks] = new ObservableSet<Doc>(); - @observable public [AudioPlay]: any; // meant to store sound object from Howl - @observable public [Animation]: Opt<Doc>; + @observable public [AudioPlay]: any = undefined; // meant to store sound object from Howl + @observable public [Animation]: Opt<Doc> = undefined; @observable public [Highlight]: boolean = false; - static __Anim(Doc: Doc) { - // for debugging to print AnimationSym field easily. - return Doc[Animation]; - } + @observable public [Brushed]: boolean = false; + @observable public [DocViews] = new ObservableSet<DocumentView>(); + private [Self] = this; + private [SelfProxy]: any; private [UpdatingFromServer]: boolean = false; private [ForceServerWrite]: boolean = false; - public [Initializing]: boolean = false; + private [CachedUpdates]: { [key: string]: () => void | Promise<any> } = {}; - private [Self] = this; - private [SelfProxy]: any; + public [Initializing]: boolean = false; public [FieldChanged] = (diff: undefined | { op: '$addToSet' | '$remFromSet' | '$set'; items: Field[] | undefined; length: number | undefined; hint?: any }, serverOp: any) => { if (!this[UpdatingFromServer] || this[ForceServerWrite]) { DocServer.UpdateField(this[Id], serverOp); @@ -375,9 +289,7 @@ export class Doc extends RefField { public [Height] = () => NumCast(this[SelfProxy]._height); public [ToScriptString] = () => `idToDoc("${this[Self][Id]}")`; public [ToString] = () => `Doc(${GetEffectiveAcl(this[SelfProxy]) === AclPrivate ? '-inaccessible-' : this[SelfProxy].title})`; - public get [DocLayout]() { - return this[SelfProxy].__LAYOUT__; - } + public get [DocLayout]() { return this[SelfProxy].__LAYOUT__; } // prettier-ignore public get [DocData](): Doc { const self = this[SelfProxy]; return self.resolvedDataDoc && !self.isTemplateForField ? self : Doc.GetProto(Cast(Doc.Layout(self).resolvedDataDoc, Doc, null) || self); @@ -398,29 +310,6 @@ export class Doc extends RefField { return undefined; } - private [CachedUpdates]: { [key: string]: () => void | Promise<any> } = {}; - public static get noviceMode() { - return Doc.UserDoc().noviceMode as boolean; - } - public static set noviceMode(val) { - Doc.UserDoc().noviceMode = val; - } - public static get IsSharingEnabled() { - return Doc.UserDoc().isSharingEnabled as boolean; - } - public static set IsSharingEnabled(val) { - Doc.UserDoc().isSharingEnabled = val; - } - public static get defaultAclPrivate() { - return Doc.UserDoc().defaultAclPrivate; - } - public static set defaultAclPrivate(val) { - Doc.UserDoc().defaultAclPrivate = val; - } - public static CurrentUserEmail: string = ''; - public static get CurrentUserEmailNormalized() { - return normalizeEmail(Doc.CurrentUserEmail); - } public async [HandleUpdate](diff: any) { const set = diff.$set; const sameAuthor = this.author === Doc.CurrentUserEmail; @@ -477,17 +366,6 @@ export class Doc extends RefField { } export namespace Doc { - // export function GetAsync(doc: Doc, key: string, ignoreProto: boolean = false): Promise<Field | undefined> { - // const self = doc[Self]; - // return new Promise(res => getField(self, key, ignoreProto, res)); - // } - // export function GetTAsync<T extends Field>(doc: Doc, key: string, ctor: ToConstructor<T>, ignoreProto: boolean = false): Promise<T | undefined> { - // return new Promise(async res => { - // const field = await GetAsync(doc, key, ignoreProto); - // return Cast(field, ctor); - // }); - // } - export function SetContainer(doc: Doc, container: Doc) { doc.embedContainer = container; } @@ -546,7 +424,7 @@ export namespace Doc { // export async function SetInPlace(doc: Doc, key: string, value: Field | undefined, defaultProto: boolean) { if (key.startsWith('_')) key = key.substring(1); - const hasProto = Doc.GetProto(doc) !== doc ? Doc.GetProto(doc) : undefined; + const hasProto = doc[DocData] !== doc ? doc[DocData] : undefined; const onDeleg = Object.getOwnPropertyNames(doc).indexOf(key) !== -1; const onProto = hasProto && Object.getOwnPropertyNames(hasProto).indexOf(key) !== -1; if (onDeleg || !hasProto || (!onProto && !defaultProto)) { @@ -621,10 +499,9 @@ export namespace Doc { /** * @returns the index of doc toFind in list of docs, -1 otherwise */ - export function IndexOf(toFind: Doc, list: Doc[], allowProtos: boolean = true) { - let index = list.reduce((p, v, i) => (v instanceof Doc && v === toFind ? i : p), -1); - index = allowProtos && index !== -1 ? index : list.reduce((p, v, i) => (v instanceof Doc && Doc.AreProtosEqual(v, toFind) ? i : p), -1); - return index; // list.findIndex(doc => doc === toFind || Doc.AreProtosEqual(doc, toFind)); + export function IndexOf(toFind: Doc, list: Doc[]) { + const index = list.indexOf(toFind); + return index !== -1 ? index : list.findIndex(doc => Doc.AreProtosEqual(doc, toFind)); } /** @@ -634,7 +511,7 @@ export namespace Doc { export function RemoveDocFromList(listDoc: Doc, fieldKey: string | undefined, doc: Doc) { const key = fieldKey ? fieldKey : Doc.LayoutFieldKey(listDoc); if (listDoc[key] === undefined) { - Doc.GetProto(listDoc)[key] = new List<Doc>(); + listDoc[DocData][key] = new List<Doc>(); } const list = Cast(listDoc[key], listSpec(Doc)); if (list) { @@ -654,15 +531,14 @@ export namespace Doc { export function AddDocToList(listDoc: Doc, fieldKey: string | undefined, doc: Doc, relativeTo?: Doc, before?: boolean, first?: boolean, allowDuplicates?: boolean, reversed?: boolean) { const key = fieldKey ? fieldKey : Doc.LayoutFieldKey(listDoc); if (listDoc[key] === undefined) { - Doc.GetProto(listDoc)[key] = new List<Doc>(); + listDoc[DocData][key] = new List<Doc>(); } const list = Cast(listDoc[key], listSpec(Doc)); if (list) { - if (allowDuplicates !== true) { - const pind = list.reduce((l, d, i) => (d instanceof Doc && d[Id] === doc[Id] ? i : l), -1); + if (!allowDuplicates) { + const pind = list.findIndex(d => d instanceof Doc && d[Id] === doc[Id]); if (pind !== -1) { return true; - //list.splice(pind, 1); // bcz: this causes schemaView docs in the Catalog to move to the bottom of the schema view when they are dragged even though they haven't left the collection } } if (first) { @@ -682,41 +558,27 @@ export namespace Doc { return false; } - /** - * Computes the bounds of the contents of a set of documents. - */ - export function ComputeContentBounds(docList: Doc[]) { - const bounds = docList.reduce( - (bounds, doc) => ({ - x: Math.min(NumCast(doc.x), bounds.x), - y: Math.min(NumCast(doc.y), bounds.y), - r: Math.max(NumCast(doc.x) + doc[Width](), bounds.r), - b: Math.max(NumCast(doc.y) + doc[Height](), bounds.b), - }), - { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: -Number.MAX_VALUE, b: -Number.MAX_VALUE } - ); - return bounds; - } - export function MakeEmbedding(doc: Doc, id?: string) { - const embedding = !GetT(doc, 'isDataDoc', 'boolean', true) && doc.proto ? Doc.MakeCopy(doc, undefined, id) : Doc.MakeDelegate(doc, id); + const embedding = (!GetT(doc, 'isDataDoc', 'boolean', true) && doc.proto) || doc.type === DocumentType.CONFIG ? Doc.MakeCopy(doc, undefined, id) : Doc.MakeDelegate(doc, id); const layout = Doc.LayoutField(embedding); if (layout instanceof Doc && layout !== embedding && layout === Doc.Layout(embedding)) { Doc.SetLayout(embedding, Doc.MakeEmbedding(layout)); } embedding.createdFrom = doc; - embedding.proto_embeddingId = Doc.GetProto(doc).proto_embeddingId = DocListCast(Doc.GetProto(doc).proto_embeddings).length - 1; - embedding.title = ComputedField.MakeFunction(`renameEmbedding(this)`); + embedding.proto_embeddingId = doc[DocData].proto_embeddingId = DocListCast(doc[DocData].proto_embeddings).length - 1; + !Doc.GetT(embedding, 'title', 'string', true) && (embedding.title = ComputedField.MakeFunction(`renameEmbedding(this)`)); embedding.author = Doc.CurrentUserEmail; - Doc.AddDocToList(Doc.GetProto(doc)[DocData], 'proto_embeddings', embedding); + Doc.AddDocToList(doc[DocData], 'proto_embeddings', embedding); return embedding; } export function BestEmbedding(doc: Doc) { - const bestEmbedding = Doc.GetProto(doc) ? [doc, ...DocListCast(doc.proto_embeddings)].find(doc => !doc.embedContainer && doc.author === Doc.CurrentUserEmail) : doc; - bestEmbedding && Doc.AddDocToList(Doc.GetProto(doc), 'protoEmbeddings', doc); + const dataDoc = doc[DocData]; + const availableEmbeddings = DocListCast(dataDoc.proto_embeddings); + const bestEmbedding = [...(dataDoc !== doc ? [doc] : []), ...availableEmbeddings].find(doc => !doc.embedContainer && doc.author === Doc.CurrentUserEmail); + bestEmbedding && Doc.AddDocToList(dataDoc, 'protoEmbeddings', doc); return bestEmbedding ?? Doc.MakeEmbedding(doc); } @@ -774,7 +636,7 @@ export namespace Doc { } else if (field instanceof RefField) { assignKey(field); } else if (cfield instanceof ComputedField) { - assignKey(cfield[Copy]()); // ComputedField.MakeFunction(cfield.script.originalScript)); + assignKey(cfield[Copy]()); } else if (field instanceof ObjectField) { await copyObjectField(field); } else if (field instanceof Promise) { @@ -808,9 +670,7 @@ export namespace Doc { const docAtKey = DocCast(clone[key]); if (docAtKey && !Doc.IsSystem(docAtKey)) { if (!Array.from(cloneMap.values()).includes(docAtKey)) { - if (cloneMap.has(docAtKey[Id])) { - clone[key] = cloneMap.get(docAtKey[Id]); - } else clone[key] = undefined; + clone[key] = cloneMap.get(docAtKey[Id]); } else { repairClone(docAtKey, cloneMap, visited); } @@ -925,7 +785,7 @@ export namespace Doc { }); } - const _pendingMap: Map<string, boolean> = new Map(); + const _pendingMap = new Set<string>(); // // Returns an expanded template layout for a target data document if there is a template relationship // between the two. If so, the layoutDoc is expanded into a new document that inherits the properties @@ -947,23 +807,25 @@ export namespace Doc { if (templateLayoutDoc.resolvedDataDoc instanceof Promise) { expandedTemplateLayout = undefined; - _pendingMap.set(targetDoc[Id] + expandedLayoutFieldKey, true); - } else if (expandedTemplateLayout === undefined && !_pendingMap.get(targetDoc[Id] + expandedLayoutFieldKey)) { - if (templateLayoutDoc.resolvedDataDoc === (targetDoc.rootDocument || Doc.GetProto(targetDoc))) { + _pendingMap.add(targetDoc[Id] + expandedLayoutFieldKey); + } else if (expandedTemplateLayout === undefined && !_pendingMap.has(targetDoc[Id] + expandedLayoutFieldKey)) { + if (templateLayoutDoc.resolvedDataDoc === (targetDoc.rootDocument ?? Doc.GetProto(targetDoc))) { expandedTemplateLayout = templateLayoutDoc; // reuse an existing template layout if its for the same document with the same params } else { templateLayoutDoc.resolvedDataDoc && (templateLayoutDoc = DocCast(templateLayoutDoc.proto, templateLayoutDoc)); // if the template has already been applied (ie, a nested template), then use the template's prototype if (!targetDoc[expandedLayoutFieldKey]) { - _pendingMap.set(targetDoc[Id] + expandedLayoutFieldKey, true); + _pendingMap.add(targetDoc[Id] + expandedLayoutFieldKey); setTimeout( action(() => { const newLayoutDoc = Doc.MakeDelegate(templateLayoutDoc, undefined, '[' + templateLayoutDoc.title + ']'); - newLayoutDoc.rootDocument = targetDoc; const dataDoc = Doc.GetProto(targetDoc); + newLayoutDoc.rootDocument = targetDoc; + newLayoutDoc.embedContainer = targetDoc; newLayoutDoc.resolvedDataDoc = dataDoc; newLayoutDoc['acl-Guest'] = SharingPermissions.Edit; - if (dataDoc[templateField] === undefined && templateLayoutDoc[templateField] instanceof List && (templateLayoutDoc[templateField] as any).length) { - dataDoc[templateField] = ComputedField.MakeFunction(`ObjectField.MakeCopy(templateLayoutDoc["${templateField}"] as List)`, { templateLayoutDoc: Doc.name }, { templateLayoutDoc }); + if (dataDoc[templateField] === undefined && (templateLayoutDoc[templateField] as any)?.length) { + dataDoc[templateField] = ObjectField.MakeCopy(templateLayoutDoc[templateField] as List<Doc>); + // ComputedField.MakeFunction(`ObjectField.MakeCopy(templateLayoutDoc["${templateField}"])`, { templateLayoutDoc: Doc.name }, { templateLayoutDoc }); } targetDoc[expandedLayoutFieldKey] = newLayoutDoc; @@ -987,31 +849,9 @@ export namespace Doc { return { layout: Doc.expandTemplateLayout(childDoc, resolvedDataDoc), data: resolvedDataDoc }; } - export function Overwrite(doc: Doc, overwrite: Doc, copyProto: boolean = false): Doc { - Object.keys(doc).forEach(key => { - const field = ProxyField.WithoutProxy(() => doc[key]); - if (key === 'proto' && copyProto) { - if (doc.proto instanceof Doc && overwrite.proto instanceof Doc) { - overwrite[key] = Doc.Overwrite(doc.proto, overwrite.proto); - } - } else { - if (field instanceof RefField) { - overwrite[key] = field; - } else if (field instanceof ObjectField) { - overwrite[key] = ObjectField.MakeCopy(field); - } else if (field instanceof Promise) { - debugger; //This shouldn't happend... - } else { - overwrite[key] = field; - } - } - }); - - return overwrite; - } - export function FindReferences(infield: Doc | List<any>, references: Set<Doc>, system: boolean | undefined) { - if (infield instanceof List<any>) { + if (infield instanceof Promise) return; + if (!(infield instanceof Doc)) { infield.forEach(val => (val instanceof Doc || val instanceof List) && FindReferences(val, references, system)); return; } @@ -1020,7 +860,7 @@ export namespace Doc { references.add(doc); return; } - const excludeLists = ['My Recently Closed', 'My Header Bar', 'My Dashboards'].includes(StrCast(doc.title)); + const excludeLists = [Doc.MyRecentlyClosed, Doc.MyHeaderBar, Doc.MyDashboards].includes(doc); if (system !== undefined && ((system && !Doc.IsSystem(doc)) || (!system && Doc.IsSystem(doc)))) return; references.add(doc); Object.keys(doc).forEach(key => { @@ -1064,7 +904,7 @@ export namespace Doc { } export function MakeCopy(doc: Doc, copyProto: boolean = false, copyProtoId?: string, retitle = false): Doc { - const copy = new Doc(copyProtoId, true); + const copy = runInAction(() => new Doc(copyProtoId, true)); updateCachedAcls(copy); const exclude = [...StrListCast(doc.cloneFieldFilter), 'dragFactory_count', 'cloneFieldFilter']; Object.keys(doc) @@ -1097,7 +937,7 @@ export namespace Doc { Doc.GetProto(copy).embedContainer = undefined; Doc.GetProto(copy).proto_embeddings = new List<Doc>([copy]); } else { - Doc.AddDocToList(Doc.GetProto(copy)[DocData], 'proto_embeddings', copy); + Doc.AddDocToList(copy[DocData], 'proto_embeddings', copy); } copy.embedContainer = undefined; if (retitle) { @@ -1202,9 +1042,6 @@ export namespace Doc { // change it to render the target metadata field instead of what it was rendering before and assign it to the template field layout document. Doc.Layout(templateField).layout = templateFieldLayoutString.replace(/fieldKey={'[^']*'}/, `fieldKey={'${metadataFieldKey}'}`); - // assign the template field doc a delegate of any extension document that was previously used to render the template field (since extension doc's carry rendering informatino) - Doc.Layout(templateField)[metadataFieldKey + '_ext'] = Doc.MakeDelegate(templateField[templateFieldLayoutString?.split("'")[1] + '_ext'] as Doc); - return true; } @@ -1217,30 +1054,16 @@ export namespace Doc { return '/doc/' + (doc ? doc[Id] : ''); } - export function overlapping(doc1: Doc, doc2: Doc, clusterDistance: number) { - const doc2Layout = Doc.Layout(doc2); - const doc1Layout = Doc.Layout(doc1); - const x2 = NumCast(doc2.x) - clusterDistance; - const y2 = NumCast(doc2.y) - clusterDistance; - const w2 = NumCast(doc2Layout._width) + clusterDistance; - const h2 = NumCast(doc2Layout._height) + clusterDistance; - const x = NumCast(doc1.x) - clusterDistance; - const y = NumCast(doc1.y) - clusterDistance; - const w = NumCast(doc1Layout._width) + clusterDistance; - const h = NumCast(doc1Layout._height) + clusterDistance; - return doc1.z === doc2.z && intersectRect({ left: x, top: y, width: w, height: h }, { left: x2, top: y2, width: w2, height: h2 }); - } - - export function isBrushedHighlightedDegree(doc: Doc) { - return Doc.IsHighlighted(doc) ? DocBrushStatus.highlighted : Doc.IsBrushedDegree(doc); - } - export function isBrushedHighlightedDegreeUnmemoized(doc: Doc) { - return Doc.IsHighlighted(doc) ? DocBrushStatus.highlighted : Doc.IsBrushedDegreeUnmemoized(doc); + export function GetBrushHighlightStatus(doc: Doc) { + return Doc.IsHighlighted(doc) ? DocBrushStatus.highlighted : Doc.GetBrushStatus(doc); } - export class DocBrush { - BrushedDoc: ObservableMap<Doc, boolean> = new ObservableMap(); + BrushedDoc = new Set<Doc>(); SearchMatchDoc: ObservableMap<Doc, { searchMatch: number }> = new ObservableMap(); + brushDoc = action((doc: Doc, unbrush: boolean) => { + unbrush ? this.BrushedDoc.delete(doc) : this.BrushedDoc.add(doc); + doc[Brushed] = !unbrush; + }); } export const brushManager = new DocBrush(); @@ -1262,26 +1085,26 @@ export namespace Doc { export function LayoutField(doc: Doc) { return doc[StrCast(doc.layout_fieldKey, 'layout')]; } - export function LayoutFieldKey(doc: Doc): string { - return StrCast(Doc.Layout(doc).layout).split("'")[1]; // bcz: TODO check on this . used to always reference 'layout', now it uses the layout speicfied by the current layout_fieldKey + export function LayoutFieldKey(doc: Doc, templateLayoutString?: string): string { + return StrCast(templateLayoutString || Doc.Layout(doc).layout).split("'")[1]; // bcz: TODO check on this . used to always reference 'layout', now it uses the layout speicfied by the current layout_fieldKey } export function NativeAspect(doc: Doc, dataDoc?: Doc, useDim?: boolean) { return Doc.NativeWidth(doc, dataDoc, useDim) / (Doc.NativeHeight(doc, dataDoc, useDim) || 1); } export function NativeWidth(doc?: Doc, dataDoc?: Doc, useWidth?: boolean) { - return !doc ? 0 : NumCast(doc._nativeWidth, NumCast((dataDoc || doc)[Doc.LayoutFieldKey(doc) + '_nativeWidth'], useWidth ? doc[Width]() : 0)); + return !doc ? 0 : NumCast(doc._nativeWidth, NumCast((dataDoc || doc)[Doc.LayoutFieldKey(doc) + '_nativeWidth'], useWidth ? NumCast(doc._width) : 0)); } export function NativeHeight(doc?: Doc, dataDoc?: Doc, useHeight?: boolean) { if (!doc) return 0; - const nheight = (Doc.NativeWidth(doc, dataDoc, useHeight) * doc[Height]()) / doc[Width](); - const dheight = NumCast((dataDoc || doc)[Doc.LayoutFieldKey(doc) + '_nativeHeight'], useHeight ? doc[Height]() : 0); + const nheight = (Doc.NativeWidth(doc, dataDoc, useHeight) / NumCast(doc._width)) * NumCast(doc._height); // divide before multiply to avoid floating point errrorin case nativewidth = width + const dheight = NumCast((dataDoc || doc)[Doc.LayoutFieldKey(doc) + '_nativeHeight'], useHeight ? NumCast(doc._height) : 0); return NumCast(doc._nativeHeight, nheight || dheight); } export function SetNativeWidth(doc: Doc, width: number | undefined, fieldKey?: string) { - doc[(fieldKey ?? Doc.LayoutFieldKey(doc)) + '_nativeWidth'] = width; + doc[(fieldKey || Doc.LayoutFieldKey(doc)) + '_nativeWidth'] = width; } export function SetNativeHeight(doc: Doc, height: number | undefined, fieldKey?: string) { - doc[(fieldKey ?? Doc.LayoutFieldKey(doc)) + '_nativeHeight'] = height; + doc[(fieldKey || Doc.LayoutFieldKey(doc)) + '_nativeHeight'] = height; } const manager = new UserDocData(); @@ -1305,22 +1128,22 @@ export namespace Doc { } const isSearchMatchCache = computedFn(function IsSearchMatch(doc: Doc) { - return brushManager.SearchMatchDoc.has(doc) ? brushManager.SearchMatchDoc.get(doc) : brushManager.SearchMatchDoc.has(Doc.GetProto(doc)) ? brushManager.SearchMatchDoc.get(Doc.GetProto(doc)) : undefined; + return brushManager.SearchMatchDoc.has(doc) ? brushManager.SearchMatchDoc.get(doc) : brushManager.SearchMatchDoc.has(doc[DocData]) ? brushManager.SearchMatchDoc.get(doc[DocData]) : undefined; }); export function IsSearchMatch(doc: Doc) { return isSearchMatchCache(doc); } export function IsSearchMatchUnmemoized(doc: Doc) { - return brushManager.SearchMatchDoc.has(doc) ? brushManager.SearchMatchDoc.get(doc) : brushManager.SearchMatchDoc.has(Doc.GetProto(doc)) ? brushManager.SearchMatchDoc.get(Doc.GetProto(doc)) : undefined; + return brushManager.SearchMatchDoc.has(doc) ? brushManager.SearchMatchDoc.get(doc) : brushManager.SearchMatchDoc.has(doc[DocData]) ? brushManager.SearchMatchDoc.get(doc[DocData]) : undefined; } export function SetSearchMatch(doc: Doc, results: { searchMatch: number }) { - if (doc && GetEffectiveAcl(doc) !== AclPrivate && GetEffectiveAcl(Doc.GetProto(doc)) !== AclPrivate) { + if (doc && GetEffectiveAcl(doc) !== AclPrivate && GetEffectiveAcl(doc[DocData]) !== AclPrivate) { brushManager.SearchMatchDoc.set(doc, results); } return doc; } export function SearchMatchNext(doc: Doc, backward: boolean) { - if (!doc || GetEffectiveAcl(doc) === AclPrivate || GetEffectiveAcl(Doc.GetProto(doc)) === AclPrivate) return doc; + if (!doc || GetEffectiveAcl(doc) === AclPrivate || GetEffectiveAcl(doc[DocData]) === AclPrivate) return doc; const result = brushManager.SearchMatchDoc.get(doc); const num = Math.abs(result?.searchMatch || 0) + 1; runInAction(() => result && brushManager.SearchMatchDoc.set(doc, { searchMatch: backward ? -num : num })); @@ -1330,63 +1153,29 @@ export namespace Doc { brushManager.SearchMatchDoc.clear(); } - const isBrushedCache = computedFn(function IsBrushed(doc: Doc) { - return brushManager.BrushedDoc.has(doc) || brushManager.BrushedDoc.has(Doc.GetProto(doc)); - }); - export function IsBrushed(doc: Doc) { - return isBrushedCache(doc); - } - export enum DocBrushStatus { unbrushed = 0, protoBrushed = 1, selfBrushed = 2, highlighted = 3, } - // don't bother memoizing (caching) the result if called from a non-reactive context. (plus this avoids a warning message) - export function IsBrushedDegreeUnmemoized(doc: Doc) { - if (!doc || GetEffectiveAcl(doc) === AclPrivate || GetEffectiveAcl(Doc.GetProto(doc)) === AclPrivate || doc.opacity === 0) return DocBrushStatus.unbrushed; - const status = brushManager.BrushedDoc.has(doc) ? DocBrushStatus.selfBrushed : brushManager.BrushedDoc.has(Doc.GetProto(doc)) ? DocBrushStatus.protoBrushed : DocBrushStatus.unbrushed; - return status; - } - export function IsBrushedDegree(doc: Doc) { - return computedFn(function IsBrushDegree(doc: Doc) { - return Doc.IsBrushedDegreeUnmemoized(doc); - })(doc); + // returns 'how' a Doc has been brushed over - whether the document itself was brushed, it's prototype, or neither + export function GetBrushStatus(doc: Doc) { + if (!doc || GetEffectiveAcl(doc) === AclPrivate || GetEffectiveAcl(doc[DocData]) === AclPrivate || doc.opacity === 0) return DocBrushStatus.unbrushed; + return doc[Brushed] ? DocBrushStatus.selfBrushed : doc[DocData][Brushed] ? DocBrushStatus.protoBrushed : DocBrushStatus.unbrushed; } - export function BrushDoc(doc: Doc) { - if (!doc || GetEffectiveAcl(doc) === AclPrivate || GetEffectiveAcl(Doc.GetProto(doc)) === AclPrivate) return doc; - runInAction(() => { - brushManager.BrushedDoc.set(doc, true); - brushManager.BrushedDoc.set(Doc.GetProto(doc), true); - }); + export function BrushDoc(doc: Doc, unbrush = false) { + if (doc && GetEffectiveAcl(doc) !== AclPrivate && GetEffectiveAcl(doc[DocData]) !== AclPrivate) { + brushManager.brushDoc(doc, unbrush); + brushManager.brushDoc(doc[DocData], unbrush); + } return doc; } export function UnBrushDoc(doc: Doc) { - if (!doc || GetEffectiveAcl(doc) === AclPrivate || GetEffectiveAcl(Doc.GetProto(doc)) === AclPrivate) return doc; - runInAction(() => { - brushManager.BrushedDoc.delete(doc); - brushManager.BrushedDoc.delete(Doc.GetProto(doc)); - }); - return doc; + return BrushDoc(doc, true); } - - export function LinkEndpoint(linkDoc: Doc, anchorDoc: Doc) { - const linkAnchor2 = DocCast(linkDoc.link_anchor_2); - const linkAnchor1 = DocCast(linkDoc.link_anchor_1); - if (linkDoc.link_matchEmbeddings) { - return [linkAnchor2, linkAnchor2.annotationOn].includes(anchorDoc) ? '2' : '1'; - } - if (Doc.AreProtosEqual(linkAnchor2, anchorDoc) || Doc.AreProtosEqual(linkAnchor2.annotationOn as Doc, anchorDoc)) return '2'; - return Doc.AreProtosEqual(linkAnchor1, anchorDoc) || Doc.AreProtosEqual(linkAnchor1.annotationOn as Doc, anchorDoc) ? '1' : '2'; - } - - export function linkFollowUnhighlight() { - clearTimeout(UnhighlightTimer); - UnhighlightWatchers.forEach(watcher => watcher()); - UnhighlightWatchers.length = 0; - highlightedDocs.forEach(doc => Doc.UnHighlightDoc(doc)); - document.removeEventListener('pointerdown', linkFollowUnhighlight); + export function UnBrushAllDocs() { + Array.from(brushManager.BrushedDoc).forEach(action(doc => (doc[Brushed] = false))); } let UnhighlightWatchers: (() => void)[] = []; @@ -1396,6 +1185,14 @@ export namespace Doc { UnhighlightWatchers.push(watcher); } else watcher(); } + export function linkFollowUnhighlight() { + clearTimeout(UnhighlightTimer); + UnhighlightTimer = 0; + UnhighlightWatchers.forEach(watcher => watcher()); + UnhighlightWatchers.length = 0; + highlightedDocs.forEach(doc => Doc.UnHighlightDoc(doc)); + document.removeEventListener('pointerdown', linkFollowUnhighlight); + } export function linkFollowHighlight(destDoc: Doc | Doc[], dataAndDisplayDocs = true, presentation_effect?: Doc) { linkFollowUnhighlight(); (destDoc instanceof Doc ? [destDoc] : destDoc).forEach(doc => Doc.HighlightDoc(doc, dataAndDisplayDocs, presentation_effect)); @@ -1410,8 +1207,8 @@ export namespace Doc { export var highlightedDocs = new ObservableSet<Doc>(); export function IsHighlighted(doc: Doc) { - if (!doc || GetEffectiveAcl(doc) === AclPrivate || GetEffectiveAcl(Doc.GetProto(doc)) === AclPrivate || doc.opacity === 0) return false; - return doc[Highlight] || Doc.GetProto(doc)[Highlight]; + if (!doc || GetEffectiveAcl(doc) === AclPrivate || GetEffectiveAcl(doc[DocData]) === AclPrivate || doc.opacity === 0) return false; + return doc[Highlight] || doc[DocData][Highlight]; } export function HighlightDoc(doc: Doc, dataAndDisplayDocs = true, presentation_effect?: Doc) { runInAction(() => { @@ -1419,8 +1216,8 @@ export namespace Doc { doc[Highlight] = true; doc[Animation] = presentation_effect; if (dataAndDisplayDocs) { - highlightedDocs.add(Doc.GetProto(doc)); - Doc.GetProto(doc)[Highlight] = true; + highlightedDocs.add(doc[DocData]); + doc[DocData][Highlight] = true; } }); } @@ -1429,65 +1226,30 @@ export namespace Doc { runInAction(() => { (doc ? [doc] : Array.from(highlightedDocs)).forEach(doc => { highlightedDocs.delete(doc); - highlightedDocs.delete(Doc.GetProto(doc)); - doc[Highlight] = Doc.GetProto(doc)[Highlight] = false; + highlightedDocs.delete(doc[DocData]); + doc[Highlight] = doc[DocData][Highlight] = false; doc[Animation] = undefined; }); }); } - export function UnBrushAllDocs() { - runInAction(() => brushManager.BrushedDoc.clear()); - } export function getDocTemplate(doc?: Doc) { return !doc ? undefined : doc.isTemplateDoc - ? doc - : Cast(doc.dragFactory, Doc, null)?.isTemplateDoc - ? doc.dragFactory - : Cast(Doc.Layout(doc), Doc, null)?.isTemplateDoc - ? Cast(Doc.Layout(doc), Doc, null).resolvedDataDoc - ? Doc.Layout(doc).proto - : Doc.Layout(doc) - : undefined; - } - - export function matchFieldValue(doc: Doc, key: string, value: any): boolean { - if (Utils.HasTransparencyFilter(value)) { - const isTransparent = (color: string) => color !== '' && DashColor(color).alpha() !== 1; - return isTransparent(StrCast(doc[key])); - } - if (key === LinkedTo) { - // 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('='); - if (linkedToExp.length === 1) return Field.toScriptString(anchor) === value; - return Field.toScriptString(DocCast(anchor[linkedToExp[0]])) === linkedToExp[1]; - }; - // prettier-ignore - return (value === Doc.FilterNone && !allLinks.length) || - (value === Doc.FilterAny && !!allLinks.length) || - (allLinks.some(link => matchLink(value,DocCast(link.link_anchor_1)) || - matchLink(value,DocCast(link.link_anchor_2)) )); - } - if (typeof value === 'string') { - value = value.replace(`,${Utils.noRecursionHack}`, ''); - } - const fieldVal = doc[key]; - // prettier-ignore - if ((value === Doc.FilterAny && fieldVal !== undefined) || - (value === Doc.FilterNone && fieldVal === undefined)) { - return true; - } - if (Cast(fieldVal, listSpec('string'), []).length) { - const vals = StrListCast(fieldVal); - const docs = vals.some(v => (v as any) instanceof Doc); - if (docs) return value === Field.toString(fieldVal as Field); - return vals.some(v => v.includes(value)); // bcz: arghh: Todo: comparison should be parameterized as exact, or substring - } - return Field.toString(fieldVal as Field).includes(value); // bcz: arghh: Todo: comparison should be parameterized as exact, or substring + ? doc + : Cast(doc.dragFactory, Doc, null)?.isTemplateDoc + ? doc.dragFactory + : Cast(Doc.Layout(doc), Doc, null)?.isTemplateDoc + ? Cast(Doc.Layout(doc), Doc, null).resolvedDataDoc + ? Doc.Layout(doc).proto + : Doc.Layout(doc) + : undefined; + } + + export function toggleLockedPosition(doc: Doc) { + doc._lockedPosition = !doc._lockedPosition; + doc._pointerEvents = doc._lockedPosition ? 'none' : undefined; } export function deiconifyView(doc: Doc) { @@ -1501,34 +1263,27 @@ export namespace Doc { doc.layout_fieldKey = deiconify || 'layout'; } export function setDocRangeFilter(container: Opt<Doc>, key: string, range?: readonly number[], modifiers?: 'remove') { - //, modifiers: 'remove' | 'set' if (!container) return; const childFiltersByRanges = Cast(container._childFiltersByRanges, listSpec('string'), []); for (let i = 0; i < childFiltersByRanges.length; i += 3) { if (childFiltersByRanges[i] === key) { - console.log('this is key inside childfilters by range ' + key); childFiltersByRanges.splice(i, 3); - console.log('this is child filters by range ' + childFiltersByRanges); break; } } if (range !== undefined) { - console.log('in doc.ts in set range filter'); childFiltersByRanges.push(key); childFiltersByRanges.push(range[0].toString()); childFiltersByRanges.push(range[1].toString()); container._childFiltersByRanges = new List<string>(childFiltersByRanges); - console.log('this is child filters by range ' + childFiltersByRanges[0] + ',' + childFiltersByRanges[1] + ',' + childFiltersByRanges[2]); - console.log('this is new list ' + container._childFiltersByRange); } if (modifiers) { childFiltersByRanges.splice(0, 3); container._childFiltersByRanges = new List<string>(childFiltersByRanges); } - console.log('this is child filters by range END' + childFiltersByRanges[0] + ',' + childFiltersByRanges[1] + ',' + childFiltersByRanges[2]); } export const FilterSep = '::'; @@ -1583,37 +1338,25 @@ export namespace Doc { layoutDoc._freeform_scale = NumCast(layoutDoc._freeform_scale, 1) * contentScale; layoutDoc._nativeWidth = undefined; layoutDoc._nativeHeight = undefined; - layoutDoc._layout_forceReflow = undefined; - layoutDoc._nativeHeightUnfrozen = undefined; - layoutDoc._nativeDimModifiable = undefined; } else { layoutDoc._layout_autoHeight = false; if (!Doc.NativeWidth(layoutDoc)) { layoutDoc._nativeWidth = NumCast(layoutDoc._width, panelWidth); layoutDoc._nativeHeight = NumCast(layoutDoc._height, panelHeight); - layoutDoc._layout_forceReflow = true; - layoutDoc._nativeHeightUnfrozen = true; - layoutDoc._nativeDimModifiable = true; } } }); } - export function isDocPinned(doc: Doc) { - //add this new doc to props.Document - const curPres = Doc.ActivePresentation; - return !curPres ? false : DocListCast(curPres.data).findIndex(val => Doc.AreProtosEqual(val, doc)) !== -1; - } - - export function styleFromLayoutString(rootDoc: Doc, layoutDoc: Doc, props: any, scale: number) { + export function styleFromLayoutString(doc: Doc, props: FieldViewProps, scale: number) { const style: { [key: string]: any } = {}; const divKeys = ['width', 'height', 'fontSize', 'transform', 'left', 'backgroundColor', 'left', 'right', 'top', 'bottom', 'pointerEvents', 'position']; const replacer = (match: any, expr: string, offset: any, string: any) => { // bcz: this executes a script to convert a property expression string: { script } into a value - return ScriptField.MakeFunction(expr, { self: Doc.name, this: Doc.name, scale: 'number' })?.script.run({ self: rootDoc, this: layoutDoc, scale }).result?.toString() ?? ''; + return ScriptField.MakeFunction(expr, { self: Doc.name, this: Doc.name, scale: 'number' })?.script.run({ this: doc, self: doc, scale }).result?.toString() ?? ''; }; divKeys.map((prop: string) => { - const p = props[prop]; + const p = (props as any)[prop]; typeof p === 'string' && (style[prop] = p?.replace(/{([^.'][^}']+)}/g, replacer)); }); return style; @@ -1628,7 +1371,7 @@ export namespace Doc { if (ptx !== undefined && pty !== undefined && newPoint !== undefined) { const firstx = list.length ? NumCast(list[0].x) + ptx - newPoint[0] : 0; const firsty = list.length ? NumCast(list[0].y) + pty - newPoint[1] : 0; - docs.map(doc => { + docs.forEach(doc => { doc.x = NumCast(doc.x) - firstx; doc.y = NumCast(doc.y) - firsty; }); @@ -1638,15 +1381,25 @@ export namespace Doc { } // prettier-ignore - export function toIcon(doc?: Doc, isOpen?: boolean) { - switch (isOpen !== undefined ? DocumentType.COL: StrCast(doc?.type)) { + export function toIcon(doc?: Doc, isOpen?: Opt<boolean>) { + if (isOpen) return doc?.isFolder ? 'chevron-down' : 'folder-open'; + switch (StrCast(doc?.type)) { case DocumentType.IMG: return 'image'; case DocumentType.COMPARISON: return 'columns'; case DocumentType.RTF: return 'sticky-note'; case DocumentType.COL: - const folder: IconProp = isOpen === true ? 'folder-open' : isOpen === false ? 'folder' : doc?.title==='Untitled Collection'? 'object-group': 'chalkboard'; - const chevron: IconProp = isOpen === true ? 'chevron-down' : isOpen === false ? 'chevron-right' : 'question'; - return !doc?.isFolder ? folder : chevron; + if (doc?.isFolder) { + switch (doc.type_collection) { + default: return isOpen === false ? 'chevron-right' : 'question'; + } // prettier-ignore + } + switch (doc?.type_collection) { + case CollectionViewType.Freeform : return 'object-group'; + case CollectionViewType.NoteTaking : return 'chalkboard'; + case CollectionViewType.Schema : return 'table-cells'; + case CollectionViewType.Docking: return 'solar-panel'; + default: return 'folder'; + } // prettier-ignore case DocumentType.WEB: return 'globe-asia'; case DocumentType.SCREENSHOT: return 'photo-video'; case DocumentType.WEBCAM: return 'video'; @@ -1663,9 +1416,9 @@ export namespace Doc { case DocumentType.DATAVIZ: return 'chart-bar'; case DocumentType.EQUATION: return 'calculator'; case DocumentType.SIMULATION: return 'rocket'; - case DocumentType.CONFIG: return 'question-circle'; - default: return 'question'; + case DocumentType.CONFIG: return 'folder-closed'; } + return 'question'; } /// @@ -1842,7 +1595,7 @@ ScriptingGlobals.add(function idToDoc(id: string): any { return IdToDoc(id); }); ScriptingGlobals.add(function renameEmbedding(doc: any) { - return StrCast(Doc.GetProto(doc).title).replace(/\([0-9]*\)/, '') + `(${doc.proto_embeddingId})`; + return StrCast(doc[DocData].title).replace(/\([0-9]*\)/, '') + `(${doc.proto_embeddingId})`; }); ScriptingGlobals.add(function getProto(doc: any) { return Doc.GetProto(doc); @@ -1871,21 +1624,16 @@ ScriptingGlobals.add(function setInPlace(doc: any, field: any, value: any) { ScriptingGlobals.add(function sameDocs(doc1: any, doc2: any) { return Doc.AreProtosEqual(doc1, doc2); }); -ScriptingGlobals.add(function DOC(id: string) { - console.log("Can't parse a document id in a script"); - return 'invalid'; -}); ScriptingGlobals.add(function assignDoc(doc: Doc, field: string, id: string) { return Doc.assignDocToField(doc, field, id); }); -ScriptingGlobals.add(function docCast(doc: FieldResult): any { - return DocCastAsync(doc); +ScriptingGlobals.add(function docCastAsync(doc: FieldResult): any { + return Cast(doc, Doc); }); ScriptingGlobals.add(function activePresentationItem() { const curPres = Doc.ActivePresentation; return curPres && DocListCast(curPres[Doc.LayoutFieldKey(curPres)])[NumCast(curPres._itemIndex)]; }); - ScriptingGlobals.add(function setDocFilter(container: Doc, key: string, value: any, modifiers: 'match' | 'check' | 'x' | 'remove') { Doc.setDocFilter(container, key, value, modifiers); }); diff --git a/src/fields/DocSymbols.ts b/src/fields/DocSymbols.ts index df74cc9fe..9c563abbf 100644 --- a/src/fields/DocSymbols.ts +++ b/src/fields/DocSymbols.ts @@ -8,6 +8,8 @@ export const Width = Symbol('DocWidth'); export const Height = Symbol('DocHeight'); export const Animation = Symbol('DocAnimation'); export const Highlight = Symbol('DocHighlight'); +export const DocViews = Symbol('DocViews'); +export const Brushed = Symbol('DocBrushed'); export const DocData = Symbol('DocData'); export const DocLayout = Symbol('DocLayout'); export const DocFields = Symbol('DocFields'); @@ -25,4 +27,4 @@ export const Initializing = Symbol('DocInitializing'); export const ForceServerWrite = Symbol('DocForceServerWrite'); export const CachedUpdates = Symbol('DocCachedUpdates'); -export const DashVersion = 'v0.6.00'; +export const DashVersion = 'v0.7.0'; diff --git a/src/fields/List.ts b/src/fields/List.ts index da007e972..b8ad552d2 100644 --- a/src/fields/List.ts +++ b/src/fields/List.ts @@ -1,8 +1,8 @@ -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { alias, list, serializable } from 'serializr'; import { DocServer } from '../client/DocServer'; import { ScriptingGlobals } from '../client/util/ScriptingGlobals'; -import { afterDocDeserialize, autoObject, Deserializable } from '../client/util/SerializationHelper'; +import { Deserializable, afterDocDeserialize, autoObject } from '../client/util/SerializationHelper'; import { Field } from './Doc'; import { FieldTuples, Self, SelfProxy } from './DocSymbols'; import { Copy, FieldChanged, Parent, ToScriptString, ToString } from './FieldSymbols'; @@ -11,7 +11,7 @@ import { ProxyField } from './Proxy'; import { RefField } from './RefField'; import { listSpec } from './Schema'; import { Cast } from './Types'; -import { deleteProperty, getter, setter, containedFieldChangedHandler } from './util'; +import { containedFieldChangedHandler, deleteProperty, getter, setter } from './util'; function toObjectField(field: Field) { return field instanceof RefField ? new ProxyField(field) : field; @@ -102,8 +102,8 @@ class ListImpl<T extends Field> extends ObjectField { items.length === 0 && deleteCount ? { op: '$remFromSet', items: removed, hint: { start, deleteCount }, length: list.__fieldTuples.length } : items.length && !deleteCount && start === list.__fieldTuples.length - ? { op: '$addToSet', items, length: list.__fieldTuples.length } - : undefined + ? { op: '$addToSet', items, length: list.__fieldTuples.length } + : undefined ); return res.map(toRealField); }), @@ -233,12 +233,13 @@ class ListImpl<T extends Field> extends ObjectField { } constructor(fields?: T[]) { super(); + makeObservable(this); const list = new Proxy<this>(this, { set: setter, get: ListImpl.listGetter, ownKeys: target => { const keys = Object.keys(target.__fieldTuples); - return [...keys, '__realFields']; + return [...keys, FieldTuples, Self, SelfProxy, '__realFields']; }, getOwnPropertyDescriptor: (target, prop) => { if (prop in target[FieldTuples]) { diff --git a/src/fields/Proxy.ts b/src/fields/Proxy.ts index c076f5fe1..3a46e3581 100644 --- a/src/fields/Proxy.ts +++ b/src/fields/Proxy.ts @@ -1,12 +1,12 @@ -import { Deserializable } from '../client/util/SerializationHelper'; -import { Field, FieldWaiting, Opt } from './Doc'; +import { action, computed, observable, runInAction } from 'mobx'; import { primitive, serializable } from 'serializr'; -import { observable, action, runInAction, computed } from 'mobx'; import { DocServer } from '../client/DocServer'; -import { RefField } from './RefField'; -import { ObjectField } from './ObjectField'; -import { Id, Copy, ToScriptString, ToString, ToValue } from './FieldSymbols'; import { scriptingGlobal } from '../client/util/ScriptingGlobals'; +import { Deserializable } from '../client/util/SerializationHelper'; +import { Field, FieldWaiting, Opt } from './Doc'; +import { Copy, Id, ToScriptString, ToString, ToValue } from './FieldSymbols'; +import { ObjectField } from './ObjectField'; +import { RefField } from './RefField'; function deserializeProxy(field: any) { if (!field.cache.field) { diff --git a/src/fields/RichTextUtils.ts b/src/fields/RichTextUtils.ts index 5ecf25e08..b84a91709 100644 --- a/src/fields/RichTextUtils.ts +++ b/src/fields/RichTextUtils.ts @@ -15,7 +15,7 @@ import { Doc, Opt } from './Doc'; import { Id } from './FieldSymbols'; import { RichTextField } from './RichTextField'; import { Cast, StrCast } from './Types'; -import Color = require('color'); +import * as Color from 'color'; export namespace RichTextUtils { const delimiter = '\n'; @@ -275,7 +275,7 @@ export namespace RichTextUtils { } else { docId = backingDocId; } - return schema.node('image', { src, agnostic, width, docId, float: null, location: 'add:right' }); + return schema.node('image', { src, agnostic, width, docId, float: null }); }; const textNode = (schema: any, run: docs_v1.Schema$TextRun) => { diff --git a/src/fields/Schema.ts b/src/fields/Schema.ts index f035eeb0d..f5e64ae1f 100644 --- a/src/fields/Schema.ts +++ b/src/fields/Schema.ts @@ -94,6 +94,7 @@ export function makeStrictInterface<T extends Interface>(schema: T): (doc: Doc) } export function createSchema<T extends Interface>(schema: T): T & { proto: ToConstructor<Doc> } { + return undefined as any; (schema as any).proto = Doc; return schema as any; } diff --git a/src/fields/ScriptField.ts b/src/fields/ScriptField.ts index 2b8750714..62690a9fb 100644 --- a/src/fields/ScriptField.ts +++ b/src/fields/ScriptField.ts @@ -15,7 +15,7 @@ function optional(propSchema: PropSchema) { return custom( value => { if (value !== undefined) { - return propSchema.serializer(value); + return propSchema.serializer(value, '', undefined); // this function only takes one parameter, but I think its typescript typings are messed up to take 3 } return SKIP; }, @@ -97,7 +97,7 @@ export class ScriptField extends ObjectField { constructor(script: CompiledScript | undefined, setterscript?: CompiledScript, rawscript?: string) { super(); - const captured = script?.options.capturedVariables; + const captured = script?.options?.capturedVariables; if (captured) { this.captures = new List<string>(Object.keys(captured).map(key => key + ':' + (captured[key] instanceof Doc ? 'ID->' + (captured[key] as Doc)[Id] : captured[key].toString()))); } @@ -151,7 +151,7 @@ export class ComputedField extends ScriptField { _lastComputedResult: any; //TODO maybe add an observable cache based on what is passed in for doc, considering there shouldn't really be that many possible values for doc value = computedFn((doc: Doc) => this._valueOutsideReaction(doc)); - _valueOutsideReaction = (doc: Doc) => (this._lastComputedResult = this.script.run({ this: doc, self: Cast(doc.rootDocument, Doc, null) ?? doc, value: '', _last_: this._lastComputedResult, _readOnly_: true }, console.log).result); + _valueOutsideReaction = (doc: Doc) => (this._lastComputedResult = this.script.compiled && this.script.run({ this: doc, self: doc, value: '', _last_: this._lastComputedResult, _readOnly_: true }, console.log).result); [ToValue](doc: Doc) { return ComputedField.toValue(doc, this); @@ -167,35 +167,35 @@ export class ComputedField extends ScriptField { return compiled.compiled ? new ComputedField(compiled, compiledsetscript) : undefined; } public static MakeInterpolatedNumber(fieldKey: string, interpolatorKey: string, doc: Doc, curTimecode: number, defaultVal: Opt<number>) { - if (!doc[`${fieldKey}-indexed`]) { + if (!doc[`${fieldKey}_indexed`]) { const flist = new List<number>(numberRange(curTimecode + 1).map(i => undefined) as any as number[]); flist[curTimecode] = Cast(doc[fieldKey], 'number', null); - doc[`${fieldKey}-indexed`] = flist; + doc[`${fieldKey}_indexed`] = flist; } - const getField = ScriptField.CompileScript(`getIndexVal(self['${fieldKey}-indexed'], self.${interpolatorKey}, ${defaultVal})`, {}, true, {}); - const setField = ScriptField.CompileScript(`setIndexVal(self['${fieldKey}-indexed'], self.${interpolatorKey}, value)`, { value: 'any' }, true, {}); + const getField = ScriptField.CompileScript(`getIndexVal(this['${fieldKey}_indexed'], this.${interpolatorKey}, ${defaultVal})`, {}, true, {}); + const setField = ScriptField.CompileScript(`setIndexVal(this['${fieldKey}_indexed'], this.${interpolatorKey}, value)`, { value: 'any' }, true, {}); return getField.compiled ? new ComputedField(getField, setField?.compiled ? setField : undefined) : undefined; } public static MakeInterpolatedString(fieldKey: string, interpolatorKey: string, doc: Doc, curTimecode: number) { - if (!doc[`${fieldKey}-indexed`]) { + if (!doc[`${fieldKey}_`]) { const flist = new List<string>(numberRange(curTimecode + 1).map(i => undefined) as any as string[]); flist[curTimecode] = StrCast(doc[fieldKey]); - doc[`${fieldKey}-indexed`] = flist; + doc[`${fieldKey}_indexed`] = flist; } - const getField = ScriptField.CompileScript(`getIndexVal(self['${fieldKey}-indexed'], self.${interpolatorKey})`, {}, true, {}); - const setField = ScriptField.CompileScript(`setIndexVal(self['${fieldKey}-indexed'], self.${interpolatorKey}, value)`, { value: 'any' }, true, {}); + const getField = ScriptField.CompileScript(`getIndexVal(this['${fieldKey}_indexed'], this.${interpolatorKey})`, {}, true, {}); + const setField = ScriptField.CompileScript(`setIndexVal(this['${fieldKey}_indexed'], this.${interpolatorKey}, value)`, { value: 'any' }, true, {}); return getField.compiled ? new ComputedField(getField, setField?.compiled ? setField : undefined) : undefined; } public static MakeInterpolatedDataField(fieldKey: string, interpolatorKey: string, doc: Doc, curTimecode: number) { if (doc[`${fieldKey}`] instanceof List) return; - if (!doc[`${fieldKey}-indexed`]) { + if (!doc[`${fieldKey}_indexed`]) { const flist = new List<Field>(numberRange(curTimecode + 1).map(i => undefined) as any as Field[]); flist[curTimecode] = Field.Copy(doc[fieldKey]); - doc[`${fieldKey}-indexed`] = flist; + doc[`${fieldKey}_indexed`] = flist; } - const getField = ScriptField.CompileScript(`getIndexVal(self['${fieldKey}-indexed'], self.${interpolatorKey})`, {}, true, {}); + const getField = ScriptField.CompileScript(`getIndexVal(this['${fieldKey}_indexed'], this.${interpolatorKey})`, {}, true, {}); const setField = ScriptField.CompileScript( - `{setIndexVal (self['${fieldKey}-indexed'], self.${interpolatorKey}, value); console.log(self["${fieldKey}-indexed"][self.${interpolatorKey}],self.data,self["${fieldKey}-indexed"]))}`, + `{setIndexVal (this['${fieldKey}_indexed'], this.${interpolatorKey}, value); console.log(this["${fieldKey}_indexed"][this.${interpolatorKey}],this.data,this["${fieldKey}_indexed"]))}`, { value: 'any' }, false, {} diff --git a/src/fields/Types.ts b/src/fields/Types.ts index 69dbe9756..337e8ca21 100644 --- a/src/fields/Types.ts +++ b/src/fields/Types.ts @@ -1,6 +1,7 @@ import { DateField } from './DateField'; import { Doc, Field, FieldResult, Opt } from './Doc'; import { List } from './List'; +import { ProxyField } from './Proxy'; import { RefField } from './RefField'; import { RichTextField } from './RichTextField'; import { ScriptField } from './ScriptField'; @@ -72,6 +73,8 @@ export function Cast<T extends CastCtor>(field: FieldResult, ctor: T, defaultVal } } else if (field instanceof (ctor as any)) { return field as ToType<T>; + } else if (field instanceof ProxyField && field.value instanceof (ctor as any)) { + return field.value as ToType<T>; } } return defaultVal === null ? undefined : defaultVal; diff --git a/src/fields/URLField.ts b/src/fields/URLField.ts index 8ac20b1e5..817b62373 100644 --- a/src/fields/URLField.ts +++ b/src/fields/URLField.ts @@ -34,7 +34,7 @@ export abstract class URLField extends ObjectField { if (Utils.prepend(this.url?.pathname) === this.url?.href) { return `new ${this.constructor.name}("${this.url.pathname}")`; } - return `new ${this.constructor.name}("${this.url.href}")`; + return `new ${this.constructor.name}("${this.url?.href}")`; } [ToString]() { if (Utils.prepend(this.url?.pathname) === this.url?.href) { diff --git a/src/fields/util.ts b/src/fields/util.ts index 28db77c65..b73520999 100644 --- a/src/fields/util.ts +++ b/src/fields/util.ts @@ -1,11 +1,11 @@ import { $mobx, action, observable, runInAction, trace } from 'mobx'; import { computedFn } from 'mobx-utils'; +import { returnZero } from '../Utils'; import { DocServer } from '../client/DocServer'; import { LinkManager } from '../client/util/LinkManager'; import { SerializationHelper } from '../client/util/SerializationHelper'; import { UndoManager } from '../client/util/UndoManager'; -import { returnZero } from '../Utils'; -import { aclLevel, Doc, DocListCast, Field, FieldResult, HierarchyMapping, ReverseHierarchyMap, StrListCast, updateCachedAcls } from './Doc'; +import { Doc, DocListCast, Field, FieldResult, HierarchyMapping, ReverseHierarchyMap, StrListCast, aclLevel, updateCachedAcls } from './Doc'; import { AclAdmin, AclAugment, AclEdit, AclPrivate, DocAcl, DocData, DocLayout, FieldKeys, ForceServerWrite, Height, Initializing, SelfProxy, UpdatingFromServer, Width } from './DocSymbols'; import { FieldChanged, Id, Parent, ToValue } from './FieldSymbols'; import { List } from './List'; @@ -21,7 +21,7 @@ function _readOnlySetter(): never { throw new Error("Documents can't be modified in read-only mode"); } -const tracing = false; +var tracing = false; export function TraceMobx() { tracing && trace(); } @@ -234,7 +234,7 @@ function getEffectiveAcl(target: any, user?: string): symbol { * @param layoutOnly just sets the layout doc's ACL (unless the data doc has no entry for the ACL, in which case it will be set as well) */ export function distributeAcls(key: string, acl: SharingPermissions, target: Doc, visited?: Doc[], allowUpgrade?: boolean, layoutOnly = false) { - const selfKey = `acl-${Doc.CurrentUserEmailNormalized}`; + const selfKey = `acl-${normalizeEmail(Doc.CurrentUserEmail)}`; if (!visited) visited = [] as Doc[]; if (!target || visited.includes(target) || key === selfKey) return; visited.push(target); diff --git a/src/mobile/AudioUpload.scss b/src/mobile/AudioUpload.scss deleted file mode 100644 index dce0c724f..000000000 --- a/src/mobile/AudioUpload.scss +++ /dev/null @@ -1,61 +0,0 @@ -@import "../client/views/global/globalCssVariables.scss"; - -.audioUpload_cont { - display: flex; - justify-content: center; - flex-direction: column; - align-items: center; - margin-top: 10px; - height: 400px; - width: 600px; -} - -.upload_label { - position: relative; - font-weight: 700; - color: black; - background-color: rgba(0, 0, 0, 0); - border: solid 3px black; - margin: 10px; - font-size: 30; - height: 70px; - width: 60%; - display: inline-flex; - font-family: sans-serif; - text-transform: uppercase; - justify-content: center; - flex-direction: column; - border-radius: 10px; -} - -.restart_label { - position: relative; - font-weight: 700; - color: black; - background-color: rgba(0, 0, 0, 0); - border: solid 3px black; - margin: 10px; - font-size: 30; - height: 70px; - width: 60%; - display: inline-flex; - font-family: sans-serif; - text-transform: uppercase; - justify-content: center; - flex-direction: column; - border-radius: 10px; -} - -.audio-upload { - top: 100%; - opacity: 0; -} - -.audio-upload.active { - top: 0; - position: absolute; - z-index: 999; - height: 100vh; - width: 100vw; - opacity: 1; -}
\ No newline at end of file diff --git a/src/mobile/AudioUpload.tsx b/src/mobile/AudioUpload.tsx deleted file mode 100644 index 7a1dde9fb..000000000 --- a/src/mobile/AudioUpload.tsx +++ /dev/null @@ -1,162 +0,0 @@ -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, observable } from 'mobx'; -import { observer } from 'mobx-react'; -import { Docs } from '../client/documents/Documents'; -import { Transform } from '../client/util/Transform'; -import { ContextMenu } from '../client/views/ContextMenu'; -import { DictationOverlay } from '../client/views/DictationOverlay'; -import { MainViewModal } from '../client/views/MainViewModal'; -import { DocumentView } from '../client/views/nodes/DocumentView'; -import { RichTextMenu } from '../client/views/nodes/formattedText/RichTextMenu'; -import { Doc } from '../fields/Doc'; -import { listSpec } from '../fields/Schema'; -import { Cast, FieldValue } from '../fields/Types'; -import { nullAudio } from '../fields/URLField'; -import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, emptyPath } from '../Utils'; -import './ImageUpload.scss'; -import { MobileInterface } from './MobileInterface'; -import React = require('react'); - -@observer -export class AudioUpload extends React.Component { - @observable public _audioCol: Doc = FieldValue( - Cast( - Docs.Create.FreeformDocument([Cast(Docs.Create.AudioDocument(nullAudio, { title: 'mobile audio', _width: 500, _height: 100 }), Doc) as Doc], { - title: 'mobile audio', - _width: 300, - _height: 300, - _layout_fitContentsToBox: true, - layout_boxShadow: '0 0', - }), - Doc - ) - ) as Doc; - - /** - * Handles the onclick functionality for the 'Restart' button - * Resets the document to its default view - */ - @action - clearUpload = () => { - for (let i = 1; i < 8; i++) { - this.setOpacity(i, '0.2'); - } - this._audioCol = FieldValue( - Cast( - Docs.Create.FreeformDocument( - [ - Cast( - Docs.Create.AudioDocument(nullAudio, { - title: 'mobile audio', - _width: 500, - _height: 100, - }), - Doc - ) as Doc, - ], - { title: 'mobile audio', _width: 300, _height: 300, _layout_fitContentsToBox: true, layout_boxShadow: '0 0' } - ), - Doc - ) - ) as Doc; - }; - - /** - * Handles the onClick of the 'Close' button - * Reset upload interface and toggle audio - */ - closeUpload = () => { - this.clearUpload(); - MobileInterface.Instance.toggleAudio(); - }; - - /** - * Handles the on click of the 'Upload' button. - * Pushing the audio doc onto Dash Web through the right side bar - */ - uploadAudio = () => { - const audioRightSidebar = Cast(Doc.SharingDoc(), Doc, null); - const audioDoc = this._audioCol; - const data = Cast(audioRightSidebar.data, listSpec(Doc)); - for (let i = 1; i < 8; i++) { - setTimeout(() => this.setOpacity(i, '1'), i * 200); - } - if (data) { - data.push(audioDoc); - } - // Resets uploader after 3 seconds - setTimeout(this.clearUpload, 3000); - }; - - // Returns the upload audio menu - private get uploadInterface() { - return ( - <> - <ContextMenu /> - <DictationOverlay /> - <div style={{ display: 'none' }}> - <RichTextMenu key="rich" /> - </div> - <div className="closeUpload" onClick={() => this.closeUpload()}> - <FontAwesomeIcon icon="window-close" size={'lg'} /> - </div> - <FontAwesomeIcon icon="microphone" size="lg" style={{ fontSize: '130' }} /> - <div className="audioUpload_cont"> - <DocumentView - Document={this._audioCol} - DataDoc={undefined} - addDocument={undefined} - addDocTab={returnFalse} - pinToPres={emptyFunction} - rootSelected={returnTrue} - removeDocument={undefined} - childFilters={returnEmptyFilter} - childFiltersByRanges={returnEmptyFilter} - searchFilterDocs={returnEmptyDoclist} - ScreenToLocalTransform={Transform.Identity} - PanelWidth={() => 600} - PanelHeight={() => 400} - renderDepth={0} - isDocumentActive={returnTrue} - isContentActive={emptyFunction} - focus={emptyFunction} - styleProvider={() => 'rgba(0,0,0,0)'} - docViewPath={returnEmptyDoclist} - whenChildContentsActiveChanged={emptyFunction} - bringToFront={emptyFunction} - /> - </div> - <div className="restart_label" onClick={this.clearUpload}> - Restart - </div> - <div className="upload_label" onClick={this.uploadAudio}> - Upload - </div> - <div className="loadingImage"> - <div className="loadingSlab" id="slab01" /> - <div className="loadingSlab" id="slab02" /> - <div className="loadingSlab" id="slab03" /> - <div className="loadingSlab" id="slab04" /> - <div className="loadingSlab" id="slab05" /> - <div className="loadingSlab" id="slab06" /> - <div className="loadingSlab" id="slab07" /> - </div> - </> - ); - } - - // Handles the setting of the loading bar - setOpacity = (index: number, opacity: string) => { - const slab = document.getElementById('slab0' + index); - if (slab) { - slab.style.opacity = opacity; - } - }; - - @observable private dialogueBoxOpacity = 1; - @observable private overlayOpacity = 0.4; - - render() { - return <MainViewModal contents={this.uploadInterface} isDisplayed={true} interactive={true} dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity} overlayDisplayedOpacity={this.overlayOpacity} closeOnExternalClick={this.closeUpload} />; - } -} diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss index 6669a3d21..e4156ee8e 100644 --- a/src/mobile/ImageUpload.scss +++ b/src/mobile/ImageUpload.scss @@ -1,4 +1,4 @@ -@import "../client/views/global/globalCssVariables.scss"; +@import '../client/views/global/globalCssVariables.module.scss'; .imgupload_cont { display: flex; @@ -50,7 +50,7 @@ z-index: -1; } - .inputfile+label { + .inputfile + label { font-weight: 700; color: black; background-color: rgba(0, 0, 0, 0); @@ -71,7 +71,7 @@ border-radius: 10px; } - .inputfile.active+label { + .inputfile.active + label { font-style: italic; color: black; background-color: lightgreen; @@ -81,7 +81,6 @@ .status { font-size: 2em; } - } .image-upload { @@ -134,5 +133,7 @@ border-radius: 20px; opacity: 0.2; background-color: black; - transition: all 2s, opacity 1.5s; -}
\ No newline at end of file + transition: + all 2s, + opacity 1.5s; +} diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index da38fcaee..e333e6a2e 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -1,49 +1,48 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, observable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import * as rp from 'request-promise'; +import { Utils } from '../Utils'; import { DocServer } from '../client/DocServer'; -import { Docs } from '../client/documents/Documents'; import { Networking } from '../client/Network'; -import { DFLT_IMAGE_NATIVE_DIM } from '../client/views/global/globalCssVariables.scss'; +import { Docs } from '../client/documents/Documents'; import { MainViewModal } from '../client/views/MainViewModal'; import { Doc, Opt } from '../fields/Doc'; import { List } from '../fields/List'; import { listSpec } from '../fields/Schema'; import { Cast } from '../fields/Types'; -import { Utils } from '../Utils'; -import "./ImageUpload.scss"; +import './ImageUpload.scss'; import { MobileInterface } from './MobileInterface'; -import React = require('react'); - +const { default: { DFLT_IMAGE_NATIVE_DIM } } = require('../client/views/global/globalCssVariables.module.scss'); // prettier-ignore export interface ImageUploadProps { Document: Doc; // Target document for upload (upload location) } const inputRef = React.createRef<HTMLInputElement>(); -const defaultNativeImageDim = Number(DFLT_IMAGE_NATIVE_DIM.replace("px", "")); +const defaultNativeImageDim = Number(DFLT_IMAGE_NATIVE_DIM.replace('px', '')); @observer export class Uploader extends React.Component<ImageUploadProps> { - @observable error: string = ""; - @observable nm: string = "Choose files"; // Text of 'Choose Files' button - @observable process: string = ""; // Current status of upload + @observable error: string = ''; + @observable nm: string = 'Choose files'; // Text of 'Choose Files' button + @observable process: string = ''; // Current status of upload onClick = async () => { try { const col = this.props.Document; await Docs.Prototypes.initialize(); - const imgPrev = document.getElementById("img_preview"); - this.setOpacity(1, "1"); // Slab 1 + const imgPrev = document.getElementById('img_preview'); + this.setOpacity(1, '1'); // Slab 1 if (imgPrev) { const files: FileList | null = inputRef.current!.files; - this.setOpacity(2, "1"); // Slab 2 + this.setOpacity(2, '1'); // Slab 2 if (files && files.length !== 0) { - this.process = "Uploading Files"; + this.process = 'Uploading Files'; for (let index = 0; index < files.length; ++index) { const file = files[index]; - const res = await Networking.UploadFilesToServer({file}); - this.setOpacity(3, "1"); // Slab 3 + const res = await Networking.UploadFilesToServer({ file }); + this.setOpacity(3, '1'); // Slab 3 // For each item that the user has selected res.map(async ({ result }) => { const name = file.name; @@ -53,19 +52,19 @@ export class Uploader extends React.Component<ImageUploadProps> { const path = result.accessPaths.agnostic.client; let doc = null; // Case 1: File is a video - if (file.type === "video/mp4") { + if (file.type === 'video/mp4') { doc = Docs.Create.VideoDocument(path, { _nativeWidth: defaultNativeImageDim, _width: 400, title: name }); // Case 2: File is a PDF document - } else if (file.type === "application/pdf") { + } else if (file.type === 'application/pdf') { doc = Docs.Create.PdfDocument(path, { _nativeWidth: defaultNativeImageDim, _width: 400, title: name }); // Case 3: File is another document type (most likely Image) } else { doc = Docs.Create.ImageDocument(path, { _nativeWidth: defaultNativeImageDim, _width: 400, title: name }); } - this.setOpacity(4, "1"); // Slab 4 - const res = await rp.get(Utils.prepend("/getUserDocumentIds")); + this.setOpacity(4, '1'); // Slab 4 + const res = await rp.get(Utils.prepend('/getUserDocumentIds')); if (!res) { - throw new Error("No user id returned"); + throw new Error('No user id returned'); } const field = await DocServer.GetRefField(JSON.parse(res).userDocumentId); let pending: Opt<Doc>; @@ -76,19 +75,19 @@ export class Uploader extends React.Component<ImageUploadProps> { const data = await Cast(pending.data, listSpec(Doc)); if (data) data.push(doc); else pending.data = new List([doc]); - this.setOpacity(5, "1"); // Slab 5 - this.process = "File " + (index + 1).toString() + " Uploaded"; - this.setOpacity(6, "1"); // Slab 6 + this.setOpacity(5, '1'); // Slab 5 + this.process = 'File ' + (index + 1).toString() + ' Uploaded'; + this.setOpacity(6, '1'); // Slab 6 } - if ((index + 1) === files.length) { - this.process = "Uploads Completed"; - this.setOpacity(7, "1"); // Slab 7 + if (index + 1 === files.length) { + this.process = 'Uploads Completed'; + this.setOpacity(7, '1'); // Slab 7 } }); } // Case in which the user pressed upload and no files were selected } else { - this.process = "No file selected"; + this.process = 'No file selected'; } // Three seconds after upload the menu will reset setTimeout(this.clearUpload, 3000); @@ -96,7 +95,7 @@ export class Uploader extends React.Component<ImageUploadProps> { } catch (error) { this.error = JSON.stringify(error); } - } + }; // Updates label after a files is selected (so user knows a file is uploaded) inputLabel = async () => { @@ -105,46 +104,48 @@ export class Uploader extends React.Component<ImageUploadProps> { if (files && files.length === 1) { this.nm = files[0].name; } else if (files && files.length > 1) { - this.nm = files.length.toString() + " files selected"; + this.nm = files.length.toString() + ' files selected'; } - } + }; // Loops through load icons, and resets buttons @action clearUpload = () => { for (let i = 1; i < 8; i++) { - this.setOpacity(i, "0.2"); + this.setOpacity(i, '0.2'); } - this.nm = "Choose files"; + this.nm = 'Choose files'; if (inputRef.current) { - inputRef.current.value = ""; + inputRef.current.value = ''; } - this.process = ""; - } + this.process = ''; + }; // Clears the upload and closes the upload menu closeUpload = () => { this.clearUpload(); MobileInterface.Instance.toggleUpload(); - } + }; // Handles the setting of the loading bar setOpacity = (index: number, opacity: string) => { - const slab = document.getElementById("slab" + index); + const slab = document.getElementById('slab' + index); if (slab) slab.style.opacity = opacity; - } + }; // Returns the upload interface for mobile private get uploadInterface() { return ( <div className="imgupload_cont"> <div className="closeUpload" onClick={() => this.closeUpload()}> - <FontAwesomeIcon icon="window-close" size={"lg"} /> + <FontAwesomeIcon icon="window-close" size={'lg'} /> </div> - <FontAwesomeIcon icon="upload" size="lg" style={{ fontSize: "130" }} /> - <input type="file" accept="application/pdf, video/*,image/*" className={`inputFile ${this.nm !== "Choose files" ? "active" : ""}`} id="input_image_file" ref={inputRef} onChange={this.inputLabel} multiple></input> - <label className="file" id="label" htmlFor="input_image_file">{this.nm}</label> + <FontAwesomeIcon icon="upload" size="lg" style={{ fontSize: '130' }} /> + <input type="file" accept="application/pdf, video/*,image/*" className={`inputFile ${this.nm !== 'Choose files' ? 'active' : ''}`} id="input_image_file" ref={inputRef} onChange={this.inputLabel} multiple></input> + <label className="file" id="label" htmlFor="input_image_file"> + {this.nm} + </label> <div className="upload_label" onClick={this.onClick}> Upload </div> @@ -167,16 +168,6 @@ export class Uploader extends React.Component<ImageUploadProps> { @observable private overlayOpacity = 0.4; render() { - return ( - <MainViewModal - contents={this.uploadInterface} - isDisplayed={true} - interactive={true} - dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity} - overlayDisplayedOpacity={this.overlayOpacity} - closeOnExternalClick={this.closeUpload} - /> - ); + return <MainViewModal contents={this.uploadInterface} isDisplayed={true} interactive={true} dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity} overlayDisplayedOpacity={this.overlayOpacity} closeOnExternalClick={this.closeUpload} />; } - -}
\ No newline at end of file +} diff --git a/src/mobile/MobileInkOverlay.tsx b/src/mobile/MobileInkOverlay.tsx index 6415099fd..23e19585a 100644 --- a/src/mobile/MobileInkOverlay.tsx +++ b/src/mobile/MobileInkOverlay.tsx @@ -1,6 +1,6 @@ -import React = require('react'); import { action, observable } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { DocServer } from '../client/DocServer'; import { DragManager } from '../client/util/DragManager'; import { Doc } from '../fields/Doc'; diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 498bec6ed..c31e73b42 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -1,52 +1,33 @@ import { library } from '@fortawesome/fontawesome-svg-core'; import { - faTasks, - faReply, - faQuoteLeft, - faHandPointLeft, - faFolderOpen, + faAddressCard, + faAlignLeft, + faAlignRight, faAngleDoubleLeft, - faExternalLinkSquareAlt, - faMobile, - faThLarge, - faWindowClose, - faEdit, - faTrashAlt, - faPalette, faAngleRight, + faArrowDown, + faArrowLeft, + faArrowRight, + faArrowUp, + faArrowsAltH, + faAsterisk, + faBars, faBell, - faTrash, + faBolt, + faBook, + faBrain, + faBullseye, + faCalculator, faCamera, - faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, - faArrowsAltH, - faPlus, - faMinus, - faTerminal, - faToggleOn, - faFile as fileSolid, - faExternalLinkAlt, - faLocationArrow, - faSearch, - faFileDownload, - faStop, - faCalculator, - faWindowMaximize, - faAddressCard, - faQuestionCircle, - faArrowLeft, - faArrowRight, - faArrowDown, - faArrowUp, - faBolt, - faBullseye, faCaretUp, faCat, faCheck, + faChevronLeft, faChevronRight, faClipboard, faClone, @@ -54,77 +35,95 @@ import { faCommentAlt, faCompressArrowsAlt, faCut, + faEdit, faEllipsisV, faEraser, faExclamation, + faExpand, + faExternalLinkAlt, + faExternalLinkSquareAlt, + faEye, faFileAlt, faFileAudio, + faFileDownload, faFilePdf, faFilm, faFilter, + faFolderOpen, faFont, faGlobeAsia, + faHandPointLeft, faHighlighter, + faHome, + faImage, + faLocationArrow, + faLongArrowAltLeft, faLongArrowAltRight, faMicrophone, + faMinus, + faMobile, faMousePointer, faMusic, faObjectGroup, + faPaintBrush, + faPalette, faPause, faPen, faPenNib, faPhone, faPlay, + faPlus, faPortrait, + faQuestionCircle, + faQuoteLeft, faRedoAlt, + faReply, + faSearch, faStamp, faStickyNote, + faStop, + faTasks, + faTerminal, + faTh, + faThLarge, faThumbtack, + faTimes, + faToggleOn, + faTrash, + faTrashAlt, faTree, faTv, - faBook, faUndoAlt, faVideo, - faAsterisk, - faBrain, - faImage, - faPaintBrush, - faTimes, - faEye, - faHome, - faLongArrowAltLeft, - faBars, - faTh, - faChevronLeft, - faAlignRight, - faAlignLeft, + faWindowClose, + faWindowMaximize, + faFile as fileSolid, } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { Docs, DocumentOptions, DocUtils } from '../client/documents/Documents'; +import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../Utils'; import { CollectionViewType, DocumentType } from '../client/documents/DocumentTypes'; +import { Docs, DocumentOptions } from '../client/documents/Documents'; import { CurrentUserUtils } from '../client/util/CurrentUserUtils'; import { ScriptingGlobals } from '../client/util/ScriptingGlobals'; -import { SettingsManager, ColorScheme } from '../client/util/SettingsManager'; +import { SettingsManager } from '../client/util/SettingsManager'; import { Transform } from '../client/util/Transform'; import { UndoManager } from '../client/util/UndoManager'; -import { TabDocView } from '../client/views/collections/TabDocView'; import { GestureOverlay } from '../client/views/GestureOverlay'; +import { TabDocView } from '../client/views/collections/TabDocView'; import { AudioBox } from '../client/views/nodes/AudioBox'; import { DocumentView } from '../client/views/nodes/DocumentView'; -import { RichTextMenu } from '../client/views/nodes/formattedText/RichTextMenu'; import { RadialMenu } from '../client/views/nodes/RadialMenu'; +import { RichTextMenu } from '../client/views/nodes/formattedText/RichTextMenu'; import { Doc, DocListCast } from '../fields/Doc'; import { InkTool } from '../fields/InkField'; import { List } from '../fields/List'; import { ScriptField } from '../fields/ScriptField'; import { Cast, FieldValue, StrCast } from '../fields/Types'; -import { emptyFunction, emptyPath, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, returnTrue, returnZero } from '../Utils'; -import { AudioUpload } from './AudioUpload'; -import { Uploader } from './ImageUpload'; import './AudioUpload.scss'; +import { Uploader } from './ImageUpload'; import './ImageUpload.scss'; import './MobileInterface.scss'; @@ -258,7 +257,7 @@ export class MobileInterface extends React.Component { } @action - componentDidMount = () => { + componentDidMount() { // if the home menu is in list view -> adjust the menu toggle appropriately this._menuListView = this._homeDoc._type_collection === 'stacking' ? true : false; Doc.ActiveTool = InkTool.None; // ink should intially be set to none @@ -268,7 +267,7 @@ export class MobileInterface extends React.Component { // remove double click to avoid mobile zoom in document.removeEventListener('dblclick', this.onReactDoubleClick); document.addEventListener('dblclick', this.onReactDoubleClick); - }; + } @action componentWillUnmount = () => { @@ -385,11 +384,9 @@ export class MobileInterface extends React.Component { <div style={{ position: 'relative', top: '198px', height: `calc(100% - 350px)`, width: '100%', left: '0%' }}> <DocumentView Document={this.mainContainer} - DataDoc={undefined} addDocument={returnFalse} addDocTab={returnFalse} pinToPres={emptyFunction} - rootSelected={returnFalse} removeDocument={undefined} ScreenToLocalTransform={Transform.Identity} PanelWidth={this.returnWidth} @@ -399,9 +396,8 @@ export class MobileInterface extends React.Component { isContentActive={emptyFunction} focus={emptyFunction} styleProvider={this.whitebackground} - docViewPath={returnEmptyDoclist} + containerViewPath={returnEmptyDoclist} whenChildContentsActiveChanged={emptyFunction} - bringToFront={emptyFunction} childFilters={returnEmptyFilter} childFiltersByRanges={returnEmptyFilter} searchFilterDocs={returnEmptyDoclist} @@ -658,7 +654,7 @@ export class MobileInterface extends React.Component { // DocButton for switching into ink mode @computed get drawInk() { return !this.mainContainer || this._activeDoc._type_collection !== CollectionViewType.Docking ? null : ( - <div className="docButton" id="inkButton" title={Doc.isDocPinned(this._activeDoc) ? 'Pen on' : 'Pen off'} onClick={this.onSwitchInking}> + <div className="docButton" id="inkButton" onClick={this.onSwitchInking}> <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="pen-nib" /> </div> ); @@ -668,7 +664,7 @@ export class MobileInterface extends React.Component { @computed get uploadImageButton() { if (this._activeDoc.type === DocumentType.COL && this._activeDoc !== this._homeDoc && this._activeDoc._type_collection !== CollectionViewType.Docking && this._activeDoc.title !== 'WORKSPACES') { return ( - <div className="docButton" id="imageButton" title={Doc.isDocPinned(this._activeDoc) ? 'Pen on' : 'Pen off'} onClick={this.toggleUpload}> + <div className="docButton" id="imageButton" onClick={this.toggleUpload}> <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="upload" /> </div> ); @@ -692,13 +688,8 @@ export class MobileInterface extends React.Component { @computed get pinToPresentation() { // Only making button available if it is an image if (!(this._activeDoc.type === 'collection' || this._activeDoc.type === 'presentation')) { - const isPinned = this._activeDoc && Doc.isDocPinned(this._activeDoc); return ( - <div - className="docButton" - title={Doc.isDocPinned(this._activeDoc) ? 'Unpin from presentation' : 'Pin to presentation'} - style={{ backgroundColor: isPinned ? 'black' : 'white', color: isPinned ? 'white' : 'black' }} - onClick={e => TabDocView.PinDoc(this._activeDoc, {})}> + <div className="docButton" title={'Pin to presentation'} style={{ backgroundColor: 'white', color: 'black' }} onClick={e => TabDocView.PinDoc(this._activeDoc, {})}> <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin" /> </div> ); @@ -825,9 +816,6 @@ export class MobileInterface extends React.Component { <div className="mobileInterface-container" onDragOver={this.onDragOver}> <SettingsManager /> <div className={`image-upload ${this._imageUploadActive ? 'active' : ''}`}>{this.uploadImage}</div> - <div className={`audio-upload ${this._audioUploadActive ? 'active' : ''}`}> - <AudioUpload /> - </div> {this.switchMenuView} {this.inkMenu} <GestureOverlay isActive={true}> diff --git a/src/server/ActionUtilities.ts b/src/server/ActionUtilities.ts index bc8fd6f87..55b50cc12 100644 --- a/src/server/ActionUtilities.ts +++ b/src/server/ActionUtilities.ts @@ -4,9 +4,9 @@ import { createWriteStream, exists, mkdir, readFile, unlink, writeFile } from 'f import * as nodemailer from "nodemailer"; import { MailOptions } from "nodemailer/lib/json-transport"; import * as path from 'path'; -import * as rimraf from "rimraf"; +import { rimraf } from "rimraf"; import { ExecOptions } from 'shelljs'; -import Mail = require('nodemailer/lib/mailer'); +import * as Mail from 'nodemailer/lib/mailer'; const projectRoot = path.resolve(__dirname, "../../"); export function pathFromRoot(relative?: string) { @@ -103,8 +103,10 @@ export const createIfNotExists = async (path: string) => { }; export async function Prune(rootDirectory: string): Promise<boolean> { - const error = await new Promise<Error>(resolve => rimraf(rootDirectory, resolve)); - return error === null; + // const error = await new Promise<Error>(resolve => rimraf(rootDirectory).then(resolve)); + await new Promise<void>(resolve => rimraf(rootDirectory).then(() => resolve())); + // return error === null; + return true; } export const Destroy = (mediaPath: string) => new Promise<boolean>(resolve => unlink(mediaPath, error => resolve(error === null))); diff --git a/src/server/ApiManagers/DeleteManager.ts b/src/server/ApiManagers/DeleteManager.ts index 46c0d8a8a..c6c4ca464 100644 --- a/src/server/ApiManagers/DeleteManager.ts +++ b/src/server/ApiManagers/DeleteManager.ts @@ -1,21 +1,19 @@ -import ApiManager, { Registration } from "./ApiManager"; -import { Method, _permission_denied } from "../RouteManager"; -import { WebSocket } from "../websocket"; -import { Database } from "../database"; -import rimraf = require("rimraf"); -import { filesDirectory } from ".."; -import { DashUploadUtils } from "../DashUploadUtils"; -import { mkdirSync } from "fs"; -import RouteSubscriber from "../RouteSubscriber"; +import ApiManager, { Registration } from './ApiManager'; +import { Method, _permission_denied } from '../RouteManager'; +import { WebSocket } from '../websocket'; +import { Database } from '../database'; +import { rimraf } from 'rimraf'; +import { filesDirectory } from '..'; +import { DashUploadUtils } from '../DashUploadUtils'; +import { mkdirSync } from 'fs'; +import RouteSubscriber from '../RouteSubscriber'; export default class DeleteManager extends ApiManager { - protected initialize(register: Registration): void { - register({ method: Method.GET, requireAdminInRelease: true, - subscription: new RouteSubscriber("delete").add("target?"), + subscription: new RouteSubscriber('delete').add('target?'), secureHandler: async ({ req, res }) => { const { target } = req.params; @@ -24,12 +22,12 @@ export default class DeleteManager extends ApiManager { } else { let all = false; switch (target) { - case "all": + case 'all': all = true; - case "database": + case 'database': await WebSocket.doDelete(false); if (!all) break; - case "files": + case 'files': rimraf.sync(filesDirectory); mkdirSync(filesDirectory); await DashUploadUtils.buildFileDirectories(); @@ -39,10 +37,8 @@ export default class DeleteManager extends ApiManager { } } - res.redirect("/home"); - } + res.redirect('/home'); + }, }); - } - -}
\ No newline at end of file +} diff --git a/src/server/ApiManagers/GooglePhotosManager.ts b/src/server/ApiManagers/GooglePhotosManager.ts index be17b698e..5feb25fd4 100644 --- a/src/server/ApiManagers/GooglePhotosManager.ts +++ b/src/server/ApiManagers/GooglePhotosManager.ts @@ -1,331 +1,324 @@ -import ApiManager, { Registration } from "./ApiManager"; -import { Method, _error, _success, _invalid } from "../RouteManager"; -import * as path from "path"; -import { GoogleApiServerUtils } from "../apis/google/GoogleApiServerUtils"; -import { BatchedArray, TimeUnit } from "array-batcher"; -import { Opt } from "../../fields/Doc"; -import { DashUploadUtils, InjectSize, SizeSuffix } from "../DashUploadUtils"; -import { Database } from "../database"; -import { red } from "colors"; -import { Upload } from "../SharedMediaTypes"; -import request = require('request-promise'); -import { NewMediaItemResult } from "../apis/google/SharedTypes"; +// import ApiManager, { Registration } from './ApiManager'; +// import { Method, _error, _success, _invalid } from '../RouteManager'; +// import * as path from 'path'; +// import { GoogleApiServerUtils } from '../apis/google/GoogleApiServerUtils'; +// import { BatchedArray, TimeUnit } from 'array-batcher'; +// import { Opt } from '../../fields/Doc'; +// import { DashUploadUtils, InjectSize, SizeSuffix } from '../DashUploadUtils'; +// import { Database } from '../database'; +// import { red } from 'colors'; +// import { Upload } from '../SharedMediaTypes'; +// import * as request from 'request-promise'; +// import { NewMediaItemResult } from '../apis/google/SharedTypes'; -const prefix = "google_photos_"; -const remoteUploadError = "None of the preliminary uploads to Google's servers was successful."; -const authenticationError = "Unable to authenticate Google credentials before uploading to Google Photos!"; -const mediaError = "Unable to convert all uploaded bytes to media items!"; -const localUploadError = (count: number) => `Unable to upload ${count} images to Dash's server`; -const requestError = "Unable to execute download: the body's media items were malformed."; -const downloadError = "Encountered an error while executing downloads."; +// const prefix = 'google_photos_'; +// const remoteUploadError = "None of the preliminary uploads to Google's servers was successful."; +// const authenticationError = 'Unable to authenticate Google credentials before uploading to Google Photos!'; +// const mediaError = 'Unable to convert all uploaded bytes to media items!'; +// const localUploadError = (count: number) => `Unable to upload ${count} images to Dash's server`; +// const requestError = "Unable to execute download: the body's media items were malformed."; +// const downloadError = 'Encountered an error while executing downloads.'; -interface GooglePhotosUploadFailure { - batch: number; - index: number; - url: string; - reason: string; -} +// interface GooglePhotosUploadFailure { +// batch: number; +// index: number; +// url: string; +// reason: string; +// } -interface MediaItem { - baseUrl: string; -} +// interface MediaItem { +// baseUrl: string; +// } -interface NewMediaItem { - description: string; - simpleMediaItem: { - uploadToken: string; - }; -} +// interface NewMediaItem { +// description: string; +// simpleMediaItem: { +// uploadToken: string; +// }; +// } -/** - * This manager handles the creation of routes for google photos functionality. - */ -export default class GooglePhotosManager extends ApiManager { +// /** +// * This manager handles the creation of routes for google photos functionality. +// */ +// export default class GooglePhotosManager extends ApiManager { +// protected initialize(register: Registration): void { +// /** +// * This route receives a list of urls that point to images stored +// * on Dash's file system, and, in a two step process, uploads them to Google's servers and +// * returns the information Google generates about the associated uploaded remote images. +// */ +// register({ +// method: Method.POST, +// subscription: '/googlePhotosMediaPost', +// secureHandler: async ({ user, req, res }) => { +// const { media } = req.body; - protected initialize(register: Registration): void { +// // first we need to ensure that we know the google account to which these photos will be uploaded +// const token = (await GoogleApiServerUtils.retrieveCredentials(user.id))?.credentials?.access_token; +// if (!token) { +// return _error(res, authenticationError); +// } - /** - * This route receives a list of urls that point to images stored - * on Dash's file system, and, in a two step process, uploads them to Google's servers and - * returns the information Google generates about the associated uploaded remote images. - */ - register({ - method: Method.POST, - subscription: "/googlePhotosMediaPost", - secureHandler: async ({ user, req, res }) => { - const { media } = req.body; +// // next, having one large list or even synchronously looping over things trips a threshold +// // set on Google's servers, and would instantly return an error. So, we ease things out and send the photos to upload in +// // batches of 25, where the next batch is sent 100 millieconds after we receive a response from Google's servers. +// const failed: GooglePhotosUploadFailure[] = []; +// const batched = BatchedArray.from<Uploader.UploadSource>(media, { batchSize: 25 }); +// const interval = { magnitude: 100, unit: TimeUnit.Milliseconds }; +// const newMediaItems = await batched.batchedMapPatientInterval<NewMediaItem>(interval, async (batch, collector, { completedBatches }) => { +// for (let index = 0; index < batch.length; index++) { +// const { url, description } = batch[index]; +// // a local function used to record failure of an upload +// const fail = (reason: string) => failed.push({ reason, batch: completedBatches + 1, index, url }); +// // see image resizing - we store the size-agnostic url in our logic, but write out size-suffixed images to the file system +// // so here, given a size agnostic url, we're just making that conversion so that the file system knows which bytes to actually upload +// const imageToUpload = InjectSize(url, SizeSuffix.Original); +// // STEP 1/2: send the raw bytes of the image from our server to Google's servers. We'll get back an upload token +// // which acts as a pointer to those bytes that we can use to locate them later on +// const uploadToken = await Uploader.SendBytes(token, imageToUpload).catch(fail); +// if (!uploadToken) { +// fail(`${path.extname(url)} is not an accepted extension`); +// } else { +// // gather the upload token return from Google (a pointer they give us to the raw, currently useless bytes +// // we've uploaded to their servers) and put in the JSON format that the API accepts for image creation (used soon, below) +// collector.push({ +// description, +// simpleMediaItem: { uploadToken }, +// }); +// } +// } +// }); - // first we need to ensure that we know the google account to which these photos will be uploaded - const token = (await GoogleApiServerUtils.retrieveCredentials(user.id))?.credentials?.access_token; - if (!token) { - return _error(res, authenticationError); - } +// // inform the developer / server console of any failed upload attempts +// // does not abort the operation, since some subset of the uploads may have been successful +// const { length } = failed; +// if (length) { +// console.error(`Unable to upload ${length} image${length === 1 ? '' : 's'} to Google's servers`); +// console.log(failed.map(({ reason, batch, index, url }) => `@${batch}.${index}: ${url} failed:\n${reason}`).join('\n\n')); +// } - // next, having one large list or even synchronously looping over things trips a threshold - // set on Google's servers, and would instantly return an error. So, we ease things out and send the photos to upload in - // batches of 25, where the next batch is sent 100 millieconds after we receive a response from Google's servers. - const failed: GooglePhotosUploadFailure[] = []; - const batched = BatchedArray.from<Uploader.UploadSource>(media, { batchSize: 25 }); - const interval = { magnitude: 100, unit: TimeUnit.Milliseconds }; - const newMediaItems = await batched.batchedMapPatientInterval<NewMediaItem>( - interval, - async (batch, collector, { completedBatches }) => { - for (let index = 0; index < batch.length; index++) { - const { url, description } = batch[index]; - // a local function used to record failure of an upload - const fail = (reason: string) => failed.push({ reason, batch: completedBatches + 1, index, url }); - // see image resizing - we store the size-agnostic url in our logic, but write out size-suffixed images to the file system - // so here, given a size agnostic url, we're just making that conversion so that the file system knows which bytes to actually upload - const imageToUpload = InjectSize(url, SizeSuffix.Original); - // STEP 1/2: send the raw bytes of the image from our server to Google's servers. We'll get back an upload token - // which acts as a pointer to those bytes that we can use to locate them later on - const uploadToken = await Uploader.SendBytes(token, imageToUpload).catch(fail); - if (!uploadToken) { - fail(`${path.extname(url)} is not an accepted extension`); - } else { - // gather the upload token return from Google (a pointer they give us to the raw, currently useless bytes - // we've uploaded to their servers) and put in the JSON format that the API accepts for image creation (used soon, below) - collector.push({ - description, - simpleMediaItem: { uploadToken } - }); - } - } - } - ); +// // if none of the preliminary uploads was successful, no need to try and create images +// // report the failure to the client and return +// if (!newMediaItems.length) { +// console.error(red(`${remoteUploadError} Thus, aborting image creation. Please try again.`)); +// _error(res, remoteUploadError); +// return; +// } - // inform the developer / server console of any failed upload attempts - // does not abort the operation, since some subset of the uploads may have been successful - const { length } = failed; - if (length) { - console.error(`Unable to upload ${length} image${length === 1 ? "" : "s"} to Google's servers`); - console.log(failed.map(({ reason, batch, index, url }) => `@${batch}.${index}: ${url} failed:\n${reason}`).join('\n\n')); - } +// // STEP 2/2: create the media items and return the API's response to the client, along with any failures +// return Uploader.CreateMediaItems(token, newMediaItems, req.body.album).then( +// results => _success(res, { results, failed }), +// error => _error(res, mediaError, error) +// ); +// }, +// }); - // if none of the preliminary uploads was successful, no need to try and create images - // report the failure to the client and return - if (!newMediaItems.length) { - console.error(red(`${remoteUploadError} Thus, aborting image creation. Please try again.`)); - _error(res, remoteUploadError); - return; - } +// /** +// * This route receives a list of urls that point to images +// * stored on Google's servers and (following a *rough* heuristic) +// * uploads each image to Dash's server if it hasn't already been uploaded. +// * Unfortunately, since Google has so many of these images on its servers, +// * these user content urls expire every 6 hours. So we can't store the url of a locally uploaded +// * Google image and compare the candidate url to it to figure out if we already have it, +// * since the same bytes on their server might now be associated with a new, random url. +// * So, we do the next best thing and try to use an intrinsic attribute of those bytes as +// * an identifier: the precise content size. This works in small cases, but has the obvious flaw of failing to upload +// * an image locally if we already have uploaded another Google user content image with the exact same content size. +// */ +// register({ +// method: Method.POST, +// subscription: '/googlePhotosMediaGet', +// secureHandler: async ({ req, res }) => { +// const { mediaItems } = req.body as { mediaItems: MediaItem[] }; +// if (!mediaItems) { +// // non-starter, since the input was in an invalid format +// _invalid(res, requestError); +// return; +// } +// let failed = 0; +// const completed: Opt<Upload.ImageInformation>[] = []; +// for (const { baseUrl } of mediaItems) { +// // start by getting the content size of the remote image +// const results = await DashUploadUtils.InspectImage(baseUrl); +// if (results instanceof Error) { +// // if something went wrong here, we can't hope to upload it, so just move on to the next +// failed++; +// continue; +// } +// const { contentSize, ...attributes } = results; +// // check to see if we have uploaded a Google user content image *specifically via this route* already +// // that has this exact content size +// const found: Opt<Upload.ImageInformation> = await Database.Auxiliary.QueryUploadHistory(contentSize); +// if (!found) { +// // if we haven't, then upload it locally to Dash's server +// const upload = await DashUploadUtils.UploadInspectedImage({ contentSize, ...attributes }, undefined, prefix, false).catch(error => _error(res, downloadError, error)); +// if (upload) { +// completed.push(upload); +// // inform the heuristic that we've encountered an image with this content size, +// // to be later checked against in future uploads +// await Database.Auxiliary.LogUpload(upload); +// } else { +// // make note of a failure to upload locallys +// failed++; +// } +// } else { +// // if we have, the variable 'found' is handily the upload information of the +// // existing image, so we add it to the list as if we had just uploaded it now without actually +// // making a duplicate write +// completed.push(found); +// } +// } +// // if there are any failures, report a general failure to the client +// if (failed) { +// return _error(res, localUploadError(failed)); +// } +// // otherwise, return the image upload information list corresponding to the newly (or previously) +// // uploaded images +// _success(res, completed); +// }, +// }); +// } +// } - // STEP 2/2: create the media items and return the API's response to the client, along with any failures - return Uploader.CreateMediaItems(token, newMediaItems, req.body.album).then( - results => _success(res, { results, failed }), - error => _error(res, mediaError, error) - ); - } - }); +// /** +// * This namespace encompasses the logic +// * necessary to upload images to Google's server, +// * and then initialize / create those images in the Photos +// * API given the upload tokens returned from the initial +// * uploading process. +// * +// * https://developers.google.com/photos/library/reference/rest/v1/mediaItems/batchCreate +// */ +// export namespace Uploader { +// /** +// * Specifies the structure of the object +// * necessary to upload bytes to Google's servers. +// * The url is streamed to access the image's bytes, +// * and the description is what appears in Google Photos' +// * description field. +// */ +// export interface UploadSource { +// url: string; +// description: string; +// } - /** - * This route receives a list of urls that point to images - * stored on Google's servers and (following a *rough* heuristic) - * uploads each image to Dash's server if it hasn't already been uploaded. - * Unfortunately, since Google has so many of these images on its servers, - * these user content urls expire every 6 hours. So we can't store the url of a locally uploaded - * Google image and compare the candidate url to it to figure out if we already have it, - * since the same bytes on their server might now be associated with a new, random url. - * So, we do the next best thing and try to use an intrinsic attribute of those bytes as - * an identifier: the precise content size. This works in small cases, but has the obvious flaw of failing to upload - * an image locally if we already have uploaded another Google user content image with the exact same content size. - */ - register({ - method: Method.POST, - subscription: "/googlePhotosMediaGet", - secureHandler: async ({ req, res }) => { - const { mediaItems } = req.body as { mediaItems: MediaItem[] }; - if (!mediaItems) { - // non-starter, since the input was in an invalid format - _invalid(res, requestError); - return; - } - let failed = 0; - const completed: Opt<Upload.ImageInformation>[] = []; - for (const { baseUrl } of mediaItems) { - // start by getting the content size of the remote image - const results = await DashUploadUtils.InspectImage(baseUrl); - if (results instanceof Error) { - // if something went wrong here, we can't hope to upload it, so just move on to the next - failed++; - continue; - } - const { contentSize, ...attributes } = results; - // check to see if we have uploaded a Google user content image *specifically via this route* already - // that has this exact content size - const found: Opt<Upload.ImageInformation> = await Database.Auxiliary.QueryUploadHistory(contentSize); - if (!found) { - // if we haven't, then upload it locally to Dash's server - const upload = await DashUploadUtils.UploadInspectedImage({ contentSize, ...attributes }, undefined, prefix, false).catch(error => _error(res, downloadError, error)); - if (upload) { - completed.push(upload); - // inform the heuristic that we've encountered an image with this content size, - // to be later checked against in future uploads - await Database.Auxiliary.LogUpload(upload); - } else { - // make note of a failure to upload locallys - failed++; - } - } else { - // if we have, the variable 'found' is handily the upload information of the - // existing image, so we add it to the list as if we had just uploaded it now without actually - // making a duplicate write - completed.push(found); - } - } - // if there are any failures, report a general failure to the client - if (failed) { - return _error(res, localUploadError(failed)); - } - // otherwise, return the image upload information list corresponding to the newly (or previously) - // uploaded images - _success(res, completed); - } - }); +// /** +// * This is the format needed to pass +// * into the BatchCreate API request +// * to take a reference to raw uploaded bytes +// * and actually create an image in Google Photos. +// * +// * So, to instantiate this interface you must have already dispatched an upload +// * and received an upload token. +// */ +// export interface NewMediaItem { +// description: string; +// simpleMediaItem: { +// uploadToken: string; +// }; +// } - } -} +// /** +// * A utility function to streamline making +// * calls to the API's url - accentuates +// * the relative path in the caller. +// * @param extension the desired +// * subset of the API +// */ +// function prepend(extension: string): string { +// return `https://photoslibrary.googleapis.com/v1/${extension}`; +// } -/** - * This namespace encompasses the logic - * necessary to upload images to Google's server, - * and then initialize / create those images in the Photos - * API given the upload tokens returned from the initial - * uploading process. - * - * https://developers.google.com/photos/library/reference/rest/v1/mediaItems/batchCreate - */ -export namespace Uploader { +// /** +// * Factors out the creation of the API request's +// * authentication elements stored in the header. +// * @param type the contents of the request +// * @param token the user-specific Google access token +// */ +// function headers(type: string, token: string) { +// return { +// 'Content-Type': `application/${type}`, +// Authorization: `Bearer ${token}`, +// }; +// } - /** - * Specifies the structure of the object - * necessary to upload bytes to Google's servers. - * The url is streamed to access the image's bytes, - * and the description is what appears in Google Photos' - * description field. - */ - export interface UploadSource { - url: string; - description: string; - } +// /** +// * This is the first step in the remote image creation process. +// * Here we upload the raw bytes of the image to Google's servers by +// * setting authentication and other required header properties and including +// * the raw bytes to the image, to be uploaded, in the body of the request. +// * @param bearerToken the user-specific Google access token, specifies the account associated +// * with the eventual image creation +// * @param url the url of the image to upload +// * @param filename an optional name associated with the uploaded image - if not specified +// * defaults to the filename (basename) in the url +// */ +// export const SendBytes = async (bearerToken: string, url: string, filename?: string): Promise<any> => { +// // check if the url points to a non-image or an unsupported format +// if (!DashUploadUtils.validateExtension(url)) { +// return undefined; +// } +// const body = await request(url, { encoding: null }); // returns a readable stream with the unencoded binary image data +// const parameters = { +// method: 'POST', +// uri: prepend('uploads'), +// headers: { +// ...headers('octet-stream', bearerToken), +// 'X-Goog-Upload-File-Name': filename || path.basename(url), +// 'X-Goog-Upload-Protocol': 'raw', +// }, +// body, +// }; +// return new Promise((resolve, reject) => +// request(parameters, (error, _response, body) => { +// if (error) { +// // on rejection, the server logs the error and the offending image +// return reject(error); +// } +// resolve(body); +// }) +// ); +// }; - /** - * This is the format needed to pass - * into the BatchCreate API request - * to take a reference to raw uploaded bytes - * and actually create an image in Google Photos. - * - * So, to instantiate this interface you must have already dispatched an upload - * and received an upload token. - */ - export interface NewMediaItem { - description: string; - simpleMediaItem: { - uploadToken: string; - }; - } - - /** - * A utility function to streamline making - * calls to the API's url - accentuates - * the relative path in the caller. - * @param extension the desired - * subset of the API - */ - function prepend(extension: string): string { - return `https://photoslibrary.googleapis.com/v1/${extension}`; - } - - /** - * Factors out the creation of the API request's - * authentication elements stored in the header. - * @param type the contents of the request - * @param token the user-specific Google access token - */ - function headers(type: string, token: string) { - return { - 'Content-Type': `application/${type}`, - 'Authorization': `Bearer ${token}`, - }; - } - - /** - * This is the first step in the remote image creation process. - * Here we upload the raw bytes of the image to Google's servers by - * setting authentication and other required header properties and including - * the raw bytes to the image, to be uploaded, in the body of the request. - * @param bearerToken the user-specific Google access token, specifies the account associated - * with the eventual image creation - * @param url the url of the image to upload - * @param filename an optional name associated with the uploaded image - if not specified - * defaults to the filename (basename) in the url - */ - export const SendBytes = async (bearerToken: string, url: string, filename?: string): Promise<any> => { - // check if the url points to a non-image or an unsupported format - if (!DashUploadUtils.validateExtension(url)) { - return undefined; - } - const body = await request(url, { encoding: null }); // returns a readable stream with the unencoded binary image data - const parameters = { - method: 'POST', - uri: prepend('uploads'), - headers: { - ...headers('octet-stream', bearerToken), - 'X-Goog-Upload-File-Name': filename || path.basename(url), - 'X-Goog-Upload-Protocol': 'raw' - }, - body - }; - return new Promise((resolve, reject) => request(parameters, (error, _response, body) => { - if (error) { - // on rejection, the server logs the error and the offending image - return reject(error); - } - resolve(body); - })); - }; - - /** - * This is the second step in the remote image creation process: having uploaded - * the raw bytes of the image and received / stored pointers (upload tokens) to those - * bytes, we can now instruct the API to finalize the creation of those images by - * submitting a batch create request with the list of upload tokens and the description - * to be associated with reach resulting new image. - * @param bearerToken the user-specific Google access token, specifies the account associated - * with the eventual image creation - * @param newMediaItems a list of objects containing a description and, effectively, the - * pointer to the uploaded bytes - * @param album if included, will add all of the newly created remote images to the album - * with the specified id - */ - export const CreateMediaItems = async (bearerToken: string, newMediaItems: NewMediaItem[], album?: { id: string }): Promise<NewMediaItemResult[]> => { - // it's important to note that the API can't handle more than 50 items in each request and - // seems to need at least some latency between requests (spamming it synchronously has led to the server returning errors)... - const batched = BatchedArray.from(newMediaItems, { batchSize: 50 }); - // ...so we execute them in delayed batches and await the entire execution - return batched.batchedMapPatientInterval( - { magnitude: 100, unit: TimeUnit.Milliseconds }, - async (batch: NewMediaItem[], collector): Promise<void> => { - const parameters = { - method: 'POST', - headers: headers('json', bearerToken), - uri: prepend('mediaItems:batchCreate'), - body: { newMediaItems: batch } as any, - json: true - }; - // register the target album, if provided - album && (parameters.body.albumId = album.id); - collector.push(...(await new Promise<NewMediaItemResult[]>((resolve, reject) => { - request(parameters, (error, _response, body) => { - if (error) { - reject(error); - } else { - resolve(body.newMediaItemResults); - } - }); - }))); - } - ); - }; - -}
\ No newline at end of file +// /** +// * This is the second step in the remote image creation process: having uploaded +// * the raw bytes of the image and received / stored pointers (upload tokens) to those +// * bytes, we can now instruct the API to finalize the creation of those images by +// * submitting a batch create request with the list of upload tokens and the description +// * to be associated with reach resulting new image. +// * @param bearerToken the user-specific Google access token, specifies the account associated +// * with the eventual image creation +// * @param newMediaItems a list of objects containing a description and, effectively, the +// * pointer to the uploaded bytes +// * @param album if included, will add all of the newly created remote images to the album +// * with the specified id +// */ +// export const CreateMediaItems = async (bearerToken: string, newMediaItems: NewMediaItem[], album?: { id: string }): Promise<NewMediaItemResult[]> => { +// // it's important to note that the API can't handle more than 50 items in each request and +// // seems to need at least some latency between requests (spamming it synchronously has led to the server returning errors)... +// const batched = BatchedArray.from(newMediaItems, { batchSize: 50 }); +// // ...so we execute them in delayed batches and await the entire execution +// return batched.batchedMapPatientInterval({ magnitude: 100, unit: TimeUnit.Milliseconds }, async (batch: NewMediaItem[], collector): Promise<void> => { +// const parameters = { +// method: 'POST', +// headers: headers('json', bearerToken), +// uri: prepend('mediaItems:batchCreate'), +// body: { newMediaItems: batch } as any, +// json: true, +// }; +// // register the target album, if provided +// album && (parameters.body.albumId = album.id); +// collector.push( +// ...(await new Promise<NewMediaItemResult[]>((resolve, reject) => { +// request(parameters, (error, _response, body) => { +// if (error) { +// reject(error); +// } else { +// resolve(body.newMediaItemResults); +// } +// }); +// })) +// ); +// }); +// }; +// } diff --git a/src/server/ApiManagers/PDFManager.ts b/src/server/ApiManagers/PDFManager.ts deleted file mode 100644 index e419d3ac4..000000000 --- a/src/server/ApiManagers/PDFManager.ts +++ /dev/null @@ -1,116 +0,0 @@ -import ApiManager, { Registration } from "./ApiManager"; -import { Method } from "../RouteManager"; -import RouteSubscriber from "../RouteSubscriber"; -import { existsSync, createReadStream, createWriteStream } from "fs"; -import * as Pdfjs from 'pdfjs-dist/legacy/build/pdf'; -import { createCanvas } from "canvas"; -const imageSize = require("probe-image-size"); -import * as express from "express"; -import * as path from "path"; -import { Directory, serverPathToFile, clientPathToFile, pathToDirectory } from "./UploadManager"; -import { red } from "colors"; -import { resolve } from "path"; - -export default class PDFManager extends ApiManager { - - protected initialize(register: Registration): void { - - register({ - method: Method.POST, - subscription: new RouteSubscriber("thumbnail"), - secureHandler: async ({ req, res }) => { - const { coreFilename, pageNum, subtree } = req.body; - return getOrCreateThumbnail(coreFilename, pageNum, res, subtree); - } - }); - - } - -} - -async function getOrCreateThumbnail(coreFilename: string, pageNum: number, res: express.Response, subtree?: string): Promise<void> { - const resolved = `${coreFilename}-${pageNum}.png`; - return new Promise<void>(async resolve => { - const path = serverPathToFile(Directory.pdf_thumbnails, resolved); - if (existsSync(path)) { - const existingThumbnail = createReadStream(path); - const { err, viewport } = await new Promise<any>(resolve => { - imageSize(existingThumbnail, (err: any, viewport: any) => resolve({ err, viewport })); - }); - if (err) { - console.log(red(`In PDF thumbnail response, unable to determine dimensions of ${resolved}:`)); - console.log(err); - return; - } - dispatchThumbnail(res, viewport, resolved); - } else { - await CreateThumbnail(coreFilename, pageNum, res, subtree); - } - resolve(); - }); -} - -async function CreateThumbnail(coreFilename: string, pageNum: number, res: express.Response, subtree?: string) { - const part1 = subtree ?? ""; - const filename = `${part1}${coreFilename}.pdf`; - const sourcePath = resolve(pathToDirectory(Directory.pdfs), filename); - const documentProxy = await Pdfjs.getDocument(sourcePath).promise; - const factory = new NodeCanvasFactory(); - const page = await documentProxy.getPage(pageNum); - const viewport = page.getViewport({ scale: 1, rotation: 0, dontFlip: false }); - const { canvas, context } = factory.create(viewport.width, viewport.height); - const renderContext = { - canvasContext: context, - canvasFactory: factory, - viewport - }; - await page.render(renderContext).promise; - const pngStream = canvas.createPNGStream(); - const resolved = `${coreFilename}-${pageNum}.png`; - const pngFile = serverPathToFile(Directory.pdf_thumbnails, resolved); - const out = createWriteStream(pngFile); - pngStream.pipe(out); - return new Promise<void>((resolve, reject) => { - out.on("finish", () => { - dispatchThumbnail(res, viewport, resolved); - resolve(); - }); - out.on("error", error => { - console.log(red(`In PDF thumbnail creation, encountered the following error when piping ${pngFile}:`)); - console.log(error); - reject(); - }); - }); -} - -function dispatchThumbnail(res: express.Response, { width, height }: Pdfjs.PageViewport, thumbnailName: string) { - res.send({ - path: clientPathToFile(Directory.pdf_thumbnails, thumbnailName), - width, - height - }); -} - -class NodeCanvasFactory { - - create = (width: number, height: number) => { - const canvas = createCanvas(width, height); - const context = canvas.getContext('2d'); - return { - canvas, - context - }; - } - - reset = (canvasAndContext: any, width: number, height: number) => { - canvasAndContext.canvas.width = width; - canvasAndContext.canvas.height = height; - } - - destroy = (canvasAndContext: any) => { - canvasAndContext.canvas.width = 0; - canvasAndContext.canvas.height = 0; - canvasAndContext.canvas = null; - canvasAndContext.context = null; - } -} diff --git a/src/server/ApiManagers/SearchManager.ts b/src/server/ApiManagers/SearchManager.ts index 186f0bcd3..72c01def7 100644 --- a/src/server/ApiManagers/SearchManager.ts +++ b/src/server/ApiManagers/SearchManager.ts @@ -8,7 +8,7 @@ import RouteSubscriber from '../RouteSubscriber'; import { Search } from '../Search'; import ApiManager, { Registration } from './ApiManager'; import { Directory, pathToDirectory } from './UploadManager'; -const findInFiles = require('find-in-files'); +import { find } from 'find-in-files'; export class SearchManager extends ApiManager { protected initialize(register: Registration): void { @@ -47,7 +47,7 @@ export class SearchManager extends ApiManager { const dir = pathToDirectory(Directory.text); try { const regex = new RegExp(q.toString()); - results = await findInFiles.find({ term: q, flags: 'ig' }, dir, '.txt$'); + results = await find({ term: q, flags: 'ig' }, dir, '.txt$'); for (const result in results) { resObj.ids.push(path.basename(result, '.txt').replace(/upload_/, '')); resObj.lines.push(results[result].line); diff --git a/src/server/ApiManagers/UploadManager.ts b/src/server/ApiManagers/UploadManager.ts index ea5d8cb33..8a2fe1389 100644 --- a/src/server/ApiManagers/UploadManager.ts +++ b/src/server/ApiManagers/UploadManager.ts @@ -1,7 +1,7 @@ import * as formidable from 'formidable'; import { createReadStream, createWriteStream, unlink, writeFile } from 'fs'; -import { basename, dirname, extname, normalize } from 'path'; -import * as sharp from 'sharp'; +import * as path from 'path'; +import Jimp from 'jimp'; import { filesDirectory, publicDirectory } from '..'; import { retrocycle } from '../../decycler/decycler'; import { DashUploadUtils, InjectSize, SizeSuffix } from '../DashUploadUtils'; @@ -11,11 +11,11 @@ import RouteSubscriber from '../RouteSubscriber'; import { AcceptableMedia, Upload } from '../SharedMediaTypes'; import ApiManager, { Registration } from './ApiManager'; import { SolrManager } from './SearchManager'; -import v4 = require('uuid/v4'); +import * as uuid from 'uuid'; import { DashVersion } from '../../fields/DocSymbols'; -const AdmZip = require('adm-zip'); -const imageDataUri = require('image-data-uri'); -const fs = require('fs'); +import * as AdmZip from 'adm-zip'; +import * as imageDataUri from 'image-data-uri'; +import * as fs from 'fs'; export enum Directory { parsed_files = 'parsed_files', @@ -29,11 +29,11 @@ export enum Directory { } export function serverPathToFile(directory: Directory, filename: string) { - return normalize(`${filesDirectory}/${directory}/${filename}`); + return path.normalize(`${filesDirectory}/${directory}/${filename}`); } export function pathToDirectory(directory: Directory) { - return normalize(`${filesDirectory}/${directory}`); + return path.normalize(`${filesDirectory}/${directory}`); } export function clientPathToFile(directory: Directory, filename: string) { @@ -63,7 +63,7 @@ export default class UploadManager extends ApiManager { method: Method.POST, subscription: '/uploadFormData', secureHandler: async ({ req, res }) => { - const form = new formidable.IncomingForm(); + const form = new formidable.IncomingForm({ keepExtensions: true, uploadDir: pathToDirectory(Directory.parsed_files) }); let fileguids = ''; let filesize = ''; form.on('field', (e: string, value: string) => { @@ -74,28 +74,32 @@ export default class UploadManager extends ApiManager { filesize = value; } }); + fileguids.split(';').map(guid => DashUploadUtils.uploadProgress.set(guid, `upload starting`)); + form.on('progress', e => fileguids.split(';').map(guid => DashUploadUtils.uploadProgress.set(guid, `read:(${Math.round((100 * +e) / +filesize)}%) ${e} of ${filesize}`))); - form.keepExtensions = true; - form.uploadDir = pathToDirectory(Directory.parsed_files); return new Promise<void>(resolve => { form.parse(req, async (_err, _fields, files) => { const results: Upload.FileResponse[] = []; if (_err?.message) { results.push({ source: { + filepath: '', + originalFilename: 'none', + newFilename: 'none', + mimetype: 'text', size: 0, - path: 'none', - name: 'none', - type: 'none', - toJSON: () => ({ name: 'none', path: '' }), + hashAlgorithm: 'md5', + toJSON: () => ({ name: 'none', size: 0, length: 0, mtime: new Date(), filepath: '', originalFilename: 'none', newFilename: 'none', mimetype: 'text' }), }, result: { name: 'failed upload', message: `${_err.message}` }, }); } + fileguids.split(';').map(guid => DashUploadUtils.uploadProgress.set(guid, `resampling images`)); + for (const key in files) { const f = files[key]; - if (!Array.isArray(f)) { - const result = await DashUploadUtils.upload(f, key); // key is the guid used by the client to track upload progress. + if (f) { + const result = await DashUploadUtils.upload(f[0], key); // key is the guid used by the client to track upload progress. result && !(result.result instanceof Error) && results.push(result); } } @@ -164,7 +168,7 @@ export default class UploadManager extends ApiManager { if (error) { return res.send(); } - await DashUploadUtils.outputResizedImages(() => createReadStream(resolvedPath), resolvedName, pathToDirectory(Directory.images)); + await DashUploadUtils.outputResizedImages(resolvedPath, resolvedName, pathToDirectory(Directory.images)); res.send({ accessPaths: { agnostic: DashUploadUtils.getAccessPaths(Directory.images, resolvedName), @@ -193,15 +197,14 @@ export default class UploadManager extends ApiManager { method: Method.POST, subscription: '/uploadDoc', secureHandler: ({ req, res }) => { - const form = new formidable.IncomingForm(); - form.keepExtensions = true; + const form = new formidable.IncomingForm({ keepExtensions: true }); // let path = req.body.path; const ids: { [id: string]: string } = {}; let remap = true; const getId = (id: string): string => { if (!remap || id.endsWith('Proto')) return id; if (id in ids) return ids[id]; - return (ids[id] = v4()); + return (ids[id] = uuid.v4()); }; const mapFn = (doc: any) => { if (doc.id) { @@ -241,83 +244,64 @@ export default class UploadManager extends ApiManager { }; return new Promise<void>(resolve => { form.parse(req, async (_err, fields, files) => { - remap = fields.remap !== 'false'; + remap = Object.keys(fields).some(key => key === 'remap' && !fields.remap?.includes('false')); //.remap !== 'false'; // bcz: looking to see if the field 'remap' is set to 'false' let id: string = ''; let docids: string[] = []; let linkids: string[] = []; try { for (const name in files) { const f = files[name]; - const path_2 = Array.isArray(f) ? '' : f.path; - const zip = new AdmZip(path_2); + if (!f) continue; + const path_2 = f[0]; // what about the rest of the array? are we guaranteed only one value is set? + const zip = new AdmZip(path_2.filepath); zip.getEntries().forEach((entry: any) => { let entryName = entry.entryName.replace(/%%%/g, '/'); if (!entryName.startsWith('files/')) { return; } - const extension = extname(entryName); + const extension = path.extname(entryName); const pathname = publicDirectory + '/' + entry.entryName; const targetname = publicDirectory + '/' + entryName; try { zip.extractEntryTo(entry.entryName, publicDirectory, true, false); createReadStream(pathname).pipe(createWriteStream(targetname)); - if (extension !== '.pdf') { - const { pngs, jpgs } = AcceptableMedia; - const resizers = [ - { resizer: sharp().resize(100, undefined, { withoutEnlargement: true }), suffix: SizeSuffix.Small }, - { resizer: sharp().resize(400, undefined, { withoutEnlargement: true }), suffix: SizeSuffix.Medium }, - { resizer: sharp().resize(900, undefined, { withoutEnlargement: true }), suffix: SizeSuffix.Large }, - ]; - let isImage = false; - if (pngs.includes(extension)) { - resizers.forEach(element => { - element.resizer = element.resizer.png(); - }); - isImage = true; - } else if (jpgs.includes(extension)) { - resizers.forEach(element => { - element.resizer = element.resizer.jpeg(); - }); - isImage = true; - } - if (isImage) { - resizers.forEach(resizer => { - createReadStream(pathname) - .on('error', e => console.log('Resizing read:' + e)) - .pipe(resizer.resizer) - .on('error', e => console.log('Resizing write: ' + e)) - .pipe(createWriteStream(targetname.replace('_o' + extension, resizer.suffix + extension)).on('error', e => console.log('Resizing write: ' + e))); - }); - } - } - unlink(pathname, () => {}); + Jimp.read(pathname).then(img => { + DashUploadUtils.imageResampleSizes(extension).forEach(({ width, suffix }) => { + const outputPath = InjectSize(targetname, suffix); + if (!width) createReadStream(pathname).pipe(createWriteStream(outputPath)); + else img = img.resize(width, Jimp.AUTO).write(outputPath); + }); + unlink(pathname, () => {}); + }); } catch (e) { console.log(e); } }); const json = zip.getEntry('docs.json'); - try { - const data = JSON.parse(json.getData().toString('utf8'), retrocycle()); - const { docs, links } = data; - id = getId(data.id); - const rdocs = Object.keys(docs).map(key => docs[key]); - const ldocs = Object.keys(links).map(key => links[key]); - [...rdocs, ...ldocs].forEach(mapFn); - docids = rdocs.map(doc => doc.id); - linkids = ldocs.map(link => link.id); - await Promise.all( - [...rdocs, ...ldocs].map( - doc => - new Promise<void>(res => { - // overwrite mongo doc with json doc contents - Database.Instance.replace(doc.id, doc, (err, r) => res(err && console.log(err)), true); - }) - ) - ); - } catch (e) { - console.log(e); + if (json) { + try { + const data = JSON.parse(json.getData().toString('utf8'), retrocycle()); + const { docs, links } = data; + id = getId(data.id); + const rdocs = Object.keys(docs).map(key => docs[key]); + const ldocs = Object.keys(links).map(key => links[key]); + [...rdocs, ...ldocs].forEach(mapFn); + docids = rdocs.map(doc => doc.id); + linkids = ldocs.map(link => link.id); + await Promise.all( + [...rdocs, ...ldocs].map( + doc => + new Promise<void>(res => { + // overwrite mongo doc with json doc contents + Database.Instance.replace(doc.id, doc, (err, r) => res(err && console.log(err)), true); + }) + ) + ); + } catch (e) { + console.log(e); + } } - unlink(path_2, () => {}); + unlink(path_2.filepath, () => {}); } SolrManager.update(); res.send(JSON.stringify({ id, docids, linkids } || 'error')); @@ -346,7 +330,7 @@ export default class UploadManager extends ApiManager { method: Method.POST, subscription: '/uploadURI', secureHandler: ({ req, res }) => { - const uri = req.body.uri; + const uri: any = req.body.uri; const filename = req.body.name; const origSuffix = req.body.nosuffix ? SizeSuffix.None : SizeSuffix.Original; const deleteFiles = req.body.replaceRootFilename; @@ -362,36 +346,16 @@ export default class UploadManager extends ApiManager { .map((f: any) => fs.unlinkSync(path + f)); } return imageDataUri.outputFile(uri, serverPathToFile(Directory.images, InjectSize(filename, origSuffix))).then((savedName: string) => { - const ext = extname(savedName).toLowerCase(); - const { pngs, jpgs } = AcceptableMedia; - const resizers = !origSuffix - ? [{ resizer: sharp().resize(400, undefined, { withoutEnlargement: true }), suffix: SizeSuffix.Medium }] - : [ - { resizer: sharp().resize(100, undefined, { withoutEnlargement: true }), suffix: SizeSuffix.Small }, - { resizer: sharp().resize(400, undefined, { withoutEnlargement: true }), suffix: SizeSuffix.Medium }, - { resizer: sharp().resize(900, undefined, { withoutEnlargement: true }), suffix: SizeSuffix.Large }, - ]; - let isImage = false; - if (pngs.includes(ext)) { - resizers.forEach(element => { - element.resizer = element.resizer.png(); - }); - isImage = true; - } else if (jpgs.includes(ext)) { - resizers.forEach(element => { - element.resizer = element.resizer.jpeg(); - }); - isImage = true; - } - if (isImage) { - resizers.forEach(resizer => { - const path = serverPathToFile(Directory.images, InjectSize(filename, resizer.suffix) + ext); - createReadStream(savedName) - .on('error', e => console.log('Resizing read:' + e)) - .pipe(resizer.resizer) - .on('error', e => console.log('Resizing write: ' + e)) - .pipe(createWriteStream(path).on('error', e => console.log('Resizing write: ' + e))); - }); + const ext = path.extname(savedName).toLowerCase(); + if (AcceptableMedia.imageFormats.includes(ext)) { + Jimp.read(savedName).then(img => + (!origSuffix ? [{ width: 400, suffix: SizeSuffix.Medium }] : Object.values(DashUploadUtils.Sizes)) // + .forEach(({ width, suffix }) => { + const outputPath = serverPathToFile(Directory.images, InjectSize(filename, suffix) + ext); + if (!width) createReadStream(savedName).pipe(createWriteStream(outputPath)); + else img = img.resize(width, Jimp.AUTO).write(outputPath); + }) + ); } res.send(clientPathToFile(Directory.images, filename + ext)); }); diff --git a/src/server/ApiManagers/UserManager.ts b/src/server/ApiManagers/UserManager.ts index 8b7994eac..0431b9bcf 100644 --- a/src/server/ApiManagers/UserManager.ts +++ b/src/server/ApiManagers/UserManager.ts @@ -7,6 +7,8 @@ import { Opt } from '../../fields/Doc'; import { WebSocket } from '../websocket'; import { resolvedPorts } from '../server_Initialization'; import { DashVersion } from '../../fields/DocSymbols'; +import { Utils } from '../../Utils'; +import { check, validationResult } from 'express-validator'; export const timeMap: { [id: string]: number } = {}; interface ActivityUnit { @@ -32,7 +34,7 @@ export default class UserManager extends ApiManager { secureHandler: async ({ user, req, res }) => { const result: any = {}; user.cacheDocumentIds = req.body.cacheDocumentIds; - user.save(err => { + user.save().then(undefined, err => { if (err) { result.error = [{ msg: 'Error while caching documents' }]; } @@ -49,7 +51,7 @@ export default class UserManager extends ApiManager { method: Method.GET, subscription: '/getUserDocumentIds', secureHandler: ({ res, user }) => res.send({ userDocumentId: user.userDocumentId, linkDatabaseId: user.linkDatabaseId, sharingDocumentId: user.sharingDocumentId }), - publicHandler: ({ res }) => res.send({ userDocumentId: '__guest__', linkDatabaseId: 3, sharingDocumentId: 2 }), + publicHandler: ({ res }) => res.send({ userDocumentId: Utils.GuestID(), linkDatabaseId: 3, sharingDocumentId: 2 }), }); register({ @@ -81,7 +83,7 @@ export default class UserManager extends ApiManager { resolvedPorts, }) ), - publicHandler: ({ res }) => res.send(JSON.stringify({ id: '__guest__', email: 'guest' })), + publicHandler: ({ res }) => res.send(JSON.stringify({ userDocumentId: Utils.GuestID(), email: 'guest', resolvedPorts })), }); register({ @@ -107,15 +109,18 @@ export default class UserManager extends ApiManager { return; } - req.assert('new_pass', 'Password must be at least 4 characters long').len({ min: 4 }); - req.assert('new_confirm', 'Passwords do not match').equals(new_pass); + check('new_pass', 'Password must be at least 4 characters long') + .run(req) + .then(chcekcres => console.log(chcekcres)); //.len({ min: 4 }); + check('new_confirm', 'Passwords do not match') + .run(req) + .then(theres => console.log(theres)); //.equals(new_pass); if (curr_pass === new_pass) { result.error = [{ msg: 'Current and new password are the same' }]; } - // was there error in validating new passwords? - if (req.validationErrors()) { - // was there error? - result.error = req.validationErrors(); + if (validationResult(req).array().length) { + // was there error in validating new passwords? + result.error = validationResult(req); } // will only change password if there are no errors. @@ -125,7 +130,7 @@ export default class UserManager extends ApiManager { user.passwordResetExpires = undefined; } - user.save(err => { + user.save().then(undefined, err => { if (err) { result.error = [{ msg: 'Error while saving new password' }]; } diff --git a/src/server/DashSession/DashSessionAgent.ts b/src/server/DashSession/DashSessionAgent.ts index 1a5934d8f..1ef7a131d 100644 --- a/src/server/DashSession/DashSessionAgent.ts +++ b/src/server/DashSession/DashSessionAgent.ts @@ -1,18 +1,18 @@ -import { Email, pathFromRoot } from "../ActionUtilities"; -import { red, yellow, green, cyan } from "colors"; -import { get } from "request-promise"; -import { Utils } from "../../Utils"; -import { WebSocket } from "../websocket"; -import { MessageStore } from "../Message"; -import { launchServer, onWindows } from ".."; -import { readdirSync, statSync, createWriteStream, readFileSync, unlinkSync } from "fs"; -import * as Archiver from "archiver"; -import { resolve } from "path"; -import rimraf = require("rimraf"); -import { AppliedSessionAgent, ExitHandler } from "./Session/agents/applied_session_agent"; -import { ServerWorker } from "./Session/agents/server_worker"; -import { Monitor } from "./Session/agents/monitor"; -import { MessageHandler, ErrorLike } from "./Session/agents/promisified_ipc_manager"; +import { Email, pathFromRoot } from '../ActionUtilities'; +import { red, yellow, green, cyan } from 'colors'; +import { get } from 'request-promise'; +import { Utils } from '../../Utils'; +import { WebSocket } from '../websocket'; +import { MessageStore } from '../Message'; +import { launchServer, onWindows } from '..'; +import { readdirSync, statSync, createWriteStream, readFileSync, unlinkSync } from 'fs'; +import * as Archiver from 'archiver'; +import { resolve } from 'path'; +import { rimraf } from 'rimraf'; +import { AppliedSessionAgent, ExitHandler } from './Session/agents/applied_session_agent'; +import { ServerWorker } from './Session/agents/server_worker'; +import { Monitor } from './Session/agents/monitor'; +import { MessageHandler, ErrorLike } from './Session/agents/promisified_ipc_manager'; /** * If we're the monitor (master) thread, we should launch the monitor logic for the session. @@ -20,9 +20,8 @@ import { MessageHandler, ErrorLike } from "./Session/agents/promisified_ipc_mana * our job should be to run the server. */ export class DashSessionAgent extends AppliedSessionAgent { - - private readonly signature = "-Dash Server Session Manager"; - private readonly releaseDesktop = pathFromRoot("../../Desktop"); + private readonly signature = '-Dash Server Session Manager'; + private readonly releaseDesktop = pathFromRoot('../../Desktop'); /** * The core method invoked when the single master thread is initialized. @@ -31,13 +30,13 @@ export class DashSessionAgent extends AppliedSessionAgent { protected async initializeMonitor(monitor: Monitor): Promise<string> { const sessionKey = Utils.GenerateGuid(); await this.dispatchSessionPassword(sessionKey); - monitor.addReplCommand("pull", [], () => monitor.exec("git pull")); - monitor.addReplCommand("solr", [/start|stop|index/], this.executeSolrCommand); - monitor.addReplCommand("backup", [], this.backup); - monitor.addReplCommand("debug", [/\S+\@\S+/], async ([to]) => this.dispatchZippedDebugBackup(to)); - monitor.on("backup", this.backup); - monitor.on("debug", async ({ to }) => this.dispatchZippedDebugBackup(to)); - monitor.on("delete", WebSocket.doDelete); + monitor.addReplCommand('pull', [], () => monitor.exec('git pull')); + monitor.addReplCommand('solr', [/start|stop|index/], this.executeSolrCommand); + monitor.addReplCommand('backup', [], this.backup); + monitor.addReplCommand('debug', [/\S+\@\S+/], async ([to]) => this.dispatchZippedDebugBackup(to)); + monitor.on('backup', this.backup); + monitor.on('debug', async ({ to }) => this.dispatchZippedDebugBackup(to)); + monitor.on('delete', WebSocket.doDelete); monitor.coreHooks.onCrashDetected(this.dispatchCrashReport); return sessionKey; } @@ -58,13 +57,13 @@ export class DashSessionAgent extends AppliedSessionAgent { private _remoteDebugInstructions: string | undefined; private generateDebugInstructions = (zipName: string, target: string): string => { if (!this._remoteDebugInstructions) { - this._remoteDebugInstructions = readFileSync(resolve(__dirname, "./templates/remote_debug_instructions.txt"), { encoding: "utf8" }); + this._remoteDebugInstructions = readFileSync(resolve(__dirname, './templates/remote_debug_instructions.txt'), { encoding: 'utf8' }); } return this._remoteDebugInstructions .replace(/__zipname__/, zipName) .replace(/__target__/, target) .replace(/__signature__/, this.signature); - } + }; /** * Prepares the body of the email with information regarding a crash event. @@ -72,12 +71,12 @@ export class DashSessionAgent extends AppliedSessionAgent { private _crashInstructions: string | undefined; private generateCrashInstructions({ name, message, stack }: ErrorLike): string { if (!this._crashInstructions) { - this._crashInstructions = readFileSync(resolve(__dirname, "./templates/crash_instructions.txt"), { encoding: "utf8" }); + this._crashInstructions = readFileSync(resolve(__dirname, './templates/crash_instructions.txt'), { encoding: 'utf8' }); } return this._crashInstructions - .replace(/__name__/, name || "[no error name found]") - .replace(/__message__/, message || "[no error message found]") - .replace(/__stack__/, stack || "[no error stack found]") + .replace(/__name__/, name || '[no error name found]') + .replace(/__message__/, message || '[no error message found]') + .replace(/__stack__/, stack || '[no error stack found]') .replace(/__signature__/, this.signature); } @@ -88,23 +87,19 @@ export class DashSessionAgent extends AppliedSessionAgent { private dispatchSessionPassword = async (sessionKey: string): Promise<void> => { const { mainLog } = this.sessionMonitor; const { notificationRecipient } = DashSessionAgent; - mainLog(green("dispatching session key...")); + mainLog(green('dispatching session key...')); const error = await Email.dispatch({ to: notificationRecipient, - subject: "Dash Release Session Admin Authentication Key", - content: [ - `Here's the key for this session (started @ ${new Date().toUTCString()}):`, - sessionKey, - this.signature - ].join("\n\n") + subject: 'Dash Release Session Admin Authentication Key', + content: [`Here's the key for this session (started @ ${new Date().toUTCString()}):`, sessionKey, this.signature].join('\n\n'), }); if (error) { this.sessionMonitor.mainLog(red(`dispatch failure @ ${notificationRecipient} (${yellow(error.message)})`)); - mainLog(red("distribution of session key experienced errors")); + mainLog(red('distribution of session key experienced errors')); } else { - mainLog(green("successfully distributed session key to recipients")); + mainLog(green('successfully distributed session key to recipients')); } - } + }; /** * This sends an email with the generated crash report. @@ -114,37 +109,37 @@ export class DashSessionAgent extends AppliedSessionAgent { const { notificationRecipient } = DashSessionAgent; const error = await Email.dispatch({ to: notificationRecipient, - subject: "Dash Web Server Crash", - content: this.generateCrashInstructions(crashCause) + subject: 'Dash Web Server Crash', + content: this.generateCrashInstructions(crashCause), }); if (error) { this.sessionMonitor.mainLog(red(`dispatch failure @ ${notificationRecipient} ${yellow(`(${error.message})`)}`)); - mainLog(red("distribution of crash notification experienced errors")); + mainLog(red('distribution of crash notification experienced errors')); } else { - mainLog(green("successfully distributed crash notification to recipients")); + mainLog(green('successfully distributed crash notification to recipients')); } - } + }; /** - * Logic for interfacing with Solr. Either starts it, + * Logic for interfacing with Solr. Either starts it, * stops it, or rebuilds its indices. */ private executeSolrCommand = async (args: string[]): Promise<void> => { const { exec, mainLog } = this.sessionMonitor; const action = args[0]; - if (action === "index") { - exec("npx ts-node ./updateSearch.ts", { cwd: pathFromRoot("./src/server") }); + if (action === 'index') { + exec('npx ts-node ./updateSearch.ts', { cwd: pathFromRoot('./src/server') }); } else { - const command = `${onWindows ? "solr.cmd" : "solr"} ${args[0] === "start" ? "start" : "stop -p 8983"}`; - await exec(command, { cwd: "./solr-8.3.1/bin" }); + const command = `${onWindows ? 'solr.cmd' : 'solr'} ${args[0] === 'start' ? 'start' : 'stop -p 8983'}`; + await exec(command, { cwd: './solr-8.3.1/bin' }); try { - await get("http://localhost:8983"); - mainLog(green("successfully connected to 8983 after running solr initialization")); + await get('http://localhost:8983'); + mainLog(green('successfully connected to 8983 after running solr initialization')); } catch { - mainLog(red("unable to connect at 8983 after running solr initialization")); + mainLog(red('unable to connect at 8983 after running solr initialization')); } } - } + }; /** * Broadcast to all clients that their connection @@ -153,16 +148,16 @@ export class DashSessionAgent extends AppliedSessionAgent { private notifyClient: ExitHandler = reason => { const { _socket } = WebSocket; if (_socket) { - const message = typeof reason === "boolean" ? (reason ? "exit" : "temporary") : "crash"; + const message = typeof reason === 'boolean' ? (reason ? 'exit' : 'temporary') : 'crash'; Utils.Emit(_socket, MessageStore.ConnectionTerminated, message); } - } + }; /** * Performs a backup of the database, saved to the desktop subdirectory. * This should work as is only on our specific release server. */ - private backup = async (): Promise<void> => this.sessionMonitor.exec("backup.bat", { cwd: this.releaseDesktop }); + private backup = async (): Promise<void> => this.sessionMonitor.exec('backup.bat', { cwd: this.releaseDesktop }); /** * Compress either a brand new backup or the most recent backup and send it @@ -175,15 +170,17 @@ export class DashSessionAgent extends AppliedSessionAgent { try { // if desired, complete an immediate backup to send await this.backup(); - mainLog("backup complete"); + mainLog('backup complete'); const backupsDirectory = `${this.releaseDesktop}/backups`; // sort all backups by their modified time, and choose the most recent one - const target = readdirSync(backupsDirectory).map(filename => ({ - modifiedTime: statSync(`${backupsDirectory}/${filename}`).mtimeMs, - filename - })).sort((a, b) => b.modifiedTime - a.modifiedTime)[0].filename; + const target = readdirSync(backupsDirectory) + .map(filename => ({ + modifiedTime: statSync(`${backupsDirectory}/${filename}`).mtimeMs, + filename, + })) + .sort((a, b) => b.modifiedTime - a.modifiedTime)[0].filename; mainLog(`targeting ${target}...`); // create a zip file and to it, write the contents of the backup directory @@ -202,28 +199,25 @@ export class DashSessionAgent extends AppliedSessionAgent { to, subject: `Remote debug: compressed backup of ${target}...`, content: this.generateDebugInstructions(zipName, target), - attachments: [{ filename: zipName, path: zipPath }] + attachments: [{ filename: zipName, path: zipPath }], }); - // since this is intended to be a zero-footprint operation, clean up + // since this is intended to be a zero-footprint operation, clean up // by unlinking both the backup generated earlier in the function and the compressed zip file. // to generate a persistent backup, just run backup. unlinkSync(zipPath); rimraf.sync(targetPath); // indicate success or failure - mainLog(`${error === null ? green("successfully dispatched") : red("failed to dispatch")} ${zipName} to ${cyan(to)}`); + mainLog(`${error === null ? green('successfully dispatched') : red('failed to dispatch')} ${zipName} to ${cyan(to)}`); error && mainLog(red(error.message)); } catch (error: any) { - mainLog(red("unable to dispatch zipped backup...")); + mainLog(red('unable to dispatch zipped backup...')); mainLog(red(error.message)); } } - } export namespace DashSessionAgent { - - export const notificationRecipient = "browndashptc@gmail.com"; - + export const notificationRecipient = 'browndashptc@gmail.com'; } diff --git a/src/server/DashSession/Session/agents/applied_session_agent.ts b/src/server/DashSession/Session/agents/applied_session_agent.ts index 8339a06dc..2037e93e5 100644 --- a/src/server/DashSession/Session/agents/applied_session_agent.ts +++ b/src/server/DashSession/Session/agents/applied_session_agent.ts @@ -1,7 +1,8 @@ -import { isMaster } from "cluster"; +import * as _cluster from "cluster"; import { Monitor } from "./monitor"; import { ServerWorker } from "./server_worker"; -import { Utilities } from "../utilities/utilities"; +const cluster = _cluster as any; +const isMaster = cluster.isPrimary; export type ExitHandler = (reason: Error | boolean) => void | Promise<void>; @@ -15,13 +16,13 @@ export abstract class AppliedSessionAgent { private launched = false; public killSession = (reason: string, graceful = true, errorCode = 0) => { - const target = isMaster ? this.sessionMonitor : this.serverWorker; + const target = cluster.default.isPrimary ? this.sessionMonitor : this.serverWorker; target.killSession(reason, graceful, errorCode); } private sessionMonitorRef: Monitor | undefined; public get sessionMonitor(): Monitor { - if (!isMaster) { + if (!cluster.default.isPrimary) { this.serverWorker.emit("kill", { graceful: false, reason: "Cannot access the session monitor directly from the server worker thread.", diff --git a/src/server/DashSession/Session/agents/monitor.ts b/src/server/DashSession/Session/agents/monitor.ts index 9cb5ab576..a6fde4356 100644 --- a/src/server/DashSession/Session/agents/monitor.ts +++ b/src/server/DashSession/Session/agents/monitor.ts @@ -1,15 +1,21 @@ -import { ExitHandler } from "./applied_session_agent"; -import { Configuration, configurationSchema, defaultConfig, Identifiers, colorMapping } from "../utilities/session_config"; -import Repl, { ReplAction } from "../utilities/repl"; -import { isWorker, setupMaster, on, Worker, fork } from "cluster"; -import { manage, MessageHandler, ErrorLike } from "./promisified_ipc_manager"; -import { red, cyan, white, yellow, blue } from "colors"; -import { exec, ExecOptions } from "child_process"; -import { validate, ValidationError } from "jsonschema"; -import { Utilities } from "../utilities/utilities"; -import { readFileSync } from "fs"; -import IPCMessageReceiver from "./process_message_router"; -import { ServerWorker } from "./server_worker"; +import { ExitHandler } from './applied_session_agent'; +import { Configuration, configurationSchema, defaultConfig, Identifiers, colorMapping } from '../utilities/session_config'; +import Repl, { ReplAction } from '../utilities/repl'; +import * as _cluster from 'cluster'; +import { Worker } from 'cluster'; +import { manage, MessageHandler, ErrorLike } from './promisified_ipc_manager'; +import { red, cyan, white, yellow, blue } from 'colors'; +import { exec, ExecOptions } from 'child_process'; +import { validate, ValidationError } from 'jsonschema'; +import { Utilities } from '../utilities/utilities'; +import { readFileSync } from 'fs'; +import IPCMessageReceiver from './process_message_router'; +import { ServerWorker } from './server_worker'; +const cluster = _cluster as any; +const isWorker = cluster.isWorker; +const setupMaster = cluster.setupPrimary; +const on = cluster.on; +const fork = cluster.fork; /** * Validates and reads the configuration file, accordingly builds a child process factory @@ -26,14 +32,14 @@ export class Monitor extends IPCMessageReceiver { public static Create() { if (isWorker) { - ServerWorker.IPCManager.emit("kill", { - reason: "cannot create a monitor on the worker process.", + ServerWorker.IPCManager.emit('kill', { + reason: 'cannot create a monitor on the worker process.', graceful: false, - errorCode: 1 + errorCode: 1, }); process.exit(1); } else if (++Monitor.count > 1) { - console.error(red("cannot create more than one monitor.")); + console.error(red('cannot create more than one monitor.')); process.exit(1); } else { return new Monitor(); @@ -42,7 +48,7 @@ export class Monitor extends IPCMessageReceiver { private constructor() { super(); - console.log(this.timestamp(), cyan("initializing session...")); + console.log(this.timestamp(), cyan('initializing session...')); this.configureInternalHandlers(); this.config = this.loadAndValidateConfiguration(); this.initializeClusterFunctions(); @@ -53,8 +59,8 @@ export class Monitor extends IPCMessageReceiver { // handle exceptions in the master thread - there shouldn't be many of these // the IPC (inter process communication) channel closed exception can't seem // to be caught in a try catch, and is inconsequential, so it is ignored - process.on("uncaughtException", ({ message, stack }): void => { - if (message !== "Channel closed") { + process.on('uncaughtException', ({ message, stack }): void => { + if (message !== 'Channel closed') { this.mainLog(red(message)); if (stack) { this.mainLog(`uncaught exception\n${red(stack)}`); @@ -62,36 +68,36 @@ export class Monitor extends IPCMessageReceiver { } }); - this.on("kill", ({ reason, graceful, errorCode }) => this.killSession(reason, graceful, errorCode)); - this.on("lifecycle", ({ event }) => console.log(this.timestamp(), `${this.config.identifiers.worker.text} lifecycle phase (${event})`)); - } + this.on('kill', ({ reason, graceful, errorCode }) => this.killSession(reason, graceful, errorCode)); + this.on('lifecycle', ({ event }) => console.log(this.timestamp(), `${this.config.identifiers.worker.text} lifecycle phase (${event})`)); + }; private initializeClusterFunctions = () => { // determines whether or not we see the compilation / initialization / runtime output of each child server process - const output = this.config.showServerOutput ? "inherit" : "ignore"; - setupMaster({ stdio: ["ignore", output, output, "ipc"] }); + const output = this.config.showServerOutput ? 'inherit' : 'ignore'; + setupMaster({ stdio: ['ignore', output, output, 'ipc'] }); // a helpful cluster event called on the master thread each time a child process exits - on("exit", ({ process: { pid } }, code, signal) => { - const prompt = `server worker with process id ${pid} has exited with code ${code}${signal === null ? "" : `, having encountered signal ${signal}`}.`; + on('exit', ({ process: { pid } }: { process: { pid: any } }, code: any, signal: any) => { + const prompt = `server worker with process id ${pid} has exited with code ${code}${signal === null ? '' : `, having encountered signal ${signal}`}.`; this.mainLog(cyan(prompt)); // to make this a robust, continuous session, every time a child process dies, we immediately spawn a new one this.spawn(); }); - } + }; public finalize = (sessionKey: string): void => { if (this.finalized) { - throw new Error("Session monitor is already finalized"); + throw new Error('Session monitor is already finalized'); } this.finalized = true; this.key = sessionKey; this.spawn(); - } + }; public readonly coreHooks = Object.freeze({ onCrashDetected: (listener: MessageHandler<{ error: ErrorLike }>) => this.on(Monitor.IntrinsicEvents.CrashDetected, listener), - onServerRunning: (listener: MessageHandler<{ isFirstTime: boolean }>) => this.on(Monitor.IntrinsicEvents.ServerRunning, listener) + onServerRunning: (listener: MessageHandler<{ isFirstTime: boolean }>) => this.on(Monitor.IntrinsicEvents.ServerRunning, listener), }); /** @@ -101,12 +107,12 @@ export class Monitor extends IPCMessageReceiver { * requests to complete) or immediately. */ public killSession = async (reason: string, graceful = true, errorCode = 0) => { - this.mainLog(cyan(`exiting session ${graceful ? "clean" : "immediate"}ly`)); - this.mainLog(`session exit reason: ${(red(reason))}`); + this.mainLog(cyan(`exiting session ${graceful ? 'clean' : 'immediate'}ly`)); + this.mainLog(`session exit reason: ${red(reason)}`); await this.executeExitHandlers(true); await this.killActiveWorker(graceful, true); process.exit(errorCode); - } + }; /** * Execute the list of functions registered to be called @@ -120,27 +126,27 @@ export class Monitor extends IPCMessageReceiver { */ public addReplCommand = (basename: string, argPatterns: (RegExp | string)[], action: ReplAction) => { this.repl.registerCommand(basename, argPatterns, action); - } + }; public exec = (command: string, options?: ExecOptions) => { return new Promise<void>(resolve => { - exec(command, { ...options, encoding: "utf8" }, (error, stdout, stderr) => { + exec(command, { ...options, encoding: 'utf8' }, (error, stdout, stderr) => { if (error) { this.execLog(red(`unable to execute ${white(command)}`)); - error.message.split("\n").forEach(line => line.length && this.execLog(red(`(error) ${line}`))); + error.message.split('\n').forEach(line => line.length && this.execLog(red(`(error) ${line}`))); } else { let outLines: string[], errorLines: string[]; - if ((outLines = stdout.split("\n").filter(line => line.length)).length) { + if ((outLines = stdout.split('\n').filter(line => line.length)).length) { outLines.forEach(line => line.length && this.execLog(cyan(`(stdout) ${line}`))); } - if ((errorLines = stderr.split("\n").filter(line => line.length)).length) { + if ((errorLines = stderr.split('\n').filter(line => line.length)).length) { errorLines.forEach(line => line.length && this.execLog(yellow(`(stderr) ${line}`))); } } resolve(); }); }); - } + }; /** * Generates a blue UTC string associated with the time @@ -153,14 +159,14 @@ export class Monitor extends IPCMessageReceiver { */ public mainLog = (...optionalParams: any[]) => { console.log(this.timestamp(), this.config.identifiers.master.text, ...optionalParams); - } + }; /** * A formatted, identified and timestamped log in color for non- */ private execLog = (...optionalParams: any[]) => { console.log(this.timestamp(), this.config.identifiers.exec.text, ...optionalParams); - } + }; /** * Reads in configuration .json file only once, in the master thread @@ -169,28 +175,28 @@ export class Monitor extends IPCMessageReceiver { private loadAndValidateConfiguration = (): Configuration => { let config: Configuration | undefined; try { - console.log(this.timestamp(), cyan("validating configuration...")); + console.log(this.timestamp(), cyan('validating configuration...')); config = JSON.parse(readFileSync('./session.config.json', 'utf8')); const options = { throwError: true, - allowUnknownAttributes: false + allowUnknownAttributes: false, }; // ensure all necessary and no excess information is specified by the configuration file validate(config, configurationSchema, options); config = Utilities.preciseAssign({}, defaultConfig, config); } catch (error: any) { if (error instanceof ValidationError) { - console.log(red("\nSession configuration failed.")); - console.log("The given session.config.json configuration file is invalid."); + console.log(red('\nSession configuration failed.')); + console.log('The given session.config.json configuration file is invalid.'); console.log(`${error.instance}: ${error.stack}`); process.exit(0); - } else if (error.code === "ENOENT" && error.path === "./session.config.json") { - console.log(cyan("Loading default session parameters...")); - console.log("Consider including a session.config.json configuration file in your project root for customization."); + } else if (error.code === 'ENOENT' && error.path === './session.config.json') { + console.log(cyan('Loading default session parameters...')); + console.log('Consider including a session.config.json configuration file in your project root for customization.'); config = Utilities.preciseAssign({}, defaultConfig); } else { - console.log(red("\nSession configuration failed.")); - console.log("The following unknown error occurred during configuration."); + console.log(red('\nSession configuration failed.')); + console.log('The following unknown error occurred during configuration.'); console.log(error.stack); process.exit(0); } @@ -203,7 +209,7 @@ export class Monitor extends IPCMessageReceiver { }); return config!; } - } + }; /** * Builds the repl that allows the following commands to be typed into stdin of the master thread. @@ -213,24 +219,24 @@ export class Monitor extends IPCMessageReceiver { const boolean = /true|false/; const number = /\d+/; const letters = /[a-zA-Z]+/; - repl.registerCommand("exit", [/clean|force/], args => this.killSession("manual exit requested by repl", args[0] === "clean", 0)); - repl.registerCommand("restart", [/clean|force/], args => this.killActiveWorker(args[0] === "clean")); - repl.registerCommand("set", [letters, "port", number, boolean], args => this.setPort(args[0], Number(args[2]), args[3] === "true")); - repl.registerCommand("set", [/polling/, number, boolean], args => { + repl.registerCommand('exit', [/clean|force/], args => this.killSession('manual exit requested by repl', args[0] === 'clean', 0)); + repl.registerCommand('restart', [/clean|force/], args => this.killActiveWorker(args[0] === 'clean')); + repl.registerCommand('set', [letters, 'port', number, boolean], args => this.setPort(args[0], Number(args[2]), args[3] === 'true')); + repl.registerCommand('set', [/polling/, number, boolean], args => { const newPollingIntervalSeconds = Math.floor(Number(args[1])); if (newPollingIntervalSeconds < 0) { - this.mainLog(red("the polling interval must be a non-negative integer")); + this.mainLog(red('the polling interval must be a non-negative integer')); } else { if (newPollingIntervalSeconds !== this.config.polling.intervalSeconds) { this.config.polling.intervalSeconds = newPollingIntervalSeconds; - if (args[2] === "true") { - Monitor.IPCManager.emit("updatePollingInterval", { newPollingIntervalSeconds }); + if (args[2] === 'true') { + Monitor.IPCManager.emit('updatePollingInterval', { newPollingIntervalSeconds }); } } } }); return repl; - } + }; private executeExitHandlers = async (reason: Error | boolean) => Promise.all(this.exitHandlers.map(handler => handler(reason))); @@ -240,13 +246,13 @@ export class Monitor extends IPCMessageReceiver { private killActiveWorker = async (graceful = true, isSessionEnd = false): Promise<void> => { if (this.activeWorker && !this.activeWorker.isDead()) { if (graceful) { - Monitor.IPCManager.emit("manualExit", { isSessionEnd }); + Monitor.IPCManager.emit('manualExit', { isSessionEnd }); } else { await ServerWorker.IPCManager.destroy(); this.activeWorker.process.kill(); } } - } + }; /** * Allows the caller to set the port at which the target (be it the server, @@ -255,7 +261,7 @@ export class Monitor extends IPCMessageReceiver { * at the port. Otherwise, the updated port won't be used until / unless the child * dies on its own and triggers a restart. */ - private setPort = (port: "server" | "socket" | string, value: number, immediateRestart: boolean): void => { + private setPort = (port: 'server' | 'socket' | string, value: number, immediateRestart: boolean): void => { if (value > 1023 && value < 65536) { this.config.ports[port] = value; if (immediateRestart) { @@ -264,7 +270,7 @@ export class Monitor extends IPCMessageReceiver { } else { this.mainLog(red(`${port} is an invalid port number`)); } - } + }; /** * Kills the current active worker and proceeds to spawn a new worker, @@ -272,27 +278,29 @@ export class Monitor extends IPCMessageReceiver { */ private spawn = async (): Promise<void> => { await this.killActiveWorker(); - const { config: { polling, ports }, key } = this; + const { + config: { polling, ports }, + key, + } = this; this.activeWorker = fork({ pollingRoute: polling.route, pollingFailureTolerance: polling.failureTolerance, serverPort: ports.server, socketPort: ports.socket, pollingIntervalSeconds: polling.intervalSeconds, - session_key: key + session_key: key, }); - Monitor.IPCManager = manage(this.activeWorker.process, this.handlers); + if (this.activeWorker) { + Monitor.IPCManager = manage(this.activeWorker.process, this.handlers); + } this.mainLog(cyan(`spawned new server worker with process id ${this.activeWorker?.process.pid}`)); - } - + }; } export namespace Monitor { - export enum IntrinsicEvents { - KeyGenerated = "key_generated", - CrashDetected = "crash_detected", - ServerRunning = "server_running" + KeyGenerated = 'key_generated', + CrashDetected = 'crash_detected', + ServerRunning = 'server_running', } - -}
\ No newline at end of file +} diff --git a/src/server/DashSession/Session/agents/promisified_ipc_manager.ts b/src/server/DashSession/Session/agents/promisified_ipc_manager.ts index f6c8de521..76e218977 100644 --- a/src/server/DashSession/Session/agents/promisified_ipc_manager.ts +++ b/src/server/DashSession/Session/agents/promisified_ipc_manager.ts @@ -1,9 +1,9 @@ -import { Utilities } from "../utilities/utilities"; -import { ChildProcess } from "child_process"; +import { Utilities } from '../utilities/utilities'; +import { ChildProcess } from 'child_process'; /** * Convenience constructor - * @param target the process / worker to which to attach the specialized listeners + * @param target the process / worker to which to attach the specialized listeners */ export function manage(target: IPCTarget, handlers?: HandlerMap) { return new PromisifiedIPCManager(target, handlers); @@ -18,26 +18,30 @@ export type HandlerMap = { [name: string]: MessageHandler[] }; /** * This will always literally be a child process. But, though setting * up a manager in the parent will indeed see the target as the ChildProcess, - * setting up a manager in the child will just see itself as a regular NodeJS.Process. + * setting up a manager in the child will just see itself as a regular NodeJS.Process. */ export type IPCTarget = NodeJS.Process | ChildProcess; /** - * Specifies a general message format for this API + * Specifies a general message format for this API */ export type Message<T = any> = { name: string; args?: T; }; -export type MessageHandler<T = any> = (args: T) => (any | Promise<any>); +export type MessageHandler<T = any> = (args: T) => any | Promise<any>; /** * When a message is emitted, it is embedded with private metadata * to facilitate the resolution of promises, etc. */ -interface InternalMessage extends Message { metadata: Metadata; } -interface Metadata { isResponse: boolean; id: string; } -type InternalMessageHandler = (message: InternalMessage) => (any | Promise<any>); +interface InternalMessage extends Message { + metadata: Metadata; +} +interface Metadata { + isResponse: boolean; + id: string; +} /** * Allows for the transmission of the error's key features over IPC. @@ -56,12 +60,12 @@ export interface Response<T = any> { error?: ErrorLike; } -const destroyEvent = "__destroy__"; +const destroyEvent = '__destroy__'; /** * This is a wrapper utility class that allows the caller process * to emit an event and return a promise that resolves when it and all - * other processes listening to its emission of this event have completed. + * other processes listening to its emission of this event have completed. */ export class PromisifiedIPCManager { private readonly target: IPCTarget; @@ -75,7 +79,7 @@ export class PromisifiedIPCManager { this.target = target; if (handlers) { handlers[destroyEvent] = [this.destroyHelper]; - this.target.addListener("message", this.generateInternalHandler(handlers)); + this.target.addListener('message', this.generateInternalHandler(handlers)); } } @@ -86,26 +90,27 @@ export class PromisifiedIPCManager { */ public emit = async <T = any>(name: string, args?: any): Promise<Response<T>> => { if (this.isDestroyed) { - const error = { name: "FailedDispatch", message: "Cannot use a destroyed IPC manager to emit a message." }; + const error = { name: 'FailedDispatch', message: 'Cannot use a destroyed IPC manager to emit a message.' }; return { error }; } return new Promise<Response<T>>(resolve => { const messageId = Utilities.guid(); + type InternalMessageHandler = (message: any /* MessageListener*/) => any | Promise<any>; const responseHandler: InternalMessageHandler = ({ metadata: { id, isResponse }, args }) => { if (isResponse && id === messageId) { - this.target.removeListener("message", responseHandler); + this.target.removeListener('message', responseHandler); resolve(args); } }; - this.target.addListener("message", responseHandler); + this.target.addListener('message', responseHandler); const message = { name, args, metadata: { id: messageId, isResponse: false } }; if (!(this.target.send && this.target.send(message))) { - const error: ErrorLike = { name: "FailedDispatch", message: "Either the target's send method was undefined or the act of sending failed." }; + const error: ErrorLike = { name: 'FailedDispatch', message: "Either the target's send method was undefined or the act of sending failed." }; resolve({ error }); - this.target.removeListener("message", responseHandler); + this.target.removeListener('message', responseHandler); } }); - } + }; /** * Invoked from either the parent or the child process, this allows @@ -122,7 +127,7 @@ export class PromisifiedIPCManager { } resolve(); }); - } + }; /** * Dispatches the dummy responses and sets the isDestroyed flag to true. @@ -131,12 +136,12 @@ export class PromisifiedIPCManager { const { pendingMessages } = this; this.isDestroyed = true; Object.keys(pendingMessages).forEach(id => { - const error: ErrorLike = { name: "ManagerDestroyed", message: "The IPC manager was destroyed before the response could be returned." }; + const error: ErrorLike = { name: 'ManagerDestroyed', message: 'The IPC manager was destroyed before the response could be returned.' }; const message: InternalMessage = { name: pendingMessages[id], args: { error }, metadata: { id, isResponse: true } }; this.target.send?.(message); }); this.pendingMessages = {}; - } + }; /** * This routine receives a uniquely identified message. If the message is itself a response, @@ -145,29 +150,30 @@ export class PromisifiedIPCManager { * which will ultimately invoke the responseHandler of the original emission and resolve the * sender's promise. */ - private generateInternalHandler = (handlers: HandlerMap): MessageHandler => async (message: InternalMessage) => { - const { name, args, metadata } = message; - if (name && metadata && !metadata.isResponse) { - const { id } = metadata; - this.pendingMessages[id] = name; - let error: Error | undefined; - let results: any[] | undefined; - try { - const registered = handlers[name]; - if (registered) { - results = await Promise.all(registered.map(handler => handler(args))); + private generateInternalHandler = + (handlers: HandlerMap): MessageHandler => + async (message: InternalMessage) => { + const { name, args, metadata } = message; + if (name && metadata && !metadata.isResponse) { + const { id } = metadata; + this.pendingMessages[id] = name; + let error: Error | undefined; + let results: any[] | undefined; + try { + const registered = handlers[name]; + if (registered) { + results = await Promise.all(registered.map(handler => handler(args))); + } + } catch (e: any) { + error = e; + } + if (!this.isDestroyed && this.target.send) { + const metadata = { id, isResponse: true }; + const response: Response = { results, error }; + const message = { name, args: response, metadata }; + delete this.pendingMessages[id]; + this.target.send(message); } - } catch (e: any) { - error = e; - } - if (!this.isDestroyed && this.target.send) { - const metadata = { id, isResponse: true }; - const response: Response = { results, error }; - const message = { name, args: response, metadata }; - delete this.pendingMessages[id]; - this.target.send(message); } - } - } - -}
\ No newline at end of file + }; +} diff --git a/src/server/DashSession/Session/agents/server_worker.ts b/src/server/DashSession/Session/agents/server_worker.ts index 634b0113d..d8b3ee80b 100644 --- a/src/server/DashSession/Session/agents/server_worker.ts +++ b/src/server/DashSession/Session/agents/server_worker.ts @@ -1,4 +1,4 @@ -import { isMaster } from "cluster"; +import cluster from "cluster"; import { green, red, white, yellow } from "colors"; import { get } from "request-promise"; import { ExitHandler } from "./applied_session_agent"; @@ -22,7 +22,7 @@ export class ServerWorker extends IPCMessageReceiver { private serverPort: number; private isInitialized = false; public static Create(work: Function) { - if (isMaster) { + if (cluster.isPrimary) { console.error(red("cannot create a worker on the monitor process.")); process.exit(1); } else if (++ServerWorker.count > 1) { diff --git a/src/server/DashStats.ts b/src/server/DashStats.ts index 8d341db63..a9e6af67c 100644 --- a/src/server/DashStats.ts +++ b/src/server/DashStats.ts @@ -3,23 +3,24 @@ import { Response } from 'express'; import SocketIO from 'socket.io'; import { timeMap } from './ApiManagers/UserManager'; import { WebSocket } from './websocket'; -const fs = require('fs'); +import * as fs from 'fs'; /** * DashStats focuses on tracking user data for each session. - * + * * This includes time connected, number of operations, and * the rate of their operations */ export namespace DashStats { - export const SAMPLING_INTERVAL = 1000; // in milliseconds (ms) - Time interval to update the frontend. + export const SAMPLING_INTERVAL = 1000; // in milliseconds (ms) - Time interval to update the frontend. export const RATE_INTERVAL = 10; // in seconds (s) - Used to calculate rate - const statsCSVFilename = './src/server/stats/userLoginStats.csv'; + const statsCSVDirectory = './src/server/stats/'; + const statsCSVFilename = statsCSVDirectory + 'userLoginStats.csv'; const columns = ['USERNAME', 'ACTION', 'TIME']; /** - * UserStats holds the stats associated with a particular user. + * UserStats holds the stats associated with a particular user. */ interface UserStats { socketId: string; @@ -30,18 +31,18 @@ export namespace DashStats { } /** - * UserLastOperations is the queue object for each user - * storing their past operations. + * UserLastOperations is the queue object for each user + * storing their past operations. */ interface UserLastOperations { sampleOperations: number; // stores how many operations total are in this rate section (10 sec, for example) lastSampleOperations: number; // stores how many total operations were recorded at the last sample - previousOperationsQueue: number[]; // stores the operations to calculate rate. + previousOperationsQueue: number[]; // stores the operations to calculate rate. } /** * StatsDataBundle represents an object that will be sent to the frontend view - * on each websocket update. + * on each websocket update. */ interface StatsDataBundle { connectedUsers: UserStats[]; @@ -57,48 +58,44 @@ export namespace DashStats { } /** - * ServerTraffic describes the current traffic going to the backend. + * ServerTraffic describes the current traffic going to the backend. */ enum ServerTraffic { NOT_BUSY, BUSY, - VERY_BUSY + VERY_BUSY, } // These values can be changed after further testing how many - // users correspond to each traffic level in Dash. + // users correspond to each traffic level in Dash. const BUSY_SERVER_BOUND = 2; const VERY_BUSY_SERVER_BOUND = 3; - const serverTrafficMessages = [ - "Not Busy", - "Busy", - "Very Busy" - ] + const serverTrafficMessages = ['Not Busy', 'Busy', 'Very Busy']; // lastUserOperations maps each username to a UserLastOperations - // structure + // structure export const lastUserOperations = new Map<string, UserLastOperations>(); /** * handleStats is called when the /stats route is called, providing a JSON * object with relevant stats. In this case, we return the number of - * current connections and + * current connections and * @param res Response object from Express */ export function handleStats(res: Response) { let current = getCurrentStats(); const results: CSVStore[] = []; res.json({ - currentConnections: current.length, - socketMap: current, - }); + currentConnections: current.length, + socketMap: current, + }); } /** - * getUpdatedStatesBundle() sends an updated copy of the current stats to the - * frontend /statsview route via websockets. - * + * getUpdatedStatesBundle() sends an updated copy of the current stats to the + * frontend /statsview route via websockets. + * * @returns a StatsDataBundle that is sent to the frontend view on each websocket update */ export function getUpdatedStatsBundle(): StatsDataBundle { @@ -106,43 +103,43 @@ export namespace DashStats { return { connectedUsers: current, - } + }; } /** - * handleStatsView() is called when the /statsview route is called. This + * handleStatsView() is called when the /statsview route is called. This * will use pug to render a frontend view of the current stats - * - * @param res + * + * @param res */ export function handleStatsView(res: Response) { let current = getCurrentStats(); - let connectedUsers = current.map((socketPair) => { - return socketPair.time + " - " + socketPair.username + " Operations: " + socketPair.operations; - }) + let connectedUsers = current.map(socketPair => { + return socketPair.time + ' - ' + socketPair.username + ' Operations: ' + socketPair.operations; + }); let serverTraffic = ServerTraffic.NOT_BUSY; - if(current.length < BUSY_SERVER_BOUND) { + if (current.length < BUSY_SERVER_BOUND) { serverTraffic = ServerTraffic.NOT_BUSY; - } else if(current.length >= BUSY_SERVER_BOUND && current.length < VERY_BUSY_SERVER_BOUND) { + } else if (current.length >= BUSY_SERVER_BOUND && current.length < VERY_BUSY_SERVER_BOUND) { serverTraffic = ServerTraffic.BUSY; } else { serverTraffic = ServerTraffic.VERY_BUSY; } - - res.render("stats.pug", { - title: "Dash Stats", + + res.render('stats.pug', { + title: 'Dash Stats', numConnections: connectedUsers.length, serverTraffic: serverTraffic, - serverTrafficMessage : serverTrafficMessages[serverTraffic], - connectedUsers: connectedUsers + serverTrafficMessage: serverTrafficMessages[serverTraffic], + connectedUsers: connectedUsers, }); } /** - * logUserLogin() writes a login event to the CSV file. - * + * logUserLogin() writes a login event to the CSV file. + * * @param username the username in the format of "username@domain.com logged in" * @param socket the websocket associated with the current connection */ @@ -152,12 +149,13 @@ export namespace DashStats { console.log(magenta(`User ${username.split(' ')[0]} logged in at: ${currentDate.toISOString()}`)); let toWrite: CSVStore = { - USERNAME : username, - ACTION : "loggedIn", - TIME : currentDate.toISOString() - } + USERNAME: username, + ACTION: 'loggedIn', + TIME: currentDate.toISOString(), + }; - let statsFile = fs.createWriteStream(statsCSVFilename, { flags: "a"}); + if (!fs.existsSync(statsCSVDirectory)) fs.mkdirSync(statsCSVDirectory); + let statsFile = fs.createWriteStream(statsCSVFilename, { flags: 'a' }); statsFile.write(convertToCSV(toWrite)); statsFile.end(); console.log(cyan(convertToCSV(toWrite))); @@ -165,21 +163,21 @@ export namespace DashStats { } /** - * logUserLogout() writes a logout event to the CSV file. - * + * logUserLogout() writes a logout event to the CSV file. + * * @param username the username in the format of "username@domain.com logged in" - * @param socket the websocket associated with the current connection. + * @param socket the websocket associated with the current connection. */ export function logUserLogout(username: string | undefined, socket: SocketIO.Socket) { if (!(username === undefined)) { let currentDate = new Date(); - let statsFile = fs.createWriteStream(statsCSVFilename, { flags: "a"}); + let statsFile = fs.createWriteStream(statsCSVFilename, { flags: 'a' }); let toWrite: CSVStore = { - USERNAME : username, - ACTION : "loggedOut", - TIME : currentDate.toISOString() - } + USERNAME: username, + ACTION: 'loggedOut', + TIME: currentDate.toISOString(), + }; statsFile.write(convertToCSV(toWrite)); statsFile.end(); } @@ -188,22 +186,22 @@ export namespace DashStats { /** * getLastOperationsOrDefault() is a helper method that will attempt * to query the lastUserOperations map for a specified username. If the - * username is not in the map, an empty UserLastOperations object is returned. - * @param username + * username is not in the map, an empty UserLastOperations object is returned. + * @param username * @returns the user's UserLastOperations structure or an empty * UserLastOperations object (All values set to 0) if the username is not found. */ function getLastOperationsOrDefault(username: string): UserLastOperations { - if(lastUserOperations.get(username) === undefined) { + if (lastUserOperations.get(username) === undefined) { let initializeOperationsQueue = []; - for(let i = 0; i < RATE_INTERVAL; i++) { + for (let i = 0; i < RATE_INTERVAL; i++) { initializeOperationsQueue.push(0); } return { sampleOperations: 0, lastSampleOperations: 0, - previousOperationsQueue: initializeOperationsQueue - } + previousOperationsQueue: initializeOperationsQueue, + }; } return lastUserOperations.get(username)!; } @@ -211,19 +209,19 @@ export namespace DashStats { /** * updateLastOperations updates a specific user's UserLastOperations information * for the current sampling cycle. The method removes old/outdated counts for - * operations from the queue and adds new data for the current sampling - * cycle to the queue, updating the total count as it goes. + * operations from the queue and adds new data for the current sampling + * cycle to the queue, updating the total count as it goes. * @param lastOperationData the old UserLastOperations data that must be updated * @param currentOperations the total number of operations measured for this sampling cycle. - * @returns the udpated UserLastOperations structure. + * @returns the udpated UserLastOperations structure. */ function updateLastOperations(lastOperationData: UserLastOperations, currentOperations: number): UserLastOperations { // create a copy of the UserLastOperations to modify let newLastOperationData: UserLastOperations = { sampleOperations: lastOperationData.sampleOperations, lastSampleOperations: lastOperationData.lastSampleOperations, - previousOperationsQueue: lastOperationData.previousOperationsQueue.slice() - } + previousOperationsQueue: lastOperationData.previousOperationsQueue.slice(), + }; let newSampleOperations = newLastOperationData.sampleOperations; newSampleOperations -= newLastOperationData.previousOperationsQueue.shift()!; // removes and returns the first element of the queue @@ -241,20 +239,20 @@ export namespace DashStats { /** * getUserOperationsOrDefault() is a helper method to get the user's total - * operations for the CURRENT sampling interval. The method will return 0 + * operations for the CURRENT sampling interval. The method will return 0 * if the username is not in the userOperations map. * @param username the username to search the map for - * @returns the total number of operations recorded up to this sampling cycle. + * @returns the total number of operations recorded up to this sampling cycle. */ function getUserOperationsOrDefault(username: string): number { - return WebSocket.userOperations.get(username) === undefined ? 0 : WebSocket.userOperations.get(username)! + return WebSocket.userOperations.get(username) === undefined ? 0 : WebSocket.userOperations.get(username)!; } /** * getCurrentStats() calculates the total stats for this cycle. In this case, - * getCurrentStats() returns an Array of UserStats[] objects describing + * getCurrentStats() returns an Array of UserStats[] objects describing * the stats for each user - * @returns an array of UserStats storing data for each user at the current moment. + * @returns an array of UserStats storing data for each user at the current moment. */ function getCurrentStats(): UserStats[] { let socketPairs: UserStats[] = []; @@ -262,20 +260,20 @@ export namespace DashStats { let username = value.split(' ')[0]; let connectionTime = new Date(timeMap[username]); - let connectionTimeString = connectionTime.toLocaleDateString() + " " + connectionTime.toLocaleTimeString(); + let connectionTimeString = connectionTime.toLocaleDateString() + ' ' + connectionTime.toLocaleTimeString(); if (!key.disconnected) { let lastRecordedOperations = getLastOperationsOrDefault(username); let currentUserOperationCount = getUserOperationsOrDefault(username); - socketPairs.push({ + socketPairs.push({ socketId: key.id, username: username, - time: connectionTimeString.includes("Invalid Date") ? "" : connectionTimeString, - operations : WebSocket.userOperations.get(username) ? WebSocket.userOperations.get(username)! : 0, - rate: lastRecordedOperations.sampleOperations + time: connectionTimeString.includes('Invalid Date') ? '' : connectionTimeString, + operations: WebSocket.userOperations.get(username) ? WebSocket.userOperations.get(username)! : 0, + rate: lastRecordedOperations.sampleOperations, }); - lastUserOperations.set(username, updateLastOperations(lastRecordedOperations,currentUserOperationCount)); + lastUserOperations.set(username, updateLastOperations(lastRecordedOperations, currentUserOperationCount)); } } return socketPairs; @@ -283,9 +281,9 @@ export namespace DashStats { /** * convertToCSV() is a helper method that stringifies a CSVStore object - * that can be written to the CSV file later. + * that can be written to the CSV file later. * @param dataObject the object to stringify - * @returns the object as a string. + * @returns the object as a string. */ function convertToCSV(dataObject: CSVStore): string { return `${dataObject.USERNAME},${dataObject.ACTION},${dataObject.TIME}\n`; diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts index 19cb3f240..b1a7a9c5e 100644 --- a/src/server/DashUploadUtils.ts +++ b/src/server/DashUploadUtils.ts @@ -1,31 +1,32 @@ +import axios from 'axios'; import { green, red } from 'colors'; import { ExifImage } from 'exif'; import * as exifr from 'exifr'; +import * as ffmpeg from 'fluent-ffmpeg'; +import * as formidable from 'formidable'; import { File } from 'formidable'; +import * as fs from 'fs'; import { createReadStream, createWriteStream, existsSync, readFileSync, rename, unlinkSync, writeFile } from 'fs'; +import Jimp from 'jimp'; +import * as autorotate from 'jpeg-autorotate'; +import * as md5File from 'md5-file'; import * as path from 'path'; import { basename } from 'path'; -import * as sharp from 'sharp'; -import { Readable, Stream } from 'stream'; +import * as parse from 'pdf-parse'; +import * as request from 'request-promise'; +import { Duplex } from 'stream'; import { filesDirectory, publicDirectory } from '.'; +import { Utils } from '../Utils'; import { Opt } from '../fields/Doc'; import { ParsedPDF } from '../server/PdfTypes'; -import { Utils } from '../Utils'; import { createIfNotExists } from './ActionUtilities'; -import { clientPathToFile, Directory, pathToDirectory, serverPathToFile } from './ApiManagers/UploadManager'; -import { resolvedServerUrl } from './server_Initialization'; -import { AcceptableMedia, Upload } from './SharedMediaTypes'; -import request = require('request-promise'); -import formidable = require('formidable'); import { AzureManager } from './ApiManagers/AzureManager'; -import axios from 'axios'; +import { Directory, clientPathToFile, pathToDirectory, serverPathToFile } from './ApiManagers/UploadManager'; +import { AcceptableMedia, Upload } from './SharedMediaTypes'; +import { resolvedServerUrl } from './server_Initialization'; const spawn = require('child_process').spawn; const { exec } = require('child_process'); -const parse = require('pdf-parse'); -const ffmpeg = require('fluent-ffmpeg'); -const fs = require('fs'); const requestImageSize = require('../client/util/request-image-size'); -const md5File = require('md5-file'); export enum SizeSuffix { Small = '_s', @@ -55,9 +56,9 @@ export namespace DashUploadUtils { } export const Sizes: { [size: string]: Size } = { - SMALL: { width: 100, suffix: SizeSuffix.Small }, + LARGE: { width: 800, suffix: SizeSuffix.Large }, MEDIUM: { width: 400, suffix: SizeSuffix.Medium }, - LARGE: { width: 900, suffix: SizeSuffix.Large }, + SMALL: { width: 100, suffix: SizeSuffix.Small }, }; export function validateExtension(url: string) { @@ -94,9 +95,8 @@ export namespace DashUploadUtils { const outputFilePath = path.join(pathToDirectory(Directory.videos), outputFileName); // concatenate the videos - await new Promise((resolve, reject) => { - var merge = ffmpeg(); - merge + await new Promise((resolve, reject) => + ffmpeg() .input(textFilePath) .inputOptions(['-f concat', '-safe 0']) // .outputOptions('-c copy') @@ -106,8 +106,8 @@ export namespace DashUploadUtils { console.log(err); reject(); }) - .on('end', resolve); - }); + .on('end', resolve) + ); // delete concat.txt from the file system unlinkSync(textFilePath); @@ -120,14 +120,14 @@ export namespace DashUploadUtils { }; } - function resolveExistingFile(name: string, pat: string, directory: Directory, type?: string, duration?: number, rawText?: string) { - const data = { size: 0, path: path.basename(pat), name, type: type ?? '' }; - const file = { ...data, toJSON: () => ({ ...data, filename: data.path.replace(/.*\//, ''), mtime: duration?.toString(), mime: '', toJson: () => undefined as any }) }; + function resolveExistingFile(name: string, pat: string, directory: Directory, mimetype?: string | null, duration?: number, rawText?: string): Upload.FileResponse<Upload.FileInformation> { + const data = { size: 0, filepath: pat, name, type: mimetype ?? '', originalFilename: name, newFilename: path.basename(pat), mimetype: mimetype || null, hashAlgorithm: false as any }; + const file = { ...data, toJSON: () => ({ ...data, length: 0, filename: data.filepath.replace(/.*\//, ''), mtime: new Date(), mimetype: mimetype || null, toJson: () => undefined as any }) }; return { - source: file, + source: file || null, result: { accessPaths: { - agnostic: getAccessPaths(directory, data.path), + agnostic: getAccessPaths(directory, data.filepath), }, rawText, duration, @@ -145,18 +145,18 @@ export namespace DashUploadUtils { export function uploadYoutube(videoId: string, overwriteId: string): Promise<Upload.FileResponse> { return new Promise<Upload.FileResponse<Upload.FileInformation>>((res, rej) => { const name = videoId; - const path = name.replace(/^-/, '__') + '.mp4'; - const finalPath = serverPathToFile(Directory.videos, path); + const filepath = name.replace(/^-/, '__') + '.mp4'; + const finalPath = serverPathToFile(Directory.videos, filepath); if (existsSync(finalPath)) { uploadProgress.set(overwriteId, 'computing duration'); exec(`yt-dlp -o ${finalPath} "https://www.youtube.com/watch?v=${videoId}" --get-duration`, (error: any, stdout: any, stderr: any) => { const time = Array.from(stdout.trim().split(':')).reverse(); const duration = (time.length > 2 ? Number(time[2]) * 1000 * 60 : 0) + (time.length > 1 ? Number(time[1]) * 60 : 0) + (time.length > 0 ? Number(time[0]) : 0); - res(resolveExistingFile(name, finalPath, Directory.videos, 'video/mp4', duration, undefined)); + res(resolveExistingFile(name, filepath, Directory.videos, 'video/mp4', duration, undefined)); }); } else { uploadProgress.set(overwriteId, 'starting download'); - const ytdlp = spawn(`yt-dlp`, ['-o', path, `https://www.youtube.com/watch?v=${videoId}`, '--max-filesize', '100M', '-f', 'mp4']); + const ytdlp = spawn(`yt-dlp`, ['-o', filepath, `https://www.youtube.com/watch?v=${videoId}`, '--max-filesize', '100M', '-f', 'mp4']); ytdlp.stdout.on('data', (data: any) => uploadProgress.set(overwriteId, data.toString())); @@ -171,21 +171,26 @@ export namespace DashUploadUtils { res({ source: { size: 0, - path, - name, - type: '', - toJSON: () => ({ name, path }), + filepath: name, + originalFilename: name, + newFilename: name, + mimetype: 'video', + hashAlgorithm: 'md5', + toJSON: () => ({ newFilename: name, filepath, mimetype: 'video', mtime: new Date(), size: 0, length: 0, originalFilename: name }), }, result: { name: 'failed youtube query', message: `Could not archive video. ${code ? errors : uploadProgress.get(videoId)}` }, }); } else { uploadProgress.set(overwriteId, 'computing duration'); - exec(`yt-dlp-o ${path} "https://www.youtube.com/watch?v=${videoId}" --get-duration`, (error: any, stdout: any, stderr: any) => { + exec(`yt-dlp-o ${filepath} "https://www.youtube.com/watch?v=${videoId}" --get-duration`, (error: any, stdout: any, stderr: any) => { const time = Array.from(stdout.trim().split(':')).reverse(); const duration = (time.length > 2 ? Number(time[2]) * 1000 * 60 : 0) + (time.length > 1 ? Number(time[1]) * 60 : 0) + (time.length > 0 ? Number(time[0]) : 0); - const data = { size: 0, path, name, type: 'video/mp4' }; - const file = { ...data, toJSON: () => ({ ...data, filename: data.path.replace(/.*\//, ''), mtime: duration.toString(), mime: '', toJson: () => undefined as any }) }; - res(MoveParsedFile(file, Directory.videos)); + const data = { size: 0, filepath, name, mimetype: 'video', originalFilename: name, newFilename: name, hashAlgorithm: 'md5' as 'md5', type: 'video/mp4' }; + const file = { ...data, toJSON: () => ({ ...data, length: 0, filename: data.filepath.replace(/.*\//, ''), mtime: new Date(), toJson: () => undefined as any }) }; + MoveParsedFile(file, Directory.videos).then(output => { + console.log('OUTPUT = ' + output); + res(output); + }); }); } }); @@ -195,39 +200,39 @@ export namespace DashUploadUtils { export async function upload(file: File, overwriteGuid?: string): Promise<Upload.FileResponse> { const isAzureOn = usingAzure(); - const { type, path, name } = file; + const { mimetype: type, filepath, originalFilename } = file; const types = type?.split('/') ?? []; - uploadProgress.set(overwriteGuid ?? name, 'uploading'); // If the client sent a guid it uses to track upload progress, use that guid. Otherwise, use the file's name. + // uploadProgress.set(overwriteGuid ?? name, 'uploading'); // If the client sent a guid it uses to track upload progress, use that guid. Otherwise, use the file's name. const category = types[0]; let format = `.${types[1]}`; - console.log(green(`Processing upload of file (${name}) and format (${format}) with upload type (${type}) in category (${category}).`)); + console.log(green(`Processing upload of file (${originalFilename}) and format (${format}) with upload type (${type}) in category (${category}).`)); switch (category) { case 'image': if (imageFormats.includes(format)) { - const result = await UploadImage(path, basename(path)); + const result = await UploadImage(filepath, basename(filepath)); return { source: file, result }; } - fs.unlink(path, () => {}); - return { source: file, result: { name: 'Unsupported image format', message: `Could not upload unsupported file (${name}). Please convert to an .jpg` } }; + fs.unlink(filepath, () => {}); + return { source: file, result: { name: 'Unsupported image format', message: `Could not upload unsupported file (${originalFilename}). Please convert to an .jpg` } }; case 'video': if (format.includes('x-matroska')) { console.log('case video'); await new Promise(res => - ffmpeg(file.path) + ffmpeg(file.filepath) .videoCodec('copy') // this will copy the data instead of reencode it - .save(file.path.replace('.mkv', '.mp4')) + .save(file.filepath.replace('.mkv', '.mp4')) .on('end', res) .on('error', (e: any) => console.log(e)) ); - file.path = file.path.replace('.mkv', '.mp4'); + file.filepath = file.filepath.replace('.mkv', '.mp4'); format = '.mp4'; } if (format.includes('quicktime')) { let abort = false; await new Promise<void>(res => - ffmpeg.ffprobe(file.path, (err: any, metadata: any) => { + ffmpeg.ffprobe(file.filepath, (err: any, metadata: any) => { if (metadata.streams.some((stream: any) => stream.codec_name === 'hevc')) { abort = true; } @@ -245,15 +250,15 @@ export namespace DashUploadUtils { // ); // file.path = file.path.replace('.mov', '.mp4').replace('.MOV', '.mp4'); // format = '.mp4'; - fs.unlink(path, () => {}); - return { source: file, result: { name: 'Unsupported video format', message: `Could not upload unsupported file (${name}). Please convert to an .mp4` } }; + fs.unlink(filepath, () => {}); + return { source: file, result: { name: 'Unsupported video format', message: `Could not upload unsupported file (${originalFilename}). Please convert to an .mp4` } }; } } if (videoFormats.includes(format) || format.includes('.webm')) { return MoveParsedFile(file, Directory.videos); } - fs.unlink(path, () => {}); - return { source: file, result: { name: 'Unsupported video format', message: `Could not upload unsupported file (${name}). Please convert to an .mp4` } }; + fs.unlink(filepath, () => {}); + return { source: file, result: { name: 'Unsupported video format', message: `Could not upload unsupported file (${originalFilename}). Please convert to an .mp4` } }; case 'application': if (applicationFormats.includes(format)) { const val = UploadPdf(file); @@ -267,32 +272,34 @@ export namespace DashUploadUtils { if (audioFormats.includes(format)) { return UploadAudio(file, format); } - fs.unlink(path, () => {}); - return { source: file, result: { name: 'Unsupported audio format', message: `Could not upload unsupported file (${name}). Please convert to an .mp3` } }; + fs.unlink(filepath, () => {}); + return { source: file, result: { name: 'Unsupported audio format', message: `Could not upload unsupported file (${originalFilename}). Please convert to an .mp3` } }; case 'text': if (types[1] == 'csv') { return UploadCsv(file); } } - console.log(red(`Ignoring unsupported file (${name}) with upload type (${type}).`)); - fs.unlink(path, () => {}); - return { source: file, result: new Error(`Could not upload unsupported file (${name}) with upload type (${type}).`) }; + console.log(red(`Ignoring unsupported file (${originalFilename}) with upload type (${type}).`)); + fs.unlink(filepath, () => {}); + return { source: file, result: new Error(`Could not upload unsupported file (${originalFilename}) with upload type (${type}).`) }; } async function UploadPdf(file: File) { - const fileKey = (await md5File(file.path)) + '.pdf'; + const fileKey = (await md5File(file.filepath)) + '.pdf'; const textFilename = `${fileKey.substring(0, fileKey.length - 4)}.txt`; if (fExists(fileKey, Directory.pdfs) && fExists(textFilename, Directory.text)) { - fs.unlink(file.path, () => {}); + fs.unlink(file.filepath, () => {}); return new Promise<Upload.FileResponse>(res => { const textFilename = `${fileKey.substring(0, fileKey.length - 4)}.txt`; const readStream = createReadStream(serverPathToFile(Directory.text, textFilename)); var rawText = ''; - readStream.on('data', chunk => (rawText += chunk.toString())).on('end', () => res(resolveExistingFile(file.name, fileKey, Directory.pdfs, file.type, undefined, rawText))); + readStream + .on('data', chunk => (rawText += chunk.toString())) // + .on('end', () => res(resolveExistingFile(file.originalFilename ?? '', fileKey, Directory.pdfs, file.mimetype, undefined, rawText))); }); } - const dataBuffer = readFileSync(file.path); + const dataBuffer = readFileSync(file.filepath); const result: ParsedPDF | any = await parse(dataBuffer).catch((e: any) => e); if (!result.code) { await new Promise<void>((resolve, reject) => { @@ -301,11 +308,11 @@ export namespace DashUploadUtils { }); return MoveParsedFile(file, Directory.pdfs, undefined, result?.text, undefined, fileKey); } - return { source: file, result: { name: 'faile pdf pupload', message: `Could not upload (${file.name}).${result.message}` } }; + return { source: file, result: { name: 'faile pdf pupload', message: `Could not upload (${file.originalFilename}).${result.message}` } }; } async function UploadCsv(file: File) { - const { path: sourcePath } = file; + const { filepath: sourcePath } = file; // read the file as a string const data = readFileSync(sourcePath, 'utf8'); // split the string into an array of lines @@ -342,7 +349,11 @@ export namespace DashUploadUtils { if (metadata instanceof Error) { return { name: metadata.name, message: metadata.message }; } - return UploadInspectedImage(metadata, filename || metadata.filename, prefix); + const outputFile = filename || metadata.filename; + if (!outputFile) { + return { name: source, message: 'output file not found' }; + } + return UploadInspectedImage(metadata, outputFile, prefix); }; export async function buildFileDirectories() { @@ -367,7 +378,7 @@ export namespace DashUploadUtils { } export interface ImageResizer { - resizer?: sharp.Sharp; + width: number; suffix: SizeSuffix; } @@ -392,13 +403,14 @@ export namespace DashUploadUtils { const response = await AzureManager.UploadBase64ImageBlob(resolved, data); source = `${AzureManager.BASE_STRING}/${resolved}`; } else { + source = `${resolvedServerUrl}${clientPathToFile(Directory.images, resolved)}`; + source = serverPathToFile(Directory.images, resolved); const error = await new Promise<Error | null>(resolve => { writeFile(serverPathToFile(Directory.images, resolved), data, 'base64', resolve); }); if (error !== null) { return error; } - source = `${resolvedServerUrl}${clientPathToFile(Directory.images, resolved)}`; } } let resolvedUrl: string; @@ -463,12 +475,12 @@ export namespace DashUploadUtils { * to appear in the new location */ export async function MoveParsedFile(file: formidable.File, destination: Directory, suffix: string | undefined = undefined, text?: string, duration?: number, targetName?: string): Promise<Upload.FileResponse> { - const { path: sourcePath } = file; - let name = targetName ?? path.basename(sourcePath); + const { filepath } = file; + let name = targetName ?? path.basename(filepath); suffix && (name += suffix); return new Promise(resolve => { const destinationPath = serverPathToFile(destination, name); - rename(sourcePath, destinationPath, error => { + rename(filepath, destinationPath, error => { resolve({ source: file, result: error @@ -507,7 +519,7 @@ export namespace DashUploadUtils { * @param cleanUp a boolean indicating if the files should be deleted after upload. True by default. * @returns the accessPaths for the resized files. */ - export const UploadInspectedImage = async (metadata: Upload.InspectionResults, filename?: string, prefix = '', cleanUp = true): Promise<Upload.ImageInformation> => { + export const UploadInspectedImage = async (metadata: Upload.InspectionResults, filename: string, prefix = '', cleanUp = true): Promise<Upload.ImageInformation> => { const { requestable, source, ...remaining } = metadata; const resolved = filename || `${prefix}upload_${Utils.GenerateGuid()}.${remaining.contentType.split('/')[1].toLowerCase()}`; const { images } = Directory; @@ -540,7 +552,7 @@ export namespace DashUploadUtils { writtenFiles = {}; } } else { - writtenFiles = await outputResizedImages(() => request(requestable), resolved, pathToDirectory(Directory.images)); + writtenFiles = await outputResizedImages(metadata.source, resolved, pathToDirectory(Directory.images)); } for (const suffix of Object.keys(writtenFiles)) { information.accessPaths[suffix] = getAccessPaths(images, writtenFiles[suffix]); @@ -586,66 +598,63 @@ export namespace DashUploadUtils { force: true, }; + async function correctRotation(imgSourcePath: string) { + const buffer = fs.readFileSync(imgSourcePath); + try { + return (await autorotate.rotate(buffer, { quality: 30 })).buffer; + } catch (e) { + return buffer; + } + } + /** * outputResizedImages takes in a readable stream and resizes the images according to the sizes defined at the top of this file. * * The new images will be saved to the server with the corresponding prefixes. - * @param streamProvider a Stream of the image to process, taken from the /parsed_files location + * @param imgSourcePath file path for image being resized * @param outputFileName the basename (No suffix) of the outputted file. * @param outputDirectory the directory to output to, usually Directory.Images * @returns a map with suffixes as keys and resized filenames as values. */ - export async function outputResizedImages(streamProvider: () => Stream | Promise<Stream>, outputFileName: string, outputDirectory: string) { + export async function outputResizedImages(imgSourcePath: string, outputFileName: string, outputDirectory: string) { const writtenFiles: { [suffix: string]: string } = {}; - for (const { resizer, suffix } of resizers(path.extname(outputFileName))) { - const outputPath = path.resolve(outputDirectory, (writtenFiles[suffix] = InjectSize(outputFileName, suffix))); - await new Promise<void>(async (resolve, reject) => { - const source = streamProvider(); - let readStream = source instanceof Promise ? await source : source; - let error = false; - if (resizer) { - readStream = readStream.pipe(resizer.withMetadata()).on('error', async args => { - error = true; - if (error) { - const source2 = streamProvider(); - let readStream2: Stream | undefined; - readStream2 = source2 instanceof Promise ? await source2 : source2; - readStream2?.pipe(createWriteStream(outputPath)).on('error', resolve).on('close', resolve); - } - }); - } - !error && readStream?.pipe(createWriteStream(outputPath)).on('error', resolve).on('close', resolve); + const sizes = imageResampleSizes(path.extname(outputFileName)); + + const imgBuffer = await correctRotation(imgSourcePath); + const imgReadStream = new Duplex(); + imgReadStream.push(imgBuffer); + imgReadStream.push(null); + const outputPath = (suffix: SizeSuffix) => path.resolve(outputDirectory, (writtenFiles[suffix] = InjectSize(outputFileName, suffix))); + await Promise.all( + sizes.filter(({ width }) => !width).map(({ suffix }) => + new Promise<void>(res => imgReadStream.pipe(createWriteStream(outputPath(suffix))).on('close', res)) + )); // prettier-ignore + + return Jimp.read(imgBuffer) + .then(async (img: any) => { + await Promise.all( sizes.filter(({ width }) => width).map(({ width, suffix }) => + img = img.resize(width, Jimp.AUTO).write(outputPath(suffix)) + )); // prettier-ignore + return writtenFiles; + }) + .catch((e: any) => { + console.log('ERROR' + e); + return writtenFiles; }); - } - return writtenFiles; } /** * define the resizers to use * @param ext the extension - * @returns an array of resizer functions from sharp + * @returns an array of resize descriptions */ - function resizers(ext: string): DashUploadUtils.ImageResizer[] { + export function imageResampleSizes(ext: string): DashUploadUtils.ImageResizer[] { return [ - { suffix: SizeSuffix.Original }, - ...Object.values(DashUploadUtils.Sizes).map(({ suffix, width }) => { - let initial: sharp.Sharp | undefined = sharp({ failOnError: false }).resize(width, undefined, { withoutEnlargement: true }); - if (pngs.includes(ext)) { - initial = initial.png(pngOptions); - } else if (jpgs.includes(ext)) { - initial = initial.jpeg(); - } else if (webps.includes(ext)) { - initial = initial.webp(); - } else if (tiffs.includes(ext)) { - initial = initial.tiff(); - } else if (ext === '.gif') { - initial = undefined; - } - return { - resizer: suffix === '_o' ? undefined : initial, - suffix, - }; - }), + { suffix: SizeSuffix.Original, width: 0 }, + ...[...(AcceptableMedia.imageFormats.includes(ext.toLowerCase()) ? Object.values(DashUploadUtils.Sizes) : [])].map(({ suffix, width }) => ({ + width, + suffix, + })), ]; } } diff --git a/src/server/GarbageCollector.ts b/src/server/GarbageCollector.ts index c60880882..423c719c2 100644 --- a/src/server/GarbageCollector.ts +++ b/src/server/GarbageCollector.ts @@ -65,7 +65,7 @@ async function GarbageCollect(full: boolean = true) { // await new Promise(res => setTimeout(res, 3000)); const cursor = await Database.Instance.query({}, { userDocumentId: 1 }, 'users'); const users = await cursor.toArray(); - const ids: string[] = [...users.map(user => user.userDocumentId), ...users.map(user => user.sharingDocumentId), ...users.map(user => user.linkDatabaseId)]; + const ids: string[] = [...users.map((user:any) => user.userDocumentId), ...users.map((user:any) => user.sharingDocumentId), ...users.map((user:any) => user.linkDatabaseId)]; const visited = new Set<string>(); const files: { [name: string]: string[] } = {}; @@ -95,7 +95,7 @@ async function GarbageCollect(full: boolean = true) { const notToDelete = Array.from(visited); const toDeleteCursor = await Database.Instance.query({ _id: { $nin: notToDelete } }, { _id: 1 }); - const toDelete: string[] = (await toDeleteCursor.toArray()).map(doc => doc._id); + const toDelete: string[] = (await toDeleteCursor.toArray()).map((doc:any) => doc._id); toDeleteCursor.close(); if (!full) { await Database.Instance.updateMany({ _id: { $nin: notToDelete } }, { $set: { "deleted": true } }); diff --git a/src/server/IDatabase.ts b/src/server/IDatabase.ts index dd4968579..2274792b3 100644 --- a/src/server/IDatabase.ts +++ b/src/server/IDatabase.ts @@ -3,13 +3,13 @@ import { Transferable } from './Message'; export const DocumentsCollection = 'documents'; export interface IDatabase { - update(id: string, value: any, callback: (err: mongodb.MongoError, res: mongodb.UpdateWriteOpResult) => void, upsert?: boolean, collectionName?: string): Promise<void>; - updateMany(query: any, update: any, collectionName?: string): Promise<mongodb.WriteOpResult>; + update(id: string, value: any, callback: (err: mongodb.MongoError, res: mongodb.UpdateResult) => void, upsert?: boolean, collectionName?: string): Promise<void>; + updateMany(query: any, update: any, collectionName?: string): Promise<mongodb.UpdateResult>; - replace(id: string, value: any, callback: (err: mongodb.MongoError, res: mongodb.UpdateWriteOpResult) => void, upsert?: boolean, collectionName?: string): void; + replace(id: string, value: any, callback: (err: mongodb.MongoError, res: mongodb.UpdateResult) => void, upsert?: boolean, collectionName?: string): void; - delete(query: any, collectionName?: string): Promise<mongodb.DeleteWriteOpResultObject>; - delete(id: string, collectionName?: string): Promise<mongodb.DeleteWriteOpResultObject>; + delete(query: any, collectionName?: string): Promise<mongodb.DeleteResult>; + delete(id: string, collectionName?: string): Promise<mongodb.DeleteResult>; dropSchema(...schemaNames: string[]): Promise<any>; @@ -20,5 +20,5 @@ export interface IDatabase { getCollectionNames(): Promise<string[]>; visit(ids: string[], fn: (result: any) => string[] | Promise<string[]>, collectionName?: string): Promise<void>; - query(query: { [key: string]: any }, projection?: { [key: string]: 0 | 1 }, collectionName?: string): Promise<mongodb.Cursor>; + query(query: { [key: string]: any }, projection?: { [key: string]: 0 | 1 }, collectionName?: string): Promise<mongodb.FindCursor>; } diff --git a/src/server/MemoryDatabase.ts b/src/server/MemoryDatabase.ts index d2d8bb3b3..b74332bf5 100644 --- a/src/server/MemoryDatabase.ts +++ b/src/server/MemoryDatabase.ts @@ -19,7 +19,7 @@ export class MemoryDatabase implements IDatabase { return Promise.resolve(Object.keys(this.db)); } - public update(id: string, value: any, callback: (err: mongodb.MongoError, res: mongodb.UpdateWriteOpResult) => void, _upsert?: boolean, collectionName = DocumentsCollection): Promise<void> { + public update(id: string, value: any, callback: (err: mongodb.MongoError, res: mongodb.UpdateResult) => void, _upsert?: boolean, collectionName = DocumentsCollection): Promise<void> { const collection = this.getCollection(collectionName); const set = "$set"; if (set in value) { @@ -45,17 +45,17 @@ export class MemoryDatabase implements IDatabase { return Promise.resolve(undefined); } - public updateMany(query: any, update: any, collectionName = DocumentsCollection): Promise<mongodb.WriteOpResult> { + public updateMany(query: any, update: any, collectionName = DocumentsCollection): Promise<mongodb.UpdateResult> { throw new Error("Can't updateMany a MemoryDatabase"); } - public replace(id: string, value: any, callback: (err: mongodb.MongoError, res: mongodb.UpdateWriteOpResult) => void, upsert?: boolean, collectionName = DocumentsCollection): void { + public replace(id: string, value: any, callback: (err: mongodb.MongoError, res: mongodb.UpdateResult) => void, upsert?: boolean, collectionName = DocumentsCollection): void { this.update(id, value, callback, upsert, collectionName); } - public delete(query: any, collectionName?: string): Promise<mongodb.DeleteWriteOpResultObject>; - public delete(id: string, collectionName?: string): Promise<mongodb.DeleteWriteOpResultObject>; - public delete(id: any, collectionName = DocumentsCollection): Promise<mongodb.DeleteWriteOpResultObject> { + public delete(query: any, collectionName?: string): Promise<mongodb.DeleteResult>; + public delete(id: string, collectionName?: string): Promise<mongodb.DeleteResult>; + public delete(id: any, collectionName = DocumentsCollection): Promise<mongodb.DeleteResult> { const i = id.id ?? id; delete this.getCollection(collectionName)[i]; @@ -105,7 +105,7 @@ export class MemoryDatabase implements IDatabase { } } - public query(): Promise<mongodb.Cursor> { + public query(): Promise<mongodb.FindCursor> { throw new Error("Can't query a MemoryDatabase"); } } diff --git a/src/server/ProcessFactory.ts b/src/server/ProcessFactory.ts index 63682368f..f69eda4c3 100644 --- a/src/server/ProcessFactory.ts +++ b/src/server/ProcessFactory.ts @@ -2,7 +2,7 @@ import { ChildProcess, spawn, StdioOptions } from "child_process"; import { existsSync, mkdirSync } from "fs"; import { Stream } from "stream"; import { fileDescriptorFromStream, pathFromRoot } from './ActionUtilities'; -import rimraf = require("rimraf"); +import { rimraf } from "rimraf"; export namespace ProcessFactory { @@ -13,7 +13,7 @@ export namespace ProcessFactory { const log_fd = await Logger.create(command, args); stdio = ["ignore", log_fd, log_fd]; } - const child = spawn(command, args, { detached, stdio }); + const child = spawn(command, args ?? [], { detached, stdio }); child.unref(); return child; } @@ -27,7 +27,7 @@ export namespace Logger { export async function initialize() { if (existsSync(logPath)) { if (!process.env.SPAWNED) { - await new Promise<any>(resolve => rimraf(logPath, resolve)); + await new Promise<any>(resolve => rimraf(logPath).then(resolve)); } } mkdirSync(logPath); diff --git a/src/server/RouteManager.ts b/src/server/RouteManager.ts index 5683cd539..540bca776 100644 --- a/src/server/RouteManager.ts +++ b/src/server/RouteManager.ts @@ -1,6 +1,7 @@ import { cyan, green, red } from 'colors'; import { Express, Request, Response } from 'express'; import { AdminPriviliges } from '.'; +import { Utils } from '../Utils'; import { DashUserModel } from './authentication/DashUserModel'; import RouteSubscriber from './RouteSubscriber'; @@ -102,7 +103,7 @@ export default class RouteManager { let user = req.user as Partial<DashUserModel> | undefined; const { originalUrl: target } = req; if (process.env.DB === 'MEM' && !user) { - user = { id: 'guest', email: 'guest', userDocumentId: '__guest__' }; + user = { id: 'guest', email: 'guest', userDocumentId: Utils.GuestID() }; } const core = { req, res, isRelease }; const tryExecute = async (toExecute: (args: any) => any | Promise<any>, args: any) => { diff --git a/src/server/apis/google/GoogleApiServerUtils.ts b/src/server/apis/google/GoogleApiServerUtils.ts index 4453b83bf..3940b7a3d 100644 --- a/src/server/apis/google/GoogleApiServerUtils.ts +++ b/src/server/apis/google/GoogleApiServerUtils.ts @@ -1,11 +1,11 @@ -import { google } from "googleapis"; -import { OAuth2Client, Credentials, OAuth2ClientOptions } from "google-auth-library"; -import { Opt } from "../../../fields/Doc"; -import { GaxiosResponse } from "gaxios"; -import request = require('request-promise'); -import * as qs from "query-string"; -import { Database } from "../../database"; -import { GoogleCredentialsLoader } from "./CredentialsLoader"; +import { google } from 'googleapis'; +import { OAuth2Client, Credentials, OAuth2ClientOptions } from 'google-auth-library'; +import { Opt } from '../../../fields/Doc'; +import { GaxiosResponse } from 'gaxios'; +import * as request from 'request-promise'; +import * as qs from 'query-string'; +import { Database } from '../../database'; +import { GoogleCredentialsLoader } from './CredentialsLoader'; /** * Scopes give Google users fine granularity of control @@ -13,33 +13,23 @@ import { GoogleCredentialsLoader } from "./CredentialsLoader"; * This is the somewhat overkill list of what Dash requests * from the user. */ -const scope = [ - 'documents.readonly', - 'documents', - 'presentations', - 'presentations.readonly', - 'drive', - 'drive.file', - 'photoslibrary', - 'photoslibrary.appendonly', - 'photoslibrary.sharing', - 'userinfo.profile' -].map(relative => `https://www.googleapis.com/auth/${relative}`); +const scope = ['documents.readonly', 'documents', 'presentations', 'presentations.readonly', 'drive', 'drive.file', 'photoslibrary', 'photoslibrary.appendonly', 'photoslibrary.sharing', 'userinfo.profile'].map( + relative => `https://www.googleapis.com/auth/${relative}` +); /** * This namespace manages server side authentication for Google API queries, either * from the standard v1 APIs or the Google Photos REST API. */ export namespace GoogleApiServerUtils { - /** * As we expand out to more Google APIs that are accessible from * the 'googleapis' module imported above, this enum will record * the list and provide a unified string representation of each API. */ export enum Service { - Documents = "Documents", - Slides = "Slides", + Documents = 'Documents', + Slides = 'Slides', } /** @@ -51,7 +41,7 @@ export namespace GoogleApiServerUtils { let oAuthOptions: OAuth2ClientOptions; /** - * This is a global authorization client that is never + * This is a global authorization client that is never * passed around, and whose credentials are never set. * Its job is purely to generate new authentication urls * (users will follow to get to Google's permissions GUI) @@ -64,7 +54,7 @@ export namespace GoogleApiServerUtils { * This function is called once before the server is started, * reading in Dash's project-specific credentials (client secret * and client id) for later repeated access. It also sets up the - * global, intentionally unauthenticated worker OAuth2 client instance. + * global, intentionally unauthenticated worker OAuth2 client instance. */ export function processProjectCredentials(): void { const { client_secret, client_id, redirect_uris } = GoogleCredentialsLoader.ProjectCredentials; @@ -72,7 +62,7 @@ export namespace GoogleApiServerUtils { oAuthOptions = { clientId: client_id, clientSecret: client_secret, - redirectUri: redirect_uris[0] + redirectUri: redirect_uris[0], }; worker = generateClient(); } @@ -98,7 +88,7 @@ export namespace GoogleApiServerUtils { * A literal union type indicating the valid actions for these 'googleapis' * requestions */ - export type Action = "create" | "retrieve" | "update"; + export type Action = 'create' | 'retrieve' | 'update'; /** * An interface defining any entity on which one can invoke @@ -135,7 +125,7 @@ export namespace GoogleApiServerUtils { return resolve(); } let routed: Opt<Endpoint>; - const parameters: any = { auth, version: "v1" }; + const parameters: any = { auth, version: 'v1' }; switch (sector) { case Service.Documents: routed = google.docs(parameters).documents; @@ -165,7 +155,7 @@ export namespace GoogleApiServerUtils { } let client = authenticationClients.get(userId); if (!client) { - authenticationClients.set(userId, client = generateClient(credentials)); + authenticationClients.set(userId, (client = generateClient(credentials))); } else if (refreshed) { client.setCredentials(credentials); } @@ -206,11 +196,11 @@ export namespace GoogleApiServerUtils { * with a Dash user in the googleAuthentication table of the database. * @param authenticationCode the Google-provided authentication code that the user copied * from Google's permissions UI and pasted into the overlay. - * + * * EXAMPLE CODE: 4/sgF2A5uGg4xASHf7VQDnLtdqo3mUlfQqLSce_HYz5qf1nFtHj9YTeGs - * + * * @returns the information necessary to authenticate a client side google photos request - * and display basic user information in the overlay on successful authentication. + * and display basic user information in the overlay on successful authentication. * This can be expanded as needed by adding properties to the interface GoogleAuthenticationResult. */ export async function processNewUser(userId: string, authenticationCode: string): Promise<EnrichedCredentials> { @@ -231,7 +221,7 @@ export namespace GoogleApiServerUtils { /** * This type represents the union of the full set of OAuth2 credentials * and all of a Google user's publically available information. This is the strucure - * of the JSON object we ultimately store in the googleAuthentication table of the database. + * of the JSON object we ultimately store in the googleAuthentication table of the database. */ export type EnrichedCredentials = Credentials & { userInfo: UserInfo }; @@ -259,14 +249,14 @@ export namespace GoogleApiServerUtils { * It's pretty cool: the credentials id_token is split into thirds by periods. * The middle third contains a base64-encoded JSON string with all the * user info contained in the interface below. So, we isolate that middle third, - * base64 decode with atob and parse the JSON. + * base64 decode with atob and parse the JSON. * @param credentials the client credentials returned from OAuth after the user * has executed the authentication routine * @returns the full set of credentials in the structure in which they'll be stored * in the database. */ function injectUserInfo(credentials: Credentials): EnrichedCredentials { - const userInfo: UserInfo = JSON.parse(atob(credentials.id_token!.split(".")[1])); + const userInfo: UserInfo = JSON.parse(atob(credentials.id_token!.split('.')[1])); return { ...credentials, userInfo }; } @@ -279,7 +269,7 @@ export namespace GoogleApiServerUtils { * @returns the credentials, or undefined if the user has no stored associated credentials, * and a flag indicating whether or not they were refreshed during retrieval */ - export async function retrieveCredentials(userId: string): Promise<{ credentials: Opt<EnrichedCredentials>, refreshed: boolean }> { + export async function retrieveCredentials(userId: string): Promise<{ credentials: Opt<EnrichedCredentials>; refreshed: boolean }> { let credentials = await Database.Auxiliary.GoogleAccessToken.Fetch(userId); let refreshed = false; if (!credentials) { @@ -299,7 +289,7 @@ export namespace GoogleApiServerUtils { * the Dash user id passed in. In addition to returning the credentials, it * writes the diff to the database. * @param credentials the credentials - * @param userId the id of the Dash user implicitly requesting that + * @param userId the id of the Dash user implicitly requesting that * his/her credentials be refreshed * @returns the updated credentials */ @@ -310,19 +300,18 @@ export namespace GoogleApiServerUtils { refreshToken: credentials.refresh_token, client_id, client_secret, - grant_type: "refresh_token" + grant_type: 'refresh_token', })}`; const { access_token, expires_in } = await new Promise<any>(async resolve => { const response = await request.post(url, headerParameters); resolve(JSON.parse(response)); }); // expires_in is in seconds, but we're building the new expiry date in milliseconds - const expiry_date = new Date().getTime() + (expires_in * 1000); + const expiry_date = new Date().getTime() + expires_in * 1000; await Database.Auxiliary.GoogleAccessToken.Update(userId, access_token, expiry_date); // update the relevant properties credentials.access_token = access_token; credentials.expiry_date = expiry_date; return credentials; } - -}
\ No newline at end of file +} diff --git a/src/server/authentication/AuthenticationManager.ts b/src/server/authentication/AuthenticationManager.ts index 52d876e95..b1b84c300 100644 --- a/src/server/authentication/AuthenticationManager.ts +++ b/src/server/authentication/AuthenticationManager.ts @@ -3,12 +3,12 @@ import { Request, Response, NextFunction } from 'express'; import * as passport from 'passport'; import { IVerifyOptions } from 'passport-local'; import './Passport'; -import flash = require('express-flash'); import * as async from 'async'; import * as nodemailer from 'nodemailer'; -import c = require('crypto'); +import * as c from 'crypto'; import { emptyFunction, Utils } from '../../Utils'; import { MailOptions } from 'nodemailer/lib/stream-transport'; +import { check, validationResult } from 'express-validator'; /** * GET /signup @@ -31,14 +31,14 @@ export let getSignup = (req: Request, res: Response) => { */ export let postSignup = (req: Request, res: Response, next: NextFunction) => { const email = req.body.email as String; - req.assert('email', 'Email is not valid').isEmail(); - req.assert('password', 'Password must be at least 4 characters long').len({ min: 4 }); - req.assert('confirmPassword', 'Passwords do not match').equals(req.body.password); - req.sanitize('email').normalizeEmail({ gmail_remove_dots: false }); + check('email', 'Email is not valid').isEmail().run(req); + check('password', 'Password must be at least 4 characters long').isLength({ min: 4 }).run(req); + check('confirmPassword', 'Passwords do not match').equals(req.body.password).run(req); + check('email').normalizeEmail({ gmail_remove_dots: false }).run(req); - const errors = req.validationErrors(); + const errors = validationResult(req).array(); - if (errors) { + if (errors.length) { return res.redirect('/signup'); } @@ -47,7 +47,7 @@ export let postSignup = (req: Request, res: Response, next: NextFunction) => { const model = { email, password, - userDocumentId: email === 'guest' ? '__guest__' : Utils.GenerateGuid(), + userDocumentId: email === 'guest' ? Utils.GuestID() : Utils.GenerateGuid(), sharingDocumentId: email === 'guest' ? 2 : Utils.GenerateGuid(), linkDatabaseId: email === 'guest' ? 3 : Utils.GenerateGuid(), cacheDocumentIds: '', @@ -55,25 +55,21 @@ export let postSignup = (req: Request, res: Response, next: NextFunction) => { const user = new User(model); - User.findOne({ email }, (err: any, existingUser: any) => { - if (err) { - return next(err); - } - if (existingUser) { - return res.redirect('/login'); - } - user.save((err: any) => { - if (err) { - return next(err); + User.findOne({ email }) + .then(existingUser => { + if (existingUser) { + return res.redirect('/login'); } - req.logIn(user, err => { - if (err) { - return next(err); - } - tryRedirectToTarget(req, res); - }); - }); - }); + user.save() + .then(() => { + req.logIn(user, err => { + if (err) return next(err); + tryRedirectToTarget(req, res); + }); + }) + .catch(err => next(err)); + }) + .catch(err => next(err)); }; const tryRedirectToTarget = (req: Request, res: Response) => { @@ -107,16 +103,18 @@ export let getLogin = (req: Request, res: Response) => { */ export let postLogin = (req: Request, res: Response, next: NextFunction) => { if (req.body.email === '') { - User.findOne({ email: 'guest' }, (err: any, user: DashUserModel) => !user && initializeGuest()); + User.findOne({ email: 'guest' }) + .then(user => !user && initializeGuest()) + .catch(err => err); req.body.email = 'guest'; req.body.password = 'guest'; } else { - req.assert('email', 'Email is not valid').isEmail(); - req.assert('password', 'Password cannot be blank').notEmpty(); - req.sanitize('email').normalizeEmail({ gmail_remove_dots: false }); + check('email', 'Email is not valid').isEmail().run(req); + check('password', 'Password cannot be blank').notEmpty().run(req); + check('email').normalizeEmail({ gmail_remove_dots: false }).run(req); } - if (req.validationErrors()) { + if (validationResult(req).array().length) { req.flash('errors', 'Unable to login at this time. Please try again.'); return res.redirect('/signup'); } @@ -146,16 +144,10 @@ export let postLogin = (req: Request, res: Response, next: NextFunction) => { * and destroys the user's current session. */ export let getLogout = (req: Request, res: Response) => { - req.logout(emptyFunction); - const sess = req.session; - if (sess) { - sess.destroy(err => { - if (err) { - console.log(err); - } - }); - } - res.redirect('/login'); + req.logout(err => { + if (err) console.log(err); + else res.redirect('/login'); + }); }; export let getForgot = function (req: Request, res: Response) { @@ -179,7 +171,7 @@ export let postForgot = function (req: Request, res: Response, next: NextFunctio }); }, function (token: string, done: any) { - User.findOne({ email }, function (err: any, user: DashUserModel) { + User.findOne({ email }).then(user => { if (!user) { // NO ACCOUNT WITH SUBMITTED EMAIL res.redirect('/forgotPassword'); @@ -187,9 +179,7 @@ export let postForgot = function (req: Request, res: Response, next: NextFunctio } user.passwordResetToken = token; user.passwordResetExpires = new Date(Date.now() + 3600000); // 1 HOUR - user.save(function (err: any) { - done(null, token, user); - }); + user.save().then(() => done(null, token, user)); }); }, function (token: Uint16Array, user: DashUserModel, done: any) { @@ -228,50 +218,43 @@ export let postForgot = function (req: Request, res: Response, next: NextFunctio }; export let getReset = function (req: Request, res: Response) { - User.findOne({ passwordResetToken: req.params.token, passwordResetExpires: { $gt: Date.now() } }, function (err: any, user: DashUserModel) { - if (!user || err) { - return res.redirect('/forgotPassword'); - } - res.render('reset.pug', { - title: 'Reset Password', - user: req.user, - }); - }); + User.findOne({ passwordResetToken: req.params.token, passwordResetExpires: { $gt: Date.now() } }) + .then(user => { + if (!user) return res.redirect('/forgotPassword'); + res.render('reset.pug', { + title: 'Reset Password', + user: req.user, + }); + }) + .catch(err => res.redirect('/forgotPassword')); }; export let postReset = function (req: Request, res: Response) { async.waterfall( [ function (done: any) { - User.findOne({ passwordResetToken: req.params.token, passwordResetExpires: { $gt: Date.now() } }, function (err: any, user: DashUserModel) { - if (!user || err) { - return res.redirect('back'); - } + User.findOne({ passwordResetToken: req.params.token, passwordResetExpires: { $gt: Date.now() } }) + .then(user => { + if (!user) return res.redirect('back'); - req.assert('password', 'Password must be at least 4 characters long').len({ min: 4 }); - req.assert('confirmPassword', 'Passwords do not match').equals(req.body.password); + check('password', 'Password must be at least 4 characters long').isLength({ min: 4 }).run(req); + check('confirmPassword', 'Passwords do not match').equals(req.body.password).run(req); - if (req.validationErrors()) { - return res.redirect('back'); - } + if (validationResult(req).array().length) return res.redirect('back'); - user.password = req.body.password; - user.passwordResetToken = undefined; - user.passwordResetExpires = undefined; + user.password = req.body.password; + user.passwordResetToken = undefined; + user.passwordResetExpires = undefined; - user.save(function (err) { - if (err) { - res.redirect('/login'); - return; - } - req.logIn(user, function (err) { - if (err) { - return; - } - }); + user.save() + .then( + () => (req as any).logIn(user), + (err: any) => err + ) + .catch(err => res.redirect('/login')); done(null, user); - }); - }); + }) + .catch(err => res.redirect('back')); }, function (user: DashUserModel, done: any) { const smtpTransport = nodemailer.createTransport({ @@ -287,9 +270,8 @@ export let postReset = function (req: Request, res: Response) { subject: 'Your password has been changed', text: 'Hello,\n\n' + 'This is a confirmation that the password for your account ' + user.email + ' has just been changed.\n', } as MailOptions; - smtpTransport.sendMail(mailOptions, function (err) { - done(null, err); - }); + + smtpTransport.sendMail(mailOptions, err => done(null, err)); }, ], function (err) { diff --git a/src/server/authentication/DashUserModel.ts b/src/server/authentication/DashUserModel.ts index a1883beab..dbb7a79ed 100644 --- a/src/server/authentication/DashUserModel.ts +++ b/src/server/authentication/DashUserModel.ts @@ -2,6 +2,7 @@ import * as bcrypt from 'bcrypt-nodejs'; //@ts-ignore import * as mongoose from 'mongoose'; +import { Utils } from '../../Utils'; export type DashUserModel = mongoose.Document & { email: String; @@ -25,7 +26,7 @@ export type DashUserModel = mongoose.Document & { comparePassword: comparePasswordFunction; }; -type comparePasswordFunction = (candidatePassword: string, cb: (err: any, isMatch: any) => {}) => void; +type comparePasswordFunction = (candidatePassword: string, cb: (err: any, isMatch: any) => void) => void; export type AuthToken = { accessToken: string; @@ -63,7 +64,7 @@ const userSchema = new mongoose.Schema( * Password hash middleware. */ userSchema.pre('save', function save(next) { - const user = this as DashUserModel; + const user = this as any as DashUserModel; if (!user.isModified('password')) { return next(); } @@ -101,7 +102,7 @@ export function initializeGuest() { new User({ email: 'guest', password: 'guest', - userDocumentId: '__guest__', + userDocumentId: Utils.GuestID(), sharingDocumentId: '2', linkDatabaseId: '3', cacheDocumentIds: '', diff --git a/src/server/authentication/Passport.ts b/src/server/authentication/Passport.ts index d7f891c34..a9cf6698b 100644 --- a/src/server/authentication/Passport.ts +++ b/src/server/authentication/Passport.ts @@ -1,6 +1,6 @@ import * as passport from 'passport'; import * as passportLocal from 'passport-local'; -import { default as User } from './DashUserModel'; +import { DashUserModel, default as User } from './DashUserModel'; const LocalStrategy = passportLocal.Strategy; @@ -9,21 +9,24 @@ passport.serializeUser<any, any>((req, user, done) => { }); passport.deserializeUser<any, any>((id, done) => { - User.findById(id, (err: any, user: any) => { - done(err, user); - }); + User.findById(id) + .exec() + .then(user => done(undefined, user)); }); // AUTHENTICATE JUST WITH EMAIL AND PASSWORD -passport.use(new LocalStrategy({ usernameField: 'email', passReqToCallback: true }, (req, email, password, done) => { - User.findOne({ email: email.toLowerCase() }, (error: any, user: any) => { - if (error) return done(error); - if (!user) return done(undefined, false, { message: "Invalid email or password" }); // invalid email - user.comparePassword(password, (error: Error, isMatch: boolean) => { - if (error) return done(error); - if (!isMatch) return done(undefined, false, { message: "Invalid email or password" }); // invalid password - // valid authentication HERE - return done(undefined, user); - }); - }); -}));
\ No newline at end of file +passport.use( + new LocalStrategy({ usernameField: 'email', passReqToCallback: true }, (req, email, password, done) => { + User.findOne({ email: email.toLowerCase() }) + .then(user => { + if (!user) return done(undefined, false, { message: 'Invalid email or password' }); // invalid email + (user as any as DashUserModel).comparePassword(password, (error: Error, isMatch: boolean) => { + if (error) return done(error); + if (!isMatch) return done(undefined, false, { message: 'Invalid email or password' }); // invalid password + // valid authentication HERE + return done(undefined, user); + }); + }) + .catch(error => done(error)); + }) +); diff --git a/src/server/database.ts b/src/server/database.ts index 725b66836..3a087ce38 100644 --- a/src/server/database.ts +++ b/src/server/database.ts @@ -9,8 +9,12 @@ import { Transferable } from './Message'; import { Upload } from './SharedMediaTypes'; export namespace Database { - export let disconnect: Function; + + class DocSchema implements mongodb.BSON.Document { + _id!: string; + id!: string; + } const schema = 'Dash'; const port = 27017; export const url = `mongodb://localhost:${port}/${schema}`; @@ -26,7 +30,7 @@ export namespace Database { export async function tryInitializeConnection() { try { const { connection } = mongoose; - disconnect = async () => new Promise<any>(resolve => connection.close(resolve)); + disconnect = async () => new Promise<any>(resolve => connection.close().then(resolve)); if (connection.readyState === ConnectionStates.disconnected) { await new Promise<void>((resolve, reject) => { connection.on('error', reject); @@ -35,12 +39,11 @@ export namespace Database { resolve(); }); mongoose.connect(url, { - useNewUrlParser: true, - useUnifiedTopology: true, + //useNewUrlParser: true, dbName: schema, // reconnectTries: Number.MAX_VALUE, // reconnectInterval: 1000, - }); + }); }); } } catch (e) { @@ -60,11 +63,10 @@ export namespace Database { async doConnect() { console.error(`\nConnecting to Mongo with URL : ${url}\n`); return new Promise<void>(resolve => { - this.MongoClient.connect(url, { connectTimeoutMS: 30000, socketTimeoutMS: 30000, useUnifiedTopology: true }, (_err, client) => { - console.error("mongo connect response\n"); + this.MongoClient.connect(url, { connectTimeoutMS: 30000, socketTimeoutMS: 30000 }).then(client => { + console.error('mongo connect response\n'); if (!client) { - console.error("\nMongo connect failed with the error:\n"); - console.log(_err); + console.error('\nMongo connect failed with the error:\n'); process.exit(0); } this.db = client.db(); @@ -74,20 +76,24 @@ export namespace Database { }); } - public async update(id: string, value: any, callback: (err: mongodb.MongoError, res: mongodb.UpdateWriteOpResult) => void, upsert = true, collectionName = DocumentsCollection) { + public async update(id: string, value: any, callback: (err: mongodb.MongoError, res: mongodb.UpdateResult) => void, upsert = true, collectionName = DocumentsCollection) { if (this.db) { - const collection = this.db.collection(collectionName); + const collection = this.db.collection<DocSchema>(collectionName); const prom = this.currentWrites[id]; let newProm: Promise<void>; const run = (): Promise<void> => { return new Promise<void>(resolve => { - collection.updateOne({ _id: id }, value, { upsert } - , (err, res) => { + collection + .updateOne({ _id: id }, value, { upsert }) + .then(res => { if (this.currentWrites[id] === newProm) { delete this.currentWrites[id]; } resolve(); - callback(err, res); + callback(undefined as any, res); + }) + .catch(error => { + console.log('MOngo UPDATE ONE ERROR:', error); }); }); }; @@ -99,21 +105,20 @@ export namespace Database { } } - public replace(id: string, value: any, callback: (err: mongodb.MongoError, res: mongodb.UpdateWriteOpResult) => void, upsert = true, collectionName = DocumentsCollection) { + public replace(id: string, value: any, callback: (err: mongodb.MongoError, res: mongodb.UpdateResult<mongodb.Document>) => void, upsert = true, collectionName = DocumentsCollection) { if (this.db) { - const collection = this.db.collection(collectionName); + const collection = this.db.collection<DocSchema>(collectionName); const prom = this.currentWrites[id]; let newProm: Promise<void>; const run = (): Promise<void> => { return new Promise<void>(resolve => { - collection.replaceOne({ _id: id }, value, { upsert } - , (err, res) => { - if (this.currentWrites[id] === newProm) { - delete this.currentWrites[id]; - } - resolve(); - callback(err, res); - }); + collection.replaceOne({ _id: id }, value, { upsert }).then(res => { + if (this.currentWrites[id] === newProm) { + delete this.currentWrites[id]; + } + resolve(); + callback(undefined as any, res as any); + }); }); }; newProm = prom ? prom.then(run) : run(); @@ -135,15 +140,20 @@ export namespace Database { return collectionNames; } - public delete(query: any, collectionName?: string): Promise<mongodb.DeleteWriteOpResultObject>; - public delete(id: string, collectionName?: string): Promise<mongodb.DeleteWriteOpResultObject>; + public delete(query: any, collectionName?: string): Promise<mongodb.DeleteResult>; + public delete(id: string, collectionName?: string): Promise<mongodb.DeleteResult>; public delete(id: any, collectionName = DocumentsCollection) { - if (typeof id === "string") { + if (typeof id === 'string') { id = { _id: id }; } if (this.db) { const db = this.db; - return new Promise(res => db.collection(collectionName).deleteMany(id, (err, result) => res(result))); + return new Promise(res => + db + .collection(collectionName) + .deleteMany(id) + .then(result => res(result)) + ); } else { return new Promise(res => this.onConnect.push(() => res(this.delete(id, collectionName)))); } @@ -170,22 +180,27 @@ export namespace Database { public async insert(value: any, collectionName = DocumentsCollection) { if (this.db && value !== null) { - if ("id" in value) { + if ('id' in value) { value._id = value.id; delete value.id; } const id = value._id; - const collection = this.db.collection(collectionName); + const collection = this.db.collection<DocSchema>(collectionName); const prom = this.currentWrites[id]; let newProm: Promise<void>; const run = (): Promise<void> => { return new Promise<void>(resolve => { - collection.insertOne(value, (err, res) => { - if (this.currentWrites[id] === newProm) { - delete this.currentWrites[id]; - } - resolve(); - }); + collection + .insertOne(value) + .then(res => { + if (this.currentWrites[id] === newProm) { + delete this.currentWrites[id]; + } + resolve(); + }) + .catch(err => { + console.log('Mongo INSERT ERROR: ', err); + }); }); }; newProm = prom ? prom.then(run) : run(); @@ -198,11 +213,12 @@ export namespace Database { public getDocument(id: string, fn: (result?: Transferable) => void, collectionName = DocumentsCollection) { if (this.db) { - this.db.collection(collectionName).findOne({ _id: id }, (err, result) => { + const collection = this.db.collection<DocSchema>(collectionName); + collection.findOne({ _id: id }).then(result => { if (result) { result.id = result._id; - delete result._id; - fn(result); + //delete result._id; + fn(result as any); } else { fn(undefined); } @@ -212,19 +228,19 @@ export namespace Database { } } - public getDocuments(ids: string[], fn: (result: Transferable[]) => void, collectionName = DocumentsCollection) { + public async getDocuments(ids: string[], fn: (result: Transferable[]) => void, collectionName = DocumentsCollection) { if (this.db) { - this.db.collection(collectionName).find({ _id: { "$in": ids } }).toArray((err, docs) => { - if (err) { - console.log(err.message); - console.log(err.errmsg); - } - fn(docs.map(doc => { + const found = await this.db + .collection<DocSchema>(collectionName) + .find({ _id: { $in: ids } }) + .toArray(); + fn( + found.map((doc: any) => { doc.id = doc._id; delete doc._id; return doc; - })); - }); + }) + ); } else { this.onConnect.push(() => this.getDocuments(ids, fn, collectionName)); } @@ -257,15 +273,15 @@ export namespace Database { } } - public query(query: { [key: string]: any }, projection?: { [key: string]: 0 | 1 }, collectionName = DocumentsCollection): Promise<mongodb.Cursor> { + public query(query: { [key: string]: any }, projection?: { [key: string]: 0 | 1 }, collectionName = DocumentsCollection): Promise<mongodb.FindCursor> { if (this.db) { - let cursor = this.db.collection(collectionName).find(query); + let cursor = this.db.collection<DocSchema>(collectionName).find(query); if (projection) { cursor = cursor.project(projection); } - return Promise.resolve<mongodb.Cursor>(cursor); + return Promise.resolve<mongodb.FindCursor>(cursor); } else { - return new Promise<mongodb.Cursor>(res => { + return new Promise<mongodb.FindCursor>(res => { this.onConnect.push(() => res(this.query(query, projection, collectionName))); }); } @@ -274,22 +290,36 @@ export namespace Database { public updateMany(query: any, update: any, collectionName = DocumentsCollection) { if (this.db) { const db = this.db; - return new Promise<mongodb.WriteOpResult>(res => db.collection(collectionName).update(query, update, (_, result) => res(result))); + return new Promise<mongodb.UpdateResult>(res => + db + .collection(collectionName) + .updateMany(query, update) + .then(result => res(result)) + .catch(error => { + console.log('Mongo INSERT MANY ERROR:', error); + }) + ); } else { - return new Promise<mongodb.WriteOpResult>(res => { - this.onConnect.push(() => this.updateMany(query, update, collectionName).then(res)); + return new Promise<mongodb.UpdateResult>(res => { + this.onConnect.push(() => + this.updateMany(query, update, collectionName) + .then(res) + .catch(error => { + console.log('Mongo UPDATAE MANY ERROR: ', error); + }) + ); }); } } public print() { - console.log("db says hi!"); + console.log('db says hi!'); } } function getDatabase() { switch (process.env.DB) { - case "MEM": + case 'MEM': return new MemoryDatabase(); default: return new Database(); @@ -304,13 +334,12 @@ export namespace Database { * or Dash-internal user data. */ export namespace Auxiliary { - /** * All the auxiliary MongoDB collections (schemas) */ export enum AuxiliaryCollections { - GooglePhotosUploadHistory = "uploadedFromGooglePhotos", - GoogleAccess = "googleAuthentication", + GooglePhotosUploadHistory = 'uploadedFromGooglePhotos', + GoogleAccess = 'googleAuthentication', } /** @@ -322,16 +351,18 @@ export namespace Database { const cursor = await Instance.query(query, undefined, collection); const results = await cursor.toArray(); const slice = results.slice(0, Math.min(cap, results.length)); - return removeId ? slice.map(result => { - delete result._id; - return result; - }) : slice; + return removeId + ? slice.map((result: any) => { + delete result._id; + return result; + }) + : slice; }; /** * Searches for the @param query in the specified @param collection, * and returns at most the first result. If @param removeId is true, - * as it is by default, each object will be stripped of its database id. + * as it is by default, each object will be stripped of its database id. * Worth the special case since it converts the Array return type to a single * object of the specified type. */ @@ -341,7 +372,7 @@ export namespace Database { }; /** - * Checks to see if an image with the given @param contentSize + * Checks to see if an image with the given @param contentSize * already exists in the aux database, i.e. has already been downloaded from Google Photos. */ export const QueryUploadHistory = async (contentSize: number) => { @@ -355,7 +386,7 @@ export namespace Database { export const LogUpload = async (information: Upload.ImageInformation) => { const bundle = { _id: Utils.GenerateDeterministicGuid(String(information.contentSize)), - ...information + ...information, }; return Instance.insert(bundle, AuxiliaryCollections.GooglePhotosUploadHistory); }; @@ -365,7 +396,6 @@ export namespace Database { * facilitates interactions with all their APIs for a given account. */ export namespace GoogleAccessToken { - /** * Format stored in database. */ @@ -373,7 +403,7 @@ export namespace Database { /** * Retrieves the credentials associaed with @param userId - * and optionally removes their database id according to @param removeId. + * and optionally removes their database id according to @param removeId. */ export const Fetch = async (userId: string, removeId = true): Promise<Opt<StoredCredentials>> => { return SanitizedSingletonQuery<StoredCredentials>({ userId }, AuxiliaryCollections.GoogleAccess, removeId); @@ -381,7 +411,7 @@ export namespace Database { /** * Writes the @param enrichedCredentials to the database, associated - * with @param userId for later retrieval and updating. + * with @param userId for later retrieval and updating. */ export const Write = async (userId: string, enrichedCredentials: GoogleApiServerUtils.EnrichedCredentials) => { return Instance.insert({ userId, canAccess: [], ...enrichedCredentials }, AuxiliaryCollections.GoogleAccess); @@ -400,7 +430,7 @@ export namespace Database { }; /** - * Revokes the credentials associated with @param userId. + * Revokes the credentials associated with @param userId. */ export const Revoke = async (userId: string) => { const entry = await Fetch(userId, false); @@ -408,9 +438,6 @@ export namespace Database { Instance.delete({ _id: entry._id }, AuxiliaryCollections.GoogleAccess); } }; - } - } - } diff --git a/src/server/downsize.ts b/src/server/downsize.ts deleted file mode 100644 index 382994e2d..000000000 --- a/src/server/downsize.ts +++ /dev/null @@ -1,40 +0,0 @@ -import * as fs from 'fs'; -import * as sharp from 'sharp'; - -const folder = "./src/server/public/files/"; -const pngTypes = ["png", "PNG"]; -const jpgTypes = ["jpg", "JPG", "jpeg", "JPEG"]; -const smallResizer = sharp().resize(100); -fs.readdir(folder, async (err, files) => { - if (err) { - console.log("readdir:" + err); - return; - } - // files.forEach(file => { - // if (file.includes("_s") || file.includes("_m") || file.includes("_l")) { - // fs.unlink(folder + file, () => { }); - // } - // }); - for (const file of files) { - const filesplit = file.split("."); - const resizers = [ - { resizer: sharp().resize(100, undefined, { withoutEnlargement: true }), suffix: "_s" }, - { resizer: sharp().resize(400, undefined, { withoutEnlargement: true }), suffix: "_m" }, - { resizer: sharp().resize(900, undefined, { withoutEnlargement: true }), suffix: "_l" }, - ]; - if (pngTypes.some(type => file.endsWith(type))) { - resizers.forEach(element => { - element.resizer = element.resizer.png(); - }); - } else if (jpgTypes.some(type => file.endsWith(type))) { - resizers.forEach(element => { - element.resizer = element.resizer.jpeg(); - }); - } else { - continue; - } - resizers.forEach(resizer => { - fs.createReadStream(folder + file).pipe(resizer.resizer).pipe(fs.createWriteStream(folder + filesplit[0] + resizer.suffix + "." + filesplit[1])); - }); - } -});
\ No newline at end of file diff --git a/src/server/index.ts b/src/server/index.ts index 8b2e18847..47c37c9f0 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -1,4 +1,4 @@ -require('dotenv').config(); +import * as dotenv from 'dotenv'; import { yellow } from 'colors'; import * as mobileDetect from 'mobile-detect'; import * as path from 'path'; @@ -8,8 +8,7 @@ import DataVizManager from './ApiManagers/DataVizManager'; import DeleteManager from './ApiManagers/DeleteManager'; import DownloadManager from './ApiManagers/DownloadManager'; import GeneralGoogleManager from './ApiManagers/GeneralGoogleManager'; -import GooglePhotosManager from './ApiManagers/GooglePhotosManager'; -import PDFManager from './ApiManagers/PDFManager'; +//import GooglePhotosManager from './ApiManagers/GooglePhotosManager'; import { SearchManager } from './ApiManagers/SearchManager'; import SessionManager from './ApiManagers/SessionManager'; import UploadManager from './ApiManagers/UploadManager'; @@ -26,7 +25,7 @@ import { Logger } from './ProcessFactory'; import RouteManager, { Method, PublicHandler } from './RouteManager'; import RouteSubscriber from './RouteSubscriber'; import initializeServer, { resolvedPorts } from './server_Initialization'; - +dotenv.config(); export const AdminPriviliges: Map<string, boolean> = new Map(); export const onWindows = process.platform === 'win32'; export let sessionAgent: AppliedSessionAgent; @@ -64,19 +63,7 @@ async function preliminaryFunctions() { * with the server */ function routeSetter({ isRelease, addSupervisedRoute, logRegistrationOutcome }: RouteManager) { - const managers = [ - new SessionManager(), - new UserManager(), - new UploadManager(), - new DownloadManager(), - new SearchManager(), - new PDFManager(), - new DeleteManager(), - new UtilManager(), - new GeneralGoogleManager(), - new GooglePhotosManager(), - new DataVizManager(), - ]; + const managers = [new SessionManager(), new UserManager(), new UploadManager(), new DownloadManager(), new SearchManager(), new DeleteManager(), new UtilManager(), new GeneralGoogleManager(), /* new GooglePhotosManager(),*/ new DataVizManager()]; // initialize API Managers console.log(yellow('\nregistering server routes...')); diff --git a/src/server/public/assets/cheat-sheet.pdf b/src/server/public/assets/cheat-sheet.pdf Binary files differnew file mode 100644 index 000000000..fcc5484ea --- /dev/null +++ b/src/server/public/assets/cheat-sheet.pdf diff --git a/src/server/public/assets/dash-pin-with-view.gif b/src/server/public/assets/dash-pin-with-view.gif Binary files differnew file mode 100644 index 000000000..b0896d5c7 --- /dev/null +++ b/src/server/public/assets/dash-pin-with-view.gif diff --git a/src/server/public/assets/dataVizBox.png b/src/server/public/assets/dataVizBox.png Binary files differnew file mode 100644 index 000000000..2c216dfb6 --- /dev/null +++ b/src/server/public/assets/dataVizBox.png diff --git a/src/server/public/assets/downarrow.png b/src/server/public/assets/downarrow.png Binary files differnew file mode 100644 index 000000000..3c59ff5b1 --- /dev/null +++ b/src/server/public/assets/downarrow.png diff --git a/src/server/public/assets/endLink.png b/src/server/public/assets/endLink.png Binary files differnew file mode 100644 index 000000000..abadc9550 --- /dev/null +++ b/src/server/public/assets/endLink.png diff --git a/src/server/public/assets/env.json b/src/server/public/assets/env.json new file mode 100644 index 000000000..80963ea0d --- /dev/null +++ b/src/server/public/assets/env.json @@ -0,0 +1,15 @@ +{ + "IS_DARPA": false, + "IS_IGT": false, + "IS_MENU_FIXED": true, + "SERVER_URL": "http://localhost:1234", + "SERVER_API_PATH": "api", + "SAMPLE_SIZE": 100000, + "X_BINS": 15, + "Y_BINS": 15, + "SPLASH_TIME_IN_MS": 0, + "SHOW_FPS_COUNTER": true, + "SHOW_SHUTDOWN_BUTTON": false, + "DEGREE_OF_PARALLISM": 1, + "SHOW_WARNINGS": false +}
\ No newline at end of file diff --git a/src/server/public/assets/favicon.png b/src/server/public/assets/favicon.png Binary files differnew file mode 100644 index 000000000..59595b910 --- /dev/null +++ b/src/server/public/assets/favicon.png diff --git a/src/server/public/assets/google_photos.png b/src/server/public/assets/google_photos.png Binary files differnew file mode 100644 index 000000000..383cd410f --- /dev/null +++ b/src/server/public/assets/google_photos.png diff --git a/src/server/public/assets/google_tags.png b/src/server/public/assets/google_tags.png Binary files differnew file mode 100644 index 000000000..deb416407 --- /dev/null +++ b/src/server/public/assets/google_tags.png diff --git a/src/server/public/assets/greencheck.png b/src/server/public/assets/greencheck.png Binary files differnew file mode 100644 index 000000000..064e9def1 --- /dev/null +++ b/src/server/public/assets/greencheck.png diff --git a/src/server/public/assets/link.png b/src/server/public/assets/link.png Binary files differnew file mode 100644 index 000000000..2dbcd61ce --- /dev/null +++ b/src/server/public/assets/link.png diff --git a/src/server/public/assets/loading.gif b/src/server/public/assets/loading.gif Binary files differnew file mode 100644 index 000000000..0652bf021 --- /dev/null +++ b/src/server/public/assets/loading.gif diff --git a/src/server/public/assets/medium-blue-light-blue-circle.png b/src/server/public/assets/medium-blue-light-blue-circle.png Binary files differnew file mode 100644 index 000000000..59b927930 --- /dev/null +++ b/src/server/public/assets/medium-blue-light-blue-circle.png diff --git a/src/server/public/assets/pdf.worker.2.4.456.min.js b/src/server/public/assets/pdf.worker.2.4.456.min.js new file mode 100644 index 000000000..54eb544f6 --- /dev/null +++ b/src/server/public/assets/pdf.worker.2.4.456.min.js @@ -0,0 +1,22 @@ +/** + * @licstart The following is the entire license notice for the + * Javascript code in this page + * + * Copyright 2020 Mozilla Foundation + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * @licend The above is the entire license notice for the + * Javascript code in this page + */ +!function (e, t) { "object" == typeof exports && "object" == typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define("pdfjs-dist/build/pdf.worker", [], t) : "object" == typeof exports ? exports["pdfjs-dist/build/pdf.worker"] = t() : e["pdfjs-dist/build/pdf.worker"] = e.pdfjsWorker = t() }(this, (function () { return function (e) { var t = {}; function a(r) { if (t[r]) return t[r].exports; var i = t[r] = { i: r, l: !1, exports: {} }; e[r].call(i.exports, i, i.exports, a); i.l = !0; return i.exports } a.m = e; a.c = t; a.d = function (e, t, r) { a.o(e, t) || Object.defineProperty(e, t, { enumerable: !0, get: r }) }; a.r = function (e) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }); Object.defineProperty(e, "__esModule", { value: !0 }) }; a.t = function (e, t) { 1 & t && (e = a(e)); if (8 & t) return e; if (4 & t && "object" == typeof e && e && e.__esModule) return e; var r = Object.create(null); a.r(r); Object.defineProperty(r, "default", { enumerable: !0, value: e }); if (2 & t && "string" != typeof e) for (var i in e) a.d(r, i, function (t) { return e[t] }.bind(null, i)); return r }; a.n = function (e) { var t = e && e.__esModule ? function () { return e.default } : function () { return e }; a.d(t, "a", t); return t }; a.o = function (e, t) { return Object.prototype.hasOwnProperty.call(e, t) }; a.p = ""; return a(a.s = 0) }([function (e, t, a) { "use strict"; const r = a(1); t.WorkerMessageHandler = r.WorkerMessageHandler }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.WorkerMessageHandler = t.WorkerTask = void 0; var r = a(2), i = a(4), n = a(5), s = a(44), o = a(45), c = a(46), l = a(7), h = function () { function e(e) { this.name = e; this.terminated = !1; this._capability = (0, r.createPromiseCapability)() } e.prototype = { get finished() { return this._capability.promise }, finish() { this._capability.resolve() }, terminate() { this.terminated = !0 }, ensureNotTerminated() { if (this.terminated) throw new Error("Worker task was terminated") } }; return e }(); t.WorkerTask = h; var u, d = { setup(e, t) { var a = !1; e.on("test", (function (t) { if (a) return; a = !0; if (!(t instanceof Uint8Array)) { e.send("test", null); return } const r = 255 === t[0]; e.postMessageTransfers = r; e.send("test", { supportTransfers: r }) })); e.on("configure", (function (e) { (0, r.setVerbosityLevel)(e.verbosity) })); e.on("GetDocRequest", (function (e) { return d.createDocumentHandler(e, t) })) }, createDocumentHandler(e, t) { var a, s = !1, u = null, d = []; const f = (0, r.getVerbosityLevel)(), g = e.apiVersion; if ("2.4.456" !== g) throw new Error(`The API version "${g}" does not match ` + 'the Worker version "2.4.456".'); const m = []; for (const e in []) m.push(e); if (m.length) throw new Error("The `Array.prototype` contains unexpected enumerable properties: " + m.join(", ") + "; thus breaking e.g. `for...in` iteration of `Array`s."); var p = e.docId, b = e.docBaseUrl, y = e.docId + "_worker", v = new o.MessageHandler(y, p, t); v.postMessageTransfers = e.postMessageTransfers; function w() { if (s) throw new Error("Worker was terminated") } function k(e) { d.push(e) } function S(e) { e.finish(); var t = d.indexOf(e); d.splice(t, 1) } async function C(e) { await a.ensureDoc("checkHeader"); await a.ensureDoc("parseStartXRef"); await a.ensureDoc("parse", [e]); e || await a.ensureDoc("checkFirstPage"); const [t, r] = await Promise.all([a.ensureDoc("numPages"), a.ensureDoc("fingerprint")]); return { numPages: t, fingerprint: r } } function x(e, t) { var a, i = (0, r.createPromiseCapability)(), s = e.source; if (s.data) { try { a = new n.LocalPdfManager(p, s.data, s.password, t, b); i.resolve(a) } catch (e) { i.reject(e) } return i.promise } var o, l = []; try { o = new c.PDFWorkerStream(v) } catch (e) { i.reject(e); return i.promise } var h = o.getFullReader(); h.headersReady.then((function () { if (h.isRangeSupported) { var e = s.disableAutoFetch || h.isStreamingSupported; a = new n.NetworkPdfManager(p, o, { msgHandler: v, password: s.password, length: h.contentLength, disableAutoFetch: e, rangeChunkSize: s.rangeChunkSize }, t, b); for (let e = 0; e < l.length; e++)a.sendProgressiveData(l[e]); l = []; i.resolve(a); u = null } })).catch((function (e) { i.reject(e); u = null })); var d = 0; new Promise((function (e, o) { var c = function (e) { try { w(); if (e.done) { a || function () { var e = (0, r.arraysToBytes)(l); s.length && e.length !== s.length && (0, r.warn)("reported HTTP length is different from actual"); try { a = new n.LocalPdfManager(p, e, s.password, t, b); i.resolve(a) } catch (e) { i.reject(e) } l = [] }(); u = null; return } var f = e.value; d += (0, r.arrayByteLength)(f); h.isStreamingSupported || v.send("DocProgress", { loaded: d, total: Math.max(d, h.contentLength || 0) }); a ? a.sendProgressiveData(f) : l.push(f); h.read().then(c, o) } catch (e) { o(e) } }; h.read().then(c, o) })).catch((function (e) { i.reject(e); u = null })); u = function (e) { o.cancelAllRequests(e) }; return i.promise } v.on("GetPage", (function (e) { return a.getPage(e.pageIndex).then((function (e) { return Promise.all([a.ensure(e, "rotate"), a.ensure(e, "ref"), a.ensure(e, "userUnit"), a.ensure(e, "view")]).then((function ([e, t, a, r]) { return { rotate: e, ref: t, userUnit: a, view: r } })) })) })); v.on("GetPageIndex", (function (e) { var t = i.Ref.get(e.ref.num, e.ref.gen); return a.pdfDocument.catalog.getPageIndex(t) })); v.on("GetDestinations", (function (e) { return a.ensureCatalog("destinations") })); v.on("GetDestination", (function (e) { return a.ensureCatalog("getDestination", [e.id]) })); v.on("GetPageLabels", (function (e) { return a.ensureCatalog("pageLabels") })); v.on("GetPageLayout", (function (e) { return a.ensureCatalog("pageLayout") })); v.on("GetPageMode", (function (e) { return a.ensureCatalog("pageMode") })); v.on("GetViewerPreferences", (function (e) { return a.ensureCatalog("viewerPreferences") })); v.on("GetOpenAction", (function (e) { return a.ensureCatalog("openAction") })); v.on("GetAttachments", (function (e) { return a.ensureCatalog("attachments") })); v.on("GetJavaScript", (function (e) { return a.ensureCatalog("javaScript") })); v.on("GetOutline", (function (e) { return a.ensureCatalog("documentOutline") })); v.on("GetPermissions", (function (e) { return a.ensureCatalog("permissions") })); v.on("GetMetadata", (function (e) { return Promise.all([a.ensureDoc("documentInfo"), a.ensureCatalog("metadata")]) })); v.on("GetData", (function (e) { a.requestLoadedStream(); return a.onLoadedStream().then((function (e) { return e.bytes })) })); v.on("GetStats", (function (e) { return a.pdfDocument.xref.stats })); v.on("GetAnnotations", (function ({ pageIndex: e, intent: t }) { return a.getPage(e).then((function (e) { return e.getAnnotationsData(t) })) })); v.on("GetOperatorList", (function (e, t) { var i = e.pageIndex; a.getPage(i).then((function (a) { var n = new h(`GetOperatorList: page ${i}`); k(n); const s = f >= r.VerbosityLevel.INFOS ? Date.now() : 0; a.getOperatorList({ handler: v, sink: t, task: n, intent: e.intent, renderInteractiveForms: e.renderInteractiveForms }).then((function (e) { S(n); s && (0, r.info)(`page=${i + 1} - getOperatorList: time=` + `${Date.now() - s}ms, len=${e.length}`); t.close() }), (function (e) { S(n); if (!n.terminated) { v.send("UnsupportedFeature", { featureId: r.UNSUPPORTED_FEATURES.unknown }); t.error(e) } })) })) }), this); v.on("GetTextContent", (function (e, t) { var i = e.pageIndex; t.onPull = function (e) { }; t.onCancel = function (e) { }; a.getPage(i).then((function (a) { var n = new h("GetTextContent: page " + i); k(n); const s = f >= r.VerbosityLevel.INFOS ? Date.now() : 0; a.extractTextContent({ handler: v, task: n, sink: t, normalizeWhitespace: e.normalizeWhitespace, combineTextItems: e.combineTextItems }).then((function () { S(n); s && (0, r.info)(`page=${i + 1} - getTextContent: time=` + `${Date.now() - s}ms`); t.close() }), (function (e) { S(n); n.terminated || t.error(e) })) })) })); v.on("FontFallback", (function (e) { return a.fontFallback(e.id, v) })); v.on("Cleanup", (function (e) { return a.cleanup() })); v.on("Terminate", (function (e) { s = !0; const t = []; if (a) { a.terminate(new r.AbortException("Worker was terminated.")); const e = a.cleanup(); t.push(e); a = null } else (0, i.clearPrimitiveCaches)(); u && u(new r.AbortException("Worker was terminated.")); d.forEach((function (e) { t.push(e.finished); e.terminate() })); return Promise.all(t).then((function () { v.destroy(); v = null })) })); v.on("Ready", (function (t) { !function (e) { function t(e) { w(); v.send("GetDoc", { pdfInfo: e }) } function i(e) { w(); if (e instanceof r.PasswordException) { var t = new h(`PasswordException: response ${e.code}`); k(t); v.sendWithPromise("PasswordRequest", e).then((function (e) { S(t); a.updatePassword(e.password); n() })).catch((function () { S(t); v.send("DocException", e) })) } else e instanceof r.InvalidPDFException || e instanceof r.MissingPDFException || e instanceof r.UnexpectedResponseException || e instanceof r.UnknownErrorException ? v.send("DocException", e) : v.send("DocException", new r.UnknownErrorException(e.message, e.toString())) } function n() { w(); C(!1).then(t, (function (e) { w(); if (e instanceof l.XRefParseException) { a.requestLoadedStream(); a.onLoadedStream().then((function () { w(); C(!0).then(t, i) })) } else i(e) }), i) } w(); x(e, { forceDataSchema: e.disableCreateObjectURL, maxImageSize: e.maxImageSize, disableFontFace: e.disableFontFace, nativeImageDecoderSupport: e.nativeImageDecoderSupport, ignoreErrors: e.ignoreErrors, isEvalSupported: e.isEvalSupported }).then((function (e) { if (s) { e.terminate(new r.AbortException("Worker was terminated.")); throw new Error("Worker was terminated") } (a = e).onLoadedStream().then((function (e) { v.send("DataLoaded", { length: e.bytes.byteLength }) })) })).then(n, i) }(e); e = null })); return y }, initializeFromPort(e) { var t = new o.MessageHandler("worker", "main", e); d.setup(t, e); t.send("ready", null) } }; t.WorkerMessageHandler = d; "undefined" == typeof window && !s.isNodeJS && "undefined" != typeof self && ("function" == typeof (u = self).postMessage && "onmessage" in u) && d.initializeFromPort(self) }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.arrayByteLength = d; t.arraysToBytes = function (e) { const t = e.length; if (1 === t && e[0] instanceof Uint8Array) return e[0]; let a = 0; for (let r = 0; r < t; r++)a += d(e[r]); let r = 0; const i = new Uint8Array(a); for (let a = 0; a < t; a++) { let t = e[a]; t instanceof Uint8Array || (t = "string" == typeof t ? u(t) : new Uint8Array(t)); const n = t.byteLength; i.set(t, r); r += n } return i }; t.assert = o; t.bytesToString = function (e) { o(null !== e && "object" == typeof e && void 0 !== e.length, "Invalid argument for bytesToString"); const t = e.length; if (t < 8192) return String.fromCharCode.apply(null, e); const a = []; for (let r = 0; r < t; r += 8192) { const i = Math.min(r + 8192, t), n = e.subarray(r, i); a.push(String.fromCharCode.apply(null, n)) } return a.join("") }; t.createPromiseCapability = function () { const e = Object.create(null); let t = !1; Object.defineProperty(e, "settled", { get: () => t }); e.promise = new Promise((function (a, r) { e.resolve = function (e) { t = !0; a(e) }; e.reject = function (e) { t = !0; r(e) } })); return e }; t.getVerbosityLevel = function () { return i }; t.info = function (e) { i >= r.INFOS && console.log(`Info: ${e}`) }; t.isArrayBuffer = function (e) { return "object" == typeof e && null !== e && void 0 !== e.byteLength }; t.isArrayEqual = function (e, t) { if (e.length !== t.length) return !1; return e.every((function (e, a) { return e === t[a] })) }; t.isBool = function (e) { return "boolean" == typeof e }; t.isEmptyObj = function (e) { for (const t in e) return !1; return !0 }; t.isNum = function (e) { return "number" == typeof e }; t.isString = function (e) { return "string" == typeof e }; t.isSameOrigin = function (e, t) { let a; try { a = new URL(e); if (!a.origin || "null" === a.origin) return !1 } catch (e) { return !1 } const r = new URL(t, a); return a.origin === r.origin }; t.createValidAbsoluteUrl = function (e, t) { if (!e) return null; try { const a = t ? new URL(e, t) : new URL(e); if (function (e) { if (!e) return !1; switch (e.protocol) { case "http:": case "https:": case "ftp:": case "mailto:": case "tel:": return !0; default: return !1 } }(a)) return a } catch (e) { } return null }; t.removeNullCharacters = function (e) { if ("string" != typeof e) { n("The argument for removeNullCharacters must be a string."); return e } return e.replace(h, "") }; t.setVerbosityLevel = function (e) { Number.isInteger(e) && (i = e) }; t.shadow = c; t.string32 = function (e) { return String.fromCharCode(e >> 24 & 255, e >> 16 & 255, e >> 8 & 255, 255 & e) }; t.stringToBytes = u; t.stringToPDFString = function (e) { const t = e.length, a = []; if ("þ" === e[0] && "ÿ" === e[1]) for (let r = 2; r < t; r += 2)a.push(String.fromCharCode(e.charCodeAt(r) << 8 | e.charCodeAt(r + 1))); else if ("ÿ" === e[0] && "þ" === e[1]) for (let r = 2; r < t; r += 2)a.push(String.fromCharCode(e.charCodeAt(r + 1) << 8 | e.charCodeAt(r))); else for (let r = 0; r < t; ++r) { const t = b[e.charCodeAt(r)]; a.push(t ? String.fromCharCode(t) : e.charAt(r)) } return a.join("") }; t.stringToUTF8String = function (e) { return decodeURIComponent(escape(e)) }; t.utf8StringToString = function (e) { return unescape(encodeURIComponent(e)) }; t.warn = n; t.unreachable = s; t.IsEvalSupportedCached = t.IsLittleEndianCached = t.createObjectURL = t.FormatError = t.Util = t.UnknownErrorException = t.UnexpectedResponseException = t.TextRenderingMode = t.StreamType = t.PermissionFlag = t.PasswordResponses = t.PasswordException = t.NativeImageDecoding = t.MissingPDFException = t.InvalidPDFException = t.AbortException = t.CMapCompressionType = t.ImageKind = t.FontType = t.AnnotationType = t.AnnotationStateModelType = t.AnnotationReviewState = t.AnnotationReplyType = t.AnnotationMarkedState = t.AnnotationFlag = t.AnnotationFieldFlag = t.AnnotationBorderStyleType = t.UNSUPPORTED_FEATURES = t.VerbosityLevel = t.OPS = t.IDENTITY_MATRIX = t.FONT_IDENTITY_MATRIX = t.BaseException = void 0; a(3); t.IDENTITY_MATRIX = [1, 0, 0, 1, 0, 0]; t.FONT_IDENTITY_MATRIX = [.001, 0, 0, .001, 0, 0]; t.NativeImageDecoding = { NONE: "none", DECODE: "decode", DISPLAY: "display" }; t.PermissionFlag = { PRINT: 4, MODIFY_CONTENTS: 8, COPY: 16, MODIFY_ANNOTATIONS: 32, FILL_INTERACTIVE_FORMS: 256, COPY_FOR_ACCESSIBILITY: 512, ASSEMBLE: 1024, PRINT_HIGH_QUALITY: 2048 }; t.TextRenderingMode = { FILL: 0, STROKE: 1, FILL_STROKE: 2, INVISIBLE: 3, FILL_ADD_TO_PATH: 4, STROKE_ADD_TO_PATH: 5, FILL_STROKE_ADD_TO_PATH: 6, ADD_TO_PATH: 7, FILL_STROKE_MASK: 3, ADD_TO_PATH_FLAG: 4 }; t.ImageKind = { GRAYSCALE_1BPP: 1, RGB_24BPP: 2, RGBA_32BPP: 3 }; t.AnnotationType = { TEXT: 1, LINK: 2, FREETEXT: 3, LINE: 4, SQUARE: 5, CIRCLE: 6, POLYGON: 7, POLYLINE: 8, HIGHLIGHT: 9, UNDERLINE: 10, SQUIGGLY: 11, STRIKEOUT: 12, STAMP: 13, CARET: 14, INK: 15, POPUP: 16, FILEATTACHMENT: 17, SOUND: 18, MOVIE: 19, WIDGET: 20, SCREEN: 21, PRINTERMARK: 22, TRAPNET: 23, WATERMARK: 24, THREED: 25, REDACT: 26 }; t.AnnotationStateModelType = { MARKED: "Marked", REVIEW: "Review" }; t.AnnotationMarkedState = { MARKED: "Marked", UNMARKED: "Unmarked" }; t.AnnotationReviewState = { ACCEPTED: "Accepted", REJECTED: "Rejected", CANCELLED: "Cancelled", COMPLETED: "Completed", NONE: "None" }; t.AnnotationReplyType = { GROUP: "Group", REPLY: "R" }; t.AnnotationFlag = { INVISIBLE: 1, HIDDEN: 2, PRINT: 4, NOZOOM: 8, NOROTATE: 16, NOVIEW: 32, READONLY: 64, LOCKED: 128, TOGGLENOVIEW: 256, LOCKEDCONTENTS: 512 }; t.AnnotationFieldFlag = { READONLY: 1, REQUIRED: 2, NOEXPORT: 4, MULTILINE: 4096, PASSWORD: 8192, NOTOGGLETOOFF: 16384, RADIO: 32768, PUSHBUTTON: 65536, COMBO: 131072, EDIT: 262144, SORT: 524288, FILESELECT: 1048576, MULTISELECT: 2097152, DONOTSPELLCHECK: 4194304, DONOTSCROLL: 8388608, COMB: 16777216, RICHTEXT: 33554432, RADIOSINUNISON: 33554432, COMMITONSELCHANGE: 67108864 }; t.AnnotationBorderStyleType = { SOLID: 1, DASHED: 2, BEVELED: 3, INSET: 4, UNDERLINE: 5 }; t.StreamType = { UNKNOWN: "UNKNOWN", FLATE: "FLATE", LZW: "LZW", DCT: "DCT", JPX: "JPX", JBIG: "JBIG", A85: "A85", AHX: "AHX", CCF: "CCF", RLX: "RLX" }; t.FontType = { UNKNOWN: "UNKNOWN", TYPE1: "TYPE1", TYPE1C: "TYPE1C", CIDFONTTYPE0: "CIDFONTTYPE0", CIDFONTTYPE0C: "CIDFONTTYPE0C", TRUETYPE: "TRUETYPE", CIDFONTTYPE2: "CIDFONTTYPE2", TYPE3: "TYPE3", OPENTYPE: "OPENTYPE", TYPE0: "TYPE0", MMTYPE1: "MMTYPE1" }; const r = { ERRORS: 0, WARNINGS: 1, INFOS: 5 }; t.VerbosityLevel = r; t.CMapCompressionType = { NONE: 0, BINARY: 1, STREAM: 2 }; t.OPS = { dependency: 1, setLineWidth: 2, setLineCap: 3, setLineJoin: 4, setMiterLimit: 5, setDash: 6, setRenderingIntent: 7, setFlatness: 8, setGState: 9, save: 10, restore: 11, transform: 12, moveTo: 13, lineTo: 14, curveTo: 15, curveTo2: 16, curveTo3: 17, closePath: 18, rectangle: 19, stroke: 20, closeStroke: 21, fill: 22, eoFill: 23, fillStroke: 24, eoFillStroke: 25, closeFillStroke: 26, closeEOFillStroke: 27, endPath: 28, clip: 29, eoClip: 30, beginText: 31, endText: 32, setCharSpacing: 33, setWordSpacing: 34, setHScale: 35, setLeading: 36, setFont: 37, setTextRenderingMode: 38, setTextRise: 39, moveText: 40, setLeadingMoveText: 41, setTextMatrix: 42, nextLine: 43, showText: 44, showSpacedText: 45, nextLineShowText: 46, nextLineSetSpacingShowText: 47, setCharWidth: 48, setCharWidthAndBounds: 49, setStrokeColorSpace: 50, setFillColorSpace: 51, setStrokeColor: 52, setStrokeColorN: 53, setFillColor: 54, setFillColorN: 55, setStrokeGray: 56, setFillGray: 57, setStrokeRGBColor: 58, setFillRGBColor: 59, setStrokeCMYKColor: 60, setFillCMYKColor: 61, shadingFill: 62, beginInlineImage: 63, beginImageData: 64, endInlineImage: 65, paintXObject: 66, markPoint: 67, markPointProps: 68, beginMarkedContent: 69, beginMarkedContentProps: 70, endMarkedContent: 71, beginCompat: 72, endCompat: 73, paintFormXObjectBegin: 74, paintFormXObjectEnd: 75, beginGroup: 76, endGroup: 77, beginAnnotations: 78, endAnnotations: 79, beginAnnotation: 80, endAnnotation: 81, paintJpegXObject: 82, paintImageMaskXObject: 83, paintImageMaskXObjectGroup: 84, paintImageXObject: 85, paintInlineImageXObject: 86, paintInlineImageXObjectGroup: 87, paintImageXObjectRepeat: 88, paintImageMaskXObjectRepeat: 89, paintSolidColorImageMask: 90, constructPath: 91 }; t.UNSUPPORTED_FEATURES = { unknown: "unknown", forms: "forms", javaScript: "javaScript", smask: "smask", shadingPattern: "shadingPattern", font: "font" }; t.PasswordResponses = { NEED_PASSWORD: 1, INCORRECT_PASSWORD: 2 }; let i = r.WARNINGS; function n(e) { i >= r.WARNINGS && console.log(`Warning: ${e}`) } function s(e) { throw new Error(e) } function o(e, t) { e || s(t) } function c(e, t, a) { Object.defineProperty(e, t, { value: a, enumerable: !0, configurable: !0, writable: !1 }); return a } const l = function () { function e(t) { this.constructor === e && s("Cannot initialize BaseException."); this.message = t; this.name = this.constructor.name } e.prototype = new Error; e.constructor = e; return e }(); t.BaseException = l; t.PasswordException = class extends l { constructor(e, t) { super(e); this.code = t } }; t.UnknownErrorException = class extends l { constructor(e, t) { super(e); this.details = t } }; t.InvalidPDFException = class extends l { }; t.MissingPDFException = class extends l { }; t.UnexpectedResponseException = class extends l { constructor(e, t) { super(e); this.status = t } }; t.FormatError = class extends l { }; t.AbortException = class extends l { }; const h = /\x00/g; function u(e) { o("string" == typeof e, "Invalid argument for stringToBytes"); const t = e.length, a = new Uint8Array(t); for (let r = 0; r < t; ++r)a[r] = 255 & e.charCodeAt(r); return a } function d(e) { if (void 0 !== e.length) return e.length; o(void 0 !== e.byteLength); return e.byteLength } const f = { get value() { return c(this, "value", function () { const e = new Uint8Array(4); e[0] = 1; return 1 === new Uint32Array(e.buffer, 0, 1)[0] }()) } }; t.IsLittleEndianCached = f; const g = { get value() { return c(this, "value", function () { try { new Function(""); return !0 } catch (e) { return !1 } }()) } }; t.IsEvalSupportedCached = g; const m = ["rgb(", 0, ",", 0, ",", 0, ")"]; class p { static makeCssRgb(e, t, a) { m[1] = e; m[3] = t; m[5] = a; return m.join("") } static transform(e, t) { return [e[0] * t[0] + e[2] * t[1], e[1] * t[0] + e[3] * t[1], e[0] * t[2] + e[2] * t[3], e[1] * t[2] + e[3] * t[3], e[0] * t[4] + e[2] * t[5] + e[4], e[1] * t[4] + e[3] * t[5] + e[5]] } static applyTransform(e, t) { return [e[0] * t[0] + e[1] * t[2] + t[4], e[0] * t[1] + e[1] * t[3] + t[5]] } static applyInverseTransform(e, t) { const a = t[0] * t[3] - t[1] * t[2]; return [(e[0] * t[3] - e[1] * t[2] + t[2] * t[5] - t[4] * t[3]) / a, (-e[0] * t[1] + e[1] * t[0] + t[4] * t[1] - t[5] * t[0]) / a] } static getAxialAlignedBoundingBox(e, t) { const a = p.applyTransform(e, t), r = p.applyTransform(e.slice(2, 4), t), i = p.applyTransform([e[0], e[3]], t), n = p.applyTransform([e[2], e[1]], t); return [Math.min(a[0], r[0], i[0], n[0]), Math.min(a[1], r[1], i[1], n[1]), Math.max(a[0], r[0], i[0], n[0]), Math.max(a[1], r[1], i[1], n[1])] } static inverseTransform(e) { const t = e[0] * e[3] - e[1] * e[2]; return [e[3] / t, -e[1] / t, -e[2] / t, e[0] / t, (e[2] * e[5] - e[4] * e[3]) / t, (e[4] * e[1] - e[5] * e[0]) / t] } static apply3dTransform(e, t) { return [e[0] * t[0] + e[1] * t[1] + e[2] * t[2], e[3] * t[0] + e[4] * t[1] + e[5] * t[2], e[6] * t[0] + e[7] * t[1] + e[8] * t[2]] } static singularValueDecompose2dScale(e) { const t = [e[0], e[2], e[1], e[3]], a = e[0] * t[0] + e[1] * t[2], r = e[0] * t[1] + e[1] * t[3], i = e[2] * t[0] + e[3] * t[2], n = e[2] * t[1] + e[3] * t[3], s = (a + n) / 2, o = Math.sqrt((a + n) * (a + n) - 4 * (a * n - i * r)) / 2, c = s + o || 1, l = s - o || 1; return [Math.sqrt(c), Math.sqrt(l)] } static normalizeRect(e) { const t = e.slice(0); if (e[0] > e[2]) { t[0] = e[2]; t[2] = e[0] } if (e[1] > e[3]) { t[1] = e[3]; t[3] = e[1] } return t } static intersect(e, t) { function a(e, t) { return e - t } const r = [e[0], e[2], t[0], t[2]].sort(a), i = [e[1], e[3], t[1], t[3]].sort(a), n = []; e = p.normalizeRect(e); t = p.normalizeRect(t); if (!(r[0] === e[0] && r[1] === t[0] || r[0] === t[0] && r[1] === e[0])) return null; n[0] = r[1]; n[2] = r[2]; if (!(i[0] === e[1] && i[1] === t[1] || i[0] === t[1] && i[1] === e[1])) return null; n[1] = i[1]; n[3] = i[2]; return n } } t.Util = p; const b = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 728, 711, 710, 729, 733, 731, 730, 732, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8226, 8224, 8225, 8230, 8212, 8211, 402, 8260, 8249, 8250, 8722, 8240, 8222, 8220, 8221, 8216, 8217, 8218, 8482, 64257, 64258, 321, 338, 352, 376, 381, 305, 322, 339, 353, 382, 0, 8364]; const y = function () { const e = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; return function (t, a, r = !1) { if (!r && URL.createObjectURL) { const e = new Blob([t], { type: a }); return URL.createObjectURL(e) } let i = `data:${a};base64,`; for (let a = 0, r = t.length; a < r; a += 3) { const n = 255 & t[a], s = 255 & t[a + 1], o = 255 & t[a + 2]; i += e[n >> 2] + e[(3 & n) << 4 | s >> 4] + e[a + 1 < r ? (15 & s) << 2 | o >> 6 : 64] + e[a + 2 < r ? 63 & o : 64] } return i } }(); t.createObjectURL = y }, function (e, t, a) { }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.clearPrimitiveCaches = function () { n._clearCache(); i._clearCache(); o._clearCache() }; t.isEOF = function (e) { return e === r }; t.isCmd = function (e, t) { return e instanceof n && (void 0 === t || e.cmd === t) }; t.isDict = u; t.isName = h; t.isRef = function (e) { return e instanceof o }; t.isRefsEqual = function (e, t) { return e.num === t.num && e.gen === t.gen }; t.isStream = function (e) { return "object" == typeof e && null !== e && void 0 !== e.getBytes }; t.RefSetCache = t.RefSet = t.Ref = t.Name = t.Dict = t.Cmd = t.EOF = void 0; a(2); var r = {}; t.EOF = r; var i = function () { let e = Object.create(null); function t(e) { this.name = e } t.prototype = {}; t.get = function (a) { var r = e[a]; return r || (e[a] = new t(a)) }; t._clearCache = function () { e = Object.create(null) }; return t }(); t.Name = i; var n = function () { let e = Object.create(null); function t(e) { this.cmd = e } t.prototype = {}; t.get = function (a) { var r = e[a]; return r || (e[a] = new t(a)) }; t._clearCache = function () { e = Object.create(null) }; return t }(); t.Cmd = n; var s = function () { var e = function () { return e }; function t(t) { this._map = Object.create(null); this.xref = t; this.objId = null; this.suppressEncryption = !1; this.__nonSerializable__ = e } t.prototype = { assignXref: function (e) { this.xref = e }, get(e, t, a) { let r = this._map[e]; if (void 0 === r && void 0 !== t) { r = this._map[t]; void 0 === r && void 0 !== a && (r = this._map[a]) } return r instanceof o && this.xref ? this.xref.fetch(r, this.suppressEncryption) : r }, async getAsync(e, t, a) { let r = this._map[e]; if (void 0 === r && void 0 !== t) { r = this._map[t]; void 0 === r && void 0 !== a && (r = this._map[a]) } return r instanceof o && this.xref ? this.xref.fetchAsync(r, this.suppressEncryption) : r }, getArray(e, t, a) { let r = this.get(e, t, a); if (!Array.isArray(r) || !this.xref) return r; r = r.slice(); for (let e = 0, t = r.length; e < t; e++)r[e] instanceof o && (r[e] = this.xref.fetch(r[e], this.suppressEncryption)); return r }, getRaw: function (e) { return this._map[e] }, getKeys: function () { return Object.keys(this._map) }, set: function (e, t) { this._map[e] = t }, has: function (e) { return void 0 !== this._map[e] }, forEach: function (e) { for (var t in this._map) e(t, this.get(t)) } }; t.empty = new t(null); t.merge = function (e, a) { const r = new t(e); for (let e = 0, t = a.length; e < t; e++) { const t = a[e]; if (u(t)) for (const e in t._map) void 0 === r._map[e] && (r._map[e] = t._map[e]) } return r }; return t }(); t.Dict = s; var o = function () { let e = Object.create(null); function t(e, t) { this.num = e; this.gen = t } t.prototype = { toString: function () { return 0 === this.gen ? `${this.num}R` : `${this.num}R${this.gen}` } }; t.get = function (a, r) { const i = 0 === r ? `${a}R` : `${a}R${r}`, n = e[i]; return n || (e[i] = new t(a, r)) }; t._clearCache = function () { e = Object.create(null) }; return t }(); t.Ref = o; var c = function () { function e() { this.dict = Object.create(null) } e.prototype = { has: function (e) { return e.toString() in this.dict }, put: function (e) { this.dict[e.toString()] = !0 }, remove: function (e) { delete this.dict[e.toString()] } }; return e }(); t.RefSet = c; var l = function () { function e() { this.dict = Object.create(null) } e.prototype = { get: function (e) { return this.dict[e.toString()] }, has: function (e) { return e.toString() in this.dict }, put: function (e, t) { this.dict[e.toString()] = t }, putAlias: function (e, t) { this.dict[e.toString()] = this.get(t) }, forEach: function (e) { for (const t in this.dict) e(this.dict[t]) }, clear: function () { this.dict = Object.create(null) } }; return e }(); t.RefSetCache = l; function h(e, t) { return e instanceof i && (void 0 === t || e.name === t) } function u(e, t) { return e instanceof s && (void 0 === t || h(e.get("Type"), t)) } }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.NetworkPdfManager = t.LocalPdfManager = void 0; var r = a(2), i = a(6), n = a(7), s = a(8), o = a(11); class c { constructor() { this.constructor === c && (0, r.unreachable)("Cannot initialize BasePdfManager.") } get docId() { return this._docId } get password() { return this._password } get docBaseUrl() { let e = null; if (this._docBaseUrl) { const t = (0, r.createValidAbsoluteUrl)(this._docBaseUrl); t ? e = t.href : (0, r.warn)(`Invalid absolute docBaseUrl: "${this._docBaseUrl}".`) } return (0, r.shadow)(this, "docBaseUrl", e) } onLoadedStream() { (0, r.unreachable)("Abstract method `onLoadedStream` called") } ensureDoc(e, t) { return this.ensure(this.pdfDocument, e, t) } ensureXRef(e, t) { return this.ensure(this.pdfDocument.xref, e, t) } ensureCatalog(e, t) { return this.ensure(this.pdfDocument.catalog, e, t) } getPage(e) { return this.pdfDocument.getPage(e) } fontFallback(e, t) { return this.pdfDocument.fontFallback(e, t) } cleanup() { return this.pdfDocument.cleanup() } async ensure(e, t, a) { (0, r.unreachable)("Abstract method `ensure` called") } requestRange(e, t) { (0, r.unreachable)("Abstract method `requestRange` called") } requestLoadedStream() { (0, r.unreachable)("Abstract method `requestLoadedStream` called") } sendProgressiveData(e) { (0, r.unreachable)("Abstract method `sendProgressiveData` called") } updatePassword(e) { this._password = e } terminate(e) { (0, r.unreachable)("Abstract method `terminate` called") } } t.LocalPdfManager = class extends c { constructor(e, t, a, r, i) { super(); this._docId = e; this._password = a; this._docBaseUrl = i; this.evaluatorOptions = r; const n = new o.Stream(t); this.pdfDocument = new s.PDFDocument(this, n); this._loadedStreamPromise = Promise.resolve(n) } async ensure(e, t, a) { const r = e[t]; return "function" == typeof r ? r.apply(e, a) : r } requestRange(e, t) { return Promise.resolve() } requestLoadedStream() { } onLoadedStream() { return this._loadedStreamPromise } terminate(e) { } }; t.NetworkPdfManager = class extends c { constructor(e, t, a, r, n) { super(); this._docId = e; this._password = a.password; this._docBaseUrl = n; this.msgHandler = a.msgHandler; this.evaluatorOptions = r; this.streamManager = new i.ChunkedStreamManager(t, { msgHandler: a.msgHandler, length: a.length, disableAutoFetch: a.disableAutoFetch, rangeChunkSize: a.rangeChunkSize }); this.pdfDocument = new s.PDFDocument(this, this.streamManager.getStream()) } async ensure(e, t, a) { try { const r = e[t]; return "function" == typeof r ? r.apply(e, a) : r } catch (r) { if (!(r instanceof n.MissingDataException)) throw r; await this.requestRange(r.begin, r.end); return this.ensure(e, t, a) } } requestRange(e, t) { return this.streamManager.requestRange(e, t) } requestLoadedStream() { this.streamManager.requestAllChunks() } sendProgressiveData(e) { this.streamManager.onReceiveData({ chunk: e }) } onLoadedStream() { return this.streamManager.onLoadedStream() } terminate(e) { this.streamManager.abort(e) } } }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.ChunkedStreamManager = t.ChunkedStream = void 0; var r = a(2), i = a(7); class n { constructor(e, t, a) { this.bytes = new Uint8Array(e); this.start = 0; this.pos = 0; this.end = e; this.chunkSize = t; this.loadedChunks = []; this.numChunksLoaded = 0; this.numChunks = Math.ceil(e / t); this.manager = a; this.progressiveDataLength = 0; this.lastSuccessfulEnsureByteChunk = -1 } getMissingChunks() { const e = []; for (let t = 0, a = this.numChunks; t < a; ++t)this.loadedChunks[t] || e.push(t); return e } getBaseStreams() { return [this] } allChunksLoaded() { return this.numChunksLoaded === this.numChunks } onReceiveData(e, t) { const a = this.chunkSize; if (e % a != 0) throw new Error(`Bad begin offset: ${e}`); const r = e + t.byteLength; if (r % a != 0 && r !== this.bytes.length) throw new Error(`Bad end offset: ${r}`); this.bytes.set(new Uint8Array(t), e); const i = Math.floor(e / a), n = Math.floor((r - 1) / a) + 1; for (let e = i; e < n; ++e)if (!this.loadedChunks[e]) { this.loadedChunks[e] = !0; ++this.numChunksLoaded } } onReceiveProgressiveData(e) { let t = this.progressiveDataLength; const a = Math.floor(t / this.chunkSize); this.bytes.set(new Uint8Array(e), t); t += e.byteLength; this.progressiveDataLength = t; const r = t >= this.end ? this.numChunks : Math.floor(t / this.chunkSize); for (let e = a; e < r; ++e)if (!this.loadedChunks[e]) { this.loadedChunks[e] = !0; ++this.numChunksLoaded } } ensureByte(e) { if (e < this.progressiveDataLength) return; const t = Math.floor(e / this.chunkSize); if (t !== this.lastSuccessfulEnsureByteChunk) { if (!this.loadedChunks[t]) throw new i.MissingDataException(e, e + 1); this.lastSuccessfulEnsureByteChunk = t } } ensureRange(e, t) { if (e >= t) return; if (t <= this.progressiveDataLength) return; const a = this.chunkSize, r = Math.floor(e / a), n = Math.floor((t - 1) / a) + 1; for (let a = r; a < n; ++a)if (!this.loadedChunks[a]) throw new i.MissingDataException(e, t) } nextEmptyChunk(e) { const t = this.numChunks; for (let a = 0; a < t; ++a) { const r = (e + a) % t; if (!this.loadedChunks[r]) return r } return null } hasChunk(e) { return !!this.loadedChunks[e] } get length() { return this.end - this.start } get isEmpty() { return 0 === this.length } getByte() { const e = this.pos; if (e >= this.end) return -1; e >= this.progressiveDataLength && this.ensureByte(e); return this.bytes[this.pos++] } getUint16() { const e = this.getByte(), t = this.getByte(); return -1 === e || -1 === t ? -1 : (e << 8) + t } getInt32() { return (this.getByte() << 24) + (this.getByte() << 16) + (this.getByte() << 8) + this.getByte() } getBytes(e, t = !1) { const a = this.bytes, r = this.pos, i = this.end; if (!e) { i > this.progressiveDataLength && this.ensureRange(r, i); const e = a.subarray(r, i); return t ? new Uint8ClampedArray(e) : e } let n = r + e; n > i && (n = i); n > this.progressiveDataLength && this.ensureRange(r, n); this.pos = n; const s = a.subarray(r, n); return t ? new Uint8ClampedArray(s) : s } peekByte() { const e = this.getByte(); -1 !== e && this.pos--; return e } peekBytes(e, t = !1) { const a = this.getBytes(e, t); this.pos -= a.length; return a } getByteRange(e, t) { e < 0 && (e = 0); t > this.end && (t = this.end); t > this.progressiveDataLength && this.ensureRange(e, t); return this.bytes.subarray(e, t) } skip(e) { e || (e = 1); this.pos += e } reset() { this.pos = this.start } moveStart() { this.start = this.pos } makeSubStream(e, t, a) { t ? e + t > this.progressiveDataLength && this.ensureRange(e, e + t) : e >= this.progressiveDataLength && this.ensureByte(e); function r() { } r.prototype = Object.create(this); r.prototype.getMissingChunks = function () { const e = this.chunkSize, t = Math.floor(this.start / e), a = Math.floor((this.end - 1) / e) + 1, r = []; for (let e = t; e < a; ++e)this.loadedChunks[e] || r.push(e); return r }; r.prototype.allChunksLoaded = function () { return this.numChunksLoaded === this.numChunks || 0 === this.getMissingChunks().length }; const i = new r; i.pos = i.start = e; i.end = e + t || this.end; i.dict = a; return i } } t.ChunkedStream = n; t.ChunkedStreamManager = class { constructor(e, t) { this.length = t.length; this.chunkSize = t.rangeChunkSize; this.stream = new n(this.length, this.chunkSize, this); this.pdfNetworkStream = e; this.disableAutoFetch = t.disableAutoFetch; this.msgHandler = t.msgHandler; this.currRequestId = 0; this.chunksNeededByRequest = Object.create(null); this.requestsByChunk = Object.create(null); this.promisesByRequest = Object.create(null); this.progressiveDataLength = 0; this.aborted = !1; this._loadedStreamCapability = (0, r.createPromiseCapability)() } onLoadedStream() { return this._loadedStreamCapability.promise } sendRequest(e, t) { const a = this.pdfNetworkStream.getRangeReader(e, t); a.isStreamingSupported || (a.onProgress = this.onProgress.bind(this)); let i = [], n = 0; new Promise((e, t) => { const s = o => { try { if (!o.done) { const e = o.value; i.push(e); n += (0, r.arrayByteLength)(e); a.isStreamingSupported && this.onProgress({ loaded: n }); a.read().then(s, t); return } const c = (0, r.arraysToBytes)(i); i = null; e(c) } catch (e) { t(e) } }; a.read().then(s, t) }).then(t => { this.aborted || this.onReceiveData({ chunk: t, begin: e }) }) } requestAllChunks() { const e = this.stream.getMissingChunks(); this._requestChunks(e); return this._loadedStreamCapability.promise } _requestChunks(e) { const t = this.currRequestId++, a = Object.create(null); this.chunksNeededByRequest[t] = a; for (const t of e) this.stream.hasChunk(t) || (a[t] = !0); if ((0, r.isEmptyObj)(a)) return Promise.resolve(); const i = (0, r.createPromiseCapability)(); this.promisesByRequest[t] = i; const n = []; for (let e in a) { e |= 0; if (!(e in this.requestsByChunk)) { this.requestsByChunk[e] = []; n.push(e) } this.requestsByChunk[e].push(t) } if (!n.length) return i.promise; const s = this.groupChunks(n); for (const e of s) { const t = e.beginChunk * this.chunkSize, a = Math.min(e.endChunk * this.chunkSize, this.length); this.sendRequest(t, a) } return i.promise } getStream() { return this.stream } requestRange(e, t) { t = Math.min(t, this.length); const a = this.getBeginChunk(e), r = this.getEndChunk(t), i = []; for (let e = a; e < r; ++e)i.push(e); return this._requestChunks(i) } requestRanges(e = []) { const t = []; for (const a of e) { const e = this.getBeginChunk(a.begin), r = this.getEndChunk(a.end); for (let a = e; a < r; ++a)t.includes(a) || t.push(a) } t.sort((function (e, t) { return e - t })); return this._requestChunks(t) } groupChunks(e) { const t = []; let a = -1, r = -1; for (let i = 0, n = e.length; i < n; ++i) { const n = e[i]; a < 0 && (a = n); if (r >= 0 && r + 1 !== n) { t.push({ beginChunk: a, endChunk: r + 1 }); a = n } i + 1 === e.length && t.push({ beginChunk: a, endChunk: n + 1 }); r = n } return t } onProgress(e) { this.msgHandler.send("DocProgress", { loaded: this.stream.numChunksLoaded * this.chunkSize + e.loaded, total: this.length }) } onReceiveData(e) { const t = e.chunk, a = void 0 === e.begin, i = a ? this.progressiveDataLength : e.begin, n = i + t.byteLength, s = Math.floor(i / this.chunkSize), o = n < this.length ? Math.floor(n / this.chunkSize) : Math.ceil(n / this.chunkSize); if (a) { this.stream.onReceiveProgressiveData(t); this.progressiveDataLength = n } else this.stream.onReceiveData(i, t); this.stream.allChunksLoaded() && this._loadedStreamCapability.resolve(this.stream); const c = []; for (let e = s; e < o; ++e) { const t = this.requestsByChunk[e] || []; delete this.requestsByChunk[e]; for (const a of t) { const t = this.chunksNeededByRequest[a]; e in t && delete t[e]; (0, r.isEmptyObj)(t) && c.push(a) } } if (!this.disableAutoFetch && (0, r.isEmptyObj)(this.requestsByChunk)) { let e; if (1 === this.stream.numChunksLoaded) { const t = this.stream.numChunks - 1; this.stream.hasChunk(t) || (e = t) } else e = this.stream.nextEmptyChunk(o); Number.isInteger(e) && this._requestChunks([e]) } for (const e of c) { const t = this.promisesByRequest[e]; delete this.promisesByRequest[e]; t.resolve() } this.msgHandler.send("DocProgress", { loaded: this.stream.numChunksLoaded * this.chunkSize, total: this.length }) } onError(e) { this._loadedStreamCapability.reject(e) } getBeginChunk(e) { return Math.floor(e / this.chunkSize) } getEndChunk(e) { return Math.floor((e - 1) / this.chunkSize) + 1 } abort(e) { this.aborted = !0; this.pdfNetworkStream && this.pdfNetworkStream.cancelAllRequests(e); for (const t in this.promisesByRequest) this.promisesByRequest[t].reject(e) } } }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.getLookupTableFactory = function (e) { let t; return function () { if (e) { t = Object.create(null); e(t); e = null } return t } }; t.getInheritableProperty = function ({ dict: e, key: t, getArray: a = !1, stopWhenFound: i = !0 }) { let n, s = 0; for (; e;) { const o = a ? e.getArray(t) : e.get(t); if (void 0 !== o) { if (i) return o; n || (n = []); n.push(o) } if (++s > 100) { (0, r.warn)(`getInheritableProperty: maximum loop count exceeded for "${t}"`); break } e = e.get("Parent") } return n }; t.toRomanNumerals = function (e, t = !1) { (0, r.assert)(Number.isInteger(e) && e > 0, "The number should be a positive integer."); const a = []; let i; for (; e >= 1e3;) { e -= 1e3; a.push("M") } i = e / 100 | 0; e %= 100; a.push(o[i]); i = e / 10 | 0; e %= 10; a.push(o[10 + i]); a.push(o[20 + e]); const n = a.join(""); return t ? n.toLowerCase() : n }; t.log2 = function (e) { if (e <= 0) return 0; return Math.ceil(Math.log2(e)) }; t.readInt8 = function (e, t) { return e[t] << 24 >> 24 }; t.readUint16 = function (e, t) { return e[t] << 8 | e[t + 1] }; t.readUint32 = function (e, t) { return (e[t] << 24 | e[t + 1] << 16 | e[t + 2] << 8 | e[t + 3]) >>> 0 }; t.isWhiteSpace = function (e) { return 32 === e || 9 === e || 13 === e || 10 === e }; t.XRefParseException = t.XRefEntryException = t.MissingDataException = void 0; var r = a(2); class i extends r.BaseException { constructor(e, t) { super(`Missing data [${e}, ${t})`); this.begin = e; this.end = t } } t.MissingDataException = i; class n extends r.BaseException { } t.XRefEntryException = n; class s extends r.BaseException { } t.XRefParseException = s; const o = ["", "C", "CC", "CCC", "CD", "D", "DC", "DCC", "DCCC", "CM", "", "X", "XX", "XXX", "XL", "L", "LX", "LXX", "LXXX", "XC", "", "I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX"] }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.PDFDocument = t.Page = void 0; var r = a(2), i = a(9), n = a(4), s = a(7), o = a(11), c = a(23), l = a(21), h = a(10), u = a(24), d = a(25), f = a(39); const g = [0, 0, 612, 792]; function m(e, t) { return "display" === t && e.viewable || "print" === t && e.printable } class p { constructor({ pdfManager: e, xref: t, pageIndex: a, pageDict: r, ref: i, fontCache: n, builtInCMapCache: s, pdfFunctionFactory: o }) { this.pdfManager = e; this.pageIndex = a; this.pageDict = r; this.xref = t; this.ref = i; this.fontCache = n; this.builtInCMapCache = s; this.pdfFunctionFactory = o; this.evaluatorOptions = e.evaluatorOptions; this.resourcesPromise = null; const c = { obj: 0 }; this.idFactory = { createObjId: () => `p${a}_${++c.obj}`, getDocId: () => `g_${e.docId}` } } _getInheritableProperty(e, t = !1) { const a = (0, s.getInheritableProperty)({ dict: this.pageDict, key: e, getArray: t, stopWhenFound: !1 }); return Array.isArray(a) ? 1 !== a.length && (0, n.isDict)(a[0]) ? n.Dict.merge(this.xref, a) : a[0] : a } get content() { return this.pageDict.get("Contents") } get resources() { return (0, r.shadow)(this, "resources", this._getInheritableProperty("Resources") || n.Dict.empty) } _getBoundingBox(e) { const t = this._getInheritableProperty(e, !0); if (Array.isArray(t) && 4 === t.length) { if (t[2] - t[0] != 0 && t[3] - t[1] != 0) return t; (0, r.warn)(`Empty /${e} entry.`) } return null } get mediaBox() { return (0, r.shadow)(this, "mediaBox", this._getBoundingBox("MediaBox") || g) } get cropBox() { return (0, r.shadow)(this, "cropBox", this._getBoundingBox("CropBox") || this.mediaBox) } get userUnit() { let e = this.pageDict.get("UserUnit"); (!(0, r.isNum)(e) || e <= 0) && (e = 1); return (0, r.shadow)(this, "userUnit", e) } get view() { const { cropBox: e, mediaBox: t } = this; let a; if (e === t || (0, r.isArrayEqual)(e, t)) a = t; else { const i = r.Util.intersect(e, t); i && i[2] - i[0] != 0 && i[3] - i[1] != 0 ? a = i : (0, r.warn)("Empty /CropBox and /MediaBox intersection.") } return (0, r.shadow)(this, "view", a || t) } get rotate() { let e = this._getInheritableProperty("Rotate") || 0; e % 90 != 0 ? e = 0 : e >= 360 ? e %= 360 : e < 0 && (e = (e % 360 + 360) % 360); return (0, r.shadow)(this, "rotate", e) } getContentStream() { const e = this.content; let t; if (Array.isArray(e)) { const a = this.xref, r = []; for (const t of e) r.push(a.fetchIfRef(t)); t = new o.StreamsSequenceStream(r) } else t = (0, n.isStream)(e) ? e : new o.NullStream; return t } loadResources(e) { this.resourcesPromise || (this.resourcesPromise = this.pdfManager.ensure(this, "resources")); return this.resourcesPromise.then(() => new i.ObjectLoader(this.resources, e, this.xref).load()) } getOperatorList({ handler: e, sink: t, task: a, intent: i, renderInteractiveForms: n }) { const s = this.pdfManager.ensure(this, "getContentStream"), o = this.loadResources(["ExtGState", "ColorSpace", "Pattern", "Shading", "XObject", "Font"]), c = new d.PartialEvaluator({ xref: this.xref, handler: e, pageIndex: this.pageIndex, idFactory: this.idFactory, fontCache: this.fontCache, builtInCMapCache: this.builtInCMapCache, options: this.evaluatorOptions, pdfFunctionFactory: this.pdfFunctionFactory }), l = Promise.all([s, o]).then(([r]) => { const n = new u.OperatorList(i, t, this.pageIndex); e.send("StartRenderPage", { transparency: c.hasBlendModes(this.resources), pageIndex: this.pageIndex, intent: i }); return c.getOperatorList({ stream: r, task: a, resources: this.resources, operatorList: n }).then((function () { return n })) }); return Promise.all([l, this._parsedAnnotations]).then((function ([e, t]) { if (0 === t.length) { e.flush(!0); return { length: e.totalLength } } const s = []; for (const e of t) m(e, i) && s.push(e.getOperatorList(c, a, n)); return Promise.all(s).then((function (t) { e.addOp(r.OPS.beginAnnotations, []); for (const a of t) e.addOpList(a); e.addOp(r.OPS.endAnnotations, []); e.flush(!0); return { length: e.totalLength } })) })) } extractTextContent({ handler: e, task: t, normalizeWhitespace: a, sink: r, combineTextItems: i }) { const n = this.pdfManager.ensure(this, "getContentStream"), s = this.loadResources(["ExtGState", "XObject", "Font"]); return Promise.all([n, s]).then(([n]) => new d.PartialEvaluator({ xref: this.xref, handler: e, pageIndex: this.pageIndex, idFactory: this.idFactory, fontCache: this.fontCache, builtInCMapCache: this.builtInCMapCache, options: this.evaluatorOptions, pdfFunctionFactory: this.pdfFunctionFactory }).getTextContent({ stream: n, task: t, resources: this.resources, normalizeWhitespace: a, combineTextItems: i, sink: r })) } getAnnotationsData(e) { return this._parsedAnnotations.then((function (t) { const a = []; for (let r = 0, i = t.length; r < i; r++)e && !m(t[r], e) || a.push(t[r].data); return a })) } get annotations() { return (0, r.shadow)(this, "annotations", this._getInheritableProperty("Annots") || []) } get _parsedAnnotations() { const e = this.pdfManager.ensure(this, "annotations").then(() => { const e = this.annotations, t = []; for (let a = 0, r = e.length; a < r; a++)t.push(c.AnnotationFactory.create(this.xref, e[a], this.pdfManager, this.idFactory)); return Promise.all(t).then((function (e) { return e.filter((function (e) { return !!e })) }), (function (e) { (0, r.warn)(`_parsedAnnotations: "${e}".`); return [] })) }); return (0, r.shadow)(this, "_parsedAnnotations", e) } } t.Page = p; const b = new Uint8Array([37, 80, 68, 70, 45]), y = new Uint8Array([115, 116, 97, 114, 116, 120, 114, 101, 102]), v = new Uint8Array([101, 110, 100, 111, 98, 106]), w = /^[1-9]\.[0-9]$/; function k(e, t, a = 1024, r = !1) { const i = t.length, n = e.peekBytes(a), s = n.length - i; if (s <= 0) return !1; if (r) { const a = i - 1; let r = n.length - 1; for (; r >= a;) { let s = 0; for (; s < i && n[r - s] === t[a - s];)s++; if (s >= i) { e.pos += r - a; return !0 } r-- } } else { let a = 0; for (; a <= s;) { let r = 0; for (; r < i && n[a + r] === t[r];)r++; if (r >= i) { e.pos += a; return !0 } a++ } } return !1 } t.PDFDocument = class { constructor(e, t) { let a; if ((0, n.isStream)(t)) a = t; else { if (!(0, r.isArrayBuffer)(t)) throw new Error("PDFDocument: Unknown argument type"); a = new o.Stream(t) } if (a.length <= 0) throw new r.InvalidPDFException("The PDF file is empty, i.e. its size is zero bytes."); this.pdfManager = e; this.stream = a; this.xref = new i.XRef(a, e); this.pdfFunctionFactory = new f.PDFFunctionFactory({ xref: this.xref, isEvalSupported: e.evaluatorOptions.isEvalSupported }); this._pagePromises = [] } parse(e) { this.setup(e); const t = this.catalog.catDict.get("Version"); (0, n.isName)(t) && (this.pdfFormatVersion = t.name); try { this.acroForm = this.catalog.catDict.get("AcroForm"); if (this.acroForm) { this.xfa = this.acroForm.get("XFA"); const e = this.acroForm.get("Fields"); Array.isArray(e) && 0 !== e.length || this.xfa || (this.acroForm = null) } } catch (e) { if (e instanceof s.MissingDataException) throw e; (0, r.info)("Cannot fetch AcroForm entry; assuming no AcroForms are present"); this.acroForm = null } try { const e = this.catalog.catDict.get("Collection"); (0, n.isDict)(e) && e.getKeys().length > 0 && (this.collection = e) } catch (e) { if (e instanceof s.MissingDataException) throw e; (0, r.info)("Cannot fetch Collection dictionary.") } } get linearization() { let e = null; try { e = h.Linearization.create(this.stream) } catch (e) { if (e instanceof s.MissingDataException) throw e; (0, r.info)(e) } return (0, r.shadow)(this, "linearization", e) } get startXRef() { const e = this.stream; let t = 0; if (this.linearization) { e.reset(); k(e, v) && (t = e.pos + 6 - e.start) } else { const a = 1024, r = y.length; let i = !1, n = e.end; for (; !i && n > 0;) { n -= a - r; n < 0 && (n = 0); e.pos = n; i = k(e, y, a, !0) } if (i) { e.skip(9); let a; do { a = e.getByte() } while ((0, s.isWhiteSpace)(a)); let r = ""; for (; a >= 32 && a <= 57;) { r += String.fromCharCode(a); a = e.getByte() } t = parseInt(r, 10); isNaN(t) && (t = 0) } } return (0, r.shadow)(this, "startXRef", t) } checkHeader() { const e = this.stream; e.reset(); if (!k(e, b)) return; e.moveStart(); let t, a = ""; for (; (t = e.getByte()) > 32 && !(a.length >= 12);)a += String.fromCharCode(t); this.pdfFormatVersion || (this.pdfFormatVersion = a.substring(5)) } parseStartXRef() { this.xref.setStartXRef(this.startXRef) } setup(e) { this.xref.parse(e); this.catalog = new i.Catalog(this.pdfManager, this.xref) } get numPages() { const e = this.linearization, t = e ? e.numPages : this.catalog.numPages; return (0, r.shadow)(this, "numPages", t) } get documentInfo() { const e = { Title: r.isString, Author: r.isString, Subject: r.isString, Keywords: r.isString, Creator: r.isString, Producer: r.isString, CreationDate: r.isString, ModDate: r.isString, Trapped: n.isName }; let t = this.pdfFormatVersion; if ("string" != typeof t || !w.test(t)) { (0, r.warn)(`Invalid PDF header version number: ${t}`); t = null } const a = { PDFFormatVersion: t, IsLinearized: !!this.linearization, IsAcroFormPresent: !!this.acroForm, IsXFAPresent: !!this.xfa, IsCollectionPresent: !!this.collection }; let i; try { i = this.xref.trailer.get("Info") } catch (e) { if (e instanceof s.MissingDataException) throw e; (0, r.info)("The document information dictionary is invalid.") } if ((0, n.isDict)(i)) for (const t of i.getKeys()) { const s = i.get(t); if (e[t]) e[t](s) ? a[t] = "string" != typeof s ? s : (0, r.stringToPDFString)(s) : (0, r.info)(`Bad value in document info for "${t}".`); else if ("string" == typeof t) { let e; if ((0, r.isString)(s)) e = (0, r.stringToPDFString)(s); else { if (!((0, n.isName)(s) || (0, r.isNum)(s) || (0, r.isBool)(s))) { (0, r.info)(`Unsupported value in document info for (custom) "${t}".`); continue } e = s } a.Custom || (a.Custom = Object.create(null)); a.Custom[t] = e } } return (0, r.shadow)(this, "documentInfo", a) } get fingerprint() { let e; const t = this.xref.trailer.get("ID"); e = Array.isArray(t) && t[0] && (0, r.isString)(t[0]) && "\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0" !== t[0] ? (0, r.stringToBytes)(t[0]) : (0, l.calculateMD5)(this.stream.getByteRange(0, 1024), 0, 1024); const a = []; for (let t = 0, r = e.length; t < r; t++) { const r = e[t].toString(16); a.push(r.padStart(2, "0")) } return (0, r.shadow)(this, "fingerprint", a.join("")) } _getLinearizationPage(e) { const { catalog: t, linearization: a } = this; (0, r.assert)(a && a.pageFirst === e); const i = n.Ref.get(a.objectNumberFirst, 0); return this.xref.fetchAsync(i).then(e => { if ((0, n.isDict)(e, "Page") || (0, n.isDict)(e) && !e.has("Type") && e.has("Contents")) { i && !t.pageKidsCountCache.has(i) && t.pageKidsCountCache.put(i, 1); return [e, i] } throw new r.FormatError("The Linearization dictionary doesn't point to a valid Page dictionary.") }).catch(a => { (0, r.info)(a); return t.getPageDict(e) }) } getPage(e) { if (void 0 !== this._pagePromises[e]) return this._pagePromises[e]; const { catalog: t, linearization: a } = this, r = a && a.pageFirst === e ? this._getLinearizationPage(e) : t.getPageDict(e); return this._pagePromises[e] = r.then(([a, r]) => new p({ pdfManager: this.pdfManager, xref: this.xref, pageIndex: e, pageDict: a, ref: r, fontCache: t.fontCache, builtInCMapCache: t.builtInCMapCache, pdfFunctionFactory: this.pdfFunctionFactory })) } checkFirstPage() { return this.getPage(0).catch(async e => { if (e instanceof s.XRefEntryException) { this._pagePromises.length = 0; await this.cleanup(); throw new s.XRefParseException } }) } fontFallback(e, t) { return this.catalog.fontFallback(e, t) } async cleanup() { return this.catalog ? this.catalog.cleanup() : (0, n.clearPrimitiveCaches)() } } }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.FileSpec = t.XRef = t.ObjectLoader = t.Catalog = void 0; var r = a(2), i = a(4), n = a(10), s = a(7), o = a(21), c = a(22); function l(e) { return (0, i.isDict)(e) ? e.get("D") : e } class h { constructor(e, t) { this.pdfManager = e; this.xref = t; this.catDict = t.getCatalogObj(); if (!(0, i.isDict)(this.catDict)) throw new r.FormatError("Catalog object is not a dictionary."); this.fontCache = new i.RefSetCache; this.builtInCMapCache = new Map; this.pageKidsCountCache = new i.RefSetCache } get metadata() { const e = this.catDict.getRaw("Metadata"); if (!(0, i.isRef)(e)) return (0, r.shadow)(this, "metadata", null); const t = !(this.xref.encrypt && this.xref.encrypt.encryptMetadata), a = this.xref.fetch(e, t); let n; if (a && (0, i.isDict)(a.dict)) { const e = a.dict.get("Type"), t = a.dict.get("Subtype"); if ((0, i.isName)(e, "Metadata") && (0, i.isName)(t, "XML")) try { n = (0, r.stringToUTF8String)((0, r.bytesToString)(a.getBytes())) } catch (e) { if (e instanceof s.MissingDataException) throw e; (0, r.info)("Skipping invalid metadata.") } } return (0, r.shadow)(this, "metadata", n) } get toplevelPagesDict() { const e = this.catDict.get("Pages"); if (!(0, i.isDict)(e)) throw new r.FormatError("Invalid top-level pages dictionary."); return (0, r.shadow)(this, "toplevelPagesDict", e) } get documentOutline() { let e = null; try { e = this._readDocumentOutline() } catch (e) { if (e instanceof s.MissingDataException) throw e; (0, r.warn)("Unable to read document outline.") } return (0, r.shadow)(this, "documentOutline", e) } _readDocumentOutline() { let e = this.catDict.get("Outlines"); if (!(0, i.isDict)(e)) return null; e = e.getRaw("First"); if (!(0, i.isRef)(e)) return null; const t = { items: [] }, a = [{ obj: e, parent: t }], n = new i.RefSet; n.put(e); const s = this.xref, o = new Uint8ClampedArray(3); for (; a.length > 0;) { const t = a.shift(), l = s.fetchIfRef(t.obj); if (null === l) continue; if (!l.has("Title")) throw new r.FormatError("Invalid outline item encountered."); const u = { url: null, dest: null }; h.parseDestDictionary({ destDict: l, resultObj: u, docBaseUrl: this.pdfManager.docBaseUrl }); const d = l.get("Title"), f = l.get("F") || 0, g = l.getArray("C"), m = l.get("Count"); let p = o; !Array.isArray(g) || 3 !== g.length || 0 === g[0] && 0 === g[1] && 0 === g[2] || (p = c.ColorSpace.singletons.rgb.getRgb(g, 0)); const b = { dest: u.dest, url: u.url, unsafeUrl: u.unsafeUrl, newWindow: u.newWindow, title: (0, r.stringToPDFString)(d), color: p, count: Number.isInteger(m) ? m : void 0, bold: !!(2 & f), italic: !!(1 & f), items: [] }; t.parent.items.push(b); e = l.getRaw("First"); if ((0, i.isRef)(e) && !n.has(e)) { a.push({ obj: e, parent: b }); n.put(e) } e = l.getRaw("Next"); if ((0, i.isRef)(e) && !n.has(e)) { a.push({ obj: e, parent: t.parent }); n.put(e) } } return t.items.length > 0 ? t.items : null } get permissions() { let e = null; try { e = this._readPermissions() } catch (e) { if (e instanceof s.MissingDataException) throw e; (0, r.warn)("Unable to read permissions.") } return (0, r.shadow)(this, "permissions", e) } _readPermissions() { const e = this.xref.trailer.get("Encrypt"); if (!(0, i.isDict)(e)) return null; let t = e.get("P"); if (!(0, r.isNum)(t)) return null; t += 2 ** 32; const a = []; for (const e in r.PermissionFlag) { const i = r.PermissionFlag[e]; t & i && a.push(i) } return a } get numPages() { const e = this.toplevelPagesDict.get("Count"); if (!Number.isInteger(e)) throw new r.FormatError("Page count in top-level pages dictionary is not an integer."); return (0, r.shadow)(this, "numPages", e) } get destinations() { const e = this._readDests(), t = Object.create(null); if (e instanceof f) { const a = e.getAll(); for (const e in a) t[e] = l(a[e]) } else e instanceof i.Dict && e.forEach((function (e, a) { a && (t[e] = l(a)) })); return (0, r.shadow)(this, "destinations", t) } getDestination(e) { const t = this._readDests(); return t instanceof f || t instanceof i.Dict ? l(t.get(e) || null) : null } _readDests() { const e = this.catDict.get("Names"); return e && e.has("Dests") ? new f(e.getRaw("Dests"), this.xref) : this.catDict.has("Dests") ? this.catDict.get("Dests") : void 0 } get pageLabels() { let e = null; try { e = this._readPageLabels() } catch (e) { if (e instanceof s.MissingDataException) throw e; (0, r.warn)("Unable to read page labels.") } return (0, r.shadow)(this, "pageLabels", e) } _readPageLabels() { const e = this.catDict.getRaw("PageLabels"); if (!e) return null; const t = new Array(this.numPages); let a = null, n = ""; const o = new g(e, this.xref).getAll(); let c = "", l = 1; for (let e = 0, h = this.numPages; e < h; e++) { if (e in o) { const t = o[e]; if (!(0, i.isDict)(t)) throw new r.FormatError("PageLabel is not a dictionary."); if (t.has("Type") && !(0, i.isName)(t.get("Type"), "PageLabel")) throw new r.FormatError("Invalid type in PageLabel dictionary."); if (t.has("S")) { const e = t.get("S"); if (!(0, i.isName)(e)) throw new r.FormatError("Invalid style in PageLabel dictionary."); a = e.name } else a = null; if (t.has("P")) { const e = t.get("P"); if (!(0, r.isString)(e)) throw new r.FormatError("Invalid prefix in PageLabel dictionary."); n = (0, r.stringToPDFString)(e) } else n = ""; if (t.has("St")) { const e = t.get("St"); if (!(Number.isInteger(e) && e >= 1)) throw new r.FormatError("Invalid start in PageLabel dictionary."); l = e } else l = 1 } switch (a) { case "D": c = l; break; case "R": case "r": c = (0, s.toRomanNumerals)(l, "r" === a); break; case "A": case "a": const e = 26, t = 65, i = 97, n = "a" === a ? i : t, o = l - 1, h = String.fromCharCode(n + o % e), u = []; for (let t = 0, a = o / e | 0; t <= a; t++)u.push(h); c = u.join(""); break; default: if (a) throw new r.FormatError(`Invalid style "${a}" in PageLabel dictionary.`); c = "" }t[e] = n + c; l++ } return t } get pageLayout() { const e = this.catDict.get("PageLayout"); let t = ""; if ((0, i.isName)(e)) switch (e.name) { case "SinglePage": case "OneColumn": case "TwoColumnLeft": case "TwoColumnRight": case "TwoPageLeft": case "TwoPageRight": t = e.name }return (0, r.shadow)(this, "pageLayout", t) } get pageMode() { const e = this.catDict.get("PageMode"); let t = "UseNone"; if ((0, i.isName)(e)) switch (e.name) { case "UseNone": case "UseOutlines": case "UseThumbs": case "FullScreen": case "UseOC": case "UseAttachments": t = e.name }return (0, r.shadow)(this, "pageMode", t) } get viewerPreferences() { const e = { HideToolbar: r.isBool, HideMenubar: r.isBool, HideWindowUI: r.isBool, FitWindow: r.isBool, CenterWindow: r.isBool, DisplayDocTitle: r.isBool, NonFullScreenPageMode: i.isName, Direction: i.isName, ViewArea: i.isName, ViewClip: i.isName, PrintArea: i.isName, PrintClip: i.isName, PrintScaling: i.isName, Duplex: i.isName, PickTrayByPDFSize: r.isBool, PrintPageRange: Array.isArray, NumCopies: Number.isInteger }, t = this.catDict.get("ViewerPreferences"), a = Object.create(null); if ((0, i.isDict)(t)) for (const i in e) { if (!t.has(i)) continue; const n = t.get(i); if (!e[i](n)) { (0, r.info)(`Bad value in ViewerPreferences for "${i}".`); continue } let s; switch (i) { case "NonFullScreenPageMode": switch (n.name) { case "UseNone": case "UseOutlines": case "UseThumbs": case "UseOC": s = n.name; break; default: s = "UseNone" }break; case "Direction": switch (n.name) { case "L2R": case "R2L": s = n.name; break; default: s = "L2R" }break; case "ViewArea": case "ViewClip": case "PrintArea": case "PrintClip": switch (n.name) { case "MediaBox": case "CropBox": case "BleedBox": case "TrimBox": case "ArtBox": s = n.name; break; default: s = "CropBox" }break; case "PrintScaling": switch (n.name) { case "None": case "AppDefault": s = n.name; break; default: s = "AppDefault" }break; case "Duplex": switch (n.name) { case "Simplex": case "DuplexFlipShortEdge": case "DuplexFlipLongEdge": s = n.name; break; default: s = "None" }break; case "PrintPageRange": if (n.length % 2 != 0) break; n.every((e, t, a) => Number.isInteger(e) && e > 0 && (0 === t || e >= a[t - 1]) && e <= this.numPages) && (s = n); break; case "NumCopies": n > 0 && (s = n); break; default: (0, r.assert)("boolean" == typeof n); s = n }void 0 !== s ? a[i] = s : (0, r.info)(`Bad value in ViewerPreferences for "${i}".`) } return (0, r.shadow)(this, "viewerPreferences", a) } get openAction() { const e = this.catDict.get("OpenAction"); let t = null; if ((0, i.isDict)(e)) { const a = new i.Dict(this.xref); a.set("A", e); const r = { url: null, dest: null, action: null }; h.parseDestDictionary({ destDict: a, resultObj: r }); if (Array.isArray(r.dest)) { t || (t = Object.create(null)); t.dest = r.dest } else if (r.action) { t || (t = Object.create(null)); t.action = r.action } } else if (Array.isArray(e)) { t || (t = Object.create(null)); t.dest = e } return (0, r.shadow)(this, "openAction", t) } get attachments() { const e = this.catDict.get("Names"); let t = null; if (e && e.has("EmbeddedFiles")) { const a = new f(e.getRaw("EmbeddedFiles"), this.xref).getAll(); for (const e in a) { const i = new m(a[e], this.xref); t || (t = Object.create(null)); t[(0, r.stringToPDFString)(e)] = i.serializable } } return (0, r.shadow)(this, "attachments", t) } get javaScript() { const e = this.catDict.get("Names"); let t = null; function a(e) { const a = e.get("S"); if (!(0, i.isName)(a, "JavaScript")) return; let n = e.get("JS"); if ((0, i.isStream)(n)) n = (0, r.bytesToString)(n.getBytes()); else if (!(0, r.isString)(n)) return; t || (t = []); t.push((0, r.stringToPDFString)(n)) } if (e && e.has("JavaScript")) { const t = new f(e.getRaw("JavaScript"), this.xref).getAll(); for (const e in t) { const r = t[e]; (0, i.isDict)(r) && a(r) } } const n = this.catDict.get("OpenAction"); (0, i.isDict)(n) && (0, i.isName)(n.get("S"), "JavaScript") && a(n); return (0, r.shadow)(this, "javaScript", t) } fontFallback(e, t) { const a = []; this.fontCache.forEach((function (e) { a.push(e) })); return Promise.all(a).then(a => { for (const r of a) if (r.loadedName === e) { r.fallback(t); return } }) } cleanup() { (0, i.clearPrimitiveCaches)(); this.pageKidsCountCache.clear(); const e = []; this.fontCache.forEach((function (t) { e.push(t) })); return Promise.all(e).then(e => { for (const { dict: t } of e) delete t.translated; this.fontCache.clear(); this.builtInCMapCache.clear() }) } getPageDict(e) { const t = (0, r.createPromiseCapability)(), a = [this.catDict.getRaw("Pages")], n = new i.RefSet, s = this.xref, o = this.pageKidsCountCache; let c, l = 0; !function h() { for (; a.length;) { const u = a.pop(); if ((0, i.isRef)(u)) { c = o.get(u); if (c > 0 && l + c < e) { l += c; continue } if (n.has(u)) { t.reject(new r.FormatError("Pages tree contains circular reference.")); return } n.put(u); s.fetchAsync(u).then((function (r) { if ((0, i.isDict)(r, "Page") || (0, i.isDict)(r) && !r.has("Kids")) if (e === l) { u && !o.has(u) && o.put(u, 1); t.resolve([r, u]) } else { l++; h() } else { a.push(r); h() } }), t.reject); return } if (!(0, i.isDict)(u)) { t.reject(new r.FormatError("Page dictionary kid reference points to wrong type of object.")); return } c = u.get("Count"); if (Number.isInteger(c) && c >= 0) { const t = u.objId; t && !o.has(t) && o.put(t, c); if (l + c <= e) { l += c; continue } } const d = u.get("Kids"); if (!Array.isArray(d)) { if ((0, i.isName)(u.get("Type"), "Page") || !u.has("Type") && u.has("Contents")) { if (l === e) { t.resolve([u, null]); return } l++; continue } t.reject(new r.FormatError("Page dictionary kids object is not an array.")); return } for (let e = d.length - 1; e >= 0; e--)a.push(d[e]) } t.reject(new Error(`Page index ${e} not found.`)) }(); return t.promise } getPageIndex(e) { const t = this.xref; let a = 0; return function n(s) { return function (a) { let n, s = 0; return t.fetchAsync(a).then((function (t) { if ((0, i.isRefsEqual)(a, e) && !(0, i.isDict)(t, "Page") && (!(0, i.isDict)(t) || t.has("Type") || !t.has("Contents"))) throw new r.FormatError("The reference does not point to a /Page dictionary."); if (!t) return null; if (!(0, i.isDict)(t)) throw new r.FormatError("Node must be a dictionary."); n = t.getRaw("Parent"); return t.getAsync("Parent") })).then((function (e) { if (!e) return null; if (!(0, i.isDict)(e)) throw new r.FormatError("Parent must be a dictionary."); return e.getAsync("Kids") })).then((function (e) { if (!e) return null; const o = []; let c = !1; for (let n = 0, l = e.length; n < l; n++) { const l = e[n]; if (!(0, i.isRef)(l)) throw new r.FormatError("Kid must be a reference."); if ((0, i.isRefsEqual)(l, a)) { c = !0; break } o.push(t.fetchAsync(l).then((function (e) { if (!(0, i.isDict)(e)) throw new r.FormatError("Kid node must be a dictionary."); e.has("Count") ? s += e.get("Count") : s++ }))) } if (!c) throw new r.FormatError("Kid reference not found in parent's kids."); return Promise.all(o).then((function () { return [s, n] })) })) }(s).then((function (e) { if (!e) return a; const [t, r] = e; a += t; return n(r) })) }(e) } static parseDestDictionary(e) { const t = e.destDict; if (!(0, i.isDict)(t)) { (0, r.warn)("parseDestDictionary: `destDict` must be a dictionary."); return } const a = e.resultObj; if ("object" != typeof a) { (0, r.warn)("parseDestDictionary: `resultObj` must be an object."); return } const n = e.docBaseUrl || null; let s, o, c = t.get("A"); !(0, i.isDict)(c) && t.has("Dest") && (c = t.get("Dest")); if ((0, i.isDict)(c)) { const e = c.get("S"); if (!(0, i.isName)(e)) { (0, r.warn)("parseDestDictionary: Invalid type in Action dictionary."); return } const t = e.name; switch (t) { case "URI": s = c.get("URI"); (0, i.isName)(s) ? s = "/" + s.name : (0, r.isString)(s) && (s = function (e) { return e.startsWith("www.") ? `http://${e}` : e }(s)); break; case "GoTo": o = c.get("D"); break; case "Launch": case "GoToR": const e = c.get("F"); (0, i.isDict)(e) ? s = e.get("F") || null : (0, r.isString)(e) && (s = e); let n = c.get("D"); if (n) { (0, i.isName)(n) && (n = n.name); if ((0, r.isString)(s)) { const e = s.split("#")[0]; (0, r.isString)(n) ? s = e + "#" + n : Array.isArray(n) && (s = e + "#" + JSON.stringify(n)) } } const l = c.get("NewWindow"); (0, r.isBool)(l) && (a.newWindow = l); break; case "Named": const h = c.get("N"); (0, i.isName)(h) && (a.action = h.name); break; case "JavaScript": const u = c.get("JS"); let d; (0, i.isStream)(u) ? d = (0, r.bytesToString)(u.getBytes()) : (0, r.isString)(u) && (d = u); if (d) { const e = new RegExp("^\\s*(" + ["app.launchURL", "window.open"].join("|").split(".").join("\\.") + ")\\((?:'|\")([^'\"]*)(?:'|\")(?:,\\s*(\\w+)\\)|\\))", "i").exec((0, r.stringToPDFString)(d)); if (e && e[2]) { s = e[2]; "true" === e[3] && "app.launchURL" === e[1] && (a.newWindow = !0); break } } default: (0, r.warn)(`parseDestDictionary: unsupported action type "${t}".`) } } else t.has("Dest") && (o = t.get("Dest")); if ((0, r.isString)(s)) { s = function (e) { try { return (0, r.stringToUTF8String)(e) } catch (t) { return e } }(s); const e = (0, r.createValidAbsoluteUrl)(s, n); e && (a.url = e.href); a.unsafeUrl = s } if (o) { (0, i.isName)(o) && (o = o.name); ((0, r.isString)(o) || Array.isArray(o)) && (a.dest = o) } } } t.Catalog = h; var u = function () { function e(e, t) { this.stream = e; this.pdfManager = t; this.entries = []; this.xrefstms = Object.create(null); this._cacheMap = new Map; this.stats = { streamTypes: Object.create(null), fontTypes: Object.create(null) } } e.prototype = { setStartXRef: function (e) { this.startXRefQueue = [e] }, parse: function (e) { var t; if (e) { (0, r.warn)("Indexing all PDF objects"); t = this.indexObjects() } else t = this.readXRef(); t.assignXref(this); this.trailer = t; let a, n; try { a = t.get("Encrypt") } catch (e) { if (e instanceof s.MissingDataException) throw e; (0, r.warn)(`XRef.parse - Invalid "Encrypt" reference: "${e}".`) } if ((0, i.isDict)(a)) { var c = t.get("ID"), l = c && c.length ? c[0] : ""; a.suppressEncryption = !0; this.encrypt = new o.CipherTransformFactory(a, l, this.pdfManager.password) } try { n = t.get("Root") } catch (e) { if (e instanceof s.MissingDataException) throw e; (0, r.warn)(`XRef.parse - Invalid "Root" reference: "${e}".`) } if (!(0, i.isDict)(n) || !n.has("Pages")) { if (!e) throw new s.XRefParseException; throw new r.FormatError("Invalid root reference") } this.root = n }, processXRefTable: function (e) { "tableState" in this || (this.tableState = { entryNum: 0, streamPos: e.lexer.stream.pos, parserBuf1: e.buf1, parserBuf2: e.buf2 }); var t = this.readXRefTable(e); if (!(0, i.isCmd)(t, "trailer")) throw new r.FormatError("Invalid XRef table: could not find trailer dictionary"); var a = e.getObj(); !(0, i.isDict)(a) && a.dict && (a = a.dict); if (!(0, i.isDict)(a)) throw new r.FormatError("Invalid XRef table: could not parse trailer dictionary"); delete this.tableState; return a }, readXRefTable: function (e) { var t, a = e.lexer.stream, n = this.tableState; a.pos = n.streamPos; e.buf1 = n.parserBuf1; e.buf2 = n.parserBuf2; for (; ;) { if (!("firstEntryNum" in n) || !("entryCount" in n)) { if ((0, i.isCmd)(t = e.getObj(), "trailer")) break; n.firstEntryNum = t; n.entryCount = e.getObj() } var s = n.firstEntryNum, o = n.entryCount; if (!Number.isInteger(s) || !Number.isInteger(o)) throw new r.FormatError("Invalid XRef table: wrong types in subsection header"); for (var c = n.entryNum; c < o; c++) { n.streamPos = a.pos; n.entryNum = c; n.parserBuf1 = e.buf1; n.parserBuf2 = e.buf2; var l = {}; l.offset = e.getObj(); l.gen = e.getObj(); var h = e.getObj(); if (h instanceof i.Cmd) switch (h.cmd) { case "f": l.free = !0; break; case "n": l.uncompressed = !0 }if (!Number.isInteger(l.offset) || !Number.isInteger(l.gen) || !l.free && !l.uncompressed) throw new r.FormatError(`Invalid entry in XRef subsection: ${s}, ${o}`); 0 === c && l.free && 1 === s && (s = 0); this.entries[c + s] || (this.entries[c + s] = l) } n.entryNum = 0; n.streamPos = a.pos; n.parserBuf1 = e.buf1; n.parserBuf2 = e.buf2; delete n.firstEntryNum; delete n.entryCount } if (this.entries[0] && !this.entries[0].free) throw new r.FormatError("Invalid XRef table: unexpected first object"); return t }, processXRefStream: function (e) { if (!("streamState" in this)) { var t = e.dict, a = t.get("W"), r = t.get("Index"); r || (r = [0, t.get("Size")]); this.streamState = { entryRanges: r, byteWidths: a, entryNum: 0, streamPos: e.pos } } this.readXRefStream(e); delete this.streamState; return e.dict }, readXRefStream: function (e) { var t, a, i = this.streamState; e.pos = i.streamPos; for (var n = i.byteWidths, s = n[0], o = n[1], c = n[2], l = i.entryRanges; l.length > 0;) { var h = l[0], u = l[1]; if (!Number.isInteger(h) || !Number.isInteger(u)) throw new r.FormatError(`Invalid XRef range fields: ${h}, ${u}`); if (!Number.isInteger(s) || !Number.isInteger(o) || !Number.isInteger(c)) throw new r.FormatError(`Invalid XRef entry fields length: ${h}, ${u}`); for (t = i.entryNum; t < u; ++t) { i.entryNum = t; i.streamPos = e.pos; var d = 0, f = 0, g = 0; for (a = 0; a < s; ++a)d = d << 8 | e.getByte(); 0 === s && (d = 1); for (a = 0; a < o; ++a)f = f << 8 | e.getByte(); for (a = 0; a < c; ++a)g = g << 8 | e.getByte(); var m = {}; m.offset = f; m.gen = g; switch (d) { case 0: m.free = !0; break; case 1: m.uncompressed = !0; break; case 2: break; default: throw new r.FormatError(`Invalid XRef entry type: ${d}`) }this.entries[h + t] || (this.entries[h + t] = m) } i.entryNum = 0; i.streamPos = e.pos; l.splice(0, 2) } }, indexObjects: function () { function e(e, t) { for (var a = "", r = e[t]; 10 !== r && 13 !== r && 60 !== r && !(++t >= e.length);) { a += String.fromCharCode(r); r = e[t] } return a } function t(e, t, a) { for (var r = a.length, i = e.length, n = 0; t < i;) { for (var s = 0; s < r && e[t + s] === a[s];)++s; if (s >= r) break; t++; n++ } return n } var a = /^(\d+)\s+(\d+)\s+obj\b/; const o = /\bendobj[\b\s]$/, c = /\s+(\d+\s+\d+\s+obj[\b\s<])$/; var l = new Uint8Array([116, 114, 97, 105, 108, 101, 114]), h = new Uint8Array([115, 116, 97, 114, 116, 120, 114, 101, 102]); const u = new Uint8Array([111, 98, 106]); var d = new Uint8Array([47, 88, 82, 101, 102]); this.entries.length = 0; var f = this.stream; f.pos = 0; for (var g, m, p = f.getBytes(), b = f.start, y = p.length, v = [], w = []; b < y;) { var k = p[b]; if (9 !== k && 10 !== k && 13 !== k && 32 !== k) if (37 !== k) { var S, C = e(p, b); if (C.startsWith("xref") && (4 === C.length || /\s/.test(C[4]))) { b += t(p, b, l); v.push(b); b += t(p, b, h) } else if (S = a.exec(C)) { const e = 0 | S[1], a = 0 | S[2]; this.entries[e] && this.entries[e].gen !== a || (this.entries[e] = { offset: b - f.start, gen: a, uncompressed: !0 }); let i, n = b + C.length; for (; n < p.length;) { const e = n + t(p, n, u) + 4; i = e - b; const a = Math.max(e - 25, n), s = (0, r.bytesToString)(p.subarray(a, e)); if (o.test(s)) break; { const e = c.exec(s); if (e && e[1]) { (0, r.warn)('indexObjects: Found new "obj" inside of another "obj", caused by missing "endobj" -- trying to recover.'); i -= e[1].length; break } } n = e } const s = p.subarray(b, b + i); var x = t(s, 0, d); if (x < i && s[x + 5] < 64) { w.push(b - f.start); this.xrefstms[b - f.start] = 1 } b += i } else if (C.startsWith("trailer") && (7 === C.length || /\s/.test(C[7]))) { v.push(b); b += t(p, b, h) } else b += C.length + 1 } else do { if (++b >= y) break; k = p[b] } while (10 !== k && 13 !== k); else ++b } for (g = 0, m = w.length; g < m; ++g) { this.startXRefQueue.push(w[g]); this.readXRef(!0) } let A; for (g = 0, m = v.length; g < m; ++g) { f.pos = v[g]; const e = new n.Parser({ lexer: new n.Lexer(f), xref: this, allowStreams: !0, recoveryMode: !0 }); var I = e.getObj(); if (!(0, i.isCmd)(I, "trailer")) continue; const t = e.getObj(); if (!(0, i.isDict)(t)) continue; let a; try { a = t.get("Root") } catch (e) { if (e instanceof s.MissingDataException) throw e; continue } if ((0, i.isDict)(a) && a.has("Pages")) { if (t.has("ID")) return t; A = t } } if (A) return A; throw new r.InvalidPDFException("Invalid PDF structure.") }, readXRef: function (e) { var t = this.stream; const a = Object.create(null); try { for (; this.startXRefQueue.length;) { var o = this.startXRefQueue[0]; if (a[o]) { (0, r.warn)("readXRef - skipping XRef table since it was already parsed."); this.startXRefQueue.shift(); continue } a[o] = !0; t.pos = o + t.start; const e = new n.Parser({ lexer: new n.Lexer(t), xref: this, allowStreams: !0 }); var c, l = e.getObj(); if ((0, i.isCmd)(l, "xref")) { c = this.processXRefTable(e); this.topDict || (this.topDict = c); l = c.get("XRefStm"); if (Number.isInteger(l)) { var h = l; if (!(h in this.xrefstms)) { this.xrefstms[h] = 1; this.startXRefQueue.push(h) } } } else { if (!Number.isInteger(l)) throw new r.FormatError("Invalid XRef stream header"); if (!Number.isInteger(e.getObj()) || !(0, i.isCmd)(e.getObj(), "obj") || !(0, i.isStream)(l = e.getObj())) throw new r.FormatError("Invalid XRef stream"); c = this.processXRefStream(l); this.topDict || (this.topDict = c); if (!c) throw new r.FormatError("Failed to read XRef stream") } l = c.get("Prev"); Number.isInteger(l) ? this.startXRefQueue.push(l) : (0, i.isRef)(l) && this.startXRefQueue.push(l.num); this.startXRefQueue.shift() } return this.topDict } catch (e) { if (e instanceof s.MissingDataException) throw e; (0, r.info)("(while reading XRef): " + e) } if (!e) throw new s.XRefParseException }, getEntry: function (e) { var t = this.entries[e]; return t && !t.free && t.offset ? t : null }, fetchIfRef: function (e, t) { return e instanceof i.Ref ? this.fetch(e, t) : e }, fetch: function (e, t) { if (!(e instanceof i.Ref)) throw new Error("ref object is not a reference"); const a = e.num, r = this._cacheMap.get(a); if (void 0 !== r) { r instanceof i.Dict && !r.objId && (r.objId = e.toString()); return r } let n = this.getEntry(a); if (null === n) { this._cacheMap.set(a, n); return n } n = n.uncompressed ? this.fetchUncompressed(e, n, t) : this.fetchCompressed(e, n, t); (0, i.isDict)(n) ? n.objId = e.toString() : (0, i.isStream)(n) && (n.dict.objId = e.toString()); return n }, fetchUncompressed(e, t, a = !1) { var r = e.gen, o = e.num; if (t.gen !== r) throw new s.XRefEntryException(`Inconsistent generation in XRef: ${e}`); var c = this.stream.makeSubStream(t.offset + this.stream.start); const l = new n.Parser({ lexer: new n.Lexer(c), xref: this, allowStreams: !0 }); var h = l.getObj(), u = l.getObj(), d = l.getObj(); if (h !== o || u !== r || !(d instanceof i.Cmd)) throw new s.XRefEntryException(`Bad (uncompressed) XRef entry: ${e}`); if ("obj" !== d.cmd) { if (d.cmd.startsWith("obj")) { o = parseInt(d.cmd.substring(3), 10); if (!Number.isNaN(o)) return o } throw new s.XRefEntryException(`Bad (uncompressed) XRef entry: ${e}`) } t = this.encrypt && !a ? l.getObj(this.encrypt.createCipherTransform(o, r)) : l.getObj(); (0, i.isStream)(t) || this._cacheMap.set(o, t); return t }, fetchCompressed(e, t, a = !1) { const o = t.offset, c = this.fetch(i.Ref.get(o, 0)); if (!(0, i.isStream)(c)) throw new r.FormatError("bad ObjStm stream"); const l = c.dict.get("First"), h = c.dict.get("N"); if (!Number.isInteger(l) || !Number.isInteger(h)) throw new r.FormatError("invalid first and n parameters for ObjStm stream"); const u = new n.Parser({ lexer: new n.Lexer(c), xref: this, allowStreams: !0 }), d = new Array(h); for (let e = 0; e < h; ++e) { const t = u.getObj(); if (!Number.isInteger(t)) throw new r.FormatError(`invalid object number in the ObjStm stream: ${t}`); const a = u.getObj(); if (!Number.isInteger(a)) throw new r.FormatError(`invalid object offset in the ObjStm stream: ${a}`); d[e] = t } const f = new Array(h); for (let e = 0; e < h; ++e) { const t = u.getObj(); f[e] = t; u.buf1 instanceof i.Cmd && "endobj" === u.buf1.cmd && u.shift(); if ((0, i.isStream)(t)) continue; const a = d[e], r = this.entries[a]; r && r.offset === o && r.gen === e && this._cacheMap.set(a, t) } if (void 0 === (t = f[t.gen])) throw new s.XRefEntryException(`Bad (compressed) XRef entry: ${e}`); return t }, async fetchIfRefAsync(e, t) { return e instanceof i.Ref ? this.fetchAsync(e, t) : e }, async fetchAsync(e, t) { try { return this.fetch(e, t) } catch (a) { if (!(a instanceof s.MissingDataException)) throw a; await this.pdfManager.requestRange(a.begin, a.end); return this.fetchAsync(e, t) } }, getCatalogObj: function () { return this.root } }; return e }(); t.XRef = u; class d { constructor(e, t, a) { this.constructor === d && (0, r.unreachable)("Cannot initialize NameOrNumberTree."); this.root = e; this.xref = t; this._type = a } getAll() { const e = Object.create(null); if (!this.root) return e; const t = this.xref, a = new i.RefSet; a.put(this.root); const n = [this.root]; for (; n.length > 0;) { const s = t.fetchIfRef(n.shift()); if (!(0, i.isDict)(s)) continue; if (s.has("Kids")) { const e = s.get("Kids"); for (let t = 0, i = e.length; t < i; t++) { const i = e[t]; if (a.has(i)) throw new r.FormatError(`Duplicate entry in "${this._type}" tree.`); n.push(i); a.put(i) } continue } const o = s.get(this._type); if (Array.isArray(o)) for (let a = 0, r = o.length; a < r; a += 2)e[t.fetchIfRef(o[a])] = t.fetchIfRef(o[a + 1]) } return e } get(e) { if (!this.root) return null; const t = this.xref; let a = t.fetchIfRef(this.root), i = 0; for (; a.has("Kids");) { if (++i > 10) { (0, r.warn)(`Search depth limit reached for "${this._type}" tree.`); return null } const n = a.get("Kids"); if (!Array.isArray(n)) return null; let s = 0, o = n.length - 1; for (; s <= o;) { const r = s + o >> 1, i = t.fetchIfRef(n[r]).get("Limits"); if (e < t.fetchIfRef(i[0])) o = r - 1; else { if (!(e > t.fetchIfRef(i[1]))) { a = t.fetchIfRef(n[r]); break } s = r + 1 } } if (s > o) return null } const n = a.get(this._type); if (Array.isArray(n)) { let a = 0, i = n.length - 2; for (; a <= i;) { const r = a + i >> 1, s = r + (1 & r), o = t.fetchIfRef(n[s]); if (e < o) i = s - 2; else { if (!(e > o)) return t.fetchIfRef(n[s + 1]); a = s + 2 } } (0, r.info)(`Falling back to an exhaustive search, for key "${e}", ` + `in "${this._type}" tree.`); for (let a = 0, i = n.length; a < i; a += 2) { if (t.fetchIfRef(n[a]) === e) { (0, r.warn)(`The "${e}" key was found at an incorrect, ` + `i.e. out-of-order, position in "${this._type}" tree.`); return t.fetchIfRef(n[a + 1]) } } } return null } } class f extends d { constructor(e, t) { super(e, t, "Names") } } class g extends d { constructor(e, t) { super(e, t, "Nums") } } var m = function () { function e(e, t) { if (e && (0, i.isDict)(e)) { this.xref = t; this.root = e; e.has("FS") && (this.fs = e.get("FS")); this.description = e.has("Desc") ? (0, r.stringToPDFString)(e.get("Desc")) : ""; e.has("RF") && (0, r.warn)("Related file specifications are not supported"); this.contentAvailable = !0; if (!e.has("EF")) { this.contentAvailable = !1; (0, r.warn)("Non-embedded file specifications are not supported") } } } function t(e) { return e.has("UF") ? e.get("UF") : e.has("F") ? e.get("F") : e.has("Unix") ? e.get("Unix") : e.has("Mac") ? e.get("Mac") : e.has("DOS") ? e.get("DOS") : null } e.prototype = { get filename() { if (!this._filename && this.root) { var e = t(this.root) || "unnamed"; this._filename = (0, r.stringToPDFString)(e).replace(/\\\\/g, "\\").replace(/\\\//g, "/").replace(/\\/g, "/") } return this._filename }, get content() { if (!this.contentAvailable) return null; !this.contentRef && this.root && (this.contentRef = t(this.root.get("EF"))); var e = null; if (this.contentRef) { var a = this.xref.fetchIfRef(this.contentRef); a && (0, i.isStream)(a) ? e = a.getBytes() : (0, r.warn)("Embedded file specification points to non-existing/invalid content") } else (0, r.warn)("Embedded file specification does not have a content"); return e }, get serializable() { return { filename: this.filename, content: this.content } } }; return e }(); t.FileSpec = m; const p = function () { function e(e) { return e instanceof i.Ref || e instanceof i.Dict || Array.isArray(e) || (0, i.isStream)(e) } function t(t, a) { if (t instanceof i.Dict || (0, i.isStream)(t)) { const r = t instanceof i.Dict ? t : t.dict, n = r.getKeys(); for (let t = 0, i = n.length; t < i; t++) { const i = r.getRaw(n[t]); e(i) && a.push(i) } } else if (Array.isArray(t)) for (let r = 0, i = t.length; r < i; r++) { const i = t[r]; e(i) && a.push(i) } } function a(e, t, a) { this.dict = e; this.keys = t; this.xref = a; this.refSet = null } a.prototype = { async load() { if (!this.xref.stream.allChunksLoaded || this.xref.stream.allChunksLoaded()) return; const { keys: e, dict: t } = this; this.refSet = new i.RefSet; const a = []; for (let r = 0, i = e.length; r < i; r++) { const i = t.getRaw(e[r]); void 0 !== i && a.push(i) } return this._walk(a) }, async _walk(e) { const a = [], r = []; for (; e.length;) { let n = e.pop(); if (n instanceof i.Ref) { if (this.refSet.has(n)) continue; try { this.refSet.put(n); n = this.xref.fetch(n) } catch (e) { if (!(e instanceof s.MissingDataException)) throw e; a.push(n); r.push({ begin: e.begin, end: e.end }) } } if (n && n.getBaseStreams) { const e = n.getBaseStreams(); let t = !1; for (let a = 0, i = e.length; a < i; a++) { const i = e[a]; if (i.allChunksLoaded && !i.allChunksLoaded()) { t = !0; r.push({ begin: i.start, end: i.end }) } } t && a.push(n) } t(n, e) } if (r.length) { await this.xref.stream.manager.requestRanges(r); for (let e = 0, t = a.length; e < t; e++) { const t = a[e]; t instanceof i.Ref && this.refSet.remove(t) } return this._walk(a) } this.refSet = null } }; return a }(); t.ObjectLoader = p }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.Parser = t.Linearization = t.Lexer = void 0; var r = a(11), i = a(2), n = a(4), s = a(7), o = a(12), c = a(14), l = a(17), h = a(19); function u(e) { const t = e.length; let a = 1, r = 0; for (let i = 0; i < t; ++i) { a += 255 & e[i]; r += a } return r % 65521 << 16 | a % 65521 } class d { constructor({ lexer: e, xref: t, allowStreams: a = !1, recoveryMode: r = !1 }) { this.lexer = e; this.xref = t; this.allowStreams = a; this.recoveryMode = r; this.imageCache = Object.create(null); this.refill() } refill() { this.buf1 = this.lexer.getObj(); this.buf2 = this.lexer.getObj() } shift() { if (this.buf2 instanceof n.Cmd && "ID" === this.buf2.cmd) { this.buf1 = this.buf2; this.buf2 = null } else { this.buf1 = this.buf2; this.buf2 = this.lexer.getObj() } } tryShift() { try { this.shift(); return !0 } catch (e) { if (e instanceof s.MissingDataException) throw e; return !1 } } getObj(e = null) { const t = this.buf1; this.shift(); if (t instanceof n.Cmd) switch (t.cmd) { case "BI": return this.makeInlineImage(e); case "[": const a = []; for (; !(0, n.isCmd)(this.buf1, "]") && !(0, n.isEOF)(this.buf1);)a.push(this.getObj(e)); if ((0, n.isEOF)(this.buf1)) { if (!this.recoveryMode) throw new i.FormatError("End of file inside array"); return a } this.shift(); return a; case "<<": const r = new n.Dict(this.xref); for (; !(0, n.isCmd)(this.buf1, ">>") && !(0, n.isEOF)(this.buf1);) { if (!(0, n.isName)(this.buf1)) { (0, i.info)("Malformed dictionary: key must be a name object"); this.shift(); continue } const t = this.buf1.name; this.shift(); if ((0, n.isEOF)(this.buf1)) break; r.set(t, this.getObj(e)) } if ((0, n.isEOF)(this.buf1)) { if (!this.recoveryMode) throw new i.FormatError("End of file inside dictionary"); return r } if ((0, n.isCmd)(this.buf2, "stream")) return this.allowStreams ? this.makeStream(r, e) : r; this.shift(); return r; default: return t }if (Number.isInteger(t)) { if (Number.isInteger(this.buf1) && (0, n.isCmd)(this.buf2, "R")) { const e = n.Ref.get(t, this.buf1); this.shift(); this.shift(); return e } return t } return "string" == typeof t && e ? e.decryptString(t) : t } findDefaultInlineStreamEnd(e) { const t = e.pos; let a, r, n = 0; for (; -1 !== (a = e.getByte());)if (0 === n) n = 69 === a ? 1 : 0; else if (1 === n) n = 73 === a ? 2 : 0; else { (0, i.assert)(2 === n); if (32 === a || 10 === a || 13 === a) { r = e.pos; const t = e.peekBytes(10); for (let e = 0, r = t.length; e < r; e++) { a = t[e]; if ((0 !== a || 0 === t[e + 1]) && (10 !== a && 13 !== a && (a < 32 || a > 127))) { n = 0; break } } if (2 === n) break } else n = 0 } if (-1 === a) { (0, i.warn)("findDefaultInlineStreamEnd: Reached the end of the stream without finding a valid EI marker"); if (r) { (0, i.warn)('... trying to recover by using the last "EI" occurrence.'); e.skip(-(e.pos - r)) } } let o = 4; e.skip(-o); a = e.peekByte(); e.skip(o); (0, s.isWhiteSpace)(a) || o--; return e.pos - o - t } findDCTDecodeInlineStreamEnd(e) { const t = e.pos; let a, r, n = !1; for (; -1 !== (a = e.getByte());)if (255 === a) { switch (e.getByte()) { case 0: break; case 255: e.skip(-1); break; case 217: n = !0; break; case 192: case 193: case 194: case 195: case 197: case 198: case 199: case 201: case 202: case 203: case 205: case 206: case 207: case 196: case 204: case 218: case 219: case 220: case 221: case 222: case 223: case 224: case 225: case 226: case 227: case 228: case 229: case 230: case 231: case 232: case 233: case 234: case 235: case 236: case 237: case 238: case 239: case 254: r = e.getUint16(); r > 2 ? e.skip(r - 2) : e.skip(-2) }if (n) break } const s = e.pos - t; if (-1 === a) { (0, i.warn)("Inline DCTDecode image stream: EOI marker not found, searching for /EI/ instead."); e.skip(-s); return this.findDefaultInlineStreamEnd(e) } this.inlineStreamSkipEI(e); return s } findASCII85DecodeInlineStreamEnd(e) { const t = e.pos; let a; for (; -1 !== (a = e.getByte());)if (126 === a) { const t = e.pos; a = e.peekByte(); for (; (0, s.isWhiteSpace)(a);) { e.skip(); a = e.peekByte() } if (62 === a) { e.skip(); break } if (e.pos > t) { const t = e.peekBytes(2); if (69 === t[0] && 73 === t[1]) break } } const r = e.pos - t; if (-1 === a) { (0, i.warn)("Inline ASCII85Decode image stream: EOD marker not found, searching for /EI/ instead."); e.skip(-r); return this.findDefaultInlineStreamEnd(e) } this.inlineStreamSkipEI(e); return r } findASCIIHexDecodeInlineStreamEnd(e) { const t = e.pos; let a; for (; -1 !== (a = e.getByte()) && 62 !== a;); const r = e.pos - t; if (-1 === a) { (0, i.warn)("Inline ASCIIHexDecode image stream: EOD marker not found, searching for /EI/ instead."); e.skip(-r); return this.findDefaultInlineStreamEnd(e) } this.inlineStreamSkipEI(e); return r } inlineStreamSkipEI(e) { let t, a = 0; for (; -1 !== (t = e.getByte());)if (0 === a) a = 69 === t ? 1 : 0; else if (1 === a) a = 73 === t ? 2 : 0; else if (2 === a) break } makeInlineImage(e) { const t = this.lexer, a = t.stream, r = new n.Dict(this.xref); let s; for (; !(0, n.isCmd)(this.buf1, "ID") && !(0, n.isEOF)(this.buf1);) { if (!(0, n.isName)(this.buf1)) throw new i.FormatError("Dictionary key must be a name object"); const t = this.buf1.name; this.shift(); if ((0, n.isEOF)(this.buf1)) break; r.set(t, this.getObj(e)) } -1 !== t.beginInlineImagePos && (s = a.pos - t.beginInlineImagePos); const o = r.get("Filter", "F"); let c; if ((0, n.isName)(o)) c = o.name; else if (Array.isArray(o)) { const e = this.xref.fetchIfRef(o[0]); (0, n.isName)(e) && (c = e.name) } const l = a.pos; let h; h = "DCTDecode" === c || "DCT" === c ? this.findDCTDecodeInlineStreamEnd(a) : "ASCII85Decode" === c || "A85" === c ? this.findASCII85DecodeInlineStreamEnd(a) : "ASCIIHexDecode" === c || "AHx" === c ? this.findASCIIHexDecodeInlineStreamEnd(a) : this.findDefaultInlineStreamEnd(a); let d, f = a.makeSubStream(l, h, r); if (h < 1e3 && s < 5552) { const e = f.getBytes(); f.reset(); const r = a.pos; a.pos = t.beginInlineImagePos; const i = a.getBytes(s); a.pos = r; d = u(e) + "_" + u(i); const o = this.imageCache[d]; if (void 0 !== o) { this.buf2 = n.Cmd.get("EI"); this.shift(); o.reset(); return o } } e && (f = e.createStream(f, h)); f = this.filter(f, r, h); f.dict = r; if (void 0 !== d) { f.cacheKey = `inline_${h}_${d}`; this.imageCache[d] = f } this.buf2 = n.Cmd.get("EI"); this.shift(); return f } _findStreamLength(e, t) { const { stream: a } = this.lexer; a.pos = e; const r = t.length; for (; a.pos < a.end;) { const i = a.peekBytes(2048), n = i.length - r; if (n <= 0) break; let s = 0; for (; s < n;) { let n = 0; for (; n < r && i[s + n] === t[n];)n++; if (n >= r) { a.pos += s; return a.pos - e } s++ } a.pos += n } return -1 } makeStream(e, t) { const a = this.lexer; let r = a.stream; a.skipToNextLine(); const o = r.pos - 1; let c = e.get("Length"); if (!Number.isInteger(c)) { (0, i.info)(`Bad length "${c}" in stream`); c = 0 } r.pos = o + c; a.nextChar(); if (this.tryShift() && (0, n.isCmd)(this.buf2, "endstream")) this.shift(); else { const e = new Uint8Array([101, 110, 100, 115, 116, 114, 101, 97, 109]); let t = this._findStreamLength(o, e); if (t < 0) { const a = 1; for (let n = 1; n <= a; n++) { const a = e.length - n, c = e.slice(0, a), l = this._findStreamLength(o, c); if (l >= 0) { const e = r.peekBytes(a + 1)[a]; if (!(0, s.isWhiteSpace)(e)) break; (0, i.info)(`Found "${(0, i.bytesToString)(c)}" when ` + "searching for endstream command."); t = l; break } } if (t < 0) throw new i.FormatError("Missing endstream command.") } c = t; a.nextChar(); this.shift(); this.shift() } this.shift(); r = r.makeSubStream(o, c, e); t && (r = t.createStream(r, c)); r = this.filter(r, e, c); r.dict = e; return r } filter(e, t, a) { let r = t.get("Filter", "F"), s = t.get("DecodeParms", "DP"); if ((0, n.isName)(r)) { Array.isArray(s) && (0, i.warn)("/DecodeParms should not contain an Array, when /Filter contains a Name."); return this.makeFilter(e, r.name, a, s) } let o = a; if (Array.isArray(r)) { const t = r, a = s; for (let c = 0, l = t.length; c < l; ++c) { r = this.xref.fetchIfRef(t[c]); if (!(0, n.isName)(r)) throw new i.FormatError(`Bad filter name "${r}"`); s = null; Array.isArray(a) && c in a && (s = this.xref.fetchIfRef(a[c])); e = this.makeFilter(e, r.name, o, s); o = null } } return e } makeFilter(e, t, a, n) { if (0 === a) { (0, i.warn)(`Empty "${t}" stream.`); return new r.NullStream } try { const s = this.xref.stats.streamTypes; if ("FlateDecode" === t || "Fl" === t) { s[i.StreamType.FLATE] = !0; return n ? new r.PredictorStream(new r.FlateStream(e, a), a, n) : new r.FlateStream(e, a) } if ("LZWDecode" === t || "LZW" === t) { s[i.StreamType.LZW] = !0; let t = 1; if (n) { n.has("EarlyChange") && (t = n.get("EarlyChange")); return new r.PredictorStream(new r.LZWStream(e, a, t), a, n) } return new r.LZWStream(e, a, t) } if ("DCTDecode" === t || "DCT" === t) { s[i.StreamType.DCT] = !0; return new l.JpegStream(e, a, e.dict, n) } if ("JPXDecode" === t || "JPX" === t) { s[i.StreamType.JPX] = !0; return new h.JpxStream(e, a, e.dict, n) } if ("ASCII85Decode" === t || "A85" === t) { s[i.StreamType.A85] = !0; return new r.Ascii85Stream(e, a) } if ("ASCIIHexDecode" === t || "AHx" === t) { s[i.StreamType.AHX] = !0; return new r.AsciiHexStream(e, a) } if ("CCITTFaxDecode" === t || "CCF" === t) { s[i.StreamType.CCF] = !0; return new o.CCITTFaxStream(e, a, n) } if ("RunLengthDecode" === t || "RL" === t) { s[i.StreamType.RLX] = !0; return new r.RunLengthStream(e, a) } if ("JBIG2Decode" === t) { s[i.StreamType.JBIG] = !0; return new c.Jbig2Stream(e, a, e.dict, n) } (0, i.warn)(`Filter "${t}" is not supported.`); return e } catch (e) { if (e instanceof s.MissingDataException) throw e; (0, i.warn)(`Invalid stream: "${e}"`); return new r.NullStream } } } t.Parser = d; const f = [1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 2, 0, 0, 2, 2, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; function g(e) { return e >= 48 && e <= 57 ? 15 & e : e >= 65 && e <= 70 || e >= 97 && e <= 102 ? 9 + (15 & e) : -1 } class m { constructor(e, t = null) { this.stream = e; this.nextChar(); this.strBuf = []; this.knownCommands = t; this._hexStringNumWarn = 0; this.beginInlineImagePos = -1 } nextChar() { return this.currentChar = this.stream.getByte() } peekChar() { return this.stream.peekByte() } getNumber() { let e = this.currentChar, t = !1, a = 0, r = 0; if (45 === e) { r = -1; e = this.nextChar(); 45 === e && (e = this.nextChar()) } else if (43 === e) { r = 1; e = this.nextChar() } if (10 === e || 13 === e) do { e = this.nextChar() } while (10 === e || 13 === e); if (46 === e) { a = 10; e = this.nextChar() } if (e < 48 || e > 57) { if (10 === a && 0 === r && ((0, s.isWhiteSpace)(e) || -1 === e)) { (0, i.warn)("Lexer.getNumber - treating a single decimal point as zero."); return 0 } throw new i.FormatError(`Invalid number: ${String.fromCharCode(e)} (charCode ${e})`) } r = r || 1; let n = e - 48, o = 0, c = 1; for (; (e = this.nextChar()) >= 0;)if (e >= 48 && e <= 57) { const r = e - 48; if (t) o = 10 * o + r; else { 0 !== a && (a *= 10); n = 10 * n + r } } else if (46 === e) { if (0 !== a) break; a = 1 } else if (45 === e) (0, i.warn)("Badly formatted number: minus sign in the middle"); else { if (69 !== e && 101 !== e) break; e = this.peekChar(); if (43 === e || 45 === e) { c = 45 === e ? -1 : 1; this.nextChar() } else if (e < 48 || e > 57) break; t = !0 } 0 !== a && (n /= a); t && (n *= 10 ** (c * o)); return r * n } getString() { let e = 1, t = !1; const a = this.strBuf; a.length = 0; let r = this.nextChar(); for (; ;) { let n = !1; switch (0 | r) { case -1: (0, i.warn)("Unterminated string"); t = !0; break; case 40: ++e; a.push("("); break; case 41: if (0 == --e) { this.nextChar(); t = !0 } else a.push(")"); break; case 92: r = this.nextChar(); switch (r) { case -1: (0, i.warn)("Unterminated string"); t = !0; break; case 110: a.push("\n"); break; case 114: a.push("\r"); break; case 116: a.push("\t"); break; case 98: a.push("\b"); break; case 102: a.push("\f"); break; case 92: case 40: case 41: a.push(String.fromCharCode(r)); break; case 48: case 49: case 50: case 51: case 52: case 53: case 54: case 55: let e = 15 & r; r = this.nextChar(); n = !0; if (r >= 48 && r <= 55) { e = (e << 3) + (15 & r); r = this.nextChar(); if (r >= 48 && r <= 55) { n = !1; e = (e << 3) + (15 & r) } } a.push(String.fromCharCode(e)); break; case 13: 10 === this.peekChar() && this.nextChar(); break; case 10: break; default: a.push(String.fromCharCode(r)) }break; default: a.push(String.fromCharCode(r)) }if (t) break; n || (r = this.nextChar()) } return a.join("") } getName() { let e, t; const a = this.strBuf; a.length = 0; for (; (e = this.nextChar()) >= 0 && !f[e];)if (35 === e) { e = this.nextChar(); if (f[e]) { (0, i.warn)("Lexer_getName: NUMBER SIGN (#) should be followed by a hexadecimal number."); a.push("#"); break } const r = g(e); if (-1 !== r) { t = e; e = this.nextChar(); const n = g(e); if (-1 === n) { (0, i.warn)(`Lexer_getName: Illegal digit (${String.fromCharCode(e)}) ` + "in hexadecimal number."); a.push("#", String.fromCharCode(t)); if (f[e]) break; a.push(String.fromCharCode(e)); continue } a.push(String.fromCharCode(r << 4 | n)) } else a.push("#", String.fromCharCode(e)) } else a.push(String.fromCharCode(e)); a.length > 127 && (0, i.warn)(`Name token is longer than allowed by the spec: ${a.length}`); return n.Name.get(a.join("")) } _hexStringWarn(e) { 5 != this._hexStringNumWarn++ ? this._hexStringNumWarn > 5 || (0, i.warn)(`getHexString - ignoring invalid character: ${e}`) : (0, i.warn)("getHexString - ignoring additional invalid characters.") } getHexString() { const e = this.strBuf; e.length = 0; let t, a, r = this.currentChar, n = !0; this._hexStringNumWarn = 0; for (; ;) { if (r < 0) { (0, i.warn)("Unterminated hex string"); break } if (62 === r) { this.nextChar(); break } if (1 !== f[r]) { if (n) { t = g(r); if (-1 === t) { this._hexStringWarn(r); r = this.nextChar(); continue } } else { a = g(r); if (-1 === a) { this._hexStringWarn(r); r = this.nextChar(); continue } e.push(String.fromCharCode(t << 4 | a)) } n = !n; r = this.nextChar() } else r = this.nextChar() } return e.join("") } getObj() { let e = !1, t = this.currentChar; for (; ;) { if (t < 0) return n.EOF; if (e) 10 !== t && 13 !== t || (e = !1); else if (37 === t) e = !0; else if (1 !== f[t]) break; t = this.nextChar() } switch (0 | t) { case 48: case 49: case 50: case 51: case 52: case 53: case 54: case 55: case 56: case 57: case 43: case 45: case 46: return this.getNumber(); case 40: return this.getString(); case 47: return this.getName(); case 91: this.nextChar(); return n.Cmd.get("["); case 93: this.nextChar(); return n.Cmd.get("]"); case 60: t = this.nextChar(); if (60 === t) { this.nextChar(); return n.Cmd.get("<<") } return this.getHexString(); case 62: t = this.nextChar(); if (62 === t) { this.nextChar(); return n.Cmd.get(">>") } return n.Cmd.get(">"); case 123: this.nextChar(); return n.Cmd.get("{"); case 125: this.nextChar(); return n.Cmd.get("}"); case 41: this.nextChar(); throw new i.FormatError(`Illegal character: ${t}`) }let a = String.fromCharCode(t); const r = this.knownCommands; let s = r && void 0 !== r[a]; for (; (t = this.nextChar()) >= 0 && !f[t];) { const e = a + String.fromCharCode(t); if (s && void 0 === r[e]) break; if (128 === a.length) throw new i.FormatError(`Command token too long: ${a.length}`); a = e; s = r && void 0 !== r[a] } if ("true" === a) return !0; if ("false" === a) return !1; if ("null" === a) return null; "BI" === a && (this.beginInlineImagePos = this.stream.pos); return n.Cmd.get(a) } skipToNextLine() { let e = this.currentChar; for (; e >= 0;) { if (13 === e) { e = this.nextChar(); 10 === e && this.nextChar(); break } if (10 === e) { this.nextChar(); break } e = this.nextChar() } } } t.Lexer = m; t.Linearization = class { static create(e) { function t(e, t, a = !1) { const r = e.get(t); if (Number.isInteger(r) && (a ? r >= 0 : r > 0)) return r; throw new Error(`The "${t}" parameter in the linearization ` + "dictionary is invalid.") } const a = new d({ lexer: new m(e), xref: null }), r = a.getObj(), s = a.getObj(), o = a.getObj(), c = a.getObj(); let l, h; if (!(Number.isInteger(r) && Number.isInteger(s) && (0, n.isCmd)(o, "obj") && (0, n.isDict)(c) && (0, i.isNum)(l = c.get("Linearized")) && l > 0)) return null; if ((h = t(c, "L")) !== e.length) throw new Error('The "L" parameter in the linearization dictionary does not equal the stream length.'); return { length: h, hints: function (e) { const t = e.get("H"); let a; if (Array.isArray(t) && (2 === (a = t.length) || 4 === a)) { for (let e = 0; e < a; e++) { const a = t[e]; if (!(Number.isInteger(a) && a > 0)) throw new Error(`Hint (${e}) in the linearization dictionary is invalid.`) } return t } throw new Error("Hint array in the linearization dictionary is invalid.") }(c), objectNumberFirst: t(c, "O"), endFirst: t(c, "E"), numPages: t(c, "N"), mainXRefEntriesOffset: t(c, "T"), pageFirst: c.has("P") ? t(c, "P", !0) : 0 } } } }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.LZWStream = t.StringStream = t.StreamsSequenceStream = t.Stream = t.RunLengthStream = t.PredictorStream = t.NullStream = t.FlateStream = t.DecodeStream = t.DecryptStream = t.AsciiHexStream = t.Ascii85Stream = void 0; var r = a(2), i = a(4), n = a(7), s = function () { function e(e, t, a, r) { this.bytes = e instanceof Uint8Array ? e : new Uint8Array(e); this.start = t || 0; this.pos = this.start; this.end = t + a || this.bytes.length; this.dict = r } e.prototype = { get length() { return this.end - this.start }, get isEmpty() { return 0 === this.length }, getByte: function () { return this.pos >= this.end ? -1 : this.bytes[this.pos++] }, getUint16: function () { var e = this.getByte(), t = this.getByte(); return -1 === e || -1 === t ? -1 : (e << 8) + t }, getInt32: function () { return (this.getByte() << 24) + (this.getByte() << 16) + (this.getByte() << 8) + this.getByte() }, getBytes(e, t = !1) { var a = this.bytes, r = this.pos, i = this.end; if (!e) { const e = a.subarray(r, i); return t ? new Uint8ClampedArray(e) : e } var n = r + e; n > i && (n = i); this.pos = n; const s = a.subarray(r, n); return t ? new Uint8ClampedArray(s) : s }, peekByte: function () { var e = this.getByte(); -1 !== e && this.pos--; return e }, peekBytes(e, t = !1) { var a = this.getBytes(e, t); this.pos -= a.length; return a }, getByteRange(e, t) { e < 0 && (e = 0); t > this.end && (t = this.end); return this.bytes.subarray(e, t) }, skip: function (e) { e || (e = 1); this.pos += e }, reset: function () { this.pos = this.start }, moveStart: function () { this.start = this.pos }, makeSubStream: function (t, a, r) { return new e(this.bytes.buffer, t, a, r) } }; return e }(); t.Stream = s; var o = function () { function e(e) { const t = (0, r.stringToBytes)(e); s.call(this, t) } e.prototype = s.prototype; return e }(); t.StringStream = o; var c = function () { var e = new Uint8Array(0); function t(t) { this._rawMinBufferLength = t || 0; this.pos = 0; this.bufferLength = 0; this.eof = !1; this.buffer = e; this.minBufferLength = 512; if (t) for (; this.minBufferLength < t;)this.minBufferLength *= 2 } t.prototype = { get isEmpty() { for (; !this.eof && 0 === this.bufferLength;)this.readBlock(); return 0 === this.bufferLength }, ensureBuffer: function (e) { var t = this.buffer; if (e <= t.byteLength) return t; for (var a = this.minBufferLength; a < e;)a *= 2; var r = new Uint8Array(a); r.set(t); return this.buffer = r }, getByte: function () { for (var e = this.pos; this.bufferLength <= e;) { if (this.eof) return -1; this.readBlock() } return this.buffer[this.pos++] }, getUint16: function () { var e = this.getByte(), t = this.getByte(); return -1 === e || -1 === t ? -1 : (e << 8) + t }, getInt32: function () { return (this.getByte() << 24) + (this.getByte() << 16) + (this.getByte() << 8) + this.getByte() }, getBytes(e, t = !1) { var a, r = this.pos; if (e) { this.ensureBuffer(r + e); a = r + e; for (; !this.eof && this.bufferLength < a;)this.readBlock(); var i = this.bufferLength; a > i && (a = i) } else { for (; !this.eof;)this.readBlock(); a = this.bufferLength } this.pos = a; const n = this.buffer.subarray(r, a); return !t || n instanceof Uint8ClampedArray ? n : new Uint8ClampedArray(n) }, peekByte: function () { var e = this.getByte(); -1 !== e && this.pos--; return e }, peekBytes(e, t = !1) { var a = this.getBytes(e, t); this.pos -= a.length; return a }, makeSubStream: function (e, t, a) { for (var r = e + t; this.bufferLength <= r && !this.eof;)this.readBlock(); return new s(this.buffer, e, t, a) }, getByteRange(e, t) { (0, r.unreachable)("Should not call DecodeStream.getByteRange") }, skip: function (e) { e || (e = 1); this.pos += e }, reset: function () { this.pos = 0 }, getBaseStreams: function () { return this.str && this.str.getBaseStreams ? this.str.getBaseStreams() : [] } }; return t }(); t.DecodeStream = c; var l = function () { function e(e) { this.streams = e; let t = 0; for (let a = 0, r = e.length; a < r; a++) { const r = e[a]; t += r instanceof c ? r._rawMinBufferLength : r.length } c.call(this, t) } e.prototype = Object.create(c.prototype); e.prototype.readBlock = function () { var e = this.streams; if (0 !== e.length) { var t = e.shift().getBytes(), a = this.bufferLength, r = a + t.length; this.ensureBuffer(r).set(t, a); this.bufferLength = r } else this.eof = !0 }; e.prototype.getBaseStreams = function () { for (var e = [], t = 0, a = this.streams.length; t < a; t++) { var r = this.streams[t]; r.getBaseStreams && e.push(...r.getBaseStreams()) } return e }; return e }(); t.StreamsSequenceStream = l; var h = function () { var e = new Int32Array([16, 17, 18, 0, 8, 7, 9, 6, 10, 5, 11, 4, 12, 3, 13, 2, 14, 1, 15]), t = new Int32Array([3, 4, 5, 6, 7, 8, 9, 10, 65547, 65549, 65551, 65553, 131091, 131095, 131099, 131103, 196643, 196651, 196659, 196667, 262211, 262227, 262243, 262259, 327811, 327843, 327875, 327907, 258, 258, 258]), a = new Int32Array([1, 2, 3, 4, 65541, 65543, 131081, 131085, 196625, 196633, 262177, 262193, 327745, 327777, 393345, 393409, 459009, 459137, 524801, 525057, 590849, 591361, 657409, 658433, 724993, 727041, 794625, 798721, 868353, 876545]), i = [new Int32Array([459008, 524368, 524304, 524568, 459024, 524400, 524336, 590016, 459016, 524384, 524320, 589984, 524288, 524416, 524352, 590048, 459012, 524376, 524312, 589968, 459028, 524408, 524344, 590032, 459020, 524392, 524328, 59e4, 524296, 524424, 524360, 590064, 459010, 524372, 524308, 524572, 459026, 524404, 524340, 590024, 459018, 524388, 524324, 589992, 524292, 524420, 524356, 590056, 459014, 524380, 524316, 589976, 459030, 524412, 524348, 590040, 459022, 524396, 524332, 590008, 524300, 524428, 524364, 590072, 459009, 524370, 524306, 524570, 459025, 524402, 524338, 590020, 459017, 524386, 524322, 589988, 524290, 524418, 524354, 590052, 459013, 524378, 524314, 589972, 459029, 524410, 524346, 590036, 459021, 524394, 524330, 590004, 524298, 524426, 524362, 590068, 459011, 524374, 524310, 524574, 459027, 524406, 524342, 590028, 459019, 524390, 524326, 589996, 524294, 524422, 524358, 590060, 459015, 524382, 524318, 589980, 459031, 524414, 524350, 590044, 459023, 524398, 524334, 590012, 524302, 524430, 524366, 590076, 459008, 524369, 524305, 524569, 459024, 524401, 524337, 590018, 459016, 524385, 524321, 589986, 524289, 524417, 524353, 590050, 459012, 524377, 524313, 589970, 459028, 524409, 524345, 590034, 459020, 524393, 524329, 590002, 524297, 524425, 524361, 590066, 459010, 524373, 524309, 524573, 459026, 524405, 524341, 590026, 459018, 524389, 524325, 589994, 524293, 524421, 524357, 590058, 459014, 524381, 524317, 589978, 459030, 524413, 524349, 590042, 459022, 524397, 524333, 590010, 524301, 524429, 524365, 590074, 459009, 524371, 524307, 524571, 459025, 524403, 524339, 590022, 459017, 524387, 524323, 589990, 524291, 524419, 524355, 590054, 459013, 524379, 524315, 589974, 459029, 524411, 524347, 590038, 459021, 524395, 524331, 590006, 524299, 524427, 524363, 590070, 459011, 524375, 524311, 524575, 459027, 524407, 524343, 590030, 459019, 524391, 524327, 589998, 524295, 524423, 524359, 590062, 459015, 524383, 524319, 589982, 459031, 524415, 524351, 590046, 459023, 524399, 524335, 590014, 524303, 524431, 524367, 590078, 459008, 524368, 524304, 524568, 459024, 524400, 524336, 590017, 459016, 524384, 524320, 589985, 524288, 524416, 524352, 590049, 459012, 524376, 524312, 589969, 459028, 524408, 524344, 590033, 459020, 524392, 524328, 590001, 524296, 524424, 524360, 590065, 459010, 524372, 524308, 524572, 459026, 524404, 524340, 590025, 459018, 524388, 524324, 589993, 524292, 524420, 524356, 590057, 459014, 524380, 524316, 589977, 459030, 524412, 524348, 590041, 459022, 524396, 524332, 590009, 524300, 524428, 524364, 590073, 459009, 524370, 524306, 524570, 459025, 524402, 524338, 590021, 459017, 524386, 524322, 589989, 524290, 524418, 524354, 590053, 459013, 524378, 524314, 589973, 459029, 524410, 524346, 590037, 459021, 524394, 524330, 590005, 524298, 524426, 524362, 590069, 459011, 524374, 524310, 524574, 459027, 524406, 524342, 590029, 459019, 524390, 524326, 589997, 524294, 524422, 524358, 590061, 459015, 524382, 524318, 589981, 459031, 524414, 524350, 590045, 459023, 524398, 524334, 590013, 524302, 524430, 524366, 590077, 459008, 524369, 524305, 524569, 459024, 524401, 524337, 590019, 459016, 524385, 524321, 589987, 524289, 524417, 524353, 590051, 459012, 524377, 524313, 589971, 459028, 524409, 524345, 590035, 459020, 524393, 524329, 590003, 524297, 524425, 524361, 590067, 459010, 524373, 524309, 524573, 459026, 524405, 524341, 590027, 459018, 524389, 524325, 589995, 524293, 524421, 524357, 590059, 459014, 524381, 524317, 589979, 459030, 524413, 524349, 590043, 459022, 524397, 524333, 590011, 524301, 524429, 524365, 590075, 459009, 524371, 524307, 524571, 459025, 524403, 524339, 590023, 459017, 524387, 524323, 589991, 524291, 524419, 524355, 590055, 459013, 524379, 524315, 589975, 459029, 524411, 524347, 590039, 459021, 524395, 524331, 590007, 524299, 524427, 524363, 590071, 459011, 524375, 524311, 524575, 459027, 524407, 524343, 590031, 459019, 524391, 524327, 589999, 524295, 524423, 524359, 590063, 459015, 524383, 524319, 589983, 459031, 524415, 524351, 590047, 459023, 524399, 524335, 590015, 524303, 524431, 524367, 590079]), 9], n = [new Int32Array([327680, 327696, 327688, 327704, 327684, 327700, 327692, 327708, 327682, 327698, 327690, 327706, 327686, 327702, 327694, 0, 327681, 327697, 327689, 327705, 327685, 327701, 327693, 327709, 327683, 327699, 327691, 327707, 327687, 327703, 327695, 0]), 5]; function s(e, t) { this.str = e; this.dict = e.dict; var a = e.getByte(), i = e.getByte(); if (-1 === a || -1 === i) throw new r.FormatError(`Invalid header in flate stream: ${a}, ${i}`); if (8 != (15 & a)) throw new r.FormatError(`Unknown compression method in flate stream: ${a}, ${i}`); if (((a << 8) + i) % 31 != 0) throw new r.FormatError(`Bad FCHECK in flate stream: ${a}, ${i}`); if (32 & i) throw new r.FormatError(`FDICT bit set in flate stream: ${a}, ${i}`); this.codeSize = 0; this.codeBuf = 0; c.call(this, t) } s.prototype = Object.create(c.prototype); s.prototype.getBits = function (e) { for (var t, a = this.str, i = this.codeSize, n = this.codeBuf; i < e;) { if (-1 === (t = a.getByte())) throw new r.FormatError("Bad encoding in flate stream"); n |= t << i; i += 8 } t = n & (1 << e) - 1; this.codeBuf = n >> e; this.codeSize = i -= e; return t }; s.prototype.getCode = function (e) { for (var t, a = this.str, i = e[0], n = e[1], s = this.codeSize, o = this.codeBuf; s < n && -1 !== (t = a.getByte());) { o |= t << s; s += 8 } var c = i[o & (1 << n) - 1], l = c >> 16, h = 65535 & c; if (l < 1 || s < l) throw new r.FormatError("Bad encoding in flate stream"); this.codeBuf = o >> l; this.codeSize = s - l; return h }; s.prototype.generateHuffmanTable = function (e) { var t, a = e.length, r = 0; for (t = 0; t < a; ++t)e[t] > r && (r = e[t]); for (var i = 1 << r, n = new Int32Array(i), s = 1, o = 0, c = 2; s <= r; ++s, o <<= 1, c <<= 1)for (var l = 0; l < a; ++l)if (e[l] === s) { var h = 0, u = o; for (t = 0; t < s; ++t) { h = h << 1 | 1 & u; u >>= 1 } for (t = h; t < i; t += c)n[t] = s << 16 | l; ++o } return [n, r] }; s.prototype.readBlock = function () { var s, o, c = this.str, l = this.getBits(3); 1 & l && (this.eof = !0); if (0 !== (l >>= 1)) { var h, u; if (1 === l) { h = i; u = n } else { if (2 !== l) throw new r.FormatError("Unknown block type in flate stream"); var d, f = this.getBits(5) + 257, g = this.getBits(5) + 1, m = this.getBits(4) + 4, p = new Uint8Array(e.length); for (d = 0; d < m; ++d)p[e[d]] = this.getBits(3); var b = this.generateHuffmanTable(p); o = 0; d = 0; for (var y, v, w, k = f + g, S = new Uint8Array(k); d < k;) { var C = this.getCode(b); if (16 === C) { y = 2; v = 3; w = o } else if (17 === C) { y = 3; v = 3; w = o = 0 } else { if (18 !== C) { S[d++] = o = C; continue } y = 7; v = 11; w = o = 0 } for (var x = this.getBits(y) + v; x-- > 0;)S[d++] = w } h = this.generateHuffmanTable(S.subarray(0, f)); u = this.generateHuffmanTable(S.subarray(f, k)) } for (var A = (s = this.buffer) ? s.length : 0, I = this.bufferLength; ;) { var F = this.getCode(h); if (F < 256) { I + 1 >= A && (A = (s = this.ensureBuffer(I + 1)).length); s[I++] = F } else { if (256 === F) { this.bufferLength = I; return } var T = (F = t[F -= 257]) >> 16; T > 0 && (T = this.getBits(T)); o = (65535 & F) + T; F = this.getCode(u); (T = (F = a[F]) >> 16) > 0 && (T = this.getBits(T)); var E = (65535 & F) + T; I + o >= A && (A = (s = this.ensureBuffer(I + o)).length); for (var O = 0; O < o; ++O, ++I)s[I] = s[I - E] } } } else { var P; if (-1 === (P = c.getByte())) throw new r.FormatError("Bad block header in flate stream"); var B = P; if (-1 === (P = c.getByte())) throw new r.FormatError("Bad block header in flate stream"); B |= P << 8; if (-1 === (P = c.getByte())) throw new r.FormatError("Bad block header in flate stream"); var D = P; if (-1 === (P = c.getByte())) throw new r.FormatError("Bad block header in flate stream"); if ((D |= P << 8) !== (65535 & ~B) && (0 !== B || 0 !== D)) throw new r.FormatError("Bad uncompressed block length in flate stream"); this.codeBuf = 0; this.codeSize = 0; const e = this.bufferLength, t = e + B; s = this.ensureBuffer(t); this.bufferLength = t; if (0 === B) -1 === c.peekByte() && (this.eof = !0); else { const t = c.getBytes(B); s.set(t, e); t.length < B && (this.eof = !0) } } }; return s }(); t.FlateStream = h; var u = function () { function e(e, t, a) { if (!(0, i.isDict)(a)) return e; var n = this.predictor = a.get("Predictor") || 1; if (n <= 1) return e; if (2 !== n && (n < 10 || n > 15)) throw new r.FormatError(`Unsupported predictor: ${n}`); this.readBlock = 2 === n ? this.readBlockTiff : this.readBlockPng; this.str = e; this.dict = e.dict; var s = this.colors = a.get("Colors") || 1, o = this.bits = a.get("BitsPerComponent") || 8, l = this.columns = a.get("Columns") || 1; this.pixBytes = s * o + 7 >> 3; this.rowBytes = l * s * o + 7 >> 3; c.call(this, t); return this } e.prototype = Object.create(c.prototype); e.prototype.readBlockTiff = function () { var e = this.rowBytes, t = this.bufferLength, a = this.ensureBuffer(t + e), r = this.bits, i = this.colors, n = this.str.getBytes(e); this.eof = !n.length; if (!this.eof) { var s, o = 0, c = 0, l = 0, h = 0, u = t; if (1 === r && 1 === i) for (s = 0; s < e; ++s) { var d = n[s] ^ o; d ^= d >> 1; d ^= d >> 2; o = (1 & (d ^= d >> 4)) << 7; a[u++] = d } else if (8 === r) { for (s = 0; s < i; ++s)a[u++] = n[s]; for (; s < e; ++s) { a[u] = a[u - i] + n[s]; u++ } } else if (16 === r) { var f = 2 * i; for (s = 0; s < f; ++s)a[u++] = n[s]; for (; s < e; s += 2) { var g = ((255 & n[s]) << 8) + (255 & n[s + 1]) + ((255 & a[u - f]) << 8) + (255 & a[u - f + 1]); a[u++] = g >> 8 & 255; a[u++] = 255 & g } } else { var m = new Uint8Array(i + 1), p = (1 << r) - 1, b = 0, y = t, v = this.columns; for (s = 0; s < v; ++s)for (var w = 0; w < i; ++w) { if (l < r) { o = o << 8 | 255 & n[b++]; l += 8 } m[w] = m[w] + (o >> l - r) & p; l -= r; c = c << r | m[w]; if ((h += r) >= 8) { a[y++] = c >> h - 8 & 255; h -= 8 } } h > 0 && (a[y++] = (c << 8 - h) + (o & (1 << 8 - h) - 1)) } this.bufferLength += e } }; e.prototype.readBlockPng = function () { var e = this.rowBytes, t = this.pixBytes, a = this.str.getByte(), i = this.str.getBytes(e); this.eof = !i.length; if (!this.eof) { var n = this.bufferLength, s = this.ensureBuffer(n + e), o = s.subarray(n - e, n); 0 === o.length && (o = new Uint8Array(e)); var c, l, h, u = n; switch (a) { case 0: for (c = 0; c < e; ++c)s[u++] = i[c]; break; case 1: for (c = 0; c < t; ++c)s[u++] = i[c]; for (; c < e; ++c) { s[u] = s[u - t] + i[c] & 255; u++ } break; case 2: for (c = 0; c < e; ++c)s[u++] = o[c] + i[c] & 255; break; case 3: for (c = 0; c < t; ++c)s[u++] = (o[c] >> 1) + i[c]; for (; c < e; ++c) { s[u] = (o[c] + s[u - t] >> 1) + i[c] & 255; u++ } break; case 4: for (c = 0; c < t; ++c) { l = o[c]; h = i[c]; s[u++] = l + h } for (; c < e; ++c) { l = o[c]; var d = o[c - t], f = s[u - t], g = f + l - d, m = g - f; m < 0 && (m = -m); var p = g - l; p < 0 && (p = -p); var b = g - d; b < 0 && (b = -b); h = i[c]; s[u++] = m <= p && m <= b ? f + h : p <= b ? l + h : d + h } break; default: throw new r.FormatError(`Unsupported predictor: ${a}`) }this.bufferLength += e } }; return e }(); t.PredictorStream = u; var d = function () { function e(e, t, a) { this.str = e; this.dict = e.dict; this.decrypt = a; this.nextChunk = null; this.initialized = !1; c.call(this, t) } e.prototype = Object.create(c.prototype); e.prototype.readBlock = function () { var e; if (this.initialized) e = this.nextChunk; else { e = this.str.getBytes(512); this.initialized = !0 } if (e && 0 !== e.length) { this.nextChunk = this.str.getBytes(512); var t = this.nextChunk && this.nextChunk.length > 0; e = (0, this.decrypt)(e, !t); var a, r = this.bufferLength, i = e.length, n = this.ensureBuffer(r + i); for (a = 0; a < i; a++)n[r++] = e[a]; this.bufferLength = r } else this.eof = !0 }; return e }(); t.DecryptStream = d; var f = function () { function e(e, t) { this.str = e; this.dict = e.dict; this.input = new Uint8Array(5); t && (t *= .8); c.call(this, t) } e.prototype = Object.create(c.prototype); e.prototype.readBlock = function () { for (var e = this.str, t = e.getByte(); (0, n.isWhiteSpace)(t);)t = e.getByte(); if (-1 !== t && 126 !== t) { var a, r, i = this.bufferLength; if (122 === t) { a = this.ensureBuffer(i + 4); for (r = 0; r < 4; ++r)a[i + r] = 0; this.bufferLength += 4 } else { var s = this.input; s[0] = t; for (r = 1; r < 5; ++r) { t = e.getByte(); for (; (0, n.isWhiteSpace)(t);)t = e.getByte(); s[r] = t; if (-1 === t || 126 === t) break } a = this.ensureBuffer(i + r - 1); this.bufferLength += r - 1; if (r < 5) { for (; r < 5; ++r)s[r] = 117; this.eof = !0 } var o = 0; for (r = 0; r < 5; ++r)o = 85 * o + (s[r] - 33); for (r = 3; r >= 0; --r) { a[i + r] = 255 & o; o >>= 8 } } } else this.eof = !0 }; return e }(); t.Ascii85Stream = f; var g = function () { function e(e, t) { this.str = e; this.dict = e.dict; this.firstDigit = -1; t && (t *= .5); c.call(this, t) } e.prototype = Object.create(c.prototype); e.prototype.readBlock = function () { var e = this.str.getBytes(8e3); if (e.length) { for (var t = e.length + 1 >> 1, a = this.ensureBuffer(this.bufferLength + t), r = this.bufferLength, i = this.firstDigit, n = 0, s = e.length; n < s; n++) { var o, c = e[n]; if (c >= 48 && c <= 57) o = 15 & c; else { if (!(c >= 65 && c <= 70 || c >= 97 && c <= 102)) { if (62 === c) { this.eof = !0; break } continue } o = 9 + (15 & c) } if (i < 0) i = o; else { a[r++] = i << 4 | o; i = -1 } } if (i >= 0 && this.eof) { a[r++] = i << 4; i = -1 } this.firstDigit = i; this.bufferLength = r } else this.eof = !0 }; return e }(); t.AsciiHexStream = g; var m = function () { function e(e, t) { this.str = e; this.dict = e.dict; c.call(this, t) } e.prototype = Object.create(c.prototype); e.prototype.readBlock = function () { var e = this.str.getBytes(2); if (!e || e.length < 2 || 128 === e[0]) this.eof = !0; else { var t, a = this.bufferLength, r = e[0]; if (r < 128) { (t = this.ensureBuffer(a + r + 1))[a++] = e[1]; if (r > 0) { var i = this.str.getBytes(r); t.set(i, a); a += r } } else { r = 257 - r; var n = e[1]; t = this.ensureBuffer(a + r + 1); for (var s = 0; s < r; s++)t[a++] = n } this.bufferLength = a } }; return e }(); t.RunLengthStream = m; var p = function () { function e(e, t, a) { this.str = e; this.dict = e.dict; this.cachedData = 0; this.bitsCached = 0; for (var r = { earlyChange: a, codeLength: 9, nextCode: 258, dictionaryValues: new Uint8Array(4096), dictionaryLengths: new Uint16Array(4096), dictionaryPrevCodes: new Uint16Array(4096), currentSequence: new Uint8Array(4096), currentSequenceLength: 0 }, i = 0; i < 256; ++i) { r.dictionaryValues[i] = i; r.dictionaryLengths[i] = 1 } this.lzwState = r; c.call(this, t) } e.prototype = Object.create(c.prototype); e.prototype.readBits = function (e) { for (var t = this.bitsCached, a = this.cachedData; t < e;) { var r = this.str.getByte(); if (-1 === r) { this.eof = !0; return null } a = a << 8 | r; t += 8 } this.bitsCached = t -= e; this.cachedData = a; this.lastCode = null; return a >>> t & (1 << e) - 1 }; e.prototype.readBlock = function () { var e, t, a, r = 1024, i = this.lzwState; if (i) { var n = i.earlyChange, s = i.nextCode, o = i.dictionaryValues, c = i.dictionaryLengths, l = i.dictionaryPrevCodes, h = i.codeLength, u = i.prevCode, d = i.currentSequence, f = i.currentSequenceLength, g = 0, m = this.bufferLength, p = this.ensureBuffer(this.bufferLength + r); for (e = 0; e < 512; e++) { var b = this.readBits(h), y = f > 0; if (b < 256) { d[0] = b; f = 1 } else { if (!(b >= 258)) { if (256 === b) { h = 9; s = 258; f = 0; continue } this.eof = !0; delete this.lzwState; break } if (b < s) for (t = (f = c[b]) - 1, a = b; t >= 0; t--) { d[t] = o[a]; a = l[a] } else d[f++] = d[0] } if (y) { l[s] = u; c[s] = c[u] + 1; o[s] = d[0]; h = ++s + n & s + n - 1 ? h : 0 | Math.min(Math.log(s + n) / .6931471805599453 + 1, 12) } u = b; if (r < (g += f)) { do { r += 512 } while (r < g); p = this.ensureBuffer(this.bufferLength + r) } for (t = 0; t < f; t++)p[m++] = d[t] } i.nextCode = s; i.codeLength = h; i.prevCode = u; i.currentSequenceLength = f; this.bufferLength = m } }; return e }(); t.LZWStream = p; var b = function () { function e() { s.call(this, new Uint8Array(0)) } e.prototype = s.prototype; return e }(); t.NullStream = b }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.CCITTFaxStream = void 0; var r = a(4), i = a(13), n = a(11), s = function () { function e(e, t, a) { this.str = e; this.dict = e.dict; (0, r.isDict)(a) || (a = r.Dict.empty); const s = { next: () => e.getByte() }; this.ccittFaxDecoder = new i.CCITTFaxDecoder(s, { K: a.get("K"), EndOfLine: a.get("EndOfLine"), EncodedByteAlign: a.get("EncodedByteAlign"), Columns: a.get("Columns"), Rows: a.get("Rows"), EndOfBlock: a.get("EndOfBlock"), BlackIs1: a.get("BlackIs1") }); n.DecodeStream.call(this, t) } e.prototype = Object.create(n.DecodeStream.prototype); e.prototype.readBlock = function () { for (; !this.eof;) { const e = this.ccittFaxDecoder.readNextChar(); if (-1 === e) { this.eof = !0; return } this.ensureBuffer(this.bufferLength + 1); this.buffer[this.bufferLength++] = e } }; return e }(); t.CCITTFaxStream = s }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.CCITTFaxDecoder = void 0; var r = a(2); const i = function () { const e = [[-1, -1], [-1, -1], [7, 8], [7, 7], [6, 6], [6, 6], [6, 5], [6, 5], [4, 0], [4, 0], [4, 0], [4, 0], [4, 0], [4, 0], [4, 0], [4, 0], [3, 1], [3, 1], [3, 1], [3, 1], [3, 1], [3, 1], [3, 1], [3, 1], [3, 1], [3, 1], [3, 1], [3, 1], [3, 1], [3, 1], [3, 1], [3, 1], [3, 4], [3, 4], [3, 4], [3, 4], [3, 4], [3, 4], [3, 4], [3, 4], [3, 4], [3, 4], [3, 4], [3, 4], [3, 4], [3, 4], [3, 4], [3, 4], [3, 3], [3, 3], [3, 3], [3, 3], [3, 3], [3, 3], [3, 3], [3, 3], [3, 3], [3, 3], [3, 3], [3, 3], [3, 3], [3, 3], [3, 3], [3, 3], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2], [1, 2]], t = [[-1, -1], [12, -2], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [11, 1792], [11, 1792], [12, 1984], [12, 2048], [12, 2112], [12, 2176], [12, 2240], [12, 2304], [11, 1856], [11, 1856], [11, 1920], [11, 1920], [12, 2368], [12, 2432], [12, 2496], [12, 2560]], a = [[-1, -1], [-1, -1], [-1, -1], [-1, -1], [8, 29], [8, 29], [8, 30], [8, 30], [8, 45], [8, 45], [8, 46], [8, 46], [7, 22], [7, 22], [7, 22], [7, 22], [7, 23], [7, 23], [7, 23], [7, 23], [8, 47], [8, 47], [8, 48], [8, 48], [6, 13], [6, 13], [6, 13], [6, 13], [6, 13], [6, 13], [6, 13], [6, 13], [7, 20], [7, 20], [7, 20], [7, 20], [8, 33], [8, 33], [8, 34], [8, 34], [8, 35], [8, 35], [8, 36], [8, 36], [8, 37], [8, 37], [8, 38], [8, 38], [7, 19], [7, 19], [7, 19], [7, 19], [8, 31], [8, 31], [8, 32], [8, 32], [6, 1], [6, 1], [6, 1], [6, 1], [6, 1], [6, 1], [6, 1], [6, 1], [6, 12], [6, 12], [6, 12], [6, 12], [6, 12], [6, 12], [6, 12], [6, 12], [8, 53], [8, 53], [8, 54], [8, 54], [7, 26], [7, 26], [7, 26], [7, 26], [8, 39], [8, 39], [8, 40], [8, 40], [8, 41], [8, 41], [8, 42], [8, 42], [8, 43], [8, 43], [8, 44], [8, 44], [7, 21], [7, 21], [7, 21], [7, 21], [7, 28], [7, 28], [7, 28], [7, 28], [8, 61], [8, 61], [8, 62], [8, 62], [8, 63], [8, 63], [8, 0], [8, 0], [8, 320], [8, 320], [8, 384], [8, 384], [5, 10], [5, 10], [5, 10], [5, 10], [5, 10], [5, 10], [5, 10], [5, 10], [5, 10], [5, 10], [5, 10], [5, 10], [5, 10], [5, 10], [5, 10], [5, 10], [5, 11], [5, 11], [5, 11], [5, 11], [5, 11], [5, 11], [5, 11], [5, 11], [5, 11], [5, 11], [5, 11], [5, 11], [5, 11], [5, 11], [5, 11], [5, 11], [7, 27], [7, 27], [7, 27], [7, 27], [8, 59], [8, 59], [8, 60], [8, 60], [9, 1472], [9, 1536], [9, 1600], [9, 1728], [7, 18], [7, 18], [7, 18], [7, 18], [7, 24], [7, 24], [7, 24], [7, 24], [8, 49], [8, 49], [8, 50], [8, 50], [8, 51], [8, 51], [8, 52], [8, 52], [7, 25], [7, 25], [7, 25], [7, 25], [8, 55], [8, 55], [8, 56], [8, 56], [8, 57], [8, 57], [8, 58], [8, 58], [6, 192], [6, 192], [6, 192], [6, 192], [6, 192], [6, 192], [6, 192], [6, 192], [6, 1664], [6, 1664], [6, 1664], [6, 1664], [6, 1664], [6, 1664], [6, 1664], [6, 1664], [8, 448], [8, 448], [8, 512], [8, 512], [9, 704], [9, 768], [8, 640], [8, 640], [8, 576], [8, 576], [9, 832], [9, 896], [9, 960], [9, 1024], [9, 1088], [9, 1152], [9, 1216], [9, 1280], [9, 1344], [9, 1408], [7, 256], [7, 256], [7, 256], [7, 256], [4, 2], [4, 2], [4, 2], [4, 2], [4, 2], [4, 2], [4, 2], [4, 2], [4, 2], [4, 2], [4, 2], [4, 2], [4, 2], [4, 2], [4, 2], [4, 2], [4, 2], [4, 2], [4, 2], [4, 2], [4, 2], [4, 2], [4, 2], [4, 2], [4, 2], [4, 2], [4, 2], [4, 2], [4, 2], [4, 2], [4, 2], [4, 2], [4, 3], [4, 3], [4, 3], [4, 3], [4, 3], [4, 3], [4, 3], [4, 3], [4, 3], [4, 3], [4, 3], [4, 3], [4, 3], [4, 3], [4, 3], [4, 3], [4, 3], [4, 3], [4, 3], [4, 3], [4, 3], [4, 3], [4, 3], [4, 3], [4, 3], [4, 3], [4, 3], [4, 3], [4, 3], [4, 3], [4, 3], [4, 3], [5, 128], [5, 128], [5, 128], [5, 128], [5, 128], [5, 128], [5, 128], [5, 128], [5, 128], [5, 128], [5, 128], [5, 128], [5, 128], [5, 128], [5, 128], [5, 128], [5, 8], [5, 8], [5, 8], [5, 8], [5, 8], [5, 8], [5, 8], [5, 8], [5, 8], [5, 8], [5, 8], [5, 8], [5, 8], [5, 8], [5, 8], [5, 8], [5, 9], [5, 9], [5, 9], [5, 9], [5, 9], [5, 9], [5, 9], [5, 9], [5, 9], [5, 9], [5, 9], [5, 9], [5, 9], [5, 9], [5, 9], [5, 9], [6, 16], [6, 16], [6, 16], [6, 16], [6, 16], [6, 16], [6, 16], [6, 16], [6, 17], [6, 17], [6, 17], [6, 17], [6, 17], [6, 17], [6, 17], [6, 17], [4, 4], [4, 4], [4, 4], [4, 4], [4, 4], [4, 4], [4, 4], [4, 4], [4, 4], [4, 4], [4, 4], [4, 4], [4, 4], [4, 4], [4, 4], [4, 4], [4, 4], [4, 4], [4, 4], [4, 4], [4, 4], [4, 4], [4, 4], [4, 4], [4, 4], [4, 4], [4, 4], [4, 4], [4, 4], [4, 4], [4, 4], [4, 4], [4, 5], [4, 5], [4, 5], [4, 5], [4, 5], [4, 5], [4, 5], [4, 5], [4, 5], [4, 5], [4, 5], [4, 5], [4, 5], [4, 5], [4, 5], [4, 5], [4, 5], [4, 5], [4, 5], [4, 5], [4, 5], [4, 5], [4, 5], [4, 5], [4, 5], [4, 5], [4, 5], [4, 5], [4, 5], [4, 5], [4, 5], [4, 5], [6, 14], [6, 14], [6, 14], [6, 14], [6, 14], [6, 14], [6, 14], [6, 14], [6, 15], [6, 15], [6, 15], [6, 15], [6, 15], [6, 15], [6, 15], [6, 15], [5, 64], [5, 64], [5, 64], [5, 64], [5, 64], [5, 64], [5, 64], [5, 64], [5, 64], [5, 64], [5, 64], [5, 64], [5, 64], [5, 64], [5, 64], [5, 64], [4, 6], [4, 6], [4, 6], [4, 6], [4, 6], [4, 6], [4, 6], [4, 6], [4, 6], [4, 6], [4, 6], [4, 6], [4, 6], [4, 6], [4, 6], [4, 6], [4, 6], [4, 6], [4, 6], [4, 6], [4, 6], [4, 6], [4, 6], [4, 6], [4, 6], [4, 6], [4, 6], [4, 6], [4, 6], [4, 6], [4, 6], [4, 6], [4, 7], [4, 7], [4, 7], [4, 7], [4, 7], [4, 7], [4, 7], [4, 7], [4, 7], [4, 7], [4, 7], [4, 7], [4, 7], [4, 7], [4, 7], [4, 7], [4, 7], [4, 7], [4, 7], [4, 7], [4, 7], [4, 7], [4, 7], [4, 7], [4, 7], [4, 7], [4, 7], [4, 7], [4, 7], [4, 7], [4, 7], [4, 7]], i = [[-1, -1], [-1, -1], [12, -2], [12, -2], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [-1, -1], [11, 1792], [11, 1792], [11, 1792], [11, 1792], [12, 1984], [12, 1984], [12, 2048], [12, 2048], [12, 2112], [12, 2112], [12, 2176], [12, 2176], [12, 2240], [12, 2240], [12, 2304], [12, 2304], [11, 1856], [11, 1856], [11, 1856], [11, 1856], [11, 1920], [11, 1920], [11, 1920], [11, 1920], [12, 2368], [12, 2368], [12, 2432], [12, 2432], [12, 2496], [12, 2496], [12, 2560], [12, 2560], [10, 18], [10, 18], [10, 18], [10, 18], [10, 18], [10, 18], [10, 18], [10, 18], [12, 52], [12, 52], [13, 640], [13, 704], [13, 768], [13, 832], [12, 55], [12, 55], [12, 56], [12, 56], [13, 1280], [13, 1344], [13, 1408], [13, 1472], [12, 59], [12, 59], [12, 60], [12, 60], [13, 1536], [13, 1600], [11, 24], [11, 24], [11, 24], [11, 24], [11, 25], [11, 25], [11, 25], [11, 25], [13, 1664], [13, 1728], [12, 320], [12, 320], [12, 384], [12, 384], [12, 448], [12, 448], [13, 512], [13, 576], [12, 53], [12, 53], [12, 54], [12, 54], [13, 896], [13, 960], [13, 1024], [13, 1088], [13, 1152], [13, 1216], [10, 64], [10, 64], [10, 64], [10, 64], [10, 64], [10, 64], [10, 64], [10, 64]], n = [[8, 13], [8, 13], [8, 13], [8, 13], [8, 13], [8, 13], [8, 13], [8, 13], [8, 13], [8, 13], [8, 13], [8, 13], [8, 13], [8, 13], [8, 13], [8, 13], [11, 23], [11, 23], [12, 50], [12, 51], [12, 44], [12, 45], [12, 46], [12, 47], [12, 57], [12, 58], [12, 61], [12, 256], [10, 16], [10, 16], [10, 16], [10, 16], [10, 17], [10, 17], [10, 17], [10, 17], [12, 48], [12, 49], [12, 62], [12, 63], [12, 30], [12, 31], [12, 32], [12, 33], [12, 40], [12, 41], [11, 22], [11, 22], [8, 14], [8, 14], [8, 14], [8, 14], [8, 14], [8, 14], [8, 14], [8, 14], [8, 14], [8, 14], [8, 14], [8, 14], [8, 14], [8, 14], [8, 14], [8, 14], [7, 10], [7, 10], [7, 10], [7, 10], [7, 10], [7, 10], [7, 10], [7, 10], [7, 10], [7, 10], [7, 10], [7, 10], [7, 10], [7, 10], [7, 10], [7, 10], [7, 10], [7, 10], [7, 10], [7, 10], [7, 10], [7, 10], [7, 10], [7, 10], [7, 10], [7, 10], [7, 10], [7, 10], [7, 10], [7, 10], [7, 10], [7, 10], [7, 11], [7, 11], [7, 11], [7, 11], [7, 11], [7, 11], [7, 11], [7, 11], [7, 11], [7, 11], [7, 11], [7, 11], [7, 11], [7, 11], [7, 11], [7, 11], [7, 11], [7, 11], [7, 11], [7, 11], [7, 11], [7, 11], [7, 11], [7, 11], [7, 11], [7, 11], [7, 11], [7, 11], [7, 11], [7, 11], [7, 11], [7, 11], [9, 15], [9, 15], [9, 15], [9, 15], [9, 15], [9, 15], [9, 15], [9, 15], [12, 128], [12, 192], [12, 26], [12, 27], [12, 28], [12, 29], [11, 19], [11, 19], [11, 20], [11, 20], [12, 34], [12, 35], [12, 36], [12, 37], [12, 38], [12, 39], [11, 21], [11, 21], [12, 42], [12, 43], [10, 0], [10, 0], [10, 0], [10, 0], [7, 12], [7, 12], [7, 12], [7, 12], [7, 12], [7, 12], [7, 12], [7, 12], [7, 12], [7, 12], [7, 12], [7, 12], [7, 12], [7, 12], [7, 12], [7, 12], [7, 12], [7, 12], [7, 12], [7, 12], [7, 12], [7, 12], [7, 12], [7, 12], [7, 12], [7, 12], [7, 12], [7, 12], [7, 12], [7, 12], [7, 12], [7, 12]], s = [[-1, -1], [-1, -1], [-1, -1], [-1, -1], [6, 9], [6, 8], [5, 7], [5, 7], [4, 6], [4, 6], [4, 6], [4, 6], [4, 5], [4, 5], [4, 5], [4, 5], [3, 1], [3, 1], [3, 1], [3, 1], [3, 1], [3, 1], [3, 1], [3, 1], [3, 4], [3, 4], [3, 4], [3, 4], [3, 4], [3, 4], [3, 4], [3, 4], [2, 3], [2, 3], [2, 3], [2, 3], [2, 3], [2, 3], [2, 3], [2, 3], [2, 3], [2, 3], [2, 3], [2, 3], [2, 3], [2, 3], [2, 3], [2, 3], [2, 2], [2, 2], [2, 2], [2, 2], [2, 2], [2, 2], [2, 2], [2, 2], [2, 2], [2, 2], [2, 2], [2, 2], [2, 2], [2, 2], [2, 2], [2, 2]]; function o(e, t = {}) { if (!e || "function" != typeof e.next) throw new Error('CCITTFaxDecoder - invalid "source" parameter.'); this.source = e; this.eof = !1; this.encoding = t.K || 0; this.eoline = t.EndOfLine || !1; this.byteAlign = t.EncodedByteAlign || !1; this.columns = t.Columns || 1728; this.rows = t.Rows || 0; let a, r = t.EndOfBlock; null == r && (r = !0); this.eoblock = r; this.black = t.BlackIs1 || !1; this.codingLine = new Uint32Array(this.columns + 1); this.refLine = new Uint32Array(this.columns + 2); this.codingLine[0] = this.columns; this.codingPos = 0; this.row = 0; this.nextLine2D = this.encoding < 0; this.inputBits = 0; this.inputBuf = 0; this.outputBits = 0; this.rowsDone = !1; for (; 0 === (a = this._lookBits(12));)this._eatBits(1); 1 === a && this._eatBits(12); if (this.encoding > 0) { this.nextLine2D = !this._lookBits(1); this._eatBits(1) } } o.prototype = { readNextChar() { if (this.eof) return -1; const e = this.refLine, t = this.codingLine, a = this.columns; let i, n, s, o, c; if (0 === this.outputBits) { this.rowsDone && (this.eof = !0); if (this.eof) return -1; this.err = !1; let s, c, l; if (this.nextLine2D) { for (o = 0; t[o] < a; ++o)e[o] = t[o]; e[o++] = a; e[o] = a; t[0] = 0; this.codingPos = 0; i = 0; n = 0; for (; t[this.codingPos] < a;) { s = this._getTwoDimCode(); switch (s) { case 0: this._addPixels(e[i + 1], n); e[i + 1] < a && (i += 2); break; case 1: s = c = 0; if (n) { do { s += l = this._getBlackCode() } while (l >= 64); do { c += l = this._getWhiteCode() } while (l >= 64) } else { do { s += l = this._getWhiteCode() } while (l >= 64); do { c += l = this._getBlackCode() } while (l >= 64) } this._addPixels(t[this.codingPos] + s, n); t[this.codingPos] < a && this._addPixels(t[this.codingPos] + c, 1 ^ n); for (; e[i] <= t[this.codingPos] && e[i] < a;)i += 2; break; case 7: this._addPixels(e[i] + 3, n); n ^= 1; if (t[this.codingPos] < a) { ++i; for (; e[i] <= t[this.codingPos] && e[i] < a;)i += 2 } break; case 5: this._addPixels(e[i] + 2, n); n ^= 1; if (t[this.codingPos] < a) { ++i; for (; e[i] <= t[this.codingPos] && e[i] < a;)i += 2 } break; case 3: this._addPixels(e[i] + 1, n); n ^= 1; if (t[this.codingPos] < a) { ++i; for (; e[i] <= t[this.codingPos] && e[i] < a;)i += 2 } break; case 2: this._addPixels(e[i], n); n ^= 1; if (t[this.codingPos] < a) { ++i; for (; e[i] <= t[this.codingPos] && e[i] < a;)i += 2 } break; case 8: this._addPixelsNeg(e[i] - 3, n); n ^= 1; if (t[this.codingPos] < a) { i > 0 ? --i : ++i; for (; e[i] <= t[this.codingPos] && e[i] < a;)i += 2 } break; case 6: this._addPixelsNeg(e[i] - 2, n); n ^= 1; if (t[this.codingPos] < a) { i > 0 ? --i : ++i; for (; e[i] <= t[this.codingPos] && e[i] < a;)i += 2 } break; case 4: this._addPixelsNeg(e[i] - 1, n); n ^= 1; if (t[this.codingPos] < a) { i > 0 ? --i : ++i; for (; e[i] <= t[this.codingPos] && e[i] < a;)i += 2 } break; case -1: this._addPixels(a, 0); this.eof = !0; break; default: (0, r.info)("bad 2d code"); this._addPixels(a, 0); this.err = !0 } } } else { t[0] = 0; this.codingPos = 0; n = 0; for (; t[this.codingPos] < a;) { s = 0; if (n) do { s += l = this._getBlackCode() } while (l >= 64); else do { s += l = this._getWhiteCode() } while (l >= 64); this._addPixels(t[this.codingPos] + s, n); n ^= 1 } } let h = !1; this.byteAlign && (this.inputBits &= -8); if (this.eoblock || this.row !== this.rows - 1) { s = this._lookBits(12); if (this.eoline) for (; -1 !== s && 1 !== s;) { this._eatBits(1); s = this._lookBits(12) } else for (; 0 === s;) { this._eatBits(1); s = this._lookBits(12) } if (1 === s) { this._eatBits(12); h = !0 } else -1 === s && (this.eof = !0) } else this.rowsDone = !0; if (!this.eof && this.encoding > 0 && !this.rowsDone) { this.nextLine2D = !this._lookBits(1); this._eatBits(1) } if (this.eoblock && h && this.byteAlign) { s = this._lookBits(12); if (1 === s) { this._eatBits(12); if (this.encoding > 0) { this._lookBits(1); this._eatBits(1) } if (this.encoding >= 0) for (o = 0; o < 4; ++o) { s = this._lookBits(12); 1 !== s && (0, r.info)("bad rtc code: " + s); this._eatBits(12); if (this.encoding > 0) { this._lookBits(1); this._eatBits(1) } } this.eof = !0 } } else if (this.err && this.eoline) { for (; ;) { s = this._lookBits(13); if (-1 === s) { this.eof = !0; return -1 } if (s >> 1 == 1) break; this._eatBits(1) } this._eatBits(12); if (this.encoding > 0) { this._eatBits(1); this.nextLine2D = !(1 & s) } } t[0] > 0 ? this.outputBits = t[this.codingPos = 0] : this.outputBits = t[this.codingPos = 1]; this.row++ } if (this.outputBits >= 8) { c = 1 & this.codingPos ? 0 : 255; this.outputBits -= 8; if (0 === this.outputBits && t[this.codingPos] < a) { this.codingPos++; this.outputBits = t[this.codingPos] - t[this.codingPos - 1] } } else { s = 8; c = 0; do { if (this.outputBits > s) { c <<= s; 1 & this.codingPos || (c |= 255 >> 8 - s); this.outputBits -= s; s = 0 } else { c <<= this.outputBits; 1 & this.codingPos || (c |= 255 >> 8 - this.outputBits); s -= this.outputBits; this.outputBits = 0; if (t[this.codingPos] < a) { this.codingPos++; this.outputBits = t[this.codingPos] - t[this.codingPos - 1] } else if (s > 0) { c <<= s; s = 0 } } } while (s) } this.black && (c ^= 255); return c }, _addPixels(e, t) { const a = this.codingLine; let i = this.codingPos; if (e > a[i]) { if (e > this.columns) { (0, r.info)("row is wrong length"); this.err = !0; e = this.columns } 1 & i ^ t && ++i; a[i] = e } this.codingPos = i }, _addPixelsNeg(e, t) { const a = this.codingLine; let i = this.codingPos; if (e > a[i]) { if (e > this.columns) { (0, r.info)("row is wrong length"); this.err = !0; e = this.columns } 1 & i ^ t && ++i; a[i] = e } else if (e < a[i]) { if (e < 0) { (0, r.info)("invalid code"); this.err = !0; e = 0 } for (; i > 0 && e < a[i - 1];)--i; a[i] = e } this.codingPos = i }, _findTableCode(e, t, a, r) { const i = r || 0; for (let r = e; r <= t; ++r) { let e = this._lookBits(r); if (-1 === e) return [!0, 1, !1]; r < t && (e <<= t - r); if (!i || e >= i) { const t = a[e - i]; if (t[0] === r) { this._eatBits(r); return [!0, t[1], !0] } } } return [!1, 0, !1] }, _getTwoDimCode() { let t, a = 0; if (this.eoblock) { a = this._lookBits(7); t = e[a]; if (t && t[0] > 0) { this._eatBits(t[0]); return t[1] } } else { const t = this._findTableCode(1, 7, e); if (t[0] && t[2]) return t[1] } (0, r.info)("Bad two dim code"); return -1 }, _getWhiteCode() { let e, i = 0; if (this.eoblock) { i = this._lookBits(12); if (-1 === i) return 1; e = i >> 5 == 0 ? t[i] : a[i >> 3]; if (e[0] > 0) { this._eatBits(e[0]); return e[1] } } else { let e = this._findTableCode(1, 9, a); if (e[0]) return e[1]; e = this._findTableCode(11, 12, t); if (e[0]) return e[1] } (0, r.info)("bad white code"); this._eatBits(1); return 1 }, _getBlackCode() { let e, t; if (this.eoblock) { e = this._lookBits(13); if (-1 === e) return 1; t = e >> 7 == 0 ? i[e] : e >> 9 == 0 && e >> 7 != 0 ? n[(e >> 1) - 64] : s[e >> 7]; if (t[0] > 0) { this._eatBits(t[0]); return t[1] } } else { let e = this._findTableCode(2, 6, s); if (e[0]) return e[1]; e = this._findTableCode(7, 12, n, 64); if (e[0]) return e[1]; e = this._findTableCode(10, 13, i); if (e[0]) return e[1] } (0, r.info)("bad black code"); this._eatBits(1); return 1 }, _lookBits(e) { let t; for (; this.inputBits < e;) { if (-1 === (t = this.source.next())) return 0 === this.inputBits ? -1 : this.inputBuf << e - this.inputBits & 65535 >> 16 - e; this.inputBuf = this.inputBuf << 8 | t; this.inputBits += 8 } return this.inputBuf >> this.inputBits - e & 65535 >> 16 - e }, _eatBits(e) { (this.inputBits -= e) < 0 && (this.inputBits = 0) } }; return o }(); t.CCITTFaxDecoder = i }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.Jbig2Stream = void 0; var r = a(4), i = a(11), n = a(15), s = a(2); const o = function () { function e(e, t, a, r) { this.stream = e; this.maybeLength = t; this.dict = a; this.params = r; i.DecodeStream.call(this, t) } e.prototype = Object.create(i.DecodeStream.prototype); Object.defineProperty(e.prototype, "bytes", { get() { return (0, s.shadow)(this, "bytes", this.stream.getBytes(this.maybeLength)) }, configurable: !0 }); e.prototype.ensureBuffer = function (e) { }; e.prototype.readBlock = function () { if (this.eof) return; const e = new n.Jbig2Image, t = []; if ((0, r.isDict)(this.params)) { const e = this.params.get("JBIG2Globals"); if ((0, r.isStream)(e)) { const a = e.getBytes(); t.push({ data: a, start: 0, end: a.length }) } } t.push({ data: this.bytes, start: 0, end: this.bytes.length }); const a = e.parseChunks(t), i = a.length; for (let e = 0; e < i; e++)a[e] ^= 255; this.buffer = a; this.bufferLength = i; this.eof = !0 }; return e }(); t.Jbig2Stream = o }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.Jbig2Image = void 0; var r = a(2), i = a(7), n = a(16), s = a(13); class o extends r.BaseException { constructor(e) { super(`JBIG2 error: ${e}`) } } var c = function () { function e() { } e.prototype = { getContexts(e) { return e in this ? this[e] : this[e] = new Int8Array(65536) } }; function t(e, t, a) { this.data = e; this.start = t; this.end = a } t.prototype = { get decoder() { var e = new n.ArithmeticDecoder(this.data, this.start, this.end); return (0, r.shadow)(this, "decoder", e) }, get contextCache() { var t = new e; return (0, r.shadow)(this, "contextCache", t) } }; function a(e, t, a) { var r = e.getContexts(t), i = 1; function n(e) { for (var t = 0, n = 0; n < e; n++) { var s = a.readBit(r, i); i = i < 256 ? i << 1 | s : 511 & (i << 1 | s) | 256; t = t << 1 | s } return t >>> 0 } var s = n(1), o = n(1) ? n(1) ? n(1) ? n(1) ? n(1) ? n(32) + 4436 : n(12) + 340 : n(8) + 84 : n(6) + 20 : n(4) + 4 : n(2); return 0 === s ? o : o > 0 ? -o : null } function c(e, t, a) { for (var r = e.getContexts("IAID"), i = 1, n = 0; n < a; n++) { i = i << 1 | t.readBit(r, i) } return a < 31 ? i & (1 << a) - 1 : 2147483647 & i } var l = ["SymbolDictionary", null, null, null, "IntermediateTextRegion", null, "ImmediateTextRegion", "ImmediateLosslessTextRegion", null, null, null, null, null, null, null, null, "PatternDictionary", null, null, null, "IntermediateHalftoneRegion", null, "ImmediateHalftoneRegion", "ImmediateLosslessHalftoneRegion", null, null, null, null, null, null, null, null, null, null, null, null, "IntermediateGenericRegion", null, "ImmediateGenericRegion", "ImmediateLosslessGenericRegion", "IntermediateGenericRefinementRegion", null, "ImmediateGenericRefinementRegion", "ImmediateLosslessGenericRefinementRegion", null, null, null, null, "PageInformation", "EndOfPage", "EndOfStripe", "EndOfFile", "Profiles", "Tables", null, null, null, null, null, null, null, null, "Extension"], h = [[{ x: -1, y: -2 }, { x: 0, y: -2 }, { x: 1, y: -2 }, { x: -2, y: -1 }, { x: -1, y: -1 }, { x: 0, y: -1 }, { x: 1, y: -1 }, { x: 2, y: -1 }, { x: -4, y: 0 }, { x: -3, y: 0 }, { x: -2, y: 0 }, { x: -1, y: 0 }], [{ x: -1, y: -2 }, { x: 0, y: -2 }, { x: 1, y: -2 }, { x: 2, y: -2 }, { x: -2, y: -1 }, { x: -1, y: -1 }, { x: 0, y: -1 }, { x: 1, y: -1 }, { x: 2, y: -1 }, { x: -3, y: 0 }, { x: -2, y: 0 }, { x: -1, y: 0 }], [{ x: -1, y: -2 }, { x: 0, y: -2 }, { x: 1, y: -2 }, { x: -2, y: -1 }, { x: -1, y: -1 }, { x: 0, y: -1 }, { x: 1, y: -1 }, { x: -2, y: 0 }, { x: -1, y: 0 }], [{ x: -3, y: -1 }, { x: -2, y: -1 }, { x: -1, y: -1 }, { x: 0, y: -1 }, { x: 1, y: -1 }, { x: -4, y: 0 }, { x: -3, y: 0 }, { x: -2, y: 0 }, { x: -1, y: 0 }]], u = [{ coding: [{ x: 0, y: -1 }, { x: 1, y: -1 }, { x: -1, y: 0 }], reference: [{ x: 0, y: -1 }, { x: 1, y: -1 }, { x: -1, y: 0 }, { x: 0, y: 0 }, { x: 1, y: 0 }, { x: -1, y: 1 }, { x: 0, y: 1 }, { x: 1, y: 1 }] }, { coding: [{ x: -1, y: -1 }, { x: 0, y: -1 }, { x: 1, y: -1 }, { x: -1, y: 0 }], reference: [{ x: 0, y: -1 }, { x: -1, y: 0 }, { x: 0, y: 0 }, { x: 1, y: 0 }, { x: 0, y: 1 }, { x: 1, y: 1 }] }], d = [39717, 1941, 229, 405], f = [32, 8]; function g(e, t, a, r, i, n, s, o) { if (e) { return B(new E(o.data, o.start, o.end), t, a, !1) } if (0 === r && !n && !i && 4 === s.length && 3 === s[0].x && -1 === s[0].y && -3 === s[1].x && -1 === s[1].y && 2 === s[2].x && -2 === s[2].y && -2 === s[3].x && -2 === s[3].y) return function (e, t, a) { var r, i, n, s, o, c, l, h = a.decoder, u = a.contextCache.getContexts("GB"), d = []; for (i = 0; i < t; i++) { o = d[i] = new Uint8Array(e); c = i < 1 ? o : d[i - 1]; r = (l = i < 2 ? o : d[i - 2])[0] << 13 | l[1] << 12 | l[2] << 11 | c[0] << 7 | c[1] << 6 | c[2] << 5 | c[3] << 4; for (n = 0; n < e; n++) { o[n] = s = h.readBit(u, r); r = (31735 & r) << 1 | (n + 3 < e ? l[n + 3] << 11 : 0) | (n + 4 < e ? c[n + 4] << 4 : 0) | s } } return d }(t, a, o); var c = !!n, l = h[r].concat(s); l.sort((function (e, t) { return e.y - t.y || e.x - t.x })); var u, f, g = l.length, m = new Int8Array(g), p = new Int8Array(g), b = [], y = 0, v = 0, w = 0, k = 0; for (f = 0; f < g; f++) { m[f] = l[f].x; p[f] = l[f].y; v = Math.min(v, l[f].x); w = Math.max(w, l[f].x); k = Math.min(k, l[f].y); f < g - 1 && l[f].y === l[f + 1].y && l[f].x === l[f + 1].x - 1 ? y |= 1 << g - 1 - f : b.push(f) } var S = b.length, C = new Int8Array(S), x = new Int8Array(S), A = new Uint16Array(S); for (u = 0; u < S; u++) { f = b[u]; C[u] = l[f].x; x[u] = l[f].y; A[u] = 1 << g - 1 - f } for (var I, F, T, O, P, D = -v, N = -k, M = t - w, L = d[r], R = new Uint8Array(t), U = [], q = o.decoder, j = o.contextCache.getContexts("GB"), _ = 0, z = 0, H = 0; H < a; H++) { if (i) { if (_ ^= q.readBit(j, L)) { U.push(R); continue } } R = new Uint8Array(R); U.push(R); for (I = 0; I < t; I++)if (c && n[H][I]) R[I] = 0; else { if (I >= D && I < M && H >= N) { z = z << 1 & y; for (f = 0; f < S; f++) { F = H + x[f]; T = I + C[f]; (O = U[F][T]) && (z |= O = A[f]) } } else { z = 0; P = g - 1; for (f = 0; f < g; f++, P--)(T = I + m[f]) >= 0 && T < t && (F = H + p[f]) >= 0 && (O = U[F][T]) && (z |= O << P) } var G = q.readBit(j, z); R[I] = G } } return U } function m(e, t, a, r, i, n, s, c, l) { var h = u[a].coding; 0 === a && (h = h.concat([c[0]])); var d, g = h.length, m = new Int32Array(g), p = new Int32Array(g); for (d = 0; d < g; d++) { m[d] = h[d].x; p[d] = h[d].y } var b = u[a].reference; 0 === a && (b = b.concat([c[1]])); var y = b.length, v = new Int32Array(y), w = new Int32Array(y); for (d = 0; d < y; d++) { v[d] = b[d].x; w[d] = b[d].y } for (var k = r[0].length, S = r.length, C = f[a], x = [], A = l.decoder, I = l.contextCache.getContexts("GR"), F = 0, T = 0; T < t; T++) { if (s) { if (F ^= A.readBit(I, C)) throw new o("prediction is not supported") } var E = new Uint8Array(e); x.push(E); for (var O = 0; O < e; O++) { var P, B, D = 0; for (d = 0; d < g; d++) { P = T + p[d]; B = O + m[d]; P < 0 || B < 0 || B >= e ? D <<= 1 : D = D << 1 | x[P][B] } for (d = 0; d < y; d++) { P = T + w[d] - n; B = O + v[d] - i; P < 0 || P >= S || B < 0 || B >= k ? D <<= 1 : D = D << 1 | r[P][B] } var N = A.readBit(I, D); E[O] = N } } return x } function p(e, t, r, i, n, s, l, h, u, d, f, g, p, b, y, v, w, k, S) { if (e && t) throw new o("refinement with Huffman is not supported"); var C, x, A = []; for (C = 0; C < i; C++) { x = new Uint8Array(r); if (n) for (var I = 0; I < r; I++)x[I] = n; A.push(x) } var F = w.decoder, T = w.contextCache, E = e ? -b.tableDeltaT.decode(S) : -a(T, "IADT", F), O = 0; C = 0; for (; C < s;) { E += e ? b.tableDeltaT.decode(S) : a(T, "IADT", F); for (var P = O += e ? b.tableFirstS.decode(S) : a(T, "IAFS", F); ;) { let i = 0; l > 1 && (i = e ? S.readBits(k) : a(T, "IAIT", F)); var B = l * E + i, D = e ? b.symbolIDTable.decode(S) : c(T, F, u), N = t && (e ? S.readBit() : a(T, "IARI", F)), M = h[D], L = M[0].length, R = M.length; if (N) { var U = a(T, "IARDW", F), q = a(T, "IARDH", F); M = m(L += U, R += q, y, M, (U >> 1) + a(T, "IARDX", F), (q >> 1) + a(T, "IARDY", F), !1, v, w) } var j, _, z, H = B - (1 & g ? 0 : R - 1), G = P - (2 & g ? L - 1 : 0); if (d) { for (j = 0; j < R; j++)if (x = A[G + j]) { z = M[j]; var W = Math.min(r - H, L); switch (p) { case 0: for (_ = 0; _ < W; _++)x[H + _] |= z[_]; break; case 2: for (_ = 0; _ < W; _++)x[H + _] ^= z[_]; break; default: throw new o(`operator ${p} is not supported`) } } P += R - 1 } else { for (_ = 0; _ < R; _++)if (x = A[H + _]) { z = M[_]; switch (p) { case 0: for (j = 0; j < L; j++)x[G + j] |= z[j]; break; case 2: for (j = 0; j < L; j++)x[G + j] ^= z[j]; break; default: throw new o(`operator ${p} is not supported`) } } P += L - 1 } C++; var X = e ? b.tableDeltaS.decode(S) : a(T, "IADS", F); if (null === X) break; P += X + f } } return A } function b(e, t) { var a = {}; a.number = (0, i.readUint32)(e, t); var r = e[t + 4], n = 63 & r; if (!l[n]) throw new o("invalid segment type: " + n); a.type = n; a.typeName = l[n]; a.deferredNonRetain = !!(128 & r); var s = !!(64 & r), c = e[t + 5], h = c >> 5 & 7, u = [31 & c], d = t + 6; if (7 === c) { h = 536870911 & (0, i.readUint32)(e, d - 1); d += 3; var f = h + 7 >> 3; u[0] = e[d++]; for (; --f > 0;)u.push(e[d++]) } else if (5 === c || 6 === c) throw new o("invalid referred-to flags"); a.retainBits = u; let g = 4; a.number <= 256 ? g = 1 : a.number <= 65536 && (g = 2); var m, p, b = []; for (m = 0; m < h; m++) { let t; t = 1 === g ? e[d] : 2 === g ? (0, i.readUint16)(e, d) : (0, i.readUint32)(e, d); b.push(t); d += g } a.referredTo = b; if (s) { a.pageAssociation = (0, i.readUint32)(e, d); d += 4 } else a.pageAssociation = e[d++]; a.length = (0, i.readUint32)(e, d); d += 4; if (4294967295 === a.length) { if (38 !== n) throw new o("invalid unknown segment length"); var y = v(e, d), k = !!(1 & e[d + w]), S = new Uint8Array(6); if (!k) { S[0] = 255; S[1] = 172 } S[2] = y.height >>> 24 & 255; S[3] = y.height >> 16 & 255; S[4] = y.height >> 8 & 255; S[5] = 255 & y.height; for (m = d, p = e.length; m < p; m++) { for (var C = 0; C < 6 && S[C] === e[m + C];)C++; if (6 === C) { a.length = m + 6; break } } if (4294967295 === a.length) throw new o("segment end was not found") } a.headerEnd = d; return a } function y(e, t, a, r) { for (var i = [], n = a; n < r;) { var s = b(t, n); n = s.headerEnd; var o = { header: s, data: t }; if (!e.randomAccess) { o.start = n; n += s.length; o.end = n } i.push(o); if (51 === s.type) break } if (e.randomAccess) for (var c = 0, l = i.length; c < l; c++) { i[c].start = n; n += i[c].header.length; i[c].end = n } return i } function v(e, t) { return { width: (0, i.readUint32)(e, t), height: (0, i.readUint32)(e, t + 4), x: (0, i.readUint32)(e, t + 8), y: (0, i.readUint32)(e, t + 12), combinationOperator: 7 & e[t + 16] } } var w = 17; function k(e, t) { var a, r, n, s, c = e.header, l = e.data, h = e.start, u = e.end; switch (c.type) { case 0: var d = {}, f = (0, i.readUint16)(l, h); d.huffman = !!(1 & f); d.refinement = !!(2 & f); d.huffmanDHSelector = f >> 2 & 3; d.huffmanDWSelector = f >> 4 & 3; d.bitmapSizeSelector = f >> 6 & 1; d.aggregationInstancesSelector = f >> 7 & 1; d.bitmapCodingContextUsed = !!(256 & f); d.bitmapCodingContextRetained = !!(512 & f); d.template = f >> 10 & 3; d.refinementTemplate = f >> 12 & 1; h += 2; if (!d.huffman) { s = 0 === d.template ? 4 : 1; r = []; for (n = 0; n < s; n++) { r.push({ x: (0, i.readInt8)(l, h), y: (0, i.readInt8)(l, h + 1) }); h += 2 } d.at = r } if (d.refinement && !d.refinementTemplate) { r = []; for (n = 0; n < 2; n++) { r.push({ x: (0, i.readInt8)(l, h), y: (0, i.readInt8)(l, h + 1) }); h += 2 } d.refinementAt = r } d.numberOfExportedSymbols = (0, i.readUint32)(l, h); h += 4; d.numberOfNewSymbols = (0, i.readUint32)(l, h); h += 4; a = [d, c.number, c.referredTo, l, h, u]; break; case 6: case 7: var g = {}; g.info = v(l, h); h += w; var m = (0, i.readUint16)(l, h); h += 2; g.huffman = !!(1 & m); g.refinement = !!(2 & m); g.logStripSize = m >> 2 & 3; g.stripSize = 1 << g.logStripSize; g.referenceCorner = m >> 4 & 3; g.transposed = !!(64 & m); g.combinationOperator = m >> 7 & 3; g.defaultPixelValue = m >> 9 & 1; g.dsOffset = m << 17 >> 27; g.refinementTemplate = m >> 15 & 1; if (g.huffman) { var p = (0, i.readUint16)(l, h); h += 2; g.huffmanFS = 3 & p; g.huffmanDS = p >> 2 & 3; g.huffmanDT = p >> 4 & 3; g.huffmanRefinementDW = p >> 6 & 3; g.huffmanRefinementDH = p >> 8 & 3; g.huffmanRefinementDX = p >> 10 & 3; g.huffmanRefinementDY = p >> 12 & 3; g.huffmanRefinementSizeSelector = !!(16384 & p) } if (g.refinement && !g.refinementTemplate) { r = []; for (n = 0; n < 2; n++) { r.push({ x: (0, i.readInt8)(l, h), y: (0, i.readInt8)(l, h + 1) }); h += 2 } g.refinementAt = r } g.numberOfSymbolInstances = (0, i.readUint32)(l, h); h += 4; a = [g, c.referredTo, l, h, u]; break; case 16: const e = {}, t = l[h++]; e.mmr = !!(1 & t); e.template = t >> 1 & 3; e.patternWidth = l[h++]; e.patternHeight = l[h++]; e.maxPatternIndex = (0, i.readUint32)(l, h); h += 4; a = [e, c.number, l, h, u]; break; case 22: case 23: const C = {}; C.info = v(l, h); h += w; const x = l[h++]; C.mmr = !!(1 & x); C.template = x >> 1 & 3; C.enableSkip = !!(8 & x); C.combinationOperator = x >> 4 & 7; C.defaultPixelValue = x >> 7 & 1; C.gridWidth = (0, i.readUint32)(l, h); h += 4; C.gridHeight = (0, i.readUint32)(l, h); h += 4; C.gridOffsetX = 4294967295 & (0, i.readUint32)(l, h); h += 4; C.gridOffsetY = 4294967295 & (0, i.readUint32)(l, h); h += 4; C.gridVectorX = (0, i.readUint16)(l, h); h += 2; C.gridVectorY = (0, i.readUint16)(l, h); h += 2; a = [C, c.referredTo, l, h, u]; break; case 38: case 39: var b = {}; b.info = v(l, h); h += w; var y = l[h++]; b.mmr = !!(1 & y); b.template = y >> 1 & 3; b.prediction = !!(8 & y); if (!b.mmr) { s = 0 === b.template ? 4 : 1; r = []; for (n = 0; n < s; n++) { r.push({ x: (0, i.readInt8)(l, h), y: (0, i.readInt8)(l, h + 1) }); h += 2 } b.at = r } a = [b, l, h, u]; break; case 48: var k = { width: (0, i.readUint32)(l, h), height: (0, i.readUint32)(l, h + 4), resolutionX: (0, i.readUint32)(l, h + 8), resolutionY: (0, i.readUint32)(l, h + 12) }; 4294967295 === k.height && delete k.height; var S = l[h + 16]; (0, i.readUint16)(l, h + 17); k.lossless = !!(1 & S); k.refinement = !!(2 & S); k.defaultPixelValue = S >> 2 & 1; k.combinationOperator = S >> 3 & 3; k.requiresBuffer = !!(32 & S); k.combinationOperatorOverride = !!(64 & S); a = [k]; break; case 49: case 50: case 51: break; case 53: a = [c.number, l, h, u]; break; case 62: break; default: throw new o(`segment type ${c.typeName}(${c.type})` + " is not implemented") }var C = "on" + c.typeName; C in t && t[C].apply(t, a) } function S(e, t) { for (var a = 0, r = e.length; a < r; a++)k(e[a], t) } function C() { } C.prototype = { onPageInformation: function (e) { this.currentPageInfo = e; var t = e.width + 7 >> 3, a = new Uint8ClampedArray(t * e.height); if (e.defaultPixelValue) for (var r = 0, i = a.length; r < i; r++)a[r] = 255; this.buffer = a }, drawBitmap: function (e, t) { var a, r, i, n, s = this.currentPageInfo, c = e.width, l = e.height, h = s.width + 7 >> 3, u = s.combinationOperatorOverride ? e.combinationOperator : s.combinationOperator, d = this.buffer, f = 128 >> (7 & e.x), g = e.y * h + (e.x >> 3); switch (u) { case 0: for (a = 0; a < l; a++) { i = f; n = g; for (r = 0; r < c; r++) { t[a][r] && (d[n] |= i); if (!(i >>= 1)) { i = 128; n++ } } g += h } break; case 2: for (a = 0; a < l; a++) { i = f; n = g; for (r = 0; r < c; r++) { t[a][r] && (d[n] ^= i); if (!(i >>= 1)) { i = 128; n++ } } g += h } break; default: throw new o(`operator ${u} is not supported`) } }, onImmediateGenericRegion: function (e, a, r, i) { var n = e.info, s = new t(a, r, i), o = g(e.mmr, n.width, n.height, e.template, e.prediction, null, e.at, s); this.drawBitmap(n, o) }, onImmediateLosslessGenericRegion: function () { this.onImmediateGenericRegion.apply(this, arguments) }, onSymbolDictionary: function (e, r, n, s, l, h) { let u, d; if (e.huffman) { u = function (e, t, a) { let r, i, n, s, c = 0; switch (e.huffmanDHSelector) { case 0: case 1: r = T(e.huffmanDHSelector + 4); break; case 3: r = O(c, t, a); c++; break; default: throw new o("invalid Huffman DH selector") }switch (e.huffmanDWSelector) { case 0: case 1: i = T(e.huffmanDWSelector + 2); break; case 3: i = O(c, t, a); c++; break; default: throw new o("invalid Huffman DW selector") }if (e.bitmapSizeSelector) { n = O(c, t, a); c++ } else n = T(1); s = e.aggregationInstancesSelector ? O(c, t, a) : T(1); return { tableDeltaHeight: r, tableDeltaWidth: i, tableBitmapSize: n, tableAggregateInstances: s } }(e, n, this.customTables); d = new E(s, l, h) } var f = this.symbols; f || (this.symbols = f = {}); for (var b = [], y = 0, v = n.length; y < v; y++) { const e = f[n[y]]; e && (b = b.concat(e)) } var w = new t(s, l, h); f[r] = function (e, t, r, n, s, l, h, u, d, f, b, y) { if (e && t) throw new o("symbol refinement with Huffman is not supported"); var v = [], w = 0, k = (0, i.log2)(r.length + n), S = b.decoder, C = b.contextCache; let x, A; if (e) { x = T(1); A = []; k = Math.max(k, 1) } for (; v.length < n;) { w += e ? l.tableDeltaHeight.decode(y) : a(C, "IADH", S); let i = 0, n = 0; const s = e ? A.length : 0; for (; ;) { var I, F = e ? l.tableDeltaWidth.decode(y) : a(C, "IADW", S); if (null === F) break; i += F; n += i; if (t) { var E = a(C, "IAAI", S); if (E > 1) I = p(e, t, i, w, 0, E, 1, r.concat(v), k, 0, 0, 1, 0, l, d, f, b, 0, y); else { var O = c(C, S, k), D = a(C, "IARDX", S), N = a(C, "IARDY", S); I = m(i, w, d, O < r.length ? r[O] : v[O - r.length], D, N, !1, f, b) } v.push(I) } else if (e) A.push(i); else { I = g(!1, i, w, h, !1, null, u, b); v.push(I) } } if (e && !t) { const e = l.tableBitmapSize.decode(y); y.byteAlign(); let t; if (0 === e) t = P(y, n, w); else { const a = y.end, r = y.position + e; y.end = r; t = B(y, n, w, !1); y.end = a; y.position = r } const a = A.length; if (s === a - 1) v.push(t); else { let e, r, i, n, o, c = 0; for (e = s; e < a; e++) { n = A[e]; i = c + n; o = []; for (r = 0; r < w; r++)o.push(t[r].subarray(c, i)); v.push(o); c = i } } } } for (var M = [], L = [], R = !1, U = r.length + n; L.length < U;) { for (var q = e ? x.decode(y) : a(C, "IAEX", S); q--;)L.push(R); R = !R } for (var j = 0, _ = r.length; j < _; j++)L[j] && M.push(r[j]); for (var z = 0; z < n; j++, z++)L[j] && M.push(v[z]); return M }(e.huffman, e.refinement, b, e.numberOfNewSymbols, e.numberOfExportedSymbols, u, e.template, e.at, e.refinementTemplate, e.refinementAt, w, d) }, onImmediateTextRegion: function (e, a, r, n, s) { var c = e.info; let l, h; for (var u = this.symbols, d = [], f = 0, g = a.length; f < g; f++) { const e = u[a[f]]; e && (d = d.concat(e)) } var m = (0, i.log2)(d.length); if (e.huffman) { h = new E(r, n, s); l = function (e, t, a, r, i) { const n = []; for (let e = 0; e <= 34; e++) { const t = i.readBits(4); n.push(new x([e, t, 0, 0])) } const s = new I(n, !1); n.length = 0; for (let e = 0; e < r;) { const t = s.decode(i); if (t >= 32) { let a, r, s; switch (t) { case 32: if (0 === e) throw new o("no previous value in symbol ID table"); r = i.readBits(2) + 3; a = n[e - 1].prefixLength; break; case 33: r = i.readBits(3) + 3; a = 0; break; case 34: r = i.readBits(7) + 11; a = 0; break; default: throw new o("invalid code length in symbol ID table") }for (s = 0; s < r; s++) { n.push(new x([e, a, 0, 0])); e++ } } else { n.push(new x([e, t, 0, 0])); e++ } } i.byteAlign(); const c = new I(n, !1); let l, h, u, d = 0; switch (e.huffmanFS) { case 0: case 1: l = T(e.huffmanFS + 6); break; case 3: l = O(d, t, a); d++; break; default: throw new o("invalid Huffman FS selector") }switch (e.huffmanDS) { case 0: case 1: case 2: h = T(e.huffmanDS + 8); break; case 3: h = O(d, t, a); d++; break; default: throw new o("invalid Huffman DS selector") }switch (e.huffmanDT) { case 0: case 1: case 2: u = T(e.huffmanDT + 11); break; case 3: u = O(d, t, a); d++; break; default: throw new o("invalid Huffman DT selector") }if (e.refinement) throw new o("refinement with Huffman is not supported"); return { symbolIDTable: c, tableFirstS: l, tableDeltaS: h, tableDeltaT: u } }(e, a, this.customTables, d.length, h) } var b = new t(r, n, s), y = p(e.huffman, e.refinement, c.width, c.height, e.defaultPixelValue, e.numberOfSymbolInstances, e.stripSize, d, m, e.transposed, e.dsOffset, e.referenceCorner, e.combinationOperator, l, e.refinementTemplate, e.refinementAt, b, e.logStripSize, h); this.drawBitmap(c, y) }, onImmediateLosslessTextRegion: function () { this.onImmediateTextRegion.apply(this, arguments) }, onPatternDictionary(e, a, r, i, n) { let s = this.patterns; s || (this.patterns = s = {}); const o = new t(r, i, n); s[a] = function (e, t, a, r, i, n) { const s = []; if (!e) { s.push({ x: -t, y: 0 }); if (0 === i) { s.push({ x: -3, y: -1 }); s.push({ x: 2, y: -2 }); s.push({ x: -2, y: -2 }) } } const o = g(e, (r + 1) * t, a, i, !1, null, s, n), c = []; for (let e = 0; e <= r; e++) { const r = [], i = t * e, n = i + t; for (let e = 0; e < a; e++)r.push(o[e].subarray(i, n)); c.push(r) } return c }(e.mmr, e.patternWidth, e.patternHeight, e.maxPatternIndex, e.template, o) }, onImmediateHalftoneRegion(e, a, r, n, s) { const c = this.patterns[a[0]], l = e.info, h = new t(r, n, s), u = function (e, t, a, r, n, s, c, l, h, u, d, f, m, p, b) { if (c) throw new o("skip is not supported"); if (0 !== l) throw new o("operator " + l + " is not supported in halftone region"); const y = []; let v, w, k; for (v = 0; v < n; v++) { k = new Uint8Array(r); if (s) for (w = 0; w < r; w++)k[w] = s; y.push(k) } const S = t.length, C = t[0], x = C[0].length, A = C.length, I = (0, i.log2)(S), F = []; if (!e) { F.push({ x: a <= 1 ? 3 : 2, y: -1 }); if (0 === a) { F.push({ x: -3, y: -1 }); F.push({ x: 2, y: -2 }); F.push({ x: -2, y: -2 }) } } const T = []; let O, P, D, N, M, L, R, U, q, j, _; e && (O = new E(b.data, b.start, b.end)); for (v = I - 1; v >= 0; v--) { P = e ? B(O, h, u, !0) : g(!1, h, u, a, !1, null, F, b); T[v] = P } for (D = 0; D < u; D++)for (N = 0; N < h; N++) { M = 0; L = 0; for (w = I - 1; w >= 0; w--) { M = T[w][D][N] ^ M; L |= M << w } R = t[L]; U = d + D * p + N * m >> 8; q = f + D * m - N * p >> 8; if (U >= 0 && U + x <= r && q >= 0 && q + A <= n) for (v = 0; v < A; v++) { _ = y[q + v]; j = R[v]; for (w = 0; w < x; w++)_[U + w] |= j[w] } else { let e, t; for (v = 0; v < A; v++) { t = q + v; if (!(t < 0 || t >= n)) { _ = y[t]; j = R[v]; for (w = 0; w < x; w++) { e = U + w; e >= 0 && e < r && (_[e] |= j[w]) } } } } } return y }(e.mmr, c, e.template, l.width, l.height, e.defaultPixelValue, e.enableSkip, e.combinationOperator, e.gridWidth, e.gridHeight, e.gridOffsetX, e.gridOffsetY, e.gridVectorX, e.gridVectorY, h); this.drawBitmap(l, u) }, onImmediateLosslessHalftoneRegion() { this.onImmediateHalftoneRegion.apply(this, arguments) }, onTables(e, t, a, r) { let n = this.customTables; n || (this.customTables = n = {}); n[e] = function (e, t, a) { const r = e[t], n = 4294967295 & (0, i.readUint32)(e, t + 1), s = 4294967295 & (0, i.readUint32)(e, t + 5), o = new E(e, t + 9, a), c = 1 + (r >> 1 & 7), l = 1 + (r >> 4 & 7), h = []; let u, d, f = n; do { u = o.readBits(c); d = o.readBits(l); h.push(new x([f, u, d, 0])); f += 1 << d } while (f < s); u = o.readBits(c); h.push(new x([n - 1, u, 32, 0, "lower"])); u = o.readBits(c); h.push(new x([s, u, 32, 0])); if (1 & r) { u = o.readBits(c); h.push(new x([u, 0])) } return new I(h, !1) }(t, a, r) } }; function x(e) { if (2 === e.length) { this.isOOB = !0; this.rangeLow = 0; this.prefixLength = e[0]; this.rangeLength = 0; this.prefixCode = e[1]; this.isLowerRange = !1 } else { this.isOOB = !1; this.rangeLow = e[0]; this.prefixLength = e[1]; this.rangeLength = e[2]; this.prefixCode = e[3]; this.isLowerRange = "lower" === e[4] } } function A(e) { this.children = []; if (e) { this.isLeaf = !0; this.rangeLength = e.rangeLength; this.rangeLow = e.rangeLow; this.isLowerRange = e.isLowerRange; this.isOOB = e.isOOB } else this.isLeaf = !1 } A.prototype = { buildTree(e, t) { const a = e.prefixCode >> t & 1; if (t <= 0) this.children[a] = new A(e); else { let r = this.children[a]; r || (this.children[a] = r = new A(null)); r.buildTree(e, t - 1) } }, decodeNode(e) { if (this.isLeaf) { if (this.isOOB) return null; const t = e.readBits(this.rangeLength); return this.rangeLow + (this.isLowerRange ? -t : t) } const t = this.children[e.readBit()]; if (!t) throw new o("invalid Huffman data"); return t.decodeNode(e) } }; function I(e, t) { t || this.assignPrefixCodes(e); this.rootNode = new A(null); for (let t = 0, a = e.length; t < a; t++) { const a = e[t]; a.prefixLength > 0 && this.rootNode.buildTree(a, a.prefixLength - 1) } } I.prototype = { decode(e) { return this.rootNode.decodeNode(e) }, assignPrefixCodes(e) { const t = e.length; let a = 0; for (let r = 0; r < t; r++)a = Math.max(a, e[r].prefixLength); const r = new Uint32Array(a + 1); for (let a = 0; a < t; a++)r[e[a].prefixLength]++; let i, n, s, o = 1, c = 0; r[0] = 0; for (; o <= a;) { c = c + r[o - 1] << 1; i = c; n = 0; for (; n < t;) { s = e[n]; if (s.prefixLength === o) { s.prefixCode = i; i++ } n++ } o++ } } }; const F = {}; function T(e) { let t, a = F[e]; if (a) return a; switch (e) { case 1: t = [[0, 1, 4, 0], [16, 2, 8, 2], [272, 3, 16, 6], [65808, 3, 32, 7]]; break; case 2: t = [[0, 1, 0, 0], [1, 2, 0, 2], [2, 3, 0, 6], [3, 4, 3, 14], [11, 5, 6, 30], [75, 6, 32, 62], [6, 63]]; break; case 3: t = [[-256, 8, 8, 254], [0, 1, 0, 0], [1, 2, 0, 2], [2, 3, 0, 6], [3, 4, 3, 14], [11, 5, 6, 30], [-257, 8, 32, 255, "lower"], [75, 7, 32, 126], [6, 62]]; break; case 4: t = [[1, 1, 0, 0], [2, 2, 0, 2], [3, 3, 0, 6], [4, 4, 3, 14], [12, 5, 6, 30], [76, 5, 32, 31]]; break; case 5: t = [[-255, 7, 8, 126], [1, 1, 0, 0], [2, 2, 0, 2], [3, 3, 0, 6], [4, 4, 3, 14], [12, 5, 6, 30], [-256, 7, 32, 127, "lower"], [76, 6, 32, 62]]; break; case 6: t = [[-2048, 5, 10, 28], [-1024, 4, 9, 8], [-512, 4, 8, 9], [-256, 4, 7, 10], [-128, 5, 6, 29], [-64, 5, 5, 30], [-32, 4, 5, 11], [0, 2, 7, 0], [128, 3, 7, 2], [256, 3, 8, 3], [512, 4, 9, 12], [1024, 4, 10, 13], [-2049, 6, 32, 62, "lower"], [2048, 6, 32, 63]]; break; case 7: t = [[-1024, 4, 9, 8], [-512, 3, 8, 0], [-256, 4, 7, 9], [-128, 5, 6, 26], [-64, 5, 5, 27], [-32, 4, 5, 10], [0, 4, 5, 11], [32, 5, 5, 28], [64, 5, 6, 29], [128, 4, 7, 12], [256, 3, 8, 1], [512, 3, 9, 2], [1024, 3, 10, 3], [-1025, 5, 32, 30, "lower"], [2048, 5, 32, 31]]; break; case 8: t = [[-15, 8, 3, 252], [-7, 9, 1, 508], [-5, 8, 1, 253], [-3, 9, 0, 509], [-2, 7, 0, 124], [-1, 4, 0, 10], [0, 2, 1, 0], [2, 5, 0, 26], [3, 6, 0, 58], [4, 3, 4, 4], [20, 6, 1, 59], [22, 4, 4, 11], [38, 4, 5, 12], [70, 5, 6, 27], [134, 5, 7, 28], [262, 6, 7, 60], [390, 7, 8, 125], [646, 6, 10, 61], [-16, 9, 32, 510, "lower"], [1670, 9, 32, 511], [2, 1]]; break; case 9: t = [[-31, 8, 4, 252], [-15, 9, 2, 508], [-11, 8, 2, 253], [-7, 9, 1, 509], [-5, 7, 1, 124], [-3, 4, 1, 10], [-1, 3, 1, 2], [1, 3, 1, 3], [3, 5, 1, 26], [5, 6, 1, 58], [7, 3, 5, 4], [39, 6, 2, 59], [43, 4, 5, 11], [75, 4, 6, 12], [139, 5, 7, 27], [267, 5, 8, 28], [523, 6, 8, 60], [779, 7, 9, 125], [1291, 6, 11, 61], [-32, 9, 32, 510, "lower"], [3339, 9, 32, 511], [2, 0]]; break; case 10: t = [[-21, 7, 4, 122], [-5, 8, 0, 252], [-4, 7, 0, 123], [-3, 5, 0, 24], [-2, 2, 2, 0], [2, 5, 0, 25], [3, 6, 0, 54], [4, 7, 0, 124], [5, 8, 0, 253], [6, 2, 6, 1], [70, 5, 5, 26], [102, 6, 5, 55], [134, 6, 6, 56], [198, 6, 7, 57], [326, 6, 8, 58], [582, 6, 9, 59], [1094, 6, 10, 60], [2118, 7, 11, 125], [-22, 8, 32, 254, "lower"], [4166, 8, 32, 255], [2, 2]]; break; case 11: t = [[1, 1, 0, 0], [2, 2, 1, 2], [4, 4, 0, 12], [5, 4, 1, 13], [7, 5, 1, 28], [9, 5, 2, 29], [13, 6, 2, 60], [17, 7, 2, 122], [21, 7, 3, 123], [29, 7, 4, 124], [45, 7, 5, 125], [77, 7, 6, 126], [141, 7, 32, 127]]; break; case 12: t = [[1, 1, 0, 0], [2, 2, 0, 2], [3, 3, 1, 6], [5, 5, 0, 28], [6, 5, 1, 29], [8, 6, 1, 60], [10, 7, 0, 122], [11, 7, 1, 123], [13, 7, 2, 124], [17, 7, 3, 125], [25, 7, 4, 126], [41, 8, 5, 254], [73, 8, 32, 255]]; break; case 13: t = [[1, 1, 0, 0], [2, 3, 0, 4], [3, 4, 0, 12], [4, 5, 0, 28], [5, 4, 1, 13], [7, 3, 3, 5], [15, 6, 1, 58], [17, 6, 2, 59], [21, 6, 3, 60], [29, 6, 4, 61], [45, 6, 5, 62], [77, 7, 6, 126], [141, 7, 32, 127]]; break; case 14: t = [[-2, 3, 0, 4], [-1, 3, 0, 5], [0, 1, 0, 0], [1, 3, 0, 6], [2, 3, 0, 7]]; break; case 15: t = [[-24, 7, 4, 124], [-8, 6, 2, 60], [-4, 5, 1, 28], [-2, 4, 0, 12], [-1, 3, 0, 4], [0, 1, 0, 0], [1, 3, 0, 5], [2, 4, 0, 13], [3, 5, 1, 29], [5, 6, 2, 61], [9, 7, 4, 125], [-25, 7, 32, 126, "lower"], [25, 7, 32, 127]]; break; default: throw new o(`standard table B.${e} does not exist`) }for (let e = 0, a = t.length; e < a; e++)t[e] = new x(t[e]); a = new I(t, !0); F[e] = a; return a } function E(e, t, a) { this.data = e; this.start = t; this.end = a; this.position = t; this.shift = -1; this.currentByte = 0 } E.prototype = { readBit() { if (this.shift < 0) { if (this.position >= this.end) throw new o("end of data while reading bit"); this.currentByte = this.data[this.position++]; this.shift = 7 } const e = this.currentByte >> this.shift & 1; this.shift--; return e }, readBits(e) { let t, a = 0; for (t = e - 1; t >= 0; t--)a |= this.readBit() << t; return a }, byteAlign() { this.shift = -1 }, next() { return this.position >= this.end ? -1 : this.data[this.position++] } }; function O(e, t, a) { let r = 0; for (let i = 0, n = t.length; i < n; i++) { const n = a[t[i]]; if (n) { if (e === r) return n; r++ } } throw new o("can't find custom Huffman table") } function P(e, t, a) { const r = []; for (let i = 0; i < a; i++) { const a = new Uint8Array(t); r.push(a); for (let r = 0; r < t; r++)a[r] = e.readBit(); e.byteAlign() } return r } function B(e, t, a, r) { const i = { K: -1, Columns: t, Rows: a, BlackIs1: !0, EndOfBlock: r }, n = new s.CCITTFaxDecoder(e, i), o = []; let c, l = !1; for (let e = 0; e < a; e++) { const e = new Uint8Array(t); o.push(e); let a = -1; for (let r = 0; r < t; r++) { if (a < 0) { c = n.readNextChar(); if (-1 === c) { c = 0; l = !0 } a = 7 } e[r] = c >> a & 1; a-- } } if (r && !l) { const e = 5; for (let t = 0; t < e && -1 !== n.readNextChar(); t++); } return o } function D() { } D.prototype = { parseChunks: e => function (e) { for (var t = new C, a = 0, r = e.length; a < r; a++) { var i = e[a]; S(y({}, i.data, i.start, i.end), t) } return t.buffer }(e), parse(e) { const { imgData: t, width: a, height: r } = function (e) { const t = e.length; let a = 0; if (151 !== e[a] || 74 !== e[a + 1] || 66 !== e[a + 2] || 50 !== e[a + 3] || 13 !== e[a + 4] || 10 !== e[a + 5] || 26 !== e[a + 6] || 10 !== e[a + 7]) throw new o("parseJbig2 - invalid header."); const r = Object.create(null); a += 8; const n = e[a++]; r.randomAccess = !(1 & n); if (!(2 & n)) { r.numberOfPages = (0, i.readUint32)(e, a); a += 4 } const s = y(r, e, a, t), c = new C; S(s, c); const { width: l, height: h } = c.currentPageInfo, u = c.buffer, d = new Uint8ClampedArray(l * h); let f = 0, g = 0; for (let e = 0; e < h; e++) { let e, t = 0; for (let a = 0; a < l; a++) { if (!t) { t = 128; e = u[g++] } d[f++] = e & t ? 0 : 255; t >>= 1 } } return { imgData: d, width: l, height: h } }(e); this.width = a; this.height = r; return t } }; return D }(); t.Jbig2Image = c }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.ArithmeticDecoder = void 0; const r = [{ qe: 22017, nmps: 1, nlps: 1, switchFlag: 1 }, { qe: 13313, nmps: 2, nlps: 6, switchFlag: 0 }, { qe: 6145, nmps: 3, nlps: 9, switchFlag: 0 }, { qe: 2753, nmps: 4, nlps: 12, switchFlag: 0 }, { qe: 1313, nmps: 5, nlps: 29, switchFlag: 0 }, { qe: 545, nmps: 38, nlps: 33, switchFlag: 0 }, { qe: 22017, nmps: 7, nlps: 6, switchFlag: 1 }, { qe: 21505, nmps: 8, nlps: 14, switchFlag: 0 }, { qe: 18433, nmps: 9, nlps: 14, switchFlag: 0 }, { qe: 14337, nmps: 10, nlps: 14, switchFlag: 0 }, { qe: 12289, nmps: 11, nlps: 17, switchFlag: 0 }, { qe: 9217, nmps: 12, nlps: 18, switchFlag: 0 }, { qe: 7169, nmps: 13, nlps: 20, switchFlag: 0 }, { qe: 5633, nmps: 29, nlps: 21, switchFlag: 0 }, { qe: 22017, nmps: 15, nlps: 14, switchFlag: 1 }, { qe: 21505, nmps: 16, nlps: 14, switchFlag: 0 }, { qe: 20737, nmps: 17, nlps: 15, switchFlag: 0 }, { qe: 18433, nmps: 18, nlps: 16, switchFlag: 0 }, { qe: 14337, nmps: 19, nlps: 17, switchFlag: 0 }, { qe: 13313, nmps: 20, nlps: 18, switchFlag: 0 }, { qe: 12289, nmps: 21, nlps: 19, switchFlag: 0 }, { qe: 10241, nmps: 22, nlps: 19, switchFlag: 0 }, { qe: 9217, nmps: 23, nlps: 20, switchFlag: 0 }, { qe: 8705, nmps: 24, nlps: 21, switchFlag: 0 }, { qe: 7169, nmps: 25, nlps: 22, switchFlag: 0 }, { qe: 6145, nmps: 26, nlps: 23, switchFlag: 0 }, { qe: 5633, nmps: 27, nlps: 24, switchFlag: 0 }, { qe: 5121, nmps: 28, nlps: 25, switchFlag: 0 }, { qe: 4609, nmps: 29, nlps: 26, switchFlag: 0 }, { qe: 4353, nmps: 30, nlps: 27, switchFlag: 0 }, { qe: 2753, nmps: 31, nlps: 28, switchFlag: 0 }, { qe: 2497, nmps: 32, nlps: 29, switchFlag: 0 }, { qe: 2209, nmps: 33, nlps: 30, switchFlag: 0 }, { qe: 1313, nmps: 34, nlps: 31, switchFlag: 0 }, { qe: 1089, nmps: 35, nlps: 32, switchFlag: 0 }, { qe: 673, nmps: 36, nlps: 33, switchFlag: 0 }, { qe: 545, nmps: 37, nlps: 34, switchFlag: 0 }, { qe: 321, nmps: 38, nlps: 35, switchFlag: 0 }, { qe: 273, nmps: 39, nlps: 36, switchFlag: 0 }, { qe: 133, nmps: 40, nlps: 37, switchFlag: 0 }, { qe: 73, nmps: 41, nlps: 38, switchFlag: 0 }, { qe: 37, nmps: 42, nlps: 39, switchFlag: 0 }, { qe: 21, nmps: 43, nlps: 40, switchFlag: 0 }, { qe: 9, nmps: 44, nlps: 41, switchFlag: 0 }, { qe: 5, nmps: 45, nlps: 42, switchFlag: 0 }, { qe: 1, nmps: 45, nlps: 43, switchFlag: 0 }, { qe: 22017, nmps: 46, nlps: 46, switchFlag: 0 }]; t.ArithmeticDecoder = class { constructor(e, t, a) { this.data = e; this.bp = t; this.dataEnd = a; this.chigh = e[t]; this.clow = 0; this.byteIn(); this.chigh = this.chigh << 7 & 65535 | this.clow >> 9 & 127; this.clow = this.clow << 7 & 65535; this.ct -= 7; this.a = 32768 } byteIn() { const e = this.data; let t = this.bp; if (255 === e[t]) if (e[t + 1] > 143) { this.clow += 65280; this.ct = 8 } else { t++; this.clow += e[t] << 9; this.ct = 7; this.bp = t } else { t++; this.clow += t < this.dataEnd ? e[t] << 8 : 65280; this.ct = 8; this.bp = t } if (this.clow > 65535) { this.chigh += this.clow >> 16; this.clow &= 65535 } } readBit(e, t) { let a = e[t] >> 1, i = 1 & e[t]; const n = r[a], s = n.qe; let o, c = this.a - s; if (this.chigh < s) if (c < s) { c = s; o = i; a = n.nmps } else { c = s; o = 1 ^ i; 1 === n.switchFlag && (i = o); a = n.nlps } else { this.chigh -= s; if (0 != (32768 & c)) { this.a = c; return i } if (c < s) { o = 1 ^ i; 1 === n.switchFlag && (i = o); a = n.nlps } else { o = i; a = n.nmps } } do { 0 === this.ct && this.byteIn(); c <<= 1; this.chigh = this.chigh << 1 & 65535 | this.clow >> 15 & 1; this.clow = this.clow << 1 & 65535; this.ct-- } while (0 == (32768 & c)); this.a = c; e[t] = a << 1 | i; return o } } }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.JpegStream = void 0; var r = a(2), i = a(11), n = a(4), s = a(18); const o = function () { function e(e, t, a, r) { let n; for (; -1 !== (n = e.getByte());)if (255 === n) { e.skip(-1); break } this.stream = e; this.maybeLength = t; this.dict = a; this.params = r; i.DecodeStream.call(this, t) } e.prototype = Object.create(i.DecodeStream.prototype); Object.defineProperty(e.prototype, "bytes", { get: function () { return (0, r.shadow)(this, "bytes", this.stream.getBytes(this.maybeLength)) }, configurable: !0 }); e.prototype.ensureBuffer = function (e) { }; e.prototype.readBlock = function () { if (this.eof) return; const e = { decodeTransform: void 0, colorTransform: void 0 }, t = this.dict.getArray("Decode", "D"); if (this.forceRGB && Array.isArray(t)) { const a = this.dict.get("BitsPerComponent") || 8, r = t.length, i = new Int32Array(r); let n = !1; const s = (1 << a) - 1; for (let e = 0; e < r; e += 2) { i[e] = 256 * (t[e + 1] - t[e]) | 0; i[e + 1] = t[e] * s | 0; 256 === i[e] && 0 === i[e + 1] || (n = !0) } n && (e.decodeTransform = i) } if ((0, n.isDict)(this.params)) { const t = this.params.get("ColorTransform"); Number.isInteger(t) && (e.colorTransform = t) } const a = new s.JpegImage(e); a.parse(this.bytes); const r = a.getData({ width: this.drawWidth, height: this.drawHeight, forceRGB: this.forceRGB, isSourcePDF: !0 }); this.buffer = r; this.bufferLength = r.length; this.eof = !0 }; Object.defineProperty(e.prototype, "maybeValidDimensions", { get: function () { const { dict: e, stream: t } = this, a = e.get("Height", "H"), i = t.pos; let n, s = !0, o = !1; for (; -1 !== (n = t.getByte());)if (255 === n) { switch (t.getByte()) { case 192: case 193: case 194: o = !0; t.pos += 2; t.pos += 1; const e = t.getUint16(); if (e === a) break; if (0 === e) { s = !1; break } if (e > 10 * a) { s = !1; break } break; case 195: case 197: case 198: case 199: case 201: case 202: case 203: case 205: case 206: case 207: o = !0; break; case 196: case 204: case 218: case 219: case 220: case 221: case 222: case 223: case 224: case 225: case 226: case 227: case 228: case 229: case 230: case 231: case 232: case 233: case 234: case 235: case 236: case 237: case 238: case 239: case 254: const r = t.getUint16(); r > 2 ? t.skip(r - 2) : t.skip(-2); break; case 255: t.skip(-1); break; case 217: o = !0 }if (o) break } t.pos = i; return (0, r.shadow)(this, "maybeValidDimensions", s) }, configurable: !0 }); e.prototype.getIR = function (e = !1) { return (0, r.createObjectURL)(this.bytes, "image/jpeg", e) }; return e }(); t.JpegStream = o }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.JpegImage = void 0; var r = a(2), i = a(7); class n extends r.BaseException { constructor(e) { super(`JPEG error: ${e}`) } } class s extends r.BaseException { constructor(e, t) { super(e); this.scanLines = t } } class o extends r.BaseException { } var c = function () { var e = new Uint8Array([0, 1, 8, 16, 9, 2, 3, 10, 17, 24, 32, 25, 18, 11, 4, 5, 12, 19, 26, 33, 40, 48, 41, 34, 27, 20, 13, 6, 7, 14, 21, 28, 35, 42, 49, 56, 57, 50, 43, 36, 29, 22, 15, 23, 30, 37, 44, 51, 58, 59, 52, 45, 38, 31, 39, 46, 53, 60, 61, 54, 47, 55, 62, 63]); function t({ decodeTransform: e = null, colorTransform: t = -1 } = {}) { this._decodeTransform = e; this._colorTransform = t } function a(e, t) { for (var a, r, i = 0, n = [], s = 16; s > 0 && !e[s - 1];)s--; n.push({ children: [], index: 0 }); var o, c = n[0]; for (a = 0; a < s; a++) { for (r = 0; r < e[a]; r++) { (c = n.pop()).children[c.index] = t[i]; for (; c.index > 0;)c = n.pop(); c.index++; n.push(c); for (; n.length <= a;) { n.push(o = { children: [], index: 0 }); c.children[c.index] = o.children; c = o } i++ } if (a + 1 < s) { n.push(o = { children: [], index: 0 }); c.children[c.index] = o.children; c = o } } return n[0].children } function c(e, t, a) { return 64 * ((e.blocksPerLine + 1) * t + a) } function l(t, a, l, h, u, f, g, m, p, b = !1) { var y = l.mcusPerLine, v = l.progressive, w = a, k = 0, S = 0; function C() { if (S > 0) { S--; return k >> S & 1 } if (255 === (k = t[a++])) { var e = t[a++]; if (e) { if (220 === e && b) { a += 2; const e = (0, i.readUint16)(t, a); a += 2; if (e > 0 && e !== l.scanLines) throw new s("Found DNL marker (0xFFDC) while parsing scan data", e) } else if (217 === e) { if (b) { const e = 8 * O; if (e > 0 && e < l.scanLines / 10) throw new s("Found EOI marker (0xFFD9) while parsing scan data, possibly caused by incorrect `scanLines` parameter", e) } throw new o("Found EOI marker (0xFFD9) while parsing scan data") } throw new n(`unexpected marker ${(k << 8 | e).toString(16)}`) } } S = 7; return k >>> 7 } function x(e) { for (var t = e; ;) { switch (typeof (t = t[C()])) { case "number": return t; case "object": continue }throw new n("invalid huffman sequence") } } function A(e) { for (var t = 0; e > 0;) { t = t << 1 | C(); e-- } return t } function I(e) { if (1 === e) return 1 === C() ? 1 : -1; var t = A(e); return t >= 1 << e - 1 ? t : t + (-1 << e) + 1 } var F = 0; var T, E = 0; let O = 0; function P(e, t, a, r, i) { var n = a % y; O = (a / y | 0) * e.v + r; var s = n * e.h + i; t(e, c(e, O, s)) } function B(e, t, a) { O = a / e.blocksPerLine | 0; var r = a % e.blocksPerLine; t(e, c(e, O, r)) } var D, N, M, L, R, U, q = h.length; U = v ? 0 === f ? 0 === m ? function (e, t) { var a = x(e.huffmanTableDC), r = 0 === a ? 0 : I(a) << p; e.blockData[t] = e.pred += r } : function (e, t) { e.blockData[t] |= C() << p } : 0 === m ? function (t, a) { if (F > 0) F--; else for (var r = f, i = g; r <= i;) { var n = x(t.huffmanTableAC), s = 15 & n, o = n >> 4; if (0 !== s) { var c = e[r += o]; t.blockData[a + c] = I(s) * (1 << p); r++ } else { if (o < 15) { F = A(o) + (1 << o) - 1; break } r += 16 } } } : function (t, a) { for (var r, i, s = f, o = g, c = 0; s <= o;) { const o = a + e[s], l = t.blockData[o] < 0 ? -1 : 1; switch (E) { case 0: c = (i = x(t.huffmanTableAC)) >> 4; if (0 === (r = 15 & i)) if (c < 15) { F = A(c) + (1 << c); E = 4 } else { c = 16; E = 1 } else { if (1 !== r) throw new n("invalid ACn encoding"); T = I(r); E = c ? 2 : 3 } continue; case 1: case 2: t.blockData[o] ? t.blockData[o] += l * (C() << p) : 0 === --c && (E = 2 === E ? 3 : 0); break; case 3: if (t.blockData[o]) t.blockData[o] += l * (C() << p); else { t.blockData[o] = T << p; E = 0 } break; case 4: t.blockData[o] && (t.blockData[o] += l * (C() << p)) }s++ } 4 === E && 0 === --F && (E = 0) } : function (t, a) { var r = x(t.huffmanTableDC), i = 0 === r ? 0 : I(r); t.blockData[a] = t.pred += i; for (var n = 1; n < 64;) { var s = x(t.huffmanTableAC), o = 15 & s, c = s >> 4; if (0 !== o) { var l = e[n += c]; t.blockData[a + l] = I(o); n++ } else { if (c < 15) break; n += 16 } } }; var j, _, z, H, G = 0; _ = 1 === q ? h[0].blocksPerLine * h[0].blocksPerColumn : y * l.mcusPerColumn; for (; G < _;) { var W = u ? Math.min(_ - G, u) : _; for (N = 0; N < q; N++)h[N].pred = 0; F = 0; if (1 === q) { D = h[0]; for (R = 0; R < W; R++) { B(D, U, G); G++ } } else for (R = 0; R < W; R++) { for (N = 0; N < q; N++) { z = (D = h[N]).h; H = D.v; for (M = 0; M < H; M++)for (L = 0; L < z; L++)P(D, U, G, M, L) } G++ } S = 0; if (!(j = d(t, a))) break; if (j.invalid) { (0, r.warn)("decodeScan - unexpected MCU data, current marker is: " + j.invalid); a = j.offset } var X = j && j.marker; if (!X || X <= 65280) throw new n("decodeScan - a valid marker was not found."); if (!(X >= 65488 && X <= 65495)) break; a += 2 } if ((j = d(t, a)) && j.invalid) { (0, r.warn)("decodeScan - unexpected Scan data, current marker is: " + j.invalid); a = j.offset } return a - w } function h(e, t, a) { var r, i, s, o, c, l, h, u, d, f, g, m, p, b, y, v, w, k = e.quantizationTable, S = e.blockData; if (!k) throw new n("missing required Quantization Table."); for (var C = 0; C < 64; C += 8) { d = S[t + C]; f = S[t + C + 1]; g = S[t + C + 2]; m = S[t + C + 3]; p = S[t + C + 4]; b = S[t + C + 5]; y = S[t + C + 6]; v = S[t + C + 7]; d *= k[C]; if (0 != (f | g | m | p | b | y | v)) { f *= k[C + 1]; g *= k[C + 2]; m *= k[C + 3]; p *= k[C + 4]; b *= k[C + 5]; i = (r = (r = 5793 * d + 128 >> 8) + (i = 5793 * p + 128 >> 8) + 1 >> 1) - i; w = 3784 * (s = g) + 1567 * (o = y *= k[C + 6]) + 128 >> 8; s = 1567 * s - 3784 * o + 128 >> 8; h = (c = (c = 2896 * (f - (v *= k[C + 7])) + 128 >> 8) + (h = b << 4) + 1 >> 1) - h; l = (u = (u = 2896 * (f + v) + 128 >> 8) + (l = m << 4) + 1 >> 1) - l; o = (r = r + (o = w) + 1 >> 1) - o; s = (i = i + s + 1 >> 1) - s; w = 2276 * c + 3406 * u + 2048 >> 12; c = 3406 * c - 2276 * u + 2048 >> 12; u = w; w = 799 * l + 4017 * h + 2048 >> 12; l = 4017 * l - 799 * h + 2048 >> 12; h = w; a[C] = r + u; a[C + 7] = r - u; a[C + 1] = i + h; a[C + 6] = i - h; a[C + 2] = s + l; a[C + 5] = s - l; a[C + 3] = o + c; a[C + 4] = o - c } else { w = 5793 * d + 512 >> 10; a[C] = w; a[C + 1] = w; a[C + 2] = w; a[C + 3] = w; a[C + 4] = w; a[C + 5] = w; a[C + 6] = w; a[C + 7] = w } } for (var x = 0; x < 8; ++x) { d = a[x]; if (0 != ((f = a[x + 8]) | (g = a[x + 16]) | (m = a[x + 24]) | (p = a[x + 32]) | (b = a[x + 40]) | (y = a[x + 48]) | (v = a[x + 56]))) { i = (r = 4112 + ((r = 5793 * d + 2048 >> 12) + (i = 5793 * p + 2048 >> 12) + 1 >> 1)) - i; w = 3784 * (s = g) + 1567 * (o = y) + 2048 >> 12; s = 1567 * s - 3784 * o + 2048 >> 12; o = w; h = (c = (c = 2896 * (f - v) + 2048 >> 12) + (h = b) + 1 >> 1) - h; l = (u = (u = 2896 * (f + v) + 2048 >> 12) + (l = m) + 1 >> 1) - l; w = 2276 * c + 3406 * u + 2048 >> 12; c = 3406 * c - 2276 * u + 2048 >> 12; u = w; w = 799 * l + 4017 * h + 2048 >> 12; l = 4017 * l - 799 * h + 2048 >> 12; (d = (r = r + o + 1 >> 1) + u) < 16 ? d = 0 : d >= 4080 ? d = 255 : d >>= 4; (f = (i = i + s + 1 >> 1) + (h = w)) < 16 ? f = 0 : f >= 4080 ? f = 255 : f >>= 4; (g = (s = i - s) + l) < 16 ? g = 0 : g >= 4080 ? g = 255 : g >>= 4; (m = (o = r - o) + c) < 16 ? m = 0 : m >= 4080 ? m = 255 : m >>= 4; (p = o - c) < 16 ? p = 0 : p >= 4080 ? p = 255 : p >>= 4; (b = s - l) < 16 ? b = 0 : b >= 4080 ? b = 255 : b >>= 4; (y = i - h) < 16 ? y = 0 : y >= 4080 ? y = 255 : y >>= 4; (v = r - u) < 16 ? v = 0 : v >= 4080 ? v = 255 : v >>= 4; S[t + x] = d; S[t + x + 8] = f; S[t + x + 16] = g; S[t + x + 24] = m; S[t + x + 32] = p; S[t + x + 40] = b; S[t + x + 48] = y; S[t + x + 56] = v } else { w = (w = 5793 * d + 8192 >> 14) < -2040 ? 0 : w >= 2024 ? 255 : w + 2056 >> 4; S[t + x] = w; S[t + x + 8] = w; S[t + x + 16] = w; S[t + x + 24] = w; S[t + x + 32] = w; S[t + x + 40] = w; S[t + x + 48] = w; S[t + x + 56] = w } } } function u(e, t) { for (var a = t.blocksPerLine, r = t.blocksPerColumn, i = new Int16Array(64), n = 0; n < r; n++)for (var s = 0; s < a; s++) { h(t, c(t, n, s), i) } return t.blockData } function d(e, t, a = t) { const r = e.length - 1; var n = a < t ? a : t; if (t >= r) return null; var s = (0, i.readUint16)(e, t); if (s >= 65472 && s <= 65534) return { invalid: null, marker: s, offset: t }; for (var o = (0, i.readUint16)(e, n); !(o >= 65472 && o <= 65534);) { if (++n >= r) return null; o = (0, i.readUint16)(e, n) } return { invalid: s.toString(16), marker: o, offset: n } } t.prototype = { parse(t, { dnlScanLines: c = null } = {}) { function h() { const e = (0, i.readUint16)(t, p); let a = (p += 2) + e - 2; var n = d(t, a, p); if (n && n.invalid) { (0, r.warn)("readDataBlock - incorrect length, current marker is: " + n.invalid); a = n.offset } var s = t.subarray(p, a); p += s.length; return s } function f(e) { for (var t = Math.ceil(e.samplesPerLine / 8 / e.maxH), a = Math.ceil(e.scanLines / 8 / e.maxV), r = 0; r < e.components.length; r++) { z = e.components[r]; var i = Math.ceil(Math.ceil(e.samplesPerLine / 8) * z.h / e.maxH), n = Math.ceil(Math.ceil(e.scanLines / 8) * z.v / e.maxV), s = t * z.h, o = 64 * (a * z.v) * (s + 1); z.blockData = new Int16Array(o); z.blocksPerLine = i; z.blocksPerColumn = n } e.mcusPerLine = t; e.mcusPerColumn = a } var g, m, p = 0, b = null, y = null; let v = 0; var w = [], k = [], S = []; let C = (0, i.readUint16)(t, p); p += 2; if (65496 !== C) throw new n("SOI not found"); C = (0, i.readUint16)(t, p); p += 2; e: for (; 65497 !== C;) { var x, A, I; switch (C) { case 65504: case 65505: case 65506: case 65507: case 65508: case 65509: case 65510: case 65511: case 65512: case 65513: case 65514: case 65515: case 65516: case 65517: case 65518: case 65519: case 65534: var F = h(); 65504 === C && 74 === F[0] && 70 === F[1] && 73 === F[2] && 70 === F[3] && 0 === F[4] && (b = { version: { major: F[5], minor: F[6] }, densityUnits: F[7], xDensity: F[8] << 8 | F[9], yDensity: F[10] << 8 | F[11], thumbWidth: F[12], thumbHeight: F[13], thumbData: F.subarray(14, 14 + 3 * F[12] * F[13]) }); 65518 === C && 65 === F[0] && 100 === F[1] && 111 === F[2] && 98 === F[3] && 101 === F[4] && (y = { version: F[5] << 8 | F[6], flags0: F[7] << 8 | F[8], flags1: F[9] << 8 | F[10], transformCode: F[11] }); break; case 65499: for (var T = (0, i.readUint16)(t, p) + (p += 2) - 2; p < T;) { var E = t[p++], O = new Uint16Array(64); if (E >> 4 == 0) for (A = 0; A < 64; A++)O[e[A]] = t[p++]; else { if (E >> 4 != 1) throw new n("DQT - invalid table spec"); for (A = 0; A < 64; A++) { O[e[A]] = (0, i.readUint16)(t, p); p += 2 } } w[15 & E] = O } break; case 65472: case 65473: case 65474: if (g) throw new n("Only single frame JPEGs supported"); p += 2; (g = {}).extended = 65473 === C; g.progressive = 65474 === C; g.precision = t[p++]; const u = (0, i.readUint16)(t, p); p += 2; g.scanLines = c || u; g.samplesPerLine = (0, i.readUint16)(t, p); p += 2; g.components = []; g.componentIds = {}; var P, B = t[p++], D = 0, N = 0; for (x = 0; x < B; x++) { P = t[p]; var M = t[p + 1] >> 4, L = 15 & t[p + 1]; D < M && (D = M); N < L && (N = L); var R = t[p + 2]; I = g.components.push({ h: M, v: L, quantizationId: R, quantizationTable: null }); g.componentIds[P] = I - 1; p += 3 } g.maxH = D; g.maxV = N; f(g); break; case 65476: const J = (0, i.readUint16)(t, p); p += 2; for (x = 2; x < J;) { var U = t[p++], q = new Uint8Array(16), j = 0; for (A = 0; A < 16; A++, p++)j += q[A] = t[p]; var _ = new Uint8Array(j); for (A = 0; A < j; A++, p++)_[A] = t[p]; x += 17 + j; (U >> 4 == 0 ? S : k)[15 & U] = a(q, _) } break; case 65501: p += 2; m = (0, i.readUint16)(t, p); p += 2; break; case 65498: const Z = 1 == ++v && !c; p += 2; var z, H = t[p++], G = []; for (x = 0; x < H; x++) { var W = g.componentIds[t[p++]]; z = g.components[W]; var X = t[p++]; z.huffmanTableDC = S[X >> 4]; z.huffmanTableAC = k[15 & X]; G.push(z) } var V = t[p++], K = t[p++], Y = t[p++]; try { var $ = l(t, p, g, G, m, V, K, Y >> 4, 15 & Y, Z); p += $ } catch (e) { if (e instanceof s) { (0, r.warn)(`${e.message} -- attempting to re-parse the JPEG image.`); return this.parse(t, { dnlScanLines: e.scanLines }) } if (e instanceof o) { (0, r.warn)(`${e.message} -- ignoring the rest of the image data.`); break e } throw e } break; case 65500: p += 4; break; case 65535: 255 !== t[p] && p--; break; default: const Q = d(t, p - 2, p - 3); if (Q && Q.invalid) { (0, r.warn)("JpegImage.parse - unexpected data, current marker is: " + Q.invalid); p = Q.offset; break } if (p >= t.length - 1) { (0, r.warn)("JpegImage.parse - reached the end of the image data without finding an EOI marker (0xFFD9)."); break e } throw new n("JpegImage.parse - unknown marker: " + C.toString(16)) }C = (0, i.readUint16)(t, p); p += 2 } this.width = g.samplesPerLine; this.height = g.scanLines; this.jfif = b; this.adobe = y; this.components = []; for (x = 0; x < g.components.length; x++) { var J = w[(z = g.components[x]).quantizationId]; J && (z.quantizationTable = J); this.components.push({ output: u(0, z), scaleX: z.h / g.maxH, scaleY: z.v / g.maxV, blocksPerLine: z.blocksPerLine, blocksPerColumn: z.blocksPerColumn }) } this.numComponents = this.components.length }, _getLinearizedBlockData(e, t, a = !1) { var r, i, n, s, o, c, l, h, u, d, f, g = this.width / e, m = this.height / t, p = 0, b = this.components.length, y = e * t * b, v = new Uint8ClampedArray(y), w = new Uint32Array(e); let k; for (l = 0; l < b; l++) { i = (r = this.components[l]).scaleX * g; n = r.scaleY * m; p = l; f = r.output; s = r.blocksPerLine + 1 << 3; if (i !== k) { for (o = 0; o < e; o++) { h = 0 | o * i; w[o] = (4294967288 & h) << 3 | 7 & h } k = i } for (c = 0; c < t; c++) { d = s * (4294967288 & (h = 0 | c * n)) | (7 & h) << 3; for (o = 0; o < e; o++) { v[p] = f[d + w[o]]; p += b } } } let S = this._decodeTransform; a || 4 !== b || S || (S = new Int32Array([-256, 255, -256, 255, -256, 255, -256, 255])); if (S) for (l = 0; l < y;)for (h = 0, u = 0; h < b; h++, l++, u += 2)v[l] = (v[l] * S[u] >> 8) + S[u + 1]; return v }, get _isColorConversionNeeded() { return this.adobe ? !!this.adobe.transformCode : 3 === this.numComponents ? 0 !== this._colorTransform : 1 === this._colorTransform }, _convertYccToRgb: function (e) { for (var t, a, r, i = 0, n = e.length; i < n; i += 3) { t = e[i]; a = e[i + 1]; r = e[i + 2]; e[i] = t - 179.456 + 1.402 * r; e[i + 1] = t + 135.459 - .344 * a - .714 * r; e[i + 2] = t - 226.816 + 1.772 * a } return e }, _convertYcckToRgb: function (e) { for (var t, a, r, i, n = 0, s = 0, o = e.length; s < o; s += 4) { t = e[s]; a = e[s + 1]; r = e[s + 2]; i = e[s + 3]; e[n++] = a * (-660635669420364e-19 * a + .000437130475926232 * r - 54080610064599e-18 * t + .00048449797120281 * i - .154362151871126) - 122.67195406894 + r * (-.000957964378445773 * r + .000817076911346625 * t - .00477271405408747 * i + 1.53380253221734) + t * (.000961250184130688 * t - .00266257332283933 * i + .48357088451265) + i * (-.000336197177618394 * i + .484791561490776); e[n++] = 107.268039397724 + a * (219927104525741e-19 * a - .000640992018297945 * r + .000659397001245577 * t + .000426105652938837 * i - .176491792462875) + r * (-.000778269941513683 * r + .00130872261408275 * t + .000770482631801132 * i - .151051492775562) + t * (.00126935368114843 * t - .00265090189010898 * i + .25802910206845) + i * (-.000318913117588328 * i - .213742400323665); e[n++] = a * (-.000570115196973677 * a - 263409051004589e-19 * r + .0020741088115012 * t - .00288260236853442 * i + .814272968359295) - 20.810012546947 + r * (-153496057440975e-19 * r - .000132689043961446 * t + .000560833691242812 * i - .195152027534049) + t * (.00174418132927582 * t - .00255243321439347 * i + .116935020465145) + i * (-.000343531996510555 * i + .24165260232407) } return e.subarray(0, n) }, _convertYcckToCmyk: function (e) { for (var t, a, r, i = 0, n = e.length; i < n; i += 4) { t = e[i]; a = e[i + 1]; r = e[i + 2]; e[i] = 434.456 - t - 1.402 * r; e[i + 1] = 119.541 - t + .344 * a + .714 * r; e[i + 2] = 481.816 - t - 1.772 * a } return e }, _convertCmykToRgb: function (e) { for (var t, a, r, i, n = 0, s = 0, o = e.length; s < o; s += 4) { t = e[s]; a = e[s + 1]; r = e[s + 2]; i = e[s + 3]; e[n++] = 255 + t * (-6747147073602441e-20 * t + .0008379262121013727 * a + .0002894718188643294 * r + .003264231057537806 * i - 1.1185611867203937) + a * (26374107616089405e-21 * a - 8626949158638572e-20 * r - .0002748769067499491 * i - .02155688794978967) + r * (-3878099212869363e-20 * r - .0003267808279485286 * i + .0686742238595345) - i * (.0003361971776183937 * i + .7430659151342254); e[n++] = 255 + t * (.00013596372813588848 * t + .000924537132573585 * a + .00010567359618683593 * r + .0004791864687436512 * i - .3109689587515875) + a * (-.00023545346108370344 * a + .0002702845253534714 * r + .0020200308977307156 * i - .7488052167015494) + r * (6834815998235662e-20 * r + .00015168452363460973 * i - .09751927774728933) - i * (.0003189131175883281 * i + .7364883807733168); e[n++] = 255 + t * (13598650411385307e-21 * t + .00012423956175490851 * a + .0004751985097583589 * r - 36729317476630422e-22 * i - .05562186980264034) + a * (.00016141380598724676 * a + .0009692239130725186 * r + .0007782692450036253 * i - .44015232367526463) + r * (5.068882914068769e-7 * r + .0017778369011375071 * i - .7591454649749609) - i * (.0003435319965105553 * i + .7063770186160144) } return e.subarray(0, n) }, getData({ width: e, height: t, forceRGB: a = !1, isSourcePDF: r = !1 }) { if (this.numComponents > 4) throw new n("Unsupported color mode"); var i = this._getLinearizedBlockData(e, t, r); if (1 === this.numComponents && a) { for (var s = i.length, o = new Uint8ClampedArray(3 * s), c = 0, l = 0; l < s; l++) { var h = i[l]; o[c++] = h; o[c++] = h; o[c++] = h } return o } if (3 === this.numComponents && this._isColorConversionNeeded) return this._convertYccToRgb(i); if (4 === this.numComponents) { if (this._isColorConversionNeeded) return a ? this._convertYcckToRgb(i) : this._convertYcckToCmyk(i); if (a) return this._convertCmykToRgb(i) } return i } }; return t }(); t.JpegImage = c }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.JpxStream = void 0; var r = a(11), i = a(20), n = a(2); const s = function () { function e(e, t, a, i) { this.stream = e; this.maybeLength = t; this.dict = a; this.params = i; r.DecodeStream.call(this, t) } e.prototype = Object.create(r.DecodeStream.prototype); Object.defineProperty(e.prototype, "bytes", { get: function () { return (0, n.shadow)(this, "bytes", this.stream.getBytes(this.maybeLength)) }, configurable: !0 }); e.prototype.ensureBuffer = function (e) { }; e.prototype.readBlock = function () { if (this.eof) return; const e = new i.JpxImage; e.parse(this.bytes); const t = e.width, a = e.height, r = e.componentsCount, n = e.tiles.length; if (1 === n) this.buffer = e.tiles[0].items; else { const i = new Uint8ClampedArray(t * a * r); for (let a = 0; a < n; a++) { const n = e.tiles[a], s = n.width, o = n.height, c = n.left, l = n.top, h = n.items; let u = 0, d = (t * l + c) * r; const f = t * r, g = s * r; for (let e = 0; e < o; e++) { const e = h.subarray(u, u + g); i.set(e, d); u += g; d += f } } this.buffer = i } this.bufferLength = this.buffer.length; this.eof = !0 }; return e }(); t.JpxStream = s }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.JpxImage = void 0; var r = a(2), i = a(7), n = a(16); class s extends r.BaseException { constructor(e) { super(`JPX error: ${e}`) } } var o = function () { var e = { LL: 0, LH: 1, HL: 1, HH: 2 }; function t() { this.failOnCorruptedImage = !1 } t.prototype = { parse: function (e) { if (65359 !== (0, i.readUint16)(e, 0)) for (var t = 0, a = e.length; t < a;) { var n = 8, o = (0, i.readUint32)(e, t), c = (0, i.readUint32)(e, t + 4); t += n; if (1 === o) { o = 4294967296 * (0, i.readUint32)(e, t) + (0, i.readUint32)(e, t + 4); t += 8; n += 8 } 0 === o && (o = a - t + n); if (o < n) throw new s("Invalid box field size"); var l = o - n, h = !0; switch (c) { case 1785737832: h = !1; break; case 1668246642: var u = e[t]; if (1 === u) { var d = (0, i.readUint32)(e, t + 3); switch (d) { case 16: case 17: case 18: break; default: (0, r.warn)("Unknown colorspace " + d) } } else 2 === u && (0, r.info)("ICC profile not supported"); break; case 1785737827: this.parseCodestream(e, t, t + l); break; case 1783636e3: 218793738 !== (0, i.readUint32)(e, t) && (0, r.warn)("Invalid JP2 signature"); break; case 1783634458: case 1718909296: case 1920099697: case 1919251232: case 1768449138: break; default: var f = String.fromCharCode(c >> 24 & 255, c >> 16 & 255, c >> 8 & 255, 255 & c); (0, r.warn)("Unsupported header type " + c + " (" + f + ")") }h && (t += l) } else this.parseCodestream(e, 0, e.length) }, parseImageProperties: function (e) { for (var t = e.getByte(); t >= 0;) { if (65361 === (t << 8 | (t = e.getByte()))) { e.skip(4); var a = e.getInt32() >>> 0, r = e.getInt32() >>> 0, i = e.getInt32() >>> 0, n = e.getInt32() >>> 0; e.skip(16); var o = e.getUint16(); this.width = a - i; this.height = r - n; this.componentsCount = o; this.bitsPerComponent = 8; return } } throw new s("No size marker found in JPX stream") }, parseCodestream: function (e, t, n) { var c = {}, l = !1; try { for (var h = t; h + 1 < n;) { var u = (0, i.readUint16)(e, h); h += 2; var d, f, g, m, p, b, y = 0; switch (u) { case 65359: c.mainHeader = !0; break; case 65497: break; case 65361: y = (0, i.readUint16)(e, h); var k = {}; k.Xsiz = (0, i.readUint32)(e, h + 4); k.Ysiz = (0, i.readUint32)(e, h + 8); k.XOsiz = (0, i.readUint32)(e, h + 12); k.YOsiz = (0, i.readUint32)(e, h + 16); k.XTsiz = (0, i.readUint32)(e, h + 20); k.YTsiz = (0, i.readUint32)(e, h + 24); k.XTOsiz = (0, i.readUint32)(e, h + 28); k.YTOsiz = (0, i.readUint32)(e, h + 32); var x = (0, i.readUint16)(e, h + 36); k.Csiz = x; var A = []; d = h + 38; for (var I = 0; I < x; I++) { var F = { precision: 1 + (127 & e[d]), isSigned: !!(128 & e[d]), XRsiz: e[d + 1], YRsiz: e[d + 2] }; d += 3; a(F, k); A.push(F) } c.SIZ = k; c.components = A; o(c, A); c.QCC = []; c.COC = []; break; case 65372: y = (0, i.readUint16)(e, h); var T = {}; d = h + 2; switch (31 & (f = e[d++])) { case 0: m = 8; p = !0; break; case 1: m = 16; p = !1; break; case 2: m = 16; p = !0; break; default: throw new Error("Invalid SQcd value " + f) }T.noQuantization = 8 === m; T.scalarExpounded = p; T.guardBits = f >> 5; g = []; for (; d < y + h;) { var E = {}; if (8 === m) { E.epsilon = e[d++] >> 3; E.mu = 0 } else { E.epsilon = e[d] >> 3; E.mu = (7 & e[d]) << 8 | e[d + 1]; d += 2 } g.push(E) } T.SPqcds = g; if (c.mainHeader) c.QCD = T; else { c.currentTile.QCD = T; c.currentTile.QCC = [] } break; case 65373: y = (0, i.readUint16)(e, h); var O, P = {}; d = h + 2; if (c.SIZ.Csiz < 257) O = e[d++]; else { O = (0, i.readUint16)(e, d); d += 2 } switch (31 & (f = e[d++])) { case 0: m = 8; p = !0; break; case 1: m = 16; p = !1; break; case 2: m = 16; p = !0; break; default: throw new Error("Invalid SQcd value " + f) }P.noQuantization = 8 === m; P.scalarExpounded = p; P.guardBits = f >> 5; g = []; for (; d < y + h;) { E = {}; if (8 === m) { E.epsilon = e[d++] >> 3; E.mu = 0 } else { E.epsilon = e[d] >> 3; E.mu = (7 & e[d]) << 8 | e[d + 1]; d += 2 } g.push(E) } P.SPqcds = g; c.mainHeader ? c.QCC[O] = P : c.currentTile.QCC[O] = P; break; case 65362: y = (0, i.readUint16)(e, h); var B = {}; d = h + 2; var D = e[d++]; B.entropyCoderWithCustomPrecincts = !!(1 & D); B.sopMarkerUsed = !!(2 & D); B.ephMarkerUsed = !!(4 & D); B.progressionOrder = e[d++]; B.layersCount = (0, i.readUint16)(e, d); d += 2; B.multipleComponentTransform = e[d++]; B.decompositionLevelsCount = e[d++]; B.xcb = 2 + (15 & e[d++]); B.ycb = 2 + (15 & e[d++]); var N = e[d++]; B.selectiveArithmeticCodingBypass = !!(1 & N); B.resetContextProbabilities = !!(2 & N); B.terminationOnEachCodingPass = !!(4 & N); B.verticallyStripe = !!(8 & N); B.predictableTermination = !!(16 & N); B.segmentationSymbolUsed = !!(32 & N); B.reversibleTransformation = e[d++]; if (B.entropyCoderWithCustomPrecincts) { for (var M = []; d < y + h;) { var L = e[d++]; M.push({ PPx: 15 & L, PPy: L >> 4 }) } B.precinctsSizes = M } var R = []; B.selectiveArithmeticCodingBypass && R.push("selectiveArithmeticCodingBypass"); B.resetContextProbabilities && R.push("resetContextProbabilities"); B.terminationOnEachCodingPass && R.push("terminationOnEachCodingPass"); B.verticallyStripe && R.push("verticallyStripe"); B.predictableTermination && R.push("predictableTermination"); if (R.length > 0) { l = !0; throw new Error("Unsupported COD options (" + R.join(", ") + ")") } if (c.mainHeader) c.COD = B; else { c.currentTile.COD = B; c.currentTile.COC = [] } break; case 65424: y = (0, i.readUint16)(e, h); (b = {}).index = (0, i.readUint16)(e, h + 2); b.length = (0, i.readUint32)(e, h + 4); b.dataEnd = b.length + h - 2; b.partIndex = e[h + 8]; b.partsCount = e[h + 9]; c.mainHeader = !1; if (0 === b.partIndex) { b.COD = c.COD; b.COC = c.COC.slice(0); b.QCD = c.QCD; b.QCC = c.QCC.slice(0) } c.currentTile = b; break; case 65427: if (0 === (b = c.currentTile).partIndex) { C(c, b.index); v(c) } w(c, e, h, y = b.dataEnd - h); break; case 65365: case 65367: case 65368: case 65380: y = (0, i.readUint16)(e, h); break; case 65363: throw new Error("Codestream code 0xFF53 (COC) is not implemented"); default: throw new Error("Unknown codestream code: " + u.toString(16)) }h += y } } catch (e) { if (l || this.failOnCorruptedImage) throw new s(e.message); (0, r.warn)("JPX: Trying to recover from: " + e.message) } this.tiles = function (e) { for (var t = e.SIZ, a = e.components, r = t.Csiz, i = [], n = 0, s = e.tiles.length; n < s; n++) { var o, c = e.tiles[n], l = []; for (o = 0; o < r; o++)l[o] = S(e, c, o); var h, u, d, f, g, m, p, b = l[0], y = new Uint8ClampedArray(b.items.length * r), v = { left: b.left, top: b.top, width: b.width, height: b.height, items: y }, w = 0; if (c.codingStyleDefaultParameters.multipleComponentTransform) { var k = 4 === r, C = l[0].items, x = l[1].items, A = l[2].items, I = k ? l[3].items : null; h = a[0].precision - 8; u = .5 + (128 << h); var F = c.components[0], T = r - 3; f = C.length; if (F.codingStyleParameters.reversibleTransformation) for (d = 0; d < f; d++, w += T) { g = C[d] + u; m = x[d]; p = A[d]; const e = g - (p + m >> 2); y[w++] = e + p >> h; y[w++] = e >> h; y[w++] = e + m >> h } else for (d = 0; d < f; d++, w += T) { g = C[d] + u; m = x[d]; p = A[d]; y[w++] = g + 1.402 * p >> h; y[w++] = g - .34413 * m - .71414 * p >> h; y[w++] = g + 1.772 * m >> h } if (k) for (d = 0, w = 3; d < f; d++, w += 4)y[w] = I[d] + u >> h } else for (o = 0; o < r; o++) { var E = l[o].items; h = a[o].precision - 8; u = .5 + (128 << h); for (w = o, d = 0, f = E.length; d < f; d++) { y[w] = E[d] + u >> h; w += r } } i.push(v) } return i }(c); this.width = c.SIZ.Xsiz - c.SIZ.XOsiz; this.height = c.SIZ.Ysiz - c.SIZ.YOsiz; this.componentsCount = c.SIZ.Csiz } }; function a(e, t) { e.x0 = Math.ceil(t.XOsiz / e.XRsiz); e.x1 = Math.ceil(t.Xsiz / e.XRsiz); e.y0 = Math.ceil(t.YOsiz / e.YRsiz); e.y1 = Math.ceil(t.Ysiz / e.YRsiz); e.width = e.x1 - e.x0; e.height = e.y1 - e.y0 } function o(e, t) { for (var a, r = e.SIZ, i = [], n = Math.ceil((r.Xsiz - r.XTOsiz) / r.XTsiz), s = Math.ceil((r.Ysiz - r.YTOsiz) / r.YTsiz), o = 0; o < s; o++)for (var c = 0; c < n; c++) { (a = {}).tx0 = Math.max(r.XTOsiz + c * r.XTsiz, r.XOsiz); a.ty0 = Math.max(r.YTOsiz + o * r.YTsiz, r.YOsiz); a.tx1 = Math.min(r.XTOsiz + (c + 1) * r.XTsiz, r.Xsiz); a.ty1 = Math.min(r.YTOsiz + (o + 1) * r.YTsiz, r.Ysiz); a.width = a.tx1 - a.tx0; a.height = a.ty1 - a.ty0; a.components = []; i.push(a) } e.tiles = i; for (var l = 0, h = r.Csiz; l < h; l++)for (var u = t[l], d = 0, f = i.length; d < f; d++) { var g = {}; a = i[d]; g.tcx0 = Math.ceil(a.tx0 / u.XRsiz); g.tcy0 = Math.ceil(a.ty0 / u.YRsiz); g.tcx1 = Math.ceil(a.tx1 / u.XRsiz); g.tcy1 = Math.ceil(a.ty1 / u.YRsiz); g.width = g.tcx1 - g.tcx0; g.height = g.tcy1 - g.tcy0; a.components[l] = g } } function c(e, t, a) { var r = t.codingStyleParameters, i = {}; if (r.entropyCoderWithCustomPrecincts) { i.PPx = r.precinctsSizes[a].PPx; i.PPy = r.precinctsSizes[a].PPy } else { i.PPx = 15; i.PPy = 15 } i.xcb_ = a > 0 ? Math.min(r.xcb, i.PPx - 1) : Math.min(r.xcb, i.PPx); i.ycb_ = a > 0 ? Math.min(r.ycb, i.PPy - 1) : Math.min(r.ycb, i.PPy); return i } function l(e, t, a) { var r = 1 << a.PPx, i = 1 << a.PPy, n = 0 === t.resLevel, s = 1 << a.PPx + (n ? 0 : -1), o = 1 << a.PPy + (n ? 0 : -1), c = t.trx1 > t.trx0 ? Math.ceil(t.trx1 / r) - Math.floor(t.trx0 / r) : 0, l = t.try1 > t.try0 ? Math.ceil(t.try1 / i) - Math.floor(t.try0 / i) : 0, h = c * l; t.precinctParameters = { precinctWidth: r, precinctHeight: i, numprecinctswide: c, numprecinctshigh: l, numprecincts: h, precinctWidthInSubband: s, precinctHeightInSubband: o } } function h(e, t, a) { var r, i, n, s, o = a.xcb_, c = a.ycb_, l = 1 << o, h = 1 << c, u = t.tbx0 >> o, d = t.tby0 >> c, f = t.tbx1 + l - 1 >> o, g = t.tby1 + h - 1 >> c, m = t.resolution.precinctParameters, p = [], b = []; for (i = d; i < g; i++)for (r = u; r < f; r++) { (n = { cbx: r, cby: i, tbx0: l * r, tby0: h * i, tbx1: l * (r + 1), tby1: h * (i + 1) }).tbx0_ = Math.max(t.tbx0, n.tbx0); n.tby0_ = Math.max(t.tby0, n.tby0); n.tbx1_ = Math.min(t.tbx1, n.tbx1); n.tby1_ = Math.min(t.tby1, n.tby1); s = Math.floor((n.tbx0_ - t.tbx0) / m.precinctWidthInSubband) + Math.floor((n.tby0_ - t.tby0) / m.precinctHeightInSubband) * m.numprecinctswide; n.precinctNumber = s; n.subbandType = t.type; n.Lblock = 3; if (!(n.tbx1_ <= n.tbx0_ || n.tby1_ <= n.tby0_)) { p.push(n); var y = b[s]; if (void 0 !== y) { r < y.cbxMin ? y.cbxMin = r : r > y.cbxMax && (y.cbxMax = r); i < y.cbyMin ? y.cbxMin = i : i > y.cbyMax && (y.cbyMax = i) } else b[s] = y = { cbxMin: r, cbyMin: i, cbxMax: r, cbyMax: i }; n.precinct = y } } t.codeblockParameters = { codeblockWidth: o, codeblockHeight: c, numcodeblockwide: f - u + 1, numcodeblockhigh: g - d + 1 }; t.codeblocks = p; t.precincts = b } function u(e, t, a) { for (var r = [], i = e.subbands, n = 0, s = i.length; n < s; n++)for (var o = i[n].codeblocks, c = 0, l = o.length; c < l; c++) { var h = o[c]; h.precinctNumber === t && r.push(h) } return { layerNumber: a, codeblocks: r } } function d(e) { for (var t = e.SIZ, a = e.currentTile.index, r = e.tiles[a], i = r.codingStyleDefaultParameters.layersCount, n = t.Csiz, o = 0, c = 0; c < n; c++)o = Math.max(o, r.components[c].codingStyleParameters.decompositionLevelsCount); var l = 0, h = 0, d = 0, f = 0; this.nextPacket = function () { for (; l < i; l++) { for (; h <= o; h++) { for (; d < n; d++) { var e = r.components[d]; if (!(h > e.codingStyleParameters.decompositionLevelsCount)) { for (var t = e.resolutions[h], a = t.precinctParameters.numprecincts; f < a;) { var c = u(t, f, l); f++; return c } f = 0 } } d = 0 } h = 0 } throw new s("Out of packets") } } function f(e) { for (var t = e.SIZ, a = e.currentTile.index, r = e.tiles[a], i = r.codingStyleDefaultParameters.layersCount, n = t.Csiz, o = 0, c = 0; c < n; c++)o = Math.max(o, r.components[c].codingStyleParameters.decompositionLevelsCount); var l = 0, h = 0, d = 0, f = 0; this.nextPacket = function () { for (; l <= o; l++) { for (; h < i; h++) { for (; d < n; d++) { var e = r.components[d]; if (!(l > e.codingStyleParameters.decompositionLevelsCount)) { for (var t = e.resolutions[l], a = t.precinctParameters.numprecincts; f < a;) { var c = u(t, f, h); f++; return c } f = 0 } } d = 0 } h = 0 } throw new s("Out of packets") } } function g(e) { var t, a, r, i, n = e.SIZ, o = e.currentTile.index, c = e.tiles[o], l = c.codingStyleDefaultParameters.layersCount, h = n.Csiz, d = 0; for (r = 0; r < h; r++) { var f = c.components[r]; d = Math.max(d, f.codingStyleParameters.decompositionLevelsCount) } var g = new Int32Array(d + 1); for (a = 0; a <= d; ++a) { var m = 0; for (r = 0; r < h; ++r) { var p = c.components[r].resolutions; a < p.length && (m = Math.max(m, p[a].precinctParameters.numprecincts)) } g[a] = m } t = 0; a = 0; r = 0; i = 0; this.nextPacket = function () { for (; a <= d; a++) { for (; i < g[a]; i++) { for (; r < h; r++) { var e = c.components[r]; if (!(a > e.codingStyleParameters.decompositionLevelsCount)) { var n = e.resolutions[a], o = n.precinctParameters.numprecincts; if (!(i >= o)) { for (; t < l;) { var f = u(n, i, t); t++; return f } t = 0 } } } r = 0 } i = 0 } throw new s("Out of packets") } } function m(e) { var t = e.SIZ, a = e.currentTile.index, r = e.tiles[a], i = r.codingStyleDefaultParameters.layersCount, n = t.Csiz, o = y(r), c = o, l = 0, h = 0, d = 0, f = 0, g = 0; this.nextPacket = function () { for (; g < c.maxNumHigh; g++) { for (; f < c.maxNumWide; f++) { for (; d < n; d++) { for (var e = r.components[d], t = e.codingStyleParameters.decompositionLevelsCount; h <= t; h++) { var a = e.resolutions[h], m = o.components[d].resolutions[h], p = b(f, g, m, c, a); if (null !== p) { for (; l < i;) { var y = u(a, p, l); l++; return y } l = 0 } } h = 0 } d = 0 } f = 0 } throw new s("Out of packets") } } function p(e) { var t = e.SIZ, a = e.currentTile.index, r = e.tiles[a], i = r.codingStyleDefaultParameters.layersCount, n = t.Csiz, o = y(r), c = 0, l = 0, h = 0, d = 0, f = 0; this.nextPacket = function () { for (; h < n; ++h) { for (var e = r.components[h], t = o.components[h], a = e.codingStyleParameters.decompositionLevelsCount; f < t.maxNumHigh; f++) { for (; d < t.maxNumWide; d++) { for (; l <= a; l++) { var g = e.resolutions[l], m = t.resolutions[l], p = b(d, f, m, t, g); if (null !== p) { for (; c < i;) { var y = u(g, p, c); c++; return y } c = 0 } } l = 0 } d = 0 } f = 0 } throw new s("Out of packets") } } function b(e, t, a, r, i) { var n = e * r.minWidth, s = t * r.minHeight; if (n % a.width != 0 || s % a.height != 0) return null; var o = s / a.width * i.precinctParameters.numprecinctswide; return n / a.height + o } function y(e) { for (var t = e.components.length, a = Number.MAX_VALUE, r = Number.MAX_VALUE, i = 0, n = 0, s = new Array(t), o = 0; o < t; o++) { for (var c = e.components[o], l = c.codingStyleParameters.decompositionLevelsCount, h = new Array(l + 1), u = Number.MAX_VALUE, d = Number.MAX_VALUE, f = 0, g = 0, m = 1, p = l; p >= 0; --p) { var b = c.resolutions[p], y = m * b.precinctParameters.precinctWidth, v = m * b.precinctParameters.precinctHeight; u = Math.min(u, y); d = Math.min(d, v); f = Math.max(f, b.precinctParameters.numprecinctswide); g = Math.max(g, b.precinctParameters.numprecinctshigh); h[p] = { width: y, height: v }; m <<= 1 } a = Math.min(a, u); r = Math.min(r, d); i = Math.max(i, f); n = Math.max(n, g); s[o] = { resolutions: h, minWidth: u, minHeight: d, maxNumWide: f, maxNumHigh: g } } return { components: s, minWidth: a, minHeight: r, maxNumWide: i, maxNumHigh: n } } function v(e) { for (var t = e.SIZ, a = e.currentTile.index, r = e.tiles[a], i = t.Csiz, n = 0; n < i; n++) { for (var o = r.components[n], u = o.codingStyleParameters.decompositionLevelsCount, b = [], y = [], v = 0; v <= u; v++) { var w, k = c(0, o, v), S = {}, C = 1 << u - v; S.trx0 = Math.ceil(o.tcx0 / C); S.try0 = Math.ceil(o.tcy0 / C); S.trx1 = Math.ceil(o.tcx1 / C); S.try1 = Math.ceil(o.tcy1 / C); S.resLevel = v; l(0, S, k); b.push(S); if (0 === v) { (w = {}).type = "LL"; w.tbx0 = Math.ceil(o.tcx0 / C); w.tby0 = Math.ceil(o.tcy0 / C); w.tbx1 = Math.ceil(o.tcx1 / C); w.tby1 = Math.ceil(o.tcy1 / C); w.resolution = S; h(0, w, k); y.push(w); S.subbands = [w] } else { var x = 1 << u - v + 1, A = []; (w = {}).type = "HL"; w.tbx0 = Math.ceil(o.tcx0 / x - .5); w.tby0 = Math.ceil(o.tcy0 / x); w.tbx1 = Math.ceil(o.tcx1 / x - .5); w.tby1 = Math.ceil(o.tcy1 / x); w.resolution = S; h(0, w, k); y.push(w); A.push(w); (w = {}).type = "LH"; w.tbx0 = Math.ceil(o.tcx0 / x); w.tby0 = Math.ceil(o.tcy0 / x - .5); w.tbx1 = Math.ceil(o.tcx1 / x); w.tby1 = Math.ceil(o.tcy1 / x - .5); w.resolution = S; h(0, w, k); y.push(w); A.push(w); (w = {}).type = "HH"; w.tbx0 = Math.ceil(o.tcx0 / x - .5); w.tby0 = Math.ceil(o.tcy0 / x - .5); w.tbx1 = Math.ceil(o.tcx1 / x - .5); w.tby1 = Math.ceil(o.tcy1 / x - .5); w.resolution = S; h(0, w, k); y.push(w); A.push(w); S.subbands = A } } o.resolutions = b; o.subbands = y } var I = r.codingStyleDefaultParameters.progressionOrder; switch (I) { case 0: r.packetsIterator = new d(e); break; case 1: r.packetsIterator = new f(e); break; case 2: r.packetsIterator = new g(e); break; case 3: r.packetsIterator = new m(e); break; case 4: r.packetsIterator = new p(e); break; default: throw new s(`Unsupported progression order ${I}`) } } function w(e, t, a, r) { var n, s = 0, o = 0, c = !1; function l(e) { for (; o < e;) { var r = t[a + s]; s++; if (c) { n = n << 7 | r; o += 7; c = !1 } else { n = n << 8 | r; o += 8 } 255 === r && (c = !0) } return n >>> (o -= e) & (1 << e) - 1 } function h(e) { if (255 === t[a + s - 1] && t[a + s] === e) { u(1); return !0 } if (255 === t[a + s] && t[a + s + 1] === e) { u(2); return !0 } return !1 } function u(e) { s += e } function d() { o = 0; if (c) { s++; c = !1 } } function f() { if (0 === l(1)) return 1; if (0 === l(1)) return 2; var e = l(2); return e < 3 ? e + 3 : (e = l(5)) < 31 ? e + 6 : (e = l(7)) + 37 } for (var g = e.currentTile.index, m = e.tiles[g], p = e.COD.sopMarkerUsed, b = e.COD.ephMarkerUsed, y = m.packetsIterator; s < r;) { d(); p && h(145) && u(4); var v = y.nextPacket(); if (l(1)) { for (var w, k = v.layerNumber, S = [], C = 0, I = v.codeblocks.length; C < I; C++) { var F = (w = v.codeblocks[C]).precinct, T = w.cbx - F.cbxMin, E = w.cby - F.cbyMin, O = !1, P = !1; if (void 0 !== w.included) O = !!l(1); else { var B, D; if (void 0 !== (F = w.precinct).inclusionTree) B = F.inclusionTree; else { var N = F.cbxMax - F.cbxMin + 1, M = F.cbyMax - F.cbyMin + 1; B = new A(N, M, k); D = new x(N, M); F.inclusionTree = B; F.zeroBitPlanesTree = D } if (B.reset(T, E, k)) for (; ;) { if (!l(1)) { B.incrementValue(k); break } if (!B.nextLevel()) { w.included = !0; O = P = !0; break } } } if (O) { if (P) { (D = F.zeroBitPlanesTree).reset(T, E); for (; ;)if (l(1)) { if (!D.nextLevel()) break } else D.incrementValue(); w.zeroBitPlanes = D.value } for (var L = f(); l(1);)w.Lblock++; var R = (0, i.log2)(L), U = l((L < 1 << R ? R - 1 : R) + w.Lblock); S.push({ codeblock: w, codingpasses: L, dataLength: U }) } } d(); b && h(146); for (; S.length > 0;) { var q = S.shift(); void 0 === (w = q.codeblock).data && (w.data = []); w.data.push({ data: t, start: a + s, end: a + s + q.dataLength, codingpasses: q.codingpasses }); s += q.dataLength } } } return s } function k(e, t, a, r, i, s, o, c) { for (var l = r.tbx0, h = r.tby0, u = r.tbx1 - r.tbx0, d = r.codeblocks, f = "H" === r.type.charAt(0) ? 1 : 0, g = "H" === r.type.charAt(1) ? t : 0, m = 0, p = d.length; m < p; ++m) { var b = d[m], y = b.tbx1_ - b.tbx0_, v = b.tby1_ - b.tby0_; if (0 !== y && 0 !== v && void 0 !== b.data) { var w, k; w = new I(y, v, b.subbandType, b.zeroBitPlanes, s); k = 2; var S, C, x, A = b.data, F = 0, T = 0; for (S = 0, C = A.length; S < C; S++) { F += (x = A[S]).end - x.start; T += x.codingpasses } var E = new Uint8Array(F), O = 0; for (S = 0, C = A.length; S < C; S++) { var P = (x = A[S]).data.subarray(x.start, x.end); E.set(P, O); O += P.length } var B = new n.ArithmeticDecoder(E, 0, F); w.setDecoder(B); for (S = 0; S < T; S++) { switch (k) { case 0: w.runSignificancePropagationPass(); break; case 1: w.runMagnitudeRefinementPass(); break; case 2: w.runCleanupPass(); c && w.checkSegmentationSymbol() }k = (k + 1) % 3 } var D, N, M, L = b.tbx0_ - l + (b.tby0_ - h) * u, R = w.coefficentsSign, U = w.coefficentsMagnitude, q = w.bitsDecoded, j = o ? 0 : .5; O = 0; var _ = "LL" !== r.type; for (S = 0; S < v; S++) { var z = 2 * (L / u | 0) * (t - u) + f + g; for (D = 0; D < y; D++) { if (0 !== (N = U[O])) { N = (N + j) * i; 0 !== R[O] && (N = -N); M = q[O]; var H = _ ? z + (L << 1) : L; e[H] = o && M >= s ? N : N * (1 << s - M) } L++; O++ } L += u - y } } } } function S(t, a, r) { for (var i = a.components[r], n = i.codingStyleParameters, s = i.quantizationParameters, o = n.decompositionLevelsCount, c = s.SPqcds, l = s.scalarExpounded, h = s.guardBits, u = n.segmentationSymbolUsed, d = t.components[r].precision, f = n.reversibleTransformation, g = f ? new E : new T, m = [], p = 0, b = 0; b <= o; b++) { for (var y = i.resolutions[b], v = y.trx1 - y.trx0, w = y.try1 - y.try0, S = new Float32Array(v * w), C = 0, x = y.subbands.length; C < x; C++) { var A, I; if (l) { A = c[p].mu; I = c[p].epsilon; p++ } else { A = c[0].mu; I = c[0].epsilon + (b > 0 ? 1 - b : 0) } var F = y.subbands[C], O = e[F.type]; k(S, v, 0, F, f ? 1 : 2 ** (d + O - I) * (1 + A / 2048), h + I - 1, f, u) } m.push({ width: v, height: w, items: S }) } var P = g.calculate(m, i.tcx0, i.tcy0); return { left: i.tcx0, top: i.tcy0, width: P.width, height: P.height, items: P.items } } function C(e, t) { for (var a = e.SIZ.Csiz, r = e.tiles[t], i = 0; i < a; i++) { var n = r.components[i], s = void 0 !== e.currentTile.QCC[i] ? e.currentTile.QCC[i] : e.currentTile.QCD; n.quantizationParameters = s; var o = void 0 !== e.currentTile.COC[i] ? e.currentTile.COC[i] : e.currentTile.COD; n.codingStyleParameters = o } r.codingStyleDefaultParameters = e.currentTile.COD } var x = function () { function e(e, t) { var a = (0, i.log2)(Math.max(e, t)) + 1; this.levels = []; for (var r = 0; r < a; r++) { var n = { width: e, height: t, items: [] }; this.levels.push(n); e = Math.ceil(e / 2); t = Math.ceil(t / 2) } } e.prototype = { reset: function (e, t) { for (var a, r = 0, i = 0; r < this.levels.length;) { var n = e + t * (a = this.levels[r]).width; if (void 0 !== a.items[n]) { i = a.items[n]; break } a.index = n; e >>= 1; t >>= 1; r++ } r--; (a = this.levels[r]).items[a.index] = i; this.currentLevel = r; delete this.value }, incrementValue: function () { var e = this.levels[this.currentLevel]; e.items[e.index]++ }, nextLevel: function () { var e = this.currentLevel, t = this.levels[e], a = t.items[t.index]; if (--e < 0) { this.value = a; return !1 } this.currentLevel = e; (t = this.levels[e]).items[t.index] = a; return !0 } }; return e }(), A = function () { function e(e, t, a) { var r = (0, i.log2)(Math.max(e, t)) + 1; this.levels = []; for (var n = 0; n < r; n++) { for (var s = new Uint8Array(e * t), o = 0, c = s.length; o < c; o++)s[o] = a; var l = { width: e, height: t, items: s }; this.levels.push(l); e = Math.ceil(e / 2); t = Math.ceil(t / 2) } } e.prototype = { reset: function (e, t, a) { for (var r = 0; r < this.levels.length;) { var i = this.levels[r], n = e + t * i.width; i.index = n; var s = i.items[n]; if (255 === s) break; if (s > a) { this.currentLevel = r; this.propagateValues(); return !1 } e >>= 1; t >>= 1; r++ } this.currentLevel = r - 1; return !0 }, incrementValue: function (e) { var t = this.levels[this.currentLevel]; t.items[t.index] = e + 1; this.propagateValues() }, propagateValues: function () { for (var e = this.currentLevel, t = this.levels[e], a = t.items[t.index]; --e >= 0;)(t = this.levels[e]).items[t.index] = a }, nextLevel: function () { var e = this.currentLevel, t = this.levels[e], a = t.items[t.index]; t.items[t.index] = 255; if (--e < 0) return !1; this.currentLevel = e; (t = this.levels[e]).items[t.index] = a; return !0 } }; return e }(), I = function () { var e = new Uint8Array([0, 5, 8, 0, 3, 7, 8, 0, 4, 7, 8, 0, 0, 0, 0, 0, 1, 6, 8, 0, 3, 7, 8, 0, 4, 7, 8, 0, 0, 0, 0, 0, 2, 6, 8, 0, 3, 7, 8, 0, 4, 7, 8, 0, 0, 0, 0, 0, 2, 6, 8, 0, 3, 7, 8, 0, 4, 7, 8, 0, 0, 0, 0, 0, 2, 6, 8, 0, 3, 7, 8, 0, 4, 7, 8]), t = new Uint8Array([0, 3, 4, 0, 5, 7, 7, 0, 8, 8, 8, 0, 0, 0, 0, 0, 1, 3, 4, 0, 6, 7, 7, 0, 8, 8, 8, 0, 0, 0, 0, 0, 2, 3, 4, 0, 6, 7, 7, 0, 8, 8, 8, 0, 0, 0, 0, 0, 2, 3, 4, 0, 6, 7, 7, 0, 8, 8, 8, 0, 0, 0, 0, 0, 2, 3, 4, 0, 6, 7, 7, 0, 8, 8, 8]), a = new Uint8Array([0, 1, 2, 0, 1, 2, 2, 0, 2, 2, 2, 0, 0, 0, 0, 0, 3, 4, 5, 0, 4, 5, 5, 0, 5, 5, 5, 0, 0, 0, 0, 0, 6, 7, 7, 0, 7, 7, 7, 0, 7, 7, 7, 0, 0, 0, 0, 0, 8, 8, 8, 0, 8, 8, 8, 0, 8, 8, 8, 0, 0, 0, 0, 0, 8, 8, 8, 0, 8, 8, 8, 0, 8, 8, 8]); function r(r, i, n, s, o) { this.width = r; this.height = i; let c; c = "HH" === n ? a : "HL" === n ? t : e; this.contextLabelTable = c; var l = r * i; this.neighborsSignificance = new Uint8Array(l); this.coefficentsSign = new Uint8Array(l); let h; h = o > 14 ? new Uint32Array(l) : o > 6 ? new Uint16Array(l) : new Uint8Array(l); this.coefficentsMagnitude = h; this.processingFlags = new Uint8Array(l); var u = new Uint8Array(l); if (0 !== s) for (var d = 0; d < l; d++)u[d] = s; this.bitsDecoded = u; this.reset() } r.prototype = { setDecoder: function (e) { this.decoder = e }, reset: function () { this.contexts = new Int8Array(19); this.contexts[0] = 8; this.contexts[17] = 92; this.contexts[18] = 6 }, setNeighborsSignificance: function (e, t, a) { var r, i = this.neighborsSignificance, n = this.width, s = this.height, o = t > 0, c = t + 1 < n; if (e > 0) { r = a - n; o && (i[r - 1] += 16); c && (i[r + 1] += 16); i[r] += 4 } if (e + 1 < s) { r = a + n; o && (i[r - 1] += 16); c && (i[r + 1] += 16); i[r] += 4 } o && (i[a - 1] += 1); c && (i[a + 1] += 1); i[a] |= 128 }, runSignificancePropagationPass: function () { for (var e = this.decoder, t = this.width, a = this.height, r = this.coefficentsMagnitude, i = this.coefficentsSign, n = this.neighborsSignificance, s = this.processingFlags, o = this.contexts, c = this.contextLabelTable, l = this.bitsDecoded, h = 0; h < a; h += 4)for (var u = 0; u < t; u++)for (var d = h * t + u, f = 0; f < 4; f++, d += t) { var g = h + f; if (g >= a) break; s[d] &= -2; if (!r[d] && n[d]) { var m = c[n[d]]; if (e.readBit(o, m)) { var p = this.decodeSignBit(g, u, d); i[d] = p; r[d] = 1; this.setNeighborsSignificance(g, u, d); s[d] |= 2 } l[d]++; s[d] |= 1 } } }, decodeSignBit: function (e, t, a) { var r, i, n, s, o, c, l = this.width, h = this.height, u = this.coefficentsMagnitude, d = this.coefficentsSign; s = t > 0 && 0 !== u[a - 1]; if (t + 1 < l && 0 !== u[a + 1]) { n = d[a + 1]; r = s ? 1 - n - (i = d[a - 1]) : 1 - n - n } else r = s ? 1 - (i = d[a - 1]) - i : 0; var f = 3 * r; s = e > 0 && 0 !== u[a - l]; if (e + 1 < h && 0 !== u[a + l]) { n = d[a + l]; r = s ? 1 - n - (i = d[a - l]) + f : 1 - n - n + f } else r = s ? 1 - (i = d[a - l]) - i + f : f; if (r >= 0) { o = 9 + r; c = this.decoder.readBit(this.contexts, o) } else { o = 9 - r; c = 1 ^ this.decoder.readBit(this.contexts, o) } return c }, runMagnitudeRefinementPass: function () { for (var e, t = this.decoder, a = this.width, r = this.height, i = this.coefficentsMagnitude, n = this.neighborsSignificance, s = this.contexts, o = this.bitsDecoded, c = this.processingFlags, l = a * r, h = 4 * a, u = 0; u < l; u = e) { e = Math.min(l, u + h); for (var d = 0; d < a; d++)for (var f = u + d; f < e; f += a)if (i[f] && 0 == (1 & c[f])) { var g = 16; if (0 != (2 & c[f])) { c[f] ^= 2; g = 0 === (127 & n[f]) ? 15 : 14 } var m = t.readBit(s, g); i[f] = i[f] << 1 | m; o[f]++; c[f] |= 1 } } }, runCleanupPass: function () { for (var e, t = this.decoder, a = this.width, r = this.height, i = this.neighborsSignificance, n = this.coefficentsMagnitude, s = this.coefficentsSign, o = this.contexts, c = this.contextLabelTable, l = this.bitsDecoded, h = this.processingFlags, u = a, d = 2 * a, f = 3 * a, g = 0; g < r; g = e) { e = Math.min(g + 4, r); for (var m = g * a, p = g + 3 < r, b = 0; b < a; b++) { var y, v = m + b, w = 0, k = v, S = g; if (p && 0 === h[v] && 0 === h[v + u] && 0 === h[v + d] && 0 === h[v + f] && 0 === i[v] && 0 === i[v + u] && 0 === i[v + d] && 0 === i[v + f]) { if (!t.readBit(o, 18)) { l[v]++; l[v + u]++; l[v + d]++; l[v + f]++; continue } if (0 !== (w = t.readBit(o, 17) << 1 | t.readBit(o, 17))) { S = g + w; k += w * a } y = this.decodeSignBit(S, b, k); s[k] = y; n[k] = 1; this.setNeighborsSignificance(S, b, k); h[k] |= 2; k = v; for (var C = g; C <= S; C++, k += a)l[k]++; w++ } for (S = g + w; S < e; S++, k += a)if (!n[k] && 0 == (1 & h[k])) { var x = c[i[k]]; if (1 === t.readBit(o, x)) { y = this.decodeSignBit(S, b, k); s[k] = y; n[k] = 1; this.setNeighborsSignificance(S, b, k); h[k] |= 2 } l[k]++ } } } }, checkSegmentationSymbol: function () { var e = this.decoder, t = this.contexts; if (10 !== (e.readBit(t, 17) << 3 | e.readBit(t, 17) << 2 | e.readBit(t, 17) << 1 | e.readBit(t, 17))) throw new s("Invalid segmentation symbol") } }; return r }(), F = function () { function e() { } e.prototype.calculate = function (e, t, a) { for (var r = e[0], i = 1, n = e.length; i < n; i++)r = this.iterate(r, e[i], t, a); return r }; e.prototype.extend = function (e, t, a) { var r = t - 1, i = t + 1, n = t + a - 2, s = t + a; e[r--] = e[i++]; e[s++] = e[n--]; e[r--] = e[i++]; e[s++] = e[n--]; e[r--] = e[i++]; e[s++] = e[n--]; e[r] = e[i]; e[s] = e[n] }; e.prototype.iterate = function (e, t, a, r) { var i, n, s, o, c, l, h = e.width, u = e.height, d = e.items, f = t.width, g = t.height, m = t.items; for (s = 0, i = 0; i < u; i++) { o = 2 * i * f; for (n = 0; n < h; n++, s++, o += 2)m[o] = d[s] } d = e.items = null; var p = new Float32Array(f + 8); if (1 === f) { if (0 != (1 & a)) for (l = 0, s = 0; l < g; l++, s += f)m[s] *= .5 } else for (l = 0, s = 0; l < g; l++, s += f) { p.set(m.subarray(s, s + f), 4); this.extend(p, 4, f); this.filter(p, 4, f); m.set(p.subarray(4, 4 + f), s) } var b = 16, y = []; for (i = 0; i < b; i++)y.push(new Float32Array(g + 8)); var v, w = 0; e = 4 + g; if (1 === g) { if (0 != (1 & r)) for (c = 0; c < f; c++)m[c] *= .5 } else for (c = 0; c < f; c++) { if (0 === w) { b = Math.min(f - c, b); for (s = c, o = 4; o < e; s += f, o++)for (v = 0; v < b; v++)y[v][o] = m[s + v]; w = b } var k = y[--w]; this.extend(k, 4, g); this.filter(k, 4, g); if (0 === w) { s = c - b + 1; for (o = 4; o < e; s += f, o++)for (v = 0; v < b; v++)m[s + v] = y[v][o] } } return { width: f, height: g, items: m } }; return e }(), T = function () { function e() { F.call(this) } e.prototype = Object.create(F.prototype); e.prototype.filter = function (e, t, a) { var r, i, n, s, o = a >> 1, c = -1.586134342059924, l = -.052980118572961, h = .882911075530934, u = .443506852043971, d = 1.230174104914001; r = (t |= 0) - 3; for (i = o + 4; i--; r += 2)e[r] *= .8128930661159609; n = u * e[(r = t - 2) - 1]; for (i = o + 3; i--; r += 2) { s = u * e[r + 1]; e[r] = d * e[r] - n - s; if (!i--) break; n = u * e[(r += 2) + 1]; e[r] = d * e[r] - n - s } n = h * e[(r = t - 1) - 1]; for (i = o + 2; i--; r += 2) { s = h * e[r + 1]; e[r] -= n + s; if (!i--) break; n = h * e[(r += 2) + 1]; e[r] -= n + s } n = l * e[(r = t) - 1]; for (i = o + 1; i--; r += 2) { s = l * e[r + 1]; e[r] -= n + s; if (!i--) break; n = l * e[(r += 2) + 1]; e[r] -= n + s } if (0 !== o) { n = c * e[(r = t + 1) - 1]; for (i = o; i--; r += 2) { s = c * e[r + 1]; e[r] -= n + s; if (!i--) break; n = c * e[(r += 2) + 1]; e[r] -= n + s } } }; return e }(), E = function () { function e() { F.call(this) } e.prototype = Object.create(F.prototype); e.prototype.filter = function (e, t, a) { var r, i, n = a >> 1; for (r = t |= 0, i = n + 1; i--; r += 2)e[r] -= e[r - 1] + e[r + 1] + 2 >> 2; for (r = t + 1, i = n; i--; r += 2)e[r] += e[r - 1] + e[r + 1] >> 1 }; return e }(); return t }(); t.JpxImage = o }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.calculateSHA512 = t.calculateSHA384 = t.calculateSHA256 = t.calculateMD5 = t.PDF20 = t.PDF17 = t.CipherTransformFactory = t.ARCFourCipher = t.AES256Cipher = t.AES128Cipher = void 0; var r = a(2), i = a(4), n = a(11), s = function () { function e(e) { this.a = 0; this.b = 0; var t, a, r = new Uint8Array(256), i = 0, n = e.length; for (t = 0; t < 256; ++t)r[t] = t; for (t = 0; t < 256; ++t) { i = i + (a = r[t]) + e[t % n] & 255; r[t] = r[i]; r[i] = a } this.s = r } e.prototype = { encryptBlock: function (e) { var t, a, r, i = e.length, n = this.a, s = this.b, o = this.s, c = new Uint8Array(i); for (t = 0; t < i; ++t) { r = o[s = s + (a = o[n = n + 1 & 255]) & 255]; o[n] = r; o[s] = a; c[t] = e[t] ^ o[a + r & 255] } this.a = n; this.b = s; return c } }; e.prototype.decryptBlock = e.prototype.encryptBlock; return e }(); t.ARCFourCipher = s; var o, c, l = (o = new Uint8Array([7, 12, 17, 22, 7, 12, 17, 22, 7, 12, 17, 22, 7, 12, 17, 22, 5, 9, 14, 20, 5, 9, 14, 20, 5, 9, 14, 20, 5, 9, 14, 20, 4, 11, 16, 23, 4, 11, 16, 23, 4, 11, 16, 23, 4, 11, 16, 23, 6, 10, 15, 21, 6, 10, 15, 21, 6, 10, 15, 21, 6, 10, 15, 21]), c = new Int32Array([-680876936, -389564586, 606105819, -1044525330, -176418897, 1200080426, -1473231341, -45705983, 1770035416, -1958414417, -42063, -1990404162, 1804603682, -40341101, -1502002290, 1236535329, -165796510, -1069501632, 643717713, -373897302, -701558691, 38016083, -660478335, -405537848, 568446438, -1019803690, -187363961, 1163531501, -1444681467, -51403784, 1735328473, -1926607734, -378558, -2022574463, 1839030562, -35309556, -1530992060, 1272893353, -155497632, -1094730640, 681279174, -358537222, -722521979, 76029189, -640364487, -421815835, 530742520, -995338651, -198630844, 1126891415, -1416354905, -57434055, 1700485571, -1894986606, -1051523, -2054922799, 1873313359, -30611744, -1560198380, 1309151649, -145523070, -1120210379, 718787259, -343485551]), function (e, t, a) { var r, i, n, s = 1732584193, l = -271733879, h = -1732584194, u = 271733878, d = a + 72 & -64, f = new Uint8Array(d); for (r = 0; r < a; ++r)f[r] = e[t++]; f[r++] = 128; n = d - 8; for (; r < n;)f[r++] = 0; f[r++] = a << 3 & 255; f[r++] = a >> 5 & 255; f[r++] = a >> 13 & 255; f[r++] = a >> 21 & 255; f[r++] = a >>> 29 & 255; f[r++] = 0; f[r++] = 0; f[r++] = 0; var g = new Int32Array(16); for (r = 0; r < d;) { for (i = 0; i < 16; ++i, r += 4)g[i] = f[r] | f[r + 1] << 8 | f[r + 2] << 16 | f[r + 3] << 24; var m, p, b = s, y = l, v = h, w = u; for (i = 0; i < 64; ++i) { if (i < 16) { m = y & v | ~y & w; p = i } else if (i < 32) { m = w & y | ~w & v; p = 5 * i + 1 & 15 } else if (i < 48) { m = y ^ v ^ w; p = 3 * i + 5 & 15 } else { m = v ^ (y | ~w); p = 7 * i & 15 } var k = w, S = b + m + c[i] + g[p] | 0, C = o[i]; w = v; v = y; y = y + (S << C | S >>> 32 - C) | 0; b = k } s = s + b | 0; l = l + y | 0; h = h + v | 0; u = u + w | 0 } return new Uint8Array([255 & s, s >> 8 & 255, s >> 16 & 255, s >>> 24 & 255, 255 & l, l >> 8 & 255, l >> 16 & 255, l >>> 24 & 255, 255 & h, h >> 8 & 255, h >> 16 & 255, h >>> 24 & 255, 255 & u, u >> 8 & 255, u >> 16 & 255, u >>> 24 & 255]) }); t.calculateMD5 = l; var h = function () { function e(e, t) { this.high = 0 | e; this.low = 0 | t } e.prototype = { and: function (e) { this.high &= e.high; this.low &= e.low }, xor: function (e) { this.high ^= e.high; this.low ^= e.low }, or: function (e) { this.high |= e.high; this.low |= e.low }, shiftRight: function (e) { if (e >= 32) { this.low = this.high >>> e - 32 | 0; this.high = 0 } else { this.low = this.low >>> e | this.high << 32 - e; this.high = this.high >>> e | 0 } }, shiftLeft: function (e) { if (e >= 32) { this.high = this.low << e - 32; this.low = 0 } else { this.high = this.high << e | this.low >>> 32 - e; this.low = this.low << e } }, rotateRight: function (e) { var t, a; if (32 & e) { a = this.low; t = this.high } else { t = this.low; a = this.high } e &= 31; this.low = t >>> e | a << 32 - e; this.high = a >>> e | t << 32 - e }, not: function () { this.high = ~this.high; this.low = ~this.low }, add: function (e) { var t = (this.low >>> 0) + (e.low >>> 0), a = (this.high >>> 0) + (e.high >>> 0); t > 4294967295 && (a += 1); this.low = 0 | t; this.high = 0 | a }, copyTo: function (e, t) { e[t] = this.high >>> 24 & 255; e[t + 1] = this.high >> 16 & 255; e[t + 2] = this.high >> 8 & 255; e[t + 3] = 255 & this.high; e[t + 4] = this.low >>> 24 & 255; e[t + 5] = this.low >> 16 & 255; e[t + 6] = this.low >> 8 & 255; e[t + 7] = 255 & this.low }, assign: function (e) { this.high = e.high; this.low = e.low } }; return e }(), u = function () { function e(e, t) { return e >>> t | e << 32 - t } function t(e, t, a) { return e & t ^ ~e & a } function a(e, t, a) { return e & t ^ e & a ^ t & a } function r(t) { return e(t, 2) ^ e(t, 13) ^ e(t, 22) } function i(t) { return e(t, 6) ^ e(t, 11) ^ e(t, 25) } function n(t) { return e(t, 7) ^ e(t, 18) ^ t >>> 3 } var s = [1116352408, 1899447441, 3049323471, 3921009573, 961987163, 1508970993, 2453635748, 2870763221, 3624381080, 310598401, 607225278, 1426881987, 1925078388, 2162078206, 2614888103, 3248222580, 3835390401, 4022224774, 264347078, 604807628, 770255983, 1249150122, 1555081692, 1996064986, 2554220882, 2821834349, 2952996808, 3210313671, 3336571891, 3584528711, 113926993, 338241895, 666307205, 773529912, 1294757372, 1396182291, 1695183700, 1986661051, 2177026350, 2456956037, 2730485921, 2820302411, 3259730800, 3345764771, 3516065817, 3600352804, 4094571909, 275423344, 430227734, 506948616, 659060556, 883997877, 958139571, 1322822218, 1537002063, 1747873779, 1955562222, 2024104815, 2227730452, 2361852424, 2428436474, 2756734187, 3204031479, 3329325298]; return function (o, c, l) { var h, u, d, f = 1779033703, g = 3144134277, m = 1013904242, p = 2773480762, b = 1359893119, y = 2600822924, v = 528734635, w = 1541459225, k = 64 * Math.ceil((l + 9) / 64), S = new Uint8Array(k); for (h = 0; h < l; ++h)S[h] = o[c++]; S[h++] = 128; d = k - 8; for (; h < d;)S[h++] = 0; S[h++] = 0; S[h++] = 0; S[h++] = 0; S[h++] = l >>> 29 & 255; S[h++] = l >> 21 & 255; S[h++] = l >> 13 & 255; S[h++] = l >> 5 & 255; S[h++] = l << 3 & 255; var C, x = new Uint32Array(64); for (h = 0; h < k;) { for (u = 0; u < 16; ++u) { x[u] = S[h] << 24 | S[h + 1] << 16 | S[h + 2] << 8 | S[h + 3]; h += 4 } for (u = 16; u < 64; ++u)x[u] = (e(C = x[u - 2], 17) ^ e(C, 19) ^ C >>> 10) + x[u - 7] + n(x[u - 15]) + x[u - 16] | 0; var A, I, F = f, T = g, E = m, O = p, P = b, B = y, D = v, N = w; for (u = 0; u < 64; ++u) { A = N + i(P) + t(P, B, D) + s[u] + x[u]; I = r(F) + a(F, T, E); N = D; D = B; B = P; P = O + A | 0; O = E; E = T; T = F; F = A + I | 0 } f = f + F | 0; g = g + T | 0; m = m + E | 0; p = p + O | 0; b = b + P | 0; y = y + B | 0; v = v + D | 0; w = w + N | 0 } return new Uint8Array([f >> 24 & 255, f >> 16 & 255, f >> 8 & 255, 255 & f, g >> 24 & 255, g >> 16 & 255, g >> 8 & 255, 255 & g, m >> 24 & 255, m >> 16 & 255, m >> 8 & 255, 255 & m, p >> 24 & 255, p >> 16 & 255, p >> 8 & 255, 255 & p, b >> 24 & 255, b >> 16 & 255, b >> 8 & 255, 255 & b, y >> 24 & 255, y >> 16 & 255, y >> 8 & 255, 255 & y, v >> 24 & 255, v >> 16 & 255, v >> 8 & 255, 255 & v, w >> 24 & 255, w >> 16 & 255, w >> 8 & 255, 255 & w]) } }(); t.calculateSHA256 = u; var d = function () { function e(e, t, a, r, i) { e.assign(t); e.and(a); i.assign(t); i.not(); i.and(r); e.xor(i) } function t(e, t, a, r, i) { e.assign(t); e.and(a); i.assign(t); i.and(r); e.xor(i); i.assign(a); i.and(r); e.xor(i) } function a(e, t, a) { e.assign(t); e.rotateRight(28); a.assign(t); a.rotateRight(34); e.xor(a); a.assign(t); a.rotateRight(39); e.xor(a) } function r(e, t, a) { e.assign(t); e.rotateRight(14); a.assign(t); a.rotateRight(18); e.xor(a); a.assign(t); a.rotateRight(41); e.xor(a) } function i(e, t, a) { e.assign(t); e.rotateRight(1); a.assign(t); a.rotateRight(8); e.xor(a); a.assign(t); a.shiftRight(7); e.xor(a) } function n(e, t, a) { e.assign(t); e.rotateRight(19); a.assign(t); a.rotateRight(61); e.xor(a); a.assign(t); a.shiftRight(6); e.xor(a) } var s = [new h(1116352408, 3609767458), new h(1899447441, 602891725), new h(3049323471, 3964484399), new h(3921009573, 2173295548), new h(961987163, 4081628472), new h(1508970993, 3053834265), new h(2453635748, 2937671579), new h(2870763221, 3664609560), new h(3624381080, 2734883394), new h(310598401, 1164996542), new h(607225278, 1323610764), new h(1426881987, 3590304994), new h(1925078388, 4068182383), new h(2162078206, 991336113), new h(2614888103, 633803317), new h(3248222580, 3479774868), new h(3835390401, 2666613458), new h(4022224774, 944711139), new h(264347078, 2341262773), new h(604807628, 2007800933), new h(770255983, 1495990901), new h(1249150122, 1856431235), new h(1555081692, 3175218132), new h(1996064986, 2198950837), new h(2554220882, 3999719339), new h(2821834349, 766784016), new h(2952996808, 2566594879), new h(3210313671, 3203337956), new h(3336571891, 1034457026), new h(3584528711, 2466948901), new h(113926993, 3758326383), new h(338241895, 168717936), new h(666307205, 1188179964), new h(773529912, 1546045734), new h(1294757372, 1522805485), new h(1396182291, 2643833823), new h(1695183700, 2343527390), new h(1986661051, 1014477480), new h(2177026350, 1206759142), new h(2456956037, 344077627), new h(2730485921, 1290863460), new h(2820302411, 3158454273), new h(3259730800, 3505952657), new h(3345764771, 106217008), new h(3516065817, 3606008344), new h(3600352804, 1432725776), new h(4094571909, 1467031594), new h(275423344, 851169720), new h(430227734, 3100823752), new h(506948616, 1363258195), new h(659060556, 3750685593), new h(883997877, 3785050280), new h(958139571, 3318307427), new h(1322822218, 3812723403), new h(1537002063, 2003034995), new h(1747873779, 3602036899), new h(1955562222, 1575990012), new h(2024104815, 1125592928), new h(2227730452, 2716904306), new h(2361852424, 442776044), new h(2428436474, 593698344), new h(2756734187, 3733110249), new h(3204031479, 2999351573), new h(3329325298, 3815920427), new h(3391569614, 3928383900), new h(3515267271, 566280711), new h(3940187606, 3454069534), new h(4118630271, 4000239992), new h(116418474, 1914138554), new h(174292421, 2731055270), new h(289380356, 3203993006), new h(460393269, 320620315), new h(685471733, 587496836), new h(852142971, 1086792851), new h(1017036298, 365543100), new h(1126000580, 2618297676), new h(1288033470, 3409855158), new h(1501505948, 4234509866), new h(1607167915, 987167468), new h(1816402316, 1246189591)]; return function (o, c, l, u) { var d, f, g, m, p, b, y, v; if (u = !!u) { d = new h(3418070365, 3238371032); f = new h(1654270250, 914150663); g = new h(2438529370, 812702999); m = new h(355462360, 4144912697); p = new h(1731405415, 4290775857); b = new h(2394180231, 1750603025); y = new h(3675008525, 1694076839); v = new h(1203062813, 3204075428) } else { d = new h(1779033703, 4089235720); f = new h(3144134277, 2227873595); g = new h(1013904242, 4271175723); m = new h(2773480762, 1595750129); p = new h(1359893119, 2917565137); b = new h(2600822924, 725511199); y = new h(528734635, 4215389547); v = new h(1541459225, 327033209) } var w, k, S, C = 128 * Math.ceil((l + 17) / 128), x = new Uint8Array(C); for (w = 0; w < l; ++w)x[w] = o[c++]; x[w++] = 128; S = C - 16; for (; w < S;)x[w++] = 0; x[w++] = 0; x[w++] = 0; x[w++] = 0; x[w++] = 0; x[w++] = 0; x[w++] = 0; x[w++] = 0; x[w++] = 0; x[w++] = 0; x[w++] = 0; x[w++] = 0; x[w++] = l >>> 29 & 255; x[w++] = l >> 21 & 255; x[w++] = l >> 13 & 255; x[w++] = l >> 5 & 255; x[w++] = l << 3 & 255; var A = new Array(80); for (w = 0; w < 80; w++)A[w] = new h(0, 0); var I, F, T = new h(0, 0), E = new h(0, 0), O = new h(0, 0), P = new h(0, 0), B = new h(0, 0), D = new h(0, 0), N = new h(0, 0), M = new h(0, 0), L = new h(0, 0), R = new h(0, 0), U = new h(0, 0), q = new h(0, 0); for (w = 0; w < C;) { for (k = 0; k < 16; ++k) { A[k].high = x[w] << 24 | x[w + 1] << 16 | x[w + 2] << 8 | x[w + 3]; A[k].low = x[w + 4] << 24 | x[w + 5] << 16 | x[w + 6] << 8 | x[w + 7]; w += 8 } for (k = 16; k < 80; ++k) { n(I = A[k], A[k - 2], q); I.add(A[k - 7]); i(U, A[k - 15], q); I.add(U); I.add(A[k - 16]) } T.assign(d); E.assign(f); O.assign(g); P.assign(m); B.assign(p); D.assign(b); N.assign(y); M.assign(v); for (k = 0; k < 80; ++k) { L.assign(M); r(U, B, q); L.add(U); e(U, B, D, N, q); L.add(U); L.add(s[k]); L.add(A[k]); a(R, T, q); t(U, T, E, O, q); R.add(U); I = M; M = N; N = D; D = B; P.add(L); B = P; P = O; O = E; E = T; I.assign(L); I.add(R); T = I } d.add(T); f.add(E); g.add(O); m.add(P); p.add(B); b.add(D); y.add(N); v.add(M) } if (u) { F = new Uint8Array(48); d.copyTo(F, 0); f.copyTo(F, 8); g.copyTo(F, 16); m.copyTo(F, 24); p.copyTo(F, 32); b.copyTo(F, 40) } else { F = new Uint8Array(64); d.copyTo(F, 0); f.copyTo(F, 8); g.copyTo(F, 16); m.copyTo(F, 24); p.copyTo(F, 32); b.copyTo(F, 40); y.copyTo(F, 48); v.copyTo(F, 56) } return F } }(); t.calculateSHA512 = d; var f = function (e, t, a) { return d(e, t, a, !0) }; t.calculateSHA384 = f; var g = function () { function e() { } e.prototype = { decryptBlock: function (e) { return e } }; return e }(); class m { constructor() { this.constructor === m && (0, r.unreachable)("Cannot initialize AESBaseCipher."); this._s = new Uint8Array([99, 124, 119, 123, 242, 107, 111, 197, 48, 1, 103, 43, 254, 215, 171, 118, 202, 130, 201, 125, 250, 89, 71, 240, 173, 212, 162, 175, 156, 164, 114, 192, 183, 253, 147, 38, 54, 63, 247, 204, 52, 165, 229, 241, 113, 216, 49, 21, 4, 199, 35, 195, 24, 150, 5, 154, 7, 18, 128, 226, 235, 39, 178, 117, 9, 131, 44, 26, 27, 110, 90, 160, 82, 59, 214, 179, 41, 227, 47, 132, 83, 209, 0, 237, 32, 252, 177, 91, 106, 203, 190, 57, 74, 76, 88, 207, 208, 239, 170, 251, 67, 77, 51, 133, 69, 249, 2, 127, 80, 60, 159, 168, 81, 163, 64, 143, 146, 157, 56, 245, 188, 182, 218, 33, 16, 255, 243, 210, 205, 12, 19, 236, 95, 151, 68, 23, 196, 167, 126, 61, 100, 93, 25, 115, 96, 129, 79, 220, 34, 42, 144, 136, 70, 238, 184, 20, 222, 94, 11, 219, 224, 50, 58, 10, 73, 6, 36, 92, 194, 211, 172, 98, 145, 149, 228, 121, 231, 200, 55, 109, 141, 213, 78, 169, 108, 86, 244, 234, 101, 122, 174, 8, 186, 120, 37, 46, 28, 166, 180, 198, 232, 221, 116, 31, 75, 189, 139, 138, 112, 62, 181, 102, 72, 3, 246, 14, 97, 53, 87, 185, 134, 193, 29, 158, 225, 248, 152, 17, 105, 217, 142, 148, 155, 30, 135, 233, 206, 85, 40, 223, 140, 161, 137, 13, 191, 230, 66, 104, 65, 153, 45, 15, 176, 84, 187, 22]); this._inv_s = new Uint8Array([82, 9, 106, 213, 48, 54, 165, 56, 191, 64, 163, 158, 129, 243, 215, 251, 124, 227, 57, 130, 155, 47, 255, 135, 52, 142, 67, 68, 196, 222, 233, 203, 84, 123, 148, 50, 166, 194, 35, 61, 238, 76, 149, 11, 66, 250, 195, 78, 8, 46, 161, 102, 40, 217, 36, 178, 118, 91, 162, 73, 109, 139, 209, 37, 114, 248, 246, 100, 134, 104, 152, 22, 212, 164, 92, 204, 93, 101, 182, 146, 108, 112, 72, 80, 253, 237, 185, 218, 94, 21, 70, 87, 167, 141, 157, 132, 144, 216, 171, 0, 140, 188, 211, 10, 247, 228, 88, 5, 184, 179, 69, 6, 208, 44, 30, 143, 202, 63, 15, 2, 193, 175, 189, 3, 1, 19, 138, 107, 58, 145, 17, 65, 79, 103, 220, 234, 151, 242, 207, 206, 240, 180, 230, 115, 150, 172, 116, 34, 231, 173, 53, 133, 226, 249, 55, 232, 28, 117, 223, 110, 71, 241, 26, 113, 29, 41, 197, 137, 111, 183, 98, 14, 170, 24, 190, 27, 252, 86, 62, 75, 198, 210, 121, 32, 154, 219, 192, 254, 120, 205, 90, 244, 31, 221, 168, 51, 136, 7, 199, 49, 177, 18, 16, 89, 39, 128, 236, 95, 96, 81, 127, 169, 25, 181, 74, 13, 45, 229, 122, 159, 147, 201, 156, 239, 160, 224, 59, 77, 174, 42, 245, 176, 200, 235, 187, 60, 131, 83, 153, 97, 23, 43, 4, 126, 186, 119, 214, 38, 225, 105, 20, 99, 85, 33, 12, 125]); this._mix = new Uint32Array([0, 235474187, 470948374, 303765277, 941896748, 908933415, 607530554, 708780849, 1883793496, 2118214995, 1817866830, 1649639237, 1215061108, 1181045119, 1417561698, 1517767529, 3767586992, 4003061179, 4236429990, 4069246893, 3635733660, 3602770327, 3299278474, 3400528769, 2430122216, 2664543715, 2362090238, 2193862645, 2835123396, 2801107407, 3035535058, 3135740889, 3678124923, 3576870512, 3341394285, 3374361702, 3810496343, 3977675356, 4279080257, 4043610186, 2876494627, 2776292904, 3076639029, 3110650942, 2472011535, 2640243204, 2403728665, 2169303058, 1001089995, 899835584, 666464733, 699432150, 59727847, 226906860, 530400753, 294930682, 1273168787, 1172967064, 1475418501, 1509430414, 1942435775, 2110667444, 1876241833, 1641816226, 2910219766, 2743034109, 2976151520, 3211623147, 2505202138, 2606453969, 2302690252, 2269728455, 3711829422, 3543599269, 3240894392, 3475313331, 3843699074, 3943906441, 4178062228, 4144047775, 1306967366, 1139781709, 1374988112, 1610459739, 1975683434, 2076935265, 1775276924, 1742315127, 1034867998, 866637845, 566021896, 800440835, 92987698, 193195065, 429456164, 395441711, 1984812685, 2017778566, 1784663195, 1683407248, 1315562145, 1080094634, 1383856311, 1551037884, 101039829, 135050206, 437757123, 337553864, 1042385657, 807962610, 573804783, 742039012, 2531067453, 2564033334, 2328828971, 2227573024, 2935566865, 2700099354, 3001755655, 3168937228, 3868552805, 3902563182, 4203181171, 4102977912, 3736164937, 3501741890, 3265478751, 3433712980, 1106041591, 1340463100, 1576976609, 1408749034, 2043211483, 2009195472, 1708848333, 1809054150, 832877231, 1068351396, 766945465, 599762354, 159417987, 126454664, 361929877, 463180190, 2709260871, 2943682380, 3178106961, 3009879386, 2572697195, 2538681184, 2236228733, 2336434550, 3509871135, 3745345300, 3441850377, 3274667266, 3910161971, 3877198648, 4110568485, 4211818798, 2597806476, 2497604743, 2261089178, 2295101073, 2733856160, 2902087851, 3202437046, 2968011453, 3936291284, 3835036895, 4136440770, 4169408201, 3535486456, 3702665459, 3467192302, 3231722213, 2051518780, 1951317047, 1716890410, 1750902305, 1113818384, 1282050075, 1584504582, 1350078989, 168810852, 67556463, 371049330, 404016761, 841739592, 1008918595, 775550814, 540080725, 3969562369, 3801332234, 4035489047, 4269907996, 3569255213, 3669462566, 3366754619, 3332740144, 2631065433, 2463879762, 2160117071, 2395588676, 2767645557, 2868897406, 3102011747, 3069049960, 202008497, 33778362, 270040487, 504459436, 875451293, 975658646, 675039627, 641025152, 2084704233, 1917518562, 1615861247, 1851332852, 1147550661, 1248802510, 1484005843, 1451044056, 933301370, 967311729, 733156972, 632953703, 260388950, 25965917, 328671808, 496906059, 1206477858, 1239443753, 1543208500, 1441952575, 2144161806, 1908694277, 1675577880, 1842759443, 3610369226, 3644379585, 3408119516, 3307916247, 4011190502, 3776767469, 4077384432, 4245618683, 2809771154, 2842737049, 3144396420, 3043140495, 2673705150, 2438237621, 2203032232, 2370213795]); this._mixCol = new Uint8Array(256); for (let e = 0; e < 256; e++)this._mixCol[e] = e < 128 ? e << 1 : e << 1 ^ 27; this.buffer = new Uint8Array(16); this.bufferPosition = 0 } _expandKey(e) { (0, r.unreachable)("Cannot call `_expandKey` on the base class") } _decrypt(e, t) { let a, r, i; const n = new Uint8Array(16); n.set(e); for (let e = 0, a = this._keySize; e < 16; ++e, ++a)n[e] ^= t[a]; for (let e = this._cyclesOfRepetition - 1; e >= 1; --e) { a = n[13]; n[13] = n[9]; n[9] = n[5]; n[5] = n[1]; n[1] = a; a = n[14]; r = n[10]; n[14] = n[6]; n[10] = n[2]; n[6] = a; n[2] = r; a = n[15]; r = n[11]; i = n[7]; n[15] = n[3]; n[11] = a; n[7] = r; n[3] = i; for (let e = 0; e < 16; ++e)n[e] = this._inv_s[n[e]]; for (let a = 0, r = 16 * e; a < 16; ++a, ++r)n[a] ^= t[r]; for (let e = 0; e < 16; e += 4) { const t = this._mix[n[e]], r = this._mix[n[e + 1]], i = this._mix[n[e + 2]], s = this._mix[n[e + 3]]; a = t ^ r >>> 8 ^ r << 24 ^ i >>> 16 ^ i << 16 ^ s >>> 24 ^ s << 8; n[e] = a >>> 24 & 255; n[e + 1] = a >> 16 & 255; n[e + 2] = a >> 8 & 255; n[e + 3] = 255 & a } } a = n[13]; n[13] = n[9]; n[9] = n[5]; n[5] = n[1]; n[1] = a; a = n[14]; r = n[10]; n[14] = n[6]; n[10] = n[2]; n[6] = a; n[2] = r; a = n[15]; r = n[11]; i = n[7]; n[15] = n[3]; n[11] = a; n[7] = r; n[3] = i; for (let e = 0; e < 16; ++e) { n[e] = this._inv_s[n[e]]; n[e] ^= t[e] } return n } _encrypt(e, t) { const a = this._s; let r, i, n; const s = new Uint8Array(16); s.set(e); for (let e = 0; e < 16; ++e)s[e] ^= t[e]; for (let e = 1; e < this._cyclesOfRepetition; e++) { for (let e = 0; e < 16; ++e)s[e] = a[s[e]]; n = s[1]; s[1] = s[5]; s[5] = s[9]; s[9] = s[13]; s[13] = n; n = s[2]; i = s[6]; s[2] = s[10]; s[6] = s[14]; s[10] = n; s[14] = i; n = s[3]; i = s[7]; r = s[11]; s[3] = s[15]; s[7] = n; s[11] = i; s[15] = r; for (let e = 0; e < 16; e += 4) { const t = s[e + 0], a = s[e + 1], i = s[e + 2], n = s[e + 3]; r = t ^ a ^ i ^ n; s[e + 0] ^= r ^ this._mixCol[t ^ a]; s[e + 1] ^= r ^ this._mixCol[a ^ i]; s[e + 2] ^= r ^ this._mixCol[i ^ n]; s[e + 3] ^= r ^ this._mixCol[n ^ t] } for (let a = 0, r = 16 * e; a < 16; ++a, ++r)s[a] ^= t[r] } for (let e = 0; e < 16; ++e)s[e] = a[s[e]]; n = s[1]; s[1] = s[5]; s[5] = s[9]; s[9] = s[13]; s[13] = n; n = s[2]; i = s[6]; s[2] = s[10]; s[6] = s[14]; s[10] = n; s[14] = i; n = s[3]; i = s[7]; r = s[11]; s[3] = s[15]; s[7] = n; s[11] = i; s[15] = r; for (let e = 0, a = this._keySize; e < 16; ++e, ++a)s[e] ^= t[a]; return s } _decryptBlock2(e, t) { const a = e.length; let r = this.buffer, i = this.bufferPosition; const n = []; let s = this.iv; for (let t = 0; t < a; ++t) { r[i] = e[t]; ++i; if (i < 16) continue; const a = this._decrypt(r, this._key); for (let e = 0; e < 16; ++e)a[e] ^= s[e]; s = r; n.push(a); r = new Uint8Array(16); i = 0 } this.buffer = r; this.bufferLength = i; this.iv = s; if (0 === n.length) return new Uint8Array(0); let o = 16 * n.length; if (t) { const e = n[n.length - 1]; let t = e[15]; if (t <= 16) { for (let a = 15, r = 16 - t; a >= r; --a)if (e[a] !== t) { t = 0; break } o -= t; n[n.length - 1] = e.subarray(0, 16 - t) } } const c = new Uint8Array(o); for (let e = 0, t = 0, a = n.length; e < a; ++e, t += 16)c.set(n[e], t); return c } decryptBlock(e, t, a = null) { const r = e.length, i = this.buffer; let n = this.bufferPosition; if (a) this.iv = a; else { for (let t = 0; n < 16 && t < r; ++t, ++n)i[n] = e[t]; if (n < 16) { this.bufferLength = n; return new Uint8Array(0) } this.iv = i; e = e.subarray(16) } this.buffer = new Uint8Array(16); this.bufferLength = 0; this.decryptBlock = this._decryptBlock2; return this.decryptBlock(e, t) } encrypt(e, t) { const a = e.length; let r = this.buffer, i = this.bufferPosition; const n = []; t || (t = new Uint8Array(16)); for (let s = 0; s < a; ++s) { r[i] = e[s]; ++i; if (i < 16) continue; for (let e = 0; e < 16; ++e)r[e] ^= t[e]; const a = this._encrypt(r, this._key); t = a; n.push(a); r = new Uint8Array(16); i = 0 } this.buffer = r; this.bufferLength = i; this.iv = t; if (0 === n.length) return new Uint8Array(0); const s = 16 * n.length, o = new Uint8Array(s); for (let e = 0, t = 0, a = n.length; e < a; ++e, t += 16)o.set(n[e], t); return o } } class p extends m { constructor(e) { super(); this._cyclesOfRepetition = 10; this._keySize = 160; this._rcon = new Uint8Array([141, 1, 2, 4, 8, 16, 32, 64, 128, 27, 54, 108, 216, 171, 77, 154, 47, 94, 188, 99, 198, 151, 53, 106, 212, 179, 125, 250, 239, 197, 145, 57, 114, 228, 211, 189, 97, 194, 159, 37, 74, 148, 51, 102, 204, 131, 29, 58, 116, 232, 203, 141, 1, 2, 4, 8, 16, 32, 64, 128, 27, 54, 108, 216, 171, 77, 154, 47, 94, 188, 99, 198, 151, 53, 106, 212, 179, 125, 250, 239, 197, 145, 57, 114, 228, 211, 189, 97, 194, 159, 37, 74, 148, 51, 102, 204, 131, 29, 58, 116, 232, 203, 141, 1, 2, 4, 8, 16, 32, 64, 128, 27, 54, 108, 216, 171, 77, 154, 47, 94, 188, 99, 198, 151, 53, 106, 212, 179, 125, 250, 239, 197, 145, 57, 114, 228, 211, 189, 97, 194, 159, 37, 74, 148, 51, 102, 204, 131, 29, 58, 116, 232, 203, 141, 1, 2, 4, 8, 16, 32, 64, 128, 27, 54, 108, 216, 171, 77, 154, 47, 94, 188, 99, 198, 151, 53, 106, 212, 179, 125, 250, 239, 197, 145, 57, 114, 228, 211, 189, 97, 194, 159, 37, 74, 148, 51, 102, 204, 131, 29, 58, 116, 232, 203, 141, 1, 2, 4, 8, 16, 32, 64, 128, 27, 54, 108, 216, 171, 77, 154, 47, 94, 188, 99, 198, 151, 53, 106, 212, 179, 125, 250, 239, 197, 145, 57, 114, 228, 211, 189, 97, 194, 159, 37, 74, 148, 51, 102, 204, 131, 29, 58, 116, 232, 203, 141]); this._key = this._expandKey(e) } _expandKey(e) { const t = this._s, a = this._rcon, r = new Uint8Array(176); r.set(e); for (let e = 16, i = 1; e < 176; ++i) { let n = r[e - 3], s = r[e - 2], o = r[e - 1], c = r[e - 4]; n = t[n]; s = t[s]; o = t[o]; c = t[c]; n ^= a[i]; for (let t = 0; t < 4; ++t) { r[e] = n ^= r[e - 16]; e++; r[e] = s ^= r[e - 16]; e++; r[e] = o ^= r[e - 16]; e++; r[e] = c ^= r[e - 16]; e++ } } return r } } t.AES128Cipher = p; class b extends m { constructor(e) { super(); this._cyclesOfRepetition = 14; this._keySize = 224; this._key = this._expandKey(e) } _expandKey(e) { const t = this._s, a = new Uint8Array(240); a.set(e); let r, i, n, s, o = 1; for (let e = 32, c = 1; e < 240; ++c) { if (e % 32 == 16) { r = t[r]; i = t[i]; n = t[n]; s = t[s] } else if (e % 32 == 0) { r = a[e - 3]; i = a[e - 2]; n = a[e - 1]; s = a[e - 4]; r = t[r]; i = t[i]; n = t[n]; s = t[s]; r ^= o; (o <<= 1) >= 256 && (o = 255 & (27 ^ o)) } for (let t = 0; t < 4; ++t) { a[e] = r ^= a[e - 32]; e++; a[e] = i ^= a[e - 32]; e++; a[e] = n ^= a[e - 32]; e++; a[e] = s ^= a[e - 32]; e++ } } return a } } t.AES256Cipher = b; var y = function () { function e(e, t) { if (e.length !== t.length) return !1; for (var a = 0; a < e.length; a++)if (e[a] !== t[a]) return !1; return !0 } function t() { } t.prototype = { checkOwnerPassword: function (t, a, r, i) { var n = new Uint8Array(t.length + 56); n.set(t, 0); n.set(a, t.length); n.set(r, t.length + a.length); return e(u(n, 0, n.length), i) }, checkUserPassword: function (t, a, r) { var i = new Uint8Array(t.length + 8); i.set(t, 0); i.set(a, t.length); return e(u(i, 0, i.length), r) }, getOwnerKey: function (e, t, a, r) { var i = new Uint8Array(e.length + 56); i.set(e, 0); i.set(t, e.length); i.set(a, e.length + t.length); var n = u(i, 0, i.length); return new b(n).decryptBlock(r, !1, new Uint8Array(16)) }, getUserKey: function (e, t, a) { var r = new Uint8Array(e.length + 8); r.set(e, 0); r.set(t, e.length); var i = u(r, 0, r.length); return new b(i).decryptBlock(a, !1, new Uint8Array(16)) } }; return t }(); t.PDF17 = y; var v = function () { function e(e, t) { var a = new Uint8Array(e.length + t.length); a.set(e, 0); a.set(t, e.length); return a } function t(t, a, r) { for (var i = u(a, 0, a.length).subarray(0, 32), n = [0], s = 0; s < 64 || n[n.length - 1] > s - 32;) { var o = t.length + i.length + r.length, c = new Uint8Array(64 * o), l = e(t, i); l = e(l, r); for (var h = 0, g = 0; h < 64; h++, g += o)c.set(l, g); n = new p(i.subarray(0, 16)).encrypt(c, i.subarray(16, 32)); for (var m = 0, b = 0; b < 16; b++) { m *= 1; m %= 3; m += (n[b] >>> 0) % 3; m %= 3 } 0 === m ? i = u(n, 0, n.length) : 1 === m ? i = f(n, 0, n.length) : 2 === m && (i = d(n, 0, n.length)); s++ } return i.subarray(0, 32) } function a() { } function r(e, t) { if (e.length !== t.length) return !1; for (var a = 0; a < e.length; a++)if (e[a] !== t[a]) return !1; return !0 } a.prototype = { hash: function (e, a, r) { return t(e, a, r) }, checkOwnerPassword: function (e, a, i, n) { var s = new Uint8Array(e.length + 56); s.set(e, 0); s.set(a, e.length); s.set(i, e.length + a.length); return r(t(e, s, i), n) }, checkUserPassword: function (e, a, i) { var n = new Uint8Array(e.length + 8); n.set(e, 0); n.set(a, e.length); return r(t(e, n, []), i) }, getOwnerKey: function (e, a, r, i) { var n = new Uint8Array(e.length + 56); n.set(e, 0); n.set(a, e.length); n.set(r, e.length + a.length); var s = t(e, n, r); return new b(s).decryptBlock(i, !1, new Uint8Array(16)) }, getUserKey: function (e, a, r) { var i = new Uint8Array(e.length + 8); i.set(e, 0); i.set(a, e.length); var n = t(e, i, []); return new b(n).decryptBlock(r, !1, new Uint8Array(16)) } }; return a }(); t.PDF20 = v; var w = function () { function e(e, t) { this.StringCipherConstructor = e; this.StreamCipherConstructor = t } e.prototype = { createStream: function (e, t) { var a = new this.StreamCipherConstructor; return new n.DecryptStream(e, t, (function (e, t) { return a.decryptBlock(e, t) })) }, decryptString: function (e) { var t = new this.StringCipherConstructor, a = (0, r.stringToBytes)(e); a = t.decryptBlock(a, !0); return (0, r.bytesToString)(a) } }; return e }(), k = function () { var e = new Uint8Array([40, 191, 78, 94, 78, 117, 138, 65, 100, 0, 78, 86, 255, 250, 1, 8, 46, 46, 0, 182, 208, 104, 62, 128, 47, 12, 169, 254, 100, 83, 105, 122]); function t(t, a, r, i, n, o, c, h) { var u, d, f = 40 + r.length + t.length, g = new Uint8Array(f), m = 0; if (a) { d = Math.min(32, a.length); for (; m < d; ++m)g[m] = a[m] } u = 0; for (; m < 32;)g[m++] = e[u++]; for (u = 0, d = r.length; u < d; ++u)g[m++] = r[u]; g[m++] = 255 & n; g[m++] = n >> 8 & 255; g[m++] = n >> 16 & 255; g[m++] = n >>> 24 & 255; for (u = 0, d = t.length; u < d; ++u)g[m++] = t[u]; if (o >= 4 && !h) { g[m++] = 255; g[m++] = 255; g[m++] = 255; g[m++] = 255 } var p = l(g, 0, m), b = c >> 3; if (o >= 3) for (u = 0; u < 50; ++u)p = l(p, 0, b); var y, v = p.subarray(0, b); if (o >= 3) { for (m = 0; m < 32; ++m)g[m] = e[m]; for (u = 0, d = t.length; u < d; ++u)g[m++] = t[u]; y = new s(v).encryptBlock(l(g, 0, m)); d = v.length; var w, k = new Uint8Array(d); for (u = 1; u <= 19; ++u) { for (w = 0; w < d; ++w)k[w] = v[w] ^ u; y = new s(k).encryptBlock(y) } for (u = 0, d = y.length; u < d; ++u)if (i[u] !== y[u]) return null } else for (u = 0, d = (y = new s(v).encryptBlock(e)).length; u < d; ++u)if (i[u] !== y[u]) return null; return v } var a = i.Name.get("Identity"); function n(n, o, c) { var h = n.get("Filter"); if (!(0, i.isName)(h, "Standard")) throw new r.FormatError("unknown encryption method"); this.dict = n; var u = n.get("V"); if (!Number.isInteger(u) || 1 !== u && 2 !== u && 4 !== u && 5 !== u) throw new r.FormatError("unsupported encryption algorithm"); this.algorithm = u; var d = n.get("Length"); if (!d) if (u <= 3) d = 40; else { var f = n.get("CF"), g = n.get("StmF"); if ((0, i.isDict)(f) && (0, i.isName)(g)) { f.suppressEncryption = !0; var m = f.get(g.name); (d = m && m.get("Length") || 128) < 40 && (d <<= 3) } } if (!Number.isInteger(d) || d < 40 || d % 8 != 0) throw new r.FormatError("invalid key length"); var p = (0, r.stringToBytes)(n.get("O")).subarray(0, 32), b = (0, r.stringToBytes)(n.get("U")).subarray(0, 32), w = n.get("P"), k = n.get("R"), S = (4 === u || 5 === u) && !1 !== n.get("EncryptMetadata"); this.encryptMetadata = S; var C, x, A = (0, r.stringToBytes)(o); if (c) { if (6 === k) try { c = (0, r.utf8StringToString)(c) } catch (e) { (0, r.warn)("CipherTransformFactory: Unable to convert UTF8 encoded password.") } C = (0, r.stringToBytes)(c) } if (5 !== u) x = t(A, C, p, b, w, k, d, S); else { var I = (0, r.stringToBytes)(n.get("O")).subarray(32, 40), F = (0, r.stringToBytes)(n.get("O")).subarray(40, 48), T = (0, r.stringToBytes)(n.get("U")).subarray(0, 48), E = (0, r.stringToBytes)(n.get("U")).subarray(32, 40), O = (0, r.stringToBytes)(n.get("U")).subarray(40, 48), P = (0, r.stringToBytes)(n.get("OE")), B = (0, r.stringToBytes)(n.get("UE")); (0, r.stringToBytes)(n.get("Perms")); x = function (e, t, a, r, i, n, s, o, c, l, h, u) { if (t) { var d = Math.min(127, t.length); t = t.subarray(0, d) } else t = []; var f; return (f = 6 === e ? new v : new y).checkUserPassword(t, o, s) ? f.getUserKey(t, c, h) : t.length && f.checkOwnerPassword(t, r, n, a) ? f.getOwnerKey(t, i, n, l) : null }(k, C, p, I, F, T, b, E, O, P, B) } if (!x && !c) throw new r.PasswordException("No password given", r.PasswordResponses.NEED_PASSWORD); if (!x && c) { x = t(A, function (t, a, r, i) { var n, o, c = new Uint8Array(32), h = 0; o = Math.min(32, t.length); for (; h < o; ++h)c[h] = t[h]; n = 0; for (; h < 32;)c[h++] = e[n++]; var u, d = l(c, 0, h), f = i >> 3; if (r >= 3) for (n = 0; n < 50; ++n)d = l(d, 0, d.length); if (r >= 3) { u = a; var g, m = new Uint8Array(f); for (n = 19; n >= 0; n--) { for (g = 0; g < f; ++g)m[g] = d[g] ^ n; u = new s(m).encryptBlock(u) } } else u = new s(d.subarray(0, f)).encryptBlock(a); return u }(C, p, k, d), p, b, w, k, d, S) } if (!x) throw new r.PasswordException("Incorrect Password", r.PasswordResponses.INCORRECT_PASSWORD); this.encryptionKey = x; if (u >= 4) { var D = n.get("CF"); (0, i.isDict)(D) && (D.suppressEncryption = !0); this.cf = D; this.stmf = n.get("StmF") || a; this.strf = n.get("StrF") || a; this.eff = n.get("EFF") || this.stmf } } function o(e, t, a, r) { var i, n, s = new Uint8Array(a.length + 9); for (i = 0, n = a.length; i < n; ++i)s[i] = a[i]; s[i++] = 255 & e; s[i++] = e >> 8 & 255; s[i++] = e >> 16 & 255; s[i++] = 255 & t; s[i++] = t >> 8 & 255; if (r) { s[i++] = 115; s[i++] = 65; s[i++] = 108; s[i++] = 84 } return l(s, 0, i).subarray(0, Math.min(a.length + 5, 16)) } function c(e, t, a, n, c) { if (!(0, i.isName)(t)) throw new r.FormatError("Invalid crypt filter name."); var l, h = e.get(t.name); null != h && (l = h.get("CFM")); if (!l || "None" === l.name) return function () { return new g }; if ("V2" === l.name) return function () { return new s(o(a, n, c, !1)) }; if ("AESV2" === l.name) return function () { return new p(o(a, n, c, !0)) }; if ("AESV3" === l.name) return function () { return new b(c) }; throw new r.FormatError("Unknown crypto method") } n.prototype = { createCipherTransform: function (e, t) { if (4 === this.algorithm || 5 === this.algorithm) return new w(c(this.cf, this.stmf, e, t, this.encryptionKey), c(this.cf, this.strf, e, t, this.encryptionKey)); var a = o(e, t, this.encryptionKey, !1), r = function () { return new s(a) }; return new w(r, r) } }; return n }(); t.CipherTransformFactory = k }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.ColorSpace = void 0; var r = a(2), i = a(4); class n { constructor(e, t) { this.constructor === n && (0, r.unreachable)("Cannot initialize ColorSpace."); this.name = e; this.numComps = t } getRgb(e, t) { const a = new Uint8ClampedArray(3); this.getRgbItem(e, t, a, 0); return a } getRgbItem(e, t, a, i) { (0, r.unreachable)("Should not call ColorSpace.getRgbItem") } getRgbBuffer(e, t, a, i, n, s, o) { (0, r.unreachable)("Should not call ColorSpace.getRgbBuffer") } getOutputLength(e, t) { (0, r.unreachable)("Should not call ColorSpace.getOutputLength") } isPassthrough(e) { return !1 } isDefaultDecode(e, t) { return n.isDefaultDecode(e, this.numComps) } fillRgb(e, t, a, r, i, n, s, o, c) { const l = t * a; let h = null; const u = 1 << s, d = a !== i || t !== r; if (this.isPassthrough(s)) h = o; else if (1 === this.numComps && l > u && "DeviceGray" !== this.name && "DeviceRGB" !== this.name) { const t = s <= 8 ? new Uint8Array(u) : new Uint16Array(u); for (let e = 0; e < u; e++)t[e] = e; const a = new Uint8ClampedArray(3 * u); this.getRgbBuffer(t, 0, u, a, 0, s, 0); if (d) { h = new Uint8Array(3 * l); let e = 0; for (let t = 0; t < l; ++t) { const r = 3 * o[t]; h[e++] = a[r]; h[e++] = a[r + 1]; h[e++] = a[r + 2] } } else { let t = 0; for (let r = 0; r < l; ++r) { const i = 3 * o[r]; e[t++] = a[i]; e[t++] = a[i + 1]; e[t++] = a[i + 2]; t += c } } } else if (d) { h = new Uint8ClampedArray(3 * l); this.getRgbBuffer(o, 0, l, h, 0, s, 0) } else this.getRgbBuffer(o, 0, r * n, e, 0, s, c); if (h) if (d) !function (e, t, a, r, i, n, s) { s = 1 !== s ? 0 : s; const o = a / i, c = r / n; let l, h = 0; const u = new Uint16Array(i), d = 3 * a; for (let e = 0; e < i; e++)u[e] = 3 * Math.floor(e * o); for (let a = 0; a < n; a++) { const r = Math.floor(a * c) * d; for (let a = 0; a < i; a++) { l = r + u[a]; t[h++] = e[l++]; t[h++] = e[l++]; t[h++] = e[l++]; h += s } } }(h, e, t, a, r, i, c); else { let t = 0, a = 0; for (let i = 0, s = r * n; i < s; i++) { e[t++] = h[a++]; e[t++] = h[a++]; e[t++] = h[a++]; t += c } } } get usesZeroToOneRange() { return (0, r.shadow)(this, "usesZeroToOneRange", !0) } static parse(e, t, a, r) { const i = this.parseToIR(e, t, a, r); return this.fromIR(i) } static fromIR(e) { const t = Array.isArray(e) ? e[0] : e; let a, i, n; switch (t) { case "DeviceGrayCS": return this.singletons.gray; case "DeviceRgbCS": return this.singletons.rgb; case "DeviceCmykCS": return this.singletons.cmyk; case "CalGrayCS": a = e[1]; i = e[2]; n = e[3]; return new d(a, i, n); case "CalRGBCS": a = e[1]; i = e[2]; n = e[3]; const l = e[4]; return new f(a, i, n, l); case "PatternCS": let h = e[1]; h && (h = this.fromIR(h)); return new o(h); case "IndexedCS": const u = e[1], m = e[2], p = e[3]; return new c(this.fromIR(u), m, p); case "AlternateCS": const b = e[1], y = e[2], v = e[3]; return new s(b, this.fromIR(y), v); case "LabCS": a = e[1]; i = e[2]; const w = e[3]; return new g(a, i, w); default: throw new r.FormatError(`Unknown colorspace name: ${t}`) } } static parseToIR(e, t, a = null, n) { e = t.fetchIfRef(e); if ((0, i.isName)(e)) switch (e.name) { case "DeviceGray": case "G": return "DeviceGrayCS"; case "DeviceRGB": case "RGB": return "DeviceRgbCS"; case "DeviceCMYK": case "CMYK": return "DeviceCmykCS"; case "Pattern": return ["PatternCS", null]; default: if ((0, i.isDict)(a)) { const r = a.get("ColorSpace"); if ((0, i.isDict)(r)) { const s = r.get(e.name); if (s) { if ((0, i.isName)(s)) return this.parseToIR(s, t, a, n); e = s; break } } } throw new r.FormatError(`unrecognized colorspace ${e.name}`) }if (Array.isArray(e)) { const s = t.fetchIfRef(e[0]).name; let o, c, l, h, u, d; switch (s) { case "DeviceGray": case "G": return "DeviceGrayCS"; case "DeviceRGB": case "RGB": return "DeviceRgbCS"; case "DeviceCMYK": case "CMYK": return "DeviceCmykCS"; case "CalGray": c = t.fetchIfRef(e[1]); h = c.getArray("WhitePoint"); u = c.getArray("BlackPoint"); d = c.get("Gamma"); return ["CalGrayCS", h, u, d]; case "CalRGB": c = t.fetchIfRef(e[1]); h = c.getArray("WhitePoint"); u = c.getArray("BlackPoint"); d = c.getArray("Gamma"); return ["CalRGBCS", h, u, d, c.getArray("Matrix")]; case "ICCBased": const f = t.fetchIfRef(e[1]).dict; o = f.get("N"); l = f.get("Alternate"); if (l) { const e = this.parseToIR(l, t, a, n); if (this.fromIR(e, n).numComps === o) return e; (0, r.warn)("ICCBased color space: Ignoring incorrect /Alternate entry.") } if (1 === o) return "DeviceGrayCS"; if (3 === o) return "DeviceRgbCS"; if (4 === o) return "DeviceCmykCS"; break; case "Pattern": let g = e[1] || null; g && (g = this.parseToIR(g, t, a, n)); return ["PatternCS", g]; case "Indexed": case "I": const m = this.parseToIR(e[1], t, a, n), p = t.fetchIfRef(e[2]) + 1; let b = t.fetchIfRef(e[3]); (0, i.isStream)(b) && (b = b.getBytes()); return ["IndexedCS", m, p, b]; case "Separation": case "DeviceN": const y = t.fetchIfRef(e[1]); o = Array.isArray(y) ? y.length : 1; l = this.parseToIR(e[2], t, a, n); return ["AlternateCS", o, l, n.create(t.fetchIfRef(e[3]))]; case "Lab": c = t.fetchIfRef(e[1]); h = c.getArray("WhitePoint"); u = c.getArray("BlackPoint"); return ["LabCS", h, u, c.getArray("Range")]; default: throw new r.FormatError(`unimplemented color space object "${s}"`) } } throw new r.FormatError(`unrecognized color space object: "${e}"`) } static isDefaultDecode(e, t) { if (!Array.isArray(e)) return !0; if (2 * t !== e.length) { (0, r.warn)("The decode map is not the correct length"); return !0 } for (let t = 0, a = e.length; t < a; t += 2)if (0 !== e[t] || 1 !== e[t + 1]) return !1; return !0 } static get singletons() { return (0, r.shadow)(this, "singletons", { get gray() { return (0, r.shadow)(this, "gray", new l) }, get rgb() { return (0, r.shadow)(this, "rgb", new h) }, get cmyk() { return (0, r.shadow)(this, "cmyk", new u) } }) } } t.ColorSpace = n; class s extends n { constructor(e, t, a) { super("Alternate", e); this.base = t; this.tintFn = a; this.tmpBuf = new Float32Array(t.numComps) } getRgbItem(e, t, a, r) { const i = this.tmpBuf; this.tintFn(e, t, i, 0); this.base.getRgbItem(i, 0, a, r) } getRgbBuffer(e, t, a, r, i, n, s) { const o = this.tintFn, c = this.base, l = 1 / ((1 << n) - 1), h = c.numComps, u = c.usesZeroToOneRange, d = (c.isPassthrough(8) || !u) && 0 === s; let f = d ? i : 0; const g = d ? r : new Uint8ClampedArray(h * a), m = this.numComps, p = new Float32Array(m), b = new Float32Array(h); let y, v; for (y = 0; y < a; y++) { for (v = 0; v < m; v++)p[v] = e[t++] * l; o(p, 0, b, 0); if (u) for (v = 0; v < h; v++)g[f++] = 255 * b[v]; else { c.getRgbItem(b, 0, g, f); f += h } } d || c.getRgbBuffer(g, 0, a, r, i, 8, s) } getOutputLength(e, t) { return this.base.getOutputLength(e * this.base.numComps / this.numComps, t) } } class o extends n { constructor(e) { super("Pattern", null); this.base = e } isDefaultDecode(e, t) { (0, r.unreachable)("Should not call PatternCS.isDefaultDecode") } } class c extends n { constructor(e, t, a) { super("Indexed", 1); this.base = e; this.highVal = t; const n = e.numComps * t; if ((0, i.isStream)(a)) { this.lookup = new Uint8Array(n); const e = a.getBytes(n); this.lookup.set(e) } else if ((0, r.isString)(a)) { this.lookup = new Uint8Array(n); for (let e = 0; e < n; ++e)this.lookup[e] = a.charCodeAt(e) } else { if (!(a instanceof Uint8Array)) throw new r.FormatError(`Unrecognized lookup table: ${a}`); this.lookup = a } } getRgbItem(e, t, a, r) { const i = this.base.numComps, n = e[t] * i; this.base.getRgbBuffer(this.lookup, n, 1, a, r, 8, 0) } getRgbBuffer(e, t, a, r, i, n, s) { const o = this.base, c = o.numComps, l = o.getOutputLength(c, s), h = this.lookup; for (let n = 0; n < a; ++n) { const a = e[t++] * c; o.getRgbBuffer(h, a, 1, r, i, 8, s); i += l } } getOutputLength(e, t) { return this.base.getOutputLength(e * this.base.numComps, t) } isDefaultDecode(e, t) { if (!Array.isArray(e)) return !0; if (2 !== e.length) { (0, r.warn)("Decode map length is not correct"); return !0 } if (!Number.isInteger(t) || t < 1) { (0, r.warn)("Bits per component is not correct"); return !0 } return 0 === e[0] && e[1] === (1 << t) - 1 } } class l extends n { constructor() { super("DeviceGray", 1) } getRgbItem(e, t, a, r) { const i = 255 * e[t]; a[r] = a[r + 1] = a[r + 2] = i } getRgbBuffer(e, t, a, r, i, n, s) { const o = 255 / ((1 << n) - 1); let c = t, l = i; for (let t = 0; t < a; ++t) { const t = o * e[c++]; r[l++] = t; r[l++] = t; r[l++] = t; l += s } } getOutputLength(e, t) { return e * (3 + t) } } class h extends n { constructor() { super("DeviceRGB", 3) } getRgbItem(e, t, a, r) { a[r] = 255 * e[t]; a[r + 1] = 255 * e[t + 1]; a[r + 2] = 255 * e[t + 2] } getRgbBuffer(e, t, a, r, i, n, s) { if (8 === n && 0 === s) { r.set(e.subarray(t, t + 3 * a), i); return } const o = 255 / ((1 << n) - 1); let c = t, l = i; for (let t = 0; t < a; ++t) { r[l++] = o * e[c++]; r[l++] = o * e[c++]; r[l++] = o * e[c++]; l += s } } getOutputLength(e, t) { return e * (3 + t) / 3 | 0 } isPassthrough(e) { return 8 === e } } const u = function () { function e(e, t, a, r, i) { const n = e[t] * a, s = e[t + 1] * a, o = e[t + 2] * a, c = e[t + 3] * a; r[i] = 255 + n * (-4.387332384609988 * n + 54.48615194189176 * s + 18.82290502165302 * o + 212.25662451639585 * c - 285.2331026137004) + s * (1.7149763477362134 * s - 5.6096736904047315 * o + -17.873870861415444 * c - 5.497006427196366) + o * (-2.5217340131683033 * o - 21.248923337353073 * c + 17.5119270841813) + c * (-21.86122147463605 * c - 189.48180835922747); r[i + 1] = 255 + n * (8.841041422036149 * n + 60.118027045597366 * s + 6.871425592049007 * o + 31.159100130055922 * c - 79.2970844816548) + s * (-15.310361306967817 * s + 17.575251261109482 * o + 131.35250912493976 * c - 190.9453302588951) + o * (4.444339102852739 * o + 9.8632861493405 * c - 24.86741582555878) + c * (-20.737325471181034 * c - 187.80453709719578); r[i + 2] = 255 + n * (.8842522430003296 * n + 8.078677503112928 * s + 30.89978309703729 * o - .23883238689178934 * c - 14.183576799673286) + s * (10.49593273432072 * s + 63.02378494754052 * o + 50.606957656360734 * c - 112.23884253719248) + o * (.03296041114873217 * o + 115.60384449646641 * c - 193.58209356861505) + c * (-22.33816807309886 * c - 180.12613974708367) } return class extends n { constructor() { super("DeviceCMYK", 4) } getRgbItem(t, a, r, i) { e(t, a, 1, r, i) } getRgbBuffer(t, a, r, i, n, s, o) { const c = 1 / ((1 << s) - 1); for (let s = 0; s < r; s++) { e(t, a, c, i, n); a += 4; n += 3 + o } } getOutputLength(e, t) { return e / 4 * (3 + t) | 0 } } }(), d = function () { function e(e, t, a, r, i, n) { const s = (t[a] * n) ** e.G, o = e.YW * s, c = Math.max(295.8 * o ** .3333333333333333 - 40.8, 0); r[i] = c; r[i + 1] = c; r[i + 2] = c } return class extends n { constructor(e, t, a) { super("CalGray", 1); if (!e) throw new r.FormatError("WhitePoint missing - required for color space CalGray"); t = t || [0, 0, 0]; a = a || 1; this.XW = e[0]; this.YW = e[1]; this.ZW = e[2]; this.XB = t[0]; this.YB = t[1]; this.ZB = t[2]; this.G = a; if (this.XW < 0 || this.ZW < 0 || 1 !== this.YW) throw new r.FormatError(`Invalid WhitePoint components for ${this.name}` + ", no fallback available"); if (this.XB < 0 || this.YB < 0 || this.ZB < 0) { (0, r.info)(`Invalid BlackPoint for ${this.name}, falling back to default.`); this.XB = this.YB = this.ZB = 0 } 0 === this.XB && 0 === this.YB && 0 === this.ZB || (0, r.warn)(`${this.name}, BlackPoint: XB: ${this.XB}, YB: ${this.YB}, ` + `ZB: ${this.ZB}, only default values are supported.`); if (this.G < 1) { (0, r.info)(`Invalid Gamma: ${this.G} for ${this.name}, ` + "falling back to default."); this.G = 1 } } getRgbItem(t, a, r, i) { e(this, t, a, r, i, 1) } getRgbBuffer(t, a, r, i, n, s, o) { const c = 1 / ((1 << s) - 1); for (let s = 0; s < r; ++s) { e(this, t, a, i, n, c); a += 1; n += 3 + o } } getOutputLength(e, t) { return e * (3 + t) } } }(), f = function () { const e = new Float32Array([.8951, .2664, -.1614, -.7502, 1.7135, .0367, .0389, -.0685, 1.0296]), t = new Float32Array([.9869929, -.1470543, .1599627, .4323053, .5183603, .0492912, -.0085287, .0400428, .9684867]), a = new Float32Array([3.2404542, -1.5371385, -.4985314, -.969266, 1.8760108, .041556, .0556434, -.2040259, 1.0572252]), i = new Float32Array([1, 1, 1]), s = new Float32Array(3), o = new Float32Array(3), c = new Float32Array(3); function l(e, t, a) { a[0] = e[0] * t[0] + e[1] * t[1] + e[2] * t[2]; a[1] = e[3] * t[0] + e[4] * t[1] + e[5] * t[2]; a[2] = e[6] * t[0] + e[7] * t[1] + e[8] * t[2] } function h(e) { return u(0, 1, e <= .0031308 ? 12.92 * e : 1.055 * e ** (1 / 2.4) - .055) } function u(e, t, a) { return Math.max(e, Math.min(t, a)) } function d(e) { return e < 0 ? -d(-e) : e > 8 ? ((e + 16) / 116) ** 3 : e * ((24 / 116) ** 3 / 8) } function f(r, n, f, g, m, p) { const b = u(0, 1, n[f] * p), y = u(0, 1, n[f + 1] * p), v = u(0, 1, n[f + 2] * p), w = b ** r.GR, k = y ** r.GG, S = v ** r.GB, C = r.MXA * w + r.MXB * k + r.MXC * S, x = r.MYA * w + r.MYB * k + r.MYC * S, A = r.MZA * w + r.MZB * k + r.MZC * S, I = o; I[0] = C; I[1] = x; I[2] = A; const F = c; !function (a, r, i) { if (1 === a[0] && 1 === a[2]) { i[0] = r[0]; i[1] = r[1]; i[2] = r[2]; return } const n = i; l(e, r, n); const o = s; !function (e, t, a) { a[0] = 1 * t[0] / e[0]; a[1] = 1 * t[1] / e[1]; a[2] = 1 * t[2] / e[2] }(a, n, o); l(t, o, i) }(r.whitePoint, I, F); const T = o; !function (e, t, a) { if (0 === e[0] && 0 === e[1] && 0 === e[2]) { a[0] = t[0]; a[1] = t[1]; a[2] = t[2]; return } const r = d(0), i = (1 - r) / (1 - d(e[0])), n = 1 - i, s = (1 - r) / (1 - d(e[1])), o = 1 - s, c = (1 - r) / (1 - d(e[2])), l = 1 - c; a[0] = t[0] * i + n; a[1] = t[1] * s + o; a[2] = t[2] * c + l }(r.blackPoint, F, T); const E = c; !function (a, r, i) { const n = i; l(e, r, n); const o = s; !function (e, t, a) { a[0] = .95047 * t[0] / e[0]; a[1] = 1 * t[1] / e[1]; a[2] = 1.08883 * t[2] / e[2] }(a, n, o); l(t, o, i) }(i, T, E); const O = o; l(a, E, O); g[m] = 255 * h(O[0]); g[m + 1] = 255 * h(O[1]); g[m + 2] = 255 * h(O[2]) } return class extends n { constructor(e, t, a, i) { super("CalRGB", 3); if (!e) throw new r.FormatError("WhitePoint missing - required for color space CalRGB"); t = t || new Float32Array(3); a = a || new Float32Array([1, 1, 1]); i = i || new Float32Array([1, 0, 0, 0, 1, 0, 0, 0, 1]); const n = e[0], s = e[1], o = e[2]; this.whitePoint = e; const c = t[0], l = t[1], h = t[2]; this.blackPoint = t; this.GR = a[0]; this.GG = a[1]; this.GB = a[2]; this.MXA = i[0]; this.MYA = i[1]; this.MZA = i[2]; this.MXB = i[3]; this.MYB = i[4]; this.MZB = i[5]; this.MXC = i[6]; this.MYC = i[7]; this.MZC = i[8]; if (n < 0 || o < 0 || 1 !== s) throw new r.FormatError(`Invalid WhitePoint components for ${this.name}` + ", no fallback available"); if (c < 0 || l < 0 || h < 0) { (0, r.info)(`Invalid BlackPoint for ${this.name} [${c}, ${l}, ${h}], ` + "falling back to default."); this.blackPoint = new Float32Array(3) } if (this.GR < 0 || this.GG < 0 || this.GB < 0) { (0, r.info)(`Invalid Gamma [${this.GR}, ${this.GG}, ${this.GB}] for ` + `${this.name}, falling back to default.`); this.GR = this.GG = this.GB = 1 } } getRgbItem(e, t, a, r) { f(this, e, t, a, r, 1) } getRgbBuffer(e, t, a, r, i, n, s) { const o = 1 / ((1 << n) - 1); for (let n = 0; n < a; ++n) { f(this, e, t, r, i, o); t += 3; i += 3 + s } } getOutputLength(e, t) { return e * (3 + t) / 3 | 0 } } }(), g = function () { function e(e) { let t; t = e >= 6 / 29 ? e * e * e : 108 / 841 * (e - 4 / 29); return t } function t(e, t, a, r) { return a + e * (r - a) / t } function a(a, r, i, n, s, o) { let c = r[i], l = r[i + 1], h = r[i + 2]; if (!1 !== n) { c = t(c, n, 0, 100); l = t(l, n, a.amin, a.amax); h = t(h, n, a.bmin, a.bmax) } l > a.amax ? l = a.amax : l < a.amin && (l = a.amin); h > a.bmax ? h = a.bmax : h < a.bmin && (h = a.bmin); const u = (c + 16) / 116, d = u + l / 500, f = u - h / 200, g = a.XW * e(d), m = a.YW * e(u), p = a.ZW * e(f); let b, y, v; if (a.ZW < 1) { b = 3.1339 * g + -1.617 * m + -.4906 * p; y = -.9785 * g + 1.916 * m + .0333 * p; v = .072 * g + -.229 * m + 1.4057 * p } else { b = 3.2406 * g + -1.5372 * m + -.4986 * p; y = -.9689 * g + 1.8758 * m + .0415 * p; v = .0557 * g + -.204 * m + 1.057 * p } s[o] = 255 * Math.sqrt(b); s[o + 1] = 255 * Math.sqrt(y); s[o + 2] = 255 * Math.sqrt(v) } return class extends n { constructor(e, t, a) { super("Lab", 3); if (!e) throw new r.FormatError("WhitePoint missing - required for color space Lab"); t = t || [0, 0, 0]; a = a || [-100, 100, -100, 100]; this.XW = e[0]; this.YW = e[1]; this.ZW = e[2]; this.amin = a[0]; this.amax = a[1]; this.bmin = a[2]; this.bmax = a[3]; this.XB = t[0]; this.YB = t[1]; this.ZB = t[2]; if (this.XW < 0 || this.ZW < 0 || 1 !== this.YW) throw new r.FormatError("Invalid WhitePoint components, no fallback available"); if (this.XB < 0 || this.YB < 0 || this.ZB < 0) { (0, r.info)("Invalid BlackPoint, falling back to default"); this.XB = this.YB = this.ZB = 0 } if (this.amin > this.amax || this.bmin > this.bmax) { (0, r.info)("Invalid Range, falling back to defaults"); this.amin = -100; this.amax = 100; this.bmin = -100; this.bmax = 100 } } getRgbItem(e, t, r, i) { a(this, e, t, !1, r, i) } getRgbBuffer(e, t, r, i, n, s, o) { const c = (1 << s) - 1; for (let s = 0; s < r; s++) { a(this, e, t, c, i, n); t += 3; n += 3 + o } } getOutputLength(e, t) { return e * (3 + t) / 3 | 0 } isDefaultDecode(e, t) { return !0 } get usesZeroToOneRange() { return (0, r.shadow)(this, "usesZeroToOneRange", !1) } } }() }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.getQuadPoints = h; t.MarkupAnnotation = t.AnnotationFactory = t.AnnotationBorderStyle = t.Annotation = void 0; var r = a(2), i = a(9), n = a(4), s = a(22), o = a(7), c = a(24), l = a(11); t.AnnotationFactory = class { static create(e, t, a, r) { return a.ensure(this, "_create", [e, t, a, r]) } static _create(e, t, a, i) { const s = e.fetchIfRef(t); if (!(0, n.isDict)(s)) return; const c = (0, n.isRef)(t) ? t.toString() : `annot_${i.createObjId()}`; let l = s.get("Subtype"); l = (0, n.isName)(l) ? l.name : null; const h = { xref: e, dict: s, subtype: l, id: c, pdfManager: a }; switch (l) { case "Link": return new v(h); case "Text": return new y(h); case "Widget": let e = (0, o.getInheritableProperty)({ dict: s, key: "FT" }); e = (0, n.isName)(e) ? e.name : null; switch (e) { case "Tx": return new m(h); case "Btn": return new p(h); case "Ch": return new b(h) }(0, r.warn)('Unimplemented widget field type "' + e + '", falling back to base field type.'); return new g(h); case "Popup": return new w(h); case "FreeText": return new k(h); case "Line": return new S(h); case "Square": return new C(h); case "Circle": return new x(h); case "PolyLine": return new A(h); case "Polygon": return new I(h); case "Caret": return new F(h); case "Ink": return new T(h); case "Highlight": return new E(h); case "Underline": return new O(h); case "Squiggly": return new P(h); case "StrikeOut": return new B(h); case "Stamp": return new D(h); case "FileAttachment": return new N(h); default: l ? (0, r.warn)('Unimplemented annotation type "' + l + '", falling back to base annotation.') : (0, r.warn)("Annotation is missing the required /Subtype."); return new u(h) } } }; function h(e, t) { if (!e.has("QuadPoints")) return null; const a = e.getArray("QuadPoints"); if (!Array.isArray(a) || a.length % 8 > 0) return null; const r = []; for (let e = 0, i = a.length / 8; e < i; e++) { r.push([]); for (let i = 8 * e, n = 8 * e + 8; i < n; i += 2) { const n = a[i], s = a[i + 1]; if (n < t[0] || n > t[2] || s < t[1] || s > t[3]) return null; r[e].push({ x: n, y: s }) } } return r } class u { constructor(e) { const t = e.dict; this.setContents(t.get("Contents")); this.setModificationDate(t.get("M")); this.setFlags(t.get("F")); this.setRectangle(t.getArray("Rect")); this.setColor(t.getArray("C")); this.setBorderStyle(t); this.setAppearance(t); this.data = { annotationFlags: this.flags, borderStyle: this.borderStyle, color: this.color, contents: this.contents, hasAppearance: !!this.appearance, id: e.id, modificationDate: this.modificationDate, rect: this.rectangle, subtype: e.subtype } } _hasFlag(e, t) { return !!(e & t) } _isViewable(e) { return !this._hasFlag(e, r.AnnotationFlag.INVISIBLE) && !this._hasFlag(e, r.AnnotationFlag.HIDDEN) && !this._hasFlag(e, r.AnnotationFlag.NOVIEW) } _isPrintable(e) { return this._hasFlag(e, r.AnnotationFlag.PRINT) && !this._hasFlag(e, r.AnnotationFlag.INVISIBLE) && !this._hasFlag(e, r.AnnotationFlag.HIDDEN) } get viewable() { return 0 === this.flags || this._isViewable(this.flags) } get printable() { return 0 !== this.flags && this._isPrintable(this.flags) } setContents(e) { this.contents = (0, r.stringToPDFString)(e || "") } setModificationDate(e) { this.modificationDate = (0, r.isString)(e) ? e : null } setFlags(e) { this.flags = Number.isInteger(e) && e > 0 ? e : 0 } hasFlag(e) { return this._hasFlag(this.flags, e) } setRectangle(e) { Array.isArray(e) && 4 === e.length ? this.rectangle = r.Util.normalizeRect(e) : this.rectangle = [0, 0, 0, 0] } setColor(e) { const t = new Uint8ClampedArray(3); if (Array.isArray(e)) switch (e.length) { case 0: this.color = null; break; case 1: s.ColorSpace.singletons.gray.getRgbItem(e, 0, t, 0); this.color = t; break; case 3: s.ColorSpace.singletons.rgb.getRgbItem(e, 0, t, 0); this.color = t; break; case 4: s.ColorSpace.singletons.cmyk.getRgbItem(e, 0, t, 0); this.color = t; break; default: this.color = t } else this.color = t } setBorderStyle(e) { this.borderStyle = new d; if ((0, n.isDict)(e)) if (e.has("BS")) { const t = e.get("BS"), a = t.get("Type"); if (!a || (0, n.isName)(a, "Border")) { this.borderStyle.setWidth(t.get("W"), this.rectangle); this.borderStyle.setStyle(t.get("S")); this.borderStyle.setDashArray(t.getArray("D")) } } else if (e.has("Border")) { const t = e.getArray("Border"); if (Array.isArray(t) && t.length >= 3) { this.borderStyle.setHorizontalCornerRadius(t[0]); this.borderStyle.setVerticalCornerRadius(t[1]); this.borderStyle.setWidth(t[2], this.rectangle); 4 === t.length && this.borderStyle.setDashArray(t[3]) } } else this.borderStyle.setWidth(0) } setAppearance(e) { this.appearance = null; const t = e.get("AP"); if (!(0, n.isDict)(t)) return; const a = t.get("N"); if ((0, n.isStream)(a)) { this.appearance = a; return } if (!(0, n.isDict)(a)) return; const r = e.get("AS"); (0, n.isName)(r) && a.has(r.name) && (this.appearance = a.get(r.name)) } loadResources(e) { return this.appearance.dict.getAsync("Resources").then(t => { if (!t) return; return new i.ObjectLoader(t, e, t.xref).load().then((function () { return t })) }) } getOperatorList(e, t, a) { if (!this.appearance) return Promise.resolve(new c.OperatorList); const i = this.data, n = this.appearance.dict, s = this.loadResources(["ExtGState", "ColorSpace", "Pattern", "Shading", "XObject", "Font"]), o = n.getArray("BBox") || [0, 0, 1, 1], l = n.getArray("Matrix") || [1, 0, 0, 1, 0, 0], h = function (e, t, a) { const [i, n, s, o] = r.Util.getAxialAlignedBoundingBox(t, a); if (i === s || n === o) return [1, 0, 0, 1, e[0], e[1]]; const c = (e[2] - e[0]) / (s - i), l = (e[3] - e[1]) / (o - n); return [c, 0, 0, l, e[0] - i * c, e[1] - n * l] }(i.rect, o, l); return s.then(a => { const n = new c.OperatorList; n.addOp(r.OPS.beginAnnotation, [i.rect, h, l]); return e.getOperatorList({ stream: this.appearance, task: t, resources: a, operatorList: n }).then(() => { n.addOp(r.OPS.endAnnotation, []); this.appearance.reset(); return n }) }) } } t.Annotation = u; class d { constructor() { this.width = 1; this.style = r.AnnotationBorderStyleType.SOLID; this.dashArray = [3]; this.horizontalCornerRadius = 0; this.verticalCornerRadius = 0 } setWidth(e, t = [0, 0, 0, 0]) { if ((0, n.isName)(e)) this.width = 0; else if (Number.isInteger(e)) { if (e > 0) { const a = (t[2] - t[0]) / 2, i = (t[3] - t[1]) / 2; if (a > 0 && i > 0 && (e > a || e > i)) { (0, r.warn)(`AnnotationBorderStyle.setWidth - ignoring width: ${e}`); e = 1 } } this.width = e } } setStyle(e) { if ((0, n.isName)(e)) switch (e.name) { case "S": this.style = r.AnnotationBorderStyleType.SOLID; break; case "D": this.style = r.AnnotationBorderStyleType.DASHED; break; case "B": this.style = r.AnnotationBorderStyleType.BEVELED; break; case "I": this.style = r.AnnotationBorderStyleType.INSET; break; case "U": this.style = r.AnnotationBorderStyleType.UNDERLINE } } setDashArray(e) { if (Array.isArray(e) && e.length > 0) { let t = !0, a = !0; for (const r of e) { if (!(+r >= 0)) { t = !1; break } r > 0 && (a = !1) } t && !a ? this.dashArray = e : this.width = 0 } else e && (this.width = 0) } setHorizontalCornerRadius(e) { Number.isInteger(e) && (this.horizontalCornerRadius = e) } setVerticalCornerRadius(e) { Number.isInteger(e) && (this.verticalCornerRadius = e) } } t.AnnotationBorderStyle = d; class f extends u { constructor(e) { super(e); const t = e.dict; if (t.has("IRT")) { const e = t.getRaw("IRT"); this.data.inReplyTo = (0, n.isRef)(e) ? e.toString() : null; const a = t.get("RT"); this.data.replyType = (0, n.isName)(a) ? a.name : r.AnnotationReplyType.REPLY } if (this.data.replyType === r.AnnotationReplyType.GROUP) { const e = t.get("IRT"); this.data.title = (0, r.stringToPDFString)(e.get("T") || ""); this.setContents(e.get("Contents")); this.data.contents = this.contents; if (e.has("CreationDate")) { this.setCreationDate(e.get("CreationDate")); this.data.creationDate = this.creationDate } else this.data.creationDate = null; if (e.has("M")) { this.setModificationDate(e.get("M")); this.data.modificationDate = this.modificationDate } else this.data.modificationDate = null; this.data.hasPopup = e.has("Popup"); if (e.has("C")) { this.setColor(e.getArray("C")); this.data.color = this.color } else this.data.color = null } else { this.data.title = (0, r.stringToPDFString)(t.get("T") || ""); this.setCreationDate(t.get("CreationDate")); this.data.creationDate = this.creationDate; this.data.hasPopup = t.has("Popup"); t.has("C") || (this.data.color = null) } } setCreationDate(e) { this.creationDate = (0, r.isString)(e) ? e : null } } t.MarkupAnnotation = f; class g extends u { constructor(e) { super(e); const t = e.dict, a = this.data; a.annotationType = r.AnnotationType.WIDGET; a.fieldName = this._constructFieldName(t); a.fieldValue = (0, o.getInheritableProperty)({ dict: t, key: "V", getArray: !0 }); a.alternativeText = (0, r.stringToPDFString)(t.get("TU") || ""); a.defaultAppearance = (0, o.getInheritableProperty)({ dict: t, key: "DA" }) || ""; const i = (0, o.getInheritableProperty)({ dict: t, key: "FT" }); a.fieldType = (0, n.isName)(i) ? i.name : null; this.fieldResources = (0, o.getInheritableProperty)({ dict: t, key: "DR" }) || n.Dict.empty; a.fieldFlags = (0, o.getInheritableProperty)({ dict: t, key: "Ff" }); (!Number.isInteger(a.fieldFlags) || a.fieldFlags < 0) && (a.fieldFlags = 0); a.readOnly = this.hasFieldFlag(r.AnnotationFieldFlag.READONLY); if ("Sig" === a.fieldType) { a.fieldValue = null; this.setFlags(r.AnnotationFlag.HIDDEN) } } _constructFieldName(e) { if (!e.has("T") && !e.has("Parent")) { (0, r.warn)("Unknown field name, falling back to empty field name."); return "" } if (!e.has("Parent")) return (0, r.stringToPDFString)(e.get("T")); const t = []; e.has("T") && t.unshift((0, r.stringToPDFString)(e.get("T"))); let a = e; for (; a.has("Parent");) { a = a.get("Parent"); if (!(0, n.isDict)(a)) break; a.has("T") && t.unshift((0, r.stringToPDFString)(a.get("T"))) } return t.join(".") } hasFieldFlag(e) { return !!(this.data.fieldFlags & e) } getOperatorList(e, t, a) { return a ? Promise.resolve(new c.OperatorList) : super.getOperatorList(e, t, a) } } class m extends g { constructor(e) { super(e); const t = e.dict; this.data.fieldValue = (0, r.stringToPDFString)(this.data.fieldValue || ""); let a = (0, o.getInheritableProperty)({ dict: t, key: "Q" }); (!Number.isInteger(a) || a < 0 || a > 2) && (a = null); this.data.textAlignment = a; let i = (0, o.getInheritableProperty)({ dict: t, key: "MaxLen" }); (!Number.isInteger(i) || i < 0) && (i = null); this.data.maxLen = i; this.data.multiLine = this.hasFieldFlag(r.AnnotationFieldFlag.MULTILINE); this.data.comb = this.hasFieldFlag(r.AnnotationFieldFlag.COMB) && !this.hasFieldFlag(r.AnnotationFieldFlag.MULTILINE) && !this.hasFieldFlag(r.AnnotationFieldFlag.PASSWORD) && !this.hasFieldFlag(r.AnnotationFieldFlag.FILESELECT) && null !== this.data.maxLen } getOperatorList(e, t, a) { if (a || this.appearance) return super.getOperatorList(e, t, a); const i = new c.OperatorList; if (!this.data.defaultAppearance) return Promise.resolve(i); const n = new l.Stream((0, r.stringToBytes)(this.data.defaultAppearance)); return e.getOperatorList({ stream: n, task: t, resources: this.fieldResources, operatorList: i }).then((function () { return i })) } } class p extends g { constructor(e) { super(e); this.data.checkBox = !this.hasFieldFlag(r.AnnotationFieldFlag.RADIO) && !this.hasFieldFlag(r.AnnotationFieldFlag.PUSHBUTTON); this.data.radioButton = this.hasFieldFlag(r.AnnotationFieldFlag.RADIO) && !this.hasFieldFlag(r.AnnotationFieldFlag.PUSHBUTTON); this.data.pushButton = this.hasFieldFlag(r.AnnotationFieldFlag.PUSHBUTTON); this.data.checkBox ? this._processCheckBox(e) : this.data.radioButton ? this._processRadioButton(e) : this.data.pushButton ? this._processPushButton(e) : (0, r.warn)("Invalid field flags for button widget annotation") } _processCheckBox(e) { (0, n.isName)(this.data.fieldValue) && (this.data.fieldValue = this.data.fieldValue.name); const t = e.dict.get("AP"); if (!(0, n.isDict)(t)) return; const a = t.get("D"); if (!(0, n.isDict)(a)) return; const r = a.getKeys(); 2 === r.length && (this.data.exportValue = "Off" === r[0] ? r[1] : r[0]) } _processRadioButton(e) { this.data.fieldValue = this.data.buttonValue = null; const t = e.dict.get("Parent"); if ((0, n.isDict)(t) && t.has("V")) { const e = t.get("V"); (0, n.isName)(e) && (this.data.fieldValue = e.name) } const a = e.dict.get("AP"); if (!(0, n.isDict)(a)) return; const r = a.get("N"); if ((0, n.isDict)(r)) for (const e of r.getKeys()) if ("Off" !== e) { this.data.buttonValue = e; break } } _processPushButton(e) { e.dict.has("A") ? i.Catalog.parseDestDictionary({ destDict: e.dict, resultObj: this.data, docBaseUrl: e.pdfManager.docBaseUrl }) : (0, r.warn)("Push buttons without action dictionaries are not supported") } } class b extends g { constructor(e) { super(e); this.data.options = []; const t = (0, o.getInheritableProperty)({ dict: e.dict, key: "Opt" }); if (Array.isArray(t)) { const a = e.xref; for (let e = 0, i = t.length; e < i; e++) { const i = a.fetchIfRef(t[e]), n = Array.isArray(i); this.data.options[e] = { exportValue: n ? a.fetchIfRef(i[0]) : i, displayValue: (0, r.stringToPDFString)(n ? a.fetchIfRef(i[1]) : i) } } } Array.isArray(this.data.fieldValue) || (this.data.fieldValue = [this.data.fieldValue]); this.data.combo = this.hasFieldFlag(r.AnnotationFieldFlag.COMBO); this.data.multiSelect = this.hasFieldFlag(r.AnnotationFieldFlag.MULTISELECT) } } class y extends f { constructor(e) { super(e); const t = e.dict; this.data.annotationType = r.AnnotationType.TEXT; if (this.data.hasAppearance) this.data.name = "NoIcon"; else { this.data.rect[1] = this.data.rect[3] - 22; this.data.rect[2] = this.data.rect[0] + 22; this.data.name = t.has("Name") ? t.get("Name").name : "Note" } if (t.has("State")) { this.data.state = t.get("State") || null; this.data.stateModel = t.get("StateModel") || null } else { this.data.state = null; this.data.stateModel = null } } } class v extends u { constructor(e) { super(e); this.data.annotationType = r.AnnotationType.LINK; const t = h(e.dict, this.rectangle); t && (this.data.quadPoints = t); i.Catalog.parseDestDictionary({ destDict: e.dict, resultObj: this.data, docBaseUrl: e.pdfManager.docBaseUrl }) } } class w extends u { constructor(e) { super(e); this.data.annotationType = r.AnnotationType.POPUP; let t = e.dict.get("Parent"); if (!t) { (0, r.warn)("Popup annotation has a missing or invalid parent annotation."); return } const a = t.get("Subtype"); this.data.parentType = (0, n.isName)(a) ? a.name : null; const i = e.dict.getRaw("Parent"); this.data.parentId = (0, n.isRef)(i) ? i.toString() : null; const s = t.get("RT"); (0, n.isName)(s, r.AnnotationReplyType.GROUP) && (t = t.get("IRT")); if (t.has("M")) { this.setModificationDate(t.get("M")); this.data.modificationDate = this.modificationDate } else this.data.modificationDate = null; if (t.has("C")) { this.setColor(t.getArray("C")); this.data.color = this.color } else this.data.color = null; if (!this.viewable) { const e = t.get("F"); this._isViewable(e) && this.setFlags(e) } this.data.title = (0, r.stringToPDFString)(t.get("T") || ""); this.data.contents = (0, r.stringToPDFString)(t.get("Contents") || "") } } class k extends f { constructor(e) { super(e); this.data.annotationType = r.AnnotationType.FREETEXT } } class S extends f { constructor(e) { super(e); this.data.annotationType = r.AnnotationType.LINE; this.data.lineCoordinates = r.Util.normalizeRect(e.dict.getArray("L")) } } class C extends f { constructor(e) { super(e); this.data.annotationType = r.AnnotationType.SQUARE } } class x extends f { constructor(e) { super(e); this.data.annotationType = r.AnnotationType.CIRCLE } } class A extends f { constructor(e) { super(e); this.data.annotationType = r.AnnotationType.POLYLINE; const t = e.dict.getArray("Vertices"); this.data.vertices = []; for (let e = 0, a = t.length; e < a; e += 2)this.data.vertices.push({ x: t[e], y: t[e + 1] }) } } class I extends A { constructor(e) { super(e); this.data.annotationType = r.AnnotationType.POLYGON } } class F extends f { constructor(e) { super(e); this.data.annotationType = r.AnnotationType.CARET } } class T extends f { constructor(e) { super(e); this.data.annotationType = r.AnnotationType.INK; const t = e.xref, a = e.dict.getArray("InkList"); this.data.inkLists = []; for (let e = 0, r = a.length; e < r; ++e) { this.data.inkLists.push([]); for (let r = 0, i = a[e].length; r < i; r += 2)this.data.inkLists[e].push({ x: t.fetchIfRef(a[e][r]), y: t.fetchIfRef(a[e][r + 1]) }) } } } class E extends f { constructor(e) { super(e); this.data.annotationType = r.AnnotationType.HIGHLIGHT; const t = h(e.dict, this.rectangle); t && (this.data.quadPoints = t) } } class O extends f { constructor(e) { super(e); this.data.annotationType = r.AnnotationType.UNDERLINE; const t = h(e.dict, this.rectangle); t && (this.data.quadPoints = t) } } class P extends f { constructor(e) { super(e); this.data.annotationType = r.AnnotationType.SQUIGGLY; const t = h(e.dict, this.rectangle); t && (this.data.quadPoints = t) } } class B extends f { constructor(e) { super(e); this.data.annotationType = r.AnnotationType.STRIKEOUT; const t = h(e.dict, this.rectangle); t && (this.data.quadPoints = t) } } class D extends f { constructor(e) { super(e); this.data.annotationType = r.AnnotationType.STAMP } } class N extends f { constructor(e) { super(e); const t = new i.FileSpec(e.dict.get("FS"), e.xref); this.data.annotationType = r.AnnotationType.FILEATTACHMENT; this.data.file = t.serializable } } }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.OperatorList = void 0; var r = a(2), i = function () { function e(e, t, a, r, i) { for (var n = e, s = 0, o = t.length - 1; s < o; s++) { var c = t[s]; n = n[c] || (n[c] = []) } n[t[t.length - 1]] = { checkFn: a, iterateFn: r, processFn: i } } var t = []; e(t, [r.OPS.save, r.OPS.transform, r.OPS.paintInlineImageXObject, r.OPS.restore], null, (function (e, t) { var a = e.fnArray, i = (t - (e.iCurr - 3)) % 4; switch (i) { case 0: return a[t] === r.OPS.save; case 1: return a[t] === r.OPS.transform; case 2: return a[t] === r.OPS.paintInlineImageXObject; case 3: return a[t] === r.OPS.restore }throw new Error(`iterateInlineImageGroup - invalid pos: ${i}`) }), (function (e, t) { var a = e.fnArray, i = e.argsArray, n = e.iCurr, s = n - 3, o = n - 2, c = n - 1, l = Math.min(Math.floor((t - s) / 4), 200); if (l < 10) return t - (t - s) % 4; var h, u = 0, d = [], f = 0, g = 1, m = 1; for (h = 0; h < l; h++) { var p = i[o + (h << 2)], b = i[c + (h << 2)][0]; if (g + b.width > 1e3) { u = Math.max(u, g); m += f + 2; g = 0; f = 0 } d.push({ transform: p, x: g, y: m, w: b.width, h: b.height }); g += b.width + 2; f = Math.max(f, b.height) } var y = Math.max(u, g) + 1, v = m + f + 1, w = new Uint8ClampedArray(y * v * 4), k = y << 2; for (h = 0; h < l; h++) { var S = i[c + (h << 2)][0].data, C = d[h].w << 2, x = 0, A = d[h].x + d[h].y * y << 2; w.set(S.subarray(0, C), A - k); for (var I = 0, F = d[h].h; I < F; I++) { w.set(S.subarray(x, x + C), A); x += C; A += k } w.set(S.subarray(x - C, x), A); for (; A >= 0;) { S[A - 4] = S[A]; S[A - 3] = S[A + 1]; S[A - 2] = S[A + 2]; S[A - 1] = S[A + 3]; S[A + C] = S[A + C - 4]; S[A + C + 1] = S[A + C - 3]; S[A + C + 2] = S[A + C - 2]; S[A + C + 3] = S[A + C - 1]; A -= k } } a.splice(s, 4 * l, r.OPS.paintInlineImageXObjectGroup); i.splice(s, 4 * l, [{ width: y, height: v, kind: r.ImageKind.RGBA_32BPP, data: w }, d]); return s + 1 })); e(t, [r.OPS.save, r.OPS.transform, r.OPS.paintImageMaskXObject, r.OPS.restore], null, (function (e, t) { var a = e.fnArray, i = (t - (e.iCurr - 3)) % 4; switch (i) { case 0: return a[t] === r.OPS.save; case 1: return a[t] === r.OPS.transform; case 2: return a[t] === r.OPS.paintImageMaskXObject; case 3: return a[t] === r.OPS.restore }throw new Error(`iterateImageMaskGroup - invalid pos: ${i}`) }), (function (e, t) { var a, i = e.fnArray, n = e.argsArray, s = e.iCurr, o = s - 3, c = s - 2, l = s - 1, h = Math.floor((t - o) / 4); if ((h = function (e, t, a, i) { for (var n = e + 2, s = 0; s < t; s++) { var o = i[n + 4 * s], c = 1 === o.length && o[0]; if (!c || 1 !== c.width || 1 !== c.height || c.data.length && (1 !== c.data.length || 0 !== c.data[0])) break; a[n + 4 * s] = r.OPS.paintSolidColorImageMask } return t - s }(o, h, i, n)) < 10) return t - (t - o) % 4; var u, d, f = !1, g = n[l][0]; if (0 === n[c][1] && 0 === n[c][2]) { f = !0; var m = n[c][0], p = n[c][3]; u = c + 4; var b = l + 4; for (a = 1; a < h; a++, u += 4, b += 4) { d = n[u]; if (n[b][0] !== g || d[0] !== m || 0 !== d[1] || 0 !== d[2] || d[3] !== p) { a < 10 ? f = !1 : h = a; break } } } if (f) { h = Math.min(h, 1e3); var y = new Float32Array(2 * h); u = c; for (a = 0; a < h; a++, u += 4) { d = n[u]; y[a << 1] = d[4]; y[1 + (a << 1)] = d[5] } i.splice(o, 4 * h, r.OPS.paintImageMaskXObjectRepeat); n.splice(o, 4 * h, [g, m, p, y]) } else { h = Math.min(h, 100); var v = []; for (a = 0; a < h; a++) { d = n[c + (a << 2)]; var w = n[l + (a << 2)][0]; v.push({ data: w.data, width: w.width, height: w.height, transform: d }) } i.splice(o, 4 * h, r.OPS.paintImageMaskXObjectGroup); n.splice(o, 4 * h, [v]) } return o + 1 })); e(t, [r.OPS.save, r.OPS.transform, r.OPS.paintImageXObject, r.OPS.restore], (function (e) { var t = e.argsArray, a = e.iCurr - 2; return 0 === t[a][1] && 0 === t[a][2] }), (function (e, t) { var a = e.fnArray, i = e.argsArray, n = (t - (e.iCurr - 3)) % 4; switch (n) { case 0: return a[t] === r.OPS.save; case 1: if (a[t] !== r.OPS.transform) return !1; var s = e.iCurr - 2, o = i[s][0], c = i[s][3]; return i[t][0] === o && 0 === i[t][1] && 0 === i[t][2] && i[t][3] === c; case 2: if (a[t] !== r.OPS.paintImageXObject) return !1; var l = i[e.iCurr - 1][0]; return i[t][0] === l; case 3: return a[t] === r.OPS.restore }throw new Error(`iterateImageGroup - invalid pos: ${n}`) }), (function (e, t) { var a = e.fnArray, i = e.argsArray, n = e.iCurr, s = n - 3, o = n - 2, c = i[n - 1][0], l = i[o][0], h = i[o][3], u = Math.min(Math.floor((t - s) / 4), 1e3); if (u < 3) return t - (t - s) % 4; for (var d = new Float32Array(2 * u), f = o, g = 0; g < u; g++, f += 4) { var m = i[f]; d[g << 1] = m[4]; d[1 + (g << 1)] = m[5] } var p = [c, l, h, d]; a.splice(s, 4 * u, r.OPS.paintImageXObjectRepeat); i.splice(s, 4 * u, p); return s + 1 })); e(t, [r.OPS.beginText, r.OPS.setFont, r.OPS.setTextMatrix, r.OPS.showText, r.OPS.endText], null, (function (e, t) { var a = e.fnArray, i = e.argsArray, n = (t - (e.iCurr - 4)) % 5; switch (n) { case 0: return a[t] === r.OPS.beginText; case 1: return a[t] === r.OPS.setFont; case 2: return a[t] === r.OPS.setTextMatrix; case 3: if (a[t] !== r.OPS.showText) return !1; var s = e.iCurr - 3, o = i[s][0], c = i[s][1]; return i[t][0] === o && i[t][1] === c; case 4: return a[t] === r.OPS.endText }throw new Error(`iterateShowTextGroup - invalid pos: ${n}`) }), (function (e, t) { var a = e.fnArray, r = e.argsArray, i = e.iCurr, n = i - 4, s = i - 3, o = i - 2, c = i - 1, l = i, h = r[s][0], u = r[s][1], d = Math.min(Math.floor((t - n) / 5), 1e3); if (d < 3) return t - (t - n) % 5; var f = n; if (n >= 4 && a[n - 4] === a[s] && a[n - 3] === a[o] && a[n - 2] === a[c] && a[n - 1] === a[l] && r[n - 4][0] === h && r[n - 4][1] === u) { d++; f -= 5 } for (var g = f + 4, m = 1; m < d; m++) { a.splice(g, 3); r.splice(g, 3); g += 2 } return g + 1 })); function a(e) { this.queue = e; this.state = null; this.context = { iCurr: 0, fnArray: e.fnArray, argsArray: e.argsArray }; this.match = null; this.lastProcessed = 0 } a.prototype = { _optimize() { const e = this.queue.fnArray; let a = this.lastProcessed, r = e.length, i = this.state, n = this.match; if (!i && !n && a + 1 === r && !t[e[a]]) { this.lastProcessed = r; return } const s = this.context; for (; a < r;) { if (n) { if ((0, n.iterateFn)(s, a)) { a++; continue } a = (0, n.processFn)(s, a + 1); r = e.length; n = null; i = null; if (a >= r) break } i = (i || t)[e[a]]; if (i && !Array.isArray(i)) { s.iCurr = a; a++; if (!i.checkFn || (0, i.checkFn)(s)) { n = i; i = null } else i = null } else a++ } this.state = i; this.match = n; this.lastProcessed = a }, push(e, t) { this.queue.fnArray.push(e); this.queue.argsArray.push(t); this._optimize() }, flush() { for (; this.match;) { const e = this.queue.fnArray.length; this.lastProcessed = (0, this.match.processFn)(this.context, e); this.match = null; this.state = null; this._optimize() } }, reset() { this.state = null; this.match = null; this.lastProcessed = 0 } }; return a }(), n = function () { function e(e) { this.queue = e } e.prototype = { push(e, t) { this.queue.fnArray.push(e); this.queue.argsArray.push(t) }, flush() { }, reset() { } }; return e }(), s = function () { function e(e, t, a) { this._streamSink = t; this.fnArray = []; this.argsArray = []; this.optimizer = t && "oplist" !== e ? new i(this) : new n(this); this.dependencies = Object.create(null); this._totalLength = 0; this.pageIndex = a; this.intent = e; this.weight = 0; this._resolved = t ? null : Promise.resolve() } e.prototype = { get length() { return this.argsArray.length }, get ready() { return this._resolved || this._streamSink.ready }, get totalLength() { return this._totalLength + this.length }, addOp(e, t) { this.optimizer.push(e, t); this.weight++; this._streamSink && (this.weight >= 1e3 || this.weight >= 995 && (e === r.OPS.restore || e === r.OPS.endText)) && this.flush() }, addDependency(e) { if (!(e in this.dependencies)) { this.dependencies[e] = !0; this.addOp(r.OPS.dependency, [e]) } }, addDependencies(e) { for (var t in e) this.addDependency(t) }, addOpList(e) { Object.assign(this.dependencies, e.dependencies); for (var t = 0, a = e.length; t < a; t++)this.addOp(e.fnArray[t], e.argsArray[t]) }, getIR() { return { fnArray: this.fnArray, argsArray: this.argsArray, length: this.length } }, get _transfers() { const e = [], { fnArray: t, argsArray: a, length: i } = this; for (let n = 0; n < i; n++)switch (t[n]) { case r.OPS.paintInlineImageXObject: case r.OPS.paintInlineImageXObjectGroup: case r.OPS.paintImageMaskXObject: const t = a[n][0]; t.cached || e.push(t.data.buffer) }return e }, flush(e = !1) { this.optimizer.flush(); const t = this.length; this._totalLength += t; this._streamSink.enqueue({ fnArray: this.fnArray, argsArray: this.argsArray, lastChunk: e, length: t }, 1, this._transfers); this.dependencies = Object.create(null); this.fnArray.length = 0; this.argsArray.length = 0; this.weight = 0; this.optimizer.reset() } }; return e }(); t.OperatorList = s }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.PartialEvaluator = void 0; var r = a(2), i = a(26), n = a(4), s = a(27), o = a(30), c = a(7), l = a(33), h = a(32), u = a(36), d = a(10), f = a(37), g = a(22), m = a(11), p = a(31), b = a(38), y = a(39), v = a(17), w = a(41), k = a(42), S = a(24), C = a(43), x = function () { const e = { forceDataSchema: !1, maxImageSize: -1, disableFontFace: !1, nativeImageDecoderSupport: r.NativeImageDecoding.DECODE, ignoreErrors: !1, isEvalSupported: !0 }; function t({ xref: t, handler: a, pageIndex: i, idFactory: n, fontCache: s, builtInCMapCache: o, options: c = null, pdfFunctionFactory: l }) { this.xref = t; this.handler = a; this.pageIndex = i; this.idFactory = n; this.fontCache = s; this.builtInCMapCache = o; this.options = c || e; this.pdfFunctionFactory = l; this.parsingType3Font = !1; this.fetchBuiltInCMap = async e => { if (this.builtInCMapCache.has(e)) return this.builtInCMapCache.get(e); const t = this.handler.sendWithStream("FetchBuiltInCMap", { name: e }).getReader(), a = await new Promise((function (e, a) { !function r() { t.read().then((function ({ value: t, done: a }) { if (!a) { e(t); r() } }), a) }() })); a.compressionType !== r.CMapCompressionType.NONE && this.builtInCMapCache.set(e, a); return a } } function a() { this.reset() } a.prototype = { check: function () { if (++this.checked < 100) return !1; this.checked = 0; return this.endTime <= Date.now() }, reset: function () { this.endTime = Date.now() + 20; this.checked = 0 } }; function d(e, t = !1) { if (Array.isArray(e)) { for (let t = 0, a = e.length; t < a; t++) { const a = d(e[t], !0); if (a) return a } (0, r.warn)(`Unsupported blend mode Array: ${e}`); return "source-over" } if (!(0, n.isName)(e)) return t ? null : "source-over"; switch (e.name) { case "Normal": case "Compatible": return "source-over"; case "Multiply": return "multiply"; case "Screen": return "screen"; case "Overlay": return "overlay"; case "Darken": return "darken"; case "Lighten": return "lighten"; case "ColorDodge": return "color-dodge"; case "ColorBurn": return "color-burn"; case "HardLight": return "hard-light"; case "SoftLight": return "soft-light"; case "Difference": return "difference"; case "Exclusion": return "exclusion"; case "Hue": return "hue"; case "Saturation": return "saturation"; case "Color": return "color"; case "Luminosity": return "luminosity" }if (t) return null; (0, r.warn)(`Unsupported blend mode: ${e.name}`); return "source-over" } var x = Promise.resolve(); t.prototype = { clone(t = e) { var a = Object.create(this); a.options = t; return a }, hasBlendModes: function (e) { if (!(e instanceof n.Dict)) return !1; var t = Object.create(null); e.objId && (t[e.objId] = !0); for (var a = [e], i = this.xref; a.length;) { var s = a.shift(), o = s.get("ExtGState"); if (o instanceof n.Dict) { var l = o.getKeys(); for (let e = 0, a = l.length; e < a; e++) { const a = l[e]; let s = o.getRaw(a); if (s instanceof n.Ref) { if (t[s.toString()]) continue; try { s = i.fetch(s) } catch (e) { if (e instanceof c.MissingDataException) throw e; if (this.options.ignoreErrors) { s instanceof n.Ref && (t[s.toString()] = !0); this.handler.send("UnsupportedFeature", { featureId: r.UNSUPPORTED_FEATURES.unknown }); (0, r.warn)(`hasBlendModes - ignoring ExtGState: "${e}".`); continue } throw e } } if (!(s instanceof n.Dict)) continue; s.objId && (t[s.objId] = !0); const h = s.get("BM"); if (h instanceof n.Name) { if ("Normal" !== h.name) return !0 } else if (void 0 !== h && Array.isArray(h)) for (let e = 0, t = h.length; e < t; e++)if (h[e] instanceof n.Name && "Normal" !== h[e].name) return !0 } } var h = s.get("XObject"); if (h instanceof n.Dict) { var u = h.getKeys(); for (let e = 0, s = u.length; e < s; e++) { const s = u[e]; var d = h.getRaw(s); if (d instanceof n.Ref) { if (t[d.toString()]) continue; try { d = i.fetch(d) } catch (e) { if (e instanceof c.MissingDataException) throw e; if (this.options.ignoreErrors) { d instanceof n.Ref && (t[d.toString()] = !0); this.handler.send("UnsupportedFeature", { featureId: r.UNSUPPORTED_FEATURES.unknown }); (0, r.warn)(`hasBlendModes - ignoring XObject: "${e}".`); continue } throw e } } if ((0, n.isStream)(d)) { if (d.dict.objId) { if (t[d.dict.objId]) continue; t[d.dict.objId] = !0 } var f = d.dict.get("Resources"); if (f instanceof n.Dict && (!f.objId || !t[f.objId])) { a.push(f); f.objId && (t[f.objId] = !0) } } } } } return !1 }, async buildFormXObject(e, t, a, i, s, o) { var c = t.dict, l = c.getArray("Matrix"), h = c.getArray("BBox"); h = Array.isArray(h) && 4 === h.length ? r.Util.normalizeRect(h) : null; var u = c.get("Group"); if (u) { var d = { matrix: l, bbox: h, smask: a, isolated: !1, knockout: !1 }, f = u.get("S"), m = null; if ((0, n.isName)(f, "Transparency")) { d.isolated = u.get("I") || !1; d.knockout = u.get("K") || !1; u.has("CS") && (m = await this.parseColorSpace({ cs: u.get("CS"), resources: e })) } if (a && a.backdrop) { m = m || g.ColorSpace.singletons.rgb; a.backdrop = m.getRgb(a.backdrop, 0) } i.addOp(r.OPS.beginGroup, [d]) } i.addOp(r.OPS.paintFormXObjectBegin, [l, h]); return this.getOperatorList({ stream: t, task: s, resources: c.get("Resources") || e, operatorList: i, initialState: o }).then((function () { i.addOp(r.OPS.paintFormXObjectEnd, []); u && i.addOp(r.OPS.endGroup, [d]) })) }, async buildPaintImageXObject({ resources: e, image: t, isInline: a = !1, operatorList: i, cacheKey: n, imageCache: s, forceDisableNativeImageDecoder: o = !1 }) { var c = t.dict, l = c.get("Width", "W"), h = c.get("Height", "H"); if (!(l && (0, r.isNum)(l) && h && (0, r.isNum)(h))) { (0, r.warn)("Image dimensions are missing, or not numbers."); return } var u, d, f = this.options.maxImageSize; if (-1 !== f && l * h > f) { (0, r.warn)("Image exceeded maximum allowed size and was removed."); return } if (c.get("ImageMask", "IM") || !1) { var g = c.get("Width", "W"), p = c.get("Height", "H"), b = g + 7 >> 3, y = t.getBytes(b * p, !0), w = c.getArray("Decode", "D"); (u = C.PDFImage.createMask({ imgArray: y, width: g, height: p, imageIsFromDecodeStream: t instanceof m.DecodeStream, inverseDecode: !!w && w[0] > 0 })).cached = !!n; d = [u]; i.addOp(r.OPS.paintImageMaskXObject, d); n && (s[n] = { fn: r.OPS.paintImageMaskXObject, args: d }); return } var S = c.get("SMask", "SM") || !1, x = c.get("Mask") || !1; if (a && !S && !x && !(t instanceof v.JpegStream) && l + h < 200) { u = new C.PDFImage({ xref: this.xref, res: e, image: t, isInline: a, pdfFunctionFactory: this.pdfFunctionFactory }).createImageData(!0); i.addOp(r.OPS.paintInlineImageXObject, [u]); return } const A = o ? r.NativeImageDecoding.NONE : this.options.nativeImageDecoderSupport; let I = `img_${this.idFactory.createObjId()}`; if (this.parsingType3Font) { (0, r.assert)(A === r.NativeImageDecoding.NONE, "Type3 image resources should be completely decoded in the worker."); I = `${this.idFactory.getDocId()}_type3res_${I}` } if (A !== r.NativeImageDecoding.NONE && !S && !x && t instanceof v.JpegStream && k.NativeImageDecoder.isSupported(t, this.xref, e, this.pdfFunctionFactory) && t.maybeValidDimensions) return this.handler.sendWithPromise("obj", [I, this.pageIndex, "JpegStream", t.getIR(this.options.forceDataSchema)]).then((function () { i.addDependency(I); d = [I, l, h]; i.addOp(r.OPS.paintJpegXObject, d); n && (s[n] = { fn: r.OPS.paintJpegXObject, args: d }) }), o => { (0, r.warn)("Native JPEG decoding failed -- trying to recover: " + (o && o.message)); return this.buildPaintImageXObject({ resources: e, image: t, isInline: a, operatorList: i, cacheKey: n, imageCache: s, forceDisableNativeImageDecoder: !0 }) }); var F = null; A === r.NativeImageDecoding.DECODE && (t instanceof v.JpegStream || x instanceof v.JpegStream || S instanceof v.JpegStream) && (F = new k.NativeImageDecoder({ xref: this.xref, resources: e, handler: this.handler, forceDataSchema: this.options.forceDataSchema, pdfFunctionFactory: this.pdfFunctionFactory })); i.addDependency(I); d = [I, l, h]; const T = C.PDFImage.buildImage({ handler: this.handler, xref: this.xref, res: e, image: t, isInline: a, nativeDecoder: F, pdfFunctionFactory: this.pdfFunctionFactory }).then(e => { var t = e.createImageData(!1); if (this.parsingType3Font) return this.handler.sendWithPromise("commonobj", [I, "FontType3Res", t], [t.data.buffer]); this.handler.send("obj", [I, this.pageIndex, "Image", t], [t.data.buffer]) }).catch(e => { (0, r.warn)("Unable to decode image: " + e); if (this.parsingType3Font) return this.handler.sendWithPromise("commonobj", [I, "FontType3Res", null]); this.handler.send("obj", [I, this.pageIndex, "Image", null]) }); this.parsingType3Font && await T; i.addOp(r.OPS.paintImageXObject, d); n && (s[n] = { fn: r.OPS.paintImageXObject, args: d }) }, handleSMask: function (e, t, a, r, i) { var n = e.get("G"), s = { subtype: e.get("S").name, backdrop: e.get("BC") }, o = e.get("TR"); if ((0, y.isPDFFunction)(o)) { const e = this.pdfFunctionFactory.create(o); for (var c = new Uint8Array(256), l = new Float32Array(1), h = 0; h < 256; h++) { l[0] = h / 255; e(l, 0, l, 0); c[h] = 255 * l[0] | 0 } s.transferMap = c } return this.buildFormXObject(t, n, s, a, r, i.state.clone()) }, handleTilingType(e, t, a, i, s, o, c) { const l = new S.OperatorList, h = [s.get("Resources"), a], d = n.Dict.merge(this.xref, h); return this.getOperatorList({ stream: i, task: c, resources: d, operatorList: l }).then((function () { return (0, u.getTilingPatternIR)({ fnArray: l.fnArray, argsArray: l.argsArray }, s, t) })).then((function (t) { o.addDependencies(l.dependencies); o.addOp(e, t) }), e => { if (!(e instanceof r.AbortException)) { if (!this.options.ignoreErrors) throw e; this.handler.send("UnsupportedFeature", { featureId: r.UNSUPPORTED_FEATURES.unknown }); (0, r.warn)(`handleTilingType - ignoring pattern: "${e}".`) } }) }, handleSetFont: function (e, t, a, i, n, o) { var c; t && (c = (t = t.slice())[0].name); return this.loadFont(c, a, e).then(t => t.font.isType3Font ? t.loadType3Data(this, e, i, n).then((function () { return t })).catch(e => { this.handler.send("UnsupportedFeature", { featureId: r.UNSUPPORTED_FEATURES.font }); return new A("g_font_error", new s.ErrorFont("Type3 font load error: " + e), t.font) }) : t).then(e => { o.font = e.font; e.send(this.handler); return e.loadedName }) }, handleText(e, a) { const i = a.font, n = i.charsToGlyphs(e); if (i.data) { (!!(a.textRenderingMode & r.TextRenderingMode.ADD_TO_PATH_FLAG) || "Pattern" === a.fillColorSpace.name || i.disableFontFace || this.options.disableFontFace) && t.buildFontPaths(i, n, this.handler) } return n }, ensureStateFont(e) { if (e.font) return; const t = new r.FormatError("Missing setFont (Tf) operator before text rendering operator."); if (!this.options.ignoreErrors) throw t; this.handler.send("UnsupportedFeature", { featureId: r.UNSUPPORTED_FEATURES.font }); (0, r.warn)(`ensureStateFont: "${t}".`) }, setGState: function (e, t, a, i, s) { for (var o = [], c = t.getKeys(), l = Promise.resolve(), h = 0, u = c.length; h < u; h++) { const u = c[h], f = t.get(u); switch (u) { case "Type": break; case "LW": case "LC": case "LJ": case "ML": case "D": case "RI": case "FL": case "CA": case "ca": o.push([u, f]); break; case "Font": l = l.then(() => this.handleSetFont(e, null, f[0], a, i, s.state).then((function (e) { a.addDependency(e); o.push([u, [e, f[1]]]) }))); break; case "BM": o.push([u, d(f)]); break; case "SMask": if ((0, n.isName)(f, "None")) { o.push([u, !1]); break } if ((0, n.isDict)(f)) { l = l.then(() => this.handleSMask(f, e, a, i, s)); o.push([u, !0]) } else (0, r.warn)("Unsupported SMask type"); break; case "OP": case "op": case "OPM": case "BG": case "BG2": case "UCR": case "UCR2": case "TR": case "TR2": case "HT": case "SM": case "SA": case "AIS": case "TK": (0, r.info)("graphic state operator " + u); break; default: (0, r.info)("Unknown graphic state operator " + u) } } return l.then((function () { o.length > 0 && a.addOp(r.OPS.setGState, [o]) })) }, loadFont: function (e, a, i) { function o() { return Promise.resolve(new A("g_font_error", new s.ErrorFont("Font " + e + " is not available"), a)) } var c, l = this.xref; if (a) { if (!(0, n.isRef)(a)) throw new r.FormatError('The "font" object should be a reference.'); c = a } else { var h = i.get("Font"); h && (c = h.getRaw(e)) } if (!c) { const i = `Font "${e || a && a.toString()}" is not available`; if (!this.options.ignoreErrors && !this.parsingType3Font) { (0, r.warn)(`${i}.`); return o() } this.handler.send("UnsupportedFeature", { featureId: r.UNSUPPORTED_FEATURES.font }); (0, r.warn)(`${i} -- attempting to fallback to a default font.`); c = t.getFallbackFontDict() } if (this.fontCache.has(c)) return this.fontCache.get(c); a = l.fetchIfRef(c); if (!(0, n.isDict)(a)) return o(); if (a.translated) return a.translated; var u = (0, r.createPromiseCapability)(), d = this.preEvaluateFont(a); const { descriptor: f, hash: g } = d; var m, p, b = (0, n.isRef)(c); b && (m = c.toString()); if (g && (0, n.isDict)(f)) { f.fontAliases || (f.fontAliases = Object.create(null)); var y = f.fontAliases; if (y[g]) { var v = y[g].aliasRef; if (b && v && this.fontCache.has(v)) { this.fontCache.putAlias(c, v); return this.fontCache.get(c) } } else y[g] = { fontID: s.Font.getFontID() }; b && (y[g].aliasRef = c); m = y[g].fontID } if (b) this.fontCache.put(c, u.promise); else { m || (m = this.idFactory.createObjId()); this.fontCache.put(`id_${m}`, u.promise) } (0, r.assert)(m, 'The "fontID" must be defined.'); a.loadedName = `${this.idFactory.getDocId()}_f${m}`; a.translated = u.promise; try { p = this.translateFont(d) } catch (e) { p = Promise.reject(e) } p.then((function (e) { if (void 0 !== e.fontType) { l.stats.fontTypes[e.fontType] = !0 } u.resolve(new A(a.loadedName, e, a)) })).catch(e => { this.handler.send("UnsupportedFeature", { featureId: r.UNSUPPORTED_FEATURES.font }); try { var t = f && f.get("FontFile3"), i = t && t.get("Subtype"), n = (0, s.getFontType)(d.type, i && i.name); l.stats.fontTypes[n] = !0 } catch (e) { } u.resolve(new A(a.loadedName, new s.ErrorFont(e instanceof Error ? e.message : e), a)) }); return u.promise }, buildPath(e, t, a, i = !1) { var n = e.length - 1; a || (a = []); if (n < 0 || e.fnArray[n] !== r.OPS.constructPath) { if (i) { (0, r.warn)(`Encountered path operator "${t}" inside of a text object.`); e.addOp(r.OPS.save, null) } e.addOp(r.OPS.constructPath, [[t], a]); i && e.addOp(r.OPS.restore, null) } else { var s = e.argsArray[n]; s[0].push(t); Array.prototype.push.apply(s[1], a) } }, parseColorSpace({ cs: e, resources: t }) { return new Promise(a => { a(g.ColorSpace.parse(e, this.xref, t, this.pdfFunctionFactory)) }).catch(e => { if (e instanceof r.AbortException) return null; if (this.options.ignoreErrors) { this.handler.send("UnsupportedFeature", { featureId: r.UNSUPPORTED_FEATURES.unknown }); (0, r.warn)(`parseColorSpace - ignoring ColorSpace: "${e}".`); return null } throw e }) }, async handleColorN(e, t, a, i, s, o, c) { var l, h = a[a.length - 1]; if ((0, n.isName)(h) && (l = s.get(h.name))) { var d = (0, n.isStream)(l) ? l.dict : l, f = d.get("PatternType"); if (1 === f) { var g = i.base ? i.base.getRgb(a, 0) : null; return this.handleTilingType(t, g, o, l, d, e, c) } if (2 === f) { var m = d.get("Shading"), p = d.getArray("Matrix"); l = u.Pattern.parseShading(m, p, this.xref, o, this.handler, this.pdfFunctionFactory); e.addOp(t, l.getIR()); return } throw new r.FormatError(`Unknown PatternType: ${f}`) } throw new r.FormatError(`Unknown PatternName: ${h}`) }, getOperatorList({ stream: e, task: t, resources: i, operatorList: s, initialState: o = null }) { i = i || n.Dict.empty; o = o || new T; if (!s) throw new Error('getOperatorList: missing "operatorList" parameter'); var c = this, l = this.xref; let h = !1; var d = Object.create(null), f = i.get("XObject") || n.Dict.empty, m = i.get("Pattern") || n.Dict.empty, p = new I(o), b = new E(e, l, p), y = new a; function v(e) { for (var t = 0, a = b.savedStatesDepth; t < a; t++)s.addOp(r.OPS.restore, []) } return new Promise((function e(a, o) { const w = function (t) { Promise.all([t, s.ready]).then((function () { try { e(a, o) } catch (e) { o(e) } }), o) }; t.ensureNotTerminated(); y.reset(); for (var k, S, C, A, I = {}; !(k = y.check());) { I.args = null; if (!b.read(I)) break; var F = I.args, T = I.fn; switch (0 | T) { case r.OPS.paintXObject: var E = F[0].name; if (E && void 0 !== d[E]) { s.addOp(d[E].fn, d[E].args); F = null; continue } w(new Promise((function (e, a) { if (!E) throw new r.FormatError("XObject must be referred to by name."); const o = f.get(E); if (!o) { s.addOp(T, F); e(); return } if (!(0, n.isStream)(o)) throw new r.FormatError("XObject should be a stream"); const l = o.dict.get("Subtype"); if (!(0, n.isName)(l)) throw new r.FormatError("XObject should have a Name subtype"); if ("Form" !== l.name) if ("Image" !== l.name) { if ("PS" !== l.name) throw new r.FormatError(`Unhandled XObject subtype ${l.name}`); (0, r.info)("Ignored XObject subtype PS"); e() } else c.buildPaintImageXObject({ resources: i, image: o, operatorList: s, cacheKey: E, imageCache: d }).then(e, a); else { p.save(); c.buildFormXObject(i, o, null, s, t, p.state.clone()).then((function () { p.restore(); e() }), a) } })).catch((function (e) { if (!(e instanceof r.AbortException)) { if (!c.options.ignoreErrors) throw e; c.handler.send("UnsupportedFeature", { featureId: r.UNSUPPORTED_FEATURES.unknown }); (0, r.warn)(`getOperatorList - ignoring XObject: "${e}".`) } }))); return; case r.OPS.setFont: var O = F[1]; w(c.handleSetFont(i, F, null, s, t, p.state).then((function (e) { s.addDependency(e); s.addOp(r.OPS.setFont, [e, O]) }))); return; case r.OPS.beginText: h = !0; break; case r.OPS.endText: h = !1; break; case r.OPS.endInlineImage: var P = F[0].cacheKey; if (P) { var B = d[P]; if (void 0 !== B) { s.addOp(B.fn, B.args); F = null; continue } } w(c.buildPaintImageXObject({ resources: i, image: F[0], isInline: !0, operatorList: s, cacheKey: P, imageCache: d })); return; case r.OPS.showText: if (!p.state.font) { c.ensureStateFont(p.state); continue } F[0] = c.handleText(F[0], p.state); break; case r.OPS.showSpacedText: if (!p.state.font) { c.ensureStateFont(p.state); continue } var D = F[0], N = [], M = D.length, L = p.state; for (S = 0; S < M; ++S) { var R = D[S]; (0, r.isString)(R) ? Array.prototype.push.apply(N, c.handleText(R, L)) : (0, r.isNum)(R) && N.push(R) } F[0] = N; T = r.OPS.showText; break; case r.OPS.nextLineShowText: if (!p.state.font) { c.ensureStateFont(p.state); continue } s.addOp(r.OPS.nextLine); F[0] = c.handleText(F[0], p.state); T = r.OPS.showText; break; case r.OPS.nextLineSetSpacingShowText: if (!p.state.font) { c.ensureStateFont(p.state); continue } s.addOp(r.OPS.nextLine); s.addOp(r.OPS.setWordSpacing, [F.shift()]); s.addOp(r.OPS.setCharSpacing, [F.shift()]); F[0] = c.handleText(F[0], p.state); T = r.OPS.showText; break; case r.OPS.setTextRenderingMode: p.state.textRenderingMode = F[0]; break; case r.OPS.setFillColorSpace: w(c.parseColorSpace({ cs: F[0], resources: i }).then((function (e) { e && (p.state.fillColorSpace = e) }))); return; case r.OPS.setStrokeColorSpace: w(c.parseColorSpace({ cs: F[0], resources: i }).then((function (e) { e && (p.state.strokeColorSpace = e) }))); return; case r.OPS.setFillColor: A = p.state.fillColorSpace; F = A.getRgb(F, 0); T = r.OPS.setFillRGBColor; break; case r.OPS.setStrokeColor: A = p.state.strokeColorSpace; F = A.getRgb(F, 0); T = r.OPS.setStrokeRGBColor; break; case r.OPS.setFillGray: p.state.fillColorSpace = g.ColorSpace.singletons.gray; F = g.ColorSpace.singletons.gray.getRgb(F, 0); T = r.OPS.setFillRGBColor; break; case r.OPS.setStrokeGray: p.state.strokeColorSpace = g.ColorSpace.singletons.gray; F = g.ColorSpace.singletons.gray.getRgb(F, 0); T = r.OPS.setStrokeRGBColor; break; case r.OPS.setFillCMYKColor: p.state.fillColorSpace = g.ColorSpace.singletons.cmyk; F = g.ColorSpace.singletons.cmyk.getRgb(F, 0); T = r.OPS.setFillRGBColor; break; case r.OPS.setStrokeCMYKColor: p.state.strokeColorSpace = g.ColorSpace.singletons.cmyk; F = g.ColorSpace.singletons.cmyk.getRgb(F, 0); T = r.OPS.setStrokeRGBColor; break; case r.OPS.setFillRGBColor: p.state.fillColorSpace = g.ColorSpace.singletons.rgb; F = g.ColorSpace.singletons.rgb.getRgb(F, 0); break; case r.OPS.setStrokeRGBColor: p.state.strokeColorSpace = g.ColorSpace.singletons.rgb; F = g.ColorSpace.singletons.rgb.getRgb(F, 0); break; case r.OPS.setFillColorN: if ("Pattern" === (A = p.state.fillColorSpace).name) { w(c.handleColorN(s, r.OPS.setFillColorN, F, A, m, i, t)); return } F = A.getRgb(F, 0); T = r.OPS.setFillRGBColor; break; case r.OPS.setStrokeColorN: if ("Pattern" === (A = p.state.strokeColorSpace).name) { w(c.handleColorN(s, r.OPS.setStrokeColorN, F, A, m, i, t)); return } F = A.getRgb(F, 0); T = r.OPS.setStrokeRGBColor; break; case r.OPS.shadingFill: var U = i.get("Shading"); if (!U) throw new r.FormatError("No shading resource found"); var q = U.get(F[0].name); if (!q) throw new r.FormatError("No shading object found"); var j = u.Pattern.parseShading(q, null, l, i, c.handler, c.pdfFunctionFactory).getIR(); F = [j]; T = r.OPS.shadingFill; break; case r.OPS.setGState: var _ = F[0], z = i.get("ExtGState"); if (!(0, n.isDict)(z) || !z.has(_.name)) break; var H = z.get(_.name); w(c.setGState(i, H, s, t, p)); return; case r.OPS.moveTo: case r.OPS.lineTo: case r.OPS.curveTo: case r.OPS.curveTo2: case r.OPS.curveTo3: case r.OPS.closePath: case r.OPS.rectangle: c.buildPath(s, T, F, h); continue; case r.OPS.markPoint: case r.OPS.markPointProps: case r.OPS.beginMarkedContent: case r.OPS.beginMarkedContentProps: case r.OPS.endMarkedContent: case r.OPS.beginCompat: case r.OPS.endCompat: continue; default: if (null !== F) { for (S = 0, C = F.length; S < C && !(F[S] instanceof n.Dict); S++); if (S < C) { (0, r.warn)("getOperatorList - ignoring operator: " + T); continue } } }s.addOp(T, F) } if (k) w(x); else { v(); a() } })).catch(e => { if (!(e instanceof r.AbortException)) { if (!this.options.ignoreErrors) throw e; this.handler.send("UnsupportedFeature", { featureId: r.UNSUPPORTED_FEATURES.unknown }); (0, r.warn)(`getOperatorList - ignoring errors during "${t.name}" ` + `task: "${e}".`); v() } }) }, getTextContent({ stream: e, task: t, resources: i, stateManager: s = null, normalizeWhitespace: o = !1, combineTextItems: c = !1, sink: h, seenStyles: u = Object.create(null) }) { i = i || n.Dict.empty; s = s || new I(new F); var d, g = /\s/g, m = { items: [], styles: Object.create(null) }, p = { initialized: !1, str: [], width: 0, height: 0, vertical: !1, lastAdvanceWidth: 0, lastAdvanceHeight: 0, textAdvanceScale: 0, spaceWidth: 0, fakeSpaceMin: 1 / 0, fakeMultiSpaceMin: 1 / 0, fakeMultiSpaceMax: -0, textRunBreakAllowed: !1, transform: null, fontName: null }, b = this, y = this.xref, v = null, w = Object.create(null), k = new E(e, y, s); function S() { if (p.initialized) return p; var e = d.font; if (!(e.loadedName in u)) { u[e.loadedName] = !0; m.styles[e.loadedName] = { fontFamily: e.fallbackName, ascent: e.ascent, descent: e.descent, vertical: !!e.vertical } } p.fontName = e.loadedName; var t = [d.fontSize * d.textHScale, 0, 0, d.fontSize, 0, d.textRise]; if (e.isType3Font && d.fontSize <= 1 && !(0, r.isArrayEqual)(d.fontMatrix, r.FONT_IDENTITY_MATRIX)) { const a = e.bbox[3] - e.bbox[1]; a > 0 && (t[3] *= a * d.fontMatrix[3]) } var a = r.Util.transform(d.ctm, r.Util.transform(d.textMatrix, t)); p.transform = a; if (e.vertical) { p.width = Math.sqrt(a[0] * a[0] + a[1] * a[1]); p.height = 0; p.vertical = !0 } else { p.width = 0; p.height = Math.sqrt(a[2] * a[2] + a[3] * a[3]); p.vertical = !1 } var i = d.textLineMatrix[0], n = d.textLineMatrix[1], s = Math.sqrt(i * i + n * n); i = d.ctm[0]; n = d.ctm[1]; var o = Math.sqrt(i * i + n * n); p.textAdvanceScale = o * s; p.lastAdvanceWidth = 0; p.lastAdvanceHeight = 0; var c = e.spaceWidth / 1e3 * d.fontSize; if (c) { p.spaceWidth = c; p.fakeSpaceMin = .3 * c; p.fakeMultiSpaceMin = 1.5 * c; p.fakeMultiSpaceMax = 4 * c; p.textRunBreakAllowed = !e.isMonospace } else { p.spaceWidth = 0; p.fakeSpaceMin = 1 / 0; p.fakeMultiSpaceMin = 1 / 0; p.fakeMultiSpaceMax = 0; p.textRunBreakAllowed = !1 } p.initialized = !0; return p } function C(e) { for (var t, a = 0, r = e.length; a < r && (t = e.charCodeAt(a)) >= 32 && t <= 127;)a++; return a < r ? e.replace(g, " ") : e } function A(e, t) { return b.loadFont(e, t, i).then((function (e) { d.font = e.font; d.fontMatrix = e.font.fontMatrix || r.FONT_IDENTITY_MATRIX })) } function T(e) { for (var t = d.font, a = S(), r = 0, i = 0, n = t.charsToGlyphs(e), s = 0; s < n.length; s++) { var o = n[s], c = null; c = t.vertical && o.vmetric ? o.vmetric[0] : o.width; var h = o.unicode, u = (0, l.getNormalizedUnicodes)(); void 0 !== u[h] && (h = u[h]); h = (0, l.reverseIfRtl)(h); var f = d.charSpacing; if (o.isSpace) { var g = d.wordSpacing; f += g; g > 0 && O(g, a.str) } var m = 0, p = 0; if (t.vertical) { i += p = c * d.fontMatrix[0] * d.fontSize + f } else { r += m = (c * d.fontMatrix[0] * d.fontSize + f) * d.textHScale } d.translateTextMatrix(m, p); a.str.push(h) } if (t.vertical) { a.lastAdvanceHeight = i; a.height += Math.abs(i) } else { a.lastAdvanceWidth = r; a.width += r } return a } function O(e, t) { if (!(e < p.fakeSpaceMin)) if (e < p.fakeMultiSpaceMin) t.push(" "); else for (var a = Math.round(e / p.spaceWidth); a-- > 0;)t.push(" ") } function P() { if (p.initialized) { p.vertical ? p.height *= p.textAdvanceScale : p.width *= p.textAdvanceScale; m.items.push((t = (e = p).str.join(""), a = (0, f.bidi)(t, -1, e.vertical), { str: o ? C(a.str) : a.str, dir: a.dir, width: e.width, height: e.height, transform: e.transform, fontName: e.fontName })); var e, t, a; p.initialized = !1; p.str.length = 0 } } function B() { const e = m.items.length; if (e > 0) { h.enqueue(m, e); m.items = []; m.styles = Object.create(null) } } var D = new a; return new Promise((function e(a, l) { const f = function (t) { B(); Promise.all([t, h.ready]).then((function () { try { e(a, l) } catch (e) { l(e) } }), l) }; t.ensureNotTerminated(); D.reset(); for (var g, y = {}, C = []; !(g = D.check());) { C.length = 0; y.args = C; if (!k.read(y)) break; d = s.state; var F, E = y.fn; C = y.args; switch (0 | E) { case r.OPS.setFont: var N = C[0].name, M = C[1]; if (d.font && N === d.fontName && M === d.fontSize) break; P(); d.fontName = N; d.fontSize = M; f(A(N, null)); return; case r.OPS.setTextRise: P(); d.textRise = C[0]; break; case r.OPS.setHScale: P(); d.textHScale = C[0] / 100; break; case r.OPS.setLeading: P(); d.leading = C[0]; break; case r.OPS.moveText: var L = !!d.font && 0 === (d.font.vertical ? C[0] : C[1]); F = C[0] - C[1]; if (c && L && p.initialized && F > 0 && F <= p.fakeMultiSpaceMax) { d.translateTextLineMatrix(C[0], C[1]); p.width += C[0] - p.lastAdvanceWidth; p.height += C[1] - p.lastAdvanceHeight; O(C[0] - p.lastAdvanceWidth - (C[1] - p.lastAdvanceHeight), p.str); break } P(); d.translateTextLineMatrix(C[0], C[1]); d.textMatrix = d.textLineMatrix.slice(); break; case r.OPS.setLeadingMoveText: P(); d.leading = -C[1]; d.translateTextLineMatrix(C[0], C[1]); d.textMatrix = d.textLineMatrix.slice(); break; case r.OPS.nextLine: P(); d.carriageReturn(); break; case r.OPS.setTextMatrix: F = d.calcTextLineMatrixAdvance(C[0], C[1], C[2], C[3], C[4], C[5]); if (c && null !== F && p.initialized && F.value > 0 && F.value <= p.fakeMultiSpaceMax) { d.translateTextLineMatrix(F.width, F.height); p.width += F.width - p.lastAdvanceWidth; p.height += F.height - p.lastAdvanceHeight; O(F.width - p.lastAdvanceWidth - (F.height - p.lastAdvanceHeight), p.str); break } P(); d.setTextMatrix(C[0], C[1], C[2], C[3], C[4], C[5]); d.setTextLineMatrix(C[0], C[1], C[2], C[3], C[4], C[5]); break; case r.OPS.setCharSpacing: d.charSpacing = C[0]; break; case r.OPS.setWordSpacing: d.wordSpacing = C[0]; break; case r.OPS.beginText: P(); d.textMatrix = r.IDENTITY_MATRIX.slice(); d.textLineMatrix = r.IDENTITY_MATRIX.slice(); break; case r.OPS.showSpacedText: if (!s.state.font) { b.ensureStateFont(s.state); continue } for (var R, U = C[0], q = 0, j = U.length; q < j; q++)if ("string" == typeof U[q]) T(U[q]); else if ((0, r.isNum)(U[q])) { S(); F = U[q] * d.fontSize / 1e3; var _ = !1; if (d.font.vertical) { R = F; d.translateTextMatrix(0, R); (_ = p.textRunBreakAllowed && F > p.fakeMultiSpaceMax) || (p.height += R) } else { R = (F = -F) * d.textHScale; d.translateTextMatrix(R, 0); (_ = p.textRunBreakAllowed && F > p.fakeMultiSpaceMax) || (p.width += R) } _ ? P() : F > 0 && O(F, p.str) } break; case r.OPS.showText: if (!s.state.font) { b.ensureStateFont(s.state); continue } T(C[0]); break; case r.OPS.nextLineShowText: if (!s.state.font) { b.ensureStateFont(s.state); continue } P(); d.carriageReturn(); T(C[0]); break; case r.OPS.nextLineSetSpacingShowText: if (!s.state.font) { b.ensureStateFont(s.state); continue } P(); d.wordSpacing = C[0]; d.charSpacing = C[1]; d.carriageReturn(); T(C[2]); break; case r.OPS.paintXObject: P(); v || (v = i.get("XObject") || n.Dict.empty); var z = C[0].name; if (z && void 0 !== w[z]) break; f(new Promise((function (e, a) { if (!z) throw new r.FormatError("XObject must be referred to by name."); const l = v.get(z); if (!l) { e(); return } if (!(0, n.isStream)(l)) throw new r.FormatError("XObject should be a stream"); const d = l.dict.get("Subtype"); if (!(0, n.isName)(d)) throw new r.FormatError("XObject should have a Name subtype"); if ("Form" !== d.name) { w[z] = !0; e(); return } const f = s.state.clone(), g = new I(f), m = l.dict.getArray("Matrix"); Array.isArray(m) && 6 === m.length && g.transform(m); B(); const p = { enqueueInvoked: !1, enqueue(e, t) { this.enqueueInvoked = !0; h.enqueue(e, t) }, get desiredSize() { return h.desiredSize }, get ready() { return h.ready } }; b.getTextContent({ stream: l, task: t, resources: l.dict.get("Resources") || i, stateManager: g, normalizeWhitespace: o, combineTextItems: c, sink: p, seenStyles: u }).then((function () { p.enqueueInvoked || (w[z] = !0); e() }), a) })).catch((function (e) { if (!(e instanceof r.AbortException)) { if (!b.options.ignoreErrors) throw e; (0, r.warn)(`getTextContent - ignoring XObject: "${e}".`) } }))); return; case r.OPS.setGState: P(); var H = C[0], G = i.get("ExtGState"); if (!(0, n.isDict)(G) || !(0, n.isName)(H)) break; var W = G.get(H.name); if (!(0, n.isDict)(W)) break; var X = W.get("Font"); if (X) { d.fontName = null; d.fontSize = X[1]; f(A(null, X[0])); return } }if (m.items.length >= h.desiredSize) { g = !0; break } } if (g) f(x); else { P(); B(); a() } })).catch(e => { if (!(e instanceof r.AbortException)) { if (!this.options.ignoreErrors) throw e; (0, r.warn)(`getTextContent - ignoring errors during "${t.name}" ` + `task: "${e}".`); P(); B() } }) }, extractDataStructures: function (e, t, a) { const i = this.xref; let c; var l = e.get("ToUnicode") || t.get("ToUnicode"), h = l ? this.readToUnicode(l) : Promise.resolve(void 0); if (a.composite) { var u = e.get("CIDSystemInfo"); (0, n.isDict)(u) && (a.cidSystemInfo = { registry: (0, r.stringToPDFString)(u.get("Registry")), ordering: (0, r.stringToPDFString)(u.get("Ordering")), supplement: u.get("Supplement") }); var d = e.get("CIDToGIDMap"); (0, n.isStream)(d) && (c = d.getBytes()) } var f, g = [], m = null; if (e.has("Encoding")) { f = e.get("Encoding"); if ((0, n.isDict)(f)) { m = f.get("BaseEncoding"); m = (0, n.isName)(m) ? m.name : null; if (f.has("Differences")) for (var p = f.get("Differences"), b = 0, y = 0, v = p.length; y < v; y++) { var w = i.fetchIfRef(p[y]); if ((0, r.isNum)(w)) b = w; else { if (!(0, n.isName)(w)) throw new r.FormatError(`Invalid entry in 'Differences' array: ${w}`); g[b++] = w.name } } } else { if (!(0, n.isName)(f)) throw new r.FormatError("Encoding is not a Name nor a Dict"); m = f.name } "MacRomanEncoding" !== m && "MacExpertEncoding" !== m && "WinAnsiEncoding" !== m && (m = null) } if (m) a.defaultEncoding = (0, o.getEncoding)(m).slice(); else { var k = !!(a.flags & s.FontFlags.Symbolic), S = !!(a.flags & s.FontFlags.Nonsymbolic); f = o.StandardEncoding; "TrueType" !== a.type || S || (f = o.WinAnsiEncoding); if (k) { f = o.MacRomanEncoding; a.file || (/Symbol/i.test(a.name) ? f = o.SymbolSetEncoding : /Dingbats|Wingdings/i.test(a.name) && (f = o.ZapfDingbatsEncoding)) } a.defaultEncoding = f } a.differences = g; a.baseEncodingName = m; a.hasEncoding = !!m || g.length > 0; a.dict = e; return h.then(e => { a.toUnicode = e; return this.buildToUnicode(a) }).then(e => { a.toUnicode = e; c && (a.cidToGidMap = this.readCidToGidMap(c, e)); return a }) }, _buildSimpleFontToUnicode(e, t = !1) { (0, r.assert)(!e.composite, "Must be a simple font."); const a = [], i = e.defaultEncoding.slice(), n = e.baseEncodingName, c = e.differences; for (const e in c) { const t = c[e]; ".notdef" !== t && (i[e] = t) } const h = (0, p.getGlyphsUnicode)(); for (const r in i) { let s = i[r]; if ("" !== s) if (void 0 !== h[s]) a[r] = String.fromCharCode(h[s]); else { let i = 0; switch (s[0]) { case "G": 3 === s.length && (i = parseInt(s.substring(1), 16)); break; case "g": 5 === s.length && (i = parseInt(s.substring(1), 16)); break; case "C": case "c": if (s.length >= 3 && s.length <= 4) { const a = s.substring(1); if (t) { i = parseInt(a, 16); break } i = +a; if (Number.isNaN(i) && Number.isInteger(parseInt(a, 16))) return this._buildSimpleFontToUnicode(e, !0) } break; default: const a = (0, l.getUnicodeForGlyph)(s, h); -1 !== a && (i = a) }if (i > 0 && Number.isInteger(i)) { if (n && i === +r) { const e = (0, o.getEncoding)(n); if (e && (s = e[r])) { a[r] = String.fromCharCode(h[s]); continue } } a[r] = String.fromCodePoint(i) } } } return new s.ToUnicodeMap(a) }, buildToUnicode(e) { e.hasIncludedToUnicodeMap = !!e.toUnicode && e.toUnicode.length > 0; if (e.hasIncludedToUnicodeMap) { !e.composite && e.hasEncoding && (e.fallbackToUnicode = this._buildSimpleFontToUnicode(e)); return Promise.resolve(e.toUnicode) } if (!e.composite) return Promise.resolve(this._buildSimpleFontToUnicode(e)); if (e.composite && (e.cMap.builtInCMap && !(e.cMap instanceof i.IdentityCMap) || "Adobe" === e.cidSystemInfo.registry && ("GB1" === e.cidSystemInfo.ordering || "CNS1" === e.cidSystemInfo.ordering || "Japan1" === e.cidSystemInfo.ordering || "Korea1" === e.cidSystemInfo.ordering))) { const t = e.cidSystemInfo.registry, a = e.cidSystemInfo.ordering, o = n.Name.get(t + "-" + a + "-UCS2"); return i.CMapFactory.create({ encoding: o, fetchBuiltInCMap: this.fetchBuiltInCMap, useCMap: null }).then((function (t) { const a = e.cMap, i = []; a.forEach((function (e, a) { if (a > 65535) throw new r.FormatError("Max size of CID is 65,535"); const n = t.lookup(a); n && (i[e] = String.fromCharCode((n.charCodeAt(0) << 8) + n.charCodeAt(1))) })); return new s.ToUnicodeMap(i) })) } return Promise.resolve(new s.IdentityToUnicodeMap(e.firstChar, e.lastChar)) }, readToUnicode: function (e) { var t = e; return (0, n.isName)(t) ? i.CMapFactory.create({ encoding: t, fetchBuiltInCMap: this.fetchBuiltInCMap, useCMap: null }).then((function (e) { return e instanceof i.IdentityCMap ? new s.IdentityToUnicodeMap(0, 65535) : new s.ToUnicodeMap(e.getMap()) })) : (0, n.isStream)(t) ? i.CMapFactory.create({ encoding: t, fetchBuiltInCMap: this.fetchBuiltInCMap, useCMap: null }).then((function (e) { if (e instanceof i.IdentityCMap) return new s.IdentityToUnicodeMap(0, 65535); var t = new Array(e.length); e.forEach((function (e, a) { for (var r = [], i = 0; i < a.length; i += 2) { var n = a.charCodeAt(i) << 8 | a.charCodeAt(i + 1); if (55296 == (63488 & n)) { i += 2; var s = a.charCodeAt(i) << 8 | a.charCodeAt(i + 1); r.push(((1023 & n) << 10) + (1023 & s) + 65536) } else r.push(n) } t[e] = String.fromCodePoint.apply(String, r) })); return new s.ToUnicodeMap(t) }), e => { if (e instanceof r.AbortException) return null; if (this.options.ignoreErrors) { this.handler.send("UnsupportedFeature", { featureId: r.UNSUPPORTED_FEATURES.font }); (0, r.warn)(`readToUnicode - ignoring ToUnicode data: "${e}".`); return null } throw e }) : Promise.resolve(null) }, readCidToGidMap(e, t) { for (var a = [], r = 0, i = e.length; r < i; r++) { var n = e[r++] << 8 | e[r]; const i = r >> 1; (0 !== n || t.has(i)) && (a[i] = n) } return a }, extractWidths: function (e, t, a) { var r, i, o, c, l, h, u, d, f = this.xref, g = [], m = 0, p = []; if (a.composite) { m = e.has("DW") ? e.get("DW") : 1e3; if (d = e.get("W")) for (i = 0, o = d.length; i < o; i++) { h = f.fetchIfRef(d[i++]); u = f.fetchIfRef(d[i]); if (Array.isArray(u)) for (c = 0, l = u.length; c < l; c++)g[h++] = f.fetchIfRef(u[c]); else { var b = f.fetchIfRef(d[++i]); for (c = h; c <= u; c++)g[c] = b } } if (a.vertical) { var y = e.getArray("DW2") || [880, -1e3]; r = [y[1], .5 * m, y[0]]; if (y = e.get("W2")) for (i = 0, o = y.length; i < o; i++) { h = f.fetchIfRef(y[i++]); u = f.fetchIfRef(y[i]); if (Array.isArray(u)) for (c = 0, l = u.length; c < l; c++)p[h++] = [f.fetchIfRef(u[c++]), f.fetchIfRef(u[c++]), f.fetchIfRef(u[c])]; else { var v = [f.fetchIfRef(y[++i]), f.fetchIfRef(y[++i]), f.fetchIfRef(y[++i])]; for (c = h; c <= u; c++)p[c] = v } } } } else { var w = a.firstChar; if (d = e.get("Widths")) { c = w; for (i = 0, o = d.length; i < o; i++)g[c++] = f.fetchIfRef(d[i]); m = parseFloat(t.get("MissingWidth")) || 0 } else { var k = e.get("BaseFont"); if ((0, n.isName)(k)) { var S = this.getBaseFontMetrics(k.name); g = this.buildCharCodeToWidth(S.widths, a); m = S.defaultWidth } } } var C = !0, x = m; for (var A in g) { var I = g[A]; if (I) if (x) { if (x !== I) { C = !1; break } } else x = I } C && (a.flags |= s.FontFlags.FixedPitch); a.defaultWidth = m; a.widths = g; a.defaultVMetrics = r; a.vmetrics = p }, isSerifFont: function (e) { var t = e.split("-")[0]; return t in (0, h.getSerifFonts)() || -1 !== t.search(/serif/gi) }, getBaseFontMetrics: function (e) { var t = 0, a = [], i = !1, n = (0, h.getStdFontMap)()[e] || e, s = (0, b.getMetrics)(); n in s || (n = this.isSerifFont(e) ? "Times-Roman" : "Helvetica"); var o = s[n]; if ((0, r.isNum)(o)) { t = o; i = !0 } else a = o(); return { defaultWidth: t, monospace: i, widths: a } }, buildCharCodeToWidth: function (e, t) { for (var a = Object.create(null), r = t.differences, i = t.defaultEncoding, n = 0; n < 256; n++)n in r && e[r[n]] ? a[n] = e[r[n]] : n in i && e[i[n]] && (a[n] = e[i[n]]); return a }, preEvaluateFont: function (e) { var t = e, a = e.get("Subtype"); if (!(0, n.isName)(a)) throw new r.FormatError("invalid font Subtype"); var i, s = !1; if ("Type0" === a.name) { var o = e.get("DescendantFonts"); if (!o) throw new r.FormatError("Descendant fonts are not specified"); a = (e = Array.isArray(o) ? this.xref.fetchIfRef(o[0]) : o).get("Subtype"); if (!(0, n.isName)(a)) throw new r.FormatError("invalid font Subtype"); s = !0 } var c = e.get("FontDescriptor"); if (c) { var l = new w.MurmurHash3_64, h = t.getRaw("Encoding"); if ((0, n.isName)(h)) l.update(h.name); else if ((0, n.isRef)(h)) l.update(h.toString()); else if ((0, n.isDict)(h)) for (var u = h.getKeys(), d = 0, f = u.length; d < f; d++) { var g = h.getRaw(u[d]); if ((0, n.isName)(g)) l.update(g.name); else if ((0, n.isRef)(g)) l.update(g.toString()); else if (Array.isArray(g)) { for (var m = g.length, p = new Array(m), b = 0; b < m; b++) { var y = g[b]; (0, n.isName)(y) ? p[b] = y.name : ((0, r.isNum)(y) || (0, n.isRef)(y)) && (p[b] = y.toString()) } l.update(p.join()) } } const a = e.get("FirstChar") || 0, o = e.get("LastChar") || (s ? 65535 : 255); l.update(`${a}-${o}`); var v = e.get("ToUnicode") || t.get("ToUnicode"); if ((0, n.isStream)(v)) { var k = v.str || v; i = k.buffer ? new Uint8Array(k.buffer.buffer, 0, k.bufferLength) : new Uint8Array(k.bytes.buffer, k.start, k.end - k.start); l.update(i) } else (0, n.isName)(v) && l.update(v.name); var S = e.get("Widths") || t.get("Widths"); if (S) { i = new Uint8Array(new Uint32Array(S).buffer); l.update(i) } } return { descriptor: c, dict: e, baseDict: t, composite: s, type: a.name, hash: l ? l.hexdigest() : "" } }, translateFont: function (e) { var t, a = e.baseDict, o = e.dict, c = e.composite, l = e.descriptor, u = e.type, d = c ? 65535 : 255; const f = o.get("FirstChar") || 0, g = o.get("LastChar") || d; if (!l) { if ("Type3" !== u) { var m = o.get("BaseFont"); if (!(0, n.isName)(m)) throw new r.FormatError("Base font is not specified"); m = m.name.replace(/[,_]/g, "-"); var p = this.getBaseFontMetrics(m), b = m.split("-")[0], y = (this.isSerifFont(b) ? s.FontFlags.Serif : 0) | (p.monospace ? s.FontFlags.FixedPitch : 0) | ((0, h.getSymbolsFonts)()[b] ? s.FontFlags.Symbolic : s.FontFlags.Nonsymbolic); t = { type: u, name: m, widths: p.widths, defaultWidth: p.defaultWidth, flags: y, firstChar: f, lastChar: g }; const e = o.get("Widths"); return this.extractDataStructures(o, o, t).then(t => { if (e) { const a = []; let r = f; for (let t = 0, i = e.length; t < i; t++)a[r++] = this.xref.fetchIfRef(e[t]); t.widths = a } else t.widths = this.buildCharCodeToWidth(p.widths, t); return new s.Font(m, null, t) }) } (l = new n.Dict(null)).set("FontName", n.Name.get(u)); l.set("FontBBox", o.getArray("FontBBox") || [0, 0, 0, 0]) } var v = l.get("FontName"), w = o.get("BaseFont"); (0, r.isString)(v) && (v = n.Name.get(v)); (0, r.isString)(w) && (w = n.Name.get(w)); if ("Type3" !== u) { var k = v && v.name, S = w && w.name; if (k !== S) { (0, r.info)(`The FontDescriptor's FontName is "${k}" but ` + `should be the same as the Font's BaseFont "${S}".`); k && S && S.startsWith(k) && (v = w) } } v = v || w; if (!(0, n.isName)(v)) throw new r.FormatError("invalid font name"); var C, x = l.get("FontFile", "FontFile2", "FontFile3"); if (x && x.dict) { var A = x.dict.get("Subtype"); A && (A = A.name); var I = x.dict.get("Length1"), F = x.dict.get("Length2"), T = x.dict.get("Length3") } t = { type: u, name: v.name, subtype: A, file: x, length1: I, length2: F, length3: T, loadedName: a.loadedName, composite: c, wideChars: c, fixedPitch: !1, fontMatrix: o.getArray("FontMatrix") || r.FONT_IDENTITY_MATRIX, firstChar: f || 0, lastChar: g || d, bbox: l.getArray("FontBBox"), ascent: l.get("Ascent"), descent: l.get("Descent"), xHeight: l.get("XHeight"), capHeight: l.get("CapHeight"), flags: l.get("Flags"), italicAngle: l.get("ItalicAngle"), isType3Font: !1 }; if (c) { var E = a.get("Encoding"); (0, n.isName)(E) && (t.cidEncoding = E.name); C = i.CMapFactory.create({ encoding: E, fetchBuiltInCMap: this.fetchBuiltInCMap, useCMap: null }).then((function (e) { t.cMap = e; t.vertical = t.cMap.vertical })) } else C = Promise.resolve(void 0); return C.then(() => this.extractDataStructures(o, a, t)).then(e => { this.extractWidths(o, l, e); "Type3" === u && (e.isType3Font = !0); return new s.Font(v.name, x, e) }) } }; t.buildFontPaths = function (e, t, a) { function r(t) { e.renderer.hasBuiltPath(t) || a.send("commonobj", [`${e.loadedName}_path_${t}`, "FontPath", e.renderer.getPathJs(t)]) } for (const e of t) { r(e.fontChar); const t = e.accent; t && t.fontChar && r(t.fontChar) } }; t.getFallbackFontDict = function () { if (this._fallbackFontDict) return this._fallbackFontDict; const e = new n.Dict; e.set("BaseFont", n.Name.get("PDFJS-FallbackFont")); e.set("Type", n.Name.get("FallbackType")); e.set("Subtype", n.Name.get("FallbackType")); e.set("Encoding", n.Name.get("WinAnsiEncoding")); return this._fallbackFontDict = e }; return t }(); t.PartialEvaluator = x; var A = function () { function e(e, t, a) { this.loadedName = e; this.font = t; this.dict = a; this.type3Loaded = null; this.sent = !1 } e.prototype = { send(e) { if (!this.sent) { this.sent = !0; e.send("commonobj", [this.loadedName, "Font", this.font.exportData()]) } }, fallback(e) { if (!this.font.data) return; this.font.disableFontFace = !0; const t = this.font.glyphCacheValues; x.buildFontPaths(this.font, t, e) }, loadType3Data(e, t, a, i) { if (!this.font.isType3Font) throw new Error("Must be a Type3 font."); if (this.type3Loaded) return this.type3Loaded; var n = Object.create(e.options); n.ignoreErrors = !1; n.nativeImageDecoderSupport = r.NativeImageDecoding.NONE; var s = e.clone(n); s.parsingType3Font = !0; for (var o = this.font, c = Promise.resolve(), l = this.dict.get("CharProcs"), h = this.dict.get("Resources") || t, u = l.getKeys(), d = Object.create(null), f = 0, g = u.length; f < g; ++f) { const e = u[f]; c = c.then((function () { var t = l.get(e), n = new S.OperatorList; return s.getOperatorList({ stream: t, task: i, resources: h, operatorList: n }).then((function () { d[e] = n.getIR(); a.addDependencies(n.dependencies) })).catch((function (t) { (0, r.warn)(`Type3 font resource "${e}" is not available.`); var a = new S.OperatorList; d[e] = a.getIR() })) })) } this.type3Loaded = c.then((function () { o.charProcOperatorList = d })); return this.type3Loaded } }; return e }(), I = function () { function e(e) { this.state = e; this.stateStack = [] } e.prototype = { save() { var e = this.state; this.stateStack.push(this.state); this.state = e.clone() }, restore() { var e = this.stateStack.pop(); e && (this.state = e) }, transform(e) { this.state.ctm = r.Util.transform(this.state.ctm, e) } }; return e }(), F = function () { function e() { this.ctm = new Float32Array(r.IDENTITY_MATRIX); this.fontName = null; this.fontSize = 0; this.font = null; this.fontMatrix = r.FONT_IDENTITY_MATRIX; this.textMatrix = r.IDENTITY_MATRIX.slice(); this.textLineMatrix = r.IDENTITY_MATRIX.slice(); this.charSpacing = 0; this.wordSpacing = 0; this.leading = 0; this.textHScale = 1; this.textRise = 0 } e.prototype = { setTextMatrix: function (e, t, a, r, i, n) { var s = this.textMatrix; s[0] = e; s[1] = t; s[2] = a; s[3] = r; s[4] = i; s[5] = n }, setTextLineMatrix: function (e, t, a, r, i, n) { var s = this.textLineMatrix; s[0] = e; s[1] = t; s[2] = a; s[3] = r; s[4] = i; s[5] = n }, translateTextMatrix: function (e, t) { var a = this.textMatrix; a[4] = a[0] * e + a[2] * t + a[4]; a[5] = a[1] * e + a[3] * t + a[5] }, translateTextLineMatrix: function (e, t) { var a = this.textLineMatrix; a[4] = a[0] * e + a[2] * t + a[4]; a[5] = a[1] * e + a[3] * t + a[5] }, calcTextLineMatrixAdvance: function (e, t, a, r, i, n) { var s = this.font; if (!s) return null; var o = this.textLineMatrix; if (e !== o[0] || t !== o[1] || a !== o[2] || r !== o[3]) return null; var c = i - o[4], l = n - o[5]; if (s.vertical && 0 !== c || !s.vertical && 0 !== l) return null; var h, u, d = e * r - t * a; if (s.vertical) { h = -l * a / d; u = l * e / d } else { h = c * r / d; u = -c * t / d } return { width: h, height: u, value: s.vertical ? u : h } }, calcRenderMatrix: function (e) { var t = [this.fontSize * this.textHScale, 0, 0, this.fontSize, 0, this.textRise]; return r.Util.transform(e, r.Util.transform(this.textMatrix, t)) }, carriageReturn: function () { this.translateTextLineMatrix(0, -this.leading); this.textMatrix = this.textLineMatrix.slice() }, clone: function () { var e = Object.create(this); e.textMatrix = this.textMatrix.slice(); e.textLineMatrix = this.textLineMatrix.slice(); e.fontMatrix = this.fontMatrix.slice(); return e } }; return e }(), T = function () { function e() { this.ctm = new Float32Array(r.IDENTITY_MATRIX); this.font = null; this.textRenderingMode = r.TextRenderingMode.FILL; this.fillColorSpace = g.ColorSpace.singletons.gray; this.strokeColorSpace = g.ColorSpace.singletons.gray } e.prototype = { clone: function () { return Object.create(this) } }; return e }(), E = function () { var e = (0, c.getLookupTableFactory)((function (e) { e.w = { id: r.OPS.setLineWidth, numArgs: 1, variableArgs: !1 }; e.J = { id: r.OPS.setLineCap, numArgs: 1, variableArgs: !1 }; e.j = { id: r.OPS.setLineJoin, numArgs: 1, variableArgs: !1 }; e.M = { id: r.OPS.setMiterLimit, numArgs: 1, variableArgs: !1 }; e.d = { id: r.OPS.setDash, numArgs: 2, variableArgs: !1 }; e.ri = { id: r.OPS.setRenderingIntent, numArgs: 1, variableArgs: !1 }; e.i = { id: r.OPS.setFlatness, numArgs: 1, variableArgs: !1 }; e.gs = { id: r.OPS.setGState, numArgs: 1, variableArgs: !1 }; e.q = { id: r.OPS.save, numArgs: 0, variableArgs: !1 }; e.Q = { id: r.OPS.restore, numArgs: 0, variableArgs: !1 }; e.cm = { id: r.OPS.transform, numArgs: 6, variableArgs: !1 }; e.m = { id: r.OPS.moveTo, numArgs: 2, variableArgs: !1 }; e.l = { id: r.OPS.lineTo, numArgs: 2, variableArgs: !1 }; e.c = { id: r.OPS.curveTo, numArgs: 6, variableArgs: !1 }; e.v = { id: r.OPS.curveTo2, numArgs: 4, variableArgs: !1 }; e.y = { id: r.OPS.curveTo3, numArgs: 4, variableArgs: !1 }; e.h = { id: r.OPS.closePath, numArgs: 0, variableArgs: !1 }; e.re = { id: r.OPS.rectangle, numArgs: 4, variableArgs: !1 }; e.S = { id: r.OPS.stroke, numArgs: 0, variableArgs: !1 }; e.s = { id: r.OPS.closeStroke, numArgs: 0, variableArgs: !1 }; e.f = { id: r.OPS.fill, numArgs: 0, variableArgs: !1 }; e.F = { id: r.OPS.fill, numArgs: 0, variableArgs: !1 }; e["f*"] = { id: r.OPS.eoFill, numArgs: 0, variableArgs: !1 }; e.B = { id: r.OPS.fillStroke, numArgs: 0, variableArgs: !1 }; e["B*"] = { id: r.OPS.eoFillStroke, numArgs: 0, variableArgs: !1 }; e.b = { id: r.OPS.closeFillStroke, numArgs: 0, variableArgs: !1 }; e["b*"] = { id: r.OPS.closeEOFillStroke, numArgs: 0, variableArgs: !1 }; e.n = { id: r.OPS.endPath, numArgs: 0, variableArgs: !1 }; e.W = { id: r.OPS.clip, numArgs: 0, variableArgs: !1 }; e["W*"] = { id: r.OPS.eoClip, numArgs: 0, variableArgs: !1 }; e.BT = { id: r.OPS.beginText, numArgs: 0, variableArgs: !1 }; e.ET = { id: r.OPS.endText, numArgs: 0, variableArgs: !1 }; e.Tc = { id: r.OPS.setCharSpacing, numArgs: 1, variableArgs: !1 }; e.Tw = { id: r.OPS.setWordSpacing, numArgs: 1, variableArgs: !1 }; e.Tz = { id: r.OPS.setHScale, numArgs: 1, variableArgs: !1 }; e.TL = { id: r.OPS.setLeading, numArgs: 1, variableArgs: !1 }; e.Tf = { id: r.OPS.setFont, numArgs: 2, variableArgs: !1 }; e.Tr = { id: r.OPS.setTextRenderingMode, numArgs: 1, variableArgs: !1 }; e.Ts = { id: r.OPS.setTextRise, numArgs: 1, variableArgs: !1 }; e.Td = { id: r.OPS.moveText, numArgs: 2, variableArgs: !1 }; e.TD = { id: r.OPS.setLeadingMoveText, numArgs: 2, variableArgs: !1 }; e.Tm = { id: r.OPS.setTextMatrix, numArgs: 6, variableArgs: !1 }; e["T*"] = { id: r.OPS.nextLine, numArgs: 0, variableArgs: !1 }; e.Tj = { id: r.OPS.showText, numArgs: 1, variableArgs: !1 }; e.TJ = { id: r.OPS.showSpacedText, numArgs: 1, variableArgs: !1 }; e["'"] = { id: r.OPS.nextLineShowText, numArgs: 1, variableArgs: !1 }; e['"'] = { id: r.OPS.nextLineSetSpacingShowText, numArgs: 3, variableArgs: !1 }; e.d0 = { id: r.OPS.setCharWidth, numArgs: 2, variableArgs: !1 }; e.d1 = { id: r.OPS.setCharWidthAndBounds, numArgs: 6, variableArgs: !1 }; e.CS = { id: r.OPS.setStrokeColorSpace, numArgs: 1, variableArgs: !1 }; e.cs = { id: r.OPS.setFillColorSpace, numArgs: 1, variableArgs: !1 }; e.SC = { id: r.OPS.setStrokeColor, numArgs: 4, variableArgs: !0 }; e.SCN = { id: r.OPS.setStrokeColorN, numArgs: 33, variableArgs: !0 }; e.sc = { id: r.OPS.setFillColor, numArgs: 4, variableArgs: !0 }; e.scn = { id: r.OPS.setFillColorN, numArgs: 33, variableArgs: !0 }; e.G = { id: r.OPS.setStrokeGray, numArgs: 1, variableArgs: !1 }; e.g = { id: r.OPS.setFillGray, numArgs: 1, variableArgs: !1 }; e.RG = { id: r.OPS.setStrokeRGBColor, numArgs: 3, variableArgs: !1 }; e.rg = { id: r.OPS.setFillRGBColor, numArgs: 3, variableArgs: !1 }; e.K = { id: r.OPS.setStrokeCMYKColor, numArgs: 4, variableArgs: !1 }; e.k = { id: r.OPS.setFillCMYKColor, numArgs: 4, variableArgs: !1 }; e.sh = { id: r.OPS.shadingFill, numArgs: 1, variableArgs: !1 }; e.BI = { id: r.OPS.beginInlineImage, numArgs: 0, variableArgs: !1 }; e.ID = { id: r.OPS.beginImageData, numArgs: 0, variableArgs: !1 }; e.EI = { id: r.OPS.endInlineImage, numArgs: 1, variableArgs: !1 }; e.Do = { id: r.OPS.paintXObject, numArgs: 1, variableArgs: !1 }; e.MP = { id: r.OPS.markPoint, numArgs: 1, variableArgs: !1 }; e.DP = { id: r.OPS.markPointProps, numArgs: 2, variableArgs: !1 }; e.BMC = { id: r.OPS.beginMarkedContent, numArgs: 1, variableArgs: !1 }; e.BDC = { id: r.OPS.beginMarkedContentProps, numArgs: 2, variableArgs: !1 }; e.EMC = { id: r.OPS.endMarkedContent, numArgs: 0, variableArgs: !1 }; e.BX = { id: r.OPS.beginCompat, numArgs: 0, variableArgs: !1 }; e.EX = { id: r.OPS.endCompat, numArgs: 0, variableArgs: !1 }; e.BM = null; e.BD = null; e.true = null; e.fa = null; e.fal = null; e.fals = null; e.false = null; e.nu = null; e.nul = null; e.null = null })); function t(t, a, r) { this.opMap = e(); this.parser = new d.Parser({ lexer: new d.Lexer(t, this.opMap), xref: a }); this.stateManager = r; this.nonProcessedArgs = []; this._numInvalidPathOPS = 0 } t.prototype = { get savedStatesDepth() { return this.stateManager.stateStack.length }, read: function (e) { for (var t = e.args; ;) { var a = this.parser.getObj(); if (a instanceof n.Cmd) { var i = a.cmd, s = this.opMap[i]; if (!s) { (0, r.warn)(`Unknown command "${i}".`); continue } var o = s.id, c = s.numArgs, l = null !== t ? t.length : 0; if (s.variableArgs) l > c && (0, r.info)(`Command ${i}: expected [0, ${c}] args, ` + `but received ${l} args.`); else { if (l !== c) { for (var h = this.nonProcessedArgs; l > c;) { h.push(t.shift()); l-- } for (; l < c && 0 !== h.length;) { null === t && (t = []); t.unshift(h.pop()); l++ } } if (l < c) { const e = `command ${i}: expected ${c} args, ` + `but received ${l} args.`; if (o >= r.OPS.moveTo && o <= r.OPS.endPath && ++this._numInvalidPathOPS > 20) throw new r.FormatError(`Invalid ${e}`); (0, r.warn)(`Skipping ${e}`); null !== t && (t.length = 0); continue } } this.preprocessCommand(o, t); e.fn = o; e.args = t; return !0 } if (a === n.EOF) return !1; if (null !== a) { null === t && (t = []); t.push(a); if (t.length > 33) throw new r.FormatError("Too many arguments") } } }, preprocessCommand: function (e, t) { switch (0 | e) { case r.OPS.save: this.stateManager.save(); break; case r.OPS.restore: this.stateManager.restore(); break; case r.OPS.transform: this.stateManager.transform(t) } } }; return t }() }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.CMapFactory = t.IdentityCMap = t.CMap = void 0; var r = a(2), i = a(4), n = a(10), s = a(7), o = a(11), c = ["Adobe-GB1-UCS2", "Adobe-CNS1-UCS2", "Adobe-Japan1-UCS2", "Adobe-Korea1-UCS2", "78-EUC-H", "78-EUC-V", "78-H", "78-RKSJ-H", "78-RKSJ-V", "78-V", "78ms-RKSJ-H", "78ms-RKSJ-V", "83pv-RKSJ-H", "90ms-RKSJ-H", "90ms-RKSJ-V", "90msp-RKSJ-H", "90msp-RKSJ-V", "90pv-RKSJ-H", "90pv-RKSJ-V", "Add-H", "Add-RKSJ-H", "Add-RKSJ-V", "Add-V", "Adobe-CNS1-0", "Adobe-CNS1-1", "Adobe-CNS1-2", "Adobe-CNS1-3", "Adobe-CNS1-4", "Adobe-CNS1-5", "Adobe-CNS1-6", "Adobe-GB1-0", "Adobe-GB1-1", "Adobe-GB1-2", "Adobe-GB1-3", "Adobe-GB1-4", "Adobe-GB1-5", "Adobe-Japan1-0", "Adobe-Japan1-1", "Adobe-Japan1-2", "Adobe-Japan1-3", "Adobe-Japan1-4", "Adobe-Japan1-5", "Adobe-Japan1-6", "Adobe-Korea1-0", "Adobe-Korea1-1", "Adobe-Korea1-2", "B5-H", "B5-V", "B5pc-H", "B5pc-V", "CNS-EUC-H", "CNS-EUC-V", "CNS1-H", "CNS1-V", "CNS2-H", "CNS2-V", "ETHK-B5-H", "ETHK-B5-V", "ETen-B5-H", "ETen-B5-V", "ETenms-B5-H", "ETenms-B5-V", "EUC-H", "EUC-V", "Ext-H", "Ext-RKSJ-H", "Ext-RKSJ-V", "Ext-V", "GB-EUC-H", "GB-EUC-V", "GB-H", "GB-V", "GBK-EUC-H", "GBK-EUC-V", "GBK2K-H", "GBK2K-V", "GBKp-EUC-H", "GBKp-EUC-V", "GBT-EUC-H", "GBT-EUC-V", "GBT-H", "GBT-V", "GBTpc-EUC-H", "GBTpc-EUC-V", "GBpc-EUC-H", "GBpc-EUC-V", "H", "HKdla-B5-H", "HKdla-B5-V", "HKdlb-B5-H", "HKdlb-B5-V", "HKgccs-B5-H", "HKgccs-B5-V", "HKm314-B5-H", "HKm314-B5-V", "HKm471-B5-H", "HKm471-B5-V", "HKscs-B5-H", "HKscs-B5-V", "Hankaku", "Hiragana", "KSC-EUC-H", "KSC-EUC-V", "KSC-H", "KSC-Johab-H", "KSC-Johab-V", "KSC-V", "KSCms-UHC-H", "KSCms-UHC-HW-H", "KSCms-UHC-HW-V", "KSCms-UHC-V", "KSCpc-EUC-H", "KSCpc-EUC-V", "Katakana", "NWP-H", "NWP-V", "RKSJ-H", "RKSJ-V", "Roman", "UniCNS-UCS2-H", "UniCNS-UCS2-V", "UniCNS-UTF16-H", "UniCNS-UTF16-V", "UniCNS-UTF32-H", "UniCNS-UTF32-V", "UniCNS-UTF8-H", "UniCNS-UTF8-V", "UniGB-UCS2-H", "UniGB-UCS2-V", "UniGB-UTF16-H", "UniGB-UTF16-V", "UniGB-UTF32-H", "UniGB-UTF32-V", "UniGB-UTF8-H", "UniGB-UTF8-V", "UniJIS-UCS2-H", "UniJIS-UCS2-HW-H", "UniJIS-UCS2-HW-V", "UniJIS-UCS2-V", "UniJIS-UTF16-H", "UniJIS-UTF16-V", "UniJIS-UTF32-H", "UniJIS-UTF32-V", "UniJIS-UTF8-H", "UniJIS-UTF8-V", "UniJIS2004-UTF16-H", "UniJIS2004-UTF16-V", "UniJIS2004-UTF32-H", "UniJIS2004-UTF32-V", "UniJIS2004-UTF8-H", "UniJIS2004-UTF8-V", "UniJISPro-UCS2-HW-V", "UniJISPro-UCS2-V", "UniJISPro-UTF8-V", "UniJISX0213-UTF32-H", "UniJISX0213-UTF32-V", "UniJISX02132004-UTF32-H", "UniJISX02132004-UTF32-V", "UniKS-UCS2-H", "UniKS-UCS2-V", "UniKS-UTF16-H", "UniKS-UTF16-V", "UniKS-UTF32-H", "UniKS-UTF32-V", "UniKS-UTF8-H", "UniKS-UTF8-V", "V", "WP-Symbol"]; class l { constructor(e = !1) { this.codespaceRanges = [[], [], [], []]; this.numCodespaceRanges = 0; this._map = []; this.name = ""; this.vertical = !1; this.useCMap = null; this.builtInCMap = e } addCodespaceRange(e, t, a) { this.codespaceRanges[e - 1].push(t, a); this.numCodespaceRanges++ } mapCidRange(e, t, a) { for (; e <= t;)this._map[e++] = a++ } mapBfRange(e, t, a) { for (var r = a.length - 1; e <= t;) { this._map[e++] = a; a = a.substring(0, r) + String.fromCharCode(a.charCodeAt(r) + 1) } } mapBfRangeToArray(e, t, a) { const r = a.length; let i = 0; for (; e <= t && i < r;) { this._map[e] = a[i++]; ++e } } mapOne(e, t) { this._map[e] = t } lookup(e) { return this._map[e] } contains(e) { return void 0 !== this._map[e] } forEach(e) { const t = this._map, a = t.length; if (a <= 65536) for (let r = 0; r < a; r++)void 0 !== t[r] && e(r, t[r]); else for (const a in t) e(a, t[a]) } charCodeOf(e) { const t = this._map; if (t.length <= 65536) return t.indexOf(e); for (const a in t) if (t[a] === e) return 0 | a; return -1 } getMap() { return this._map } readCharCode(e, t, a) { let r = 0; const i = this.codespaceRanges; for (let n = 0, s = i.length; n < s; n++) { r = (r << 8 | e.charCodeAt(t + n)) >>> 0; const s = i[n]; for (let e = 0, t = s.length; e < t;) { const t = s[e++], i = s[e++]; if (r >= t && r <= i) { a.charcode = r; a.length = n + 1; return } } } a.charcode = 0; a.length = 1 } get length() { return this._map.length } get isIdentityCMap() { if ("Identity-H" !== this.name && "Identity-V" !== this.name) return !1; if (65536 !== this._map.length) return !1; for (let e = 0; e < 65536; e++)if (this._map[e] !== e) return !1; return !0 } } t.CMap = l; class h extends l { constructor(e, t) { super(); this.vertical = e; this.addCodespaceRange(t, 0, 65535) } mapCidRange(e, t, a) { (0, r.unreachable)("should not call mapCidRange") } mapBfRange(e, t, a) { (0, r.unreachable)("should not call mapBfRange") } mapBfRangeToArray(e, t, a) { (0, r.unreachable)("should not call mapBfRangeToArray") } mapOne(e, t) { (0, r.unreachable)("should not call mapCidOne") } lookup(e) { return Number.isInteger(e) && e <= 65535 ? e : void 0 } contains(e) { return Number.isInteger(e) && e <= 65535 } forEach(e) { for (let t = 0; t <= 65535; t++)e(t, t) } charCodeOf(e) { return Number.isInteger(e) && e <= 65535 ? e : -1 } getMap() { const e = new Array(65536); for (let t = 0; t <= 65535; t++)e[t] = t; return e } get length() { return 65536 } get isIdentityCMap() { (0, r.unreachable)("should not access .isIdentityCMap") } } t.IdentityCMap = h; var u = function () { function e(e, t) { for (var a = 0, r = 0; r <= t; r++)a = a << 8 | e[r]; return a >>> 0 } function t(e, t) { return 1 === t ? String.fromCharCode(e[0], e[1]) : 3 === t ? String.fromCharCode(e[0], e[1], e[2], e[3]) : String.fromCharCode.apply(null, e.subarray(0, t + 1)) } function a(e, t, a) { for (var r = 0, i = a; i >= 0; i--) { r += e[i] + t[i]; e[i] = 255 & r; r >>= 8 } } function i(e, t) { for (var a = 1, r = t; r >= 0 && a > 0; r--) { a += e[r]; e[r] = 255 & a; a >>= 8 } } function n(e) { this.buffer = e; this.pos = 0; this.end = e.length; this.tmpBuf = new Uint8Array(19) } n.prototype = { readByte() { return this.pos >= this.end ? -1 : this.buffer[this.pos++] }, readNumber() { var e, t = 0; do { var a = this.readByte(); if (a < 0) throw new r.FormatError("unexpected EOF in bcmap"); e = !(128 & a); t = t << 7 | 127 & a } while (!e); return t }, readSigned() { var e = this.readNumber(); return 1 & e ? ~(e >>> 1) : e >>> 1 }, readHex(e, t) { e.set(this.buffer.subarray(this.pos, this.pos + t + 1)); this.pos += t + 1 }, readHexNumber(e, t) { var a, i = this.tmpBuf, n = 0; do { var s = this.readByte(); if (s < 0) throw new r.FormatError("unexpected EOF in bcmap"); a = !(128 & s); i[n++] = 127 & s } while (!a); for (var o = t, c = 0, l = 0; o >= 0;) { for (; l < 8 && i.length > 0;) { c = i[--n] << l | c; l += 7 } e[o] = 255 & c; o--; c >>= 8; l -= 8 } }, readHexSigned(e, t) { this.readHexNumber(e, t); for (var a = 1 & e[t] ? 255 : 0, r = 0, i = 0; i <= t; i++) { r = (1 & r) << 8 | e[i]; e[i] = r >> 1 ^ a } }, readString() { for (var e = this.readNumber(), t = "", a = 0; a < e; a++)t += String.fromCharCode(this.readNumber()); return t } }; function s() { } s.prototype = { process: function (r, s, o) { return new Promise((function (c, l) { var h = new n(r), u = h.readByte(); s.vertical = !!(1 & u); for (var d, f, g = null, m = new Uint8Array(16), p = new Uint8Array(16), b = new Uint8Array(16), y = new Uint8Array(16), v = new Uint8Array(16); (f = h.readByte()) >= 0;) { var w = f >> 5; if (7 !== w) { var k = !!(16 & f), S = 15 & f; if (S + 1 > 16) throw new Error("processBinaryCMap: Invalid dataSize."); var C, x = h.readNumber(); switch (w) { case 0: h.readHex(m, S); h.readHexNumber(p, S); a(p, m, S); s.addCodespaceRange(S + 1, e(m, S), e(p, S)); for (C = 1; C < x; C++) { i(p, S); h.readHexNumber(m, S); a(m, p, S); h.readHexNumber(p, S); a(p, m, S); s.addCodespaceRange(S + 1, e(m, S), e(p, S)) } break; case 1: h.readHex(m, S); h.readHexNumber(p, S); a(p, m, S); h.readNumber(); for (C = 1; C < x; C++) { i(p, S); h.readHexNumber(m, S); a(m, p, S); h.readHexNumber(p, S); a(p, m, S); h.readNumber() } break; case 2: h.readHex(b, S); d = h.readNumber(); s.mapOne(e(b, S), d); for (C = 1; C < x; C++) { i(b, S); if (!k) { h.readHexNumber(v, S); a(b, v, S) } d = h.readSigned() + (d + 1); s.mapOne(e(b, S), d) } break; case 3: h.readHex(m, S); h.readHexNumber(p, S); a(p, m, S); d = h.readNumber(); s.mapCidRange(e(m, S), e(p, S), d); for (C = 1; C < x; C++) { i(p, S); if (k) m.set(p); else { h.readHexNumber(m, S); a(m, p, S) } h.readHexNumber(p, S); a(p, m, S); d = h.readNumber(); s.mapCidRange(e(m, S), e(p, S), d) } break; case 4: h.readHex(b, 1); h.readHex(y, S); s.mapOne(e(b, 1), t(y, S)); for (C = 1; C < x; C++) { i(b, 1); if (!k) { h.readHexNumber(v, 1); a(b, v, 1) } i(y, S); h.readHexSigned(v, S); a(y, v, S); s.mapOne(e(b, 1), t(y, S)) } break; case 5: h.readHex(m, 1); h.readHexNumber(p, 1); a(p, m, 1); h.readHex(y, S); s.mapBfRange(e(m, 1), e(p, 1), t(y, S)); for (C = 1; C < x; C++) { i(p, 1); if (k) m.set(p); else { h.readHexNumber(m, 1); a(m, p, 1) } h.readHexNumber(p, 1); a(p, m, 1); h.readHex(y, S); s.mapBfRange(e(m, 1), e(p, 1), t(y, S)) } break; default: l(new Error("processBinaryCMap: Unknown type: " + w)); return } } else switch (31 & f) { case 0: h.readString(); break; case 1: g = h.readString() } } c(g ? o(g) : s) })) } }; return s }(), d = function () { function e(e) { for (var t = 0, a = 0; a < e.length; a++)t = t << 8 | e.charCodeAt(a); return t >>> 0 } function t(e) { if (!(0, r.isString)(e)) throw new r.FormatError("Malformed CMap: expected string.") } function a(e) { if (!Number.isInteger(e)) throw new r.FormatError("Malformed CMap: expected int.") } function d(a, r) { for (; ;) { var n = r.getObj(); if ((0, i.isEOF)(n)) break; if ((0, i.isCmd)(n, "endbfchar")) return; t(n); var s = e(n); t(n = r.getObj()); var o = n; a.mapOne(s, o) } } function f(a, n) { for (; ;) { var s = n.getObj(); if ((0, i.isEOF)(s)) break; if ((0, i.isCmd)(s, "endbfrange")) return; t(s); var o = e(s); t(s = n.getObj()); var c = e(s); s = n.getObj(); if (Number.isInteger(s) || (0, r.isString)(s)) { var l = Number.isInteger(s) ? String.fromCharCode(s) : s; a.mapBfRange(o, c, l) } else { if (!(0, i.isCmd)(s, "[")) break; s = n.getObj(); for (var h = []; !(0, i.isCmd)(s, "]") && !(0, i.isEOF)(s);) { h.push(s); s = n.getObj() } a.mapBfRangeToArray(o, c, h) } } throw new r.FormatError("Invalid bf range.") } function g(r, n) { for (; ;) { var s = n.getObj(); if ((0, i.isEOF)(s)) break; if ((0, i.isCmd)(s, "endcidchar")) return; t(s); var o = e(s); a(s = n.getObj()); var c = s; r.mapOne(o, c) } } function m(r, n) { for (; ;) { var s = n.getObj(); if ((0, i.isEOF)(s)) break; if ((0, i.isCmd)(s, "endcidrange")) return; t(s); var o = e(s); t(s = n.getObj()); var c = e(s); a(s = n.getObj()); var l = s; r.mapCidRange(o, c, l) } } function p(t, a) { for (; ;) { var n = a.getObj(); if ((0, i.isEOF)(n)) break; if ((0, i.isCmd)(n, "endcodespacerange")) return; if (!(0, r.isString)(n)) break; var s = e(n); n = a.getObj(); if (!(0, r.isString)(n)) break; var o = e(n); t.addCodespaceRange(n.length, s, o) } throw new r.FormatError("Invalid codespace range.") } function b(e, t) { var a = t.getObj(); Number.isInteger(a) && (e.vertical = !!a) } function y(e, t) { var a = t.getObj(); (0, i.isName)(a) && (0, r.isString)(a.name) && (e.name = a.name) } function v(e, t, a, n) { var o, c; e: for (; ;)try { var l = t.getObj(); if ((0, i.isEOF)(l)) break; if ((0, i.isName)(l)) { "WMode" === l.name ? b(e, t) : "CMapName" === l.name && y(e, t); o = l } else if ((0, i.isCmd)(l)) switch (l.cmd) { case "endcmap": break e; case "usecmap": (0, i.isName)(o) && (c = o.name); break; case "begincodespacerange": p(e, t); break; case "beginbfchar": d(e, t); break; case "begincidchar": g(e, t); break; case "beginbfrange": f(e, t); break; case "begincidrange": m(e, t) } } catch (e) { if (e instanceof s.MissingDataException) throw e; (0, r.warn)("Invalid cMap data: " + e); continue } !n && c && (n = c); return n ? w(e, a, n) : Promise.resolve(e) } function w(e, t, a) { return k(a, t).then((function (t) { e.useCMap = t; if (0 === e.numCodespaceRanges) { for (var a = e.useCMap.codespaceRanges, r = 0; r < a.length; r++)e.codespaceRanges[r] = a[r].slice(); e.numCodespaceRanges = e.useCMap.numCodespaceRanges } e.useCMap.forEach((function (t, a) { e.contains(t) || e.mapOne(t, e.useCMap.lookup(t)) })); return e })) } function k(e, t) { return "Identity-H" === e ? Promise.resolve(new h(!1, 2)) : "Identity-V" === e ? Promise.resolve(new h(!0, 2)) : c.includes(e) ? t ? t(e).then((function (e) { var a = e.cMapData, i = e.compressionType, s = new l(!0); if (i === r.CMapCompressionType.BINARY) return (new u).process(a, s, (function (e) { return w(s, t, e) })); if (i === r.CMapCompressionType.NONE) { var c = new n.Lexer(new o.Stream(a)); return v(s, c, t, null) } return Promise.reject(new Error("TODO: Only BINARY/NONE CMap compression is currently supported.")) })) : Promise.reject(new Error("Built-in CMap parameters are not provided.")) : Promise.reject(new Error("Unknown CMap name: " + e)) } return { async create(e) { var t = e.encoding, a = e.fetchBuiltInCMap, r = e.useCMap; if ((0, i.isName)(t)) return k(t.name, a); if ((0, i.isStream)(t)) { return v(new l, new n.Lexer(t), a, r).then((function (e) { return e.isIdentityCMap ? k(e.name, a) : e })) } throw new Error("Encoding required.") } } }(); t.CMapFactory = d }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.getFontType = y; t.IdentityToUnicodeMap = t.ToUnicodeMap = t.FontFlags = t.Font = t.ErrorFont = t.SEAC_ANALYSIS_ENABLED = void 0; var r = a(2), i = a(28), n = a(31), s = a(30), o = a(32), c = a(33), l = a(7), h = a(34), u = a(26), d = a(11), f = a(35); const g = [[57344, 63743], [1048576, 1114109]]; t.SEAC_ANALYSIS_ENABLED = !0; var m = { FixedPitch: 1, Serif: 2, Symbolic: 4, Script: 8, Nonsymbolic: 32, Italic: 64, AllCap: 65536, SmallCap: 131072, ForceBold: 262144 }; t.FontFlags = m; var p = [".notdef", ".null", "nonmarkingreturn", "space", "exclam", "quotedbl", "numbersign", "dollar", "percent", "ampersand", "quotesingle", "parenleft", "parenright", "asterisk", "plus", "comma", "hyphen", "period", "slash", "zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "colon", "semicolon", "less", "equal", "greater", "question", "at", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "bracketleft", "backslash", "bracketright", "asciicircum", "underscore", "grave", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "braceleft", "bar", "braceright", "asciitilde", "Adieresis", "Aring", "Ccedilla", "Eacute", "Ntilde", "Odieresis", "Udieresis", "aacute", "agrave", "acircumflex", "adieresis", "atilde", "aring", "ccedilla", "eacute", "egrave", "ecircumflex", "edieresis", "iacute", "igrave", "icircumflex", "idieresis", "ntilde", "oacute", "ograve", "ocircumflex", "odieresis", "otilde", "uacute", "ugrave", "ucircumflex", "udieresis", "dagger", "degree", "cent", "sterling", "section", "bullet", "paragraph", "germandbls", "registered", "copyright", "trademark", "acute", "dieresis", "notequal", "AE", "Oslash", "infinity", "plusminus", "lessequal", "greaterequal", "yen", "mu", "partialdiff", "summation", "product", "pi", "integral", "ordfeminine", "ordmasculine", "Omega", "ae", "oslash", "questiondown", "exclamdown", "logicalnot", "radical", "florin", "approxequal", "Delta", "guillemotleft", "guillemotright", "ellipsis", "nonbreakingspace", "Agrave", "Atilde", "Otilde", "OE", "oe", "endash", "emdash", "quotedblleft", "quotedblright", "quoteleft", "quoteright", "divide", "lozenge", "ydieresis", "Ydieresis", "fraction", "currency", "guilsinglleft", "guilsinglright", "fi", "fl", "daggerdbl", "periodcentered", "quotesinglbase", "quotedblbase", "perthousand", "Acircumflex", "Ecircumflex", "Aacute", "Edieresis", "Egrave", "Iacute", "Icircumflex", "Idieresis", "Igrave", "Oacute", "Ocircumflex", "apple", "Ograve", "Uacute", "Ucircumflex", "Ugrave", "dotlessi", "circumflex", "tilde", "macron", "breve", "dotaccent", "ring", "cedilla", "hungarumlaut", "ogonek", "caron", "Lslash", "lslash", "Scaron", "scaron", "Zcaron", "zcaron", "brokenbar", "Eth", "eth", "Yacute", "yacute", "Thorn", "thorn", "minus", "multiply", "onesuperior", "twosuperior", "threesuperior", "onehalf", "onequarter", "threequarters", "franc", "Gbreve", "gbreve", "Idotaccent", "Scedilla", "scedilla", "Cacute", "cacute", "Ccaron", "ccaron", "dcroat"]; function b(e) { if (e.fontMatrix && e.fontMatrix[0] !== r.FONT_IDENTITY_MATRIX[0]) { var t = .001 / e.fontMatrix[0], a = e.widths; for (var i in a) a[i] *= t; e.defaultWidth *= t } } function y(e, t) { switch (e) { case "Type1": return "Type1C" === t ? r.FontType.TYPE1C : r.FontType.TYPE1; case "CIDFontType0": return "CIDFontType0C" === t ? r.FontType.CIDFONTTYPE0C : r.FontType.CIDFONTTYPE0; case "OpenType": return r.FontType.OPENTYPE; case "TrueType": return r.FontType.TRUETYPE; case "CIDFontType2": return r.FontType.CIDFONTTYPE2; case "MMType1": return r.FontType.MMTYPE1; case "Type0": return r.FontType.TYPE0; default: return r.FontType.UNKNOWN } } function v(e, t) { if (void 0 !== t[e]) return e; var a = (0, c.getUnicodeForGlyph)(e, t); if (-1 !== a) for (var i in t) if (t[i] === a) return i; (0, r.info)("Unable to recover a standard glyph name for: " + e); return e } var w = function () { function e(e, t, a, r, i, n, s, o) { this.fontChar = e; this.unicode = t; this.accent = a; this.width = r; this.vmetric = i; this.operatorListId = n; this.isSpace = s; this.isInFont = o } e.prototype.matchesForCache = function (e, t, a, r, i, n, s, o) { return this.fontChar === e && this.unicode === t && this.accent === a && this.width === r && this.vmetric === i && this.operatorListId === n && this.isSpace === s && this.isInFont === o }; return e }(), k = function () { function e(e = []) { this._map = e } e.prototype = { get length() { return this._map.length }, forEach(e) { for (var t in this._map) e(t, this._map[t].charCodeAt(0)) }, has(e) { return void 0 !== this._map[e] }, get(e) { return this._map[e] }, charCodeOf(e) { const t = this._map; if (t.length <= 65536) return t.indexOf(e); for (const a in t) if (t[a] === e) return 0 | a; return -1 }, amend(e) { for (var t in e) this._map[t] = e[t] } }; return e }(); t.ToUnicodeMap = k; var S = function () { function e(e, t) { this.firstChar = e; this.lastChar = t } e.prototype = { get length() { return this.lastChar + 1 - this.firstChar }, forEach(e) { for (var t = this.firstChar, a = this.lastChar; t <= a; t++)e(t, t) }, has(e) { return this.firstChar <= e && e <= this.lastChar }, get(e) { if (this.firstChar <= e && e <= this.lastChar) return String.fromCharCode(e) }, charCodeOf(e) { return Number.isInteger(e) && e >= this.firstChar && e <= this.lastChar ? e : -1 }, amend(e) { (0, r.unreachable)("Should not call amend()") } }; return e }(); t.IdentityToUnicodeMap = S; var C = function () { function e(e, t, a) { e[t] = a >> 8 & 255; e[t + 1] = 255 & a } function t(e, t, a) { e[t] = a >> 24 & 255; e[t + 1] = a >> 16 & 255; e[t + 2] = a >> 8 & 255; e[t + 3] = 255 & a } function a(e, t, a) { var r, i; if (a instanceof Uint8Array) e.set(a, t); else if ("string" == typeof a) for (r = 0, i = a.length; r < i; r++)e[t++] = 255 & a.charCodeAt(r); else for (r = 0, i = a.length; r < i; r++)e[t++] = 255 & a[r] } function i(e) { this.sfnt = e; this.tables = Object.create(null) } i.getSearchParams = function (e, t) { for (var a = 1, r = 0; (a ^ e) > a;) { a <<= 1; r++ } var i = a * t; return { range: i, entry: r, rangeShift: t * e - i } }; i.prototype = { toArray: function () { var n = this.sfnt, s = this.tables, o = Object.keys(s); o.sort(); var c, h, u, d, f, g = o.length, m = 12 + 16 * g, p = [m]; for (c = 0; c < g; c++) { m += ((d = s[o[c]]).length + 3 & -4) >>> 0; p.push(m) } var b = new Uint8Array(m); for (c = 0; c < g; c++) { d = s[o[c]]; a(b, p[c], d) } "true" === n && (n = (0, r.string32)(65536)); b[0] = 255 & n.charCodeAt(0); b[1] = 255 & n.charCodeAt(1); b[2] = 255 & n.charCodeAt(2); b[3] = 255 & n.charCodeAt(3); e(b, 4, g); var y = i.getSearchParams(g, 16); e(b, 6, y.range); e(b, 8, y.entry); e(b, 10, y.rangeShift); m = 12; for (c = 0; c < g; c++) { f = o[c]; b[m] = 255 & f.charCodeAt(0); b[m + 1] = 255 & f.charCodeAt(1); b[m + 2] = 255 & f.charCodeAt(2); b[m + 3] = 255 & f.charCodeAt(3); var v = 0; for (h = p[c], u = p[c + 1]; h < u; h += 4) { v = v + (0, l.readUint32)(b, h) >>> 0 } t(b, m + 4, v); t(b, m + 8, p[c]); t(b, m + 12, s[f].length); m += 16 } return b }, addTable: function (e, t) { if (e in this.tables) throw new Error("Table " + e + " already exists"); this.tables[e] = t } }; return i }(), x = function () { function e(e, t, a) { var i; this.name = e; this.loadedName = a.loadedName; this.isType3Font = a.isType3Font; this.sizes = []; this.missingFile = !1; this.glyphCache = Object.create(null); this.isSerifFont = !!(a.flags & m.Serif); this.isSymbolicFont = !!(a.flags & m.Symbolic); this.isMonospace = !!(a.flags & m.FixedPitch); var n = a.type, s = a.subtype; this.type = n; this.subtype = s; let o = "sans-serif"; this.isMonospace ? o = "monospace" : this.isSerifFont && (o = "serif"); this.fallbackName = o; this.differences = a.differences; this.widths = a.widths; this.defaultWidth = a.defaultWidth; this.composite = a.composite; this.wideChars = a.wideChars; this.cMap = a.cMap; this.ascent = a.ascent / 1e3; this.descent = a.descent / 1e3; this.fontMatrix = a.fontMatrix; this.bbox = a.bbox; this.defaultEncoding = a.defaultEncoding; this.toUnicode = a.toUnicode; this.fallbackToUnicode = a.fallbackToUnicode || new k; this.toFontChar = []; if ("Type3" !== a.type) { this.cidEncoding = a.cidEncoding; this.vertical = a.vertical; if (this.vertical) { this.vmetrics = a.vmetrics; this.defaultVMetrics = a.defaultVMetrics } if (t && !t.isEmpty) { [n, s] = function (e, { type: t, subtype: a, composite: i }) { let n, s; if (function (e) { var t = e.peekBytes(4); return 65536 === (0, l.readUint32)(t, 0) || "true" === (0, r.bytesToString)(t) }(e) || I(e)) n = i ? "CIDFontType2" : "TrueType"; else if (function (e) { var t = e.peekBytes(4); return "OTTO" === (0, r.bytesToString)(t) }(e)) n = i ? "CIDFontType2" : "OpenType"; else if (function (e) { var t = e.peekBytes(2); if (37 === t[0] && 33 === t[1]) return !0; if (128 === t[0] && 1 === t[1]) return !0; return !1 }(e)) n = i ? "CIDFontType0" : "MMType1" === t ? "MMType1" : "Type1"; else if (function (e) { const t = e.peekBytes(4); if (t[0] >= 1 && t[3] >= 1 && t[3] <= 4) return !0; return !1 }(e)) if (i) { n = "CIDFontType0"; s = "CIDFontType0C" } else { n = "MMType1" === t ? "MMType1" : "Type1"; s = "Type1C" } else { (0, r.warn)("getFontFileType: Unable to detect correct font file Type/Subtype."); n = t; s = a } return [n, s] }(t, a); n === this.type && s === this.subtype || (0, r.info)("Inconsistent font file Type/SubType, expected: " + `${this.type}/${this.subtype} but found: ${n}/${s}.`); try { var c; switch (n) { case "MMType1": (0, r.info)("MMType1 font (" + e + "), falling back to Type1."); case "Type1": case "CIDFontType0": this.mimetype = "font/opentype"; var h = "Type1C" === s || "CIDFontType0C" === s ? new T(t, a) : new F(e, t, a); b(a); c = this.convert(e, h, a); break; case "OpenType": case "TrueType": case "CIDFontType2": this.mimetype = "font/opentype"; c = this.checkAndRepair(e, t, a); if (this.isOpenType) { b(a); n = "OpenType" } break; default: throw new r.FormatError(`Font ${n} is not supported`) } } catch (e) { (0, r.warn)(e); this.fallbackToSystemFont(); return } this.data = c; this.fontType = y(n, s); this.fontMatrix = a.fontMatrix; this.widths = a.widths; this.defaultWidth = a.defaultWidth; this.toUnicode = a.toUnicode; this.encoding = a.baseEncoding; this.seacMap = a.seacMap } else { t && (0, r.warn)('Font file is empty in "' + e + '" (' + this.loadedName + ")"); this.fallbackToSystemFont() } } else { for (i = 0; i < 256; i++)this.toFontChar[i] = this.differences[i] || a.defaultEncoding[i]; this.fontType = r.FontType.TYPE3 } } e.getFontID = (t = 1, function () { return String(t++) }); var t; function a(e, t) { return (e << 8) + t } function f(e, t) { var a = (e << 8) + t; return 32768 & a ? a - 65536 : a } function x(e) { return String.fromCharCode(e >> 8 & 255, 255 & e) } function A(e) { e > 32767 ? e = 32767 : e < -32768 && (e = -32768); return String.fromCharCode(e >> 8 & 255, 255 & e) } function I(e) { const t = e.peekBytes(4); return "ttcf" === (0, r.bytesToString)(t) } function E(e, t, a) { for (var r, i = [], n = 0, s = e.length; n < s; n++)-1 !== (r = (0, c.getUnicodeForGlyph)(e[n], t)) && (i[n] = r); for (var o in a) -1 !== (r = (0, c.getUnicodeForGlyph)(a[o], t)) && (i[+o] = r); return i } function O(e, t, a) { var i = Object.create(null), n = [], s = 0, o = g[s][0], c = g[s][1]; for (var l in e) { var h = e[l |= 0]; if (t(h)) { if (o > c) { if (++s >= g.length) { (0, r.warn)("Ran out of space in font private use area."); break } o = g[s][0]; c = g[s][1] } var u = o++; 0 === h && (h = a); i[u] = h; n[l] = u } } return { toFontChar: n, charCodeToGlyphId: i, nextAvailableFontCharCode: o } } function P(e, t) { var a, i, n, s, o = function (e, t) { var a = []; for (var r in e) e[r] >= t || a.push({ fontCharCode: 0 | r, glyphId: e[r] }); 0 === a.length && a.push({ fontCharCode: 0, glyphId: 0 }); a.sort((function (e, t) { return e.fontCharCode - t.fontCharCode })); for (var i = [], n = a.length, s = 0; s < n;) { var o = a[s].fontCharCode, c = [a[s].glyphId]; ++s; for (var l = o; s < n && l + 1 === a[s].fontCharCode;) { c.push(a[s].glyphId); ++s; if (65535 === ++l) break } i.push([o, l, c]) } return i }(e, t), c = o[o.length - 1][1] > 65535 ? 2 : 1, l = "\0\0" + x(c) + "\0\0" + (0, r.string32)(4 + 8 * c); for (a = o.length - 1; a >= 0 && !(o[a][0] <= 65535); --a); var h = a + 1; o[a][0] < 65535 && 65535 === o[a][1] && (o[a][1] = 65534); var u, d, f, g, m = o[a][1] < 65535 ? 1 : 0, p = h + m, b = C.getSearchParams(p, 2), y = "", v = "", w = "", k = "", S = "", A = 0; for (a = 0, i = h; a < i; a++) { d = (u = o[a])[0]; f = u[1]; y += x(d); v += x(f); var I = !0; for (n = 1, s = (g = u[2]).length; n < s; ++n)if (g[n] !== g[n - 1] + 1) { I = !1; break } if (I) { w += x(g[0] - d & 65535); k += x(0) } else { var F = 2 * (p - a) + 2 * A; A += f - d + 1; w += x(0); k += x(F); for (n = 0, s = g.length; n < s; ++n)S += x(g[n]) } } if (m > 0) { v += "ÿÿ"; y += "ÿÿ"; w += "\0"; k += "\0\0" } var T = "\0\0" + x(2 * p) + x(b.range) + x(b.entry) + x(b.rangeShift) + v + "\0\0" + y + w + k + S, E = "", O = ""; if (c > 1) { l += "\0\0\n" + (0, r.string32)(4 + 8 * c + 4 + T.length); E = ""; for (a = 0, i = o.length; a < i; a++) { d = (u = o[a])[0]; var P = (g = u[2])[0]; for (n = 1, s = g.length; n < s; ++n)if (g[n] !== g[n - 1] + 1) { f = u[0] + n - 1; E += (0, r.string32)(d) + (0, r.string32)(f) + (0, r.string32)(P); d = f + 1; P = g[n] } E += (0, r.string32)(d) + (0, r.string32)(u[1]) + (0, r.string32)(P) } O = "\0\f\0\0" + (0, r.string32)(E.length + 16) + "\0\0\0\0" + (0, r.string32)(E.length / 12) } return l + "\0" + x(T.length + 4) + T + O + E } function B(e, t, a) { a = a || { unitsPerEm: 0, yMax: 0, yMin: 0, ascent: 0, descent: 0 }; var i = 0, n = 0, s = 0, o = 0, l = null, h = 0; if (t) { for (var u in t) { (l > (u |= 0) || !l) && (l = u); h < u && (h = u); var d = (0, c.getUnicodeRangeFor)(u); if (d < 32) i |= 1 << d; else if (d < 64) n |= 1 << d - 32; else if (d < 96) s |= 1 << d - 64; else { if (!(d < 123)) throw new r.FormatError("Unicode ranges Bits > 123 are reserved for internal usage"); o |= 1 << d - 96 } } h > 65535 && (h = 65535) } else { l = 0; h = 255 } var f = e.bbox || [0, 0, 0, 0], g = a.unitsPerEm || 1 / (e.fontMatrix || r.FONT_IDENTITY_MATRIX)[0], m = e.ascentScaled ? 1 : g / 1e3, p = a.ascent || Math.round(m * (e.ascent || f[3])), b = a.descent || Math.round(m * (e.descent || f[1])); b > 0 && e.descent > 0 && f[1] < 0 && (b = -b); var y = a.yMax || p, v = -a.yMin || -b; return "\0$ô\0\0\0»\0\0\0»\0\0ß\x001\0\0\0\0" + String.fromCharCode(e.fixedPitch ? 9 : 0) + "\0\0\0\0\0\0" + (0, r.string32)(i) + (0, r.string32)(n) + (0, r.string32)(s) + (0, r.string32)(o) + "*21*" + x(e.italicAngle ? 1 : 0) + x(l || e.firstChar) + x(h || e.lastChar) + x(p) + x(b) + "\0d" + x(y) + x(v) + "\0\0\0\0\0\0\0\0" + x(e.xHeight) + x(e.capHeight) + x(0) + x(l || e.firstChar) + "\0" } function D(e) { var t = Math.floor(65536 * e.italicAngle); return "\0\0\0" + (0, r.string32)(t) + "\0\0\0\0" + (0, r.string32)(e.fixedPitch) + "\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0" } function N(e, t) { t || (t = [[], []]); var a, r, i, n, s, o = [t[0][0] || "Original licence", t[0][1] || e, t[0][2] || "Unknown", t[0][3] || "uniqueID", t[0][4] || e, t[0][5] || "Version 0.11", t[0][6] || "", t[0][7] || "Unknown", t[0][8] || "Unknown", t[0][9] || "Unknown"], c = []; for (a = 0, r = o.length; a < r; a++) { var l = []; for (i = 0, n = (s = t[1][a] || o[a]).length; i < n; i++)l.push(x(s.charCodeAt(i))); c.push(l.join("")) } var h = [o, c], u = ["\0", "\0"], d = ["\0\0", "\0"], f = ["\0\0", "\t"], g = o.length * u.length, m = "\0\0" + x(g) + x(12 * g + 6), p = 0; for (a = 0, r = u.length; a < r; a++) { var b = h[a]; for (i = 0, n = b.length; i < n; i++) { s = b[i]; m += u[a] + d[a] + f[a] + x(i) + x(s.length) + x(p); p += s.length } } return m += o.join("") + c.join("") } e.prototype = { name: null, font: null, mimetype: null, encoding: null, disableFontFace: !1, get renderer() { var e = h.FontRendererFactory.create(this, !0); return (0, r.shadow)(this, "renderer", e) }, exportData: function () { var e = {}; for (var t in this) this.hasOwnProperty(t) && (e[t] = this[t]); return e }, fallbackToSystemFont: function () { this.missingFile = !0; var e, t, a = this.name, i = this.type, l = this.subtype; let h = a.replace(/[,_]/g, "-").replace(/\s/g, ""); var u = (0, o.getStdFontMap)(), d = (0, o.getNonStdFontMap)(), f = !!u[h] || !(!d[h] || !u[d[h]]); h = u[h] || d[h] || h; this.bold = -1 !== h.search(/bold/gi); this.italic = -1 !== h.search(/oblique/gi) || -1 !== h.search(/italic/gi); this.black = -1 !== a.search(/Black/g); this.remeasure = Object.keys(this.widths).length > 0; if (f && "CIDFontType2" === i && this.cidEncoding.startsWith("Identity-")) { const t = (0, o.getGlyphMapForStandardFonts)(), r = []; for (e in t) r[+e] = t[e]; if (/Arial-?Black/i.test(a)) { var g = (0, o.getSupplementalGlyphMapForArialBlack)(); for (e in g) r[+e] = g[e] } else if (/Calibri/i.test(a)) { const t = (0, o.getSupplementalGlyphMapForCalibri)(); for (e in t) r[+e] = t[e] } this.toUnicode instanceof S || this.toUnicode.forEach((function (e, t) { r[+e] = t })); this.toFontChar = r; this.toUnicode = new k(r) } else if (/Symbol/i.test(h)) this.toFontChar = E(s.SymbolSetEncoding, (0, n.getGlyphsUnicode)(), this.differences); else if (/Dingbats/i.test(h)) { /Wingdings/i.test(a) && (0, r.warn)("Non-embedded Wingdings font, falling back to ZapfDingbats."); this.toFontChar = E(s.ZapfDingbatsEncoding, (0, n.getDingbatsGlyphsUnicode)(), this.differences) } else if (f) this.toFontChar = E(this.defaultEncoding, (0, n.getGlyphsUnicode)(), this.differences); else { const r = (0, n.getGlyphsUnicode)(), i = []; this.toUnicode.forEach((e, a) => { if (!this.composite) { var n = this.differences[e] || this.defaultEncoding[e]; -1 !== (t = (0, c.getUnicodeForGlyph)(n, r)) && (a = t) } i[+e] = a }); if (this.composite && this.toUnicode instanceof S && /Verdana/i.test(a)) { const t = (0, o.getGlyphMapForStandardFonts)(); for (e in t) i[+e] = t[e] } this.toFontChar = i } this.loadedName = h.split("-")[0]; this.fontType = y(i, l) }, checkAndRepair: function (e, t, o) { const c = ["OS/2", "cmap", "head", "hhea", "hmtx", "maxp", "name", "post", "loca", "glyf", "fpgm", "prep", "cvt ", "CFF "]; function l(e, a) { const r = Object.create(null); r["OS/2"] = null; r.cmap = null; r.head = null; r.hhea = null; r.hmtx = null; r.maxp = null; r.name = null; r.post = null; for (let e = 0; e < a; e++) { const e = h(t); c.includes(e.tag) && (0 !== e.length && (r[e.tag] = e)) } return r } function h(e) { var t = (0, r.bytesToString)(e.getBytes(4)), a = e.getInt32() >>> 0, i = e.getInt32() >>> 0, n = e.getInt32() >>> 0, s = e.pos; e.pos = e.start ? e.start : 0; e.skip(i); var o = e.getBytes(n); e.pos = s; if ("head" === t) { o[8] = o[9] = o[10] = o[11] = 0; o[17] |= 32 } return { tag: t, checksum: a, length: n, offset: i, data: o } } function g(e) { return { version: (0, r.bytesToString)(e.getBytes(4)), numTables: e.getUint16(), searchRange: e.getUint16(), entrySelector: e.getUint16(), rangeShift: e.getUint16() } } function m(e, t, a, r, i, n) { var s = { length: 0, sizeOfInstructions: 0 }; if (a - t <= 12) return s; var o = e.subarray(t, a), c = f(o[0], o[1]); if (c < 0) { !function (e, t, a) { e[t + 1] = a; e[t] = a >>> 8 }(o, 0, c = -1); r.set(o, i); s.length = o.length; return s } var l, h = 10, u = 0; for (l = 0; l < c; l++) { u = (o[h] << 8 | o[h + 1]) + 1; h += 2 } var d = h, g = o[h] << 8 | o[h + 1]; s.sizeOfInstructions = g; var m = h += 2 + g, p = 0; for (l = 0; l < u; l++) { var b = o[h++]; 192 & b && (o[h - 1] = 63 & b); let e = 2; 2 & b ? e = 1 : 16 & b && (e = 0); let t = 2; 4 & b ? t = 1 : 32 & b && (t = 0); const a = e + t; p += a; if (8 & b) { var y = o[h++]; l += y; p += y * a } } if (0 === p) return s; var v = h + p; if (v > o.length) return s; if (!n && g > 0) { r.set(o.subarray(0, d), i); r.set([0, 0], i + d); r.set(o.subarray(m, v), i + d + 2); v -= g; o.length - v > 3 && (v = v + 3 & -4); s.length = v; return s } if (o.length - v > 3) { v = v + 3 & -4; r.set(o.subarray(0, v), i); s.length = v; return s } r.set(o, i); s.length = o.length; return s } function y(e) { var a = (t.start ? t.start : 0) + e.offset; t.pos = a; var i = [[], []], n = e.length, s = a + n; if (0 !== t.getUint16() || n < 6) return i; var o, c, l = t.getUint16(), h = t.getUint16(), u = []; for (o = 0; o < l && t.pos + 12 <= s; o++) { var d = { platform: t.getUint16(), encoding: t.getUint16(), language: t.getUint16(), name: t.getUint16(), length: t.getUint16(), offset: t.getUint16() }; (1 === d.platform && 0 === d.encoding && 0 === d.language || 3 === d.platform && 1 === d.encoding && 1033 === d.language) && u.push(d) } for (o = 0, c = u.length; o < c; o++) { var f = u[o]; if (!(f.length <= 0)) { var g = a + h + f.offset; if (!(g + f.length > s)) { t.pos = g; var m = f.name; if (f.encoding) { for (var p = "", b = 0, y = f.length; b < y; b += 2)p += String.fromCharCode(t.getUint16()); i[1][m] = p } else i[0][m] = (0, r.bytesToString)(t.getBytes(f.length)) } } } return i } var w = [0, 0, 0, 0, 0, 0, 0, 0, -2, -2, -2, -2, 0, 0, -2, -5, -1, -1, -1, -1, -1, -1, -1, -1, 0, 0, -1, 0, -1, -1, -1, -1, 1, -1, -999, 0, 1, 0, -1, -2, 0, -1, -2, -1, -1, 0, -1, -1, 0, 0, -999, -999, -1, -1, -1, -1, -2, -999, -2, -2, -999, 0, -2, -2, 0, 0, -2, 0, -2, 0, 0, 0, -2, -1, -1, 1, 1, 0, 0, -1, -1, -1, -1, -1, -1, -1, 0, 0, -1, 0, -1, -1, 0, -999, -1, -1, -1, -1, -1, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, -2, -999, -999, -999, -999, -999, -1, -1, -2, -2, 0, 0, 0, 0, -1, -1, -999, -2, -2, 0, 0, -1, -2, -2, 0, 0, 0, -1, -1, -1, -2]; function k(e, t) { for (var a, i, n, s, o, c = e.data, l = 0, h = 0, u = 0, d = [], f = [], g = [], m = t.tooComplexToFollowFunctions, p = !1, b = 0, y = 0, v = c.length; l < v;) { var k = c[l++]; if (64 === k) { i = c[l++]; if (p || y) l += i; else for (a = 0; a < i; a++)d.push(c[l++]) } else if (65 === k) { i = c[l++]; if (p || y) l += 2 * i; else for (a = 0; a < i; a++) { n = c[l++]; d.push(n << 8 | c[l++]) } } else if (176 == (248 & k)) { i = k - 176 + 1; if (p || y) l += i; else for (a = 0; a < i; a++)d.push(c[l++]) } else if (184 == (248 & k)) { i = k - 184 + 1; if (p || y) l += 2 * i; else for (a = 0; a < i; a++) { n = c[l++]; d.push(n << 8 | c[l++]) } } else if (43 !== k || m) if (44 !== k || m) { if (45 === k) if (p) { p = !1; h = l } else { if (!(o = f.pop())) { (0, r.warn)("TT: ENDF bad stack"); t.hintsValid = !1; return } s = g.pop(); c = o.data; l = o.i; t.functionsStackDeltas[s] = d.length - o.stackTop } else if (137 === k) { if (p || y) { (0, r.warn)("TT: nested IDEFs not allowed"); m = !0 } p = !0; u = l } else if (88 === k) ++b; else if (27 === k) y = b; else if (89 === k) { y === b && (y = 0); --b } else if (28 === k && !p && !y) { var S = d[d.length - 1]; S > 0 && (l += S - 1) } } else { if (p || y) { (0, r.warn)("TT: nested FDEFs not allowed"); m = !0 } p = !0; u = l; s = d.pop(); t.functionsDefined[s] = { data: c, i: l } } else if (!p && !y) { s = d[d.length - 1]; if (isNaN(s)) (0, r.info)("TT: CALL empty stack (or invalid entry)."); else { t.functionsUsed[s] = !0; if (s in t.functionsStackDeltas) { const e = d.length + t.functionsStackDeltas[s]; if (e < 0) { (0, r.warn)("TT: CALL invalid functions stack delta."); t.hintsValid = !1; return } d.length = e } else if (s in t.functionsDefined && !g.includes(s)) { f.push({ data: c, i: l, stackTop: d.length - 1 }); g.push(s); if (!(o = t.functionsDefined[s])) { (0, r.warn)("TT: CALL non-existent function"); t.hintsValid = !1; return } c = o.data; l = o.i } } } if (!p && !y) { let e = 0; k <= 142 ? e = w[k] : k >= 192 && k <= 223 ? e = -1 : k >= 224 && (e = -2); if (k >= 113 && k <= 117) { i = d.pop(); isNaN(i) || (e = 2 * -i) } for (; e < 0 && d.length > 0;) { d.pop(); e++ } for (; e > 0;) { d.push(NaN); e-- } } } t.tooComplexToFollowFunctions = m; var C = [c]; l > c.length && C.push(new Uint8Array(l - c.length)); if (u > h) { (0, r.warn)("TT: complementing a missing function tail"); C.push(new Uint8Array([34, 45])) } !function (e, t) { if (t.length > 1) { var a, r, i = 0; for (a = 0, r = t.length; a < r; a++)i += t[a].length; i = i + 3 & -4; var n = new Uint8Array(i), s = 0; for (a = 0, r = t.length; a < r; a++) { n.set(t[a], s); s += t[a].length } e.data = n; e.length = i } }(e, C) } let S, x, A, F; if (I(t = new d.Stream(new Uint8Array(t.getBytes())))) { const e = function (e, t) { const { numFonts: a, offsetTable: i } = function (e) { const t = (0, r.bytesToString)(e.getBytes(4)); (0, r.assert)("ttcf" === t, "Must be a TrueType Collection font."); const a = e.getUint16(), i = e.getUint16(), n = e.getInt32() >>> 0, s = []; for (let t = 0; t < n; t++)s.push(e.getInt32() >>> 0); const o = { ttcTag: t, majorVersion: a, minorVersion: i, numFonts: n, offsetTable: s }; switch (a) { case 1: return o; case 2: o.dsigTag = e.getInt32() >>> 0; o.dsigLength = e.getInt32() >>> 0; o.dsigOffset = e.getInt32() >>> 0; return o }throw new r.FormatError(`Invalid TrueType Collection majorVersion: ${a}.`) }(e); for (let n = 0; n < a; n++) { e.pos = (e.start || 0) + i[n]; const a = g(e), s = l(0, a.numTables); if (!s.name) throw new r.FormatError('TrueType Collection font must contain a "name" table.'); const o = y(s.name); for (let e = 0, r = o.length; e < r; e++)for (let r = 0, i = o[e].length; r < i; r++) { const i = o[e][r]; if (i && i.replace(/\s/g, "") === t) return { header: a, tables: s } } } throw new r.FormatError(`TrueType Collection does not contain "${t}" font.`) }(t, this.name); S = e.header; x = e.tables } else { S = g(t); x = l(0, S.numTables) } var E = !x["CFF "]; if (E) { if (!x.loca) throw new r.FormatError('Required "loca" table is not found'); if (!x.glyf) { (0, r.warn)('Required "glyf" table is not found -- trying to recover.'); x.glyf = { tag: "glyf", data: new Uint8Array(0) } } this.isOpenType = !1 } else { const t = o.composite && ((o.cidToGidMap || []).length > 0 || !(o.cMap instanceof u.IdentityCMap)); if ("OTTO" === S.version && !t || !x.head || !x.hhea || !x.maxp || !x.post) { F = new d.Stream(x["CFF "].data); A = new T(F, o); b(o); return this.convert(e, A, o) } delete x.glyf; delete x.loca; delete x.fpgm; delete x.prep; delete x["cvt "]; this.isOpenType = !0 } if (!x.maxp) throw new r.FormatError('Required "maxp" table is not found'); t.pos = (t.start || 0) + x.maxp.offset; var M = t.getInt32(); const L = t.getUint16(); let R = L + 1, U = !0; if (R > 65535) { U = !1; R = L; (0, r.warn)("Not enough space in glyfs to duplicate first glyph.") } var q = 0, j = 0; if (M >= 65536 && x.maxp.length >= 22) { t.pos += 8; if (t.getUint16() > 2) { x.maxp.data[14] = 0; x.maxp.data[15] = 2 } t.pos += 4; q = t.getUint16(); t.pos += 4; j = t.getUint16() } x.maxp.data[4] = R >> 8; x.maxp.data[5] = 255 & R; var _ = function (e, t, a, i) { var n = { functionsDefined: [], functionsUsed: [], functionsStackDeltas: [], tooComplexToFollowFunctions: !1, hintsValid: !0 }; e && k(e, n); t && k(t, n); e && function (e, t) { if (!e.tooComplexToFollowFunctions) if (e.functionsDefined.length > t) { (0, r.warn)("TT: more functions defined than expected"); e.hintsValid = !1 } else for (var a = 0, i = e.functionsUsed.length; a < i; a++) { if (a > t) { (0, r.warn)("TT: invalid function id: " + a); e.hintsValid = !1; return } if (e.functionsUsed[a] && !e.functionsDefined[a]) { (0, r.warn)("TT: undefined function: " + a); e.hintsValid = !1; return } } }(n, i); if (a && 1 & a.length) { var s = new Uint8Array(a.length + 1); s.set(a.data); a.data = s } return n.hintsValid }(x.fpgm, x.prep, x["cvt "], q); if (!_) { delete x.fpgm; delete x.prep; delete x["cvt "] } !function (e, t, a, i, n) { if (t) { e.pos = (e.start ? e.start : 0) + t.offset; e.pos += 4; e.pos += 2; e.pos += 2; e.pos += 2; e.pos += 2; e.pos += 2; e.pos += 2; e.pos += 2; e.pos += 2; e.pos += 2; e.pos += 2; e.pos += 8; e.pos += 2; var s = e.getUint16(); if (s > i) { (0, r.info)("The numOfMetrics (" + s + ") should not be greater than the numGlyphs (" + i + ")"); s = i; t.data[34] = (65280 & s) >> 8; t.data[35] = 255 & s } var o = i - s - (a.length - 4 * s >> 1); if (o > 0) { var c = new Uint8Array(a.length + 2 * o); c.set(a.data); if (n) { c[a.length] = a.data[2]; c[a.length + 1] = a.data[3] } a.data = c } } else a && (a.data = null) }(t, x.hhea, x.hmtx, R, U); if (!x.head) throw new r.FormatError('Required "head" table is not found'); !function (e, t, i) { var n, s, o, c, l = e.data, h = (n = l[0], s = l[1], o = l[2], c = l[3], (n << 24) + (s << 16) + (o << 8) + c); if (h >> 16 != 1) { (0, r.info)("Attempting to fix invalid version in head table: " + h); l[0] = 0; l[1] = 1; l[2] = 0; l[3] = 0 } var u = a(l[50], l[51]); if (u < 0 || u > 1) { (0, r.info)("Attempting to fix invalid indexToLocFormat in head table: " + u); var d = t + 1; if (i === d << 1) { l[50] = 0; l[51] = 0 } else { if (i !== d << 2) throw new r.FormatError("Could not fix indexToLocFormat: " + u); l[50] = 0; l[51] = 1 } } }(x.head, L, E ? x.loca.length : 0); var z = Object.create(null); if (E) { var H = a(x.head.data[50], x.head.data[51]), G = function (e, t, a, r, i, n, s) { var o, c, l; if (r) { o = 4; c = function (e, t) { return e[t] << 24 | e[t + 1] << 16 | e[t + 2] << 8 | e[t + 3] }; l = function (e, t, a) { e[t] = a >>> 24 & 255; e[t + 1] = a >> 16 & 255; e[t + 2] = a >> 8 & 255; e[t + 3] = 255 & a } } else { o = 2; c = function (e, t) { return e[t] << 9 | e[t + 1] << 1 }; l = function (e, t, a) { e[t] = a >> 9 & 255; e[t + 1] = a >> 1 & 255 } } var h = n ? a + 1 : a, u = o * (1 + h), d = new Uint8Array(u); d.set(e.data.subarray(0, u)); e.data = d; var f, g, p = t.data, b = p.length, y = new Uint8Array(b), v = c(d, 0), w = 0, k = Object.create(null); l(d, 0, w); for (f = 0, g = o; f < a; f++, g += o) { var S = c(d, g); 0 === S && (S = v); S > b && (b + 3 & -4) === S && (S = b); S > b && (v = S); var C = m(p, v, S, y, w, i), x = C.length; 0 === x && (k[f] = !0); C.sizeOfInstructions > s && (s = C.sizeOfInstructions); l(d, g, w += x); v = S } if (0 === w) { var A = new Uint8Array([0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 49, 0]); for (f = 0, g = o; f < h; f++, g += o)l(d, g, A.length); t.data = A } else if (n) { var I = c(d, o); if (y.length > I + w) t.data = y.subarray(0, I + w); else { t.data = new Uint8Array(I + w); t.data.set(y.subarray(0, w)) } t.data.set(y.subarray(0, I), w); l(e.data, d.length - o, w + I) } else t.data = y.subarray(0, w); return { missingGlyphs: k, maxSizeOfInstructions: s } }(x.loca, x.glyf, L, H, _, U, j); z = G.missingGlyphs; if (M >= 65536 && x.maxp.length >= 22) { x.maxp.data[26] = G.maxSizeOfInstructions >> 8; x.maxp.data[27] = 255 & G.maxSizeOfInstructions } } if (!x.hhea) throw new r.FormatError('Required "hhea" table is not found'); if (0 === x.hhea.data[10] && 0 === x.hhea.data[11]) { x.hhea.data[10] = 255; x.hhea.data[11] = 255 } var W = { unitsPerEm: a(x.head.data[18], x.head.data[19]), yMax: a(x.head.data[42], x.head.data[43]), yMin: f(x.head.data[38], x.head.data[39]), ascent: a(x.hhea.data[4], x.hhea.data[5]), descent: f(x.hhea.data[6], x.hhea.data[7]) }; this.ascent = W.ascent / W.unitsPerEm; this.descent = W.descent / W.unitsPerEm; x.post && function (e, a, i) { var n = (t.start ? t.start : 0) + e.offset; t.pos = n; var s, o = n + e.length, c = t.getInt32(); t.getBytes(28); var l, h = !0; switch (c) { case 65536: s = p; break; case 131072: var u = t.getUint16(); if (u !== i) { h = !1; break } var d = []; for (l = 0; l < u; ++l) { var f = t.getUint16(); if (f >= 32768) { h = !1; break } d.push(f) } if (!h) break; for (var g = [], m = []; t.pos < o;) { var b = t.getByte(); m.length = b; for (l = 0; l < b; ++l)m[l] = String.fromCharCode(t.getByte()); g.push(m.join("")) } s = []; for (l = 0; l < u; ++l) { var y = d[l]; y < 258 ? s.push(p[y]) : s.push(g[y - 258]) } break; case 196608: break; default: (0, r.warn)("Unknown/unsupported post table version " + c); h = !1; a.defaultEncoding && (s = a.defaultEncoding) }a.glyphNames = s }(x.post, o, L); x.post = { tag: "post", data: D(o) }; var X, V = []; function K(e) { return !z[e] } if (o.composite) { var Y = o.cidToGidMap || [], $ = 0 === Y.length; o.cMap.forEach((function (e, t) { if (t > 65535) throw new r.FormatError("Max size of CID is 65,535"); var a = -1; $ ? a = t : void 0 !== Y[t] && (a = Y[t]); a >= 0 && a < L && K(a) && (V[e] = a) })) } else { var J = function (e, t, a, i) { if (!e) { (0, r.warn)("No cmap table available."); return { platformId: -1, encodingId: -1, mappings: [], hasShortCmap: !1 } } var n, s = (t.start ? t.start : 0) + e.offset; t.pos = s; t.getUint16(); for (var o, c = t.getUint16(), l = !1, h = 0; h < c; h++) { var u = t.getUint16(), d = t.getUint16(), f = t.getInt32() >>> 0, g = !1; if (!o || o.platformId !== u || o.encodingId !== d) { if (0 === u && 0 === d) g = !0; else if (1 === u && 0 === d) g = !0; else if (3 !== u || 1 !== d || !i && o) { if (a && 3 === u && 0 === d) { g = !0; l = !0 } } else { g = !0; a || (l = !0) } g && (o = { platformId: u, encodingId: d, offset: f }); if (l) break } } o && (t.pos = s + o.offset); if (!o || -1 === t.peekByte()) { (0, r.warn)("Could not find a preferred cmap table."); return { platformId: -1, encodingId: -1, mappings: [], hasShortCmap: !1 } } var m = t.getUint16(); t.getUint16(); t.getUint16(); var p, b, y = !1, v = []; if (0 === m) { for (p = 0; p < 256; p++) { var w = t.getByte(); w && v.push({ charCode: p, glyphId: w }) } y = !0 } else if (4 === m) { var k = t.getUint16() >> 1; t.getBytes(6); var S, C = []; for (S = 0; S < k; S++)C.push({ end: t.getUint16() }); t.getUint16(); for (S = 0; S < k; S++)C[S].start = t.getUint16(); for (S = 0; S < k; S++)C[S].delta = t.getUint16(); var x = 0; for (S = 0; S < k; S++) { n = C[S]; var A = t.getUint16(); if (A) { var I = (A >> 1) - (k - S); n.offsetIndex = I; x = Math.max(x, I + n.end - n.start + 1) } else n.offsetIndex = -1 } var F = []; for (p = 0; p < x; p++)F.push(t.getUint16()); for (S = 0; S < k; S++) { s = (n = C[S]).start; var T = n.end, E = n.delta; I = n.offsetIndex; for (p = s; p <= T; p++)if (65535 !== p) { b = (b = I < 0 ? p : F[I + p - s]) + E & 65535; v.push({ charCode: p, glyphId: b }) } } } else { if (6 !== m) { (0, r.warn)("cmap table has unsupported format: " + m); return { platformId: -1, encodingId: -1, mappings: [], hasShortCmap: !1 } } var O = t.getUint16(), P = t.getUint16(); for (p = 0; p < P; p++) { b = t.getUint16(); var B = O + p; v.push({ charCode: B, glyphId: b }) } } v.sort((function (e, t) { return e.charCode - t.charCode })); for (h = 1; h < v.length; h++)if (v[h - 1].charCode === v[h].charCode) { v.splice(h, 1); h-- } return { platformId: o.platformId, encodingId: o.encodingId, mappings: v, hasShortCmap: y } }(x.cmap, t, this.isSymbolicFont, o.hasEncoding), Z = J.platformId, Q = J.encodingId, ee = J.mappings, te = ee.length; if (o.hasEncoding && (3 === Z && 1 === Q || 1 === Z && 0 === Q) || -1 === Z && -1 === Q && (0, s.getEncoding)(o.baseEncodingName)) { var ae = []; "MacRomanEncoding" !== o.baseEncodingName && "WinAnsiEncoding" !== o.baseEncodingName || (ae = (0, s.getEncoding)(o.baseEncodingName)); var re = (0, n.getGlyphsUnicode)(); for (X = 0; X < 256; X++) { var ie, ne; if (ie = this.differences && X in this.differences ? this.differences[X] : X in ae && "" !== ae[X] ? ae[X] : s.StandardEncoding[X]) { ne = v(ie, re); var se; 3 === Z && 1 === Q ? se = re[ne] : 1 === Z && 0 === Q && (se = s.MacRomanEncoding.indexOf(ne)); var oe = !1; for (let e = 0; e < te; ++e)if (ee[e].charCode === se) { V[X] = ee[e].glyphId; oe = !0; break } if (!oe && o.glyphNames) { var ce = o.glyphNames.indexOf(ie); -1 === ce && ne !== ie && (ce = o.glyphNames.indexOf(ne)); ce > 0 && K(ce) && (V[X] = ce) } } } } else if (0 === Z && 0 === Q) for (let e = 0; e < te; ++e)V[ee[e].charCode] = ee[e].glyphId; else for (let e = 0; e < te; ++e) { X = ee[e].charCode; 3 === Z && X >= 61440 && X <= 61695 && (X &= 255); V[X] = ee[e].glyphId } } 0 === V.length && (V[0] = 0); let le = R - 1; U || (le = 0); var he = O(V, K, le); this.toFontChar = he.toFontChar; x.cmap = { tag: "cmap", data: P(he.charCodeToGlyphId, R) }; x["OS/2"] && function (e) { var t = new d.Stream(e.data), a = t.getUint16(); t.getBytes(60); var r = t.getUint16(); if (a < 4 && 768 & r) return !1; if (t.getUint16() > t.getUint16()) return !1; t.getBytes(6); if (0 === t.getUint16()) return !1; e.data[8] = e.data[9] = 0; return !0 }(x["OS/2"]) || (x["OS/2"] = { tag: "OS/2", data: B(o, he.charCodeToGlyphId, W) }); if (!E) try { F = new d.Stream(x["CFF "].data); A = new i.CFFParser(F, o, !0).parse(); A.duplicateFirstGlyph(); var ue = new i.CFFCompiler(A); x["CFF "].data = ue.compile() } catch (e) { (0, r.warn)("Failed to compile font " + o.loadedName) } if (x.name) { var de = y(x.name); x.name.data = N(e, de) } else x.name = { tag: "name", data: N(this.name) }; var fe = new C(S.version); for (var ge in x) fe.addTable(ge, x[ge].data); return fe.toArray() }, convert: function (e, t, a) { a.fixedPitch = !1; a.builtInEncoding && function (e, t) { if (!e.hasIncludedToUnicodeMap && !(e.hasEncoding || t === e.defaultEncoding || e.toUnicode instanceof S)) { var a = [], r = (0, n.getGlyphsUnicode)(); for (var i in t) { var s = t[i], o = (0, c.getUnicodeForGlyph)(s, r); -1 !== o && (a[i] = String.fromCharCode(o)) } e.toUnicode.amend(a) } }(a, a.builtInEncoding); let i = 1; t instanceof T && (i = t.numGlyphs - 1); var o = t.getGlyphMapping(a), l = O(o, t.hasGlyphId.bind(t), i); this.toFontChar = l.toFontChar; var h = t.numGlyphs; function u(e, t) { var a = null; for (var r in e) if (t === e[r]) { a || (a = []); a.push(0 | r) } return a } function d(e, t) { for (var a in e) if (t === e[a]) return 0 | a; l.charCodeToGlyphId[l.nextAvailableFontCharCode] = t; return l.nextAvailableFontCharCode++ } var f = t.seacs; if (f && f.length) { var g = a.fontMatrix || r.FONT_IDENTITY_MATRIX, m = t.getCharset(), p = Object.create(null); for (var b in f) { var y = f[b |= 0], v = s.StandardEncoding[y[2]], w = s.StandardEncoding[y[3]], k = m.indexOf(v), I = m.indexOf(w); if (!(k < 0 || I < 0)) { var F = { x: y[0] * g[0] + y[1] * g[2] + g[4], y: y[0] * g[1] + y[1] * g[3] + g[5] }, E = u(o, b); if (E) for (var M = 0, L = E.length; M < L; M++) { var R = E[M], U = l.charCodeToGlyphId, q = d(U, k), j = d(U, I); p[R] = { baseFontCharCode: q, accentFontCharCode: j, accentOffset: F } } } } a.seacMap = p } var _ = 1 / (a.fontMatrix || r.FONT_IDENTITY_MATRIX)[0], z = new C("OTTO"); z.addTable("CFF ", t.data); z.addTable("OS/2", B(a, l.charCodeToGlyphId)); z.addTable("cmap", P(l.charCodeToGlyphId, h)); z.addTable("head", "\0\0\0\0\0\0\0\0\0\0_<õ\0\0" + A(_) + "\0\0\0\0\v~'\0\0\0\0\v~'\0\0" + A(a.descent) + "ÿ" + A(a.ascent) + x(a.italicAngle ? 2 : 0) + "\0\0\0\0\0\0\0"); z.addTable("hhea", "\0\0\0" + A(a.ascent) + A(a.descent) + "\0\0ÿÿ\0\0\0\0\0\0" + A(a.capHeight) + A(Math.tan(a.italicAngle) * a.xHeight) + "\0\0\0\0\0\0\0\0\0\0\0\0" + x(h)); z.addTable("hmtx", function () { for (var e = t.charstrings, a = t.cff ? t.cff.widths : null, r = "\0\0\0\0", i = 1, n = h; i < n; i++) { var s = 0; if (e) { var o = e[i - 1]; s = "width" in o ? o.width : 0 } else a && (s = Math.ceil(a[i] || 0)); r += x(s) + x(0) } return r }()); z.addTable("maxp", "\0\0P\0" + x(h)); z.addTable("name", N(e)); z.addTable("post", D(a)); return z.toArray() }, get spaceWidth() { if ("_shadowWidth" in this) return this._shadowWidth; for (var e, t = ["space", "minus", "one", "i", "I"], a = 0, r = t.length; a < r; a++) { var i = t[a]; if (i in this.widths) { e = this.widths[i]; break } var s = (0, n.getGlyphsUnicode)()[i], o = 0; this.composite && this.cMap.contains(s) && (o = this.cMap.lookup(s)); !o && this.toUnicode && (o = this.toUnicode.charCodeOf(s)); o <= 0 && (o = s); if (e = this.widths[o]) break } e = e || this.defaultWidth; this._shadowWidth = e; return e }, charToGlyph: function (e, t) { var a, i, n, s = e; this.cMap && this.cMap.contains(e) && (s = this.cMap.lookup(e)); i = this.widths[s]; i = (0, r.isNum)(i) ? i : this.defaultWidth; var o = this.vmetrics && this.vmetrics[s]; let l = this.toUnicode.get(e) || this.fallbackToUnicode.get(e) || e; "number" == typeof l && (l = String.fromCharCode(l)); var h = e in this.toFontChar; a = this.toFontChar[e] || e; if (this.missingFile) { const t = this.differences[e] || this.defaultEncoding[e]; ".notdef" !== t && "" !== t || "Type1" !== this.type || (a = 32); a = (0, c.mapSpecialUnicodeValues)(a) } this.isType3Font && (n = a); var u = null; if (this.seacMap && this.seacMap[e]) { h = !0; var d = this.seacMap[e]; a = d.baseFontCharCode; u = { fontChar: String.fromCodePoint(d.accentFontCharCode), offset: d.accentOffset } } var f = "number" == typeof a ? String.fromCodePoint(a) : "", g = this.glyphCache[e]; if (!g || !g.matchesForCache(f, l, u, i, o, n, t, h)) { g = new w(f, l, u, i, o, n, t, h); this.glyphCache[e] = g } return g }, charsToGlyphs: function (e) { var t, a, r, i = this.charsCache; if (i && (t = i[e])) return t; i || (i = this.charsCache = Object.create(null)); t = []; var n, s = e, o = 0; if (this.cMap) for (var c = Object.create(null); o < e.length;) { this.cMap.readCharCode(e, o, c); r = c.charcode; var l = c.length; o += l; var h = 1 === l && 32 === e.charCodeAt(o - 1); a = this.charToGlyph(r, h); t.push(a) } else for (o = 0, n = e.length; o < n; ++o) { r = e.charCodeAt(o); a = this.charToGlyph(r, 32 === r); t.push(a) } return i[s] = t }, get glyphCacheValues() { return Object.values(this.glyphCache) } }; return e }(); t.Font = x; var A = function () { function e(e) { this.error = e; this.loadedName = "g_font_error"; this.missingFile = !0 } e.prototype = { charsToGlyphs: function () { return [] }, exportData: function () { return { error: this.error } } }; return e }(); t.ErrorFont = A; function I(e, t, a) { var r, i, o, c = Object.create(null), l = !!(e.flags & m.Symbolic); if (e.baseEncodingName) { o = (0, s.getEncoding)(e.baseEncodingName); for (i = 0; i < o.length; i++) { r = a.indexOf(o[i]); c[i] = r >= 0 ? r : 0 } } else if (l) for (i in t) c[i] = t[i]; else { o = s.StandardEncoding; for (i = 0; i < o.length; i++) { r = a.indexOf(o[i]); c[i] = r >= 0 ? r : 0 } } var h, u = e.differences; if (u) for (i in u) { var d = u[i]; if (-1 === (r = a.indexOf(d))) { h || (h = (0, n.getGlyphsUnicode)()); var f = v(d, h); f !== d && (r = a.indexOf(f)) } c[i] = r >= 0 ? r : 0 } return c } var F = function () { function e(e, t, a) { for (var r, i = e.length, n = t.length, s = i - n, o = a, c = !1; o < s;) { r = 0; for (; r < n && e[o + r] === t[r];)r++; if (r >= n) { o += r; for (; o < i && (0, l.isWhiteSpace)(e[o]);)o++; c = !0; break } o++ } return { found: c, length: o } } function t(t, a, i) { var n = i.length1, s = (i.length2, a.peekBytes(6)), o = 128 === s[0] && 1 === s[1]; if (o) { a.skip(6); n = s[5] << 24 | s[4] << 16 | s[3] << 8 | s[2] } var c = function (t, a) { var i, n, s, o, c = [101, 101, 120, 101, 99], h = t.pos; try { n = (i = t.getBytes(a)).length } catch (e) { if (e instanceof l.MissingDataException) throw e } if (n === a && (s = e(i, c, a - 2 * c.length)).found && s.length === a) return { stream: new d.Stream(i), length: a }; (0, r.warn)('Invalid "Length1" property in Type1 font -- trying to recover.'); t.pos = h; for (; ;) { if (0 === (s = e(t.peekBytes(2048), c, 0)).length) break; t.pos += s.length; if (s.found) { o = t.pos - h; break } } t.pos = h; if (o) return { stream: new d.Stream(t.getBytes(o)), length: o }; (0, r.warn)('Unable to recover "Length1" property in Type1 font -- using as is.'); return { stream: new d.Stream(t.getBytes(a)), length: a } }(a, n); new f.Type1Parser(c.stream, !1, !0).extractFontHeader(i); o && (s = a.getBytes(6))[5] << 24 | s[4] << 16 | s[3] << 8 | s[2]; var h, u = (h = a.getBytes(), { stream: new d.Stream(h), length: h.length }), g = new f.Type1Parser(u.stream, !0, !0).extractFontProgram(i); for (var m in g.properties) i[m] = g.properties[m]; var p = g.charstrings, b = this.getType2Charstrings(p), y = this.getType2Subrs(g.subrs); this.charstrings = p; this.data = this.wrap(t, b, this.charstrings, y, i); this.seacs = this.getSeacs(g.charstrings) } t.prototype = { get numGlyphs() { return this.charstrings.length + 1 }, getCharset: function () { for (var e = [".notdef"], t = this.charstrings, a = 0; a < t.length; a++)e.push(t[a].glyphName); return e }, getGlyphMapping: function (e) { var t, a = this.charstrings, r = [".notdef"]; for (t = 0; t < a.length; t++)r.push(a[t].glyphName); var i = e.builtInEncoding; if (i) { var n = Object.create(null); for (var s in i) (t = r.indexOf(i[s])) >= 0 && (n[s] = t) } return I(e, n, r) }, hasGlyphId: function (e) { return !(e < 0 || e >= this.numGlyphs) && (0 === e || this.charstrings[e - 1].charstring.length > 0) }, getSeacs: function (e) { var t, a, r = []; for (t = 0, a = e.length; t < a; t++) { var i = e[t]; i.seac && (r[t + 1] = i.seac) } return r }, getType2Charstrings: function (e) { for (var t = [], a = 0, r = e.length; a < r; a++)t.push(e[a].charstring); return t }, getType2Subrs: function (e) { var t = 0, a = e.length; t = a < 1133 ? 107 : a < 33769 ? 1131 : 32768; var r, i = []; for (r = 0; r < t; r++)i.push([11]); for (r = 0; r < a; r++)i.push(e[r]); return i }, wrap: function (e, t, a, r, n) { var s = new i.CFF; s.header = new i.CFFHeader(1, 0, 4, 4); s.names = [e]; var o = new i.CFFTopDict; o.setByName("version", 391); o.setByName("Notice", 392); o.setByName("FullName", 393); o.setByName("FamilyName", 394); o.setByName("Weight", 395); o.setByName("Encoding", null); o.setByName("FontMatrix", n.fontMatrix); o.setByName("FontBBox", n.bbox); o.setByName("charset", null); o.setByName("CharStrings", null); o.setByName("Private", null); s.topDict = o; var c = new i.CFFStrings; c.add("Version 0.11"); c.add("See original notice"); c.add(e); c.add(e); c.add("Medium"); s.strings = c; s.globalSubrIndex = new i.CFFIndex; var l, h, u = t.length, d = [".notdef"]; for (l = 0; l < u; l++) { const e = a[l].glyphName; -1 === i.CFFStandardStrings.indexOf(e) && c.add(e); d.push(e) } s.charset = new i.CFFCharset(!1, 0, d); var f = new i.CFFIndex; f.add([139, 14]); for (l = 0; l < u; l++)f.add(t[l]); s.charStrings = f; var g = new i.CFFPrivateDict; g.setByName("Subrs", null); var m = ["BlueValues", "OtherBlues", "FamilyBlues", "FamilyOtherBlues", "StemSnapH", "StemSnapV", "BlueShift", "BlueFuzz", "BlueScale", "LanguageGroup", "ExpansionFactor", "ForceBold", "StdHW", "StdVW"]; for (l = 0, h = m.length; l < h; l++) { var p = m[l]; if (p in n.privateData) { var b = n.privateData[p]; if (Array.isArray(b)) for (var y = b.length - 1; y > 0; y--)b[y] -= b[y - 1]; g.setByName(p, b) } } s.topDict.privateDict = g; var v = new i.CFFIndex; for (l = 0, h = r.length; l < h; l++)v.add(r[l]); g.subrsIndex = v; return new i.CFFCompiler(s).compile() } }; return t }(), T = function () { function e(e, t) { this.properties = t; var a = new i.CFFParser(e, t, !0); this.cff = a.parse(); this.cff.duplicateFirstGlyph(); var n = new i.CFFCompiler(this.cff); this.seacs = this.cff.seacs; try { this.data = n.compile() } catch (a) { (0, r.warn)("Failed to compile font " + t.loadedName); this.data = e } } e.prototype = { get numGlyphs() { return this.cff.charStrings.count }, getCharset: function () { return this.cff.charset.charset }, getGlyphMapping: function () { var e, t, a = this.cff, r = this.properties, i = a.charset.charset; if (r.composite) { e = Object.create(null); let s; if (a.isCIDFont) for (t = 0; t < i.length; t++) { var n = i[t]; s = r.cMap.charCodeOf(n); e[s] = t } else for (t = 0; t < a.charStrings.count; t++) { s = r.cMap.charCodeOf(t); e[s] = t } return e } return e = I(r, a.encoding ? a.encoding.encoding : null, i) }, hasGlyphId: function (e) { return this.cff.hasGlyphId(e) } }; return e }() }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.CFFFDSelect = t.CFFCompiler = t.CFFPrivateDict = t.CFFTopDict = t.CFFCharset = t.CFFIndex = t.CFFStrings = t.CFFHeader = t.CFF = t.CFFParser = t.CFFStandardStrings = void 0; var r = a(2), i = a(29), n = a(30), s = [".notdef", "space", "exclam", "quotedbl", "numbersign", "dollar", "percent", "ampersand", "quoteright", "parenleft", "parenright", "asterisk", "plus", "comma", "hyphen", "period", "slash", "zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "colon", "semicolon", "less", "equal", "greater", "question", "at", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "bracketleft", "backslash", "bracketright", "asciicircum", "underscore", "quoteleft", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "braceleft", "bar", "braceright", "asciitilde", "exclamdown", "cent", "sterling", "fraction", "yen", "florin", "section", "currency", "quotesingle", "quotedblleft", "guillemotleft", "guilsinglleft", "guilsinglright", "fi", "fl", "endash", "dagger", "daggerdbl", "periodcentered", "paragraph", "bullet", "quotesinglbase", "quotedblbase", "quotedblright", "guillemotright", "ellipsis", "perthousand", "questiondown", "grave", "acute", "circumflex", "tilde", "macron", "breve", "dotaccent", "dieresis", "ring", "cedilla", "hungarumlaut", "ogonek", "caron", "emdash", "AE", "ordfeminine", "Lslash", "Oslash", "OE", "ordmasculine", "ae", "dotlessi", "lslash", "oslash", "oe", "germandbls", "onesuperior", "logicalnot", "mu", "trademark", "Eth", "onehalf", "plusminus", "Thorn", "onequarter", "divide", "brokenbar", "degree", "thorn", "threequarters", "twosuperior", "registered", "minus", "eth", "multiply", "threesuperior", "copyright", "Aacute", "Acircumflex", "Adieresis", "Agrave", "Aring", "Atilde", "Ccedilla", "Eacute", "Ecircumflex", "Edieresis", "Egrave", "Iacute", "Icircumflex", "Idieresis", "Igrave", "Ntilde", "Oacute", "Ocircumflex", "Odieresis", "Ograve", "Otilde", "Scaron", "Uacute", "Ucircumflex", "Udieresis", "Ugrave", "Yacute", "Ydieresis", "Zcaron", "aacute", "acircumflex", "adieresis", "agrave", "aring", "atilde", "ccedilla", "eacute", "ecircumflex", "edieresis", "egrave", "iacute", "icircumflex", "idieresis", "igrave", "ntilde", "oacute", "ocircumflex", "odieresis", "ograve", "otilde", "scaron", "uacute", "ucircumflex", "udieresis", "ugrave", "yacute", "ydieresis", "zcaron", "exclamsmall", "Hungarumlautsmall", "dollaroldstyle", "dollarsuperior", "ampersandsmall", "Acutesmall", "parenleftsuperior", "parenrightsuperior", "twodotenleader", "onedotenleader", "zerooldstyle", "oneoldstyle", "twooldstyle", "threeoldstyle", "fouroldstyle", "fiveoldstyle", "sixoldstyle", "sevenoldstyle", "eightoldstyle", "nineoldstyle", "commasuperior", "threequartersemdash", "periodsuperior", "questionsmall", "asuperior", "bsuperior", "centsuperior", "dsuperior", "esuperior", "isuperior", "lsuperior", "msuperior", "nsuperior", "osuperior", "rsuperior", "ssuperior", "tsuperior", "ff", "ffi", "ffl", "parenleftinferior", "parenrightinferior", "Circumflexsmall", "hyphensuperior", "Gravesmall", "Asmall", "Bsmall", "Csmall", "Dsmall", "Esmall", "Fsmall", "Gsmall", "Hsmall", "Ismall", "Jsmall", "Ksmall", "Lsmall", "Msmall", "Nsmall", "Osmall", "Psmall", "Qsmall", "Rsmall", "Ssmall", "Tsmall", "Usmall", "Vsmall", "Wsmall", "Xsmall", "Ysmall", "Zsmall", "colonmonetary", "onefitted", "rupiah", "Tildesmall", "exclamdownsmall", "centoldstyle", "Lslashsmall", "Scaronsmall", "Zcaronsmall", "Dieresissmall", "Brevesmall", "Caronsmall", "Dotaccentsmall", "Macronsmall", "figuredash", "hypheninferior", "Ogoneksmall", "Ringsmall", "Cedillasmall", "questiondownsmall", "oneeighth", "threeeighths", "fiveeighths", "seveneighths", "onethird", "twothirds", "zerosuperior", "foursuperior", "fivesuperior", "sixsuperior", "sevensuperior", "eightsuperior", "ninesuperior", "zeroinferior", "oneinferior", "twoinferior", "threeinferior", "fourinferior", "fiveinferior", "sixinferior", "seveninferior", "eightinferior", "nineinferior", "centinferior", "dollarinferior", "periodinferior", "commainferior", "Agravesmall", "Aacutesmall", "Acircumflexsmall", "Atildesmall", "Adieresissmall", "Aringsmall", "AEsmall", "Ccedillasmall", "Egravesmall", "Eacutesmall", "Ecircumflexsmall", "Edieresissmall", "Igravesmall", "Iacutesmall", "Icircumflexsmall", "Idieresissmall", "Ethsmall", "Ntildesmall", "Ogravesmall", "Oacutesmall", "Ocircumflexsmall", "Otildesmall", "Odieresissmall", "OEsmall", "Oslashsmall", "Ugravesmall", "Uacutesmall", "Ucircumflexsmall", "Udieresissmall", "Yacutesmall", "Thornsmall", "Ydieresissmall", "001.000", "001.001", "001.002", "001.003", "Black", "Bold", "Book", "Light", "Medium", "Regular", "Roman", "Semibold"]; t.CFFStandardStrings = s; var o = function () { var e = [null, { id: "hstem", min: 2, stackClearing: !0, stem: !0 }, null, { id: "vstem", min: 2, stackClearing: !0, stem: !0 }, { id: "vmoveto", min: 1, stackClearing: !0 }, { id: "rlineto", min: 2, resetStack: !0 }, { id: "hlineto", min: 1, resetStack: !0 }, { id: "vlineto", min: 1, resetStack: !0 }, { id: "rrcurveto", min: 6, resetStack: !0 }, null, { id: "callsubr", min: 1, undefStack: !0 }, { id: "return", min: 0, undefStack: !0 }, null, null, { id: "endchar", min: 0, stackClearing: !0 }, null, null, null, { id: "hstemhm", min: 2, stackClearing: !0, stem: !0 }, { id: "hintmask", min: 0, stackClearing: !0 }, { id: "cntrmask", min: 0, stackClearing: !0 }, { id: "rmoveto", min: 2, stackClearing: !0 }, { id: "hmoveto", min: 1, stackClearing: !0 }, { id: "vstemhm", min: 2, stackClearing: !0, stem: !0 }, { id: "rcurveline", min: 8, resetStack: !0 }, { id: "rlinecurve", min: 8, resetStack: !0 }, { id: "vvcurveto", min: 4, resetStack: !0 }, { id: "hhcurveto", min: 4, resetStack: !0 }, null, { id: "callgsubr", min: 1, undefStack: !0 }, { id: "vhcurveto", min: 4, resetStack: !0 }, { id: "hvcurveto", min: 4, resetStack: !0 }], t = [null, null, null, { id: "and", min: 2, stackDelta: -1 }, { id: "or", min: 2, stackDelta: -1 }, { id: "not", min: 1, stackDelta: 0 }, null, null, null, { id: "abs", min: 1, stackDelta: 0 }, { id: "add", min: 2, stackDelta: -1, stackFn: function (e, t) { e[t - 2] = e[t - 2] + e[t - 1] } }, { id: "sub", min: 2, stackDelta: -1, stackFn: function (e, t) { e[t - 2] = e[t - 2] - e[t - 1] } }, { id: "div", min: 2, stackDelta: -1, stackFn: function (e, t) { e[t - 2] = e[t - 2] / e[t - 1] } }, null, { id: "neg", min: 1, stackDelta: 0, stackFn: function (e, t) { e[t - 1] = -e[t - 1] } }, { id: "eq", min: 2, stackDelta: -1 }, null, null, { id: "drop", min: 1, stackDelta: -1 }, null, { id: "put", min: 2, stackDelta: -2 }, { id: "get", min: 1, stackDelta: 0 }, { id: "ifelse", min: 4, stackDelta: -3 }, { id: "random", min: 0, stackDelta: 1 }, { id: "mul", min: 2, stackDelta: -1, stackFn: function (e, t) { e[t - 2] = e[t - 2] * e[t - 1] } }, null, { id: "sqrt", min: 1, stackDelta: 0 }, { id: "dup", min: 1, stackDelta: 1 }, { id: "exch", min: 2, stackDelta: 0 }, { id: "index", min: 2, stackDelta: 0 }, { id: "roll", min: 3, stackDelta: -2 }, null, null, null, { id: "hflex", min: 7, resetStack: !0 }, { id: "flex", min: 13, resetStack: !0 }, { id: "hflex1", min: 9, resetStack: !0 }, { id: "flex1", min: 11, resetStack: !0 }]; function a(e, t, a) { this.bytes = e.getBytes(); this.properties = t; this.seacAnalysisEnabled = !!a } a.prototype = { parse: function () { var e = this.properties, t = new c; this.cff = t; var a = this.parseHeader(), r = this.parseIndex(a.endPos), i = this.parseIndex(r.endPos), n = this.parseIndex(i.endPos), s = this.parseIndex(n.endPos), o = this.parseDict(i.obj.get(0)), l = this.createDict(f, o, t.strings); t.header = a.obj; t.names = this.parseNameIndex(r.obj); t.strings = this.parseStringIndex(n.obj); t.topDict = l; t.globalSubrIndex = s.obj; this.parsePrivateDict(t.topDict); t.isCIDFont = l.hasName("ROS"); var h = l.getByName("CharStrings"), u = this.parseIndex(h).obj, d = l.getByName("FontMatrix"); d && (e.fontMatrix = d); var g, m, p = l.getByName("FontBBox"); if (p) { e.ascent = Math.max(p[3], p[1]); e.descent = Math.min(p[1], p[3]); e.ascentScaled = !0 } if (t.isCIDFont) { for (var b = this.parseIndex(l.getByName("FDArray")).obj, y = 0, v = b.count; y < v; ++y) { var w = b.get(y), k = this.createDict(f, this.parseDict(w), t.strings); this.parsePrivateDict(k); t.fdArray.push(k) } m = null; g = this.parseCharsets(l.getByName("charset"), u.count, t.strings, !0); t.fdSelect = this.parseFDSelect(l.getByName("FDSelect"), u.count) } else { g = this.parseCharsets(l.getByName("charset"), u.count, t.strings, !1); m = this.parseEncoding(l.getByName("Encoding"), e, t.strings, g.charset) } t.charset = g; t.encoding = m; var S = this.parseCharStrings({ charStrings: u, localSubrIndex: l.privateDict.subrsIndex, globalSubrIndex: s.obj, fdSelect: t.fdSelect, fdArray: t.fdArray, privateDict: l.privateDict }); t.charStrings = S.charStrings; t.seacs = S.seacs; t.widths = S.widths; return t }, parseHeader: function () { for (var e = this.bytes, t = e.length, a = 0; a < t && 1 !== e[a];)++a; if (a >= t) throw new r.FormatError("Invalid CFF header"); if (0 !== a) { (0, r.info)("cff data is shifted"); e = e.subarray(a); this.bytes = e } var i = e[0], n = e[1], s = e[2], o = e[3]; return { obj: new l(i, n, s, o), endPos: s } }, parseDict: function (e) { var t = 0; function a() { var a = e[t++]; if (30 === a) return function () { var a = ""; const r = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", ".", "E", "E-", null, "-"]; var i = e.length; for (; t < i;) { var n = e[t++], s = n >> 4, o = 15 & n; if (15 === s) break; a += r[s]; if (15 === o) break; a += r[o] } return parseFloat(a) }(); if (28 === a) return a = ((a = e[t++]) << 24 | e[t++] << 16) >> 16; if (29 === a) return a = (a = (a = (a = e[t++]) << 8 | e[t++]) << 8 | e[t++]) << 8 | e[t++]; if (a >= 32 && a <= 246) return a - 139; if (a >= 247 && a <= 250) return 256 * (a - 247) + e[t++] + 108; if (a >= 251 && a <= 254) return -256 * (a - 251) - e[t++] - 108; (0, r.warn)('CFFParser_parseDict: "' + a + '" is a reserved command.'); return NaN } var i = [], n = []; t = 0; for (var s = e.length; t < s;) { var o = e[t]; if (o <= 21) { 12 === o && (o = o << 8 | e[++t]); n.push([o, i]); i = []; ++t } else i.push(a()) } return n }, parseIndex: function (e) { var t, a, r = new u, i = this.bytes, n = i[e++] << 8 | i[e++], s = [], o = e; if (0 !== n) { var c = i[e++], l = e + (n + 1) * c - 1; for (t = 0, a = n + 1; t < a; ++t) { for (var h = 0, d = 0; d < c; ++d) { h <<= 8; h += i[e++] } s.push(l + h) } o = s[n] } for (t = 0, a = s.length - 1; t < a; ++t) { var f = s[t], g = s[t + 1]; r.add(i.subarray(f, g)) } return { obj: r, endPos: o } }, parseNameIndex: function (e) { for (var t = [], a = 0, i = e.count; a < i; ++a) { var n = e.get(a); t.push((0, r.bytesToString)(n)) } return t }, parseStringIndex: function (e) { for (var t = new h, a = 0, i = e.count; a < i; ++a) { var n = e.get(a); t.add((0, r.bytesToString)(n)) } return t }, createDict: function (e, t, a) { for (var r = new e(a), i = 0, n = t.length; i < n; ++i) { var s = t[i], o = s[0], c = s[1]; r.setByKey(o, c) } return r }, parseCharString: function (a, i, n, s) { if (!i || a.callDepth > 10) return !1; for (var o = a.stackSize, c = a.stack, l = i.length, h = 0; h < l;) { var u = i[h++], d = null; if (12 === u) { var f = i[h++]; if (0 === f) { i[h - 2] = 139; i[h - 1] = 22; o = 0 } else d = t[f] } else if (28 === u) { c[o] = (i[h] << 24 | i[h + 1] << 16) >> 16; h += 2; o++ } else if (14 === u) { if (o >= 4) { o -= 4; if (this.seacAnalysisEnabled) { a.seac = c.slice(o, o + 4); return !1 } } d = e[u] } else if (u >= 32 && u <= 246) { c[o] = u - 139; o++ } else if (u >= 247 && u <= 254) { c[o] = u < 251 ? (u - 247 << 8) + i[h] + 108 : -(u - 251 << 8) - i[h] - 108; h++; o++ } else if (255 === u) { c[o] = (i[h] << 24 | i[h + 1] << 16 | i[h + 2] << 8 | i[h + 3]) / 65536; h += 4; o++ } else if (19 === u || 20 === u) { a.hints += o >> 1; h += a.hints + 7 >> 3; o %= 2; d = e[u] } else { if (10 === u || 29 === u) { var g; if (!(g = 10 === u ? n : s)) { d = e[u]; (0, r.warn)("Missing subrsIndex for " + d.id); return !1 } var m = 32768; g.count < 1240 ? m = 107 : g.count < 33900 && (m = 1131); var p = c[--o] + m; if (p < 0 || p >= g.count || isNaN(p)) { d = e[u]; (0, r.warn)("Out of bounds subrIndex for " + d.id); return !1 } a.stackSize = o; a.callDepth++; if (!this.parseCharString(a, g.get(p), n, s)) return !1; a.callDepth--; o = a.stackSize; continue } if (11 === u) { a.stackSize = o; return !0 } d = e[u] } if (d) { if (d.stem) { a.hints += o >> 1; if (3 === u || 23 === u) a.hasVStems = !0; else if (a.hasVStems && (1 === u || 18 === u)) { (0, r.warn)("CFF stem hints are in wrong order"); i[h - 1] = 1 === u ? 3 : 23 } } if ("min" in d && !a.undefStack && o < d.min) { (0, r.warn)("Not enough parameters for " + d.id + "; actual: " + o + ", expected: " + d.min); return !1 } if (a.firstStackClearing && d.stackClearing) { a.firstStackClearing = !1; (o -= d.min) >= 2 && d.stem ? o %= 2 : o > 1 && (0, r.warn)("Found too many parameters for stack-clearing command"); o > 0 && c[o - 1] >= 0 && (a.width = c[o - 1]) } if ("stackDelta" in d) { "stackFn" in d && d.stackFn(c, o); o += d.stackDelta } else if (d.stackClearing) o = 0; else if (d.resetStack) { o = 0; a.undefStack = !1 } else if (d.undefStack) { o = 0; a.undefStack = !0; a.firstStackClearing = !1 } } } a.stackSize = o; return !0 }, parseCharStrings({ charStrings: e, localSubrIndex: t, globalSubrIndex: a, fdSelect: i, fdArray: n, privateDict: s }) { for (var o = [], c = [], l = e.count, h = 0; h < l; h++) { var u = e.get(h), d = { callDepth: 0, stackSize: 0, stack: [], undefStack: !0, hints: 0, firstStackClearing: !0, seac: null, width: null, hasVStems: !1 }, f = !0, g = null, m = s; if (i && n.length) { var p = i.getFDIndex(h); if (-1 === p) { (0, r.warn)("Glyph index is not in fd select."); f = !1 } if (p >= n.length) { (0, r.warn)("Invalid fd index for glyph index."); f = !1 } f && (g = (m = n[p].privateDict).subrsIndex) } else t && (g = t); f && (f = this.parseCharString(d, u, g, a)); if (null !== d.width) { const e = m.getByName("nominalWidthX"); c[h] = e + d.width } else { const e = m.getByName("defaultWidthX"); c[h] = e } null !== d.seac && (o[h] = d.seac); f || e.set(h, new Uint8Array([14])) } return { charStrings: e, seacs: o, widths: c } }, emptyPrivateDictionary: function (e) { var t = this.createDict(g, [], e.strings); e.setByKey(18, [0, 0]); e.privateDict = t }, parsePrivateDict: function (e) { if (e.hasName("Private")) { var t = e.getByName("Private"); if (Array.isArray(t) && 2 === t.length) { var a = t[0], r = t[1]; if (0 === a || r >= this.bytes.length) this.emptyPrivateDictionary(e); else { var i = r + a, n = this.bytes.subarray(r, i), s = this.parseDict(n), o = this.createDict(g, s, e.strings); e.privateDict = o; if (o.getByName("Subrs")) { var c = o.getByName("Subrs"), l = r + c; if (0 === c || l >= this.bytes.length) this.emptyPrivateDictionary(e); else { var h = this.parseIndex(l); o.subrsIndex = h.obj } } } } else e.removeByName("Private") } else this.emptyPrivateDictionary(e) }, parseCharsets: function (e, t, a, n) { if (0 === e) return new p(!0, m.ISO_ADOBE, i.ISOAdobeCharset); if (1 === e) return new p(!0, m.EXPERT, i.ExpertCharset); if (2 === e) return new p(!0, m.EXPERT_SUBSET, i.ExpertSubsetCharset); var s, o, c, l = this.bytes, h = e, u = l[e++], d = [".notdef"]; t -= 1; switch (u) { case 0: for (c = 0; c < t; c++) { s = l[e++] << 8 | l[e++]; d.push(n ? s : a.get(s)) } break; case 1: for (; d.length <= t;) { s = l[e++] << 8 | l[e++]; o = l[e++]; for (c = 0; c <= o; c++)d.push(n ? s++ : a.get(s++)) } break; case 2: for (; d.length <= t;) { s = l[e++] << 8 | l[e++]; o = l[e++] << 8 | l[e++]; for (c = 0; c <= o; c++)d.push(n ? s++ : a.get(s++)) } break; default: throw new r.FormatError("Unknown charset format") }var f = e, g = l.subarray(h, f); return new p(!1, u, d, g) }, parseEncoding: function (e, t, a, i) { var s, o, c, l = Object.create(null), h = this.bytes, u = !1, d = null; if (0 === e || 1 === e) { u = !0; s = e; var f = e ? n.ExpertEncoding : n.StandardEncoding; for (o = 0, c = i.length; o < c; o++) { var g = f.indexOf(i[o]); -1 !== g && (l[g] = o) } } else { var m = e; switch (127 & (s = h[e++])) { case 0: var p = h[e++]; for (o = 1; o <= p; o++)l[h[e++]] = o; break; case 1: var y = h[e++], v = 1; for (o = 0; o < y; o++)for (var w = h[e++], k = h[e++], S = w; S <= w + k; S++)l[S] = v++; break; default: throw new r.FormatError(`Unknown encoding format: ${s} in CFF`) }var C = e; if (128 & s) { h[m] &= 127; !function () { var t = h[e++]; for (o = 0; o < t; o++) { var r = h[e++], n = (h[e++] << 8) + (255 & h[e++]); l[r] = i.indexOf(a.get(n)) } }() } d = h.subarray(m, C) } return new b(u, s &= 127, l, d) }, parseFDSelect: function (e, t) { var a, i = this.bytes, n = i[e++], s = []; switch (n) { case 0: for (a = 0; a < t; ++a) { var o = i[e++]; s.push(o) } break; case 3: var c = i[e++] << 8 | i[e++]; for (a = 0; a < c; ++a) { var l = i[e++] << 8 | i[e++]; if (0 === a && 0 !== l) { (0, r.warn)("parseFDSelect: The first range must have a first GID of 0 -- trying to recover."); l = 0 } for (var h = i[e++], u = i[e] << 8 | i[e + 1], d = l; d < u; ++d)s.push(h) } e += 2; break; default: throw new r.FormatError(`parseFDSelect: Unknown format "${n}".`) }if (s.length !== t) throw new r.FormatError("parseFDSelect: Invalid font data."); return new y(n, s) } }; return a }(); t.CFFParser = o; var c = function () { function e() { this.header = null; this.names = []; this.topDict = null; this.strings = new h; this.globalSubrIndex = null; this.encoding = null; this.charset = null; this.charStrings = null; this.fdArray = []; this.fdSelect = null; this.isCIDFont = !1 } e.prototype = { duplicateFirstGlyph: function () { if (this.charStrings.count >= 65535) (0, r.warn)("Not enough space in charstrings to duplicate first glyph."); else { var e = this.charStrings.get(0); this.charStrings.add(e); this.isCIDFont && this.fdSelect.fdSelect.push(this.fdSelect.fdSelect[0]) } }, hasGlyphId: function (e) { return !(e < 0 || e >= this.charStrings.count) && this.charStrings.get(e).length > 0 } }; return e }(); t.CFF = c; var l = function (e, t, a, r) { this.major = e; this.minor = t; this.hdrSize = a; this.offSize = r }; t.CFFHeader = l; var h = function () { function e() { this.strings = [] } e.prototype = { get: function (e) { return e >= 0 && e <= 390 ? s[e] : e - 391 <= this.strings.length ? this.strings[e - 391] : s[0] }, getSID: function (e) { let t = s.indexOf(e); if (-1 !== t) return t; t = this.strings.indexOf(e); return -1 !== t ? t + 391 : -1 }, add: function (e) { this.strings.push(e) }, get count() { return this.strings.length } }; return e }(); t.CFFStrings = h; var u = function () { function e() { this.objects = []; this.length = 0 } e.prototype = { add: function (e) { this.length += e.length; this.objects.push(e) }, set: function (e, t) { this.length += t.length - this.objects[e].length; this.objects[e] = t }, get: function (e) { return this.objects[e] }, get count() { return this.objects.length } }; return e }(); t.CFFIndex = u; var d = function () { function e(e, t) { this.keyToNameMap = e.keyToNameMap; this.nameToKeyMap = e.nameToKeyMap; this.defaults = e.defaults; this.types = e.types; this.opcodes = e.opcodes; this.order = e.order; this.strings = t; this.values = Object.create(null) } e.prototype = { setByKey: function (e, t) { if (!(e in this.keyToNameMap)) return !1; var a = t.length; if (0 === a) return !0; for (var i = 0; i < a; i++)if (isNaN(t[i])) { (0, r.warn)('Invalid CFFDict value: "' + t + '" for key "' + e + '".'); return !0 } var n = this.types[e]; "num" !== n && "sid" !== n && "offset" !== n || (t = t[0]); this.values[e] = t; return !0 }, setByName: function (e, t) { if (!(e in this.nameToKeyMap)) throw new r.FormatError(`Invalid dictionary name "${e}"`); this.values[this.nameToKeyMap[e]] = t }, hasName: function (e) { return this.nameToKeyMap[e] in this.values }, getByName: function (e) { if (!(e in this.nameToKeyMap)) throw new r.FormatError(`Invalid dictionary name ${e}"`); var t = this.nameToKeyMap[e]; return t in this.values ? this.values[t] : this.defaults[t] }, removeByName: function (e) { delete this.values[this.nameToKeyMap[e]] } }; e.createTables = function (e) { for (var t = { keyToNameMap: {}, nameToKeyMap: {}, defaults: {}, types: {}, opcodes: {}, order: [] }, a = 0, r = e.length; a < r; ++a) { var i = e[a], n = Array.isArray(i[0]) ? (i[0][0] << 8) + i[0][1] : i[0]; t.keyToNameMap[n] = i[1]; t.nameToKeyMap[i[1]] = n; t.types[n] = i[2]; t.defaults[n] = i[3]; t.opcodes[n] = Array.isArray(i[0]) ? i[0] : [i[0]]; t.order.push(n) } return t }; return e }(), f = function () { var e = [[[12, 30], "ROS", ["sid", "sid", "num"], null], [[12, 20], "SyntheticBase", "num", null], [0, "version", "sid", null], [1, "Notice", "sid", null], [[12, 0], "Copyright", "sid", null], [2, "FullName", "sid", null], [3, "FamilyName", "sid", null], [4, "Weight", "sid", null], [[12, 1], "isFixedPitch", "num", 0], [[12, 2], "ItalicAngle", "num", 0], [[12, 3], "UnderlinePosition", "num", -100], [[12, 4], "UnderlineThickness", "num", 50], [[12, 5], "PaintType", "num", 0], [[12, 6], "CharstringType", "num", 2], [[12, 7], "FontMatrix", ["num", "num", "num", "num", "num", "num"], [.001, 0, 0, .001, 0, 0]], [13, "UniqueID", "num", null], [5, "FontBBox", ["num", "num", "num", "num"], [0, 0, 0, 0]], [[12, 8], "StrokeWidth", "num", 0], [14, "XUID", "array", null], [15, "charset", "offset", 0], [16, "Encoding", "offset", 0], [17, "CharStrings", "offset", 0], [18, "Private", ["offset", "offset"], null], [[12, 21], "PostScript", "sid", null], [[12, 22], "BaseFontName", "sid", null], [[12, 23], "BaseFontBlend", "delta", null], [[12, 31], "CIDFontVersion", "num", 0], [[12, 32], "CIDFontRevision", "num", 0], [[12, 33], "CIDFontType", "num", 0], [[12, 34], "CIDCount", "num", 8720], [[12, 35], "UIDBase", "num", null], [[12, 37], "FDSelect", "offset", null], [[12, 36], "FDArray", "offset", null], [[12, 38], "FontName", "sid", null]], t = null; function a(a) { null === t && (t = d.createTables(e)); d.call(this, t, a); this.privateDict = null } a.prototype = Object.create(d.prototype); return a }(); t.CFFTopDict = f; var g = function () { var e = [[6, "BlueValues", "delta", null], [7, "OtherBlues", "delta", null], [8, "FamilyBlues", "delta", null], [9, "FamilyOtherBlues", "delta", null], [[12, 9], "BlueScale", "num", .039625], [[12, 10], "BlueShift", "num", 7], [[12, 11], "BlueFuzz", "num", 1], [10, "StdHW", "num", null], [11, "StdVW", "num", null], [[12, 12], "StemSnapH", "delta", null], [[12, 13], "StemSnapV", "delta", null], [[12, 14], "ForceBold", "num", 0], [[12, 17], "LanguageGroup", "num", 0], [[12, 18], "ExpansionFactor", "num", .06], [[12, 19], "initialRandomSeed", "num", 0], [20, "defaultWidthX", "num", 0], [21, "nominalWidthX", "num", 0], [19, "Subrs", "offset", null]], t = null; function a(a) { null === t && (t = d.createTables(e)); d.call(this, t, a); this.subrsIndex = null } a.prototype = Object.create(d.prototype); return a }(); t.CFFPrivateDict = g; var m = { ISO_ADOBE: 0, EXPERT: 1, EXPERT_SUBSET: 2 }, p = function (e, t, a, r) { this.predefined = e; this.format = t; this.charset = a; this.raw = r }; t.CFFCharset = p; var b = function (e, t, a, r) { this.predefined = e; this.format = t; this.encoding = a; this.raw = r }, y = function () { function e(e, t) { this.format = e; this.fdSelect = t } e.prototype = { getFDIndex: function (e) { return e < 0 || e >= this.fdSelect.length ? -1 : this.fdSelect[e] } }; return e }(); t.CFFFDSelect = y; var v = function () { function e() { this.offsets = Object.create(null) } e.prototype = { isTracking: function (e) { return e in this.offsets }, track: function (e, t) { if (e in this.offsets) throw new r.FormatError(`Already tracking location of ${e}`); this.offsets[e] = t }, offset: function (e) { for (var t in this.offsets) this.offsets[t] += e }, setEntryLocation: function (e, t, a) { if (!(e in this.offsets)) throw new r.FormatError(`Not tracking location of ${e}`); for (var i = a.data, n = this.offsets[e], s = 0, o = t.length; s < o; ++s) { var c = 5 * s + n, l = c + 1, h = c + 2, u = c + 3, d = c + 4; if (29 !== i[c] || 0 !== i[l] || 0 !== i[h] || 0 !== i[u] || 0 !== i[d]) throw new r.FormatError("writing to an offset that is not empty"); var f = t[s]; i[c] = 29; i[l] = f >> 24 & 255; i[h] = f >> 16 & 255; i[u] = f >> 8 & 255; i[d] = 255 & f } } }; return e }(), w = function () { function e(e) { this.cff = e } e.prototype = { compile: function () { var e = this.cff, t = { data: [], length: 0, add: function (e) { this.data = this.data.concat(e); this.length = this.data.length } }, a = this.compileHeader(e.header); t.add(a); var i = this.compileNameIndex(e.names); t.add(i); if (e.isCIDFont && e.topDict.hasName("FontMatrix")) { var n = e.topDict.getByName("FontMatrix"); e.topDict.removeByName("FontMatrix"); for (var s = 0, o = e.fdArray.length; s < o; s++) { var c = e.fdArray[s], l = n.slice(0); c.hasName("FontMatrix") && (l = r.Util.transform(l, c.getByName("FontMatrix"))); c.setByName("FontMatrix", l) } } e.topDict.setByName("charset", 0); var h = this.compileTopDicts([e.topDict], t.length, e.isCIDFont); t.add(h.output); var u = h.trackers[0], d = this.compileStringIndex(e.strings.strings); t.add(d); var f = this.compileIndex(e.globalSubrIndex); t.add(f); if (e.encoding && e.topDict.hasName("Encoding")) if (e.encoding.predefined) u.setEntryLocation("Encoding", [e.encoding.format], t); else { var g = this.compileEncoding(e.encoding); u.setEntryLocation("Encoding", [t.length], t); t.add(g) } var m = this.compileCharset(e.charset, e.charStrings.count, e.strings, e.isCIDFont); u.setEntryLocation("charset", [t.length], t); t.add(m); var p = this.compileCharStrings(e.charStrings); u.setEntryLocation("CharStrings", [t.length], t); t.add(p); if (e.isCIDFont) { u.setEntryLocation("FDSelect", [t.length], t); var b = this.compileFDSelect(e.fdSelect); t.add(b); h = this.compileTopDicts(e.fdArray, t.length, !0); u.setEntryLocation("FDArray", [t.length], t); t.add(h.output); var y = h.trackers; this.compilePrivateDicts(e.fdArray, y, t) } this.compilePrivateDicts([e.topDict], [u], t); t.add([0]); return t.data }, encodeNumber: function (e) { return parseFloat(e) !== parseInt(e, 10) || isNaN(e) ? this.encodeFloat(e) : this.encodeInteger(e) }, encodeFloat: function (e) { var t = e.toString(), a = /\.(\d*?)(?:9{5,20}|0{5,20})\d{0,2}(?:e(.+)|$)/.exec(t); if (a) { var r = parseFloat("1e" + ((a[2] ? +a[2] : 0) + a[1].length)); t = (Math.round(e * r) / r).toString() } var i, n, s = ""; for (i = 0, n = t.length; i < n; ++i) { var o = t[i]; s += "e" === o ? "-" === t[++i] ? "c" : "b" : "." === o ? "a" : "-" === o ? "e" : o } var c = [30]; for (i = 0, n = (s += 1 & s.length ? "f" : "ff").length; i < n; i += 2)c.push(parseInt(s.substring(i, i + 2), 16)); return c }, encodeInteger: function (e) { return e >= -107 && e <= 107 ? [e + 139] : e >= 108 && e <= 1131 ? [247 + ((e -= 108) >> 8), 255 & e] : e >= -1131 && e <= -108 ? [251 + ((e = -e - 108) >> 8), 255 & e] : e >= -32768 && e <= 32767 ? [28, e >> 8 & 255, 255 & e] : [29, e >> 24 & 255, e >> 16 & 255, e >> 8 & 255, 255 & e] }, compileHeader: function (e) { return [e.major, e.minor, e.hdrSize, e.offSize] }, compileNameIndex: function (e) { for (var t = new u, a = 0, i = e.length; a < i; ++a) { for (var n = e[a], s = Math.min(n.length, 127), o = new Array(s), c = 0; c < s; c++) { var l = n[c]; (l < "!" || l > "~" || "[" === l || "]" === l || "(" === l || ")" === l || "{" === l || "}" === l || "<" === l || ">" === l || "/" === l || "%" === l) && (l = "_"); o[c] = l } "" === (o = o.join("")) && (o = "Bad_Font_Name"); t.add((0, r.stringToBytes)(o)) } return this.compileIndex(t) }, compileTopDicts: function (e, t, a) { for (var r = [], i = new u, n = 0, s = e.length; n < s; ++n) { var o = e[n]; if (a) { o.removeByName("CIDFontVersion"); o.removeByName("CIDFontRevision"); o.removeByName("CIDFontType"); o.removeByName("CIDCount"); o.removeByName("UIDBase") } var c = new v, l = this.compileDict(o, c); r.push(c); i.add(l); c.offset(t) } return { trackers: r, output: i = this.compileIndex(i, r) } }, compilePrivateDicts: function (e, t, a) { for (var i = 0, n = e.length; i < n; ++i) { var s = e[i], o = s.privateDict; if (!o || !s.hasName("Private")) throw new r.FormatError("There must be a private dictionary."); var c = new v, l = this.compileDict(o, c), h = a.length; c.offset(h); l.length || (h = 0); t[i].setEntryLocation("Private", [l.length, h], a); a.add(l); if (o.subrsIndex && o.hasName("Subrs")) { var u = this.compileIndex(o.subrsIndex); c.setEntryLocation("Subrs", [l.length], a); a.add(u) } } }, compileDict: function (e, t) { for (var a = [], i = e.order, n = 0; n < i.length; ++n) { var s = i[n]; if (s in e.values) { var o = e.values[s], c = e.types[s]; Array.isArray(c) || (c = [c]); Array.isArray(o) || (o = [o]); if (0 !== o.length) { for (var l = 0, h = c.length; l < h; ++l) { var u = c[l], d = o[l]; switch (u) { case "num": case "sid": a = a.concat(this.encodeNumber(d)); break; case "offset": var f = e.keyToNameMap[s]; t.isTracking(f) || t.track(f, a.length); a = a.concat([29, 0, 0, 0, 0]); break; case "array": case "delta": a = a.concat(this.encodeNumber(d)); for (var g = 1, m = o.length; g < m; ++g)a = a.concat(this.encodeNumber(o[g])); break; default: throw new r.FormatError(`Unknown data type of ${u}`) } } a = a.concat(e.opcodes[s]) } } } return a }, compileStringIndex: function (e) { for (var t = new u, a = 0, i = e.length; a < i; ++a)t.add((0, r.stringToBytes)(e[a])); return this.compileIndex(t) }, compileGlobalSubrIndex: function () { var e = this.cff.globalSubrIndex; this.out.writeByteArray(this.compileIndex(e)) }, compileCharStrings: function (e) { for (var t = new u, a = 0; a < e.count; a++) { var r = e.get(a); 0 !== r.length ? t.add(r) : t.add(new Uint8Array([139, 14])) } return this.compileIndex(t) }, compileCharset: function (e, t, a, i) { let n; const s = t - 1; if (i) n = new Uint8Array([2, 0, 0, s >> 8 & 255, 255 & s]); else { n = new Uint8Array(1 + 2 * s); n[0] = 0; let t = 0; const i = e.charset.length; let o = !1; for (let s = 1; s < n.length; s += 2) { let c = 0; if (t < i) { const i = e.charset[t++]; c = a.getSID(i); if (-1 === c) { c = 0; if (!o) { o = !0; (0, r.warn)(`Couldn't find ${i} in CFF strings`) } } } n[s] = c >> 8 & 255; n[s + 1] = 255 & c } } return this.compileTypedArray(n) }, compileEncoding: function (e) { return this.compileTypedArray(e.raw) }, compileFDSelect: function (e) { const t = e.format; let a, r; switch (t) { case 0: a = new Uint8Array(1 + e.fdSelect.length); a[0] = t; for (r = 0; r < e.fdSelect.length; r++)a[r + 1] = e.fdSelect[r]; break; case 3: const i = 0; let n = e.fdSelect[0]; const s = [t, 0, 0, i >> 8 & 255, 255 & i, n]; for (r = 1; r < e.fdSelect.length; r++) { const t = e.fdSelect[r]; if (t !== n) { s.push(r >> 8 & 255, 255 & r, t); n = t } } const o = (s.length - 3) / 3; s[1] = o >> 8 & 255; s[2] = 255 & o; s.push(r >> 8 & 255, 255 & r); a = new Uint8Array(s) }return this.compileTypedArray(a) }, compileTypedArray: function (e) { for (var t = [], a = 0, r = e.length; a < r; ++a)t[a] = e[a]; return t }, compileIndex: function (e, t) { t = t || []; var a = e.objects, r = a.length; if (0 === r) return [0, 0, 0]; var i, n, s = [r >> 8 & 255, 255 & r], o = 1; for (i = 0; i < r; ++i)o += a[i].length; n = o < 256 ? 1 : o < 65536 ? 2 : o < 16777216 ? 3 : 4; s.push(n); var c = 1; for (i = 0; i < r + 1; i++) { 1 === n ? s.push(255 & c) : 2 === n ? s.push(c >> 8 & 255, 255 & c) : 3 === n ? s.push(c >> 16 & 255, c >> 8 & 255, 255 & c) : s.push(c >>> 24 & 255, c >> 16 & 255, c >> 8 & 255, 255 & c); a[i] && (c += a[i].length) } for (i = 0; i < r; i++) { t[i] && t[i].offset(s.length); for (var l = 0, h = a[i].length; l < h; l++)s.push(a[i][l]) } return s } }; return e }(); t.CFFCompiler = w }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.ExpertSubsetCharset = t.ExpertCharset = t.ISOAdobeCharset = void 0; t.ISOAdobeCharset = [".notdef", "space", "exclam", "quotedbl", "numbersign", "dollar", "percent", "ampersand", "quoteright", "parenleft", "parenright", "asterisk", "plus", "comma", "hyphen", "period", "slash", "zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "colon", "semicolon", "less", "equal", "greater", "question", "at", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "bracketleft", "backslash", "bracketright", "asciicircum", "underscore", "quoteleft", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "braceleft", "bar", "braceright", "asciitilde", "exclamdown", "cent", "sterling", "fraction", "yen", "florin", "section", "currency", "quotesingle", "quotedblleft", "guillemotleft", "guilsinglleft", "guilsinglright", "fi", "fl", "endash", "dagger", "daggerdbl", "periodcentered", "paragraph", "bullet", "quotesinglbase", "quotedblbase", "quotedblright", "guillemotright", "ellipsis", "perthousand", "questiondown", "grave", "acute", "circumflex", "tilde", "macron", "breve", "dotaccent", "dieresis", "ring", "cedilla", "hungarumlaut", "ogonek", "caron", "emdash", "AE", "ordfeminine", "Lslash", "Oslash", "OE", "ordmasculine", "ae", "dotlessi", "lslash", "oslash", "oe", "germandbls", "onesuperior", "logicalnot", "mu", "trademark", "Eth", "onehalf", "plusminus", "Thorn", "onequarter", "divide", "brokenbar", "degree", "thorn", "threequarters", "twosuperior", "registered", "minus", "eth", "multiply", "threesuperior", "copyright", "Aacute", "Acircumflex", "Adieresis", "Agrave", "Aring", "Atilde", "Ccedilla", "Eacute", "Ecircumflex", "Edieresis", "Egrave", "Iacute", "Icircumflex", "Idieresis", "Igrave", "Ntilde", "Oacute", "Ocircumflex", "Odieresis", "Ograve", "Otilde", "Scaron", "Uacute", "Ucircumflex", "Udieresis", "Ugrave", "Yacute", "Ydieresis", "Zcaron", "aacute", "acircumflex", "adieresis", "agrave", "aring", "atilde", "ccedilla", "eacute", "ecircumflex", "edieresis", "egrave", "iacute", "icircumflex", "idieresis", "igrave", "ntilde", "oacute", "ocircumflex", "odieresis", "ograve", "otilde", "scaron", "uacute", "ucircumflex", "udieresis", "ugrave", "yacute", "ydieresis", "zcaron"]; t.ExpertCharset = [".notdef", "space", "exclamsmall", "Hungarumlautsmall", "dollaroldstyle", "dollarsuperior", "ampersandsmall", "Acutesmall", "parenleftsuperior", "parenrightsuperior", "twodotenleader", "onedotenleader", "comma", "hyphen", "period", "fraction", "zerooldstyle", "oneoldstyle", "twooldstyle", "threeoldstyle", "fouroldstyle", "fiveoldstyle", "sixoldstyle", "sevenoldstyle", "eightoldstyle", "nineoldstyle", "colon", "semicolon", "commasuperior", "threequartersemdash", "periodsuperior", "questionsmall", "asuperior", "bsuperior", "centsuperior", "dsuperior", "esuperior", "isuperior", "lsuperior", "msuperior", "nsuperior", "osuperior", "rsuperior", "ssuperior", "tsuperior", "ff", "fi", "fl", "ffi", "ffl", "parenleftinferior", "parenrightinferior", "Circumflexsmall", "hyphensuperior", "Gravesmall", "Asmall", "Bsmall", "Csmall", "Dsmall", "Esmall", "Fsmall", "Gsmall", "Hsmall", "Ismall", "Jsmall", "Ksmall", "Lsmall", "Msmall", "Nsmall", "Osmall", "Psmall", "Qsmall", "Rsmall", "Ssmall", "Tsmall", "Usmall", "Vsmall", "Wsmall", "Xsmall", "Ysmall", "Zsmall", "colonmonetary", "onefitted", "rupiah", "Tildesmall", "exclamdownsmall", "centoldstyle", "Lslashsmall", "Scaronsmall", "Zcaronsmall", "Dieresissmall", "Brevesmall", "Caronsmall", "Dotaccentsmall", "Macronsmall", "figuredash", "hypheninferior", "Ogoneksmall", "Ringsmall", "Cedillasmall", "onequarter", "onehalf", "threequarters", "questiondownsmall", "oneeighth", "threeeighths", "fiveeighths", "seveneighths", "onethird", "twothirds", "zerosuperior", "onesuperior", "twosuperior", "threesuperior", "foursuperior", "fivesuperior", "sixsuperior", "sevensuperior", "eightsuperior", "ninesuperior", "zeroinferior", "oneinferior", "twoinferior", "threeinferior", "fourinferior", "fiveinferior", "sixinferior", "seveninferior", "eightinferior", "nineinferior", "centinferior", "dollarinferior", "periodinferior", "commainferior", "Agravesmall", "Aacutesmall", "Acircumflexsmall", "Atildesmall", "Adieresissmall", "Aringsmall", "AEsmall", "Ccedillasmall", "Egravesmall", "Eacutesmall", "Ecircumflexsmall", "Edieresissmall", "Igravesmall", "Iacutesmall", "Icircumflexsmall", "Idieresissmall", "Ethsmall", "Ntildesmall", "Ogravesmall", "Oacutesmall", "Ocircumflexsmall", "Otildesmall", "Odieresissmall", "OEsmall", "Oslashsmall", "Ugravesmall", "Uacutesmall", "Ucircumflexsmall", "Udieresissmall", "Yacutesmall", "Thornsmall", "Ydieresissmall"]; t.ExpertSubsetCharset = [".notdef", "space", "dollaroldstyle", "dollarsuperior", "parenleftsuperior", "parenrightsuperior", "twodotenleader", "onedotenleader", "comma", "hyphen", "period", "fraction", "zerooldstyle", "oneoldstyle", "twooldstyle", "threeoldstyle", "fouroldstyle", "fiveoldstyle", "sixoldstyle", "sevenoldstyle", "eightoldstyle", "nineoldstyle", "colon", "semicolon", "commasuperior", "threequartersemdash", "periodsuperior", "asuperior", "bsuperior", "centsuperior", "dsuperior", "esuperior", "isuperior", "lsuperior", "msuperior", "nsuperior", "osuperior", "rsuperior", "ssuperior", "tsuperior", "ff", "fi", "fl", "ffi", "ffl", "parenleftinferior", "parenrightinferior", "hyphensuperior", "colonmonetary", "onefitted", "rupiah", "centoldstyle", "figuredash", "hypheninferior", "onequarter", "onehalf", "threequarters", "oneeighth", "threeeighths", "fiveeighths", "seveneighths", "onethird", "twothirds", "zerosuperior", "onesuperior", "twosuperior", "threesuperior", "foursuperior", "fivesuperior", "sixsuperior", "sevensuperior", "eightsuperior", "ninesuperior", "zeroinferior", "oneinferior", "twoinferior", "threeinferior", "fourinferior", "fiveinferior", "sixinferior", "seveninferior", "eightinferior", "nineinferior", "centinferior", "dollarinferior", "periodinferior", "commainferior"] }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.getEncoding = function (e) { switch (e) { case "WinAnsiEncoding": return o; case "StandardEncoding": return s; case "MacRomanEncoding": return n; case "SymbolSetEncoding": return c; case "ZapfDingbatsEncoding": return l; case "ExpertEncoding": return r; case "MacExpertEncoding": return i; default: return null } }; t.ExpertEncoding = t.ZapfDingbatsEncoding = t.SymbolSetEncoding = t.MacRomanEncoding = t.StandardEncoding = t.WinAnsiEncoding = void 0; const r = ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "space", "exclamsmall", "Hungarumlautsmall", "", "dollaroldstyle", "dollarsuperior", "ampersandsmall", "Acutesmall", "parenleftsuperior", "parenrightsuperior", "twodotenleader", "onedotenleader", "comma", "hyphen", "period", "fraction", "zerooldstyle", "oneoldstyle", "twooldstyle", "threeoldstyle", "fouroldstyle", "fiveoldstyle", "sixoldstyle", "sevenoldstyle", "eightoldstyle", "nineoldstyle", "colon", "semicolon", "commasuperior", "threequartersemdash", "periodsuperior", "questionsmall", "", "asuperior", "bsuperior", "centsuperior", "dsuperior", "esuperior", "", "", "", "isuperior", "", "", "lsuperior", "msuperior", "nsuperior", "osuperior", "", "", "rsuperior", "ssuperior", "tsuperior", "", "ff", "fi", "fl", "ffi", "ffl", "parenleftinferior", "", "parenrightinferior", "Circumflexsmall", "hyphensuperior", "Gravesmall", "Asmall", "Bsmall", "Csmall", "Dsmall", "Esmall", "Fsmall", "Gsmall", "Hsmall", "Ismall", "Jsmall", "Ksmall", "Lsmall", "Msmall", "Nsmall", "Osmall", "Psmall", "Qsmall", "Rsmall", "Ssmall", "Tsmall", "Usmall", "Vsmall", "Wsmall", "Xsmall", "Ysmall", "Zsmall", "colonmonetary", "onefitted", "rupiah", "Tildesmall", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "exclamdownsmall", "centoldstyle", "Lslashsmall", "", "", "Scaronsmall", "Zcaronsmall", "Dieresissmall", "Brevesmall", "Caronsmall", "", "Dotaccentsmall", "", "", "Macronsmall", "", "", "figuredash", "hypheninferior", "", "", "Ogoneksmall", "Ringsmall", "Cedillasmall", "", "", "", "onequarter", "onehalf", "threequarters", "questiondownsmall", "oneeighth", "threeeighths", "fiveeighths", "seveneighths", "onethird", "twothirds", "", "", "zerosuperior", "onesuperior", "twosuperior", "threesuperior", "foursuperior", "fivesuperior", "sixsuperior", "sevensuperior", "eightsuperior", "ninesuperior", "zeroinferior", "oneinferior", "twoinferior", "threeinferior", "fourinferior", "fiveinferior", "sixinferior", "seveninferior", "eightinferior", "nineinferior", "centinferior", "dollarinferior", "periodinferior", "commainferior", "Agravesmall", "Aacutesmall", "Acircumflexsmall", "Atildesmall", "Adieresissmall", "Aringsmall", "AEsmall", "Ccedillasmall", "Egravesmall", "Eacutesmall", "Ecircumflexsmall", "Edieresissmall", "Igravesmall", "Iacutesmall", "Icircumflexsmall", "Idieresissmall", "Ethsmall", "Ntildesmall", "Ogravesmall", "Oacutesmall", "Ocircumflexsmall", "Otildesmall", "Odieresissmall", "OEsmall", "Oslashsmall", "Ugravesmall", "Uacutesmall", "Ucircumflexsmall", "Udieresissmall", "Yacutesmall", "Thornsmall", "Ydieresissmall"]; t.ExpertEncoding = r; const i = ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "space", "exclamsmall", "Hungarumlautsmall", "centoldstyle", "dollaroldstyle", "dollarsuperior", "ampersandsmall", "Acutesmall", "parenleftsuperior", "parenrightsuperior", "twodotenleader", "onedotenleader", "comma", "hyphen", "period", "fraction", "zerooldstyle", "oneoldstyle", "twooldstyle", "threeoldstyle", "fouroldstyle", "fiveoldstyle", "sixoldstyle", "sevenoldstyle", "eightoldstyle", "nineoldstyle", "colon", "semicolon", "", "threequartersemdash", "", "questionsmall", "", "", "", "", "Ethsmall", "", "", "onequarter", "onehalf", "threequarters", "oneeighth", "threeeighths", "fiveeighths", "seveneighths", "onethird", "twothirds", "", "", "", "", "", "", "ff", "fi", "fl", "ffi", "ffl", "parenleftinferior", "", "parenrightinferior", "Circumflexsmall", "hypheninferior", "Gravesmall", "Asmall", "Bsmall", "Csmall", "Dsmall", "Esmall", "Fsmall", "Gsmall", "Hsmall", "Ismall", "Jsmall", "Ksmall", "Lsmall", "Msmall", "Nsmall", "Osmall", "Psmall", "Qsmall", "Rsmall", "Ssmall", "Tsmall", "Usmall", "Vsmall", "Wsmall", "Xsmall", "Ysmall", "Zsmall", "colonmonetary", "onefitted", "rupiah", "Tildesmall", "", "", "asuperior", "centsuperior", "", "", "", "", "Aacutesmall", "Agravesmall", "Acircumflexsmall", "Adieresissmall", "Atildesmall", "Aringsmall", "Ccedillasmall", "Eacutesmall", "Egravesmall", "Ecircumflexsmall", "Edieresissmall", "Iacutesmall", "Igravesmall", "Icircumflexsmall", "Idieresissmall", "Ntildesmall", "Oacutesmall", "Ogravesmall", "Ocircumflexsmall", "Odieresissmall", "Otildesmall", "Uacutesmall", "Ugravesmall", "Ucircumflexsmall", "Udieresissmall", "", "eightsuperior", "fourinferior", "threeinferior", "sixinferior", "eightinferior", "seveninferior", "Scaronsmall", "", "centinferior", "twoinferior", "", "Dieresissmall", "", "Caronsmall", "osuperior", "fiveinferior", "", "commainferior", "periodinferior", "Yacutesmall", "", "dollarinferior", "", "", "Thornsmall", "", "nineinferior", "zeroinferior", "Zcaronsmall", "AEsmall", "Oslashsmall", "questiondownsmall", "oneinferior", "Lslashsmall", "", "", "", "", "", "", "Cedillasmall", "", "", "", "", "", "OEsmall", "figuredash", "hyphensuperior", "", "", "", "", "exclamdownsmall", "", "Ydieresissmall", "", "onesuperior", "twosuperior", "threesuperior", "foursuperior", "fivesuperior", "sixsuperior", "sevensuperior", "ninesuperior", "zerosuperior", "", "esuperior", "rsuperior", "tsuperior", "", "", "isuperior", "ssuperior", "dsuperior", "", "", "", "", "", "lsuperior", "Ogoneksmall", "Brevesmall", "Macronsmall", "bsuperior", "nsuperior", "msuperior", "commasuperior", "periodsuperior", "Dotaccentsmall", "Ringsmall", "", "", "", ""], n = ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "space", "exclam", "quotedbl", "numbersign", "dollar", "percent", "ampersand", "quotesingle", "parenleft", "parenright", "asterisk", "plus", "comma", "hyphen", "period", "slash", "zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "colon", "semicolon", "less", "equal", "greater", "question", "at", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "bracketleft", "backslash", "bracketright", "asciicircum", "underscore", "grave", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "braceleft", "bar", "braceright", "asciitilde", "", "Adieresis", "Aring", "Ccedilla", "Eacute", "Ntilde", "Odieresis", "Udieresis", "aacute", "agrave", "acircumflex", "adieresis", "atilde", "aring", "ccedilla", "eacute", "egrave", "ecircumflex", "edieresis", "iacute", "igrave", "icircumflex", "idieresis", "ntilde", "oacute", "ograve", "ocircumflex", "odieresis", "otilde", "uacute", "ugrave", "ucircumflex", "udieresis", "dagger", "degree", "cent", "sterling", "section", "bullet", "paragraph", "germandbls", "registered", "copyright", "trademark", "acute", "dieresis", "notequal", "AE", "Oslash", "infinity", "plusminus", "lessequal", "greaterequal", "yen", "mu", "partialdiff", "summation", "product", "pi", "integral", "ordfeminine", "ordmasculine", "Omega", "ae", "oslash", "questiondown", "exclamdown", "logicalnot", "radical", "florin", "approxequal", "Delta", "guillemotleft", "guillemotright", "ellipsis", "space", "Agrave", "Atilde", "Otilde", "OE", "oe", "endash", "emdash", "quotedblleft", "quotedblright", "quoteleft", "quoteright", "divide", "lozenge", "ydieresis", "Ydieresis", "fraction", "currency", "guilsinglleft", "guilsinglright", "fi", "fl", "daggerdbl", "periodcentered", "quotesinglbase", "quotedblbase", "perthousand", "Acircumflex", "Ecircumflex", "Aacute", "Edieresis", "Egrave", "Iacute", "Icircumflex", "Idieresis", "Igrave", "Oacute", "Ocircumflex", "apple", "Ograve", "Uacute", "Ucircumflex", "Ugrave", "dotlessi", "circumflex", "tilde", "macron", "breve", "dotaccent", "ring", "cedilla", "hungarumlaut", "ogonek", "caron"]; t.MacRomanEncoding = n; const s = ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "space", "exclam", "quotedbl", "numbersign", "dollar", "percent", "ampersand", "quoteright", "parenleft", "parenright", "asterisk", "plus", "comma", "hyphen", "period", "slash", "zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "colon", "semicolon", "less", "equal", "greater", "question", "at", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "bracketleft", "backslash", "bracketright", "asciicircum", "underscore", "quoteleft", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "braceleft", "bar", "braceright", "asciitilde", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "exclamdown", "cent", "sterling", "fraction", "yen", "florin", "section", "currency", "quotesingle", "quotedblleft", "guillemotleft", "guilsinglleft", "guilsinglright", "fi", "fl", "", "endash", "dagger", "daggerdbl", "periodcentered", "", "paragraph", "bullet", "quotesinglbase", "quotedblbase", "quotedblright", "guillemotright", "ellipsis", "perthousand", "", "questiondown", "", "grave", "acute", "circumflex", "tilde", "macron", "breve", "dotaccent", "dieresis", "", "ring", "cedilla", "", "hungarumlaut", "ogonek", "caron", "emdash", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "AE", "", "ordfeminine", "", "", "", "", "Lslash", "Oslash", "OE", "ordmasculine", "", "", "", "", "", "ae", "", "", "", "dotlessi", "", "", "lslash", "oslash", "oe", "germandbls", "", "", "", ""]; t.StandardEncoding = s; const o = ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "space", "exclam", "quotedbl", "numbersign", "dollar", "percent", "ampersand", "quotesingle", "parenleft", "parenright", "asterisk", "plus", "comma", "hyphen", "period", "slash", "zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "colon", "semicolon", "less", "equal", "greater", "question", "at", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "bracketleft", "backslash", "bracketright", "asciicircum", "underscore", "grave", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "braceleft", "bar", "braceright", "asciitilde", "bullet", "Euro", "bullet", "quotesinglbase", "florin", "quotedblbase", "ellipsis", "dagger", "daggerdbl", "circumflex", "perthousand", "Scaron", "guilsinglleft", "OE", "bullet", "Zcaron", "bullet", "bullet", "quoteleft", "quoteright", "quotedblleft", "quotedblright", "bullet", "endash", "emdash", "tilde", "trademark", "scaron", "guilsinglright", "oe", "bullet", "zcaron", "Ydieresis", "space", "exclamdown", "cent", "sterling", "currency", "yen", "brokenbar", "section", "dieresis", "copyright", "ordfeminine", "guillemotleft", "logicalnot", "hyphen", "registered", "macron", "degree", "plusminus", "twosuperior", "threesuperior", "acute", "mu", "paragraph", "periodcentered", "cedilla", "onesuperior", "ordmasculine", "guillemotright", "onequarter", "onehalf", "threequarters", "questiondown", "Agrave", "Aacute", "Acircumflex", "Atilde", "Adieresis", "Aring", "AE", "Ccedilla", "Egrave", "Eacute", "Ecircumflex", "Edieresis", "Igrave", "Iacute", "Icircumflex", "Idieresis", "Eth", "Ntilde", "Ograve", "Oacute", "Ocircumflex", "Otilde", "Odieresis", "multiply", "Oslash", "Ugrave", "Uacute", "Ucircumflex", "Udieresis", "Yacute", "Thorn", "germandbls", "agrave", "aacute", "acircumflex", "atilde", "adieresis", "aring", "ae", "ccedilla", "egrave", "eacute", "ecircumflex", "edieresis", "igrave", "iacute", "icircumflex", "idieresis", "eth", "ntilde", "ograve", "oacute", "ocircumflex", "otilde", "odieresis", "divide", "oslash", "ugrave", "uacute", "ucircumflex", "udieresis", "yacute", "thorn", "ydieresis"]; t.WinAnsiEncoding = o; const c = ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "space", "exclam", "universal", "numbersign", "existential", "percent", "ampersand", "suchthat", "parenleft", "parenright", "asteriskmath", "plus", "comma", "minus", "period", "slash", "zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "colon", "semicolon", "less", "equal", "greater", "question", "congruent", "Alpha", "Beta", "Chi", "Delta", "Epsilon", "Phi", "Gamma", "Eta", "Iota", "theta1", "Kappa", "Lambda", "Mu", "Nu", "Omicron", "Pi", "Theta", "Rho", "Sigma", "Tau", "Upsilon", "sigma1", "Omega", "Xi", "Psi", "Zeta", "bracketleft", "therefore", "bracketright", "perpendicular", "underscore", "radicalex", "alpha", "beta", "chi", "delta", "epsilon", "phi", "gamma", "eta", "iota", "phi1", "kappa", "lambda", "mu", "nu", "omicron", "pi", "theta", "rho", "sigma", "tau", "upsilon", "omega1", "omega", "xi", "psi", "zeta", "braceleft", "bar", "braceright", "similar", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "Euro", "Upsilon1", "minute", "lessequal", "fraction", "infinity", "florin", "club", "diamond", "heart", "spade", "arrowboth", "arrowleft", "arrowup", "arrowright", "arrowdown", "degree", "plusminus", "second", "greaterequal", "multiply", "proportional", "partialdiff", "bullet", "divide", "notequal", "equivalence", "approxequal", "ellipsis", "arrowvertex", "arrowhorizex", "carriagereturn", "aleph", "Ifraktur", "Rfraktur", "weierstrass", "circlemultiply", "circleplus", "emptyset", "intersection", "union", "propersuperset", "reflexsuperset", "notsubset", "propersubset", "reflexsubset", "element", "notelement", "angle", "gradient", "registerserif", "copyrightserif", "trademarkserif", "product", "radical", "dotmath", "logicalnot", "logicaland", "logicalor", "arrowdblboth", "arrowdblleft", "arrowdblup", "arrowdblright", "arrowdbldown", "lozenge", "angleleft", "registersans", "copyrightsans", "trademarksans", "summation", "parenlefttp", "parenleftex", "parenleftbt", "bracketlefttp", "bracketleftex", "bracketleftbt", "bracelefttp", "braceleftmid", "braceleftbt", "braceex", "", "angleright", "integral", "integraltp", "integralex", "integralbt", "parenrighttp", "parenrightex", "parenrightbt", "bracketrighttp", "bracketrightex", "bracketrightbt", "bracerighttp", "bracerightmid", "bracerightbt", ""]; t.SymbolSetEncoding = c; const l = ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "space", "a1", "a2", "a202", "a3", "a4", "a5", "a119", "a118", "a117", "a11", "a12", "a13", "a14", "a15", "a16", "a105", "a17", "a18", "a19", "a20", "a21", "a22", "a23", "a24", "a25", "a26", "a27", "a28", "a6", "a7", "a8", "a9", "a10", "a29", "a30", "a31", "a32", "a33", "a34", "a35", "a36", "a37", "a38", "a39", "a40", "a41", "a42", "a43", "a44", "a45", "a46", "a47", "a48", "a49", "a50", "a51", "a52", "a53", "a54", "a55", "a56", "a57", "a58", "a59", "a60", "a61", "a62", "a63", "a64", "a65", "a66", "a67", "a68", "a69", "a70", "a71", "a72", "a73", "a74", "a203", "a75", "a204", "a76", "a77", "a78", "a79", "a81", "a82", "a83", "a84", "a97", "a98", "a99", "a100", "", "a89", "a90", "a93", "a94", "a91", "a92", "a205", "a85", "a206", "a86", "a87", "a88", "a95", "a96", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "a101", "a102", "a103", "a104", "a106", "a107", "a108", "a112", "a111", "a110", "a109", "a120", "a121", "a122", "a123", "a124", "a125", "a126", "a127", "a128", "a129", "a130", "a131", "a132", "a133", "a134", "a135", "a136", "a137", "a138", "a139", "a140", "a141", "a142", "a143", "a144", "a145", "a146", "a147", "a148", "a149", "a150", "a151", "a152", "a153", "a154", "a155", "a156", "a157", "a158", "a159", "a160", "a161", "a163", "a164", "a196", "a165", "a192", "a166", "a167", "a168", "a169", "a170", "a171", "a172", "a173", "a162", "a174", "a175", "a176", "a177", "a178", "a179", "a193", "a180", "a199", "a181", "a200", "a182", "", "a201", "a183", "a184", "a197", "a185", "a194", "a198", "a186", "a195", "a187", "a188", "a189", "a190", "a191", ""]; t.ZapfDingbatsEncoding = l }, function (e, t, a) { var r = a(7).getLookupTableFactory, i = r((function (e) { e.A = 65; e.AE = 198; e.AEacute = 508; e.AEmacron = 482; e.AEsmall = 63462; e.Aacute = 193; e.Aacutesmall = 63457; e.Abreve = 258; e.Abreveacute = 7854; e.Abrevecyrillic = 1232; e.Abrevedotbelow = 7862; e.Abrevegrave = 7856; e.Abrevehookabove = 7858; e.Abrevetilde = 7860; e.Acaron = 461; e.Acircle = 9398; e.Acircumflex = 194; e.Acircumflexacute = 7844; e.Acircumflexdotbelow = 7852; e.Acircumflexgrave = 7846; e.Acircumflexhookabove = 7848; e.Acircumflexsmall = 63458; e.Acircumflextilde = 7850; e.Acute = 63177; e.Acutesmall = 63412; e.Acyrillic = 1040; e.Adblgrave = 512; e.Adieresis = 196; e.Adieresiscyrillic = 1234; e.Adieresismacron = 478; e.Adieresissmall = 63460; e.Adotbelow = 7840; e.Adotmacron = 480; e.Agrave = 192; e.Agravesmall = 63456; e.Ahookabove = 7842; e.Aiecyrillic = 1236; e.Ainvertedbreve = 514; e.Alpha = 913; e.Alphatonos = 902; e.Amacron = 256; e.Amonospace = 65313; e.Aogonek = 260; e.Aring = 197; e.Aringacute = 506; e.Aringbelow = 7680; e.Aringsmall = 63461; e.Asmall = 63329; e.Atilde = 195; e.Atildesmall = 63459; e.Aybarmenian = 1329; e.B = 66; e.Bcircle = 9399; e.Bdotaccent = 7682; e.Bdotbelow = 7684; e.Becyrillic = 1041; e.Benarmenian = 1330; e.Beta = 914; e.Bhook = 385; e.Blinebelow = 7686; e.Bmonospace = 65314; e.Brevesmall = 63220; e.Bsmall = 63330; e.Btopbar = 386; e.C = 67; e.Caarmenian = 1342; e.Cacute = 262; e.Caron = 63178; e.Caronsmall = 63221; e.Ccaron = 268; e.Ccedilla = 199; e.Ccedillaacute = 7688; e.Ccedillasmall = 63463; e.Ccircle = 9400; e.Ccircumflex = 264; e.Cdot = 266; e.Cdotaccent = 266; e.Cedillasmall = 63416; e.Chaarmenian = 1353; e.Cheabkhasiancyrillic = 1212; e.Checyrillic = 1063; e.Chedescenderabkhasiancyrillic = 1214; e.Chedescendercyrillic = 1206; e.Chedieresiscyrillic = 1268; e.Cheharmenian = 1347; e.Chekhakassiancyrillic = 1227; e.Cheverticalstrokecyrillic = 1208; e.Chi = 935; e.Chook = 391; e.Circumflexsmall = 63222; e.Cmonospace = 65315; e.Coarmenian = 1361; e.Csmall = 63331; e.D = 68; e.DZ = 497; e.DZcaron = 452; e.Daarmenian = 1332; e.Dafrican = 393; e.Dcaron = 270; e.Dcedilla = 7696; e.Dcircle = 9401; e.Dcircumflexbelow = 7698; e.Dcroat = 272; e.Ddotaccent = 7690; e.Ddotbelow = 7692; e.Decyrillic = 1044; e.Deicoptic = 1006; e.Delta = 8710; e.Deltagreek = 916; e.Dhook = 394; e.Dieresis = 63179; e.DieresisAcute = 63180; e.DieresisGrave = 63181; e.Dieresissmall = 63400; e.Digammagreek = 988; e.Djecyrillic = 1026; e.Dlinebelow = 7694; e.Dmonospace = 65316; e.Dotaccentsmall = 63223; e.Dslash = 272; e.Dsmall = 63332; e.Dtopbar = 395; e.Dz = 498; e.Dzcaron = 453; e.Dzeabkhasiancyrillic = 1248; e.Dzecyrillic = 1029; e.Dzhecyrillic = 1039; e.E = 69; e.Eacute = 201; e.Eacutesmall = 63465; e.Ebreve = 276; e.Ecaron = 282; e.Ecedillabreve = 7708; e.Echarmenian = 1333; e.Ecircle = 9402; e.Ecircumflex = 202; e.Ecircumflexacute = 7870; e.Ecircumflexbelow = 7704; e.Ecircumflexdotbelow = 7878; e.Ecircumflexgrave = 7872; e.Ecircumflexhookabove = 7874; e.Ecircumflexsmall = 63466; e.Ecircumflextilde = 7876; e.Ecyrillic = 1028; e.Edblgrave = 516; e.Edieresis = 203; e.Edieresissmall = 63467; e.Edot = 278; e.Edotaccent = 278; e.Edotbelow = 7864; e.Efcyrillic = 1060; e.Egrave = 200; e.Egravesmall = 63464; e.Eharmenian = 1335; e.Ehookabove = 7866; e.Eightroman = 8551; e.Einvertedbreve = 518; e.Eiotifiedcyrillic = 1124; e.Elcyrillic = 1051; e.Elevenroman = 8554; e.Emacron = 274; e.Emacronacute = 7702; e.Emacrongrave = 7700; e.Emcyrillic = 1052; e.Emonospace = 65317; e.Encyrillic = 1053; e.Endescendercyrillic = 1186; e.Eng = 330; e.Enghecyrillic = 1188; e.Enhookcyrillic = 1223; e.Eogonek = 280; e.Eopen = 400; e.Epsilon = 917; e.Epsilontonos = 904; e.Ercyrillic = 1056; e.Ereversed = 398; e.Ereversedcyrillic = 1069; e.Escyrillic = 1057; e.Esdescendercyrillic = 1194; e.Esh = 425; e.Esmall = 63333; e.Eta = 919; e.Etarmenian = 1336; e.Etatonos = 905; e.Eth = 208; e.Ethsmall = 63472; e.Etilde = 7868; e.Etildebelow = 7706; e.Euro = 8364; e.Ezh = 439; e.Ezhcaron = 494; e.Ezhreversed = 440; e.F = 70; e.Fcircle = 9403; e.Fdotaccent = 7710; e.Feharmenian = 1366; e.Feicoptic = 996; e.Fhook = 401; e.Fitacyrillic = 1138; e.Fiveroman = 8548; e.Fmonospace = 65318; e.Fourroman = 8547; e.Fsmall = 63334; e.G = 71; e.GBsquare = 13191; e.Gacute = 500; e.Gamma = 915; e.Gammaafrican = 404; e.Gangiacoptic = 1002; e.Gbreve = 286; e.Gcaron = 486; e.Gcedilla = 290; e.Gcircle = 9404; e.Gcircumflex = 284; e.Gcommaaccent = 290; e.Gdot = 288; e.Gdotaccent = 288; e.Gecyrillic = 1043; e.Ghadarmenian = 1346; e.Ghemiddlehookcyrillic = 1172; e.Ghestrokecyrillic = 1170; e.Gheupturncyrillic = 1168; e.Ghook = 403; e.Gimarmenian = 1331; e.Gjecyrillic = 1027; e.Gmacron = 7712; e.Gmonospace = 65319; e.Grave = 63182; e.Gravesmall = 63328; e.Gsmall = 63335; e.Gsmallhook = 667; e.Gstroke = 484; e.H = 72; e.H18533 = 9679; e.H18543 = 9642; e.H18551 = 9643; e.H22073 = 9633; e.HPsquare = 13259; e.Haabkhasiancyrillic = 1192; e.Hadescendercyrillic = 1202; e.Hardsigncyrillic = 1066; e.Hbar = 294; e.Hbrevebelow = 7722; e.Hcedilla = 7720; e.Hcircle = 9405; e.Hcircumflex = 292; e.Hdieresis = 7718; e.Hdotaccent = 7714; e.Hdotbelow = 7716; e.Hmonospace = 65320; e.Hoarmenian = 1344; e.Horicoptic = 1e3; e.Hsmall = 63336; e.Hungarumlaut = 63183; e.Hungarumlautsmall = 63224; e.Hzsquare = 13200; e.I = 73; e.IAcyrillic = 1071; e.IJ = 306; e.IUcyrillic = 1070; e.Iacute = 205; e.Iacutesmall = 63469; e.Ibreve = 300; e.Icaron = 463; e.Icircle = 9406; e.Icircumflex = 206; e.Icircumflexsmall = 63470; e.Icyrillic = 1030; e.Idblgrave = 520; e.Idieresis = 207; e.Idieresisacute = 7726; e.Idieresiscyrillic = 1252; e.Idieresissmall = 63471; e.Idot = 304; e.Idotaccent = 304; e.Idotbelow = 7882; e.Iebrevecyrillic = 1238; e.Iecyrillic = 1045; e.Ifraktur = 8465; e.Igrave = 204; e.Igravesmall = 63468; e.Ihookabove = 7880; e.Iicyrillic = 1048; e.Iinvertedbreve = 522; e.Iishortcyrillic = 1049; e.Imacron = 298; e.Imacroncyrillic = 1250; e.Imonospace = 65321; e.Iniarmenian = 1339; e.Iocyrillic = 1025; e.Iogonek = 302; e.Iota = 921; e.Iotaafrican = 406; e.Iotadieresis = 938; e.Iotatonos = 906; e.Ismall = 63337; e.Istroke = 407; e.Itilde = 296; e.Itildebelow = 7724; e.Izhitsacyrillic = 1140; e.Izhitsadblgravecyrillic = 1142; e.J = 74; e.Jaarmenian = 1345; e.Jcircle = 9407; e.Jcircumflex = 308; e.Jecyrillic = 1032; e.Jheharmenian = 1355; e.Jmonospace = 65322; e.Jsmall = 63338; e.K = 75; e.KBsquare = 13189; e.KKsquare = 13261; e.Kabashkircyrillic = 1184; e.Kacute = 7728; e.Kacyrillic = 1050; e.Kadescendercyrillic = 1178; e.Kahookcyrillic = 1219; e.Kappa = 922; e.Kastrokecyrillic = 1182; e.Kaverticalstrokecyrillic = 1180; e.Kcaron = 488; e.Kcedilla = 310; e.Kcircle = 9408; e.Kcommaaccent = 310; e.Kdotbelow = 7730; e.Keharmenian = 1364; e.Kenarmenian = 1343; e.Khacyrillic = 1061; e.Kheicoptic = 998; e.Khook = 408; e.Kjecyrillic = 1036; e.Klinebelow = 7732; e.Kmonospace = 65323; e.Koppacyrillic = 1152; e.Koppagreek = 990; e.Ksicyrillic = 1134; e.Ksmall = 63339; e.L = 76; e.LJ = 455; e.LL = 63167; e.Lacute = 313; e.Lambda = 923; e.Lcaron = 317; e.Lcedilla = 315; e.Lcircle = 9409; e.Lcircumflexbelow = 7740; e.Lcommaaccent = 315; e.Ldot = 319; e.Ldotaccent = 319; e.Ldotbelow = 7734; e.Ldotbelowmacron = 7736; e.Liwnarmenian = 1340; e.Lj = 456; e.Ljecyrillic = 1033; e.Llinebelow = 7738; e.Lmonospace = 65324; e.Lslash = 321; e.Lslashsmall = 63225; e.Lsmall = 63340; e.M = 77; e.MBsquare = 13190; e.Macron = 63184; e.Macronsmall = 63407; e.Macute = 7742; e.Mcircle = 9410; e.Mdotaccent = 7744; e.Mdotbelow = 7746; e.Menarmenian = 1348; e.Mmonospace = 65325; e.Msmall = 63341; e.Mturned = 412; e.Mu = 924; e.N = 78; e.NJ = 458; e.Nacute = 323; e.Ncaron = 327; e.Ncedilla = 325; e.Ncircle = 9411; e.Ncircumflexbelow = 7754; e.Ncommaaccent = 325; e.Ndotaccent = 7748; e.Ndotbelow = 7750; e.Nhookleft = 413; e.Nineroman = 8552; e.Nj = 459; e.Njecyrillic = 1034; e.Nlinebelow = 7752; e.Nmonospace = 65326; e.Nowarmenian = 1350; e.Nsmall = 63342; e.Ntilde = 209; e.Ntildesmall = 63473; e.Nu = 925; e.O = 79; e.OE = 338; e.OEsmall = 63226; e.Oacute = 211; e.Oacutesmall = 63475; e.Obarredcyrillic = 1256; e.Obarreddieresiscyrillic = 1258; e.Obreve = 334; e.Ocaron = 465; e.Ocenteredtilde = 415; e.Ocircle = 9412; e.Ocircumflex = 212; e.Ocircumflexacute = 7888; e.Ocircumflexdotbelow = 7896; e.Ocircumflexgrave = 7890; e.Ocircumflexhookabove = 7892; e.Ocircumflexsmall = 63476; e.Ocircumflextilde = 7894; e.Ocyrillic = 1054; e.Odblacute = 336; e.Odblgrave = 524; e.Odieresis = 214; e.Odieresiscyrillic = 1254; e.Odieresissmall = 63478; e.Odotbelow = 7884; e.Ogoneksmall = 63227; e.Ograve = 210; e.Ogravesmall = 63474; e.Oharmenian = 1365; e.Ohm = 8486; e.Ohookabove = 7886; e.Ohorn = 416; e.Ohornacute = 7898; e.Ohorndotbelow = 7906; e.Ohorngrave = 7900; e.Ohornhookabove = 7902; e.Ohorntilde = 7904; e.Ohungarumlaut = 336; e.Oi = 418; e.Oinvertedbreve = 526; e.Omacron = 332; e.Omacronacute = 7762; e.Omacrongrave = 7760; e.Omega = 8486; e.Omegacyrillic = 1120; e.Omegagreek = 937; e.Omegaroundcyrillic = 1146; e.Omegatitlocyrillic = 1148; e.Omegatonos = 911; e.Omicron = 927; e.Omicrontonos = 908; e.Omonospace = 65327; e.Oneroman = 8544; e.Oogonek = 490; e.Oogonekmacron = 492; e.Oopen = 390; e.Oslash = 216; e.Oslashacute = 510; e.Oslashsmall = 63480; e.Osmall = 63343; e.Ostrokeacute = 510; e.Otcyrillic = 1150; e.Otilde = 213; e.Otildeacute = 7756; e.Otildedieresis = 7758; e.Otildesmall = 63477; e.P = 80; e.Pacute = 7764; e.Pcircle = 9413; e.Pdotaccent = 7766; e.Pecyrillic = 1055; e.Peharmenian = 1354; e.Pemiddlehookcyrillic = 1190; e.Phi = 934; e.Phook = 420; e.Pi = 928; e.Piwrarmenian = 1363; e.Pmonospace = 65328; e.Psi = 936; e.Psicyrillic = 1136; e.Psmall = 63344; e.Q = 81; e.Qcircle = 9414; e.Qmonospace = 65329; e.Qsmall = 63345; e.R = 82; e.Raarmenian = 1356; e.Racute = 340; e.Rcaron = 344; e.Rcedilla = 342; e.Rcircle = 9415; e.Rcommaaccent = 342; e.Rdblgrave = 528; e.Rdotaccent = 7768; e.Rdotbelow = 7770; e.Rdotbelowmacron = 7772; e.Reharmenian = 1360; e.Rfraktur = 8476; e.Rho = 929; e.Ringsmall = 63228; e.Rinvertedbreve = 530; e.Rlinebelow = 7774; e.Rmonospace = 65330; e.Rsmall = 63346; e.Rsmallinverted = 641; e.Rsmallinvertedsuperior = 694; e.S = 83; e.SF010000 = 9484; e.SF020000 = 9492; e.SF030000 = 9488; e.SF040000 = 9496; e.SF050000 = 9532; e.SF060000 = 9516; e.SF070000 = 9524; e.SF080000 = 9500; e.SF090000 = 9508; e.SF100000 = 9472; e.SF110000 = 9474; e.SF190000 = 9569; e.SF200000 = 9570; e.SF210000 = 9558; e.SF220000 = 9557; e.SF230000 = 9571; e.SF240000 = 9553; e.SF250000 = 9559; e.SF260000 = 9565; e.SF270000 = 9564; e.SF280000 = 9563; e.SF360000 = 9566; e.SF370000 = 9567; e.SF380000 = 9562; e.SF390000 = 9556; e.SF400000 = 9577; e.SF410000 = 9574; e.SF420000 = 9568; e.SF430000 = 9552; e.SF440000 = 9580; e.SF450000 = 9575; e.SF460000 = 9576; e.SF470000 = 9572; e.SF480000 = 9573; e.SF490000 = 9561; e.SF500000 = 9560; e.SF510000 = 9554; e.SF520000 = 9555; e.SF530000 = 9579; e.SF540000 = 9578; e.Sacute = 346; e.Sacutedotaccent = 7780; e.Sampigreek = 992; e.Scaron = 352; e.Scarondotaccent = 7782; e.Scaronsmall = 63229; e.Scedilla = 350; e.Schwa = 399; e.Schwacyrillic = 1240; e.Schwadieresiscyrillic = 1242; e.Scircle = 9416; e.Scircumflex = 348; e.Scommaaccent = 536; e.Sdotaccent = 7776; e.Sdotbelow = 7778; e.Sdotbelowdotaccent = 7784; e.Seharmenian = 1357; e.Sevenroman = 8550; e.Shaarmenian = 1351; e.Shacyrillic = 1064; e.Shchacyrillic = 1065; e.Sheicoptic = 994; e.Shhacyrillic = 1210; e.Shimacoptic = 1004; e.Sigma = 931; e.Sixroman = 8549; e.Smonospace = 65331; e.Softsigncyrillic = 1068; e.Ssmall = 63347; e.Stigmagreek = 986; e.T = 84; e.Tau = 932; e.Tbar = 358; e.Tcaron = 356; e.Tcedilla = 354; e.Tcircle = 9417; e.Tcircumflexbelow = 7792; e.Tcommaaccent = 354; e.Tdotaccent = 7786; e.Tdotbelow = 7788; e.Tecyrillic = 1058; e.Tedescendercyrillic = 1196; e.Tenroman = 8553; e.Tetsecyrillic = 1204; e.Theta = 920; e.Thook = 428; e.Thorn = 222; e.Thornsmall = 63486; e.Threeroman = 8546; e.Tildesmall = 63230; e.Tiwnarmenian = 1359; e.Tlinebelow = 7790; e.Tmonospace = 65332; e.Toarmenian = 1337; e.Tonefive = 444; e.Tonesix = 388; e.Tonetwo = 423; e.Tretroflexhook = 430; e.Tsecyrillic = 1062; e.Tshecyrillic = 1035; e.Tsmall = 63348; e.Twelveroman = 8555; e.Tworoman = 8545; e.U = 85; e.Uacute = 218; e.Uacutesmall = 63482; e.Ubreve = 364; e.Ucaron = 467; e.Ucircle = 9418; e.Ucircumflex = 219; e.Ucircumflexbelow = 7798; e.Ucircumflexsmall = 63483; e.Ucyrillic = 1059; e.Udblacute = 368; e.Udblgrave = 532; e.Udieresis = 220; e.Udieresisacute = 471; e.Udieresisbelow = 7794; e.Udieresiscaron = 473; e.Udieresiscyrillic = 1264; e.Udieresisgrave = 475; e.Udieresismacron = 469; e.Udieresissmall = 63484; e.Udotbelow = 7908; e.Ugrave = 217; e.Ugravesmall = 63481; e.Uhookabove = 7910; e.Uhorn = 431; e.Uhornacute = 7912; e.Uhorndotbelow = 7920; e.Uhorngrave = 7914; e.Uhornhookabove = 7916; e.Uhorntilde = 7918; e.Uhungarumlaut = 368; e.Uhungarumlautcyrillic = 1266; e.Uinvertedbreve = 534; e.Ukcyrillic = 1144; e.Umacron = 362; e.Umacroncyrillic = 1262; e.Umacrondieresis = 7802; e.Umonospace = 65333; e.Uogonek = 370; e.Upsilon = 933; e.Upsilon1 = 978; e.Upsilonacutehooksymbolgreek = 979; e.Upsilonafrican = 433; e.Upsilondieresis = 939; e.Upsilondieresishooksymbolgreek = 980; e.Upsilonhooksymbol = 978; e.Upsilontonos = 910; e.Uring = 366; e.Ushortcyrillic = 1038; e.Usmall = 63349; e.Ustraightcyrillic = 1198; e.Ustraightstrokecyrillic = 1200; e.Utilde = 360; e.Utildeacute = 7800; e.Utildebelow = 7796; e.V = 86; e.Vcircle = 9419; e.Vdotbelow = 7806; e.Vecyrillic = 1042; e.Vewarmenian = 1358; e.Vhook = 434; e.Vmonospace = 65334; e.Voarmenian = 1352; e.Vsmall = 63350; e.Vtilde = 7804; e.W = 87; e.Wacute = 7810; e.Wcircle = 9420; e.Wcircumflex = 372; e.Wdieresis = 7812; e.Wdotaccent = 7814; e.Wdotbelow = 7816; e.Wgrave = 7808; e.Wmonospace = 65335; e.Wsmall = 63351; e.X = 88; e.Xcircle = 9421; e.Xdieresis = 7820; e.Xdotaccent = 7818; e.Xeharmenian = 1341; e.Xi = 926; e.Xmonospace = 65336; e.Xsmall = 63352; e.Y = 89; e.Yacute = 221; e.Yacutesmall = 63485; e.Yatcyrillic = 1122; e.Ycircle = 9422; e.Ycircumflex = 374; e.Ydieresis = 376; e.Ydieresissmall = 63487; e.Ydotaccent = 7822; e.Ydotbelow = 7924; e.Yericyrillic = 1067; e.Yerudieresiscyrillic = 1272; e.Ygrave = 7922; e.Yhook = 435; e.Yhookabove = 7926; e.Yiarmenian = 1349; e.Yicyrillic = 1031; e.Yiwnarmenian = 1362; e.Ymonospace = 65337; e.Ysmall = 63353; e.Ytilde = 7928; e.Yusbigcyrillic = 1130; e.Yusbigiotifiedcyrillic = 1132; e.Yuslittlecyrillic = 1126; e.Yuslittleiotifiedcyrillic = 1128; e.Z = 90; e.Zaarmenian = 1334; e.Zacute = 377; e.Zcaron = 381; e.Zcaronsmall = 63231; e.Zcircle = 9423; e.Zcircumflex = 7824; e.Zdot = 379; e.Zdotaccent = 379; e.Zdotbelow = 7826; e.Zecyrillic = 1047; e.Zedescendercyrillic = 1176; e.Zedieresiscyrillic = 1246; e.Zeta = 918; e.Zhearmenian = 1338; e.Zhebrevecyrillic = 1217; e.Zhecyrillic = 1046; e.Zhedescendercyrillic = 1174; e.Zhedieresiscyrillic = 1244; e.Zlinebelow = 7828; e.Zmonospace = 65338; e.Zsmall = 63354; e.Zstroke = 437; e.a = 97; e.aabengali = 2438; e.aacute = 225; e.aadeva = 2310; e.aagujarati = 2694; e.aagurmukhi = 2566; e.aamatragurmukhi = 2622; e.aarusquare = 13059; e.aavowelsignbengali = 2494; e.aavowelsigndeva = 2366; e.aavowelsigngujarati = 2750; e.abbreviationmarkarmenian = 1375; e.abbreviationsigndeva = 2416; e.abengali = 2437; e.abopomofo = 12570; e.abreve = 259; e.abreveacute = 7855; e.abrevecyrillic = 1233; e.abrevedotbelow = 7863; e.abrevegrave = 7857; e.abrevehookabove = 7859; e.abrevetilde = 7861; e.acaron = 462; e.acircle = 9424; e.acircumflex = 226; e.acircumflexacute = 7845; e.acircumflexdotbelow = 7853; e.acircumflexgrave = 7847; e.acircumflexhookabove = 7849; e.acircumflextilde = 7851; e.acute = 180; e.acutebelowcmb = 791; e.acutecmb = 769; e.acutecomb = 769; e.acutedeva = 2388; e.acutelowmod = 719; e.acutetonecmb = 833; e.acyrillic = 1072; e.adblgrave = 513; e.addakgurmukhi = 2673; e.adeva = 2309; e.adieresis = 228; e.adieresiscyrillic = 1235; e.adieresismacron = 479; e.adotbelow = 7841; e.adotmacron = 481; e.ae = 230; e.aeacute = 509; e.aekorean = 12624; e.aemacron = 483; e.afii00208 = 8213; e.afii08941 = 8356; e.afii10017 = 1040; e.afii10018 = 1041; e.afii10019 = 1042; e.afii10020 = 1043; e.afii10021 = 1044; e.afii10022 = 1045; e.afii10023 = 1025; e.afii10024 = 1046; e.afii10025 = 1047; e.afii10026 = 1048; e.afii10027 = 1049; e.afii10028 = 1050; e.afii10029 = 1051; e.afii10030 = 1052; e.afii10031 = 1053; e.afii10032 = 1054; e.afii10033 = 1055; e.afii10034 = 1056; e.afii10035 = 1057; e.afii10036 = 1058; e.afii10037 = 1059; e.afii10038 = 1060; e.afii10039 = 1061; e.afii10040 = 1062; e.afii10041 = 1063; e.afii10042 = 1064; e.afii10043 = 1065; e.afii10044 = 1066; e.afii10045 = 1067; e.afii10046 = 1068; e.afii10047 = 1069; e.afii10048 = 1070; e.afii10049 = 1071; e.afii10050 = 1168; e.afii10051 = 1026; e.afii10052 = 1027; e.afii10053 = 1028; e.afii10054 = 1029; e.afii10055 = 1030; e.afii10056 = 1031; e.afii10057 = 1032; e.afii10058 = 1033; e.afii10059 = 1034; e.afii10060 = 1035; e.afii10061 = 1036; e.afii10062 = 1038; e.afii10063 = 63172; e.afii10064 = 63173; e.afii10065 = 1072; e.afii10066 = 1073; e.afii10067 = 1074; e.afii10068 = 1075; e.afii10069 = 1076; e.afii10070 = 1077; e.afii10071 = 1105; e.afii10072 = 1078; e.afii10073 = 1079; e.afii10074 = 1080; e.afii10075 = 1081; e.afii10076 = 1082; e.afii10077 = 1083; e.afii10078 = 1084; e.afii10079 = 1085; e.afii10080 = 1086; e.afii10081 = 1087; e.afii10082 = 1088; e.afii10083 = 1089; e.afii10084 = 1090; e.afii10085 = 1091; e.afii10086 = 1092; e.afii10087 = 1093; e.afii10088 = 1094; e.afii10089 = 1095; e.afii10090 = 1096; e.afii10091 = 1097; e.afii10092 = 1098; e.afii10093 = 1099; e.afii10094 = 1100; e.afii10095 = 1101; e.afii10096 = 1102; e.afii10097 = 1103; e.afii10098 = 1169; e.afii10099 = 1106; e.afii10100 = 1107; e.afii10101 = 1108; e.afii10102 = 1109; e.afii10103 = 1110; e.afii10104 = 1111; e.afii10105 = 1112; e.afii10106 = 1113; e.afii10107 = 1114; e.afii10108 = 1115; e.afii10109 = 1116; e.afii10110 = 1118; e.afii10145 = 1039; e.afii10146 = 1122; e.afii10147 = 1138; e.afii10148 = 1140; e.afii10192 = 63174; e.afii10193 = 1119; e.afii10194 = 1123; e.afii10195 = 1139; e.afii10196 = 1141; e.afii10831 = 63175; e.afii10832 = 63176; e.afii10846 = 1241; e.afii299 = 8206; e.afii300 = 8207; e.afii301 = 8205; e.afii57381 = 1642; e.afii57388 = 1548; e.afii57392 = 1632; e.afii57393 = 1633; e.afii57394 = 1634; e.afii57395 = 1635; e.afii57396 = 1636; e.afii57397 = 1637; e.afii57398 = 1638; e.afii57399 = 1639; e.afii57400 = 1640; e.afii57401 = 1641; e.afii57403 = 1563; e.afii57407 = 1567; e.afii57409 = 1569; e.afii57410 = 1570; e.afii57411 = 1571; e.afii57412 = 1572; e.afii57413 = 1573; e.afii57414 = 1574; e.afii57415 = 1575; e.afii57416 = 1576; e.afii57417 = 1577; e.afii57418 = 1578; e.afii57419 = 1579; e.afii57420 = 1580; e.afii57421 = 1581; e.afii57422 = 1582; e.afii57423 = 1583; e.afii57424 = 1584; e.afii57425 = 1585; e.afii57426 = 1586; e.afii57427 = 1587; e.afii57428 = 1588; e.afii57429 = 1589; e.afii57430 = 1590; e.afii57431 = 1591; e.afii57432 = 1592; e.afii57433 = 1593; e.afii57434 = 1594; e.afii57440 = 1600; e.afii57441 = 1601; e.afii57442 = 1602; e.afii57443 = 1603; e.afii57444 = 1604; e.afii57445 = 1605; e.afii57446 = 1606; e.afii57448 = 1608; e.afii57449 = 1609; e.afii57450 = 1610; e.afii57451 = 1611; e.afii57452 = 1612; e.afii57453 = 1613; e.afii57454 = 1614; e.afii57455 = 1615; e.afii57456 = 1616; e.afii57457 = 1617; e.afii57458 = 1618; e.afii57470 = 1607; e.afii57505 = 1700; e.afii57506 = 1662; e.afii57507 = 1670; e.afii57508 = 1688; e.afii57509 = 1711; e.afii57511 = 1657; e.afii57512 = 1672; e.afii57513 = 1681; e.afii57514 = 1722; e.afii57519 = 1746; e.afii57534 = 1749; e.afii57636 = 8362; e.afii57645 = 1470; e.afii57658 = 1475; e.afii57664 = 1488; e.afii57665 = 1489; e.afii57666 = 1490; e.afii57667 = 1491; e.afii57668 = 1492; e.afii57669 = 1493; e.afii57670 = 1494; e.afii57671 = 1495; e.afii57672 = 1496; e.afii57673 = 1497; e.afii57674 = 1498; e.afii57675 = 1499; e.afii57676 = 1500; e.afii57677 = 1501; e.afii57678 = 1502; e.afii57679 = 1503; e.afii57680 = 1504; e.afii57681 = 1505; e.afii57682 = 1506; e.afii57683 = 1507; e.afii57684 = 1508; e.afii57685 = 1509; e.afii57686 = 1510; e.afii57687 = 1511; e.afii57688 = 1512; e.afii57689 = 1513; e.afii57690 = 1514; e.afii57694 = 64298; e.afii57695 = 64299; e.afii57700 = 64331; e.afii57705 = 64287; e.afii57716 = 1520; e.afii57717 = 1521; e.afii57718 = 1522; e.afii57723 = 64309; e.afii57793 = 1460; e.afii57794 = 1461; e.afii57795 = 1462; e.afii57796 = 1467; e.afii57797 = 1464; e.afii57798 = 1463; e.afii57799 = 1456; e.afii57800 = 1458; e.afii57801 = 1457; e.afii57802 = 1459; e.afii57803 = 1474; e.afii57804 = 1473; e.afii57806 = 1465; e.afii57807 = 1468; e.afii57839 = 1469; e.afii57841 = 1471; e.afii57842 = 1472; e.afii57929 = 700; e.afii61248 = 8453; e.afii61289 = 8467; e.afii61352 = 8470; e.afii61573 = 8236; e.afii61574 = 8237; e.afii61575 = 8238; e.afii61664 = 8204; e.afii63167 = 1645; e.afii64937 = 701; e.agrave = 224; e.agujarati = 2693; e.agurmukhi = 2565; e.ahiragana = 12354; e.ahookabove = 7843; e.aibengali = 2448; e.aibopomofo = 12574; e.aideva = 2320; e.aiecyrillic = 1237; e.aigujarati = 2704; e.aigurmukhi = 2576; e.aimatragurmukhi = 2632; e.ainarabic = 1593; e.ainfinalarabic = 65226; e.aininitialarabic = 65227; e.ainmedialarabic = 65228; e.ainvertedbreve = 515; e.aivowelsignbengali = 2504; e.aivowelsigndeva = 2376; e.aivowelsigngujarati = 2760; e.akatakana = 12450; e.akatakanahalfwidth = 65393; e.akorean = 12623; e.alef = 1488; e.alefarabic = 1575; e.alefdageshhebrew = 64304; e.aleffinalarabic = 65166; e.alefhamzaabovearabic = 1571; e.alefhamzaabovefinalarabic = 65156; e.alefhamzabelowarabic = 1573; e.alefhamzabelowfinalarabic = 65160; e.alefhebrew = 1488; e.aleflamedhebrew = 64335; e.alefmaddaabovearabic = 1570; e.alefmaddaabovefinalarabic = 65154; e.alefmaksuraarabic = 1609; e.alefmaksurafinalarabic = 65264; e.alefmaksurainitialarabic = 65267; e.alefmaksuramedialarabic = 65268; e.alefpatahhebrew = 64302; e.alefqamatshebrew = 64303; e.aleph = 8501; e.allequal = 8780; e.alpha = 945; e.alphatonos = 940; e.amacron = 257; e.amonospace = 65345; e.ampersand = 38; e.ampersandmonospace = 65286; e.ampersandsmall = 63270; e.amsquare = 13250; e.anbopomofo = 12578; e.angbopomofo = 12580; e.angbracketleft = 12296; e.angbracketright = 12297; e.angkhankhuthai = 3674; e.angle = 8736; e.anglebracketleft = 12296; e.anglebracketleftvertical = 65087; e.anglebracketright = 12297; e.anglebracketrightvertical = 65088; e.angleleft = 9001; e.angleright = 9002; e.angstrom = 8491; e.anoteleia = 903; e.anudattadeva = 2386; e.anusvarabengali = 2434; e.anusvaradeva = 2306; e.anusvaragujarati = 2690; e.aogonek = 261; e.apaatosquare = 13056; e.aparen = 9372; e.apostrophearmenian = 1370; e.apostrophemod = 700; e.apple = 63743; e.approaches = 8784; e.approxequal = 8776; e.approxequalorimage = 8786; e.approximatelyequal = 8773; e.araeaekorean = 12686; e.araeakorean = 12685; e.arc = 8978; e.arighthalfring = 7834; e.aring = 229; e.aringacute = 507; e.aringbelow = 7681; e.arrowboth = 8596; e.arrowdashdown = 8675; e.arrowdashleft = 8672; e.arrowdashright = 8674; e.arrowdashup = 8673; e.arrowdblboth = 8660; e.arrowdbldown = 8659; e.arrowdblleft = 8656; e.arrowdblright = 8658; e.arrowdblup = 8657; e.arrowdown = 8595; e.arrowdownleft = 8601; e.arrowdownright = 8600; e.arrowdownwhite = 8681; e.arrowheaddownmod = 709; e.arrowheadleftmod = 706; e.arrowheadrightmod = 707; e.arrowheadupmod = 708; e.arrowhorizex = 63719; e.arrowleft = 8592; e.arrowleftdbl = 8656; e.arrowleftdblstroke = 8653; e.arrowleftoverright = 8646; e.arrowleftwhite = 8678; e.arrowright = 8594; e.arrowrightdblstroke = 8655; e.arrowrightheavy = 10142; e.arrowrightoverleft = 8644; e.arrowrightwhite = 8680; e.arrowtableft = 8676; e.arrowtabright = 8677; e.arrowup = 8593; e.arrowupdn = 8597; e.arrowupdnbse = 8616; e.arrowupdownbase = 8616; e.arrowupleft = 8598; e.arrowupleftofdown = 8645; e.arrowupright = 8599; e.arrowupwhite = 8679; e.arrowvertex = 63718; e.asciicircum = 94; e.asciicircummonospace = 65342; e.asciitilde = 126; e.asciitildemonospace = 65374; e.ascript = 593; e.ascriptturned = 594; e.asmallhiragana = 12353; e.asmallkatakana = 12449; e.asmallkatakanahalfwidth = 65383; e.asterisk = 42; e.asteriskaltonearabic = 1645; e.asteriskarabic = 1645; e.asteriskmath = 8727; e.asteriskmonospace = 65290; e.asterisksmall = 65121; e.asterism = 8258; e.asuperior = 63209; e.asymptoticallyequal = 8771; e.at = 64; e.atilde = 227; e.atmonospace = 65312; e.atsmall = 65131; e.aturned = 592; e.aubengali = 2452; e.aubopomofo = 12576; e.audeva = 2324; e.augujarati = 2708; e.augurmukhi = 2580; e.aulengthmarkbengali = 2519; e.aumatragurmukhi = 2636; e.auvowelsignbengali = 2508; e.auvowelsigndeva = 2380; e.auvowelsigngujarati = 2764; e.avagrahadeva = 2365; e.aybarmenian = 1377; e.ayin = 1506; e.ayinaltonehebrew = 64288; e.ayinhebrew = 1506; e.b = 98; e.babengali = 2476; e.backslash = 92; e.backslashmonospace = 65340; e.badeva = 2348; e.bagujarati = 2732; e.bagurmukhi = 2604; e.bahiragana = 12400; e.bahtthai = 3647; e.bakatakana = 12496; e.bar = 124; e.barmonospace = 65372; e.bbopomofo = 12549; e.bcircle = 9425; e.bdotaccent = 7683; e.bdotbelow = 7685; e.beamedsixteenthnotes = 9836; e.because = 8757; e.becyrillic = 1073; e.beharabic = 1576; e.behfinalarabic = 65168; e.behinitialarabic = 65169; e.behiragana = 12409; e.behmedialarabic = 65170; e.behmeeminitialarabic = 64671; e.behmeemisolatedarabic = 64520; e.behnoonfinalarabic = 64621; e.bekatakana = 12505; e.benarmenian = 1378; e.bet = 1489; e.beta = 946; e.betasymbolgreek = 976; e.betdagesh = 64305; e.betdageshhebrew = 64305; e.bethebrew = 1489; e.betrafehebrew = 64332; e.bhabengali = 2477; e.bhadeva = 2349; e.bhagujarati = 2733; e.bhagurmukhi = 2605; e.bhook = 595; e.bihiragana = 12403; e.bikatakana = 12499; e.bilabialclick = 664; e.bindigurmukhi = 2562; e.birusquare = 13105; e.blackcircle = 9679; e.blackdiamond = 9670; e.blackdownpointingtriangle = 9660; e.blackleftpointingpointer = 9668; e.blackleftpointingtriangle = 9664; e.blacklenticularbracketleft = 12304; e.blacklenticularbracketleftvertical = 65083; e.blacklenticularbracketright = 12305; e.blacklenticularbracketrightvertical = 65084; e.blacklowerlefttriangle = 9699; e.blacklowerrighttriangle = 9698; e.blackrectangle = 9644; e.blackrightpointingpointer = 9658; e.blackrightpointingtriangle = 9654; e.blacksmallsquare = 9642; e.blacksmilingface = 9787; e.blacksquare = 9632; e.blackstar = 9733; e.blackupperlefttriangle = 9700; e.blackupperrighttriangle = 9701; e.blackuppointingsmalltriangle = 9652; e.blackuppointingtriangle = 9650; e.blank = 9251; e.blinebelow = 7687; e.block = 9608; e.bmonospace = 65346; e.bobaimaithai = 3610; e.bohiragana = 12412; e.bokatakana = 12508; e.bparen = 9373; e.bqsquare = 13251; e.braceex = 63732; e.braceleft = 123; e.braceleftbt = 63731; e.braceleftmid = 63730; e.braceleftmonospace = 65371; e.braceleftsmall = 65115; e.bracelefttp = 63729; e.braceleftvertical = 65079; e.braceright = 125; e.bracerightbt = 63742; e.bracerightmid = 63741; e.bracerightmonospace = 65373; e.bracerightsmall = 65116; e.bracerighttp = 63740; e.bracerightvertical = 65080; e.bracketleft = 91; e.bracketleftbt = 63728; e.bracketleftex = 63727; e.bracketleftmonospace = 65339; e.bracketlefttp = 63726; e.bracketright = 93; e.bracketrightbt = 63739; e.bracketrightex = 63738; e.bracketrightmonospace = 65341; e.bracketrighttp = 63737; e.breve = 728; e.brevebelowcmb = 814; e.brevecmb = 774; e.breveinvertedbelowcmb = 815; e.breveinvertedcmb = 785; e.breveinverteddoublecmb = 865; e.bridgebelowcmb = 810; e.bridgeinvertedbelowcmb = 826; e.brokenbar = 166; e.bstroke = 384; e.bsuperior = 63210; e.btopbar = 387; e.buhiragana = 12406; e.bukatakana = 12502; e.bullet = 8226; e.bulletinverse = 9688; e.bulletoperator = 8729; e.bullseye = 9678; e.c = 99; e.caarmenian = 1390; e.cabengali = 2458; e.cacute = 263; e.cadeva = 2330; e.cagujarati = 2714; e.cagurmukhi = 2586; e.calsquare = 13192; e.candrabindubengali = 2433; e.candrabinducmb = 784; e.candrabindudeva = 2305; e.candrabindugujarati = 2689; e.capslock = 8682; e.careof = 8453; e.caron = 711; e.caronbelowcmb = 812; e.caroncmb = 780; e.carriagereturn = 8629; e.cbopomofo = 12568; e.ccaron = 269; e.ccedilla = 231; e.ccedillaacute = 7689; e.ccircle = 9426; e.ccircumflex = 265; e.ccurl = 597; e.cdot = 267; e.cdotaccent = 267; e.cdsquare = 13253; e.cedilla = 184; e.cedillacmb = 807; e.cent = 162; e.centigrade = 8451; e.centinferior = 63199; e.centmonospace = 65504; e.centoldstyle = 63394; e.centsuperior = 63200; e.chaarmenian = 1401; e.chabengali = 2459; e.chadeva = 2331; e.chagujarati = 2715; e.chagurmukhi = 2587; e.chbopomofo = 12564; e.cheabkhasiancyrillic = 1213; e.checkmark = 10003; e.checyrillic = 1095; e.chedescenderabkhasiancyrillic = 1215; e.chedescendercyrillic = 1207; e.chedieresiscyrillic = 1269; e.cheharmenian = 1395; e.chekhakassiancyrillic = 1228; e.cheverticalstrokecyrillic = 1209; e.chi = 967; e.chieuchacirclekorean = 12919; e.chieuchaparenkorean = 12823; e.chieuchcirclekorean = 12905; e.chieuchkorean = 12618; e.chieuchparenkorean = 12809; e.chochangthai = 3594; e.chochanthai = 3592; e.chochingthai = 3593; e.chochoethai = 3596; e.chook = 392; e.cieucacirclekorean = 12918; e.cieucaparenkorean = 12822; e.cieuccirclekorean = 12904; e.cieuckorean = 12616; e.cieucparenkorean = 12808; e.cieucuparenkorean = 12828; e.circle = 9675; e.circlecopyrt = 169; e.circlemultiply = 8855; e.circleot = 8857; e.circleplus = 8853; e.circlepostalmark = 12342; e.circlewithlefthalfblack = 9680; e.circlewithrighthalfblack = 9681; e.circumflex = 710; e.circumflexbelowcmb = 813; e.circumflexcmb = 770; e.clear = 8999; e.clickalveolar = 450; e.clickdental = 448; e.clicklateral = 449; e.clickretroflex = 451; e.club = 9827; e.clubsuitblack = 9827; e.clubsuitwhite = 9831; e.cmcubedsquare = 13220; e.cmonospace = 65347; e.cmsquaredsquare = 13216; e.coarmenian = 1409; e.colon = 58; e.colonmonetary = 8353; e.colonmonospace = 65306; e.colonsign = 8353; e.colonsmall = 65109; e.colontriangularhalfmod = 721; e.colontriangularmod = 720; e.comma = 44; e.commaabovecmb = 787; e.commaaboverightcmb = 789; e.commaaccent = 63171; e.commaarabic = 1548; e.commaarmenian = 1373; e.commainferior = 63201; e.commamonospace = 65292; e.commareversedabovecmb = 788; e.commareversedmod = 701; e.commasmall = 65104; e.commasuperior = 63202; e.commaturnedabovecmb = 786; e.commaturnedmod = 699; e.compass = 9788; e.congruent = 8773; e.contourintegral = 8750; e.control = 8963; e.controlACK = 6; e.controlBEL = 7; e.controlBS = 8; e.controlCAN = 24; e.controlCR = 13; e.controlDC1 = 17; e.controlDC2 = 18; e.controlDC3 = 19; e.controlDC4 = 20; e.controlDEL = 127; e.controlDLE = 16; e.controlEM = 25; e.controlENQ = 5; e.controlEOT = 4; e.controlESC = 27; e.controlETB = 23; e.controlETX = 3; e.controlFF = 12; e.controlFS = 28; e.controlGS = 29; e.controlHT = 9; e.controlLF = 10; e.controlNAK = 21; e.controlNULL = 0; e.controlRS = 30; e.controlSI = 15; e.controlSO = 14; e.controlSOT = 2; e.controlSTX = 1; e.controlSUB = 26; e.controlSYN = 22; e.controlUS = 31; e.controlVT = 11; e.copyright = 169; e.copyrightsans = 63721; e.copyrightserif = 63193; e.cornerbracketleft = 12300; e.cornerbracketlefthalfwidth = 65378; e.cornerbracketleftvertical = 65089; e.cornerbracketright = 12301; e.cornerbracketrighthalfwidth = 65379; e.cornerbracketrightvertical = 65090; e.corporationsquare = 13183; e.cosquare = 13255; e.coverkgsquare = 13254; e.cparen = 9374; e.cruzeiro = 8354; e.cstretched = 663; e.curlyand = 8911; e.curlyor = 8910; e.currency = 164; e.cyrBreve = 63185; e.cyrFlex = 63186; e.cyrbreve = 63188; e.cyrflex = 63189; e.d = 100; e.daarmenian = 1380; e.dabengali = 2470; e.dadarabic = 1590; e.dadeva = 2342; e.dadfinalarabic = 65214; e.dadinitialarabic = 65215; e.dadmedialarabic = 65216; e.dagesh = 1468; e.dageshhebrew = 1468; e.dagger = 8224; e.daggerdbl = 8225; e.dagujarati = 2726; e.dagurmukhi = 2598; e.dahiragana = 12384; e.dakatakana = 12480; e.dalarabic = 1583; e.dalet = 1491; e.daletdagesh = 64307; e.daletdageshhebrew = 64307; e.dalethebrew = 1491; e.dalfinalarabic = 65194; e.dammaarabic = 1615; e.dammalowarabic = 1615; e.dammatanaltonearabic = 1612; e.dammatanarabic = 1612; e.danda = 2404; e.dargahebrew = 1447; e.dargalefthebrew = 1447; e.dasiapneumatacyrilliccmb = 1157; e.dblGrave = 63187; e.dblanglebracketleft = 12298; e.dblanglebracketleftvertical = 65085; e.dblanglebracketright = 12299; e.dblanglebracketrightvertical = 65086; e.dblarchinvertedbelowcmb = 811; e.dblarrowleft = 8660; e.dblarrowright = 8658; e.dbldanda = 2405; e.dblgrave = 63190; e.dblgravecmb = 783; e.dblintegral = 8748; e.dbllowline = 8215; e.dbllowlinecmb = 819; e.dbloverlinecmb = 831; e.dblprimemod = 698; e.dblverticalbar = 8214; e.dblverticallineabovecmb = 782; e.dbopomofo = 12553; e.dbsquare = 13256; e.dcaron = 271; e.dcedilla = 7697; e.dcircle = 9427; e.dcircumflexbelow = 7699; e.dcroat = 273; e.ddabengali = 2465; e.ddadeva = 2337; e.ddagujarati = 2721; e.ddagurmukhi = 2593; e.ddalarabic = 1672; e.ddalfinalarabic = 64393; e.dddhadeva = 2396; e.ddhabengali = 2466; e.ddhadeva = 2338; e.ddhagujarati = 2722; e.ddhagurmukhi = 2594; e.ddotaccent = 7691; e.ddotbelow = 7693; e.decimalseparatorarabic = 1643; e.decimalseparatorpersian = 1643; e.decyrillic = 1076; e.degree = 176; e.dehihebrew = 1453; e.dehiragana = 12391; e.deicoptic = 1007; e.dekatakana = 12487; e.deleteleft = 9003; e.deleteright = 8998; e.delta = 948; e.deltaturned = 397; e.denominatorminusonenumeratorbengali = 2552; e.dezh = 676; e.dhabengali = 2471; e.dhadeva = 2343; e.dhagujarati = 2727; e.dhagurmukhi = 2599; e.dhook = 599; e.dialytikatonos = 901; e.dialytikatonoscmb = 836; e.diamond = 9830; e.diamondsuitwhite = 9826; e.dieresis = 168; e.dieresisacute = 63191; e.dieresisbelowcmb = 804; e.dieresiscmb = 776; e.dieresisgrave = 63192; e.dieresistonos = 901; e.dihiragana = 12386; e.dikatakana = 12482; e.dittomark = 12291; e.divide = 247; e.divides = 8739; e.divisionslash = 8725; e.djecyrillic = 1106; e.dkshade = 9619; e.dlinebelow = 7695; e.dlsquare = 13207; e.dmacron = 273; e.dmonospace = 65348; e.dnblock = 9604; e.dochadathai = 3598; e.dodekthai = 3604; e.dohiragana = 12393; e.dokatakana = 12489; e.dollar = 36; e.dollarinferior = 63203; e.dollarmonospace = 65284; e.dollaroldstyle = 63268; e.dollarsmall = 65129; e.dollarsuperior = 63204; e.dong = 8363; e.dorusquare = 13094; e.dotaccent = 729; e.dotaccentcmb = 775; e.dotbelowcmb = 803; e.dotbelowcomb = 803; e.dotkatakana = 12539; e.dotlessi = 305; e.dotlessj = 63166; e.dotlessjstrokehook = 644; e.dotmath = 8901; e.dottedcircle = 9676; e.doubleyodpatah = 64287; e.doubleyodpatahhebrew = 64287; e.downtackbelowcmb = 798; e.downtackmod = 725; e.dparen = 9375; e.dsuperior = 63211; e.dtail = 598; e.dtopbar = 396; e.duhiragana = 12389; e.dukatakana = 12485; e.dz = 499; e.dzaltone = 675; e.dzcaron = 454; e.dzcurl = 677; e.dzeabkhasiancyrillic = 1249; e.dzecyrillic = 1109; e.dzhecyrillic = 1119; e.e = 101; e.eacute = 233; e.earth = 9793; e.ebengali = 2447; e.ebopomofo = 12572; e.ebreve = 277; e.ecandradeva = 2317; e.ecandragujarati = 2701; e.ecandravowelsigndeva = 2373; e.ecandravowelsigngujarati = 2757; e.ecaron = 283; e.ecedillabreve = 7709; e.echarmenian = 1381; e.echyiwnarmenian = 1415; e.ecircle = 9428; e.ecircumflex = 234; e.ecircumflexacute = 7871; e.ecircumflexbelow = 7705; e.ecircumflexdotbelow = 7879; e.ecircumflexgrave = 7873; e.ecircumflexhookabove = 7875; e.ecircumflextilde = 7877; e.ecyrillic = 1108; e.edblgrave = 517; e.edeva = 2319; e.edieresis = 235; e.edot = 279; e.edotaccent = 279; e.edotbelow = 7865; e.eegurmukhi = 2575; e.eematragurmukhi = 2631; e.efcyrillic = 1092; e.egrave = 232; e.egujarati = 2703; e.eharmenian = 1383; e.ehbopomofo = 12573; e.ehiragana = 12360; e.ehookabove = 7867; e.eibopomofo = 12575; e.eight = 56; e.eightarabic = 1640; e.eightbengali = 2542; e.eightcircle = 9319; e.eightcircleinversesansserif = 10129; e.eightdeva = 2414; e.eighteencircle = 9329; e.eighteenparen = 9349; e.eighteenperiod = 9369; e.eightgujarati = 2798; e.eightgurmukhi = 2670; e.eighthackarabic = 1640; e.eighthangzhou = 12328; e.eighthnotebeamed = 9835; e.eightideographicparen = 12839; e.eightinferior = 8328; e.eightmonospace = 65304; e.eightoldstyle = 63288; e.eightparen = 9339; e.eightperiod = 9359; e.eightpersian = 1784; e.eightroman = 8567; e.eightsuperior = 8312; e.eightthai = 3672; e.einvertedbreve = 519; e.eiotifiedcyrillic = 1125; e.ekatakana = 12456; e.ekatakanahalfwidth = 65396; e.ekonkargurmukhi = 2676; e.ekorean = 12628; e.elcyrillic = 1083; e.element = 8712; e.elevencircle = 9322; e.elevenparen = 9342; e.elevenperiod = 9362; e.elevenroman = 8570; e.ellipsis = 8230; e.ellipsisvertical = 8942; e.emacron = 275; e.emacronacute = 7703; e.emacrongrave = 7701; e.emcyrillic = 1084; e.emdash = 8212; e.emdashvertical = 65073; e.emonospace = 65349; e.emphasismarkarmenian = 1371; e.emptyset = 8709; e.enbopomofo = 12579; e.encyrillic = 1085; e.endash = 8211; e.endashvertical = 65074; e.endescendercyrillic = 1187; e.eng = 331; e.engbopomofo = 12581; e.enghecyrillic = 1189; e.enhookcyrillic = 1224; e.enspace = 8194; e.eogonek = 281; e.eokorean = 12627; e.eopen = 603; e.eopenclosed = 666; e.eopenreversed = 604; e.eopenreversedclosed = 606; e.eopenreversedhook = 605; e.eparen = 9376; e.epsilon = 949; e.epsilontonos = 941; e.equal = 61; e.equalmonospace = 65309; e.equalsmall = 65126; e.equalsuperior = 8316; e.equivalence = 8801; e.erbopomofo = 12582; e.ercyrillic = 1088; e.ereversed = 600; e.ereversedcyrillic = 1101; e.escyrillic = 1089; e.esdescendercyrillic = 1195; e.esh = 643; e.eshcurl = 646; e.eshortdeva = 2318; e.eshortvowelsigndeva = 2374; e.eshreversedloop = 426; e.eshsquatreversed = 645; e.esmallhiragana = 12359; e.esmallkatakana = 12455; e.esmallkatakanahalfwidth = 65386; e.estimated = 8494; e.esuperior = 63212; e.eta = 951; e.etarmenian = 1384; e.etatonos = 942; e.eth = 240; e.etilde = 7869; e.etildebelow = 7707; e.etnahtafoukhhebrew = 1425; e.etnahtafoukhlefthebrew = 1425; e.etnahtahebrew = 1425; e.etnahtalefthebrew = 1425; e.eturned = 477; e.eukorean = 12641; e.euro = 8364; e.evowelsignbengali = 2503; e.evowelsigndeva = 2375; e.evowelsigngujarati = 2759; e.exclam = 33; e.exclamarmenian = 1372; e.exclamdbl = 8252; e.exclamdown = 161; e.exclamdownsmall = 63393; e.exclammonospace = 65281; e.exclamsmall = 63265; e.existential = 8707; e.ezh = 658; e.ezhcaron = 495; e.ezhcurl = 659; e.ezhreversed = 441; e.ezhtail = 442; e.f = 102; e.fadeva = 2398; e.fagurmukhi = 2654; e.fahrenheit = 8457; e.fathaarabic = 1614; e.fathalowarabic = 1614; e.fathatanarabic = 1611; e.fbopomofo = 12552; e.fcircle = 9429; e.fdotaccent = 7711; e.feharabic = 1601; e.feharmenian = 1414; e.fehfinalarabic = 65234; e.fehinitialarabic = 65235; e.fehmedialarabic = 65236; e.feicoptic = 997; e.female = 9792; e.ff = 64256; e.f_f = 64256; e.ffi = 64259; e.ffl = 64260; e.fi = 64257; e.fifteencircle = 9326; e.fifteenparen = 9346; e.fifteenperiod = 9366; e.figuredash = 8210; e.filledbox = 9632; e.filledrect = 9644; e.finalkaf = 1498; e.finalkafdagesh = 64314; e.finalkafdageshhebrew = 64314; e.finalkafhebrew = 1498; e.finalmem = 1501; e.finalmemhebrew = 1501; e.finalnun = 1503; e.finalnunhebrew = 1503; e.finalpe = 1507; e.finalpehebrew = 1507; e.finaltsadi = 1509; e.finaltsadihebrew = 1509; e.firsttonechinese = 713; e.fisheye = 9673; e.fitacyrillic = 1139; e.five = 53; e.fivearabic = 1637; e.fivebengali = 2539; e.fivecircle = 9316; e.fivecircleinversesansserif = 10126; e.fivedeva = 2411; e.fiveeighths = 8541; e.fivegujarati = 2795; e.fivegurmukhi = 2667; e.fivehackarabic = 1637; e.fivehangzhou = 12325; e.fiveideographicparen = 12836; e.fiveinferior = 8325; e.fivemonospace = 65301; e.fiveoldstyle = 63285; e.fiveparen = 9336; e.fiveperiod = 9356; e.fivepersian = 1781; e.fiveroman = 8564; e.fivesuperior = 8309; e.fivethai = 3669; e.fl = 64258; e.florin = 402; e.fmonospace = 65350; e.fmsquare = 13209; e.fofanthai = 3615; e.fofathai = 3613; e.fongmanthai = 3663; e.forall = 8704; e.four = 52; e.fourarabic = 1636; e.fourbengali = 2538; e.fourcircle = 9315; e.fourcircleinversesansserif = 10125; e.fourdeva = 2410; e.fourgujarati = 2794; e.fourgurmukhi = 2666; e.fourhackarabic = 1636; e.fourhangzhou = 12324; e.fourideographicparen = 12835; e.fourinferior = 8324; e.fourmonospace = 65300; e.fournumeratorbengali = 2551; e.fouroldstyle = 63284; e.fourparen = 9335; e.fourperiod = 9355; e.fourpersian = 1780; e.fourroman = 8563; e.foursuperior = 8308; e.fourteencircle = 9325; e.fourteenparen = 9345; e.fourteenperiod = 9365; e.fourthai = 3668; e.fourthtonechinese = 715; e.fparen = 9377; e.fraction = 8260; e.franc = 8355; e.g = 103; e.gabengali = 2455; e.gacute = 501; e.gadeva = 2327; e.gafarabic = 1711; e.gaffinalarabic = 64403; e.gafinitialarabic = 64404; e.gafmedialarabic = 64405; e.gagujarati = 2711; e.gagurmukhi = 2583; e.gahiragana = 12364; e.gakatakana = 12460; e.gamma = 947; e.gammalatinsmall = 611; e.gammasuperior = 736; e.gangiacoptic = 1003; e.gbopomofo = 12557; e.gbreve = 287; e.gcaron = 487; e.gcedilla = 291; e.gcircle = 9430; e.gcircumflex = 285; e.gcommaaccent = 291; e.gdot = 289; e.gdotaccent = 289; e.gecyrillic = 1075; e.gehiragana = 12370; e.gekatakana = 12466; e.geometricallyequal = 8785; e.gereshaccenthebrew = 1436; e.gereshhebrew = 1523; e.gereshmuqdamhebrew = 1437; e.germandbls = 223; e.gershayimaccenthebrew = 1438; e.gershayimhebrew = 1524; e.getamark = 12307; e.ghabengali = 2456; e.ghadarmenian = 1394; e.ghadeva = 2328; e.ghagujarati = 2712; e.ghagurmukhi = 2584; e.ghainarabic = 1594; e.ghainfinalarabic = 65230; e.ghaininitialarabic = 65231; e.ghainmedialarabic = 65232; e.ghemiddlehookcyrillic = 1173; e.ghestrokecyrillic = 1171; e.gheupturncyrillic = 1169; e.ghhadeva = 2394; e.ghhagurmukhi = 2650; e.ghook = 608; e.ghzsquare = 13203; e.gihiragana = 12366; e.gikatakana = 12462; e.gimarmenian = 1379; e.gimel = 1490; e.gimeldagesh = 64306; e.gimeldageshhebrew = 64306; e.gimelhebrew = 1490; e.gjecyrillic = 1107; e.glottalinvertedstroke = 446; e.glottalstop = 660; e.glottalstopinverted = 662; e.glottalstopmod = 704; e.glottalstopreversed = 661; e.glottalstopreversedmod = 705; e.glottalstopreversedsuperior = 740; e.glottalstopstroke = 673; e.glottalstopstrokereversed = 674; e.gmacron = 7713; e.gmonospace = 65351; e.gohiragana = 12372; e.gokatakana = 12468; e.gparen = 9378; e.gpasquare = 13228; e.gradient = 8711; e.grave = 96; e.gravebelowcmb = 790; e.gravecmb = 768; e.gravecomb = 768; e.gravedeva = 2387; e.gravelowmod = 718; e.gravemonospace = 65344; e.gravetonecmb = 832; e.greater = 62; e.greaterequal = 8805; e.greaterequalorless = 8923; e.greatermonospace = 65310; e.greaterorequivalent = 8819; e.greaterorless = 8823; e.greateroverequal = 8807; e.greatersmall = 65125; e.gscript = 609; e.gstroke = 485; e.guhiragana = 12368; e.guillemotleft = 171; e.guillemotright = 187; e.guilsinglleft = 8249; e.guilsinglright = 8250; e.gukatakana = 12464; e.guramusquare = 13080; e.gysquare = 13257; e.h = 104; e.haabkhasiancyrillic = 1193; e.haaltonearabic = 1729; e.habengali = 2489; e.hadescendercyrillic = 1203; e.hadeva = 2361; e.hagujarati = 2745; e.hagurmukhi = 2617; e.haharabic = 1581; e.hahfinalarabic = 65186; e.hahinitialarabic = 65187; e.hahiragana = 12399; e.hahmedialarabic = 65188; e.haitusquare = 13098; e.hakatakana = 12495; e.hakatakanahalfwidth = 65418; e.halantgurmukhi = 2637; e.hamzaarabic = 1569; e.hamzalowarabic = 1569; e.hangulfiller = 12644; e.hardsigncyrillic = 1098; e.harpoonleftbarbup = 8636; e.harpoonrightbarbup = 8640; e.hasquare = 13258; e.hatafpatah = 1458; e.hatafpatah16 = 1458; e.hatafpatah23 = 1458; e.hatafpatah2f = 1458; e.hatafpatahhebrew = 1458; e.hatafpatahnarrowhebrew = 1458; e.hatafpatahquarterhebrew = 1458; e.hatafpatahwidehebrew = 1458; e.hatafqamats = 1459; e.hatafqamats1b = 1459; e.hatafqamats28 = 1459; e.hatafqamats34 = 1459; e.hatafqamatshebrew = 1459; e.hatafqamatsnarrowhebrew = 1459; e.hatafqamatsquarterhebrew = 1459; e.hatafqamatswidehebrew = 1459; e.hatafsegol = 1457; e.hatafsegol17 = 1457; e.hatafsegol24 = 1457; e.hatafsegol30 = 1457; e.hatafsegolhebrew = 1457; e.hatafsegolnarrowhebrew = 1457; e.hatafsegolquarterhebrew = 1457; e.hatafsegolwidehebrew = 1457; e.hbar = 295; e.hbopomofo = 12559; e.hbrevebelow = 7723; e.hcedilla = 7721; e.hcircle = 9431; e.hcircumflex = 293; e.hdieresis = 7719; e.hdotaccent = 7715; e.hdotbelow = 7717; e.he = 1492; e.heart = 9829; e.heartsuitblack = 9829; e.heartsuitwhite = 9825; e.hedagesh = 64308; e.hedageshhebrew = 64308; e.hehaltonearabic = 1729; e.heharabic = 1607; e.hehebrew = 1492; e.hehfinalaltonearabic = 64423; e.hehfinalalttwoarabic = 65258; e.hehfinalarabic = 65258; e.hehhamzaabovefinalarabic = 64421; e.hehhamzaaboveisolatedarabic = 64420; e.hehinitialaltonearabic = 64424; e.hehinitialarabic = 65259; e.hehiragana = 12408; e.hehmedialaltonearabic = 64425; e.hehmedialarabic = 65260; e.heiseierasquare = 13179; e.hekatakana = 12504; e.hekatakanahalfwidth = 65421; e.hekutaarusquare = 13110; e.henghook = 615; e.herutusquare = 13113; e.het = 1495; e.hethebrew = 1495; e.hhook = 614; e.hhooksuperior = 689; e.hieuhacirclekorean = 12923; e.hieuhaparenkorean = 12827; e.hieuhcirclekorean = 12909; e.hieuhkorean = 12622; e.hieuhparenkorean = 12813; e.hihiragana = 12402; e.hikatakana = 12498; e.hikatakanahalfwidth = 65419; e.hiriq = 1460; e.hiriq14 = 1460; e.hiriq21 = 1460; e.hiriq2d = 1460; e.hiriqhebrew = 1460; e.hiriqnarrowhebrew = 1460; e.hiriqquarterhebrew = 1460; e.hiriqwidehebrew = 1460; e.hlinebelow = 7830; e.hmonospace = 65352; e.hoarmenian = 1392; e.hohipthai = 3627; e.hohiragana = 12411; e.hokatakana = 12507; e.hokatakanahalfwidth = 65422; e.holam = 1465; e.holam19 = 1465; e.holam26 = 1465; e.holam32 = 1465; e.holamhebrew = 1465; e.holamnarrowhebrew = 1465; e.holamquarterhebrew = 1465; e.holamwidehebrew = 1465; e.honokhukthai = 3630; e.hookabovecomb = 777; e.hookcmb = 777; e.hookpalatalizedbelowcmb = 801; e.hookretroflexbelowcmb = 802; e.hoonsquare = 13122; e.horicoptic = 1001; e.horizontalbar = 8213; e.horncmb = 795; e.hotsprings = 9832; e.house = 8962; e.hparen = 9379; e.hsuperior = 688; e.hturned = 613; e.huhiragana = 12405; e.huiitosquare = 13107; e.hukatakana = 12501; e.hukatakanahalfwidth = 65420; e.hungarumlaut = 733; e.hungarumlautcmb = 779; e.hv = 405; e.hyphen = 45; e.hypheninferior = 63205; e.hyphenmonospace = 65293; e.hyphensmall = 65123; e.hyphensuperior = 63206; e.hyphentwo = 8208; e.i = 105; e.iacute = 237; e.iacyrillic = 1103; e.ibengali = 2439; e.ibopomofo = 12583; e.ibreve = 301; e.icaron = 464; e.icircle = 9432; e.icircumflex = 238; e.icyrillic = 1110; e.idblgrave = 521; e.ideographearthcircle = 12943; e.ideographfirecircle = 12939; e.ideographicallianceparen = 12863; e.ideographiccallparen = 12858; e.ideographiccentrecircle = 12965; e.ideographicclose = 12294; e.ideographiccomma = 12289; e.ideographiccommaleft = 65380; e.ideographiccongratulationparen = 12855; e.ideographiccorrectcircle = 12963; e.ideographicearthparen = 12847; e.ideographicenterpriseparen = 12861; e.ideographicexcellentcircle = 12957; e.ideographicfestivalparen = 12864; e.ideographicfinancialcircle = 12950; e.ideographicfinancialparen = 12854; e.ideographicfireparen = 12843; e.ideographichaveparen = 12850; e.ideographichighcircle = 12964; e.ideographiciterationmark = 12293; e.ideographiclaborcircle = 12952; e.ideographiclaborparen = 12856; e.ideographicleftcircle = 12967; e.ideographiclowcircle = 12966; e.ideographicmedicinecircle = 12969; e.ideographicmetalparen = 12846; e.ideographicmoonparen = 12842; e.ideographicnameparen = 12852; e.ideographicperiod = 12290; e.ideographicprintcircle = 12958; e.ideographicreachparen = 12867; e.ideographicrepresentparen = 12857; e.ideographicresourceparen = 12862; e.ideographicrightcircle = 12968; e.ideographicsecretcircle = 12953; e.ideographicselfparen = 12866; e.ideographicsocietyparen = 12851; e.ideographicspace = 12288; e.ideographicspecialparen = 12853; e.ideographicstockparen = 12849; e.ideographicstudyparen = 12859; e.ideographicsunparen = 12848; e.ideographicsuperviseparen = 12860; e.ideographicwaterparen = 12844; e.ideographicwoodparen = 12845; e.ideographiczero = 12295; e.ideographmetalcircle = 12942; e.ideographmooncircle = 12938; e.ideographnamecircle = 12948; e.ideographsuncircle = 12944; e.ideographwatercircle = 12940; e.ideographwoodcircle = 12941; e.ideva = 2311; e.idieresis = 239; e.idieresisacute = 7727; e.idieresiscyrillic = 1253; e.idotbelow = 7883; e.iebrevecyrillic = 1239; e.iecyrillic = 1077; e.ieungacirclekorean = 12917; e.ieungaparenkorean = 12821; e.ieungcirclekorean = 12903; e.ieungkorean = 12615; e.ieungparenkorean = 12807; e.igrave = 236; e.igujarati = 2695; e.igurmukhi = 2567; e.ihiragana = 12356; e.ihookabove = 7881; e.iibengali = 2440; e.iicyrillic = 1080; e.iideva = 2312; e.iigujarati = 2696; e.iigurmukhi = 2568; e.iimatragurmukhi = 2624; e.iinvertedbreve = 523; e.iishortcyrillic = 1081; e.iivowelsignbengali = 2496; e.iivowelsigndeva = 2368; e.iivowelsigngujarati = 2752; e.ij = 307; e.ikatakana = 12452; e.ikatakanahalfwidth = 65394; e.ikorean = 12643; e.ilde = 732; e.iluyhebrew = 1452; e.imacron = 299; e.imacroncyrillic = 1251; e.imageorapproximatelyequal = 8787; e.imatragurmukhi = 2623; e.imonospace = 65353; e.increment = 8710; e.infinity = 8734; e.iniarmenian = 1387; e.integral = 8747; e.integralbottom = 8993; e.integralbt = 8993; e.integralex = 63733; e.integraltop = 8992; e.integraltp = 8992; e.intersection = 8745; e.intisquare = 13061; e.invbullet = 9688; e.invcircle = 9689; e.invsmileface = 9787; e.iocyrillic = 1105; e.iogonek = 303; e.iota = 953; e.iotadieresis = 970; e.iotadieresistonos = 912; e.iotalatin = 617; e.iotatonos = 943; e.iparen = 9380; e.irigurmukhi = 2674; e.ismallhiragana = 12355; e.ismallkatakana = 12451; e.ismallkatakanahalfwidth = 65384; e.issharbengali = 2554; e.istroke = 616; e.isuperior = 63213; e.iterationhiragana = 12445; e.iterationkatakana = 12541; e.itilde = 297; e.itildebelow = 7725; e.iubopomofo = 12585; e.iucyrillic = 1102; e.ivowelsignbengali = 2495; e.ivowelsigndeva = 2367; e.ivowelsigngujarati = 2751; e.izhitsacyrillic = 1141; e.izhitsadblgravecyrillic = 1143; e.j = 106; e.jaarmenian = 1393; e.jabengali = 2460; e.jadeva = 2332; e.jagujarati = 2716; e.jagurmukhi = 2588; e.jbopomofo = 12560; e.jcaron = 496; e.jcircle = 9433; e.jcircumflex = 309; e.jcrossedtail = 669; e.jdotlessstroke = 607; e.jecyrillic = 1112; e.jeemarabic = 1580; e.jeemfinalarabic = 65182; e.jeeminitialarabic = 65183; e.jeemmedialarabic = 65184; e.jeharabic = 1688; e.jehfinalarabic = 64395; e.jhabengali = 2461; e.jhadeva = 2333; e.jhagujarati = 2717; e.jhagurmukhi = 2589; e.jheharmenian = 1403; e.jis = 12292; e.jmonospace = 65354; e.jparen = 9381; e.jsuperior = 690; e.k = 107; e.kabashkircyrillic = 1185; e.kabengali = 2453; e.kacute = 7729; e.kacyrillic = 1082; e.kadescendercyrillic = 1179; e.kadeva = 2325; e.kaf = 1499; e.kafarabic = 1603; e.kafdagesh = 64315; e.kafdageshhebrew = 64315; e.kaffinalarabic = 65242; e.kafhebrew = 1499; e.kafinitialarabic = 65243; e.kafmedialarabic = 65244; e.kafrafehebrew = 64333; e.kagujarati = 2709; e.kagurmukhi = 2581; e.kahiragana = 12363; e.kahookcyrillic = 1220; e.kakatakana = 12459; e.kakatakanahalfwidth = 65398; e.kappa = 954; e.kappasymbolgreek = 1008; e.kapyeounmieumkorean = 12657; e.kapyeounphieuphkorean = 12676; e.kapyeounpieupkorean = 12664; e.kapyeounssangpieupkorean = 12665; e.karoriisquare = 13069; e.kashidaautoarabic = 1600; e.kashidaautonosidebearingarabic = 1600; e.kasmallkatakana = 12533; e.kasquare = 13188; e.kasraarabic = 1616; e.kasratanarabic = 1613; e.kastrokecyrillic = 1183; e.katahiraprolongmarkhalfwidth = 65392; e.kaverticalstrokecyrillic = 1181; e.kbopomofo = 12558; e.kcalsquare = 13193; e.kcaron = 489; e.kcedilla = 311; e.kcircle = 9434; e.kcommaaccent = 311; e.kdotbelow = 7731; e.keharmenian = 1412; e.kehiragana = 12369; e.kekatakana = 12465; e.kekatakanahalfwidth = 65401; e.kenarmenian = 1391; e.kesmallkatakana = 12534; e.kgreenlandic = 312; e.khabengali = 2454; e.khacyrillic = 1093; e.khadeva = 2326; e.khagujarati = 2710; e.khagurmukhi = 2582; e.khaharabic = 1582; e.khahfinalarabic = 65190; e.khahinitialarabic = 65191; e.khahmedialarabic = 65192; e.kheicoptic = 999; e.khhadeva = 2393; e.khhagurmukhi = 2649; e.khieukhacirclekorean = 12920; e.khieukhaparenkorean = 12824; e.khieukhcirclekorean = 12906; e.khieukhkorean = 12619; e.khieukhparenkorean = 12810; e.khokhaithai = 3586; e.khokhonthai = 3589; e.khokhuatthai = 3587; e.khokhwaithai = 3588; e.khomutthai = 3675; e.khook = 409; e.khorakhangthai = 3590; e.khzsquare = 13201; e.kihiragana = 12365; e.kikatakana = 12461; e.kikatakanahalfwidth = 65399; e.kiroguramusquare = 13077; e.kiromeetorusquare = 13078; e.kirosquare = 13076; e.kiyeokacirclekorean = 12910; e.kiyeokaparenkorean = 12814; e.kiyeokcirclekorean = 12896; e.kiyeokkorean = 12593; e.kiyeokparenkorean = 12800; e.kiyeoksioskorean = 12595; e.kjecyrillic = 1116; e.klinebelow = 7733; e.klsquare = 13208; e.kmcubedsquare = 13222; e.kmonospace = 65355; e.kmsquaredsquare = 13218; e.kohiragana = 12371; e.kohmsquare = 13248; e.kokaithai = 3585; e.kokatakana = 12467; e.kokatakanahalfwidth = 65402; e.kooposquare = 13086; e.koppacyrillic = 1153; e.koreanstandardsymbol = 12927; e.koroniscmb = 835; e.kparen = 9382; e.kpasquare = 13226; e.ksicyrillic = 1135; e.ktsquare = 13263; e.kturned = 670; e.kuhiragana = 12367; e.kukatakana = 12463; e.kukatakanahalfwidth = 65400; e.kvsquare = 13240; e.kwsquare = 13246; e.l = 108; e.labengali = 2482; e.lacute = 314; e.ladeva = 2354; e.lagujarati = 2738; e.lagurmukhi = 2610; e.lakkhangyaothai = 3653; e.lamaleffinalarabic = 65276; e.lamalefhamzaabovefinalarabic = 65272; e.lamalefhamzaaboveisolatedarabic = 65271; e.lamalefhamzabelowfinalarabic = 65274; e.lamalefhamzabelowisolatedarabic = 65273; e.lamalefisolatedarabic = 65275; e.lamalefmaddaabovefinalarabic = 65270; e.lamalefmaddaaboveisolatedarabic = 65269; e.lamarabic = 1604; e.lambda = 955; e.lambdastroke = 411; e.lamed = 1500; e.lameddagesh = 64316; e.lameddageshhebrew = 64316; e.lamedhebrew = 1500; e.lamfinalarabic = 65246; e.lamhahinitialarabic = 64714; e.laminitialarabic = 65247; e.lamjeeminitialarabic = 64713; e.lamkhahinitialarabic = 64715; e.lamlamhehisolatedarabic = 65010; e.lammedialarabic = 65248; e.lammeemhahinitialarabic = 64904; e.lammeeminitialarabic = 64716; e.largecircle = 9711; e.lbar = 410; e.lbelt = 620; e.lbopomofo = 12556; e.lcaron = 318; e.lcedilla = 316; e.lcircle = 9435; e.lcircumflexbelow = 7741; e.lcommaaccent = 316; e.ldot = 320; e.ldotaccent = 320; e.ldotbelow = 7735; e.ldotbelowmacron = 7737; e.leftangleabovecmb = 794; e.lefttackbelowcmb = 792; e.less = 60; e.lessequal = 8804; e.lessequalorgreater = 8922; e.lessmonospace = 65308; e.lessorequivalent = 8818; e.lessorgreater = 8822; e.lessoverequal = 8806; e.lesssmall = 65124; e.lezh = 622; e.lfblock = 9612; e.lhookretroflex = 621; e.lira = 8356; e.liwnarmenian = 1388; e.lj = 457; e.ljecyrillic = 1113; e.ll = 63168; e.lladeva = 2355; e.llagujarati = 2739; e.llinebelow = 7739; e.llladeva = 2356; e.llvocalicbengali = 2529; e.llvocalicdeva = 2401; e.llvocalicvowelsignbengali = 2531; e.llvocalicvowelsigndeva = 2403; e.lmiddletilde = 619; e.lmonospace = 65356; e.lmsquare = 13264; e.lochulathai = 3628; e.logicaland = 8743; e.logicalnot = 172; e.logicalnotreversed = 8976; e.logicalor = 8744; e.lolingthai = 3621; e.longs = 383; e.lowlinecenterline = 65102; e.lowlinecmb = 818; e.lowlinedashed = 65101; e.lozenge = 9674; e.lparen = 9383; e.lslash = 322; e.lsquare = 8467; e.lsuperior = 63214; e.ltshade = 9617; e.luthai = 3622; e.lvocalicbengali = 2444; e.lvocalicdeva = 2316; e.lvocalicvowelsignbengali = 2530; e.lvocalicvowelsigndeva = 2402; e.lxsquare = 13267; e.m = 109; e.mabengali = 2478; e.macron = 175; e.macronbelowcmb = 817; e.macroncmb = 772; e.macronlowmod = 717; e.macronmonospace = 65507; e.macute = 7743; e.madeva = 2350; e.magujarati = 2734; e.magurmukhi = 2606; e.mahapakhhebrew = 1444; e.mahapakhlefthebrew = 1444; e.mahiragana = 12414; e.maichattawalowleftthai = 63637; e.maichattawalowrightthai = 63636; e.maichattawathai = 3659; e.maichattawaupperleftthai = 63635; e.maieklowleftthai = 63628; e.maieklowrightthai = 63627; e.maiekthai = 3656; e.maiekupperleftthai = 63626; e.maihanakatleftthai = 63620; e.maihanakatthai = 3633; e.maitaikhuleftthai = 63625; e.maitaikhuthai = 3655; e.maitholowleftthai = 63631; e.maitholowrightthai = 63630; e.maithothai = 3657; e.maithoupperleftthai = 63629; e.maitrilowleftthai = 63634; e.maitrilowrightthai = 63633; e.maitrithai = 3658; e.maitriupperleftthai = 63632; e.maiyamokthai = 3654; e.makatakana = 12510; e.makatakanahalfwidth = 65423; e.male = 9794; e.mansyonsquare = 13127; e.maqafhebrew = 1470; e.mars = 9794; e.masoracirclehebrew = 1455; e.masquare = 13187; e.mbopomofo = 12551; e.mbsquare = 13268; e.mcircle = 9436; e.mcubedsquare = 13221; e.mdotaccent = 7745; e.mdotbelow = 7747; e.meemarabic = 1605; e.meemfinalarabic = 65250; e.meeminitialarabic = 65251; e.meemmedialarabic = 65252; e.meemmeeminitialarabic = 64721; e.meemmeemisolatedarabic = 64584; e.meetorusquare = 13133; e.mehiragana = 12417; e.meizierasquare = 13182; e.mekatakana = 12513; e.mekatakanahalfwidth = 65426; e.mem = 1502; e.memdagesh = 64318; e.memdageshhebrew = 64318; e.memhebrew = 1502; e.menarmenian = 1396; e.merkhahebrew = 1445; e.merkhakefulahebrew = 1446; e.merkhakefulalefthebrew = 1446; e.merkhalefthebrew = 1445; e.mhook = 625; e.mhzsquare = 13202; e.middledotkatakanahalfwidth = 65381; e.middot = 183; e.mieumacirclekorean = 12914; e.mieumaparenkorean = 12818; e.mieumcirclekorean = 12900; e.mieumkorean = 12609; e.mieumpansioskorean = 12656; e.mieumparenkorean = 12804; e.mieumpieupkorean = 12654; e.mieumsioskorean = 12655; e.mihiragana = 12415; e.mikatakana = 12511; e.mikatakanahalfwidth = 65424; e.minus = 8722; e.minusbelowcmb = 800; e.minuscircle = 8854; e.minusmod = 727; e.minusplus = 8723; e.minute = 8242; e.miribaarusquare = 13130; e.mirisquare = 13129; e.mlonglegturned = 624; e.mlsquare = 13206; e.mmcubedsquare = 13219; e.mmonospace = 65357; e.mmsquaredsquare = 13215; e.mohiragana = 12418; e.mohmsquare = 13249; e.mokatakana = 12514; e.mokatakanahalfwidth = 65427; e.molsquare = 13270; e.momathai = 3617; e.moverssquare = 13223; e.moverssquaredsquare = 13224; e.mparen = 9384; e.mpasquare = 13227; e.mssquare = 13235; e.msuperior = 63215; e.mturned = 623; e.mu = 181; e.mu1 = 181; e.muasquare = 13186; e.muchgreater = 8811; e.muchless = 8810; e.mufsquare = 13196; e.mugreek = 956; e.mugsquare = 13197; e.muhiragana = 12416; e.mukatakana = 12512; e.mukatakanahalfwidth = 65425; e.mulsquare = 13205; e.multiply = 215; e.mumsquare = 13211; e.munahhebrew = 1443; e.munahlefthebrew = 1443; e.musicalnote = 9834; e.musicalnotedbl = 9835; e.musicflatsign = 9837; e.musicsharpsign = 9839; e.mussquare = 13234; e.muvsquare = 13238; e.muwsquare = 13244; e.mvmegasquare = 13241; e.mvsquare = 13239; e.mwmegasquare = 13247; e.mwsquare = 13245; e.n = 110; e.nabengali = 2472; e.nabla = 8711; e.nacute = 324; e.nadeva = 2344; e.nagujarati = 2728; e.nagurmukhi = 2600; e.nahiragana = 12394; e.nakatakana = 12490; e.nakatakanahalfwidth = 65413; e.napostrophe = 329; e.nasquare = 13185; e.nbopomofo = 12555; e.nbspace = 160; e.ncaron = 328; e.ncedilla = 326; e.ncircle = 9437; e.ncircumflexbelow = 7755; e.ncommaaccent = 326; e.ndotaccent = 7749; e.ndotbelow = 7751; e.nehiragana = 12397; e.nekatakana = 12493; e.nekatakanahalfwidth = 65416; e.newsheqelsign = 8362; e.nfsquare = 13195; e.ngabengali = 2457; e.ngadeva = 2329; e.ngagujarati = 2713; e.ngagurmukhi = 2585; e.ngonguthai = 3591; e.nhiragana = 12435; e.nhookleft = 626; e.nhookretroflex = 627; e.nieunacirclekorean = 12911; e.nieunaparenkorean = 12815; e.nieuncieuckorean = 12597; e.nieuncirclekorean = 12897; e.nieunhieuhkorean = 12598; e.nieunkorean = 12596; e.nieunpansioskorean = 12648; e.nieunparenkorean = 12801; e.nieunsioskorean = 12647; e.nieuntikeutkorean = 12646; e.nihiragana = 12395; e.nikatakana = 12491; e.nikatakanahalfwidth = 65414; e.nikhahitleftthai = 63641; e.nikhahitthai = 3661; e.nine = 57; e.ninearabic = 1641; e.ninebengali = 2543; e.ninecircle = 9320; e.ninecircleinversesansserif = 10130; e.ninedeva = 2415; e.ninegujarati = 2799; e.ninegurmukhi = 2671; e.ninehackarabic = 1641; e.ninehangzhou = 12329; e.nineideographicparen = 12840; e.nineinferior = 8329; e.ninemonospace = 65305; e.nineoldstyle = 63289; e.nineparen = 9340; e.nineperiod = 9360; e.ninepersian = 1785; e.nineroman = 8568; e.ninesuperior = 8313; e.nineteencircle = 9330; e.nineteenparen = 9350; e.nineteenperiod = 9370; e.ninethai = 3673; e.nj = 460; e.njecyrillic = 1114; e.nkatakana = 12531; e.nkatakanahalfwidth = 65437; e.nlegrightlong = 414; e.nlinebelow = 7753; e.nmonospace = 65358; e.nmsquare = 13210; e.nnabengali = 2467; e.nnadeva = 2339; e.nnagujarati = 2723; e.nnagurmukhi = 2595; e.nnnadeva = 2345; e.nohiragana = 12398; e.nokatakana = 12494; e.nokatakanahalfwidth = 65417; e.nonbreakingspace = 160; e.nonenthai = 3603; e.nonuthai = 3609; e.noonarabic = 1606; e.noonfinalarabic = 65254; e.noonghunnaarabic = 1722; e.noonghunnafinalarabic = 64415; e.nooninitialarabic = 65255; e.noonjeeminitialarabic = 64722; e.noonjeemisolatedarabic = 64587; e.noonmedialarabic = 65256; e.noonmeeminitialarabic = 64725; e.noonmeemisolatedarabic = 64590; e.noonnoonfinalarabic = 64653; e.notcontains = 8716; e.notelement = 8713; e.notelementof = 8713; e.notequal = 8800; e.notgreater = 8815; e.notgreaternorequal = 8817; e.notgreaternorless = 8825; e.notidentical = 8802; e.notless = 8814; e.notlessnorequal = 8816; e.notparallel = 8742; e.notprecedes = 8832; e.notsubset = 8836; e.notsucceeds = 8833; e.notsuperset = 8837; e.nowarmenian = 1398; e.nparen = 9385; e.nssquare = 13233; e.nsuperior = 8319; e.ntilde = 241; e.nu = 957; e.nuhiragana = 12396; e.nukatakana = 12492; e.nukatakanahalfwidth = 65415; e.nuktabengali = 2492; e.nuktadeva = 2364; e.nuktagujarati = 2748; e.nuktagurmukhi = 2620; e.numbersign = 35; e.numbersignmonospace = 65283; e.numbersignsmall = 65119; e.numeralsigngreek = 884; e.numeralsignlowergreek = 885; e.numero = 8470; e.nun = 1504; e.nundagesh = 64320; e.nundageshhebrew = 64320; e.nunhebrew = 1504; e.nvsquare = 13237; e.nwsquare = 13243; e.nyabengali = 2462; e.nyadeva = 2334; e.nyagujarati = 2718; e.nyagurmukhi = 2590; e.o = 111; e.oacute = 243; e.oangthai = 3629; e.obarred = 629; e.obarredcyrillic = 1257; e.obarreddieresiscyrillic = 1259; e.obengali = 2451; e.obopomofo = 12571; e.obreve = 335; e.ocandradeva = 2321; e.ocandragujarati = 2705; e.ocandravowelsigndeva = 2377; e.ocandravowelsigngujarati = 2761; e.ocaron = 466; e.ocircle = 9438; e.ocircumflex = 244; e.ocircumflexacute = 7889; e.ocircumflexdotbelow = 7897; e.ocircumflexgrave = 7891; e.ocircumflexhookabove = 7893; e.ocircumflextilde = 7895; e.ocyrillic = 1086; e.odblacute = 337; e.odblgrave = 525; e.odeva = 2323; e.odieresis = 246; e.odieresiscyrillic = 1255; e.odotbelow = 7885; e.oe = 339; e.oekorean = 12634; e.ogonek = 731; e.ogonekcmb = 808; e.ograve = 242; e.ogujarati = 2707; e.oharmenian = 1413; e.ohiragana = 12362; e.ohookabove = 7887; e.ohorn = 417; e.ohornacute = 7899; e.ohorndotbelow = 7907; e.ohorngrave = 7901; e.ohornhookabove = 7903; e.ohorntilde = 7905; e.ohungarumlaut = 337; e.oi = 419; e.oinvertedbreve = 527; e.okatakana = 12458; e.okatakanahalfwidth = 65397; e.okorean = 12631; e.olehebrew = 1451; e.omacron = 333; e.omacronacute = 7763; e.omacrongrave = 7761; e.omdeva = 2384; e.omega = 969; e.omega1 = 982; e.omegacyrillic = 1121; e.omegalatinclosed = 631; e.omegaroundcyrillic = 1147; e.omegatitlocyrillic = 1149; e.omegatonos = 974; e.omgujarati = 2768; e.omicron = 959; e.omicrontonos = 972; e.omonospace = 65359; e.one = 49; e.onearabic = 1633; e.onebengali = 2535; e.onecircle = 9312; e.onecircleinversesansserif = 10122; e.onedeva = 2407; e.onedotenleader = 8228; e.oneeighth = 8539; e.onefitted = 63196; e.onegujarati = 2791; e.onegurmukhi = 2663; e.onehackarabic = 1633; e.onehalf = 189; e.onehangzhou = 12321; e.oneideographicparen = 12832; e.oneinferior = 8321; e.onemonospace = 65297; e.onenumeratorbengali = 2548; e.oneoldstyle = 63281; e.oneparen = 9332; e.oneperiod = 9352; e.onepersian = 1777; e.onequarter = 188; e.oneroman = 8560; e.onesuperior = 185; e.onethai = 3665; e.onethird = 8531; e.oogonek = 491; e.oogonekmacron = 493; e.oogurmukhi = 2579; e.oomatragurmukhi = 2635; e.oopen = 596; e.oparen = 9386; e.openbullet = 9702; e.option = 8997; e.ordfeminine = 170; e.ordmasculine = 186; e.orthogonal = 8735; e.oshortdeva = 2322; e.oshortvowelsigndeva = 2378; e.oslash = 248; e.oslashacute = 511; e.osmallhiragana = 12361; e.osmallkatakana = 12457; e.osmallkatakanahalfwidth = 65387; e.ostrokeacute = 511; e.osuperior = 63216; e.otcyrillic = 1151; e.otilde = 245; e.otildeacute = 7757; e.otildedieresis = 7759; e.oubopomofo = 12577; e.overline = 8254; e.overlinecenterline = 65098; e.overlinecmb = 773; e.overlinedashed = 65097; e.overlinedblwavy = 65100; e.overlinewavy = 65099; e.overscore = 175; e.ovowelsignbengali = 2507; e.ovowelsigndeva = 2379; e.ovowelsigngujarati = 2763; e.p = 112; e.paampssquare = 13184; e.paasentosquare = 13099; e.pabengali = 2474; e.pacute = 7765; e.padeva = 2346; e.pagedown = 8671; e.pageup = 8670; e.pagujarati = 2730; e.pagurmukhi = 2602; e.pahiragana = 12401; e.paiyannoithai = 3631; e.pakatakana = 12497; e.palatalizationcyrilliccmb = 1156; e.palochkacyrillic = 1216; e.pansioskorean = 12671; e.paragraph = 182; e.parallel = 8741; e.parenleft = 40; e.parenleftaltonearabic = 64830; e.parenleftbt = 63725; e.parenleftex = 63724; e.parenleftinferior = 8333; e.parenleftmonospace = 65288; e.parenleftsmall = 65113; e.parenleftsuperior = 8317; e.parenlefttp = 63723; e.parenleftvertical = 65077; e.parenright = 41; e.parenrightaltonearabic = 64831; e.parenrightbt = 63736; e.parenrightex = 63735; e.parenrightinferior = 8334; e.parenrightmonospace = 65289; e.parenrightsmall = 65114; e.parenrightsuperior = 8318; e.parenrighttp = 63734; e.parenrightvertical = 65078; e.partialdiff = 8706; e.paseqhebrew = 1472; e.pashtahebrew = 1433; e.pasquare = 13225; e.patah = 1463; e.patah11 = 1463; e.patah1d = 1463; e.patah2a = 1463; e.patahhebrew = 1463; e.patahnarrowhebrew = 1463; e.patahquarterhebrew = 1463; e.patahwidehebrew = 1463; e.pazerhebrew = 1441; e.pbopomofo = 12550; e.pcircle = 9439; e.pdotaccent = 7767; e.pe = 1508; e.pecyrillic = 1087; e.pedagesh = 64324; e.pedageshhebrew = 64324; e.peezisquare = 13115; e.pefinaldageshhebrew = 64323; e.peharabic = 1662; e.peharmenian = 1402; e.pehebrew = 1508; e.pehfinalarabic = 64343; e.pehinitialarabic = 64344; e.pehiragana = 12410; e.pehmedialarabic = 64345; e.pekatakana = 12506; e.pemiddlehookcyrillic = 1191; e.perafehebrew = 64334; e.percent = 37; e.percentarabic = 1642; e.percentmonospace = 65285; e.percentsmall = 65130; e.period = 46; e.periodarmenian = 1417; e.periodcentered = 183; e.periodhalfwidth = 65377; e.periodinferior = 63207; e.periodmonospace = 65294; e.periodsmall = 65106; e.periodsuperior = 63208; e.perispomenigreekcmb = 834; e.perpendicular = 8869; e.perthousand = 8240; e.peseta = 8359; e.pfsquare = 13194; e.phabengali = 2475; e.phadeva = 2347; e.phagujarati = 2731; e.phagurmukhi = 2603; e.phi = 966; e.phi1 = 981; e.phieuphacirclekorean = 12922; e.phieuphaparenkorean = 12826; e.phieuphcirclekorean = 12908; e.phieuphkorean = 12621; e.phieuphparenkorean = 12812; e.philatin = 632; e.phinthuthai = 3642; e.phisymbolgreek = 981; e.phook = 421; e.phophanthai = 3614; e.phophungthai = 3612; e.phosamphaothai = 3616; e.pi = 960; e.pieupacirclekorean = 12915; e.pieupaparenkorean = 12819; e.pieupcieuckorean = 12662; e.pieupcirclekorean = 12901; e.pieupkiyeokkorean = 12658; e.pieupkorean = 12610; e.pieupparenkorean = 12805; e.pieupsioskiyeokkorean = 12660; e.pieupsioskorean = 12612; e.pieupsiostikeutkorean = 12661; e.pieupthieuthkorean = 12663; e.pieuptikeutkorean = 12659; e.pihiragana = 12404; e.pikatakana = 12500; e.pisymbolgreek = 982; e.piwrarmenian = 1411; e.plus = 43; e.plusbelowcmb = 799; e.pluscircle = 8853; e.plusminus = 177; e.plusmod = 726; e.plusmonospace = 65291; e.plussmall = 65122; e.plussuperior = 8314; e.pmonospace = 65360; e.pmsquare = 13272; e.pohiragana = 12413; e.pointingindexdownwhite = 9759; e.pointingindexleftwhite = 9756; e.pointingindexrightwhite = 9758; e.pointingindexupwhite = 9757; e.pokatakana = 12509; e.poplathai = 3611; e.postalmark = 12306; e.postalmarkface = 12320; e.pparen = 9387; e.precedes = 8826; e.prescription = 8478; e.primemod = 697; e.primereversed = 8245; e.product = 8719; e.projective = 8965; e.prolongedkana = 12540; e.propellor = 8984; e.propersubset = 8834; e.propersuperset = 8835; e.proportion = 8759; e.proportional = 8733; e.psi = 968; e.psicyrillic = 1137; e.psilipneumatacyrilliccmb = 1158; e.pssquare = 13232; e.puhiragana = 12407; e.pukatakana = 12503; e.pvsquare = 13236; e.pwsquare = 13242; e.q = 113; e.qadeva = 2392; e.qadmahebrew = 1448; e.qafarabic = 1602; e.qaffinalarabic = 65238; e.qafinitialarabic = 65239; e.qafmedialarabic = 65240; e.qamats = 1464; e.qamats10 = 1464; e.qamats1a = 1464; e.qamats1c = 1464; e.qamats27 = 1464; e.qamats29 = 1464; e.qamats33 = 1464; e.qamatsde = 1464; e.qamatshebrew = 1464; e.qamatsnarrowhebrew = 1464; e.qamatsqatanhebrew = 1464; e.qamatsqatannarrowhebrew = 1464; e.qamatsqatanquarterhebrew = 1464; e.qamatsqatanwidehebrew = 1464; e.qamatsquarterhebrew = 1464; e.qamatswidehebrew = 1464; e.qarneyparahebrew = 1439; e.qbopomofo = 12561; e.qcircle = 9440; e.qhook = 672; e.qmonospace = 65361; e.qof = 1511; e.qofdagesh = 64327; e.qofdageshhebrew = 64327; e.qofhebrew = 1511; e.qparen = 9388; e.quarternote = 9833; e.qubuts = 1467; e.qubuts18 = 1467; e.qubuts25 = 1467; e.qubuts31 = 1467; e.qubutshebrew = 1467; e.qubutsnarrowhebrew = 1467; e.qubutsquarterhebrew = 1467; e.qubutswidehebrew = 1467; e.question = 63; e.questionarabic = 1567; e.questionarmenian = 1374; e.questiondown = 191; e.questiondownsmall = 63423; e.questiongreek = 894; e.questionmonospace = 65311; e.questionsmall = 63295; e.quotedbl = 34; e.quotedblbase = 8222; e.quotedblleft = 8220; e.quotedblmonospace = 65282; e.quotedblprime = 12318; e.quotedblprimereversed = 12317; e.quotedblright = 8221; e.quoteleft = 8216; e.quoteleftreversed = 8219; e.quotereversed = 8219; e.quoteright = 8217; e.quoterightn = 329; e.quotesinglbase = 8218; e.quotesingle = 39; e.quotesinglemonospace = 65287; e.r = 114; e.raarmenian = 1404; e.rabengali = 2480; e.racute = 341; e.radeva = 2352; e.radical = 8730; e.radicalex = 63717; e.radoverssquare = 13230; e.radoverssquaredsquare = 13231; e.radsquare = 13229; e.rafe = 1471; e.rafehebrew = 1471; e.ragujarati = 2736; e.ragurmukhi = 2608; e.rahiragana = 12425; e.rakatakana = 12521; e.rakatakanahalfwidth = 65431; e.ralowerdiagonalbengali = 2545; e.ramiddlediagonalbengali = 2544; e.ramshorn = 612; e.ratio = 8758; e.rbopomofo = 12566; e.rcaron = 345; e.rcedilla = 343; e.rcircle = 9441; e.rcommaaccent = 343; e.rdblgrave = 529; e.rdotaccent = 7769; e.rdotbelow = 7771; e.rdotbelowmacron = 7773; e.referencemark = 8251; e.reflexsubset = 8838; e.reflexsuperset = 8839; e.registered = 174; e.registersans = 63720; e.registerserif = 63194; e.reharabic = 1585; e.reharmenian = 1408; e.rehfinalarabic = 65198; e.rehiragana = 12428; e.rekatakana = 12524; e.rekatakanahalfwidth = 65434; e.resh = 1512; e.reshdageshhebrew = 64328; e.reshhebrew = 1512; e.reversedtilde = 8765; e.reviahebrew = 1431; e.reviamugrashhebrew = 1431; e.revlogicalnot = 8976; e.rfishhook = 638; e.rfishhookreversed = 639; e.rhabengali = 2525; e.rhadeva = 2397; e.rho = 961; e.rhook = 637; e.rhookturned = 635; e.rhookturnedsuperior = 693; e.rhosymbolgreek = 1009; e.rhotichookmod = 734; e.rieulacirclekorean = 12913; e.rieulaparenkorean = 12817; e.rieulcirclekorean = 12899; e.rieulhieuhkorean = 12608; e.rieulkiyeokkorean = 12602; e.rieulkiyeoksioskorean = 12649; e.rieulkorean = 12601; e.rieulmieumkorean = 12603; e.rieulpansioskorean = 12652; e.rieulparenkorean = 12803; e.rieulphieuphkorean = 12607; e.rieulpieupkorean = 12604; e.rieulpieupsioskorean = 12651; e.rieulsioskorean = 12605; e.rieulthieuthkorean = 12606; e.rieultikeutkorean = 12650; e.rieulyeorinhieuhkorean = 12653; e.rightangle = 8735; e.righttackbelowcmb = 793; e.righttriangle = 8895; e.rihiragana = 12426; e.rikatakana = 12522; e.rikatakanahalfwidth = 65432; e.ring = 730; e.ringbelowcmb = 805; e.ringcmb = 778; e.ringhalfleft = 703; e.ringhalfleftarmenian = 1369; e.ringhalfleftbelowcmb = 796; e.ringhalfleftcentered = 723; e.ringhalfright = 702; e.ringhalfrightbelowcmb = 825; e.ringhalfrightcentered = 722; e.rinvertedbreve = 531; e.rittorusquare = 13137; e.rlinebelow = 7775; e.rlongleg = 636; e.rlonglegturned = 634; e.rmonospace = 65362; e.rohiragana = 12429; e.rokatakana = 12525; e.rokatakanahalfwidth = 65435; e.roruathai = 3619; e.rparen = 9389; e.rrabengali = 2524; e.rradeva = 2353; e.rragurmukhi = 2652; e.rreharabic = 1681; e.rrehfinalarabic = 64397; e.rrvocalicbengali = 2528; e.rrvocalicdeva = 2400; e.rrvocalicgujarati = 2784; e.rrvocalicvowelsignbengali = 2500; e.rrvocalicvowelsigndeva = 2372; e.rrvocalicvowelsigngujarati = 2756; e.rsuperior = 63217; e.rtblock = 9616; e.rturned = 633; e.rturnedsuperior = 692; e.ruhiragana = 12427; e.rukatakana = 12523; e.rukatakanahalfwidth = 65433; e.rupeemarkbengali = 2546; e.rupeesignbengali = 2547; e.rupiah = 63197; e.ruthai = 3620; e.rvocalicbengali = 2443; e.rvocalicdeva = 2315; e.rvocalicgujarati = 2699; e.rvocalicvowelsignbengali = 2499; e.rvocalicvowelsigndeva = 2371; e.rvocalicvowelsigngujarati = 2755; e.s = 115; e.sabengali = 2488; e.sacute = 347; e.sacutedotaccent = 7781; e.sadarabic = 1589; e.sadeva = 2360; e.sadfinalarabic = 65210; e.sadinitialarabic = 65211; e.sadmedialarabic = 65212; e.sagujarati = 2744; e.sagurmukhi = 2616; e.sahiragana = 12373; e.sakatakana = 12469; e.sakatakanahalfwidth = 65403; e.sallallahoualayhewasallamarabic = 65018; e.samekh = 1505; e.samekhdagesh = 64321; e.samekhdageshhebrew = 64321; e.samekhhebrew = 1505; e.saraaathai = 3634; e.saraaethai = 3649; e.saraaimaimalaithai = 3652; e.saraaimaimuanthai = 3651; e.saraamthai = 3635; e.saraathai = 3632; e.saraethai = 3648; e.saraiileftthai = 63622; e.saraiithai = 3637; e.saraileftthai = 63621; e.saraithai = 3636; e.saraothai = 3650; e.saraueeleftthai = 63624; e.saraueethai = 3639; e.saraueleftthai = 63623; e.sarauethai = 3638; e.sarauthai = 3640; e.sarauuthai = 3641; e.sbopomofo = 12569; e.scaron = 353; e.scarondotaccent = 7783; e.scedilla = 351; e.schwa = 601; e.schwacyrillic = 1241; e.schwadieresiscyrillic = 1243; e.schwahook = 602; e.scircle = 9442; e.scircumflex = 349; e.scommaaccent = 537; e.sdotaccent = 7777; e.sdotbelow = 7779; e.sdotbelowdotaccent = 7785; e.seagullbelowcmb = 828; e.second = 8243; e.secondtonechinese = 714; e.section = 167; e.seenarabic = 1587; e.seenfinalarabic = 65202; e.seeninitialarabic = 65203; e.seenmedialarabic = 65204; e.segol = 1462; e.segol13 = 1462; e.segol1f = 1462; e.segol2c = 1462; e.segolhebrew = 1462; e.segolnarrowhebrew = 1462; e.segolquarterhebrew = 1462; e.segoltahebrew = 1426; e.segolwidehebrew = 1462; e.seharmenian = 1405; e.sehiragana = 12379; e.sekatakana = 12475; e.sekatakanahalfwidth = 65406; e.semicolon = 59; e.semicolonarabic = 1563; e.semicolonmonospace = 65307; e.semicolonsmall = 65108; e.semivoicedmarkkana = 12444; e.semivoicedmarkkanahalfwidth = 65439; e.sentisquare = 13090; e.sentosquare = 13091; e.seven = 55; e.sevenarabic = 1639; e.sevenbengali = 2541; e.sevencircle = 9318; e.sevencircleinversesansserif = 10128; e.sevendeva = 2413; e.seveneighths = 8542; e.sevengujarati = 2797; e.sevengurmukhi = 2669; e.sevenhackarabic = 1639; e.sevenhangzhou = 12327; e.sevenideographicparen = 12838; e.seveninferior = 8327; e.sevenmonospace = 65303; e.sevenoldstyle = 63287; e.sevenparen = 9338; e.sevenperiod = 9358; e.sevenpersian = 1783; e.sevenroman = 8566; e.sevensuperior = 8311; e.seventeencircle = 9328; e.seventeenparen = 9348; e.seventeenperiod = 9368; e.seventhai = 3671; e.sfthyphen = 173; e.shaarmenian = 1399; e.shabengali = 2486; e.shacyrillic = 1096; e.shaddaarabic = 1617; e.shaddadammaarabic = 64609; e.shaddadammatanarabic = 64606; e.shaddafathaarabic = 64608; e.shaddakasraarabic = 64610; e.shaddakasratanarabic = 64607; e.shade = 9618; e.shadedark = 9619; e.shadelight = 9617; e.shademedium = 9618; e.shadeva = 2358; e.shagujarati = 2742; e.shagurmukhi = 2614; e.shalshelethebrew = 1427; e.shbopomofo = 12565; e.shchacyrillic = 1097; e.sheenarabic = 1588; e.sheenfinalarabic = 65206; e.sheeninitialarabic = 65207; e.sheenmedialarabic = 65208; e.sheicoptic = 995; e.sheqel = 8362; e.sheqelhebrew = 8362; e.sheva = 1456; e.sheva115 = 1456; e.sheva15 = 1456; e.sheva22 = 1456; e.sheva2e = 1456; e.shevahebrew = 1456; e.shevanarrowhebrew = 1456; e.shevaquarterhebrew = 1456; e.shevawidehebrew = 1456; e.shhacyrillic = 1211; e.shimacoptic = 1005; e.shin = 1513; e.shindagesh = 64329; e.shindageshhebrew = 64329; e.shindageshshindot = 64300; e.shindageshshindothebrew = 64300; e.shindageshsindot = 64301; e.shindageshsindothebrew = 64301; e.shindothebrew = 1473; e.shinhebrew = 1513; e.shinshindot = 64298; e.shinshindothebrew = 64298; e.shinsindot = 64299; e.shinsindothebrew = 64299; e.shook = 642; e.sigma = 963; e.sigma1 = 962; e.sigmafinal = 962; e.sigmalunatesymbolgreek = 1010; e.sihiragana = 12375; e.sikatakana = 12471; e.sikatakanahalfwidth = 65404; e.siluqhebrew = 1469; e.siluqlefthebrew = 1469; e.similar = 8764; e.sindothebrew = 1474; e.siosacirclekorean = 12916; e.siosaparenkorean = 12820; e.sioscieuckorean = 12670; e.sioscirclekorean = 12902; e.sioskiyeokkorean = 12666; e.sioskorean = 12613; e.siosnieunkorean = 12667; e.siosparenkorean = 12806; e.siospieupkorean = 12669; e.siostikeutkorean = 12668; e.six = 54; e.sixarabic = 1638; e.sixbengali = 2540; e.sixcircle = 9317; e.sixcircleinversesansserif = 10127; e.sixdeva = 2412; e.sixgujarati = 2796; e.sixgurmukhi = 2668; e.sixhackarabic = 1638; e.sixhangzhou = 12326; e.sixideographicparen = 12837; e.sixinferior = 8326; e.sixmonospace = 65302; e.sixoldstyle = 63286; e.sixparen = 9337; e.sixperiod = 9357; e.sixpersian = 1782; e.sixroman = 8565; e.sixsuperior = 8310; e.sixteencircle = 9327; e.sixteencurrencydenominatorbengali = 2553; e.sixteenparen = 9347; e.sixteenperiod = 9367; e.sixthai = 3670; e.slash = 47; e.slashmonospace = 65295; e.slong = 383; e.slongdotaccent = 7835; e.smileface = 9786; e.smonospace = 65363; e.sofpasuqhebrew = 1475; e.softhyphen = 173; e.softsigncyrillic = 1100; e.sohiragana = 12381; e.sokatakana = 12477; e.sokatakanahalfwidth = 65407; e.soliduslongoverlaycmb = 824; e.solidusshortoverlaycmb = 823; e.sorusithai = 3625; e.sosalathai = 3624; e.sosothai = 3595; e.sosuathai = 3626; e.space = 32; e.spacehackarabic = 32; e.spade = 9824; e.spadesuitblack = 9824; e.spadesuitwhite = 9828; e.sparen = 9390; e.squarebelowcmb = 827; e.squarecc = 13252; e.squarecm = 13213; e.squarediagonalcrosshatchfill = 9641; e.squarehorizontalfill = 9636; e.squarekg = 13199; e.squarekm = 13214; e.squarekmcapital = 13262; e.squareln = 13265; e.squarelog = 13266; e.squaremg = 13198; e.squaremil = 13269; e.squaremm = 13212; e.squaremsquared = 13217; e.squareorthogonalcrosshatchfill = 9638; e.squareupperlefttolowerrightfill = 9639; e.squareupperrighttolowerleftfill = 9640; e.squareverticalfill = 9637; e.squarewhitewithsmallblack = 9635; e.srsquare = 13275; e.ssabengali = 2487; e.ssadeva = 2359; e.ssagujarati = 2743; e.ssangcieuckorean = 12617; e.ssanghieuhkorean = 12677; e.ssangieungkorean = 12672; e.ssangkiyeokkorean = 12594; e.ssangnieunkorean = 12645; e.ssangpieupkorean = 12611; e.ssangsioskorean = 12614; e.ssangtikeutkorean = 12600; e.ssuperior = 63218; e.sterling = 163; e.sterlingmonospace = 65505; e.strokelongoverlaycmb = 822; e.strokeshortoverlaycmb = 821; e.subset = 8834; e.subsetnotequal = 8842; e.subsetorequal = 8838; e.succeeds = 8827; e.suchthat = 8715; e.suhiragana = 12377; e.sukatakana = 12473; e.sukatakanahalfwidth = 65405; e.sukunarabic = 1618; e.summation = 8721; e.sun = 9788; e.superset = 8835; e.supersetnotequal = 8843; e.supersetorequal = 8839; e.svsquare = 13276; e.syouwaerasquare = 13180; e.t = 116; e.tabengali = 2468; e.tackdown = 8868; e.tackleft = 8867; e.tadeva = 2340; e.tagujarati = 2724; e.tagurmukhi = 2596; e.taharabic = 1591; e.tahfinalarabic = 65218; e.tahinitialarabic = 65219; e.tahiragana = 12383; e.tahmedialarabic = 65220; e.taisyouerasquare = 13181; e.takatakana = 12479; e.takatakanahalfwidth = 65408; e.tatweelarabic = 1600; e.tau = 964; e.tav = 1514; e.tavdages = 64330; e.tavdagesh = 64330; e.tavdageshhebrew = 64330; e.tavhebrew = 1514; e.tbar = 359; e.tbopomofo = 12554; e.tcaron = 357; e.tccurl = 680; e.tcedilla = 355; e.tcheharabic = 1670; e.tchehfinalarabic = 64379; e.tchehinitialarabic = 64380; e.tchehmedialarabic = 64381; e.tcircle = 9443; e.tcircumflexbelow = 7793; e.tcommaaccent = 355; e.tdieresis = 7831; e.tdotaccent = 7787; e.tdotbelow = 7789; e.tecyrillic = 1090; e.tedescendercyrillic = 1197; e.teharabic = 1578; e.tehfinalarabic = 65174; e.tehhahinitialarabic = 64674; e.tehhahisolatedarabic = 64524; e.tehinitialarabic = 65175; e.tehiragana = 12390; e.tehjeeminitialarabic = 64673; e.tehjeemisolatedarabic = 64523; e.tehmarbutaarabic = 1577; e.tehmarbutafinalarabic = 65172; e.tehmedialarabic = 65176; e.tehmeeminitialarabic = 64676; e.tehmeemisolatedarabic = 64526; e.tehnoonfinalarabic = 64627; e.tekatakana = 12486; e.tekatakanahalfwidth = 65411; e.telephone = 8481; e.telephoneblack = 9742; e.telishagedolahebrew = 1440; e.telishaqetanahebrew = 1449; e.tencircle = 9321; e.tenideographicparen = 12841; e.tenparen = 9341; e.tenperiod = 9361; e.tenroman = 8569; e.tesh = 679; e.tet = 1496; e.tetdagesh = 64312; e.tetdageshhebrew = 64312; e.tethebrew = 1496; e.tetsecyrillic = 1205; e.tevirhebrew = 1435; e.tevirlefthebrew = 1435; e.thabengali = 2469; e.thadeva = 2341; e.thagujarati = 2725; e.thagurmukhi = 2597; e.thalarabic = 1584; e.thalfinalarabic = 65196; e.thanthakhatlowleftthai = 63640; e.thanthakhatlowrightthai = 63639; e.thanthakhatthai = 3660; e.thanthakhatupperleftthai = 63638; e.theharabic = 1579; e.thehfinalarabic = 65178; e.thehinitialarabic = 65179; e.thehmedialarabic = 65180; e.thereexists = 8707; e.therefore = 8756; e.theta = 952; e.theta1 = 977; e.thetasymbolgreek = 977; e.thieuthacirclekorean = 12921; e.thieuthaparenkorean = 12825; e.thieuthcirclekorean = 12907; e.thieuthkorean = 12620; e.thieuthparenkorean = 12811; e.thirteencircle = 9324; e.thirteenparen = 9344; e.thirteenperiod = 9364; e.thonangmonthothai = 3601; e.thook = 429; e.thophuthaothai = 3602; e.thorn = 254; e.thothahanthai = 3607; e.thothanthai = 3600; e.thothongthai = 3608; e.thothungthai = 3606; e.thousandcyrillic = 1154; e.thousandsseparatorarabic = 1644; e.thousandsseparatorpersian = 1644; e.three = 51; e.threearabic = 1635; e.threebengali = 2537; e.threecircle = 9314; e.threecircleinversesansserif = 10124; e.threedeva = 2409; e.threeeighths = 8540; e.threegujarati = 2793; e.threegurmukhi = 2665; e.threehackarabic = 1635; e.threehangzhou = 12323; e.threeideographicparen = 12834; e.threeinferior = 8323; e.threemonospace = 65299; e.threenumeratorbengali = 2550; e.threeoldstyle = 63283; e.threeparen = 9334; e.threeperiod = 9354; e.threepersian = 1779; e.threequarters = 190; e.threequartersemdash = 63198; e.threeroman = 8562; e.threesuperior = 179; e.threethai = 3667; e.thzsquare = 13204; e.tihiragana = 12385; e.tikatakana = 12481; e.tikatakanahalfwidth = 65409; e.tikeutacirclekorean = 12912; e.tikeutaparenkorean = 12816; e.tikeutcirclekorean = 12898; e.tikeutkorean = 12599; e.tikeutparenkorean = 12802; e.tilde = 732; e.tildebelowcmb = 816; e.tildecmb = 771; e.tildecomb = 771; e.tildedoublecmb = 864; e.tildeoperator = 8764; e.tildeoverlaycmb = 820; e.tildeverticalcmb = 830; e.timescircle = 8855; e.tipehahebrew = 1430; e.tipehalefthebrew = 1430; e.tippigurmukhi = 2672; e.titlocyrilliccmb = 1155; e.tiwnarmenian = 1407; e.tlinebelow = 7791; e.tmonospace = 65364; e.toarmenian = 1385; e.tohiragana = 12392; e.tokatakana = 12488; e.tokatakanahalfwidth = 65412; e.tonebarextrahighmod = 741; e.tonebarextralowmod = 745; e.tonebarhighmod = 742; e.tonebarlowmod = 744; e.tonebarmidmod = 743; e.tonefive = 445; e.tonesix = 389; e.tonetwo = 424; e.tonos = 900; e.tonsquare = 13095; e.topatakthai = 3599; e.tortoiseshellbracketleft = 12308; e.tortoiseshellbracketleftsmall = 65117; e.tortoiseshellbracketleftvertical = 65081; e.tortoiseshellbracketright = 12309; e.tortoiseshellbracketrightsmall = 65118; e.tortoiseshellbracketrightvertical = 65082; e.totaothai = 3605; e.tpalatalhook = 427; e.tparen = 9391; e.trademark = 8482; e.trademarksans = 63722; e.trademarkserif = 63195; e.tretroflexhook = 648; e.triagdn = 9660; e.triaglf = 9668; e.triagrt = 9658; e.triagup = 9650; e.ts = 678; e.tsadi = 1510; e.tsadidagesh = 64326; e.tsadidageshhebrew = 64326; e.tsadihebrew = 1510; e.tsecyrillic = 1094; e.tsere = 1461; e.tsere12 = 1461; e.tsere1e = 1461; e.tsere2b = 1461; e.tserehebrew = 1461; e.tserenarrowhebrew = 1461; e.tserequarterhebrew = 1461; e.tserewidehebrew = 1461; e.tshecyrillic = 1115; e.tsuperior = 63219; e.ttabengali = 2463; e.ttadeva = 2335; e.ttagujarati = 2719; e.ttagurmukhi = 2591; e.tteharabic = 1657; e.ttehfinalarabic = 64359; e.ttehinitialarabic = 64360; e.ttehmedialarabic = 64361; e.tthabengali = 2464; e.tthadeva = 2336; e.tthagujarati = 2720; e.tthagurmukhi = 2592; e.tturned = 647; e.tuhiragana = 12388; e.tukatakana = 12484; e.tukatakanahalfwidth = 65410; e.tusmallhiragana = 12387; e.tusmallkatakana = 12483; e.tusmallkatakanahalfwidth = 65391; e.twelvecircle = 9323; e.twelveparen = 9343; e.twelveperiod = 9363; e.twelveroman = 8571; e.twentycircle = 9331; e.twentyhangzhou = 21316; e.twentyparen = 9351; e.twentyperiod = 9371; e.two = 50; e.twoarabic = 1634; e.twobengali = 2536; e.twocircle = 9313; e.twocircleinversesansserif = 10123; e.twodeva = 2408; e.twodotenleader = 8229; e.twodotleader = 8229; e.twodotleadervertical = 65072; e.twogujarati = 2792; e.twogurmukhi = 2664; e.twohackarabic = 1634; e.twohangzhou = 12322; e.twoideographicparen = 12833; e.twoinferior = 8322; e.twomonospace = 65298; e.twonumeratorbengali = 2549; e.twooldstyle = 63282; e.twoparen = 9333; e.twoperiod = 9353; e.twopersian = 1778; e.tworoman = 8561; e.twostroke = 443; e.twosuperior = 178; e.twothai = 3666; e.twothirds = 8532; e.u = 117; e.uacute = 250; e.ubar = 649; e.ubengali = 2441; e.ubopomofo = 12584; e.ubreve = 365; e.ucaron = 468; e.ucircle = 9444; e.ucircumflex = 251; e.ucircumflexbelow = 7799; e.ucyrillic = 1091; e.udattadeva = 2385; e.udblacute = 369; e.udblgrave = 533; e.udeva = 2313; e.udieresis = 252; e.udieresisacute = 472; e.udieresisbelow = 7795; e.udieresiscaron = 474; e.udieresiscyrillic = 1265; e.udieresisgrave = 476; e.udieresismacron = 470; e.udotbelow = 7909; e.ugrave = 249; e.ugujarati = 2697; e.ugurmukhi = 2569; e.uhiragana = 12358; e.uhookabove = 7911; e.uhorn = 432; e.uhornacute = 7913; e.uhorndotbelow = 7921; e.uhorngrave = 7915; e.uhornhookabove = 7917; e.uhorntilde = 7919; e.uhungarumlaut = 369; e.uhungarumlautcyrillic = 1267; e.uinvertedbreve = 535; e.ukatakana = 12454; e.ukatakanahalfwidth = 65395; e.ukcyrillic = 1145; e.ukorean = 12636; e.umacron = 363; e.umacroncyrillic = 1263; e.umacrondieresis = 7803; e.umatragurmukhi = 2625; e.umonospace = 65365; e.underscore = 95; e.underscoredbl = 8215; e.underscoremonospace = 65343; e.underscorevertical = 65075; e.underscorewavy = 65103; e.union = 8746; e.universal = 8704; e.uogonek = 371; e.uparen = 9392; e.upblock = 9600; e.upperdothebrew = 1476; e.upsilon = 965; e.upsilondieresis = 971; e.upsilondieresistonos = 944; e.upsilonlatin = 650; e.upsilontonos = 973; e.uptackbelowcmb = 797; e.uptackmod = 724; e.uragurmukhi = 2675; e.uring = 367; e.ushortcyrillic = 1118; e.usmallhiragana = 12357; e.usmallkatakana = 12453; e.usmallkatakanahalfwidth = 65385; e.ustraightcyrillic = 1199; e.ustraightstrokecyrillic = 1201; e.utilde = 361; e.utildeacute = 7801; e.utildebelow = 7797; e.uubengali = 2442; e.uudeva = 2314; e.uugujarati = 2698; e.uugurmukhi = 2570; e.uumatragurmukhi = 2626; e.uuvowelsignbengali = 2498; e.uuvowelsigndeva = 2370; e.uuvowelsigngujarati = 2754; e.uvowelsignbengali = 2497; e.uvowelsigndeva = 2369; e.uvowelsigngujarati = 2753; e.v = 118; e.vadeva = 2357; e.vagujarati = 2741; e.vagurmukhi = 2613; e.vakatakana = 12535; e.vav = 1493; e.vavdagesh = 64309; e.vavdagesh65 = 64309; e.vavdageshhebrew = 64309; e.vavhebrew = 1493; e.vavholam = 64331; e.vavholamhebrew = 64331; e.vavvavhebrew = 1520; e.vavyodhebrew = 1521; e.vcircle = 9445; e.vdotbelow = 7807; e.vecyrillic = 1074; e.veharabic = 1700; e.vehfinalarabic = 64363; e.vehinitialarabic = 64364; e.vehmedialarabic = 64365; e.vekatakana = 12537; e.venus = 9792; e.verticalbar = 124; e.verticallineabovecmb = 781; e.verticallinebelowcmb = 809; e.verticallinelowmod = 716; e.verticallinemod = 712; e.vewarmenian = 1406; e.vhook = 651; e.vikatakana = 12536; e.viramabengali = 2509; e.viramadeva = 2381; e.viramagujarati = 2765; e.visargabengali = 2435; e.visargadeva = 2307; e.visargagujarati = 2691; e.vmonospace = 65366; e.voarmenian = 1400; e.voicediterationhiragana = 12446; e.voicediterationkatakana = 12542; e.voicedmarkkana = 12443; e.voicedmarkkanahalfwidth = 65438; e.vokatakana = 12538; e.vparen = 9393; e.vtilde = 7805; e.vturned = 652; e.vuhiragana = 12436; e.vukatakana = 12532; e.w = 119; e.wacute = 7811; e.waekorean = 12633; e.wahiragana = 12431; e.wakatakana = 12527; e.wakatakanahalfwidth = 65436; e.wakorean = 12632; e.wasmallhiragana = 12430; e.wasmallkatakana = 12526; e.wattosquare = 13143; e.wavedash = 12316; e.wavyunderscorevertical = 65076; e.wawarabic = 1608; e.wawfinalarabic = 65262; e.wawhamzaabovearabic = 1572; e.wawhamzaabovefinalarabic = 65158; e.wbsquare = 13277; e.wcircle = 9446; e.wcircumflex = 373; e.wdieresis = 7813; e.wdotaccent = 7815; e.wdotbelow = 7817; e.wehiragana = 12433; e.weierstrass = 8472; e.wekatakana = 12529; e.wekorean = 12638; e.weokorean = 12637; e.wgrave = 7809; e.whitebullet = 9702; e.whitecircle = 9675; e.whitecircleinverse = 9689; e.whitecornerbracketleft = 12302; e.whitecornerbracketleftvertical = 65091; e.whitecornerbracketright = 12303; e.whitecornerbracketrightvertical = 65092; e.whitediamond = 9671; e.whitediamondcontainingblacksmalldiamond = 9672; e.whitedownpointingsmalltriangle = 9663; e.whitedownpointingtriangle = 9661; e.whiteleftpointingsmalltriangle = 9667; e.whiteleftpointingtriangle = 9665; e.whitelenticularbracketleft = 12310; e.whitelenticularbracketright = 12311; e.whiterightpointingsmalltriangle = 9657; e.whiterightpointingtriangle = 9655; e.whitesmallsquare = 9643; e.whitesmilingface = 9786; e.whitesquare = 9633; e.whitestar = 9734; e.whitetelephone = 9743; e.whitetortoiseshellbracketleft = 12312; e.whitetortoiseshellbracketright = 12313; e.whiteuppointingsmalltriangle = 9653; e.whiteuppointingtriangle = 9651; e.wihiragana = 12432; e.wikatakana = 12528; e.wikorean = 12639; e.wmonospace = 65367; e.wohiragana = 12434; e.wokatakana = 12530; e.wokatakanahalfwidth = 65382; e.won = 8361; e.wonmonospace = 65510; e.wowaenthai = 3623; e.wparen = 9394; e.wring = 7832; e.wsuperior = 695; e.wturned = 653; e.wynn = 447; e.x = 120; e.xabovecmb = 829; e.xbopomofo = 12562; e.xcircle = 9447; e.xdieresis = 7821; e.xdotaccent = 7819; e.xeharmenian = 1389; e.xi = 958; e.xmonospace = 65368; e.xparen = 9395; e.xsuperior = 739; e.y = 121; e.yaadosquare = 13134; e.yabengali = 2479; e.yacute = 253; e.yadeva = 2351; e.yaekorean = 12626; e.yagujarati = 2735; e.yagurmukhi = 2607; e.yahiragana = 12420; e.yakatakana = 12516; e.yakatakanahalfwidth = 65428; e.yakorean = 12625; e.yamakkanthai = 3662; e.yasmallhiragana = 12419; e.yasmallkatakana = 12515; e.yasmallkatakanahalfwidth = 65388; e.yatcyrillic = 1123; e.ycircle = 9448; e.ycircumflex = 375; e.ydieresis = 255; e.ydotaccent = 7823; e.ydotbelow = 7925; e.yeharabic = 1610; e.yehbarreearabic = 1746; e.yehbarreefinalarabic = 64431; e.yehfinalarabic = 65266; e.yehhamzaabovearabic = 1574; e.yehhamzaabovefinalarabic = 65162; e.yehhamzaaboveinitialarabic = 65163; e.yehhamzaabovemedialarabic = 65164; e.yehinitialarabic = 65267; e.yehmedialarabic = 65268; e.yehmeeminitialarabic = 64733; e.yehmeemisolatedarabic = 64600; e.yehnoonfinalarabic = 64660; e.yehthreedotsbelowarabic = 1745; e.yekorean = 12630; e.yen = 165; e.yenmonospace = 65509; e.yeokorean = 12629; e.yeorinhieuhkorean = 12678; e.yerahbenyomohebrew = 1450; e.yerahbenyomolefthebrew = 1450; e.yericyrillic = 1099; e.yerudieresiscyrillic = 1273; e.yesieungkorean = 12673; e.yesieungpansioskorean = 12675; e.yesieungsioskorean = 12674; e.yetivhebrew = 1434; e.ygrave = 7923; e.yhook = 436; e.yhookabove = 7927; e.yiarmenian = 1397; e.yicyrillic = 1111; e.yikorean = 12642; e.yinyang = 9775; e.yiwnarmenian = 1410; e.ymonospace = 65369; e.yod = 1497; e.yoddagesh = 64313; e.yoddageshhebrew = 64313; e.yodhebrew = 1497; e.yodyodhebrew = 1522; e.yodyodpatahhebrew = 64287; e.yohiragana = 12424; e.yoikorean = 12681; e.yokatakana = 12520; e.yokatakanahalfwidth = 65430; e.yokorean = 12635; e.yosmallhiragana = 12423; e.yosmallkatakana = 12519; e.yosmallkatakanahalfwidth = 65390; e.yotgreek = 1011; e.yoyaekorean = 12680; e.yoyakorean = 12679; e.yoyakthai = 3618; e.yoyingthai = 3597; e.yparen = 9396; e.ypogegrammeni = 890; e.ypogegrammenigreekcmb = 837; e.yr = 422; e.yring = 7833; e.ysuperior = 696; e.ytilde = 7929; e.yturned = 654; e.yuhiragana = 12422; e.yuikorean = 12684; e.yukatakana = 12518; e.yukatakanahalfwidth = 65429; e.yukorean = 12640; e.yusbigcyrillic = 1131; e.yusbigiotifiedcyrillic = 1133; e.yuslittlecyrillic = 1127; e.yuslittleiotifiedcyrillic = 1129; e.yusmallhiragana = 12421; e.yusmallkatakana = 12517; e.yusmallkatakanahalfwidth = 65389; e.yuyekorean = 12683; e.yuyeokorean = 12682; e.yyabengali = 2527; e.yyadeva = 2399; e.z = 122; e.zaarmenian = 1382; e.zacute = 378; e.zadeva = 2395; e.zagurmukhi = 2651; e.zaharabic = 1592; e.zahfinalarabic = 65222; e.zahinitialarabic = 65223; e.zahiragana = 12374; e.zahmedialarabic = 65224; e.zainarabic = 1586; e.zainfinalarabic = 65200; e.zakatakana = 12470; e.zaqefgadolhebrew = 1429; e.zaqefqatanhebrew = 1428; e.zarqahebrew = 1432; e.zayin = 1494; e.zayindagesh = 64310; e.zayindageshhebrew = 64310; e.zayinhebrew = 1494; e.zbopomofo = 12567; e.zcaron = 382; e.zcircle = 9449; e.zcircumflex = 7825; e.zcurl = 657; e.zdot = 380; e.zdotaccent = 380; e.zdotbelow = 7827; e.zecyrillic = 1079; e.zedescendercyrillic = 1177; e.zedieresiscyrillic = 1247; e.zehiragana = 12380; e.zekatakana = 12476; e.zero = 48; e.zeroarabic = 1632; e.zerobengali = 2534; e.zerodeva = 2406; e.zerogujarati = 2790; e.zerogurmukhi = 2662; e.zerohackarabic = 1632; e.zeroinferior = 8320; e.zeromonospace = 65296; e.zerooldstyle = 63280; e.zeropersian = 1776; e.zerosuperior = 8304; e.zerothai = 3664; e.zerowidthjoiner = 65279; e.zerowidthnonjoiner = 8204; e.zerowidthspace = 8203; e.zeta = 950; e.zhbopomofo = 12563; e.zhearmenian = 1386; e.zhebrevecyrillic = 1218; e.zhecyrillic = 1078; e.zhedescendercyrillic = 1175; e.zhedieresiscyrillic = 1245; e.zihiragana = 12376; e.zikatakana = 12472; e.zinorhebrew = 1454; e.zlinebelow = 7829; e.zmonospace = 65370; e.zohiragana = 12382; e.zokatakana = 12478; e.zparen = 9397; e.zretroflexhook = 656; e.zstroke = 438; e.zuhiragana = 12378; e.zukatakana = 12474; e[".notdef"] = 0; e.angbracketleftbig = 9001; e.angbracketleftBig = 9001; e.angbracketleftbigg = 9001; e.angbracketleftBigg = 9001; e.angbracketrightBig = 9002; e.angbracketrightbig = 9002; e.angbracketrightBigg = 9002; e.angbracketrightbigg = 9002; e.arrowhookleft = 8618; e.arrowhookright = 8617; e.arrowlefttophalf = 8636; e.arrowleftbothalf = 8637; e.arrownortheast = 8599; e.arrownorthwest = 8598; e.arrowrighttophalf = 8640; e.arrowrightbothalf = 8641; e.arrowsoutheast = 8600; e.arrowsouthwest = 8601; e.backslashbig = 8726; e.backslashBig = 8726; e.backslashBigg = 8726; e.backslashbigg = 8726; e.bardbl = 8214; e.bracehtipdownleft = 65079; e.bracehtipdownright = 65079; e.bracehtipupleft = 65080; e.bracehtipupright = 65080; e.braceleftBig = 123; e.braceleftbig = 123; e.braceleftbigg = 123; e.braceleftBigg = 123; e.bracerightBig = 125; e.bracerightbig = 125; e.bracerightbigg = 125; e.bracerightBigg = 125; e.bracketleftbig = 91; e.bracketleftBig = 91; e.bracketleftbigg = 91; e.bracketleftBigg = 91; e.bracketrightBig = 93; e.bracketrightbig = 93; e.bracketrightbigg = 93; e.bracketrightBigg = 93; e.ceilingleftbig = 8968; e.ceilingleftBig = 8968; e.ceilingleftBigg = 8968; e.ceilingleftbigg = 8968; e.ceilingrightbig = 8969; e.ceilingrightBig = 8969; e.ceilingrightbigg = 8969; e.ceilingrightBigg = 8969; e.circledotdisplay = 8857; e.circledottext = 8857; e.circlemultiplydisplay = 8855; e.circlemultiplytext = 8855; e.circleplusdisplay = 8853; e.circleplustext = 8853; e.contintegraldisplay = 8750; e.contintegraltext = 8750; e.coproductdisplay = 8720; e.coproducttext = 8720; e.floorleftBig = 8970; e.floorleftbig = 8970; e.floorleftbigg = 8970; e.floorleftBigg = 8970; e.floorrightbig = 8971; e.floorrightBig = 8971; e.floorrightBigg = 8971; e.floorrightbigg = 8971; e.hatwide = 770; e.hatwider = 770; e.hatwidest = 770; e.intercal = 7488; e.integraldisplay = 8747; e.integraltext = 8747; e.intersectiondisplay = 8898; e.intersectiontext = 8898; e.logicalanddisplay = 8743; e.logicalandtext = 8743; e.logicalordisplay = 8744; e.logicalortext = 8744; e.parenleftBig = 40; e.parenleftbig = 40; e.parenleftBigg = 40; e.parenleftbigg = 40; e.parenrightBig = 41; e.parenrightbig = 41; e.parenrightBigg = 41; e.parenrightbigg = 41; e.prime = 8242; e.productdisplay = 8719; e.producttext = 8719; e.radicalbig = 8730; e.radicalBig = 8730; e.radicalBigg = 8730; e.radicalbigg = 8730; e.radicalbt = 8730; e.radicaltp = 8730; e.radicalvertex = 8730; e.slashbig = 47; e.slashBig = 47; e.slashBigg = 47; e.slashbigg = 47; e.summationdisplay = 8721; e.summationtext = 8721; e.tildewide = 732; e.tildewider = 732; e.tildewidest = 732; e.uniondisplay = 8899; e.unionmultidisplay = 8846; e.unionmultitext = 8846; e.unionsqdisplay = 8852; e.unionsqtext = 8852; e.uniontext = 8899; e.vextenddouble = 8741; e.vextendsingle = 8739 })), n = r((function (e) { e.space = 32; e.a1 = 9985; e.a2 = 9986; e.a202 = 9987; e.a3 = 9988; e.a4 = 9742; e.a5 = 9990; e.a119 = 9991; e.a118 = 9992; e.a117 = 9993; e.a11 = 9755; e.a12 = 9758; e.a13 = 9996; e.a14 = 9997; e.a15 = 9998; e.a16 = 9999; e.a105 = 1e4; e.a17 = 10001; e.a18 = 10002; e.a19 = 10003; e.a20 = 10004; e.a21 = 10005; e.a22 = 10006; e.a23 = 10007; e.a24 = 10008; e.a25 = 10009; e.a26 = 10010; e.a27 = 10011; e.a28 = 10012; e.a6 = 10013; e.a7 = 10014; e.a8 = 10015; e.a9 = 10016; e.a10 = 10017; e.a29 = 10018; e.a30 = 10019; e.a31 = 10020; e.a32 = 10021; e.a33 = 10022; e.a34 = 10023; e.a35 = 9733; e.a36 = 10025; e.a37 = 10026; e.a38 = 10027; e.a39 = 10028; e.a40 = 10029; e.a41 = 10030; e.a42 = 10031; e.a43 = 10032; e.a44 = 10033; e.a45 = 10034; e.a46 = 10035; e.a47 = 10036; e.a48 = 10037; e.a49 = 10038; e.a50 = 10039; e.a51 = 10040; e.a52 = 10041; e.a53 = 10042; e.a54 = 10043; e.a55 = 10044; e.a56 = 10045; e.a57 = 10046; e.a58 = 10047; e.a59 = 10048; e.a60 = 10049; e.a61 = 10050; e.a62 = 10051; e.a63 = 10052; e.a64 = 10053; e.a65 = 10054; e.a66 = 10055; e.a67 = 10056; e.a68 = 10057; e.a69 = 10058; e.a70 = 10059; e.a71 = 9679; e.a72 = 10061; e.a73 = 9632; e.a74 = 10063; e.a203 = 10064; e.a75 = 10065; e.a204 = 10066; e.a76 = 9650; e.a77 = 9660; e.a78 = 9670; e.a79 = 10070; e.a81 = 9687; e.a82 = 10072; e.a83 = 10073; e.a84 = 10074; e.a97 = 10075; e.a98 = 10076; e.a99 = 10077; e.a100 = 10078; e.a101 = 10081; e.a102 = 10082; e.a103 = 10083; e.a104 = 10084; e.a106 = 10085; e.a107 = 10086; e.a108 = 10087; e.a112 = 9827; e.a111 = 9830; e.a110 = 9829; e.a109 = 9824; e.a120 = 9312; e.a121 = 9313; e.a122 = 9314; e.a123 = 9315; e.a124 = 9316; e.a125 = 9317; e.a126 = 9318; e.a127 = 9319; e.a128 = 9320; e.a129 = 9321; e.a130 = 10102; e.a131 = 10103; e.a132 = 10104; e.a133 = 10105; e.a134 = 10106; e.a135 = 10107; e.a136 = 10108; e.a137 = 10109; e.a138 = 10110; e.a139 = 10111; e.a140 = 10112; e.a141 = 10113; e.a142 = 10114; e.a143 = 10115; e.a144 = 10116; e.a145 = 10117; e.a146 = 10118; e.a147 = 10119; e.a148 = 10120; e.a149 = 10121; e.a150 = 10122; e.a151 = 10123; e.a152 = 10124; e.a153 = 10125; e.a154 = 10126; e.a155 = 10127; e.a156 = 10128; e.a157 = 10129; e.a158 = 10130; e.a159 = 10131; e.a160 = 10132; e.a161 = 8594; e.a163 = 8596; e.a164 = 8597; e.a196 = 10136; e.a165 = 10137; e.a192 = 10138; e.a166 = 10139; e.a167 = 10140; e.a168 = 10141; e.a169 = 10142; e.a170 = 10143; e.a171 = 10144; e.a172 = 10145; e.a173 = 10146; e.a162 = 10147; e.a174 = 10148; e.a175 = 10149; e.a176 = 10150; e.a177 = 10151; e.a178 = 10152; e.a179 = 10153; e.a193 = 10154; e.a180 = 10155; e.a199 = 10156; e.a181 = 10157; e.a200 = 10158; e.a182 = 10159; e.a201 = 10161; e.a183 = 10162; e.a184 = 10163; e.a197 = 10164; e.a185 = 10165; e.a194 = 10166; e.a198 = 10167; e.a186 = 10168; e.a195 = 10169; e.a187 = 10170; e.a188 = 10171; e.a189 = 10172; e.a190 = 10173; e.a191 = 10174; e.a89 = 10088; e.a90 = 10089; e.a93 = 10090; e.a94 = 10091; e.a91 = 10092; e.a92 = 10093; e.a205 = 10094; e.a85 = 10095; e.a206 = 10096; e.a86 = 10097; e.a87 = 10098; e.a88 = 10099; e.a95 = 10100; e.a96 = 10101; e[".notdef"] = 0 })); t.getGlyphsUnicode = i; t.getDingbatsGlyphsUnicode = n }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.getSupplementalGlyphMapForCalibri = t.getSupplementalGlyphMapForArialBlack = t.getGlyphMapForStandardFonts = t.getSymbolsFonts = t.getSerifFonts = t.getNonStdFontMap = t.getStdFontMap = void 0; var r = a(7); const i = (0, r.getLookupTableFactory)((function (e) { e.ArialNarrow = "Helvetica"; e["ArialNarrow-Bold"] = "Helvetica-Bold"; e["ArialNarrow-BoldItalic"] = "Helvetica-BoldOblique"; e["ArialNarrow-Italic"] = "Helvetica-Oblique"; e.ArialBlack = "Helvetica"; e["ArialBlack-Bold"] = "Helvetica-Bold"; e["ArialBlack-BoldItalic"] = "Helvetica-BoldOblique"; e["ArialBlack-Italic"] = "Helvetica-Oblique"; e["Arial-Black"] = "Helvetica"; e["Arial-Black-Bold"] = "Helvetica-Bold"; e["Arial-Black-BoldItalic"] = "Helvetica-BoldOblique"; e["Arial-Black-Italic"] = "Helvetica-Oblique"; e.Arial = "Helvetica"; e["Arial-Bold"] = "Helvetica-Bold"; e["Arial-BoldItalic"] = "Helvetica-BoldOblique"; e["Arial-Italic"] = "Helvetica-Oblique"; e["Arial-BoldItalicMT"] = "Helvetica-BoldOblique"; e["Arial-BoldMT"] = "Helvetica-Bold"; e["Arial-ItalicMT"] = "Helvetica-Oblique"; e.ArialMT = "Helvetica"; e["Courier-Bold"] = "Courier-Bold"; e["Courier-BoldItalic"] = "Courier-BoldOblique"; e["Courier-Italic"] = "Courier-Oblique"; e.CourierNew = "Courier"; e["CourierNew-Bold"] = "Courier-Bold"; e["CourierNew-BoldItalic"] = "Courier-BoldOblique"; e["CourierNew-Italic"] = "Courier-Oblique"; e["CourierNewPS-BoldItalicMT"] = "Courier-BoldOblique"; e["CourierNewPS-BoldMT"] = "Courier-Bold"; e["CourierNewPS-ItalicMT"] = "Courier-Oblique"; e.CourierNewPSMT = "Courier"; e.Helvetica = "Helvetica"; e["Helvetica-Bold"] = "Helvetica-Bold"; e["Helvetica-BoldItalic"] = "Helvetica-BoldOblique"; e["Helvetica-BoldOblique"] = "Helvetica-BoldOblique"; e["Helvetica-Italic"] = "Helvetica-Oblique"; e["Helvetica-Oblique"] = "Helvetica-Oblique"; e["Symbol-Bold"] = "Symbol"; e["Symbol-BoldItalic"] = "Symbol"; e["Symbol-Italic"] = "Symbol"; e.TimesNewRoman = "Times-Roman"; e["TimesNewRoman-Bold"] = "Times-Bold"; e["TimesNewRoman-BoldItalic"] = "Times-BoldItalic"; e["TimesNewRoman-Italic"] = "Times-Italic"; e.TimesNewRomanPS = "Times-Roman"; e["TimesNewRomanPS-Bold"] = "Times-Bold"; e["TimesNewRomanPS-BoldItalic"] = "Times-BoldItalic"; e["TimesNewRomanPS-BoldItalicMT"] = "Times-BoldItalic"; e["TimesNewRomanPS-BoldMT"] = "Times-Bold"; e["TimesNewRomanPS-Italic"] = "Times-Italic"; e["TimesNewRomanPS-ItalicMT"] = "Times-Italic"; e.TimesNewRomanPSMT = "Times-Roman"; e["TimesNewRomanPSMT-Bold"] = "Times-Bold"; e["TimesNewRomanPSMT-BoldItalic"] = "Times-BoldItalic"; e["TimesNewRomanPSMT-Italic"] = "Times-Italic" })); t.getStdFontMap = i; const n = (0, r.getLookupTableFactory)((function (e) { e.Calibri = "Helvetica"; e["Calibri-Bold"] = "Helvetica-Bold"; e["Calibri-BoldItalic"] = "Helvetica-BoldOblique"; e["Calibri-Italic"] = "Helvetica-Oblique"; e.CenturyGothic = "Helvetica"; e["CenturyGothic-Bold"] = "Helvetica-Bold"; e["CenturyGothic-BoldItalic"] = "Helvetica-BoldOblique"; e["CenturyGothic-Italic"] = "Helvetica-Oblique"; e.ComicSansMS = "Comic Sans MS"; e["ComicSansMS-Bold"] = "Comic Sans MS-Bold"; e["ComicSansMS-BoldItalic"] = "Comic Sans MS-BoldItalic"; e["ComicSansMS-Italic"] = "Comic Sans MS-Italic"; e.LucidaConsole = "Courier"; e["LucidaConsole-Bold"] = "Courier-Bold"; e["LucidaConsole-BoldItalic"] = "Courier-BoldOblique"; e["LucidaConsole-Italic"] = "Courier-Oblique"; e["LucidaSans-Demi"] = "Helvetica-Bold"; e["MS-Gothic"] = "MS Gothic"; e["MS-Gothic-Bold"] = "MS Gothic-Bold"; e["MS-Gothic-BoldItalic"] = "MS Gothic-BoldItalic"; e["MS-Gothic-Italic"] = "MS Gothic-Italic"; e["MS-Mincho"] = "MS Mincho"; e["MS-Mincho-Bold"] = "MS Mincho-Bold"; e["MS-Mincho-BoldItalic"] = "MS Mincho-BoldItalic"; e["MS-Mincho-Italic"] = "MS Mincho-Italic"; e["MS-PGothic"] = "MS PGothic"; e["MS-PGothic-Bold"] = "MS PGothic-Bold"; e["MS-PGothic-BoldItalic"] = "MS PGothic-BoldItalic"; e["MS-PGothic-Italic"] = "MS PGothic-Italic"; e["MS-PMincho"] = "MS PMincho"; e["MS-PMincho-Bold"] = "MS PMincho-Bold"; e["MS-PMincho-BoldItalic"] = "MS PMincho-BoldItalic"; e["MS-PMincho-Italic"] = "MS PMincho-Italic"; e.NuptialScript = "Times-Italic"; e.SegoeUISymbol = "Helvetica"; e.Wingdings = "ZapfDingbats"; e["Wingdings-Regular"] = "ZapfDingbats" })); t.getNonStdFontMap = n; const s = (0, r.getLookupTableFactory)((function (e) { e["Adobe Jenson"] = !0; e["Adobe Text"] = !0; e.Albertus = !0; e.Aldus = !0; e.Alexandria = !0; e.Algerian = !0; e["American Typewriter"] = !0; e.Antiqua = !0; e.Apex = !0; e.Arno = !0; e.Aster = !0; e.Aurora = !0; e.Baskerville = !0; e.Bell = !0; e.Bembo = !0; e["Bembo Schoolbook"] = !0; e.Benguiat = !0; e["Berkeley Old Style"] = !0; e["Bernhard Modern"] = !0; e["Berthold City"] = !0; e.Bodoni = !0; e["Bauer Bodoni"] = !0; e["Book Antiqua"] = !0; e.Bookman = !0; e["Bordeaux Roman"] = !0; e["Californian FB"] = !0; e.Calisto = !0; e.Calvert = !0; e.Capitals = !0; e.Cambria = !0; e.Cartier = !0; e.Caslon = !0; e.Catull = !0; e.Centaur = !0; e["Century Old Style"] = !0; e["Century Schoolbook"] = !0; e.Chaparral = !0; e["Charis SIL"] = !0; e.Cheltenham = !0; e["Cholla Slab"] = !0; e.Clarendon = !0; e.Clearface = !0; e.Cochin = !0; e.Colonna = !0; e["Computer Modern"] = !0; e["Concrete Roman"] = !0; e.Constantia = !0; e["Cooper Black"] = !0; e.Corona = !0; e.Ecotype = !0; e.Egyptienne = !0; e.Elephant = !0; e.Excelsior = !0; e.Fairfield = !0; e["FF Scala"] = !0; e.Folkard = !0; e.Footlight = !0; e.FreeSerif = !0; e["Friz Quadrata"] = !0; e.Garamond = !0; e.Gentium = !0; e.Georgia = !0; e.Gloucester = !0; e["Goudy Old Style"] = !0; e["Goudy Schoolbook"] = !0; e["Goudy Pro Font"] = !0; e.Granjon = !0; e["Guardian Egyptian"] = !0; e.Heather = !0; e.Hercules = !0; e["High Tower Text"] = !0; e.Hiroshige = !0; e["Hoefler Text"] = !0; e["Humana Serif"] = !0; e.Imprint = !0; e["Ionic No. 5"] = !0; e.Janson = !0; e.Joanna = !0; e.Korinna = !0; e.Lexicon = !0; e["Liberation Serif"] = !0; e["Linux Libertine"] = !0; e.Literaturnaya = !0; e.Lucida = !0; e["Lucida Bright"] = !0; e.Melior = !0; e.Memphis = !0; e.Miller = !0; e.Minion = !0; e.Modern = !0; e["Mona Lisa"] = !0; e["Mrs Eaves"] = !0; e["MS Serif"] = !0; e["Museo Slab"] = !0; e["New York"] = !0; e["Nimbus Roman"] = !0; e["NPS Rawlinson Roadway"] = !0; e.NuptialScript = !0; e.Palatino = !0; e.Perpetua = !0; e.Plantin = !0; e["Plantin Schoolbook"] = !0; e.Playbill = !0; e["Poor Richard"] = !0; e["Rawlinson Roadway"] = !0; e.Renault = !0; e.Requiem = !0; e.Rockwell = !0; e.Roman = !0; e["Rotis Serif"] = !0; e.Sabon = !0; e.Scala = !0; e.Seagull = !0; e.Sistina = !0; e.Souvenir = !0; e.STIX = !0; e["Stone Informal"] = !0; e["Stone Serif"] = !0; e.Sylfaen = !0; e.Times = !0; e.Trajan = !0; e["Trinité"] = !0; e["Trump Mediaeval"] = !0; e.Utopia = !0; e["Vale Type"] = !0; e["Bitstream Vera"] = !0; e["Vera Serif"] = !0; e.Versailles = !0; e.Wanted = !0; e.Weiss = !0; e["Wide Latin"] = !0; e.Windsor = !0; e.XITS = !0 })); t.getSerifFonts = s; const o = (0, r.getLookupTableFactory)((function (e) { e.Dingbats = !0; e.Symbol = !0; e.ZapfDingbats = !0 })); t.getSymbolsFonts = o; const c = (0, r.getLookupTableFactory)((function (e) { e[2] = 10; e[3] = 32; e[4] = 33; e[5] = 34; e[6] = 35; e[7] = 36; e[8] = 37; e[9] = 38; e[10] = 39; e[11] = 40; e[12] = 41; e[13] = 42; e[14] = 43; e[15] = 44; e[16] = 45; e[17] = 46; e[18] = 47; e[19] = 48; e[20] = 49; e[21] = 50; e[22] = 51; e[23] = 52; e[24] = 53; e[25] = 54; e[26] = 55; e[27] = 56; e[28] = 57; e[29] = 58; e[30] = 894; e[31] = 60; e[32] = 61; e[33] = 62; e[34] = 63; e[35] = 64; e[36] = 65; e[37] = 66; e[38] = 67; e[39] = 68; e[40] = 69; e[41] = 70; e[42] = 71; e[43] = 72; e[44] = 73; e[45] = 74; e[46] = 75; e[47] = 76; e[48] = 77; e[49] = 78; e[50] = 79; e[51] = 80; e[52] = 81; e[53] = 82; e[54] = 83; e[55] = 84; e[56] = 85; e[57] = 86; e[58] = 87; e[59] = 88; e[60] = 89; e[61] = 90; e[62] = 91; e[63] = 92; e[64] = 93; e[65] = 94; e[66] = 95; e[67] = 96; e[68] = 97; e[69] = 98; e[70] = 99; e[71] = 100; e[72] = 101; e[73] = 102; e[74] = 103; e[75] = 104; e[76] = 105; e[77] = 106; e[78] = 107; e[79] = 108; e[80] = 109; e[81] = 110; e[82] = 111; e[83] = 112; e[84] = 113; e[85] = 114; e[86] = 115; e[87] = 116; e[88] = 117; e[89] = 118; e[90] = 119; e[91] = 120; e[92] = 121; e[93] = 122; e[94] = 123; e[95] = 124; e[96] = 125; e[97] = 126; e[98] = 196; e[99] = 197; e[100] = 199; e[101] = 201; e[102] = 209; e[103] = 214; e[104] = 220; e[105] = 225; e[106] = 224; e[107] = 226; e[108] = 228; e[109] = 227; e[110] = 229; e[111] = 231; e[112] = 233; e[113] = 232; e[114] = 234; e[115] = 235; e[116] = 237; e[117] = 236; e[118] = 238; e[119] = 239; e[120] = 241; e[121] = 243; e[122] = 242; e[123] = 244; e[124] = 246; e[125] = 245; e[126] = 250; e[127] = 249; e[128] = 251; e[129] = 252; e[130] = 8224; e[131] = 176; e[132] = 162; e[133] = 163; e[134] = 167; e[135] = 8226; e[136] = 182; e[137] = 223; e[138] = 174; e[139] = 169; e[140] = 8482; e[141] = 180; e[142] = 168; e[143] = 8800; e[144] = 198; e[145] = 216; e[146] = 8734; e[147] = 177; e[148] = 8804; e[149] = 8805; e[150] = 165; e[151] = 181; e[152] = 8706; e[153] = 8721; e[154] = 8719; e[156] = 8747; e[157] = 170; e[158] = 186; e[159] = 8486; e[160] = 230; e[161] = 248; e[162] = 191; e[163] = 161; e[164] = 172; e[165] = 8730; e[166] = 402; e[167] = 8776; e[168] = 8710; e[169] = 171; e[170] = 187; e[171] = 8230; e[210] = 218; e[223] = 711; e[224] = 321; e[225] = 322; e[227] = 353; e[229] = 382; e[234] = 253; e[252] = 263; e[253] = 268; e[254] = 269; e[258] = 258; e[260] = 260; e[261] = 261; e[265] = 280; e[266] = 281; e[268] = 283; e[269] = 313; e[275] = 323; e[276] = 324; e[278] = 328; e[284] = 345; e[285] = 346; e[286] = 347; e[292] = 367; e[295] = 377; e[296] = 378; e[298] = 380; e[305] = 963; e[306] = 964; e[307] = 966; e[308] = 8215; e[309] = 8252; e[310] = 8319; e[311] = 8359; e[312] = 8592; e[313] = 8593; e[337] = 9552; e[493] = 1039; e[494] = 1040; e[705] = 1524; e[706] = 8362; e[710] = 64288; e[711] = 64298; e[759] = 1617; e[761] = 1776; e[763] = 1778; e[775] = 1652; e[777] = 1764; e[778] = 1780; e[779] = 1781; e[780] = 1782; e[782] = 771; e[783] = 64726; e[786] = 8363; e[788] = 8532; e[790] = 768; e[791] = 769; e[792] = 768; e[795] = 803; e[797] = 64336; e[798] = 64337; e[799] = 64342; e[800] = 64343; e[801] = 64344; e[802] = 64345; e[803] = 64362; e[804] = 64363; e[805] = 64364; e[2424] = 7821; e[2425] = 7822; e[2426] = 7823; e[2427] = 7824; e[2428] = 7825; e[2429] = 7826; e[2430] = 7827; e[2433] = 7682; e[2678] = 8045; e[2679] = 8046; e[2830] = 1552; e[2838] = 686; e[2840] = 751; e[2842] = 753; e[2843] = 754; e[2844] = 755; e[2846] = 757; e[2856] = 767; e[2857] = 848; e[2858] = 849; e[2862] = 853; e[2863] = 854; e[2864] = 855; e[2865] = 861; e[2866] = 862; e[2906] = 7460; e[2908] = 7462; e[2909] = 7463; e[2910] = 7464; e[2912] = 7466; e[2913] = 7467; e[2914] = 7468; e[2916] = 7470; e[2917] = 7471; e[2918] = 7472; e[2920] = 7474; e[2921] = 7475; e[2922] = 7476; e[2924] = 7478; e[2925] = 7479; e[2926] = 7480; e[2928] = 7482; e[2929] = 7483; e[2930] = 7484; e[2932] = 7486; e[2933] = 7487; e[2934] = 7488; e[2936] = 7490; e[2937] = 7491; e[2938] = 7492; e[2940] = 7494; e[2941] = 7495; e[2942] = 7496; e[2944] = 7498; e[2946] = 7500; e[2948] = 7502; e[2950] = 7504; e[2951] = 7505; e[2952] = 7506; e[2954] = 7508; e[2955] = 7509; e[2956] = 7510; e[2958] = 7512; e[2959] = 7513; e[2960] = 7514; e[2962] = 7516; e[2963] = 7517; e[2964] = 7518; e[2966] = 7520; e[2967] = 7521; e[2968] = 7522; e[2970] = 7524; e[2971] = 7525; e[2972] = 7526; e[2974] = 7528; e[2975] = 7529; e[2976] = 7530; e[2978] = 1537; e[2979] = 1538; e[2980] = 1539; e[2982] = 1549; e[2983] = 1551; e[2984] = 1552; e[2986] = 1554; e[2987] = 1555; e[2988] = 1556; e[2990] = 1623; e[2991] = 1624; e[2995] = 1775; e[2999] = 1791; e[3002] = 64290; e[3003] = 64291; e[3004] = 64292; e[3006] = 64294; e[3007] = 64295; e[3008] = 64296; e[3011] = 1900; e[3014] = 8223; e[3015] = 8244; e[3017] = 7532; e[3018] = 7533; e[3019] = 7534; e[3075] = 7590; e[3076] = 7591; e[3079] = 7594; e[3080] = 7595; e[3083] = 7598; e[3084] = 7599; e[3087] = 7602; e[3088] = 7603; e[3091] = 7606; e[3092] = 7607; e[3095] = 7610; e[3096] = 7611; e[3099] = 7614; e[3100] = 7615; e[3103] = 7618; e[3104] = 7619; e[3107] = 8337; e[3108] = 8338; e[3116] = 1884; e[3119] = 1885; e[3120] = 1885; e[3123] = 1886; e[3124] = 1886; e[3127] = 1887; e[3128] = 1887; e[3131] = 1888; e[3132] = 1888; e[3135] = 1889; e[3136] = 1889; e[3139] = 1890; e[3140] = 1890; e[3143] = 1891; e[3144] = 1891; e[3147] = 1892; e[3148] = 1892; e[3153] = 580; e[3154] = 581; e[3157] = 584; e[3158] = 585; e[3161] = 588; e[3162] = 589; e[3165] = 891; e[3166] = 892; e[3169] = 1274; e[3170] = 1275; e[3173] = 1278; e[3174] = 1279; e[3181] = 7622; e[3182] = 7623; e[3282] = 11799; e[3316] = 578; e[3379] = 42785; e[3393] = 1159; e[3416] = 8377 })); t.getGlyphMapForStandardFonts = c; const l = (0, r.getLookupTableFactory)((function (e) { e[227] = 322; e[264] = 261; e[291] = 346 })); t.getSupplementalGlyphMapForArialBlack = l; const h = (0, r.getLookupTableFactory)((function (e) { e[1] = 32; e[4] = 65; e[17] = 66; e[18] = 67; e[24] = 68; e[28] = 69; e[38] = 70; e[39] = 71; e[44] = 72; e[47] = 73; e[58] = 74; e[60] = 75; e[62] = 76; e[68] = 77; e[69] = 78; e[75] = 79; e[87] = 80; e[89] = 81; e[90] = 82; e[94] = 83; e[100] = 84; e[104] = 85; e[115] = 86; e[116] = 87; e[121] = 88; e[122] = 89; e[127] = 90; e[258] = 97; e[268] = 261; e[271] = 98; e[272] = 99; e[273] = 263; e[282] = 100; e[286] = 101; e[295] = 281; e[296] = 102; e[336] = 103; e[346] = 104; e[349] = 105; e[361] = 106; e[364] = 107; e[367] = 108; e[371] = 322; e[373] = 109; e[374] = 110; e[381] = 111; e[383] = 243; e[393] = 112; e[395] = 113; e[396] = 114; e[400] = 115; e[401] = 347; e[410] = 116; e[437] = 117; e[448] = 118; e[449] = 119; e[454] = 120; e[455] = 121; e[460] = 122; e[463] = 380; e[853] = 44; e[855] = 58; e[856] = 46; e[876] = 47; e[878] = 45; e[882] = 45; e[894] = 40; e[895] = 41; e[896] = 91; e[897] = 93; e[923] = 64; e[1004] = 48; e[1005] = 49; e[1006] = 50; e[1007] = 51; e[1008] = 52; e[1009] = 53; e[1010] = 54; e[1011] = 55; e[1012] = 56; e[1013] = 57; e[1081] = 37; e[1085] = 43; e[1086] = 45 })); t.getSupplementalGlyphMapForCalibri = h }, function (e, t, a) { var r = a(7).getLookupTableFactory, i = r((function (e) { e[63721] = 169; e[63193] = 169; e[63720] = 174; e[63194] = 174; e[63722] = 8482; e[63195] = 8482; e[63729] = 9127; e[63730] = 9128; e[63731] = 9129; e[63740] = 9131; e[63741] = 9132; e[63742] = 9133; e[63726] = 9121; e[63727] = 9122; e[63728] = 9123; e[63737] = 9124; e[63738] = 9125; e[63739] = 9126; e[63723] = 9115; e[63724] = 9116; e[63725] = 9117; e[63734] = 9118; e[63735] = 9119; e[63736] = 9120 })); var n = [{ begin: 0, end: 127 }, { begin: 128, end: 255 }, { begin: 256, end: 383 }, { begin: 384, end: 591 }, { begin: 592, end: 687 }, { begin: 688, end: 767 }, { begin: 768, end: 879 }, { begin: 880, end: 1023 }, { begin: 11392, end: 11519 }, { begin: 1024, end: 1279 }, { begin: 1328, end: 1423 }, { begin: 1424, end: 1535 }, { begin: 42240, end: 42559 }, { begin: 1536, end: 1791 }, { begin: 1984, end: 2047 }, { begin: 2304, end: 2431 }, { begin: 2432, end: 2559 }, { begin: 2560, end: 2687 }, { begin: 2688, end: 2815 }, { begin: 2816, end: 2943 }, { begin: 2944, end: 3071 }, { begin: 3072, end: 3199 }, { begin: 3200, end: 3327 }, { begin: 3328, end: 3455 }, { begin: 3584, end: 3711 }, { begin: 3712, end: 3839 }, { begin: 4256, end: 4351 }, { begin: 6912, end: 7039 }, { begin: 4352, end: 4607 }, { begin: 7680, end: 7935 }, { begin: 7936, end: 8191 }, { begin: 8192, end: 8303 }, { begin: 8304, end: 8351 }, { begin: 8352, end: 8399 }, { begin: 8400, end: 8447 }, { begin: 8448, end: 8527 }, { begin: 8528, end: 8591 }, { begin: 8592, end: 8703 }, { begin: 8704, end: 8959 }, { begin: 8960, end: 9215 }, { begin: 9216, end: 9279 }, { begin: 9280, end: 9311 }, { begin: 9312, end: 9471 }, { begin: 9472, end: 9599 }, { begin: 9600, end: 9631 }, { begin: 9632, end: 9727 }, { begin: 9728, end: 9983 }, { begin: 9984, end: 10175 }, { begin: 12288, end: 12351 }, { begin: 12352, end: 12447 }, { begin: 12448, end: 12543 }, { begin: 12544, end: 12591 }, { begin: 12592, end: 12687 }, { begin: 43072, end: 43135 }, { begin: 12800, end: 13055 }, { begin: 13056, end: 13311 }, { begin: 44032, end: 55215 }, { begin: 55296, end: 57343 }, { begin: 67840, end: 67871 }, { begin: 19968, end: 40959 }, { begin: 57344, end: 63743 }, { begin: 12736, end: 12783 }, { begin: 64256, end: 64335 }, { begin: 64336, end: 65023 }, { begin: 65056, end: 65071 }, { begin: 65040, end: 65055 }, { begin: 65104, end: 65135 }, { begin: 65136, end: 65279 }, { begin: 65280, end: 65519 }, { begin: 65520, end: 65535 }, { begin: 3840, end: 4095 }, { begin: 1792, end: 1871 }, { begin: 1920, end: 1983 }, { begin: 3456, end: 3583 }, { begin: 4096, end: 4255 }, { begin: 4608, end: 4991 }, { begin: 5024, end: 5119 }, { begin: 5120, end: 5759 }, { begin: 5760, end: 5791 }, { begin: 5792, end: 5887 }, { begin: 6016, end: 6143 }, { begin: 6144, end: 6319 }, { begin: 10240, end: 10495 }, { begin: 40960, end: 42127 }, { begin: 5888, end: 5919 }, { begin: 66304, end: 66351 }, { begin: 66352, end: 66383 }, { begin: 66560, end: 66639 }, { begin: 118784, end: 119039 }, { begin: 119808, end: 120831 }, { begin: 1044480, end: 1048573 }, { begin: 65024, end: 65039 }, { begin: 917504, end: 917631 }, { begin: 6400, end: 6479 }, { begin: 6480, end: 6527 }, { begin: 6528, end: 6623 }, { begin: 6656, end: 6687 }, { begin: 11264, end: 11359 }, { begin: 11568, end: 11647 }, { begin: 19904, end: 19967 }, { begin: 43008, end: 43055 }, { begin: 65536, end: 65663 }, { begin: 65856, end: 65935 }, { begin: 66432, end: 66463 }, { begin: 66464, end: 66527 }, { begin: 66640, end: 66687 }, { begin: 66688, end: 66735 }, { begin: 67584, end: 67647 }, { begin: 68096, end: 68191 }, { begin: 119552, end: 119647 }, { begin: 73728, end: 74751 }, { begin: 119648, end: 119679 }, { begin: 7040, end: 7103 }, { begin: 7168, end: 7247 }, { begin: 7248, end: 7295 }, { begin: 43136, end: 43231 }, { begin: 43264, end: 43311 }, { begin: 43312, end: 43359 }, { begin: 43520, end: 43615 }, { begin: 65936, end: 65999 }, { begin: 66e3, end: 66047 }, { begin: 66208, end: 66271 }, { begin: 127024, end: 127135 }]; var s = r((function (e) { e["¨"] = " ̈"; e["¯"] = " ̄"; e["´"] = " ́"; e["µ"] = "μ"; e["¸"] = " ̧"; e["IJ"] = "IJ"; e["ij"] = "ij"; e["Ŀ"] = "L·"; e["ŀ"] = "l·"; e["ʼn"] = "ʼn"; e["ſ"] = "s"; e["DŽ"] = "DŽ"; e["Dž"] = "Dž"; e["dž"] = "dž"; e["LJ"] = "LJ"; e["Lj"] = "Lj"; e["lj"] = "lj"; e["NJ"] = "NJ"; e["Nj"] = "Nj"; e["nj"] = "nj"; e["DZ"] = "DZ"; e["Dz"] = "Dz"; e["dz"] = "dz"; e["˘"] = " ̆"; e["˙"] = " ̇"; e["˚"] = " ̊"; e["˛"] = " ̨"; e["˜"] = " ̃"; e["˝"] = " ̋"; e["ͺ"] = " ͅ"; e["΄"] = " ́"; e["ϐ"] = "β"; e["ϑ"] = "θ"; e["ϒ"] = "Υ"; e["ϕ"] = "φ"; e["ϖ"] = "π"; e["ϰ"] = "κ"; e["ϱ"] = "ρ"; e["ϲ"] = "ς"; e["ϴ"] = "Θ"; e["ϵ"] = "ε"; e["Ϲ"] = "Σ"; e["և"] = "եւ"; e["ٵ"] = "اٴ"; e["ٶ"] = "وٴ"; e["ٷ"] = "ۇٴ"; e["ٸ"] = "يٴ"; e["ำ"] = "ํา"; e["ຳ"] = "ໍາ"; e["ໜ"] = "ຫນ"; e["ໝ"] = "ຫມ"; e["ཷ"] = "ྲཱྀ"; e["ཹ"] = "ླཱྀ"; e["ẚ"] = "aʾ"; e["᾽"] = " ̓"; e["᾿"] = " ̓"; e["῀"] = " ͂"; e["῾"] = " ̔"; e[" "] = " "; e[" "] = " "; e[" "] = " "; e[" "] = " "; e[" "] = " "; e[" "] = " "; e[" "] = " "; e[" "] = " "; e["‗"] = " ̳"; e["․"] = "."; e["‥"] = ".."; e["…"] = "..."; e["″"] = "′′"; e["‴"] = "′′′"; e["‶"] = "‵‵"; e["‷"] = "‵‵‵"; e["‼"] = "!!"; e["‾"] = " ̅"; e["⁇"] = "??"; e["⁈"] = "?!"; e["⁉"] = "!?"; e["⁗"] = "′′′′"; e[" "] = " "; e["₨"] = "Rs"; e["℀"] = "a/c"; e["℁"] = "a/s"; e["℃"] = "°C"; e["℅"] = "c/o"; e["℆"] = "c/u"; e["ℇ"] = "Ɛ"; e["℉"] = "°F"; e["№"] = "No"; e["℡"] = "TEL"; e["ℵ"] = "א"; e["ℶ"] = "ב"; e["ℷ"] = "ג"; e["ℸ"] = "ד"; e["℻"] = "FAX"; e["Ⅰ"] = "I"; e["Ⅱ"] = "II"; e["Ⅲ"] = "III"; e["Ⅳ"] = "IV"; e["Ⅴ"] = "V"; e["Ⅵ"] = "VI"; e["Ⅶ"] = "VII"; e["Ⅷ"] = "VIII"; e["Ⅸ"] = "IX"; e["Ⅹ"] = "X"; e["Ⅺ"] = "XI"; e["Ⅻ"] = "XII"; e["Ⅼ"] = "L"; e["Ⅽ"] = "C"; e["Ⅾ"] = "D"; e["Ⅿ"] = "M"; e["ⅰ"] = "i"; e["ⅱ"] = "ii"; e["ⅲ"] = "iii"; e["ⅳ"] = "iv"; e["ⅴ"] = "v"; e["ⅵ"] = "vi"; e["ⅶ"] = "vii"; e["ⅷ"] = "viii"; e["ⅸ"] = "ix"; e["ⅹ"] = "x"; e["ⅺ"] = "xi"; e["ⅻ"] = "xii"; e["ⅼ"] = "l"; e["ⅽ"] = "c"; e["ⅾ"] = "d"; e["ⅿ"] = "m"; e["∬"] = "∫∫"; e["∭"] = "∫∫∫"; e["∯"] = "∮∮"; e["∰"] = "∮∮∮"; e["⑴"] = "(1)"; e["⑵"] = "(2)"; e["⑶"] = "(3)"; e["⑷"] = "(4)"; e["⑸"] = "(5)"; e["⑹"] = "(6)"; e["⑺"] = "(7)"; e["⑻"] = "(8)"; e["⑼"] = "(9)"; e["⑽"] = "(10)"; e["⑾"] = "(11)"; e["⑿"] = "(12)"; e["⒀"] = "(13)"; e["⒁"] = "(14)"; e["⒂"] = "(15)"; e["⒃"] = "(16)"; e["⒄"] = "(17)"; e["⒅"] = "(18)"; e["⒆"] = "(19)"; e["⒇"] = "(20)"; e["⒈"] = "1."; e["⒉"] = "2."; e["⒊"] = "3."; e["⒋"] = "4."; e["⒌"] = "5."; e["⒍"] = "6."; e["⒎"] = "7."; e["⒏"] = "8."; e["⒐"] = "9."; e["⒑"] = "10."; e["⒒"] = "11."; e["⒓"] = "12."; e["⒔"] = "13."; e["⒕"] = "14."; e["⒖"] = "15."; e["⒗"] = "16."; e["⒘"] = "17."; e["⒙"] = "18."; e["⒚"] = "19."; e["⒛"] = "20."; e["⒜"] = "(a)"; e["⒝"] = "(b)"; e["⒞"] = "(c)"; e["⒟"] = "(d)"; e["⒠"] = "(e)"; e["⒡"] = "(f)"; e["⒢"] = "(g)"; e["⒣"] = "(h)"; e["⒤"] = "(i)"; e["⒥"] = "(j)"; e["⒦"] = "(k)"; e["⒧"] = "(l)"; e["⒨"] = "(m)"; e["⒩"] = "(n)"; e["⒪"] = "(o)"; e["⒫"] = "(p)"; e["⒬"] = "(q)"; e["⒭"] = "(r)"; e["⒮"] = "(s)"; e["⒯"] = "(t)"; e["⒰"] = "(u)"; e["⒱"] = "(v)"; e["⒲"] = "(w)"; e["⒳"] = "(x)"; e["⒴"] = "(y)"; e["⒵"] = "(z)"; e["⨌"] = "∫∫∫∫"; e["⩴"] = "::="; e["⩵"] = "=="; e["⩶"] = "==="; e["⺟"] = "母"; e["⻳"] = "龟"; e["⼀"] = "一"; e["⼁"] = "丨"; e["⼂"] = "丶"; e["⼃"] = "丿"; e["⼄"] = "乙"; e["⼅"] = "亅"; e["⼆"] = "二"; e["⼇"] = "亠"; e["⼈"] = "人"; e["⼉"] = "儿"; e["⼊"] = "入"; e["⼋"] = "八"; e["⼌"] = "冂"; e["⼍"] = "冖"; e["⼎"] = "冫"; e["⼏"] = "几"; e["⼐"] = "凵"; e["⼑"] = "刀"; e["⼒"] = "力"; e["⼓"] = "勹"; e["⼔"] = "匕"; e["⼕"] = "匚"; e["⼖"] = "匸"; e["⼗"] = "十"; e["⼘"] = "卜"; e["⼙"] = "卩"; e["⼚"] = "厂"; e["⼛"] = "厶"; e["⼜"] = "又"; e["⼝"] = "口"; e["⼞"] = "囗"; e["⼟"] = "土"; e["⼠"] = "士"; e["⼡"] = "夂"; e["⼢"] = "夊"; e["⼣"] = "夕"; e["⼤"] = "大"; e["⼥"] = "女"; e["⼦"] = "子"; e["⼧"] = "宀"; e["⼨"] = "寸"; e["⼩"] = "小"; e["⼪"] = "尢"; e["⼫"] = "尸"; e["⼬"] = "屮"; e["⼭"] = "山"; e["⼮"] = "巛"; e["⼯"] = "工"; e["⼰"] = "己"; e["⼱"] = "巾"; e["⼲"] = "干"; e["⼳"] = "幺"; e["⼴"] = "广"; e["⼵"] = "廴"; e["⼶"] = "廾"; e["⼷"] = "弋"; e["⼸"] = "弓"; e["⼹"] = "彐"; e["⼺"] = "彡"; e["⼻"] = "彳"; e["⼼"] = "心"; e["⼽"] = "戈"; e["⼾"] = "戶"; e["⼿"] = "手"; e["⽀"] = "支"; e["⽁"] = "攴"; e["⽂"] = "文"; e["⽃"] = "斗"; e["⽄"] = "斤"; e["⽅"] = "方"; e["⽆"] = "无"; e["⽇"] = "日"; e["⽈"] = "曰"; e["⽉"] = "月"; e["⽊"] = "木"; e["⽋"] = "欠"; e["⽌"] = "止"; e["⽍"] = "歹"; e["⽎"] = "殳"; e["⽏"] = "毋"; e["⽐"] = "比"; e["⽑"] = "毛"; e["⽒"] = "氏"; e["⽓"] = "气"; e["⽔"] = "水"; e["⽕"] = "火"; e["⽖"] = "爪"; e["⽗"] = "父"; e["⽘"] = "爻"; e["⽙"] = "爿"; e["⽚"] = "片"; e["⽛"] = "牙"; e["⽜"] = "牛"; e["⽝"] = "犬"; e["⽞"] = "玄"; e["⽟"] = "玉"; e["⽠"] = "瓜"; e["⽡"] = "瓦"; e["⽢"] = "甘"; e["⽣"] = "生"; e["⽤"] = "用"; e["⽥"] = "田"; e["⽦"] = "疋"; e["⽧"] = "疒"; e["⽨"] = "癶"; e["⽩"] = "白"; e["⽪"] = "皮"; e["⽫"] = "皿"; e["⽬"] = "目"; e["⽭"] = "矛"; e["⽮"] = "矢"; e["⽯"] = "石"; e["⽰"] = "示"; e["⽱"] = "禸"; e["⽲"] = "禾"; e["⽳"] = "穴"; e["⽴"] = "立"; e["⽵"] = "竹"; e["⽶"] = "米"; e["⽷"] = "糸"; e["⽸"] = "缶"; e["⽹"] = "网"; e["⽺"] = "羊"; e["⽻"] = "羽"; e["⽼"] = "老"; e["⽽"] = "而"; e["⽾"] = "耒"; e["⽿"] = "耳"; e["⾀"] = "聿"; e["⾁"] = "肉"; e["⾂"] = "臣"; e["⾃"] = "自"; e["⾄"] = "至"; e["⾅"] = "臼"; e["⾆"] = "舌"; e["⾇"] = "舛"; e["⾈"] = "舟"; e["⾉"] = "艮"; e["⾊"] = "色"; e["⾋"] = "艸"; e["⾌"] = "虍"; e["⾍"] = "虫"; e["⾎"] = "血"; e["⾏"] = "行"; e["⾐"] = "衣"; e["⾑"] = "襾"; e["⾒"] = "見"; e["⾓"] = "角"; e["⾔"] = "言"; e["⾕"] = "谷"; e["⾖"] = "豆"; e["⾗"] = "豕"; e["⾘"] = "豸"; e["⾙"] = "貝"; e["⾚"] = "赤"; e["⾛"] = "走"; e["⾜"] = "足"; e["⾝"] = "身"; e["⾞"] = "車"; e["⾟"] = "辛"; e["⾠"] = "辰"; e["⾡"] = "辵"; e["⾢"] = "邑"; e["⾣"] = "酉"; e["⾤"] = "釆"; e["⾥"] = "里"; e["⾦"] = "金"; e["⾧"] = "長"; e["⾨"] = "門"; e["⾩"] = "阜"; e["⾪"] = "隶"; e["⾫"] = "隹"; e["⾬"] = "雨"; e["⾭"] = "靑"; e["⾮"] = "非"; e["⾯"] = "面"; e["⾰"] = "革"; e["⾱"] = "韋"; e["⾲"] = "韭"; e["⾳"] = "音"; e["⾴"] = "頁"; e["⾵"] = "風"; e["⾶"] = "飛"; e["⾷"] = "食"; e["⾸"] = "首"; e["⾹"] = "香"; e["⾺"] = "馬"; e["⾻"] = "骨"; e["⾼"] = "高"; e["⾽"] = "髟"; e["⾾"] = "鬥"; e["⾿"] = "鬯"; e["⿀"] = "鬲"; e["⿁"] = "鬼"; e["⿂"] = "魚"; e["⿃"] = "鳥"; e["⿄"] = "鹵"; e["⿅"] = "鹿"; e["⿆"] = "麥"; e["⿇"] = "麻"; e["⿈"] = "黃"; e["⿉"] = "黍"; e["⿊"] = "黑"; e["⿋"] = "黹"; e["⿌"] = "黽"; e["⿍"] = "鼎"; e["⿎"] = "鼓"; e["⿏"] = "鼠"; e["⿐"] = "鼻"; e["⿑"] = "齊"; e["⿒"] = "齒"; e["⿓"] = "龍"; e["⿔"] = "龜"; e["⿕"] = "龠"; e["〶"] = "〒"; e["〸"] = "十"; e["〹"] = "卄"; e["〺"] = "卅"; e["゛"] = " ゙"; e["゜"] = " ゚"; e["ㄱ"] = "ᄀ"; e["ㄲ"] = "ᄁ"; e["ㄳ"] = "ᆪ"; e["ㄴ"] = "ᄂ"; e["ㄵ"] = "ᆬ"; e["ㄶ"] = "ᆭ"; e["ㄷ"] = "ᄃ"; e["ㄸ"] = "ᄄ"; e["ㄹ"] = "ᄅ"; e["ㄺ"] = "ᆰ"; e["ㄻ"] = "ᆱ"; e["ㄼ"] = "ᆲ"; e["ㄽ"] = "ᆳ"; e["ㄾ"] = "ᆴ"; e["ㄿ"] = "ᆵ"; e["ㅀ"] = "ᄚ"; e["ㅁ"] = "ᄆ"; e["ㅂ"] = "ᄇ"; e["ㅃ"] = "ᄈ"; e["ㅄ"] = "ᄡ"; e["ㅅ"] = "ᄉ"; e["ㅆ"] = "ᄊ"; e["ㅇ"] = "ᄋ"; e["ㅈ"] = "ᄌ"; e["ㅉ"] = "ᄍ"; e["ㅊ"] = "ᄎ"; e["ㅋ"] = "ᄏ"; e["ㅌ"] = "ᄐ"; e["ㅍ"] = "ᄑ"; e["ㅎ"] = "ᄒ"; e["ㅏ"] = "ᅡ"; e["ㅐ"] = "ᅢ"; e["ㅑ"] = "ᅣ"; e["ㅒ"] = "ᅤ"; e["ㅓ"] = "ᅥ"; e["ㅔ"] = "ᅦ"; e["ㅕ"] = "ᅧ"; e["ㅖ"] = "ᅨ"; e["ㅗ"] = "ᅩ"; e["ㅘ"] = "ᅪ"; e["ㅙ"] = "ᅫ"; e["ㅚ"] = "ᅬ"; e["ㅛ"] = "ᅭ"; e["ㅜ"] = "ᅮ"; e["ㅝ"] = "ᅯ"; e["ㅞ"] = "ᅰ"; e["ㅟ"] = "ᅱ"; e["ㅠ"] = "ᅲ"; e["ㅡ"] = "ᅳ"; e["ㅢ"] = "ᅴ"; e["ㅣ"] = "ᅵ"; e["ㅤ"] = "ᅠ"; e["ㅥ"] = "ᄔ"; e["ㅦ"] = "ᄕ"; e["ㅧ"] = "ᇇ"; e["ㅨ"] = "ᇈ"; e["ㅩ"] = "ᇌ"; e["ㅪ"] = "ᇎ"; e["ㅫ"] = "ᇓ"; e["ㅬ"] = "ᇗ"; e["ㅭ"] = "ᇙ"; e["ㅮ"] = "ᄜ"; e["ㅯ"] = "ᇝ"; e["ㅰ"] = "ᇟ"; e["ㅱ"] = "ᄝ"; e["ㅲ"] = "ᄞ"; e["ㅳ"] = "ᄠ"; e["ㅴ"] = "ᄢ"; e["ㅵ"] = "ᄣ"; e["ㅶ"] = "ᄧ"; e["ㅷ"] = "ᄩ"; e["ㅸ"] = "ᄫ"; e["ㅹ"] = "ᄬ"; e["ㅺ"] = "ᄭ"; e["ㅻ"] = "ᄮ"; e["ㅼ"] = "ᄯ"; e["ㅽ"] = "ᄲ"; e["ㅾ"] = "ᄶ"; e["ㅿ"] = "ᅀ"; e["ㆀ"] = "ᅇ"; e["ㆁ"] = "ᅌ"; e["ㆂ"] = "ᇱ"; e["ㆃ"] = "ᇲ"; e["ㆄ"] = "ᅗ"; e["ㆅ"] = "ᅘ"; e["ㆆ"] = "ᅙ"; e["ㆇ"] = "ᆄ"; e["ㆈ"] = "ᆅ"; e["ㆉ"] = "ᆈ"; e["ㆊ"] = "ᆑ"; e["ㆋ"] = "ᆒ"; e["ㆌ"] = "ᆔ"; e["ㆍ"] = "ᆞ"; e["ㆎ"] = "ᆡ"; e["㈀"] = "(ᄀ)"; e["㈁"] = "(ᄂ)"; e["㈂"] = "(ᄃ)"; e["㈃"] = "(ᄅ)"; e["㈄"] = "(ᄆ)"; e["㈅"] = "(ᄇ)"; e["㈆"] = "(ᄉ)"; e["㈇"] = "(ᄋ)"; e["㈈"] = "(ᄌ)"; e["㈉"] = "(ᄎ)"; e["㈊"] = "(ᄏ)"; e["㈋"] = "(ᄐ)"; e["㈌"] = "(ᄑ)"; e["㈍"] = "(ᄒ)"; e["㈎"] = "(가)"; e["㈏"] = "(나)"; e["㈐"] = "(다)"; e["㈑"] = "(라)"; e["㈒"] = "(마)"; e["㈓"] = "(바)"; e["㈔"] = "(사)"; e["㈕"] = "(아)"; e["㈖"] = "(자)"; e["㈗"] = "(차)"; e["㈘"] = "(카)"; e["㈙"] = "(타)"; e["㈚"] = "(파)"; e["㈛"] = "(하)"; e["㈜"] = "(주)"; e["㈝"] = "(오전)"; e["㈞"] = "(오후)"; e["㈠"] = "(一)"; e["㈡"] = "(二)"; e["㈢"] = "(三)"; e["㈣"] = "(四)"; e["㈤"] = "(五)"; e["㈥"] = "(六)"; e["㈦"] = "(七)"; e["㈧"] = "(八)"; e["㈨"] = "(九)"; e["㈩"] = "(十)"; e["㈪"] = "(月)"; e["㈫"] = "(火)"; e["㈬"] = "(水)"; e["㈭"] = "(木)"; e["㈮"] = "(金)"; e["㈯"] = "(土)"; e["㈰"] = "(日)"; e["㈱"] = "(株)"; e["㈲"] = "(有)"; e["㈳"] = "(社)"; e["㈴"] = "(名)"; e["㈵"] = "(特)"; e["㈶"] = "(財)"; e["㈷"] = "(祝)"; e["㈸"] = "(労)"; e["㈹"] = "(代)"; e["㈺"] = "(呼)"; e["㈻"] = "(学)"; e["㈼"] = "(監)"; e["㈽"] = "(企)"; e["㈾"] = "(資)"; e["㈿"] = "(協)"; e["㉀"] = "(祭)"; e["㉁"] = "(休)"; e["㉂"] = "(自)"; e["㉃"] = "(至)"; e["㋀"] = "1月"; e["㋁"] = "2月"; e["㋂"] = "3月"; e["㋃"] = "4月"; e["㋄"] = "5月"; e["㋅"] = "6月"; e["㋆"] = "7月"; e["㋇"] = "8月"; e["㋈"] = "9月"; e["㋉"] = "10月"; e["㋊"] = "11月"; e["㋋"] = "12月"; e["㍘"] = "0点"; e["㍙"] = "1点"; e["㍚"] = "2点"; e["㍛"] = "3点"; e["㍜"] = "4点"; e["㍝"] = "5点"; e["㍞"] = "6点"; e["㍟"] = "7点"; e["㍠"] = "8点"; e["㍡"] = "9点"; e["㍢"] = "10点"; e["㍣"] = "11点"; e["㍤"] = "12点"; e["㍥"] = "13点"; e["㍦"] = "14点"; e["㍧"] = "15点"; e["㍨"] = "16点"; e["㍩"] = "17点"; e["㍪"] = "18点"; e["㍫"] = "19点"; e["㍬"] = "20点"; e["㍭"] = "21点"; e["㍮"] = "22点"; e["㍯"] = "23点"; e["㍰"] = "24点"; e["㏠"] = "1日"; e["㏡"] = "2日"; e["㏢"] = "3日"; e["㏣"] = "4日"; e["㏤"] = "5日"; e["㏥"] = "6日"; e["㏦"] = "7日"; e["㏧"] = "8日"; e["㏨"] = "9日"; e["㏩"] = "10日"; e["㏪"] = "11日"; e["㏫"] = "12日"; e["㏬"] = "13日"; e["㏭"] = "14日"; e["㏮"] = "15日"; e["㏯"] = "16日"; e["㏰"] = "17日"; e["㏱"] = "18日"; e["㏲"] = "19日"; e["㏳"] = "20日"; e["㏴"] = "21日"; e["㏵"] = "22日"; e["㏶"] = "23日"; e["㏷"] = "24日"; e["㏸"] = "25日"; e["㏹"] = "26日"; e["㏺"] = "27日"; e["㏻"] = "28日"; e["㏼"] = "29日"; e["㏽"] = "30日"; e["㏾"] = "31日"; e["ff"] = "ff"; e["fi"] = "fi"; e["fl"] = "fl"; e["ffi"] = "ffi"; e["ffl"] = "ffl"; e["ſt"] = "ſt"; e["st"] = "st"; e["ﬓ"] = "մն"; e["ﬔ"] = "մե"; e["ﬕ"] = "մի"; e["ﬖ"] = "վն"; e["ﬗ"] = "մխ"; e["ﭏ"] = "אל"; e["ﭐ"] = "ٱ"; e["ﭑ"] = "ٱ"; e["ﭒ"] = "ٻ"; e["ﭓ"] = "ٻ"; e["ﭔ"] = "ٻ"; e["ﭕ"] = "ٻ"; e["ﭖ"] = "پ"; e["ﭗ"] = "پ"; e["ﭘ"] = "پ"; e["ﭙ"] = "پ"; e["ﭚ"] = "ڀ"; e["ﭛ"] = "ڀ"; e["ﭜ"] = "ڀ"; e["ﭝ"] = "ڀ"; e["ﭞ"] = "ٺ"; e["ﭟ"] = "ٺ"; e["ﭠ"] = "ٺ"; e["ﭡ"] = "ٺ"; e["ﭢ"] = "ٿ"; e["ﭣ"] = "ٿ"; e["ﭤ"] = "ٿ"; e["ﭥ"] = "ٿ"; e["ﭦ"] = "ٹ"; e["ﭧ"] = "ٹ"; e["ﭨ"] = "ٹ"; e["ﭩ"] = "ٹ"; e["ﭪ"] = "ڤ"; e["ﭫ"] = "ڤ"; e["ﭬ"] = "ڤ"; e["ﭭ"] = "ڤ"; e["ﭮ"] = "ڦ"; e["ﭯ"] = "ڦ"; e["ﭰ"] = "ڦ"; e["ﭱ"] = "ڦ"; e["ﭲ"] = "ڄ"; e["ﭳ"] = "ڄ"; e["ﭴ"] = "ڄ"; e["ﭵ"] = "ڄ"; e["ﭶ"] = "ڃ"; e["ﭷ"] = "ڃ"; e["ﭸ"] = "ڃ"; e["ﭹ"] = "ڃ"; e["ﭺ"] = "چ"; e["ﭻ"] = "چ"; e["ﭼ"] = "چ"; e["ﭽ"] = "چ"; e["ﭾ"] = "ڇ"; e["ﭿ"] = "ڇ"; e["ﮀ"] = "ڇ"; e["ﮁ"] = "ڇ"; e["ﮂ"] = "ڍ"; e["ﮃ"] = "ڍ"; e["ﮄ"] = "ڌ"; e["ﮅ"] = "ڌ"; e["ﮆ"] = "ڎ"; e["ﮇ"] = "ڎ"; e["ﮈ"] = "ڈ"; e["ﮉ"] = "ڈ"; e["ﮊ"] = "ژ"; e["ﮋ"] = "ژ"; e["ﮌ"] = "ڑ"; e["ﮍ"] = "ڑ"; e["ﮎ"] = "ک"; e["ﮏ"] = "ک"; e["ﮐ"] = "ک"; e["ﮑ"] = "ک"; e["ﮒ"] = "گ"; e["ﮓ"] = "گ"; e["ﮔ"] = "گ"; e["ﮕ"] = "گ"; e["ﮖ"] = "ڳ"; e["ﮗ"] = "ڳ"; e["ﮘ"] = "ڳ"; e["ﮙ"] = "ڳ"; e["ﮚ"] = "ڱ"; e["ﮛ"] = "ڱ"; e["ﮜ"] = "ڱ"; e["ﮝ"] = "ڱ"; e["ﮞ"] = "ں"; e["ﮟ"] = "ں"; e["ﮠ"] = "ڻ"; e["ﮡ"] = "ڻ"; e["ﮢ"] = "ڻ"; e["ﮣ"] = "ڻ"; e["ﮤ"] = "ۀ"; e["ﮥ"] = "ۀ"; e["ﮦ"] = "ہ"; e["ﮧ"] = "ہ"; e["ﮨ"] = "ہ"; e["ﮩ"] = "ہ"; e["ﮪ"] = "ھ"; e["ﮫ"] = "ھ"; e["ﮬ"] = "ھ"; e["ﮭ"] = "ھ"; e["ﮮ"] = "ے"; e["ﮯ"] = "ے"; e["ﮰ"] = "ۓ"; e["ﮱ"] = "ۓ"; e["ﯓ"] = "ڭ"; e["ﯔ"] = "ڭ"; e["ﯕ"] = "ڭ"; e["ﯖ"] = "ڭ"; e["ﯗ"] = "ۇ"; e["ﯘ"] = "ۇ"; e["ﯙ"] = "ۆ"; e["ﯚ"] = "ۆ"; e["ﯛ"] = "ۈ"; e["ﯜ"] = "ۈ"; e["ﯝ"] = "ٷ"; e["ﯞ"] = "ۋ"; e["ﯟ"] = "ۋ"; e["ﯠ"] = "ۅ"; e["ﯡ"] = "ۅ"; e["ﯢ"] = "ۉ"; e["ﯣ"] = "ۉ"; e["ﯤ"] = "ې"; e["ﯥ"] = "ې"; e["ﯦ"] = "ې"; e["ﯧ"] = "ې"; e["ﯨ"] = "ى"; e["ﯩ"] = "ى"; e["ﯪ"] = "ئا"; e["ﯫ"] = "ئا"; e["ﯬ"] = "ئە"; e["ﯭ"] = "ئە"; e["ﯮ"] = "ئو"; e["ﯯ"] = "ئو"; e["ﯰ"] = "ئۇ"; e["ﯱ"] = "ئۇ"; e["ﯲ"] = "ئۆ"; e["ﯳ"] = "ئۆ"; e["ﯴ"] = "ئۈ"; e["ﯵ"] = "ئۈ"; e["ﯶ"] = "ئې"; e["ﯷ"] = "ئې"; e["ﯸ"] = "ئې"; e["ﯹ"] = "ئى"; e["ﯺ"] = "ئى"; e["ﯻ"] = "ئى"; e["ﯼ"] = "ی"; e["ﯽ"] = "ی"; e["ﯾ"] = "ی"; e["ﯿ"] = "ی"; e["ﰀ"] = "ئج"; e["ﰁ"] = "ئح"; e["ﰂ"] = "ئم"; e["ﰃ"] = "ئى"; e["ﰄ"] = "ئي"; e["ﰅ"] = "بج"; e["ﰆ"] = "بح"; e["ﰇ"] = "بخ"; e["ﰈ"] = "بم"; e["ﰉ"] = "بى"; e["ﰊ"] = "بي"; e["ﰋ"] = "تج"; e["ﰌ"] = "تح"; e["ﰍ"] = "تخ"; e["ﰎ"] = "تم"; e["ﰏ"] = "تى"; e["ﰐ"] = "تي"; e["ﰑ"] = "ثج"; e["ﰒ"] = "ثم"; e["ﰓ"] = "ثى"; e["ﰔ"] = "ثي"; e["ﰕ"] = "جح"; e["ﰖ"] = "جم"; e["ﰗ"] = "حج"; e["ﰘ"] = "حم"; e["ﰙ"] = "خج"; e["ﰚ"] = "خح"; e["ﰛ"] = "خم"; e["ﰜ"] = "سج"; e["ﰝ"] = "سح"; e["ﰞ"] = "سخ"; e["ﰟ"] = "سم"; e["ﰠ"] = "صح"; e["ﰡ"] = "صم"; e["ﰢ"] = "ضج"; e["ﰣ"] = "ضح"; e["ﰤ"] = "ضخ"; e["ﰥ"] = "ضم"; e["ﰦ"] = "طح"; e["ﰧ"] = "طم"; e["ﰨ"] = "ظم"; e["ﰩ"] = "عج"; e["ﰪ"] = "عم"; e["ﰫ"] = "غج"; e["ﰬ"] = "غم"; e["ﰭ"] = "فج"; e["ﰮ"] = "فح"; e["ﰯ"] = "فخ"; e["ﰰ"] = "فم"; e["ﰱ"] = "فى"; e["ﰲ"] = "في"; e["ﰳ"] = "قح"; e["ﰴ"] = "قم"; e["ﰵ"] = "قى"; e["ﰶ"] = "قي"; e["ﰷ"] = "كا"; e["ﰸ"] = "كج"; e["ﰹ"] = "كح"; e["ﰺ"] = "كخ"; e["ﰻ"] = "كل"; e["ﰼ"] = "كم"; e["ﰽ"] = "كى"; e["ﰾ"] = "كي"; e["ﰿ"] = "لج"; e["ﱀ"] = "لح"; e["ﱁ"] = "لخ"; e["ﱂ"] = "لم"; e["ﱃ"] = "لى"; e["ﱄ"] = "لي"; e["ﱅ"] = "مج"; e["ﱆ"] = "مح"; e["ﱇ"] = "مخ"; e["ﱈ"] = "مم"; e["ﱉ"] = "مى"; e["ﱊ"] = "مي"; e["ﱋ"] = "نج"; e["ﱌ"] = "نح"; e["ﱍ"] = "نخ"; e["ﱎ"] = "نم"; e["ﱏ"] = "نى"; e["ﱐ"] = "ني"; e["ﱑ"] = "هج"; e["ﱒ"] = "هم"; e["ﱓ"] = "هى"; e["ﱔ"] = "هي"; e["ﱕ"] = "يج"; e["ﱖ"] = "يح"; e["ﱗ"] = "يخ"; e["ﱘ"] = "يم"; e["ﱙ"] = "يى"; e["ﱚ"] = "يي"; e["ﱛ"] = "ذٰ"; e["ﱜ"] = "رٰ"; e["ﱝ"] = "ىٰ"; e["ﱞ"] = " ٌّ"; e["ﱟ"] = " ٍّ"; e["ﱠ"] = " َّ"; e["ﱡ"] = " ُّ"; e["ﱢ"] = " ِّ"; e["ﱣ"] = " ّٰ"; e["ﱤ"] = "ئر"; e["ﱥ"] = "ئز"; e["ﱦ"] = "ئم"; e["ﱧ"] = "ئن"; e["ﱨ"] = "ئى"; e["ﱩ"] = "ئي"; e["ﱪ"] = "بر"; e["ﱫ"] = "بز"; e["ﱬ"] = "بم"; e["ﱭ"] = "بن"; e["ﱮ"] = "بى"; e["ﱯ"] = "بي"; e["ﱰ"] = "تر"; e["ﱱ"] = "تز"; e["ﱲ"] = "تم"; e["ﱳ"] = "تن"; e["ﱴ"] = "تى"; e["ﱵ"] = "تي"; e["ﱶ"] = "ثر"; e["ﱷ"] = "ثز"; e["ﱸ"] = "ثم"; e["ﱹ"] = "ثن"; e["ﱺ"] = "ثى"; e["ﱻ"] = "ثي"; e["ﱼ"] = "فى"; e["ﱽ"] = "في"; e["ﱾ"] = "قى"; e["ﱿ"] = "قي"; e["ﲀ"] = "كا"; e["ﲁ"] = "كل"; e["ﲂ"] = "كم"; e["ﲃ"] = "كى"; e["ﲄ"] = "كي"; e["ﲅ"] = "لم"; e["ﲆ"] = "لى"; e["ﲇ"] = "لي"; e["ﲈ"] = "ما"; e["ﲉ"] = "مم"; e["ﲊ"] = "نر"; e["ﲋ"] = "نز"; e["ﲌ"] = "نم"; e["ﲍ"] = "نن"; e["ﲎ"] = "نى"; e["ﲏ"] = "ني"; e["ﲐ"] = "ىٰ"; e["ﲑ"] = "ير"; e["ﲒ"] = "يز"; e["ﲓ"] = "يم"; e["ﲔ"] = "ين"; e["ﲕ"] = "يى"; e["ﲖ"] = "يي"; e["ﲗ"] = "ئج"; e["ﲘ"] = "ئح"; e["ﲙ"] = "ئخ"; e["ﲚ"] = "ئم"; e["ﲛ"] = "ئه"; e["ﲜ"] = "بج"; e["ﲝ"] = "بح"; e["ﲞ"] = "بخ"; e["ﲟ"] = "بم"; e["ﲠ"] = "به"; e["ﲡ"] = "تج"; e["ﲢ"] = "تح"; e["ﲣ"] = "تخ"; e["ﲤ"] = "تم"; e["ﲥ"] = "ته"; e["ﲦ"] = "ثم"; e["ﲧ"] = "جح"; e["ﲨ"] = "جم"; e["ﲩ"] = "حج"; e["ﲪ"] = "حم"; e["ﲫ"] = "خج"; e["ﲬ"] = "خم"; e["ﲭ"] = "سج"; e["ﲮ"] = "سح"; e["ﲯ"] = "سخ"; e["ﲰ"] = "سم"; e["ﲱ"] = "صح"; e["ﲲ"] = "صخ"; e["ﲳ"] = "صم"; e["ﲴ"] = "ضج"; e["ﲵ"] = "ضح"; e["ﲶ"] = "ضخ"; e["ﲷ"] = "ضم"; e["ﲸ"] = "طح"; e["ﲹ"] = "ظم"; e["ﲺ"] = "عج"; e["ﲻ"] = "عم"; e["ﲼ"] = "غج"; e["ﲽ"] = "غم"; e["ﲾ"] = "فج"; e["ﲿ"] = "فح"; e["ﳀ"] = "فخ"; e["ﳁ"] = "فم"; e["ﳂ"] = "قح"; e["ﳃ"] = "قم"; e["ﳄ"] = "كج"; e["ﳅ"] = "كح"; e["ﳆ"] = "كخ"; e["ﳇ"] = "كل"; e["ﳈ"] = "كم"; e["ﳉ"] = "لج"; e["ﳊ"] = "لح"; e["ﳋ"] = "لخ"; e["ﳌ"] = "لم"; e["ﳍ"] = "له"; e["ﳎ"] = "مج"; e["ﳏ"] = "مح"; e["ﳐ"] = "مخ"; e["ﳑ"] = "مم"; e["ﳒ"] = "نج"; e["ﳓ"] = "نح"; e["ﳔ"] = "نخ"; e["ﳕ"] = "نم"; e["ﳖ"] = "نه"; e["ﳗ"] = "هج"; e["ﳘ"] = "هم"; e["ﳙ"] = "هٰ"; e["ﳚ"] = "يج"; e["ﳛ"] = "يح"; e["ﳜ"] = "يخ"; e["ﳝ"] = "يم"; e["ﳞ"] = "يه"; e["ﳟ"] = "ئم"; e["ﳠ"] = "ئه"; e["ﳡ"] = "بم"; e["ﳢ"] = "به"; e["ﳣ"] = "تم"; e["ﳤ"] = "ته"; e["ﳥ"] = "ثم"; e["ﳦ"] = "ثه"; e["ﳧ"] = "سم"; e["ﳨ"] = "سه"; e["ﳩ"] = "شم"; e["ﳪ"] = "شه"; e["ﳫ"] = "كل"; e["ﳬ"] = "كم"; e["ﳭ"] = "لم"; e["ﳮ"] = "نم"; e["ﳯ"] = "نه"; e["ﳰ"] = "يم"; e["ﳱ"] = "يه"; e["ﳲ"] = "ـَّ"; e["ﳳ"] = "ـُّ"; e["ﳴ"] = "ـِّ"; e["ﳵ"] = "طى"; e["ﳶ"] = "طي"; e["ﳷ"] = "عى"; e["ﳸ"] = "عي"; e["ﳹ"] = "غى"; e["ﳺ"] = "غي"; e["ﳻ"] = "سى"; e["ﳼ"] = "سي"; e["ﳽ"] = "شى"; e["ﳾ"] = "شي"; e["ﳿ"] = "حى"; e["ﴀ"] = "حي"; e["ﴁ"] = "جى"; e["ﴂ"] = "جي"; e["ﴃ"] = "خى"; e["ﴄ"] = "خي"; e["ﴅ"] = "صى"; e["ﴆ"] = "صي"; e["ﴇ"] = "ضى"; e["ﴈ"] = "ضي"; e["ﴉ"] = "شج"; e["ﴊ"] = "شح"; e["ﴋ"] = "شخ"; e["ﴌ"] = "شم"; e["ﴍ"] = "شر"; e["ﴎ"] = "سر"; e["ﴏ"] = "صر"; e["ﴐ"] = "ضر"; e["ﴑ"] = "طى"; e["ﴒ"] = "طي"; e["ﴓ"] = "عى"; e["ﴔ"] = "عي"; e["ﴕ"] = "غى"; e["ﴖ"] = "غي"; e["ﴗ"] = "سى"; e["ﴘ"] = "سي"; e["ﴙ"] = "شى"; e["ﴚ"] = "شي"; e["ﴛ"] = "حى"; e["ﴜ"] = "حي"; e["ﴝ"] = "جى"; e["ﴞ"] = "جي"; e["ﴟ"] = "خى"; e["ﴠ"] = "خي"; e["ﴡ"] = "صى"; e["ﴢ"] = "صي"; e["ﴣ"] = "ضى"; e["ﴤ"] = "ضي"; e["ﴥ"] = "شج"; e["ﴦ"] = "شح"; e["ﴧ"] = "شخ"; e["ﴨ"] = "شم"; e["ﴩ"] = "شر"; e["ﴪ"] = "سر"; e["ﴫ"] = "صر"; e["ﴬ"] = "ضر"; e["ﴭ"] = "شج"; e["ﴮ"] = "شح"; e["ﴯ"] = "شخ"; e["ﴰ"] = "شم"; e["ﴱ"] = "سه"; e["ﴲ"] = "شه"; e["ﴳ"] = "طم"; e["ﴴ"] = "سج"; e["ﴵ"] = "سح"; e["ﴶ"] = "سخ"; e["ﴷ"] = "شج"; e["ﴸ"] = "شح"; e["ﴹ"] = "شخ"; e["ﴺ"] = "طم"; e["ﴻ"] = "ظم"; e["ﴼ"] = "اً"; e["ﴽ"] = "اً"; e["ﵐ"] = "تجم"; e["ﵑ"] = "تحج"; e["ﵒ"] = "تحج"; e["ﵓ"] = "تحم"; e["ﵔ"] = "تخم"; e["ﵕ"] = "تمج"; e["ﵖ"] = "تمح"; e["ﵗ"] = "تمخ"; e["ﵘ"] = "جمح"; e["ﵙ"] = "جمح"; e["ﵚ"] = "حمي"; e["ﵛ"] = "حمى"; e["ﵜ"] = "سحج"; e["ﵝ"] = "سجح"; e["ﵞ"] = "سجى"; e["ﵟ"] = "سمح"; e["ﵠ"] = "سمح"; e["ﵡ"] = "سمج"; e["ﵢ"] = "سمم"; e["ﵣ"] = "سمم"; e["ﵤ"] = "صحح"; e["ﵥ"] = "صحح"; e["ﵦ"] = "صمم"; e["ﵧ"] = "شحم"; e["ﵨ"] = "شحم"; e["ﵩ"] = "شجي"; e["ﵪ"] = "شمخ"; e["ﵫ"] = "شمخ"; e["ﵬ"] = "شمم"; e["ﵭ"] = "شمم"; e["ﵮ"] = "ضحى"; e["ﵯ"] = "ضخم"; e["ﵰ"] = "ضخم"; e["ﵱ"] = "طمح"; e["ﵲ"] = "طمح"; e["ﵳ"] = "طمم"; e["ﵴ"] = "طمي"; e["ﵵ"] = "عجم"; e["ﵶ"] = "عمم"; e["ﵷ"] = "عمم"; e["ﵸ"] = "عمى"; e["ﵹ"] = "غمم"; e["ﵺ"] = "غمي"; e["ﵻ"] = "غمى"; e["ﵼ"] = "فخم"; e["ﵽ"] = "فخم"; e["ﵾ"] = "قمح"; e["ﵿ"] = "قمم"; e["ﶀ"] = "لحم"; e["ﶁ"] = "لحي"; e["ﶂ"] = "لحى"; e["ﶃ"] = "لجج"; e["ﶄ"] = "لجج"; e["ﶅ"] = "لخم"; e["ﶆ"] = "لخم"; e["ﶇ"] = "لمح"; e["ﶈ"] = "لمح"; e["ﶉ"] = "محج"; e["ﶊ"] = "محم"; e["ﶋ"] = "محي"; e["ﶌ"] = "مجح"; e["ﶍ"] = "مجم"; e["ﶎ"] = "مخج"; e["ﶏ"] = "مخم"; e["ﶒ"] = "مجخ"; e["ﶓ"] = "همج"; e["ﶔ"] = "همم"; e["ﶕ"] = "نحم"; e["ﶖ"] = "نحى"; e["ﶗ"] = "نجم"; e["ﶘ"] = "نجم"; e["ﶙ"] = "نجى"; e["ﶚ"] = "نمي"; e["ﶛ"] = "نمى"; e["ﶜ"] = "يمم"; e["ﶝ"] = "يمم"; e["ﶞ"] = "بخي"; e["ﶟ"] = "تجي"; e["ﶠ"] = "تجى"; e["ﶡ"] = "تخي"; e["ﶢ"] = "تخى"; e["ﶣ"] = "تمي"; e["ﶤ"] = "تمى"; e["ﶥ"] = "جمي"; e["ﶦ"] = "جحى"; e["ﶧ"] = "جمى"; e["ﶨ"] = "سخى"; e["ﶩ"] = "صحي"; e["ﶪ"] = "شحي"; e["ﶫ"] = "ضحي"; e["ﶬ"] = "لجي"; e["ﶭ"] = "لمي"; e["ﶮ"] = "يحي"; e["ﶯ"] = "يجي"; e["ﶰ"] = "يمي"; e["ﶱ"] = "ممي"; e["ﶲ"] = "قمي"; e["ﶳ"] = "نحي"; e["ﶴ"] = "قمح"; e["ﶵ"] = "لحم"; e["ﶶ"] = "عمي"; e["ﶷ"] = "كمي"; e["ﶸ"] = "نجح"; e["ﶹ"] = "مخي"; e["ﶺ"] = "لجم"; e["ﶻ"] = "كمم"; e["ﶼ"] = "لجم"; e["ﶽ"] = "نجح"; e["ﶾ"] = "جحي"; e["ﶿ"] = "حجي"; e["ﷀ"] = "مجي"; e["ﷁ"] = "فمي"; e["ﷂ"] = "بحي"; e["ﷃ"] = "كمم"; e["ﷄ"] = "عجم"; e["ﷅ"] = "صمم"; e["ﷆ"] = "سخي"; e["ﷇ"] = "نجي"; e["﹉"] = "‾"; e["﹊"] = "‾"; e["﹋"] = "‾"; e["﹌"] = "‾"; e["﹍"] = "_"; e["﹎"] = "_"; e["﹏"] = "_"; e["ﺀ"] = "ء"; e["ﺁ"] = "آ"; e["ﺂ"] = "آ"; e["ﺃ"] = "أ"; e["ﺄ"] = "أ"; e["ﺅ"] = "ؤ"; e["ﺆ"] = "ؤ"; e["ﺇ"] = "إ"; e["ﺈ"] = "إ"; e["ﺉ"] = "ئ"; e["ﺊ"] = "ئ"; e["ﺋ"] = "ئ"; e["ﺌ"] = "ئ"; e["ﺍ"] = "ا"; e["ﺎ"] = "ا"; e["ﺏ"] = "ب"; e["ﺐ"] = "ب"; e["ﺑ"] = "ب"; e["ﺒ"] = "ب"; e["ﺓ"] = "ة"; e["ﺔ"] = "ة"; e["ﺕ"] = "ت"; e["ﺖ"] = "ت"; e["ﺗ"] = "ت"; e["ﺘ"] = "ت"; e["ﺙ"] = "ث"; e["ﺚ"] = "ث"; e["ﺛ"] = "ث"; e["ﺜ"] = "ث"; e["ﺝ"] = "ج"; e["ﺞ"] = "ج"; e["ﺟ"] = "ج"; e["ﺠ"] = "ج"; e["ﺡ"] = "ح"; e["ﺢ"] = "ح"; e["ﺣ"] = "ح"; e["ﺤ"] = "ح"; e["ﺥ"] = "خ"; e["ﺦ"] = "خ"; e["ﺧ"] = "خ"; e["ﺨ"] = "خ"; e["ﺩ"] = "د"; e["ﺪ"] = "د"; e["ﺫ"] = "ذ"; e["ﺬ"] = "ذ"; e["ﺭ"] = "ر"; e["ﺮ"] = "ر"; e["ﺯ"] = "ز"; e["ﺰ"] = "ز"; e["ﺱ"] = "س"; e["ﺲ"] = "س"; e["ﺳ"] = "س"; e["ﺴ"] = "س"; e["ﺵ"] = "ش"; e["ﺶ"] = "ش"; e["ﺷ"] = "ش"; e["ﺸ"] = "ش"; e["ﺹ"] = "ص"; e["ﺺ"] = "ص"; e["ﺻ"] = "ص"; e["ﺼ"] = "ص"; e["ﺽ"] = "ض"; e["ﺾ"] = "ض"; e["ﺿ"] = "ض"; e["ﻀ"] = "ض"; e["ﻁ"] = "ط"; e["ﻂ"] = "ط"; e["ﻃ"] = "ط"; e["ﻄ"] = "ط"; e["ﻅ"] = "ظ"; e["ﻆ"] = "ظ"; e["ﻇ"] = "ظ"; e["ﻈ"] = "ظ"; e["ﻉ"] = "ع"; e["ﻊ"] = "ع"; e["ﻋ"] = "ع"; e["ﻌ"] = "ع"; e["ﻍ"] = "غ"; e["ﻎ"] = "غ"; e["ﻏ"] = "غ"; e["ﻐ"] = "غ"; e["ﻑ"] = "ف"; e["ﻒ"] = "ف"; e["ﻓ"] = "ف"; e["ﻔ"] = "ف"; e["ﻕ"] = "ق"; e["ﻖ"] = "ق"; e["ﻗ"] = "ق"; e["ﻘ"] = "ق"; e["ﻙ"] = "ك"; e["ﻚ"] = "ك"; e["ﻛ"] = "ك"; e["ﻜ"] = "ك"; e["ﻝ"] = "ل"; e["ﻞ"] = "ل"; e["ﻟ"] = "ل"; e["ﻠ"] = "ل"; e["ﻡ"] = "م"; e["ﻢ"] = "م"; e["ﻣ"] = "م"; e["ﻤ"] = "م"; e["ﻥ"] = "ن"; e["ﻦ"] = "ن"; e["ﻧ"] = "ن"; e["ﻨ"] = "ن"; e["ﻩ"] = "ه"; e["ﻪ"] = "ه"; e["ﻫ"] = "ه"; e["ﻬ"] = "ه"; e["ﻭ"] = "و"; e["ﻮ"] = "و"; e["ﻯ"] = "ى"; e["ﻰ"] = "ى"; e["ﻱ"] = "ي"; e["ﻲ"] = "ي"; e["ﻳ"] = "ي"; e["ﻴ"] = "ي"; e["ﻵ"] = "لآ"; e["ﻶ"] = "لآ"; e["ﻷ"] = "لأ"; e["ﻸ"] = "لأ"; e["ﻹ"] = "لإ"; e["ﻺ"] = "لإ"; e["ﻻ"] = "لا"; e["ﻼ"] = "لا" })); t.mapSpecialUnicodeValues = function (e) { return e >= 65520 && e <= 65535 ? 0 : e >= 62976 && e <= 63743 ? i()[e] || e : 173 === e ? 45 : e }; t.reverseIfRtl = function (e) { var t, a, r = e.length; if (r <= 1 || !(t = e.charCodeAt(0), a = n[13], t >= a.begin && t < a.end || t >= (a = n[11]).begin && t < a.end)) return e; for (var i = "", s = r - 1; s >= 0; s--)i += e[s]; return i }; t.getUnicodeRangeFor = function (e) { for (var t = 0, a = n.length; t < a; t++) { var r = n[t]; if (e >= r.begin && e < r.end) return t } return -1 }; t.getNormalizedUnicodes = s; t.getUnicodeForGlyph = function (e, t) { var a = t[e]; if (void 0 !== a) return a; if (!e) return -1; if ("u" === e[0]) { var r, i = e.length; if (7 === i && "n" === e[1] && "i" === e[2]) r = e.substring(3); else { if (!(i >= 5 && i <= 7)) return -1; r = e.substring(1) } if (r === r.toUpperCase() && (a = parseInt(r, 16)) >= 0) return a } return -1 } }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.FontRendererFactory = void 0; var r = a(2), i = a(28), n = a(31), s = a(30), o = a(11), c = function () { function e(e, t) { return e[t] << 24 | e[t + 1] << 16 | e[t + 2] << 8 | e[t + 3] } function t(e, t) { return e[t] << 8 | e[t + 1] } function a(e) { const t = e.length; let a = 32768; t < 1240 ? a = 107 : t < 33900 && (a = 1131); return a } function c(a, i, n) { var s, o, c, l = 1 === t(a, i + 2) ? e(a, i + 8) : e(a, i + 16), h = t(a, i + l); if (4 === h) { t(a, i + l + 2); var u = t(a, i + l + 6) >> 1; o = i + l + 14; s = []; for (c = 0; c < u; c++, o += 2)s[c] = { end: t(a, o) }; o += 2; for (c = 0; c < u; c++, o += 2)s[c].start = t(a, o); for (c = 0; c < u; c++, o += 2)s[c].idDelta = t(a, o); for (c = 0; c < u; c++, o += 2) { var d = t(a, o); if (0 !== d) { s[c].ids = []; for (var f = 0, g = s[c].end - s[c].start + 1; f < g; f++) { s[c].ids[f] = t(a, o + d); d += 2 } } } return s } if (12 === h) { e(a, i + l + 4); var m = e(a, i + l + 12); o = i + l + 16; s = []; for (c = 0; c < m; c++) { s.push({ start: e(a, o), end: e(a, o + 4), idDelta: e(a, o + 8) - e(a, o) }); o += 12 } return s } throw new r.FormatError(`unsupported cmap: ${h}`) } function l(e, t, a, r) { var n = new i.CFFParser(new o.Stream(e, t, a - t), {}, r).parse(); return { glyphs: n.charStrings.objects, subrs: n.topDict.privateDict && n.topDict.privateDict.subrsIndex && n.topDict.privateDict.subrsIndex.objects, gsubrs: n.globalSubrIndex && n.globalSubrIndex.objects, isCFFCIDFont: n.isCIDFont, fdSelect: n.fdSelect, fdArray: n.fdArray } } function h(e, t) { for (var a = t.codePointAt(0), r = 0, i = 0, n = e.length - 1; i < n;) { var s = i + n + 1 >> 1; a < e[s].start ? n = s - 1 : i = s } e[i].start <= a && a <= e[i].end && (r = e[i].idDelta + (e[i].ids ? e[i].ids[a - e[i].start] : a) & 65535); return { charCode: a, glyphId: r } } const u = []; class d { constructor(e) { this.constructor === d && (0, r.unreachable)("Cannot initialize CompiledFont."); this.fontMatrix = e; this.compiledGlyphs = Object.create(null); this.compiledCharCodeToGlyphId = Object.create(null) } getPathJs(e) { const t = h(this.cmap, e); let a = this.compiledGlyphs[t.glyphId]; if (!a) { a = this.compileGlyph(this.glyphs[t.glyphId], t.glyphId); this.compiledGlyphs[t.glyphId] = a } void 0 === this.compiledCharCodeToGlyphId[t.charCode] && (this.compiledCharCodeToGlyphId[t.charCode] = t.glyphId); return a } compileGlyph(e, t) { if (!e || 0 === e.length || 14 === e[0]) return u; let a = this.fontMatrix; if (this.isCFFCIDFont) { const e = this.fdSelect.getFDIndex(t); if (e >= 0 && e < this.fdArray.length) { a = this.fdArray[e].getByName("FontMatrix") || r.FONT_IDENTITY_MATRIX } else (0, r.warn)("Invalid fd index for glyph index.") } const i = []; i.push({ cmd: "save" }); i.push({ cmd: "transform", args: a.slice() }); i.push({ cmd: "scale", args: ["size", "-size"] }); this.compileGlyphImpl(e, i, t); i.push({ cmd: "restore" }); return i } compileGlyphImpl() { (0, r.unreachable)("Children classes should implement this.") } hasBuiltPath(e) { const t = h(this.cmap, e); return void 0 !== this.compiledGlyphs[t.glyphId] && void 0 !== this.compiledCharCodeToGlyphId[t.charCode] } } class f extends d { constructor(e, t, a) { super(a || [488e-6, 0, 0, 488e-6, 0, 0]); this.glyphs = e; this.cmap = t } compileGlyphImpl(e, t) { !function e(t, a, r) { function i(e, t) { a.push({ cmd: "moveTo", args: [e, t] }) } function n(e, t) { a.push({ cmd: "lineTo", args: [e, t] }) } function s(e, t, r, i) { a.push({ cmd: "quadraticCurveTo", args: [e, t, r, i] }) } var o, c = 0, l = (t[c] << 24 | t[c + 1] << 16) >> 16, h = 0, u = 0; c += 10; if (l < 0) do { o = t[c] << 8 | t[c + 1]; var d, f, g = t[c + 2] << 8 | t[c + 3]; c += 4; if (1 & o) { d = (t[c] << 24 | t[c + 1] << 16) >> 16; f = (t[c + 2] << 24 | t[c + 3] << 16) >> 16; c += 4 } else { d = t[c++]; f = t[c++] } if (2 & o) { h = d; u = f } else { h = 0; u = 0 } var m = 1, p = 1, b = 0, y = 0; if (8 & o) { m = p = (t[c] << 24 | t[c + 1] << 16) / 1073741824; c += 2 } else if (64 & o) { m = (t[c] << 24 | t[c + 1] << 16) / 1073741824; p = (t[c + 2] << 24 | t[c + 3] << 16) / 1073741824; c += 4 } else if (128 & o) { m = (t[c] << 24 | t[c + 1] << 16) / 1073741824; b = (t[c + 2] << 24 | t[c + 3] << 16) / 1073741824; y = (t[c + 4] << 24 | t[c + 5] << 16) / 1073741824; p = (t[c + 6] << 24 | t[c + 7] << 16) / 1073741824; c += 8 } var v = r.glyphs[g]; if (v) { a.push({ cmd: "save" }); a.push({ cmd: "transform", args: [m, b, y, p, h, u] }); e(v, a, r); a.push({ cmd: "restore" }) } } while (32 & o); else { var w, k, S = []; for (w = 0; w < l; w++) { S.push(t[c] << 8 | t[c + 1]); c += 2 } c += 2 + (t[c] << 8 | t[c + 1]); for (var C = S[S.length - 1] + 1, x = []; x.length < C;) { var A = 1; 8 & (o = t[c++]) && (A += t[c++]); for (; A-- > 0;)x.push({ flags: o }) } for (w = 0; w < C; w++) { switch (18 & x[w].flags) { case 0: h += (t[c] << 24 | t[c + 1] << 16) >> 16; c += 2; break; case 2: h -= t[c++]; break; case 18: h += t[c++] }x[w].x = h } for (w = 0; w < C; w++) { switch (36 & x[w].flags) { case 0: u += (t[c] << 24 | t[c + 1] << 16) >> 16; c += 2; break; case 4: u -= t[c++]; break; case 36: u += t[c++] }x[w].y = u } var I = 0; for (c = 0; c < l; c++) { var F = S[c], T = x.slice(I, F + 1); if (1 & T[0].flags) T.push(T[0]); else if (1 & T[T.length - 1].flags) T.unshift(T[T.length - 1]); else { var E = { flags: 1, x: (T[0].x + T[T.length - 1].x) / 2, y: (T[0].y + T[T.length - 1].y) / 2 }; T.unshift(E); T.push(E) } i(T[0].x, T[0].y); for (w = 1, k = T.length; w < k; w++)if (1 & T[w].flags) n(T[w].x, T[w].y); else if (1 & T[w + 1].flags) { s(T[w].x, T[w].y, T[w + 1].x, T[w + 1].y); w++ } else s(T[w].x, T[w].y, (T[w].x + T[w + 1].x) / 2, (T[w].y + T[w + 1].y) / 2); I = F + 1 } } }(e, t, this) } } class g extends d { constructor(e, t, r, i) { super(r || [.001, 0, 0, .001, 0, 0]); this.glyphs = e.glyphs; this.gsubrs = e.gsubrs || []; this.subrs = e.subrs || []; this.cmap = t; this.glyphNameMap = i || (0, n.getGlyphsUnicode)(); this.gsubrsBias = a(this.gsubrs); this.subrsBias = a(this.subrs); this.isCFFCIDFont = e.isCFFCIDFont; this.fdSelect = e.fdSelect; this.fdArray = e.fdArray } compileGlyphImpl(e, t, i) { !function e(t, i, n, o) { var c = [], l = 0, u = 0, d = 0; function f(e, t) { i.push({ cmd: "moveTo", args: [e, t] }) } function g(e, t) { i.push({ cmd: "lineTo", args: [e, t] }) } function m(e, t, a, r, n, s) { i.push({ cmd: "bezierCurveTo", args: [e, t, a, r, n, s] }) } !function t(p) { for (var b = 0; b < p.length;) { var y, v, w, k, S, C, x, A, I = !1, F = p[b++]; switch (F) { case 1: case 3: d += c.length >> 1; I = !0; break; case 4: u += c.pop(); f(l, u); I = !0; break; case 5: for (; c.length > 0;) { l += c.shift(); u += c.shift(); g(l, u) } break; case 6: for (; c.length > 0;) { g(l += c.shift(), u); if (0 === c.length) break; u += c.shift(); g(l, u) } break; case 7: for (; c.length > 0;) { u += c.shift(); g(l, u); if (0 === c.length) break; g(l += c.shift(), u) } break; case 8: for (; c.length > 0;) { y = l + c.shift(); w = u + c.shift(); v = y + c.shift(); k = w + c.shift(); l = v + c.shift(); u = k + c.shift(); m(y, w, v, k, l, u) } break; case 10: x = c.pop(); A = null; if (n.isCFFCIDFont) { const e = n.fdSelect.getFDIndex(o); if (e >= 0 && e < n.fdArray.length) { const t = n.fdArray[e]; let r; t.privateDict && t.privateDict.subrsIndex && (r = t.privateDict.subrsIndex.objects); r && (A = r[x += a(r)]) } else (0, r.warn)("Invalid fd index for glyph index.") } else A = n.subrs[x + n.subrsBias]; A && t(A); break; case 11: return; case 12: switch (F = p[b++]) { case 34: v = (y = l + c.shift()) + c.shift(); S = u + c.shift(); l = v + c.shift(); m(y, u, v, S, l, S); v = (y = l + c.shift()) + c.shift(); l = v + c.shift(); m(y, S, v, u, l, u); break; case 35: y = l + c.shift(); w = u + c.shift(); v = y + c.shift(); k = w + c.shift(); l = v + c.shift(); u = k + c.shift(); m(y, w, v, k, l, u); y = l + c.shift(); w = u + c.shift(); v = y + c.shift(); k = w + c.shift(); l = v + c.shift(); u = k + c.shift(); m(y, w, v, k, l, u); c.pop(); break; case 36: m(y = l + c.shift(), S = u + c.shift(), v = y + c.shift(), C = S + c.shift(), l = v + c.shift(), C); m(y = l + c.shift(), C, v = y + c.shift(), C + c.shift(), l = v + c.shift(), u); break; case 37: var T = l, E = u; y = l + c.shift(); w = u + c.shift(); v = y + c.shift(); k = w + c.shift(); l = v + c.shift(); u = k + c.shift(); m(y, w, v, k, l, u); y = l + c.shift(); w = u + c.shift(); v = y + c.shift(); k = w + c.shift(); l = v; u = k; Math.abs(l - T) > Math.abs(u - E) ? l += c.shift() : u += c.shift(); m(y, w, v, k, l, u); break; default: throw new r.FormatError(`unknown operator: 12 ${F}`) }break; case 14: if (c.length >= 4) { var O = c.pop(), P = c.pop(); u = c.pop(); l = c.pop(); i.push({ cmd: "save" }); i.push({ cmd: "translate", args: [l, u] }); var B = h(n.cmap, String.fromCharCode(n.glyphNameMap[s.StandardEncoding[O]])); e(n.glyphs[B.glyphId], i, n, B.glyphId); i.push({ cmd: "restore" }); B = h(n.cmap, String.fromCharCode(n.glyphNameMap[s.StandardEncoding[P]])); e(n.glyphs[B.glyphId], i, n, B.glyphId) } return; case 18: d += c.length >> 1; I = !0; break; case 19: case 20: b += (d += c.length >> 1) + 7 >> 3; I = !0; break; case 21: u += c.pop(); f(l += c.pop(), u); I = !0; break; case 22: f(l += c.pop(), u); I = !0; break; case 23: d += c.length >> 1; I = !0; break; case 24: for (; c.length > 2;) { y = l + c.shift(); w = u + c.shift(); v = y + c.shift(); k = w + c.shift(); l = v + c.shift(); u = k + c.shift(); m(y, w, v, k, l, u) } l += c.shift(); u += c.shift(); g(l, u); break; case 25: for (; c.length > 6;) { l += c.shift(); u += c.shift(); g(l, u) } y = l + c.shift(); w = u + c.shift(); v = y + c.shift(); k = w + c.shift(); l = v + c.shift(); u = k + c.shift(); m(y, w, v, k, l, u); break; case 26: c.length % 2 && (l += c.shift()); for (; c.length > 0;) { y = l; w = u + c.shift(); v = y + c.shift(); k = w + c.shift(); l = v; u = k + c.shift(); m(y, w, v, k, l, u) } break; case 27: c.length % 2 && (u += c.shift()); for (; c.length > 0;)m(y = l + c.shift(), w = u, v = y + c.shift(), k = w + c.shift(), l = v + c.shift(), u = k); break; case 28: c.push((p[b] << 24 | p[b + 1] << 16) >> 16); b += 2; break; case 29: x = c.pop() + n.gsubrsBias; (A = n.gsubrs[x]) && t(A); break; case 30: for (; c.length > 0;) { y = l; w = u + c.shift(); v = y + c.shift(); k = w + c.shift(); l = v + c.shift(); u = k + (1 === c.length ? c.shift() : 0); m(y, w, v, k, l, u); if (0 === c.length) break; y = l + c.shift(); w = u; v = y + c.shift(); k = w + c.shift(); u = k + c.shift(); m(y, w, v, k, l = v + (1 === c.length ? c.shift() : 0), u) } break; case 31: for (; c.length > 0;) { y = l + c.shift(); w = u; v = y + c.shift(); k = w + c.shift(); u = k + c.shift(); m(y, w, v, k, l = v + (1 === c.length ? c.shift() : 0), u); if (0 === c.length) break; y = l; w = u + c.shift(); v = y + c.shift(); k = w + c.shift(); l = v + c.shift(); u = k + (1 === c.length ? c.shift() : 0); m(y, w, v, k, l, u) } break; default: if (F < 32) throw new r.FormatError(`unknown operator: ${F}`); if (F < 247) c.push(F - 139); else if (F < 251) c.push(256 * (F - 247) + p[b++] + 108); else if (F < 255) c.push(256 * -(F - 251) - p[b++] - 108); else { c.push((p[b] << 24 | p[b + 1] << 16 | p[b + 2] << 8 | p[b + 3]) / 65536); b += 4 } }I && (c.length = 0) } }(t) }(e, t, this, i) } } return { create: function (a, i) { for (var n, s, o, h, u, d, m = new Uint8Array(a.data), p = t(m, 4), b = 0, y = 12; b < p; b++, y += 16) { var v = (0, r.bytesToString)(m.subarray(y, y + 4)), w = e(m, y + 8), k = e(m, y + 12); switch (v) { case "cmap": n = c(m, w); break; case "glyf": s = m.subarray(w, w + k); break; case "loca": o = m.subarray(w, w + k); break; case "head": d = t(m, w + 18); u = t(m, w + 50); break; case "CFF ": h = l(m, w, w + k, i) } } if (s) { var S = d ? [1 / d, 0, 0, 1 / d, 0, 0] : a.fontMatrix; return new f(function (e, t, a) { var r, i; if (a) { r = 4; i = function (e, t) { return e[t] << 24 | e[t + 1] << 16 | e[t + 2] << 8 | e[t + 3] } } else { r = 2; i = function (e, t) { return e[t] << 9 | e[t + 1] << 1 } } for (var n = [], s = i(t, 0), o = r; o < t.length; o += r) { var c = i(t, o); n.push(e.subarray(s, c)); s = c } return n }(s, o, u), n, S) } return new g(h, n, a.fontMatrix, a.glyphNameMap) } } }(); t.FontRendererFactory = c }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.Type1Parser = void 0; var r = a(30), i = a(7), n = a(11), s = a(2), o = function () { var e = [4], t = [5], a = [6], r = [7], i = [8], n = [12, 35], o = [14], c = [21], l = [22], h = [30], u = [31]; function d() { this.width = 0; this.lsb = 0; this.flexing = !1; this.output = []; this.stack = [] } d.prototype = { convert: function (d, f, g) { for (var m, p, b, y = d.length, v = !1, w = 0; w < y; w++) { var k = d[w]; if (k < 32) { 12 === k && (k = (k << 8) + d[++w]); switch (k) { case 1: case 3: this.stack = []; break; case 4: if (this.flexing) { if (this.stack.length < 1) { v = !0; break } var S = this.stack.pop(); this.stack.push(0, S); break } v = this.executeCommand(1, e); break; case 5: v = this.executeCommand(2, t); break; case 6: v = this.executeCommand(1, a); break; case 7: v = this.executeCommand(1, r); break; case 8: v = this.executeCommand(6, i); break; case 9: this.stack = []; break; case 10: if (this.stack.length < 1) { v = !0; break } if (!f[b = this.stack.pop()]) { v = !0; break } v = this.convert(f[b], f, g); break; case 11: return v; case 13: if (this.stack.length < 2) { v = !0; break } m = this.stack.pop(); p = this.stack.pop(); this.lsb = p; this.width = m; this.stack.push(m, p); v = this.executeCommand(2, l); break; case 14: this.output.push(o[0]); break; case 21: if (this.flexing) break; v = this.executeCommand(2, c); break; case 22: if (this.flexing) { this.stack.push(0); break } v = this.executeCommand(1, l); break; case 30: v = this.executeCommand(4, h); break; case 31: v = this.executeCommand(4, u); break; case 3072: case 3073: case 3074: this.stack = []; break; case 3078: if (g) { this.seac = this.stack.splice(-4, 4); v = this.executeCommand(0, o) } else v = this.executeCommand(4, o); break; case 3079: if (this.stack.length < 4) { v = !0; break } this.stack.pop(); m = this.stack.pop(); var C = this.stack.pop(); p = this.stack.pop(); this.lsb = p; this.width = m; this.stack.push(m, p, C); v = this.executeCommand(3, c); break; case 3084: if (this.stack.length < 2) { v = !0; break } var x = this.stack.pop(), A = this.stack.pop(); this.stack.push(A / x); break; case 3088: if (this.stack.length < 2) { v = !0; break } b = this.stack.pop(); var I = this.stack.pop(); if (0 === b && 3 === I) { var F = this.stack.splice(this.stack.length - 17, 17); this.stack.push(F[2] + F[0], F[3] + F[1], F[4], F[5], F[6], F[7], F[8], F[9], F[10], F[11], F[12], F[13], F[14]); v = this.executeCommand(13, n, !0); this.flexing = !1; this.stack.push(F[15], F[16]) } else 1 === b && 0 === I && (this.flexing = !0); break; case 3089: break; case 3105: this.stack = []; break; default: (0, s.warn)('Unknown type 1 charstring command of "' + k + '"') }if (v) break } else { k <= 246 ? k -= 139 : k = k <= 250 ? 256 * (k - 247) + d[++w] + 108 : k <= 254 ? -256 * (k - 251) - d[++w] - 108 : (255 & d[++w]) << 24 | (255 & d[++w]) << 16 | (255 & d[++w]) << 8 | (255 & d[++w]) << 0; this.stack.push(k) } } return v }, executeCommand(e, t, a) { var r = this.stack.length; if (e > r) return !0; for (var i = r - e, n = i; n < r; n++) { var s = this.stack[n]; if (Number.isInteger(s)) this.output.push(28, s >> 8 & 255, 255 & s); else { s = 65536 * s | 0; this.output.push(255, s >> 24 & 255, s >> 16 & 255, s >> 8 & 255, 255 & s) } } this.output.push.apply(this.output, t); a ? this.stack.splice(i, e) : this.stack.length = 0; return !1 } }; return d }(), c = function () { function e(e) { return e >= 48 && e <= 57 || e >= 65 && e <= 70 || e >= 97 && e <= 102 } function t(e, t, a) { if (a >= e.length) return new Uint8Array(0); var r, i, n = 0 | t; for (r = 0; r < a; r++)n = 52845 * (e[r] + n) + 22719 & 65535; var s = e.length - a, o = new Uint8Array(s); for (r = a, i = 0; i < s; r++, i++) { var c = e[r]; o[i] = c ^ n >> 8; n = 52845 * (c + n) + 22719 & 65535 } return o } function a(e) { return 47 === e || 91 === e || 93 === e || 123 === e || 125 === e || 40 === e || 41 === e } function s(a, r, i) { if (r) { var s = a.getBytes(), o = !(e(s[0]) && e(s[1]) && e(s[2]) && e(s[3])); a = new n.Stream(o ? t(s, 55665, 4) : function (t, a, r) { var i, n, s = 0 | a, o = t.length, c = new Uint8Array(o >>> 1); for (i = 0, n = 0; i < o; i++) { var l = t[i]; if (e(l)) { i++; for (var h; i < o && !e(h = t[i]);)i++; if (i < o) { var u = parseInt(String.fromCharCode(l, h), 16); c[n++] = u ^ s >> 8; s = 52845 * (u + s) + 22719 & 65535 } } } return Array.prototype.slice.call(c, r, n) }(s, 55665, 4)) } this.seacAnalysisEnabled = !!i; this.stream = a; this.nextChar() } s.prototype = { readNumberArray: function () { this.getToken(); for (var e = []; ;) { var t = this.getToken(); if (null === t || "]" === t || "}" === t) break; e.push(parseFloat(t || 0)) } return e }, readNumber: function () { var e = this.getToken(); return parseFloat(e || 0) }, readInt: function () { var e = this.getToken(); return 0 | parseInt(e || 0, 10) }, readBoolean: function () { return "true" === this.getToken() ? 1 : 0 }, nextChar: function () { return this.currentChar = this.stream.getByte() }, getToken: function () { for (var e = !1, t = this.currentChar; ;) { if (-1 === t) return null; if (e) 10 !== t && 13 !== t || (e = !1); else if (37 === t) e = !0; else if (!(0, i.isWhiteSpace)(t)) break; t = this.nextChar() } if (a(t)) { this.nextChar(); return String.fromCharCode(t) } var r = ""; do { r += String.fromCharCode(t); t = this.nextChar() } while (t >= 0 && !(0, i.isWhiteSpace)(t) && !a(t)); return r }, readCharStrings: function (e, a) { return -1 === a ? e : t(e, 4330, a) }, extractFontProgram: function (e) { var t = this.stream, a = [], r = [], i = Object.create(null); i.lenIV = 4; for (var n, s, c, l, h, u = { subrs: [], charstrings: [], properties: { privateData: i } }; null !== (n = this.getToken());)if ("/" === n) switch (n = this.getToken()) { case "CharStrings": this.getToken(); this.getToken(); this.getToken(); this.getToken(); for (; null !== (n = this.getToken()) && "end" !== n;)if ("/" === n) { var d = this.getToken(); s = this.readInt(); this.getToken(); c = s > 0 ? t.getBytes(s) : new Uint8Array(0); l = u.properties.privateData.lenIV; h = this.readCharStrings(c, l); this.nextChar(); "noaccess" === (n = this.getToken()) && this.getToken(); r.push({ glyph: d, encoded: h }) } break; case "Subrs": this.readInt(); this.getToken(); for (; "dup" === this.getToken();) { var f = this.readInt(); s = this.readInt(); this.getToken(); c = s > 0 ? t.getBytes(s) : new Uint8Array(0); l = u.properties.privateData.lenIV; h = this.readCharStrings(c, l); this.nextChar(); "noaccess" === (n = this.getToken()) && this.getToken(); a[f] = h } break; case "BlueValues": case "OtherBlues": case "FamilyBlues": case "FamilyOtherBlues": var g = this.readNumberArray(); g.length > 0 && g.length, 0; break; case "StemSnapH": case "StemSnapV": u.properties.privateData[n] = this.readNumberArray(); break; case "StdHW": case "StdVW": u.properties.privateData[n] = this.readNumberArray()[0]; break; case "BlueShift": case "lenIV": case "BlueFuzz": case "BlueScale": case "LanguageGroup": case "ExpansionFactor": u.properties.privateData[n] = this.readNumber(); break; case "ForceBold": u.properties.privateData[n] = this.readBoolean() }for (var m = 0; m < r.length; m++) { d = r[m].glyph; h = r[m].encoded; var p = new o, b = p.convert(h, a, this.seacAnalysisEnabled), y = p.output; b && (y = [14]); const t = { glyphName: d, charstring: y, width: p.width, lsb: p.lsb, seac: p.seac }; ".notdef" === d ? u.charstrings.unshift(t) : u.charstrings.push(t); if (e.builtInEncoding) { const t = e.builtInEncoding.indexOf(d); t > -1 && void 0 === e.widths[t] && t >= e.firstChar && t <= e.lastChar && (e.widths[t] = p.width) } } return u }, extractFontHeader: function (e) { for (var t; null !== (t = this.getToken());)if ("/" === t) switch (t = this.getToken()) { case "FontMatrix": var a = this.readNumberArray(); e.fontMatrix = a; break; case "Encoding": var i, n = this.getToken(); if (/^\d+$/.test(n)) { i = []; var s = 0 | parseInt(n, 10); this.getToken(); for (var o = 0; o < s; o++) { t = this.getToken(); for (; "dup" !== t && "def" !== t;)if (null === (t = this.getToken())) return; if ("def" === t) break; var c = this.readInt(); this.getToken(); var l = this.getToken(); i[c] = l; this.getToken() } } else i = (0, r.getEncoding)(n); e.builtInEncoding = i; break; case "FontBBox": var h = this.readNumberArray(); e.ascent = Math.max(h[3], h[1]); e.descent = Math.min(h[1], h[3]); e.ascentScaled = !0 } } }; return s }(); t.Type1Parser = c }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.getTilingPatternIR = function (e, t, a) { const i = t.getArray("Matrix"), n = r.Util.normalizeRect(t.getArray("BBox")), s = t.get("XStep"), o = t.get("YStep"), c = t.get("PaintType"), l = t.get("TilingType"); if (n[2] - n[0] == 0 || n[3] - n[1] == 0) throw new r.FormatError(`Invalid getTilingPatternIR /BBox array: [${n}].`); return ["TilingPattern", a, e, i, n, s, o, c, l] }; t.Pattern = void 0; var r = a(2), i = a(22), n = a(4), s = a(7), o = 2, c = 3, l = 4, h = 5, u = 6, d = 7, f = function () { function e() { (0, r.unreachable)("should not call Pattern constructor") } e.prototype = { getPattern: function (e) { (0, r.unreachable)(`Should not call Pattern.getStyle: ${e}`) } }; e.parseShading = function (e, t, a, i, f, m) { var p = (0, n.isStream)(e) ? e.dict : e, b = p.get("ShadingType"); try { switch (b) { case o: case c: return new g.RadialAxial(p, t, a, i, m); case l: case h: case u: case d: return new g.Mesh(e, t, a, i, m); default: throw new r.FormatError("Unsupported ShadingType: " + b) } } catch (e) { if (e instanceof s.MissingDataException) throw e; f.send("UnsupportedFeature", { featureId: r.UNSUPPORTED_FEATURES.shadingPattern }); (0, r.warn)(e); return new g.Dummy } }; return e }(); t.Pattern = f; var g = { SMALL_NUMBER: 1e-6 }; g.RadialAxial = function () { function e(e, t, a, n, s) { this.matrix = t; this.coordsArr = e.getArray("Coords"); this.shadingType = e.get("ShadingType"); this.type = "Pattern"; var o = e.get("ColorSpace", "CS"); o = i.ColorSpace.parse(o, a, n, s); this.cs = o; const l = e.getArray("BBox"); Array.isArray(l) && 4 === l.length ? this.bbox = r.Util.normalizeRect(l) : this.bbox = null; var h = 0, u = 1; if (e.has("Domain")) { var d = e.getArray("Domain"); h = d[0]; u = d[1] } var f = !1, m = !1; if (e.has("Extend")) { var p = e.getArray("Extend"); f = p[0]; m = p[1] } if (!(this.shadingType !== c || f && m)) { var b = this.coordsArr[0], y = this.coordsArr[1], v = this.coordsArr[2], w = this.coordsArr[3], k = this.coordsArr[4], S = this.coordsArr[5], C = Math.sqrt((b - w) * (b - w) + (y - k) * (y - k)); v <= S + C && S <= v + C && (0, r.warn)("Unsupported radial gradient.") } this.extendStart = f; this.extendEnd = m; var x = e.get("Function"), A = s.createFromArray(x); const I = (u - h) / 10; var F = this.colorStops = []; if (h >= u || I <= 0) (0, r.info)("Bad shading domain."); else { var T, E = new Float32Array(o.numComps), O = new Float32Array(1); for (let e = 0; e <= 10; e++) { O[0] = h + e * I; A(O, 0, E, 0); T = o.getRgb(E, 0); var P = r.Util.makeCssRgb(T[0], T[1], T[2]); F.push([e / 10, P]) } var B = "transparent"; if (e.has("Background")) { T = o.getRgb(e.get("Background"), 0); B = r.Util.makeCssRgb(T[0], T[1], T[2]) } if (!f) { F.unshift([0, B]); F[1][0] += g.SMALL_NUMBER } if (!m) { F[F.length - 1][0] -= g.SMALL_NUMBER; F.push([1, B]) } this.colorStops = F } } e.prototype = { getIR: function () { var e, t, a, i, n, s = this.coordsArr, l = this.shadingType; if (l === o) { t = [s[0], s[1]]; a = [s[2], s[3]]; i = null; n = null; e = "axial" } else if (l === c) { t = [s[0], s[1]]; a = [s[3], s[4]]; i = s[2]; n = s[5]; e = "radial" } else (0, r.unreachable)(`getPattern type unknown: ${l}`); var h = this.matrix; if (h) { t = r.Util.applyTransform(t, h); a = r.Util.applyTransform(a, h); if (l === c) { var u = r.Util.singularValueDecompose2dScale(h); i *= u[0]; n *= u[1] } } return ["RadialAxial", e, this.bbox, this.colorStops, t, a, i, n] } }; return e }(); g.Mesh = function () { function e(e, t) { this.stream = e; this.context = t; this.buffer = 0; this.bufferLength = 0; var a = t.numComps; this.tmpCompsBuf = new Float32Array(a); var r = t.colorSpace.numComps; this.tmpCsCompsBuf = t.colorFn ? new Float32Array(r) : this.tmpCompsBuf } e.prototype = { get hasData() { if (this.stream.end) return this.stream.pos < this.stream.end; if (this.bufferLength > 0) return !0; var e = this.stream.getByte(); if (e < 0) return !1; this.buffer = e; this.bufferLength = 8; return !0 }, readBits: function (e) { var t = this.buffer, a = this.bufferLength; if (32 === e) { if (0 === a) return (this.stream.getByte() << 24 | this.stream.getByte() << 16 | this.stream.getByte() << 8 | this.stream.getByte()) >>> 0; t = t << 24 | this.stream.getByte() << 16 | this.stream.getByte() << 8 | this.stream.getByte(); var r = this.stream.getByte(); this.buffer = r & (1 << a) - 1; return (t << 8 - a | (255 & r) >> a) >>> 0 } if (8 === e && 0 === a) return this.stream.getByte(); for (; a < e;) { t = t << 8 | this.stream.getByte(); a += 8 } a -= e; this.bufferLength = a; this.buffer = t & (1 << a) - 1; return t >> a }, align: function () { this.buffer = 0; this.bufferLength = 0 }, readFlag: function () { return this.readBits(this.context.bitsPerFlag) }, readCoordinate: function () { var e = this.context.bitsPerCoordinate, t = this.readBits(e), a = this.readBits(e), r = this.context.decode, i = e < 32 ? 1 / ((1 << e) - 1) : 2.3283064365386963e-10; return [t * i * (r[1] - r[0]) + r[0], a * i * (r[3] - r[2]) + r[2]] }, readComponents: function () { for (var e = this.context.numComps, t = this.context.bitsPerComponent, a = t < 32 ? 1 / ((1 << t) - 1) : 2.3283064365386963e-10, r = this.context.decode, i = this.tmpCompsBuf, n = 0, s = 4; n < e; n++, s += 2) { var o = this.readBits(t); i[n] = o * a * (r[s + 1] - r[s]) + r[s] } var c = this.tmpCsCompsBuf; this.context.colorFn && this.context.colorFn(i, 0, c, 0); return this.context.colorSpace.getRgb(c, 0) } }; var t, a = (t = [], function (e) { t[e] || (t[e] = function (e) { for (var t = [], a = 0; a <= e; a++) { var r = a / e, i = 1 - r; t.push(new Float32Array([i * i * i, 3 * r * i * i, 3 * r * r * i, r * r * r])) } return t }(e)); return t[e] }); function s(e, t) { var i = e.figures[t]; (0, r.assert)("patch" === i.type, "Unexpected patch mesh figure"); var n = e.coords, s = e.colors, o = i.coords, c = i.colors, l = Math.min(n[o[0]][0], n[o[3]][0], n[o[12]][0], n[o[15]][0]), h = Math.min(n[o[0]][1], n[o[3]][1], n[o[12]][1], n[o[15]][1]), u = Math.max(n[o[0]][0], n[o[3]][0], n[o[12]][0], n[o[15]][0]), d = Math.max(n[o[0]][1], n[o[3]][1], n[o[12]][1], n[o[15]][1]), f = Math.ceil(20 * (u - l) / (e.bounds[2] - e.bounds[0])); f = Math.max(3, Math.min(20, f)); var g = Math.ceil(20 * (d - h) / (e.bounds[3] - e.bounds[1])); g = Math.max(3, Math.min(20, g)); for (var m = f + 1, p = new Int32Array((g + 1) * m), b = new Int32Array((g + 1) * m), y = 0, v = new Uint8Array(3), w = new Uint8Array(3), k = s[c[0]], S = s[c[1]], C = s[c[2]], x = s[c[3]], A = a(g), I = a(f), F = 0; F <= g; F++) { v[0] = (k[0] * (g - F) + C[0] * F) / g | 0; v[1] = (k[1] * (g - F) + C[1] * F) / g | 0; v[2] = (k[2] * (g - F) + C[2] * F) / g | 0; w[0] = (S[0] * (g - F) + x[0] * F) / g | 0; w[1] = (S[1] * (g - F) + x[1] * F) / g | 0; w[2] = (S[2] * (g - F) + x[2] * F) / g | 0; for (var T = 0; T <= f; T++, y++)if (0 !== F && F !== g || 0 !== T && T !== f) { for (var E = 0, O = 0, P = 0, B = 0; B <= 3; B++)for (var D = 0; D <= 3; D++, P++) { var N = A[F][B] * I[T][D]; E += n[o[P]][0] * N; O += n[o[P]][1] * N } p[y] = n.length; n.push([E, O]); b[y] = s.length; var M = new Uint8Array(3); M[0] = (v[0] * (f - T) + w[0] * T) / f | 0; M[1] = (v[1] * (f - T) + w[1] * T) / f | 0; M[2] = (v[2] * (f - T) + w[2] * T) / f | 0; s.push(M) } } p[0] = o[0]; b[0] = c[0]; p[f] = o[3]; b[f] = c[1]; p[m * g] = o[12]; b[m * g] = c[2]; p[m * g + f] = o[15]; b[m * g + f] = c[3]; e.figures[t] = { type: "lattice", coords: p, colors: b, verticesPerRow: m } } function o(e) { for (var t = e.coords[0][0], a = e.coords[0][1], r = t, i = a, n = 1, s = e.coords.length; n < s; n++) { var o = e.coords[n][0], c = e.coords[n][1]; t = t > o ? o : t; a = a > c ? c : a; r = r < o ? o : r; i = i < c ? c : i } e.bounds = [t, a, r, i] } function c(t, a, c, f, g) { if (!(0, n.isStream)(t)) throw new r.FormatError("Mesh data is not a stream"); var m = t.dict; this.matrix = a; this.shadingType = m.get("ShadingType"); this.type = "Pattern"; const p = m.getArray("BBox"); Array.isArray(p) && 4 === p.length ? this.bbox = r.Util.normalizeRect(p) : this.bbox = null; var b = m.get("ColorSpace", "CS"); b = i.ColorSpace.parse(b, c, f, g); this.cs = b; this.background = m.has("Background") ? b.getRgb(m.get("Background"), 0) : null; var y = m.get("Function"), v = y ? g.createFromArray(y) : null; this.coords = []; this.colors = []; this.figures = []; var w = new e(t, { bitsPerCoordinate: m.get("BitsPerCoordinate"), bitsPerComponent: m.get("BitsPerComponent"), bitsPerFlag: m.get("BitsPerFlag"), decode: m.getArray("Decode"), colorFn: v, colorSpace: b, numComps: v ? 1 : b.numComps }), k = !1; switch (this.shadingType) { case l: !function (e, t) { for (var a = e.coords, i = e.colors, n = [], s = [], o = 0; t.hasData;) { var c = t.readFlag(), l = t.readCoordinate(), h = t.readComponents(); if (0 === o) { if (!(0 <= c && c <= 2)) throw new r.FormatError("Unknown type4 flag"); switch (c) { case 0: o = 3; break; case 1: s.push(s[s.length - 2], s[s.length - 1]); o = 1; break; case 2: s.push(s[s.length - 3], s[s.length - 1]); o = 1 }n.push(c) } s.push(a.length); a.push(l); i.push(h); o--; t.align() } e.figures.push({ type: "triangles", coords: new Int32Array(s), colors: new Int32Array(s) }) }(this, w); break; case h: var S = 0 | m.get("VerticesPerRow"); if (S < 2) throw new r.FormatError("Invalid VerticesPerRow"); !function (e, t, a) { for (var r = e.coords, i = e.colors, n = []; t.hasData;) { var s = t.readCoordinate(), o = t.readComponents(); n.push(r.length); r.push(s); i.push(o) } e.figures.push({ type: "lattice", coords: new Int32Array(n), colors: new Int32Array(n), verticesPerRow: a }) }(this, w, S); break; case u: !function (e, t) { for (var a = e.coords, i = e.colors, n = new Int32Array(16), s = new Int32Array(4); t.hasData;) { var o, c, l = t.readFlag(); if (!(0 <= l && l <= 3)) throw new r.FormatError("Unknown type6 flag"); var h = a.length; for (o = 0, c = 0 !== l ? 8 : 12; o < c; o++)a.push(t.readCoordinate()); var u, d, f, g, m = i.length; for (o = 0, c = 0 !== l ? 2 : 4; o < c; o++)i.push(t.readComponents()); switch (l) { case 0: n[12] = h + 3; n[13] = h + 4; n[14] = h + 5; n[15] = h + 6; n[8] = h + 2; n[11] = h + 7; n[4] = h + 1; n[7] = h + 8; n[0] = h; n[1] = h + 11; n[2] = h + 10; n[3] = h + 9; s[2] = m + 1; s[3] = m + 2; s[0] = m; s[1] = m + 3; break; case 1: u = n[12]; d = n[13]; f = n[14]; g = n[15]; n[12] = g; n[13] = h + 0; n[14] = h + 1; n[15] = h + 2; n[8] = f; n[11] = h + 3; n[4] = d; n[7] = h + 4; n[0] = u; n[1] = h + 7; n[2] = h + 6; n[3] = h + 5; u = s[2]; d = s[3]; s[2] = d; s[3] = m; s[0] = u; s[1] = m + 1; break; case 2: u = n[15]; d = n[11]; n[12] = n[3]; n[13] = h + 0; n[14] = h + 1; n[15] = h + 2; n[8] = n[7]; n[11] = h + 3; n[4] = d; n[7] = h + 4; n[0] = u; n[1] = h + 7; n[2] = h + 6; n[3] = h + 5; u = s[3]; s[2] = s[1]; s[3] = m; s[0] = u; s[1] = m + 1; break; case 3: n[12] = n[0]; n[13] = h + 0; n[14] = h + 1; n[15] = h + 2; n[8] = n[1]; n[11] = h + 3; n[4] = n[2]; n[7] = h + 4; n[0] = n[3]; n[1] = h + 7; n[2] = h + 6; n[3] = h + 5; s[2] = s[0]; s[3] = m; s[0] = s[1]; s[1] = m + 1 }n[5] = a.length; a.push([(-4 * a[n[0]][0] - a[n[15]][0] + 6 * (a[n[4]][0] + a[n[1]][0]) - 2 * (a[n[12]][0] + a[n[3]][0]) + 3 * (a[n[13]][0] + a[n[7]][0])) / 9, (-4 * a[n[0]][1] - a[n[15]][1] + 6 * (a[n[4]][1] + a[n[1]][1]) - 2 * (a[n[12]][1] + a[n[3]][1]) + 3 * (a[n[13]][1] + a[n[7]][1])) / 9]); n[6] = a.length; a.push([(-4 * a[n[3]][0] - a[n[12]][0] + 6 * (a[n[2]][0] + a[n[7]][0]) - 2 * (a[n[0]][0] + a[n[15]][0]) + 3 * (a[n[4]][0] + a[n[14]][0])) / 9, (-4 * a[n[3]][1] - a[n[12]][1] + 6 * (a[n[2]][1] + a[n[7]][1]) - 2 * (a[n[0]][1] + a[n[15]][1]) + 3 * (a[n[4]][1] + a[n[14]][1])) / 9]); n[9] = a.length; a.push([(-4 * a[n[12]][0] - a[n[3]][0] + 6 * (a[n[8]][0] + a[n[13]][0]) - 2 * (a[n[0]][0] + a[n[15]][0]) + 3 * (a[n[11]][0] + a[n[1]][0])) / 9, (-4 * a[n[12]][1] - a[n[3]][1] + 6 * (a[n[8]][1] + a[n[13]][1]) - 2 * (a[n[0]][1] + a[n[15]][1]) + 3 * (a[n[11]][1] + a[n[1]][1])) / 9]); n[10] = a.length; a.push([(-4 * a[n[15]][0] - a[n[0]][0] + 6 * (a[n[11]][0] + a[n[14]][0]) - 2 * (a[n[12]][0] + a[n[3]][0]) + 3 * (a[n[2]][0] + a[n[8]][0])) / 9, (-4 * a[n[15]][1] - a[n[0]][1] + 6 * (a[n[11]][1] + a[n[14]][1]) - 2 * (a[n[12]][1] + a[n[3]][1]) + 3 * (a[n[2]][1] + a[n[8]][1])) / 9]); e.figures.push({ type: "patch", coords: new Int32Array(n), colors: new Int32Array(s) }) } }(this, w); k = !0; break; case d: !function (e, t) { for (var a = e.coords, i = e.colors, n = new Int32Array(16), s = new Int32Array(4); t.hasData;) { var o, c, l = t.readFlag(); if (!(0 <= l && l <= 3)) throw new r.FormatError("Unknown type7 flag"); var h = a.length; for (o = 0, c = 0 !== l ? 12 : 16; o < c; o++)a.push(t.readCoordinate()); var u, d, f, g, m = i.length; for (o = 0, c = 0 !== l ? 2 : 4; o < c; o++)i.push(t.readComponents()); switch (l) { case 0: n[12] = h + 3; n[13] = h + 4; n[14] = h + 5; n[15] = h + 6; n[8] = h + 2; n[9] = h + 13; n[10] = h + 14; n[11] = h + 7; n[4] = h + 1; n[5] = h + 12; n[6] = h + 15; n[7] = h + 8; n[0] = h; n[1] = h + 11; n[2] = h + 10; n[3] = h + 9; s[2] = m + 1; s[3] = m + 2; s[0] = m; s[1] = m + 3; break; case 1: u = n[12]; d = n[13]; f = n[14]; g = n[15]; n[12] = g; n[13] = h + 0; n[14] = h + 1; n[15] = h + 2; n[8] = f; n[9] = h + 9; n[10] = h + 10; n[11] = h + 3; n[4] = d; n[5] = h + 8; n[6] = h + 11; n[7] = h + 4; n[0] = u; n[1] = h + 7; n[2] = h + 6; n[3] = h + 5; u = s[2]; d = s[3]; s[2] = d; s[3] = m; s[0] = u; s[1] = m + 1; break; case 2: u = n[15]; d = n[11]; n[12] = n[3]; n[13] = h + 0; n[14] = h + 1; n[15] = h + 2; n[8] = n[7]; n[9] = h + 9; n[10] = h + 10; n[11] = h + 3; n[4] = d; n[5] = h + 8; n[6] = h + 11; n[7] = h + 4; n[0] = u; n[1] = h + 7; n[2] = h + 6; n[3] = h + 5; u = s[3]; s[2] = s[1]; s[3] = m; s[0] = u; s[1] = m + 1; break; case 3: n[12] = n[0]; n[13] = h + 0; n[14] = h + 1; n[15] = h + 2; n[8] = n[1]; n[9] = h + 9; n[10] = h + 10; n[11] = h + 3; n[4] = n[2]; n[5] = h + 8; n[6] = h + 11; n[7] = h + 4; n[0] = n[3]; n[1] = h + 7; n[2] = h + 6; n[3] = h + 5; s[2] = s[0]; s[3] = m; s[0] = s[1]; s[1] = m + 1 }e.figures.push({ type: "patch", coords: new Int32Array(n), colors: new Int32Array(s) }) } }(this, w); k = !0; break; default: (0, r.unreachable)("Unsupported mesh type.") }if (k) { o(this); for (var C = 0, x = this.figures.length; C < x; C++)s(this, C) } o(this); !function (e) { var t, a, r, i, n = e.coords, s = new Float32Array(2 * n.length); for (t = 0, r = 0, a = n.length; t < a; t++) { var o = n[t]; s[r++] = o[0]; s[r++] = o[1] } e.coords = s; var c = e.colors, l = new Uint8Array(3 * c.length); for (t = 0, r = 0, a = c.length; t < a; t++) { var h = c[t]; l[r++] = h[0]; l[r++] = h[1]; l[r++] = h[2] } e.colors = l; var u = e.figures; for (t = 0, a = u.length; t < a; t++) { var d = u[t], f = d.coords, g = d.colors; for (r = 0, i = f.length; r < i; r++) { f[r] *= 2; g[r] *= 3 } } }(this) } c.prototype = { getIR: function () { return ["Mesh", this.shadingType, this.coords, this.colors, this.figures, this.bounds, this.matrix, this.bbox, this.background] } }; return c }(); g.Dummy = function () { function e() { this.type = "Pattern" } e.prototype = { getIR: function () { return ["Dummy"] } }; return e }() }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.bidi = function (e, t, a) { var g = !0, m = e.length; if (0 === m || a) return u(e, g, a); d.length = m; f.length = m; var p, b, y = 0; for (p = 0; p < m; ++p) { d[p] = e.charAt(p); var v = e.charCodeAt(p), w = "L"; v <= 255 ? w = i[v] : 1424 <= v && v <= 1524 ? w = "R" : 1536 <= v && v <= 1791 ? (w = n[255 & v]) || (0, r.warn)("Bidi: invalid Unicode character " + v.toString(16)) : 1792 <= v && v <= 2220 && (w = "AL"); "R" !== w && "AL" !== w && "AN" !== w || y++; f[p] = w } if (0 === y) return u(e, g = !0); if (-1 === t) if (y / m < .3) { g = !0; t = 0 } else { g = !1; t = 1 } var k = []; for (p = 0; p < m; ++p)k[p] = t; var S, C = s(t) ? "R" : "L", x = C, A = x, I = x; for (p = 0; p < m; ++p)"NSM" === f[p] ? f[p] = I : I = f[p]; I = x; for (p = 0; p < m; ++p)"EN" === (S = f[p]) ? f[p] = "AL" === I ? "AN" : "EN" : "R" !== S && "L" !== S && "AL" !== S || (I = S); for (p = 0; p < m; ++p)"AL" === (S = f[p]) && (f[p] = "R"); for (p = 1; p < m - 1; ++p) { "ES" === f[p] && "EN" === f[p - 1] && "EN" === f[p + 1] && (f[p] = "EN"); "CS" !== f[p] || "EN" !== f[p - 1] && "AN" !== f[p - 1] || f[p + 1] !== f[p - 1] || (f[p] = f[p - 1]) } for (p = 0; p < m; ++p)if ("EN" === f[p]) { var F; for (F = p - 1; F >= 0 && "ET" === f[F]; --F)f[F] = "EN"; for (F = p + 1; F < m && "ET" === f[F]; ++F)f[F] = "EN" } for (p = 0; p < m; ++p)"WS" !== (S = f[p]) && "ES" !== S && "ET" !== S && "CS" !== S || (f[p] = "ON"); I = x; for (p = 0; p < m; ++p)"EN" === (S = f[p]) ? f[p] = "L" === I ? "L" : "EN" : "R" !== S && "L" !== S || (I = S); for (p = 0; p < m; ++p)if ("ON" === f[p]) { var T = c(f, p + 1, "ON"), E = x; p > 0 && (E = f[p - 1]); var O = A; T + 1 < m && (O = f[T + 1]); "L" !== E && (E = "R"); "L" !== O && (O = "R"); E === O && l(f, p, T, E); p = T - 1 } for (p = 0; p < m; ++p)"ON" === f[p] && (f[p] = C); for (p = 0; p < m; ++p) { S = f[p]; o(k[p]) ? "R" === S ? k[p] += 1 : "AN" !== S && "EN" !== S || (k[p] += 2) : "L" !== S && "AN" !== S && "EN" !== S || (k[p] += 1) } var P, B = -1, D = 99; for (p = 0, b = k.length; p < b; ++p) { P = k[p]; B < P && (B = P); D > P && s(P) && (D = P) } for (P = B; P >= D; --P) { var N = -1; for (p = 0, b = k.length; p < b; ++p)if (k[p] < P) { if (N >= 0) { h(d, N, p); N = -1 } } else N < 0 && (N = p); N >= 0 && h(d, N, k.length) } for (p = 0, b = d.length; p < b; ++p) { var M = d[p]; "<" !== M && ">" !== M || (d[p] = "") } return u(d.join(""), g) }; var r = a(2), i = ["BN", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "S", "B", "S", "WS", "B", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "B", "B", "B", "S", "WS", "ON", "ON", "ET", "ET", "ET", "ON", "ON", "ON", "ON", "ON", "ES", "CS", "ES", "CS", "CS", "EN", "EN", "EN", "EN", "EN", "EN", "EN", "EN", "EN", "EN", "CS", "ON", "ON", "ON", "ON", "ON", "ON", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "ON", "ON", "ON", "ON", "ON", "ON", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "ON", "ON", "ON", "ON", "BN", "BN", "BN", "BN", "BN", "BN", "B", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "BN", "CS", "ON", "ET", "ET", "ET", "ET", "ON", "ON", "ON", "ON", "L", "ON", "ON", "BN", "ON", "ON", "ET", "ET", "EN", "EN", "ON", "L", "ON", "ON", "ON", "EN", "L", "ON", "ON", "ON", "ON", "ON", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "ON", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "L", "ON", "L", "L", "L", "L", "L", "L", "L", "L"], n = ["AN", "AN", "AN", "AN", "AN", "AN", "ON", "ON", "AL", "ET", "ET", "AL", "CS", "AL", "ON", "ON", "NSM", "NSM", "NSM", "NSM", "NSM", "NSM", "NSM", "NSM", "NSM", "NSM", "NSM", "AL", "AL", "", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "NSM", "NSM", "NSM", "NSM", "NSM", "NSM", "NSM", "NSM", "NSM", "NSM", "NSM", "NSM", "NSM", "NSM", "NSM", "NSM", "NSM", "NSM", "NSM", "NSM", "NSM", "AN", "AN", "AN", "AN", "AN", "AN", "AN", "AN", "AN", "AN", "ET", "AN", "AN", "AL", "AL", "AL", "NSM", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "AL", "NSM", "NSM", "NSM", "NSM", "NSM", "NSM", "NSM", "AN", "ON", "NSM", "NSM", "NSM", "NSM", "NSM", "NSM", "AL", "AL", "NSM", "NSM", "ON", "NSM", "NSM", "NSM", "NSM", "AL", "AL", "EN", "EN", "EN", "EN", "EN", "EN", "EN", "EN", "EN", "EN", "AL", "AL", "AL", "AL", "AL", "AL"]; function s(e) { return 0 != (1 & e) } function o(e) { return 0 == (1 & e) } function c(e, t, a) { for (var r = t, i = e.length; r < i; ++r)if (e[r] !== a) return r; return r } function l(e, t, a, r) { for (var i = t; i < a; ++i)e[i] = r } function h(e, t, a) { for (var r = t, i = a - 1; r < i; ++r, --i) { var n = e[r]; e[r] = e[i]; e[i] = n } } function u(e, t, a = !1) { let r = "ltr"; a ? r = "ttb" : t || (r = "rtl"); return { str: e, dir: r } } var d = [], f = [] }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.getMetrics = void 0; var r = a(7), i = (0, r.getLookupTableFactory)((function (e) { e.Courier = 600; e["Courier-Bold"] = 600; e["Courier-BoldOblique"] = 600; e["Courier-Oblique"] = 600; e.Helvetica = (0, r.getLookupTableFactory)((function (e) { e.space = 278; e.exclam = 278; e.quotedbl = 355; e.numbersign = 556; e.dollar = 556; e.percent = 889; e.ampersand = 667; e.quoteright = 222; e.parenleft = 333; e.parenright = 333; e.asterisk = 389; e.plus = 584; e.comma = 278; e.hyphen = 333; e.period = 278; e.slash = 278; e.zero = 556; e.one = 556; e.two = 556; e.three = 556; e.four = 556; e.five = 556; e.six = 556; e.seven = 556; e.eight = 556; e.nine = 556; e.colon = 278; e.semicolon = 278; e.less = 584; e.equal = 584; e.greater = 584; e.question = 556; e.at = 1015; e.A = 667; e.B = 667; e.C = 722; e.D = 722; e.E = 667; e.F = 611; e.G = 778; e.H = 722; e.I = 278; e.J = 500; e.K = 667; e.L = 556; e.M = 833; e.N = 722; e.O = 778; e.P = 667; e.Q = 778; e.R = 722; e.S = 667; e.T = 611; e.U = 722; e.V = 667; e.W = 944; e.X = 667; e.Y = 667; e.Z = 611; e.bracketleft = 278; e.backslash = 278; e.bracketright = 278; e.asciicircum = 469; e.underscore = 556; e.quoteleft = 222; e.a = 556; e.b = 556; e.c = 500; e.d = 556; e.e = 556; e.f = 278; e.g = 556; e.h = 556; e.i = 222; e.j = 222; e.k = 500; e.l = 222; e.m = 833; e.n = 556; e.o = 556; e.p = 556; e.q = 556; e.r = 333; e.s = 500; e.t = 278; e.u = 556; e.v = 500; e.w = 722; e.x = 500; e.y = 500; e.z = 500; e.braceleft = 334; e.bar = 260; e.braceright = 334; e.asciitilde = 584; e.exclamdown = 333; e.cent = 556; e.sterling = 556; e.fraction = 167; e.yen = 556; e.florin = 556; e.section = 556; e.currency = 556; e.quotesingle = 191; e.quotedblleft = 333; e.guillemotleft = 556; e.guilsinglleft = 333; e.guilsinglright = 333; e.fi = 500; e.fl = 500; e.endash = 556; e.dagger = 556; e.daggerdbl = 556; e.periodcentered = 278; e.paragraph = 537; e.bullet = 350; e.quotesinglbase = 222; e.quotedblbase = 333; e.quotedblright = 333; e.guillemotright = 556; e.ellipsis = 1e3; e.perthousand = 1e3; e.questiondown = 611; e.grave = 333; e.acute = 333; e.circumflex = 333; e.tilde = 333; e.macron = 333; e.breve = 333; e.dotaccent = 333; e.dieresis = 333; e.ring = 333; e.cedilla = 333; e.hungarumlaut = 333; e.ogonek = 333; e.caron = 333; e.emdash = 1e3; e.AE = 1e3; e.ordfeminine = 370; e.Lslash = 556; e.Oslash = 778; e.OE = 1e3; e.ordmasculine = 365; e.ae = 889; e.dotlessi = 278; e.lslash = 222; e.oslash = 611; e.oe = 944; e.germandbls = 611; e.Idieresis = 278; e.eacute = 556; e.abreve = 556; e.uhungarumlaut = 556; e.ecaron = 556; e.Ydieresis = 667; e.divide = 584; e.Yacute = 667; e.Acircumflex = 667; e.aacute = 556; e.Ucircumflex = 722; e.yacute = 500; e.scommaaccent = 500; e.ecircumflex = 556; e.Uring = 722; e.Udieresis = 722; e.aogonek = 556; e.Uacute = 722; e.uogonek = 556; e.Edieresis = 667; e.Dcroat = 722; e.commaaccent = 250; e.copyright = 737; e.Emacron = 667; e.ccaron = 500; e.aring = 556; e.Ncommaaccent = 722; e.lacute = 222; e.agrave = 556; e.Tcommaaccent = 611; e.Cacute = 722; e.atilde = 556; e.Edotaccent = 667; e.scaron = 500; e.scedilla = 500; e.iacute = 278; e.lozenge = 471; e.Rcaron = 722; e.Gcommaaccent = 778; e.ucircumflex = 556; e.acircumflex = 556; e.Amacron = 667; e.rcaron = 333; e.ccedilla = 500; e.Zdotaccent = 611; e.Thorn = 667; e.Omacron = 778; e.Racute = 722; e.Sacute = 667; e.dcaron = 643; e.Umacron = 722; e.uring = 556; e.threesuperior = 333; e.Ograve = 778; e.Agrave = 667; e.Abreve = 667; e.multiply = 584; e.uacute = 556; e.Tcaron = 611; e.partialdiff = 476; e.ydieresis = 500; e.Nacute = 722; e.icircumflex = 278; e.Ecircumflex = 667; e.adieresis = 556; e.edieresis = 556; e.cacute = 500; e.nacute = 556; e.umacron = 556; e.Ncaron = 722; e.Iacute = 278; e.plusminus = 584; e.brokenbar = 260; e.registered = 737; e.Gbreve = 778; e.Idotaccent = 278; e.summation = 600; e.Egrave = 667; e.racute = 333; e.omacron = 556; e.Zacute = 611; e.Zcaron = 611; e.greaterequal = 549; e.Eth = 722; e.Ccedilla = 722; e.lcommaaccent = 222; e.tcaron = 317; e.eogonek = 556; e.Uogonek = 722; e.Aacute = 667; e.Adieresis = 667; e.egrave = 556; e.zacute = 500; e.iogonek = 222; e.Oacute = 778; e.oacute = 556; e.amacron = 556; e.sacute = 500; e.idieresis = 278; e.Ocircumflex = 778; e.Ugrave = 722; e.Delta = 612; e.thorn = 556; e.twosuperior = 333; e.Odieresis = 778; e.mu = 556; e.igrave = 278; e.ohungarumlaut = 556; e.Eogonek = 667; e.dcroat = 556; e.threequarters = 834; e.Scedilla = 667; e.lcaron = 299; e.Kcommaaccent = 667; e.Lacute = 556; e.trademark = 1e3; e.edotaccent = 556; e.Igrave = 278; e.Imacron = 278; e.Lcaron = 556; e.onehalf = 834; e.lessequal = 549; e.ocircumflex = 556; e.ntilde = 556; e.Uhungarumlaut = 722; e.Eacute = 667; e.emacron = 556; e.gbreve = 556; e.onequarter = 834; e.Scaron = 667; e.Scommaaccent = 667; e.Ohungarumlaut = 778; e.degree = 400; e.ograve = 556; e.Ccaron = 722; e.ugrave = 556; e.radical = 453; e.Dcaron = 722; e.rcommaaccent = 333; e.Ntilde = 722; e.otilde = 556; e.Rcommaaccent = 722; e.Lcommaaccent = 556; e.Atilde = 667; e.Aogonek = 667; e.Aring = 667; e.Otilde = 778; e.zdotaccent = 500; e.Ecaron = 667; e.Iogonek = 278; e.kcommaaccent = 500; e.minus = 584; e.Icircumflex = 278; e.ncaron = 556; e.tcommaaccent = 278; e.logicalnot = 584; e.odieresis = 556; e.udieresis = 556; e.notequal = 549; e.gcommaaccent = 556; e.eth = 556; e.zcaron = 500; e.ncommaaccent = 556; e.onesuperior = 333; e.imacron = 278; e.Euro = 556 })); e["Helvetica-Bold"] = (0, r.getLookupTableFactory)((function (e) { e.space = 278; e.exclam = 333; e.quotedbl = 474; e.numbersign = 556; e.dollar = 556; e.percent = 889; e.ampersand = 722; e.quoteright = 278; e.parenleft = 333; e.parenright = 333; e.asterisk = 389; e.plus = 584; e.comma = 278; e.hyphen = 333; e.period = 278; e.slash = 278; e.zero = 556; e.one = 556; e.two = 556; e.three = 556; e.four = 556; e.five = 556; e.six = 556; e.seven = 556; e.eight = 556; e.nine = 556; e.colon = 333; e.semicolon = 333; e.less = 584; e.equal = 584; e.greater = 584; e.question = 611; e.at = 975; e.A = 722; e.B = 722; e.C = 722; e.D = 722; e.E = 667; e.F = 611; e.G = 778; e.H = 722; e.I = 278; e.J = 556; e.K = 722; e.L = 611; e.M = 833; e.N = 722; e.O = 778; e.P = 667; e.Q = 778; e.R = 722; e.S = 667; e.T = 611; e.U = 722; e.V = 667; e.W = 944; e.X = 667; e.Y = 667; e.Z = 611; e.bracketleft = 333; e.backslash = 278; e.bracketright = 333; e.asciicircum = 584; e.underscore = 556; e.quoteleft = 278; e.a = 556; e.b = 611; e.c = 556; e.d = 611; e.e = 556; e.f = 333; e.g = 611; e.h = 611; e.i = 278; e.j = 278; e.k = 556; e.l = 278; e.m = 889; e.n = 611; e.o = 611; e.p = 611; e.q = 611; e.r = 389; e.s = 556; e.t = 333; e.u = 611; e.v = 556; e.w = 778; e.x = 556; e.y = 556; e.z = 500; e.braceleft = 389; e.bar = 280; e.braceright = 389; e.asciitilde = 584; e.exclamdown = 333; e.cent = 556; e.sterling = 556; e.fraction = 167; e.yen = 556; e.florin = 556; e.section = 556; e.currency = 556; e.quotesingle = 238; e.quotedblleft = 500; e.guillemotleft = 556; e.guilsinglleft = 333; e.guilsinglright = 333; e.fi = 611; e.fl = 611; e.endash = 556; e.dagger = 556; e.daggerdbl = 556; e.periodcentered = 278; e.paragraph = 556; e.bullet = 350; e.quotesinglbase = 278; e.quotedblbase = 500; e.quotedblright = 500; e.guillemotright = 556; e.ellipsis = 1e3; e.perthousand = 1e3; e.questiondown = 611; e.grave = 333; e.acute = 333; e.circumflex = 333; e.tilde = 333; e.macron = 333; e.breve = 333; e.dotaccent = 333; e.dieresis = 333; e.ring = 333; e.cedilla = 333; e.hungarumlaut = 333; e.ogonek = 333; e.caron = 333; e.emdash = 1e3; e.AE = 1e3; e.ordfeminine = 370; e.Lslash = 611; e.Oslash = 778; e.OE = 1e3; e.ordmasculine = 365; e.ae = 889; e.dotlessi = 278; e.lslash = 278; e.oslash = 611; e.oe = 944; e.germandbls = 611; e.Idieresis = 278; e.eacute = 556; e.abreve = 556; e.uhungarumlaut = 611; e.ecaron = 556; e.Ydieresis = 667; e.divide = 584; e.Yacute = 667; e.Acircumflex = 722; e.aacute = 556; e.Ucircumflex = 722; e.yacute = 556; e.scommaaccent = 556; e.ecircumflex = 556; e.Uring = 722; e.Udieresis = 722; e.aogonek = 556; e.Uacute = 722; e.uogonek = 611; e.Edieresis = 667; e.Dcroat = 722; e.commaaccent = 250; e.copyright = 737; e.Emacron = 667; e.ccaron = 556; e.aring = 556; e.Ncommaaccent = 722; e.lacute = 278; e.agrave = 556; e.Tcommaaccent = 611; e.Cacute = 722; e.atilde = 556; e.Edotaccent = 667; e.scaron = 556; e.scedilla = 556; e.iacute = 278; e.lozenge = 494; e.Rcaron = 722; e.Gcommaaccent = 778; e.ucircumflex = 611; e.acircumflex = 556; e.Amacron = 722; e.rcaron = 389; e.ccedilla = 556; e.Zdotaccent = 611; e.Thorn = 667; e.Omacron = 778; e.Racute = 722; e.Sacute = 667; e.dcaron = 743; e.Umacron = 722; e.uring = 611; e.threesuperior = 333; e.Ograve = 778; e.Agrave = 722; e.Abreve = 722; e.multiply = 584; e.uacute = 611; e.Tcaron = 611; e.partialdiff = 494; e.ydieresis = 556; e.Nacute = 722; e.icircumflex = 278; e.Ecircumflex = 667; e.adieresis = 556; e.edieresis = 556; e.cacute = 556; e.nacute = 611; e.umacron = 611; e.Ncaron = 722; e.Iacute = 278; e.plusminus = 584; e.brokenbar = 280; e.registered = 737; e.Gbreve = 778; e.Idotaccent = 278; e.summation = 600; e.Egrave = 667; e.racute = 389; e.omacron = 611; e.Zacute = 611; e.Zcaron = 611; e.greaterequal = 549; e.Eth = 722; e.Ccedilla = 722; e.lcommaaccent = 278; e.tcaron = 389; e.eogonek = 556; e.Uogonek = 722; e.Aacute = 722; e.Adieresis = 722; e.egrave = 556; e.zacute = 500; e.iogonek = 278; e.Oacute = 778; e.oacute = 611; e.amacron = 556; e.sacute = 556; e.idieresis = 278; e.Ocircumflex = 778; e.Ugrave = 722; e.Delta = 612; e.thorn = 611; e.twosuperior = 333; e.Odieresis = 778; e.mu = 611; e.igrave = 278; e.ohungarumlaut = 611; e.Eogonek = 667; e.dcroat = 611; e.threequarters = 834; e.Scedilla = 667; e.lcaron = 400; e.Kcommaaccent = 722; e.Lacute = 611; e.trademark = 1e3; e.edotaccent = 556; e.Igrave = 278; e.Imacron = 278; e.Lcaron = 611; e.onehalf = 834; e.lessequal = 549; e.ocircumflex = 611; e.ntilde = 611; e.Uhungarumlaut = 722; e.Eacute = 667; e.emacron = 556; e.gbreve = 611; e.onequarter = 834; e.Scaron = 667; e.Scommaaccent = 667; e.Ohungarumlaut = 778; e.degree = 400; e.ograve = 611; e.Ccaron = 722; e.ugrave = 611; e.radical = 549; e.Dcaron = 722; e.rcommaaccent = 389; e.Ntilde = 722; e.otilde = 611; e.Rcommaaccent = 722; e.Lcommaaccent = 611; e.Atilde = 722; e.Aogonek = 722; e.Aring = 722; e.Otilde = 778; e.zdotaccent = 500; e.Ecaron = 667; e.Iogonek = 278; e.kcommaaccent = 556; e.minus = 584; e.Icircumflex = 278; e.ncaron = 611; e.tcommaaccent = 333; e.logicalnot = 584; e.odieresis = 611; e.udieresis = 611; e.notequal = 549; e.gcommaaccent = 611; e.eth = 611; e.zcaron = 500; e.ncommaaccent = 611; e.onesuperior = 333; e.imacron = 278; e.Euro = 556 })); e["Helvetica-BoldOblique"] = (0, r.getLookupTableFactory)((function (e) { e.space = 278; e.exclam = 333; e.quotedbl = 474; e.numbersign = 556; e.dollar = 556; e.percent = 889; e.ampersand = 722; e.quoteright = 278; e.parenleft = 333; e.parenright = 333; e.asterisk = 389; e.plus = 584; e.comma = 278; e.hyphen = 333; e.period = 278; e.slash = 278; e.zero = 556; e.one = 556; e.two = 556; e.three = 556; e.four = 556; e.five = 556; e.six = 556; e.seven = 556; e.eight = 556; e.nine = 556; e.colon = 333; e.semicolon = 333; e.less = 584; e.equal = 584; e.greater = 584; e.question = 611; e.at = 975; e.A = 722; e.B = 722; e.C = 722; e.D = 722; e.E = 667; e.F = 611; e.G = 778; e.H = 722; e.I = 278; e.J = 556; e.K = 722; e.L = 611; e.M = 833; e.N = 722; e.O = 778; e.P = 667; e.Q = 778; e.R = 722; e.S = 667; e.T = 611; e.U = 722; e.V = 667; e.W = 944; e.X = 667; e.Y = 667; e.Z = 611; e.bracketleft = 333; e.backslash = 278; e.bracketright = 333; e.asciicircum = 584; e.underscore = 556; e.quoteleft = 278; e.a = 556; e.b = 611; e.c = 556; e.d = 611; e.e = 556; e.f = 333; e.g = 611; e.h = 611; e.i = 278; e.j = 278; e.k = 556; e.l = 278; e.m = 889; e.n = 611; e.o = 611; e.p = 611; e.q = 611; e.r = 389; e.s = 556; e.t = 333; e.u = 611; e.v = 556; e.w = 778; e.x = 556; e.y = 556; e.z = 500; e.braceleft = 389; e.bar = 280; e.braceright = 389; e.asciitilde = 584; e.exclamdown = 333; e.cent = 556; e.sterling = 556; e.fraction = 167; e.yen = 556; e.florin = 556; e.section = 556; e.currency = 556; e.quotesingle = 238; e.quotedblleft = 500; e.guillemotleft = 556; e.guilsinglleft = 333; e.guilsinglright = 333; e.fi = 611; e.fl = 611; e.endash = 556; e.dagger = 556; e.daggerdbl = 556; e.periodcentered = 278; e.paragraph = 556; e.bullet = 350; e.quotesinglbase = 278; e.quotedblbase = 500; e.quotedblright = 500; e.guillemotright = 556; e.ellipsis = 1e3; e.perthousand = 1e3; e.questiondown = 611; e.grave = 333; e.acute = 333; e.circumflex = 333; e.tilde = 333; e.macron = 333; e.breve = 333; e.dotaccent = 333; e.dieresis = 333; e.ring = 333; e.cedilla = 333; e.hungarumlaut = 333; e.ogonek = 333; e.caron = 333; e.emdash = 1e3; e.AE = 1e3; e.ordfeminine = 370; e.Lslash = 611; e.Oslash = 778; e.OE = 1e3; e.ordmasculine = 365; e.ae = 889; e.dotlessi = 278; e.lslash = 278; e.oslash = 611; e.oe = 944; e.germandbls = 611; e.Idieresis = 278; e.eacute = 556; e.abreve = 556; e.uhungarumlaut = 611; e.ecaron = 556; e.Ydieresis = 667; e.divide = 584; e.Yacute = 667; e.Acircumflex = 722; e.aacute = 556; e.Ucircumflex = 722; e.yacute = 556; e.scommaaccent = 556; e.ecircumflex = 556; e.Uring = 722; e.Udieresis = 722; e.aogonek = 556; e.Uacute = 722; e.uogonek = 611; e.Edieresis = 667; e.Dcroat = 722; e.commaaccent = 250; e.copyright = 737; e.Emacron = 667; e.ccaron = 556; e.aring = 556; e.Ncommaaccent = 722; e.lacute = 278; e.agrave = 556; e.Tcommaaccent = 611; e.Cacute = 722; e.atilde = 556; e.Edotaccent = 667; e.scaron = 556; e.scedilla = 556; e.iacute = 278; e.lozenge = 494; e.Rcaron = 722; e.Gcommaaccent = 778; e.ucircumflex = 611; e.acircumflex = 556; e.Amacron = 722; e.rcaron = 389; e.ccedilla = 556; e.Zdotaccent = 611; e.Thorn = 667; e.Omacron = 778; e.Racute = 722; e.Sacute = 667; e.dcaron = 743; e.Umacron = 722; e.uring = 611; e.threesuperior = 333; e.Ograve = 778; e.Agrave = 722; e.Abreve = 722; e.multiply = 584; e.uacute = 611; e.Tcaron = 611; e.partialdiff = 494; e.ydieresis = 556; e.Nacute = 722; e.icircumflex = 278; e.Ecircumflex = 667; e.adieresis = 556; e.edieresis = 556; e.cacute = 556; e.nacute = 611; e.umacron = 611; e.Ncaron = 722; e.Iacute = 278; e.plusminus = 584; e.brokenbar = 280; e.registered = 737; e.Gbreve = 778; e.Idotaccent = 278; e.summation = 600; e.Egrave = 667; e.racute = 389; e.omacron = 611; e.Zacute = 611; e.Zcaron = 611; e.greaterequal = 549; e.Eth = 722; e.Ccedilla = 722; e.lcommaaccent = 278; e.tcaron = 389; e.eogonek = 556; e.Uogonek = 722; e.Aacute = 722; e.Adieresis = 722; e.egrave = 556; e.zacute = 500; e.iogonek = 278; e.Oacute = 778; e.oacute = 611; e.amacron = 556; e.sacute = 556; e.idieresis = 278; e.Ocircumflex = 778; e.Ugrave = 722; e.Delta = 612; e.thorn = 611; e.twosuperior = 333; e.Odieresis = 778; e.mu = 611; e.igrave = 278; e.ohungarumlaut = 611; e.Eogonek = 667; e.dcroat = 611; e.threequarters = 834; e.Scedilla = 667; e.lcaron = 400; e.Kcommaaccent = 722; e.Lacute = 611; e.trademark = 1e3; e.edotaccent = 556; e.Igrave = 278; e.Imacron = 278; e.Lcaron = 611; e.onehalf = 834; e.lessequal = 549; e.ocircumflex = 611; e.ntilde = 611; e.Uhungarumlaut = 722; e.Eacute = 667; e.emacron = 556; e.gbreve = 611; e.onequarter = 834; e.Scaron = 667; e.Scommaaccent = 667; e.Ohungarumlaut = 778; e.degree = 400; e.ograve = 611; e.Ccaron = 722; e.ugrave = 611; e.radical = 549; e.Dcaron = 722; e.rcommaaccent = 389; e.Ntilde = 722; e.otilde = 611; e.Rcommaaccent = 722; e.Lcommaaccent = 611; e.Atilde = 722; e.Aogonek = 722; e.Aring = 722; e.Otilde = 778; e.zdotaccent = 500; e.Ecaron = 667; e.Iogonek = 278; e.kcommaaccent = 556; e.minus = 584; e.Icircumflex = 278; e.ncaron = 611; e.tcommaaccent = 333; e.logicalnot = 584; e.odieresis = 611; e.udieresis = 611; e.notequal = 549; e.gcommaaccent = 611; e.eth = 611; e.zcaron = 500; e.ncommaaccent = 611; e.onesuperior = 333; e.imacron = 278; e.Euro = 556 })); e["Helvetica-Oblique"] = (0, r.getLookupTableFactory)((function (e) { e.space = 278; e.exclam = 278; e.quotedbl = 355; e.numbersign = 556; e.dollar = 556; e.percent = 889; e.ampersand = 667; e.quoteright = 222; e.parenleft = 333; e.parenright = 333; e.asterisk = 389; e.plus = 584; e.comma = 278; e.hyphen = 333; e.period = 278; e.slash = 278; e.zero = 556; e.one = 556; e.two = 556; e.three = 556; e.four = 556; e.five = 556; e.six = 556; e.seven = 556; e.eight = 556; e.nine = 556; e.colon = 278; e.semicolon = 278; e.less = 584; e.equal = 584; e.greater = 584; e.question = 556; e.at = 1015; e.A = 667; e.B = 667; e.C = 722; e.D = 722; e.E = 667; e.F = 611; e.G = 778; e.H = 722; e.I = 278; e.J = 500; e.K = 667; e.L = 556; e.M = 833; e.N = 722; e.O = 778; e.P = 667; e.Q = 778; e.R = 722; e.S = 667; e.T = 611; e.U = 722; e.V = 667; e.W = 944; e.X = 667; e.Y = 667; e.Z = 611; e.bracketleft = 278; e.backslash = 278; e.bracketright = 278; e.asciicircum = 469; e.underscore = 556; e.quoteleft = 222; e.a = 556; e.b = 556; e.c = 500; e.d = 556; e.e = 556; e.f = 278; e.g = 556; e.h = 556; e.i = 222; e.j = 222; e.k = 500; e.l = 222; e.m = 833; e.n = 556; e.o = 556; e.p = 556; e.q = 556; e.r = 333; e.s = 500; e.t = 278; e.u = 556; e.v = 500; e.w = 722; e.x = 500; e.y = 500; e.z = 500; e.braceleft = 334; e.bar = 260; e.braceright = 334; e.asciitilde = 584; e.exclamdown = 333; e.cent = 556; e.sterling = 556; e.fraction = 167; e.yen = 556; e.florin = 556; e.section = 556; e.currency = 556; e.quotesingle = 191; e.quotedblleft = 333; e.guillemotleft = 556; e.guilsinglleft = 333; e.guilsinglright = 333; e.fi = 500; e.fl = 500; e.endash = 556; e.dagger = 556; e.daggerdbl = 556; e.periodcentered = 278; e.paragraph = 537; e.bullet = 350; e.quotesinglbase = 222; e.quotedblbase = 333; e.quotedblright = 333; e.guillemotright = 556; e.ellipsis = 1e3; e.perthousand = 1e3; e.questiondown = 611; e.grave = 333; e.acute = 333; e.circumflex = 333; e.tilde = 333; e.macron = 333; e.breve = 333; e.dotaccent = 333; e.dieresis = 333; e.ring = 333; e.cedilla = 333; e.hungarumlaut = 333; e.ogonek = 333; e.caron = 333; e.emdash = 1e3; e.AE = 1e3; e.ordfeminine = 370; e.Lslash = 556; e.Oslash = 778; e.OE = 1e3; e.ordmasculine = 365; e.ae = 889; e.dotlessi = 278; e.lslash = 222; e.oslash = 611; e.oe = 944; e.germandbls = 611; e.Idieresis = 278; e.eacute = 556; e.abreve = 556; e.uhungarumlaut = 556; e.ecaron = 556; e.Ydieresis = 667; e.divide = 584; e.Yacute = 667; e.Acircumflex = 667; e.aacute = 556; e.Ucircumflex = 722; e.yacute = 500; e.scommaaccent = 500; e.ecircumflex = 556; e.Uring = 722; e.Udieresis = 722; e.aogonek = 556; e.Uacute = 722; e.uogonek = 556; e.Edieresis = 667; e.Dcroat = 722; e.commaaccent = 250; e.copyright = 737; e.Emacron = 667; e.ccaron = 500; e.aring = 556; e.Ncommaaccent = 722; e.lacute = 222; e.agrave = 556; e.Tcommaaccent = 611; e.Cacute = 722; e.atilde = 556; e.Edotaccent = 667; e.scaron = 500; e.scedilla = 500; e.iacute = 278; e.lozenge = 471; e.Rcaron = 722; e.Gcommaaccent = 778; e.ucircumflex = 556; e.acircumflex = 556; e.Amacron = 667; e.rcaron = 333; e.ccedilla = 500; e.Zdotaccent = 611; e.Thorn = 667; e.Omacron = 778; e.Racute = 722; e.Sacute = 667; e.dcaron = 643; e.Umacron = 722; e.uring = 556; e.threesuperior = 333; e.Ograve = 778; e.Agrave = 667; e.Abreve = 667; e.multiply = 584; e.uacute = 556; e.Tcaron = 611; e.partialdiff = 476; e.ydieresis = 500; e.Nacute = 722; e.icircumflex = 278; e.Ecircumflex = 667; e.adieresis = 556; e.edieresis = 556; e.cacute = 500; e.nacute = 556; e.umacron = 556; e.Ncaron = 722; e.Iacute = 278; e.plusminus = 584; e.brokenbar = 260; e.registered = 737; e.Gbreve = 778; e.Idotaccent = 278; e.summation = 600; e.Egrave = 667; e.racute = 333; e.omacron = 556; e.Zacute = 611; e.Zcaron = 611; e.greaterequal = 549; e.Eth = 722; e.Ccedilla = 722; e.lcommaaccent = 222; e.tcaron = 317; e.eogonek = 556; e.Uogonek = 722; e.Aacute = 667; e.Adieresis = 667; e.egrave = 556; e.zacute = 500; e.iogonek = 222; e.Oacute = 778; e.oacute = 556; e.amacron = 556; e.sacute = 500; e.idieresis = 278; e.Ocircumflex = 778; e.Ugrave = 722; e.Delta = 612; e.thorn = 556; e.twosuperior = 333; e.Odieresis = 778; e.mu = 556; e.igrave = 278; e.ohungarumlaut = 556; e.Eogonek = 667; e.dcroat = 556; e.threequarters = 834; e.Scedilla = 667; e.lcaron = 299; e.Kcommaaccent = 667; e.Lacute = 556; e.trademark = 1e3; e.edotaccent = 556; e.Igrave = 278; e.Imacron = 278; e.Lcaron = 556; e.onehalf = 834; e.lessequal = 549; e.ocircumflex = 556; e.ntilde = 556; e.Uhungarumlaut = 722; e.Eacute = 667; e.emacron = 556; e.gbreve = 556; e.onequarter = 834; e.Scaron = 667; e.Scommaaccent = 667; e.Ohungarumlaut = 778; e.degree = 400; e.ograve = 556; e.Ccaron = 722; e.ugrave = 556; e.radical = 453; e.Dcaron = 722; e.rcommaaccent = 333; e.Ntilde = 722; e.otilde = 556; e.Rcommaaccent = 722; e.Lcommaaccent = 556; e.Atilde = 667; e.Aogonek = 667; e.Aring = 667; e.Otilde = 778; e.zdotaccent = 500; e.Ecaron = 667; e.Iogonek = 278; e.kcommaaccent = 500; e.minus = 584; e.Icircumflex = 278; e.ncaron = 556; e.tcommaaccent = 278; e.logicalnot = 584; e.odieresis = 556; e.udieresis = 556; e.notequal = 549; e.gcommaaccent = 556; e.eth = 556; e.zcaron = 500; e.ncommaaccent = 556; e.onesuperior = 333; e.imacron = 278; e.Euro = 556 })); e.Symbol = (0, r.getLookupTableFactory)((function (e) { e.space = 250; e.exclam = 333; e.universal = 713; e.numbersign = 500; e.existential = 549; e.percent = 833; e.ampersand = 778; e.suchthat = 439; e.parenleft = 333; e.parenright = 333; e.asteriskmath = 500; e.plus = 549; e.comma = 250; e.minus = 549; e.period = 250; e.slash = 278; e.zero = 500; e.one = 500; e.two = 500; e.three = 500; e.four = 500; e.five = 500; e.six = 500; e.seven = 500; e.eight = 500; e.nine = 500; e.colon = 278; e.semicolon = 278; e.less = 549; e.equal = 549; e.greater = 549; e.question = 444; e.congruent = 549; e.Alpha = 722; e.Beta = 667; e.Chi = 722; e.Delta = 612; e.Epsilon = 611; e.Phi = 763; e.Gamma = 603; e.Eta = 722; e.Iota = 333; e.theta1 = 631; e.Kappa = 722; e.Lambda = 686; e.Mu = 889; e.Nu = 722; e.Omicron = 722; e.Pi = 768; e.Theta = 741; e.Rho = 556; e.Sigma = 592; e.Tau = 611; e.Upsilon = 690; e.sigma1 = 439; e.Omega = 768; e.Xi = 645; e.Psi = 795; e.Zeta = 611; e.bracketleft = 333; e.therefore = 863; e.bracketright = 333; e.perpendicular = 658; e.underscore = 500; e.radicalex = 500; e.alpha = 631; e.beta = 549; e.chi = 549; e.delta = 494; e.epsilon = 439; e.phi = 521; e.gamma = 411; e.eta = 603; e.iota = 329; e.phi1 = 603; e.kappa = 549; e.lambda = 549; e.mu = 576; e.nu = 521; e.omicron = 549; e.pi = 549; e.theta = 521; e.rho = 549; e.sigma = 603; e.tau = 439; e.upsilon = 576; e.omega1 = 713; e.omega = 686; e.xi = 493; e.psi = 686; e.zeta = 494; e.braceleft = 480; e.bar = 200; e.braceright = 480; e.similar = 549; e.Euro = 750; e.Upsilon1 = 620; e.minute = 247; e.lessequal = 549; e.fraction = 167; e.infinity = 713; e.florin = 500; e.club = 753; e.diamond = 753; e.heart = 753; e.spade = 753; e.arrowboth = 1042; e.arrowleft = 987; e.arrowup = 603; e.arrowright = 987; e.arrowdown = 603; e.degree = 400; e.plusminus = 549; e.second = 411; e.greaterequal = 549; e.multiply = 549; e.proportional = 713; e.partialdiff = 494; e.bullet = 460; e.divide = 549; e.notequal = 549; e.equivalence = 549; e.approxequal = 549; e.ellipsis = 1e3; e.arrowvertex = 603; e.arrowhorizex = 1e3; e.carriagereturn = 658; e.aleph = 823; e.Ifraktur = 686; e.Rfraktur = 795; e.weierstrass = 987; e.circlemultiply = 768; e.circleplus = 768; e.emptyset = 823; e.intersection = 768; e.union = 768; e.propersuperset = 713; e.reflexsuperset = 713; e.notsubset = 713; e.propersubset = 713; e.reflexsubset = 713; e.element = 713; e.notelement = 713; e.angle = 768; e.gradient = 713; e.registerserif = 790; e.copyrightserif = 790; e.trademarkserif = 890; e.product = 823; e.radical = 549; e.dotmath = 250; e.logicalnot = 713; e.logicaland = 603; e.logicalor = 603; e.arrowdblboth = 1042; e.arrowdblleft = 987; e.arrowdblup = 603; e.arrowdblright = 987; e.arrowdbldown = 603; e.lozenge = 494; e.angleleft = 329; e.registersans = 790; e.copyrightsans = 790; e.trademarksans = 786; e.summation = 713; e.parenlefttp = 384; e.parenleftex = 384; e.parenleftbt = 384; e.bracketlefttp = 384; e.bracketleftex = 384; e.bracketleftbt = 384; e.bracelefttp = 494; e.braceleftmid = 494; e.braceleftbt = 494; e.braceex = 494; e.angleright = 329; e.integral = 274; e.integraltp = 686; e.integralex = 686; e.integralbt = 686; e.parenrighttp = 384; e.parenrightex = 384; e.parenrightbt = 384; e.bracketrighttp = 384; e.bracketrightex = 384; e.bracketrightbt = 384; e.bracerighttp = 494; e.bracerightmid = 494; e.bracerightbt = 494; e.apple = 790 })); e["Times-Roman"] = (0, r.getLookupTableFactory)((function (e) { e.space = 250; e.exclam = 333; e.quotedbl = 408; e.numbersign = 500; e.dollar = 500; e.percent = 833; e.ampersand = 778; e.quoteright = 333; e.parenleft = 333; e.parenright = 333; e.asterisk = 500; e.plus = 564; e.comma = 250; e.hyphen = 333; e.period = 250; e.slash = 278; e.zero = 500; e.one = 500; e.two = 500; e.three = 500; e.four = 500; e.five = 500; e.six = 500; e.seven = 500; e.eight = 500; e.nine = 500; e.colon = 278; e.semicolon = 278; e.less = 564; e.equal = 564; e.greater = 564; e.question = 444; e.at = 921; e.A = 722; e.B = 667; e.C = 667; e.D = 722; e.E = 611; e.F = 556; e.G = 722; e.H = 722; e.I = 333; e.J = 389; e.K = 722; e.L = 611; e.M = 889; e.N = 722; e.O = 722; e.P = 556; e.Q = 722; e.R = 667; e.S = 556; e.T = 611; e.U = 722; e.V = 722; e.W = 944; e.X = 722; e.Y = 722; e.Z = 611; e.bracketleft = 333; e.backslash = 278; e.bracketright = 333; e.asciicircum = 469; e.underscore = 500; e.quoteleft = 333; e.a = 444; e.b = 500; e.c = 444; e.d = 500; e.e = 444; e.f = 333; e.g = 500; e.h = 500; e.i = 278; e.j = 278; e.k = 500; e.l = 278; e.m = 778; e.n = 500; e.o = 500; e.p = 500; e.q = 500; e.r = 333; e.s = 389; e.t = 278; e.u = 500; e.v = 500; e.w = 722; e.x = 500; e.y = 500; e.z = 444; e.braceleft = 480; e.bar = 200; e.braceright = 480; e.asciitilde = 541; e.exclamdown = 333; e.cent = 500; e.sterling = 500; e.fraction = 167; e.yen = 500; e.florin = 500; e.section = 500; e.currency = 500; e.quotesingle = 180; e.quotedblleft = 444; e.guillemotleft = 500; e.guilsinglleft = 333; e.guilsinglright = 333; e.fi = 556; e.fl = 556; e.endash = 500; e.dagger = 500; e.daggerdbl = 500; e.periodcentered = 250; e.paragraph = 453; e.bullet = 350; e.quotesinglbase = 333; e.quotedblbase = 444; e.quotedblright = 444; e.guillemotright = 500; e.ellipsis = 1e3; e.perthousand = 1e3; e.questiondown = 444; e.grave = 333; e.acute = 333; e.circumflex = 333; e.tilde = 333; e.macron = 333; e.breve = 333; e.dotaccent = 333; e.dieresis = 333; e.ring = 333; e.cedilla = 333; e.hungarumlaut = 333; e.ogonek = 333; e.caron = 333; e.emdash = 1e3; e.AE = 889; e.ordfeminine = 276; e.Lslash = 611; e.Oslash = 722; e.OE = 889; e.ordmasculine = 310; e.ae = 667; e.dotlessi = 278; e.lslash = 278; e.oslash = 500; e.oe = 722; e.germandbls = 500; e.Idieresis = 333; e.eacute = 444; e.abreve = 444; e.uhungarumlaut = 500; e.ecaron = 444; e.Ydieresis = 722; e.divide = 564; e.Yacute = 722; e.Acircumflex = 722; e.aacute = 444; e.Ucircumflex = 722; e.yacute = 500; e.scommaaccent = 389; e.ecircumflex = 444; e.Uring = 722; e.Udieresis = 722; e.aogonek = 444; e.Uacute = 722; e.uogonek = 500; e.Edieresis = 611; e.Dcroat = 722; e.commaaccent = 250; e.copyright = 760; e.Emacron = 611; e.ccaron = 444; e.aring = 444; e.Ncommaaccent = 722; e.lacute = 278; e.agrave = 444; e.Tcommaaccent = 611; e.Cacute = 667; e.atilde = 444; e.Edotaccent = 611; e.scaron = 389; e.scedilla = 389; e.iacute = 278; e.lozenge = 471; e.Rcaron = 667; e.Gcommaaccent = 722; e.ucircumflex = 500; e.acircumflex = 444; e.Amacron = 722; e.rcaron = 333; e.ccedilla = 444; e.Zdotaccent = 611; e.Thorn = 556; e.Omacron = 722; e.Racute = 667; e.Sacute = 556; e.dcaron = 588; e.Umacron = 722; e.uring = 500; e.threesuperior = 300; e.Ograve = 722; e.Agrave = 722; e.Abreve = 722; e.multiply = 564; e.uacute = 500; e.Tcaron = 611; e.partialdiff = 476; e.ydieresis = 500; e.Nacute = 722; e.icircumflex = 278; e.Ecircumflex = 611; e.adieresis = 444; e.edieresis = 444; e.cacute = 444; e.nacute = 500; e.umacron = 500; e.Ncaron = 722; e.Iacute = 333; e.plusminus = 564; e.brokenbar = 200; e.registered = 760; e.Gbreve = 722; e.Idotaccent = 333; e.summation = 600; e.Egrave = 611; e.racute = 333; e.omacron = 500; e.Zacute = 611; e.Zcaron = 611; e.greaterequal = 549; e.Eth = 722; e.Ccedilla = 667; e.lcommaaccent = 278; e.tcaron = 326; e.eogonek = 444; e.Uogonek = 722; e.Aacute = 722; e.Adieresis = 722; e.egrave = 444; e.zacute = 444; e.iogonek = 278; e.Oacute = 722; e.oacute = 500; e.amacron = 444; e.sacute = 389; e.idieresis = 278; e.Ocircumflex = 722; e.Ugrave = 722; e.Delta = 612; e.thorn = 500; e.twosuperior = 300; e.Odieresis = 722; e.mu = 500; e.igrave = 278; e.ohungarumlaut = 500; e.Eogonek = 611; e.dcroat = 500; e.threequarters = 750; e.Scedilla = 556; e.lcaron = 344; e.Kcommaaccent = 722; e.Lacute = 611; e.trademark = 980; e.edotaccent = 444; e.Igrave = 333; e.Imacron = 333; e.Lcaron = 611; e.onehalf = 750; e.lessequal = 549; e.ocircumflex = 500; e.ntilde = 500; e.Uhungarumlaut = 722; e.Eacute = 611; e.emacron = 444; e.gbreve = 500; e.onequarter = 750; e.Scaron = 556; e.Scommaaccent = 556; e.Ohungarumlaut = 722; e.degree = 400; e.ograve = 500; e.Ccaron = 667; e.ugrave = 500; e.radical = 453; e.Dcaron = 722; e.rcommaaccent = 333; e.Ntilde = 722; e.otilde = 500; e.Rcommaaccent = 667; e.Lcommaaccent = 611; e.Atilde = 722; e.Aogonek = 722; e.Aring = 722; e.Otilde = 722; e.zdotaccent = 444; e.Ecaron = 611; e.Iogonek = 333; e.kcommaaccent = 500; e.minus = 564; e.Icircumflex = 333; e.ncaron = 500; e.tcommaaccent = 278; e.logicalnot = 564; e.odieresis = 500; e.udieresis = 500; e.notequal = 549; e.gcommaaccent = 500; e.eth = 500; e.zcaron = 444; e.ncommaaccent = 500; e.onesuperior = 300; e.imacron = 278; e.Euro = 500 })); e["Times-Bold"] = (0, r.getLookupTableFactory)((function (e) { e.space = 250; e.exclam = 333; e.quotedbl = 555; e.numbersign = 500; e.dollar = 500; e.percent = 1e3; e.ampersand = 833; e.quoteright = 333; e.parenleft = 333; e.parenright = 333; e.asterisk = 500; e.plus = 570; e.comma = 250; e.hyphen = 333; e.period = 250; e.slash = 278; e.zero = 500; e.one = 500; e.two = 500; e.three = 500; e.four = 500; e.five = 500; e.six = 500; e.seven = 500; e.eight = 500; e.nine = 500; e.colon = 333; e.semicolon = 333; e.less = 570; e.equal = 570; e.greater = 570; e.question = 500; e.at = 930; e.A = 722; e.B = 667; e.C = 722; e.D = 722; e.E = 667; e.F = 611; e.G = 778; e.H = 778; e.I = 389; e.J = 500; e.K = 778; e.L = 667; e.M = 944; e.N = 722; e.O = 778; e.P = 611; e.Q = 778; e.R = 722; e.S = 556; e.T = 667; e.U = 722; e.V = 722; e.W = 1e3; e.X = 722; e.Y = 722; e.Z = 667; e.bracketleft = 333; e.backslash = 278; e.bracketright = 333; e.asciicircum = 581; e.underscore = 500; e.quoteleft = 333; e.a = 500; e.b = 556; e.c = 444; e.d = 556; e.e = 444; e.f = 333; e.g = 500; e.h = 556; e.i = 278; e.j = 333; e.k = 556; e.l = 278; e.m = 833; e.n = 556; e.o = 500; e.p = 556; e.q = 556; e.r = 444; e.s = 389; e.t = 333; e.u = 556; e.v = 500; e.w = 722; e.x = 500; e.y = 500; e.z = 444; e.braceleft = 394; e.bar = 220; e.braceright = 394; e.asciitilde = 520; e.exclamdown = 333; e.cent = 500; e.sterling = 500; e.fraction = 167; e.yen = 500; e.florin = 500; e.section = 500; e.currency = 500; e.quotesingle = 278; e.quotedblleft = 500; e.guillemotleft = 500; e.guilsinglleft = 333; e.guilsinglright = 333; e.fi = 556; e.fl = 556; e.endash = 500; e.dagger = 500; e.daggerdbl = 500; e.periodcentered = 250; e.paragraph = 540; e.bullet = 350; e.quotesinglbase = 333; e.quotedblbase = 500; e.quotedblright = 500; e.guillemotright = 500; e.ellipsis = 1e3; e.perthousand = 1e3; e.questiondown = 500; e.grave = 333; e.acute = 333; e.circumflex = 333; e.tilde = 333; e.macron = 333; e.breve = 333; e.dotaccent = 333; e.dieresis = 333; e.ring = 333; e.cedilla = 333; e.hungarumlaut = 333; e.ogonek = 333; e.caron = 333; e.emdash = 1e3; e.AE = 1e3; e.ordfeminine = 300; e.Lslash = 667; e.Oslash = 778; e.OE = 1e3; e.ordmasculine = 330; e.ae = 722; e.dotlessi = 278; e.lslash = 278; e.oslash = 500; e.oe = 722; e.germandbls = 556; e.Idieresis = 389; e.eacute = 444; e.abreve = 500; e.uhungarumlaut = 556; e.ecaron = 444; e.Ydieresis = 722; e.divide = 570; e.Yacute = 722; e.Acircumflex = 722; e.aacute = 500; e.Ucircumflex = 722; e.yacute = 500; e.scommaaccent = 389; e.ecircumflex = 444; e.Uring = 722; e.Udieresis = 722; e.aogonek = 500; e.Uacute = 722; e.uogonek = 556; e.Edieresis = 667; e.Dcroat = 722; e.commaaccent = 250; e.copyright = 747; e.Emacron = 667; e.ccaron = 444; e.aring = 500; e.Ncommaaccent = 722; e.lacute = 278; e.agrave = 500; e.Tcommaaccent = 667; e.Cacute = 722; e.atilde = 500; e.Edotaccent = 667; e.scaron = 389; e.scedilla = 389; e.iacute = 278; e.lozenge = 494; e.Rcaron = 722; e.Gcommaaccent = 778; e.ucircumflex = 556; e.acircumflex = 500; e.Amacron = 722; e.rcaron = 444; e.ccedilla = 444; e.Zdotaccent = 667; e.Thorn = 611; e.Omacron = 778; e.Racute = 722; e.Sacute = 556; e.dcaron = 672; e.Umacron = 722; e.uring = 556; e.threesuperior = 300; e.Ograve = 778; e.Agrave = 722; e.Abreve = 722; e.multiply = 570; e.uacute = 556; e.Tcaron = 667; e.partialdiff = 494; e.ydieresis = 500; e.Nacute = 722; e.icircumflex = 278; e.Ecircumflex = 667; e.adieresis = 500; e.edieresis = 444; e.cacute = 444; e.nacute = 556; e.umacron = 556; e.Ncaron = 722; e.Iacute = 389; e.plusminus = 570; e.brokenbar = 220; e.registered = 747; e.Gbreve = 778; e.Idotaccent = 389; e.summation = 600; e.Egrave = 667; e.racute = 444; e.omacron = 500; e.Zacute = 667; e.Zcaron = 667; e.greaterequal = 549; e.Eth = 722; e.Ccedilla = 722; e.lcommaaccent = 278; e.tcaron = 416; e.eogonek = 444; e.Uogonek = 722; e.Aacute = 722; e.Adieresis = 722; e.egrave = 444; e.zacute = 444; e.iogonek = 278; e.Oacute = 778; e.oacute = 500; e.amacron = 500; e.sacute = 389; e.idieresis = 278; e.Ocircumflex = 778; e.Ugrave = 722; e.Delta = 612; e.thorn = 556; e.twosuperior = 300; e.Odieresis = 778; e.mu = 556; e.igrave = 278; e.ohungarumlaut = 500; e.Eogonek = 667; e.dcroat = 556; e.threequarters = 750; e.Scedilla = 556; e.lcaron = 394; e.Kcommaaccent = 778; e.Lacute = 667; e.trademark = 1e3; e.edotaccent = 444; e.Igrave = 389; e.Imacron = 389; e.Lcaron = 667; e.onehalf = 750; e.lessequal = 549; e.ocircumflex = 500; e.ntilde = 556; e.Uhungarumlaut = 722; e.Eacute = 667; e.emacron = 444; e.gbreve = 500; e.onequarter = 750; e.Scaron = 556; e.Scommaaccent = 556; e.Ohungarumlaut = 778; e.degree = 400; e.ograve = 500; e.Ccaron = 722; e.ugrave = 556; e.radical = 549; e.Dcaron = 722; e.rcommaaccent = 444; e.Ntilde = 722; e.otilde = 500; e.Rcommaaccent = 722; e.Lcommaaccent = 667; e.Atilde = 722; e.Aogonek = 722; e.Aring = 722; e.Otilde = 778; e.zdotaccent = 444; e.Ecaron = 667; e.Iogonek = 389; e.kcommaaccent = 556; e.minus = 570; e.Icircumflex = 389; e.ncaron = 556; e.tcommaaccent = 333; e.logicalnot = 570; e.odieresis = 500; e.udieresis = 556; e.notequal = 549; e.gcommaaccent = 500; e.eth = 500; e.zcaron = 444; e.ncommaaccent = 556; e.onesuperior = 300; e.imacron = 278; e.Euro = 500 })); e["Times-BoldItalic"] = (0, r.getLookupTableFactory)((function (e) { e.space = 250; e.exclam = 389; e.quotedbl = 555; e.numbersign = 500; e.dollar = 500; e.percent = 833; e.ampersand = 778; e.quoteright = 333; e.parenleft = 333; e.parenright = 333; e.asterisk = 500; e.plus = 570; e.comma = 250; e.hyphen = 333; e.period = 250; e.slash = 278; e.zero = 500; e.one = 500; e.two = 500; e.three = 500; e.four = 500; e.five = 500; e.six = 500; e.seven = 500; e.eight = 500; e.nine = 500; e.colon = 333; e.semicolon = 333; e.less = 570; e.equal = 570; e.greater = 570; e.question = 500; e.at = 832; e.A = 667; e.B = 667; e.C = 667; e.D = 722; e.E = 667; e.F = 667; e.G = 722; e.H = 778; e.I = 389; e.J = 500; e.K = 667; e.L = 611; e.M = 889; e.N = 722; e.O = 722; e.P = 611; e.Q = 722; e.R = 667; e.S = 556; e.T = 611; e.U = 722; e.V = 667; e.W = 889; e.X = 667; e.Y = 611; e.Z = 611; e.bracketleft = 333; e.backslash = 278; e.bracketright = 333; e.asciicircum = 570; e.underscore = 500; e.quoteleft = 333; e.a = 500; e.b = 500; e.c = 444; e.d = 500; e.e = 444; e.f = 333; e.g = 500; e.h = 556; e.i = 278; e.j = 278; e.k = 500; e.l = 278; e.m = 778; e.n = 556; e.o = 500; e.p = 500; e.q = 500; e.r = 389; e.s = 389; e.t = 278; e.u = 556; e.v = 444; e.w = 667; e.x = 500; e.y = 444; e.z = 389; e.braceleft = 348; e.bar = 220; e.braceright = 348; e.asciitilde = 570; e.exclamdown = 389; e.cent = 500; e.sterling = 500; e.fraction = 167; e.yen = 500; e.florin = 500; e.section = 500; e.currency = 500; e.quotesingle = 278; e.quotedblleft = 500; e.guillemotleft = 500; e.guilsinglleft = 333; e.guilsinglright = 333; e.fi = 556; e.fl = 556; e.endash = 500; e.dagger = 500; e.daggerdbl = 500; e.periodcentered = 250; e.paragraph = 500; e.bullet = 350; e.quotesinglbase = 333; e.quotedblbase = 500; e.quotedblright = 500; e.guillemotright = 500; e.ellipsis = 1e3; e.perthousand = 1e3; e.questiondown = 500; e.grave = 333; e.acute = 333; e.circumflex = 333; e.tilde = 333; e.macron = 333; e.breve = 333; e.dotaccent = 333; e.dieresis = 333; e.ring = 333; e.cedilla = 333; e.hungarumlaut = 333; e.ogonek = 333; e.caron = 333; e.emdash = 1e3; e.AE = 944; e.ordfeminine = 266; e.Lslash = 611; e.Oslash = 722; e.OE = 944; e.ordmasculine = 300; e.ae = 722; e.dotlessi = 278; e.lslash = 278; e.oslash = 500; e.oe = 722; e.germandbls = 500; e.Idieresis = 389; e.eacute = 444; e.abreve = 500; e.uhungarumlaut = 556; e.ecaron = 444; e.Ydieresis = 611; e.divide = 570; e.Yacute = 611; e.Acircumflex = 667; e.aacute = 500; e.Ucircumflex = 722; e.yacute = 444; e.scommaaccent = 389; e.ecircumflex = 444; e.Uring = 722; e.Udieresis = 722; e.aogonek = 500; e.Uacute = 722; e.uogonek = 556; e.Edieresis = 667; e.Dcroat = 722; e.commaaccent = 250; e.copyright = 747; e.Emacron = 667; e.ccaron = 444; e.aring = 500; e.Ncommaaccent = 722; e.lacute = 278; e.agrave = 500; e.Tcommaaccent = 611; e.Cacute = 667; e.atilde = 500; e.Edotaccent = 667; e.scaron = 389; e.scedilla = 389; e.iacute = 278; e.lozenge = 494; e.Rcaron = 667; e.Gcommaaccent = 722; e.ucircumflex = 556; e.acircumflex = 500; e.Amacron = 667; e.rcaron = 389; e.ccedilla = 444; e.Zdotaccent = 611; e.Thorn = 611; e.Omacron = 722; e.Racute = 667; e.Sacute = 556; e.dcaron = 608; e.Umacron = 722; e.uring = 556; e.threesuperior = 300; e.Ograve = 722; e.Agrave = 667; e.Abreve = 667; e.multiply = 570; e.uacute = 556; e.Tcaron = 611; e.partialdiff = 494; e.ydieresis = 444; e.Nacute = 722; e.icircumflex = 278; e.Ecircumflex = 667; e.adieresis = 500; e.edieresis = 444; e.cacute = 444; e.nacute = 556; e.umacron = 556; e.Ncaron = 722; e.Iacute = 389; e.plusminus = 570; e.brokenbar = 220; e.registered = 747; e.Gbreve = 722; e.Idotaccent = 389; e.summation = 600; e.Egrave = 667; e.racute = 389; e.omacron = 500; e.Zacute = 611; e.Zcaron = 611; e.greaterequal = 549; e.Eth = 722; e.Ccedilla = 667; e.lcommaaccent = 278; e.tcaron = 366; e.eogonek = 444; e.Uogonek = 722; e.Aacute = 667; e.Adieresis = 667; e.egrave = 444; e.zacute = 389; e.iogonek = 278; e.Oacute = 722; e.oacute = 500; e.amacron = 500; e.sacute = 389; e.idieresis = 278; e.Ocircumflex = 722; e.Ugrave = 722; e.Delta = 612; e.thorn = 500; e.twosuperior = 300; e.Odieresis = 722; e.mu = 576; e.igrave = 278; e.ohungarumlaut = 500; e.Eogonek = 667; e.dcroat = 500; e.threequarters = 750; e.Scedilla = 556; e.lcaron = 382; e.Kcommaaccent = 667; e.Lacute = 611; e.trademark = 1e3; e.edotaccent = 444; e.Igrave = 389; e.Imacron = 389; e.Lcaron = 611; e.onehalf = 750; e.lessequal = 549; e.ocircumflex = 500; e.ntilde = 556; e.Uhungarumlaut = 722; e.Eacute = 667; e.emacron = 444; e.gbreve = 500; e.onequarter = 750; e.Scaron = 556; e.Scommaaccent = 556; e.Ohungarumlaut = 722; e.degree = 400; e.ograve = 500; e.Ccaron = 667; e.ugrave = 556; e.radical = 549; e.Dcaron = 722; e.rcommaaccent = 389; e.Ntilde = 722; e.otilde = 500; e.Rcommaaccent = 667; e.Lcommaaccent = 611; e.Atilde = 667; e.Aogonek = 667; e.Aring = 667; e.Otilde = 722; e.zdotaccent = 389; e.Ecaron = 667; e.Iogonek = 389; e.kcommaaccent = 500; e.minus = 606; e.Icircumflex = 389; e.ncaron = 556; e.tcommaaccent = 278; e.logicalnot = 606; e.odieresis = 500; e.udieresis = 556; e.notequal = 549; e.gcommaaccent = 500; e.eth = 500; e.zcaron = 389; e.ncommaaccent = 556; e.onesuperior = 300; e.imacron = 278; e.Euro = 500 })); e["Times-Italic"] = (0, r.getLookupTableFactory)((function (e) { e.space = 250; e.exclam = 333; e.quotedbl = 420; e.numbersign = 500; e.dollar = 500; e.percent = 833; e.ampersand = 778; e.quoteright = 333; e.parenleft = 333; e.parenright = 333; e.asterisk = 500; e.plus = 675; e.comma = 250; e.hyphen = 333; e.period = 250; e.slash = 278; e.zero = 500; e.one = 500; e.two = 500; e.three = 500; e.four = 500; e.five = 500; e.six = 500; e.seven = 500; e.eight = 500; e.nine = 500; e.colon = 333; e.semicolon = 333; e.less = 675; e.equal = 675; e.greater = 675; e.question = 500; e.at = 920; e.A = 611; e.B = 611; e.C = 667; e.D = 722; e.E = 611; e.F = 611; e.G = 722; e.H = 722; e.I = 333; e.J = 444; e.K = 667; e.L = 556; e.M = 833; e.N = 667; e.O = 722; e.P = 611; e.Q = 722; e.R = 611; e.S = 500; e.T = 556; e.U = 722; e.V = 611; e.W = 833; e.X = 611; e.Y = 556; e.Z = 556; e.bracketleft = 389; e.backslash = 278; e.bracketright = 389; e.asciicircum = 422; e.underscore = 500; e.quoteleft = 333; e.a = 500; e.b = 500; e.c = 444; e.d = 500; e.e = 444; e.f = 278; e.g = 500; e.h = 500; e.i = 278; e.j = 278; e.k = 444; e.l = 278; e.m = 722; e.n = 500; e.o = 500; e.p = 500; e.q = 500; e.r = 389; e.s = 389; e.t = 278; e.u = 500; e.v = 444; e.w = 667; e.x = 444; e.y = 444; e.z = 389; e.braceleft = 400; e.bar = 275; e.braceright = 400; e.asciitilde = 541; e.exclamdown = 389; e.cent = 500; e.sterling = 500; e.fraction = 167; e.yen = 500; e.florin = 500; e.section = 500; e.currency = 500; e.quotesingle = 214; e.quotedblleft = 556; e.guillemotleft = 500; e.guilsinglleft = 333; e.guilsinglright = 333; e.fi = 500; e.fl = 500; e.endash = 500; e.dagger = 500; e.daggerdbl = 500; e.periodcentered = 250; e.paragraph = 523; e.bullet = 350; e.quotesinglbase = 333; e.quotedblbase = 556; e.quotedblright = 556; e.guillemotright = 500; e.ellipsis = 889; e.perthousand = 1e3; e.questiondown = 500; e.grave = 333; e.acute = 333; e.circumflex = 333; e.tilde = 333; e.macron = 333; e.breve = 333; e.dotaccent = 333; e.dieresis = 333; e.ring = 333; e.cedilla = 333; e.hungarumlaut = 333; e.ogonek = 333; e.caron = 333; e.emdash = 889; e.AE = 889; e.ordfeminine = 276; e.Lslash = 556; e.Oslash = 722; e.OE = 944; e.ordmasculine = 310; e.ae = 667; e.dotlessi = 278; e.lslash = 278; e.oslash = 500; e.oe = 667; e.germandbls = 500; e.Idieresis = 333; e.eacute = 444; e.abreve = 500; e.uhungarumlaut = 500; e.ecaron = 444; e.Ydieresis = 556; e.divide = 675; e.Yacute = 556; e.Acircumflex = 611; e.aacute = 500; e.Ucircumflex = 722; e.yacute = 444; e.scommaaccent = 389; e.ecircumflex = 444; e.Uring = 722; e.Udieresis = 722; e.aogonek = 500; e.Uacute = 722; e.uogonek = 500; e.Edieresis = 611; e.Dcroat = 722; e.commaaccent = 250; e.copyright = 760; e.Emacron = 611; e.ccaron = 444; e.aring = 500; e.Ncommaaccent = 667; e.lacute = 278; e.agrave = 500; e.Tcommaaccent = 556; e.Cacute = 667; e.atilde = 500; e.Edotaccent = 611; e.scaron = 389; e.scedilla = 389; e.iacute = 278; e.lozenge = 471; e.Rcaron = 611; e.Gcommaaccent = 722; e.ucircumflex = 500; e.acircumflex = 500; e.Amacron = 611; e.rcaron = 389; e.ccedilla = 444; e.Zdotaccent = 556; e.Thorn = 611; e.Omacron = 722; e.Racute = 611; e.Sacute = 500; e.dcaron = 544; e.Umacron = 722; e.uring = 500; e.threesuperior = 300; e.Ograve = 722; e.Agrave = 611; e.Abreve = 611; e.multiply = 675; e.uacute = 500; e.Tcaron = 556; e.partialdiff = 476; e.ydieresis = 444; e.Nacute = 667; e.icircumflex = 278; e.Ecircumflex = 611; e.adieresis = 500; e.edieresis = 444; e.cacute = 444; e.nacute = 500; e.umacron = 500; e.Ncaron = 667; e.Iacute = 333; e.plusminus = 675; e.brokenbar = 275; e.registered = 760; e.Gbreve = 722; e.Idotaccent = 333; e.summation = 600; e.Egrave = 611; e.racute = 389; e.omacron = 500; e.Zacute = 556; e.Zcaron = 556; e.greaterequal = 549; e.Eth = 722; e.Ccedilla = 667; e.lcommaaccent = 278; e.tcaron = 300; e.eogonek = 444; e.Uogonek = 722; e.Aacute = 611; e.Adieresis = 611; e.egrave = 444; e.zacute = 389; e.iogonek = 278; e.Oacute = 722; e.oacute = 500; e.amacron = 500; e.sacute = 389; e.idieresis = 278; e.Ocircumflex = 722; e.Ugrave = 722; e.Delta = 612; e.thorn = 500; e.twosuperior = 300; e.Odieresis = 722; e.mu = 500; e.igrave = 278; e.ohungarumlaut = 500; e.Eogonek = 611; e.dcroat = 500; e.threequarters = 750; e.Scedilla = 500; e.lcaron = 300; e.Kcommaaccent = 667; e.Lacute = 556; e.trademark = 980; e.edotaccent = 444; e.Igrave = 333; e.Imacron = 333; e.Lcaron = 611; e.onehalf = 750; e.lessequal = 549; e.ocircumflex = 500; e.ntilde = 500; e.Uhungarumlaut = 722; e.Eacute = 611; e.emacron = 444; e.gbreve = 500; e.onequarter = 750; e.Scaron = 500; e.Scommaaccent = 500; e.Ohungarumlaut = 722; e.degree = 400; e.ograve = 500; e.Ccaron = 667; e.ugrave = 500; e.radical = 453; e.Dcaron = 722; e.rcommaaccent = 389; e.Ntilde = 667; e.otilde = 500; e.Rcommaaccent = 611; e.Lcommaaccent = 556; e.Atilde = 611; e.Aogonek = 611; e.Aring = 611; e.Otilde = 722; e.zdotaccent = 389; e.Ecaron = 611; e.Iogonek = 333; e.kcommaaccent = 444; e.minus = 675; e.Icircumflex = 333; e.ncaron = 500; e.tcommaaccent = 278; e.logicalnot = 675; e.odieresis = 500; e.udieresis = 500; e.notequal = 549; e.gcommaaccent = 500; e.eth = 500; e.zcaron = 389; e.ncommaaccent = 500; e.onesuperior = 300; e.imacron = 278; e.Euro = 500 })); e.ZapfDingbats = (0, r.getLookupTableFactory)((function (e) { e.space = 278; e.a1 = 974; e.a2 = 961; e.a202 = 974; e.a3 = 980; e.a4 = 719; e.a5 = 789; e.a119 = 790; e.a118 = 791; e.a117 = 690; e.a11 = 960; e.a12 = 939; e.a13 = 549; e.a14 = 855; e.a15 = 911; e.a16 = 933; e.a105 = 911; e.a17 = 945; e.a18 = 974; e.a19 = 755; e.a20 = 846; e.a21 = 762; e.a22 = 761; e.a23 = 571; e.a24 = 677; e.a25 = 763; e.a26 = 760; e.a27 = 759; e.a28 = 754; e.a6 = 494; e.a7 = 552; e.a8 = 537; e.a9 = 577; e.a10 = 692; e.a29 = 786; e.a30 = 788; e.a31 = 788; e.a32 = 790; e.a33 = 793; e.a34 = 794; e.a35 = 816; e.a36 = 823; e.a37 = 789; e.a38 = 841; e.a39 = 823; e.a40 = 833; e.a41 = 816; e.a42 = 831; e.a43 = 923; e.a44 = 744; e.a45 = 723; e.a46 = 749; e.a47 = 790; e.a48 = 792; e.a49 = 695; e.a50 = 776; e.a51 = 768; e.a52 = 792; e.a53 = 759; e.a54 = 707; e.a55 = 708; e.a56 = 682; e.a57 = 701; e.a58 = 826; e.a59 = 815; e.a60 = 789; e.a61 = 789; e.a62 = 707; e.a63 = 687; e.a64 = 696; e.a65 = 689; e.a66 = 786; e.a67 = 787; e.a68 = 713; e.a69 = 791; e.a70 = 785; e.a71 = 791; e.a72 = 873; e.a73 = 761; e.a74 = 762; e.a203 = 762; e.a75 = 759; e.a204 = 759; e.a76 = 892; e.a77 = 892; e.a78 = 788; e.a79 = 784; e.a81 = 438; e.a82 = 138; e.a83 = 277; e.a84 = 415; e.a97 = 392; e.a98 = 392; e.a99 = 668; e.a100 = 668; e.a89 = 390; e.a90 = 390; e.a93 = 317; e.a94 = 317; e.a91 = 276; e.a92 = 276; e.a205 = 509; e.a85 = 509; e.a206 = 410; e.a86 = 410; e.a87 = 234; e.a88 = 234; e.a95 = 334; e.a96 = 334; e.a101 = 732; e.a102 = 544; e.a103 = 544; e.a104 = 910; e.a106 = 667; e.a107 = 760; e.a108 = 760; e.a112 = 776; e.a111 = 595; e.a110 = 694; e.a109 = 626; e.a120 = 788; e.a121 = 788; e.a122 = 788; e.a123 = 788; e.a124 = 788; e.a125 = 788; e.a126 = 788; e.a127 = 788; e.a128 = 788; e.a129 = 788; e.a130 = 788; e.a131 = 788; e.a132 = 788; e.a133 = 788; e.a134 = 788; e.a135 = 788; e.a136 = 788; e.a137 = 788; e.a138 = 788; e.a139 = 788; e.a140 = 788; e.a141 = 788; e.a142 = 788; e.a143 = 788; e.a144 = 788; e.a145 = 788; e.a146 = 788; e.a147 = 788; e.a148 = 788; e.a149 = 788; e.a150 = 788; e.a151 = 788; e.a152 = 788; e.a153 = 788; e.a154 = 788; e.a155 = 788; e.a156 = 788; e.a157 = 788; e.a158 = 788; e.a159 = 788; e.a160 = 894; e.a161 = 838; e.a163 = 1016; e.a164 = 458; e.a196 = 748; e.a165 = 924; e.a192 = 748; e.a166 = 918; e.a167 = 927; e.a168 = 928; e.a169 = 928; e.a170 = 834; e.a171 = 873; e.a172 = 828; e.a173 = 924; e.a162 = 924; e.a174 = 917; e.a175 = 930; e.a176 = 931; e.a177 = 463; e.a178 = 883; e.a179 = 836; e.a193 = 836; e.a180 = 867; e.a199 = 867; e.a181 = 696; e.a200 = 696; e.a182 = 874; e.a201 = 874; e.a183 = 760; e.a184 = 946; e.a197 = 771; e.a185 = 865; e.a194 = 771; e.a198 = 888; e.a186 = 967; e.a195 = 888; e.a187 = 831; e.a188 = 873; e.a189 = 927; e.a190 = 970; e.a191 = 918 })) })); t.getMetrics = i }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.isPDFFunction = function (e) { var t; if ("object" != typeof e) return !1; if ((0, i.isDict)(e)) t = e; else { if (!(0, i.isStream)(e)) return !1; t = e.dict } return t.has("FunctionType") }; t.PostScriptCompiler = t.PostScriptEvaluator = t.PDFFunctionFactory = void 0; var r = a(2), i = a(4), n = a(40); t.PDFFunctionFactory = class { constructor({ xref: e, isEvalSupported: t = !0 }) { this.xref = e; this.isEvalSupported = !1 !== t } create(e) { return o.parse({ xref: this.xref, isEvalSupported: this.isEvalSupported, fn: e }) } createFromArray(e) { return o.parseArray({ xref: this.xref, isEvalSupported: this.isEvalSupported, fnObj: e }) } }; function s(e) { if (!Array.isArray(e)) return null; const t = e.length; for (let a = 0; a < t; a++)if ("number" != typeof e[a]) { const a = new Array(t); for (let r = 0; r < t; r++)a[r] = +e[r]; return a } return e } var o = { getSampleArray(e, t, a, r) { var i, n, s = 1; for (i = 0, n = e.length; i < n; i++)s *= e[i]; s *= t; var o = new Array(s), c = 0, l = 0, h = 1 / (2 ** a - 1), u = r.getBytes((s * a + 7) / 8), d = 0; for (i = 0; i < s; i++) { for (; c < a;) { l <<= 8; l |= u[d++]; c += 8 } c -= a; o[i] = (l >> c) * h; l &= (1 << c) - 1 } return o }, getIR({ xref: e, isEvalSupported: t, fn: a }) { var i = a.dict; i || (i = a); var n = [this.constructSampled, null, this.constructInterpolated, this.constructStiched, this.constructPostScript][i.get("FunctionType")]; if (!n) throw new r.FormatError("Unknown type of function"); return n.call(this, { xref: e, isEvalSupported: t, fn: a, dict: i }) }, fromIR({ xref: e, isEvalSupported: t, IR: a }) { switch (a[0]) { case 0: return this.constructSampledFromIR({ xref: e, isEvalSupported: t, IR: a }); case 2: return this.constructInterpolatedFromIR({ xref: e, isEvalSupported: t, IR: a }); case 3: return this.constructStichedFromIR({ xref: e, isEvalSupported: t, IR: a }); default: return this.constructPostScriptFromIR({ xref: e, isEvalSupported: t, IR: a }) } }, parse({ xref: e, isEvalSupported: t, fn: a }) { const r = this.getIR({ xref: e, isEvalSupported: t, fn: a }); return this.fromIR({ xref: e, isEvalSupported: t, IR: r }) }, parseArray({ xref: e, isEvalSupported: t, fnObj: a }) { if (!Array.isArray(a)) return this.parse({ xref: e, isEvalSupported: t, fn: a }); for (var r = [], i = 0, n = a.length; i < n; i++)r.push(this.parse({ xref: e, isEvalSupported: t, fn: e.fetchIfRef(a[i]) })); return function (e, t, a, i) { for (var n = 0, s = r.length; n < s; n++)r[n](e, t, a, i + n) } }, constructSampled({ xref: e, isEvalSupported: t, fn: a, dict: i }) { function n(e) { for (var t = e.length, a = [], r = 0, i = 0; i < t; i += 2) { a[r] = [e[i], e[i + 1]]; ++r } return a } var o = s(i.getArray("Domain")), c = s(i.getArray("Range")); if (!o || !c) throw new r.FormatError("No domain or range"); var l = o.length / 2, h = c.length / 2; o = n(o); c = n(c); var u = s(i.getArray("Size")), d = i.get("BitsPerSample"), f = i.get("Order") || 1; 1 !== f && (0, r.info)("No support for cubic spline interpolation: " + f); var g = s(i.getArray("Encode")); if (g) g = n(g); else { g = []; for (var m = 0; m < l; ++m)g.push([0, u[m] - 1]) } var p = s(i.getArray("Decode")); return [0, l, o, g, p = p ? n(p) : c, this.getSampleArray(u, h, d, a), u, h, 2 ** d - 1, c] }, constructSampledFromIR({ xref: e, isEvalSupported: t, IR: a }) { function r(e, t, a, r, i) { return r + (i - r) / (a - t) * (e - t) } return function (e, t, i, n) { var s, o, c = a[1], l = a[2], h = a[3], u = a[4], d = a[5], f = a[6], g = a[7], m = a[9], p = 1 << c, b = new Float64Array(p), y = new Uint32Array(p); for (o = 0; o < p; o++)b[o] = 1; var v = g, w = 1; for (s = 0; s < c; ++s) { var k = l[s][0], S = l[s][1], C = r(Math.min(Math.max(e[t + s], k), S), k, S, h[s][0], h[s][1]), x = f[s], A = (C = Math.min(Math.max(C, 0), x - 1)) < x - 1 ? Math.floor(C) : C - 1, I = A + 1 - C, F = C - A, T = A * v, E = T + v; for (o = 0; o < p; o++)if (o & w) { b[o] *= F; y[o] += E } else { b[o] *= I; y[o] += T } v *= x; w <<= 1 } for (o = 0; o < g; ++o) { var O = 0; for (s = 0; s < p; s++)O += d[y[s] + o] * b[s]; O = r(O, 0, 1, u[o][0], u[o][1]); i[n + o] = Math.min(Math.max(O, m[o][0]), m[o][1]) } } }, constructInterpolated({ xref: e, isEvalSupported: t, fn: a, dict: r }) { for (var i = s(r.getArray("C0")) || [0], n = s(r.getArray("C1")) || [1], o = r.get("N"), c = i.length, l = [], h = 0; h < c; ++h)l.push(n[h] - i[h]); return [2, i, l, o] }, constructInterpolatedFromIR({ xref: e, isEvalSupported: t, IR: a }) { var r = a[1], i = a[2], n = a[3], s = i.length; return function (e, t, a, o) { for (var c = 1 === n ? e[t] : e[t] ** n, l = 0; l < s; ++l)a[o + l] = r[l] + c * i[l] } }, constructStiched({ xref: e, isEvalSupported: t, fn: a, dict: i }) { var n = s(i.getArray("Domain")); if (!n) throw new r.FormatError("No domain"); if (1 != n.length / 2) throw new r.FormatError("Bad domain for stiched function"); for (var o = i.get("Functions"), c = [], l = 0, h = o.length; l < h; ++l)c.push(this.parse({ xref: e, isEvalSupported: t, fn: e.fetchIfRef(o[l]) })); return [3, n, s(i.getArray("Bounds")), s(i.getArray("Encode")), c] }, constructStichedFromIR({ xref: e, isEvalSupported: t, IR: a }) { var r = a[1], i = a[2], n = a[3], s = a[4], o = new Float32Array(1); return function (e, t, a, c) { for (var l = function (e, t, a) { e > a ? e = a : e < t && (e = t); return e }(e[t], r[0], r[1]), h = 0, u = i.length; h < u && !(l < i[h]); ++h); var d = r[0]; h > 0 && (d = i[h - 1]); var f = r[1]; h < i.length && (f = i[h]); var g = n[2 * h], m = n[2 * h + 1]; o[0] = d === f ? g : g + (l - d) * (m - g) / (f - d); s[h](o, 0, a, c) } }, constructPostScript({ xref: e, isEvalSupported: t, fn: a, dict: i }) { var o = s(i.getArray("Domain")), c = s(i.getArray("Range")); if (!o) throw new r.FormatError("No domain."); if (!c) throw new r.FormatError("No range."); var l = new n.PostScriptLexer(a); return [4, o, c, new n.PostScriptParser(l).parse()] }, constructPostScriptFromIR({ xref: e, isEvalSupported: t, IR: a }) { var i = a[1], n = a[2], s = a[3]; if (t && r.IsEvalSupportedCached.value) { const e = (new h).compile(s, i, n); if (e) return new Function("src", "srcOffset", "dest", "destOffset", e) } (0, r.info)("Unable to compile PS function"); var o = n.length >> 1, c = i.length >> 1, u = new l(s), d = Object.create(null), f = 8192, g = new Float32Array(c); return function (e, t, a, r) { var i, s, l = "", h = g; for (i = 0; i < c; i++) { s = e[t + i]; h[i] = s; l += s + "_" } var m = d[l]; if (void 0 === m) { var p = new Float32Array(o), b = u.execute(h), y = b.length - o; for (i = 0; i < o; i++) { s = b[y + i]; var v = n[2 * i]; (s < v || s > (v = n[2 * i + 1])) && (s = v); p[i] = s } if (f > 0) { f--; d[l] = p } a.set(p, r) } else a.set(m, r) } } }; var c = function () { function e(e) { this.stack = e ? Array.prototype.slice.call(e, 0) : [] } e.prototype = { push: function (e) { if (this.stack.length >= 100) throw new Error("PostScript function stack overflow."); this.stack.push(e) }, pop: function () { if (this.stack.length <= 0) throw new Error("PostScript function stack underflow."); return this.stack.pop() }, copy: function (e) { if (this.stack.length + e >= 100) throw new Error("PostScript function stack overflow."); for (var t = this.stack, a = t.length - e, r = e - 1; r >= 0; r--, a++)t.push(t[a]) }, index: function (e) { this.push(this.stack[this.stack.length - e - 1]) }, roll: function (e, t) { var a, r, i, n = this.stack, s = n.length - e, o = n.length - 1, c = s + (t - Math.floor(t / e) * e); for (a = s, r = o; a < r; a++, r--) { i = n[a]; n[a] = n[r]; n[r] = i } for (a = s, r = c - 1; a < r; a++, r--) { i = n[a]; n[a] = n[r]; n[r] = i } for (a = c, r = o; a < r; a++, r--) { i = n[a]; n[a] = n[r]; n[r] = i } } }; return e }(), l = function () { function e(e) { this.operators = e } e.prototype = { execute: function (e) { for (var t, a, i, n = new c(e), s = 0, o = this.operators, l = o.length; s < l;)if ("number" != typeof (t = o[s++])) switch (t) { case "jz": i = n.pop(); (a = n.pop()) || (s = i); break; case "j": s = a = n.pop(); break; case "abs": a = n.pop(); n.push(Math.abs(a)); break; case "add": i = n.pop(); a = n.pop(); n.push(a + i); break; case "and": i = n.pop(); a = n.pop(); (0, r.isBool)(a) && (0, r.isBool)(i) ? n.push(a && i) : n.push(a & i); break; case "atan": a = n.pop(); n.push(Math.atan(a)); break; case "bitshift": i = n.pop(); (a = n.pop()) > 0 ? n.push(a << i) : n.push(a >> i); break; case "ceiling": a = n.pop(); n.push(Math.ceil(a)); break; case "copy": a = n.pop(); n.copy(a); break; case "cos": a = n.pop(); n.push(Math.cos(a)); break; case "cvi": a = 0 | n.pop(); n.push(a); break; case "cvr": break; case "div": i = n.pop(); a = n.pop(); n.push(a / i); break; case "dup": n.copy(1); break; case "eq": i = n.pop(); a = n.pop(); n.push(a === i); break; case "exch": n.roll(2, 1); break; case "exp": i = n.pop(); a = n.pop(); n.push(a ** i); break; case "false": n.push(!1); break; case "floor": a = n.pop(); n.push(Math.floor(a)); break; case "ge": i = n.pop(); a = n.pop(); n.push(a >= i); break; case "gt": i = n.pop(); a = n.pop(); n.push(a > i); break; case "idiv": i = n.pop(); a = n.pop(); n.push(a / i | 0); break; case "index": a = n.pop(); n.index(a); break; case "le": i = n.pop(); a = n.pop(); n.push(a <= i); break; case "ln": a = n.pop(); n.push(Math.log(a)); break; case "log": a = n.pop(); n.push(Math.log(a) / Math.LN10); break; case "lt": i = n.pop(); a = n.pop(); n.push(a < i); break; case "mod": i = n.pop(); a = n.pop(); n.push(a % i); break; case "mul": i = n.pop(); a = n.pop(); n.push(a * i); break; case "ne": i = n.pop(); a = n.pop(); n.push(a !== i); break; case "neg": a = n.pop(); n.push(-a); break; case "not": a = n.pop(); (0, r.isBool)(a) ? n.push(!a) : n.push(~a); break; case "or": i = n.pop(); a = n.pop(); (0, r.isBool)(a) && (0, r.isBool)(i) ? n.push(a || i) : n.push(a | i); break; case "pop": n.pop(); break; case "roll": i = n.pop(); a = n.pop(); n.roll(a, i); break; case "round": a = n.pop(); n.push(Math.round(a)); break; case "sin": a = n.pop(); n.push(Math.sin(a)); break; case "sqrt": a = n.pop(); n.push(Math.sqrt(a)); break; case "sub": i = n.pop(); a = n.pop(); n.push(a - i); break; case "true": n.push(!0); break; case "truncate": a = (a = n.pop()) < 0 ? Math.ceil(a) : Math.floor(a); n.push(a); break; case "xor": i = n.pop(); a = n.pop(); (0, r.isBool)(a) && (0, r.isBool)(i) ? n.push(a !== i) : n.push(a ^ i); break; default: throw new r.FormatError(`Unknown operator ${t}`) } else n.push(t); return n.stack } }; return e }(); t.PostScriptEvaluator = l; var h = function () { function e(e) { this.type = e } e.prototype.visit = function (e) { (0, r.unreachable)("abstract method") }; function t(t, a, r) { e.call(this, "args"); this.index = t; this.min = a; this.max = r } t.prototype = Object.create(e.prototype); t.prototype.visit = function (e) { e.visitArgument(this) }; function a(t) { e.call(this, "literal"); this.number = t; this.min = t; this.max = t } a.prototype = Object.create(e.prototype); a.prototype.visit = function (e) { e.visitLiteral(this) }; function i(t, a, r, i, n) { e.call(this, "binary"); this.op = t; this.arg1 = a; this.arg2 = r; this.min = i; this.max = n } i.prototype = Object.create(e.prototype); i.prototype.visit = function (e) { e.visitBinaryOperation(this) }; function n(t, a) { e.call(this, "max"); this.arg = t; this.min = t.min; this.max = a } n.prototype = Object.create(e.prototype); n.prototype.visit = function (e) { e.visitMin(this) }; function s(t, a, r) { e.call(this, "var"); this.index = t; this.min = a; this.max = r } s.prototype = Object.create(e.prototype); s.prototype.visit = function (e) { e.visitVariable(this) }; function o(t, a) { e.call(this, "definition"); this.variable = t; this.arg = a } o.prototype = Object.create(e.prototype); o.prototype.visit = function (e) { e.visitVariableDefinition(this) }; function c() { this.parts = [] } c.prototype = { visitArgument(e) { this.parts.push("Math.max(", e.min, ", Math.min(", e.max, ", src[srcOffset + ", e.index, "]))") }, visitVariable(e) { this.parts.push("v", e.index) }, visitLiteral(e) { this.parts.push(e.number) }, visitBinaryOperation(e) { this.parts.push("("); e.arg1.visit(this); this.parts.push(" ", e.op, " "); e.arg2.visit(this); this.parts.push(")") }, visitVariableDefinition(e) { this.parts.push("var "); e.variable.visit(this); this.parts.push(" = "); e.arg.visit(this); this.parts.push(";") }, visitMin(e) { this.parts.push("Math.min("); e.arg.visit(this); this.parts.push(", ", e.max, ")") }, toString() { return this.parts.join("") } }; function l(e, t) { return "literal" === t.type && 0 === t.number ? e : "literal" === e.type && 0 === e.number ? t : "literal" === t.type && "literal" === e.type ? new a(e.number + t.number) : new i("+", e, t, e.min + t.min, e.max + t.max) } function h(e, t) { if ("literal" === t.type) { if (0 === t.number) return new a(0); if (1 === t.number) return e; if ("literal" === e.type) return new a(e.number * t.number) } if ("literal" === e.type) { if (0 === e.number) return new a(0); if (1 === e.number) return t } return new i("*", e, t, Math.min(e.min * t.min, e.min * t.max, e.max * t.min, e.max * t.max), Math.max(e.min * t.min, e.min * t.max, e.max * t.min, e.max * t.max)) } function u(e, t) { if ("literal" === t.type) { if (0 === t.number) return e; if ("literal" === e.type) return new a(e.number - t.number) } return "binary" === t.type && "-" === t.op && "literal" === e.type && 1 === e.number && "literal" === t.arg1.type && 1 === t.arg1.number ? t.arg2 : new i("-", e, t, e.min - t.max, e.max - t.min) } function d(e, t) { return e.min >= t ? new a(t) : e.max <= t ? e : new n(e, t) } function f() { } f.prototype = { compile: function (e, r, i) { var n, f, g, m, p, b, y, v, w, k, S = [], C = [], x = r.length >> 1, A = i.length >> 1, I = 0; for (n = 0; n < x; n++)S.push(new t(n, r[2 * n], r[2 * n + 1])); for (n = 0, f = e.length; n < f; n++)if ("number" != typeof (k = e[n])) switch (k) { case "add": if (S.length < 2) return null; b = S.pop(); p = S.pop(); S.push(l(p, b)); break; case "cvr": if (S.length < 1) return null; break; case "mul": if (S.length < 2) return null; b = S.pop(); p = S.pop(); S.push(h(p, b)); break; case "sub": if (S.length < 2) return null; b = S.pop(); p = S.pop(); S.push(u(p, b)); break; case "exch": if (S.length < 2) return null; y = S.pop(); v = S.pop(); S.push(y, v); break; case "pop": if (S.length < 1) return null; S.pop(); break; case "index": if (S.length < 1) return null; if ("literal" !== (p = S.pop()).type) return null; if ((g = p.number) < 0 || !Number.isInteger(g) || S.length < g) return null; if ("literal" === (y = S[S.length - g - 1]).type || "var" === y.type) { S.push(y); break } w = new s(I++, y.min, y.max); S[S.length - g - 1] = w; S.push(w); C.push(new o(w, y)); break; case "dup": if (S.length < 1) return null; if ("number" == typeof e[n + 1] && "gt" === e[n + 2] && e[n + 3] === n + 7 && "jz" === e[n + 4] && "pop" === e[n + 5] && e[n + 6] === e[n + 1]) { p = S.pop(); S.push(d(p, e[n + 1])); n += 6; break } if ("literal" === (y = S[S.length - 1]).type || "var" === y.type) { S.push(y); break } w = new s(I++, y.min, y.max); S[S.length - 1] = w; S.push(w); C.push(new o(w, y)); break; case "roll": if (S.length < 2) return null; b = S.pop(); p = S.pop(); if ("literal" !== b.type || "literal" !== p.type) return null; m = b.number; if ((g = p.number) <= 0 || !Number.isInteger(g) || !Number.isInteger(m) || S.length < g) return null; if (0 === (m = (m % g + g) % g)) break; Array.prototype.push.apply(S, S.splice(S.length - g, g - m)); break; default: return null } else S.push(new a(k)); if (S.length !== A) return null; var F = []; C.forEach((function (e) { var t = new c; e.visit(t); F.push(t.toString()) })); S.forEach((function (e, t) { var a = new c; e.visit(a); var r = i[2 * t], n = i[2 * t + 1], s = [a.toString()]; if (r > e.min) { s.unshift("Math.max(", r, ", "); s.push(")") } if (n < e.max) { s.unshift("Math.min(", n, ", "); s.push(")") } s.unshift("dest[destOffset + ", t, "] = "); s.push(";"); F.push(s.join("")) })); return F.join("\n") } }; return f }(); t.PostScriptCompiler = h }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.PostScriptParser = t.PostScriptLexer = void 0; var r = a(2), i = a(4), n = a(7); t.PostScriptParser = class { constructor(e) { this.lexer = e; this.operators = []; this.token = null; this.prev = null } nextToken() { this.prev = this.token; this.token = this.lexer.getToken() } accept(e) { if (this.token.type === e) { this.nextToken(); return !0 } return !1 } expect(e) { if (this.accept(e)) return !0; throw new r.FormatError(`Unexpected symbol: found ${this.token.type} expected ${e}.`) } parse() { this.nextToken(); this.expect(s.LBRACE); this.parseBlock(); this.expect(s.RBRACE); return this.operators } parseBlock() { for (; ;)if (this.accept(s.NUMBER)) this.operators.push(this.prev.value); else if (this.accept(s.OPERATOR)) this.operators.push(this.prev.value); else { if (!this.accept(s.LBRACE)) return; this.parseCondition() } } parseCondition() { const e = this.operators.length; this.operators.push(null, null); this.parseBlock(); this.expect(s.RBRACE); if (this.accept(s.IF)) { this.operators[e] = this.operators.length; this.operators[e + 1] = "jz" } else { if (!this.accept(s.LBRACE)) throw new r.FormatError("PS Function: error parsing conditional."); { const t = this.operators.length; this.operators.push(null, null); const a = this.operators.length; this.parseBlock(); this.expect(s.RBRACE); this.expect(s.IFELSE); this.operators[t] = this.operators.length; this.operators[t + 1] = "j"; this.operators[e] = a; this.operators[e + 1] = "jz" } } } }; const s = { LBRACE: 0, RBRACE: 1, NUMBER: 2, OPERATOR: 3, IF: 4, IFELSE: 5 }, o = function () { const e = Object.create(null); class t { constructor(e, t) { this.type = e; this.value = t } static getOperator(a) { const r = e[a]; return r || (e[a] = new t(s.OPERATOR, a)) } static get LBRACE() { return (0, r.shadow)(this, "LBRACE", new t(s.LBRACE, "{")) } static get RBRACE() { return (0, r.shadow)(this, "RBRACE", new t(s.RBRACE, "}")) } static get IF() { return (0, r.shadow)(this, "IF", new t(s.IF, "IF")) } static get IFELSE() { return (0, r.shadow)(this, "IFELSE", new t(s.IFELSE, "IFELSE")) } } return t }(); t.PostScriptLexer = class { constructor(e) { this.stream = e; this.nextChar(); this.strBuf = [] } nextChar() { return this.currentChar = this.stream.getByte() } getToken() { let e = !1, t = this.currentChar; for (; ;) { if (t < 0) return i.EOF; if (e) 10 !== t && 13 !== t || (e = !1); else if (37 === t) e = !0; else if (!(0, n.isWhiteSpace)(t)) break; t = this.nextChar() } switch (0 | t) { case 48: case 49: case 50: case 51: case 52: case 53: case 54: case 55: case 56: case 57: case 43: case 45: case 46: return new o(s.NUMBER, this.getNumber()); case 123: this.nextChar(); return o.LBRACE; case 125: this.nextChar(); return o.RBRACE }const a = this.strBuf; a.length = 0; a[0] = String.fromCharCode(t); for (; (t = this.nextChar()) >= 0 && (t >= 65 && t <= 90 || t >= 97 && t <= 122);)a.push(String.fromCharCode(t)); const r = a.join(""); switch (r.toLowerCase()) { case "if": return o.IF; case "ifelse": return o.IFELSE; default: return o.getOperator(r) } } getNumber() { let e = this.currentChar; const t = this.strBuf; t.length = 0; t[0] = String.fromCharCode(e); for (; (e = this.nextChar()) >= 0 && (e >= 48 && e <= 57 || 45 === e || 46 === e);)t.push(String.fromCharCode(e)); const a = parseFloat(t.join("")); if (isNaN(a)) throw new r.FormatError(`Invalid floating point number: ${a}`); return a } } }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.MurmurHash3_64 = void 0; var r = a(2); t.MurmurHash3_64 = class { constructor(e) { this.h1 = e ? 4294967295 & e : 3285377520; this.h2 = e ? 4294967295 & e : 3285377520 } update(e) { let t, a; if ((0, r.isString)(e)) { t = new Uint8Array(2 * e.length); a = 0; for (let r = 0, i = e.length; r < i; r++) { const i = e.charCodeAt(r); if (i <= 255) t[a++] = i; else { t[a++] = i >>> 8; t[a++] = 255 & i } } } else { if (!(0, r.isArrayBuffer)(e)) throw new Error("Wrong data format in MurmurHash3_64_update. Input must be a string or array."); t = e; a = t.byteLength } const i = a >> 2, n = a - 4 * i, s = new Uint32Array(t.buffer, 0, i); let o = 0, c = 0, l = this.h1, h = this.h2; const u = 3432918353, d = 461845907; for (let e = 0; e < i; e++)if (1 & e) { o = s[e]; o = o * u & 4294901760 | 11601 * o & 65535; o = o << 15 | o >>> 17; o = o * d & 4294901760 | 13715 * o & 65535; l ^= o; l = l << 13 | l >>> 19; l = 5 * l + 3864292196 } else { c = s[e]; c = c * u & 4294901760 | 11601 * c & 65535; c = c << 15 | c >>> 17; c = c * d & 4294901760 | 13715 * c & 65535; h ^= c; h = h << 13 | h >>> 19; h = 5 * h + 3864292196 } o = 0; switch (n) { case 3: o ^= t[4 * i + 2] << 16; case 2: o ^= t[4 * i + 1] << 8; case 1: o ^= t[4 * i]; o = o * u & 4294901760 | 11601 * o & 65535; o = o << 15 | o >>> 17; o = o * d & 4294901760 | 13715 * o & 65535; 1 & i ? l ^= o : h ^= o }this.h1 = l; this.h2 = h } hexdigest() { let e = this.h1, t = this.h2; e ^= t >>> 1; e = 3981806797 * e & 4294901760 | 36045 * e & 65535; t = 4283543511 * t & 4294901760 | (2950163797 * (t << 16 | e >>> 16) & 4294901760) >>> 16; e ^= t >>> 1; e = 444984403 * e & 4294901760 | 60499 * e & 65535; t = 3301882366 * t & 4294901760 | (3120437893 * (t << 16 | e >>> 16) & 4294901760) >>> 16; e ^= t >>> 1; const a = (e >>> 0).toString(16), r = (t >>> 0).toString(16); return a.padStart(8, "0") + r.padStart(8, "0") } } }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.NativeImageDecoder = void 0; var r = a(22), i = a(17), n = a(11); class s { constructor({ xref: e, resources: t, handler: a, forceDataSchema: r = !1, pdfFunctionFactory: i }) { this.xref = e; this.resources = t; this.handler = a; this.forceDataSchema = r; this.pdfFunctionFactory = i } canDecode(e) { return e instanceof i.JpegStream && s.isDecodable(e, this.xref, this.resources, this.pdfFunctionFactory) && e.maybeValidDimensions } decode(e) { const t = e.dict; let a = t.get("ColorSpace", "CS"); a = r.ColorSpace.parse(a, this.xref, this.resources, this.pdfFunctionFactory); return this.handler.sendWithPromise("JpegDecode", [e.getIR(this.forceDataSchema), a.numComps]).then((function ({ data: e, width: a, height: r }) { return new n.Stream(e, 0, e.length, t) })) } static isSupported(e, t, a, i) { const n = e.dict; if (n.has("DecodeParms") || n.has("DP")) return !1; const s = r.ColorSpace.parse(n.get("ColorSpace", "CS"), t, a, i); return ("DeviceGray" === s.name || "DeviceRGB" === s.name) && s.isDefaultDecode(n.getArray("Decode", "D")) } static isDecodable(e, t, a, i) { const n = e.dict; if (n.has("DecodeParms") || n.has("DP")) return !1; const s = r.ColorSpace.parse(n.get("ColorSpace", "CS"), t, a, i), o = n.get("BitsPerComponent", "BPC") || 1; return (1 === s.numComps || 3 === s.numComps) && s.isDefaultDecode(n.getArray("Decode", "D"), o) } } t.NativeImageDecoder = s }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.PDFImage = void 0; var r = a(2), i = a(4), n = a(22), s = a(11), o = a(17), c = a(20), l = function () { function e(e, t) { return t && t.canDecode(e) ? t.decode(e).catch(t => { (0, r.warn)("Native image decoding failed -- trying to recover: " + (t && t.message)); return e }) : Promise.resolve(e) } function t(e, t, a, r) { (e = t + e * a) < 0 ? e = 0 : e > r && (e = r); return e } function a(e, t, a, r, i, n) { var s = i * n; let o; o = t <= 8 ? new Uint8Array(s) : t <= 16 ? new Uint16Array(s) : new Uint32Array(s); var c, l, h, u, d = a / i, f = r / n, g = 0, m = new Uint16Array(i), p = a; for (c = 0; c < i; c++)m[c] = Math.floor(c * d); for (c = 0; c < n; c++) { h = Math.floor(c * f) * p; for (l = 0; l < i; l++) { u = h + m[l]; o[g++] = e[u] } } return o } function l({ xref: e, res: t, image: a, isInline: s = !1, smask: o = null, mask: h = null, isMask: u = !1, pdfFunctionFactory: d }) { this.image = a; var f = a.dict; const g = f.get("Filter"); if ((0, i.isName)(g)) switch (g.name) { case "JPXDecode": var m = new c.JpxImage; m.parseImageProperties(a.stream); a.stream.reset(); a.width = m.width; a.height = m.height; a.bitsPerComponent = m.bitsPerComponent; a.numComps = m.componentsCount; break; case "JBIG2Decode": a.bitsPerComponent = 1; a.numComps = 1 }let p = f.get("Width", "W"), b = f.get("Height", "H"); if (Number.isInteger(a.width) && a.width > 0 && Number.isInteger(a.height) && a.height > 0 && (a.width !== p || a.height !== b)) { (0, r.warn)("PDFImage - using the Width/Height of the image data, rather than the image dictionary."); p = a.width; b = a.height } if (p < 1 || b < 1) throw new r.FormatError(`Invalid image width: ${p} or height: ${b}`); this.width = p; this.height = b; this.interpolate = f.get("Interpolate", "I") || !1; this.imageMask = f.get("ImageMask", "IM") || !1; this.matte = f.get("Matte") || !1; var y = a.bitsPerComponent; if (!y && !(y = f.get("BitsPerComponent", "BPC"))) { if (!this.imageMask) throw new r.FormatError(`Bits per component missing in image: ${this.imageMask}`); y = 1 } this.bpc = y; if (!this.imageMask) { var v = f.get("ColorSpace", "CS"); if (!v) { (0, r.info)("JPX images (which do not require color spaces)"); switch (a.numComps) { case 1: v = i.Name.get("DeviceGray"); break; case 3: v = i.Name.get("DeviceRGB"); break; case 4: v = i.Name.get("DeviceCMYK"); break; default: throw new Error(`JPX images with ${a.numComps} ` + "color components not supported.") } } const o = s ? t : null; this.colorSpace = n.ColorSpace.parse(v, e, o, d); this.numComps = this.colorSpace.numComps } this.decode = f.getArray("Decode", "D"); this.needsDecode = !1; if (this.decode && (this.colorSpace && !this.colorSpace.isDefaultDecode(this.decode, y) || u && !n.ColorSpace.isDefaultDecode(this.decode, 1))) { this.needsDecode = !0; var w = (1 << y) - 1; this.decodeCoefficients = []; this.decodeAddends = []; const e = this.colorSpace && "Indexed" === this.colorSpace.name; for (var k = 0, S = 0; k < this.decode.length; k += 2, ++S) { var C = this.decode[k], x = this.decode[k + 1]; this.decodeCoefficients[S] = e ? (x - C) / w : x - C; this.decodeAddends[S] = e ? C : w * C } } if (o) this.smask = new l({ xref: e, res: t, image: o, isInline: s, pdfFunctionFactory: d }); else if (h) if ((0, i.isStream)(h)) { h.dict.get("ImageMask", "IM") ? this.mask = new l({ xref: e, res: t, image: h, isInline: s, isMask: !0, pdfFunctionFactory: d }) : (0, r.warn)("Ignoring /Mask in image without /ImageMask.") } else this.mask = h } l.buildImage = function ({ handler: t, xref: a, res: n, image: s, isInline: o = !1, nativeDecoder: c = null, pdfFunctionFactory: h }) { var u, d, f = e(s, c), g = s.dict.get("SMask"), m = s.dict.get("Mask"); if (g) { u = e(g, c); d = Promise.resolve(null) } else { u = Promise.resolve(null); if (m) if ((0, i.isStream)(m)) d = e(m, c); else if (Array.isArray(m)) d = Promise.resolve(m); else { (0, r.warn)("Unsupported mask format."); d = Promise.resolve(null) } else d = Promise.resolve(null) } return Promise.all([f, u, d]).then((function ([e, t, r]) { return new l({ xref: a, res: n, image: e, isInline: o, smask: t, mask: r, pdfFunctionFactory: h }) })) }; l.createMask = function ({ imgArray: e, width: t, height: a, imageIsFromDecodeStream: r, inverseDecode: i }) { var n, s, o = (t + 7 >> 3) * a, c = e.byteLength; if (!r || i && !(o === c)) if (i) { (n = new Uint8ClampedArray(o)).set(e); for (s = c; s < o; s++)n[s] = 255 } else (n = new Uint8ClampedArray(c)).set(e); else n = e; if (i) for (s = 0; s < c; s++)n[s] ^= 255; return { data: n, width: t, height: a } }; l.prototype = { get drawWidth() { return Math.max(this.width, this.smask && this.smask.width || 0, this.mask && this.mask.width || 0) }, get drawHeight() { return Math.max(this.height, this.smask && this.smask.height || 0, this.mask && this.mask.height || 0) }, decodeBuffer(e) { var a, r, i = this.bpc, n = this.numComps, s = this.decodeAddends, o = this.decodeCoefficients, c = (1 << i) - 1; if (1 !== i) { var l = 0; for (a = 0, r = this.width * this.height; a < r; a++)for (var h = 0; h < n; h++) { e[l] = t(e[l], s[h], o[h], c); l++ } } else for (a = 0, r = e.length; a < r; a++)e[a] = +!e[a] }, getComponents(e) { var t = this.bpc; if (8 === t) return e; var a = this.width, r = this.height, i = this.numComps, n = a * r * i, s = 0; let o; o = t <= 8 ? new Uint8Array(n) : t <= 16 ? new Uint16Array(n) : new Uint32Array(n); var c, l, h = a * i, u = (1 << t) - 1, d = 0; if (1 === t) for (var f, g, m, p = 0; p < r; p++) { g = d + (-8 & h); m = d + h; for (; d < g;) { l = e[s++]; o[d] = l >> 7 & 1; o[d + 1] = l >> 6 & 1; o[d + 2] = l >> 5 & 1; o[d + 3] = l >> 4 & 1; o[d + 4] = l >> 3 & 1; o[d + 5] = l >> 2 & 1; o[d + 6] = l >> 1 & 1; o[d + 7] = 1 & l; d += 8 } if (d < m) { l = e[s++]; f = 128; for (; d < m;) { o[d++] = +!!(l & f); f >>= 1 } } } else { var b = 0; l = 0; for (d = 0, c = n; d < c; ++d) { if (d % h == 0) { l = 0; b = 0 } for (; b < t;) { l = l << 8 | e[s++]; b += 8 } var y = b - t; let a = l >> y; a < 0 ? a = 0 : a > u && (a = u); o[d] = a; l &= (1 << y) - 1; b = y } } return o }, fillOpacity(e, t, i, n, s) { var o, c, h, u, d, f, g = this.smask, m = this.mask; if (g) { c = g.width; h = g.height; o = new Uint8ClampedArray(c * h); g.fillGrayBuffer(o); c === t && h === i || (o = a(o, g.bpc, c, h, t, i)) } else if (m) if (m instanceof l) { c = m.width; h = m.height; o = new Uint8ClampedArray(c * h); m.numComps = 1; m.fillGrayBuffer(o); for (u = 0, d = c * h; u < d; ++u)o[u] = 255 - o[u]; c === t && h === i || (o = a(o, m.bpc, c, h, t, i)) } else { if (!Array.isArray(m)) throw new r.FormatError("Unknown mask format."); o = new Uint8ClampedArray(t * i); var p = this.numComps; for (u = 0, d = t * i; u < d; ++u) { var b = 0, y = u * p; for (f = 0; f < p; ++f) { var v = s[y + f], w = 2 * f; if (v < m[w] || v > m[w + 1]) { b = 255; break } } o[u] = b } } if (o) for (u = 0, f = 3, d = t * n; u < d; ++u, f += 4)e[f] = o[u]; else for (u = 0, f = 3, d = t * n; u < d; ++u, f += 4)e[f] = 255 }, undoPreblend(e, t, a) { var r = this.smask && this.smask.matte; if (r) for (var i = this.colorSpace.getRgb(r, 0), n = i[0], s = i[1], o = i[2], c = t * a * 4, l = 0; l < c; l += 4) { var h = e[l + 3]; if (0 !== h) { var u = 255 / h; e[l] = (e[l] - n) * u + n; e[l + 1] = (e[l + 1] - s) * u + s; e[l + 2] = (e[l + 2] - o) * u + o } else { e[l] = 255; e[l + 1] = 255; e[l + 2] = 255 } } }, createImageData(e = !1) { var t, a = this.drawWidth, i = this.drawHeight, n = { width: a, height: i, kind: 0, data: null }, c = this.numComps, l = this.width, h = this.height, u = this.bpc, d = l * c * u + 7 >> 3; if (!e) { var f; "DeviceGray" === this.colorSpace.name && 1 === u ? f = r.ImageKind.GRAYSCALE_1BPP : "DeviceRGB" !== this.colorSpace.name || 8 !== u || this.needsDecode || (f = r.ImageKind.RGB_24BPP); if (f && !this.smask && !this.mask && a === l && i === h) { n.kind = f; t = this.getImageBytes(h * d); if (this.image instanceof s.DecodeStream) n.data = t; else { var g = new Uint8ClampedArray(t.length); g.set(t); n.data = g } if (this.needsDecode) { (0, r.assert)(f === r.ImageKind.GRAYSCALE_1BPP, "PDFImage.createImageData: The image must be grayscale."); for (var m = n.data, p = 0, b = m.length; p < b; p++)m[p] ^= 255 } return n } if (this.image instanceof o.JpegStream && !this.smask && !this.mask) { let e = h * d; switch (this.colorSpace.name) { case "DeviceGray": e *= 3; case "DeviceRGB": case "DeviceCMYK": n.kind = r.ImageKind.RGB_24BPP; n.data = this.getImageBytes(e, a, i, !0); return n } } } var y, v, w = 0 | (t = this.getImageBytes(h * d)).length / d * i / h, k = this.getComponents(t); if (e || this.smask || this.mask) { n.kind = r.ImageKind.RGBA_32BPP; n.data = new Uint8ClampedArray(a * i * 4); y = 1; v = !0; this.fillOpacity(n.data, a, i, w, k) } else { n.kind = r.ImageKind.RGB_24BPP; n.data = new Uint8ClampedArray(a * i * 3); y = 0; v = !1 } this.needsDecode && this.decodeBuffer(k); this.colorSpace.fillRgb(n.data, l, h, a, i, w, u, k, y); v && this.undoPreblend(n.data, a, w); return n }, fillGrayBuffer(e) { var t = this.numComps; if (1 !== t) throw new r.FormatError(`Reading gray scale from a color image: ${t}`); var a, i, n = this.width, s = this.height, o = this.bpc, c = n * t * o + 7 >> 3, l = this.getImageBytes(s * c), h = this.getComponents(l); if (1 !== o) { this.needsDecode && this.decodeBuffer(h); i = n * s; var u = 255 / ((1 << o) - 1); for (a = 0; a < i; ++a)e[a] = u * h[a] } else { i = n * s; if (this.needsDecode) for (a = 0; a < i; ++a)e[a] = h[a] - 1 & 255; else for (a = 0; a < i; ++a)e[a] = 255 & -h[a] } }, getImageBytes(e, t, a, r = !1) { this.image.reset(); this.image.drawWidth = t || this.width; this.image.drawHeight = a || this.height; this.image.forceRGB = !!r; return this.image.getBytes(e, !0) } }; return l }(); t.PDFImage = l }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.isNodeJS = void 0; const r = "object" == typeof process && process + "" == "[object process]" && !process.versions.nw && !process.versions.electron; t.isNodeJS = r }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.MessageHandler = void 0; var r = a(2); const i = 1, n = 2, s = 1, o = 2, c = 3, l = 4, h = 5, u = 6, d = 7, f = 8; function g(e) { if ("object" != typeof e || null === e) return e; switch (e.name) { case "AbortException": return new r.AbortException(e.message); case "MissingPDFException": return new r.MissingPDFException(e.message); case "UnexpectedResponseException": return new r.UnexpectedResponseException(e.message, e.status); case "UnknownErrorException": return new r.UnknownErrorException(e.message, e.details); default: return new r.UnknownErrorException(e.message, e.toString()) } } t.MessageHandler = class { constructor(e, t, a) { this.sourceName = e; this.targetName = t; this.comObj = a; this.callbackId = 1; this.streamId = 1; this.postMessageTransfers = !0; this.streamSinks = Object.create(null); this.streamControllers = Object.create(null); this.callbackCapabilities = Object.create(null); this.actionHandler = Object.create(null); this._onComObjOnMessage = e => { const t = e.data; if (t.targetName !== this.sourceName) return; if (t.stream) { this._processStreamMessage(t); return } if (t.callback) { const e = t.callbackId, a = this.callbackCapabilities[e]; if (!a) throw new Error(`Cannot resolve callback ${e}`); delete this.callbackCapabilities[e]; if (t.callback === i) a.resolve(t.data); else { if (t.callback !== n) throw new Error("Unexpected callback case"); a.reject(g(t.reason)) } return } const r = this.actionHandler[t.action]; if (!r) throw new Error(`Unknown action from worker: ${t.action}`); if (t.callbackId) { const e = this.sourceName, s = t.sourceName; new Promise((function (e) { e(r(t.data)) })).then((function (r) { a.postMessage({ sourceName: e, targetName: s, callback: i, callbackId: t.callbackId, data: r }) }), (function (r) { a.postMessage({ sourceName: e, targetName: s, callback: n, callbackId: t.callbackId, reason: g(r) }) })) } else t.streamId ? this._createStreamSink(t) : r(t.data) }; a.addEventListener("message", this._onComObjOnMessage) } on(e, t) { const a = this.actionHandler; if (a[e]) throw new Error(`There is already an actionName called "${e}"`); a[e] = t } send(e, t, a) { this._postMessage({ sourceName: this.sourceName, targetName: this.targetName, action: e, data: t }, a) } sendWithPromise(e, t, a) { const i = this.callbackId++, n = (0, r.createPromiseCapability)(); this.callbackCapabilities[i] = n; try { this._postMessage({ sourceName: this.sourceName, targetName: this.targetName, action: e, callbackId: i, data: t }, a) } catch (e) { n.reject(e) } return n.promise } sendWithStream(e, t, a, i) { const n = this.streamId++, o = this.sourceName, c = this.targetName, l = this.comObj; return new ReadableStream({ start: a => { const s = (0, r.createPromiseCapability)(); this.streamControllers[n] = { controller: a, startCall: s, pullCall: null, cancelCall: null, isClosed: !1 }; this._postMessage({ sourceName: o, targetName: c, action: e, streamId: n, data: t, desiredSize: a.desiredSize }, i); return s.promise }, pull: e => { const t = (0, r.createPromiseCapability)(); this.streamControllers[n].pullCall = t; l.postMessage({ sourceName: o, targetName: c, stream: u, streamId: n, desiredSize: e.desiredSize }); return t.promise }, cancel: e => { (0, r.assert)(e instanceof Error, "cancel must have a valid reason"); const t = (0, r.createPromiseCapability)(); this.streamControllers[n].cancelCall = t; this.streamControllers[n].isClosed = !0; l.postMessage({ sourceName: o, targetName: c, stream: s, streamId: n, reason: g(e) }); return t.promise } }, a) } _createStreamSink(e) { const t = this, a = this.actionHandler[e.action], i = e.streamId, n = this.sourceName, s = e.sourceName, o = this.comObj, u = { enqueue(e, a = 1, o) { if (this.isCancelled) return; const c = this.desiredSize; this.desiredSize -= a; if (c > 0 && this.desiredSize <= 0) { this.sinkCapability = (0, r.createPromiseCapability)(); this.ready = this.sinkCapability.promise } t._postMessage({ sourceName: n, targetName: s, stream: l, streamId: i, chunk: e }, o) }, close() { if (!this.isCancelled) { this.isCancelled = !0; o.postMessage({ sourceName: n, targetName: s, stream: c, streamId: i }); delete t.streamSinks[i] } }, error(e) { (0, r.assert)(e instanceof Error, "error must have a valid reason"); if (!this.isCancelled) { this.isCancelled = !0; o.postMessage({ sourceName: n, targetName: s, stream: h, streamId: i, reason: g(e) }) } }, sinkCapability: (0, r.createPromiseCapability)(), onPull: null, onCancel: null, isCancelled: !1, desiredSize: e.desiredSize, ready: null }; u.sinkCapability.resolve(); u.ready = u.sinkCapability.promise; this.streamSinks[i] = u; new Promise((function (t) { t(a(e.data, u)) })).then((function () { o.postMessage({ sourceName: n, targetName: s, stream: f, streamId: i, success: !0 }) }), (function (e) { o.postMessage({ sourceName: n, targetName: s, stream: f, streamId: i, reason: g(e) }) })) } _processStreamMessage(e) { const t = e.streamId, a = this.sourceName, i = e.sourceName, n = this.comObj; switch (e.stream) { case f: e.success ? this.streamControllers[t].startCall.resolve() : this.streamControllers[t].startCall.reject(g(e.reason)); break; case d: e.success ? this.streamControllers[t].pullCall.resolve() : this.streamControllers[t].pullCall.reject(g(e.reason)); break; case u: if (!this.streamSinks[t]) { n.postMessage({ sourceName: a, targetName: i, stream: d, streamId: t, success: !0 }); break } this.streamSinks[t].desiredSize <= 0 && e.desiredSize > 0 && this.streamSinks[t].sinkCapability.resolve(); this.streamSinks[t].desiredSize = e.desiredSize; const { onPull: m } = this.streamSinks[e.streamId]; new Promise((function (e) { e(m && m()) })).then((function () { n.postMessage({ sourceName: a, targetName: i, stream: d, streamId: t, success: !0 }) }), (function (e) { n.postMessage({ sourceName: a, targetName: i, stream: d, streamId: t, reason: g(e) }) })); break; case l: (0, r.assert)(this.streamControllers[t], "enqueue should have stream controller"); if (this.streamControllers[t].isClosed) break; this.streamControllers[t].controller.enqueue(e.chunk); break; case c: (0, r.assert)(this.streamControllers[t], "close should have stream controller"); if (this.streamControllers[t].isClosed) break; this.streamControllers[t].isClosed = !0; this.streamControllers[t].controller.close(); this._deleteStreamController(t); break; case h: (0, r.assert)(this.streamControllers[t], "error should have stream controller"); this.streamControllers[t].controller.error(g(e.reason)); this._deleteStreamController(t); break; case o: e.success ? this.streamControllers[t].cancelCall.resolve() : this.streamControllers[t].cancelCall.reject(g(e.reason)); this._deleteStreamController(t); break; case s: if (!this.streamSinks[t]) break; const { onCancel: p } = this.streamSinks[e.streamId]; new Promise((function (t) { t(p && p(g(e.reason))) })).then((function () { n.postMessage({ sourceName: a, targetName: i, stream: o, streamId: t, success: !0 }) }), (function (e) { n.postMessage({ sourceName: a, targetName: i, stream: o, streamId: t, reason: g(e) }) })); this.streamSinks[t].sinkCapability.reject(g(e.reason)); this.streamSinks[t].isCancelled = !0; delete this.streamSinks[t]; break; default: throw new Error("Unexpected stream case") } } async _deleteStreamController(e) { await Promise.allSettled([this.streamControllers[e].startCall, this.streamControllers[e].pullCall, this.streamControllers[e].cancelCall].map((function (e) { return e && e.promise }))); delete this.streamControllers[e] } _postMessage(e, t) { t && this.postMessageTransfers ? this.comObj.postMessage(e, t) : this.comObj.postMessage(e) } destroy() { this.comObj.removeEventListener("message", this._onComObjOnMessage) } } }, function (e, t, a) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); t.PDFWorkerStream = void 0; var r = a(2); t.PDFWorkerStream = class { constructor(e) { this._msgHandler = e; this._contentLength = null; this._fullRequestReader = null; this._rangeRequestReaders = [] } getFullReader() { (0, r.assert)(!this._fullRequestReader); this._fullRequestReader = new i(this._msgHandler); return this._fullRequestReader } getRangeReader(e, t) { const a = new n(e, t, this._msgHandler); this._rangeRequestReaders.push(a); return a } cancelAllRequests(e) { this._fullRequestReader && this._fullRequestReader.cancel(e); this._rangeRequestReaders.slice(0).forEach((function (t) { t.cancel(e) })) } }; class i { constructor(e) { this._msgHandler = e; this.onProgress = null; this._contentLength = null; this._isRangeSupported = !1; this._isStreamingSupported = !1; const t = this._msgHandler.sendWithStream("GetReader"); this._reader = t.getReader(); this._headersReady = this._msgHandler.sendWithPromise("ReaderHeadersReady").then(e => { this._isStreamingSupported = e.isStreamingSupported; this._isRangeSupported = e.isRangeSupported; this._contentLength = e.contentLength }) } get headersReady() { return this._headersReady } get contentLength() { return this._contentLength } get isStreamingSupported() { return this._isStreamingSupported } get isRangeSupported() { return this._isRangeSupported } async read() { const { value: e, done: t } = await this._reader.read(); return t ? { value: void 0, done: !0 } : { value: e.buffer, done: !1 } } cancel(e) { this._reader.cancel(e) } } class n { constructor(e, t, a) { this._msgHandler = a; this.onProgress = null; const r = this._msgHandler.sendWithStream("GetRangeReader", { begin: e, end: t }); this._reader = r.getReader() } get isStreamingSupported() { return !1 } async read() { const { value: e, done: t } = await this._reader.read(); return t ? { value: void 0, done: !0 } : { value: e.buffer, done: !1 } } cancel(e) { this._reader.cancel(e) } } }]) }));
\ No newline at end of file diff --git a/src/server/public/assets/pdf.worker.js b/src/server/public/assets/pdf.worker.js new file mode 100644 index 000000000..1b4424b03 --- /dev/null +++ b/src/server/public/assets/pdf.worker.js @@ -0,0 +1,22 @@ +/** + * @licstart The following is the entire license notice for the + * Javascript code in this page + * + * Copyright 2020 Mozilla Foundation + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * @licend The above is the entire license notice for the + * Javascript code in this page + */ +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("pdfjs-dist/build/pdf.worker",[],t):"object"==typeof exports?exports["pdfjs-dist/build/pdf.worker"]=t():e["pdfjs-dist/build/pdf.worker"]=e.pdfjsWorker=t()}(this,(function(){return function(e){var t={};function a(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};e[r].call(i.exports,i,i.exports,a);i.l=!0;return i.exports}a.m=e;a.c=t;a.d=function(e,t,r){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})};a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"});Object.defineProperty(e,"__esModule",{value:!0})};a.t=function(e,t){1&t&&(e=a(e));if(8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);a.r(r);Object.defineProperty(r,"default",{enumerable:!0,value:e});if(2&t&&"string"!=typeof e)for(var i in e)a.d(r,i,function(t){return e[t]}.bind(null,i));return r};a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};a.d(t,"a",t);return t};a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};a.p="";return a(a.s=0)}([function(e,t,a){"use strict";const r=a(1);t.WorkerMessageHandler=r.WorkerMessageHandler},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.WorkerMessageHandler=t.WorkerTask=void 0;var r=a(2),i=a(4),n=a(5),s=a(44),o=a(45),c=a(46),l=a(7),h=function(){function e(e){this.name=e;this.terminated=!1;this._capability=(0,r.createPromiseCapability)()}e.prototype={get finished(){return this._capability.promise},finish(){this._capability.resolve()},terminate(){this.terminated=!0},ensureNotTerminated(){if(this.terminated)throw new Error("Worker task was terminated")}};return e}();t.WorkerTask=h;var u,d={setup(e,t){var a=!1;e.on("test",(function(t){if(a)return;a=!0;if(!(t instanceof Uint8Array)){e.send("test",null);return}const r=255===t[0];e.postMessageTransfers=r;e.send("test",{supportTransfers:r})}));e.on("configure",(function(e){(0,r.setVerbosityLevel)(e.verbosity)}));e.on("GetDocRequest",(function(e){return d.createDocumentHandler(e,t)}))},createDocumentHandler(e,t){var a,s=!1,u=null,d=[];const f=(0,r.getVerbosityLevel)(),g=e.apiVersion;if("2.4.456"!==g)throw new Error(`The API version "${g}" does not match `+'the Worker version "2.4.456".');const m=[];for(const e in[])m.push(e);if(m.length)throw new Error("The `Array.prototype` contains unexpected enumerable properties: "+m.join(", ")+"; thus breaking e.g. `for...in` iteration of `Array`s.");var p=e.docId,b=e.docBaseUrl,y=e.docId+"_worker",v=new o.MessageHandler(y,p,t);v.postMessageTransfers=e.postMessageTransfers;function w(){if(s)throw new Error("Worker was terminated")}function k(e){d.push(e)}function S(e){e.finish();var t=d.indexOf(e);d.splice(t,1)}async function C(e){await a.ensureDoc("checkHeader");await a.ensureDoc("parseStartXRef");await a.ensureDoc("parse",[e]);e||await a.ensureDoc("checkFirstPage");const[t,r]=await Promise.all([a.ensureDoc("numPages"),a.ensureDoc("fingerprint")]);return{numPages:t,fingerprint:r}}function x(e,t){var a,i=(0,r.createPromiseCapability)(),s=e.source;if(s.data){try{a=new n.LocalPdfManager(p,s.data,s.password,t,b);i.resolve(a)}catch(e){i.reject(e)}return i.promise}var o,l=[];try{o=new c.PDFWorkerStream(v)}catch(e){i.reject(e);return i.promise}var h=o.getFullReader();h.headersReady.then((function(){if(h.isRangeSupported){var e=s.disableAutoFetch||h.isStreamingSupported;a=new n.NetworkPdfManager(p,o,{msgHandler:v,password:s.password,length:h.contentLength,disableAutoFetch:e,rangeChunkSize:s.rangeChunkSize},t,b);for(let e=0;e<l.length;e++)a.sendProgressiveData(l[e]);l=[];i.resolve(a);u=null}})).catch((function(e){i.reject(e);u=null}));var d=0;new Promise((function(e,o){var c=function(e){try{w();if(e.done){a||function(){var e=(0,r.arraysToBytes)(l);s.length&&e.length!==s.length&&(0,r.warn)("reported HTTP length is different from actual");try{a=new n.LocalPdfManager(p,e,s.password,t,b);i.resolve(a)}catch(e){i.reject(e)}l=[]}();u=null;return}var f=e.value;d+=(0,r.arrayByteLength)(f);h.isStreamingSupported||v.send("DocProgress",{loaded:d,total:Math.max(d,h.contentLength||0)});a?a.sendProgressiveData(f):l.push(f);h.read().then(c,o)}catch(e){o(e)}};h.read().then(c,o)})).catch((function(e){i.reject(e);u=null}));u=function(e){o.cancelAllRequests(e)};return i.promise}v.on("GetPage",(function(e){return a.getPage(e.pageIndex).then((function(e){return Promise.all([a.ensure(e,"rotate"),a.ensure(e,"ref"),a.ensure(e,"userUnit"),a.ensure(e,"view")]).then((function([e,t,a,r]){return{rotate:e,ref:t,userUnit:a,view:r}}))}))}));v.on("GetPageIndex",(function(e){var t=i.Ref.get(e.ref.num,e.ref.gen);return a.pdfDocument.catalog.getPageIndex(t)}));v.on("GetDestinations",(function(e){return a.ensureCatalog("destinations")}));v.on("GetDestination",(function(e){return a.ensureCatalog("getDestination",[e.id])}));v.on("GetPageLabels",(function(e){return a.ensureCatalog("pageLabels")}));v.on("GetPageLayout",(function(e){return a.ensureCatalog("pageLayout")}));v.on("GetPageMode",(function(e){return a.ensureCatalog("pageMode")}));v.on("GetViewerPreferences",(function(e){return a.ensureCatalog("viewerPreferences")}));v.on("GetOpenAction",(function(e){return a.ensureCatalog("openAction")}));v.on("GetAttachments",(function(e){return a.ensureCatalog("attachments")}));v.on("GetJavaScript",(function(e){return a.ensureCatalog("javaScript")}));v.on("GetOutline",(function(e){return a.ensureCatalog("documentOutline")}));v.on("GetPermissions",(function(e){return a.ensureCatalog("permissions")}));v.on("GetMetadata",(function(e){return Promise.all([a.ensureDoc("documentInfo"),a.ensureCatalog("metadata")])}));v.on("GetData",(function(e){a.requestLoadedStream();return a.onLoadedStream().then((function(e){return e.bytes}))}));v.on("GetStats",(function(e){return a.pdfDocument.xref.stats}));v.on("GetAnnotations",(function({pageIndex:e,intent:t}){return a.getPage(e).then((function(e){return e.getAnnotationsData(t)}))}));v.on("GetOperatorList",(function(e,t){var i=e.pageIndex;a.getPage(i).then((function(a){var n=new h(`GetOperatorList: page ${i}`);k(n);const s=f>=r.VerbosityLevel.INFOS?Date.now():0;a.getOperatorList({handler:v,sink:t,task:n,intent:e.intent,renderInteractiveForms:e.renderInteractiveForms}).then((function(e){S(n);s&&(0,r.info)(`page=${i+1} - getOperatorList: time=`+`${Date.now()-s}ms, len=${e.length}`);t.close()}),(function(e){S(n);if(!n.terminated){v.send("UnsupportedFeature",{featureId:r.UNSUPPORTED_FEATURES.unknown});t.error(e)}}))}))}),this);v.on("GetTextContent",(function(e,t){var i=e.pageIndex;t.onPull=function(e){};t.onCancel=function(e){};a.getPage(i).then((function(a){var n=new h("GetTextContent: page "+i);k(n);const s=f>=r.VerbosityLevel.INFOS?Date.now():0;a.extractTextContent({handler:v,task:n,sink:t,normalizeWhitespace:e.normalizeWhitespace,combineTextItems:e.combineTextItems}).then((function(){S(n);s&&(0,r.info)(`page=${i+1} - getTextContent: time=`+`${Date.now()-s}ms`);t.close()}),(function(e){S(n);n.terminated||t.error(e)}))}))}));v.on("FontFallback",(function(e){return a.fontFallback(e.id,v)}));v.on("Cleanup",(function(e){return a.cleanup()}));v.on("Terminate",(function(e){s=!0;const t=[];if(a){a.terminate(new r.AbortException("Worker was terminated."));const e=a.cleanup();t.push(e);a=null}else(0,i.clearPrimitiveCaches)();u&&u(new r.AbortException("Worker was terminated."));d.forEach((function(e){t.push(e.finished);e.terminate()}));return Promise.all(t).then((function(){v.destroy();v=null}))}));v.on("Ready",(function(t){!function(e){function t(e){w();v.send("GetDoc",{pdfInfo:e})}function i(e){w();if(e instanceof r.PasswordException){var t=new h(`PasswordException: response ${e.code}`);k(t);v.sendWithPromise("PasswordRequest",e).then((function(e){S(t);a.updatePassword(e.password);n()})).catch((function(){S(t);v.send("DocException",e)}))}else e instanceof r.InvalidPDFException||e instanceof r.MissingPDFException||e instanceof r.UnexpectedResponseException||e instanceof r.UnknownErrorException?v.send("DocException",e):v.send("DocException",new r.UnknownErrorException(e.message,e.toString()))}function n(){w();C(!1).then(t,(function(e){w();if(e instanceof l.XRefParseException){a.requestLoadedStream();a.onLoadedStream().then((function(){w();C(!0).then(t,i)}))}else i(e)}),i)}w();x(e,{forceDataSchema:e.disableCreateObjectURL,maxImageSize:e.maxImageSize,disableFontFace:e.disableFontFace,nativeImageDecoderSupport:e.nativeImageDecoderSupport,ignoreErrors:e.ignoreErrors,isEvalSupported:e.isEvalSupported}).then((function(e){if(s){e.terminate(new r.AbortException("Worker was terminated."));throw new Error("Worker was terminated")}(a=e).onLoadedStream().then((function(e){v.send("DataLoaded",{length:e.bytes.byteLength})}))})).then(n,i)}(e);e=null}));return y},initializeFromPort(e){var t=new o.MessageHandler("worker","main",e);d.setup(t,e);t.send("ready",null)}};t.WorkerMessageHandler=d;"undefined"==typeof window&&!s.isNodeJS&&"undefined"!=typeof self&&("function"==typeof(u=self).postMessage&&"onmessage"in u)&&d.initializeFromPort(self)},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.arrayByteLength=d;t.arraysToBytes=function(e){const t=e.length;if(1===t&&e[0]instanceof Uint8Array)return e[0];let a=0;for(let r=0;r<t;r++)a+=d(e[r]);let r=0;const i=new Uint8Array(a);for(let a=0;a<t;a++){let t=e[a];t instanceof Uint8Array||(t="string"==typeof t?u(t):new Uint8Array(t));const n=t.byteLength;i.set(t,r);r+=n}return i};t.assert=o;t.bytesToString=function(e){o(null!==e&&"object"==typeof e&&void 0!==e.length,"Invalid argument for bytesToString");const t=e.length;if(t<8192)return String.fromCharCode.apply(null,e);const a=[];for(let r=0;r<t;r+=8192){const i=Math.min(r+8192,t),n=e.subarray(r,i);a.push(String.fromCharCode.apply(null,n))}return a.join("")};t.createPromiseCapability=function(){const e=Object.create(null);let t=!1;Object.defineProperty(e,"settled",{get:()=>t});e.promise=new Promise((function(a,r){e.resolve=function(e){t=!0;a(e)};e.reject=function(e){t=!0;r(e)}}));return e};t.getVerbosityLevel=function(){return i};t.info=function(e){i>=r.INFOS&&console.log(`Info: ${e}`)};t.isArrayBuffer=function(e){return"object"==typeof e&&null!==e&&void 0!==e.byteLength};t.isArrayEqual=function(e,t){if(e.length!==t.length)return!1;return e.every((function(e,a){return e===t[a]}))};t.isBool=function(e){return"boolean"==typeof e};t.isEmptyObj=function(e){for(const t in e)return!1;return!0};t.isNum=function(e){return"number"==typeof e};t.isString=function(e){return"string"==typeof e};t.isSameOrigin=function(e,t){let a;try{a=new URL(e);if(!a.origin||"null"===a.origin)return!1}catch(e){return!1}const r=new URL(t,a);return a.origin===r.origin};t.createValidAbsoluteUrl=function(e,t){if(!e)return null;try{const a=t?new URL(e,t):new URL(e);if(function(e){if(!e)return!1;switch(e.protocol){case"http:":case"https:":case"ftp:":case"mailto:":case"tel:":return!0;default:return!1}}(a))return a}catch(e){}return null};t.removeNullCharacters=function(e){if("string"!=typeof e){n("The argument for removeNullCharacters must be a string.");return e}return e.replace(h,"")};t.setVerbosityLevel=function(e){Number.isInteger(e)&&(i=e)};t.shadow=c;t.string32=function(e){return String.fromCharCode(e>>24&255,e>>16&255,e>>8&255,255&e)};t.stringToBytes=u;t.stringToPDFString=function(e){const t=e.length,a=[];if("þ"===e[0]&&"ÿ"===e[1])for(let r=2;r<t;r+=2)a.push(String.fromCharCode(e.charCodeAt(r)<<8|e.charCodeAt(r+1)));else if("ÿ"===e[0]&&"þ"===e[1])for(let r=2;r<t;r+=2)a.push(String.fromCharCode(e.charCodeAt(r+1)<<8|e.charCodeAt(r)));else for(let r=0;r<t;++r){const t=b[e.charCodeAt(r)];a.push(t?String.fromCharCode(t):e.charAt(r))}return a.join("")};t.stringToUTF8String=function(e){return decodeURIComponent(escape(e))};t.utf8StringToString=function(e){return unescape(encodeURIComponent(e))};t.warn=n;t.unreachable=s;t.IsEvalSupportedCached=t.IsLittleEndianCached=t.createObjectURL=t.FormatError=t.Util=t.UnknownErrorException=t.UnexpectedResponseException=t.TextRenderingMode=t.StreamType=t.PermissionFlag=t.PasswordResponses=t.PasswordException=t.NativeImageDecoding=t.MissingPDFException=t.InvalidPDFException=t.AbortException=t.CMapCompressionType=t.ImageKind=t.FontType=t.AnnotationType=t.AnnotationStateModelType=t.AnnotationReviewState=t.AnnotationReplyType=t.AnnotationMarkedState=t.AnnotationFlag=t.AnnotationFieldFlag=t.AnnotationBorderStyleType=t.UNSUPPORTED_FEATURES=t.VerbosityLevel=t.OPS=t.IDENTITY_MATRIX=t.FONT_IDENTITY_MATRIX=t.BaseException=void 0;a(3);t.IDENTITY_MATRIX=[1,0,0,1,0,0];t.FONT_IDENTITY_MATRIX=[.001,0,0,.001,0,0];t.NativeImageDecoding={NONE:"none",DECODE:"decode",DISPLAY:"display"};t.PermissionFlag={PRINT:4,MODIFY_CONTENTS:8,COPY:16,MODIFY_ANNOTATIONS:32,FILL_INTERACTIVE_FORMS:256,COPY_FOR_ACCESSIBILITY:512,ASSEMBLE:1024,PRINT_HIGH_QUALITY:2048};t.TextRenderingMode={FILL:0,STROKE:1,FILL_STROKE:2,INVISIBLE:3,FILL_ADD_TO_PATH:4,STROKE_ADD_TO_PATH:5,FILL_STROKE_ADD_TO_PATH:6,ADD_TO_PATH:7,FILL_STROKE_MASK:3,ADD_TO_PATH_FLAG:4};t.ImageKind={GRAYSCALE_1BPP:1,RGB_24BPP:2,RGBA_32BPP:3};t.AnnotationType={TEXT:1,LINK:2,FREETEXT:3,LINE:4,SQUARE:5,CIRCLE:6,POLYGON:7,POLYLINE:8,HIGHLIGHT:9,UNDERLINE:10,SQUIGGLY:11,STRIKEOUT:12,STAMP:13,CARET:14,INK:15,POPUP:16,FILEATTACHMENT:17,SOUND:18,MOVIE:19,WIDGET:20,SCREEN:21,PRINTERMARK:22,TRAPNET:23,WATERMARK:24,THREED:25,REDACT:26};t.AnnotationStateModelType={MARKED:"Marked",REVIEW:"Review"};t.AnnotationMarkedState={MARKED:"Marked",UNMARKED:"Unmarked"};t.AnnotationReviewState={ACCEPTED:"Accepted",REJECTED:"Rejected",CANCELLED:"Cancelled",COMPLETED:"Completed",NONE:"None"};t.AnnotationReplyType={GROUP:"Group",REPLY:"R"};t.AnnotationFlag={INVISIBLE:1,HIDDEN:2,PRINT:4,NOZOOM:8,NOROTATE:16,NOVIEW:32,READONLY:64,LOCKED:128,TOGGLENOVIEW:256,LOCKEDCONTENTS:512};t.AnnotationFieldFlag={READONLY:1,REQUIRED:2,NOEXPORT:4,MULTILINE:4096,PASSWORD:8192,NOTOGGLETOOFF:16384,RADIO:32768,PUSHBUTTON:65536,COMBO:131072,EDIT:262144,SORT:524288,FILESELECT:1048576,MULTISELECT:2097152,DONOTSPELLCHECK:4194304,DONOTSCROLL:8388608,COMB:16777216,RICHTEXT:33554432,RADIOSINUNISON:33554432,COMMITONSELCHANGE:67108864};t.AnnotationBorderStyleType={SOLID:1,DASHED:2,BEVELED:3,INSET:4,UNDERLINE:5};t.StreamType={UNKNOWN:"UNKNOWN",FLATE:"FLATE",LZW:"LZW",DCT:"DCT",JPX:"JPX",JBIG:"JBIG",A85:"A85",AHX:"AHX",CCF:"CCF",RLX:"RLX"};t.FontType={UNKNOWN:"UNKNOWN",TYPE1:"TYPE1",TYPE1C:"TYPE1C",CIDFONTTYPE0:"CIDFONTTYPE0",CIDFONTTYPE0C:"CIDFONTTYPE0C",TRUETYPE:"TRUETYPE",CIDFONTTYPE2:"CIDFONTTYPE2",TYPE3:"TYPE3",OPENTYPE:"OPENTYPE",TYPE0:"TYPE0",MMTYPE1:"MMTYPE1"};const r={ERRORS:0,WARNINGS:1,INFOS:5};t.VerbosityLevel=r;t.CMapCompressionType={NONE:0,BINARY:1,STREAM:2};t.OPS={dependency:1,setLineWidth:2,setLineCap:3,setLineJoin:4,setMiterLimit:5,setDash:6,setRenderingIntent:7,setFlatness:8,setGState:9,save:10,restore:11,transform:12,moveTo:13,lineTo:14,curveTo:15,curveTo2:16,curveTo3:17,closePath:18,rectangle:19,stroke:20,closeStroke:21,fill:22,eoFill:23,fillStroke:24,eoFillStroke:25,closeFillStroke:26,closeEOFillStroke:27,endPath:28,clip:29,eoClip:30,beginText:31,endText:32,setCharSpacing:33,setWordSpacing:34,setHScale:35,setLeading:36,setFont:37,setTextRenderingMode:38,setTextRise:39,moveText:40,setLeadingMoveText:41,setTextMatrix:42,nextLine:43,showText:44,showSpacedText:45,nextLineShowText:46,nextLineSetSpacingShowText:47,setCharWidth:48,setCharWidthAndBounds:49,setStrokeColorSpace:50,setFillColorSpace:51,setStrokeColor:52,setStrokeColorN:53,setFillColor:54,setFillColorN:55,setStrokeGray:56,setFillGray:57,setStrokeRGBColor:58,setFillRGBColor:59,setStrokeCMYKColor:60,setFillCMYKColor:61,shadingFill:62,beginInlineImage:63,beginImageData:64,endInlineImage:65,paintXObject:66,markPoint:67,markPointProps:68,beginMarkedContent:69,beginMarkedContentProps:70,endMarkedContent:71,beginCompat:72,endCompat:73,paintFormXObjectBegin:74,paintFormXObjectEnd:75,beginGroup:76,endGroup:77,beginAnnotations:78,endAnnotations:79,beginAnnotation:80,endAnnotation:81,paintJpegXObject:82,paintImageMaskXObject:83,paintImageMaskXObjectGroup:84,paintImageXObject:85,paintInlineImageXObject:86,paintInlineImageXObjectGroup:87,paintImageXObjectRepeat:88,paintImageMaskXObjectRepeat:89,paintSolidColorImageMask:90,constructPath:91};t.UNSUPPORTED_FEATURES={unknown:"unknown",forms:"forms",javaScript:"javaScript",smask:"smask",shadingPattern:"shadingPattern",font:"font"};t.PasswordResponses={NEED_PASSWORD:1,INCORRECT_PASSWORD:2};let i=r.WARNINGS;function n(e){i>=r.WARNINGS&&console.log(`Warning: ${e}`)}function s(e){throw new Error(e)}function o(e,t){e||s(t)}function c(e,t,a){Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!1});return a}const l=function(){function e(t){this.constructor===e&&s("Cannot initialize BaseException.");this.message=t;this.name=this.constructor.name}e.prototype=new Error;e.constructor=e;return e}();t.BaseException=l;t.PasswordException=class extends l{constructor(e,t){super(e);this.code=t}};t.UnknownErrorException=class extends l{constructor(e,t){super(e);this.details=t}};t.InvalidPDFException=class extends l{};t.MissingPDFException=class extends l{};t.UnexpectedResponseException=class extends l{constructor(e,t){super(e);this.status=t}};t.FormatError=class extends l{};t.AbortException=class extends l{};const h=/\x00/g;function u(e){o("string"==typeof e,"Invalid argument for stringToBytes");const t=e.length,a=new Uint8Array(t);for(let r=0;r<t;++r)a[r]=255&e.charCodeAt(r);return a}function d(e){if(void 0!==e.length)return e.length;o(void 0!==e.byteLength);return e.byteLength}const f={get value(){return c(this,"value",function(){const e=new Uint8Array(4);e[0]=1;return 1===new Uint32Array(e.buffer,0,1)[0]}())}};t.IsLittleEndianCached=f;const g={get value(){return c(this,"value",function(){try{new Function("");return!0}catch(e){return!1}}())}};t.IsEvalSupportedCached=g;const m=["rgb(",0,",",0,",",0,")"];class p{static makeCssRgb(e,t,a){m[1]=e;m[3]=t;m[5]=a;return m.join("")}static transform(e,t){return[e[0]*t[0]+e[2]*t[1],e[1]*t[0]+e[3]*t[1],e[0]*t[2]+e[2]*t[3],e[1]*t[2]+e[3]*t[3],e[0]*t[4]+e[2]*t[5]+e[4],e[1]*t[4]+e[3]*t[5]+e[5]]}static applyTransform(e,t){return[e[0]*t[0]+e[1]*t[2]+t[4],e[0]*t[1]+e[1]*t[3]+t[5]]}static applyInverseTransform(e,t){const a=t[0]*t[3]-t[1]*t[2];return[(e[0]*t[3]-e[1]*t[2]+t[2]*t[5]-t[4]*t[3])/a,(-e[0]*t[1]+e[1]*t[0]+t[4]*t[1]-t[5]*t[0])/a]}static getAxialAlignedBoundingBox(e,t){const a=p.applyTransform(e,t),r=p.applyTransform(e.slice(2,4),t),i=p.applyTransform([e[0],e[3]],t),n=p.applyTransform([e[2],e[1]],t);return[Math.min(a[0],r[0],i[0],n[0]),Math.min(a[1],r[1],i[1],n[1]),Math.max(a[0],r[0],i[0],n[0]),Math.max(a[1],r[1],i[1],n[1])]}static inverseTransform(e){const t=e[0]*e[3]-e[1]*e[2];return[e[3]/t,-e[1]/t,-e[2]/t,e[0]/t,(e[2]*e[5]-e[4]*e[3])/t,(e[4]*e[1]-e[5]*e[0])/t]}static apply3dTransform(e,t){return[e[0]*t[0]+e[1]*t[1]+e[2]*t[2],e[3]*t[0]+e[4]*t[1]+e[5]*t[2],e[6]*t[0]+e[7]*t[1]+e[8]*t[2]]}static singularValueDecompose2dScale(e){const t=[e[0],e[2],e[1],e[3]],a=e[0]*t[0]+e[1]*t[2],r=e[0]*t[1]+e[1]*t[3],i=e[2]*t[0]+e[3]*t[2],n=e[2]*t[1]+e[3]*t[3],s=(a+n)/2,o=Math.sqrt((a+n)*(a+n)-4*(a*n-i*r))/2,c=s+o||1,l=s-o||1;return[Math.sqrt(c),Math.sqrt(l)]}static normalizeRect(e){const t=e.slice(0);if(e[0]>e[2]){t[0]=e[2];t[2]=e[0]}if(e[1]>e[3]){t[1]=e[3];t[3]=e[1]}return t}static intersect(e,t){function a(e,t){return e-t}const r=[e[0],e[2],t[0],t[2]].sort(a),i=[e[1],e[3],t[1],t[3]].sort(a),n=[];e=p.normalizeRect(e);t=p.normalizeRect(t);if(!(r[0]===e[0]&&r[1]===t[0]||r[0]===t[0]&&r[1]===e[0]))return null;n[0]=r[1];n[2]=r[2];if(!(i[0]===e[1]&&i[1]===t[1]||i[0]===t[1]&&i[1]===e[1]))return null;n[1]=i[1];n[3]=i[2];return n}}t.Util=p;const b=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,728,711,710,729,733,731,730,732,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8226,8224,8225,8230,8212,8211,402,8260,8249,8250,8722,8240,8222,8220,8221,8216,8217,8218,8482,64257,64258,321,338,352,376,381,305,322,339,353,382,0,8364];const y=function(){const e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";return function(t,a,r=!1){if(!r&&URL.createObjectURL){const e=new Blob([t],{type:a});return URL.createObjectURL(e)}let i=`data:${a};base64,`;for(let a=0,r=t.length;a<r;a+=3){const n=255&t[a],s=255&t[a+1],o=255&t[a+2];i+=e[n>>2]+e[(3&n)<<4|s>>4]+e[a+1<r?(15&s)<<2|o>>6:64]+e[a+2<r?63&o:64]}return i}}();t.createObjectURL=y},function(e,t,a){},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.clearPrimitiveCaches=function(){n._clearCache();i._clearCache();o._clearCache()};t.isEOF=function(e){return e===r};t.isCmd=function(e,t){return e instanceof n&&(void 0===t||e.cmd===t)};t.isDict=u;t.isName=h;t.isRef=function(e){return e instanceof o};t.isRefsEqual=function(e,t){return e.num===t.num&&e.gen===t.gen};t.isStream=function(e){return"object"==typeof e&&null!==e&&void 0!==e.getBytes};t.RefSetCache=t.RefSet=t.Ref=t.Name=t.Dict=t.Cmd=t.EOF=void 0;a(2);var r={};t.EOF=r;var i=function(){let e=Object.create(null);function t(e){this.name=e}t.prototype={};t.get=function(a){var r=e[a];return r||(e[a]=new t(a))};t._clearCache=function(){e=Object.create(null)};return t}();t.Name=i;var n=function(){let e=Object.create(null);function t(e){this.cmd=e}t.prototype={};t.get=function(a){var r=e[a];return r||(e[a]=new t(a))};t._clearCache=function(){e=Object.create(null)};return t}();t.Cmd=n;var s=function(){var e=function(){return e};function t(t){this._map=Object.create(null);this.xref=t;this.objId=null;this.suppressEncryption=!1;this.__nonSerializable__=e}t.prototype={assignXref:function(e){this.xref=e},get(e,t,a){let r=this._map[e];if(void 0===r&&void 0!==t){r=this._map[t];void 0===r&&void 0!==a&&(r=this._map[a])}return r instanceof o&&this.xref?this.xref.fetch(r,this.suppressEncryption):r},async getAsync(e,t,a){let r=this._map[e];if(void 0===r&&void 0!==t){r=this._map[t];void 0===r&&void 0!==a&&(r=this._map[a])}return r instanceof o&&this.xref?this.xref.fetchAsync(r,this.suppressEncryption):r},getArray(e,t,a){let r=this.get(e,t,a);if(!Array.isArray(r)||!this.xref)return r;r=r.slice();for(let e=0,t=r.length;e<t;e++)r[e]instanceof o&&(r[e]=this.xref.fetch(r[e],this.suppressEncryption));return r},getRaw:function(e){return this._map[e]},getKeys:function(){return Object.keys(this._map)},set:function(e,t){this._map[e]=t},has:function(e){return void 0!==this._map[e]},forEach:function(e){for(var t in this._map)e(t,this.get(t))}};t.empty=new t(null);t.merge=function(e,a){const r=new t(e);for(let e=0,t=a.length;e<t;e++){const t=a[e];if(u(t))for(const e in t._map)void 0===r._map[e]&&(r._map[e]=t._map[e])}return r};return t}();t.Dict=s;var o=function(){let e=Object.create(null);function t(e,t){this.num=e;this.gen=t}t.prototype={toString:function(){return 0===this.gen?`${this.num}R`:`${this.num}R${this.gen}`}};t.get=function(a,r){const i=0===r?`${a}R`:`${a}R${r}`,n=e[i];return n||(e[i]=new t(a,r))};t._clearCache=function(){e=Object.create(null)};return t}();t.Ref=o;var c=function(){function e(){this.dict=Object.create(null)}e.prototype={has:function(e){return e.toString()in this.dict},put:function(e){this.dict[e.toString()]=!0},remove:function(e){delete this.dict[e.toString()]}};return e}();t.RefSet=c;var l=function(){function e(){this.dict=Object.create(null)}e.prototype={get:function(e){return this.dict[e.toString()]},has:function(e){return e.toString()in this.dict},put:function(e,t){this.dict[e.toString()]=t},putAlias:function(e,t){this.dict[e.toString()]=this.get(t)},forEach:function(e){for(const t in this.dict)e(this.dict[t])},clear:function(){this.dict=Object.create(null)}};return e}();t.RefSetCache=l;function h(e,t){return e instanceof i&&(void 0===t||e.name===t)}function u(e,t){return e instanceof s&&(void 0===t||h(e.get("Type"),t))}},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.NetworkPdfManager=t.LocalPdfManager=void 0;var r=a(2),i=a(6),n=a(7),s=a(8),o=a(11);class c{constructor(){this.constructor===c&&(0,r.unreachable)("Cannot initialize BasePdfManager.")}get docId(){return this._docId}get password(){return this._password}get docBaseUrl(){let e=null;if(this._docBaseUrl){const t=(0,r.createValidAbsoluteUrl)(this._docBaseUrl);t?e=t.href:(0,r.warn)(`Invalid absolute docBaseUrl: "${this._docBaseUrl}".`)}return(0,r.shadow)(this,"docBaseUrl",e)}onLoadedStream(){(0,r.unreachable)("Abstract method `onLoadedStream` called")}ensureDoc(e,t){return this.ensure(this.pdfDocument,e,t)}ensureXRef(e,t){return this.ensure(this.pdfDocument.xref,e,t)}ensureCatalog(e,t){return this.ensure(this.pdfDocument.catalog,e,t)}getPage(e){return this.pdfDocument.getPage(e)}fontFallback(e,t){return this.pdfDocument.fontFallback(e,t)}cleanup(){return this.pdfDocument.cleanup()}async ensure(e,t,a){(0,r.unreachable)("Abstract method `ensure` called")}requestRange(e,t){(0,r.unreachable)("Abstract method `requestRange` called")}requestLoadedStream(){(0,r.unreachable)("Abstract method `requestLoadedStream` called")}sendProgressiveData(e){(0,r.unreachable)("Abstract method `sendProgressiveData` called")}updatePassword(e){this._password=e}terminate(e){(0,r.unreachable)("Abstract method `terminate` called")}}t.LocalPdfManager=class extends c{constructor(e,t,a,r,i){super();this._docId=e;this._password=a;this._docBaseUrl=i;this.evaluatorOptions=r;const n=new o.Stream(t);this.pdfDocument=new s.PDFDocument(this,n);this._loadedStreamPromise=Promise.resolve(n)}async ensure(e,t,a){const r=e[t];return"function"==typeof r?r.apply(e,a):r}requestRange(e,t){return Promise.resolve()}requestLoadedStream(){}onLoadedStream(){return this._loadedStreamPromise}terminate(e){}};t.NetworkPdfManager=class extends c{constructor(e,t,a,r,n){super();this._docId=e;this._password=a.password;this._docBaseUrl=n;this.msgHandler=a.msgHandler;this.evaluatorOptions=r;this.streamManager=new i.ChunkedStreamManager(t,{msgHandler:a.msgHandler,length:a.length,disableAutoFetch:a.disableAutoFetch,rangeChunkSize:a.rangeChunkSize});this.pdfDocument=new s.PDFDocument(this,this.streamManager.getStream())}async ensure(e,t,a){try{const r=e[t];return"function"==typeof r?r.apply(e,a):r}catch(r){if(!(r instanceof n.MissingDataException))throw r;await this.requestRange(r.begin,r.end);return this.ensure(e,t,a)}}requestRange(e,t){return this.streamManager.requestRange(e,t)}requestLoadedStream(){this.streamManager.requestAllChunks()}sendProgressiveData(e){this.streamManager.onReceiveData({chunk:e})}onLoadedStream(){return this.streamManager.onLoadedStream()}terminate(e){this.streamManager.abort(e)}}},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.ChunkedStreamManager=t.ChunkedStream=void 0;var r=a(2),i=a(7);class n{constructor(e,t,a){this.bytes=new Uint8Array(e);this.start=0;this.pos=0;this.end=e;this.chunkSize=t;this.loadedChunks=[];this.numChunksLoaded=0;this.numChunks=Math.ceil(e/t);this.manager=a;this.progressiveDataLength=0;this.lastSuccessfulEnsureByteChunk=-1}getMissingChunks(){const e=[];for(let t=0,a=this.numChunks;t<a;++t)this.loadedChunks[t]||e.push(t);return e}getBaseStreams(){return[this]}allChunksLoaded(){return this.numChunksLoaded===this.numChunks}onReceiveData(e,t){const a=this.chunkSize;if(e%a!=0)throw new Error(`Bad begin offset: ${e}`);const r=e+t.byteLength;if(r%a!=0&&r!==this.bytes.length)throw new Error(`Bad end offset: ${r}`);this.bytes.set(new Uint8Array(t),e);const i=Math.floor(e/a),n=Math.floor((r-1)/a)+1;for(let e=i;e<n;++e)if(!this.loadedChunks[e]){this.loadedChunks[e]=!0;++this.numChunksLoaded}}onReceiveProgressiveData(e){let t=this.progressiveDataLength;const a=Math.floor(t/this.chunkSize);this.bytes.set(new Uint8Array(e),t);t+=e.byteLength;this.progressiveDataLength=t;const r=t>=this.end?this.numChunks:Math.floor(t/this.chunkSize);for(let e=a;e<r;++e)if(!this.loadedChunks[e]){this.loadedChunks[e]=!0;++this.numChunksLoaded}}ensureByte(e){if(e<this.progressiveDataLength)return;const t=Math.floor(e/this.chunkSize);if(t!==this.lastSuccessfulEnsureByteChunk){if(!this.loadedChunks[t])throw new i.MissingDataException(e,e+1);this.lastSuccessfulEnsureByteChunk=t}}ensureRange(e,t){if(e>=t)return;if(t<=this.progressiveDataLength)return;const a=this.chunkSize,r=Math.floor(e/a),n=Math.floor((t-1)/a)+1;for(let a=r;a<n;++a)if(!this.loadedChunks[a])throw new i.MissingDataException(e,t)}nextEmptyChunk(e){const t=this.numChunks;for(let a=0;a<t;++a){const r=(e+a)%t;if(!this.loadedChunks[r])return r}return null}hasChunk(e){return!!this.loadedChunks[e]}get length(){return this.end-this.start}get isEmpty(){return 0===this.length}getByte(){const e=this.pos;if(e>=this.end)return-1;e>=this.progressiveDataLength&&this.ensureByte(e);return this.bytes[this.pos++]}getUint16(){const e=this.getByte(),t=this.getByte();return-1===e||-1===t?-1:(e<<8)+t}getInt32(){return(this.getByte()<<24)+(this.getByte()<<16)+(this.getByte()<<8)+this.getByte()}getBytes(e,t=!1){const a=this.bytes,r=this.pos,i=this.end;if(!e){i>this.progressiveDataLength&&this.ensureRange(r,i);const e=a.subarray(r,i);return t?new Uint8ClampedArray(e):e}let n=r+e;n>i&&(n=i);n>this.progressiveDataLength&&this.ensureRange(r,n);this.pos=n;const s=a.subarray(r,n);return t?new Uint8ClampedArray(s):s}peekByte(){const e=this.getByte();-1!==e&&this.pos--;return e}peekBytes(e,t=!1){const a=this.getBytes(e,t);this.pos-=a.length;return a}getByteRange(e,t){e<0&&(e=0);t>this.end&&(t=this.end);t>this.progressiveDataLength&&this.ensureRange(e,t);return this.bytes.subarray(e,t)}skip(e){e||(e=1);this.pos+=e}reset(){this.pos=this.start}moveStart(){this.start=this.pos}makeSubStream(e,t,a){t?e+t>this.progressiveDataLength&&this.ensureRange(e,e+t):e>=this.progressiveDataLength&&this.ensureByte(e);function r(){}r.prototype=Object.create(this);r.prototype.getMissingChunks=function(){const e=this.chunkSize,t=Math.floor(this.start/e),a=Math.floor((this.end-1)/e)+1,r=[];for(let e=t;e<a;++e)this.loadedChunks[e]||r.push(e);return r};r.prototype.allChunksLoaded=function(){return this.numChunksLoaded===this.numChunks||0===this.getMissingChunks().length};const i=new r;i.pos=i.start=e;i.end=e+t||this.end;i.dict=a;return i}}t.ChunkedStream=n;t.ChunkedStreamManager=class{constructor(e,t){this.length=t.length;this.chunkSize=t.rangeChunkSize;this.stream=new n(this.length,this.chunkSize,this);this.pdfNetworkStream=e;this.disableAutoFetch=t.disableAutoFetch;this.msgHandler=t.msgHandler;this.currRequestId=0;this.chunksNeededByRequest=Object.create(null);this.requestsByChunk=Object.create(null);this.promisesByRequest=Object.create(null);this.progressiveDataLength=0;this.aborted=!1;this._loadedStreamCapability=(0,r.createPromiseCapability)()}onLoadedStream(){return this._loadedStreamCapability.promise}sendRequest(e,t){const a=this.pdfNetworkStream.getRangeReader(e,t);a.isStreamingSupported||(a.onProgress=this.onProgress.bind(this));let i=[],n=0;new Promise((e,t)=>{const s=o=>{try{if(!o.done){const e=o.value;i.push(e);n+=(0,r.arrayByteLength)(e);a.isStreamingSupported&&this.onProgress({loaded:n});a.read().then(s,t);return}const c=(0,r.arraysToBytes)(i);i=null;e(c)}catch(e){t(e)}};a.read().then(s,t)}).then(t=>{this.aborted||this.onReceiveData({chunk:t,begin:e})})}requestAllChunks(){const e=this.stream.getMissingChunks();this._requestChunks(e);return this._loadedStreamCapability.promise}_requestChunks(e){const t=this.currRequestId++,a=Object.create(null);this.chunksNeededByRequest[t]=a;for(const t of e)this.stream.hasChunk(t)||(a[t]=!0);if((0,r.isEmptyObj)(a))return Promise.resolve();const i=(0,r.createPromiseCapability)();this.promisesByRequest[t]=i;const n=[];for(let e in a){e|=0;if(!(e in this.requestsByChunk)){this.requestsByChunk[e]=[];n.push(e)}this.requestsByChunk[e].push(t)}if(!n.length)return i.promise;const s=this.groupChunks(n);for(const e of s){const t=e.beginChunk*this.chunkSize,a=Math.min(e.endChunk*this.chunkSize,this.length);this.sendRequest(t,a)}return i.promise}getStream(){return this.stream}requestRange(e,t){t=Math.min(t,this.length);const a=this.getBeginChunk(e),r=this.getEndChunk(t),i=[];for(let e=a;e<r;++e)i.push(e);return this._requestChunks(i)}requestRanges(e=[]){const t=[];for(const a of e){const e=this.getBeginChunk(a.begin),r=this.getEndChunk(a.end);for(let a=e;a<r;++a)t.includes(a)||t.push(a)}t.sort((function(e,t){return e-t}));return this._requestChunks(t)}groupChunks(e){const t=[];let a=-1,r=-1;for(let i=0,n=e.length;i<n;++i){const n=e[i];a<0&&(a=n);if(r>=0&&r+1!==n){t.push({beginChunk:a,endChunk:r+1});a=n}i+1===e.length&&t.push({beginChunk:a,endChunk:n+1});r=n}return t}onProgress(e){this.msgHandler.send("DocProgress",{loaded:this.stream.numChunksLoaded*this.chunkSize+e.loaded,total:this.length})}onReceiveData(e){const t=e.chunk,a=void 0===e.begin,i=a?this.progressiveDataLength:e.begin,n=i+t.byteLength,s=Math.floor(i/this.chunkSize),o=n<this.length?Math.floor(n/this.chunkSize):Math.ceil(n/this.chunkSize);if(a){this.stream.onReceiveProgressiveData(t);this.progressiveDataLength=n}else this.stream.onReceiveData(i,t);this.stream.allChunksLoaded()&&this._loadedStreamCapability.resolve(this.stream);const c=[];for(let e=s;e<o;++e){const t=this.requestsByChunk[e]||[];delete this.requestsByChunk[e];for(const a of t){const t=this.chunksNeededByRequest[a];e in t&&delete t[e];(0,r.isEmptyObj)(t)&&c.push(a)}}if(!this.disableAutoFetch&&(0,r.isEmptyObj)(this.requestsByChunk)){let e;if(1===this.stream.numChunksLoaded){const t=this.stream.numChunks-1;this.stream.hasChunk(t)||(e=t)}else e=this.stream.nextEmptyChunk(o);Number.isInteger(e)&&this._requestChunks([e])}for(const e of c){const t=this.promisesByRequest[e];delete this.promisesByRequest[e];t.resolve()}this.msgHandler.send("DocProgress",{loaded:this.stream.numChunksLoaded*this.chunkSize,total:this.length})}onError(e){this._loadedStreamCapability.reject(e)}getBeginChunk(e){return Math.floor(e/this.chunkSize)}getEndChunk(e){return Math.floor((e-1)/this.chunkSize)+1}abort(e){this.aborted=!0;this.pdfNetworkStream&&this.pdfNetworkStream.cancelAllRequests(e);for(const t in this.promisesByRequest)this.promisesByRequest[t].reject(e)}}},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.getLookupTableFactory=function(e){let t;return function(){if(e){t=Object.create(null);e(t);e=null}return t}};t.getInheritableProperty=function({dict:e,key:t,getArray:a=!1,stopWhenFound:i=!0}){let n,s=0;for(;e;){const o=a?e.getArray(t):e.get(t);if(void 0!==o){if(i)return o;n||(n=[]);n.push(o)}if(++s>100){(0,r.warn)(`getInheritableProperty: maximum loop count exceeded for "${t}"`);break}e=e.get("Parent")}return n};t.toRomanNumerals=function(e,t=!1){(0,r.assert)(Number.isInteger(e)&&e>0,"The number should be a positive integer.");const a=[];let i;for(;e>=1e3;){e-=1e3;a.push("M")}i=e/100|0;e%=100;a.push(o[i]);i=e/10|0;e%=10;a.push(o[10+i]);a.push(o[20+e]);const n=a.join("");return t?n.toLowerCase():n};t.log2=function(e){if(e<=0)return 0;return Math.ceil(Math.log2(e))};t.readInt8=function(e,t){return e[t]<<24>>24};t.readUint16=function(e,t){return e[t]<<8|e[t+1]};t.readUint32=function(e,t){return(e[t]<<24|e[t+1]<<16|e[t+2]<<8|e[t+3])>>>0};t.isWhiteSpace=function(e){return 32===e||9===e||13===e||10===e};t.XRefParseException=t.XRefEntryException=t.MissingDataException=void 0;var r=a(2);class i extends r.BaseException{constructor(e,t){super(`Missing data [${e}, ${t})`);this.begin=e;this.end=t}}t.MissingDataException=i;class n extends r.BaseException{}t.XRefEntryException=n;class s extends r.BaseException{}t.XRefParseException=s;const o=["","C","CC","CCC","CD","D","DC","DCC","DCCC","CM","","X","XX","XXX","XL","L","LX","LXX","LXXX","XC","","I","II","III","IV","V","VI","VII","VIII","IX"]},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.PDFDocument=t.Page=void 0;var r=a(2),i=a(9),n=a(4),s=a(7),o=a(11),c=a(23),l=a(21),h=a(10),u=a(24),d=a(25),f=a(39);const g=[0,0,612,792];function m(e,t){return"display"===t&&e.viewable||"print"===t&&e.printable}class p{constructor({pdfManager:e,xref:t,pageIndex:a,pageDict:r,ref:i,fontCache:n,builtInCMapCache:s,pdfFunctionFactory:o}){this.pdfManager=e;this.pageIndex=a;this.pageDict=r;this.xref=t;this.ref=i;this.fontCache=n;this.builtInCMapCache=s;this.pdfFunctionFactory=o;this.evaluatorOptions=e.evaluatorOptions;this.resourcesPromise=null;const c={obj:0};this.idFactory={createObjId:()=>`p${a}_${++c.obj}`,getDocId:()=>`g_${e.docId}`}}_getInheritableProperty(e,t=!1){const a=(0,s.getInheritableProperty)({dict:this.pageDict,key:e,getArray:t,stopWhenFound:!1});return Array.isArray(a)?1!==a.length&&(0,n.isDict)(a[0])?n.Dict.merge(this.xref,a):a[0]:a}get content(){return this.pageDict.get("Contents")}get resources(){return(0,r.shadow)(this,"resources",this._getInheritableProperty("Resources")||n.Dict.empty)}_getBoundingBox(e){const t=this._getInheritableProperty(e,!0);if(Array.isArray(t)&&4===t.length){if(t[2]-t[0]!=0&&t[3]-t[1]!=0)return t;(0,r.warn)(`Empty /${e} entry.`)}return null}get mediaBox(){return(0,r.shadow)(this,"mediaBox",this._getBoundingBox("MediaBox")||g)}get cropBox(){return(0,r.shadow)(this,"cropBox",this._getBoundingBox("CropBox")||this.mediaBox)}get userUnit(){let e=this.pageDict.get("UserUnit");(!(0,r.isNum)(e)||e<=0)&&(e=1);return(0,r.shadow)(this,"userUnit",e)}get view(){const{cropBox:e,mediaBox:t}=this;let a;if(e===t||(0,r.isArrayEqual)(e,t))a=t;else{const i=r.Util.intersect(e,t);i&&i[2]-i[0]!=0&&i[3]-i[1]!=0?a=i:(0,r.warn)("Empty /CropBox and /MediaBox intersection.")}return(0,r.shadow)(this,"view",a||t)}get rotate(){let e=this._getInheritableProperty("Rotate")||0;e%90!=0?e=0:e>=360?e%=360:e<0&&(e=(e%360+360)%360);return(0,r.shadow)(this,"rotate",e)}getContentStream(){const e=this.content;let t;if(Array.isArray(e)){const a=this.xref,r=[];for(const t of e)r.push(a.fetchIfRef(t));t=new o.StreamsSequenceStream(r)}else t=(0,n.isStream)(e)?e:new o.NullStream;return t}loadResources(e){this.resourcesPromise||(this.resourcesPromise=this.pdfManager.ensure(this,"resources"));return this.resourcesPromise.then(()=>new i.ObjectLoader(this.resources,e,this.xref).load())}getOperatorList({handler:e,sink:t,task:a,intent:i,renderInteractiveForms:n}){const s=this.pdfManager.ensure(this,"getContentStream"),o=this.loadResources(["ExtGState","ColorSpace","Pattern","Shading","XObject","Font"]),c=new d.PartialEvaluator({xref:this.xref,handler:e,pageIndex:this.pageIndex,idFactory:this.idFactory,fontCache:this.fontCache,builtInCMapCache:this.builtInCMapCache,options:this.evaluatorOptions,pdfFunctionFactory:this.pdfFunctionFactory}),l=Promise.all([s,o]).then(([r])=>{const n=new u.OperatorList(i,t,this.pageIndex);e.send("StartRenderPage",{transparency:c.hasBlendModes(this.resources),pageIndex:this.pageIndex,intent:i});return c.getOperatorList({stream:r,task:a,resources:this.resources,operatorList:n}).then((function(){return n}))});return Promise.all([l,this._parsedAnnotations]).then((function([e,t]){if(0===t.length){e.flush(!0);return{length:e.totalLength}}const s=[];for(const e of t)m(e,i)&&s.push(e.getOperatorList(c,a,n));return Promise.all(s).then((function(t){e.addOp(r.OPS.beginAnnotations,[]);for(const a of t)e.addOpList(a);e.addOp(r.OPS.endAnnotations,[]);e.flush(!0);return{length:e.totalLength}}))}))}extractTextContent({handler:e,task:t,normalizeWhitespace:a,sink:r,combineTextItems:i}){const n=this.pdfManager.ensure(this,"getContentStream"),s=this.loadResources(["ExtGState","XObject","Font"]);return Promise.all([n,s]).then(([n])=>new d.PartialEvaluator({xref:this.xref,handler:e,pageIndex:this.pageIndex,idFactory:this.idFactory,fontCache:this.fontCache,builtInCMapCache:this.builtInCMapCache,options:this.evaluatorOptions,pdfFunctionFactory:this.pdfFunctionFactory}).getTextContent({stream:n,task:t,resources:this.resources,normalizeWhitespace:a,combineTextItems:i,sink:r}))}getAnnotationsData(e){return this._parsedAnnotations.then((function(t){const a=[];for(let r=0,i=t.length;r<i;r++)e&&!m(t[r],e)||a.push(t[r].data);return a}))}get annotations(){return(0,r.shadow)(this,"annotations",this._getInheritableProperty("Annots")||[])}get _parsedAnnotations(){const e=this.pdfManager.ensure(this,"annotations").then(()=>{const e=this.annotations,t=[];for(let a=0,r=e.length;a<r;a++)t.push(c.AnnotationFactory.create(this.xref,e[a],this.pdfManager,this.idFactory));return Promise.all(t).then((function(e){return e.filter((function(e){return!!e}))}),(function(e){(0,r.warn)(`_parsedAnnotations: "${e}".`);return[]}))});return(0,r.shadow)(this,"_parsedAnnotations",e)}}t.Page=p;const b=new Uint8Array([37,80,68,70,45]),y=new Uint8Array([115,116,97,114,116,120,114,101,102]),v=new Uint8Array([101,110,100,111,98,106]),w=/^[1-9]\.[0-9]$/;function k(e,t,a=1024,r=!1){const i=t.length,n=e.peekBytes(a),s=n.length-i;if(s<=0)return!1;if(r){const a=i-1;let r=n.length-1;for(;r>=a;){let s=0;for(;s<i&&n[r-s]===t[a-s];)s++;if(s>=i){e.pos+=r-a;return!0}r--}}else{let a=0;for(;a<=s;){let r=0;for(;r<i&&n[a+r]===t[r];)r++;if(r>=i){e.pos+=a;return!0}a++}}return!1}t.PDFDocument=class{constructor(e,t){let a;if((0,n.isStream)(t))a=t;else{if(!(0,r.isArrayBuffer)(t))throw new Error("PDFDocument: Unknown argument type");a=new o.Stream(t)}if(a.length<=0)throw new r.InvalidPDFException("The PDF file is empty, i.e. its size is zero bytes.");this.pdfManager=e;this.stream=a;this.xref=new i.XRef(a,e);this.pdfFunctionFactory=new f.PDFFunctionFactory({xref:this.xref,isEvalSupported:e.evaluatorOptions.isEvalSupported});this._pagePromises=[]}parse(e){this.setup(e);const t=this.catalog.catDict.get("Version");(0,n.isName)(t)&&(this.pdfFormatVersion=t.name);try{this.acroForm=this.catalog.catDict.get("AcroForm");if(this.acroForm){this.xfa=this.acroForm.get("XFA");const e=this.acroForm.get("Fields");Array.isArray(e)&&0!==e.length||this.xfa||(this.acroForm=null)}}catch(e){if(e instanceof s.MissingDataException)throw e;(0,r.info)("Cannot fetch AcroForm entry; assuming no AcroForms are present");this.acroForm=null}try{const e=this.catalog.catDict.get("Collection");(0,n.isDict)(e)&&e.getKeys().length>0&&(this.collection=e)}catch(e){if(e instanceof s.MissingDataException)throw e;(0,r.info)("Cannot fetch Collection dictionary.")}}get linearization(){let e=null;try{e=h.Linearization.create(this.stream)}catch(e){if(e instanceof s.MissingDataException)throw e;(0,r.info)(e)}return(0,r.shadow)(this,"linearization",e)}get startXRef(){const e=this.stream;let t=0;if(this.linearization){e.reset();k(e,v)&&(t=e.pos+6-e.start)}else{const a=1024,r=y.length;let i=!1,n=e.end;for(;!i&&n>0;){n-=a-r;n<0&&(n=0);e.pos=n;i=k(e,y,a,!0)}if(i){e.skip(9);let a;do{a=e.getByte()}while((0,s.isWhiteSpace)(a));let r="";for(;a>=32&&a<=57;){r+=String.fromCharCode(a);a=e.getByte()}t=parseInt(r,10);isNaN(t)&&(t=0)}}return(0,r.shadow)(this,"startXRef",t)}checkHeader(){const e=this.stream;e.reset();if(!k(e,b))return;e.moveStart();let t,a="";for(;(t=e.getByte())>32&&!(a.length>=12);)a+=String.fromCharCode(t);this.pdfFormatVersion||(this.pdfFormatVersion=a.substring(5))}parseStartXRef(){this.xref.setStartXRef(this.startXRef)}setup(e){this.xref.parse(e);this.catalog=new i.Catalog(this.pdfManager,this.xref)}get numPages(){const e=this.linearization,t=e?e.numPages:this.catalog.numPages;return(0,r.shadow)(this,"numPages",t)}get documentInfo(){const e={Title:r.isString,Author:r.isString,Subject:r.isString,Keywords:r.isString,Creator:r.isString,Producer:r.isString,CreationDate:r.isString,ModDate:r.isString,Trapped:n.isName};let t=this.pdfFormatVersion;if("string"!=typeof t||!w.test(t)){(0,r.warn)(`Invalid PDF header version number: ${t}`);t=null}const a={PDFFormatVersion:t,IsLinearized:!!this.linearization,IsAcroFormPresent:!!this.acroForm,IsXFAPresent:!!this.xfa,IsCollectionPresent:!!this.collection};let i;try{i=this.xref.trailer.get("Info")}catch(e){if(e instanceof s.MissingDataException)throw e;(0,r.info)("The document information dictionary is invalid.")}if((0,n.isDict)(i))for(const t of i.getKeys()){const s=i.get(t);if(e[t])e[t](s)?a[t]="string"!=typeof s?s:(0,r.stringToPDFString)(s):(0,r.info)(`Bad value in document info for "${t}".`);else if("string"==typeof t){let e;if((0,r.isString)(s))e=(0,r.stringToPDFString)(s);else{if(!((0,n.isName)(s)||(0,r.isNum)(s)||(0,r.isBool)(s))){(0,r.info)(`Unsupported value in document info for (custom) "${t}".`);continue}e=s}a.Custom||(a.Custom=Object.create(null));a.Custom[t]=e}}return(0,r.shadow)(this,"documentInfo",a)}get fingerprint(){let e;const t=this.xref.trailer.get("ID");e=Array.isArray(t)&&t[0]&&(0,r.isString)(t[0])&&"\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0"!==t[0]?(0,r.stringToBytes)(t[0]):(0,l.calculateMD5)(this.stream.getByteRange(0,1024),0,1024);const a=[];for(let t=0,r=e.length;t<r;t++){const r=e[t].toString(16);a.push(r.padStart(2,"0"))}return(0,r.shadow)(this,"fingerprint",a.join(""))}_getLinearizationPage(e){const{catalog:t,linearization:a}=this;(0,r.assert)(a&&a.pageFirst===e);const i=n.Ref.get(a.objectNumberFirst,0);return this.xref.fetchAsync(i).then(e=>{if((0,n.isDict)(e,"Page")||(0,n.isDict)(e)&&!e.has("Type")&&e.has("Contents")){i&&!t.pageKidsCountCache.has(i)&&t.pageKidsCountCache.put(i,1);return[e,i]}throw new r.FormatError("The Linearization dictionary doesn't point to a valid Page dictionary.")}).catch(a=>{(0,r.info)(a);return t.getPageDict(e)})}getPage(e){if(void 0!==this._pagePromises[e])return this._pagePromises[e];const{catalog:t,linearization:a}=this,r=a&&a.pageFirst===e?this._getLinearizationPage(e):t.getPageDict(e);return this._pagePromises[e]=r.then(([a,r])=>new p({pdfManager:this.pdfManager,xref:this.xref,pageIndex:e,pageDict:a,ref:r,fontCache:t.fontCache,builtInCMapCache:t.builtInCMapCache,pdfFunctionFactory:this.pdfFunctionFactory}))}checkFirstPage(){return this.getPage(0).catch(async e=>{if(e instanceof s.XRefEntryException){this._pagePromises.length=0;await this.cleanup();throw new s.XRefParseException}})}fontFallback(e,t){return this.catalog.fontFallback(e,t)}async cleanup(){return this.catalog?this.catalog.cleanup():(0,n.clearPrimitiveCaches)()}}},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.FileSpec=t.XRef=t.ObjectLoader=t.Catalog=void 0;var r=a(2),i=a(4),n=a(10),s=a(7),o=a(21),c=a(22);function l(e){return(0,i.isDict)(e)?e.get("D"):e}class h{constructor(e,t){this.pdfManager=e;this.xref=t;this.catDict=t.getCatalogObj();if(!(0,i.isDict)(this.catDict))throw new r.FormatError("Catalog object is not a dictionary.");this.fontCache=new i.RefSetCache;this.builtInCMapCache=new Map;this.pageKidsCountCache=new i.RefSetCache}get metadata(){const e=this.catDict.getRaw("Metadata");if(!(0,i.isRef)(e))return(0,r.shadow)(this,"metadata",null);const t=!(this.xref.encrypt&&this.xref.encrypt.encryptMetadata),a=this.xref.fetch(e,t);let n;if(a&&(0,i.isDict)(a.dict)){const e=a.dict.get("Type"),t=a.dict.get("Subtype");if((0,i.isName)(e,"Metadata")&&(0,i.isName)(t,"XML"))try{n=(0,r.stringToUTF8String)((0,r.bytesToString)(a.getBytes()))}catch(e){if(e instanceof s.MissingDataException)throw e;(0,r.info)("Skipping invalid metadata.")}}return(0,r.shadow)(this,"metadata",n)}get toplevelPagesDict(){const e=this.catDict.get("Pages");if(!(0,i.isDict)(e))throw new r.FormatError("Invalid top-level pages dictionary.");return(0,r.shadow)(this,"toplevelPagesDict",e)}get documentOutline(){let e=null;try{e=this._readDocumentOutline()}catch(e){if(e instanceof s.MissingDataException)throw e;(0,r.warn)("Unable to read document outline.")}return(0,r.shadow)(this,"documentOutline",e)}_readDocumentOutline(){let e=this.catDict.get("Outlines");if(!(0,i.isDict)(e))return null;e=e.getRaw("First");if(!(0,i.isRef)(e))return null;const t={items:[]},a=[{obj:e,parent:t}],n=new i.RefSet;n.put(e);const s=this.xref,o=new Uint8ClampedArray(3);for(;a.length>0;){const t=a.shift(),l=s.fetchIfRef(t.obj);if(null===l)continue;if(!l.has("Title"))throw new r.FormatError("Invalid outline item encountered.");const u={url:null,dest:null};h.parseDestDictionary({destDict:l,resultObj:u,docBaseUrl:this.pdfManager.docBaseUrl});const d=l.get("Title"),f=l.get("F")||0,g=l.getArray("C"),m=l.get("Count");let p=o;!Array.isArray(g)||3!==g.length||0===g[0]&&0===g[1]&&0===g[2]||(p=c.ColorSpace.singletons.rgb.getRgb(g,0));const b={dest:u.dest,url:u.url,unsafeUrl:u.unsafeUrl,newWindow:u.newWindow,title:(0,r.stringToPDFString)(d),color:p,count:Number.isInteger(m)?m:void 0,bold:!!(2&f),italic:!!(1&f),items:[]};t.parent.items.push(b);e=l.getRaw("First");if((0,i.isRef)(e)&&!n.has(e)){a.push({obj:e,parent:b});n.put(e)}e=l.getRaw("Next");if((0,i.isRef)(e)&&!n.has(e)){a.push({obj:e,parent:t.parent});n.put(e)}}return t.items.length>0?t.items:null}get permissions(){let e=null;try{e=this._readPermissions()}catch(e){if(e instanceof s.MissingDataException)throw e;(0,r.warn)("Unable to read permissions.")}return(0,r.shadow)(this,"permissions",e)}_readPermissions(){const e=this.xref.trailer.get("Encrypt");if(!(0,i.isDict)(e))return null;let t=e.get("P");if(!(0,r.isNum)(t))return null;t+=2**32;const a=[];for(const e in r.PermissionFlag){const i=r.PermissionFlag[e];t&i&&a.push(i)}return a}get numPages(){const e=this.toplevelPagesDict.get("Count");if(!Number.isInteger(e))throw new r.FormatError("Page count in top-level pages dictionary is not an integer.");return(0,r.shadow)(this,"numPages",e)}get destinations(){const e=this._readDests(),t=Object.create(null);if(e instanceof f){const a=e.getAll();for(const e in a)t[e]=l(a[e])}else e instanceof i.Dict&&e.forEach((function(e,a){a&&(t[e]=l(a))}));return(0,r.shadow)(this,"destinations",t)}getDestination(e){const t=this._readDests();return t instanceof f||t instanceof i.Dict?l(t.get(e)||null):null}_readDests(){const e=this.catDict.get("Names");return e&&e.has("Dests")?new f(e.getRaw("Dests"),this.xref):this.catDict.has("Dests")?this.catDict.get("Dests"):void 0}get pageLabels(){let e=null;try{e=this._readPageLabels()}catch(e){if(e instanceof s.MissingDataException)throw e;(0,r.warn)("Unable to read page labels.")}return(0,r.shadow)(this,"pageLabels",e)}_readPageLabels(){const e=this.catDict.getRaw("PageLabels");if(!e)return null;const t=new Array(this.numPages);let a=null,n="";const o=new g(e,this.xref).getAll();let c="",l=1;for(let e=0,h=this.numPages;e<h;e++){if(e in o){const t=o[e];if(!(0,i.isDict)(t))throw new r.FormatError("PageLabel is not a dictionary.");if(t.has("Type")&&!(0,i.isName)(t.get("Type"),"PageLabel"))throw new r.FormatError("Invalid type in PageLabel dictionary.");if(t.has("S")){const e=t.get("S");if(!(0,i.isName)(e))throw new r.FormatError("Invalid style in PageLabel dictionary.");a=e.name}else a=null;if(t.has("P")){const e=t.get("P");if(!(0,r.isString)(e))throw new r.FormatError("Invalid prefix in PageLabel dictionary.");n=(0,r.stringToPDFString)(e)}else n="";if(t.has("St")){const e=t.get("St");if(!(Number.isInteger(e)&&e>=1))throw new r.FormatError("Invalid start in PageLabel dictionary.");l=e}else l=1}switch(a){case"D":c=l;break;case"R":case"r":c=(0,s.toRomanNumerals)(l,"r"===a);break;case"A":case"a":const e=26,t=65,i=97,n="a"===a?i:t,o=l-1,h=String.fromCharCode(n+o%e),u=[];for(let t=0,a=o/e|0;t<=a;t++)u.push(h);c=u.join("");break;default:if(a)throw new r.FormatError(`Invalid style "${a}" in PageLabel dictionary.`);c=""}t[e]=n+c;l++}return t}get pageLayout(){const e=this.catDict.get("PageLayout");let t="";if((0,i.isName)(e))switch(e.name){case"SinglePage":case"OneColumn":case"TwoColumnLeft":case"TwoColumnRight":case"TwoPageLeft":case"TwoPageRight":t=e.name}return(0,r.shadow)(this,"pageLayout",t)}get pageMode(){const e=this.catDict.get("PageMode");let t="UseNone";if((0,i.isName)(e))switch(e.name){case"UseNone":case"UseOutlines":case"UseThumbs":case"FullScreen":case"UseOC":case"UseAttachments":t=e.name}return(0,r.shadow)(this,"pageMode",t)}get viewerPreferences(){const e={HideToolbar:r.isBool,HideMenubar:r.isBool,HideWindowUI:r.isBool,FitWindow:r.isBool,CenterWindow:r.isBool,DisplayDocTitle:r.isBool,NonFullScreenPageMode:i.isName,Direction:i.isName,ViewArea:i.isName,ViewClip:i.isName,PrintArea:i.isName,PrintClip:i.isName,PrintScaling:i.isName,Duplex:i.isName,PickTrayByPDFSize:r.isBool,PrintPageRange:Array.isArray,NumCopies:Number.isInteger},t=this.catDict.get("ViewerPreferences"),a=Object.create(null);if((0,i.isDict)(t))for(const i in e){if(!t.has(i))continue;const n=t.get(i);if(!e[i](n)){(0,r.info)(`Bad value in ViewerPreferences for "${i}".`);continue}let s;switch(i){case"NonFullScreenPageMode":switch(n.name){case"UseNone":case"UseOutlines":case"UseThumbs":case"UseOC":s=n.name;break;default:s="UseNone"}break;case"Direction":switch(n.name){case"L2R":case"R2L":s=n.name;break;default:s="L2R"}break;case"ViewArea":case"ViewClip":case"PrintArea":case"PrintClip":switch(n.name){case"MediaBox":case"CropBox":case"BleedBox":case"TrimBox":case"ArtBox":s=n.name;break;default:s="CropBox"}break;case"PrintScaling":switch(n.name){case"None":case"AppDefault":s=n.name;break;default:s="AppDefault"}break;case"Duplex":switch(n.name){case"Simplex":case"DuplexFlipShortEdge":case"DuplexFlipLongEdge":s=n.name;break;default:s="None"}break;case"PrintPageRange":if(n.length%2!=0)break;n.every((e,t,a)=>Number.isInteger(e)&&e>0&&(0===t||e>=a[t-1])&&e<=this.numPages)&&(s=n);break;case"NumCopies":n>0&&(s=n);break;default:(0,r.assert)("boolean"==typeof n);s=n}void 0!==s?a[i]=s:(0,r.info)(`Bad value in ViewerPreferences for "${i}".`)}return(0,r.shadow)(this,"viewerPreferences",a)}get openAction(){const e=this.catDict.get("OpenAction");let t=null;if((0,i.isDict)(e)){const a=new i.Dict(this.xref);a.set("A",e);const r={url:null,dest:null,action:null};h.parseDestDictionary({destDict:a,resultObj:r});if(Array.isArray(r.dest)){t||(t=Object.create(null));t.dest=r.dest}else if(r.action){t||(t=Object.create(null));t.action=r.action}}else if(Array.isArray(e)){t||(t=Object.create(null));t.dest=e}return(0,r.shadow)(this,"openAction",t)}get attachments(){const e=this.catDict.get("Names");let t=null;if(e&&e.has("EmbeddedFiles")){const a=new f(e.getRaw("EmbeddedFiles"),this.xref).getAll();for(const e in a){const i=new m(a[e],this.xref);t||(t=Object.create(null));t[(0,r.stringToPDFString)(e)]=i.serializable}}return(0,r.shadow)(this,"attachments",t)}get javaScript(){const e=this.catDict.get("Names");let t=null;function a(e){const a=e.get("S");if(!(0,i.isName)(a,"JavaScript"))return;let n=e.get("JS");if((0,i.isStream)(n))n=(0,r.bytesToString)(n.getBytes());else if(!(0,r.isString)(n))return;t||(t=[]);t.push((0,r.stringToPDFString)(n))}if(e&&e.has("JavaScript")){const t=new f(e.getRaw("JavaScript"),this.xref).getAll();for(const e in t){const r=t[e];(0,i.isDict)(r)&&a(r)}}const n=this.catDict.get("OpenAction");(0,i.isDict)(n)&&(0,i.isName)(n.get("S"),"JavaScript")&&a(n);return(0,r.shadow)(this,"javaScript",t)}fontFallback(e,t){const a=[];this.fontCache.forEach((function(e){a.push(e)}));return Promise.all(a).then(a=>{for(const r of a)if(r.loadedName===e){r.fallback(t);return}})}cleanup(){(0,i.clearPrimitiveCaches)();this.pageKidsCountCache.clear();const e=[];this.fontCache.forEach((function(t){e.push(t)}));return Promise.all(e).then(e=>{for(const{dict:t}of e)delete t.translated;this.fontCache.clear();this.builtInCMapCache.clear()})}getPageDict(e){const t=(0,r.createPromiseCapability)(),a=[this.catDict.getRaw("Pages")],n=new i.RefSet,s=this.xref,o=this.pageKidsCountCache;let c,l=0;!function h(){for(;a.length;){const u=a.pop();if((0,i.isRef)(u)){c=o.get(u);if(c>0&&l+c<e){l+=c;continue}if(n.has(u)){t.reject(new r.FormatError("Pages tree contains circular reference."));return}n.put(u);s.fetchAsync(u).then((function(r){if((0,i.isDict)(r,"Page")||(0,i.isDict)(r)&&!r.has("Kids"))if(e===l){u&&!o.has(u)&&o.put(u,1);t.resolve([r,u])}else{l++;h()}else{a.push(r);h()}}),t.reject);return}if(!(0,i.isDict)(u)){t.reject(new r.FormatError("Page dictionary kid reference points to wrong type of object."));return}c=u.get("Count");if(Number.isInteger(c)&&c>=0){const t=u.objId;t&&!o.has(t)&&o.put(t,c);if(l+c<=e){l+=c;continue}}const d=u.get("Kids");if(!Array.isArray(d)){if((0,i.isName)(u.get("Type"),"Page")||!u.has("Type")&&u.has("Contents")){if(l===e){t.resolve([u,null]);return}l++;continue}t.reject(new r.FormatError("Page dictionary kids object is not an array."));return}for(let e=d.length-1;e>=0;e--)a.push(d[e])}t.reject(new Error(`Page index ${e} not found.`))}();return t.promise}getPageIndex(e){const t=this.xref;let a=0;return function n(s){return function(a){let n,s=0;return t.fetchAsync(a).then((function(t){if((0,i.isRefsEqual)(a,e)&&!(0,i.isDict)(t,"Page")&&(!(0,i.isDict)(t)||t.has("Type")||!t.has("Contents")))throw new r.FormatError("The reference does not point to a /Page dictionary.");if(!t)return null;if(!(0,i.isDict)(t))throw new r.FormatError("Node must be a dictionary.");n=t.getRaw("Parent");return t.getAsync("Parent")})).then((function(e){if(!e)return null;if(!(0,i.isDict)(e))throw new r.FormatError("Parent must be a dictionary.");return e.getAsync("Kids")})).then((function(e){if(!e)return null;const o=[];let c=!1;for(let n=0,l=e.length;n<l;n++){const l=e[n];if(!(0,i.isRef)(l))throw new r.FormatError("Kid must be a reference.");if((0,i.isRefsEqual)(l,a)){c=!0;break}o.push(t.fetchAsync(l).then((function(e){if(!(0,i.isDict)(e))throw new r.FormatError("Kid node must be a dictionary.");e.has("Count")?s+=e.get("Count"):s++})))}if(!c)throw new r.FormatError("Kid reference not found in parent's kids.");return Promise.all(o).then((function(){return[s,n]}))}))}(s).then((function(e){if(!e)return a;const[t,r]=e;a+=t;return n(r)}))}(e)}static parseDestDictionary(e){const t=e.destDict;if(!(0,i.isDict)(t)){(0,r.warn)("parseDestDictionary: `destDict` must be a dictionary.");return}const a=e.resultObj;if("object"!=typeof a){(0,r.warn)("parseDestDictionary: `resultObj` must be an object.");return}const n=e.docBaseUrl||null;let s,o,c=t.get("A");!(0,i.isDict)(c)&&t.has("Dest")&&(c=t.get("Dest"));if((0,i.isDict)(c)){const e=c.get("S");if(!(0,i.isName)(e)){(0,r.warn)("parseDestDictionary: Invalid type in Action dictionary.");return}const t=e.name;switch(t){case"URI":s=c.get("URI");(0,i.isName)(s)?s="/"+s.name:(0,r.isString)(s)&&(s=function(e){return e.startsWith("www.")?`http://${e}`:e}(s));break;case"GoTo":o=c.get("D");break;case"Launch":case"GoToR":const e=c.get("F");(0,i.isDict)(e)?s=e.get("F")||null:(0,r.isString)(e)&&(s=e);let n=c.get("D");if(n){(0,i.isName)(n)&&(n=n.name);if((0,r.isString)(s)){const e=s.split("#")[0];(0,r.isString)(n)?s=e+"#"+n:Array.isArray(n)&&(s=e+"#"+JSON.stringify(n))}}const l=c.get("NewWindow");(0,r.isBool)(l)&&(a.newWindow=l);break;case"Named":const h=c.get("N");(0,i.isName)(h)&&(a.action=h.name);break;case"JavaScript":const u=c.get("JS");let d;(0,i.isStream)(u)?d=(0,r.bytesToString)(u.getBytes()):(0,r.isString)(u)&&(d=u);if(d){const e=new RegExp("^\\s*("+["app.launchURL","window.open"].join("|").split(".").join("\\.")+")\\((?:'|\")([^'\"]*)(?:'|\")(?:,\\s*(\\w+)\\)|\\))","i").exec((0,r.stringToPDFString)(d));if(e&&e[2]){s=e[2];"true"===e[3]&&"app.launchURL"===e[1]&&(a.newWindow=!0);break}}default:(0,r.warn)(`parseDestDictionary: unsupported action type "${t}".`)}}else t.has("Dest")&&(o=t.get("Dest"));if((0,r.isString)(s)){s=function(e){try{return(0,r.stringToUTF8String)(e)}catch(t){return e}}(s);const e=(0,r.createValidAbsoluteUrl)(s,n);e&&(a.url=e.href);a.unsafeUrl=s}if(o){(0,i.isName)(o)&&(o=o.name);((0,r.isString)(o)||Array.isArray(o))&&(a.dest=o)}}}t.Catalog=h;var u=function(){function e(e,t){this.stream=e;this.pdfManager=t;this.entries=[];this.xrefstms=Object.create(null);this._cacheMap=new Map;this.stats={streamTypes:Object.create(null),fontTypes:Object.create(null)}}e.prototype={setStartXRef:function(e){this.startXRefQueue=[e]},parse:function(e){var t;if(e){(0,r.warn)("Indexing all PDF objects");t=this.indexObjects()}else t=this.readXRef();t.assignXref(this);this.trailer=t;let a,n;try{a=t.get("Encrypt")}catch(e){if(e instanceof s.MissingDataException)throw e;(0,r.warn)(`XRef.parse - Invalid "Encrypt" reference: "${e}".`)}if((0,i.isDict)(a)){var c=t.get("ID"),l=c&&c.length?c[0]:"";a.suppressEncryption=!0;this.encrypt=new o.CipherTransformFactory(a,l,this.pdfManager.password)}try{n=t.get("Root")}catch(e){if(e instanceof s.MissingDataException)throw e;(0,r.warn)(`XRef.parse - Invalid "Root" reference: "${e}".`)}if(!(0,i.isDict)(n)||!n.has("Pages")){if(!e)throw new s.XRefParseException;throw new r.FormatError("Invalid root reference")}this.root=n},processXRefTable:function(e){"tableState"in this||(this.tableState={entryNum:0,streamPos:e.lexer.stream.pos,parserBuf1:e.buf1,parserBuf2:e.buf2});var t=this.readXRefTable(e);if(!(0,i.isCmd)(t,"trailer"))throw new r.FormatError("Invalid XRef table: could not find trailer dictionary");var a=e.getObj();!(0,i.isDict)(a)&&a.dict&&(a=a.dict);if(!(0,i.isDict)(a))throw new r.FormatError("Invalid XRef table: could not parse trailer dictionary");delete this.tableState;return a},readXRefTable:function(e){var t,a=e.lexer.stream,n=this.tableState;a.pos=n.streamPos;e.buf1=n.parserBuf1;e.buf2=n.parserBuf2;for(;;){if(!("firstEntryNum"in n)||!("entryCount"in n)){if((0,i.isCmd)(t=e.getObj(),"trailer"))break;n.firstEntryNum=t;n.entryCount=e.getObj()}var s=n.firstEntryNum,o=n.entryCount;if(!Number.isInteger(s)||!Number.isInteger(o))throw new r.FormatError("Invalid XRef table: wrong types in subsection header");for(var c=n.entryNum;c<o;c++){n.streamPos=a.pos;n.entryNum=c;n.parserBuf1=e.buf1;n.parserBuf2=e.buf2;var l={};l.offset=e.getObj();l.gen=e.getObj();var h=e.getObj();if(h instanceof i.Cmd)switch(h.cmd){case"f":l.free=!0;break;case"n":l.uncompressed=!0}if(!Number.isInteger(l.offset)||!Number.isInteger(l.gen)||!l.free&&!l.uncompressed)throw new r.FormatError(`Invalid entry in XRef subsection: ${s}, ${o}`);0===c&&l.free&&1===s&&(s=0);this.entries[c+s]||(this.entries[c+s]=l)}n.entryNum=0;n.streamPos=a.pos;n.parserBuf1=e.buf1;n.parserBuf2=e.buf2;delete n.firstEntryNum;delete n.entryCount}if(this.entries[0]&&!this.entries[0].free)throw new r.FormatError("Invalid XRef table: unexpected first object");return t},processXRefStream:function(e){if(!("streamState"in this)){var t=e.dict,a=t.get("W"),r=t.get("Index");r||(r=[0,t.get("Size")]);this.streamState={entryRanges:r,byteWidths:a,entryNum:0,streamPos:e.pos}}this.readXRefStream(e);delete this.streamState;return e.dict},readXRefStream:function(e){var t,a,i=this.streamState;e.pos=i.streamPos;for(var n=i.byteWidths,s=n[0],o=n[1],c=n[2],l=i.entryRanges;l.length>0;){var h=l[0],u=l[1];if(!Number.isInteger(h)||!Number.isInteger(u))throw new r.FormatError(`Invalid XRef range fields: ${h}, ${u}`);if(!Number.isInteger(s)||!Number.isInteger(o)||!Number.isInteger(c))throw new r.FormatError(`Invalid XRef entry fields length: ${h}, ${u}`);for(t=i.entryNum;t<u;++t){i.entryNum=t;i.streamPos=e.pos;var d=0,f=0,g=0;for(a=0;a<s;++a)d=d<<8|e.getByte();0===s&&(d=1);for(a=0;a<o;++a)f=f<<8|e.getByte();for(a=0;a<c;++a)g=g<<8|e.getByte();var m={};m.offset=f;m.gen=g;switch(d){case 0:m.free=!0;break;case 1:m.uncompressed=!0;break;case 2:break;default:throw new r.FormatError(`Invalid XRef entry type: ${d}`)}this.entries[h+t]||(this.entries[h+t]=m)}i.entryNum=0;i.streamPos=e.pos;l.splice(0,2)}},indexObjects:function(){function e(e,t){for(var a="",r=e[t];10!==r&&13!==r&&60!==r&&!(++t>=e.length);){a+=String.fromCharCode(r);r=e[t]}return a}function t(e,t,a){for(var r=a.length,i=e.length,n=0;t<i;){for(var s=0;s<r&&e[t+s]===a[s];)++s;if(s>=r)break;t++;n++}return n}var a=/^(\d+)\s+(\d+)\s+obj\b/;const o=/\bendobj[\b\s]$/,c=/\s+(\d+\s+\d+\s+obj[\b\s<])$/;var l=new Uint8Array([116,114,97,105,108,101,114]),h=new Uint8Array([115,116,97,114,116,120,114,101,102]);const u=new Uint8Array([111,98,106]);var d=new Uint8Array([47,88,82,101,102]);this.entries.length=0;var f=this.stream;f.pos=0;for(var g,m,p=f.getBytes(),b=f.start,y=p.length,v=[],w=[];b<y;){var k=p[b];if(9!==k&&10!==k&&13!==k&&32!==k)if(37!==k){var S,C=e(p,b);if(C.startsWith("xref")&&(4===C.length||/\s/.test(C[4]))){b+=t(p,b,l);v.push(b);b+=t(p,b,h)}else if(S=a.exec(C)){const e=0|S[1],a=0|S[2];this.entries[e]&&this.entries[e].gen!==a||(this.entries[e]={offset:b-f.start,gen:a,uncompressed:!0});let i,n=b+C.length;for(;n<p.length;){const e=n+t(p,n,u)+4;i=e-b;const a=Math.max(e-25,n),s=(0,r.bytesToString)(p.subarray(a,e));if(o.test(s))break;{const e=c.exec(s);if(e&&e[1]){(0,r.warn)('indexObjects: Found new "obj" inside of another "obj", caused by missing "endobj" -- trying to recover.');i-=e[1].length;break}}n=e}const s=p.subarray(b,b+i);var x=t(s,0,d);if(x<i&&s[x+5]<64){w.push(b-f.start);this.xrefstms[b-f.start]=1}b+=i}else if(C.startsWith("trailer")&&(7===C.length||/\s/.test(C[7]))){v.push(b);b+=t(p,b,h)}else b+=C.length+1}else do{if(++b>=y)break;k=p[b]}while(10!==k&&13!==k);else++b}for(g=0,m=w.length;g<m;++g){this.startXRefQueue.push(w[g]);this.readXRef(!0)}let A;for(g=0,m=v.length;g<m;++g){f.pos=v[g];const e=new n.Parser({lexer:new n.Lexer(f),xref:this,allowStreams:!0,recoveryMode:!0});var I=e.getObj();if(!(0,i.isCmd)(I,"trailer"))continue;const t=e.getObj();if(!(0,i.isDict)(t))continue;let a;try{a=t.get("Root")}catch(e){if(e instanceof s.MissingDataException)throw e;continue}if((0,i.isDict)(a)&&a.has("Pages")){if(t.has("ID"))return t;A=t}}if(A)return A;throw new r.InvalidPDFException("Invalid PDF structure.")},readXRef:function(e){var t=this.stream;const a=Object.create(null);try{for(;this.startXRefQueue.length;){var o=this.startXRefQueue[0];if(a[o]){(0,r.warn)("readXRef - skipping XRef table since it was already parsed.");this.startXRefQueue.shift();continue}a[o]=!0;t.pos=o+t.start;const e=new n.Parser({lexer:new n.Lexer(t),xref:this,allowStreams:!0});var c,l=e.getObj();if((0,i.isCmd)(l,"xref")){c=this.processXRefTable(e);this.topDict||(this.topDict=c);l=c.get("XRefStm");if(Number.isInteger(l)){var h=l;if(!(h in this.xrefstms)){this.xrefstms[h]=1;this.startXRefQueue.push(h)}}}else{if(!Number.isInteger(l))throw new r.FormatError("Invalid XRef stream header");if(!Number.isInteger(e.getObj())||!(0,i.isCmd)(e.getObj(),"obj")||!(0,i.isStream)(l=e.getObj()))throw new r.FormatError("Invalid XRef stream");c=this.processXRefStream(l);this.topDict||(this.topDict=c);if(!c)throw new r.FormatError("Failed to read XRef stream")}l=c.get("Prev");Number.isInteger(l)?this.startXRefQueue.push(l):(0,i.isRef)(l)&&this.startXRefQueue.push(l.num);this.startXRefQueue.shift()}return this.topDict}catch(e){if(e instanceof s.MissingDataException)throw e;(0,r.info)("(while reading XRef): "+e)}if(!e)throw new s.XRefParseException},getEntry:function(e){var t=this.entries[e];return t&&!t.free&&t.offset?t:null},fetchIfRef:function(e,t){return e instanceof i.Ref?this.fetch(e,t):e},fetch:function(e,t){if(!(e instanceof i.Ref))throw new Error("ref object is not a reference");const a=e.num,r=this._cacheMap.get(a);if(void 0!==r){r instanceof i.Dict&&!r.objId&&(r.objId=e.toString());return r}let n=this.getEntry(a);if(null===n){this._cacheMap.set(a,n);return n}n=n.uncompressed?this.fetchUncompressed(e,n,t):this.fetchCompressed(e,n,t);(0,i.isDict)(n)?n.objId=e.toString():(0,i.isStream)(n)&&(n.dict.objId=e.toString());return n},fetchUncompressed(e,t,a=!1){var r=e.gen,o=e.num;if(t.gen!==r)throw new s.XRefEntryException(`Inconsistent generation in XRef: ${e}`);var c=this.stream.makeSubStream(t.offset+this.stream.start);const l=new n.Parser({lexer:new n.Lexer(c),xref:this,allowStreams:!0});var h=l.getObj(),u=l.getObj(),d=l.getObj();if(h!==o||u!==r||!(d instanceof i.Cmd))throw new s.XRefEntryException(`Bad (uncompressed) XRef entry: ${e}`);if("obj"!==d.cmd){if(d.cmd.startsWith("obj")){o=parseInt(d.cmd.substring(3),10);if(!Number.isNaN(o))return o}throw new s.XRefEntryException(`Bad (uncompressed) XRef entry: ${e}`)}t=this.encrypt&&!a?l.getObj(this.encrypt.createCipherTransform(o,r)):l.getObj();(0,i.isStream)(t)||this._cacheMap.set(o,t);return t},fetchCompressed(e,t,a=!1){const o=t.offset,c=this.fetch(i.Ref.get(o,0));if(!(0,i.isStream)(c))throw new r.FormatError("bad ObjStm stream");const l=c.dict.get("First"),h=c.dict.get("N");if(!Number.isInteger(l)||!Number.isInteger(h))throw new r.FormatError("invalid first and n parameters for ObjStm stream");const u=new n.Parser({lexer:new n.Lexer(c),xref:this,allowStreams:!0}),d=new Array(h);for(let e=0;e<h;++e){const t=u.getObj();if(!Number.isInteger(t))throw new r.FormatError(`invalid object number in the ObjStm stream: ${t}`);const a=u.getObj();if(!Number.isInteger(a))throw new r.FormatError(`invalid object offset in the ObjStm stream: ${a}`);d[e]=t}const f=new Array(h);for(let e=0;e<h;++e){const t=u.getObj();f[e]=t;u.buf1 instanceof i.Cmd&&"endobj"===u.buf1.cmd&&u.shift();if((0,i.isStream)(t))continue;const a=d[e],r=this.entries[a];r&&r.offset===o&&r.gen===e&&this._cacheMap.set(a,t)}if(void 0===(t=f[t.gen]))throw new s.XRefEntryException(`Bad (compressed) XRef entry: ${e}`);return t},async fetchIfRefAsync(e,t){return e instanceof i.Ref?this.fetchAsync(e,t):e},async fetchAsync(e,t){try{return this.fetch(e,t)}catch(a){if(!(a instanceof s.MissingDataException))throw a;await this.pdfManager.requestRange(a.begin,a.end);return this.fetchAsync(e,t)}},getCatalogObj:function(){return this.root}};return e}();t.XRef=u;class d{constructor(e,t,a){this.constructor===d&&(0,r.unreachable)("Cannot initialize NameOrNumberTree.");this.root=e;this.xref=t;this._type=a}getAll(){const e=Object.create(null);if(!this.root)return e;const t=this.xref,a=new i.RefSet;a.put(this.root);const n=[this.root];for(;n.length>0;){const s=t.fetchIfRef(n.shift());if(!(0,i.isDict)(s))continue;if(s.has("Kids")){const e=s.get("Kids");for(let t=0,i=e.length;t<i;t++){const i=e[t];if(a.has(i))throw new r.FormatError(`Duplicate entry in "${this._type}" tree.`);n.push(i);a.put(i)}continue}const o=s.get(this._type);if(Array.isArray(o))for(let a=0,r=o.length;a<r;a+=2)e[t.fetchIfRef(o[a])]=t.fetchIfRef(o[a+1])}return e}get(e){if(!this.root)return null;const t=this.xref;let a=t.fetchIfRef(this.root),i=0;for(;a.has("Kids");){if(++i>10){(0,r.warn)(`Search depth limit reached for "${this._type}" tree.`);return null}const n=a.get("Kids");if(!Array.isArray(n))return null;let s=0,o=n.length-1;for(;s<=o;){const r=s+o>>1,i=t.fetchIfRef(n[r]).get("Limits");if(e<t.fetchIfRef(i[0]))o=r-1;else{if(!(e>t.fetchIfRef(i[1]))){a=t.fetchIfRef(n[r]);break}s=r+1}}if(s>o)return null}const n=a.get(this._type);if(Array.isArray(n)){let a=0,i=n.length-2;for(;a<=i;){const r=a+i>>1,s=r+(1&r),o=t.fetchIfRef(n[s]);if(e<o)i=s-2;else{if(!(e>o))return t.fetchIfRef(n[s+1]);a=s+2}}(0,r.info)(`Falling back to an exhaustive search, for key "${e}", `+`in "${this._type}" tree.`);for(let a=0,i=n.length;a<i;a+=2){if(t.fetchIfRef(n[a])===e){(0,r.warn)(`The "${e}" key was found at an incorrect, `+`i.e. out-of-order, position in "${this._type}" tree.`);return t.fetchIfRef(n[a+1])}}}return null}}class f extends d{constructor(e,t){super(e,t,"Names")}}class g extends d{constructor(e,t){super(e,t,"Nums")}}var m=function(){function e(e,t){if(e&&(0,i.isDict)(e)){this.xref=t;this.root=e;e.has("FS")&&(this.fs=e.get("FS"));this.description=e.has("Desc")?(0,r.stringToPDFString)(e.get("Desc")):"";e.has("RF")&&(0,r.warn)("Related file specifications are not supported");this.contentAvailable=!0;if(!e.has("EF")){this.contentAvailable=!1;(0,r.warn)("Non-embedded file specifications are not supported")}}}function t(e){return e.has("UF")?e.get("UF"):e.has("F")?e.get("F"):e.has("Unix")?e.get("Unix"):e.has("Mac")?e.get("Mac"):e.has("DOS")?e.get("DOS"):null}e.prototype={get filename(){if(!this._filename&&this.root){var e=t(this.root)||"unnamed";this._filename=(0,r.stringToPDFString)(e).replace(/\\\\/g,"\\").replace(/\\\//g,"/").replace(/\\/g,"/")}return this._filename},get content(){if(!this.contentAvailable)return null;!this.contentRef&&this.root&&(this.contentRef=t(this.root.get("EF")));var e=null;if(this.contentRef){var a=this.xref.fetchIfRef(this.contentRef);a&&(0,i.isStream)(a)?e=a.getBytes():(0,r.warn)("Embedded file specification points to non-existing/invalid content")}else(0,r.warn)("Embedded file specification does not have a content");return e},get serializable(){return{filename:this.filename,content:this.content}}};return e}();t.FileSpec=m;const p=function(){function e(e){return e instanceof i.Ref||e instanceof i.Dict||Array.isArray(e)||(0,i.isStream)(e)}function t(t,a){if(t instanceof i.Dict||(0,i.isStream)(t)){const r=t instanceof i.Dict?t:t.dict,n=r.getKeys();for(let t=0,i=n.length;t<i;t++){const i=r.getRaw(n[t]);e(i)&&a.push(i)}}else if(Array.isArray(t))for(let r=0,i=t.length;r<i;r++){const i=t[r];e(i)&&a.push(i)}}function a(e,t,a){this.dict=e;this.keys=t;this.xref=a;this.refSet=null}a.prototype={async load(){if(!this.xref.stream.allChunksLoaded||this.xref.stream.allChunksLoaded())return;const{keys:e,dict:t}=this;this.refSet=new i.RefSet;const a=[];for(let r=0,i=e.length;r<i;r++){const i=t.getRaw(e[r]);void 0!==i&&a.push(i)}return this._walk(a)},async _walk(e){const a=[],r=[];for(;e.length;){let n=e.pop();if(n instanceof i.Ref){if(this.refSet.has(n))continue;try{this.refSet.put(n);n=this.xref.fetch(n)}catch(e){if(!(e instanceof s.MissingDataException))throw e;a.push(n);r.push({begin:e.begin,end:e.end})}}if(n&&n.getBaseStreams){const e=n.getBaseStreams();let t=!1;for(let a=0,i=e.length;a<i;a++){const i=e[a];if(i.allChunksLoaded&&!i.allChunksLoaded()){t=!0;r.push({begin:i.start,end:i.end})}}t&&a.push(n)}t(n,e)}if(r.length){await this.xref.stream.manager.requestRanges(r);for(let e=0,t=a.length;e<t;e++){const t=a[e];t instanceof i.Ref&&this.refSet.remove(t)}return this._walk(a)}this.refSet=null}};return a}();t.ObjectLoader=p},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.Parser=t.Linearization=t.Lexer=void 0;var r=a(11),i=a(2),n=a(4),s=a(7),o=a(12),c=a(14),l=a(17),h=a(19);function u(e){const t=e.length;let a=1,r=0;for(let i=0;i<t;++i){a+=255&e[i];r+=a}return r%65521<<16|a%65521}class d{constructor({lexer:e,xref:t,allowStreams:a=!1,recoveryMode:r=!1}){this.lexer=e;this.xref=t;this.allowStreams=a;this.recoveryMode=r;this.imageCache=Object.create(null);this.refill()}refill(){this.buf1=this.lexer.getObj();this.buf2=this.lexer.getObj()}shift(){if(this.buf2 instanceof n.Cmd&&"ID"===this.buf2.cmd){this.buf1=this.buf2;this.buf2=null}else{this.buf1=this.buf2;this.buf2=this.lexer.getObj()}}tryShift(){try{this.shift();return!0}catch(e){if(e instanceof s.MissingDataException)throw e;return!1}}getObj(e=null){const t=this.buf1;this.shift();if(t instanceof n.Cmd)switch(t.cmd){case"BI":return this.makeInlineImage(e);case"[":const a=[];for(;!(0,n.isCmd)(this.buf1,"]")&&!(0,n.isEOF)(this.buf1);)a.push(this.getObj(e));if((0,n.isEOF)(this.buf1)){if(!this.recoveryMode)throw new i.FormatError("End of file inside array");return a}this.shift();return a;case"<<":const r=new n.Dict(this.xref);for(;!(0,n.isCmd)(this.buf1,">>")&&!(0,n.isEOF)(this.buf1);){if(!(0,n.isName)(this.buf1)){(0,i.info)("Malformed dictionary: key must be a name object");this.shift();continue}const t=this.buf1.name;this.shift();if((0,n.isEOF)(this.buf1))break;r.set(t,this.getObj(e))}if((0,n.isEOF)(this.buf1)){if(!this.recoveryMode)throw new i.FormatError("End of file inside dictionary");return r}if((0,n.isCmd)(this.buf2,"stream"))return this.allowStreams?this.makeStream(r,e):r;this.shift();return r;default:return t}if(Number.isInteger(t)){if(Number.isInteger(this.buf1)&&(0,n.isCmd)(this.buf2,"R")){const e=n.Ref.get(t,this.buf1);this.shift();this.shift();return e}return t}return"string"==typeof t&&e?e.decryptString(t):t}findDefaultInlineStreamEnd(e){const t=e.pos;let a,r,n=0;for(;-1!==(a=e.getByte());)if(0===n)n=69===a?1:0;else if(1===n)n=73===a?2:0;else{(0,i.assert)(2===n);if(32===a||10===a||13===a){r=e.pos;const t=e.peekBytes(10);for(let e=0,r=t.length;e<r;e++){a=t[e];if((0!==a||0===t[e+1])&&(10!==a&&13!==a&&(a<32||a>127))){n=0;break}}if(2===n)break}else n=0}if(-1===a){(0,i.warn)("findDefaultInlineStreamEnd: Reached the end of the stream without finding a valid EI marker");if(r){(0,i.warn)('... trying to recover by using the last "EI" occurrence.');e.skip(-(e.pos-r))}}let o=4;e.skip(-o);a=e.peekByte();e.skip(o);(0,s.isWhiteSpace)(a)||o--;return e.pos-o-t}findDCTDecodeInlineStreamEnd(e){const t=e.pos;let a,r,n=!1;for(;-1!==(a=e.getByte());)if(255===a){switch(e.getByte()){case 0:break;case 255:e.skip(-1);break;case 217:n=!0;break;case 192:case 193:case 194:case 195:case 197:case 198:case 199:case 201:case 202:case 203:case 205:case 206:case 207:case 196:case 204:case 218:case 219:case 220:case 221:case 222:case 223:case 224:case 225:case 226:case 227:case 228:case 229:case 230:case 231:case 232:case 233:case 234:case 235:case 236:case 237:case 238:case 239:case 254:r=e.getUint16();r>2?e.skip(r-2):e.skip(-2)}if(n)break}const s=e.pos-t;if(-1===a){(0,i.warn)("Inline DCTDecode image stream: EOI marker not found, searching for /EI/ instead.");e.skip(-s);return this.findDefaultInlineStreamEnd(e)}this.inlineStreamSkipEI(e);return s}findASCII85DecodeInlineStreamEnd(e){const t=e.pos;let a;for(;-1!==(a=e.getByte());)if(126===a){const t=e.pos;a=e.peekByte();for(;(0,s.isWhiteSpace)(a);){e.skip();a=e.peekByte()}if(62===a){e.skip();break}if(e.pos>t){const t=e.peekBytes(2);if(69===t[0]&&73===t[1])break}}const r=e.pos-t;if(-1===a){(0,i.warn)("Inline ASCII85Decode image stream: EOD marker not found, searching for /EI/ instead.");e.skip(-r);return this.findDefaultInlineStreamEnd(e)}this.inlineStreamSkipEI(e);return r}findASCIIHexDecodeInlineStreamEnd(e){const t=e.pos;let a;for(;-1!==(a=e.getByte())&&62!==a;);const r=e.pos-t;if(-1===a){(0,i.warn)("Inline ASCIIHexDecode image stream: EOD marker not found, searching for /EI/ instead.");e.skip(-r);return this.findDefaultInlineStreamEnd(e)}this.inlineStreamSkipEI(e);return r}inlineStreamSkipEI(e){let t,a=0;for(;-1!==(t=e.getByte());)if(0===a)a=69===t?1:0;else if(1===a)a=73===t?2:0;else if(2===a)break}makeInlineImage(e){const t=this.lexer,a=t.stream,r=new n.Dict(this.xref);let s;for(;!(0,n.isCmd)(this.buf1,"ID")&&!(0,n.isEOF)(this.buf1);){if(!(0,n.isName)(this.buf1))throw new i.FormatError("Dictionary key must be a name object");const t=this.buf1.name;this.shift();if((0,n.isEOF)(this.buf1))break;r.set(t,this.getObj(e))}-1!==t.beginInlineImagePos&&(s=a.pos-t.beginInlineImagePos);const o=r.get("Filter","F");let c;if((0,n.isName)(o))c=o.name;else if(Array.isArray(o)){const e=this.xref.fetchIfRef(o[0]);(0,n.isName)(e)&&(c=e.name)}const l=a.pos;let h;h="DCTDecode"===c||"DCT"===c?this.findDCTDecodeInlineStreamEnd(a):"ASCII85Decode"===c||"A85"===c?this.findASCII85DecodeInlineStreamEnd(a):"ASCIIHexDecode"===c||"AHx"===c?this.findASCIIHexDecodeInlineStreamEnd(a):this.findDefaultInlineStreamEnd(a);let d,f=a.makeSubStream(l,h,r);if(h<1e3&&s<5552){const e=f.getBytes();f.reset();const r=a.pos;a.pos=t.beginInlineImagePos;const i=a.getBytes(s);a.pos=r;d=u(e)+"_"+u(i);const o=this.imageCache[d];if(void 0!==o){this.buf2=n.Cmd.get("EI");this.shift();o.reset();return o}}e&&(f=e.createStream(f,h));f=this.filter(f,r,h);f.dict=r;if(void 0!==d){f.cacheKey=`inline_${h}_${d}`;this.imageCache[d]=f}this.buf2=n.Cmd.get("EI");this.shift();return f}_findStreamLength(e,t){const{stream:a}=this.lexer;a.pos=e;const r=t.length;for(;a.pos<a.end;){const i=a.peekBytes(2048),n=i.length-r;if(n<=0)break;let s=0;for(;s<n;){let n=0;for(;n<r&&i[s+n]===t[n];)n++;if(n>=r){a.pos+=s;return a.pos-e}s++}a.pos+=n}return-1}makeStream(e,t){const a=this.lexer;let r=a.stream;a.skipToNextLine();const o=r.pos-1;let c=e.get("Length");if(!Number.isInteger(c)){(0,i.info)(`Bad length "${c}" in stream`);c=0}r.pos=o+c;a.nextChar();if(this.tryShift()&&(0,n.isCmd)(this.buf2,"endstream"))this.shift();else{const e=new Uint8Array([101,110,100,115,116,114,101,97,109]);let t=this._findStreamLength(o,e);if(t<0){const a=1;for(let n=1;n<=a;n++){const a=e.length-n,c=e.slice(0,a),l=this._findStreamLength(o,c);if(l>=0){const e=r.peekBytes(a+1)[a];if(!(0,s.isWhiteSpace)(e))break;(0,i.info)(`Found "${(0,i.bytesToString)(c)}" when `+"searching for endstream command.");t=l;break}}if(t<0)throw new i.FormatError("Missing endstream command.")}c=t;a.nextChar();this.shift();this.shift()}this.shift();r=r.makeSubStream(o,c,e);t&&(r=t.createStream(r,c));r=this.filter(r,e,c);r.dict=e;return r}filter(e,t,a){let r=t.get("Filter","F"),s=t.get("DecodeParms","DP");if((0,n.isName)(r)){Array.isArray(s)&&(0,i.warn)("/DecodeParms should not contain an Array, when /Filter contains a Name.");return this.makeFilter(e,r.name,a,s)}let o=a;if(Array.isArray(r)){const t=r,a=s;for(let c=0,l=t.length;c<l;++c){r=this.xref.fetchIfRef(t[c]);if(!(0,n.isName)(r))throw new i.FormatError(`Bad filter name "${r}"`);s=null;Array.isArray(a)&&c in a&&(s=this.xref.fetchIfRef(a[c]));e=this.makeFilter(e,r.name,o,s);o=null}}return e}makeFilter(e,t,a,n){if(0===a){(0,i.warn)(`Empty "${t}" stream.`);return new r.NullStream}try{const s=this.xref.stats.streamTypes;if("FlateDecode"===t||"Fl"===t){s[i.StreamType.FLATE]=!0;return n?new r.PredictorStream(new r.FlateStream(e,a),a,n):new r.FlateStream(e,a)}if("LZWDecode"===t||"LZW"===t){s[i.StreamType.LZW]=!0;let t=1;if(n){n.has("EarlyChange")&&(t=n.get("EarlyChange"));return new r.PredictorStream(new r.LZWStream(e,a,t),a,n)}return new r.LZWStream(e,a,t)}if("DCTDecode"===t||"DCT"===t){s[i.StreamType.DCT]=!0;return new l.JpegStream(e,a,e.dict,n)}if("JPXDecode"===t||"JPX"===t){s[i.StreamType.JPX]=!0;return new h.JpxStream(e,a,e.dict,n)}if("ASCII85Decode"===t||"A85"===t){s[i.StreamType.A85]=!0;return new r.Ascii85Stream(e,a)}if("ASCIIHexDecode"===t||"AHx"===t){s[i.StreamType.AHX]=!0;return new r.AsciiHexStream(e,a)}if("CCITTFaxDecode"===t||"CCF"===t){s[i.StreamType.CCF]=!0;return new o.CCITTFaxStream(e,a,n)}if("RunLengthDecode"===t||"RL"===t){s[i.StreamType.RLX]=!0;return new r.RunLengthStream(e,a)}if("JBIG2Decode"===t){s[i.StreamType.JBIG]=!0;return new c.Jbig2Stream(e,a,e.dict,n)}(0,i.warn)(`Filter "${t}" is not supported.`);return e}catch(e){if(e instanceof s.MissingDataException)throw e;(0,i.warn)(`Invalid stream: "${e}"`);return new r.NullStream}}}t.Parser=d;const f=[1,0,0,0,0,0,0,0,0,1,1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,2,0,0,2,2,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,2,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];function g(e){return e>=48&&e<=57?15&e:e>=65&&e<=70||e>=97&&e<=102?9+(15&e):-1}class m{constructor(e,t=null){this.stream=e;this.nextChar();this.strBuf=[];this.knownCommands=t;this._hexStringNumWarn=0;this.beginInlineImagePos=-1}nextChar(){return this.currentChar=this.stream.getByte()}peekChar(){return this.stream.peekByte()}getNumber(){let e=this.currentChar,t=!1,a=0,r=0;if(45===e){r=-1;e=this.nextChar();45===e&&(e=this.nextChar())}else if(43===e){r=1;e=this.nextChar()}if(10===e||13===e)do{e=this.nextChar()}while(10===e||13===e);if(46===e){a=10;e=this.nextChar()}if(e<48||e>57){if(10===a&&0===r&&((0,s.isWhiteSpace)(e)||-1===e)){(0,i.warn)("Lexer.getNumber - treating a single decimal point as zero.");return 0}throw new i.FormatError(`Invalid number: ${String.fromCharCode(e)} (charCode ${e})`)}r=r||1;let n=e-48,o=0,c=1;for(;(e=this.nextChar())>=0;)if(e>=48&&e<=57){const r=e-48;if(t)o=10*o+r;else{0!==a&&(a*=10);n=10*n+r}}else if(46===e){if(0!==a)break;a=1}else if(45===e)(0,i.warn)("Badly formatted number: minus sign in the middle");else{if(69!==e&&101!==e)break;e=this.peekChar();if(43===e||45===e){c=45===e?-1:1;this.nextChar()}else if(e<48||e>57)break;t=!0}0!==a&&(n/=a);t&&(n*=10**(c*o));return r*n}getString(){let e=1,t=!1;const a=this.strBuf;a.length=0;let r=this.nextChar();for(;;){let n=!1;switch(0|r){case-1:(0,i.warn)("Unterminated string");t=!0;break;case 40:++e;a.push("(");break;case 41:if(0==--e){this.nextChar();t=!0}else a.push(")");break;case 92:r=this.nextChar();switch(r){case-1:(0,i.warn)("Unterminated string");t=!0;break;case 110:a.push("\n");break;case 114:a.push("\r");break;case 116:a.push("\t");break;case 98:a.push("\b");break;case 102:a.push("\f");break;case 92:case 40:case 41:a.push(String.fromCharCode(r));break;case 48:case 49:case 50:case 51:case 52:case 53:case 54:case 55:let e=15&r;r=this.nextChar();n=!0;if(r>=48&&r<=55){e=(e<<3)+(15&r);r=this.nextChar();if(r>=48&&r<=55){n=!1;e=(e<<3)+(15&r)}}a.push(String.fromCharCode(e));break;case 13:10===this.peekChar()&&this.nextChar();break;case 10:break;default:a.push(String.fromCharCode(r))}break;default:a.push(String.fromCharCode(r))}if(t)break;n||(r=this.nextChar())}return a.join("")}getName(){let e,t;const a=this.strBuf;a.length=0;for(;(e=this.nextChar())>=0&&!f[e];)if(35===e){e=this.nextChar();if(f[e]){(0,i.warn)("Lexer_getName: NUMBER SIGN (#) should be followed by a hexadecimal number.");a.push("#");break}const r=g(e);if(-1!==r){t=e;e=this.nextChar();const n=g(e);if(-1===n){(0,i.warn)(`Lexer_getName: Illegal digit (${String.fromCharCode(e)}) `+"in hexadecimal number.");a.push("#",String.fromCharCode(t));if(f[e])break;a.push(String.fromCharCode(e));continue}a.push(String.fromCharCode(r<<4|n))}else a.push("#",String.fromCharCode(e))}else a.push(String.fromCharCode(e));a.length>127&&(0,i.warn)(`Name token is longer than allowed by the spec: ${a.length}`);return n.Name.get(a.join(""))}_hexStringWarn(e){5!=this._hexStringNumWarn++?this._hexStringNumWarn>5||(0,i.warn)(`getHexString - ignoring invalid character: ${e}`):(0,i.warn)("getHexString - ignoring additional invalid characters.")}getHexString(){const e=this.strBuf;e.length=0;let t,a,r=this.currentChar,n=!0;this._hexStringNumWarn=0;for(;;){if(r<0){(0,i.warn)("Unterminated hex string");break}if(62===r){this.nextChar();break}if(1!==f[r]){if(n){t=g(r);if(-1===t){this._hexStringWarn(r);r=this.nextChar();continue}}else{a=g(r);if(-1===a){this._hexStringWarn(r);r=this.nextChar();continue}e.push(String.fromCharCode(t<<4|a))}n=!n;r=this.nextChar()}else r=this.nextChar()}return e.join("")}getObj(){let e=!1,t=this.currentChar;for(;;){if(t<0)return n.EOF;if(e)10!==t&&13!==t||(e=!1);else if(37===t)e=!0;else if(1!==f[t])break;t=this.nextChar()}switch(0|t){case 48:case 49:case 50:case 51:case 52:case 53:case 54:case 55:case 56:case 57:case 43:case 45:case 46:return this.getNumber();case 40:return this.getString();case 47:return this.getName();case 91:this.nextChar();return n.Cmd.get("[");case 93:this.nextChar();return n.Cmd.get("]");case 60:t=this.nextChar();if(60===t){this.nextChar();return n.Cmd.get("<<")}return this.getHexString();case 62:t=this.nextChar();if(62===t){this.nextChar();return n.Cmd.get(">>")}return n.Cmd.get(">");case 123:this.nextChar();return n.Cmd.get("{");case 125:this.nextChar();return n.Cmd.get("}");case 41:this.nextChar();throw new i.FormatError(`Illegal character: ${t}`)}let a=String.fromCharCode(t);const r=this.knownCommands;let s=r&&void 0!==r[a];for(;(t=this.nextChar())>=0&&!f[t];){const e=a+String.fromCharCode(t);if(s&&void 0===r[e])break;if(128===a.length)throw new i.FormatError(`Command token too long: ${a.length}`);a=e;s=r&&void 0!==r[a]}if("true"===a)return!0;if("false"===a)return!1;if("null"===a)return null;"BI"===a&&(this.beginInlineImagePos=this.stream.pos);return n.Cmd.get(a)}skipToNextLine(){let e=this.currentChar;for(;e>=0;){if(13===e){e=this.nextChar();10===e&&this.nextChar();break}if(10===e){this.nextChar();break}e=this.nextChar()}}}t.Lexer=m;t.Linearization=class{static create(e){function t(e,t,a=!1){const r=e.get(t);if(Number.isInteger(r)&&(a?r>=0:r>0))return r;throw new Error(`The "${t}" parameter in the linearization `+"dictionary is invalid.")}const a=new d({lexer:new m(e),xref:null}),r=a.getObj(),s=a.getObj(),o=a.getObj(),c=a.getObj();let l,h;if(!(Number.isInteger(r)&&Number.isInteger(s)&&(0,n.isCmd)(o,"obj")&&(0,n.isDict)(c)&&(0,i.isNum)(l=c.get("Linearized"))&&l>0))return null;if((h=t(c,"L"))!==e.length)throw new Error('The "L" parameter in the linearization dictionary does not equal the stream length.');return{length:h,hints:function(e){const t=e.get("H");let a;if(Array.isArray(t)&&(2===(a=t.length)||4===a)){for(let e=0;e<a;e++){const a=t[e];if(!(Number.isInteger(a)&&a>0))throw new Error(`Hint (${e}) in the linearization dictionary is invalid.`)}return t}throw new Error("Hint array in the linearization dictionary is invalid.")}(c),objectNumberFirst:t(c,"O"),endFirst:t(c,"E"),numPages:t(c,"N"),mainXRefEntriesOffset:t(c,"T"),pageFirst:c.has("P")?t(c,"P",!0):0}}}},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.LZWStream=t.StringStream=t.StreamsSequenceStream=t.Stream=t.RunLengthStream=t.PredictorStream=t.NullStream=t.FlateStream=t.DecodeStream=t.DecryptStream=t.AsciiHexStream=t.Ascii85Stream=void 0;var r=a(2),i=a(4),n=a(7),s=function(){function e(e,t,a,r){this.bytes=e instanceof Uint8Array?e:new Uint8Array(e);this.start=t||0;this.pos=this.start;this.end=t+a||this.bytes.length;this.dict=r}e.prototype={get length(){return this.end-this.start},get isEmpty(){return 0===this.length},getByte:function(){return this.pos>=this.end?-1:this.bytes[this.pos++]},getUint16:function(){var e=this.getByte(),t=this.getByte();return-1===e||-1===t?-1:(e<<8)+t},getInt32:function(){return(this.getByte()<<24)+(this.getByte()<<16)+(this.getByte()<<8)+this.getByte()},getBytes(e,t=!1){var a=this.bytes,r=this.pos,i=this.end;if(!e){const e=a.subarray(r,i);return t?new Uint8ClampedArray(e):e}var n=r+e;n>i&&(n=i);this.pos=n;const s=a.subarray(r,n);return t?new Uint8ClampedArray(s):s},peekByte:function(){var e=this.getByte();-1!==e&&this.pos--;return e},peekBytes(e,t=!1){var a=this.getBytes(e,t);this.pos-=a.length;return a},getByteRange(e,t){e<0&&(e=0);t>this.end&&(t=this.end);return this.bytes.subarray(e,t)},skip:function(e){e||(e=1);this.pos+=e},reset:function(){this.pos=this.start},moveStart:function(){this.start=this.pos},makeSubStream:function(t,a,r){return new e(this.bytes.buffer,t,a,r)}};return e}();t.Stream=s;var o=function(){function e(e){const t=(0,r.stringToBytes)(e);s.call(this,t)}e.prototype=s.prototype;return e}();t.StringStream=o;var c=function(){var e=new Uint8Array(0);function t(t){this._rawMinBufferLength=t||0;this.pos=0;this.bufferLength=0;this.eof=!1;this.buffer=e;this.minBufferLength=512;if(t)for(;this.minBufferLength<t;)this.minBufferLength*=2}t.prototype={get isEmpty(){for(;!this.eof&&0===this.bufferLength;)this.readBlock();return 0===this.bufferLength},ensureBuffer:function(e){var t=this.buffer;if(e<=t.byteLength)return t;for(var a=this.minBufferLength;a<e;)a*=2;var r=new Uint8Array(a);r.set(t);return this.buffer=r},getByte:function(){for(var e=this.pos;this.bufferLength<=e;){if(this.eof)return-1;this.readBlock()}return this.buffer[this.pos++]},getUint16:function(){var e=this.getByte(),t=this.getByte();return-1===e||-1===t?-1:(e<<8)+t},getInt32:function(){return(this.getByte()<<24)+(this.getByte()<<16)+(this.getByte()<<8)+this.getByte()},getBytes(e,t=!1){var a,r=this.pos;if(e){this.ensureBuffer(r+e);a=r+e;for(;!this.eof&&this.bufferLength<a;)this.readBlock();var i=this.bufferLength;a>i&&(a=i)}else{for(;!this.eof;)this.readBlock();a=this.bufferLength}this.pos=a;const n=this.buffer.subarray(r,a);return!t||n instanceof Uint8ClampedArray?n:new Uint8ClampedArray(n)},peekByte:function(){var e=this.getByte();-1!==e&&this.pos--;return e},peekBytes(e,t=!1){var a=this.getBytes(e,t);this.pos-=a.length;return a},makeSubStream:function(e,t,a){for(var r=e+t;this.bufferLength<=r&&!this.eof;)this.readBlock();return new s(this.buffer,e,t,a)},getByteRange(e,t){(0,r.unreachable)("Should not call DecodeStream.getByteRange")},skip:function(e){e||(e=1);this.pos+=e},reset:function(){this.pos=0},getBaseStreams:function(){return this.str&&this.str.getBaseStreams?this.str.getBaseStreams():[]}};return t}();t.DecodeStream=c;var l=function(){function e(e){this.streams=e;let t=0;for(let a=0,r=e.length;a<r;a++){const r=e[a];t+=r instanceof c?r._rawMinBufferLength:r.length}c.call(this,t)}e.prototype=Object.create(c.prototype);e.prototype.readBlock=function(){var e=this.streams;if(0!==e.length){var t=e.shift().getBytes(),a=this.bufferLength,r=a+t.length;this.ensureBuffer(r).set(t,a);this.bufferLength=r}else this.eof=!0};e.prototype.getBaseStreams=function(){for(var e=[],t=0,a=this.streams.length;t<a;t++){var r=this.streams[t];r.getBaseStreams&&e.push(...r.getBaseStreams())}return e};return e}();t.StreamsSequenceStream=l;var h=function(){var e=new Int32Array([16,17,18,0,8,7,9,6,10,5,11,4,12,3,13,2,14,1,15]),t=new Int32Array([3,4,5,6,7,8,9,10,65547,65549,65551,65553,131091,131095,131099,131103,196643,196651,196659,196667,262211,262227,262243,262259,327811,327843,327875,327907,258,258,258]),a=new Int32Array([1,2,3,4,65541,65543,131081,131085,196625,196633,262177,262193,327745,327777,393345,393409,459009,459137,524801,525057,590849,591361,657409,658433,724993,727041,794625,798721,868353,876545]),i=[new Int32Array([459008,524368,524304,524568,459024,524400,524336,590016,459016,524384,524320,589984,524288,524416,524352,590048,459012,524376,524312,589968,459028,524408,524344,590032,459020,524392,524328,59e4,524296,524424,524360,590064,459010,524372,524308,524572,459026,524404,524340,590024,459018,524388,524324,589992,524292,524420,524356,590056,459014,524380,524316,589976,459030,524412,524348,590040,459022,524396,524332,590008,524300,524428,524364,590072,459009,524370,524306,524570,459025,524402,524338,590020,459017,524386,524322,589988,524290,524418,524354,590052,459013,524378,524314,589972,459029,524410,524346,590036,459021,524394,524330,590004,524298,524426,524362,590068,459011,524374,524310,524574,459027,524406,524342,590028,459019,524390,524326,589996,524294,524422,524358,590060,459015,524382,524318,589980,459031,524414,524350,590044,459023,524398,524334,590012,524302,524430,524366,590076,459008,524369,524305,524569,459024,524401,524337,590018,459016,524385,524321,589986,524289,524417,524353,590050,459012,524377,524313,589970,459028,524409,524345,590034,459020,524393,524329,590002,524297,524425,524361,590066,459010,524373,524309,524573,459026,524405,524341,590026,459018,524389,524325,589994,524293,524421,524357,590058,459014,524381,524317,589978,459030,524413,524349,590042,459022,524397,524333,590010,524301,524429,524365,590074,459009,524371,524307,524571,459025,524403,524339,590022,459017,524387,524323,589990,524291,524419,524355,590054,459013,524379,524315,589974,459029,524411,524347,590038,459021,524395,524331,590006,524299,524427,524363,590070,459011,524375,524311,524575,459027,524407,524343,590030,459019,524391,524327,589998,524295,524423,524359,590062,459015,524383,524319,589982,459031,524415,524351,590046,459023,524399,524335,590014,524303,524431,524367,590078,459008,524368,524304,524568,459024,524400,524336,590017,459016,524384,524320,589985,524288,524416,524352,590049,459012,524376,524312,589969,459028,524408,524344,590033,459020,524392,524328,590001,524296,524424,524360,590065,459010,524372,524308,524572,459026,524404,524340,590025,459018,524388,524324,589993,524292,524420,524356,590057,459014,524380,524316,589977,459030,524412,524348,590041,459022,524396,524332,590009,524300,524428,524364,590073,459009,524370,524306,524570,459025,524402,524338,590021,459017,524386,524322,589989,524290,524418,524354,590053,459013,524378,524314,589973,459029,524410,524346,590037,459021,524394,524330,590005,524298,524426,524362,590069,459011,524374,524310,524574,459027,524406,524342,590029,459019,524390,524326,589997,524294,524422,524358,590061,459015,524382,524318,589981,459031,524414,524350,590045,459023,524398,524334,590013,524302,524430,524366,590077,459008,524369,524305,524569,459024,524401,524337,590019,459016,524385,524321,589987,524289,524417,524353,590051,459012,524377,524313,589971,459028,524409,524345,590035,459020,524393,524329,590003,524297,524425,524361,590067,459010,524373,524309,524573,459026,524405,524341,590027,459018,524389,524325,589995,524293,524421,524357,590059,459014,524381,524317,589979,459030,524413,524349,590043,459022,524397,524333,590011,524301,524429,524365,590075,459009,524371,524307,524571,459025,524403,524339,590023,459017,524387,524323,589991,524291,524419,524355,590055,459013,524379,524315,589975,459029,524411,524347,590039,459021,524395,524331,590007,524299,524427,524363,590071,459011,524375,524311,524575,459027,524407,524343,590031,459019,524391,524327,589999,524295,524423,524359,590063,459015,524383,524319,589983,459031,524415,524351,590047,459023,524399,524335,590015,524303,524431,524367,590079]),9],n=[new Int32Array([327680,327696,327688,327704,327684,327700,327692,327708,327682,327698,327690,327706,327686,327702,327694,0,327681,327697,327689,327705,327685,327701,327693,327709,327683,327699,327691,327707,327687,327703,327695,0]),5];function s(e,t){this.str=e;this.dict=e.dict;var a=e.getByte(),i=e.getByte();if(-1===a||-1===i)throw new r.FormatError(`Invalid header in flate stream: ${a}, ${i}`);if(8!=(15&a))throw new r.FormatError(`Unknown compression method in flate stream: ${a}, ${i}`);if(((a<<8)+i)%31!=0)throw new r.FormatError(`Bad FCHECK in flate stream: ${a}, ${i}`);if(32&i)throw new r.FormatError(`FDICT bit set in flate stream: ${a}, ${i}`);this.codeSize=0;this.codeBuf=0;c.call(this,t)}s.prototype=Object.create(c.prototype);s.prototype.getBits=function(e){for(var t,a=this.str,i=this.codeSize,n=this.codeBuf;i<e;){if(-1===(t=a.getByte()))throw new r.FormatError("Bad encoding in flate stream");n|=t<<i;i+=8}t=n&(1<<e)-1;this.codeBuf=n>>e;this.codeSize=i-=e;return t};s.prototype.getCode=function(e){for(var t,a=this.str,i=e[0],n=e[1],s=this.codeSize,o=this.codeBuf;s<n&&-1!==(t=a.getByte());){o|=t<<s;s+=8}var c=i[o&(1<<n)-1],l=c>>16,h=65535&c;if(l<1||s<l)throw new r.FormatError("Bad encoding in flate stream");this.codeBuf=o>>l;this.codeSize=s-l;return h};s.prototype.generateHuffmanTable=function(e){var t,a=e.length,r=0;for(t=0;t<a;++t)e[t]>r&&(r=e[t]);for(var i=1<<r,n=new Int32Array(i),s=1,o=0,c=2;s<=r;++s,o<<=1,c<<=1)for(var l=0;l<a;++l)if(e[l]===s){var h=0,u=o;for(t=0;t<s;++t){h=h<<1|1&u;u>>=1}for(t=h;t<i;t+=c)n[t]=s<<16|l;++o}return[n,r]};s.prototype.readBlock=function(){var s,o,c=this.str,l=this.getBits(3);1&l&&(this.eof=!0);if(0!==(l>>=1)){var h,u;if(1===l){h=i;u=n}else{if(2!==l)throw new r.FormatError("Unknown block type in flate stream");var d,f=this.getBits(5)+257,g=this.getBits(5)+1,m=this.getBits(4)+4,p=new Uint8Array(e.length);for(d=0;d<m;++d)p[e[d]]=this.getBits(3);var b=this.generateHuffmanTable(p);o=0;d=0;for(var y,v,w,k=f+g,S=new Uint8Array(k);d<k;){var C=this.getCode(b);if(16===C){y=2;v=3;w=o}else if(17===C){y=3;v=3;w=o=0}else{if(18!==C){S[d++]=o=C;continue}y=7;v=11;w=o=0}for(var x=this.getBits(y)+v;x-- >0;)S[d++]=w}h=this.generateHuffmanTable(S.subarray(0,f));u=this.generateHuffmanTable(S.subarray(f,k))}for(var A=(s=this.buffer)?s.length:0,I=this.bufferLength;;){var F=this.getCode(h);if(F<256){I+1>=A&&(A=(s=this.ensureBuffer(I+1)).length);s[I++]=F}else{if(256===F){this.bufferLength=I;return}var T=(F=t[F-=257])>>16;T>0&&(T=this.getBits(T));o=(65535&F)+T;F=this.getCode(u);(T=(F=a[F])>>16)>0&&(T=this.getBits(T));var E=(65535&F)+T;I+o>=A&&(A=(s=this.ensureBuffer(I+o)).length);for(var O=0;O<o;++O,++I)s[I]=s[I-E]}}}else{var P;if(-1===(P=c.getByte()))throw new r.FormatError("Bad block header in flate stream");var B=P;if(-1===(P=c.getByte()))throw new r.FormatError("Bad block header in flate stream");B|=P<<8;if(-1===(P=c.getByte()))throw new r.FormatError("Bad block header in flate stream");var D=P;if(-1===(P=c.getByte()))throw new r.FormatError("Bad block header in flate stream");if((D|=P<<8)!==(65535&~B)&&(0!==B||0!==D))throw new r.FormatError("Bad uncompressed block length in flate stream");this.codeBuf=0;this.codeSize=0;const e=this.bufferLength,t=e+B;s=this.ensureBuffer(t);this.bufferLength=t;if(0===B)-1===c.peekByte()&&(this.eof=!0);else{const t=c.getBytes(B);s.set(t,e);t.length<B&&(this.eof=!0)}}};return s}();t.FlateStream=h;var u=function(){function e(e,t,a){if(!(0,i.isDict)(a))return e;var n=this.predictor=a.get("Predictor")||1;if(n<=1)return e;if(2!==n&&(n<10||n>15))throw new r.FormatError(`Unsupported predictor: ${n}`);this.readBlock=2===n?this.readBlockTiff:this.readBlockPng;this.str=e;this.dict=e.dict;var s=this.colors=a.get("Colors")||1,o=this.bits=a.get("BitsPerComponent")||8,l=this.columns=a.get("Columns")||1;this.pixBytes=s*o+7>>3;this.rowBytes=l*s*o+7>>3;c.call(this,t);return this}e.prototype=Object.create(c.prototype);e.prototype.readBlockTiff=function(){var e=this.rowBytes,t=this.bufferLength,a=this.ensureBuffer(t+e),r=this.bits,i=this.colors,n=this.str.getBytes(e);this.eof=!n.length;if(!this.eof){var s,o=0,c=0,l=0,h=0,u=t;if(1===r&&1===i)for(s=0;s<e;++s){var d=n[s]^o;d^=d>>1;d^=d>>2;o=(1&(d^=d>>4))<<7;a[u++]=d}else if(8===r){for(s=0;s<i;++s)a[u++]=n[s];for(;s<e;++s){a[u]=a[u-i]+n[s];u++}}else if(16===r){var f=2*i;for(s=0;s<f;++s)a[u++]=n[s];for(;s<e;s+=2){var g=((255&n[s])<<8)+(255&n[s+1])+((255&a[u-f])<<8)+(255&a[u-f+1]);a[u++]=g>>8&255;a[u++]=255&g}}else{var m=new Uint8Array(i+1),p=(1<<r)-1,b=0,y=t,v=this.columns;for(s=0;s<v;++s)for(var w=0;w<i;++w){if(l<r){o=o<<8|255&n[b++];l+=8}m[w]=m[w]+(o>>l-r)&p;l-=r;c=c<<r|m[w];if((h+=r)>=8){a[y++]=c>>h-8&255;h-=8}}h>0&&(a[y++]=(c<<8-h)+(o&(1<<8-h)-1))}this.bufferLength+=e}};e.prototype.readBlockPng=function(){var e=this.rowBytes,t=this.pixBytes,a=this.str.getByte(),i=this.str.getBytes(e);this.eof=!i.length;if(!this.eof){var n=this.bufferLength,s=this.ensureBuffer(n+e),o=s.subarray(n-e,n);0===o.length&&(o=new Uint8Array(e));var c,l,h,u=n;switch(a){case 0:for(c=0;c<e;++c)s[u++]=i[c];break;case 1:for(c=0;c<t;++c)s[u++]=i[c];for(;c<e;++c){s[u]=s[u-t]+i[c]&255;u++}break;case 2:for(c=0;c<e;++c)s[u++]=o[c]+i[c]&255;break;case 3:for(c=0;c<t;++c)s[u++]=(o[c]>>1)+i[c];for(;c<e;++c){s[u]=(o[c]+s[u-t]>>1)+i[c]&255;u++}break;case 4:for(c=0;c<t;++c){l=o[c];h=i[c];s[u++]=l+h}for(;c<e;++c){l=o[c];var d=o[c-t],f=s[u-t],g=f+l-d,m=g-f;m<0&&(m=-m);var p=g-l;p<0&&(p=-p);var b=g-d;b<0&&(b=-b);h=i[c];s[u++]=m<=p&&m<=b?f+h:p<=b?l+h:d+h}break;default:throw new r.FormatError(`Unsupported predictor: ${a}`)}this.bufferLength+=e}};return e}();t.PredictorStream=u;var d=function(){function e(e,t,a){this.str=e;this.dict=e.dict;this.decrypt=a;this.nextChunk=null;this.initialized=!1;c.call(this,t)}e.prototype=Object.create(c.prototype);e.prototype.readBlock=function(){var e;if(this.initialized)e=this.nextChunk;else{e=this.str.getBytes(512);this.initialized=!0}if(e&&0!==e.length){this.nextChunk=this.str.getBytes(512);var t=this.nextChunk&&this.nextChunk.length>0;e=(0,this.decrypt)(e,!t);var a,r=this.bufferLength,i=e.length,n=this.ensureBuffer(r+i);for(a=0;a<i;a++)n[r++]=e[a];this.bufferLength=r}else this.eof=!0};return e}();t.DecryptStream=d;var f=function(){function e(e,t){this.str=e;this.dict=e.dict;this.input=new Uint8Array(5);t&&(t*=.8);c.call(this,t)}e.prototype=Object.create(c.prototype);e.prototype.readBlock=function(){for(var e=this.str,t=e.getByte();(0,n.isWhiteSpace)(t);)t=e.getByte();if(-1!==t&&126!==t){var a,r,i=this.bufferLength;if(122===t){a=this.ensureBuffer(i+4);for(r=0;r<4;++r)a[i+r]=0;this.bufferLength+=4}else{var s=this.input;s[0]=t;for(r=1;r<5;++r){t=e.getByte();for(;(0,n.isWhiteSpace)(t);)t=e.getByte();s[r]=t;if(-1===t||126===t)break}a=this.ensureBuffer(i+r-1);this.bufferLength+=r-1;if(r<5){for(;r<5;++r)s[r]=117;this.eof=!0}var o=0;for(r=0;r<5;++r)o=85*o+(s[r]-33);for(r=3;r>=0;--r){a[i+r]=255&o;o>>=8}}}else this.eof=!0};return e}();t.Ascii85Stream=f;var g=function(){function e(e,t){this.str=e;this.dict=e.dict;this.firstDigit=-1;t&&(t*=.5);c.call(this,t)}e.prototype=Object.create(c.prototype);e.prototype.readBlock=function(){var e=this.str.getBytes(8e3);if(e.length){for(var t=e.length+1>>1,a=this.ensureBuffer(this.bufferLength+t),r=this.bufferLength,i=this.firstDigit,n=0,s=e.length;n<s;n++){var o,c=e[n];if(c>=48&&c<=57)o=15&c;else{if(!(c>=65&&c<=70||c>=97&&c<=102)){if(62===c){this.eof=!0;break}continue}o=9+(15&c)}if(i<0)i=o;else{a[r++]=i<<4|o;i=-1}}if(i>=0&&this.eof){a[r++]=i<<4;i=-1}this.firstDigit=i;this.bufferLength=r}else this.eof=!0};return e}();t.AsciiHexStream=g;var m=function(){function e(e,t){this.str=e;this.dict=e.dict;c.call(this,t)}e.prototype=Object.create(c.prototype);e.prototype.readBlock=function(){var e=this.str.getBytes(2);if(!e||e.length<2||128===e[0])this.eof=!0;else{var t,a=this.bufferLength,r=e[0];if(r<128){(t=this.ensureBuffer(a+r+1))[a++]=e[1];if(r>0){var i=this.str.getBytes(r);t.set(i,a);a+=r}}else{r=257-r;var n=e[1];t=this.ensureBuffer(a+r+1);for(var s=0;s<r;s++)t[a++]=n}this.bufferLength=a}};return e}();t.RunLengthStream=m;var p=function(){function e(e,t,a){this.str=e;this.dict=e.dict;this.cachedData=0;this.bitsCached=0;for(var r={earlyChange:a,codeLength:9,nextCode:258,dictionaryValues:new Uint8Array(4096),dictionaryLengths:new Uint16Array(4096),dictionaryPrevCodes:new Uint16Array(4096),currentSequence:new Uint8Array(4096),currentSequenceLength:0},i=0;i<256;++i){r.dictionaryValues[i]=i;r.dictionaryLengths[i]=1}this.lzwState=r;c.call(this,t)}e.prototype=Object.create(c.prototype);e.prototype.readBits=function(e){for(var t=this.bitsCached,a=this.cachedData;t<e;){var r=this.str.getByte();if(-1===r){this.eof=!0;return null}a=a<<8|r;t+=8}this.bitsCached=t-=e;this.cachedData=a;this.lastCode=null;return a>>>t&(1<<e)-1};e.prototype.readBlock=function(){var e,t,a,r=1024,i=this.lzwState;if(i){var n=i.earlyChange,s=i.nextCode,o=i.dictionaryValues,c=i.dictionaryLengths,l=i.dictionaryPrevCodes,h=i.codeLength,u=i.prevCode,d=i.currentSequence,f=i.currentSequenceLength,g=0,m=this.bufferLength,p=this.ensureBuffer(this.bufferLength+r);for(e=0;e<512;e++){var b=this.readBits(h),y=f>0;if(b<256){d[0]=b;f=1}else{if(!(b>=258)){if(256===b){h=9;s=258;f=0;continue}this.eof=!0;delete this.lzwState;break}if(b<s)for(t=(f=c[b])-1,a=b;t>=0;t--){d[t]=o[a];a=l[a]}else d[f++]=d[0]}if(y){l[s]=u;c[s]=c[u]+1;o[s]=d[0];h=++s+n&s+n-1?h:0|Math.min(Math.log(s+n)/.6931471805599453+1,12)}u=b;if(r<(g+=f)){do{r+=512}while(r<g);p=this.ensureBuffer(this.bufferLength+r)}for(t=0;t<f;t++)p[m++]=d[t]}i.nextCode=s;i.codeLength=h;i.prevCode=u;i.currentSequenceLength=f;this.bufferLength=m}};return e}();t.LZWStream=p;var b=function(){function e(){s.call(this,new Uint8Array(0))}e.prototype=s.prototype;return e}();t.NullStream=b},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.CCITTFaxStream=void 0;var r=a(4),i=a(13),n=a(11),s=function(){function e(e,t,a){this.str=e;this.dict=e.dict;(0,r.isDict)(a)||(a=r.Dict.empty);const s={next:()=>e.getByte()};this.ccittFaxDecoder=new i.CCITTFaxDecoder(s,{K:a.get("K"),EndOfLine:a.get("EndOfLine"),EncodedByteAlign:a.get("EncodedByteAlign"),Columns:a.get("Columns"),Rows:a.get("Rows"),EndOfBlock:a.get("EndOfBlock"),BlackIs1:a.get("BlackIs1")});n.DecodeStream.call(this,t)}e.prototype=Object.create(n.DecodeStream.prototype);e.prototype.readBlock=function(){for(;!this.eof;){const e=this.ccittFaxDecoder.readNextChar();if(-1===e){this.eof=!0;return}this.ensureBuffer(this.bufferLength+1);this.buffer[this.bufferLength++]=e}};return e}();t.CCITTFaxStream=s},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.CCITTFaxDecoder=void 0;var r=a(2);const i=function(){const e=[[-1,-1],[-1,-1],[7,8],[7,7],[6,6],[6,6],[6,5],[6,5],[4,0],[4,0],[4,0],[4,0],[4,0],[4,0],[4,0],[4,0],[3,1],[3,1],[3,1],[3,1],[3,1],[3,1],[3,1],[3,1],[3,1],[3,1],[3,1],[3,1],[3,1],[3,1],[3,1],[3,1],[3,4],[3,4],[3,4],[3,4],[3,4],[3,4],[3,4],[3,4],[3,4],[3,4],[3,4],[3,4],[3,4],[3,4],[3,4],[3,4],[3,3],[3,3],[3,3],[3,3],[3,3],[3,3],[3,3],[3,3],[3,3],[3,3],[3,3],[3,3],[3,3],[3,3],[3,3],[3,3],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2],[1,2]],t=[[-1,-1],[12,-2],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[11,1792],[11,1792],[12,1984],[12,2048],[12,2112],[12,2176],[12,2240],[12,2304],[11,1856],[11,1856],[11,1920],[11,1920],[12,2368],[12,2432],[12,2496],[12,2560]],a=[[-1,-1],[-1,-1],[-1,-1],[-1,-1],[8,29],[8,29],[8,30],[8,30],[8,45],[8,45],[8,46],[8,46],[7,22],[7,22],[7,22],[7,22],[7,23],[7,23],[7,23],[7,23],[8,47],[8,47],[8,48],[8,48],[6,13],[6,13],[6,13],[6,13],[6,13],[6,13],[6,13],[6,13],[7,20],[7,20],[7,20],[7,20],[8,33],[8,33],[8,34],[8,34],[8,35],[8,35],[8,36],[8,36],[8,37],[8,37],[8,38],[8,38],[7,19],[7,19],[7,19],[7,19],[8,31],[8,31],[8,32],[8,32],[6,1],[6,1],[6,1],[6,1],[6,1],[6,1],[6,1],[6,1],[6,12],[6,12],[6,12],[6,12],[6,12],[6,12],[6,12],[6,12],[8,53],[8,53],[8,54],[8,54],[7,26],[7,26],[7,26],[7,26],[8,39],[8,39],[8,40],[8,40],[8,41],[8,41],[8,42],[8,42],[8,43],[8,43],[8,44],[8,44],[7,21],[7,21],[7,21],[7,21],[7,28],[7,28],[7,28],[7,28],[8,61],[8,61],[8,62],[8,62],[8,63],[8,63],[8,0],[8,0],[8,320],[8,320],[8,384],[8,384],[5,10],[5,10],[5,10],[5,10],[5,10],[5,10],[5,10],[5,10],[5,10],[5,10],[5,10],[5,10],[5,10],[5,10],[5,10],[5,10],[5,11],[5,11],[5,11],[5,11],[5,11],[5,11],[5,11],[5,11],[5,11],[5,11],[5,11],[5,11],[5,11],[5,11],[5,11],[5,11],[7,27],[7,27],[7,27],[7,27],[8,59],[8,59],[8,60],[8,60],[9,1472],[9,1536],[9,1600],[9,1728],[7,18],[7,18],[7,18],[7,18],[7,24],[7,24],[7,24],[7,24],[8,49],[8,49],[8,50],[8,50],[8,51],[8,51],[8,52],[8,52],[7,25],[7,25],[7,25],[7,25],[8,55],[8,55],[8,56],[8,56],[8,57],[8,57],[8,58],[8,58],[6,192],[6,192],[6,192],[6,192],[6,192],[6,192],[6,192],[6,192],[6,1664],[6,1664],[6,1664],[6,1664],[6,1664],[6,1664],[6,1664],[6,1664],[8,448],[8,448],[8,512],[8,512],[9,704],[9,768],[8,640],[8,640],[8,576],[8,576],[9,832],[9,896],[9,960],[9,1024],[9,1088],[9,1152],[9,1216],[9,1280],[9,1344],[9,1408],[7,256],[7,256],[7,256],[7,256],[4,2],[4,2],[4,2],[4,2],[4,2],[4,2],[4,2],[4,2],[4,2],[4,2],[4,2],[4,2],[4,2],[4,2],[4,2],[4,2],[4,2],[4,2],[4,2],[4,2],[4,2],[4,2],[4,2],[4,2],[4,2],[4,2],[4,2],[4,2],[4,2],[4,2],[4,2],[4,2],[4,3],[4,3],[4,3],[4,3],[4,3],[4,3],[4,3],[4,3],[4,3],[4,3],[4,3],[4,3],[4,3],[4,3],[4,3],[4,3],[4,3],[4,3],[4,3],[4,3],[4,3],[4,3],[4,3],[4,3],[4,3],[4,3],[4,3],[4,3],[4,3],[4,3],[4,3],[4,3],[5,128],[5,128],[5,128],[5,128],[5,128],[5,128],[5,128],[5,128],[5,128],[5,128],[5,128],[5,128],[5,128],[5,128],[5,128],[5,128],[5,8],[5,8],[5,8],[5,8],[5,8],[5,8],[5,8],[5,8],[5,8],[5,8],[5,8],[5,8],[5,8],[5,8],[5,8],[5,8],[5,9],[5,9],[5,9],[5,9],[5,9],[5,9],[5,9],[5,9],[5,9],[5,9],[5,9],[5,9],[5,9],[5,9],[5,9],[5,9],[6,16],[6,16],[6,16],[6,16],[6,16],[6,16],[6,16],[6,16],[6,17],[6,17],[6,17],[6,17],[6,17],[6,17],[6,17],[6,17],[4,4],[4,4],[4,4],[4,4],[4,4],[4,4],[4,4],[4,4],[4,4],[4,4],[4,4],[4,4],[4,4],[4,4],[4,4],[4,4],[4,4],[4,4],[4,4],[4,4],[4,4],[4,4],[4,4],[4,4],[4,4],[4,4],[4,4],[4,4],[4,4],[4,4],[4,4],[4,4],[4,5],[4,5],[4,5],[4,5],[4,5],[4,5],[4,5],[4,5],[4,5],[4,5],[4,5],[4,5],[4,5],[4,5],[4,5],[4,5],[4,5],[4,5],[4,5],[4,5],[4,5],[4,5],[4,5],[4,5],[4,5],[4,5],[4,5],[4,5],[4,5],[4,5],[4,5],[4,5],[6,14],[6,14],[6,14],[6,14],[6,14],[6,14],[6,14],[6,14],[6,15],[6,15],[6,15],[6,15],[6,15],[6,15],[6,15],[6,15],[5,64],[5,64],[5,64],[5,64],[5,64],[5,64],[5,64],[5,64],[5,64],[5,64],[5,64],[5,64],[5,64],[5,64],[5,64],[5,64],[4,6],[4,6],[4,6],[4,6],[4,6],[4,6],[4,6],[4,6],[4,6],[4,6],[4,6],[4,6],[4,6],[4,6],[4,6],[4,6],[4,6],[4,6],[4,6],[4,6],[4,6],[4,6],[4,6],[4,6],[4,6],[4,6],[4,6],[4,6],[4,6],[4,6],[4,6],[4,6],[4,7],[4,7],[4,7],[4,7],[4,7],[4,7],[4,7],[4,7],[4,7],[4,7],[4,7],[4,7],[4,7],[4,7],[4,7],[4,7],[4,7],[4,7],[4,7],[4,7],[4,7],[4,7],[4,7],[4,7],[4,7],[4,7],[4,7],[4,7],[4,7],[4,7],[4,7],[4,7]],i=[[-1,-1],[-1,-1],[12,-2],[12,-2],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[11,1792],[11,1792],[11,1792],[11,1792],[12,1984],[12,1984],[12,2048],[12,2048],[12,2112],[12,2112],[12,2176],[12,2176],[12,2240],[12,2240],[12,2304],[12,2304],[11,1856],[11,1856],[11,1856],[11,1856],[11,1920],[11,1920],[11,1920],[11,1920],[12,2368],[12,2368],[12,2432],[12,2432],[12,2496],[12,2496],[12,2560],[12,2560],[10,18],[10,18],[10,18],[10,18],[10,18],[10,18],[10,18],[10,18],[12,52],[12,52],[13,640],[13,704],[13,768],[13,832],[12,55],[12,55],[12,56],[12,56],[13,1280],[13,1344],[13,1408],[13,1472],[12,59],[12,59],[12,60],[12,60],[13,1536],[13,1600],[11,24],[11,24],[11,24],[11,24],[11,25],[11,25],[11,25],[11,25],[13,1664],[13,1728],[12,320],[12,320],[12,384],[12,384],[12,448],[12,448],[13,512],[13,576],[12,53],[12,53],[12,54],[12,54],[13,896],[13,960],[13,1024],[13,1088],[13,1152],[13,1216],[10,64],[10,64],[10,64],[10,64],[10,64],[10,64],[10,64],[10,64]],n=[[8,13],[8,13],[8,13],[8,13],[8,13],[8,13],[8,13],[8,13],[8,13],[8,13],[8,13],[8,13],[8,13],[8,13],[8,13],[8,13],[11,23],[11,23],[12,50],[12,51],[12,44],[12,45],[12,46],[12,47],[12,57],[12,58],[12,61],[12,256],[10,16],[10,16],[10,16],[10,16],[10,17],[10,17],[10,17],[10,17],[12,48],[12,49],[12,62],[12,63],[12,30],[12,31],[12,32],[12,33],[12,40],[12,41],[11,22],[11,22],[8,14],[8,14],[8,14],[8,14],[8,14],[8,14],[8,14],[8,14],[8,14],[8,14],[8,14],[8,14],[8,14],[8,14],[8,14],[8,14],[7,10],[7,10],[7,10],[7,10],[7,10],[7,10],[7,10],[7,10],[7,10],[7,10],[7,10],[7,10],[7,10],[7,10],[7,10],[7,10],[7,10],[7,10],[7,10],[7,10],[7,10],[7,10],[7,10],[7,10],[7,10],[7,10],[7,10],[7,10],[7,10],[7,10],[7,10],[7,10],[7,11],[7,11],[7,11],[7,11],[7,11],[7,11],[7,11],[7,11],[7,11],[7,11],[7,11],[7,11],[7,11],[7,11],[7,11],[7,11],[7,11],[7,11],[7,11],[7,11],[7,11],[7,11],[7,11],[7,11],[7,11],[7,11],[7,11],[7,11],[7,11],[7,11],[7,11],[7,11],[9,15],[9,15],[9,15],[9,15],[9,15],[9,15],[9,15],[9,15],[12,128],[12,192],[12,26],[12,27],[12,28],[12,29],[11,19],[11,19],[11,20],[11,20],[12,34],[12,35],[12,36],[12,37],[12,38],[12,39],[11,21],[11,21],[12,42],[12,43],[10,0],[10,0],[10,0],[10,0],[7,12],[7,12],[7,12],[7,12],[7,12],[7,12],[7,12],[7,12],[7,12],[7,12],[7,12],[7,12],[7,12],[7,12],[7,12],[7,12],[7,12],[7,12],[7,12],[7,12],[7,12],[7,12],[7,12],[7,12],[7,12],[7,12],[7,12],[7,12],[7,12],[7,12],[7,12],[7,12]],s=[[-1,-1],[-1,-1],[-1,-1],[-1,-1],[6,9],[6,8],[5,7],[5,7],[4,6],[4,6],[4,6],[4,6],[4,5],[4,5],[4,5],[4,5],[3,1],[3,1],[3,1],[3,1],[3,1],[3,1],[3,1],[3,1],[3,4],[3,4],[3,4],[3,4],[3,4],[3,4],[3,4],[3,4],[2,3],[2,3],[2,3],[2,3],[2,3],[2,3],[2,3],[2,3],[2,3],[2,3],[2,3],[2,3],[2,3],[2,3],[2,3],[2,3],[2,2],[2,2],[2,2],[2,2],[2,2],[2,2],[2,2],[2,2],[2,2],[2,2],[2,2],[2,2],[2,2],[2,2],[2,2],[2,2]];function o(e,t={}){if(!e||"function"!=typeof e.next)throw new Error('CCITTFaxDecoder - invalid "source" parameter.');this.source=e;this.eof=!1;this.encoding=t.K||0;this.eoline=t.EndOfLine||!1;this.byteAlign=t.EncodedByteAlign||!1;this.columns=t.Columns||1728;this.rows=t.Rows||0;let a,r=t.EndOfBlock;null==r&&(r=!0);this.eoblock=r;this.black=t.BlackIs1||!1;this.codingLine=new Uint32Array(this.columns+1);this.refLine=new Uint32Array(this.columns+2);this.codingLine[0]=this.columns;this.codingPos=0;this.row=0;this.nextLine2D=this.encoding<0;this.inputBits=0;this.inputBuf=0;this.outputBits=0;this.rowsDone=!1;for(;0===(a=this._lookBits(12));)this._eatBits(1);1===a&&this._eatBits(12);if(this.encoding>0){this.nextLine2D=!this._lookBits(1);this._eatBits(1)}}o.prototype={readNextChar(){if(this.eof)return-1;const e=this.refLine,t=this.codingLine,a=this.columns;let i,n,s,o,c;if(0===this.outputBits){this.rowsDone&&(this.eof=!0);if(this.eof)return-1;this.err=!1;let s,c,l;if(this.nextLine2D){for(o=0;t[o]<a;++o)e[o]=t[o];e[o++]=a;e[o]=a;t[0]=0;this.codingPos=0;i=0;n=0;for(;t[this.codingPos]<a;){s=this._getTwoDimCode();switch(s){case 0:this._addPixels(e[i+1],n);e[i+1]<a&&(i+=2);break;case 1:s=c=0;if(n){do{s+=l=this._getBlackCode()}while(l>=64);do{c+=l=this._getWhiteCode()}while(l>=64)}else{do{s+=l=this._getWhiteCode()}while(l>=64);do{c+=l=this._getBlackCode()}while(l>=64)}this._addPixels(t[this.codingPos]+s,n);t[this.codingPos]<a&&this._addPixels(t[this.codingPos]+c,1^n);for(;e[i]<=t[this.codingPos]&&e[i]<a;)i+=2;break;case 7:this._addPixels(e[i]+3,n);n^=1;if(t[this.codingPos]<a){++i;for(;e[i]<=t[this.codingPos]&&e[i]<a;)i+=2}break;case 5:this._addPixels(e[i]+2,n);n^=1;if(t[this.codingPos]<a){++i;for(;e[i]<=t[this.codingPos]&&e[i]<a;)i+=2}break;case 3:this._addPixels(e[i]+1,n);n^=1;if(t[this.codingPos]<a){++i;for(;e[i]<=t[this.codingPos]&&e[i]<a;)i+=2}break;case 2:this._addPixels(e[i],n);n^=1;if(t[this.codingPos]<a){++i;for(;e[i]<=t[this.codingPos]&&e[i]<a;)i+=2}break;case 8:this._addPixelsNeg(e[i]-3,n);n^=1;if(t[this.codingPos]<a){i>0?--i:++i;for(;e[i]<=t[this.codingPos]&&e[i]<a;)i+=2}break;case 6:this._addPixelsNeg(e[i]-2,n);n^=1;if(t[this.codingPos]<a){i>0?--i:++i;for(;e[i]<=t[this.codingPos]&&e[i]<a;)i+=2}break;case 4:this._addPixelsNeg(e[i]-1,n);n^=1;if(t[this.codingPos]<a){i>0?--i:++i;for(;e[i]<=t[this.codingPos]&&e[i]<a;)i+=2}break;case-1:this._addPixels(a,0);this.eof=!0;break;default:(0,r.info)("bad 2d code");this._addPixels(a,0);this.err=!0}}}else{t[0]=0;this.codingPos=0;n=0;for(;t[this.codingPos]<a;){s=0;if(n)do{s+=l=this._getBlackCode()}while(l>=64);else do{s+=l=this._getWhiteCode()}while(l>=64);this._addPixels(t[this.codingPos]+s,n);n^=1}}let h=!1;this.byteAlign&&(this.inputBits&=-8);if(this.eoblock||this.row!==this.rows-1){s=this._lookBits(12);if(this.eoline)for(;-1!==s&&1!==s;){this._eatBits(1);s=this._lookBits(12)}else for(;0===s;){this._eatBits(1);s=this._lookBits(12)}if(1===s){this._eatBits(12);h=!0}else-1===s&&(this.eof=!0)}else this.rowsDone=!0;if(!this.eof&&this.encoding>0&&!this.rowsDone){this.nextLine2D=!this._lookBits(1);this._eatBits(1)}if(this.eoblock&&h&&this.byteAlign){s=this._lookBits(12);if(1===s){this._eatBits(12);if(this.encoding>0){this._lookBits(1);this._eatBits(1)}if(this.encoding>=0)for(o=0;o<4;++o){s=this._lookBits(12);1!==s&&(0,r.info)("bad rtc code: "+s);this._eatBits(12);if(this.encoding>0){this._lookBits(1);this._eatBits(1)}}this.eof=!0}}else if(this.err&&this.eoline){for(;;){s=this._lookBits(13);if(-1===s){this.eof=!0;return-1}if(s>>1==1)break;this._eatBits(1)}this._eatBits(12);if(this.encoding>0){this._eatBits(1);this.nextLine2D=!(1&s)}}t[0]>0?this.outputBits=t[this.codingPos=0]:this.outputBits=t[this.codingPos=1];this.row++}if(this.outputBits>=8){c=1&this.codingPos?0:255;this.outputBits-=8;if(0===this.outputBits&&t[this.codingPos]<a){this.codingPos++;this.outputBits=t[this.codingPos]-t[this.codingPos-1]}}else{s=8;c=0;do{if(this.outputBits>s){c<<=s;1&this.codingPos||(c|=255>>8-s);this.outputBits-=s;s=0}else{c<<=this.outputBits;1&this.codingPos||(c|=255>>8-this.outputBits);s-=this.outputBits;this.outputBits=0;if(t[this.codingPos]<a){this.codingPos++;this.outputBits=t[this.codingPos]-t[this.codingPos-1]}else if(s>0){c<<=s;s=0}}}while(s)}this.black&&(c^=255);return c},_addPixels(e,t){const a=this.codingLine;let i=this.codingPos;if(e>a[i]){if(e>this.columns){(0,r.info)("row is wrong length");this.err=!0;e=this.columns}1&i^t&&++i;a[i]=e}this.codingPos=i},_addPixelsNeg(e,t){const a=this.codingLine;let i=this.codingPos;if(e>a[i]){if(e>this.columns){(0,r.info)("row is wrong length");this.err=!0;e=this.columns}1&i^t&&++i;a[i]=e}else if(e<a[i]){if(e<0){(0,r.info)("invalid code");this.err=!0;e=0}for(;i>0&&e<a[i-1];)--i;a[i]=e}this.codingPos=i},_findTableCode(e,t,a,r){const i=r||0;for(let r=e;r<=t;++r){let e=this._lookBits(r);if(-1===e)return[!0,1,!1];r<t&&(e<<=t-r);if(!i||e>=i){const t=a[e-i];if(t[0]===r){this._eatBits(r);return[!0,t[1],!0]}}}return[!1,0,!1]},_getTwoDimCode(){let t,a=0;if(this.eoblock){a=this._lookBits(7);t=e[a];if(t&&t[0]>0){this._eatBits(t[0]);return t[1]}}else{const t=this._findTableCode(1,7,e);if(t[0]&&t[2])return t[1]}(0,r.info)("Bad two dim code");return-1},_getWhiteCode(){let e,i=0;if(this.eoblock){i=this._lookBits(12);if(-1===i)return 1;e=i>>5==0?t[i]:a[i>>3];if(e[0]>0){this._eatBits(e[0]);return e[1]}}else{let e=this._findTableCode(1,9,a);if(e[0])return e[1];e=this._findTableCode(11,12,t);if(e[0])return e[1]}(0,r.info)("bad white code");this._eatBits(1);return 1},_getBlackCode(){let e,t;if(this.eoblock){e=this._lookBits(13);if(-1===e)return 1;t=e>>7==0?i[e]:e>>9==0&&e>>7!=0?n[(e>>1)-64]:s[e>>7];if(t[0]>0){this._eatBits(t[0]);return t[1]}}else{let e=this._findTableCode(2,6,s);if(e[0])return e[1];e=this._findTableCode(7,12,n,64);if(e[0])return e[1];e=this._findTableCode(10,13,i);if(e[0])return e[1]}(0,r.info)("bad black code");this._eatBits(1);return 1},_lookBits(e){let t;for(;this.inputBits<e;){if(-1===(t=this.source.next()))return 0===this.inputBits?-1:this.inputBuf<<e-this.inputBits&65535>>16-e;this.inputBuf=this.inputBuf<<8|t;this.inputBits+=8}return this.inputBuf>>this.inputBits-e&65535>>16-e},_eatBits(e){(this.inputBits-=e)<0&&(this.inputBits=0)}};return o}();t.CCITTFaxDecoder=i},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.Jbig2Stream=void 0;var r=a(4),i=a(11),n=a(15),s=a(2);const o=function(){function e(e,t,a,r){this.stream=e;this.maybeLength=t;this.dict=a;this.params=r;i.DecodeStream.call(this,t)}e.prototype=Object.create(i.DecodeStream.prototype);Object.defineProperty(e.prototype,"bytes",{get(){return(0,s.shadow)(this,"bytes",this.stream.getBytes(this.maybeLength))},configurable:!0});e.prototype.ensureBuffer=function(e){};e.prototype.readBlock=function(){if(this.eof)return;const e=new n.Jbig2Image,t=[];if((0,r.isDict)(this.params)){const e=this.params.get("JBIG2Globals");if((0,r.isStream)(e)){const a=e.getBytes();t.push({data:a,start:0,end:a.length})}}t.push({data:this.bytes,start:0,end:this.bytes.length});const a=e.parseChunks(t),i=a.length;for(let e=0;e<i;e++)a[e]^=255;this.buffer=a;this.bufferLength=i;this.eof=!0};return e}();t.Jbig2Stream=o},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.Jbig2Image=void 0;var r=a(2),i=a(7),n=a(16),s=a(13);class o extends r.BaseException{constructor(e){super(`JBIG2 error: ${e}`)}}var c=function(){function e(){}e.prototype={getContexts(e){return e in this?this[e]:this[e]=new Int8Array(65536)}};function t(e,t,a){this.data=e;this.start=t;this.end=a}t.prototype={get decoder(){var e=new n.ArithmeticDecoder(this.data,this.start,this.end);return(0,r.shadow)(this,"decoder",e)},get contextCache(){var t=new e;return(0,r.shadow)(this,"contextCache",t)}};function a(e,t,a){var r=e.getContexts(t),i=1;function n(e){for(var t=0,n=0;n<e;n++){var s=a.readBit(r,i);i=i<256?i<<1|s:511&(i<<1|s)|256;t=t<<1|s}return t>>>0}var s=n(1),o=n(1)?n(1)?n(1)?n(1)?n(1)?n(32)+4436:n(12)+340:n(8)+84:n(6)+20:n(4)+4:n(2);return 0===s?o:o>0?-o:null}function c(e,t,a){for(var r=e.getContexts("IAID"),i=1,n=0;n<a;n++){i=i<<1|t.readBit(r,i)}return a<31?i&(1<<a)-1:2147483647&i}var l=["SymbolDictionary",null,null,null,"IntermediateTextRegion",null,"ImmediateTextRegion","ImmediateLosslessTextRegion",null,null,null,null,null,null,null,null,"PatternDictionary",null,null,null,"IntermediateHalftoneRegion",null,"ImmediateHalftoneRegion","ImmediateLosslessHalftoneRegion",null,null,null,null,null,null,null,null,null,null,null,null,"IntermediateGenericRegion",null,"ImmediateGenericRegion","ImmediateLosslessGenericRegion","IntermediateGenericRefinementRegion",null,"ImmediateGenericRefinementRegion","ImmediateLosslessGenericRefinementRegion",null,null,null,null,"PageInformation","EndOfPage","EndOfStripe","EndOfFile","Profiles","Tables",null,null,null,null,null,null,null,null,"Extension"],h=[[{x:-1,y:-2},{x:0,y:-2},{x:1,y:-2},{x:-2,y:-1},{x:-1,y:-1},{x:0,y:-1},{x:1,y:-1},{x:2,y:-1},{x:-4,y:0},{x:-3,y:0},{x:-2,y:0},{x:-1,y:0}],[{x:-1,y:-2},{x:0,y:-2},{x:1,y:-2},{x:2,y:-2},{x:-2,y:-1},{x:-1,y:-1},{x:0,y:-1},{x:1,y:-1},{x:2,y:-1},{x:-3,y:0},{x:-2,y:0},{x:-1,y:0}],[{x:-1,y:-2},{x:0,y:-2},{x:1,y:-2},{x:-2,y:-1},{x:-1,y:-1},{x:0,y:-1},{x:1,y:-1},{x:-2,y:0},{x:-1,y:0}],[{x:-3,y:-1},{x:-2,y:-1},{x:-1,y:-1},{x:0,y:-1},{x:1,y:-1},{x:-4,y:0},{x:-3,y:0},{x:-2,y:0},{x:-1,y:0}]],u=[{coding:[{x:0,y:-1},{x:1,y:-1},{x:-1,y:0}],reference:[{x:0,y:-1},{x:1,y:-1},{x:-1,y:0},{x:0,y:0},{x:1,y:0},{x:-1,y:1},{x:0,y:1},{x:1,y:1}]},{coding:[{x:-1,y:-1},{x:0,y:-1},{x:1,y:-1},{x:-1,y:0}],reference:[{x:0,y:-1},{x:-1,y:0},{x:0,y:0},{x:1,y:0},{x:0,y:1},{x:1,y:1}]}],d=[39717,1941,229,405],f=[32,8];function g(e,t,a,r,i,n,s,o){if(e){return B(new E(o.data,o.start,o.end),t,a,!1)}if(0===r&&!n&&!i&&4===s.length&&3===s[0].x&&-1===s[0].y&&-3===s[1].x&&-1===s[1].y&&2===s[2].x&&-2===s[2].y&&-2===s[3].x&&-2===s[3].y)return function(e,t,a){var r,i,n,s,o,c,l,h=a.decoder,u=a.contextCache.getContexts("GB"),d=[];for(i=0;i<t;i++){o=d[i]=new Uint8Array(e);c=i<1?o:d[i-1];r=(l=i<2?o:d[i-2])[0]<<13|l[1]<<12|l[2]<<11|c[0]<<7|c[1]<<6|c[2]<<5|c[3]<<4;for(n=0;n<e;n++){o[n]=s=h.readBit(u,r);r=(31735&r)<<1|(n+3<e?l[n+3]<<11:0)|(n+4<e?c[n+4]<<4:0)|s}}return d}(t,a,o);var c=!!n,l=h[r].concat(s);l.sort((function(e,t){return e.y-t.y||e.x-t.x}));var u,f,g=l.length,m=new Int8Array(g),p=new Int8Array(g),b=[],y=0,v=0,w=0,k=0;for(f=0;f<g;f++){m[f]=l[f].x;p[f]=l[f].y;v=Math.min(v,l[f].x);w=Math.max(w,l[f].x);k=Math.min(k,l[f].y);f<g-1&&l[f].y===l[f+1].y&&l[f].x===l[f+1].x-1?y|=1<<g-1-f:b.push(f)}var S=b.length,C=new Int8Array(S),x=new Int8Array(S),A=new Uint16Array(S);for(u=0;u<S;u++){f=b[u];C[u]=l[f].x;x[u]=l[f].y;A[u]=1<<g-1-f}for(var I,F,T,O,P,D=-v,N=-k,M=t-w,L=d[r],R=new Uint8Array(t),U=[],q=o.decoder,j=o.contextCache.getContexts("GB"),_=0,z=0,H=0;H<a;H++){if(i){if(_^=q.readBit(j,L)){U.push(R);continue}}R=new Uint8Array(R);U.push(R);for(I=0;I<t;I++)if(c&&n[H][I])R[I]=0;else{if(I>=D&&I<M&&H>=N){z=z<<1&y;for(f=0;f<S;f++){F=H+x[f];T=I+C[f];(O=U[F][T])&&(z|=O=A[f])}}else{z=0;P=g-1;for(f=0;f<g;f++,P--)(T=I+m[f])>=0&&T<t&&(F=H+p[f])>=0&&(O=U[F][T])&&(z|=O<<P)}var G=q.readBit(j,z);R[I]=G}}return U}function m(e,t,a,r,i,n,s,c,l){var h=u[a].coding;0===a&&(h=h.concat([c[0]]));var d,g=h.length,m=new Int32Array(g),p=new Int32Array(g);for(d=0;d<g;d++){m[d]=h[d].x;p[d]=h[d].y}var b=u[a].reference;0===a&&(b=b.concat([c[1]]));var y=b.length,v=new Int32Array(y),w=new Int32Array(y);for(d=0;d<y;d++){v[d]=b[d].x;w[d]=b[d].y}for(var k=r[0].length,S=r.length,C=f[a],x=[],A=l.decoder,I=l.contextCache.getContexts("GR"),F=0,T=0;T<t;T++){if(s){if(F^=A.readBit(I,C))throw new o("prediction is not supported")}var E=new Uint8Array(e);x.push(E);for(var O=0;O<e;O++){var P,B,D=0;for(d=0;d<g;d++){P=T+p[d];B=O+m[d];P<0||B<0||B>=e?D<<=1:D=D<<1|x[P][B]}for(d=0;d<y;d++){P=T+w[d]-n;B=O+v[d]-i;P<0||P>=S||B<0||B>=k?D<<=1:D=D<<1|r[P][B]}var N=A.readBit(I,D);E[O]=N}}return x}function p(e,t,r,i,n,s,l,h,u,d,f,g,p,b,y,v,w,k,S){if(e&&t)throw new o("refinement with Huffman is not supported");var C,x,A=[];for(C=0;C<i;C++){x=new Uint8Array(r);if(n)for(var I=0;I<r;I++)x[I]=n;A.push(x)}var F=w.decoder,T=w.contextCache,E=e?-b.tableDeltaT.decode(S):-a(T,"IADT",F),O=0;C=0;for(;C<s;){E+=e?b.tableDeltaT.decode(S):a(T,"IADT",F);for(var P=O+=e?b.tableFirstS.decode(S):a(T,"IAFS",F);;){let i=0;l>1&&(i=e?S.readBits(k):a(T,"IAIT",F));var B=l*E+i,D=e?b.symbolIDTable.decode(S):c(T,F,u),N=t&&(e?S.readBit():a(T,"IARI",F)),M=h[D],L=M[0].length,R=M.length;if(N){var U=a(T,"IARDW",F),q=a(T,"IARDH",F);M=m(L+=U,R+=q,y,M,(U>>1)+a(T,"IARDX",F),(q>>1)+a(T,"IARDY",F),!1,v,w)}var j,_,z,H=B-(1&g?0:R-1),G=P-(2&g?L-1:0);if(d){for(j=0;j<R;j++)if(x=A[G+j]){z=M[j];var W=Math.min(r-H,L);switch(p){case 0:for(_=0;_<W;_++)x[H+_]|=z[_];break;case 2:for(_=0;_<W;_++)x[H+_]^=z[_];break;default:throw new o(`operator ${p} is not supported`)}}P+=R-1}else{for(_=0;_<R;_++)if(x=A[H+_]){z=M[_];switch(p){case 0:for(j=0;j<L;j++)x[G+j]|=z[j];break;case 2:for(j=0;j<L;j++)x[G+j]^=z[j];break;default:throw new o(`operator ${p} is not supported`)}}P+=L-1}C++;var X=e?b.tableDeltaS.decode(S):a(T,"IADS",F);if(null===X)break;P+=X+f}}return A}function b(e,t){var a={};a.number=(0,i.readUint32)(e,t);var r=e[t+4],n=63&r;if(!l[n])throw new o("invalid segment type: "+n);a.type=n;a.typeName=l[n];a.deferredNonRetain=!!(128&r);var s=!!(64&r),c=e[t+5],h=c>>5&7,u=[31&c],d=t+6;if(7===c){h=536870911&(0,i.readUint32)(e,d-1);d+=3;var f=h+7>>3;u[0]=e[d++];for(;--f>0;)u.push(e[d++])}else if(5===c||6===c)throw new o("invalid referred-to flags");a.retainBits=u;let g=4;a.number<=256?g=1:a.number<=65536&&(g=2);var m,p,b=[];for(m=0;m<h;m++){let t;t=1===g?e[d]:2===g?(0,i.readUint16)(e,d):(0,i.readUint32)(e,d);b.push(t);d+=g}a.referredTo=b;if(s){a.pageAssociation=(0,i.readUint32)(e,d);d+=4}else a.pageAssociation=e[d++];a.length=(0,i.readUint32)(e,d);d+=4;if(4294967295===a.length){if(38!==n)throw new o("invalid unknown segment length");var y=v(e,d),k=!!(1&e[d+w]),S=new Uint8Array(6);if(!k){S[0]=255;S[1]=172}S[2]=y.height>>>24&255;S[3]=y.height>>16&255;S[4]=y.height>>8&255;S[5]=255&y.height;for(m=d,p=e.length;m<p;m++){for(var C=0;C<6&&S[C]===e[m+C];)C++;if(6===C){a.length=m+6;break}}if(4294967295===a.length)throw new o("segment end was not found")}a.headerEnd=d;return a}function y(e,t,a,r){for(var i=[],n=a;n<r;){var s=b(t,n);n=s.headerEnd;var o={header:s,data:t};if(!e.randomAccess){o.start=n;n+=s.length;o.end=n}i.push(o);if(51===s.type)break}if(e.randomAccess)for(var c=0,l=i.length;c<l;c++){i[c].start=n;n+=i[c].header.length;i[c].end=n}return i}function v(e,t){return{width:(0,i.readUint32)(e,t),height:(0,i.readUint32)(e,t+4),x:(0,i.readUint32)(e,t+8),y:(0,i.readUint32)(e,t+12),combinationOperator:7&e[t+16]}}var w=17;function k(e,t){var a,r,n,s,c=e.header,l=e.data,h=e.start,u=e.end;switch(c.type){case 0:var d={},f=(0,i.readUint16)(l,h);d.huffman=!!(1&f);d.refinement=!!(2&f);d.huffmanDHSelector=f>>2&3;d.huffmanDWSelector=f>>4&3;d.bitmapSizeSelector=f>>6&1;d.aggregationInstancesSelector=f>>7&1;d.bitmapCodingContextUsed=!!(256&f);d.bitmapCodingContextRetained=!!(512&f);d.template=f>>10&3;d.refinementTemplate=f>>12&1;h+=2;if(!d.huffman){s=0===d.template?4:1;r=[];for(n=0;n<s;n++){r.push({x:(0,i.readInt8)(l,h),y:(0,i.readInt8)(l,h+1)});h+=2}d.at=r}if(d.refinement&&!d.refinementTemplate){r=[];for(n=0;n<2;n++){r.push({x:(0,i.readInt8)(l,h),y:(0,i.readInt8)(l,h+1)});h+=2}d.refinementAt=r}d.numberOfExportedSymbols=(0,i.readUint32)(l,h);h+=4;d.numberOfNewSymbols=(0,i.readUint32)(l,h);h+=4;a=[d,c.number,c.referredTo,l,h,u];break;case 6:case 7:var g={};g.info=v(l,h);h+=w;var m=(0,i.readUint16)(l,h);h+=2;g.huffman=!!(1&m);g.refinement=!!(2&m);g.logStripSize=m>>2&3;g.stripSize=1<<g.logStripSize;g.referenceCorner=m>>4&3;g.transposed=!!(64&m);g.combinationOperator=m>>7&3;g.defaultPixelValue=m>>9&1;g.dsOffset=m<<17>>27;g.refinementTemplate=m>>15&1;if(g.huffman){var p=(0,i.readUint16)(l,h);h+=2;g.huffmanFS=3&p;g.huffmanDS=p>>2&3;g.huffmanDT=p>>4&3;g.huffmanRefinementDW=p>>6&3;g.huffmanRefinementDH=p>>8&3;g.huffmanRefinementDX=p>>10&3;g.huffmanRefinementDY=p>>12&3;g.huffmanRefinementSizeSelector=!!(16384&p)}if(g.refinement&&!g.refinementTemplate){r=[];for(n=0;n<2;n++){r.push({x:(0,i.readInt8)(l,h),y:(0,i.readInt8)(l,h+1)});h+=2}g.refinementAt=r}g.numberOfSymbolInstances=(0,i.readUint32)(l,h);h+=4;a=[g,c.referredTo,l,h,u];break;case 16:const e={},t=l[h++];e.mmr=!!(1&t);e.template=t>>1&3;e.patternWidth=l[h++];e.patternHeight=l[h++];e.maxPatternIndex=(0,i.readUint32)(l,h);h+=4;a=[e,c.number,l,h,u];break;case 22:case 23:const C={};C.info=v(l,h);h+=w;const x=l[h++];C.mmr=!!(1&x);C.template=x>>1&3;C.enableSkip=!!(8&x);C.combinationOperator=x>>4&7;C.defaultPixelValue=x>>7&1;C.gridWidth=(0,i.readUint32)(l,h);h+=4;C.gridHeight=(0,i.readUint32)(l,h);h+=4;C.gridOffsetX=4294967295&(0,i.readUint32)(l,h);h+=4;C.gridOffsetY=4294967295&(0,i.readUint32)(l,h);h+=4;C.gridVectorX=(0,i.readUint16)(l,h);h+=2;C.gridVectorY=(0,i.readUint16)(l,h);h+=2;a=[C,c.referredTo,l,h,u];break;case 38:case 39:var b={};b.info=v(l,h);h+=w;var y=l[h++];b.mmr=!!(1&y);b.template=y>>1&3;b.prediction=!!(8&y);if(!b.mmr){s=0===b.template?4:1;r=[];for(n=0;n<s;n++){r.push({x:(0,i.readInt8)(l,h),y:(0,i.readInt8)(l,h+1)});h+=2}b.at=r}a=[b,l,h,u];break;case 48:var k={width:(0,i.readUint32)(l,h),height:(0,i.readUint32)(l,h+4),resolutionX:(0,i.readUint32)(l,h+8),resolutionY:(0,i.readUint32)(l,h+12)};4294967295===k.height&&delete k.height;var S=l[h+16];(0,i.readUint16)(l,h+17);k.lossless=!!(1&S);k.refinement=!!(2&S);k.defaultPixelValue=S>>2&1;k.combinationOperator=S>>3&3;k.requiresBuffer=!!(32&S);k.combinationOperatorOverride=!!(64&S);a=[k];break;case 49:case 50:case 51:break;case 53:a=[c.number,l,h,u];break;case 62:break;default:throw new o(`segment type ${c.typeName}(${c.type})`+" is not implemented")}var C="on"+c.typeName;C in t&&t[C].apply(t,a)}function S(e,t){for(var a=0,r=e.length;a<r;a++)k(e[a],t)}function C(){}C.prototype={onPageInformation:function(e){this.currentPageInfo=e;var t=e.width+7>>3,a=new Uint8ClampedArray(t*e.height);if(e.defaultPixelValue)for(var r=0,i=a.length;r<i;r++)a[r]=255;this.buffer=a},drawBitmap:function(e,t){var a,r,i,n,s=this.currentPageInfo,c=e.width,l=e.height,h=s.width+7>>3,u=s.combinationOperatorOverride?e.combinationOperator:s.combinationOperator,d=this.buffer,f=128>>(7&e.x),g=e.y*h+(e.x>>3);switch(u){case 0:for(a=0;a<l;a++){i=f;n=g;for(r=0;r<c;r++){t[a][r]&&(d[n]|=i);if(!(i>>=1)){i=128;n++}}g+=h}break;case 2:for(a=0;a<l;a++){i=f;n=g;for(r=0;r<c;r++){t[a][r]&&(d[n]^=i);if(!(i>>=1)){i=128;n++}}g+=h}break;default:throw new o(`operator ${u} is not supported`)}},onImmediateGenericRegion:function(e,a,r,i){var n=e.info,s=new t(a,r,i),o=g(e.mmr,n.width,n.height,e.template,e.prediction,null,e.at,s);this.drawBitmap(n,o)},onImmediateLosslessGenericRegion:function(){this.onImmediateGenericRegion.apply(this,arguments)},onSymbolDictionary:function(e,r,n,s,l,h){let u,d;if(e.huffman){u=function(e,t,a){let r,i,n,s,c=0;switch(e.huffmanDHSelector){case 0:case 1:r=T(e.huffmanDHSelector+4);break;case 3:r=O(c,t,a);c++;break;default:throw new o("invalid Huffman DH selector")}switch(e.huffmanDWSelector){case 0:case 1:i=T(e.huffmanDWSelector+2);break;case 3:i=O(c,t,a);c++;break;default:throw new o("invalid Huffman DW selector")}if(e.bitmapSizeSelector){n=O(c,t,a);c++}else n=T(1);s=e.aggregationInstancesSelector?O(c,t,a):T(1);return{tableDeltaHeight:r,tableDeltaWidth:i,tableBitmapSize:n,tableAggregateInstances:s}}(e,n,this.customTables);d=new E(s,l,h)}var f=this.symbols;f||(this.symbols=f={});for(var b=[],y=0,v=n.length;y<v;y++){const e=f[n[y]];e&&(b=b.concat(e))}var w=new t(s,l,h);f[r]=function(e,t,r,n,s,l,h,u,d,f,b,y){if(e&&t)throw new o("symbol refinement with Huffman is not supported");var v=[],w=0,k=(0,i.log2)(r.length+n),S=b.decoder,C=b.contextCache;let x,A;if(e){x=T(1);A=[];k=Math.max(k,1)}for(;v.length<n;){w+=e?l.tableDeltaHeight.decode(y):a(C,"IADH",S);let i=0,n=0;const s=e?A.length:0;for(;;){var I,F=e?l.tableDeltaWidth.decode(y):a(C,"IADW",S);if(null===F)break;i+=F;n+=i;if(t){var E=a(C,"IAAI",S);if(E>1)I=p(e,t,i,w,0,E,1,r.concat(v),k,0,0,1,0,l,d,f,b,0,y);else{var O=c(C,S,k),D=a(C,"IARDX",S),N=a(C,"IARDY",S);I=m(i,w,d,O<r.length?r[O]:v[O-r.length],D,N,!1,f,b)}v.push(I)}else if(e)A.push(i);else{I=g(!1,i,w,h,!1,null,u,b);v.push(I)}}if(e&&!t){const e=l.tableBitmapSize.decode(y);y.byteAlign();let t;if(0===e)t=P(y,n,w);else{const a=y.end,r=y.position+e;y.end=r;t=B(y,n,w,!1);y.end=a;y.position=r}const a=A.length;if(s===a-1)v.push(t);else{let e,r,i,n,o,c=0;for(e=s;e<a;e++){n=A[e];i=c+n;o=[];for(r=0;r<w;r++)o.push(t[r].subarray(c,i));v.push(o);c=i}}}}for(var M=[],L=[],R=!1,U=r.length+n;L.length<U;){for(var q=e?x.decode(y):a(C,"IAEX",S);q--;)L.push(R);R=!R}for(var j=0,_=r.length;j<_;j++)L[j]&&M.push(r[j]);for(var z=0;z<n;j++,z++)L[j]&&M.push(v[z]);return M}(e.huffman,e.refinement,b,e.numberOfNewSymbols,e.numberOfExportedSymbols,u,e.template,e.at,e.refinementTemplate,e.refinementAt,w,d)},onImmediateTextRegion:function(e,a,r,n,s){var c=e.info;let l,h;for(var u=this.symbols,d=[],f=0,g=a.length;f<g;f++){const e=u[a[f]];e&&(d=d.concat(e))}var m=(0,i.log2)(d.length);if(e.huffman){h=new E(r,n,s);l=function(e,t,a,r,i){const n=[];for(let e=0;e<=34;e++){const t=i.readBits(4);n.push(new x([e,t,0,0]))}const s=new I(n,!1);n.length=0;for(let e=0;e<r;){const t=s.decode(i);if(t>=32){let a,r,s;switch(t){case 32:if(0===e)throw new o("no previous value in symbol ID table");r=i.readBits(2)+3;a=n[e-1].prefixLength;break;case 33:r=i.readBits(3)+3;a=0;break;case 34:r=i.readBits(7)+11;a=0;break;default:throw new o("invalid code length in symbol ID table")}for(s=0;s<r;s++){n.push(new x([e,a,0,0]));e++}}else{n.push(new x([e,t,0,0]));e++}}i.byteAlign();const c=new I(n,!1);let l,h,u,d=0;switch(e.huffmanFS){case 0:case 1:l=T(e.huffmanFS+6);break;case 3:l=O(d,t,a);d++;break;default:throw new o("invalid Huffman FS selector")}switch(e.huffmanDS){case 0:case 1:case 2:h=T(e.huffmanDS+8);break;case 3:h=O(d,t,a);d++;break;default:throw new o("invalid Huffman DS selector")}switch(e.huffmanDT){case 0:case 1:case 2:u=T(e.huffmanDT+11);break;case 3:u=O(d,t,a);d++;break;default:throw new o("invalid Huffman DT selector")}if(e.refinement)throw new o("refinement with Huffman is not supported");return{symbolIDTable:c,tableFirstS:l,tableDeltaS:h,tableDeltaT:u}}(e,a,this.customTables,d.length,h)}var b=new t(r,n,s),y=p(e.huffman,e.refinement,c.width,c.height,e.defaultPixelValue,e.numberOfSymbolInstances,e.stripSize,d,m,e.transposed,e.dsOffset,e.referenceCorner,e.combinationOperator,l,e.refinementTemplate,e.refinementAt,b,e.logStripSize,h);this.drawBitmap(c,y)},onImmediateLosslessTextRegion:function(){this.onImmediateTextRegion.apply(this,arguments)},onPatternDictionary(e,a,r,i,n){let s=this.patterns;s||(this.patterns=s={});const o=new t(r,i,n);s[a]=function(e,t,a,r,i,n){const s=[];if(!e){s.push({x:-t,y:0});if(0===i){s.push({x:-3,y:-1});s.push({x:2,y:-2});s.push({x:-2,y:-2})}}const o=g(e,(r+1)*t,a,i,!1,null,s,n),c=[];for(let e=0;e<=r;e++){const r=[],i=t*e,n=i+t;for(let e=0;e<a;e++)r.push(o[e].subarray(i,n));c.push(r)}return c}(e.mmr,e.patternWidth,e.patternHeight,e.maxPatternIndex,e.template,o)},onImmediateHalftoneRegion(e,a,r,n,s){const c=this.patterns[a[0]],l=e.info,h=new t(r,n,s),u=function(e,t,a,r,n,s,c,l,h,u,d,f,m,p,b){if(c)throw new o("skip is not supported");if(0!==l)throw new o("operator "+l+" is not supported in halftone region");const y=[];let v,w,k;for(v=0;v<n;v++){k=new Uint8Array(r);if(s)for(w=0;w<r;w++)k[w]=s;y.push(k)}const S=t.length,C=t[0],x=C[0].length,A=C.length,I=(0,i.log2)(S),F=[];if(!e){F.push({x:a<=1?3:2,y:-1});if(0===a){F.push({x:-3,y:-1});F.push({x:2,y:-2});F.push({x:-2,y:-2})}}const T=[];let O,P,D,N,M,L,R,U,q,j,_;e&&(O=new E(b.data,b.start,b.end));for(v=I-1;v>=0;v--){P=e?B(O,h,u,!0):g(!1,h,u,a,!1,null,F,b);T[v]=P}for(D=0;D<u;D++)for(N=0;N<h;N++){M=0;L=0;for(w=I-1;w>=0;w--){M=T[w][D][N]^M;L|=M<<w}R=t[L];U=d+D*p+N*m>>8;q=f+D*m-N*p>>8;if(U>=0&&U+x<=r&&q>=0&&q+A<=n)for(v=0;v<A;v++){_=y[q+v];j=R[v];for(w=0;w<x;w++)_[U+w]|=j[w]}else{let e,t;for(v=0;v<A;v++){t=q+v;if(!(t<0||t>=n)){_=y[t];j=R[v];for(w=0;w<x;w++){e=U+w;e>=0&&e<r&&(_[e]|=j[w])}}}}}return y}(e.mmr,c,e.template,l.width,l.height,e.defaultPixelValue,e.enableSkip,e.combinationOperator,e.gridWidth,e.gridHeight,e.gridOffsetX,e.gridOffsetY,e.gridVectorX,e.gridVectorY,h);this.drawBitmap(l,u)},onImmediateLosslessHalftoneRegion(){this.onImmediateHalftoneRegion.apply(this,arguments)},onTables(e,t,a,r){let n=this.customTables;n||(this.customTables=n={});n[e]=function(e,t,a){const r=e[t],n=4294967295&(0,i.readUint32)(e,t+1),s=4294967295&(0,i.readUint32)(e,t+5),o=new E(e,t+9,a),c=1+(r>>1&7),l=1+(r>>4&7),h=[];let u,d,f=n;do{u=o.readBits(c);d=o.readBits(l);h.push(new x([f,u,d,0]));f+=1<<d}while(f<s);u=o.readBits(c);h.push(new x([n-1,u,32,0,"lower"]));u=o.readBits(c);h.push(new x([s,u,32,0]));if(1&r){u=o.readBits(c);h.push(new x([u,0]))}return new I(h,!1)}(t,a,r)}};function x(e){if(2===e.length){this.isOOB=!0;this.rangeLow=0;this.prefixLength=e[0];this.rangeLength=0;this.prefixCode=e[1];this.isLowerRange=!1}else{this.isOOB=!1;this.rangeLow=e[0];this.prefixLength=e[1];this.rangeLength=e[2];this.prefixCode=e[3];this.isLowerRange="lower"===e[4]}}function A(e){this.children=[];if(e){this.isLeaf=!0;this.rangeLength=e.rangeLength;this.rangeLow=e.rangeLow;this.isLowerRange=e.isLowerRange;this.isOOB=e.isOOB}else this.isLeaf=!1}A.prototype={buildTree(e,t){const a=e.prefixCode>>t&1;if(t<=0)this.children[a]=new A(e);else{let r=this.children[a];r||(this.children[a]=r=new A(null));r.buildTree(e,t-1)}},decodeNode(e){if(this.isLeaf){if(this.isOOB)return null;const t=e.readBits(this.rangeLength);return this.rangeLow+(this.isLowerRange?-t:t)}const t=this.children[e.readBit()];if(!t)throw new o("invalid Huffman data");return t.decodeNode(e)}};function I(e,t){t||this.assignPrefixCodes(e);this.rootNode=new A(null);for(let t=0,a=e.length;t<a;t++){const a=e[t];a.prefixLength>0&&this.rootNode.buildTree(a,a.prefixLength-1)}}I.prototype={decode(e){return this.rootNode.decodeNode(e)},assignPrefixCodes(e){const t=e.length;let a=0;for(let r=0;r<t;r++)a=Math.max(a,e[r].prefixLength);const r=new Uint32Array(a+1);for(let a=0;a<t;a++)r[e[a].prefixLength]++;let i,n,s,o=1,c=0;r[0]=0;for(;o<=a;){c=c+r[o-1]<<1;i=c;n=0;for(;n<t;){s=e[n];if(s.prefixLength===o){s.prefixCode=i;i++}n++}o++}}};const F={};function T(e){let t,a=F[e];if(a)return a;switch(e){case 1:t=[[0,1,4,0],[16,2,8,2],[272,3,16,6],[65808,3,32,7]];break;case 2:t=[[0,1,0,0],[1,2,0,2],[2,3,0,6],[3,4,3,14],[11,5,6,30],[75,6,32,62],[6,63]];break;case 3:t=[[-256,8,8,254],[0,1,0,0],[1,2,0,2],[2,3,0,6],[3,4,3,14],[11,5,6,30],[-257,8,32,255,"lower"],[75,7,32,126],[6,62]];break;case 4:t=[[1,1,0,0],[2,2,0,2],[3,3,0,6],[4,4,3,14],[12,5,6,30],[76,5,32,31]];break;case 5:t=[[-255,7,8,126],[1,1,0,0],[2,2,0,2],[3,3,0,6],[4,4,3,14],[12,5,6,30],[-256,7,32,127,"lower"],[76,6,32,62]];break;case 6:t=[[-2048,5,10,28],[-1024,4,9,8],[-512,4,8,9],[-256,4,7,10],[-128,5,6,29],[-64,5,5,30],[-32,4,5,11],[0,2,7,0],[128,3,7,2],[256,3,8,3],[512,4,9,12],[1024,4,10,13],[-2049,6,32,62,"lower"],[2048,6,32,63]];break;case 7:t=[[-1024,4,9,8],[-512,3,8,0],[-256,4,7,9],[-128,5,6,26],[-64,5,5,27],[-32,4,5,10],[0,4,5,11],[32,5,5,28],[64,5,6,29],[128,4,7,12],[256,3,8,1],[512,3,9,2],[1024,3,10,3],[-1025,5,32,30,"lower"],[2048,5,32,31]];break;case 8:t=[[-15,8,3,252],[-7,9,1,508],[-5,8,1,253],[-3,9,0,509],[-2,7,0,124],[-1,4,0,10],[0,2,1,0],[2,5,0,26],[3,6,0,58],[4,3,4,4],[20,6,1,59],[22,4,4,11],[38,4,5,12],[70,5,6,27],[134,5,7,28],[262,6,7,60],[390,7,8,125],[646,6,10,61],[-16,9,32,510,"lower"],[1670,9,32,511],[2,1]];break;case 9:t=[[-31,8,4,252],[-15,9,2,508],[-11,8,2,253],[-7,9,1,509],[-5,7,1,124],[-3,4,1,10],[-1,3,1,2],[1,3,1,3],[3,5,1,26],[5,6,1,58],[7,3,5,4],[39,6,2,59],[43,4,5,11],[75,4,6,12],[139,5,7,27],[267,5,8,28],[523,6,8,60],[779,7,9,125],[1291,6,11,61],[-32,9,32,510,"lower"],[3339,9,32,511],[2,0]];break;case 10:t=[[-21,7,4,122],[-5,8,0,252],[-4,7,0,123],[-3,5,0,24],[-2,2,2,0],[2,5,0,25],[3,6,0,54],[4,7,0,124],[5,8,0,253],[6,2,6,1],[70,5,5,26],[102,6,5,55],[134,6,6,56],[198,6,7,57],[326,6,8,58],[582,6,9,59],[1094,6,10,60],[2118,7,11,125],[-22,8,32,254,"lower"],[4166,8,32,255],[2,2]];break;case 11:t=[[1,1,0,0],[2,2,1,2],[4,4,0,12],[5,4,1,13],[7,5,1,28],[9,5,2,29],[13,6,2,60],[17,7,2,122],[21,7,3,123],[29,7,4,124],[45,7,5,125],[77,7,6,126],[141,7,32,127]];break;case 12:t=[[1,1,0,0],[2,2,0,2],[3,3,1,6],[5,5,0,28],[6,5,1,29],[8,6,1,60],[10,7,0,122],[11,7,1,123],[13,7,2,124],[17,7,3,125],[25,7,4,126],[41,8,5,254],[73,8,32,255]];break;case 13:t=[[1,1,0,0],[2,3,0,4],[3,4,0,12],[4,5,0,28],[5,4,1,13],[7,3,3,5],[15,6,1,58],[17,6,2,59],[21,6,3,60],[29,6,4,61],[45,6,5,62],[77,7,6,126],[141,7,32,127]];break;case 14:t=[[-2,3,0,4],[-1,3,0,5],[0,1,0,0],[1,3,0,6],[2,3,0,7]];break;case 15:t=[[-24,7,4,124],[-8,6,2,60],[-4,5,1,28],[-2,4,0,12],[-1,3,0,4],[0,1,0,0],[1,3,0,5],[2,4,0,13],[3,5,1,29],[5,6,2,61],[9,7,4,125],[-25,7,32,126,"lower"],[25,7,32,127]];break;default:throw new o(`standard table B.${e} does not exist`)}for(let e=0,a=t.length;e<a;e++)t[e]=new x(t[e]);a=new I(t,!0);F[e]=a;return a}function E(e,t,a){this.data=e;this.start=t;this.end=a;this.position=t;this.shift=-1;this.currentByte=0}E.prototype={readBit(){if(this.shift<0){if(this.position>=this.end)throw new o("end of data while reading bit");this.currentByte=this.data[this.position++];this.shift=7}const e=this.currentByte>>this.shift&1;this.shift--;return e},readBits(e){let t,a=0;for(t=e-1;t>=0;t--)a|=this.readBit()<<t;return a},byteAlign(){this.shift=-1},next(){return this.position>=this.end?-1:this.data[this.position++]}};function O(e,t,a){let r=0;for(let i=0,n=t.length;i<n;i++){const n=a[t[i]];if(n){if(e===r)return n;r++}}throw new o("can't find custom Huffman table")}function P(e,t,a){const r=[];for(let i=0;i<a;i++){const a=new Uint8Array(t);r.push(a);for(let r=0;r<t;r++)a[r]=e.readBit();e.byteAlign()}return r}function B(e,t,a,r){const i={K:-1,Columns:t,Rows:a,BlackIs1:!0,EndOfBlock:r},n=new s.CCITTFaxDecoder(e,i),o=[];let c,l=!1;for(let e=0;e<a;e++){const e=new Uint8Array(t);o.push(e);let a=-1;for(let r=0;r<t;r++){if(a<0){c=n.readNextChar();if(-1===c){c=0;l=!0}a=7}e[r]=c>>a&1;a--}}if(r&&!l){const e=5;for(let t=0;t<e&&-1!==n.readNextChar();t++);}return o}function D(){}D.prototype={parseChunks:e=>function(e){for(var t=new C,a=0,r=e.length;a<r;a++){var i=e[a];S(y({},i.data,i.start,i.end),t)}return t.buffer}(e),parse(e){const{imgData:t,width:a,height:r}=function(e){const t=e.length;let a=0;if(151!==e[a]||74!==e[a+1]||66!==e[a+2]||50!==e[a+3]||13!==e[a+4]||10!==e[a+5]||26!==e[a+6]||10!==e[a+7])throw new o("parseJbig2 - invalid header.");const r=Object.create(null);a+=8;const n=e[a++];r.randomAccess=!(1&n);if(!(2&n)){r.numberOfPages=(0,i.readUint32)(e,a);a+=4}const s=y(r,e,a,t),c=new C;S(s,c);const{width:l,height:h}=c.currentPageInfo,u=c.buffer,d=new Uint8ClampedArray(l*h);let f=0,g=0;for(let e=0;e<h;e++){let e,t=0;for(let a=0;a<l;a++){if(!t){t=128;e=u[g++]}d[f++]=e&t?0:255;t>>=1}}return{imgData:d,width:l,height:h}}(e);this.width=a;this.height=r;return t}};return D}();t.Jbig2Image=c},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.ArithmeticDecoder=void 0;const r=[{qe:22017,nmps:1,nlps:1,switchFlag:1},{qe:13313,nmps:2,nlps:6,switchFlag:0},{qe:6145,nmps:3,nlps:9,switchFlag:0},{qe:2753,nmps:4,nlps:12,switchFlag:0},{qe:1313,nmps:5,nlps:29,switchFlag:0},{qe:545,nmps:38,nlps:33,switchFlag:0},{qe:22017,nmps:7,nlps:6,switchFlag:1},{qe:21505,nmps:8,nlps:14,switchFlag:0},{qe:18433,nmps:9,nlps:14,switchFlag:0},{qe:14337,nmps:10,nlps:14,switchFlag:0},{qe:12289,nmps:11,nlps:17,switchFlag:0},{qe:9217,nmps:12,nlps:18,switchFlag:0},{qe:7169,nmps:13,nlps:20,switchFlag:0},{qe:5633,nmps:29,nlps:21,switchFlag:0},{qe:22017,nmps:15,nlps:14,switchFlag:1},{qe:21505,nmps:16,nlps:14,switchFlag:0},{qe:20737,nmps:17,nlps:15,switchFlag:0},{qe:18433,nmps:18,nlps:16,switchFlag:0},{qe:14337,nmps:19,nlps:17,switchFlag:0},{qe:13313,nmps:20,nlps:18,switchFlag:0},{qe:12289,nmps:21,nlps:19,switchFlag:0},{qe:10241,nmps:22,nlps:19,switchFlag:0},{qe:9217,nmps:23,nlps:20,switchFlag:0},{qe:8705,nmps:24,nlps:21,switchFlag:0},{qe:7169,nmps:25,nlps:22,switchFlag:0},{qe:6145,nmps:26,nlps:23,switchFlag:0},{qe:5633,nmps:27,nlps:24,switchFlag:0},{qe:5121,nmps:28,nlps:25,switchFlag:0},{qe:4609,nmps:29,nlps:26,switchFlag:0},{qe:4353,nmps:30,nlps:27,switchFlag:0},{qe:2753,nmps:31,nlps:28,switchFlag:0},{qe:2497,nmps:32,nlps:29,switchFlag:0},{qe:2209,nmps:33,nlps:30,switchFlag:0},{qe:1313,nmps:34,nlps:31,switchFlag:0},{qe:1089,nmps:35,nlps:32,switchFlag:0},{qe:673,nmps:36,nlps:33,switchFlag:0},{qe:545,nmps:37,nlps:34,switchFlag:0},{qe:321,nmps:38,nlps:35,switchFlag:0},{qe:273,nmps:39,nlps:36,switchFlag:0},{qe:133,nmps:40,nlps:37,switchFlag:0},{qe:73,nmps:41,nlps:38,switchFlag:0},{qe:37,nmps:42,nlps:39,switchFlag:0},{qe:21,nmps:43,nlps:40,switchFlag:0},{qe:9,nmps:44,nlps:41,switchFlag:0},{qe:5,nmps:45,nlps:42,switchFlag:0},{qe:1,nmps:45,nlps:43,switchFlag:0},{qe:22017,nmps:46,nlps:46,switchFlag:0}];t.ArithmeticDecoder=class{constructor(e,t,a){this.data=e;this.bp=t;this.dataEnd=a;this.chigh=e[t];this.clow=0;this.byteIn();this.chigh=this.chigh<<7&65535|this.clow>>9&127;this.clow=this.clow<<7&65535;this.ct-=7;this.a=32768}byteIn(){const e=this.data;let t=this.bp;if(255===e[t])if(e[t+1]>143){this.clow+=65280;this.ct=8}else{t++;this.clow+=e[t]<<9;this.ct=7;this.bp=t}else{t++;this.clow+=t<this.dataEnd?e[t]<<8:65280;this.ct=8;this.bp=t}if(this.clow>65535){this.chigh+=this.clow>>16;this.clow&=65535}}readBit(e,t){let a=e[t]>>1,i=1&e[t];const n=r[a],s=n.qe;let o,c=this.a-s;if(this.chigh<s)if(c<s){c=s;o=i;a=n.nmps}else{c=s;o=1^i;1===n.switchFlag&&(i=o);a=n.nlps}else{this.chigh-=s;if(0!=(32768&c)){this.a=c;return i}if(c<s){o=1^i;1===n.switchFlag&&(i=o);a=n.nlps}else{o=i;a=n.nmps}}do{0===this.ct&&this.byteIn();c<<=1;this.chigh=this.chigh<<1&65535|this.clow>>15&1;this.clow=this.clow<<1&65535;this.ct--}while(0==(32768&c));this.a=c;e[t]=a<<1|i;return o}}},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.JpegStream=void 0;var r=a(2),i=a(11),n=a(4),s=a(18);const o=function(){function e(e,t,a,r){let n;for(;-1!==(n=e.getByte());)if(255===n){e.skip(-1);break}this.stream=e;this.maybeLength=t;this.dict=a;this.params=r;i.DecodeStream.call(this,t)}e.prototype=Object.create(i.DecodeStream.prototype);Object.defineProperty(e.prototype,"bytes",{get:function(){return(0,r.shadow)(this,"bytes",this.stream.getBytes(this.maybeLength))},configurable:!0});e.prototype.ensureBuffer=function(e){};e.prototype.readBlock=function(){if(this.eof)return;const e={decodeTransform:void 0,colorTransform:void 0},t=this.dict.getArray("Decode","D");if(this.forceRGB&&Array.isArray(t)){const a=this.dict.get("BitsPerComponent")||8,r=t.length,i=new Int32Array(r);let n=!1;const s=(1<<a)-1;for(let e=0;e<r;e+=2){i[e]=256*(t[e+1]-t[e])|0;i[e+1]=t[e]*s|0;256===i[e]&&0===i[e+1]||(n=!0)}n&&(e.decodeTransform=i)}if((0,n.isDict)(this.params)){const t=this.params.get("ColorTransform");Number.isInteger(t)&&(e.colorTransform=t)}const a=new s.JpegImage(e);a.parse(this.bytes);const r=a.getData({width:this.drawWidth,height:this.drawHeight,forceRGB:this.forceRGB,isSourcePDF:!0});this.buffer=r;this.bufferLength=r.length;this.eof=!0};Object.defineProperty(e.prototype,"maybeValidDimensions",{get:function(){const{dict:e,stream:t}=this,a=e.get("Height","H"),i=t.pos;let n,s=!0,o=!1;for(;-1!==(n=t.getByte());)if(255===n){switch(t.getByte()){case 192:case 193:case 194:o=!0;t.pos+=2;t.pos+=1;const e=t.getUint16();if(e===a)break;if(0===e){s=!1;break}if(e>10*a){s=!1;break}break;case 195:case 197:case 198:case 199:case 201:case 202:case 203:case 205:case 206:case 207:o=!0;break;case 196:case 204:case 218:case 219:case 220:case 221:case 222:case 223:case 224:case 225:case 226:case 227:case 228:case 229:case 230:case 231:case 232:case 233:case 234:case 235:case 236:case 237:case 238:case 239:case 254:const r=t.getUint16();r>2?t.skip(r-2):t.skip(-2);break;case 255:t.skip(-1);break;case 217:o=!0}if(o)break}t.pos=i;return(0,r.shadow)(this,"maybeValidDimensions",s)},configurable:!0});e.prototype.getIR=function(e=!1){return(0,r.createObjectURL)(this.bytes,"image/jpeg",e)};return e}();t.JpegStream=o},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.JpegImage=void 0;var r=a(2),i=a(7);class n extends r.BaseException{constructor(e){super(`JPEG error: ${e}`)}}class s extends r.BaseException{constructor(e,t){super(e);this.scanLines=t}}class o extends r.BaseException{}var c=function(){var e=new Uint8Array([0,1,8,16,9,2,3,10,17,24,32,25,18,11,4,5,12,19,26,33,40,48,41,34,27,20,13,6,7,14,21,28,35,42,49,56,57,50,43,36,29,22,15,23,30,37,44,51,58,59,52,45,38,31,39,46,53,60,61,54,47,55,62,63]);function t({decodeTransform:e=null,colorTransform:t=-1}={}){this._decodeTransform=e;this._colorTransform=t}function a(e,t){for(var a,r,i=0,n=[],s=16;s>0&&!e[s-1];)s--;n.push({children:[],index:0});var o,c=n[0];for(a=0;a<s;a++){for(r=0;r<e[a];r++){(c=n.pop()).children[c.index]=t[i];for(;c.index>0;)c=n.pop();c.index++;n.push(c);for(;n.length<=a;){n.push(o={children:[],index:0});c.children[c.index]=o.children;c=o}i++}if(a+1<s){n.push(o={children:[],index:0});c.children[c.index]=o.children;c=o}}return n[0].children}function c(e,t,a){return 64*((e.blocksPerLine+1)*t+a)}function l(t,a,l,h,u,f,g,m,p,b=!1){var y=l.mcusPerLine,v=l.progressive,w=a,k=0,S=0;function C(){if(S>0){S--;return k>>S&1}if(255===(k=t[a++])){var e=t[a++];if(e){if(220===e&&b){a+=2;const e=(0,i.readUint16)(t,a);a+=2;if(e>0&&e!==l.scanLines)throw new s("Found DNL marker (0xFFDC) while parsing scan data",e)}else if(217===e){if(b){const e=8*O;if(e>0&&e<l.scanLines/10)throw new s("Found EOI marker (0xFFD9) while parsing scan data, possibly caused by incorrect `scanLines` parameter",e)}throw new o("Found EOI marker (0xFFD9) while parsing scan data")}throw new n(`unexpected marker ${(k<<8|e).toString(16)}`)}}S=7;return k>>>7}function x(e){for(var t=e;;){switch(typeof(t=t[C()])){case"number":return t;case"object":continue}throw new n("invalid huffman sequence")}}function A(e){for(var t=0;e>0;){t=t<<1|C();e--}return t}function I(e){if(1===e)return 1===C()?1:-1;var t=A(e);return t>=1<<e-1?t:t+(-1<<e)+1}var F=0;var T,E=0;let O=0;function P(e,t,a,r,i){var n=a%y;O=(a/y|0)*e.v+r;var s=n*e.h+i;t(e,c(e,O,s))}function B(e,t,a){O=a/e.blocksPerLine|0;var r=a%e.blocksPerLine;t(e,c(e,O,r))}var D,N,M,L,R,U,q=h.length;U=v?0===f?0===m?function(e,t){var a=x(e.huffmanTableDC),r=0===a?0:I(a)<<p;e.blockData[t]=e.pred+=r}:function(e,t){e.blockData[t]|=C()<<p}:0===m?function(t,a){if(F>0)F--;else for(var r=f,i=g;r<=i;){var n=x(t.huffmanTableAC),s=15&n,o=n>>4;if(0!==s){var c=e[r+=o];t.blockData[a+c]=I(s)*(1<<p);r++}else{if(o<15){F=A(o)+(1<<o)-1;break}r+=16}}}:function(t,a){for(var r,i,s=f,o=g,c=0;s<=o;){const o=a+e[s],l=t.blockData[o]<0?-1:1;switch(E){case 0:c=(i=x(t.huffmanTableAC))>>4;if(0===(r=15&i))if(c<15){F=A(c)+(1<<c);E=4}else{c=16;E=1}else{if(1!==r)throw new n("invalid ACn encoding");T=I(r);E=c?2:3}continue;case 1:case 2:t.blockData[o]?t.blockData[o]+=l*(C()<<p):0===--c&&(E=2===E?3:0);break;case 3:if(t.blockData[o])t.blockData[o]+=l*(C()<<p);else{t.blockData[o]=T<<p;E=0}break;case 4:t.blockData[o]&&(t.blockData[o]+=l*(C()<<p))}s++}4===E&&0===--F&&(E=0)}:function(t,a){var r=x(t.huffmanTableDC),i=0===r?0:I(r);t.blockData[a]=t.pred+=i;for(var n=1;n<64;){var s=x(t.huffmanTableAC),o=15&s,c=s>>4;if(0!==o){var l=e[n+=c];t.blockData[a+l]=I(o);n++}else{if(c<15)break;n+=16}}};var j,_,z,H,G=0;_=1===q?h[0].blocksPerLine*h[0].blocksPerColumn:y*l.mcusPerColumn;for(;G<_;){var W=u?Math.min(_-G,u):_;for(N=0;N<q;N++)h[N].pred=0;F=0;if(1===q){D=h[0];for(R=0;R<W;R++){B(D,U,G);G++}}else for(R=0;R<W;R++){for(N=0;N<q;N++){z=(D=h[N]).h;H=D.v;for(M=0;M<H;M++)for(L=0;L<z;L++)P(D,U,G,M,L)}G++}S=0;if(!(j=d(t,a)))break;if(j.invalid){(0,r.warn)("decodeScan - unexpected MCU data, current marker is: "+j.invalid);a=j.offset}var X=j&&j.marker;if(!X||X<=65280)throw new n("decodeScan - a valid marker was not found.");if(!(X>=65488&&X<=65495))break;a+=2}if((j=d(t,a))&&j.invalid){(0,r.warn)("decodeScan - unexpected Scan data, current marker is: "+j.invalid);a=j.offset}return a-w}function h(e,t,a){var r,i,s,o,c,l,h,u,d,f,g,m,p,b,y,v,w,k=e.quantizationTable,S=e.blockData;if(!k)throw new n("missing required Quantization Table.");for(var C=0;C<64;C+=8){d=S[t+C];f=S[t+C+1];g=S[t+C+2];m=S[t+C+3];p=S[t+C+4];b=S[t+C+5];y=S[t+C+6];v=S[t+C+7];d*=k[C];if(0!=(f|g|m|p|b|y|v)){f*=k[C+1];g*=k[C+2];m*=k[C+3];p*=k[C+4];b*=k[C+5];i=(r=(r=5793*d+128>>8)+(i=5793*p+128>>8)+1>>1)-i;w=3784*(s=g)+1567*(o=y*=k[C+6])+128>>8;s=1567*s-3784*o+128>>8;h=(c=(c=2896*(f-(v*=k[C+7]))+128>>8)+(h=b<<4)+1>>1)-h;l=(u=(u=2896*(f+v)+128>>8)+(l=m<<4)+1>>1)-l;o=(r=r+(o=w)+1>>1)-o;s=(i=i+s+1>>1)-s;w=2276*c+3406*u+2048>>12;c=3406*c-2276*u+2048>>12;u=w;w=799*l+4017*h+2048>>12;l=4017*l-799*h+2048>>12;h=w;a[C]=r+u;a[C+7]=r-u;a[C+1]=i+h;a[C+6]=i-h;a[C+2]=s+l;a[C+5]=s-l;a[C+3]=o+c;a[C+4]=o-c}else{w=5793*d+512>>10;a[C]=w;a[C+1]=w;a[C+2]=w;a[C+3]=w;a[C+4]=w;a[C+5]=w;a[C+6]=w;a[C+7]=w}}for(var x=0;x<8;++x){d=a[x];if(0!=((f=a[x+8])|(g=a[x+16])|(m=a[x+24])|(p=a[x+32])|(b=a[x+40])|(y=a[x+48])|(v=a[x+56]))){i=(r=4112+((r=5793*d+2048>>12)+(i=5793*p+2048>>12)+1>>1))-i;w=3784*(s=g)+1567*(o=y)+2048>>12;s=1567*s-3784*o+2048>>12;o=w;h=(c=(c=2896*(f-v)+2048>>12)+(h=b)+1>>1)-h;l=(u=(u=2896*(f+v)+2048>>12)+(l=m)+1>>1)-l;w=2276*c+3406*u+2048>>12;c=3406*c-2276*u+2048>>12;u=w;w=799*l+4017*h+2048>>12;l=4017*l-799*h+2048>>12;(d=(r=r+o+1>>1)+u)<16?d=0:d>=4080?d=255:d>>=4;(f=(i=i+s+1>>1)+(h=w))<16?f=0:f>=4080?f=255:f>>=4;(g=(s=i-s)+l)<16?g=0:g>=4080?g=255:g>>=4;(m=(o=r-o)+c)<16?m=0:m>=4080?m=255:m>>=4;(p=o-c)<16?p=0:p>=4080?p=255:p>>=4;(b=s-l)<16?b=0:b>=4080?b=255:b>>=4;(y=i-h)<16?y=0:y>=4080?y=255:y>>=4;(v=r-u)<16?v=0:v>=4080?v=255:v>>=4;S[t+x]=d;S[t+x+8]=f;S[t+x+16]=g;S[t+x+24]=m;S[t+x+32]=p;S[t+x+40]=b;S[t+x+48]=y;S[t+x+56]=v}else{w=(w=5793*d+8192>>14)<-2040?0:w>=2024?255:w+2056>>4;S[t+x]=w;S[t+x+8]=w;S[t+x+16]=w;S[t+x+24]=w;S[t+x+32]=w;S[t+x+40]=w;S[t+x+48]=w;S[t+x+56]=w}}}function u(e,t){for(var a=t.blocksPerLine,r=t.blocksPerColumn,i=new Int16Array(64),n=0;n<r;n++)for(var s=0;s<a;s++){h(t,c(t,n,s),i)}return t.blockData}function d(e,t,a=t){const r=e.length-1;var n=a<t?a:t;if(t>=r)return null;var s=(0,i.readUint16)(e,t);if(s>=65472&&s<=65534)return{invalid:null,marker:s,offset:t};for(var o=(0,i.readUint16)(e,n);!(o>=65472&&o<=65534);){if(++n>=r)return null;o=(0,i.readUint16)(e,n)}return{invalid:s.toString(16),marker:o,offset:n}}t.prototype={parse(t,{dnlScanLines:c=null}={}){function h(){const e=(0,i.readUint16)(t,p);let a=(p+=2)+e-2;var n=d(t,a,p);if(n&&n.invalid){(0,r.warn)("readDataBlock - incorrect length, current marker is: "+n.invalid);a=n.offset}var s=t.subarray(p,a);p+=s.length;return s}function f(e){for(var t=Math.ceil(e.samplesPerLine/8/e.maxH),a=Math.ceil(e.scanLines/8/e.maxV),r=0;r<e.components.length;r++){z=e.components[r];var i=Math.ceil(Math.ceil(e.samplesPerLine/8)*z.h/e.maxH),n=Math.ceil(Math.ceil(e.scanLines/8)*z.v/e.maxV),s=t*z.h,o=64*(a*z.v)*(s+1);z.blockData=new Int16Array(o);z.blocksPerLine=i;z.blocksPerColumn=n}e.mcusPerLine=t;e.mcusPerColumn=a}var g,m,p=0,b=null,y=null;let v=0;var w=[],k=[],S=[];let C=(0,i.readUint16)(t,p);p+=2;if(65496!==C)throw new n("SOI not found");C=(0,i.readUint16)(t,p);p+=2;e:for(;65497!==C;){var x,A,I;switch(C){case 65504:case 65505:case 65506:case 65507:case 65508:case 65509:case 65510:case 65511:case 65512:case 65513:case 65514:case 65515:case 65516:case 65517:case 65518:case 65519:case 65534:var F=h();65504===C&&74===F[0]&&70===F[1]&&73===F[2]&&70===F[3]&&0===F[4]&&(b={version:{major:F[5],minor:F[6]},densityUnits:F[7],xDensity:F[8]<<8|F[9],yDensity:F[10]<<8|F[11],thumbWidth:F[12],thumbHeight:F[13],thumbData:F.subarray(14,14+3*F[12]*F[13])});65518===C&&65===F[0]&&100===F[1]&&111===F[2]&&98===F[3]&&101===F[4]&&(y={version:F[5]<<8|F[6],flags0:F[7]<<8|F[8],flags1:F[9]<<8|F[10],transformCode:F[11]});break;case 65499:for(var T=(0,i.readUint16)(t,p)+(p+=2)-2;p<T;){var E=t[p++],O=new Uint16Array(64);if(E>>4==0)for(A=0;A<64;A++)O[e[A]]=t[p++];else{if(E>>4!=1)throw new n("DQT - invalid table spec");for(A=0;A<64;A++){O[e[A]]=(0,i.readUint16)(t,p);p+=2}}w[15&E]=O}break;case 65472:case 65473:case 65474:if(g)throw new n("Only single frame JPEGs supported");p+=2;(g={}).extended=65473===C;g.progressive=65474===C;g.precision=t[p++];const u=(0,i.readUint16)(t,p);p+=2;g.scanLines=c||u;g.samplesPerLine=(0,i.readUint16)(t,p);p+=2;g.components=[];g.componentIds={};var P,B=t[p++],D=0,N=0;for(x=0;x<B;x++){P=t[p];var M=t[p+1]>>4,L=15&t[p+1];D<M&&(D=M);N<L&&(N=L);var R=t[p+2];I=g.components.push({h:M,v:L,quantizationId:R,quantizationTable:null});g.componentIds[P]=I-1;p+=3}g.maxH=D;g.maxV=N;f(g);break;case 65476:const J=(0,i.readUint16)(t,p);p+=2;for(x=2;x<J;){var U=t[p++],q=new Uint8Array(16),j=0;for(A=0;A<16;A++,p++)j+=q[A]=t[p];var _=new Uint8Array(j);for(A=0;A<j;A++,p++)_[A]=t[p];x+=17+j;(U>>4==0?S:k)[15&U]=a(q,_)}break;case 65501:p+=2;m=(0,i.readUint16)(t,p);p+=2;break;case 65498:const Z=1==++v&&!c;p+=2;var z,H=t[p++],G=[];for(x=0;x<H;x++){var W=g.componentIds[t[p++]];z=g.components[W];var X=t[p++];z.huffmanTableDC=S[X>>4];z.huffmanTableAC=k[15&X];G.push(z)}var V=t[p++],K=t[p++],Y=t[p++];try{var $=l(t,p,g,G,m,V,K,Y>>4,15&Y,Z);p+=$}catch(e){if(e instanceof s){(0,r.warn)(`${e.message} -- attempting to re-parse the JPEG image.`);return this.parse(t,{dnlScanLines:e.scanLines})}if(e instanceof o){(0,r.warn)(`${e.message} -- ignoring the rest of the image data.`);break e}throw e}break;case 65500:p+=4;break;case 65535:255!==t[p]&&p--;break;default:const Q=d(t,p-2,p-3);if(Q&&Q.invalid){(0,r.warn)("JpegImage.parse - unexpected data, current marker is: "+Q.invalid);p=Q.offset;break}if(p>=t.length-1){(0,r.warn)("JpegImage.parse - reached the end of the image data without finding an EOI marker (0xFFD9).");break e}throw new n("JpegImage.parse - unknown marker: "+C.toString(16))}C=(0,i.readUint16)(t,p);p+=2}this.width=g.samplesPerLine;this.height=g.scanLines;this.jfif=b;this.adobe=y;this.components=[];for(x=0;x<g.components.length;x++){var J=w[(z=g.components[x]).quantizationId];J&&(z.quantizationTable=J);this.components.push({output:u(0,z),scaleX:z.h/g.maxH,scaleY:z.v/g.maxV,blocksPerLine:z.blocksPerLine,blocksPerColumn:z.blocksPerColumn})}this.numComponents=this.components.length},_getLinearizedBlockData(e,t,a=!1){var r,i,n,s,o,c,l,h,u,d,f,g=this.width/e,m=this.height/t,p=0,b=this.components.length,y=e*t*b,v=new Uint8ClampedArray(y),w=new Uint32Array(e);let k;for(l=0;l<b;l++){i=(r=this.components[l]).scaleX*g;n=r.scaleY*m;p=l;f=r.output;s=r.blocksPerLine+1<<3;if(i!==k){for(o=0;o<e;o++){h=0|o*i;w[o]=(4294967288&h)<<3|7&h}k=i}for(c=0;c<t;c++){d=s*(4294967288&(h=0|c*n))|(7&h)<<3;for(o=0;o<e;o++){v[p]=f[d+w[o]];p+=b}}}let S=this._decodeTransform;a||4!==b||S||(S=new Int32Array([-256,255,-256,255,-256,255,-256,255]));if(S)for(l=0;l<y;)for(h=0,u=0;h<b;h++,l++,u+=2)v[l]=(v[l]*S[u]>>8)+S[u+1];return v},get _isColorConversionNeeded(){return this.adobe?!!this.adobe.transformCode:3===this.numComponents?0!==this._colorTransform:1===this._colorTransform},_convertYccToRgb:function(e){for(var t,a,r,i=0,n=e.length;i<n;i+=3){t=e[i];a=e[i+1];r=e[i+2];e[i]=t-179.456+1.402*r;e[i+1]=t+135.459-.344*a-.714*r;e[i+2]=t-226.816+1.772*a}return e},_convertYcckToRgb:function(e){for(var t,a,r,i,n=0,s=0,o=e.length;s<o;s+=4){t=e[s];a=e[s+1];r=e[s+2];i=e[s+3];e[n++]=a*(-660635669420364e-19*a+.000437130475926232*r-54080610064599e-18*t+.00048449797120281*i-.154362151871126)-122.67195406894+r*(-.000957964378445773*r+.000817076911346625*t-.00477271405408747*i+1.53380253221734)+t*(.000961250184130688*t-.00266257332283933*i+.48357088451265)+i*(-.000336197177618394*i+.484791561490776);e[n++]=107.268039397724+a*(219927104525741e-19*a-.000640992018297945*r+.000659397001245577*t+.000426105652938837*i-.176491792462875)+r*(-.000778269941513683*r+.00130872261408275*t+.000770482631801132*i-.151051492775562)+t*(.00126935368114843*t-.00265090189010898*i+.25802910206845)+i*(-.000318913117588328*i-.213742400323665);e[n++]=a*(-.000570115196973677*a-263409051004589e-19*r+.0020741088115012*t-.00288260236853442*i+.814272968359295)-20.810012546947+r*(-153496057440975e-19*r-.000132689043961446*t+.000560833691242812*i-.195152027534049)+t*(.00174418132927582*t-.00255243321439347*i+.116935020465145)+i*(-.000343531996510555*i+.24165260232407)}return e.subarray(0,n)},_convertYcckToCmyk:function(e){for(var t,a,r,i=0,n=e.length;i<n;i+=4){t=e[i];a=e[i+1];r=e[i+2];e[i]=434.456-t-1.402*r;e[i+1]=119.541-t+.344*a+.714*r;e[i+2]=481.816-t-1.772*a}return e},_convertCmykToRgb:function(e){for(var t,a,r,i,n=0,s=0,o=e.length;s<o;s+=4){t=e[s];a=e[s+1];r=e[s+2];i=e[s+3];e[n++]=255+t*(-6747147073602441e-20*t+.0008379262121013727*a+.0002894718188643294*r+.003264231057537806*i-1.1185611867203937)+a*(26374107616089405e-21*a-8626949158638572e-20*r-.0002748769067499491*i-.02155688794978967)+r*(-3878099212869363e-20*r-.0003267808279485286*i+.0686742238595345)-i*(.0003361971776183937*i+.7430659151342254);e[n++]=255+t*(.00013596372813588848*t+.000924537132573585*a+.00010567359618683593*r+.0004791864687436512*i-.3109689587515875)+a*(-.00023545346108370344*a+.0002702845253534714*r+.0020200308977307156*i-.7488052167015494)+r*(6834815998235662e-20*r+.00015168452363460973*i-.09751927774728933)-i*(.0003189131175883281*i+.7364883807733168);e[n++]=255+t*(13598650411385307e-21*t+.00012423956175490851*a+.0004751985097583589*r-36729317476630422e-22*i-.05562186980264034)+a*(.00016141380598724676*a+.0009692239130725186*r+.0007782692450036253*i-.44015232367526463)+r*(5.068882914068769e-7*r+.0017778369011375071*i-.7591454649749609)-i*(.0003435319965105553*i+.7063770186160144)}return e.subarray(0,n)},getData({width:e,height:t,forceRGB:a=!1,isSourcePDF:r=!1}){if(this.numComponents>4)throw new n("Unsupported color mode");var i=this._getLinearizedBlockData(e,t,r);if(1===this.numComponents&&a){for(var s=i.length,o=new Uint8ClampedArray(3*s),c=0,l=0;l<s;l++){var h=i[l];o[c++]=h;o[c++]=h;o[c++]=h}return o}if(3===this.numComponents&&this._isColorConversionNeeded)return this._convertYccToRgb(i);if(4===this.numComponents){if(this._isColorConversionNeeded)return a?this._convertYcckToRgb(i):this._convertYcckToCmyk(i);if(a)return this._convertCmykToRgb(i)}return i}};return t}();t.JpegImage=c},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.JpxStream=void 0;var r=a(11),i=a(20),n=a(2);const s=function(){function e(e,t,a,i){this.stream=e;this.maybeLength=t;this.dict=a;this.params=i;r.DecodeStream.call(this,t)}e.prototype=Object.create(r.DecodeStream.prototype);Object.defineProperty(e.prototype,"bytes",{get:function(){return(0,n.shadow)(this,"bytes",this.stream.getBytes(this.maybeLength))},configurable:!0});e.prototype.ensureBuffer=function(e){};e.prototype.readBlock=function(){if(this.eof)return;const e=new i.JpxImage;e.parse(this.bytes);const t=e.width,a=e.height,r=e.componentsCount,n=e.tiles.length;if(1===n)this.buffer=e.tiles[0].items;else{const i=new Uint8ClampedArray(t*a*r);for(let a=0;a<n;a++){const n=e.tiles[a],s=n.width,o=n.height,c=n.left,l=n.top,h=n.items;let u=0,d=(t*l+c)*r;const f=t*r,g=s*r;for(let e=0;e<o;e++){const e=h.subarray(u,u+g);i.set(e,d);u+=g;d+=f}}this.buffer=i}this.bufferLength=this.buffer.length;this.eof=!0};return e}();t.JpxStream=s},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.JpxImage=void 0;var r=a(2),i=a(7),n=a(16);class s extends r.BaseException{constructor(e){super(`JPX error: ${e}`)}}var o=function(){var e={LL:0,LH:1,HL:1,HH:2};function t(){this.failOnCorruptedImage=!1}t.prototype={parse:function(e){if(65359!==(0,i.readUint16)(e,0))for(var t=0,a=e.length;t<a;){var n=8,o=(0,i.readUint32)(e,t),c=(0,i.readUint32)(e,t+4);t+=n;if(1===o){o=4294967296*(0,i.readUint32)(e,t)+(0,i.readUint32)(e,t+4);t+=8;n+=8}0===o&&(o=a-t+n);if(o<n)throw new s("Invalid box field size");var l=o-n,h=!0;switch(c){case 1785737832:h=!1;break;case 1668246642:var u=e[t];if(1===u){var d=(0,i.readUint32)(e,t+3);switch(d){case 16:case 17:case 18:break;default:(0,r.warn)("Unknown colorspace "+d)}}else 2===u&&(0,r.info)("ICC profile not supported");break;case 1785737827:this.parseCodestream(e,t,t+l);break;case 1783636e3:218793738!==(0,i.readUint32)(e,t)&&(0,r.warn)("Invalid JP2 signature");break;case 1783634458:case 1718909296:case 1920099697:case 1919251232:case 1768449138:break;default:var f=String.fromCharCode(c>>24&255,c>>16&255,c>>8&255,255&c);(0,r.warn)("Unsupported header type "+c+" ("+f+")")}h&&(t+=l)}else this.parseCodestream(e,0,e.length)},parseImageProperties:function(e){for(var t=e.getByte();t>=0;){if(65361===(t<<8|(t=e.getByte()))){e.skip(4);var a=e.getInt32()>>>0,r=e.getInt32()>>>0,i=e.getInt32()>>>0,n=e.getInt32()>>>0;e.skip(16);var o=e.getUint16();this.width=a-i;this.height=r-n;this.componentsCount=o;this.bitsPerComponent=8;return}}throw new s("No size marker found in JPX stream")},parseCodestream:function(e,t,n){var c={},l=!1;try{for(var h=t;h+1<n;){var u=(0,i.readUint16)(e,h);h+=2;var d,f,g,m,p,b,y=0;switch(u){case 65359:c.mainHeader=!0;break;case 65497:break;case 65361:y=(0,i.readUint16)(e,h);var k={};k.Xsiz=(0,i.readUint32)(e,h+4);k.Ysiz=(0,i.readUint32)(e,h+8);k.XOsiz=(0,i.readUint32)(e,h+12);k.YOsiz=(0,i.readUint32)(e,h+16);k.XTsiz=(0,i.readUint32)(e,h+20);k.YTsiz=(0,i.readUint32)(e,h+24);k.XTOsiz=(0,i.readUint32)(e,h+28);k.YTOsiz=(0,i.readUint32)(e,h+32);var x=(0,i.readUint16)(e,h+36);k.Csiz=x;var A=[];d=h+38;for(var I=0;I<x;I++){var F={precision:1+(127&e[d]),isSigned:!!(128&e[d]),XRsiz:e[d+1],YRsiz:e[d+2]};d+=3;a(F,k);A.push(F)}c.SIZ=k;c.components=A;o(c,A);c.QCC=[];c.COC=[];break;case 65372:y=(0,i.readUint16)(e,h);var T={};d=h+2;switch(31&(f=e[d++])){case 0:m=8;p=!0;break;case 1:m=16;p=!1;break;case 2:m=16;p=!0;break;default:throw new Error("Invalid SQcd value "+f)}T.noQuantization=8===m;T.scalarExpounded=p;T.guardBits=f>>5;g=[];for(;d<y+h;){var E={};if(8===m){E.epsilon=e[d++]>>3;E.mu=0}else{E.epsilon=e[d]>>3;E.mu=(7&e[d])<<8|e[d+1];d+=2}g.push(E)}T.SPqcds=g;if(c.mainHeader)c.QCD=T;else{c.currentTile.QCD=T;c.currentTile.QCC=[]}break;case 65373:y=(0,i.readUint16)(e,h);var O,P={};d=h+2;if(c.SIZ.Csiz<257)O=e[d++];else{O=(0,i.readUint16)(e,d);d+=2}switch(31&(f=e[d++])){case 0:m=8;p=!0;break;case 1:m=16;p=!1;break;case 2:m=16;p=!0;break;default:throw new Error("Invalid SQcd value "+f)}P.noQuantization=8===m;P.scalarExpounded=p;P.guardBits=f>>5;g=[];for(;d<y+h;){E={};if(8===m){E.epsilon=e[d++]>>3;E.mu=0}else{E.epsilon=e[d]>>3;E.mu=(7&e[d])<<8|e[d+1];d+=2}g.push(E)}P.SPqcds=g;c.mainHeader?c.QCC[O]=P:c.currentTile.QCC[O]=P;break;case 65362:y=(0,i.readUint16)(e,h);var B={};d=h+2;var D=e[d++];B.entropyCoderWithCustomPrecincts=!!(1&D);B.sopMarkerUsed=!!(2&D);B.ephMarkerUsed=!!(4&D);B.progressionOrder=e[d++];B.layersCount=(0,i.readUint16)(e,d);d+=2;B.multipleComponentTransform=e[d++];B.decompositionLevelsCount=e[d++];B.xcb=2+(15&e[d++]);B.ycb=2+(15&e[d++]);var N=e[d++];B.selectiveArithmeticCodingBypass=!!(1&N);B.resetContextProbabilities=!!(2&N);B.terminationOnEachCodingPass=!!(4&N);B.verticallyStripe=!!(8&N);B.predictableTermination=!!(16&N);B.segmentationSymbolUsed=!!(32&N);B.reversibleTransformation=e[d++];if(B.entropyCoderWithCustomPrecincts){for(var M=[];d<y+h;){var L=e[d++];M.push({PPx:15&L,PPy:L>>4})}B.precinctsSizes=M}var R=[];B.selectiveArithmeticCodingBypass&&R.push("selectiveArithmeticCodingBypass");B.resetContextProbabilities&&R.push("resetContextProbabilities");B.terminationOnEachCodingPass&&R.push("terminationOnEachCodingPass");B.verticallyStripe&&R.push("verticallyStripe");B.predictableTermination&&R.push("predictableTermination");if(R.length>0){l=!0;throw new Error("Unsupported COD options ("+R.join(", ")+")")}if(c.mainHeader)c.COD=B;else{c.currentTile.COD=B;c.currentTile.COC=[]}break;case 65424:y=(0,i.readUint16)(e,h);(b={}).index=(0,i.readUint16)(e,h+2);b.length=(0,i.readUint32)(e,h+4);b.dataEnd=b.length+h-2;b.partIndex=e[h+8];b.partsCount=e[h+9];c.mainHeader=!1;if(0===b.partIndex){b.COD=c.COD;b.COC=c.COC.slice(0);b.QCD=c.QCD;b.QCC=c.QCC.slice(0)}c.currentTile=b;break;case 65427:if(0===(b=c.currentTile).partIndex){C(c,b.index);v(c)}w(c,e,h,y=b.dataEnd-h);break;case 65365:case 65367:case 65368:case 65380:y=(0,i.readUint16)(e,h);break;case 65363:throw new Error("Codestream code 0xFF53 (COC) is not implemented");default:throw new Error("Unknown codestream code: "+u.toString(16))}h+=y}}catch(e){if(l||this.failOnCorruptedImage)throw new s(e.message);(0,r.warn)("JPX: Trying to recover from: "+e.message)}this.tiles=function(e){for(var t=e.SIZ,a=e.components,r=t.Csiz,i=[],n=0,s=e.tiles.length;n<s;n++){var o,c=e.tiles[n],l=[];for(o=0;o<r;o++)l[o]=S(e,c,o);var h,u,d,f,g,m,p,b=l[0],y=new Uint8ClampedArray(b.items.length*r),v={left:b.left,top:b.top,width:b.width,height:b.height,items:y},w=0;if(c.codingStyleDefaultParameters.multipleComponentTransform){var k=4===r,C=l[0].items,x=l[1].items,A=l[2].items,I=k?l[3].items:null;h=a[0].precision-8;u=.5+(128<<h);var F=c.components[0],T=r-3;f=C.length;if(F.codingStyleParameters.reversibleTransformation)for(d=0;d<f;d++,w+=T){g=C[d]+u;m=x[d];p=A[d];const e=g-(p+m>>2);y[w++]=e+p>>h;y[w++]=e>>h;y[w++]=e+m>>h}else for(d=0;d<f;d++,w+=T){g=C[d]+u;m=x[d];p=A[d];y[w++]=g+1.402*p>>h;y[w++]=g-.34413*m-.71414*p>>h;y[w++]=g+1.772*m>>h}if(k)for(d=0,w=3;d<f;d++,w+=4)y[w]=I[d]+u>>h}else for(o=0;o<r;o++){var E=l[o].items;h=a[o].precision-8;u=.5+(128<<h);for(w=o,d=0,f=E.length;d<f;d++){y[w]=E[d]+u>>h;w+=r}}i.push(v)}return i}(c);this.width=c.SIZ.Xsiz-c.SIZ.XOsiz;this.height=c.SIZ.Ysiz-c.SIZ.YOsiz;this.componentsCount=c.SIZ.Csiz}};function a(e,t){e.x0=Math.ceil(t.XOsiz/e.XRsiz);e.x1=Math.ceil(t.Xsiz/e.XRsiz);e.y0=Math.ceil(t.YOsiz/e.YRsiz);e.y1=Math.ceil(t.Ysiz/e.YRsiz);e.width=e.x1-e.x0;e.height=e.y1-e.y0}function o(e,t){for(var a,r=e.SIZ,i=[],n=Math.ceil((r.Xsiz-r.XTOsiz)/r.XTsiz),s=Math.ceil((r.Ysiz-r.YTOsiz)/r.YTsiz),o=0;o<s;o++)for(var c=0;c<n;c++){(a={}).tx0=Math.max(r.XTOsiz+c*r.XTsiz,r.XOsiz);a.ty0=Math.max(r.YTOsiz+o*r.YTsiz,r.YOsiz);a.tx1=Math.min(r.XTOsiz+(c+1)*r.XTsiz,r.Xsiz);a.ty1=Math.min(r.YTOsiz+(o+1)*r.YTsiz,r.Ysiz);a.width=a.tx1-a.tx0;a.height=a.ty1-a.ty0;a.components=[];i.push(a)}e.tiles=i;for(var l=0,h=r.Csiz;l<h;l++)for(var u=t[l],d=0,f=i.length;d<f;d++){var g={};a=i[d];g.tcx0=Math.ceil(a.tx0/u.XRsiz);g.tcy0=Math.ceil(a.ty0/u.YRsiz);g.tcx1=Math.ceil(a.tx1/u.XRsiz);g.tcy1=Math.ceil(a.ty1/u.YRsiz);g.width=g.tcx1-g.tcx0;g.height=g.tcy1-g.tcy0;a.components[l]=g}}function c(e,t,a){var r=t.codingStyleParameters,i={};if(r.entropyCoderWithCustomPrecincts){i.PPx=r.precinctsSizes[a].PPx;i.PPy=r.precinctsSizes[a].PPy}else{i.PPx=15;i.PPy=15}i.xcb_=a>0?Math.min(r.xcb,i.PPx-1):Math.min(r.xcb,i.PPx);i.ycb_=a>0?Math.min(r.ycb,i.PPy-1):Math.min(r.ycb,i.PPy);return i}function l(e,t,a){var r=1<<a.PPx,i=1<<a.PPy,n=0===t.resLevel,s=1<<a.PPx+(n?0:-1),o=1<<a.PPy+(n?0:-1),c=t.trx1>t.trx0?Math.ceil(t.trx1/r)-Math.floor(t.trx0/r):0,l=t.try1>t.try0?Math.ceil(t.try1/i)-Math.floor(t.try0/i):0,h=c*l;t.precinctParameters={precinctWidth:r,precinctHeight:i,numprecinctswide:c,numprecinctshigh:l,numprecincts:h,precinctWidthInSubband:s,precinctHeightInSubband:o}}function h(e,t,a){var r,i,n,s,o=a.xcb_,c=a.ycb_,l=1<<o,h=1<<c,u=t.tbx0>>o,d=t.tby0>>c,f=t.tbx1+l-1>>o,g=t.tby1+h-1>>c,m=t.resolution.precinctParameters,p=[],b=[];for(i=d;i<g;i++)for(r=u;r<f;r++){(n={cbx:r,cby:i,tbx0:l*r,tby0:h*i,tbx1:l*(r+1),tby1:h*(i+1)}).tbx0_=Math.max(t.tbx0,n.tbx0);n.tby0_=Math.max(t.tby0,n.tby0);n.tbx1_=Math.min(t.tbx1,n.tbx1);n.tby1_=Math.min(t.tby1,n.tby1);s=Math.floor((n.tbx0_-t.tbx0)/m.precinctWidthInSubband)+Math.floor((n.tby0_-t.tby0)/m.precinctHeightInSubband)*m.numprecinctswide;n.precinctNumber=s;n.subbandType=t.type;n.Lblock=3;if(!(n.tbx1_<=n.tbx0_||n.tby1_<=n.tby0_)){p.push(n);var y=b[s];if(void 0!==y){r<y.cbxMin?y.cbxMin=r:r>y.cbxMax&&(y.cbxMax=r);i<y.cbyMin?y.cbxMin=i:i>y.cbyMax&&(y.cbyMax=i)}else b[s]=y={cbxMin:r,cbyMin:i,cbxMax:r,cbyMax:i};n.precinct=y}}t.codeblockParameters={codeblockWidth:o,codeblockHeight:c,numcodeblockwide:f-u+1,numcodeblockhigh:g-d+1};t.codeblocks=p;t.precincts=b}function u(e,t,a){for(var r=[],i=e.subbands,n=0,s=i.length;n<s;n++)for(var o=i[n].codeblocks,c=0,l=o.length;c<l;c++){var h=o[c];h.precinctNumber===t&&r.push(h)}return{layerNumber:a,codeblocks:r}}function d(e){for(var t=e.SIZ,a=e.currentTile.index,r=e.tiles[a],i=r.codingStyleDefaultParameters.layersCount,n=t.Csiz,o=0,c=0;c<n;c++)o=Math.max(o,r.components[c].codingStyleParameters.decompositionLevelsCount);var l=0,h=0,d=0,f=0;this.nextPacket=function(){for(;l<i;l++){for(;h<=o;h++){for(;d<n;d++){var e=r.components[d];if(!(h>e.codingStyleParameters.decompositionLevelsCount)){for(var t=e.resolutions[h],a=t.precinctParameters.numprecincts;f<a;){var c=u(t,f,l);f++;return c}f=0}}d=0}h=0}throw new s("Out of packets")}}function f(e){for(var t=e.SIZ,a=e.currentTile.index,r=e.tiles[a],i=r.codingStyleDefaultParameters.layersCount,n=t.Csiz,o=0,c=0;c<n;c++)o=Math.max(o,r.components[c].codingStyleParameters.decompositionLevelsCount);var l=0,h=0,d=0,f=0;this.nextPacket=function(){for(;l<=o;l++){for(;h<i;h++){for(;d<n;d++){var e=r.components[d];if(!(l>e.codingStyleParameters.decompositionLevelsCount)){for(var t=e.resolutions[l],a=t.precinctParameters.numprecincts;f<a;){var c=u(t,f,h);f++;return c}f=0}}d=0}h=0}throw new s("Out of packets")}}function g(e){var t,a,r,i,n=e.SIZ,o=e.currentTile.index,c=e.tiles[o],l=c.codingStyleDefaultParameters.layersCount,h=n.Csiz,d=0;for(r=0;r<h;r++){var f=c.components[r];d=Math.max(d,f.codingStyleParameters.decompositionLevelsCount)}var g=new Int32Array(d+1);for(a=0;a<=d;++a){var m=0;for(r=0;r<h;++r){var p=c.components[r].resolutions;a<p.length&&(m=Math.max(m,p[a].precinctParameters.numprecincts))}g[a]=m}t=0;a=0;r=0;i=0;this.nextPacket=function(){for(;a<=d;a++){for(;i<g[a];i++){for(;r<h;r++){var e=c.components[r];if(!(a>e.codingStyleParameters.decompositionLevelsCount)){var n=e.resolutions[a],o=n.precinctParameters.numprecincts;if(!(i>=o)){for(;t<l;){var f=u(n,i,t);t++;return f}t=0}}}r=0}i=0}throw new s("Out of packets")}}function m(e){var t=e.SIZ,a=e.currentTile.index,r=e.tiles[a],i=r.codingStyleDefaultParameters.layersCount,n=t.Csiz,o=y(r),c=o,l=0,h=0,d=0,f=0,g=0;this.nextPacket=function(){for(;g<c.maxNumHigh;g++){for(;f<c.maxNumWide;f++){for(;d<n;d++){for(var e=r.components[d],t=e.codingStyleParameters.decompositionLevelsCount;h<=t;h++){var a=e.resolutions[h],m=o.components[d].resolutions[h],p=b(f,g,m,c,a);if(null!==p){for(;l<i;){var y=u(a,p,l);l++;return y}l=0}}h=0}d=0}f=0}throw new s("Out of packets")}}function p(e){var t=e.SIZ,a=e.currentTile.index,r=e.tiles[a],i=r.codingStyleDefaultParameters.layersCount,n=t.Csiz,o=y(r),c=0,l=0,h=0,d=0,f=0;this.nextPacket=function(){for(;h<n;++h){for(var e=r.components[h],t=o.components[h],a=e.codingStyleParameters.decompositionLevelsCount;f<t.maxNumHigh;f++){for(;d<t.maxNumWide;d++){for(;l<=a;l++){var g=e.resolutions[l],m=t.resolutions[l],p=b(d,f,m,t,g);if(null!==p){for(;c<i;){var y=u(g,p,c);c++;return y}c=0}}l=0}d=0}f=0}throw new s("Out of packets")}}function b(e,t,a,r,i){var n=e*r.minWidth,s=t*r.minHeight;if(n%a.width!=0||s%a.height!=0)return null;var o=s/a.width*i.precinctParameters.numprecinctswide;return n/a.height+o}function y(e){for(var t=e.components.length,a=Number.MAX_VALUE,r=Number.MAX_VALUE,i=0,n=0,s=new Array(t),o=0;o<t;o++){for(var c=e.components[o],l=c.codingStyleParameters.decompositionLevelsCount,h=new Array(l+1),u=Number.MAX_VALUE,d=Number.MAX_VALUE,f=0,g=0,m=1,p=l;p>=0;--p){var b=c.resolutions[p],y=m*b.precinctParameters.precinctWidth,v=m*b.precinctParameters.precinctHeight;u=Math.min(u,y);d=Math.min(d,v);f=Math.max(f,b.precinctParameters.numprecinctswide);g=Math.max(g,b.precinctParameters.numprecinctshigh);h[p]={width:y,height:v};m<<=1}a=Math.min(a,u);r=Math.min(r,d);i=Math.max(i,f);n=Math.max(n,g);s[o]={resolutions:h,minWidth:u,minHeight:d,maxNumWide:f,maxNumHigh:g}}return{components:s,minWidth:a,minHeight:r,maxNumWide:i,maxNumHigh:n}}function v(e){for(var t=e.SIZ,a=e.currentTile.index,r=e.tiles[a],i=t.Csiz,n=0;n<i;n++){for(var o=r.components[n],u=o.codingStyleParameters.decompositionLevelsCount,b=[],y=[],v=0;v<=u;v++){var w,k=c(0,o,v),S={},C=1<<u-v;S.trx0=Math.ceil(o.tcx0/C);S.try0=Math.ceil(o.tcy0/C);S.trx1=Math.ceil(o.tcx1/C);S.try1=Math.ceil(o.tcy1/C);S.resLevel=v;l(0,S,k);b.push(S);if(0===v){(w={}).type="LL";w.tbx0=Math.ceil(o.tcx0/C);w.tby0=Math.ceil(o.tcy0/C);w.tbx1=Math.ceil(o.tcx1/C);w.tby1=Math.ceil(o.tcy1/C);w.resolution=S;h(0,w,k);y.push(w);S.subbands=[w]}else{var x=1<<u-v+1,A=[];(w={}).type="HL";w.tbx0=Math.ceil(o.tcx0/x-.5);w.tby0=Math.ceil(o.tcy0/x);w.tbx1=Math.ceil(o.tcx1/x-.5);w.tby1=Math.ceil(o.tcy1/x);w.resolution=S;h(0,w,k);y.push(w);A.push(w);(w={}).type="LH";w.tbx0=Math.ceil(o.tcx0/x);w.tby0=Math.ceil(o.tcy0/x-.5);w.tbx1=Math.ceil(o.tcx1/x);w.tby1=Math.ceil(o.tcy1/x-.5);w.resolution=S;h(0,w,k);y.push(w);A.push(w);(w={}).type="HH";w.tbx0=Math.ceil(o.tcx0/x-.5);w.tby0=Math.ceil(o.tcy0/x-.5);w.tbx1=Math.ceil(o.tcx1/x-.5);w.tby1=Math.ceil(o.tcy1/x-.5);w.resolution=S;h(0,w,k);y.push(w);A.push(w);S.subbands=A}}o.resolutions=b;o.subbands=y}var I=r.codingStyleDefaultParameters.progressionOrder;switch(I){case 0:r.packetsIterator=new d(e);break;case 1:r.packetsIterator=new f(e);break;case 2:r.packetsIterator=new g(e);break;case 3:r.packetsIterator=new m(e);break;case 4:r.packetsIterator=new p(e);break;default:throw new s(`Unsupported progression order ${I}`)}}function w(e,t,a,r){var n,s=0,o=0,c=!1;function l(e){for(;o<e;){var r=t[a+s];s++;if(c){n=n<<7|r;o+=7;c=!1}else{n=n<<8|r;o+=8}255===r&&(c=!0)}return n>>>(o-=e)&(1<<e)-1}function h(e){if(255===t[a+s-1]&&t[a+s]===e){u(1);return!0}if(255===t[a+s]&&t[a+s+1]===e){u(2);return!0}return!1}function u(e){s+=e}function d(){o=0;if(c){s++;c=!1}}function f(){if(0===l(1))return 1;if(0===l(1))return 2;var e=l(2);return e<3?e+3:(e=l(5))<31?e+6:(e=l(7))+37}for(var g=e.currentTile.index,m=e.tiles[g],p=e.COD.sopMarkerUsed,b=e.COD.ephMarkerUsed,y=m.packetsIterator;s<r;){d();p&&h(145)&&u(4);var v=y.nextPacket();if(l(1)){for(var w,k=v.layerNumber,S=[],C=0,I=v.codeblocks.length;C<I;C++){var F=(w=v.codeblocks[C]).precinct,T=w.cbx-F.cbxMin,E=w.cby-F.cbyMin,O=!1,P=!1;if(void 0!==w.included)O=!!l(1);else{var B,D;if(void 0!==(F=w.precinct).inclusionTree)B=F.inclusionTree;else{var N=F.cbxMax-F.cbxMin+1,M=F.cbyMax-F.cbyMin+1;B=new A(N,M,k);D=new x(N,M);F.inclusionTree=B;F.zeroBitPlanesTree=D}if(B.reset(T,E,k))for(;;){if(!l(1)){B.incrementValue(k);break}if(!B.nextLevel()){w.included=!0;O=P=!0;break}}}if(O){if(P){(D=F.zeroBitPlanesTree).reset(T,E);for(;;)if(l(1)){if(!D.nextLevel())break}else D.incrementValue();w.zeroBitPlanes=D.value}for(var L=f();l(1);)w.Lblock++;var R=(0,i.log2)(L),U=l((L<1<<R?R-1:R)+w.Lblock);S.push({codeblock:w,codingpasses:L,dataLength:U})}}d();b&&h(146);for(;S.length>0;){var q=S.shift();void 0===(w=q.codeblock).data&&(w.data=[]);w.data.push({data:t,start:a+s,end:a+s+q.dataLength,codingpasses:q.codingpasses});s+=q.dataLength}}}return s}function k(e,t,a,r,i,s,o,c){for(var l=r.tbx0,h=r.tby0,u=r.tbx1-r.tbx0,d=r.codeblocks,f="H"===r.type.charAt(0)?1:0,g="H"===r.type.charAt(1)?t:0,m=0,p=d.length;m<p;++m){var b=d[m],y=b.tbx1_-b.tbx0_,v=b.tby1_-b.tby0_;if(0!==y&&0!==v&&void 0!==b.data){var w,k;w=new I(y,v,b.subbandType,b.zeroBitPlanes,s);k=2;var S,C,x,A=b.data,F=0,T=0;for(S=0,C=A.length;S<C;S++){F+=(x=A[S]).end-x.start;T+=x.codingpasses}var E=new Uint8Array(F),O=0;for(S=0,C=A.length;S<C;S++){var P=(x=A[S]).data.subarray(x.start,x.end);E.set(P,O);O+=P.length}var B=new n.ArithmeticDecoder(E,0,F);w.setDecoder(B);for(S=0;S<T;S++){switch(k){case 0:w.runSignificancePropagationPass();break;case 1:w.runMagnitudeRefinementPass();break;case 2:w.runCleanupPass();c&&w.checkSegmentationSymbol()}k=(k+1)%3}var D,N,M,L=b.tbx0_-l+(b.tby0_-h)*u,R=w.coefficentsSign,U=w.coefficentsMagnitude,q=w.bitsDecoded,j=o?0:.5;O=0;var _="LL"!==r.type;for(S=0;S<v;S++){var z=2*(L/u|0)*(t-u)+f+g;for(D=0;D<y;D++){if(0!==(N=U[O])){N=(N+j)*i;0!==R[O]&&(N=-N);M=q[O];var H=_?z+(L<<1):L;e[H]=o&&M>=s?N:N*(1<<s-M)}L++;O++}L+=u-y}}}}function S(t,a,r){for(var i=a.components[r],n=i.codingStyleParameters,s=i.quantizationParameters,o=n.decompositionLevelsCount,c=s.SPqcds,l=s.scalarExpounded,h=s.guardBits,u=n.segmentationSymbolUsed,d=t.components[r].precision,f=n.reversibleTransformation,g=f?new E:new T,m=[],p=0,b=0;b<=o;b++){for(var y=i.resolutions[b],v=y.trx1-y.trx0,w=y.try1-y.try0,S=new Float32Array(v*w),C=0,x=y.subbands.length;C<x;C++){var A,I;if(l){A=c[p].mu;I=c[p].epsilon;p++}else{A=c[0].mu;I=c[0].epsilon+(b>0?1-b:0)}var F=y.subbands[C],O=e[F.type];k(S,v,0,F,f?1:2**(d+O-I)*(1+A/2048),h+I-1,f,u)}m.push({width:v,height:w,items:S})}var P=g.calculate(m,i.tcx0,i.tcy0);return{left:i.tcx0,top:i.tcy0,width:P.width,height:P.height,items:P.items}}function C(e,t){for(var a=e.SIZ.Csiz,r=e.tiles[t],i=0;i<a;i++){var n=r.components[i],s=void 0!==e.currentTile.QCC[i]?e.currentTile.QCC[i]:e.currentTile.QCD;n.quantizationParameters=s;var o=void 0!==e.currentTile.COC[i]?e.currentTile.COC[i]:e.currentTile.COD;n.codingStyleParameters=o}r.codingStyleDefaultParameters=e.currentTile.COD}var x=function(){function e(e,t){var a=(0,i.log2)(Math.max(e,t))+1;this.levels=[];for(var r=0;r<a;r++){var n={width:e,height:t,items:[]};this.levels.push(n);e=Math.ceil(e/2);t=Math.ceil(t/2)}}e.prototype={reset:function(e,t){for(var a,r=0,i=0;r<this.levels.length;){var n=e+t*(a=this.levels[r]).width;if(void 0!==a.items[n]){i=a.items[n];break}a.index=n;e>>=1;t>>=1;r++}r--;(a=this.levels[r]).items[a.index]=i;this.currentLevel=r;delete this.value},incrementValue:function(){var e=this.levels[this.currentLevel];e.items[e.index]++},nextLevel:function(){var e=this.currentLevel,t=this.levels[e],a=t.items[t.index];if(--e<0){this.value=a;return!1}this.currentLevel=e;(t=this.levels[e]).items[t.index]=a;return!0}};return e}(),A=function(){function e(e,t,a){var r=(0,i.log2)(Math.max(e,t))+1;this.levels=[];for(var n=0;n<r;n++){for(var s=new Uint8Array(e*t),o=0,c=s.length;o<c;o++)s[o]=a;var l={width:e,height:t,items:s};this.levels.push(l);e=Math.ceil(e/2);t=Math.ceil(t/2)}}e.prototype={reset:function(e,t,a){for(var r=0;r<this.levels.length;){var i=this.levels[r],n=e+t*i.width;i.index=n;var s=i.items[n];if(255===s)break;if(s>a){this.currentLevel=r;this.propagateValues();return!1}e>>=1;t>>=1;r++}this.currentLevel=r-1;return!0},incrementValue:function(e){var t=this.levels[this.currentLevel];t.items[t.index]=e+1;this.propagateValues()},propagateValues:function(){for(var e=this.currentLevel,t=this.levels[e],a=t.items[t.index];--e>=0;)(t=this.levels[e]).items[t.index]=a},nextLevel:function(){var e=this.currentLevel,t=this.levels[e],a=t.items[t.index];t.items[t.index]=255;if(--e<0)return!1;this.currentLevel=e;(t=this.levels[e]).items[t.index]=a;return!0}};return e}(),I=function(){var e=new Uint8Array([0,5,8,0,3,7,8,0,4,7,8,0,0,0,0,0,1,6,8,0,3,7,8,0,4,7,8,0,0,0,0,0,2,6,8,0,3,7,8,0,4,7,8,0,0,0,0,0,2,6,8,0,3,7,8,0,4,7,8,0,0,0,0,0,2,6,8,0,3,7,8,0,4,7,8]),t=new Uint8Array([0,3,4,0,5,7,7,0,8,8,8,0,0,0,0,0,1,3,4,0,6,7,7,0,8,8,8,0,0,0,0,0,2,3,4,0,6,7,7,0,8,8,8,0,0,0,0,0,2,3,4,0,6,7,7,0,8,8,8,0,0,0,0,0,2,3,4,0,6,7,7,0,8,8,8]),a=new Uint8Array([0,1,2,0,1,2,2,0,2,2,2,0,0,0,0,0,3,4,5,0,4,5,5,0,5,5,5,0,0,0,0,0,6,7,7,0,7,7,7,0,7,7,7,0,0,0,0,0,8,8,8,0,8,8,8,0,8,8,8,0,0,0,0,0,8,8,8,0,8,8,8,0,8,8,8]);function r(r,i,n,s,o){this.width=r;this.height=i;let c;c="HH"===n?a:"HL"===n?t:e;this.contextLabelTable=c;var l=r*i;this.neighborsSignificance=new Uint8Array(l);this.coefficentsSign=new Uint8Array(l);let h;h=o>14?new Uint32Array(l):o>6?new Uint16Array(l):new Uint8Array(l);this.coefficentsMagnitude=h;this.processingFlags=new Uint8Array(l);var u=new Uint8Array(l);if(0!==s)for(var d=0;d<l;d++)u[d]=s;this.bitsDecoded=u;this.reset()}r.prototype={setDecoder:function(e){this.decoder=e},reset:function(){this.contexts=new Int8Array(19);this.contexts[0]=8;this.contexts[17]=92;this.contexts[18]=6},setNeighborsSignificance:function(e,t,a){var r,i=this.neighborsSignificance,n=this.width,s=this.height,o=t>0,c=t+1<n;if(e>0){r=a-n;o&&(i[r-1]+=16);c&&(i[r+1]+=16);i[r]+=4}if(e+1<s){r=a+n;o&&(i[r-1]+=16);c&&(i[r+1]+=16);i[r]+=4}o&&(i[a-1]+=1);c&&(i[a+1]+=1);i[a]|=128},runSignificancePropagationPass:function(){for(var e=this.decoder,t=this.width,a=this.height,r=this.coefficentsMagnitude,i=this.coefficentsSign,n=this.neighborsSignificance,s=this.processingFlags,o=this.contexts,c=this.contextLabelTable,l=this.bitsDecoded,h=0;h<a;h+=4)for(var u=0;u<t;u++)for(var d=h*t+u,f=0;f<4;f++,d+=t){var g=h+f;if(g>=a)break;s[d]&=-2;if(!r[d]&&n[d]){var m=c[n[d]];if(e.readBit(o,m)){var p=this.decodeSignBit(g,u,d);i[d]=p;r[d]=1;this.setNeighborsSignificance(g,u,d);s[d]|=2}l[d]++;s[d]|=1}}},decodeSignBit:function(e,t,a){var r,i,n,s,o,c,l=this.width,h=this.height,u=this.coefficentsMagnitude,d=this.coefficentsSign;s=t>0&&0!==u[a-1];if(t+1<l&&0!==u[a+1]){n=d[a+1];r=s?1-n-(i=d[a-1]):1-n-n}else r=s?1-(i=d[a-1])-i:0;var f=3*r;s=e>0&&0!==u[a-l];if(e+1<h&&0!==u[a+l]){n=d[a+l];r=s?1-n-(i=d[a-l])+f:1-n-n+f}else r=s?1-(i=d[a-l])-i+f:f;if(r>=0){o=9+r;c=this.decoder.readBit(this.contexts,o)}else{o=9-r;c=1^this.decoder.readBit(this.contexts,o)}return c},runMagnitudeRefinementPass:function(){for(var e,t=this.decoder,a=this.width,r=this.height,i=this.coefficentsMagnitude,n=this.neighborsSignificance,s=this.contexts,o=this.bitsDecoded,c=this.processingFlags,l=a*r,h=4*a,u=0;u<l;u=e){e=Math.min(l,u+h);for(var d=0;d<a;d++)for(var f=u+d;f<e;f+=a)if(i[f]&&0==(1&c[f])){var g=16;if(0!=(2&c[f])){c[f]^=2;g=0===(127&n[f])?15:14}var m=t.readBit(s,g);i[f]=i[f]<<1|m;o[f]++;c[f]|=1}}},runCleanupPass:function(){for(var e,t=this.decoder,a=this.width,r=this.height,i=this.neighborsSignificance,n=this.coefficentsMagnitude,s=this.coefficentsSign,o=this.contexts,c=this.contextLabelTable,l=this.bitsDecoded,h=this.processingFlags,u=a,d=2*a,f=3*a,g=0;g<r;g=e){e=Math.min(g+4,r);for(var m=g*a,p=g+3<r,b=0;b<a;b++){var y,v=m+b,w=0,k=v,S=g;if(p&&0===h[v]&&0===h[v+u]&&0===h[v+d]&&0===h[v+f]&&0===i[v]&&0===i[v+u]&&0===i[v+d]&&0===i[v+f]){if(!t.readBit(o,18)){l[v]++;l[v+u]++;l[v+d]++;l[v+f]++;continue}if(0!==(w=t.readBit(o,17)<<1|t.readBit(o,17))){S=g+w;k+=w*a}y=this.decodeSignBit(S,b,k);s[k]=y;n[k]=1;this.setNeighborsSignificance(S,b,k);h[k]|=2;k=v;for(var C=g;C<=S;C++,k+=a)l[k]++;w++}for(S=g+w;S<e;S++,k+=a)if(!n[k]&&0==(1&h[k])){var x=c[i[k]];if(1===t.readBit(o,x)){y=this.decodeSignBit(S,b,k);s[k]=y;n[k]=1;this.setNeighborsSignificance(S,b,k);h[k]|=2}l[k]++}}}},checkSegmentationSymbol:function(){var e=this.decoder,t=this.contexts;if(10!==(e.readBit(t,17)<<3|e.readBit(t,17)<<2|e.readBit(t,17)<<1|e.readBit(t,17)))throw new s("Invalid segmentation symbol")}};return r}(),F=function(){function e(){}e.prototype.calculate=function(e,t,a){for(var r=e[0],i=1,n=e.length;i<n;i++)r=this.iterate(r,e[i],t,a);return r};e.prototype.extend=function(e,t,a){var r=t-1,i=t+1,n=t+a-2,s=t+a;e[r--]=e[i++];e[s++]=e[n--];e[r--]=e[i++];e[s++]=e[n--];e[r--]=e[i++];e[s++]=e[n--];e[r]=e[i];e[s]=e[n]};e.prototype.iterate=function(e,t,a,r){var i,n,s,o,c,l,h=e.width,u=e.height,d=e.items,f=t.width,g=t.height,m=t.items;for(s=0,i=0;i<u;i++){o=2*i*f;for(n=0;n<h;n++,s++,o+=2)m[o]=d[s]}d=e.items=null;var p=new Float32Array(f+8);if(1===f){if(0!=(1&a))for(l=0,s=0;l<g;l++,s+=f)m[s]*=.5}else for(l=0,s=0;l<g;l++,s+=f){p.set(m.subarray(s,s+f),4);this.extend(p,4,f);this.filter(p,4,f);m.set(p.subarray(4,4+f),s)}var b=16,y=[];for(i=0;i<b;i++)y.push(new Float32Array(g+8));var v,w=0;e=4+g;if(1===g){if(0!=(1&r))for(c=0;c<f;c++)m[c]*=.5}else for(c=0;c<f;c++){if(0===w){b=Math.min(f-c,b);for(s=c,o=4;o<e;s+=f,o++)for(v=0;v<b;v++)y[v][o]=m[s+v];w=b}var k=y[--w];this.extend(k,4,g);this.filter(k,4,g);if(0===w){s=c-b+1;for(o=4;o<e;s+=f,o++)for(v=0;v<b;v++)m[s+v]=y[v][o]}}return{width:f,height:g,items:m}};return e}(),T=function(){function e(){F.call(this)}e.prototype=Object.create(F.prototype);e.prototype.filter=function(e,t,a){var r,i,n,s,o=a>>1,c=-1.586134342059924,l=-.052980118572961,h=.882911075530934,u=.443506852043971,d=1.230174104914001;r=(t|=0)-3;for(i=o+4;i--;r+=2)e[r]*=.8128930661159609;n=u*e[(r=t-2)-1];for(i=o+3;i--;r+=2){s=u*e[r+1];e[r]=d*e[r]-n-s;if(!i--)break;n=u*e[(r+=2)+1];e[r]=d*e[r]-n-s}n=h*e[(r=t-1)-1];for(i=o+2;i--;r+=2){s=h*e[r+1];e[r]-=n+s;if(!i--)break;n=h*e[(r+=2)+1];e[r]-=n+s}n=l*e[(r=t)-1];for(i=o+1;i--;r+=2){s=l*e[r+1];e[r]-=n+s;if(!i--)break;n=l*e[(r+=2)+1];e[r]-=n+s}if(0!==o){n=c*e[(r=t+1)-1];for(i=o;i--;r+=2){s=c*e[r+1];e[r]-=n+s;if(!i--)break;n=c*e[(r+=2)+1];e[r]-=n+s}}};return e}(),E=function(){function e(){F.call(this)}e.prototype=Object.create(F.prototype);e.prototype.filter=function(e,t,a){var r,i,n=a>>1;for(r=t|=0,i=n+1;i--;r+=2)e[r]-=e[r-1]+e[r+1]+2>>2;for(r=t+1,i=n;i--;r+=2)e[r]+=e[r-1]+e[r+1]>>1};return e}();return t}();t.JpxImage=o},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.calculateSHA512=t.calculateSHA384=t.calculateSHA256=t.calculateMD5=t.PDF20=t.PDF17=t.CipherTransformFactory=t.ARCFourCipher=t.AES256Cipher=t.AES128Cipher=void 0;var r=a(2),i=a(4),n=a(11),s=function(){function e(e){this.a=0;this.b=0;var t,a,r=new Uint8Array(256),i=0,n=e.length;for(t=0;t<256;++t)r[t]=t;for(t=0;t<256;++t){i=i+(a=r[t])+e[t%n]&255;r[t]=r[i];r[i]=a}this.s=r}e.prototype={encryptBlock:function(e){var t,a,r,i=e.length,n=this.a,s=this.b,o=this.s,c=new Uint8Array(i);for(t=0;t<i;++t){r=o[s=s+(a=o[n=n+1&255])&255];o[n]=r;o[s]=a;c[t]=e[t]^o[a+r&255]}this.a=n;this.b=s;return c}};e.prototype.decryptBlock=e.prototype.encryptBlock;return e}();t.ARCFourCipher=s;var o,c,l=(o=new Uint8Array([7,12,17,22,7,12,17,22,7,12,17,22,7,12,17,22,5,9,14,20,5,9,14,20,5,9,14,20,5,9,14,20,4,11,16,23,4,11,16,23,4,11,16,23,4,11,16,23,6,10,15,21,6,10,15,21,6,10,15,21,6,10,15,21]),c=new Int32Array([-680876936,-389564586,606105819,-1044525330,-176418897,1200080426,-1473231341,-45705983,1770035416,-1958414417,-42063,-1990404162,1804603682,-40341101,-1502002290,1236535329,-165796510,-1069501632,643717713,-373897302,-701558691,38016083,-660478335,-405537848,568446438,-1019803690,-187363961,1163531501,-1444681467,-51403784,1735328473,-1926607734,-378558,-2022574463,1839030562,-35309556,-1530992060,1272893353,-155497632,-1094730640,681279174,-358537222,-722521979,76029189,-640364487,-421815835,530742520,-995338651,-198630844,1126891415,-1416354905,-57434055,1700485571,-1894986606,-1051523,-2054922799,1873313359,-30611744,-1560198380,1309151649,-145523070,-1120210379,718787259,-343485551]),function(e,t,a){var r,i,n,s=1732584193,l=-271733879,h=-1732584194,u=271733878,d=a+72&-64,f=new Uint8Array(d);for(r=0;r<a;++r)f[r]=e[t++];f[r++]=128;n=d-8;for(;r<n;)f[r++]=0;f[r++]=a<<3&255;f[r++]=a>>5&255;f[r++]=a>>13&255;f[r++]=a>>21&255;f[r++]=a>>>29&255;f[r++]=0;f[r++]=0;f[r++]=0;var g=new Int32Array(16);for(r=0;r<d;){for(i=0;i<16;++i,r+=4)g[i]=f[r]|f[r+1]<<8|f[r+2]<<16|f[r+3]<<24;var m,p,b=s,y=l,v=h,w=u;for(i=0;i<64;++i){if(i<16){m=y&v|~y&w;p=i}else if(i<32){m=w&y|~w&v;p=5*i+1&15}else if(i<48){m=y^v^w;p=3*i+5&15}else{m=v^(y|~w);p=7*i&15}var k=w,S=b+m+c[i]+g[p]|0,C=o[i];w=v;v=y;y=y+(S<<C|S>>>32-C)|0;b=k}s=s+b|0;l=l+y|0;h=h+v|0;u=u+w|0}return new Uint8Array([255&s,s>>8&255,s>>16&255,s>>>24&255,255&l,l>>8&255,l>>16&255,l>>>24&255,255&h,h>>8&255,h>>16&255,h>>>24&255,255&u,u>>8&255,u>>16&255,u>>>24&255])});t.calculateMD5=l;var h=function(){function e(e,t){this.high=0|e;this.low=0|t}e.prototype={and:function(e){this.high&=e.high;this.low&=e.low},xor:function(e){this.high^=e.high;this.low^=e.low},or:function(e){this.high|=e.high;this.low|=e.low},shiftRight:function(e){if(e>=32){this.low=this.high>>>e-32|0;this.high=0}else{this.low=this.low>>>e|this.high<<32-e;this.high=this.high>>>e|0}},shiftLeft:function(e){if(e>=32){this.high=this.low<<e-32;this.low=0}else{this.high=this.high<<e|this.low>>>32-e;this.low=this.low<<e}},rotateRight:function(e){var t,a;if(32&e){a=this.low;t=this.high}else{t=this.low;a=this.high}e&=31;this.low=t>>>e|a<<32-e;this.high=a>>>e|t<<32-e},not:function(){this.high=~this.high;this.low=~this.low},add:function(e){var t=(this.low>>>0)+(e.low>>>0),a=(this.high>>>0)+(e.high>>>0);t>4294967295&&(a+=1);this.low=0|t;this.high=0|a},copyTo:function(e,t){e[t]=this.high>>>24&255;e[t+1]=this.high>>16&255;e[t+2]=this.high>>8&255;e[t+3]=255&this.high;e[t+4]=this.low>>>24&255;e[t+5]=this.low>>16&255;e[t+6]=this.low>>8&255;e[t+7]=255&this.low},assign:function(e){this.high=e.high;this.low=e.low}};return e}(),u=function(){function e(e,t){return e>>>t|e<<32-t}function t(e,t,a){return e&t^~e&a}function a(e,t,a){return e&t^e&a^t&a}function r(t){return e(t,2)^e(t,13)^e(t,22)}function i(t){return e(t,6)^e(t,11)^e(t,25)}function n(t){return e(t,7)^e(t,18)^t>>>3}var s=[1116352408,1899447441,3049323471,3921009573,961987163,1508970993,2453635748,2870763221,3624381080,310598401,607225278,1426881987,1925078388,2162078206,2614888103,3248222580,3835390401,4022224774,264347078,604807628,770255983,1249150122,1555081692,1996064986,2554220882,2821834349,2952996808,3210313671,3336571891,3584528711,113926993,338241895,666307205,773529912,1294757372,1396182291,1695183700,1986661051,2177026350,2456956037,2730485921,2820302411,3259730800,3345764771,3516065817,3600352804,4094571909,275423344,430227734,506948616,659060556,883997877,958139571,1322822218,1537002063,1747873779,1955562222,2024104815,2227730452,2361852424,2428436474,2756734187,3204031479,3329325298];return function(o,c,l){var h,u,d,f=1779033703,g=3144134277,m=1013904242,p=2773480762,b=1359893119,y=2600822924,v=528734635,w=1541459225,k=64*Math.ceil((l+9)/64),S=new Uint8Array(k);for(h=0;h<l;++h)S[h]=o[c++];S[h++]=128;d=k-8;for(;h<d;)S[h++]=0;S[h++]=0;S[h++]=0;S[h++]=0;S[h++]=l>>>29&255;S[h++]=l>>21&255;S[h++]=l>>13&255;S[h++]=l>>5&255;S[h++]=l<<3&255;var C,x=new Uint32Array(64);for(h=0;h<k;){for(u=0;u<16;++u){x[u]=S[h]<<24|S[h+1]<<16|S[h+2]<<8|S[h+3];h+=4}for(u=16;u<64;++u)x[u]=(e(C=x[u-2],17)^e(C,19)^C>>>10)+x[u-7]+n(x[u-15])+x[u-16]|0;var A,I,F=f,T=g,E=m,O=p,P=b,B=y,D=v,N=w;for(u=0;u<64;++u){A=N+i(P)+t(P,B,D)+s[u]+x[u];I=r(F)+a(F,T,E);N=D;D=B;B=P;P=O+A|0;O=E;E=T;T=F;F=A+I|0}f=f+F|0;g=g+T|0;m=m+E|0;p=p+O|0;b=b+P|0;y=y+B|0;v=v+D|0;w=w+N|0}return new Uint8Array([f>>24&255,f>>16&255,f>>8&255,255&f,g>>24&255,g>>16&255,g>>8&255,255&g,m>>24&255,m>>16&255,m>>8&255,255&m,p>>24&255,p>>16&255,p>>8&255,255&p,b>>24&255,b>>16&255,b>>8&255,255&b,y>>24&255,y>>16&255,y>>8&255,255&y,v>>24&255,v>>16&255,v>>8&255,255&v,w>>24&255,w>>16&255,w>>8&255,255&w])}}();t.calculateSHA256=u;var d=function(){function e(e,t,a,r,i){e.assign(t);e.and(a);i.assign(t);i.not();i.and(r);e.xor(i)}function t(e,t,a,r,i){e.assign(t);e.and(a);i.assign(t);i.and(r);e.xor(i);i.assign(a);i.and(r);e.xor(i)}function a(e,t,a){e.assign(t);e.rotateRight(28);a.assign(t);a.rotateRight(34);e.xor(a);a.assign(t);a.rotateRight(39);e.xor(a)}function r(e,t,a){e.assign(t);e.rotateRight(14);a.assign(t);a.rotateRight(18);e.xor(a);a.assign(t);a.rotateRight(41);e.xor(a)}function i(e,t,a){e.assign(t);e.rotateRight(1);a.assign(t);a.rotateRight(8);e.xor(a);a.assign(t);a.shiftRight(7);e.xor(a)}function n(e,t,a){e.assign(t);e.rotateRight(19);a.assign(t);a.rotateRight(61);e.xor(a);a.assign(t);a.shiftRight(6);e.xor(a)}var s=[new h(1116352408,3609767458),new h(1899447441,602891725),new h(3049323471,3964484399),new h(3921009573,2173295548),new h(961987163,4081628472),new h(1508970993,3053834265),new h(2453635748,2937671579),new h(2870763221,3664609560),new h(3624381080,2734883394),new h(310598401,1164996542),new h(607225278,1323610764),new h(1426881987,3590304994),new h(1925078388,4068182383),new h(2162078206,991336113),new h(2614888103,633803317),new h(3248222580,3479774868),new h(3835390401,2666613458),new h(4022224774,944711139),new h(264347078,2341262773),new h(604807628,2007800933),new h(770255983,1495990901),new h(1249150122,1856431235),new h(1555081692,3175218132),new h(1996064986,2198950837),new h(2554220882,3999719339),new h(2821834349,766784016),new h(2952996808,2566594879),new h(3210313671,3203337956),new h(3336571891,1034457026),new h(3584528711,2466948901),new h(113926993,3758326383),new h(338241895,168717936),new h(666307205,1188179964),new h(773529912,1546045734),new h(1294757372,1522805485),new h(1396182291,2643833823),new h(1695183700,2343527390),new h(1986661051,1014477480),new h(2177026350,1206759142),new h(2456956037,344077627),new h(2730485921,1290863460),new h(2820302411,3158454273),new h(3259730800,3505952657),new h(3345764771,106217008),new h(3516065817,3606008344),new h(3600352804,1432725776),new h(4094571909,1467031594),new h(275423344,851169720),new h(430227734,3100823752),new h(506948616,1363258195),new h(659060556,3750685593),new h(883997877,3785050280),new h(958139571,3318307427),new h(1322822218,3812723403),new h(1537002063,2003034995),new h(1747873779,3602036899),new h(1955562222,1575990012),new h(2024104815,1125592928),new h(2227730452,2716904306),new h(2361852424,442776044),new h(2428436474,593698344),new h(2756734187,3733110249),new h(3204031479,2999351573),new h(3329325298,3815920427),new h(3391569614,3928383900),new h(3515267271,566280711),new h(3940187606,3454069534),new h(4118630271,4000239992),new h(116418474,1914138554),new h(174292421,2731055270),new h(289380356,3203993006),new h(460393269,320620315),new h(685471733,587496836),new h(852142971,1086792851),new h(1017036298,365543100),new h(1126000580,2618297676),new h(1288033470,3409855158),new h(1501505948,4234509866),new h(1607167915,987167468),new h(1816402316,1246189591)];return function(o,c,l,u){var d,f,g,m,p,b,y,v;if(u=!!u){d=new h(3418070365,3238371032);f=new h(1654270250,914150663);g=new h(2438529370,812702999);m=new h(355462360,4144912697);p=new h(1731405415,4290775857);b=new h(2394180231,1750603025);y=new h(3675008525,1694076839);v=new h(1203062813,3204075428)}else{d=new h(1779033703,4089235720);f=new h(3144134277,2227873595);g=new h(1013904242,4271175723);m=new h(2773480762,1595750129);p=new h(1359893119,2917565137);b=new h(2600822924,725511199);y=new h(528734635,4215389547);v=new h(1541459225,327033209)}var w,k,S,C=128*Math.ceil((l+17)/128),x=new Uint8Array(C);for(w=0;w<l;++w)x[w]=o[c++];x[w++]=128;S=C-16;for(;w<S;)x[w++]=0;x[w++]=0;x[w++]=0;x[w++]=0;x[w++]=0;x[w++]=0;x[w++]=0;x[w++]=0;x[w++]=0;x[w++]=0;x[w++]=0;x[w++]=0;x[w++]=l>>>29&255;x[w++]=l>>21&255;x[w++]=l>>13&255;x[w++]=l>>5&255;x[w++]=l<<3&255;var A=new Array(80);for(w=0;w<80;w++)A[w]=new h(0,0);var I,F,T=new h(0,0),E=new h(0,0),O=new h(0,0),P=new h(0,0),B=new h(0,0),D=new h(0,0),N=new h(0,0),M=new h(0,0),L=new h(0,0),R=new h(0,0),U=new h(0,0),q=new h(0,0);for(w=0;w<C;){for(k=0;k<16;++k){A[k].high=x[w]<<24|x[w+1]<<16|x[w+2]<<8|x[w+3];A[k].low=x[w+4]<<24|x[w+5]<<16|x[w+6]<<8|x[w+7];w+=8}for(k=16;k<80;++k){n(I=A[k],A[k-2],q);I.add(A[k-7]);i(U,A[k-15],q);I.add(U);I.add(A[k-16])}T.assign(d);E.assign(f);O.assign(g);P.assign(m);B.assign(p);D.assign(b);N.assign(y);M.assign(v);for(k=0;k<80;++k){L.assign(M);r(U,B,q);L.add(U);e(U,B,D,N,q);L.add(U);L.add(s[k]);L.add(A[k]);a(R,T,q);t(U,T,E,O,q);R.add(U);I=M;M=N;N=D;D=B;P.add(L);B=P;P=O;O=E;E=T;I.assign(L);I.add(R);T=I}d.add(T);f.add(E);g.add(O);m.add(P);p.add(B);b.add(D);y.add(N);v.add(M)}if(u){F=new Uint8Array(48);d.copyTo(F,0);f.copyTo(F,8);g.copyTo(F,16);m.copyTo(F,24);p.copyTo(F,32);b.copyTo(F,40)}else{F=new Uint8Array(64);d.copyTo(F,0);f.copyTo(F,8);g.copyTo(F,16);m.copyTo(F,24);p.copyTo(F,32);b.copyTo(F,40);y.copyTo(F,48);v.copyTo(F,56)}return F}}();t.calculateSHA512=d;var f=function(e,t,a){return d(e,t,a,!0)};t.calculateSHA384=f;var g=function(){function e(){}e.prototype={decryptBlock:function(e){return e}};return e}();class m{constructor(){this.constructor===m&&(0,r.unreachable)("Cannot initialize AESBaseCipher.");this._s=new Uint8Array([99,124,119,123,242,107,111,197,48,1,103,43,254,215,171,118,202,130,201,125,250,89,71,240,173,212,162,175,156,164,114,192,183,253,147,38,54,63,247,204,52,165,229,241,113,216,49,21,4,199,35,195,24,150,5,154,7,18,128,226,235,39,178,117,9,131,44,26,27,110,90,160,82,59,214,179,41,227,47,132,83,209,0,237,32,252,177,91,106,203,190,57,74,76,88,207,208,239,170,251,67,77,51,133,69,249,2,127,80,60,159,168,81,163,64,143,146,157,56,245,188,182,218,33,16,255,243,210,205,12,19,236,95,151,68,23,196,167,126,61,100,93,25,115,96,129,79,220,34,42,144,136,70,238,184,20,222,94,11,219,224,50,58,10,73,6,36,92,194,211,172,98,145,149,228,121,231,200,55,109,141,213,78,169,108,86,244,234,101,122,174,8,186,120,37,46,28,166,180,198,232,221,116,31,75,189,139,138,112,62,181,102,72,3,246,14,97,53,87,185,134,193,29,158,225,248,152,17,105,217,142,148,155,30,135,233,206,85,40,223,140,161,137,13,191,230,66,104,65,153,45,15,176,84,187,22]);this._inv_s=new Uint8Array([82,9,106,213,48,54,165,56,191,64,163,158,129,243,215,251,124,227,57,130,155,47,255,135,52,142,67,68,196,222,233,203,84,123,148,50,166,194,35,61,238,76,149,11,66,250,195,78,8,46,161,102,40,217,36,178,118,91,162,73,109,139,209,37,114,248,246,100,134,104,152,22,212,164,92,204,93,101,182,146,108,112,72,80,253,237,185,218,94,21,70,87,167,141,157,132,144,216,171,0,140,188,211,10,247,228,88,5,184,179,69,6,208,44,30,143,202,63,15,2,193,175,189,3,1,19,138,107,58,145,17,65,79,103,220,234,151,242,207,206,240,180,230,115,150,172,116,34,231,173,53,133,226,249,55,232,28,117,223,110,71,241,26,113,29,41,197,137,111,183,98,14,170,24,190,27,252,86,62,75,198,210,121,32,154,219,192,254,120,205,90,244,31,221,168,51,136,7,199,49,177,18,16,89,39,128,236,95,96,81,127,169,25,181,74,13,45,229,122,159,147,201,156,239,160,224,59,77,174,42,245,176,200,235,187,60,131,83,153,97,23,43,4,126,186,119,214,38,225,105,20,99,85,33,12,125]);this._mix=new Uint32Array([0,235474187,470948374,303765277,941896748,908933415,607530554,708780849,1883793496,2118214995,1817866830,1649639237,1215061108,1181045119,1417561698,1517767529,3767586992,4003061179,4236429990,4069246893,3635733660,3602770327,3299278474,3400528769,2430122216,2664543715,2362090238,2193862645,2835123396,2801107407,3035535058,3135740889,3678124923,3576870512,3341394285,3374361702,3810496343,3977675356,4279080257,4043610186,2876494627,2776292904,3076639029,3110650942,2472011535,2640243204,2403728665,2169303058,1001089995,899835584,666464733,699432150,59727847,226906860,530400753,294930682,1273168787,1172967064,1475418501,1509430414,1942435775,2110667444,1876241833,1641816226,2910219766,2743034109,2976151520,3211623147,2505202138,2606453969,2302690252,2269728455,3711829422,3543599269,3240894392,3475313331,3843699074,3943906441,4178062228,4144047775,1306967366,1139781709,1374988112,1610459739,1975683434,2076935265,1775276924,1742315127,1034867998,866637845,566021896,800440835,92987698,193195065,429456164,395441711,1984812685,2017778566,1784663195,1683407248,1315562145,1080094634,1383856311,1551037884,101039829,135050206,437757123,337553864,1042385657,807962610,573804783,742039012,2531067453,2564033334,2328828971,2227573024,2935566865,2700099354,3001755655,3168937228,3868552805,3902563182,4203181171,4102977912,3736164937,3501741890,3265478751,3433712980,1106041591,1340463100,1576976609,1408749034,2043211483,2009195472,1708848333,1809054150,832877231,1068351396,766945465,599762354,159417987,126454664,361929877,463180190,2709260871,2943682380,3178106961,3009879386,2572697195,2538681184,2236228733,2336434550,3509871135,3745345300,3441850377,3274667266,3910161971,3877198648,4110568485,4211818798,2597806476,2497604743,2261089178,2295101073,2733856160,2902087851,3202437046,2968011453,3936291284,3835036895,4136440770,4169408201,3535486456,3702665459,3467192302,3231722213,2051518780,1951317047,1716890410,1750902305,1113818384,1282050075,1584504582,1350078989,168810852,67556463,371049330,404016761,841739592,1008918595,775550814,540080725,3969562369,3801332234,4035489047,4269907996,3569255213,3669462566,3366754619,3332740144,2631065433,2463879762,2160117071,2395588676,2767645557,2868897406,3102011747,3069049960,202008497,33778362,270040487,504459436,875451293,975658646,675039627,641025152,2084704233,1917518562,1615861247,1851332852,1147550661,1248802510,1484005843,1451044056,933301370,967311729,733156972,632953703,260388950,25965917,328671808,496906059,1206477858,1239443753,1543208500,1441952575,2144161806,1908694277,1675577880,1842759443,3610369226,3644379585,3408119516,3307916247,4011190502,3776767469,4077384432,4245618683,2809771154,2842737049,3144396420,3043140495,2673705150,2438237621,2203032232,2370213795]);this._mixCol=new Uint8Array(256);for(let e=0;e<256;e++)this._mixCol[e]=e<128?e<<1:e<<1^27;this.buffer=new Uint8Array(16);this.bufferPosition=0}_expandKey(e){(0,r.unreachable)("Cannot call `_expandKey` on the base class")}_decrypt(e,t){let a,r,i;const n=new Uint8Array(16);n.set(e);for(let e=0,a=this._keySize;e<16;++e,++a)n[e]^=t[a];for(let e=this._cyclesOfRepetition-1;e>=1;--e){a=n[13];n[13]=n[9];n[9]=n[5];n[5]=n[1];n[1]=a;a=n[14];r=n[10];n[14]=n[6];n[10]=n[2];n[6]=a;n[2]=r;a=n[15];r=n[11];i=n[7];n[15]=n[3];n[11]=a;n[7]=r;n[3]=i;for(let e=0;e<16;++e)n[e]=this._inv_s[n[e]];for(let a=0,r=16*e;a<16;++a,++r)n[a]^=t[r];for(let e=0;e<16;e+=4){const t=this._mix[n[e]],r=this._mix[n[e+1]],i=this._mix[n[e+2]],s=this._mix[n[e+3]];a=t^r>>>8^r<<24^i>>>16^i<<16^s>>>24^s<<8;n[e]=a>>>24&255;n[e+1]=a>>16&255;n[e+2]=a>>8&255;n[e+3]=255&a}}a=n[13];n[13]=n[9];n[9]=n[5];n[5]=n[1];n[1]=a;a=n[14];r=n[10];n[14]=n[6];n[10]=n[2];n[6]=a;n[2]=r;a=n[15];r=n[11];i=n[7];n[15]=n[3];n[11]=a;n[7]=r;n[3]=i;for(let e=0;e<16;++e){n[e]=this._inv_s[n[e]];n[e]^=t[e]}return n}_encrypt(e,t){const a=this._s;let r,i,n;const s=new Uint8Array(16);s.set(e);for(let e=0;e<16;++e)s[e]^=t[e];for(let e=1;e<this._cyclesOfRepetition;e++){for(let e=0;e<16;++e)s[e]=a[s[e]];n=s[1];s[1]=s[5];s[5]=s[9];s[9]=s[13];s[13]=n;n=s[2];i=s[6];s[2]=s[10];s[6]=s[14];s[10]=n;s[14]=i;n=s[3];i=s[7];r=s[11];s[3]=s[15];s[7]=n;s[11]=i;s[15]=r;for(let e=0;e<16;e+=4){const t=s[e+0],a=s[e+1],i=s[e+2],n=s[e+3];r=t^a^i^n;s[e+0]^=r^this._mixCol[t^a];s[e+1]^=r^this._mixCol[a^i];s[e+2]^=r^this._mixCol[i^n];s[e+3]^=r^this._mixCol[n^t]}for(let a=0,r=16*e;a<16;++a,++r)s[a]^=t[r]}for(let e=0;e<16;++e)s[e]=a[s[e]];n=s[1];s[1]=s[5];s[5]=s[9];s[9]=s[13];s[13]=n;n=s[2];i=s[6];s[2]=s[10];s[6]=s[14];s[10]=n;s[14]=i;n=s[3];i=s[7];r=s[11];s[3]=s[15];s[7]=n;s[11]=i;s[15]=r;for(let e=0,a=this._keySize;e<16;++e,++a)s[e]^=t[a];return s}_decryptBlock2(e,t){const a=e.length;let r=this.buffer,i=this.bufferPosition;const n=[];let s=this.iv;for(let t=0;t<a;++t){r[i]=e[t];++i;if(i<16)continue;const a=this._decrypt(r,this._key);for(let e=0;e<16;++e)a[e]^=s[e];s=r;n.push(a);r=new Uint8Array(16);i=0}this.buffer=r;this.bufferLength=i;this.iv=s;if(0===n.length)return new Uint8Array(0);let o=16*n.length;if(t){const e=n[n.length-1];let t=e[15];if(t<=16){for(let a=15,r=16-t;a>=r;--a)if(e[a]!==t){t=0;break}o-=t;n[n.length-1]=e.subarray(0,16-t)}}const c=new Uint8Array(o);for(let e=0,t=0,a=n.length;e<a;++e,t+=16)c.set(n[e],t);return c}decryptBlock(e,t,a=null){const r=e.length,i=this.buffer;let n=this.bufferPosition;if(a)this.iv=a;else{for(let t=0;n<16&&t<r;++t,++n)i[n]=e[t];if(n<16){this.bufferLength=n;return new Uint8Array(0)}this.iv=i;e=e.subarray(16)}this.buffer=new Uint8Array(16);this.bufferLength=0;this.decryptBlock=this._decryptBlock2;return this.decryptBlock(e,t)}encrypt(e,t){const a=e.length;let r=this.buffer,i=this.bufferPosition;const n=[];t||(t=new Uint8Array(16));for(let s=0;s<a;++s){r[i]=e[s];++i;if(i<16)continue;for(let e=0;e<16;++e)r[e]^=t[e];const a=this._encrypt(r,this._key);t=a;n.push(a);r=new Uint8Array(16);i=0}this.buffer=r;this.bufferLength=i;this.iv=t;if(0===n.length)return new Uint8Array(0);const s=16*n.length,o=new Uint8Array(s);for(let e=0,t=0,a=n.length;e<a;++e,t+=16)o.set(n[e],t);return o}}class p extends m{constructor(e){super();this._cyclesOfRepetition=10;this._keySize=160;this._rcon=new Uint8Array([141,1,2,4,8,16,32,64,128,27,54,108,216,171,77,154,47,94,188,99,198,151,53,106,212,179,125,250,239,197,145,57,114,228,211,189,97,194,159,37,74,148,51,102,204,131,29,58,116,232,203,141,1,2,4,8,16,32,64,128,27,54,108,216,171,77,154,47,94,188,99,198,151,53,106,212,179,125,250,239,197,145,57,114,228,211,189,97,194,159,37,74,148,51,102,204,131,29,58,116,232,203,141,1,2,4,8,16,32,64,128,27,54,108,216,171,77,154,47,94,188,99,198,151,53,106,212,179,125,250,239,197,145,57,114,228,211,189,97,194,159,37,74,148,51,102,204,131,29,58,116,232,203,141,1,2,4,8,16,32,64,128,27,54,108,216,171,77,154,47,94,188,99,198,151,53,106,212,179,125,250,239,197,145,57,114,228,211,189,97,194,159,37,74,148,51,102,204,131,29,58,116,232,203,141,1,2,4,8,16,32,64,128,27,54,108,216,171,77,154,47,94,188,99,198,151,53,106,212,179,125,250,239,197,145,57,114,228,211,189,97,194,159,37,74,148,51,102,204,131,29,58,116,232,203,141]);this._key=this._expandKey(e)}_expandKey(e){const t=this._s,a=this._rcon,r=new Uint8Array(176);r.set(e);for(let e=16,i=1;e<176;++i){let n=r[e-3],s=r[e-2],o=r[e-1],c=r[e-4];n=t[n];s=t[s];o=t[o];c=t[c];n^=a[i];for(let t=0;t<4;++t){r[e]=n^=r[e-16];e++;r[e]=s^=r[e-16];e++;r[e]=o^=r[e-16];e++;r[e]=c^=r[e-16];e++}}return r}}t.AES128Cipher=p;class b extends m{constructor(e){super();this._cyclesOfRepetition=14;this._keySize=224;this._key=this._expandKey(e)}_expandKey(e){const t=this._s,a=new Uint8Array(240);a.set(e);let r,i,n,s,o=1;for(let e=32,c=1;e<240;++c){if(e%32==16){r=t[r];i=t[i];n=t[n];s=t[s]}else if(e%32==0){r=a[e-3];i=a[e-2];n=a[e-1];s=a[e-4];r=t[r];i=t[i];n=t[n];s=t[s];r^=o;(o<<=1)>=256&&(o=255&(27^o))}for(let t=0;t<4;++t){a[e]=r^=a[e-32];e++;a[e]=i^=a[e-32];e++;a[e]=n^=a[e-32];e++;a[e]=s^=a[e-32];e++}}return a}}t.AES256Cipher=b;var y=function(){function e(e,t){if(e.length!==t.length)return!1;for(var a=0;a<e.length;a++)if(e[a]!==t[a])return!1;return!0}function t(){}t.prototype={checkOwnerPassword:function(t,a,r,i){var n=new Uint8Array(t.length+56);n.set(t,0);n.set(a,t.length);n.set(r,t.length+a.length);return e(u(n,0,n.length),i)},checkUserPassword:function(t,a,r){var i=new Uint8Array(t.length+8);i.set(t,0);i.set(a,t.length);return e(u(i,0,i.length),r)},getOwnerKey:function(e,t,a,r){var i=new Uint8Array(e.length+56);i.set(e,0);i.set(t,e.length);i.set(a,e.length+t.length);var n=u(i,0,i.length);return new b(n).decryptBlock(r,!1,new Uint8Array(16))},getUserKey:function(e,t,a){var r=new Uint8Array(e.length+8);r.set(e,0);r.set(t,e.length);var i=u(r,0,r.length);return new b(i).decryptBlock(a,!1,new Uint8Array(16))}};return t}();t.PDF17=y;var v=function(){function e(e,t){var a=new Uint8Array(e.length+t.length);a.set(e,0);a.set(t,e.length);return a}function t(t,a,r){for(var i=u(a,0,a.length).subarray(0,32),n=[0],s=0;s<64||n[n.length-1]>s-32;){var o=t.length+i.length+r.length,c=new Uint8Array(64*o),l=e(t,i);l=e(l,r);for(var h=0,g=0;h<64;h++,g+=o)c.set(l,g);n=new p(i.subarray(0,16)).encrypt(c,i.subarray(16,32));for(var m=0,b=0;b<16;b++){m*=1;m%=3;m+=(n[b]>>>0)%3;m%=3}0===m?i=u(n,0,n.length):1===m?i=f(n,0,n.length):2===m&&(i=d(n,0,n.length));s++}return i.subarray(0,32)}function a(){}function r(e,t){if(e.length!==t.length)return!1;for(var a=0;a<e.length;a++)if(e[a]!==t[a])return!1;return!0}a.prototype={hash:function(e,a,r){return t(e,a,r)},checkOwnerPassword:function(e,a,i,n){var s=new Uint8Array(e.length+56);s.set(e,0);s.set(a,e.length);s.set(i,e.length+a.length);return r(t(e,s,i),n)},checkUserPassword:function(e,a,i){var n=new Uint8Array(e.length+8);n.set(e,0);n.set(a,e.length);return r(t(e,n,[]),i)},getOwnerKey:function(e,a,r,i){var n=new Uint8Array(e.length+56);n.set(e,0);n.set(a,e.length);n.set(r,e.length+a.length);var s=t(e,n,r);return new b(s).decryptBlock(i,!1,new Uint8Array(16))},getUserKey:function(e,a,r){var i=new Uint8Array(e.length+8);i.set(e,0);i.set(a,e.length);var n=t(e,i,[]);return new b(n).decryptBlock(r,!1,new Uint8Array(16))}};return a}();t.PDF20=v;var w=function(){function e(e,t){this.StringCipherConstructor=e;this.StreamCipherConstructor=t}e.prototype={createStream:function(e,t){var a=new this.StreamCipherConstructor;return new n.DecryptStream(e,t,(function(e,t){return a.decryptBlock(e,t)}))},decryptString:function(e){var t=new this.StringCipherConstructor,a=(0,r.stringToBytes)(e);a=t.decryptBlock(a,!0);return(0,r.bytesToString)(a)}};return e}(),k=function(){var e=new Uint8Array([40,191,78,94,78,117,138,65,100,0,78,86,255,250,1,8,46,46,0,182,208,104,62,128,47,12,169,254,100,83,105,122]);function t(t,a,r,i,n,o,c,h){var u,d,f=40+r.length+t.length,g=new Uint8Array(f),m=0;if(a){d=Math.min(32,a.length);for(;m<d;++m)g[m]=a[m]}u=0;for(;m<32;)g[m++]=e[u++];for(u=0,d=r.length;u<d;++u)g[m++]=r[u];g[m++]=255&n;g[m++]=n>>8&255;g[m++]=n>>16&255;g[m++]=n>>>24&255;for(u=0,d=t.length;u<d;++u)g[m++]=t[u];if(o>=4&&!h){g[m++]=255;g[m++]=255;g[m++]=255;g[m++]=255}var p=l(g,0,m),b=c>>3;if(o>=3)for(u=0;u<50;++u)p=l(p,0,b);var y,v=p.subarray(0,b);if(o>=3){for(m=0;m<32;++m)g[m]=e[m];for(u=0,d=t.length;u<d;++u)g[m++]=t[u];y=new s(v).encryptBlock(l(g,0,m));d=v.length;var w,k=new Uint8Array(d);for(u=1;u<=19;++u){for(w=0;w<d;++w)k[w]=v[w]^u;y=new s(k).encryptBlock(y)}for(u=0,d=y.length;u<d;++u)if(i[u]!==y[u])return null}else for(u=0,d=(y=new s(v).encryptBlock(e)).length;u<d;++u)if(i[u]!==y[u])return null;return v}var a=i.Name.get("Identity");function n(n,o,c){var h=n.get("Filter");if(!(0,i.isName)(h,"Standard"))throw new r.FormatError("unknown encryption method");this.dict=n;var u=n.get("V");if(!Number.isInteger(u)||1!==u&&2!==u&&4!==u&&5!==u)throw new r.FormatError("unsupported encryption algorithm");this.algorithm=u;var d=n.get("Length");if(!d)if(u<=3)d=40;else{var f=n.get("CF"),g=n.get("StmF");if((0,i.isDict)(f)&&(0,i.isName)(g)){f.suppressEncryption=!0;var m=f.get(g.name);(d=m&&m.get("Length")||128)<40&&(d<<=3)}}if(!Number.isInteger(d)||d<40||d%8!=0)throw new r.FormatError("invalid key length");var p=(0,r.stringToBytes)(n.get("O")).subarray(0,32),b=(0,r.stringToBytes)(n.get("U")).subarray(0,32),w=n.get("P"),k=n.get("R"),S=(4===u||5===u)&&!1!==n.get("EncryptMetadata");this.encryptMetadata=S;var C,x,A=(0,r.stringToBytes)(o);if(c){if(6===k)try{c=(0,r.utf8StringToString)(c)}catch(e){(0,r.warn)("CipherTransformFactory: Unable to convert UTF8 encoded password.")}C=(0,r.stringToBytes)(c)}if(5!==u)x=t(A,C,p,b,w,k,d,S);else{var I=(0,r.stringToBytes)(n.get("O")).subarray(32,40),F=(0,r.stringToBytes)(n.get("O")).subarray(40,48),T=(0,r.stringToBytes)(n.get("U")).subarray(0,48),E=(0,r.stringToBytes)(n.get("U")).subarray(32,40),O=(0,r.stringToBytes)(n.get("U")).subarray(40,48),P=(0,r.stringToBytes)(n.get("OE")),B=(0,r.stringToBytes)(n.get("UE"));(0,r.stringToBytes)(n.get("Perms"));x=function(e,t,a,r,i,n,s,o,c,l,h,u){if(t){var d=Math.min(127,t.length);t=t.subarray(0,d)}else t=[];var f;return(f=6===e?new v:new y).checkUserPassword(t,o,s)?f.getUserKey(t,c,h):t.length&&f.checkOwnerPassword(t,r,n,a)?f.getOwnerKey(t,i,n,l):null}(k,C,p,I,F,T,b,E,O,P,B)}if(!x&&!c)throw new r.PasswordException("No password given",r.PasswordResponses.NEED_PASSWORD);if(!x&&c){x=t(A,function(t,a,r,i){var n,o,c=new Uint8Array(32),h=0;o=Math.min(32,t.length);for(;h<o;++h)c[h]=t[h];n=0;for(;h<32;)c[h++]=e[n++];var u,d=l(c,0,h),f=i>>3;if(r>=3)for(n=0;n<50;++n)d=l(d,0,d.length);if(r>=3){u=a;var g,m=new Uint8Array(f);for(n=19;n>=0;n--){for(g=0;g<f;++g)m[g]=d[g]^n;u=new s(m).encryptBlock(u)}}else u=new s(d.subarray(0,f)).encryptBlock(a);return u}(C,p,k,d),p,b,w,k,d,S)}if(!x)throw new r.PasswordException("Incorrect Password",r.PasswordResponses.INCORRECT_PASSWORD);this.encryptionKey=x;if(u>=4){var D=n.get("CF");(0,i.isDict)(D)&&(D.suppressEncryption=!0);this.cf=D;this.stmf=n.get("StmF")||a;this.strf=n.get("StrF")||a;this.eff=n.get("EFF")||this.stmf}}function o(e,t,a,r){var i,n,s=new Uint8Array(a.length+9);for(i=0,n=a.length;i<n;++i)s[i]=a[i];s[i++]=255&e;s[i++]=e>>8&255;s[i++]=e>>16&255;s[i++]=255&t;s[i++]=t>>8&255;if(r){s[i++]=115;s[i++]=65;s[i++]=108;s[i++]=84}return l(s,0,i).subarray(0,Math.min(a.length+5,16))}function c(e,t,a,n,c){if(!(0,i.isName)(t))throw new r.FormatError("Invalid crypt filter name.");var l,h=e.get(t.name);null!=h&&(l=h.get("CFM"));if(!l||"None"===l.name)return function(){return new g};if("V2"===l.name)return function(){return new s(o(a,n,c,!1))};if("AESV2"===l.name)return function(){return new p(o(a,n,c,!0))};if("AESV3"===l.name)return function(){return new b(c)};throw new r.FormatError("Unknown crypto method")}n.prototype={createCipherTransform:function(e,t){if(4===this.algorithm||5===this.algorithm)return new w(c(this.cf,this.stmf,e,t,this.encryptionKey),c(this.cf,this.strf,e,t,this.encryptionKey));var a=o(e,t,this.encryptionKey,!1),r=function(){return new s(a)};return new w(r,r)}};return n}();t.CipherTransformFactory=k},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.ColorSpace=void 0;var r=a(2),i=a(4);class n{constructor(e,t){this.constructor===n&&(0,r.unreachable)("Cannot initialize ColorSpace.");this.name=e;this.numComps=t}getRgb(e,t){const a=new Uint8ClampedArray(3);this.getRgbItem(e,t,a,0);return a}getRgbItem(e,t,a,i){(0,r.unreachable)("Should not call ColorSpace.getRgbItem")}getRgbBuffer(e,t,a,i,n,s,o){(0,r.unreachable)("Should not call ColorSpace.getRgbBuffer")}getOutputLength(e,t){(0,r.unreachable)("Should not call ColorSpace.getOutputLength")}isPassthrough(e){return!1}isDefaultDecode(e,t){return n.isDefaultDecode(e,this.numComps)}fillRgb(e,t,a,r,i,n,s,o,c){const l=t*a;let h=null;const u=1<<s,d=a!==i||t!==r;if(this.isPassthrough(s))h=o;else if(1===this.numComps&&l>u&&"DeviceGray"!==this.name&&"DeviceRGB"!==this.name){const t=s<=8?new Uint8Array(u):new Uint16Array(u);for(let e=0;e<u;e++)t[e]=e;const a=new Uint8ClampedArray(3*u);this.getRgbBuffer(t,0,u,a,0,s,0);if(d){h=new Uint8Array(3*l);let e=0;for(let t=0;t<l;++t){const r=3*o[t];h[e++]=a[r];h[e++]=a[r+1];h[e++]=a[r+2]}}else{let t=0;for(let r=0;r<l;++r){const i=3*o[r];e[t++]=a[i];e[t++]=a[i+1];e[t++]=a[i+2];t+=c}}}else if(d){h=new Uint8ClampedArray(3*l);this.getRgbBuffer(o,0,l,h,0,s,0)}else this.getRgbBuffer(o,0,r*n,e,0,s,c);if(h)if(d)!function(e,t,a,r,i,n,s){s=1!==s?0:s;const o=a/i,c=r/n;let l,h=0;const u=new Uint16Array(i),d=3*a;for(let e=0;e<i;e++)u[e]=3*Math.floor(e*o);for(let a=0;a<n;a++){const r=Math.floor(a*c)*d;for(let a=0;a<i;a++){l=r+u[a];t[h++]=e[l++];t[h++]=e[l++];t[h++]=e[l++];h+=s}}}(h,e,t,a,r,i,c);else{let t=0,a=0;for(let i=0,s=r*n;i<s;i++){e[t++]=h[a++];e[t++]=h[a++];e[t++]=h[a++];t+=c}}}get usesZeroToOneRange(){return(0,r.shadow)(this,"usesZeroToOneRange",!0)}static parse(e,t,a,r){const i=this.parseToIR(e,t,a,r);return this.fromIR(i)}static fromIR(e){const t=Array.isArray(e)?e[0]:e;let a,i,n;switch(t){case"DeviceGrayCS":return this.singletons.gray;case"DeviceRgbCS":return this.singletons.rgb;case"DeviceCmykCS":return this.singletons.cmyk;case"CalGrayCS":a=e[1];i=e[2];n=e[3];return new d(a,i,n);case"CalRGBCS":a=e[1];i=e[2];n=e[3];const l=e[4];return new f(a,i,n,l);case"PatternCS":let h=e[1];h&&(h=this.fromIR(h));return new o(h);case"IndexedCS":const u=e[1],m=e[2],p=e[3];return new c(this.fromIR(u),m,p);case"AlternateCS":const b=e[1],y=e[2],v=e[3];return new s(b,this.fromIR(y),v);case"LabCS":a=e[1];i=e[2];const w=e[3];return new g(a,i,w);default:throw new r.FormatError(`Unknown colorspace name: ${t}`)}}static parseToIR(e,t,a=null,n){e=t.fetchIfRef(e);if((0,i.isName)(e))switch(e.name){case"DeviceGray":case"G":return"DeviceGrayCS";case"DeviceRGB":case"RGB":return"DeviceRgbCS";case"DeviceCMYK":case"CMYK":return"DeviceCmykCS";case"Pattern":return["PatternCS",null];default:if((0,i.isDict)(a)){const r=a.get("ColorSpace");if((0,i.isDict)(r)){const s=r.get(e.name);if(s){if((0,i.isName)(s))return this.parseToIR(s,t,a,n);e=s;break}}}throw new r.FormatError(`unrecognized colorspace ${e.name}`)}if(Array.isArray(e)){const s=t.fetchIfRef(e[0]).name;let o,c,l,h,u,d;switch(s){case"DeviceGray":case"G":return"DeviceGrayCS";case"DeviceRGB":case"RGB":return"DeviceRgbCS";case"DeviceCMYK":case"CMYK":return"DeviceCmykCS";case"CalGray":c=t.fetchIfRef(e[1]);h=c.getArray("WhitePoint");u=c.getArray("BlackPoint");d=c.get("Gamma");return["CalGrayCS",h,u,d];case"CalRGB":c=t.fetchIfRef(e[1]);h=c.getArray("WhitePoint");u=c.getArray("BlackPoint");d=c.getArray("Gamma");return["CalRGBCS",h,u,d,c.getArray("Matrix")];case"ICCBased":const f=t.fetchIfRef(e[1]).dict;o=f.get("N");l=f.get("Alternate");if(l){const e=this.parseToIR(l,t,a,n);if(this.fromIR(e,n).numComps===o)return e;(0,r.warn)("ICCBased color space: Ignoring incorrect /Alternate entry.")}if(1===o)return"DeviceGrayCS";if(3===o)return"DeviceRgbCS";if(4===o)return"DeviceCmykCS";break;case"Pattern":let g=e[1]||null;g&&(g=this.parseToIR(g,t,a,n));return["PatternCS",g];case"Indexed":case"I":const m=this.parseToIR(e[1],t,a,n),p=t.fetchIfRef(e[2])+1;let b=t.fetchIfRef(e[3]);(0,i.isStream)(b)&&(b=b.getBytes());return["IndexedCS",m,p,b];case"Separation":case"DeviceN":const y=t.fetchIfRef(e[1]);o=Array.isArray(y)?y.length:1;l=this.parseToIR(e[2],t,a,n);return["AlternateCS",o,l,n.create(t.fetchIfRef(e[3]))];case"Lab":c=t.fetchIfRef(e[1]);h=c.getArray("WhitePoint");u=c.getArray("BlackPoint");return["LabCS",h,u,c.getArray("Range")];default:throw new r.FormatError(`unimplemented color space object "${s}"`)}}throw new r.FormatError(`unrecognized color space object: "${e}"`)}static isDefaultDecode(e,t){if(!Array.isArray(e))return!0;if(2*t!==e.length){(0,r.warn)("The decode map is not the correct length");return!0}for(let t=0,a=e.length;t<a;t+=2)if(0!==e[t]||1!==e[t+1])return!1;return!0}static get singletons(){return(0,r.shadow)(this,"singletons",{get gray(){return(0,r.shadow)(this,"gray",new l)},get rgb(){return(0,r.shadow)(this,"rgb",new h)},get cmyk(){return(0,r.shadow)(this,"cmyk",new u)}})}}t.ColorSpace=n;class s extends n{constructor(e,t,a){super("Alternate",e);this.base=t;this.tintFn=a;this.tmpBuf=new Float32Array(t.numComps)}getRgbItem(e,t,a,r){const i=this.tmpBuf;this.tintFn(e,t,i,0);this.base.getRgbItem(i,0,a,r)}getRgbBuffer(e,t,a,r,i,n,s){const o=this.tintFn,c=this.base,l=1/((1<<n)-1),h=c.numComps,u=c.usesZeroToOneRange,d=(c.isPassthrough(8)||!u)&&0===s;let f=d?i:0;const g=d?r:new Uint8ClampedArray(h*a),m=this.numComps,p=new Float32Array(m),b=new Float32Array(h);let y,v;for(y=0;y<a;y++){for(v=0;v<m;v++)p[v]=e[t++]*l;o(p,0,b,0);if(u)for(v=0;v<h;v++)g[f++]=255*b[v];else{c.getRgbItem(b,0,g,f);f+=h}}d||c.getRgbBuffer(g,0,a,r,i,8,s)}getOutputLength(e,t){return this.base.getOutputLength(e*this.base.numComps/this.numComps,t)}}class o extends n{constructor(e){super("Pattern",null);this.base=e}isDefaultDecode(e,t){(0,r.unreachable)("Should not call PatternCS.isDefaultDecode")}}class c extends n{constructor(e,t,a){super("Indexed",1);this.base=e;this.highVal=t;const n=e.numComps*t;if((0,i.isStream)(a)){this.lookup=new Uint8Array(n);const e=a.getBytes(n);this.lookup.set(e)}else if((0,r.isString)(a)){this.lookup=new Uint8Array(n);for(let e=0;e<n;++e)this.lookup[e]=a.charCodeAt(e)}else{if(!(a instanceof Uint8Array))throw new r.FormatError(`Unrecognized lookup table: ${a}`);this.lookup=a}}getRgbItem(e,t,a,r){const i=this.base.numComps,n=e[t]*i;this.base.getRgbBuffer(this.lookup,n,1,a,r,8,0)}getRgbBuffer(e,t,a,r,i,n,s){const o=this.base,c=o.numComps,l=o.getOutputLength(c,s),h=this.lookup;for(let n=0;n<a;++n){const a=e[t++]*c;o.getRgbBuffer(h,a,1,r,i,8,s);i+=l}}getOutputLength(e,t){return this.base.getOutputLength(e*this.base.numComps,t)}isDefaultDecode(e,t){if(!Array.isArray(e))return!0;if(2!==e.length){(0,r.warn)("Decode map length is not correct");return!0}if(!Number.isInteger(t)||t<1){(0,r.warn)("Bits per component is not correct");return!0}return 0===e[0]&&e[1]===(1<<t)-1}}class l extends n{constructor(){super("DeviceGray",1)}getRgbItem(e,t,a,r){const i=255*e[t];a[r]=a[r+1]=a[r+2]=i}getRgbBuffer(e,t,a,r,i,n,s){const o=255/((1<<n)-1);let c=t,l=i;for(let t=0;t<a;++t){const t=o*e[c++];r[l++]=t;r[l++]=t;r[l++]=t;l+=s}}getOutputLength(e,t){return e*(3+t)}}class h extends n{constructor(){super("DeviceRGB",3)}getRgbItem(e,t,a,r){a[r]=255*e[t];a[r+1]=255*e[t+1];a[r+2]=255*e[t+2]}getRgbBuffer(e,t,a,r,i,n,s){if(8===n&&0===s){r.set(e.subarray(t,t+3*a),i);return}const o=255/((1<<n)-1);let c=t,l=i;for(let t=0;t<a;++t){r[l++]=o*e[c++];r[l++]=o*e[c++];r[l++]=o*e[c++];l+=s}}getOutputLength(e,t){return e*(3+t)/3|0}isPassthrough(e){return 8===e}}const u=function(){function e(e,t,a,r,i){const n=e[t]*a,s=e[t+1]*a,o=e[t+2]*a,c=e[t+3]*a;r[i]=255+n*(-4.387332384609988*n+54.48615194189176*s+18.82290502165302*o+212.25662451639585*c-285.2331026137004)+s*(1.7149763477362134*s-5.6096736904047315*o+-17.873870861415444*c-5.497006427196366)+o*(-2.5217340131683033*o-21.248923337353073*c+17.5119270841813)+c*(-21.86122147463605*c-189.48180835922747);r[i+1]=255+n*(8.841041422036149*n+60.118027045597366*s+6.871425592049007*o+31.159100130055922*c-79.2970844816548)+s*(-15.310361306967817*s+17.575251261109482*o+131.35250912493976*c-190.9453302588951)+o*(4.444339102852739*o+9.8632861493405*c-24.86741582555878)+c*(-20.737325471181034*c-187.80453709719578);r[i+2]=255+n*(.8842522430003296*n+8.078677503112928*s+30.89978309703729*o-.23883238689178934*c-14.183576799673286)+s*(10.49593273432072*s+63.02378494754052*o+50.606957656360734*c-112.23884253719248)+o*(.03296041114873217*o+115.60384449646641*c-193.58209356861505)+c*(-22.33816807309886*c-180.12613974708367)}return class extends n{constructor(){super("DeviceCMYK",4)}getRgbItem(t,a,r,i){e(t,a,1,r,i)}getRgbBuffer(t,a,r,i,n,s,o){const c=1/((1<<s)-1);for(let s=0;s<r;s++){e(t,a,c,i,n);a+=4;n+=3+o}}getOutputLength(e,t){return e/4*(3+t)|0}}}(),d=function(){function e(e,t,a,r,i,n){const s=(t[a]*n)**e.G,o=e.YW*s,c=Math.max(295.8*o**.3333333333333333-40.8,0);r[i]=c;r[i+1]=c;r[i+2]=c}return class extends n{constructor(e,t,a){super("CalGray",1);if(!e)throw new r.FormatError("WhitePoint missing - required for color space CalGray");t=t||[0,0,0];a=a||1;this.XW=e[0];this.YW=e[1];this.ZW=e[2];this.XB=t[0];this.YB=t[1];this.ZB=t[2];this.G=a;if(this.XW<0||this.ZW<0||1!==this.YW)throw new r.FormatError(`Invalid WhitePoint components for ${this.name}`+", no fallback available");if(this.XB<0||this.YB<0||this.ZB<0){(0,r.info)(`Invalid BlackPoint for ${this.name}, falling back to default.`);this.XB=this.YB=this.ZB=0}0===this.XB&&0===this.YB&&0===this.ZB||(0,r.warn)(`${this.name}, BlackPoint: XB: ${this.XB}, YB: ${this.YB}, `+`ZB: ${this.ZB}, only default values are supported.`);if(this.G<1){(0,r.info)(`Invalid Gamma: ${this.G} for ${this.name}, `+"falling back to default.");this.G=1}}getRgbItem(t,a,r,i){e(this,t,a,r,i,1)}getRgbBuffer(t,a,r,i,n,s,o){const c=1/((1<<s)-1);for(let s=0;s<r;++s){e(this,t,a,i,n,c);a+=1;n+=3+o}}getOutputLength(e,t){return e*(3+t)}}}(),f=function(){const e=new Float32Array([.8951,.2664,-.1614,-.7502,1.7135,.0367,.0389,-.0685,1.0296]),t=new Float32Array([.9869929,-.1470543,.1599627,.4323053,.5183603,.0492912,-.0085287,.0400428,.9684867]),a=new Float32Array([3.2404542,-1.5371385,-.4985314,-.969266,1.8760108,.041556,.0556434,-.2040259,1.0572252]),i=new Float32Array([1,1,1]),s=new Float32Array(3),o=new Float32Array(3),c=new Float32Array(3);function l(e,t,a){a[0]=e[0]*t[0]+e[1]*t[1]+e[2]*t[2];a[1]=e[3]*t[0]+e[4]*t[1]+e[5]*t[2];a[2]=e[6]*t[0]+e[7]*t[1]+e[8]*t[2]}function h(e){return u(0,1,e<=.0031308?12.92*e:1.055*e**(1/2.4)-.055)}function u(e,t,a){return Math.max(e,Math.min(t,a))}function d(e){return e<0?-d(-e):e>8?((e+16)/116)**3:e*((24/116)**3/8)}function f(r,n,f,g,m,p){const b=u(0,1,n[f]*p),y=u(0,1,n[f+1]*p),v=u(0,1,n[f+2]*p),w=b**r.GR,k=y**r.GG,S=v**r.GB,C=r.MXA*w+r.MXB*k+r.MXC*S,x=r.MYA*w+r.MYB*k+r.MYC*S,A=r.MZA*w+r.MZB*k+r.MZC*S,I=o;I[0]=C;I[1]=x;I[2]=A;const F=c;!function(a,r,i){if(1===a[0]&&1===a[2]){i[0]=r[0];i[1]=r[1];i[2]=r[2];return}const n=i;l(e,r,n);const o=s;!function(e,t,a){a[0]=1*t[0]/e[0];a[1]=1*t[1]/e[1];a[2]=1*t[2]/e[2]}(a,n,o);l(t,o,i)}(r.whitePoint,I,F);const T=o;!function(e,t,a){if(0===e[0]&&0===e[1]&&0===e[2]){a[0]=t[0];a[1]=t[1];a[2]=t[2];return}const r=d(0),i=(1-r)/(1-d(e[0])),n=1-i,s=(1-r)/(1-d(e[1])),o=1-s,c=(1-r)/(1-d(e[2])),l=1-c;a[0]=t[0]*i+n;a[1]=t[1]*s+o;a[2]=t[2]*c+l}(r.blackPoint,F,T);const E=c;!function(a,r,i){const n=i;l(e,r,n);const o=s;!function(e,t,a){a[0]=.95047*t[0]/e[0];a[1]=1*t[1]/e[1];a[2]=1.08883*t[2]/e[2]}(a,n,o);l(t,o,i)}(i,T,E);const O=o;l(a,E,O);g[m]=255*h(O[0]);g[m+1]=255*h(O[1]);g[m+2]=255*h(O[2])}return class extends n{constructor(e,t,a,i){super("CalRGB",3);if(!e)throw new r.FormatError("WhitePoint missing - required for color space CalRGB");t=t||new Float32Array(3);a=a||new Float32Array([1,1,1]);i=i||new Float32Array([1,0,0,0,1,0,0,0,1]);const n=e[0],s=e[1],o=e[2];this.whitePoint=e;const c=t[0],l=t[1],h=t[2];this.blackPoint=t;this.GR=a[0];this.GG=a[1];this.GB=a[2];this.MXA=i[0];this.MYA=i[1];this.MZA=i[2];this.MXB=i[3];this.MYB=i[4];this.MZB=i[5];this.MXC=i[6];this.MYC=i[7];this.MZC=i[8];if(n<0||o<0||1!==s)throw new r.FormatError(`Invalid WhitePoint components for ${this.name}`+", no fallback available");if(c<0||l<0||h<0){(0,r.info)(`Invalid BlackPoint for ${this.name} [${c}, ${l}, ${h}], `+"falling back to default.");this.blackPoint=new Float32Array(3)}if(this.GR<0||this.GG<0||this.GB<0){(0,r.info)(`Invalid Gamma [${this.GR}, ${this.GG}, ${this.GB}] for `+`${this.name}, falling back to default.`);this.GR=this.GG=this.GB=1}}getRgbItem(e,t,a,r){f(this,e,t,a,r,1)}getRgbBuffer(e,t,a,r,i,n,s){const o=1/((1<<n)-1);for(let n=0;n<a;++n){f(this,e,t,r,i,o);t+=3;i+=3+s}}getOutputLength(e,t){return e*(3+t)/3|0}}}(),g=function(){function e(e){let t;t=e>=6/29?e*e*e:108/841*(e-4/29);return t}function t(e,t,a,r){return a+e*(r-a)/t}function a(a,r,i,n,s,o){let c=r[i],l=r[i+1],h=r[i+2];if(!1!==n){c=t(c,n,0,100);l=t(l,n,a.amin,a.amax);h=t(h,n,a.bmin,a.bmax)}l>a.amax?l=a.amax:l<a.amin&&(l=a.amin);h>a.bmax?h=a.bmax:h<a.bmin&&(h=a.bmin);const u=(c+16)/116,d=u+l/500,f=u-h/200,g=a.XW*e(d),m=a.YW*e(u),p=a.ZW*e(f);let b,y,v;if(a.ZW<1){b=3.1339*g+-1.617*m+-.4906*p;y=-.9785*g+1.916*m+.0333*p;v=.072*g+-.229*m+1.4057*p}else{b=3.2406*g+-1.5372*m+-.4986*p;y=-.9689*g+1.8758*m+.0415*p;v=.0557*g+-.204*m+1.057*p}s[o]=255*Math.sqrt(b);s[o+1]=255*Math.sqrt(y);s[o+2]=255*Math.sqrt(v)}return class extends n{constructor(e,t,a){super("Lab",3);if(!e)throw new r.FormatError("WhitePoint missing - required for color space Lab");t=t||[0,0,0];a=a||[-100,100,-100,100];this.XW=e[0];this.YW=e[1];this.ZW=e[2];this.amin=a[0];this.amax=a[1];this.bmin=a[2];this.bmax=a[3];this.XB=t[0];this.YB=t[1];this.ZB=t[2];if(this.XW<0||this.ZW<0||1!==this.YW)throw new r.FormatError("Invalid WhitePoint components, no fallback available");if(this.XB<0||this.YB<0||this.ZB<0){(0,r.info)("Invalid BlackPoint, falling back to default");this.XB=this.YB=this.ZB=0}if(this.amin>this.amax||this.bmin>this.bmax){(0,r.info)("Invalid Range, falling back to defaults");this.amin=-100;this.amax=100;this.bmin=-100;this.bmax=100}}getRgbItem(e,t,r,i){a(this,e,t,!1,r,i)}getRgbBuffer(e,t,r,i,n,s,o){const c=(1<<s)-1;for(let s=0;s<r;s++){a(this,e,t,c,i,n);t+=3;n+=3+o}}getOutputLength(e,t){return e*(3+t)/3|0}isDefaultDecode(e,t){return!0}get usesZeroToOneRange(){return(0,r.shadow)(this,"usesZeroToOneRange",!1)}}}()},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.getQuadPoints=h;t.MarkupAnnotation=t.AnnotationFactory=t.AnnotationBorderStyle=t.Annotation=void 0;var r=a(2),i=a(9),n=a(4),s=a(22),o=a(7),c=a(24),l=a(11);t.AnnotationFactory=class{static create(e,t,a,r){return a.ensure(this,"_create",[e,t,a,r])}static _create(e,t,a,i){const s=e.fetchIfRef(t);if(!(0,n.isDict)(s))return;const c=(0,n.isRef)(t)?t.toString():`annot_${i.createObjId()}`;let l=s.get("Subtype");l=(0,n.isName)(l)?l.name:null;const h={xref:e,dict:s,subtype:l,id:c,pdfManager:a};switch(l){case"Link":return new v(h);case"Text":return new y(h);case"Widget":let e=(0,o.getInheritableProperty)({dict:s,key:"FT"});e=(0,n.isName)(e)?e.name:null;switch(e){case"Tx":return new m(h);case"Btn":return new p(h);case"Ch":return new b(h)}(0,r.warn)('Unimplemented widget field type "'+e+'", falling back to base field type.');return new g(h);case"Popup":return new w(h);case"FreeText":return new k(h);case"Line":return new S(h);case"Square":return new C(h);case"Circle":return new x(h);case"PolyLine":return new A(h);case"Polygon":return new I(h);case"Caret":return new F(h);case"Ink":return new T(h);case"Highlight":return new E(h);case"Underline":return new O(h);case"Squiggly":return new P(h);case"StrikeOut":return new B(h);case"Stamp":return new D(h);case"FileAttachment":return new N(h);default:l?(0,r.warn)('Unimplemented annotation type "'+l+'", falling back to base annotation.'):(0,r.warn)("Annotation is missing the required /Subtype.");return new u(h)}}};function h(e,t){if(!e.has("QuadPoints"))return null;const a=e.getArray("QuadPoints");if(!Array.isArray(a)||a.length%8>0)return null;const r=[];for(let e=0,i=a.length/8;e<i;e++){r.push([]);for(let i=8*e,n=8*e+8;i<n;i+=2){const n=a[i],s=a[i+1];if(n<t[0]||n>t[2]||s<t[1]||s>t[3])return null;r[e].push({x:n,y:s})}}return r}class u{constructor(e){const t=e.dict;this.setContents(t.get("Contents"));this.setModificationDate(t.get("M"));this.setFlags(t.get("F"));this.setRectangle(t.getArray("Rect"));this.setColor(t.getArray("C"));this.setBorderStyle(t);this.setAppearance(t);this.data={annotationFlags:this.flags,borderStyle:this.borderStyle,color:this.color,contents:this.contents,hasAppearance:!!this.appearance,id:e.id,modificationDate:this.modificationDate,rect:this.rectangle,subtype:e.subtype}}_hasFlag(e,t){return!!(e&t)}_isViewable(e){return!this._hasFlag(e,r.AnnotationFlag.INVISIBLE)&&!this._hasFlag(e,r.AnnotationFlag.HIDDEN)&&!this._hasFlag(e,r.AnnotationFlag.NOVIEW)}_isPrintable(e){return this._hasFlag(e,r.AnnotationFlag.PRINT)&&!this._hasFlag(e,r.AnnotationFlag.INVISIBLE)&&!this._hasFlag(e,r.AnnotationFlag.HIDDEN)}get viewable(){return 0===this.flags||this._isViewable(this.flags)}get printable(){return 0!==this.flags&&this._isPrintable(this.flags)}setContents(e){this.contents=(0,r.stringToPDFString)(e||"")}setModificationDate(e){this.modificationDate=(0,r.isString)(e)?e:null}setFlags(e){this.flags=Number.isInteger(e)&&e>0?e:0}hasFlag(e){return this._hasFlag(this.flags,e)}setRectangle(e){Array.isArray(e)&&4===e.length?this.rectangle=r.Util.normalizeRect(e):this.rectangle=[0,0,0,0]}setColor(e){const t=new Uint8ClampedArray(3);if(Array.isArray(e))switch(e.length){case 0:this.color=null;break;case 1:s.ColorSpace.singletons.gray.getRgbItem(e,0,t,0);this.color=t;break;case 3:s.ColorSpace.singletons.rgb.getRgbItem(e,0,t,0);this.color=t;break;case 4:s.ColorSpace.singletons.cmyk.getRgbItem(e,0,t,0);this.color=t;break;default:this.color=t}else this.color=t}setBorderStyle(e){this.borderStyle=new d;if((0,n.isDict)(e))if(e.has("BS")){const t=e.get("BS"),a=t.get("Type");if(!a||(0,n.isName)(a,"Border")){this.borderStyle.setWidth(t.get("W"),this.rectangle);this.borderStyle.setStyle(t.get("S"));this.borderStyle.setDashArray(t.getArray("D"))}}else if(e.has("Border")){const t=e.getArray("Border");if(Array.isArray(t)&&t.length>=3){this.borderStyle.setHorizontalCornerRadius(t[0]);this.borderStyle.setVerticalCornerRadius(t[1]);this.borderStyle.setWidth(t[2],this.rectangle);4===t.length&&this.borderStyle.setDashArray(t[3])}}else this.borderStyle.setWidth(0)}setAppearance(e){this.appearance=null;const t=e.get("AP");if(!(0,n.isDict)(t))return;const a=t.get("N");if((0,n.isStream)(a)){this.appearance=a;return}if(!(0,n.isDict)(a))return;const r=e.get("AS");(0,n.isName)(r)&&a.has(r.name)&&(this.appearance=a.get(r.name))}loadResources(e){return this.appearance.dict.getAsync("Resources").then(t=>{if(!t)return;return new i.ObjectLoader(t,e,t.xref).load().then((function(){return t}))})}getOperatorList(e,t,a){if(!this.appearance)return Promise.resolve(new c.OperatorList);const i=this.data,n=this.appearance.dict,s=this.loadResources(["ExtGState","ColorSpace","Pattern","Shading","XObject","Font"]),o=n.getArray("BBox")||[0,0,1,1],l=n.getArray("Matrix")||[1,0,0,1,0,0],h=function(e,t,a){const[i,n,s,o]=r.Util.getAxialAlignedBoundingBox(t,a);if(i===s||n===o)return[1,0,0,1,e[0],e[1]];const c=(e[2]-e[0])/(s-i),l=(e[3]-e[1])/(o-n);return[c,0,0,l,e[0]-i*c,e[1]-n*l]}(i.rect,o,l);return s.then(a=>{const n=new c.OperatorList;n.addOp(r.OPS.beginAnnotation,[i.rect,h,l]);return e.getOperatorList({stream:this.appearance,task:t,resources:a,operatorList:n}).then(()=>{n.addOp(r.OPS.endAnnotation,[]);this.appearance.reset();return n})})}}t.Annotation=u;class d{constructor(){this.width=1;this.style=r.AnnotationBorderStyleType.SOLID;this.dashArray=[3];this.horizontalCornerRadius=0;this.verticalCornerRadius=0}setWidth(e,t=[0,0,0,0]){if((0,n.isName)(e))this.width=0;else if(Number.isInteger(e)){if(e>0){const a=(t[2]-t[0])/2,i=(t[3]-t[1])/2;if(a>0&&i>0&&(e>a||e>i)){(0,r.warn)(`AnnotationBorderStyle.setWidth - ignoring width: ${e}`);e=1}}this.width=e}}setStyle(e){if((0,n.isName)(e))switch(e.name){case"S":this.style=r.AnnotationBorderStyleType.SOLID;break;case"D":this.style=r.AnnotationBorderStyleType.DASHED;break;case"B":this.style=r.AnnotationBorderStyleType.BEVELED;break;case"I":this.style=r.AnnotationBorderStyleType.INSET;break;case"U":this.style=r.AnnotationBorderStyleType.UNDERLINE}}setDashArray(e){if(Array.isArray(e)&&e.length>0){let t=!0,a=!0;for(const r of e){if(!(+r>=0)){t=!1;break}r>0&&(a=!1)}t&&!a?this.dashArray=e:this.width=0}else e&&(this.width=0)}setHorizontalCornerRadius(e){Number.isInteger(e)&&(this.horizontalCornerRadius=e)}setVerticalCornerRadius(e){Number.isInteger(e)&&(this.verticalCornerRadius=e)}}t.AnnotationBorderStyle=d;class f extends u{constructor(e){super(e);const t=e.dict;if(t.has("IRT")){const e=t.getRaw("IRT");this.data.inReplyTo=(0,n.isRef)(e)?e.toString():null;const a=t.get("RT");this.data.replyType=(0,n.isName)(a)?a.name:r.AnnotationReplyType.REPLY}if(this.data.replyType===r.AnnotationReplyType.GROUP){const e=t.get("IRT");this.data.title=(0,r.stringToPDFString)(e.get("T")||"");this.setContents(e.get("Contents"));this.data.contents=this.contents;if(e.has("CreationDate")){this.setCreationDate(e.get("CreationDate"));this.data.creationDate=this.creationDate}else this.data.creationDate=null;if(e.has("M")){this.setModificationDate(e.get("M"));this.data.modificationDate=this.modificationDate}else this.data.modificationDate=null;this.data.hasPopup=e.has("Popup");if(e.has("C")){this.setColor(e.getArray("C"));this.data.color=this.color}else this.data.color=null}else{this.data.title=(0,r.stringToPDFString)(t.get("T")||"");this.setCreationDate(t.get("CreationDate"));this.data.creationDate=this.creationDate;this.data.hasPopup=t.has("Popup");t.has("C")||(this.data.color=null)}}setCreationDate(e){this.creationDate=(0,r.isString)(e)?e:null}}t.MarkupAnnotation=f;class g extends u{constructor(e){super(e);const t=e.dict,a=this.data;a.annotationType=r.AnnotationType.WIDGET;a.fieldName=this._constructFieldName(t);a.fieldValue=(0,o.getInheritableProperty)({dict:t,key:"V",getArray:!0});a.alternativeText=(0,r.stringToPDFString)(t.get("TU")||"");a.defaultAppearance=(0,o.getInheritableProperty)({dict:t,key:"DA"})||"";const i=(0,o.getInheritableProperty)({dict:t,key:"FT"});a.fieldType=(0,n.isName)(i)?i.name:null;this.fieldResources=(0,o.getInheritableProperty)({dict:t,key:"DR"})||n.Dict.empty;a.fieldFlags=(0,o.getInheritableProperty)({dict:t,key:"Ff"});(!Number.isInteger(a.fieldFlags)||a.fieldFlags<0)&&(a.fieldFlags=0);a.readOnly=this.hasFieldFlag(r.AnnotationFieldFlag.READONLY);if("Sig"===a.fieldType){a.fieldValue=null;this.setFlags(r.AnnotationFlag.HIDDEN)}}_constructFieldName(e){if(!e.has("T")&&!e.has("Parent")){(0,r.warn)("Unknown field name, falling back to empty field name.");return""}if(!e.has("Parent"))return(0,r.stringToPDFString)(e.get("T"));const t=[];e.has("T")&&t.unshift((0,r.stringToPDFString)(e.get("T")));let a=e;for(;a.has("Parent");){a=a.get("Parent");if(!(0,n.isDict)(a))break;a.has("T")&&t.unshift((0,r.stringToPDFString)(a.get("T")))}return t.join(".")}hasFieldFlag(e){return!!(this.data.fieldFlags&e)}getOperatorList(e,t,a){return a?Promise.resolve(new c.OperatorList):super.getOperatorList(e,t,a)}}class m extends g{constructor(e){super(e);const t=e.dict;this.data.fieldValue=(0,r.stringToPDFString)(this.data.fieldValue||"");let a=(0,o.getInheritableProperty)({dict:t,key:"Q"});(!Number.isInteger(a)||a<0||a>2)&&(a=null);this.data.textAlignment=a;let i=(0,o.getInheritableProperty)({dict:t,key:"MaxLen"});(!Number.isInteger(i)||i<0)&&(i=null);this.data.maxLen=i;this.data.multiLine=this.hasFieldFlag(r.AnnotationFieldFlag.MULTILINE);this.data.comb=this.hasFieldFlag(r.AnnotationFieldFlag.COMB)&&!this.hasFieldFlag(r.AnnotationFieldFlag.MULTILINE)&&!this.hasFieldFlag(r.AnnotationFieldFlag.PASSWORD)&&!this.hasFieldFlag(r.AnnotationFieldFlag.FILESELECT)&&null!==this.data.maxLen}getOperatorList(e,t,a){if(a||this.appearance)return super.getOperatorList(e,t,a);const i=new c.OperatorList;if(!this.data.defaultAppearance)return Promise.resolve(i);const n=new l.Stream((0,r.stringToBytes)(this.data.defaultAppearance));return e.getOperatorList({stream:n,task:t,resources:this.fieldResources,operatorList:i}).then((function(){return i}))}}class p extends g{constructor(e){super(e);this.data.checkBox=!this.hasFieldFlag(r.AnnotationFieldFlag.RADIO)&&!this.hasFieldFlag(r.AnnotationFieldFlag.PUSHBUTTON);this.data.radioButton=this.hasFieldFlag(r.AnnotationFieldFlag.RADIO)&&!this.hasFieldFlag(r.AnnotationFieldFlag.PUSHBUTTON);this.data.pushButton=this.hasFieldFlag(r.AnnotationFieldFlag.PUSHBUTTON);this.data.checkBox?this._processCheckBox(e):this.data.radioButton?this._processRadioButton(e):this.data.pushButton?this._processPushButton(e):(0,r.warn)("Invalid field flags for button widget annotation")}_processCheckBox(e){(0,n.isName)(this.data.fieldValue)&&(this.data.fieldValue=this.data.fieldValue.name);const t=e.dict.get("AP");if(!(0,n.isDict)(t))return;const a=t.get("D");if(!(0,n.isDict)(a))return;const r=a.getKeys();2===r.length&&(this.data.exportValue="Off"===r[0]?r[1]:r[0])}_processRadioButton(e){this.data.fieldValue=this.data.buttonValue=null;const t=e.dict.get("Parent");if((0,n.isDict)(t)&&t.has("V")){const e=t.get("V");(0,n.isName)(e)&&(this.data.fieldValue=e.name)}const a=e.dict.get("AP");if(!(0,n.isDict)(a))return;const r=a.get("N");if((0,n.isDict)(r))for(const e of r.getKeys())if("Off"!==e){this.data.buttonValue=e;break}}_processPushButton(e){e.dict.has("A")?i.Catalog.parseDestDictionary({destDict:e.dict,resultObj:this.data,docBaseUrl:e.pdfManager.docBaseUrl}):(0,r.warn)("Push buttons without action dictionaries are not supported")}}class b extends g{constructor(e){super(e);this.data.options=[];const t=(0,o.getInheritableProperty)({dict:e.dict,key:"Opt"});if(Array.isArray(t)){const a=e.xref;for(let e=0,i=t.length;e<i;e++){const i=a.fetchIfRef(t[e]),n=Array.isArray(i);this.data.options[e]={exportValue:n?a.fetchIfRef(i[0]):i,displayValue:(0,r.stringToPDFString)(n?a.fetchIfRef(i[1]):i)}}}Array.isArray(this.data.fieldValue)||(this.data.fieldValue=[this.data.fieldValue]);this.data.combo=this.hasFieldFlag(r.AnnotationFieldFlag.COMBO);this.data.multiSelect=this.hasFieldFlag(r.AnnotationFieldFlag.MULTISELECT)}}class y extends f{constructor(e){super(e);const t=e.dict;this.data.annotationType=r.AnnotationType.TEXT;if(this.data.hasAppearance)this.data.name="NoIcon";else{this.data.rect[1]=this.data.rect[3]-22;this.data.rect[2]=this.data.rect[0]+22;this.data.name=t.has("Name")?t.get("Name").name:"Note"}if(t.has("State")){this.data.state=t.get("State")||null;this.data.stateModel=t.get("StateModel")||null}else{this.data.state=null;this.data.stateModel=null}}}class v extends u{constructor(e){super(e);this.data.annotationType=r.AnnotationType.LINK;const t=h(e.dict,this.rectangle);t&&(this.data.quadPoints=t);i.Catalog.parseDestDictionary({destDict:e.dict,resultObj:this.data,docBaseUrl:e.pdfManager.docBaseUrl})}}class w extends u{constructor(e){super(e);this.data.annotationType=r.AnnotationType.POPUP;let t=e.dict.get("Parent");if(!t){(0,r.warn)("Popup annotation has a missing or invalid parent annotation.");return}const a=t.get("Subtype");this.data.parentType=(0,n.isName)(a)?a.name:null;const i=e.dict.getRaw("Parent");this.data.parentId=(0,n.isRef)(i)?i.toString():null;const s=t.get("RT");(0,n.isName)(s,r.AnnotationReplyType.GROUP)&&(t=t.get("IRT"));if(t.has("M")){this.setModificationDate(t.get("M"));this.data.modificationDate=this.modificationDate}else this.data.modificationDate=null;if(t.has("C")){this.setColor(t.getArray("C"));this.data.color=this.color}else this.data.color=null;if(!this.viewable){const e=t.get("F");this._isViewable(e)&&this.setFlags(e)}this.data.title=(0,r.stringToPDFString)(t.get("T")||"");this.data.contents=(0,r.stringToPDFString)(t.get("Contents")||"")}}class k extends f{constructor(e){super(e);this.data.annotationType=r.AnnotationType.FREETEXT}}class S extends f{constructor(e){super(e);this.data.annotationType=r.AnnotationType.LINE;this.data.lineCoordinates=r.Util.normalizeRect(e.dict.getArray("L"))}}class C extends f{constructor(e){super(e);this.data.annotationType=r.AnnotationType.SQUARE}}class x extends f{constructor(e){super(e);this.data.annotationType=r.AnnotationType.CIRCLE}}class A extends f{constructor(e){super(e);this.data.annotationType=r.AnnotationType.POLYLINE;const t=e.dict.getArray("Vertices");this.data.vertices=[];for(let e=0,a=t.length;e<a;e+=2)this.data.vertices.push({x:t[e],y:t[e+1]})}}class I extends A{constructor(e){super(e);this.data.annotationType=r.AnnotationType.POLYGON}}class F extends f{constructor(e){super(e);this.data.annotationType=r.AnnotationType.CARET}}class T extends f{constructor(e){super(e);this.data.annotationType=r.AnnotationType.INK;const t=e.xref,a=e.dict.getArray("InkList");this.data.inkLists=[];for(let e=0,r=a.length;e<r;++e){this.data.inkLists.push([]);for(let r=0,i=a[e].length;r<i;r+=2)this.data.inkLists[e].push({x:t.fetchIfRef(a[e][r]),y:t.fetchIfRef(a[e][r+1])})}}}class E extends f{constructor(e){super(e);this.data.annotationType=r.AnnotationType.HIGHLIGHT;const t=h(e.dict,this.rectangle);t&&(this.data.quadPoints=t)}}class O extends f{constructor(e){super(e);this.data.annotationType=r.AnnotationType.UNDERLINE;const t=h(e.dict,this.rectangle);t&&(this.data.quadPoints=t)}}class P extends f{constructor(e){super(e);this.data.annotationType=r.AnnotationType.SQUIGGLY;const t=h(e.dict,this.rectangle);t&&(this.data.quadPoints=t)}}class B extends f{constructor(e){super(e);this.data.annotationType=r.AnnotationType.STRIKEOUT;const t=h(e.dict,this.rectangle);t&&(this.data.quadPoints=t)}}class D extends f{constructor(e){super(e);this.data.annotationType=r.AnnotationType.STAMP}}class N extends f{constructor(e){super(e);const t=new i.FileSpec(e.dict.get("FS"),e.xref);this.data.annotationType=r.AnnotationType.FILEATTACHMENT;this.data.file=t.serializable}}},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.OperatorList=void 0;var r=a(2),i=function(){function e(e,t,a,r,i){for(var n=e,s=0,o=t.length-1;s<o;s++){var c=t[s];n=n[c]||(n[c]=[])}n[t[t.length-1]]={checkFn:a,iterateFn:r,processFn:i}}var t=[];e(t,[r.OPS.save,r.OPS.transform,r.OPS.paintInlineImageXObject,r.OPS.restore],null,(function(e,t){var a=e.fnArray,i=(t-(e.iCurr-3))%4;switch(i){case 0:return a[t]===r.OPS.save;case 1:return a[t]===r.OPS.transform;case 2:return a[t]===r.OPS.paintInlineImageXObject;case 3:return a[t]===r.OPS.restore}throw new Error(`iterateInlineImageGroup - invalid pos: ${i}`)}),(function(e,t){var a=e.fnArray,i=e.argsArray,n=e.iCurr,s=n-3,o=n-2,c=n-1,l=Math.min(Math.floor((t-s)/4),200);if(l<10)return t-(t-s)%4;var h,u=0,d=[],f=0,g=1,m=1;for(h=0;h<l;h++){var p=i[o+(h<<2)],b=i[c+(h<<2)][0];if(g+b.width>1e3){u=Math.max(u,g);m+=f+2;g=0;f=0}d.push({transform:p,x:g,y:m,w:b.width,h:b.height});g+=b.width+2;f=Math.max(f,b.height)}var y=Math.max(u,g)+1,v=m+f+1,w=new Uint8ClampedArray(y*v*4),k=y<<2;for(h=0;h<l;h++){var S=i[c+(h<<2)][0].data,C=d[h].w<<2,x=0,A=d[h].x+d[h].y*y<<2;w.set(S.subarray(0,C),A-k);for(var I=0,F=d[h].h;I<F;I++){w.set(S.subarray(x,x+C),A);x+=C;A+=k}w.set(S.subarray(x-C,x),A);for(;A>=0;){S[A-4]=S[A];S[A-3]=S[A+1];S[A-2]=S[A+2];S[A-1]=S[A+3];S[A+C]=S[A+C-4];S[A+C+1]=S[A+C-3];S[A+C+2]=S[A+C-2];S[A+C+3]=S[A+C-1];A-=k}}a.splice(s,4*l,r.OPS.paintInlineImageXObjectGroup);i.splice(s,4*l,[{width:y,height:v,kind:r.ImageKind.RGBA_32BPP,data:w},d]);return s+1}));e(t,[r.OPS.save,r.OPS.transform,r.OPS.paintImageMaskXObject,r.OPS.restore],null,(function(e,t){var a=e.fnArray,i=(t-(e.iCurr-3))%4;switch(i){case 0:return a[t]===r.OPS.save;case 1:return a[t]===r.OPS.transform;case 2:return a[t]===r.OPS.paintImageMaskXObject;case 3:return a[t]===r.OPS.restore}throw new Error(`iterateImageMaskGroup - invalid pos: ${i}`)}),(function(e,t){var a,i=e.fnArray,n=e.argsArray,s=e.iCurr,o=s-3,c=s-2,l=s-1,h=Math.floor((t-o)/4);if((h=function(e,t,a,i){for(var n=e+2,s=0;s<t;s++){var o=i[n+4*s],c=1===o.length&&o[0];if(!c||1!==c.width||1!==c.height||c.data.length&&(1!==c.data.length||0!==c.data[0]))break;a[n+4*s]=r.OPS.paintSolidColorImageMask}return t-s}(o,h,i,n))<10)return t-(t-o)%4;var u,d,f=!1,g=n[l][0];if(0===n[c][1]&&0===n[c][2]){f=!0;var m=n[c][0],p=n[c][3];u=c+4;var b=l+4;for(a=1;a<h;a++,u+=4,b+=4){d=n[u];if(n[b][0]!==g||d[0]!==m||0!==d[1]||0!==d[2]||d[3]!==p){a<10?f=!1:h=a;break}}}if(f){h=Math.min(h,1e3);var y=new Float32Array(2*h);u=c;for(a=0;a<h;a++,u+=4){d=n[u];y[a<<1]=d[4];y[1+(a<<1)]=d[5]}i.splice(o,4*h,r.OPS.paintImageMaskXObjectRepeat);n.splice(o,4*h,[g,m,p,y])}else{h=Math.min(h,100);var v=[];for(a=0;a<h;a++){d=n[c+(a<<2)];var w=n[l+(a<<2)][0];v.push({data:w.data,width:w.width,height:w.height,transform:d})}i.splice(o,4*h,r.OPS.paintImageMaskXObjectGroup);n.splice(o,4*h,[v])}return o+1}));e(t,[r.OPS.save,r.OPS.transform,r.OPS.paintImageXObject,r.OPS.restore],(function(e){var t=e.argsArray,a=e.iCurr-2;return 0===t[a][1]&&0===t[a][2]}),(function(e,t){var a=e.fnArray,i=e.argsArray,n=(t-(e.iCurr-3))%4;switch(n){case 0:return a[t]===r.OPS.save;case 1:if(a[t]!==r.OPS.transform)return!1;var s=e.iCurr-2,o=i[s][0],c=i[s][3];return i[t][0]===o&&0===i[t][1]&&0===i[t][2]&&i[t][3]===c;case 2:if(a[t]!==r.OPS.paintImageXObject)return!1;var l=i[e.iCurr-1][0];return i[t][0]===l;case 3:return a[t]===r.OPS.restore}throw new Error(`iterateImageGroup - invalid pos: ${n}`)}),(function(e,t){var a=e.fnArray,i=e.argsArray,n=e.iCurr,s=n-3,o=n-2,c=i[n-1][0],l=i[o][0],h=i[o][3],u=Math.min(Math.floor((t-s)/4),1e3);if(u<3)return t-(t-s)%4;for(var d=new Float32Array(2*u),f=o,g=0;g<u;g++,f+=4){var m=i[f];d[g<<1]=m[4];d[1+(g<<1)]=m[5]}var p=[c,l,h,d];a.splice(s,4*u,r.OPS.paintImageXObjectRepeat);i.splice(s,4*u,p);return s+1}));e(t,[r.OPS.beginText,r.OPS.setFont,r.OPS.setTextMatrix,r.OPS.showText,r.OPS.endText],null,(function(e,t){var a=e.fnArray,i=e.argsArray,n=(t-(e.iCurr-4))%5;switch(n){case 0:return a[t]===r.OPS.beginText;case 1:return a[t]===r.OPS.setFont;case 2:return a[t]===r.OPS.setTextMatrix;case 3:if(a[t]!==r.OPS.showText)return!1;var s=e.iCurr-3,o=i[s][0],c=i[s][1];return i[t][0]===o&&i[t][1]===c;case 4:return a[t]===r.OPS.endText}throw new Error(`iterateShowTextGroup - invalid pos: ${n}`)}),(function(e,t){var a=e.fnArray,r=e.argsArray,i=e.iCurr,n=i-4,s=i-3,o=i-2,c=i-1,l=i,h=r[s][0],u=r[s][1],d=Math.min(Math.floor((t-n)/5),1e3);if(d<3)return t-(t-n)%5;var f=n;if(n>=4&&a[n-4]===a[s]&&a[n-3]===a[o]&&a[n-2]===a[c]&&a[n-1]===a[l]&&r[n-4][0]===h&&r[n-4][1]===u){d++;f-=5}for(var g=f+4,m=1;m<d;m++){a.splice(g,3);r.splice(g,3);g+=2}return g+1}));function a(e){this.queue=e;this.state=null;this.context={iCurr:0,fnArray:e.fnArray,argsArray:e.argsArray};this.match=null;this.lastProcessed=0}a.prototype={_optimize(){const e=this.queue.fnArray;let a=this.lastProcessed,r=e.length,i=this.state,n=this.match;if(!i&&!n&&a+1===r&&!t[e[a]]){this.lastProcessed=r;return}const s=this.context;for(;a<r;){if(n){if((0,n.iterateFn)(s,a)){a++;continue}a=(0,n.processFn)(s,a+1);r=e.length;n=null;i=null;if(a>=r)break}i=(i||t)[e[a]];if(i&&!Array.isArray(i)){s.iCurr=a;a++;if(!i.checkFn||(0,i.checkFn)(s)){n=i;i=null}else i=null}else a++}this.state=i;this.match=n;this.lastProcessed=a},push(e,t){this.queue.fnArray.push(e);this.queue.argsArray.push(t);this._optimize()},flush(){for(;this.match;){const e=this.queue.fnArray.length;this.lastProcessed=(0,this.match.processFn)(this.context,e);this.match=null;this.state=null;this._optimize()}},reset(){this.state=null;this.match=null;this.lastProcessed=0}};return a}(),n=function(){function e(e){this.queue=e}e.prototype={push(e,t){this.queue.fnArray.push(e);this.queue.argsArray.push(t)},flush(){},reset(){}};return e}(),s=function(){function e(e,t,a){this._streamSink=t;this.fnArray=[];this.argsArray=[];this.optimizer=t&&"oplist"!==e?new i(this):new n(this);this.dependencies=Object.create(null);this._totalLength=0;this.pageIndex=a;this.intent=e;this.weight=0;this._resolved=t?null:Promise.resolve()}e.prototype={get length(){return this.argsArray.length},get ready(){return this._resolved||this._streamSink.ready},get totalLength(){return this._totalLength+this.length},addOp(e,t){this.optimizer.push(e,t);this.weight++;this._streamSink&&(this.weight>=1e3||this.weight>=995&&(e===r.OPS.restore||e===r.OPS.endText))&&this.flush()},addDependency(e){if(!(e in this.dependencies)){this.dependencies[e]=!0;this.addOp(r.OPS.dependency,[e])}},addDependencies(e){for(var t in e)this.addDependency(t)},addOpList(e){Object.assign(this.dependencies,e.dependencies);for(var t=0,a=e.length;t<a;t++)this.addOp(e.fnArray[t],e.argsArray[t])},getIR(){return{fnArray:this.fnArray,argsArray:this.argsArray,length:this.length}},get _transfers(){const e=[],{fnArray:t,argsArray:a,length:i}=this;for(let n=0;n<i;n++)switch(t[n]){case r.OPS.paintInlineImageXObject:case r.OPS.paintInlineImageXObjectGroup:case r.OPS.paintImageMaskXObject:const t=a[n][0];t.cached||e.push(t.data.buffer)}return e},flush(e=!1){this.optimizer.flush();const t=this.length;this._totalLength+=t;this._streamSink.enqueue({fnArray:this.fnArray,argsArray:this.argsArray,lastChunk:e,length:t},1,this._transfers);this.dependencies=Object.create(null);this.fnArray.length=0;this.argsArray.length=0;this.weight=0;this.optimizer.reset()}};return e}();t.OperatorList=s},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.PartialEvaluator=void 0;var r=a(2),i=a(26),n=a(4),s=a(27),o=a(30),c=a(7),l=a(33),h=a(32),u=a(36),d=a(10),f=a(37),g=a(22),m=a(11),p=a(31),b=a(38),y=a(39),v=a(17),w=a(41),k=a(42),S=a(24),C=a(43),x=function(){const e={forceDataSchema:!1,maxImageSize:-1,disableFontFace:!1,nativeImageDecoderSupport:r.NativeImageDecoding.DECODE,ignoreErrors:!1,isEvalSupported:!0};function t({xref:t,handler:a,pageIndex:i,idFactory:n,fontCache:s,builtInCMapCache:o,options:c=null,pdfFunctionFactory:l}){this.xref=t;this.handler=a;this.pageIndex=i;this.idFactory=n;this.fontCache=s;this.builtInCMapCache=o;this.options=c||e;this.pdfFunctionFactory=l;this.parsingType3Font=!1;this.fetchBuiltInCMap=async e=>{if(this.builtInCMapCache.has(e))return this.builtInCMapCache.get(e);const t=this.handler.sendWithStream("FetchBuiltInCMap",{name:e}).getReader(),a=await new Promise((function(e,a){!function r(){t.read().then((function({value:t,done:a}){if(!a){e(t);r()}}),a)}()}));a.compressionType!==r.CMapCompressionType.NONE&&this.builtInCMapCache.set(e,a);return a}}function a(){this.reset()}a.prototype={check:function(){if(++this.checked<100)return!1;this.checked=0;return this.endTime<=Date.now()},reset:function(){this.endTime=Date.now()+20;this.checked=0}};function d(e,t=!1){if(Array.isArray(e)){for(let t=0,a=e.length;t<a;t++){const a=d(e[t],!0);if(a)return a}(0,r.warn)(`Unsupported blend mode Array: ${e}`);return"source-over"}if(!(0,n.isName)(e))return t?null:"source-over";switch(e.name){case"Normal":case"Compatible":return"source-over";case"Multiply":return"multiply";case"Screen":return"screen";case"Overlay":return"overlay";case"Darken":return"darken";case"Lighten":return"lighten";case"ColorDodge":return"color-dodge";case"ColorBurn":return"color-burn";case"HardLight":return"hard-light";case"SoftLight":return"soft-light";case"Difference":return"difference";case"Exclusion":return"exclusion";case"Hue":return"hue";case"Saturation":return"saturation";case"Color":return"color";case"Luminosity":return"luminosity"}if(t)return null;(0,r.warn)(`Unsupported blend mode: ${e.name}`);return"source-over"}var x=Promise.resolve();t.prototype={clone(t=e){var a=Object.create(this);a.options=t;return a},hasBlendModes:function(e){if(!(e instanceof n.Dict))return!1;var t=Object.create(null);e.objId&&(t[e.objId]=!0);for(var a=[e],i=this.xref;a.length;){var s=a.shift(),o=s.get("ExtGState");if(o instanceof n.Dict){var l=o.getKeys();for(let e=0,a=l.length;e<a;e++){const a=l[e];let s=o.getRaw(a);if(s instanceof n.Ref){if(t[s.toString()])continue;try{s=i.fetch(s)}catch(e){if(e instanceof c.MissingDataException)throw e;if(this.options.ignoreErrors){s instanceof n.Ref&&(t[s.toString()]=!0);this.handler.send("UnsupportedFeature",{featureId:r.UNSUPPORTED_FEATURES.unknown});(0,r.warn)(`hasBlendModes - ignoring ExtGState: "${e}".`);continue}throw e}}if(!(s instanceof n.Dict))continue;s.objId&&(t[s.objId]=!0);const h=s.get("BM");if(h instanceof n.Name){if("Normal"!==h.name)return!0}else if(void 0!==h&&Array.isArray(h))for(let e=0,t=h.length;e<t;e++)if(h[e]instanceof n.Name&&"Normal"!==h[e].name)return!0}}var h=s.get("XObject");if(h instanceof n.Dict){var u=h.getKeys();for(let e=0,s=u.length;e<s;e++){const s=u[e];var d=h.getRaw(s);if(d instanceof n.Ref){if(t[d.toString()])continue;try{d=i.fetch(d)}catch(e){if(e instanceof c.MissingDataException)throw e;if(this.options.ignoreErrors){d instanceof n.Ref&&(t[d.toString()]=!0);this.handler.send("UnsupportedFeature",{featureId:r.UNSUPPORTED_FEATURES.unknown});(0,r.warn)(`hasBlendModes - ignoring XObject: "${e}".`);continue}throw e}}if((0,n.isStream)(d)){if(d.dict.objId){if(t[d.dict.objId])continue;t[d.dict.objId]=!0}var f=d.dict.get("Resources");if(f instanceof n.Dict&&(!f.objId||!t[f.objId])){a.push(f);f.objId&&(t[f.objId]=!0)}}}}}return!1},async buildFormXObject(e,t,a,i,s,o){var c=t.dict,l=c.getArray("Matrix"),h=c.getArray("BBox");h=Array.isArray(h)&&4===h.length?r.Util.normalizeRect(h):null;var u=c.get("Group");if(u){var d={matrix:l,bbox:h,smask:a,isolated:!1,knockout:!1},f=u.get("S"),m=null;if((0,n.isName)(f,"Transparency")){d.isolated=u.get("I")||!1;d.knockout=u.get("K")||!1;u.has("CS")&&(m=await this.parseColorSpace({cs:u.get("CS"),resources:e}))}if(a&&a.backdrop){m=m||g.ColorSpace.singletons.rgb;a.backdrop=m.getRgb(a.backdrop,0)}i.addOp(r.OPS.beginGroup,[d])}i.addOp(r.OPS.paintFormXObjectBegin,[l,h]);return this.getOperatorList({stream:t,task:s,resources:c.get("Resources")||e,operatorList:i,initialState:o}).then((function(){i.addOp(r.OPS.paintFormXObjectEnd,[]);u&&i.addOp(r.OPS.endGroup,[d])}))},async buildPaintImageXObject({resources:e,image:t,isInline:a=!1,operatorList:i,cacheKey:n,imageCache:s,forceDisableNativeImageDecoder:o=!1}){var c=t.dict,l=c.get("Width","W"),h=c.get("Height","H");if(!(l&&(0,r.isNum)(l)&&h&&(0,r.isNum)(h))){(0,r.warn)("Image dimensions are missing, or not numbers.");return}var u,d,f=this.options.maxImageSize;if(-1!==f&&l*h>f){(0,r.warn)("Image exceeded maximum allowed size and was removed.");return}if(c.get("ImageMask","IM")||!1){var g=c.get("Width","W"),p=c.get("Height","H"),b=g+7>>3,y=t.getBytes(b*p,!0),w=c.getArray("Decode","D");(u=C.PDFImage.createMask({imgArray:y,width:g,height:p,imageIsFromDecodeStream:t instanceof m.DecodeStream,inverseDecode:!!w&&w[0]>0})).cached=!!n;d=[u];i.addOp(r.OPS.paintImageMaskXObject,d);n&&(s[n]={fn:r.OPS.paintImageMaskXObject,args:d});return}var S=c.get("SMask","SM")||!1,x=c.get("Mask")||!1;if(a&&!S&&!x&&!(t instanceof v.JpegStream)&&l+h<200){u=new C.PDFImage({xref:this.xref,res:e,image:t,isInline:a,pdfFunctionFactory:this.pdfFunctionFactory}).createImageData(!0);i.addOp(r.OPS.paintInlineImageXObject,[u]);return}const A=o?r.NativeImageDecoding.NONE:this.options.nativeImageDecoderSupport;let I=`img_${this.idFactory.createObjId()}`;if(this.parsingType3Font){(0,r.assert)(A===r.NativeImageDecoding.NONE,"Type3 image resources should be completely decoded in the worker.");I=`${this.idFactory.getDocId()}_type3res_${I}`}if(A!==r.NativeImageDecoding.NONE&&!S&&!x&&t instanceof v.JpegStream&&k.NativeImageDecoder.isSupported(t,this.xref,e,this.pdfFunctionFactory)&&t.maybeValidDimensions)return this.handler.sendWithPromise("obj",[I,this.pageIndex,"JpegStream",t.getIR(this.options.forceDataSchema)]).then((function(){i.addDependency(I);d=[I,l,h];i.addOp(r.OPS.paintJpegXObject,d);n&&(s[n]={fn:r.OPS.paintJpegXObject,args:d})}),o=>{(0,r.warn)("Native JPEG decoding failed -- trying to recover: "+(o&&o.message));return this.buildPaintImageXObject({resources:e,image:t,isInline:a,operatorList:i,cacheKey:n,imageCache:s,forceDisableNativeImageDecoder:!0})});var F=null;A===r.NativeImageDecoding.DECODE&&(t instanceof v.JpegStream||x instanceof v.JpegStream||S instanceof v.JpegStream)&&(F=new k.NativeImageDecoder({xref:this.xref,resources:e,handler:this.handler,forceDataSchema:this.options.forceDataSchema,pdfFunctionFactory:this.pdfFunctionFactory}));i.addDependency(I);d=[I,l,h];const T=C.PDFImage.buildImage({handler:this.handler,xref:this.xref,res:e,image:t,isInline:a,nativeDecoder:F,pdfFunctionFactory:this.pdfFunctionFactory}).then(e=>{var t=e.createImageData(!1);if(this.parsingType3Font)return this.handler.sendWithPromise("commonobj",[I,"FontType3Res",t],[t.data.buffer]);this.handler.send("obj",[I,this.pageIndex,"Image",t],[t.data.buffer])}).catch(e=>{(0,r.warn)("Unable to decode image: "+e);if(this.parsingType3Font)return this.handler.sendWithPromise("commonobj",[I,"FontType3Res",null]);this.handler.send("obj",[I,this.pageIndex,"Image",null])});this.parsingType3Font&&await T;i.addOp(r.OPS.paintImageXObject,d);n&&(s[n]={fn:r.OPS.paintImageXObject,args:d})},handleSMask:function(e,t,a,r,i){var n=e.get("G"),s={subtype:e.get("S").name,backdrop:e.get("BC")},o=e.get("TR");if((0,y.isPDFFunction)(o)){const e=this.pdfFunctionFactory.create(o);for(var c=new Uint8Array(256),l=new Float32Array(1),h=0;h<256;h++){l[0]=h/255;e(l,0,l,0);c[h]=255*l[0]|0}s.transferMap=c}return this.buildFormXObject(t,n,s,a,r,i.state.clone())},handleTilingType(e,t,a,i,s,o,c){const l=new S.OperatorList,h=[s.get("Resources"),a],d=n.Dict.merge(this.xref,h);return this.getOperatorList({stream:i,task:c,resources:d,operatorList:l}).then((function(){return(0,u.getTilingPatternIR)({fnArray:l.fnArray,argsArray:l.argsArray},s,t)})).then((function(t){o.addDependencies(l.dependencies);o.addOp(e,t)}),e=>{if(!(e instanceof r.AbortException)){if(!this.options.ignoreErrors)throw e;this.handler.send("UnsupportedFeature",{featureId:r.UNSUPPORTED_FEATURES.unknown});(0,r.warn)(`handleTilingType - ignoring pattern: "${e}".`)}})},handleSetFont:function(e,t,a,i,n,o){var c;t&&(c=(t=t.slice())[0].name);return this.loadFont(c,a,e).then(t=>t.font.isType3Font?t.loadType3Data(this,e,i,n).then((function(){return t})).catch(e=>{this.handler.send("UnsupportedFeature",{featureId:r.UNSUPPORTED_FEATURES.font});return new A("g_font_error",new s.ErrorFont("Type3 font load error: "+e),t.font)}):t).then(e=>{o.font=e.font;e.send(this.handler);return e.loadedName})},handleText(e,a){const i=a.font,n=i.charsToGlyphs(e);if(i.data){(!!(a.textRenderingMode&r.TextRenderingMode.ADD_TO_PATH_FLAG)||"Pattern"===a.fillColorSpace.name||i.disableFontFace||this.options.disableFontFace)&&t.buildFontPaths(i,n,this.handler)}return n},ensureStateFont(e){if(e.font)return;const t=new r.FormatError("Missing setFont (Tf) operator before text rendering operator.");if(!this.options.ignoreErrors)throw t;this.handler.send("UnsupportedFeature",{featureId:r.UNSUPPORTED_FEATURES.font});(0,r.warn)(`ensureStateFont: "${t}".`)},setGState:function(e,t,a,i,s){for(var o=[],c=t.getKeys(),l=Promise.resolve(),h=0,u=c.length;h<u;h++){const u=c[h],f=t.get(u);switch(u){case"Type":break;case"LW":case"LC":case"LJ":case"ML":case"D":case"RI":case"FL":case"CA":case"ca":o.push([u,f]);break;case"Font":l=l.then(()=>this.handleSetFont(e,null,f[0],a,i,s.state).then((function(e){a.addDependency(e);o.push([u,[e,f[1]]])})));break;case"BM":o.push([u,d(f)]);break;case"SMask":if((0,n.isName)(f,"None")){o.push([u,!1]);break}if((0,n.isDict)(f)){l=l.then(()=>this.handleSMask(f,e,a,i,s));o.push([u,!0])}else(0,r.warn)("Unsupported SMask type");break;case"OP":case"op":case"OPM":case"BG":case"BG2":case"UCR":case"UCR2":case"TR":case"TR2":case"HT":case"SM":case"SA":case"AIS":case"TK":(0,r.info)("graphic state operator "+u);break;default:(0,r.info)("Unknown graphic state operator "+u)}}return l.then((function(){o.length>0&&a.addOp(r.OPS.setGState,[o])}))},loadFont:function(e,a,i){function o(){return Promise.resolve(new A("g_font_error",new s.ErrorFont("Font "+e+" is not available"),a))}var c,l=this.xref;if(a){if(!(0,n.isRef)(a))throw new r.FormatError('The "font" object should be a reference.');c=a}else{var h=i.get("Font");h&&(c=h.getRaw(e))}if(!c){const i=`Font "${e||a&&a.toString()}" is not available`;if(!this.options.ignoreErrors&&!this.parsingType3Font){(0,r.warn)(`${i}.`);return o()}this.handler.send("UnsupportedFeature",{featureId:r.UNSUPPORTED_FEATURES.font});(0,r.warn)(`${i} -- attempting to fallback to a default font.`);c=t.getFallbackFontDict()}if(this.fontCache.has(c))return this.fontCache.get(c);a=l.fetchIfRef(c);if(!(0,n.isDict)(a))return o();if(a.translated)return a.translated;var u=(0,r.createPromiseCapability)(),d=this.preEvaluateFont(a);const{descriptor:f,hash:g}=d;var m,p,b=(0,n.isRef)(c);b&&(m=c.toString());if(g&&(0,n.isDict)(f)){f.fontAliases||(f.fontAliases=Object.create(null));var y=f.fontAliases;if(y[g]){var v=y[g].aliasRef;if(b&&v&&this.fontCache.has(v)){this.fontCache.putAlias(c,v);return this.fontCache.get(c)}}else y[g]={fontID:s.Font.getFontID()};b&&(y[g].aliasRef=c);m=y[g].fontID}if(b)this.fontCache.put(c,u.promise);else{m||(m=this.idFactory.createObjId());this.fontCache.put(`id_${m}`,u.promise)}(0,r.assert)(m,'The "fontID" must be defined.');a.loadedName=`${this.idFactory.getDocId()}_f${m}`;a.translated=u.promise;try{p=this.translateFont(d)}catch(e){p=Promise.reject(e)}p.then((function(e){if(void 0!==e.fontType){l.stats.fontTypes[e.fontType]=!0}u.resolve(new A(a.loadedName,e,a))})).catch(e=>{this.handler.send("UnsupportedFeature",{featureId:r.UNSUPPORTED_FEATURES.font});try{var t=f&&f.get("FontFile3"),i=t&&t.get("Subtype"),n=(0,s.getFontType)(d.type,i&&i.name);l.stats.fontTypes[n]=!0}catch(e){}u.resolve(new A(a.loadedName,new s.ErrorFont(e instanceof Error?e.message:e),a))});return u.promise},buildPath(e,t,a,i=!1){var n=e.length-1;a||(a=[]);if(n<0||e.fnArray[n]!==r.OPS.constructPath){if(i){(0,r.warn)(`Encountered path operator "${t}" inside of a text object.`);e.addOp(r.OPS.save,null)}e.addOp(r.OPS.constructPath,[[t],a]);i&&e.addOp(r.OPS.restore,null)}else{var s=e.argsArray[n];s[0].push(t);Array.prototype.push.apply(s[1],a)}},parseColorSpace({cs:e,resources:t}){return new Promise(a=>{a(g.ColorSpace.parse(e,this.xref,t,this.pdfFunctionFactory))}).catch(e=>{if(e instanceof r.AbortException)return null;if(this.options.ignoreErrors){this.handler.send("UnsupportedFeature",{featureId:r.UNSUPPORTED_FEATURES.unknown});(0,r.warn)(`parseColorSpace - ignoring ColorSpace: "${e}".`);return null}throw e})},async handleColorN(e,t,a,i,s,o,c){var l,h=a[a.length-1];if((0,n.isName)(h)&&(l=s.get(h.name))){var d=(0,n.isStream)(l)?l.dict:l,f=d.get("PatternType");if(1===f){var g=i.base?i.base.getRgb(a,0):null;return this.handleTilingType(t,g,o,l,d,e,c)}if(2===f){var m=d.get("Shading"),p=d.getArray("Matrix");l=u.Pattern.parseShading(m,p,this.xref,o,this.handler,this.pdfFunctionFactory);e.addOp(t,l.getIR());return}throw new r.FormatError(`Unknown PatternType: ${f}`)}throw new r.FormatError(`Unknown PatternName: ${h}`)},getOperatorList({stream:e,task:t,resources:i,operatorList:s,initialState:o=null}){i=i||n.Dict.empty;o=o||new T;if(!s)throw new Error('getOperatorList: missing "operatorList" parameter');var c=this,l=this.xref;let h=!1;var d=Object.create(null),f=i.get("XObject")||n.Dict.empty,m=i.get("Pattern")||n.Dict.empty,p=new I(o),b=new E(e,l,p),y=new a;function v(e){for(var t=0,a=b.savedStatesDepth;t<a;t++)s.addOp(r.OPS.restore,[])}return new Promise((function e(a,o){const w=function(t){Promise.all([t,s.ready]).then((function(){try{e(a,o)}catch(e){o(e)}}),o)};t.ensureNotTerminated();y.reset();for(var k,S,C,A,I={};!(k=y.check());){I.args=null;if(!b.read(I))break;var F=I.args,T=I.fn;switch(0|T){case r.OPS.paintXObject:var E=F[0].name;if(E&&void 0!==d[E]){s.addOp(d[E].fn,d[E].args);F=null;continue}w(new Promise((function(e,a){if(!E)throw new r.FormatError("XObject must be referred to by name.");const o=f.get(E);if(!o){s.addOp(T,F);e();return}if(!(0,n.isStream)(o))throw new r.FormatError("XObject should be a stream");const l=o.dict.get("Subtype");if(!(0,n.isName)(l))throw new r.FormatError("XObject should have a Name subtype");if("Form"!==l.name)if("Image"!==l.name){if("PS"!==l.name)throw new r.FormatError(`Unhandled XObject subtype ${l.name}`);(0,r.info)("Ignored XObject subtype PS");e()}else c.buildPaintImageXObject({resources:i,image:o,operatorList:s,cacheKey:E,imageCache:d}).then(e,a);else{p.save();c.buildFormXObject(i,o,null,s,t,p.state.clone()).then((function(){p.restore();e()}),a)}})).catch((function(e){if(!(e instanceof r.AbortException)){if(!c.options.ignoreErrors)throw e;c.handler.send("UnsupportedFeature",{featureId:r.UNSUPPORTED_FEATURES.unknown});(0,r.warn)(`getOperatorList - ignoring XObject: "${e}".`)}})));return;case r.OPS.setFont:var O=F[1];w(c.handleSetFont(i,F,null,s,t,p.state).then((function(e){s.addDependency(e);s.addOp(r.OPS.setFont,[e,O])})));return;case r.OPS.beginText:h=!0;break;case r.OPS.endText:h=!1;break;case r.OPS.endInlineImage:var P=F[0].cacheKey;if(P){var B=d[P];if(void 0!==B){s.addOp(B.fn,B.args);F=null;continue}}w(c.buildPaintImageXObject({resources:i,image:F[0],isInline:!0,operatorList:s,cacheKey:P,imageCache:d}));return;case r.OPS.showText:if(!p.state.font){c.ensureStateFont(p.state);continue}F[0]=c.handleText(F[0],p.state);break;case r.OPS.showSpacedText:if(!p.state.font){c.ensureStateFont(p.state);continue}var D=F[0],N=[],M=D.length,L=p.state;for(S=0;S<M;++S){var R=D[S];(0,r.isString)(R)?Array.prototype.push.apply(N,c.handleText(R,L)):(0,r.isNum)(R)&&N.push(R)}F[0]=N;T=r.OPS.showText;break;case r.OPS.nextLineShowText:if(!p.state.font){c.ensureStateFont(p.state);continue}s.addOp(r.OPS.nextLine);F[0]=c.handleText(F[0],p.state);T=r.OPS.showText;break;case r.OPS.nextLineSetSpacingShowText:if(!p.state.font){c.ensureStateFont(p.state);continue}s.addOp(r.OPS.nextLine);s.addOp(r.OPS.setWordSpacing,[F.shift()]);s.addOp(r.OPS.setCharSpacing,[F.shift()]);F[0]=c.handleText(F[0],p.state);T=r.OPS.showText;break;case r.OPS.setTextRenderingMode:p.state.textRenderingMode=F[0];break;case r.OPS.setFillColorSpace:w(c.parseColorSpace({cs:F[0],resources:i}).then((function(e){e&&(p.state.fillColorSpace=e)})));return;case r.OPS.setStrokeColorSpace:w(c.parseColorSpace({cs:F[0],resources:i}).then((function(e){e&&(p.state.strokeColorSpace=e)})));return;case r.OPS.setFillColor:A=p.state.fillColorSpace;F=A.getRgb(F,0);T=r.OPS.setFillRGBColor;break;case r.OPS.setStrokeColor:A=p.state.strokeColorSpace;F=A.getRgb(F,0);T=r.OPS.setStrokeRGBColor;break;case r.OPS.setFillGray:p.state.fillColorSpace=g.ColorSpace.singletons.gray;F=g.ColorSpace.singletons.gray.getRgb(F,0);T=r.OPS.setFillRGBColor;break;case r.OPS.setStrokeGray:p.state.strokeColorSpace=g.ColorSpace.singletons.gray;F=g.ColorSpace.singletons.gray.getRgb(F,0);T=r.OPS.setStrokeRGBColor;break;case r.OPS.setFillCMYKColor:p.state.fillColorSpace=g.ColorSpace.singletons.cmyk;F=g.ColorSpace.singletons.cmyk.getRgb(F,0);T=r.OPS.setFillRGBColor;break;case r.OPS.setStrokeCMYKColor:p.state.strokeColorSpace=g.ColorSpace.singletons.cmyk;F=g.ColorSpace.singletons.cmyk.getRgb(F,0);T=r.OPS.setStrokeRGBColor;break;case r.OPS.setFillRGBColor:p.state.fillColorSpace=g.ColorSpace.singletons.rgb;F=g.ColorSpace.singletons.rgb.getRgb(F,0);break;case r.OPS.setStrokeRGBColor:p.state.strokeColorSpace=g.ColorSpace.singletons.rgb;F=g.ColorSpace.singletons.rgb.getRgb(F,0);break;case r.OPS.setFillColorN:if("Pattern"===(A=p.state.fillColorSpace).name){w(c.handleColorN(s,r.OPS.setFillColorN,F,A,m,i,t));return}F=A.getRgb(F,0);T=r.OPS.setFillRGBColor;break;case r.OPS.setStrokeColorN:if("Pattern"===(A=p.state.strokeColorSpace).name){w(c.handleColorN(s,r.OPS.setStrokeColorN,F,A,m,i,t));return}F=A.getRgb(F,0);T=r.OPS.setStrokeRGBColor;break;case r.OPS.shadingFill:var U=i.get("Shading");if(!U)throw new r.FormatError("No shading resource found");var q=U.get(F[0].name);if(!q)throw new r.FormatError("No shading object found");var j=u.Pattern.parseShading(q,null,l,i,c.handler,c.pdfFunctionFactory).getIR();F=[j];T=r.OPS.shadingFill;break;case r.OPS.setGState:var _=F[0],z=i.get("ExtGState");if(!(0,n.isDict)(z)||!z.has(_.name))break;var H=z.get(_.name);w(c.setGState(i,H,s,t,p));return;case r.OPS.moveTo:case r.OPS.lineTo:case r.OPS.curveTo:case r.OPS.curveTo2:case r.OPS.curveTo3:case r.OPS.closePath:case r.OPS.rectangle:c.buildPath(s,T,F,h);continue;case r.OPS.markPoint:case r.OPS.markPointProps:case r.OPS.beginMarkedContent:case r.OPS.beginMarkedContentProps:case r.OPS.endMarkedContent:case r.OPS.beginCompat:case r.OPS.endCompat:continue;default:if(null!==F){for(S=0,C=F.length;S<C&&!(F[S]instanceof n.Dict);S++);if(S<C){(0,r.warn)("getOperatorList - ignoring operator: "+T);continue}}}s.addOp(T,F)}if(k)w(x);else{v();a()}})).catch(e=>{if(!(e instanceof r.AbortException)){if(!this.options.ignoreErrors)throw e;this.handler.send("UnsupportedFeature",{featureId:r.UNSUPPORTED_FEATURES.unknown});(0,r.warn)(`getOperatorList - ignoring errors during "${t.name}" `+`task: "${e}".`);v()}})},getTextContent({stream:e,task:t,resources:i,stateManager:s=null,normalizeWhitespace:o=!1,combineTextItems:c=!1,sink:h,seenStyles:u=Object.create(null)}){i=i||n.Dict.empty;s=s||new I(new F);var d,g=/\s/g,m={items:[],styles:Object.create(null)},p={initialized:!1,str:[],width:0,height:0,vertical:!1,lastAdvanceWidth:0,lastAdvanceHeight:0,textAdvanceScale:0,spaceWidth:0,fakeSpaceMin:1/0,fakeMultiSpaceMin:1/0,fakeMultiSpaceMax:-0,textRunBreakAllowed:!1,transform:null,fontName:null},b=this,y=this.xref,v=null,w=Object.create(null),k=new E(e,y,s);function S(){if(p.initialized)return p;var e=d.font;if(!(e.loadedName in u)){u[e.loadedName]=!0;m.styles[e.loadedName]={fontFamily:e.fallbackName,ascent:e.ascent,descent:e.descent,vertical:!!e.vertical}}p.fontName=e.loadedName;var t=[d.fontSize*d.textHScale,0,0,d.fontSize,0,d.textRise];if(e.isType3Font&&d.fontSize<=1&&!(0,r.isArrayEqual)(d.fontMatrix,r.FONT_IDENTITY_MATRIX)){const a=e.bbox[3]-e.bbox[1];a>0&&(t[3]*=a*d.fontMatrix[3])}var a=r.Util.transform(d.ctm,r.Util.transform(d.textMatrix,t));p.transform=a;if(e.vertical){p.width=Math.sqrt(a[0]*a[0]+a[1]*a[1]);p.height=0;p.vertical=!0}else{p.width=0;p.height=Math.sqrt(a[2]*a[2]+a[3]*a[3]);p.vertical=!1}var i=d.textLineMatrix[0],n=d.textLineMatrix[1],s=Math.sqrt(i*i+n*n);i=d.ctm[0];n=d.ctm[1];var o=Math.sqrt(i*i+n*n);p.textAdvanceScale=o*s;p.lastAdvanceWidth=0;p.lastAdvanceHeight=0;var c=e.spaceWidth/1e3*d.fontSize;if(c){p.spaceWidth=c;p.fakeSpaceMin=.3*c;p.fakeMultiSpaceMin=1.5*c;p.fakeMultiSpaceMax=4*c;p.textRunBreakAllowed=!e.isMonospace}else{p.spaceWidth=0;p.fakeSpaceMin=1/0;p.fakeMultiSpaceMin=1/0;p.fakeMultiSpaceMax=0;p.textRunBreakAllowed=!1}p.initialized=!0;return p}function C(e){for(var t,a=0,r=e.length;a<r&&(t=e.charCodeAt(a))>=32&&t<=127;)a++;return a<r?e.replace(g," "):e}function A(e,t){return b.loadFont(e,t,i).then((function(e){d.font=e.font;d.fontMatrix=e.font.fontMatrix||r.FONT_IDENTITY_MATRIX}))}function T(e){for(var t=d.font,a=S(),r=0,i=0,n=t.charsToGlyphs(e),s=0;s<n.length;s++){var o=n[s],c=null;c=t.vertical&&o.vmetric?o.vmetric[0]:o.width;var h=o.unicode,u=(0,l.getNormalizedUnicodes)();void 0!==u[h]&&(h=u[h]);h=(0,l.reverseIfRtl)(h);var f=d.charSpacing;if(o.isSpace){var g=d.wordSpacing;f+=g;g>0&&O(g,a.str)}var m=0,p=0;if(t.vertical){i+=p=c*d.fontMatrix[0]*d.fontSize+f}else{r+=m=(c*d.fontMatrix[0]*d.fontSize+f)*d.textHScale}d.translateTextMatrix(m,p);a.str.push(h)}if(t.vertical){a.lastAdvanceHeight=i;a.height+=Math.abs(i)}else{a.lastAdvanceWidth=r;a.width+=r}return a}function O(e,t){if(!(e<p.fakeSpaceMin))if(e<p.fakeMultiSpaceMin)t.push(" ");else for(var a=Math.round(e/p.spaceWidth);a-- >0;)t.push(" ")}function P(){if(p.initialized){p.vertical?p.height*=p.textAdvanceScale:p.width*=p.textAdvanceScale;m.items.push((t=(e=p).str.join(""),a=(0,f.bidi)(t,-1,e.vertical),{str:o?C(a.str):a.str,dir:a.dir,width:e.width,height:e.height,transform:e.transform,fontName:e.fontName}));var e,t,a;p.initialized=!1;p.str.length=0}}function B(){const e=m.items.length;if(e>0){h.enqueue(m,e);m.items=[];m.styles=Object.create(null)}}var D=new a;return new Promise((function e(a,l){const f=function(t){B();Promise.all([t,h.ready]).then((function(){try{e(a,l)}catch(e){l(e)}}),l)};t.ensureNotTerminated();D.reset();for(var g,y={},C=[];!(g=D.check());){C.length=0;y.args=C;if(!k.read(y))break;d=s.state;var F,E=y.fn;C=y.args;switch(0|E){case r.OPS.setFont:var N=C[0].name,M=C[1];if(d.font&&N===d.fontName&&M===d.fontSize)break;P();d.fontName=N;d.fontSize=M;f(A(N,null));return;case r.OPS.setTextRise:P();d.textRise=C[0];break;case r.OPS.setHScale:P();d.textHScale=C[0]/100;break;case r.OPS.setLeading:P();d.leading=C[0];break;case r.OPS.moveText:var L=!!d.font&&0===(d.font.vertical?C[0]:C[1]);F=C[0]-C[1];if(c&&L&&p.initialized&&F>0&&F<=p.fakeMultiSpaceMax){d.translateTextLineMatrix(C[0],C[1]);p.width+=C[0]-p.lastAdvanceWidth;p.height+=C[1]-p.lastAdvanceHeight;O(C[0]-p.lastAdvanceWidth-(C[1]-p.lastAdvanceHeight),p.str);break}P();d.translateTextLineMatrix(C[0],C[1]);d.textMatrix=d.textLineMatrix.slice();break;case r.OPS.setLeadingMoveText:P();d.leading=-C[1];d.translateTextLineMatrix(C[0],C[1]);d.textMatrix=d.textLineMatrix.slice();break;case r.OPS.nextLine:P();d.carriageReturn();break;case r.OPS.setTextMatrix:F=d.calcTextLineMatrixAdvance(C[0],C[1],C[2],C[3],C[4],C[5]);if(c&&null!==F&&p.initialized&&F.value>0&&F.value<=p.fakeMultiSpaceMax){d.translateTextLineMatrix(F.width,F.height);p.width+=F.width-p.lastAdvanceWidth;p.height+=F.height-p.lastAdvanceHeight;O(F.width-p.lastAdvanceWidth-(F.height-p.lastAdvanceHeight),p.str);break}P();d.setTextMatrix(C[0],C[1],C[2],C[3],C[4],C[5]);d.setTextLineMatrix(C[0],C[1],C[2],C[3],C[4],C[5]);break;case r.OPS.setCharSpacing:d.charSpacing=C[0];break;case r.OPS.setWordSpacing:d.wordSpacing=C[0];break;case r.OPS.beginText:P();d.textMatrix=r.IDENTITY_MATRIX.slice();d.textLineMatrix=r.IDENTITY_MATRIX.slice();break;case r.OPS.showSpacedText:if(!s.state.font){b.ensureStateFont(s.state);continue}for(var R,U=C[0],q=0,j=U.length;q<j;q++)if("string"==typeof U[q])T(U[q]);else if((0,r.isNum)(U[q])){S();F=U[q]*d.fontSize/1e3;var _=!1;if(d.font.vertical){R=F;d.translateTextMatrix(0,R);(_=p.textRunBreakAllowed&&F>p.fakeMultiSpaceMax)||(p.height+=R)}else{R=(F=-F)*d.textHScale;d.translateTextMatrix(R,0);(_=p.textRunBreakAllowed&&F>p.fakeMultiSpaceMax)||(p.width+=R)}_?P():F>0&&O(F,p.str)}break;case r.OPS.showText:if(!s.state.font){b.ensureStateFont(s.state);continue}T(C[0]);break;case r.OPS.nextLineShowText:if(!s.state.font){b.ensureStateFont(s.state);continue}P();d.carriageReturn();T(C[0]);break;case r.OPS.nextLineSetSpacingShowText:if(!s.state.font){b.ensureStateFont(s.state);continue}P();d.wordSpacing=C[0];d.charSpacing=C[1];d.carriageReturn();T(C[2]);break;case r.OPS.paintXObject:P();v||(v=i.get("XObject")||n.Dict.empty);var z=C[0].name;if(z&&void 0!==w[z])break;f(new Promise((function(e,a){if(!z)throw new r.FormatError("XObject must be referred to by name.");const l=v.get(z);if(!l){e();return}if(!(0,n.isStream)(l))throw new r.FormatError("XObject should be a stream");const d=l.dict.get("Subtype");if(!(0,n.isName)(d))throw new r.FormatError("XObject should have a Name subtype");if("Form"!==d.name){w[z]=!0;e();return}const f=s.state.clone(),g=new I(f),m=l.dict.getArray("Matrix");Array.isArray(m)&&6===m.length&&g.transform(m);B();const p={enqueueInvoked:!1,enqueue(e,t){this.enqueueInvoked=!0;h.enqueue(e,t)},get desiredSize(){return h.desiredSize},get ready(){return h.ready}};b.getTextContent({stream:l,task:t,resources:l.dict.get("Resources")||i,stateManager:g,normalizeWhitespace:o,combineTextItems:c,sink:p,seenStyles:u}).then((function(){p.enqueueInvoked||(w[z]=!0);e()}),a)})).catch((function(e){if(!(e instanceof r.AbortException)){if(!b.options.ignoreErrors)throw e;(0,r.warn)(`getTextContent - ignoring XObject: "${e}".`)}})));return;case r.OPS.setGState:P();var H=C[0],G=i.get("ExtGState");if(!(0,n.isDict)(G)||!(0,n.isName)(H))break;var W=G.get(H.name);if(!(0,n.isDict)(W))break;var X=W.get("Font");if(X){d.fontName=null;d.fontSize=X[1];f(A(null,X[0]));return}}if(m.items.length>=h.desiredSize){g=!0;break}}if(g)f(x);else{P();B();a()}})).catch(e=>{if(!(e instanceof r.AbortException)){if(!this.options.ignoreErrors)throw e;(0,r.warn)(`getTextContent - ignoring errors during "${t.name}" `+`task: "${e}".`);P();B()}})},extractDataStructures:function(e,t,a){const i=this.xref;let c;var l=e.get("ToUnicode")||t.get("ToUnicode"),h=l?this.readToUnicode(l):Promise.resolve(void 0);if(a.composite){var u=e.get("CIDSystemInfo");(0,n.isDict)(u)&&(a.cidSystemInfo={registry:(0,r.stringToPDFString)(u.get("Registry")),ordering:(0,r.stringToPDFString)(u.get("Ordering")),supplement:u.get("Supplement")});var d=e.get("CIDToGIDMap");(0,n.isStream)(d)&&(c=d.getBytes())}var f,g=[],m=null;if(e.has("Encoding")){f=e.get("Encoding");if((0,n.isDict)(f)){m=f.get("BaseEncoding");m=(0,n.isName)(m)?m.name:null;if(f.has("Differences"))for(var p=f.get("Differences"),b=0,y=0,v=p.length;y<v;y++){var w=i.fetchIfRef(p[y]);if((0,r.isNum)(w))b=w;else{if(!(0,n.isName)(w))throw new r.FormatError(`Invalid entry in 'Differences' array: ${w}`);g[b++]=w.name}}}else{if(!(0,n.isName)(f))throw new r.FormatError("Encoding is not a Name nor a Dict");m=f.name}"MacRomanEncoding"!==m&&"MacExpertEncoding"!==m&&"WinAnsiEncoding"!==m&&(m=null)}if(m)a.defaultEncoding=(0,o.getEncoding)(m).slice();else{var k=!!(a.flags&s.FontFlags.Symbolic),S=!!(a.flags&s.FontFlags.Nonsymbolic);f=o.StandardEncoding;"TrueType"!==a.type||S||(f=o.WinAnsiEncoding);if(k){f=o.MacRomanEncoding;a.file||(/Symbol/i.test(a.name)?f=o.SymbolSetEncoding:/Dingbats|Wingdings/i.test(a.name)&&(f=o.ZapfDingbatsEncoding))}a.defaultEncoding=f}a.differences=g;a.baseEncodingName=m;a.hasEncoding=!!m||g.length>0;a.dict=e;return h.then(e=>{a.toUnicode=e;return this.buildToUnicode(a)}).then(e=>{a.toUnicode=e;c&&(a.cidToGidMap=this.readCidToGidMap(c,e));return a})},_buildSimpleFontToUnicode(e,t=!1){(0,r.assert)(!e.composite,"Must be a simple font.");const a=[],i=e.defaultEncoding.slice(),n=e.baseEncodingName,c=e.differences;for(const e in c){const t=c[e];".notdef"!==t&&(i[e]=t)}const h=(0,p.getGlyphsUnicode)();for(const r in i){let s=i[r];if(""!==s)if(void 0!==h[s])a[r]=String.fromCharCode(h[s]);else{let i=0;switch(s[0]){case"G":3===s.length&&(i=parseInt(s.substring(1),16));break;case"g":5===s.length&&(i=parseInt(s.substring(1),16));break;case"C":case"c":if(s.length>=3&&s.length<=4){const a=s.substring(1);if(t){i=parseInt(a,16);break}i=+a;if(Number.isNaN(i)&&Number.isInteger(parseInt(a,16)))return this._buildSimpleFontToUnicode(e,!0)}break;default:const a=(0,l.getUnicodeForGlyph)(s,h);-1!==a&&(i=a)}if(i>0&&Number.isInteger(i)){if(n&&i===+r){const e=(0,o.getEncoding)(n);if(e&&(s=e[r])){a[r]=String.fromCharCode(h[s]);continue}}a[r]=String.fromCodePoint(i)}}}return new s.ToUnicodeMap(a)},buildToUnicode(e){e.hasIncludedToUnicodeMap=!!e.toUnicode&&e.toUnicode.length>0;if(e.hasIncludedToUnicodeMap){!e.composite&&e.hasEncoding&&(e.fallbackToUnicode=this._buildSimpleFontToUnicode(e));return Promise.resolve(e.toUnicode)}if(!e.composite)return Promise.resolve(this._buildSimpleFontToUnicode(e));if(e.composite&&(e.cMap.builtInCMap&&!(e.cMap instanceof i.IdentityCMap)||"Adobe"===e.cidSystemInfo.registry&&("GB1"===e.cidSystemInfo.ordering||"CNS1"===e.cidSystemInfo.ordering||"Japan1"===e.cidSystemInfo.ordering||"Korea1"===e.cidSystemInfo.ordering))){const t=e.cidSystemInfo.registry,a=e.cidSystemInfo.ordering,o=n.Name.get(t+"-"+a+"-UCS2");return i.CMapFactory.create({encoding:o,fetchBuiltInCMap:this.fetchBuiltInCMap,useCMap:null}).then((function(t){const a=e.cMap,i=[];a.forEach((function(e,a){if(a>65535)throw new r.FormatError("Max size of CID is 65,535");const n=t.lookup(a);n&&(i[e]=String.fromCharCode((n.charCodeAt(0)<<8)+n.charCodeAt(1)))}));return new s.ToUnicodeMap(i)}))}return Promise.resolve(new s.IdentityToUnicodeMap(e.firstChar,e.lastChar))},readToUnicode:function(e){var t=e;return(0,n.isName)(t)?i.CMapFactory.create({encoding:t,fetchBuiltInCMap:this.fetchBuiltInCMap,useCMap:null}).then((function(e){return e instanceof i.IdentityCMap?new s.IdentityToUnicodeMap(0,65535):new s.ToUnicodeMap(e.getMap())})):(0,n.isStream)(t)?i.CMapFactory.create({encoding:t,fetchBuiltInCMap:this.fetchBuiltInCMap,useCMap:null}).then((function(e){if(e instanceof i.IdentityCMap)return new s.IdentityToUnicodeMap(0,65535);var t=new Array(e.length);e.forEach((function(e,a){for(var r=[],i=0;i<a.length;i+=2){var n=a.charCodeAt(i)<<8|a.charCodeAt(i+1);if(55296==(63488&n)){i+=2;var s=a.charCodeAt(i)<<8|a.charCodeAt(i+1);r.push(((1023&n)<<10)+(1023&s)+65536)}else r.push(n)}t[e]=String.fromCodePoint.apply(String,r)}));return new s.ToUnicodeMap(t)}),e=>{if(e instanceof r.AbortException)return null;if(this.options.ignoreErrors){this.handler.send("UnsupportedFeature",{featureId:r.UNSUPPORTED_FEATURES.font});(0,r.warn)(`readToUnicode - ignoring ToUnicode data: "${e}".`);return null}throw e}):Promise.resolve(null)},readCidToGidMap(e,t){for(var a=[],r=0,i=e.length;r<i;r++){var n=e[r++]<<8|e[r];const i=r>>1;(0!==n||t.has(i))&&(a[i]=n)}return a},extractWidths:function(e,t,a){var r,i,o,c,l,h,u,d,f=this.xref,g=[],m=0,p=[];if(a.composite){m=e.has("DW")?e.get("DW"):1e3;if(d=e.get("W"))for(i=0,o=d.length;i<o;i++){h=f.fetchIfRef(d[i++]);u=f.fetchIfRef(d[i]);if(Array.isArray(u))for(c=0,l=u.length;c<l;c++)g[h++]=f.fetchIfRef(u[c]);else{var b=f.fetchIfRef(d[++i]);for(c=h;c<=u;c++)g[c]=b}}if(a.vertical){var y=e.getArray("DW2")||[880,-1e3];r=[y[1],.5*m,y[0]];if(y=e.get("W2"))for(i=0,o=y.length;i<o;i++){h=f.fetchIfRef(y[i++]);u=f.fetchIfRef(y[i]);if(Array.isArray(u))for(c=0,l=u.length;c<l;c++)p[h++]=[f.fetchIfRef(u[c++]),f.fetchIfRef(u[c++]),f.fetchIfRef(u[c])];else{var v=[f.fetchIfRef(y[++i]),f.fetchIfRef(y[++i]),f.fetchIfRef(y[++i])];for(c=h;c<=u;c++)p[c]=v}}}}else{var w=a.firstChar;if(d=e.get("Widths")){c=w;for(i=0,o=d.length;i<o;i++)g[c++]=f.fetchIfRef(d[i]);m=parseFloat(t.get("MissingWidth"))||0}else{var k=e.get("BaseFont");if((0,n.isName)(k)){var S=this.getBaseFontMetrics(k.name);g=this.buildCharCodeToWidth(S.widths,a);m=S.defaultWidth}}}var C=!0,x=m;for(var A in g){var I=g[A];if(I)if(x){if(x!==I){C=!1;break}}else x=I}C&&(a.flags|=s.FontFlags.FixedPitch);a.defaultWidth=m;a.widths=g;a.defaultVMetrics=r;a.vmetrics=p},isSerifFont:function(e){var t=e.split("-")[0];return t in(0,h.getSerifFonts)()||-1!==t.search(/serif/gi)},getBaseFontMetrics:function(e){var t=0,a=[],i=!1,n=(0,h.getStdFontMap)()[e]||e,s=(0,b.getMetrics)();n in s||(n=this.isSerifFont(e)?"Times-Roman":"Helvetica");var o=s[n];if((0,r.isNum)(o)){t=o;i=!0}else a=o();return{defaultWidth:t,monospace:i,widths:a}},buildCharCodeToWidth:function(e,t){for(var a=Object.create(null),r=t.differences,i=t.defaultEncoding,n=0;n<256;n++)n in r&&e[r[n]]?a[n]=e[r[n]]:n in i&&e[i[n]]&&(a[n]=e[i[n]]);return a},preEvaluateFont:function(e){var t=e,a=e.get("Subtype");if(!(0,n.isName)(a))throw new r.FormatError("invalid font Subtype");var i,s=!1;if("Type0"===a.name){var o=e.get("DescendantFonts");if(!o)throw new r.FormatError("Descendant fonts are not specified");a=(e=Array.isArray(o)?this.xref.fetchIfRef(o[0]):o).get("Subtype");if(!(0,n.isName)(a))throw new r.FormatError("invalid font Subtype");s=!0}var c=e.get("FontDescriptor");if(c){var l=new w.MurmurHash3_64,h=t.getRaw("Encoding");if((0,n.isName)(h))l.update(h.name);else if((0,n.isRef)(h))l.update(h.toString());else if((0,n.isDict)(h))for(var u=h.getKeys(),d=0,f=u.length;d<f;d++){var g=h.getRaw(u[d]);if((0,n.isName)(g))l.update(g.name);else if((0,n.isRef)(g))l.update(g.toString());else if(Array.isArray(g)){for(var m=g.length,p=new Array(m),b=0;b<m;b++){var y=g[b];(0,n.isName)(y)?p[b]=y.name:((0,r.isNum)(y)||(0,n.isRef)(y))&&(p[b]=y.toString())}l.update(p.join())}}const a=e.get("FirstChar")||0,o=e.get("LastChar")||(s?65535:255);l.update(`${a}-${o}`);var v=e.get("ToUnicode")||t.get("ToUnicode");if((0,n.isStream)(v)){var k=v.str||v;i=k.buffer?new Uint8Array(k.buffer.buffer,0,k.bufferLength):new Uint8Array(k.bytes.buffer,k.start,k.end-k.start);l.update(i)}else(0,n.isName)(v)&&l.update(v.name);var S=e.get("Widths")||t.get("Widths");if(S){i=new Uint8Array(new Uint32Array(S).buffer);l.update(i)}}return{descriptor:c,dict:e,baseDict:t,composite:s,type:a.name,hash:l?l.hexdigest():""}},translateFont:function(e){var t,a=e.baseDict,o=e.dict,c=e.composite,l=e.descriptor,u=e.type,d=c?65535:255;const f=o.get("FirstChar")||0,g=o.get("LastChar")||d;if(!l){if("Type3"!==u){var m=o.get("BaseFont");if(!(0,n.isName)(m))throw new r.FormatError("Base font is not specified");m=m.name.replace(/[,_]/g,"-");var p=this.getBaseFontMetrics(m),b=m.split("-")[0],y=(this.isSerifFont(b)?s.FontFlags.Serif:0)|(p.monospace?s.FontFlags.FixedPitch:0)|((0,h.getSymbolsFonts)()[b]?s.FontFlags.Symbolic:s.FontFlags.Nonsymbolic);t={type:u,name:m,widths:p.widths,defaultWidth:p.defaultWidth,flags:y,firstChar:f,lastChar:g};const e=o.get("Widths");return this.extractDataStructures(o,o,t).then(t=>{if(e){const a=[];let r=f;for(let t=0,i=e.length;t<i;t++)a[r++]=this.xref.fetchIfRef(e[t]);t.widths=a}else t.widths=this.buildCharCodeToWidth(p.widths,t);return new s.Font(m,null,t)})}(l=new n.Dict(null)).set("FontName",n.Name.get(u));l.set("FontBBox",o.getArray("FontBBox")||[0,0,0,0])}var v=l.get("FontName"),w=o.get("BaseFont");(0,r.isString)(v)&&(v=n.Name.get(v));(0,r.isString)(w)&&(w=n.Name.get(w));if("Type3"!==u){var k=v&&v.name,S=w&&w.name;if(k!==S){(0,r.info)(`The FontDescriptor's FontName is "${k}" but `+`should be the same as the Font's BaseFont "${S}".`);k&&S&&S.startsWith(k)&&(v=w)}}v=v||w;if(!(0,n.isName)(v))throw new r.FormatError("invalid font name");var C,x=l.get("FontFile","FontFile2","FontFile3");if(x&&x.dict){var A=x.dict.get("Subtype");A&&(A=A.name);var I=x.dict.get("Length1"),F=x.dict.get("Length2"),T=x.dict.get("Length3")}t={type:u,name:v.name,subtype:A,file:x,length1:I,length2:F,length3:T,loadedName:a.loadedName,composite:c,wideChars:c,fixedPitch:!1,fontMatrix:o.getArray("FontMatrix")||r.FONT_IDENTITY_MATRIX,firstChar:f||0,lastChar:g||d,bbox:l.getArray("FontBBox"),ascent:l.get("Ascent"),descent:l.get("Descent"),xHeight:l.get("XHeight"),capHeight:l.get("CapHeight"),flags:l.get("Flags"),italicAngle:l.get("ItalicAngle"),isType3Font:!1};if(c){var E=a.get("Encoding");(0,n.isName)(E)&&(t.cidEncoding=E.name);C=i.CMapFactory.create({encoding:E,fetchBuiltInCMap:this.fetchBuiltInCMap,useCMap:null}).then((function(e){t.cMap=e;t.vertical=t.cMap.vertical}))}else C=Promise.resolve(void 0);return C.then(()=>this.extractDataStructures(o,a,t)).then(e=>{this.extractWidths(o,l,e);"Type3"===u&&(e.isType3Font=!0);return new s.Font(v.name,x,e)})}};t.buildFontPaths=function(e,t,a){function r(t){e.renderer.hasBuiltPath(t)||a.send("commonobj",[`${e.loadedName}_path_${t}`,"FontPath",e.renderer.getPathJs(t)])}for(const e of t){r(e.fontChar);const t=e.accent;t&&t.fontChar&&r(t.fontChar)}};t.getFallbackFontDict=function(){if(this._fallbackFontDict)return this._fallbackFontDict;const e=new n.Dict;e.set("BaseFont",n.Name.get("PDFJS-FallbackFont"));e.set("Type",n.Name.get("FallbackType"));e.set("Subtype",n.Name.get("FallbackType"));e.set("Encoding",n.Name.get("WinAnsiEncoding"));return this._fallbackFontDict=e};return t}();t.PartialEvaluator=x;var A=function(){function e(e,t,a){this.loadedName=e;this.font=t;this.dict=a;this.type3Loaded=null;this.sent=!1}e.prototype={send(e){if(!this.sent){this.sent=!0;e.send("commonobj",[this.loadedName,"Font",this.font.exportData()])}},fallback(e){if(!this.font.data)return;this.font.disableFontFace=!0;const t=this.font.glyphCacheValues;x.buildFontPaths(this.font,t,e)},loadType3Data(e,t,a,i){if(!this.font.isType3Font)throw new Error("Must be a Type3 font.");if(this.type3Loaded)return this.type3Loaded;var n=Object.create(e.options);n.ignoreErrors=!1;n.nativeImageDecoderSupport=r.NativeImageDecoding.NONE;var s=e.clone(n);s.parsingType3Font=!0;for(var o=this.font,c=Promise.resolve(),l=this.dict.get("CharProcs"),h=this.dict.get("Resources")||t,u=l.getKeys(),d=Object.create(null),f=0,g=u.length;f<g;++f){const e=u[f];c=c.then((function(){var t=l.get(e),n=new S.OperatorList;return s.getOperatorList({stream:t,task:i,resources:h,operatorList:n}).then((function(){d[e]=n.getIR();a.addDependencies(n.dependencies)})).catch((function(t){(0,r.warn)(`Type3 font resource "${e}" is not available.`);var a=new S.OperatorList;d[e]=a.getIR()}))}))}this.type3Loaded=c.then((function(){o.charProcOperatorList=d}));return this.type3Loaded}};return e}(),I=function(){function e(e){this.state=e;this.stateStack=[]}e.prototype={save(){var e=this.state;this.stateStack.push(this.state);this.state=e.clone()},restore(){var e=this.stateStack.pop();e&&(this.state=e)},transform(e){this.state.ctm=r.Util.transform(this.state.ctm,e)}};return e}(),F=function(){function e(){this.ctm=new Float32Array(r.IDENTITY_MATRIX);this.fontName=null;this.fontSize=0;this.font=null;this.fontMatrix=r.FONT_IDENTITY_MATRIX;this.textMatrix=r.IDENTITY_MATRIX.slice();this.textLineMatrix=r.IDENTITY_MATRIX.slice();this.charSpacing=0;this.wordSpacing=0;this.leading=0;this.textHScale=1;this.textRise=0}e.prototype={setTextMatrix:function(e,t,a,r,i,n){var s=this.textMatrix;s[0]=e;s[1]=t;s[2]=a;s[3]=r;s[4]=i;s[5]=n},setTextLineMatrix:function(e,t,a,r,i,n){var s=this.textLineMatrix;s[0]=e;s[1]=t;s[2]=a;s[3]=r;s[4]=i;s[5]=n},translateTextMatrix:function(e,t){var a=this.textMatrix;a[4]=a[0]*e+a[2]*t+a[4];a[5]=a[1]*e+a[3]*t+a[5]},translateTextLineMatrix:function(e,t){var a=this.textLineMatrix;a[4]=a[0]*e+a[2]*t+a[4];a[5]=a[1]*e+a[3]*t+a[5]},calcTextLineMatrixAdvance:function(e,t,a,r,i,n){var s=this.font;if(!s)return null;var o=this.textLineMatrix;if(e!==o[0]||t!==o[1]||a!==o[2]||r!==o[3])return null;var c=i-o[4],l=n-o[5];if(s.vertical&&0!==c||!s.vertical&&0!==l)return null;var h,u,d=e*r-t*a;if(s.vertical){h=-l*a/d;u=l*e/d}else{h=c*r/d;u=-c*t/d}return{width:h,height:u,value:s.vertical?u:h}},calcRenderMatrix:function(e){var t=[this.fontSize*this.textHScale,0,0,this.fontSize,0,this.textRise];return r.Util.transform(e,r.Util.transform(this.textMatrix,t))},carriageReturn:function(){this.translateTextLineMatrix(0,-this.leading);this.textMatrix=this.textLineMatrix.slice()},clone:function(){var e=Object.create(this);e.textMatrix=this.textMatrix.slice();e.textLineMatrix=this.textLineMatrix.slice();e.fontMatrix=this.fontMatrix.slice();return e}};return e}(),T=function(){function e(){this.ctm=new Float32Array(r.IDENTITY_MATRIX);this.font=null;this.textRenderingMode=r.TextRenderingMode.FILL;this.fillColorSpace=g.ColorSpace.singletons.gray;this.strokeColorSpace=g.ColorSpace.singletons.gray}e.prototype={clone:function(){return Object.create(this)}};return e}(),E=function(){var e=(0,c.getLookupTableFactory)((function(e){e.w={id:r.OPS.setLineWidth,numArgs:1,variableArgs:!1};e.J={id:r.OPS.setLineCap,numArgs:1,variableArgs:!1};e.j={id:r.OPS.setLineJoin,numArgs:1,variableArgs:!1};e.M={id:r.OPS.setMiterLimit,numArgs:1,variableArgs:!1};e.d={id:r.OPS.setDash,numArgs:2,variableArgs:!1};e.ri={id:r.OPS.setRenderingIntent,numArgs:1,variableArgs:!1};e.i={id:r.OPS.setFlatness,numArgs:1,variableArgs:!1};e.gs={id:r.OPS.setGState,numArgs:1,variableArgs:!1};e.q={id:r.OPS.save,numArgs:0,variableArgs:!1};e.Q={id:r.OPS.restore,numArgs:0,variableArgs:!1};e.cm={id:r.OPS.transform,numArgs:6,variableArgs:!1};e.m={id:r.OPS.moveTo,numArgs:2,variableArgs:!1};e.l={id:r.OPS.lineTo,numArgs:2,variableArgs:!1};e.c={id:r.OPS.curveTo,numArgs:6,variableArgs:!1};e.v={id:r.OPS.curveTo2,numArgs:4,variableArgs:!1};e.y={id:r.OPS.curveTo3,numArgs:4,variableArgs:!1};e.h={id:r.OPS.closePath,numArgs:0,variableArgs:!1};e.re={id:r.OPS.rectangle,numArgs:4,variableArgs:!1};e.S={id:r.OPS.stroke,numArgs:0,variableArgs:!1};e.s={id:r.OPS.closeStroke,numArgs:0,variableArgs:!1};e.f={id:r.OPS.fill,numArgs:0,variableArgs:!1};e.F={id:r.OPS.fill,numArgs:0,variableArgs:!1};e["f*"]={id:r.OPS.eoFill,numArgs:0,variableArgs:!1};e.B={id:r.OPS.fillStroke,numArgs:0,variableArgs:!1};e["B*"]={id:r.OPS.eoFillStroke,numArgs:0,variableArgs:!1};e.b={id:r.OPS.closeFillStroke,numArgs:0,variableArgs:!1};e["b*"]={id:r.OPS.closeEOFillStroke,numArgs:0,variableArgs:!1};e.n={id:r.OPS.endPath,numArgs:0,variableArgs:!1};e.W={id:r.OPS.clip,numArgs:0,variableArgs:!1};e["W*"]={id:r.OPS.eoClip,numArgs:0,variableArgs:!1};e.BT={id:r.OPS.beginText,numArgs:0,variableArgs:!1};e.ET={id:r.OPS.endText,numArgs:0,variableArgs:!1};e.Tc={id:r.OPS.setCharSpacing,numArgs:1,variableArgs:!1};e.Tw={id:r.OPS.setWordSpacing,numArgs:1,variableArgs:!1};e.Tz={id:r.OPS.setHScale,numArgs:1,variableArgs:!1};e.TL={id:r.OPS.setLeading,numArgs:1,variableArgs:!1};e.Tf={id:r.OPS.setFont,numArgs:2,variableArgs:!1};e.Tr={id:r.OPS.setTextRenderingMode,numArgs:1,variableArgs:!1};e.Ts={id:r.OPS.setTextRise,numArgs:1,variableArgs:!1};e.Td={id:r.OPS.moveText,numArgs:2,variableArgs:!1};e.TD={id:r.OPS.setLeadingMoveText,numArgs:2,variableArgs:!1};e.Tm={id:r.OPS.setTextMatrix,numArgs:6,variableArgs:!1};e["T*"]={id:r.OPS.nextLine,numArgs:0,variableArgs:!1};e.Tj={id:r.OPS.showText,numArgs:1,variableArgs:!1};e.TJ={id:r.OPS.showSpacedText,numArgs:1,variableArgs:!1};e["'"]={id:r.OPS.nextLineShowText,numArgs:1,variableArgs:!1};e['"']={id:r.OPS.nextLineSetSpacingShowText,numArgs:3,variableArgs:!1};e.d0={id:r.OPS.setCharWidth,numArgs:2,variableArgs:!1};e.d1={id:r.OPS.setCharWidthAndBounds,numArgs:6,variableArgs:!1};e.CS={id:r.OPS.setStrokeColorSpace,numArgs:1,variableArgs:!1};e.cs={id:r.OPS.setFillColorSpace,numArgs:1,variableArgs:!1};e.SC={id:r.OPS.setStrokeColor,numArgs:4,variableArgs:!0};e.SCN={id:r.OPS.setStrokeColorN,numArgs:33,variableArgs:!0};e.sc={id:r.OPS.setFillColor,numArgs:4,variableArgs:!0};e.scn={id:r.OPS.setFillColorN,numArgs:33,variableArgs:!0};e.G={id:r.OPS.setStrokeGray,numArgs:1,variableArgs:!1};e.g={id:r.OPS.setFillGray,numArgs:1,variableArgs:!1};e.RG={id:r.OPS.setStrokeRGBColor,numArgs:3,variableArgs:!1};e.rg={id:r.OPS.setFillRGBColor,numArgs:3,variableArgs:!1};e.K={id:r.OPS.setStrokeCMYKColor,numArgs:4,variableArgs:!1};e.k={id:r.OPS.setFillCMYKColor,numArgs:4,variableArgs:!1};e.sh={id:r.OPS.shadingFill,numArgs:1,variableArgs:!1};e.BI={id:r.OPS.beginInlineImage,numArgs:0,variableArgs:!1};e.ID={id:r.OPS.beginImageData,numArgs:0,variableArgs:!1};e.EI={id:r.OPS.endInlineImage,numArgs:1,variableArgs:!1};e.Do={id:r.OPS.paintXObject,numArgs:1,variableArgs:!1};e.MP={id:r.OPS.markPoint,numArgs:1,variableArgs:!1};e.DP={id:r.OPS.markPointProps,numArgs:2,variableArgs:!1};e.BMC={id:r.OPS.beginMarkedContent,numArgs:1,variableArgs:!1};e.BDC={id:r.OPS.beginMarkedContentProps,numArgs:2,variableArgs:!1};e.EMC={id:r.OPS.endMarkedContent,numArgs:0,variableArgs:!1};e.BX={id:r.OPS.beginCompat,numArgs:0,variableArgs:!1};e.EX={id:r.OPS.endCompat,numArgs:0,variableArgs:!1};e.BM=null;e.BD=null;e.true=null;e.fa=null;e.fal=null;e.fals=null;e.false=null;e.nu=null;e.nul=null;e.null=null}));function t(t,a,r){this.opMap=e();this.parser=new d.Parser({lexer:new d.Lexer(t,this.opMap),xref:a});this.stateManager=r;this.nonProcessedArgs=[];this._numInvalidPathOPS=0}t.prototype={get savedStatesDepth(){return this.stateManager.stateStack.length},read:function(e){for(var t=e.args;;){var a=this.parser.getObj();if(a instanceof n.Cmd){var i=a.cmd,s=this.opMap[i];if(!s){(0,r.warn)(`Unknown command "${i}".`);continue}var o=s.id,c=s.numArgs,l=null!==t?t.length:0;if(s.variableArgs)l>c&&(0,r.info)(`Command ${i}: expected [0, ${c}] args, `+`but received ${l} args.`);else{if(l!==c){for(var h=this.nonProcessedArgs;l>c;){h.push(t.shift());l--}for(;l<c&&0!==h.length;){null===t&&(t=[]);t.unshift(h.pop());l++}}if(l<c){const e=`command ${i}: expected ${c} args, `+`but received ${l} args.`;if(o>=r.OPS.moveTo&&o<=r.OPS.endPath&&++this._numInvalidPathOPS>20)throw new r.FormatError(`Invalid ${e}`);(0,r.warn)(`Skipping ${e}`);null!==t&&(t.length=0);continue}}this.preprocessCommand(o,t);e.fn=o;e.args=t;return!0}if(a===n.EOF)return!1;if(null!==a){null===t&&(t=[]);t.push(a);if(t.length>33)throw new r.FormatError("Too many arguments")}}},preprocessCommand:function(e,t){switch(0|e){case r.OPS.save:this.stateManager.save();break;case r.OPS.restore:this.stateManager.restore();break;case r.OPS.transform:this.stateManager.transform(t)}}};return t}()},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.CMapFactory=t.IdentityCMap=t.CMap=void 0;var r=a(2),i=a(4),n=a(10),s=a(7),o=a(11),c=["Adobe-GB1-UCS2","Adobe-CNS1-UCS2","Adobe-Japan1-UCS2","Adobe-Korea1-UCS2","78-EUC-H","78-EUC-V","78-H","78-RKSJ-H","78-RKSJ-V","78-V","78ms-RKSJ-H","78ms-RKSJ-V","83pv-RKSJ-H","90ms-RKSJ-H","90ms-RKSJ-V","90msp-RKSJ-H","90msp-RKSJ-V","90pv-RKSJ-H","90pv-RKSJ-V","Add-H","Add-RKSJ-H","Add-RKSJ-V","Add-V","Adobe-CNS1-0","Adobe-CNS1-1","Adobe-CNS1-2","Adobe-CNS1-3","Adobe-CNS1-4","Adobe-CNS1-5","Adobe-CNS1-6","Adobe-GB1-0","Adobe-GB1-1","Adobe-GB1-2","Adobe-GB1-3","Adobe-GB1-4","Adobe-GB1-5","Adobe-Japan1-0","Adobe-Japan1-1","Adobe-Japan1-2","Adobe-Japan1-3","Adobe-Japan1-4","Adobe-Japan1-5","Adobe-Japan1-6","Adobe-Korea1-0","Adobe-Korea1-1","Adobe-Korea1-2","B5-H","B5-V","B5pc-H","B5pc-V","CNS-EUC-H","CNS-EUC-V","CNS1-H","CNS1-V","CNS2-H","CNS2-V","ETHK-B5-H","ETHK-B5-V","ETen-B5-H","ETen-B5-V","ETenms-B5-H","ETenms-B5-V","EUC-H","EUC-V","Ext-H","Ext-RKSJ-H","Ext-RKSJ-V","Ext-V","GB-EUC-H","GB-EUC-V","GB-H","GB-V","GBK-EUC-H","GBK-EUC-V","GBK2K-H","GBK2K-V","GBKp-EUC-H","GBKp-EUC-V","GBT-EUC-H","GBT-EUC-V","GBT-H","GBT-V","GBTpc-EUC-H","GBTpc-EUC-V","GBpc-EUC-H","GBpc-EUC-V","H","HKdla-B5-H","HKdla-B5-V","HKdlb-B5-H","HKdlb-B5-V","HKgccs-B5-H","HKgccs-B5-V","HKm314-B5-H","HKm314-B5-V","HKm471-B5-H","HKm471-B5-V","HKscs-B5-H","HKscs-B5-V","Hankaku","Hiragana","KSC-EUC-H","KSC-EUC-V","KSC-H","KSC-Johab-H","KSC-Johab-V","KSC-V","KSCms-UHC-H","KSCms-UHC-HW-H","KSCms-UHC-HW-V","KSCms-UHC-V","KSCpc-EUC-H","KSCpc-EUC-V","Katakana","NWP-H","NWP-V","RKSJ-H","RKSJ-V","Roman","UniCNS-UCS2-H","UniCNS-UCS2-V","UniCNS-UTF16-H","UniCNS-UTF16-V","UniCNS-UTF32-H","UniCNS-UTF32-V","UniCNS-UTF8-H","UniCNS-UTF8-V","UniGB-UCS2-H","UniGB-UCS2-V","UniGB-UTF16-H","UniGB-UTF16-V","UniGB-UTF32-H","UniGB-UTF32-V","UniGB-UTF8-H","UniGB-UTF8-V","UniJIS-UCS2-H","UniJIS-UCS2-HW-H","UniJIS-UCS2-HW-V","UniJIS-UCS2-V","UniJIS-UTF16-H","UniJIS-UTF16-V","UniJIS-UTF32-H","UniJIS-UTF32-V","UniJIS-UTF8-H","UniJIS-UTF8-V","UniJIS2004-UTF16-H","UniJIS2004-UTF16-V","UniJIS2004-UTF32-H","UniJIS2004-UTF32-V","UniJIS2004-UTF8-H","UniJIS2004-UTF8-V","UniJISPro-UCS2-HW-V","UniJISPro-UCS2-V","UniJISPro-UTF8-V","UniJISX0213-UTF32-H","UniJISX0213-UTF32-V","UniJISX02132004-UTF32-H","UniJISX02132004-UTF32-V","UniKS-UCS2-H","UniKS-UCS2-V","UniKS-UTF16-H","UniKS-UTF16-V","UniKS-UTF32-H","UniKS-UTF32-V","UniKS-UTF8-H","UniKS-UTF8-V","V","WP-Symbol"];class l{constructor(e=!1){this.codespaceRanges=[[],[],[],[]];this.numCodespaceRanges=0;this._map=[];this.name="";this.vertical=!1;this.useCMap=null;this.builtInCMap=e}addCodespaceRange(e,t,a){this.codespaceRanges[e-1].push(t,a);this.numCodespaceRanges++}mapCidRange(e,t,a){for(;e<=t;)this._map[e++]=a++}mapBfRange(e,t,a){for(var r=a.length-1;e<=t;){this._map[e++]=a;a=a.substring(0,r)+String.fromCharCode(a.charCodeAt(r)+1)}}mapBfRangeToArray(e,t,a){const r=a.length;let i=0;for(;e<=t&&i<r;){this._map[e]=a[i++];++e}}mapOne(e,t){this._map[e]=t}lookup(e){return this._map[e]}contains(e){return void 0!==this._map[e]}forEach(e){const t=this._map,a=t.length;if(a<=65536)for(let r=0;r<a;r++)void 0!==t[r]&&e(r,t[r]);else for(const a in t)e(a,t[a])}charCodeOf(e){const t=this._map;if(t.length<=65536)return t.indexOf(e);for(const a in t)if(t[a]===e)return 0|a;return-1}getMap(){return this._map}readCharCode(e,t,a){let r=0;const i=this.codespaceRanges;for(let n=0,s=i.length;n<s;n++){r=(r<<8|e.charCodeAt(t+n))>>>0;const s=i[n];for(let e=0,t=s.length;e<t;){const t=s[e++],i=s[e++];if(r>=t&&r<=i){a.charcode=r;a.length=n+1;return}}}a.charcode=0;a.length=1}get length(){return this._map.length}get isIdentityCMap(){if("Identity-H"!==this.name&&"Identity-V"!==this.name)return!1;if(65536!==this._map.length)return!1;for(let e=0;e<65536;e++)if(this._map[e]!==e)return!1;return!0}}t.CMap=l;class h extends l{constructor(e,t){super();this.vertical=e;this.addCodespaceRange(t,0,65535)}mapCidRange(e,t,a){(0,r.unreachable)("should not call mapCidRange")}mapBfRange(e,t,a){(0,r.unreachable)("should not call mapBfRange")}mapBfRangeToArray(e,t,a){(0,r.unreachable)("should not call mapBfRangeToArray")}mapOne(e,t){(0,r.unreachable)("should not call mapCidOne")}lookup(e){return Number.isInteger(e)&&e<=65535?e:void 0}contains(e){return Number.isInteger(e)&&e<=65535}forEach(e){for(let t=0;t<=65535;t++)e(t,t)}charCodeOf(e){return Number.isInteger(e)&&e<=65535?e:-1}getMap(){const e=new Array(65536);for(let t=0;t<=65535;t++)e[t]=t;return e}get length(){return 65536}get isIdentityCMap(){(0,r.unreachable)("should not access .isIdentityCMap")}}t.IdentityCMap=h;var u=function(){function e(e,t){for(var a=0,r=0;r<=t;r++)a=a<<8|e[r];return a>>>0}function t(e,t){return 1===t?String.fromCharCode(e[0],e[1]):3===t?String.fromCharCode(e[0],e[1],e[2],e[3]):String.fromCharCode.apply(null,e.subarray(0,t+1))}function a(e,t,a){for(var r=0,i=a;i>=0;i--){r+=e[i]+t[i];e[i]=255&r;r>>=8}}function i(e,t){for(var a=1,r=t;r>=0&&a>0;r--){a+=e[r];e[r]=255&a;a>>=8}}function n(e){this.buffer=e;this.pos=0;this.end=e.length;this.tmpBuf=new Uint8Array(19)}n.prototype={readByte(){return this.pos>=this.end?-1:this.buffer[this.pos++]},readNumber(){var e,t=0;do{var a=this.readByte();if(a<0)throw new r.FormatError("unexpected EOF in bcmap");e=!(128&a);t=t<<7|127&a}while(!e);return t},readSigned(){var e=this.readNumber();return 1&e?~(e>>>1):e>>>1},readHex(e,t){e.set(this.buffer.subarray(this.pos,this.pos+t+1));this.pos+=t+1},readHexNumber(e,t){var a,i=this.tmpBuf,n=0;do{var s=this.readByte();if(s<0)throw new r.FormatError("unexpected EOF in bcmap");a=!(128&s);i[n++]=127&s}while(!a);for(var o=t,c=0,l=0;o>=0;){for(;l<8&&i.length>0;){c=i[--n]<<l|c;l+=7}e[o]=255&c;o--;c>>=8;l-=8}},readHexSigned(e,t){this.readHexNumber(e,t);for(var a=1&e[t]?255:0,r=0,i=0;i<=t;i++){r=(1&r)<<8|e[i];e[i]=r>>1^a}},readString(){for(var e=this.readNumber(),t="",a=0;a<e;a++)t+=String.fromCharCode(this.readNumber());return t}};function s(){}s.prototype={process:function(r,s,o){return new Promise((function(c,l){var h=new n(r),u=h.readByte();s.vertical=!!(1&u);for(var d,f,g=null,m=new Uint8Array(16),p=new Uint8Array(16),b=new Uint8Array(16),y=new Uint8Array(16),v=new Uint8Array(16);(f=h.readByte())>=0;){var w=f>>5;if(7!==w){var k=!!(16&f),S=15&f;if(S+1>16)throw new Error("processBinaryCMap: Invalid dataSize.");var C,x=h.readNumber();switch(w){case 0:h.readHex(m,S);h.readHexNumber(p,S);a(p,m,S);s.addCodespaceRange(S+1,e(m,S),e(p,S));for(C=1;C<x;C++){i(p,S);h.readHexNumber(m,S);a(m,p,S);h.readHexNumber(p,S);a(p,m,S);s.addCodespaceRange(S+1,e(m,S),e(p,S))}break;case 1:h.readHex(m,S);h.readHexNumber(p,S);a(p,m,S);h.readNumber();for(C=1;C<x;C++){i(p,S);h.readHexNumber(m,S);a(m,p,S);h.readHexNumber(p,S);a(p,m,S);h.readNumber()}break;case 2:h.readHex(b,S);d=h.readNumber();s.mapOne(e(b,S),d);for(C=1;C<x;C++){i(b,S);if(!k){h.readHexNumber(v,S);a(b,v,S)}d=h.readSigned()+(d+1);s.mapOne(e(b,S),d)}break;case 3:h.readHex(m,S);h.readHexNumber(p,S);a(p,m,S);d=h.readNumber();s.mapCidRange(e(m,S),e(p,S),d);for(C=1;C<x;C++){i(p,S);if(k)m.set(p);else{h.readHexNumber(m,S);a(m,p,S)}h.readHexNumber(p,S);a(p,m,S);d=h.readNumber();s.mapCidRange(e(m,S),e(p,S),d)}break;case 4:h.readHex(b,1);h.readHex(y,S);s.mapOne(e(b,1),t(y,S));for(C=1;C<x;C++){i(b,1);if(!k){h.readHexNumber(v,1);a(b,v,1)}i(y,S);h.readHexSigned(v,S);a(y,v,S);s.mapOne(e(b,1),t(y,S))}break;case 5:h.readHex(m,1);h.readHexNumber(p,1);a(p,m,1);h.readHex(y,S);s.mapBfRange(e(m,1),e(p,1),t(y,S));for(C=1;C<x;C++){i(p,1);if(k)m.set(p);else{h.readHexNumber(m,1);a(m,p,1)}h.readHexNumber(p,1);a(p,m,1);h.readHex(y,S);s.mapBfRange(e(m,1),e(p,1),t(y,S))}break;default:l(new Error("processBinaryCMap: Unknown type: "+w));return}}else switch(31&f){case 0:h.readString();break;case 1:g=h.readString()}}c(g?o(g):s)}))}};return s}(),d=function(){function e(e){for(var t=0,a=0;a<e.length;a++)t=t<<8|e.charCodeAt(a);return t>>>0}function t(e){if(!(0,r.isString)(e))throw new r.FormatError("Malformed CMap: expected string.")}function a(e){if(!Number.isInteger(e))throw new r.FormatError("Malformed CMap: expected int.")}function d(a,r){for(;;){var n=r.getObj();if((0,i.isEOF)(n))break;if((0,i.isCmd)(n,"endbfchar"))return;t(n);var s=e(n);t(n=r.getObj());var o=n;a.mapOne(s,o)}}function f(a,n){for(;;){var s=n.getObj();if((0,i.isEOF)(s))break;if((0,i.isCmd)(s,"endbfrange"))return;t(s);var o=e(s);t(s=n.getObj());var c=e(s);s=n.getObj();if(Number.isInteger(s)||(0,r.isString)(s)){var l=Number.isInteger(s)?String.fromCharCode(s):s;a.mapBfRange(o,c,l)}else{if(!(0,i.isCmd)(s,"["))break;s=n.getObj();for(var h=[];!(0,i.isCmd)(s,"]")&&!(0,i.isEOF)(s);){h.push(s);s=n.getObj()}a.mapBfRangeToArray(o,c,h)}}throw new r.FormatError("Invalid bf range.")}function g(r,n){for(;;){var s=n.getObj();if((0,i.isEOF)(s))break;if((0,i.isCmd)(s,"endcidchar"))return;t(s);var o=e(s);a(s=n.getObj());var c=s;r.mapOne(o,c)}}function m(r,n){for(;;){var s=n.getObj();if((0,i.isEOF)(s))break;if((0,i.isCmd)(s,"endcidrange"))return;t(s);var o=e(s);t(s=n.getObj());var c=e(s);a(s=n.getObj());var l=s;r.mapCidRange(o,c,l)}}function p(t,a){for(;;){var n=a.getObj();if((0,i.isEOF)(n))break;if((0,i.isCmd)(n,"endcodespacerange"))return;if(!(0,r.isString)(n))break;var s=e(n);n=a.getObj();if(!(0,r.isString)(n))break;var o=e(n);t.addCodespaceRange(n.length,s,o)}throw new r.FormatError("Invalid codespace range.")}function b(e,t){var a=t.getObj();Number.isInteger(a)&&(e.vertical=!!a)}function y(e,t){var a=t.getObj();(0,i.isName)(a)&&(0,r.isString)(a.name)&&(e.name=a.name)}function v(e,t,a,n){var o,c;e:for(;;)try{var l=t.getObj();if((0,i.isEOF)(l))break;if((0,i.isName)(l)){"WMode"===l.name?b(e,t):"CMapName"===l.name&&y(e,t);o=l}else if((0,i.isCmd)(l))switch(l.cmd){case"endcmap":break e;case"usecmap":(0,i.isName)(o)&&(c=o.name);break;case"begincodespacerange":p(e,t);break;case"beginbfchar":d(e,t);break;case"begincidchar":g(e,t);break;case"beginbfrange":f(e,t);break;case"begincidrange":m(e,t)}}catch(e){if(e instanceof s.MissingDataException)throw e;(0,r.warn)("Invalid cMap data: "+e);continue}!n&&c&&(n=c);return n?w(e,a,n):Promise.resolve(e)}function w(e,t,a){return k(a,t).then((function(t){e.useCMap=t;if(0===e.numCodespaceRanges){for(var a=e.useCMap.codespaceRanges,r=0;r<a.length;r++)e.codespaceRanges[r]=a[r].slice();e.numCodespaceRanges=e.useCMap.numCodespaceRanges}e.useCMap.forEach((function(t,a){e.contains(t)||e.mapOne(t,e.useCMap.lookup(t))}));return e}))}function k(e,t){return"Identity-H"===e?Promise.resolve(new h(!1,2)):"Identity-V"===e?Promise.resolve(new h(!0,2)):c.includes(e)?t?t(e).then((function(e){var a=e.cMapData,i=e.compressionType,s=new l(!0);if(i===r.CMapCompressionType.BINARY)return(new u).process(a,s,(function(e){return w(s,t,e)}));if(i===r.CMapCompressionType.NONE){var c=new n.Lexer(new o.Stream(a));return v(s,c,t,null)}return Promise.reject(new Error("TODO: Only BINARY/NONE CMap compression is currently supported."))})):Promise.reject(new Error("Built-in CMap parameters are not provided.")):Promise.reject(new Error("Unknown CMap name: "+e))}return{async create(e){var t=e.encoding,a=e.fetchBuiltInCMap,r=e.useCMap;if((0,i.isName)(t))return k(t.name,a);if((0,i.isStream)(t)){return v(new l,new n.Lexer(t),a,r).then((function(e){return e.isIdentityCMap?k(e.name,a):e}))}throw new Error("Encoding required.")}}}();t.CMapFactory=d},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.getFontType=y;t.IdentityToUnicodeMap=t.ToUnicodeMap=t.FontFlags=t.Font=t.ErrorFont=t.SEAC_ANALYSIS_ENABLED=void 0;var r=a(2),i=a(28),n=a(31),s=a(30),o=a(32),c=a(33),l=a(7),h=a(34),u=a(26),d=a(11),f=a(35);const g=[[57344,63743],[1048576,1114109]];t.SEAC_ANALYSIS_ENABLED=!0;var m={FixedPitch:1,Serif:2,Symbolic:4,Script:8,Nonsymbolic:32,Italic:64,AllCap:65536,SmallCap:131072,ForceBold:262144};t.FontFlags=m;var p=[".notdef",".null","nonmarkingreturn","space","exclam","quotedbl","numbersign","dollar","percent","ampersand","quotesingle","parenleft","parenright","asterisk","plus","comma","hyphen","period","slash","zero","one","two","three","four","five","six","seven","eight","nine","colon","semicolon","less","equal","greater","question","at","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","bracketleft","backslash","bracketright","asciicircum","underscore","grave","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","braceleft","bar","braceright","asciitilde","Adieresis","Aring","Ccedilla","Eacute","Ntilde","Odieresis","Udieresis","aacute","agrave","acircumflex","adieresis","atilde","aring","ccedilla","eacute","egrave","ecircumflex","edieresis","iacute","igrave","icircumflex","idieresis","ntilde","oacute","ograve","ocircumflex","odieresis","otilde","uacute","ugrave","ucircumflex","udieresis","dagger","degree","cent","sterling","section","bullet","paragraph","germandbls","registered","copyright","trademark","acute","dieresis","notequal","AE","Oslash","infinity","plusminus","lessequal","greaterequal","yen","mu","partialdiff","summation","product","pi","integral","ordfeminine","ordmasculine","Omega","ae","oslash","questiondown","exclamdown","logicalnot","radical","florin","approxequal","Delta","guillemotleft","guillemotright","ellipsis","nonbreakingspace","Agrave","Atilde","Otilde","OE","oe","endash","emdash","quotedblleft","quotedblright","quoteleft","quoteright","divide","lozenge","ydieresis","Ydieresis","fraction","currency","guilsinglleft","guilsinglright","fi","fl","daggerdbl","periodcentered","quotesinglbase","quotedblbase","perthousand","Acircumflex","Ecircumflex","Aacute","Edieresis","Egrave","Iacute","Icircumflex","Idieresis","Igrave","Oacute","Ocircumflex","apple","Ograve","Uacute","Ucircumflex","Ugrave","dotlessi","circumflex","tilde","macron","breve","dotaccent","ring","cedilla","hungarumlaut","ogonek","caron","Lslash","lslash","Scaron","scaron","Zcaron","zcaron","brokenbar","Eth","eth","Yacute","yacute","Thorn","thorn","minus","multiply","onesuperior","twosuperior","threesuperior","onehalf","onequarter","threequarters","franc","Gbreve","gbreve","Idotaccent","Scedilla","scedilla","Cacute","cacute","Ccaron","ccaron","dcroat"];function b(e){if(e.fontMatrix&&e.fontMatrix[0]!==r.FONT_IDENTITY_MATRIX[0]){var t=.001/e.fontMatrix[0],a=e.widths;for(var i in a)a[i]*=t;e.defaultWidth*=t}}function y(e,t){switch(e){case"Type1":return"Type1C"===t?r.FontType.TYPE1C:r.FontType.TYPE1;case"CIDFontType0":return"CIDFontType0C"===t?r.FontType.CIDFONTTYPE0C:r.FontType.CIDFONTTYPE0;case"OpenType":return r.FontType.OPENTYPE;case"TrueType":return r.FontType.TRUETYPE;case"CIDFontType2":return r.FontType.CIDFONTTYPE2;case"MMType1":return r.FontType.MMTYPE1;case"Type0":return r.FontType.TYPE0;default:return r.FontType.UNKNOWN}}function v(e,t){if(void 0!==t[e])return e;var a=(0,c.getUnicodeForGlyph)(e,t);if(-1!==a)for(var i in t)if(t[i]===a)return i;(0,r.info)("Unable to recover a standard glyph name for: "+e);return e}var w=function(){function e(e,t,a,r,i,n,s,o){this.fontChar=e;this.unicode=t;this.accent=a;this.width=r;this.vmetric=i;this.operatorListId=n;this.isSpace=s;this.isInFont=o}e.prototype.matchesForCache=function(e,t,a,r,i,n,s,o){return this.fontChar===e&&this.unicode===t&&this.accent===a&&this.width===r&&this.vmetric===i&&this.operatorListId===n&&this.isSpace===s&&this.isInFont===o};return e}(),k=function(){function e(e=[]){this._map=e}e.prototype={get length(){return this._map.length},forEach(e){for(var t in this._map)e(t,this._map[t].charCodeAt(0))},has(e){return void 0!==this._map[e]},get(e){return this._map[e]},charCodeOf(e){const t=this._map;if(t.length<=65536)return t.indexOf(e);for(const a in t)if(t[a]===e)return 0|a;return-1},amend(e){for(var t in e)this._map[t]=e[t]}};return e}();t.ToUnicodeMap=k;var S=function(){function e(e,t){this.firstChar=e;this.lastChar=t}e.prototype={get length(){return this.lastChar+1-this.firstChar},forEach(e){for(var t=this.firstChar,a=this.lastChar;t<=a;t++)e(t,t)},has(e){return this.firstChar<=e&&e<=this.lastChar},get(e){if(this.firstChar<=e&&e<=this.lastChar)return String.fromCharCode(e)},charCodeOf(e){return Number.isInteger(e)&&e>=this.firstChar&&e<=this.lastChar?e:-1},amend(e){(0,r.unreachable)("Should not call amend()")}};return e}();t.IdentityToUnicodeMap=S;var C=function(){function e(e,t,a){e[t]=a>>8&255;e[t+1]=255&a}function t(e,t,a){e[t]=a>>24&255;e[t+1]=a>>16&255;e[t+2]=a>>8&255;e[t+3]=255&a}function a(e,t,a){var r,i;if(a instanceof Uint8Array)e.set(a,t);else if("string"==typeof a)for(r=0,i=a.length;r<i;r++)e[t++]=255&a.charCodeAt(r);else for(r=0,i=a.length;r<i;r++)e[t++]=255&a[r]}function i(e){this.sfnt=e;this.tables=Object.create(null)}i.getSearchParams=function(e,t){for(var a=1,r=0;(a^e)>a;){a<<=1;r++}var i=a*t;return{range:i,entry:r,rangeShift:t*e-i}};i.prototype={toArray:function(){var n=this.sfnt,s=this.tables,o=Object.keys(s);o.sort();var c,h,u,d,f,g=o.length,m=12+16*g,p=[m];for(c=0;c<g;c++){m+=((d=s[o[c]]).length+3&-4)>>>0;p.push(m)}var b=new Uint8Array(m);for(c=0;c<g;c++){d=s[o[c]];a(b,p[c],d)}"true"===n&&(n=(0,r.string32)(65536));b[0]=255&n.charCodeAt(0);b[1]=255&n.charCodeAt(1);b[2]=255&n.charCodeAt(2);b[3]=255&n.charCodeAt(3);e(b,4,g);var y=i.getSearchParams(g,16);e(b,6,y.range);e(b,8,y.entry);e(b,10,y.rangeShift);m=12;for(c=0;c<g;c++){f=o[c];b[m]=255&f.charCodeAt(0);b[m+1]=255&f.charCodeAt(1);b[m+2]=255&f.charCodeAt(2);b[m+3]=255&f.charCodeAt(3);var v=0;for(h=p[c],u=p[c+1];h<u;h+=4){v=v+(0,l.readUint32)(b,h)>>>0}t(b,m+4,v);t(b,m+8,p[c]);t(b,m+12,s[f].length);m+=16}return b},addTable:function(e,t){if(e in this.tables)throw new Error("Table "+e+" already exists");this.tables[e]=t}};return i}(),x=function(){function e(e,t,a){var i;this.name=e;this.loadedName=a.loadedName;this.isType3Font=a.isType3Font;this.sizes=[];this.missingFile=!1;this.glyphCache=Object.create(null);this.isSerifFont=!!(a.flags&m.Serif);this.isSymbolicFont=!!(a.flags&m.Symbolic);this.isMonospace=!!(a.flags&m.FixedPitch);var n=a.type,s=a.subtype;this.type=n;this.subtype=s;let o="sans-serif";this.isMonospace?o="monospace":this.isSerifFont&&(o="serif");this.fallbackName=o;this.differences=a.differences;this.widths=a.widths;this.defaultWidth=a.defaultWidth;this.composite=a.composite;this.wideChars=a.wideChars;this.cMap=a.cMap;this.ascent=a.ascent/1e3;this.descent=a.descent/1e3;this.fontMatrix=a.fontMatrix;this.bbox=a.bbox;this.defaultEncoding=a.defaultEncoding;this.toUnicode=a.toUnicode;this.fallbackToUnicode=a.fallbackToUnicode||new k;this.toFontChar=[];if("Type3"!==a.type){this.cidEncoding=a.cidEncoding;this.vertical=a.vertical;if(this.vertical){this.vmetrics=a.vmetrics;this.defaultVMetrics=a.defaultVMetrics}if(t&&!t.isEmpty){[n,s]=function(e,{type:t,subtype:a,composite:i}){let n,s;if(function(e){var t=e.peekBytes(4);return 65536===(0,l.readUint32)(t,0)||"true"===(0,r.bytesToString)(t)}(e)||I(e))n=i?"CIDFontType2":"TrueType";else if(function(e){var t=e.peekBytes(4);return"OTTO"===(0,r.bytesToString)(t)}(e))n=i?"CIDFontType2":"OpenType";else if(function(e){var t=e.peekBytes(2);if(37===t[0]&&33===t[1])return!0;if(128===t[0]&&1===t[1])return!0;return!1}(e))n=i?"CIDFontType0":"MMType1"===t?"MMType1":"Type1";else if(function(e){const t=e.peekBytes(4);if(t[0]>=1&&t[3]>=1&&t[3]<=4)return!0;return!1}(e))if(i){n="CIDFontType0";s="CIDFontType0C"}else{n="MMType1"===t?"MMType1":"Type1";s="Type1C"}else{(0,r.warn)("getFontFileType: Unable to detect correct font file Type/Subtype.");n=t;s=a}return[n,s]}(t,a);n===this.type&&s===this.subtype||(0,r.info)("Inconsistent font file Type/SubType, expected: "+`${this.type}/${this.subtype} but found: ${n}/${s}.`);try{var c;switch(n){case"MMType1":(0,r.info)("MMType1 font ("+e+"), falling back to Type1.");case"Type1":case"CIDFontType0":this.mimetype="font/opentype";var h="Type1C"===s||"CIDFontType0C"===s?new T(t,a):new F(e,t,a);b(a);c=this.convert(e,h,a);break;case"OpenType":case"TrueType":case"CIDFontType2":this.mimetype="font/opentype";c=this.checkAndRepair(e,t,a);if(this.isOpenType){b(a);n="OpenType"}break;default:throw new r.FormatError(`Font ${n} is not supported`)}}catch(e){(0,r.warn)(e);this.fallbackToSystemFont();return}this.data=c;this.fontType=y(n,s);this.fontMatrix=a.fontMatrix;this.widths=a.widths;this.defaultWidth=a.defaultWidth;this.toUnicode=a.toUnicode;this.encoding=a.baseEncoding;this.seacMap=a.seacMap}else{t&&(0,r.warn)('Font file is empty in "'+e+'" ('+this.loadedName+")");this.fallbackToSystemFont()}}else{for(i=0;i<256;i++)this.toFontChar[i]=this.differences[i]||a.defaultEncoding[i];this.fontType=r.FontType.TYPE3}}e.getFontID=(t=1,function(){return String(t++)});var t;function a(e,t){return(e<<8)+t}function f(e,t){var a=(e<<8)+t;return 32768&a?a-65536:a}function x(e){return String.fromCharCode(e>>8&255,255&e)}function A(e){e>32767?e=32767:e<-32768&&(e=-32768);return String.fromCharCode(e>>8&255,255&e)}function I(e){const t=e.peekBytes(4);return"ttcf"===(0,r.bytesToString)(t)}function E(e,t,a){for(var r,i=[],n=0,s=e.length;n<s;n++)-1!==(r=(0,c.getUnicodeForGlyph)(e[n],t))&&(i[n]=r);for(var o in a)-1!==(r=(0,c.getUnicodeForGlyph)(a[o],t))&&(i[+o]=r);return i}function O(e,t,a){var i=Object.create(null),n=[],s=0,o=g[s][0],c=g[s][1];for(var l in e){var h=e[l|=0];if(t(h)){if(o>c){if(++s>=g.length){(0,r.warn)("Ran out of space in font private use area.");break}o=g[s][0];c=g[s][1]}var u=o++;0===h&&(h=a);i[u]=h;n[l]=u}}return{toFontChar:n,charCodeToGlyphId:i,nextAvailableFontCharCode:o}}function P(e,t){var a,i,n,s,o=function(e,t){var a=[];for(var r in e)e[r]>=t||a.push({fontCharCode:0|r,glyphId:e[r]});0===a.length&&a.push({fontCharCode:0,glyphId:0});a.sort((function(e,t){return e.fontCharCode-t.fontCharCode}));for(var i=[],n=a.length,s=0;s<n;){var o=a[s].fontCharCode,c=[a[s].glyphId];++s;for(var l=o;s<n&&l+1===a[s].fontCharCode;){c.push(a[s].glyphId);++s;if(65535===++l)break}i.push([o,l,c])}return i}(e,t),c=o[o.length-1][1]>65535?2:1,l="\0\0"+x(c)+"\0\0"+(0,r.string32)(4+8*c);for(a=o.length-1;a>=0&&!(o[a][0]<=65535);--a);var h=a+1;o[a][0]<65535&&65535===o[a][1]&&(o[a][1]=65534);var u,d,f,g,m=o[a][1]<65535?1:0,p=h+m,b=C.getSearchParams(p,2),y="",v="",w="",k="",S="",A=0;for(a=0,i=h;a<i;a++){d=(u=o[a])[0];f=u[1];y+=x(d);v+=x(f);var I=!0;for(n=1,s=(g=u[2]).length;n<s;++n)if(g[n]!==g[n-1]+1){I=!1;break}if(I){w+=x(g[0]-d&65535);k+=x(0)}else{var F=2*(p-a)+2*A;A+=f-d+1;w+=x(0);k+=x(F);for(n=0,s=g.length;n<s;++n)S+=x(g[n])}}if(m>0){v+="ÿÿ";y+="ÿÿ";w+="\0";k+="\0\0"}var T="\0\0"+x(2*p)+x(b.range)+x(b.entry)+x(b.rangeShift)+v+"\0\0"+y+w+k+S,E="",O="";if(c>1){l+="\0\0\n"+(0,r.string32)(4+8*c+4+T.length);E="";for(a=0,i=o.length;a<i;a++){d=(u=o[a])[0];var P=(g=u[2])[0];for(n=1,s=g.length;n<s;++n)if(g[n]!==g[n-1]+1){f=u[0]+n-1;E+=(0,r.string32)(d)+(0,r.string32)(f)+(0,r.string32)(P);d=f+1;P=g[n]}E+=(0,r.string32)(d)+(0,r.string32)(u[1])+(0,r.string32)(P)}O="\0\f\0\0"+(0,r.string32)(E.length+16)+"\0\0\0\0"+(0,r.string32)(E.length/12)}return l+"\0"+x(T.length+4)+T+O+E}function B(e,t,a){a=a||{unitsPerEm:0,yMax:0,yMin:0,ascent:0,descent:0};var i=0,n=0,s=0,o=0,l=null,h=0;if(t){for(var u in t){(l>(u|=0)||!l)&&(l=u);h<u&&(h=u);var d=(0,c.getUnicodeRangeFor)(u);if(d<32)i|=1<<d;else if(d<64)n|=1<<d-32;else if(d<96)s|=1<<d-64;else{if(!(d<123))throw new r.FormatError("Unicode ranges Bits > 123 are reserved for internal usage");o|=1<<d-96}}h>65535&&(h=65535)}else{l=0;h=255}var f=e.bbox||[0,0,0,0],g=a.unitsPerEm||1/(e.fontMatrix||r.FONT_IDENTITY_MATRIX)[0],m=e.ascentScaled?1:g/1e3,p=a.ascent||Math.round(m*(e.ascent||f[3])),b=a.descent||Math.round(m*(e.descent||f[1]));b>0&&e.descent>0&&f[1]<0&&(b=-b);var y=a.yMax||p,v=-a.yMin||-b;return"\0$ô\0\0\0»\0\0\0»\0\0ß\x001\0\0\0\0"+String.fromCharCode(e.fixedPitch?9:0)+"\0\0\0\0\0\0"+(0,r.string32)(i)+(0,r.string32)(n)+(0,r.string32)(s)+(0,r.string32)(o)+"*21*"+x(e.italicAngle?1:0)+x(l||e.firstChar)+x(h||e.lastChar)+x(p)+x(b)+"\0d"+x(y)+x(v)+"\0\0\0\0\0\0\0\0"+x(e.xHeight)+x(e.capHeight)+x(0)+x(l||e.firstChar)+"\0"}function D(e){var t=Math.floor(65536*e.italicAngle);return"\0\0\0"+(0,r.string32)(t)+"\0\0\0\0"+(0,r.string32)(e.fixedPitch)+"\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0"}function N(e,t){t||(t=[[],[]]);var a,r,i,n,s,o=[t[0][0]||"Original licence",t[0][1]||e,t[0][2]||"Unknown",t[0][3]||"uniqueID",t[0][4]||e,t[0][5]||"Version 0.11",t[0][6]||"",t[0][7]||"Unknown",t[0][8]||"Unknown",t[0][9]||"Unknown"],c=[];for(a=0,r=o.length;a<r;a++){var l=[];for(i=0,n=(s=t[1][a]||o[a]).length;i<n;i++)l.push(x(s.charCodeAt(i)));c.push(l.join(""))}var h=[o,c],u=["\0","\0"],d=["\0\0","\0"],f=["\0\0","\t"],g=o.length*u.length,m="\0\0"+x(g)+x(12*g+6),p=0;for(a=0,r=u.length;a<r;a++){var b=h[a];for(i=0,n=b.length;i<n;i++){s=b[i];m+=u[a]+d[a]+f[a]+x(i)+x(s.length)+x(p);p+=s.length}}return m+=o.join("")+c.join("")}e.prototype={name:null,font:null,mimetype:null,encoding:null,disableFontFace:!1,get renderer(){var e=h.FontRendererFactory.create(this,!0);return(0,r.shadow)(this,"renderer",e)},exportData:function(){var e={};for(var t in this)this.hasOwnProperty(t)&&(e[t]=this[t]);return e},fallbackToSystemFont:function(){this.missingFile=!0;var e,t,a=this.name,i=this.type,l=this.subtype;let h=a.replace(/[,_]/g,"-").replace(/\s/g,"");var u=(0,o.getStdFontMap)(),d=(0,o.getNonStdFontMap)(),f=!!u[h]||!(!d[h]||!u[d[h]]);h=u[h]||d[h]||h;this.bold=-1!==h.search(/bold/gi);this.italic=-1!==h.search(/oblique/gi)||-1!==h.search(/italic/gi);this.black=-1!==a.search(/Black/g);this.remeasure=Object.keys(this.widths).length>0;if(f&&"CIDFontType2"===i&&this.cidEncoding.startsWith("Identity-")){const t=(0,o.getGlyphMapForStandardFonts)(),r=[];for(e in t)r[+e]=t[e];if(/Arial-?Black/i.test(a)){var g=(0,o.getSupplementalGlyphMapForArialBlack)();for(e in g)r[+e]=g[e]}else if(/Calibri/i.test(a)){const t=(0,o.getSupplementalGlyphMapForCalibri)();for(e in t)r[+e]=t[e]}this.toUnicode instanceof S||this.toUnicode.forEach((function(e,t){r[+e]=t}));this.toFontChar=r;this.toUnicode=new k(r)}else if(/Symbol/i.test(h))this.toFontChar=E(s.SymbolSetEncoding,(0,n.getGlyphsUnicode)(),this.differences);else if(/Dingbats/i.test(h)){/Wingdings/i.test(a)&&(0,r.warn)("Non-embedded Wingdings font, falling back to ZapfDingbats.");this.toFontChar=E(s.ZapfDingbatsEncoding,(0,n.getDingbatsGlyphsUnicode)(),this.differences)}else if(f)this.toFontChar=E(this.defaultEncoding,(0,n.getGlyphsUnicode)(),this.differences);else{const r=(0,n.getGlyphsUnicode)(),i=[];this.toUnicode.forEach((e,a)=>{if(!this.composite){var n=this.differences[e]||this.defaultEncoding[e];-1!==(t=(0,c.getUnicodeForGlyph)(n,r))&&(a=t)}i[+e]=a});if(this.composite&&this.toUnicode instanceof S&&/Verdana/i.test(a)){const t=(0,o.getGlyphMapForStandardFonts)();for(e in t)i[+e]=t[e]}this.toFontChar=i}this.loadedName=h.split("-")[0];this.fontType=y(i,l)},checkAndRepair:function(e,t,o){const c=["OS/2","cmap","head","hhea","hmtx","maxp","name","post","loca","glyf","fpgm","prep","cvt ","CFF "];function l(e,a){const r=Object.create(null);r["OS/2"]=null;r.cmap=null;r.head=null;r.hhea=null;r.hmtx=null;r.maxp=null;r.name=null;r.post=null;for(let e=0;e<a;e++){const e=h(t);c.includes(e.tag)&&(0!==e.length&&(r[e.tag]=e))}return r}function h(e){var t=(0,r.bytesToString)(e.getBytes(4)),a=e.getInt32()>>>0,i=e.getInt32()>>>0,n=e.getInt32()>>>0,s=e.pos;e.pos=e.start?e.start:0;e.skip(i);var o=e.getBytes(n);e.pos=s;if("head"===t){o[8]=o[9]=o[10]=o[11]=0;o[17]|=32}return{tag:t,checksum:a,length:n,offset:i,data:o}}function g(e){return{version:(0,r.bytesToString)(e.getBytes(4)),numTables:e.getUint16(),searchRange:e.getUint16(),entrySelector:e.getUint16(),rangeShift:e.getUint16()}}function m(e,t,a,r,i,n){var s={length:0,sizeOfInstructions:0};if(a-t<=12)return s;var o=e.subarray(t,a),c=f(o[0],o[1]);if(c<0){!function(e,t,a){e[t+1]=a;e[t]=a>>>8}(o,0,c=-1);r.set(o,i);s.length=o.length;return s}var l,h=10,u=0;for(l=0;l<c;l++){u=(o[h]<<8|o[h+1])+1;h+=2}var d=h,g=o[h]<<8|o[h+1];s.sizeOfInstructions=g;var m=h+=2+g,p=0;for(l=0;l<u;l++){var b=o[h++];192&b&&(o[h-1]=63&b);let e=2;2&b?e=1:16&b&&(e=0);let t=2;4&b?t=1:32&b&&(t=0);const a=e+t;p+=a;if(8&b){var y=o[h++];l+=y;p+=y*a}}if(0===p)return s;var v=h+p;if(v>o.length)return s;if(!n&&g>0){r.set(o.subarray(0,d),i);r.set([0,0],i+d);r.set(o.subarray(m,v),i+d+2);v-=g;o.length-v>3&&(v=v+3&-4);s.length=v;return s}if(o.length-v>3){v=v+3&-4;r.set(o.subarray(0,v),i);s.length=v;return s}r.set(o,i);s.length=o.length;return s}function y(e){var a=(t.start?t.start:0)+e.offset;t.pos=a;var i=[[],[]],n=e.length,s=a+n;if(0!==t.getUint16()||n<6)return i;var o,c,l=t.getUint16(),h=t.getUint16(),u=[];for(o=0;o<l&&t.pos+12<=s;o++){var d={platform:t.getUint16(),encoding:t.getUint16(),language:t.getUint16(),name:t.getUint16(),length:t.getUint16(),offset:t.getUint16()};(1===d.platform&&0===d.encoding&&0===d.language||3===d.platform&&1===d.encoding&&1033===d.language)&&u.push(d)}for(o=0,c=u.length;o<c;o++){var f=u[o];if(!(f.length<=0)){var g=a+h+f.offset;if(!(g+f.length>s)){t.pos=g;var m=f.name;if(f.encoding){for(var p="",b=0,y=f.length;b<y;b+=2)p+=String.fromCharCode(t.getUint16());i[1][m]=p}else i[0][m]=(0,r.bytesToString)(t.getBytes(f.length))}}}return i}var w=[0,0,0,0,0,0,0,0,-2,-2,-2,-2,0,0,-2,-5,-1,-1,-1,-1,-1,-1,-1,-1,0,0,-1,0,-1,-1,-1,-1,1,-1,-999,0,1,0,-1,-2,0,-1,-2,-1,-1,0,-1,-1,0,0,-999,-999,-1,-1,-1,-1,-2,-999,-2,-2,-999,0,-2,-2,0,0,-2,0,-2,0,0,0,-2,-1,-1,1,1,0,0,-1,-1,-1,-1,-1,-1,-1,0,0,-1,0,-1,-1,0,-999,-1,-1,-1,-1,-1,-1,0,0,0,0,0,0,0,0,0,0,0,0,-2,-999,-999,-999,-999,-999,-1,-1,-2,-2,0,0,0,0,-1,-1,-999,-2,-2,0,0,-1,-2,-2,0,0,0,-1,-1,-1,-2];function k(e,t){for(var a,i,n,s,o,c=e.data,l=0,h=0,u=0,d=[],f=[],g=[],m=t.tooComplexToFollowFunctions,p=!1,b=0,y=0,v=c.length;l<v;){var k=c[l++];if(64===k){i=c[l++];if(p||y)l+=i;else for(a=0;a<i;a++)d.push(c[l++])}else if(65===k){i=c[l++];if(p||y)l+=2*i;else for(a=0;a<i;a++){n=c[l++];d.push(n<<8|c[l++])}}else if(176==(248&k)){i=k-176+1;if(p||y)l+=i;else for(a=0;a<i;a++)d.push(c[l++])}else if(184==(248&k)){i=k-184+1;if(p||y)l+=2*i;else for(a=0;a<i;a++){n=c[l++];d.push(n<<8|c[l++])}}else if(43!==k||m)if(44!==k||m){if(45===k)if(p){p=!1;h=l}else{if(!(o=f.pop())){(0,r.warn)("TT: ENDF bad stack");t.hintsValid=!1;return}s=g.pop();c=o.data;l=o.i;t.functionsStackDeltas[s]=d.length-o.stackTop}else if(137===k){if(p||y){(0,r.warn)("TT: nested IDEFs not allowed");m=!0}p=!0;u=l}else if(88===k)++b;else if(27===k)y=b;else if(89===k){y===b&&(y=0);--b}else if(28===k&&!p&&!y){var S=d[d.length-1];S>0&&(l+=S-1)}}else{if(p||y){(0,r.warn)("TT: nested FDEFs not allowed");m=!0}p=!0;u=l;s=d.pop();t.functionsDefined[s]={data:c,i:l}}else if(!p&&!y){s=d[d.length-1];if(isNaN(s))(0,r.info)("TT: CALL empty stack (or invalid entry).");else{t.functionsUsed[s]=!0;if(s in t.functionsStackDeltas){const e=d.length+t.functionsStackDeltas[s];if(e<0){(0,r.warn)("TT: CALL invalid functions stack delta.");t.hintsValid=!1;return}d.length=e}else if(s in t.functionsDefined&&!g.includes(s)){f.push({data:c,i:l,stackTop:d.length-1});g.push(s);if(!(o=t.functionsDefined[s])){(0,r.warn)("TT: CALL non-existent function");t.hintsValid=!1;return}c=o.data;l=o.i}}}if(!p&&!y){let e=0;k<=142?e=w[k]:k>=192&&k<=223?e=-1:k>=224&&(e=-2);if(k>=113&&k<=117){i=d.pop();isNaN(i)||(e=2*-i)}for(;e<0&&d.length>0;){d.pop();e++}for(;e>0;){d.push(NaN);e--}}}t.tooComplexToFollowFunctions=m;var C=[c];l>c.length&&C.push(new Uint8Array(l-c.length));if(u>h){(0,r.warn)("TT: complementing a missing function tail");C.push(new Uint8Array([34,45]))}!function(e,t){if(t.length>1){var a,r,i=0;for(a=0,r=t.length;a<r;a++)i+=t[a].length;i=i+3&-4;var n=new Uint8Array(i),s=0;for(a=0,r=t.length;a<r;a++){n.set(t[a],s);s+=t[a].length}e.data=n;e.length=i}}(e,C)}let S,x,A,F;if(I(t=new d.Stream(new Uint8Array(t.getBytes())))){const e=function(e,t){const{numFonts:a,offsetTable:i}=function(e){const t=(0,r.bytesToString)(e.getBytes(4));(0,r.assert)("ttcf"===t,"Must be a TrueType Collection font.");const a=e.getUint16(),i=e.getUint16(),n=e.getInt32()>>>0,s=[];for(let t=0;t<n;t++)s.push(e.getInt32()>>>0);const o={ttcTag:t,majorVersion:a,minorVersion:i,numFonts:n,offsetTable:s};switch(a){case 1:return o;case 2:o.dsigTag=e.getInt32()>>>0;o.dsigLength=e.getInt32()>>>0;o.dsigOffset=e.getInt32()>>>0;return o}throw new r.FormatError(`Invalid TrueType Collection majorVersion: ${a}.`)}(e);for(let n=0;n<a;n++){e.pos=(e.start||0)+i[n];const a=g(e),s=l(0,a.numTables);if(!s.name)throw new r.FormatError('TrueType Collection font must contain a "name" table.');const o=y(s.name);for(let e=0,r=o.length;e<r;e++)for(let r=0,i=o[e].length;r<i;r++){const i=o[e][r];if(i&&i.replace(/\s/g,"")===t)return{header:a,tables:s}}}throw new r.FormatError(`TrueType Collection does not contain "${t}" font.`)}(t,this.name);S=e.header;x=e.tables}else{S=g(t);x=l(0,S.numTables)}var E=!x["CFF "];if(E){if(!x.loca)throw new r.FormatError('Required "loca" table is not found');if(!x.glyf){(0,r.warn)('Required "glyf" table is not found -- trying to recover.');x.glyf={tag:"glyf",data:new Uint8Array(0)}}this.isOpenType=!1}else{const t=o.composite&&((o.cidToGidMap||[]).length>0||!(o.cMap instanceof u.IdentityCMap));if("OTTO"===S.version&&!t||!x.head||!x.hhea||!x.maxp||!x.post){F=new d.Stream(x["CFF "].data);A=new T(F,o);b(o);return this.convert(e,A,o)}delete x.glyf;delete x.loca;delete x.fpgm;delete x.prep;delete x["cvt "];this.isOpenType=!0}if(!x.maxp)throw new r.FormatError('Required "maxp" table is not found');t.pos=(t.start||0)+x.maxp.offset;var M=t.getInt32();const L=t.getUint16();let R=L+1,U=!0;if(R>65535){U=!1;R=L;(0,r.warn)("Not enough space in glyfs to duplicate first glyph.")}var q=0,j=0;if(M>=65536&&x.maxp.length>=22){t.pos+=8;if(t.getUint16()>2){x.maxp.data[14]=0;x.maxp.data[15]=2}t.pos+=4;q=t.getUint16();t.pos+=4;j=t.getUint16()}x.maxp.data[4]=R>>8;x.maxp.data[5]=255&R;var _=function(e,t,a,i){var n={functionsDefined:[],functionsUsed:[],functionsStackDeltas:[],tooComplexToFollowFunctions:!1,hintsValid:!0};e&&k(e,n);t&&k(t,n);e&&function(e,t){if(!e.tooComplexToFollowFunctions)if(e.functionsDefined.length>t){(0,r.warn)("TT: more functions defined than expected");e.hintsValid=!1}else for(var a=0,i=e.functionsUsed.length;a<i;a++){if(a>t){(0,r.warn)("TT: invalid function id: "+a);e.hintsValid=!1;return}if(e.functionsUsed[a]&&!e.functionsDefined[a]){(0,r.warn)("TT: undefined function: "+a);e.hintsValid=!1;return}}}(n,i);if(a&&1&a.length){var s=new Uint8Array(a.length+1);s.set(a.data);a.data=s}return n.hintsValid}(x.fpgm,x.prep,x["cvt "],q);if(!_){delete x.fpgm;delete x.prep;delete x["cvt "]}!function(e,t,a,i,n){if(t){e.pos=(e.start?e.start:0)+t.offset;e.pos+=4;e.pos+=2;e.pos+=2;e.pos+=2;e.pos+=2;e.pos+=2;e.pos+=2;e.pos+=2;e.pos+=2;e.pos+=2;e.pos+=2;e.pos+=8;e.pos+=2;var s=e.getUint16();if(s>i){(0,r.info)("The numOfMetrics ("+s+") should not be greater than the numGlyphs ("+i+")");s=i;t.data[34]=(65280&s)>>8;t.data[35]=255&s}var o=i-s-(a.length-4*s>>1);if(o>0){var c=new Uint8Array(a.length+2*o);c.set(a.data);if(n){c[a.length]=a.data[2];c[a.length+1]=a.data[3]}a.data=c}}else a&&(a.data=null)}(t,x.hhea,x.hmtx,R,U);if(!x.head)throw new r.FormatError('Required "head" table is not found');!function(e,t,i){var n,s,o,c,l=e.data,h=(n=l[0],s=l[1],o=l[2],c=l[3],(n<<24)+(s<<16)+(o<<8)+c);if(h>>16!=1){(0,r.info)("Attempting to fix invalid version in head table: "+h);l[0]=0;l[1]=1;l[2]=0;l[3]=0}var u=a(l[50],l[51]);if(u<0||u>1){(0,r.info)("Attempting to fix invalid indexToLocFormat in head table: "+u);var d=t+1;if(i===d<<1){l[50]=0;l[51]=0}else{if(i!==d<<2)throw new r.FormatError("Could not fix indexToLocFormat: "+u);l[50]=0;l[51]=1}}}(x.head,L,E?x.loca.length:0);var z=Object.create(null);if(E){var H=a(x.head.data[50],x.head.data[51]),G=function(e,t,a,r,i,n,s){var o,c,l;if(r){o=4;c=function(e,t){return e[t]<<24|e[t+1]<<16|e[t+2]<<8|e[t+3]};l=function(e,t,a){e[t]=a>>>24&255;e[t+1]=a>>16&255;e[t+2]=a>>8&255;e[t+3]=255&a}}else{o=2;c=function(e,t){return e[t]<<9|e[t+1]<<1};l=function(e,t,a){e[t]=a>>9&255;e[t+1]=a>>1&255}}var h=n?a+1:a,u=o*(1+h),d=new Uint8Array(u);d.set(e.data.subarray(0,u));e.data=d;var f,g,p=t.data,b=p.length,y=new Uint8Array(b),v=c(d,0),w=0,k=Object.create(null);l(d,0,w);for(f=0,g=o;f<a;f++,g+=o){var S=c(d,g);0===S&&(S=v);S>b&&(b+3&-4)===S&&(S=b);S>b&&(v=S);var C=m(p,v,S,y,w,i),x=C.length;0===x&&(k[f]=!0);C.sizeOfInstructions>s&&(s=C.sizeOfInstructions);l(d,g,w+=x);v=S}if(0===w){var A=new Uint8Array([0,1,0,0,0,0,0,0,0,0,0,0,0,0,49,0]);for(f=0,g=o;f<h;f++,g+=o)l(d,g,A.length);t.data=A}else if(n){var I=c(d,o);if(y.length>I+w)t.data=y.subarray(0,I+w);else{t.data=new Uint8Array(I+w);t.data.set(y.subarray(0,w))}t.data.set(y.subarray(0,I),w);l(e.data,d.length-o,w+I)}else t.data=y.subarray(0,w);return{missingGlyphs:k,maxSizeOfInstructions:s}}(x.loca,x.glyf,L,H,_,U,j);z=G.missingGlyphs;if(M>=65536&&x.maxp.length>=22){x.maxp.data[26]=G.maxSizeOfInstructions>>8;x.maxp.data[27]=255&G.maxSizeOfInstructions}}if(!x.hhea)throw new r.FormatError('Required "hhea" table is not found');if(0===x.hhea.data[10]&&0===x.hhea.data[11]){x.hhea.data[10]=255;x.hhea.data[11]=255}var W={unitsPerEm:a(x.head.data[18],x.head.data[19]),yMax:a(x.head.data[42],x.head.data[43]),yMin:f(x.head.data[38],x.head.data[39]),ascent:a(x.hhea.data[4],x.hhea.data[5]),descent:f(x.hhea.data[6],x.hhea.data[7])};this.ascent=W.ascent/W.unitsPerEm;this.descent=W.descent/W.unitsPerEm;x.post&&function(e,a,i){var n=(t.start?t.start:0)+e.offset;t.pos=n;var s,o=n+e.length,c=t.getInt32();t.getBytes(28);var l,h=!0;switch(c){case 65536:s=p;break;case 131072:var u=t.getUint16();if(u!==i){h=!1;break}var d=[];for(l=0;l<u;++l){var f=t.getUint16();if(f>=32768){h=!1;break}d.push(f)}if(!h)break;for(var g=[],m=[];t.pos<o;){var b=t.getByte();m.length=b;for(l=0;l<b;++l)m[l]=String.fromCharCode(t.getByte());g.push(m.join(""))}s=[];for(l=0;l<u;++l){var y=d[l];y<258?s.push(p[y]):s.push(g[y-258])}break;case 196608:break;default:(0,r.warn)("Unknown/unsupported post table version "+c);h=!1;a.defaultEncoding&&(s=a.defaultEncoding)}a.glyphNames=s}(x.post,o,L);x.post={tag:"post",data:D(o)};var X,V=[];function K(e){return!z[e]}if(o.composite){var Y=o.cidToGidMap||[],$=0===Y.length;o.cMap.forEach((function(e,t){if(t>65535)throw new r.FormatError("Max size of CID is 65,535");var a=-1;$?a=t:void 0!==Y[t]&&(a=Y[t]);a>=0&&a<L&&K(a)&&(V[e]=a)}))}else{var J=function(e,t,a,i){if(!e){(0,r.warn)("No cmap table available.");return{platformId:-1,encodingId:-1,mappings:[],hasShortCmap:!1}}var n,s=(t.start?t.start:0)+e.offset;t.pos=s;t.getUint16();for(var o,c=t.getUint16(),l=!1,h=0;h<c;h++){var u=t.getUint16(),d=t.getUint16(),f=t.getInt32()>>>0,g=!1;if(!o||o.platformId!==u||o.encodingId!==d){if(0===u&&0===d)g=!0;else if(1===u&&0===d)g=!0;else if(3!==u||1!==d||!i&&o){if(a&&3===u&&0===d){g=!0;l=!0}}else{g=!0;a||(l=!0)}g&&(o={platformId:u,encodingId:d,offset:f});if(l)break}}o&&(t.pos=s+o.offset);if(!o||-1===t.peekByte()){(0,r.warn)("Could not find a preferred cmap table.");return{platformId:-1,encodingId:-1,mappings:[],hasShortCmap:!1}}var m=t.getUint16();t.getUint16();t.getUint16();var p,b,y=!1,v=[];if(0===m){for(p=0;p<256;p++){var w=t.getByte();w&&v.push({charCode:p,glyphId:w})}y=!0}else if(4===m){var k=t.getUint16()>>1;t.getBytes(6);var S,C=[];for(S=0;S<k;S++)C.push({end:t.getUint16()});t.getUint16();for(S=0;S<k;S++)C[S].start=t.getUint16();for(S=0;S<k;S++)C[S].delta=t.getUint16();var x=0;for(S=0;S<k;S++){n=C[S];var A=t.getUint16();if(A){var I=(A>>1)-(k-S);n.offsetIndex=I;x=Math.max(x,I+n.end-n.start+1)}else n.offsetIndex=-1}var F=[];for(p=0;p<x;p++)F.push(t.getUint16());for(S=0;S<k;S++){s=(n=C[S]).start;var T=n.end,E=n.delta;I=n.offsetIndex;for(p=s;p<=T;p++)if(65535!==p){b=(b=I<0?p:F[I+p-s])+E&65535;v.push({charCode:p,glyphId:b})}}}else{if(6!==m){(0,r.warn)("cmap table has unsupported format: "+m);return{platformId:-1,encodingId:-1,mappings:[],hasShortCmap:!1}}var O=t.getUint16(),P=t.getUint16();for(p=0;p<P;p++){b=t.getUint16();var B=O+p;v.push({charCode:B,glyphId:b})}}v.sort((function(e,t){return e.charCode-t.charCode}));for(h=1;h<v.length;h++)if(v[h-1].charCode===v[h].charCode){v.splice(h,1);h--}return{platformId:o.platformId,encodingId:o.encodingId,mappings:v,hasShortCmap:y}}(x.cmap,t,this.isSymbolicFont,o.hasEncoding),Z=J.platformId,Q=J.encodingId,ee=J.mappings,te=ee.length;if(o.hasEncoding&&(3===Z&&1===Q||1===Z&&0===Q)||-1===Z&&-1===Q&&(0,s.getEncoding)(o.baseEncodingName)){var ae=[];"MacRomanEncoding"!==o.baseEncodingName&&"WinAnsiEncoding"!==o.baseEncodingName||(ae=(0,s.getEncoding)(o.baseEncodingName));var re=(0,n.getGlyphsUnicode)();for(X=0;X<256;X++){var ie,ne;if(ie=this.differences&&X in this.differences?this.differences[X]:X in ae&&""!==ae[X]?ae[X]:s.StandardEncoding[X]){ne=v(ie,re);var se;3===Z&&1===Q?se=re[ne]:1===Z&&0===Q&&(se=s.MacRomanEncoding.indexOf(ne));var oe=!1;for(let e=0;e<te;++e)if(ee[e].charCode===se){V[X]=ee[e].glyphId;oe=!0;break}if(!oe&&o.glyphNames){var ce=o.glyphNames.indexOf(ie);-1===ce&&ne!==ie&&(ce=o.glyphNames.indexOf(ne));ce>0&&K(ce)&&(V[X]=ce)}}}}else if(0===Z&&0===Q)for(let e=0;e<te;++e)V[ee[e].charCode]=ee[e].glyphId;else for(let e=0;e<te;++e){X=ee[e].charCode;3===Z&&X>=61440&&X<=61695&&(X&=255);V[X]=ee[e].glyphId}}0===V.length&&(V[0]=0);let le=R-1;U||(le=0);var he=O(V,K,le);this.toFontChar=he.toFontChar;x.cmap={tag:"cmap",data:P(he.charCodeToGlyphId,R)};x["OS/2"]&&function(e){var t=new d.Stream(e.data),a=t.getUint16();t.getBytes(60);var r=t.getUint16();if(a<4&&768&r)return!1;if(t.getUint16()>t.getUint16())return!1;t.getBytes(6);if(0===t.getUint16())return!1;e.data[8]=e.data[9]=0;return!0}(x["OS/2"])||(x["OS/2"]={tag:"OS/2",data:B(o,he.charCodeToGlyphId,W)});if(!E)try{F=new d.Stream(x["CFF "].data);A=new i.CFFParser(F,o,!0).parse();A.duplicateFirstGlyph();var ue=new i.CFFCompiler(A);x["CFF "].data=ue.compile()}catch(e){(0,r.warn)("Failed to compile font "+o.loadedName)}if(x.name){var de=y(x.name);x.name.data=N(e,de)}else x.name={tag:"name",data:N(this.name)};var fe=new C(S.version);for(var ge in x)fe.addTable(ge,x[ge].data);return fe.toArray()},convert:function(e,t,a){a.fixedPitch=!1;a.builtInEncoding&&function(e,t){if(!e.hasIncludedToUnicodeMap&&!(e.hasEncoding||t===e.defaultEncoding||e.toUnicode instanceof S)){var a=[],r=(0,n.getGlyphsUnicode)();for(var i in t){var s=t[i],o=(0,c.getUnicodeForGlyph)(s,r);-1!==o&&(a[i]=String.fromCharCode(o))}e.toUnicode.amend(a)}}(a,a.builtInEncoding);let i=1;t instanceof T&&(i=t.numGlyphs-1);var o=t.getGlyphMapping(a),l=O(o,t.hasGlyphId.bind(t),i);this.toFontChar=l.toFontChar;var h=t.numGlyphs;function u(e,t){var a=null;for(var r in e)if(t===e[r]){a||(a=[]);a.push(0|r)}return a}function d(e,t){for(var a in e)if(t===e[a])return 0|a;l.charCodeToGlyphId[l.nextAvailableFontCharCode]=t;return l.nextAvailableFontCharCode++}var f=t.seacs;if(f&&f.length){var g=a.fontMatrix||r.FONT_IDENTITY_MATRIX,m=t.getCharset(),p=Object.create(null);for(var b in f){var y=f[b|=0],v=s.StandardEncoding[y[2]],w=s.StandardEncoding[y[3]],k=m.indexOf(v),I=m.indexOf(w);if(!(k<0||I<0)){var F={x:y[0]*g[0]+y[1]*g[2]+g[4],y:y[0]*g[1]+y[1]*g[3]+g[5]},E=u(o,b);if(E)for(var M=0,L=E.length;M<L;M++){var R=E[M],U=l.charCodeToGlyphId,q=d(U,k),j=d(U,I);p[R]={baseFontCharCode:q,accentFontCharCode:j,accentOffset:F}}}}a.seacMap=p}var _=1/(a.fontMatrix||r.FONT_IDENTITY_MATRIX)[0],z=new C("OTTO");z.addTable("CFF ",t.data);z.addTable("OS/2",B(a,l.charCodeToGlyphId));z.addTable("cmap",P(l.charCodeToGlyphId,h));z.addTable("head","\0\0\0\0\0\0\0\0\0\0_<õ\0\0"+A(_)+"\0\0\0\0\v~'\0\0\0\0\v~'\0\0"+A(a.descent)+"ÿ"+A(a.ascent)+x(a.italicAngle?2:0)+"\0\0\0\0\0\0\0");z.addTable("hhea","\0\0\0"+A(a.ascent)+A(a.descent)+"\0\0ÿÿ\0\0\0\0\0\0"+A(a.capHeight)+A(Math.tan(a.italicAngle)*a.xHeight)+"\0\0\0\0\0\0\0\0\0\0\0\0"+x(h));z.addTable("hmtx",function(){for(var e=t.charstrings,a=t.cff?t.cff.widths:null,r="\0\0\0\0",i=1,n=h;i<n;i++){var s=0;if(e){var o=e[i-1];s="width"in o?o.width:0}else a&&(s=Math.ceil(a[i]||0));r+=x(s)+x(0)}return r}());z.addTable("maxp","\0\0P\0"+x(h));z.addTable("name",N(e));z.addTable("post",D(a));return z.toArray()},get spaceWidth(){if("_shadowWidth"in this)return this._shadowWidth;for(var e,t=["space","minus","one","i","I"],a=0,r=t.length;a<r;a++){var i=t[a];if(i in this.widths){e=this.widths[i];break}var s=(0,n.getGlyphsUnicode)()[i],o=0;this.composite&&this.cMap.contains(s)&&(o=this.cMap.lookup(s));!o&&this.toUnicode&&(o=this.toUnicode.charCodeOf(s));o<=0&&(o=s);if(e=this.widths[o])break}e=e||this.defaultWidth;this._shadowWidth=e;return e},charToGlyph:function(e,t){var a,i,n,s=e;this.cMap&&this.cMap.contains(e)&&(s=this.cMap.lookup(e));i=this.widths[s];i=(0,r.isNum)(i)?i:this.defaultWidth;var o=this.vmetrics&&this.vmetrics[s];let l=this.toUnicode.get(e)||this.fallbackToUnicode.get(e)||e;"number"==typeof l&&(l=String.fromCharCode(l));var h=e in this.toFontChar;a=this.toFontChar[e]||e;if(this.missingFile){const t=this.differences[e]||this.defaultEncoding[e];".notdef"!==t&&""!==t||"Type1"!==this.type||(a=32);a=(0,c.mapSpecialUnicodeValues)(a)}this.isType3Font&&(n=a);var u=null;if(this.seacMap&&this.seacMap[e]){h=!0;var d=this.seacMap[e];a=d.baseFontCharCode;u={fontChar:String.fromCodePoint(d.accentFontCharCode),offset:d.accentOffset}}var f="number"==typeof a?String.fromCodePoint(a):"",g=this.glyphCache[e];if(!g||!g.matchesForCache(f,l,u,i,o,n,t,h)){g=new w(f,l,u,i,o,n,t,h);this.glyphCache[e]=g}return g},charsToGlyphs:function(e){var t,a,r,i=this.charsCache;if(i&&(t=i[e]))return t;i||(i=this.charsCache=Object.create(null));t=[];var n,s=e,o=0;if(this.cMap)for(var c=Object.create(null);o<e.length;){this.cMap.readCharCode(e,o,c);r=c.charcode;var l=c.length;o+=l;var h=1===l&&32===e.charCodeAt(o-1);a=this.charToGlyph(r,h);t.push(a)}else for(o=0,n=e.length;o<n;++o){r=e.charCodeAt(o);a=this.charToGlyph(r,32===r);t.push(a)}return i[s]=t},get glyphCacheValues(){return Object.values(this.glyphCache)}};return e}();t.Font=x;var A=function(){function e(e){this.error=e;this.loadedName="g_font_error";this.missingFile=!0}e.prototype={charsToGlyphs:function(){return[]},exportData:function(){return{error:this.error}}};return e}();t.ErrorFont=A;function I(e,t,a){var r,i,o,c=Object.create(null),l=!!(e.flags&m.Symbolic);if(e.baseEncodingName){o=(0,s.getEncoding)(e.baseEncodingName);for(i=0;i<o.length;i++){r=a.indexOf(o[i]);c[i]=r>=0?r:0}}else if(l)for(i in t)c[i]=t[i];else{o=s.StandardEncoding;for(i=0;i<o.length;i++){r=a.indexOf(o[i]);c[i]=r>=0?r:0}}var h,u=e.differences;if(u)for(i in u){var d=u[i];if(-1===(r=a.indexOf(d))){h||(h=(0,n.getGlyphsUnicode)());var f=v(d,h);f!==d&&(r=a.indexOf(f))}c[i]=r>=0?r:0}return c}var F=function(){function e(e,t,a){for(var r,i=e.length,n=t.length,s=i-n,o=a,c=!1;o<s;){r=0;for(;r<n&&e[o+r]===t[r];)r++;if(r>=n){o+=r;for(;o<i&&(0,l.isWhiteSpace)(e[o]);)o++;c=!0;break}o++}return{found:c,length:o}}function t(t,a,i){var n=i.length1,s=(i.length2,a.peekBytes(6)),o=128===s[0]&&1===s[1];if(o){a.skip(6);n=s[5]<<24|s[4]<<16|s[3]<<8|s[2]}var c=function(t,a){var i,n,s,o,c=[101,101,120,101,99],h=t.pos;try{n=(i=t.getBytes(a)).length}catch(e){if(e instanceof l.MissingDataException)throw e}if(n===a&&(s=e(i,c,a-2*c.length)).found&&s.length===a)return{stream:new d.Stream(i),length:a};(0,r.warn)('Invalid "Length1" property in Type1 font -- trying to recover.');t.pos=h;for(;;){if(0===(s=e(t.peekBytes(2048),c,0)).length)break;t.pos+=s.length;if(s.found){o=t.pos-h;break}}t.pos=h;if(o)return{stream:new d.Stream(t.getBytes(o)),length:o};(0,r.warn)('Unable to recover "Length1" property in Type1 font -- using as is.');return{stream:new d.Stream(t.getBytes(a)),length:a}}(a,n);new f.Type1Parser(c.stream,!1,!0).extractFontHeader(i);o&&(s=a.getBytes(6))[5]<<24|s[4]<<16|s[3]<<8|s[2];var h,u=(h=a.getBytes(),{stream:new d.Stream(h),length:h.length}),g=new f.Type1Parser(u.stream,!0,!0).extractFontProgram(i);for(var m in g.properties)i[m]=g.properties[m];var p=g.charstrings,b=this.getType2Charstrings(p),y=this.getType2Subrs(g.subrs);this.charstrings=p;this.data=this.wrap(t,b,this.charstrings,y,i);this.seacs=this.getSeacs(g.charstrings)}t.prototype={get numGlyphs(){return this.charstrings.length+1},getCharset:function(){for(var e=[".notdef"],t=this.charstrings,a=0;a<t.length;a++)e.push(t[a].glyphName);return e},getGlyphMapping:function(e){var t,a=this.charstrings,r=[".notdef"];for(t=0;t<a.length;t++)r.push(a[t].glyphName);var i=e.builtInEncoding;if(i){var n=Object.create(null);for(var s in i)(t=r.indexOf(i[s]))>=0&&(n[s]=t)}return I(e,n,r)},hasGlyphId:function(e){return!(e<0||e>=this.numGlyphs)&&(0===e||this.charstrings[e-1].charstring.length>0)},getSeacs:function(e){var t,a,r=[];for(t=0,a=e.length;t<a;t++){var i=e[t];i.seac&&(r[t+1]=i.seac)}return r},getType2Charstrings:function(e){for(var t=[],a=0,r=e.length;a<r;a++)t.push(e[a].charstring);return t},getType2Subrs:function(e){var t=0,a=e.length;t=a<1133?107:a<33769?1131:32768;var r,i=[];for(r=0;r<t;r++)i.push([11]);for(r=0;r<a;r++)i.push(e[r]);return i},wrap:function(e,t,a,r,n){var s=new i.CFF;s.header=new i.CFFHeader(1,0,4,4);s.names=[e];var o=new i.CFFTopDict;o.setByName("version",391);o.setByName("Notice",392);o.setByName("FullName",393);o.setByName("FamilyName",394);o.setByName("Weight",395);o.setByName("Encoding",null);o.setByName("FontMatrix",n.fontMatrix);o.setByName("FontBBox",n.bbox);o.setByName("charset",null);o.setByName("CharStrings",null);o.setByName("Private",null);s.topDict=o;var c=new i.CFFStrings;c.add("Version 0.11");c.add("See original notice");c.add(e);c.add(e);c.add("Medium");s.strings=c;s.globalSubrIndex=new i.CFFIndex;var l,h,u=t.length,d=[".notdef"];for(l=0;l<u;l++){const e=a[l].glyphName;-1===i.CFFStandardStrings.indexOf(e)&&c.add(e);d.push(e)}s.charset=new i.CFFCharset(!1,0,d);var f=new i.CFFIndex;f.add([139,14]);for(l=0;l<u;l++)f.add(t[l]);s.charStrings=f;var g=new i.CFFPrivateDict;g.setByName("Subrs",null);var m=["BlueValues","OtherBlues","FamilyBlues","FamilyOtherBlues","StemSnapH","StemSnapV","BlueShift","BlueFuzz","BlueScale","LanguageGroup","ExpansionFactor","ForceBold","StdHW","StdVW"];for(l=0,h=m.length;l<h;l++){var p=m[l];if(p in n.privateData){var b=n.privateData[p];if(Array.isArray(b))for(var y=b.length-1;y>0;y--)b[y]-=b[y-1];g.setByName(p,b)}}s.topDict.privateDict=g;var v=new i.CFFIndex;for(l=0,h=r.length;l<h;l++)v.add(r[l]);g.subrsIndex=v;return new i.CFFCompiler(s).compile()}};return t}(),T=function(){function e(e,t){this.properties=t;var a=new i.CFFParser(e,t,!0);this.cff=a.parse();this.cff.duplicateFirstGlyph();var n=new i.CFFCompiler(this.cff);this.seacs=this.cff.seacs;try{this.data=n.compile()}catch(a){(0,r.warn)("Failed to compile font "+t.loadedName);this.data=e}}e.prototype={get numGlyphs(){return this.cff.charStrings.count},getCharset:function(){return this.cff.charset.charset},getGlyphMapping:function(){var e,t,a=this.cff,r=this.properties,i=a.charset.charset;if(r.composite){e=Object.create(null);let s;if(a.isCIDFont)for(t=0;t<i.length;t++){var n=i[t];s=r.cMap.charCodeOf(n);e[s]=t}else for(t=0;t<a.charStrings.count;t++){s=r.cMap.charCodeOf(t);e[s]=t}return e}return e=I(r,a.encoding?a.encoding.encoding:null,i)},hasGlyphId:function(e){return this.cff.hasGlyphId(e)}};return e}()},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.CFFFDSelect=t.CFFCompiler=t.CFFPrivateDict=t.CFFTopDict=t.CFFCharset=t.CFFIndex=t.CFFStrings=t.CFFHeader=t.CFF=t.CFFParser=t.CFFStandardStrings=void 0;var r=a(2),i=a(29),n=a(30),s=[".notdef","space","exclam","quotedbl","numbersign","dollar","percent","ampersand","quoteright","parenleft","parenright","asterisk","plus","comma","hyphen","period","slash","zero","one","two","three","four","five","six","seven","eight","nine","colon","semicolon","less","equal","greater","question","at","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","bracketleft","backslash","bracketright","asciicircum","underscore","quoteleft","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","braceleft","bar","braceright","asciitilde","exclamdown","cent","sterling","fraction","yen","florin","section","currency","quotesingle","quotedblleft","guillemotleft","guilsinglleft","guilsinglright","fi","fl","endash","dagger","daggerdbl","periodcentered","paragraph","bullet","quotesinglbase","quotedblbase","quotedblright","guillemotright","ellipsis","perthousand","questiondown","grave","acute","circumflex","tilde","macron","breve","dotaccent","dieresis","ring","cedilla","hungarumlaut","ogonek","caron","emdash","AE","ordfeminine","Lslash","Oslash","OE","ordmasculine","ae","dotlessi","lslash","oslash","oe","germandbls","onesuperior","logicalnot","mu","trademark","Eth","onehalf","plusminus","Thorn","onequarter","divide","brokenbar","degree","thorn","threequarters","twosuperior","registered","minus","eth","multiply","threesuperior","copyright","Aacute","Acircumflex","Adieresis","Agrave","Aring","Atilde","Ccedilla","Eacute","Ecircumflex","Edieresis","Egrave","Iacute","Icircumflex","Idieresis","Igrave","Ntilde","Oacute","Ocircumflex","Odieresis","Ograve","Otilde","Scaron","Uacute","Ucircumflex","Udieresis","Ugrave","Yacute","Ydieresis","Zcaron","aacute","acircumflex","adieresis","agrave","aring","atilde","ccedilla","eacute","ecircumflex","edieresis","egrave","iacute","icircumflex","idieresis","igrave","ntilde","oacute","ocircumflex","odieresis","ograve","otilde","scaron","uacute","ucircumflex","udieresis","ugrave","yacute","ydieresis","zcaron","exclamsmall","Hungarumlautsmall","dollaroldstyle","dollarsuperior","ampersandsmall","Acutesmall","parenleftsuperior","parenrightsuperior","twodotenleader","onedotenleader","zerooldstyle","oneoldstyle","twooldstyle","threeoldstyle","fouroldstyle","fiveoldstyle","sixoldstyle","sevenoldstyle","eightoldstyle","nineoldstyle","commasuperior","threequartersemdash","periodsuperior","questionsmall","asuperior","bsuperior","centsuperior","dsuperior","esuperior","isuperior","lsuperior","msuperior","nsuperior","osuperior","rsuperior","ssuperior","tsuperior","ff","ffi","ffl","parenleftinferior","parenrightinferior","Circumflexsmall","hyphensuperior","Gravesmall","Asmall","Bsmall","Csmall","Dsmall","Esmall","Fsmall","Gsmall","Hsmall","Ismall","Jsmall","Ksmall","Lsmall","Msmall","Nsmall","Osmall","Psmall","Qsmall","Rsmall","Ssmall","Tsmall","Usmall","Vsmall","Wsmall","Xsmall","Ysmall","Zsmall","colonmonetary","onefitted","rupiah","Tildesmall","exclamdownsmall","centoldstyle","Lslashsmall","Scaronsmall","Zcaronsmall","Dieresissmall","Brevesmall","Caronsmall","Dotaccentsmall","Macronsmall","figuredash","hypheninferior","Ogoneksmall","Ringsmall","Cedillasmall","questiondownsmall","oneeighth","threeeighths","fiveeighths","seveneighths","onethird","twothirds","zerosuperior","foursuperior","fivesuperior","sixsuperior","sevensuperior","eightsuperior","ninesuperior","zeroinferior","oneinferior","twoinferior","threeinferior","fourinferior","fiveinferior","sixinferior","seveninferior","eightinferior","nineinferior","centinferior","dollarinferior","periodinferior","commainferior","Agravesmall","Aacutesmall","Acircumflexsmall","Atildesmall","Adieresissmall","Aringsmall","AEsmall","Ccedillasmall","Egravesmall","Eacutesmall","Ecircumflexsmall","Edieresissmall","Igravesmall","Iacutesmall","Icircumflexsmall","Idieresissmall","Ethsmall","Ntildesmall","Ogravesmall","Oacutesmall","Ocircumflexsmall","Otildesmall","Odieresissmall","OEsmall","Oslashsmall","Ugravesmall","Uacutesmall","Ucircumflexsmall","Udieresissmall","Yacutesmall","Thornsmall","Ydieresissmall","001.000","001.001","001.002","001.003","Black","Bold","Book","Light","Medium","Regular","Roman","Semibold"];t.CFFStandardStrings=s;var o=function(){var e=[null,{id:"hstem",min:2,stackClearing:!0,stem:!0},null,{id:"vstem",min:2,stackClearing:!0,stem:!0},{id:"vmoveto",min:1,stackClearing:!0},{id:"rlineto",min:2,resetStack:!0},{id:"hlineto",min:1,resetStack:!0},{id:"vlineto",min:1,resetStack:!0},{id:"rrcurveto",min:6,resetStack:!0},null,{id:"callsubr",min:1,undefStack:!0},{id:"return",min:0,undefStack:!0},null,null,{id:"endchar",min:0,stackClearing:!0},null,null,null,{id:"hstemhm",min:2,stackClearing:!0,stem:!0},{id:"hintmask",min:0,stackClearing:!0},{id:"cntrmask",min:0,stackClearing:!0},{id:"rmoveto",min:2,stackClearing:!0},{id:"hmoveto",min:1,stackClearing:!0},{id:"vstemhm",min:2,stackClearing:!0,stem:!0},{id:"rcurveline",min:8,resetStack:!0},{id:"rlinecurve",min:8,resetStack:!0},{id:"vvcurveto",min:4,resetStack:!0},{id:"hhcurveto",min:4,resetStack:!0},null,{id:"callgsubr",min:1,undefStack:!0},{id:"vhcurveto",min:4,resetStack:!0},{id:"hvcurveto",min:4,resetStack:!0}],t=[null,null,null,{id:"and",min:2,stackDelta:-1},{id:"or",min:2,stackDelta:-1},{id:"not",min:1,stackDelta:0},null,null,null,{id:"abs",min:1,stackDelta:0},{id:"add",min:2,stackDelta:-1,stackFn:function(e,t){e[t-2]=e[t-2]+e[t-1]}},{id:"sub",min:2,stackDelta:-1,stackFn:function(e,t){e[t-2]=e[t-2]-e[t-1]}},{id:"div",min:2,stackDelta:-1,stackFn:function(e,t){e[t-2]=e[t-2]/e[t-1]}},null,{id:"neg",min:1,stackDelta:0,stackFn:function(e,t){e[t-1]=-e[t-1]}},{id:"eq",min:2,stackDelta:-1},null,null,{id:"drop",min:1,stackDelta:-1},null,{id:"put",min:2,stackDelta:-2},{id:"get",min:1,stackDelta:0},{id:"ifelse",min:4,stackDelta:-3},{id:"random",min:0,stackDelta:1},{id:"mul",min:2,stackDelta:-1,stackFn:function(e,t){e[t-2]=e[t-2]*e[t-1]}},null,{id:"sqrt",min:1,stackDelta:0},{id:"dup",min:1,stackDelta:1},{id:"exch",min:2,stackDelta:0},{id:"index",min:2,stackDelta:0},{id:"roll",min:3,stackDelta:-2},null,null,null,{id:"hflex",min:7,resetStack:!0},{id:"flex",min:13,resetStack:!0},{id:"hflex1",min:9,resetStack:!0},{id:"flex1",min:11,resetStack:!0}];function a(e,t,a){this.bytes=e.getBytes();this.properties=t;this.seacAnalysisEnabled=!!a}a.prototype={parse:function(){var e=this.properties,t=new c;this.cff=t;var a=this.parseHeader(),r=this.parseIndex(a.endPos),i=this.parseIndex(r.endPos),n=this.parseIndex(i.endPos),s=this.parseIndex(n.endPos),o=this.parseDict(i.obj.get(0)),l=this.createDict(f,o,t.strings);t.header=a.obj;t.names=this.parseNameIndex(r.obj);t.strings=this.parseStringIndex(n.obj);t.topDict=l;t.globalSubrIndex=s.obj;this.parsePrivateDict(t.topDict);t.isCIDFont=l.hasName("ROS");var h=l.getByName("CharStrings"),u=this.parseIndex(h).obj,d=l.getByName("FontMatrix");d&&(e.fontMatrix=d);var g,m,p=l.getByName("FontBBox");if(p){e.ascent=Math.max(p[3],p[1]);e.descent=Math.min(p[1],p[3]);e.ascentScaled=!0}if(t.isCIDFont){for(var b=this.parseIndex(l.getByName("FDArray")).obj,y=0,v=b.count;y<v;++y){var w=b.get(y),k=this.createDict(f,this.parseDict(w),t.strings);this.parsePrivateDict(k);t.fdArray.push(k)}m=null;g=this.parseCharsets(l.getByName("charset"),u.count,t.strings,!0);t.fdSelect=this.parseFDSelect(l.getByName("FDSelect"),u.count)}else{g=this.parseCharsets(l.getByName("charset"),u.count,t.strings,!1);m=this.parseEncoding(l.getByName("Encoding"),e,t.strings,g.charset)}t.charset=g;t.encoding=m;var S=this.parseCharStrings({charStrings:u,localSubrIndex:l.privateDict.subrsIndex,globalSubrIndex:s.obj,fdSelect:t.fdSelect,fdArray:t.fdArray,privateDict:l.privateDict});t.charStrings=S.charStrings;t.seacs=S.seacs;t.widths=S.widths;return t},parseHeader:function(){for(var e=this.bytes,t=e.length,a=0;a<t&&1!==e[a];)++a;if(a>=t)throw new r.FormatError("Invalid CFF header");if(0!==a){(0,r.info)("cff data is shifted");e=e.subarray(a);this.bytes=e}var i=e[0],n=e[1],s=e[2],o=e[3];return{obj:new l(i,n,s,o),endPos:s}},parseDict:function(e){var t=0;function a(){var a=e[t++];if(30===a)return function(){var a="";const r=["0","1","2","3","4","5","6","7","8","9",".","E","E-",null,"-"];var i=e.length;for(;t<i;){var n=e[t++],s=n>>4,o=15&n;if(15===s)break;a+=r[s];if(15===o)break;a+=r[o]}return parseFloat(a)}();if(28===a)return a=((a=e[t++])<<24|e[t++]<<16)>>16;if(29===a)return a=(a=(a=(a=e[t++])<<8|e[t++])<<8|e[t++])<<8|e[t++];if(a>=32&&a<=246)return a-139;if(a>=247&&a<=250)return 256*(a-247)+e[t++]+108;if(a>=251&&a<=254)return-256*(a-251)-e[t++]-108;(0,r.warn)('CFFParser_parseDict: "'+a+'" is a reserved command.');return NaN}var i=[],n=[];t=0;for(var s=e.length;t<s;){var o=e[t];if(o<=21){12===o&&(o=o<<8|e[++t]);n.push([o,i]);i=[];++t}else i.push(a())}return n},parseIndex:function(e){var t,a,r=new u,i=this.bytes,n=i[e++]<<8|i[e++],s=[],o=e;if(0!==n){var c=i[e++],l=e+(n+1)*c-1;for(t=0,a=n+1;t<a;++t){for(var h=0,d=0;d<c;++d){h<<=8;h+=i[e++]}s.push(l+h)}o=s[n]}for(t=0,a=s.length-1;t<a;++t){var f=s[t],g=s[t+1];r.add(i.subarray(f,g))}return{obj:r,endPos:o}},parseNameIndex:function(e){for(var t=[],a=0,i=e.count;a<i;++a){var n=e.get(a);t.push((0,r.bytesToString)(n))}return t},parseStringIndex:function(e){for(var t=new h,a=0,i=e.count;a<i;++a){var n=e.get(a);t.add((0,r.bytesToString)(n))}return t},createDict:function(e,t,a){for(var r=new e(a),i=0,n=t.length;i<n;++i){var s=t[i],o=s[0],c=s[1];r.setByKey(o,c)}return r},parseCharString:function(a,i,n,s){if(!i||a.callDepth>10)return!1;for(var o=a.stackSize,c=a.stack,l=i.length,h=0;h<l;){var u=i[h++],d=null;if(12===u){var f=i[h++];if(0===f){i[h-2]=139;i[h-1]=22;o=0}else d=t[f]}else if(28===u){c[o]=(i[h]<<24|i[h+1]<<16)>>16;h+=2;o++}else if(14===u){if(o>=4){o-=4;if(this.seacAnalysisEnabled){a.seac=c.slice(o,o+4);return!1}}d=e[u]}else if(u>=32&&u<=246){c[o]=u-139;o++}else if(u>=247&&u<=254){c[o]=u<251?(u-247<<8)+i[h]+108:-(u-251<<8)-i[h]-108;h++;o++}else if(255===u){c[o]=(i[h]<<24|i[h+1]<<16|i[h+2]<<8|i[h+3])/65536;h+=4;o++}else if(19===u||20===u){a.hints+=o>>1;h+=a.hints+7>>3;o%=2;d=e[u]}else{if(10===u||29===u){var g;if(!(g=10===u?n:s)){d=e[u];(0,r.warn)("Missing subrsIndex for "+d.id);return!1}var m=32768;g.count<1240?m=107:g.count<33900&&(m=1131);var p=c[--o]+m;if(p<0||p>=g.count||isNaN(p)){d=e[u];(0,r.warn)("Out of bounds subrIndex for "+d.id);return!1}a.stackSize=o;a.callDepth++;if(!this.parseCharString(a,g.get(p),n,s))return!1;a.callDepth--;o=a.stackSize;continue}if(11===u){a.stackSize=o;return!0}d=e[u]}if(d){if(d.stem){a.hints+=o>>1;if(3===u||23===u)a.hasVStems=!0;else if(a.hasVStems&&(1===u||18===u)){(0,r.warn)("CFF stem hints are in wrong order");i[h-1]=1===u?3:23}}if("min"in d&&!a.undefStack&&o<d.min){(0,r.warn)("Not enough parameters for "+d.id+"; actual: "+o+", expected: "+d.min);return!1}if(a.firstStackClearing&&d.stackClearing){a.firstStackClearing=!1;(o-=d.min)>=2&&d.stem?o%=2:o>1&&(0,r.warn)("Found too many parameters for stack-clearing command");o>0&&c[o-1]>=0&&(a.width=c[o-1])}if("stackDelta"in d){"stackFn"in d&&d.stackFn(c,o);o+=d.stackDelta}else if(d.stackClearing)o=0;else if(d.resetStack){o=0;a.undefStack=!1}else if(d.undefStack){o=0;a.undefStack=!0;a.firstStackClearing=!1}}}a.stackSize=o;return!0},parseCharStrings({charStrings:e,localSubrIndex:t,globalSubrIndex:a,fdSelect:i,fdArray:n,privateDict:s}){for(var o=[],c=[],l=e.count,h=0;h<l;h++){var u=e.get(h),d={callDepth:0,stackSize:0,stack:[],undefStack:!0,hints:0,firstStackClearing:!0,seac:null,width:null,hasVStems:!1},f=!0,g=null,m=s;if(i&&n.length){var p=i.getFDIndex(h);if(-1===p){(0,r.warn)("Glyph index is not in fd select.");f=!1}if(p>=n.length){(0,r.warn)("Invalid fd index for glyph index.");f=!1}f&&(g=(m=n[p].privateDict).subrsIndex)}else t&&(g=t);f&&(f=this.parseCharString(d,u,g,a));if(null!==d.width){const e=m.getByName("nominalWidthX");c[h]=e+d.width}else{const e=m.getByName("defaultWidthX");c[h]=e}null!==d.seac&&(o[h]=d.seac);f||e.set(h,new Uint8Array([14]))}return{charStrings:e,seacs:o,widths:c}},emptyPrivateDictionary:function(e){var t=this.createDict(g,[],e.strings);e.setByKey(18,[0,0]);e.privateDict=t},parsePrivateDict:function(e){if(e.hasName("Private")){var t=e.getByName("Private");if(Array.isArray(t)&&2===t.length){var a=t[0],r=t[1];if(0===a||r>=this.bytes.length)this.emptyPrivateDictionary(e);else{var i=r+a,n=this.bytes.subarray(r,i),s=this.parseDict(n),o=this.createDict(g,s,e.strings);e.privateDict=o;if(o.getByName("Subrs")){var c=o.getByName("Subrs"),l=r+c;if(0===c||l>=this.bytes.length)this.emptyPrivateDictionary(e);else{var h=this.parseIndex(l);o.subrsIndex=h.obj}}}}else e.removeByName("Private")}else this.emptyPrivateDictionary(e)},parseCharsets:function(e,t,a,n){if(0===e)return new p(!0,m.ISO_ADOBE,i.ISOAdobeCharset);if(1===e)return new p(!0,m.EXPERT,i.ExpertCharset);if(2===e)return new p(!0,m.EXPERT_SUBSET,i.ExpertSubsetCharset);var s,o,c,l=this.bytes,h=e,u=l[e++],d=[".notdef"];t-=1;switch(u){case 0:for(c=0;c<t;c++){s=l[e++]<<8|l[e++];d.push(n?s:a.get(s))}break;case 1:for(;d.length<=t;){s=l[e++]<<8|l[e++];o=l[e++];for(c=0;c<=o;c++)d.push(n?s++:a.get(s++))}break;case 2:for(;d.length<=t;){s=l[e++]<<8|l[e++];o=l[e++]<<8|l[e++];for(c=0;c<=o;c++)d.push(n?s++:a.get(s++))}break;default:throw new r.FormatError("Unknown charset format")}var f=e,g=l.subarray(h,f);return new p(!1,u,d,g)},parseEncoding:function(e,t,a,i){var s,o,c,l=Object.create(null),h=this.bytes,u=!1,d=null;if(0===e||1===e){u=!0;s=e;var f=e?n.ExpertEncoding:n.StandardEncoding;for(o=0,c=i.length;o<c;o++){var g=f.indexOf(i[o]);-1!==g&&(l[g]=o)}}else{var m=e;switch(127&(s=h[e++])){case 0:var p=h[e++];for(o=1;o<=p;o++)l[h[e++]]=o;break;case 1:var y=h[e++],v=1;for(o=0;o<y;o++)for(var w=h[e++],k=h[e++],S=w;S<=w+k;S++)l[S]=v++;break;default:throw new r.FormatError(`Unknown encoding format: ${s} in CFF`)}var C=e;if(128&s){h[m]&=127;!function(){var t=h[e++];for(o=0;o<t;o++){var r=h[e++],n=(h[e++]<<8)+(255&h[e++]);l[r]=i.indexOf(a.get(n))}}()}d=h.subarray(m,C)}return new b(u,s&=127,l,d)},parseFDSelect:function(e,t){var a,i=this.bytes,n=i[e++],s=[];switch(n){case 0:for(a=0;a<t;++a){var o=i[e++];s.push(o)}break;case 3:var c=i[e++]<<8|i[e++];for(a=0;a<c;++a){var l=i[e++]<<8|i[e++];if(0===a&&0!==l){(0,r.warn)("parseFDSelect: The first range must have a first GID of 0 -- trying to recover.");l=0}for(var h=i[e++],u=i[e]<<8|i[e+1],d=l;d<u;++d)s.push(h)}e+=2;break;default:throw new r.FormatError(`parseFDSelect: Unknown format "${n}".`)}if(s.length!==t)throw new r.FormatError("parseFDSelect: Invalid font data.");return new y(n,s)}};return a}();t.CFFParser=o;var c=function(){function e(){this.header=null;this.names=[];this.topDict=null;this.strings=new h;this.globalSubrIndex=null;this.encoding=null;this.charset=null;this.charStrings=null;this.fdArray=[];this.fdSelect=null;this.isCIDFont=!1}e.prototype={duplicateFirstGlyph:function(){if(this.charStrings.count>=65535)(0,r.warn)("Not enough space in charstrings to duplicate first glyph.");else{var e=this.charStrings.get(0);this.charStrings.add(e);this.isCIDFont&&this.fdSelect.fdSelect.push(this.fdSelect.fdSelect[0])}},hasGlyphId:function(e){return!(e<0||e>=this.charStrings.count)&&this.charStrings.get(e).length>0}};return e}();t.CFF=c;var l=function(e,t,a,r){this.major=e;this.minor=t;this.hdrSize=a;this.offSize=r};t.CFFHeader=l;var h=function(){function e(){this.strings=[]}e.prototype={get:function(e){return e>=0&&e<=390?s[e]:e-391<=this.strings.length?this.strings[e-391]:s[0]},getSID:function(e){let t=s.indexOf(e);if(-1!==t)return t;t=this.strings.indexOf(e);return-1!==t?t+391:-1},add:function(e){this.strings.push(e)},get count(){return this.strings.length}};return e}();t.CFFStrings=h;var u=function(){function e(){this.objects=[];this.length=0}e.prototype={add:function(e){this.length+=e.length;this.objects.push(e)},set:function(e,t){this.length+=t.length-this.objects[e].length;this.objects[e]=t},get:function(e){return this.objects[e]},get count(){return this.objects.length}};return e}();t.CFFIndex=u;var d=function(){function e(e,t){this.keyToNameMap=e.keyToNameMap;this.nameToKeyMap=e.nameToKeyMap;this.defaults=e.defaults;this.types=e.types;this.opcodes=e.opcodes;this.order=e.order;this.strings=t;this.values=Object.create(null)}e.prototype={setByKey:function(e,t){if(!(e in this.keyToNameMap))return!1;var a=t.length;if(0===a)return!0;for(var i=0;i<a;i++)if(isNaN(t[i])){(0,r.warn)('Invalid CFFDict value: "'+t+'" for key "'+e+'".');return!0}var n=this.types[e];"num"!==n&&"sid"!==n&&"offset"!==n||(t=t[0]);this.values[e]=t;return!0},setByName:function(e,t){if(!(e in this.nameToKeyMap))throw new r.FormatError(`Invalid dictionary name "${e}"`);this.values[this.nameToKeyMap[e]]=t},hasName:function(e){return this.nameToKeyMap[e]in this.values},getByName:function(e){if(!(e in this.nameToKeyMap))throw new r.FormatError(`Invalid dictionary name ${e}"`);var t=this.nameToKeyMap[e];return t in this.values?this.values[t]:this.defaults[t]},removeByName:function(e){delete this.values[this.nameToKeyMap[e]]}};e.createTables=function(e){for(var t={keyToNameMap:{},nameToKeyMap:{},defaults:{},types:{},opcodes:{},order:[]},a=0,r=e.length;a<r;++a){var i=e[a],n=Array.isArray(i[0])?(i[0][0]<<8)+i[0][1]:i[0];t.keyToNameMap[n]=i[1];t.nameToKeyMap[i[1]]=n;t.types[n]=i[2];t.defaults[n]=i[3];t.opcodes[n]=Array.isArray(i[0])?i[0]:[i[0]];t.order.push(n)}return t};return e}(),f=function(){var e=[[[12,30],"ROS",["sid","sid","num"],null],[[12,20],"SyntheticBase","num",null],[0,"version","sid",null],[1,"Notice","sid",null],[[12,0],"Copyright","sid",null],[2,"FullName","sid",null],[3,"FamilyName","sid",null],[4,"Weight","sid",null],[[12,1],"isFixedPitch","num",0],[[12,2],"ItalicAngle","num",0],[[12,3],"UnderlinePosition","num",-100],[[12,4],"UnderlineThickness","num",50],[[12,5],"PaintType","num",0],[[12,6],"CharstringType","num",2],[[12,7],"FontMatrix",["num","num","num","num","num","num"],[.001,0,0,.001,0,0]],[13,"UniqueID","num",null],[5,"FontBBox",["num","num","num","num"],[0,0,0,0]],[[12,8],"StrokeWidth","num",0],[14,"XUID","array",null],[15,"charset","offset",0],[16,"Encoding","offset",0],[17,"CharStrings","offset",0],[18,"Private",["offset","offset"],null],[[12,21],"PostScript","sid",null],[[12,22],"BaseFontName","sid",null],[[12,23],"BaseFontBlend","delta",null],[[12,31],"CIDFontVersion","num",0],[[12,32],"CIDFontRevision","num",0],[[12,33],"CIDFontType","num",0],[[12,34],"CIDCount","num",8720],[[12,35],"UIDBase","num",null],[[12,37],"FDSelect","offset",null],[[12,36],"FDArray","offset",null],[[12,38],"FontName","sid",null]],t=null;function a(a){null===t&&(t=d.createTables(e));d.call(this,t,a);this.privateDict=null}a.prototype=Object.create(d.prototype);return a}();t.CFFTopDict=f;var g=function(){var e=[[6,"BlueValues","delta",null],[7,"OtherBlues","delta",null],[8,"FamilyBlues","delta",null],[9,"FamilyOtherBlues","delta",null],[[12,9],"BlueScale","num",.039625],[[12,10],"BlueShift","num",7],[[12,11],"BlueFuzz","num",1],[10,"StdHW","num",null],[11,"StdVW","num",null],[[12,12],"StemSnapH","delta",null],[[12,13],"StemSnapV","delta",null],[[12,14],"ForceBold","num",0],[[12,17],"LanguageGroup","num",0],[[12,18],"ExpansionFactor","num",.06],[[12,19],"initialRandomSeed","num",0],[20,"defaultWidthX","num",0],[21,"nominalWidthX","num",0],[19,"Subrs","offset",null]],t=null;function a(a){null===t&&(t=d.createTables(e));d.call(this,t,a);this.subrsIndex=null}a.prototype=Object.create(d.prototype);return a}();t.CFFPrivateDict=g;var m={ISO_ADOBE:0,EXPERT:1,EXPERT_SUBSET:2},p=function(e,t,a,r){this.predefined=e;this.format=t;this.charset=a;this.raw=r};t.CFFCharset=p;var b=function(e,t,a,r){this.predefined=e;this.format=t;this.encoding=a;this.raw=r},y=function(){function e(e,t){this.format=e;this.fdSelect=t}e.prototype={getFDIndex:function(e){return e<0||e>=this.fdSelect.length?-1:this.fdSelect[e]}};return e}();t.CFFFDSelect=y;var v=function(){function e(){this.offsets=Object.create(null)}e.prototype={isTracking:function(e){return e in this.offsets},track:function(e,t){if(e in this.offsets)throw new r.FormatError(`Already tracking location of ${e}`);this.offsets[e]=t},offset:function(e){for(var t in this.offsets)this.offsets[t]+=e},setEntryLocation:function(e,t,a){if(!(e in this.offsets))throw new r.FormatError(`Not tracking location of ${e}`);for(var i=a.data,n=this.offsets[e],s=0,o=t.length;s<o;++s){var c=5*s+n,l=c+1,h=c+2,u=c+3,d=c+4;if(29!==i[c]||0!==i[l]||0!==i[h]||0!==i[u]||0!==i[d])throw new r.FormatError("writing to an offset that is not empty");var f=t[s];i[c]=29;i[l]=f>>24&255;i[h]=f>>16&255;i[u]=f>>8&255;i[d]=255&f}}};return e}(),w=function(){function e(e){this.cff=e}e.prototype={compile:function(){var e=this.cff,t={data:[],length:0,add:function(e){this.data=this.data.concat(e);this.length=this.data.length}},a=this.compileHeader(e.header);t.add(a);var i=this.compileNameIndex(e.names);t.add(i);if(e.isCIDFont&&e.topDict.hasName("FontMatrix")){var n=e.topDict.getByName("FontMatrix");e.topDict.removeByName("FontMatrix");for(var s=0,o=e.fdArray.length;s<o;s++){var c=e.fdArray[s],l=n.slice(0);c.hasName("FontMatrix")&&(l=r.Util.transform(l,c.getByName("FontMatrix")));c.setByName("FontMatrix",l)}}e.topDict.setByName("charset",0);var h=this.compileTopDicts([e.topDict],t.length,e.isCIDFont);t.add(h.output);var u=h.trackers[0],d=this.compileStringIndex(e.strings.strings);t.add(d);var f=this.compileIndex(e.globalSubrIndex);t.add(f);if(e.encoding&&e.topDict.hasName("Encoding"))if(e.encoding.predefined)u.setEntryLocation("Encoding",[e.encoding.format],t);else{var g=this.compileEncoding(e.encoding);u.setEntryLocation("Encoding",[t.length],t);t.add(g)}var m=this.compileCharset(e.charset,e.charStrings.count,e.strings,e.isCIDFont);u.setEntryLocation("charset",[t.length],t);t.add(m);var p=this.compileCharStrings(e.charStrings);u.setEntryLocation("CharStrings",[t.length],t);t.add(p);if(e.isCIDFont){u.setEntryLocation("FDSelect",[t.length],t);var b=this.compileFDSelect(e.fdSelect);t.add(b);h=this.compileTopDicts(e.fdArray,t.length,!0);u.setEntryLocation("FDArray",[t.length],t);t.add(h.output);var y=h.trackers;this.compilePrivateDicts(e.fdArray,y,t)}this.compilePrivateDicts([e.topDict],[u],t);t.add([0]);return t.data},encodeNumber:function(e){return parseFloat(e)!==parseInt(e,10)||isNaN(e)?this.encodeFloat(e):this.encodeInteger(e)},encodeFloat:function(e){var t=e.toString(),a=/\.(\d*?)(?:9{5,20}|0{5,20})\d{0,2}(?:e(.+)|$)/.exec(t);if(a){var r=parseFloat("1e"+((a[2]?+a[2]:0)+a[1].length));t=(Math.round(e*r)/r).toString()}var i,n,s="";for(i=0,n=t.length;i<n;++i){var o=t[i];s+="e"===o?"-"===t[++i]?"c":"b":"."===o?"a":"-"===o?"e":o}var c=[30];for(i=0,n=(s+=1&s.length?"f":"ff").length;i<n;i+=2)c.push(parseInt(s.substring(i,i+2),16));return c},encodeInteger:function(e){return e>=-107&&e<=107?[e+139]:e>=108&&e<=1131?[247+((e-=108)>>8),255&e]:e>=-1131&&e<=-108?[251+((e=-e-108)>>8),255&e]:e>=-32768&&e<=32767?[28,e>>8&255,255&e]:[29,e>>24&255,e>>16&255,e>>8&255,255&e]},compileHeader:function(e){return[e.major,e.minor,e.hdrSize,e.offSize]},compileNameIndex:function(e){for(var t=new u,a=0,i=e.length;a<i;++a){for(var n=e[a],s=Math.min(n.length,127),o=new Array(s),c=0;c<s;c++){var l=n[c];(l<"!"||l>"~"||"["===l||"]"===l||"("===l||")"===l||"{"===l||"}"===l||"<"===l||">"===l||"/"===l||"%"===l)&&(l="_");o[c]=l}""===(o=o.join(""))&&(o="Bad_Font_Name");t.add((0,r.stringToBytes)(o))}return this.compileIndex(t)},compileTopDicts:function(e,t,a){for(var r=[],i=new u,n=0,s=e.length;n<s;++n){var o=e[n];if(a){o.removeByName("CIDFontVersion");o.removeByName("CIDFontRevision");o.removeByName("CIDFontType");o.removeByName("CIDCount");o.removeByName("UIDBase")}var c=new v,l=this.compileDict(o,c);r.push(c);i.add(l);c.offset(t)}return{trackers:r,output:i=this.compileIndex(i,r)}},compilePrivateDicts:function(e,t,a){for(var i=0,n=e.length;i<n;++i){var s=e[i],o=s.privateDict;if(!o||!s.hasName("Private"))throw new r.FormatError("There must be a private dictionary.");var c=new v,l=this.compileDict(o,c),h=a.length;c.offset(h);l.length||(h=0);t[i].setEntryLocation("Private",[l.length,h],a);a.add(l);if(o.subrsIndex&&o.hasName("Subrs")){var u=this.compileIndex(o.subrsIndex);c.setEntryLocation("Subrs",[l.length],a);a.add(u)}}},compileDict:function(e,t){for(var a=[],i=e.order,n=0;n<i.length;++n){var s=i[n];if(s in e.values){var o=e.values[s],c=e.types[s];Array.isArray(c)||(c=[c]);Array.isArray(o)||(o=[o]);if(0!==o.length){for(var l=0,h=c.length;l<h;++l){var u=c[l],d=o[l];switch(u){case"num":case"sid":a=a.concat(this.encodeNumber(d));break;case"offset":var f=e.keyToNameMap[s];t.isTracking(f)||t.track(f,a.length);a=a.concat([29,0,0,0,0]);break;case"array":case"delta":a=a.concat(this.encodeNumber(d));for(var g=1,m=o.length;g<m;++g)a=a.concat(this.encodeNumber(o[g]));break;default:throw new r.FormatError(`Unknown data type of ${u}`)}}a=a.concat(e.opcodes[s])}}}return a},compileStringIndex:function(e){for(var t=new u,a=0,i=e.length;a<i;++a)t.add((0,r.stringToBytes)(e[a]));return this.compileIndex(t)},compileGlobalSubrIndex:function(){var e=this.cff.globalSubrIndex;this.out.writeByteArray(this.compileIndex(e))},compileCharStrings:function(e){for(var t=new u,a=0;a<e.count;a++){var r=e.get(a);0!==r.length?t.add(r):t.add(new Uint8Array([139,14]))}return this.compileIndex(t)},compileCharset:function(e,t,a,i){let n;const s=t-1;if(i)n=new Uint8Array([2,0,0,s>>8&255,255&s]);else{n=new Uint8Array(1+2*s);n[0]=0;let t=0;const i=e.charset.length;let o=!1;for(let s=1;s<n.length;s+=2){let c=0;if(t<i){const i=e.charset[t++];c=a.getSID(i);if(-1===c){c=0;if(!o){o=!0;(0,r.warn)(`Couldn't find ${i} in CFF strings`)}}}n[s]=c>>8&255;n[s+1]=255&c}}return this.compileTypedArray(n)},compileEncoding:function(e){return this.compileTypedArray(e.raw)},compileFDSelect:function(e){const t=e.format;let a,r;switch(t){case 0:a=new Uint8Array(1+e.fdSelect.length);a[0]=t;for(r=0;r<e.fdSelect.length;r++)a[r+1]=e.fdSelect[r];break;case 3:const i=0;let n=e.fdSelect[0];const s=[t,0,0,i>>8&255,255&i,n];for(r=1;r<e.fdSelect.length;r++){const t=e.fdSelect[r];if(t!==n){s.push(r>>8&255,255&r,t);n=t}}const o=(s.length-3)/3;s[1]=o>>8&255;s[2]=255&o;s.push(r>>8&255,255&r);a=new Uint8Array(s)}return this.compileTypedArray(a)},compileTypedArray:function(e){for(var t=[],a=0,r=e.length;a<r;++a)t[a]=e[a];return t},compileIndex:function(e,t){t=t||[];var a=e.objects,r=a.length;if(0===r)return[0,0,0];var i,n,s=[r>>8&255,255&r],o=1;for(i=0;i<r;++i)o+=a[i].length;n=o<256?1:o<65536?2:o<16777216?3:4;s.push(n);var c=1;for(i=0;i<r+1;i++){1===n?s.push(255&c):2===n?s.push(c>>8&255,255&c):3===n?s.push(c>>16&255,c>>8&255,255&c):s.push(c>>>24&255,c>>16&255,c>>8&255,255&c);a[i]&&(c+=a[i].length)}for(i=0;i<r;i++){t[i]&&t[i].offset(s.length);for(var l=0,h=a[i].length;l<h;l++)s.push(a[i][l])}return s}};return e}();t.CFFCompiler=w},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.ExpertSubsetCharset=t.ExpertCharset=t.ISOAdobeCharset=void 0;t.ISOAdobeCharset=[".notdef","space","exclam","quotedbl","numbersign","dollar","percent","ampersand","quoteright","parenleft","parenright","asterisk","plus","comma","hyphen","period","slash","zero","one","two","three","four","five","six","seven","eight","nine","colon","semicolon","less","equal","greater","question","at","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","bracketleft","backslash","bracketright","asciicircum","underscore","quoteleft","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","braceleft","bar","braceright","asciitilde","exclamdown","cent","sterling","fraction","yen","florin","section","currency","quotesingle","quotedblleft","guillemotleft","guilsinglleft","guilsinglright","fi","fl","endash","dagger","daggerdbl","periodcentered","paragraph","bullet","quotesinglbase","quotedblbase","quotedblright","guillemotright","ellipsis","perthousand","questiondown","grave","acute","circumflex","tilde","macron","breve","dotaccent","dieresis","ring","cedilla","hungarumlaut","ogonek","caron","emdash","AE","ordfeminine","Lslash","Oslash","OE","ordmasculine","ae","dotlessi","lslash","oslash","oe","germandbls","onesuperior","logicalnot","mu","trademark","Eth","onehalf","plusminus","Thorn","onequarter","divide","brokenbar","degree","thorn","threequarters","twosuperior","registered","minus","eth","multiply","threesuperior","copyright","Aacute","Acircumflex","Adieresis","Agrave","Aring","Atilde","Ccedilla","Eacute","Ecircumflex","Edieresis","Egrave","Iacute","Icircumflex","Idieresis","Igrave","Ntilde","Oacute","Ocircumflex","Odieresis","Ograve","Otilde","Scaron","Uacute","Ucircumflex","Udieresis","Ugrave","Yacute","Ydieresis","Zcaron","aacute","acircumflex","adieresis","agrave","aring","atilde","ccedilla","eacute","ecircumflex","edieresis","egrave","iacute","icircumflex","idieresis","igrave","ntilde","oacute","ocircumflex","odieresis","ograve","otilde","scaron","uacute","ucircumflex","udieresis","ugrave","yacute","ydieresis","zcaron"];t.ExpertCharset=[".notdef","space","exclamsmall","Hungarumlautsmall","dollaroldstyle","dollarsuperior","ampersandsmall","Acutesmall","parenleftsuperior","parenrightsuperior","twodotenleader","onedotenleader","comma","hyphen","period","fraction","zerooldstyle","oneoldstyle","twooldstyle","threeoldstyle","fouroldstyle","fiveoldstyle","sixoldstyle","sevenoldstyle","eightoldstyle","nineoldstyle","colon","semicolon","commasuperior","threequartersemdash","periodsuperior","questionsmall","asuperior","bsuperior","centsuperior","dsuperior","esuperior","isuperior","lsuperior","msuperior","nsuperior","osuperior","rsuperior","ssuperior","tsuperior","ff","fi","fl","ffi","ffl","parenleftinferior","parenrightinferior","Circumflexsmall","hyphensuperior","Gravesmall","Asmall","Bsmall","Csmall","Dsmall","Esmall","Fsmall","Gsmall","Hsmall","Ismall","Jsmall","Ksmall","Lsmall","Msmall","Nsmall","Osmall","Psmall","Qsmall","Rsmall","Ssmall","Tsmall","Usmall","Vsmall","Wsmall","Xsmall","Ysmall","Zsmall","colonmonetary","onefitted","rupiah","Tildesmall","exclamdownsmall","centoldstyle","Lslashsmall","Scaronsmall","Zcaronsmall","Dieresissmall","Brevesmall","Caronsmall","Dotaccentsmall","Macronsmall","figuredash","hypheninferior","Ogoneksmall","Ringsmall","Cedillasmall","onequarter","onehalf","threequarters","questiondownsmall","oneeighth","threeeighths","fiveeighths","seveneighths","onethird","twothirds","zerosuperior","onesuperior","twosuperior","threesuperior","foursuperior","fivesuperior","sixsuperior","sevensuperior","eightsuperior","ninesuperior","zeroinferior","oneinferior","twoinferior","threeinferior","fourinferior","fiveinferior","sixinferior","seveninferior","eightinferior","nineinferior","centinferior","dollarinferior","periodinferior","commainferior","Agravesmall","Aacutesmall","Acircumflexsmall","Atildesmall","Adieresissmall","Aringsmall","AEsmall","Ccedillasmall","Egravesmall","Eacutesmall","Ecircumflexsmall","Edieresissmall","Igravesmall","Iacutesmall","Icircumflexsmall","Idieresissmall","Ethsmall","Ntildesmall","Ogravesmall","Oacutesmall","Ocircumflexsmall","Otildesmall","Odieresissmall","OEsmall","Oslashsmall","Ugravesmall","Uacutesmall","Ucircumflexsmall","Udieresissmall","Yacutesmall","Thornsmall","Ydieresissmall"];t.ExpertSubsetCharset=[".notdef","space","dollaroldstyle","dollarsuperior","parenleftsuperior","parenrightsuperior","twodotenleader","onedotenleader","comma","hyphen","period","fraction","zerooldstyle","oneoldstyle","twooldstyle","threeoldstyle","fouroldstyle","fiveoldstyle","sixoldstyle","sevenoldstyle","eightoldstyle","nineoldstyle","colon","semicolon","commasuperior","threequartersemdash","periodsuperior","asuperior","bsuperior","centsuperior","dsuperior","esuperior","isuperior","lsuperior","msuperior","nsuperior","osuperior","rsuperior","ssuperior","tsuperior","ff","fi","fl","ffi","ffl","parenleftinferior","parenrightinferior","hyphensuperior","colonmonetary","onefitted","rupiah","centoldstyle","figuredash","hypheninferior","onequarter","onehalf","threequarters","oneeighth","threeeighths","fiveeighths","seveneighths","onethird","twothirds","zerosuperior","onesuperior","twosuperior","threesuperior","foursuperior","fivesuperior","sixsuperior","sevensuperior","eightsuperior","ninesuperior","zeroinferior","oneinferior","twoinferior","threeinferior","fourinferior","fiveinferior","sixinferior","seveninferior","eightinferior","nineinferior","centinferior","dollarinferior","periodinferior","commainferior"]},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.getEncoding=function(e){switch(e){case"WinAnsiEncoding":return o;case"StandardEncoding":return s;case"MacRomanEncoding":return n;case"SymbolSetEncoding":return c;case"ZapfDingbatsEncoding":return l;case"ExpertEncoding":return r;case"MacExpertEncoding":return i;default:return null}};t.ExpertEncoding=t.ZapfDingbatsEncoding=t.SymbolSetEncoding=t.MacRomanEncoding=t.StandardEncoding=t.WinAnsiEncoding=void 0;const r=["","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","space","exclamsmall","Hungarumlautsmall","","dollaroldstyle","dollarsuperior","ampersandsmall","Acutesmall","parenleftsuperior","parenrightsuperior","twodotenleader","onedotenleader","comma","hyphen","period","fraction","zerooldstyle","oneoldstyle","twooldstyle","threeoldstyle","fouroldstyle","fiveoldstyle","sixoldstyle","sevenoldstyle","eightoldstyle","nineoldstyle","colon","semicolon","commasuperior","threequartersemdash","periodsuperior","questionsmall","","asuperior","bsuperior","centsuperior","dsuperior","esuperior","","","","isuperior","","","lsuperior","msuperior","nsuperior","osuperior","","","rsuperior","ssuperior","tsuperior","","ff","fi","fl","ffi","ffl","parenleftinferior","","parenrightinferior","Circumflexsmall","hyphensuperior","Gravesmall","Asmall","Bsmall","Csmall","Dsmall","Esmall","Fsmall","Gsmall","Hsmall","Ismall","Jsmall","Ksmall","Lsmall","Msmall","Nsmall","Osmall","Psmall","Qsmall","Rsmall","Ssmall","Tsmall","Usmall","Vsmall","Wsmall","Xsmall","Ysmall","Zsmall","colonmonetary","onefitted","rupiah","Tildesmall","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","exclamdownsmall","centoldstyle","Lslashsmall","","","Scaronsmall","Zcaronsmall","Dieresissmall","Brevesmall","Caronsmall","","Dotaccentsmall","","","Macronsmall","","","figuredash","hypheninferior","","","Ogoneksmall","Ringsmall","Cedillasmall","","","","onequarter","onehalf","threequarters","questiondownsmall","oneeighth","threeeighths","fiveeighths","seveneighths","onethird","twothirds","","","zerosuperior","onesuperior","twosuperior","threesuperior","foursuperior","fivesuperior","sixsuperior","sevensuperior","eightsuperior","ninesuperior","zeroinferior","oneinferior","twoinferior","threeinferior","fourinferior","fiveinferior","sixinferior","seveninferior","eightinferior","nineinferior","centinferior","dollarinferior","periodinferior","commainferior","Agravesmall","Aacutesmall","Acircumflexsmall","Atildesmall","Adieresissmall","Aringsmall","AEsmall","Ccedillasmall","Egravesmall","Eacutesmall","Ecircumflexsmall","Edieresissmall","Igravesmall","Iacutesmall","Icircumflexsmall","Idieresissmall","Ethsmall","Ntildesmall","Ogravesmall","Oacutesmall","Ocircumflexsmall","Otildesmall","Odieresissmall","OEsmall","Oslashsmall","Ugravesmall","Uacutesmall","Ucircumflexsmall","Udieresissmall","Yacutesmall","Thornsmall","Ydieresissmall"];t.ExpertEncoding=r;const i=["","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","space","exclamsmall","Hungarumlautsmall","centoldstyle","dollaroldstyle","dollarsuperior","ampersandsmall","Acutesmall","parenleftsuperior","parenrightsuperior","twodotenleader","onedotenleader","comma","hyphen","period","fraction","zerooldstyle","oneoldstyle","twooldstyle","threeoldstyle","fouroldstyle","fiveoldstyle","sixoldstyle","sevenoldstyle","eightoldstyle","nineoldstyle","colon","semicolon","","threequartersemdash","","questionsmall","","","","","Ethsmall","","","onequarter","onehalf","threequarters","oneeighth","threeeighths","fiveeighths","seveneighths","onethird","twothirds","","","","","","","ff","fi","fl","ffi","ffl","parenleftinferior","","parenrightinferior","Circumflexsmall","hypheninferior","Gravesmall","Asmall","Bsmall","Csmall","Dsmall","Esmall","Fsmall","Gsmall","Hsmall","Ismall","Jsmall","Ksmall","Lsmall","Msmall","Nsmall","Osmall","Psmall","Qsmall","Rsmall","Ssmall","Tsmall","Usmall","Vsmall","Wsmall","Xsmall","Ysmall","Zsmall","colonmonetary","onefitted","rupiah","Tildesmall","","","asuperior","centsuperior","","","","","Aacutesmall","Agravesmall","Acircumflexsmall","Adieresissmall","Atildesmall","Aringsmall","Ccedillasmall","Eacutesmall","Egravesmall","Ecircumflexsmall","Edieresissmall","Iacutesmall","Igravesmall","Icircumflexsmall","Idieresissmall","Ntildesmall","Oacutesmall","Ogravesmall","Ocircumflexsmall","Odieresissmall","Otildesmall","Uacutesmall","Ugravesmall","Ucircumflexsmall","Udieresissmall","","eightsuperior","fourinferior","threeinferior","sixinferior","eightinferior","seveninferior","Scaronsmall","","centinferior","twoinferior","","Dieresissmall","","Caronsmall","osuperior","fiveinferior","","commainferior","periodinferior","Yacutesmall","","dollarinferior","","","Thornsmall","","nineinferior","zeroinferior","Zcaronsmall","AEsmall","Oslashsmall","questiondownsmall","oneinferior","Lslashsmall","","","","","","","Cedillasmall","","","","","","OEsmall","figuredash","hyphensuperior","","","","","exclamdownsmall","","Ydieresissmall","","onesuperior","twosuperior","threesuperior","foursuperior","fivesuperior","sixsuperior","sevensuperior","ninesuperior","zerosuperior","","esuperior","rsuperior","tsuperior","","","isuperior","ssuperior","dsuperior","","","","","","lsuperior","Ogoneksmall","Brevesmall","Macronsmall","bsuperior","nsuperior","msuperior","commasuperior","periodsuperior","Dotaccentsmall","Ringsmall","","","",""],n=["","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","space","exclam","quotedbl","numbersign","dollar","percent","ampersand","quotesingle","parenleft","parenright","asterisk","plus","comma","hyphen","period","slash","zero","one","two","three","four","five","six","seven","eight","nine","colon","semicolon","less","equal","greater","question","at","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","bracketleft","backslash","bracketright","asciicircum","underscore","grave","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","braceleft","bar","braceright","asciitilde","","Adieresis","Aring","Ccedilla","Eacute","Ntilde","Odieresis","Udieresis","aacute","agrave","acircumflex","adieresis","atilde","aring","ccedilla","eacute","egrave","ecircumflex","edieresis","iacute","igrave","icircumflex","idieresis","ntilde","oacute","ograve","ocircumflex","odieresis","otilde","uacute","ugrave","ucircumflex","udieresis","dagger","degree","cent","sterling","section","bullet","paragraph","germandbls","registered","copyright","trademark","acute","dieresis","notequal","AE","Oslash","infinity","plusminus","lessequal","greaterequal","yen","mu","partialdiff","summation","product","pi","integral","ordfeminine","ordmasculine","Omega","ae","oslash","questiondown","exclamdown","logicalnot","radical","florin","approxequal","Delta","guillemotleft","guillemotright","ellipsis","space","Agrave","Atilde","Otilde","OE","oe","endash","emdash","quotedblleft","quotedblright","quoteleft","quoteright","divide","lozenge","ydieresis","Ydieresis","fraction","currency","guilsinglleft","guilsinglright","fi","fl","daggerdbl","periodcentered","quotesinglbase","quotedblbase","perthousand","Acircumflex","Ecircumflex","Aacute","Edieresis","Egrave","Iacute","Icircumflex","Idieresis","Igrave","Oacute","Ocircumflex","apple","Ograve","Uacute","Ucircumflex","Ugrave","dotlessi","circumflex","tilde","macron","breve","dotaccent","ring","cedilla","hungarumlaut","ogonek","caron"];t.MacRomanEncoding=n;const s=["","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","space","exclam","quotedbl","numbersign","dollar","percent","ampersand","quoteright","parenleft","parenright","asterisk","plus","comma","hyphen","period","slash","zero","one","two","three","four","five","six","seven","eight","nine","colon","semicolon","less","equal","greater","question","at","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","bracketleft","backslash","bracketright","asciicircum","underscore","quoteleft","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","braceleft","bar","braceright","asciitilde","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","exclamdown","cent","sterling","fraction","yen","florin","section","currency","quotesingle","quotedblleft","guillemotleft","guilsinglleft","guilsinglright","fi","fl","","endash","dagger","daggerdbl","periodcentered","","paragraph","bullet","quotesinglbase","quotedblbase","quotedblright","guillemotright","ellipsis","perthousand","","questiondown","","grave","acute","circumflex","tilde","macron","breve","dotaccent","dieresis","","ring","cedilla","","hungarumlaut","ogonek","caron","emdash","","","","","","","","","","","","","","","","","AE","","ordfeminine","","","","","Lslash","Oslash","OE","ordmasculine","","","","","","ae","","","","dotlessi","","","lslash","oslash","oe","germandbls","","","",""];t.StandardEncoding=s;const o=["","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","space","exclam","quotedbl","numbersign","dollar","percent","ampersand","quotesingle","parenleft","parenright","asterisk","plus","comma","hyphen","period","slash","zero","one","two","three","four","five","six","seven","eight","nine","colon","semicolon","less","equal","greater","question","at","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","bracketleft","backslash","bracketright","asciicircum","underscore","grave","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","braceleft","bar","braceright","asciitilde","bullet","Euro","bullet","quotesinglbase","florin","quotedblbase","ellipsis","dagger","daggerdbl","circumflex","perthousand","Scaron","guilsinglleft","OE","bullet","Zcaron","bullet","bullet","quoteleft","quoteright","quotedblleft","quotedblright","bullet","endash","emdash","tilde","trademark","scaron","guilsinglright","oe","bullet","zcaron","Ydieresis","space","exclamdown","cent","sterling","currency","yen","brokenbar","section","dieresis","copyright","ordfeminine","guillemotleft","logicalnot","hyphen","registered","macron","degree","plusminus","twosuperior","threesuperior","acute","mu","paragraph","periodcentered","cedilla","onesuperior","ordmasculine","guillemotright","onequarter","onehalf","threequarters","questiondown","Agrave","Aacute","Acircumflex","Atilde","Adieresis","Aring","AE","Ccedilla","Egrave","Eacute","Ecircumflex","Edieresis","Igrave","Iacute","Icircumflex","Idieresis","Eth","Ntilde","Ograve","Oacute","Ocircumflex","Otilde","Odieresis","multiply","Oslash","Ugrave","Uacute","Ucircumflex","Udieresis","Yacute","Thorn","germandbls","agrave","aacute","acircumflex","atilde","adieresis","aring","ae","ccedilla","egrave","eacute","ecircumflex","edieresis","igrave","iacute","icircumflex","idieresis","eth","ntilde","ograve","oacute","ocircumflex","otilde","odieresis","divide","oslash","ugrave","uacute","ucircumflex","udieresis","yacute","thorn","ydieresis"];t.WinAnsiEncoding=o;const c=["","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","space","exclam","universal","numbersign","existential","percent","ampersand","suchthat","parenleft","parenright","asteriskmath","plus","comma","minus","period","slash","zero","one","two","three","four","five","six","seven","eight","nine","colon","semicolon","less","equal","greater","question","congruent","Alpha","Beta","Chi","Delta","Epsilon","Phi","Gamma","Eta","Iota","theta1","Kappa","Lambda","Mu","Nu","Omicron","Pi","Theta","Rho","Sigma","Tau","Upsilon","sigma1","Omega","Xi","Psi","Zeta","bracketleft","therefore","bracketright","perpendicular","underscore","radicalex","alpha","beta","chi","delta","epsilon","phi","gamma","eta","iota","phi1","kappa","lambda","mu","nu","omicron","pi","theta","rho","sigma","tau","upsilon","omega1","omega","xi","psi","zeta","braceleft","bar","braceright","similar","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","Euro","Upsilon1","minute","lessequal","fraction","infinity","florin","club","diamond","heart","spade","arrowboth","arrowleft","arrowup","arrowright","arrowdown","degree","plusminus","second","greaterequal","multiply","proportional","partialdiff","bullet","divide","notequal","equivalence","approxequal","ellipsis","arrowvertex","arrowhorizex","carriagereturn","aleph","Ifraktur","Rfraktur","weierstrass","circlemultiply","circleplus","emptyset","intersection","union","propersuperset","reflexsuperset","notsubset","propersubset","reflexsubset","element","notelement","angle","gradient","registerserif","copyrightserif","trademarkserif","product","radical","dotmath","logicalnot","logicaland","logicalor","arrowdblboth","arrowdblleft","arrowdblup","arrowdblright","arrowdbldown","lozenge","angleleft","registersans","copyrightsans","trademarksans","summation","parenlefttp","parenleftex","parenleftbt","bracketlefttp","bracketleftex","bracketleftbt","bracelefttp","braceleftmid","braceleftbt","braceex","","angleright","integral","integraltp","integralex","integralbt","parenrighttp","parenrightex","parenrightbt","bracketrighttp","bracketrightex","bracketrightbt","bracerighttp","bracerightmid","bracerightbt",""];t.SymbolSetEncoding=c;const l=["","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","space","a1","a2","a202","a3","a4","a5","a119","a118","a117","a11","a12","a13","a14","a15","a16","a105","a17","a18","a19","a20","a21","a22","a23","a24","a25","a26","a27","a28","a6","a7","a8","a9","a10","a29","a30","a31","a32","a33","a34","a35","a36","a37","a38","a39","a40","a41","a42","a43","a44","a45","a46","a47","a48","a49","a50","a51","a52","a53","a54","a55","a56","a57","a58","a59","a60","a61","a62","a63","a64","a65","a66","a67","a68","a69","a70","a71","a72","a73","a74","a203","a75","a204","a76","a77","a78","a79","a81","a82","a83","a84","a97","a98","a99","a100","","a89","a90","a93","a94","a91","a92","a205","a85","a206","a86","a87","a88","a95","a96","","","","","","","","","","","","","","","","","","","","a101","a102","a103","a104","a106","a107","a108","a112","a111","a110","a109","a120","a121","a122","a123","a124","a125","a126","a127","a128","a129","a130","a131","a132","a133","a134","a135","a136","a137","a138","a139","a140","a141","a142","a143","a144","a145","a146","a147","a148","a149","a150","a151","a152","a153","a154","a155","a156","a157","a158","a159","a160","a161","a163","a164","a196","a165","a192","a166","a167","a168","a169","a170","a171","a172","a173","a162","a174","a175","a176","a177","a178","a179","a193","a180","a199","a181","a200","a182","","a201","a183","a184","a197","a185","a194","a198","a186","a195","a187","a188","a189","a190","a191",""];t.ZapfDingbatsEncoding=l},function(e,t,a){var r=a(7).getLookupTableFactory,i=r((function(e){e.A=65;e.AE=198;e.AEacute=508;e.AEmacron=482;e.AEsmall=63462;e.Aacute=193;e.Aacutesmall=63457;e.Abreve=258;e.Abreveacute=7854;e.Abrevecyrillic=1232;e.Abrevedotbelow=7862;e.Abrevegrave=7856;e.Abrevehookabove=7858;e.Abrevetilde=7860;e.Acaron=461;e.Acircle=9398;e.Acircumflex=194;e.Acircumflexacute=7844;e.Acircumflexdotbelow=7852;e.Acircumflexgrave=7846;e.Acircumflexhookabove=7848;e.Acircumflexsmall=63458;e.Acircumflextilde=7850;e.Acute=63177;e.Acutesmall=63412;e.Acyrillic=1040;e.Adblgrave=512;e.Adieresis=196;e.Adieresiscyrillic=1234;e.Adieresismacron=478;e.Adieresissmall=63460;e.Adotbelow=7840;e.Adotmacron=480;e.Agrave=192;e.Agravesmall=63456;e.Ahookabove=7842;e.Aiecyrillic=1236;e.Ainvertedbreve=514;e.Alpha=913;e.Alphatonos=902;e.Amacron=256;e.Amonospace=65313;e.Aogonek=260;e.Aring=197;e.Aringacute=506;e.Aringbelow=7680;e.Aringsmall=63461;e.Asmall=63329;e.Atilde=195;e.Atildesmall=63459;e.Aybarmenian=1329;e.B=66;e.Bcircle=9399;e.Bdotaccent=7682;e.Bdotbelow=7684;e.Becyrillic=1041;e.Benarmenian=1330;e.Beta=914;e.Bhook=385;e.Blinebelow=7686;e.Bmonospace=65314;e.Brevesmall=63220;e.Bsmall=63330;e.Btopbar=386;e.C=67;e.Caarmenian=1342;e.Cacute=262;e.Caron=63178;e.Caronsmall=63221;e.Ccaron=268;e.Ccedilla=199;e.Ccedillaacute=7688;e.Ccedillasmall=63463;e.Ccircle=9400;e.Ccircumflex=264;e.Cdot=266;e.Cdotaccent=266;e.Cedillasmall=63416;e.Chaarmenian=1353;e.Cheabkhasiancyrillic=1212;e.Checyrillic=1063;e.Chedescenderabkhasiancyrillic=1214;e.Chedescendercyrillic=1206;e.Chedieresiscyrillic=1268;e.Cheharmenian=1347;e.Chekhakassiancyrillic=1227;e.Cheverticalstrokecyrillic=1208;e.Chi=935;e.Chook=391;e.Circumflexsmall=63222;e.Cmonospace=65315;e.Coarmenian=1361;e.Csmall=63331;e.D=68;e.DZ=497;e.DZcaron=452;e.Daarmenian=1332;e.Dafrican=393;e.Dcaron=270;e.Dcedilla=7696;e.Dcircle=9401;e.Dcircumflexbelow=7698;e.Dcroat=272;e.Ddotaccent=7690;e.Ddotbelow=7692;e.Decyrillic=1044;e.Deicoptic=1006;e.Delta=8710;e.Deltagreek=916;e.Dhook=394;e.Dieresis=63179;e.DieresisAcute=63180;e.DieresisGrave=63181;e.Dieresissmall=63400;e.Digammagreek=988;e.Djecyrillic=1026;e.Dlinebelow=7694;e.Dmonospace=65316;e.Dotaccentsmall=63223;e.Dslash=272;e.Dsmall=63332;e.Dtopbar=395;e.Dz=498;e.Dzcaron=453;e.Dzeabkhasiancyrillic=1248;e.Dzecyrillic=1029;e.Dzhecyrillic=1039;e.E=69;e.Eacute=201;e.Eacutesmall=63465;e.Ebreve=276;e.Ecaron=282;e.Ecedillabreve=7708;e.Echarmenian=1333;e.Ecircle=9402;e.Ecircumflex=202;e.Ecircumflexacute=7870;e.Ecircumflexbelow=7704;e.Ecircumflexdotbelow=7878;e.Ecircumflexgrave=7872;e.Ecircumflexhookabove=7874;e.Ecircumflexsmall=63466;e.Ecircumflextilde=7876;e.Ecyrillic=1028;e.Edblgrave=516;e.Edieresis=203;e.Edieresissmall=63467;e.Edot=278;e.Edotaccent=278;e.Edotbelow=7864;e.Efcyrillic=1060;e.Egrave=200;e.Egravesmall=63464;e.Eharmenian=1335;e.Ehookabove=7866;e.Eightroman=8551;e.Einvertedbreve=518;e.Eiotifiedcyrillic=1124;e.Elcyrillic=1051;e.Elevenroman=8554;e.Emacron=274;e.Emacronacute=7702;e.Emacrongrave=7700;e.Emcyrillic=1052;e.Emonospace=65317;e.Encyrillic=1053;e.Endescendercyrillic=1186;e.Eng=330;e.Enghecyrillic=1188;e.Enhookcyrillic=1223;e.Eogonek=280;e.Eopen=400;e.Epsilon=917;e.Epsilontonos=904;e.Ercyrillic=1056;e.Ereversed=398;e.Ereversedcyrillic=1069;e.Escyrillic=1057;e.Esdescendercyrillic=1194;e.Esh=425;e.Esmall=63333;e.Eta=919;e.Etarmenian=1336;e.Etatonos=905;e.Eth=208;e.Ethsmall=63472;e.Etilde=7868;e.Etildebelow=7706;e.Euro=8364;e.Ezh=439;e.Ezhcaron=494;e.Ezhreversed=440;e.F=70;e.Fcircle=9403;e.Fdotaccent=7710;e.Feharmenian=1366;e.Feicoptic=996;e.Fhook=401;e.Fitacyrillic=1138;e.Fiveroman=8548;e.Fmonospace=65318;e.Fourroman=8547;e.Fsmall=63334;e.G=71;e.GBsquare=13191;e.Gacute=500;e.Gamma=915;e.Gammaafrican=404;e.Gangiacoptic=1002;e.Gbreve=286;e.Gcaron=486;e.Gcedilla=290;e.Gcircle=9404;e.Gcircumflex=284;e.Gcommaaccent=290;e.Gdot=288;e.Gdotaccent=288;e.Gecyrillic=1043;e.Ghadarmenian=1346;e.Ghemiddlehookcyrillic=1172;e.Ghestrokecyrillic=1170;e.Gheupturncyrillic=1168;e.Ghook=403;e.Gimarmenian=1331;e.Gjecyrillic=1027;e.Gmacron=7712;e.Gmonospace=65319;e.Grave=63182;e.Gravesmall=63328;e.Gsmall=63335;e.Gsmallhook=667;e.Gstroke=484;e.H=72;e.H18533=9679;e.H18543=9642;e.H18551=9643;e.H22073=9633;e.HPsquare=13259;e.Haabkhasiancyrillic=1192;e.Hadescendercyrillic=1202;e.Hardsigncyrillic=1066;e.Hbar=294;e.Hbrevebelow=7722;e.Hcedilla=7720;e.Hcircle=9405;e.Hcircumflex=292;e.Hdieresis=7718;e.Hdotaccent=7714;e.Hdotbelow=7716;e.Hmonospace=65320;e.Hoarmenian=1344;e.Horicoptic=1e3;e.Hsmall=63336;e.Hungarumlaut=63183;e.Hungarumlautsmall=63224;e.Hzsquare=13200;e.I=73;e.IAcyrillic=1071;e.IJ=306;e.IUcyrillic=1070;e.Iacute=205;e.Iacutesmall=63469;e.Ibreve=300;e.Icaron=463;e.Icircle=9406;e.Icircumflex=206;e.Icircumflexsmall=63470;e.Icyrillic=1030;e.Idblgrave=520;e.Idieresis=207;e.Idieresisacute=7726;e.Idieresiscyrillic=1252;e.Idieresissmall=63471;e.Idot=304;e.Idotaccent=304;e.Idotbelow=7882;e.Iebrevecyrillic=1238;e.Iecyrillic=1045;e.Ifraktur=8465;e.Igrave=204;e.Igravesmall=63468;e.Ihookabove=7880;e.Iicyrillic=1048;e.Iinvertedbreve=522;e.Iishortcyrillic=1049;e.Imacron=298;e.Imacroncyrillic=1250;e.Imonospace=65321;e.Iniarmenian=1339;e.Iocyrillic=1025;e.Iogonek=302;e.Iota=921;e.Iotaafrican=406;e.Iotadieresis=938;e.Iotatonos=906;e.Ismall=63337;e.Istroke=407;e.Itilde=296;e.Itildebelow=7724;e.Izhitsacyrillic=1140;e.Izhitsadblgravecyrillic=1142;e.J=74;e.Jaarmenian=1345;e.Jcircle=9407;e.Jcircumflex=308;e.Jecyrillic=1032;e.Jheharmenian=1355;e.Jmonospace=65322;e.Jsmall=63338;e.K=75;e.KBsquare=13189;e.KKsquare=13261;e.Kabashkircyrillic=1184;e.Kacute=7728;e.Kacyrillic=1050;e.Kadescendercyrillic=1178;e.Kahookcyrillic=1219;e.Kappa=922;e.Kastrokecyrillic=1182;e.Kaverticalstrokecyrillic=1180;e.Kcaron=488;e.Kcedilla=310;e.Kcircle=9408;e.Kcommaaccent=310;e.Kdotbelow=7730;e.Keharmenian=1364;e.Kenarmenian=1343;e.Khacyrillic=1061;e.Kheicoptic=998;e.Khook=408;e.Kjecyrillic=1036;e.Klinebelow=7732;e.Kmonospace=65323;e.Koppacyrillic=1152;e.Koppagreek=990;e.Ksicyrillic=1134;e.Ksmall=63339;e.L=76;e.LJ=455;e.LL=63167;e.Lacute=313;e.Lambda=923;e.Lcaron=317;e.Lcedilla=315;e.Lcircle=9409;e.Lcircumflexbelow=7740;e.Lcommaaccent=315;e.Ldot=319;e.Ldotaccent=319;e.Ldotbelow=7734;e.Ldotbelowmacron=7736;e.Liwnarmenian=1340;e.Lj=456;e.Ljecyrillic=1033;e.Llinebelow=7738;e.Lmonospace=65324;e.Lslash=321;e.Lslashsmall=63225;e.Lsmall=63340;e.M=77;e.MBsquare=13190;e.Macron=63184;e.Macronsmall=63407;e.Macute=7742;e.Mcircle=9410;e.Mdotaccent=7744;e.Mdotbelow=7746;e.Menarmenian=1348;e.Mmonospace=65325;e.Msmall=63341;e.Mturned=412;e.Mu=924;e.N=78;e.NJ=458;e.Nacute=323;e.Ncaron=327;e.Ncedilla=325;e.Ncircle=9411;e.Ncircumflexbelow=7754;e.Ncommaaccent=325;e.Ndotaccent=7748;e.Ndotbelow=7750;e.Nhookleft=413;e.Nineroman=8552;e.Nj=459;e.Njecyrillic=1034;e.Nlinebelow=7752;e.Nmonospace=65326;e.Nowarmenian=1350;e.Nsmall=63342;e.Ntilde=209;e.Ntildesmall=63473;e.Nu=925;e.O=79;e.OE=338;e.OEsmall=63226;e.Oacute=211;e.Oacutesmall=63475;e.Obarredcyrillic=1256;e.Obarreddieresiscyrillic=1258;e.Obreve=334;e.Ocaron=465;e.Ocenteredtilde=415;e.Ocircle=9412;e.Ocircumflex=212;e.Ocircumflexacute=7888;e.Ocircumflexdotbelow=7896;e.Ocircumflexgrave=7890;e.Ocircumflexhookabove=7892;e.Ocircumflexsmall=63476;e.Ocircumflextilde=7894;e.Ocyrillic=1054;e.Odblacute=336;e.Odblgrave=524;e.Odieresis=214;e.Odieresiscyrillic=1254;e.Odieresissmall=63478;e.Odotbelow=7884;e.Ogoneksmall=63227;e.Ograve=210;e.Ogravesmall=63474;e.Oharmenian=1365;e.Ohm=8486;e.Ohookabove=7886;e.Ohorn=416;e.Ohornacute=7898;e.Ohorndotbelow=7906;e.Ohorngrave=7900;e.Ohornhookabove=7902;e.Ohorntilde=7904;e.Ohungarumlaut=336;e.Oi=418;e.Oinvertedbreve=526;e.Omacron=332;e.Omacronacute=7762;e.Omacrongrave=7760;e.Omega=8486;e.Omegacyrillic=1120;e.Omegagreek=937;e.Omegaroundcyrillic=1146;e.Omegatitlocyrillic=1148;e.Omegatonos=911;e.Omicron=927;e.Omicrontonos=908;e.Omonospace=65327;e.Oneroman=8544;e.Oogonek=490;e.Oogonekmacron=492;e.Oopen=390;e.Oslash=216;e.Oslashacute=510;e.Oslashsmall=63480;e.Osmall=63343;e.Ostrokeacute=510;e.Otcyrillic=1150;e.Otilde=213;e.Otildeacute=7756;e.Otildedieresis=7758;e.Otildesmall=63477;e.P=80;e.Pacute=7764;e.Pcircle=9413;e.Pdotaccent=7766;e.Pecyrillic=1055;e.Peharmenian=1354;e.Pemiddlehookcyrillic=1190;e.Phi=934;e.Phook=420;e.Pi=928;e.Piwrarmenian=1363;e.Pmonospace=65328;e.Psi=936;e.Psicyrillic=1136;e.Psmall=63344;e.Q=81;e.Qcircle=9414;e.Qmonospace=65329;e.Qsmall=63345;e.R=82;e.Raarmenian=1356;e.Racute=340;e.Rcaron=344;e.Rcedilla=342;e.Rcircle=9415;e.Rcommaaccent=342;e.Rdblgrave=528;e.Rdotaccent=7768;e.Rdotbelow=7770;e.Rdotbelowmacron=7772;e.Reharmenian=1360;e.Rfraktur=8476;e.Rho=929;e.Ringsmall=63228;e.Rinvertedbreve=530;e.Rlinebelow=7774;e.Rmonospace=65330;e.Rsmall=63346;e.Rsmallinverted=641;e.Rsmallinvertedsuperior=694;e.S=83;e.SF010000=9484;e.SF020000=9492;e.SF030000=9488;e.SF040000=9496;e.SF050000=9532;e.SF060000=9516;e.SF070000=9524;e.SF080000=9500;e.SF090000=9508;e.SF100000=9472;e.SF110000=9474;e.SF190000=9569;e.SF200000=9570;e.SF210000=9558;e.SF220000=9557;e.SF230000=9571;e.SF240000=9553;e.SF250000=9559;e.SF260000=9565;e.SF270000=9564;e.SF280000=9563;e.SF360000=9566;e.SF370000=9567;e.SF380000=9562;e.SF390000=9556;e.SF400000=9577;e.SF410000=9574;e.SF420000=9568;e.SF430000=9552;e.SF440000=9580;e.SF450000=9575;e.SF460000=9576;e.SF470000=9572;e.SF480000=9573;e.SF490000=9561;e.SF500000=9560;e.SF510000=9554;e.SF520000=9555;e.SF530000=9579;e.SF540000=9578;e.Sacute=346;e.Sacutedotaccent=7780;e.Sampigreek=992;e.Scaron=352;e.Scarondotaccent=7782;e.Scaronsmall=63229;e.Scedilla=350;e.Schwa=399;e.Schwacyrillic=1240;e.Schwadieresiscyrillic=1242;e.Scircle=9416;e.Scircumflex=348;e.Scommaaccent=536;e.Sdotaccent=7776;e.Sdotbelow=7778;e.Sdotbelowdotaccent=7784;e.Seharmenian=1357;e.Sevenroman=8550;e.Shaarmenian=1351;e.Shacyrillic=1064;e.Shchacyrillic=1065;e.Sheicoptic=994;e.Shhacyrillic=1210;e.Shimacoptic=1004;e.Sigma=931;e.Sixroman=8549;e.Smonospace=65331;e.Softsigncyrillic=1068;e.Ssmall=63347;e.Stigmagreek=986;e.T=84;e.Tau=932;e.Tbar=358;e.Tcaron=356;e.Tcedilla=354;e.Tcircle=9417;e.Tcircumflexbelow=7792;e.Tcommaaccent=354;e.Tdotaccent=7786;e.Tdotbelow=7788;e.Tecyrillic=1058;e.Tedescendercyrillic=1196;e.Tenroman=8553;e.Tetsecyrillic=1204;e.Theta=920;e.Thook=428;e.Thorn=222;e.Thornsmall=63486;e.Threeroman=8546;e.Tildesmall=63230;e.Tiwnarmenian=1359;e.Tlinebelow=7790;e.Tmonospace=65332;e.Toarmenian=1337;e.Tonefive=444;e.Tonesix=388;e.Tonetwo=423;e.Tretroflexhook=430;e.Tsecyrillic=1062;e.Tshecyrillic=1035;e.Tsmall=63348;e.Twelveroman=8555;e.Tworoman=8545;e.U=85;e.Uacute=218;e.Uacutesmall=63482;e.Ubreve=364;e.Ucaron=467;e.Ucircle=9418;e.Ucircumflex=219;e.Ucircumflexbelow=7798;e.Ucircumflexsmall=63483;e.Ucyrillic=1059;e.Udblacute=368;e.Udblgrave=532;e.Udieresis=220;e.Udieresisacute=471;e.Udieresisbelow=7794;e.Udieresiscaron=473;e.Udieresiscyrillic=1264;e.Udieresisgrave=475;e.Udieresismacron=469;e.Udieresissmall=63484;e.Udotbelow=7908;e.Ugrave=217;e.Ugravesmall=63481;e.Uhookabove=7910;e.Uhorn=431;e.Uhornacute=7912;e.Uhorndotbelow=7920;e.Uhorngrave=7914;e.Uhornhookabove=7916;e.Uhorntilde=7918;e.Uhungarumlaut=368;e.Uhungarumlautcyrillic=1266;e.Uinvertedbreve=534;e.Ukcyrillic=1144;e.Umacron=362;e.Umacroncyrillic=1262;e.Umacrondieresis=7802;e.Umonospace=65333;e.Uogonek=370;e.Upsilon=933;e.Upsilon1=978;e.Upsilonacutehooksymbolgreek=979;e.Upsilonafrican=433;e.Upsilondieresis=939;e.Upsilondieresishooksymbolgreek=980;e.Upsilonhooksymbol=978;e.Upsilontonos=910;e.Uring=366;e.Ushortcyrillic=1038;e.Usmall=63349;e.Ustraightcyrillic=1198;e.Ustraightstrokecyrillic=1200;e.Utilde=360;e.Utildeacute=7800;e.Utildebelow=7796;e.V=86;e.Vcircle=9419;e.Vdotbelow=7806;e.Vecyrillic=1042;e.Vewarmenian=1358;e.Vhook=434;e.Vmonospace=65334;e.Voarmenian=1352;e.Vsmall=63350;e.Vtilde=7804;e.W=87;e.Wacute=7810;e.Wcircle=9420;e.Wcircumflex=372;e.Wdieresis=7812;e.Wdotaccent=7814;e.Wdotbelow=7816;e.Wgrave=7808;e.Wmonospace=65335;e.Wsmall=63351;e.X=88;e.Xcircle=9421;e.Xdieresis=7820;e.Xdotaccent=7818;e.Xeharmenian=1341;e.Xi=926;e.Xmonospace=65336;e.Xsmall=63352;e.Y=89;e.Yacute=221;e.Yacutesmall=63485;e.Yatcyrillic=1122;e.Ycircle=9422;e.Ycircumflex=374;e.Ydieresis=376;e.Ydieresissmall=63487;e.Ydotaccent=7822;e.Ydotbelow=7924;e.Yericyrillic=1067;e.Yerudieresiscyrillic=1272;e.Ygrave=7922;e.Yhook=435;e.Yhookabove=7926;e.Yiarmenian=1349;e.Yicyrillic=1031;e.Yiwnarmenian=1362;e.Ymonospace=65337;e.Ysmall=63353;e.Ytilde=7928;e.Yusbigcyrillic=1130;e.Yusbigiotifiedcyrillic=1132;e.Yuslittlecyrillic=1126;e.Yuslittleiotifiedcyrillic=1128;e.Z=90;e.Zaarmenian=1334;e.Zacute=377;e.Zcaron=381;e.Zcaronsmall=63231;e.Zcircle=9423;e.Zcircumflex=7824;e.Zdot=379;e.Zdotaccent=379;e.Zdotbelow=7826;e.Zecyrillic=1047;e.Zedescendercyrillic=1176;e.Zedieresiscyrillic=1246;e.Zeta=918;e.Zhearmenian=1338;e.Zhebrevecyrillic=1217;e.Zhecyrillic=1046;e.Zhedescendercyrillic=1174;e.Zhedieresiscyrillic=1244;e.Zlinebelow=7828;e.Zmonospace=65338;e.Zsmall=63354;e.Zstroke=437;e.a=97;e.aabengali=2438;e.aacute=225;e.aadeva=2310;e.aagujarati=2694;e.aagurmukhi=2566;e.aamatragurmukhi=2622;e.aarusquare=13059;e.aavowelsignbengali=2494;e.aavowelsigndeva=2366;e.aavowelsigngujarati=2750;e.abbreviationmarkarmenian=1375;e.abbreviationsigndeva=2416;e.abengali=2437;e.abopomofo=12570;e.abreve=259;e.abreveacute=7855;e.abrevecyrillic=1233;e.abrevedotbelow=7863;e.abrevegrave=7857;e.abrevehookabove=7859;e.abrevetilde=7861;e.acaron=462;e.acircle=9424;e.acircumflex=226;e.acircumflexacute=7845;e.acircumflexdotbelow=7853;e.acircumflexgrave=7847;e.acircumflexhookabove=7849;e.acircumflextilde=7851;e.acute=180;e.acutebelowcmb=791;e.acutecmb=769;e.acutecomb=769;e.acutedeva=2388;e.acutelowmod=719;e.acutetonecmb=833;e.acyrillic=1072;e.adblgrave=513;e.addakgurmukhi=2673;e.adeva=2309;e.adieresis=228;e.adieresiscyrillic=1235;e.adieresismacron=479;e.adotbelow=7841;e.adotmacron=481;e.ae=230;e.aeacute=509;e.aekorean=12624;e.aemacron=483;e.afii00208=8213;e.afii08941=8356;e.afii10017=1040;e.afii10018=1041;e.afii10019=1042;e.afii10020=1043;e.afii10021=1044;e.afii10022=1045;e.afii10023=1025;e.afii10024=1046;e.afii10025=1047;e.afii10026=1048;e.afii10027=1049;e.afii10028=1050;e.afii10029=1051;e.afii10030=1052;e.afii10031=1053;e.afii10032=1054;e.afii10033=1055;e.afii10034=1056;e.afii10035=1057;e.afii10036=1058;e.afii10037=1059;e.afii10038=1060;e.afii10039=1061;e.afii10040=1062;e.afii10041=1063;e.afii10042=1064;e.afii10043=1065;e.afii10044=1066;e.afii10045=1067;e.afii10046=1068;e.afii10047=1069;e.afii10048=1070;e.afii10049=1071;e.afii10050=1168;e.afii10051=1026;e.afii10052=1027;e.afii10053=1028;e.afii10054=1029;e.afii10055=1030;e.afii10056=1031;e.afii10057=1032;e.afii10058=1033;e.afii10059=1034;e.afii10060=1035;e.afii10061=1036;e.afii10062=1038;e.afii10063=63172;e.afii10064=63173;e.afii10065=1072;e.afii10066=1073;e.afii10067=1074;e.afii10068=1075;e.afii10069=1076;e.afii10070=1077;e.afii10071=1105;e.afii10072=1078;e.afii10073=1079;e.afii10074=1080;e.afii10075=1081;e.afii10076=1082;e.afii10077=1083;e.afii10078=1084;e.afii10079=1085;e.afii10080=1086;e.afii10081=1087;e.afii10082=1088;e.afii10083=1089;e.afii10084=1090;e.afii10085=1091;e.afii10086=1092;e.afii10087=1093;e.afii10088=1094;e.afii10089=1095;e.afii10090=1096;e.afii10091=1097;e.afii10092=1098;e.afii10093=1099;e.afii10094=1100;e.afii10095=1101;e.afii10096=1102;e.afii10097=1103;e.afii10098=1169;e.afii10099=1106;e.afii10100=1107;e.afii10101=1108;e.afii10102=1109;e.afii10103=1110;e.afii10104=1111;e.afii10105=1112;e.afii10106=1113;e.afii10107=1114;e.afii10108=1115;e.afii10109=1116;e.afii10110=1118;e.afii10145=1039;e.afii10146=1122;e.afii10147=1138;e.afii10148=1140;e.afii10192=63174;e.afii10193=1119;e.afii10194=1123;e.afii10195=1139;e.afii10196=1141;e.afii10831=63175;e.afii10832=63176;e.afii10846=1241;e.afii299=8206;e.afii300=8207;e.afii301=8205;e.afii57381=1642;e.afii57388=1548;e.afii57392=1632;e.afii57393=1633;e.afii57394=1634;e.afii57395=1635;e.afii57396=1636;e.afii57397=1637;e.afii57398=1638;e.afii57399=1639;e.afii57400=1640;e.afii57401=1641;e.afii57403=1563;e.afii57407=1567;e.afii57409=1569;e.afii57410=1570;e.afii57411=1571;e.afii57412=1572;e.afii57413=1573;e.afii57414=1574;e.afii57415=1575;e.afii57416=1576;e.afii57417=1577;e.afii57418=1578;e.afii57419=1579;e.afii57420=1580;e.afii57421=1581;e.afii57422=1582;e.afii57423=1583;e.afii57424=1584;e.afii57425=1585;e.afii57426=1586;e.afii57427=1587;e.afii57428=1588;e.afii57429=1589;e.afii57430=1590;e.afii57431=1591;e.afii57432=1592;e.afii57433=1593;e.afii57434=1594;e.afii57440=1600;e.afii57441=1601;e.afii57442=1602;e.afii57443=1603;e.afii57444=1604;e.afii57445=1605;e.afii57446=1606;e.afii57448=1608;e.afii57449=1609;e.afii57450=1610;e.afii57451=1611;e.afii57452=1612;e.afii57453=1613;e.afii57454=1614;e.afii57455=1615;e.afii57456=1616;e.afii57457=1617;e.afii57458=1618;e.afii57470=1607;e.afii57505=1700;e.afii57506=1662;e.afii57507=1670;e.afii57508=1688;e.afii57509=1711;e.afii57511=1657;e.afii57512=1672;e.afii57513=1681;e.afii57514=1722;e.afii57519=1746;e.afii57534=1749;e.afii57636=8362;e.afii57645=1470;e.afii57658=1475;e.afii57664=1488;e.afii57665=1489;e.afii57666=1490;e.afii57667=1491;e.afii57668=1492;e.afii57669=1493;e.afii57670=1494;e.afii57671=1495;e.afii57672=1496;e.afii57673=1497;e.afii57674=1498;e.afii57675=1499;e.afii57676=1500;e.afii57677=1501;e.afii57678=1502;e.afii57679=1503;e.afii57680=1504;e.afii57681=1505;e.afii57682=1506;e.afii57683=1507;e.afii57684=1508;e.afii57685=1509;e.afii57686=1510;e.afii57687=1511;e.afii57688=1512;e.afii57689=1513;e.afii57690=1514;e.afii57694=64298;e.afii57695=64299;e.afii57700=64331;e.afii57705=64287;e.afii57716=1520;e.afii57717=1521;e.afii57718=1522;e.afii57723=64309;e.afii57793=1460;e.afii57794=1461;e.afii57795=1462;e.afii57796=1467;e.afii57797=1464;e.afii57798=1463;e.afii57799=1456;e.afii57800=1458;e.afii57801=1457;e.afii57802=1459;e.afii57803=1474;e.afii57804=1473;e.afii57806=1465;e.afii57807=1468;e.afii57839=1469;e.afii57841=1471;e.afii57842=1472;e.afii57929=700;e.afii61248=8453;e.afii61289=8467;e.afii61352=8470;e.afii61573=8236;e.afii61574=8237;e.afii61575=8238;e.afii61664=8204;e.afii63167=1645;e.afii64937=701;e.agrave=224;e.agujarati=2693;e.agurmukhi=2565;e.ahiragana=12354;e.ahookabove=7843;e.aibengali=2448;e.aibopomofo=12574;e.aideva=2320;e.aiecyrillic=1237;e.aigujarati=2704;e.aigurmukhi=2576;e.aimatragurmukhi=2632;e.ainarabic=1593;e.ainfinalarabic=65226;e.aininitialarabic=65227;e.ainmedialarabic=65228;e.ainvertedbreve=515;e.aivowelsignbengali=2504;e.aivowelsigndeva=2376;e.aivowelsigngujarati=2760;e.akatakana=12450;e.akatakanahalfwidth=65393;e.akorean=12623;e.alef=1488;e.alefarabic=1575;e.alefdageshhebrew=64304;e.aleffinalarabic=65166;e.alefhamzaabovearabic=1571;e.alefhamzaabovefinalarabic=65156;e.alefhamzabelowarabic=1573;e.alefhamzabelowfinalarabic=65160;e.alefhebrew=1488;e.aleflamedhebrew=64335;e.alefmaddaabovearabic=1570;e.alefmaddaabovefinalarabic=65154;e.alefmaksuraarabic=1609;e.alefmaksurafinalarabic=65264;e.alefmaksurainitialarabic=65267;e.alefmaksuramedialarabic=65268;e.alefpatahhebrew=64302;e.alefqamatshebrew=64303;e.aleph=8501;e.allequal=8780;e.alpha=945;e.alphatonos=940;e.amacron=257;e.amonospace=65345;e.ampersand=38;e.ampersandmonospace=65286;e.ampersandsmall=63270;e.amsquare=13250;e.anbopomofo=12578;e.angbopomofo=12580;e.angbracketleft=12296;e.angbracketright=12297;e.angkhankhuthai=3674;e.angle=8736;e.anglebracketleft=12296;e.anglebracketleftvertical=65087;e.anglebracketright=12297;e.anglebracketrightvertical=65088;e.angleleft=9001;e.angleright=9002;e.angstrom=8491;e.anoteleia=903;e.anudattadeva=2386;e.anusvarabengali=2434;e.anusvaradeva=2306;e.anusvaragujarati=2690;e.aogonek=261;e.apaatosquare=13056;e.aparen=9372;e.apostrophearmenian=1370;e.apostrophemod=700;e.apple=63743;e.approaches=8784;e.approxequal=8776;e.approxequalorimage=8786;e.approximatelyequal=8773;e.araeaekorean=12686;e.araeakorean=12685;e.arc=8978;e.arighthalfring=7834;e.aring=229;e.aringacute=507;e.aringbelow=7681;e.arrowboth=8596;e.arrowdashdown=8675;e.arrowdashleft=8672;e.arrowdashright=8674;e.arrowdashup=8673;e.arrowdblboth=8660;e.arrowdbldown=8659;e.arrowdblleft=8656;e.arrowdblright=8658;e.arrowdblup=8657;e.arrowdown=8595;e.arrowdownleft=8601;e.arrowdownright=8600;e.arrowdownwhite=8681;e.arrowheaddownmod=709;e.arrowheadleftmod=706;e.arrowheadrightmod=707;e.arrowheadupmod=708;e.arrowhorizex=63719;e.arrowleft=8592;e.arrowleftdbl=8656;e.arrowleftdblstroke=8653;e.arrowleftoverright=8646;e.arrowleftwhite=8678;e.arrowright=8594;e.arrowrightdblstroke=8655;e.arrowrightheavy=10142;e.arrowrightoverleft=8644;e.arrowrightwhite=8680;e.arrowtableft=8676;e.arrowtabright=8677;e.arrowup=8593;e.arrowupdn=8597;e.arrowupdnbse=8616;e.arrowupdownbase=8616;e.arrowupleft=8598;e.arrowupleftofdown=8645;e.arrowupright=8599;e.arrowupwhite=8679;e.arrowvertex=63718;e.asciicircum=94;e.asciicircummonospace=65342;e.asciitilde=126;e.asciitildemonospace=65374;e.ascript=593;e.ascriptturned=594;e.asmallhiragana=12353;e.asmallkatakana=12449;e.asmallkatakanahalfwidth=65383;e.asterisk=42;e.asteriskaltonearabic=1645;e.asteriskarabic=1645;e.asteriskmath=8727;e.asteriskmonospace=65290;e.asterisksmall=65121;e.asterism=8258;e.asuperior=63209;e.asymptoticallyequal=8771;e.at=64;e.atilde=227;e.atmonospace=65312;e.atsmall=65131;e.aturned=592;e.aubengali=2452;e.aubopomofo=12576;e.audeva=2324;e.augujarati=2708;e.augurmukhi=2580;e.aulengthmarkbengali=2519;e.aumatragurmukhi=2636;e.auvowelsignbengali=2508;e.auvowelsigndeva=2380;e.auvowelsigngujarati=2764;e.avagrahadeva=2365;e.aybarmenian=1377;e.ayin=1506;e.ayinaltonehebrew=64288;e.ayinhebrew=1506;e.b=98;e.babengali=2476;e.backslash=92;e.backslashmonospace=65340;e.badeva=2348;e.bagujarati=2732;e.bagurmukhi=2604;e.bahiragana=12400;e.bahtthai=3647;e.bakatakana=12496;e.bar=124;e.barmonospace=65372;e.bbopomofo=12549;e.bcircle=9425;e.bdotaccent=7683;e.bdotbelow=7685;e.beamedsixteenthnotes=9836;e.because=8757;e.becyrillic=1073;e.beharabic=1576;e.behfinalarabic=65168;e.behinitialarabic=65169;e.behiragana=12409;e.behmedialarabic=65170;e.behmeeminitialarabic=64671;e.behmeemisolatedarabic=64520;e.behnoonfinalarabic=64621;e.bekatakana=12505;e.benarmenian=1378;e.bet=1489;e.beta=946;e.betasymbolgreek=976;e.betdagesh=64305;e.betdageshhebrew=64305;e.bethebrew=1489;e.betrafehebrew=64332;e.bhabengali=2477;e.bhadeva=2349;e.bhagujarati=2733;e.bhagurmukhi=2605;e.bhook=595;e.bihiragana=12403;e.bikatakana=12499;e.bilabialclick=664;e.bindigurmukhi=2562;e.birusquare=13105;e.blackcircle=9679;e.blackdiamond=9670;e.blackdownpointingtriangle=9660;e.blackleftpointingpointer=9668;e.blackleftpointingtriangle=9664;e.blacklenticularbracketleft=12304;e.blacklenticularbracketleftvertical=65083;e.blacklenticularbracketright=12305;e.blacklenticularbracketrightvertical=65084;e.blacklowerlefttriangle=9699;e.blacklowerrighttriangle=9698;e.blackrectangle=9644;e.blackrightpointingpointer=9658;e.blackrightpointingtriangle=9654;e.blacksmallsquare=9642;e.blacksmilingface=9787;e.blacksquare=9632;e.blackstar=9733;e.blackupperlefttriangle=9700;e.blackupperrighttriangle=9701;e.blackuppointingsmalltriangle=9652;e.blackuppointingtriangle=9650;e.blank=9251;e.blinebelow=7687;e.block=9608;e.bmonospace=65346;e.bobaimaithai=3610;e.bohiragana=12412;e.bokatakana=12508;e.bparen=9373;e.bqsquare=13251;e.braceex=63732;e.braceleft=123;e.braceleftbt=63731;e.braceleftmid=63730;e.braceleftmonospace=65371;e.braceleftsmall=65115;e.bracelefttp=63729;e.braceleftvertical=65079;e.braceright=125;e.bracerightbt=63742;e.bracerightmid=63741;e.bracerightmonospace=65373;e.bracerightsmall=65116;e.bracerighttp=63740;e.bracerightvertical=65080;e.bracketleft=91;e.bracketleftbt=63728;e.bracketleftex=63727;e.bracketleftmonospace=65339;e.bracketlefttp=63726;e.bracketright=93;e.bracketrightbt=63739;e.bracketrightex=63738;e.bracketrightmonospace=65341;e.bracketrighttp=63737;e.breve=728;e.brevebelowcmb=814;e.brevecmb=774;e.breveinvertedbelowcmb=815;e.breveinvertedcmb=785;e.breveinverteddoublecmb=865;e.bridgebelowcmb=810;e.bridgeinvertedbelowcmb=826;e.brokenbar=166;e.bstroke=384;e.bsuperior=63210;e.btopbar=387;e.buhiragana=12406;e.bukatakana=12502;e.bullet=8226;e.bulletinverse=9688;e.bulletoperator=8729;e.bullseye=9678;e.c=99;e.caarmenian=1390;e.cabengali=2458;e.cacute=263;e.cadeva=2330;e.cagujarati=2714;e.cagurmukhi=2586;e.calsquare=13192;e.candrabindubengali=2433;e.candrabinducmb=784;e.candrabindudeva=2305;e.candrabindugujarati=2689;e.capslock=8682;e.careof=8453;e.caron=711;e.caronbelowcmb=812;e.caroncmb=780;e.carriagereturn=8629;e.cbopomofo=12568;e.ccaron=269;e.ccedilla=231;e.ccedillaacute=7689;e.ccircle=9426;e.ccircumflex=265;e.ccurl=597;e.cdot=267;e.cdotaccent=267;e.cdsquare=13253;e.cedilla=184;e.cedillacmb=807;e.cent=162;e.centigrade=8451;e.centinferior=63199;e.centmonospace=65504;e.centoldstyle=63394;e.centsuperior=63200;e.chaarmenian=1401;e.chabengali=2459;e.chadeva=2331;e.chagujarati=2715;e.chagurmukhi=2587;e.chbopomofo=12564;e.cheabkhasiancyrillic=1213;e.checkmark=10003;e.checyrillic=1095;e.chedescenderabkhasiancyrillic=1215;e.chedescendercyrillic=1207;e.chedieresiscyrillic=1269;e.cheharmenian=1395;e.chekhakassiancyrillic=1228;e.cheverticalstrokecyrillic=1209;e.chi=967;e.chieuchacirclekorean=12919;e.chieuchaparenkorean=12823;e.chieuchcirclekorean=12905;e.chieuchkorean=12618;e.chieuchparenkorean=12809;e.chochangthai=3594;e.chochanthai=3592;e.chochingthai=3593;e.chochoethai=3596;e.chook=392;e.cieucacirclekorean=12918;e.cieucaparenkorean=12822;e.cieuccirclekorean=12904;e.cieuckorean=12616;e.cieucparenkorean=12808;e.cieucuparenkorean=12828;e.circle=9675;e.circlecopyrt=169;e.circlemultiply=8855;e.circleot=8857;e.circleplus=8853;e.circlepostalmark=12342;e.circlewithlefthalfblack=9680;e.circlewithrighthalfblack=9681;e.circumflex=710;e.circumflexbelowcmb=813;e.circumflexcmb=770;e.clear=8999;e.clickalveolar=450;e.clickdental=448;e.clicklateral=449;e.clickretroflex=451;e.club=9827;e.clubsuitblack=9827;e.clubsuitwhite=9831;e.cmcubedsquare=13220;e.cmonospace=65347;e.cmsquaredsquare=13216;e.coarmenian=1409;e.colon=58;e.colonmonetary=8353;e.colonmonospace=65306;e.colonsign=8353;e.colonsmall=65109;e.colontriangularhalfmod=721;e.colontriangularmod=720;e.comma=44;e.commaabovecmb=787;e.commaaboverightcmb=789;e.commaaccent=63171;e.commaarabic=1548;e.commaarmenian=1373;e.commainferior=63201;e.commamonospace=65292;e.commareversedabovecmb=788;e.commareversedmod=701;e.commasmall=65104;e.commasuperior=63202;e.commaturnedabovecmb=786;e.commaturnedmod=699;e.compass=9788;e.congruent=8773;e.contourintegral=8750;e.control=8963;e.controlACK=6;e.controlBEL=7;e.controlBS=8;e.controlCAN=24;e.controlCR=13;e.controlDC1=17;e.controlDC2=18;e.controlDC3=19;e.controlDC4=20;e.controlDEL=127;e.controlDLE=16;e.controlEM=25;e.controlENQ=5;e.controlEOT=4;e.controlESC=27;e.controlETB=23;e.controlETX=3;e.controlFF=12;e.controlFS=28;e.controlGS=29;e.controlHT=9;e.controlLF=10;e.controlNAK=21;e.controlNULL=0;e.controlRS=30;e.controlSI=15;e.controlSO=14;e.controlSOT=2;e.controlSTX=1;e.controlSUB=26;e.controlSYN=22;e.controlUS=31;e.controlVT=11;e.copyright=169;e.copyrightsans=63721;e.copyrightserif=63193;e.cornerbracketleft=12300;e.cornerbracketlefthalfwidth=65378;e.cornerbracketleftvertical=65089;e.cornerbracketright=12301;e.cornerbracketrighthalfwidth=65379;e.cornerbracketrightvertical=65090;e.corporationsquare=13183;e.cosquare=13255;e.coverkgsquare=13254;e.cparen=9374;e.cruzeiro=8354;e.cstretched=663;e.curlyand=8911;e.curlyor=8910;e.currency=164;e.cyrBreve=63185;e.cyrFlex=63186;e.cyrbreve=63188;e.cyrflex=63189;e.d=100;e.daarmenian=1380;e.dabengali=2470;e.dadarabic=1590;e.dadeva=2342;e.dadfinalarabic=65214;e.dadinitialarabic=65215;e.dadmedialarabic=65216;e.dagesh=1468;e.dageshhebrew=1468;e.dagger=8224;e.daggerdbl=8225;e.dagujarati=2726;e.dagurmukhi=2598;e.dahiragana=12384;e.dakatakana=12480;e.dalarabic=1583;e.dalet=1491;e.daletdagesh=64307;e.daletdageshhebrew=64307;e.dalethebrew=1491;e.dalfinalarabic=65194;e.dammaarabic=1615;e.dammalowarabic=1615;e.dammatanaltonearabic=1612;e.dammatanarabic=1612;e.danda=2404;e.dargahebrew=1447;e.dargalefthebrew=1447;e.dasiapneumatacyrilliccmb=1157;e.dblGrave=63187;e.dblanglebracketleft=12298;e.dblanglebracketleftvertical=65085;e.dblanglebracketright=12299;e.dblanglebracketrightvertical=65086;e.dblarchinvertedbelowcmb=811;e.dblarrowleft=8660;e.dblarrowright=8658;e.dbldanda=2405;e.dblgrave=63190;e.dblgravecmb=783;e.dblintegral=8748;e.dbllowline=8215;e.dbllowlinecmb=819;e.dbloverlinecmb=831;e.dblprimemod=698;e.dblverticalbar=8214;e.dblverticallineabovecmb=782;e.dbopomofo=12553;e.dbsquare=13256;e.dcaron=271;e.dcedilla=7697;e.dcircle=9427;e.dcircumflexbelow=7699;e.dcroat=273;e.ddabengali=2465;e.ddadeva=2337;e.ddagujarati=2721;e.ddagurmukhi=2593;e.ddalarabic=1672;e.ddalfinalarabic=64393;e.dddhadeva=2396;e.ddhabengali=2466;e.ddhadeva=2338;e.ddhagujarati=2722;e.ddhagurmukhi=2594;e.ddotaccent=7691;e.ddotbelow=7693;e.decimalseparatorarabic=1643;e.decimalseparatorpersian=1643;e.decyrillic=1076;e.degree=176;e.dehihebrew=1453;e.dehiragana=12391;e.deicoptic=1007;e.dekatakana=12487;e.deleteleft=9003;e.deleteright=8998;e.delta=948;e.deltaturned=397;e.denominatorminusonenumeratorbengali=2552;e.dezh=676;e.dhabengali=2471;e.dhadeva=2343;e.dhagujarati=2727;e.dhagurmukhi=2599;e.dhook=599;e.dialytikatonos=901;e.dialytikatonoscmb=836;e.diamond=9830;e.diamondsuitwhite=9826;e.dieresis=168;e.dieresisacute=63191;e.dieresisbelowcmb=804;e.dieresiscmb=776;e.dieresisgrave=63192;e.dieresistonos=901;e.dihiragana=12386;e.dikatakana=12482;e.dittomark=12291;e.divide=247;e.divides=8739;e.divisionslash=8725;e.djecyrillic=1106;e.dkshade=9619;e.dlinebelow=7695;e.dlsquare=13207;e.dmacron=273;e.dmonospace=65348;e.dnblock=9604;e.dochadathai=3598;e.dodekthai=3604;e.dohiragana=12393;e.dokatakana=12489;e.dollar=36;e.dollarinferior=63203;e.dollarmonospace=65284;e.dollaroldstyle=63268;e.dollarsmall=65129;e.dollarsuperior=63204;e.dong=8363;e.dorusquare=13094;e.dotaccent=729;e.dotaccentcmb=775;e.dotbelowcmb=803;e.dotbelowcomb=803;e.dotkatakana=12539;e.dotlessi=305;e.dotlessj=63166;e.dotlessjstrokehook=644;e.dotmath=8901;e.dottedcircle=9676;e.doubleyodpatah=64287;e.doubleyodpatahhebrew=64287;e.downtackbelowcmb=798;e.downtackmod=725;e.dparen=9375;e.dsuperior=63211;e.dtail=598;e.dtopbar=396;e.duhiragana=12389;e.dukatakana=12485;e.dz=499;e.dzaltone=675;e.dzcaron=454;e.dzcurl=677;e.dzeabkhasiancyrillic=1249;e.dzecyrillic=1109;e.dzhecyrillic=1119;e.e=101;e.eacute=233;e.earth=9793;e.ebengali=2447;e.ebopomofo=12572;e.ebreve=277;e.ecandradeva=2317;e.ecandragujarati=2701;e.ecandravowelsigndeva=2373;e.ecandravowelsigngujarati=2757;e.ecaron=283;e.ecedillabreve=7709;e.echarmenian=1381;e.echyiwnarmenian=1415;e.ecircle=9428;e.ecircumflex=234;e.ecircumflexacute=7871;e.ecircumflexbelow=7705;e.ecircumflexdotbelow=7879;e.ecircumflexgrave=7873;e.ecircumflexhookabove=7875;e.ecircumflextilde=7877;e.ecyrillic=1108;e.edblgrave=517;e.edeva=2319;e.edieresis=235;e.edot=279;e.edotaccent=279;e.edotbelow=7865;e.eegurmukhi=2575;e.eematragurmukhi=2631;e.efcyrillic=1092;e.egrave=232;e.egujarati=2703;e.eharmenian=1383;e.ehbopomofo=12573;e.ehiragana=12360;e.ehookabove=7867;e.eibopomofo=12575;e.eight=56;e.eightarabic=1640;e.eightbengali=2542;e.eightcircle=9319;e.eightcircleinversesansserif=10129;e.eightdeva=2414;e.eighteencircle=9329;e.eighteenparen=9349;e.eighteenperiod=9369;e.eightgujarati=2798;e.eightgurmukhi=2670;e.eighthackarabic=1640;e.eighthangzhou=12328;e.eighthnotebeamed=9835;e.eightideographicparen=12839;e.eightinferior=8328;e.eightmonospace=65304;e.eightoldstyle=63288;e.eightparen=9339;e.eightperiod=9359;e.eightpersian=1784;e.eightroman=8567;e.eightsuperior=8312;e.eightthai=3672;e.einvertedbreve=519;e.eiotifiedcyrillic=1125;e.ekatakana=12456;e.ekatakanahalfwidth=65396;e.ekonkargurmukhi=2676;e.ekorean=12628;e.elcyrillic=1083;e.element=8712;e.elevencircle=9322;e.elevenparen=9342;e.elevenperiod=9362;e.elevenroman=8570;e.ellipsis=8230;e.ellipsisvertical=8942;e.emacron=275;e.emacronacute=7703;e.emacrongrave=7701;e.emcyrillic=1084;e.emdash=8212;e.emdashvertical=65073;e.emonospace=65349;e.emphasismarkarmenian=1371;e.emptyset=8709;e.enbopomofo=12579;e.encyrillic=1085;e.endash=8211;e.endashvertical=65074;e.endescendercyrillic=1187;e.eng=331;e.engbopomofo=12581;e.enghecyrillic=1189;e.enhookcyrillic=1224;e.enspace=8194;e.eogonek=281;e.eokorean=12627;e.eopen=603;e.eopenclosed=666;e.eopenreversed=604;e.eopenreversedclosed=606;e.eopenreversedhook=605;e.eparen=9376;e.epsilon=949;e.epsilontonos=941;e.equal=61;e.equalmonospace=65309;e.equalsmall=65126;e.equalsuperior=8316;e.equivalence=8801;e.erbopomofo=12582;e.ercyrillic=1088;e.ereversed=600;e.ereversedcyrillic=1101;e.escyrillic=1089;e.esdescendercyrillic=1195;e.esh=643;e.eshcurl=646;e.eshortdeva=2318;e.eshortvowelsigndeva=2374;e.eshreversedloop=426;e.eshsquatreversed=645;e.esmallhiragana=12359;e.esmallkatakana=12455;e.esmallkatakanahalfwidth=65386;e.estimated=8494;e.esuperior=63212;e.eta=951;e.etarmenian=1384;e.etatonos=942;e.eth=240;e.etilde=7869;e.etildebelow=7707;e.etnahtafoukhhebrew=1425;e.etnahtafoukhlefthebrew=1425;e.etnahtahebrew=1425;e.etnahtalefthebrew=1425;e.eturned=477;e.eukorean=12641;e.euro=8364;e.evowelsignbengali=2503;e.evowelsigndeva=2375;e.evowelsigngujarati=2759;e.exclam=33;e.exclamarmenian=1372;e.exclamdbl=8252;e.exclamdown=161;e.exclamdownsmall=63393;e.exclammonospace=65281;e.exclamsmall=63265;e.existential=8707;e.ezh=658;e.ezhcaron=495;e.ezhcurl=659;e.ezhreversed=441;e.ezhtail=442;e.f=102;e.fadeva=2398;e.fagurmukhi=2654;e.fahrenheit=8457;e.fathaarabic=1614;e.fathalowarabic=1614;e.fathatanarabic=1611;e.fbopomofo=12552;e.fcircle=9429;e.fdotaccent=7711;e.feharabic=1601;e.feharmenian=1414;e.fehfinalarabic=65234;e.fehinitialarabic=65235;e.fehmedialarabic=65236;e.feicoptic=997;e.female=9792;e.ff=64256;e.f_f=64256;e.ffi=64259;e.ffl=64260;e.fi=64257;e.fifteencircle=9326;e.fifteenparen=9346;e.fifteenperiod=9366;e.figuredash=8210;e.filledbox=9632;e.filledrect=9644;e.finalkaf=1498;e.finalkafdagesh=64314;e.finalkafdageshhebrew=64314;e.finalkafhebrew=1498;e.finalmem=1501;e.finalmemhebrew=1501;e.finalnun=1503;e.finalnunhebrew=1503;e.finalpe=1507;e.finalpehebrew=1507;e.finaltsadi=1509;e.finaltsadihebrew=1509;e.firsttonechinese=713;e.fisheye=9673;e.fitacyrillic=1139;e.five=53;e.fivearabic=1637;e.fivebengali=2539;e.fivecircle=9316;e.fivecircleinversesansserif=10126;e.fivedeva=2411;e.fiveeighths=8541;e.fivegujarati=2795;e.fivegurmukhi=2667;e.fivehackarabic=1637;e.fivehangzhou=12325;e.fiveideographicparen=12836;e.fiveinferior=8325;e.fivemonospace=65301;e.fiveoldstyle=63285;e.fiveparen=9336;e.fiveperiod=9356;e.fivepersian=1781;e.fiveroman=8564;e.fivesuperior=8309;e.fivethai=3669;e.fl=64258;e.florin=402;e.fmonospace=65350;e.fmsquare=13209;e.fofanthai=3615;e.fofathai=3613;e.fongmanthai=3663;e.forall=8704;e.four=52;e.fourarabic=1636;e.fourbengali=2538;e.fourcircle=9315;e.fourcircleinversesansserif=10125;e.fourdeva=2410;e.fourgujarati=2794;e.fourgurmukhi=2666;e.fourhackarabic=1636;e.fourhangzhou=12324;e.fourideographicparen=12835;e.fourinferior=8324;e.fourmonospace=65300;e.fournumeratorbengali=2551;e.fouroldstyle=63284;e.fourparen=9335;e.fourperiod=9355;e.fourpersian=1780;e.fourroman=8563;e.foursuperior=8308;e.fourteencircle=9325;e.fourteenparen=9345;e.fourteenperiod=9365;e.fourthai=3668;e.fourthtonechinese=715;e.fparen=9377;e.fraction=8260;e.franc=8355;e.g=103;e.gabengali=2455;e.gacute=501;e.gadeva=2327;e.gafarabic=1711;e.gaffinalarabic=64403;e.gafinitialarabic=64404;e.gafmedialarabic=64405;e.gagujarati=2711;e.gagurmukhi=2583;e.gahiragana=12364;e.gakatakana=12460;e.gamma=947;e.gammalatinsmall=611;e.gammasuperior=736;e.gangiacoptic=1003;e.gbopomofo=12557;e.gbreve=287;e.gcaron=487;e.gcedilla=291;e.gcircle=9430;e.gcircumflex=285;e.gcommaaccent=291;e.gdot=289;e.gdotaccent=289;e.gecyrillic=1075;e.gehiragana=12370;e.gekatakana=12466;e.geometricallyequal=8785;e.gereshaccenthebrew=1436;e.gereshhebrew=1523;e.gereshmuqdamhebrew=1437;e.germandbls=223;e.gershayimaccenthebrew=1438;e.gershayimhebrew=1524;e.getamark=12307;e.ghabengali=2456;e.ghadarmenian=1394;e.ghadeva=2328;e.ghagujarati=2712;e.ghagurmukhi=2584;e.ghainarabic=1594;e.ghainfinalarabic=65230;e.ghaininitialarabic=65231;e.ghainmedialarabic=65232;e.ghemiddlehookcyrillic=1173;e.ghestrokecyrillic=1171;e.gheupturncyrillic=1169;e.ghhadeva=2394;e.ghhagurmukhi=2650;e.ghook=608;e.ghzsquare=13203;e.gihiragana=12366;e.gikatakana=12462;e.gimarmenian=1379;e.gimel=1490;e.gimeldagesh=64306;e.gimeldageshhebrew=64306;e.gimelhebrew=1490;e.gjecyrillic=1107;e.glottalinvertedstroke=446;e.glottalstop=660;e.glottalstopinverted=662;e.glottalstopmod=704;e.glottalstopreversed=661;e.glottalstopreversedmod=705;e.glottalstopreversedsuperior=740;e.glottalstopstroke=673;e.glottalstopstrokereversed=674;e.gmacron=7713;e.gmonospace=65351;e.gohiragana=12372;e.gokatakana=12468;e.gparen=9378;e.gpasquare=13228;e.gradient=8711;e.grave=96;e.gravebelowcmb=790;e.gravecmb=768;e.gravecomb=768;e.gravedeva=2387;e.gravelowmod=718;e.gravemonospace=65344;e.gravetonecmb=832;e.greater=62;e.greaterequal=8805;e.greaterequalorless=8923;e.greatermonospace=65310;e.greaterorequivalent=8819;e.greaterorless=8823;e.greateroverequal=8807;e.greatersmall=65125;e.gscript=609;e.gstroke=485;e.guhiragana=12368;e.guillemotleft=171;e.guillemotright=187;e.guilsinglleft=8249;e.guilsinglright=8250;e.gukatakana=12464;e.guramusquare=13080;e.gysquare=13257;e.h=104;e.haabkhasiancyrillic=1193;e.haaltonearabic=1729;e.habengali=2489;e.hadescendercyrillic=1203;e.hadeva=2361;e.hagujarati=2745;e.hagurmukhi=2617;e.haharabic=1581;e.hahfinalarabic=65186;e.hahinitialarabic=65187;e.hahiragana=12399;e.hahmedialarabic=65188;e.haitusquare=13098;e.hakatakana=12495;e.hakatakanahalfwidth=65418;e.halantgurmukhi=2637;e.hamzaarabic=1569;e.hamzalowarabic=1569;e.hangulfiller=12644;e.hardsigncyrillic=1098;e.harpoonleftbarbup=8636;e.harpoonrightbarbup=8640;e.hasquare=13258;e.hatafpatah=1458;e.hatafpatah16=1458;e.hatafpatah23=1458;e.hatafpatah2f=1458;e.hatafpatahhebrew=1458;e.hatafpatahnarrowhebrew=1458;e.hatafpatahquarterhebrew=1458;e.hatafpatahwidehebrew=1458;e.hatafqamats=1459;e.hatafqamats1b=1459;e.hatafqamats28=1459;e.hatafqamats34=1459;e.hatafqamatshebrew=1459;e.hatafqamatsnarrowhebrew=1459;e.hatafqamatsquarterhebrew=1459;e.hatafqamatswidehebrew=1459;e.hatafsegol=1457;e.hatafsegol17=1457;e.hatafsegol24=1457;e.hatafsegol30=1457;e.hatafsegolhebrew=1457;e.hatafsegolnarrowhebrew=1457;e.hatafsegolquarterhebrew=1457;e.hatafsegolwidehebrew=1457;e.hbar=295;e.hbopomofo=12559;e.hbrevebelow=7723;e.hcedilla=7721;e.hcircle=9431;e.hcircumflex=293;e.hdieresis=7719;e.hdotaccent=7715;e.hdotbelow=7717;e.he=1492;e.heart=9829;e.heartsuitblack=9829;e.heartsuitwhite=9825;e.hedagesh=64308;e.hedageshhebrew=64308;e.hehaltonearabic=1729;e.heharabic=1607;e.hehebrew=1492;e.hehfinalaltonearabic=64423;e.hehfinalalttwoarabic=65258;e.hehfinalarabic=65258;e.hehhamzaabovefinalarabic=64421;e.hehhamzaaboveisolatedarabic=64420;e.hehinitialaltonearabic=64424;e.hehinitialarabic=65259;e.hehiragana=12408;e.hehmedialaltonearabic=64425;e.hehmedialarabic=65260;e.heiseierasquare=13179;e.hekatakana=12504;e.hekatakanahalfwidth=65421;e.hekutaarusquare=13110;e.henghook=615;e.herutusquare=13113;e.het=1495;e.hethebrew=1495;e.hhook=614;e.hhooksuperior=689;e.hieuhacirclekorean=12923;e.hieuhaparenkorean=12827;e.hieuhcirclekorean=12909;e.hieuhkorean=12622;e.hieuhparenkorean=12813;e.hihiragana=12402;e.hikatakana=12498;e.hikatakanahalfwidth=65419;e.hiriq=1460;e.hiriq14=1460;e.hiriq21=1460;e.hiriq2d=1460;e.hiriqhebrew=1460;e.hiriqnarrowhebrew=1460;e.hiriqquarterhebrew=1460;e.hiriqwidehebrew=1460;e.hlinebelow=7830;e.hmonospace=65352;e.hoarmenian=1392;e.hohipthai=3627;e.hohiragana=12411;e.hokatakana=12507;e.hokatakanahalfwidth=65422;e.holam=1465;e.holam19=1465;e.holam26=1465;e.holam32=1465;e.holamhebrew=1465;e.holamnarrowhebrew=1465;e.holamquarterhebrew=1465;e.holamwidehebrew=1465;e.honokhukthai=3630;e.hookabovecomb=777;e.hookcmb=777;e.hookpalatalizedbelowcmb=801;e.hookretroflexbelowcmb=802;e.hoonsquare=13122;e.horicoptic=1001;e.horizontalbar=8213;e.horncmb=795;e.hotsprings=9832;e.house=8962;e.hparen=9379;e.hsuperior=688;e.hturned=613;e.huhiragana=12405;e.huiitosquare=13107;e.hukatakana=12501;e.hukatakanahalfwidth=65420;e.hungarumlaut=733;e.hungarumlautcmb=779;e.hv=405;e.hyphen=45;e.hypheninferior=63205;e.hyphenmonospace=65293;e.hyphensmall=65123;e.hyphensuperior=63206;e.hyphentwo=8208;e.i=105;e.iacute=237;e.iacyrillic=1103;e.ibengali=2439;e.ibopomofo=12583;e.ibreve=301;e.icaron=464;e.icircle=9432;e.icircumflex=238;e.icyrillic=1110;e.idblgrave=521;e.ideographearthcircle=12943;e.ideographfirecircle=12939;e.ideographicallianceparen=12863;e.ideographiccallparen=12858;e.ideographiccentrecircle=12965;e.ideographicclose=12294;e.ideographiccomma=12289;e.ideographiccommaleft=65380;e.ideographiccongratulationparen=12855;e.ideographiccorrectcircle=12963;e.ideographicearthparen=12847;e.ideographicenterpriseparen=12861;e.ideographicexcellentcircle=12957;e.ideographicfestivalparen=12864;e.ideographicfinancialcircle=12950;e.ideographicfinancialparen=12854;e.ideographicfireparen=12843;e.ideographichaveparen=12850;e.ideographichighcircle=12964;e.ideographiciterationmark=12293;e.ideographiclaborcircle=12952;e.ideographiclaborparen=12856;e.ideographicleftcircle=12967;e.ideographiclowcircle=12966;e.ideographicmedicinecircle=12969;e.ideographicmetalparen=12846;e.ideographicmoonparen=12842;e.ideographicnameparen=12852;e.ideographicperiod=12290;e.ideographicprintcircle=12958;e.ideographicreachparen=12867;e.ideographicrepresentparen=12857;e.ideographicresourceparen=12862;e.ideographicrightcircle=12968;e.ideographicsecretcircle=12953;e.ideographicselfparen=12866;e.ideographicsocietyparen=12851;e.ideographicspace=12288;e.ideographicspecialparen=12853;e.ideographicstockparen=12849;e.ideographicstudyparen=12859;e.ideographicsunparen=12848;e.ideographicsuperviseparen=12860;e.ideographicwaterparen=12844;e.ideographicwoodparen=12845;e.ideographiczero=12295;e.ideographmetalcircle=12942;e.ideographmooncircle=12938;e.ideographnamecircle=12948;e.ideographsuncircle=12944;e.ideographwatercircle=12940;e.ideographwoodcircle=12941;e.ideva=2311;e.idieresis=239;e.idieresisacute=7727;e.idieresiscyrillic=1253;e.idotbelow=7883;e.iebrevecyrillic=1239;e.iecyrillic=1077;e.ieungacirclekorean=12917;e.ieungaparenkorean=12821;e.ieungcirclekorean=12903;e.ieungkorean=12615;e.ieungparenkorean=12807;e.igrave=236;e.igujarati=2695;e.igurmukhi=2567;e.ihiragana=12356;e.ihookabove=7881;e.iibengali=2440;e.iicyrillic=1080;e.iideva=2312;e.iigujarati=2696;e.iigurmukhi=2568;e.iimatragurmukhi=2624;e.iinvertedbreve=523;e.iishortcyrillic=1081;e.iivowelsignbengali=2496;e.iivowelsigndeva=2368;e.iivowelsigngujarati=2752;e.ij=307;e.ikatakana=12452;e.ikatakanahalfwidth=65394;e.ikorean=12643;e.ilde=732;e.iluyhebrew=1452;e.imacron=299;e.imacroncyrillic=1251;e.imageorapproximatelyequal=8787;e.imatragurmukhi=2623;e.imonospace=65353;e.increment=8710;e.infinity=8734;e.iniarmenian=1387;e.integral=8747;e.integralbottom=8993;e.integralbt=8993;e.integralex=63733;e.integraltop=8992;e.integraltp=8992;e.intersection=8745;e.intisquare=13061;e.invbullet=9688;e.invcircle=9689;e.invsmileface=9787;e.iocyrillic=1105;e.iogonek=303;e.iota=953;e.iotadieresis=970;e.iotadieresistonos=912;e.iotalatin=617;e.iotatonos=943;e.iparen=9380;e.irigurmukhi=2674;e.ismallhiragana=12355;e.ismallkatakana=12451;e.ismallkatakanahalfwidth=65384;e.issharbengali=2554;e.istroke=616;e.isuperior=63213;e.iterationhiragana=12445;e.iterationkatakana=12541;e.itilde=297;e.itildebelow=7725;e.iubopomofo=12585;e.iucyrillic=1102;e.ivowelsignbengali=2495;e.ivowelsigndeva=2367;e.ivowelsigngujarati=2751;e.izhitsacyrillic=1141;e.izhitsadblgravecyrillic=1143;e.j=106;e.jaarmenian=1393;e.jabengali=2460;e.jadeva=2332;e.jagujarati=2716;e.jagurmukhi=2588;e.jbopomofo=12560;e.jcaron=496;e.jcircle=9433;e.jcircumflex=309;e.jcrossedtail=669;e.jdotlessstroke=607;e.jecyrillic=1112;e.jeemarabic=1580;e.jeemfinalarabic=65182;e.jeeminitialarabic=65183;e.jeemmedialarabic=65184;e.jeharabic=1688;e.jehfinalarabic=64395;e.jhabengali=2461;e.jhadeva=2333;e.jhagujarati=2717;e.jhagurmukhi=2589;e.jheharmenian=1403;e.jis=12292;e.jmonospace=65354;e.jparen=9381;e.jsuperior=690;e.k=107;e.kabashkircyrillic=1185;e.kabengali=2453;e.kacute=7729;e.kacyrillic=1082;e.kadescendercyrillic=1179;e.kadeva=2325;e.kaf=1499;e.kafarabic=1603;e.kafdagesh=64315;e.kafdageshhebrew=64315;e.kaffinalarabic=65242;e.kafhebrew=1499;e.kafinitialarabic=65243;e.kafmedialarabic=65244;e.kafrafehebrew=64333;e.kagujarati=2709;e.kagurmukhi=2581;e.kahiragana=12363;e.kahookcyrillic=1220;e.kakatakana=12459;e.kakatakanahalfwidth=65398;e.kappa=954;e.kappasymbolgreek=1008;e.kapyeounmieumkorean=12657;e.kapyeounphieuphkorean=12676;e.kapyeounpieupkorean=12664;e.kapyeounssangpieupkorean=12665;e.karoriisquare=13069;e.kashidaautoarabic=1600;e.kashidaautonosidebearingarabic=1600;e.kasmallkatakana=12533;e.kasquare=13188;e.kasraarabic=1616;e.kasratanarabic=1613;e.kastrokecyrillic=1183;e.katahiraprolongmarkhalfwidth=65392;e.kaverticalstrokecyrillic=1181;e.kbopomofo=12558;e.kcalsquare=13193;e.kcaron=489;e.kcedilla=311;e.kcircle=9434;e.kcommaaccent=311;e.kdotbelow=7731;e.keharmenian=1412;e.kehiragana=12369;e.kekatakana=12465;e.kekatakanahalfwidth=65401;e.kenarmenian=1391;e.kesmallkatakana=12534;e.kgreenlandic=312;e.khabengali=2454;e.khacyrillic=1093;e.khadeva=2326;e.khagujarati=2710;e.khagurmukhi=2582;e.khaharabic=1582;e.khahfinalarabic=65190;e.khahinitialarabic=65191;e.khahmedialarabic=65192;e.kheicoptic=999;e.khhadeva=2393;e.khhagurmukhi=2649;e.khieukhacirclekorean=12920;e.khieukhaparenkorean=12824;e.khieukhcirclekorean=12906;e.khieukhkorean=12619;e.khieukhparenkorean=12810;e.khokhaithai=3586;e.khokhonthai=3589;e.khokhuatthai=3587;e.khokhwaithai=3588;e.khomutthai=3675;e.khook=409;e.khorakhangthai=3590;e.khzsquare=13201;e.kihiragana=12365;e.kikatakana=12461;e.kikatakanahalfwidth=65399;e.kiroguramusquare=13077;e.kiromeetorusquare=13078;e.kirosquare=13076;e.kiyeokacirclekorean=12910;e.kiyeokaparenkorean=12814;e.kiyeokcirclekorean=12896;e.kiyeokkorean=12593;e.kiyeokparenkorean=12800;e.kiyeoksioskorean=12595;e.kjecyrillic=1116;e.klinebelow=7733;e.klsquare=13208;e.kmcubedsquare=13222;e.kmonospace=65355;e.kmsquaredsquare=13218;e.kohiragana=12371;e.kohmsquare=13248;e.kokaithai=3585;e.kokatakana=12467;e.kokatakanahalfwidth=65402;e.kooposquare=13086;e.koppacyrillic=1153;e.koreanstandardsymbol=12927;e.koroniscmb=835;e.kparen=9382;e.kpasquare=13226;e.ksicyrillic=1135;e.ktsquare=13263;e.kturned=670;e.kuhiragana=12367;e.kukatakana=12463;e.kukatakanahalfwidth=65400;e.kvsquare=13240;e.kwsquare=13246;e.l=108;e.labengali=2482;e.lacute=314;e.ladeva=2354;e.lagujarati=2738;e.lagurmukhi=2610;e.lakkhangyaothai=3653;e.lamaleffinalarabic=65276;e.lamalefhamzaabovefinalarabic=65272;e.lamalefhamzaaboveisolatedarabic=65271;e.lamalefhamzabelowfinalarabic=65274;e.lamalefhamzabelowisolatedarabic=65273;e.lamalefisolatedarabic=65275;e.lamalefmaddaabovefinalarabic=65270;e.lamalefmaddaaboveisolatedarabic=65269;e.lamarabic=1604;e.lambda=955;e.lambdastroke=411;e.lamed=1500;e.lameddagesh=64316;e.lameddageshhebrew=64316;e.lamedhebrew=1500;e.lamfinalarabic=65246;e.lamhahinitialarabic=64714;e.laminitialarabic=65247;e.lamjeeminitialarabic=64713;e.lamkhahinitialarabic=64715;e.lamlamhehisolatedarabic=65010;e.lammedialarabic=65248;e.lammeemhahinitialarabic=64904;e.lammeeminitialarabic=64716;e.largecircle=9711;e.lbar=410;e.lbelt=620;e.lbopomofo=12556;e.lcaron=318;e.lcedilla=316;e.lcircle=9435;e.lcircumflexbelow=7741;e.lcommaaccent=316;e.ldot=320;e.ldotaccent=320;e.ldotbelow=7735;e.ldotbelowmacron=7737;e.leftangleabovecmb=794;e.lefttackbelowcmb=792;e.less=60;e.lessequal=8804;e.lessequalorgreater=8922;e.lessmonospace=65308;e.lessorequivalent=8818;e.lessorgreater=8822;e.lessoverequal=8806;e.lesssmall=65124;e.lezh=622;e.lfblock=9612;e.lhookretroflex=621;e.lira=8356;e.liwnarmenian=1388;e.lj=457;e.ljecyrillic=1113;e.ll=63168;e.lladeva=2355;e.llagujarati=2739;e.llinebelow=7739;e.llladeva=2356;e.llvocalicbengali=2529;e.llvocalicdeva=2401;e.llvocalicvowelsignbengali=2531;e.llvocalicvowelsigndeva=2403;e.lmiddletilde=619;e.lmonospace=65356;e.lmsquare=13264;e.lochulathai=3628;e.logicaland=8743;e.logicalnot=172;e.logicalnotreversed=8976;e.logicalor=8744;e.lolingthai=3621;e.longs=383;e.lowlinecenterline=65102;e.lowlinecmb=818;e.lowlinedashed=65101;e.lozenge=9674;e.lparen=9383;e.lslash=322;e.lsquare=8467;e.lsuperior=63214;e.ltshade=9617;e.luthai=3622;e.lvocalicbengali=2444;e.lvocalicdeva=2316;e.lvocalicvowelsignbengali=2530;e.lvocalicvowelsigndeva=2402;e.lxsquare=13267;e.m=109;e.mabengali=2478;e.macron=175;e.macronbelowcmb=817;e.macroncmb=772;e.macronlowmod=717;e.macronmonospace=65507;e.macute=7743;e.madeva=2350;e.magujarati=2734;e.magurmukhi=2606;e.mahapakhhebrew=1444;e.mahapakhlefthebrew=1444;e.mahiragana=12414;e.maichattawalowleftthai=63637;e.maichattawalowrightthai=63636;e.maichattawathai=3659;e.maichattawaupperleftthai=63635;e.maieklowleftthai=63628;e.maieklowrightthai=63627;e.maiekthai=3656;e.maiekupperleftthai=63626;e.maihanakatleftthai=63620;e.maihanakatthai=3633;e.maitaikhuleftthai=63625;e.maitaikhuthai=3655;e.maitholowleftthai=63631;e.maitholowrightthai=63630;e.maithothai=3657;e.maithoupperleftthai=63629;e.maitrilowleftthai=63634;e.maitrilowrightthai=63633;e.maitrithai=3658;e.maitriupperleftthai=63632;e.maiyamokthai=3654;e.makatakana=12510;e.makatakanahalfwidth=65423;e.male=9794;e.mansyonsquare=13127;e.maqafhebrew=1470;e.mars=9794;e.masoracirclehebrew=1455;e.masquare=13187;e.mbopomofo=12551;e.mbsquare=13268;e.mcircle=9436;e.mcubedsquare=13221;e.mdotaccent=7745;e.mdotbelow=7747;e.meemarabic=1605;e.meemfinalarabic=65250;e.meeminitialarabic=65251;e.meemmedialarabic=65252;e.meemmeeminitialarabic=64721;e.meemmeemisolatedarabic=64584;e.meetorusquare=13133;e.mehiragana=12417;e.meizierasquare=13182;e.mekatakana=12513;e.mekatakanahalfwidth=65426;e.mem=1502;e.memdagesh=64318;e.memdageshhebrew=64318;e.memhebrew=1502;e.menarmenian=1396;e.merkhahebrew=1445;e.merkhakefulahebrew=1446;e.merkhakefulalefthebrew=1446;e.merkhalefthebrew=1445;e.mhook=625;e.mhzsquare=13202;e.middledotkatakanahalfwidth=65381;e.middot=183;e.mieumacirclekorean=12914;e.mieumaparenkorean=12818;e.mieumcirclekorean=12900;e.mieumkorean=12609;e.mieumpansioskorean=12656;e.mieumparenkorean=12804;e.mieumpieupkorean=12654;e.mieumsioskorean=12655;e.mihiragana=12415;e.mikatakana=12511;e.mikatakanahalfwidth=65424;e.minus=8722;e.minusbelowcmb=800;e.minuscircle=8854;e.minusmod=727;e.minusplus=8723;e.minute=8242;e.miribaarusquare=13130;e.mirisquare=13129;e.mlonglegturned=624;e.mlsquare=13206;e.mmcubedsquare=13219;e.mmonospace=65357;e.mmsquaredsquare=13215;e.mohiragana=12418;e.mohmsquare=13249;e.mokatakana=12514;e.mokatakanahalfwidth=65427;e.molsquare=13270;e.momathai=3617;e.moverssquare=13223;e.moverssquaredsquare=13224;e.mparen=9384;e.mpasquare=13227;e.mssquare=13235;e.msuperior=63215;e.mturned=623;e.mu=181;e.mu1=181;e.muasquare=13186;e.muchgreater=8811;e.muchless=8810;e.mufsquare=13196;e.mugreek=956;e.mugsquare=13197;e.muhiragana=12416;e.mukatakana=12512;e.mukatakanahalfwidth=65425;e.mulsquare=13205;e.multiply=215;e.mumsquare=13211;e.munahhebrew=1443;e.munahlefthebrew=1443;e.musicalnote=9834;e.musicalnotedbl=9835;e.musicflatsign=9837;e.musicsharpsign=9839;e.mussquare=13234;e.muvsquare=13238;e.muwsquare=13244;e.mvmegasquare=13241;e.mvsquare=13239;e.mwmegasquare=13247;e.mwsquare=13245;e.n=110;e.nabengali=2472;e.nabla=8711;e.nacute=324;e.nadeva=2344;e.nagujarati=2728;e.nagurmukhi=2600;e.nahiragana=12394;e.nakatakana=12490;e.nakatakanahalfwidth=65413;e.napostrophe=329;e.nasquare=13185;e.nbopomofo=12555;e.nbspace=160;e.ncaron=328;e.ncedilla=326;e.ncircle=9437;e.ncircumflexbelow=7755;e.ncommaaccent=326;e.ndotaccent=7749;e.ndotbelow=7751;e.nehiragana=12397;e.nekatakana=12493;e.nekatakanahalfwidth=65416;e.newsheqelsign=8362;e.nfsquare=13195;e.ngabengali=2457;e.ngadeva=2329;e.ngagujarati=2713;e.ngagurmukhi=2585;e.ngonguthai=3591;e.nhiragana=12435;e.nhookleft=626;e.nhookretroflex=627;e.nieunacirclekorean=12911;e.nieunaparenkorean=12815;e.nieuncieuckorean=12597;e.nieuncirclekorean=12897;e.nieunhieuhkorean=12598;e.nieunkorean=12596;e.nieunpansioskorean=12648;e.nieunparenkorean=12801;e.nieunsioskorean=12647;e.nieuntikeutkorean=12646;e.nihiragana=12395;e.nikatakana=12491;e.nikatakanahalfwidth=65414;e.nikhahitleftthai=63641;e.nikhahitthai=3661;e.nine=57;e.ninearabic=1641;e.ninebengali=2543;e.ninecircle=9320;e.ninecircleinversesansserif=10130;e.ninedeva=2415;e.ninegujarati=2799;e.ninegurmukhi=2671;e.ninehackarabic=1641;e.ninehangzhou=12329;e.nineideographicparen=12840;e.nineinferior=8329;e.ninemonospace=65305;e.nineoldstyle=63289;e.nineparen=9340;e.nineperiod=9360;e.ninepersian=1785;e.nineroman=8568;e.ninesuperior=8313;e.nineteencircle=9330;e.nineteenparen=9350;e.nineteenperiod=9370;e.ninethai=3673;e.nj=460;e.njecyrillic=1114;e.nkatakana=12531;e.nkatakanahalfwidth=65437;e.nlegrightlong=414;e.nlinebelow=7753;e.nmonospace=65358;e.nmsquare=13210;e.nnabengali=2467;e.nnadeva=2339;e.nnagujarati=2723;e.nnagurmukhi=2595;e.nnnadeva=2345;e.nohiragana=12398;e.nokatakana=12494;e.nokatakanahalfwidth=65417;e.nonbreakingspace=160;e.nonenthai=3603;e.nonuthai=3609;e.noonarabic=1606;e.noonfinalarabic=65254;e.noonghunnaarabic=1722;e.noonghunnafinalarabic=64415;e.nooninitialarabic=65255;e.noonjeeminitialarabic=64722;e.noonjeemisolatedarabic=64587;e.noonmedialarabic=65256;e.noonmeeminitialarabic=64725;e.noonmeemisolatedarabic=64590;e.noonnoonfinalarabic=64653;e.notcontains=8716;e.notelement=8713;e.notelementof=8713;e.notequal=8800;e.notgreater=8815;e.notgreaternorequal=8817;e.notgreaternorless=8825;e.notidentical=8802;e.notless=8814;e.notlessnorequal=8816;e.notparallel=8742;e.notprecedes=8832;e.notsubset=8836;e.notsucceeds=8833;e.notsuperset=8837;e.nowarmenian=1398;e.nparen=9385;e.nssquare=13233;e.nsuperior=8319;e.ntilde=241;e.nu=957;e.nuhiragana=12396;e.nukatakana=12492;e.nukatakanahalfwidth=65415;e.nuktabengali=2492;e.nuktadeva=2364;e.nuktagujarati=2748;e.nuktagurmukhi=2620;e.numbersign=35;e.numbersignmonospace=65283;e.numbersignsmall=65119;e.numeralsigngreek=884;e.numeralsignlowergreek=885;e.numero=8470;e.nun=1504;e.nundagesh=64320;e.nundageshhebrew=64320;e.nunhebrew=1504;e.nvsquare=13237;e.nwsquare=13243;e.nyabengali=2462;e.nyadeva=2334;e.nyagujarati=2718;e.nyagurmukhi=2590;e.o=111;e.oacute=243;e.oangthai=3629;e.obarred=629;e.obarredcyrillic=1257;e.obarreddieresiscyrillic=1259;e.obengali=2451;e.obopomofo=12571;e.obreve=335;e.ocandradeva=2321;e.ocandragujarati=2705;e.ocandravowelsigndeva=2377;e.ocandravowelsigngujarati=2761;e.ocaron=466;e.ocircle=9438;e.ocircumflex=244;e.ocircumflexacute=7889;e.ocircumflexdotbelow=7897;e.ocircumflexgrave=7891;e.ocircumflexhookabove=7893;e.ocircumflextilde=7895;e.ocyrillic=1086;e.odblacute=337;e.odblgrave=525;e.odeva=2323;e.odieresis=246;e.odieresiscyrillic=1255;e.odotbelow=7885;e.oe=339;e.oekorean=12634;e.ogonek=731;e.ogonekcmb=808;e.ograve=242;e.ogujarati=2707;e.oharmenian=1413;e.ohiragana=12362;e.ohookabove=7887;e.ohorn=417;e.ohornacute=7899;e.ohorndotbelow=7907;e.ohorngrave=7901;e.ohornhookabove=7903;e.ohorntilde=7905;e.ohungarumlaut=337;e.oi=419;e.oinvertedbreve=527;e.okatakana=12458;e.okatakanahalfwidth=65397;e.okorean=12631;e.olehebrew=1451;e.omacron=333;e.omacronacute=7763;e.omacrongrave=7761;e.omdeva=2384;e.omega=969;e.omega1=982;e.omegacyrillic=1121;e.omegalatinclosed=631;e.omegaroundcyrillic=1147;e.omegatitlocyrillic=1149;e.omegatonos=974;e.omgujarati=2768;e.omicron=959;e.omicrontonos=972;e.omonospace=65359;e.one=49;e.onearabic=1633;e.onebengali=2535;e.onecircle=9312;e.onecircleinversesansserif=10122;e.onedeva=2407;e.onedotenleader=8228;e.oneeighth=8539;e.onefitted=63196;e.onegujarati=2791;e.onegurmukhi=2663;e.onehackarabic=1633;e.onehalf=189;e.onehangzhou=12321;e.oneideographicparen=12832;e.oneinferior=8321;e.onemonospace=65297;e.onenumeratorbengali=2548;e.oneoldstyle=63281;e.oneparen=9332;e.oneperiod=9352;e.onepersian=1777;e.onequarter=188;e.oneroman=8560;e.onesuperior=185;e.onethai=3665;e.onethird=8531;e.oogonek=491;e.oogonekmacron=493;e.oogurmukhi=2579;e.oomatragurmukhi=2635;e.oopen=596;e.oparen=9386;e.openbullet=9702;e.option=8997;e.ordfeminine=170;e.ordmasculine=186;e.orthogonal=8735;e.oshortdeva=2322;e.oshortvowelsigndeva=2378;e.oslash=248;e.oslashacute=511;e.osmallhiragana=12361;e.osmallkatakana=12457;e.osmallkatakanahalfwidth=65387;e.ostrokeacute=511;e.osuperior=63216;e.otcyrillic=1151;e.otilde=245;e.otildeacute=7757;e.otildedieresis=7759;e.oubopomofo=12577;e.overline=8254;e.overlinecenterline=65098;e.overlinecmb=773;e.overlinedashed=65097;e.overlinedblwavy=65100;e.overlinewavy=65099;e.overscore=175;e.ovowelsignbengali=2507;e.ovowelsigndeva=2379;e.ovowelsigngujarati=2763;e.p=112;e.paampssquare=13184;e.paasentosquare=13099;e.pabengali=2474;e.pacute=7765;e.padeva=2346;e.pagedown=8671;e.pageup=8670;e.pagujarati=2730;e.pagurmukhi=2602;e.pahiragana=12401;e.paiyannoithai=3631;e.pakatakana=12497;e.palatalizationcyrilliccmb=1156;e.palochkacyrillic=1216;e.pansioskorean=12671;e.paragraph=182;e.parallel=8741;e.parenleft=40;e.parenleftaltonearabic=64830;e.parenleftbt=63725;e.parenleftex=63724;e.parenleftinferior=8333;e.parenleftmonospace=65288;e.parenleftsmall=65113;e.parenleftsuperior=8317;e.parenlefttp=63723;e.parenleftvertical=65077;e.parenright=41;e.parenrightaltonearabic=64831;e.parenrightbt=63736;e.parenrightex=63735;e.parenrightinferior=8334;e.parenrightmonospace=65289;e.parenrightsmall=65114;e.parenrightsuperior=8318;e.parenrighttp=63734;e.parenrightvertical=65078;e.partialdiff=8706;e.paseqhebrew=1472;e.pashtahebrew=1433;e.pasquare=13225;e.patah=1463;e.patah11=1463;e.patah1d=1463;e.patah2a=1463;e.patahhebrew=1463;e.patahnarrowhebrew=1463;e.patahquarterhebrew=1463;e.patahwidehebrew=1463;e.pazerhebrew=1441;e.pbopomofo=12550;e.pcircle=9439;e.pdotaccent=7767;e.pe=1508;e.pecyrillic=1087;e.pedagesh=64324;e.pedageshhebrew=64324;e.peezisquare=13115;e.pefinaldageshhebrew=64323;e.peharabic=1662;e.peharmenian=1402;e.pehebrew=1508;e.pehfinalarabic=64343;e.pehinitialarabic=64344;e.pehiragana=12410;e.pehmedialarabic=64345;e.pekatakana=12506;e.pemiddlehookcyrillic=1191;e.perafehebrew=64334;e.percent=37;e.percentarabic=1642;e.percentmonospace=65285;e.percentsmall=65130;e.period=46;e.periodarmenian=1417;e.periodcentered=183;e.periodhalfwidth=65377;e.periodinferior=63207;e.periodmonospace=65294;e.periodsmall=65106;e.periodsuperior=63208;e.perispomenigreekcmb=834;e.perpendicular=8869;e.perthousand=8240;e.peseta=8359;e.pfsquare=13194;e.phabengali=2475;e.phadeva=2347;e.phagujarati=2731;e.phagurmukhi=2603;e.phi=966;e.phi1=981;e.phieuphacirclekorean=12922;e.phieuphaparenkorean=12826;e.phieuphcirclekorean=12908;e.phieuphkorean=12621;e.phieuphparenkorean=12812;e.philatin=632;e.phinthuthai=3642;e.phisymbolgreek=981;e.phook=421;e.phophanthai=3614;e.phophungthai=3612;e.phosamphaothai=3616;e.pi=960;e.pieupacirclekorean=12915;e.pieupaparenkorean=12819;e.pieupcieuckorean=12662;e.pieupcirclekorean=12901;e.pieupkiyeokkorean=12658;e.pieupkorean=12610;e.pieupparenkorean=12805;e.pieupsioskiyeokkorean=12660;e.pieupsioskorean=12612;e.pieupsiostikeutkorean=12661;e.pieupthieuthkorean=12663;e.pieuptikeutkorean=12659;e.pihiragana=12404;e.pikatakana=12500;e.pisymbolgreek=982;e.piwrarmenian=1411;e.plus=43;e.plusbelowcmb=799;e.pluscircle=8853;e.plusminus=177;e.plusmod=726;e.plusmonospace=65291;e.plussmall=65122;e.plussuperior=8314;e.pmonospace=65360;e.pmsquare=13272;e.pohiragana=12413;e.pointingindexdownwhite=9759;e.pointingindexleftwhite=9756;e.pointingindexrightwhite=9758;e.pointingindexupwhite=9757;e.pokatakana=12509;e.poplathai=3611;e.postalmark=12306;e.postalmarkface=12320;e.pparen=9387;e.precedes=8826;e.prescription=8478;e.primemod=697;e.primereversed=8245;e.product=8719;e.projective=8965;e.prolongedkana=12540;e.propellor=8984;e.propersubset=8834;e.propersuperset=8835;e.proportion=8759;e.proportional=8733;e.psi=968;e.psicyrillic=1137;e.psilipneumatacyrilliccmb=1158;e.pssquare=13232;e.puhiragana=12407;e.pukatakana=12503;e.pvsquare=13236;e.pwsquare=13242;e.q=113;e.qadeva=2392;e.qadmahebrew=1448;e.qafarabic=1602;e.qaffinalarabic=65238;e.qafinitialarabic=65239;e.qafmedialarabic=65240;e.qamats=1464;e.qamats10=1464;e.qamats1a=1464;e.qamats1c=1464;e.qamats27=1464;e.qamats29=1464;e.qamats33=1464;e.qamatsde=1464;e.qamatshebrew=1464;e.qamatsnarrowhebrew=1464;e.qamatsqatanhebrew=1464;e.qamatsqatannarrowhebrew=1464;e.qamatsqatanquarterhebrew=1464;e.qamatsqatanwidehebrew=1464;e.qamatsquarterhebrew=1464;e.qamatswidehebrew=1464;e.qarneyparahebrew=1439;e.qbopomofo=12561;e.qcircle=9440;e.qhook=672;e.qmonospace=65361;e.qof=1511;e.qofdagesh=64327;e.qofdageshhebrew=64327;e.qofhebrew=1511;e.qparen=9388;e.quarternote=9833;e.qubuts=1467;e.qubuts18=1467;e.qubuts25=1467;e.qubuts31=1467;e.qubutshebrew=1467;e.qubutsnarrowhebrew=1467;e.qubutsquarterhebrew=1467;e.qubutswidehebrew=1467;e.question=63;e.questionarabic=1567;e.questionarmenian=1374;e.questiondown=191;e.questiondownsmall=63423;e.questiongreek=894;e.questionmonospace=65311;e.questionsmall=63295;e.quotedbl=34;e.quotedblbase=8222;e.quotedblleft=8220;e.quotedblmonospace=65282;e.quotedblprime=12318;e.quotedblprimereversed=12317;e.quotedblright=8221;e.quoteleft=8216;e.quoteleftreversed=8219;e.quotereversed=8219;e.quoteright=8217;e.quoterightn=329;e.quotesinglbase=8218;e.quotesingle=39;e.quotesinglemonospace=65287;e.r=114;e.raarmenian=1404;e.rabengali=2480;e.racute=341;e.radeva=2352;e.radical=8730;e.radicalex=63717;e.radoverssquare=13230;e.radoverssquaredsquare=13231;e.radsquare=13229;e.rafe=1471;e.rafehebrew=1471;e.ragujarati=2736;e.ragurmukhi=2608;e.rahiragana=12425;e.rakatakana=12521;e.rakatakanahalfwidth=65431;e.ralowerdiagonalbengali=2545;e.ramiddlediagonalbengali=2544;e.ramshorn=612;e.ratio=8758;e.rbopomofo=12566;e.rcaron=345;e.rcedilla=343;e.rcircle=9441;e.rcommaaccent=343;e.rdblgrave=529;e.rdotaccent=7769;e.rdotbelow=7771;e.rdotbelowmacron=7773;e.referencemark=8251;e.reflexsubset=8838;e.reflexsuperset=8839;e.registered=174;e.registersans=63720;e.registerserif=63194;e.reharabic=1585;e.reharmenian=1408;e.rehfinalarabic=65198;e.rehiragana=12428;e.rekatakana=12524;e.rekatakanahalfwidth=65434;e.resh=1512;e.reshdageshhebrew=64328;e.reshhebrew=1512;e.reversedtilde=8765;e.reviahebrew=1431;e.reviamugrashhebrew=1431;e.revlogicalnot=8976;e.rfishhook=638;e.rfishhookreversed=639;e.rhabengali=2525;e.rhadeva=2397;e.rho=961;e.rhook=637;e.rhookturned=635;e.rhookturnedsuperior=693;e.rhosymbolgreek=1009;e.rhotichookmod=734;e.rieulacirclekorean=12913;e.rieulaparenkorean=12817;e.rieulcirclekorean=12899;e.rieulhieuhkorean=12608;e.rieulkiyeokkorean=12602;e.rieulkiyeoksioskorean=12649;e.rieulkorean=12601;e.rieulmieumkorean=12603;e.rieulpansioskorean=12652;e.rieulparenkorean=12803;e.rieulphieuphkorean=12607;e.rieulpieupkorean=12604;e.rieulpieupsioskorean=12651;e.rieulsioskorean=12605;e.rieulthieuthkorean=12606;e.rieultikeutkorean=12650;e.rieulyeorinhieuhkorean=12653;e.rightangle=8735;e.righttackbelowcmb=793;e.righttriangle=8895;e.rihiragana=12426;e.rikatakana=12522;e.rikatakanahalfwidth=65432;e.ring=730;e.ringbelowcmb=805;e.ringcmb=778;e.ringhalfleft=703;e.ringhalfleftarmenian=1369;e.ringhalfleftbelowcmb=796;e.ringhalfleftcentered=723;e.ringhalfright=702;e.ringhalfrightbelowcmb=825;e.ringhalfrightcentered=722;e.rinvertedbreve=531;e.rittorusquare=13137;e.rlinebelow=7775;e.rlongleg=636;e.rlonglegturned=634;e.rmonospace=65362;e.rohiragana=12429;e.rokatakana=12525;e.rokatakanahalfwidth=65435;e.roruathai=3619;e.rparen=9389;e.rrabengali=2524;e.rradeva=2353;e.rragurmukhi=2652;e.rreharabic=1681;e.rrehfinalarabic=64397;e.rrvocalicbengali=2528;e.rrvocalicdeva=2400;e.rrvocalicgujarati=2784;e.rrvocalicvowelsignbengali=2500;e.rrvocalicvowelsigndeva=2372;e.rrvocalicvowelsigngujarati=2756;e.rsuperior=63217;e.rtblock=9616;e.rturned=633;e.rturnedsuperior=692;e.ruhiragana=12427;e.rukatakana=12523;e.rukatakanahalfwidth=65433;e.rupeemarkbengali=2546;e.rupeesignbengali=2547;e.rupiah=63197;e.ruthai=3620;e.rvocalicbengali=2443;e.rvocalicdeva=2315;e.rvocalicgujarati=2699;e.rvocalicvowelsignbengali=2499;e.rvocalicvowelsigndeva=2371;e.rvocalicvowelsigngujarati=2755;e.s=115;e.sabengali=2488;e.sacute=347;e.sacutedotaccent=7781;e.sadarabic=1589;e.sadeva=2360;e.sadfinalarabic=65210;e.sadinitialarabic=65211;e.sadmedialarabic=65212;e.sagujarati=2744;e.sagurmukhi=2616;e.sahiragana=12373;e.sakatakana=12469;e.sakatakanahalfwidth=65403;e.sallallahoualayhewasallamarabic=65018;e.samekh=1505;e.samekhdagesh=64321;e.samekhdageshhebrew=64321;e.samekhhebrew=1505;e.saraaathai=3634;e.saraaethai=3649;e.saraaimaimalaithai=3652;e.saraaimaimuanthai=3651;e.saraamthai=3635;e.saraathai=3632;e.saraethai=3648;e.saraiileftthai=63622;e.saraiithai=3637;e.saraileftthai=63621;e.saraithai=3636;e.saraothai=3650;e.saraueeleftthai=63624;e.saraueethai=3639;e.saraueleftthai=63623;e.sarauethai=3638;e.sarauthai=3640;e.sarauuthai=3641;e.sbopomofo=12569;e.scaron=353;e.scarondotaccent=7783;e.scedilla=351;e.schwa=601;e.schwacyrillic=1241;e.schwadieresiscyrillic=1243;e.schwahook=602;e.scircle=9442;e.scircumflex=349;e.scommaaccent=537;e.sdotaccent=7777;e.sdotbelow=7779;e.sdotbelowdotaccent=7785;e.seagullbelowcmb=828;e.second=8243;e.secondtonechinese=714;e.section=167;e.seenarabic=1587;e.seenfinalarabic=65202;e.seeninitialarabic=65203;e.seenmedialarabic=65204;e.segol=1462;e.segol13=1462;e.segol1f=1462;e.segol2c=1462;e.segolhebrew=1462;e.segolnarrowhebrew=1462;e.segolquarterhebrew=1462;e.segoltahebrew=1426;e.segolwidehebrew=1462;e.seharmenian=1405;e.sehiragana=12379;e.sekatakana=12475;e.sekatakanahalfwidth=65406;e.semicolon=59;e.semicolonarabic=1563;e.semicolonmonospace=65307;e.semicolonsmall=65108;e.semivoicedmarkkana=12444;e.semivoicedmarkkanahalfwidth=65439;e.sentisquare=13090;e.sentosquare=13091;e.seven=55;e.sevenarabic=1639;e.sevenbengali=2541;e.sevencircle=9318;e.sevencircleinversesansserif=10128;e.sevendeva=2413;e.seveneighths=8542;e.sevengujarati=2797;e.sevengurmukhi=2669;e.sevenhackarabic=1639;e.sevenhangzhou=12327;e.sevenideographicparen=12838;e.seveninferior=8327;e.sevenmonospace=65303;e.sevenoldstyle=63287;e.sevenparen=9338;e.sevenperiod=9358;e.sevenpersian=1783;e.sevenroman=8566;e.sevensuperior=8311;e.seventeencircle=9328;e.seventeenparen=9348;e.seventeenperiod=9368;e.seventhai=3671;e.sfthyphen=173;e.shaarmenian=1399;e.shabengali=2486;e.shacyrillic=1096;e.shaddaarabic=1617;e.shaddadammaarabic=64609;e.shaddadammatanarabic=64606;e.shaddafathaarabic=64608;e.shaddakasraarabic=64610;e.shaddakasratanarabic=64607;e.shade=9618;e.shadedark=9619;e.shadelight=9617;e.shademedium=9618;e.shadeva=2358;e.shagujarati=2742;e.shagurmukhi=2614;e.shalshelethebrew=1427;e.shbopomofo=12565;e.shchacyrillic=1097;e.sheenarabic=1588;e.sheenfinalarabic=65206;e.sheeninitialarabic=65207;e.sheenmedialarabic=65208;e.sheicoptic=995;e.sheqel=8362;e.sheqelhebrew=8362;e.sheva=1456;e.sheva115=1456;e.sheva15=1456;e.sheva22=1456;e.sheva2e=1456;e.shevahebrew=1456;e.shevanarrowhebrew=1456;e.shevaquarterhebrew=1456;e.shevawidehebrew=1456;e.shhacyrillic=1211;e.shimacoptic=1005;e.shin=1513;e.shindagesh=64329;e.shindageshhebrew=64329;e.shindageshshindot=64300;e.shindageshshindothebrew=64300;e.shindageshsindot=64301;e.shindageshsindothebrew=64301;e.shindothebrew=1473;e.shinhebrew=1513;e.shinshindot=64298;e.shinshindothebrew=64298;e.shinsindot=64299;e.shinsindothebrew=64299;e.shook=642;e.sigma=963;e.sigma1=962;e.sigmafinal=962;e.sigmalunatesymbolgreek=1010;e.sihiragana=12375;e.sikatakana=12471;e.sikatakanahalfwidth=65404;e.siluqhebrew=1469;e.siluqlefthebrew=1469;e.similar=8764;e.sindothebrew=1474;e.siosacirclekorean=12916;e.siosaparenkorean=12820;e.sioscieuckorean=12670;e.sioscirclekorean=12902;e.sioskiyeokkorean=12666;e.sioskorean=12613;e.siosnieunkorean=12667;e.siosparenkorean=12806;e.siospieupkorean=12669;e.siostikeutkorean=12668;e.six=54;e.sixarabic=1638;e.sixbengali=2540;e.sixcircle=9317;e.sixcircleinversesansserif=10127;e.sixdeva=2412;e.sixgujarati=2796;e.sixgurmukhi=2668;e.sixhackarabic=1638;e.sixhangzhou=12326;e.sixideographicparen=12837;e.sixinferior=8326;e.sixmonospace=65302;e.sixoldstyle=63286;e.sixparen=9337;e.sixperiod=9357;e.sixpersian=1782;e.sixroman=8565;e.sixsuperior=8310;e.sixteencircle=9327;e.sixteencurrencydenominatorbengali=2553;e.sixteenparen=9347;e.sixteenperiod=9367;e.sixthai=3670;e.slash=47;e.slashmonospace=65295;e.slong=383;e.slongdotaccent=7835;e.smileface=9786;e.smonospace=65363;e.sofpasuqhebrew=1475;e.softhyphen=173;e.softsigncyrillic=1100;e.sohiragana=12381;e.sokatakana=12477;e.sokatakanahalfwidth=65407;e.soliduslongoverlaycmb=824;e.solidusshortoverlaycmb=823;e.sorusithai=3625;e.sosalathai=3624;e.sosothai=3595;e.sosuathai=3626;e.space=32;e.spacehackarabic=32;e.spade=9824;e.spadesuitblack=9824;e.spadesuitwhite=9828;e.sparen=9390;e.squarebelowcmb=827;e.squarecc=13252;e.squarecm=13213;e.squarediagonalcrosshatchfill=9641;e.squarehorizontalfill=9636;e.squarekg=13199;e.squarekm=13214;e.squarekmcapital=13262;e.squareln=13265;e.squarelog=13266;e.squaremg=13198;e.squaremil=13269;e.squaremm=13212;e.squaremsquared=13217;e.squareorthogonalcrosshatchfill=9638;e.squareupperlefttolowerrightfill=9639;e.squareupperrighttolowerleftfill=9640;e.squareverticalfill=9637;e.squarewhitewithsmallblack=9635;e.srsquare=13275;e.ssabengali=2487;e.ssadeva=2359;e.ssagujarati=2743;e.ssangcieuckorean=12617;e.ssanghieuhkorean=12677;e.ssangieungkorean=12672;e.ssangkiyeokkorean=12594;e.ssangnieunkorean=12645;e.ssangpieupkorean=12611;e.ssangsioskorean=12614;e.ssangtikeutkorean=12600;e.ssuperior=63218;e.sterling=163;e.sterlingmonospace=65505;e.strokelongoverlaycmb=822;e.strokeshortoverlaycmb=821;e.subset=8834;e.subsetnotequal=8842;e.subsetorequal=8838;e.succeeds=8827;e.suchthat=8715;e.suhiragana=12377;e.sukatakana=12473;e.sukatakanahalfwidth=65405;e.sukunarabic=1618;e.summation=8721;e.sun=9788;e.superset=8835;e.supersetnotequal=8843;e.supersetorequal=8839;e.svsquare=13276;e.syouwaerasquare=13180;e.t=116;e.tabengali=2468;e.tackdown=8868;e.tackleft=8867;e.tadeva=2340;e.tagujarati=2724;e.tagurmukhi=2596;e.taharabic=1591;e.tahfinalarabic=65218;e.tahinitialarabic=65219;e.tahiragana=12383;e.tahmedialarabic=65220;e.taisyouerasquare=13181;e.takatakana=12479;e.takatakanahalfwidth=65408;e.tatweelarabic=1600;e.tau=964;e.tav=1514;e.tavdages=64330;e.tavdagesh=64330;e.tavdageshhebrew=64330;e.tavhebrew=1514;e.tbar=359;e.tbopomofo=12554;e.tcaron=357;e.tccurl=680;e.tcedilla=355;e.tcheharabic=1670;e.tchehfinalarabic=64379;e.tchehinitialarabic=64380;e.tchehmedialarabic=64381;e.tcircle=9443;e.tcircumflexbelow=7793;e.tcommaaccent=355;e.tdieresis=7831;e.tdotaccent=7787;e.tdotbelow=7789;e.tecyrillic=1090;e.tedescendercyrillic=1197;e.teharabic=1578;e.tehfinalarabic=65174;e.tehhahinitialarabic=64674;e.tehhahisolatedarabic=64524;e.tehinitialarabic=65175;e.tehiragana=12390;e.tehjeeminitialarabic=64673;e.tehjeemisolatedarabic=64523;e.tehmarbutaarabic=1577;e.tehmarbutafinalarabic=65172;e.tehmedialarabic=65176;e.tehmeeminitialarabic=64676;e.tehmeemisolatedarabic=64526;e.tehnoonfinalarabic=64627;e.tekatakana=12486;e.tekatakanahalfwidth=65411;e.telephone=8481;e.telephoneblack=9742;e.telishagedolahebrew=1440;e.telishaqetanahebrew=1449;e.tencircle=9321;e.tenideographicparen=12841;e.tenparen=9341;e.tenperiod=9361;e.tenroman=8569;e.tesh=679;e.tet=1496;e.tetdagesh=64312;e.tetdageshhebrew=64312;e.tethebrew=1496;e.tetsecyrillic=1205;e.tevirhebrew=1435;e.tevirlefthebrew=1435;e.thabengali=2469;e.thadeva=2341;e.thagujarati=2725;e.thagurmukhi=2597;e.thalarabic=1584;e.thalfinalarabic=65196;e.thanthakhatlowleftthai=63640;e.thanthakhatlowrightthai=63639;e.thanthakhatthai=3660;e.thanthakhatupperleftthai=63638;e.theharabic=1579;e.thehfinalarabic=65178;e.thehinitialarabic=65179;e.thehmedialarabic=65180;e.thereexists=8707;e.therefore=8756;e.theta=952;e.theta1=977;e.thetasymbolgreek=977;e.thieuthacirclekorean=12921;e.thieuthaparenkorean=12825;e.thieuthcirclekorean=12907;e.thieuthkorean=12620;e.thieuthparenkorean=12811;e.thirteencircle=9324;e.thirteenparen=9344;e.thirteenperiod=9364;e.thonangmonthothai=3601;e.thook=429;e.thophuthaothai=3602;e.thorn=254;e.thothahanthai=3607;e.thothanthai=3600;e.thothongthai=3608;e.thothungthai=3606;e.thousandcyrillic=1154;e.thousandsseparatorarabic=1644;e.thousandsseparatorpersian=1644;e.three=51;e.threearabic=1635;e.threebengali=2537;e.threecircle=9314;e.threecircleinversesansserif=10124;e.threedeva=2409;e.threeeighths=8540;e.threegujarati=2793;e.threegurmukhi=2665;e.threehackarabic=1635;e.threehangzhou=12323;e.threeideographicparen=12834;e.threeinferior=8323;e.threemonospace=65299;e.threenumeratorbengali=2550;e.threeoldstyle=63283;e.threeparen=9334;e.threeperiod=9354;e.threepersian=1779;e.threequarters=190;e.threequartersemdash=63198;e.threeroman=8562;e.threesuperior=179;e.threethai=3667;e.thzsquare=13204;e.tihiragana=12385;e.tikatakana=12481;e.tikatakanahalfwidth=65409;e.tikeutacirclekorean=12912;e.tikeutaparenkorean=12816;e.tikeutcirclekorean=12898;e.tikeutkorean=12599;e.tikeutparenkorean=12802;e.tilde=732;e.tildebelowcmb=816;e.tildecmb=771;e.tildecomb=771;e.tildedoublecmb=864;e.tildeoperator=8764;e.tildeoverlaycmb=820;e.tildeverticalcmb=830;e.timescircle=8855;e.tipehahebrew=1430;e.tipehalefthebrew=1430;e.tippigurmukhi=2672;e.titlocyrilliccmb=1155;e.tiwnarmenian=1407;e.tlinebelow=7791;e.tmonospace=65364;e.toarmenian=1385;e.tohiragana=12392;e.tokatakana=12488;e.tokatakanahalfwidth=65412;e.tonebarextrahighmod=741;e.tonebarextralowmod=745;e.tonebarhighmod=742;e.tonebarlowmod=744;e.tonebarmidmod=743;e.tonefive=445;e.tonesix=389;e.tonetwo=424;e.tonos=900;e.tonsquare=13095;e.topatakthai=3599;e.tortoiseshellbracketleft=12308;e.tortoiseshellbracketleftsmall=65117;e.tortoiseshellbracketleftvertical=65081;e.tortoiseshellbracketright=12309;e.tortoiseshellbracketrightsmall=65118;e.tortoiseshellbracketrightvertical=65082;e.totaothai=3605;e.tpalatalhook=427;e.tparen=9391;e.trademark=8482;e.trademarksans=63722;e.trademarkserif=63195;e.tretroflexhook=648;e.triagdn=9660;e.triaglf=9668;e.triagrt=9658;e.triagup=9650;e.ts=678;e.tsadi=1510;e.tsadidagesh=64326;e.tsadidageshhebrew=64326;e.tsadihebrew=1510;e.tsecyrillic=1094;e.tsere=1461;e.tsere12=1461;e.tsere1e=1461;e.tsere2b=1461;e.tserehebrew=1461;e.tserenarrowhebrew=1461;e.tserequarterhebrew=1461;e.tserewidehebrew=1461;e.tshecyrillic=1115;e.tsuperior=63219;e.ttabengali=2463;e.ttadeva=2335;e.ttagujarati=2719;e.ttagurmukhi=2591;e.tteharabic=1657;e.ttehfinalarabic=64359;e.ttehinitialarabic=64360;e.ttehmedialarabic=64361;e.tthabengali=2464;e.tthadeva=2336;e.tthagujarati=2720;e.tthagurmukhi=2592;e.tturned=647;e.tuhiragana=12388;e.tukatakana=12484;e.tukatakanahalfwidth=65410;e.tusmallhiragana=12387;e.tusmallkatakana=12483;e.tusmallkatakanahalfwidth=65391;e.twelvecircle=9323;e.twelveparen=9343;e.twelveperiod=9363;e.twelveroman=8571;e.twentycircle=9331;e.twentyhangzhou=21316;e.twentyparen=9351;e.twentyperiod=9371;e.two=50;e.twoarabic=1634;e.twobengali=2536;e.twocircle=9313;e.twocircleinversesansserif=10123;e.twodeva=2408;e.twodotenleader=8229;e.twodotleader=8229;e.twodotleadervertical=65072;e.twogujarati=2792;e.twogurmukhi=2664;e.twohackarabic=1634;e.twohangzhou=12322;e.twoideographicparen=12833;e.twoinferior=8322;e.twomonospace=65298;e.twonumeratorbengali=2549;e.twooldstyle=63282;e.twoparen=9333;e.twoperiod=9353;e.twopersian=1778;e.tworoman=8561;e.twostroke=443;e.twosuperior=178;e.twothai=3666;e.twothirds=8532;e.u=117;e.uacute=250;e.ubar=649;e.ubengali=2441;e.ubopomofo=12584;e.ubreve=365;e.ucaron=468;e.ucircle=9444;e.ucircumflex=251;e.ucircumflexbelow=7799;e.ucyrillic=1091;e.udattadeva=2385;e.udblacute=369;e.udblgrave=533;e.udeva=2313;e.udieresis=252;e.udieresisacute=472;e.udieresisbelow=7795;e.udieresiscaron=474;e.udieresiscyrillic=1265;e.udieresisgrave=476;e.udieresismacron=470;e.udotbelow=7909;e.ugrave=249;e.ugujarati=2697;e.ugurmukhi=2569;e.uhiragana=12358;e.uhookabove=7911;e.uhorn=432;e.uhornacute=7913;e.uhorndotbelow=7921;e.uhorngrave=7915;e.uhornhookabove=7917;e.uhorntilde=7919;e.uhungarumlaut=369;e.uhungarumlautcyrillic=1267;e.uinvertedbreve=535;e.ukatakana=12454;e.ukatakanahalfwidth=65395;e.ukcyrillic=1145;e.ukorean=12636;e.umacron=363;e.umacroncyrillic=1263;e.umacrondieresis=7803;e.umatragurmukhi=2625;e.umonospace=65365;e.underscore=95;e.underscoredbl=8215;e.underscoremonospace=65343;e.underscorevertical=65075;e.underscorewavy=65103;e.union=8746;e.universal=8704;e.uogonek=371;e.uparen=9392;e.upblock=9600;e.upperdothebrew=1476;e.upsilon=965;e.upsilondieresis=971;e.upsilondieresistonos=944;e.upsilonlatin=650;e.upsilontonos=973;e.uptackbelowcmb=797;e.uptackmod=724;e.uragurmukhi=2675;e.uring=367;e.ushortcyrillic=1118;e.usmallhiragana=12357;e.usmallkatakana=12453;e.usmallkatakanahalfwidth=65385;e.ustraightcyrillic=1199;e.ustraightstrokecyrillic=1201;e.utilde=361;e.utildeacute=7801;e.utildebelow=7797;e.uubengali=2442;e.uudeva=2314;e.uugujarati=2698;e.uugurmukhi=2570;e.uumatragurmukhi=2626;e.uuvowelsignbengali=2498;e.uuvowelsigndeva=2370;e.uuvowelsigngujarati=2754;e.uvowelsignbengali=2497;e.uvowelsigndeva=2369;e.uvowelsigngujarati=2753;e.v=118;e.vadeva=2357;e.vagujarati=2741;e.vagurmukhi=2613;e.vakatakana=12535;e.vav=1493;e.vavdagesh=64309;e.vavdagesh65=64309;e.vavdageshhebrew=64309;e.vavhebrew=1493;e.vavholam=64331;e.vavholamhebrew=64331;e.vavvavhebrew=1520;e.vavyodhebrew=1521;e.vcircle=9445;e.vdotbelow=7807;e.vecyrillic=1074;e.veharabic=1700;e.vehfinalarabic=64363;e.vehinitialarabic=64364;e.vehmedialarabic=64365;e.vekatakana=12537;e.venus=9792;e.verticalbar=124;e.verticallineabovecmb=781;e.verticallinebelowcmb=809;e.verticallinelowmod=716;e.verticallinemod=712;e.vewarmenian=1406;e.vhook=651;e.vikatakana=12536;e.viramabengali=2509;e.viramadeva=2381;e.viramagujarati=2765;e.visargabengali=2435;e.visargadeva=2307;e.visargagujarati=2691;e.vmonospace=65366;e.voarmenian=1400;e.voicediterationhiragana=12446;e.voicediterationkatakana=12542;e.voicedmarkkana=12443;e.voicedmarkkanahalfwidth=65438;e.vokatakana=12538;e.vparen=9393;e.vtilde=7805;e.vturned=652;e.vuhiragana=12436;e.vukatakana=12532;e.w=119;e.wacute=7811;e.waekorean=12633;e.wahiragana=12431;e.wakatakana=12527;e.wakatakanahalfwidth=65436;e.wakorean=12632;e.wasmallhiragana=12430;e.wasmallkatakana=12526;e.wattosquare=13143;e.wavedash=12316;e.wavyunderscorevertical=65076;e.wawarabic=1608;e.wawfinalarabic=65262;e.wawhamzaabovearabic=1572;e.wawhamzaabovefinalarabic=65158;e.wbsquare=13277;e.wcircle=9446;e.wcircumflex=373;e.wdieresis=7813;e.wdotaccent=7815;e.wdotbelow=7817;e.wehiragana=12433;e.weierstrass=8472;e.wekatakana=12529;e.wekorean=12638;e.weokorean=12637;e.wgrave=7809;e.whitebullet=9702;e.whitecircle=9675;e.whitecircleinverse=9689;e.whitecornerbracketleft=12302;e.whitecornerbracketleftvertical=65091;e.whitecornerbracketright=12303;e.whitecornerbracketrightvertical=65092;e.whitediamond=9671;e.whitediamondcontainingblacksmalldiamond=9672;e.whitedownpointingsmalltriangle=9663;e.whitedownpointingtriangle=9661;e.whiteleftpointingsmalltriangle=9667;e.whiteleftpointingtriangle=9665;e.whitelenticularbracketleft=12310;e.whitelenticularbracketright=12311;e.whiterightpointingsmalltriangle=9657;e.whiterightpointingtriangle=9655;e.whitesmallsquare=9643;e.whitesmilingface=9786;e.whitesquare=9633;e.whitestar=9734;e.whitetelephone=9743;e.whitetortoiseshellbracketleft=12312;e.whitetortoiseshellbracketright=12313;e.whiteuppointingsmalltriangle=9653;e.whiteuppointingtriangle=9651;e.wihiragana=12432;e.wikatakana=12528;e.wikorean=12639;e.wmonospace=65367;e.wohiragana=12434;e.wokatakana=12530;e.wokatakanahalfwidth=65382;e.won=8361;e.wonmonospace=65510;e.wowaenthai=3623;e.wparen=9394;e.wring=7832;e.wsuperior=695;e.wturned=653;e.wynn=447;e.x=120;e.xabovecmb=829;e.xbopomofo=12562;e.xcircle=9447;e.xdieresis=7821;e.xdotaccent=7819;e.xeharmenian=1389;e.xi=958;e.xmonospace=65368;e.xparen=9395;e.xsuperior=739;e.y=121;e.yaadosquare=13134;e.yabengali=2479;e.yacute=253;e.yadeva=2351;e.yaekorean=12626;e.yagujarati=2735;e.yagurmukhi=2607;e.yahiragana=12420;e.yakatakana=12516;e.yakatakanahalfwidth=65428;e.yakorean=12625;e.yamakkanthai=3662;e.yasmallhiragana=12419;e.yasmallkatakana=12515;e.yasmallkatakanahalfwidth=65388;e.yatcyrillic=1123;e.ycircle=9448;e.ycircumflex=375;e.ydieresis=255;e.ydotaccent=7823;e.ydotbelow=7925;e.yeharabic=1610;e.yehbarreearabic=1746;e.yehbarreefinalarabic=64431;e.yehfinalarabic=65266;e.yehhamzaabovearabic=1574;e.yehhamzaabovefinalarabic=65162;e.yehhamzaaboveinitialarabic=65163;e.yehhamzaabovemedialarabic=65164;e.yehinitialarabic=65267;e.yehmedialarabic=65268;e.yehmeeminitialarabic=64733;e.yehmeemisolatedarabic=64600;e.yehnoonfinalarabic=64660;e.yehthreedotsbelowarabic=1745;e.yekorean=12630;e.yen=165;e.yenmonospace=65509;e.yeokorean=12629;e.yeorinhieuhkorean=12678;e.yerahbenyomohebrew=1450;e.yerahbenyomolefthebrew=1450;e.yericyrillic=1099;e.yerudieresiscyrillic=1273;e.yesieungkorean=12673;e.yesieungpansioskorean=12675;e.yesieungsioskorean=12674;e.yetivhebrew=1434;e.ygrave=7923;e.yhook=436;e.yhookabove=7927;e.yiarmenian=1397;e.yicyrillic=1111;e.yikorean=12642;e.yinyang=9775;e.yiwnarmenian=1410;e.ymonospace=65369;e.yod=1497;e.yoddagesh=64313;e.yoddageshhebrew=64313;e.yodhebrew=1497;e.yodyodhebrew=1522;e.yodyodpatahhebrew=64287;e.yohiragana=12424;e.yoikorean=12681;e.yokatakana=12520;e.yokatakanahalfwidth=65430;e.yokorean=12635;e.yosmallhiragana=12423;e.yosmallkatakana=12519;e.yosmallkatakanahalfwidth=65390;e.yotgreek=1011;e.yoyaekorean=12680;e.yoyakorean=12679;e.yoyakthai=3618;e.yoyingthai=3597;e.yparen=9396;e.ypogegrammeni=890;e.ypogegrammenigreekcmb=837;e.yr=422;e.yring=7833;e.ysuperior=696;e.ytilde=7929;e.yturned=654;e.yuhiragana=12422;e.yuikorean=12684;e.yukatakana=12518;e.yukatakanahalfwidth=65429;e.yukorean=12640;e.yusbigcyrillic=1131;e.yusbigiotifiedcyrillic=1133;e.yuslittlecyrillic=1127;e.yuslittleiotifiedcyrillic=1129;e.yusmallhiragana=12421;e.yusmallkatakana=12517;e.yusmallkatakanahalfwidth=65389;e.yuyekorean=12683;e.yuyeokorean=12682;e.yyabengali=2527;e.yyadeva=2399;e.z=122;e.zaarmenian=1382;e.zacute=378;e.zadeva=2395;e.zagurmukhi=2651;e.zaharabic=1592;e.zahfinalarabic=65222;e.zahinitialarabic=65223;e.zahiragana=12374;e.zahmedialarabic=65224;e.zainarabic=1586;e.zainfinalarabic=65200;e.zakatakana=12470;e.zaqefgadolhebrew=1429;e.zaqefqatanhebrew=1428;e.zarqahebrew=1432;e.zayin=1494;e.zayindagesh=64310;e.zayindageshhebrew=64310;e.zayinhebrew=1494;e.zbopomofo=12567;e.zcaron=382;e.zcircle=9449;e.zcircumflex=7825;e.zcurl=657;e.zdot=380;e.zdotaccent=380;e.zdotbelow=7827;e.zecyrillic=1079;e.zedescendercyrillic=1177;e.zedieresiscyrillic=1247;e.zehiragana=12380;e.zekatakana=12476;e.zero=48;e.zeroarabic=1632;e.zerobengali=2534;e.zerodeva=2406;e.zerogujarati=2790;e.zerogurmukhi=2662;e.zerohackarabic=1632;e.zeroinferior=8320;e.zeromonospace=65296;e.zerooldstyle=63280;e.zeropersian=1776;e.zerosuperior=8304;e.zerothai=3664;e.zerowidthjoiner=65279;e.zerowidthnonjoiner=8204;e.zerowidthspace=8203;e.zeta=950;e.zhbopomofo=12563;e.zhearmenian=1386;e.zhebrevecyrillic=1218;e.zhecyrillic=1078;e.zhedescendercyrillic=1175;e.zhedieresiscyrillic=1245;e.zihiragana=12376;e.zikatakana=12472;e.zinorhebrew=1454;e.zlinebelow=7829;e.zmonospace=65370;e.zohiragana=12382;e.zokatakana=12478;e.zparen=9397;e.zretroflexhook=656;e.zstroke=438;e.zuhiragana=12378;e.zukatakana=12474;e[".notdef"]=0;e.angbracketleftbig=9001;e.angbracketleftBig=9001;e.angbracketleftbigg=9001;e.angbracketleftBigg=9001;e.angbracketrightBig=9002;e.angbracketrightbig=9002;e.angbracketrightBigg=9002;e.angbracketrightbigg=9002;e.arrowhookleft=8618;e.arrowhookright=8617;e.arrowlefttophalf=8636;e.arrowleftbothalf=8637;e.arrownortheast=8599;e.arrownorthwest=8598;e.arrowrighttophalf=8640;e.arrowrightbothalf=8641;e.arrowsoutheast=8600;e.arrowsouthwest=8601;e.backslashbig=8726;e.backslashBig=8726;e.backslashBigg=8726;e.backslashbigg=8726;e.bardbl=8214;e.bracehtipdownleft=65079;e.bracehtipdownright=65079;e.bracehtipupleft=65080;e.bracehtipupright=65080;e.braceleftBig=123;e.braceleftbig=123;e.braceleftbigg=123;e.braceleftBigg=123;e.bracerightBig=125;e.bracerightbig=125;e.bracerightbigg=125;e.bracerightBigg=125;e.bracketleftbig=91;e.bracketleftBig=91;e.bracketleftbigg=91;e.bracketleftBigg=91;e.bracketrightBig=93;e.bracketrightbig=93;e.bracketrightbigg=93;e.bracketrightBigg=93;e.ceilingleftbig=8968;e.ceilingleftBig=8968;e.ceilingleftBigg=8968;e.ceilingleftbigg=8968;e.ceilingrightbig=8969;e.ceilingrightBig=8969;e.ceilingrightbigg=8969;e.ceilingrightBigg=8969;e.circledotdisplay=8857;e.circledottext=8857;e.circlemultiplydisplay=8855;e.circlemultiplytext=8855;e.circleplusdisplay=8853;e.circleplustext=8853;e.contintegraldisplay=8750;e.contintegraltext=8750;e.coproductdisplay=8720;e.coproducttext=8720;e.floorleftBig=8970;e.floorleftbig=8970;e.floorleftbigg=8970;e.floorleftBigg=8970;e.floorrightbig=8971;e.floorrightBig=8971;e.floorrightBigg=8971;e.floorrightbigg=8971;e.hatwide=770;e.hatwider=770;e.hatwidest=770;e.intercal=7488;e.integraldisplay=8747;e.integraltext=8747;e.intersectiondisplay=8898;e.intersectiontext=8898;e.logicalanddisplay=8743;e.logicalandtext=8743;e.logicalordisplay=8744;e.logicalortext=8744;e.parenleftBig=40;e.parenleftbig=40;e.parenleftBigg=40;e.parenleftbigg=40;e.parenrightBig=41;e.parenrightbig=41;e.parenrightBigg=41;e.parenrightbigg=41;e.prime=8242;e.productdisplay=8719;e.producttext=8719;e.radicalbig=8730;e.radicalBig=8730;e.radicalBigg=8730;e.radicalbigg=8730;e.radicalbt=8730;e.radicaltp=8730;e.radicalvertex=8730;e.slashbig=47;e.slashBig=47;e.slashBigg=47;e.slashbigg=47;e.summationdisplay=8721;e.summationtext=8721;e.tildewide=732;e.tildewider=732;e.tildewidest=732;e.uniondisplay=8899;e.unionmultidisplay=8846;e.unionmultitext=8846;e.unionsqdisplay=8852;e.unionsqtext=8852;e.uniontext=8899;e.vextenddouble=8741;e.vextendsingle=8739})),n=r((function(e){e.space=32;e.a1=9985;e.a2=9986;e.a202=9987;e.a3=9988;e.a4=9742;e.a5=9990;e.a119=9991;e.a118=9992;e.a117=9993;e.a11=9755;e.a12=9758;e.a13=9996;e.a14=9997;e.a15=9998;e.a16=9999;e.a105=1e4;e.a17=10001;e.a18=10002;e.a19=10003;e.a20=10004;e.a21=10005;e.a22=10006;e.a23=10007;e.a24=10008;e.a25=10009;e.a26=10010;e.a27=10011;e.a28=10012;e.a6=10013;e.a7=10014;e.a8=10015;e.a9=10016;e.a10=10017;e.a29=10018;e.a30=10019;e.a31=10020;e.a32=10021;e.a33=10022;e.a34=10023;e.a35=9733;e.a36=10025;e.a37=10026;e.a38=10027;e.a39=10028;e.a40=10029;e.a41=10030;e.a42=10031;e.a43=10032;e.a44=10033;e.a45=10034;e.a46=10035;e.a47=10036;e.a48=10037;e.a49=10038;e.a50=10039;e.a51=10040;e.a52=10041;e.a53=10042;e.a54=10043;e.a55=10044;e.a56=10045;e.a57=10046;e.a58=10047;e.a59=10048;e.a60=10049;e.a61=10050;e.a62=10051;e.a63=10052;e.a64=10053;e.a65=10054;e.a66=10055;e.a67=10056;e.a68=10057;e.a69=10058;e.a70=10059;e.a71=9679;e.a72=10061;e.a73=9632;e.a74=10063;e.a203=10064;e.a75=10065;e.a204=10066;e.a76=9650;e.a77=9660;e.a78=9670;e.a79=10070;e.a81=9687;e.a82=10072;e.a83=10073;e.a84=10074;e.a97=10075;e.a98=10076;e.a99=10077;e.a100=10078;e.a101=10081;e.a102=10082;e.a103=10083;e.a104=10084;e.a106=10085;e.a107=10086;e.a108=10087;e.a112=9827;e.a111=9830;e.a110=9829;e.a109=9824;e.a120=9312;e.a121=9313;e.a122=9314;e.a123=9315;e.a124=9316;e.a125=9317;e.a126=9318;e.a127=9319;e.a128=9320;e.a129=9321;e.a130=10102;e.a131=10103;e.a132=10104;e.a133=10105;e.a134=10106;e.a135=10107;e.a136=10108;e.a137=10109;e.a138=10110;e.a139=10111;e.a140=10112;e.a141=10113;e.a142=10114;e.a143=10115;e.a144=10116;e.a145=10117;e.a146=10118;e.a147=10119;e.a148=10120;e.a149=10121;e.a150=10122;e.a151=10123;e.a152=10124;e.a153=10125;e.a154=10126;e.a155=10127;e.a156=10128;e.a157=10129;e.a158=10130;e.a159=10131;e.a160=10132;e.a161=8594;e.a163=8596;e.a164=8597;e.a196=10136;e.a165=10137;e.a192=10138;e.a166=10139;e.a167=10140;e.a168=10141;e.a169=10142;e.a170=10143;e.a171=10144;e.a172=10145;e.a173=10146;e.a162=10147;e.a174=10148;e.a175=10149;e.a176=10150;e.a177=10151;e.a178=10152;e.a179=10153;e.a193=10154;e.a180=10155;e.a199=10156;e.a181=10157;e.a200=10158;e.a182=10159;e.a201=10161;e.a183=10162;e.a184=10163;e.a197=10164;e.a185=10165;e.a194=10166;e.a198=10167;e.a186=10168;e.a195=10169;e.a187=10170;e.a188=10171;e.a189=10172;e.a190=10173;e.a191=10174;e.a89=10088;e.a90=10089;e.a93=10090;e.a94=10091;e.a91=10092;e.a92=10093;e.a205=10094;e.a85=10095;e.a206=10096;e.a86=10097;e.a87=10098;e.a88=10099;e.a95=10100;e.a96=10101;e[".notdef"]=0}));t.getGlyphsUnicode=i;t.getDingbatsGlyphsUnicode=n},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.getSupplementalGlyphMapForCalibri=t.getSupplementalGlyphMapForArialBlack=t.getGlyphMapForStandardFonts=t.getSymbolsFonts=t.getSerifFonts=t.getNonStdFontMap=t.getStdFontMap=void 0;var r=a(7);const i=(0,r.getLookupTableFactory)((function(e){e.ArialNarrow="Helvetica";e["ArialNarrow-Bold"]="Helvetica-Bold";e["ArialNarrow-BoldItalic"]="Helvetica-BoldOblique";e["ArialNarrow-Italic"]="Helvetica-Oblique";e.ArialBlack="Helvetica";e["ArialBlack-Bold"]="Helvetica-Bold";e["ArialBlack-BoldItalic"]="Helvetica-BoldOblique";e["ArialBlack-Italic"]="Helvetica-Oblique";e["Arial-Black"]="Helvetica";e["Arial-Black-Bold"]="Helvetica-Bold";e["Arial-Black-BoldItalic"]="Helvetica-BoldOblique";e["Arial-Black-Italic"]="Helvetica-Oblique";e.Arial="Helvetica";e["Arial-Bold"]="Helvetica-Bold";e["Arial-BoldItalic"]="Helvetica-BoldOblique";e["Arial-Italic"]="Helvetica-Oblique";e["Arial-BoldItalicMT"]="Helvetica-BoldOblique";e["Arial-BoldMT"]="Helvetica-Bold";e["Arial-ItalicMT"]="Helvetica-Oblique";e.ArialMT="Helvetica";e["Courier-Bold"]="Courier-Bold";e["Courier-BoldItalic"]="Courier-BoldOblique";e["Courier-Italic"]="Courier-Oblique";e.CourierNew="Courier";e["CourierNew-Bold"]="Courier-Bold";e["CourierNew-BoldItalic"]="Courier-BoldOblique";e["CourierNew-Italic"]="Courier-Oblique";e["CourierNewPS-BoldItalicMT"]="Courier-BoldOblique";e["CourierNewPS-BoldMT"]="Courier-Bold";e["CourierNewPS-ItalicMT"]="Courier-Oblique";e.CourierNewPSMT="Courier";e.Helvetica="Helvetica";e["Helvetica-Bold"]="Helvetica-Bold";e["Helvetica-BoldItalic"]="Helvetica-BoldOblique";e["Helvetica-BoldOblique"]="Helvetica-BoldOblique";e["Helvetica-Italic"]="Helvetica-Oblique";e["Helvetica-Oblique"]="Helvetica-Oblique";e["Symbol-Bold"]="Symbol";e["Symbol-BoldItalic"]="Symbol";e["Symbol-Italic"]="Symbol";e.TimesNewRoman="Times-Roman";e["TimesNewRoman-Bold"]="Times-Bold";e["TimesNewRoman-BoldItalic"]="Times-BoldItalic";e["TimesNewRoman-Italic"]="Times-Italic";e.TimesNewRomanPS="Times-Roman";e["TimesNewRomanPS-Bold"]="Times-Bold";e["TimesNewRomanPS-BoldItalic"]="Times-BoldItalic";e["TimesNewRomanPS-BoldItalicMT"]="Times-BoldItalic";e["TimesNewRomanPS-BoldMT"]="Times-Bold";e["TimesNewRomanPS-Italic"]="Times-Italic";e["TimesNewRomanPS-ItalicMT"]="Times-Italic";e.TimesNewRomanPSMT="Times-Roman";e["TimesNewRomanPSMT-Bold"]="Times-Bold";e["TimesNewRomanPSMT-BoldItalic"]="Times-BoldItalic";e["TimesNewRomanPSMT-Italic"]="Times-Italic"}));t.getStdFontMap=i;const n=(0,r.getLookupTableFactory)((function(e){e.Calibri="Helvetica";e["Calibri-Bold"]="Helvetica-Bold";e["Calibri-BoldItalic"]="Helvetica-BoldOblique";e["Calibri-Italic"]="Helvetica-Oblique";e.CenturyGothic="Helvetica";e["CenturyGothic-Bold"]="Helvetica-Bold";e["CenturyGothic-BoldItalic"]="Helvetica-BoldOblique";e["CenturyGothic-Italic"]="Helvetica-Oblique";e.ComicSansMS="Comic Sans MS";e["ComicSansMS-Bold"]="Comic Sans MS-Bold";e["ComicSansMS-BoldItalic"]="Comic Sans MS-BoldItalic";e["ComicSansMS-Italic"]="Comic Sans MS-Italic";e.LucidaConsole="Courier";e["LucidaConsole-Bold"]="Courier-Bold";e["LucidaConsole-BoldItalic"]="Courier-BoldOblique";e["LucidaConsole-Italic"]="Courier-Oblique";e["LucidaSans-Demi"]="Helvetica-Bold";e["MS-Gothic"]="MS Gothic";e["MS-Gothic-Bold"]="MS Gothic-Bold";e["MS-Gothic-BoldItalic"]="MS Gothic-BoldItalic";e["MS-Gothic-Italic"]="MS Gothic-Italic";e["MS-Mincho"]="MS Mincho";e["MS-Mincho-Bold"]="MS Mincho-Bold";e["MS-Mincho-BoldItalic"]="MS Mincho-BoldItalic";e["MS-Mincho-Italic"]="MS Mincho-Italic";e["MS-PGothic"]="MS PGothic";e["MS-PGothic-Bold"]="MS PGothic-Bold";e["MS-PGothic-BoldItalic"]="MS PGothic-BoldItalic";e["MS-PGothic-Italic"]="MS PGothic-Italic";e["MS-PMincho"]="MS PMincho";e["MS-PMincho-Bold"]="MS PMincho-Bold";e["MS-PMincho-BoldItalic"]="MS PMincho-BoldItalic";e["MS-PMincho-Italic"]="MS PMincho-Italic";e.NuptialScript="Times-Italic";e.SegoeUISymbol="Helvetica";e.Wingdings="ZapfDingbats";e["Wingdings-Regular"]="ZapfDingbats"}));t.getNonStdFontMap=n;const s=(0,r.getLookupTableFactory)((function(e){e["Adobe Jenson"]=!0;e["Adobe Text"]=!0;e.Albertus=!0;e.Aldus=!0;e.Alexandria=!0;e.Algerian=!0;e["American Typewriter"]=!0;e.Antiqua=!0;e.Apex=!0;e.Arno=!0;e.Aster=!0;e.Aurora=!0;e.Baskerville=!0;e.Bell=!0;e.Bembo=!0;e["Bembo Schoolbook"]=!0;e.Benguiat=!0;e["Berkeley Old Style"]=!0;e["Bernhard Modern"]=!0;e["Berthold City"]=!0;e.Bodoni=!0;e["Bauer Bodoni"]=!0;e["Book Antiqua"]=!0;e.Bookman=!0;e["Bordeaux Roman"]=!0;e["Californian FB"]=!0;e.Calisto=!0;e.Calvert=!0;e.Capitals=!0;e.Cambria=!0;e.Cartier=!0;e.Caslon=!0;e.Catull=!0;e.Centaur=!0;e["Century Old Style"]=!0;e["Century Schoolbook"]=!0;e.Chaparral=!0;e["Charis SIL"]=!0;e.Cheltenham=!0;e["Cholla Slab"]=!0;e.Clarendon=!0;e.Clearface=!0;e.Cochin=!0;e.Colonna=!0;e["Computer Modern"]=!0;e["Concrete Roman"]=!0;e.Constantia=!0;e["Cooper Black"]=!0;e.Corona=!0;e.Ecotype=!0;e.Egyptienne=!0;e.Elephant=!0;e.Excelsior=!0;e.Fairfield=!0;e["FF Scala"]=!0;e.Folkard=!0;e.Footlight=!0;e.FreeSerif=!0;e["Friz Quadrata"]=!0;e.Garamond=!0;e.Gentium=!0;e.Georgia=!0;e.Gloucester=!0;e["Goudy Old Style"]=!0;e["Goudy Schoolbook"]=!0;e["Goudy Pro Font"]=!0;e.Granjon=!0;e["Guardian Egyptian"]=!0;e.Heather=!0;e.Hercules=!0;e["High Tower Text"]=!0;e.Hiroshige=!0;e["Hoefler Text"]=!0;e["Humana Serif"]=!0;e.Imprint=!0;e["Ionic No. 5"]=!0;e.Janson=!0;e.Joanna=!0;e.Korinna=!0;e.Lexicon=!0;e["Liberation Serif"]=!0;e["Linux Libertine"]=!0;e.Literaturnaya=!0;e.Lucida=!0;e["Lucida Bright"]=!0;e.Melior=!0;e.Memphis=!0;e.Miller=!0;e.Minion=!0;e.Modern=!0;e["Mona Lisa"]=!0;e["Mrs Eaves"]=!0;e["MS Serif"]=!0;e["Museo Slab"]=!0;e["New York"]=!0;e["Nimbus Roman"]=!0;e["NPS Rawlinson Roadway"]=!0;e.NuptialScript=!0;e.Palatino=!0;e.Perpetua=!0;e.Plantin=!0;e["Plantin Schoolbook"]=!0;e.Playbill=!0;e["Poor Richard"]=!0;e["Rawlinson Roadway"]=!0;e.Renault=!0;e.Requiem=!0;e.Rockwell=!0;e.Roman=!0;e["Rotis Serif"]=!0;e.Sabon=!0;e.Scala=!0;e.Seagull=!0;e.Sistina=!0;e.Souvenir=!0;e.STIX=!0;e["Stone Informal"]=!0;e["Stone Serif"]=!0;e.Sylfaen=!0;e.Times=!0;e.Trajan=!0;e["Trinité"]=!0;e["Trump Mediaeval"]=!0;e.Utopia=!0;e["Vale Type"]=!0;e["Bitstream Vera"]=!0;e["Vera Serif"]=!0;e.Versailles=!0;e.Wanted=!0;e.Weiss=!0;e["Wide Latin"]=!0;e.Windsor=!0;e.XITS=!0}));t.getSerifFonts=s;const o=(0,r.getLookupTableFactory)((function(e){e.Dingbats=!0;e.Symbol=!0;e.ZapfDingbats=!0}));t.getSymbolsFonts=o;const c=(0,r.getLookupTableFactory)((function(e){e[2]=10;e[3]=32;e[4]=33;e[5]=34;e[6]=35;e[7]=36;e[8]=37;e[9]=38;e[10]=39;e[11]=40;e[12]=41;e[13]=42;e[14]=43;e[15]=44;e[16]=45;e[17]=46;e[18]=47;e[19]=48;e[20]=49;e[21]=50;e[22]=51;e[23]=52;e[24]=53;e[25]=54;e[26]=55;e[27]=56;e[28]=57;e[29]=58;e[30]=894;e[31]=60;e[32]=61;e[33]=62;e[34]=63;e[35]=64;e[36]=65;e[37]=66;e[38]=67;e[39]=68;e[40]=69;e[41]=70;e[42]=71;e[43]=72;e[44]=73;e[45]=74;e[46]=75;e[47]=76;e[48]=77;e[49]=78;e[50]=79;e[51]=80;e[52]=81;e[53]=82;e[54]=83;e[55]=84;e[56]=85;e[57]=86;e[58]=87;e[59]=88;e[60]=89;e[61]=90;e[62]=91;e[63]=92;e[64]=93;e[65]=94;e[66]=95;e[67]=96;e[68]=97;e[69]=98;e[70]=99;e[71]=100;e[72]=101;e[73]=102;e[74]=103;e[75]=104;e[76]=105;e[77]=106;e[78]=107;e[79]=108;e[80]=109;e[81]=110;e[82]=111;e[83]=112;e[84]=113;e[85]=114;e[86]=115;e[87]=116;e[88]=117;e[89]=118;e[90]=119;e[91]=120;e[92]=121;e[93]=122;e[94]=123;e[95]=124;e[96]=125;e[97]=126;e[98]=196;e[99]=197;e[100]=199;e[101]=201;e[102]=209;e[103]=214;e[104]=220;e[105]=225;e[106]=224;e[107]=226;e[108]=228;e[109]=227;e[110]=229;e[111]=231;e[112]=233;e[113]=232;e[114]=234;e[115]=235;e[116]=237;e[117]=236;e[118]=238;e[119]=239;e[120]=241;e[121]=243;e[122]=242;e[123]=244;e[124]=246;e[125]=245;e[126]=250;e[127]=249;e[128]=251;e[129]=252;e[130]=8224;e[131]=176;e[132]=162;e[133]=163;e[134]=167;e[135]=8226;e[136]=182;e[137]=223;e[138]=174;e[139]=169;e[140]=8482;e[141]=180;e[142]=168;e[143]=8800;e[144]=198;e[145]=216;e[146]=8734;e[147]=177;e[148]=8804;e[149]=8805;e[150]=165;e[151]=181;e[152]=8706;e[153]=8721;e[154]=8719;e[156]=8747;e[157]=170;e[158]=186;e[159]=8486;e[160]=230;e[161]=248;e[162]=191;e[163]=161;e[164]=172;e[165]=8730;e[166]=402;e[167]=8776;e[168]=8710;e[169]=171;e[170]=187;e[171]=8230;e[210]=218;e[223]=711;e[224]=321;e[225]=322;e[227]=353;e[229]=382;e[234]=253;e[252]=263;e[253]=268;e[254]=269;e[258]=258;e[260]=260;e[261]=261;e[265]=280;e[266]=281;e[268]=283;e[269]=313;e[275]=323;e[276]=324;e[278]=328;e[284]=345;e[285]=346;e[286]=347;e[292]=367;e[295]=377;e[296]=378;e[298]=380;e[305]=963;e[306]=964;e[307]=966;e[308]=8215;e[309]=8252;e[310]=8319;e[311]=8359;e[312]=8592;e[313]=8593;e[337]=9552;e[493]=1039;e[494]=1040;e[705]=1524;e[706]=8362;e[710]=64288;e[711]=64298;e[759]=1617;e[761]=1776;e[763]=1778;e[775]=1652;e[777]=1764;e[778]=1780;e[779]=1781;e[780]=1782;e[782]=771;e[783]=64726;e[786]=8363;e[788]=8532;e[790]=768;e[791]=769;e[792]=768;e[795]=803;e[797]=64336;e[798]=64337;e[799]=64342;e[800]=64343;e[801]=64344;e[802]=64345;e[803]=64362;e[804]=64363;e[805]=64364;e[2424]=7821;e[2425]=7822;e[2426]=7823;e[2427]=7824;e[2428]=7825;e[2429]=7826;e[2430]=7827;e[2433]=7682;e[2678]=8045;e[2679]=8046;e[2830]=1552;e[2838]=686;e[2840]=751;e[2842]=753;e[2843]=754;e[2844]=755;e[2846]=757;e[2856]=767;e[2857]=848;e[2858]=849;e[2862]=853;e[2863]=854;e[2864]=855;e[2865]=861;e[2866]=862;e[2906]=7460;e[2908]=7462;e[2909]=7463;e[2910]=7464;e[2912]=7466;e[2913]=7467;e[2914]=7468;e[2916]=7470;e[2917]=7471;e[2918]=7472;e[2920]=7474;e[2921]=7475;e[2922]=7476;e[2924]=7478;e[2925]=7479;e[2926]=7480;e[2928]=7482;e[2929]=7483;e[2930]=7484;e[2932]=7486;e[2933]=7487;e[2934]=7488;e[2936]=7490;e[2937]=7491;e[2938]=7492;e[2940]=7494;e[2941]=7495;e[2942]=7496;e[2944]=7498;e[2946]=7500;e[2948]=7502;e[2950]=7504;e[2951]=7505;e[2952]=7506;e[2954]=7508;e[2955]=7509;e[2956]=7510;e[2958]=7512;e[2959]=7513;e[2960]=7514;e[2962]=7516;e[2963]=7517;e[2964]=7518;e[2966]=7520;e[2967]=7521;e[2968]=7522;e[2970]=7524;e[2971]=7525;e[2972]=7526;e[2974]=7528;e[2975]=7529;e[2976]=7530;e[2978]=1537;e[2979]=1538;e[2980]=1539;e[2982]=1549;e[2983]=1551;e[2984]=1552;e[2986]=1554;e[2987]=1555;e[2988]=1556;e[2990]=1623;e[2991]=1624;e[2995]=1775;e[2999]=1791;e[3002]=64290;e[3003]=64291;e[3004]=64292;e[3006]=64294;e[3007]=64295;e[3008]=64296;e[3011]=1900;e[3014]=8223;e[3015]=8244;e[3017]=7532;e[3018]=7533;e[3019]=7534;e[3075]=7590;e[3076]=7591;e[3079]=7594;e[3080]=7595;e[3083]=7598;e[3084]=7599;e[3087]=7602;e[3088]=7603;e[3091]=7606;e[3092]=7607;e[3095]=7610;e[3096]=7611;e[3099]=7614;e[3100]=7615;e[3103]=7618;e[3104]=7619;e[3107]=8337;e[3108]=8338;e[3116]=1884;e[3119]=1885;e[3120]=1885;e[3123]=1886;e[3124]=1886;e[3127]=1887;e[3128]=1887;e[3131]=1888;e[3132]=1888;e[3135]=1889;e[3136]=1889;e[3139]=1890;e[3140]=1890;e[3143]=1891;e[3144]=1891;e[3147]=1892;e[3148]=1892;e[3153]=580;e[3154]=581;e[3157]=584;e[3158]=585;e[3161]=588;e[3162]=589;e[3165]=891;e[3166]=892;e[3169]=1274;e[3170]=1275;e[3173]=1278;e[3174]=1279;e[3181]=7622;e[3182]=7623;e[3282]=11799;e[3316]=578;e[3379]=42785;e[3393]=1159;e[3416]=8377}));t.getGlyphMapForStandardFonts=c;const l=(0,r.getLookupTableFactory)((function(e){e[227]=322;e[264]=261;e[291]=346}));t.getSupplementalGlyphMapForArialBlack=l;const h=(0,r.getLookupTableFactory)((function(e){e[1]=32;e[4]=65;e[17]=66;e[18]=67;e[24]=68;e[28]=69;e[38]=70;e[39]=71;e[44]=72;e[47]=73;e[58]=74;e[60]=75;e[62]=76;e[68]=77;e[69]=78;e[75]=79;e[87]=80;e[89]=81;e[90]=82;e[94]=83;e[100]=84;e[104]=85;e[115]=86;e[116]=87;e[121]=88;e[122]=89;e[127]=90;e[258]=97;e[268]=261;e[271]=98;e[272]=99;e[273]=263;e[282]=100;e[286]=101;e[295]=281;e[296]=102;e[336]=103;e[346]=104;e[349]=105;e[361]=106;e[364]=107;e[367]=108;e[371]=322;e[373]=109;e[374]=110;e[381]=111;e[383]=243;e[393]=112;e[395]=113;e[396]=114;e[400]=115;e[401]=347;e[410]=116;e[437]=117;e[448]=118;e[449]=119;e[454]=120;e[455]=121;e[460]=122;e[463]=380;e[853]=44;e[855]=58;e[856]=46;e[876]=47;e[878]=45;e[882]=45;e[894]=40;e[895]=41;e[896]=91;e[897]=93;e[923]=64;e[1004]=48;e[1005]=49;e[1006]=50;e[1007]=51;e[1008]=52;e[1009]=53;e[1010]=54;e[1011]=55;e[1012]=56;e[1013]=57;e[1081]=37;e[1085]=43;e[1086]=45}));t.getSupplementalGlyphMapForCalibri=h},function(e,t,a){var r=a(7).getLookupTableFactory,i=r((function(e){e[63721]=169;e[63193]=169;e[63720]=174;e[63194]=174;e[63722]=8482;e[63195]=8482;e[63729]=9127;e[63730]=9128;e[63731]=9129;e[63740]=9131;e[63741]=9132;e[63742]=9133;e[63726]=9121;e[63727]=9122;e[63728]=9123;e[63737]=9124;e[63738]=9125;e[63739]=9126;e[63723]=9115;e[63724]=9116;e[63725]=9117;e[63734]=9118;e[63735]=9119;e[63736]=9120}));var n=[{begin:0,end:127},{begin:128,end:255},{begin:256,end:383},{begin:384,end:591},{begin:592,end:687},{begin:688,end:767},{begin:768,end:879},{begin:880,end:1023},{begin:11392,end:11519},{begin:1024,end:1279},{begin:1328,end:1423},{begin:1424,end:1535},{begin:42240,end:42559},{begin:1536,end:1791},{begin:1984,end:2047},{begin:2304,end:2431},{begin:2432,end:2559},{begin:2560,end:2687},{begin:2688,end:2815},{begin:2816,end:2943},{begin:2944,end:3071},{begin:3072,end:3199},{begin:3200,end:3327},{begin:3328,end:3455},{begin:3584,end:3711},{begin:3712,end:3839},{begin:4256,end:4351},{begin:6912,end:7039},{begin:4352,end:4607},{begin:7680,end:7935},{begin:7936,end:8191},{begin:8192,end:8303},{begin:8304,end:8351},{begin:8352,end:8399},{begin:8400,end:8447},{begin:8448,end:8527},{begin:8528,end:8591},{begin:8592,end:8703},{begin:8704,end:8959},{begin:8960,end:9215},{begin:9216,end:9279},{begin:9280,end:9311},{begin:9312,end:9471},{begin:9472,end:9599},{begin:9600,end:9631},{begin:9632,end:9727},{begin:9728,end:9983},{begin:9984,end:10175},{begin:12288,end:12351},{begin:12352,end:12447},{begin:12448,end:12543},{begin:12544,end:12591},{begin:12592,end:12687},{begin:43072,end:43135},{begin:12800,end:13055},{begin:13056,end:13311},{begin:44032,end:55215},{begin:55296,end:57343},{begin:67840,end:67871},{begin:19968,end:40959},{begin:57344,end:63743},{begin:12736,end:12783},{begin:64256,end:64335},{begin:64336,end:65023},{begin:65056,end:65071},{begin:65040,end:65055},{begin:65104,end:65135},{begin:65136,end:65279},{begin:65280,end:65519},{begin:65520,end:65535},{begin:3840,end:4095},{begin:1792,end:1871},{begin:1920,end:1983},{begin:3456,end:3583},{begin:4096,end:4255},{begin:4608,end:4991},{begin:5024,end:5119},{begin:5120,end:5759},{begin:5760,end:5791},{begin:5792,end:5887},{begin:6016,end:6143},{begin:6144,end:6319},{begin:10240,end:10495},{begin:40960,end:42127},{begin:5888,end:5919},{begin:66304,end:66351},{begin:66352,end:66383},{begin:66560,end:66639},{begin:118784,end:119039},{begin:119808,end:120831},{begin:1044480,end:1048573},{begin:65024,end:65039},{begin:917504,end:917631},{begin:6400,end:6479},{begin:6480,end:6527},{begin:6528,end:6623},{begin:6656,end:6687},{begin:11264,end:11359},{begin:11568,end:11647},{begin:19904,end:19967},{begin:43008,end:43055},{begin:65536,end:65663},{begin:65856,end:65935},{begin:66432,end:66463},{begin:66464,end:66527},{begin:66640,end:66687},{begin:66688,end:66735},{begin:67584,end:67647},{begin:68096,end:68191},{begin:119552,end:119647},{begin:73728,end:74751},{begin:119648,end:119679},{begin:7040,end:7103},{begin:7168,end:7247},{begin:7248,end:7295},{begin:43136,end:43231},{begin:43264,end:43311},{begin:43312,end:43359},{begin:43520,end:43615},{begin:65936,end:65999},{begin:66e3,end:66047},{begin:66208,end:66271},{begin:127024,end:127135}];var s=r((function(e){e["¨"]=" ̈";e["¯"]=" ̄";e["´"]=" ́";e["µ"]="μ";e["¸"]=" ̧";e["IJ"]="IJ";e["ij"]="ij";e["Ŀ"]="L·";e["ŀ"]="l·";e["ʼn"]="ʼn";e["ſ"]="s";e["DŽ"]="DŽ";e["Dž"]="Dž";e["dž"]="dž";e["LJ"]="LJ";e["Lj"]="Lj";e["lj"]="lj";e["NJ"]="NJ";e["Nj"]="Nj";e["nj"]="nj";e["DZ"]="DZ";e["Dz"]="Dz";e["dz"]="dz";e["˘"]=" ̆";e["˙"]=" ̇";e["˚"]=" ̊";e["˛"]=" ̨";e["˜"]=" ̃";e["˝"]=" ̋";e["ͺ"]=" ͅ";e["΄"]=" ́";e["ϐ"]="β";e["ϑ"]="θ";e["ϒ"]="Υ";e["ϕ"]="φ";e["ϖ"]="π";e["ϰ"]="κ";e["ϱ"]="ρ";e["ϲ"]="ς";e["ϴ"]="Θ";e["ϵ"]="ε";e["Ϲ"]="Σ";e["և"]="եւ";e["ٵ"]="اٴ";e["ٶ"]="وٴ";e["ٷ"]="ۇٴ";e["ٸ"]="يٴ";e["ำ"]="ํา";e["ຳ"]="ໍາ";e["ໜ"]="ຫນ";e["ໝ"]="ຫມ";e["ཷ"]="ྲཱྀ";e["ཹ"]="ླཱྀ";e["ẚ"]="aʾ";e["᾽"]=" ̓";e["᾿"]=" ̓";e["῀"]=" ͂";e["῾"]=" ̔";e[" "]=" ";e[" "]=" ";e[" "]=" ";e[" "]=" ";e[" "]=" ";e[" "]=" ";e[" "]=" ";e[" "]=" ";e["‗"]=" ̳";e["․"]=".";e["‥"]="..";e["…"]="...";e["″"]="′′";e["‴"]="′′′";e["‶"]="‵‵";e["‷"]="‵‵‵";e["‼"]="!!";e["‾"]=" ̅";e["⁇"]="??";e["⁈"]="?!";e["⁉"]="!?";e["⁗"]="′′′′";e[" "]=" ";e["₨"]="Rs";e["℀"]="a/c";e["℁"]="a/s";e["℃"]="°C";e["℅"]="c/o";e["℆"]="c/u";e["ℇ"]="Ɛ";e["℉"]="°F";e["№"]="No";e["℡"]="TEL";e["ℵ"]="א";e["ℶ"]="ב";e["ℷ"]="ג";e["ℸ"]="ד";e["℻"]="FAX";e["Ⅰ"]="I";e["Ⅱ"]="II";e["Ⅲ"]="III";e["Ⅳ"]="IV";e["Ⅴ"]="V";e["Ⅵ"]="VI";e["Ⅶ"]="VII";e["Ⅷ"]="VIII";e["Ⅸ"]="IX";e["Ⅹ"]="X";e["Ⅺ"]="XI";e["Ⅻ"]="XII";e["Ⅼ"]="L";e["Ⅽ"]="C";e["Ⅾ"]="D";e["Ⅿ"]="M";e["ⅰ"]="i";e["ⅱ"]="ii";e["ⅲ"]="iii";e["ⅳ"]="iv";e["ⅴ"]="v";e["ⅵ"]="vi";e["ⅶ"]="vii";e["ⅷ"]="viii";e["ⅸ"]="ix";e["ⅹ"]="x";e["ⅺ"]="xi";e["ⅻ"]="xii";e["ⅼ"]="l";e["ⅽ"]="c";e["ⅾ"]="d";e["ⅿ"]="m";e["∬"]="∫∫";e["∭"]="∫∫∫";e["∯"]="∮∮";e["∰"]="∮∮∮";e["⑴"]="(1)";e["⑵"]="(2)";e["⑶"]="(3)";e["⑷"]="(4)";e["⑸"]="(5)";e["⑹"]="(6)";e["⑺"]="(7)";e["⑻"]="(8)";e["⑼"]="(9)";e["⑽"]="(10)";e["⑾"]="(11)";e["⑿"]="(12)";e["⒀"]="(13)";e["⒁"]="(14)";e["⒂"]="(15)";e["⒃"]="(16)";e["⒄"]="(17)";e["⒅"]="(18)";e["⒆"]="(19)";e["⒇"]="(20)";e["⒈"]="1.";e["⒉"]="2.";e["⒊"]="3.";e["⒋"]="4.";e["⒌"]="5.";e["⒍"]="6.";e["⒎"]="7.";e["⒏"]="8.";e["⒐"]="9.";e["⒑"]="10.";e["⒒"]="11.";e["⒓"]="12.";e["⒔"]="13.";e["⒕"]="14.";e["⒖"]="15.";e["⒗"]="16.";e["⒘"]="17.";e["⒙"]="18.";e["⒚"]="19.";e["⒛"]="20.";e["⒜"]="(a)";e["⒝"]="(b)";e["⒞"]="(c)";e["⒟"]="(d)";e["⒠"]="(e)";e["⒡"]="(f)";e["⒢"]="(g)";e["⒣"]="(h)";e["⒤"]="(i)";e["⒥"]="(j)";e["⒦"]="(k)";e["⒧"]="(l)";e["⒨"]="(m)";e["⒩"]="(n)";e["⒪"]="(o)";e["⒫"]="(p)";e["⒬"]="(q)";e["⒭"]="(r)";e["⒮"]="(s)";e["⒯"]="(t)";e["⒰"]="(u)";e["⒱"]="(v)";e["⒲"]="(w)";e["⒳"]="(x)";e["⒴"]="(y)";e["⒵"]="(z)";e["⨌"]="∫∫∫∫";e["⩴"]="::=";e["⩵"]="==";e["⩶"]="===";e["⺟"]="母";e["⻳"]="龟";e["⼀"]="一";e["⼁"]="丨";e["⼂"]="丶";e["⼃"]="丿";e["⼄"]="乙";e["⼅"]="亅";e["⼆"]="二";e["⼇"]="亠";e["⼈"]="人";e["⼉"]="儿";e["⼊"]="入";e["⼋"]="八";e["⼌"]="冂";e["⼍"]="冖";e["⼎"]="冫";e["⼏"]="几";e["⼐"]="凵";e["⼑"]="刀";e["⼒"]="力";e["⼓"]="勹";e["⼔"]="匕";e["⼕"]="匚";e["⼖"]="匸";e["⼗"]="十";e["⼘"]="卜";e["⼙"]="卩";e["⼚"]="厂";e["⼛"]="厶";e["⼜"]="又";e["⼝"]="口";e["⼞"]="囗";e["⼟"]="土";e["⼠"]="士";e["⼡"]="夂";e["⼢"]="夊";e["⼣"]="夕";e["⼤"]="大";e["⼥"]="女";e["⼦"]="子";e["⼧"]="宀";e["⼨"]="寸";e["⼩"]="小";e["⼪"]="尢";e["⼫"]="尸";e["⼬"]="屮";e["⼭"]="山";e["⼮"]="巛";e["⼯"]="工";e["⼰"]="己";e["⼱"]="巾";e["⼲"]="干";e["⼳"]="幺";e["⼴"]="广";e["⼵"]="廴";e["⼶"]="廾";e["⼷"]="弋";e["⼸"]="弓";e["⼹"]="彐";e["⼺"]="彡";e["⼻"]="彳";e["⼼"]="心";e["⼽"]="戈";e["⼾"]="戶";e["⼿"]="手";e["⽀"]="支";e["⽁"]="攴";e["⽂"]="文";e["⽃"]="斗";e["⽄"]="斤";e["⽅"]="方";e["⽆"]="无";e["⽇"]="日";e["⽈"]="曰";e["⽉"]="月";e["⽊"]="木";e["⽋"]="欠";e["⽌"]="止";e["⽍"]="歹";e["⽎"]="殳";e["⽏"]="毋";e["⽐"]="比";e["⽑"]="毛";e["⽒"]="氏";e["⽓"]="气";e["⽔"]="水";e["⽕"]="火";e["⽖"]="爪";e["⽗"]="父";e["⽘"]="爻";e["⽙"]="爿";e["⽚"]="片";e["⽛"]="牙";e["⽜"]="牛";e["⽝"]="犬";e["⽞"]="玄";e["⽟"]="玉";e["⽠"]="瓜";e["⽡"]="瓦";e["⽢"]="甘";e["⽣"]="生";e["⽤"]="用";e["⽥"]="田";e["⽦"]="疋";e["⽧"]="疒";e["⽨"]="癶";e["⽩"]="白";e["⽪"]="皮";e["⽫"]="皿";e["⽬"]="目";e["⽭"]="矛";e["⽮"]="矢";e["⽯"]="石";e["⽰"]="示";e["⽱"]="禸";e["⽲"]="禾";e["⽳"]="穴";e["⽴"]="立";e["⽵"]="竹";e["⽶"]="米";e["⽷"]="糸";e["⽸"]="缶";e["⽹"]="网";e["⽺"]="羊";e["⽻"]="羽";e["⽼"]="老";e["⽽"]="而";e["⽾"]="耒";e["⽿"]="耳";e["⾀"]="聿";e["⾁"]="肉";e["⾂"]="臣";e["⾃"]="自";e["⾄"]="至";e["⾅"]="臼";e["⾆"]="舌";e["⾇"]="舛";e["⾈"]="舟";e["⾉"]="艮";e["⾊"]="色";e["⾋"]="艸";e["⾌"]="虍";e["⾍"]="虫";e["⾎"]="血";e["⾏"]="行";e["⾐"]="衣";e["⾑"]="襾";e["⾒"]="見";e["⾓"]="角";e["⾔"]="言";e["⾕"]="谷";e["⾖"]="豆";e["⾗"]="豕";e["⾘"]="豸";e["⾙"]="貝";e["⾚"]="赤";e["⾛"]="走";e["⾜"]="足";e["⾝"]="身";e["⾞"]="車";e["⾟"]="辛";e["⾠"]="辰";e["⾡"]="辵";e["⾢"]="邑";e["⾣"]="酉";e["⾤"]="釆";e["⾥"]="里";e["⾦"]="金";e["⾧"]="長";e["⾨"]="門";e["⾩"]="阜";e["⾪"]="隶";e["⾫"]="隹";e["⾬"]="雨";e["⾭"]="靑";e["⾮"]="非";e["⾯"]="面";e["⾰"]="革";e["⾱"]="韋";e["⾲"]="韭";e["⾳"]="音";e["⾴"]="頁";e["⾵"]="風";e["⾶"]="飛";e["⾷"]="食";e["⾸"]="首";e["⾹"]="香";e["⾺"]="馬";e["⾻"]="骨";e["⾼"]="高";e["⾽"]="髟";e["⾾"]="鬥";e["⾿"]="鬯";e["⿀"]="鬲";e["⿁"]="鬼";e["⿂"]="魚";e["⿃"]="鳥";e["⿄"]="鹵";e["⿅"]="鹿";e["⿆"]="麥";e["⿇"]="麻";e["⿈"]="黃";e["⿉"]="黍";e["⿊"]="黑";e["⿋"]="黹";e["⿌"]="黽";e["⿍"]="鼎";e["⿎"]="鼓";e["⿏"]="鼠";e["⿐"]="鼻";e["⿑"]="齊";e["⿒"]="齒";e["⿓"]="龍";e["⿔"]="龜";e["⿕"]="龠";e["〶"]="〒";e["〸"]="十";e["〹"]="卄";e["〺"]="卅";e["゛"]=" ゙";e["゜"]=" ゚";e["ㄱ"]="ᄀ";e["ㄲ"]="ᄁ";e["ㄳ"]="ᆪ";e["ㄴ"]="ᄂ";e["ㄵ"]="ᆬ";e["ㄶ"]="ᆭ";e["ㄷ"]="ᄃ";e["ㄸ"]="ᄄ";e["ㄹ"]="ᄅ";e["ㄺ"]="ᆰ";e["ㄻ"]="ᆱ";e["ㄼ"]="ᆲ";e["ㄽ"]="ᆳ";e["ㄾ"]="ᆴ";e["ㄿ"]="ᆵ";e["ㅀ"]="ᄚ";e["ㅁ"]="ᄆ";e["ㅂ"]="ᄇ";e["ㅃ"]="ᄈ";e["ㅄ"]="ᄡ";e["ㅅ"]="ᄉ";e["ㅆ"]="ᄊ";e["ㅇ"]="ᄋ";e["ㅈ"]="ᄌ";e["ㅉ"]="ᄍ";e["ㅊ"]="ᄎ";e["ㅋ"]="ᄏ";e["ㅌ"]="ᄐ";e["ㅍ"]="ᄑ";e["ㅎ"]="ᄒ";e["ㅏ"]="ᅡ";e["ㅐ"]="ᅢ";e["ㅑ"]="ᅣ";e["ㅒ"]="ᅤ";e["ㅓ"]="ᅥ";e["ㅔ"]="ᅦ";e["ㅕ"]="ᅧ";e["ㅖ"]="ᅨ";e["ㅗ"]="ᅩ";e["ㅘ"]="ᅪ";e["ㅙ"]="ᅫ";e["ㅚ"]="ᅬ";e["ㅛ"]="ᅭ";e["ㅜ"]="ᅮ";e["ㅝ"]="ᅯ";e["ㅞ"]="ᅰ";e["ㅟ"]="ᅱ";e["ㅠ"]="ᅲ";e["ㅡ"]="ᅳ";e["ㅢ"]="ᅴ";e["ㅣ"]="ᅵ";e["ㅤ"]="ᅠ";e["ㅥ"]="ᄔ";e["ㅦ"]="ᄕ";e["ㅧ"]="ᇇ";e["ㅨ"]="ᇈ";e["ㅩ"]="ᇌ";e["ㅪ"]="ᇎ";e["ㅫ"]="ᇓ";e["ㅬ"]="ᇗ";e["ㅭ"]="ᇙ";e["ㅮ"]="ᄜ";e["ㅯ"]="ᇝ";e["ㅰ"]="ᇟ";e["ㅱ"]="ᄝ";e["ㅲ"]="ᄞ";e["ㅳ"]="ᄠ";e["ㅴ"]="ᄢ";e["ㅵ"]="ᄣ";e["ㅶ"]="ᄧ";e["ㅷ"]="ᄩ";e["ㅸ"]="ᄫ";e["ㅹ"]="ᄬ";e["ㅺ"]="ᄭ";e["ㅻ"]="ᄮ";e["ㅼ"]="ᄯ";e["ㅽ"]="ᄲ";e["ㅾ"]="ᄶ";e["ㅿ"]="ᅀ";e["ㆀ"]="ᅇ";e["ㆁ"]="ᅌ";e["ㆂ"]="ᇱ";e["ㆃ"]="ᇲ";e["ㆄ"]="ᅗ";e["ㆅ"]="ᅘ";e["ㆆ"]="ᅙ";e["ㆇ"]="ᆄ";e["ㆈ"]="ᆅ";e["ㆉ"]="ᆈ";e["ㆊ"]="ᆑ";e["ㆋ"]="ᆒ";e["ㆌ"]="ᆔ";e["ㆍ"]="ᆞ";e["ㆎ"]="ᆡ";e["㈀"]="(ᄀ)";e["㈁"]="(ᄂ)";e["㈂"]="(ᄃ)";e["㈃"]="(ᄅ)";e["㈄"]="(ᄆ)";e["㈅"]="(ᄇ)";e["㈆"]="(ᄉ)";e["㈇"]="(ᄋ)";e["㈈"]="(ᄌ)";e["㈉"]="(ᄎ)";e["㈊"]="(ᄏ)";e["㈋"]="(ᄐ)";e["㈌"]="(ᄑ)";e["㈍"]="(ᄒ)";e["㈎"]="(가)";e["㈏"]="(나)";e["㈐"]="(다)";e["㈑"]="(라)";e["㈒"]="(마)";e["㈓"]="(바)";e["㈔"]="(사)";e["㈕"]="(아)";e["㈖"]="(자)";e["㈗"]="(차)";e["㈘"]="(카)";e["㈙"]="(타)";e["㈚"]="(파)";e["㈛"]="(하)";e["㈜"]="(주)";e["㈝"]="(오전)";e["㈞"]="(오후)";e["㈠"]="(一)";e["㈡"]="(二)";e["㈢"]="(三)";e["㈣"]="(四)";e["㈤"]="(五)";e["㈥"]="(六)";e["㈦"]="(七)";e["㈧"]="(八)";e["㈨"]="(九)";e["㈩"]="(十)";e["㈪"]="(月)";e["㈫"]="(火)";e["㈬"]="(水)";e["㈭"]="(木)";e["㈮"]="(金)";e["㈯"]="(土)";e["㈰"]="(日)";e["㈱"]="(株)";e["㈲"]="(有)";e["㈳"]="(社)";e["㈴"]="(名)";e["㈵"]="(特)";e["㈶"]="(財)";e["㈷"]="(祝)";e["㈸"]="(労)";e["㈹"]="(代)";e["㈺"]="(呼)";e["㈻"]="(学)";e["㈼"]="(監)";e["㈽"]="(企)";e["㈾"]="(資)";e["㈿"]="(協)";e["㉀"]="(祭)";e["㉁"]="(休)";e["㉂"]="(自)";e["㉃"]="(至)";e["㋀"]="1月";e["㋁"]="2月";e["㋂"]="3月";e["㋃"]="4月";e["㋄"]="5月";e["㋅"]="6月";e["㋆"]="7月";e["㋇"]="8月";e["㋈"]="9月";e["㋉"]="10月";e["㋊"]="11月";e["㋋"]="12月";e["㍘"]="0点";e["㍙"]="1点";e["㍚"]="2点";e["㍛"]="3点";e["㍜"]="4点";e["㍝"]="5点";e["㍞"]="6点";e["㍟"]="7点";e["㍠"]="8点";e["㍡"]="9点";e["㍢"]="10点";e["㍣"]="11点";e["㍤"]="12点";e["㍥"]="13点";e["㍦"]="14点";e["㍧"]="15点";e["㍨"]="16点";e["㍩"]="17点";e["㍪"]="18点";e["㍫"]="19点";e["㍬"]="20点";e["㍭"]="21点";e["㍮"]="22点";e["㍯"]="23点";e["㍰"]="24点";e["㏠"]="1日";e["㏡"]="2日";e["㏢"]="3日";e["㏣"]="4日";e["㏤"]="5日";e["㏥"]="6日";e["㏦"]="7日";e["㏧"]="8日";e["㏨"]="9日";e["㏩"]="10日";e["㏪"]="11日";e["㏫"]="12日";e["㏬"]="13日";e["㏭"]="14日";e["㏮"]="15日";e["㏯"]="16日";e["㏰"]="17日";e["㏱"]="18日";e["㏲"]="19日";e["㏳"]="20日";e["㏴"]="21日";e["㏵"]="22日";e["㏶"]="23日";e["㏷"]="24日";e["㏸"]="25日";e["㏹"]="26日";e["㏺"]="27日";e["㏻"]="28日";e["㏼"]="29日";e["㏽"]="30日";e["㏾"]="31日";e["ff"]="ff";e["fi"]="fi";e["fl"]="fl";e["ffi"]="ffi";e["ffl"]="ffl";e["ſt"]="ſt";e["st"]="st";e["ﬓ"]="մն";e["ﬔ"]="մե";e["ﬕ"]="մի";e["ﬖ"]="վն";e["ﬗ"]="մխ";e["ﭏ"]="אל";e["ﭐ"]="ٱ";e["ﭑ"]="ٱ";e["ﭒ"]="ٻ";e["ﭓ"]="ٻ";e["ﭔ"]="ٻ";e["ﭕ"]="ٻ";e["ﭖ"]="پ";e["ﭗ"]="پ";e["ﭘ"]="پ";e["ﭙ"]="پ";e["ﭚ"]="ڀ";e["ﭛ"]="ڀ";e["ﭜ"]="ڀ";e["ﭝ"]="ڀ";e["ﭞ"]="ٺ";e["ﭟ"]="ٺ";e["ﭠ"]="ٺ";e["ﭡ"]="ٺ";e["ﭢ"]="ٿ";e["ﭣ"]="ٿ";e["ﭤ"]="ٿ";e["ﭥ"]="ٿ";e["ﭦ"]="ٹ";e["ﭧ"]="ٹ";e["ﭨ"]="ٹ";e["ﭩ"]="ٹ";e["ﭪ"]="ڤ";e["ﭫ"]="ڤ";e["ﭬ"]="ڤ";e["ﭭ"]="ڤ";e["ﭮ"]="ڦ";e["ﭯ"]="ڦ";e["ﭰ"]="ڦ";e["ﭱ"]="ڦ";e["ﭲ"]="ڄ";e["ﭳ"]="ڄ";e["ﭴ"]="ڄ";e["ﭵ"]="ڄ";e["ﭶ"]="ڃ";e["ﭷ"]="ڃ";e["ﭸ"]="ڃ";e["ﭹ"]="ڃ";e["ﭺ"]="چ";e["ﭻ"]="چ";e["ﭼ"]="چ";e["ﭽ"]="چ";e["ﭾ"]="ڇ";e["ﭿ"]="ڇ";e["ﮀ"]="ڇ";e["ﮁ"]="ڇ";e["ﮂ"]="ڍ";e["ﮃ"]="ڍ";e["ﮄ"]="ڌ";e["ﮅ"]="ڌ";e["ﮆ"]="ڎ";e["ﮇ"]="ڎ";e["ﮈ"]="ڈ";e["ﮉ"]="ڈ";e["ﮊ"]="ژ";e["ﮋ"]="ژ";e["ﮌ"]="ڑ";e["ﮍ"]="ڑ";e["ﮎ"]="ک";e["ﮏ"]="ک";e["ﮐ"]="ک";e["ﮑ"]="ک";e["ﮒ"]="گ";e["ﮓ"]="گ";e["ﮔ"]="گ";e["ﮕ"]="گ";e["ﮖ"]="ڳ";e["ﮗ"]="ڳ";e["ﮘ"]="ڳ";e["ﮙ"]="ڳ";e["ﮚ"]="ڱ";e["ﮛ"]="ڱ";e["ﮜ"]="ڱ";e["ﮝ"]="ڱ";e["ﮞ"]="ں";e["ﮟ"]="ں";e["ﮠ"]="ڻ";e["ﮡ"]="ڻ";e["ﮢ"]="ڻ";e["ﮣ"]="ڻ";e["ﮤ"]="ۀ";e["ﮥ"]="ۀ";e["ﮦ"]="ہ";e["ﮧ"]="ہ";e["ﮨ"]="ہ";e["ﮩ"]="ہ";e["ﮪ"]="ھ";e["ﮫ"]="ھ";e["ﮬ"]="ھ";e["ﮭ"]="ھ";e["ﮮ"]="ے";e["ﮯ"]="ے";e["ﮰ"]="ۓ";e["ﮱ"]="ۓ";e["ﯓ"]="ڭ";e["ﯔ"]="ڭ";e["ﯕ"]="ڭ";e["ﯖ"]="ڭ";e["ﯗ"]="ۇ";e["ﯘ"]="ۇ";e["ﯙ"]="ۆ";e["ﯚ"]="ۆ";e["ﯛ"]="ۈ";e["ﯜ"]="ۈ";e["ﯝ"]="ٷ";e["ﯞ"]="ۋ";e["ﯟ"]="ۋ";e["ﯠ"]="ۅ";e["ﯡ"]="ۅ";e["ﯢ"]="ۉ";e["ﯣ"]="ۉ";e["ﯤ"]="ې";e["ﯥ"]="ې";e["ﯦ"]="ې";e["ﯧ"]="ې";e["ﯨ"]="ى";e["ﯩ"]="ى";e["ﯪ"]="ئا";e["ﯫ"]="ئا";e["ﯬ"]="ئە";e["ﯭ"]="ئە";e["ﯮ"]="ئو";e["ﯯ"]="ئو";e["ﯰ"]="ئۇ";e["ﯱ"]="ئۇ";e["ﯲ"]="ئۆ";e["ﯳ"]="ئۆ";e["ﯴ"]="ئۈ";e["ﯵ"]="ئۈ";e["ﯶ"]="ئې";e["ﯷ"]="ئې";e["ﯸ"]="ئې";e["ﯹ"]="ئى";e["ﯺ"]="ئى";e["ﯻ"]="ئى";e["ﯼ"]="ی";e["ﯽ"]="ی";e["ﯾ"]="ی";e["ﯿ"]="ی";e["ﰀ"]="ئج";e["ﰁ"]="ئح";e["ﰂ"]="ئم";e["ﰃ"]="ئى";e["ﰄ"]="ئي";e["ﰅ"]="بج";e["ﰆ"]="بح";e["ﰇ"]="بخ";e["ﰈ"]="بم";e["ﰉ"]="بى";e["ﰊ"]="بي";e["ﰋ"]="تج";e["ﰌ"]="تح";e["ﰍ"]="تخ";e["ﰎ"]="تم";e["ﰏ"]="تى";e["ﰐ"]="تي";e["ﰑ"]="ثج";e["ﰒ"]="ثم";e["ﰓ"]="ثى";e["ﰔ"]="ثي";e["ﰕ"]="جح";e["ﰖ"]="جم";e["ﰗ"]="حج";e["ﰘ"]="حم";e["ﰙ"]="خج";e["ﰚ"]="خح";e["ﰛ"]="خم";e["ﰜ"]="سج";e["ﰝ"]="سح";e["ﰞ"]="سخ";e["ﰟ"]="سم";e["ﰠ"]="صح";e["ﰡ"]="صم";e["ﰢ"]="ضج";e["ﰣ"]="ضح";e["ﰤ"]="ضخ";e["ﰥ"]="ضم";e["ﰦ"]="طح";e["ﰧ"]="طم";e["ﰨ"]="ظم";e["ﰩ"]="عج";e["ﰪ"]="عم";e["ﰫ"]="غج";e["ﰬ"]="غم";e["ﰭ"]="فج";e["ﰮ"]="فح";e["ﰯ"]="فخ";e["ﰰ"]="فم";e["ﰱ"]="فى";e["ﰲ"]="في";e["ﰳ"]="قح";e["ﰴ"]="قم";e["ﰵ"]="قى";e["ﰶ"]="قي";e["ﰷ"]="كا";e["ﰸ"]="كج";e["ﰹ"]="كح";e["ﰺ"]="كخ";e["ﰻ"]="كل";e["ﰼ"]="كم";e["ﰽ"]="كى";e["ﰾ"]="كي";e["ﰿ"]="لج";e["ﱀ"]="لح";e["ﱁ"]="لخ";e["ﱂ"]="لم";e["ﱃ"]="لى";e["ﱄ"]="لي";e["ﱅ"]="مج";e["ﱆ"]="مح";e["ﱇ"]="مخ";e["ﱈ"]="مم";e["ﱉ"]="مى";e["ﱊ"]="مي";e["ﱋ"]="نج";e["ﱌ"]="نح";e["ﱍ"]="نخ";e["ﱎ"]="نم";e["ﱏ"]="نى";e["ﱐ"]="ني";e["ﱑ"]="هج";e["ﱒ"]="هم";e["ﱓ"]="هى";e["ﱔ"]="هي";e["ﱕ"]="يج";e["ﱖ"]="يح";e["ﱗ"]="يخ";e["ﱘ"]="يم";e["ﱙ"]="يى";e["ﱚ"]="يي";e["ﱛ"]="ذٰ";e["ﱜ"]="رٰ";e["ﱝ"]="ىٰ";e["ﱞ"]=" ٌّ";e["ﱟ"]=" ٍّ";e["ﱠ"]=" َّ";e["ﱡ"]=" ُّ";e["ﱢ"]=" ِّ";e["ﱣ"]=" ّٰ";e["ﱤ"]="ئر";e["ﱥ"]="ئز";e["ﱦ"]="ئم";e["ﱧ"]="ئن";e["ﱨ"]="ئى";e["ﱩ"]="ئي";e["ﱪ"]="بر";e["ﱫ"]="بز";e["ﱬ"]="بم";e["ﱭ"]="بن";e["ﱮ"]="بى";e["ﱯ"]="بي";e["ﱰ"]="تر";e["ﱱ"]="تز";e["ﱲ"]="تم";e["ﱳ"]="تن";e["ﱴ"]="تى";e["ﱵ"]="تي";e["ﱶ"]="ثر";e["ﱷ"]="ثز";e["ﱸ"]="ثم";e["ﱹ"]="ثن";e["ﱺ"]="ثى";e["ﱻ"]="ثي";e["ﱼ"]="فى";e["ﱽ"]="في";e["ﱾ"]="قى";e["ﱿ"]="قي";e["ﲀ"]="كا";e["ﲁ"]="كل";e["ﲂ"]="كم";e["ﲃ"]="كى";e["ﲄ"]="كي";e["ﲅ"]="لم";e["ﲆ"]="لى";e["ﲇ"]="لي";e["ﲈ"]="ما";e["ﲉ"]="مم";e["ﲊ"]="نر";e["ﲋ"]="نز";e["ﲌ"]="نم";e["ﲍ"]="نن";e["ﲎ"]="نى";e["ﲏ"]="ني";e["ﲐ"]="ىٰ";e["ﲑ"]="ير";e["ﲒ"]="يز";e["ﲓ"]="يم";e["ﲔ"]="ين";e["ﲕ"]="يى";e["ﲖ"]="يي";e["ﲗ"]="ئج";e["ﲘ"]="ئح";e["ﲙ"]="ئخ";e["ﲚ"]="ئم";e["ﲛ"]="ئه";e["ﲜ"]="بج";e["ﲝ"]="بح";e["ﲞ"]="بخ";e["ﲟ"]="بم";e["ﲠ"]="به";e["ﲡ"]="تج";e["ﲢ"]="تح";e["ﲣ"]="تخ";e["ﲤ"]="تم";e["ﲥ"]="ته";e["ﲦ"]="ثم";e["ﲧ"]="جح";e["ﲨ"]="جم";e["ﲩ"]="حج";e["ﲪ"]="حم";e["ﲫ"]="خج";e["ﲬ"]="خم";e["ﲭ"]="سج";e["ﲮ"]="سح";e["ﲯ"]="سخ";e["ﲰ"]="سم";e["ﲱ"]="صح";e["ﲲ"]="صخ";e["ﲳ"]="صم";e["ﲴ"]="ضج";e["ﲵ"]="ضح";e["ﲶ"]="ضخ";e["ﲷ"]="ضم";e["ﲸ"]="طح";e["ﲹ"]="ظم";e["ﲺ"]="عج";e["ﲻ"]="عم";e["ﲼ"]="غج";e["ﲽ"]="غم";e["ﲾ"]="فج";e["ﲿ"]="فح";e["ﳀ"]="فخ";e["ﳁ"]="فم";e["ﳂ"]="قح";e["ﳃ"]="قم";e["ﳄ"]="كج";e["ﳅ"]="كح";e["ﳆ"]="كخ";e["ﳇ"]="كل";e["ﳈ"]="كم";e["ﳉ"]="لج";e["ﳊ"]="لح";e["ﳋ"]="لخ";e["ﳌ"]="لم";e["ﳍ"]="له";e["ﳎ"]="مج";e["ﳏ"]="مح";e["ﳐ"]="مخ";e["ﳑ"]="مم";e["ﳒ"]="نج";e["ﳓ"]="نح";e["ﳔ"]="نخ";e["ﳕ"]="نم";e["ﳖ"]="نه";e["ﳗ"]="هج";e["ﳘ"]="هم";e["ﳙ"]="هٰ";e["ﳚ"]="يج";e["ﳛ"]="يح";e["ﳜ"]="يخ";e["ﳝ"]="يم";e["ﳞ"]="يه";e["ﳟ"]="ئم";e["ﳠ"]="ئه";e["ﳡ"]="بم";e["ﳢ"]="به";e["ﳣ"]="تم";e["ﳤ"]="ته";e["ﳥ"]="ثم";e["ﳦ"]="ثه";e["ﳧ"]="سم";e["ﳨ"]="سه";e["ﳩ"]="شم";e["ﳪ"]="شه";e["ﳫ"]="كل";e["ﳬ"]="كم";e["ﳭ"]="لم";e["ﳮ"]="نم";e["ﳯ"]="نه";e["ﳰ"]="يم";e["ﳱ"]="يه";e["ﳲ"]="ـَّ";e["ﳳ"]="ـُّ";e["ﳴ"]="ـِّ";e["ﳵ"]="طى";e["ﳶ"]="طي";e["ﳷ"]="عى";e["ﳸ"]="عي";e["ﳹ"]="غى";e["ﳺ"]="غي";e["ﳻ"]="سى";e["ﳼ"]="سي";e["ﳽ"]="شى";e["ﳾ"]="شي";e["ﳿ"]="حى";e["ﴀ"]="حي";e["ﴁ"]="جى";e["ﴂ"]="جي";e["ﴃ"]="خى";e["ﴄ"]="خي";e["ﴅ"]="صى";e["ﴆ"]="صي";e["ﴇ"]="ضى";e["ﴈ"]="ضي";e["ﴉ"]="شج";e["ﴊ"]="شح";e["ﴋ"]="شخ";e["ﴌ"]="شم";e["ﴍ"]="شر";e["ﴎ"]="سر";e["ﴏ"]="صر";e["ﴐ"]="ضر";e["ﴑ"]="طى";e["ﴒ"]="طي";e["ﴓ"]="عى";e["ﴔ"]="عي";e["ﴕ"]="غى";e["ﴖ"]="غي";e["ﴗ"]="سى";e["ﴘ"]="سي";e["ﴙ"]="شى";e["ﴚ"]="شي";e["ﴛ"]="حى";e["ﴜ"]="حي";e["ﴝ"]="جى";e["ﴞ"]="جي";e["ﴟ"]="خى";e["ﴠ"]="خي";e["ﴡ"]="صى";e["ﴢ"]="صي";e["ﴣ"]="ضى";e["ﴤ"]="ضي";e["ﴥ"]="شج";e["ﴦ"]="شح";e["ﴧ"]="شخ";e["ﴨ"]="شم";e["ﴩ"]="شر";e["ﴪ"]="سر";e["ﴫ"]="صر";e["ﴬ"]="ضر";e["ﴭ"]="شج";e["ﴮ"]="شح";e["ﴯ"]="شخ";e["ﴰ"]="شم";e["ﴱ"]="سه";e["ﴲ"]="شه";e["ﴳ"]="طم";e["ﴴ"]="سج";e["ﴵ"]="سح";e["ﴶ"]="سخ";e["ﴷ"]="شج";e["ﴸ"]="شح";e["ﴹ"]="شخ";e["ﴺ"]="طم";e["ﴻ"]="ظم";e["ﴼ"]="اً";e["ﴽ"]="اً";e["ﵐ"]="تجم";e["ﵑ"]="تحج";e["ﵒ"]="تحج";e["ﵓ"]="تحم";e["ﵔ"]="تخم";e["ﵕ"]="تمج";e["ﵖ"]="تمح";e["ﵗ"]="تمخ";e["ﵘ"]="جمح";e["ﵙ"]="جمح";e["ﵚ"]="حمي";e["ﵛ"]="حمى";e["ﵜ"]="سحج";e["ﵝ"]="سجح";e["ﵞ"]="سجى";e["ﵟ"]="سمح";e["ﵠ"]="سمح";e["ﵡ"]="سمج";e["ﵢ"]="سمم";e["ﵣ"]="سمم";e["ﵤ"]="صحح";e["ﵥ"]="صحح";e["ﵦ"]="صمم";e["ﵧ"]="شحم";e["ﵨ"]="شحم";e["ﵩ"]="شجي";e["ﵪ"]="شمخ";e["ﵫ"]="شمخ";e["ﵬ"]="شمم";e["ﵭ"]="شمم";e["ﵮ"]="ضحى";e["ﵯ"]="ضخم";e["ﵰ"]="ضخم";e["ﵱ"]="طمح";e["ﵲ"]="طمح";e["ﵳ"]="طمم";e["ﵴ"]="طمي";e["ﵵ"]="عجم";e["ﵶ"]="عمم";e["ﵷ"]="عمم";e["ﵸ"]="عمى";e["ﵹ"]="غمم";e["ﵺ"]="غمي";e["ﵻ"]="غمى";e["ﵼ"]="فخم";e["ﵽ"]="فخم";e["ﵾ"]="قمح";e["ﵿ"]="قمم";e["ﶀ"]="لحم";e["ﶁ"]="لحي";e["ﶂ"]="لحى";e["ﶃ"]="لجج";e["ﶄ"]="لجج";e["ﶅ"]="لخم";e["ﶆ"]="لخم";e["ﶇ"]="لمح";e["ﶈ"]="لمح";e["ﶉ"]="محج";e["ﶊ"]="محم";e["ﶋ"]="محي";e["ﶌ"]="مجح";e["ﶍ"]="مجم";e["ﶎ"]="مخج";e["ﶏ"]="مخم";e["ﶒ"]="مجخ";e["ﶓ"]="همج";e["ﶔ"]="همم";e["ﶕ"]="نحم";e["ﶖ"]="نحى";e["ﶗ"]="نجم";e["ﶘ"]="نجم";e["ﶙ"]="نجى";e["ﶚ"]="نمي";e["ﶛ"]="نمى";e["ﶜ"]="يمم";e["ﶝ"]="يمم";e["ﶞ"]="بخي";e["ﶟ"]="تجي";e["ﶠ"]="تجى";e["ﶡ"]="تخي";e["ﶢ"]="تخى";e["ﶣ"]="تمي";e["ﶤ"]="تمى";e["ﶥ"]="جمي";e["ﶦ"]="جحى";e["ﶧ"]="جمى";e["ﶨ"]="سخى";e["ﶩ"]="صحي";e["ﶪ"]="شحي";e["ﶫ"]="ضحي";e["ﶬ"]="لجي";e["ﶭ"]="لمي";e["ﶮ"]="يحي";e["ﶯ"]="يجي";e["ﶰ"]="يمي";e["ﶱ"]="ممي";e["ﶲ"]="قمي";e["ﶳ"]="نحي";e["ﶴ"]="قمح";e["ﶵ"]="لحم";e["ﶶ"]="عمي";e["ﶷ"]="كمي";e["ﶸ"]="نجح";e["ﶹ"]="مخي";e["ﶺ"]="لجم";e["ﶻ"]="كمم";e["ﶼ"]="لجم";e["ﶽ"]="نجح";e["ﶾ"]="جحي";e["ﶿ"]="حجي";e["ﷀ"]="مجي";e["ﷁ"]="فمي";e["ﷂ"]="بحي";e["ﷃ"]="كمم";e["ﷄ"]="عجم";e["ﷅ"]="صمم";e["ﷆ"]="سخي";e["ﷇ"]="نجي";e["﹉"]="‾";e["﹊"]="‾";e["﹋"]="‾";e["﹌"]="‾";e["﹍"]="_";e["﹎"]="_";e["﹏"]="_";e["ﺀ"]="ء";e["ﺁ"]="آ";e["ﺂ"]="آ";e["ﺃ"]="أ";e["ﺄ"]="أ";e["ﺅ"]="ؤ";e["ﺆ"]="ؤ";e["ﺇ"]="إ";e["ﺈ"]="إ";e["ﺉ"]="ئ";e["ﺊ"]="ئ";e["ﺋ"]="ئ";e["ﺌ"]="ئ";e["ﺍ"]="ا";e["ﺎ"]="ا";e["ﺏ"]="ب";e["ﺐ"]="ب";e["ﺑ"]="ب";e["ﺒ"]="ب";e["ﺓ"]="ة";e["ﺔ"]="ة";e["ﺕ"]="ت";e["ﺖ"]="ت";e["ﺗ"]="ت";e["ﺘ"]="ت";e["ﺙ"]="ث";e["ﺚ"]="ث";e["ﺛ"]="ث";e["ﺜ"]="ث";e["ﺝ"]="ج";e["ﺞ"]="ج";e["ﺟ"]="ج";e["ﺠ"]="ج";e["ﺡ"]="ح";e["ﺢ"]="ح";e["ﺣ"]="ح";e["ﺤ"]="ح";e["ﺥ"]="خ";e["ﺦ"]="خ";e["ﺧ"]="خ";e["ﺨ"]="خ";e["ﺩ"]="د";e["ﺪ"]="د";e["ﺫ"]="ذ";e["ﺬ"]="ذ";e["ﺭ"]="ر";e["ﺮ"]="ر";e["ﺯ"]="ز";e["ﺰ"]="ز";e["ﺱ"]="س";e["ﺲ"]="س";e["ﺳ"]="س";e["ﺴ"]="س";e["ﺵ"]="ش";e["ﺶ"]="ش";e["ﺷ"]="ش";e["ﺸ"]="ش";e["ﺹ"]="ص";e["ﺺ"]="ص";e["ﺻ"]="ص";e["ﺼ"]="ص";e["ﺽ"]="ض";e["ﺾ"]="ض";e["ﺿ"]="ض";e["ﻀ"]="ض";e["ﻁ"]="ط";e["ﻂ"]="ط";e["ﻃ"]="ط";e["ﻄ"]="ط";e["ﻅ"]="ظ";e["ﻆ"]="ظ";e["ﻇ"]="ظ";e["ﻈ"]="ظ";e["ﻉ"]="ع";e["ﻊ"]="ع";e["ﻋ"]="ع";e["ﻌ"]="ع";e["ﻍ"]="غ";e["ﻎ"]="غ";e["ﻏ"]="غ";e["ﻐ"]="غ";e["ﻑ"]="ف";e["ﻒ"]="ف";e["ﻓ"]="ف";e["ﻔ"]="ف";e["ﻕ"]="ق";e["ﻖ"]="ق";e["ﻗ"]="ق";e["ﻘ"]="ق";e["ﻙ"]="ك";e["ﻚ"]="ك";e["ﻛ"]="ك";e["ﻜ"]="ك";e["ﻝ"]="ل";e["ﻞ"]="ل";e["ﻟ"]="ل";e["ﻠ"]="ل";e["ﻡ"]="م";e["ﻢ"]="م";e["ﻣ"]="م";e["ﻤ"]="م";e["ﻥ"]="ن";e["ﻦ"]="ن";e["ﻧ"]="ن";e["ﻨ"]="ن";e["ﻩ"]="ه";e["ﻪ"]="ه";e["ﻫ"]="ه";e["ﻬ"]="ه";e["ﻭ"]="و";e["ﻮ"]="و";e["ﻯ"]="ى";e["ﻰ"]="ى";e["ﻱ"]="ي";e["ﻲ"]="ي";e["ﻳ"]="ي";e["ﻴ"]="ي";e["ﻵ"]="لآ";e["ﻶ"]="لآ";e["ﻷ"]="لأ";e["ﻸ"]="لأ";e["ﻹ"]="لإ";e["ﻺ"]="لإ";e["ﻻ"]="لا";e["ﻼ"]="لا"}));t.mapSpecialUnicodeValues=function(e){return e>=65520&&e<=65535?0:e>=62976&&e<=63743?i()[e]||e:173===e?45:e};t.reverseIfRtl=function(e){var t,a,r=e.length;if(r<=1||!(t=e.charCodeAt(0),a=n[13],t>=a.begin&&t<a.end||t>=(a=n[11]).begin&&t<a.end))return e;for(var i="",s=r-1;s>=0;s--)i+=e[s];return i};t.getUnicodeRangeFor=function(e){for(var t=0,a=n.length;t<a;t++){var r=n[t];if(e>=r.begin&&e<r.end)return t}return-1};t.getNormalizedUnicodes=s;t.getUnicodeForGlyph=function(e,t){var a=t[e];if(void 0!==a)return a;if(!e)return-1;if("u"===e[0]){var r,i=e.length;if(7===i&&"n"===e[1]&&"i"===e[2])r=e.substring(3);else{if(!(i>=5&&i<=7))return-1;r=e.substring(1)}if(r===r.toUpperCase()&&(a=parseInt(r,16))>=0)return a}return-1}},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.FontRendererFactory=void 0;var r=a(2),i=a(28),n=a(31),s=a(30),o=a(11),c=function(){function e(e,t){return e[t]<<24|e[t+1]<<16|e[t+2]<<8|e[t+3]}function t(e,t){return e[t]<<8|e[t+1]}function a(e){const t=e.length;let a=32768;t<1240?a=107:t<33900&&(a=1131);return a}function c(a,i,n){var s,o,c,l=1===t(a,i+2)?e(a,i+8):e(a,i+16),h=t(a,i+l);if(4===h){t(a,i+l+2);var u=t(a,i+l+6)>>1;o=i+l+14;s=[];for(c=0;c<u;c++,o+=2)s[c]={end:t(a,o)};o+=2;for(c=0;c<u;c++,o+=2)s[c].start=t(a,o);for(c=0;c<u;c++,o+=2)s[c].idDelta=t(a,o);for(c=0;c<u;c++,o+=2){var d=t(a,o);if(0!==d){s[c].ids=[];for(var f=0,g=s[c].end-s[c].start+1;f<g;f++){s[c].ids[f]=t(a,o+d);d+=2}}}return s}if(12===h){e(a,i+l+4);var m=e(a,i+l+12);o=i+l+16;s=[];for(c=0;c<m;c++){s.push({start:e(a,o),end:e(a,o+4),idDelta:e(a,o+8)-e(a,o)});o+=12}return s}throw new r.FormatError(`unsupported cmap: ${h}`)}function l(e,t,a,r){var n=new i.CFFParser(new o.Stream(e,t,a-t),{},r).parse();return{glyphs:n.charStrings.objects,subrs:n.topDict.privateDict&&n.topDict.privateDict.subrsIndex&&n.topDict.privateDict.subrsIndex.objects,gsubrs:n.globalSubrIndex&&n.globalSubrIndex.objects,isCFFCIDFont:n.isCIDFont,fdSelect:n.fdSelect,fdArray:n.fdArray}}function h(e,t){for(var a=t.codePointAt(0),r=0,i=0,n=e.length-1;i<n;){var s=i+n+1>>1;a<e[s].start?n=s-1:i=s}e[i].start<=a&&a<=e[i].end&&(r=e[i].idDelta+(e[i].ids?e[i].ids[a-e[i].start]:a)&65535);return{charCode:a,glyphId:r}}const u=[];class d{constructor(e){this.constructor===d&&(0,r.unreachable)("Cannot initialize CompiledFont.");this.fontMatrix=e;this.compiledGlyphs=Object.create(null);this.compiledCharCodeToGlyphId=Object.create(null)}getPathJs(e){const t=h(this.cmap,e);let a=this.compiledGlyphs[t.glyphId];if(!a){a=this.compileGlyph(this.glyphs[t.glyphId],t.glyphId);this.compiledGlyphs[t.glyphId]=a}void 0===this.compiledCharCodeToGlyphId[t.charCode]&&(this.compiledCharCodeToGlyphId[t.charCode]=t.glyphId);return a}compileGlyph(e,t){if(!e||0===e.length||14===e[0])return u;let a=this.fontMatrix;if(this.isCFFCIDFont){const e=this.fdSelect.getFDIndex(t);if(e>=0&&e<this.fdArray.length){a=this.fdArray[e].getByName("FontMatrix")||r.FONT_IDENTITY_MATRIX}else(0,r.warn)("Invalid fd index for glyph index.")}const i=[];i.push({cmd:"save"});i.push({cmd:"transform",args:a.slice()});i.push({cmd:"scale",args:["size","-size"]});this.compileGlyphImpl(e,i,t);i.push({cmd:"restore"});return i}compileGlyphImpl(){(0,r.unreachable)("Children classes should implement this.")}hasBuiltPath(e){const t=h(this.cmap,e);return void 0!==this.compiledGlyphs[t.glyphId]&&void 0!==this.compiledCharCodeToGlyphId[t.charCode]}}class f extends d{constructor(e,t,a){super(a||[488e-6,0,0,488e-6,0,0]);this.glyphs=e;this.cmap=t}compileGlyphImpl(e,t){!function e(t,a,r){function i(e,t){a.push({cmd:"moveTo",args:[e,t]})}function n(e,t){a.push({cmd:"lineTo",args:[e,t]})}function s(e,t,r,i){a.push({cmd:"quadraticCurveTo",args:[e,t,r,i]})}var o,c=0,l=(t[c]<<24|t[c+1]<<16)>>16,h=0,u=0;c+=10;if(l<0)do{o=t[c]<<8|t[c+1];var d,f,g=t[c+2]<<8|t[c+3];c+=4;if(1&o){d=(t[c]<<24|t[c+1]<<16)>>16;f=(t[c+2]<<24|t[c+3]<<16)>>16;c+=4}else{d=t[c++];f=t[c++]}if(2&o){h=d;u=f}else{h=0;u=0}var m=1,p=1,b=0,y=0;if(8&o){m=p=(t[c]<<24|t[c+1]<<16)/1073741824;c+=2}else if(64&o){m=(t[c]<<24|t[c+1]<<16)/1073741824;p=(t[c+2]<<24|t[c+3]<<16)/1073741824;c+=4}else if(128&o){m=(t[c]<<24|t[c+1]<<16)/1073741824;b=(t[c+2]<<24|t[c+3]<<16)/1073741824;y=(t[c+4]<<24|t[c+5]<<16)/1073741824;p=(t[c+6]<<24|t[c+7]<<16)/1073741824;c+=8}var v=r.glyphs[g];if(v){a.push({cmd:"save"});a.push({cmd:"transform",args:[m,b,y,p,h,u]});e(v,a,r);a.push({cmd:"restore"})}}while(32&o);else{var w,k,S=[];for(w=0;w<l;w++){S.push(t[c]<<8|t[c+1]);c+=2}c+=2+(t[c]<<8|t[c+1]);for(var C=S[S.length-1]+1,x=[];x.length<C;){var A=1;8&(o=t[c++])&&(A+=t[c++]);for(;A-- >0;)x.push({flags:o})}for(w=0;w<C;w++){switch(18&x[w].flags){case 0:h+=(t[c]<<24|t[c+1]<<16)>>16;c+=2;break;case 2:h-=t[c++];break;case 18:h+=t[c++]}x[w].x=h}for(w=0;w<C;w++){switch(36&x[w].flags){case 0:u+=(t[c]<<24|t[c+1]<<16)>>16;c+=2;break;case 4:u-=t[c++];break;case 36:u+=t[c++]}x[w].y=u}var I=0;for(c=0;c<l;c++){var F=S[c],T=x.slice(I,F+1);if(1&T[0].flags)T.push(T[0]);else if(1&T[T.length-1].flags)T.unshift(T[T.length-1]);else{var E={flags:1,x:(T[0].x+T[T.length-1].x)/2,y:(T[0].y+T[T.length-1].y)/2};T.unshift(E);T.push(E)}i(T[0].x,T[0].y);for(w=1,k=T.length;w<k;w++)if(1&T[w].flags)n(T[w].x,T[w].y);else if(1&T[w+1].flags){s(T[w].x,T[w].y,T[w+1].x,T[w+1].y);w++}else s(T[w].x,T[w].y,(T[w].x+T[w+1].x)/2,(T[w].y+T[w+1].y)/2);I=F+1}}}(e,t,this)}}class g extends d{constructor(e,t,r,i){super(r||[.001,0,0,.001,0,0]);this.glyphs=e.glyphs;this.gsubrs=e.gsubrs||[];this.subrs=e.subrs||[];this.cmap=t;this.glyphNameMap=i||(0,n.getGlyphsUnicode)();this.gsubrsBias=a(this.gsubrs);this.subrsBias=a(this.subrs);this.isCFFCIDFont=e.isCFFCIDFont;this.fdSelect=e.fdSelect;this.fdArray=e.fdArray}compileGlyphImpl(e,t,i){!function e(t,i,n,o){var c=[],l=0,u=0,d=0;function f(e,t){i.push({cmd:"moveTo",args:[e,t]})}function g(e,t){i.push({cmd:"lineTo",args:[e,t]})}function m(e,t,a,r,n,s){i.push({cmd:"bezierCurveTo",args:[e,t,a,r,n,s]})}!function t(p){for(var b=0;b<p.length;){var y,v,w,k,S,C,x,A,I=!1,F=p[b++];switch(F){case 1:case 3:d+=c.length>>1;I=!0;break;case 4:u+=c.pop();f(l,u);I=!0;break;case 5:for(;c.length>0;){l+=c.shift();u+=c.shift();g(l,u)}break;case 6:for(;c.length>0;){g(l+=c.shift(),u);if(0===c.length)break;u+=c.shift();g(l,u)}break;case 7:for(;c.length>0;){u+=c.shift();g(l,u);if(0===c.length)break;g(l+=c.shift(),u)}break;case 8:for(;c.length>0;){y=l+c.shift();w=u+c.shift();v=y+c.shift();k=w+c.shift();l=v+c.shift();u=k+c.shift();m(y,w,v,k,l,u)}break;case 10:x=c.pop();A=null;if(n.isCFFCIDFont){const e=n.fdSelect.getFDIndex(o);if(e>=0&&e<n.fdArray.length){const t=n.fdArray[e];let r;t.privateDict&&t.privateDict.subrsIndex&&(r=t.privateDict.subrsIndex.objects);r&&(A=r[x+=a(r)])}else(0,r.warn)("Invalid fd index for glyph index.")}else A=n.subrs[x+n.subrsBias];A&&t(A);break;case 11:return;case 12:switch(F=p[b++]){case 34:v=(y=l+c.shift())+c.shift();S=u+c.shift();l=v+c.shift();m(y,u,v,S,l,S);v=(y=l+c.shift())+c.shift();l=v+c.shift();m(y,S,v,u,l,u);break;case 35:y=l+c.shift();w=u+c.shift();v=y+c.shift();k=w+c.shift();l=v+c.shift();u=k+c.shift();m(y,w,v,k,l,u);y=l+c.shift();w=u+c.shift();v=y+c.shift();k=w+c.shift();l=v+c.shift();u=k+c.shift();m(y,w,v,k,l,u);c.pop();break;case 36:m(y=l+c.shift(),S=u+c.shift(),v=y+c.shift(),C=S+c.shift(),l=v+c.shift(),C);m(y=l+c.shift(),C,v=y+c.shift(),C+c.shift(),l=v+c.shift(),u);break;case 37:var T=l,E=u;y=l+c.shift();w=u+c.shift();v=y+c.shift();k=w+c.shift();l=v+c.shift();u=k+c.shift();m(y,w,v,k,l,u);y=l+c.shift();w=u+c.shift();v=y+c.shift();k=w+c.shift();l=v;u=k;Math.abs(l-T)>Math.abs(u-E)?l+=c.shift():u+=c.shift();m(y,w,v,k,l,u);break;default:throw new r.FormatError(`unknown operator: 12 ${F}`)}break;case 14:if(c.length>=4){var O=c.pop(),P=c.pop();u=c.pop();l=c.pop();i.push({cmd:"save"});i.push({cmd:"translate",args:[l,u]});var B=h(n.cmap,String.fromCharCode(n.glyphNameMap[s.StandardEncoding[O]]));e(n.glyphs[B.glyphId],i,n,B.glyphId);i.push({cmd:"restore"});B=h(n.cmap,String.fromCharCode(n.glyphNameMap[s.StandardEncoding[P]]));e(n.glyphs[B.glyphId],i,n,B.glyphId)}return;case 18:d+=c.length>>1;I=!0;break;case 19:case 20:b+=(d+=c.length>>1)+7>>3;I=!0;break;case 21:u+=c.pop();f(l+=c.pop(),u);I=!0;break;case 22:f(l+=c.pop(),u);I=!0;break;case 23:d+=c.length>>1;I=!0;break;case 24:for(;c.length>2;){y=l+c.shift();w=u+c.shift();v=y+c.shift();k=w+c.shift();l=v+c.shift();u=k+c.shift();m(y,w,v,k,l,u)}l+=c.shift();u+=c.shift();g(l,u);break;case 25:for(;c.length>6;){l+=c.shift();u+=c.shift();g(l,u)}y=l+c.shift();w=u+c.shift();v=y+c.shift();k=w+c.shift();l=v+c.shift();u=k+c.shift();m(y,w,v,k,l,u);break;case 26:c.length%2&&(l+=c.shift());for(;c.length>0;){y=l;w=u+c.shift();v=y+c.shift();k=w+c.shift();l=v;u=k+c.shift();m(y,w,v,k,l,u)}break;case 27:c.length%2&&(u+=c.shift());for(;c.length>0;)m(y=l+c.shift(),w=u,v=y+c.shift(),k=w+c.shift(),l=v+c.shift(),u=k);break;case 28:c.push((p[b]<<24|p[b+1]<<16)>>16);b+=2;break;case 29:x=c.pop()+n.gsubrsBias;(A=n.gsubrs[x])&&t(A);break;case 30:for(;c.length>0;){y=l;w=u+c.shift();v=y+c.shift();k=w+c.shift();l=v+c.shift();u=k+(1===c.length?c.shift():0);m(y,w,v,k,l,u);if(0===c.length)break;y=l+c.shift();w=u;v=y+c.shift();k=w+c.shift();u=k+c.shift();m(y,w,v,k,l=v+(1===c.length?c.shift():0),u)}break;case 31:for(;c.length>0;){y=l+c.shift();w=u;v=y+c.shift();k=w+c.shift();u=k+c.shift();m(y,w,v,k,l=v+(1===c.length?c.shift():0),u);if(0===c.length)break;y=l;w=u+c.shift();v=y+c.shift();k=w+c.shift();l=v+c.shift();u=k+(1===c.length?c.shift():0);m(y,w,v,k,l,u)}break;default:if(F<32)throw new r.FormatError(`unknown operator: ${F}`);if(F<247)c.push(F-139);else if(F<251)c.push(256*(F-247)+p[b++]+108);else if(F<255)c.push(256*-(F-251)-p[b++]-108);else{c.push((p[b]<<24|p[b+1]<<16|p[b+2]<<8|p[b+3])/65536);b+=4}}I&&(c.length=0)}}(t)}(e,t,this,i)}}return{create:function(a,i){for(var n,s,o,h,u,d,m=new Uint8Array(a.data),p=t(m,4),b=0,y=12;b<p;b++,y+=16){var v=(0,r.bytesToString)(m.subarray(y,y+4)),w=e(m,y+8),k=e(m,y+12);switch(v){case"cmap":n=c(m,w);break;case"glyf":s=m.subarray(w,w+k);break;case"loca":o=m.subarray(w,w+k);break;case"head":d=t(m,w+18);u=t(m,w+50);break;case"CFF ":h=l(m,w,w+k,i)}}if(s){var S=d?[1/d,0,0,1/d,0,0]:a.fontMatrix;return new f(function(e,t,a){var r,i;if(a){r=4;i=function(e,t){return e[t]<<24|e[t+1]<<16|e[t+2]<<8|e[t+3]}}else{r=2;i=function(e,t){return e[t]<<9|e[t+1]<<1}}for(var n=[],s=i(t,0),o=r;o<t.length;o+=r){var c=i(t,o);n.push(e.subarray(s,c));s=c}return n}(s,o,u),n,S)}return new g(h,n,a.fontMatrix,a.glyphNameMap)}}}();t.FontRendererFactory=c},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.Type1Parser=void 0;var r=a(30),i=a(7),n=a(11),s=a(2),o=function(){var e=[4],t=[5],a=[6],r=[7],i=[8],n=[12,35],o=[14],c=[21],l=[22],h=[30],u=[31];function d(){this.width=0;this.lsb=0;this.flexing=!1;this.output=[];this.stack=[]}d.prototype={convert:function(d,f,g){for(var m,p,b,y=d.length,v=!1,w=0;w<y;w++){var k=d[w];if(k<32){12===k&&(k=(k<<8)+d[++w]);switch(k){case 1:case 3:this.stack=[];break;case 4:if(this.flexing){if(this.stack.length<1){v=!0;break}var S=this.stack.pop();this.stack.push(0,S);break}v=this.executeCommand(1,e);break;case 5:v=this.executeCommand(2,t);break;case 6:v=this.executeCommand(1,a);break;case 7:v=this.executeCommand(1,r);break;case 8:v=this.executeCommand(6,i);break;case 9:this.stack=[];break;case 10:if(this.stack.length<1){v=!0;break}if(!f[b=this.stack.pop()]){v=!0;break}v=this.convert(f[b],f,g);break;case 11:return v;case 13:if(this.stack.length<2){v=!0;break}m=this.stack.pop();p=this.stack.pop();this.lsb=p;this.width=m;this.stack.push(m,p);v=this.executeCommand(2,l);break;case 14:this.output.push(o[0]);break;case 21:if(this.flexing)break;v=this.executeCommand(2,c);break;case 22:if(this.flexing){this.stack.push(0);break}v=this.executeCommand(1,l);break;case 30:v=this.executeCommand(4,h);break;case 31:v=this.executeCommand(4,u);break;case 3072:case 3073:case 3074:this.stack=[];break;case 3078:if(g){this.seac=this.stack.splice(-4,4);v=this.executeCommand(0,o)}else v=this.executeCommand(4,o);break;case 3079:if(this.stack.length<4){v=!0;break}this.stack.pop();m=this.stack.pop();var C=this.stack.pop();p=this.stack.pop();this.lsb=p;this.width=m;this.stack.push(m,p,C);v=this.executeCommand(3,c);break;case 3084:if(this.stack.length<2){v=!0;break}var x=this.stack.pop(),A=this.stack.pop();this.stack.push(A/x);break;case 3088:if(this.stack.length<2){v=!0;break}b=this.stack.pop();var I=this.stack.pop();if(0===b&&3===I){var F=this.stack.splice(this.stack.length-17,17);this.stack.push(F[2]+F[0],F[3]+F[1],F[4],F[5],F[6],F[7],F[8],F[9],F[10],F[11],F[12],F[13],F[14]);v=this.executeCommand(13,n,!0);this.flexing=!1;this.stack.push(F[15],F[16])}else 1===b&&0===I&&(this.flexing=!0);break;case 3089:break;case 3105:this.stack=[];break;default:(0,s.warn)('Unknown type 1 charstring command of "'+k+'"')}if(v)break}else{k<=246?k-=139:k=k<=250?256*(k-247)+d[++w]+108:k<=254?-256*(k-251)-d[++w]-108:(255&d[++w])<<24|(255&d[++w])<<16|(255&d[++w])<<8|(255&d[++w])<<0;this.stack.push(k)}}return v},executeCommand(e,t,a){var r=this.stack.length;if(e>r)return!0;for(var i=r-e,n=i;n<r;n++){var s=this.stack[n];if(Number.isInteger(s))this.output.push(28,s>>8&255,255&s);else{s=65536*s|0;this.output.push(255,s>>24&255,s>>16&255,s>>8&255,255&s)}}this.output.push.apply(this.output,t);a?this.stack.splice(i,e):this.stack.length=0;return!1}};return d}(),c=function(){function e(e){return e>=48&&e<=57||e>=65&&e<=70||e>=97&&e<=102}function t(e,t,a){if(a>=e.length)return new Uint8Array(0);var r,i,n=0|t;for(r=0;r<a;r++)n=52845*(e[r]+n)+22719&65535;var s=e.length-a,o=new Uint8Array(s);for(r=a,i=0;i<s;r++,i++){var c=e[r];o[i]=c^n>>8;n=52845*(c+n)+22719&65535}return o}function a(e){return 47===e||91===e||93===e||123===e||125===e||40===e||41===e}function s(a,r,i){if(r){var s=a.getBytes(),o=!(e(s[0])&&e(s[1])&&e(s[2])&&e(s[3]));a=new n.Stream(o?t(s,55665,4):function(t,a,r){var i,n,s=0|a,o=t.length,c=new Uint8Array(o>>>1);for(i=0,n=0;i<o;i++){var l=t[i];if(e(l)){i++;for(var h;i<o&&!e(h=t[i]);)i++;if(i<o){var u=parseInt(String.fromCharCode(l,h),16);c[n++]=u^s>>8;s=52845*(u+s)+22719&65535}}}return Array.prototype.slice.call(c,r,n)}(s,55665,4))}this.seacAnalysisEnabled=!!i;this.stream=a;this.nextChar()}s.prototype={readNumberArray:function(){this.getToken();for(var e=[];;){var t=this.getToken();if(null===t||"]"===t||"}"===t)break;e.push(parseFloat(t||0))}return e},readNumber:function(){var e=this.getToken();return parseFloat(e||0)},readInt:function(){var e=this.getToken();return 0|parseInt(e||0,10)},readBoolean:function(){return"true"===this.getToken()?1:0},nextChar:function(){return this.currentChar=this.stream.getByte()},getToken:function(){for(var e=!1,t=this.currentChar;;){if(-1===t)return null;if(e)10!==t&&13!==t||(e=!1);else if(37===t)e=!0;else if(!(0,i.isWhiteSpace)(t))break;t=this.nextChar()}if(a(t)){this.nextChar();return String.fromCharCode(t)}var r="";do{r+=String.fromCharCode(t);t=this.nextChar()}while(t>=0&&!(0,i.isWhiteSpace)(t)&&!a(t));return r},readCharStrings:function(e,a){return-1===a?e:t(e,4330,a)},extractFontProgram:function(e){var t=this.stream,a=[],r=[],i=Object.create(null);i.lenIV=4;for(var n,s,c,l,h,u={subrs:[],charstrings:[],properties:{privateData:i}};null!==(n=this.getToken());)if("/"===n)switch(n=this.getToken()){case"CharStrings":this.getToken();this.getToken();this.getToken();this.getToken();for(;null!==(n=this.getToken())&&"end"!==n;)if("/"===n){var d=this.getToken();s=this.readInt();this.getToken();c=s>0?t.getBytes(s):new Uint8Array(0);l=u.properties.privateData.lenIV;h=this.readCharStrings(c,l);this.nextChar();"noaccess"===(n=this.getToken())&&this.getToken();r.push({glyph:d,encoded:h})}break;case"Subrs":this.readInt();this.getToken();for(;"dup"===this.getToken();){var f=this.readInt();s=this.readInt();this.getToken();c=s>0?t.getBytes(s):new Uint8Array(0);l=u.properties.privateData.lenIV;h=this.readCharStrings(c,l);this.nextChar();"noaccess"===(n=this.getToken())&&this.getToken();a[f]=h}break;case"BlueValues":case"OtherBlues":case"FamilyBlues":case"FamilyOtherBlues":var g=this.readNumberArray();g.length>0&&g.length,0;break;case"StemSnapH":case"StemSnapV":u.properties.privateData[n]=this.readNumberArray();break;case"StdHW":case"StdVW":u.properties.privateData[n]=this.readNumberArray()[0];break;case"BlueShift":case"lenIV":case"BlueFuzz":case"BlueScale":case"LanguageGroup":case"ExpansionFactor":u.properties.privateData[n]=this.readNumber();break;case"ForceBold":u.properties.privateData[n]=this.readBoolean()}for(var m=0;m<r.length;m++){d=r[m].glyph;h=r[m].encoded;var p=new o,b=p.convert(h,a,this.seacAnalysisEnabled),y=p.output;b&&(y=[14]);const t={glyphName:d,charstring:y,width:p.width,lsb:p.lsb,seac:p.seac};".notdef"===d?u.charstrings.unshift(t):u.charstrings.push(t);if(e.builtInEncoding){const t=e.builtInEncoding.indexOf(d);t>-1&&void 0===e.widths[t]&&t>=e.firstChar&&t<=e.lastChar&&(e.widths[t]=p.width)}}return u},extractFontHeader:function(e){for(var t;null!==(t=this.getToken());)if("/"===t)switch(t=this.getToken()){case"FontMatrix":var a=this.readNumberArray();e.fontMatrix=a;break;case"Encoding":var i,n=this.getToken();if(/^\d+$/.test(n)){i=[];var s=0|parseInt(n,10);this.getToken();for(var o=0;o<s;o++){t=this.getToken();for(;"dup"!==t&&"def"!==t;)if(null===(t=this.getToken()))return;if("def"===t)break;var c=this.readInt();this.getToken();var l=this.getToken();i[c]=l;this.getToken()}}else i=(0,r.getEncoding)(n);e.builtInEncoding=i;break;case"FontBBox":var h=this.readNumberArray();e.ascent=Math.max(h[3],h[1]);e.descent=Math.min(h[1],h[3]);e.ascentScaled=!0}}};return s}();t.Type1Parser=c},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.getTilingPatternIR=function(e,t,a){const i=t.getArray("Matrix"),n=r.Util.normalizeRect(t.getArray("BBox")),s=t.get("XStep"),o=t.get("YStep"),c=t.get("PaintType"),l=t.get("TilingType");if(n[2]-n[0]==0||n[3]-n[1]==0)throw new r.FormatError(`Invalid getTilingPatternIR /BBox array: [${n}].`);return["TilingPattern",a,e,i,n,s,o,c,l]};t.Pattern=void 0;var r=a(2),i=a(22),n=a(4),s=a(7),o=2,c=3,l=4,h=5,u=6,d=7,f=function(){function e(){(0,r.unreachable)("should not call Pattern constructor")}e.prototype={getPattern:function(e){(0,r.unreachable)(`Should not call Pattern.getStyle: ${e}`)}};e.parseShading=function(e,t,a,i,f,m){var p=(0,n.isStream)(e)?e.dict:e,b=p.get("ShadingType");try{switch(b){case o:case c:return new g.RadialAxial(p,t,a,i,m);case l:case h:case u:case d:return new g.Mesh(e,t,a,i,m);default:throw new r.FormatError("Unsupported ShadingType: "+b)}}catch(e){if(e instanceof s.MissingDataException)throw e;f.send("UnsupportedFeature",{featureId:r.UNSUPPORTED_FEATURES.shadingPattern});(0,r.warn)(e);return new g.Dummy}};return e}();t.Pattern=f;var g={SMALL_NUMBER:1e-6};g.RadialAxial=function(){function e(e,t,a,n,s){this.matrix=t;this.coordsArr=e.getArray("Coords");this.shadingType=e.get("ShadingType");this.type="Pattern";var o=e.get("ColorSpace","CS");o=i.ColorSpace.parse(o,a,n,s);this.cs=o;const l=e.getArray("BBox");Array.isArray(l)&&4===l.length?this.bbox=r.Util.normalizeRect(l):this.bbox=null;var h=0,u=1;if(e.has("Domain")){var d=e.getArray("Domain");h=d[0];u=d[1]}var f=!1,m=!1;if(e.has("Extend")){var p=e.getArray("Extend");f=p[0];m=p[1]}if(!(this.shadingType!==c||f&&m)){var b=this.coordsArr[0],y=this.coordsArr[1],v=this.coordsArr[2],w=this.coordsArr[3],k=this.coordsArr[4],S=this.coordsArr[5],C=Math.sqrt((b-w)*(b-w)+(y-k)*(y-k));v<=S+C&&S<=v+C&&(0,r.warn)("Unsupported radial gradient.")}this.extendStart=f;this.extendEnd=m;var x=e.get("Function"),A=s.createFromArray(x);const I=(u-h)/10;var F=this.colorStops=[];if(h>=u||I<=0)(0,r.info)("Bad shading domain.");else{var T,E=new Float32Array(o.numComps),O=new Float32Array(1);for(let e=0;e<=10;e++){O[0]=h+e*I;A(O,0,E,0);T=o.getRgb(E,0);var P=r.Util.makeCssRgb(T[0],T[1],T[2]);F.push([e/10,P])}var B="transparent";if(e.has("Background")){T=o.getRgb(e.get("Background"),0);B=r.Util.makeCssRgb(T[0],T[1],T[2])}if(!f){F.unshift([0,B]);F[1][0]+=g.SMALL_NUMBER}if(!m){F[F.length-1][0]-=g.SMALL_NUMBER;F.push([1,B])}this.colorStops=F}}e.prototype={getIR:function(){var e,t,a,i,n,s=this.coordsArr,l=this.shadingType;if(l===o){t=[s[0],s[1]];a=[s[2],s[3]];i=null;n=null;e="axial"}else if(l===c){t=[s[0],s[1]];a=[s[3],s[4]];i=s[2];n=s[5];e="radial"}else(0,r.unreachable)(`getPattern type unknown: ${l}`);var h=this.matrix;if(h){t=r.Util.applyTransform(t,h);a=r.Util.applyTransform(a,h);if(l===c){var u=r.Util.singularValueDecompose2dScale(h);i*=u[0];n*=u[1]}}return["RadialAxial",e,this.bbox,this.colorStops,t,a,i,n]}};return e}();g.Mesh=function(){function e(e,t){this.stream=e;this.context=t;this.buffer=0;this.bufferLength=0;var a=t.numComps;this.tmpCompsBuf=new Float32Array(a);var r=t.colorSpace.numComps;this.tmpCsCompsBuf=t.colorFn?new Float32Array(r):this.tmpCompsBuf}e.prototype={get hasData(){if(this.stream.end)return this.stream.pos<this.stream.end;if(this.bufferLength>0)return!0;var e=this.stream.getByte();if(e<0)return!1;this.buffer=e;this.bufferLength=8;return!0},readBits:function(e){var t=this.buffer,a=this.bufferLength;if(32===e){if(0===a)return(this.stream.getByte()<<24|this.stream.getByte()<<16|this.stream.getByte()<<8|this.stream.getByte())>>>0;t=t<<24|this.stream.getByte()<<16|this.stream.getByte()<<8|this.stream.getByte();var r=this.stream.getByte();this.buffer=r&(1<<a)-1;return(t<<8-a|(255&r)>>a)>>>0}if(8===e&&0===a)return this.stream.getByte();for(;a<e;){t=t<<8|this.stream.getByte();a+=8}a-=e;this.bufferLength=a;this.buffer=t&(1<<a)-1;return t>>a},align:function(){this.buffer=0;this.bufferLength=0},readFlag:function(){return this.readBits(this.context.bitsPerFlag)},readCoordinate:function(){var e=this.context.bitsPerCoordinate,t=this.readBits(e),a=this.readBits(e),r=this.context.decode,i=e<32?1/((1<<e)-1):2.3283064365386963e-10;return[t*i*(r[1]-r[0])+r[0],a*i*(r[3]-r[2])+r[2]]},readComponents:function(){for(var e=this.context.numComps,t=this.context.bitsPerComponent,a=t<32?1/((1<<t)-1):2.3283064365386963e-10,r=this.context.decode,i=this.tmpCompsBuf,n=0,s=4;n<e;n++,s+=2){var o=this.readBits(t);i[n]=o*a*(r[s+1]-r[s])+r[s]}var c=this.tmpCsCompsBuf;this.context.colorFn&&this.context.colorFn(i,0,c,0);return this.context.colorSpace.getRgb(c,0)}};var t,a=(t=[],function(e){t[e]||(t[e]=function(e){for(var t=[],a=0;a<=e;a++){var r=a/e,i=1-r;t.push(new Float32Array([i*i*i,3*r*i*i,3*r*r*i,r*r*r]))}return t}(e));return t[e]});function s(e,t){var i=e.figures[t];(0,r.assert)("patch"===i.type,"Unexpected patch mesh figure");var n=e.coords,s=e.colors,o=i.coords,c=i.colors,l=Math.min(n[o[0]][0],n[o[3]][0],n[o[12]][0],n[o[15]][0]),h=Math.min(n[o[0]][1],n[o[3]][1],n[o[12]][1],n[o[15]][1]),u=Math.max(n[o[0]][0],n[o[3]][0],n[o[12]][0],n[o[15]][0]),d=Math.max(n[o[0]][1],n[o[3]][1],n[o[12]][1],n[o[15]][1]),f=Math.ceil(20*(u-l)/(e.bounds[2]-e.bounds[0]));f=Math.max(3,Math.min(20,f));var g=Math.ceil(20*(d-h)/(e.bounds[3]-e.bounds[1]));g=Math.max(3,Math.min(20,g));for(var m=f+1,p=new Int32Array((g+1)*m),b=new Int32Array((g+1)*m),y=0,v=new Uint8Array(3),w=new Uint8Array(3),k=s[c[0]],S=s[c[1]],C=s[c[2]],x=s[c[3]],A=a(g),I=a(f),F=0;F<=g;F++){v[0]=(k[0]*(g-F)+C[0]*F)/g|0;v[1]=(k[1]*(g-F)+C[1]*F)/g|0;v[2]=(k[2]*(g-F)+C[2]*F)/g|0;w[0]=(S[0]*(g-F)+x[0]*F)/g|0;w[1]=(S[1]*(g-F)+x[1]*F)/g|0;w[2]=(S[2]*(g-F)+x[2]*F)/g|0;for(var T=0;T<=f;T++,y++)if(0!==F&&F!==g||0!==T&&T!==f){for(var E=0,O=0,P=0,B=0;B<=3;B++)for(var D=0;D<=3;D++,P++){var N=A[F][B]*I[T][D];E+=n[o[P]][0]*N;O+=n[o[P]][1]*N}p[y]=n.length;n.push([E,O]);b[y]=s.length;var M=new Uint8Array(3);M[0]=(v[0]*(f-T)+w[0]*T)/f|0;M[1]=(v[1]*(f-T)+w[1]*T)/f|0;M[2]=(v[2]*(f-T)+w[2]*T)/f|0;s.push(M)}}p[0]=o[0];b[0]=c[0];p[f]=o[3];b[f]=c[1];p[m*g]=o[12];b[m*g]=c[2];p[m*g+f]=o[15];b[m*g+f]=c[3];e.figures[t]={type:"lattice",coords:p,colors:b,verticesPerRow:m}}function o(e){for(var t=e.coords[0][0],a=e.coords[0][1],r=t,i=a,n=1,s=e.coords.length;n<s;n++){var o=e.coords[n][0],c=e.coords[n][1];t=t>o?o:t;a=a>c?c:a;r=r<o?o:r;i=i<c?c:i}e.bounds=[t,a,r,i]}function c(t,a,c,f,g){if(!(0,n.isStream)(t))throw new r.FormatError("Mesh data is not a stream");var m=t.dict;this.matrix=a;this.shadingType=m.get("ShadingType");this.type="Pattern";const p=m.getArray("BBox");Array.isArray(p)&&4===p.length?this.bbox=r.Util.normalizeRect(p):this.bbox=null;var b=m.get("ColorSpace","CS");b=i.ColorSpace.parse(b,c,f,g);this.cs=b;this.background=m.has("Background")?b.getRgb(m.get("Background"),0):null;var y=m.get("Function"),v=y?g.createFromArray(y):null;this.coords=[];this.colors=[];this.figures=[];var w=new e(t,{bitsPerCoordinate:m.get("BitsPerCoordinate"),bitsPerComponent:m.get("BitsPerComponent"),bitsPerFlag:m.get("BitsPerFlag"),decode:m.getArray("Decode"),colorFn:v,colorSpace:b,numComps:v?1:b.numComps}),k=!1;switch(this.shadingType){case l:!function(e,t){for(var a=e.coords,i=e.colors,n=[],s=[],o=0;t.hasData;){var c=t.readFlag(),l=t.readCoordinate(),h=t.readComponents();if(0===o){if(!(0<=c&&c<=2))throw new r.FormatError("Unknown type4 flag");switch(c){case 0:o=3;break;case 1:s.push(s[s.length-2],s[s.length-1]);o=1;break;case 2:s.push(s[s.length-3],s[s.length-1]);o=1}n.push(c)}s.push(a.length);a.push(l);i.push(h);o--;t.align()}e.figures.push({type:"triangles",coords:new Int32Array(s),colors:new Int32Array(s)})}(this,w);break;case h:var S=0|m.get("VerticesPerRow");if(S<2)throw new r.FormatError("Invalid VerticesPerRow");!function(e,t,a){for(var r=e.coords,i=e.colors,n=[];t.hasData;){var s=t.readCoordinate(),o=t.readComponents();n.push(r.length);r.push(s);i.push(o)}e.figures.push({type:"lattice",coords:new Int32Array(n),colors:new Int32Array(n),verticesPerRow:a})}(this,w,S);break;case u:!function(e,t){for(var a=e.coords,i=e.colors,n=new Int32Array(16),s=new Int32Array(4);t.hasData;){var o,c,l=t.readFlag();if(!(0<=l&&l<=3))throw new r.FormatError("Unknown type6 flag");var h=a.length;for(o=0,c=0!==l?8:12;o<c;o++)a.push(t.readCoordinate());var u,d,f,g,m=i.length;for(o=0,c=0!==l?2:4;o<c;o++)i.push(t.readComponents());switch(l){case 0:n[12]=h+3;n[13]=h+4;n[14]=h+5;n[15]=h+6;n[8]=h+2;n[11]=h+7;n[4]=h+1;n[7]=h+8;n[0]=h;n[1]=h+11;n[2]=h+10;n[3]=h+9;s[2]=m+1;s[3]=m+2;s[0]=m;s[1]=m+3;break;case 1:u=n[12];d=n[13];f=n[14];g=n[15];n[12]=g;n[13]=h+0;n[14]=h+1;n[15]=h+2;n[8]=f;n[11]=h+3;n[4]=d;n[7]=h+4;n[0]=u;n[1]=h+7;n[2]=h+6;n[3]=h+5;u=s[2];d=s[3];s[2]=d;s[3]=m;s[0]=u;s[1]=m+1;break;case 2:u=n[15];d=n[11];n[12]=n[3];n[13]=h+0;n[14]=h+1;n[15]=h+2;n[8]=n[7];n[11]=h+3;n[4]=d;n[7]=h+4;n[0]=u;n[1]=h+7;n[2]=h+6;n[3]=h+5;u=s[3];s[2]=s[1];s[3]=m;s[0]=u;s[1]=m+1;break;case 3:n[12]=n[0];n[13]=h+0;n[14]=h+1;n[15]=h+2;n[8]=n[1];n[11]=h+3;n[4]=n[2];n[7]=h+4;n[0]=n[3];n[1]=h+7;n[2]=h+6;n[3]=h+5;s[2]=s[0];s[3]=m;s[0]=s[1];s[1]=m+1}n[5]=a.length;a.push([(-4*a[n[0]][0]-a[n[15]][0]+6*(a[n[4]][0]+a[n[1]][0])-2*(a[n[12]][0]+a[n[3]][0])+3*(a[n[13]][0]+a[n[7]][0]))/9,(-4*a[n[0]][1]-a[n[15]][1]+6*(a[n[4]][1]+a[n[1]][1])-2*(a[n[12]][1]+a[n[3]][1])+3*(a[n[13]][1]+a[n[7]][1]))/9]);n[6]=a.length;a.push([(-4*a[n[3]][0]-a[n[12]][0]+6*(a[n[2]][0]+a[n[7]][0])-2*(a[n[0]][0]+a[n[15]][0])+3*(a[n[4]][0]+a[n[14]][0]))/9,(-4*a[n[3]][1]-a[n[12]][1]+6*(a[n[2]][1]+a[n[7]][1])-2*(a[n[0]][1]+a[n[15]][1])+3*(a[n[4]][1]+a[n[14]][1]))/9]);n[9]=a.length;a.push([(-4*a[n[12]][0]-a[n[3]][0]+6*(a[n[8]][0]+a[n[13]][0])-2*(a[n[0]][0]+a[n[15]][0])+3*(a[n[11]][0]+a[n[1]][0]))/9,(-4*a[n[12]][1]-a[n[3]][1]+6*(a[n[8]][1]+a[n[13]][1])-2*(a[n[0]][1]+a[n[15]][1])+3*(a[n[11]][1]+a[n[1]][1]))/9]);n[10]=a.length;a.push([(-4*a[n[15]][0]-a[n[0]][0]+6*(a[n[11]][0]+a[n[14]][0])-2*(a[n[12]][0]+a[n[3]][0])+3*(a[n[2]][0]+a[n[8]][0]))/9,(-4*a[n[15]][1]-a[n[0]][1]+6*(a[n[11]][1]+a[n[14]][1])-2*(a[n[12]][1]+a[n[3]][1])+3*(a[n[2]][1]+a[n[8]][1]))/9]);e.figures.push({type:"patch",coords:new Int32Array(n),colors:new Int32Array(s)})}}(this,w);k=!0;break;case d:!function(e,t){for(var a=e.coords,i=e.colors,n=new Int32Array(16),s=new Int32Array(4);t.hasData;){var o,c,l=t.readFlag();if(!(0<=l&&l<=3))throw new r.FormatError("Unknown type7 flag");var h=a.length;for(o=0,c=0!==l?12:16;o<c;o++)a.push(t.readCoordinate());var u,d,f,g,m=i.length;for(o=0,c=0!==l?2:4;o<c;o++)i.push(t.readComponents());switch(l){case 0:n[12]=h+3;n[13]=h+4;n[14]=h+5;n[15]=h+6;n[8]=h+2;n[9]=h+13;n[10]=h+14;n[11]=h+7;n[4]=h+1;n[5]=h+12;n[6]=h+15;n[7]=h+8;n[0]=h;n[1]=h+11;n[2]=h+10;n[3]=h+9;s[2]=m+1;s[3]=m+2;s[0]=m;s[1]=m+3;break;case 1:u=n[12];d=n[13];f=n[14];g=n[15];n[12]=g;n[13]=h+0;n[14]=h+1;n[15]=h+2;n[8]=f;n[9]=h+9;n[10]=h+10;n[11]=h+3;n[4]=d;n[5]=h+8;n[6]=h+11;n[7]=h+4;n[0]=u;n[1]=h+7;n[2]=h+6;n[3]=h+5;u=s[2];d=s[3];s[2]=d;s[3]=m;s[0]=u;s[1]=m+1;break;case 2:u=n[15];d=n[11];n[12]=n[3];n[13]=h+0;n[14]=h+1;n[15]=h+2;n[8]=n[7];n[9]=h+9;n[10]=h+10;n[11]=h+3;n[4]=d;n[5]=h+8;n[6]=h+11;n[7]=h+4;n[0]=u;n[1]=h+7;n[2]=h+6;n[3]=h+5;u=s[3];s[2]=s[1];s[3]=m;s[0]=u;s[1]=m+1;break;case 3:n[12]=n[0];n[13]=h+0;n[14]=h+1;n[15]=h+2;n[8]=n[1];n[9]=h+9;n[10]=h+10;n[11]=h+3;n[4]=n[2];n[5]=h+8;n[6]=h+11;n[7]=h+4;n[0]=n[3];n[1]=h+7;n[2]=h+6;n[3]=h+5;s[2]=s[0];s[3]=m;s[0]=s[1];s[1]=m+1}e.figures.push({type:"patch",coords:new Int32Array(n),colors:new Int32Array(s)})}}(this,w);k=!0;break;default:(0,r.unreachable)("Unsupported mesh type.")}if(k){o(this);for(var C=0,x=this.figures.length;C<x;C++)s(this,C)}o(this);!function(e){var t,a,r,i,n=e.coords,s=new Float32Array(2*n.length);for(t=0,r=0,a=n.length;t<a;t++){var o=n[t];s[r++]=o[0];s[r++]=o[1]}e.coords=s;var c=e.colors,l=new Uint8Array(3*c.length);for(t=0,r=0,a=c.length;t<a;t++){var h=c[t];l[r++]=h[0];l[r++]=h[1];l[r++]=h[2]}e.colors=l;var u=e.figures;for(t=0,a=u.length;t<a;t++){var d=u[t],f=d.coords,g=d.colors;for(r=0,i=f.length;r<i;r++){f[r]*=2;g[r]*=3}}}(this)}c.prototype={getIR:function(){return["Mesh",this.shadingType,this.coords,this.colors,this.figures,this.bounds,this.matrix,this.bbox,this.background]}};return c}();g.Dummy=function(){function e(){this.type="Pattern"}e.prototype={getIR:function(){return["Dummy"]}};return e}()},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.bidi=function(e,t,a){var g=!0,m=e.length;if(0===m||a)return u(e,g,a);d.length=m;f.length=m;var p,b,y=0;for(p=0;p<m;++p){d[p]=e.charAt(p);var v=e.charCodeAt(p),w="L";v<=255?w=i[v]:1424<=v&&v<=1524?w="R":1536<=v&&v<=1791?(w=n[255&v])||(0,r.warn)("Bidi: invalid Unicode character "+v.toString(16)):1792<=v&&v<=2220&&(w="AL");"R"!==w&&"AL"!==w&&"AN"!==w||y++;f[p]=w}if(0===y)return u(e,g=!0);if(-1===t)if(y/m<.3){g=!0;t=0}else{g=!1;t=1}var k=[];for(p=0;p<m;++p)k[p]=t;var S,C=s(t)?"R":"L",x=C,A=x,I=x;for(p=0;p<m;++p)"NSM"===f[p]?f[p]=I:I=f[p];I=x;for(p=0;p<m;++p)"EN"===(S=f[p])?f[p]="AL"===I?"AN":"EN":"R"!==S&&"L"!==S&&"AL"!==S||(I=S);for(p=0;p<m;++p)"AL"===(S=f[p])&&(f[p]="R");for(p=1;p<m-1;++p){"ES"===f[p]&&"EN"===f[p-1]&&"EN"===f[p+1]&&(f[p]="EN");"CS"!==f[p]||"EN"!==f[p-1]&&"AN"!==f[p-1]||f[p+1]!==f[p-1]||(f[p]=f[p-1])}for(p=0;p<m;++p)if("EN"===f[p]){var F;for(F=p-1;F>=0&&"ET"===f[F];--F)f[F]="EN";for(F=p+1;F<m&&"ET"===f[F];++F)f[F]="EN"}for(p=0;p<m;++p)"WS"!==(S=f[p])&&"ES"!==S&&"ET"!==S&&"CS"!==S||(f[p]="ON");I=x;for(p=0;p<m;++p)"EN"===(S=f[p])?f[p]="L"===I?"L":"EN":"R"!==S&&"L"!==S||(I=S);for(p=0;p<m;++p)if("ON"===f[p]){var T=c(f,p+1,"ON"),E=x;p>0&&(E=f[p-1]);var O=A;T+1<m&&(O=f[T+1]);"L"!==E&&(E="R");"L"!==O&&(O="R");E===O&&l(f,p,T,E);p=T-1}for(p=0;p<m;++p)"ON"===f[p]&&(f[p]=C);for(p=0;p<m;++p){S=f[p];o(k[p])?"R"===S?k[p]+=1:"AN"!==S&&"EN"!==S||(k[p]+=2):"L"!==S&&"AN"!==S&&"EN"!==S||(k[p]+=1)}var P,B=-1,D=99;for(p=0,b=k.length;p<b;++p){P=k[p];B<P&&(B=P);D>P&&s(P)&&(D=P)}for(P=B;P>=D;--P){var N=-1;for(p=0,b=k.length;p<b;++p)if(k[p]<P){if(N>=0){h(d,N,p);N=-1}}else N<0&&(N=p);N>=0&&h(d,N,k.length)}for(p=0,b=d.length;p<b;++p){var M=d[p];"<"!==M&&">"!==M||(d[p]="")}return u(d.join(""),g)};var r=a(2),i=["BN","BN","BN","BN","BN","BN","BN","BN","BN","S","B","S","WS","B","BN","BN","BN","BN","BN","BN","BN","BN","BN","BN","BN","BN","BN","BN","B","B","B","S","WS","ON","ON","ET","ET","ET","ON","ON","ON","ON","ON","ES","CS","ES","CS","CS","EN","EN","EN","EN","EN","EN","EN","EN","EN","EN","CS","ON","ON","ON","ON","ON","ON","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","ON","ON","ON","ON","ON","ON","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","ON","ON","ON","ON","BN","BN","BN","BN","BN","BN","B","BN","BN","BN","BN","BN","BN","BN","BN","BN","BN","BN","BN","BN","BN","BN","BN","BN","BN","BN","BN","BN","BN","BN","BN","BN","BN","CS","ON","ET","ET","ET","ET","ON","ON","ON","ON","L","ON","ON","BN","ON","ON","ET","ET","EN","EN","ON","L","ON","ON","ON","EN","L","ON","ON","ON","ON","ON","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","ON","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","L","ON","L","L","L","L","L","L","L","L"],n=["AN","AN","AN","AN","AN","AN","ON","ON","AL","ET","ET","AL","CS","AL","ON","ON","NSM","NSM","NSM","NSM","NSM","NSM","NSM","NSM","NSM","NSM","NSM","AL","AL","","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","NSM","NSM","NSM","NSM","NSM","NSM","NSM","NSM","NSM","NSM","NSM","NSM","NSM","NSM","NSM","NSM","NSM","NSM","NSM","NSM","NSM","AN","AN","AN","AN","AN","AN","AN","AN","AN","AN","ET","AN","AN","AL","AL","AL","NSM","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","AL","NSM","NSM","NSM","NSM","NSM","NSM","NSM","AN","ON","NSM","NSM","NSM","NSM","NSM","NSM","AL","AL","NSM","NSM","ON","NSM","NSM","NSM","NSM","AL","AL","EN","EN","EN","EN","EN","EN","EN","EN","EN","EN","AL","AL","AL","AL","AL","AL"];function s(e){return 0!=(1&e)}function o(e){return 0==(1&e)}function c(e,t,a){for(var r=t,i=e.length;r<i;++r)if(e[r]!==a)return r;return r}function l(e,t,a,r){for(var i=t;i<a;++i)e[i]=r}function h(e,t,a){for(var r=t,i=a-1;r<i;++r,--i){var n=e[r];e[r]=e[i];e[i]=n}}function u(e,t,a=!1){let r="ltr";a?r="ttb":t||(r="rtl");return{str:e,dir:r}}var d=[],f=[]},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.getMetrics=void 0;var r=a(7),i=(0,r.getLookupTableFactory)((function(e){e.Courier=600;e["Courier-Bold"]=600;e["Courier-BoldOblique"]=600;e["Courier-Oblique"]=600;e.Helvetica=(0,r.getLookupTableFactory)((function(e){e.space=278;e.exclam=278;e.quotedbl=355;e.numbersign=556;e.dollar=556;e.percent=889;e.ampersand=667;e.quoteright=222;e.parenleft=333;e.parenright=333;e.asterisk=389;e.plus=584;e.comma=278;e.hyphen=333;e.period=278;e.slash=278;e.zero=556;e.one=556;e.two=556;e.three=556;e.four=556;e.five=556;e.six=556;e.seven=556;e.eight=556;e.nine=556;e.colon=278;e.semicolon=278;e.less=584;e.equal=584;e.greater=584;e.question=556;e.at=1015;e.A=667;e.B=667;e.C=722;e.D=722;e.E=667;e.F=611;e.G=778;e.H=722;e.I=278;e.J=500;e.K=667;e.L=556;e.M=833;e.N=722;e.O=778;e.P=667;e.Q=778;e.R=722;e.S=667;e.T=611;e.U=722;e.V=667;e.W=944;e.X=667;e.Y=667;e.Z=611;e.bracketleft=278;e.backslash=278;e.bracketright=278;e.asciicircum=469;e.underscore=556;e.quoteleft=222;e.a=556;e.b=556;e.c=500;e.d=556;e.e=556;e.f=278;e.g=556;e.h=556;e.i=222;e.j=222;e.k=500;e.l=222;e.m=833;e.n=556;e.o=556;e.p=556;e.q=556;e.r=333;e.s=500;e.t=278;e.u=556;e.v=500;e.w=722;e.x=500;e.y=500;e.z=500;e.braceleft=334;e.bar=260;e.braceright=334;e.asciitilde=584;e.exclamdown=333;e.cent=556;e.sterling=556;e.fraction=167;e.yen=556;e.florin=556;e.section=556;e.currency=556;e.quotesingle=191;e.quotedblleft=333;e.guillemotleft=556;e.guilsinglleft=333;e.guilsinglright=333;e.fi=500;e.fl=500;e.endash=556;e.dagger=556;e.daggerdbl=556;e.periodcentered=278;e.paragraph=537;e.bullet=350;e.quotesinglbase=222;e.quotedblbase=333;e.quotedblright=333;e.guillemotright=556;e.ellipsis=1e3;e.perthousand=1e3;e.questiondown=611;e.grave=333;e.acute=333;e.circumflex=333;e.tilde=333;e.macron=333;e.breve=333;e.dotaccent=333;e.dieresis=333;e.ring=333;e.cedilla=333;e.hungarumlaut=333;e.ogonek=333;e.caron=333;e.emdash=1e3;e.AE=1e3;e.ordfeminine=370;e.Lslash=556;e.Oslash=778;e.OE=1e3;e.ordmasculine=365;e.ae=889;e.dotlessi=278;e.lslash=222;e.oslash=611;e.oe=944;e.germandbls=611;e.Idieresis=278;e.eacute=556;e.abreve=556;e.uhungarumlaut=556;e.ecaron=556;e.Ydieresis=667;e.divide=584;e.Yacute=667;e.Acircumflex=667;e.aacute=556;e.Ucircumflex=722;e.yacute=500;e.scommaaccent=500;e.ecircumflex=556;e.Uring=722;e.Udieresis=722;e.aogonek=556;e.Uacute=722;e.uogonek=556;e.Edieresis=667;e.Dcroat=722;e.commaaccent=250;e.copyright=737;e.Emacron=667;e.ccaron=500;e.aring=556;e.Ncommaaccent=722;e.lacute=222;e.agrave=556;e.Tcommaaccent=611;e.Cacute=722;e.atilde=556;e.Edotaccent=667;e.scaron=500;e.scedilla=500;e.iacute=278;e.lozenge=471;e.Rcaron=722;e.Gcommaaccent=778;e.ucircumflex=556;e.acircumflex=556;e.Amacron=667;e.rcaron=333;e.ccedilla=500;e.Zdotaccent=611;e.Thorn=667;e.Omacron=778;e.Racute=722;e.Sacute=667;e.dcaron=643;e.Umacron=722;e.uring=556;e.threesuperior=333;e.Ograve=778;e.Agrave=667;e.Abreve=667;e.multiply=584;e.uacute=556;e.Tcaron=611;e.partialdiff=476;e.ydieresis=500;e.Nacute=722;e.icircumflex=278;e.Ecircumflex=667;e.adieresis=556;e.edieresis=556;e.cacute=500;e.nacute=556;e.umacron=556;e.Ncaron=722;e.Iacute=278;e.plusminus=584;e.brokenbar=260;e.registered=737;e.Gbreve=778;e.Idotaccent=278;e.summation=600;e.Egrave=667;e.racute=333;e.omacron=556;e.Zacute=611;e.Zcaron=611;e.greaterequal=549;e.Eth=722;e.Ccedilla=722;e.lcommaaccent=222;e.tcaron=317;e.eogonek=556;e.Uogonek=722;e.Aacute=667;e.Adieresis=667;e.egrave=556;e.zacute=500;e.iogonek=222;e.Oacute=778;e.oacute=556;e.amacron=556;e.sacute=500;e.idieresis=278;e.Ocircumflex=778;e.Ugrave=722;e.Delta=612;e.thorn=556;e.twosuperior=333;e.Odieresis=778;e.mu=556;e.igrave=278;e.ohungarumlaut=556;e.Eogonek=667;e.dcroat=556;e.threequarters=834;e.Scedilla=667;e.lcaron=299;e.Kcommaaccent=667;e.Lacute=556;e.trademark=1e3;e.edotaccent=556;e.Igrave=278;e.Imacron=278;e.Lcaron=556;e.onehalf=834;e.lessequal=549;e.ocircumflex=556;e.ntilde=556;e.Uhungarumlaut=722;e.Eacute=667;e.emacron=556;e.gbreve=556;e.onequarter=834;e.Scaron=667;e.Scommaaccent=667;e.Ohungarumlaut=778;e.degree=400;e.ograve=556;e.Ccaron=722;e.ugrave=556;e.radical=453;e.Dcaron=722;e.rcommaaccent=333;e.Ntilde=722;e.otilde=556;e.Rcommaaccent=722;e.Lcommaaccent=556;e.Atilde=667;e.Aogonek=667;e.Aring=667;e.Otilde=778;e.zdotaccent=500;e.Ecaron=667;e.Iogonek=278;e.kcommaaccent=500;e.minus=584;e.Icircumflex=278;e.ncaron=556;e.tcommaaccent=278;e.logicalnot=584;e.odieresis=556;e.udieresis=556;e.notequal=549;e.gcommaaccent=556;e.eth=556;e.zcaron=500;e.ncommaaccent=556;e.onesuperior=333;e.imacron=278;e.Euro=556}));e["Helvetica-Bold"]=(0,r.getLookupTableFactory)((function(e){e.space=278;e.exclam=333;e.quotedbl=474;e.numbersign=556;e.dollar=556;e.percent=889;e.ampersand=722;e.quoteright=278;e.parenleft=333;e.parenright=333;e.asterisk=389;e.plus=584;e.comma=278;e.hyphen=333;e.period=278;e.slash=278;e.zero=556;e.one=556;e.two=556;e.three=556;e.four=556;e.five=556;e.six=556;e.seven=556;e.eight=556;e.nine=556;e.colon=333;e.semicolon=333;e.less=584;e.equal=584;e.greater=584;e.question=611;e.at=975;e.A=722;e.B=722;e.C=722;e.D=722;e.E=667;e.F=611;e.G=778;e.H=722;e.I=278;e.J=556;e.K=722;e.L=611;e.M=833;e.N=722;e.O=778;e.P=667;e.Q=778;e.R=722;e.S=667;e.T=611;e.U=722;e.V=667;e.W=944;e.X=667;e.Y=667;e.Z=611;e.bracketleft=333;e.backslash=278;e.bracketright=333;e.asciicircum=584;e.underscore=556;e.quoteleft=278;e.a=556;e.b=611;e.c=556;e.d=611;e.e=556;e.f=333;e.g=611;e.h=611;e.i=278;e.j=278;e.k=556;e.l=278;e.m=889;e.n=611;e.o=611;e.p=611;e.q=611;e.r=389;e.s=556;e.t=333;e.u=611;e.v=556;e.w=778;e.x=556;e.y=556;e.z=500;e.braceleft=389;e.bar=280;e.braceright=389;e.asciitilde=584;e.exclamdown=333;e.cent=556;e.sterling=556;e.fraction=167;e.yen=556;e.florin=556;e.section=556;e.currency=556;e.quotesingle=238;e.quotedblleft=500;e.guillemotleft=556;e.guilsinglleft=333;e.guilsinglright=333;e.fi=611;e.fl=611;e.endash=556;e.dagger=556;e.daggerdbl=556;e.periodcentered=278;e.paragraph=556;e.bullet=350;e.quotesinglbase=278;e.quotedblbase=500;e.quotedblright=500;e.guillemotright=556;e.ellipsis=1e3;e.perthousand=1e3;e.questiondown=611;e.grave=333;e.acute=333;e.circumflex=333;e.tilde=333;e.macron=333;e.breve=333;e.dotaccent=333;e.dieresis=333;e.ring=333;e.cedilla=333;e.hungarumlaut=333;e.ogonek=333;e.caron=333;e.emdash=1e3;e.AE=1e3;e.ordfeminine=370;e.Lslash=611;e.Oslash=778;e.OE=1e3;e.ordmasculine=365;e.ae=889;e.dotlessi=278;e.lslash=278;e.oslash=611;e.oe=944;e.germandbls=611;e.Idieresis=278;e.eacute=556;e.abreve=556;e.uhungarumlaut=611;e.ecaron=556;e.Ydieresis=667;e.divide=584;e.Yacute=667;e.Acircumflex=722;e.aacute=556;e.Ucircumflex=722;e.yacute=556;e.scommaaccent=556;e.ecircumflex=556;e.Uring=722;e.Udieresis=722;e.aogonek=556;e.Uacute=722;e.uogonek=611;e.Edieresis=667;e.Dcroat=722;e.commaaccent=250;e.copyright=737;e.Emacron=667;e.ccaron=556;e.aring=556;e.Ncommaaccent=722;e.lacute=278;e.agrave=556;e.Tcommaaccent=611;e.Cacute=722;e.atilde=556;e.Edotaccent=667;e.scaron=556;e.scedilla=556;e.iacute=278;e.lozenge=494;e.Rcaron=722;e.Gcommaaccent=778;e.ucircumflex=611;e.acircumflex=556;e.Amacron=722;e.rcaron=389;e.ccedilla=556;e.Zdotaccent=611;e.Thorn=667;e.Omacron=778;e.Racute=722;e.Sacute=667;e.dcaron=743;e.Umacron=722;e.uring=611;e.threesuperior=333;e.Ograve=778;e.Agrave=722;e.Abreve=722;e.multiply=584;e.uacute=611;e.Tcaron=611;e.partialdiff=494;e.ydieresis=556;e.Nacute=722;e.icircumflex=278;e.Ecircumflex=667;e.adieresis=556;e.edieresis=556;e.cacute=556;e.nacute=611;e.umacron=611;e.Ncaron=722;e.Iacute=278;e.plusminus=584;e.brokenbar=280;e.registered=737;e.Gbreve=778;e.Idotaccent=278;e.summation=600;e.Egrave=667;e.racute=389;e.omacron=611;e.Zacute=611;e.Zcaron=611;e.greaterequal=549;e.Eth=722;e.Ccedilla=722;e.lcommaaccent=278;e.tcaron=389;e.eogonek=556;e.Uogonek=722;e.Aacute=722;e.Adieresis=722;e.egrave=556;e.zacute=500;e.iogonek=278;e.Oacute=778;e.oacute=611;e.amacron=556;e.sacute=556;e.idieresis=278;e.Ocircumflex=778;e.Ugrave=722;e.Delta=612;e.thorn=611;e.twosuperior=333;e.Odieresis=778;e.mu=611;e.igrave=278;e.ohungarumlaut=611;e.Eogonek=667;e.dcroat=611;e.threequarters=834;e.Scedilla=667;e.lcaron=400;e.Kcommaaccent=722;e.Lacute=611;e.trademark=1e3;e.edotaccent=556;e.Igrave=278;e.Imacron=278;e.Lcaron=611;e.onehalf=834;e.lessequal=549;e.ocircumflex=611;e.ntilde=611;e.Uhungarumlaut=722;e.Eacute=667;e.emacron=556;e.gbreve=611;e.onequarter=834;e.Scaron=667;e.Scommaaccent=667;e.Ohungarumlaut=778;e.degree=400;e.ograve=611;e.Ccaron=722;e.ugrave=611;e.radical=549;e.Dcaron=722;e.rcommaaccent=389;e.Ntilde=722;e.otilde=611;e.Rcommaaccent=722;e.Lcommaaccent=611;e.Atilde=722;e.Aogonek=722;e.Aring=722;e.Otilde=778;e.zdotaccent=500;e.Ecaron=667;e.Iogonek=278;e.kcommaaccent=556;e.minus=584;e.Icircumflex=278;e.ncaron=611;e.tcommaaccent=333;e.logicalnot=584;e.odieresis=611;e.udieresis=611;e.notequal=549;e.gcommaaccent=611;e.eth=611;e.zcaron=500;e.ncommaaccent=611;e.onesuperior=333;e.imacron=278;e.Euro=556}));e["Helvetica-BoldOblique"]=(0,r.getLookupTableFactory)((function(e){e.space=278;e.exclam=333;e.quotedbl=474;e.numbersign=556;e.dollar=556;e.percent=889;e.ampersand=722;e.quoteright=278;e.parenleft=333;e.parenright=333;e.asterisk=389;e.plus=584;e.comma=278;e.hyphen=333;e.period=278;e.slash=278;e.zero=556;e.one=556;e.two=556;e.three=556;e.four=556;e.five=556;e.six=556;e.seven=556;e.eight=556;e.nine=556;e.colon=333;e.semicolon=333;e.less=584;e.equal=584;e.greater=584;e.question=611;e.at=975;e.A=722;e.B=722;e.C=722;e.D=722;e.E=667;e.F=611;e.G=778;e.H=722;e.I=278;e.J=556;e.K=722;e.L=611;e.M=833;e.N=722;e.O=778;e.P=667;e.Q=778;e.R=722;e.S=667;e.T=611;e.U=722;e.V=667;e.W=944;e.X=667;e.Y=667;e.Z=611;e.bracketleft=333;e.backslash=278;e.bracketright=333;e.asciicircum=584;e.underscore=556;e.quoteleft=278;e.a=556;e.b=611;e.c=556;e.d=611;e.e=556;e.f=333;e.g=611;e.h=611;e.i=278;e.j=278;e.k=556;e.l=278;e.m=889;e.n=611;e.o=611;e.p=611;e.q=611;e.r=389;e.s=556;e.t=333;e.u=611;e.v=556;e.w=778;e.x=556;e.y=556;e.z=500;e.braceleft=389;e.bar=280;e.braceright=389;e.asciitilde=584;e.exclamdown=333;e.cent=556;e.sterling=556;e.fraction=167;e.yen=556;e.florin=556;e.section=556;e.currency=556;e.quotesingle=238;e.quotedblleft=500;e.guillemotleft=556;e.guilsinglleft=333;e.guilsinglright=333;e.fi=611;e.fl=611;e.endash=556;e.dagger=556;e.daggerdbl=556;e.periodcentered=278;e.paragraph=556;e.bullet=350;e.quotesinglbase=278;e.quotedblbase=500;e.quotedblright=500;e.guillemotright=556;e.ellipsis=1e3;e.perthousand=1e3;e.questiondown=611;e.grave=333;e.acute=333;e.circumflex=333;e.tilde=333;e.macron=333;e.breve=333;e.dotaccent=333;e.dieresis=333;e.ring=333;e.cedilla=333;e.hungarumlaut=333;e.ogonek=333;e.caron=333;e.emdash=1e3;e.AE=1e3;e.ordfeminine=370;e.Lslash=611;e.Oslash=778;e.OE=1e3;e.ordmasculine=365;e.ae=889;e.dotlessi=278;e.lslash=278;e.oslash=611;e.oe=944;e.germandbls=611;e.Idieresis=278;e.eacute=556;e.abreve=556;e.uhungarumlaut=611;e.ecaron=556;e.Ydieresis=667;e.divide=584;e.Yacute=667;e.Acircumflex=722;e.aacute=556;e.Ucircumflex=722;e.yacute=556;e.scommaaccent=556;e.ecircumflex=556;e.Uring=722;e.Udieresis=722;e.aogonek=556;e.Uacute=722;e.uogonek=611;e.Edieresis=667;e.Dcroat=722;e.commaaccent=250;e.copyright=737;e.Emacron=667;e.ccaron=556;e.aring=556;e.Ncommaaccent=722;e.lacute=278;e.agrave=556;e.Tcommaaccent=611;e.Cacute=722;e.atilde=556;e.Edotaccent=667;e.scaron=556;e.scedilla=556;e.iacute=278;e.lozenge=494;e.Rcaron=722;e.Gcommaaccent=778;e.ucircumflex=611;e.acircumflex=556;e.Amacron=722;e.rcaron=389;e.ccedilla=556;e.Zdotaccent=611;e.Thorn=667;e.Omacron=778;e.Racute=722;e.Sacute=667;e.dcaron=743;e.Umacron=722;e.uring=611;e.threesuperior=333;e.Ograve=778;e.Agrave=722;e.Abreve=722;e.multiply=584;e.uacute=611;e.Tcaron=611;e.partialdiff=494;e.ydieresis=556;e.Nacute=722;e.icircumflex=278;e.Ecircumflex=667;e.adieresis=556;e.edieresis=556;e.cacute=556;e.nacute=611;e.umacron=611;e.Ncaron=722;e.Iacute=278;e.plusminus=584;e.brokenbar=280;e.registered=737;e.Gbreve=778;e.Idotaccent=278;e.summation=600;e.Egrave=667;e.racute=389;e.omacron=611;e.Zacute=611;e.Zcaron=611;e.greaterequal=549;e.Eth=722;e.Ccedilla=722;e.lcommaaccent=278;e.tcaron=389;e.eogonek=556;e.Uogonek=722;e.Aacute=722;e.Adieresis=722;e.egrave=556;e.zacute=500;e.iogonek=278;e.Oacute=778;e.oacute=611;e.amacron=556;e.sacute=556;e.idieresis=278;e.Ocircumflex=778;e.Ugrave=722;e.Delta=612;e.thorn=611;e.twosuperior=333;e.Odieresis=778;e.mu=611;e.igrave=278;e.ohungarumlaut=611;e.Eogonek=667;e.dcroat=611;e.threequarters=834;e.Scedilla=667;e.lcaron=400;e.Kcommaaccent=722;e.Lacute=611;e.trademark=1e3;e.edotaccent=556;e.Igrave=278;e.Imacron=278;e.Lcaron=611;e.onehalf=834;e.lessequal=549;e.ocircumflex=611;e.ntilde=611;e.Uhungarumlaut=722;e.Eacute=667;e.emacron=556;e.gbreve=611;e.onequarter=834;e.Scaron=667;e.Scommaaccent=667;e.Ohungarumlaut=778;e.degree=400;e.ograve=611;e.Ccaron=722;e.ugrave=611;e.radical=549;e.Dcaron=722;e.rcommaaccent=389;e.Ntilde=722;e.otilde=611;e.Rcommaaccent=722;e.Lcommaaccent=611;e.Atilde=722;e.Aogonek=722;e.Aring=722;e.Otilde=778;e.zdotaccent=500;e.Ecaron=667;e.Iogonek=278;e.kcommaaccent=556;e.minus=584;e.Icircumflex=278;e.ncaron=611;e.tcommaaccent=333;e.logicalnot=584;e.odieresis=611;e.udieresis=611;e.notequal=549;e.gcommaaccent=611;e.eth=611;e.zcaron=500;e.ncommaaccent=611;e.onesuperior=333;e.imacron=278;e.Euro=556}));e["Helvetica-Oblique"]=(0,r.getLookupTableFactory)((function(e){e.space=278;e.exclam=278;e.quotedbl=355;e.numbersign=556;e.dollar=556;e.percent=889;e.ampersand=667;e.quoteright=222;e.parenleft=333;e.parenright=333;e.asterisk=389;e.plus=584;e.comma=278;e.hyphen=333;e.period=278;e.slash=278;e.zero=556;e.one=556;e.two=556;e.three=556;e.four=556;e.five=556;e.six=556;e.seven=556;e.eight=556;e.nine=556;e.colon=278;e.semicolon=278;e.less=584;e.equal=584;e.greater=584;e.question=556;e.at=1015;e.A=667;e.B=667;e.C=722;e.D=722;e.E=667;e.F=611;e.G=778;e.H=722;e.I=278;e.J=500;e.K=667;e.L=556;e.M=833;e.N=722;e.O=778;e.P=667;e.Q=778;e.R=722;e.S=667;e.T=611;e.U=722;e.V=667;e.W=944;e.X=667;e.Y=667;e.Z=611;e.bracketleft=278;e.backslash=278;e.bracketright=278;e.asciicircum=469;e.underscore=556;e.quoteleft=222;e.a=556;e.b=556;e.c=500;e.d=556;e.e=556;e.f=278;e.g=556;e.h=556;e.i=222;e.j=222;e.k=500;e.l=222;e.m=833;e.n=556;e.o=556;e.p=556;e.q=556;e.r=333;e.s=500;e.t=278;e.u=556;e.v=500;e.w=722;e.x=500;e.y=500;e.z=500;e.braceleft=334;e.bar=260;e.braceright=334;e.asciitilde=584;e.exclamdown=333;e.cent=556;e.sterling=556;e.fraction=167;e.yen=556;e.florin=556;e.section=556;e.currency=556;e.quotesingle=191;e.quotedblleft=333;e.guillemotleft=556;e.guilsinglleft=333;e.guilsinglright=333;e.fi=500;e.fl=500;e.endash=556;e.dagger=556;e.daggerdbl=556;e.periodcentered=278;e.paragraph=537;e.bullet=350;e.quotesinglbase=222;e.quotedblbase=333;e.quotedblright=333;e.guillemotright=556;e.ellipsis=1e3;e.perthousand=1e3;e.questiondown=611;e.grave=333;e.acute=333;e.circumflex=333;e.tilde=333;e.macron=333;e.breve=333;e.dotaccent=333;e.dieresis=333;e.ring=333;e.cedilla=333;e.hungarumlaut=333;e.ogonek=333;e.caron=333;e.emdash=1e3;e.AE=1e3;e.ordfeminine=370;e.Lslash=556;e.Oslash=778;e.OE=1e3;e.ordmasculine=365;e.ae=889;e.dotlessi=278;e.lslash=222;e.oslash=611;e.oe=944;e.germandbls=611;e.Idieresis=278;e.eacute=556;e.abreve=556;e.uhungarumlaut=556;e.ecaron=556;e.Ydieresis=667;e.divide=584;e.Yacute=667;e.Acircumflex=667;e.aacute=556;e.Ucircumflex=722;e.yacute=500;e.scommaaccent=500;e.ecircumflex=556;e.Uring=722;e.Udieresis=722;e.aogonek=556;e.Uacute=722;e.uogonek=556;e.Edieresis=667;e.Dcroat=722;e.commaaccent=250;e.copyright=737;e.Emacron=667;e.ccaron=500;e.aring=556;e.Ncommaaccent=722;e.lacute=222;e.agrave=556;e.Tcommaaccent=611;e.Cacute=722;e.atilde=556;e.Edotaccent=667;e.scaron=500;e.scedilla=500;e.iacute=278;e.lozenge=471;e.Rcaron=722;e.Gcommaaccent=778;e.ucircumflex=556;e.acircumflex=556;e.Amacron=667;e.rcaron=333;e.ccedilla=500;e.Zdotaccent=611;e.Thorn=667;e.Omacron=778;e.Racute=722;e.Sacute=667;e.dcaron=643;e.Umacron=722;e.uring=556;e.threesuperior=333;e.Ograve=778;e.Agrave=667;e.Abreve=667;e.multiply=584;e.uacute=556;e.Tcaron=611;e.partialdiff=476;e.ydieresis=500;e.Nacute=722;e.icircumflex=278;e.Ecircumflex=667;e.adieresis=556;e.edieresis=556;e.cacute=500;e.nacute=556;e.umacron=556;e.Ncaron=722;e.Iacute=278;e.plusminus=584;e.brokenbar=260;e.registered=737;e.Gbreve=778;e.Idotaccent=278;e.summation=600;e.Egrave=667;e.racute=333;e.omacron=556;e.Zacute=611;e.Zcaron=611;e.greaterequal=549;e.Eth=722;e.Ccedilla=722;e.lcommaaccent=222;e.tcaron=317;e.eogonek=556;e.Uogonek=722;e.Aacute=667;e.Adieresis=667;e.egrave=556;e.zacute=500;e.iogonek=222;e.Oacute=778;e.oacute=556;e.amacron=556;e.sacute=500;e.idieresis=278;e.Ocircumflex=778;e.Ugrave=722;e.Delta=612;e.thorn=556;e.twosuperior=333;e.Odieresis=778;e.mu=556;e.igrave=278;e.ohungarumlaut=556;e.Eogonek=667;e.dcroat=556;e.threequarters=834;e.Scedilla=667;e.lcaron=299;e.Kcommaaccent=667;e.Lacute=556;e.trademark=1e3;e.edotaccent=556;e.Igrave=278;e.Imacron=278;e.Lcaron=556;e.onehalf=834;e.lessequal=549;e.ocircumflex=556;e.ntilde=556;e.Uhungarumlaut=722;e.Eacute=667;e.emacron=556;e.gbreve=556;e.onequarter=834;e.Scaron=667;e.Scommaaccent=667;e.Ohungarumlaut=778;e.degree=400;e.ograve=556;e.Ccaron=722;e.ugrave=556;e.radical=453;e.Dcaron=722;e.rcommaaccent=333;e.Ntilde=722;e.otilde=556;e.Rcommaaccent=722;e.Lcommaaccent=556;e.Atilde=667;e.Aogonek=667;e.Aring=667;e.Otilde=778;e.zdotaccent=500;e.Ecaron=667;e.Iogonek=278;e.kcommaaccent=500;e.minus=584;e.Icircumflex=278;e.ncaron=556;e.tcommaaccent=278;e.logicalnot=584;e.odieresis=556;e.udieresis=556;e.notequal=549;e.gcommaaccent=556;e.eth=556;e.zcaron=500;e.ncommaaccent=556;e.onesuperior=333;e.imacron=278;e.Euro=556}));e.Symbol=(0,r.getLookupTableFactory)((function(e){e.space=250;e.exclam=333;e.universal=713;e.numbersign=500;e.existential=549;e.percent=833;e.ampersand=778;e.suchthat=439;e.parenleft=333;e.parenright=333;e.asteriskmath=500;e.plus=549;e.comma=250;e.minus=549;e.period=250;e.slash=278;e.zero=500;e.one=500;e.two=500;e.three=500;e.four=500;e.five=500;e.six=500;e.seven=500;e.eight=500;e.nine=500;e.colon=278;e.semicolon=278;e.less=549;e.equal=549;e.greater=549;e.question=444;e.congruent=549;e.Alpha=722;e.Beta=667;e.Chi=722;e.Delta=612;e.Epsilon=611;e.Phi=763;e.Gamma=603;e.Eta=722;e.Iota=333;e.theta1=631;e.Kappa=722;e.Lambda=686;e.Mu=889;e.Nu=722;e.Omicron=722;e.Pi=768;e.Theta=741;e.Rho=556;e.Sigma=592;e.Tau=611;e.Upsilon=690;e.sigma1=439;e.Omega=768;e.Xi=645;e.Psi=795;e.Zeta=611;e.bracketleft=333;e.therefore=863;e.bracketright=333;e.perpendicular=658;e.underscore=500;e.radicalex=500;e.alpha=631;e.beta=549;e.chi=549;e.delta=494;e.epsilon=439;e.phi=521;e.gamma=411;e.eta=603;e.iota=329;e.phi1=603;e.kappa=549;e.lambda=549;e.mu=576;e.nu=521;e.omicron=549;e.pi=549;e.theta=521;e.rho=549;e.sigma=603;e.tau=439;e.upsilon=576;e.omega1=713;e.omega=686;e.xi=493;e.psi=686;e.zeta=494;e.braceleft=480;e.bar=200;e.braceright=480;e.similar=549;e.Euro=750;e.Upsilon1=620;e.minute=247;e.lessequal=549;e.fraction=167;e.infinity=713;e.florin=500;e.club=753;e.diamond=753;e.heart=753;e.spade=753;e.arrowboth=1042;e.arrowleft=987;e.arrowup=603;e.arrowright=987;e.arrowdown=603;e.degree=400;e.plusminus=549;e.second=411;e.greaterequal=549;e.multiply=549;e.proportional=713;e.partialdiff=494;e.bullet=460;e.divide=549;e.notequal=549;e.equivalence=549;e.approxequal=549;e.ellipsis=1e3;e.arrowvertex=603;e.arrowhorizex=1e3;e.carriagereturn=658;e.aleph=823;e.Ifraktur=686;e.Rfraktur=795;e.weierstrass=987;e.circlemultiply=768;e.circleplus=768;e.emptyset=823;e.intersection=768;e.union=768;e.propersuperset=713;e.reflexsuperset=713;e.notsubset=713;e.propersubset=713;e.reflexsubset=713;e.element=713;e.notelement=713;e.angle=768;e.gradient=713;e.registerserif=790;e.copyrightserif=790;e.trademarkserif=890;e.product=823;e.radical=549;e.dotmath=250;e.logicalnot=713;e.logicaland=603;e.logicalor=603;e.arrowdblboth=1042;e.arrowdblleft=987;e.arrowdblup=603;e.arrowdblright=987;e.arrowdbldown=603;e.lozenge=494;e.angleleft=329;e.registersans=790;e.copyrightsans=790;e.trademarksans=786;e.summation=713;e.parenlefttp=384;e.parenleftex=384;e.parenleftbt=384;e.bracketlefttp=384;e.bracketleftex=384;e.bracketleftbt=384;e.bracelefttp=494;e.braceleftmid=494;e.braceleftbt=494;e.braceex=494;e.angleright=329;e.integral=274;e.integraltp=686;e.integralex=686;e.integralbt=686;e.parenrighttp=384;e.parenrightex=384;e.parenrightbt=384;e.bracketrighttp=384;e.bracketrightex=384;e.bracketrightbt=384;e.bracerighttp=494;e.bracerightmid=494;e.bracerightbt=494;e.apple=790}));e["Times-Roman"]=(0,r.getLookupTableFactory)((function(e){e.space=250;e.exclam=333;e.quotedbl=408;e.numbersign=500;e.dollar=500;e.percent=833;e.ampersand=778;e.quoteright=333;e.parenleft=333;e.parenright=333;e.asterisk=500;e.plus=564;e.comma=250;e.hyphen=333;e.period=250;e.slash=278;e.zero=500;e.one=500;e.two=500;e.three=500;e.four=500;e.five=500;e.six=500;e.seven=500;e.eight=500;e.nine=500;e.colon=278;e.semicolon=278;e.less=564;e.equal=564;e.greater=564;e.question=444;e.at=921;e.A=722;e.B=667;e.C=667;e.D=722;e.E=611;e.F=556;e.G=722;e.H=722;e.I=333;e.J=389;e.K=722;e.L=611;e.M=889;e.N=722;e.O=722;e.P=556;e.Q=722;e.R=667;e.S=556;e.T=611;e.U=722;e.V=722;e.W=944;e.X=722;e.Y=722;e.Z=611;e.bracketleft=333;e.backslash=278;e.bracketright=333;e.asciicircum=469;e.underscore=500;e.quoteleft=333;e.a=444;e.b=500;e.c=444;e.d=500;e.e=444;e.f=333;e.g=500;e.h=500;e.i=278;e.j=278;e.k=500;e.l=278;e.m=778;e.n=500;e.o=500;e.p=500;e.q=500;e.r=333;e.s=389;e.t=278;e.u=500;e.v=500;e.w=722;e.x=500;e.y=500;e.z=444;e.braceleft=480;e.bar=200;e.braceright=480;e.asciitilde=541;e.exclamdown=333;e.cent=500;e.sterling=500;e.fraction=167;e.yen=500;e.florin=500;e.section=500;e.currency=500;e.quotesingle=180;e.quotedblleft=444;e.guillemotleft=500;e.guilsinglleft=333;e.guilsinglright=333;e.fi=556;e.fl=556;e.endash=500;e.dagger=500;e.daggerdbl=500;e.periodcentered=250;e.paragraph=453;e.bullet=350;e.quotesinglbase=333;e.quotedblbase=444;e.quotedblright=444;e.guillemotright=500;e.ellipsis=1e3;e.perthousand=1e3;e.questiondown=444;e.grave=333;e.acute=333;e.circumflex=333;e.tilde=333;e.macron=333;e.breve=333;e.dotaccent=333;e.dieresis=333;e.ring=333;e.cedilla=333;e.hungarumlaut=333;e.ogonek=333;e.caron=333;e.emdash=1e3;e.AE=889;e.ordfeminine=276;e.Lslash=611;e.Oslash=722;e.OE=889;e.ordmasculine=310;e.ae=667;e.dotlessi=278;e.lslash=278;e.oslash=500;e.oe=722;e.germandbls=500;e.Idieresis=333;e.eacute=444;e.abreve=444;e.uhungarumlaut=500;e.ecaron=444;e.Ydieresis=722;e.divide=564;e.Yacute=722;e.Acircumflex=722;e.aacute=444;e.Ucircumflex=722;e.yacute=500;e.scommaaccent=389;e.ecircumflex=444;e.Uring=722;e.Udieresis=722;e.aogonek=444;e.Uacute=722;e.uogonek=500;e.Edieresis=611;e.Dcroat=722;e.commaaccent=250;e.copyright=760;e.Emacron=611;e.ccaron=444;e.aring=444;e.Ncommaaccent=722;e.lacute=278;e.agrave=444;e.Tcommaaccent=611;e.Cacute=667;e.atilde=444;e.Edotaccent=611;e.scaron=389;e.scedilla=389;e.iacute=278;e.lozenge=471;e.Rcaron=667;e.Gcommaaccent=722;e.ucircumflex=500;e.acircumflex=444;e.Amacron=722;e.rcaron=333;e.ccedilla=444;e.Zdotaccent=611;e.Thorn=556;e.Omacron=722;e.Racute=667;e.Sacute=556;e.dcaron=588;e.Umacron=722;e.uring=500;e.threesuperior=300;e.Ograve=722;e.Agrave=722;e.Abreve=722;e.multiply=564;e.uacute=500;e.Tcaron=611;e.partialdiff=476;e.ydieresis=500;e.Nacute=722;e.icircumflex=278;e.Ecircumflex=611;e.adieresis=444;e.edieresis=444;e.cacute=444;e.nacute=500;e.umacron=500;e.Ncaron=722;e.Iacute=333;e.plusminus=564;e.brokenbar=200;e.registered=760;e.Gbreve=722;e.Idotaccent=333;e.summation=600;e.Egrave=611;e.racute=333;e.omacron=500;e.Zacute=611;e.Zcaron=611;e.greaterequal=549;e.Eth=722;e.Ccedilla=667;e.lcommaaccent=278;e.tcaron=326;e.eogonek=444;e.Uogonek=722;e.Aacute=722;e.Adieresis=722;e.egrave=444;e.zacute=444;e.iogonek=278;e.Oacute=722;e.oacute=500;e.amacron=444;e.sacute=389;e.idieresis=278;e.Ocircumflex=722;e.Ugrave=722;e.Delta=612;e.thorn=500;e.twosuperior=300;e.Odieresis=722;e.mu=500;e.igrave=278;e.ohungarumlaut=500;e.Eogonek=611;e.dcroat=500;e.threequarters=750;e.Scedilla=556;e.lcaron=344;e.Kcommaaccent=722;e.Lacute=611;e.trademark=980;e.edotaccent=444;e.Igrave=333;e.Imacron=333;e.Lcaron=611;e.onehalf=750;e.lessequal=549;e.ocircumflex=500;e.ntilde=500;e.Uhungarumlaut=722;e.Eacute=611;e.emacron=444;e.gbreve=500;e.onequarter=750;e.Scaron=556;e.Scommaaccent=556;e.Ohungarumlaut=722;e.degree=400;e.ograve=500;e.Ccaron=667;e.ugrave=500;e.radical=453;e.Dcaron=722;e.rcommaaccent=333;e.Ntilde=722;e.otilde=500;e.Rcommaaccent=667;e.Lcommaaccent=611;e.Atilde=722;e.Aogonek=722;e.Aring=722;e.Otilde=722;e.zdotaccent=444;e.Ecaron=611;e.Iogonek=333;e.kcommaaccent=500;e.minus=564;e.Icircumflex=333;e.ncaron=500;e.tcommaaccent=278;e.logicalnot=564;e.odieresis=500;e.udieresis=500;e.notequal=549;e.gcommaaccent=500;e.eth=500;e.zcaron=444;e.ncommaaccent=500;e.onesuperior=300;e.imacron=278;e.Euro=500}));e["Times-Bold"]=(0,r.getLookupTableFactory)((function(e){e.space=250;e.exclam=333;e.quotedbl=555;e.numbersign=500;e.dollar=500;e.percent=1e3;e.ampersand=833;e.quoteright=333;e.parenleft=333;e.parenright=333;e.asterisk=500;e.plus=570;e.comma=250;e.hyphen=333;e.period=250;e.slash=278;e.zero=500;e.one=500;e.two=500;e.three=500;e.four=500;e.five=500;e.six=500;e.seven=500;e.eight=500;e.nine=500;e.colon=333;e.semicolon=333;e.less=570;e.equal=570;e.greater=570;e.question=500;e.at=930;e.A=722;e.B=667;e.C=722;e.D=722;e.E=667;e.F=611;e.G=778;e.H=778;e.I=389;e.J=500;e.K=778;e.L=667;e.M=944;e.N=722;e.O=778;e.P=611;e.Q=778;e.R=722;e.S=556;e.T=667;e.U=722;e.V=722;e.W=1e3;e.X=722;e.Y=722;e.Z=667;e.bracketleft=333;e.backslash=278;e.bracketright=333;e.asciicircum=581;e.underscore=500;e.quoteleft=333;e.a=500;e.b=556;e.c=444;e.d=556;e.e=444;e.f=333;e.g=500;e.h=556;e.i=278;e.j=333;e.k=556;e.l=278;e.m=833;e.n=556;e.o=500;e.p=556;e.q=556;e.r=444;e.s=389;e.t=333;e.u=556;e.v=500;e.w=722;e.x=500;e.y=500;e.z=444;e.braceleft=394;e.bar=220;e.braceright=394;e.asciitilde=520;e.exclamdown=333;e.cent=500;e.sterling=500;e.fraction=167;e.yen=500;e.florin=500;e.section=500;e.currency=500;e.quotesingle=278;e.quotedblleft=500;e.guillemotleft=500;e.guilsinglleft=333;e.guilsinglright=333;e.fi=556;e.fl=556;e.endash=500;e.dagger=500;e.daggerdbl=500;e.periodcentered=250;e.paragraph=540;e.bullet=350;e.quotesinglbase=333;e.quotedblbase=500;e.quotedblright=500;e.guillemotright=500;e.ellipsis=1e3;e.perthousand=1e3;e.questiondown=500;e.grave=333;e.acute=333;e.circumflex=333;e.tilde=333;e.macron=333;e.breve=333;e.dotaccent=333;e.dieresis=333;e.ring=333;e.cedilla=333;e.hungarumlaut=333;e.ogonek=333;e.caron=333;e.emdash=1e3;e.AE=1e3;e.ordfeminine=300;e.Lslash=667;e.Oslash=778;e.OE=1e3;e.ordmasculine=330;e.ae=722;e.dotlessi=278;e.lslash=278;e.oslash=500;e.oe=722;e.germandbls=556;e.Idieresis=389;e.eacute=444;e.abreve=500;e.uhungarumlaut=556;e.ecaron=444;e.Ydieresis=722;e.divide=570;e.Yacute=722;e.Acircumflex=722;e.aacute=500;e.Ucircumflex=722;e.yacute=500;e.scommaaccent=389;e.ecircumflex=444;e.Uring=722;e.Udieresis=722;e.aogonek=500;e.Uacute=722;e.uogonek=556;e.Edieresis=667;e.Dcroat=722;e.commaaccent=250;e.copyright=747;e.Emacron=667;e.ccaron=444;e.aring=500;e.Ncommaaccent=722;e.lacute=278;e.agrave=500;e.Tcommaaccent=667;e.Cacute=722;e.atilde=500;e.Edotaccent=667;e.scaron=389;e.scedilla=389;e.iacute=278;e.lozenge=494;e.Rcaron=722;e.Gcommaaccent=778;e.ucircumflex=556;e.acircumflex=500;e.Amacron=722;e.rcaron=444;e.ccedilla=444;e.Zdotaccent=667;e.Thorn=611;e.Omacron=778;e.Racute=722;e.Sacute=556;e.dcaron=672;e.Umacron=722;e.uring=556;e.threesuperior=300;e.Ograve=778;e.Agrave=722;e.Abreve=722;e.multiply=570;e.uacute=556;e.Tcaron=667;e.partialdiff=494;e.ydieresis=500;e.Nacute=722;e.icircumflex=278;e.Ecircumflex=667;e.adieresis=500;e.edieresis=444;e.cacute=444;e.nacute=556;e.umacron=556;e.Ncaron=722;e.Iacute=389;e.plusminus=570;e.brokenbar=220;e.registered=747;e.Gbreve=778;e.Idotaccent=389;e.summation=600;e.Egrave=667;e.racute=444;e.omacron=500;e.Zacute=667;e.Zcaron=667;e.greaterequal=549;e.Eth=722;e.Ccedilla=722;e.lcommaaccent=278;e.tcaron=416;e.eogonek=444;e.Uogonek=722;e.Aacute=722;e.Adieresis=722;e.egrave=444;e.zacute=444;e.iogonek=278;e.Oacute=778;e.oacute=500;e.amacron=500;e.sacute=389;e.idieresis=278;e.Ocircumflex=778;e.Ugrave=722;e.Delta=612;e.thorn=556;e.twosuperior=300;e.Odieresis=778;e.mu=556;e.igrave=278;e.ohungarumlaut=500;e.Eogonek=667;e.dcroat=556;e.threequarters=750;e.Scedilla=556;e.lcaron=394;e.Kcommaaccent=778;e.Lacute=667;e.trademark=1e3;e.edotaccent=444;e.Igrave=389;e.Imacron=389;e.Lcaron=667;e.onehalf=750;e.lessequal=549;e.ocircumflex=500;e.ntilde=556;e.Uhungarumlaut=722;e.Eacute=667;e.emacron=444;e.gbreve=500;e.onequarter=750;e.Scaron=556;e.Scommaaccent=556;e.Ohungarumlaut=778;e.degree=400;e.ograve=500;e.Ccaron=722;e.ugrave=556;e.radical=549;e.Dcaron=722;e.rcommaaccent=444;e.Ntilde=722;e.otilde=500;e.Rcommaaccent=722;e.Lcommaaccent=667;e.Atilde=722;e.Aogonek=722;e.Aring=722;e.Otilde=778;e.zdotaccent=444;e.Ecaron=667;e.Iogonek=389;e.kcommaaccent=556;e.minus=570;e.Icircumflex=389;e.ncaron=556;e.tcommaaccent=333;e.logicalnot=570;e.odieresis=500;e.udieresis=556;e.notequal=549;e.gcommaaccent=500;e.eth=500;e.zcaron=444;e.ncommaaccent=556;e.onesuperior=300;e.imacron=278;e.Euro=500}));e["Times-BoldItalic"]=(0,r.getLookupTableFactory)((function(e){e.space=250;e.exclam=389;e.quotedbl=555;e.numbersign=500;e.dollar=500;e.percent=833;e.ampersand=778;e.quoteright=333;e.parenleft=333;e.parenright=333;e.asterisk=500;e.plus=570;e.comma=250;e.hyphen=333;e.period=250;e.slash=278;e.zero=500;e.one=500;e.two=500;e.three=500;e.four=500;e.five=500;e.six=500;e.seven=500;e.eight=500;e.nine=500;e.colon=333;e.semicolon=333;e.less=570;e.equal=570;e.greater=570;e.question=500;e.at=832;e.A=667;e.B=667;e.C=667;e.D=722;e.E=667;e.F=667;e.G=722;e.H=778;e.I=389;e.J=500;e.K=667;e.L=611;e.M=889;e.N=722;e.O=722;e.P=611;e.Q=722;e.R=667;e.S=556;e.T=611;e.U=722;e.V=667;e.W=889;e.X=667;e.Y=611;e.Z=611;e.bracketleft=333;e.backslash=278;e.bracketright=333;e.asciicircum=570;e.underscore=500;e.quoteleft=333;e.a=500;e.b=500;e.c=444;e.d=500;e.e=444;e.f=333;e.g=500;e.h=556;e.i=278;e.j=278;e.k=500;e.l=278;e.m=778;e.n=556;e.o=500;e.p=500;e.q=500;e.r=389;e.s=389;e.t=278;e.u=556;e.v=444;e.w=667;e.x=500;e.y=444;e.z=389;e.braceleft=348;e.bar=220;e.braceright=348;e.asciitilde=570;e.exclamdown=389;e.cent=500;e.sterling=500;e.fraction=167;e.yen=500;e.florin=500;e.section=500;e.currency=500;e.quotesingle=278;e.quotedblleft=500;e.guillemotleft=500;e.guilsinglleft=333;e.guilsinglright=333;e.fi=556;e.fl=556;e.endash=500;e.dagger=500;e.daggerdbl=500;e.periodcentered=250;e.paragraph=500;e.bullet=350;e.quotesinglbase=333;e.quotedblbase=500;e.quotedblright=500;e.guillemotright=500;e.ellipsis=1e3;e.perthousand=1e3;e.questiondown=500;e.grave=333;e.acute=333;e.circumflex=333;e.tilde=333;e.macron=333;e.breve=333;e.dotaccent=333;e.dieresis=333;e.ring=333;e.cedilla=333;e.hungarumlaut=333;e.ogonek=333;e.caron=333;e.emdash=1e3;e.AE=944;e.ordfeminine=266;e.Lslash=611;e.Oslash=722;e.OE=944;e.ordmasculine=300;e.ae=722;e.dotlessi=278;e.lslash=278;e.oslash=500;e.oe=722;e.germandbls=500;e.Idieresis=389;e.eacute=444;e.abreve=500;e.uhungarumlaut=556;e.ecaron=444;e.Ydieresis=611;e.divide=570;e.Yacute=611;e.Acircumflex=667;e.aacute=500;e.Ucircumflex=722;e.yacute=444;e.scommaaccent=389;e.ecircumflex=444;e.Uring=722;e.Udieresis=722;e.aogonek=500;e.Uacute=722;e.uogonek=556;e.Edieresis=667;e.Dcroat=722;e.commaaccent=250;e.copyright=747;e.Emacron=667;e.ccaron=444;e.aring=500;e.Ncommaaccent=722;e.lacute=278;e.agrave=500;e.Tcommaaccent=611;e.Cacute=667;e.atilde=500;e.Edotaccent=667;e.scaron=389;e.scedilla=389;e.iacute=278;e.lozenge=494;e.Rcaron=667;e.Gcommaaccent=722;e.ucircumflex=556;e.acircumflex=500;e.Amacron=667;e.rcaron=389;e.ccedilla=444;e.Zdotaccent=611;e.Thorn=611;e.Omacron=722;e.Racute=667;e.Sacute=556;e.dcaron=608;e.Umacron=722;e.uring=556;e.threesuperior=300;e.Ograve=722;e.Agrave=667;e.Abreve=667;e.multiply=570;e.uacute=556;e.Tcaron=611;e.partialdiff=494;e.ydieresis=444;e.Nacute=722;e.icircumflex=278;e.Ecircumflex=667;e.adieresis=500;e.edieresis=444;e.cacute=444;e.nacute=556;e.umacron=556;e.Ncaron=722;e.Iacute=389;e.plusminus=570;e.brokenbar=220;e.registered=747;e.Gbreve=722;e.Idotaccent=389;e.summation=600;e.Egrave=667;e.racute=389;e.omacron=500;e.Zacute=611;e.Zcaron=611;e.greaterequal=549;e.Eth=722;e.Ccedilla=667;e.lcommaaccent=278;e.tcaron=366;e.eogonek=444;e.Uogonek=722;e.Aacute=667;e.Adieresis=667;e.egrave=444;e.zacute=389;e.iogonek=278;e.Oacute=722;e.oacute=500;e.amacron=500;e.sacute=389;e.idieresis=278;e.Ocircumflex=722;e.Ugrave=722;e.Delta=612;e.thorn=500;e.twosuperior=300;e.Odieresis=722;e.mu=576;e.igrave=278;e.ohungarumlaut=500;e.Eogonek=667;e.dcroat=500;e.threequarters=750;e.Scedilla=556;e.lcaron=382;e.Kcommaaccent=667;e.Lacute=611;e.trademark=1e3;e.edotaccent=444;e.Igrave=389;e.Imacron=389;e.Lcaron=611;e.onehalf=750;e.lessequal=549;e.ocircumflex=500;e.ntilde=556;e.Uhungarumlaut=722;e.Eacute=667;e.emacron=444;e.gbreve=500;e.onequarter=750;e.Scaron=556;e.Scommaaccent=556;e.Ohungarumlaut=722;e.degree=400;e.ograve=500;e.Ccaron=667;e.ugrave=556;e.radical=549;e.Dcaron=722;e.rcommaaccent=389;e.Ntilde=722;e.otilde=500;e.Rcommaaccent=667;e.Lcommaaccent=611;e.Atilde=667;e.Aogonek=667;e.Aring=667;e.Otilde=722;e.zdotaccent=389;e.Ecaron=667;e.Iogonek=389;e.kcommaaccent=500;e.minus=606;e.Icircumflex=389;e.ncaron=556;e.tcommaaccent=278;e.logicalnot=606;e.odieresis=500;e.udieresis=556;e.notequal=549;e.gcommaaccent=500;e.eth=500;e.zcaron=389;e.ncommaaccent=556;e.onesuperior=300;e.imacron=278;e.Euro=500}));e["Times-Italic"]=(0,r.getLookupTableFactory)((function(e){e.space=250;e.exclam=333;e.quotedbl=420;e.numbersign=500;e.dollar=500;e.percent=833;e.ampersand=778;e.quoteright=333;e.parenleft=333;e.parenright=333;e.asterisk=500;e.plus=675;e.comma=250;e.hyphen=333;e.period=250;e.slash=278;e.zero=500;e.one=500;e.two=500;e.three=500;e.four=500;e.five=500;e.six=500;e.seven=500;e.eight=500;e.nine=500;e.colon=333;e.semicolon=333;e.less=675;e.equal=675;e.greater=675;e.question=500;e.at=920;e.A=611;e.B=611;e.C=667;e.D=722;e.E=611;e.F=611;e.G=722;e.H=722;e.I=333;e.J=444;e.K=667;e.L=556;e.M=833;e.N=667;e.O=722;e.P=611;e.Q=722;e.R=611;e.S=500;e.T=556;e.U=722;e.V=611;e.W=833;e.X=611;e.Y=556;e.Z=556;e.bracketleft=389;e.backslash=278;e.bracketright=389;e.asciicircum=422;e.underscore=500;e.quoteleft=333;e.a=500;e.b=500;e.c=444;e.d=500;e.e=444;e.f=278;e.g=500;e.h=500;e.i=278;e.j=278;e.k=444;e.l=278;e.m=722;e.n=500;e.o=500;e.p=500;e.q=500;e.r=389;e.s=389;e.t=278;e.u=500;e.v=444;e.w=667;e.x=444;e.y=444;e.z=389;e.braceleft=400;e.bar=275;e.braceright=400;e.asciitilde=541;e.exclamdown=389;e.cent=500;e.sterling=500;e.fraction=167;e.yen=500;e.florin=500;e.section=500;e.currency=500;e.quotesingle=214;e.quotedblleft=556;e.guillemotleft=500;e.guilsinglleft=333;e.guilsinglright=333;e.fi=500;e.fl=500;e.endash=500;e.dagger=500;e.daggerdbl=500;e.periodcentered=250;e.paragraph=523;e.bullet=350;e.quotesinglbase=333;e.quotedblbase=556;e.quotedblright=556;e.guillemotright=500;e.ellipsis=889;e.perthousand=1e3;e.questiondown=500;e.grave=333;e.acute=333;e.circumflex=333;e.tilde=333;e.macron=333;e.breve=333;e.dotaccent=333;e.dieresis=333;e.ring=333;e.cedilla=333;e.hungarumlaut=333;e.ogonek=333;e.caron=333;e.emdash=889;e.AE=889;e.ordfeminine=276;e.Lslash=556;e.Oslash=722;e.OE=944;e.ordmasculine=310;e.ae=667;e.dotlessi=278;e.lslash=278;e.oslash=500;e.oe=667;e.germandbls=500;e.Idieresis=333;e.eacute=444;e.abreve=500;e.uhungarumlaut=500;e.ecaron=444;e.Ydieresis=556;e.divide=675;e.Yacute=556;e.Acircumflex=611;e.aacute=500;e.Ucircumflex=722;e.yacute=444;e.scommaaccent=389;e.ecircumflex=444;e.Uring=722;e.Udieresis=722;e.aogonek=500;e.Uacute=722;e.uogonek=500;e.Edieresis=611;e.Dcroat=722;e.commaaccent=250;e.copyright=760;e.Emacron=611;e.ccaron=444;e.aring=500;e.Ncommaaccent=667;e.lacute=278;e.agrave=500;e.Tcommaaccent=556;e.Cacute=667;e.atilde=500;e.Edotaccent=611;e.scaron=389;e.scedilla=389;e.iacute=278;e.lozenge=471;e.Rcaron=611;e.Gcommaaccent=722;e.ucircumflex=500;e.acircumflex=500;e.Amacron=611;e.rcaron=389;e.ccedilla=444;e.Zdotaccent=556;e.Thorn=611;e.Omacron=722;e.Racute=611;e.Sacute=500;e.dcaron=544;e.Umacron=722;e.uring=500;e.threesuperior=300;e.Ograve=722;e.Agrave=611;e.Abreve=611;e.multiply=675;e.uacute=500;e.Tcaron=556;e.partialdiff=476;e.ydieresis=444;e.Nacute=667;e.icircumflex=278;e.Ecircumflex=611;e.adieresis=500;e.edieresis=444;e.cacute=444;e.nacute=500;e.umacron=500;e.Ncaron=667;e.Iacute=333;e.plusminus=675;e.brokenbar=275;e.registered=760;e.Gbreve=722;e.Idotaccent=333;e.summation=600;e.Egrave=611;e.racute=389;e.omacron=500;e.Zacute=556;e.Zcaron=556;e.greaterequal=549;e.Eth=722;e.Ccedilla=667;e.lcommaaccent=278;e.tcaron=300;e.eogonek=444;e.Uogonek=722;e.Aacute=611;e.Adieresis=611;e.egrave=444;e.zacute=389;e.iogonek=278;e.Oacute=722;e.oacute=500;e.amacron=500;e.sacute=389;e.idieresis=278;e.Ocircumflex=722;e.Ugrave=722;e.Delta=612;e.thorn=500;e.twosuperior=300;e.Odieresis=722;e.mu=500;e.igrave=278;e.ohungarumlaut=500;e.Eogonek=611;e.dcroat=500;e.threequarters=750;e.Scedilla=500;e.lcaron=300;e.Kcommaaccent=667;e.Lacute=556;e.trademark=980;e.edotaccent=444;e.Igrave=333;e.Imacron=333;e.Lcaron=611;e.onehalf=750;e.lessequal=549;e.ocircumflex=500;e.ntilde=500;e.Uhungarumlaut=722;e.Eacute=611;e.emacron=444;e.gbreve=500;e.onequarter=750;e.Scaron=500;e.Scommaaccent=500;e.Ohungarumlaut=722;e.degree=400;e.ograve=500;e.Ccaron=667;e.ugrave=500;e.radical=453;e.Dcaron=722;e.rcommaaccent=389;e.Ntilde=667;e.otilde=500;e.Rcommaaccent=611;e.Lcommaaccent=556;e.Atilde=611;e.Aogonek=611;e.Aring=611;e.Otilde=722;e.zdotaccent=389;e.Ecaron=611;e.Iogonek=333;e.kcommaaccent=444;e.minus=675;e.Icircumflex=333;e.ncaron=500;e.tcommaaccent=278;e.logicalnot=675;e.odieresis=500;e.udieresis=500;e.notequal=549;e.gcommaaccent=500;e.eth=500;e.zcaron=389;e.ncommaaccent=500;e.onesuperior=300;e.imacron=278;e.Euro=500}));e.ZapfDingbats=(0,r.getLookupTableFactory)((function(e){e.space=278;e.a1=974;e.a2=961;e.a202=974;e.a3=980;e.a4=719;e.a5=789;e.a119=790;e.a118=791;e.a117=690;e.a11=960;e.a12=939;e.a13=549;e.a14=855;e.a15=911;e.a16=933;e.a105=911;e.a17=945;e.a18=974;e.a19=755;e.a20=846;e.a21=762;e.a22=761;e.a23=571;e.a24=677;e.a25=763;e.a26=760;e.a27=759;e.a28=754;e.a6=494;e.a7=552;e.a8=537;e.a9=577;e.a10=692;e.a29=786;e.a30=788;e.a31=788;e.a32=790;e.a33=793;e.a34=794;e.a35=816;e.a36=823;e.a37=789;e.a38=841;e.a39=823;e.a40=833;e.a41=816;e.a42=831;e.a43=923;e.a44=744;e.a45=723;e.a46=749;e.a47=790;e.a48=792;e.a49=695;e.a50=776;e.a51=768;e.a52=792;e.a53=759;e.a54=707;e.a55=708;e.a56=682;e.a57=701;e.a58=826;e.a59=815;e.a60=789;e.a61=789;e.a62=707;e.a63=687;e.a64=696;e.a65=689;e.a66=786;e.a67=787;e.a68=713;e.a69=791;e.a70=785;e.a71=791;e.a72=873;e.a73=761;e.a74=762;e.a203=762;e.a75=759;e.a204=759;e.a76=892;e.a77=892;e.a78=788;e.a79=784;e.a81=438;e.a82=138;e.a83=277;e.a84=415;e.a97=392;e.a98=392;e.a99=668;e.a100=668;e.a89=390;e.a90=390;e.a93=317;e.a94=317;e.a91=276;e.a92=276;e.a205=509;e.a85=509;e.a206=410;e.a86=410;e.a87=234;e.a88=234;e.a95=334;e.a96=334;e.a101=732;e.a102=544;e.a103=544;e.a104=910;e.a106=667;e.a107=760;e.a108=760;e.a112=776;e.a111=595;e.a110=694;e.a109=626;e.a120=788;e.a121=788;e.a122=788;e.a123=788;e.a124=788;e.a125=788;e.a126=788;e.a127=788;e.a128=788;e.a129=788;e.a130=788;e.a131=788;e.a132=788;e.a133=788;e.a134=788;e.a135=788;e.a136=788;e.a137=788;e.a138=788;e.a139=788;e.a140=788;e.a141=788;e.a142=788;e.a143=788;e.a144=788;e.a145=788;e.a146=788;e.a147=788;e.a148=788;e.a149=788;e.a150=788;e.a151=788;e.a152=788;e.a153=788;e.a154=788;e.a155=788;e.a156=788;e.a157=788;e.a158=788;e.a159=788;e.a160=894;e.a161=838;e.a163=1016;e.a164=458;e.a196=748;e.a165=924;e.a192=748;e.a166=918;e.a167=927;e.a168=928;e.a169=928;e.a170=834;e.a171=873;e.a172=828;e.a173=924;e.a162=924;e.a174=917;e.a175=930;e.a176=931;e.a177=463;e.a178=883;e.a179=836;e.a193=836;e.a180=867;e.a199=867;e.a181=696;e.a200=696;e.a182=874;e.a201=874;e.a183=760;e.a184=946;e.a197=771;e.a185=865;e.a194=771;e.a198=888;e.a186=967;e.a195=888;e.a187=831;e.a188=873;e.a189=927;e.a190=970;e.a191=918}))}));t.getMetrics=i},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.isPDFFunction=function(e){var t;if("object"!=typeof e)return!1;if((0,i.isDict)(e))t=e;else{if(!(0,i.isStream)(e))return!1;t=e.dict}return t.has("FunctionType")};t.PostScriptCompiler=t.PostScriptEvaluator=t.PDFFunctionFactory=void 0;var r=a(2),i=a(4),n=a(40);t.PDFFunctionFactory=class{constructor({xref:e,isEvalSupported:t=!0}){this.xref=e;this.isEvalSupported=!1!==t}create(e){return o.parse({xref:this.xref,isEvalSupported:this.isEvalSupported,fn:e})}createFromArray(e){return o.parseArray({xref:this.xref,isEvalSupported:this.isEvalSupported,fnObj:e})}};function s(e){if(!Array.isArray(e))return null;const t=e.length;for(let a=0;a<t;a++)if("number"!=typeof e[a]){const a=new Array(t);for(let r=0;r<t;r++)a[r]=+e[r];return a}return e}var o={getSampleArray(e,t,a,r){var i,n,s=1;for(i=0,n=e.length;i<n;i++)s*=e[i];s*=t;var o=new Array(s),c=0,l=0,h=1/(2**a-1),u=r.getBytes((s*a+7)/8),d=0;for(i=0;i<s;i++){for(;c<a;){l<<=8;l|=u[d++];c+=8}c-=a;o[i]=(l>>c)*h;l&=(1<<c)-1}return o},getIR({xref:e,isEvalSupported:t,fn:a}){var i=a.dict;i||(i=a);var n=[this.constructSampled,null,this.constructInterpolated,this.constructStiched,this.constructPostScript][i.get("FunctionType")];if(!n)throw new r.FormatError("Unknown type of function");return n.call(this,{xref:e,isEvalSupported:t,fn:a,dict:i})},fromIR({xref:e,isEvalSupported:t,IR:a}){switch(a[0]){case 0:return this.constructSampledFromIR({xref:e,isEvalSupported:t,IR:a});case 2:return this.constructInterpolatedFromIR({xref:e,isEvalSupported:t,IR:a});case 3:return this.constructStichedFromIR({xref:e,isEvalSupported:t,IR:a});default:return this.constructPostScriptFromIR({xref:e,isEvalSupported:t,IR:a})}},parse({xref:e,isEvalSupported:t,fn:a}){const r=this.getIR({xref:e,isEvalSupported:t,fn:a});return this.fromIR({xref:e,isEvalSupported:t,IR:r})},parseArray({xref:e,isEvalSupported:t,fnObj:a}){if(!Array.isArray(a))return this.parse({xref:e,isEvalSupported:t,fn:a});for(var r=[],i=0,n=a.length;i<n;i++)r.push(this.parse({xref:e,isEvalSupported:t,fn:e.fetchIfRef(a[i])}));return function(e,t,a,i){for(var n=0,s=r.length;n<s;n++)r[n](e,t,a,i+n)}},constructSampled({xref:e,isEvalSupported:t,fn:a,dict:i}){function n(e){for(var t=e.length,a=[],r=0,i=0;i<t;i+=2){a[r]=[e[i],e[i+1]];++r}return a}var o=s(i.getArray("Domain")),c=s(i.getArray("Range"));if(!o||!c)throw new r.FormatError("No domain or range");var l=o.length/2,h=c.length/2;o=n(o);c=n(c);var u=s(i.getArray("Size")),d=i.get("BitsPerSample"),f=i.get("Order")||1;1!==f&&(0,r.info)("No support for cubic spline interpolation: "+f);var g=s(i.getArray("Encode"));if(g)g=n(g);else{g=[];for(var m=0;m<l;++m)g.push([0,u[m]-1])}var p=s(i.getArray("Decode"));return[0,l,o,g,p=p?n(p):c,this.getSampleArray(u,h,d,a),u,h,2**d-1,c]},constructSampledFromIR({xref:e,isEvalSupported:t,IR:a}){function r(e,t,a,r,i){return r+(i-r)/(a-t)*(e-t)}return function(e,t,i,n){var s,o,c=a[1],l=a[2],h=a[3],u=a[4],d=a[5],f=a[6],g=a[7],m=a[9],p=1<<c,b=new Float64Array(p),y=new Uint32Array(p);for(o=0;o<p;o++)b[o]=1;var v=g,w=1;for(s=0;s<c;++s){var k=l[s][0],S=l[s][1],C=r(Math.min(Math.max(e[t+s],k),S),k,S,h[s][0],h[s][1]),x=f[s],A=(C=Math.min(Math.max(C,0),x-1))<x-1?Math.floor(C):C-1,I=A+1-C,F=C-A,T=A*v,E=T+v;for(o=0;o<p;o++)if(o&w){b[o]*=F;y[o]+=E}else{b[o]*=I;y[o]+=T}v*=x;w<<=1}for(o=0;o<g;++o){var O=0;for(s=0;s<p;s++)O+=d[y[s]+o]*b[s];O=r(O,0,1,u[o][0],u[o][1]);i[n+o]=Math.min(Math.max(O,m[o][0]),m[o][1])}}},constructInterpolated({xref:e,isEvalSupported:t,fn:a,dict:r}){for(var i=s(r.getArray("C0"))||[0],n=s(r.getArray("C1"))||[1],o=r.get("N"),c=i.length,l=[],h=0;h<c;++h)l.push(n[h]-i[h]);return[2,i,l,o]},constructInterpolatedFromIR({xref:e,isEvalSupported:t,IR:a}){var r=a[1],i=a[2],n=a[3],s=i.length;return function(e,t,a,o){for(var c=1===n?e[t]:e[t]**n,l=0;l<s;++l)a[o+l]=r[l]+c*i[l]}},constructStiched({xref:e,isEvalSupported:t,fn:a,dict:i}){var n=s(i.getArray("Domain"));if(!n)throw new r.FormatError("No domain");if(1!=n.length/2)throw new r.FormatError("Bad domain for stiched function");for(var o=i.get("Functions"),c=[],l=0,h=o.length;l<h;++l)c.push(this.parse({xref:e,isEvalSupported:t,fn:e.fetchIfRef(o[l])}));return[3,n,s(i.getArray("Bounds")),s(i.getArray("Encode")),c]},constructStichedFromIR({xref:e,isEvalSupported:t,IR:a}){var r=a[1],i=a[2],n=a[3],s=a[4],o=new Float32Array(1);return function(e,t,a,c){for(var l=function(e,t,a){e>a?e=a:e<t&&(e=t);return e}(e[t],r[0],r[1]),h=0,u=i.length;h<u&&!(l<i[h]);++h);var d=r[0];h>0&&(d=i[h-1]);var f=r[1];h<i.length&&(f=i[h]);var g=n[2*h],m=n[2*h+1];o[0]=d===f?g:g+(l-d)*(m-g)/(f-d);s[h](o,0,a,c)}},constructPostScript({xref:e,isEvalSupported:t,fn:a,dict:i}){var o=s(i.getArray("Domain")),c=s(i.getArray("Range"));if(!o)throw new r.FormatError("No domain.");if(!c)throw new r.FormatError("No range.");var l=new n.PostScriptLexer(a);return[4,o,c,new n.PostScriptParser(l).parse()]},constructPostScriptFromIR({xref:e,isEvalSupported:t,IR:a}){var i=a[1],n=a[2],s=a[3];if(t&&r.IsEvalSupportedCached.value){const e=(new h).compile(s,i,n);if(e)return new Function("src","srcOffset","dest","destOffset",e)}(0,r.info)("Unable to compile PS function");var o=n.length>>1,c=i.length>>1,u=new l(s),d=Object.create(null),f=8192,g=new Float32Array(c);return function(e,t,a,r){var i,s,l="",h=g;for(i=0;i<c;i++){s=e[t+i];h[i]=s;l+=s+"_"}var m=d[l];if(void 0===m){var p=new Float32Array(o),b=u.execute(h),y=b.length-o;for(i=0;i<o;i++){s=b[y+i];var v=n[2*i];(s<v||s>(v=n[2*i+1]))&&(s=v);p[i]=s}if(f>0){f--;d[l]=p}a.set(p,r)}else a.set(m,r)}}};var c=function(){function e(e){this.stack=e?Array.prototype.slice.call(e,0):[]}e.prototype={push:function(e){if(this.stack.length>=100)throw new Error("PostScript function stack overflow.");this.stack.push(e)},pop:function(){if(this.stack.length<=0)throw new Error("PostScript function stack underflow.");return this.stack.pop()},copy:function(e){if(this.stack.length+e>=100)throw new Error("PostScript function stack overflow.");for(var t=this.stack,a=t.length-e,r=e-1;r>=0;r--,a++)t.push(t[a])},index:function(e){this.push(this.stack[this.stack.length-e-1])},roll:function(e,t){var a,r,i,n=this.stack,s=n.length-e,o=n.length-1,c=s+(t-Math.floor(t/e)*e);for(a=s,r=o;a<r;a++,r--){i=n[a];n[a]=n[r];n[r]=i}for(a=s,r=c-1;a<r;a++,r--){i=n[a];n[a]=n[r];n[r]=i}for(a=c,r=o;a<r;a++,r--){i=n[a];n[a]=n[r];n[r]=i}}};return e}(),l=function(){function e(e){this.operators=e}e.prototype={execute:function(e){for(var t,a,i,n=new c(e),s=0,o=this.operators,l=o.length;s<l;)if("number"!=typeof(t=o[s++]))switch(t){case"jz":i=n.pop();(a=n.pop())||(s=i);break;case"j":s=a=n.pop();break;case"abs":a=n.pop();n.push(Math.abs(a));break;case"add":i=n.pop();a=n.pop();n.push(a+i);break;case"and":i=n.pop();a=n.pop();(0,r.isBool)(a)&&(0,r.isBool)(i)?n.push(a&&i):n.push(a&i);break;case"atan":a=n.pop();n.push(Math.atan(a));break;case"bitshift":i=n.pop();(a=n.pop())>0?n.push(a<<i):n.push(a>>i);break;case"ceiling":a=n.pop();n.push(Math.ceil(a));break;case"copy":a=n.pop();n.copy(a);break;case"cos":a=n.pop();n.push(Math.cos(a));break;case"cvi":a=0|n.pop();n.push(a);break;case"cvr":break;case"div":i=n.pop();a=n.pop();n.push(a/i);break;case"dup":n.copy(1);break;case"eq":i=n.pop();a=n.pop();n.push(a===i);break;case"exch":n.roll(2,1);break;case"exp":i=n.pop();a=n.pop();n.push(a**i);break;case"false":n.push(!1);break;case"floor":a=n.pop();n.push(Math.floor(a));break;case"ge":i=n.pop();a=n.pop();n.push(a>=i);break;case"gt":i=n.pop();a=n.pop();n.push(a>i);break;case"idiv":i=n.pop();a=n.pop();n.push(a/i|0);break;case"index":a=n.pop();n.index(a);break;case"le":i=n.pop();a=n.pop();n.push(a<=i);break;case"ln":a=n.pop();n.push(Math.log(a));break;case"log":a=n.pop();n.push(Math.log(a)/Math.LN10);break;case"lt":i=n.pop();a=n.pop();n.push(a<i);break;case"mod":i=n.pop();a=n.pop();n.push(a%i);break;case"mul":i=n.pop();a=n.pop();n.push(a*i);break;case"ne":i=n.pop();a=n.pop();n.push(a!==i);break;case"neg":a=n.pop();n.push(-a);break;case"not":a=n.pop();(0,r.isBool)(a)?n.push(!a):n.push(~a);break;case"or":i=n.pop();a=n.pop();(0,r.isBool)(a)&&(0,r.isBool)(i)?n.push(a||i):n.push(a|i);break;case"pop":n.pop();break;case"roll":i=n.pop();a=n.pop();n.roll(a,i);break;case"round":a=n.pop();n.push(Math.round(a));break;case"sin":a=n.pop();n.push(Math.sin(a));break;case"sqrt":a=n.pop();n.push(Math.sqrt(a));break;case"sub":i=n.pop();a=n.pop();n.push(a-i);break;case"true":n.push(!0);break;case"truncate":a=(a=n.pop())<0?Math.ceil(a):Math.floor(a);n.push(a);break;case"xor":i=n.pop();a=n.pop();(0,r.isBool)(a)&&(0,r.isBool)(i)?n.push(a!==i):n.push(a^i);break;default:throw new r.FormatError(`Unknown operator ${t}`)}else n.push(t);return n.stack}};return e}();t.PostScriptEvaluator=l;var h=function(){function e(e){this.type=e}e.prototype.visit=function(e){(0,r.unreachable)("abstract method")};function t(t,a,r){e.call(this,"args");this.index=t;this.min=a;this.max=r}t.prototype=Object.create(e.prototype);t.prototype.visit=function(e){e.visitArgument(this)};function a(t){e.call(this,"literal");this.number=t;this.min=t;this.max=t}a.prototype=Object.create(e.prototype);a.prototype.visit=function(e){e.visitLiteral(this)};function i(t,a,r,i,n){e.call(this,"binary");this.op=t;this.arg1=a;this.arg2=r;this.min=i;this.max=n}i.prototype=Object.create(e.prototype);i.prototype.visit=function(e){e.visitBinaryOperation(this)};function n(t,a){e.call(this,"max");this.arg=t;this.min=t.min;this.max=a}n.prototype=Object.create(e.prototype);n.prototype.visit=function(e){e.visitMin(this)};function s(t,a,r){e.call(this,"var");this.index=t;this.min=a;this.max=r}s.prototype=Object.create(e.prototype);s.prototype.visit=function(e){e.visitVariable(this)};function o(t,a){e.call(this,"definition");this.variable=t;this.arg=a}o.prototype=Object.create(e.prototype);o.prototype.visit=function(e){e.visitVariableDefinition(this)};function c(){this.parts=[]}c.prototype={visitArgument(e){this.parts.push("Math.max(",e.min,", Math.min(",e.max,", src[srcOffset + ",e.index,"]))")},visitVariable(e){this.parts.push("v",e.index)},visitLiteral(e){this.parts.push(e.number)},visitBinaryOperation(e){this.parts.push("(");e.arg1.visit(this);this.parts.push(" ",e.op," ");e.arg2.visit(this);this.parts.push(")")},visitVariableDefinition(e){this.parts.push("var ");e.variable.visit(this);this.parts.push(" = ");e.arg.visit(this);this.parts.push(";")},visitMin(e){this.parts.push("Math.min(");e.arg.visit(this);this.parts.push(", ",e.max,")")},toString(){return this.parts.join("")}};function l(e,t){return"literal"===t.type&&0===t.number?e:"literal"===e.type&&0===e.number?t:"literal"===t.type&&"literal"===e.type?new a(e.number+t.number):new i("+",e,t,e.min+t.min,e.max+t.max)}function h(e,t){if("literal"===t.type){if(0===t.number)return new a(0);if(1===t.number)return e;if("literal"===e.type)return new a(e.number*t.number)}if("literal"===e.type){if(0===e.number)return new a(0);if(1===e.number)return t}return new i("*",e,t,Math.min(e.min*t.min,e.min*t.max,e.max*t.min,e.max*t.max),Math.max(e.min*t.min,e.min*t.max,e.max*t.min,e.max*t.max))}function u(e,t){if("literal"===t.type){if(0===t.number)return e;if("literal"===e.type)return new a(e.number-t.number)}return"binary"===t.type&&"-"===t.op&&"literal"===e.type&&1===e.number&&"literal"===t.arg1.type&&1===t.arg1.number?t.arg2:new i("-",e,t,e.min-t.max,e.max-t.min)}function d(e,t){return e.min>=t?new a(t):e.max<=t?e:new n(e,t)}function f(){}f.prototype={compile:function(e,r,i){var n,f,g,m,p,b,y,v,w,k,S=[],C=[],x=r.length>>1,A=i.length>>1,I=0;for(n=0;n<x;n++)S.push(new t(n,r[2*n],r[2*n+1]));for(n=0,f=e.length;n<f;n++)if("number"!=typeof(k=e[n]))switch(k){case"add":if(S.length<2)return null;b=S.pop();p=S.pop();S.push(l(p,b));break;case"cvr":if(S.length<1)return null;break;case"mul":if(S.length<2)return null;b=S.pop();p=S.pop();S.push(h(p,b));break;case"sub":if(S.length<2)return null;b=S.pop();p=S.pop();S.push(u(p,b));break;case"exch":if(S.length<2)return null;y=S.pop();v=S.pop();S.push(y,v);break;case"pop":if(S.length<1)return null;S.pop();break;case"index":if(S.length<1)return null;if("literal"!==(p=S.pop()).type)return null;if((g=p.number)<0||!Number.isInteger(g)||S.length<g)return null;if("literal"===(y=S[S.length-g-1]).type||"var"===y.type){S.push(y);break}w=new s(I++,y.min,y.max);S[S.length-g-1]=w;S.push(w);C.push(new o(w,y));break;case"dup":if(S.length<1)return null;if("number"==typeof e[n+1]&&"gt"===e[n+2]&&e[n+3]===n+7&&"jz"===e[n+4]&&"pop"===e[n+5]&&e[n+6]===e[n+1]){p=S.pop();S.push(d(p,e[n+1]));n+=6;break}if("literal"===(y=S[S.length-1]).type||"var"===y.type){S.push(y);break}w=new s(I++,y.min,y.max);S[S.length-1]=w;S.push(w);C.push(new o(w,y));break;case"roll":if(S.length<2)return null;b=S.pop();p=S.pop();if("literal"!==b.type||"literal"!==p.type)return null;m=b.number;if((g=p.number)<=0||!Number.isInteger(g)||!Number.isInteger(m)||S.length<g)return null;if(0===(m=(m%g+g)%g))break;Array.prototype.push.apply(S,S.splice(S.length-g,g-m));break;default:return null}else S.push(new a(k));if(S.length!==A)return null;var F=[];C.forEach((function(e){var t=new c;e.visit(t);F.push(t.toString())}));S.forEach((function(e,t){var a=new c;e.visit(a);var r=i[2*t],n=i[2*t+1],s=[a.toString()];if(r>e.min){s.unshift("Math.max(",r,", ");s.push(")")}if(n<e.max){s.unshift("Math.min(",n,", ");s.push(")")}s.unshift("dest[destOffset + ",t,"] = ");s.push(";");F.push(s.join(""))}));return F.join("\n")}};return f}();t.PostScriptCompiler=h},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.PostScriptParser=t.PostScriptLexer=void 0;var r=a(2),i=a(4),n=a(7);t.PostScriptParser=class{constructor(e){this.lexer=e;this.operators=[];this.token=null;this.prev=null}nextToken(){this.prev=this.token;this.token=this.lexer.getToken()}accept(e){if(this.token.type===e){this.nextToken();return!0}return!1}expect(e){if(this.accept(e))return!0;throw new r.FormatError(`Unexpected symbol: found ${this.token.type} expected ${e}.`)}parse(){this.nextToken();this.expect(s.LBRACE);this.parseBlock();this.expect(s.RBRACE);return this.operators}parseBlock(){for(;;)if(this.accept(s.NUMBER))this.operators.push(this.prev.value);else if(this.accept(s.OPERATOR))this.operators.push(this.prev.value);else{if(!this.accept(s.LBRACE))return;this.parseCondition()}}parseCondition(){const e=this.operators.length;this.operators.push(null,null);this.parseBlock();this.expect(s.RBRACE);if(this.accept(s.IF)){this.operators[e]=this.operators.length;this.operators[e+1]="jz"}else{if(!this.accept(s.LBRACE))throw new r.FormatError("PS Function: error parsing conditional.");{const t=this.operators.length;this.operators.push(null,null);const a=this.operators.length;this.parseBlock();this.expect(s.RBRACE);this.expect(s.IFELSE);this.operators[t]=this.operators.length;this.operators[t+1]="j";this.operators[e]=a;this.operators[e+1]="jz"}}}};const s={LBRACE:0,RBRACE:1,NUMBER:2,OPERATOR:3,IF:4,IFELSE:5},o=function(){const e=Object.create(null);class t{constructor(e,t){this.type=e;this.value=t}static getOperator(a){const r=e[a];return r||(e[a]=new t(s.OPERATOR,a))}static get LBRACE(){return(0,r.shadow)(this,"LBRACE",new t(s.LBRACE,"{"))}static get RBRACE(){return(0,r.shadow)(this,"RBRACE",new t(s.RBRACE,"}"))}static get IF(){return(0,r.shadow)(this,"IF",new t(s.IF,"IF"))}static get IFELSE(){return(0,r.shadow)(this,"IFELSE",new t(s.IFELSE,"IFELSE"))}}return t}();t.PostScriptLexer=class{constructor(e){this.stream=e;this.nextChar();this.strBuf=[]}nextChar(){return this.currentChar=this.stream.getByte()}getToken(){let e=!1,t=this.currentChar;for(;;){if(t<0)return i.EOF;if(e)10!==t&&13!==t||(e=!1);else if(37===t)e=!0;else if(!(0,n.isWhiteSpace)(t))break;t=this.nextChar()}switch(0|t){case 48:case 49:case 50:case 51:case 52:case 53:case 54:case 55:case 56:case 57:case 43:case 45:case 46:return new o(s.NUMBER,this.getNumber());case 123:this.nextChar();return o.LBRACE;case 125:this.nextChar();return o.RBRACE}const a=this.strBuf;a.length=0;a[0]=String.fromCharCode(t);for(;(t=this.nextChar())>=0&&(t>=65&&t<=90||t>=97&&t<=122);)a.push(String.fromCharCode(t));const r=a.join("");switch(r.toLowerCase()){case"if":return o.IF;case"ifelse":return o.IFELSE;default:return o.getOperator(r)}}getNumber(){let e=this.currentChar;const t=this.strBuf;t.length=0;t[0]=String.fromCharCode(e);for(;(e=this.nextChar())>=0&&(e>=48&&e<=57||45===e||46===e);)t.push(String.fromCharCode(e));const a=parseFloat(t.join(""));if(isNaN(a))throw new r.FormatError(`Invalid floating point number: ${a}`);return a}}},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.MurmurHash3_64=void 0;var r=a(2);t.MurmurHash3_64=class{constructor(e){this.h1=e?4294967295&e:3285377520;this.h2=e?4294967295&e:3285377520}update(e){let t,a;if((0,r.isString)(e)){t=new Uint8Array(2*e.length);a=0;for(let r=0,i=e.length;r<i;r++){const i=e.charCodeAt(r);if(i<=255)t[a++]=i;else{t[a++]=i>>>8;t[a++]=255&i}}}else{if(!(0,r.isArrayBuffer)(e))throw new Error("Wrong data format in MurmurHash3_64_update. Input must be a string or array.");t=e;a=t.byteLength}const i=a>>2,n=a-4*i,s=new Uint32Array(t.buffer,0,i);let o=0,c=0,l=this.h1,h=this.h2;const u=3432918353,d=461845907;for(let e=0;e<i;e++)if(1&e){o=s[e];o=o*u&4294901760|11601*o&65535;o=o<<15|o>>>17;o=o*d&4294901760|13715*o&65535;l^=o;l=l<<13|l>>>19;l=5*l+3864292196}else{c=s[e];c=c*u&4294901760|11601*c&65535;c=c<<15|c>>>17;c=c*d&4294901760|13715*c&65535;h^=c;h=h<<13|h>>>19;h=5*h+3864292196}o=0;switch(n){case 3:o^=t[4*i+2]<<16;case 2:o^=t[4*i+1]<<8;case 1:o^=t[4*i];o=o*u&4294901760|11601*o&65535;o=o<<15|o>>>17;o=o*d&4294901760|13715*o&65535;1&i?l^=o:h^=o}this.h1=l;this.h2=h}hexdigest(){let e=this.h1,t=this.h2;e^=t>>>1;e=3981806797*e&4294901760|36045*e&65535;t=4283543511*t&4294901760|(2950163797*(t<<16|e>>>16)&4294901760)>>>16;e^=t>>>1;e=444984403*e&4294901760|60499*e&65535;t=3301882366*t&4294901760|(3120437893*(t<<16|e>>>16)&4294901760)>>>16;e^=t>>>1;const a=(e>>>0).toString(16),r=(t>>>0).toString(16);return a.padStart(8,"0")+r.padStart(8,"0")}}},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.NativeImageDecoder=void 0;var r=a(22),i=a(17),n=a(11);class s{constructor({xref:e,resources:t,handler:a,forceDataSchema:r=!1,pdfFunctionFactory:i}){this.xref=e;this.resources=t;this.handler=a;this.forceDataSchema=r;this.pdfFunctionFactory=i}canDecode(e){return e instanceof i.JpegStream&&s.isDecodable(e,this.xref,this.resources,this.pdfFunctionFactory)&&e.maybeValidDimensions}decode(e){const t=e.dict;let a=t.get("ColorSpace","CS");a=r.ColorSpace.parse(a,this.xref,this.resources,this.pdfFunctionFactory);return this.handler.sendWithPromise("JpegDecode",[e.getIR(this.forceDataSchema),a.numComps]).then((function({data:e,width:a,height:r}){return new n.Stream(e,0,e.length,t)}))}static isSupported(e,t,a,i){const n=e.dict;if(n.has("DecodeParms")||n.has("DP"))return!1;const s=r.ColorSpace.parse(n.get("ColorSpace","CS"),t,a,i);return("DeviceGray"===s.name||"DeviceRGB"===s.name)&&s.isDefaultDecode(n.getArray("Decode","D"))}static isDecodable(e,t,a,i){const n=e.dict;if(n.has("DecodeParms")||n.has("DP"))return!1;const s=r.ColorSpace.parse(n.get("ColorSpace","CS"),t,a,i),o=n.get("BitsPerComponent","BPC")||1;return(1===s.numComps||3===s.numComps)&&s.isDefaultDecode(n.getArray("Decode","D"),o)}}t.NativeImageDecoder=s},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.PDFImage=void 0;var r=a(2),i=a(4),n=a(22),s=a(11),o=a(17),c=a(20),l=function(){function e(e,t){return t&&t.canDecode(e)?t.decode(e).catch(t=>{(0,r.warn)("Native image decoding failed -- trying to recover: "+(t&&t.message));return e}):Promise.resolve(e)}function t(e,t,a,r){(e=t+e*a)<0?e=0:e>r&&(e=r);return e}function a(e,t,a,r,i,n){var s=i*n;let o;o=t<=8?new Uint8Array(s):t<=16?new Uint16Array(s):new Uint32Array(s);var c,l,h,u,d=a/i,f=r/n,g=0,m=new Uint16Array(i),p=a;for(c=0;c<i;c++)m[c]=Math.floor(c*d);for(c=0;c<n;c++){h=Math.floor(c*f)*p;for(l=0;l<i;l++){u=h+m[l];o[g++]=e[u]}}return o}function l({xref:e,res:t,image:a,isInline:s=!1,smask:o=null,mask:h=null,isMask:u=!1,pdfFunctionFactory:d}){this.image=a;var f=a.dict;const g=f.get("Filter");if((0,i.isName)(g))switch(g.name){case"JPXDecode":var m=new c.JpxImage;m.parseImageProperties(a.stream);a.stream.reset();a.width=m.width;a.height=m.height;a.bitsPerComponent=m.bitsPerComponent;a.numComps=m.componentsCount;break;case"JBIG2Decode":a.bitsPerComponent=1;a.numComps=1}let p=f.get("Width","W"),b=f.get("Height","H");if(Number.isInteger(a.width)&&a.width>0&&Number.isInteger(a.height)&&a.height>0&&(a.width!==p||a.height!==b)){(0,r.warn)("PDFImage - using the Width/Height of the image data, rather than the image dictionary.");p=a.width;b=a.height}if(p<1||b<1)throw new r.FormatError(`Invalid image width: ${p} or height: ${b}`);this.width=p;this.height=b;this.interpolate=f.get("Interpolate","I")||!1;this.imageMask=f.get("ImageMask","IM")||!1;this.matte=f.get("Matte")||!1;var y=a.bitsPerComponent;if(!y&&!(y=f.get("BitsPerComponent","BPC"))){if(!this.imageMask)throw new r.FormatError(`Bits per component missing in image: ${this.imageMask}`);y=1}this.bpc=y;if(!this.imageMask){var v=f.get("ColorSpace","CS");if(!v){(0,r.info)("JPX images (which do not require color spaces)");switch(a.numComps){case 1:v=i.Name.get("DeviceGray");break;case 3:v=i.Name.get("DeviceRGB");break;case 4:v=i.Name.get("DeviceCMYK");break;default:throw new Error(`JPX images with ${a.numComps} `+"color components not supported.")}}const o=s?t:null;this.colorSpace=n.ColorSpace.parse(v,e,o,d);this.numComps=this.colorSpace.numComps}this.decode=f.getArray("Decode","D");this.needsDecode=!1;if(this.decode&&(this.colorSpace&&!this.colorSpace.isDefaultDecode(this.decode,y)||u&&!n.ColorSpace.isDefaultDecode(this.decode,1))){this.needsDecode=!0;var w=(1<<y)-1;this.decodeCoefficients=[];this.decodeAddends=[];const e=this.colorSpace&&"Indexed"===this.colorSpace.name;for(var k=0,S=0;k<this.decode.length;k+=2,++S){var C=this.decode[k],x=this.decode[k+1];this.decodeCoefficients[S]=e?(x-C)/w:x-C;this.decodeAddends[S]=e?C:w*C}}if(o)this.smask=new l({xref:e,res:t,image:o,isInline:s,pdfFunctionFactory:d});else if(h)if((0,i.isStream)(h)){h.dict.get("ImageMask","IM")?this.mask=new l({xref:e,res:t,image:h,isInline:s,isMask:!0,pdfFunctionFactory:d}):(0,r.warn)("Ignoring /Mask in image without /ImageMask.")}else this.mask=h}l.buildImage=function({handler:t,xref:a,res:n,image:s,isInline:o=!1,nativeDecoder:c=null,pdfFunctionFactory:h}){var u,d,f=e(s,c),g=s.dict.get("SMask"),m=s.dict.get("Mask");if(g){u=e(g,c);d=Promise.resolve(null)}else{u=Promise.resolve(null);if(m)if((0,i.isStream)(m))d=e(m,c);else if(Array.isArray(m))d=Promise.resolve(m);else{(0,r.warn)("Unsupported mask format.");d=Promise.resolve(null)}else d=Promise.resolve(null)}return Promise.all([f,u,d]).then((function([e,t,r]){return new l({xref:a,res:n,image:e,isInline:o,smask:t,mask:r,pdfFunctionFactory:h})}))};l.createMask=function({imgArray:e,width:t,height:a,imageIsFromDecodeStream:r,inverseDecode:i}){var n,s,o=(t+7>>3)*a,c=e.byteLength;if(!r||i&&!(o===c))if(i){(n=new Uint8ClampedArray(o)).set(e);for(s=c;s<o;s++)n[s]=255}else(n=new Uint8ClampedArray(c)).set(e);else n=e;if(i)for(s=0;s<c;s++)n[s]^=255;return{data:n,width:t,height:a}};l.prototype={get drawWidth(){return Math.max(this.width,this.smask&&this.smask.width||0,this.mask&&this.mask.width||0)},get drawHeight(){return Math.max(this.height,this.smask&&this.smask.height||0,this.mask&&this.mask.height||0)},decodeBuffer(e){var a,r,i=this.bpc,n=this.numComps,s=this.decodeAddends,o=this.decodeCoefficients,c=(1<<i)-1;if(1!==i){var l=0;for(a=0,r=this.width*this.height;a<r;a++)for(var h=0;h<n;h++){e[l]=t(e[l],s[h],o[h],c);l++}}else for(a=0,r=e.length;a<r;a++)e[a]=+!e[a]},getComponents(e){var t=this.bpc;if(8===t)return e;var a=this.width,r=this.height,i=this.numComps,n=a*r*i,s=0;let o;o=t<=8?new Uint8Array(n):t<=16?new Uint16Array(n):new Uint32Array(n);var c,l,h=a*i,u=(1<<t)-1,d=0;if(1===t)for(var f,g,m,p=0;p<r;p++){g=d+(-8&h);m=d+h;for(;d<g;){l=e[s++];o[d]=l>>7&1;o[d+1]=l>>6&1;o[d+2]=l>>5&1;o[d+3]=l>>4&1;o[d+4]=l>>3&1;o[d+5]=l>>2&1;o[d+6]=l>>1&1;o[d+7]=1&l;d+=8}if(d<m){l=e[s++];f=128;for(;d<m;){o[d++]=+!!(l&f);f>>=1}}}else{var b=0;l=0;for(d=0,c=n;d<c;++d){if(d%h==0){l=0;b=0}for(;b<t;){l=l<<8|e[s++];b+=8}var y=b-t;let a=l>>y;a<0?a=0:a>u&&(a=u);o[d]=a;l&=(1<<y)-1;b=y}}return o},fillOpacity(e,t,i,n,s){var o,c,h,u,d,f,g=this.smask,m=this.mask;if(g){c=g.width;h=g.height;o=new Uint8ClampedArray(c*h);g.fillGrayBuffer(o);c===t&&h===i||(o=a(o,g.bpc,c,h,t,i))}else if(m)if(m instanceof l){c=m.width;h=m.height;o=new Uint8ClampedArray(c*h);m.numComps=1;m.fillGrayBuffer(o);for(u=0,d=c*h;u<d;++u)o[u]=255-o[u];c===t&&h===i||(o=a(o,m.bpc,c,h,t,i))}else{if(!Array.isArray(m))throw new r.FormatError("Unknown mask format.");o=new Uint8ClampedArray(t*i);var p=this.numComps;for(u=0,d=t*i;u<d;++u){var b=0,y=u*p;for(f=0;f<p;++f){var v=s[y+f],w=2*f;if(v<m[w]||v>m[w+1]){b=255;break}}o[u]=b}}if(o)for(u=0,f=3,d=t*n;u<d;++u,f+=4)e[f]=o[u];else for(u=0,f=3,d=t*n;u<d;++u,f+=4)e[f]=255},undoPreblend(e,t,a){var r=this.smask&&this.smask.matte;if(r)for(var i=this.colorSpace.getRgb(r,0),n=i[0],s=i[1],o=i[2],c=t*a*4,l=0;l<c;l+=4){var h=e[l+3];if(0!==h){var u=255/h;e[l]=(e[l]-n)*u+n;e[l+1]=(e[l+1]-s)*u+s;e[l+2]=(e[l+2]-o)*u+o}else{e[l]=255;e[l+1]=255;e[l+2]=255}}},createImageData(e=!1){var t,a=this.drawWidth,i=this.drawHeight,n={width:a,height:i,kind:0,data:null},c=this.numComps,l=this.width,h=this.height,u=this.bpc,d=l*c*u+7>>3;if(!e){var f;"DeviceGray"===this.colorSpace.name&&1===u?f=r.ImageKind.GRAYSCALE_1BPP:"DeviceRGB"!==this.colorSpace.name||8!==u||this.needsDecode||(f=r.ImageKind.RGB_24BPP);if(f&&!this.smask&&!this.mask&&a===l&&i===h){n.kind=f;t=this.getImageBytes(h*d);if(this.image instanceof s.DecodeStream)n.data=t;else{var g=new Uint8ClampedArray(t.length);g.set(t);n.data=g}if(this.needsDecode){(0,r.assert)(f===r.ImageKind.GRAYSCALE_1BPP,"PDFImage.createImageData: The image must be grayscale.");for(var m=n.data,p=0,b=m.length;p<b;p++)m[p]^=255}return n}if(this.image instanceof o.JpegStream&&!this.smask&&!this.mask){let e=h*d;switch(this.colorSpace.name){case"DeviceGray":e*=3;case"DeviceRGB":case"DeviceCMYK":n.kind=r.ImageKind.RGB_24BPP;n.data=this.getImageBytes(e,a,i,!0);return n}}}var y,v,w=0|(t=this.getImageBytes(h*d)).length/d*i/h,k=this.getComponents(t);if(e||this.smask||this.mask){n.kind=r.ImageKind.RGBA_32BPP;n.data=new Uint8ClampedArray(a*i*4);y=1;v=!0;this.fillOpacity(n.data,a,i,w,k)}else{n.kind=r.ImageKind.RGB_24BPP;n.data=new Uint8ClampedArray(a*i*3);y=0;v=!1}this.needsDecode&&this.decodeBuffer(k);this.colorSpace.fillRgb(n.data,l,h,a,i,w,u,k,y);v&&this.undoPreblend(n.data,a,w);return n},fillGrayBuffer(e){var t=this.numComps;if(1!==t)throw new r.FormatError(`Reading gray scale from a color image: ${t}`);var a,i,n=this.width,s=this.height,o=this.bpc,c=n*t*o+7>>3,l=this.getImageBytes(s*c),h=this.getComponents(l);if(1!==o){this.needsDecode&&this.decodeBuffer(h);i=n*s;var u=255/((1<<o)-1);for(a=0;a<i;++a)e[a]=u*h[a]}else{i=n*s;if(this.needsDecode)for(a=0;a<i;++a)e[a]=h[a]-1&255;else for(a=0;a<i;++a)e[a]=255&-h[a]}},getImageBytes(e,t,a,r=!1){this.image.reset();this.image.drawWidth=t||this.width;this.image.drawHeight=a||this.height;this.image.forceRGB=!!r;return this.image.getBytes(e,!0)}};return l}();t.PDFImage=l},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.isNodeJS=void 0;const r="object"==typeof process&&process+""=="[object process]"&&!process.versions.nw&&!process.versions.electron;t.isNodeJS=r},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.MessageHandler=void 0;var r=a(2);const i=1,n=2,s=1,o=2,c=3,l=4,h=5,u=6,d=7,f=8;function g(e){if("object"!=typeof e||null===e)return e;switch(e.name){case"AbortException":return new r.AbortException(e.message);case"MissingPDFException":return new r.MissingPDFException(e.message);case"UnexpectedResponseException":return new r.UnexpectedResponseException(e.message,e.status);case"UnknownErrorException":return new r.UnknownErrorException(e.message,e.details);default:return new r.UnknownErrorException(e.message,e.toString())}}t.MessageHandler=class{constructor(e,t,a){this.sourceName=e;this.targetName=t;this.comObj=a;this.callbackId=1;this.streamId=1;this.postMessageTransfers=!0;this.streamSinks=Object.create(null);this.streamControllers=Object.create(null);this.callbackCapabilities=Object.create(null);this.actionHandler=Object.create(null);this._onComObjOnMessage=e=>{const t=e.data;if(t.targetName!==this.sourceName)return;if(t.stream){this._processStreamMessage(t);return}if(t.callback){const e=t.callbackId,a=this.callbackCapabilities[e];if(!a)throw new Error(`Cannot resolve callback ${e}`);delete this.callbackCapabilities[e];if(t.callback===i)a.resolve(t.data);else{if(t.callback!==n)throw new Error("Unexpected callback case");a.reject(g(t.reason))}return}const r=this.actionHandler[t.action];if(!r)throw new Error(`Unknown action from worker: ${t.action}`);if(t.callbackId){const e=this.sourceName,s=t.sourceName;new Promise((function(e){e(r(t.data))})).then((function(r){a.postMessage({sourceName:e,targetName:s,callback:i,callbackId:t.callbackId,data:r})}),(function(r){a.postMessage({sourceName:e,targetName:s,callback:n,callbackId:t.callbackId,reason:g(r)})}))}else t.streamId?this._createStreamSink(t):r(t.data)};a.addEventListener("message",this._onComObjOnMessage)}on(e,t){const a=this.actionHandler;if(a[e])throw new Error(`There is already an actionName called "${e}"`);a[e]=t}send(e,t,a){this._postMessage({sourceName:this.sourceName,targetName:this.targetName,action:e,data:t},a)}sendWithPromise(e,t,a){const i=this.callbackId++,n=(0,r.createPromiseCapability)();this.callbackCapabilities[i]=n;try{this._postMessage({sourceName:this.sourceName,targetName:this.targetName,action:e,callbackId:i,data:t},a)}catch(e){n.reject(e)}return n.promise}sendWithStream(e,t,a,i){const n=this.streamId++,o=this.sourceName,c=this.targetName,l=this.comObj;return new ReadableStream({start:a=>{const s=(0,r.createPromiseCapability)();this.streamControllers[n]={controller:a,startCall:s,pullCall:null,cancelCall:null,isClosed:!1};this._postMessage({sourceName:o,targetName:c,action:e,streamId:n,data:t,desiredSize:a.desiredSize},i);return s.promise},pull:e=>{const t=(0,r.createPromiseCapability)();this.streamControllers[n].pullCall=t;l.postMessage({sourceName:o,targetName:c,stream:u,streamId:n,desiredSize:e.desiredSize});return t.promise},cancel:e=>{(0,r.assert)(e instanceof Error,"cancel must have a valid reason");const t=(0,r.createPromiseCapability)();this.streamControllers[n].cancelCall=t;this.streamControllers[n].isClosed=!0;l.postMessage({sourceName:o,targetName:c,stream:s,streamId:n,reason:g(e)});return t.promise}},a)}_createStreamSink(e){const t=this,a=this.actionHandler[e.action],i=e.streamId,n=this.sourceName,s=e.sourceName,o=this.comObj,u={enqueue(e,a=1,o){if(this.isCancelled)return;const c=this.desiredSize;this.desiredSize-=a;if(c>0&&this.desiredSize<=0){this.sinkCapability=(0,r.createPromiseCapability)();this.ready=this.sinkCapability.promise}t._postMessage({sourceName:n,targetName:s,stream:l,streamId:i,chunk:e},o)},close(){if(!this.isCancelled){this.isCancelled=!0;o.postMessage({sourceName:n,targetName:s,stream:c,streamId:i});delete t.streamSinks[i]}},error(e){(0,r.assert)(e instanceof Error,"error must have a valid reason");if(!this.isCancelled){this.isCancelled=!0;o.postMessage({sourceName:n,targetName:s,stream:h,streamId:i,reason:g(e)})}},sinkCapability:(0,r.createPromiseCapability)(),onPull:null,onCancel:null,isCancelled:!1,desiredSize:e.desiredSize,ready:null};u.sinkCapability.resolve();u.ready=u.sinkCapability.promise;this.streamSinks[i]=u;new Promise((function(t){t(a(e.data,u))})).then((function(){o.postMessage({sourceName:n,targetName:s,stream:f,streamId:i,success:!0})}),(function(e){o.postMessage({sourceName:n,targetName:s,stream:f,streamId:i,reason:g(e)})}))}_processStreamMessage(e){const t=e.streamId,a=this.sourceName,i=e.sourceName,n=this.comObj;switch(e.stream){case f:e.success?this.streamControllers[t].startCall.resolve():this.streamControllers[t].startCall.reject(g(e.reason));break;case d:e.success?this.streamControllers[t].pullCall.resolve():this.streamControllers[t].pullCall.reject(g(e.reason));break;case u:if(!this.streamSinks[t]){n.postMessage({sourceName:a,targetName:i,stream:d,streamId:t,success:!0});break}this.streamSinks[t].desiredSize<=0&&e.desiredSize>0&&this.streamSinks[t].sinkCapability.resolve();this.streamSinks[t].desiredSize=e.desiredSize;const{onPull:m}=this.streamSinks[e.streamId];new Promise((function(e){e(m&&m())})).then((function(){n.postMessage({sourceName:a,targetName:i,stream:d,streamId:t,success:!0})}),(function(e){n.postMessage({sourceName:a,targetName:i,stream:d,streamId:t,reason:g(e)})}));break;case l:(0,r.assert)(this.streamControllers[t],"enqueue should have stream controller");if(this.streamControllers[t].isClosed)break;this.streamControllers[t].controller.enqueue(e.chunk);break;case c:(0,r.assert)(this.streamControllers[t],"close should have stream controller");if(this.streamControllers[t].isClosed)break;this.streamControllers[t].isClosed=!0;this.streamControllers[t].controller.close();this._deleteStreamController(t);break;case h:(0,r.assert)(this.streamControllers[t],"error should have stream controller");this.streamControllers[t].controller.error(g(e.reason));this._deleteStreamController(t);break;case o:e.success?this.streamControllers[t].cancelCall.resolve():this.streamControllers[t].cancelCall.reject(g(e.reason));this._deleteStreamController(t);break;case s:if(!this.streamSinks[t])break;const{onCancel:p}=this.streamSinks[e.streamId];new Promise((function(t){t(p&&p(g(e.reason)))})).then((function(){n.postMessage({sourceName:a,targetName:i,stream:o,streamId:t,success:!0})}),(function(e){n.postMessage({sourceName:a,targetName:i,stream:o,streamId:t,reason:g(e)})}));this.streamSinks[t].sinkCapability.reject(g(e.reason));this.streamSinks[t].isCancelled=!0;delete this.streamSinks[t];break;default:throw new Error("Unexpected stream case")}}async _deleteStreamController(e){await Promise.allSettled([this.streamControllers[e].startCall,this.streamControllers[e].pullCall,this.streamControllers[e].cancelCall].map((function(e){return e&&e.promise})));delete this.streamControllers[e]}_postMessage(e,t){t&&this.postMessageTransfers?this.comObj.postMessage(e,t):this.comObj.postMessage(e)}destroy(){this.comObj.removeEventListener("message",this._onComObjOnMessage)}}},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.PDFWorkerStream=void 0;var r=a(2);t.PDFWorkerStream=class{constructor(e){this._msgHandler=e;this._contentLength=null;this._fullRequestReader=null;this._rangeRequestReaders=[]}getFullReader(){(0,r.assert)(!this._fullRequestReader);this._fullRequestReader=new i(this._msgHandler);return this._fullRequestReader}getRangeReader(e,t){const a=new n(e,t,this._msgHandler);this._rangeRequestReaders.push(a);return a}cancelAllRequests(e){this._fullRequestReader&&this._fullRequestReader.cancel(e);this._rangeRequestReaders.slice(0).forEach((function(t){t.cancel(e)}))}};class i{constructor(e){this._msgHandler=e;this.onProgress=null;this._contentLength=null;this._isRangeSupported=!1;this._isStreamingSupported=!1;const t=this._msgHandler.sendWithStream("GetReader");this._reader=t.getReader();this._headersReady=this._msgHandler.sendWithPromise("ReaderHeadersReady").then(e=>{this._isStreamingSupported=e.isStreamingSupported;this._isRangeSupported=e.isRangeSupported;this._contentLength=e.contentLength})}get headersReady(){return this._headersReady}get contentLength(){return this._contentLength}get isStreamingSupported(){return this._isStreamingSupported}get isRangeSupported(){return this._isRangeSupported}async read(){const{value:e,done:t}=await this._reader.read();return t?{value:void 0,done:!0}:{value:e.buffer,done:!1}}cancel(e){this._reader.cancel(e)}}class n{constructor(e,t,a){this._msgHandler=a;this.onProgress=null;const r=this._msgHandler.sendWithStream("GetRangeReader",{begin:e,end:t});this._reader=r.getReader()}get isStreamingSupported(){return!1}async read(){const{value:e,done:t}=await this._reader.read();return t?{value:void 0,done:!0}:{value:e.buffer,done:!1}}cancel(e){this._reader.cancel(e)}}}])}));
\ No newline at end of file diff --git a/src/server/public/assets/pinWithView.png b/src/server/public/assets/pinWithView.png Binary files differnew file mode 100644 index 000000000..eb0d09689 --- /dev/null +++ b/src/server/public/assets/pinWithView.png diff --git a/src/server/public/assets/presTrails.png b/src/server/public/assets/presTrails.png Binary files differnew file mode 100644 index 000000000..804075318 --- /dev/null +++ b/src/server/public/assets/presTrails.png diff --git a/src/server/public/assets/redx.png b/src/server/public/assets/redx.png Binary files differnew file mode 100644 index 000000000..0c2c9ccc5 --- /dev/null +++ b/src/server/public/assets/redx.png diff --git a/src/server/public/assets/startLink.png b/src/server/public/assets/startLink.png Binary files differnew file mode 100644 index 000000000..8f3825682 --- /dev/null +++ b/src/server/public/assets/startLink.png diff --git a/src/server/public/assets/unknown-file-icon-hi.png b/src/server/public/assets/unknown-file-icon-hi.png Binary files differnew file mode 100644 index 000000000..be8a5ece0 --- /dev/null +++ b/src/server/public/assets/unknown-file-icon-hi.png diff --git a/src/server/server_Initialization.ts b/src/server/server_Initialization.ts index ccb709453..afc6231e5 100644 --- a/src/server/server_Initialization.ts +++ b/src/server/server_Initialization.ts @@ -1,13 +1,9 @@ import * as bodyParser from 'body-parser'; import { blue, yellow } from 'colors'; -import * as cookieParser from 'cookie-parser'; import * as cors from 'cors'; import * as express from 'express'; import * as session from 'express-session'; -import * as expressValidator from 'express-validator'; -import * as fs from 'fs'; -import { Server as HttpServer } from 'http'; -import { createServer, Server as HttpsServer } from 'https'; +import { createServer } from 'https'; import * as passport from 'passport'; import * as request from 'request'; import * as webpack from 'webpack'; @@ -22,12 +18,11 @@ import { Database } from './database'; import RouteManager from './RouteManager'; import RouteSubscriber from './RouteSubscriber'; import { WebSocket } from './websocket'; -import brotli = require('brotli'); -import expressFlash = require('express-flash'); -import flash = require('connect-flash'); -const MongoStore = require('connect-mongo')(session); -const config = require('../../webpack.config'); -const compiler = webpack(config); +import * as expressFlash from 'express-flash'; +import * as flash from 'connect-flash'; +import * as brotli from 'brotli'; +import * as MongoStoreConnect from 'connect-mongo'; +import * as config from '../../webpack.config'; /* RouteSetter is a wrapper around the server that prevents the server from being exposed. */ @@ -40,32 +35,23 @@ export let resolvedServerUrl: string; export default async function InitializeServer(routeSetter: RouteSetter) { const isRelease = determineEnvironment(); const app = buildWithMiddleware(express()); - - const compiler = webpack(config); - - app.use( - require('webpack-dev-middleware')(compiler, { - publicPath: config.output.publicPath, - }) - ); - - app.use(require('webpack-hot-middleware')(compiler)); + const compiler = webpack(config as any); // route table managed by express. routes are tested sequentially against each of these map rules. when a match is found, the handler is called to process the request + app.use(wdm(compiler, { publicPath: config.output.publicPath })); + app.use(whm(compiler)); app.get(new RegExp(/^\/+$/), (req, res) => res.redirect(req.user ? '/home' : '/login')); // target urls that consist of one or more '/'s with nothing in between app.use(express.static(publicDirectory, { setHeaders: res => res.setHeader('Access-Control-Allow-Origin', '*') })); //all urls that start with dash's public directory: /files/ (e.g., /files/images, /files/audio, etc) app.use(cors({ origin: (_origin: any, callback: any) => callback(null, true) })); - app.use(wdm(compiler, { publicPath: config.output.publicPath })); - app.use(whm(compiler)); registerAuthenticationRoutes(app); // this adds routes to authenticate a user (login, etc) registerCorsProxy(app); // this adds a /corsProxy/ route to allow clients to get to urls that would otherwise be blocked by cors policies isRelease && !SSL.Loaded && SSL.exit(); routeSetter(new RouteManager(app, isRelease)); // this sets up all the regular supervised routes (things like /home, download/upload api's, pdf, search, session, etc) registerEmbeddedBrowseRelativePathHandler(app); // this allows renered web pages which internally have relative paths to find their content - let server: HttpServer | HttpsServer; isRelease && process.env.serverPort && (resolvedPorts.server = Number(process.env.serverPort)); - await new Promise<void>(resolve => (server = isRelease ? createServer(SSL.Credentials, app).listen(resolvedPorts.server, resolve) : app.listen(resolvedPorts.server, resolve))); + const server = isRelease ? createServer(SSL.Credentials, app) : app; + await new Promise<void>(resolve => server.listen(resolvedPorts.server, resolve)); logPort('server', resolvedPorts.server); resolvedServerUrl = `${isRelease && process.env.serverName ? `https://${process.env.serverName}.com` : 'http://localhost'}:${resolvedPorts.server}`; @@ -80,26 +66,26 @@ export default async function InitializeServer(routeSetter: RouteSetter) { const week = 7 * 24 * 60 * 60 * 1000; const secret = '64d6866242d3b5a5503c675b32c9605e4e90478e9b77bcf2bc'; +const store = process.env.DB === 'MEM' ? new session.MemoryStore() : MongoStoreConnect.create({ mongoUrl: Database.url }); function buildWithMiddleware(server: express.Express) { [ - cookieParser(), session({ secret, - resave: true, + resave: false, cookie: { maxAge: week }, saveUninitialized: true, - store: process.env.DB === 'MEM' ? new session.MemoryStore() : new MongoStore({ url: Database.url }), + store, }), flash(), expressFlash(), bodyParser.json({ limit: '10mb' }), bodyParser.urlencoded({ extended: true }), - expressValidator(), passport.initialize(), passport.session(), (req: express.Request, res: express.Response, next: express.NextFunction) => { res.locals.user = req.user; + // console.log('HEADER:' + req.originalUrl + ' path = ' + req.path); if ((req.originalUrl.endsWith('.png') || req.originalUrl.endsWith('.jpg') || (process.env.RELEASE === 'true' && req.originalUrl.endsWith('.js'))) && req.method === 'GET') { const period = 30000; res.set('Cache-control', `public, max-age=${period}`); @@ -110,6 +96,7 @@ function buildWithMiddleware(server: express.Express) { next(); }, ].forEach(next => server.use(next)); + return server; } diff --git a/src/server/websocket.ts b/src/server/websocket.ts index be5cdb202..a26b81bdf 100644 --- a/src/server/websocket.ts +++ b/src/server/websocket.ts @@ -1,10 +1,8 @@ import { blue } from 'colors'; import * as express from 'express'; -import { createServer, Server } from 'https'; +import { createServer } from 'https'; +import { Server, Socket } from '../../node_modules/socket.io/dist/index'; import { networkInterfaces } from 'os'; -import * as sio from 'socket.io'; -import { Socket } from 'socket.io'; -import { Opt } from '../fields/Doc'; import { Utils } from '../Utils'; import { logPort } from './ActionUtilities'; import { timeMap } from './ApiManagers/UserManager'; @@ -18,31 +16,31 @@ import { DocumentsCollection } from './IDatabase'; import { Diff, GestureContent, MessageStore, MobileDocumentUploadContent, MobileInkOverlayContent, Transferable, Types, UpdateMobileInkOverlayPositionContent, YoutubeQueryInput, YoutubeQueryTypes } from './Message'; import { Search } from './Search'; import { resolvedPorts } from './server_Initialization'; -var _ = require('lodash'); +import * as _ from 'lodash'; export namespace WebSocket { export let _socket: Socket; export const clients: { [key: string]: Client } = {}; - export const socketMap = new Map<SocketIO.Socket, string>(); + export const socketMap = new Map<Socket, string>(); export const userOperations = new Map<string, number>(); export let disconnect: Function; export async function initialize(isRelease: boolean, app: express.Express) { - let io: sio.Server; + let io: Server; if (isRelease) { const { socketPort } = process.env; if (socketPort) { resolvedPorts.socket = Number(socketPort); } - let socketEndpoint: Opt<Server>; - await new Promise<void>(resolve => (socketEndpoint = createServer(SSL.Credentials, app).listen(resolvedPorts.socket, resolve))); - io = sio(socketEndpoint!, SSL.Credentials as any); + io = new Server(createServer(SSL.Credentials, app), SSL.Credentials as any); + io.listen(resolvedPorts.socket); } else { - io = sio().listen(resolvedPorts.socket); + io = new Server(); + io.listen(resolvedPorts.socket); } logPort('websocket', resolvedPorts.socket); - io.on('connection', function (socket: Socket) { + io.on('connection', socket => { _socket = socket; socket.use((_packet, next) => { const userEmail = socketMap.get(socket); @@ -67,8 +65,8 @@ export namespace WebSocket { socket.on('create or join', function (room) { console.log('Received request to create or join room ' + room); - const clientsInRoom = socket.adapter.rooms[room]; - const numClients = clientsInRoom ? Object.keys(clientsInRoom.sockets).length : 0; + const clientsInRoom = socket.rooms.has(room); + const numClients = clientsInRoom ? Object.keys(room.sockets).length : 0; console.log('Room ' + room + ' now has ' + numClients + ' client(s)'); if (numClients === 0) { @@ -90,7 +88,7 @@ export namespace WebSocket { socket.on('ipaddr', function () { const ifaces = networkInterfaces(); for (const dev in ifaces) { - ifaces[dev].forEach(function (details) { + ifaces[dev]?.forEach(function (details) { if (details.family === 'IPv4' && details.address !== '127.0.0.1') { socket.emit('ipaddr', details.address); } @@ -191,7 +189,7 @@ export namespace WebSocket { initializeGuest(); } - function barReceived(socket: SocketIO.Socket, userEmail: string) { + function barReceived(socket: Socket, userEmail: string) { clients[userEmail] = new Client(userEmail.toString()); const currentdate = new Date(); const datetime = currentdate.getDate() + '/' + (currentdate.getMonth() + 1) + '/' + currentdate.getFullYear() + ' @ ' + currentdate.getHours() + ':' + currentdate.getMinutes() + ':' + currentdate.getSeconds(); @@ -308,9 +306,9 @@ export namespace WebSocket { if (sendBack) { console.log('Warning: list modified during update. Composite list is being returned.'); const id = socket.id; - socket.id = ''; + (socket as any).id = ''; socket.broadcast.emit(MessageStore.UpdateField.Message, diff); - socket.id = id; + (socket as any).id = id; } else socket.broadcast.emit(MessageStore.UpdateField.Message, diff); dispatchNextOp(diff.id); }, @@ -401,9 +399,9 @@ export namespace WebSocket { // the two copies are different, so the server sends its copy. console.log('SEND BACK'); const id = socket.id; - socket.id = ''; + (socket as any).id = ''; socket.broadcast.emit(MessageStore.UpdateField.Message, diff); - socket.id = id; + (socket as any).id = id; } else socket.broadcast.emit(MessageStore.UpdateField.Message, diff); dispatchNextOp(diff.id); }, diff --git a/src/typings/index.d.ts b/src/typings/index.d.ts index 23e4680fd..d46977816 100644 --- a/src/typings/index.d.ts +++ b/src/typings/index.d.ts @@ -2,17 +2,21 @@ declare module 'googlephotos'; declare module 'cors'; +declare module 'image-data-uri'; +declare module 'md5-file'; +declare module 'jpeg-autorotate'; declare module 'webrtc-adapter'; declare module 'bezier-curve'; declare module 'fit-curve'; -declare module 'react-audio-waveform'; declare module 'iink-js'; +declare module 'pdfjs-dist/web/pdf_viewer'; +declare module 'react-jsx-parser'; -declare module 'reveal'; -declare module 'react-reveal'; -declare module 'react-reveal/makeCarousel'; -declare module 'react-resizable-rotatable-draggable'; +declare module 'express-flash'; +declare module 'connect-flash'; +declare module 'connect-mongo'; +declare module '@mui/material'; declare module '@react-pdf/renderer' { import * as React from 'react'; |
