@shijiu/jsview-vue 0.9.502 → 0.9.631

package/samples/VideoDemo/components/VideoFrame.vue

@@ -1,121 +1,109 @@
-<script>
-import { inject, watch } from 'vue'
-import { Options, Vue } from "vue-class-component";
-import JsvVideo from "jsview/utils/JsViewVueWidget/JsvVideo.vue"
-
-@Options({
-  components: {
-    JsvVideo
+<script setup>
+import { inject, watch, onMounted } from "vue";
+import { JsvVideo } from "jsview";
+
+const useTexture = inject("useTexture");
+const objectFit = inject("objectFit");
+const videoRect = inject("videoRect");
+const playVideo = inject("playVideo");
+const seekVideo = inject("seekVideo");
+const enableAnimation = inject("enableAnimation");
+const videoTime = inject("videoTime");
+const playStatus = inject("playStatus");
+const videoUrl =
+  "http://qcast-image.oss-cn-qingdao.aliyuncs.com/homepage/20190726/4cc4e6a8fd7d9d9c707ed4c4da27ca9d.mp4";
+const canAutoPlay = !window.jsvIsBrowserDebug; // jsview自动播放该视频 TODO h5需做相应调整
+const rect = {
+  top: 50,
+  left: 40,
+  width: 1200,
+  height: 500,
+};
+let video = null;
+
+const onVideoRef = (ele) => {
+  video = ele;
+};
+
+const setPlayState = (play) => {
+  if (play) {
+    video?.play();
+  } else {
+    video?.pause();
   }
-})
-
-class VideoFrame extends Vue {
-  constructor(props) {
-    super(props);
-    this.useTexture = inject('useTexture');
-    this.objectFit = inject('objectFit');
-    this.videoRect = inject('videoRect');
-    this.playVideo = inject('playVideo');
-    this.seekVideo = inject('seekVideo');
-    this.enableAnimation = inject('enableAnimation');
-    this.videoTime = inject('videoTime');
-    this.playStatus = inject('playStatus')
-    watch(this.playVideo, this.setPlayState.bind(this));
-    watch(this.seekVideo, this.seekVideoStep.bind(this));
-
-    this.videoUrl = "http://qcast-image.oss-cn-qingdao.aliyuncs.com/homepage/20190726/4cc4e6a8fd7d9d9c707ed4c4da27ca9d.mp4";
-    this.canAutoPlay = !window.jsvIsBrowserDebug; // jsview自动播放该视频 TODO h5需做相应调整
-
-    this.video = null;
-
-    this.rect = {
-      top: 50, left: 40,
-      width: 1200, height: 500,
+};
+
+const seekVideoStep = (time) => {
+  if (video) {
+    let playEnd = false;
+    let seekTime = video.currentTime + Math.ceil(time);
+    if (seekTime < 0) {
+      seekTime = 0;
+    } else if (seekTime > videoTime.duration) {
+      seekTime = videoTime.duration;
+      if (video.currentTime != videoTime.duration) {
+        // 触发一次播放，收到ended事件
+        playEnd = true;
+      }
     }
-
-    this.textureAnim = null;
-  }
-
-  mounted() {
-    if(this.canAutoPlay) {
-      this.playVideo = true;
+    video.currentTime = seekTime;
+    if (playEnd) {
+      this.setPlayState(true);
     }
   }
-
-  onVideoRef(ele) {
-    this.video = ele;
+};
+
+const onPlayStateChange = (event) => {
+  console.log("VideoFrame.onPlayStateChangeEvent()", event);
+  playVideo.value = event.type === "play" ? true : false;
+  if (!(playStatus.value == "ended" && event.type == "pause")) {
+    // 忽略播放结束后的pause事件
+    playStatus.value = event.type;
   }
+};
 
-  setPlayState(play) {
-    if(play) {
-      this.video?.play();
-    } else {
-      this.video?.pause();
-    }
-  }
+const onTimeUpdate = (event) => {
+  console.log("VideoFrame.onTimeUpdateEvent()", event);
+  videoTime.currentTime = video.currentTime;
+};
 
-  seekVideoStep(time) {
-    if(this.video) {
-      let playEnd = false;
-      let seekTime = this.video.currentTime + Math.ceil(time);
-      if(seekTime < 0) {
-        seekTime = 0;
-      } else if(seekTime > this.videoTime.duration) {
-        seekTime = this.videoTime.duration;
-        if(this.video.currentTime != this.videoTime.duration) { // 触发一次播放，收到ended事件
-          playEnd = true;
-        }
-      }
-      this.video.currentTime = seekTime;
-      if(playEnd) {
-        this.setPlayState(true);
-      }
-    }
-  }
+const onDurationChange = (event) => {
+  console.log("VideoFrame.onDurationChangeEvent()", event);
+  videoTime.duration = video.duration;
+};
 
-  onPlayStateChange(event) {
-    console.log("VideoFrame.onPlayStateChangeEvent()", event);
-    this.playVideo = (event.type === 'play' ? true : false);
-    if(!(this.playStatus == 'ended' && event.type == 'pause')) { // 忽略播放结束后的pause事件
-      this.playStatus = event.type;
-    }
-  }
+const onEvent = (event) => {
+  console.log("VideoFrame.onEvent()", event);
+};
 
-  onTimeUpdate(event) {
-    console.log("VideoFrame.onTimeUpdateEvent()", event);
-    this.videoTime.currentTime = this.video.currentTime;
-  }
-
-  onDurationChange(event) {
-    console.log("VideoFrame.onDurationChangeEvent()", event);
-    this.videoTime.duration = this.video.duration;
-  }
+watch(playVideo, setPlayState);
+watch(seekVideo, seekVideoStep);
 
-  onEvent(event) {
-    console.log("VideoFrame.onEvent()", event);
+onMounted(() => {
+  if (canAutoPlay) {
+    playVideo.value = true;
   }
-}
-
-export default VideoFrame;
+});
 </script>
 
 <template>
-<div>
-  <div
+  <div>
+    <div
       :style="{
         ...videoRect,
-        backgroundColor: 'rgb(200,100,100)'
+        backgroundColor: 'rgb(200,100,100)',
       }"
-  />
-  <JsvVideo
+    ></div>
+    <JsvVideo
       :onRef="onVideoRef"
       :useTexture="useTexture"
       :src="videoUrl"
-      :autoplay="canAutoPlay ? 'autoplay' : undefined" 
+      :autoplay="canAutoPlay ? 'autoplay' : undefined"
       :style="{
         ...videoRect,
         objectFit: objectFit,
-        animation: (useTexture&&enableAnimation ? 'offscreenAnim 3s infinite' : null),
+        animation:
+          useTexture && enableAnimation ? 'offscreenAnim 3s infinite' : null,
         borderRadius: '80px 80px 160px 240px',
       }"
       :onCanPlay="onEvent"
@@ -134,18 +122,18 @@ export default VideoFrame;
       :onSeeked="onTimeUpdate"
       :onStalled="onEvent"
       :onTimeUpdate="onTimeUpdate"
-  />
-</div>
+    />
+  </div>
 </template>
 
 <style scoped>
 @keyframes offscreenAnim {
   from {
-    transform:scale3d(1, 1, 1) rotate3d(0, 0, 1, -360deg);
+    transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -360deg);
     transform-origin: center center;
   }
   to {
-    transform:scale3d(0.4, 0.4, 0) rotate3d(0, 0, 1, 0);
+    transform: scale3d(0.4, 0.4, 0) rotate3d(0, 0, 1, 0);
     transform-origin: center center;
   }
 }

package/samples/VisibleSensorDemo/App.vue

@@ -0,0 +1,234 @@
+<script setup>
+import { watch, reactive, onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
+import { jJsvRuntimeBridge, JsvVisibleSensor } from "jsview";
+
+const BOX_WIDTH = 150;
+const BOX_HEIGHT = 150;
+const BOX_COLOR = "rgba(0,255,255,0.6)";
+const VISIBLE_RANGE = 0.25;
+
+const router = useRouter();
+
+const containerRef = ref(null);
+let case_config = ref(null);
+let status_text = reactive({
+  oldH: "false",
+  newH: "false",
+  oldV: "false",
+  newV: "false",
+});
+
+let test_case_type = ref(0);
+
+window.LudlTestCase = test_case_type;
+
+case_config.value = getTestCase(test_case_type.value);
+
+watch(test_case_type, () => {
+  case_config.value = getTestCase(test_case_type.value);
+});
+
+onMounted(() => {
+  jJsvRuntimeBridge.notifyPageLoaded();
+});
+
+// const onAnimDone = () => {
+//   test_case_type.value = (test_case_type.value + 1) % 2;
+// };
+
+// 内部接口
+const onBeVisible = (old_h, new_h, old_v, new_v) => {
+  status_text.oldH = old_h ? "true" : "false";
+  status_text.newH = new_h ? "true" : "false";
+  status_text.oldV = old_v ? "true" : "false";
+  status_text.newV = new_v ? "true" : "false";
+};
+
+const onKeyDown = (ev) => {
+  // 8:Backspace, 27:Escape, 10000:盒子返回键
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router?.go(-1); // 有router时，回退
+    return true;
+  }
+  if (ev.keyCode == 13) {
+    test_case_type.value = (test_case_type.value + 1) % 2;
+  }
+  return false;
+};
+
+function getTestCase(test_index) {
+  let test_config = {
+    animation: null,
+    text: null,
+    horizon: 1.0,
+    vertical: 1.0,
+  };
+
+  switch (test_index) {
+    case 0: {
+      // 上到下
+      test_config.animation = "visibleSensor_upDown 8s infinite linear";
+      test_config.text = "从上到下";
+      test_config.horizon = 1.0;
+      test_config.vertical = VISIBLE_RANGE;
+      break;
+    }
+    case 1: {
+      // 左到右
+      test_config.animation = "visibleSensor_leftRight 8s infinite linear";
+      test_config.text = "从左到右";
+      test_config.horizon = VISIBLE_RANGE;
+      test_config.vertical = 1.0;
+      break;
+    }
+  }
+
+  return test_config;
+}
+</script>
+
+<template>
+  <jsv-focus-block autoFocus :onKeyDown="onKeyDown">
+    <div :style="{ width: 1280, height: 720, backgroundColor: '#00F000' }">
+      <div
+        :style="{
+          left: 10,
+          top: 10,
+          height: 120,
+          width: 900,
+          fontColor: '#000000',
+          fontSize: 15,
+          lineHeight: 20,
+        }"
+      >
+        {{
+          `按OK键切换方向
+new horizon: ${status_text.newH}
+new vertical: ${status_text.newV}
+-------
+old horizon: ${status_text.oldH}
+old vertical: ${status_text.oldV}`
+        }}
+      </div>
+      <div
+        ref="containerRef"
+        :style="{
+          left: 240,
+          top: 180,
+          width: 300,
+          height: 300,
+          backgroundColor: '#00F0F0',
+        }"
+      >
+        <div
+          :style="{
+            left: 50,
+            top: 50,
+            width: 200,
+            height: 200,
+            backgroundColor: '#00AAAA',
+            zIndex: test_case_type == 0 ? -22 : 0,
+          }"
+        />
+
+        <div
+          :style="{
+            left: 80,
+            top: 30,
+            width: 140,
+            height: 240,
+            backgroundColor: '#0000AA',
+            zIndex: test_case_type == 0 ? -33 : 0,
+          }"
+        />
+
+        <div
+          :style="{
+            left: 0,
+            top: 0,
+            animation: case_config.animation,
+          }"
+        >
+          <JsvVisibleSensor
+            :horizonShown="case_config.horizon"
+            :verticalShown="case_config.vertical"
+            :width="BOX_WIDTH"
+            :height="BOX_HEIGHT"
+            :enable="true"
+            :container="containerRef"
+            :callback="onBeVisible"
+          >
+            <div v-if="test_case_type == 0">
+              <div
+                :style="{
+                  width: BOX_WIDTH,
+                  height: BOX_HEIGHT * VISIBLE_RANGE,
+                  backgroundColor: '#FF0000',
+                }"
+              />
+              <div
+                :style="{
+                  top: BOX_HEIGHT * (1 - VISIBLE_RANGE),
+                  width: BOX_WIDTH,
+                  height: BOX_HEIGHT * VISIBLE_RANGE,
+                  backgroundColor: '#FF0000',
+                }"
+              />
+            </div>
+            <div v-else>
+              <div
+                :style="{
+                  width: BOX_WIDTH * VISIBLE_RANGE,
+                  height: BOX_HEIGHT,
+                  backgroundColor: '#FF0000',
+                }"
+              />
+              <div
+                :style="{
+                  left: BOX_WIDTH * (1 - VISIBLE_RANGE),
+                  width: BOX_WIDTH * VISIBLE_RANGE,
+                  height: BOX_HEIGHT,
+                  backgroundColor: '#FF0000',
+                }"
+              />
+            </div>
+            <div
+              :style="{
+                width: BOX_WIDTH,
+                height: BOX_HEIGHT,
+                backgroundColor: BOX_COLOR,
+                fontSize: 20,
+                lineHeight: 30,
+              }"
+            >
+              {{
+                `${case_config.text}\nH:${status_text.newH}\nV:${status_text.newV}`
+              }}
+            </div>
+          </JsvVisibleSensor>
+        </div>
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style scoped>
+@keyframes visibleSensor_upDown {
+  from {
+    transform: translate3d(75px, -180px, 0);
+  }
+  to {
+    transform: translate3d(75px, 330px, 0);
+  }
+}
+
+@keyframes visibleSensor_leftRight {
+  from {
+    transform: translate3d(-180px, 75px, 0);
+  }
+  to {
+    transform: translate3d(330px, 75px, 0);
+  }
+}
+</style>

