0001-Refactor-and-modernize-Gantt-chart-layout.patch - Redmine

Patch #44567 » 0001-Refactor-and-modernize-Gantt-chart-layout.patch

v2: Add ChartLayout tests and refactor its calculations - Katsuya HIDAKA, 2026-10-02 04:35

+    }
     /***** Gantt chart *****/
     table.gantt-table {
     .gantt-chart {
       display: flex;
       align-items: flex-start;
       inline-size: 100%;
       border-collapse: collapse;
       margin-block-end: 1em;
       overflow: hidden;
       /* Force LTR for Gantt even in RTL locales because column resizing, relation lines, and the progress line don't work in RTL yet. */
       direction: ltr;
+    }
     table.gantt-table td {
       padding: 0;
     .gantt-chart [hidden] {
       display: none !important;
+    }
     .gantt_hdr {
       position: absolute;
       inset-block-start: 0;
       block-size: 16px;
     .gantt_subjects_column,
     .gantt_selected_column {
       position: relative;
       flex: 0 0 var(--gantt-column-width);
       inline-size: var(--gantt-column-width);
       min-inline-size: 0;
+    }
     .gantt-chart .ui-resizable-e {
       cursor: ew-resize;
+    }
     .gantt-pane {
       block-size: calc(var(--gantt-pane-height) + 2px);
       border-block: 1px solid var(--oc-gray-4);
       border-inline-end: 1px solid var(--oc-gray-4);
       box-sizing: border-box;
       overflow: hidden;
+    }
     .gantt_subjects_container {
       border-inline-start: 1px solid var(--oc-gray-4);
       text-align: center;
+    }
     .gantt-pane-header {
       position: relative;
       z-index: 2;
       display: flex;
       align-items: center;
       justify-content: center;
       block-size: var(--gantt-headers-height);
       border-block-end: 1px solid var(--oc-gray-4);
       box-sizing: border-box;
       background: var(--oc-gray-1);
       font-size: 0.8em;
       overflow: hidden;
+    }
     #gantt_area .gantt_hdr {
       border-inline-start: 0;
     .gantt-selected-column-header {
       padding-inline: 3px;
       text-overflow: ellipsis;
       white-space: nowrap;
+    }
     .gantt-pane-body {
       position: relative;
       block-size: var(--gantt-content-height);
+    }
     .gantt-timeline {
       position: relative;
       flex: 1 1 auto;
       min-inline-size: 0;
       /* Keep the canvas border inside the overflow clipping edge. */
       padding-block-end: 1px;
       overflow-x: auto;
       overflow-y: hidden;
+    }
     .gantt-timeline-canvas {
       position: relative;
       inline-size: calc(var(--gantt-chart-width) + 1px);
       block-size: calc(var(--gantt-pane-height) + 2px);
       border-block: 1px solid var(--oc-gray-4);
       border-inline-end: 1px solid var(--oc-gray-4);
       box-sizing: border-box;
+    }
     .gantt-timeline-header {
       position: relative;
       z-index: 1;
       block-size: var(--gantt-headers-height);
       border-block-end: 1px solid var(--oc-gray-4);
       box-sizing: border-box;
       background: var(--oc-gray-1);
+    }
     .gantt_subjects_container:not(.draw_selected_columns) .gantt_hdr,
     .last_gantt_selected_column .gantt_hdr {
     .gantt-header-row {
       display: flex;
       block-size: var(--gantt-header-height);
+    }
     .gantt-period {
       position: relative;
       flex: 0 0 var(--gantt-period-width);
       inline-size: var(--gantt-period-width);
       min-inline-size: 0;
       block-size: 100%;
       border-inline-end: 1px solid var(--oc-gray-4);
       border-block-end: 1px solid var(--oc-gray-4);
       text-align: center;
       box-sizing: border-box;
       overflow: hidden;
       white-space: nowrap;
       pointer-events: none;
+    }
     .last_gantt_selected_column .gantt_selected_column_container,
     .gantt_subjects_container .gantt_subjects * {
       z-index: 10;
     .gantt-header-row:last-child .gantt-period {
       border-block-end: 0;
+    }
     .gantt_subjects_column + td {
       padding: 0;
     .gantt-period-last {
       border-inline-end: 0;
+    }
     .gantt-period-spans-body {
       block-size: calc(100% + var(--gantt-content-height));
       border-block-end: 0;
+    }
     .gantt-period a {
       position: relative;
       z-index: 1;
       pointer-events: auto;
+    }
     .gantt-period-day,
     .gantt-period-day-number {
       font-size: 0.7em;
+    }
     .gantt_hdr.nwday {
     .gantt-period-non-working {
       background-color: var(--oc-gray-1);
       color: var(--oc-gray-6);
+    }
     .gantt-timeline-body {
       position: absolute;
       z-index: 2;
       inset-block-start: var(--gantt-headers-height);
       inset-inline-start: 0;
       inline-size: var(--gantt-chart-width);
       block-size: var(--gantt-content-height);
+    }
     .gantt_subjects,
     .gantt_selected_column_content.gantt_hdr {
     .gantt_selected_column_content {
       position: relative;
       block-size: 100%;
       font-size: 0.8em;
+    }
     .gantt_subjects form,
     .gantt_selected_column_content,
     .gantt-timeline-body form {
       position: relative;
       z-index: 1;
       display: block;
       inline-size: 100%;
       block-size: 100%;
+    }
     .gantt_subjects div,
     .gantt_selected_column_content div {
     .gantt-row {
       position: absolute;
       inset-block-start: var(--gantt-row-top);
       block-size: 20px;
       box-sizing: border-box;
+    }
     .gantt-subject-row {
       inset-inline-start: var(--gantt-row-indent);
       inline-size: var(--gantt-row-width);
       line-height: 16px;
       block-size: 16px;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: clip;
+    }
     .gantt-column-row {
       inset-inline-start: 0;
       inline-size: 100%;
       padding-inline-start: 3px;
       line-height: 16px;
       overflow: hidden;
       white-space: nowrap;
+    }
     .gantt_subjects div.issue-subject:hover {
       background-color: var(--oc-yellow-0);
+    }
     .gantt_selected_column_content > div {
       padding-inline-start: 3px;
       box-sizing: border-box;
     .gantt-timeline-row {
       inset-inline-start: 0;
       inline-size: var(--gantt-chart-width);
+    }
     .gantt_hdr_selected_column_name {
     #today_line {
       position: absolute;
       inset-block-start: 50%;
       inline-size: 100%;
       transform: translateY(-50%);
       -webkit-transform: translateY(-50%);
       font-size: 0.8em;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+    }
     td.gantt_selected_column {
       inline-size: 50px;
       inset-block-start: 1px;
       inset-inline-start: var(--gantt-today-start);
       inline-size: 10px;
       block-size: var(--gantt-content-height);
       border-inline-start: 1px dashed red;
       pointer-events: none;
+    }
     td.gantt_selected_column .gantt_hdr,
     .gantt_selected_column_container {
       inline-size: 49px;
     #gantt_draw_area {
       position: absolute;
       inset-block-start: 1px;
       inset-inline-start: 0;
       inline-size: var(--gantt-chart-width);
       block-size: var(--gantt-content-height);
       pointer-events: none;
+    }
     td.gantt_watcher_users_column div.issue_watcher_users ul {
     .gantt_watcher_users_column div.issue_watcher_users ul {
       margin: 0;
       padding: 0;
       list-style: none;
+    }
     td.gantt_watcher_users_column div.issue_watcher_users ul li {
     .gantt_watcher_users_column div.issue_watcher_users ul li {
       display: inline;
+    }
     td.gantt_watcher_users_column div.issue_watcher_users ul li:not(:last-child)::after {
     .gantt_watcher_users_column div.issue_watcher_users ul li:not(:last-child)::after {
       content: ', ';
       white-space: pre;
+    }
     .task {
       position: absolute;
       inset-block-start: var(--gantt-row-top);
       inset-inline-start: var(--gantt-task-start);
       inline-size: var(--gantt-task-width);
       block-size: 8px;
       font-size: 0.8em;
       color: var(--oc-gray-6);
-...
       white-space: nowrap;
+    }
     .gantt-timeline-body .tooltip {
       position: absolute;
       inset-block-start: var(--gantt-row-top);
       inset-inline-start: var(--gantt-task-start);
       inline-size: var(--gantt-task-width);
       block-size: 12px;
+    }
     .gantt-row > :is(.task, .tooltip) {
       inset-block-start: 0;
+    }
     .gantt-chart .toggle-selection {
       display: none;
+    }
     .task.label {
       inline-size: 100%;
       inline-size: var(--gantt-task-width);
+    }
     .task.label.project,
-...
       block-size: 3px;
+    }
     .task.parent.marker.starting {
       position: absolute;
       background: url(/task_parent_end.png) no-repeat 0 0;
       inline-size: 8px;
       block-size: 16px;
       margin-inline-start: -4px;
       inset-inline-start: 0;
       inset-block-start: -1px;
+    }
     .task.parent.marker.starting,
     .task.parent.marker.ending {
       position: absolute;
       background: url(/task_parent_end.png) no-repeat 0 0;
       inline-size: 8px;
       block-size: 16px;
       margin-inline-start: -4px;
       inset-inline-end: 0;
       inset-block-start: -1px;
+    }
     .version.task_late {
-...
     .project-overdue a {
       color: var(--oc-red-8);
+    }
     @media print {
       /* Include the full timeline in the browser print layout. */
       body.controller-gantts.action-show #wrapper {
         overflow: visible;
+      }
       .gantt-chart {
         inline-size: max-content;
         overflow: visible;
+      }
       .gantt-timeline {
         flex: 0 0 calc(var(--gantt-chart-width) + 1px);
         inline-size: calc(var(--gantt-chart-width) + 1px);
         overflow: visible;
+      }
+    }

+      }
       /* Gantt charts */
       /*
        * [1] override inline styles with important
        * [2] keep border between subjects and gantt area
        * [3] remove whitespace between subjects and gantt area
        * [4] maintain width due to [3]
        */
       .gantt_subjects_column {
         inline-size: 60% !important; /* [1] */
         --gantt-column-width: 60% !important;
+      }
       .gantt_subjects_container {
-...
         overflow: hidden;
+      }
       .gantt_subjects_column .gantt_hdr {
         inline-size: 100% !important;
         inset-inline-end: 0 !important; /* [2] */
         border-inline-end: solid 1px var(--oc-gray-4);
+      }
       #gantt_area {
         inset-inline-start: -2px; /* [3] */
         margin-inline-end: -2px; /* [4] */
+      }
       /*----------------------------------------*\
         G) FORMS
       \*----------------------------------------*/

     # Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
     module GanttHelper
       class ChartLayout
         # A calendar period displayed in the timeline header.
         Period = Struct.new(
           # The first date of the period, or nil for a leading partial week
           :date,
           # The period width in pixels
           :width,
           # Whether the period represents a non-working day
           :non_working,
           # Whether the period's grid line extends through the chart body
           :spans_body,
           # Whether the period is the last one in its header row
           :last,
           keyword_init: true
+        )
         # The height of one timeline header row in pixels
         attr_reader :header_height
         # The combined height of all visible header rows in pixels
         attr_reader :headers_height
         # The gap between the header and the first chart row in pixels
         attr_reader :content_top
         # The subject pane width used to render its rows in pixels
         attr_reader :subject_width
         # The number of pixels representing one day
         attr_reader :zoom
         def initialize(gantt)
           @gantt = gantt
           @zoom = 2**gantt.zoom
           @subject_width = 330
           @header_height = 18
           @content_top = 8
           @headers_height = header_rows * header_height
         end
         # The full timeline width in pixels
         def chart_width
           @chart_width ||= begin
             days_in_range = (@gantt.date_to - @gantt.date_from + 1).to_i
             days_in_range * zoom
           end
         end
         def content_height
           @content_height ||= begin
             row_height = 20
             extra_rows = 6
             bottom_padding = 150
             minimum_height = 206
             # Preserve the extra space and minimum height from the original template.
             rows_height = row_height * (@gantt.number_of_rows + extra_rows)
             [rows_height + bottom_padding, minimum_height].max
           end
         end
         def pane_height
           headers_height + content_height
         end
         def months
           date = @gantt.date_from
           Array.new(@gantt.months) do |index|
             next_month = date.next_month
             days_in_month = (next_month - date).to_i
             period = Period.new(
               date: date,
               width: days_in_month * zoom,
               spans_body: !show_weeks?,
               last: index == @gantt.months - 1
+            )
             date = next_month
             period
           end
         end
         def weeks
           return [] unless show_weeks?
           date = @gantt.date_from
           periods = []
           unless date.monday?
             week_end = date.end_of_week(:monday)
             remaining_days = (week_end - date + 1).to_i
             # A leading partial week has no week-number label.
             periods << Period.new(
               date: nil,
               width: remaining_days * zoom,
               spans_body: !show_days?,
               last: week_end >= @gantt.date_to
+            )
             date = date.next_week(:monday)
           end
           while date <= @gantt.date_to
             week_end = [date.end_of_week(:monday), @gantt.date_to].min
             days_in_week = (week_end - date + 1).to_i
             periods << Period.new(
               date: date,
               width: days_in_week * zoom,
               spans_body: !show_days?,
               last: week_end == @gantt.date_to
+            )
             date = date.next_week(:monday)
           end
           periods
         end
         def day_numbers
           return [] unless show_day_numbers?
           day_periods
         end
         def days
           return [] unless show_days?
           day_periods(spans_body: true)
         end
         def today_start
           today = User.current.today
           return unless today.between?(@gantt.date_from, @gantt.date_to)
           days_through_today = (today - @gantt.date_from + 1).to_i
           # Place the line at the last pixel of the current day.
           days_through_today * zoom - 1
         end
         def show_weeks?
           @gantt.zoom > 1
         end
         def show_days?
           @gantt.zoom > 2
         end
         def show_day_numbers?
           @gantt.zoom > 3
         end
         private
         def header_rows
           # The month header is always displayed.
 + [show_weeks?, show_days?, show_day_numbers?].count(true)
         end
         def day_periods(spans_body: false)
           (@gantt.date_from..@gantt.date_to).map do |date|
             Period.new(
               date: date,
               width: zoom,
               non_working: @gantt.non_working_week_days.include?(date.cwday),
               spans_body: spans_body,
               last: date == @gantt.date_to
+            )
           end
         end
       end
       def gantt_css_variables(variables)
         variables.map {|name, value| "--#{name}:#{value}"}.join(';')
       end
       def gantt_period_style(period)
         gantt_css_variables(
           'gantt-period-width': "#{period.width}px"
+        )
       end
       def gantt_zoom_link(gantt, in_or_out)
         case in_or_out
         when :in
-...
         end
       end
       def gantt_chart_tag(query, &)
       def gantt_chart_tag(query, layout, &block)
         data_attributes = {
           controller: 'gantt--chart',
           # Events emitted by child controllers the chart listens to.
-...
           'gantt--chart-show-progress-value': query.draw_progress_line ? 'true' : 'false'
+        }
         tag.table(class: 'gantt-table', data: data_attributes, &)
         style = gantt_css_variables(
           'gantt-subject-width': "#{layout.subject_width + 1}px",
           'gantt-header-height': "#{layout.header_height}px",
           'gantt-headers-height': "#{layout.headers_height}px",
           'gantt-chart-width': "#{layout.chart_width}px",
           'gantt-content-top': "#{layout.content_top}px",
           'gantt-content-height': "#{layout.content_height}px",
           'gantt-pane-height': "#{layout.pane_height}px"
+        )
         tag.div(class: 'gantt-chart', style: style, data: data_attributes) do
           capture(layout, &block)
         end
       end
       def gantt_column_tag(column_name, min_width: nil, **options, &)
-...
+        }
         options[:class] = ["gantt_#{column_name}_column", options[:class]]
         tag.td(**options, &)
         options[:style] = gantt_css_variables('gantt-column-width': options.delete(:width)) if options[:width]
         tag.div(**options, &)
       end
       def gantt_subjects_tag(&)

       #drawTop = 0
       #drawRight = 0
       #drawLeft = 0
       #drawPaper = null
       #drawPaperGroup = null
-...
       connect() {
         this.#drawTop = 0
         this.#drawRight = 0
         this.#drawLeft = 0
         this.#drawProgressLineAndRelations()
         this.#drawSelectedColumns()
-...
       #setupDrawArea() {
         const $drawArea = this.$(this.drawAreaTarget)
         const $ganttArea = this.hasGanttAreaTarget ? this.$(this.ganttAreaTarget) : null
         this.#drawTop = $drawArea.position().top
         this.#drawRight = $drawArea.width()
         this.#drawLeft = $ganttArea ? $ganttArea.scrollLeft() : 0
+      }
       #drawSelectedColumns() {
         const $selectedColumns = this.$("td.gantt_selected_column")
         const selectedColumns = this.element.querySelectorAll(".gantt_selected_column")
         const $subjectsContainer = this.$(".gantt_subjects_container")
         const isMobileDevice = typeof window.isMobile === "function" && window.isMobile()
         if (this.showSelectedColumnsValue) {
           if (isMobileDevice) {
             $selectedColumns.each((_, element) => {
               this.$(element).hide()
             })
             selectedColumns.forEach((element) => { element.hidden = true })
           } else {
             $subjectsContainer.addClass("draw_selected_columns")
             $selectedColumns.show()
             selectedColumns.forEach((element) => { element.hidden = false })
+          }
         } else {
           $selectedColumns.each((_, element) => {
             this.$(element).hide()
           })
           selectedColumns.forEach((element) => { element.hidden = true })
           $subjectsContainer.removeClass("draw_selected_columns")
+        }
+      }
-...
           if (!issueTo.is(":visible")) return
           const issueHeight = issueFrom.height()
           const issueFromTop = issueFrom.position().top + issueHeight / 2 - this.#drawTop
           const issueFromTop = this.#taskTop(issueFrom) + issueHeight / 2 - this.#drawTop
           const issueFromRight = issueFrom.position().left + issueFrom.width()
           const issueToTop = issueTo.position().top + issueHeight / 2 - this.#drawTop
           const issueToTop = this.#taskTop(issueTo) + issueHeight / 2 - this.#drawTop
           const issueToLeft = issueTo.position().left
           const relationConfig = this.issueRelationTypesValue[relation.rel_type] || {}
           const color = relationConfig.color || "#000"
-...
           this.#drawPath(
+            [
               "M",
               issueFromRight + this.#drawLeft,
               issueFromRight,
               issueFromTop,
               "L",
               issueFromRightRel + this.#drawLeft,
               issueFromRightRel,
               issueFromTop
             ],
             { stroke: color, "stroke-width": RELATION_STROKE_WIDTH, fill: "none" }
-...
             this.#drawPath(
+              [
                 "M",
                 issueFromRightRel + this.#drawLeft,
                 issueFromRightRel,
                 issueFromTop,
                 "L",
                 issueFromRightRel + this.#drawLeft,
                 issueFromRightRel,
                 issueToTop
               ],
               { stroke: color, "stroke-width": RELATION_STROKE_WIDTH, fill: "none" }
-...
             this.#drawPath(
+              [
                 "M",
                 issueFromRightRel + this.#drawLeft,
                 issueFromRightRel,
                 issueToTop,
                 "L",
                 issueToLeft + this.#drawLeft,
                 issueToLeft,
                 issueToTop
               ],
               { stroke: color, "stroke-width": RELATION_STROKE_WIDTH, fill: "none" }
-...
             this.#drawPath(
+              [
                 "M",
                 issueFromRightRel + this.#drawLeft,
                 issueFromRightRel,
                 issueFromTop,
                 "L",
                 issueFromRightRel + this.#drawLeft,
                 issueFromRightRel,
                 issueMiddleTop
               ],
               { stroke: color, "stroke-width": RELATION_STROKE_WIDTH, fill: "none" }
-...
             this.#drawPath(
+              [
                 "M",
                 issueFromRightRel + this.#drawLeft,
                 issueFromRightRel,
                 issueMiddleTop,
                 "L",
                 issueToLeftRel + this.#drawLeft,
                 issueToLeftRel,
                 issueMiddleTop
               ],
               { stroke: color, "stroke-width": RELATION_STROKE_WIDTH, fill: "none" }
-...
             this.#drawPath(
+              [
                 "M",
                 issueToLeftRel + this.#drawLeft,
                 issueToLeftRel,
                 issueMiddleTop,
                 "L",
                 issueToLeftRel + this.#drawLeft,
                 issueToLeftRel,
                 issueToTop
               ],
               { stroke: color, "stroke-width": RELATION_STROKE_WIDTH, fill: "none" }
-...
             this.#drawPath(
+              [
                 "M",
                 issueToLeftRel + this.#drawLeft,
                 issueToLeftRel,
                 issueToTop,
                 "L",
                 issueToLeft + this.#drawLeft,
                 issueToLeft,
                 issueToTop
               ],
               { stroke: color, "stroke-width": RELATION_STROKE_WIDTH, fill: "none" }
-...
           this.#drawPath(
+            [
               "M",
               issueToLeft + this.#drawLeft,
               issueToLeft,
               issueToTop,
               "l",
               -4 * RELATION_STROKE_WIDTH,
-...
         })
+      }
       #taskTop($task) {
         const row = $task.closest(".gantt-row")
         return row.position().top + $task.position().top
+      }
       get #progressLinesArray() {
         const lines = []
         const todayLeft = this.$("#today_line").position().left
-...
               (previous.is_left_edge && current.is_left_edge)
+            )
           ) {
             const x1 = previous.left === 0 ? 0 : previous.left + this.#drawLeft
             const x2 = current.left === 0 ? 0 : current.left + this.#drawLeft
             const x1 = previous.left
             const x2 = current.left
             this.#drawPath(["M", x1, previous.top, "L", x2, current.top], {
               stroke: color,
-...
+          }
+        }
+      }
+    }

