\n \n \n \n );\n}\n\nexport default Resizer;\n","import {\n useState,\n useEffect,\n useMemo,\n useRef,\n useCallback,\n useContext,\n} from 'react';\nimport { hotkeys } from '@svar-ui/grid-store';\nimport { useStore, useWritableProp } from '@svar-ui/lib-react';\nimport Grid from './grid/Grid.jsx';\nimport Chart from './chart/Chart.jsx';\nimport Resizer from './Resizer.jsx';\nimport storeContext from '../context';\nimport './Layout.css';\nimport { flushSync } from 'react-dom';\n\nfunction Layout(props) {\n const { taskTemplate, readonly, onTableAPIChange, onGanttWidthChange } = props;\n\n const api = useContext(storeContext);\n\n const rTasks = useStore(api, '_tasks');\n const rScales = useStore(api, '_scales');\n const rCellHeight = useStore(api, 'cellHeight');\n const rColumns = useStore(api, 'columns');\n const rScrollTop = useStore(api, 'scrollTop');\n const undo = useStore(api, 'undo');\n const columnsWidth = useStore(api, '_columnsWidth');\n\n const [ganttWidth, setGanttWidth] = useWritableProp(props.ganttWidth);\n const [ganttHeight, setGanttHeight] = useState(0);\n const [innerWidth, setInnerWidth] = useState(undefined);\n\n const scrollSize = useMemo(\n () => (ganttWidth ?? 0) - (innerWidth ?? 0),\n [ganttWidth, innerWidth],\n );\n const fullWidth = useMemo(() => rScales.width, [rScales]);\n const fullHeight = useMemo(\n () => rTasks.length * rCellHeight,\n [rTasks, rCellHeight],\n );\n const scrollHeight = useMemo(\n () => rScales.height + fullHeight + scrollSize,\n [rScales, fullHeight, scrollSize],\n );\n\n const chartRef = useRef(null);\n\n const latestLayout = useRef({\n ganttWidth: 0,\n columnsWidth: 0,\n ganttHeight: 0,\n rScalesHeight: 0,\n scrollSize: 0,\n });\n\n useEffect(() => {\n latestLayout.current = {\n ganttWidth: ganttWidth ?? 0,\n columnsWidth,\n ganttHeight: ganttHeight ?? 0,\n rScalesHeight: rScales.height,\n scrollSize,\n };\n }, [ganttWidth, columnsWidth, ganttHeight, rScales, scrollSize]);\n\n const chartResizeHandler = useCallback(() => {\n const {\n ganttWidth: gw,\n columnsWidth: cw,\n ganttHeight: gh,\n rScalesHeight: sh,\n scrollSize: ss,\n } = latestLayout.current;\n api.exec('resize-chart', {\n width: gw - cw - ss - 4, // resizer width\n height: gh - sh,\n scrollSize: ss,\n });\n }, [api]);\n\n useEffect(() => {\n let ro;\n if (chartRef.current) {\n ro = new ResizeObserver(chartResizeHandler);\n ro.observe(chartRef.current);\n }\n return () => {\n if (ro) ro.disconnect();\n };\n }, [chartRef.current, chartResizeHandler]);\n\n const ganttDivRef = useRef(null);\n const pseudoRowsRef = useRef(null);\n const expectedScrollTop = useRef(null);\n const isUserScrollRef = useRef(false);\n\n const onScroll = useCallback(() => {\n const el = ganttDivRef.current;\n if (el && el.scrollTop !== expectedScrollTop.current) {\n expectedScrollTop.current = el.scrollTop;\n isUserScrollRef.current = true;\n api.exec('scroll-chart', {\n top: el.scrollTop,\n });\n }\n }, [api]);\n\n useEffect(() => {\n const ganttDiv = ganttDivRef.current;\n const pseudoRows = pseudoRowsRef.current;\n if (!ganttDiv || !pseudoRows) return;\n const update = () => {\n flushSync(() => {\n setGanttHeight(ganttDiv.offsetHeight);\n setGanttWidth(ganttDiv.offsetWidth);\n setInnerWidth(pseudoRows.offsetWidth);\n });\n };\n const ro = new ResizeObserver(update);\n ro.observe(ganttDiv);\n return () => ro.disconnect();\n }, [ganttDivRef.current]);\n\n useEffect(() => {\n if (onGanttWidthChange) onGanttWidthChange(ganttWidth);\n }, [ganttWidth, onGanttWidthChange]);\n\n useEffect(() => {\n const ganttDiv = ganttDivRef.current;\n if (!ganttDiv) return;\n // change originated from the user's own scroll — don't write it back,\n // otherwise we re-trigger onScroll and loop (see Layout.svelte FIXME)\n if (isUserScrollRef.current) {\n isUserScrollRef.current = false;\n return;\n }\n // only programmatic scrolls (scrollToTask, etc.) reach here\n if (rScrollTop !== ganttDiv.scrollTop) {\n expectedScrollTop.current = rScrollTop;\n ganttDiv.scrollTop = rScrollTop;\n }\n }, [rScrollTop]);\n\n const layoutRef = useRef(null);\n\n useEffect(() => {\n const node = layoutRef.current;\n if (!node) return;\n\n const cleanup = hotkeys(node, {\n keys: {\n 'ctrl+c': true,\n 'ctrl+v': true,\n 'ctrl+x': true,\n 'ctrl+d': true,\n backspace: true,\n 'ctrl+z': undo,\n 'ctrl+y': undo,\n },\n exec: (ev) => {\n if (!ev.isInput) api.exec('hotkey', ev);\n },\n });\n\n return () => {\n cleanup?.destroy();\n };\n }, [undo]);\n\n return (\n \n
\n \n \n {rColumns.length ? (\n <>\n
\n
\n \n ) : null}\n\n
\n \n
\n
\n\t\t\t\n\t\t\t\t\t`wx-editor-cell wx-text-${col.align} ${col.id === 'delete' ? 'wx-action' : ''}`}\n\t\t\t\tsizes={sizes || {}}\n\t\t\t/>\n\t\t
\n\t);\n}\n\nexport default GridSection;\n","import { useMemo } from 'react';\nimport './LinkTypeCell.css';\n\nfunction LinkTypeCell(props) {\n\tconst { row, column, data } = props;\n\n\tconst label = useMemo(() => {\n\t\tif (data) return data.label;\n\t\treturn column.options.find(op => op.id === row.type)?.label || '';\n\t}, [data, column, row]);\n\n\treturn (\n\t\t\n\t\t\t
{label}
\n\t\t\t{row &&
}\n\t\t
\n {(linksData || []).map((group, idx) =>\n group.data.length ? (\n
\n {group.title}
\n \n \n ) : null,\n )}\n {isMessage ? (\n
{_('No links')}
\n ) : null}\n
\n \n {time ? (\n \n ) : null}\n
\n );\n}\n","import { useMemo } from 'react';\nimport { Avatar } from '@svar-ui/react-core';\nimport './ResourcesEditorCell.css';\n\nfunction ResourcesEditorCell(props) {\n\tconst { row, data } = props;\n\n\tconst item = useMemo(() => data || row, [data, row]);\n\n\tif (!item) return null;\n\n\treturn (\n\t\t<>\n\t\t\t\n\t\t\t\n\t\t\t\t
{item.name}
\n\t\t\t\t{item.role ? (\n\t\t\t\t\t
{item.role}
\n\t\t\t\t) : null}\n\t\t\t
\n {taskResources.length || newRowId ? (\n
\n ) : (\n
{_('No assignments')}
\n )}\n
\n \n {_('Add resource')}\n \n
\n
\n {segmentsState.length ? (\n
\n ) : (\n
{_('No segments')}
\n )}\n
\n\t\t\t{row.data ? (\n\t\t\t\t
\n\t\t\t) : (\n\t\t\t\t\n\t\t\t)}\n\t\t\t\n\t\t\t\t{Cell ? (\n\t\t\t\t\t
| \n\t\t\t\t) : row.role ? (\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
{row.name}\n\t\t\t\t\t
\n\t\t\t\t) : (\n\t\t\t\t\trow.name\n\t\t\t\t)}\n\t\t\t
\n\t\t\t
\n\t\t\t\t{Cell ? (\n\t\t\t\t\t
| \n\t\t\t\t) : row.role ? (\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t) : (\n\t\t\t\t\trow.name\n\t\t\t\t)}\n\t\t\t
\n\t\t
\n\t\t\t{column.template(getValue(row, column))}\n\t\t
\n\t);\n}\n\nexport default LoadCell;\n","import {\n useState,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useContext,\n useCallback,\n} from 'react';\nimport { locateID } from '@svar-ui/lib-dom';\nimport { getResourceColumns, normalizeResourceColumns } from '@svar-ui/gantt-store';\nimport { locale } from '@svar-ui/lib-dom';\nimport { en } from '@svar-ui/gantt-locales';\nimport { en as coreEn } from '@svar-ui/core-locales';\nimport { getValue } from '@svar-ui/grid-store';\nimport { useStore } from '@svar-ui/lib-react';\nimport { context } from '@svar-ui/react-core';\n\nimport { Grid } from '@svar-ui/react-grid';\nimport TimeScales from '../chart/TimeScale.jsx';\nimport Resizer from '../Resizer.jsx';\nimport NameCell from './NameCell.jsx';\nimport NameCellCompact from './NameCellCompact.jsx';\nimport LoadCell from './LoadCell.jsx';\n\nimport {\n getFlexBasis,\n getFitColumns,\n getFillColumn,\n getColumnsWidth,\n getSortMarks,\n getResourceLoadColumns,\n getScrollbarWidth,\n} from '../../helpers/grid';\nimport { createZoomWheelHandler } from '../../helpers/zoom';\n\nimport './ResourceLoad.css';\n\nfunction ResourceLoad(props) {\n const { api, mode = 'grid', template } = props;\n\n const columns = useMemo(\n () => props.columns || getResourceColumns(),\n [props.columns],\n );\n\n // detect scrollbar width that may differ in browsers\n const [scrollbarWidth, setScrollbarWidth] = useState(17);\n useEffect(() => {\n const width = getScrollbarWidth();\n setScrollbarWidth((prev) => (prev === width ? prev : width));\n }, []);\n\n const rResources = useStore(api, '_resources');\n const rScales = useStore(api, '_scales');\n const rResourceSort = useStore(api, '_resourceSort');\n const cellHeight = useStore(api, 'cellHeight');\n const ganttColumns = useStore(api, 'columns');\n const gridWidth = useStore(api, 'gridWidth');\n const displayMode = useStore(api, 'displayMode');\n const headerLength = useStore(api, '_headerLength');\n const highlightTime = useStore(api, 'highlightTime');\n const columnsWidth = useStore(api, '_columnsWidth');\n const gridCollapseThreshold = useStore(api, '_gridCollapseThreshold');\n const cellBorders = useStore(api, 'cellBorders');\n const zoom = useStore(api, 'zoom');\n\n const lFromCtx = useContext(context.i18n);\n const l = useMemo(() => lFromCtx || locale({ ...en, ...coreEn }), [lFromCtx]);\n const _ = useMemo(() => l.getGroup('gantt'), [l]);\n\n const [containerWidth, setContainerWidth] = useState(0);\n const [gridClientWidth, setGridClientWidth] = useState(0);\n const [rightContainerHeight, setRightContainerHeight] = useState(0);\n\n const containerRef = useRef(null);\n const gridContainerRef = useRef(null);\n const scaleContainerRef = useRef(null);\n const scalesDiv = useRef(null);\n const chartContainerRef = useRef(null);\n\n const zoomRef = useRef(zoom);\n zoomRef.current = zoom;\n\n const leftApiRef = useRef(null);\n const rightApiRef = useRef(null);\n const scrollLeftRef = useRef(0);\n const expectedScrollLeftRef = useRef(0);\n const isUserScrollRef = useRef(false);\n\n const [selectedRows, setSelectedRows] = useState([]);\n\n const finalColumns = useMemo(() => {\n if (!columns || !columns.length) return [];\n let cols = normalizeResourceColumns(columns).map((col) => {\n col = { ...col };\n const header = col.header;\n if (typeof header === 'object') {\n const text = header.text && _(header.text);\n col.header = { ...header, text };\n } else col.header = _(header);\n\n col.align = col.align || 'left';\n col.editor = false;\n return col;\n });\n const ni = cols.findIndex((c) => c.id === 'name');\n\n if (ni !== -1) {\n if (cols[ni].cell) cols[ni]._cell = cols[ni].cell;\n cols[ni] = {\n ...cols[ni],\n header: displayMode === 'chart' ? '' : cols[ni].header,\n cell: displayMode === 'chart' ? NameCellCompact : NameCell,\n };\n }\n\n if (cols.length > 0) cols[cols.length - 1].resize = false;\n return cols;\n }, [columns, _, displayMode]);\n\n const sortMarks = useMemo(\n () => getSortMarks(rResources, rResourceSort),\n [rResources, rResourceSort]\n );\n\n const [columnWidth, setColumnWidth] = useState(0);\n\n useEffect(() => {\n let width;\n if (columnsWidth) width = columnsWidth;\n else if (displayMode === 'chart') width = gridCollapseThreshold || 0;\n else width = gridWidth;\n setColumnWidth((prev) => (prev === width ? prev : width));\n }, [columnsWidth, displayMode, gridCollapseThreshold, gridWidth]);\n\n const fitColumns = useMemo(\n () => getFitColumns(finalColumns, displayMode, 'name'),\n [finalColumns, displayMode]\n );\n\n const finalColumnsRef = useRef(finalColumns);\n useEffect(() => {\n finalColumnsRef.current = finalColumns;\n }, [finalColumns]);\n\n const rightColumns = useMemo(\n () => getResourceLoadColumns(rScales, LoadCell, template),\n [rScales, template]\n );\n\n const flexBasis = useMemo(\n () => getFlexBasis(ganttColumns || [], displayMode, gridWidth),\n [ganttColumns, displayMode, gridWidth]\n );\n\n // right grid V-scroll eats one scrollbar width on the right; timescales\n // must match so the time axis aligns at horizontal-max.\n const rightHasHScroll = useMemo(\n () => (rScales?.width ?? 0) > containerWidth - gridClientWidth,\n [rScales, containerWidth, gridClientWidth]\n );\n\n const rightHasVScroll = useMemo(() => {\n const contentH = rResources?.length * cellHeight;\n const viewportH =\n rightContainerHeight - (rightHasHScroll ? scrollbarWidth : 0);\n return contentH > viewportH;\n }, [\n rResources,\n cellHeight,\n rightContainerHeight,\n rightHasHScroll,\n scrollbarWidth,\n ]);\n\n // left grid only overflows once its own X scrollbar appears. If the Y\n // scrollbar is clipped, that hidden strip also delays the X overflow.\n const leftHasHScroll = useMemo(\n () => columnWidth > gridClientWidth + (rightHasVScroll ? scrollbarWidth : 0),\n [columnWidth, gridClientWidth, rightHasVScroll, scrollbarWidth]\n );\n\n const syncHorizontalScroll = useCallback((left) => {\n expectedScrollLeftRef.current = left;\n\n rightApiRef.current?.exec('scroll-to', { left });\n if (scalesDiv.current && Math.abs(scalesDiv.current.scrollLeft - left) > 1)\n scalesDiv.current.scrollLeft = left;\n }, []);\n\n useLayoutEffect(() => {\n if (!api) return;\n\n const scrollLeftStore = api.getReactiveState?.().scrollLeft;\n if (!scrollLeftStore?.subscribe) return;\n\n const handleScrollLeft = (value) => {\n const left = value ?? 0;\n scrollLeftRef.current = left;\n if (isUserScrollRef.current) {\n isUserScrollRef.current = false;\n return;\n }\n syncHorizontalScroll(left);\n };\n\n const unsubscribe = scrollLeftStore.subscribe(handleScrollLeft);\n const currentLeft = api.getState?.().scrollLeft;\n if (currentLeft !== undefined) handleScrollLeft(currentLeft);\n\n return () => {\n if (typeof unsubscribe === 'function') unsubscribe();\n else unsubscribe?.unsubscribe?.();\n };\n }, [api, syncHorizontalScroll]);\n\n // FIXME - temporary hack to provide fresh values to grid's handlers\n const handlersStateRef = useRef(null);\n const setHandlersState = () => {\n handlersStateRef.current = {\n api,\n rResourceSort,\n syncHorizontalScroll,\n };\n };\n setHandlersState();\n useEffect(() => {\n setHandlersState();\n }, [api, rResourceSort, syncHorizontalScroll]);\n\n // track container/grid sizes (offsetWidth / clientWidth / clientHeight)\n useEffect(() => {\n const ro = new ResizeObserver(() => {\n if (containerRef.current)\n setContainerWidth(containerRef.current.offsetWidth);\n if (gridContainerRef.current)\n setGridClientWidth(gridContainerRef.current.clientWidth);\n if (scaleContainerRef.current)\n setRightContainerHeight(scaleContainerRef.current.clientHeight);\n });\n if (containerRef.current) ro.observe(containerRef.current);\n if (gridContainerRef.current) ro.observe(gridContainerRef.current);\n if (scaleContainerRef.current) ro.observe(scaleContainerRef.current);\n // initial read\n if (containerRef.current)\n setContainerWidth(containerRef.current.offsetWidth);\n if (gridContainerRef.current)\n setGridClientWidth(gridContainerRef.current.clientWidth);\n if (scaleContainerRef.current)\n setRightContainerHeight(scaleContainerRef.current.clientHeight);\n return () => ro.disconnect();\n }, []);\n\n function onClick(ev) {\n const action = ev.target.dataset.action;\n if (action === 'open-resource-row') {\n ev.preventDefault();\n const id = locateID(ev);\n const task = rResources.find((a) => a.id === id);\n if (task.data) api.exec(action, { id, mode: !task.open });\n }\n }\n\n const initLeft = useCallback((lapi) => {\n leftApiRef.current = lapi;\n lapi.on('select-row', (ev) => {\n setSelectedRows((prev) => (prev[0] === ev.id ? prev : [ev.id]));\n });\n lapi.intercept('sort-rows', (ev) => {\n const { key, add } = ev;\n const { api, rResourceSort } = handlersStateRef.current;\n const keySort = rResourceSort\n ? rResourceSort.find((s) => s.key === key)\n : null;\n let order = 'asc';\n if (keySort) order = !keySort || keySort.order === 'asc' ? 'desc' : 'asc';\n\n api.exec('sort-resources', {\n key,\n order,\n add,\n _columns: finalColumnsRef.current,\n });\n return false;\n });\n\n lapi.intercept('resize-column', (ev) => {\n ev.flexgrowFallback = getFillColumn(finalColumnsRef.current, ev.id);\n });\n\n lapi.on('resize-column', () => {\n setColumnWidth(getColumnsWidth(lapi.getState().columns));\n });\n\n lapi.on('scroll-to', (ev) => {\n if (ev.top !== undefined && !ev.rSync)\n rightApiRef.current?.exec('scroll-to', {\n top: ev.top,\n rSync: true,\n });\n });\n }, []);\n\n const initRight = useCallback((rapi) => {\n rightApiRef.current = rapi;\n handlersStateRef.current.syncHorizontalScroll(expectedScrollLeftRef.current);\n\n rapi.on('select-row', (ev) => {\n setSelectedRows((prev) => (prev[0] === ev.id ? prev : [ev.id]));\n });\n\n rapi.on('scroll-to', (ev) => {\n if (\n ev.left !== undefined &&\n !ev.rSync &&\n Math.abs(ev.left - expectedScrollLeftRef.current) > 1\n ) {\n expectedScrollLeftRef.current = ev.left;\n scrollLeftRef.current = ev.left;\n isUserScrollRef.current = true;\n if (\n scalesDiv.current &&\n Math.abs(scalesDiv.current.scrollLeft - ev.left) > 1\n )\n scalesDiv.current.scrollLeft = ev.left;\n handlersStateRef.current.api.exec('scroll-chart', { left: ev.left });\n }\n if (ev.top !== undefined && !ev.rSync)\n leftApiRef.current?.exec('scroll-to', {\n top: ev.top,\n rSync: true,\n });\n });\n }, []);\n\n function getCellStyle(row, col) {\n const value = getValue(row, col);\n if (value) {\n return value.percent > 100 ? ' wx-overload' : ' wx-normal';\n }\n\n if (col.unit !== 'day' && col.unit !== 'hour') return '';\n\n const resourceCalendar = api.getResourceCalendar(row);\n if (resourceCalendar) {\n const isWorkingDay = resourceCalendar.isWorkingDay(col.date);\n if (!isWorkingDay) return resourceCalendar.css ?? 'wx-weekend';\n } else if (highlightTime) return highlightTime(col.date, col.unit);\n\n return '';\n }\n\n const onWheel = useMemo(\n () =>\n api\n ? createZoomWheelHandler(\n api,\n () => zoomRef.current,\n () => chartContainerRef.current,\n )\n : null,\n [api],\n );\n\n // attach wheel manually: React's onWheel prop is passive and can't preventDefault\n useEffect(() => {\n const node = chartContainerRef.current;\n if (!node || !onWheel) return;\n node.addEventListener('wheel', onWheel);\n return () => node.removeEventListener('wheel', onWheel);\n }, [onWheel]);\n\n if (!api) return null;\n\n return (\n \n \n {columns && columns.length ? (\n <>\n
\n \n
\n `wx-text-${col.align}`}\n data={rResources || []}\n columns={fitColumns}\n sortMarks={sortMarks}\n selectedRows={selectedRows}\n />\n