Changeset 247904 in webkit
- Timestamp:
- Jul 29, 2019 7:40:16 AM (5 years ago)
- Location:
- trunk/Tools
- Files:
-
- 3 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Tools/ChangeLog
r247901 r247904 1 2019-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 1 12 2019-07-29 Carlos Garcia Campos <cgarcia@igalia.com> 2 13 -
trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/js/components/BaseComponents.js
r247664 r247904 24 24 DOM, REF, diff, EventStream, uuidv4 25 25 } 26 from '../ js/Ref.js';26 from '../Ref.js'; 27 27 28 28 function ApplyNewChildren(element, oldArray, newArray, childToKeyFunc, itemProcessor) { -
trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js
r247664 r247904 24 24 DOM, REF, FP, EventStream 25 25 } 26 from '../ js/Ref.js';26 from '../Ref.js'; 27 27 28 28 import {isDarkMode} from '../Utils.js'; … … 186 186 const computedStyle = getComputedStyle(document.body); 187 187 let radius = parseInt(computedStyle.getPropertyValue('--smallSize')) / 2; 188 let dotMargin = parseInt(computedStyle.getPropertyValue('--tinySize')) / 2; 188 189 let fontFamily = computedStyle.getPropertyValue('font-family'); 189 190 let defaultDotColor = computedStyle.getPropertyValue('--greenLight').trim(); 190 191 let defaultEmptyLineColor = computedStyle.getPropertyValue('--grey').trim(); 191 let defaultFontSize = computedStyle.getPropertyValue('--tinySize');192 let defaultFontSize = parseInt(computedStyle.getPropertyValue('--tinySize')); 192 193 193 194 // Get configuration … … 198 199 const onDotClick = typeof option.onDotClick === "function" ? option.onDotClick : null; 199 200 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 201 204 202 205 // Draw dot api can be used in user defined render function … … 207 210 if (!isEmpty) { 208 211 //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); 210 213 context.fillStyle = color; 211 214 context.fill(); 212 215 if (typeof tag === "number" || typeof tag === "string") { 213 216 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); 215 219 } 216 220 } else { 217 221 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); 220 224 context.lineWidth = 1; 221 225 context.strokeStyle = defaultEmptyLineColor; … … 245 249 } 246 250 247 const dotWidth = 3 * 2 * radius;251 const dotWidth = 2 * (radius + dotMargin); 248 252 const padding = 100 * dotWidth / getDevicePixelRatio(); 249 const offscreenCachedRender = offscreenCachedRenderFactory(padding, radius * 2);253 const offscreenCachedRender = offscreenCachedRenderFactory(padding, height); 250 254 251 255 // Generate the dot cache … … 339 343 }, 340 344 onElementMount: (element) => { 341 setupCanvasHeightWithDpr(element, radius * 2);345 setupCanvasHeightWithDpr(element, height); 342 346 setupCanvasContextScale(element); 343 347 if (onDotClick) { … … 500 504 const fontTopRotate = 300 * Math.PI / 180; 501 505 const linkColor = computedStyle.getPropertyValue('--linkColor'); 502 const scaleWidth = parseInt(computedStyle.getPropertyValue('--smallSize')) * 3;506 const scaleWidth = parseInt(computedStyle.getPropertyValue('--smallSize')) + parseInt(computedStyle.getPropertyValue('--tinySize')); 503 507 const scaleTagLineHeight = parseInt(computedStyle.getPropertyValue('--smallSize')); 504 508 const scaleTagLinePadding = 10;
Note: See TracChangeset
for help on using the changeset viewer.