feat: nesting graphics config

CyanSalt · Jul 10, 2023 · a7fc419 · a7fc419
1 parent d752276
commit a7fc419
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 10 deletions.
diff --git a/docs/components/graphics.md b/docs/components/graphics.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { RAlert, RButton, RDetails, RGraphics, RGraphicsConfig, RSpace, RTable, RText } from 'roughness'
+import { RAlert, RButton, RDetails, RGraphics, RGraphicsConfig, RRate, RSpace, RTable, RText } from 'roughness'
 import type { RoughSVG } from 'roughjs/bin/svg'
 
 function drawHeart(rc: RoughSVG, svg: SVGSVGElement) {
@@ -114,15 +114,21 @@ import { RButton, RGraphicsConfig } from 'roughness'
 
 <template>
   <RGraphicsConfig :options="{ fillStyle: 'cross-hatch' }">
-    <RButton filled>Psychological Shadow</RButton>
+    <RSpace vertical align="start">
+      <RButton filled>Psychological Shadow</RButton>
+      <RRate :model-value="3" />
+    </RSpace>
   </RGraphicsConfig>
 </template>
 ```
 
 </RDetails>
 
-<RGraphicsConfig :options="{ fillStyle: 'cross-hatch' }">
-  <RButton filled>Psychological Shadow</RButton>
+<RGraphicsConfig :options="{ fillStyle: 'solid' }">
+  <RSpace vertical align="start">
+    <RButton filled>Medieval Sky</RButton>
+    <RRate :model-value="1" />
+  </RSpace>
 </RGraphicsConfig>
 
 ## Usage
@@ -154,10 +160,21 @@ import { RButton, RGraphicsConfig } from 'roughness'
 <RSpace overflow>
 <RTable
   :columns="['name', 'type', 'default', 'description']"
-  :rows="['responsive', 'tag']"
+  :rows="['options', 'responsive', 'tag']"
 >
   <template #body:*.name="{ row }">{{ row }}</template>
 
+  <template #body:options.type>
+
+  `import('roughjs/bin/core').Options`
+
+  </template>
+  <template #body:options.description>
+
+  [Options for Rough.js](https://github.com/rough-stuff/rough/wiki#options).
+
+  </template>
+
   <template #body:responsive.type>
 
   `boolean`

diff --git a/src/graphics/graphics-config.vue b/src/graphics/graphics-config.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import '../common/style.scss'
 import type { Options } from 'roughjs/bin/core'
-import { provide, toRef } from 'vue'
+import { inject, provide, ref } from 'vue'
 import { optionsInjection } from './utils'
 
 defineOptions({
@@ -18,7 +18,16 @@ const {
   options?: Options,
 }>()
 
-provide(optionsInjection, toRef(() => options))
+const configOptions = $(inject(optionsInjection, ref()))
+
+const nestingOptions = $computed<Options>(() => {
+  return {
+    ...configOptions,
+    ...options,
+  }
+})
+
+provide(optionsInjection, $$(nestingOptions))
 </script>
 
 <template>

diff --git a/src/graphics/index.vue b/src/graphics/index.vue
@@ -3,6 +3,7 @@ import '../common/style.scss'
 import { useElementSize, useParentElement } from '@vueuse/core'
 import rough from 'roughjs'
 import type { RoughCanvas } from 'roughjs/bin/canvas'
+import type { Options } from 'roughjs/bin/core'
 import type { RoughSVG } from 'roughjs/bin/svg'
 import { inject, ref, watchEffect } from 'vue'
 import { optionsInjection } from './utils'
@@ -12,9 +13,11 @@ defineOptions({
 })
 
 const {
+  options,
   responsive = true,
   tag = 'svg',
 } = defineProps<{
+  options: Options,
   responsive?: boolean,
   tag?: T,
 }>()
@@ -31,14 +34,21 @@ const { width, height } = $(useElementSize($$(container), undefined, {
   box: 'border-box',
 }))
 
-const options = $(inject(optionsInjection, ref()))
+const configOptions = $(inject(optionsInjection, ref()))
+
+const nestingOptions = $computed<Options>(() => {
+  return {
+    ...configOptions,
+    ...options,
+  }
+})
 
 const rc = $computed(() => {
   if (!root) return null
   return (
     root instanceof HTMLCanvasElement
-      ? rough.canvas(root, { options })
-      : rough.svg(root, { options })
+      ? rough.canvas(root, { options: nestingOptions })
+      : rough.svg(root, { options: nestingOptions })
   ) as T extends 'canvas' ? RoughCanvas : RoughSVG
 })