VanJS + code completion

[HEAVYPOLY]

Hi, is there a way to get a JS Class constructor to be vanJS reactive?
For example getting this.x, this.y this.width etc to be reactive? I know you could do this.state = vanX.reactive({}) but would prefer to do canvas.width vs canvas.state.width

class Canvas {
  constructor({id, width, height, activeLayer} = {width: 500, height: 500, activeLayer: 'layer1', id: 'canvas1' }) {
    this.id = id || genID()
    this.width = width || 500
    this.height = height || 500
    this.x = 0
    this.y =  0
    this.zoom = 1
    this.activeLayer = activeLayer || 'layer1'
    this.commands = []
  }
    addCommand(command) {
      command.time = Date.now()
      this.commands.push(command)
    }
}
const canvas = new Canvas()

[HEAVYPOLY]

The real issue is I want code completion on my canvas object:

const canvas = vanX.reactive({
  id: canvasId || genID(),
  width: 500,
  height: 500,
  x: 0,
  y: 0,
  zoom: 1,
  activeLayer: 'layer1',
  commands: [],
  loadProject() {
    prnt('load canvas', this.id)
  },
  undo() {
    prnt('undo canvas', this.id)
  },
  setLayer(id) {    
    let foundLayer
    for (const layer of layers) {
      if (layer !== undefined) {
        foundLayer = layer
        if (layer.id === id) {
          foundLayer = layer
          break
        }
      }
    }
    this.activeLayer = foundLayer.id
    this.addCommand({
      type: 'setLayer',
      layer: foundLayer.id
    })
    prnt('set layer',  this.activeLayer)
  },
  addCommand(command) {
    command.time = Date.now()
    this.commands.push(command)
  }
})

So I can do canvas. >> code complete >> setLayer()

Is there a way to do this?

Or if there is a better way to organize this I'm open to suggestions!

[HEAVYPOLY]

trying another way:

/**
 * @typedef {Object} Canvas
 * @property {string} id - Unique identifier for the canvas
 * @property {number} width - Canvas width
 * @property {number} height - Canvas height
 * @property {number} x - X-coordinate of the canvas
 * @property {number} y - Y-coordinate of the canvas
 * @property {number} zoom - Zoom level of the canvas
 * @property {string} activeLayer - ID of the currently active layer
 * @property {Array<{type: string, layer?: string, time: number}>} commands - List of commands
 */

/**
 * Creates a reactive canvas object
 * @returns {Canvas}
 */
const canvas = vanX.reactive({
  id: canvasId || genID(),
  width: 500,
  height: 500,
  x: 0,
  y: 0,
  zoom: 1,
  activeLayer: 'layer1',
  commands: [],
})

/**
 * @typedef {Object} CanvasDo
 * @property {function(): void} loadProject - Loads the canvas project
 * @property {function(): void} undo - Undoes the last action
 * @property {function(id: string): void} setLayer - Sets the active layer by ID
 * @property {function(command: {type: string, layer?: string}): void} addCommand - Adds a command to the commands list
 */
const canvasDo = {
  loadProject() {
    prnt('load canvas', canvas.id)
  },
  undo() {
    prnt('undo canvas', canvas.id)
  },
  setLayer(id) {    
    let foundLayer
    for (const layer of layers) {
      if (layer !== undefined) {
        foundLayer = layer
        if (layer.id === id) {
          foundLayer = layer
          break
        }
      }
    }
    canvas.activeLayer = foundLayer.id
    this.addCommand({
      type: 'setLayer',
      layer: foundLayer.id
    })
    prnt('set layer',  canvas.activeLayer)
  },
  addCommand(command) {
    command.time = Date.now()
    prnt('add command', command)
    canvas.commands.push(command)
  }
}

[HEAVYPOLY]

Is there a way to get code completion / jump to with

const canvas = vanX.reactive({
x: 10,
y: 10
})

canvas.x

[sirenkovladd]

[sirenkovladd]

can you share your repo so I can help you set up the type correctly?

[HEAVYPOLY]

That looks perfect!

When I try a simple reactive object I get code completion but if I cmd click on the prop ex.someProp it does not jump to the prop on the original object. It does jump if I cmd click on ex

I can't share the full code but here is an example class:

