npm - niimbot-canvas-sdk - Versions diffs - 1.0.0 - Mend

niimbot-canvas-sdk 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/niimbot-canvas-sdk.es.js +444 -0
package/dist/niimbot-canvas-sdk.umd.js +1 -0
package/package.json +63 -0

package/dist/niimbot-canvas-sdk.es.js ADDED Viewed

@@ -0,0 +1,444 @@
+var d = Object.defineProperty;
+var g = (n, t, e) => t in n ? d(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var i = (n, t, e) => (g(n, typeof t != "symbol" ? t + "" : t, e), e);
+import u from "penpal";
+import l from "eventemitter3";
+import { customAlphabet as m } from "nanoid";
+class h extends l {
+  on(t, e, s) {
+    return super.on(t, e, s);
+  }
+  once(t, e, s) {
+    return super.once(t, e, s);
+  }
+  off(t, e, s) {
+    return super.off(t, e, s);
+  }
+  emit(t, ...e) {
+    return super.emit(t, ...e);
+  }
+}
+class b {
+  constructor() {
+    i(this, "queue", []);
+    i(this, "maxSize", 100);
+  }
+  enqueue(t, e = 3) {
+    this.queue.length >= this.maxSize && this.queue.shift();
+    const s = {
+      ...t,
+      retryCount: 0,
+      maxRetries: e
+    };
+    return this.queue.push(s), t.messageId;
+  }
+  dequeue() {
+    return this.queue.shift();
+  }
+  hasMessages() {
+    return this.queue.length > 0;
+  }
+  getMessageById(t) {
+    return this.queue.find((e) => e.messageId === t);
+  }
+  removeMessageById(t) {
+    const e = this.queue.findIndex((s) => s.messageId === t);
+    e !== -1 && this.queue.splice(e, 1);
+  }
+  clear() {
+    this.queue = [];
+  }
+}
+class A {
+  constructor(t, e = !1) {
+    this.context = t, this.debug = e;
+  }
+  formatMessage(t, ...e) {
+    return [`[${(/* @__PURE__ */ new Date()).toISOString()}] [${this.context}] [${t}]`, ...e];
+  }
+  info(...t) {
+    console.info(...this.formatMessage("INFO", ...t));
+  }
+  debug(...t) {
+    this.debug && console.debug(...this.formatMessage("DEBUG", ...t));
+  }
+  warn(...t) {
+    console.warn(...this.formatMessage("WARN", ...t));
+  }
+  error(...t) {
+    console.error(...this.formatMessage("ERROR", ...t));
+  }
+}
+const I = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", f = m(I, 12);
+class p extends h {
+  constructor(e, s = {}) {
+    super();
+    i(this, "connection", null);
+    i(this, "iframe");
+    i(this, "options");
+    i(this, "messageQueue");
+    i(this, "logger");
+    i(this, "isConnected", !1);
+    i(this, "reconnectAttempts", 0);
+    i(this, "maxReconnectAttempts", 3);
+    this.iframe = e, this.options = {
+      timeout: 3e4,
+      debug: !1,
+      retryCount: 3,
+      retryDelay: 1e3,
+      childOrigin: "*",
+      ...s
+    }, this.messageQueue = new b(), this.logger = new A("PenpalBridge", this.options.debug);
+  }
+  /**
+   * 建立连接
+   */
+  async connect(e = {}) {
+    try {
+      this.logger.info("正在建立连接..."), this.connection = u.connectToChild({
+        iframe: this.iframe,
+        methods: {
+          // 宿主提供给画板的方法
+          ping: () => "pong",
+          emitEvent: (s, a) => {
+            this.emit(s, a);
+          },
+          // 接收来自画板的请求
+          ...e
+        },
+        timeout: this.options.timeout,
+        childOrigin: this.options.childOrigin
+      }), await this.connection.promise, this.isConnected = !0, this.reconnectAttempts = 0, await this.processQueuedMessages(), this.logger.info("连接建立成功"), this.emit("connected");
+    } catch (s) {
+      throw this.logger.error("连接失败:", s), await this.handleReconnect(), s;
+    }
+  }
+  /**
+   * 发送消息到画板
+   */
+  async send(e, s) {
+    var c;
+    const a = {
+      action: e,
+      params: s,
+      timestamp: Date.now(),
+      messageId: f()
+    };
+    if (!this.isConnected)
+      throw this.messageQueue.enqueue(a), new Error("Connection not ready, message queued");
+    try {
+      if (this.logger.debug("发送消息:", a), !((c = this.connection) != null && c.child))
+        throw new Error("连接未就绪");
+      const o = await this.connection.child.handleMessage(a);
+      return this.logger.debug("收到响应:", o), this.validateResponse(o);
+    } catch (o) {
+      throw this.logger.error("发送消息失败:", o), this.messageQueue.enqueue(a), o;
+    }
+  }
+  /**
+   * 处理队列中的消息
+   */
+  async processQueuedMessages() {
+    for (; this.messageQueue.hasMessages(); ) {
+      const e = this.messageQueue.dequeue();
+      if (e)
+        try {
+          await this.send(e.action, e.params);
+        } catch (s) {
+          this.logger.warn("队列消息发送失败:", s), this.messageQueue.enqueue(e);
+        }
+    }
+  }
+  /**
+   * 重连机制
+   */
+  async handleReconnect() {
+    if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+      this.logger.error("重连次数达到上限"), this.emit("connection-lost");
+      return;
+    }
+    this.reconnectAttempts++, this.logger.info(`尝试重连 (${this.reconnectAttempts}/${this.maxReconnectAttempts})`), await new Promise(
+      (e) => setTimeout(e, this.options.retryDelay * this.reconnectAttempts)
+    );
+    try {
+      await this.connect();
+    } catch {
+      await this.handleReconnect();
+    }
+  }
+  /**
+   * 验证响应格式
+   */
+  validateResponse(e) {
+    if (!e || e.success === void 0)
+      throw new Error("Invalid response format");
+    if (!e.success) {
+      const s = e.error || { code: "UNKNOWN", message: "Unknown error" };
+      throw new Error(`${s.code}: ${s.message}`);
+    }
+    return e.data;
+  }
+  /**
+   * 断开连接
+   */
+  disconnect() {
+    this.connection && (this.connection.destroy(), this.isConnected = !1, this.emit("disconnected"), this.logger.info("连接已断开"));
+  }
+  /**
+   * 获取连接状态
+   */
+  getConnectionStatus() {
+    return this.isConnected;
+  }
+}
+class y {
+  constructor(t) {
+    this.bridge = t;
+  }
+  async initialize(t) {
+    return this.bridge.send("canvas.initialize", t);
+  }
+  async setData(t) {
+    return this.bridge.send("canvas.setData", t);
+  }
+  async getData() {
+    return this.bridge.send("canvas.getData");
+  }
+  async clear() {
+    return this.bridge.send("canvas.clear");
+  }
+  async undo() {
+    return this.bridge.send("canvas.undo");
+  }
+  async redo() {
+    return this.bridge.send("canvas.redo");
+  }
+  async export(t) {
+    return this.bridge.send("canvas.export", { format: t });
+  }
+  async save() {
+    return this.bridge.send("canvas.save");
+  }
+  async invoke(t, ...e) {
+    return this.bridge.send("canvas.invoke", { method: t, args: e });
+  }
+  async setZoom(t) {
+    return this.bridge.send("canvas.setZoom", { zoom: t });
+  }
+  async getSnapshot() {
+    return this.bridge.send("canvas.getSnapshot");
+  }
+}
+class v {
+  constructor(t) {
+    this.bridge = t;
+  }
+  async setAbilities(t) {
+    return this.bridge.send("abilities.set", t);
+  }
+  async getAbilities() {
+    return this.bridge.send("abilities.get");
+  }
+  async enableAbility(t) {
+    return this.bridge.send("abilities.enable", { name: t });
+  }
+  async disableAbility(t) {
+    return this.bridge.send("abilities.disable", { name: t });
+  }
+}
+class E {
+  constructor(t) {
+    this.bridge = t;
+  }
+  async setTheme(t) {
+    return this.bridge.send("theme.set", { theme: t });
+  }
+  async getCurrentTheme() {
+    return this.bridge.send("theme.get");
+  }
+  async updateToken(t) {
+    return this.bridge.send("theme.updateToken", t);
+  }
+}
+class P {
+  constructor(t) {
+    this.bridge = t;
+  }
+  async setLocale(t, e) {
+    return this.bridge.send("i18n.setLocale", { locale: t, messages: e });
+  }
+  async getCurrentLocale() {
+    return this.bridge.send("i18n.getLocale");
+  }
+  async updateMessages(t) {
+    return this.bridge.send("i18n.updateMessages", t);
+  }
+}
+class w {
+  constructor(t) {
+    this.bridge = t;
+  }
+  async validateToken() {
+    return this.bridge.send("auth.validateToken");
+  }
+}
+const r = {
+  READY: "ready",
+  CHANGE: "change",
+  SAVE: "save",
+  ERROR: "error",
+  SELECTION_CHANGED: "selection-changed",
+  CONNECTED: "connected",
+  DISCONNECTED: "disconnected",
+  // 画板生命周期事件
+  LOADED: "loaded",
+  BEFORE_UNLOAD: "before-unload",
+  // 画板操作事件
+  OBJECT_ADDED: "object-added",
+  OBJECT_MODIFIED: "object-modified",
+  OBJECT_REMOVED: "object-removed",
+  // 用户交互事件
+  MOUSE_DOWN: "mouse-down",
+  MOUSE_UP: "mouse-up",
+  MOUSE_MOVE: "mouse-move",
+  KEY_DOWN: "key-down",
+  KEY_UP: "key-up"
+};
+class C extends h {
+  constructor(e, s) {
+    super();
+    i(this, "bridge");
+    i(this, "canvasAPI");
+    i(this, "abilityAPI");
+    i(this, "themeAPI");
+    i(this, "i18nAPI");
+    i(this, "authAPI");
+    i(this, "config");
+    i(this, "iframe");
+    i(this, "isInitialized", !1);
+    this.validateConfig(s), this.config = s, this.iframe = e, this.bridge = new p(e, {
+      debug: s.debug || !1,
+      timeout: 3e4,
+      childOrigin: this.extractOrigin(e.src)
+    }), this.canvasAPI = new y(this.bridge), this.abilityAPI = new v(this.bridge), this.themeAPI = new E(this.bridge), this.i18nAPI = new P(this.bridge), this.authAPI = new w(this.bridge), this.setupEventHandlers();
+  }
+  /**
+   * 初始化SDK
+   */
+  async init() {
+    if (!this.isInitialized)
+      try {
+        await this.bridge.connect({
+          getConfig: () => this.config,
+          log: (e, s) => {
+            console.log(`[Canvas ${e.toUpperCase()}]`, s);
+          }
+        }), await this.canvasAPI.initialize(this.config), this.config.abilities && await this.abilityAPI.setAbilities(this.config.abilities), this.config.theme && await this.themeAPI.setTheme(this.config.theme), this.config.locale && await this.i18nAPI.setLocale(this.config.locale, this.config.messages), this.isInitialized = !0, this.emit(r.READY);
+      } catch (e) {
+        throw this.emit(r.ERROR, e), e;
+      }
+  }
+  // Canvas 操作方法
+  get canvas() {
+    return {
+      setData: (e) => this.canvasAPI.setData(e),
+      getData: () => this.canvasAPI.getData(),
+      clear: () => this.canvasAPI.clear(),
+      undo: () => this.canvasAPI.undo(),
+      redo: () => this.canvasAPI.redo(),
+      export: (e = "png") => this.canvasAPI.export(e),
+      save: () => this.canvasAPI.save(),
+      setZoom: (e) => this.canvasAPI.setZoom(e),
+      getSnapshot: () => this.canvasAPI.getSnapshot(),
+      invoke: (e, ...s) => this.canvasAPI.invoke(e, ...s)
+    };
+  }
+  // 能力管理
+  get abilities() {
+    return {
+      set: (e) => this.abilityAPI.setAbilities(e),
+      get: () => this.abilityAPI.getAbilities(),
+      enable: (e) => this.abilityAPI.enableAbility(e),
+      disable: (e) => this.abilityAPI.disableAbility(e),
+      updateConfig: (e, s) => this.abilityAPI.updateAbilityConfig(e, s)
+    };
+  }
+  // 主题管理
+  get theme() {
+    return {
+      set: (e) => this.themeAPI.setTheme(e),
+      get: () => this.themeAPI.getCurrentTheme(),
+      updateToken: (e) => this.themeAPI.updateToken(e),
+      reset: () => this.themeAPI.resetTheme()
+    };
+  }
+  // 国际化管理
+  get i18n() {
+    return {
+      setLocale: (e, s) => this.i18nAPI.setLocale(e, s),
+      getLocale: () => this.i18nAPI.getCurrentLocale(),
+      updateMessages: (e) => this.i18nAPI.updateMessages(e),
+      getMessages: () => this.i18nAPI.getMessages(),
+      getTranslation: (e) => this.i18nAPI.getTranslation(e)
+    };
+  }
+  // 鉴权管理
+  get auth() {
+    return {
+      validateToken: () => this.authAPI.validateToken(),
+      refreshToken: (e) => this.authAPI.refreshToken(e),
+      getTokenInfo: () => this.authAPI.getTokenInfo()
+    };
+  }
+  // 工具方法
+  get utils() {
+    return {
+      getConnectionStatus: () => this.bridge.getConnectionStatus(),
+      disconnect: () => this.bridge.disconnect(),
+      reconnect: async () => {
+        this.bridge.disconnect(), this.isInitialized = !1, await this.init();
+      },
+      isInitialized: () => this.isInitialized
+    };
+  }
+  setupEventHandlers() {
+    this.bridge.on("canvas-change", (e) => {
+      this.emit(r.CHANGE, e);
+    }), this.bridge.on("canvas-save", (e) => {
+      this.emit(r.SAVE, e);
+    }), this.bridge.on("canvas-error", (e) => {
+      this.emit(r.ERROR, e);
+    }), this.bridge.on("canvas-selection-changed", (e) => {
+      this.emit(r.SELECTION_CHANGED, e);
+    }), this.bridge.on("connected", () => {
+      this.emit(r.CONNECTED);
+    }), this.bridge.on("disconnected", () => {
+      this.emit(r.DISCONNECTED);
+    });
+  }
+  validateConfig(e) {
+    if (!e.token)
+      throw new Error("Token is required");
+    if (e.abilities) {
+      const s = ["text", "image", "barcode", "multiLayout", "shape", "qrCode"];
+      Object.keys(e.abilities).forEach((a) => {
+        s.includes(a) || console.warn(`Unknown ability: ${a}`);
+      });
+    }
+  }
+  extractOrigin(e) {
+    try {
+      return new URL(e).origin;
+    } catch {
+      return "*";
+    }
+  }
+}
+function R(n, t) {
+  return new C(n, t);
+}
+export {
+  r as CANVAS_EVENTS,
+  C as NiimbotCanvasSDK,
+  R as createCanvas
+};

