>(() => {})\n\nexport function withElementStyleDialogState(Component: React.ComponentType
) {\n return function WrappedComponent(props: P) {\n const context = React.useContext(ElementStyleDialogContext)\n\n return \n }\n}\n\nexport function ElementStyleDialogWrapper(props: { children: React.ReactNode }) {\n const [element, setElement] = React.useState(null)\n const [onSubmit, setOnSubmit] = React.useState(null)\n const [onDismiss, setOnDismiss] = React.useState(null)\n const dialog = useDialogState({ modal: false })\n\n const openDialog = (element: CanvasElement, onSubmit?: OnSubmitType, onDismiss?: OnDismissType) => {\n if (onSubmit) {\n setOnSubmit(() => onSubmit)\n }\n if (onDismiss) {\n setOnDismiss(() => onDismiss)\n }\n\n setElement(element)\n dialog.show()\n }\n\n const onHide = () => {\n setElement(null)\n setOnSubmit(null)\n setOnDismiss(null)\n }\n\n return (\n \n {props.children}\n {element && (\n \n )}\n \n )\n}\n","import { ChartConfigChartPane } from '../../../types/shared'\nimport { IndicatorType } from '../../constants/common'\nimport ChartLayout from '../../models/chart_layout'\nimport Element from '../../models/element'\nimport PaneModel from '../../models/pane'\nimport { HLC, compareHlc, incrementHlc, receiveHlc } from '../../utils/hlc'\nimport {\n AutoSaveChangeType,\n AutoSaveElement,\n AutoSaveElementDBRecord,\n DrawingChangeTimestamp,\n DrawingContainerType,\n} from './constants'\n\nexport function getContainerTypeFromPaneConfig(pane: ChartConfigChartPane) {\n const indicatorElement = pane.elements.find((el) => el.type.startsWith('indicators/'))\n if (indicatorElement) {\n return indicatorElement.type as DrawingContainerType\n }\n const chartElement = pane.elements.find((el) => el.type.startsWith('charts/'))\n if (chartElement) {\n return 'chart'\n }\n return null\n}\n\nexport function getContainerType(model: PaneModel) {\n const mainElement = model.mainElement()\n const indicatorType = mainElement?.instance?.type ?? null\n if (mainElement?.isIndicator() && indicatorType !== IndicatorType.None) {\n return indicatorType as DrawingContainerType\n }\n if (mainElement?.isChart()) {\n return 'chart'\n }\n return null\n}\n\nexport function updateInternalStoreWithChangedElement({\n element,\n changeType,\n currentInternalStore,\n lastUpdateTimestamp,\n}: {\n element: Element\n changeType: AutoSaveChangeType\n currentInternalStore: AutoSaveElement[]\n lastUpdateTimestamp: HLC\n}) {\n const paneModel = element.pane()\n const ticker = paneModel.getQuoteRawTicker()\n const containerType = getContainerType(paneModel)\n if (ticker && paneModel && containerType && (!element.destroyed || changeType === 'destroy')) {\n const instanceJson = element.instance.toAutosaveConfig()\n const newDrawing: AutoSaveElement = {\n elementId: element.elementId!,\n zIndex: element.zIndex,\n ticker,\n lastChange: lastUpdateTimestamp,\n changeType,\n containerType,\n elementAttrs: JSON.stringify(instanceJson),\n }\n\n const newInternalStore = [...currentInternalStore]\n const updateDrawingIndex = newInternalStore.findIndex(\n (drawingElement) => drawingElement.elementId === newDrawing.elementId\n )\n\n let shouldSyncAndSave = false\n if (updateDrawingIndex > -1) {\n const updatedRecord = newInternalStore[updateDrawingIndex]\n const hasChangedZIndex = updatedRecord.zIndex !== newDrawing.zIndex\n const hasChangedType = updatedRecord.changeType !== newDrawing.changeType\n const hasChangedAttrs = updatedRecord.elementAttrs !== newDrawing.elementAttrs\n const hasChange = hasChangedType || hasChangedAttrs || hasChangedZIndex\n if (\n !element.instance.isEditInProgress &&\n updatedRecord.ticker === ticker &&\n hasChange &&\n updatedRecord.changeType !== 'destroy'\n ) {\n newInternalStore[updateDrawingIndex] = newDrawing\n shouldSyncAndSave = true\n }\n } else {\n newInternalStore.push(newDrawing)\n shouldSyncAndSave = true\n }\n\n return {\n newInternalStore,\n shouldSyncAndSave,\n newDrawing,\n }\n }\n}\n\nexport function getTickersAndContainerTypesInLayoutModel(chartLayout: ChartLayout) {\n const tickers: string[] = []\n const containerTypes: Array = ['note']\n\n chartLayout.getAllPanes().forEach((paneModel) => {\n const ticker = paneModel.getQuoteRawTicker()\n const containerType = getContainerType(paneModel)\n if (ticker && !tickers.includes(ticker)) {\n tickers.push(ticker)\n }\n if (containerType && !containerTypes.includes(containerType)) {\n containerTypes.push(containerType)\n }\n })\n return { tickers, containerTypes }\n}\n\nexport function mergeUpdatedDrawingsToInternalStore({\n updatedDrawings,\n currentInternalStore,\n lastUpdateTimestamp,\n isRefetchAll,\n}: {\n updatedDrawings: AutoSaveElement[]\n currentInternalStore: AutoSaveElement[]\n lastUpdateTimestamp: DrawingChangeTimestamp\n isRefetchAll: boolean\n}) {\n let newLastUpdateTimestamp = lastUpdateTimestamp\n const newInternalStore = [...currentInternalStore]\n const updatedElementIds: string[] = []\n\n updatedDrawings.forEach((drawing) => {\n newLastUpdateTimestamp = receiveHlc(newLastUpdateTimestamp, drawing.lastChange)\n const drawingIndex = newInternalStore.findIndex(({ elementId }) => drawing.elementId === elementId)\n const currentDrawing = drawingIndex > -1 ? newInternalStore[drawingIndex] : null\n if (currentDrawing === null) {\n newInternalStore.push(drawing)\n updatedElementIds.push(drawing.elementId)\n } else if (currentDrawing.containerType === 'note' && isRefetchAll) {\n const currentNote = getElementNoteText(currentDrawing)\n const autoSavedNote = getElementNoteText(drawing)\n if (currentNote !== autoSavedNote) {\n newInternalStore[drawingIndex] = {\n ...drawing,\n lastChange: incrementHlc(receiveHlc(currentDrawing.lastChange, drawing.lastChange), Date.now()),\n elementAttrs: JSON.stringify({\n ...JSON.parse(drawing.elementAttrs),\n text: `${currentNote}\\r\\n${autoSavedNote}`,\n }),\n }\n }\n updatedElementIds.push(drawing.elementId)\n } else if (compareHlc(newInternalStore[drawingIndex].lastChange, drawing.lastChange) < 0) {\n newInternalStore[drawingIndex] = drawing\n updatedElementIds.push(drawing.elementId)\n }\n })\n return { newLastUpdateTimestamp, newInternalStore, updatedElementIds }\n}\n\nexport function getInitialStoreDrawings(): null | AutoSaveElement[] {\n const initialDrawings = (\n window.FinvizSettings?.initialDrawingsStore ?? window.FinvizChartsSettings?.initialDrawingsStore\n )?.drawings as null | AutoSaveElementDBRecord[]\n\n return initialDrawings?.map((item) => getAutosaveElementFromDBRecord(item)) ?? null\n}\n\nexport function handleCallMethodOnAllDrawings({\n chartLayoutModel,\n elementMethod,\n}: {\n chartLayoutModel: ChartLayout\n elementMethod: keyof Pick\n}) {\n chartLayoutModel.getAllElements().forEach((element) => {\n if (element.isDrawing()) {\n element[elementMethod]()\n }\n })\n}\n\nexport function getNoteElementId(ticker: string) {\n return `note-${ticker}`\n}\n\nexport function getElementNoteText(noteElement?: AutoSaveElement) {\n return (noteElement ? JSON.parse(noteElement.elementAttrs)?.text : '') ?? ''\n}\n\nexport function getTickerNoteText({ ticker, elements }: { ticker: string; elements: AutoSaveElement[] }) {\n const noteElement = elements.find(({ elementId }) => elementId === getNoteElementId(ticker))\n return getElementNoteText(noteElement)\n}\n\nexport function getAutosaveElementFromDBRecord(item: AutoSaveElementDBRecord): AutoSaveElement {\n return {\n elementId: item.elementId,\n ticker: item.ticker,\n zIndex: item.zIndex,\n changeType: item.changeType,\n containerType: item.containerType,\n elementAttrs: item.elementAttrs,\n lastChange: {\n ts: item.lastChangeTimestamp,\n count: item.lastChangeCounter,\n uuid: item.lastChangeNodeUUID,\n },\n }\n}\n\nexport function getDBRecordFromAutosaveElement(item: AutoSaveElement): Omit {\n return {\n elementId: item.elementId,\n ticker: item.ticker,\n zIndex: item.zIndex,\n changeType: item.changeType,\n containerType: item.containerType,\n elementAttrs: JSON.stringify(item.elementAttrs),\n lastChangeTimestamp: item.lastChange.ts,\n lastChangeCounter: item.lastChange.count,\n lastChangeNodeUUID: item.lastChange.uuid,\n }\n}\n","import { IndicatorType } from '../../constants/common'\nimport { HLC } from '../../utils/hlc'\n\nexport type DrawingChangeTimestamp = HLC\nexport type DrawingContainerType = IndicatorType | 'chart' | 'note' | null\nexport type AutoSaveChangeType = 'update' | 'destroy'\n\nexport interface AutoSaveElement {\n elementId: string\n ticker: string\n zIndex: number\n lastChange: DrawingChangeTimestamp\n changeType: AutoSaveChangeType\n containerType: DrawingContainerType\n elementAttrs: string\n}\n\nexport type AutoSaveElementDBRecord = Omit & { lastChange: string } & {\n lastChangeTimestamp: number\n lastChangeCounter: number\n lastChangeNodeUUID: string\n}\n\nexport const DRAWINGS_UPDATE_INTERVAL_MS = process.env.IS_E2E_TESTING ? 3000 : 15000\nexport const DRAWINGS_SAVE_INTERVAL_MS = 250\n","import React from 'react'\n\nimport fetchApi, {\n ContentType,\n ForbiddenError,\n GenericStatusCodeError,\n InternalServerError,\n} from '../../utils/fetch_api'\nimport { getUuid } from '../../utils/helpers'\nimport { HLC, compareHlc, incrementHlc } from '../../utils/hlc'\nimport { getByteLengthOfString } from '../../utils/string-byte-length'\nimport { AutoSaveElement, AutoSaveElementDBRecord, DrawingContainerType } from './constants'\nimport { getAutosaveElementFromDBRecord, getDBRecordFromAutosaveElement } from './utils'\n\nconst RETRY_LIMIT = 5\n\nexport function useDrawingAutoSaveApi() {\n const postRetryCountRef = React.useRef(0)\n const deleteRetryCountRef = React.useRef(0)\n\n const fetchDrawings = React.useCallback(\n async ({\n tickers,\n containerTypes,\n lastChange,\n }: {\n tickers: string[]\n containerTypes: DrawingContainerType[]\n lastChange: HLC\n }) => {\n try {\n const data = await fetchApi<{\n drawings: AutoSaveElementDBRecord[]\n }>({\n location: '/api/auto_save.ashx',\n queryParameters: {\n ticker: tickers.join(','),\n containerTypes: containerTypes.join(',') || undefined,\n lastChangeTimestamp: lastChange.ts,\n lastChangeCounter: lastChange.count,\n lastChangeNodeUUID: lastChange.uuid,\n },\n throwOnStatusCodes: [403, 404],\n })\n return data.drawings.map((drawing) => getAutosaveElementFromDBRecord(drawing))\n } catch {\n // ignore error\n }\n\n return []\n },\n []\n )\n\n const saveDrawings = React.useCallback(async (drawings: AutoSaveElement[]): Promise => {\n if (drawings.length === 0) {\n return undefined\n }\n\n try {\n const bodyJsonString = JSON.stringify(drawings.map((item) => getDBRecordFromAutosaveElement(item)))\n let keepalive = false\n try {\n keepalive = getByteLengthOfString(bodyJsonString) < 64000\n } catch (error: any) {\n window.Sentry?.captureException(error)\n }\n await fetchApi({\n location: '/api/auto_save.ashx',\n method: 'POST',\n throwOnStatusCodes: [400, 403, 404, 500],\n contentType: ContentType.ApplicationJson,\n body: bodyJsonString,\n keepalive,\n })\n const [latestChangeHlc] = [...drawings].sort((a, b) => compareHlc(b.lastChange, a.lastChange))\n postRetryCountRef.current = 0\n return latestChangeHlc.lastChange\n } catch (error) {\n if (error instanceof InternalServerError) {\n // try again\n if (postRetryCountRef.current < RETRY_LIMIT) {\n postRetryCountRef.current = postRetryCountRef.current + 1\n await new Promise((r) => setTimeout(r, 1000))\n return saveDrawings(drawings)\n } else {\n // continue to report to Sentry\n postRetryCountRef.current = 0\n }\n } else if (error instanceof ForbiddenError) {\n // ignore error\n return undefined\n }\n\n // report error to Sentry\n window.Sentry?.captureException(error, {\n extra: (error instanceof GenericStatusCodeError\n ? (error.response as ObjectHash).invalidItems\n : drawings\n ).reduce(\n (acc: ObjectHash, cur: ObjectHash, index: number) => ({ ...acc, [`item-${index}`]: JSON.stringify(cur) }),\n {} as ObjectHash\n ),\n })\n\n return undefined\n }\n }, [])\n\n const deleteAllDrawings = React.useCallback(\n async ({ tickers, lastLocalChange }: { tickers: string[]; lastLocalChange: HLC }): Promise => {\n try {\n const newHlc = {\n ...incrementHlc(lastLocalChange, Date.now()),\n uuid: getUuid(), // we provide new UUID for HLC so we can fetch 'destroy' changes in next GET request\n }\n await fetchApi({\n location: `/api/auto_save.ashx?ticker=${tickers.join(',')}&lastChangeTimestamp=${\n newHlc.ts\n }&lastChangeCounter=${newHlc.count}&lastChangeNodeUUID=${newHlc.uuid}`,\n method: 'DELETE',\n throwOnStatusCodes: [403, 404, 500],\n keepalive: true,\n })\n deleteRetryCountRef.current = 0\n } catch (error) {\n if (error instanceof InternalServerError) {\n // try again\n if (deleteRetryCountRef.current < RETRY_LIMIT) {\n deleteRetryCountRef.current = deleteRetryCountRef.current + 1\n await new Promise((r) => setTimeout(r, 1000))\n return deleteAllDrawings({ tickers, lastLocalChange })\n } else {\n // continue to report to Sentry\n deleteRetryCountRef.current = 0\n }\n } else if (error instanceof ForbiddenError) {\n // ignore error\n return\n }\n\n // report error to Sentry\n window.Sentry?.captureException(error)\n }\n },\n []\n )\n\n return { fetchDrawings, saveDrawings, deleteAllDrawings }\n}\n","// byteLengthCharCode2 from https://stackoverflow.com/a/63893237\n\nexport function getByteLengthOfString(s: string) {\n //assuming the String is UCS-2(aka UTF-16) encoded\n let n = 0\n for (let i = 0, l = s.length; i < l; i++) {\n const hi = s.charCodeAt(i)\n if (hi < 0x0080) {\n n += 1\n } else if (hi < 0x0800) {\n n += 2\n } else if (hi < 0xd800) {\n n += 3\n } else if (hi < 0xdc00) {\n const lo = s.charCodeAt(++i)\n if (i < l && lo >= 0xdc00 && lo <= 0xdfff) {\n n += 4\n } else {\n throw new Error('UCS-2 String malformed')\n }\n } else if (hi < 0xe000) {\n throw new Error('UCS-2 String malformed')\n } else {\n n += 3\n }\n }\n return n\n}\n","import React from 'react'\n\nimport { DrawingSpineOptions, DrawingSpineOptionsEvent } from '../../../types/shared'\nimport ElementCanvas from '../../canvas/element'\nimport { SpecificChartFunctionality } from '../../constants/common'\nimport { getCanvasElementByType } from '../../helpers/get-canvas-element-by-type'\nimport ChartLayout from '../../models/chart_layout'\nimport { AutoSaveState } from '../../models/constants'\nimport Element from '../../models/element'\nimport { compareHlc, incrementHlc, initHlc, receiveHlc } from '../../utils/hlc'\nimport { AutoSaveChangeType, AutoSaveElement, DRAWINGS_SAVE_INTERVAL_MS } from './constants'\nimport { useDrawingAutoSaveApi } from './use-drawing-autosave-api'\nimport { useIsAutoSaveActive } from './use-is-auto-save-active'\nimport {\n getContainerType,\n getNoteElementId,\n getTickerNoteText,\n getTickersAndContainerTypesInLayoutModel,\n mergeUpdatedDrawingsToInternalStore,\n updateInternalStoreWithChangedElement,\n} from './utils'\n\nexport function useDrawingAutoSaveControls(chartLayout: ChartLayout) {\n const { fetchDrawings, saveDrawings, deleteAllDrawings } = useDrawingAutoSaveApi()\n const isAutoSaveActive = useIsAutoSaveActive(chartLayout)\n const drawingsInternalStore = React.useMemo(() => chartLayout.drawingsInternalStore(), [chartLayout])\n const saveTimeoutRef = React.useRef()\n\n React.useEffect(\n () => () => {\n if (saveTimeoutRef.current) {\n clearTimeout(saveTimeoutRef.current)\n }\n },\n []\n )\n\n const saveLatestChanges = React.useCallback(\n (\n withDelayInMs = DRAWINGS_SAVE_INTERVAL_MS,\n saveQueueExtraFilterCallback: ((item: AutoSaveElement) => boolean) | null = null\n ) => {\n if (saveTimeoutRef.current) {\n clearTimeout(saveTimeoutRef.current)\n }\n const saveQueue = drawingsInternalStore.elements.filter(\n (item) =>\n compareHlc(item.lastChange, drawingsInternalStore.latestLocalUpdateTimestamp) > 0 &&\n item.lastChange.uuid === drawingsInternalStore.instanceUUID &&\n (saveQueueExtraFilterCallback === null || saveQueueExtraFilterCallback(item))\n )\n if (saveQueue.length === 0) {\n return\n }\n\n drawingsInternalStore.setAutoSaveState(AutoSaveState.Unsaved)\n\n const save = async () => {\n drawingsInternalStore.setAutoSaveState(AutoSaveState.Saving)\n const result = await saveDrawings(saveQueue)\n if (result) {\n drawingsInternalStore.updateAttributes({\n latestLocalUpdateTimestamp: receiveHlc(drawingsInternalStore.latestLocalUpdateTimestamp, result),\n })\n }\n drawingsInternalStore.setAutoSaveState(AutoSaveState.Saved)\n\n return result\n }\n\n if (withDelayInMs === 0) {\n return save()\n }\n\n saveTimeoutRef.current = setTimeout(save, withDelayInMs)\n },\n [saveDrawings, drawingsInternalStore]\n )\n\n const syncChartLayoutDrawings = React.useCallback(\n (drawing: AutoSaveElement) => {\n if (drawing.containerType === 'note') {\n return\n }\n const isRemove = drawing.changeType === 'destroy'\n\n chartLayout.getAllPanes().forEach((paneModel) => {\n const ticker = paneModel.getQuoteRawTicker()\n const paneContainerType = getContainerType(paneModel)\n if (!paneContainerType || drawing.ticker !== ticker) {\n return\n }\n const paneInternalStoreElements = drawingsInternalStore.elements.filter(\n (autoSaveElement) => autoSaveElement.ticker === ticker && autoSaveElement.containerType === paneContainerType\n )\n const paneElements = paneModel.getAllElements()\n let element: Element | undefined\n paneElements.forEach((paneElement) => {\n if (paneElement.isDrawing() && !paneElement.instance.isCreator) {\n const paneDrawing = paneInternalStoreElements.find(({ elementId }) => elementId === paneElement.elementId)\n if (!paneDrawing || paneDrawing.changeType === 'destroy') {\n paneElement.destroyCascade()\n } else if (paneElement.elementId && paneElement.elementId === drawing.elementId) {\n element = paneElement\n }\n }\n })\n\n const parsedElementAttrs = JSON.parse(drawing.elementAttrs)\n if (element) {\n if (drawing.elementAttrs !== JSON.stringify(element.instance.toAutosaveConfig())) {\n if (element.pane().selection !== element.instance && !element.hasOngoingInteraction()) {\n element.instance.set(parsedElementAttrs)\n element.instance.updateScales()\n }\n }\n if (drawing.zIndex !== element.zIndex) {\n element.updateAttributes({ zIndex: drawing.zIndex })\n }\n if (isRemove || paneContainerType !== drawing.containerType) {\n element.destroyCascade()\n }\n } else if (!isRemove && paneContainerType === drawing.containerType) {\n const instance = getCanvasElementByType(parsedElementAttrs.type).fromObject(\n parsedElementAttrs,\n paneModel\n ) as ElementCanvas\n paneModel.elements().create({ elementId: drawing.elementId, instance, zIndex: drawing.zIndex })\n instance.updateScales()\n }\n })\n },\n [chartLayout, drawingsInternalStore]\n )\n\n const handleAutoSaveNoteChange = React.useCallback(\n (note: string, ticker?: string) => {\n if (ticker) {\n const newNoteElement: AutoSaveElement = {\n elementId: getNoteElementId(ticker),\n zIndex: 0,\n ticker: ticker,\n lastChange: incrementHlc(drawingsInternalStore.latestLocalUpdateTimestamp, Date.now()),\n changeType: 'update',\n containerType: 'note',\n elementAttrs: JSON.stringify({ text: note }),\n }\n\n drawingsInternalStore.updateAttributes({\n elements: [\n ...drawingsInternalStore.elements.filter(({ elementId }) => elementId !== newNoteElement.elementId),\n newNoteElement,\n ],\n })\n }\n },\n [drawingsInternalStore]\n )\n\n const handleIdeaNoteChange = React.useCallback(\n (note: string) => {\n if (chartLayout.idea?.note !== note && (chartLayout.idea || note)) {\n chartLayout.updateAttribute('idea', { ...chartLayout.idea, note })\n handleAutoSaveNoteChange(note, chartLayout.activeChart?.getQuoteRawTicker() ?? undefined)\n }\n },\n [chartLayout, handleAutoSaveNoteChange]\n )\n\n const checkDrawingUpdate = React.useCallback(\n async (isRefetchAll = false) => {\n const { tickers, containerTypes } = getTickersAndContainerTypesInLayoutModel(chartLayout)\n if (isRefetchAll) {\n drawingsInternalStore.updateAttributes({\n latestRemoteUpdateTimestamp: initHlc(drawingsInternalStore.instanceUUID, 0),\n })\n }\n\n const updatedDrawings = await fetchDrawings({\n tickers,\n containerTypes,\n lastChange: drawingsInternalStore.latestRemoteUpdateTimestamp,\n })\n const { newLastUpdateTimestamp, updatedElementIds, newInternalStore } = mergeUpdatedDrawingsToInternalStore({\n updatedDrawings,\n currentInternalStore: drawingsInternalStore.elements,\n lastUpdateTimestamp: drawingsInternalStore.latestRemoteUpdateTimestamp,\n isRefetchAll,\n })\n\n drawingsInternalStore.updateAttributes({\n // Even if there are no changes in elements, newInternalStore is new array with the same content which may cause unnecessary rerenders\n ...(updatedElementIds.length > 0 ? { elements: newInternalStore } : {}),\n latestRemoteUpdateTimestamp: newLastUpdateTimestamp,\n latestLocalUpdateTimestamp:\n isRefetchAll && newInternalStore.length > 0\n ? receiveHlc(drawingsInternalStore.latestLocalUpdateTimestamp, newLastUpdateTimestamp)\n : drawingsInternalStore.latestLocalUpdateTimestamp,\n })\n\n if (updatedElementIds.length > 0 || isRefetchAll) {\n saveLatestChanges(0)\n const allElements = chartLayout.getAllElements()\n updatedElementIds.forEach((elementId) => {\n const element = allElements.find((element) => element.elementId === elementId)\n\n if (element && element.isDrawing() && !element.hasOngoingInteraction()) {\n element.destroyCascade()\n }\n })\n\n drawingsInternalStore.elements.forEach(syncChartLayoutDrawings)\n chartLayout.getAllPanes().forEach((paneModel) => {\n paneModel.normalizeZIndexes()\n })\n\n if (chartLayout.specificChartFunctionality === SpecificChartFunctionality.quotePage) {\n const activeTicker = chartLayout.activeChart?.getQuoteRawTicker() ?? ''\n handleIdeaNoteChange(getTickerNoteText({ ticker: activeTicker, elements: newInternalStore }))\n }\n }\n },\n [\n chartLayout,\n drawingsInternalStore,\n syncChartLayoutDrawings,\n fetchDrawings,\n handleIdeaNoteChange,\n saveLatestChanges,\n ]\n )\n\n const updateInternalStoreWithElement = React.useCallback(\n (element: Element, changeType: AutoSaveChangeType) => {\n const updateResult = updateInternalStoreWithChangedElement({\n element,\n changeType,\n currentInternalStore: drawingsInternalStore.elements,\n lastUpdateTimestamp: incrementHlc(\n receiveHlc(\n drawingsInternalStore.latestLocalUpdateTimestamp,\n drawingsInternalStore.latestRemoteUpdateTimestamp\n ),\n Date.now()\n ),\n })\n\n if (updateResult) {\n const { shouldSyncAndSave, newInternalStore, newDrawing } = updateResult\n if (shouldSyncAndSave) {\n drawingsInternalStore.updateAttributes({ elements: newInternalStore })\n syncChartLayoutDrawings(newDrawing)\n }\n }\n },\n [syncChartLayoutDrawings, drawingsInternalStore]\n )\n\n const deleteAllAutoSavedElements = React.useCallback(async () => {\n const { tickers } = getTickersAndContainerTypesInLayoutModel(chartLayout)\n\n await deleteAllDrawings({ tickers, lastLocalChange: drawingsInternalStore.latestLocalUpdateTimestamp })\n await checkDrawingUpdate()\n }, [chartLayout, deleteAllDrawings, drawingsInternalStore, checkDrawingUpdate])\n\n const onElementChange = React.useCallback(\n (element: Element, _?: any, options?: DrawingSpineOptions) => {\n const elementPane = element.pane()\n // This may happen if pane had been removed already, in most cases \"element.destroyed\" should be true,\n // but we would need to check if it was destroyed by delete drawing action or not, and checking if pane exists covers all cases\n if (!element.isDrawing() || element.instance.isCreator || !elementPane) {\n return\n }\n const elementContainerType = getContainerType(elementPane)\n const elementPaneTicker = elementPane.getQuoteRawTicker()\n const isElementInCurrentChartLayout = chartLayout\n .getAllPanes()\n .some(\n (model) => getContainerType(model) === elementContainerType && model.getQuoteRawTicker() === elementPaneTicker\n )\n if (isElementInCurrentChartLayout) {\n const isRemove = options?.eventType === DrawingSpineOptionsEvent.Remove\n updateInternalStoreWithElement(element, isRemove ? 'destroy' : 'update')\n }\n },\n [updateInternalStoreWithElement, chartLayout]\n )\n\n return {\n drawingsInternalStore,\n onElementChange,\n handleIdeaNoteChange,\n deleteAllAutoSavedElements,\n isAutoSaveActive,\n handleAutoSaveNoteChange,\n syncChartLayoutDrawings,\n saveLatestChanges,\n checkDrawingUpdate,\n }\n}\n","import React from 'react'\n\nimport { useModelState } from '../../model-hooks/use-model-state'\nimport ChartLayout from '../../models/chart_layout'\nimport { getIsPreserveDrawingsAndAutosaveAvailable } from '../../utils/chart'\n\nexport function useIsAutoSaveActive(chartLayout: ChartLayout) {\n const chartLayoutModel = useModelState(chartLayout, {\n watchProperties: ['isInit', 'isPreserveDrawingsActive', 'idea'],\n })\n const { idea, isInit, isPreserveDrawingsActive } = chartLayoutModel\n return React.useMemo(\n () =>\n getIsPreserveDrawingsAndAutosaveAvailable(chartLayoutModel) && isPreserveDrawingsActive && !!isInit && !idea?.id,\n [isPreserveDrawingsActive, isInit, idea?.id, chartLayoutModel]\n )\n}\n","import React from 'react'\n\nimport { CustomSpineEvents } from '../../../types/shared'\nimport { useModelState } from '../../model-hooks/use-model-state'\nimport ChartModel from '../../models/chart'\nimport ChartLayout from '../../models/chart_layout'\nimport { AutoSaveState } from '../../models/constants'\nimport Element from '../../models/element'\nimport { usePrevious } from '../../utils/use-prev-state'\nimport { DRAWINGS_UPDATE_INTERVAL_MS } from './constants'\nimport { useDrawingAutoSaveControls } from './use-drawing-auto-save-controls'\nimport { getTickersAndContainerTypesInLayoutModel } from './utils'\n\nfunction useDrawingAutoSave(chartLayout: ChartLayout) {\n const {\n onElementChange,\n deleteAllAutoSavedElements,\n checkDrawingUpdate,\n syncChartLayoutDrawings,\n saveLatestChanges,\n isAutoSaveActive,\n } = useDrawingAutoSaveControls(chartLayout)\n\n const drawingsInternalStoreUnwatched = React.useMemo(() => chartLayout.drawingsInternalStore(), [chartLayout])\n const drawingsInternalStore = useModelState(drawingsInternalStoreUnwatched, { watchProperties: ['elements'] })\n const prevIsAutoSaveActive = usePrevious(isAutoSaveActive)\n\n const runInitialSaveAndRefetchUpdate = React.useCallback(async () => {\n chartLayout.getAllElements().forEach((element) => {\n // Adds drawings to internal store if isAutoSaveActive and they are not in the store yet\n if (!drawingsInternalStore.elements.some((drawing) => drawing.elementId === element.elementId)) {\n onElementChange(element)\n }\n })\n\n // We want to save everything except notes because saving notes can overwrite those already saved in db. Each drawing has different id but there is only one note per ticker\n // Notes are merged in checkDrawingUpdate fn\n await saveLatestChanges(0, (item) => item.containerType !== 'note')\n\n checkDrawingUpdate(true)\n }, [checkDrawingUpdate, chartLayout, onElementChange, drawingsInternalStore.elements, saveLatestChanges])\n\n React.useEffect(() => {\n if (isAutoSaveActive) {\n saveLatestChanges()\n }\n }, [saveLatestChanges, drawingsInternalStore.elements, isAutoSaveActive])\n\n React.useEffect(() => {\n if (!isAutoSaveActive) {\n chartLayout.drawingsInternalStore().setAutoSaveState(AutoSaveState.Off)\n return\n }\n chartLayout.drawingsInternalStore().setAutoSaveState(AutoSaveState.Saved)\n if (!prevIsAutoSaveActive && isAutoSaveActive) {\n runInitialSaveAndRefetchUpdate()\n }\n\n let { tickers, containerTypes } = getTickersAndContainerTypesInLayoutModel(chartLayout)\n\n const onChartOrIndicatorChange = () => {\n const { tickers: newTickers, containerTypes: newContainerTypes } =\n getTickersAndContainerTypesInLayoutModel(chartLayout)\n if (\n JSON.stringify(tickers) !== JSON.stringify(newTickers) ||\n JSON.stringify(containerTypes) !== JSON.stringify(newContainerTypes)\n ) {\n tickers = newTickers\n containerTypes = newContainerTypes\n checkDrawingUpdate(true)\n }\n }\n\n ChartModel.bind(`${CustomSpineEvents.IndicatorsChange} change`, onChartOrIndicatorChange)\n Element.bind('change', onElementChange)\n\n drawingsInternalStore.elements.forEach(syncChartLayoutDrawings)\n const checkDrawingUpdateInterval = setInterval(checkDrawingUpdate, DRAWINGS_UPDATE_INTERVAL_MS)\n\n return () => {\n clearInterval(checkDrawingUpdateInterval)\n ChartModel.unbind(`${CustomSpineEvents.IndicatorsChange} change`, onChartOrIndicatorChange)\n Element.unbind('change', onElementChange)\n }\n }, [\n chartLayout,\n drawingsInternalStore,\n checkDrawingUpdate,\n onElementChange,\n syncChartLayoutDrawings,\n isAutoSaveActive,\n prevIsAutoSaveActive,\n runInitialSaveAndRefetchUpdate,\n ])\n\n return { deleteAllAutoSavedElements, isAutoSaveActive }\n}\n\ninterface Props {\n chartLayoutModel: ChartLayout\n}\n\nexport const withDrawingsAutoSave = (Component: any) => (props: Props) => {\n const { deleteAllAutoSavedElements, isAutoSaveActive } = useDrawingAutoSave(props.chartLayoutModel)\n\n return (\n \n )\n}\n","import React from 'react'\n\nexport function usePrevious(value: any) {\n const ref = React.useRef()\n React.useEffect(() => {\n ref.current = value\n }, [value])\n return ref.current\n}\n","import omit from 'lodash.omit'\nimport queryString from 'query-string'\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport { Instrument, ObjectHash } from '../../types/shared'\nimport { Button, Dialog, DialogBody, DialogFooter, DialogHeader } from '../components'\nimport { ChartsOrQuotePageQueryParams, LayoutType } from '../constants/common'\nimport { getTickerNoteText } from '../controllers/autosave/utils'\nimport ChartLayout from '../models/chart_layout'\nimport Quote from '../models/quote'\nimport { getInstrument } from '../utils/chart'\nimport fetchApi, { getFormDataFromObject } from '../utils/fetch_api'\nimport { captureException } from '../utils/helpers'\nimport { decodeQueryString } from '../utils/query_string'\n\ninterface IIdea {\n ticker: string\n instrument: string\n period: string\n company?: string\n date: string\n note: string\n id: string\n}\n\nfunction getIdeaUrl({ ticker, instrument, period, id }: Pick) {\n const searchObject = { t: ticker, p: period, i: id }\n const isStock = instrument === Instrument.Stock\n const isQuotePage = /\\/quote\\b/.test(window.location.pathname)\n const isStockOnQute = isQuotePage && isStock\n const path = !isQuotePage || isStock ? window.location.pathname : '/charts.ashx'\n\n return `${path}?${queryString.stringify({ ...searchObject, ...(isStockOnQute ? { ta: '2' } : { l: '1h1v' }) })}`\n}\n\nfunction IdeasList() {\n const [hasError, setHasError] = useState(false)\n const [hasFetched, setHasFetched] = useState(false)\n const [isDeleting, setIsDeleting] = useState(false)\n const [ideas, setIdeas] = useState([])\n const { i: currentIdea } = decodeQueryString()\n\n useEffect(() => {\n async function fetchIdeas() {\n window.gtag?.('event', 'load', { event_category: 'ideas' })\n try {\n const data = await fetchApi({ location: '/api/ideas_load.ashx', throwOnStatusCodes: [404] })\n const ideas = data.ideas.map((idea: IIdea) => ({\n ...idea,\n instrument: getInstrument(idea.ticker),\n }))\n\n setIdeas(ideas)\n setHasFetched(true)\n } catch {\n setHasError(true)\n }\n }\n\n fetchIdeas()\n }, [])\n\n const onDeleteIdeaClick = useRef(async (idea: IIdea) => {\n if (!window.confirm('Do you really want to delete this idea?')) return\n\n const body = [\n ['id', idea.id],\n ['ticker', idea.ticker],\n ['queryString', document.location.search],\n ['locationPathname', document.location.pathname],\n ['currentIdea', currentIdea],\n ]\n .map((row) => row.join('='))\n .join('&')\n\n setIsDeleting(true)\n\n const response = await fetch('/api/idea_delete.ashx', {\n body,\n headers: {\n 'Content-Type': 'application/x-www-form-urlencoded',\n },\n method: 'post',\n })\n\n if (currentIdea === String(idea.id)) {\n window.location.href = response.url\n return\n }\n\n // Check if the page was loaded with the idea which is going to be deleted here\n // If that's the case, refresh the page to remove idea data from the page so when user navigates back to idea page it shows idea 404\n const configIdeaId = window.FinvizChartsSettings?.ideaChart?.idea?.id ?? window.globalChartConfig?.idea?.id\n if (configIdeaId === idea.id) {\n window.location.reload()\n return\n }\n\n setIdeas((ideas) => ideas.filter((stateIdea) => stateIdea.id !== idea.id))\n setIsDeleting(false)\n })\n\n if (!hasFetched || hasError) {\n return (\n \n {hasError ? 'Unexpected error occured, please refresh the page.' : 'Loading…'}\n
\n )\n }\n\n if (ideas.length === 0) {\n return (\n \n No saved ideas.\n \n )\n }\n\n return (\n <>\n {ideas.map((idea) => (\n (document.location = getIdeaUrl(idea))}\n >\n \n
\n {idea.ticker}\n {idea.company && ' - ' + idea.company}\n
\n
\n {idea.date}\n \n {idea.note !== '' ? (\n
{idea.note}
\n ) : null}\n
\n \n ) => {\n ev.stopPropagation()\n onDeleteIdeaClick.current(idea)\n }}\n >\n Delete\n \n
\n \n ))}\n \n )\n}\n\nexport function IdeasDialog(props: any) {\n return (\n \n )\n}\n\nexport async function saveIdea(layoutModel: ChartLayout) {\n const activeChart = layoutModel.activeChart\n const activeChartQuote = activeChart.quote().toJSON()\n const { ticker, instrument, cid } = activeChart\n const period = activeChartQuote.timeframe\n const { ChartSettings } = layoutModel.settings\n const layout: ObjectHash = layoutModel.toObject()\n layout.layout = LayoutType['1h1v']\n layout.barWidth = ChartSettings.center.barWidth\n layout.barMargin = ChartSettings.center.barMargin\n layout.charts = layout.charts\n .filter((c: ObjectHash) => c.chartId === cid)\n .map((c: ObjectHash) => ({ ...c, dateRange: null, refreshData: false }))\n\n delete layout.charts[0].chartId\n\n // TODO: replace with better solution after indicators overhaul\n const getChartTickers = (layoutModelObjectPanes: { elements: { type: string; tickers: string }[] }[]) => {\n let tickers = []\n let tickersString = ''\n for (const pane of layoutModelObjectPanes) {\n for (const element of pane.elements) {\n if (element.type === 'indicators/perf') {\n tickersString = element.tickers\n }\n }\n }\n tickers = tickersString.split(',').filter((item) => item)\n if (!tickers.includes(ticker)) {\n tickers.push(ticker.replace('@', ''))\n }\n return tickers\n }\n const tickers = getChartTickers(layout.charts[0].panes)\n const quotes = Quote.select(\n (quote: Quote) =>\n tickers.includes(quote.ticker) && quote.timeframe === activeChart.timeframe && layoutModel.isIdeaId(quote.ideaID)\n ).filter((element, index, array) => array.findIndex((t) => t.ticker === element.ticker) === index)\n const quotesJsonString = JSON.stringify(quotes.map((q) => omit(q.toJSON(), ['ideaID', 'chartUuid'])))\n\n const chart = JSON.stringify(layout)\n const note =\n layoutModel.idea?.note ||\n getTickerNoteText({ ticker, elements: layoutModel.drawingsInternalStore().elements }) ||\n ''\n window.gtag?.('event', 'save', { event_category: 'ideas' })\n\n if (tickers.length !== quotes.length) {\n captureException(new Error('Idea saved with inconsistent quotes data'), {\n extra: {\n tickers,\n quoteTickersTimeframes: quotes.map((quote) => ({ ticker: quote.ticker, timeframe: quote.timeframe })),\n chartLayout: layoutModel.toConfig(['colors', 'panes']),\n },\n })\n }\n\n const data = await fetchApi<{ id: string }>({\n location: '/api/idea_save.ashx',\n method: 'POST',\n body: getFormDataFromObject({ ticker, period, chart, quotes: quotesJsonString, note }),\n })\n\n const ideaUrl = getIdeaUrl({\n ticker,\n period,\n instrument,\n id: data.id,\n })\n\n if (process.env.IS_E2E_TESTING) {\n window.location.href = ideaUrl\n } else {\n // need to be in setTimeout because Safari block any call to window.open made in async,\n // this is hack to force run window.open in main thread\n setTimeout(() => {\n window.open(ideaUrl, 'FinvizSavedIdea')\n })\n }\n}\n","import classnames from 'classnames'\nimport * as React from 'react'\n\nimport {\n Button,\n DialogTrigger,\n Dropdown,\n DropdownItem,\n Spinner,\n Tooltip,\n TooltipTrigger,\n useDialogState,\n useDropdownState,\n useTooltipState,\n} from '../../components'\nimport { IdeasDialog, saveIdea } from '../../modals/ideas'\nimport ChartLayout from '../../models/chart_layout'\nimport Quote from '../../models/quote'\nimport { getIsMobileScreenSize } from '../../utils'\nimport { encodeQueryString } from '../../utils/query_string'\n\ninterface IdeaDropdownProps {\n model: ChartLayout\n rounding?: 'none' | 'regular'\n theme?: string\n size?: string\n dropdownButtonClassName?: string\n}\n\nexport function IdeasDropdown({\n model,\n rounding,\n dropdownButtonClassName,\n ...props\n}: React.PropsWithChildren) {\n const tooltipState = useTooltipState({ placement: 'right-start' })\n const [isAnyQuoteLoading, setIsAnyQuoteLoading] = React.useState(false)\n const ref = React.useRef(null)\n const dialog = useDialogState()\n const dropdown = useDropdownState()\n const hideTooltip = tooltipState.hide\n\n React.useEffect(() => {\n const checkIfAnyQuoteIsLoading = () => {\n const fetchingQuotes = Quote.select((quote) => quote.isFetching && quote.fetchedAt === -1)\n setIsAnyQuoteLoading(fetchingQuotes.length > 0)\n }\n\n Quote.bind('change', checkIfAnyQuoteIsLoading)\n return () => {\n Quote.unbind('change', checkIfAnyQuoteIsLoading)\n }\n }, [])\n\n React.useEffect(() => {\n if (!isAnyQuoteLoading || !dropdown.visible) {\n hideTooltip()\n }\n }, [isAnyQuoteLoading, dropdown.visible, hideTooltip])\n\n if (!window.FinvizSettings.hasUserPremium) {\n return (\n \n )\n }\n\n return (\n <>\n \n }\n >\n {\n if (isAnyQuoteLoading) {\n tooltipState.show()\n return\n }\n saveIdea(model)\n }}\n >\n Save idea\n \n \n Load idea\n \n \n \n \n \n \n
\n \n Some data is still loading. Please wait.\n \n \n \n )\n}\n","export const publishModalAsyncModule = {\n importFn: () => import(/* webpackChunkName: \"modals-publish\" */ './module-entry'),\n cacheKey: 'modals-publish',\n}\n","import classnames from 'classnames'\nimport * as React from 'react'\n\nimport { Button, Delayed, DialogTrigger, Icon, Spinner, useDialogState } from '../../components'\nimport { publishModalAsyncModule } from '../../modals/publish/async-modules'\nimport ChartLayout from '../../models/chart_layout'\nimport { useAsyncModule } from '../../utils/async-modules-utils'\n\ninterface PublishProps {\n model: ChartLayout\n theme?: string\n size?: string\n rounding?: string\n}\n\nexport function Publish({ model, ...props }: React.PropsWithChildren) {\n const dialog = useDialogState()\n const [publishModalModule, { isLoading }] = useAsyncModule({\n ...publishModalAsyncModule,\n shouldLoadModule: dialog.visible,\n errorSeverity: 'medium',\n onError: () => dialog.hide(),\n })\n const PublishDialog = publishModalModule?.default\n const buttonProps = isLoading\n ? {\n leftContent: (\n \n }\n >\n \n \n ),\n }\n : {\n as: DialogTrigger,\n state: dialog,\n leftContent: 'share',\n }\n return (\n <>\n \n {PublishDialog && }\n \n )\n}\n","import classnames from 'classnames'\nimport * as React from 'react'\n\nimport { Button, Delayed, Icon, Spinner, useTour } from '../../components'\nimport { SpecificChartFunctionality } from '../../constants/common'\nimport { getRequestFullscreen, isRedesignEnabled } from '../../utils'\nimport { encodeQueryString } from '../../utils/query_string'\n\ninterface TourDefinition {\n id: string\n steps: Array<{\n title?: React.ReactNode\n body: React.ReactNode\n target?: string\n placement?: string\n overlayRadius?: number\n overlayPadding?: number\n }>\n skip?: boolean\n}\n\nconst isPremium = window.FinvizSettings.hasUserPremium\n\n// If we need to update / discontinue some tour we can use skip flag on legacy version to ensure that it won't reset users tour but won't include it in new tours\nfunction getTour(page: SpecificChartFunctionality): TourDefinition[] {\n return [\n {\n id: 'chart-tour',\n steps: [\n {\n title: 'Chart Tour',\n body: 'Discover powerful Chart features in the 2-min tour to master your analysis of trading opportunities.',\n },\n ...(isPremium\n ? [\n {\n title: 'Scale the Timeline',\n body: 'Grab the timeline to zoom it in and out. Double-click the timeline to reset the scaling.',\n target: '[data-testid=\"chart-0-pane-0-zoomer\"]',\n },\n {\n title: 'Scale the Price Axis',\n body: 'Grab the Price Axis to zoom it in and out. Move the chart around freely in any direction when Price Axis has custom scale. Double-click the Price Axis to reset the scaling.',\n target: '[data-testid=\"chart-0-pane-0-scaler\"]',\n },\n {\n title: 'Drawing tools & settings',\n body: 'Pick any Drawing Tool to analyze the market. Tailor your drawing experience with additional settings.',\n target: '#toolbar',\n },\n {\n title: 'Fine-tune Drawings',\n body: 'Double-click on a chart drawing to tweak its color and style. Right-click on a drawing to access other options, such as changing its visibility, order, and more.',\n target: '[data-testid=\"chart-0-pane-0\"]',\n },\n ]\n : [\n {\n title: 'Enable Drawing mode',\n body: (\n <>\n \n Finviz*Elite\n {' '}\n subscribers get access a whole suite of drawing tools which allow them to draw on and annotate the\n chart.
\n While in drawing mode, you can also pan the chart, scale the timeline and price axis and much more.\n \n ),\n target: '[data-testid=\"quote-toggle-draw-btn\"]',\n placement: 'bottom-start',\n },\n ]),\n {\n title: 'Save your best Ideas',\n body: isPremium\n ? 'Besides your drawings being autosaved, you can manually save ideas that you wish to revisit later.'\n : 'Your drawings will be saved automatically, but you can also manually save ideas that you wish to revisit later.',\n target: '[data-testid=\"chart-toolbar-ideas\"]',\n placement: 'bottom-start',\n },\n ...(page === SpecificChartFunctionality.quotePage\n ? []\n : [\n {\n title: 'Chart Layouts & Charts Sync',\n body: 'Switch between Chart Layouts to view multiple charts on your screen. Synchronize Ticker, Timeframe or Crosshair position across your charts.',\n target: '[data-testid=\"chart-layout-layout\"]',\n },\n ]),\n ...(!getRequestFullscreen(document.documentElement) && page === SpecificChartFunctionality.chartPage\n ? []\n : [\n {\n title: 'Fullscreen mode',\n body:\n page === SpecificChartFunctionality.quotePage\n ? 'Open the chart in an expanded view for full-page display and split-screen charts.'\n : 'Toggle the window to fill your entire screen.',\n target: '[data-testid=\"chart-layout-fullscreen\"]',\n placement: page === SpecificChartFunctionality.chartPage ? 'bottom' : 'bottom-end',\n },\n ]),\n {\n title: 'Share chart',\n body: 'Share a chart together with your analysis and ideas.',\n target: '[data-testid=\"chart-toolbar-publish\"]',\n overlayPadding: page === SpecificChartFunctionality.quotePage ? 3 : undefined,\n placement: 'bottom',\n },\n ...(isRedesignEnabled() || page === SpecificChartFunctionality.chartPage\n ? [\n {\n title: 'Theme',\n body: 'Switch between the Light and Dark theme.',\n target: '[data-testid=\"chart-layout-theme\"]',\n },\n ]\n : []),\n {\n title: 'Study Settings',\n body: 'Customize the Chart Type and appearance. Add Overlays, Indicators and toggle Extended Hours.',\n target: '[data-testid=\"chart-settings-open-btn\"]',\n placement: page === SpecificChartFunctionality.chartPage ? 'bottom' : 'bottom-end',\n },\n ],\n },\n page === SpecificChartFunctionality.chartPage && {\n id: 'sidebar-watchlist',\n steps: [\n {\n title: 'Explore Your Portfolios',\n body: 'Effortlessly navigate through your portfolio holdings. With just a click, visualize individual stock charts, gain insights, and stay updated on your investments.',\n target: '[data-testid=\"sidebar-portfolio-btn\"]',\n placement: 'left-start',\n },\n ],\n },\n ].filter(Boolean) as TourDefinition[]\n}\n\ninterface TourButtonProps {\n page: SpecificChartFunctionality\n rounding?: 'none' | 'regular'\n size?: string\n theme?: string\n className?: string\n}\n\nexport function TourButton({ page, className, theme, ...props }: React.PropsWithChildren) {\n const tour = useTour()\n const pageTours = getTour(page)\n const [userTour, setCurrentTour] = React.useState(tour.getStepsForUser(pageTours))\n const buttonTheme = userTour.hasNewTours ? 'blue' : theme ?? 'headerItem'\n\n return (\n \n }\n >\n \n \n ) : (\n \n )\n }\n className={className}\n contentClass={page !== SpecificChartFunctionality.quotePage ? 'hidden lg:flex' : ''}\n title=\"Explore new features\"\n onClick={async () => {\n if (userTour) {\n const activeTour = await tour.startTour(userTour.tour)\n activeTour?.once('inactive', () => {\n setCurrentTour(tour.getStepsForUser(pageTours))\n })\n }\n }}\n />\n )\n}\n","import * as React from 'react'\nimport { Link } from 'react-router-dom'\n\nimport { Icon, Select, SelectOption } from '../../components'\nimport ChartLayout from '../../models/chart_layout'\nimport { useChartTypes } from './use-chart-types'\nimport { TypeBaseOption } from './utils'\n\nconst isNativeMobileSelect = true // explicitly enable native select for mobile devices\n\nexport function ChartTypesSelect({\n isPremium,\n model,\n ...props\n}: {\n isPremium: boolean\n model: ChartLayout\n theme?: string\n size?: string\n rounding?: string\n}) {\n const { chartTypes, getCurrentType } = useChartTypes({ isPremium, model })\n const currentType = getCurrentType()\n const [selectedType, setSelectedType] = React.useState(currentType)\n const icon = chartTypes.find((item) => item.value === selectedType)?.iconName\n\n React.useEffect(() => {\n setSelectedType(currentType)\n }, [currentType])\n\n return (\n item.value === selectedType)?.iconName} className=\"text-gray-300\" />\n )\n }\n rightContent={props.theme === 'chip' ? 'caretDown' : undefined}\n hasPopoverButtonWidthLimit={false}\n isNativeMobileSelect={isNativeMobileSelect}\n onChange={(item: TypeBaseOption) => setSelectedType(item.value)}\n >\n {chartTypes.map((item) => (\n \n {item.label}\n \n ))}\n \n )\n}\n","import * as React from 'react'\nimport { useLocation } from 'react-router-dom'\n\nimport { SpecificChartFunctionality } from '../../constants/common'\nimport ChartLayout from '../../models/chart_layout'\nimport { decodeQueryString, encodeQueryString } from '../../utils/query_string'\nimport {\n DEFAULT_TYPES,\n FREE_TYPES_QUOTE,\n FREE_TYPES_QUOTE_VALUES,\n QuoteLongToShortType,\n QuoteNodeChartTypes,\n QuoteShortToLongType,\n QuoteUrlChartTypes,\n TypeBaseOption,\n} from './utils'\n\nexport function useChartTypes({ isPremium, model }: { isPremium: boolean; model: ChartLayout }) {\n const location = useLocation()\n const { b, t, ta, ty, p = 'd', r } = decodeQueryString(location.search)\n const taInt = ta ? Number.parseInt(ta) : 1\n const isQuotePage = model.specificChartFunctionality === SpecificChartFunctionality.quotePage\n\n const getCurrentType = React.useCallback(() => {\n const defaultType =\n ((ty as QuoteUrlChartTypes | undefined) && QuoteShortToLongType[ty as QuoteUrlChartTypes]) ??\n (window.FinvizQuoteTypeCurrent as QuoteNodeChartTypes)\n\n return !isPremium && defaultType === QuoteNodeChartTypes.candlestick && taInt === 0\n ? QuoteNodeChartTypes.candlesticksimple\n : defaultType\n }, [isPremium, taInt, ty])\n\n const generateRouterPath = React.useCallback(\n (type: QuoteNodeChartTypes) => {\n if (isPremium || FREE_TYPES_QUOTE_VALUES.includes(type)) {\n return `${location.pathname}?${encodeQueryString({\n b,\n t,\n r,\n ty:\n type === QuoteNodeChartTypes.candlesticksimple\n ? QuoteLongToShortType.candlestick\n : QuoteLongToShortType[type],\n ta: type === QuoteNodeChartTypes.candlestick ? '1' : '0',\n p,\n })}`\n }\n return `/elite.ashx?${encodeQueryString({\n utm_source: 'finviz',\n utm_medium: 'banner',\n utm_campaign: 'quote-chart-type-select',\n })}`\n },\n [isPremium, location.pathname, b, t, r, p]\n )\n\n const chartTypes = React.useMemo(() => {\n const options = isPremium || !isQuotePage ? DEFAULT_TYPES : FREE_TYPES_QUOTE\n\n return options.map((item) => ({\n ...item,\n href: generateRouterPath(item.value as QuoteNodeChartTypes),\n reloadDocument: !isPremium,\n })) as TypeBaseOption[]\n }, [generateRouterPath, isPremium, isQuotePage])\n\n return { getCurrentType, chartTypes }\n}\n","import classnames from 'classnames'\nimport * as React from 'react'\n\nimport { Paragraph } from '../../components'\nimport math from '../../helpers/math'\nimport { useModelState } from '../../model-hooks/use-model-state'\nimport { QuoteFetchType } from '../../models/quote/constants'\nimport { getTickerChange } from '../../utils/chart'\nimport { useChartLayoutGlobalModelAsync } from '../../utils/useChartLayoutGlobalModelAsync'\nimport { withSuspense } from '../../website-shared'\n\ninterface Props {\n chartIndex: number\n}\n\ninterface ChangeLabelProps {\n children: React.ReactNode\n changePoints: number\n isTiny: boolean\n}\n\nconst CHANGE_UPATE_EVENTS = ['change', 'update']\nconst QUOTE_MODEL_CHANGE_EVENTS = [...CHANGE_UPATE_EVENTS, ...Object.values(QuoteFetchType)]\n\nfunction ChangeLabel({ children, changePoints, isTiny }: ChangeLabelProps) {\n return (\n 0,\n 'text-red-400': changePoints < 0,\n })}\n >\n {children}\n \n )\n}\n\nexport function DailyChangeDisplayComponent({ chartIndex }: Props) {\n const { chartLayoutModel } = useChartLayoutGlobalModelAsync()\n const chartModel = useModelState(chartLayoutModel?.getAllCharts()[chartIndex] ?? null, {\n watchProperties: ['quote'],\n listenOnEvents: CHANGE_UPATE_EVENTS,\n })\n const quoteModel = useModelState(chartModel?.quote() ?? null, {\n watchProperties: ['lastClose', 'prevClose', 'afterClose'],\n listenOnEvents: QUOTE_MODEL_CHANGE_EVENTS,\n })\n\n const tickerChange = quoteModel && getTickerChange({ data: quoteModel })\n const isTiny =\n !!tickerChange?.tickerChange &&\n math.getInstrumentDecimalPlaces({\n instrument: quoteModel!.instrument,\n value: quoteModel!.lastClose,\n }) >= 6\n\n return (\n \n {tickerChange?.tickerChange && (\n <>\n {tickerChange.tickerAfterChange && (\n \n {tickerChange.tickerAfterChange.string}\n \n )}\n \n {tickerChange.tickerChange.string}\n \n \n )}\n
\n )\n}\n\nexport const DailyChangeDisplay = React.memo(\n withSuspense(DailyChangeDisplayComponent),\n (prevProps, nextProps) => prevProps.chartIndex === nextProps.chartIndex\n)\n","import * as React from 'react'\n\nimport { Button } from '../../components'\nimport { SpecificChartFunctionality } from '../../constants/common'\nimport utils from '../../utils'\nimport { DRAWING_COOKIE_NAME, getIsDrawingEnabled } from '../../utils/chart'\nimport { decodeQueryString, encodeQueryString } from '../../utils/query_string'\n\nconst utmCampaign: Partial> = {\n [SpecificChartFunctionality.quotePage]: 'quote-draw-button',\n [SpecificChartFunctionality.futuresPage]: 'futures-interactive-chart',\n [SpecificChartFunctionality.forexPage]: 'forex-interactive-chart',\n [SpecificChartFunctionality.cryptoPage]: 'crypto-interactive-chart',\n}\n\nconst testId: Partial> = {\n [SpecificChartFunctionality.quotePage]: 'quote-toggle-draw-btn',\n [SpecificChartFunctionality.futuresPage]: 'futures-interactive',\n [SpecificChartFunctionality.forexPage]: 'forex-interactive',\n [SpecificChartFunctionality.cryptoPage]: 'crypto-interactive',\n}\n\ninterface DrawButtonProps {\n isPremium: boolean\n specificChartFunctionality: SpecificChartFunctionality\n active?: boolean\n theme?: string\n size?: string\n rounding?: string\n}\n\nexport function DrawButton({\n isPremium,\n specificChartFunctionality,\n ...props\n}: React.PropsWithChildren) {\n const buttonProps = React.useMemo(() => {\n if (!isPremium) {\n return {\n as: 'a',\n href: `/elite.ashx?${encodeQueryString({\n utm_source: 'finviz',\n utm_medium: 'banner',\n utm_campaign: utmCampaign[specificChartFunctionality],\n })}`,\n }\n }\n\n return {\n onClick: (ev: React.MouseEvent) => {\n ev.preventDefault()\n const newValue = getIsDrawingEnabled() ? 'off' : 'on'\n\n fetch('/api/set_cookie.ashx?cookie=' + DRAWING_COOKIE_NAME + '&value=' + newValue)\n .catch(() => {})\n .then((res) => {\n if (!res?.ok) {\n // fallback to JS otherwise draw toggle won't work if API don't work\n const expires = new Date()\n expires.setMonth(expires.getMonth() + 1)\n utils.setCookie(DRAWING_COOKIE_NAME, newValue, expires)\n }\n\n const { i: idea, ...rest } = decodeQueryString()\n if (idea) {\n document.location = `quote.ashx?${encodeQueryString(rest)}`\n } else {\n document.location.reload()\n }\n })\n },\n }\n }, [isPremium, specificChartFunctionality])\n\n return (\n \n )\n}\n","import * as React from 'react'\nimport { useLocation } from 'react-router-dom'\n\nimport { Button } from '../../components'\nimport { SpecificChartFunctionality } from '../../constants/common'\nimport ChartLayout from '../../models/chart_layout'\nimport { decodeQueryString, encodeQueryString } from '../../utils/query_string'\n\nfunction getTickersString(tickers: string[], tickersCount: number) {\n return Array.from({ length: Math.min(tickersCount, 6) })\n .map((_, index) => tickers[index] ?? tickers[tickers.length - 1])\n .join(',')\n}\n\nfunction getLayoutType(tickersCount: number) {\n switch (tickersCount) {\n case 0: // shouldn't happen\n case 1:\n return '1h1v'\n case 2:\n return '2h1v'\n case 3:\n return '3h1v'\n case 4:\n return '2h2v'\n case 5:\n default:\n // 6 and more\n return '3h2v'\n }\n}\n\nconst utmCampaign: Partial> = {\n [SpecificChartFunctionality.quotePage]: 'quote-fullscreen-button',\n [SpecificChartFunctionality.futuresPage]: 'futures-fullscreen-button',\n [SpecificChartFunctionality.forexPage]: 'forex-fullscreen-button',\n [SpecificChartFunctionality.cryptoPage]: 'crypto-fullscreen-button',\n}\n\ninterface FullscreenButtonProps {\n model: ChartLayout\n isPremium: boolean\n title?: string\n theme?: string\n size?: string\n rounding?: string\n}\n\nexport function FullscreenButton({ model, isPremium, ...props }: React.PropsWithChildren) {\n const location = useLocation()\n const { i, p = 'd', r } = decodeQueryString(location.search)\n const urlTickers = model\n .charts()\n .all()\n .map((chart) => chart.quote().getRawTicker())\n\n return (\n p).join(','),\n l: getLayoutType(urlTickers.length),\n r,\n })}`\n : `/elite.ashx?${encodeQueryString({\n utm_source: 'finviz',\n utm_medium: 'banner',\n utm_campaign: utmCampaign[model.specificChartFunctionality],\n })}`\n }\n />\n )\n}\n","import React from 'react'\n\nimport { Instrument } from '../../../types/shared'\nimport {\n Button,\n Dialog,\n DialogTrigger,\n Dropdown,\n DropdownItem,\n Icon,\n Spinner,\n Search as WebsiteSearchComponent,\n useDialogState,\n useDropdownState,\n} from '../../components'\nimport { useAsyncModule } from '../../utils/async-modules-utils'\nimport { createAlertAsyncModule, saveToPortfolioAsyncModule } from '../../website-shared'\n\ninterface SearchProps {\n ticker: string\n instrument: Instrument\n onTickerSelected: (ticker: string) => void\n chartIndex: number\n}\n\nexport default function Search({ ticker, instrument, onTickerSelected, chartIndex }: SearchProps) {\n const dropdownState = useDropdownState({ placement: 'bottom-end' })\n const saveToPortfolioDialogState = useDialogState()\n const createAlertDialogState = useDialogState()\n const [saveToPortfolioModule, { isLoading: isLoadingSaveToPortfolio }] = useAsyncModule({\n ...saveToPortfolioAsyncModule,\n shouldLoadModule: saveToPortfolioDialogState.visible,\n onError: () => saveToPortfolioDialogState.hide(),\n })\n const [createAlertModule, { isLoading: isLoadingCreateAlert }] = useAsyncModule({\n ...createAlertAsyncModule,\n shouldLoadModule: createAlertDialogState.visible,\n onError: () => createAlertDialogState.hide(),\n })\n const SaveToPortfolio = saveToPortfolioModule?.SaveToPortfolio\n const CreateAlert = createAlertModule?.CreateAlert\n\n const detailLink = React.useMemo(() => {\n const formattedTicker = ticker.replace('@', '')\n\n switch (instrument) {\n case Instrument.Stock:\n return `/quote.ashx?t=${formattedTicker}`\n case Instrument.Futures:\n return `/futures_charts.ashx?t=${formattedTicker}`\n case Instrument.Forex:\n return `/forex_charts.ashx?t=${formattedTicker}`\n case Instrument.Crypto:\n return `/crypto_charts.ashx?t=${formattedTicker}`\n }\n }, [ticker, instrument])\n\n return (\n \n
}\n />\n }\n >\n
{\n window.gtag?.('event', 'click', { event_category: 'open-stock-detail' })\n }}\n >\n {instrument === Instrument.Stock ? 'Open Stock Detail' : 'Open Detail'}\n \n {instrument === Instrument.Stock && (\n {\n window.gtag?.('event', 'click', { event_category: 'save-to-portfolio' })\n }}\n >\n Save to Portfolio\n \n )}\n {instrument === Instrument.Stock && (\n {\n window.gtag?.('event', 'click', { event_category: 'create-alert' })\n }}\n >\n Create Alert\n \n )}\n \n }\n />\n \n \n \n \n
\n \n )}\n \n )\n}\n\ninterface ChartSettingsButtonProps {\n isPremium: boolean\n placement?: string\n model: ChartLayout\n theme?: string\n size?: string\n rounding?: string\n}\n\nexport function ChartSettingsButton({\n isPremium,\n model,\n placement,\n ...props\n}: React.PropsWithChildren) {\n const settingsPopoverState = usePopoverState({ placement: placement ?? 'bottom-end' })\n\n const buttonProps = React.useMemo(() => {\n if (model.specificChartFunctionality !== SpecificChartFunctionality.quotePage && !isPremium) {\n return {\n as: 'a',\n href: `/elite.ashx?${encodeQueryString({\n utm_source: 'finviz',\n utm_medium: 'banner',\n utm_campaign: utmCampaign[model.specificChartFunctionality],\n })}`,\n }\n }\n\n return {\n as: PopoverTrigger,\n state: settingsPopoverState,\n active: settingsPopoverState.visible,\n }\n }, [model, isPremium, settingsPopoverState])\n\n return (\n <>\n \n \n \n )\n}\n","import * as React from 'react'\nimport { useLocation, useNavigate } from 'react-router-dom'\n\nimport { ChartsOrQuotePageQueryParams, SpecificChartFunctionality } from '../../constants/common'\nimport { useModelState } from '../../model-hooks/use-model-state'\nimport { useModelRef } from '../../model-hooks/useModelRef'\nimport Chart from '../../models/chart'\nimport Quote from '../../models/quote'\nimport { QuoteFetchType } from '../../models/quote/constants'\nimport { createRequestAbortController, removeFromAbortCache } from '../../utils/abort_controller'\nimport { decodeQueryString, encodeQueryString } from '../../utils/query_string'\nimport { getLeftOffset } from '../renderUtils'\n\nconst getQuoteRequestKey = (chartModel: Chart) =>\n `quoteReq-${chartModel.ticker}-${chartModel.instrument}-${chartModel.id}`\n\nexport function useChartControls({\n chartModel: unwatchedChartModel,\n isInteractive,\n}: {\n chartModel: Chart | null\n isInteractive: boolean\n}) {\n const location = useLocation()\n const navigate = useNavigate()\n const chartModel = useModelState(unwatchedChartModel, {\n watchProperties: ['ticker', 'timeframe', 'dateRange'],\n })\n const chartLayoutModel = useModelState(chartModel?.chart_layout() ?? null, {\n watchProperties: ['idea', 'settings'],\n })\n const chartModelRef = useModelRef(chartModel)\n const [isLoading, setIsLoading] = React.useState(false)\n const abortControllerKeyRef = React.useRef('')\n const isIdeaChart = !!chartLayoutModel?.idea?.id\n\n const updateChartModelWithNewQuote = React.useCallback((quote: Quote) => {\n const chart = chartModelRef.current\n if (!chart) {\n return\n }\n\n const chartLayoutModel = chart.chart_layout()\n const isSameTicker = chart.getQuoteRawTicker() === quote.getRawTicker()\n\n chart.getAllPanes().forEach((pane) => {\n if (!!pane.getChartOrIndicatorElement()) {\n pane.updateAttribute('scaleRange', null)\n }\n })\n\n chart.updateAttributes({ leftOffset: getLeftOffset({ quote, chartModel: chart }), quote, isScrolled: true })\n\n // Refetch all other chart quotes as the main one is already refetched so we can filter it out but other quotes (from perf for example) should be refetched as well\n chart\n .getAllQuotes()\n .filter((chartQuote) => !chartQuote.eql(quote))\n .forEach((quote) => {\n quote.fetchData({ fetchType: QuoteFetchType.NewerData })\n })\n\n const chartPane = chart.getChartPane()\n chartLayoutModel.activeChartEvent?.instance.toggleIsOpen(false)\n\n const elements = [...chart.getAllElements(), ...(chartPane?.getAllChartEvents(false) ?? [])]\n for (const element of elements) {\n const isDrawing = element.isDrawing()\n const isChartEvent = element.isChartEvent()\n if (isDrawing || isChartEvent) {\n // We want to remove all drawings on ticker change but if autosave is enabled we let the autosave hook take care of that\n if (isSameTicker && (isChartEvent || chartLayoutModel.isPreserveDrawingsActive)) {\n element.instance.updateScales()\n } else {\n element.destroyCascade()\n }\n }\n }\n\n chart.setChartEvents(quote.chartEvents, true)\n\n chartPane?.updateChartEventsZIndexes()\n\n // The only dependency here is a ref , so no need to add it to dependencies\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n const fetchQuote = React.useCallback(async () => {\n if (!isInteractive || !chartModel || isIdeaChart) {\n return\n }\n setIsLoading(true)\n\n const { ticker, instrument, timeframe, hasChartEvents } = chartModel\n const { premarket, aftermarket } = Quote.first()\n const patterns = chartModel.getHasPatterns()\n const currentQuote = chartModel.quote()\n if (currentQuote.getRawTicker() !== ticker || currentQuote.timeframe !== timeframe) {\n abortControllerKeyRef.current = getQuoteRequestKey(chartModel)\n const abortController = createRequestAbortController({\n key: abortControllerKeyRef.current,\n shouldAbortRunningRequest: !Quote.select(\n (quote) =>\n quote.ticker === ticker &&\n quote.timeframe === timeframe &&\n quote.isFetching &&\n chartModel.chart_layout().isIdeaId(quote.ideaID)\n ),\n })\n\n const quote = await Quote.get({\n ticker,\n instrument,\n timeframe,\n options: {\n premarket,\n aftermarket,\n events: hasChartEvents,\n patterns,\n cachePredicate: (quote) => quote.ideaID === undefined,\n fetchNewDataOnCachedQuote: true,\n },\n abortController,\n })\n\n if (quote.wasFetchAborted) {\n // Check if the quote is also used in other chars, as the quote may be reused if we already have a quote with the same options\n const isQuoteUsedInOtherCharts = chartModel\n .chart_layout()\n .getAllCharts()\n .filter((chart) => !chartModel.eql(chart))\n .some((chart) => quote.eql(chart.quote()))\n\n // If the quote hasn't been fetched yet and is not anywhere else we can destroy the model\n if (quote.fetchedAt === -1 && !isQuoteUsedInOtherCharts) {\n quote.destroy()\n }\n\n return\n }\n\n removeFromAbortCache(abortControllerKeyRef.current)\n\n updateChartModelWithNewQuote(quote)\n }\n\n setIsLoading(false)\n\n // We don't want to create new function on any chartModel change as it may be the same chart with different object instance\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n chartModel?.id,\n chartModel?.ticker,\n chartModel?.timeframe,\n chartModel?.instrument,\n isIdeaChart,\n updateChartModelWithNewQuote,\n isInteractive,\n ])\n\n React.useEffect(() => {\n fetchQuote()\n }, [fetchQuote])\n\n // There are several ways how to turn off dateRange, e.g. moving the charts\n // This effect listens to dateRange changes on chartmodel and updates the url if there's a change\n // Consider refactoring this part so we only update chart models on route changes not the other way around\n React.useEffect(() => {\n if (chartModel) {\n const decodedQueryString = decodeQueryString(location.search)\n const rangesArray = chartModel\n .chart_layout()\n .getAllCharts()\n .map((chart) => chart.dateRange)\n const ranges = rangesArray.every((i) => !i) ? undefined : rangesArray.join(',')\n\n if (decodedQueryString.r !== ranges) {\n navigate({\n search: `?${encodeQueryString({\n ...decodedQueryString,\n r: ranges,\n })}`,\n })\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [chartModel?.dateRange])\n\n // https://github.com/finvizhq/charts/pull/1253/files#r1052266805\n // React.useEffect(\n // () => () => {\n // if (isInteractive && abortControllerKeyRef.current !== '') {\n // abortRequest(abortControllerKeyRef.current)\n // }\n // },\n // [isInteractive]\n // )\n\n React.useEffect(() => {\n const chart = chartModelRef.current\n const quote = chart?.quote()\n\n let shouldRecalculateOnCharts = false\n if (chartLayoutModel?.specificChartFunctionality === SpecificChartFunctionality.chartPage && !isIdeaChart) {\n const settings = chartLayoutModel?.settings\n const barWidth = 3\n const barMargin = 1\n if (settings) {\n const hasSameBarWidth = [\n settings.ChartSettings.center.barWidth,\n settings.IndicatorSettings.center.barWidth,\n ].every((value) => value === barWidth)\n const hasSameBarMargin = [\n settings.ChartSettings.center.barMargin,\n settings.IndicatorSettings.center.barMargin,\n ].every((value) => value === barMargin)\n\n shouldRecalculateOnCharts = !hasSameBarWidth || !hasSameBarMargin\n if (shouldRecalculateOnCharts) {\n settings.ChartSettings.center.barWidth = barWidth\n settings.IndicatorSettings.center.barWidth = barWidth\n settings.ChartSettings.center.barMargin = barMargin\n settings.IndicatorSettings.center.barMargin = barMargin\n\n chartLayoutModel.updateAttributes({ settings })\n }\n }\n }\n\n if (\n chart &&\n quote &&\n (chartLayoutModel?.specificChartFunctionality === SpecificChartFunctionality.quotePage ||\n shouldRecalculateOnCharts) &&\n !isIdeaChart\n ) {\n const leftOffset = getLeftOffset({ quote, chartModel: chart })\n chart.updateAttributes({ leftOffset })\n }\n // This effect should run only on timeframe change & idea change\n // The reason we need to recalculate the left offset is that quote timeframe change changes chart and chart bars sizes\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [chartModel?.quote()?.timeframe, chartLayoutModel?.settings, isIdeaChart])\n\n return { isLoading }\n}\n","import Spine from '@finviz/spine'\nimport * as React from 'react'\n\nexport function useModelRef(model: Model | null) {\n const modelRef = React.useRef(model)\n\n React.useEffect(() => {\n modelRef.current = model\n }, [model])\n\n return modelRef\n}\n","import classnames from 'classnames'\nimport React from 'react'\nimport { useNavigate } from 'react-router-dom'\n\nimport {\n CustomDateRange,\n Heading,\n TimeframeBar,\n useCustomDateRangeDialog,\n useFavoriteTimeframes,\n} from '../../components'\nimport { ChartEditorEnum, SpecificChartFunctionality, TIMEFRAME } from '../../constants/common'\nimport { useModelState } from '../../model-hooks/use-model-state'\nimport Chart from '../../models/chart'\nimport { IdeasDropdown } from '../header/ideas_dropdown'\nimport { Publish } from '../header/publish'\nimport { TourButton } from '../header/tour_button'\nimport { ChartTypesSelect } from './chart-type-select'\nimport { DailyChangeDisplay } from './daily-change-display'\nimport { DrawButton } from './draw-button'\nimport { FullscreenButton } from './fullscreen-button'\nimport Search from './search'\nimport { ChartSettingsButton } from './settings-button'\nimport { useChartControls } from './use-chart-controls'\nimport { IDateRange, useChartModelCustomDateRangeValues } from './use-chart-model-custom-date-range-values'\n\ninterface SettingsComponentProps {\n chartModel: Chart\n chartIndex: number\n}\n\nconst isPremium = window.FinvizSettings.hasUserPremium\nconst hasRedesignEnabled = window.FinvizSettings.hasRedesignEnabled\n\nexport function ChartControls({ chartIndex, chartModel: unwatchedChartModel }: SettingsComponentProps) {\n const rounding = hasRedesignEnabled ? undefined : 'none'\n // This memo is required for publish, otherwise it ends up in a loop\n const chartLayout = React.useMemo(() => unwatchedChartModel.chart_layout(), [unwatchedChartModel])\n const chartModel = useModelState(unwatchedChartModel, {\n watchProperties: ['ticker', 'quote', 'dateRange'],\n })\n const { instrument } = chartModel?.quote() || {}\n const isQuotePage = chartLayout.specificChartFunctionality === SpecificChartFunctionality.quotePage\n\n const navigate = useNavigate()\n const { favoriteTimeframes, toggleFavoriteTimeframe } = useFavoriteTimeframes()\n const { isLoading } = useChartControls({\n chartModel,\n isInteractive: true,\n })\n const {\n anchorDate,\n generateChartLayoutRouterPath,\n timeframeGroupsWithHref,\n dateRangeGroupsWithHref,\n isFetching,\n handleCustomDateRangeValidation,\n } = useChartModelCustomDateRangeValues({ chartModel, isPremium })\n const { onDialogSubmit, customDateRangeDialogState, handleDateRangeSelect, getDateRangeTimeframe } =\n useCustomDateRangeDialog({\n instrument,\n anchorDate,\n pathGenerator: generateChartLayoutRouterPath,\n })\n\n const handleTickerSelect = React.useCallback(\n (ticker: string) => {\n const upperCaseTicker = ticker.toUpperCase()\n\n navigate(\n generateChartLayoutRouterPath({\n ticker: upperCaseTicker,\n timeframe: chartModel.timeframe,\n dateRange: chartModel.dateRange,\n })\n )\n },\n [chartModel, generateChartLayoutRouterPath, navigate]\n )\n\n async function handleCustomRangeSubmit(values: { dateRange: string | null }) {\n const dateRangeTimeframe = getDateRangeTimeframe(values.dateRange) as IDateRange | null\n if (!dateRangeTimeframe) return\n\n const isValid = await handleCustomDateRangeValidation(dateRangeTimeframe)\n if (isValid) onDialogSubmit(dateRangeTimeframe)\n }\n\n const timeframeBarProps = React.useMemo(\n () => ({\n size: 'medium',\n chartIndex: chartIndex,\n timeFrameGroups: timeframeGroupsWithHref(isPremium),\n dateRangeGroups: dateRangeGroupsWithHref({ isPremium, customRange: chartModel.dateRange, instrument }),\n selectedTimeframe: chartModel.timeframe,\n onTimeframeSelect: () => {},\n selectedDateRange: chartModel.dateRange,\n favoriteTimeframes: favoriteTimeframes,\n loadingTimeframe: isLoading ? chartModel.timeframe : undefined,\n onDateRangeSelect: handleDateRangeSelect,\n isFavoritesEnabled: isPremium,\n onFavoriteTimeframeToggle: ({ value }: { value: TIMEFRAME }) => {\n toggleFavoriteTimeframe(value)\n },\n }),\n [\n chartIndex,\n chartModel.dateRange,\n chartModel.timeframe,\n dateRangeGroupsWithHref,\n favoriteTimeframes,\n handleDateRangeSelect,\n instrument,\n isLoading,\n timeframeGroupsWithHref,\n toggleFavoriteTimeframe,\n ]\n )\n\n if (chartLayout.specificChartFunctionality === SpecificChartFunctionality.chartPage) {\n return (\n \n {chartModel.chart_layout().canChangeTicker && (\n \n )}\n\n \n\n \n\n \n
\n )\n }\n\n const hasTimeframe = chartLayout.editors.includes(ChartEditorEnum.timeframe)\n\n return (\n \n \n {!isQuotePage && (\n
\n {chartModel.quote().name ?? chartModel.ticker}\n \n )}\n {chartLayout.editors.includes(ChartEditorEnum.tools) && (\n
\n Draw\n \n )}\n {chartLayout.editors.includes(ChartEditorEnum.ideas) && (\n \n Ideas\n \n )}\n {!hasTimeframe && (\n \n \n
\n )}\n \n {chartLayout.editors.includes(ChartEditorEnum.publish) && (\n
\n Share\n \n )}\n {isQuotePage && (\n \n )}\n \n {!isQuotePage && 'Fullscreen'}\n \n {chartLayout.editors.includes(ChartEditorEnum.settings) && (\n \n {!isQuotePage && 'Settings'}\n \n )}\n {!isQuotePage && (\n \n \n
\n )}\n \n \n \n \n
\n )}\n \n \n \n )}\n \n )\n}\n","import React from 'react'\n\nimport Utils from '../utils'\n\nexport function useClickAway(callback: (event: MouseEvent | TouchEvent) => void, isListening = true) {\n const ref = React.useRef(null)\n const refCallback = React.useRef(callback)\n\n React.useLayoutEffect(() => {\n refCallback.current = callback\n })\n\n React.useEffect(() => {\n if (!isListening) {\n return\n }\n const isMobile = Utils.isMobile()\n const handler = (e: MouseEvent | TouchEvent) => {\n const element = ref.current\n if (element && e.target && !element.contains(e.target as HTMLElement)) {\n refCallback.current(e)\n }\n }\n\n document.addEventListener(isMobile ? 'touchstart' : 'mousedown', handler)\n\n return () => {\n document.removeEventListener(isMobile ? 'touchstart' : 'mousedown', handler)\n }\n }, [callback, isListening])\n\n return ref\n}\n","import React from 'react'\n\nimport { Button, ButtonGroup, Delayed, Icon, Spinner } from '../../components'\nimport { useModelState } from '../../model-hooks/use-model-state'\nimport Chart from '../../models/chart'\nimport { QuoteFetchType } from '../../models/quote/constants'\nimport { useIsMounted } from '../../utils/use-is-mounted'\n\ninterface LoadLatestDataButtonProps {\n chartModel: Chart\n}\n\nexport function LoadLatestDataButton({ chartModel: chartModelUnwatched }: LoadLatestDataButtonProps) {\n const getIsMounted = useIsMounted()\n const chartModel = useModelState(chartModelUnwatched, { watchProperties: ['quote'] })\n const quoteModel = useModelState(chartModel.quote(), { watchProperties: ['isFetching'] })\n const [hasNewDataAvailable, setHasNewDataAvailable] = React.useState(false)\n\n React.useEffect(() => {\n if (!chartModel.getRefreshInterval()) {\n // We will do a check here if we have correct new data\n chartModel\n .quote()\n .isPossibleToFetchSequentialData()\n .then((hasNewData) => {\n if (getIsMounted()) {\n setHasNewDataAvailable(hasNewData)\n }\n })\n }\n // We need to run it only on mount\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n const handleLoadLatestData = async () => {\n const promises = chartModel\n .getAllQuotes()\n .map(async (quote) => quote.fetchData({ fetchType: QuoteFetchType.NewerData }))\n chartModel.updateAttributes({ refreshData: true })\n await Promise.all(promises)\n if (getIsMounted()) {\n setHasNewDataAvailable(false)\n window.gtag?.('event', 'load-latest-data', { event_category: 'ideas' })\n }\n }\n\n if (!hasNewDataAvailable) {\n return null\n }\n\n return (\n \n }>\n \n \n ) : (\n 'refresh'\n )\n }\n disabled={quoteModel?.isFetching}\n title=\"Load latest data\"\n onClick={handleLoadLatestData}\n data-testid=\"load-latest-data-button\"\n >\n Load latest data\n \n \n )\n}\n","// Copy if this file is in Website repo in Website/js/main/hooks/ folder\nimport * as React from 'react'\n\nexport function useIsMounted() {\n const isMountedRef = React.useRef(false)\n const getIsMounted = React.useCallback(() => isMountedRef.current, [])\n\n React.useEffect(() => {\n isMountedRef.current = true\n return () => {\n isMountedRef.current = false\n }\n }, [])\n\n return getIsMounted\n}\n","import classnames from 'classnames'\nimport debounce from 'lodash.debounce'\nimport React from 'react'\n\nimport { Button, ButtonGroup, Icon } from '../../components'\nimport { useModelState } from '../../model-hooks/use-model-state'\nimport Chart from '../../models/chart'\nimport Utils from '../../utils'\nimport { getLeftOffset } from '../renderUtils'\nimport { LoadLatestDataButton } from './load-latest-data-button'\n\nexport const ZOOM_CONTROLS_ACTIVE_CLASS = 'is-active'\nexport const ZOOM_CONTROLS_IS_IN_AREA_CLASS = 'is-in-area'\n\nconst buttonCommonProps = {\n size: 'none',\n className: 'w-7 h-6',\n contentClass: 'flex justify-center',\n}\n\nconst isMobile = Utils.isMobile()\n\ninterface ZoomControlsProps {\n zoomControlsRef: React.RefObject\n isVisible: boolean\n chartModel: Chart\n onZoomIn: () => void\n onZoomOut: () => void\n onZoomReset: () => void\n}\n\nconst getDefaultLeftOffset = (chartModel: Chart) =>\n getLeftOffset({\n quote: chartModel.quote(),\n chartModel,\n config: {},\n })\n\nexport function ZoomControls({\n zoomControlsRef,\n chartModel,\n isVisible,\n onZoomIn,\n onZoomOut,\n onZoomReset,\n}: ZoomControlsProps) {\n const chartLayoutModel = useModelState(chartModel.chart_layout(), { watchProperties: ['idea'] })\n const [isGoToRecentVisible, setIsGoToRecentVisible] = React.useState(false)\n const { defaultZoomFactor } = chartLayoutModel\n const [isZoomResetVisible, setIsZoomResetVisible] = React.useState(chartModel.zoomFactor !== defaultZoomFactor)\n const handleGoToMostRecent = React.useCallback(() => {\n chartModel.updateAttributes({ leftOffset: getDefaultLeftOffset(chartModel), dateRange: null })\n }, [chartModel])\n\n React.useEffect(() => {\n const handleChartModelChangeDebounced = debounce(\n () => {\n setIsZoomResetVisible(chartModel.zoomFactor !== defaultZoomFactor)\n setIsGoToRecentVisible(chartModel.leftOffset !== getDefaultLeftOffset(chartModel))\n },\n 100,\n { maxWait: 333 }\n )\n chartModel.bind('change', handleChartModelChangeDebounced)\n return () => {\n handleChartModelChangeDebounced.cancel()\n chartModel.unbind('change', handleChartModelChangeDebounced)\n }\n }, [defaultZoomFactor, chartModel])\n\n return (\n \n {!isMobile && (\n \n {isZoomResetVisible && (\n
\n \n \n \n \n \n
\n )}\n
\n \n \n \n\n \n \n
\n {!!chartLayoutModel.idea?.id && }\n\n {isGoToRecentVisible && (\n \n \n \n \n \n )}\n
\n \n )\n}\n","import Spine from '@finviz/spine'\nimport classnames from 'classnames'\nimport Hammer from 'hammerjs'\nimport debounce from 'lodash.debounce'\nimport React from 'react'\n\nimport { CustomSpineEvents, DrawingSpineOptionsEvent, EmptyObject, ObjectHash, PaneArea } from '../../../types/shared'\nimport CanvasElement from '../../canvas/element'\nimport ChartEvent from '../../chart-events/chart-event'\nimport { Button, Notification, Paragraph, withNotificationContext } from '../../components'\nimport { IndicatorType, ScaleType, SetVisibilityTo, SpecificChartFunctionality } from '../../constants/common'\nimport IndicatorElement from '../../indicators/indicator'\nimport { getContextWithCache } from '../../lib/shims'\nimport { withElementStyleDialogState } from '../../modals/element_style'\nimport ChartModel from '../../models/chart'\nimport ChartEventElement from '../../models/chart-event-element'\nimport ElementModel from '../../models/element'\nimport MouseModel from '../../models/mouse'\nimport PaneModel from '../../models/pane'\nimport Quote from '../../models/quote'\nimport { handleRemoveIndicatorPane } from '../../models/utils'\nimport Utils, { isRedesignedPage } from '../../utils'\nimport { getBarWidthWithMargin, unmountCanvas } from '../../utils/chart'\nimport { setElementCursor } from '../../utils/cursor'\nimport { getValueInRange, isPrimaryClick } from '../../utils/helpers'\nimport { getInitialStoreDrawings } from '../autosave/utils'\nimport { CHART_LAYOUT_CHILD_CHANGE_EVENT } from '../chart_layout/constants'\nimport ContextMenu from '../context_menu'\nimport { getMinMaxLeftOffset, getSettings, recountScale, renderPane } from '../renderUtils'\nimport { DrawingTool } from '../toolbar/interfaces'\nimport { getChartAlt } from '../utils'\nimport { ChartEventPopoverWithState } from './chart-event-popover-with-state'\nimport { withPaneModel } from './with-pane-model'\nimport { ZOOM_CONTROLS_ACTIVE_CLASS, ZOOM_CONTROLS_IS_IN_AREA_CLASS, ZoomControls } from './zoom_controls'\n\n// Indicates how many time lower/higher can new scale be compared to original one\nconst ALLOWED_MIN_MAX_ZOOM = 10000\n\ninterface PaneProps {\n model: PaneModel\n chartModel: ChartModel\n activeTool: DrawingTool\n activeChartInteraction: string | null\n chartIndex: number\n paneIndex: number\n touchEventsDisabled: boolean\n onPaneClick: (model: PaneModel) => void\n onZoomerReset: () => void\n onZoomerMouseDown: React.MouseEventHandler\n onZoomerTouchStart: React.TouchEventHandler\n onAddToZoomFactor: (data: { diff: number; shouldCalculateRightAlign: boolean }) => void\n onResizerMouseDown: (e: React.MouseEvent, model: PaneModel) => void\n onPaneDestroy: (paneId: string) => void\n setActiveChartInteraction: (value: string | null) => void\n openElementStyleDialog?: (element: CanvasElement | IndicatorElement) => void\n notificationContext: { show: (element: JSX.Element, options: { inline?: boolean }) => void; hide: () => void }\n}\n\ninterface PaneState {\n hasSeenCrossNotification: boolean\n}\n\nclass Pane extends React.Component {\n rafId?: number | null = null\n crossRafId?: number | null = null\n quoteModel: Quote\n paneRef = React.createRef()\n scalerRef = React.createRef()\n zoomerRef = React.createRef()\n zoomControlsRef = React.createRef()\n canvasWrapperRef = React.createRef()\n canvasRef = React.createRef()\n crossCanvasRef = React.createRef()\n chartLayoutModel = this.props.chartModel.chart_layout()\n paneHammer!: HammerManager\n scalerHammer!: HammerManager\n zoomerHammer!: HammerManager\n canvasWrapperHammer!: HammerManager\n mouseDown = false\n lastClientX?: number\n lastClientY?: number\n currentViewRange: { min: number; max: number } | null = null\n lastX!: number\n lastY!: number\n lastActiveTool: DrawingTool\n scalerLastY: number | null = null\n isElementHovered = false\n hoveredElement: CanvasElement | null = null\n isMobile: boolean\n isDisableTouchCrossAvailable = true\n\n canvas: HTMLCanvasElement | null = null\n canvasCtx: CanvasRenderingContext2D | null = null\n crossCanvas: HTMLCanvasElement | null = null\n crossCanvasCtx: CanvasRenderingContext2D | null = null\n isIndicatorPane = false\n\n state: PaneState = {\n hasSeenCrossNotification: !!window.localStorage?.getItem('hasSeenCrossNotification'),\n }\n\n // expects chartModel, model, onResizerMouseDown, onPaneDestroy\n constructor(props: PaneProps) {\n super(props)\n\n this.quoteModel = this.props.chartModel.quote()\n props.model.updateAttribute('instance', this)\n props.model.bind('update', this.onModelUpdate)\n props.model\n .elements()\n .bind('create', this.onElementCreate)\n .bind('destroy', this.onElementDestroy)\n .bind('replace', this.onElementReplace)\n .bind('select', this.onElementSelect)\n .bind('makeClone', this.onElementClone)\n .bind('change', this.immediateRecountScaleOnChartIndicatorChange)\n .bind('change', debounce(this.recountScale, 50))\n props.model.bind(CustomSpineEvents.ManualChange, this.recountScale)\n\n props.model.chartEvents().bind('create', this.onElementCreate).bind('change', debounce(this.recountScale, 50))\n\n this.props.chartModel.bind('update', this.onChartUpdate)\n this.props.chartModel.bind(`change ${CustomSpineEvents.IndicatorsChange}`, this.recountScale)\n this.quoteModel.bind('change', this.recountScale)\n this.isMobile = !!Utils.isMobile()\n this.lastActiveTool = props.activeTool\n if (!MouseModel.pane()) {\n MouseModel.updateAttribute('pane', props.model)\n }\n this.isIndicatorPane = props.model.getIsIndicatorPane()\n this.recountScale()\n }\n\n componentDidMount() {\n const { model } = this.props\n this.chartLayoutModel.bind('theme', this.renderAll)\n this.chartLayoutModel.bind('theme', this.renderCross)\n\n const initialStoreDrawings = getInitialStoreDrawings() ?? []\n const elements = [...model.getAllElements(), ...model.getAllChartEvents(false)]\n elements.forEach((element) => {\n this.onElementCreate(element)\n if (element.isDrawing()) {\n const hasDrawingInInitialCache = initialStoreDrawings.some(({ elementId }) => element.elementId === elementId)\n if (hasDrawingInInitialCache) {\n element.instance?.updateScales()\n }\n element.instance.cachePointPositionTimestamp()\n } else if (element.isChartEvent()) {\n element.instance?.updateScales()\n }\n })\n\n model?.updateChartEventsZIndexes()\n\n this.canvas = this.canvasRef.current\n this.canvasCtx = getContextWithCache(this.canvasRef.current)\n this.crossCanvas = this.crossCanvasRef.current\n this.crossCanvasCtx = getContextWithCache(this.crossCanvasRef.current)\n\n this.paneHammer = new Hammer.Manager(this.paneRef.current!, { touchAction: 'none' })\n this.paneHammer.add(new Hammer.Press({ threshold: 5, time: 500 })) // chrome simulator \"long touch\" -> \"oncontextmenu\" is 680ms +- 2ms\n this.paneHammer.on('press', this.onPress)\n this.canvasWrapperHammer = new Hammer(this.canvasWrapperRef.current!, { touchAction: 'none' })\n this.canvasWrapperHammer.on('tap', this.onClick)\n this.canvasWrapperRef.current?.addEventListener('touchmove', this.onTouchMove, { passive: false })\n\n if (this.chartLayoutModel.scrollable || !this.isMobile) {\n if (this.scalerRef.current) {\n this.scalerHammer = new Hammer(this.scalerRef.current, { touchAction: 'none' })\n this.scalerHammer.on('doubletap', this.onScalerReset)\n }\n if (this.zoomerRef.current) {\n this.zoomerHammer = new Hammer(this.zoomerRef.current, { touchAction: 'none' })\n this.zoomerHammer.on('doubletap', this.props.onZoomerReset)\n }\n this.canvasWrapperHammer.on('doubletap', this.onDoubleClick)\n }\n\n this.onChartUpdate({ width: this.props.chartModel.width })\n this.onModelUpdate({ height: model.height })\n this.forceUpdate()\n this.chartLayoutModel.trigger(CHART_LAYOUT_CHILD_CHANGE_EVENT)\n }\n\n componentWillUnmount() {\n this.canvasWrapperRef.current?.removeEventListener('touchmove', this.onTouchMove)\n unmountCanvas(this.canvas)\n unmountCanvas(this.crossCanvas)\n this.props.chartModel.unbind('update', this.onChartUpdate)\n this.props.chartModel.unbind('change', this.recountScale)\n this.quoteModel.unbind('change', this.recountScale)\n }\n\n render() {\n const { activeTool, touchEventsDisabled, onPaneClick, paneIndex, chartIndex, model, chartModel } = this.props\n if (touchEventsDisabled) {\n this.paneHammer?.set({ touchAction: 'auto' })\n this.scalerHammer?.set({ touchAction: 'auto' })\n this.zoomerHammer?.set({ touchAction: 'auto' })\n this.canvasWrapperHammer?.set({ touchAction: 'auto' })\n } else {\n const touchAction = this.getIsHammerAllowScrollActive() ? 'auto' : 'none'\n this.scalerHammer?.set({ touchAction: 'none' })\n this.zoomerHammer?.set({ touchAction: 'none' })\n this.paneHammer?.set({ touchAction })\n this.canvasWrapperHammer?.set({ touchAction })\n }\n\n const isChartPane = model.getIsChartPane()\n\n return (\n onPaneClick(model)}\n onTouchStart={() => onPaneClick(model)}\n onContextMenu={this.onContextMenu}\n data-testid={`chart-${chartIndex}-pane-${paneIndex}`}\n >\n {isChartPane && }\n {paneIndex !== 0 && (\n this.props.onResizerMouseDown(e, model)}\n data-testid={`chart-${chartIndex}-pane-${paneIndex}-resizer`}\n />\n )}\n {this.chartLayoutModel.initialScrollable && (\n \n )}\n\n {this.chartLayoutModel.initialScrollable && isChartPane && (\n <>\n \n {\n this.props.onAddToZoomFactor({ diff: 0.1, shouldCalculateRightAlign: true })\n }}\n onZoomOut={() => {\n this.props.onAddToZoomFactor({ diff: -0.1, shouldCalculateRightAlign: true })\n }}\n onZoomReset={this.props.onZoomerReset}\n />\n \n )}\n \n \n {this.chartLayoutModel.cross && }\n \n \n )\n }\n\n getIsHammerAllowScrollActive = () =>\n this.chartLayoutModel.specificChartFunctionality !== SpecificChartFunctionality.chartPage &&\n !this.chartLayoutModel.isTouchCrossActive &&\n !this.chartLayoutModel.scrollable\n\n onElementCreate = (el: ElementModel | ChartEventElement) => {\n el.instance.bind('change', this.renderAll)\n this.renderAll()\n }\n\n onElementReplace = (el: ElementModel, oldElementInstance: CanvasElement) => {\n oldElementInstance.unbind('change', this.renderAll)\n el.instance.bind('change', this.renderAll)\n if (oldElementInstance === this.props.model.selection && !this.chartLayoutModel.isDrawingModeContinuousActive) {\n this.setSelection(el.instance)\n } else {\n this.setSelection(null)\n }\n this.renderAll()\n }\n\n onElementDestroy = (el: ElementModel) => {\n const { type } = el.instance\n el.instance.unbind('change', this.renderAll)\n if (el.instance === this.props.model.selection) {\n this.setSelection(null)\n }\n if (type.startsWith('charts/') || type.startsWith('indicators/')) {\n this.props.onPaneDestroy(el['pane_id'])\n }\n this.renderAll()\n }\n\n onElementSelect = (el: ElementModel) => {\n this.setSelectedElement(el.instance)\n }\n\n onElementClone = (_: unknown, clonedElementInstance: CanvasElement) => {\n this.setSelectedElement(clonedElementInstance)\n }\n\n onModelUpdate = ({ height }: { height: number }) => {\n this.setCanvasSize({\n width: this.props.chartModel.width,\n height,\n })\n }\n\n onChartUpdate = ({ width }: { width: number }) => {\n const { model, chartModel } = this.props\n this.setCanvasSize({\n width,\n height: model.height,\n })\n const quote = chartModel.quote()\n if (!this.quoteModel.eql(quote)) {\n this.quoteModel.unbind('change', this.recountScale)\n if (quote) {\n this.quoteModel = quote\n this.quoteModel.bind('change', this.recountScale)\n }\n }\n }\n\n onZoomerMouseMove: React.MouseEventHandler = (e) => {\n if (!this.chartLayoutModel.scrollable || (this.isMobile && !this.chartLayoutModel.isTouchCrossActive)) return\n const area = this.getArea(e)\n MouseModel.updateAttributes({\n position: { x: area.x, y: null },\n pane: this.props.model,\n })\n }\n\n onMouseMoveOnScrolling = (event: TouchEvent | MouseEvent) => {\n if (this.props.activeChartInteraction) {\n return\n }\n\n let { clientX, clientY } = event as MouseEvent\n const { model } = this.props\n\n const isTouch = typeof TouchEvent !== 'undefined' && event instanceof TouchEvent\n if (isTouch && event.targetTouches?.length > 0) {\n clientX = event.targetTouches[0].clientX\n clientY = event.targetTouches[0].clientY\n }\n if (!model.selection && !this.chartLayoutModel.activeChartEvent) {\n if (this.lastClientX != null) {\n const dif = this.lastClientX - clientX\n this.addToLeftOffset(-dif)\n }\n if (model.scaleRange && this.lastClientY != null) {\n let { min, max } = model.scaleRange\n let difY\n switch (this.props.chartModel.scale) {\n case ScaleType.Logarithmic: {\n difY = this.lastClientY - clientY\n min = model.scale.y.invert(model.scale.y(min) + difY)\n max = model.scale.y.invert(model.scale.y(max) + difY)\n break\n }\n default: {\n difY = (this.lastClientY - clientY) * (model.scale.y.invert(0) - model.scale.y.invert(1))\n min -= difY\n max -= difY\n break\n }\n }\n\n model.updateAttribute('scaleRange', { min, max })\n this.recountScale()\n this.currentViewRange = this.props.model.getChartOrIndicatorElement()?.instance?.getMinMax?.() ?? null\n }\n }\n this.lastClientX = clientX\n this.lastClientY = clientY\n }\n\n onScalerTouchStart: React.TouchEventHandler = (e) => {\n if (!this.chartLayoutModel.scrollable || this.props.touchEventsDisabled) return\n if (this.chartLayoutModel.scrollable && e.targetTouches.length === 1) {\n this.onScalerMouseDown(e.targetTouches[0])\n }\n }\n\n onScalerTouchMove = (e: TouchEvent) => {\n if (this.chartLayoutModel.scrollable && e.targetTouches.length === 1) {\n this.onScalerMouseMove(e.targetTouches[0])\n }\n }\n\n onScalerTouchEnd = () => {\n if (this.chartLayoutModel.scrollable) {\n this.onScalerMouseUp()\n }\n }\n\n onScalerMouseEnter = () => {\n MouseModel.updateAttributes({\n position: null,\n pane: null,\n })\n }\n\n onScalerMouseDown = (event: React.MouseEvent | React.Touch) => {\n const { activeChartInteraction, setActiveChartInteraction, model } = this.props\n if ((event instanceof MouseEvent && event.button) || activeChartInteraction || !this.chartLayoutModel.scrollable) {\n return\n }\n setActiveChartInteraction('scaler')\n\n this.scalerLastY = event.clientY\n // here we need current domain scale or former \"nice\" value\n const [currentDomainMax, currentDomainMin] = model.scale.y.domain()\n this.currentViewRange = { min: currentDomainMin, max: currentDomainMax }\n document.addEventListener<'mousemove'>('mousemove', this.onScalerMouseMove)\n document.addEventListener('mouseup', this.onScalerMouseUp)\n document.addEventListener('touchmove', this.onScalerTouchMove)\n document.addEventListener('touchend', this.onScalerTouchEnd)\n }\n\n onScalerMouseMove = (event: MouseEvent | Touch) => {\n const { model, chartModel } = this.props\n if (model.scaleRange === null && this.currentViewRange === null) {\n return\n }\n let { min, max } = model.scaleRange || this.currentViewRange!\n let difY\n switch (this.props.chartModel.scale) {\n case ScaleType.Logarithmic: {\n difY = this.scalerLastY! - event.clientY\n min = model.scale.y.invert(model.scale.y(min) - difY)\n max = model.scale.y.invert(model.scale.y(max) + difY)\n break\n }\n default: {\n difY = -(this.scalerLastY! - event.clientY) * (model.scale.y.invert(0) - model.scale.y.invert(1))\n min -= difY\n max += difY\n break\n }\n }\n this.scalerLastY = event.clientY\n\n const originalMinMax = model.getChartOrIndicatorElement()?.instance?.getMinMax?.()\n if (originalMinMax) {\n const currentDiff = Math.abs(max - min)\n const originalDiff = Math.abs(originalMinMax.max - originalMinMax.min)\n\n if (currentDiff > originalDiff * ALLOWED_MIN_MAX_ZOOM || currentDiff < originalDiff / ALLOWED_MIN_MAX_ZOOM) {\n return\n }\n }\n\n model.updateAttribute('scaleRange', { min, max })\n chartModel.updateAttribute('dateRange', null)\n this.recountScale()\n }\n\n onScalerMouseUp = () => {\n this.scalerLastY = null\n\n document.removeEventListener('mousemove', this.onScalerMouseMove)\n document.removeEventListener('mouseup', this.onScalerMouseUp)\n document.removeEventListener('touchmove', this.onScalerTouchMove)\n document.removeEventListener('touchend', this.onScalerTouchEnd)\n this.props.setActiveChartInteraction(null)\n }\n\n onScalerReset = () => {\n const { model, chartModel } = this.props\n if (!this.chartLayoutModel.scrollable) return\n chartModel.updateAttribute('dateRange', null)\n model.updateAttribute('scaleRange', null)\n this.recountScale()\n }\n\n addToLeftOffset = (n: number) => {\n const quote = this.props.chartModel.quote()\n const barWidth = getBarWidthWithMargin({\n chartLayout: this.chartLayoutModel,\n zoomFactor: this.props.chartModel.zoomFactor,\n })\n const leftOffset = getMinMaxLeftOffset({\n newLeftOffset: this.props.chartModel.leftOffset + n,\n chartModel: this.props.chartModel,\n barWidth,\n barIndex: quote.barIndex[quote.open.length - 1],\n })\n\n if (leftOffset > barWidth) {\n quote.fetchOlderData()\n }\n this.props.chartModel.updateAttributes({\n leftOffset,\n dateRange: null,\n })\n }\n\n onDoubleClick = (event: HammerInput) => {\n event.preventDefault()\n const area = this.getArea(event)\n const element = this.props.model.selection || this.getElement(area)\n if (element && element.type !== IndicatorType.Cot) {\n setTimeout(() => {\n this.props.openElementStyleDialog!(element)\n }, 0)\n element.trigger('dblclick', event)\n }\n }\n\n onPress = (e: ObjectHash) => {\n if (e.pointerType !== 'touch') return\n\n e.clientX = e.center.x\n e.clientY = e.center.y\n\n const el = this.props.model.selection || this.getElement(this.getArea(e))\n if (!this.chartLayoutModel.isTouchCrossActive) {\n if (!el) {\n this.onCanvasPress(e as React.MouseEvent)\n } else {\n this.onContextMenu(e as React.MouseEvent, el)\n }\n }\n }\n\n onContextMenu = (e: React.MouseEvent, element?: IndicatorElement | CanvasElement) => {\n e.preventDefault()\n const area = this.getArea(e)\n const elementInArea = this.getElement(area)\n const el = element ?? elementInArea\n if (!el || el.thumbsAreInArea(area)) {\n return\n }\n const elementModel = ElementModel.findByAttribute('instance', el)\n if (!elementModel) return\n this.setSelectedElement(el)\n const hasProperties =\n ['indicator', 'canvas'].some((type) => el.type.startsWith(type)) && el.type !== IndicatorType.Cot\n const isElementDrawing = elementModel.isDrawing()\n\n return ContextMenu.show(\n e,\n [\n hasProperties && {\n id: 'edit',\n label: 'Edit style',\n onClick: () => this.props.openElementStyleDialog!(el),\n },\n\n !(elementModel.isChart() || elementModel?.isIndicator()) && {\n id: 'clone',\n label: 'Clone',\n onClick: () => elementModel.makeClone(),\n },\n\n ...(isElementDrawing\n ? [\n { type: 'divider', label: 'Visibility' },\n\n {\n id: 'visibility-current-and-above',\n label: 'Current interval and above',\n onClick: () => elementModel.instance.setVisibilityTo(SetVisibilityTo.currentAndAbove),\n },\n\n {\n id: 'visibility-current-and-below',\n label: 'Current interval and below',\n onClick: () => elementModel.instance.setVisibilityTo(SetVisibilityTo.currentAndBelow),\n },\n\n {\n id: 'visibility-current-only',\n label: 'Current interval only',\n onClick: () => elementModel.instance.setVisibilityTo(SetVisibilityTo.currentOnly),\n },\n\n {\n id: 'visibility-all-intervals',\n label: 'All intervals',\n onClick: () => elementModel.instance.setVisibilityTo(SetVisibilityTo.all),\n },\n ]\n : []),\n\n (isElementDrawing || hasProperties) && { type: 'divider' },\n\n {\n id: 'bring-to-front',\n label: 'Bring to Front',\n onClick: () => elementModel.bringToFront(),\n },\n {\n id: 'send-to-back',\n label: 'Send to Back',\n onClick: () => elementModel.sendToBack(),\n },\n {\n id: 'bring-forward',\n label: 'Bring Forward',\n onClick: () => elementModel.bringForward(),\n },\n {\n id: 'send-backward',\n label: 'Send Backward',\n onClick: () => elementModel.sendBackward(),\n },\n\n { type: 'divider' },\n\n {\n id: 'remove',\n label: 'Remove',\n onClick: () => {\n if (elementModel.isIndicator()) {\n handleRemoveIndicatorPane({ paneIndex: this.props.paneIndex, chartLayoutModel: this.chartLayoutModel })\n } else {\n elementModel.destroyCascade({ eventType: DrawingSpineOptionsEvent.Remove })\n this.props.model.normalizeZIndexes()\n }\n },\n },\n ]\n .filter(Boolean)\n .map((item) => ({ ...item, gtag: { element_type: el.type } }))\n )\n }\n\n immediateRecountScaleOnChartIndicatorChange = (element?: ElementModel) => {\n if (element?.isChart() || element?.isIndicator()) {\n this.recountScale()\n }\n }\n\n recountScale = (_?: unknown, updateType?: Spine.Event) => {\n const { model } = this.props\n const chartModel = model.chart()\n if (updateType === 'destroy' || !chartModel || !chartModel.quote()) {\n return\n }\n\n recountScale({ chartModel, paneModel: model })\n\n if (this.canvasCtx) {\n this.renderAll()\n }\n }\n\n onBlur = () => {\n if (this.props.model.selection?.getIsCreator?.()) {\n this.setSelection(null)\n } else {\n this.setSelectedElement(null)\n }\n if (this.hoveredElement) {\n this.hoveredElement.setIsHovered(false)\n this.hoveredElement = null\n }\n this.props.model.getAllElements().forEach((element) => {\n if (element.instance.getIsCreator?.() && !element.instance.getIsCreatorDialogOpen?.()) {\n element.destroyCascade()\n }\n })\n }\n\n renderAll = (type?: string) => {\n if (process.env.IS_E2E_TESTING) window.isRenderInProgress = true\n if (type === 'cross' && this.chartLayoutModel.cross) {\n if (this.crossRafId === null) {\n this.crossRafId = window.requestAnimationFrame(() => {\n this.renderCross()\n if (process.env.IS_E2E_TESTING) window.isRenderInProgress = Date.now()\n })\n }\n } else if (this.rafId == null && this.canvasCtx) {\n this.rafId = window.requestAnimationFrame(() => {\n this._renderAll()\n if (process.env.IS_E2E_TESTING) window.isRenderInProgress = Date.now()\n })\n }\n }\n\n _renderAll = () => {\n const { model } = this.props\n // _renderAll may be called after Chart was deleted because of requestAnimationFrame\n if (model.chart() === null || this.canvasRef.current === null || !this.canvasCtx) {\n return\n }\n if (this.getIsUpdatedDesign()) {\n if (this.crossRafId === null) {\n this.crossRafId = window.requestAnimationFrame(this.renderCross)\n }\n }\n this.rafId = undefined\n\n renderPane({\n chartLayoutModel: this.chartLayoutModel,\n chartModel: this.props.chartModel,\n paneModel: model,\n canvasCtx: this.canvasCtx,\n })\n }\n\n getIsUpdatedDesign() {\n const { specificChartFunctionality } = this.chartLayoutModel\n const isCharts = specificChartFunctionality === SpecificChartFunctionality.chartPage\n const isRedesignedFuturesForexCrypto = isRedesignedPage({ specificChartFunctionality })\n\n return isCharts || isRedesignedFuturesForexCrypto\n }\n\n renderCross = () => {\n const { model } = this.props\n const isMouseInPane = MouseModel.getShouldRenderCrossInPane(model)\n this.crossRafId = null\n if (!this.crossCanvasCtx) {\n return\n }\n this.crossCanvasCtx.clearRect(0, 0, this.props.chartModel.width, model.height)\n const isCrossDisabled =\n PaneModel.select((p) => !!p.selection && !p.selection.type.startsWith('indicators/')).length !== 0 ||\n this.props.chartModel.getIsDisabled() ||\n !isMouseInPane\n\n for (const { instance: elementInstance } of model.getAllElements()) {\n if (\n (!isCrossDisabled && elementInstance.renderCross != null) ||\n (isCrossDisabled && elementInstance.renderCrossText != null)\n ) {\n this.crossCanvasCtx.save()\n if (isCrossDisabled) {\n elementInstance.renderCrossText!(this.crossCanvasCtx, Number.NaN)\n } else {\n elementInstance.renderCross!(this.crossCanvasCtx)\n }\n this.crossCanvasCtx.restore()\n }\n }\n }\n\n getArea = (e: ObjectHash, additionalData?: T): PaneArea => {\n const { model } = this.props\n const clientX = e.clientX || additionalData?.clientX\n const clientY = e.clientY || additionalData?.clientY\n const Settings = getSettings(model)\n const areaRectangle = this.canvas!.getBoundingClientRect()\n const areaRectangleCursorX = clientX - areaRectangle.left\n const areaRectangleCursorY = clientY - areaRectangle.top\n const x = areaRectangleCursorX - model.chart().leftOffset - Settings.left.width\n const y = areaRectangleCursorY - Settings.top.height\n const scale = model.scale\n const chartLeftX = areaRectangle.left + Settings.left.width\n const chartRightX = areaRectangle.right - Settings.right.width\n return {\n ...(additionalData as T),\n // TODO: rewrite if canvas uses padding/border\n x: scale.x.invert(x),\n y: scale.y.invert(y),\n scaled: {\n x,\n y,\n },\n width: 1,\n height: 1,\n cursorX: areaRectangleCursorX,\n cursorY: areaRectangleCursorY,\n isCursorInChartWidthBoundaries: clientX > chartLeftX && clientX < chartRightX,\n }\n }\n\n setCanvasSize = ({ width, height }: { width: number; height: number }) => {\n const ratio = Utils.getScaleRatio()\n const canvasElement = this.canvasRef.current\n\n /**\n * It seems that value passed into element attr (e.g. height) is ceiled down,\n * so if you provide canvas element with height 100.5 we'll get integer 100 from canvasElement.height\n * If the difference in values between \"new height\" and canvasElement.height is less than 1, I treat it as the same value\n */\n if (\n this.canvasCtx &&\n canvasElement &&\n (Math.abs(height * ratio - canvasElement.height) >= 1 || Math.abs(width * ratio - canvasElement.width) >= 1)\n ) {\n Utils.setSizeOnCanvasElement({ canvasElement, width, height })\n this.canvasCtx.scale(ratio, ratio)\n if (this.chartLayoutModel.cross && this.crossCanvasCtx) {\n Utils.setSizeOnCanvasElement({\n canvasElement: this.crossCanvasRef.current,\n width,\n height,\n })\n this.crossCanvasCtx.scale(ratio, ratio)\n }\n setTimeout(() => {\n this.recountScale()\n })\n }\n }\n\n onClick = (event: HammerInput) => {\n const area = this.getArea(event, {\n clientX: event.center.x,\n clientY: event.center.y,\n })\n const element = this.props.model.selection || this.getElement(area)\n element?.trigger('click', area)\n\n if (!this.isDisableTouchCrossAvailable) {\n this.isDisableTouchCrossAvailable = true\n return\n }\n\n if (this.chartLayoutModel.isTouchCrossActive) {\n MouseModel.updateAttributes({\n position: null,\n pane: null,\n })\n this.chartLayoutModel.updateAttributes({\n scrollable: this.chartLayoutModel.initialScrollable,\n isTouchCrossActive: false,\n })\n } else if (\n this.isMobile &&\n !this.state.hasSeenCrossNotification &&\n this.lastActiveTool === DrawingTool.Mouse &&\n this.chartLayoutModel.specificChartFunctionality !== SpecificChartFunctionality.smallIndex\n ) {\n const isChartsPage = this.chartLayoutModel.specificChartFunctionality === SpecificChartFunctionality.chartPage\n\n this.setState({ hasSeenCrossNotification: true })\n this.props.notificationContext.show(\n {\n this.props.notificationContext.hide()\n window.localStorage.setItem('hasSeenCrossNotification', 'true')\n }}\n theme=\"dark\"\n >\n Got it\n \n }\n >\n Long press the chart to show the crosshair.\n ,\n { inline: !isChartsPage }\n )\n }\n\n this.lastActiveTool = this.props.activeTool\n }\n\n onPaneMouseLeave = () => {\n // timout in onPaneMouseMove may cause racecondition where active class is added right after it's been removed\n setTimeout(() => {\n this.zoomControlsRef.current?.classList.remove(ZOOM_CONTROLS_ACTIVE_CLASS, ZOOM_CONTROLS_IS_IN_AREA_CLASS)\n })\n if (this.chartLayoutModel.specificChartFunctionality === SpecificChartFunctionality.chartPage) {\n this.renderCross()\n }\n }\n\n onPaneMouseMove = (e: React.MouseEvent | React.Touch, isMouseDownIgnored = false) => {\n const { model, chartModel } = this.props\n const zoomControls = this.zoomControlsRef.current\n const paneHeight = model.height\n if (zoomControls) {\n const area = this.getArea<{ mouseDown: boolean; clientX: number; clientY: number }>(e, {\n mouseDown: !isMouseDownIgnored && this.mouseDown,\n clientX: e.clientX,\n clientY: e.clientY,\n })\n\n // timeout is needed here as adding a classname on parent element of a button where we are listening on a click is not working properly if done synchrnousely\n setTimeout(() => {\n // 103 is the destance between pane bottom and zoom-controls top\n // zoomer bottom (8 px) + zoomer height (20px) - 13px + zoom controls height (75px) = 90px\n const isInArea = model.height - 90 <= area.cursorY && paneHeight > 210\n\n if (\n isInArea &&\n !zoomControls.classList.contains(ZOOM_CONTROLS_IS_IN_AREA_CLASS) &&\n !chartModel.getIsDisabled()\n ) {\n zoomControls.classList.add(ZOOM_CONTROLS_IS_IN_AREA_CLASS)\n } else if (!isInArea && zoomControls.classList.contains(ZOOM_CONTROLS_IS_IN_AREA_CLASS)) {\n zoomControls.classList.remove(ZOOM_CONTROLS_IS_IN_AREA_CLASS)\n }\n\n if (!area.mouseDown && !model.selection && isInArea && !chartModel.getIsDisabled()) {\n if (!zoomControls.classList.contains(ZOOM_CONTROLS_ACTIVE_CLASS)) {\n zoomControls.classList.add(ZOOM_CONTROLS_ACTIVE_CLASS)\n }\n } else if (zoomControls.classList.contains(ZOOM_CONTROLS_ACTIVE_CLASS)) {\n zoomControls.classList.remove(ZOOM_CONTROLS_ACTIVE_CLASS)\n }\n })\n }\n }\n\n onMouseLeave = () => {\n this.mouseDown = false\n }\n\n onTouchStart = (e: React.TouchEvent) => {\n if (!this.props.touchEventsDisabled && e.targetTouches.length === 1) {\n const touchEvent = e.targetTouches[0]\n if (this.chartLayoutModel.scrollable) {\n this.onCanvasInteractionStart(touchEvent)\n } else if (this.chartLayoutModel.isTouchCrossActive) {\n this.lastClientX = touchEvent.clientX\n this.lastClientY = touchEvent.clientY\n if (!MouseModel.pane()?.eql(this.props.model)) {\n const area = this.getArea(touchEvent, {\n mouseDown: this.mouseDown,\n clientX: touchEvent.clientX,\n clientY: touchEvent.clientY,\n })\n this.setMousePosition(this.getMousePositionInBoundaries(area))\n this.isDisableTouchCrossAvailable = false\n }\n } else {\n const area = this.getArea(touchEvent, { isTouch: true }) // passing isTouch is pretty confusing, it's used in Tools.jsx -> onMouseDown method\n const element = this.getElement(area)\n if (element?.getIsChartEvent?.()) {\n const chartEventElement = element as ChartEvent\n chartEventElement.toggleIsOpen()\n }\n }\n this.onPaneMouseMove(touchEvent, true)\n }\n }\n\n onTouchMove = (e: TouchEvent) => {\n if (!this.props.touchEventsDisabled) {\n if (!this.getIsHammerAllowScrollActive()) {\n e.preventDefault()\n }\n if (!this.props.touchEventsDisabled && e.targetTouches.length === 1) {\n this.onCanvasInteractionMove(e.targetTouches[0])\n }\n }\n }\n\n onTouchEnd = (e: React.TouchEvent) => {\n if (!this.props.touchEventsDisabled && this.chartLayoutModel.scrollable) {\n this.onCanvasInteractionEnd(e)\n }\n }\n\n onCanvasPress = (e: React.MouseEvent) => {\n if (this.chartLayoutModel.scrollable) {\n this.chartLayoutModel.updateAttribute('scrollable', false)\n document.removeEventListener('touchmove', this.onMouseMoveOnScrolling)\n }\n if (!this.chartLayoutModel.isTouchCrossActive) {\n this.chartLayoutModel.updateAttribute('isTouchCrossActive', true)\n this.onCanvasInteractionMove(e)\n }\n }\n\n onCanvasInteractionStart = (e: React.Touch | React.MouseEvent) => {\n const { activeTool, activeChartInteraction, chartModel, model } = this.props\n const isTouch = typeof Touch !== 'undefined' && e instanceof Touch\n this.lastActiveTool = activeTool\n\n if (isPrimaryClick(e) && !activeChartInteraction && !chartModel.getIsDisabled()) {\n const area = this.getArea(e, { isTouch }) // passing isTouch is pretty confusing, it's used in Tools.jsx -> onMouseDown method\n const element = this.getElement(area)\n if (this.chartLayoutModel.scrollable) {\n setElementCursor({ elementId: this.chartLayoutModel.getHTMLElementId(), cursor: 'grabbing' })\n if (model.scaleRange) {\n this.currentViewRange = model.getChartOrIndicatorElement()?.instance?.getMinMax?.() ?? null\n }\n document.addEventListener(isTouch ? 'touchmove' : 'mousemove', this.onMouseMoveOnScrolling)\n document.addEventListener(isTouch ? 'touchend' : 'mouseup', this.onCanvasInteractionEnd)\n }\n if (element?.getIsChartEvent?.()) {\n this.setSelectedElement(null)\n const chartEventElement = element as ChartEvent\n chartEventElement.toggleIsOpen()\n } else if (\n activeTool === DrawingTool.Mouse ||\n model.getAllElements().some(({ instance }) => instance.isCreator)\n ) {\n element?.trigger('mousedown', area)\n this.setSelectedElement(element)\n }\n model.trigger('mousedown', model, area, element)\n this.mouseDown = true\n this.lastX = area.x\n this.lastY = area.y\n }\n\n this.lastClientX = e.clientX\n this.lastClientY = e.clientY\n }\n\n onCanvasInteractionMove = (e: React.MouseEvent | React.Touch) => {\n const area = this.getArea(e, {\n mouseDown: this.mouseDown,\n clientX: e.clientX,\n clientY: e.clientY,\n })\n if (!area.isCursorInChartWidthBoundaries) {\n MouseModel.updateAttributes({\n position: null,\n pane: null,\n })\n return\n }\n\n const { model } = this.props\n const hoveredElement = this.getElement(area)\n const element = model.selection || hoveredElement\n\n if (!(this.isMobile && !this.chartLayoutModel.isTouchCrossActive)) {\n this.isDisableTouchCrossAvailable = true\n this.setMousePosition(\n this.lastClientX && this.lastClientY && this.chartLayoutModel.isTouchCrossActive && MouseModel.position\n ? this.getMousePositionInBoundaries({\n x: MouseModel.position.x + (model.scale.x.invert(area.clientX) - model.scale.x.invert(this.lastClientX)),\n y: MouseModel.position.y + (model.scale.y.invert(area.clientY) - model.scale.y.invert(this.lastClientY)),\n })\n : { x: area.x, y: area.y }\n )\n }\n\n if (!this.chartLayoutModel.scrollable) {\n this.lastClientX = area.clientX\n this.lastClientY = area.clientY\n }\n\n element?.trigger('mousemove', area)\n if (\n this.mouseDown &&\n model.selection instanceof CanvasElement &&\n !model.selection.activeThumb &&\n !this.chartLayoutModel.activeChartEvent\n ) {\n if (!model.selection.getIsCreator?.()) {\n model.selection.moveBy(area.x - this.lastX, area.y - this.lastY)\n }\n this.lastX = area.x\n this.lastY = area.y\n this.renderAll()\n }\n const isElementHovered =\n this.props.activeTool === DrawingTool.Mouse &&\n ((element && element === hoveredElement) || hoveredElement instanceof CanvasElement)\n\n if (hoveredElement !== this.hoveredElement && this.hoveredElement instanceof CanvasElement) {\n this.hoveredElement.setIsHovered(false)\n this.hoveredElement = null\n }\n\n if (isElementHovered && hoveredElement instanceof CanvasElement) {\n if (!hoveredElement.isHovered && !hoveredElement.isSelected) {\n hoveredElement.setIsHovered(true)\n this.hoveredElement = hoveredElement\n }\n }\n\n if (isElementHovered !== this.isElementHovered && this.canvas && hoveredElement?.type !== IndicatorType.Cot) {\n this.canvas.className = isElementHovered ? 'hover' : ''\n if (this.chartLayoutModel.cross && this.crossCanvas) {\n this.crossCanvas.className = `second${isElementHovered ? ' hover' : ''}`\n }\n this.isElementHovered = isElementHovered\n }\n }\n\n onCanvasInteractionEnd = (event: TouchEvent | MouseEvent | React.TouchEvent) => {\n if (MouseModel.position) {\n setElementCursor({ elementId: this.chartLayoutModel.getHTMLElementId(), cursor: 'crosshair' })\n } else {\n setElementCursor({ elementId: this.chartLayoutModel.getHTMLElementId(), cursor: 'default' })\n }\n const isTouch = typeof TouchEvent !== 'undefined' && event instanceof TouchEvent\n this.mouseDown = false\n const area = this.getArea(event)\n const element = this.props.model.selection || this.getElement(area)\n element?.trigger('mouseup', area)\n document.removeEventListener(isTouch ? 'touchmove' : 'mousemove', this.onMouseMoveOnScrolling)\n document.removeEventListener(isTouch ? 'touchend' : 'mouseup', this.onCanvasInteractionEnd)\n }\n\n getMousePositionInBoundaries = ({ x, y }: { x: number; y: number }) => {\n const { model } = this.props\n const Settings = getSettings(model)\n const canvasAreaRectangle = this.canvas!.getBoundingClientRect()\n const chartLeft = model.scale.x.invert(-model.chart().leftOffset + 1)\n const chartRight = model.scale.x.invert(\n canvasAreaRectangle.width - Settings.right.width - Settings.left.width - model.chart().leftOffset - 1\n )\n const chartTop = model.scale.y.invert(0)\n const chartBottom = model.scale.y.invert(canvasAreaRectangle.height - Settings.bottom.height - Settings.top.height)\n\n return {\n x: getValueInRange({\n value: x,\n min: chartLeft,\n max: chartRight,\n }),\n y: getValueInRange({\n value: y,\n min: chartBottom,\n max: chartTop,\n }),\n }\n }\n\n setMousePosition = ({ x, y }: { x: number; y: number }) => {\n const isSameMouseModel = !!MouseModel.pane()?.eql(this.props.model)\n MouseModel.updateAttributes({\n position: { x, y },\n ...(isSameMouseModel ? {} : { pane: this.props.model }),\n })\n }\n\n setSelection = (selection: IndicatorElement | CanvasElement | null) => {\n if (selection instanceof CanvasElement) {\n selection?.setIsSelected(true)\n }\n\n this.props.model.updateAttribute('selection', selection)\n }\n\n setSelectedElement = (element: IndicatorElement | CanvasElement | null) => {\n const { selection } = this.props.model\n const isSelectionCanvas = selection instanceof CanvasElement\n if (element !== selection || (isSelectionCanvas && element && !selection?.isSelected)) {\n if (isSelectionCanvas) {\n selection?.setIsSelected(false)\n }\n if (isSelectionCanvas && selection?.isCreator) {\n this.setSelection(null)\n } else {\n this.setSelection(element)\n }\n }\n }\n\n getElement = (area: PaneArea) => {\n const chartEvents = this.props.model.getAllChartEvents(false)\n\n for (let i = chartEvents.length - 1; i >= 0; i--) {\n const el = chartEvents[i].instance\n if (el.getIsInChartView(this.props.chartModel) && el.isInArea(area)) {\n return el\n }\n }\n\n const elements = this.props.model.getAllElements()\n\n for (let i = elements.length - 1; i >= 0; i--) {\n const el = elements[i].instance\n if (el.getIsInChartView(this.props.chartModel) && el.isInArea(area)) {\n return el\n }\n }\n return null\n }\n\n getCanvasDOMNode = () =>\n // This is used in app/modals/publish/publish.jsx\n this.canvasRef.current\n}\n\nexport default withNotificationContext(withElementStyleDialogState(withPaneModel(Pane)))\n","import React from 'react'\n\nimport { useModelState } from '../../model-hooks/use-model-state'\nimport PaneModel from '../../models/pane'\n\nexport function withPaneModel(Component: React.ComponentType
) {\n return function WrappedComponent(props: P) {\n const model = useModelState(props.model, { watchProperties: ['selection'] })\n\n return \n }\n}\n","import classnames from 'classnames'\nimport React from 'react'\n\nimport { Spinner } from '../../components'\n\nexport function ChartSpinnerOverlay({ shouldDisplay, className }: { shouldDisplay: boolean; className: string }) {\n const [isVisible, setIsVisible] = React.useState(shouldDisplay)\n React.useEffect(() => {\n let timeout: number\n if (!shouldDisplay) {\n timeout = window.setTimeout(() => {\n setIsVisible(false)\n }, 400)\n }\n return () => {\n clearTimeout(timeout)\n }\n }, [shouldDisplay])\n\n return (\n <>\n {isVisible && (\n \n \n \n )}\n \n )\n}\n","import React from 'react'\n\nimport { ChartConfigObject } from '../../../types/shared'\nimport ChartModel from '../../models/chart'\nimport ChartLayout from '../../models/chart_layout'\nimport { DrawingTool } from '../toolbar/interfaces'\n\nexport const CHART_CLASS_NAMES = 'chart flex-1 relative'\nexport const DEFAULT_WRAPPER_COMPONENT = 'div'\n\nexport interface ChartProps {\n chartIndex: number\n gridArea?: string\n WrapperComp?: React.RefForwardingComponent\n config: ChartConfigObject\n chartModel: ChartModel\n layoutModel: ChartLayout\n setActiveChartInteraction: (interaction: string | null) => void\n activeChartInteraction: string | null\n activeTool: DrawingTool\n touchEventsDisabled: boolean\n hasOutline?: boolean\n shouldResize?: boolean\n renderChartToolbar?: () => React.ReactNode\n}\n","import classnames from 'classnames'\nimport React from 'react'\n\nimport { Instrument } from '../../../types/shared'\nimport { ChartEditorEnum, SpecificChartFunctionality } from '../../constants/common'\nimport math from '../../helpers/math'\nimport ChartModel from '../../models/chart'\nimport ChartLayout from '../../models/chart_layout'\nimport MouseModel from '../../models/mouse'\nimport PaneModel from '../../models/pane'\nimport Quote from '../../models/quote'\nimport { QuoteFetchType } from '../../models/quote/constants'\nimport utils, { isRedesignEnabled } from '../../utils'\nimport { getBarWidthWithMargin, getZoomFactorForBarsToDisplay } from '../../utils/chart'\nimport { ChartControls } from '../chart-controls'\nimport Pane from '../pane'\nimport {\n getBarIndex,\n getIsSmallIndexChart,\n getLeftOffset,\n getMinMaxLeftOffset,\n updateZoomAndLeftOffsetByDateRange,\n} from '../renderUtils'\nimport { ChartProps } from './constants'\nimport { withChartInit } from './with-chart-init'\nimport { withWatchedPanesOnChartModel } from './with-watched-panes-on-chart-model'\n\nfunction preventDefaultFunc(event: Event) {\n event.preventDefault()\n}\n\nfunction getZoomFactor({\n chartLayout,\n currentZoomFactor,\n diff,\n minBarWidthInPx = 1,\n maxBarWidthInPx = 66,\n}: {\n chartLayout: ChartLayout\n currentZoomFactor: number\n diff: number\n minBarWidthInPx?: number\n maxBarWidthInPx?: number\n}) {\n const minZoomFactor = getZoomFactorForBarsToDisplay({\n chartLayout,\n chartVisibleWidth: minBarWidthInPx,\n numOfVisibleBars: 1,\n })\n const maxZoomFactor = getZoomFactorForBarsToDisplay({\n chartLayout,\n chartVisibleWidth: maxBarWidthInPx,\n numOfVisibleBars: 1,\n })\n const isNegativeDirection = diff < 0\n const newZoomFactor = currentZoomFactor + diff\n const newZoomFactorInRange = Math.min(Math.max(minZoomFactor, newZoomFactor), maxZoomFactor)\n\n if (newZoomFactor > newZoomFactorInRange && currentZoomFactor > newZoomFactorInRange) {\n return isNegativeDirection ? newZoomFactor : currentZoomFactor\n }\n\n if (newZoomFactor < newZoomFactorInRange && currentZoomFactor < newZoomFactorInRange) {\n return !isNegativeDirection ? newZoomFactor : currentZoomFactor\n }\n\n return newZoomFactorInRange\n}\n\ninterface ChartState {\n panesWrapperElement: HTMLDivElement | null\n}\n\nclass Chart extends React.Component {\n lastWidth: number\n mouseWheelTimeout?: number\n setStateWithPanesTimeout?: number\n lastHeight = 0\n lastY: number | null = null\n lastX: number | null = null\n resizerPaneIndex = -1\n minimalPaneHeight = 0\n zoomerRightAlign: {\n barIndex?: number\n index: number\n offsetDiff: number\n } | null = null\n\n // expects model, config, layoutModel\n constructor(props: ChartProps) {\n super(props)\n\n this.lastWidth = props.chartModel.width\n this.props.layoutModel.bind('change', this.onLayoutModelChange)\n this.state = { panesWrapperElement: null }\n }\n\n componentDidMount() {\n const { chartModel } = this.props\n this.lastWidth = this.props.layoutModel.width\n\n chartModel.trigger('change', chartModel)\n chartModel.bind('createPane', this.onPaneCreate)\n\n this.calculateMinimalPaneHeight()\n this.handleQuoteChange(chartModel.quote()!)\n this.onModelChange()\n\n chartModel.bind('update', this.onModelChange)\n chartModel.bind('destroy', () => {\n Quote.unbind('olderData', this.onOlderDataLoaded)\n Quote.unbind(`${QuoteFetchType.Refetch} ${QuoteFetchType.NewerData}`, this.onDataLoaded)\n })\n\n Quote.bind('olderData', this.onOlderDataLoaded)\n Quote.bind(`${QuoteFetchType.Refetch} ${QuoteFetchType.NewerData}`, this.onDataLoaded)\n }\n\n componentDidUpdate(prevProps: Readonly, prevState: Readonly) {\n if (\n prevState.panesWrapperElement !== this.state.panesWrapperElement ||\n prevProps.layoutModel.isWheelZoomEnabled !== this.props.layoutModel.isWheelZoomEnabled\n ) {\n prevState.panesWrapperElement?.removeEventListener('wheel', preventDefaultFunc)\n\n if (this.props.layoutModel.isWheelZoomEnabled) {\n // can't use onWheel as it has passive: true\n this.state.panesWrapperElement?.addEventListener('wheel', preventDefaultFunc, { passive: false })\n }\n }\n }\n\n componentWillUnmount() {\n const { chartModel, layoutModel } = this.props\n if (this.setStateWithPanesTimeout) {\n clearTimeout(this.setStateWithPanesTimeout)\n }\n layoutModel.unbind('change', this.onLayoutModelChange)\n chartModel.unbind('update', this.onModelChange)\n\n this.state.panesWrapperElement?.removeEventListener('wheel', preventDefaultFunc)\n }\n\n handleSetPanesWrapperRef = (panesWrapperElement: HTMLDivElement | null) => {\n this.setState({ panesWrapperElement })\n }\n\n render() {\n const { activeTool, chartIndex, layoutModel, chartModel, renderChartToolbar } = this.props\n const panes =\n layoutModel.specificChartFunctionality === SpecificChartFunctionality.futuresPage\n ? chartModel.getAllValidPanes()\n : chartModel.getAllPanes()\n const showSettings = layoutModel.editors.includes(ChartEditorEnum.settings)\n\n return (\n <>\n this.onClick(undefined)}\n data-testid={`chart-${chartIndex}-settings`}\n onMouseEnter={this.resetMouseModel}\n >\n {showSettings && }\n \n {layoutModel.editable && showSettings && renderChartToolbar && (\n \n {renderChartToolbar()}\n \n )}\n \n {panes.map((pane, index) => (\n \n ))}\n \n \n )\n }\n\n onMouseWheel = (e: React.WheelEvent) => {\n const { chartModel, layoutModel } = this.props\n const isLoading = chartModel.panes().count() < 1\n if (!layoutModel.isWheelZoomEnabled || isLoading) {\n return\n }\n if (!this.zoomerRightAlign) {\n this.calcZoomerRightAlign()\n }\n clearTimeout(this.mouseWheelTimeout)\n this.mouseWheelTimeout = window.setTimeout(() => {\n this.zoomerRightAlign = null\n }, 250)\n this.onZoomerMouseMove(e, undefined, true)\n }\n\n onClick = (activePane: PaneModel | undefined) => {\n if (\n !this.props.layoutModel.activeChart.eql(this.props.chartModel) ||\n !(this.props.layoutModel.activePane?.eql(activePane) || this.props.layoutModel.activePane === activePane)\n ) {\n this.props.layoutModel.updateAttributes({ activeChart: this.props.chartModel, activePane })\n }\n }\n\n onPaneCreate = () => {\n const { chartModel } = this.props\n this.onModelChange()\n this.calculateMinimalPaneHeight()\n chartModel.trigger('change', chartModel)\n }\n\n onPaneDestroy = (paneId: string) => {\n const { chartModel } = this.props\n const pane = chartModel.panes().find(paneId)\n\n if (pane) {\n pane.destroyCascade()\n this.onModelChange()\n chartModel.trigger('change', chartModel)\n }\n }\n\n onModelChange = (chartModelParam?: ChartModel) => {\n const { chartModel, config } = this.props\n const panes = chartModel.getAllPanes()\n const quote = chartModel.quote()\n\n if (panes.length === 0 || !quote || chartModel.leftOffset === undefined) {\n return\n }\n\n const { width, height } = chartModel\n let panesHeight = panes.reduce((sum, pane) => sum + (pane.height ?? 0), 0)\n if (panesHeight !== height) {\n panesHeight = panes.reduce((sum, pane) => {\n const newPaneHeight = Math.round((pane.height / panesHeight) * height)\n if (!Number.isNaN(newPaneHeight)) {\n pane.updateAttribute('height', newPaneHeight)\n }\n return sum + newPaneHeight\n }, 0)\n const chartPane = chartModel.getChartPane()\n if (chartPane && panesHeight !== height) {\n const newChartPaneHeight = chartPane.height + height - panesHeight\n if (!Number.isNaN(newChartPaneHeight)) {\n chartPane.updateAttribute('height', newChartPaneHeight)\n }\n }\n }\n\n const newLeftOffset = getLeftOffset({\n quote,\n chartModel,\n config: config,\n })\n const newIsScrolled = chartModel.leftOffset !== newLeftOffset\n const isScrolled = chartModel.isScrolled\n if (!isScrolled && this.lastWidth !== width) {\n this.lastWidth = width\n chartModel.updateAttribute('leftOffset', newLeftOffset)\n } else if (isScrolled !== newIsScrolled) {\n chartModel.updateAttributes({ isScrolled: newIsScrolled })\n }\n\n if (this.lastHeight !== height) {\n this.lastHeight = height\n this.calculateMinimalPaneHeight()\n }\n\n if (chartModelParam) {\n this.handleQuoteChange(chartModelParam.quote())\n }\n }\n\n onLayoutModelChange = ({ activeChart, activePane }: { activeChart: ChartModel; activePane: PaneModel }) => {\n const { chartModel } = this.props\n if (!activeChart) {\n return\n }\n for (const pane of chartModel.getAllPanes()) {\n if (activePane?.id !== pane.id && pane.selection?.isSelected === true) {\n pane.selection.setIsSelected(false)\n pane.updateAttribute('selection', undefined)\n }\n }\n }\n\n onResizerMouseDown = (e: React.MouseEvent | MouseEvent, model: PaneModel) => {\n if (e.button !== 0) {\n return\n }\n this.lastY = e.clientY\n this.resizerPaneIndex = this.props.chartModel\n .panes()\n .all()\n .findIndex((pane) => pane.eql(model))\n document.addEventListener('mousemove', this.onResizerMouseMove)\n document.addEventListener('mouseup', this.onResizerMouseUp)\n }\n\n onResizerMouseMove = (e: MouseEvent) => {\n if (this.resizerPaneIndex > 0 && this.lastY !== null && this.resizePanesAccordingly(this.lastY! - e.clientY)) {\n this.lastY = e.clientY\n }\n }\n\n onResizerMouseUp = (e: MouseEvent) => {\n const { chartModel } = this.props\n if (this.resizerPaneIndex > 0 && this.lastY !== null) {\n this.resizePanesAccordingly(this.lastY - e.clientY)\n this.lastY = null\n\n chartModel.trigger('change', chartModel)\n }\n\n document.removeEventListener('mousemove', this.onResizerMouseMove)\n document.removeEventListener('mouseup', this.onResizerMouseUp)\n }\n\n calculateMinimalPaneHeight() {\n const { chartModel } = this.props\n const { minHeight, total } = chartModel\n .panes()\n .all()\n .reduce(\n ({ minHeight, total }, pane) => {\n if (minHeight > pane.height) {\n minHeight = pane.height\n }\n total += pane.getIsChartPane() ? 3 : 1\n return { minHeight, total }\n },\n { minHeight: chartModel.height, total: 0 }\n )\n const optiMinHeight = Math.floor(chartModel.height / total)\n this.minimalPaneHeight = Math.min(minHeight, optiMinHeight)\n }\n\n resizePanesAccordingly(difY: number) {\n const { chartModel } = this.props\n const panes = chartModel.panes().all()\n let basePane = this.resizerPaneIndex\n if (!difY) {\n return true\n } else if (difY > 0) {\n let i = basePane\n let pane = panes[i]\n if (pane.height + difY >= this.minimalPaneHeight) {\n pane.updateAttribute('height', pane.height + difY)\n } else {\n pane.updateAttribute('height', this.minimalPaneHeight)\n }\n for (--i; i >= 0; i--) {\n pane = panes[i]\n if (pane.height - difY >= this.minimalPaneHeight) {\n pane.updateAttribute('height', pane.height - difY)\n break\n } else {\n pane.updateAttribute('height', this.minimalPaneHeight)\n }\n }\n } else if (difY < 0) {\n basePane = Math.max(0, basePane - 1)\n let i = basePane\n let pane = panes[i]\n if (pane.height - difY >= this.minimalPaneHeight) {\n pane.updateAttribute('height', pane.height - difY)\n } else {\n pane.updateAttribute('height', this.minimalPaneHeight)\n }\n for (++i; i < panes.length; i++) {\n pane = panes[i]\n if (pane.height + difY >= this.minimalPaneHeight) {\n pane.updateAttribute('height', pane.height + difY)\n break\n } else {\n pane.updateAttribute('height', this.minimalPaneHeight)\n }\n }\n }\n\n const panesHeight = panes.reduce((sum, pane) => sum + pane.height, 0)\n if (panesHeight !== chartModel.height) {\n difY = chartModel.height - panesHeight\n\n const pane = panes[basePane]\n pane.updateAttribute('height', pane.height + difY)\n\n // if we exceeded total height we need to stop updating lastY - return false\n return false\n }\n\n return true\n }\n\n onZoomerTouchStart = (e: React.TouchEvent | TouchEvent) => {\n if (!this.props.layoutModel.scrollable || e.touches.length !== 1 || this.props.touchEventsDisabled) {\n return\n }\n this.onZoomerMouseDown(e.targetTouches[0])\n }\n\n onZoomerTouchMove = (e: TouchEvent) => {\n if (!this.props.layoutModel.scrollable || e.touches.length !== 1) {\n return\n }\n this.onZoomerMouseMove(e.targetTouches[0])\n }\n\n onZoomerTouchEnd = () => {\n if (!this.props.layoutModel.scrollable) {\n return\n }\n this.onZoomerMouseUp()\n }\n\n getRawDistance = (e: Pick) => {\n const p1 = { x: e.touches[0].clientX, y: e.touches[0].clientY }\n const p2 = { x: e.touches[1].clientX, y: e.touches[1].clientY }\n return math.distance(p1, p2)\n }\n\n onPinchStart = (e: React.TouchEvent) => {\n const { chartModel } = this.props\n const { activeChartInteraction, setActiveChartInteraction, touchEventsDisabled } = this.props\n const isLoading = chartModel.panes().count() < 1\n\n if (\n this.props.layoutModel.scrollable &&\n e.touches.length === 2 &&\n !activeChartInteraction &&\n !isLoading &&\n !touchEventsDisabled\n ) {\n setActiveChartInteraction('pinch')\n this.onZoomerMouseDown({ clientX: this.getRawDistance(e as unknown as TouchEvent) })\n\n document.addEventListener('touchmove', this.onPinchMove)\n document.addEventListener('touchend', this.onPinchEnd)\n }\n }\n\n onPinchMove = (e: TouchEvent) => {\n if (e.touches.length === 2) {\n this.onZoomerMouseMove({ clientX: this.getRawDistance(e) })\n }\n }\n\n onPinchEnd = (e: TouchEvent) => {\n if (e.touches.length === 1) {\n this.onZoomerMouseUp()\n document.removeEventListener('touchmove', this.onPinchMove)\n document.removeEventListener('touchend', this.onPinchEnd)\n }\n }\n\n calcZoomerRightAlign = () => {\n const { chartModel } = this.props\n const { ChartSettings } = chartModel.getChartLayoutSettings()\n const quote = chartModel.quote()\n const fx = chartModel.panes().first().scale.x\n const barWidth = getBarWidthWithMargin({ zoomFactor: chartModel.zoomFactor, chartLayout: this.props.layoutModel })\n const currentLeftOffset = getLeftOffset({ quote, chartModel, config: this.props.config, barWidth })\n this.zoomerRightAlign = null\n\n if (quote.isIntraday && quote.instrument === Instrument.Stock) {\n const barIndex = quote.getBarIndex(quote.close.length - 1)\n let offsetDiff =\n chartModel.leftOffset -\n getLeftOffset({\n quote,\n chartModel: chartModel,\n config: this.props.config,\n barWidth,\n barIndex,\n shouldAlignDaysToLeftApplied: false,\n })\n const offsetBars = ~~(offsetDiff / barWidth)\n offsetDiff -= offsetBars * barWidth\n this.zoomerRightAlign = {\n barIndex,\n index: barIndex - offsetBars,\n offsetDiff,\n }\n } else if (chartModel.leftOffset <= currentLeftOffset) {\n this.zoomerRightAlign = {\n index: quote.getBarIndex(quote.open.length - 1),\n offsetDiff: chartModel.leftOffset - currentLeftOffset,\n }\n } else {\n const offset = chartModel.leftOffset\n for (let i = 0; i < quote.open.length; i += 1) {\n const x = fx(i)\n if (x + offset < 0) {\n continue\n }\n if (x + offset > chartModel.width - ChartSettings.left.width - ChartSettings.right.width) {\n const barIndex = quote.getBarIndex(i - 1)\n let offsetDiff =\n offset -\n getLeftOffset({\n quote,\n chartModel,\n config: this.props.config,\n barWidth,\n barIndex,\n })\n const offsetBars = ~~(offsetDiff / barWidth)\n offsetDiff -= offsetBars * barWidth\n this.zoomerRightAlign = {\n barIndex,\n index: barIndex - offsetBars,\n offsetDiff,\n }\n break\n }\n }\n }\n }\n\n onZoomerMouseDown = (e: Partial) => {\n if ((e.button !== 0 && 'button' in e) || !this.props.layoutModel.scrollable) {\n return\n }\n switch (this.props.activeChartInteraction) {\n case 'pinch':\n break\n case null:\n this.props.setActiveChartInteraction('zoomer')\n break\n default:\n return\n }\n\n this.lastX = e.clientX ?? null\n this.calcZoomerRightAlign()\n\n document.addEventListener('mousemove', this.onZoomerMouseMove)\n document.addEventListener('mouseup', this.onZoomerMouseUp)\n document.addEventListener('touchmove', this.onZoomerTouchMove)\n document.addEventListener('touchend', this.onZoomerTouchEnd)\n }\n\n normalizeWheelDeltaY = (e: WheelEvent) => {\n // because wheel deltaY on mouse and touchpad is quite different we need to normalize it\n const abs = Math.abs(e.deltaY)\n if (abs === 0) return 0\n return Math.log(abs) * Math.sign(e.deltaY) * 10\n }\n\n onZoomerMouseMove = (\n e: React.WheelEvent | MouseEvent | Touch | { clientX: number },\n _?: unknown,\n isMouseWheel = false\n ) => {\n const { chartModel, layoutModel } = this.props\n let difX\n if (!layoutModel.scrollable) return\n if (!isMouseWheel && this.lastX !== null) {\n difX = (this.lastX - e.clientX) / chartModel.width\n this.lastX = e.clientX\n } else {\n // standard difX calculation result is around 0.00x, wheel deltaY is whole px\n // because of that we divide px with 1000\n difX = this.normalizeWheelDeltaY(e as WheelEvent) / 1000\n }\n\n this.addToZoomFactor({ diff: -difX })\n }\n\n addToZoomFactor = ({\n diff,\n shouldCalculateRightAlign = false,\n }: {\n diff: number\n shouldCalculateRightAlign?: boolean\n }) => {\n const { chartModel, layoutModel } = this.props\n if (shouldCalculateRightAlign) {\n this.calcZoomerRightAlign()\n }\n // 6 is default bar width with margin on charts page, so to get the similar feeling when zooming we're multiplying the zoom factor by the coefficient\n const diffCoefficient = chartModel.zoomFactor * (6 / getBarWidthWithMargin({ chartLayout: this.props.layoutModel }))\n const zoomFactor = getZoomFactor({\n chartLayout: layoutModel,\n currentZoomFactor: chartModel.zoomFactor,\n diff: diff * diffCoefficient,\n })\n const barWidth = getBarWidthWithMargin({\n zoomFactor,\n chartLayout: this.props.layoutModel,\n })\n\n let leftOffset\n if (this.props.config.stretch) {\n leftOffset = 0\n } else if (getIsSmallIndexChart(this.props.layoutModel.specificChartFunctionality)) {\n leftOffset = barWidth\n } else if (this.zoomerRightAlign) {\n leftOffset = getMinMaxLeftOffset({\n newLeftOffset:\n getLeftOffset({\n quote: chartModel.quote(),\n chartModel: chartModel,\n config: this.props.config,\n barWidth,\n barIndex: this.zoomerRightAlign.index,\n shouldAlignDaysToLeftApplied: false,\n }) + this.zoomerRightAlign.offsetDiff,\n chartModel: chartModel,\n barWidth,\n barIndex: getBarIndex(chartModel.quote()),\n })\n } else {\n return\n }\n chartModel.updateAttributes({\n zoomFactor,\n leftOffset,\n dateRange: null,\n })\n if (shouldCalculateRightAlign) {\n this.zoomerRightAlign = null\n }\n }\n\n onZoomerMouseUp = () => {\n this.zoomerRightAlign = null\n document.removeEventListener('mousemove', this.onZoomerMouseMove)\n document.removeEventListener('mouseup', this.onZoomerMouseUp)\n document.removeEventListener('touchmove', this.onZoomerTouchMove)\n document.removeEventListener('touchend', this.onZoomerTouchEnd)\n this.props.setActiveChartInteraction(null)\n }\n\n onZoomerReset = () => {\n const { chartModel, layoutModel } = this.props\n const zoomFactor = chartModel.chart_layout().defaultZoomFactor\n const barWidth = getBarWidthWithMargin({ zoomFactor, chartLayout: layoutModel })\n const leftOffset = getLeftOffset({\n quote: chartModel.quote(),\n chartModel,\n config: this.props.config,\n barWidth,\n })\n\n chartModel.updateAttributes({\n zoomFactor,\n leftOffset,\n dateRange: null,\n })\n }\n\n onOlderDataLoaded = () => {\n throw new Error('onOlderDataLoaded not implemented')\n // TODO implement similarly to onDataLoaded\n }\n\n resetMouseModel = () => {\n const isLoading = this.props.chartModel.panes().count() < 1\n if (!isLoading) {\n MouseModel.updateAttributes({\n position: null,\n pane: null,\n })\n }\n }\n\n handleQuoteChange = (quote: Quote) => {\n const { chartModel } = this.props\n\n // Update only date range chart\n if (chartModel.dateRange) {\n if (!quote.eql(chartModel.quote()) || chartModel.timeframe !== quote.timeframe || quote.date.length === 0) {\n return\n }\n updateZoomAndLeftOffsetByDateRange({ chartModel, quote })\n }\n }\n\n onDataLoaded = (newQuote: Quote, fetchType: QuoteFetchType) => {\n const { chartModel } = this.props\n const quote = chartModel.quote()\n if (!quote?.eql(newQuote)) {\n return\n }\n\n const shouldForceLeftOffsetUpdate = fetchType === QuoteFetchType.Refetch\n let newLeftOffset = chartModel.leftOffset // TODO find proper fix. If this line is removed (if we don't trigger leftOffset update), the chart stops being updated for the user until they move chart around.\n if (\n (this.props.layoutModel.scrollable === false && !this.props.layoutModel.isTouchCrossActive) ||\n !chartModel.isScrolled ||\n shouldForceLeftOffsetUpdate\n ) {\n newLeftOffset = getLeftOffset({\n quote,\n chartModel: chartModel,\n config: this.props.config,\n })\n }\n\n chartModel.setChartEvents(quote.chartEvents, !quote.events)\n\n if (newLeftOffset !== chartModel.leftOffset) {\n chartModel.getAllElements().forEach((element) => {\n if (element.isDrawing() && !element.isMouseDown()) {\n element.instance.updateScales()\n }\n })\n }\n\n chartModel.updateAttribute('leftOffset', newLeftOffset)\n\n this.handleQuoteChange(quote)\n }\n}\n\nexport default withChartInit(withWatchedPanesOnChartModel(Chart))\n","import classNames from 'classnames'\nimport merge from 'lodash.merge'\nimport React from 'react'\n\nimport { ObjectHash } from '../../../types/shared'\nimport { SpecificChartFunctionality } from '../../constants/common'\nimport { useModelState } from '../../model-hooks/use-model-state'\nimport Quote from '../../models/quote'\nimport { getChartsDimensions, isRedesignEnabled } from '../../utils'\nimport { prefetchPerfIndicatorAllQuotes } from '../../utils/chart'\nimport { getLeftOffset } from '../renderUtils'\nimport { ChartSpinnerOverlay } from './chart-spinner-overlay'\nimport { CHART_CLASS_NAMES, ChartProps, DEFAULT_WRAPPER_COMPONENT } from './constants'\n\nexport function withChartInit(Component: React.ComponentType) {\n return function WrappedComponent(props: ChartProps) {\n const { WrapperComp = DEFAULT_WRAPPER_COMPONENT, gridArea } = props\n const isModelDestroyedRef = React.useRef(false)\n const model = useModelState(props.chartModel, { watchProperties: ['panes', 'quote'] })\n const layoutModel = useModelState(props.layoutModel, { watchProperties: ['activeChart'] })\n const quote = model.quote()\n\n const initChartRef = React.useRef(async () => {\n const { chartModel, config } = props\n const { premarket, hasChartEvents, aftermarket, ticker, instrument, timeframe, panes: panesConfig } = config\n\n const options = {\n premarket,\n aftermarket,\n events: hasChartEvents,\n patterns: panesConfig.some(\n (pane) =>\n pane.elements?.some(\n (element) => element.overlays?.some((overlay: ObjectHash) => overlay.type === 'overlays/patterns')\n )\n ),\n }\n\n const quote = await Quote.get({\n ticker,\n instrument,\n timeframe,\n options,\n })\n const panesWithPerfIndicator = panesConfig.filter(({ elements }) =>\n elements.some(({ type }) => type === 'indicators/perf')\n )\n\n if (panesWithPerfIndicator) {\n await Promise.allSettled(\n panesWithPerfIndicator.map((paneWithPerfIndicator) =>\n prefetchPerfIndicatorAllQuotes({ paneWithPerfIndicator, timeframe, options })\n )\n )\n }\n\n if (isModelDestroyedRef.current) {\n return\n }\n\n config.panes.forEach((pane) => {\n const paneProperties = merge({}, pane)\n paneProperties.chart = chartModel\n chartModel.createPaneCascade(paneProperties)\n })\n\n chartModel.updateAttributes({\n quote,\n premarket: options.premarket,\n aftermarket: options.aftermarket,\n })\n\n chartModel.setChartEvents(quote.chartEvents, true)\n\n if (props.shouldResize) {\n const chartsDimensions = getChartsDimensions(props.layoutModel.getHTMLElementId())\n props.layoutModel.updateAttributes(chartsDimensions)\n }\n\n if (chartModel.leftOffset == null) {\n const leftOffset = getLeftOffset({ quote, chartModel: chartModel, config: props.config })\n chartModel.updateAttribute('leftOffset', leftOffset)\n }\n })\n\n React.useEffect(() => {\n const handleModelBeforeDestroy = () => {\n isModelDestroyedRef.current = true\n }\n\n model.bind('beforeDestroy', handleModelBeforeDestroy)\n initChartRef.current()\n return () => {\n model.unbind('beforeDestroy', handleModelBeforeDestroy)\n }\n // We want to run it only on mount\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n const isQuotePage = props.layoutModel.specificChartFunctionality === SpecificChartFunctionality.quotePage\n const isChartPage = props.layoutModel.specificChartFunctionality === SpecificChartFunctionality.chartPage\n const isFuturesForexCryptoPage = [\n SpecificChartFunctionality.futuresPage,\n SpecificChartFunctionality.forexPage,\n SpecificChartFunctionality.cryptoPage,\n ].includes(props.layoutModel.specificChartFunctionality)\n const isModelReady =\n quote && ((quote.fetchedAt === undefined && quote.close.length > 0) || quote.fetchedAt > 0 || quote)\n const loadingStyle =\n !isModelReady && isQuotePage\n ? // 2px is border\n { width: model.width ? model.width + 2 : '100%', height: model.height + 2 }\n : undefined\n\n return (\n \n {isChartPage && (\n \n )}\n {isModelReady && }\n \n )\n }\n}\n","import React from 'react'\n\nimport { useModelState } from '../../model-hooks/use-model-state'\nimport ChartModel from '../../models/chart'\n\nexport function withWatchedPanesOnChartModel(Component: React.ComponentType
) {\n return function WrappedComponent(props: P) {\n const model = useModelState(props.chartModel, { watchProperties: ['panes'] })\n\n return \n }\n}\n","const __WEBPACK_NAMESPACE_OBJECT__ = FLibs.ReactErrorBoundary;","import * as React from 'react'\nimport { FallbackProps } from 'react-error-boundary'\n\nimport { DefaultErrorBoundary } from '../../../components'\n\nexport function ModuleLoadFailed(props: Partial) {\n return (\n \n )\n}\n","export const portfolioWatchlistAsyncModule = {\n importFn: () => import(/* webpackChunkName: \"portfolio-watchlist\" */ './portfolio-watchlist'),\n cacheKey: 'portfolio-watchlist',\n}\n","import React from 'react'\n\nimport { portfolioWatchlistAsyncModule } from './portfolio-watchlist/async-modules'\nimport { withModuleAsyncLoad } from './with-module-async-load'\n\nexport enum SidebarModule {\n portfolio = 'portfolio',\n}\n\nexport type SidebarModuleType = {\n key: SidebarModule\n icon: string\n description: string\n content: React.ComponentType\n width?: {\n min?: number | string\n max?: number | string\n default?: { desktop?: number; mobile?: number }\n }\n}\n\nexport const sidebarModules: Record = Object.freeze({\n [SidebarModule.portfolio]: {\n key: SidebarModule.portfolio,\n icon: 'briefcase',\n description: 'Portfolio watchlist',\n content: withModuleAsyncLoad(portfolioWatchlistAsyncModule, true),\n width: { min: 200, default: { mobile: 275 } },\n },\n})\n","import React from 'react'\n\nimport { Delayed, Spinner } from '../../../components'\nimport { useAsyncModule } from '../../../utils/async-modules-utils'\nimport { ModuleLoadFailed } from './module-load-failed'\n\nexport function withModuleAsyncLoad<\n T extends { default: React.ComponentType<{ setIsComponentReady: React.Dispatch> }> },\n>(asyncModule: { importFn: () => Promise; cacheKey: string }, withInitialLoading = false) {\n return function InnerFunction() {\n const [isComponentReady, setIsComponentReady] = React.useState(false)\n const [sidebarModule, { isError }] = useAsyncModule({\n ...asyncModule,\n isSuspenseMode: true,\n })\n\n const SidebarModule = sidebarModule?.default\n\n if (isError) {\n return \n }\n\n return (\n <>\n {!isComponentReady && withInitialLoading && (\n \n \n \n
\n \n )}\n {!!SidebarModule && }\n \n )\n }\n}\n","import { Resizable } from 're-resizable'\nimport React from 'react'\n\nimport Utils from '../../utils'\nimport { DEFAULT_WIDTHS, SidebarDirection } from './constants'\nimport { useSidebarContext } from './hooks/sidebar-context'\n\ntype SidebarContentProps = {\n children: React.ReactNode\n}\n\nexport default function SidebarContent({ children }: SidebarContentProps) {\n const { direction, onResize, close, width } = useSidebarContext()\n const minWidth = width?.min ?? DEFAULT_WIDTHS.min\n const maxWidth = width?.max ?? DEFAULT_WIDTHS.max\n const defaultMobile = width?.default?.mobile ?? minWidth\n const defaultDesktop = width?.default?.desktop ?? maxWidth\n\n return (\n <>\n {direction === SidebarDirection.vertical && (\n \n {children}\n \n )}\n {direction === SidebarDirection.horizontal && (\n <>\n \n \n {children}\n
\n \n )}\n \n )\n}\n","import classnames from 'classnames'\nimport React from 'react'\n\nimport { Button, Icon, Paragraph, Tooltip, TooltipTrigger, useTooltipState } from '../../components'\nimport { SidebarDirection } from './constants'\nimport { useSidebarContext } from './hooks/sidebar-context'\nimport { sidebarModules } from './modules/modules'\n\nexport const MOBILE_TOOLBAR_DIV_ID = 'toolbar-mobile'\n\ntype SidebarTabsProps = {\n className?: string\n}\n\nexport default function SidebarTabs({ className }: SidebarTabsProps) {\n const { isOpen, direction, activeModule, selectModule } = useSidebarContext()\n const tooltipState = useTooltipState({ placement: 'left', unstable_timeout: 300 })\n\n return (\n \n {/* reserved space for drawing button on mobile devices */}\n {direction === SidebarDirection.horizontal && (\n \n )}\n\n {Object.entries(sidebarModules).map(([key, value]) => {\n const isActive = activeModule?.key === key\n return (\n \n \n {\n selectModule(isActive ? undefined : value.key)\n }}\n className={classnames({ 'ml-2': direction === SidebarDirection.horizontal })}\n data-testid={`sidebar-${key}-btn`}\n >\n \n \n \n \n {value.description}\n \n \n )\n })}\n \n )\n}\n","import * as React from 'react'\nimport { ErrorBoundary } from 'react-error-boundary'\nimport { useNavigate, useSearchParams } from 'react-router-dom'\n\nimport { Delayed, Spinner } from '../../components'\nimport { getIsMobilePortrait } from '../../utils'\nimport { localStorage } from '../../website-shared'\nimport { SidebarDirection } from './constants'\nimport { SidebarContext, SidebarContextType } from './hooks/sidebar-context'\nimport { ModuleLoadFailed } from './modules/module-load-failed'\nimport { SidebarModule, SidebarModuleType, sidebarModules } from './modules/modules'\nimport SidebarContent from './sidebar-content'\nimport SidebarTabs from './sidebar-tabs'\n\nexport const SIDEBAR_QUERY_PARAM = 'sidebar'\n\n// This is a temp function, to remove unused property from localstorage\nfunction removeSidebarFromLocalstorage() {\n const SIDEBAR_LOCAL_STORAGE_KEY = 'sidebarModule'\n localStorage.removeValue(SIDEBAR_LOCAL_STORAGE_KEY)\n}\nremoveSidebarFromLocalstorage()\n\ntype SidebarProps = {\n onShouldResize: () => void\n direction: SidebarDirection\n tabsClassName?: string\n}\n\n// Todo - this is not correct approach but this component can unmount/mount on mobile orientation change so we can't keep it inside the component\nlet isInit = false\n\nexport function Sidebar({ onShouldResize, direction, tabsClassName }: SidebarProps) {\n const navigate = useNavigate()\n const [urlSearchParams] = useSearchParams()\n const sidebarModuleKey = (urlSearchParams.get(SIDEBAR_QUERY_PARAM) as keyof typeof sidebarModules | null) || null\n const [activeModule, setActiveModule] = React.useState(null)\n\n const isOpen = !!activeModule\n const handleSelectModule = React.useCallback(\n (key?: SidebarModule) => {\n const newUrlSearchParams = new URLSearchParams(urlSearchParams)\n if (key) {\n newUrlSearchParams.set(SIDEBAR_QUERY_PARAM, key)\n } else {\n newUrlSearchParams.delete(SIDEBAR_QUERY_PARAM)\n }\n navigate({ search: newUrlSearchParams.toString() }, { replace: true })\n },\n [urlSearchParams, navigate]\n )\n\n const handleCloseSidebar = React.useCallback(() => {\n handleSelectModule(undefined)\n }, [handleSelectModule])\n\n // Resize charts every time the sidebar is opened/closed or active module is changed\n React.useEffect(() => {\n onShouldResize()\n }, [activeModule, onShouldResize])\n\n // Set active module based on sidebarModuleKey\n React.useEffect(() => {\n let sidebarModule = sidebarModuleKey && sidebarModules[sidebarModuleKey]\n\n if (!isInit && getIsMobilePortrait()) {\n sidebarModule = null\n handleCloseSidebar()\n }\n\n setActiveModule(sidebarModule)\n isInit = true\n }, [sidebarModuleKey, handleCloseSidebar])\n\n const contextValue: SidebarContextType = React.useMemo(\n () => ({\n direction,\n isOpen,\n isCloseVisible: direction === SidebarDirection.horizontal,\n width: activeModule?.width,\n activeModule,\n onResize: onShouldResize,\n close: handleCloseSidebar,\n selectModule: handleSelectModule,\n }),\n [direction, isOpen, onShouldResize, activeModule, handleCloseSidebar, handleSelectModule]\n )\n\n return (\n \n {activeModule && (\n \n \n \n \n \n
\n \n }\n >\n \n \n \n \n )}\n \n \n )\n}\n","export const drawingCreatorsAsyncModule = {\n importFn: () => import(/* webpackChunkName: \"drawing-creators\" */ './module-entry'),\n cacheKey: 'drawing-creators',\n}\n","import { DrawingActions, IToolbarDrawingAction, IToolbarDrawingActionItem } from './interfaces'\n\nexport const drawingActions: Record = {\n [DrawingActions.AddNote]: {\n id: DrawingActions.AddNote,\n title: 'Add note',\n icon: 'note',\n },\n [DrawingActions.DeleteDrawings]: {\n id: DrawingActions.DeleteDrawings,\n title: 'Remove all drawings',\n icon: 'drawingActionDelete',\n },\n [DrawingActions.DeleteAutoSavedDrawings]: {\n id: DrawingActions.DeleteAutoSavedDrawings,\n title: 'Remove all autosaved drawings',\n icon: 'drawingActionDelete',\n },\n}\n\nexport const getToolbarDrawingActions = ({\n isAutoSaveActive,\n isAddNoteAvailable = false,\n isIdea,\n}: {\n isAutoSaveActive: boolean\n isAddNoteAvailable?: boolean\n isIdea?: boolean\n}): Array => [\n ...(isAddNoteAvailable\n ? [\n {\n defaultItem: drawingActions[DrawingActions.AddNote],\n isDisabled: isIdea,\n disabledTooltip: 'Add note is not available in ideas',\n },\n ]\n : []),\n {\n defaultItem:\n drawingActions[isAutoSaveActive ? DrawingActions.DeleteAutoSavedDrawings : DrawingActions.DeleteDrawings],\n },\n]\n","import { DrawingSetting, IToolbarDrawingSetting, IToolbarDrawingsSettingItem } from './interfaces'\n\nconst drawingSettings: Record = {\n [DrawingSetting.PreserveDrawings]: {\n id: DrawingSetting.PreserveDrawings,\n icon: 'drawingSettingPreserveDrawings',\n iconActive: 'drawingSettingPreserveDrawingsActive',\n title: 'Preserve drawings: Off',\n titleActive: 'Preserve drawings: On',\n },\n [DrawingSetting.DrawingModeContinuous]: {\n id: DrawingSetting.DrawingModeContinuous,\n icon: 'drawingSettingDrawingMode',\n iconActive: 'drawingSettingDrawingModeActive',\n title: 'Drawing mode: Single',\n titleActive: 'Drawing mode: Continuous',\n },\n [DrawingSetting.HideDrawings]: {\n id: DrawingSetting.HideDrawings,\n icon: 'drawingSettingHide',\n iconActive: 'drawingSettingShow',\n title: 'Hide drawings',\n titleActive: 'Show drawings',\n },\n [DrawingSetting.LockDrawings]: {\n id: DrawingSetting.LockDrawings,\n icon: 'drawingSettingLock',\n iconActive: 'drawingSettingUnlock',\n title: 'Lock drawings',\n titleActive: 'Unlock drawings',\n },\n}\n\nconst preserveDrawingsAutosaveOverride = {\n id: DrawingSetting.PreserveDrawings, // DrawingSetting.PreserveDrawings so it works with current settings sync to DB\n icon: 'drawingSettingAutosaveOff',\n iconActive: 'drawingSettingAutosaveOn',\n iconAction: 'drawingSettingAutosaveSaving',\n title: 'Drawings autosave: Off',\n titleActive: 'Drawings Autosave: On',\n titleAction: 'Drawings Autosave: Saving',\n}\n\nexport const getToolbarDrawingSettings = ({\n isPreserveDrawingsAndAutosaveAvailable,\n isIdea,\n isAutoSaveInProgress,\n}: {\n isPreserveDrawingsAndAutosaveAvailable?: boolean\n isIdea?: boolean\n isAutoSaveInProgress?: boolean\n}): Array => {\n const toolbarSettings = [\n {\n defaultItem: drawingSettings[DrawingSetting.DrawingModeContinuous],\n },\n ...(isPreserveDrawingsAndAutosaveAvailable\n ? [\n {\n defaultItem: preserveDrawingsAutosaveOverride,\n isDisabled: isIdea,\n isInAction: isAutoSaveInProgress,\n disabledTooltip: 'Autosave is not available in ideas',\n },\n ]\n : []),\n {\n defaultItem: drawingSettings[DrawingSetting.HideDrawings],\n },\n {\n defaultItem: drawingSettings[DrawingSetting.LockDrawings],\n },\n ]\n\n return toolbarSettings\n}\n","import { DrawingTool, IToolbarDrawingTool, IToolbarDrawingToolItem } from './interfaces'\n\nexport const drawingTools: Record = {\n [DrawingTool.Mouse]: {\n id: DrawingTool.Mouse,\n title: 'Mouse',\n icon: 'toolMouse',\n },\n [DrawingTool.Measure]: {\n id: DrawingTool.Measure,\n title: 'Measure',\n icon: 'toolMeasure',\n },\n [DrawingTool.ScaledLine]: {\n id: DrawingTool.ScaledLine,\n title: 'Line',\n icon: 'toolLine',\n },\n [DrawingTool.Arrow]: {\n id: DrawingTool.Arrow,\n title: 'Arrow',\n icon: 'toolArrow',\n },\n [DrawingTool.VerticalLine]: {\n id: DrawingTool.VerticalLine,\n title: 'Vertical line',\n icon: 'toolMidLineV',\n },\n [DrawingTool.HorizontalLine]: {\n id: DrawingTool.HorizontalLine,\n title: 'Horizontal line',\n icon: 'toolMidLineH',\n },\n [DrawingTool.Rectangle]: {\n id: DrawingTool.Rectangle,\n title: 'Rectangle',\n icon: 'toolRect',\n },\n [DrawingTool.RotatedRectangle]: {\n id: DrawingTool.RotatedRectangle,\n title: 'Rotated rectangle',\n icon: 'toolRectRotated',\n },\n [DrawingTool.Triangle]: {\n id: DrawingTool.Triangle,\n title: 'Triangle',\n icon: 'toolTriangle',\n },\n [DrawingTool.Ellipse]: {\n id: DrawingTool.Ellipse,\n title: 'Ellipse',\n icon: 'toolEllipse',\n },\n [DrawingTool.Curve]: {\n id: DrawingTool.Curve,\n title: 'Curve',\n icon: 'toolCurve',\n },\n [DrawingTool.Pitchfork]: {\n id: DrawingTool.Pitchfork,\n title: 'Pitchfork',\n icon: 'toolPitchfork',\n },\n [DrawingTool.Polygon]: {\n id: DrawingTool.Polygon,\n title: 'Polygon',\n icon: 'toolPolygon',\n },\n [DrawingTool.Xabcd]: {\n id: DrawingTool.Xabcd,\n title: 'XABCD',\n icon: 'toolXABCD',\n },\n [DrawingTool.ScaledText]: {\n id: DrawingTool.ScaledText,\n title: 'Text',\n icon: 'toolText',\n },\n [DrawingTool.Brush]: {\n id: DrawingTool.Brush,\n title: 'Brush',\n icon: 'toolBrush',\n },\n [DrawingTool.ElliottWaves]: {\n id: DrawingTool.ElliottWaves,\n title: 'Elliott waves',\n icon: 'toolElliottWave',\n },\n [DrawingTool.FibonacciRetracements]: {\n id: DrawingTool.FibonacciRetracements,\n title: 'Fibonacci retracements',\n icon: 'toolFibonacci',\n },\n [DrawingTool.Position]: {\n id: DrawingTool.Position,\n title: 'Position',\n icon: 'toolPosition',\n },\n [DrawingTool.Callout]: {\n id: DrawingTool.Callout,\n title: 'Callout',\n icon: 'toolCallout',\n },\n}\n\nexport const toolbarDrawingTools: Array = [\n {\n defaultItem: drawingTools[DrawingTool.Mouse],\n },\n {\n defaultItem: drawingTools[DrawingTool.Measure],\n },\n {\n defaultItem: drawingTools[DrawingTool.ScaledLine],\n toolGroup: [\n drawingTools[DrawingTool.ScaledLine],\n drawingTools[DrawingTool.VerticalLine],\n drawingTools[DrawingTool.HorizontalLine],\n drawingTools[DrawingTool.Curve],\n ],\n toolGroupTitle: 'Line tools',\n },\n {\n defaultItem: drawingTools[DrawingTool.Arrow],\n },\n {\n defaultItem: drawingTools[DrawingTool.Rectangle],\n },\n {\n defaultItem: drawingTools[DrawingTool.RotatedRectangle],\n },\n {\n defaultItem: drawingTools[DrawingTool.Triangle],\n },\n {\n defaultItem: drawingTools[DrawingTool.Ellipse],\n },\n {\n defaultItem: drawingTools[DrawingTool.Polygon],\n },\n {\n defaultItem: drawingTools[DrawingTool.Xabcd],\n toolGroup: [drawingTools[DrawingTool.Xabcd], drawingTools[DrawingTool.Pitchfork]],\n toolGroupTitle: 'XABCD tools',\n },\n {\n defaultItem: drawingTools[DrawingTool.ScaledText],\n toolGroup: [drawingTools[DrawingTool.ScaledText], drawingTools[DrawingTool.Callout]],\n toolGroupTitle: 'Text tools',\n },\n {\n defaultItem: drawingTools[DrawingTool.Brush],\n },\n {\n defaultItem: drawingTools[DrawingTool.ElliottWaves],\n },\n {\n defaultItem: drawingTools[DrawingTool.FibonacciRetracements],\n },\n {\n defaultItem: drawingTools[DrawingTool.Position],\n },\n]\n","import classnames from 'classnames'\nimport React from 'react'\n\nimport { PaneArea } from '../../../types/shared'\nimport { Toolbar as ToolbarComponent, ToolbarDivider, ToolbarItem } from '../../components'\nimport { SpecificChartFunctionality } from '../../constants/common'\nimport { drawingCreatorsAsyncModule } from '../../creators/async-modules'\nimport { ElementStyleDialogContext } from '../../modals/element_style'\nimport { useModelState } from '../../model-hooks/use-model-state'\nimport { AutoSaveState } from '../../models/constants'\nimport PaneModel from '../../models/pane'\nimport { useAsyncModule } from '../../utils/async-modules-utils'\nimport { getIsPreserveDrawingsAndAutosaveAvailable } from '../../utils/chart'\nimport { getToolbarDrawingActions } from './drawingActions'\nimport { getToolbarDrawingSettings } from './drawingSettings'\nimport { drawingTools, toolbarDrawingTools } from './drawingTools'\nimport { DrawingSetting, DrawingTool, IToolBarProps } from './interfaces'\n\nexport const DISABLED_ITEM_TOOLTIP_LABEL = \"Disabled due 'lock/hide' drawings active\"\n\nexport default function Toolbar({\n isSidebar,\n isHorizontal,\n isMobileOverlay,\n activeTool,\n chartLayoutModel,\n onActiveToolChange,\n onDrawingActionClick,\n onDrawingSettingClick,\n onDrawingEnd,\n drawingSettings,\n isAlternativeTheme,\n areToolsDisabled,\n}: IToolBarProps) {\n const [drawingCreatorsModule, { isLoading: isDrawingCreatorsModuleLoading }] = useAsyncModule({\n ...drawingCreatorsAsyncModule,\n shouldLoadModule: true,\n })\n const { autoSaveState } = useModelState(\n React.useMemo(() => chartLayoutModel.drawingsInternalStore(), [chartLayoutModel]),\n { watchProperties: ['autoSaveState'] }\n )\n const [isDrawing, setIsDrawing] = React.useState(false)\n const openElementStyleDialog = React.useContext(ElementStyleDialogContext)\n\n const availableDrawingSettings = getToolbarDrawingSettings({\n isPreserveDrawingsAndAutosaveAvailable: getIsPreserveDrawingsAndAutosaveAvailable(chartLayoutModel),\n isAutoSaveInProgress: autoSaveState === AutoSaveState.Saving,\n isIdea: !!chartLayoutModel.idea?.id,\n })\n\n const availableDrawingActions = getToolbarDrawingActions({\n isAutoSaveActive: autoSaveState !== AutoSaveState.Off,\n isAddNoteAvailable: chartLayoutModel.specificChartFunctionality === SpecificChartFunctionality.chartPage,\n isIdea: !!chartLayoutModel.idea?.id,\n })\n\n React.useEffect(() => {\n if (!drawingCreatorsModule) {\n return\n }\n\n const onMouseDown = (model: PaneModel, area: PaneArea & { isTouch: boolean }) => {\n const isDrawingModeContinuous = drawingSettings[DrawingSetting.DrawingModeContinuous]\n const hasData = model.chart().quote().close.length > 0\n const hasHiddenDrawings = drawingSettings[DrawingSetting.HideDrawings]\n const tool = drawingTools[activeTool].id\n\n if (tool === DrawingTool.Mouse || isDrawing || hasHiddenDrawings || !hasData) {\n return\n }\n\n setIsDrawing(true)\n const { drawingToolsTouchCreatorsByType, drawingToolsCreatorsByType } = drawingCreatorsModule\n const ToolClass = area.isTouch ? drawingToolsTouchCreatorsByType[tool] : drawingToolsCreatorsByType[tool]\n const element = model.elements().create({\n instance: new ToolClass(area, {}, model, openElementStyleDialog, () => {\n if (!isDrawingModeContinuous) {\n onActiveToolChange(DrawingTool.Mouse)\n }\n setIsDrawing(false)\n onDrawingEnd?.()\n }),\n })\n element.one('destroy', ({ instance }) => {\n if (instance.getIsCreator()) {\n setIsDrawing(false)\n onDrawingEnd?.()\n }\n })\n\n element.trigger('select', element)\n }\n PaneModel.bind('mousedown', onMouseDown)\n return () => {\n PaneModel.unbind('mousedown', onMouseDown)\n }\n }, [\n activeTool,\n onActiveToolChange,\n openElementStyleDialog,\n onDrawingEnd,\n drawingCreatorsModule,\n drawingSettings,\n isDrawing,\n ])\n\n return (\n \n {toolbarDrawingTools.map((item) => {\n const isActive = activeTool === item.defaultItem.id || item.toolGroup?.some((tool) => tool.id === activeTool)\n const isToolLoading = isDrawingCreatorsModuleLoading && isActive\n\n return (\n \n )\n })}\n \n {availableDrawingSettings.map((item) => (\n \n ))}\n {availableDrawingActions.map((item) => (\n \n ))}\n \n )\n}\n","import Toolbar from './toolbar'\n\nexport default Toolbar\n","import React from 'react'\n\nimport { ObjectHash } from '../../../../types/shared'\nimport { Textarea } from '../../../components'\nimport { useModelState } from '../../../model-hooks/use-model-state'\nimport Chart from '../../../models/chart'\nimport ChartLayout from '../../../models/chart_layout'\nimport { useDrawingAutoSaveControls } from '../../autosave/use-drawing-auto-save-controls'\nimport { getElementNoteText, getTickersAndContainerTypesInLayoutModel } from '../../autosave/utils'\n\ninterface ChartAutoSaveNoteProps {\n ticker: string\n note: string\n onNoteChange: (note: string, ticker: string) => void\n}\n\nfunction ChartAutoSaveNote({ ticker, note, onNoteChange }: ChartAutoSaveNoteProps) {\n return (\n ) => {\n onNoteChange(e.target.value, ticker)\n }}\n />\n )\n}\n\ninterface Props {\n chartLayoutModel: ChartLayout\n}\n\nexport function ChartAutoSaveNotes({ chartLayoutModel }: Props) {\n const { handleAutoSaveNoteChange } = useDrawingAutoSaveControls(chartLayoutModel)\n const [tickers, setTickers] = React.useState([])\n const unwatchedInternalStore = React.useMemo(() => chartLayoutModel.drawingsInternalStore(), [chartLayoutModel])\n const drawingsInternalStore = useModelState(unwatchedInternalStore, { watchProperties: ['elements'] })\n\n React.useEffect(() => {\n // There was no better way how to listen on ticker changes which is necessary for displaying correct text areas\n const handleChartChange = () => {\n const { tickers } = getTickersAndContainerTypesInLayoutModel(chartLayoutModel)\n setTickers(tickers)\n }\n\n Chart.bind('change', handleChartChange)\n handleChartChange()\n return () => {\n Chart.unbind('change', handleChartChange)\n }\n }, [chartLayoutModel])\n\n const tickerNoteMap = React.useMemo(() => {\n const map: ObjectHash = {}\n drawingsInternalStore.elements.forEach((element) => {\n if (element.containerType === 'note' && tickers.includes(element.ticker)) {\n map[element.ticker] = getElementNoteText(element)\n }\n })\n\n return map\n }, [drawingsInternalStore.elements, tickers])\n\n return (\n \n {tickers.map((ticker) => (\n \n ))}\n
\n )\n}\n","import React from 'react'\n\nimport { Dialog, DialogBody, DialogHeader } from '../../../components'\nimport ChartLayout from '../../../models/chart_layout'\nimport { ChartAutoSaveNotes } from './auto-save-notes'\n\ninterface INoteDialog {\n dialogState: any\n chartLayoutModel: ChartLayout\n}\n\nexport function AutoSaveNotesDialog({ dialogState, chartLayoutModel }: INoteDialog) {\n return (\n \n )\n}\n","import React from 'react'\n\nimport { Button, ConfirmationDialog as ConfirmationDialogComponent } from '../../components'\n\nconst getDialogContent = ({\n isAutosaveDialogContent,\n tickers,\n}: {\n isAutosaveDialogContent: boolean\n tickers: string[]\n}) => {\n if (isAutosaveDialogContent) {\n return {\n title: 'Remove all autosaved drawings?',\n message: (\n <>\n Do you really want to remove all autosaved drawings? This action is irreversible and will remove all\n non-idea drawings for {tickers.join(', ')}.\n \n ),\n }\n }\n return {\n title: 'Remove all drawings?',\n message: `Do you really want to remove all drawings? This action only affects the current page and visible tickers. This action doesn't remove autosaved drawings or ideas.`,\n }\n}\n\nexport interface IConfirmationDialog {\n state: any\n onCancel: () => void\n onAction: () => void\n isAutosaveDialogContent: boolean\n tickers: string[]\n}\n\nexport function ConfirmationDialog({\n onCancel,\n onAction,\n state,\n isAutosaveDialogContent = false,\n tickers,\n}: IConfirmationDialog) {\n const dialogContent = getDialogContent({ isAutosaveDialogContent, tickers })\n\n return (\n \n \n \n \n }\n >\n {dialogContent.message}\n \n )\n}\n","import React from 'react'\n\nimport { Button, Icon } from '../../../components'\nimport { drawingTools } from '../drawingTools'\nimport { DrawingTool } from '../interfaces'\n\ntype ToolButtonProps = {\n onClick: () => void\n activeTool: DrawingTool\n}\n\nexport default function ToolButton({ activeTool, onClick }: ToolButtonProps) {\n return (\n \n )\n}\n","import classNames from 'classnames'\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { useSearchParams } from 'react-router-dom'\n\nimport { Button } from '../../../components'\nimport { SIDEBAR_QUERY_PARAM } from '../../sidebar/sidebar'\nimport { MOBILE_TOOLBAR_DIV_ID } from '../../sidebar/sidebar-tabs'\nimport { DrawingActions, DrawingTool, IToolBarProps } from '../interfaces'\nimport Toolbar from '../toolbar'\nimport ToolButton from './tool-button'\n\ntype ToolbarMobileProps = Omit\n\nexport default function ToolbarMobile({\n activeTool,\n onActiveToolChange,\n onDrawingActionClick,\n ...rest\n}: ToolbarMobileProps) {\n const [isToolbarVisible, setIsToolbarVisible] = React.useState(false)\n const [urlSearchParams, setUrlSearchParams] = useSearchParams()\n const [toolbarMobileElement, setToolbarMobileElement] = React.useState(null)\n\n // get toolbar mobile element on first render\n React.useEffect(() => {\n setToolbarMobileElement(document.getElementById(MOBILE_TOOLBAR_DIV_ID))\n }, [])\n\n const handleActiveToolChange = React.useCallback(\n (drawingTool: DrawingTool, trigger?: 'button' | 'select' | 'group') => {\n onActiveToolChange(drawingTool, trigger)\n\n if (trigger !== 'group') return setIsToolbarVisible(false)\n },\n [onActiveToolChange]\n )\n\n // Hide toolbar on click outside\n const wrapperRef = React.useRef(null)\n React.useEffect(() => {\n if (!isToolbarVisible) return\n\n function handleClickOutside(event: TouchEvent | MouseEvent) {\n // Get the currently open select\n const openSelect = document.querySelector('.finviz-popover[data-enter]')\n if (wrapperRef.current?.contains(event.target as Node) || openSelect?.contains(event.target as Node)) return\n setIsToolbarVisible(false)\n }\n\n document.addEventListener('mousedown', handleClickOutside)\n document.addEventListener('touchstart', handleClickOutside)\n\n return () => {\n document.removeEventListener('mousedown', handleClickOutside)\n document.removeEventListener('touchstart', handleClickOutside)\n }\n }, [isToolbarVisible])\n\n const handleDrawingActionClick = (actionId: DrawingActions) => {\n onDrawingActionClick?.(actionId)\n setIsToolbarVisible(false)\n }\n\n if (!toolbarMobileElement) return null\n\n return ReactDOM.createPortal(\n <>\n \n \n \n {urlSearchParams.has(SIDEBAR_QUERY_PARAM) || activeTool === DrawingTool.Mouse ? (\n {\n setIsToolbarVisible(true)\n setUrlSearchParams((params) => {\n params.delete(SIDEBAR_QUERY_PARAM)\n return params\n })\n }}\n >\n Draw\n \n ) : (\n {\n setIsToolbarVisible(true)\n }}\n />\n )}\n ,\n toolbarMobileElement\n )\n}\n","import React from 'react'\n\nimport { useModelState } from '../../model-hooks/use-model-state'\nimport ChartLayout from '../../models/chart_layout'\nimport { AutoSaveState } from '../../models/constants'\n\ninterface LoadLatestDataButtonProps {\n chartLayoutModel: ChartLayout\n}\n\nexport function AutoSaveStateIndicator({ chartLayoutModel }: LoadLatestDataButtonProps) {\n const drawingsInternalStoreUnwatched = React.useMemo(\n () => chartLayoutModel.drawingsInternalStore(),\n [chartLayoutModel]\n )\n const { autoSaveState } = useModelState(drawingsInternalStoreUnwatched, { watchProperties: ['autoSaveState'] })!\n const [isVisible, setIsVisible] = React.useState(false)\n\n React.useEffect(() => {\n if (autoSaveState === AutoSaveState.Off) {\n return\n }\n\n let setVisibilityTimeout: NodeJS.Timeout | null = null\n const newIsVisible = autoSaveState !== AutoSaveState.Saved\n\n setVisibilityTimeout = setTimeout(\n () => {\n setIsVisible(newIsVisible)\n },\n newIsVisible ? 0 : 3000\n )\n\n const checkIfNeededPreventLeaving = (event: BeforeUnloadEvent) => {\n if (autoSaveState === AutoSaveState.Saved) {\n return undefined\n }\n\n const message = `Your latest changes haven't been saved yet. If you leave now, your changes might be lost.`\n event.returnValue = message\n return message\n }\n\n window.addEventListener('beforeunload', checkIfNeededPreventLeaving)\n\n return () => {\n window.removeEventListener('beforeunload', checkIfNeededPreventLeaving)\n if (setVisibilityTimeout) {\n clearTimeout(setVisibilityTimeout)\n }\n }\n }, [autoSaveState])\n\n if (!isVisible) {\n return null\n }\n\n // @todo - add proper indicator component here\n return null\n}\n","import React from 'react'\n\nimport { Textarea } from '../../components'\nimport { useModelState } from '../../model-hooks/use-model-state'\nimport ChartLayout from '../../models/chart_layout'\nimport { isRedesignEnabled } from '../../utils'\nimport { useDrawingAutoSaveControls } from '../autosave/use-drawing-auto-save-controls'\n\ninterface Props {\n chartLayoutModel: ChartLayout\n ideaNoteRef?: React.RefObject\n}\n\nconst hasRedesign = isRedesignEnabled()\n\nexport function ChartLayoutAutoSaveNote({ chartLayoutModel: chartLayoutModelUnwatched, ideaNoteRef }: Props) {\n const chartLayoutModel = useModelState(chartLayoutModelUnwatched, {\n watchProperties: ['idea'],\n })!\n const { handleIdeaNoteChange } = useDrawingAutoSaveControls(chartLayoutModel)\n\n if (!chartLayoutModel.editable) {\n return null\n }\n\n return (\n \n {!hasRedesign &&
Note:
}\n
\n ) => {\n handleIdeaNoteChange(e.target.value)\n }}\n />\n
\n
\n
What would you like to do with the drawings from your current Idea?\n
\n Replace Drawings\n
\n Your Autosaved Drawings for this ticker will be deleted, and the Idea Drawings will be copied to the live\n chart.\n \n
\n Combine Drawings\n
\n The Idea Drawings will be copied to the live chart without changing the positions or settings of any\n Autosaved Drawings. This may cause duplicates if some drawings were also autosaved.\n \n
\n Do Nothing\n
\n Close the idea without changing any Autosaved Drawings.\n \n
(\n Component: React.ComponentType
\n) {\n return function WrappedComponent(props: P) {\n const { dialog, handleIdeaLeave } = useChartRouteChange(props.chartLayoutModel)\n return (\n <>\n \n \n \n )\n }\n}\n\nexport function withChartRouteChange
(\n Component: React.ComponentType
\n) {\n // Chart layout is used in ReactRouter context and also outside of RR context\n // if we use RR hooks outside the context it will crash so this function will return different component for quote & chart pages than for other usecases\n const ChartLayoutComponent = getChartLayoutWithChartRouteChange(Component)\n return function WrappedComponent(props: P) {\n const { ty } = decodeQueryString()\n const isChartPage = props.chartLayoutModel.specificChartFunctionality === SpecificChartFunctionality.chartPage\n const isQuotePage = props.chartLayoutModel.specificChartFunctionality === SpecificChartFunctionality.quotePage\n const isFuturesForexCryptoPage = [\n SpecificChartFunctionality.futuresPage,\n SpecificChartFunctionality.forexPage,\n SpecificChartFunctionality.cryptoPage,\n ].includes(props.chartLayoutModel.specificChartFunctionality)\n if (isChartPage || (isQuotePage && ty !== 'p') || isFuturesForexCryptoPage) {\n return \n }\n\n return \n }\n}\n","import merge from 'lodash.merge'\nimport React from 'react'\n\nimport { RootChartConfigObject, Theme } from '../../../types/shared'\nimport {\n ChartEditorEnum,\n MOBILE_BARS_TO_VIEW,\n MOBILE_VIEW_BREAKPOINT_WIDTH,\n SpecificChartFunctionality,\n} from '../../constants/common'\nimport ChartLayoutModel from '../../models/chart_layout'\nimport DrawingsInternalStore from '../../models/drawings-internal-store'\nimport { getSettings } from '../../models/settings'\nimport utils, { isRedesignedPage } from '../../utils'\nimport { getIsPreserveDrawingsAndAutosaveAvailable, getZoomFactorForBarsToDisplay } from '../../utils/chart'\nimport { getContainerTypeFromPaneConfig, getInitialStoreDrawings } from '../autosave/utils'\nimport { DrawingSetting } from '../toolbar/interfaces'\nimport { CHART_LAYOUT_CHILD_CHANGE_EVENT } from './constants'\n\ninterface Props {\n config: RootChartConfigObject\n onRegisterChartLayoutModel?: (chartLayoutModel: ChartLayoutModel) => void\n parentElement?: HTMLElement\n}\n\nfunction getDefaultZoomFactor(chartLayout: ChartLayoutModel) {\n const innerWidth = window.innerWidth\n if (\n innerWidth >= MOBILE_VIEW_BREAKPOINT_WIDTH ||\n chartLayout.specificChartFunctionality !== SpecificChartFunctionality.chartPage\n ) {\n return 1\n }\n\n return getZoomFactorForBarsToDisplay({\n chartLayout,\n numOfVisibleBars: MOBILE_BARS_TO_VIEW,\n chartVisibleWidth: innerWidth,\n })\n}\n\nfunction OnInitListener({\n chartLayoutModel,\n config,\n onRegisterChartLayoutModel,\n parentElement,\n}: Props & { chartLayoutModel: ChartLayoutModel; parentElement?: HTMLElement }) {\n const [isInit, setIsInit] = React.useState(false)\n\n /*\n * This entire effect is used to check for updates in entire chart layout obj tree.\n * Once config object matches object generated from chart layout, the layout model is completely initialised.\n *\n * We couldn't just add a callback to `componentDidMount` (or equivalent) because its children are rendered asynchronously.\n *\n * */\n React.useEffect(() => {\n if (onRegisterChartLayoutModel && chartLayoutModel && !isInit) {\n const checkIfInitIsComplete = () => {\n const { charts } = chartLayoutModel.toConfig()\n const isReady =\n charts.length === config.charts.length &&\n charts.every(\n (chart, chartIndex) =>\n chart.panes.length === config.charts[chartIndex].panes.length &&\n chart.panes.every(\n (pane, paneIndex) =>\n pane.elements.length === config.charts[chartIndex].panes[paneIndex].elements.length &&\n pane.elements.every(\n (element, elementIndex) =>\n element.overlays?.length ===\n config.charts[chartIndex].panes[paneIndex].elements[elementIndex].overlays?.length\n )\n )\n )\n\n if (isReady) {\n setIsInit(true)\n chartLayoutModel.updateAttributes({ isInit: true })\n onRegisterChartLayoutModel(chartLayoutModel)\n if (parentElement) {\n parentElement.style.opacity = 'unset'\n parentElement.style.minHeight = 'unset'\n }\n }\n }\n\n chartLayoutModel.bind(CHART_LAYOUT_CHILD_CHANGE_EVENT, checkIfInitIsComplete)\n\n checkIfInitIsComplete()\n\n return () => {\n chartLayoutModel.unbind(CHART_LAYOUT_CHILD_CHANGE_EVENT, checkIfInitIsComplete)\n }\n }\n }, [chartLayoutModel, config, isInit, onRegisterChartLayoutModel, parentElement])\n\n return null\n}\n\nexport const withCompleteLayoutModelInit = (Component: any) => (props: Props) => {\n const config = React.useMemo(() => {\n const newConfig = merge({}, props.config, {\n editable: props.config.editable ?? true,\n canChangeTicker: props.config.canChangeTicker ?? true,\n scrollable: props.config.scrollable ?? true,\n cross: props.config.cross ?? true,\n theme:\n props.config.theme && [Theme.light, Theme.dark].includes(props.config.theme) ? props.config.theme : Theme.light,\n editors: props.config.editors ?? [ChartEditorEnum.publish, ChartEditorEnum.tools, ChartEditorEnum.ideas],\n ideas: props.config.ideas ?? true,\n specificChartFunctionality: props.config.specificChartFunctionality ?? SpecificChartFunctionality.default,\n initialStoreDrawings: [],\n })\n\n if (!newConfig.ideas) {\n newConfig.editors = newConfig.editors.filter((x) => x !== 'ideas')\n }\n\n // We need to add these because ideas might not have them and chart controls wouldn’t render properly\n if (isRedesignedPage(newConfig, [SpecificChartFunctionality.quotePage])) {\n newConfig.editors = newConfig.editors.concat([ChartEditorEnum.settings, ChartEditorEnum.timeframe])\n }\n\n const initialStoreDrawings = getInitialStoreDrawings()?.filter(({ changeType }) => changeType !== 'destroy') ?? []\n const isQuotePage = newConfig.specificChartFunctionality === SpecificChartFunctionality.quotePage\n const isQuotePageWithDrawingsOff = isQuotePage && utils.getCookie('charts-draw') !== 'on'\n\n if (initialStoreDrawings.length === 0 || isQuotePageWithDrawingsOff) {\n return newConfig\n }\n\n const noteDrawing = initialStoreDrawings.find(\n ({ containerType, ticker }) =>\n containerType === 'note' && props.config.charts.some((chart) => chart.ticker === ticker)\n )\n\n const note = noteDrawing && JSON.parse(noteDrawing.elementAttrs)?.text\n const ideaObject = isQuotePage && note ? { note } : undefined\n\n return {\n ...newConfig,\n initialStoreDrawings,\n idea: newConfig.idea ?? ideaObject,\n charts: newConfig.charts.map((chart) => {\n const { ticker, panes } = chart\n return {\n ...chart,\n panes: panes.map((pane) => {\n const containerType = getContainerTypeFromPaneConfig(pane)\n const newElements = initialStoreDrawings\n .filter(\n (drawing) =>\n drawing.containerType === containerType &&\n drawing.ticker === ticker &&\n !pane.elements.some((paneElement) => paneElement.elementId === drawing.elementId)\n )\n .map(({ elementId, zIndex, elementAttrs }) => ({\n elementId,\n zIndex,\n ...JSON.parse(elementAttrs),\n }))\n return {\n ...pane,\n elements: [...pane.elements, ...newElements],\n }\n }),\n }\n }),\n }\n // We need to disable the eslint check because the hook is supposed to run only once on mount\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n const chartLayoutModel = React.useMemo(() => {\n const settings = getSettings({ ...config, theme: config.theme! })\n const chartLayout = ChartLayoutModel.create({\n layout: config.layout,\n width: config.width,\n height: config.height,\n editable: config.editable,\n canChangeTicker: config.canChangeTicker,\n scrollable: config.scrollable,\n initialScrollable: config.scrollable,\n cross: config.cross,\n editors: config.editors,\n theme: config.theme,\n idea: config.idea,\n settings,\n isWheelZoomEnabled: config.specificChartFunctionality === SpecificChartFunctionality.chartPage,\n specificChartFunctionality: config.specificChartFunctionality,\n isHideDrawingsActive: false,\n isPreserveDrawingsActive: !!(\n getIsPreserveDrawingsAndAutosaveAvailable(config) &&\n window.FinvizSettings.toolsState?.[DrawingSetting.PreserveDrawings]\n ),\n isLockDrawingsActive: false,\n uuid: config.uuid,\n drawingsInternalStore: DrawingsInternalStore.create({\n elements: config.initialStoreDrawings,\n }),\n })\n\n chartLayout.updateAttributes({ defaultZoomFactor: getDefaultZoomFactor(chartLayout) })\n\n return chartLayout\n\n // We need to disable the eslint check because the hook is supposed to run only once on mount\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n return chartLayoutModel ? (\n <>\n \n \n \n ) : null\n}\n","import debounce from 'lodash.debounce'\nimport React from 'react'\n\nimport Chart from '../../models/chart'\nimport Quote from '../../models/quote'\n\nconst MAX_QUOTE_CACHE_TIME_IN_MS = 300000 // 5 min\n\nexport const withQuoteCacheManagement = (Component: any) => (props: any) => {\n React.useEffect(() => {\n const cleanupQuoteCache = () => {\n const allQuotes = Quote.all()\n const allCharts = Chart.all()\n const allChartQuotes = allCharts.flatMap((chart) => chart.getAllQuotes())\n\n allQuotes.forEach((quote) => {\n if (\n !allChartQuotes.some((usedQuote) => usedQuote.eql(quote)) &&\n !quote.isFetching &&\n quote.fetchedAt > -1 &&\n quote.fetchedAt < Date.now() - MAX_QUOTE_CACHE_TIME_IN_MS\n ) {\n quote.destroy()\n }\n })\n }\n\n const checkQuoteCacheDebounce = debounce(cleanupQuoteCache, 500)\n\n Quote.bind('change', checkQuoteCacheDebounce)\n return () => {\n checkQuoteCacheDebounce.cancel()\n Quote.unbind('change', checkQuoteCacheDebounce)\n }\n }, [])\n\n return \n}\n","import debounce from 'lodash.debounce'\nimport React from 'react'\n\nimport { ObjectHash } from '../../../types/shared'\nimport { EXTRA_MARKET_BUFFER_MINUTES, QUOTE_FETCH_EVENT } from '../../constants/common'\nimport Chart from '../../models/chart'\nimport ChartLayoutModel from '../../models/chart_layout'\nimport Pane from '../../models/pane'\nimport { QuoteFetchType } from '../../models/quote/constants'\n\ninterface Props {\n chartLayoutModel: ChartLayoutModel\n}\n\ntype PollingIntervalToChartsType = ObjectHash\n\n/*\n * This HOC loops through all charts and checks if they are supposed to be refetch in some interval\n * It creates groups of charts to be refreshed grouped by the refresh interval\n * */\nexport const withQuotePolling = (Component: any) => (props: Props) => {\n const [pollingIntervalToCharts, setPollingIntervalToCharts] = React.useState({})\n const checkForChartsWithPolling = React.useCallback(() => {\n // check for charts which have some refresh interval and group chart ids by the interval value e.g. { interval_in_ms: [id1, id2] }\n const newPollingIntervalToCharts: PollingIntervalToChartsType = {} // example { 60000: ['c-0', 'c-1'], 9000: ['c-4'] }\n props.chartLayoutModel.getAllCharts().forEach((chart) => {\n const chartRefreshInterval = chart.getRefreshInterval()\n\n if (chartRefreshInterval) {\n newPollingIntervalToCharts[chartRefreshInterval] = newPollingIntervalToCharts[chartRefreshInterval] ?? []\n newPollingIntervalToCharts[chartRefreshInterval].push(chart.id)\n }\n })\n\n if (JSON.stringify(newPollingIntervalToCharts) !== JSON.stringify(pollingIntervalToCharts)) {\n setPollingIntervalToCharts(newPollingIntervalToCharts)\n }\n }, [props.chartLayoutModel, pollingIntervalToCharts])\n const intervalIdsRef = React.useRef([])\n\n React.useEffect(() => {\n const checkForChartsWithPollingDebounced = debounce(checkForChartsWithPolling)\n const chartsCheckerIntervalId = window.setInterval(\n checkForChartsWithPollingDebounced,\n EXTRA_MARKET_BUFFER_MINUTES * 1000\n )\n\n // listen on any changes in all charts & panes and call debounced check for charts/indicators with quotes that needs to be refetched periodically\n Chart.bind('change', checkForChartsWithPollingDebounced)\n Pane.bind('change', checkForChartsWithPollingDebounced)\n\n return () => {\n checkForChartsWithPollingDebounced.cancel()\n Chart.unbind('change', checkForChartsWithPollingDebounced)\n Pane.unbind('change', checkForChartsWithPollingDebounced)\n window.clearInterval(chartsCheckerIntervalId)\n }\n }, [checkForChartsWithPolling])\n\n React.useEffect(() => {\n const timeoutDurations = Object.keys(pollingIntervalToCharts).map(Number)\n const allCharts = props.chartLayoutModel.getAllCharts()\n const timeoutDurationsMin = Math.min(...timeoutDurations)\n\n timeoutDurations.forEach((duration) => {\n const timeoutId = window.setInterval(() => {\n const chartIds = pollingIntervalToCharts[duration]\n // get all UNIQUE quotes used in charts and refetch them\n allCharts\n .filter((chart) => chartIds.includes(chart.id))\n .flatMap((chart) => chart.getAllQuotes())\n .filter(\n (quote, index, quotesToUpdate) =>\n !quote.isFetching && index === quotesToUpdate.findIndex((quoteToUpdate) => quote.eql(quoteToUpdate))\n )\n .forEach((quote) => {\n quote.fetchData({ fetchType: QuoteFetchType.NewerData })\n })\n if (duration === timeoutDurationsMin) {\n document.dispatchEvent(new Event(QUOTE_FETCH_EVENT))\n }\n }, duration)\n intervalIdsRef.current.push(timeoutId)\n })\n\n return () => {\n if (intervalIdsRef.current.length > 0) {\n intervalIdsRef.current.forEach((timeoutId) => {\n window.clearInterval(timeoutId)\n })\n intervalIdsRef.current = []\n }\n }\n }, [props.chartLayoutModel, pollingIntervalToCharts])\n\n return \n}\n","import Spine from '@finviz/spine'\nimport classnames from 'classnames'\nimport flowRight from 'lodash.flowright'\nimport merge from 'lodash.merge'\nimport throttle from 'lodash.throttle'\nimport React from 'react'\nimport * as ReactDOM from 'react-dom'\n\nimport { ChartConfigObject, DrawingSpineOptionsEvent, IIdea, RootChartConfigObject } from '../../../types/shared'\nimport { ChartGrid, ChartGridCell } from '../../components'\nimport { ChartEditorEnum, LAYOUTS, LayoutType, SpecificChartFunctionality } from '../../constants/common'\nimport ChartModel from '../../models/chart'\nimport ChartLayoutModel from '../../models/chart_layout'\nimport ChartLayout from '../../models/chart_layout'\nimport { AutoSaveState } from '../../models/constants'\nimport ElementModel from '../../models/element'\nimport utils, {\n getChartsDimensions,\n getFullscreenStatus,\n getIsMobilePortrait,\n isRedesignEnabled,\n isRedesignedPage,\n} from '../../utils'\nimport { getIsPreserveDrawingsAndAutosaveAvailable, getIsSidebarEnabled } from '../../utils/chart'\nimport fetchApi from '../../utils/fetch_api'\nimport { getTickersAndContainerTypesInLayoutModel } from '../autosave/utils'\nimport { withDrawingsAutoSave } from '../autosave/with-auto-save'\nimport Chart from '../chart'\nimport { SidebarDirection } from '../sidebar/constants'\nimport { Sidebar } from '../sidebar/sidebar'\nimport Toolbar from '../toolbar'\nimport { AutoSaveNotesDialog } from '../toolbar/auto-save-notes'\nimport { ConfirmationDialog } from '../toolbar/confirmation_dialog'\nimport { DrawingActions, DrawingSetting, DrawingTool } from '../toolbar/interfaces'\nimport ToolbarMobile from '../toolbar/mobile/toolbar-mobile'\nimport { withDialogState } from '../with_dialog_state_hook'\nimport { AutoSaveStateIndicator } from './auto-save-state-indicator'\nimport { ChartLayoutAutoSaveNote } from './chart-layout-auto-save-note'\nimport { PublishOldButtonClickListener, getPublishChartHtmlElements } from './publish_old_button_click_listener'\nimport { withChartPageTitle } from './with-chart-page-title'\nimport { withChartRouteChange } from './with-chart-route-change'\nimport { withCompleteLayoutModelInit } from './with-complete-layout-model-init'\nimport { withIdeaModelState } from './with-idea-model-state'\nimport { withQuoteCacheManagement } from './with-quote-cache-management'\nimport { withQuotePolling } from './with-quote-polling'\n\ninterface ChartLayoutComponentProps {\n config: RootChartConfigObject\n confirmationDialogState: any\n noteDialogState: any\n shouldResize?: boolean\n chartLayoutModel: ChartLayoutModel\n idea?: IIdea\n deleteAllAutoSavedElements: () => void\n isAutoSaveActive: boolean\n}\n\ninterface ChartLayoutComponentState {\n editable: boolean\n editors: ChartEditorEnum[]\n layout: LayoutType\n activeChartInteraction: string | null\n touchEventsDisabled: boolean\n isToolbarHorizontal: boolean\n activeTool: DrawingTool\n drawingSettings: Record\n}\n\nclass ChartLayoutComponentBase extends React.Component {\n // expects config, bindPublic\n model: ChartLayoutModel\n isMobile = Boolean(utils.isMobile(true))\n charts: Array<{ model: ChartModel; config: ChartConfigObject }>\n orientationChangeTimeout: number | undefined\n preserveDrawingAbortController = new AbortController()\n\n constructor(props: ChartLayoutComponentProps) {\n super(props)\n\n this.model = props.chartLayoutModel\n const config = props.config\n\n this.charts = []\n for (const chartConfig of config.charts) {\n const modelProperties: Partial = merge({}, chartConfig)\n\n modelProperties.chart_layout = this.model\n delete modelProperties.panes\n if (modelProperties.zoomFactor == null) {\n modelProperties.zoomFactor = this.model.defaultZoomFactor\n }\n if (modelProperties.refreshData == null) {\n modelProperties.refreshData = true\n }\n if (!modelProperties.dateRange) {\n modelProperties.dateRange = null\n }\n modelProperties.isHideDrawingsActive = this.model.isHideDrawingsActive\n modelProperties.isScrolled = false\n const model = this.model.charts().create(modelProperties)\n this.charts.push({ model, config: chartConfig })\n }\n this.model.updateAttribute('activeChart', this.model.charts().first())\n\n this.state = {\n editable: this.model.editable,\n editors: this.model.editors,\n layout: this.model.layout,\n activeChartInteraction: null,\n activeTool: DrawingTool.Mouse,\n touchEventsDisabled: false,\n isToolbarHorizontal: true,\n drawingSettings: {\n [DrawingSetting.DrawingModeContinuous]: false,\n [DrawingSetting.PreserveDrawings]: this.handleInitialPreserveDrawingsState(),\n [DrawingSetting.HideDrawings]: false,\n [DrawingSetting.LockDrawings]: false,\n },\n }\n }\n\n componentDidMount() {\n if (this.state.editable) {\n const DELETE = 46\n window.addEventListener('keyup', (e) => {\n const selected = this.model.getPaneWithSelection()\n if (e.keyCode === DELETE && selected) {\n const element = ElementModel.findByAttribute('instance', selected.selection)\n if (element) {\n const elementPane = element.pane()\n element.destroyCascade({ eventType: DrawingSpineOptionsEvent.Remove })\n elementPane.normalizeZIndexes()\n }\n }\n })\n }\n\n if (this.isMobile) {\n this.model.settings.ThumbSettings.size = this.model.settings.ThumbSettings.touchSize\n }\n\n this.onModelChange()\n\n this.model.bind('change', this.onModelChange)\n this.model.charts().bind('destroy', this.onChartDestroy)\n\n this.setToolbarPosition()\n window.addEventListener('resize', this.onWindowResize)\n window.addEventListener('orientationchange', this.handleOrientationChange)\n\n if (this.isMobile) {\n this.checkTouchEventsDisabled()\n window.addEventListener('touchend', this.checkTouchEventsDisabled)\n }\n }\n\n componentDidUpdate(prevProps: Readonly): void {\n if (prevProps.idea && !this.props.idea) {\n if (this.model.specificChartFunctionality === SpecificChartFunctionality.chartPage) {\n this.onWindowResize()\n }\n document.querySelector('#idea-title-container')?.remove()\n }\n\n this.setToolbarPosition()\n }\n\n componentWillUnmount() {\n this.preserveDrawingAbortController.abort()\n this.model.unbind('change', this.onModelChange)\n\n window.removeEventListener('resize', this.onWindowResize)\n window.removeEventListener('orientationchange', this.handleOrientationChange)\n\n if (this.isMobile) {\n window.removeEventListener('touchend', this.checkTouchEventsDisabled)\n }\n\n clearTimeout(this.orientationChangeTimeout)\n this.throttledResize.cancel()\n this.model.destroyCascade()\n }\n\n handleInitialPreserveDrawingsState = () => {\n let preserveDrawings = false\n if (getIsPreserveDrawingsAndAutosaveAvailable(this.model)) {\n if (window.FinvizSettings.toolsState?.[DrawingSetting.PreserveDrawings] !== undefined) {\n preserveDrawings = window.FinvizSettings.toolsState[DrawingSetting.PreserveDrawings]\n } else {\n this.handlePreserveDrawingsSettings()\n }\n }\n this.model.updateAttribute('isPreserveDrawingsActive', preserveDrawings)\n return preserveDrawings\n }\n\n handlePreserveDrawingsSettings = async (value?: boolean) => {\n const setPreserveDrawings = (val: boolean) => {\n this.model.updateAttribute('isPreserveDrawingsActive', val)\n this.setState((prevState) => ({\n drawingSettings: {\n ...prevState.drawingSettings,\n [DrawingSetting.PreserveDrawings]: val,\n },\n }))\n }\n\n try {\n this.preserveDrawingAbortController.abort()\n this.preserveDrawingAbortController = new AbortController()\n const response = await fetchApi({\n location: '/api/tools_state.ashx',\n method: value !== undefined ? 'POST' : 'GET',\n body:\n value !== undefined\n ? new URLSearchParams({ tools_state: JSON.stringify({ [DrawingSetting.PreserveDrawings]: value }) })\n : undefined,\n throwOnStatusCodes: [404],\n abortController: this.preserveDrawingAbortController,\n })\n\n if (value === undefined && response?.[DrawingSetting.PreserveDrawings] !== undefined) {\n setPreserveDrawings(response[DrawingSetting.PreserveDrawings])\n }\n } catch {\n if (value !== undefined) {\n setPreserveDrawings(!value)\n }\n }\n }\n\n handleOrientationChange = () => {\n this.orientationChangeTimeout = window.setTimeout(() => {\n this.setToolbarPosition()\n if (this.props.shouldResize) {\n this.handleResize()\n }\n })\n }\n\n onWindowResize = () => {\n this.setToolbarPosition()\n\n if (this.props.shouldResize) {\n this.throttledResize()\n }\n }\n\n handleResize = () => {\n const modelAttrs: Partial = getChartsDimensions(this.model.getHTMLElementId())\n this.model.updateAttributes(modelAttrs)\n }\n\n throttledResize = throttle(this.handleResize, 200)\n\n setToolbarPosition() {\n // quote page toolbar\n // 210px represents: (20px (toolbar left margin) + 80px (toolbar width) + 5px (toolbar rigth margin)) * 2 (both sides of chart)\n const newIsToolbarHorizontal = this.model.width + 210 > window.innerWidth || window.innerWidth < 1000\n if (newIsToolbarHorizontal !== this.state.isToolbarHorizontal) {\n this.setState({\n isToolbarHorizontal: newIsToolbarHorizontal,\n })\n }\n }\n\n checkTouchEventsDisabled = () => {\n if (!/\\bcharts\\b/.test(window.location.pathname) || getFullscreenStatus() || this.getVisualViewportScale() === 1) {\n this.state?.touchEventsDisabled && this.setState({ touchEventsDisabled: false })\n } else {\n !this.state?.touchEventsDisabled && this.setState({ touchEventsDisabled: true })\n }\n }\n\n getVisualViewportScale = () => {\n if (process.env.IS_E2E_TESTING) {\n return 1\n }\n if (window.visualViewport && this.isMobile) {\n return window.visualViewport.scale\n } else {\n return 1\n }\n }\n\n handleActiveToolChange = (activeTool: DrawingTool) => {\n if (!this.model.isLockDrawingsActive) {\n this.setState({ activeTool })\n }\n }\n\n handleDrawingAction = (actionId: DrawingActions) => {\n switch (actionId) {\n case DrawingActions.AddNote:\n this.props.noteDialogState.toggle()\n break\n case DrawingActions.DeleteDrawings:\n case DrawingActions.DeleteAutoSavedDrawings:\n this.props.confirmationDialogState.show()\n break\n default:\n return\n }\n }\n\n handleConfirmationDialogCloseBtn = () => {\n this.props.confirmationDialogState.hide()\n }\n\n handleConfirmationDialogDeleteBtn = () => {\n if (this.model.drawingsInternalStore().autoSaveState !== AutoSaveState.Off) {\n this.props.deleteAllAutoSavedElements()\n }\n this.model.getAllElements().forEach((element) => element.isDrawing() && element.destroyCascade())\n this.handleConfirmationDialogCloseBtn()\n }\n\n handleDrawingsSetting = (settingId: DrawingSetting) => {\n const newObj = { ...this.state.drawingSettings, [settingId]: !this.state.drawingSettings[settingId] }\n\n switch (settingId) {\n case DrawingSetting.HideDrawings:\n this.handleActiveToolChange(DrawingTool.Mouse)\n this.toggleHideDrawings(newObj[DrawingSetting.HideDrawings])\n this.handleLockDrawings(newObj)\n break\n case DrawingSetting.PreserveDrawings:\n this.handlePreserveDrawingsSettings(newObj[DrawingSetting.PreserveDrawings])\n this.model.updateAttribute('isPreserveDrawingsActive', newObj[DrawingSetting.PreserveDrawings])\n break\n case DrawingSetting.LockDrawings:\n this.handleActiveToolChange(DrawingTool.Mouse)\n this.handleLockDrawings(newObj)\n break\n case DrawingSetting.DrawingModeContinuous:\n this.model.updateAttribute('isDrawingModeContinuousActive', newObj[DrawingSetting.DrawingModeContinuous])\n newObj[DrawingSetting.DrawingModeContinuous] === false && this.handleActiveToolChange(DrawingTool.Mouse)\n break\n default:\n break\n }\n\n this.setState({ drawingSettings: newObj })\n window.gtag?.('event', 'drawings_settings_toggle', {\n event_category: newObj[settingId] ? 'enable' : 'disable',\n event_label: settingId,\n })\n }\n\n handleLockDrawings = (drawingSettings: Record) => {\n this.model.updateAttribute(\n 'isLockDrawingsActive',\n !(!drawingSettings[DrawingSetting.HideDrawings] && !drawingSettings[DrawingSetting.LockDrawings])\n )\n }\n\n toggleHideDrawings(value: boolean) {\n this.model.updateAttribute('isHideDrawingsActive', value)\n this.model.getAllCharts().forEach((chart) => chart.updateAttribute('isHideDrawingsActive', value))\n }\n\n renderToolbar(args: any) {\n const { activeTool, drawingSettings } = this.state\n return args.isOverlayToolbar ? (\n \n ) : (\n \n )\n }\n\n render() {\n const { newCharts, useGrid } = this.props.config\n const { activeTool, editable, editors, isToolbarHorizontal } = this.state\n const publish = editors.includes(ChartEditorEnum.publish) && getPublishChartHtmlElements().length > 0\n const chartLayout = LAYOUTS[this.model.layout]\n const isMobilePortrait = getIsMobilePortrait(this.isMobile)\n const { tickers } = getTickersAndContainerTypesInLayoutModel(this.model)\n\n if (newCharts) {\n const isSidebarEnabled = getIsSidebarEnabled(SpecificChartFunctionality.chartPage)\n return (\n <>\n \n {!isMobilePortrait &&\n // Due safari iOS flex-column bug not resizing height properly we need to render toolbar\n // outside of flex for portrait and inside for landscape\n // https://github.com/finvizhq/charts/pull/784\n this.renderToolbar({\n isSidebar: true,\n isHorizontal: false,\n })}\n
\n
\n
\n {this.charts.map(({ model, config }, index) => (\n }\n gridArea={chartLayout.gridAreas?.[index]}\n setActiveChartInteraction={this.setActiveChartInteraction}\n activeTool={activeTool}\n activeChartInteraction={this.state.activeChartInteraction}\n touchEventsDisabled={this.state.touchEventsDisabled}\n shouldResize={this.props.shouldResize}\n />\n ))}\n \n \n \n
\n {this.props.idea.note}\n
\n
{`Your idea from ${this.props.idea.date}`}
\n )\n\n return (\n <>\n {ideaTitleContainer ? ReactDOM.createPortal(ideaTitle, ideaTitleContainer) : ideaTitle}\n \n {renderTools && (\n \n {this.renderToolbar({\n isHorizontal: isToolbarHorizontal,\n isAlternativeTheme: true,\n })}\n \n )}\n \n \n {this.charts.map(({ model, config }, index) => (\n \n this.renderToolbar({\n isHorizontal: true,\n isAlternativeTheme: true,\n })\n : undefined\n }\n />\n ))}\n \n \n \n \n {this.model.specificChartFunctionality === SpecificChartFunctionality.quotePage && (\n \n )}\n \n \n )\n }\n\n setActiveChartInteraction = (value: string | null) => {\n this.setState({ activeChartInteraction: value })\n }\n\n updateLayout() {\n const layout = LAYOUTS[this.model.layout]\n const charts = this.model.charts().all()\n if (charts.length === 0) {\n return\n }\n\n if (charts.length > layout.count) {\n this.removeCharts(layout.count)\n } else if (charts.length < layout.count) {\n this.addCharts(layout.count - charts.length)\n }\n\n this.model\n .charts()\n .all()\n .forEach((chart, index) => {\n const [rowStart, columnStart, rowEnd, columnEnd] =\n layout.gridAreas?.[index]\n .replace(/ /g, '')\n .split('/')\n .map((num) => Number.parseInt(num)) || []\n const numOfRowsCovered = [rowEnd, rowStart].every((value) => value !== undefined) ? rowEnd - rowStart : 1\n const numOfColumnsCovered = [columnStart, columnEnd].every((value) => value !== undefined)\n ? columnEnd - columnStart\n : 1\n const percentageOfRowsCovered = numOfRowsCovered / layout.rows\n const percentageOfColumnsCovered = numOfColumnsCovered / layout.columns\n const newWidth = ~~(this.model.width * percentageOfColumnsCovered)\n const isChartPage = this.model.specificChartFunctionality === SpecificChartFunctionality.chartPage\n const chartLayoutHeight = isChartPage\n ? this.model.height\n : this.model.charts().first().height || this.model.height\n let newHeight = ~~(chartLayoutHeight * percentageOfRowsCovered)\n\n if (this.model.editors.includes(ChartEditorEnum.settings) && isChartPage) {\n newHeight -= this.model.settings.ChartSettings.general.settingsHeight\n }\n if ((chart.width !== newWidth || chart.height !== newHeight) && newWidth > 0 && newHeight > 0) {\n chart.updateAttributes({ width: newWidth, height: newHeight })\n }\n })\n }\n\n addCharts(count: number) {\n const quote = this.model.charts().last().quote()\n if (!quote) return\n const config = {\n ...this.model.charts().last().toObject(),\n leftOffset: null,\n chart_layout: this.model,\n aftermarket: quote.aftermarket,\n premarket: quote.premarket,\n }\n for (let i = 0; i < count; i++) {\n const model = this.model.charts().create(config)\n this.charts.push({ model, config })\n }\n }\n\n removeCharts(wantedCount: number) {\n while (this.model.charts().count() > wantedCount) {\n const chart = this.model.charts().last()\n chart.destroyCascade()\n this.charts.pop()\n }\n }\n\n onChartDestroy = (chartModel: ChartModel) => {\n this.updateLayout()\n if (this.model.activeChart?.eql(chartModel)) {\n this.model.updateAttribute('activeChart', this.model.charts().last())\n }\n }\n\n onModelChange = (layoutModel?: ChartLayout, event?: Spine.Event) => {\n if (event === 'refresh') {\n return\n }\n this.updateLayout()\n\n if (layoutModel && event === 'update') {\n this.setState({\n editable: layoutModel.editable,\n editors: layoutModel.editors,\n layout: layoutModel.layout,\n })\n }\n }\n}\n\nexport const ChartLayoutComponent = flowRight(\n withQuoteCacheManagement,\n withDialogState,\n withCompleteLayoutModelInit,\n withChartPageTitle,\n withChartRouteChange,\n withIdeaModelState,\n withQuotePolling,\n withDrawingsAutoSave\n)(ChartLayoutComponentBase)\n","import React from 'react'\n\nimport { useDialogState } from '../components'\n\nexport const withDialogState = (Component: any) => (props: any) => {\n const confirmationDialogState = useDialogState()\n const noteDialogState = useDialogState({ modal: false })\n\n return \n}\n","import * as React from 'react'\n\nimport { SpecificChartFunctionality, TIMEFRAME } from '../../constants/common'\nimport math from '../../helpers/math'\nimport ChartLayoutModel from '../../models/chart_layout'\nimport Quote from '../../models/quote'\n\nfunction useChartPageTitle() {\n const defaultDocumentTitleRef = React.useRef(document.title)\n\n const { current: updateChartsTitle } = React.useRef((chartLayoutModel: ChartLayoutModel) => {\n const charts = chartLayoutModel\n .getAllCharts()\n .reduce(\n (acc, current) => {\n if (acc.some(({ ticker }) => ticker === current.ticker)) {\n return acc\n }\n return [...acc, { ticker: current.ticker, timeframe: current.timeframe, instrument: current.instrument }]\n },\n [] as Array<{ ticker: string; timeframe: TIMEFRAME; instrument: string }>\n )\n .map((chart) => {\n const { ticker, timeframe, instrument } = chart\n const quotes = Quote.select(\n (quote: Quote) =>\n quote.ticker === ticker.replace('@', '') &&\n quote.timeframe === timeframe &&\n quote.instrument === instrument &&\n chartLayoutModel.isIdeaId(quote.ideaID)\n )\n if (quotes.length > 0) {\n const { lastClose, instrument, afterClose, prevClose, name } = quotes[0]\n let percentageChange: number\n if (!lastClose) {\n return null\n }\n if (prevClose !== null) {\n percentageChange = (lastClose / prevClose - 1) * 100\n }\n if (afterClose !== null && afterClose !== lastClose) {\n percentageChange = (afterClose / lastClose - 1) * 100\n }\n return `${name || ticker} ${math.round({\n value: lastClose,\n lastClose,\n instrument,\n overridePlaces: undefined,\n })} ${percentageChange! > 0 ? '+' : '-'}${math.round({\n value: Math.abs(percentageChange!),\n overridePlaces: 2,\n })}%`\n }\n return null\n })\n .filter((chart) => chart !== null)\n\n if (charts && charts.length > 0) {\n const title = charts.join(' | ')\n if (document.title !== title) {\n document.title = title\n }\n } else if (document.title !== defaultDocumentTitleRef.current) {\n document.title = defaultDocumentTitleRef.current\n }\n })\n\n return { updateChartsTitle }\n}\n\nexport function withChartPageTitle(\n Component: React.ComponentType
\n) {\n return function WrappedComponent(props: P) {\n const { updateChartsTitle } = useChartPageTitle()\n\n const handleChartsUpdate = React.useCallback(() => {\n updateChartsTitle(props.chartLayoutModel)\n }, [props.chartLayoutModel, updateChartsTitle])\n\n React.useEffect(() => {\n if (props.chartLayoutModel.specificChartFunctionality === SpecificChartFunctionality.chartPage) {\n props.chartLayoutModel.charts().bind('change', handleChartsUpdate)\n\n handleChartsUpdate()\n\n return () => {\n props.chartLayoutModel.charts().unbind('change', handleChartsUpdate)\n }\n }\n }, [props.chartLayoutModel, handleChartsUpdate])\n\n return \n }\n}\n","import React from 'react'\n\nimport { useModelState } from '../../model-hooks/use-model-state'\nimport ChartLayoutModel from '../../models/chart_layout'\n\nexport function withIdeaModelState
(\n Component: React.ComponentType
\n) {\n return function WrappedComponent(props: P) {\n const chartLayoutModel = useModelState(props.chartLayoutModel, { watchProperties: ['idea'] })\n return \n }\n}\n","import React from 'react'\n\nimport { RootChartConfigObject } from '../../../types/shared'\nimport { NotificationWrapper } from '../../components'\nimport { ElementStyleDialogWrapper } from '../../modals/element_style'\nimport { useChartLayoutGlobalModelAsync } from '../../utils/useChartLayoutGlobalModelAsync'\nimport { withSuspense } from '../../website-shared'\nimport { ChartLayoutComponent } from './chart_layout_component'\n\ninterface ChartLayoutProps {\n config: RootChartConfigObject\n shouldResize?: boolean\n parentElement?: HTMLElement\n isWithNotifications?: boolean\n}\n\nexport function ChartLayout({ config, shouldResize, isWithNotifications = true }: ChartLayoutProps) {\n const Wrapper = isWithNotifications ? NotificationWrapper : React.Fragment\n return (\n \n \n \n \n \n )\n}\n\nexport function ChartLayoutWithGlobalStateRaw({\n config,\n shouldResize,\n parentElement,\n}: Omit) {\n const { setChartLayoutModel, getChartLayoutModelConfig, lastGlobalRerender } = useChartLayoutGlobalModelAsync()\n\n return (\n \n {config && (\n \n )}\n \n )\n}\n\nexport const ChartLayoutWithGlobalState = withSuspense(ChartLayoutWithGlobalStateRaw)\n","import * as React from 'react'\n\nimport { Button } from '../../components'\nimport Utils, { getExitFullscreen, getFullscreenStatus, getRequestFullscreen } from '../../utils'\n\nconst isIPad = Utils.isIPad()\nconst IPAD_FULLSCREEN_CLASS = 'is-ipad-fullscreen'\n\nexport function FullscreenButton() {\n const [isFullscreen, setIsFullscreen] = React.useState(getFullscreenStatus())\n const requestFullscreen = getRequestFullscreen(document.documentElement)\n const exitFullscreen = getExitFullscreen()\n\n const onClick = React.useRef(() => {\n if (getFullscreenStatus()) {\n exitFullscreen.call(document)\n } else {\n requestFullscreen.call(document.documentElement)\n }\n })\n\n React.useEffect(() => {\n const checkFullscreen = () => {\n if (isIPad) {\n if (getFullscreenStatus()) {\n document.body.classList.add(IPAD_FULLSCREEN_CLASS)\n } else {\n document.body.classList.remove(IPAD_FULLSCREEN_CLASS)\n }\n }\n setIsFullscreen(getFullscreenStatus())\n }\n\n document.addEventListener('webkitfullscreenchange', checkFullscreen)\n document.addEventListener('fullscreenchange', checkFullscreen)\n return () => {\n document.removeEventListener('webkitfullscreenchange', checkFullscreen)\n document.removeEventListener('fullscreenchange', checkFullscreen)\n }\n }, [])\n\n if (!requestFullscreen) return null\n\n return (\n \n {isFullscreen ? 'Exit Full screen' : 'Full screen'}\n \n )\n}\n","import * as React from 'react'\nimport { useLocation, useNavigate } from 'react-router-dom'\n\nimport { Button, Dropdown, DropdownItem, DropdownSeparator, Icon, Paragraph, useDropdownState } from '../../components'\nimport { LAYOUTS } from '../../constants/common'\nimport { sortObjects } from '../../helpers/sorter'\nimport { useModelState } from '../../model-hooks/use-model-state'\nimport { ChartSyncableParts } from '../../models/chart/contstants'\nimport ChartLayout from '../../models/chart_layout'\nimport { decodeQueryString } from '../../utils/query_string'\nimport { useChartsPathLocation } from '../chart-controls/use-charts-path-location'\n\nconst SORTED_LAYOUT_KEYS = sortObjects(\n Object.entries(LAYOUTS).map(([key, value]) => ({ ...value, key })),\n [{ sortBy: 'columns' }, { sortBy: 'count' }]\n).map(({ key }) => key)\n\nexport function ChartLayoutDropdown({ model }: { model: ChartLayout }) {\n const location = useLocation()\n const navigate = useNavigate()\n const parsedQuery = decodeQueryString(location.search)\n const chartLayoutModel = useModelState(model, { watchProperties: ['layout', 'syncChartParts'] })\n const { getChartsToPath } = useChartsPathLocation({ chartLayoutModel })\n const state = useDropdownState({ placement: 'bottom', orientation: 'horizontal' })\n\n return (\n \n Layout\n \n }\n >\n \n
\n {SORTED_LAYOUT_KEYS.map((layout) => (\n {\n navigate(getChartsToPath({ layout }))\n }}\n >\n \n \n ))}\n
\n
\n
\n
\n {ChartSyncableParts.map(({ value, label }) => {\n const isChartPartInSync = chartLayoutModel.getIsChartPartInSync(value)\n return (\n
{\n chartLayoutModel.setSyncChartParts(value, !isChartPartInSync)\n if (!isChartPartInSync) window.gtag?.('event', 'sync', { event_label: value })\n }}\n >\n {label}\n \n )\n })}\n \n
\n \n Ideas\n \n
\n \n
\n Chart tour\n \n
\n
\n {hasPublish && (\n
\n Share\n \n )}\n
\n
\n
\n
>(Component: React.ComponentType
, fallback?: React.ReactNode) => ((props: P) => JSX.Element)} withSuspense\n * @property {(callback: (visible: boolean, isFetching: boolean) => void | Promise) => { callback: () => Promise; unsubscribe: () => void }} notifyOnVisibilityChange\n * @property {(interval: number | (() => number), callback: () => void | Promise) => () => void} intervalCallbackOnWindowVisible\n * @property {(callback: () => void | Promise) => () => Promise} waitForPreviousPromise\n */\n\n/**\n * Add type so that the properties are suggested\n * @type {FLibsExport}\n */\nconst FLibsExports = typeof window === 'undefined' ? {} : window.FLibs\n\nmodule.exports = FLibsExports\n","export { getFullChartWidth, getIntradayChartConfig } from './controllers/renderUtils'\n\nexport { ChartLayout, ChartLayoutWithGlobalState } from './controllers/chart_layout'\nexport { ChartLayoutHeader } from './controllers/header'\nexport { Sidebar } from './controllers/sidebar/sidebar'\nexport { StockDetailTimeframeBar } from './controllers/chart-controls/stock-detail-timeframe-bar'\nexport { getTimeframeGroupsWithHref } from './controllers/chart-controls/utils'\nexport { useModelState } from './model-hooks/use-model-state'\nexport { default as Quote } from './models/quote'\nexport * as Settings from './models/settings'\nexport { default as Utils } from './utils'\nexport { useChartLayoutGlobalModelAsync } from './utils/useChartLayoutGlobalModelAsync'\nexport * as convertTa from './utils/convert_ta'\nexport { FREE_DATE_RANGES } from './constants/common'\n\nexport {\n chartSettingsAsyncModule,\n useChartLayoutGlobalModelAsyncModule,\n preventClosingUnsavedChangesAsyncModule,\n} from './controllers/chart-settings/async-modules'\n\nexport { withCompleteLayoutModelInit } from './controllers/chart_layout/with-complete-layout-model-init'\nexport { withQuotePolling } from './controllers/chart_layout/with-quote-polling'\n","import { DrawingBorder, PaneArea, ResizeByThumbWithTypeAndDifs } from '../../types/shared'\nimport { CanvasElementType } from '../constants/common'\nimport { getRoundedObject, getXYOffsetFromLine } from '../controllers/renderUtils'\nimport math from '../helpers/math'\nimport PaneModel from '../models/pane'\nimport Element from './element'\nimport Thumb from './thumb'\n\nexport interface IArrowAttrs {\n x1: number\n x2: number\n y1: number\n y2: number\n border: DrawingBorder\n}\n\nclass Arrow extends Element {\n static type = CanvasElementType.arrow\n\n declare scaled: Pick\n name = 'Arrow'\n\n constructor(values: Partial, model: PaneModel) {\n super(values, model)\n this.renderContent = this.renderContent.bind(this)\n this.resize = this.resize.bind(this)\n this._thumbs = [\n new Thumb(\n 'l',\n () => this.attrs.x1,\n () => this.attrs.y1,\n this.resize,\n this.model\n ),\n new Thumb(\n 'r',\n () => this.attrs.x2,\n () => this.attrs.y2,\n this.resize,\n this.model\n ),\n ]\n this.scale(this.getBoundingPointKeys())\n }\n\n getDefaults() {\n return {\n border: {\n width: 3,\n color: this.getChartLayoutSettings().ElementSettings.Colors.line,\n },\n } as Partial\n }\n\n getBoundingPointKeys = () => ({ x: ['x1', 'x2'], y: ['y1', 'y2'] })\n\n renderContent(context: CanvasRenderingContext2D) {\n const { x1, x2, y1, y2 } = this.scaled\n const roundedXY = getRoundedObject({ x1, x2, y1, y2 })\n const translateXY = getXYOffsetFromLine({ lineWidth: this.attrs.border.width, ...roundedXY })\n\n context.translate(translateXY.x, translateXY.y)\n context.beginPath()\n context.set('lineCap', 'round')\n context.set('lineWidth', this.attrs.border.width)\n context.set('strokeStyle', this.attrs.border.color)\n\n const angle = Math.PI / 8\n const d = 20\n\n context.beginPath()\n context.moveTo(roundedXY.x1, roundedXY.y1)\n context.lineTo(roundedXY.x2, roundedXY.y2)\n context.stroke()\n\n const lineAngle = Math.atan2(roundedXY.y2 - roundedXY.y1, roundedXY.x2 - roundedXY.x1)\n const h = Math.abs(d / Math.cos(angle))\n\n const angle1 = lineAngle + angle\n const topx = roundedXY.x1 + Math.cos(angle1) * h\n const topy = roundedXY.y1 + Math.sin(angle1) * h\n const angle2 = lineAngle - angle\n const botx = roundedXY.x1 + Math.cos(angle2) * h\n const boty = roundedXY.y1 + Math.sin(angle2) * h\n\n context.beginPath()\n context.moveTo(topx, topy)\n context.lineTo(roundedXY.x1, roundedXY.y1)\n context.lineTo(botx, boty)\n context.stroke()\n context.translate(translateXY.x * -1, translateXY.y * -1)\n\n if (this.getShouldRenderThumbs()) {\n this.renderThumbs(context)\n }\n }\n\n moveBy(x: number, y: number) {\n this.attrs.x1 += x\n this.attrs.x2 += x\n this.attrs.y1 += y\n this.attrs.y2 += y\n }\n\n resize({ type, difX, difY }: ResizeByThumbWithTypeAndDifs) {\n if (type === 'l') {\n this.attrs.x1 += difX\n this.attrs.y1 += difY\n } else {\n this.attrs.x2 += difX\n this.attrs.y2 += difY\n }\n }\n\n isInArea(area: PaneArea) {\n if (super.isDrawingElementLockedOrInvisible()) return false\n if (math.distanceToSegment(area.scaled, this.scaled) <= 10) {\n return true\n }\n return super.isInArea(area)\n }\n}\n\nArrow.prototype.modalConfig = {\n inputs: [{ type: 'line', name: 'border' }],\n}\n\nexport default Arrow\n","import { DrawingBorder, PaneArea, RequireByKey, ResizeByThumbFuncProps } from '../../../types/shared'\nimport { CanvasElementType } from '../../constants/common'\nimport math from '../../helpers/math'\nimport { getContextWithCache } from '../../lib/shims'\nimport PaneModel from '../../models/pane'\nimport Element, { EdgeValues } from '../element'\nimport Thumb from '../thumb'\n\nexport type BrushPoints = Array<[x: number, y: number]>\n\nexport interface IBrushAttrs {\n points: BrushPoints\n fill: string\n border: DrawingBorder\n isPolyLineClosed: boolean\n positionPointsTimestamps: BrushPoints\n}\n\nclass Brush extends Element {\n static type = CanvasElementType.brushV1\n\n untranslatedContext: CanvasRenderingContext2D | null = null\n\n name = 'Brush'\n\n brushPath: Path2D | null = null\n\n cachedFill = {\n previousFill: '',\n shouldRenderFill: false,\n }\n\n constructor(values: Partial, model: PaneModel) {\n super(values, model)\n this.untranslatedContext = getContextWithCache(document.createElement('canvas'))\n this.setFillCache()\n }\n\n getDefaults() {\n const { ElementSettings } = this.getChartLayoutSettings()\n return {\n fill: ElementSettings.defaultTransparentFill,\n border: {\n width: 3,\n color: ElementSettings.Colors.border,\n },\n isPolyLineClosed: false,\n } as Partial\n }\n\n setFillCache() {\n this.cachedFill.previousFill = this.attrs.fill\n if (this.attrs.fill.length === 9) {\n this.cachedFill.shouldRenderFill = this.attrs.fill.slice(7) !== '00'\n } else {\n this.cachedFill.shouldRenderFill = true\n }\n }\n\n getShouldRenderFill() {\n if (this.attrs.fill !== this.cachedFill.previousFill) {\n this.setFillCache()\n }\n return this.cachedFill.shouldRenderFill\n }\n\n renderContent(context: CanvasRenderingContext2D) {\n if (this.attrs.border != null) {\n context.set('strokeStyle', this.attrs.border.color)\n }\n context.set('lineCap', 'round')\n context.set('lineJoin', 'round')\n\n const brushPath = new Path2D()\n const { points } = this.attrs\n context.beginPath()\n brushPath.moveTo(this.fx(points[0][0]), this.fy(points[0][1]))\n let i\n if (points.length > 3) {\n for (i = 0; i < points.length - 2; i++) {\n const xc = (this.fx(points[i][0]) + this.fx(points[i + 1][0])) / 2\n const yc = (this.fy(points[i][1]) + this.fy(points[i + 1][1])) / 2\n brushPath.quadraticCurveTo(this.fx(points[i][0]), this.fy(points[i][1]), xc, yc)\n }\n brushPath.quadraticCurveTo(\n this.fx(points[i][0]),\n this.fy(points[i][1]),\n this.fx(points[i + 1][0]),\n this.fy(points[i + 1][1])\n )\n } else {\n for (const point of points) {\n brushPath.lineTo(this.fx(point[0]), this.fy(point[1]))\n }\n }\n\n if (this.attrs.isPolyLineClosed) {\n brushPath.closePath()\n }\n this.brushPath = brushPath\n if (this.attrs.fill && this.getShouldRenderFill()) {\n context.set('fillStyle', this.attrs.fill)\n context.fill(brushPath)\n }\n if (this.attrs?.border?.width) {\n context.set('lineWidth', this.attrs.border.width)\n context.stroke(brushPath)\n }\n if (this.getShouldRenderThumbs()) {\n this.renderThumbs(context)\n }\n }\n\n getThumbs() {\n const [firstX, firstY] = this.attrs.points[0]\n const [lastX, lastY] = this.attrs.points[this.attrs.points.length - 1]\n\n return [\n new Thumb(\n 'first',\n () => firstX,\n () => firstY,\n this.moveByThumb,\n this.model\n ),\n new Thumb(\n 'last',\n () => lastX,\n () => lastY,\n this.moveByThumb,\n this.model\n ),\n ]\n }\n\n moveByThumb = ({ difX, difY }: RequireByKey) => {\n this.moveBy(difX, difY)\n }\n\n moveBy(x: number, y: number) {\n if (this.getIsCreator()) return\n for (const point of this.attrs.points) {\n point[0] += x\n point[1] += y\n }\n }\n\n onMouseUp() {\n const [currentDomainMax, currentDomainMin] = this.model.scale.y.domain()\n for (const point of this.attrs.points) {\n point[0] = this.roundToFixed(point[0], 2)\n point[1] = this.roundY(point[1], currentDomainMax - currentDomainMin)\n }\n super.onMouseUp()\n }\n\n isInArea(area: PaneArea) {\n if (super.isDrawingElementLockedOrInvisible()) return false\n const { points } = this.attrs\n if (\n (this.getShouldRenderFill() || this.attrs.isPolyLineClosed) &&\n this.brushPath &&\n this.untranslatedContext?.isPointInPath(this.brushPath, area.scaled.x, area.scaled.y)\n ) {\n return true\n } else if (points.length > 1) {\n for (let i = 0; i < points.length - 1; i++) {\n if (\n math.distanceToSegment(area.scaled, {\n x1: this.fx(points[i][0]),\n y1: this.fy(points[i][1]),\n x2: this.fx(points[i + 1][0]),\n y2: this.fy(points[i + 1][1]),\n }) <= 10\n ) {\n return true\n }\n }\n }\n return super.isInArea(area)\n }\n\n cachePointPositionTimestamp = () => {\n const quote = this.model?.chart()?.quote()\n if (quote) {\n const positionPointsTimestamps = this.attrs.points.map(([x, y]) => [quote.getTimestampFomPositionX(x), y])\n this.set({ positionPointsTimestamps } as Partial)\n }\n }\n\n updateScales() {\n const quote = this.model.chart().quote()\n const { positionPointsTimestamps } = this.attrs\n if (!quote || !positionPointsTimestamps) {\n // positionPointsTimestamps check is temporary to prevent app from crashing\n // caused by corrupted drawings - https://github.com/finvizhq/charts/pull/1386/files\n return\n }\n const points = positionPointsTimestamps.map(([x, y]) => [quote.getPositionXFromTimestamp(x), y])\n this.set({ points } as Partial)\n }\n\n roundToFixed = (value: number, places: number) => Number.parseFloat(math.round({ value, overridePlaces: places }))\n\n roundY = (y: number, domainDiff: number) => {\n if (domainDiff < 1) {\n const numberOfLeadingZeros = Math.abs(Math.floor(Math.log10(Math.abs(domainDiff)) + 1))\n if (numberOfLeadingZeros > 0) {\n return this.roundToFixed(y, numberOfLeadingZeros + 4)\n } else {\n return this.roundToFixed(y, numberOfLeadingZeros + 3)\n }\n } else if (domainDiff < 10) {\n return this.roundToFixed(y, 3)\n }\n return this.roundToFixed(y, 2)\n }\n\n getAutosaveOmittedProperties() {\n return ['points']\n }\n\n getEdgeXYValues() {\n if (this.edgeXYValues === null) {\n const edgeXYValues = {} as EdgeValues\n this.attrs.points.forEach(([x, y]) => {\n edgeXYValues.minX = Math.min(x, edgeXYValues.minX ?? x)\n edgeXYValues.minY = Math.min(y, edgeXYValues.minY ?? y)\n edgeXYValues.maxX = Math.max(x, edgeXYValues.maxX ?? x)\n edgeXYValues.maxY = Math.max(y, edgeXYValues.maxY ?? y)\n })\n\n this.edgeXYValues = edgeXYValues\n }\n\n return this.edgeXYValues\n }\n}\n\nBrush.prototype.modalConfig = {\n inputs: [\n { type: 'background', name: 'fill' },\n { type: 'border', name: 'border', min: 1, max: 20, default: {} },\n { type: 'checkbox', name: 'isPolyLineClosed', label: 'Close line' },\n ],\n}\n\nexport default Brush\n","import math from '../../helpers/math'\n\ninterface ICoordinates {\n x: number\n y: number\n}\nexport interface IRectangleSidesCoordinates {\n topLeft: ICoordinates\n topRight: ICoordinates\n rightTop: ICoordinates\n rightBottom: ICoordinates\n bottomRight: ICoordinates\n bottomLeft: ICoordinates\n leftBottom: ICoordinates\n leftTop: ICoordinates\n}\n\nexport interface ITailCoordinates {\n tailRoot: ICoordinates\n tailTip: ICoordinates\n}\n\nexport enum TailDirection {\n noTail,\n topLeftCorner,\n topRightCorner,\n bottomLeftCorner,\n bottomRightCorner,\n topSide,\n rightSide,\n bottomSide,\n leftSide,\n}\n\nexport const getRectangleSidesCoordinates = ({\n padding,\n radius,\n x2,\n y2,\n textWidth,\n measuredHeight,\n}: {\n padding: number\n radius: number\n x2: number\n y2: number\n textWidth: number\n measuredHeight: number\n}): IRectangleSidesCoordinates => ({\n topLeft: {\n x: x2 - padding + radius,\n y: y2 - padding,\n },\n topRight: {\n x: x2 + textWidth + padding - radius,\n y: y2 - padding,\n },\n rightTop: {\n x: x2 + textWidth + padding,\n y: y2 - padding + radius,\n },\n rightBottom: {\n x: x2 + textWidth + padding,\n y: y2 + padding + measuredHeight - radius,\n },\n bottomRight: {\n x: x2 + textWidth + padding - radius,\n y: y2 + padding + measuredHeight,\n },\n bottomLeft: {\n x: x2 - padding + radius,\n y: y2 + padding + measuredHeight,\n },\n leftBottom: {\n x: x2 - padding,\n y: y2 + padding + measuredHeight - radius,\n },\n leftTop: {\n x: x2 - padding,\n y: y2 - padding + radius,\n },\n})\n\nexport const getTailCoordinates = ({\n rectangleSides,\n x1,\n y1,\n}: {\n rectangleSides: IRectangleSidesCoordinates\n x1: number\n y1: number\n}): ITailCoordinates => ({\n tailRoot: {\n x: rectangleSides.topLeft.x + (rectangleSides.topRight.x - rectangleSides.topLeft.x) / 2,\n y: rectangleSides.leftTop.y + (rectangleSides.leftBottom.y - rectangleSides.leftTop.y) / 2,\n },\n tailTip: {\n x: x1,\n y: y1,\n },\n})\n\nconst getTailHalfWidth = (halfWidth: number, p1: ICoordinates, p2: ICoordinates): number => {\n const dist = math.distance(p1, p2)\n if (dist < halfWidth * 2) {\n return dist / 2\n } else {\n return halfWidth\n }\n}\n\nexport const getTailToSideIntersection = ({\n tail,\n rectangleSides,\n}: {\n tail: ITailCoordinates\n rectangleSides: IRectangleSidesCoordinates\n}): TailDirection => {\n const { topLeft, topRight, rightTop, rightBottom, bottomRight, bottomLeft, leftBottom, leftTop } = rectangleSides\n const { tailTip, tailRoot } = tail\n if (math.twoSegmentLinesIntersection(tailTip, tailRoot, topLeft, leftTop)) {\n return TailDirection.topLeftCorner\n } else if (math.twoSegmentLinesIntersection(tailTip, tailRoot, topRight, rightTop)) {\n return TailDirection.topRightCorner\n } else if (math.twoSegmentLinesIntersection(tailTip, tailRoot, bottomLeft, leftBottom)) {\n return TailDirection.bottomLeftCorner\n } else if (math.twoSegmentLinesIntersection(tailTip, tailRoot, bottomRight, rightBottom)) {\n return TailDirection.bottomRightCorner\n } else if (math.twoSegmentLinesIntersection(tailTip, tailRoot, topLeft, topRight)) {\n return TailDirection.topSide\n } else if (math.twoSegmentLinesIntersection(tailTip, tailRoot, rightTop, rightBottom)) {\n return TailDirection.rightSide\n } else if (math.twoSegmentLinesIntersection(tailTip, tailRoot, bottomLeft, bottomRight)) {\n return TailDirection.bottomSide\n } else if (math.twoSegmentLinesIntersection(tailTip, tailRoot, leftTop, leftBottom)) {\n return TailDirection.leftSide\n } else {\n return TailDirection.noTail\n }\n}\n\ninterface IRenderCallout {\n context: any\n radius: number\n requiredTailHalfWidth: number\n tail: ITailCoordinates\n rectangleSides: IRectangleSidesCoordinates\n tailDirection: TailDirection\n}\n\nexport const renderCallout = ({\n context,\n radius,\n requiredTailHalfWidth,\n tail,\n rectangleSides,\n tailDirection,\n}: IRenderCallout): void => {\n const { topLeft, topRight, rightTop, rightBottom, bottomRight, bottomLeft, leftBottom, leftTop } = rectangleSides\n const { tailTip, tailRoot } = tail\n\n // draw rounded rectangle from top left corner clockwise\n // !!! ORDER OF RENDER MATTERS !!!\n\n // renderTopLeftCorner\n if (tailDirection === TailDirection.topLeftCorner) {\n context.moveTo(leftTop.x, leftTop.y)\n context.lineTo(tailTip.x, tailTip.y)\n context.lineTo(topLeft.x, topLeft.y)\n } else {\n context.moveTo(leftTop.x, leftTop.y)\n context.arcTo(leftTop.x, topLeft.y, topLeft.x, topLeft.y, radius)\n }\n\n // renderTopLine\n if (tailDirection === TailDirection.topSide) {\n const tailLineToTopLineIntersection = math.twoSegmentLinesIntersection(tailTip, tailRoot, topLeft, topRight)\n if (!tailLineToTopLineIntersection) {\n context.lineTo(topRight.x, topRight.y)\n return\n }\n const tailHalfWidth = getTailHalfWidth(requiredTailHalfWidth, topLeft, topRight)\n if (tailLineToTopLineIntersection.x - tailHalfWidth < topLeft.x) {\n context.lineTo(tailTip.x, tailTip.y)\n context.lineTo(topLeft.x + tailHalfWidth * 2, tailLineToTopLineIntersection.y)\n } else if (tailLineToTopLineIntersection.x + tailHalfWidth > topRight.x) {\n context.lineTo(topRight.x - tailHalfWidth * 2, tailLineToTopLineIntersection.y)\n context.lineTo(tailTip.x, tailTip.y)\n context.lineTo(topRight.x, tailLineToTopLineIntersection.y)\n } else {\n context.lineTo(tailLineToTopLineIntersection.x - tailHalfWidth, tailLineToTopLineIntersection.y)\n context.lineTo(tailTip.x, tailTip.y)\n context.lineTo(tailLineToTopLineIntersection.x + tailHalfWidth, tailLineToTopLineIntersection.y)\n context.lineTo(topRight.x, topRight.y)\n }\n } else {\n context.lineTo(topRight.x, topRight.y)\n }\n\n // renderTopRightCorner\n if (tailDirection === TailDirection.topRightCorner) {\n context.lineTo(topRight.x, topRight.y)\n context.lineTo(tailTip.x, tailTip.y)\n context.lineTo(rightTop.x, rightTop.y)\n } else {\n context.arcTo(rightTop.x, topRight.y, rightTop.x, rightTop.y, radius)\n }\n\n // renderRightLine\n if (tailDirection === TailDirection.rightSide) {\n const tailLineToRightLineIntersection = math.twoSegmentLinesIntersection(tailTip, tailRoot, rightTop, rightBottom)\n if (!tailLineToRightLineIntersection) {\n context.lineTo(rightBottom.x, rightBottom.y)\n return\n }\n const tailHalfWidth = getTailHalfWidth(requiredTailHalfWidth, rightTop, rightBottom)\n if (tailLineToRightLineIntersection.y - tailHalfWidth < rightTop.y) {\n context.lineTo(tailTip.x, tailTip.y)\n context.lineTo(rightTop.x, rightTop.y + tailHalfWidth * 2)\n } else if (tailLineToRightLineIntersection.y + tailHalfWidth > rightBottom.y) {\n context.lineTo(rightBottom.x, rightBottom.y - tailHalfWidth * 2)\n context.lineTo(tailTip.x, tailTip.y)\n context.lineTo(rightBottom.x, rightBottom.y)\n } else {\n context.lineTo(tailLineToRightLineIntersection.x, tailLineToRightLineIntersection.y - tailHalfWidth)\n context.lineTo(tailTip.x, tailTip.y)\n context.lineTo(tailLineToRightLineIntersection.x, tailLineToRightLineIntersection.y + tailHalfWidth)\n context.lineTo(rightBottom.x, rightBottom.y)\n }\n } else {\n context.lineTo(rightBottom.x, rightBottom.y)\n }\n\n // renderBottomRightCorner\n if (tailDirection === TailDirection.bottomRightCorner) {\n context.lineTo(rightBottom.x, rightBottom.y)\n context.lineTo(tailTip.x, tailTip.y)\n context.lineTo(bottomRight.x, bottomRight.y)\n } else {\n context.arcTo(rightBottom.x, bottomRight.y, bottomRight.x, bottomRight.y, radius)\n }\n\n // renderBottomLine\n if (tailDirection === TailDirection.bottomSide) {\n const tailLineToBottomLineIntersection = math.twoSegmentLinesIntersection(\n tailTip,\n tailRoot,\n bottomLeft,\n bottomRight\n )\n if (!tailLineToBottomLineIntersection) {\n context.lineTo(bottomLeft.x, bottomLeft.y)\n return\n }\n const tailHalfWidth = getTailHalfWidth(requiredTailHalfWidth, bottomLeft, bottomRight)\n if (tailLineToBottomLineIntersection.x + tailHalfWidth > bottomRight.x) {\n context.lineTo(tailTip.x, tailTip.y)\n context.lineTo(bottomRight.x - tailHalfWidth * 2, tailLineToBottomLineIntersection.y)\n } else if (tailLineToBottomLineIntersection.x - tailHalfWidth < bottomLeft.x) {\n context.lineTo(bottomLeft.x + tailHalfWidth * 2, tailLineToBottomLineIntersection.y)\n context.lineTo(tailTip.x, tailTip.y)\n context.lineTo(bottomLeft.x, tailLineToBottomLineIntersection.y)\n } else {\n context.lineTo(tailLineToBottomLineIntersection.x + tailHalfWidth, tailLineToBottomLineIntersection.y)\n context.lineTo(tailTip.x, tailTip.y)\n context.lineTo(tailLineToBottomLineIntersection.x - tailHalfWidth, tailLineToBottomLineIntersection.y)\n context.lineTo(bottomLeft.x, bottomLeft.y)\n }\n } else {\n context.lineTo(bottomLeft.x, bottomLeft.y)\n }\n\n // renderBottomLeftCorner\n if (tailDirection === TailDirection.bottomLeftCorner) {\n context.lineTo(bottomLeft.x, bottomLeft.y)\n context.lineTo(tailTip.x, tailTip.y)\n context.lineTo(leftBottom.x, leftBottom.y)\n } else {\n context.arcTo(leftBottom.x, bottomLeft.y, leftBottom.x, leftBottom.y, radius)\n }\n\n // renderLeftLine\n if (tailDirection === TailDirection.leftSide) {\n const tailLineToLeftLineIntersection = math.twoSegmentLinesIntersection(tailTip, tailRoot, leftTop, leftBottom)\n if (!tailLineToLeftLineIntersection) {\n context.lineTo(leftTop.x, leftTop.y)\n return\n }\n const tailHalfWidth = getTailHalfWidth(requiredTailHalfWidth, leftTop, leftBottom)\n if (tailLineToLeftLineIntersection.y + tailHalfWidth > leftBottom.y) {\n context.lineTo(tailTip.x, tailTip.y)\n context.lineTo(leftBottom.x, leftBottom.y - tailHalfWidth * 2)\n } else if (tailLineToLeftLineIntersection.y - tailHalfWidth < leftTop.y) {\n context.lineTo(leftTop.x, leftTop.y + tailHalfWidth * 2)\n context.lineTo(tailTip.x, tailTip.y)\n context.lineTo(leftTop.x, leftTop.y)\n } else {\n context.lineTo(tailLineToLeftLineIntersection.x, tailLineToLeftLineIntersection.y + tailHalfWidth)\n context.lineTo(tailTip.x, tailTip.y)\n context.lineTo(tailLineToLeftLineIntersection.x, tailLineToLeftLineIntersection.y - tailHalfWidth)\n context.lineTo(leftTop.x, leftTop.y)\n }\n } else {\n context.lineTo(leftTop.x, leftTop.y)\n }\n}\n","import merge from 'lodash.merge'\n\nimport { PaneArea, RequireByKey, ResizeByThumbWithTypeAndDifs, TextAttrs } from '../../../types/shared'\nimport { PADDING } from '../../constants/common'\nimport { CanvasElementType } from '../../constants/common'\nimport math from '../../helpers/math'\nimport Chart from '../../models/chart'\nimport PaneModel from '../../models/pane'\nimport Text from '../text'\nimport Thumb from '../thumb'\nimport {\n getRectangleSidesCoordinates,\n getTailCoordinates,\n getTailToSideIntersection,\n renderCallout,\n} from './callout_utils'\n\nexport interface ICalloutAttrs {\n x1: number\n y1: number\n x2: number\n y2: number\n}\n\ninterface FontFamilyHeightCoefficient {\n Arial: {\n firstLine: number\n otherLines: number\n }\n Verdana: {\n firstLine: number\n otherLines: number\n }\n}\n\ntype CalloutTextAttrs = ICalloutAttrs & RequireByKey\n\nclass Callout extends Text {\n static type = CanvasElementType.calloutV1\n\n name = 'Callout'\n\n declare fontFamilyHeightCoeficient: FontFamilyHeightCoefficient\n declare isActualBoundingBoxAvailable: boolean\n declare lastAttrs: Attrs\n declare scaled: Pick\n declare measuredHeight: number\n declare font: string\n declare context: CanvasRenderingContext2D\n declare lines: {\n text: string\n metrics: TextMetrics\n }[]\n\n constructor(values: Partial, model: PaneModel) {\n super(values, model)\n this.resize = this.resize.bind(this)\n this._thumbs = [\n new Thumb(\n 'tail',\n () => this.attrs.x1,\n () => this.attrs.y1,\n this.resize,\n this.model\n ),\n ]\n this.scale(this.getBoundingPointKeys())\n }\n\n getBoundingPointKeys = () => ({ x: ['x1', 'x2'], y: ['y1', 'y2'] })\n\n getModalConfigBase() {\n return {\n inputs: [\n { type: 'multiline_string', name: 'text', required: true },\n { type: 'font', name: 'font' },\n {\n type: 'background',\n name: 'fillStyle',\n label: 'Color',\n default: this.getChartLayoutSettings().ElementSettings.Colors.textWithoutBackground,\n },\n {\n type: 'background',\n name: 'background',\n label: 'Background',\n default: 'rgba(0,0,0,0)',\n },\n {\n type: 'border',\n name: 'border',\n min: 0,\n },\n ],\n }\n }\n\n getDefaults() {\n const { ElementSettings } = this.getChartLayoutSettings()\n return {\n text: '',\n font: {\n size: 15,\n family: 'Arial',\n style: 'normal',\n weight: 'normal',\n },\n fillStyle: ElementSettings.Colors.textWithoutBackground,\n lineHeight: 15,\n // left | right | center | start | end\n textAlign: 'left',\n // top | middle | alphabetic | bottom\n textBaseline: 'alphabetic',\n padding: {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n },\n background: ElementSettings.defaultFill,\n border: { color: ElementSettings.Colors.line, width: 1 },\n } as Partial\n }\n\n setupContext(context: CanvasRenderingContext2D) {\n this.context = context\n context.set('font', this.font)\n context.set('fillStyle', this.attrs.fillStyle)\n context.set('textAlign', this.attrs.textAlign)\n context.set('textBaseline', this.attrs.textBaseline)\n this.setupTextMetricsCache()\n }\n\n setupTextMetricsCache() {\n if (\n this.attrs.text !== this.lastAttrs?.text ||\n JSON.stringify(this.attrs.font) !== JSON.stringify(this.lastAttrs?.font)\n ) {\n this.lastAttrs = merge({}, this.attrs)\n this.lines = this.getLines().map((line) => ({\n text: line,\n metrics: this.context.measureText(line),\n }))\n this.measuredHeight = this.lines.reduce((acc, current, currentIndex) => {\n const lineHeight =\n current.metrics.actualBoundingBoxAscent +\n current.metrics.actualBoundingBoxDescent +\n (currentIndex !== this.lines.length - 1 ? PADDING.S : 0)\n return acc + lineHeight\n }, 0)\n }\n }\n\n renderContent(context: CanvasRenderingContext2D) {\n this.render(context)\n if (this.getShouldRenderThumbs()) {\n this.renderThumbs(context)\n }\n }\n\n renderText() {\n let y = this.scaled.y2 + this.attrs.padding.top\n let previousDescent = 0\n this.lines.forEach((line, index) => {\n y += index === 0 ? 0 : line.metrics.actualBoundingBoxAscent + previousDescent + PADDING.S\n this.context.fillText(line.text, this.scaled.x2 + this.attrs.padding.left, y)\n previousDescent = line.metrics.actualBoundingBoxDescent\n })\n }\n\n getCalloutProperties() {\n const textWidth = this.attrs.text === '' ? this.attrs.font.size * 2 : this.width\n const requiredTailHalfWidth = this.attrs.font.size * 0.5\n const padding = this.attrs.border.width / 2 + this.attrs.font.size * 0.5\n const radius = textWidth < requiredTailHalfWidth ? textWidth / 2 : requiredTailHalfWidth\n\n const measuredHeight = this.measuredHeight < requiredTailHalfWidth ? radius * 2 : this.measuredHeight\n const y2 = this.scaled.y2 - (this.lines?.[0]?.metrics.actualBoundingBoxAscent || measuredHeight)\n\n // Points diagram\n //.......X-----------------X.......\n //.................................\n //...X.........................X...\n //...|.........................|...\n //...|.........................|...\n //...X.........................X...\n //.................................\n //.......X-----------------X.......\n\n const rectangleSides = getRectangleSidesCoordinates({\n padding,\n radius,\n x2: this.scaled.x2,\n y2,\n textWidth,\n measuredHeight,\n })\n const tail = getTailCoordinates({ rectangleSides, x1: this.scaled.x1, y1: this.scaled.y1 })\n const tailDirection = getTailToSideIntersection({ tail, rectangleSides })\n\n return {\n radius,\n requiredTailHalfWidth,\n rectangleSides,\n tail,\n tailDirection,\n }\n }\n\n renderBackground() {\n if (!this.attrs.background) {\n return\n }\n\n const { radius, requiredTailHalfWidth, tail, tailDirection, rectangleSides } = this.getCalloutProperties()\n\n this.context.beginPath()\n this.context.set('fillStyle', this.attrs.background)\n this.context.lineJoin = 'round'\n renderCallout({\n context: this.context,\n radius,\n requiredTailHalfWidth,\n tail,\n rectangleSides,\n tailDirection,\n })\n this.context.closePath()\n this.context.fill()\n this.context.set('fillStyle', this.attrs.fillStyle)\n this.renderBorder()\n }\n\n isInArea(area: PaneArea) {\n if (super.isDrawingElementLockedOrInvisible()) return false\n // is in rectangle\n const { tail, rectangleSides, requiredTailHalfWidth } = this.getCalloutProperties()\n if (\n this.lines &&\n rectangleSides &&\n rectangleSides.leftTop.x < area.scaled.x &&\n rectangleSides.topLeft.y < area.scaled.y &&\n rectangleSides.rightBottom.x > area.scaled.x &&\n rectangleSides.bottomRight.y > area.scaled.y\n ) {\n return true\n }\n // is in tail\n if (tail) {\n const tailP1 = math.perpendicularPointToLine({\n distance: requiredTailHalfWidth,\n line: { x1: tail.tailTip.x, y1: tail.tailTip.y, x2: tail.tailRoot.x, y2: tail.tailRoot.y },\n })\n const pointOffsetX = tailP1.x - tail.tailRoot.x\n const pointOffsetY = tailP1.y - tail.tailRoot.y\n const tailP2 = { x: tail.tailRoot.x + -1 * pointOffsetX, y: tail.tailRoot.y + -1 * pointOffsetY }\n const polygon = [tail.tailTip, tailP1, tailP2]\n if (math.pointInPolygon(area.scaled, polygon)) {\n return true\n }\n }\n return super.isInArea(area)\n }\n\n moveBy(x: number, y: number) {\n this.attrs.x2 += x\n this.attrs.y2 += y\n }\n\n resize({ type, difX, difY }: ResizeByThumbWithTypeAndDifs) {\n if (type === 'tail') {\n this.attrs.x1 += difX\n this.attrs.y1 += difY\n }\n }\n\n getIsInChartView(chart: Chart) {\n if (this.getIsCreator() || !this.lines) {\n return true\n }\n\n const { tail, rectangleSides } = this.getCalloutProperties()\n\n return [...Object.values(rectangleSides), tail.tailRoot, tail.tailTip].some(\n ({ x, y }) => x <= -chart.leftOffset + chart.width && x >= -chart.leftOffset && y >= 0 && y <= this.model.height\n )\n }\n}\n\nexport default Callout\n","import { Bezier } from 'bezier-js'\n\nimport { DrawingBorder, PaneArea, ResizeByThumbWithTypeAndDifs } from '../../types/shared'\nimport { CanvasElementType } from '../constants/common'\nimport Chart from '../models/chart'\nimport PaneModel from '../models/pane'\nimport Element from './element'\nimport Thumb from './thumb'\n\nexport interface ICurveAttrs {\n x1: number\n x2: number\n x3: number\n cp1x: number\n cp2x: number\n y1: number\n y2: number\n y3: number\n cp1y: number\n cp2y: number\n border: DrawingBorder\n}\n\nclass Curve extends Element {\n static type = CanvasElementType.curve\n\n name = 'Curve'\n declare scaled: Pick\n declare curve: Bezier\n\n constructor(values: Partial, model: PaneModel) {\n super(values, model)\n this.render = this.render.bind(this)\n this.resize = this.resize.bind(this)\n this._thumbs = [\n new Thumb(\n 'a',\n () => this.attrs.x1,\n () => this.attrs.y1,\n this.resize,\n this.model\n ),\n new Thumb(\n 'b',\n () => this.attrs.x2,\n () => this.attrs.y2,\n this.resize,\n this.model\n ),\n new Thumb(\n 'c',\n () => this.attrs.x3 || this.attrs.x2,\n () => this.attrs.y3 || this.attrs.y2,\n this.resize,\n this.model\n ),\n ]\n this.scale(this.getBoundingPointKeys())\n }\n\n getDefaults() {\n return {\n border: {\n width: 1,\n color: this.getChartLayoutSettings().ElementSettings.Colors.line,\n },\n } as Partial\n }\n\n getBoundingPointKeys = () => ({ x: ['x1', 'x2', 'x3'], y: ['y1', 'y2', 'y3'] })\n\n drawQuadraticCurve(context: CanvasRenderingContext2D, curve: Bezier) {\n const { points } = curve\n context.beginPath()\n context.moveTo(points[0].x, points[0].y)\n context.quadraticCurveTo(points[1].x, points[1].y, points[2].x, points[2].y)\n context.stroke()\n }\n\n renderContent(context: CanvasRenderingContext2D) {\n const { x1, x2, x3, y1, y2, y3 } = this.scaled\n context.translate(0.5, 0.5)\n context.set('lineWidth', this.attrs.border.width)\n context.set('strokeStyle', this.attrs.border.color)\n if (!x3 || !y3) {\n context.beginPath()\n context.moveTo(x1, y1)\n context.lineTo(x2, y2)\n context.lineTo(x3, y3)\n context.stroke()\n } else {\n this.curve = Bezier.quadraticFromPoints({ x: x1, y: y1 }, { x: x2, y: y2 }, { x: x3, y: y3 }, 0.5)\n this.drawQuadraticCurve(context, this.curve)\n }\n\n context.translate(-0.5, -0.5)\n if (this.getShouldRenderThumbs()) {\n this.renderThumbs(context)\n }\n }\n\n moveBy(x: number, y: number) {\n this.attrs.x1 += x\n this.attrs.x2 += x\n this.attrs.x3 += x\n this.attrs.cp1x += x\n this.attrs.cp2x += x\n\n this.attrs.y1 += y\n this.attrs.y2 += y\n this.attrs.y3 += y\n this.attrs.cp1y += y\n this.attrs.cp2y += y\n }\n\n resize({ type, difX, difY }: ResizeByThumbWithTypeAndDifs) {\n switch (type) {\n case 'a':\n this.attrs.x1 += difX\n this.attrs.y1 += difY\n break\n case 'b':\n this.attrs.x2 += difX\n this.attrs.y2 += difY\n break\n case 'c':\n this.attrs.x3 += difX\n this.attrs.y3 += difY\n break\n default:\n break\n }\n }\n\n isInArea(area: PaneArea) {\n if (super.isDrawingElementLockedOrInvisible()) return false\n if (this.curve && this.curve.project(area.scaled).d! <= 10) {\n return true\n }\n return this.thumbsAreInArea(area)\n }\n\n getIsInChartView(chart: Chart) {\n if (this.getIsCreator()) {\n return true\n }\n\n const { x1, x2, x3, y1, y2, y3 } = this.scaled\n if (!x3 || !y3) {\n return true\n }\n const isInView =\n Bezier.quadraticFromPoints({ x: x1, y: y1 }, { x: x2, y: y2 }, { x: x3, y: y3 }, 0.5).points.some(\n ({ x, y }) => x <= -chart.leftOffset + chart.width && x >= -chart.leftOffset && y >= 0 && y <= this.model.height\n ) ?? true\n\n return isInView\n }\n}\n\nCurve.prototype.modalConfig = {\n inputs: [{ type: 'line', name: 'border' }],\n}\n\nexport default Curve\n","import { DrawingBorder, PaneArea, ResizeByThumbWithTypeAndDifs } from '../../types/shared'\nimport { CanvasElementType } from '../constants/common'\nimport PaneModel from '../models/pane'\nimport Element from './element'\nimport Thumb from './thumb'\n\nexport interface IEllipseAttrs {\n x1: number\n x2: number\n x3: number\n cp1x: number\n cp2x: number\n y1: number\n y2: number\n y3: number\n cp1y: number\n cp2y: number\n width: number\n fill: string\n border: DrawingBorder\n}\n\ninterface ICoordinates {\n topCenterX: number\n topCenterY: number\n topRightX: number\n topRightY: number\n topLeftX: number\n topLeftY: number\n centerLeftX: number\n centerLeftY: number\n centerRightX: number\n centerRightY: number\n bottomCenterX: number\n bottomCenterY: number\n bottomLeftX: number\n bottomLeftY: number\n bottomRightX: number\n bottomRightY: number\n}\n\n// OLD Ellipse \"v0\" kept for backward-compatibiluty for old saved ideas\n// current Ellipse tool located in ellipse folder\nclass Ellipse extends Element {\n static type = CanvasElementType.ellipse\n\n name = 'Ellipse'\n\n declare scaled: Pick\n\n constructor(values: Partial, model: PaneModel) {\n super(values, model)\n this.resize = this.resize.bind(this)\n this._thumbs = [\n new Thumb(\n 'x1',\n () => this.attrs.x1,\n () => this.attrs.y1,\n this.resize,\n this.model\n ),\n new Thumb(\n 'x2',\n () => this.attrs.x2,\n () => this.attrs.y2,\n this.resize,\n this.model\n ),\n new Thumb(\n 'lw',\n () => this.model.scale.x.invert(this.getCoordinates().centerLeftX),\n () => this.model.scale.y.invert(this.getCoordinates().centerLeftY),\n this.resize,\n this.model\n ),\n new Thumb(\n 'rw',\n () => this.model.scale.x.invert(this.getCoordinates().centerRightX),\n () => this.model.scale.y.invert(this.getCoordinates().centerRightY),\n this.resize,\n this.model\n ),\n ]\n const boundingPointKeys = this.getBoundingPointKeys()\n this.scale({ x: [...boundingPointKeys.x, 'width'], y: boundingPointKeys.y })\n }\n\n getDefaults() {\n const { ElementSettings } = this.getChartLayoutSettings()\n return {\n fill: ElementSettings.defaultFill,\n border: {\n width: 1,\n color: ElementSettings.Colors.line,\n },\n } as Partial\n }\n\n getBoundingPointKeys = () => ({ x: ['x1', 'x2'], y: ['y1', 'y2'] })\n\n renderContent(context: CanvasRenderingContext2D) {\n const c = this.getCoordinates()\n\n context.set('fillStyle', this.attrs.fill)\n\n context.beginPath()\n context.moveTo(c.bottomCenterX, c.bottomCenterY)\n context.bezierCurveTo(c.bottomRightX, c.bottomRightY, c.topRightX, c.topRightY, c.topCenterX, c.topCenterY)\n context.bezierCurveTo(c.topLeftX, c.topLeftY, c.bottomLeftX, c.bottomLeftY, c.bottomCenterX, c.bottomCenterY)\n context.closePath()\n context.fill()\n\n context.set('lineWidth', this.attrs.border.width)\n context.set('strokeStyle', this.attrs.border.color)\n if ((this.attrs.border != null ? this.attrs.border.width : undefined) !== 0) {\n context.stroke()\n }\n\n if (this.getShouldRenderThumbs()) {\n this.renderThumbs(context)\n }\n }\n\n moveBy(x: number, y: number) {\n this.attrs.x1 += x\n this.attrs.y1 += y\n this.attrs.x2 += x\n this.attrs.y2 += y\n }\n\n resize({ type, difX, difY }: ResizeByThumbWithTypeAndDifs) {\n switch (type) {\n case 'x1':\n this.attrs.x1 += difX\n this.attrs.y1 += difY\n break\n case 'x2':\n this.attrs.x2 += difX\n this.attrs.y2 += difY\n break\n case 'lw':\n this.attrs.width += difX\n break\n case 'rw':\n this.attrs.width -= difX\n break\n default:\n break\n }\n }\n\n getCoordinates(): ICoordinates {\n // TODO cache?\n // http://stackoverflow.com/questions/14169234/the-relation-of-the-bezier-curve-and-ellipse\n const rotationAngle =\n Math.PI + Math.atan(-1 / ((this.scaled.y2 - this.scaled.y1) / (this.scaled.x2 - this.scaled.x1)))\n\n const sign = this.scaled.y1 > this.scaled.y2 ? 1 : -1\n const radiusX = this.scaled.width / 2\n let radiusY = (sign * Math.abs(this.scaled.y1 - this.scaled.y2)) / Math.cos(rotationAngle) / 2\n if (this.scaled.y1 === this.scaled.y2) {\n radiusY = Math.abs(this.scaled.x1 - this.scaled.x2) / 2\n }\n\n const width_two_thirds = (radiusX * 4) / 3\n\n const dx1 = Math.sin(rotationAngle) * radiusY\n const dy1 = Math.cos(rotationAngle) * radiusY\n const dx2 = Math.cos(rotationAngle) * width_two_thirds\n const dy2 = Math.sin(rotationAngle) * width_two_thirds\n\n const x = this.scaled.x1 + dx1\n const y = this.scaled.y1 - dy1\n\n const topCenterX = x - dx1\n const topCenterY = y + dy1\n const topRightX = topCenterX + dx2\n const topRightY = topCenterY + dy2\n const topLeftX = topCenterX - dx2\n const topLeftY = topCenterY - dy2\n\n const bottomCenterX = x + dx1\n const bottomCenterY = y - dy1\n const bottomRightX = bottomCenterX + dx2\n const bottomRightY = bottomCenterY + dy2\n const bottomLeftX = bottomCenterX - dx2\n const bottomLeftY = bottomCenterY - dy2\n\n const centerRightX = x + dx2\n const centerRightY = y + dy2\n const centerLeftX = x - dx2\n const centerLeftY = y - dy2\n\n return {\n topCenterX,\n topCenterY,\n topRightX,\n topRightY,\n topLeftX,\n topLeftY,\n centerLeftX,\n centerLeftY,\n centerRightX,\n centerRightY,\n bottomCenterX,\n bottomCenterY,\n bottomLeftX,\n bottomLeftY,\n bottomRightX,\n bottomRightY,\n }\n }\n\n isInArea(area: PaneArea) {\n if (super.isDrawingElementLockedOrInvisible()) return false\n const c = this.getCoordinates()\n const left = Math.min(this.scaled.x1, this.scaled.x2, c.centerRightX)\n const right = Math.max(this.scaled.x1, this.scaled.x2, c.centerLeftX)\n const top = Math.min(this.scaled.y1, this.scaled.y2, c.centerRightY)\n const bottom = Math.max(this.scaled.y1, this.scaled.y2, c.centerLeftY)\n if (left < area.scaled.x && area.scaled.x < right && top < area.scaled.y && area.scaled.y < bottom) {\n return true\n }\n return super.isInArea(area)\n }\n\n getIsInChartView() {\n return true\n }\n}\n\nEllipse.prototype.modalConfig = {\n inputs: [\n { type: 'background', name: 'fill' },\n { type: 'border', name: 'border', min: 1, default: {} },\n ],\n}\n\nexport default Ellipse\n","import { DrawingBorder, PaneArea, ResizeByThumbWithTypeAndDifs } from '../../types/shared'\nimport { CanvasElementType } from '../constants/common'\nimport math from '../helpers/math'\nimport PaneModel from '../models/pane'\nimport Element from './element'\nimport Thumb from './thumb'\n\ntype RotatedRectangleCoordiantes = [[number, number], [number, number], [number, number], [number, number]]\n\nexport interface IRotatedRectangleAttrs {\n x1: number\n x2: number\n y1: number\n y2: number\n height: number\n fill: string\n border: DrawingBorder\n}\n\n// OLD RotatedRectangle \"v0\" kept for backward-compatibiluty for old saved ideas\n// current RotatedRectangle tool located in rotated_rectangle folder\nclass RotatedRectangle extends Element {\n static type = CanvasElementType.rotatedRectangle\n\n name = 'Rotated rectangle'\n\n declare scaled: Pick\n\n constructor(values: Partial, model: PaneModel) {\n super(values, model)\n this.resize = this.resize.bind(this)\n const x = this.model.scale.x.invert\n const y = this.model.scale.y.invert\n this._thumbs = [\n new Thumb(\n 'ml',\n () => this.attrs.x1,\n () => this.attrs.y1,\n this.resize,\n this.model\n ),\n new Thumb(\n 'mr',\n () => this.attrs.x2,\n () => this.attrs.y2,\n this.resize,\n this.model\n ),\n new Thumb(\n 'tl',\n () => x(this.getRectCoordinates()[0][0]),\n () => y(this.getRectCoordinates()[0][1]),\n this.resize,\n this.model\n ),\n new Thumb(\n 'tr',\n () => x(this.getRectCoordinates()[1][0]),\n () => y(this.getRectCoordinates()[1][1]),\n this.resize,\n this.model\n ),\n new Thumb(\n 'bl',\n () => x(this.getRectCoordinates()[2][0]),\n () => y(this.getRectCoordinates()[2][1]),\n this.resize,\n this.model\n ),\n new Thumb(\n 'br',\n () => x(this.getRectCoordinates()[3][0]),\n () => y(this.getRectCoordinates()[3][1]),\n this.resize,\n this.model\n ),\n ]\n const boundingPointKeys = this.getBoundingPointKeys()\n this.scale({ x: [...boundingPointKeys.x, 'height'], y: boundingPointKeys.y })\n }\n\n getDefaults() {\n const { ElementSettings } = this.getChartLayoutSettings()\n return {\n fill: ElementSettings.defaultFill,\n border: {\n width: 1,\n color: ElementSettings.Colors.border,\n },\n } as Partial