/**
 * @class
 * @property {string} id - Unique identifier for the layer
 * @property {string} name - Name of the layer
 * @property {number} x - X position
 * @property {number} y - Y position
 * @property {number} scaleX - X scale factor
 * @property {number} scaleY - Y scale factor
 * @property {number} rotation - Rotation angle
 * @property {string} blendMode - Blend mode
 * @property {{r: number, g: number, b: number, a: number}} colorMult - Color multiplier
 * @property {number} width - Layer width
 * @property {number} height - Layer height
 * @property {number} opacity - Layer opacity
 * @property {boolean} visible - Visibility flag
 * @property {boolean} parent - Parent layer flag
 * @property {boolean} alphaLock - Alpha lock flag
 * @property {number} updater - Updater value
 * @property {p5.Graphics | boolean} buffer - Graphics buffer or false
 * @property {boolean} thumbnail - Thumbnail flag
 * @property {boolean} active - Whether the layer is active
 * @property {any[]} screenshots - Array of screenshots
 * @property {any[]} thumbnails - Array of thumbnails
 * @property {number} currentIndex - Current index
 * @property {boolean} drawScreenshotNext - Flag for drawing screenshot
 */
class Layer {
  constructor({id, name='layer1'}) {
    this.id = id || genID()
    this.name = name
    this.x = 0
    this.y = 0
    this.scaleX = 1
    this.scaleY = 1
    this.rotation = 0
    this.blendMode = 'normal'
    this.colorMult = {
      r: 255,
      g: 255,
      b: 255,
      a: 1
    }
    this.width = 500
    this.height = 500
    this.opacity = 1
    this.visible = true
    this.parent = false
    this.alphaLock = false
    this.updater = 0 
    this.buffer = false // @type {P5.Graphics}
    this.thumbnail = false
    this.active = vanX.calc(() => this.id === canvas.activeLayer)
    this.screenshots = []
    this.thumbnails = []
    this.currentIndex = 0
    this.drawScreenshotNext = false
    this.deleted = false
  }
  async initBuffer() {
    this.buffer = vanX.noreactive(P5.createGraphics(window.innerWidth, window.innerHeight))
    this.buffer.disableFriendlyErrors = true;
    this.buffer.colorMode(P5.RGB, 255, 255, 255, 1);
    if (PR.antialias) this.buffer.smooth()
    else this.buffer.noSmooth()
    this.updater++

    this.currentIndex = 0
    const savedScreenshot = await xBase.open({path:this.id+'.png'})
    if (savedScreenshot) {
      const screenshot = P5.loadImage(savedScreenshot, () => {
        // prnt('load screenshot', screenshot)
        this.screenshots.push(vanX.noreactive(screenshot))
        this.currentIndex = this.screenshots.length - 1
        requestAnimationFrame(() => {
          this.thumbnail = vanX.noreactive(screenshot)
          this.updater ++
          this.updater ++
        })
      })
    }
  }
  setThumbnail() {
    this.thumbnail = this.urlScreenshot()
    this.updater ++
  }
  mergeDown() {
    const layerBelowId = layers[layers.indexOf(this) + 1]?.id
    prnt('mergeDown', this.id, layerBelowId)
    if (!layerBelowId) return
    const layerBelow = layers.find(l => l.id === layerBelowId)
    if (!layerBelow) return
    
    layerBelow.buffer.push()
    layerBelow.buffer.image(this.buffer, 0, 0)
    layerBelow.buffer.pop()
    layerBelow.screenshot()
    
    const index = layers.indexOf(this)
    layers[index].delete()
    canvasDo.setLayer(layerBelowId)
    drawCanvas({screenshotMode: true})
  }
  unMergeDown() {
    const layerBelowId = layers[layers.indexOf(this) + 1]?.id
    prnt('unMergeDown', this.id, layerBelowId)
    if (!layerBelowId) return
    const layerBelow = layers.find(l => l.id === layerBelowId)
    if (!layerBelow) return
    
    layerBelow.buffer.push()
    layerBelow.buffer.image(this.buffer, 0, 0)
    layerBelow.buffer.pop()
    layerBelow.screenshot()
    drawCanvas({screenshotMode: true})
  }
  isActive () {
    // prnt('isActive', canvas.activeLayer, this.id)
    return canvas.activeLayer === this.id
  }
  async finishTransform() {
    this.screenshot({useTransform:true})
    requestAnimationFrame(() => {
      this.buffer.clear()
      this.currentIndex = this.screenshots.length - 1
      drawCanvas({screenshotToBuffer: true})
    })

  }
  drawTransform(buffer) {
    const cx = this.buffer.width / 2
    const cy = this.buffer.height / 2
    if (!PR.smudgeBg ) {
      this.buffer.clear()
    }
    this.buffer.push()
    this.buffer.translate( cx, cy)
    this.buffer.translate( this.x, this.y)
    this.buffer.scale(this.scaleX, this.scaleY)
    this.buffer.rotate(this.rotation)
    this.buffer.translate( -cx, -cy)
    this.buffer.image(this.screenshots[this.currentIndex], 0, 0, this.buffer.width, this.buffer.height)
    this.buffer.pop()
    buffer.image(this.buffer, 0, 0)
  }
  isAtLastScreenshot() {
    return this.currentIndex === this.screenshots.length-1
  }
  screenshot({useTransform = false} = {useTransform: false}) {
    if (this.buffer) {
      if (this.screenshots.length >= PR.timelineMax) {
        this.screenshots.shift()
        if (this.currentIndex > 0) this.currentIndex--
      }
      if (this.currentIndex < this.screenshots.length - 1) this.screenshots = this.screenshots.slice(0, this.currentIndex + 1)
      if (useTransform) {
        prnt('layer Container SCreenshot,', this.x, this.y)
        buffers.layerTransform.resizeCanvas(this.buffer.width, this.buffer.height)
        drawLayer({layer: this, buffer: buffers.layerTransform, screenshotMode: true, useTransform:true})
        this.screenshots.push(vanX.noreactive(buffers.layerTransform.get()))
        this.currentIndex = this.screenshots.length - 1
      } else {
        console.trace('regular screenshot')
        this.screenshots.push(vanX.noreactive(this.buffer.get()))
        this.currentIndex = this.screenshots.length - 1
      }
    }
  }
  toggleVisiblility() {
    this.visible = !this.visible
    drawCanvas()
  }
  delete() {
    this.deleted = true
    const index = layers.indexOf(this)
    canvasDo.setLayer(layers[index + 1]?.id)
    prnt('delete', this.id, this.deleted)
    drawCanvas()
  }
  unDelete() {
    prnt('unDelete', this.id)
    this.deleted = false
    canvasDo.setLayer(this.id)
    drawCanvas()
  }
  saveToFile() {
    const screenshotUrl = this.urlScreenshot()
    xBase.save({path: this.id+'.png', data: screenshotUrl})
  }
  sliceScreenshots() {
    if (this.currentIndex < this.screenshots.length - 1) {
      this.screenshots = this.screenshots.slice(0, this.currentIndex + 1)
      this.currentIndex = Math.max(0, this.screenshots.length - 1)
      drawCanvas({screenshotToBuffer: true})
    }
  }
  urlScreenshot() {
    return this.buffer ? this.buffer.canvas.toDataURL() : false
  }

