>(() => {})\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 React from 'react'\n\nexport function useForceUpdate() {\n const [forceUpdateKey, increment] = React.useState(0)\n const forceUpdate = React.useCallback(() => {\n increment((prev) => prev + 1)\n }, [])\n return { forceUpdate, forceUpdateKey }\n}\n","import React from 'react'\n\nimport { ObjectHash } from '../../../types/shared'\nimport { CanvasElementType } from '../../constants/common'\nimport ChartLayoutModel from '../../models/chart_layout'\nimport Quote from '../../models/quote'\nimport { GlobalState, useGlobalState } from '../../utils/global-state'\n\ninterface ChartLayoutModelGlobalState {\n chartLayoutModel: ChartLayoutModel | null\n chartLayoutModelConfigSnapshot: ObjectHash | null\n chartLayoutModelConfigSnapshotToCompare: ObjectHash | null\n lastGlobalRerender: number\n}\n\nexport const chartLayoutGlobalState = new GlobalState({\n chartLayoutModel: null,\n chartLayoutModelConfigSnapshot: null,\n chartLayoutModelConfigSnapshotToCompare: null,\n lastGlobalRerender: Date.now(),\n})\n\nconst CONFIG_PROPS_TO_OMIT = ['width', 'height', 'leftOffset', 'zoomFactor']\nconst CANVAS_ELEMENT_TYPES: string[] = Object.values(CanvasElementType)\n\nfunction getConfigSnapshotToCompare(chartLayoutModel: ChartLayoutModel | null) {\n if (!chartLayoutModel) {\n return null\n }\n const config = chartLayoutModel.toConfig(CONFIG_PROPS_TO_OMIT)\n return {\n ...config,\n charts: config.charts.map((chart) => ({\n ...chart,\n panes: chart.panes.map((pane) => ({\n ...pane,\n elements: pane.elements.filter(({ type }) => !CANVAS_ELEMENT_TYPES.includes(type)),\n })),\n })),\n }\n}\n\nexport function useChartLayoutGlobalModel() {\n const [state, setState] = useGlobalState(chartLayoutGlobalState)\n const getIsConfigChanged = () =>\n JSON.stringify(state.chartLayoutModelConfigSnapshotToCompare) !==\n JSON.stringify(getConfigSnapshotToCompare(state.chartLayoutModel))\n const getIsConfigChangedRef = React.useRef(getIsConfigChanged)\n\n getIsConfigChangedRef.current = getIsConfigChanged\n\n return React.useMemo(\n () => ({\n ...state,\n getIsConfigChanged: () => getIsConfigChangedRef.current(),\n setChartLayoutModel: (chartLayoutModel: ChartLayoutModel) => {\n setState({\n chartLayoutModel,\n chartLayoutModelConfigSnapshot: chartLayoutModel.toConfig(),\n chartLayoutModelConfigSnapshotToCompare: getConfigSnapshotToCompare(chartLayoutModel),\n })\n },\n generateNewLayoutModelConfigSnapshot: () => {\n if (state.chartLayoutModel) {\n setState({\n chartLayoutModelConfigSnapshot: state.chartLayoutModel.toConfig(),\n chartLayoutModelConfigSnapshotToCompare: getConfigSnapshotToCompare(state.chartLayoutModel),\n })\n }\n },\n getChartLayoutModelConfig: ({ fallback }: { fallback: ObjectHash }) =>\n state.chartLayoutModelConfigSnapshot ?? fallback,\n forceGlobalRerender: () => {\n Quote.deleteAll()\n /*\n * We don't want to override chartLayoutModelConfigSnapshot to null\n * because it is most likely used to build new chart layout model\n * */\n setState({\n lastGlobalRerender: Date.now(),\n chartLayoutModel: null,\n chartLayoutModelConfigSnapshotToCompare: null,\n })\n },\n }),\n [state, setState]\n )\n}\n","import React from 'react'\n\nimport { ObjectHash } from '../../types/shared'\nimport { useForceUpdate } from './force-update'\n\ntype SubscriberFunc = (value: T) => void\n\nexport class GlobalState {\n value: StateType\n subscribers: Array> = []\n\n constructor(initialValue: StateType = JSON.parse('{}')) {\n this.value = initialValue\n }\n\n getValue = () => this.value\n\n setValue = (newState: Partial, shouldReplace = false) => {\n this.value = shouldReplace ? (newState as StateType) : { ...this.value, ...newState }\n\n this.subscribers.forEach((subscriber) => {\n subscriber(this.value)\n })\n }\n\n subscribe = (itemToSubscribe: SubscriberFunc) => {\n if (this.subscribers.indexOf(itemToSubscribe) > -1) {\n // Already subsribed\n return\n }\n this.subscribers.push(itemToSubscribe)\n }\n\n unsubscribe = (itemToUnsubscribe: SubscriberFunc) => {\n this.subscribers = this.subscribers.filter((subscriber) => subscriber !== itemToUnsubscribe)\n }\n}\n\nexport function useGlobalState>(\n globalState: GlobalState\n): [state: T, setState: SubscriberFunc>] {\n const { forceUpdate } = useForceUpdate()\n const state = globalState.getValue()\n\n React.useEffect(() => {\n globalState.subscribe(forceUpdate)\n return function () {\n globalState.unsubscribe(forceUpdate)\n }\n }, [forceUpdate, globalState])\n\n const setState = React.useCallback(\n (value: Partial, shouldReplace = false) => {\n globalState.setValue(value, shouldReplace)\n },\n [globalState]\n )\n\n return [state, setState]\n}\n","import { ObjectHash } from '../../types/shared'\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nexport const decodeQueryString = = ObjectHash>(...args): T =>\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n window.FLibs.decodeQueryString(...args)\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nexport const encodeQueryString = (...args) => window.FLibs.encodeQueryString(...args)\n","import { IModalConfigInput, Instrument, Position } from '../../../types/shared'\nimport BaseChart from '../../charts/base_chart'\nimport { ChartElementType, IndicatorType, OverlayType, SpecificChartFunctionality } from '../../constants/common'\nimport Indicator from '../../indicators/indicator'\nimport ChartLayout from '../../models/chart_layout'\nimport ChartLayoutModel from '../../models/chart_layout'\nimport Element from '../../models/element'\nimport Overlay from '../../overlays/overlay'\nimport { getRGBAValueFromValidColorString } from '../../utils/colors'\nimport { decodeQueryString, encodeQueryString } from '../../utils/query_string'\nimport { getResponseChartType, removeEmptyIndicatorsAndOverlays } from './chart/model-manipulation'\n\nexport interface IIndicatorsValue {\n elementInstance: Indicator\n position: Position\n paneIndex: number\n}\n\nexport const getOverlayAttributesConfig = (overlay: Overlay) => {\n const parameters: string[] = []\n const color: string[] = []\n overlay.getModalConfig().inputs.forEach((input: IModalConfigInput) => {\n if (input.type === 'color') {\n color.push(getRGBAValueFromValidColorString(input.value.toString()))\n } else {\n parameters.push(input.value.toString())\n }\n })\n return {\n type: overlay.type,\n period: parameters.join(','),\n color: color.join('|'),\n }\n}\n\nexport const getObjForSubmit = (chartLayoutModel: ChartLayout) => {\n const chartModel = chartLayoutModel.charts().first()\n const quote = chartModel.quote()\n const chartObj = chartModel.toObject()\n const chartElement = chartLayoutModel\n .charts()\n .first()\n .getAllElements()\n .find((element: Element) => element.isChart())!.instance as BaseChart\n const overlays = chartElement.overlays\n .filter((overlay) => overlay.type !== OverlayType.None)\n .map((overlay) => {\n const overlayAttrsConfig = getOverlayAttributesConfig(overlay)\n return {\n name: overlayAttrsConfig.type.replace('overlays/', ''),\n parameters: overlayAttrsConfig.period,\n color: overlayAttrsConfig.color,\n }\n })\n const indicators: IIndicatorsValue[] = []\n\n let chartIndex: number\n chartModel.getAllPanes().forEach((pane, paneIndex) => {\n pane.getAllElements().forEach((element) => {\n if (element.isChart()) {\n chartIndex = paneIndex\n }\n if (element.isIndicator()) {\n if (element.instance.type !== IndicatorType.None) {\n indicators.push({\n // @ts-expect-error - Element model expect instance as CanvasElement but can receive CanvaseElement || IndicatorElement\n elementInstance: element.instance,\n position: chartIndex === undefined ? Position.Above : Position.Below,\n })\n }\n }\n })\n })\n\n const response = {\n settings: {\n premarket: quote.premarket,\n aftermarket: quote.aftermarket,\n scale: chartModel.scale,\n\n style: getResponseChartType(chartElement.type as ChartElementType),\n overlays,\n indicators: indicators.map((indicator) => {\n const parameters: string[] = []\n indicator.elementInstance.getModalConfig().inputs.forEach((input: IModalConfigInput) => {\n parameters.push(input.value.toString())\n })\n return {\n parameters: parameters.join(','),\n position: indicator.position,\n name: indicator.elementInstance.type.replace('indicators/', ''),\n }\n }),\n },\n instrument: [SpecificChartFunctionality.quotePage, SpecificChartFunctionality.chartPage].includes(\n chartLayoutModel.specificChartFunctionality\n )\n ? Instrument.Stock\n : (chartObj.instrument as Instrument),\n }\n return response\n}\n\nexport const isChartModelValid = (chartLayoutModel: ChartLayout) => {\n removeEmptyIndicatorsAndOverlays(chartLayoutModel)\n let isValid = true\n const chartModel = chartLayoutModel.charts().first()\n const chartElement = chartModel.getAllElements().find((element: Element) => element.isChart())!.instance as BaseChart\n chartElement.overlays.forEach((overlay) => {\n overlay.getModalConfig().inputs.forEach((input: IModalConfigInput) => {\n if (!overlay.getIsValid(input.name)) isValid = false\n })\n })\n\n chartModel.getAllElements().forEach((element) => {\n if (element.isIndicator()) {\n // @ts-expect-error - Element model expect instance as CanvasElement but can receive CanvaseElement || IndicatorElement\n const elementInstance = element.instance as Indicator\n elementInstance.getModalConfig().inputs.forEach((input: IModalConfigInput) => {\n if (!elementInstance.getIsValid(input.name)) isValid = false\n })\n }\n })\n return isValid\n}\n\nconst getQuoteUrlChartType = (chartElementType: ChartElementType) => {\n switch (chartElementType) {\n case ChartElementType.LineChart:\n return 'l'\n case ChartElementType.OhlcChart:\n return 'o'\n case ChartElementType.HeikinAshi:\n return 'ha'\n case ChartElementType.HollowCandleStick:\n return 'hc'\n case ChartElementType.CandleStick:\n default:\n return 'c'\n }\n}\n\nexport const handleUrlUpdateOnSettingsSave = (chartLayoutModel: ChartLayoutModel) => {\n if (chartLayoutModel.specificChartFunctionality === SpecificChartFunctionality.quotePage) {\n const chartType =\n chartLayoutModel &&\n (chartLayoutModel\n ?.charts()\n .first()\n ?.getAllElements()\n .find((element: Element) => element.isChart())?.instance.type as ChartElementType)\n const encodeSearchString = encodeQueryString({ ...decodeQueryString(), ty: getQuoteUrlChartType(chartType) })\n document.location = `/quote.ashx?${encodeSearchString}`\n }\n}\n","import {\n ChartConfigChartPaneElement,\n CustomSpineEvents,\n ObjectHash,\n OverlayConfigObject,\n Position,\n} from '../../../../types/shared'\nimport BaseChart from '../../../charts/base_chart'\nimport { chartsByType } from '../../../charts/charts'\nimport {\n ChartElementType,\n IndicatorType,\n OverlayType,\n PANE_HEIGHT_DEFAULT,\n ScaleType,\n SpecificChartFunctionality,\n} from '../../../constants/common'\nimport { indicatorsByType } from '../../../indicators/indicators'\nimport Chart from '../../../models/chart'\nimport ChartLayoutModel from '../../../models/chart_layout'\nimport Element from '../../../models/element'\nimport Quote from '../../../models/quote'\nimport { QuoteFetchType } from '../../../models/quote/constants'\nimport Overlay from '../../../overlays/overlay'\nimport { overlaysByType } from '../../../overlays/overlays'\nimport { isForexFuturesCryptoPage } from '../../../utils/chart'\nimport { IIndicatorsValue, getOverlayAttributesConfig } from '../helpers'\n\nexport const handleTypeChange = ({\n type,\n chartLayoutModel,\n}: {\n type: ChartElementType\n chartLayoutModel: ChartLayoutModel\n}) => {\n const elements = chartLayoutModel.getAllElements()\n elements.forEach((element) => {\n if (element.isChart() && element.instance.attrs.type !== type) {\n const pane = element.pane()\n const instance = chartsByType[type].fromObject(\n {\n ...element.instance.attrs,\n type,\n },\n pane\n )\n element.replace(instance)\n }\n })\n}\n\nexport const handleScaleChange = ({\n scale,\n chartLayoutModel,\n}: {\n scale: ScaleType\n chartLayoutModel: ChartLayoutModel\n}) => {\n chartLayoutModel.getAllCharts().forEach((chartModel) => {\n chartModel.updateAttribute('scale', scale)\n })\n}\n\nexport const handleQuoteAttributeChange = ({\n attributes,\n chartLayoutModel,\n}: {\n attributes: Partial>\n chartLayoutModel: ChartLayoutModel\n}) => {\n const attributesToChange = Object.keys(attributes) as T[]\n chartLayoutModel.getAllCharts().forEach((chart) => {\n const quote = chart.quote()\n const isChanged = attributesToChange.some((attribute) => attributes[attribute] !== quote[attribute])\n if (isChanged) {\n quote.updateAttributes(attributes)\n quote.fetchData({ fetchType: QuoteFetchType.Refetch })\n }\n })\n}\n\nexport const handleChartAttributeChange = ({\n attributes,\n chartLayoutModel,\n}: {\n attributes: Partial>\n chartLayoutModel: ChartLayoutModel\n}) => {\n chartLayoutModel.getAllCharts().forEach((chart) => {\n chart.updateAttributes(attributes)\n })\n}\n\nexport const handleOverlayReplace = ({\n overlayType,\n overlayIndex,\n chartLayoutModel,\n}: {\n overlayType: OverlayType\n overlayIndex: number\n chartLayoutModel: ChartLayoutModel\n}) => {\n const elements = chartLayoutModel.getAllElements()\n elements.forEach((element) => {\n if (element.isChart()) {\n const instance = overlaysByType[overlayType].fromObject(\n {\n type: overlayType,\n },\n element.pane()\n )\n\n const { inputs } = instance.getModalConfig()\n const obj: ObjectHash = {}\n inputs.forEach((element) => {\n obj[element.name] = element.value\n })\n instance.set(obj)\n const elementInstance = element.instance as BaseChart\n elementInstance.overlays[overlayIndex] = instance\n elementInstance.setOverlays(elementInstance.overlays)\n elementInstance.attrs.overlays[overlayIndex] = getOverlayAttributesConfig(instance)\n\n if (overlayType === OverlayType.Patterns) {\n handleQuoteAttributeChange({ attributes: { hasPatterns: true }, chartLayoutModel })\n }\n elementInstance.setupCache()\n }\n })\n}\n\nexport const handleRemoveOverlayElement = ({\n overlayIndex,\n chartLayoutModel,\n}: {\n overlayIndex: number\n chartLayoutModel: ChartLayoutModel\n}) => {\n const elements = chartLayoutModel.getAllElements()\n elements.forEach((element) => {\n if (element.isChart()) {\n const elementInstance = element.instance as BaseChart\n if (elementInstance.overlays[overlayIndex].type === OverlayType.Patterns) {\n const quote = element.pane().chart().quote()\n quote.updateAttribute('hasPatterns', false)\n }\n elementInstance.removeOverlay(elementInstance.overlays[overlayIndex])\n elementInstance.setupCache()\n }\n })\n}\n\nexport const handleAddOverlayElement = ({\n chartLayoutModel,\n overlayType,\n attrs,\n}: {\n chartLayoutModel: ChartLayoutModel\n overlayType?: OverlayType\n attrs?: ObjectHash\n}) => {\n const elements = chartLayoutModel.getAllElements()\n const overlayAttrs = attrs ?? { type: overlaysByType[OverlayType.None].type }\n elements.forEach((element) => {\n if (element.isChart()) {\n const overlay = overlaysByType[overlayType || OverlayType.None].fromObject(overlayAttrs, element.pane())\n const elementInstance = element.instance as BaseChart\n elementInstance.addOverlay(overlay)\n elementInstance.attrs.overlays = [...elementInstance.attrs.overlays, overlayAttrs] as OverlayConfigObject[]\n if (overlayType === OverlayType.Patterns) {\n handleQuoteAttributeChange({ attributes: { hasPatterns: true }, chartLayoutModel })\n }\n }\n })\n}\n\nexport const handleUpdateOverlayAttributes = ({\n chartLayoutModel,\n overlayIndex,\n attrs = {},\n}: {\n chartLayoutModel: ChartLayoutModel\n overlayIndex: number\n attrs?: ObjectHash\n}) => {\n const elements = chartLayoutModel.getAllElements()\n elements.forEach((element) => {\n if (element.isChart()) {\n const elementInstance = element.instance as BaseChart\n elementInstance.overlays[overlayIndex].set(attrs)\n elementInstance.setOverlays(elementInstance.overlays)\n elementInstance.setupCache()\n }\n })\n}\n\nexport const handleIndicatorReplace = ({\n value,\n paneIndex,\n chartLayoutModel,\n}: {\n value: IndicatorType\n paneIndex: number\n chartLayoutModel: ChartLayoutModel\n}) => {\n const charts = chartLayoutModel.getAllCharts()\n charts.forEach((chart) => {\n const indicatorElement = chart\n .getAllPanes()\n [paneIndex].getAllElements()\n .find((el) => el.isIndicator())\n\n if (!indicatorElement) return\n const instance = indicatorsByType[value].fromObject(\n {\n type: value,\n },\n indicatorElement.instance.model\n )\n const { inputs } = instance.getModalConfig()\n const obj: ObjectHash = {}\n inputs.forEach((input) => {\n obj[input.name] = input.value\n })\n instance.set(obj)\n // @ts-expect-error - Element model expect instance as CanvasElement but can receive CanvaseElement || IndicatorElement\n indicatorElement.replace(instance)\n chart.trigger(CustomSpineEvents.IndicatorsChange)\n })\n}\n\nexport const handleRemoveIndicatorPane = ({\n paneIndex,\n chartLayoutModel,\n}: {\n paneIndex: number\n chartLayoutModel: ChartLayoutModel\n}) => {\n const charts = chartLayoutModel.getAllCharts()\n charts.forEach((chart) => {\n const indicatorElement = chart\n .getAllPanes()\n [paneIndex].getAllElements()\n .find((el) => el.isIndicator())\n\n if (indicatorElement) {\n indicatorElement.pane().destroyCascade()\n\n if (chartLayoutModel.specificChartFunctionality !== SpecificChartFunctionality.chartPage) {\n chart.getAllElements().forEach((element) => {\n element.pane().resetHeight()\n })\n const chartHeight = chart.getAllPanes().reduce((previous, current) => previous + current.height, 0)\n chart.updateAttribute('height', chartHeight)\n }\n chart.trigger(CustomSpineEvents.IndicatorsChange)\n }\n })\n}\n\nexport const handleAddIndicatorPane = ({\n chartLayoutModel,\n indicatorElements,\n}: {\n chartLayoutModel: ChartLayoutModel\n indicatorElements?: Array & { type: IndicatorType }>\n}) => {\n const charts = chartLayoutModel.getAllCharts()\n charts.forEach((chart) => {\n chart.getAllElements().forEach((element) => {\n element.pane().resetHeight()\n })\n const paneProperties = {\n height: PANE_HEIGHT_DEFAULT.indicator,\n chart,\n isFirstPane: false,\n elements: indicatorElements ? indicatorElements : [{ type: IndicatorType.None }],\n }\n const pane = chart.createPaneCascade(paneProperties)\n\n if (chartLayoutModel.specificChartFunctionality !== SpecificChartFunctionality.chartPage) {\n const chartHeight = chart.getAllPanes().reduce((previous, current) => previous + current.height, 0)\n chart.updateAttribute('height', chartHeight)\n }\n\n chart.trigger('createPane', pane, paneProperties)\n })\n}\n\nexport const getAllOverlays = (chartLayoutModel: ChartLayoutModel) => {\n const chartElement = chartLayoutModel\n .charts()\n .first()\n .getAllElements()\n .find((element: Element) => element.isChart())!.instance as BaseChart\n return chartElement.overlays.filter((overlay) => overlay.type !== OverlayType.None)\n}\n\nexport const getAllIndicators = (chartLayoutModel: ChartLayoutModel) => {\n const indicators: IIndicatorsValue[] = []\n const chartModel = chartLayoutModel.charts().first()\n let chartIndex: number\n chartModel.getAllPanes().forEach((pane, paneIndex) => {\n pane.getAllElements().forEach((element) => {\n if (element.isChart()) {\n chartIndex = paneIndex\n }\n if (element.isIndicator()) {\n if (element.instance.type !== IndicatorType.None) {\n indicators.push({\n // @ts-expect-error - Element model expect instance as CanvasElement but can receive CanvaseElement || IndicatorElement\n elementInstance: element.instance,\n position: chartIndex === undefined ? Position.Above : Position.Below,\n paneIndex: paneIndex,\n })\n }\n }\n })\n })\n return indicators\n}\n\nexport const removeEmptyIndicatorsAndOverlays = (chartLayoutModel: ChartLayoutModel) => {\n chartLayoutModel.getAllElements().forEach((element) => {\n if (element.isChart()) {\n const elementInstance = element.instance as BaseChart\n for (let i = elementInstance.overlays.length - 1; i >= 0; i--) {\n if (elementInstance.overlays[i].type === OverlayType.None) {\n elementInstance.removeOverlay(elementInstance.overlays[i])\n }\n }\n }\n if (element.isIndicator()) {\n // @ts-expect-error - Element model expect instance as CanvasElement but can receive CanvaseElement || IndicatorElement\n const elementInstance = element.instance as Indicator\n if (elementInstance.type === IndicatorType.None) {\n const pane = element.pane()\n const chart = pane.chart()\n if (chartLayoutModel.specificChartFunctionality !== SpecificChartFunctionality.chartPage) {\n chart.updateAttribute('height', chart.height - pane.height)\n }\n pane.destroyCascade()\n }\n }\n })\n}\n\nexport const handleRestoreDefault = ({\n chartLayoutModel,\n forceUpdate,\n}: {\n chartLayoutModel: ChartLayoutModel\n forceUpdate: () => void\n}) => {\n const DEFAULT_EXTENDED_HOURS = { premarket: true, aftermarket: true }\n const DEFAULT_OVERLAYS = [\n { type: OverlayType.Sma, period: '20', color: '#dc32b363' },\n { type: OverlayType.Sma, period: '50', color: '#ff8f33c6' },\n { type: OverlayType.Sma, period: '200', color: '#dcb3326d' },\n ]\n if (!isForexFuturesCryptoPage(chartLayoutModel.specificChartFunctionality)) {\n DEFAULT_OVERLAYS.push({ type: OverlayType.Patterns, period: '', color: '#87ceef|#dc9fe5' })\n }\n\n const DEFAULT_INDICATORS = [\n { height: PANE_HEIGHT_DEFAULT.indicator, elements: [{ type: IndicatorType.Rsi, period: '14' }] },\n ]\n if (chartLayoutModel.specificChartFunctionality === SpecificChartFunctionality.futuresPage) {\n DEFAULT_INDICATORS.unshift({\n height: PANE_HEIGHT_DEFAULT.indicator,\n elements: [{ type: IndicatorType.Cot, period: '' }],\n })\n }\n\n removeEmptyIndicatorsAndOverlays(chartLayoutModel)\n const overlays = getAllOverlays(chartLayoutModel)\n for (let i = overlays.length - 1; i >= 0; i--) {\n handleRemoveOverlayElement({ overlayIndex: i, chartLayoutModel })\n }\n\n handleScaleChange({ scale: ScaleType.Linear, chartLayoutModel })\n handleTypeChange({ type: ChartElementType.CandleStick, chartLayoutModel })\n handleChartAttributeChange({ attributes: DEFAULT_EXTENDED_HOURS, chartLayoutModel })\n handleQuoteAttributeChange({ attributes: DEFAULT_EXTENDED_HOURS, chartLayoutModel })\n\n DEFAULT_OVERLAYS.forEach((overlay) => {\n handleAddOverlayElement({\n chartLayoutModel,\n overlayType: overlay.type,\n attrs: { ...overlay },\n })\n })\n\n const indicators = getAllIndicators(chartLayoutModel)\n for (let i = indicators.length - 1; i >= 0; i--) {\n handleRemoveIndicatorPane({ paneIndex: indicators[i].paneIndex, chartLayoutModel })\n }\n DEFAULT_INDICATORS.forEach((indicator) => {\n handleAddIndicatorPane({\n chartLayoutModel,\n indicatorElements: indicator.elements,\n })\n })\n\n setTimeout(() => {\n forceUpdate()\n })\n}\n\nexport const getResponseChartType = (chartType: ChartElementType) => {\n switch (chartType) {\n case ChartElementType.HeikinAshi:\n return 'heikinashi'\n case ChartElementType.HollowCandleStick:\n return 'hollowcandlestick'\n case ChartElementType.LineChart:\n return 'line'\n case ChartElementType.OhlcChart:\n return 'ohlc'\n case ChartElementType.CandleStick:\n default:\n return 'candlestick'\n }\n}\n\nexport const getChartElementTypeFromResponseType = (chartResponseType: string | null) =>\n chartResponseType === null\n ? null\n : Object.values(ChartElementType).find(\n (chartType: ChartElementType) => chartResponseType === getResponseChartType(chartType)\n )\n","import * as React from 'react'\n\nimport { Checkbox, Label } from '../../../components'\nimport { useForceUpdate } from '../../../utils/force-update'\nimport { useChartLayoutGlobalModel } from '../chart-layout-model'\nimport { handleChartAttributeChange, handleQuoteAttributeChange } from './model-manipulation'\n\nexport function ChartExtendedHoursToggle() {\n const { forceUpdate } = useForceUpdate()\n const { chartLayoutModel } = useChartLayoutGlobalModel()\n const quote = chartLayoutModel?.charts().first()?.quote()\n\n const onExtendedHoursChange = React.useCallback(\n ({ extendedHoursType, checked }: { extendedHoursType: 'premarket' | 'aftermarket'; checked: boolean }) => {\n if (chartLayoutModel) {\n handleChartAttributeChange({ attributes: { [extendedHoursType]: checked }, chartLayoutModel })\n handleQuoteAttributeChange({ attributes: { [extendedHoursType]: checked }, chartLayoutModel })\n forceUpdate()\n }\n },\n [forceUpdate, chartLayoutModel]\n )\n\n if (!chartLayoutModel) return null\n\n return (\n <>\n \n \n ) =>\n onExtendedHoursChange({ extendedHoursType: 'premarket', checked: e.target.checked })\n }\n >\n Pre-market\n \n ) =>\n onExtendedHoursChange({ extendedHoursType: 'aftermarket', checked: e.target.checked })\n }\n >\n After-market\n \n
\n \n )\n}\n","import * as React from 'react'\n\nimport { Select, SelectOption } from '../../../components'\nimport { ScaleLabel, ScaleType } from '../../../constants/common'\nimport { useForceUpdate } from '../../../utils/force-update'\nimport { useChartLayoutGlobalModel } from '../chart-layout-model'\nimport { handleScaleChange } from './model-manipulation'\n\ninterface IChartScale {\n value: ScaleType\n label: string\n}\n\nconst DEFAULT_SCALES: IChartScale[] = [\n { value: ScaleType.Linear, label: ScaleLabel[ScaleType.Linear] },\n { value: ScaleType.Percentage, label: ScaleLabel[ScaleType.Percentage] },\n { value: ScaleType.Logarithmic, label: ScaleLabel[ScaleType.Logarithmic] },\n]\n\nexport function ChartScaleSelect() {\n const { forceUpdate } = useForceUpdate()\n const { chartLayoutModel } = useChartLayoutGlobalModel()\n\n const onScaleChange = React.useCallback(\n (scale: ScaleType) => {\n if (chartLayoutModel) {\n handleScaleChange({ scale, chartLayoutModel })\n forceUpdate()\n }\n },\n [chartLayoutModel, forceUpdate]\n )\n\n if (!chartLayoutModel) return null\n\n return (\n {\n onScaleChange(item.value)\n }}\n value={chartLayoutModel?.charts().first()?.scale}\n items={DEFAULT_SCALES}\n className=\"w-full\"\n size=\"medium\"\n >\n {DEFAULT_SCALES.map((item) => (\n \n {item.label}\n \n ))}\n \n )\n}\n","import * as React from 'react'\n\nimport { chartsByType } from '../../../charts/charts'\nimport { Select, SelectOption } from '../../../components'\nimport { ChartElementType } from '../../../constants/common'\nimport Element from '../../../models/element'\nimport { useForceUpdate } from '../../../utils/force-update'\nimport { useChartLayoutGlobalModel } from '../chart-layout-model'\nimport { handleTypeChange } from './model-manipulation'\n\ninterface IChartType {\n value: ChartElementType\n label?: string\n iconName?: string\n}\n\nconst DEFAULT_TYPES = Object.keys(chartsByType)\n .filter(\n (item) =>\n ![ChartElementType.PerfChart, ChartElementType.MultiLineChart, ChartElementType.MarketSentiment].includes(\n item as ChartElementType\n )\n )\n .map((item) => ({\n value: item,\n label: chartsByType[item as ChartElementType].label,\n iconName: chartsByType[item as ChartElementType].iconName,\n })) as IChartType[]\n\nexport function ChartStyleSelect() {\n const { forceUpdate } = useForceUpdate()\n const { chartLayoutModel } = useChartLayoutGlobalModel()\n const chartType =\n chartLayoutModel &&\n chartLayoutModel\n ?.charts()\n .first()\n ?.getAllElements()\n .find((element: Element) => element.isChart())?.instance.type\n\n const onTypeChange = React.useCallback(\n (type: ChartElementType) => {\n if (chartLayoutModel) {\n handleTypeChange({ type, chartLayoutModel })\n forceUpdate()\n }\n },\n [chartLayoutModel, forceUpdate]\n )\n\n if (!chartLayoutModel) return null\n\n return (\n {\n onTypeChange(item.value)\n }}\n value={chartType}\n items={DEFAULT_TYPES}\n className=\"w-full\"\n size=\"medium\"\n leftContent={DEFAULT_TYPES.find((item) => item.value === chartType)?.iconName}\n >\n {DEFAULT_TYPES.map((item) => (\n \n {item.label}\n \n ))}\n \n )\n}\n","import classnames from 'classnames'\nimport * as React from 'react'\n\nimport { IModalConfigInput, Position } from '../../../../types/shared'\nimport { Button, ButtonGroup, Icon, InnerState, Label, Select, SelectOption, TooltipInput } from '../../../components'\nimport { IndicatorType, SpecificChartFunctionality } from '../../../constants/common'\nimport Indicator from '../../../indicators/indicator'\nimport { indicatorsByType } from '../../../indicators/indicators'\nimport { useForceUpdate } from '../../../utils/force-update'\nimport { useChartLayoutGlobalModel } from '../chart-layout-model'\nimport { handleAddIndicatorPane, handleIndicatorReplace, handleRemoveIndicatorPane } from './model-manipulation'\n\ninterface IIndicatorType {\n value: IndicatorType\n label: string\n}\n\ninterface IIndicatorsValue {\n elementInstance: Indicator\n position: Position\n paneIndex: number\n paneId: string\n}\n\nconst INDICATOR_LIST_PROPS = { popoverMaxHeight: 415 }\n\nexport function IndicatorsSelect() {\n const { forceUpdate } = useForceUpdate()\n const { chartLayoutModel } = useChartLayoutGlobalModel()\n const indicators: IIndicatorsValue[] = []\n\n // Re-render of this component is controlled by forceUpdate()\n // We can't use memo because we need to run it on every time we call forceUpdate,\n // if it is a memo its only dependency is chartLayoutModel and object reference never change so memo won't update\n let chartIndex: number\n chartLayoutModel\n ?.charts()\n .first()\n ?.getAllPanes()\n .forEach((pane, paneIndex) => {\n pane.getAllElements().forEach((element) => {\n if (element.isChart()) {\n chartIndex = paneIndex\n }\n if (element.isIndicator()) {\n indicators.push({\n // @ts-expect-error - Element model expect instance as CanvasElement but can receive CanvaseElement || IndicatorElement\n elementInstance: element.instance,\n position: chartIndex === undefined ? Position.Above : Position.Below,\n paneIndex: paneIndex,\n paneId: pane.id,\n })\n }\n })\n })\n indicators.sort((a, b) => Number(a.paneId.replace('c-', '')) - Number(b.paneId.replace('c-', '')))\n\n const DEFAULT_INDICATORS = React.useMemo(() => {\n if (!chartLayoutModel) return []\n const isFuturesPage = chartLayoutModel.specificChartFunctionality === SpecificChartFunctionality.futuresPage\n const ignoredIndicators = [IndicatorType.None, IndicatorType.Indicator, !isFuturesPage && IndicatorType.Cot]\n\n return Object.keys(indicatorsByType)\n .filter((item) => !ignoredIndicators.filter(Boolean).includes(item as IndicatorType))\n .map((item) => ({ value: item as IndicatorType, label: indicatorsByType[item as IndicatorType].label }))\n }, [chartLayoutModel])\n\n const onIndicatorSelect = React.useCallback(\n ({ value, paneIndex }: { value: IndicatorType; paneIndex: number }) => {\n if (chartLayoutModel) {\n handleIndicatorReplace({ value, paneIndex, chartLayoutModel })\n forceUpdate()\n }\n },\n [chartLayoutModel, forceUpdate]\n )\n\n const onIndicatorDelete = React.useCallback(\n (paneIndex: number) => {\n if (chartLayoutModel) {\n handleRemoveIndicatorPane({ paneIndex, chartLayoutModel })\n forceUpdate()\n }\n },\n [chartLayoutModel, forceUpdate]\n )\n\n const onIndicatorAdd = React.useCallback(() => {\n if (chartLayoutModel) {\n handleAddIndicatorPane({ chartLayoutModel })\n // because of race condition if we call forceUpdate without timeout new select won't appear in setting dialog\n setTimeout(() => forceUpdate())\n }\n }, [chartLayoutModel, forceUpdate])\n\n const onIndicatorValueChange = ({\n value,\n paneIndex,\n indicatorInput,\n }: {\n value: string\n paneIndex: number\n indicatorInput: IModalConfigInput\n }) => {\n if (chartLayoutModel) {\n const charts = chartLayoutModel.getAllCharts()\n charts.forEach((chart) => {\n const indicatorElement = chart\n .getAllPanes()\n [paneIndex].getAllElements()\n .find((el) => el.isIndicator())\n if (!indicatorElement) return\n indicatorElement.instance.set({\n [indicatorInput.name]: indicatorInput.type === 'number' ? Number(value) : value,\n })\n })\n }\n }\n\n const onIndicatorPositionChange = React.useCallback(\n ({ direction, paneIndex, currentPosition }: { direction: string; paneIndex: number; currentPosition: string }) => {\n if (chartLayoutModel && currentPosition !== direction) {\n const charts = chartLayoutModel.getAllCharts()\n charts.forEach((chart) => {\n const panes = chart.getAllPanes()\n if (direction === Position.Above) {\n panes[paneIndex].move(Position.Above)\n }\n\n if (direction === Position.Below) {\n panes[paneIndex].move(Position.Below)\n }\n })\n\n forceUpdate()\n }\n },\n [chartLayoutModel, forceUpdate]\n )\n\n if (!chartLayoutModel) return null\n\n return (\n <>\n \n \n {indicators.map((indicatorObj, indicatorIndex) => {\n const { elementInstance, position, paneIndex } = indicatorObj\n const indicatorConfig = elementInstance.getModalConfig()\n const { inputsErrorMessages } = indicatorConfig\n return (\n
\n {\n onIndicatorSelect({ value: item.value, paneIndex })\n }}\n hasPopoverButtonWidthLimit={false}\n >\n {DEFAULT_INDICATORS.map((item) => (\n \n {item.label}\n \n ))}\n \n\n \n {indicatorConfig.inputs && (\n
\n {elementInstance.type !== IndicatorType.Perf && indicatorConfig.inputs.length < 3 && (\n
\n \n \n )}\n {indicatorConfig.inputs.map((indicatorInput, confIndex) => (\n
\n ) => e.target.value}\n onChange={(e: React.ChangeEvent) => {\n onIndicatorValueChange({ value: e.target.value, paneIndex, indicatorInput })\n }}\n onInvalid={(e: React.BaseSyntheticEvent) => {\n e.target.focus()\n }}\n tooltipContent={\n \n
{indicatorInput.label}
\n {!elementInstance.getIsValid(indicatorInput.name) && (\n
\n {inputsErrorMessages[indicatorInput.name]}\n
\n )}\n
\n {chartElementOverlays?.map((overlay, overlayIndex) => {\n const overlayConfig = overlay.getModalConfig()\n const { inputsErrorMessages } = overlayConfig\n const { otherInputs, colorInputs } = getParsedInputs(overlayConfig.inputs)\n\n return (\n
\n {\n onOverlaySelect({ overlayType: item.value, overlayIndex })\n }}\n hasPopoverButtonWidthLimit={false}\n >\n {DEFAULT_OVERLAYS.map((item) => (\n \n {item.label}\n \n ))}\n \n \n {otherInputs.map((overlayInput, confIndex) => (\n
) => e.target.value}\n onBlur={forceUpdate}\n onChange={(e: React.ChangeEvent) => {\n onOverlayPeriodChange({ value: e.target.value, overlayIndex, overlayInput })\n }}\n onInvalid={(e: React.BaseSyntheticEvent) => {\n e.target.focus()\n }}\n tooltipContent={\n \n
{overlayInput.label}
\n {!overlay.getIsValid(overlayInput.name) && (\n
{inputsErrorMessages[overlayInput.name]}
\n )}\n
\n
\n \n {isActionPending ? 'Saving...' : 'Save'}\n \n {\n confirmationDialogState.show()\n }}\n disabled={isActionPending}\n data-testid=\"chart-settings-reset-defaults-btn\"\n >\n {resetSettingsButtonLabel}\n \n
\n\n
\n {({ checkForUnsavedChangesAndClose }) => (\n }\n data-testid={tabButtonTestId}\n >\n {settingsTabButtonLabel}\n \n )}\n \n\n
\n \n {\n onSettingsReset()\n confirmationDialogState.hide()\n }}\n theme=\"red\"\n >\n Confirm\n \n \n }\n >\n {resetConfirmationText}\n \n \n
\n {title}\n Light Mode\n Dark Mode\n
\n {colors.map(({ label, colorKeys, canSelectAlpha }) => (\n
\n
{label}\n {Object.values(Theme).map((themeValue) => (\n
\n {colorKeys.map((colorKey, index) => {\n let iconKey\n if (colorKeys.length === 2) {\n iconKey = index === 0 ? 'trendingUp' : 'trendingDown'\n }\n return (\n ) => {\n handleColorChange({ color, theme: themeValue, colorKey })\n }}\n />\n )\n })}\n
\n ))}\n
\n ))}\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 DailyChangeDisplayComponent,\n (prevProps, nextProps) => prevProps.chartIndex === nextProps.chartIndex\n)\n","import classnames from 'classnames'\nimport debounce from 'lodash.debounce'\nimport React from 'react'\n\nimport { Instrument } from '../../../types/shared'\nimport { Button, Dropdown, DropdownItem, Icon, Input, useDropdownState } from '../../components'\nimport { getSanitizedTicker } from '../../utils'\nimport fetchApi from '../../utils/fetch_api'\n\ntype FetchCallback = (data: any) => any\ninterface DataType {\n ticker: string\n company: string\n exchange: string\n}\n\ninterface SearchProps {\n focus?: boolean\n ticker: string\n instrument: Instrument\n chartIndex: number\n onTickerSelected: (ticker: string) => void\n}\n\ninterface SearchState {\n input: string\n highlight: string\n data: DataType[]\n focused: boolean\n selected: number\n}\n\nconst handleFetch = async (input: string, callback: FetchCallback) => {\n try {\n const data = await fetchApi({\n location: '/api/suggestions.ashx',\n queryParameters: { input },\n throwOnStatusCodes: [404],\n })\n if (Array.isArray(data)) {\n callback(data)\n }\n } catch {\n // ignore error\n }\n}\n\nclass Search extends React.Component {\n search = debounce((input: string, callback: FetchCallback) => {\n handleFetch(input, callback)\n }, 500)\n\n state = this.getBaseState()\n\n getBaseState() {\n return { input: '', highlight: '', data: [] as DataType[], focused: false, selected: -1 }\n }\n\n handleDebounceCancel = () => {\n this.search.cancel()\n }\n\n render() {\n const focus = !!this.props.focus\n return (\n \n \n \n
\n )\n }\n\n _onChange = (value: string) => {\n const callback = (data: DataType[]) => {\n this.setState({ data: data, highlight: value })\n }\n this.setState({ input: value, selected: -1 })\n if (value === '') {\n callback([])\n return\n }\n this.search(value, callback)\n }\n\n _onFocus = () => {\n this.setState({ focused: true })\n }\n\n _onBlur = () => {\n this.setState({ focused: false })\n }\n\n _onArrowUp = () => {\n if (this.state.selected > 0) {\n const selected = this.state.selected - 1\n this.setState({ selected: selected, input: this.state.data[selected].ticker })\n }\n }\n\n _onArrowDown = () => {\n if (this.state.selected < this.state.data.length - 1) {\n const selected = this.state.selected + 1\n this.setState({ selected: selected, input: this.state.data[selected].ticker })\n }\n }\n\n _onTickerSelected = (ticker: string) => {\n this.setState({\n ...this.getBaseState(),\n focused: this.state.focused,\n })\n this.props.onTickerSelected(ticker)\n }\n}\n\ninterface SearchInputProps {\n data: DataType[]\n focus: boolean\n currentTicker: string\n value: string\n instrument: Instrument\n chartIndex: number\n cancelDebounce: () => void\n onArrowUp: () => void\n onArrowDown: () => void\n onChange: (value: string) => void\n onFocus: (event: React.FocusEvent) => void\n onBlur: (event: React.FocusEvent) => void\n onTickerSelected: (ticker: string) => void\n}\n\nfunction SearchInput(props: SearchInputProps) {\n const { cancelDebounce, value, onTickerSelected, onChange, onArrowUp, onArrowDown } = props\n const dropdownState = useDropdownState({ placement: 'bottom-end' })\n\n const onSubmit = React.useCallback(\n (ev: React.FormEvent) => {\n ev.preventDefault()\n cancelDebounce()\n if (value !== '') {\n const sanitizedValue = getSanitizedTicker(value)\n onTickerSelected(sanitizedValue)\n }\n },\n [cancelDebounce, onTickerSelected, value]\n )\n\n const onInputChange = React.useCallback(\n (ev: React.ChangeEvent) => {\n ev.preventDefault()\n onChange(ev.currentTarget.value.trim())\n },\n [onChange]\n )\n\n const onInputKeyDown = React.useCallback((ev: React.KeyboardEvent) => {\n if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {\n ev.preventDefault()\n }\n }, [])\n\n const onInputKeyUp = React.useCallback(\n (ev: React.KeyboardEvent) => {\n switch (ev.key) {\n case 'ArrowUp':\n ev.preventDefault()\n onArrowUp()\n break\n case 'ArrowDown':\n ev.preventDefault()\n onArrowDown()\n break\n }\n },\n [onArrowUp, onArrowDown]\n )\n\n const detailLink = React.useMemo(() => {\n const ticker = props.currentTicker.replace('@', '')\n\n switch (props.instrument) {\n case Instrument.Stock:\n return `/quote.ashx?t=${ticker}`\n case Instrument.Futures:\n return `/futures_charts.ashx?t=${ticker}`\n case Instrument.Forex:\n return `/forex_charts.ashx?t=${ticker}`\n case Instrument.Crypto:\n return `/crypto_charts.ashx?t=${ticker}`\n }\n }, [props.currentTicker, props.instrument])\n\n return (\n \n )\n}\n\ninterface SuggestionsBoxProps {\n data: DataType[]\n onTickerSelected: (ticker: string) => void\n focused: boolean\n chartIndex: number\n selected: number\n highlight: string\n input: string\n}\n\nclass SuggestionsBox extends React.Component {\n render() {\n const data = this.props.data\n return (\n 0 || this.props.highlight.length > 2) ? 'table' : 'none',\n }}\n cellPadding=\"0\"\n cellSpacing=\"0\"\n >\n \n {data.map((row, index) => (\n \n | \n | \n {row.exchange} | \n \n ))}\n \n \n )\n }\n\n _onClick(ticker: string, e: React.MouseEvent) {\n if (e.button === 0) {\n this.props.onTickerSelected(ticker)\n }\n }\n\n _formatTicker(ticker: string) {\n const hightlight = this.props.highlight.toUpperCase()\n return ticker.replace(hightlight, '' + hightlight + '')\n }\n\n _formatCompany(text: string) {\n const input = this.props.highlight\n const re = new RegExp(this._escapeRegExp(input), 'gi')\n return text.replace(re, function (match) {\n return '' + match + ''\n })\n }\n\n _escapeRegExp(str: string) {\n return str.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')\n }\n}\n\nexport default Search\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'],\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 for (const element of chart.getAllElements()) {\n if (element.isDrawing()) {\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 && chartLayoutModel.isPreserveDrawingsActive) {\n element.instance.updateScales()\n } else {\n element.destroyCascade()\n }\n }\n }\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 // Change all idea quotes to non idea quotes and refetch because we don't need them anymore but they may cause inconsistencies if they are in cache\n const ideaQuotes = chartModel.getAllQuotes().filter((chartQuote) => chartQuote.ideaID)\n ideaQuotes.forEach((quote) => {\n quote.updateAttributes({ ideaID: undefined })\n quote.fetchData({ fetchType: QuoteFetchType.Refetch })\n })\n\n const { ticker, instrument, timeframe } = 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 || ideaQuotes.length > 0) {\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 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 chartLayout = chart?.chart_layout()\n const quote = chart?.quote()\n\n let shouldRecalculateOnCharts = false\n if (chartLayout?.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 (chartLayout?.specificChartFunctionality === SpecificChartFunctionality.quotePage || 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, 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 * as React from 'react'\n\nimport { TIMEFRAME, TIMEFRAME_FAVORITE_DEFAULTS, TIMEFRAME_FAVORITE_DEFAULTS_FREE } from '../../constants/common'\nimport { useSyncLocalStorage } from '../../website-shared'\n\ntype FavoriteTimeframesMap = { [K in TIMEFRAME | 'intraday']?: boolean }\n\nconst LOCAL_STORAGE_KEY = 'favoriteTimeframesMap'\n\nexport function useFavoriteTimeframes(isPremium = true) {\n const { state, setState } = useSyncLocalStorage(\n LOCAL_STORAGE_KEY,\n isPremium ? TIMEFRAME_FAVORITE_DEFAULTS : TIMEFRAME_FAVORITE_DEFAULTS_FREE\n )\n\n const toggleFavoriteTimeframe = React.useCallback(\n (timeframe: TIMEFRAME) => {\n setState((prevState) => ({\n ...prevState,\n [timeframe]: !prevState[timeframe],\n }))\n },\n [setState]\n )\n\n const favoriteTimeframes = React.useMemo(\n () => Object.keys(state).filter((key) => state[key as keyof FavoriteTimeframesMap]),\n [state]\n )\n\n return { favoriteTimeframes, toggleFavoriteTimeframe }\n}\n","import * as React from 'react'\nimport { useLocation } from 'react-router-dom'\n\nimport { ChartsOrQuotePageQueryParams, LAYOUTS, LayoutType, TIMEFRAME } from '../../constants/common'\nimport { useModelState } from '../../model-hooks/use-model-state'\nimport { ChartSyncablePart } from '../../models/chart/contstants'\nimport ChartLayout from '../../models/chart_layout'\nimport { decodeQueryString, encodeQueryString } from '../../utils/query_string'\n\nexport function useChartsPathLocation({\n chartLayoutModel: unwatchedChartLayoutModel,\n chartIndex = -1,\n}: {\n chartLayoutModel: ChartLayout | null\n chartIndex?: number\n}) {\n const location = useLocation()\n const chartLayoutModel = useModelState(unwatchedChartLayoutModel, {\n watchProperties: ['syncChartParts'],\n })\n const hasSyncedTimeframe = React.useMemo(\n () => !!chartLayoutModel?.getIsChartPartInSync(ChartSyncablePart.Timeframe),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [chartLayoutModel?.syncChartParts]\n )\n const hasSyncedTicker = React.useMemo(\n () => !!chartLayoutModel?.getIsChartPartInSync(ChartSyncablePart.Ticker),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [chartLayoutModel?.syncChartParts]\n )\n\n const getChartsToPath = React.useCallback(\n ({\n ticker,\n timeframe,\n dateRange,\n layout,\n }: {\n timeframe?: TIMEFRAME\n dateRange?: string | null\n ticker?: string\n layout?: LayoutType\n }) => {\n if (!chartLayoutModel) {\n return {\n pathname: location.pathname,\n search: '',\n }\n }\n\n const decodedSearch = decodeQueryString(location.search)\n const { count } = LAYOUTS[(layout ?? chartLayoutModel.layout) as LayoutType]\n const urlTickers = decodedSearch.t?.split(',') ?? []\n const urlTimeframes = decodedSearch.p?.split(',') ?? []\n const urlDateRanges = decodedSearch.r?.split(',')\n\n const chartsArrayPlaceholder = Array.from({ length: count })\n const tickers = chartsArrayPlaceholder\n .map((_, index) => {\n const currentTicker = urlTickers[index] ?? urlTickers[urlTickers.length - 1]\n return (chartIndex === index || hasSyncedTicker) && ticker ? ticker : currentTicker\n })\n .join(',')\n const timeframes = chartsArrayPlaceholder\n .map((_, index) => {\n const currentTimeframe = urlTimeframes[index] ?? urlTimeframes[urlTimeframes.length - 1]\n return (chartIndex === index || hasSyncedTimeframe) && timeframe ? timeframe : currentTimeframe\n })\n .join(',')\n const ranges = chartsArrayPlaceholder\n .map((_, index) => {\n const currentDaterange = urlDateRanges\n ? urlDateRanges[index] ?? urlDateRanges[urlDateRanges.length - 1]\n : undefined\n return (chartIndex === index || hasSyncedTimeframe) && dateRange !== undefined ? dateRange : currentDaterange\n })\n .join(',')\n\n return {\n pathname: location.pathname,\n search: `?${encodeQueryString({\n t: tickers,\n p: timeframes,\n r: ranges.split(',').some(Boolean) ? ranges : undefined,\n l: layout ?? chartLayoutModel.layout,\n })}`,\n }\n },\n [chartLayoutModel, chartIndex, location, hasSyncedTicker, hasSyncedTimeframe]\n )\n\n return { getChartsToPath }\n}\n","import * as React from 'react'\nimport { To, useLocation, useNavigate } from 'react-router-dom'\n\nimport { useDialogState } from '../../components'\nimport {\n DateRangeType,\n FREE_PERIODS,\n SpecificChartFunctionality,\n TIMEFRAME,\n TimeframeAndIntradayType,\n} from '../../constants/common'\nimport Chart from '../../models/chart'\nimport {\n CUSTOM_DATE_RANGE,\n CustomDateRangePrefixEnum,\n DATE_RANGE_PREFIX_DELMITER,\n} from '../../utils/chart-date-range-utils'\nimport { decodeQueryString, encodeQueryString } from '../../utils/query_string'\nimport { useChartsPathLocation } from './use-charts-path-location'\nimport { getDateRangeGroups, getTimeFrameGroups } from './utils'\n\nexport function useTimeframeDateRangeGroups({\n chartModel,\n isPremium,\n specificChartFunctionality,\n}: {\n chartModel: Chart | null\n isPremium: boolean\n specificChartFunctionality: SpecificChartFunctionality\n}) {\n const location = useLocation()\n const navigate = useNavigate()\n const customDateRangeDialogState = useDialogState()\n const chartLayoutModel = React.useMemo(() => chartModel?.chart_layout() ?? null, [chartModel])\n const chartIndex = chartLayoutModel?.getAllCharts().findIndex((chart) => chartModel!.eql(chart)) ?? -1\n const { getChartsToPath } = useChartsPathLocation({ chartLayoutModel, chartIndex })\n const generateChartLayoutRouterPath = React.useCallback(\n ({\n ticker,\n timeframe,\n dateRange,\n }: {\n timeframe: TimeframeAndIntradayType\n dateRange?: string | null\n ticker?: string\n }) => {\n if (specificChartFunctionality === SpecificChartFunctionality.quotePage) {\n if (isPremium || FREE_PERIODS.includes(timeframe)) {\n return {\n pathname: location.pathname,\n search: `?${encodeQueryString({\n ...decodeQueryString(),\n i: undefined,\n p: timeframe,\n r: dateRange ?? undefined,\n })}`,\n }\n }\n\n return {\n pathname: '/elite.ashx',\n search: `?${encodeQueryString({\n utm_source: 'finviz',\n utm_medium: 'banner',\n utm_campaign: 'quote-timeframe',\n })}`,\n }\n }\n\n return getChartsToPath({\n ticker,\n timeframe: timeframe as TIMEFRAME,\n dateRange,\n })\n },\n [specificChartFunctionality, getChartsToPath, isPremium, location.pathname]\n )\n\n const timeFrameGroups = React.useMemo(\n () =>\n getTimeFrameGroups(isPremium).map((timeFrameGroup) => ({\n label: timeFrameGroup.label,\n timeframes: timeFrameGroup.timeframes.map((timeFrame) => ({\n ...timeFrame,\n href: generateChartLayoutRouterPath({ timeframe: timeFrame.value, dateRange: null }),\n })),\n })),\n [isPremium, generateChartLayoutRouterPath]\n )\n\n const dateRangeGroups = React.useMemo(() => {\n const rangeGroups = getDateRangeGroups(isPremium)\n if (isPremium) {\n const dateRange = chartModel?.dateRange\n const [dateRangePrefix] = dateRange?.split(DATE_RANGE_PREFIX_DELMITER) ?? []\n rangeGroups.push({\n dateRanges: [\n {\n value:\n dateRange && Object.values(CustomDateRangePrefixEnum).includes(dateRangePrefix)\n ? dateRange\n : CUSTOM_DATE_RANGE,\n label: 'Custom',\n },\n ],\n })\n }\n\n return rangeGroups.map((dateRangeGroup) => ({\n label: dateRangeGroup.label,\n dateRanges: dateRangeGroup.dateRanges.map((dateRange) => ({\n ...dateRange,\n href:\n !isPremium || Object.values(DateRangeType).includes(dateRange.value as DateRangeType)\n ? generateChartLayoutRouterPath({ timeframe: dateRange.timeframe!, dateRange: dateRange.value })\n : null,\n })),\n }))\n }, [generateChartLayoutRouterPath, chartModel?.dateRange, isPremium])\n\n const handleDateRangeSelect = React.useCallback(\n ({ value, timeframe, href }: { value: string; timeframe: TIMEFRAME; href?: To }) => {\n if (!timeframe) {\n if (isPremium) {\n customDateRangeDialogState.show()\n }\n return\n }\n\n if (!href) {\n navigate(generateChartLayoutRouterPath({ timeframe, dateRange: value }))\n }\n },\n [navigate, customDateRangeDialogState, generateChartLayoutRouterPath, isPremium]\n )\n\n return {\n timeFrameGroups,\n dateRangeGroups,\n customDateRangeDialogState,\n handleDateRangeSelect,\n generateChartLayoutRouterPath,\n }\n}\n","import { DateRangeType, TIMEFRAME, TimeframeAndIntradayType } from '../../constants/common'\n\ninterface ITimeFrame {\n value: TimeframeAndIntradayType\n label: string\n labelShort: string\n}\n\ninterface ITimeframeGroup {\n label: string\n timeframes: ITimeFrame[]\n}\n\ninterface IDateRange {\n value: string\n label: string\n timeframe?: TIMEFRAME\n}\n\nexport const getTimeFrameGroups = (isPremium = true): ITimeframeGroup[] => {\n const premiumTimeframes: ITimeframeGroup[] = [\n {\n label: '',\n timeframes: [\n { value: TIMEFRAME.i1, label: '1 Minute', labelShort: '1M' },\n { value: TIMEFRAME.i2, label: '2 Minutes', labelShort: '2M' },\n { value: TIMEFRAME.i3, label: '3 Minutes', labelShort: '3M' },\n { value: TIMEFRAME.i5, label: '5 Minutes', labelShort: '5M' },\n { value: TIMEFRAME.i10, label: '10 Minutes', labelShort: '10M' },\n { value: TIMEFRAME.i15, label: '15 Minutes', labelShort: '15M' },\n { value: TIMEFRAME.i30, label: '30 Minutes', labelShort: '30M' },\n ],\n },\n {\n label: '',\n timeframes: [\n { value: TIMEFRAME.h, label: '1 Hour', labelShort: '1H' },\n { value: TIMEFRAME.h2, label: '2 Hours', labelShort: '2H' },\n { value: TIMEFRAME.h4, label: '4 Hours', labelShort: '4H' },\n ],\n },\n {\n label: '',\n timeframes: [\n { value: TIMEFRAME.d, label: '1 Day', labelShort: 'D' },\n { value: TIMEFRAME.w, label: '1 Week', labelShort: 'W' },\n { value: TIMEFRAME.m, label: '1 Month', labelShort: 'M' },\n ],\n },\n ]\n\n const freeTimeframes = [\n {\n // intradayTimeframe is only for non premium users used as redirect to elite subscription\n label: '',\n timeframes: [{ value: 'intraday' as const, label: 'Intraday', labelShort: 'Intraday' }],\n },\n {\n label: '',\n timeframes: [\n { value: TIMEFRAME.d, label: '1 Day', labelShort: 'Daily' },\n { value: TIMEFRAME.w, label: '1 Week', labelShort: 'Weekly' },\n { value: TIMEFRAME.m, label: '1 Month', labelShort: 'Monthly' },\n ],\n },\n ]\n\n return isPremium ? premiumTimeframes : freeTimeframes\n}\n\nexport const getDateRangeGroups = (isPremium = true) => {\n const rangeGroups: Array<{ label?: string; dateRanges: IDateRange[] }> = [\n {\n label: 'Days',\n dateRanges: [\n { value: DateRangeType.d1, label: '1 Day', timeframe: TIMEFRAME.i1 },\n { value: DateRangeType.d5, label: '5 Days', timeframe: TIMEFRAME.i5 },\n ],\n },\n {\n label: 'Months',\n dateRanges: [\n { value: DateRangeType.m1, label: '1 Month', timeframe: TIMEFRAME.d },\n { value: DateRangeType.m3, label: '3 Months', timeframe: TIMEFRAME.d },\n { value: DateRangeType.m6, label: '6 Months', timeframe: TIMEFRAME.d },\n ],\n },\n {\n label: 'Years',\n dateRanges: [\n { value: DateRangeType.ytd, label: 'Year to Date', timeframe: TIMEFRAME.d },\n { value: DateRangeType.y1, label: '1 Year', timeframe: TIMEFRAME.d },\n { value: DateRangeType.y2, label: '2 Years', timeframe: TIMEFRAME.w },\n { value: DateRangeType.y5, label: '5 Years', timeframe: isPremium ? TIMEFRAME.w : TIMEFRAME.m },\n { value: DateRangeType.max, label: 'Max', timeframe: TIMEFRAME.m },\n ],\n },\n ]\n\n return rangeGroups\n}\n","import React from 'react'\nimport { useNavigate } from 'react-router-dom'\n\nimport { TimeframeBar } from '../../components'\nimport { SpecificChartFunctionality, TIMEFRAME } from '../../constants/common'\nimport { useModelState } from '../../model-hooks/use-model-state'\nimport Chart from '../../models/chart'\nimport { CustomDateRange } from './custom-date-range'\nimport { DailyChangeDisplay } from './daily-change-display'\nimport Search from './search'\nimport { useChartControls } from './use-chart-controls'\nimport { useFavoriteTimeframes } from './use-favorite-timeframes'\nimport { useTimeframeDateRangeGroups } from './use-timeframe-date-range-groups'\n\ninterface SettingsComponentProps {\n chartModel: Chart\n chartIndex: number\n}\n\nexport function ChartControls({ chartIndex, chartModel: unwatchedChartModel }: SettingsComponentProps) {\n const navigate = useNavigate()\n const { favoriteTimeframes, toggleFavoriteTimeframe } = useFavoriteTimeframes()\n const chartModel = useModelState(unwatchedChartModel, {\n watchProperties: ['ticker'],\n })\n const {\n customDateRangeDialogState,\n handleDateRangeSelect,\n generateChartLayoutRouterPath,\n dateRangeGroups,\n timeFrameGroups,\n } = useTimeframeDateRangeGroups({\n isPremium: window.FinvizSettings.hasUserPremium,\n chartModel,\n specificChartFunctionality: SpecificChartFunctionality.chartPage,\n })\n const { isLoading } = useChartControls({\n chartModel,\n isInteractive: true,\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 return (\n \n {chartModel.chart_layout().canChangeTicker && (\n \n )}\n\n {}}\n selectedDateRange={chartModel.dateRange}\n favoriteTimeframes={favoriteTimeframes}\n loadingTimeframe={isLoading ? chartModel.timeframe : undefined}\n onDateRangeSelect={handleDateRangeSelect}\n onFavoriteTimeframeToggle={({ value }: { value: TIMEFRAME }) => {\n toggleFavoriteTimeframe(value)\n }}\n />\n\n \n\n \n
\n )\n}\n","const __WEBPACK_NAMESPACE_OBJECT__ = FLibs.Hammerjs;","export const CHART_LAYOUT_CHILD_CHANGE_EVENT = 'chartLayoutChildChange'\n","const __WEBPACK_NAMESPACE_OBJECT__ = FLibs.ReactDOM;","import Spine from '@finviz/spine'\n\nimport { TodoObjectHashAnyType } from '../../types/shared'\n\ntype TodoContextConfig = TodoObjectHashAnyType\n\nclass ContextMenu extends Spine.Model {\n static initClass() {\n this.configure('ContextMenu', 'shown', 'config', 'top', 'left')\n }\n\n declare shown: boolean\n declare config: TodoContextConfig\n declare top: number\n declare left: number\n}\n\nContextMenu.initClass()\n\nconst contextMenu = ContextMenu.create() as ContextMenu\ncontextMenu.save()\n\nexport default contextMenu\n","import React from 'react'\nimport * as ReactDOM from 'react-dom'\n\nimport { ObjectHash } from '../../types/shared'\nimport { ContextMenu as ContextMenuComponent } from '../components'\nimport model from '../models/context_menu'\nimport { ready } from '../utils'\n\nconst selector = '.context-menu'\n\nclass ContextMenu extends React.Component {\n componentDidMount() {\n model.bind('update', this.update)\n }\n\n componentWillUnmount() {\n model.unbind('update', this.update)\n }\n\n update = () => {\n this.forceUpdate()\n }\n\n render() {\n if (model.shown) {\n document.querySelector(selector)?.classList.remove('hidden')\n } else {\n document.querySelector(selector)?.classList.add('hidden')\n return null\n }\n\n return (\n <>\n this.hide()}\n onContextMenu={(e) => e.preventDefault()}\n data-testid=\"charts-context-menu-overlay\"\n >\n \n \n )\n }\n\n hide() {\n model.updateAttribute('shown', false)\n }\n}\nready(() => {\n const el = document.querySelector(selector)\n if (el) {\n ReactDOM.render(, el)\n }\n})\n\nconst contextMenuControl = {\n show: (event: MouseEvent | React.MouseEvent, config: ObjectHash) => {\n model.updateAttributes({\n shown: true,\n config: config,\n top: event.clientY + window.pageYOffset,\n left: event.clientX,\n })\n },\n}\n\nexport default contextMenuControl\n","import ChartLayout from '../../models/chart_layout'\n\nexport enum DrawingTool {\n Arrow = 'arrow',\n Brush = 'brush',\n Callout = 'callout',\n Curve = 'curve',\n ElliottWaves = 'elliott-wave',\n Ellipse = 'ellipse',\n FibonacciRetracements = 'fibonacci-retracements',\n HorizontalLine = 'horizontal-line',\n Measure = 'measure',\n Mouse = 'mouse',\n Pitchfork = 'pitchfork',\n Polygon = 'polygon',\n Position = 'position',\n Rectangle = 'rectangle',\n RotatedRectangle = 'rotated-rectangle',\n ScaledLine = 'scaled-line',\n ScaledText = 'scaled-text',\n Triangle = 'triangle',\n VerticalLine = 'vertical-line',\n Xabcd = 'xabcd',\n}\n\nexport enum DrawingActions {\n DeleteDrawings = 'delete-drawings',\n DeleteAutoSavedDrawings = 'delete-autosaved-drawings',\n}\n\nexport enum DrawingSetting {\n PreserveDrawings = 'preserve-drawings',\n DrawingModeContinuous = 'drawing-mode-continuous',\n HideDrawings = 'hide-drawings',\n LockDrawings = 'lock-drawings',\n}\n\nexport interface IToolBarProps {\n chartLayoutModel: ChartLayout\n isSidebar?: boolean\n isHorizontal?: boolean\n /**\n * Current selected tool id\n */\n activeTool: DrawingTool\n /**\n * On tool item select callback\n */\n onActiveToolChange: (activeTool: DrawingTool) => void\n /**\n * On drawing actions item select callback\n */\n onDrawingActionClick?: (actionId: DrawingActions) => void\n /**\n * On drawing settings item select callback\n */\n onDrawingSettingClick?: (settingId: DrawingSetting) => void\n /**\n * Current state of drawing settings\n */\n drawingSettings: Record\n isAlternativeTheme?: boolean\n /**\n * Are tools disabled\n */\n areToolsDisabled?: boolean\n}\n\nexport interface IToolbarItemProperties {\n icon: string\n iconActive?: string\n iconAction?: string\n title: string\n titleActive?: string\n titleAction?: string\n}\n\nexport interface IToolbarDrawingTool extends IToolbarItemProperties {\n id: DrawingTool\n}\n\nexport interface IToolbarDrawingAction extends IToolbarItemProperties {\n id: DrawingActions\n}\n\nexport interface IToolbarDrawingSetting extends IToolbarItemProperties {\n id: DrawingSetting\n}\n\nexport interface IToolbarDrawingToolItem {\n defaultItem: IToolbarDrawingTool\n toolGroup?: Array\n toolGroupTitle?: string\n}\n\nexport interface IToolbarDrawingActionItem {\n defaultItem: IToolbarDrawingAction\n}\n\nexport interface IToolbarDrawingsSettingItem {\n defaultItem: IToolbarDrawingSetting\n isDisabled?: boolean\n isInAction?: boolean\n disabledTooltip?: string\n}\n","import { Instrument } from '../../types/shared'\nimport QuoteModel from '../models/quote'\n\nexport function getInstrumentLabel(instrument: Instrument) {\n switch (instrument) {\n case Instrument.Stock:\n return 'Stock'\n case Instrument.Futures:\n return 'Futures'\n case Instrument.Forex:\n return 'Forex'\n case Instrument.Crypto:\n return 'Crypto'\n case Instrument.MarketSentiment:\n return 'Market Sentiment'\n }\n}\n\nexport function getChartAlt(quoteModel: QuoteModel) {\n return `${quoteModel.name || quoteModel.ticker} - ${getInstrumentLabel(quoteModel.instrument)} Price Chart`\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'\n\ninterface LoadLatestDataButtonProps {\n chartModel: Chart\n}\n\nexport function LoadLatestDataButton({ chartModel: chartModelUnwatched }: LoadLatestDataButtonProps) {\n const chartModel = useModelState(chartModelUnwatched, { watchProperties: ['quote'] })\n const chartLayoutModel = useModelState(chartModel.chart_layout(), { watchProperties: ['idea'] })\n const quoteModel = useModelState(chartModel.quote(), { watchProperties: ['isFetching'] })\n const [hasNewDataAvailable, setHasNewDataAvailable] = React.useState(false)\n const ideaId = chartLayoutModel.idea?.id\n\n React.useEffect(() => {\n if (!chartModel.getRefreshInterval() && ideaId) {\n // We will do a check here if we have correct new data\n chartModel.quote().isPossibleToFetchSequentialData().then(setHasNewDataAvailable)\n } else if (!ideaId) {\n setHasNewDataAvailable(false)\n\n if (chartModel.getRefreshInterval() === null && window.FinvizSettings.hasUserPremium) {\n chartModel.updateAttributes({ refreshData: true })\n }\n }\n }, [chartModel, ideaId])\n\n const handleLoadLatestData = async () => {\n const promises = chartModel.getAllQuotes().map((quote) => quote.fetchData({ fetchType: QuoteFetchType.NewerData }))\n chartModel.updateAttributes({ refreshData: true })\n await Promise.all(promises)\n setHasNewDataAvailable(false)\n window.gtag?.('event', 'load-latest-data', { event_category: 'ideas' })\n }\n\n if (!hasNewDataAvailable || !ideaId) {\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","import classnames from 'classnames'\nimport debounce from 'lodash.debounce'\nimport React from 'react'\n\nimport { Button, ButtonGroup, Icon } from '../../components'\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 [isGoToRecentVisible, setIsGoToRecentVisible] = React.useState(false)\n const defaultZoomFactor = React.useMemo(() => chartModel.chart_layout().defaultZoomFactor, [chartModel])\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 \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 {\n CustomSpineEvents,\n DrawingSpineOptionsEvent,\n EmptyObject,\n Instrument,\n ObjectHash,\n PaneArea,\n} from '../../../types/shared'\nimport CanvasElement from '../../canvas/element'\nimport { Button, Notification, Paragraph, withNotificationContext } from '../../components'\nimport { 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 { ISettings } from '../../models/chart_settings/interfaces'\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 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 { clip, getMinMaxLeftOffset, getSettings, recountScale } from '../renderUtils'\nimport { DrawingTool } from '../toolbar/interfaces'\nimport { getChartAlt } from '../utils'\nimport { withPaneModel } from './with-pane-model'\nimport { ZOOM_CONTROLS_ACTIVE_CLASS, ZOOM_CONTROLS_IS_IN_AREA_CLASS, ZoomControls } from './zoom_controls'\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\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 model\n .elements()\n .all()\n .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 }\n })\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 } = 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 return (\n onPaneClick(model)}\n onTouchStart={() => onPaneClick(model)}\n onContextMenu={this.onContextMenu}\n data-testid={`chart-${chartIndex}-pane-${paneIndex}`}\n >\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 && model.getIsChartPane() && (\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) => {\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) {\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 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) {\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 el = element || this.props.model.selection || this.getElement(area)\n if (!el || el.thumbsAreInArea(area)) {\n return\n }\n const elementModel = ElementModel.findByAttribute('instance', el)\n if (!elementModel) return\n const hasProperties = ['indicator', 'canvas'].some((type) => el.type.startsWith(type))\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 { 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.chartLayoutModel.specificChartFunctionality === SpecificChartFunctionality.chartPage) {\n if (this.crossRafId === null) {\n this.crossRafId = window.requestAnimationFrame(this.renderCross)\n }\n }\n this.rafId = undefined\n if (model.chart().instrument === Instrument.MarketSentiment) {\n this.canvasCtx.clearRect(0, 0, this.props.chartModel.width, model.height)\n } else {\n this.canvasCtx.set(\n 'fillStyle',\n this.props.chartModel.getChartLayoutSettings().ChartSettings.general.Colors.canvasFill\n )\n this.canvasCtx.fillRect(0, 0, this.props.chartModel.width, model.height)\n }\n const elements = model.getAllElements()\n for (const { instance: elementInstance } of elements) {\n if (elementInstance.renderGrid != null) {\n this.canvasCtx.save()\n elementInstance.renderGrid(this.canvasCtx)\n this.canvasCtx.restore()\n }\n }\n\n for (const { instance: elementInstance } of elements) {\n if (\n elementInstance.getIsDrawing() &&\n (this.chartLayoutModel.isHideDrawingsActive || !elementInstance.getIsVisible())\n ) {\n continue\n }\n this.canvasCtx.save()\n if (elementInstance.renderContent != null) {\n this.canvasCtx.save()\n const Settings = getSettings(model) as ISettings['ChartSettings']\n clip({\n canvasCtx: this.canvasCtx,\n width: this.props.chartModel.width,\n height: model.height,\n Settings,\n })\n this.canvasCtx.translate(model.chart().leftOffset + Settings.left.width, Settings.top.height)\n elementInstance.renderContent(this.canvasCtx)\n this.canvasCtx.restore()\n if (typeof elementInstance.renderLabels === 'function') {\n elementInstance.renderLabels(this.canvasCtx)\n }\n } else {\n elementInstance.render(this.canvasCtx)\n }\n this.canvasCtx.restore()\n }\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 >\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 }\n 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 }\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 (activeTool === DrawingTool.Mouse || model.getAllElements().some(({ instance }) => instance.isCreator)) {\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 (model.selection instanceof CanvasElement && this.mouseDown && !model.selection?.activeThumb) {\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) {\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 elements = this.props.model.getAllElements()\n for (let i = elements.length - 1; i >= 0; i--) {\n const el = elements[i].instance\n if (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 dark:bg-gray-900 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}\n","import React from 'react'\n\nimport { Instrument } from '../../../types/shared'\nimport { ChartEditorEnum } 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 from '../../utils'\nimport { getBarWidthWithMargin, getZoomFactorForBarsToDisplay } from '../../utils/chart'\nimport { getParsedDateRangeMetaData } from '../../utils/chart-date-range-utils'\nimport { ChartControls } from '../chart-controls'\nimport Pane from '../pane'\nimport {\n getBarIndex,\n getChartZoomAndLeftOffset,\n getIsSmallIndexChart,\n getLeftOffset,\n getMinMaxLeftOffset,\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 } = this.props\n const panes = chartModel.panes().all()\n\n return (\n <>\n this.onClick(undefined)}\n data-testid={`chart-${chartIndex}-settings`}\n onMouseEnter={this.resetMouseModel}\n >\n {layoutModel.editors.includes(ChartEditorEnum.settings) && (\n \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) {\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 if (\n !chartModel.dateRange ||\n !quote.eql(chartModel.quote()) ||\n chartModel.timeframe !== quote.timeframe ||\n quote.date.length === 0\n ) {\n return\n }\n\n const { ChartSettings } = chartModel.getChartLayoutSettings()\n const chartVisibleWidth = chartModel.width - (ChartSettings.left.width + ChartSettings.right.width)\n\n const { start, end, numOfBarsToRender } = getParsedDateRangeMetaData({\n dateRange: chartModel.dateRange,\n quote,\n })\n\n const { zoomFactor, leftOffset } = getChartZoomAndLeftOffset({\n chartVisibleWidth,\n start,\n end,\n quote,\n numOfBarsToRender,\n chartModel: chartModel,\n })\n if (chartModel.zoomFactor !== zoomFactor || chartModel.leftOffset !== leftOffset) {\n chartModel.updateAttributes({ zoomFactor, leftOffset })\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 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 } 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, aftermarket, ticker, instrument, timeframe, panes: panesConfig } = config\n\n const options = {\n premarket,\n aftermarket,\n patterns: panesConfig.some((pane) =>\n pane.elements?.some((element) =>\n 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 })\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 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 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","import React from 'react'\n\nimport { Button, Dialog, DialogBody, DialogFooter, DialogHeader, Paragraph, useDialogState } from '../components'\n\ninterface HelpDialogProps {\n hasNewQuoteMenu: boolean\n}\n\nexport function HelpDialog(props: HelpDialogProps) {\n const dialog = useDialogState()\n\n return (\n <>\n {\n dialog.show()\n window.gtag?.('event', 'help', { event_category: 'ideas' })\n }}\n >\n How it works\n \n \n \n )\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 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 = layoutModel.idea?.note || ''\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'\n\nexport function IdeasDropdown({\n model,\n rounding,\n theme = 'headerItem',\n dropdownButtonClassName,\n}: {\n model: ChartLayout\n rounding?: 'none' | 'regular'\n theme?: string\n dropdownButtonClassName?: string\n}) {\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 return (\n <>\n \n Ideas\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","import React from 'react'\n\nimport { HelpDialog } from '../modals/help'\nimport ChartLayout from '../models/chart_layout'\nimport { IdeasDropdown } from './header/ideas_dropdown'\n\ninterface NoticeProps {\n layoutModel: ChartLayout\n handleAddNote: () => void\n}\n\nexport default function Notice(props: NoticeProps) {\n return (\n <>\n \n
\n {window.FinvizSettings.hasUserPremium && (\n // eslint-disable-next-line jsx-a11y/anchor-is-valid\n
{\n e.preventDefault()\n props.handleAddNote()\n }}\n data-testid=\"charts-notice-ideas-add-note-btn\"\n >\n + Add a note\n \n )}\n \n \n
\n \n )\n}\n","import { PaneArea } from '../../types/shared'\nimport Arrow, { IArrowAttrs } from '../canvas/arrow'\nimport PaneModel from '../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IArrowAttrs\ntype PartialAttrs = Partial\n\nclass ArrowCreator extends Arrow {\n mouseDowns = 1\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n this.attrs.x1 = startArea.x\n this.attrs.x2 = startArea.x\n this.attrs.y1 = startArea.y\n this.attrs.y2 = startArea.y\n this.toolsCallback = toolsCallback\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n onMouseDown() {\n this.mouseDowns++\n if (this.mouseDowns > 1) {\n this.release()\n this.replaceMyself(Arrow.fromObject(this.attrs, this.model))\n this.toolsCallback()\n }\n }\n\n onMouseMove(area: Area) {\n this.attrs.x1 = area.x\n this.attrs.y1 = area.y\n this.trigger('change')\n }\n}\n\nexport default ArrowCreator\n","import simplify from 'simplify-js'\n\nimport { PaneArea } from '../../../types/shared'\nimport Brush, { BrushPoints, IBrushAttrs } from '../../canvas/brush/brush_v1'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IBrushAttrs\ntype PartialAttrs = Partial\n\nclass BrushCreator extends Brush {\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super({ ...values, points: [[startArea.x, startArea.y]] }, model)\n\n this.bind('mousemove', this.onMouseMove)\n this.bind('mouseup', this.onMouseUp)\n this.toolsCallback = toolsCallback\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n simplifyPolyline = (pointsArray: BrushPoints): BrushPoints =>\n simplify(\n pointsArray.map(([x, y]) => ({ x: this.fx(x), y: this.fy(y) })),\n 1\n ).map(({ x, y }) => [this.model.scale.x.invert(x), this.model.scale.y.invert(y)])\n\n onMouseMove = (area: Area) => {\n this.attrs.points.push([area.x, area.y])\n if (this.attrs.points.length > 5) {\n this.attrs.points = this.simplifyPolyline(this.attrs.points)\n }\n this.trigger('change')\n }\n\n onMouseUp = () => {\n this.release()\n this.replaceMyself(Brush.fromObject(this.attrs, this.model))\n this.toolsCallback()\n }\n}\n\nexport default BrushCreator\n","import { PaneArea, RequireByKey, TextAttrs as TextAttrsRaw } from '../../../types/shared'\nimport Callout, { ICalloutAttrs } from '../../canvas/callout/callout_v1'\nimport { StyleDialogOpener } from '../../modals/element_style'\nimport ElementModel from '../../models/element'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype TextAttrs = RequireByKey\ntype Attrs = ICalloutAttrs & TextAttrs\ntype PartialAttrs = Partial\n\nclass CalloutCreator extends Callout {\n isCreator = true\n mouseUps = 0\n openStyleDialog: StyleDialogOpener\n\n constructor(\n startArea: Area,\n values: PartialAttrs,\n model: PaneModel,\n openStyleDialog: StyleDialogOpener,\n toolsCallback: () => void\n ) {\n super(values, model)\n\n this.openStyleDialog = openStyleDialog\n this.attrs.x1 = this.attrs.x2 = startArea.x\n this.attrs.y1 = this.attrs.y2 = startArea.y\n this.attrs.text = ''\n this.toolsCallback = toolsCallback\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n onMouseUp(area: PaneArea) {\n this.mouseUps++\n if (this.mouseUps > 1) {\n this.attrs.x2 = area.x\n this.attrs.y2 = area.y\n this.isCreatorDialogOpen = true\n this.openStyleDialog(\n this,\n (values) => {\n this.set(values)\n this.release()\n this.replaceMyself(Callout.fromObject(this.attrs, this.model))\n this.toolsCallback()\n },\n () => {\n const instance = ElementModel.findByAttribute('instance', this)\n instance?.destroy()\n }\n )\n }\n }\n\n onMouseMove(area: Area) {\n this.attrs.x2 = area.x\n this.attrs.y2 = area.y\n return this.trigger('change')\n }\n}\n\nexport default CalloutCreator\n","import { PaneArea } from '../../types/shared'\nimport Curve, { ICurveAttrs } from '../canvas/curve'\nimport PaneModel from '../models/pane'\n\ntype Area = PaneArea\ntype Attrs = ICurveAttrs\ntype PartialAttrs = Partial\n\nconst TOTAL_CURVE_POINTS_COUNT = 3\n\nclass CurveCreator extends Curve {\n mouseDowns = 1\n isCreator = true\n curvePoints = 1\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n this.attrs.x1 = this.attrs.x2 = startArea.x\n this.attrs.y1 = this.attrs.y2 = startArea.y\n this.toolsCallback = toolsCallback\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n onMouseDown() {\n this.curvePoints++\n if (this.curvePoints === TOTAL_CURVE_POINTS_COUNT) {\n this.release()\n this.replaceMyself(Curve.fromObject(this.attrs, this.model))\n this.toolsCallback()\n }\n }\n\n onMouseMove(area: Area) {\n switch (this.curvePoints) {\n case 1:\n this.attrs = {\n ...this.attrs,\n x2: area.x,\n y2: area.y,\n }\n break\n case 2:\n this.attrs = {\n ...this.attrs,\n x3: area.x,\n y3: area.y,\n }\n break\n default:\n break\n }\n this.trigger('change')\n }\n}\n\nexport default CurveCreator\n","import { PaneArea } from '../../../types/shared'\nimport ElliottWaves, { IElliottWavesAttrs } from '../../canvas/elliott_waves/elliott_waves'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IElliottWavesAttrs\ntype PartialAttrs = Partial\n\nclass ElliottWavesCreator extends ElliottWaves> {\n isCreator = true\n mouseDowns = 0\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(\n {\n ...values,\n waves: [\n {\n x: startArea.x,\n y: startArea.y,\n },\n ],\n },\n model\n )\n this.toolsCallback = toolsCallback\n\n this.onMouseDown(startArea)\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n onMouseDown(area: Area) {\n this.mouseDowns++\n this.attrs.waves[this.mouseDowns - 1] = { x: area.x, y: area.y }\n if (this.mouseDowns === this.waves.length) {\n this.release()\n this.replaceMyself(ElliottWaves.fromObject(this.attrs, this.model))\n this.toolsCallback()\n } else {\n this.attrs.waves[this.mouseDowns] = { x: area.x, y: area.y }\n }\n }\n\n onMouseMove(area: Area) {\n this.attrs.waves[this.mouseDowns].x = area.x\n this.attrs.waves[this.mouseDowns].y = area.y\n this.trigger('change')\n }\n\n isInArea() {\n return true\n }\n}\n\nexport default ElliottWavesCreator\n","import { PaneArea } from '../../../types/shared'\nimport EllipseV1, { IEllipseAttrs } from '../../canvas/ellipse/ellipse_v1'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IEllipseAttrs\ntype PartialAttrs = Partial\n\nconst TOTAL_ELLIPSE_POINTS_COUNT = 3\nclass EllipseV1Creator extends EllipseV1 {\n ellipsePoints = 1\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n this.attrs.x1 = this.attrs.x2 = startArea.x\n this.attrs.y1 = this.attrs.y2 = startArea.y\n this.toolsCallback = toolsCallback\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n setIsSelected(isSelected: boolean) {\n super.setIsSelected(isSelected)\n // setIsSelected can be called while drawing creator is active, but the click is made outside of the drawing bounderies\n // so we need to call \"set\" method manually to \"finish\" the drawing\n this.set({})\n }\n\n set(obj: PartialAttrs) {\n super.set(obj)\n if (!this.isSelected && this.ellipsePoints === TOTAL_ELLIPSE_POINTS_COUNT - 1) {\n this.ellipsePoints++\n this.release()\n setTimeout(() => {\n this.replaceMyself(EllipseV1.fromObject(this.attrs, this.model))\n this.toolsCallback()\n }, 0)\n }\n return this\n }\n\n onMouseDown() {\n this.ellipsePoints++\n if (this.ellipsePoints === TOTAL_ELLIPSE_POINTS_COUNT) {\n this.release()\n this.replaceMyself(EllipseV1.fromObject(this.attrs, this.model))\n this.toolsCallback()\n }\n }\n\n onMouseMove(area: Area) {\n switch (this.ellipsePoints) {\n case 1:\n this.attrs = {\n ...this.attrs,\n x2: area.x,\n y2: area.y,\n }\n break\n case 2:\n this.attrs = {\n ...this.attrs,\n cursorTargetX: area.x,\n cursorTargetY: area.y,\n }\n break\n default:\n break\n }\n return this.trigger('change')\n }\n}\n\nexport default EllipseV1Creator\n","import { PaneArea } from '../../types/shared'\nimport FR, { IFibonacciRetracementsAttrs } from '../canvas/fibonacci_retracements'\nimport PaneModel from '../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IFibonacciRetracementsAttrs\ntype PartialAttrs = Partial\n\nclass FRCreator extends FR {\n mouseDowns = 1\n isCreator = true\n curvePoints = 1\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n this.attrs.x1 = this.attrs.x2 = startArea.x\n this.attrs.y1 = this.attrs.y2 = startArea.y\n this.mouseDowns = 1\n this.toolsCallback = toolsCallback\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n onMouseDown(area: PaneArea) {\n this.mouseDowns++\n if (this.mouseDowns > 1) {\n this.attrs.x2 = area.x\n this.attrs.y2 = area.y\n this.release()\n this.replaceMyself(FR.fromObject(this.attrs, this.model))\n this.toolsCallback()\n }\n }\n\n onMouseMove(area: Area) {\n this.attrs.x2 = area.x\n this.attrs.y2 = area.y\n this.trigger('change')\n }\n}\n\nexport default FRCreator\n","import { PaneArea } from '../../types/shared'\nimport HorizontalLine from '../canvas/horizontal_line'\nimport { IScaledLineAttrs } from '../canvas/scaled_line'\nimport PaneModel from '../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IScaledLineAttrs\ntype PartialAttrs = Partial\n\nclass HorizontalLineCreator extends HorizontalLine {\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n this.toolsCallback = toolsCallback\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n onMouseUp(area: Area) {\n this.attrs.y1 = area.y\n this.attrs.y2 = area.y\n this.release()\n this.replaceMyself(HorizontalLine.fromObject(this.attrs, this.model))\n this.toolsCallback()\n }\n}\n\nexport default HorizontalLineCreator\n","import { PaneArea } from '../../types/shared'\nimport Measure, { IMeasureAttrs } from '../canvas/measure'\nimport PaneModel from '../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IMeasureAttrs\ntype PartialAttrs = Partial\n\nclass MeasureCreator extends Measure {\n mouseDowns = 1\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n this.attrs.x1 = this.attrs.x2 = Math.round(startArea.x)\n this.attrs.y1 = this.attrs.y2 = startArea.y\n this.mouseDowns = 1\n this.toolsCallback = toolsCallback\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n onMouseDown() {\n this.mouseDowns++\n if (this.mouseDowns > 1) {\n this.release()\n this.replaceMyself(Measure.fromObject(this.attrs, this.model))\n this.toolsCallback()\n }\n }\n\n onMouseMove(area: Area) {\n this.attrs.x2 = Math.round(area.x)\n this.attrs.y2 = area.y\n this.trigger('change')\n }\n}\n\nexport default MeasureCreator\n","import { PaneArea } from '../../../types/shared'\nimport Pitchfork, { IPitchforkAttrs } from '../../canvas/pitchfork/pitchfork_v1'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IPitchforkAttrs\ntype PartialAttrs = Partial\n\nclass PitchforkCreator extends Pitchfork {\n isCreator = true\n mouseDowns = 1\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n this.attrs.x1 = startArea.x\n this.attrs.y1 = startArea.y\n this.toolsCallback = toolsCallback\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n onMouseDown() {\n this.mouseDowns++\n if (this.mouseDowns === 3) {\n this.release()\n this.replaceMyself(Pitchfork.fromObject(this.attrs, this.model))\n this.toolsCallback()\n }\n }\n\n onMouseMove(area: Area) {\n switch (this.mouseDowns) {\n case 1:\n this.attrs.x2 = area.x\n this.attrs.y2 = area.y\n break\n case 2:\n this.attrs.x3 = area.x\n this.attrs.y3 = area.y\n break\n default:\n break\n }\n this.trigger('change')\n }\n}\n\nexport default PitchforkCreator\n","import { PaneArea, Point } from '../../types/shared'\nimport Polygon, { IPolygonAttrs } from '../canvas/polygon'\nimport PaneModel from '../models/pane'\n\nexport type Area = PaneArea\ntype Attrs = IPolygonAttrs\ntype PartialAttrs = Partial\n\nclass PolygonCreator extends Polygon> {\n mouseDowns = 1\n isCreator = true\n lastMouseDown: Point = { x: 0, y: 0 }\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(\n {\n ...values,\n points: [\n {\n x: startArea.x,\n y: startArea.y,\n },\n ],\n },\n model\n )\n this.mouseDowns = 0\n this.onMouseDown(startArea)\n this.toolsCallback = toolsCallback\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n isSamePoint = ({ pointA, pointB, margin }: { pointA: Point; pointB: Point; margin: Point }) =>\n pointA.x - margin.x <= pointB.x &&\n pointB.x <= pointA.x + margin.x &&\n pointA.y - margin.y <= pointB.y &&\n pointB.y <= pointA.y + margin.y\n\n onMouseDown(area: Area) {\n this.mouseDowns++\n const first = this.attrs.points[0]\n const margin = {\n x: this.model.scale.x.invert(5),\n y: this.model.scale.y.invert(0) - this.model.scale.y.invert(5),\n }\n\n if (this.mouseDowns !== 1 && this.isSamePoint({ pointA: first, pointB: area, margin })) {\n this.attrs.points[this.attrs.points.length - 1] = {\n x: first.x,\n y: first.y,\n }\n this.release()\n this.replaceMyself(Polygon.fromObject(this.attrs, this.model))\n this.toolsCallback()\n } else if (this.mouseDowns !== 1 && this.isSamePoint({ pointA: this.lastMouseDown, pointB: area, margin })) {\n this.attrs.points.pop()\n this.release()\n this.replaceMyself(Polygon.fromObject(this.attrs, this.model))\n this.toolsCallback()\n } else {\n this.attrs.points[this.mouseDowns] = { x: area.x, y: area.y }\n }\n this.lastMouseDown = { x: area.x, y: area.y }\n this.trigger('change')\n }\n\n onMouseMove(area: Area) {\n this.attrs.points[this.mouseDowns].x = area.x\n this.attrs.points[this.mouseDowns].y = area.y\n this.trigger('change')\n }\n\n isInArea() {\n return true\n }\n}\n\nexport default PolygonCreator\n","import { PaneArea } from '../../types/shared'\nimport Position, { IPositionAttrs } from '../canvas/position'\nimport PaneModel from '../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IPositionAttrs\ntype PartialAttrs = Partial\n\nclass PositionCreator extends Position> {\n mouseDowns = 1\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(\n {\n ...values,\n targetY: startArea.y,\n centerY: startArea.y,\n stopY: startArea.y,\n },\n model\n )\n\n this.attrs.x1 = this.attrs.x2 = Math.round(startArea.x)\n this.toolsCallback = toolsCallback\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n onMouseDown() {\n this.mouseDowns++\n if (this.mouseDowns === 2) {\n if (this.attrs.targetY <= this.attrs.centerY) {\n this.attrs.stopY = this.attrs.centerY + 0.001\n } else {\n this.attrs.stopY = this.attrs.centerY - 0.001\n }\n }\n if (this.mouseDowns > 2) {\n this.release()\n this.replaceMyself(Position.fromObject(this.attrs, this.model))\n this.toolsCallback()\n }\n }\n\n onMouseMove(area: Area) {\n const { stopY, centerY } = this.attrs\n if (this.mouseDowns === 1) {\n this.attrs.centerY = this.attrs.stopY = area.y\n } else if (this.mouseDowns === 2) {\n if ((stopY >= centerY && area.y > centerY) || (stopY <= centerY && area.y < centerY)) {\n this.attrs.stopY = area.y\n }\n }\n this.attrs.x2 = Math.round(area.x)\n this.trigger('change')\n }\n}\n\nexport default PositionCreator\n","import { PaneArea } from '../../types/shared'\nimport Rectangle, { IRectangleAttrs } from '../canvas/rectangle'\nimport PaneModel from '../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IRectangleAttrs\ntype PartialAttrs = Partial\n\nclass RectangleCreator extends Rectangle {\n isCreator = true\n mouseDowns = 1\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n this.attrs.x1 = this.attrs.x2 = startArea.x\n this.attrs.y1 = this.attrs.y2 = startArea.y\n this.toolsCallback = toolsCallback\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n onMouseDown(area: PaneArea) {\n this.mouseDowns++\n if (this.mouseDowns > 1) {\n this.attrs.x2 = area.x\n this.attrs.y2 = area.y\n this.release()\n this.replaceMyself(Rectangle.fromObject(this.attrs, this.model))\n this.toolsCallback()\n }\n }\n\n onMouseMove(area: Area) {\n this.attrs.x2 = area.x\n this.attrs.y2 = area.y\n return this.trigger('change')\n }\n}\n\nexport default RectangleCreator\n","import { PaneArea } from '../../../types/shared'\nimport RotatedRectangleV1, { IRotatedRectangleV1Attrs } from '../../canvas/rotated_rectangle/rotated_rectangle_v1'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IRotatedRectangleV1Attrs\ntype PartialAttrs = Partial\n\nconst TOTAL_ROTATED_RECTANGLE_POINTS_COUNT = 3\nclass RotatedRectangleV1Creator extends RotatedRectangleV1 {\n rotatedRectanglePoints = 1\n lastY = 0\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n this.attrs.x1 = this.attrs.x2 = startArea.x\n this.attrs.y1 = this.attrs.y2 = startArea.y\n this.toolsCallback = toolsCallback\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n setIsSelected(isSelected: boolean) {\n super.setIsSelected(isSelected)\n // setIsSelected can be called while drawing creator is active, but the click is made outside of the drawing bounderies\n // so we need to call \"set\" method manually to \"finish\" the drawing\n this.set({})\n }\n\n set(obj: PartialAttrs) {\n super.set(obj)\n if (!this.isSelected && this.rotatedRectanglePoints === TOTAL_ROTATED_RECTANGLE_POINTS_COUNT - 1) {\n this.rotatedRectanglePoints += 1\n this.release()\n setTimeout(() => {\n this.replaceMyself(RotatedRectangleV1.fromObject(this.attrs, this.model))\n this.toolsCallback()\n }, 0)\n }\n return this\n }\n\n onMouseDown() {\n this.rotatedRectanglePoints++\n if (this.rotatedRectanglePoints === TOTAL_ROTATED_RECTANGLE_POINTS_COUNT) {\n this.release()\n this.replaceMyself(RotatedRectangleV1.fromObject(this.attrs, this.model))\n this.toolsCallback()\n }\n }\n\n onMouseMove(area: Area) {\n switch (this.rotatedRectanglePoints) {\n case 1:\n this.attrs = {\n ...this.attrs,\n x2: area.x,\n y2: area.y,\n }\n break\n case 2:\n this.attrs = {\n ...this.attrs,\n cursorTargetX: area.x,\n cursorTargetY: area.y,\n }\n break\n default:\n break\n }\n this.lastY = area.y\n this.trigger('change')\n }\n}\n\nexport default RotatedRectangleV1Creator\n","import { PaneArea } from '../../types/shared'\nimport ScaledLine, { IScaledLineAttrs } from '../canvas/scaled_line'\nimport PaneModel from '../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IScaledLineAttrs\ntype PartialAttrs = Partial\n\nclass LineCreator extends ScaledLine {\n mouseDowns = 1\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n this.attrs.x1 = this.attrs.x2 = startArea.x\n this.attrs.y1 = this.attrs.y2 = startArea.y\n this.toolsCallback = toolsCallback\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n onMouseDown() {\n this.mouseDowns++\n if (this.mouseDowns > 1) {\n this.release()\n this.replaceMyself(ScaledLine.fromObject(this.attrs, this.model))\n this.toolsCallback()\n }\n }\n\n onMouseMove(area: Area) {\n this.attrs.x2 = area.x // - @startArea.x\n this.attrs.y2 = area.y // - @startArea.y\n this.trigger('change')\n }\n}\n\nexport default LineCreator\n","import { PaneArea } from '../../types/shared'\nimport ScaledText from '../canvas/scaled_text'\nimport { ITextAttrs } from '../canvas/text'\nimport { StyleDialogOpener } from '../modals/element_style'\nimport ElementModel from '../models/element'\nimport PaneModel from '../models/pane'\n\ntype Area = PaneArea\ntype Attrs = ITextAttrs\ntype PartialAttrs = Partial\n\nclass ScaledTextCreator extends ScaledText {\n isCreator = true\n openStyleDialog: StyleDialogOpener\n\n constructor(\n startArea: Area,\n values: PartialAttrs,\n model: PaneModel,\n openStyleDialog: StyleDialogOpener,\n toolsCallback: () => void\n ) {\n super(values, model)\n\n this.openStyleDialog = openStyleDialog\n\n this.attrs.x = startArea.x\n this.attrs.y = startArea.y\n this.attrs.text = ''\n this.toolsCallback = toolsCallback\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n onMouseUp() {\n this.isCreatorDialogOpen = true\n this.openStyleDialog(\n this,\n (values) => {\n this.set(values)\n this.release()\n this.replaceMyself(ScaledText.fromObject(this.attrs, this.model))\n this.toolsCallback()\n },\n () => {\n const instance = ElementModel.findByAttribute('instance', this)\n instance?.destroy()\n }\n )\n }\n}\n\nexport default ScaledTextCreator\n","import { PaneArea } from '../../../types/shared'\nimport Arrow, { IArrowAttrs } from '../../canvas/arrow'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IArrowAttrs\ntype PartialAttrs = Partial\n\nclass ArrowCreator extends Arrow {\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n const width = this.model.scale.x.width(35)\n const height = this.model.scale.y.height(35)\n this.attrs.x1 = startArea.x + width\n this.attrs.x2 = startArea.x - width\n this.attrs.y1 = startArea.y - height\n this.attrs.y2 = startArea.y + height\n\n setTimeout(() => {\n this.replaceMyself(Arrow.fromObject>(this.attrs, this.model))\n toolsCallback()\n })\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n}\n\nexport default ArrowCreator\n","import BrushCreator from '../../brush/brush_v1'\n\nexport default BrushCreator\n","import { PaneArea, RequireByKey, TextAttrs as TextAttrsRaw } from '../../../../types/shared'\nimport Callout, { ICalloutAttrs } from '../../../canvas/callout/callout_v1'\nimport { StyleDialogOpener } from '../../../modals/element_style'\nimport ElementModel from '../../../models/element'\nimport PaneModel from '../../../models/pane'\n\ntype Area = PaneArea\ntype TextAttrs = RequireByKey\ntype Attrs = ICalloutAttrs & TextAttrs\ntype PartialAttrs = Partial\n\nclass CalloutCreator extends Callout {\n isCreator = true\n openStyleDialog: StyleDialogOpener\n\n constructor(\n startArea: Area,\n values: PartialAttrs,\n model: PaneModel,\n openStyleDialog: StyleDialogOpener,\n toolsCallback: () => void\n ) {\n super(values, model)\n\n this.openStyleDialog = openStyleDialog\n\n const width = this.model.scale.x.width(30)\n const height = this.model.scale.y.height(-20)\n this.attrs.x1 = startArea.x\n this.attrs.y1 = startArea.y\n this.attrs.x2 = startArea.x + width\n this.attrs.y2 = startArea.y + height\n this.attrs.text = ''\n this.isCreatorDialogOpen = true\n\n setTimeout(\n () =>\n this.openStyleDialog(\n this,\n (values) => {\n this.set(values)\n this.release()\n this.replaceMyself(Callout.fromObject(this.attrs, this.model))\n toolsCallback()\n },\n () => {\n const instance = ElementModel.findByAttribute('instance', this)\n instance?.destroy()\n }\n ),\n 0\n )\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n}\n\nexport default CalloutCreator\n","import { PaneArea } from '../../../types/shared'\nimport Curve, { ICurveAttrs } from '../../canvas/curve'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = ICurveAttrs\ntype PartialAttrs = Partial\n\nclass CurveCreator extends Curve {\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n const width = this.model.scale.x.width(50)\n const height = this.model.scale.y.height(35)\n this.attrs.x1 = startArea.x\n this.attrs.x2 = startArea.x + width\n this.attrs.x3 = startArea.x + width * 2\n this.attrs.y1 = startArea.y\n this.attrs.y2 = startArea.y + height\n this.attrs.y3 = startArea.y\n\n // reason for setTimeout is that you need to run this.replaceMyself() in another\n // CPU tick || delay +- 10ms || as another task in BrowserQueue,\n // if it isn't there curve is not defined yet and you get error\n // Uncaught TypeError: Cannot read property 'replace' of undefined\n // deeper explanation here https://stackoverflow.com/a/779785\n setTimeout(() => {\n this.replaceMyself(Curve.fromObject(this.attrs, this.model))\n toolsCallback()\n })\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n}\n\nexport default CurveCreator\n","import { PaneArea } from '../../../../types/shared'\nimport ElliottWaves, { IElliottWavesAttrs } from '../../../canvas/elliott_waves/elliott_waves'\nimport PaneModel from '../../../models/pane'\nimport utils from '../../../utils'\n\ntype Area = PaneArea\ntype Attrs = IElliottWavesAttrs\ntype PartialAttrs = Partial\n\nclass ElliottWavesCreator extends ElliottWaves {\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(\n {\n ...values,\n waves: [\n {\n x: startArea.x,\n y: startArea.y,\n },\n ],\n },\n model\n )\n\n const w = (w: number) => this.model.scale.x.width(w * 8)\n const h = (h: number) => this.model.scale.y.height(h * 16)\n\n this.attrs.waves[0] = { x: startArea.x, y: startArea.y }\n this.attrs.waves[1] = {\n x: this.attrs.waves[0].x + w(10.833),\n y: this.attrs.waves[0].y - h(3.379),\n }\n this.attrs.waves[2] = {\n x: this.attrs.waves[0].x + w(14.166),\n y: this.attrs.waves[0].y - h(1.126),\n }\n this.attrs.waves[3] = {\n x: this.attrs.waves[0].x + w(31.333),\n y: this.attrs.waves[0].y - h(6.228),\n }\n this.attrs.waves[4] = {\n x: this.attrs.waves[0].x + w(34.5),\n y: this.attrs.waves[0].y - h(4.373),\n }\n this.attrs.waves[5] = {\n x: this.attrs.waves[0].x + w(45.166),\n y: this.attrs.waves[0].y - h(7.819),\n }\n\n const [left, right] = utils.minMax(this.attrs.waves.map((wave) => wave.x))\n const [top, bottom] = utils.minMax(this.attrs.waves.map((wave) => wave.y))\n this.moveBy(left - (left + right) / 2, top - (top + bottom) / 2)\n\n setTimeout(() => {\n this.replaceMyself(ElliottWaves.fromObject(this.attrs, this.model))\n toolsCallback()\n })\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n}\n\nexport default ElliottWavesCreator\n","import { PaneArea } from '../../../../types/shared'\nimport EllipseV1, { IEllipseAttrs } from '../../../canvas/ellipse/ellipse_v1'\nimport PaneModel from '../../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IEllipseAttrs\ntype PartialAttrs = Partial\n\nclass EllipseV1Creator extends EllipseV1 {\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n const xAxisOffset = this.model.scale.x.width(30)\n const yAxisOffset = this.model.scale.y.height(30)\n this.attrs.x1 = startArea.x - xAxisOffset\n this.attrs.x2 = startArea.x + xAxisOffset\n this.attrs.y1 = startArea.y - yAxisOffset\n this.attrs.y2 = startArea.y + yAxisOffset\n this.attrs.cursorTargetX = startArea.x + xAxisOffset\n this.attrs.cursorTargetY = startArea.y\n\n setTimeout(() => {\n this.replaceMyself(EllipseV1.fromObject(this.attrs, this.model))\n toolsCallback()\n })\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n}\n\nexport default EllipseV1Creator\n","import { PaneArea } from '../../../types/shared'\nimport FR, { IFibonacciRetracementsAttrs } from '../../canvas/fibonacci_retracements'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IFibonacciRetracementsAttrs\ntype PartialAttrs = Partial\n\nclass FRCreator extends FR {\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n const width = this.model.scale.x.width(120)\n const height = this.model.scale.y.height(80)\n this.attrs.x1 = startArea.x - width\n this.attrs.x2 = startArea.x + width\n this.attrs.y1 = startArea.y - height\n this.attrs.y2 = startArea.y + height\n\n setTimeout(() => {\n this.replaceMyself(FR.fromObject(this.attrs, this.model))\n toolsCallback()\n })\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n}\n\nexport default FRCreator\n","import { PaneArea } from '../../../types/shared'\nimport HorizontalLine from '../../canvas/horizontal_line'\nimport { IScaledLineAttrs } from '../../canvas/scaled_line'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IScaledLineAttrs\ntype PartialAttrs = Partial\n\nclass HorizontalLineCreator extends HorizontalLine {\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n this.attrs.y1 = startArea.y\n this.attrs.y2 = startArea.y\n\n setTimeout(() => {\n this.replaceMyself(HorizontalLine.fromObject(this.attrs, this.model))\n toolsCallback()\n })\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n}\n\nexport default HorizontalLineCreator\n","import { PaneArea } from '../../../types/shared'\nimport Measure, { IMeasureAttrs } from '../../canvas/measure'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IMeasureAttrs\ntype PartialAttrs = Partial\n\nclass MeasureCreator extends Measure {\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n const width = this.model.scale.x.width(80)\n const height = this.model.scale.y.height(35)\n this.attrs.x1 = Math.round(startArea.x - width)\n this.attrs.x2 = Math.round(startArea.x + width)\n this.attrs.y1 = startArea.y + height\n this.attrs.y2 = startArea.y - height\n\n setTimeout(() => {\n this.replaceMyself(Measure.fromObject(this.attrs, this.model))\n toolsCallback()\n })\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n}\n\nexport default MeasureCreator\n","import { PaneArea } from '../../../../types/shared'\nimport Pitchfork, { IPitchforkAttrs } from '../../../canvas/pitchfork/pitchfork_v1'\nimport PaneModel from '../../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IPitchforkAttrs\ntype PartialAttrs = Partial\n\nconst SIZE_IN_PIXELS = 35\n\nclass PitchforkCreator extends Pitchfork {\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n const width = this.model.scale.x.width(SIZE_IN_PIXELS)\n const height = this.model.scale.y.height(SIZE_IN_PIXELS)\n this.attrs.x1 = startArea.x - width\n this.attrs.x2 = startArea.x + width\n this.attrs.x3 = startArea.x\n this.attrs.y1 = startArea.y + height / 2\n this.attrs.y2 = startArea.y + height / 2\n this.attrs.y3 = startArea.y - height / 2\n\n setTimeout(() => {\n this.replaceMyself(Pitchfork.fromObject(this.attrs, this.model))\n toolsCallback()\n })\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n}\n\nexport default PitchforkCreator\n","import Polygon from '../../canvas/polygon'\nimport PolygonCreator, { Area } from '../polygon'\n\nclass PolygonTouchCreator extends PolygonCreator {\n onMouseDown(area: Area) {\n this.mouseDowns++\n const first = this.attrs.points[0]\n const margin = {\n x: this.model.scale.x.invert(15),\n y: this.model.scale.y.invert(0) - this.model.scale.y.invert(15),\n }\n if (this.mouseDowns !== 1 && this.isSamePoint({ pointA: first, pointB: area, margin })) {\n this.attrs.points.shift()\n this.attrs.points.push({\n x: first.x,\n y: first.y,\n })\n this.release()\n this.replaceMyself(Polygon.fromObject(this.attrs, this.model))\n this.toolsCallback()\n } else if (this.mouseDowns !== 1 && this.isSamePoint({ pointA: this.lastMouseDown, pointB: area, margin })) {\n this.attrs.points.shift()\n this.release()\n this.replaceMyself(Polygon.fromObject(this.attrs, this.model))\n this.toolsCallback()\n } else {\n this.attrs.points[this.mouseDowns] = { x: area.x, y: area.y }\n }\n this.lastMouseDown = { x: area.x, y: area.y }\n\n this.trigger('change')\n }\n}\n\nexport default PolygonTouchCreator\n","import { PaneArea } from '../../../types/shared'\nimport Position, { IPositionAttrs } from '../../canvas/position'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IPositionAttrs\ntype PartialAttrs = Partial\n\nclass PositionCreator extends Position {\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n const width = this.model.scale.x.width(35)\n const height = this.model.scale.y.height(35)\n this.attrs.x1 = startArea.x - width\n this.attrs.x2 = startArea.x + width\n this.attrs.stopY = startArea.y + height\n this.attrs.centerY = startArea.y\n this.attrs.targetY = startArea.y - height\n\n setTimeout(() => {\n this.replaceMyself(Position.fromObject(this.attrs, this.model))\n toolsCallback()\n })\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n}\n\nexport default PositionCreator\n","import { PaneArea } from '../../../types/shared'\nimport Rectangle, { IRectangleAttrs } from '../../canvas/rectangle'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IRectangleAttrs\ntype PartialAttrs = Partial\n\nclass RectangleCreator extends Rectangle {\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n const width = this.model.scale.x.width(35)\n const height = this.model.scale.y.height(35)\n this.attrs.x1 = startArea.x - width\n this.attrs.x2 = startArea.x + width\n this.attrs.y1 = startArea.y - height\n this.attrs.y2 = startArea.y + height\n\n setTimeout(() => {\n this.replaceMyself(Rectangle.fromObject(this.attrs, this.model))\n toolsCallback()\n })\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n}\n\nexport default RectangleCreator\n","import { PaneArea } from '../../../../types/shared'\nimport RotatedRectangleV1, { IRotatedRectangleV1Attrs } from '../../../canvas/rotated_rectangle/rotated_rectangle_v1'\nimport PaneModel from '../../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IRotatedRectangleV1Attrs\ntype PartialAttrs = Partial\n\nclass RotatedRectangleV1Creator extends RotatedRectangleV1 {\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n const xAxisOffset = this.model.scale.x.width(30)\n const yAxisOffset = this.model.scale.y.height(30)\n this.attrs.x1 = startArea.x - xAxisOffset\n this.attrs.x2 = startArea.x + xAxisOffset\n this.attrs.y1 = startArea.y - yAxisOffset\n this.attrs.y2 = startArea.y + yAxisOffset\n this.attrs.cursorTargetX = startArea.x + xAxisOffset\n this.attrs.cursorTargetY = startArea.y\n\n setTimeout(() => {\n this.replaceMyself(RotatedRectangleV1.fromObject(this.attrs, this.model))\n toolsCallback()\n })\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n}\n\nexport default RotatedRectangleV1Creator\n","import { PaneArea } from '../../../types/shared'\nimport ScaledLine, { IScaledLineAttrs } from '../../canvas/scaled_line'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IScaledLineAttrs\ntype PartialAttrs = Partial\n\nclass LineCreator extends ScaledLine {\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n const width = this.model.scale.x.width(35)\n const height = this.model.scale.y.height(35)\n this.attrs.x1 = startArea.x + width\n this.attrs.x2 = startArea.x - width\n this.attrs.y1 = startArea.y - height\n this.attrs.y2 = startArea.y + height\n\n setTimeout(() => {\n this.replaceMyself(ScaledLine.fromObject(this.attrs, this.model))\n toolsCallback()\n })\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n}\n\nexport default LineCreator\n","import { PaneArea } from '../../../types/shared'\nimport ScaledText from '../../canvas/scaled_text'\nimport { ITextAttrs } from '../../canvas/text'\nimport { StyleDialogOpener } from '../../modals/element_style'\nimport ElementModel from '../../models/element'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = ITextAttrs\ntype PartialAttrs = Partial\n\nclass ScaledTextCreator extends ScaledText {\n isCreator = true\n\n constructor(\n startArea: Area,\n values: PartialAttrs,\n model: PaneModel,\n openStyleDialog: StyleDialogOpener,\n toolsCallback: () => void\n ) {\n super(values, model)\n\n this.isCreatorDialogOpen = true\n this.attrs.x = startArea.x\n this.attrs.y = startArea.y\n this.attrs.text = ''\n\n setTimeout(\n () =>\n openStyleDialog(\n this,\n (values) => {\n this.set(values)\n this.release()\n this.replaceMyself(ScaledText.fromObject(this.attrs, this.model))\n toolsCallback()\n },\n () => {\n const instance = ElementModel.findByAttribute('instance', this)\n instance?.destroy()\n }\n ),\n 0\n )\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n}\n\nexport default ScaledTextCreator\n","import { PaneArea } from '../../../types/shared'\nimport Triangle, { ITriangleAttrs } from '../../canvas/triangle'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = ITriangleAttrs\ntype PartialAttrs = Partial