package/dist/niimbot-canvas-sdk.umd.js ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,63 @@
+{
+  "name": "niimbot-canvas-sdk",
+  "version": "1.0.0",
+  "description": "Niimbot Canvas iframe communication SDK",
+  "type": "module",
+  "main": "dist/niimbot-canvas-sdk.umd.js",
+  "module": "dist/niimbot-canvas-sdk.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/niimbot-canvas-sdk.es.js",
+      "require": "./dist/niimbot-canvas-sdk.umd.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./vue": {
+      "import": "./dist/vue.es.js",
+      "require": "./dist/vue.umd.js",
+      "types": "./dist/vue.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "lint": "eslint src --ext .ts,.vue",
+    "prepare": "npm run build",
+    "release": "npm run build && npm publish --registry=http://your-private-npm.com"
+  },
+  "dependencies": {
+    "eventemitter3": "^5.0.1",
+    "nanoid": "^5.0.3",
+    "penpal": "^6.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vue/test-utils": "^2.0.0",
+    "eslint": "^8.45.0",
+    "eslint-plugin-vue": "^9.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^4.0.0",
+    "vitest": "^0.34.0",
+    "vue": "^3.3.0",
+    "vue-tsc": "^1.8.0"
+  },
+  "keywords": [
+    "canvas",
+    "iframe",
+    "sdk",
+    "niimbot",
+    "design",
+    "editor"
+  ],
+  "author": "Niimbot Team",
+  "license": "MIT"
+}