新增元素属性插件

可参考前面文档中的 元素参数重写&新增

新增元素缩放插件

编写元素属性

元素属性 scale.ts

export const scaleOption = (options) => {
  class ScaleOption {
    public name = 'scale';
    public options: { name?: string } = options;

    constructor(options) {
      this.options = options;
    }

    target = null;

    // 缩放参数,属于 样式参数,所以需要 一个 css 方法,用于设置样式.
    css(printElementTarget, value) {
      if (printElementTarget && printElementTarget.length) {
        if (value)
          return printElementTarget.css({
            transform: "scale(" + value + ")",
            "transform-origin": "0 0",
          });
      }
      return null;
    }
    createTarget(printElement, options, printElementType) {
      this.target = $(`
        <div class="hiprint-option-item hiprint-option-item-row">
          <div class="hiprint-option-item-label">
            ${options.name || "缩放"}
          </div>
          <div class="hiprint-option-item-field">
            <input type="number" class="auto-submit"/>
          </div>
        </div>
      `);
      return this.target;
    }
    getValue() {
      const t = this.target.find("input").val();
      if (t) return parseFloat(t.toString());
    }
    setValue(t) {
      this.target.find("input").val(t);
    }
    destroy() {
      this.target.remove();
    }
  }
  return function () {
    return new ScaleOption(options)
  };
};

编写插件

插件主体 index.ts

// 插件主体

import type {PluginOptions} from "sv-print";
import {scaleOption} from "./scale";

/**
 * 插件
 * @param config 自定义 你插件的 配置
 */
export default function (config: { name?: string } = {}): PluginOptions {
  // 插件主体
  return {
    name: "scale", // 插件名称
    description: "缩放参数", // 插件描述
    leastHiprintVersion: "0.1.0", // 最低兼容版本
    hooks: [
      // 接受多个 hook 组合
      {
        hook: "init", // 这是 hook 关键
        name: "scale", // 名称(可选) 
        description: "scale", // 描述(可选)
        priority: 1, // 排序优先级 (可选)
        run: ({Config, OptionItems, ElementTypes, hinnn, hiprint}) => {
          try {
            // 注册 参数
            Config.registerItems([scaleOption(config)]);
            // 给哪些元素 设置启用 这个参数
            const keys = Object.keys(Config);
            const keyLen = keys.length;
            let elementTypeKeys = []; // 元素类型
            for (let i = 0; i < keyLen; i++) {
              const key = keys[i];
              // 有 tabs 的 视为 元素类型: eg: text,image
              if (Config[key].tabs && Config[key].tabs.length > 0) {
                elementTypeKeys.push(key);
              }
            }
            elementTypeKeys.forEach((key) => {
              // 给元素类型 设置 启用 这个参数
              // 方式1. 修改Config
              const tabIndex = Config[key].tabs.findIndex((t) => t.name === "样式");
              if (tabIndex > -1) {
                // 查找 是否 有颜色参数,没有则插入到 样式tab 第一个
                const idx = Config[key].tabs[tabIndex].options.findIndex((o) => o.name === "color") || 0;
                Config[key].tabs[tabIndex].options.splice(Math.max(idx - 1, 0), 0, {
                  name: "scale",
                  hidden: false,
                });
              }
              // 方式2. setConfig api 
              // hiprint.setConfig({
              //   [key]: {
              //     tabs: [
              //       {},
              //       // 当修改第二个 tabs 时,必须把他之前的 tabs 都列举出来.
              //       {
              //         name: '样式', options: [
              //           {
              //             name:'scale',
              //             before: 'color', // 自定义参数，插入在 color 之前
              //             hidden: false
              //           },
              //         ]
              //       },
              //     ]
              //   }
              // });
            });
          } catch (error) {
            console.error('init hook error');
            console.error(error);
          }
        },
      },
    ],
  };
}