Fix BccKnob value change

bcc-code · Feb 18, 2025 · 7c2b8ba · 7c2b8ba
1 parent af392b7
commit 7c2b8ba
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 31 deletions.
diff --git a/design-library/src/components/BccKnob/BccKnob.stories.ts b/design-library/src/components/BccKnob/BccKnob.stories.ts
@@ -17,11 +17,6 @@ export default {
       description: "Maximum value of the slider",
       defaultValue: 120,
     },
-    modelValue: {
-      control: { type: "number" },
-      description: "Current value of the slider",
-      defaultValue: 50,
-    },
   },
 } as Meta<typeof BccKnob>;
 
@@ -44,6 +39,8 @@ const Template: StoryFn<typeof BccKnob> = (args) => ({
       </BccKnob>
     </div>
 
+    <label for="value">Value</label>
+    <input type="number" id="value" v-model="value" />
 
     <pre>
     Available css variables:

diff --git a/design-library/src/components/BccKnob/BccKnob.vue b/design-library/src/components/BccKnob/BccKnob.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 
 const props = defineProps({
   size: { type: Number, default: 400 },
@@ -53,12 +53,13 @@ const colors = {
 };
 
 // Our model value (in minutes)
-const value = defineModel<number>({ required: true });
+const minutes = defineModel<number>({ required: true });
 
 // Refs for container and canvas; we'll get the 2D context on mount.
-const knobContainer = ref<Element | null>(null);
-const canvasEl = ref<HTMLCanvasElement | null>(null);
+const knobContainer = ref<Pick<Element, "getBoundingClientRect"> | null>(null);
+const canvasEl = ref<Pick<HTMLCanvasElement, "height" | "width" | "getContext"> | null>(null);
 let ctx: CanvasRenderingContext2D | null = null;
+let animationFrame = 0;
 
 // Drag state and angles (all in degrees)
 const isDragging = ref(false);
@@ -82,6 +83,28 @@ const backgroundArcAngle = computed(() =>
   )
 );
 
+watch(minutes, (mins) => {
+  if (isDragging.value) return;
+  console.log("minutes", mins);
+  const newAngle = (mins / props.steps / 60) * 360;
+  totalAngle.value = newAngle;
+  drawCanvas();
+});
+
+// Initialize the canvas context on mount.
+onMounted(() => {
+  loadCssColors();
+  const canvas = canvasEl.value;
+  if (canvas) {
+    const ratio = Math.ceil(window.devicePixelRatio);
+    canvas.width = props.size * ratio;
+    canvas.height = props.size * ratio;
+    ctx = canvas.getContext("2d");
+    ctx?.setTransform(ratio, 0, 0, ratio, 0, 0);
+    drawCanvas();
+  }
+});
+
 /**
  * For canvas.arc we need radians with 0 at the top.
  * This helper subtracts 90° so that 0° is at the top.
@@ -264,8 +287,8 @@ function drawCanvas() {
   const handleCircleRadius = props.arcWidth * (props.showHandle ? 0.8 : 0.5);
   ctx.beginPath();
   ctx.arc(handlePos.x, handlePos.y, handleCircleRadius, 0, 2 * Math.PI);
-  if (props.showHandle || !!value.value) {
-    ctx.fillStyle = !value.value
+  if (props.showHandle || !!minutes.value) {
+    ctx.fillStyle = !minutes.value
       ? "#000"
       : props.colored
       ? anticlockwise
@@ -317,7 +340,6 @@ function startDrag(e: MouseEvent | TouchEvent) {
   lastAngle.value = getMouseAngle(e);
 }
 
-let animationFrame = 0;
 function onDrag(e: MouseEvent | TouchEvent) {
   if (!isDragging.value) return;
   if (animationFrame) cancelAnimationFrame(animationFrame);
@@ -337,8 +359,8 @@ function onDrag(e: MouseEvent | TouchEvent) {
       }
       lastAngle.value = angle;
       const inMinutes = Math.round((totalAngle.value / 360) * (60 / props.steps));
-      if (inMinutes !== value.value) {
-        value.value = inMinutes * props.steps;
+      if (inMinutes !== minutes.value) {
+        minutes.value = inMinutes * props.steps;
         emit("drag:update");
       }
       drawCanvas();
@@ -351,24 +373,9 @@ function endDrag() {
   emit("drag:end");
 }
 
-// Initialize the canvas context on mount.
-onMounted(() => {
-  loadCssColors();
-  const canvas = canvasEl.value;
-  if (canvas) {
-    const ratio = Math.ceil(window.devicePixelRatio);
-    canvas.width = props.size * ratio;
-    canvas.height = props.size * ratio;
-    ctx = canvas.getContext("2d");
-    ctx?.setTransform(ratio, 0, 0, ratio, 0, 0);
-    drawCanvas();
-  }
-});
-
 function loadCssColors() {
-  const el = knobContainer.value as Element;
-  if (el) {
-    const computedColors = getComputedStyle(el);
+  if (knobContainer.value) {
+    const computedColors = getComputedStyle(knobContainer.value as Element);
     colors.arc = computedColors.getPropertyValue("--bcc-knob-arc-bg") || colors.arc;
     colors.head = computedColors.getPropertyValue("--bcc-knob-head") || colors.head;
     colors.tail = computedColors.getPropertyValue("--bcc-knob-tail") || colors.tail;