fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-16 23:08:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

Implement color picker for primary/secondary working colors (#70)

Browse Source 
* feat/color-picker: rework

* feat(161) lint

* feat(161) Remove response handlers

* feat(161) fix rgb <-> hsv conversion

* feat(161) inverse swatchs and add checkered bg

* feat(161) remove temporary color assignment

* feat(161) move cursor outside of the box

* feat(161) @Keavon feedbacks

* feat(161) lint

* feat(161) fix opacity-picker color

* feat(161) --saturation-picker-color
This commit is contained in:
Chrs Msln
2021-05-27 23:59:52 +02:00
committed by Keavon Chambers
parent a70605b514
commit b56dfd746f
4 changed files with 329 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
client/web/src/components/widgets/inputs/SwatchPairInput.vue
View File

@@ -1,15 +1,15 @@
<template>
<div class="swatch-pair">
<div class="secondary swatch">
<button @click="clickSecondarySwatch" style="background: #ffffff"></button>
<button @click="clickSecondarySwatch" ref="secondaryButton"></button>
<Popover :direction="PopoverDirection.Right" horizontal ref="secondarySwatchPopover">
<ColorPicker />
<ColorPicker v-model:color="secondaryColor" />
</Popover>
</div>
<div class="primary swatch">
<button @click="clickPrimarySwatch" style="background: #000000"></button>
<button @click="clickPrimarySwatch" ref="primaryButton"></button>
<Popover :direction="PopoverDirection.Right" horizontal ref="primarySwatchPopover">
<ColorPicker />
<ColorPicker v-model:color="primaryColor" />
</Popover>
</div>
</div>
@@ -28,6 +28,7 @@
position: relative;
button {
--swatch-color: #ffffff;
width: 100%;
height: 100%;
border-radius: 50%;
@@ -37,6 +38,19 @@
padding: 0;
box-sizing: border-box;
outline: none;
background: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%),
linear-gradient(#ffffff, #ffffff);
background-size: 16px 16px;
background-position: 0 0, 8px 8px;
overflow: hidden;
&::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: var(--swatch-color);
}
}
.popover {
@@ -52,10 +66,13 @@
</style>
<script lang="ts">
import { rgbToDecimalRgb } from "@/lib/utils";
import { defineComponent } from "vue";
import ColorPicker from "../../popovers/ColorPicker.vue";
import Popover, { PopoverDirection } from "../overlays/Popover.vue";
const wasm = import("../../../../wasm/pkg");
export default defineComponent({
components: {
Popover,
@@ -64,18 +81,51 @@ export default defineComponent({
props: {},
methods: {
clickPrimarySwatch() {
(this.$refs.primarySwatchPopover as typeof Popover).setOpen();
(this.$refs.secondarySwatchPopover as typeof Popover).setClosed();
this.getRef<typeof Popover>("primarySwatchPopover").setOpen();
this.getRef<typeof Popover>("secondarySwatchPopover").setClosed();
},
clickSecondarySwatch() {
(this.$refs.secondarySwatchPopover as typeof Popover).setOpen();
(this.$refs.primarySwatchPopover as typeof Popover).setClosed();
this.getRef<typeof Popover>("secondarySwatchPopover").setOpen();
this.getRef<typeof Popover>("primarySwatchPopover").setClosed();
},
getRef<T>(name: string) {
return this.$refs[name] as T;
},
async updatePrimaryColor() {
const { update_primary_color, Color } = await wasm;
let color = this.primaryColor;
const button = this.getRef<HTMLButtonElement>("primaryButton");
button.style.setProperty("--swatch-color", `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`);
color = rgbToDecimalRgb(this.primaryColor);
update_primary_color(new Color(color.r, color.g, color.b, color.a));
},
async updateSecondaryColor() {
const { update_secondary_color, Color } = await wasm;
let color = this.secondaryColor;
const button = this.getRef<HTMLButtonElement>("secondaryButton");
button.style.setProperty("--swatch-color", `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`);
color = rgbToDecimalRgb(this.secondaryColor);
update_secondary_color(new Color(color.r, color.g, color.b, color.a));
},
},
data() {
return {
PopoverDirection,
primaryColor: { r: 0, g: 0, b: 0, a: 1 },
secondaryColor: { r: 255, g: 255, b: 255, a: 1 },
};
},
mounted() {
this.$watch("primaryColor", this.updatePrimaryColor, { immediate: true });
this.$watch("secondaryColor", this.updateSecondaryColor, { immediate: true });
},
});
</script>