POC dynamic scales

src/components/RunGraph.vue

@@ -6,17 +6,17 @@
   import { onMounted, onUnmounted, ref, watch } from 'vue'
   import { RunGraphConfig } from '@/models/RunGraph'
   import { setScaleXZoom, start, stop } from '@/objects'
-  import { updateBox } from '@/objects/box'
   import { WorkerMessage, worker } from '@/workers/runGraph'
 
   const props = defineProps<{
     config: RunGraphConfig,
+    // this will be removed and handled internally to the component itself
+    // this is just a POC for the demo
     zoom: number,
   }>()
 
   watch(() => props.zoom, zoom => {
     setScaleXZoom(zoom)
-    updateBox()
   })
 
   const stage = ref<HTMLDivElement>()

src/objects/box.ts

@@ -1,5 +1,5 @@
-
 import { Sprite, Texture } from 'pixi.js'
+import { emitter } from '@/objects/events'
 import { scaleX, scaleY } from '@/objects/scales'
 import { viewport } from '@/objects/viewport'
 
@@ -10,17 +10,18 @@ export function createBox(): void {
   sprite = viewport.addChild(new Sprite(Texture.WHITE))
   sprite.tint = 0xff0000
 
-  updateBox()
+  renderBox()
 }
 
-export function updateBox(): void {
+export function renderBox(): void {
   const x = scaleX(10)
   const y = scaleY(10)
   const width = scaleX(20) - x
   const height = scaleY(20) - y
 
-  sprite.width = width
+  sprite.width = Math.max(width, 1)
   sprite.height = height
   sprite.position.set(x, y)
+}
 
-}
+emitter.on('scaleXUpdated', () => renderBox())

src/objects/events.ts

@@ -0,0 +1,8 @@
+import mitt from 'mitt'
+
+type Events = {
+  scaleXUpdated: void,
+  scaleYUpdated: void,
+}
+
+export const emitter = mitt<Events>()

src/objects/scales.ts

@@ -1,28 +1,88 @@
 import { ScaleLinear, scaleLinear } from 'd3'
 import { application } from '@/objects/application'
+import { emitter } from '@/objects/events'
 
 export let scaleX: ScaleLinear<number, number>
 export let scaleY: ScaleLinear<number, number>
 
+// these are the same for now but  ScaleXDomain will eventually be [Date, Date]
+type ScaleRange = [start: number, end: number]
+type ScaleXDomain = [start: number, end: number]
+type ScaleYDomain = [start: number, end: number]
+
 export function createScales(): void {
   createScaleX()
   createScaleY()
 }
 
 export function createScaleX(): void {
-  scaleX = scaleLinear().range([0, application.view.width]).domain([0, 100])
+  const range: ScaleRange = [0, application.view.width]
+  const domain: ScaleXDomain = [0, 100]
+
+  scaleX = scaleLinear()
+
+  setScaleX({ range, domain, silent: true })
+}
+
+type XScale = {
+  domain?: ScaleXDomain,
+  range?: ScaleRange,
+  silent?: boolean,
+}
+
+// this needs to be clamped to some minimum range
+export function setScaleX({ domain, range, silent }: XScale): void {
+  if (range) {
+    scaleX.range(range)
+  }
+
+  if (domain) {
+    scaleX.domain(domain)
+  }
+
+  if (!silent && (range || domain)) {
+    emitter.emit('scaleXUpdated')
+  }
 }
 
 export function createScaleY(): void {
-  scaleY = scaleLinear().range([0, application.view.height]).domain([0, 100])
+  const range: ScaleRange = [0, application.view.height]
+  const domain: ScaleYDomain = [0, 100]
+
+  scaleY = scaleLinear()
+
+  setScaleY({ range, domain, silent: true })
 }
 
-export function setScaleXZoom(zoom: number): void {
+type YScale = {
+  domain?: ScaleYDomain,
+  range?: ScaleRange,
+  silent?: boolean,
+}
+
+// this needs to be clamped to some minimum range
+export function setScaleY({ domain, range, silent }: YScale): void {
+  if (range) {
+    scaleY.range(range)
+  }
 
-  const start = 0
-  const interval = application.view.width * 0.2
+  if (domain) {
+    scaleY.domain(domain)
+  }
+
+  if (!silent && (range || domain)) {
+    emitter.emit('scaleYUpdated')
+  }
+}
+
+// proof of concept based on a static number
+// my guess is rather than accepting a static zoom
+// the multiplier would be accepted so a scroll event could pass a positive or negative value
+export function setScaleXZoom(zoom: number): void {
+  const multiplier = 0.2
+  const interval = application.view.width * multiplier
   const rangeEnd = application.view.width + zoom * interval
-  console.log(zoom, rangeEnd)
+  const range: ScaleRange = [0, rangeEnd]
 
-  scaleX.range([start, rangeEnd])
+  setScaleX({ range })
 }