Socket
Socket
Sign inDemoInstall

wincard

Package Overview
Dependencies
229
Maintainers
1
Versions
179
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    wincard

窗卡页插件


Version published
Maintainers
1
Created

Readme

Source

WinCard

use

main.js 中引用 WinCard:

import { createApp } from "vue";
import App from "./App.vue";

import WinCard from "wincard";
import "wincard/dist/wincard.css";

createApp(App)
    .use(WinCard)
    .mount("#app");

vue 中使用:

<!-- 素材页编辑 -->
<PPTEditor :slide="slide" @onSave="onSave" />

<!-- 预览 -->
<ScreenView :slide="slide" @pagePrev="pagePrev()" @pageNext="pageNext()" />

slide数据示例:

// 素材页
{
    id: "39FFFBBE2B08D1CFD8FCA24DE655B35B",
    type: "element",
    viewportRatio: 0.5625,
    elements: [
        {
            name: "形状1",
            type: "shape",
            id: "4cbRxp",
            left: 0,
            top: 200,
            width: 546,
            height: 362.5,
            viewBox: 200,
            path: "M 0 0 L 0 200 L 200 200 Z",
            fill: "#5b9bd5",
            fixedRatio: false,
            opacity: 0.7,
            rotate: 0
        },
        {
            name: "形状2",
            type: "shape",
            id: "ookHrf",
            left: 0,
            top: 0,
            width: 300,
            height: 320,
            viewBox: 200,
            path: "M 0 0 L 0 200 L 200 200 Z",
            fill: "#5b9bd5",
            fixedRatio: false,
            flipV: true,
            rotate: 0
        },
        {
            name: "文本1",
            type: "text",
            id: "idn7Mx",
            left: 355,
            top: 65.25,
            width: 585,
            height: 188,
            lineHeight: 1.2,
            content:
                "<p><strong><span style='font-size:  112px'>PPTIST</span></strong></p>",
            rotate: 0,
            defaultFontName: "Microsoft Yahei",
            defaultColor: "#333"
        },
        {
            name: "文本2",
            type: "text",
            id: "7stmVP",
            left: 355,
            top: 253.25,
            width: 585,
            height: 56,
            content:
                "<p><span style='font-size:  24px'>基于 Vue 3.x + TypeScript 的在线演示文稿应用</span></p>",
            rotate: 0,
            defaultFontName: "Microsoft Yahei",
            defaultColor: "#333"
        },
        {
            name: "线条",
            type: "line",
            id: "FnpZs4",
            left: 361,
            top: 238,
            start: [0, 0],
            end: [549, 0],
            points: ["", ""],
            color: "#5b9bd5",
            style: "solid",
            width: 2
        }
    ],
    background: {
        type: "solid",
        color: "#ffffff"
    }
}

// 听写页
{
    id: "39FFFBBE2B08D1CFD8FCA24DE655B35B",
    type: "listen",
    viewportRatio: 0.5625,
    elements: [],
    listenWords: [
        {
            id: "39FED7308B47FE07436EC33844DE78F5",
            name: "苹果1",
            file: "TeachPageFile/EFF4D19486842BDF411839B61AE22B71.mp3",
            extention: "mp3",
            pageWordID: "39FFFC10573FB3AD0BC87C17A08E2AD5"
        },
        {
            name: "121212",
            id: "39FECC5CDF3022C43C032688958B16BF",
            file: "TeachPageFile/28D7326F7772879CDCF564A2A755B264.m4a",
            extention: "m4a",
            pageWordID: "39FFFC10574015C89FAEF9355BB5E7CB"
        },
        {
            name: "121212",
            id: "39FECC5CDF3022C43C032688958B16BF",
            file: "TeachPageFile/28D7326F7772879CDCF564A2A755B264.m4a",
            extention: "m4a",
            pageWordID: "39FFFC65054430D68B36F090A1875989"
        },
        {
            name: "测试",
            id: "39FEBCA9648BE111E08E1B4CD1C5104E",
            file: "TeachPageFile/814F94E1DBA66566099B0787FA7678D7.mp4",
            extention: "mp4",
            pageWordID: "39FFFC654B2BDC6027B84AE7E1021F3A"
        },
        {
            name: "敦实",
            id: "39FEBCA933D981CE5D2A348A65ABC0DB",
            file: "TeachPageFile/CA7DC5A89DD86B2DD66B8D996EAB67E3.mp3",
            extention: "mp3",
            pageWordID: "39FFFC654B2B2A9804F1F6914BF1D786"
        }
    ],
    background: {
        type: "solid",
        color: "#ffffff"
    }
}

// 跟读页
{
    id: "39FFFBBE2B08D1CFD8FCA24DE655B35B",
    type: "follow",
    viewportRatio: 0.5625,
    elements: [],
    follow: {
        src: "ElementFile/435F9C581336C2582C98A7708699585D.mp4"
    },
    background: {
        type: "solid",
        color: "#ffffff"
    }
}

