1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
| <template>
| <div
| :class="[prefixCls + '-saturation-wrapper']"
| tabindex="0"
| @keydown.esc="handleEscape"
| @click="$el.focus()"
| @keydown.left="handleLeft"
| @keydown.right="handleRight"
| @keydown.up="handleUp"
| @keydown.down="handleDown"
| >
| <div
| ref="container"
| :style="bgColorStyle"
| :class="[prefixCls + '-saturation']"
| @mousedown="handleMouseDown">
| <div :class="[prefixCls + '-saturation--white']"></div>
| <div :class="[prefixCls + '-saturation--black']"></div>
| <div
| :style="pointerStyle"
| :class="[prefixCls + '-saturation-pointer']">
| <div :class="[prefixCls + '-saturation-circle']"></div>
| </div>
| </div>
| </div>
| </template>
|
| <script>
| import HSAMixin from './hsaMixin';
| import Prefixes from './prefixMixin';
| import {clamp, getIncrement} from './utils';
| import { on, off } from '../../utils/dom';
|
| export default {
| name: 'Saturation',
|
| mixins: [HSAMixin, Prefixes],
|
| data() {
| const normalStep = 0.01;
|
| return {
| left: -normalStep,
| right: normalStep,
| up: normalStep,
| down: -normalStep,
| multiplier: 10,
| powerKey: 'shiftKey',
| };
| },
|
| computed: {
| bgColorStyle() {
| return {background: `hsl(${this.value.hsv.h}, 100%, 50%)`};
| },
| pointerStyle() {
| return {top: `${-(this.value.hsv.v * 100) + 1 + 100}%`, left: `${this.value.hsv.s * 100}%`};
| },
| },
|
| methods: {
| change(h, s, v, a) {
| this.$emit('change', {h, s, v, a, source: 'hsva'});
| },
| handleSlide(e, direction, key) {
| e.preventDefault();
| e.stopPropagation();
|
| const isPowerKey = e[this.powerKey];
| const increment = isPowerKey ? direction * this.multiplier : direction;
| const {h, s, v, a} = this.value.hsv;
| const saturation = clamp(s + getIncrement(key, ['left', 'right'], increment), 0, 1);
| const bright = clamp(v + getIncrement(key, ['up', 'down'], increment), 0, 1);
|
| this.change(h, saturation, bright, a);
| },
| handleChange(e) {
| e.preventDefault();
| e.stopPropagation();
|
| const {clientWidth, clientHeight} = this.$refs.container;
| const left = clamp(this.getLeft(e), 0, clientWidth);
| const top = clamp(this.getTop(e), 0, clientHeight);
| const saturation = left / clientWidth;
| const bright = clamp(1 - top / clientHeight, 0, 1);
|
| this.change(this.value.hsv.h, saturation, bright, this.value.hsv.a);
| },
| handleMouseDown(e) {
| HSAMixin.methods.handleMouseDown.call(this, e);
| // window.addEventListener('mouseup', this.handleChange, false);
| on(window, 'mouseup', this.handleChange);
| },
| unbindEventListeners(e) {
| HSAMixin.methods.unbindEventListeners.call(this, e);
| // window.removeEventListener('mouseup', this.handleChange);
| off(window, 'mouseup', this.handleChange);
| },
| },
| };
| </script>
|
|
