goodteditor-ui 1.0.11 → 1.0.12

package/src/components/ui/ColorPicker/Hue.vue

@@ -1,113 +1,113 @@
-<template>
-    <div class="ui-color-picker-hue" @mousedown.prevent.stop="selectHue">
-        <canvas ref="canvasHue" />
-        <div class="slide" :style="slideHueStyle" />
-    </div>
-</template>
-<style lang="less" scoped>
-.ui-color-picker-hue {
-    position: relative;
-    cursor: pointer;
-    .slide {
-        position: absolute;
-        left: 0;
-        top: 100px;
-        width: 100%;
-        height: 4px;
-        background: #fff;
-        box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3);
-        pointer-events: none;
-    }
-}
-</style>
-<script>
-export default {
-    props: {
-        hsv: {
-            type: Object,
-            default: null,
-        },
-        width: {
-            type: Number,
-            default: 15,
-        },
-        height: {
-            type: Number,
-            default: 152,
-        },
-    },
-    data() {
-        return {
-            slideHueStyle: {},
-        };
-    },
-    // 不能监听，否则操作saturation时，这里的slide会抖动
-    // watch: {
-    //     'hsv.h'() {
-    //         this.renderSlide()
-    //     }
-    // },
-    mounted() {
-        this.renderColor();
-        this.renderSlide();
-    },
-    methods: {
-        renderColor() {
-            const canvas = this.$refs.canvasHue;
-            const width = this.width;
-            const height = this.height;
-            const ctx = canvas.getContext('2d');
-            canvas.width = width;
-            canvas.height = height;
-
-            const gradient = ctx.createLinearGradient(0, 0, 0, height);
-            gradient.addColorStop(0, '#FF0000'); // 红
-            gradient.addColorStop(0.17 * 1, '#FF00FF'); // 紫
-            gradient.addColorStop(0.17 * 2, '#0000FF'); // 蓝
-            gradient.addColorStop(0.17 * 3, '#00FFFF'); // 青
-            gradient.addColorStop(0.17 * 4, '#00FF00'); // 绿
-            gradient.addColorStop(0.17 * 5, '#FFFF00'); // 黄
-            gradient.addColorStop(1, '#FF0000'); // 红
-            ctx.fillStyle = gradient;
-            ctx.fillRect(0, 0, width, height);
-        },
-        renderSlide() {
-            this.slideHueStyle = {
-                top: (1 - this.hsv.h / 360) * this.height - 2 + 'px',
-            };
-        },
-        selectHue(e) {
-            const { top: hueTop } = this.$el.getBoundingClientRect();
-            const ctx = e.target.getContext('2d');
-
-            const mousemove = e => {
-                let y = e.clientY - hueTop;
-
-                if (y < 0) {
-                    y = 0;
-                }
-                if (y > this.height) {
-                    y = this.height;
-                }
-
-                this.slideHueStyle = {
-                    top: y - 2 + 'px',
-                };
-                const imgData = ctx.getImageData(0, Math.min(y, this.height - 1), 1, 1);
-                const [r, g, b] = imgData.data;
-                this.$emit('selectHue', { r, g, b });
-            };
-
-            mousemove(e);
-
-            const mouseup = () => {
-                document.removeEventListener('mousemove', mousemove);
-                document.removeEventListener('mouseup', mouseup);
-            };
-
-            document.addEventListener('mousemove', mousemove);
-            document.addEventListener('mouseup', mouseup);
-        },
-    },
-};
-</script>
+<template>
+    <div class="ui-color-picker-hue" @mousedown.prevent.stop="selectHue">
+        <canvas ref="canvasHue" />
+        <div class="slide" :style="slideHueStyle" />
+    </div>
+</template>
+<style lang="less" scoped>
+.ui-color-picker-hue {
+    position: relative;
+    cursor: pointer;
+    .slide {
+        position: absolute;
+        left: 0;
+        top: 100px;
+        width: 100%;
+        height: 4px;
+        background: #fff;
+        box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3);
+        pointer-events: none;
+    }
+}
+</style>
+<script>
+export default {
+    props: {
+        hsv: {
+            type: Object,
+            default: null,
+        },
+        width: {
+            type: Number,
+            default: 15,
+        },
+        height: {
+            type: Number,
+            default: 152,
+        },
+    },
+    data() {
+        return {
+            slideHueStyle: {},
+        };
+    },
+    // 不能监听，否则操作saturation时，这里的slide会抖动
+    // watch: {
+    //     'hsv.h'() {
+    //         this.renderSlide()
+    //     }
+    // },
+    mounted() {
+        this.renderColor();
+        this.renderSlide();
+    },
+    methods: {
+        renderColor() {
+            const canvas = this.$refs.canvasHue;
+            const width = this.width;
+            const height = this.height;
+            const ctx = canvas.getContext('2d');
+            canvas.width = width;
+            canvas.height = height;
+
+            const gradient = ctx.createLinearGradient(0, 0, 0, height);
+            gradient.addColorStop(0, '#FF0000'); // 红
+            gradient.addColorStop(0.17 * 1, '#FF00FF'); // 紫
+            gradient.addColorStop(0.17 * 2, '#0000FF'); // 蓝
+            gradient.addColorStop(0.17 * 3, '#00FFFF'); // 青
+            gradient.addColorStop(0.17 * 4, '#00FF00'); // 绿
+            gradient.addColorStop(0.17 * 5, '#FFFF00'); // 黄
+            gradient.addColorStop(1, '#FF0000'); // 红
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, width, height);
+        },
+        renderSlide() {
+            this.slideHueStyle = {
+                top: (1 - this.hsv.h / 360) * this.height - 2 + 'px',
+            };
+        },
+        selectHue(e) {
+            const { top: hueTop } = this.$el.getBoundingClientRect();
+            const ctx = e.target.getContext('2d');
+
+            const mousemove = e => {
+                let y = e.clientY - hueTop;
+
+                if (y < 0) {
+                    y = 0;
+                }
+                if (y > this.height) {
+                    y = this.height;
+                }
+
+                this.slideHueStyle = {
+                    top: y - 2 + 'px',
+                };
+                const imgData = ctx.getImageData(0, Math.min(y, this.height - 1), 1, 1);
+                const [r, g, b] = imgData.data;
+                this.$emit('selectHue', { r, g, b });
+            };
+
+            mousemove(e);
+
+            const mouseup = () => {
+                document.removeEventListener('mousemove', mousemove);
+                document.removeEventListener('mouseup', mouseup);
+            };
+
+            document.addEventListener('mousemove', mousemove);
+            document.addEventListener('mouseup', mouseup);
+        },
+    },
+};
+</script>

