@visactor/vrender 0.9.0-alpha.0

package/es/graphic/theme.js

@@ -0,0 +1,117 @@
+import { DefaultArcAttribute, DefaultAreaAttribute, DefaultCircleAttribute, DefaultGlyphAttribute, DefaultGroupAttribute, DefaultImageAttribute, DefaultLineAttribute, DefaultPathAttribute, DefaultPolygonAttribute, DefaultRect3dAttribute, DefaultRectAttribute, DefaultSymbolAttribute, DefaultTextAttribute, DefaultRichTextAttribute, DefaultRichTextIconAttribute } from "./config";
+
+const defaultThemeObj = {
+    arc: DefaultArcAttribute,
+    area: DefaultAreaAttribute,
+    circle: DefaultCircleAttribute,
+    line: DefaultLineAttribute,
+    path: DefaultPathAttribute,
+    symbol: DefaultSymbolAttribute,
+    text: DefaultTextAttribute,
+    rect: DefaultRectAttribute,
+    rect3d: DefaultRect3dAttribute,
+    polygon: DefaultPolygonAttribute,
+    richtext: DefaultRichTextAttribute,
+    richtextIcon: DefaultRichTextIconAttribute,
+    image: DefaultImageAttribute,
+    group: DefaultGroupAttribute,
+    glyph: DefaultGlyphAttribute
+}, themeKeys = Object.keys(defaultThemeObj);
+
+export function newThemeObj() {
+    return {
+        arc: Object.assign({}, defaultThemeObj.arc),
+        area: Object.assign({}, defaultThemeObj.area),
+        circle: Object.assign({}, defaultThemeObj.circle),
+        line: Object.assign({}, defaultThemeObj.line),
+        path: Object.assign({}, defaultThemeObj.path),
+        symbol: Object.assign({}, defaultThemeObj.symbol),
+        text: Object.assign({}, defaultThemeObj.text),
+        rect: Object.assign({}, defaultThemeObj.rect),
+        rect3d: Object.assign({}, defaultThemeObj.rect3d),
+        polygon: Object.assign({}, defaultThemeObj.polygon),
+        richtext: Object.assign({}, defaultThemeObj.richtext),
+        richtextIcon: Object.assign({}, defaultThemeObj.richtextIcon),
+        image: Object.assign({}, defaultThemeObj.image),
+        group: Object.assign({}, defaultThemeObj.group),
+        glyph: Object.assign({}, defaultThemeObj.glyph)
+    };
+}
+
+function combineTheme(out, t) {
+    t && Object.keys(t).forEach((k => {
+        out[k] ? Object.assign(out[k], t[k]) : out[k] = t[k];
+    }));
+}
+
+const staticThemePools = new Array(60).fill(0).map((() => newThemeObj()));
+
+export class Theme {
+    constructor() {
+        this._defaultTheme = staticThemePools.pop() || newThemeObj(), this.combinedTheme = this._defaultTheme, 
+        this.dirty = !1;
+    }
+    getTheme(group) {
+        if (!group) return this.combinedTheme;
+        if (!this.dirty) return this.combinedTheme;
+        let parentTheme = {};
+        const parentGroup = this.getParentWithTheme(group);
+        return parentGroup && (parentTheme = parentGroup.theme), this.applyTheme(group, parentTheme), 
+        this.combinedTheme;
+    }
+    getParentWithTheme(group) {
+        for (;group.parent; ) if ((group = group.parent).theme) return group;
+        return null;
+    }
+    applyTheme(group, pt) {
+        if (this.dirty) {
+            const parentGroup = this.getParentWithTheme(group);
+            if (parentGroup) {
+                const parentTheme = parentGroup.theme;
+                parentTheme.dirty && parentTheme.applyTheme(parentGroup, pt), combineTheme(pt, parentTheme.userTheme);
+            }
+            this.userTheme ? this.doCombine(pt) : (parentGroup ? this.combinedTheme = parentGroup.theme.combinedTheme : (this.combinedTheme = this._defaultTheme, 
+            console.warn("未知错误，走到不应该走的区域里")), this.dirty = !1);
+        }
+        return this.combinedTheme;
+    }
+    doCombine(parentTheme) {
+        const userTheme = this.userTheme, defaultTheme = this._defaultTheme, combinedTheme = this.combinedTheme, parentCommonTheme = parentTheme.common || {}, commonTheme = Object.assign(parentCommonTheme, this.commonTheme);
+        themeKeys.forEach((k => {
+            var _a, _b;
+            userTheme[k] || commonTheme || parentTheme[k] ? combinedTheme[k] = Object.assign({}, defaultTheme[k], null != commonTheme ? commonTheme : {}, null !== (_a = parentTheme[k]) && void 0 !== _a ? _a : {}, null !== (_b = userTheme[k]) && void 0 !== _b ? _b : {}) : combinedTheme[k] = defaultTheme[k];
+        })), this.dirty = !1;
+    }
+    resetTheme(t, g) {
+        this.userTheme = t, this.dirty = !0, this.dirtyChildren(g);
+    }
+    setTheme(t, g) {
+        let userTheme = this.userTheme;
+        userTheme ? Object.keys(t).forEach((k => {
+            userTheme[k] ? Object.assign(userTheme[k], t[k]) : userTheme[k] = Object.assign({}, t[k]);
+        })) : userTheme = t, t.common && (this.commonTheme ? Object.assign(this.commonTheme, t.common) : this.commonTheme = t.common), 
+        this.userTheme = userTheme, this.dirty = !0, this.dirtyChildren(g);
+    }
+    dirtyChildren(g) {
+        g.forEachChildren((item => {
+            item.isContainer && (item.theme && (item.theme.dirty = !0), this.dirtyChildren(item));
+        }));
+    }
+}
+
+export const globalTheme = new Theme;
+
+export function getTheme(graphic, theme) {
+    return graphic.glyphHost ? getTheme(graphic.glyphHost) : theme ? (graphic.isContainer, 
+    theme) : getThemeFromGroup(graphic) || globalTheme.getTheme();
+}
+
+export function getThemeFromGroup(graphic) {
+    let g;
+    if (g = graphic.isContainer ? graphic : graphic.parent, g) {
+        for (;g && !g.theme; ) g = g.parent;
+        return g ? (g.theme || g.createTheme(), g.theme.getTheme(g)) : globalTheme.getTheme();
+    }
+    return null;
+}
+//# sourceMappingURL=theme.js.map

