@xrubik/fabric-to-leafer-elements 0.0.0-stage → 1.0.0

package/dist/index.mjs

@@ -0,0 +1,1071 @@
+// src/button.js
+import { Box, Rect, Text, Line } from "leafer-ui";
+
+// src/utils.js
+function normalizeColor(color) {
+  if (typeof color !== "string") return color;
+  const value = color.trim();
+  const rgbaHex = value.match(/^#([0-9a-fA-F]{8})$/);
+  if (!rgbaHex) return color;
+  const hex = rgbaHex[1];
+  const alpha = parseInt(hex.slice(6, 8), 16);
+  if (alpha === 255) return "#" + hex.slice(0, 6);
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  return `rgba(${r},${g},${b},${Math.round(alpha / 255 * 1e3) / 1e3})`;
+}
+
+// src/button.js
+var DEFAULT_FILL = "#969696";
+var DEFAULT_FONT = "Times New Roman";
+var DEFAULT_FONT_WEIGHT = "normal";
+var EDGE_LIGHT = "#ffffff";
+var EDGE_DARK = "#020000";
+var EDGE_PRESS_LIGHT = "#EFEFEF";
+var EDGE_PRESS_DARK = "#5F5F5F";
+var normalizeButtonFill = function(fill, fallback = DEFAULT_FILL) {
+  return normalizeColor(fill === "" || fill === null || typeof fill === "undefined" ? fallback : fill);
+};
+var normalizeButtonTextFill = function(fill) {
+  return normalizeColor(fill === "" || fill === null || typeof fill === "undefined" ? "#000000" : fill);
+};
+var toTextWrap = function(wordWrap) {
+  if (wordWrap === "char") return "break";
+  return "none";
+};
+var toWordWrap = function(textWrap) {
+  if (textWrap === "break") return "char";
+  if (textWrap === "none") return "none";
+  return "word";
+};
+var requestRubikRender = function(obj) {
+  const leafer = obj && obj.leafer;
+  if (leafer) {
+    leafer.requestRender();
+  }
+};
+var Button = class extends Box {
+  get __tag() {
+    return "Button";
+  }
+  constructor(data) {
+    let {
+      text,
+      fontSize,
+      fontWeight,
+      fontColor,
+      fontFamily,
+      fill,
+      backgroundColor,
+      buttonScaleBaseWidth,
+      buttonScaleBaseHeight,
+      wordWrap,
+      down,
+      ...buttonData
+    } = data || {};
+    if ((fontColor === void 0 || fontColor === null) && backgroundColor !== void 0 && fill !== void 0 && fill !== backgroundColor) {
+      fontColor = fill;
+    }
+    super({
+      // button: true,
+      ...buttonData,
+      cursor: "pointer"
+    });
+    this.childlessJSON = true;
+    this.defaultFill = normalizeButtonFill(backgroundColor === void 0 ? fill : backgroundColor);
+    this.originalFill = this.defaultFill;
+    this.buttonScaleBaseWidth = buttonScaleBaseWidth || this.width || 0;
+    this.buttonScaleBaseHeight = buttonScaleBaseHeight || this.height || 0;
+    this._wordWrap = wordWrap || "word";
+    this._down = !!down;
+    fontSize = fontSize || 12;
+    this.fill = this.originalFill;
+    this.hoverElement = new Rect({
+      x: 0,
+      y: 0,
+      width: this.width,
+      height: this.height,
+      fill: "rgba(64,32,125,0.16)",
+      stroke: "transparent",
+      strokeWidth: 0,
+      visible: false
+    });
+    this.textElement = new Text({
+      text,
+      fontSize,
+      fill: normalizeButtonTextFill(fontColor),
+      textAlign: "center",
+      verticalAlign: "middle",
+      fontFamily: fontFamily || DEFAULT_FONT,
+      textWrap: toTextWrap(this._wordWrap),
+      x: 0,
+      y: 0,
+      width: this.width,
+      height: this.height,
+      fontWeight: fontWeight || DEFAULT_FONT_WEIGHT
+    });
+    this.topLine = new Line({
+      points: [0, 0, this.width, 0],
+      stroke: EDGE_LIGHT,
+      strokeWidth: 0.5
+    });
+    this.leftLine = new Line({
+      points: [0, 0, 0, this.height],
+      stroke: EDGE_LIGHT,
+      strokeWidth: 0.5
+    });
+    this.rightLine = new Line({
+      points: [this.width, 0, this.width, this.height],
+      stroke: EDGE_DARK,
+      strokeWidth: 0.5
+    });
+    this.bottomLine = new Line({
+      points: [0, this.height, this.width, this.height],
+      stroke: EDGE_DARK,
+      strokeWidth: 0.5
+    });
+    this.add(this.hoverElement);
+    this.add(this.topLine);
+    this.add(this.bottomLine);
+    this.add(this.rightLine);
+    this.add(this.leftLine);
+    this.add(this.textElement);
+    this.updateLayout();
+  }
+  get type() {
+    return "button";
+  }
+  set type(value) {
+    this._type = value;
+  }
+  get backgroundColor() {
+    return this.originalFill;
+  }
+  set backgroundColor(value) {
+    this.setButtonFill(value);
+  }
+  set(data, transition) {
+    if (typeof data === "string") {
+      data = { [data]: transition };
+    }
+    if (!data || typeof data !== "object") {
+      return super.set(data, transition);
+    }
+    const hasBackgroundColor = Object.prototype.hasOwnProperty.call(data, "backgroundColor");
+    const hasFill = Object.prototype.hasOwnProperty.call(data, "fill");
+    const next = { ...data };
+    if (hasBackgroundColor) {
+      delete next.backgroundColor;
+    }
+    if (hasFill) {
+      delete next.fill;
+    }
+    if (Object.prototype.hasOwnProperty.call(next, "wordWrap")) {
+      this.wordWrap = next.wordWrap;
+      delete next.wordWrap;
+    }
+    if (Object.prototype.hasOwnProperty.call(next, "splitByGrapheme")) {
+      if (!Object.prototype.hasOwnProperty.call(data, "wordWrap")) {
+        this.wordWrap = data.splitByGrapheme ? "char" : this.wordWrap;
+      }
+      delete next.splitByGrapheme;
+    }
+    if (Object.prototype.hasOwnProperty.call(next, "down")) {
+      this.down = !!next.down;
+      delete next.down;
+    }
+    if (Object.prototype.hasOwnProperty.call(next, "text")) {
+      this.text = next.text === void 0 || next.text === null ? "" : String(next.text);
+      delete next.text;
+    }
+    if (Object.prototype.hasOwnProperty.call(next, "fontSize")) {
+      this.fontSize = next.fontSize;
+      delete next.fontSize;
+    }
+    if (Object.prototype.hasOwnProperty.call(next, "fontColor")) {
+      this.fontColor = next.fontColor;
+      delete next.fontColor;
+    }
+    if (Object.prototype.hasOwnProperty.call(next, "fontFamily")) {
+      this.fontFamily = next.fontFamily;
+      delete next.fontFamily;
+    }
+    if (Object.prototype.hasOwnProperty.call(next, "fontWeight")) {
+      this.fontWeight = next.fontWeight;
+      delete next.fontWeight;
+    }
+    const result = Object.keys(next).length ? super.set(next, transition) : this;
+    if (hasBackgroundColor) {
+      this.setButtonFill(data.backgroundColor);
+    } else if (hasFill) {
+      this.setButtonFill(data.fill);
+    }
+    if (data && (Object.prototype.hasOwnProperty.call(data, "width") || Object.prototype.hasOwnProperty.call(data, "height") || Object.prototype.hasOwnProperty.call(data, "strokeWidth"))) {
+      this.updateLayout();
+    }
+    return result;
+  }
+  setButtonFill(value) {
+    this.originalFill = normalizeButtonFill(value, this.defaultFill || DEFAULT_FILL);
+    this.fill = this.originalFill;
+    requestRubikRender(this);
+    return this;
+  }
+  setButtonScale(key, value) {
+    value = typeof value === "undefined" ? 1 : value;
+    if (key === "scaleX") {
+      this.width = (this.buttonScaleBaseWidth || this.width || 0) * Math.abs(value);
+    } else {
+      this.height = (this.buttonScaleBaseHeight || this.height || 0) * Math.abs(value);
+    }
+    this.updateLayout();
+    requestRubikRender(this);
+    return this;
+  }
+  updateLayout() {
+    const width = this.width || 0;
+    const height = this.height || 0;
+    const strokeWidth = Math.min(4, Math.max(0.5, Number(this.strokeWidth) || 1));
+    this.textElement && this.textElement.set({ width, height });
+    this.hoverElement && this.hoverElement.set({ width, height });
+    this.topLine && this.topLine.set({ points: [0, 0, width, 0], strokeWidth });
+    this.leftLine && this.leftLine.set({ points: [0, 0, 0, height], strokeWidth });
+    this.rightLine && this.rightLine.set({ points: [width, 0, width, height], strokeWidth });
+    this.bottomLine && this.bottomLine.set({ points: [0, height, width, height], strokeWidth });
+    this.updatePressState();
+  }
+  get down() {
+    return !!this._down;
+  }
+  set down(value) {
+    this._down = !!value;
+    this.updatePressState();
+    requestRubikRender(this);
+  }
+  // 运行态唯一的交互状态入口: 悬停/按下一起给, 元素自己不再监听指针事件。
+  // Fabric 里被其它图元盖住的按钮也会变色, 所以状态由运行态按穿透目标统一驱动。
+  setInteraction(state) {
+    const blocked = !!this.disabled;
+    const hovered = !blocked && !!(state && state.hovered);
+    const pressed = !blocked && !!(state && state.pressed);
+    if (this._hovered === hovered && this._pressed === pressed) return;
+    this._hovered = hovered;
+    this._pressed = pressed;
+    this.updatePressState();
+    requestRubikRender(this);
+  }
+  // 按下 = 文字右下移 1px + 边框倒角翻转 + 悬停遮罩隐藏, 与 Fabric Button 一致
+  updatePressState() {
+    const pressed = this._down || !!this._pressed;
+    const lightEdge = pressed ? EDGE_PRESS_DARK : EDGE_LIGHT;
+    const darkEdge = pressed ? EDGE_PRESS_LIGHT : EDGE_DARK;
+    if (this.topLine && this.topLine.stroke !== lightEdge) this.topLine.stroke = lightEdge;
+    if (this.leftLine && this.leftLine.stroke !== lightEdge) this.leftLine.stroke = lightEdge;
+    if (this.rightLine && this.rightLine.stroke !== darkEdge) this.rightLine.stroke = darkEdge;
+    if (this.bottomLine && this.bottomLine.stroke !== darkEdge) this.bottomLine.stroke = darkEdge;
+    if (this.hoverElement) this.hoverElement.visible = !!this._hovered && !pressed;
+    if (this.textElement) {
+      const offset = pressed ? 1 : 0;
+      this.textElement.x = offset;
+      this.textElement.y = offset;
+    }
+  }
+  toJSON(options) {
+    const data = super.toJSON(options);
+    delete data.children;
+    data.type = "button";
+    data.text = this.text;
+    data.fontSize = this.fontSize;
+    data.fontFamily = this.fontFamily;
+    data.fontWeight = this.fontWeight;
+    data.fontColor = this.fontColor;
+    data.fill = this.originalFill;
+    data.backgroundColor = this.originalFill;
+    data.buttonScaleBaseWidth = this.buttonScaleBaseWidth;
+    data.buttonScaleBaseHeight = this.buttonScaleBaseHeight;
+    data.wordWrap = this.wordWrap;
+    data.down = this.down;
+    return data;
+  }
+  get wordWrap() {
+    return this._wordWrap || toWordWrap(this.textElement && this.textElement.textWrap);
+  }
+  set wordWrap(value) {
+    this._wordWrap = value || "word";
+    if (this.textElement) {
+      this.textElement.textWrap = toTextWrap(this._wordWrap);
+      requestRubikRender(this);
+    }
+  }
+  get text() {
+    return this.textElement.text;
+  }
+  set text(value) {
+    this.textElement.text = value;
+    requestRubikRender(this);
+  }
+  get fontSize() {
+    return this.textElement.fontSize;
+  }
+  set fontSize(value) {
+    this.textElement.fontSize = value;
+  }
+  get fontFamily() {
+    return this.textElement.fontFamily;
+  }
+  set fontFamily(value) {
+    this.textElement.fontFamily = value;
+  }
+  get fontColor() {
+    return this.textElement.fill;
+  }
+  set fontColor(value) {
+    this.textElement.fill = normalizeButtonTextFill(value);
+    requestRubikRender(this);
+  }
+  get fontWeight() {
+    return this.textElement.fontWeight;
+  }
+  set fontWeight(value) {
+    this.textElement.fontWeight = value;
+  }
+};
+Button.registerUI();
+var button_default = Button;
+
+// src/bar.js
+import { Box as Box2, Path, PropertyEvent, Rect as Rect2 } from "leafer-ui";
+var clamp = function(value, min, max) {
+  value = Number(value) || 0;
+  return Math.max(min, Math.min(max, value));
+};
+var normalizeFill = function(fill) {
+  return fill === "" || fill === null || typeof fill === "undefined" ? "transparent" : fill;
+};
+var hasOwn = function(data, key) {
+  return data && Object.prototype.hasOwnProperty.call(data, key);
+};
+var requestFrame = function(callback) {
+  if (typeof window !== "undefined" && window.requestAnimationFrame) {
+    return window.requestAnimationFrame(callback);
+  }
+  return setTimeout(() => callback(Date.now()), 16);
+};
+var cancelFrame = function(frameId) {
+  if (!frameId) {
+    return;
+  }
+  if (typeof window !== "undefined" && window.cancelAnimationFrame) {
+    window.cancelAnimationFrame(frameId);
+  } else {
+    clearTimeout(frameId);
+  }
+};
+var getNow = function() {
+  if (typeof performance !== "undefined" && performance.now) {
+    return performance.now();
+  }
+  return Date.now();
+};
+var requestRubikRender2 = function(obj) {
+  const leafer = obj && obj.leafer;
+  if (leafer) {
+    leafer.requestRender();
+  }
+};
+var Bar = class extends Box2 {
+  get __tag() {
+    return "Bar";
+  }
+  constructor(data = {}) {
+    const inputData = { ...data };
+    delete inputData.children;
+    delete inputData.tag;
+    const {
+      fill,
+      stroke,
+      strokeWidth,
+      backgroundFill,
+      backgroundColor,
+      fpct,
+      fdir,
+      fstyle,
+      ...barData
+    } = inputData;
+    super({
+      ...barData,
+      hitFill: "all",
+      overflow: "hide",
+      cursor: barData.cursor
+    });
+    this.childlessJSON = true;
+    this._barFill = normalizeFill(fill);
+    this._barStroke = stroke;
+    this._barStrokeWidth = strokeWidth || 1;
+    this._backgroundFill = backgroundFill || backgroundColor || "transparent";
+    this._fpct = fpct === void 0 ? 0 : Number(fpct) || 0;
+    this._fdir = Number(fdir) || 0;
+    this._fstyle = fstyle || "rect";
+    this.backgroundElement = new Rect2({
+      x: 0,
+      y: 0,
+      width: this.width || 0,
+      height: this.height || 0,
+      fill: this._backgroundFill,
+      stroke: "transparent",
+      strokeWidth: 0
+    });
+    this.fillElement = new Path({
+      fill: this._barFill,
+      stroke: "transparent",
+      strokeWidth: 0
+    });
+    this.strokeElement = new Path({
+      fill: "transparent",
+      stroke: this._barStroke,
+      strokeWidth: this._barStrokeWidth
+    });
+    this.add(this.backgroundElement);
+    this.add(this.fillElement);
+    this.add(this.strokeElement);
+    this.updateBar();
+    this.on(PropertyEvent.CHANGE, (event) => {
+      const name = event && event.attrName;
+      if (!name || name === "width" || name === "height") this.updateBar();
+    });
+  }
+  get type() {
+    return "bar";
+  }
+  set type(value) {
+    this._type = value;
+  }
+  get fill() {
+    return this._barFill;
+  }
+  set fill(value) {
+    this._barFill = normalizeFill(value);
+    if (this.fillElement) {
+      this.fillElement.fill = this._barFill;
+    }
+  }
+  get stroke() {
+    return this._barStroke;
+  }
+  set stroke(value) {
+    this._barStroke = value;
+    if (this.strokeElement) {
+      this.strokeElement.stroke = value;
+    }
+  }
+  get strokeWidth() {
+    return this._barStrokeWidth;
+  }
+  set strokeWidth(value) {
+    this._barStrokeWidth = value || 0;
+    if (this.strokeElement) {
+      this.strokeElement.strokeWidth = this._barStrokeWidth;
+    }
+  }
+  get backgroundFill() {
+    return this._backgroundFill;
+  }
+  set backgroundFill(value) {
+    this._backgroundFill = value || "transparent";
+    if (this.backgroundElement) {
+      this.backgroundElement.fill = this._backgroundFill;
+    }
+  }
+  get backgroundColor() {
+    return this._backgroundFill;
+  }
+  set backgroundColor(value) {
+    this.backgroundFill = value;
+  }
+  get fpct() {
+    return this._fpct;
+  }
+  set fpct(value) {
+    this._fpct = Number(value) || 0;
+    this.updateBar();
+  }
+  get fdir() {
+    return this._fdir;
+  }
+  set fdir(value) {
+    this._fdir = Number(value) || 0;
+    this.updateBar();
+  }
+  get fstyle() {
+    return this._fstyle;
+  }
+  set fstyle(value) {
+    this._fstyle = value || "rect";
+    this.updateBar();
+  }
+  set(data, transition) {
+    if (typeof data === "string") {
+      data = { [data]: transition };
+    }
+    const baseData = { ...data || {} };
+    if (hasOwn(data, "fill")) {
+      this._barFill = normalizeFill(data.fill);
+      delete baseData.fill;
+    }
+    if (hasOwn(data, "stroke")) {
+      this._barStroke = data.stroke;
+      delete baseData.stroke;
+    }
+    if (hasOwn(data, "strokeWidth")) {
+      this._barStrokeWidth = data.strokeWidth || 0;
+      delete baseData.strokeWidth;
+    }
+    if (hasOwn(data, "backgroundFill")) {
+      this._backgroundFill = normalizeFill(data.backgroundFill);
+      delete baseData.backgroundFill;
+    }
+    if (hasOwn(data, "backgroundColor")) {
+      this._backgroundFill = normalizeFill(data.backgroundColor);
+      delete baseData.backgroundColor;
+    }
+    if (hasOwn(data, "fpct")) {
+      this._fpct = Number(data.fpct) || 0;
+      this.fpctSeted = true;
+      delete baseData.fpct;
+    }
+    if (hasOwn(data, "fdir")) {
+      this._fdir = Number(data.fdir) || 0;
+      delete baseData.fdir;
+    }
+    if (hasOwn(data, "fstyle")) {
+      this._fstyle = data.fstyle || "rect";
+      delete baseData.fstyle;
+    }
+    const result = super.set(baseData, transition);
+    this.updateBar();
+    return result;
+  }
+  setFpct(value, option = {}) {
+    const target = Number(value) || 0;
+    const loop = this.leafer && this.leafer.__loop || 0;
+    if (option.animate === false || !this.fpctSeted || loop < 4) {
+      this.fpctSeted = true;
+      this.cancelFpctAnimation();
+      this._fpct = target;
+      this.updateBar();
+      return this;
+    }
+    return this.animateFpct(target, option);
+  }
+  animateFpct(target, option = {}) {
+    const start = Number(this._fpct) || 0;
+    const duration = Math.max(0, Number(option.duration) || 500);
+    if (duration === 0 || start === target) {
+      this.cancelFpctAnimation();
+      this._fpct = target;
+      this.updateBar();
+      return this;
+    }
+    this.fpctSeted = true;
+    this.cancelFpctAnimation();
+    const startTime = getNow();
+    const step = (time) => {
+      const progress = Math.min(1, (time - startTime) / duration);
+      this._fpct = start + (target - start) * progress;
+      this.updateBar();
+      if (progress < 1) {
+        this._fpctFrame = requestFrame(step);
+      } else {
+        this._fpctFrame = null;
+      }
+    };
+    this._fpctFrame = requestFrame(step);
+    return this;
+  }
+  cancelFpctAnimation() {
+    cancelFrame(this._fpctFrame);
+    this._fpctFrame = null;
+  }
+  toJSON(options) {
+    const data = super.toJSON(options);
+    data.type = "bar";
+    data.fill = this._barFill;
+    data.stroke = this._barStroke;
+    data.strokeWidth = this._barStrokeWidth;
+    data.backgroundFill = this._backgroundFill;
+    data.backgroundColor = this._backgroundFill;
+    data.fpct = this._fpct;
+    data.fdir = this._fdir;
+    data.fstyle = this._fstyle;
+    return data;
+  }
+  updateBar() {
+    if (!this.fillElement || !this.strokeElement || !this.backgroundElement) {
+      return;
+    }
+    const width = Math.max(Number(this.width) || 0, 0);
+    const height = Math.max(Number(this.height) || 0, 0);
+    this.backgroundElement.set({
+      x: 0,
+      y: 0,
+      width,
+      height,
+      fill: this._backgroundFill
+    });
+    if (this._fstyle === "circle") {
+      this.updateCircleBar(width, height);
+    } else {
+      this.updateRectBar(width, height);
+    }
+    requestRubikRender2(this);
+  }
+  updateRectBar(width, height) {
+    let x = 0;
+    let y = 0;
+    let w = width;
+    let h = height;
+    let fdir = this._fdir % 5;
+    if (fdir < 0) {
+      fdir += 5;
+    }
+    let fpct = clamp(this._fpct, fdir < 4 ? 0 : -1, 1);
+    switch (fdir) {
+      case 1:
+        w = width * fpct;
+        break;
+      case 2:
+        h = height * fpct;
+        break;
+      case 3:
+        w = width * fpct;
+        x = width - w;
+        break;
+      case 4:
+        if (fpct >= 0) {
+          h = height / 2 * fpct;
+          y = height / 2 - h;
+        } else {
+          h = height / 2 * -fpct;
+          y = height / 2;
+        }
+        break;
+      case 0:
+      default:
+        h = height * fpct;
+        y = height - h;
+        break;
+    }
+    this.fillElement.set({
+      path: this.rectPath(x, y, w, h),
+      fill: this._barFill
+    });
+    this.strokeElement.set({
+      path: this.rectPath(0, 0, width, height),
+      stroke: this._barStroke,
+      strokeWidth: this._barStrokeWidth
+    });
+  }
+  updateCircleBar(width, height) {
+    const fpct = clamp(this._fpct, 0, 1);
+    let fdir = this._fdir % 4;
+    if (fdir < 0) {
+      fdir += 4;
+    }
+    this.fillElement.set({
+      path: this.circleFillPath(width, height, fpct, fdir),
+      fill: this._barFill
+    });
+    this.strokeElement.set({
+      path: this.ellipsePath(width, height),
+      stroke: this._barStroke,
+      strokeWidth: this._barStrokeWidth
+    });
+  }
+  rectPath(x, y, width, height) {
+    if (width <= 0 || height <= 0) {
+      return "";
+    }
+    return `M ${x} ${y} L ${x + width} ${y} L ${x + width} ${y + height} L ${x} ${y + height} Z`;
+  }
+  ellipsePath(width, height) {
+    if (width <= 0 || height <= 0) {
+      return "";
+    }
+    const rx = width / 2;
+    const ry = height / 2;
+    const cx = rx;
+    const cy = ry;
+    return `M ${cx - rx} ${cy} A ${rx} ${ry} 0 1 0 ${cx + rx} ${cy} A ${rx} ${ry} 0 1 0 ${cx - rx} ${cy} Z`;
+  }
+  circleFillPath(width, height, fpct, fdir) {
+    if (width <= 0 || height <= 0 || fpct <= 0) {
+      return "";
+    }
+    if (fpct >= 1) {
+      return this.ellipsePath(width, height);
+    }
+    const rx = width / 2;
+    const ry = height / 2;
+    const cx = rx;
+    const cy = ry;
+    let startAngle = Math.asin((0.5 - fpct) * 2);
+    let endAngle = Math.PI - startAngle;
+    startAngle += Math.PI / 2 * fdir;
+    endAngle += Math.PI / 2 * fdir;
+    const start = this.ellipsePoint(cx, cy, rx, ry, startAngle);
+    const end = this.ellipsePoint(cx, cy, rx, ry, endAngle);
+    const largeArc = endAngle - startAngle > Math.PI ? 1 : 0;
+    return `M ${start.x} ${start.y} A ${rx} ${ry} 0 ${largeArc} 1 ${end.x} ${end.y} Z`;
+  }
+  ellipsePoint(cx, cy, rx, ry, angle) {
+    return {
+      x: cx + Math.cos(angle) * rx,
+      y: cy + Math.sin(angle) * ry
+    };
+  }
+};
+Bar.registerUI();
+var bar_default = Bar;
+
+// src/circle.js
+import { Path as Path2 } from "leafer-ui";
+var TWO_PI = Math.PI * 2;
+var buildPath = function(width, height, startAngle, endAngle, filled) {
+  const rx = Math.max(0, Number(width) || 0) / 2;
+  const ry = Math.max(0, Number(height) || 0) / 2;
+  if (!rx || !ry) {
+    return "";
+  }
+  const cx = rx;
+  const cy = ry;
+  let start = Number(startAngle) || 0;
+  let end = Number(endAngle) || 0;
+  if (Math.abs(end - start) >= TWO_PI - 1e-4) {
+    return `M ${cx - rx} ${cy} A ${rx} ${ry} 0 1 0 ${cx + rx} ${cy} A ${rx} ${ry} 0 1 0 ${cx - rx} ${cy} Z`;
+  }
+  if (start === end) {
+    return "";
+  }
+  if (Math.abs(end - start) > TWO_PI) {
+    end = start + TWO_PI * Math.sign(end - start);
+  }
+  const sx = cx + Math.cos(start) * rx;
+  const sy = cy + Math.sin(start) * ry;
+  const ex = cx + Math.cos(end) * rx;
+  const ey = cy + Math.sin(end) * ry;
+  const largeArc = Math.abs(end - start) > Math.PI ? 1 : 0;
+  const sweep = end > start ? 1 : 0;
+  if (filled) {
+    return `M ${cx} ${cy} L ${sx} ${sy} A ${rx} ${ry} 0 ${largeArc} ${sweep} ${ex} ${ey} Z`;
+  }
+  return `M ${sx} ${sy} A ${rx} ${ry} 0 ${largeArc} ${sweep} ${ex} ${ey}`;
+};
+var Circle = class extends Path2 {
+  get __tag() {
+    return "Circle";
+  }
+  constructor(data = {}) {
+    const input = { ...data };
+    const startAngle = input.startAngle === void 0 ? 0 : input.startAngle;
+    const endAngle = input.endAngle === void 0 ? TWO_PI : input.endAngle;
+    const filled = input.fill !== "" && input.fill !== void 0 && input.fill !== null && input.fill !== "transparent";
+    super({
+      ...input,
+      path: buildPath(input.width, input.height, startAngle, endAngle, filled)
+    });
+    this.startAngle = startAngle;
+    this.endAngle = endAngle;
+    this._filled = filled;
+  }
+  get type() {
+    return "circle";
+  }
+  set type(value) {
+    this._type = value;
+  }
+  get startAngle() {
+    return this._startAngle || 0;
+  }
+  set startAngle(value) {
+    this._startAngle = Number(value) || 0;
+    this.updateArc();
+  }
+  get endAngle() {
+    return this._endAngle === void 0 ? TWO_PI : this._endAngle;
+  }
+  set endAngle(value) {
+    this._endAngle = Number(value) || 0;
+    this.updateArc();
+  }
+  set(data, transition) {
+    if (typeof data === "string") {
+      data = { [data]: transition };
+    }
+    if (data && typeof data === "object") {
+      if (Object.prototype.hasOwnProperty.call(data, "startAngle")) {
+        this._startAngle = Number(data.startAngle) || 0;
+      }
+      if (Object.prototype.hasOwnProperty.call(data, "endAngle")) {
+        this._endAngle = Number(data.endAngle) || 0;
+      }
+      if (Object.prototype.hasOwnProperty.call(data, "fill")) {
+        const fill = data.fill;
+        this._filled = fill !== "" && fill !== void 0 && fill !== null && fill !== "transparent";
+      }
+    }
+    const result = super.set(data, transition);
+    if (data && typeof data === "object" && (Object.prototype.hasOwnProperty.call(data, "width") || Object.prototype.hasOwnProperty.call(data, "height") || Object.prototype.hasOwnProperty.call(data, "startAngle") || Object.prototype.hasOwnProperty.call(data, "endAngle") || Object.prototype.hasOwnProperty.call(data, "fill"))) {
+      this.updateArc();
+    }
+    return result;
+  }
+  updateArc() {
+    this.path = buildPath(this.width, this.height, this.startAngle, this.endAngle, this._filled);
+  }
+  toJSON(options) {
+    const data = super.toJSON(options);
+    data.type = "circle";
+    data.startAngle = this.startAngle;
+    data.endAngle = this.endAngle;
+    return data;
+  }
+};
+Circle.registerUI();
+var circle_default = Circle;
+
+// src/layer.js
+import { Group } from "leafer-ui";
+var Layer = class extends Group {
+  get __tag() {
+    return "Layer";
+  }
+  constructor(data = {}) {
+    const next = { ...data || {} };
+    delete next.x;
+    delete next.y;
+    delete next.scaleX;
+    delete next.scaleY;
+    delete next.rotation;
+    Object.keys(next).forEach((key) => {
+      if (next[key] === void 0) delete next[key];
+    });
+    next.x = 0;
+    next.y = 0;
+    next.editable = false;
+    next.draggable = false;
+    next.hittable = true;
+    next.hitChildren = true;
+    super(next);
+  }
+  get type() {
+    return "layer";
+  }
+  set type(value) {
+    this._type = value;
+  }
+};
+Layer.registerUI();
+var layer_default = Layer;
+
+// src/lib.js
+import { Group as Group2 } from "leafer-ui";
+var Lib = class extends Group2 {
+  get __tag() {
+    return "Lib";
+  }
+  constructor(data = {}) {
+    const {
+      libName,
+      originParam,
+      param,
+      ...groupData
+    } = data || {};
+    super(groupData);
+    this.libName = libName || "";
+    this.originParam = originParam || {};
+    this.param = param || {};
+  }
+  get type() {
+    return "lib";
+  }
+  set type(value) {
+    this._type = value;
+  }
+};
+Lib.registerUI();
+var lib_default = Lib;
+
+// src/text.js
+import { Box as Box3, Text as Text2 } from "leafer-ui";
+var TEXT_PROPS = [
+  "text",
+  "fontSize",
+  "fontFamily",
+  "fontWeight",
+  "fontStyle",
+  "letterSpacing",
+  "lineHeight",
+  "textAlign",
+  "verticalAlign",
+  "textDecoration",
+  "textWrap",
+  "fill",
+  "stroke",
+  "strokeWidth",
+  "shadow",
+  "boxStyle",
+  "textBackgroundColor"
+];
+var DEFAULT_FONT_SIZE = 12;
+var DEFAULT_FILL2 = "#000000";
+var pickTextProps = function(data) {
+  const props = {};
+  TEXT_PROPS.forEach((key) => {
+    if (data[key] !== void 0) {
+      props[key] = data[key];
+    }
+  });
+  return props;
+};
+var IText = class extends Box3 {
+  get __tag() {
+    return "IText";
+  }
+  constructor(data = {}) {
+    const input = data || {};
+    const textData = pickTextProps(input);
+    const groupData = { ...input };
+    TEXT_PROPS.forEach((key) => {
+      delete groupData[key];
+    });
+    delete groupData.children;
+    super({ ...groupData, fill: "transparent" });
+    this.childlessJSON = true;
+    this.editInner = "IText";
+    this.textBox = true;
+    this.textElement = new Text2({
+      x: 0,
+      y: 0,
+      around: "top-left",
+      textWrap: "none",
+      fontSize: DEFAULT_FONT_SIZE,
+      fill: DEFAULT_FILL2,
+      hittable: false,
+      draggable: false,
+      editable: false,
+      ...textData
+    });
+    this.add(this.textElement);
+    this.updateText();
+  }
+  set(data, transition) {
+    if (typeof data === "string") {
+      data = { [data]: transition };
+    }
+    if (!data || typeof data !== "object") {
+      return super.set(data, transition);
+    }
+    const textData = pickTextProps(data);
+    const rest = { ...data };
+    TEXT_PROPS.forEach((key) => {
+      delete rest[key];
+    });
+    const result = Object.keys(rest).length ? super.set(rest, transition) : this;
+    if (this.textElement) {
+      if (Object.keys(textData).length) {
+        this.textElement.set(textData);
+      }
+      if (Object.keys(textData).length || Object.prototype.hasOwnProperty.call(rest, "width") || Object.prototype.hasOwnProperty.call(rest, "height")) {
+        this.updateText();
+      }
+    }
+    return result;
+  }
+  /**
+   * 换行模式要固定宽度才能断行；不换行时交还内容自适应。
+   * 盒子尺寸也在这里同步给内部文字。
+   */
+  updateText() {
+    const text = this.textElement;
+    if (!text) return;
+    const { width } = this.boxSize();
+    if (text.textWrap !== "none" && width > 0) {
+      if (Number(text.width) !== width) {
+        text.width = width;
+      }
+    } else if (text.width !== void 0 && text.width !== null) {
+      text.width = null;
+    }
+    this.syncFit();
+  }
+  /** 盒子尺寸：转换/保存下来的宽高是权威值，缺省时按内容走 */
+  boxSize() {
+    const input = this.__;
+    return {
+      width: Number(input.__getInput("width")) || 0,
+      height: Number(input.__getInput("height")) || 0
+    };
+  }
+  /** 按盒子宽高拉伸内部文字，让文字铺满包围盒（文字会被拉变形） */
+  syncFit() {
+    const text = this.textElement;
+    const layout = text && text.__layout;
+    if (!layout) return;
+    if (text.x) text.x = 0;
+    if (text.y) text.y = 0;
+    const { width, height } = this.boxSize();
+    const natural = layout.boxBounds;
+    if (!width || !height || !natural.width || !natural.height) return;
+    const scaleX = width / natural.width;
+    const scaleY = height / natural.height;
+    if (Math.abs(Number(text.scaleX) - scaleX) > 1e-4) text.scaleX = scaleX;
+    if (Math.abs(Number(text.scaleY) - scaleY) > 1e-4) text.scaleY = scaleY;
+  }
+  // 排版发生在布局阶段：按盒子宽高重新拉伸内部文字（Box 的包围盒就是宽高，不用再改）
+  __updateBoxBounds(secondLayout, bounds) {
+    this.syncFit();
+    super.__updateBoxBounds(secondLayout, bounds);
+  }
+  toJSON(options) {
+    const data = super.toJSON(options);
+    const text = this.textElement;
+    if (text) {
+      TEXT_PROPS.forEach((key) => {
+        const value = text[key];
+        if (value !== void 0) {
+          data[key] = value;
+        }
+      });
+    }
+    delete data.children;
+    return data;
+  }
+};
+TEXT_PROPS.forEach((key) => {
+  Object.defineProperty(IText.prototype, key, {
+    configurable: true,
+    get() {
+      const text = this.textElement;
+      return text ? text[key] : void 0;
+    },
+    set(value) {
+      const text = this.textElement;
+      if (!text) return;
+      if (text[key] === value) return;
+      text[key] = value;
+      this.updateText();
+    }
+  });
+});
+IText.registerUI();
+var text_default = IText;
+export {
+  bar_default as Bar,
+  button_default as Button,
+  circle_default as Circle,
+  text_default as IText,
+  layer_default as Layer,
+  lib_default as Lib
+};
+//# sourceMappingURL=index.mjs.map