Changeset 247904 in webkit


Ignore:
Timestamp:
Jul 29, 2019 7:40:16 AM (5 years ago)
Author:
commit-queue@webkit.org
Message:

[Canvas Timeline] Compact canvas timeline
https://bugs.webkit.org/show_bug.cgi?id=200177

Patch by Zhifei Fang <zhifei_fang@apple.com> on 2019-07-29
Reviewed by Jonathan Bedard.

  • resultsdbpy/resultsdbpy/view/static/library/js/components/BaseComponents.js:
  • resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js:

(Timeline.CanvasSeriesComponent):

Location:
trunk/Tools
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/Tools/ChangeLog

    r247901 r247904  
     12019-07-29  Zhifei Fang  <zhifei_fang@apple.com>
     2
     3        [Canvas Timeline] Compact canvas timeline
     4        https://bugs.webkit.org/show_bug.cgi?id=200177
     5
     6        Reviewed by Jonathan Bedard.
     7
     8        * resultsdbpy/resultsdbpy/view/static/library/js/components/BaseComponents.js:
     9        * resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js:
     10        (Timeline.CanvasSeriesComponent):
     11
    1122019-07-29  Carlos Garcia Campos  <cgarcia@igalia.com>
    213
  • trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/js/components/BaseComponents.js

    r247664 r247904  
    2424    DOM, REF, diff, EventStream, uuidv4
    2525}
    26 from '../js/Ref.js';
     26from '../Ref.js';
    2727
    2828function ApplyNewChildren(element, oldArray, newArray, childToKeyFunc, itemProcessor) {
  • trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js

    r247664 r247904  
    2424    DOM, REF, FP, EventStream
    2525}
    26 from '../js/Ref.js';
     26from '../Ref.js';
    2727
    2828import {isDarkMode} from '../Utils.js';
     
    186186    const computedStyle = getComputedStyle(document.body);
    187187    let radius = parseInt(computedStyle.getPropertyValue('--smallSize')) / 2;
     188    let dotMargin = parseInt(computedStyle.getPropertyValue('--tinySize')) / 2;
    188189    let fontFamily = computedStyle.getPropertyValue('font-family');
    189190    let defaultDotColor = computedStyle.getPropertyValue('--greenLight').trim();
    190191    let defaultEmptyLineColor = computedStyle.getPropertyValue('--grey').trim();
    191     let defaultFontSize = computedStyle.getPropertyValue('--tinySize');
     192    let defaultFontSize = parseInt(computedStyle.getPropertyValue('--tinySize'));
    192193
    193194    // Get configuration
     
    198199    const onDotClick = typeof option.onDotClick === "function" ? option.onDotClick : null;
    199200    const onDotHover = typeof option.onDotHover === "function" ? option.onDotHover : null;
    200     const height = option.height ? option.height : 2 * radius;
     201    const tagHeight = defaultFontSize;
     202    const height = option.height ? option.height : 2 * radius + tagHeight;
     203
    201204
    202205    // Draw dot api can be used in user defined render function
     
    207210            if (!isEmpty) {
    208211                //Draw the dot
    209                 context.arc(x + 3 * radius, y, radius, 0, 2 * Math.PI);
     212                context.arc(x + dotMargin + radius, y, radius, 0, 2 * Math.PI);
    210213                context.fillStyle = color;
    211214                context.fill();
    212215                if (typeof tag === "number" || typeof tag === "string") {
    213216                    context.font = `${fontFamily} ${defaultFontSize}px`;
    214                     context.fillText(tag, x + 4 * radius, y + radius);
     217                    const tagSize = context.measureText(tag);
     218                    context.fillText(tag, x + dotMargin + radius - tagSize.width / 2, radius * 2 + tagSize.emHeightAscent);
    215219                }
    216220            } else {
    217221                context.beginPath();
    218                 context.moveTo(x + 2 * radius, y);
    219                 context.lineTo(x + 4 * radius, y);
     222                context.moveTo(x + dotMargin, y);
     223                context.lineTo(x + dotMargin + 2 * radius, y);
    220224                context.lineWidth = 1;
    221225                context.strokeStyle = defaultEmptyLineColor;
     
    245249    }
    246250
    247     const dotWidth = 3 * 2 * radius;
     251    const dotWidth = 2 * (radius + dotMargin);
    248252    const padding = 100 * dotWidth / getDevicePixelRatio();
    249     const offscreenCachedRender = offscreenCachedRenderFactory(padding, radius * 2);
     253    const offscreenCachedRender = offscreenCachedRenderFactory(padding, height);
    250254
    251255    // Generate the dot cache
     
    339343        },
    340344        onElementMount: (element) => {
    341             setupCanvasHeightWithDpr(element, radius * 2);
     345            setupCanvasHeightWithDpr(element, height);
    342346            setupCanvasContextScale(element);
    343347            if (onDotClick) {
     
    500504    const fontTopRotate = 300 * Math.PI / 180;
    501505    const linkColor = computedStyle.getPropertyValue('--linkColor');
    502     const scaleWidth = parseInt(computedStyle.getPropertyValue('--smallSize')) * 3;
     506    const scaleWidth = parseInt(computedStyle.getPropertyValue('--smallSize')) + parseInt(computedStyle.getPropertyValue('--tinySize'));
    503507    const scaleTagLineHeight = parseInt(computedStyle.getPropertyValue('--smallSize'));
    504508    const scaleTagLinePadding = 10;
Note: See TracChangeset for help on using the changeset viewer.