【注】:支持数据导入和导出

5.0.0版本针对动画进行数据大调整,数据增加版本号

import { version } from "wincard";
// 获取插件支持数据版本号,与使用的slide数据的版本号进行比较,当不支持时,需要对相应的数据进行相应的处理
// 1.0.0,数据当中没有版本号的数据我们这里统称为1.0.0版本数据
// 针对1.0.0的数据,其中的步骤数据字段steps没有了,统一使用animations,事件的里的数据结构也进行的调整和anmaitions的数据结构保持一致
// 相关处理代码示例
export const dealAnimationData = (slide: Slide) => {
    if (slide.steps) {
        const steps = slide.steps;
        delete slide.steps;

        let animations: PPTAnimation[] = [];
        // 当步骤中存在进入与退出动画时,只管进入动画,舍弃退出动画
        steps.forEach(actions => {
            const _animation = getAnimations(actions || []);
            animations = animations.concat(_animation);
        });

        slide.animations = animations;
    }

    slide.elements.forEach(element => {
        element.actions = getAnimations((element.actions as unknown || []) as PPTElementAction[]);
    });

    return slide;
};

const getAnimations = (actions: PPTElementAction[]) => {
    const animations: PPTAnimation[] = [];
    actions.forEach((item, index) => {
        const type = item.inAni ? "in" : item.outAni ? "out" : "in";
        animations.push({
            id: createRandomCode(),
            elId: item.target,
            ani: (type === "in" ? item.inAni : item.outAni) || "",
            type,
            path: type === "in" ? item.inPath : item.outPath,
            duration: item.duration || 0,
            trigger: index === 0 ? "click" : "meantime"
        });
    });
    return animations;
};

6.0.0版本

  • 引入font.css
import "node_modules/wincard/dist/font.css";
  • 使用MathJax@3.2.2版本,在使用本插件,需要引入该版本插件
// 引入mathjax
// 处理批量初始化问题
const callbackArr: (() => void)[] = [];
let isInit = true;

export const initMathJax = (config = {}, callback?: () => void) => {
    if (window.MathJax) return callback && callback();
    if (isInit) {
        isInit = false;
        const script = document.createElement("script");
        script.src = "./mathjax/3.2.2/tex-svg-full.js";
        script.async = true;
        document.head.appendChild(script);
        // 没有找到好的配置解决办法,这里直接在localstorage里存入配置值
        // localStorage.setItem("MathJax-Menu-Settings", '{"renderer":"svg"}');
        const defaultConfig = {
            loader: { load: ["[tex]/unicode", "[tex]/mhchem"] },
            tex: {
                packages: { "[+]": ["unicode", "mhchem"] },
                inlineMath: [['\\(', '\\)']],
                displayMath: [
                    ['$$', '$$'],
                    ['\\[', '\\]']
                ],
                processEscapes: true
            },
            options: {
                enableMenu: false,
                menuOptions: {
                    settings: {
                        renderer: "svg"
                    }
                }
            },
            startup: {
                pageReady: () => {
                    callback && callback();

                    if (callbackArr.length > 0) {
                        for (const c of callbackArr) {
                            c();
                        }
                    }
                }
            }
        };

        const mergeConfig = Object.assign({}, defaultConfig, config);
        window.MathJax = mergeConfig;
    } else {
        if (callback) callbackArr.push(callback);
    }
};

initMathJax();
  • 编辑操作

    SORT = "sort", // 排序
    SAVE = "save", // 保存
    RENAME = "rename", // 重命名
    PREVIEW = "preview", // 预览
    STICKUP = "stickup", // 粘贴
    SHOW_HIDE = "show_hide", // 显示或隐藏
    IMPORT_PPT = "import_ppt", // 导入ppt
    CREATE_PAGE = "create_page", // 创建页
    GAME_CONFIG = "game_config", // 游戏配置
    HANDOFF_PAGE = "handoff_page", // 切换页
    INSERT_VIDEO = "insert_video", // 插入视频
    UPDATE_VIDEO = "update_video", // 更换视频
    SAVE_ELEMENT = "SAVE_ELEMENT", // 保存素材
    SAVE_TEMPLATE = "save_template", // 保存模板
    CREATE_FOLDER = "create_folder", // 创建文件夹
    SELECT_HYPERLINK = "select_hyperlink", // 选择超链接
    DELETE_HYPERLINK = "delete_hyperlink", // 删除超链接
    REMOVE_CARD_PAGE = "remove_card_page", // 删除卡或者页
    LESSON_PLAN_DESIGN = "lesson_plan_design", // 教案设计
    APPLY_BACKGROUND = "apply_background", // 当前背景应用于所有幻灯片

FAQs

Last updated on 24 Nov 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc