w-threejs-vue 1.0.19 → 1.0.21

package/src/components/WThreejsVue.vue

@@ -1,143 +1,138 @@
 <template>
-    <div :style="`width:${widthInp}px; height:${heightInp}px;`">
-
-        <div style="position:relative; width:0px; height:0px;" v-if="loading">
-            <div style="position:absolute; top:0px; left:0px;">
-                <WIconLoading></WIconLoading>
-            </div>
-        </div>
-
-        <div style="position:relative;">
-
-            <div
-                ref="panel"
-                :style="`position:relative; width:${widthInp}px; height:${heightInp}px; opacity:${loading?0:1};`"
-                v-domresize
-                @domresize="resizePanel"
-            ></div>
-
-            <!-- 須使用pointer-events:none吃掉事件, 才能點擊選單區透明區域 -->
-            <div
-                :style="`position:absolute; top:0px; left:0px; pointer-events:none;`"
-                v-if="!loading"
-            >
-
-                <div :style="`padding:${space}px; display:flex; align-items:flex-start;`">
-
-                    <!-- 設定區 -->
-                    <!-- 須使用pointer-events:auto恢復子元素接收事件, 才能點擊與捲動選單 -->
-                    <WPanelScrolly
-                        :style="`width:${panelItemsIconSize}px; height:${panelItemsHeight}px; pointer-events:auto;`"
-                        :bar-opacity="0"
-                        :bar-opacity-hover="0.8"
-                    >
-
-                        <WGroupIconCheck
-                            :items="useItems"
-                            :dir="'vertical'"
-                            :iconColor="'#aaa'"
-                            :iconColorHover="'#ccc'"
-                            :iconColorFocus="'#ccc'"
-                            :iconColorActive="'#fff'"
-                            :backgroundColor="'#000'"
-                            :backgroundColorHover="'#111'"
-                            :backgroundColorFocus="'#111'"
-                            :backgroundColorActive="'#444'"
-                            :seplineColor="'#333'"
-                            :tooltipTextFontSize="'0.7rem'"
-                            :value="itemsSelects"
-                            _input="updateItem"
-                            @click="ckItem"
-                        ></WGroupIconCheck>
-
-                    </WPanelScrolly>
-
-                    <template v-if="useLegend">
-
-                        <div :style="`padding-left:${space}px;`"></div>
-
-                        <!-- 圖例區 -->
-                        <!-- 須使用pointer-events:none吃掉事件, 才能點擊選單區透明區域 -->
-                        <div :style="`padding:5px; border-radius:4px; background:${useLegendBackgroundColor}; pointer-events:auto;`">
-                            <div :style="`${useLegendHeight}`">
-
-                                <div
-                                    :style="``"
-                                    :key="'km-'+km"
-                                    v-for="(m,km) in meshs"
-                                >
-
-                                    <div style="display:flex; align-items:center; padding:3px;">
-
-                                        <WIcon
-                                            style="cursor:pointer;"
-                                            :icon="m.visible?mdiEyeOutline:mdiEyeOffOutline"
-                                            :color="'#ccc'"
-                                            :colorHover="'#ddd'"
-                                            :size="20"
-                                            @click="toggleMeshVisible(m,km)"
-                                        ></WIcon>
-
-                                        <div style="padding-left:5px;"></div>
-
-                                        <WColorSelect
-                                            :colorBlockBorderColor="'#888'"
-                                            :showColorText="false"
-                                            _colorTextColor="'#ddd'"
-                                            :panelBackgroundColor="'#111'"
-                                            :toolBackgroundColor="'#222'"
-                                            :menuIconColor="'#666'"
-                                            :menuIconColorHover="'#777'"
-                                            :menuIconColorActive="'#ddd'"
-                                            :borderColor="'#333'"
-                                            :borderColorHover="'#333'"
-                                            :borderColorActive="'#444'"
-                                            :backgroundColor="'#111'"
-                                            :menuBackgroundColor="'#111'"
-                                            :menuBackgroundColorHover="'#222'"
-                                            :menuBackgroundColorActive="'#333'"
-                                            :menuTextColor="'#b2b2b2'"
-                                            :menuTextColorHover="'#ccc'"
-                                            :menuTextColorActive="'#ddd'"
-                                            :menuTextFontSize="'0.75rem'"
-                                            :inputBorderColor="'#444'"
-                                            :inputBorderColorHover="'#555'"
-                                            :inputBorderColorActive="'#666'"
-                                            :inputBackgroundColor="'#000'"
-                                            :inputBackgroundColorHover="'#111'"
-                                            :inputBackgroundColorActive="'#222'"
-                                            :inputTextColor="'#999'"
-                                            :inputLabelColor="'#888'"
-                                            :barProgColor="'#888'"
-                                            :barProgBackgroundColor="'#222'"
-                                            :barSliderBackgroundColor="'#ccc'"
-                                            :barSliderBackgroundColorHover="'#ddd'"
-                                            :btnTextColor="'#eee'"
-                                            :btnTextColorHover="'#fff'"
-                                            :btnTextColorActive="'#fff'"
-                                            :btnBackgroundColor="'#444'"
-                                            :btnBackgroundColorHover="'#555'"
-                                            :btnBackgroundColorActive="'#555'"
-                                            :value="getMeshColor(m)"
-                                            @input="(c)=>{setMeshColor(m,km,c)}"
-                                        ></WColorSelect>
-
-                                        <div style="padding-left:5px;"></div>
-
-                                        <div :style="`color:${m.labelTextColor}; font-size:${m.labelTextFontSize}; font-family:${m.labelTextFontFamily};`">
-                                            {{m.labelText}}
-                                        </div>
-
+    <div
+        :style="`position:relative; width:${widthInp}px; height:${heightInp}px;`"
+        :loading="loading"
+    >
+
+        <!-- 圖台區 -->
+        <div
+            ref="panel"
+            :style="`width:${widthInp}px; height:${heightInp}px; opacity:${loading?0:1};`"
+            v-domresize
+            @domresize="resizePanel"
+        ></div>
+
+        <!-- 輔助區 -->
+        <!-- 須使用pointer-events:none吃掉事件, 才能點擊選單區透明區域 -->
+        <div
+            :style="`position:absolute; top:0px; left:0px; pointer-events:none;`"
+            v-if="!loading"
+        >
+
+            <div :style="`padding:${space+menuYShiftInp}px ${space}px ${space}px ${space}px; display:flex; align-items:flex-start;`">
+
+                <!-- 設定區 -->
+                <!-- 須使用pointer-events:auto恢復子元素接收事件, 才能點擊與捲動選單 -->
+                <WPanelScrolly
+                    :style="`width:${panelItemsIconSize}px; height:${panelItemsHeight}px; pointer-events:auto;`"
+                    :bar-opacity="0"
+                    :bar-opacity-hover="0.8"
+                >
+
+                    <WGroupIconCheck
+                        :items="useItems"
+                        :dir="'vertical'"
+                        :iconColor="'#aaa'"
+                        :iconColorHover="'#ccc'"
+                        :iconColorFocus="'#ccc'"
+                        :iconColorActive="'#fff'"
+                        :backgroundColor="'#000'"
+                        :backgroundColorHover="'#111'"
+                        :backgroundColorFocus="'#111'"
+                        :backgroundColorActive="'#444'"
+                        :seplineColor="'#333'"
+                        :tooltipTextFontSize="'0.7rem'"
+                        :value="itemsSelects"
+                        _input="updateItem"
+                        @click="ckItem"
+                    ></WGroupIconCheck>
+
+                </WPanelScrolly>
+
+                <template v-if="useLegend">
+
+                    <div :style="`padding-left:${space}px;`"></div>
+
+                    <!-- 圖例區 -->
+                    <!-- 須使用pointer-events:none吃掉事件, 才能點擊選單區透明區域 -->
+                    <div :style="`padding:5px; border-radius:4px; background:${useLegendBackgroundColor}; pointer-events:auto;`">
+                        <div :style="`${useLegendHeight}`">
+
+                            <div
+                                :style="``"
+                                :key="'km-'+km"
+                                v-for="(m,km) in meshs"
+                            >
+
+                                <div style="display:flex; align-items:center; padding:3px;">
+
+                                    <WIcon
+                                        style="cursor:pointer;"
+                                        :icon="m.visible?mdiEyeOutline:mdiEyeOffOutline"
+                                        :color="'#ccc'"
+                                        :colorHover="'#ddd'"
+                                        :size="20"
+                                        @click="toggleMeshVisible(m,km)"
+                                    ></WIcon>
+
+                                    <div style="padding-left:5px;"></div>
+
+                                    <WColorSelect
+                                        :colorBlockBorderColor="'#888'"
+                                        :showColorText="false"
+                                        _colorTextColor="'#ddd'"
+                                        :panelBackgroundColor="'#111'"
+                                        :toolBackgroundColor="'#222'"
+                                        :menuIconColor="'#666'"
+                                        :menuIconColorHover="'#777'"
+                                        :menuIconColorActive="'#ddd'"
+                                        :borderColor="'#333'"
+                                        :borderColorHover="'#333'"
+                                        :borderColorActive="'#444'"
+                                        :backgroundColor="'#111'"
+                                        :menuBackgroundColor="'#111'"
+                                        :menuBackgroundColorHover="'#222'"
+                                        :menuBackgroundColorActive="'#333'"
+                                        :menuTextColor="'#b2b2b2'"
+                                        :menuTextColorHover="'#ccc'"
+                                        :menuTextColorActive="'#ddd'"
+                                        :menuTextFontSize="'0.75rem'"
+                                        :inputBorderColor="'#444'"
+                                        :inputBorderColorHover="'#555'"
+                                        :inputBorderColorActive="'#666'"
+                                        :inputBackgroundColor="'#000'"
+                                        :inputBackgroundColorHover="'#111'"
+                                        :inputBackgroundColorActive="'#222'"
+                                        :inputTextColor="'#999'"
+                                        :inputLabelColor="'#888'"
+                                        :barProgColor="'#888'"
+                                        :barProgBackgroundColor="'#222'"
+                                        :barSliderBackgroundColor="'#ccc'"
+                                        :barSliderBackgroundColorHover="'#ddd'"
+                                        :btnTextColor="'#eee'"
+                                        :btnTextColorHover="'#fff'"
+                                        :btnTextColorActive="'#fff'"
+                                        :btnBackgroundColor="'#444'"
+                                        :btnBackgroundColorHover="'#555'"
+                                        :btnBackgroundColorActive="'#555'"
+                                        :value="getMeshColor(m)"
+                                        @input="(c)=>{setMeshColor(m,km,c)}"
+                                    ></WColorSelect>
+
+                                    <div style="padding-left:5px;"></div>
+
+                                    <div :style="`color:${m.labelTextColor}; font-size:${m.labelTextFontSize}; font-family:${m.labelTextFontFamily};`">
+                                        {{m.labelText}}
                                     </div>
 
                                 </div>
 
                             </div>
