@operato/gantt 2.0.0-beta.0 → 2.0.0-beta.1

package/src/renderer.txt

@@ -1,775 +0,0 @@
-import dayjs from 'dayjs'
-import {
-  select,
-  scaleTime,
-  min,
-  max,
-  scaleLinear,
-  interpolateHcl,
-  axisBottom,
-  axisTop,
-  timeFormat,
-  timeMillisecond,
-  timeSecond,
-  timeMinute,
-  timeHour,
-  timeDay,
-  timeMonday,
-  timeTuesday,
-  timeWednesday,
-  timeThursday,
-  timeFriday,
-  timeSaturday,
-  timeSunday,
-  timeMonth
-} from 'd3'
-import common from '../common/common.js'
-import { getConfig } from '../../diagram-api/diagramAPI.js'
-import { configureSvgSize } from '../../setupGraphViewbox.js'
-
-export const setConf = function () {
-  console.log('Something is calling, setConf, remove the call')
-}
-
-/**
- * This will map any day of the week that can be set in the `weekday` option to
- * the corresponding d3-time function that is used to calculate the ticks.
- */
-const mapWeekdayToTimeFunction = {
-  monday: timeMonday,
-  tuesday: timeTuesday,
-  wednesday: timeWednesday,
-  thursday: timeThursday,
-  friday: timeFriday,
-  saturday: timeSaturday,
-  sunday: timeSunday
-}
-
-/**
- * For this issue:
- * https://github.com/mermaid-js/mermaid/issues/1618
- *
- * Finds the number of intersections between tasks that happen at any point in time.
- * Used to figure out how many rows are needed to display the tasks when the display
- * mode is set to 'compact'.
- *
- * @param tasks
- * @param orderOffset
- */
-const getMaxIntersections = (tasks, orderOffset) => {
-  let timeline = [...tasks].map(() => -Infinity)
-  let sorted = [...tasks].sort((a, b) => a.startTime - b.startTime || a.order - b.order)
-  let maxIntersections = 0
-  for (const element of sorted) {
-    for (let j = 0; j < timeline.length; j++) {
-      if (element.startTime >= timeline[j]) {
-        timeline[j] = element.endTime
-        element.order = j + orderOffset
-        if (j > maxIntersections) {
-          maxIntersections = j
-        }
-        break
-      }
-    }
-  }
-
-  return maxIntersections
-}
-
-let w
-export const draw = function (text, id, version, diagObj) {
-  const conf = getConfig().gantt
-
-  const securityLevel = getConfig().securityLevel
-  // Handle root and Document for when rendering in sandbox mode
-  let sandboxElement
-  if (securityLevel === 'sandbox') {
-    sandboxElement = select('#i' + id)
-  }
-  const root = securityLevel === 'sandbox' ? select(sandboxElement.nodes()[0].contentDocument.body) : select('body')
-  const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document
-
-  const elem = doc.getElementById(id)
-  w = elem.parentElement.offsetWidth
-
-  if (w === undefined) {
-    w = 1200
-  }
-
-  if (conf.useWidth !== undefined) {
-    w = conf.useWidth
-  }
-
-  const taskArray = diagObj.db.getTasks()
-
-  // Set height based on number of tasks
-
-  let categories = []
-
-  for (const element of taskArray) {
-    categories.push(element.type)
-  }
-
-  categories = checkUnique(categories)
-  const categoryHeights = {}
-
-  let h = 2 * conf.topPadding
-  if (diagObj.db.getDisplayMode() === 'compact' || conf.displayMode === 'compact') {
-    const categoryElements = {}
-    for (const element of taskArray) {
-      if (categoryElements[element.section] === undefined) {
-        categoryElements[element.section] = [element]
-      } else {
-        categoryElements[element.section].push(element)
-      }
-    }
-
-    let intersections = 0
-    for (const category of Object.keys(categoryElements)) {
-      const categoryHeight = getMaxIntersections(categoryElements[category], intersections) + 1
-      intersections += categoryHeight
-      h += categoryHeight * (conf.barHeight + conf.barGap)
-      categoryHeights[category] = categoryHeight
-    }
-  } else {
-    h += taskArray.length * (conf.barHeight + conf.barGap)
-    for (const category of categories) {
-      categoryHeights[category] = taskArray.filter(task => task.type === category).length
-    }
-  }
-
-  // Set viewBox
-  elem.setAttribute('viewBox', '0 0 ' + w + ' ' + h)
-  const svg = root.select(`[id="${id}"]`)
-
-  // Set timescale
-  const timeScale = scaleTime()
-    .domain([
-      min(taskArray, function (d) {
-        return d.startTime
-      }),
-      max(taskArray, function (d) {
-        return d.endTime
-      })
-    ])
-    .rangeRound([0, w - conf.leftPadding - conf.rightPadding])
-
-  /**
-   * @param a
-   * @param b
-   */
-  function taskCompare(a, b) {
-    const taskA = a.startTime
-    const taskB = b.startTime
-    let result = 0
-    if (taskA > taskB) {
-      result = 1
-    } else if (taskA < taskB) {
-      result = -1
-    }
-    return result
-  }
-
-  // Sort the task array using the above taskCompare() so that
-  // tasks are created based on their order of startTime
-  taskArray.sort(taskCompare)
-
-  makeGantt(taskArray, w, h)
-
-  configureSvgSize(svg, h, w, conf.useMaxWidth)
-
-  svg
-    .append('text')
-    .text(diagObj.db.getDiagramTitle())
-    .attr('x', w / 2)
-    .attr('y', conf.titleTopMargin)
-    .attr('class', 'titleText')
-
-  /**
-   * @param tasks
-   * @param pageWidth
-   * @param pageHeight
-   */
-  function makeGantt(tasks, pageWidth, pageHeight) {
-    const barHeight = conf.barHeight
-    const gap = barHeight + conf.barGap
-    const topPadding = conf.topPadding
-    const leftPadding = conf.leftPadding
-
-    const colorScale = scaleLinear()
-      .domain([0, categories.length])
-      .range(['#00B9FA', '#F95002'])
-      .interpolate(interpolateHcl)
-
-    drawExcludeDays(
-      gap,
-      topPadding,
-      leftPadding,
-      pageWidth,
-      pageHeight,
-      tasks,
-      diagObj.db.getExcludes(),
-      diagObj.db.getIncludes()
-    )
-    makeGrid(leftPadding, topPadding, pageWidth, pageHeight)
-    drawRects(tasks, gap, topPadding, leftPadding, barHeight, colorScale, pageWidth, pageHeight)
-    vertLabels(gap, topPadding, leftPadding, barHeight, colorScale)
-    drawToday(leftPadding, topPadding, pageWidth, pageHeight)
-  }
-
-  /**
-   * @param theArray
-   * @param theGap
-   * @param theTopPad
-   * @param theSidePad
-   * @param theBarHeight
-   * @param theColorScale
-   * @param w
-   */
-  function drawRects(theArray, theGap, theTopPad, theSidePad, theBarHeight, theColorScale, w) {
-    // Get unique task orders. Required to draw the background rects when display mode is compact.
-    const uniqueTaskOrderIds = [...new Set(theArray.map(item => item.order))]
-    const uniqueTasks = uniqueTaskOrderIds.map(id => theArray.find(item => item.order === id))
-
-    // Draw background rects covering the entire width of the graph, these form the section rows.
-    svg
-      .append('g')
-      .selectAll('rect')
-      .data(uniqueTasks)
-      .enter()
-      .append('rect')
-      .attr('x', 0)
-      .attr('y', function (d, i) {
-        // Ignore the incoming i value and use our order instead
-        i = d.order
-        return i * theGap + theTopPad - 2
-      })
-      .attr('width', function () {
-        return w - conf.rightPadding / 2
-      })
-      .attr('height', theGap)
-      .attr('class', function (d) {
-        for (const [i, category] of categories.entries()) {
-          if (d.type === category) {
-            return 'section section' + (i % conf.numberSectionStyles)
-          }
-        }
-        return 'section section0'
-      })
-
-    // Draw the rects representing the tasks
-    const rectangles = svg.append('g').selectAll('rect').data(theArray).enter()
-
-    const links = diagObj.db.getLinks()
-
-    // Render the tasks with links
-    // Render the other tasks
-    rectangles
-      .append('rect')
-      .attr('id', function (d) {
-        return d.id
-      })
-      .attr('rx', 3)
-      .attr('ry', 3)
-      .attr('x', function (d) {
-        if (d.milestone) {
-          return (
-            timeScale(d.startTime) +
-            theSidePad +
-            0.5 * (timeScale(d.endTime) - timeScale(d.startTime)) -
-            0.5 * theBarHeight
-          )
-        }
-        return timeScale(d.startTime) + theSidePad
-      })
-      .attr('y', function (d, i) {
-        // Ignore the incoming i value and use our order instead
-        i = d.order
-        return i * theGap + theTopPad
-      })
-      .attr('width', function (d) {
-        if (d.milestone) {
-          return theBarHeight
-        }
-        return timeScale(d.renderEndTime || d.endTime) - timeScale(d.startTime)
-      })
-      .attr('height', theBarHeight)
-      .attr('transform-origin', function (d, i) {
-        // Ignore the incoming i value and use our order instead
-        i = d.order
-
-        return (
-          (timeScale(d.startTime) + theSidePad + 0.5 * (timeScale(d.endTime) - timeScale(d.startTime))).toString() +
-          'px ' +
-          (i * theGap + theTopPad + 0.5 * theBarHeight).toString() +
-          'px'
-        )
-      })
-      .attr('class', function (d) {
-        const res = 'task'
-
-        let classStr = ''
-        if (d.classes.length > 0) {
-          classStr = d.classes.join(' ')
-        }
-
-        let secNum = 0
-        for (const [i, category] of categories.entries()) {
-          if (d.type === category) {
-            secNum = i % conf.numberSectionStyles
-          }
-        }
-
-        let taskClass = ''
-        if (d.active) {
-          if (d.crit) {
-            taskClass += ' activeCrit'
-          } else {
-            taskClass = ' active'
-          }
-        } else if (d.done) {
-          if (d.crit) {
-            taskClass = ' doneCrit'
-          } else {
-            taskClass = ' done'
-          }
-        } else {
-          if (d.crit) {
-            taskClass += ' crit'
-          }
-        }
-
-        if (taskClass.length === 0) {
-          taskClass = ' task'
-        }
-
-        if (d.milestone) {
-          taskClass = ' milestone ' + taskClass
-        }
-
-        taskClass += secNum
-
-        taskClass += ' ' + classStr
-
-        return res + taskClass
-      })
-
-    // Append task labels
-    rectangles
-      .append('text')
-      .attr('id', function (d) {
-        return d.id + '-text'
-      })
-      .text(function (d) {
-        return d.task
-      })
-      .attr('font-size', conf.fontSize)
-      .attr('x', function (d) {
-        let startX = timeScale(d.startTime)
-        let endX = timeScale(d.renderEndTime || d.endTime)
-        if (d.milestone) {
-          startX += 0.5 * (timeScale(d.endTime) - timeScale(d.startTime)) - 0.5 * theBarHeight
-        }
-        if (d.milestone) {
-          endX = startX + theBarHeight
-        }
-        const textWidth = this.getBBox().width
-
-        // Check id text width > width of rectangle
-        if (textWidth > endX - startX) {
-          if (endX + textWidth + 1.5 * conf.leftPadding > w) {
-            return startX + theSidePad - 5
-          } else {
-            return endX + theSidePad + 5
-          }
-        } else {
-          return (endX - startX) / 2 + startX + theSidePad
-        }
-      })
-      .attr('y', function (d, i) {
-        // Ignore the incoming i value and use our order instead
-        i = d.order
-        return i * theGap + conf.barHeight / 2 + (conf.fontSize / 2 - 2) + theTopPad
-      })
-      .attr('text-height', theBarHeight)
-      .attr('class', function (d) {
-        const startX = timeScale(d.startTime)
-        let endX = timeScale(d.endTime)
-        if (d.milestone) {
-          endX = startX + theBarHeight
-        }
-        const textWidth = this.getBBox().width
-
-        let classStr = ''
-        if (d.classes.length > 0) {
-          classStr = d.classes.join(' ')
-        }
-
-        let secNum = 0
-        for (const [i, category] of categories.entries()) {
-          if (d.type === category) {
-            secNum = i % conf.numberSectionStyles
-          }
-        }
-
-        let taskType = ''
-        if (d.active) {
-          if (d.crit) {
-            taskType = 'activeCritText' + secNum
-          } else {
-            taskType = 'activeText' + secNum
-          }
-        }
-
-        if (d.done) {
-          if (d.crit) {
-            taskType = taskType + ' doneCritText' + secNum
-          } else {
-            taskType = taskType + ' doneText' + secNum
-          }
-        } else {
-          if (d.crit) {
-            taskType = taskType + ' critText' + secNum
-          }
-        }
-
-        if (d.milestone) {
-          taskType += ' milestoneText'
-        }
-
-        // Check id text width > width of rectangle
-        if (textWidth > endX - startX) {
-          if (endX + textWidth + 1.5 * conf.leftPadding > w) {
-            return classStr + ' taskTextOutsideLeft taskTextOutside' + secNum + ' ' + taskType
-          } else {
-            return classStr + ' taskTextOutsideRight taskTextOutside' + secNum + ' ' + taskType + ' width-' + textWidth
-          }
-        } else {
-          return classStr + ' taskText taskText' + secNum + ' ' + taskType + ' width-' + textWidth
-        }
-      })
-
-    const securityLevel = getConfig().securityLevel
-
-    // Wrap the tasks in an a tag for working links without javascript
-    if (securityLevel === 'sandbox') {
-      let sandboxElement
-      sandboxElement = select('#i' + id)
-      const doc = sandboxElement.nodes()[0].contentDocument
-
-      rectangles
-        .filter(function (d) {
-          return links[d.id] !== undefined
-        })
-        .each(function (o) {
-          var taskRect = doc.querySelector('#' + o.id)
-          var taskText = doc.querySelector('#' + o.id + '-text')
-          const oldParent = taskRect.parentNode
-          var Link = doc.createElement('a')
-          Link.setAttribute('xlink:href', links[o.id])
-          Link.setAttribute('target', '_top')
-          oldParent.appendChild(Link)
-          Link.appendChild(taskRect)
-          Link.appendChild(taskText)
-        })
-    }
-  }
-  /**
-   * @param theGap
-   * @param theTopPad
-   * @param theSidePad
-   * @param w
-   * @param h
-   * @param tasks
-   * @param {unknown[]} excludes
-   * @param {unknown[]} includes
-   */
-  function drawExcludeDays(theGap, theTopPad, theSidePad, w, h, tasks, excludes, includes) {
-    if (excludes.length === 0 && includes.length === 0) {
-      return
-    }
-
-    let minTime
-    let maxTime
-    for (const { startTime, endTime } of tasks) {
-      if (minTime === undefined || startTime < minTime) {
-        minTime = startTime
-      }
-      if (maxTime === undefined || endTime > maxTime) {
-        maxTime = endTime
-      }
-    }
-
-    if (!minTime || !maxTime) {
-      return
-    }
-
-    if (dayjs(maxTime).diff(dayjs(minTime), 'year') > 5) {
-      console.warn(
-        'The difference between the min and max time is more than 5 years. This will cause performance issues. Skipping drawing exclude days.'
-      )
-      return
-    }
-
-    const dateFormat = diagObj.db.getDateFormat()
-    const excludeRanges = []
-    let range = null
-    let d = dayjs(minTime)
-    while (d.valueOf() <= maxTime) {
-      if (diagObj.db.isInvalidDate(d, dateFormat, excludes, includes)) {
-        if (!range) {
-          range = {
-            start: d,
-            end: d
-          }
-        } else {
-          range.end = d
-        }
-      } else {
-        if (range) {
-          excludeRanges.push(range)
-          range = null
-        }
-      }
-      d = d.add(1, 'd')
-    }
-
-    const rectangles = svg.append('g').selectAll('rect').data(excludeRanges).enter()
-
-    rectangles
-      .append('rect')
-      .attr('id', function (d) {
-        return 'exclude-' + d.start.format('YYYY-MM-DD')
-      })
-      .attr('x', function (d) {
-        return timeScale(d.start) + theSidePad
-      })
-      .attr('y', conf.gridLineStartPadding)
-      .attr('width', function (d) {
-        const renderEnd = d.end.add(1, 'day')
-        return timeScale(renderEnd) - timeScale(d.start)
-      })
-      .attr('height', h - theTopPad - conf.gridLineStartPadding)
-      .attr('transform-origin', function (d, i) {
-        return (
-          (timeScale(d.start) + theSidePad + 0.5 * (timeScale(d.end) - timeScale(d.start))).toString() +
-          'px ' +
-          (i * theGap + 0.5 * h).toString() +
-          'px'
-        )
-      })
-      .attr('class', 'exclude-range')
-  }
-
-  /**
-   * @param theSidePad
-   * @param theTopPad
-   * @param w
-   * @param h
-   */
-  function makeGrid(theSidePad, theTopPad, w, h) {
-    let bottomXAxis = axisBottom(timeScale)
-      .tickSize(-h + theTopPad + conf.gridLineStartPadding)
-      .tickFormat(timeFormat(diagObj.db.getAxisFormat() || conf.axisFormat || '%Y-%m-%d'))
-
-    const reTickInterval = /^([1-9]\d*)(millisecond|second|minute|hour|day|week|month)$/
-    const resultTickInterval = reTickInterval.exec(diagObj.db.getTickInterval() || conf.tickInterval)
-
-    if (resultTickInterval !== null) {
-      const every = resultTickInterval[1]
-      const interval = resultTickInterval[2]
-      const weekday = diagObj.db.getWeekday() || conf.weekday
-
-      switch (interval) {
-        case 'millisecond':
-          bottomXAxis.ticks(timeMillisecond.every(every))
-          break
-        case 'second':
-          bottomXAxis.ticks(timeSecond.every(every))
-          break
-        case 'minute':
-          bottomXAxis.ticks(timeMinute.every(every))
-          break
-        case 'hour':
-          bottomXAxis.ticks(timeHour.every(every))
-          break
-        case 'day':
-          bottomXAxis.ticks(timeDay.every(every))
-          break
-        case 'week':
-          bottomXAxis.ticks(mapWeekdayToTimeFunction[weekday].every(every))
-          break
-        case 'month':
-          bottomXAxis.ticks(timeMonth.every(every))
-          break
-      }
-    }
-
-    svg
-      .append('g')
-      .attr('class', 'grid')
-      .attr('transform', 'translate(' + theSidePad + ', ' + (h - 50) + ')')
-      .call(bottomXAxis)
-      .selectAll('text')
-      .style('text-anchor', 'middle')
-      .attr('fill', '#000')
-      .attr('stroke', 'none')
-      .attr('font-size', 10)
-      .attr('dy', '1em')
-
-    if (diagObj.db.topAxisEnabled() || conf.topAxis) {
-      let topXAxis = axisTop(timeScale)
-        .tickSize(-h + theTopPad + conf.gridLineStartPadding)
-        .tickFormat(timeFormat(diagObj.db.getAxisFormat() || conf.axisFormat || '%Y-%m-%d'))
-
-      if (resultTickInterval !== null) {
-        const every = resultTickInterval[1]
-        const interval = resultTickInterval[2]
-        const weekday = diagObj.db.getWeekday() || conf.weekday
-
-        switch (interval) {
-          case 'millisecond':
-            topXAxis.ticks(timeMillisecond.every(every))
-            break
-          case 'second':
-            topXAxis.ticks(timeSecond.every(every))
-            break
-          case 'minute':
-            topXAxis.ticks(timeMinute.every(every))
-            break
-          case 'hour':
-            topXAxis.ticks(timeHour.every(every))
-            break
-          case 'day':
-            topXAxis.ticks(timeDay.every(every))
-            break
-          case 'week':
-            topXAxis.ticks(mapWeekdayToTimeFunction[weekday].every(every))
-            break
-          case 'month':
-            topXAxis.ticks(timeMonth.every(every))
-            break
-        }
-      }
-
-      svg
-        .append('g')
-        .attr('class', 'grid')
-        .attr('transform', 'translate(' + theSidePad + ', ' + theTopPad + ')')
-        .call(topXAxis)
-        .selectAll('text')
-        .style('text-anchor', 'middle')
-        .attr('fill', '#000')
-        .attr('stroke', 'none')
-        .attr('font-size', 10)
-      // .attr('dy', '1em');
-    }
-  }
-
-  /**
-   * @param theGap
-   * @param theTopPad
-   */
-  function vertLabels(theGap, theTopPad) {
-    let prevGap = 0
-
-    const numOccurrences = Object.keys(categoryHeights).map(d => [d, categoryHeights[d]])
-
-    svg
-      .append('g') // without doing this, impossible to put grid lines behind text
-      .selectAll('text')
-      .data(numOccurrences)
-      .enter()
-      .append(function (d) {
-        const rows = d[0].split(common.lineBreakRegex)
-        const dy = -(rows.length - 1) / 2
-
-        const svgLabel = doc.createElementNS('http://www.w3.org/2000/svg', 'text')
-        svgLabel.setAttribute('dy', dy + 'em')
-
-        for (const [j, row] of rows.entries()) {
-          const tspan = doc.createElementNS('http://www.w3.org/2000/svg', 'tspan')
-          tspan.setAttribute('alignment-baseline', 'central')
-          tspan.setAttribute('x', '10')
-          if (j > 0) {
-            tspan.setAttribute('dy', '1em')
-          }
-          tspan.textContent = row
-          svgLabel.appendChild(tspan)
-        }
-        return svgLabel
-      })
-      .attr('x', 10)
-      .attr('y', function (d, i) {
-        if (i > 0) {
-          for (let j = 0; j < i; j++) {
-            prevGap += numOccurrences[i - 1][1]
-            return (d[1] * theGap) / 2 + prevGap * theGap + theTopPad
-          }
-        } else {
-          return (d[1] * theGap) / 2 + theTopPad
-        }
-      })
-      .attr('font-size', conf.sectionFontSize)
-      .attr('class', function (d) {
-        for (const [i, category] of categories.entries()) {
-          if (d[0] === category) {
-            return 'sectionTitle sectionTitle' + (i % conf.numberSectionStyles)
-          }
-        }
-        return 'sectionTitle'
-      })
-  }
-
-  /**
-   * @param theSidePad
-   * @param theTopPad
-   * @param w
-   * @param h
-   */
-  function drawToday(theSidePad, theTopPad, w, h) {
-    const todayMarker = diagObj.db.getTodayMarker()
-    if (todayMarker === 'off') {
-      return
-    }
-
-    const todayG = svg.append('g').attr('class', 'today')
-    const today = new Date()
-    const todayLine = todayG.append('line')
-
-    todayLine
-      .attr('x1', timeScale(today) + theSidePad)
-      .attr('x2', timeScale(today) + theSidePad)
-      .attr('y1', conf.titleTopMargin)
-      .attr('y2', h - conf.titleTopMargin)
-      .attr('class', 'today')
-
-    if (todayMarker !== '') {
-      todayLine.attr('style', todayMarker.replace(/,/g, ';'))
-    }
-  }
-
-  /**
-   * From this stack exchange question:
-   * http://stackoverflow.com/questions/1890203/unique-for-arrays-in-javascript
-   *
-   * @param arr
-   */
-  function checkUnique(arr) {
-    const hash = {}
-    const result = []
-    for (let i = 0, l = arr.length; i < l; ++i) {
-      if (!Object.prototype.hasOwnProperty.call(hash, arr[i])) {
-        // it works with objects! in FF, at least
-        hash[arr[i]] = true
-        result.push(arr[i])
-      }
-    }
-    return result
-  }
-}
-
-export default {
-  setConf,
-  draw
-}