@doki-land/live2d 0.0.4 → 0.0.6

package/src/icons/icons.ts

@@ -1,39 +1,39 @@
-// 图标定义
-export const icons = [
-  {
-    id: 'message',
-    svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z"/></svg>`,
-    title: '发送消息',
-    action: 'message'
-  },
-  {
-    id: 'telegram',
-    svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z"/></svg>`,
-    title: '联系我们',
-    action: 'telegram'
-  },
-  {
-    id: 'user',
-    svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>`,
-    title: '用户信息',
-    action: 'user'
-  },
-  {
-    id: 'info',
-    svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>`,
-    title: '关于',
-    action: 'info'
-  },
-  {
-    id: 'photo',
-    svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 1c-1.63 0-3.06.79-3.98 2H8c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2h8c1.1 0 2 .9 2 2v7c0 1.1-.9 2-2 2h-.02c-.92-1.21-2.35-2-3.98-2zm7-8h-4.18C14.4 4.84 13.3 4 12 4c-1.3 0-2.4.84-2.82 2H5c-.14 0-.27.01-.4.04-.39.08-.74.28-1.01.55-.18.18-.33.4-.43.64-.1.23-.16.49-.16.77v14c0 .27.06.54.16.78s.25.45.43.64c.27.27.62.47 1.01.55.13.02.26.03.4.03h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm5 13c0 .55-.45 1-1 1H6c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1h2.18c.42 1.16 1.52 2 2.82 2 1.3 0 2.4-.84 2.82-2H16c.55 0 1 .45 1 1v10z"/></svg>`,
-    title: '拍照',
-    action: 'photo'
-  },
-  {
-    id: 'close',
-    svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>`,
-    title: '关闭',
-    action: 'close'
-  }
+// 图标定义
+export const icons = [
+  {
+    id: 'message',
+    svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z"/></svg>`,
+    title: '发送消息',
+    action: 'message'
+  },
+  {
+    id: 'telegram',
+    svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z"/></svg>`,
+    title: '联系我们',
+    action: 'telegram'
+  },
+  {
+    id: 'user',
+    svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>`,
+    title: '用户信息',
+    action: 'user'
+  },
+  {
+    id: 'info',
+    svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>`,
+    title: '关于',
+    action: 'info'
+  },
+  {
+    id: 'photo',
+    svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 1c-1.63 0-3.06.79-3.98 2H8c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2h8c1.1 0 2 .9 2 2v7c0 1.1-.9 2-2 2h-.02c-.92-1.21-2.35-2-3.98-2zm7-8h-4.18C14.4 4.84 13.3 4 12 4c-1.3 0-2.4.84-2.82 2H5c-.14 0-.27.01-.4.04-.39.08-.74.28-1.01.55-.18.18-.33.4-.43.64-.1.23-.16.49-.16.77v14c0 .27.06.54.16.78s.25.45.43.64c.27.27.62.47 1.01.55.13.02.26.03.4.03h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm5 13c0 .55-.45 1-1 1H6c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1h2.18c.42 1.16 1.52 2 2.82 2 1.3 0 2.4-.84 2.82-2H16c.55 0 1 .45 1 1v10z"/></svg>`,
+    title: '拍照',
+    action: 'photo'
+  },
+  {
+    id: 'close',
+    svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>`,
+    title: '关闭',
+    action: 'close'
+  }
 ];

package/src/icons/style.css

@@ -1,38 +1,38 @@
-.live2d-icon-panel {
-    position: fixed;
-    right: 10px;
-    bottom: 150px;
-    z-index: 10000;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-}
-
-.live2d-icon-panel.visible {
-    opacity: 1;
-}
-
-.live2d-icon {
-    width: 40px;
-    height: 40px;
-    background-color: rgba(255, 255, 255, 0.8);
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    transition: transform 0.2s ease;
-}
-
-.live2d-icon:hover {
-    transform: scale(1.1);
-}
-
-.live2d-icon svg {
-    width: 24px;
-    height: 24px;
-    fill: #666;
+.live2d-icon-panel {
+    position: fixed;
+    right: 10px;
+    bottom: 150px;
+    z-index: 10000;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.live2d-icon-panel.visible {
+    opacity: 1;
+}
+
+.live2d-icon {
+    width: 40px;
+    height: 40px;
+    background-color: rgba(255, 255, 255, 0.8);
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    transition: transform 0.2s ease;
+}
+
+.live2d-icon:hover {
+    transform: scale(1.1);
+}
+
+.live2d-icon svg {
+    width: 24px;
+    height: 24px;
+    fill: #666;
 }

package/src/index.ts

@@ -1,20 +1,18 @@
 import '../lib/cubism2.min.js';
 import '../lib/cubism5.min.js';
 import * as PIXI from 'pixi.js';
-import { Live2dOptions } from './types';
+
 import { Ticker, TickerPlugin } from '@pixi/ticker';
 import {
-    Live2DFactory,
     Live2DModel,
     MotionManager,
     SoundManager
 } from 'pixi-live2d-display-lipsyncpatch';
 import { Application,  } from 'pixi.js';
-import { icons } from './icons/icons';
 import './icons/style.css';
+import { Live2dOptions } from '@/types/index.js';
 
-
-export { MotionManager, SoundManager, Live2DModel, PIXI, type Live2dOptions };
+export {MotionManager, SoundManager, Live2DModel, PIXI};
 
 /**
  * 创建Live2D模型
@@ -79,7 +77,7 @@ export async function createLive2D(options: Live2dOptions): Promise<Live2DModel>
     }
     
     // 创建右侧图标栏
-    createIconPanel(model, element);
+    // createIconPanel(model, element);
 
     return model;
 }
@@ -186,7 +184,7 @@ async function startIdleAnimation(model: Live2DModel) {
  * @param cubism2 可选的CubismCore对象，如果在非浏览器环境中使用，需要传入
  * @param cubism5
  */
-export async function initializeLive2D(cubism2?: any, cubism5?: any) {
+export async function initializeLive2D() {
     // 首先初始化 Cubism2 SDK
     // console.log('sdk2:', Cubism2);
     // console.log('sdk5:', Cubism5);

package/src/types/Live2dOptions.ts

@@ -1,56 +1,56 @@
-import { ModelOptions } from './ModelOptions';
-
-/**
- * Live2D模型配置选项
- */
-export interface Live2dOptions {
-    /**
-     * 模型配置选项
-     */
-    models: ModelOptions[];
-    /**
-     * 画布的ID
-     * @default 'live2d-canvas'
-     */
-    element_id?: string,
-    /**
-     * 画布的宽度
-     * @default 300
-     */
-    width?: number;
-    /**
-     * 画布的高度
-     * @default 300
-     */
-    height?: number;
-    /**
-     * 模型位置，可选 'left' 或 'right'
-     * @default 'right'
-     */
-    position?: 'left' | 'right';
-    /**
-     * 模型与左右边框的距离（像素）
-     * @default 20
-     */
-    spacing_x?: number;
-    /**
-     * 模型与底部边框的距离（像素）
-     * @default 20
-     */
-    spacing_y?: number;
-    /**
-     * 是否自动适应模型大小
-     * @default true
-     */
-    auto_fit?: boolean;
-    /**
-     * 是否自动开始动画
-     * @default true
-     */
-    auto_motion?: boolean;
-    /**
-     * 是否启用鼠标跟踪
-     * @default true
-     */
-    mouse_tracking?: boolean;
+import { ModelOptions } from './ModelOptions.js';
+
+/**
+ * Live2D模型配置选项
+ */
+export interface Live2dOptions {
+    /**
+     * 模型配置选项
+     */
+    models: ModelOptions[];
+    /**
+     * 画布的ID
+     * @default 'live2d-canvas'
+     */
+    element_id?: string,
+    /**
+     * 画布的宽度
+     * @default 300
+     */
+    width?: number;
+    /**
+     * 画布的高度
+     * @default 300
+     */
+    height?: number;
+    /**
+     * 模型位置，可选 'left' 或 'right'
+     * @default 'right'
+     */
+    position?: 'left' | 'right';
+    /**
+     * 模型与左右边框的距离（像素）
+     * @default 20
+     */
+    spacing_x?: number;
+    /**
+     * 模型与底部边框的距离（像素）
+     * @default 20
+     */
+    spacing_y?: number;
+    /**
+     * 是否自动适应模型大小
+     * @default true
+     */
+    auto_fit?: boolean;
+    /**
+     * 是否自动开始动画
+     * @default true
+     */
+    auto_motion?: boolean;
+    /**
+     * 是否启用鼠标跟踪
+     * @default true
+     */
+    mouse_tracking?: boolean;
 }

package/src/types/ModelOptions.ts

@@ -1,40 +1,40 @@
-export type ModelOptions = ModelMainOptions & ModelMobileAdaptation;
-export interface ModelMobileAdaptation {
-    /**
-     * 移动端配置, 会覆盖 desktop 中的主配置
-     * @default null
-     */
-    mobile?: Partial<ModelOptions>;
-}
-export interface ModelMainOptions {
-    /**
-     * 模型JSON文件的路径
-     */
-    model_url: string;
-    position?: ModelPosition;
-}
-
-export interface ModelPosition {
-    /**
-     * 模型在画布中的缩放
-     */
-    scale?: number,
-    /**
-     * 模型在画布中的位置
-     */
-    anchor_x?: number;
-    /**
-     * 模型在画布中的位置
-     */
-    anchor_y?: number;
-    /**
-     * 画布宽度
-     * @default 300
-     */
-    width?: number;
-    /**
-     * 画布高度
-     * @default 300
-     */
-    height?: number;
+export type ModelOptions = ModelMainOptions & ModelMobileAdaptation;
+export interface ModelMobileAdaptation {
+    /**
+     * 移动端配置, 会覆盖 desktop 中的主配置
+     * @default null
+     */
+    mobile?: Partial<ModelOptions>;
+}
+export interface ModelMainOptions {
+    /**
+     * 模型JSON文件的路径
+     */
+    model_url: string;
+    position?: ModelPosition;
+}
+
+export interface ModelPosition {
+    /**
+     * 模型在画布中的缩放
+     */
+    scale?: number,
+    /**
+     * 模型在画布中的位置
+     */
+    anchor_x?: number;
+    /**
+     * 模型在画布中的位置
+     */
+    anchor_y?: number;
+    /**
+     * 画布宽度
+     * @default 300
+     */
+    width?: number;
+    /**
+     * 画布高度
+     * @default 300
+     */
+    height?: number;
 }

package/src/types/index.ts

@@ -1,2 +1,2 @@
-export type { Live2dOptions } from './Live2dOptions';
-export type { ModelOptions, ModelPosition, ModelMobileAdaptation, ModelMainOptions } from './ModelOptions';
+export  * from './Live2dOptions.js';
+export  * from './ModelOptions.js';