StackGenVis: Alignment of Data, Algorithms, and Models for Stacking Ensemble Learning Using Performance Metrics
https://doi.org/10.1109/TVCG.2020.3030352
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
124 lines
3.4 KiB
124 lines
3.4 KiB
'use strict'
|
|
|
|
var createShader = require('gl-shader')
|
|
var createBuffer = require('gl-buffer')
|
|
|
|
var SHADERS = require('./lib/shaders')
|
|
|
|
module.exports = createSelectBox
|
|
|
|
function SelectBox(plot, boxBuffer, boxShader) {
|
|
this.plot = plot
|
|
this.boxBuffer = boxBuffer
|
|
this.boxShader = boxShader
|
|
|
|
this.enabled = true
|
|
|
|
this.selectBox = [Infinity,Infinity,-Infinity,-Infinity]
|
|
|
|
this.borderColor = [0,0,0,1]
|
|
this.innerFill = false
|
|
this.innerColor = [0,0,0,0.25]
|
|
this.outerFill = true
|
|
this.outerColor = [0,0,0,0.5]
|
|
this.borderWidth = 10
|
|
}
|
|
|
|
var proto = SelectBox.prototype
|
|
|
|
proto.draw = function() {
|
|
if(!this.enabled) {
|
|
return
|
|
}
|
|
|
|
var plot = this.plot
|
|
var selectBox = this.selectBox
|
|
var lineWidth = this.borderWidth
|
|
|
|
var innerFill = this.innerFill
|
|
var innerColor = this.innerColor
|
|
var outerFill = this.outerFill
|
|
var outerColor = this.outerColor
|
|
var borderColor = this.borderColor
|
|
|
|
var boxes = plot.box
|
|
var screenBox = plot.screenBox
|
|
var dataBox = plot.dataBox
|
|
var viewBox = plot.viewBox
|
|
var pixelRatio = plot.pixelRatio
|
|
|
|
//Map select box into pixel coordinates
|
|
var loX = (selectBox[0]-dataBox[0])*(viewBox[2]-viewBox[0])/(dataBox[2]-dataBox[0])+viewBox[0]
|
|
var loY = (selectBox[1]-dataBox[1])*(viewBox[3]-viewBox[1])/(dataBox[3]-dataBox[1])+viewBox[1]
|
|
var hiX = (selectBox[2]-dataBox[0])*(viewBox[2]-viewBox[0])/(dataBox[2]-dataBox[0])+viewBox[0]
|
|
var hiY = (selectBox[3]-dataBox[1])*(viewBox[3]-viewBox[1])/(dataBox[3]-dataBox[1])+viewBox[1]
|
|
|
|
loX = Math.max(loX, viewBox[0])
|
|
loY = Math.max(loY, viewBox[1])
|
|
hiX = Math.min(hiX, viewBox[2])
|
|
hiY = Math.min(hiY, viewBox[3])
|
|
|
|
if(hiX < loX || hiY < loY) {
|
|
return
|
|
}
|
|
|
|
boxes.bind()
|
|
|
|
//Draw box
|
|
var screenWidth = screenBox[2] - screenBox[0]
|
|
var screenHeight = screenBox[3] - screenBox[1]
|
|
|
|
if(this.outerFill) {
|
|
boxes.drawBox(0, 0, screenWidth, loY, outerColor)
|
|
boxes.drawBox(0, loY, loX, hiY, outerColor)
|
|
boxes.drawBox(0, hiY, screenWidth, screenHeight, outerColor)
|
|
boxes.drawBox(hiX, loY, screenWidth, hiY, outerColor)
|
|
}
|
|
|
|
if(this.innerFill) {
|
|
boxes.drawBox(loX, loY, hiX, hiY, innerColor)
|
|
}
|
|
|
|
//Draw border
|
|
if(lineWidth > 0) {
|
|
|
|
//Draw border
|
|
var w = lineWidth * pixelRatio
|
|
boxes.drawBox(loX-w, loY-w, hiX+w, loY+w, borderColor)
|
|
boxes.drawBox(loX-w, hiY-w, hiX+w, hiY+w, borderColor)
|
|
boxes.drawBox(loX-w, loY-w, loX+w, hiY+w, borderColor)
|
|
boxes.drawBox(hiX-w, loY-w, hiX+w, hiY+w, borderColor)
|
|
}
|
|
}
|
|
|
|
proto.update = function(options) {
|
|
options = options || {}
|
|
|
|
this.innerFill = !!options.innerFill
|
|
this.outerFill = !!options.outerFill
|
|
this.innerColor = (options.innerColor || [0,0,0,0.5]).slice()
|
|
this.outerColor = (options.outerColor || [0,0,0,0.5]).slice()
|
|
this.borderColor = (options.borderColor || [0,0,0,1]).slice()
|
|
this.borderWidth = options.borderWidth || 0
|
|
this.selectBox = (options.selectBox || this.selectBox).slice()
|
|
}
|
|
|
|
proto.dispose = function() {
|
|
this.boxBuffer.dispose()
|
|
this.boxShader.dispose()
|
|
this.plot.removeOverlay(this)
|
|
}
|
|
|
|
function createSelectBox(plot, options) {
|
|
var gl = plot.gl
|
|
var buffer = createBuffer(gl, [
|
|
0, 0,
|
|
0, 1,
|
|
1, 0,
|
|
1, 1 ])
|
|
var shader = createShader(gl, SHADERS.boxVertex, SHADERS.boxFragment)
|
|
var selectBox = new SelectBox(plot, buffer, shader)
|
|
selectBox.update(options)
|
|
plot.addOverlay(selectBox)
|
|
return selectBox
|
|
}
|
|
|