+      }
       #setupResizable() {
         const alsoResize = [
           `.gantt_${this.columnValue}_container`,
           `.gantt_${this.columnValue}_container > .gantt_hdr`
+        ]
         const options = {
           handles: "e",
           minWidth: this.minWidthValue,
           zIndex: 30,
           alsoResize: alsoResize.join(","),
           create: () => {
             this.$(".ui-resizable-e").css("cursor", "ew-resize")
           resize: (_event, ui) => {
             this.element.style.setProperty("--gantt-column-width", `${ui.size.width}px`)
             this.element.style.removeProperty("width")
+          }
+        }

           const $element = this.$(element)
           const json = $element.data("collapse-expand")
           const numberOfRows = $element.data("number-of-rows")
           const barsSelector = `#gantt_area form > div[data-collapse-expand='${json.obj_id}'][data-number-of-rows='${numberOfRows}']`
           const selectedColumnsSelector = `td.gantt_selected_column div[data-collapse-expand='${json.obj_id}'][data-number-of-rows='${numberOfRows}']`
           const barsSelector = `#gantt_area .gantt-timeline-body form > div[data-collapse-expand='${json.obj_id}'][data-number-of-rows='${numberOfRows}']`
           const selectedColumnsSelector = `.gantt_selected_column div[data-collapse-expand='${json.obj_id}'][data-number-of-rows='${numberOfRows}']`
           if (outOfHierarchy || this.#readInlineStart($element) <= subjectInlineStart) {
             outOfHierarchy = true
-...
       #setBlockStart(el, value) {
         const node = el.jquery ? el[0] : el
         const px = typeof value === "number" ? `${value}px` : value
         node.style.setProperty("inset-block-start", px)
         node.style.setProperty("--gantt-row-top", px)
+      }
       #setIconState(element, open) {

     <%
       zoom = 1
       gantt.zoom.times { zoom *= 2 }
       subject_width = 330
       header_height = 18
       headers_height = header_height
       show_weeks = false
       show_days = false
       show_day_num = false
       if gantt.zoom > 1
         show_weeks = true
         headers_height = 2 * header_height
         if gantt.zoom > 2
           show_days = true
           headers_height = 3 * header_height
           if gantt.zoom > 3
             show_day_num = true
             headers_height = 4 * header_height
           end
         end
       end
       g_width = ((gantt.date_to - gantt.date_from + 1) * zoom).to_i
       layout = GanttHelper::ChartLayout.new(gantt)
       gantt.render(
         top: headers_height + 8,
         zoom: zoom,
         g_width: g_width,
         subject_width: subject_width
         top: layout.content_top,
         zoom: layout.zoom,
         g_width: layout.chart_width,
         subject_width: layout.subject_width
+      )
       g_height = [(20 * (gantt.number_of_rows + 6)) + 150, 206].max
       t_height = g_height + headers_height
     %>
     <% if gantt.truncated %>
       <p class="warning"><%= l(:notice_gantt_chart_truncated, max: gantt.max_rows) %></p>
     <% end %>
     <%= gantt_chart_tag(@query) do %>
       <tr>
         <%= gantt_column_tag('subjects', min_width: 100,
                              style: "width:#{query.draw_selected_columns ? subject_width + 1 : subject_width + 2}px;") do %>
           <%
             subjects_container_classes = "gantt_subjects_container"
             subjects_container_classes << " draw_selected_columns" if query.draw_selected_columns
             subjects_container_style = +"position:relative;"
             subjects_container_style << "height: #{t_height + 24}px;"
             subjects_container_style << "width: #{subject_width + 1}px;"
           %>
           <%= content_tag(:div,
                           style: subjects_container_style,
                           class: subjects_container_classes,
                           data: {'gantt--chart-target': 'subjectsContainer'}) do %>
             <%
               header_bg_style = +"width: #{subject_width + 1}px;"
               header_bg_style << "height: #{headers_height}px;"
               header_bg_style << 'background: #f1f3f5;' # oc-gray-1
             %>
             <%= content_tag(:div, "", style: header_bg_style, class: "gantt_hdr") %>
             <%
               header_overlay_style = +"z-index: 1;"
               header_overlay_style << "width: #{subject_width + 1}px;"
               header_overlay_style << "height: #{t_height}px;"
               header_overlay_style << 'overflow: hidden;'
             %>
             <%= content_tag(:div, "", style: header_overlay_style, class: "gantt_hdr") %>
     <%= gantt_chart_tag(@query, layout) do %>
       <%= gantt_column_tag('subjects', min_width: 100, width: 'var(--gantt-subject-width)') do %>
         <section class="gantt-pane gantt_subjects_container<%= ' draw_selected_columns' if query.draw_selected_columns %>"
                  data-gantt--chart-target="subjectsContainer">
           <header class="gantt-pane-header" aria-hidden="true"></header>
           <div class="gantt-pane-body">
             <%= gantt_subjects_tag do %>
               <%= form_tag({}, data: {cm_url: issues_context_menu_path}) do %>
                 <%= hidden_field_tag 'back_url', url_for(params: request.query_parameters), id: nil %>
                 <%= gantt.subjects.html_safe %>
               <% end %>
             <% end %>
           <% end %>
         <% end %>
         <%
           query.columns.each do |column|
             next if Redmine::Helpers::Gantt::UNAVAILABLE_COLUMNS.include?(column.name)
             column_name = column.name.to_s.tr('.', '_')
         %>
           <%= gantt_column_tag(column_name, min_width: 20, id: column_name,
                                class: ['gantt_selected_column', { 'last_gantt_selected_column': query.columns.last == column }]) do %>
             <%
               column_container_style = +"position: relative;"
               column_container_style << "height: #{t_height + 24}px;"
             %>
             <%= content_tag(:div, style: column_container_style, class: "gantt_#{column_name}_container gantt_selected_column_container") do %>
               <%
                 column_header_overlay_style = +"height: #{t_height}px;"
                 column_header_overlay_style << 'overflow: hidden;'
               %>
               <%= content_tag(:div, '', style: column_header_overlay_style, class: "gantt_hdr") %>
               <%
                 column_header_style = +"height: #{headers_height}px;"
                 column_header_style << 'background: #f1f3f5;' # oc-gray-1
               %>
               <%= content_tag(:div,
                               content_tag(:p, column.caption, class: 'gantt_hdr_selected_column_name'),
                               style: column_header_style,
                               class: "gantt_hdr") %>
               <%= content_tag(:div, class: "gantt_#{column_name} gantt_selected_column_content") do %>
                 <%= gantt.selected_column_content({column: column, top: headers_height + 8, zoom: zoom, g_width: g_width}).html_safe %>
               <% end %>
             <% end %>
           <% end %>
           </div>
         </section>
       <% end %>
       <%
         query.columns.each do |column|
           next if Redmine::Helpers::Gantt::UNAVAILABLE_COLUMNS.include?(column.name)
           column_name = column.name.to_s.tr('.', '_')
       %>
         <%= gantt_column_tag(column_name, min_width: 20, width: '50px', id: column_name,
                              class: 'gantt_selected_column', hidden: !query.draw_selected_columns) do %>
           <section class="gantt-pane gantt_selected_column_container gantt_<%= column_name %>_container">
             <header class="gantt-pane-header gantt-selected-column-header"><%= column.caption %></header>
             <div class="gantt-pane-body gantt_selected_column_content gantt_<%= column_name %>">
               <%= gantt.selected_column_content(column: column, top: layout.content_top, zoom: layout.zoom, g_width: layout.chart_width).html_safe %>
             </div>
           </section>
         <% end %>
         <td>
           <div style="position:relative;height:<%= t_height + 24 %>px;overflow:auto;" id="gantt_area" data-gantt--chart-target="ganttArea">
             <%
               months_header_style = +"width: #{g_width - 1}px;"
               months_header_style << "height: #{headers_height}px;"
               months_header_style << 'background: #f1f3f5;' # oc-gray-1
             %>
             <%= content_tag(:div, '&nbsp;'.html_safe, style: months_header_style, class: "gantt_hdr") %>
       <% end %>
             <% month_f = gantt.date_from %>
             <% left = 0 %>
             <% months_height = (show_weeks ? header_height : header_height + g_height) %>
             <% gantt.months.times do %>
               <% width = (((month_f >> 1) - month_f) * zoom - 1).to_i %>
               <% month_style = +"inset-inline-start: #{left}px;" %>
               <% month_style << "width: #{width}px;" %>
               <% month_style << "height: #{months_height}px;" %>
               <%= content_tag(:div, style: month_style, class: "gantt_hdr") do %>
                 <%= link_to "#{month_f.year}-#{month_f.month}",
                             gantt.params.merge(year: month_f.year, month: month_f.month),
                             title: "#{month_name(month_f.month)} #{month_f.year}" %>
       <div id="gantt_area" class="gantt-timeline" data-gantt--chart-target="ganttArea">
         <div class="gantt-timeline-canvas">
           <header class="gantt-timeline-header">
             <div class="gantt-header-row gantt-header-months">
               <% layout.months.each do |period| %>
                 <div class="gantt-period gantt-period-month<%= ' gantt-period-spans-body' if period.spans_body %><%= ' gantt-period-last' if period.last %>"
                      style="<%= gantt_period_style(period) %>">
                   <%= link_to "#{period.date.year}-#{period.date.month}",
                               gantt.params.merge(year: period.date.year, month: period.date.month),
                               title: "#{month_name(period.date.month)} #{period.date.year}" %>
                 </div>
               <% end %>
               <% left += width + 1 %>
               <% month_f = month_f >> 1 %>
             <% end %>
             </div>
             <% if show_weeks %>
               <% left = 0 %>
               <% weeks_height = (show_days ? header_height - 1 : header_height - 1 + g_height) %>
               <% if gantt.date_from.cwday == 1 %>
                 <% week_f = gantt.date_from %>
               <% else %>
                 <% week_f = gantt.date_from + (7 - gantt.date_from.cwday + 1) %>
                 <% width = (7 - gantt.date_from.cwday + 1) * zoom - 1 %>
                 <% gap_style = +"inset-inline-start: #{left}px;" %>
                 <% gap_style << "inset-block-start: 19px;" %>
                 <% gap_style << "width: #{width}px;" %>
                 <% gap_style << "height: #{weeks_height}px;" %>
                 <%= content_tag(:div, '&nbsp;'.html_safe, style: gap_style, class: "gantt_hdr") %>
                 <% left += width + 1 %>
               <% end %>
               <% while week_f <= gantt.date_to %>
                 <% width = ((week_f + 6 <= gantt.date_to) ? 7 * zoom - 1 : (gantt.date_to - week_f + 1) * zoom - 1).to_i %>
                 <% week_style = +"inset-inline-start: #{left}px;" %>
                 <% week_style << "inset-block-start: 19px;" %>
                 <% week_style << "width: #{width}px;" %>
                 <% week_style << "height: #{weeks_height}px;" %>
                 <%= content_tag(:div, style: week_style, class: "gantt_hdr") do %>
                   <%= content_tag(:small) do %>
                     <%= week_f.cweek if width >= 16 %>
                   <% end %>
             <% if layout.show_weeks? %>
               <div class="gantt-header-row gantt-header-weeks">
                 <% layout.weeks.each do |period| %>
                   <div class="gantt-period gantt-period-week<%= ' gantt-period-spans-body' if period.spans_body %><%= ' gantt-period-last' if period.last %>"
                        style="<%= gantt_period_style(period) %>">
                     <small><%= period.date.cweek if period.date && period.width >= 16 %></small>
                   </div>
                 <% end %>
                 <% left += width + 1 %>
                 <% week_f += 7 %>
               <% end %>
               </div>
             <% end %>
             <% if show_day_num %>
               <% left = 0 %>
               <% days_height = g_height + header_height * 2 - 1 %>
               <% wday = gantt.date_from.cwday %>
               <% day_num = gantt.date_from %>
               <% (gantt.date_to - gantt.date_from + 1).to_i.times do %>
                 <% width = zoom - 1 %>
                 <% day_style = +"inset-inline-start:#{left}px;" %>
                 <% day_style << "inset-block-start:37px;" %>
                 <% day_style << "width:#{width}px;" %>
                 <% day_style << "height:#{days_height}px;" %>
                 <% day_style << "font-size:0.7em;" %>
                 <% day_classes = +"gantt_hdr" %>
                 <% day_classes << " nwday" if gantt.non_working_week_days.include?(wday) %>
                 <%= content_tag(:div, style: day_style, class: day_classes) do %>
                   <%= day_num.day %>
             <% if layout.show_day_numbers? %>
               <div class="gantt-header-row gantt-header-day-numbers">
                 <% layout.day_numbers.each do |period| %>
                   <div class="gantt-period gantt-period-day-number<%= ' gantt-period-non-working' if period.non_working %><%= ' gantt-period-last' if period.last %>"
                        style="<%= gantt_period_style(period) %>"><%= period.date.day %></div>
                 <% end %>
                 <% left += width + 1 %>
                 <% day_num += 1 %>
                 <% wday += 1 %>
                 <% wday = 1 if wday > 7 %>
               <% end %>
               </div>
             <% end %>
             <% if show_days %>
               <% left = 0 %>
               <% days_height = g_height + header_height - 1 %>
               <% days_top = (show_day_num ? 55 : 37) %>
               <% (gantt.date_from..gantt.date_to).each do |g_date| %>
                 <% width = zoom - 1 %>
                 <% day_style = +"inset-inline-start: #{left}px;" %>
                 <% day_style << "inset-block-start: #{days_top}px;" %>
                 <% day_style << "width: #{width}px;" %>
                 <% day_style << "height: #{days_height}px;" %>
                 <% day_style << "font-size:0.7em;" %>
                 <% day_classes = +"gantt_hdr" %>
                 <% day_classes << " nwday" if gantt.non_working_week_days.include?(g_date.cwday) %>
                 <%= content_tag(:div, style: day_style, class: day_classes) do %>
                   <%= day_letter(g_date.cwday) %>
             <% if layout.show_days? %>
               <div class="gantt-header-row gantt-header-days">
                 <% layout.days.each do |period| %>
                   <div class="gantt-period gantt-period-day gantt-period-spans-body<%= ' gantt-period-non-working' if period.non_working %><%= ' gantt-period-last' if period.last %>"
                        style="<%= gantt_period_style(period) %>"><%= day_letter(period.date.cwday) %></div>
                 <% end %>
                 <% left += width + 1 %>
               <% end %>
               </div>
             <% end %>
           </header>
           <div class="gantt-timeline-body">
             <%= form_tag({}, data: {cm_url: issues_context_menu_path}) do %>
               <%= hidden_field_tag 'back_url', url_for(params: request.query_parameters), id: nil %>
               <%= gantt.lines.html_safe %>
             <% end %>
             <% if User.current.today >= gantt.date_from && User.current.today <= gantt.date_to %>
               <% today_left = (((User.current.today - gantt.date_from + 1) * zoom).floor - 1).to_i %>
               <% today_style = +"position: absolute;" %>
               <% today_style << "height: #{g_height}px;" %>
               <% today_style << "inset-block-start: #{headers_height + 1}px;" %>
               <% today_style << "inset-inline-start: #{today_left}px;" %>
               <% today_style << "width:10px;" %>
               <% today_style << "border-inline-start: 1px dashed red;" %>
               <%= content_tag(:div, '&nbsp;'.html_safe, style: today_style, id: 'today_line') %>
             <% if layout.today_start %>
               <div id="today_line" style="<%= gantt_css_variables('gantt-today-start': "#{layout.today_start}px") %>" aria-hidden="true"></div>
             <% end %>
             <%
               draw_area_style = +"position: absolute;"
               draw_area_style << "height: #{g_height}px;"
               draw_area_style << "inset-block-start: #{headers_height + 1}px;"
               draw_area_style << 'inset-inline-start: 0px;'
               draw_area_style << "width: #{g_width - 1}px;"
             %>
             <%= content_tag(:div, '', style: draw_area_style, id: "gantt_draw_area", data: {'gantt--chart-target': 'drawArea'}) %>
             <div id="gantt_draw_area" data-gantt--chart-target="drawArea" aria-hidden="true"></div>
           </div>
         </td>
       </tr>
         </div>
       </div>
     <% end %>
     <span class="pagination">

           def render_object_row(object, options)
             class_name = object.class.name.downcase
             send(:"subject_for_#{class_name}", object, options) unless options[:only] == :lines || options[:only] == :selected_columns
             send(:"line_for_#{class_name}", object, options) unless options[:only] == :subjects || options[:only] == :selected_columns
             column_content_for_issue(object, options) if options[:only] == :selected_columns && options[:column].present? && object.is_a?(Issue)
             unless options[:only] == :subjects || options[:only] == :selected_columns
               line = send(:"line_for_#{class_name}", object, options)
               @lines << html_gantt_row(object, options, line) if options[:format] == :html
             end
             column_content_for_object(object, options) if options[:only] == :selected_columns && options[:column].present?
             options[:top] += options[:top_increment]
             @number_of_rows += 1
             if @max_rows && @number_of_rows >= @max_rows
-...
             end
           end
           def column_content_for_issue(issue, options)
           def column_content_for_object(object, options)
             if options[:format] == :html
               data_options = {}
               data_options[:collapse_expand] = "issue-#{issue.id}"
               data_options[:number_of_rows] = number_of_rows
               style = "position: absolute;inset-block-start: #{options[:top]}px; font-size: 0.8em;"
               data_options = {
                 :collapse_expand => "#{object.class}-#{object.id}".downcase,
                 :number_of_rows => number_of_rows
+              }
               value = object.is_a?(Issue) ? view.column_content(options[:column], object) : nil
               content =
                 view.content_tag(
                   :div, view.column_content(options[:column], issue),
                   :style => style, :class => "issue_#{options[:column].name}",
                   :id => "#{options[:column].name}_issue_#{issue.id}",
                   :div, value,
                   :style => css_variables('gantt-row-top': "#{options[:top] || 0}px"),
                   :class => [
                     "gantt-row",
                     "gantt-column-row",
                     ("issue_#{options[:column].name}" if object.is_a?(Issue))
                   ],
                   :id => ("#{options[:column].name}_issue_#{object.id}" if object.is_a?(Issue)),
                   :data => data_options
+                )
               @columns[options[:column].name] << content if @columns.has_key?(options[:column].name)
-...
             end
           end
           def column_content_for_issue(issue, options)
             column_content_for_object(issue, options)
           end
           def subject(label, options, object=nil)
             send :"#{options[:format]}_subject", options, label, object
           end
-...
               s << view.assignee_avatar(issue.assigned_to, :size => 13, :class => 'icon-avatar')
               s << view.link_to_issue(issue).html_safe
               s << view.content_tag(:input, nil, :type => 'checkbox', :name => 'ids[]',
                                     :value => issue.id, :style => 'display:none;',
                                     :value => issue.id,
                                     :class => 'toggle-selection')
               view.content_tag(:span, s, :class => css_classes).html_safe
             when Version
-...
                 params[:indent] += 18
               end
             end
             style = "position: absolute;inset-block-start:#{params[:top]}px;inset-inline-start:#{params[:indent]}px;"
             style += "width:#{params[:subject_width] - params[:indent]}px;" if params[:subject_width]
             tag_options[:style] = style
             tag_options[:class] = [tag_options[:class], 'gantt-row', 'gantt-subject-row'].compact.join(' ')
             row_variables = {
               'gantt-row-top': "#{params[:top] || 0}px",
               'gantt-row-indent': "#{params[:indent]}px"
+            }
             if params[:subject_width]
               row_variables['gantt-row-width'] = "#{params[:subject_width] - params[:indent]}px"
             end
             tag_options[:style] = css_variables(row_variables)
             output = view.content_tag(:div, content, tag_options)
             @subjects << output
             output
-...
             # Renders the task bar, with progress and late
             if coords[:bar_start] && coords[:bar_end]
               width = coords[:bar_end] - coords[:bar_start] - 2
               style = +""
               style << "inset-block-start:#{params[:top]}px;"
               style << "inset-inline-start:#{coords[:bar_start]}px;"
               style << "width:#{width}px;"
               style = task_style(coords[:bar_start], width)
               html_id = "task-todo-issue-#{object.id}" if object.is_a?(Issue)
               html_id = "task-todo-version-#{object.id}" if object.is_a?(Version)
               content_opt = {:style => style,
-...
               output << view.content_tag(:div, '&nbsp;'.html_safe, content_opt)
               if coords[:bar_late_end]
                 width = coords[:bar_late_end] - coords[:bar_start] - 2
                 style = +""
                 style << "inset-block-start:#{params[:top]}px;"
                 style << "inset-inline-start:#{coords[:bar_start]}px;"
                 style << "width:#{width}px;"
                 style = task_style(coords[:bar_start], width)
                 output << view.content_tag(:div, '&nbsp;'.html_safe,
                                            :style => style,
                                            :class => "#{css} task_late",
-...
               end
               if coords[:bar_progress_end]
                 width = coords[:bar_progress_end] - coords[:bar_start] - 2
                 style = +""
                 style << "inset-block-start:#{params[:top]}px;"
                 style << "inset-inline-start:#{coords[:bar_start]}px;"
                 style << "width:#{width}px;"
                 style = task_style(coords[:bar_start], width)
                 html_id = "task-done-issue-#{object.id}" if object.is_a?(Issue)
                 html_id = "task-done-version-#{object.id}" if object.is_a?(Version)
                 output << view.content_tag(:div, '&nbsp;'.html_safe,
-...
             # Renders the markers
             if markers
               if coords[:start]
                 style = +""
                 style << "inset-block-start:#{params[:top]}px;"
                 style << "inset-inline-start:#{coords[:start]}px;"
                 style << "width:15px;"
                 style = task_style(coords[:start], 15)
                 output << view.content_tag(:div, '&nbsp;'.html_safe,
                                            :style => style,
                                            :class => "#{css} marker starting",
                                            :data => data_options)
               end
               if coords[:end]
                 style = +""
                 style << "inset-block-start:#{params[:top]}px;"
                 style << "inset-inline-start:#{coords[:end]}px;"
                 style << "width:15px;"
                 style = task_style(coords[:end], 15)
                 output << view.content_tag(:div, '&nbsp;'.html_safe,
                                            :style => style,
                                            :class => "#{css} marker ending",
-...
             end
             # Renders the label on the right
             if label
               style = +""
               style << "inset-block-start:#{params[:top]}px;"
               style << "inset-inline-start:#{(coords[:bar_end] || 0) + 8}px;"
               style << "width:15px;"
               style = task_style((coords[:bar_end] || 0) + 8, 15)
               output << view.content_tag(:div, label,
                                          :style => style,
                                          :class => "#{css} label",
-...
                                    view.render_issue_tooltip(object).html_safe,
                                    :class => "tip")
               s += view.content_tag(:input, nil, :type => 'checkbox', :name => 'ids[]',
                                     :value => object.id, :style => 'display:none;',
                                     :value => object.id,
                                     :class => 'toggle-selection')
               style = +""
               style << "position: absolute;"
               style << "inset-block-start:#{params[:top]}px;"
               style << "inset-inline-start:#{coords[:bar_start]}px;"
               style << "width:#{coords[:bar_end] - coords[:bar_start]}px;"
               style << "height:12px;"
               style = task_style(coords[:bar_start], coords[:bar_end] - coords[:bar_start])
               output << view.content_tag(:div, s.html_safe,
                                          :style => style,
                                          :class => "tooltip hascontextmenu",
                                          :data => data_options)
             end
             @lines << output
             output
           end
           def html_gantt_row(object, params, content)
             data_options = {
               :collapse_expand => "#{object.class}-#{object.id}".downcase,
               :number_of_rows => number_of_rows
+            }
             style = css_variables('gantt-row-top': "#{params[:top] || 0}px")
             view.content_tag(
               :div,
               content.to_s.html_safe,
               :class => 'gantt-row gantt-timeline-row',
               :style => style,
               :data => data_options
+            )
           end
           def task_style(start, width)
             css_variables(
               'gantt-task-start': "#{start}px",
               'gantt-task-width': "#{width}px"
+            )
           end
           def css_variables(variables)
             variables.map {|name, value| "--#{name}:#{value}"}.join(';')
           end
           def pdf_task(params, coords, markers, label, object)
             cell_height_ratio = params[:pdf].get_cell_height_ratio
             params[:pdf].set_cell_height_ratio(0.1)

         end
         # Assert context menu on issues subject and gantt bar
         assert_select 'div[class=?]', 'issue-subject hascontextmenu'
         assert_select 'div.issue-subject.hascontextmenu'
         assert_select 'div.tooltip.hascontextmenu' do
           assert_select 'img[class="gravatar avatar"]'
         end
-...
         assert_response :success
       end
       def test_gantt_should_warn_when_truncated
         with_settings :gantt_items_limit => '1' do
           get(:show, :params => {:project_id => 1})
         end
         assert_response :success
         assert_select 'p.warning', :text => I18n.t(:notice_gantt_chart_truncated, :max => 1)
       end
       def test_show_should_run_custom_query
         query = IssueQuery.create!(:name => 'Gantt Query', :description => 'Description for Gantt Query', :visibility => IssueQuery::VISIBILITY_PUBLIC)
         get(
-...
+            }
+          )
           assert_response :success
           assert_select 'div.gantt_hdr>a', :text => /^[\d-]+$/, :count => 40
           assert_select 'div.gantt-period-month>a', :text => /^[\d-]+$/, :count => 40
           # Displays 6 months (the default value for `months`) if `months` exceeds
           # gant_months_limit
-...
+            }
+          )
           assert_response :success
           assert_select 'div.gantt_hdr>a', :text => /^[\d-]+$/, :count => 6
           assert_select 'div.gantt-period-month>a', :text => /^[\d-]+$/, :count => 6
         end
       end
-...
 .times do |offset|
           m = selected_start.since(offset.month)
           assert_select 'div.gantt_hdr > a', text: "#{m.year}-#{m.month}"
           assert_select 'div.gantt-period-month > a', text: "#{m.year}-#{m.month}"
         end
         # eCookbook
-...
 .times do |offset|
           m = start_of_month.since(offset.months)
           assert_select 'div.gantt_hdr > a', text: "#{m.year}-#{m.month}"
           assert_select 'div.gantt-period-month > a', text: "#{m.year}-#{m.month}"
         end
         assert_select 'input#months[value=?]', '6'
-...
       end
       def assert_chart_row(selector, row:, style_substring:)
         style_substring = "--gantt-task-start:#{style_substring.delete_prefix('inset-inline-start:').sub(';width:', ';--gantt-task-width:')}"
         matcher = "#gantt_area #{selector}[data-number-of-rows=?][style*=?]"
         assert_select matcher, row, style_substring, minimum: 1
       end

... This diff was truncated because it exceeds the maximum size that can be displayed.

« Previous
1
…
3
4
5
Next »

(5-5/5)

Project

General

Profile

Redmine

Patch #44567 » 0001-Refactor-and-modernize-Gantt-chart-layout.patch