vue-wafer-painter

◦ Paint your wafer to stunning Vue apps!

---

📍 Overview

The wafer component library based on Vue 3 provides a versatile and customizable solution for visualizing wafermaps, commonly used in semiconductor manufacturing.

🎬 Demo

1. Online Storybook

2. Try example in repo

3. Local Storybook

    # Clone the repo
    git clone https://github.com/ttpss930141011/vue-wafer-painter.git
   
    # Install dependencies
   
    pnpm install
   
    # Run Storybook
   
    npm run storybook

🚀 Getting Started

Installation

To use this wafermap component, follow these steps:

1. Install the package using your preferred package manager:

   npm install vue-wafer-painter

2. Import CSS in main.js / main.ts:

   import { createApp } from 'vue'
   import './style.css'
   
   import 'vue-wafer-painter/dist/style.css' // add this row
   
   import App from './App.vue'
   
   createApp(App).mount('#app')

3. Import and add the component to your template:

   <template>
     <v-wafermap :width="800" :height="800" :coords="[{...your coords}]" />
   </template>
   <script setup lang="ts">
     import { ref } from "vue";
     import { VWafermap } from "vue-wafer-painter";
     ...
   </script>

Usage

VWafermap

Here's the simplest example of using the VWafermap component:

<template>
  <v-wafermap :coords="coords" @onDie="handleDieHover" />
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import { VWafermap } from 'vue-wafer-painter'

  const coords = ref([
    { x: -2, y: -2, info: ['1'], dut: 1, color: '#ff8080' },
    { x: 0, y: 1, info: ['2'], dut: 2, color: 'green' },
    { x: 1, y: 0, info: ['4'], dut: 1, color: 'rgb(0, 102, 204)' },
    { x: 2, y: 0, info: ['7', '789'], dut: 1, color: 'red' },
    { x: 2, y: 2, info: ['9'], dut: 3, color: '#b800e6' }
  ])

  const handleDieHover = (event: MouseEvent, dieInfo: any) => {
    console.log('Hovered on die:', event, dieInfo)
  }
</script>

Props

VWafermap

Name	Type	Default	Required	Description
coords	Array<Coords>	[]	true	The coordinates of the dies on the wafer map.
width	Number	500	false	The width of the wafer map.
height	Number	500	false	The height of the wafer map.
fontFamily	String	'Arial, Helvetica, sans-serif'	false	The font family of axis values and die info on the wafer map.
notch	'top' | 'bottom' | 'left' | 'right' | 'none'	'top'	false	The notch position of the wafer map.
showGrid	Boolean	true	false	Whether to display grid lines on the wafer map.
gridColor	String	'#f2f2f2'	false	The grid color of the wafer map.
showBackground	Boolean	true	false	Whether to display the background on the wafer map.
backgroundColor	String	'#C0C0C0'	false	The background color of the wafer map.
showFocus	Boolean	true	false	Whether to show the focus border on hover.
showTooltip	Boolean	true	false	Whether to show tooltips on hover.
showAxisValues	Boolean	true	false	Whether to display axis values.
showDieInfo	Boolean	true	false	Whether to display die information in the tooltip.
dieinfoColor	String	'#000000'	false	The color of the die information text.
scaleSize	Number	0.7	false	The scale factor for the wafer map.
focusBorderColor	String	'#0000ff'	false	The color of the focus border.
focusBorderWidth	Number	1	false	The width of the focus border.

Events

VWafermap

Name	Type	Description
onDie	Function	Event emitted when a die is hovered. Provides information about the hovered die.

---

🧩 Modules

VWafermap

File	Summary
index.ts	This code exports a component called VWafermap, which represents a wafermap visualization.
use-mapinfo.ts	This code defines a custom hook "useMapinfo" that calculates various map calculations for a wafermap component based on its props. It calculates the minimum and maximum coordinates, and the corresponding width and height of each die on the map. It also calculates padding and grid font size for the map.
wafermap-style.ts	The code defines a function that calculates and returns different styles for a wafermap UI component based on the provided props. These styles include container, background, map, info, grid, axis value, and focus styles.
use-wafermap.ts	This code defines the most siginicant logic for a wafermap component. It includes functions for drawing the background, wafermap, die information, wafer grid, and axis values based on the data from useMapinfo, and add further handling from the style from useWafermapStyle It also includes functions for handling mouse events such as mouse move, mouse leave, and mouse click. Finally, it will redraw the wafermap when the props change.
wafermap.ts	This code defines the props and emits for a wafermap component. It allows customization of various visual elements such as size, grid, focus, tooltip, axis values, and die info. Users can also specify the notch position, scale size, focus border color, and width.
wafermap.vue	This code defines a Vue component for displaying a wafer map. It includes multiple canvas elements for drawing the background, wafer map, information, grid, and axis values. It also includes elements for focus and tooltip functionality. The code handles props, emits, and exposes the current wafer map props and die information. The component's styles are scoped to the component's container.

---

📝 Todo

• [x] Better TypeScript support

📄 License

This project is licensed under the MIT License. See the LICENSE file for additional info.