package/es/graphic/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/graphic/theme.ts"],"names":[],"mappings":"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","file":"theme.js","sourcesContent":["import { IGraphicAttribute, IFullThemeSpec, IGraphic, IGroup, ITheme, IThemeSpec } from '../interface';\nimport {\n  DefaultArcAttribute,\n  DefaultAreaAttribute,\n  DefaultCircleAttribute,\n  DefaultGlyphAttribute,\n  DefaultGroupAttribute,\n  DefaultImageAttribute,\n  DefaultLineAttribute,\n  DefaultPathAttribute,\n  DefaultPolygonAttribute,\n  DefaultRect3dAttribute,\n  DefaultRectAttribute,\n  DefaultSymbolAttribute,\n  DefaultTextAttribute,\n  DefaultRichTextAttribute,\n  DefaultRichTextIconAttribute\n} from './config';\n\nconst defaultThemeObj = {\n  arc: DefaultArcAttribute,\n  area: DefaultAreaAttribute,\n  circle: DefaultCircleAttribute,\n  line: DefaultLineAttribute,\n  path: DefaultPathAttribute,\n  symbol: DefaultSymbolAttribute,\n  text: DefaultTextAttribute,\n  rect: DefaultRectAttribute,\n  rect3d: DefaultRect3dAttribute,\n  polygon: DefaultPolygonAttribute,\n  richtext: DefaultRichTextAttribute,\n  richtextIcon: DefaultRichTextIconAttribute,\n  image: DefaultImageAttribute,\n  group: DefaultGroupAttribute,\n  glyph: DefaultGlyphAttribute\n};\n\nconst themeKeys = Object.keys(defaultThemeObj);\n\nexport function newThemeObj(): IFullThemeSpec {\n  return {\n    arc: Object.assign({}, defaultThemeObj.arc),\n    area: Object.assign({}, defaultThemeObj.area),\n    circle: Object.assign({}, defaultThemeObj.circle),\n    line: Object.assign({}, defaultThemeObj.line),\n    path: Object.assign({}, defaultThemeObj.path),\n    symbol: Object.assign({}, defaultThemeObj.symbol),\n    text: Object.assign({}, defaultThemeObj.text),\n    rect: Object.assign({}, defaultThemeObj.rect),\n    rect3d: Object.assign({}, defaultThemeObj.rect3d),\n    polygon: Object.assign({}, defaultThemeObj.polygon),\n    richtext: Object.assign({}, defaultThemeObj.richtext),\n    richtextIcon: Object.assign({}, defaultThemeObj.richtextIcon),\n    image: Object.assign({}, defaultThemeObj.image),\n    group: Object.assign({}, defaultThemeObj.group),\n    glyph: Object.assign({}, defaultThemeObj.glyph)\n  };\n}\n\n// 将t合并到out中\nfunction combineTheme(out: IThemeSpec, t: IThemeSpec) {\n  if (!t) {\n    return;\n  }\n  Object.keys(t).forEach(k => {\n    if (out[k]) {\n      Object.assign(out[k], t[k]);\n    } else {\n      out[k] = t[k];\n    }\n  });\n}\n\n// 全局创建60个theme，节省打点耗时时间\nconst staticThemePools = new Array(60).fill(0).map(() => newThemeObj());\n\n// // 性能优化，没有修改的theme都使用这个\n// const defaultCommontTheme = newThemeObj();\n\n// function combineTheme(out: IThemeSpec, userTheme: IThemeSpec, defaultTheme: IFullThemeSpec) {\n\n// }\n\n// 优先级：\n// 1. userTheme\n// 2. commonTheme\n// 3. parentTheme\n// 4. defaultTheme\n\nexport class Theme implements ITheme {\n  // 当前的总theme，最终合并后的theme\n  combinedTheme: IFullThemeSpec;\n\n  // 记录累计应用的所有用户设置上的theme\n  userTheme?: IThemeSpec;\n  // 公共属性，有些属性所有图元都生效，那就放在common位置\n  commonTheme?: Partial<IGraphicAttribute>;\n\n  // // 记录下一次设置的theme，同时也作为一个dirty位，记录是否存在没有合并的theme\n  // nextTheme?: IThemeSpec;\n\n  protected _defaultTheme: IFullThemeSpec;\n\n  dirty: boolean;\n\n  constructor() {\n    // group数量不多，问题不大\n    this._defaultTheme = staticThemePools.pop() || newThemeObj();\n    this.combinedTheme = this._defaultTheme;\n    this.dirty = false;\n  }\n\n  getTheme(group?: IGroup) {\n    if (!group) {\n      return this.combinedTheme;\n    }\n    if (!this.dirty) {\n      return this.combinedTheme;\n    }\n    let parentTheme = {};\n    const parentGroup = this.getParentWithTheme(group);\n    if (parentGroup) {\n      parentTheme = parentGroup.theme;\n    }\n    this.applyTheme(group, parentTheme);\n    return this.combinedTheme;\n  }\n\n  // 获取具有主题的parent\n  getParentWithTheme(group: IGroup) {\n    while (group.parent) {\n      group = group.parent;\n      if (group.theme) {\n        return group;\n      }\n    }\n    return null;\n  }\n\n  // 应用主题，从根节点一直触发到当前节点（如果上层节点需要的话）\n  applyTheme(group: IGroup, pt: IThemeSpec): IThemeSpec {\n    if (this.dirty) {\n      const parentGroup = this.getParentWithTheme(group);\n      if (parentGroup) {\n        const parentTheme = parentGroup.theme;\n        if (parentTheme.dirty) {\n          parentTheme.applyTheme(parentGroup, pt);\n        }\n        combineTheme(pt, parentTheme.userTheme);\n      }\n      // 如果当前节点没有userTheme的话，直接复用上层\n      if (!this.userTheme) {\n        if (parentGroup) {\n          this.combinedTheme = parentGroup.theme.combinedTheme;\n        } else {\n          this.combinedTheme = this._defaultTheme;\n          console.warn('未知错误，走到不应该走的区域里');\n        }\n        this.dirty = false;\n      } else {\n        this.doCombine(pt);\n      }\n    }\n\n    return this.combinedTheme;\n  }\n\n  // 合并userTheme到combinedTheme\n  protected doCombine(parentTheme: IThemeSpec) {\n    const userTheme = this.userTheme;\n    const defaultTheme = this._defaultTheme;\n    const combinedTheme = this.combinedTheme;\n    const parentCommonTheme = parentTheme.common || {};\n    const commonTheme = Object.assign(parentCommonTheme, this.commonTheme);\n    // combineTheme({}, this.userTheme, this._defaultTheme);\n    themeKeys.forEach(k => {\n      if (userTheme[k] || commonTheme || parentTheme[k]) {\n        combinedTheme[k] = Object.assign(\n          {},\n          defaultTheme[k],\n          commonTheme ?? {},\n          parentTheme[k] ?? {},\n          userTheme[k] ?? {}\n        );\n      } else {\n        combinedTheme[k] = defaultTheme[k];\n      }\n    });\n    this.dirty = false;\n  }\n\n  resetTheme(t: IThemeSpec, g: IGroup) {\n    this.userTheme = t;\n    // 设置自己和子节点的theme都为dirty\n    this.dirty = true;\n    this.dirtyChildren(g);\n  }\n\n  setTheme(t: IThemeSpec, g: IGroup) {\n    // 设置自己的nextTheme\n    let userTheme = this.userTheme;\n    if (userTheme) {\n      Object.keys(t).forEach(k => {\n        if (userTheme[k]) {\n          Object.assign(userTheme[k], t[k]);\n        } else {\n          // todo，这里调用次数不多，应该问题不大\n          userTheme[k] = Object.assign({}, t[k]);\n        }\n      });\n    } else {\n      userTheme = t;\n    }\n    if (t.common) {\n      if (!this.commonTheme) {\n        this.commonTheme = t.common;\n      } else {\n        Object.assign(this.commonTheme, t.common);\n      }\n    }\n    this.userTheme = userTheme;\n    // 设置自己和子节点的theme都为dirty\n    this.dirty = true;\n    this.dirtyChildren(g);\n  }\n\n  dirtyChildren(g: IGroup) {\n    g.forEachChildren(item => {\n      if ((item as IGroup).isContainer) {\n        if ((item as IGroup).theme) {\n          (item as IGroup).theme.dirty = true;\n        }\n        this.dirtyChildren(item as IGroup);\n      }\n    });\n  }\n\n  // // 设置theme到子元素，直接设置到currentTheme中去\n  // setThemeToChildrenCurrentTheme(t :IThemeSpec, g: IGroup) {\n  //   g.forEachChildren((item) => {\n  //     if ((item as IGroup).isContainer) {\n  //       const currentTheme = (item as IGroup).theme.currentTheme;\n  //       Object.keys(t).forEach(k => {\n  //         Object.assign(currentTheme[k], t[k]);\n  //       });\n  //       this.setThemeToChildrenCurrentTheme(t, item as IGroup);\n  //     }\n  //   })\n  // }\n}\n\nexport const globalTheme = new Theme();\n\nexport function getTheme(graphic: IGraphic, theme?: IFullThemeSpec): IFullThemeSpec {\n  if (graphic.glyphHost) {\n    return getTheme(graphic.glyphHost);\n  }\n  if (theme) {\n    if (graphic.isContainer) {\n      // 暂时不支持Group\n      return theme;\n    }\n    return theme;\n  }\n\n  return getThemeFromGroup(graphic) || globalTheme.getTheme();\n}\n\nexport function getThemeFromGroup(graphic: IGraphic): IFullThemeSpec | null {\n  let g: IGroup;\n  if (graphic.isContainer) {\n    // 找到存在theme的group\n    g = graphic as IGroup;\n  } else {\n    g = graphic.parent;\n  }\n\n  if (g) {\n    while (g) {\n      if (g.theme) {\n        break;\n      }\n      g = g.parent;\n    }\n    if (!g) {\n      return globalTheme.getTheme();\n    }\n    if (!g.theme) {\n      g.createTheme();\n    }\n    return g.theme.getTheme(g as IGroup);\n  }\n  return null;\n}\n"]}

