{
const draw = new Draw()
console.log('s ==>', draw.s)
return draw.s;
}
class Draw {
constructor () {
this.mouseDown = false;
this.startX = 0;
this.startY = 0;
this.placeholderX = 0;
this.placeholderY = 0;
this.endX = 0;
this.endY = 0;
this.target = null;
this.pathPoint = []
this.createSvgViewBox()
this.drawGridBg()
this.registerEvent()
}
createSvgViewBox () {
const w = width
const h = w * .6
this.s = DOM.svg(w, h);
}
drawGridBg () {
const w = width
const h = w * .6
const mx = w/2 * margin
const my = h/2 * margin;
const path = `M${mx},${my}${gridPath(w - mx * 2, h - my * 2, false)}`;
this.s.appendChild(svg`<path stroke=#ccc d="${path}">`)
}
registerEvent () {
if (this.s) {
this.s.onmousedown = this.startHandler.bind(this)
this.s.onmousemove = this.moveHandler.bind(this)
this.s.onmouseup = this.endHandler.bind(this)
this.s.addEventListener('touchstart', this.startHandler.bind(this), false)
this.s.addEventListener('touchmove', this.moveHandler.bind(this), false)
this.s.addEventListener('touchend', this.endHandler.bind(this), false)
}
}
startHandler (e) {
e.preventDefault()
// console.log(e, e.offsetX, e.offsetY)
this.mouseDown = true
this.startX = this.getOffsetX(e)
this.startY = this.getOffsetY(e)
this.pathPoint.push([this.startX, this.startY])
}
moveHandler (e) {
e.preventDefault()
if(this.mouseDown) {
// console.log(e.type, e)
this.placeholderX = this.getOffsetX(e)
this.placeholderY = this.getOffsetY(e)
if (this.startX !== this.endX || this.startY !== this.endY) {
if (!this.target) {
this.target = this.s.appendChild(svg`<path stroke=#666 fill="none" d="${this.getMultiSquarePath()} L${this.placeholderX} ${this.placeholderY}">`)
} else {
d3.select(this.target).attr('d', `${this.getMultiSquarePath()} L${this.placeholderX} ${this.placeholderY}`)
}
}
}
}
endHandler (e) {
e.preventDefault()
if(this.mouseDown) {
// this.mouseDown = false
this.endX = this.getOffsetX(e)
this.endY = this.getOffsetY(e)
if (!this.target) {
this.target = this.s.appendChild(svg`<path stroke=#666 d="${this.getMultiSquarePath()} L${this.endX} ${this.endY}`)
} else {
d3.select(this.target)
.attr('d', `${this.getMultiSquarePath()} L${this.endX} ${this.endY}`)
.attr('pointer-events', 'visiblePainted')
}
if (this.nearByRadius(this.pathPoint[0][0], this.pathPoint[0][1], this.endX, this.endY)) {
this.mouseDown = false
this.endX = this.pathPoint[0][0]
this.endY = this.pathPoint[0][1]
d3.select(this.target)
.attr('fill', '#CFE2F3')
.attr('stroke', '#000')
.attr('d', `${this.getMultiSquarePath()} L${this.endX} ${this.endY}`)
.attr('stroke-width', '2')
this.pathPoint = []
} else {
this.pathPoint.push([this.endX, this.endY])
}
this.placeholderX = 0
this.placeholderY = 0
this.endX = 0
this.endY = 0
this.target = null
}
}
nearByRadius (x1, y1, x2, y2) {
return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2) <= 3
}
getMultiSquarePath() {
let path = 'M'
if (this.pathPoint.length > 0) {
path += this.pathPoint[0].join(' ')
this.pathPoint.slice(1).forEach(point => {
path += 'L' + point.join(' ')
})
}
console.log(path)
return path
}
getOffsetX(e) {
if(e.touches) {
if (e.touches[0]) {
const offset = getDomOffset(this.s)
return e.touches[0].pageX - offset.offsetLeft
} else { // touchend
return this.placeholderX
}
} else {
return e.offsetX || e.pageX
}
}
getOffsetY(e) {
if(e.touches) {
if (e.touches[0]) {
return e.touches[0].pageY - getDomOffset(this.s).offsetTop
} else { // touchend
return this.placeholderY
}
} else {
return e.offsetY || e.pageY
}
}
}
function getDomOffset(dom) {
// console.log('offset dom', dom)
if (dom) {
if (dom.offsetTop === undefined) {
return getDomOffset(dom.parentNode)
} else {
return {
offsetTop: dom.offsetTop,
offsetRight: dom.offsetRight,
offsetBottom: dom.offsetBottom,
offsetLeft: dom.offsetLeft,
}
}
} else {
return {
offsetTop: 0,
offsetRight: 0,
offsetBottom: 0,
offsetLeft: 0
}
}
}
function gridPath(width = 1, height = 1, initPosition = true) {
// Line distances.
// const sx = width / cols, sy = height / rows;
// Horizontal and vertical path segments, joined by relative move commands.
const px = Array(Math.ceil(height / cellWidth)).fill(`h${width}`).join(`m${-width},${cellWidth}`);
const py = Array(Math.ceil(width / cellWidth)).fill(`v${height}`).join(`m${cellWidth},${-height}`);
// Paths require an initial move command. It can be set either by this function
// or appended to the returned path.
return `${initPosition ? 'M0,0' : ''}${px}m${-width}${-height}${py}`;
}
selectedPath = null
cellWidth = 10
cellHeight = 10
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.