w-flow-vue 1.0.20 → 1.0.21

package/src/components/ui/Controls.vue

@@ -1,119 +1,206 @@
-<template>
-  <!-- 垂直選單: 改用w-threejs-vue同款組件WGroupIconCheck(:dir='vertical'), 最頂為設定鈕, 收合時僅顯示設定鈕, 展開才顯示其餘按鈕 -->
-  <div
-    :class="['vue-flow__panel', `vue-flow__panel--${position}`]"
-    :style="panelStyle"
-  >
-    <!-- 淺色系配色(w-flow-vue圖台為白底, 沿用原Controls之#fefefe白底/深灰icon風格; 不設iconSize故用預設22, 按鈕寬=22+左右padding8=30px與w-threejs-vue選單一致) -->
-    <!-- 全數為一般動作鈕(不用active態): 鎖頭點擊即切換上鎖/解鎖並換icon(比照fitView等), 不留固定灰底; value恆空故無任一鈕呈active -->
-    <WGroupIconCheck
-      :items="useItems"
-      :dir="'vertical'"
-      :iconColor="'#555'"
-      :iconColorHover="'#222'"
-      :iconColorFocus="'#222'"
-      :iconColorActive="'#111'"
-      :backgroundColor="'#fefefe'"
-      :backgroundColorHover="'#f0f0f0'"
-      :backgroundColorFocus="'#f0f0f0'"
-      :backgroundColorActive="'#e4e4e4'"
-      :seplineColor="'#e6e6e6'"
-      :shadow="true"
-      :tooltipTextFontSize="'0.7rem'"
-      :value="[]"
-      @click="onClickItem"
-    ></WGroupIconCheck>
-  </div>
-</template>
-
-<script>
-import WGroupIconCheck from 'w-component-vue/src/components/WGroupIconCheck.vue'
-import { mdiCogOutline, mdiMagnifyPlusOutline, mdiMagnifyMinusOutline, mdiFitToPageOutline, mdiLockOutline, mdiLockOpenVariantOutline } from '@mdi/js/mdi.js'
-
-export default {
-    name: 'FlowControls',
-    components: { WGroupIconCheck },
-    props: {
-        showZoom: { type: Boolean, default: true },
-        showFitView: { type: Boolean, default: true },
-        showInteractive: { type: Boolean, default: true },
-        locked: { type: Boolean, default: false },
-        position: { type: String, default: 'top-left' },
-        //垂直選單向下偏移量(px), 供宿主避開其他左上角覆蓋元素(如變更儲存鈕), 比照w-threejs-vue之menuYShift
-        menuYShift: { type: Number, default: 0 },
-    },
-    data() {
-        return {
-            //設定鈕展開狀態(收合時僅顯示設定鈕, 展開才顯示其餘按鈕), 比照w-threejs-vue
-            useSetting: true,
-        }
-    },
-    computed: {
-        allItems() {
-            let rs = [
-                { id: 'setting', icon: mdiCogOutline, tooltip: 'Settings' },
-            ]
-            if (this.showZoom) {
-                rs.push({ id: 'zoomIn', icon: mdiMagnifyPlusOutline, tooltip: 'Zoom In' })
-                rs.push({ id: 'zoomOut', icon: mdiMagnifyMinusOutline, tooltip: 'Zoom Out' })
-            }
-            if (this.showFitView) {
-                rs.push({ id: 'fitView', icon: mdiFitToPageOutline, tooltip: 'Fit View' })
-            }
-            if (this.showInteractive) {
-                rs.push({ id: 'interactive', icon: this.locked ? mdiLockOutline : mdiLockOpenVariantOutline, tooltip: this.locked ? 'Unlock' : 'Lock' })
-            }
-            return rs
-        },
-        useItems() {
-            //設定鈕恆在最頂; 收合時僅顯示設定鈕
-            if (this.useSetting) {
-                return this.allItems
-            }
-            return [this.allItems[0]]
-        },
-        panelStyle() {
-            //向下偏移: top-*位置加margin-top, bottom-*位置加margin-bottom(margin於絕對定位元素上等同再位移該側)
-            let s = 'z-index:5;'
-            if (this.position.indexOf('bottom') >= 0) {
-                s += `margin-bottom:${this.menuYShift}px;`
-            }
-            else {
-                s += `margin-top:${this.menuYShift}px;`
-            }
-            return s
-        },
-    },
-    methods: {
-        onClickItem(item) {
-            let id = (item && item.id) || ''
-            if (id === 'setting') {
-                this.useSetting = !this.useSetting
-            }
-            else if (id === 'zoomIn') {
-                this.$emit('zoom-in')
-            }
-            else if (id === 'zoomOut') {
-                this.$emit('zoom-out')
-            }
-            else if (id === 'fitView') {
-                this.$emit('fit-view')
-            }
-            else if (id === 'interactive') {
-                this.$emit('toggle-interactive')
-            }
-        },
-    },
-}
-</script>
-
-<style scoped>
-.vue-flow__panel {
-  position: absolute;
-  z-index: 5;
-}
-.vue-flow__panel--top-left { top: 10px; left: 10px; }
-.vue-flow__panel--top-right { top: 10px; right: 10px; }
-.vue-flow__panel--bottom-left { bottom: 10px; left: 10px; }
-.vue-flow__panel--bottom-right { bottom: 10px; right: 10px; }
-</style>
+<template>
+  <!-- 垂直選單: 改用w-threejs-vue同款組件WGroupIconCheck(:dir='vertical'), 最頂為設定鈕, 收合時僅顯示設定鈕, 展開才顯示其餘按鈕 -->
+  <div
+    v-if="cfg.useMenu"
+    :class="['vue-flow__panel', `vue-flow__panel--${cfg.menuPosition}`]"
+    :style="panelStyle"
+  >
+    <!-- 淺色系配色(w-flow-vue圖台為白底, 沿用原Controls之#fefefe白底/深灰icon風格; iconSize預設22, 按鈕寬=22+左右padding8=30px與w-threejs-vue選單一致) -->
+    <!-- 全數為一般動作鈕(不用active態): 鎖頭點擊即切換上鎖/解鎖並換icon(比照fitView等), 不留固定灰底; value恆空故無任一鈕呈active, 故不開放*ColorActive類選項 -->
+    <WGroupIconCheck
+      :items="useItems"
+      :dir="'vertical'"
+      :iconColor="cfg.menuIconColor"
+      :iconColorHover="cfg.menuIconColorHover"
+      :iconColorFocus="cfg.menuIconColorFocus"
+      :iconSize="cfg.menuIconSize"
+      :backgroundColor="cfg.menuBackgroundColor"
+      :backgroundColorHover="cfg.menuBackgroundColorHover"
+      :backgroundColorFocus="cfg.menuBackgroundColorFocus"
+      :seplineColor="cfg.menuSeparatorColor"
+      :shadow="cfg.menuShadow"
+      :tooltipTextColor="cfg.menuTooltipTextColor"
+      :tooltipTextFontSize="cfg.menuTooltipTextFontSize"
+      :tooltipBackgroundColor="cfg.menuTooltipBackgroundColor"
+      :value="[]"
+      @click="onClickItem"
+    ></WGroupIconCheck>
+  </div>
+</template>
+
+<script>
+import WGroupIconCheck from 'w-component-vue/src/components/WGroupIconCheck.vue'
+import { mdiCogOutline, mdiMagnifyPlusOutline, mdiMagnifyMinusOutline, mdiFitToPageOutline, mdiLockOutline, mdiLockOpenVariantOutline } from '@mdi/js/mdi.js'
+
+//menuDef, 選單各項之預設值, 未被opt覆寫者沿用之
+//注意: menuIconSize, menuTooltipTextColor, menuTooltipBackgroundColor原為WGroupIconCheck之預設值,
+//因w-component-vue為浮動相依(^2.5.2), 子套件改預設會靜默改變本套件外觀, 故於此明寫鎖住現值
+let menuDef = {
+
+    //整體
+    useMenu: true,
+    menuPosition: 'top-left',
+    menuYShift: 0,
+    useSetting: true,
+
+    //設定鈕(收合/展開)
+    menuSettingIcon: mdiCogOutline,
+    menuSettingTooltip: 'Settings',
+
+    //放大
+    useMenuItemZoomIn: true,
+    menuZoomInIcon: mdiMagnifyPlusOutline,
+    menuZoomInTooltip: 'Zoom In',
+
+    //縮小
+    useMenuItemZoomOut: true,
+    menuZoomOutIcon: mdiMagnifyMinusOutline,
+    menuZoomOutTooltip: 'Zoom Out',
+
+    //全圖
+    useMenuItemFitView: true,
+    menuFitViewIcon: mdiFitToPageOutline,
+    menuFitViewTooltip: 'Fit View',
+
+    //鎖定(雙態: 無後綴為未鎖態, Locked後綴為已鎖態)
+    useMenuItemLock: true,
+    menuLockIcon: mdiLockOpenVariantOutline,
+    menuLockTooltip: 'Lock',
+    menuLockIconLocked: mdiLockOutline,
+    menuLockTooltipLocked: 'Unlock',
+
+    //樣式
+    menuIconColor: '#555',
+    menuIconColorHover: '#222',
+    menuIconColorFocus: '#222',
+    menuIconSize: 22,
+    menuBackgroundColor: '#fefefe',
+    menuBackgroundColorHover: '#f0f0f0',
+    menuBackgroundColorFocus: '#f0f0f0',
+    menuSeparatorColor: '#e6e6e6',
+    menuShadow: true,
+    menuTooltipTextColor: 'white',
+    menuTooltipTextFontSize: '0.7rem',
+    menuTooltipBackgroundColor: 'rgba(60,60,60,0.75)',
+
+}
+
+//menuPositions, menuPosition之允許值, 不在其中者回退預設
+let menuPositions = ['top-left', 'top-right', 'bottom-left', 'bottom-right']
+
+/**
+ * 取單項設定值, 型別與menuDef同型且有效才採用, 否則回退menuDef
+ */
+function pickMenuValue(k, v) {
+    let d = menuDef[k]
+    if (typeof d === 'string') {
+        return (typeof v === 'string' && v !== '') ? v : d
+    }
+    if (typeof d === 'boolean') {
+        return (typeof v === 'boolean') ? v : d
+    }
+    if (typeof d === 'number') {
+        return (typeof v === 'number' && isFinite(v)) ? v : d
+    }
+    return d
+}
+
+export default {
+    name: 'FlowControls',
+    components: { WGroupIconCheck },
+    props: {
+        //選單設定物件, 鍵值同menuDef, 由WFlowVue自opt原樣取出後傳入; 各鍵未給或型別不符即回退menuDef
+        menu: { type: Object, default: () => ({}) },
+        locked: { type: Boolean, default: false },
+    },
+    data() {
+        return {
+            //設定鈕展開狀態(收合時僅顯示設定鈕, 展開才顯示其餘按鈕), 比照w-threejs-vue; 初值取menu.useSetting
+            useSetting: pickMenuValue('useSetting', (this.menu || {}).useSetting),
+        }
+    },
+    computed: {
+        cfg() {
+            let m = this.menu || {}
+            let r = {}
+            for (let k in menuDef) {
+                r[k] = pickMenuValue(k, m[k])
+            }
+            //menuPosition另檢核列舉值
+            if (menuPositions.indexOf(r.menuPosition) < 0) {
+                r.menuPosition = menuDef.menuPosition
+            }
+            return r
+        },
+        allItems() {
+            let c = this.cfg
+            let rs = [
+                { id: 'setting', icon: c.menuSettingIcon, tooltip: c.menuSettingTooltip },
+            ]
+            if (c.useMenuItemZoomIn) {
+                rs.push({ id: 'zoomIn', icon: c.menuZoomInIcon, tooltip: c.menuZoomInTooltip })
+            }
+            if (c.useMenuItemZoomOut) {
+                rs.push({ id: 'zoomOut', icon: c.menuZoomOutIcon, tooltip: c.menuZoomOutTooltip })
+            }
+            if (c.useMenuItemFitView) {
+                rs.push({ id: 'fitView', icon: c.menuFitViewIcon, tooltip: c.menuFitViewTooltip })
+            }
+            if (c.useMenuItemLock) {
+                rs.push({ id: 'interactive', icon: this.locked ? c.menuLockIconLocked : c.menuLockIcon, tooltip: this.locked ? c.menuLockTooltipLocked : c.menuLockTooltip })
+            }
+            return rs
+        },
+        useItems() {
+            //設定鈕恆在最頂; 收合時僅顯示設定鈕
+            if (this.useSetting) {
+                return this.allItems
+            }
+            return [this.allItems[0]]
+        },
+        panelStyle() {
+            //向下偏移: top-*位置加margin-top, bottom-*位置加margin-bottom(margin於絕對定位元素上等同再位移該側)
+            //故menuYShift之語義為[正值使選單遠離其錨定邊]: top-*向下, bottom-*向上
+            let s = 'z-index:5;'
+            if (this.cfg.menuPosition.indexOf('bottom') >= 0) {
+                s += `margin-bottom:${this.cfg.menuYShift}px;`
+            }
+            else {
+                s += `margin-top:${this.cfg.menuYShift}px;`
+            }
+            return s
+        },
+    },
+    methods: {
+        onClickItem(item) {
+            let id = (item && item.id) || ''
+            if (id === 'setting') {
+                this.useSetting = !this.useSetting
+            }
+            else if (id === 'zoomIn') {
+                this.$emit('zoom-in')
+            }
+            else if (id === 'zoomOut') {
+                this.$emit('zoom-out')
+            }
+            else if (id === 'fitView') {
+                this.$emit('fit-view')
+            }
+            else if (id === 'interactive') {
+                this.$emit('toggle-interactive')
+            }
+        },
+    },
+}
+</script>
+
+<style scoped>
+.vue-flow__panel {
+  position: absolute;
+  z-index: 5;
+}
+.vue-flow__panel--top-left { top: 10px; left: 10px; }
+.vue-flow__panel--top-right { top: 10px; right: 10px; }
+.vue-flow__panel--bottom-left { bottom: 10px; left: 10px; }
+.vue-flow__panel--bottom-right { bottom: 10px; right: 10px; }
+</style>

package/test/unit-components-ui.test.mjs

@@ -1,69 +1,248 @@
-import { mount } from '@vue/test-utils'
-import Controls from '../src/components/ui/Controls.vue'
-
-describe('Controls', () => {
-    test('renders all buttons by default', () => {
-        const wrapper = mount(Controls)
-        const buttons = wrapper.findAll('button')
-        expect(buttons).toHaveLength(4) // zoom in, zoom out, fit view, lock
-    })
-
-    test('hides zoom buttons when showZoom=false', () => {
-        const wrapper = mount(Controls, { propsData: { showZoom: false } })
-        const buttons = wrapper.findAll('button')
-        expect(buttons).toHaveLength(2) // fit view, lock
-    })
-
-    test('hides fit view button when showFitView=false', () => {
-        const wrapper = mount(Controls, { propsData: { showFitView: false } })
-        const buttons = wrapper.findAll('button')
-        expect(buttons).toHaveLength(3) // zoom in, zoom out, lock
-    })
-
-    test('hides interactive button when showInteractive=false', () => {
-        const wrapper = mount(Controls, { propsData: { showInteractive: false } })
-        const buttons = wrapper.findAll('button')
-        expect(buttons).toHaveLength(3) // zoom in, zoom out, fit view
-    })
-
-    test('emits zoom-in on click', () => {
-        const wrapper = mount(Controls)
-        const buttons = wrapper.findAll('button')
-        buttons.at(0).trigger('click') // first button is zoom in
-        expect(wrapper.emitted('zoom-in')).toBeTruthy()
-    })
-
-    test('emits zoom-out on click', () => {
-        const wrapper = mount(Controls)
-        const buttons = wrapper.findAll('button')
-        buttons.at(1).trigger('click')
-        expect(wrapper.emitted('zoom-out')).toBeTruthy()
-    })
-
-    test('emits fit-view on click', () => {
-        const wrapper = mount(Controls)
-        const buttons = wrapper.findAll('button')
-        buttons.at(2).trigger('click')
-        expect(wrapper.emitted('fit-view')).toBeTruthy()
-    })
-
-    test('emits toggle-interactive on click', () => {
-        const wrapper = mount(Controls)
-        const buttons = wrapper.findAll('button')
-        buttons.at(3).trigger('click')
-        expect(wrapper.emitted('toggle-interactive')).toBeTruthy()
-    })
-
-    test('applies position class', () => {
-        const wrapper = mount(Controls, { propsData: { position: 'bottom-right' } })
-        expect(wrapper.classes()).toContain('vue-flow__panel--bottom-right')
-    })
-
-    test('renders slot content', () => {
-        const wrapper = mount(Controls, {
-            slots: { default: '<button class="custom-btn">Custom</button>' },
-        })
-        expect(wrapper.find('.custom-btn').exists()).toBe(true)
-    })
-})
-
+import { mount } from '@vue/test-utils'
+import Controls from '../src/components/ui/Controls.vue'
+import WGroupIconCheck from 'w-component-vue/src/components/WGroupIconCheck.vue'
+
+//Controls以WGroupIconCheck渲染, 單顆按鈕為[role="button"]之元素(非原生<button>)
+const btns = (w) => w.findAll('[role="button"]')
+
+//WGroupIconCheck之toggleState於$nextTick內才emit, 故點擊後需多刷幾輪microtask才看得到結果
+const flush = async (w) => {
+    for (let i = 0; i < 3; i++) {
+        await w.vm.$nextTick()
+    }
+}
+//WButtonCircle之role="button"在最外層div, 但@click掛在內層之可點擊面(帶cursor:pointer)上,
+//jsdom之trigger不會往下傳, 故點擊須打在該內層元素
+const clickItem = async (w, i) => {
+    await btns(w).at(i).find('[style*="cursor: pointer"]').trigger('click')
+    await flush(w)
+}
+
+describe('Controls 預設(不給任何menu選項)', () => {
+    test('顯示5顆鈕: setting/zoomIn/zoomOut/fitView/lock', () => {
+        const w = mount(Controls)
+        expect(w.vm.allItems.map((v) => v.id)).toEqual(['setting', 'zoomIn', 'zoomOut', 'fitView', 'interactive'])
+        expect(btns(w)).toHaveLength(5)
+        w.destroy()
+    })
+
+    test('tooltip與icon為現行英文預設', () => {
+        const w = mount(Controls)
+        expect(w.vm.allItems.map((v) => v.tooltip)).toEqual(['Settings', 'Zoom In', 'Zoom Out', 'Fit View', 'Lock'])
+        w.destroy()
+    })
+
+    test('套用top-left位置class', () => {
+        const w = mount(Controls)
+        expect(w.classes()).toContain('vue-flow__panel--top-left')
+        w.destroy()
+    })
+})
+
+describe('Controls 事件', () => {
+    test('各鈕點擊送出對應事件', async () => {
+        const w = mount(Controls)
+        await clickItem(w, 1)
+        expect(w.emitted('zoom-in')).toBeTruthy()
+        await clickItem(w, 2)
+        expect(w.emitted('zoom-out')).toBeTruthy()
+        await clickItem(w, 3)
+        expect(w.emitted('fit-view')).toBeTruthy()
+        await clickItem(w, 4)
+        expect(w.emitted('toggle-interactive')).toBeTruthy()
+        w.destroy()
+    })
+
+    test('設定鈕點擊為收合/展開, 不送出事件', async () => {
+        const w = mount(Controls)
+        expect(w.vm.useItems).toHaveLength(5)
+        await clickItem(w, 0)
+        expect(w.vm.useItems).toHaveLength(1)
+        expect(w.vm.useItems[0].id).toBe('setting')
+        await clickItem(w, 0)
+        expect(w.vm.useItems).toHaveLength(5)
+        expect(w.emitted('zoom-in')).toBeFalsy()
+        expect(w.emitted('toggle-interactive')).toBeFalsy()
+        w.destroy()
+    })
+})
+
+describe('Controls 可見性(useMenu/useMenuItem*)', () => {
+    test('useMenu=false整列不渲染', () => {
+        const w = mount(Controls, { propsData: { menu: { useMenu: false } } })
+        expect(w.find('.vue-flow__panel').exists()).toBe(false)
+        w.destroy()
+    })
+
+    test('useMenuItemZoomIn=false僅隱藏放大鈕, 縮小鈕仍在', () => {
+        const w = mount(Controls, { propsData: { menu: { useMenuItemZoomIn: false } } })
+        expect(w.vm.allItems.map((v) => v.id)).toEqual(['setting', 'zoomOut', 'fitView', 'interactive'])
+        w.destroy()
+    })
+
+    test('useMenuItemZoomOut=false僅隱藏縮小鈕, 放大鈕仍在', () => {
+        const w = mount(Controls, { propsData: { menu: { useMenuItemZoomOut: false } } })
+        expect(w.vm.allItems.map((v) => v.id)).toEqual(['setting', 'zoomIn', 'fitView', 'interactive'])
+        w.destroy()
+    })
+
+    test('useMenuItemFitView=false隱藏全圖鈕', () => {
+        const w = mount(Controls, { propsData: { menu: { useMenuItemFitView: false } } })
+        expect(w.vm.allItems.map((v) => v.id)).toEqual(['setting', 'zoomIn', 'zoomOut', 'interactive'])
+        w.destroy()
+    })
+
+    test('useMenuItemLock=false隱藏鎖頭鈕', () => {
+        const w = mount(Controls, { propsData: { menu: { useMenuItemLock: false } } })
+        expect(w.vm.allItems.map((v) => v.id)).toEqual(['setting', 'zoomIn', 'zoomOut', 'fitView'])
+        w.destroy()
+    })
+
+    test('useSetting=false初始即收合', () => {
+        const w = mount(Controls, { propsData: { menu: { useSetting: false } } })
+        expect(w.vm.useItems).toHaveLength(1)
+        expect(w.vm.useItems[0].id).toBe('setting')
+        w.destroy()
+    })
+})
+
+describe('Controls 文字與icon覆寫', () => {
+    test('逐項覆寫tooltip', () => {
+        const w = mount(Controls, {
+            propsData: {
+                menu: {
+                    menuSettingTooltip: '收合工具列',
+                    menuZoomInTooltip: '放大',
+                    menuZoomOutTooltip: '縮小',
+                    menuFitViewTooltip: '全圖顯示',
+                    menuLockTooltip: '鎖定',
+                },
+            },
+        })
+        expect(w.vm.allItems.map((v) => v.tooltip)).toEqual(['收合工具列', '放大', '縮小', '全圖顯示', '鎖定'])
+        w.destroy()
+    })
+
+    test('部分覆寫時未給者維持英文預設', () => {
+        const w = mount(Controls, { propsData: { menu: { menuZoomInTooltip: '放大' } } })
+        expect(w.vm.allItems.map((v) => v.tooltip)).toEqual(['Settings', '放大', 'Zoom Out', 'Fit View', 'Lock'])
+        w.destroy()
+    })
+
+    test('空字串回退預設, 不出現空白tooltip', () => {
+        const w = mount(Controls, { propsData: { menu: { menuZoomInTooltip: '' } } })
+        expect(w.vm.cfg.menuZoomInTooltip).toBe('Zoom In')
+        w.destroy()
+    })
+
+    test('型別不符回退預設', () => {
+        const w = mount(Controls, {
+            propsData: {
+                menu: {
+                    menuZoomInTooltip: 123,
+                    useMenuItemFitView: 'yes',
+                    menuIconSize: 'big',
+                    menuYShift: NaN,
+                },
+            },
+        })
+        expect(w.vm.cfg.menuZoomInTooltip).toBe('Zoom In')
+        expect(w.vm.cfg.useMenuItemFitView).toBe(true)
+        expect(w.vm.cfg.menuIconSize).toBe(22)
+        expect(w.vm.cfg.menuYShift).toBe(0)
+        w.destroy()
+    })
+
+    test('覆寫icon', () => {
+        const w = mount(Controls, { propsData: { menu: { menuZoomInIcon: 'M0 0 L1 1' } } })
+        expect(w.vm.allItems[1].icon).toBe('M0 0 L1 1')
+        w.destroy()
+    })
+})
+
+describe('Controls 鎖頭雙態', () => {
+    test('未鎖態取無後綴之icon與tooltip', () => {
+        const w = mount(Controls, { propsData: { locked: false, menu: { menuLockTooltip: '鎖定', menuLockTooltipLocked: '解除鎖定' } } })
+        expect(w.vm.allItems[4].tooltip).toBe('鎖定')
+        w.destroy()
+    })
+
+    test('已鎖態取Locked後綴之icon與tooltip', () => {
+        const w = mount(Controls, { propsData: { locked: true, menu: { menuLockTooltip: '鎖定', menuLockTooltipLocked: '解除鎖定' } } })
+        expect(w.vm.allItems[4].tooltip).toBe('解除鎖定')
+        w.destroy()
+    })
+
+    test('未給覆寫時雙態為Lock/Unlock且icon不同', () => {
+        const w0 = mount(Controls, { propsData: { locked: false } })
+        const w1 = mount(Controls, { propsData: { locked: true } })
+        expect(w0.vm.allItems[4].tooltip).toBe('Lock')
+        expect(w1.vm.allItems[4].tooltip).toBe('Unlock')
+        expect(w0.vm.allItems[4].icon).not.toBe(w1.vm.allItems[4].icon)
+        w0.destroy()
+        w1.destroy()
+    })
+})
+
+describe('Controls 位置與位移', () => {
+    test('四個menuPosition各自套用對應class', () => {
+        const poss = ['top-left', 'top-right', 'bottom-left', 'bottom-right']
+        poss.forEach((p) => {
+            const w = mount(Controls, { propsData: { menu: { menuPosition: p } } })
+            expect(w.classes()).toContain(`vue-flow__panel--${p}`)
+            w.destroy()
+        })
+    })
+
+    test('menuPosition非允許值回退top-left', () => {
+        const w = mount(Controls, { propsData: { menu: { menuPosition: 'middle' } } })
+        expect(w.classes()).toContain('vue-flow__panel--top-left')
+        w.destroy()
+    })
+
+    test('menuYShift於top-*加margin-top, 於bottom-*加margin-bottom', () => {
+        const wt = mount(Controls, { propsData: { menu: { menuPosition: 'top-left', menuYShift: 40 } } })
+        expect(wt.vm.panelStyle).toContain('margin-top:40px;')
+        const wb = mount(Controls, { propsData: { menu: { menuPosition: 'bottom-left', menuYShift: 40 } } })
+        expect(wb.vm.panelStyle).toContain('margin-bottom:40px;')
+        wt.destroy()
+        wb.destroy()
+    })
+})
+
+describe('Controls 樣式選項', () => {
+    test('未給樣式選項時鎖住現行值(不隨w-component-vue預設浮動)', () => {
+        const c = mount(Controls).vm.cfg
+        expect(c.menuIconColor).toBe('#555')
+        expect(c.menuIconColorHover).toBe('#222')
+        expect(c.menuIconColorFocus).toBe('#222')
+        expect(c.menuIconSize).toBe(22)
+        expect(c.menuBackgroundColor).toBe('#fefefe')
+        expect(c.menuBackgroundColorHover).toBe('#f0f0f0')
+        expect(c.menuBackgroundColorFocus).toBe('#f0f0f0')
+        expect(c.menuSeparatorColor).toBe('#e6e6e6')
+        expect(c.menuShadow).toBe(true)
+        expect(c.menuTooltipTextColor).toBe('white')
+        expect(c.menuTooltipTextFontSize).toBe('0.7rem')
+        expect(c.menuTooltipBackgroundColor).toBe('rgba(60,60,60,0.75)')
+    })
+
+    test('樣式選項可覆寫並下傳至WGroupIconCheck', () => {
+        const w = mount(Controls, {
+            propsData: {
+                menu: {
+                    menuIconColor: '#111',
+                    menuSeparatorColor: '#abcabc',
+                    menuShadow: false,
+                    menuTooltipTextFontSize: '1rem',
+                },
+            },
+        })
+        const g = w.findComponent(WGroupIconCheck)
+        expect(g.props('iconColor')).toBe('#111')
+        expect(g.props('seplineColor')).toBe('#abcabc')
+        expect(g.props('shadow')).toBe(false)
+        expect(g.props('tooltipTextFontSize')).toBe('1rem')
+        w.destroy()
+    })
+})