package/es/graphic/tools.d.ts

@@ -0,0 +1,5 @@
+import { IGraphic, IGroup, IStage } from '../interface';
+import { IAABBBounds } from '@visactor/vutils';
+export declare function incrementalAddTo(group: IGroup, graphic: IGraphic): void;
+export declare function waitForAllSubLayers(stage: IStage): Promise<void>;
+export declare function boundStroke(bounds: IAABBBounds, length: number, miter: boolean, pad?: number): import("@visactor/vutils").IBounds;

package/es/graphic/tools.js

@@ -0,0 +1,61 @@
+var __awaiter = this && this.__awaiter || function(thisArg, _arguments, P, generator) {
+    return new (P || (P = Promise))((function(resolve, reject) {
+        function fulfilled(value) {
+            try {
+                step(generator.next(value));
+            } catch (e) {
+                reject(e);
+            }
+        }
+        function rejected(value) {
+            try {
+                step(generator.throw(value));
+            } catch (e) {
+                reject(e);
+            }
+        }
+        function step(result) {
+            var value;
+            result.done ? resolve(result.value) : (value = result.value, value instanceof P ? value : new P((function(resolve) {
+                resolve(value);
+            }))).then(fulfilled, rejected);
+        }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    }));
+};
+
+import { global } from "../modules";
+
+export function incrementalAddTo(group, graphic) {
+    group.incrementalAppendChild(graphic);
+}
+
+export function waitForAllSubLayers(stage) {
+    return __awaiter(this, void 0, void 0, (function*() {
+        const promiseList = [], layers = stage.getChildren();
+        yield new Promise((resolve => {
+            global.getRequestAnimationFrame()((() => {
+                resolve(null);
+            }));
+        })), layers.forEach((l => {
+            l.subLayers.size && l.subLayers.forEach((sl => {
+                sl.drawContribution && sl.drawContribution.hooks && sl.drawContribution.rendering && promiseList.push(new Promise((resolve => {
+                    sl.drawContribution.hooks.completeDraw.tap("outWait", (() => {
+                        sl.drawContribution.hooks.completeDraw.taps = sl.drawContribution.hooks.completeDraw.taps.filter((i => "outWait" !== i.name)), 
+                        resolve(null);
+                    }));
+                })));
+            }));
+        })), yield Promise.all(promiseList);
+    }));
+}
+
+export function boundStroke(bounds, length, miter, pad = 0) {
+    return bounds.expand(length + pad + (miter ? miterAdjustment(miter, length) : 0)), 
+    bounds;
+}
+
+function miterAdjustment(miter, strokeWidth) {
+    return miter ? strokeWidth : 0;
+}
+//# sourceMappingURL=tools.js.map

package/es/graphic/tools.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/graphic/tools.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAKpC,MAAM,UAAU,gBAAgB,CAAC,KAAa,EAAE,OAAiB;IAC/D,KAAK,CAAC,sBAAsB,CAAC,OAAO,CAAC,CAAC;AAIxC,CAAC;AAED,MAAM,UAAgB,mBAAmB,CAAC,KAAa;;QACrD,MAAM,WAAW,GAAmB,EAAE,CAAC;QACvC,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,EAAc,CAAC;QAC/C,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;YAC1B,MAAM,CAAC,wBAAwB,EAAE,CAAC,GAAG,EAAE;gBACrC,OAAO,CAAC,IAAI,CAAC,CAAC;YAChB,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QACH,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;YACjB,IAAI,CAAC,CAAC,SAAS,CAAC,IAAI,EAAE;gBACpB,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;oBACvB,IAAI,EAAE,CAAC,gBAAgB,IAAI,EAAE,CAAC,gBAAgB,CAAC,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,SAAS,EAAE;wBACrF,WAAW,CAAC,IAAI,CACd,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;4BACpB,EAAE,CAAC,gBAAiB,CAAC,KAAM,CAAC,YAAY,CAAC,GAAG,CAAC,SAAS,EAAE,GAAG,EAAE;gCAC3D,EAAE,CAAC,gBAAiB,CAAC,KAAM,CAAC,YAAY,CAAC,IAAI,GAAG,EAAE,CAAC,gBAAiB,CAAC,KAAM,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAClG,CAAC,CAAC,EAAE;oCACF,OAAO,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC;gCAC9B,CAAC,CACF,CAAC;gCACF,OAAO,CAAC,IAAI,CAAC,CAAC;4BAChB,CAAC,CAAC,CAAC;wBACL,CAAC,CAAC,CACH,CAAC;qBACH;gBACH,CAAC,CAAC,CAAC;aACJ;QACH,CAAC,CAAC,CAAC;QACH,MAAM,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IACjC,CAAC;CAAA;AAED,MAAM,UAAU,WAAW,CAAC,MAAmB,EAAE,MAAc,EAAE,KAAc,EAAE,GAAG,GAAG,CAAC;IACtF,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3E,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,SAAS,eAAe,CAAC,KAAc,EAAE,WAAmB;IAC1D,OAAO,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AACjC,CAAC","file":"tools.js","sourcesContent":["import { global } from '../modules';\nimport { IGraphic, IGroup, ILayer, IStage } from '../interface';\nimport { IAABBBounds } from '@visactor/vutils';\n\n// 不触发外部的render\nexport function incrementalAddTo(group: IGroup, graphic: IGraphic) {\n  group.incrementalAppendChild(graphic);\n  // if (group.layer && group.layer.subLayers) {\n  //   // const subLayer = group.layer.subLayers.get(group._uid);\n  // }\n}\n\nexport async function waitForAllSubLayers(stage: IStage) {\n  const promiseList: Promise<any>[] = [];\n  const layers = stage.getChildren() as ILayer[];\n  await new Promise(resolve => {\n    global.getRequestAnimationFrame()(() => {\n      resolve(null);\n    });\n  });\n  layers.forEach(l => {\n    if (l.subLayers.size) {\n      l.subLayers.forEach(sl => {\n        if (sl.drawContribution && sl.drawContribution.hooks && sl.drawContribution.rendering) {\n          promiseList.push(\n            new Promise(resolve => {\n              sl.drawContribution!.hooks!.completeDraw.tap('outWait', () => {\n                sl.drawContribution!.hooks!.completeDraw.taps = sl.drawContribution!.hooks!.completeDraw.taps.filter(\n                  i => {\n                    return i.name !== 'outWait';\n                  }\n                );\n                resolve(null);\n              });\n            })\n          );\n        }\n      });\n    }\n  });\n  await Promise.all(promiseList);\n}\n\nexport function boundStroke(bounds: IAABBBounds, length: number, miter: boolean, pad = 0) {\n  bounds.expand(length + pad + (miter ? miterAdjustment(miter, length) : 0));\n  return bounds;\n}\n\nfunction miterAdjustment(miter: boolean, strokeWidth: number) {\n  return miter ? strokeWidth : 0;\n}\n\n// function attachShadow(graphic: Graphic) {\n//   graphic.shadowRoot = createShadowRoot(graphic);\n//   graphic.addUpdateBoundTag();\n//   return graphic.shadowRoot;\n// }\n\n// function detachShadow(graphic: Graphic) {\n//   if (graphic.shadowRoot) {\n//     graphic.addUpdateBoundTag();\n//     graphic.shadowRoot = null;\n//   }\n// }\n"]}

