@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
1 lines • 4.45 kB
JavaScript
import*as ThemeSupport from"../../theme_support/theme_support.js";import{DEFAULT_FONT_SIZE,getFontFamilyForCanvas}from"./Font.js";import timelineGridStyles from"./timelineGrid.css.legacy.js";const labelMap=new Map;export class TimelineGrid{element;dividersElementInternal;gridHeaderElement;eventDividersElement;dividersLabelBarElementInternal;constructor(){this.element=document.createElement("div"),ThemeSupport.ThemeSupport.instance().appendStyle(this.element,timelineGridStyles),this.dividersElementInternal=this.element.createChild("div","resources-dividers"),this.gridHeaderElement=document.createElement("div"),this.gridHeaderElement.classList.add("timeline-grid-header"),this.eventDividersElement=this.gridHeaderElement.createChild("div","resources-event-dividers"),this.dividersLabelBarElementInternal=this.gridHeaderElement.createChild("div","resources-dividers-label-bar"),this.element.appendChild(this.gridHeaderElement)}static calculateGridOffsets(e,t){const i=e.computePosition(e.maximumBoundary());let n=i/64,r=e.boundarySpan()/n;const s=i/e.boundarySpan(),d=Math.ceil(Math.log(r)/Math.LN10);r=Math.pow(10,d),r*s>=320&&(r/=5),r*s>=128&&(r/=2);const l=Math.ceil((e.minimumBoundary()-e.zeroTime())/r)*r+e.zeroTime();let a=e.maximumBoundary();a+=64/s,n=Math.ceil((a-l)/r),r||(n=0);const o=[];for(let i=0;i<n;++i){const n=l+r*i;e.computePosition(n)<(t||0)||o.push({position:Math.floor(e.computePosition(n)),time:n})}return{offsets:o,precision:Math.max(0,-Math.floor(Math.log(1.01*r)/Math.LN10))}}static drawCanvasGrid(e,t){e.save(),e.scale(window.devicePixelRatio,window.devicePixelRatio);const i=Math.floor(e.canvas.height/window.devicePixelRatio);e.strokeStyle=getComputedStyle(document.body).getPropertyValue("--divider-line"),e.lineWidth=1,e.translate(.5,.5),e.beginPath();for(const n of t.offsets)e.moveTo(n.position,0),e.lineTo(n.position,i);e.stroke(),e.restore()}static drawCanvasHeaders(e,t,i,n,r,s){e.save(),e.scale(window.devicePixelRatio,window.devicePixelRatio);const d=Math.ceil(e.canvas.width/window.devicePixelRatio);e.beginPath(),e.fillStyle=ThemeSupport.ThemeSupport.instance().getComputedValue("--color-background-opacity-50"),e.fillRect(0,0,d,r),e.fillStyle=ThemeSupport.ThemeSupport.instance().getComputedValue("--color-text-primary"),e.textBaseline="hanging",e.font=`${DEFAULT_FONT_SIZE} ${getFontFamilyForCanvas()}`;for(const r of t.offsets){const t=i(r.time),d=e.measureText(t).width,l=r.position-d-4;(!s||s<l)&&e.fillText(t,l,n)}e.restore()}get dividersElement(){return this.dividersElementInternal}get dividersLabelBarElement(){return this.dividersLabelBarElementInternal}removeDividers(){this.dividersElementInternal.removeChildren(),this.dividersLabelBarElementInternal.removeChildren()}updateDividers(e,t){const i=TimelineGrid.calculateGridOffsets(e,t),n=i.offsets,r=i.precision,s=this.dividersElementInternal.clientWidth;let d=this.dividersElementInternal.firstChild,l=this.dividersLabelBarElementInternal.firstChild;for(let t=0;t<n.length;++t){if(!d){d=document.createElement("div"),d.className="resources-divider",this.dividersElementInternal.appendChild(d),l=document.createElement("div"),l.className="resources-divider";const e=document.createElement("div");e.className="resources-divider-label",labelMap.set(l,e),l.appendChild(e),this.dividersLabelBarElementInternal.appendChild(l)}const i=n[t].time,a=n[t].position;if(l){const t=labelMap.get(l);t&&(t.textContent=e.formatValue(i,r))}const o=100*a/s;d.style.left=o+"%",l&&(l.style.left=o+"%"),d=d.nextSibling,l&&(l=l.nextSibling)}for(;d;){const e=d.nextSibling;if(this.dividersElementInternal.removeChild(d),!e)break;d=e}for(;l;){const e=l.nextSibling;if(this.dividersLabelBarElementInternal.removeChild(l),!e)break;l=e}return!0}addEventDivider(e){this.eventDividersElement.appendChild(e)}addEventDividers(e){this.gridHeaderElement.removeChild(this.eventDividersElement);for(const t of e)this.eventDividersElement.appendChild(t);this.gridHeaderElement.appendChild(this.eventDividersElement)}removeEventDividers(){this.eventDividersElement.removeChildren()}hideEventDividers(){this.eventDividersElement.classList.add("hidden")}showEventDividers(){this.eventDividersElement.classList.remove("hidden")}hideDividers(){this.dividersElementInternal.classList.add("hidden")}showDividers(){this.dividersElementInternal.classList.remove("hidden")}setScrollTop(e){this.dividersLabelBarElementInternal.style.top=e+"px",this.eventDividersElement.style.top=e+"px"}}