Make the widget draggable

Author: stevenjoezhang

README.en.md

@@ -47,6 +47,7 @@ You can refer to the source code of `dist/autoload.js` to see the available conf
 | `apiPath` | `string` | `https://live2d.fghrsh.net/api/` | API path, optional |
 | `cdnPath` | `string` | `https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/` | CDN path, optional |
 | `tools` | `string[]` | see `autoload.js` | Buttons of the loaded tools, optional |
+| `drag` | `boolean` | `false` | Make the widget draggable |
 | `logLevel` | `string` | `error` | Log level: `error`，`info`，`trace` |
 
 Among them, the parameters `apiPath` and `cdnPath` only need to set one of them. `apiPath` is the URL of the backend API, which can be set up and modified by yourself (there are many things to modify, not discussed here). You can refer to [live2d_api](https://github.com/fghrsh/live2d_api) for more information. On the other hand, `cdnPath` is used to load resources through CDN services like jsDelivr, which provides better stability.

README.md

@@ -47,6 +47,7 @@
 | `apiPath` | `string` | `https://live2d.fghrsh.net/api/` | API 路径，可选参数 |
 | `cdnPath` | `string` | `https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/` | CDN 路径，可选参数 |
 | `tools` | `string[]` | 见 `autoload.js` | 加载的小工具按钮，可选参数 |
+| `drag` | `boolean` | `false` | 支持拖动看板娘 |
 | `logLevel` | `string` | `error` | 日志等级，支持 `error`，`info`，`trace` |
 
 其中，`apiPath` 和 `cdnPath` 两个参数设置其中一项即可。`apiPath` 是后端 API 的 URL，可以自行搭建，并增加模型（需要修改的内容比较多，此处不再赘述），可以参考 [live2d_api](https://github.com/fghrsh/live2d_api)。而 `cdnPath` 则是通过 jsDelivr 这样的 CDN 服务加载资源，更加稳定。

src/drag.ts

@@ -0,0 +1,55 @@
+function registerDrag() {
+  const element = document.getElementById('waifu');
+  const canvas = document.getElementById('live2d');
+  if (!element || !canvas) return;
+  let winWidth = window.innerWidth,
+    winHeight = window.innerHeight;
+  const imgWidth = element.offsetWidth,
+    imgHeight = element.offsetHeight;
+  // 在待拖拽的元素上绑定鼠标按下事件
+  element.addEventListener('mousedown', event => {
+    if (event.button === 2) {
+      // 右键，直接返回，不处理
+      return;
+    }
+    if (event.target !== canvas) return;
+    event.preventDefault()
+    // 记录光标在图片按下时的坐标
+    const _offsetX = event.offsetX,
+      _offsetY = event.offsetY;
+    // 绑定鼠标移动事件
+    document.onmousemove = event => {
+      // 获取光标在可视窗口中的坐标
+      const _x = event.clientX,
+        _y = event.clientY;
+      // 计算拖动的图片的定位的位置
+      let _left = _x - _offsetX,
+        _top = _y - _offsetY;
+      // 判断是否在窗口范围内
+      if (_top < 0) { // 上
+        _top = 0;
+      } else if (_top >= winHeight - imgHeight) { // 下
+        _top = winHeight - imgHeight;
+      }
+      if (_left < 0) { // 左
+        _left = 0;
+      } else if (_left >= winWidth - imgWidth) { // 右
+        _left = winWidth - imgWidth;
+      }
+      // 设置拖动过程中元素的定位
+      element.style.top = _top + 'px';
+      element.style.left = _left + 'px';
+    }
+    // 绑定鼠标弹起事件
+    document.onmouseup = () => {
+      document.onmousemove = null;
+    }
+  });
+  // 当浏览器的窗口大小被改变时重设宽高
+  window.onresize = () => {
+    winWidth = window.innerWidth;
+    winHeight = window.innerHeight;
+  }
+}
+
+export default registerDrag;

src/types/config.d.ts

@@ -18,6 +18,11 @@ interface Config {
    * @type {string[] | undefined}
    */
   tools?: string[];
+  /**
+   * 支持拖动看板娘。
+   * @type {boolean | undefined}
+   */
+  drag?: boolean;
   /**
    * 日志的等级。
    * @type {LogLevel | undefined}

src/widget.ts

@@ -8,6 +8,7 @@ import showMessage from './message.js';
 import randomSelection from './utils.js';
 import tools from './tools.js';
 import logger from './logger.js';
+import registerDrag from './drag.js';
 
 function registerTools(model: ModelManager, config: Config) {
   (tools as Tools)['switch-model'].callback = () => model.loadOtherModel();
@@ -185,6 +186,7 @@ async function loadWidget(config: Config) {
         </div>`,
   );
   registerTools(model, config);
+  if (config.drag) registerDrag();
   await initModel(model, config);
   document.getElementById('waifu')!.style.bottom = '0';
 }