Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

Commit

Permalink
[dropper,overlay] Adjustments for overlay to be more independent
Browse files Browse the repository at this point in the history 
Separate all dimension finding to dropper and let overlay do only its overlay
job based on provided data.
  • Loading branch information
@kepi
kepi committed May 2, 2020
1 parent 3792b02 commit 63c51dc
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 45 deletions.
88 changes: 53 additions & 35 deletions src/edropper2.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ var page = {

screenWidth: 0,
screenHeight: 0,
xOffset: 0,
yOffset: 0,

overlay: null as Overlay,

Expand All @@ -35,11 +37,24 @@ var page = {

// function to set defaults - used during init and later for reset
defaults: function() {
page.screenWidth = window.innerWidth
page.screenHeight = window.innerHeight

page.canvas = document.createElement('canvas')
page.rects = []
page.screenshoting = false
page.width = document.documentElement.scrollWidth
page.height = document.documentElement.scrollHeight
page.width = Math.round(document.documentElement.scrollWidth)
page.height = Math.round(document.documentElement.scrollHeight)

// TODO: check if this is needed
if (page.width > CANVAS_MAX_SIZE) {
page.width = CANVAS_MAX_SIZE
console.warn('Page width is larger then maximum Canvas width.')
}
if (page.height > CANVAS_MAX_SIZE) {
page.height = CANVAS_MAX_SIZE
console.warn('Page height is larger then maximum Canvas height.')
}
},

// ---------------------------------
Expand Down Expand Up @@ -82,6 +97,8 @@ var page = {
if (page.dropperActivated) return

page.overlay = new Overlay({
width: page.width,
height: page.height,
enableToolbox: page.options.enableColorToolbox,
enableTooltip: page.options.enableColorTooltip,
cursor: page.options.cursor,
Expand Down Expand Up @@ -131,12 +148,12 @@ var page = {
page.dropperDeactivate()
page.sendMessage({
type: 'set-color',
color: page.pickColor(e),
color: page.pickColor(e.pageX, e.pageY),
})
},
onScrollStop: function() {
if (!page.dropperActivated) return
console.log('dropper: Scroll stop')
console.log('dropper: scroll stopped')
page.screenChanged()
},
onScrollStart: function() {
Expand Down Expand Up @@ -172,23 +189,27 @@ var page = {
// set defaults
page.defaults()

page.overlay.resized()
// call screen chaned
page.screenChanged()
page.overlay.resized({ width: page.width, height: page.height })
},
// ---------------------------------
// MISC
// ---------------------------------
tooltip: function(e: MouseEvent) {
if (!page.dropperActivated || page.screenshoting) return
var color = page.pickColor(e)

const x = e.pageX
const y = e.pageY

var color = page.pickColor(x, y)

page.overlay.tooltip({
screenWidth: page.screenWidth,
screenHeight: page.screenHeight,
x: e.pageX,
y: e.pageY,
color: color,
x,
y,
color,
})
},
// return true if rectangle A is whole in rectangle B
Expand Down Expand Up @@ -244,7 +265,7 @@ var page = {
// ---------------------------------
// COLORS
// ---------------------------------
pickColor: function(e: MouseEvent) {
pickColor: function(x, y) {
if (page.canvasData === null) return
var canvasIndex = (e.pageX + e.pageY * page.canvas.width) * 4
////console.log(e.pageX + ' ' + e.pageY + ' ' + page.canvas.width);
Expand Down Expand Up @@ -277,16 +298,27 @@ var page = {
// UPDATING SCREEN
// ---------------------------------
checkCanvas: function() {
const scale = window.devicePixelRatio

// width and height with borders
// const widthWB = page.width * scale + page.canvasBorders
// const heightWB = page.height * scale + page.canvasBorders
const widthWB = page.width + page.canvasBorders
const heightWB = page.height + page.canvasBorders

// we have to create new canvas element
if (
page.canvas.width != page.width + page.canvasBorders ||
page.canvas.height != page.height + page.canvasBorders
) {
if (page.canvas.width != widthWB || page.canvas.height != heightWB) {
page.canvas = document.createElement('canvas')
page.canvas.width = page.width + page.canvasBorders
page.canvas.height = page.height + page.canvasBorders
console.log(`dropper: creating new canvas ${page.canvas.width}x${page.canvas.height}. Pixel Ratio: ${window.devicePixelRatio}`)
page.canvas.width = widthWB
page.canvas.height = heightWB

console.log(
`dropper: creating new canvas ${page.canvas.width}x${page.canvas.height}. Pixel Ratio: ${window.devicePixelRatio}`,
)

page.canvasContext = page.canvas.getContext('2d')
page.canvasContext.scale(1 / scale, 1 / scale)
// page.canvasContext.scale(scale, scale)
page.rects = []
}
},
Expand All @@ -300,14 +332,14 @@ var page = {
screenChanged: function(force = false) {
if (!page.dropperActivated) return
console.log('dropper: screenChanged')
let yOffset = document.documentElement.scrollTop
let xOffset = document.documentElement.scrollLeft
var rect = {
x: xOffset,
y: yOffset,
width: page.screenWidth,
height: page.screenHeight,
}
page.yOffset = Math.round(document.documentElement.scrollTop)
page.xOffset = Math.round(document.documentElement.scrollLeft)
// don't screenshot if we already have this one
if (!force && page.rects.length > 0) {
for (let index in page.rects) {
Expand All @@ -327,24 +359,13 @@ var page = {
},
// capture actual Screenshot
capture: function() {
const yOffset = document.documentElement.scrollTop
const xOffset = document.documentElement.scrollLeft

page.checkCanvas()
////console.log(page.rects);
// var image = new Image();
console.log('dropper: creating image element and waiting on load')
var image = document.createElement('img')
image.onload = function() {
console.log(`dropper: got new screenshot ${image.width}x${image.height}`)
page.screenWidth = image.width
page.screenHeight = image.height
var rect = {
x: xOffset,
y: yOffset,
width: image.width,
height: image.height,
}
var merged = false
// if there are already any rectangles
if (page.rects.length > 0) {
Expand All @@ -361,6 +382,8 @@ var page = {
// put rectangle in array
if (merged == false) page.rects.push(rect)
page.canvasContext.drawImage(image, xOffset, yOffset)
// page.screenWidth = image.width
// page.screenHeight = image.height
page.canvasData = page.canvasContext.getImageData(
0,
0,
Expand All @@ -382,11 +405,6 @@ var page = {
},
init: function() {
page.messageListener()
if (page.width > CANVAS_MAX_SIZE) {
page.width = CANVAS_MAX_SIZE
}
if (page.height > CANVAS_MAX_SIZE) {
page.height = CANVAS_MAX_SIZE
}
},
}
Expand Down
33 changes: 23 additions & 10 deletions src/overlay.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,22 @@ class Overlay {
el: HTMLElement
enableToolbox: boolean = true
enableTooltip: boolean = true
pageWidth: number
pageHeight: number
cursor: string

_toolbox: ToolBox
_tooltip: ToolTip

tools: Array<Tool> = []

constructor(args: { enableToolbox: boolean; enableTooltip: boolean; cursor: string }) {
constructor(args: {
width: number
height: number
enableToolbox: boolean
enableTooltip: boolean
cursor: string
}) {
// set options
this.cursor = args.cursor

Expand All @@ -33,8 +41,8 @@ class Overlay {
id: 'eye-dropper-overlay',
style: [
'position: absolute',
`width: ${document.documentElement.scrollWidth}px`,
`height: ${document.documentElement.scrollHeight}px`,
`width: ${args.width}px`,
`height: ${args.height}px`,
'opacity: 1',
'background: none',
'border: none',
Expand Down Expand Up @@ -68,10 +76,10 @@ class Overlay {
}
}

resized() {
resized(args: { width: number; height: number }) {
// also don't forget to set overlay
this.el.style.width = `${document.documentElement.scrollWidth}px`
this.el.style.height = `${document.documentElement.scrollHeight}px`
this.el.style.width = `${args.width}px`
this.el.style.height = `${args.height}px`
}

deactivate() {
Expand All @@ -91,8 +99,9 @@ class Overlay {
y: number
color: Color
}) {
const yOffset = document.documentElement.scrollTop
const xOffset = document.documentElement.scrollLeft
// offset is used for positioning element on screen
const yOffset = Math.round(document.documentElement.scrollTop)
const xOffset = Math.round(document.documentElement.scrollLeft)

// set tooltip
if (this.enableTooltip === true) {
Expand All @@ -113,11 +122,15 @@ class Overlay {
class Tool {
el: HTMLElement
color: Color
x: number
y: number

constructor() {}

hookColor(args) {
this.color = args.color
this.x = args.x
this.y = args.y
}

hookDeactivate(args) {
Expand Down Expand Up @@ -179,7 +192,7 @@ class ToolBox extends Tool {
'font-size: 15px',
'border: 1px solid black',
'width: 160px',
'height: 42px',
'height: 52px',
'bottom: 4px',
'right: 4px',
'border-radius: 2px',
Expand Down Expand Up @@ -220,7 +233,7 @@ class ToolBox extends Tool {
hookColor(args) {
super.hookColor(args)

this.elText.innerHTML = `#${this.color.rgbhex}<br/>rgb(${this.color.r},${this.color.g},${this.color.b})`
this.elText.innerHTML = `#${this.color.rgbhex}<br/>rgb(${this.color.r},${this.color.g},${this.color.b})<br/>${args.x}, ${args.y}`
this.elColor.style.backgroundColor = `#${this.color.rgbhex}`
}
}
Expand Down

0 comments on commit 63c51dc

Please sign in to comment.