WIP: Palette drag to set

This commit is contained in:
cmack 2020-07-09 16:30:00 +01:00
parent 0fdaafcd62
commit 39ee12c390
4 changed files with 47 additions and 1175 deletions

View File

@ -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 },
}) })
) )
} }

View File

@ -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>

View File

@ -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