package/src/components/ui/ColorPicker/Preview.vue

@@ -1,55 +1,55 @@
-<template>
-    <canvas />
-</template>
-<script>
-import mixin from './mixin';
-export default {
-    mixins: [mixin],
-    props: {
-        color: {
-            type: String,
-            default: '#000000'
-        },
-        width: {
-            type: Number,
-            default: 100
-        },
-        height: {
-            type: Number,
-            default: 30
-        }
-    },
-    data() {
-        return {
-            alphaSize: 5
-        };
-    },
-    watch: {
-        color() {
-            this.renderColor();
-        }
-    },
-    mounted() {
-        this.renderColor();
-    },
-    methods: {
-        renderColor() {
-            const canvas = this.$el;
-            const width = this.width;
-            const height = this.height;
-            const size = this.alphaSize;
-            const canvasSquare = this.createAlphaSquare(size);
-
-            const ctx = canvas.getContext('2d');
-            canvas.width = width;
-            canvas.height = height;
-
-            ctx.fillStyle = ctx.createPattern(canvasSquare, 'repeat');
-            ctx.fillRect(0, 0, width, height);
-
-            ctx.fillStyle = this.color;
-            ctx.fillRect(0, 0, width, height);
-        }
-    }
-};
-</script>
+<template>
+    <canvas />
+</template>
+<script>
+import mixin from './mixin';
+export default {
+    mixins: [mixin],
+    props: {
+        color: {
+            type: String,
+            default: '#000000'
+        },
+        width: {
+            type: Number,
+            default: 100
+        },
+        height: {
+            type: Number,
+            default: 30
+        }
+    },
+    data() {
+        return {
+            alphaSize: 5
+        };
+    },
+    watch: {
+        color() {
+            this.renderColor();
+        }
+    },
+    mounted() {
+        this.renderColor();
+    },
+    methods: {
+        renderColor() {
+            const canvas = this.$el;
+            const width = this.width;
+            const height = this.height;
+            const size = this.alphaSize;
+            const canvasSquare = this.createAlphaSquare(size);
+
+            const ctx = canvas.getContext('2d');
+            canvas.width = width;
+            canvas.height = height;
+
+            ctx.fillStyle = ctx.createPattern(canvasSquare, 'repeat');
+            ctx.fillRect(0, 0, width, height);
+
+            ctx.fillStyle = this.color;
+            ctx.fillRect(0, 0, width, height);
+        }
+    }
+};
+</script>

