WIP: Palette drag to set
This commit is contained in:
parent
0fdaafcd62
commit
39ee12c390
|
@ -1,14 +1,14 @@
|
||||||
export default function(node) {
|
export default function (node) {
|
||||||
function handleMouseDown() {
|
function handleMouseDown() {
|
||||||
window.addEventListener("mousemove", handleMouseMove)
|
window.addEventListener("mousemove", handleMouseMove)
|
||||||
window.addEventListener("mouseup", handleMouseUp)
|
window.addEventListener("mouseup", handleMouseUp)
|
||||||
|
node.dispatchEvent(new CustomEvent("dragstart"))
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleMouseMove(event) {
|
function handleMouseMove(event) {
|
||||||
let mouseX = event.clientX
|
|
||||||
node.dispatchEvent(
|
node.dispatchEvent(
|
||||||
new CustomEvent("drag", {
|
new CustomEvent("drag", {
|
||||||
detail: mouseX,
|
detail: { mouseX: event.clientX, mouseY: event.clientY },
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import { onMount, createEventDispatcher } from "svelte"
|
import { onMount, createEventDispatcher } from "svelte"
|
||||||
|
import { drag } from "../actions"
|
||||||
import CheckedBackground from "./CheckedBackground.svelte"
|
import CheckedBackground from "./CheckedBackground.svelte"
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
|
@ -10,22 +11,18 @@
|
||||||
export let a = 1
|
export let a = 1
|
||||||
|
|
||||||
let palette
|
let palette
|
||||||
|
let cursor = "grab"
|
||||||
|
|
||||||
let paletteHeight,
|
let paletteHeight,
|
||||||
paletteWidth = 0
|
paletteWidth = 0
|
||||||
|
|
||||||
function handleClick(event) {
|
function handePaletteChange({ mouseX, mouseY }) {
|
||||||
const { left, top } = palette.getBoundingClientRect()
|
const { left, top } = palette.getBoundingClientRect()
|
||||||
let clickX = event.clientX - left
|
let x = mouseX - left
|
||||||
let clickY = event.clientY - top
|
let y = mouseY - top
|
||||||
if (
|
if (x > 0 && y > 0 && x < paletteWidth && y < paletteHeight) {
|
||||||
clickX > 0 &&
|
let s = (x / paletteWidth) * 100
|
||||||
clickY > 0 &&
|
let v = 100 - (y / paletteHeight) * 100
|
||||||
clickX < paletteWidth &&
|
|
||||||
clickY < paletteHeight
|
|
||||||
) {
|
|
||||||
let s = (clickX / paletteWidth) * 100
|
|
||||||
let v = 100 - (clickY / paletteHeight) * 100
|
|
||||||
dispatch("change", { s, v })
|
dispatch("change", { s, v })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -38,7 +35,8 @@
|
||||||
`
|
`
|
||||||
$: style = `background: ${paletteGradient};`
|
$: style = `background: ${paletteGradient};`
|
||||||
|
|
||||||
$: pickerStyle = `transform: translate(${pickerX - 8}px, ${pickerY - 8}px);`
|
$: pickerStyle = `transform: translate(${pickerX - 8}px, ${pickerY -
|
||||||
|
8}px); cursor: ${cursor};`
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<CheckedBackground width="100%">
|
<CheckedBackground width="100%">
|
||||||
|
@ -46,10 +44,19 @@
|
||||||
bind:this={palette}
|
bind:this={palette}
|
||||||
bind:clientHeight={paletteHeight}
|
bind:clientHeight={paletteHeight}
|
||||||
bind:clientWidth={paletteWidth}
|
bind:clientWidth={paletteWidth}
|
||||||
on:click={handleClick}
|
on:click={event => handePaletteChange({
|
||||||
|
mouseX: event.clientX,
|
||||||
|
mouseY: event.clientY,
|
||||||
|
})}
|
||||||
class="palette"
|
class="palette"
|
||||||
{style}>
|
{style}>
|
||||||
<div class="picker" style={pickerStyle} />
|
<div
|
||||||
|
use:drag
|
||||||
|
on:dragstart={() => (cursor = 'grabbing')}
|
||||||
|
on:drag={event => handePaletteChange(event.detail)}
|
||||||
|
on:dragend={() => (cursor = 'grab')}
|
||||||
|
class="picker"
|
||||||
|
style={pickerStyle} />
|
||||||
</div>
|
</div>
|
||||||
</CheckedBackground>
|
</CheckedBackground>
|
||||||
|
|
||||||
|
|
|
@ -11,11 +11,17 @@
|
||||||
let sliderWidth = 0
|
let sliderWidth = 0
|
||||||
let upperLimit = type === "hue" ? 360 : 1
|
let upperLimit = type === "hue" ? 360 : 1
|
||||||
let incrementFactor = type === "hue" ? 1 : 0.01
|
let incrementFactor = type === "hue" ? 1 : 0.01
|
||||||
|
let cursor = "grab"
|
||||||
|
|
||||||
const isWithinLimit = value => value >= 0 && value <= upperLimit
|
const isWithinLimit = value => value >= 0 && value <= upperLimit
|
||||||
|
|
||||||
function onSliderChange(mouseX, isDrag = false) {
|
function onSliderChange({ mouseX }, isDrag = false) {
|
||||||
const { left, width } = slider.getBoundingClientRect()
|
const { left, width } = slider.getBoundingClientRect()
|
||||||
|
|
||||||
|
if (isDrag && cursor !== "grabbing") {
|
||||||
|
cursor = "grabbing"
|
||||||
|
}
|
||||||
|
|
||||||
let clickPosition = mouseX - left
|
let clickPosition = mouseX - left
|
||||||
|
|
||||||
let percentageClick = (clickPosition / sliderWidth).toFixed(2)
|
let percentageClick = (clickPosition / sliderWidth).toFixed(2)
|
||||||
|
@ -42,10 +48,19 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function handleDragStart() {
|
||||||
|
cursor = "grabbing"
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDragEnd() {
|
||||||
|
cursor = "grab"
|
||||||
|
dispatch("dragend")
|
||||||
|
}
|
||||||
|
|
||||||
$: thumbPosition =
|
$: thumbPosition =
|
||||||
type === "hue" ? sliderWidth * (value / 360) : sliderWidth * value
|
type === "hue" ? sliderWidth * (value / 360) : sliderWidth * value
|
||||||
|
|
||||||
$: style = `transform: translateX(${thumbPosition - 6}px);`
|
$: style = `transform: translateX(${thumbPosition - 6}px); cursor: ${cursor};`
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
@ -53,14 +68,15 @@
|
||||||
bind:this={slider}
|
bind:this={slider}
|
||||||
use:keyevents={{ 37: handleLeftKey, 39: handleRightKey }}
|
use:keyevents={{ 37: handleLeftKey, 39: handleRightKey }}
|
||||||
bind:clientWidth={sliderWidth}
|
bind:clientWidth={sliderWidth}
|
||||||
on:click={event => onSliderChange(event.clientX)}
|
on:click={event => onSliderChange({ mouseX: event.clientX })}
|
||||||
class="color-format-slider"
|
class="color-format-slider"
|
||||||
class:hue={type === 'hue'}
|
class:hue={type === 'hue'}
|
||||||
class:alpha={type === 'alpha'}>
|
class:alpha={type === 'alpha'}>
|
||||||
<div
|
<div
|
||||||
use:drag
|
use:drag
|
||||||
on:drag={e => onSliderChange(e.detail, true)}
|
on:drag={e => onSliderChange(e.detail, true)}
|
||||||
on:dragend
|
on:dragstart={handleDragStart}
|
||||||
|
on:dragend={handleDragEnd}
|
||||||
class="slider-thumb"
|
class="slider-thumb"
|
||||||
{style} />
|
{style} />
|
||||||
</div>
|
</div>
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue