w-component-vue 2.5.19 → 2.5.21

package/src/components/WColorPickHue.vue

@@ -1,11 +1,18 @@
 <template>
-    <div
-        :style="`display:inline-block;`"
+    <!-- 側效computed之綁定(:changeXxx)必須排在資料prop之前:
+         Vue2於父層render期間以同一個物件字面值依原始碼順序取值, :locLeft若排在:changeValue之前會取到上一輪之座標 -->
+    <!-- 本元件之根節點必須直接是WPickSurface, 不得再包div, 否則版面高度會多出inline-block之descender -->
+    <!-- slot內容於本元件之作用域編譯, 故canvas之ref="cvs"仍註冊於本元件, plotBackground不需更動 -->
+    <WPickSurface
         :changeValue="changeValue"
+        :width="width"
+        :height="height"
+        :cursorSize="cursorSize"
+        :axis="'x'"
+        :locLeft="curLocLeft"
+        @pick="pickCur"
     >
 
-        <div :style="`position:relative; width:${width}px; height:${height}px;`">
-
             <div :style="`
                 position:absolute; left:0px; top:0px;
                 width:${width}px; height:${height}px;
@@ -19,45 +26,7 @@
                 </div>
             </div>
 
-            <div :style="`
-                position:absolute; left:${curLocLeft-Math.floor(cursorSize/2)-1}px; top:-1px;
-                width:${cursorSize+2}px; height:${height+2}px;
-                box-sizing:border-box;
-                background:transparent;
-                border:1px solid #666;
-                cursor:pointer;
-                user-select:none;
-                _pointer-events:none;
-                `"
-                @mousedown="mousedownCur"
-            ></div>
-
-            <div :style="`
-                position:absolute; left:${curLocLeft-Math.floor(cursorSize/2)}px; top:0px;
-                width:${cursorSize}px; height:${height}px;
-                box-sizing:border-box;
-                background:transparent;
-                border:1px solid #fff;
-                cursor:pointer;
-                user-select:none;
-                _pointer-events:none;
-                `"
-                @mousedown="mousedownCur"
-            ></div>
-
-            <div :style="`
-                position:absolute; left:0px; top:0px;
-                width:${width}px; height:${height}px;
-                cursor:pointer;
-                user-select:none;
-                _pointer-events:none;
-                `"
-                @mousedown="mousedownCur"
-            ></div>
-
-        </div>
-
-    </div>
+    </WPickSurface>
 </template>
 
 <script>
@@ -65,6 +34,7 @@ import isEle from 'wsemi/src/isEle.mjs'
 import waitFun from 'wsemi/src/waitFun.mjs'
 import oc from 'wsemi/src/color.mjs'
 import convertColor from '../js/convertColor.mjs'
+import WPickSurface from './WPickSurface.vue'
 
 
 /**
@@ -75,6 +45,7 @@ import convertColor from '../js/convertColor.mjs'
  */
 export default {
     components: {
+        WPickSurface,
     },
     props: {
         value: {
@@ -99,7 +70,6 @@ export default {
 
             valueTrans: '#fff',
 
-            curMousedown: false,
             curLocLeft: 0,
             // curLocTop: 0,
 
@@ -113,32 +83,6 @@ export default {
         //plotBackground
         vo.plotBackground()
 
-        //windowMousemove
-        vo.windowMousemove = (e) => {
-            // console.log('windowMousemove', e)
-            if (vo.curMousedown) {
-                vo.updateCurLocByEvent(e)
-            }
-        }
-        window.addEventListener('mousemove', vo.windowMousemove, false)
-
-        //windowMouseup
-        vo.windowMouseup = (e) => {
-            // console.log('windowMouseup')
-            vo.curMousedown = false
-        }
-        window.addEventListener('mouseup', vo.windowMouseup, false)
-
-    },
-    beforeDestroy: function() {
-        //console.log('beforeDestroy')
-
-        let vo = this
-
-        //removeEventListener
-        window.removeEventListener('mousemove', vo.windowMousemove, false)
-        window.removeEventListener('mouseup', vo.windowMouseup, false)
-
     },
     computed: {
 
@@ -209,18 +153,12 @@ export default {
 
         },
 
-        updateCurLocByEvent: function(e) {
+        //pickCur, 承接WPickSurface之pick事件, 等同原updateCurLocByEvent之後半段
+        //  座標之真值留在本元件: 其同時被本路徑與updateCurLocByValue(值反算)兩個寫入者更新
+        pickCur: function(msg) {
             let vo = this
-            let rt = vo.$el.getBoundingClientRect()
-            // console.log('rt', rt)
-            let curLocLeft = e.clientX - rt.left
-            // let curLocTop = e.clientY - rt.top
-            curLocLeft = Math.min(Math.max(curLocLeft, 0), (vo.width - 1))
-            // curLocTop = Math.min(Math.max(curLocTop, 0), vo.height)
-            vo.curLocLeft = curLocLeft
-            // vo.curLocTop = curLocTop
-            // console.log('updateCurLocByEvent curLocLeft', curLocLeft)
-            // console.log('updateCurLocByEvent curLocTop', curLocTop)
+            vo.curLocLeft = msg.left
+            // console.log('pickCur curLocLeft', msg.left)
             vo.updateColor()
         },
 
@@ -257,12 +195,6 @@ export default {
             vo.$emit('input', c)
         },
 
-        mousedownCur: function(e) {
-            let vo = this
-            vo.curMousedown = true
-            vo.updateCurLocByEvent(e)
-        },
-
     },
 }
 </script>

package/src/components/WComponentVue.vue

@@ -67,6 +67,7 @@ import WPanelScale from './WPanelScale.vue'
 import WPanelScrolly from './WPanelScrolly.vue'
 import WPanelScrollyCore from './WPanelScrollyCore.vue'
 import WPanelStripe from './WPanelStripe.vue'
+import WPickSurface from './WPickSurface.vue'
 import WPopup from './WPopup.vue'
 import WPopupEditText from './WPopupEditText.vue'
 import WProgressBar from './WProgressBar.vue'
@@ -173,6 +174,7 @@ let WComponentVue = {
         Vue.component('w-panel-scrolly', WPanelScrolly)
         Vue.component('w-panel-scrolly-core', WPanelScrollyCore)
         Vue.component('w-panel-stripe', WPanelStripe)
+        Vue.component('w-pick-surface', WPickSurface)
         Vue.component('w-popup', WPopup)
         Vue.component('w-popup-edit-text', WPopupEditText)
         Vue.component('w-progress-bar', WProgressBar)

package/src/components/WDrawer.vue

@@ -99,7 +99,7 @@
                             <!-- 寬度內要含border, 故須box-sizing:border-box -->
                             <div
                                 ref="divBar"
-                                :style="`position:${useAniPosition}; top:0px; ${isAtLeft?'left':'right'}:${useDrawerWidthTrans-useDrawerBarWidth/2}px; width:${useDrawerBarWidth}px; height:100%; border-left:${drawerBarBorderSize}px solid ${useDrawerBarBorderColor}; border-right:${drawerBarBorderSize}px solid ${useDrawerBarBorderColor}; box-sizing:border-box; opacity:${showAni5DragDrawerBar?1:0}; cursor:col-resize; user-select:none;`"
+                                :style="`position:${useAniPosition}; top:0px; ${isAtLeft?'left':'right'}:${useDrawerWidthTrans-useDrawerBarWidth/2}px; width:${useDrawerBarWidth}px; height:100%; border-left:${drawerBarBorderSize}px solid ${useDrawerBarBorderColor}; border-right:${drawerBarBorderSize}px solid ${useDrawerBarBorderColor}; box-sizing:border-box; opacity:${showAni5DragDrawerBar?1:0}; cursor:col-resize; user-select:none; touch-action:none;`"
                                 v-show="valueTrans && dragDrawerWidth"
                             >
                                 <div :style="`width:${useDrawerBarSize}px; height:100%; background:${useDrawerBarColor};`"></div>

package/src/components/WPanelDivideHorizontal.vue

@@ -21,7 +21,7 @@
 
             <div
                 ref="divBar"
-                :style="`position:absolute; z-index:1; left:${(r)*panelWidth-bw/2}px; width:${barSize}px; height:${panelHeight}px; border-left:${barBorderSize}px solid ${useBarBorderColor}; border-right:${barBorderSize}px solid ${useBarBorderColor}; cursor:col-resize; user-select:none;`"
+                :style="`position:absolute; z-index:1; left:${(r)*panelWidth-bw/2}px; width:${barSize}px; height:${panelHeight}px; border-left:${barBorderSize}px solid ${useBarBorderColor}; border-right:${barBorderSize}px solid ${useBarBorderColor}; cursor:col-resize; user-select:none; touch-action:none;`"
             >
                 <div :style="`width:${barSize}px; height:${panelHeight}px; background:${useBarColor};`"></div>
             </div>

package/src/components/WPanelDivideHorizontalTriple.vue

@@ -21,7 +21,7 @@
 
             <div
                 ref="divBar1"
-                :style="`position:absolute; z-index:1; left:${(r1)*panelWidth-bw/2}px; width:${barSize}px; height:${panelHeight}px; border-left:${barBorderSize}px solid ${useBarBorderColor}; border-right:${barBorderSize}px solid ${useBarBorderColor}; cursor:col-resize; user-select:none;`"
+                :style="`position:absolute; z-index:1; left:${(r1)*panelWidth-bw/2}px; width:${barSize}px; height:${panelHeight}px; border-left:${barBorderSize}px solid ${useBarBorderColor}; border-right:${barBorderSize}px solid ${useBarBorderColor}; cursor:col-resize; user-select:none; touch-action:none;`"
             >
                 <div :style="`width:${barSize}px; height:${panelHeight}px; background:${useBarColor};`"></div>
             </div>
@@ -37,7 +37,7 @@
 
             <div
                 ref="divBar2"
-                :style="`position:absolute; z-index:1; left:${(r2)*panelWidth-bw/2}px; width:${barSize}px; height:${panelHeight}px; border-left:${barBorderSize}px solid ${useBarBorderColor}; border-right:${barBorderSize}px solid ${useBarBorderColor}; cursor:col-resize; user-select:none;`"
+                :style="`position:absolute; z-index:1; left:${(r2)*panelWidth-bw/2}px; width:${barSize}px; height:${panelHeight}px; border-left:${barBorderSize}px solid ${useBarBorderColor}; border-right:${barBorderSize}px solid ${useBarBorderColor}; cursor:col-resize; user-select:none; touch-action:none;`"
             >
                 <div :style="`width:${barSize}px; height:${panelHeight}px; background:${useBarColor};`"></div>
             </div>

package/src/components/WPanelDivideVertical.vue

@@ -21,7 +21,7 @@
 
             <div
                 ref="divBar"
-                :style="`position:absolute; z-index:1; top:${(r)*panelHeight-bw/2}px; width:100%; height:${barSize}px; border-top:${barBorderSize}px solid ${useBarBorderColor}; border-bottom:${barBorderSize}px solid ${useBarBorderColor}; cursor:row-resize; user-select:none;`"
+                :style="`position:absolute; z-index:1; top:${(r)*panelHeight-bw/2}px; width:100%; height:${barSize}px; border-top:${barBorderSize}px solid ${useBarBorderColor}; border-bottom:${barBorderSize}px solid ${useBarBorderColor}; cursor:row-resize; user-select:none; touch-action:none;`"
             >
                 <div :style="`width:100%; height:${barSize}px; background:${useBarColor};`"></div>
             </div>

package/src/components/WPanelDivideVerticalTriple.vue

@@ -21,7 +21,7 @@
 
             <div
                 ref="divBar1"
-                :style="`position:absolute; z-index:1; top:${(r1)*panelHeight-bw/2}px; width:100%; height:${barSize}px; border-top:${barBorderSize}px solid ${useBarBorderColor}; border-bottom:${barBorderSize}px solid ${useBarBorderColor}; cursor:row-resize; user-select:none;`"
+                :style="`position:absolute; z-index:1; top:${(r1)*panelHeight-bw/2}px; width:100%; height:${barSize}px; border-top:${barBorderSize}px solid ${useBarBorderColor}; border-bottom:${barBorderSize}px solid ${useBarBorderColor}; cursor:row-resize; user-select:none; touch-action:none;`"
             >
                 <div :style="`width:100%; height:${barSize}px; background:${useBarColor};`"></div>
             </div>
@@ -37,7 +37,7 @@
 
             <div
                 ref="divBar2"
-                :style="`position:absolute; z-index:1; top:${(r2)*panelHeight-bw/2}px; width:100%; height:${barSize}px; border-top:${barBorderSize}px solid ${useBarBorderColor}; border-bottom:${barBorderSize}px solid ${useBarBorderColor}; cursor:row-resize; user-select:none;`"
+                :style="`position:absolute; z-index:1; top:${(r2)*panelHeight-bw/2}px; width:100%; height:${barSize}px; border-top:${barBorderSize}px solid ${useBarBorderColor}; border-bottom:${barBorderSize}px solid ${useBarBorderColor}; cursor:row-resize; user-select:none; touch-action:none;`"
             >
                 <div :style="`width:100%; height:${barSize}px; background:${useBarColor};`"></div>
             </div>

package/src/components/WPickSurface.vue

@@ -0,0 +1,263 @@
+<template>
+    <!-- 整棵樹只能有一個display:inline-block且須在最外層: 呼叫端之根節點必須直接是本元件, 不得再包div,
+         否則inline-block內含inline-level子會產生line box, 版面高度會多出strut之descender -->
+    <!-- 手勢隔離: touch-action避免瀏覽器接手捲動, user-select與touch-callout避免選字與長按選單 -->
+    <div
+        :style="`display:inline-block; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;`"
+    >
+
+        <!-- 座標基準為本層而非根層: 根層會吃到呼叫端傳入之style與class, 一旦有padding或border, 座標即整體偏移 -->
+        <div
+            ref="divSurface"
+            :style="`position:relative; width:${width}px; height:${height}px;`"
+        >
+
+            <!-- 背景層之滿版外框由本元件自備, 故slot內容不需自行position:absolute;
+                 本層須為相對定位容器之第一個子節點, 因四層皆無z-index, 疊層與命中順序純由樹序決定;
+                 本層不可加overflow:hidden, 呼叫端若需裁切應自行於slot內處理 -->
+            <div :style="`position:absolute; left:0px; top:0px; width:${width}px; height:${height}px;`">
+                <slot
+                    :width="width"
+                    :height="height"
+                    :locLeft="curLocLeft"
+                    :locTop="curLocTop"
+                    :editable="editable"
+                ></slot>
+            </div>
+
+            <!-- 游標外框. 其上下各溢出感應區1px, 該1px帶之命中元素為本層而非感應區; 本層為divSurface之子孫, pointerdown冒泡至掛於divSurface之手勢通道(DOM包含而非幾何), 故不需自行綁定 -->
+            <div :style="`
+                position:absolute; left:${curLocLeft-Math.floor(cursorSize/2)-1}px; top:${isPlanar?(curLocTop-Math.floor(cursorSize/2)-1):-1}px;
+                width:${cursorSize+2}px; height:${isPlanar?(cursorSize+2):(height+2)}px;
+                box-sizing:border-box;
+                background:transparent;
+                ${isPlanar?'border-radius:50%;':''}
+                border:1px solid ${useCursorBorderColor};
+                ${editable?'cursor:pointer;':''}
+                user-select:none;
+                _pointer-events:none;
+                `"
+            ></div>
+
+            <div :style="`
+                position:absolute; left:${curLocLeft-Math.floor(cursorSize/2)}px; top:${isPlanar?(curLocTop-Math.floor(cursorSize/2)):0}px;
+                width:${cursorSize}px; height:${isPlanar?cursorSize:height}px;
+                box-sizing:border-box;
+                background:transparent;
+                ${isPlanar?'border-radius:50%;':''}
+                border:1px solid ${useCursorColor};
+                ${editable?'cursor:pointer;':''}
+                user-select:none;
+                _pointer-events:none;
+                `"
+            ></div>
+
+            <!-- 滿版感應區, 須為最後一個子節點 -->
+            <div :style="`
+                position:absolute; left:0px; top:0px;
+                width:${width}px; height:${height}px;
+                ${editable?'cursor:pointer;':''}
+                user-select:none;
+                _pointer-events:none;
+                `"
+            ></div>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+import domDragPointer from 'wsemi/src/domDragPointer.mjs'
+import convertColor from '../js/convertColor.mjs'
+
+
+/**
+ * 拾取面，於一個平面上以指標(滑鼠、觸控、觸控筆)挑選一個位置
+ *
+ * 本元件與顏色無關，只負責承載背景、繪製游標、接手勢並回報座標，背景由呼叫端以default slot傳入。
+ * 可用於色票選色、影像熱點標註、XY參數控制盤等任何「於平面上挑一點」之場景。
+ *
+ * 為完全受控元件：自身不保存座標，游標位置一律由locLeft與locTop決定，不綁定事件即不會有任何反應。
+ * 按下當下即發出一次pick，其後拖曳期間持續發出，放開或手勢被取消時發出pick-end。亦發出update:locLeft與update:locTop，故可用.sync綁定。
+ *
+ * 座標以px計，原點為感應面左上角，範圍為0至width-1與0至height-1(非width與height)，payload另附已換算之0至1比例。
+ * axis為'x'時，pick之top與ratioTop恆為0，locTop亦不使用。
+ *
+ * 呼叫端之根節點必須直接是本元件，不得再包任何div，否則版面高度會多出inline-block之descender。
+ *
+ * @vue-prop {Number} [width=200] 輸入寬度數字，單位px，預設200
+ * @vue-prop {Number} [height=20] 輸入高度數字，單位px，預設20
+ * @vue-prop {Number} [cursorSize=7] 輸入游標尺寸數字，單位px，預設7
+ * @vue-prop {String} [axis='x'] 輸入追蹤維度字串，可選'x'、'xy'，'x'為滿高直條游標且只追蹤橫向，'xy'為圓點游標且追蹤橫縱向，預設'x'
+ * @vue-prop {Number} [locLeft=0] 輸入游標橫向位置數字，單位px，可用.sync雙向綁定，預設0
+ * @vue-prop {Number} [locTop=0] 輸入游標縱向位置數字，單位px，僅axis為'xy'時使用，可用.sync雙向綁定，預設0
+ * @vue-prop {String} [cursorColor='#fff'] 輸入游標內框顏色字串，預設'#fff'
+ * @vue-prop {String} [cursorBorderColor='#666'] 輸入游標外框顏色字串，預設'#666'
+ * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式布林值，預設true
+ * @vue-event {Object} pick 使用者按下或拖曳時發射，帶出位置物件，格式為{left,top,ratioLeft,ratioTop,pointerType}，left與top單位px且已夾擠於0至width-1與0至height-1之間，ratioLeft與ratioTop為換算之0至1比例，pointerType為'mouse'、'touch'或'pen'，axis為'x'時top與ratioTop恆為0
+ * @vue-event {Number} update:locLeft 使用者按下或拖曳時發射，帶出游標橫向位置數字，供.sync使用
+ * @vue-event {Number} update:locTop 使用者按下或拖曳時發射，帶出游標縱向位置數字，供.sync使用，axis為'x'時不發射此事件
+ * @vue-event {Object} pick-end 使用者放開或手勢被系統取消時發射，不帶參數；元件銷毀時不發射
+ * @vue-slot {Object} default 輸入背景層，slot props為{ width, height, locLeft, locTop, editable }，本元件已提供滿版外框，slot內容不需自行定位
+ */
+export default {
+    components: {
+    },
+    props: {
+        width: {
+            type: Number,
+            default: 200,
+        },
+        height: {
+            type: Number,
+            default: 20,
+        },
+        cursorSize: {
+            type: Number,
+            default: 7,
+        },
+        axis: {
+            type: String,
+            default: 'x',
+        },
+        locLeft: {
+            type: Number,
+            default: 0,
+        },
+        locTop: {
+            type: Number,
+            default: 0,
+        },
+        cursorColor: {
+            type: String,
+            default: '#fff',
+        },
+        cursorBorderColor: {
+            type: String,
+            default: '#666',
+        },
+        editable: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    data: function() {
+        return {
+
+            dragPointer: null,
+
+        }
+    },
+    mounted: function() {
+        //console.log('mounted')
+
+        let vo = this
+
+        //dragPointer, 手勢通道掛於divSurface: 游標外框、游標、滿版感應區與slot背景皆為其子孫, pointerdown冒泡至此(含游標外框溢出感應區之1px帶, DOM包含而非幾何);
+        //  canPress於每次按下讀取即時之editable, 唯讀時不上鎖, 故不會發出無pick之pick-end; 須於mounted建立, 因domDragPointer於呼叫當下即掛window監聽
+        let dragPointer = domDragPointer(vo.$refs.divSurface, { canPress: () => vo.editable })
+        dragPointer.on('press', vo.pickByEvent)
+        dragPointer.on('drag', vo.pickByEvent)
+        dragPointer.on('free', () => {
+            //事件名須為kebab-case: 公開範例頁為in-DOM template, 瀏覽器會把屬性名全部小寫,
+            //  camelCase之事件名於該處會靜默失效(本庫已有一例: AppZoneWTextSuggest之@update:showPanel於產出頁變成@update:show-panel)
+            vo.$emit('pick-end')
+        })
+
+        //save
+        vo.dragPointer = dragPointer
+
+    },
+    beforeDestroy: function() {
+        //console.log('beforeDestroy')
+
+        let vo = this
+
+        //clear, 宿主可能以v-if於拖曳中被銷毀; clear內含解鎖與移除window監聽, 且不補發free(故不發pick-end)
+        if (vo.dragPointer) {
+            vo.dragPointer.clear()
+        }
+
+    },
+    computed: {
+
+        isPlanar: function() {
+            let vo = this
+            return vo.axis === 'xy'
+        },
+
+        curLocLeft: function() {
+            let vo = this
+            return vo.locLeft
+        },
+
+        curLocTop: function() {
+            let vo = this
+            return vo.locTop
+        },
+
+        useCursorColor: function() {
+            let vo = this
+            return convertColor(vo.cursorColor)
+        },
+
+        useCursorBorderColor: function() {
+            let vo = this
+            return convertColor(vo.cursorBorderColor)
+        },
+
+    },
+    methods: {
+
+        pickByEvent: function(msg) {
+            let vo = this
+
+            //ele, 座標基準為內層定位容器, 不可用$el: 根層會吃到呼叫端fallthrough之style與class,
+            //  一旦根層有padding或border, 以$el換算之座標便會整體偏移且無任何徵兆
+            let ele = vo.$refs.divSurface
+            if (!ele) {
+                return
+            }
+            let rt = ele.getBoundingClientRect()
+
+            let left = msg.clientX - rt.left
+            left = Math.min(Math.max(left, 0), (vo.width - 1))
+
+            let top = 0
+            if (vo.isPlanar) {
+                top = msg.clientY - rt.top
+                top = Math.min(Math.max(top, 0), (vo.height - 1))
+            }
+
+            //ratio, 上限為width-1與height-1, 與夾擠一致
+            let ratioLeft = 0
+            if ((vo.width - 1) > 0) {
+                ratioLeft = left / (vo.width - 1)
+            }
+            let ratioTop = 0
+            if (vo.isPlanar && (vo.height - 1) > 0) {
+                ratioTop = top / (vo.height - 1)
+            }
+
+            //pointerType, 由手勢通道正規化為'mouse'、'touch'或'pen'
+            let pointerType = msg.pointerType
+
+            //emit, 必須同步發出, 不得改為nextTick、setTimeout或debounce:
+            //  呼叫端可能於本次事件內回吐值以解除其上鎖機制(如WColorSelectPanelHsva之lock), 延後會使其卡死
+            vo.$emit('pick', { left, top, ratioLeft, ratioTop, pointerType })
+            vo.$emit('update:locLeft', left)
+
+            //update:locTop僅於二維時發出: 一維時top恆為0, 若無條件發出, 呼叫端以.sync綁定locTop之變數會被靜默歸零
+            if (vo.isPlanar) {
+                vo.$emit('update:locTop', top)
+            }
+
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/WSlider.vue

@@ -6,8 +6,12 @@
         @domresize="resizePanel"
     >
 
+        <!-- 按下此列即定值: 手勢通道(domDragPointer)掛於本列容器(高度為sliderSize), 不可掛於根層, 因提示窗divContent為根層子節點, 掛根會導致點提示窗也改值 -->
+        <!-- touch-action:none為觸控可拖曳之必要條件, 否則瀏覽器於手指移動數px後接手捲動並以pointercancel中斷事件流 -->
+        <!-- 代價: 本列(高度sliderSize)上起手之垂直捲動手勢會失效 -->
         <div
-            :style="`position:relative; width:100%; height:${sliderSize}px;`"
+            ref="divRow"
+            :style="`position:relative; width:100%; height:${sliderSize}px; touch-action:none; ${editable?'cursor:pointer;':''}`"
         >
 
             <div :style="`position:absolute; top:${sliderSize/2-progHeight/2}px; left:${sliderSize/2}px; width:${progWidth}px;`">
@@ -15,16 +19,25 @@
                 <div
                     ref="divPanel"
                     :style="`position:relative; width:${progWidth}px;`"
-                    _click="clickProg"
                 >
 
-                    <div :style="`${useProgBorderRadius} overflow:hidden; width:${progWidth}px; height:${progHeight}px;`">
-                        <div :style="`background:${useProgBackgroundColor}; height:${progHeight}px;`">
-                            <div :style="`background:${useProgColor}; width:${(rt)*progWidth}px; height:${progHeight}px;`"></div>
+                    <div
+                        :style="`${useProgBorderRadius} overflow:hidden; width:${progWidth}px; height:${progHeight}px;`"
+                    >
+                        <div
+                            ref="divBarTrack"
+                            :style="`background:${useProgBackgroundColor}; height:${progHeight}px;`"
+
+                        >
+                            <div
+                                ref="divBarProgress"
+                                :style="`background:${useProgColor}; width:${(rt)*progWidth}px; height:${progHeight}px;`"
+                            ></div>
                         </div>
                     </div>
 
                     <div
+                        ref="divTriggerOuter"
                         :style="`position:absolute; left:${(rt)*progWidth-widthCir/2}px; top:${progHeight/2-heightCir/2}px; z-index:1; ${editable?'cursor:pointer;':''}`"
                     >
 
@@ -84,7 +97,7 @@ import dig from 'wsemi/src/dig.mjs'
 import round from 'wsemi/src/round.mjs'
 import cdbl from 'wsemi/src/cdbl.mjs'
 import replace from 'wsemi/src/replace.mjs'
-import domDragBarAndScroll from 'wsemi/src/domDragBarAndScroll.mjs'
+import domDragPointer from 'wsemi/src/domDragPointer.mjs'
 import domResize from '../js/domResize.mjs'
 import convertColor from '../js/convertColor.mjs'
 import { createPopper } from '@popperjs/core/lib/popper-lite.js' //不用安裝@popperjs/core, 因wsemi安裝tippy.js內有依賴@popperjs/core
@@ -222,7 +235,7 @@ export default {
             panelWidth: 0,
             panelHeight: 0,
 
-            das: null,
+            dragPointer: null,
 
             hoverTrans: false,
             dragTrans: false,
@@ -240,14 +253,17 @@ export default {
 
         let vo = this
 
-        //das
-        let das = domDragBarAndScroll(vo.$refs.divPanel, vo.$refs.divBar, { useTouchDragForPanel: false })
-        das.on('dragBar', vo.dragBar)
-        das.on('pressBar', vo.pressBar)
-        das.on('freeBar', vo.freeBar)
+        //dragPointer, 整列(divRow)單一指標通道, 滑鼠/觸控/觸控筆同一套規則, 把手與軌道共用同一把鎖:
+        //  按於軌道: 按下即定值並接續拖曳, 與原生input[type=range]及各家滑桿一致
+        //  按於把手: 只起手不定值(見pressRow), 否則「按住鈕不動即放開」會跳值; 其後拖曳以絕對座標定值
+        //  canPress於每次按下讀取即時之editable, 唯讀時不上鎖; dragBar內另保留editable重檢, 因拖曳中editable轉false時只有它擋得住
+        let dragPointer = domDragPointer(vo.$refs.divRow, { canPress: () => vo.editable })
+        dragPointer.on('press', vo.pressRow)
+        dragPointer.on('drag', vo.dragBar)
+        dragPointer.on('free', vo.freeBar)
 
         //save
-        vo.das = das
+        vo.dragPointer = dragPointer
 
     },
     beforeDestroy: function() {
@@ -255,9 +271,9 @@ export default {
 
         let vo = this
 
-        //clear
-        if (vo.das) {
-            vo.das.clear()
+        //clear, 宿主WColorSelectPanel與WPopup皆以v-if切換, 可能於拖曳中被銷毀; clear內含解鎖與移除window監聽, 不補發free
+        if (vo.dragPointer) {
+            vo.dragPointer.clear()
         }
 
     },
@@ -546,9 +562,29 @@ export default {
 
         },
 
-        pressBar: function() {
+        pressRow: function(msg) {
             let vo = this
+
+            //dragTrans, 使提示窗顯示, 並讓放開時effecting之else分支把r收斂回rt
             vo.dragTrans = true
+
+            //check, 按於把手上只起手不定值, 否則「按住鈕不動即放開」會跳值(Radix Slider同法: thumbs.has(target)時不onSlideStart)
+            //須用contains不可用===, 因按於鈕中心時target為divBar內之透明圓子節點, 按於20x20方框四角時target才為divBar自身
+            let target = msg.event.target
+            let divBar = vo.$refs.divBar
+            if (divBar && divBar.contains(target)) {
+                return
+            }
+
+            //check, 可視圓divTriggerOuter以rt定位而感應方塊divBar以r定位, 兩者於rt與r不一致時會錯開而露出, 故一併視為把手
+            let divTriggerOuter = vo.$refs.divTriggerOuter
+            if (divTriggerOuter && divTriggerOuter.contains(target)) {
+                return
+            }
+
+            //按下即定值, 與原生input[type=range]及各家滑桿一致
+            vo.dragBar(msg)
+
         },
 
         freeBar: function() {