-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
0a3c0d6
commit 7454776
Showing
30 changed files
with
36,801 additions
and
230 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
# Nuxt dev/build outputs | ||
.output | ||
.data | ||
.nuxt | ||
.nitro | ||
.cache | ||
dist | ||
|
||
# Node dependencies | ||
node_modules | ||
|
||
# Logs | ||
logs | ||
*.log | ||
|
||
# Misc | ||
.DS_Store | ||
.fleet | ||
.idea | ||
|
||
# Local env files | ||
.env | ||
.env.* | ||
!.env.example |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
# Nuxt 3 Minimal Starter | ||
|
||
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. | ||
|
||
## Setup | ||
|
||
Make sure to install the dependencies: | ||
|
||
```bash | ||
# npm | ||
npm install | ||
|
||
# pnpm | ||
pnpm install | ||
|
||
# yarn | ||
yarn install | ||
|
||
# bun | ||
bun install | ||
``` | ||
|
||
## Development Server | ||
|
||
Start the development server on `http://localhost:3000`: | ||
|
||
```bash | ||
# npm | ||
npm run dev | ||
|
||
# pnpm | ||
pnpm run dev | ||
|
||
# yarn | ||
yarn dev | ||
|
||
# bun | ||
bun run dev | ||
``` | ||
|
||
## Production | ||
|
||
Build the application for production: | ||
|
||
```bash | ||
# npm | ||
npm run build | ||
|
||
# pnpm | ||
pnpm run build | ||
|
||
# yarn | ||
yarn build | ||
|
||
# bun | ||
bun run build | ||
``` | ||
|
||
Locally preview production build: | ||
|
||
```bash | ||
# npm | ||
npm run preview | ||
|
||
# pnpm | ||
pnpm run preview | ||
|
||
# yarn | ||
yarn preview | ||
|
||
# bun | ||
bun run preview | ||
``` | ||
|
||
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
<script setup> | ||
import DyePicker from './components/DyePicker.vue' | ||
</script> | ||
|
||
<template> | ||
<DyePicker color="#ff0000" /> | ||
</template> | ||
|
||
<style lang="scss"> | ||
@import './css'; | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,137 @@ | ||
<script setup lang="ts"> | ||
import { ref, watch } from 'vue' | ||
import { colord } from 'colord' | ||
import { canvasPixelColor, outsideCanvas, responsiveCanvas } from '../../composables/canvas' | ||
import type { HexType, OutputColor } from '../../composables/canvas' | ||
import { useDye, useDyeStore, useColorCanvas } from '../../composables/useDye' | ||
import { colorName } from '../../composables/colorName' | ||
import { fillColorCanvas } from '../../composables/gradient' | ||
import { useDebounce } from '../../composables/utils' | ||
import Handle from '../Handle.vue' | ||
const emit = defineEmits<{ | ||
(e: 'change', props: OutputColor): void | ||
}>() | ||
interface Props { | ||
min: number | ||
max: number | ||
} | ||
const props = withDefaults(defineProps<Props>(), { | ||
min: 0, | ||
max: 100 | ||
}) | ||
const canvas = useColorCanvas() | ||
const store = useDyeStore() | ||
const dye = useDye() | ||
let position = ref({ x: 0, y: 0 }) | ||
const change = useDebounce((dye) => emit('change', dye), 0) | ||
function updateCanvas(color?: HexType) { | ||
if (!color) return | ||
const { name } = colorName(color.hex) | ||
change({ ...color, name }) | ||
position.value = color.position | ||
} | ||
//Update color while dragging inside canvas | ||
function colorChange(e: MouseEvent, click = false) { | ||
if (click) store.setHolding(true) | ||
if (store.offCanvas(e, click)) return | ||
if (store.isActiveCanvas(e.target)) return | ||
const hex = canvasPixelColor(e, canvas.colorCanvas().value) | ||
updateCanvas(hex) | ||
inside.value = true | ||
} | ||
//when outside canvas | ||
const { inside } = outsideCanvas({ | ||
canvas: canvas.colorCanvas(), | ||
updateCanvas | ||
}) | ||
function getHue(color: string = dye.color.hex) { | ||
const hsv = colord(color).toHsv() | ||
return colord({ h: hsv.h, s: 100, v: 100 }).toHex() | ||
} | ||
interface ChangeHue { | ||
min: number | ||
max: number | ||
} | ||
function changeHue(options: ChangeHue = props) { | ||
const hue = getHue() | ||
const color = { hue, saturation: 100, lightness: 100 } | ||
fillColorCanvas({ color, options }, canvas.colorCanvas().value) | ||
} | ||
watch([() => props.max, () => props.min], () => { | ||
changeHue() | ||
}) | ||
const { width, height } = responsiveCanvas({ | ||
canvas: canvas.colorCanvas(), | ||
updateCanvas: () => changeHue() | ||
}) | ||
function getPercent(percent: number, height?: number) { | ||
if (!height) return 0 | ||
return (height / 100) * percent | ||
} | ||
function updateHandle() { | ||
var color = colord(dye.color.hex) | ||
const hsl = color.toHsl() | ||
position.value = { | ||
x: getPercent(hsl.s, width.value), | ||
y: height.value - getPercent(hsl.l, height.value) | ||
} | ||
} | ||
watch(width, () => updateHandle()) | ||
watch( | ||
() => dye.handleUpdates, | ||
() => { | ||
changeHue() | ||
updateHandle() | ||
} | ||
) | ||
</script> | ||
|
||
<template> | ||
<div class="color-canvas-wrapper"> | ||
<Handle :position="position" :color="dye.color" /> | ||
<canvas | ||
:ref="(el) => canvas.setColorCanvas(el as HTMLCanvasElement)" | ||
class="color-canvas" | ||
:width="width" | ||
:height="height" | ||
@mousedown="(e) => colorChange(e, true)" | ||
@mousemove="(e) => colorChange(e)" | ||
@mouseleave="() => (inside = false)" | ||
> | ||
</canvas> | ||
</div> | ||
</template> | ||
|
||
<style lang="scss" scoped> | ||
.color-canvas-wrapper { | ||
position: relative; | ||
user-select: none; | ||
overflow: hidden; | ||
width: 100%; | ||
height: 100%; | ||
} | ||
canvas.color-canvas { | ||
aspect-ratio: 1/1; | ||
width: 100%; | ||
height: 100%; | ||
background-color: var(--base-20, rgb(64, 0, 0)); | ||
} | ||
</style> |
Oops, something went wrong.