-                        </div>
 
-                    </template>
+                        </div>
+                    </div>
 
-                </div>
+                </template>
 
             </div>
 
@@ -172,7 +167,6 @@ import strleft from 'wsemi/src/strleft.mjs'
 import strdelleft from 'wsemi/src/strdelleft.mjs'
 import oc from 'wsemi/src/color.mjs'
 import domResize from 'w-component-vue/src/js/domResize.mjs'
-import WIconLoading from 'w-component-vue/src/components/WIconLoading.vue'
 import WPanelScrolly from 'w-component-vue/src/components/WPanelScrolly.vue'
 import WGroupIconCheck from 'w-component-vue/src/components/WGroupIconCheck.vue'
 import WIcon from 'w-component-vue/src/components/WIcon.vue'
@@ -273,6 +267,7 @@ let pathYZ = `M 22.049294,18.372083 H 12.678108 V 17.831045 L 20.097742,6.740768
  * @vue-prop {Number} [opt.cameraOrthographicRatio] 輸入正交相機比例數字
  * @vue-prop {Number} [opt.cameraAzimuthAngle] 輸入相機方位角(水平角度)數字，因可通過UI改變導致Vue無法監聽變數有變而觸發computed，故建議直接使用setCameraAzimuthAngle變更
  * @vue-prop {Number} [opt.cameraPolarAngle] 輸入相機極角(垂直角度)數字，因可通過UI改變導致Vue無法監聯變數有變而觸發computed，故建議直接使用setCameraPolarAngle變更
+ * @vue-prop {Number} [opt.menuYShift=0] 輸入選單區域頂部位移數字，單位px，正值向下移動，預設0
  * @vue-prop {Boolean} [opt.useSetting=true] 輸入是否顯示設定選單布林值，預設true
  * @vue-prop {String} [opt.menuSettingIcon] 輸入設定選單圖示SVG path字串，預設mdiCogOutline
  * @vue-prop {String} [opt.menuSettingTooltip='Settings'] 輸入設定選單tooltip文字字串，預設'Settings'
@@ -313,7 +308,6 @@ export default {
         domresize: domResize(),
     },
     components: {
-        WIconLoading,
         WPanelScrolly,
         WGroupIconCheck,
         WIcon,
@@ -451,6 +445,21 @@ export default {
             return h
         },
 
+        menuYShiftInp: function() {
+            //console.log('computed menuYShiftInp')
+
+            let vo = this
+
+            //y
+            let y = get(vo, 'opt.menuYShift', null)
+            if (!isnum(y)) {
+                y = 0
+            }
+            y = cdbl(y)
+
+            return y
+        },
+
         useMenuItemHelperAxesInp: function() {
             //console.log('computed useMenuItemHelperAxesInp')
 
@@ -1018,8 +1027,9 @@ export default {
                     return
                 }
 
-                //show loading
+                //show and emit loading
                 vo.loading = true
+                vo.$emit('loading', true)
 
                 //optPlot3d
                 let optUsed = cloneDeep(vo.opt)
@@ -1077,8 +1087,9 @@ export default {
                     //save applied opt
                     vo.optTemp = cloneDeep(optUsed)
 
-                    //hide loading
+                    //hide and emit loading
                     vo.loading = false
+                    vo.$emit('loading', false)
 
                     //resolveInit
                     resolveInit()
@@ -1095,8 +1106,9 @@ export default {
                     }
                     // console.log('error', err)
 
-                    //reset
+                    //reset and emit loading
                     vo.loading = false
+                    vo.$emit('loading', false)
 
                     //emit
                     vo.$emit('error', err)
@@ -1108,12 +1120,12 @@ export default {
 
                 //on
                 ev.on('init', handleInit)
-                ev.on('loading', (msg) => {
+                ev.on('prog', (msg) => {
                     if (vo.disposed || nid !== vo.nidInit) {
                         return
                     }
-                    // console.log('loading', msg)
-                    vo.$emit('loading', msg)
+                    // console.log('prog', msg)
+                    vo.$emit('prog', msg)
                 })
                 ev.on('error', handleError)
                 ev.on('dispose', () => {
@@ -1174,8 +1186,9 @@ export default {
                         return
                     }
 
-                    //reset
+                    //reset and emit loading
                     vo.loading = false
+                    vo.$emit('loading', false)
 
                     //emit
                     vo.$emit('error', err)

package/src/js/addStl.mjs

@@ -1,5 +1,5 @@
-import get from 'lodash-es/get.js'
-import isNumber from 'lodash-es/isNumber.js'
+import get from 'lodash-es/get.js'
+import isNumber from 'lodash-es/isNumber.js'
 import isestr from 'wsemi/src/isestr.mjs'
 // import genPm from 'wsemi/src/genPm.mjs'
 import oc from 'wsemi/src/color.mjs'
@@ -28,13 +28,17 @@ let addStl = async(ev, url, opt = {}) => {
 
     //loader
     let loader = new STLLoader()
-    let geometry = await loader.loadAsync(url, (xhr) => {
-        let prog = (xhr.loaded / xhr.total) * 100
-        ev.emit('loading', {
-            url,
-            prog,
-        })
-    })
+    let geometry = await loader.loadAsync(url, (xhr) => {
+        let loaded = xhr.loaded || 0
+        let total = xhr.total || 0
+        let prog = total > 0 ? (loaded / total) * 100 : null
+        ev.emit('prog', {
+            url,
+            loaded,
+            total,
+            prog,
+        })
+    })
     // let lad = (url) => {
     //     let pm = genPm()
     //     let onLoad = (res) => {
@@ -56,15 +60,15 @@ let addStl = async(ev, url, opt = {}) => {
     //     loader.load(url, onLoad, onProgress, onError)
     //     return pm
     // }
-    // let geometry = await lad(url)
-    // console.log('geometry', geometry)
-
-    // STLLoader 不保證後續流程需要的 bounding 資訊已存在，這裡先補齊。
-    geometry.computeBoundingBox()
-    geometry.computeBoundingSphere()
-
-    //material, MeshLambertMaterial, MeshPhysicalMaterial
-    let material = new THREE.MeshLambertMaterial({
+    // let geometry = await lad(url)
+    // console.log('geometry', geometry)
+
+    // STLLoader 不保證後續流程需要的 bounding 資訊已存在，這裡先補齊。
+    geometry.computeBoundingBox()
+    geometry.computeBoundingSphere()
+
+    //material, MeshLambertMaterial, MeshPhysicalMaterial
+    let material = new THREE.MeshLambertMaterial({
 
         // visible:false,
 

package/src/js/addVtp.mjs

@@ -29,7 +29,7 @@ let addVtp = async(ev, url, opt = {}) => {
 
     let polyData = await loadVtpAsPolyData(url, {
         onProgress: (msg) => {
-            ev.emit('loading', msg)
+            ev.emit('prog', msg)
         },
     })