@protomaze/time 1.8.0 → 1.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protomaze/time",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "Protomaze Time sliders",
   "main": "index.js",
   "types": "index.d.ts",

package/ticks/YAxisTicks.d.ts

@@ -9,6 +9,10 @@ export type YAxisSettings = {
             color?: string;
             /** Overrides the slider's font (TimeSliderOptions.font) for this axis' labels. */
             font?: TimeSliderFont;
+            /** Breaks each grid line around its label (measured, outline included), `padding` CSS px (default 4) clear of it, so the label never reads as struck through. Works with gridOrder 'front' and 'behind'. */
+            knockout?: boolean | {
+                padding?: number;
+            };
             stroke?: {
                 color?: string;
                 width?: number;

package/ticks/YAxisTicks.js

@@ -1 +1 @@
-import{resolveFont as t,toCssFont as e}from"../common/Font.js";import{getDevicePixelRatio as i,snapLineToDevicePixels as n}from"../common/Pixels.js";const o={family:"sans-serif",weight:"normal",size:12};export class YAxisTicks{setFont(e){this.font=e?t(e,o):o}constructor(){this.canvas=document.createElement("canvas"),this.behindCanvas=document.createElement("canvas"),this.font=o,this.canvas.style.top="0px",this.canvas.style.width="100%",this.canvas.style.outline="none",this.canvas.style.touchAction="none",this.canvas.style.pointerEvents="none",this.canvas.style.position="absolute",this.canvas.style.height="100%",this.behindCanvas.style.position="absolute",this.behindCanvas.style.width="100%",this.behindCanvas.style.pointerEvents="none"}prepare(t,e){if(!t.parentElement)return;const i=t.getBoundingClientRect();if(i.width<=0||i.height<=0)return;const n=Math.round(i.width*e),o=Math.round(i.height*e);t.width===n&&t.height===o||(t.width=n,t.height=o);const s=t.getContext("2d");return s?(s.setTransform(1,0,0,1,0,0),s.clearRect(0,0,t.width,t.height),s.setTransform(e,0,0,e,0,0),{ctx:s,width:i.width,height:i.height}):void 0}render(o,s){const h=i(),l=this.prepare(this.canvas,h),a=this.prepare(this.behindCanvas,h);if(!l)return;const{ctx:r,width:c,height:d}=l,f=s?.gridBehind&&a?a.ctx:r;if(a)for(const t of s?.baselines??[]){const e=n(a.height*(1-t.y),t.width,h);a.ctx.beginPath(),a.ctx.moveTo(0,e.position),a.ctx.lineTo(a.width,e.position),a.ctx.lineWidth=e.width,a.ctx.strokeStyle=t.color,a.ctx.stroke()}for(const i of o){if(!1===i.visible)continue;const{min:o,max:s,minValue:l,maxValue:a}=i,m=d*(1-s),u=d*(1-o),g=u-m,p=getNiceTicks(l,a),x=i.format??(t=>t.toString()),v=i.style?.labels?.position??"right",y=i.style?.labels?.color??"#777",w=void 0!==i.style?.labels?.stroke,b=i.style?.labels?.stroke?.color??"#000",k=i.style?.labels?.stroke?.width??1,M=i.style?.lines?.color??"#7773",T=parseFloat(i.style?.lines?.width??"1");r.save(),r.fillStyle=y,r.font=e(t(i.style?.labels?.font,this.font)),r.textBaseline="middle",r.lineJoin="round",r.miterLimit=2,r.textAlign="left"===v?"right":"right"===v?"left":"center";for(const t of p){const e=(t-l)/(a-l);if(e<0||e>1)continue;const o="down"===i.direction?m+e*g:u-e*g;if(o<m+4||o>u-4)continue;const s=n(o,T,h);if(f.beginPath(),f.moveTo(0,s.position),f.lineTo(c,s.position),f.lineWidth=s.width,f.strokeStyle=M,f.stroke(),"none"!==v){const e=x(t),i=r.measureText(e).width;let n,s="center";"left"===v?(s="right",n=Math.max(4+i,4+i),n=Math.min(n,c/2-4)):"right"===v?(s="left",n=Math.min(c-4-i,c-4-i),n=Math.max(n,c/2+4)):(s="center",n=c/2),r.textAlign=s,w&&(r.lineWidth=2*k,r.strokeStyle=b,r.strokeText(e,n,o)),r.fillText(e,n,o)}}r.restore()}}}export function getNiceTicks(t,e,i=6){const n=niceNum(e-t,!1),o=niceNum(n/(i-1),!0),s=Math.floor(t/o)*o,h=Math.ceil(e/o)*o,l=[];for(let i=s;i<=h+o/2;i+=o)i>=t&&i<=e&&l.push(parseFloat(i.toFixed(10)));return l}export function niceNum(t,e){const i=Math.floor(Math.log10(t)),n=t/Math.pow(10,i);let o=0;return o=e?n<1.5?1:n<3?2:n<7?5:10:n<=1?1:n<=2?2:n<=5?5:10,o*Math.pow(10,i)}
+import{resolveFont as t,toCssFont as e}from"../common/Font.js";import{getDevicePixelRatio as i,snapLineToDevicePixels as n}from"../common/Pixels.js";const o={family:"sans-serif",weight:"normal",size:12};export class YAxisTicks{setFont(e){this.font=e?t(e,o):o}constructor(){this.canvas=document.createElement("canvas"),this.behindCanvas=document.createElement("canvas"),this.font=o,this.canvas.style.top="0px",this.canvas.style.width="100%",this.canvas.style.outline="none",this.canvas.style.touchAction="none",this.canvas.style.pointerEvents="none",this.canvas.style.position="absolute",this.canvas.style.height="100%",this.behindCanvas.style.position="absolute",this.behindCanvas.style.width="100%",this.behindCanvas.style.pointerEvents="none"}prepare(t,e){if(!t.parentElement)return;const i=t.getBoundingClientRect();if(i.width<=0||i.height<=0)return;const n=Math.round(i.width*e),o=Math.round(i.height*e);t.width===n&&t.height===o||(t.width=n,t.height=o);const s=t.getContext("2d");return s?(s.setTransform(1,0,0,1,0,0),s.clearRect(0,0,t.width,t.height),s.setTransform(e,0,0,e,0,0),{ctx:s,width:i.width,height:i.height}):void 0}render(o,s){const l=i(),a=this.prepare(this.canvas,l),h=this.prepare(this.behindCanvas,l);if(!a)return;const{ctx:r,width:c,height:d}=a,f=s?.gridBehind&&h?h.ctx:r;if(h)for(const t of s?.baselines??[]){const e=n(h.height*(1-t.y),t.width,l);h.ctx.beginPath(),h.ctx.moveTo(0,e.position),h.ctx.lineTo(h.width,e.position),h.ctx.lineWidth=e.width,h.ctx.strokeStyle=t.color,h.ctx.stroke()}for(const i of o){if(!1===i.visible)continue;const{min:o,max:s,minValue:a,maxValue:h}=i,x=d*(1-s),m=d*(1-o),g=m-x,p=getNiceTicks(a,h),u=i.format??(t=>t.toString()),y=i.style?.labels?.position??"right",v=i.style?.labels?.color??"#777",w=void 0!==i.style?.labels?.stroke,b=i.style?.labels?.stroke?.color??"#000",k=i.style?.labels?.stroke?.width??1,M=i.style?.lines?.color??"#7773",T=parseFloat(i.style?.lines?.width??"1"),C=i.style?.labels?.knockout,E=void 0!==C&&!1!==C,F="object"==typeof C&&"number"==typeof C.padding?C.padding:4;r.save(),r.fillStyle=v,r.font=e(t(i.style?.labels?.font,this.font)),r.textBaseline="middle",r.lineJoin="round",r.miterLimit=2,r.textAlign="left"===y?"right":"right"===y?"left":"center";for(const t of p){const e=(t-a)/(h-a);if(e<0||e>1)continue;const o="down"===i.direction?x+e*g:m-e*g;if(o<x+4||o>m-4)continue;let s;if("none"!==y){const e=u(t),i=r.measureText(e).width;let n,o="center";"left"===y?(o="right",n=Math.max(4+i,4+i),n=Math.min(n,c/2-4)):"right"===y?(o="left",n=Math.min(c-4-i,c-4-i),n=Math.max(n,c/2+4)):(o="center",n=c/2),s={text:e,x:n,align:o}}const d=n(o,T,l);let p=[[0,c]];if(s&&E){const t=r.measureText(s.text).width,e="right"===s.align?s.x-t:"left"===s.align?s.x:s.x-.5*t,i=F+(w?k:0);p=[[0,Math.floor((e-i)*l)/l],[Math.ceil((e+t+i)*l)/l,c]].filter(([t,e])=>e>t)}f.beginPath();for(const[t,e]of p)f.moveTo(t,d.position),f.lineTo(e,d.position);f.lineWidth=d.width,f.lineCap="butt",f.strokeStyle=M,f.stroke(),s&&(r.textAlign=s.align,w&&(r.lineWidth=2*k,r.strokeStyle=b,r.strokeText(s.text,s.x,o)),r.fillText(s.text,s.x,o))}r.restore()}}}export function getNiceTicks(t,e,i=6){const n=niceNum(e-t,!1),o=niceNum(n/(i-1),!0),s=Math.floor(t/o)*o,l=Math.ceil(e/o)*o,a=[];for(let i=s;i<=l+o/2;i+=o)i>=t&&i<=e&&a.push(parseFloat(i.toFixed(10)));return a}export function niceNum(t,e){const i=Math.floor(Math.log10(t)),n=t/Math.pow(10,i);let o=0;return o=e?n<1.5?1:n<3?2:n<7?5:10:n<=1?1:n<=2?2:n<=5?5:10,o*Math.pow(10,i)}