package/scripts/jsview-jsmap-serve.js

@@ -6,10 +6,37 @@ const os = require('os');
 
 let baseDir = __dirname;
 
+let script_name = __filename.substr(__dirname.length + 1)
+
+let redirect_url;
+if (process.argv.length >= 2) {
+  let args_start = 0;
+  for (let i = 0; i < process.argv.length; i++) {
+    if (process.argv[i].endsWith(script_name)) {
+      args_start = i + 1;
+      break;
+    }
+  }
+  const args = process.argv.slice(args_start)
+  redirect_url = args[0]
+  if (!redirect_url.endsWith('/')) {
+    redirect_url = redirect_url + '/';
+  }
+}
+
 function requestListener(req, res) {
   console.log("[request] " + req.url);
 
   if (req.url.endsWith("\.map")) { // return map source file content
+    if (redirect_url) {
+      // redirect with 302 HTTP code in response
+      let redirect_target = redirect_url
+          + convertMapBaseUrl(req.url)
+      console.log(`redirect ${req.url} -> ${redirect_target}`)
+      res.writeHead(302, { "Location": redirect_target });
+      return res.end();
+    }
+
     try {
       const fileContent = fs.readFileSync(baseDir + '/' + req.url);
 
@@ -26,6 +53,18 @@ function requestListener(req, res) {
   res.end();
 };
 
+function convertMapBaseUrl(origin_url) {
+  if (origin_url.startsWith('/map/')) {
+    /* 去掉子目录/map/ */
+    return origin_url.substr(5); 
+  } else if (origin_url.startsWith('/')) {
+    /* 去掉'/' */
+    return origin_url.substring(1, origin_url.length);
+  } else {
+    return origin_url;
+  }
+}
+
 function getIPAddress() {
   let ret = [];
 
@@ -52,6 +91,9 @@ function main() {
   server.listen(port, '0.0.0.0', () => {
     console.log('');
     console.log('JavaScript source map running at:');
+    if (redirect_url) {
+      console.log('with redirect url=' + redirect_url)
+    }
     console.log(' - Local:   localhost:' + port);
     getIPAddress().forEach(ip => {
       console.log(' - Network: ' + ip + ':' + port);

package/scripts/jsview-post-install.js

@@ -53,7 +53,7 @@ async function printRevision(options) {
 
   console.log('**************************************************');
   console.log('* Update revision to:');
-  console.log('* CORE: ' + jsviewTargetVersion.CoreRevision);
+  console.log('* CORE: ' + jsviewTargetVersion.CoreRevisionAndBranch);
   console.log('* ENGINE JS URL: ' + jsviewTargetVersion.JseUrl);
   console.log('* PLUGIN LIST: ');
 

package/tsconfig.json

@@ -22,6 +22,9 @@
       ],
       "jsview/*": [
         "./*"
+      ],
+      "jsview": [
+        "./index.js"
       ]
     },
     "lib": [