Frame.ts

  1. import {
  2.     ALIAS, TIMING_FUNCTION, TRANSFORM_NAME, EASING_NAME
  3. } from "./consts";
  4. import { isRole, getType, isPropertyObject, getValueByNames, isFixed, getNames, getEasing } from "./utils";
  5. import { toPropertyObject, splitStyle, toObject } from "./utils/property";
  6. import {
  7.     isObject, isArray, isString,
  8.     ANIMATION, TRANSFORM, FILTER, PROPERTY, FUNCTION, ARRAY, OBJECT, IObject, isUndefined
  9. } from "@daybrush/utils";
  10. import { NameType } from "./types";
  12. function toInnerProperties(obj: IObject<string>) {
  13.     if (!obj) {
  14.         return "";
  15.     }
  16.     const arrObj = [];
  18.     for (const name in obj) {
  19.         arrObj.push(`${name.replace(/\d$/g, "")}(${obj[name]})`);
  20.     }
  21.     return arrObj.join(" ");
  22. }
  24. /* eslint-disable */
  25. function clone(target: IObject<any>, toValue = false) {
  26.     return merge({}, target, toValue);
  27. }
  28. function merge(to: IObject<any>, from: IObject<any>, toValue = false) {
  29.     for (const name in from) {
  30.         const value = from[name];
  31.         const type = getType(value);
  33.         if (type === PROPERTY) {
  34.             to[name] = toValue ? value.toValue() : value.clone();
  35.         } else if (type === FUNCTION) {
  36.             to[name] = toValue ? getValue([name], value) : value;
  37.         } else if (type === ARRAY) {
  38.             to[name] = value.slice();
  39.         } else if (type === OBJECT) {
  40.             if (isObject(to[name]) && !isPropertyObject(to[name])) {
  41.                 merge(to[name], value, toValue);
  42.             } else {
  43.                 to[name] = clone(value, toValue);
  44.             }
  45.         } else {
  46.             to[name] = from[name];
  47.         }
  48.     }
  49.     return to;
  50. }
  51. /* eslint-enable */
  53. function getPropertyName(args: NameType[]) {
  54.     return args[0] in ALIAS ? ALIAS[args[0]] : args;
  55. }
  56. function getValue(names: NameType[], value: any): any {
  57.     const type = getType(value);
  59.     if (type === PROPERTY) {
  60.         return value.toValue();
  61.     } else if (type === FUNCTION) {
  62.         if (names[0] !== TIMING_FUNCTION) {
  63.             return getValue(names, value());
  64.         }
  65.     } else if (type === OBJECT) {
  66.         return clone(value, true);
  67.     }
  68.     return value;
  69. }
  70. /**
  71. * Animation's Frame
  72. */
  73. class Frame {
  74.     public properties: IObject<any>;
  75.     /**
  76.      * @param - properties
  77.      * @example
  78.   const frame = new Scene.Frame({
  79.       display: "none"
  80.       transform: {
  81.           translate: "50px",
  82.           scale: "5, 5",
  83.       }
  84.   });
  85.      */
  86.     constructor(properties: any = {}) {
  87.         this.properties = {};
  88.         this.set(properties);
  89.     }
  90.     /**
  91.       * get property value
  92.       * @param {...Number|String|PropertyObject} args - property name or value
  93.       * @example
  94.       frame.get("display") // => "none", "block", ....
  95.       frame.get("transform", "translate") // => "10px,10px"
  96.       */
  97.     public get(...args: NameType[]) {
  98.         const value = this.raw(...args);
  100.         return getValue(getPropertyName(args), value);
  101.     }
  103.     public raw(...args: NameType[]) {
  104.         return getValueByNames(getPropertyName(args), this.properties);
  105.     }
  106.     /**
  107.       * remove property value
  108.       * @param {...String} args - property name
  109.       * @return {Frame} An instance itself
  110.       * @example
  111.       frame.remove("display")
  112.       */
  113.     public remove(...args: NameType[]) {
  114.         const params = getPropertyName(args);
  115.         const length = params.length;
  117.         if (!length) {
  118.             return this;
  119.         }
  120.         const value = getValueByNames(params, this.properties, length - 1);
  122.         if (isObject(value)) {
  123.             delete value[params[length - 1]];
  124.         }
  125.         return this;
  126.     }
  127.     /**
  128.       * set property
  129.       * @param {...Number|String|PropertyObject} args - property names or values
  130.       * @return {Frame} An instance itself
  131.       * @example
  132.   // one parameter
  133.   frame.set({
  134.       display: "none",
  135.       transform: {
  136.           translate: "10px, 10px",
  137.           scale: "1",
  138.       },
  139.       filter: {
  140.           brightness: "50%",
  141.           grayscale: "100%"
  142.       }
  143.   });
  145.   // two parameters
  146.   frame.set("transform", {
  147.       translate: "10px, 10px",
  148.       scale: "1",
  149.   });
  151.   // three parameters
  152.   frame.set("transform", "translate", "50px");
  153.     */
  154.     public set(...args: any[]) {
  155.         const self = this;
  156.         const length = args.length;
  157.         const params = args.slice(0, -1);
  158.         const value = args[length - 1];
  159.         const firstParam = params[0];
  161.         if (length === 1 && value instanceof Frame) {
  162.             self.merge(value);
  163.         } else if (firstParam in ALIAS) {
  164.             self._set(ALIAS[firstParam], value);
  165.         } else if (length === 2 && isArray(firstParam)) {
  166.             self._set(firstParam, value);
  167.         } else if (isPropertyObject(value)) {
  168.             if (isRole(params)) {
  169.                 self.set(...params, toObject(value));
  170.             } else {
  171.                 self._set(params, value);
  172.             }
  173.         } else if (isArray(value)) {
  174.             self._set(params, value);
  175.         } else if (isObject(value)) {
  176.             if (!self.has(...params) && isRole(params)) {
  177.                 self._set(params, {});
  178.             }
  179.             for (const name in value) {
  180.                 self.set(...params, name, value[name]);
  181.             }
  182.         } else if (isString(value)) {
  183.             if (isRole(params, true)) {
  184.                 if (isFixed(params) || !isRole(params)) {
  185.                     this._set(params, value);
  186.                 } else  {
  187.                     const obj = toPropertyObject(value);
  189.                     if (isObject(obj)) {
  190.                         self.set(...params, obj);
  191.                     }
  192.                 }
  193.                 return this;
  194.             } else {
  195.                 const { styles, length: stylesLength } = splitStyle(value);
  197.                 for (const name in styles) {
  198.                     self.set(...params, name, styles[name]);
  199.                 }
  200.                 if (stylesLength) {
  201.                     return this;
  202.                 }
  203.             }
  204.             self._set(params, value);
  205.         } else {
  206.             self._set(params, value);
  207.         }
  208.         return self;
  209.     }
  210.     /**
  211.       * Gets the names of properties.
  212.       * @return the names of properties.
  213.       * @example
  214.   // one parameter
  215.   frame.set({
  216.       display: "none",
  217.       transform: {
  218.           translate: "10px, 10px",
  219.           scale: "1",
  220.       },
  221.   });
  223.   // [["display"], ["transform", "translate"], ["transform", "scale"]]
  224.   console.log(frame.getNames());
  225.     */
  226.     public getNames(): string[][] {
  227.         return getNames(this.properties, []);
  228.     }
  229.     /**
  230.       * check that has property.
  231.       * @param {...String} args - property name
  232.       * @example
  233.       frame.has("property", "display") // => true or false
  234.       */
  235.     public has(...args: NameType[]) {
  236.         const params = getPropertyName(args);
  237.         const length = params.length;
  239.         if (!length) {
  240.             return false;
  241.         }
  242.         return !isUndefined(getValueByNames(params, this.properties, length));
  243.     }
  244.     /**
  245.       * clone frame.
  246.       * @return {Frame} An instance of clone
  247.       * @example
  248.       frame.clone();
  249.       */
  250.     public clone() {
  251.         const frame = new Frame();
  253.         return frame.merge(this);
  254.     }
  255.     /**
  256.       * merge one frame to other frame.
  257.       * @param - target frame.
  258.       * @return {Frame} An instance itself
  259.       * @example
  260.       frame.merge(frame2);
  261.       */
  262.     public merge(frame: Frame) {
  263.         const properties = this.properties;
  264.         const frameProperties = frame.properties;
  266.         if (frameProperties) {
  267.             merge(properties, frameProperties);
  268.         }
  269.         return this;
  270.     }
  271.     /**
  272.       * Specifies an css object that coverted the frame.
  273.       * @return {object} cssObject
  274.       */
  275.     public toCSSObject() {
  276.         const properties = this.get();
  277.         const cssObject: IObject<string> = {};
  279.         for (const name in properties) {
  280.             if (isRole([name], true)) {
  281.                 continue;
  282.             }
  283.             const value = properties[name];
  285.             if (name === TIMING_FUNCTION) {
  286.                 cssObject[TIMING_FUNCTION.replace("animation", ANIMATION)] =
  287.                     (isString(value) ? value : value[EASING_NAME]) || "initial";
  288.             } else {
  289.                 cssObject[name] = value;
  290.             }
  291.         }
  292.         const transform = toInnerProperties(properties[TRANSFORM_NAME]);
  293.         const filter = toInnerProperties(properties.filter);
  295.         TRANSFORM && transform && (cssObject[TRANSFORM] = transform);
  296.         FILTER && filter && (cssObject[FILTER] = filter);
  297.         return cssObject;
  298.     }
  299.     /**
  300.       * Specifies an css text that coverted the frame.
  301.       * @return {string} cssText
  302.       */
  303.     public toCSS() {
  304.         const cssObject = this.toCSSObject();
  305.         const cssArray = [];
  307.         for (const name in cssObject) {
  308.             cssArray.push(`${name}:${cssObject[name]};`);
  309.         }
  310.         return cssArray.join("");
  311.     }
  312.     private _set(args: NameType[], value: any) {
  313.         let properties = this.properties;
  314.         const length = args.length;
  316.         for (let i = 0; i < length - 1; ++i) {
  317.             const name = args[i];
  319.             !(name in properties) && (properties[name] = {});
  320.             properties = properties[name];
  321.         }
  322.         if (!length) {
  323.             return;
  324.         }
  325.         if (args.length === 1 && args[0] === TIMING_FUNCTION ) {
  326.             properties[TIMING_FUNCTION] = getEasing(value);
  327.         } else {
  328.             properties[args[length - 1]] = isString(value) ? toPropertyObject(value) : value;
  329.         }
  330.     }
  331. }
  332. export default Frame;