package/es/graphic/wrap-text.d.ts

@@ -0,0 +1,9 @@
+import { IWrapTextGraphicAttribute } from '../interface';
+import { Text } from './text';
+export declare class WrapText extends Text {
+    attribute: IWrapTextGraphicAttribute;
+    protected _isValid(): boolean;
+    updateMultilineAABBBounds(text: (number | string)[]): import("@visactor/vutils").AABBBounds;
+    needUpdateTags(keys: string[]): boolean;
+    needUpdateTag(key: string): boolean;
+}

package/es/graphic/wrap-text.js

@@ -0,0 +1,100 @@
+import { isArray } from "@visactor/vutils";
+
+import { CanvasTextLayout } from "../core";
+
+import { graphicUtil } from "../modules";
+
+import { Text } from "./text";
+
+import { getTheme } from "./theme";
+
+const WRAP_TEXT_UPDATE_TAG_KEY = [ "heightLimit", "lineClamp" ];
+
+export class WrapText extends Text {
+    _isValid() {
+        const {text: text} = this.attribute;
+        return isArray(text) ? !text.every((t => null == t || "" === t)) : null != text && "" !== text;
+    }
+    updateMultilineAABBBounds(text) {
+        var _a;
+        const textTheme = getTheme(this).text, {fontFamily: fontFamily = textTheme.fontFamily, textAlign: textAlign = textTheme.textAlign, textBaseline: textBaseline = textTheme.textBaseline, fontSize: fontSize = textTheme.fontSize, lineHeight: lineHeight = this.attribute.lineHeight || this.attribute.fontSize || textTheme.fontSize, ellipsis: ellipsis = textTheme.ellipsis, maxLineWidth: maxLineWidth, stroke: stroke = textTheme.stroke, lineWidth: lineWidth = textTheme.lineWidth, heightLimit: heightLimit = 0, lineClamp: lineClamp} = this.attribute;
+        if (!this.shouldUpdateShape() && (null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData)) {
+            const bbox = this.cache.layoutData.bbox;
+            return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), 
+            stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+        }
+        const textMeasure = graphicUtil.textMeasure, layoutObj = new CanvasTextLayout(fontFamily, {
+            fontSize: fontSize
+        }, textMeasure), lines = text.map((l => l.toString())), linesLayout = [], bboxWH = [ 0, 0 ];
+        let lineCountLimit = 1 / 0;
+        if (heightLimit > 0 && (lineCountLimit = Math.max(Math.floor(heightLimit / lineHeight), 1)), 
+        lineClamp && (lineCountLimit = Math.min(lineCountLimit, lineClamp)), "number" == typeof maxLineWidth && maxLineWidth !== 1 / 0) {
+            if (maxLineWidth > 0) for (let i = 0; i < lines.length; i++) {
+                const str = lines[i];
+                if (i === lineCountLimit - 1) {
+                    const clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis);
+                    linesLayout.push({
+                        str: clip.str,
+                        width: clip.width
+                    });
+                    break;
+                }
+                const clip = layoutObj.textMeasure.clipText(str, layoutObj.textOptions, maxLineWidth);
+                if (linesLayout.push({
+                    str: clip.str,
+                    width: clip.width
+                }), clip.str.length === str.length) ; else {
+                    const newStr = str.substring(clip.str.length);
+                    lines.splice(i + 1, 0, newStr);
+                }
+            }
+            let maxWidth = 0;
+            linesLayout.forEach((layout => {
+                maxWidth = Math.max(maxWidth, layout.width);
+            })), bboxWH[0] = maxWidth;
+        } else {
+            let width, text, lineWidth = 0;
+            for (let i = 0, len = lines.length; i < len; i++) {
+                if (i === lineCountLimit - 1) {
+                    const clip = layoutObj.textMeasure.clipTextWithSuffix(lines[i], layoutObj.textOptions, maxLineWidth, ellipsis);
+                    linesLayout.push({
+                        str: clip.str,
+                        width: clip.width
+                    }), lineWidth = Math.max(lineWidth, clip.width);
+                    break;
+                }
+                text = lines[i], width = layoutObj.textMeasure.measureTextWidth(text, layoutObj.textOptions), 
+                lineWidth = Math.max(lineWidth, width), linesLayout.push({
+                    str: text,
+                    width: width
+                });
+            }
+            bboxWH[0] = lineWidth;
+        }
+        bboxWH[1] = linesLayout.length * (lineHeight + 2);
+        const bbox = {
+            xOffset: 0,
+            yOffset: 0,
+            width: bboxWH[0],
+            height: bboxWH[1]
+        };
+        layoutObj.LayoutBBox(bbox, textAlign, textBaseline);
+        const layoutData = layoutObj.layoutWithBBox(bbox, linesLayout, textAlign, textBaseline, lineHeight);
+        return this.cache.layoutData = layoutData, this.clearUpdateShapeTag(), this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), 
+        stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+    }
+    needUpdateTags(keys) {
+        for (let i = 0; i < WRAP_TEXT_UPDATE_TAG_KEY.length; i++) {
+            const attrKey = WRAP_TEXT_UPDATE_TAG_KEY[i];
+            if (-1 !== keys.indexOf(attrKey)) return !0;
+        }
+        return super.needUpdateTags(keys);
+    }
+    needUpdateTag(key) {
+        for (let i = 0; i < WRAP_TEXT_UPDATE_TAG_KEY.length; i++) {
+            if (key === WRAP_TEXT_UPDATE_TAG_KEY[i]) return !0;
+        }
+        return super.needUpdateTag(key);
+    }
+}
+//# sourceMappingURL=wrap-text.js.map

