@shijiu/jsview-vue 0.0.1-beta.0

package/utils/JsViewVueWidget/BrowserDebugWidget/JsvApic/PartLoopTool.js

@@ -0,0 +1,119 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2021-10-13 14:01:36
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-13 16:17:46
+ * @Description: file content
+ */
+import LoopToolBase from "./LoopToolBase";
+
+class PartLoopTool extends LoopToolBase {
+  constructor(info_list, frame_num) {
+    super();
+    if (info_list == null) {
+      console.error("PartLoopTool info is null.");
+      this.mDataError = true;
+      return;
+    }
+    this.mLoopPeriod = 0;
+    this.mFrameIndex = 0;
+
+    this.mCurLoopStartFrame = 0;
+    this.mCurLoopEndFrame = 0;
+    this.mCurLoopNum = 0;
+    this.mCurLoopCount = 0;
+
+    this.mDataError = false;
+    this.mFrameNum = frame_num;
+    this.mLoopInfo = info_list;
+    if (this.mLoopInfo.length > 0) {
+      let has_next = this.updateLoop();
+      if (!has_next) {
+        console.error("PartLoopTool init loop info error.", info_list);
+        this.mDataError = true;
+      }
+    } else {
+      console.error("PartLoopTool init loop info error.", info_list);
+      this.mDataError = true;
+    }
+  }
+
+  getNextIndex() {
+    if (this.mDataError) {
+      return -1;
+    }
+    let next_index = -1;
+    let loop_period_num = this.mLoopInfo.length;
+    if (this.mLoopPeriod < loop_period_num) {
+      if (this.mFrameIndex < this.mCurLoopEndFrame) {
+        next_index = this.mFrameIndex + 1;
+      } else {
+        if (this.mCurLoopNum <= 0) {
+          //无限循环
+          next_index = this.mCurLoopStartFrame;
+        } else {
+          this.mCurLoopCount++;
+          if (this.mCurLoopCount >= this.mCurLoopNum) {
+            //出当前循环更新循环信息
+            this.mLoopPeriod++;
+            if (this.mLoopPeriod < loop_period_num) {
+              let has_next = this.updateLoop();
+              if (has_next) {
+                this.mCurLoopCount = 0;
+                next_index = this.mFrameIndex + 1;
+              }
+            } else {
+              //所有循环已完成
+              if (this.mFrameIndex < this.mFrameNum - 1) {
+                next_index = this.mFrameIndex + 1;
+              }
+            }
+          } else {
+            next_index = this.mCurLoopStartFrame;
+          }
+        }
+      }
+    } else {
+      //所有循环已完成
+      if (this.mFrameIndex < this.mFrameNum - 1) {
+        next_index = this.mFrameIndex + 1;
+      }
+    }
+
+    if (next_index >= 0) {
+      this.mFrameIndex = next_index;
+    }
+    return next_index;
+  }
+
+  updateLoop() {
+    let loop = this.mLoopInfo[this.mLoopPeriod];
+    this.mCurLoopNum = loop[0];
+    this.mCurLoopStartFrame = loop[1];
+    this.mCurLoopEndFrame = loop[2];
+    if (
+      this.mCurLoopStartFrame >= this.mFrameNum ||
+      this.mCurLoopEndFrame >= this.mFrameNum
+    ) {
+      this.mDataError = true;
+      console.error("data error, frame number out of size.", this.mLoopInfo);
+      this.reset();
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  reset() {
+    this.mLoopPeriod = 0;
+    this.mFrameIndex = 0;
+    this.mCurLoopCount = 0;
+
+    let loop = this.mLoopInfo[this.mLoopPeriod];
+    this.mCurLoopNum = loop[0];
+    this.mCurLoopStartFrame = loop[1];
+    this.mCurLoopEndFrame = loop[2];
+  }
+}
+
+export default PartLoopTool;

package/utils/JsViewVueWidget/BrowserDebugWidget/JsvApic/Viewer.js

@@ -0,0 +1,106 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2021-10-13 14:01:45
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-13 17:09:17
+ * @Description: file content
+ */
+
+import { LoopType } from "./LoopToolBase";
+import PartLoopTool from "./PartLoopTool";
+import NormalLoopTool from "./NormalLoopTool";
+
+class Viewer {
+  constructor(
+    apic_data,
+    canvas,
+    listener,
+    auto_play,
+    loop_type,
+    loop_info_list
+  ) {
+    this._ApicData = apic_data;
+    this._Canvas = canvas;
+    this._Context = this._Canvas.getContext("2d");
+    this._Listener = listener;
+    this._TimeoutId = -1;
+
+    this._LoopType = loop_type;
+    this._LoopInfo = loop_info_list;
+    this._createLoopTool();
+    let duration = this.renderFrame(0);
+    if (auto_play) {
+      this._TimeoutId = setTimeout(() => {
+        this.renderLoop();
+      }, duration);
+      if (this._Listener?.onstart) {
+        this._Listener.onstart();
+      }
+    }
+  }
+
+  _createLoopTool() {
+    let loop_num = null;
+    switch (this._LoopType) {
+      case LoopType.LOOP_DEFAULT:
+      case LoopType.LOOP_INFINITE:
+      case LoopType.LOOP_FINITE:
+        loop_num =
+          this._LoopType == LoopType.LOOP_DEFAULT
+            ? this._ApicData.LoopCount
+            : this._LoopInfo[0][0];
+        this._LoopTool = new NormalLoopTool(
+          this._LoopType,
+          loop_num,
+          this._ApicData.FrameCount
+        );
+        break;
+      case LoopType.LOOP_PART:
+        this._LoopTool = new PartLoopTool(
+          this._LoopInfo,
+          this._ApicData.FrameCount
+        );
+        break;
+    }
+  }
+
+  stop() {
+    clearTimeout(this._TimeoutId);
+    if (this._Listener?.onend) {
+      this._Listener.onend();
+    }
+  }
+
+  play() {
+    clearTimeout(this._TimeoutId);
+    let duration = this.renderFrame(0);
+    this._LoopTool.reset();
+    this._TimeoutId = setTimeout(() => {
+      this.renderLoop();
+    }, duration);
+    if (this._Listener?.onstart) {
+      this._Listener.onstart();
+    }
+  }
+
+  renderLoop() {
+    let next_index = this._LoopTool.getNextIndex();
+    if (next_index < 0) {
+      console.log("loop finished");
+      if (this._Listener?.onend) {
+        this._Listener.onend();
+      }
+    } else {
+      let duration = this.renderFrame(next_index);
+      this._TimeoutId = setTimeout(() => {
+        this.renderLoop();
+      }, duration);
+    }
+  }
+
+  renderFrame(frame_index) {
+    return this._ApicData.toImage(frame_index, this._Canvas, this._Context);
+  }
+}
+
+export default Viewer;

package/utils/JsViewVueWidget/BrowserDebugWidget/JsvApic/WebpData.js

@@ -0,0 +1,141 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2021-10-13 14:01:01
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-13 14:10:28
+ * @Description: file content
+ */
+import ApicDataBase from "./ApicDataBase";
+
+class WebpData extends ApicDataBase {
+  decode(array_buffer) {
+    let webp_data = new Uint8Array(array_buffer);
+    let webp_decoder = new window.WebPDecoder();
+    let image_data = window.WebPRiffParser(webp_data, 0);
+
+    let blend = false;
+    let header = image_data["header"] ? image_data["header"] : null;
+    let frames = image_data["frames"] ? image_data["frames"] : null;
+    if (header) {
+      this.LoopCount = header["loop_count"];
+      header["loop_counter"] = header["loop_count"];
+      this._Canvas.height = header["canvas_height"];
+      this._Canvas.width = header["canvas_width"];
+      this.Width = header["canvas_width"];
+      this.Height = header["canvas_height"];
+      for (let f = 0; f < frames.length; f++) {
+        if (frames[f]["blend"] === 0) {
+          blend = true;
+          break;
+        }
+      }
+    }
+    this.FrameCount = frames.length;
+    for (let f = 0; f < frames.length; f++) {
+      let height = [0];
+      let width = [0];
+      let frame = frames[f];
+      let rgba = webp_decoder.WebPDecodeRGBA(
+        webp_data,
+        frame["src_off"],
+        frame["src_size"],
+        width,
+        height
+      );
+      frame["rgba"] = rgba;
+      frame["imgwidth"] = width[0];
+      frame["imgheight"] = height[0];
+
+      let oldimagedata = [];
+      if (!header) {
+        this._Canvas.height = height[0];
+        this._Canvas.width = width[0];
+      } else {
+        if (blend) {
+          let oldimagedata_ = this._Context.getImageData(
+            frame["offset_x"],
+            frame["offset_y"],
+            width[0],
+            height[0]
+          );
+          for (let i = 0; i < width[0] * height[0] * 4; i++) {
+            oldimagedata[i] = oldimagedata_.data[i];
+          }
+        }
+      }
+      let imagedata = this._Context.createImageData(width[0], height[0]);
+
+      if (
+        (frames.length === 1 && typeof frame["blend"] === "undefined") ||
+        frame["blend"] === 1
+      ) {
+        for (let i = 0; i < width[0] * height[0] * 4; i++)
+          imagedata.data[i] = rgba[i];
+      } else {
+        for (let i = 0; i < width[0] * height[0] * 4; i += 4) {
+          if (rgba[i + 3] > 0) {
+            imagedata.data[i + 3] = rgba[i + 3];
+            imagedata.data[i] = rgba[i];
+            imagedata.data[i + 1] = rgba[i + 1];
+            imagedata.data[i + 2] = rgba[i + 2];
+          } else {
+            imagedata.data[i + 3] = oldimagedata[i + 3];
+            imagedata.data[i] = oldimagedata[i];
+            imagedata.data[i + 1] = oldimagedata[i + 1];
+            imagedata.data[i + 2] = oldimagedata[i + 2];
+          }
+        }
+      }
+      if (frames.length === 1) {
+        this._Context.putImageData(imagedata, 0, 0);
+      } else {
+        this._Context.putImageData(
+          imagedata,
+          frame["offset_x"],
+          frame["offset_y"]
+        );
+      }
+
+      frame["frameData"] = frame["rgba"]
+        ? header
+          ? this._Context.getImageData(
+              0,
+              0,
+              header["canvas_width"],
+              header["canvas_height"]
+            ).data
+          : rgba
+        : null;
+      if (frame["dispose"] === 1) {
+        this._Context.clearRect(
+          frame["offset_x"],
+          frame["offset_y"],
+          width[0],
+          height[0]
+        );
+      }
+    }
+    this._DecodedData = image_data;
+  }
+
+  toImage(frame_index, canvas, canvas_ctx) {
+    let frame = this._DecodedData["frames"][frame_index];
+    let width = this._DecodedData["header"]
+      ? this._DecodedData["header"]["canvas_width"]
+      : frame["imgwidth"];
+    let height = this._DecodedData["header"]
+      ? this._DecodedData["header"]["canvas_height"]
+      : frame["imgheight"];
+    canvas.width = width;
+    canvas.height = height;
+    let image_data = canvas_ctx.createImageData(width, height);
+    let frame_data = frame["frameData"];
+    image_data.data.set(frame_data);
+    // for(let i = 0;i < width * height * 4; i++)
+    // 	image_data.data[i] = frame_data[i];
+    canvas_ctx.putImageData(image_data, 0, 0);
+    return frame["duration"];
+  }
+}
+
+export default WebpData;

package/utils/JsViewVueWidget/BrowserDebugWidget/WidgetLoader.js

@@ -0,0 +1,20 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2021-10-13 15:19:49
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-14 18:22:35
+ * @Description: file content
+ */
+import { JsvWidgetWrapperGroup } from "./WidgetWrapper";
+//考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
+import * as BrowserApic from "./JsvApic/BrowserApic.vue";
+import * as BrowserSpray from "./BrowserSpray.vue";
+import * as BrowserPreload from "./BrowserPreload.vue";
+import * as BrowserQrcode from "./BrowserQrcode.vue";
+
+JsvWidgetWrapperGroup.BrowserApic = BrowserApic;
+JsvWidgetWrapperGroup.BrowserSpray = BrowserSpray;
+JsvWidgetWrapperGroup.BrowserPreload = BrowserPreload;
+JsvWidgetWrapperGroup.BrowserQrcode = BrowserQrcode;
+
+// console.log("load browser widgets.");

package/utils/JsViewVueWidget/BrowserDebugWidget/WidgetWrapper.js

@@ -0,0 +1,11 @@
+/**
+ * Created by ludl on 5/13/21.
+ */
+
+if (!window.JsvWidgetWrapperGroup) {
+  window.JsvWidgetWrapperGroup = {};
+}
+
+const wrapper = window.JsvWidgetWrapperGroup;
+
+export { wrapper as JsvWidgetWrapperGroup };

package/utils/JsViewVueWidget/JsvActorMove/ActorControlBase.js

@@ -0,0 +1,204 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2021-10-20 17:01:37
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-21 13:17:11
+ * @Description: file content
+ */
+import { Forge } from "../../../dom/jsv-forge-define";
+
+// JsvSpriteBase comes from JsView React Project
+
+class ActorControlBase {
+  constructor(params_count) {
+    this._Current = new Array(params_count).fill(0);
+    this._Target = new Array(params_count).fill(0);
+    this._ParameterCount = params_count;
+    this._StateIndex = 0; // 0: idle, 1:running
+    this._StateLocked = false;
+    this._StartSwitcher = false;
+    this._StartingParams = null; // 临时存储启动时的参数，启动真正开始后，此缓存就作废
+    this._PausedCallback = null;
+    this._EndCallback = null;
+    this._NextEndCallback = null;
+    this._Token = 0;
+    this._SpriteView = null;
+  }
+
+  start(start_params, end_callback) {
+    // 取消旧的Callback
+    this._NextEndCallback = end_callback;
+    this._EndCallback = null;
+
+    this._StartingParams = start_params;
+    this._StartSwitcher = true;
+    this._StateMachineNext();
+  }
+
+  pause(paused_callback) {
+    // 执行pause动作时，相当于取消start()动作，所以EndCallback同时也应该被取消
+    if (this._EndCallback !== null || this._NextEndCallback !== null) {
+      this._EndCallback = null;
+      this._NextEndCallback = null;
+    }
+
+    // 根据当前状态，已经处于Pause则直接回调，否则发送pause指令
+    if (this._StateIndex === 0) {
+      if (paused_callback) {
+        this._CallbackWithCatch(
+          this._Current,
+          paused_callback,
+          this._StartingParams /* 使用最后一次启动参数作为回调 */
+        );
+      }
+    } else {
+      if (paused_callback) {
+        this._PausedCallback = paused_callback;
+      }
+      this._StateMachineNext();
+    }
+  }
+
+  startFpsTesting() {
+    Forge.sRenderBridge.SetStepFpsSwitch(true);
+  }
+
+  stopFpsTesting() {
+    Forge.sRenderBridge.SetStepFpsSwitch(false);
+  }
+
+  _WrapBuildAnimation(
+    repeat_start_array,
+    current_array,
+    tos_array,
+    start_params
+  ) {
+    console.warn("Should Override", repeat_start_array, current_array, tos_array, start_params);
+  }
+
+  _WrapAddExtraListener(listener, start_params) {
+    console.warn("Should Override", listener, start_params);
+  }
+
+  _WrapCallback(currents, callback, start_params) {
+    console.warn("Should Override", currents, callback, start_params);
+  }
+
+  _WrapReCalculateCurrent(froms, tos, progress, start_params) {
+    console.warn("Should Override", froms, tos, progress, start_params);
+  }
+
+  _CallbackWithCatch(currents, callback, start_params) {
+    try {
+      this._WrapCallback(currents, callback, start_params);
+    } catch (e) {
+      console.error("Error:in callback:", e);
+    }
+  }
+
+  _StateMachineNext() {
+    if (this._StateLocked) {
+      // 内部处理进行中，暂停状态切换
+      return;
+    }
+
+    if (this._StateIndex === 0) {
+      // Idle -> play, need switcher
+      if (this._StartSwitcher) {
+        this._StartSwitcher = false;
+        if (this._StartAnimation()) {
+          this._StateIndex = 1;
+        }
+      }
+    } else if (this._StateIndex === 1) {
+      // Play -> idle, no need switcher
+      this._StopAnimation();
+    }
+  }
+
+  _StartAnimation() {
+    // 当动画开始后才进行回调设置，防止Pause过程中直接调用了新设置进的回调
+    this._EndCallback = this._NextEndCallback;
+    this._NextEndCallback = null;
+
+    const start_params = this._StartingParams;
+    this._StartingParams = null;
+
+    const froms = [...this._Current];
+    const tos = this._Target;
+    const repeat_starts = this._Repeat ? [...this._RepeatStart] : null;
+
+    // const token = this._Token++;
+
+    const anim = this._WrapBuildAnimation(froms, tos, start_params);
+
+    if (anim === null) {
+      return;
+    }
+
+    // 生成OnFinalProgress处理监听，memo在 _WrapBuildAnimation()处理后生成，因为build处理中可能改变tos
+    const memo_tos = [...tos];
+    const that = this;
+    const listener = new Forge.AnimationListener().OnFinalProgress(
+      (progress) => {
+        that._OnPaused(
+          repeat_starts !== null ? repeat_starts : froms,
+          memo_tos,
+          progress,
+          start_params
+        );
+      }
+    );
+
+    this._WrapAddExtraListener(listener, start_params);
+
+    anim.AddAnimationListener(listener);
+    anim.Enable(Forge.AnimationEnable.KeepTransform);
+    if (this._Repeat) {
+      anim.EnableInfinite();
+    }
+    this._SpriteView.StartAnimation(anim);
+
+    return true; // success
+  }
+
+  _StopAnimation() {
+    this._SpriteView.StopAnimation();
+  }
+
+  _OnPaused(froms, tos, progress, start_params) {
+    // 根据froms, tos, progress信息更新this._Current
+    this._WrapReCalculateCurrent(froms, tos, progress, start_params);
+
+    this._StateLocked = true; // 阻止在callback中触发的状态变化
+
+    // 标识状态为暂停，使回调中执行pause处理时能立刻得到pauseCallback
+    this._StateIndex = 0;
+
+    // 换出callbacks，回调时可能加入新的callbacks
+    const paused_callback = this._PausedCallback;
+    const ended_callback = this._EndCallback;
+    this._PausedCallback = null;
+    this._EndCallback = null;
+
+    // 回调所有callback
+    if (paused_callback) {
+      // Paused callback
+      this._CallbackWithCatch(this._Current, paused_callback, start_params);
+    }
+    if (ended_callback && progress === 1) {
+      // Ended callback
+      this._CallbackWithCatch(this._Current, ended_callback, start_params);
+    }
+
+    this._StateLocked = false;
+
+    this._StateMachineNext(); // Trigger next start
+  }
+
+  _SetView(jsv_view) {
+    this._SpriteView = jsv_view;
+  }
+}
+
+export default ActorControlBase;

package/utils/JsViewVueWidget/JsvActorMove/JsvActorMove.vue

@@ -0,0 +1,64 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-10-20 17:21:21
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-11-18 16:45:05
+ * @Description: file content
+-->
+
+<!--
+ * 【模块 export 内容】
+ * JsvActorMove：React高阶组件，单轴(X 或 Y)运动控制控件，可控制完成单方向的匀速运动和变速运动（抛物运动），
+ *               若想进行X和Y轴同时的运动，可以通过运动分解后的两个JsvActorMove进行组合来实现
+ *      props说明:
+ *          control {JsvActorMoveControl} JsvActorMove控制器实体，通过new JsvActorMoveControl()生成，说明见下文
+ *
+ * JsvActorMoveControl: 面向对象的类，JsvActorMove控制器
+ *      功能函数：(参数说明见函数本体)
+ *          moveToX(target_x, speed, end_callback)
+ *              功能：延X轴进行匀速运动
+ *          moveToY(target_y, speed, end_callback)
+ *              功能：延Y轴进行匀速运动
+ *          repeatMoveAlongX(target_x, speed, repeat_start, repeat_callback)
+ *              功能：延X轴进行重复匀速运动
+ *          repeatMoveAlongY(target_y, speed, repeat_start, repeat_callback)
+ *              功能：延Y轴进行重复匀速运动
+ *          throwAlongX(init_v, acc, end_condition, end_callback, pole_callback)
+ *              功能：延X轴进行回旋运动
+ *          throwAlongY(init_v, acc, end_condition, end_callback, pole_callback)
+ *              功能：延Y轴进行回旋运动(例如Y轴抛物运动)
+ *          jumpTo(new_x, new_y)
+ *              功能：直接将JsvActorMove移动到目标位置，无中间运动动画
+ *          pause(pause_callback)
+ *              功能：暂停动画，并将JsvActorMove保持在暂停的位置上
+
+-->
+<script>
+import JsvActorMoveControl from "./JsvActorMoveControl";
+export default {
+  props: {
+    control: {
+      type: JsvActorMoveControl,
+      required: true,
+    },
+    refDefine: Object,
+  },
+  mounted() {
+    this.control._SetView(this.$refs.element.jsvMainView);
+    if (this.refDefine) {
+      const type = typeof this.refDefine;
+      if (type === "object") {
+        type.current = this.$refs.element;
+      } else if (type === "function") {
+        this.refDefine(this.$refs.element);
+      }
+    }
+  },
+};
+</script>
+
+<template>
+  <div ref="element">
+    <slot></slot>
+  </div>
+</template>