feat: 增加预览窗口拖拽能力

package.json

@@ -86,6 +86,7 @@
  "commander": "^11.0.0",
  "cursor-effects": "^1.0.12",
  "emoji-mart": "^5.5.2",
+ "interactjs": "^1.10.19",
  "jsonfile": "^6.1.0",
  "lodash-es": "^4.17.21",
  "naive-ui": "^2.34.4",
@@ -104,6 +105,7 @@
  "@commitlint/cli": "^17.7.1",
  "@commitlint/config-conventional": "^17.7.0",
  "@commitlint/prompt": "^17.7.1",
+ "@interactjs/types": "^1.10.19",
  "@rollup/plugin-node-resolve": "^15.2.1",
  "@semantic-release/changelog": "^6.0.3",
  "@semantic-release/commit-analyzer": "^10.0.4",

src/main.ts

@@ -271,9 +271,14 @@ export default class AwesomeBrainManagerPlugin extends Plugin {
 
  async customizeRow(path: string): Promise<void> {
  const paths = path.split('/');
- if (path.startsWith(this.app.plugins.getPluginFolder()) && paths.length > 3) {
+ const reloadPluginList = ['awesome-brain-manager'];
+ if (path.startsWith(this.app.plugins.getPluginFolder()) && paths[3]) {
  const plugin = paths[2];
- this.reloadPlugins(plugin);
+ const file = paths[paths.length - 1];
+ if (file.endsWith('.mdb')) return;
+ if (plugin in reloadPluginList) {
+ this.reloadPlugins(plugin);
+ }
  }
  }
 

src/ui/popover.ts

@@ -12,6 +12,8 @@ import {
  requireApiVersion,
  setIcon,
 } from 'obsidian';
+import interact from 'interactjs';
+import type { Interactable } from '@interactjs/types';
 import HoverEditorPlugin from '@/main';
 import { useSystemStore } from '@/stores';
 
@@ -90,6 +92,8 @@ export class HoverEditor extends nosuper(HoverPopover) {
  attr: { id: 'he' + this.id },
  });
 
+ thePosition = { x: 0, y: 0 };
+
  constructor(
  parent: HoverEditorParent,
  public targetEl: HTMLElement,
@@ -179,6 +183,51 @@ export class HoverEditor extends nosuper(HoverPopover) {
 
  const closeEl = popoverActions.createEl('a', 'popover-action mod-close');
  setIcon(closeEl, 'x');
+ const minEl = popoverActions.createEl('a', 'popover-action mod-minimize');
+ setIcon(minEl, 'minus');
+ const maxEl = popoverActions.createEl('a', 'popover-action mod-maximize');
+ setIcon(maxEl, 'maximize');
+ const _self = this;
+ interact(this.hoverEl).draggable({
+ // origin: 'body',
+ // inertia: true,
+ // allowFrom: '.popover-titlebar',
+ modifiers: [
+ // TODO 边缘吸附，留出10px的操作空间
+ interact.modifiers.restrict({
+ restriction: 'body',
+ // 不会拖动元素到body之外
+ elementRect: { top: 0, left: 0, bottom: 1, right: 1 },
+ }),
+ ],
+ listeners: {
+ start(event: DragEvent) {
+ console.log(event);
+ },
+ move(event) {
+ _self.thePosition.x += event.dx;
+ _self.thePosition.y += event.dy;
+ event.target.style.transform = `translate(${_self.thePosition.x}px, ${_self.thePosition.y}px)`;
+ },
+ end(event: DragEvent) {
+ console.log(event);
+ },
+ },
+ });
+
+ minEl.addEventListener('click', event => {
+ // restorePopover(this.hoverEl);
+ // this.toggleMinimized();
+ });
+ maxEl.addEventListener('click', event => {
+ if (this.hoverEl.hasClass('snap-to-viewport')) {
+ // restorePopover(this.hoverEl);
+ return;
+ }
+ // const offset = calculateOffsets(this.document);
+ // storeDimensions(this.hoverEl);
+ // snapToEdge(this.hoverEl, 'viewport', offset);
+ });
  closeEl.addEventListener('click', event => {
  this.hide();
  });