-
Notifications
You must be signed in to change notification settings - Fork 26
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
Showing
51 changed files
with
1,508 additions
and
1,469 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
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
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 |
|---|---|---|
| @@ -1,87 +1,99 @@ | ||
| <script lang="ts"> | ||
| import _ from 'lodash' | ||
| import Regl from 'regl' | ||
| <script lang="ts" setup> | ||
| import {isEqual, mapValues} from 'lodash' | ||
| import Regl, {DrawConfig} from 'regl' | ||
| import REGL from 'regl' | ||
| import { | ||
| computed, | ||
| defineComponent, | ||
| onMounted, | ||
| onUnmounted, | ||
| PropType, | ||
| ref, | ||
| watch, | ||
| } from 'vue' | ||
| import {REGL_QUAD_DEFAULT} from './util' | ||
| interface UniformsProp { | ||
| [name: string]: number[] | string | ||
| } | ||
| import {computed, onMounted, onUnmounted, ref, watch} from 'vue' | ||
| export default defineComponent({ | ||
| name: 'GlslCnavas', | ||
| props: { | ||
| fragmentString: { | ||
| type: String, | ||
| default: ` | ||
| precision mediump float; | ||
| varying vec2 uv; | ||
| void main() { gl_FragColor = vec4(uv, 0, 1); }`, | ||
| }, | ||
| uniforms: { | ||
| type: Object as PropType<UniformsProp>, | ||
| default: () => ({}), | ||
| }, | ||
| const REGL_QUAD_DEFAULT: DrawConfig = { | ||
| vert: ` | ||
| precision mediump float; | ||
| attribute vec2 position; | ||
| varying vec2 uv; | ||
| void main() { | ||
| uv = position / 2.0 + 0.5; | ||
| gl_Position = vec4(position, 0, 1); | ||
| }`, | ||
| attributes: { | ||
| position: [-1, -1, 1, -1, -1, 1, 1, 1], | ||
| }, | ||
| depth: { | ||
| enable: false, | ||
| }, | ||
| setup(props) { | ||
| const canvas = ref<null | HTMLCanvasElement>(null) | ||
| count: 4, | ||
| primitive: 'triangle strip', | ||
| } | ||
| interface Props { | ||
| fragmentString: string | ||
| uniforms: Record< | ||
| string, | ||
| number | number[] | readonly [number, number, number, number] | ||
| > | ||
| } | ||
| const regl = ref<null | REGL.Regl>(null) | ||
| const props = withDefaults(defineProps<Props>(), { | ||
| fragmentString: ` | ||
| precision mediump float; | ||
| varying vec2 uv; | ||
| void main() { gl_FragColor = vec4(uv, 0, 1); }`, | ||
| uniforms: () => ({}), | ||
| }) | ||
| onMounted(() => { | ||
| if (!canvas.value) { | ||
| return | ||
| } | ||
| const $canvas = ref<null | HTMLCanvasElement>(null) | ||
| regl.value = Regl({ | ||
| attributes: { | ||
| depth: false, | ||
| premultipliedAlpha: false, | ||
| }, | ||
| canvas: canvas.value, | ||
| }) | ||
| }) | ||
| const regl = ref<null | REGL.Regl>(null) | ||
| onUnmounted(() => regl.value?.destroy()) | ||
| onMounted(() => { | ||
| if (!$canvas.value) return | ||
| const uniformKeys = ref(_.keys(props.uniforms)) | ||
| regl.value = Regl({ | ||
| attributes: { | ||
| depth: false, | ||
| premultipliedAlpha: false, | ||
| }, | ||
| canvas: $canvas.value, | ||
| }) | ||
| }) | ||
| const drawCommand = computed(() => { | ||
| if (!regl.value) return null | ||
| onUnmounted(() => regl.value?.destroy()) | ||
| const prop = regl.value.prop as any | ||
| const reglUniforms = ref<Record<string, any>>({}) | ||
| const uniforms = _.fromPairs(uniformKeys.value.map(k => [k, prop(k)])) | ||
| watch( | ||
| () => [props.uniforms, regl.value] as const, | ||
| ([uniforms, regl]) => { | ||
| const keys = Object.keys(uniforms) | ||
| const oldKeys = Object.keys(reglUniforms.value) | ||
| return regl.value({ | ||
| ...REGL_QUAD_DEFAULT, | ||
| frag: props.fragmentString, | ||
| uniforms, | ||
| }) | ||
| }) | ||
| if (isEqual(keys, oldKeys)) return | ||
| if (!regl) return | ||
| watch( | ||
| () => [regl.value, drawCommand.value, props.uniforms], | ||
| () => { | ||
| drawCommand.value && drawCommand.value(props.uniforms) | ||
| } | ||
| ) | ||
| const prop = regl.prop as any | ||
| return {canvas} | ||
| reglUniforms.value = mapValues(props.uniforms, (_, key) => prop(key)) | ||
| }, | ||
| {immediate: true} | ||
| ) | ||
| const drawCommand = computed(() => { | ||
| if (!regl.value) return null | ||
| return regl.value({ | ||
| ...REGL_QUAD_DEFAULT, | ||
| frag: props.fragmentString, | ||
| uniforms: reglUniforms.value, | ||
| }) | ||
| }) | ||
| watch( | ||
| () => [drawCommand.value, props.uniforms] as const, | ||
| ([draw, uniforms]) => { | ||
| draw && draw(uniforms) | ||
| }, | ||
| {immediate: true} | ||
| ) | ||
| </script> | ||
|
|
||
| <template> | ||
| <canvas ref="canvas" /> | ||
| <canvas ref="$canvas" /> | ||
| </template> |
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
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
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,61 @@ | ||
| <script lang="ts" setup> | ||
| import {ref} from 'vue' | ||
| import Popover from '../Popover.vue' | ||
| import InputColorPicker from './InputColorPicker.vue' | ||
| import {InputColorProps} from './types' | ||
| const props = withDefaults(defineProps<InputColorProps>(), {}) | ||
| const emit = defineEmits<{ | ||
| 'update:modelValue': [string] | ||
| }>() | ||
| const $button = ref<HTMLElement | null>(null) | ||
| const open = ref(false) | ||
| </script> | ||
|
|
||
| <template> | ||
| <button | ||
| ref="$button" | ||
| class="InputColor" | ||
| :class="{open}" | ||
| :style="{background: modelValue}" | ||
| v-bind="$attrs" | ||
| @click="open = true" | ||
| ></button> | ||
| <Popover v-model:open="open" :reference="$button" placement="bottom-start"> | ||
| <div class="InputColor__popover-frame"> | ||
| <InputColorPicker | ||
| :modelValue="modelValue" | ||
| :ui="ui" | ||
| :presets="presets" | ||
| @update:modelValue="emit('update:modelValue', $event)" | ||
| /> | ||
| </div> | ||
| </Popover> | ||
| </template> | ||
|
|
||
| <style lang="stylus"> | ||
| .InputColor | ||
| position relative | ||
| width var(--tq-input-height) | ||
| height var(--tq-input-height) | ||
| border-radius var(--tq-input-border-radius) | ||
| hover-transition(background) | ||
| background var(--tq-color-primary-container) | ||
| hover-transition(box-shadow) | ||
| &:hover | ||
| box-shadow 0 0 0 1px var(--tq-color-primary) | ||
| &__popover-frame | ||
| width 300px | ||
| border 1px solid var(--tq-color-pane-border) | ||
| padding 9px | ||
| border-radius 6px | ||
| position relative | ||
| box-shadow 0 0 20px -15px var(--tq-color-shadow) | ||
| </style> |
Oops, something went wrong.