  getLastScreenshot() {
    return this.screenshots[this.screenshots.length - 1]
  }
  undo() {
    if (this.currentIndex > 0) {
      this.currentIndex--
      prnt('undo', this.currentIndex)
      drawCanvas({screenshotMode: true})
    }
  }
  redo() {

    if (this.currentIndex < this.screenshots.length - 1) {
      this.currentIndex++
      if (this.currentIndex === this.screenshots.length - 1) {
        drawCanvas({screenshotToBuffer: true}) 
      } else {
        drawCanvas({screenshotMode: true})
      }
    } 
    
    
  }
  serialize() {
    return {
      id: this.id,
      name: this.name,
      x: this.x,
      y: this.y,
      scaleX: this.scaleX,
      scaleY: this.scaleY,
      rotation: this.rotation,
      blendMode: this.blendMode,
      opacity: this.opacity,
      visible: this.visible,
      parent: this.parent,
      alphaLock: this.alphaLock,
      colorMult: this.colorMult,
      width: this.width,
      height: this.height,
    }
  }
}
/** @type {Layer[]} */
const layers = vanX.reactive([
    new Layer({id: layerId2, name: 'layer2'}),
    new Layer({id: layerId1, name: 'layer1'}),
    // new Layer({name: 'layer3'}),
])
const derivedLayers = vanX.reactive({
  undeleted: () => layers.filter(l => !l.deleted),
  visible: () => layers.filter(l => l.visible && !l.deleted)
})

[sirenkovladd]

The reason why I asked for a repository and not a file is that you most likely have incorrectly configured types from dependency
For example, you can check out this repository
https://stackblitz.com/edit/vitejs-vite-tvb4hpxu?file=src%2Fmain.js

[HEAVYPOLY]

Ah I see. Here's my setup for van. It seems when I try autocomplete on a vanX.reactive object it autocompletes everything on window object as well.

I am not using a build step, just plain js

<script type="importmap">
    {
      "imports": {
        "vanx": "https://cdn.jsdelivr.net/npm/[email protected]/src/van-x.min.js",
        "vanjs-core": "https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.5.3.min.js"
      }
    }
</script>

app.js
import van from "vanjs-core";
import * as vanX from 'vanx'
const { div, span, h1, h2, button, input, select, option, textarea } = van.tags;