package/src/components/ui/ColorPicker/Saturation.vue

@@ -1,123 +1,123 @@
-<template>
-    <div class="ui-color-picker-saturation" @mousedown.prevent.stop="selectSaturation">
-        <canvas ref="canvasSaturation" />
-        <div class="slide" :style="slideSaturationStyle" />
-    </div>
-</template>
-<style lang="less" scoped>
-.ui-color-picker-saturation {
-    position: relative;
-    cursor: pointer;
-    .slide {
-        position: absolute;
-        left: 100px;
-        top: 0;
-        width: 10px;
-        height: 10px;
-        border-radius: 50%;
-        border: 1px solid #fff;
-        box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3);
-        pointer-events: none;
-    }
-}
-</style>
-<script>
-import mixin from './mixin';
-export default {
-    mixins: [mixin],
-    props: {
-        color: {
-            type: String,
-            default: '#000000',
-        },
-        hsv: {
-            type: Object,
-            default: null,
-        },
-        size: {
-            type: Number,
-            default: 150,
-        },
-    },
-    data() {
-        return {
-            slideSaturationStyle: {},
-        };
-    },
-    created() {
-        this._color = { r: 0, g: 0, b: 0 };
-    },
-    mounted() {
-        this.renderColor();
-        this.renderSlide();
-    },
-    methods: {
-        renderColor() {
-            const canvas = this.$refs.canvasSaturation;
-            const size = this.size;
-            const ctx = canvas.getContext('2d');
-            canvas.width = size;
-            canvas.height = size;
-
-            ctx.fillStyle = this.color;
-            ctx.fillRect(0, 0, size, size);
-
-            this.createLinearGradient('l', ctx, size, size, '#FFFFFF', 'rgba(255,255,255,0)');
-            this.createLinearGradient('p', ctx, size, size, 'rgba(0,0,0,0)', '#000000');
-        },
-        renderSlide() {
-            this.slideSaturationStyle = {
-                left: this.hsv.s * this.size - 5 + 'px',
-                top: (1 - this.hsv.v) * this.size - 5 + 'px',
-            };
-        },
-        selectSaturation(e) {
-            const { top: saturationTop, left: saturationLeft } = this.$el.getBoundingClientRect();
-            const ctx = e.target.getContext('2d');
-
-            const mousemove = e => {
-                let x = e.clientX - saturationLeft;
-                let y = e.clientY - saturationTop;
-
-                if (x < 0) {
-                    x = 0;
-                }
-                if (y < 0) {
-                    y = 0;
-                }
-                if (x > this.size) {
-                    x = this.size;
-                }
-                if (y > this.size) {
-                    y = this.size;
-                }
-
-                this.slideSaturationStyle = {
-                    left: x - 5 + 'px',
-                    top: y - 5 + 'px',
-                };
-                const imgData = ctx.getImageData(
-                    Math.min(x, this.size - 1),
-                    Math.min(y, this.size - 1),
-                    1,
-                    1
-                );
-                const [r, g, b] = imgData.data;
-                this._color = { r, g, b };
-                this.$emit('changeSaturation', this._color);
-            };
-
-            mousemove(e);
-
-            const mouseup = () => {
-                document.removeEventListener('mousemove', mousemove);
-                document.removeEventListener('mouseup', mouseup);
-                this.$emit('selectSaturation', this._color);
-            };
-
-            document.addEventListener('mousemove', mousemove);
-            document.addEventListener('mouseup', mouseup);
-        },
-    },
-};
-</script>
+<template>
+    <div class="ui-color-picker-saturation" @mousedown.prevent.stop="selectSaturation">
+        <canvas ref="canvasSaturation" />
+        <div class="slide" :style="slideSaturationStyle" />
+    </div>
+</template>
+<style lang="less" scoped>
+.ui-color-picker-saturation {
+    position: relative;
+    cursor: pointer;
+    .slide {
+        position: absolute;
+        left: 100px;
+        top: 0;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        border: 1px solid #fff;
+        box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3);
+        pointer-events: none;
+    }
+}
+</style>
+<script>
+import mixin from './mixin';
+export default {
+    mixins: [mixin],
+    props: {
+        color: {
+            type: String,
+            default: '#000000',
+        },
+        hsv: {
+            type: Object,
+            default: null,
+        },
+        size: {
+            type: Number,
+            default: 150,
+        },
+    },
+    data() {
+        return {
+            slideSaturationStyle: {},
+        };
+    },
+    created() {
+        this._color = { r: 0, g: 0, b: 0 };
+    },
+    mounted() {
+        this.renderColor();
+        this.renderSlide();
+    },
+    methods: {
+        renderColor() {
+            const canvas = this.$refs.canvasSaturation;
+            const size = this.size;
+            const ctx = canvas.getContext('2d');
+            canvas.width = size;
+            canvas.height = size;
+
+            ctx.fillStyle = this.color;
+            ctx.fillRect(0, 0, size, size);
+
+            this.createLinearGradient('l', ctx, size, size, '#FFFFFF', 'rgba(255,255,255,0)');
+            this.createLinearGradient('p', ctx, size, size, 'rgba(0,0,0,0)', '#000000');
+        },
+        renderSlide() {
+            this.slideSaturationStyle = {
+                left: this.hsv.s * this.size - 5 + 'px',
+                top: (1 - this.hsv.v) * this.size - 5 + 'px',
+            };
+        },
+        selectSaturation(e) {
+            const { top: saturationTop, left: saturationLeft } = this.$el.getBoundingClientRect();
+            const ctx = e.target.getContext('2d');
+
+            const mousemove = e => {
+                let x = e.clientX - saturationLeft;
+                let y = e.clientY - saturationTop;
+
+                if (x < 0) {
+                    x = 0;
+                }
+                if (y < 0) {
+                    y = 0;
+                }
+                if (x > this.size) {
+                    x = this.size;
+                }
+                if (y > this.size) {
+                    y = this.size;
+                }
+
+                this.slideSaturationStyle = {
+                    left: x - 5 + 'px',
+                    top: y - 5 + 'px',
+                };
+                const imgData = ctx.getImageData(
+                    Math.min(x, this.size - 1),
+                    Math.min(y, this.size - 1),
+                    1,
+                    1
+                );
+                const [r, g, b] = imgData.data;
+                this._color = { r, g, b };
+                this.$emit('changeSaturation', this._color);
+            };
+
+            mousemove(e);
+
+            const mouseup = () => {
+                document.removeEventListener('mousemove', mousemove);
+                document.removeEventListener('mouseup', mouseup);
+                this.$emit('selectSaturation', this._color);
+            };
+
+            document.addEventListener('mousemove', mousemove);
+            document.addEventListener('mouseup', mouseup);
+        },
+    },
+};
+</script>