gwhitney
commented
2 months ago You can verify that the events @katestange was most interested in all work by copying the below file as MouseTester.ts in the visualizers directory, and trying out the events.
import {VisualizerExportModule} from '@/visualizers/VisualizerInterface'
import {P5Visualizer} from './P5Visualizer'
import type p5 from 'p5'
/** md
# Mouse Tester
**/
class MouseTesterVisualizer extends P5Visualizer {
name = 'Mouse Tester'
colorValuePressed = 0
colorValueReleased = 0
colorValueKeyPressed = 0
colorValueClicked = 0
params = {}
draw(sketch: p5) {
super.draw(sketch)
const downSet = 80
const offset = 10
sketch.textSize(20)
sketch.fill('blue')
sketch.text('press mouse to change colour', downSet, downSet)
sketch.fill(this.colorValuePressed)
sketch.rect(downSet, downSet + offset, 50, 50)
sketch.fill('blue')
sketch.text('release mouse to change colour', downSet, 2 * downSet)
sketch.fill(this.colorValueReleased)
sketch.rect(downSet, 2 * downSet + offset, 50, 50)
sketch.fill('blue')
sketch.text('press key to change colour', downSet, 3 * downSet)
sketch.fill(this.colorValueKeyPressed)
sketch.rect(downSet, 3 * downSet + offset, 50, 50)
sketch.fill('blue')
sketch.text('click mouse to change colour', downSet, 4 * downSet)
sketch.fill(this.colorValueClicked)
sketch.rect(downSet, 4 * downSet + offset, 50, 50)
}
mouseReleased() {
if (this.colorValueReleased === 0) {
this.colorValueReleased = 255
} else {
this.colorValueReleased = 0
}
}
mousePressed() {
if (this.colorValuePressed === 0) {
this.colorValuePressed = 255
} else {
this.colorValuePressed = 0
}
}
keyPressed() {
if (this.colorValueKeyPressed === 0) {
this.colorValueKeyPressed = 255
} else {
this.colorValueKeyPressed = 0
}
}
mouseClicked() {
if (this.colorValueClicked === 0) {
this.colorValueClicked = 255
} else {
this.colorValueClicked = 0
}
}
}
export const exportModule = new VisualizerExportModule(
'Mouse Tester',
MouseTesterVisualizer,
'Check if p5 mouse control works.'
)
Vectornaut
katestange
Correspondingly, removes all p5-specific code from the Vue views and components. This means the Visualizer code is handling all the canvas operations, so p5-based visualizers have access to the canvas. In addition, any of the standard p5 methods that are present as methods of the visualizer are installed on the sketch, so they will be called by the sketch when the associated events occur. Moreover, as the P5Visualizer is now creating the canvas, it chooses the size to fill the DOM
divelement that has been passed to it as its location, and the CSS of the views/components have been changed so that saiddivtakes up all of the screen space not allocated to other parts of the display. This means that the size of the p5 canvas is subject to change, which some visualizers may not yet fully adjust to properly. Finally, this commit adds methods to dispose of the visualizer, to avoid multiple dangling sketch instances, which could otherwise cause events to be multiply processed.Resolves #120. Resolves #272. Possibly it also handles #244; it should be checked after this is merged.
By submitting this PR, I am indicating to the Numberscope maintainers that I have read and understood the contributing guidelines and that this PR follows those guidelines to the best of my knowledge. I have also read the pull request checklist and followed the instructions therein.