專案簡介

此專案業主為一個專門做醫療軟體的公司

目前他們開發的某個診所系統希望加入一個牙醫標示系統dental-chart

由於業主希望能將dental-chart這個功能完全的分離成獨立元件

因此這個專案需要用Web Component建立dental-chart

透過JS的原生event與外部溝通

Web component可依照指定的資料格式render出dental-chart

並且可以提供篩選乳齒恆齒、自動調整大小、標示牙齒治療情況等功能

主要使用技術

Vue.js

主要採用Vue建立Web Component

Vue CLI已經將Web Component打包機制做的很方便

用Vue也可以讓架構比較好維護

HTML SVG

透過HTML原生的SVG Path元件

可以很容易畫出牙齒這種不規則的圖案

牙齒座標規劃

牙齒一共分為三種形狀：上排恆齒(有牙根)、下排恆齒(有牙根)、乳牙(無牙根)

在開始用Web畫牙齒之前

我們先用手繪的方式規劃好各種牙齒類型的座標

基本上只要規劃好每顆牙齒圖的轉彎位置與原點(左上)的相對格數座標即可

座標規劃好之後

用Web很快就能畫出來

牙齒標記(treatment)

這個是最主要的功能

牙醫需要在診療的時候

快速的標示牙齒的健康情況或是治療情況

這個標記稱為treatment

treatment有兩種樣式：背景色(如牙齒18、17)、符號(如牙齒16、15)

而正方形的區塊內的每個符號都相同的時候

則合併為一個大符號

以下方這個GIF來說

牙齒22因為中間的五個牙面符號不完全相同

因此都是各自獨立顯示treatment符號

而牙齒25因為中間的五個牙面符號都相同

最後就會合併成一個大符號

自動調整大小功能

為了因應各種裝置

而且業主使用這個dental-chart也需要能從外部控制大小

因此需要一個自動調整大小的功能

作法其實很簡單

因為牙齒都是固定數量

所以Web Component提供一個EventListener監聽外部希望呈現的寬度大小

dental-chart收到寬度異動之後

用這個寬度就可以反推每顆牙齒的大小

另外為了美觀dental-chart有限制每顆牙齒最大、最小的尺寸

如果因為最小尺寸的限制造成寬度不夠所以有加上css的overflow: auto設定

完整Demo

完工感想

整個專案做下來的感想

Web Component讓專案可以很容易把獨立的功能切乾淨

可以避免發包、承包雙方需要互相遷就對方的架構

透過JS原生Event即可互相傳遞資料

Web Component算是一個很不錯的solution

Dental Chart Web Component 2021