w-component-vue 2.4.76 → 2.4.78

package/src/components/WPanelDivideVerticalTriple.vue

@@ -0,0 +1,451 @@
+<template>
+    <div
+        :changeParam="changeParam"
+        v-domresize
+        @domresize="resizePanel"
+    >
+
+        <div
+            ref="divPanel"
+            style="position:relative;"
+        >
+
+            <div ref="top" :style="`width:100%; height:${(r1)*panelHeight}px;`">
+                <slot
+                    name="top"
+                    :ratio="r1"
+                    :width="panelWidth"
+                    :height="(r1)*panelHeight"
+                ></slot>
+            </div>
+
+            <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;`"
+            >
+                <div :style="`width:100%; height:${barSize}px; background:${useBarColor};`"></div>
+            </div>
+
+            <div ref="center" :style="`width:100%; height:${(r2-r1)*panelHeight}px;`">
+                <slot
+                    name="center"
+                    :ratio="r2-r1"
+                    :width="panelWidth"
+                    :height="(r2-r1)*panelHeight"
+                ></slot>
+            </div>
+
+            <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;`"
+            >
+                <div :style="`width:100%; height:${barSize}px; background:${useBarColor};`"></div>
+            </div>
+
+            <div ref="bottom" :style="`width:100%; height:${(1-r2)*panelHeight}px;`">
+                <slot
+                    name="bottom"
+                    :ratio="1-r2"
+                    :width="panelWidth"
+                    :height="(1-r2)*panelHeight"
+                ></slot>
+            </div>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+import isNumber from 'lodash-es/isNumber.js'
+import domDragBarAndScroll from 'wsemi/src/domDragBarAndScroll.mjs'
+import domResize from '../js/domResize.mjs'
+import convertColor from '../js/convertColor.mjs'
+
+
+/**
+ * 三分垂直分割組件，由上、中、下3個分區與2條可拖曳分隔條組成，各分區內容以具名scoped slot(top、center、bottom)帶出，各slot帶出ratio(分區比例)、width(分區寬px)、height(分區高px)
+ *
+ * @vue-prop {Number} [ratio1=1/3] 輸入第一分隔條位置比例數字，範圍為0~1，需小於ratio2，預設1/3
+ * @vue-prop {Number} [ratio2=2/3] 輸入第二分隔條位置比例數字，範圍為0~1，需大於ratio1，預設2/3
+ * @vue-prop {Number} [ratio1Min=0] 輸入第一分隔條位置最小比例數字，範圍為0~1，需小於ratio1Max，若ratio1Min大於ratio1Max則由ratio1Min主導，預設0
+ * @vue-prop {Number} [ratio1Max=1] 輸入第一分隔條位置最大比例數字，範圍為0~1，需大於ratio1Min，若ratio1Min大於ratio1Max則由ratio1Min主導，預設1
+ * @vue-prop {Number} [ratio2Min=0] 輸入第二分隔條位置最小比例數字，範圍為0~1，需小於ratio2Max，若ratio2Min大於ratio2Max則由ratio2Min主導，預設0
+ * @vue-prop {Number} [ratio2Max=1] 輸入第二分隔條位置最大比例數字，範圍為0~1，需大於ratio2Min，若ratio2Min大於ratio2Max則由ratio2Min主導，預設1
+ * @vue-prop {Number} [sectionHeightMin=null] 輸入各分區最小高度數字，為topHeightMin、centerHeightMin與bottomHeightMin之預設值，單位為px，處理優先權大於ratio1Min、ratio1Max、ratio2Min與ratio2Max，預設null
+ * @vue-prop {Number} [sectionHeightMax=null] 輸入各分區最大高度數字，為topHeightMax、centerHeightMax與bottomHeightMax之預設值，單位為px，處理優先權大於ratio1Min、ratio1Max、ratio2Min與ratio2Max，預設null
+ * @vue-prop {Number} [topHeightMin=null] 輸入上方區最小高度數字，單位為px，處理優先權大於sectionHeightMin，預設null代表沿用sectionHeightMin
+ * @vue-prop {Number} [topHeightMax=null] 輸入上方區最大高度數字，單位為px，處理優先權大於sectionHeightMax，預設null代表沿用sectionHeightMax
+ * @vue-prop {Number} [centerHeightMin=null] 輸入中間區最小高度數字，單位為px，處理優先權大於sectionHeightMin，預設null代表沿用sectionHeightMin
+ * @vue-prop {Number} [centerHeightMax=null] 輸入中間區最大高度數字，單位為px，處理優先權大於sectionHeightMax，預設null代表沿用sectionHeightMax
+ * @vue-prop {Number} [bottomHeightMin=null] 輸入下方區最小高度數字，單位為px，處理優先權大於sectionHeightMin，預設null代表沿用sectionHeightMin
+ * @vue-prop {Number} [bottomHeightMax=null] 輸入下方區最大高度數字，單位為px，處理優先權大於sectionHeightMax，預設null代表沿用sectionHeightMax
+ * @vue-prop {String} [barColor='#ddd'] 輸入分隔條顏色字串，預設'#ddd'
+ * @vue-prop {Number} [barSize=2] 輸入分隔條尺寸數字，為分隔條高度，單位為px，預設2
+ * @vue-prop {String} [barBorderColor='transparent'] 輸入分隔條框線顏色字串，預設'transparent'
+ * @vue-prop {Number} [barBorderSize=3] 輸入分隔條框線寬度數字，單位為px，預設3，通常配合barBorderColor='transparent'使可拖曳區加大又不遮蔽可視區
+ * @vue-event update:ratio1 拖曳第一分隔條時發射，帶出新的第一分隔條位置比例數字
+ * @vue-event update:ratio2 拖曳第二分隔條時發射，帶出新的第二分隔條位置比例數字
+ * @vue-event resize 組件尺寸變更時發射，帶出domresize訊息物件
+ */
+export default {
+    directives: {
+        domresize: domResize(),
+    },
+    props: {
+        ratio1: {
+            type: Number,
+            default: 1 / 3, //0~1
+        },
+        ratio2: {
+            type: Number,
+            default: 2 / 3, //0~1
+        },
+        ratio1Min: {
+            type: Number,
+            default: 0,
+        },
+        ratio1Max: {
+            type: Number,
+            default: 1,
+        },
+        ratio2Min: {
+            type: Number,
+            default: 0,
+        },
+        ratio2Max: {
+            type: Number,
+            default: 1,
+        },
+        sectionHeightMin: {
+            type: Number,
+            default: null,
+        },
+        sectionHeightMax: {
+            type: Number,
+            default: null,
+        },
+        topHeightMin: {
+            type: Number,
+            default: null,
+        },
+        topHeightMax: {
+            type: Number,
+            default: null,
+        },
+        centerHeightMin: {
+            type: Number,
+            default: null,
+        },
+        centerHeightMax: {
+            type: Number,
+            default: null,
+        },
+        bottomHeightMin: {
+            type: Number,
+            default: null,
+        },
+        bottomHeightMax: {
+            type: Number,
+            default: null,
+        },
+        barColor: {
+            type: String,
+            default: '#ddd',
+        },
+        barSize: {
+            type: Number,
+            default: 2,
+        },
+        barBorderColor: {
+            type: String,
+            default: 'transparent',
+        },
+        barBorderSize: {
+            type: Number,
+            default: 3,
+        },
+    },
+    data: function() {
+        return {
+            r1: null,
+            r2: null,
+            panelWidth: 0,
+            panelHeight: 0,
+            das1: null,
+            das2: null,
+        }
+    },
+    mounted: function() {
+        //console.log('mounted')
+
+        let vo = this
+
+        //das1, das2, 兩條分隔條各自建立拖曳器
+        let das1 = domDragBarAndScroll(vo.$refs.divPanel, vo.$refs.divBar1, { useTouchDragForPanel: false })
+        das1.on('dragBar', vo.dragBar1)
+        let das2 = domDragBarAndScroll(vo.$refs.divPanel, vo.$refs.divBar2, { useTouchDragForPanel: false })
+        das2.on('dragBar', vo.dragBar2)
+
+        //save
+        vo.das1 = das1
+        vo.das2 = das2
+
+    },
+    beforeDestroy: function() {
+        //console.log('beforeDestroy')
+
+        let vo = this
+
+        //clear
+        if (vo.das1) {
+            vo.das1.clear()
+        }
+        if (vo.das2) {
+            vo.das2.clear()
+        }
+
+    },
+    computed: {
+
+        changeParam: function() {
+            // console.log('computed changeParam')
+
+            let vo = this
+
+            //ratio1, ratio2
+            let r1 = vo.ratio1
+            let r2 = vo.ratio2
+
+            //limitRatio
+            r1 = vo.limitRatio1(r1, r2)
+            r2 = vo.limitRatio2(r2, r1)
+
+            //save
+            vo.r1 = r1
+            vo.r2 = r2
+
+            return ''
+        },
+
+        bw: function() {
+            let vo = this
+
+            return vo.barSize + vo.barBorderSize * 2
+        },
+
+        useBarColor: function() {
+            return convertColor(this.barColor)
+        },
+
+        useBarBorderColor: function() {
+            return convertColor(this.barBorderColor)
+        },
+
+        useHeightLimits: function() {
+            let vo = this
+
+            //各分區高度限制, 個別分區未給予時沿用sectionHeightMin與sectionHeightMax
+            let pick = (v, vd) => {
+                if (isNumber(v)) {
+                    return v
+                }
+                return vd
+            }
+            return {
+                topMin: pick(vo.topHeightMin, vo.sectionHeightMin),
+                topMax: pick(vo.topHeightMax, vo.sectionHeightMax),
+                centerMin: pick(vo.centerHeightMin, vo.sectionHeightMin),
+                centerMax: pick(vo.centerHeightMax, vo.sectionHeightMax),
+                bottomMin: pick(vo.bottomHeightMin, vo.sectionHeightMin),
+                bottomMax: pick(vo.bottomHeightMax, vo.sectionHeightMax),
+            }
+        },
+
+    },
+    methods: {
+
+        resizePanel: function(msg) {
+            //console.log('methods resizePanel', msg)
+
+            let vo = this
+
+            //update
+            vo.panelWidth = msg.snew.offsetWidth
+            vo.panelHeight = msg.snew.offsetHeight
+
+            //emit
+            vo.$emit('resize', msg)
+
+        },
+
+        limitRatio1: function(r1, r2) {
+            // console.log('methods limitRatio1', r1, r2)
+
+            let vo = this
+
+            //ratio1Min, ratio1Max
+            r1 = Math.min(r1, vo.ratio1Max)
+            r1 = Math.max(r1, vo.ratio1Min)
+
+            //check
+            if (vo.panelHeight > 0) {
+
+                //ls
+                let ls = vo.useHeightLimits
+
+                //topHeight
+                let topHeight = (r1) * vo.panelHeight
+
+                //check topHeightMin
+                if (isNumber(ls.topMin)) {
+                    if (topHeight < ls.topMin) {
+                        r1 = ls.topMin / vo.panelHeight
+                    }
+                }
+
+                //check topHeightMax
+                if (isNumber(ls.topMax)) {
+                    if (topHeight > ls.topMax) {
+                        r1 = ls.topMax / vo.panelHeight
+                    }
+                }
+
+                //centerHeight, 拖曳第一分隔條時中間區由上方變動, 故以r2回推r1
+                let centerHeight = (r2 - r1) * vo.panelHeight
+
+                //check centerHeightMin
+                if (isNumber(ls.centerMin)) {
+                    if (centerHeight < ls.centerMin) {
+                        r1 = r2 - ls.centerMin / vo.panelHeight
+                    }
+                }
+
+                //check centerHeightMax
+                if (isNumber(ls.centerMax)) {
+                    if (centerHeight > ls.centerMax) {
+                        r1 = r2 - ls.centerMax / vo.panelHeight
+                    }
+                }
+
+            }
+
+            //第一分隔條不可越過第二分隔條, 否則中間區高度為負
+            r1 = Math.min(r1, r2)
+
+            return r1
+        },
+
+        limitRatio2: function(r2, r1) {
+            // console.log('methods limitRatio2', r2, r1)
+
+            let vo = this
+
+            //ratio2Min, ratio2Max
+            r2 = Math.min(r2, vo.ratio2Max)
+            r2 = Math.max(r2, vo.ratio2Min)
+
+            //check
+            if (vo.panelHeight > 0) {
+
+                //ls
+                let ls = vo.useHeightLimits
+
+                //centerHeight, 拖曳第二分隔條時中間區由下方變動, 故以r1推算r2
+                let centerHeight = (r2 - r1) * vo.panelHeight
+
+                //check centerHeightMin
+                if (isNumber(ls.centerMin)) {
+                    if (centerHeight < ls.centerMin) {
+                        r2 = r1 + ls.centerMin / vo.panelHeight
+                    }
+                }
+
+                //check centerHeightMax
+                if (isNumber(ls.centerMax)) {
+                    if (centerHeight > ls.centerMax) {
+                        r2 = r1 + ls.centerMax / vo.panelHeight
+                    }
+                }
+
+                //bottomHeight
+                let bottomHeight = (1 - r2) * vo.panelHeight
+
+                //check bottomHeightMin
+                if (isNumber(ls.bottomMin)) {
+                    if (bottomHeight < ls.bottomMin) {
+                        r2 = 1 - ls.bottomMin / vo.panelHeight
+                    }
+                }
+
+                //check bottomHeightMax
+                if (isNumber(ls.bottomMax)) {
+                    if (bottomHeight > ls.bottomMax) {
+                        r2 = 1 - ls.bottomMax / vo.panelHeight
+                    }
+                }
+
+            }
+
+            //第二分隔條不可越過第一分隔條, 否則中間區高度為負
+            r2 = Math.max(r2, r1)
+
+            return r2
+        },
+
+        dragBar1: function({ clientY }) {
+            //console.log('methods dragBar1', clientY)
+
+            let vo = this
+
+            //r
+            let bd = vo.$el.getBoundingClientRect()
+            let y = clientY
+            let h = vo.$el.offsetHeight
+            let r = 0
+            if (h > 0) {
+                r = (y - bd.top) / h //clientY需扣除元件的top位置
+            }
+
+            //limitRatio
+            r = vo.limitRatio1(r, vo.r2)
+
+            //save
+            vo.r1 = r
+
+            //emit
+            vo.$emit('update:ratio1', r)
+
+        },
+
+        dragBar2: function({ clientY }) {
+            //console.log('methods dragBar2', clientY)
+
+            let vo = this
+
+            //r
+            let bd = vo.$el.getBoundingClientRect()
+            let y = clientY
+            let h = vo.$el.offsetHeight
+            let r = 0
+            if (h > 0) {
+                r = (y - bd.top) / h //clientY需扣除元件的top位置
+            }
+
+            //limitRatio
+            r = vo.limitRatio2(r, vo.r1)
+
+            //save
+            vo.r2 = r
+
+            //emit
+            vo.$emit('update:ratio2', r)
+
+        },
+
+    }
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/WSegmentsVertical.vue

@@ -3,7 +3,8 @@
 
         <div :style="`padding:${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px;`">
 
-            <div :style="`position:relative; width:${plotWidth}px; height:${plotHeight}px; border-left:1px solid ${useAxisColor};`">
+            <!-- plot區, 寬度內要含左側垂直線軸之邊線1px(useTextWidthMax亦按此扣除), 故須box-sizing:border-box -->
+            <div :style="`position:relative; width:${plotWidth}px; height:${plotHeight}px; border-left:1px solid ${useAxisColor}; box-sizing:border-box;`">
 
                 <div
                     :style="`position:absolute; top:50%; left:0%; color:${useTitleColor}; font-size:${titleFontSize}; text-align:center; transform-origin:center; transform:translate(-50%,-50%) rotate(-90deg) translateY(${useTitleShift}px);`"
@@ -23,21 +24,59 @@
                     </div>
                 </div>
 
+                <!-- 刻度, 絕對定位之包含塊原點在垂直線軸(1px)之右緣, 故left需再左推1px, 使刻度以線軸為中心左右各tickSize -->
                 <div
-                    :style="`position:absolute; top:${l.y}px; left:-${tickSize}px;`"
+                    :style="`position:absolute; top:${l.y}px; left:-${tickSize+1}px;`"
                     :key="'tick'+kl"
                     v-for="(l,kl) in useLabelsLocs"
                 >
                     <div :style="`width:${tickSize*2+1}px; border-top:1px solid ${useTickColor};`"></div>
                 </div>
 
-                <div
-                    :style="`position:absolute; top:${s.y}px; left:-${segmentSize/2}px; width:${segmentSize}px; height:${s.height}px; ${getSegmentBackground(ks)} ${getSegmentBorder(ks)} ${useSegmentCursor}`"
-                    :key="'sample-block'+ks"
-                    v-for="(s,ks) in useSamplesLocs"
-                    @click="(ev)=>{clickSegment(ev,s.data)}"
-                >
-                </div>
+                <!-- 區塊, 與刻度同規則: 以垂直線軸為中心左右各segmentSize, 總寬segmentSize*2+1(含邊框, 故須box-sizing:border-box) -->
+                <!-- 附popup時另包一層定位div, 區塊本身即為WPopup之驅動區, 彈窗才會錨定於該區塊而非plot區左上角 -->
+                <!-- 定位div須用display:flex, 因WPopup根元素為display:inline-block, 於行內脈絡下較矮之區塊會被行框基線往下推擠 -->
+                <template v-if="segmentWithPopup">
+                    <div
+                        :style="`position:absolute; top:${s.y}px; left:-${segmentSize+1}px; display:flex;`"
+                        :key="'sample-block'+ks"
+                        v-for="(s,ks) in useSamplesLocs"
+                    >
+                        <!-- placement為right-start, 使彈窗出現於區塊右側且上緣對齊區塊上緣(即起始刻度線) -->
+                        <WPopup
+                            :isolated="true"
+                            :placement="'right-start'"
+                            :labelContent="labelContentForSegment"
+                            :cmpZIndex="cmpZIndex"
+                        >
+
+                            <template v-slot:trigger>
+                                <div
+                                    :style="`width:${segmentSize*2+1}px; height:${s.height}px; box-sizing:border-box; ${getSegmentBackground(ks)} ${getSegmentBorder(ks)} ${useSegmentCursor}`"
+                                    @click="(ev)=>{clickSegment(ev,s.data)}"
+                                ></div>
+                            </template>
+
+                            <template v-slot:content>
+                                <slot
+                                    name="segment-popup"
+                                    :item="s.data"
+                                    :index="ks"
+                                ></slot>
+                            </template>
+
+                        </WPopup>
+                    </div>
+                </template>
+                <template v-else>
+                    <div
+                        :style="`position:absolute; top:${s.y}px; left:-${segmentSize+1}px; width:${segmentSize*2+1}px; height:${s.height}px; box-sizing:border-box; ${getSegmentBackground(ks)} ${getSegmentBorder(ks)} ${useSegmentCursor}`"
+                        :key="'sample-block'+ks"
+                        v-for="(s,ks) in useSamplesLocs"
+                        @click="(ev)=>{clickSegment(ev,s.data)}"
+                    >
+                    </div>
+                </template>
 
                 <div :style="`position:absolute; top:0px; left:0px; transform:translateX(-${paddingLeft}px);`">
                     <slot
@@ -205,6 +244,7 @@ import convertColor from '../js/convertColor.mjs'
  * @vue-prop {Number} [tickSize=5] 輸入刻度尺寸(為單側寬度)數字，單位為px，預設5
  * @vue-prop {String} [tickLabelColor='#666'] 輸入刻度文字顏色字串，預設'#666'
  * @vue-prop {String} [tickLabelFontSize='0.7rem'] 輸入刻度文字字型大小字串，預設'0.7rem'
+ * @vue-prop {Boolean} [segmentWithPopup=false] 輸入區塊是否可點擊顯示popup彈窗布林值，彈窗內容由slot之segment-popup提供，預設false
  * @vue-prop {String} [segmentBackgroundType='color'] 輸入區塊背景類型字串，可選'color'或'image'，預設'color'
  * @vue-prop {String} [segmentBackgroundImage=''] 輸入區塊背景圖片字串，通過background-image:url(...)設定，預設''
  * @vue-prop {Function} [funSegmentBackgroundImage=null] 輸入處理項目數據之區塊背景圖片函數，預設null
@@ -213,17 +253,18 @@ import convertColor from '../js/convertColor.mjs'
  * @vue-prop {Function} [funSegmentBackgroundColor=null] 輸入處理項目數據之區塊背景函數，預設null
  * @vue-prop {String|Object} [segmentBorderColor='#FFB74D'] 輸入區塊邊框顏色字串或物件，給予物件時可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，預設'#FB8C00'
  * @vue-prop {Function} [funSegmentBorderColor=null] 輸入處理項目數據之區塊邊框函數，預設null
- * @vue-prop {Number} [segmentSize=6] 輸入區塊尺寸(為兩側總寬度)數字，單位為px，預設6
- * @vue-prop {Boolean} [textWithPopup=false] 輸入項目文字是否可點擊顯示popup彈窗布林值，預設false
+ * @vue-prop {Number} [segmentSize=3] 輸入區塊尺寸(為單側寬度，不含垂直線軸)數字，區塊以垂直線軸為中心左右各segmentSize，含線軸之總寬為segmentSize*2+1，單位為px，預設3
+ * @vue-prop {Boolean} [segmentCanClick=false] 輸入區塊是否可點擊布林值，預設false
+ * @vue-prop {Boolean} [textWithPopup=false] 輸入項目文字是否可點擊顯示popup彈窗布林值，彈窗內容由slot之text-popup提供，預設false
  * @vue-prop {String} [textFontSize='0.7rem'] 輸入項目文字區之文字字型大小字串，預設'0.7rem'
  * @vue-prop {String} [textColor='#222'] 輸入項目文字區之文字顏色字串，預設'#222'
  * @vue-prop {String} [textBackgroundColor='#ddd'] 輸入項目文字區之背景顏色字串，預設'#ddd'
  * @vue-prop {Number} [textTriangularSize=15] 輸入項目文字區之箭頭長度數字，單位為px，若textTriangularSize/textTriangularRatio*2小於項目文字區高度時則會破圖，預設15
  * @vue-prop {Number} [textTriangularRatio=1.5] 輸入項目文字區之箭頭長寬比值數字，若textTriangularSize/textTriangularRatio*2小於項目文字區高度時則會破圖，預設1.5
- * @vue-prop {Number} [textShift=null] 輸入項目文字區與左側軸距離數字，單位為px，若給null則自動使用值為1+segmentSize/2+paddingStyle.left，預設null
+ * @vue-prop {Number} [textShift=null] 輸入項目文字區與左側軸距離數字，單位為px，若給null則自動使用值為1+segmentSize+paddingStyle.left，預設null
  * @vue-prop {Boolean} [textCanClick=false] 輸入項目文字是否可點擊布林值，預設false
- * @vue-prop {Boolean} [segmentCanClick=false] 輸入區塊是否可點擊布林值，預設false
  * @vue-prop {String} [labelContentForText=null] 輸入針對項目文字之popup彈窗teleport至body內之內容div所給予之wtlp屬性值字串，供查找使用，預設null
+ * @vue-prop {String} [labelContentForSegment=null] 輸入針對區塊之popup彈窗teleport至body內之內容div所給予之wtlp屬性值字串，供查找使用，預設null
  * @vue-prop {Number} [cmpZIndex=3000] 輸入彈窗使用z-index數字，供嵌於高z-index彈窗內時提高層級，預設3000
  */
 export default {
@@ -356,7 +397,7 @@ export default {
         },
         segmentSize: {
             type: Number,
-            default: 6,
+            default: 3,
         },
         textWithPopup: {
             type: Boolean,
@@ -394,10 +435,18 @@ export default {
             type: Boolean,
             default: false,
         },
+        segmentWithPopup: {
+            type: Boolean,
+            default: false,
+        },
         labelContentForText: {
             type: String,
             default: null,
         },
+        labelContentForSegment: {
+            type: String,
+            default: null,
+        },
         cmpZIndex: {
             type: Number,
             default: 3000,
@@ -714,11 +763,12 @@ export default {
                 //bottom
                 let bottom = (v.valueEnd - vo.useValueMin) / range * vo.plotHeight
 
-                //r
+                //r, height需含結束刻度線自身之1px, 使區塊上下緣邊框各自正好疊在起訖刻度線上,
+                //且相鄰區塊(前者valueEnd等於後者valueStart)於交界處共用同一條1px邊框, 不會疊成2px
                 let r = {
                     y: top,
                     yc: (top + bottom) / 2,
-                    height: bottom - top,
+                    height: bottom - top + 1,
                     text: v.text,
                     data: v.data,
                 }
@@ -752,7 +802,7 @@ export default {
 
         useSegmentCursor: function() {
             let vo = this
-            let b = vo.segmentCanClick
+            let b = vo.segmentWithPopup || vo.segmentCanClick
             return b ? 'cursor:pointer;' : ''
         },
 
@@ -787,8 +837,8 @@ export default {
                 return vo.textShift
             }
 
-            //自動計算
-            let s = 1 + vo.segmentSize / 2
+            //自動計算, 區塊右緣位於segmentSize處, 再留1px間距
+            let s = 1 + vo.segmentSize
             if (vo.useAlignStart === 'right' || vo.useAlignEnd === 'right') {
                 s += vo.paddingLeft
             }

package/toolg/cleanFolder.mjs

@@ -1,4 +1,5 @@
 import cleanFolder from 'w-package-tools/src/cleanFolder.mjs'
 
 
+cleanFolder('dist')
 cleanFolder('docs')