package/es/graphic/wrap-text.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/graphic/wrap-text.ts"],"names":[],"mappings":"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","file":"wrap-text.js","sourcesContent":["import { isArray } from '@visactor/vutils';\nimport { CanvasTextLayout, LayoutItemType } from '../core';\nimport { IWrapTextGraphicAttribute } from '../interface';\nimport { graphicUtil } from '../modules';\nimport { Text } from './text';\nimport { getTheme } from './theme';\n\nconst WRAP_TEXT_UPDATE_TAG_KEY = ['heightLimit', 'lineClamp'];\n\n/* WrapText功能\n * 1. 按照宽度限制自动折行或显示省略号(maxLineWidth)\n * 2. 高度限制控制显示内容及省略号(heightLimit)\n * 3. 按照行数限制显示内容及省略号(lineClamp)\n */\nexport class WrapText extends Text {\n  declare attribute: IWrapTextGraphicAttribute;\n\n  protected _isValid(): boolean {\n    const { text } = this.attribute;\n    if (isArray(text)) {\n      return !(text as any[]).every((t: any) => t == null || t === '');\n    }\n    return text != null && text !== '';\n  }\n\n  /**\n   * 计算多行文字的bounds，缓存每行文字的布局位置\n   * 自动折行params.text是数组，因此只重新updateMultilineAABBBounds\n   * @param text\n   */\n  updateMultilineAABBBounds(text: (number | string)[]) {\n    const textTheme = getTheme(this).text;\n    const {\n      fontFamily = textTheme.fontFamily,\n      textAlign = textTheme.textAlign,\n      textBaseline = textTheme.textBaseline,\n      fontSize = textTheme.fontSize,\n      lineHeight = this.attribute.lineHeight || this.attribute.fontSize || textTheme.fontSize,\n      ellipsis = textTheme.ellipsis,\n      maxLineWidth,\n      stroke = textTheme.stroke,\n      lineWidth = textTheme.lineWidth,\n      // widthLimit,\n      heightLimit = 0,\n      lineClamp\n    } = this.attribute;\n    const buf = 2;\n    if (!this.shouldUpdateShape() && this.cache?.layoutData) {\n      const bbox = this.cache.layoutData.bbox;\n      this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height);\n      if (stroke) {\n        this._AABBBounds.expand(lineWidth / 2);\n      }\n      return this._AABBBounds;\n    }\n\n    const textMeasure = graphicUtil.textMeasure;\n    const layoutObj = new CanvasTextLayout(fontFamily, { fontSize }, textMeasure as any) as any;\n\n    // layoutObj内逻辑\n    const lines = text.map(l => l.toString()) as string[];\n    const linesLayout: LayoutItemType[] = [];\n    const bboxWH: [number, number] = [0, 0];\n\n    let lineCountLimit = Infinity;\n    if (heightLimit > 0) {\n      lineCountLimit = Math.max(Math.floor(heightLimit / lineHeight), 1);\n    }\n    if (lineClamp) {\n      // 处理行数限制\n      lineCountLimit = Math.min(lineCountLimit, lineClamp);\n    }\n\n    if (typeof maxLineWidth === 'number' && maxLineWidth !== Infinity) {\n      // widthLimit > 0\n      if (maxLineWidth > 0) {\n        for (let i = 0; i < lines.length; i++) {\n          const str = lines[i] as string;\n          // // 测量当前行宽度\n          // width = Math.min(\n          //   layoutObj.textMeasure.measureTextWidth(str, layoutObj.textOptions),\n          //   maxLineWidth\n          // );\n\n          // 判断是否超过高度限制\n          if (i === lineCountLimit - 1) {\n            // 当前行为最后一行\n            const clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis);\n            linesLayout.push({\n              str: clip.str,\n              width: clip.width\n            });\n            break; // 不处理后续行\n          }\n\n          // 测量截断位置\n          const clip = layoutObj.textMeasure.clipText(str, layoutObj.textOptions, maxLineWidth);\n          linesLayout.push({\n            str: clip.str,\n            width: clip.width\n          });\n          if (clip.str.length === str.length) {\n            // 不需要截断\n          } else {\n            const newStr = str.substring(clip.str.length);\n            lines.splice(i + 1, 0, newStr);\n          }\n        }\n      }\n      // bboxWH[0] = maxLineWidth;\n      let maxWidth = 0;\n      linesLayout.forEach(layout => {\n        maxWidth = Math.max(maxWidth, layout.width);\n      });\n      bboxWH[0] = maxWidth;\n    } else {\n      // 使用所有行中最长的作为lineWidth\n      let lineWidth = 0;\n      let width: number;\n      let text: string;\n      for (let i = 0, len = lines.length; i < len; i++) {\n        // 判断是否超过高度限制\n        if (i === lineCountLimit - 1) {\n          // 当前行为最后一行\n          const clip = layoutObj.textMeasure.clipTextWithSuffix(\n            lines[i],\n            layoutObj.textOptions,\n            maxLineWidth,\n            ellipsis\n          );\n          linesLayout.push({\n            str: clip.str,\n            width: clip.width\n          });\n          lineWidth = Math.max(lineWidth, clip.width);\n          break; // 不处理后续行\n        }\n\n        text = lines[i] as string;\n        width = layoutObj.textMeasure.measureTextWidth(text, layoutObj.textOptions);\n        lineWidth = Math.max(lineWidth, width);\n        linesLayout.push({ str: text, width });\n      }\n      bboxWH[0] = lineWidth;\n    }\n    bboxWH[1] = linesLayout.length * (lineHeight + buf);\n\n    const bbox = {\n      xOffset: 0,\n      yOffset: 0,\n      width: bboxWH[0],\n      height: bboxWH[1]\n    };\n\n    layoutObj.LayoutBBox(bbox, textAlign, textBaseline as any);\n\n    const layoutData = layoutObj.layoutWithBBox(bbox, linesLayout, textAlign, textBaseline as any, lineHeight);\n\n    // const layoutData = layoutObj.GetLayoutByLines(\n    //   text,\n    //   textAlign,\n    //   textBaseline as any,\n    //   lineHeight,\n    //   ellipsis === true ? (DefaultTextAttribute.ellipsis as string) : ellipsis || undefined,\n    //   maxLineWidth\n    // );\n    // const { bbox } = layoutData;\n    this.cache.layoutData = layoutData;\n    this.clearUpdateShapeTag();\n    this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height);\n\n    if (stroke) {\n      this._AABBBounds.expand(lineWidth / 2);\n    }\n\n    return this._AABBBounds;\n  }\n\n  needUpdateTags(keys: string[]): boolean {\n    for (let i = 0; i < WRAP_TEXT_UPDATE_TAG_KEY.length; i++) {\n      const attrKey = WRAP_TEXT_UPDATE_TAG_KEY[i];\n      if (keys.indexOf(attrKey) !== -1) {\n        return true;\n      }\n    }\n    return super.needUpdateTags(keys);\n  }\n\n  needUpdateTag(key: string): boolean {\n    for (let i = 0; i < WRAP_TEXT_UPDATE_TAG_KEY.length; i++) {\n      const attrKey = WRAP_TEXT_UPDATE_TAG_KEY[i];\n      if (key === attrKey) {\n        return true;\n      }\n    }\n    return super.needUpdateTag(key);\n  }\n}\n"]}

package/es/index.d.ts

@@ -0,0 +1,18 @@
+import 'reflect-metadata';
+import { DefaultTicker } from './animate';
+import './modules';
+export * from './core/global';
+export * from './graphic';
+export * from './modules';
+export * from './create';
+export * from './event';
+export * from './common';
+export * from './interface';
+export * from './render';
+export * from './canvas';
+export * from './core';
+export * from './picker';
+export * from './kits';
+export * from './animate';
+export * from './resource-loader/loader';
+export declare const defaultTicker: DefaultTicker;

package/es/index.js

@@ -0,0 +1,42 @@
+import "reflect-metadata";
+
+import { DefaultTicker, defaultTimeline } from "./animate";
+
+import "./modules";
+
+export * from "./core/global";
+
+export * from "./graphic";
+
+export * from "./modules";
+
+export * from "./create";
+
+export * from "./event";
+
+export * from "./common";
+
+export * from "./interface";
+
+export * from "./render";
+
+export * from "./canvas";
+
+export * from "./core";
+
+export * from "./picker";
+
+export * from "./kits";
+
+export * from "./animate";
+
+export * from "./resource-loader/loader";
+
+export const defaultTicker = new DefaultTicker;
+
+defaultTicker.addTimeline(defaultTimeline);
+
+const DEFAULT_TICKER_FPS = 60;
+
+defaultTicker.setFPS(60);
+//# sourceMappingURL=index.js.map

package/es/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC3D,OAAO,WAAW,CAAC;AAEnB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,0BAA0B,CAAC;AAEzC,MAAM,CAAC,MAAM,aAAa,GAAG,IAAI,aAAa,EAAE,CAAC;AACjD,aAAa,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;AAC3C,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAC9B,aAAa,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC","file":"index.js","sourcesContent":["import 'reflect-metadata';\nimport { DefaultTicker, defaultTimeline } from './animate';\nimport './modules';\n\nexport * from './core/global';\nexport * from './graphic';\nexport * from './modules';\nexport * from './create';\nexport * from './event';\nexport * from './common';\nexport * from './interface';\nexport * from './render';\nexport * from './canvas';\nexport * from './core';\nexport * from './picker';\nexport * from './kits';\nexport * from './animate';\nexport * from './resource-loader/loader';\n\nexport const defaultTicker = new DefaultTicker();\ndefaultTicker.addTimeline(defaultTimeline);\nconst DEFAULT_TICKER_FPS = 60;\ndefaultTicker.setFPS(DEFAULT_TICKER_FPS);\n"]}

package/es/interface/animate.d.ts

@@ -0,0 +1,154 @@
+import type { AnimateMode, AnimateStatus, AnimateStepType } from '../common/enums';
+import type { IGraphic } from './graphic';
+export declare class Easing {
+    static linear(t: number): number;
+    static none(): typeof Easing.linear;
+    static get(amount: number): (t: number) => number;
+    static getPowIn(pow: number): (t: number) => number;
+    static getPowOut(pow: number): (t: number) => number;
+    static getPowInOut(pow: number): (t: number) => number;
+    static quadIn: (t: number) => number;
+    static quadOut: (t: number) => number;
+    static quadInOut: (t: number) => number;
+    static cubicIn: (t: number) => number;
+    static cubicOut: (t: number) => number;
+    static cubicInOut: (t: number) => number;
+    static quartIn: (t: number) => number;
+    static quartOut: (t: number) => number;
+    static quartInOut: (t: number) => number;
+    static quintIn: (t: number) => number;
+    static quintOut: (t: number) => number;
+    static quintInOut: (t: number) => number;
+    static getBackIn(amount: number): (t: number) => number;
+    static getBackOut(amount: number): (t: number) => number;
+    static getBackInOut(amount: number): (t: number) => number;
+    static backIn: (t: number) => number;
+    static backOut: (t: number) => number;
+    static backInOut: (t: number) => number;
+    static circIn(t: number): number;
+    static circOut(t: number): number;
+    static circInOut(t: number): number;
+    static bounceOut(t: number): number;
+    static bounceIn(t: number): number;
+    static bounceInOut(t: number): number;
+    static getElasticIn(amplitude: number, period: number): (t: number) => number;
+    static getElasticOut(amplitude: number, period: number): (t: number) => number;
+    static getElasticInOut(amplitude: number, period: number): (t: number) => number;
+    static elasticIn: (t: number) => number;
+    static elasticOut: (t: number) => number;
+    static elasticInOut: (t: number) => number;
+}
+export interface Timeline {
+    AnimateList: IAnimate[];
+}
+export type EasingTypeStr = 'linear' | 'quadIn' | 'quadOut' | 'quadInOut' | 'quadInOut' | 'cubicIn' | 'cubicOut' | 'cubicInOut' | 'quartIn' | 'quartOut' | 'quartInOut' | 'quintIn' | 'quintOut' | 'quintInOut' | 'backIn' | 'backOut' | 'backInOut' | 'circIn' | 'circOut' | 'circInOut' | 'bounceOut' | 'bounceIn' | 'bounceInOut' | 'elasticIn' | 'elasticOut' | 'elasticInOut' | '';
+export type EasingTypeFunc = (t: number) => number;
+export type EasingType = EasingTypeStr | EasingTypeFunc;
+export type IAnimateStepType = keyof typeof AnimateStepType;
+export interface IStep {
+    type: IAnimateStepType;
+    prev?: IStep;
+    duration: number;
+    position: number;
+    next?: IStep;
+    props?: any;
+    parsedProps?: any;
+    propKeys?: string[];
+    easing?: EasingTypeFunc;
+    customAnimate?: ICustomAnimate;
+    append: (step: IStep) => void;
+    getLastProps: () => any;
+}
+export interface IStepConfig {
+    tempProps?: boolean;
+    noPreventAttrs?: boolean;
+}
+export interface IAnimateTarget {
+    onAnimateBind?: (animte: IAnimate | ISubAnimate) => void;
+    onAddStep?: (step: IStep) => void;
+    onStep: (subAnimate: ISubAnimate, animate: IAnimate, step: IStep, ratio: number, end: boolean) => void;
+    stepInterpolate: (subAnimate: ISubAnimate, animate: IAnimate, nextAttributes: Record<string, any>, step: IStep, ratio: number, end: boolean, nextProps: Record<string, any>, lastProps?: Record<string, any>, nextParsedProps?: any, propKeys?: string[]) => void;
+    getComputedAttribute: (name: string) => any;
+    getDefaultAttribute: (name: string) => any;
+    onStop: (props?: Record<string, any>) => void;
+    animates: Map<string | number, IAnimate>;
+    [key: string]: any;
+}
+export interface ICustomAnimate {
+    duration: number;
+    easing: EasingType;
+    step?: IStep;
+    mode?: AnimateMode;
+    bind: (target: IAnimateTarget, subAni: ISubAnimate) => void;
+    onBind: () => void;
+    onFirstRun: () => void;
+    onStart: () => void;
+    onEnd: () => void;
+    onUpdate: (end: boolean, ratio: number, out: Record<string, any>) => void;
+    update: (end: boolean, ratio: number, out: Record<string, any>) => void;
+    getEndProps: () => Record<string, any> | void;
+    getFromProps: () => Record<string, any> | void;
+    getMergedEndProps: () => Record<string, any> | void;
+}
+export interface IAnimate {
+    readonly id: string | number;
+    status: AnimateStatus;
+    interpolateFunc: (key: string, ratio: number, from: any, to: any, nextAttributes: any) => boolean;
+    _onStart?: (() => void)[];
+    _onFrame?: ((step: IStep, ratio: number) => void)[];
+    _onEnd?: (() => void)[];
+    _onRemove?: (() => void)[];
+    getStartProps: () => Record<string, any>;
+    getEndProps: () => Record<string, any>;
+    bind: (target: IAnimateTarget) => this;
+    to: (props: Record<string, any>, duration: number, easing: EasingType, params?: IStepConfig) => this;
+    from: (props: Record<string, any>, duration: number, easing: EasingType, params?: IStepConfig) => this;
+    pause: () => void;
+    resume: () => void;
+    onStart: (cb: () => void) => void;
+    onEnd: (cb: () => void) => void;
+    onFrame: (cb: (step: IStep, ratio: number) => void) => void;
+    preventAttr: (key: string) => void;
+    preventAttrs: (key: string[]) => void;
+    validAttr: (key: string) => boolean;
+    runCb: (cb: (a: IAnimate, step: IStep) => void) => IAnimate;
+    customInterpolate: (key: string, ratio: number, from: any, to: any, target: IAnimateTarget, ret: Record<string, any>) => boolean;
+    play: (customAnimate: ICustomAnimate) => this;
+    stop: (type?: 'start' | 'end' | Record<string, any>) => void;
+    release: () => void;
+    getDuration: () => number;
+    getStartTime: () => number;
+    wait: (delay: number) => this;
+    afterAll: (list: IAnimate[]) => this;
+    after: (animate: IAnimate) => this;
+    parallel: (animate: IAnimate) => this;
+    reversed: (r: boolean) => IAnimate;
+    loop: (n: number) => IAnimate;
+    bounce: (b: boolean) => IAnimate;
+    nextAnimate?: IAnimate;
+    prevAnimate?: IAnimate;
+    advance: (delta: number) => void;
+    startAt: (t: number) => IAnimate;
+}
+export interface ISubAnimate {
+    getLastStep: () => IStep;
+    animate: IAnimate;
+    getLastPropByName: (name: string, step: IStep) => any;
+}
+export interface BaseAnimateConfig {
+    id?: number | string;
+    interpolate?: (key: string, ratio: number, from: any, to: any, nextAttributes: any) => boolean;
+    onStart?: () => void;
+    onFrame?: (step: IStep, ratio: number) => void;
+    onEnd?: () => void;
+    onRemove?: () => void;
+}
+export interface MorphingAnimateConfig extends Omit<BaseAnimateConfig, 'interpolate'> {
+    duration?: number;
+    easing?: EasingType;
+    delay?: number;
+}
+export interface MultiMorphingAnimateConfig extends MorphingAnimateConfig {
+    splitPath?: 'clone' | ((graphic: IGraphic, count: number, needAppend?: boolean) => IGraphic[]);
+    individualDelay?: (index: number, count: number, fromGraphic: IGraphic, toGraphic: IGraphic) => number;
+}

package/es/interface/animate.js

@@ -0,0 +1,2 @@
+export { };
+//# sourceMappingURL=animate.js.map

package/es/interface/animate.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/interface/animate.ts"],"names":[],"mappings":"","file":"animate.js","sourcesContent":["import type { AnimateMode, AnimateStatus, AnimateStepType } from '../common/enums';\nimport type { IGraphic } from './graphic';\n\n// export type EasingType = (...args: any) => any;\n\nexport declare class Easing {\n  static linear(t: number): number;\n  static none(): typeof Easing.linear;\n  /**\n   * 获取缓动函数，amount指示这个缓动函数的插值方式\n   * @param amount\n   * @returns\n   */\n  static get(amount: number): (t: number) => number;\n  static getPowIn(pow: number): (t: number) => number;\n  static getPowOut(pow: number): (t: number) => number;\n  static getPowInOut(pow: number): (t: number) => number;\n  static quadIn: (t: number) => number;\n  static quadOut: (t: number) => number;\n  static quadInOut: (t: number) => number;\n  static cubicIn: (t: number) => number;\n  static cubicOut: (t: number) => number;\n  static cubicInOut: (t: number) => number;\n  static quartIn: (t: number) => number;\n  static quartOut: (t: number) => number;\n  static quartInOut: (t: number) => number;\n  static quintIn: (t: number) => number;\n  static quintOut: (t: number) => number;\n  static quintInOut: (t: number) => number;\n  static getBackIn(amount: number): (t: number) => number;\n  static getBackOut(amount: number): (t: number) => number;\n  static getBackInOut(amount: number): (t: number) => number;\n  static backIn: (t: number) => number;\n  static backOut: (t: number) => number;\n  static backInOut: (t: number) => number;\n  static circIn(t: number): number;\n  static circOut(t: number): number;\n  static circInOut(t: number): number;\n  static bounceOut(t: number): number;\n  static bounceIn(t: number): number;\n  static bounceInOut(t: number): number;\n  static getElasticIn(amplitude: number, period: number): (t: number) => number;\n  static getElasticOut(amplitude: number, period: number): (t: number) => number;\n  static getElasticInOut(amplitude: number, period: number): (t: number) => number;\n  static elasticIn: (t: number) => number;\n  static elasticOut: (t: number) => number;\n  static elasticInOut: (t: number) => number;\n}\n\n// timeline管理一堆的animate，多个timeline互不影响\n// timeline主要作用是基于layer层面的整体管理\n// 每个layer默认带有一个timeline\nexport interface Timeline {\n  AnimateList: IAnimate[];\n}\n\ntype IStopType = 'end' | 'start' | 'current';\n\n// TODO: 提供options配置可序列化\ninterface AnimateSpecItem {\n  type: 'to' | 'delay' | 'stop' | 'any';\n  params: any[];\n}\n\nexport type EasingTypeStr =\n  | 'linear'\n  | 'quadIn'\n  | 'quadOut'\n  | 'quadInOut'\n  | 'quadInOut'\n  | 'cubicIn'\n  | 'cubicOut'\n  | 'cubicInOut'\n  | 'quartIn'\n  | 'quartOut'\n  | 'quartInOut'\n  | 'quintIn'\n  | 'quintOut'\n  | 'quintInOut'\n  | 'backIn'\n  | 'backOut'\n  | 'backInOut'\n  | 'circIn'\n  | 'circOut'\n  | 'circInOut'\n  | 'bounceOut'\n  | 'bounceIn'\n  | 'bounceInOut'\n  | 'elasticIn'\n  | 'elasticOut'\n  | 'elasticInOut'\n  | '';\nexport type EasingTypeFunc = (t: number) => number;\n\nexport type EasingType = EasingTypeStr | EasingTypeFunc;\n\nexport type IAnimateStepType = keyof typeof AnimateStepType;\n\nexport interface IStep {\n  type: IAnimateStepType;\n  prev?: IStep;\n  // 持续时间\n  duration: number;\n  // 在animate中的位置\n  position: number;\n  next?: IStep;\n  props?: any;\n  parsedProps?: any;\n  propKeys?: string[];\n  easing?: EasingTypeFunc;\n  customAnimate?: ICustomAnimate;\n\n  append: (step: IStep) => void;\n  getLastProps: () => any;\n}\n\nexport interface IStepConfig {\n  tempProps?: boolean; // props为临时props，可以直接使用不用拷贝\n  noPreventAttrs?: boolean;\n}\n\nexport interface IAnimateTarget {\n  onAnimateBind?: (animte: IAnimate | ISubAnimate) => void;\n  // 添加动画step的时候调用\n  onAddStep?: (step: IStep) => void;\n  // step时调用\n  onStep: (subAnimate: ISubAnimate, animate: IAnimate, step: IStep, ratio: number, end: boolean) => void;\n  // 插值函数\n  stepInterpolate: (\n    subAnimate: ISubAnimate,\n    animate: IAnimate,\n    nextAttributes: Record<string, any>,\n    step: IStep,\n    ratio: number,\n    end: boolean,\n    nextProps: Record<string, any>,\n    lastProps?: Record<string, any>,\n    nextParsedProps?: any,\n    propKeys?: string[]\n  ) => void;\n  // 获取属性\n  getComputedAttribute: (name: string) => any;\n  // 获取默认属性\n  getDefaultAttribute: (name: string) => any;\n  onStop: (props?: Record<string, any>) => void;\n  animates: Map<string | number, IAnimate>;\n  [key: string]: any;\n}\n\nexport interface ICustomAnimate {\n  duration: number;\n  easing: EasingType;\n  step?: IStep;\n  mode?: AnimateMode;\n\n  bind: (target: IAnimateTarget, subAni: ISubAnimate) => void;\n  // 在第一次调用的时候触发\n  onBind: () => void;\n  // 第一次执行的时候调用\n  onFirstRun: () => void;\n  // 开始执行的时候调用（如果有循环，那每个周期都会调用）\n  onStart: () => void;\n  // 结束执行的时候调用（如果有循环，那每个周期都会调用）\n  onEnd: () => void;\n  onUpdate: (end: boolean, ratio: number, out: Record<string, any>) => void;\n  update: (end: boolean, ratio: number, out: Record<string, any>) => void;\n  getEndProps: () => Record<string, any> | void;\n  getFromProps: () => Record<string, any> | void;\n  getMergedEndProps: () => Record<string, any> | void;\n}\n\n// 每一个animate绑定一个graphic，用于描述这个graphic的动画内容\n// 在timeline层面，animate相当于是一段timeslice\nexport interface IAnimate {\n  readonly id: string | number;\n  status: AnimateStatus;\n\n  interpolateFunc: (key: string, ratio: number, from: any, to: any, nextAttributes: any) => boolean;\n\n  _onStart?: (() => void)[];\n  _onFrame?: ((step: IStep, ratio: number) => void)[];\n  _onEnd?: (() => void)[];\n  _onRemove?: (() => void)[];\n\n  getStartProps: () => Record<string, any>;\n  getEndProps: () => Record<string, any>;\n\n  bind: (target: IAnimateTarget) => this;\n  to: (props: Record<string, any>, duration: number, easing: EasingType, params?: IStepConfig) => this;\n  from: (props: Record<string, any>, duration: number, easing: EasingType, params?: IStepConfig) => this;\n  pause: () => void;\n  resume: () => void;\n  onStart: (cb: () => void) => void;\n  onEnd: (cb: () => void) => void;\n  onFrame: (cb: (step: IStep, ratio: number) => void) => void;\n  // 屏蔽属性\n  preventAttr: (key: string) => void;\n  // 屏蔽属性\n  preventAttrs: (key: string[]) => void;\n  // 属性是否合法\n  validAttr: (key: string) => boolean;\n\n  runCb: (cb: (a: IAnimate, step: IStep) => void) => IAnimate;\n\n  // 自定义插值，返回false表示没有匹配上\n  customInterpolate: (\n    key: string,\n    ratio: number,\n    from: any,\n    to: any,\n    target: IAnimateTarget,\n    ret: Record<string, any>\n  ) => boolean;\n  //\n  play: (customAnimate: ICustomAnimate) => this;\n\n  // 获取该属性的上一个值\n  // getLastPropByName: (name: string, step: IStep) => any;\n  // delay: (duration: number) => IAnimate;\n  stop: (type?: 'start' | 'end' | Record<string, any>) => void;\n  /** 打上END标志，下一帧被删除 */\n  release: () => void;\n  // 获取持续的时长\n  getDuration: () => number;\n  // 获取动画开始时间（注意并不是子动画的startAt）\n  getStartTime: () => number;\n  // done: (cb: (_: any) => any) => IAnimate;\n  // pause: () => IAnimate;\n  // spec: (spec: AnimateSpecItem[]) => IAnimate;\n  // start: () => void; // 有start方法，避免动画提前开始（VGrammar需要时间处理数据）\n  wait: (delay: number) => this;\n\n  // // 编排\n  afterAll: (list: IAnimate[]) => this;\n  after: (animate: IAnimate) => this;\n  parallel: (animate: IAnimate) => this;\n\n  // // timislice (getter)\n  // startTime: number;\n  // endTime: number;\n  // startTimes: number[];\n  // endTimes: number[];\n\n  // // 高级参数，frame到frameEnd之间可以进行reverse，loop，bounce效果\n  // frame: () => IAnimate;\n  // frameEnd: () => IAnimate;\n  reversed: (r: boolean) => IAnimate;\n  loop: (n: number) => IAnimate;\n  bounce: (b: boolean) => IAnimate;\n\n  nextAnimate?: IAnimate;\n  prevAnimate?: IAnimate;\n\n  advance: (delta: number) => void;\n\n  startAt: (t: number) => IAnimate;\n\n  // // 语法糖\n  // create: (duration: number) => IAnimate;\n  // fadeIn: (duration: number) => IAnimate;\n}\n\nexport interface ISubAnimate {\n  getLastStep: () => IStep;\n  animate: IAnimate;\n  // 获取该属性的上一个值\n  getLastPropByName: (name: string, step: IStep) => any;\n}\n\n// rect.animate().abc().to({}, 1000).delay(1000).frame().to().delay().to().frameEnd().loop().bounce()\n\nexport interface BaseAnimateConfig {\n  id?: number | string;\n  interpolate?: (key: string, ratio: number, from: any, to: any, nextAttributes: any) => boolean;\n  onStart?: () => void;\n  onFrame?: (step: IStep, ratio: number) => void;\n  onEnd?: () => void;\n  onRemove?: () => void;\n}\n\n// VGrammar和 vrender命名不一致，好尴尬\nexport interface MorphingAnimateConfig extends Omit<BaseAnimateConfig, 'interpolate'> {\n  duration?: number;\n  easing?: EasingType; // 统一到easing\n  delay?: number;\n}\n\nexport interface MultiMorphingAnimateConfig extends MorphingAnimateConfig {\n  splitPath?: 'clone' | ((graphic: IGraphic, count: number, needAppend?: boolean) => IGraphic[]);\n  individualDelay?: (index: number, count: number, fromGraphic: IGraphic, toGraphic: IGraphic) => number;\n}\n"]}