import { utils, Graphics, Container, Sprite as Sprite$1, TextStyle, Rectangle, Text as Text$1, AnimatedSprite as AnimatedSprite$1, Texture } from 'pixi.js';

function createCommonjsModule(fn, module) {
	return module = { exports: {} }, fn(module, module.exports), module.exports;
}

var colors = [
  {
    "value":"#B0171F",
    "name":"indian red"
  },
  {
    "value":"#DC143C",
    "css":true,
    "name":"crimson"
  },
  {
    "value":"#FFB6C1",
    "css":true,
    "name":"lightpink"
  },
  {
    "value":"#FFAEB9",
    "name":"lightpink 1"
  },
  {
    "value":"#EEA2AD",
    "name":"lightpink 2"
  },
  {
    "value":"#CD8C95",
    "name":"lightpink 3"
  },
  {
    "value":"#8B5F65",
    "name":"lightpink 4"
  },
  {
    "value":"#FFC0CB",
    "css":true,
    "name":"pink"
  },
  {
    "value":"#FFB5C5",
    "name":"pink 1"
  },
  {
    "value":"#EEA9B8",
    "name":"pink 2"
  },
  {
    "value":"#CD919E",
    "name":"pink 3"
  },
  {
    "value":"#8B636C",
    "name":"pink 4"
  },
  {
    "value":"#DB7093",
    "css":true,
    "name":"palevioletred"
  },
  {
    "value":"#FF82AB",
    "name":"palevioletred 1"
  },
  {
    "value":"#EE799F",
    "name":"palevioletred 2"
  },
  {
    "value":"#CD6889",
    "name":"palevioletred 3"
  },
  {
    "value":"#8B475D",
    "name":"palevioletred 4"
  },
  {
    "value":"#FFF0F5",
    "name":"lavenderblush 1"
  },
  {
    "value":"#FFF0F5",
    "css":true,
    "name":"lavenderblush"
  },
  {
    "value":"#EEE0E5",
    "name":"lavenderblush 2"
  },
  {
    "value":"#CDC1C5",
    "name":"lavenderblush 3"
  },
  {
    "value":"#8B8386",
    "name":"lavenderblush 4"
  },
  {
    "value":"#FF3E96",
    "name":"violetred 1"
  },
  {
    "value":"#EE3A8C",
    "name":"violetred 2"
  },
  {
    "value":"#CD3278",
    "name":"violetred 3"
  },
  {
    "value":"#8B2252",
    "name":"violetred 4"
  },
  {
    "value":"#FF69B4",
    "css":true,
    "name":"hotpink"
  },
  {
    "value":"#FF6EB4",
    "name":"hotpink 1"
  },
  {
    "value":"#EE6AA7",
    "name":"hotpink 2"
  },
  {
    "value":"#CD6090",
    "name":"hotpink 3"
  },
  {
    "value":"#8B3A62",
    "name":"hotpink 4"
  },
  {
    "value":"#872657",
    "name":"raspberry"
  },
  {
    "value":"#FF1493",
    "name":"deeppink 1"
  },
  {
    "value":"#FF1493",
    "css":true,
    "name":"deeppink"
  },
  {
    "value":"#EE1289",
    "name":"deeppink 2"
  },
  {
    "value":"#CD1076",
    "name":"deeppink 3"
  },
  {
    "value":"#8B0A50",
    "name":"deeppink 4"
  },
  {
    "value":"#FF34B3",
    "name":"maroon 1"
  },
  {
    "value":"#EE30A7",
    "name":"maroon 2"
  },
  {
    "value":"#CD2990",
    "name":"maroon 3"
  },
  {
    "value":"#8B1C62",
    "name":"maroon 4"
  },
  {
    "value":"#C71585",
    "css":true,
    "name":"mediumvioletred"
  },
  {
    "value":"#D02090",
    "name":"violetred"
  },
  {
    "value":"#DA70D6",
    "css":true,
    "name":"orchid"
  },
  {
    "value":"#FF83FA",
    "name":"orchid 1"
  },
  {
    "value":"#EE7AE9",
    "name":"orchid 2"
  },
  {
    "value":"#CD69C9",
    "name":"orchid 3"
  },
  {
    "value":"#8B4789",
    "name":"orchid 4"
  },
  {
    "value":"#D8BFD8",
    "css":true,
    "name":"thistle"
  },
  {
    "value":"#FFE1FF",
    "name":"thistle 1"
  },
  {
    "value":"#EED2EE",
    "name":"thistle 2"
  },
  {
    "value":"#CDB5CD",
    "name":"thistle 3"
  },
  {
    "value":"#8B7B8B",
    "name":"thistle 4"
  },
  {
    "value":"#FFBBFF",
    "name":"plum 1"
  },
  {
    "value":"#EEAEEE",
    "name":"plum 2"
  },
  {
    "value":"#CD96CD",
    "name":"plum 3"
  },
  {
    "value":"#8B668B",
    "name":"plum 4"
  },
  {
    "value":"#DDA0DD",
    "css":true,
    "name":"plum"
  },
  {
    "value":"#EE82EE",
    "css":true,
    "name":"violet"
  },
  {
    "value":"#FF00FF",
    "vga":true,
    "name":"magenta"
  },
  {
    "value":"#FF00FF",
    "vga":true,
    "css":true,
    "name":"fuchsia"
  },
  {
    "value":"#EE00EE",
    "name":"magenta 2"
  },
  {
    "value":"#CD00CD",
    "name":"magenta 3"
  },
  {
    "value":"#8B008B",
    "name":"magenta 4"
  },
  {
    "value":"#8B008B",
    "css":true,
    "name":"darkmagenta"
  },
  {
    "value":"#800080",
    "vga":true,
    "css":true,
    "name":"purple"
  },
  {
    "value":"#BA55D3",
    "css":true,
    "name":"mediumorchid"
  },
  {
    "value":"#E066FF",
    "name":"mediumorchid 1"
  },
  {
    "value":"#D15FEE",
    "name":"mediumorchid 2"
  },
  {
    "value":"#B452CD",
    "name":"mediumorchid 3"
  },
  {
    "value":"#7A378B",
    "name":"mediumorchid 4"
  },
  {
    "value":"#9400D3",
    "css":true,
    "name":"darkviolet"
  },
  {
    "value":"#9932CC",
    "css":true,
    "name":"darkorchid"
  },
  {
    "value":"#BF3EFF",
    "name":"darkorchid 1"
  },
  {
    "value":"#B23AEE",
    "name":"darkorchid 2"
  },
  {
    "value":"#9A32CD",
    "name":"darkorchid 3"
  },
  {
    "value":"#68228B",
    "name":"darkorchid 4"
  },
  {
    "value":"#4B0082",
    "css":true,
    "name":"indigo"
  },
  {
    "value":"#8A2BE2",
    "css":true,
    "name":"blueviolet"
  },
  {
    "value":"#9B30FF",
    "name":"purple 1"
  },
  {
    "value":"#912CEE",
    "name":"purple 2"
  },
  {
    "value":"#7D26CD",
    "name":"purple 3"
  },
  {
    "value":"#551A8B",
    "name":"purple 4"
  },
  {
    "value":"#9370DB",
    "css":true,
    "name":"mediumpurple"
  },
  {
    "value":"#AB82FF",
    "name":"mediumpurple 1"
  },
  {
    "value":"#9F79EE",
    "name":"mediumpurple 2"
  },
  {
    "value":"#8968CD",
    "name":"mediumpurple 3"
  },
  {
    "value":"#5D478B",
    "name":"mediumpurple 4"
  },
  {
    "value":"#483D8B",
    "css":true,
    "name":"darkslateblue"
  },
  {
    "value":"#8470FF",
    "name":"lightslateblue"
  },
  {
    "value":"#7B68EE",
    "css":true,
    "name":"mediumslateblue"
  },
  {
    "value":"#6A5ACD",
    "css":true,
    "name":"slateblue"
  },
  {
    "value":"#836FFF",
    "name":"slateblue 1"
  },
  {
    "value":"#7A67EE",
    "name":"slateblue 2"
  },
  {
    "value":"#6959CD",
    "name":"slateblue 3"
  },
  {
    "value":"#473C8B",
    "name":"slateblue 4"
  },
  {
    "value":"#F8F8FF",
    "css":true,
    "name":"ghostwhite"
  },
  {
    "value":"#E6E6FA",
    "css":true,
    "name":"lavender"
  },
  {
    "value":"#0000FF",
    "vga":true,
    "css":true,
    "name":"blue"
  },
  {
    "value":"#0000EE",
    "name":"blue 2"
  },
  {
    "value":"#0000CD",
    "name":"blue 3"
  },
  {
    "value":"#0000CD",
    "css":true,
    "name":"mediumblue"
  },
  {
    "value":"#00008B",
    "name":"blue 4"
  },
  {
    "value":"#00008B",
    "css":true,
    "name":"darkblue"
  },
  {
    "value":"#000080",
    "vga":true,
    "css":true,
    "name":"navy"
  },
  {
    "value":"#191970",
    "css":true,
    "name":"midnightblue"
  },
  {
    "value":"#3D59AB",
    "name":"cobalt"
  },
  {
    "value":"#4169E1",
    "css":true,
    "name":"royalblue"
  },
  {
    "value":"#4876FF",
    "name":"royalblue 1"
  },
  {
    "value":"#436EEE",
    "name":"royalblue 2"
  },
  {
    "value":"#3A5FCD",
    "name":"royalblue 3"
  },
  {
    "value":"#27408B",
    "name":"royalblue 4"
  },
  {
    "value":"#6495ED",
    "css":true,
    "name":"cornflowerblue"
  },
  {
    "value":"#B0C4DE",
    "css":true,
    "name":"lightsteelblue"
  },
  {
    "value":"#CAE1FF",
    "name":"lightsteelblue 1"
  },
  {
    "value":"#BCD2EE",
    "name":"lightsteelblue 2"
  },
  {
    "value":"#A2B5CD",
    "name":"lightsteelblue 3"
  },
  {
    "value":"#6E7B8B",
    "name":"lightsteelblue 4"
  },
  {
    "value":"#778899",
    "css":true,
    "name":"lightslategray"
  },
  {
    "value":"#708090",
    "css":true,
    "name":"slategray"
  },
  {
    "value":"#C6E2FF",
    "name":"slategray 1"
  },
  {
    "value":"#B9D3EE",
    "name":"slategray 2"
  },
  {
    "value":"#9FB6CD",
    "name":"slategray 3"
  },
  {
    "value":"#6C7B8B",
    "name":"slategray 4"
  },
  {
    "value":"#1E90FF",
    "name":"dodgerblue 1"
  },
  {
    "value":"#1E90FF",
    "css":true,
    "name":"dodgerblue"
  },
  {
    "value":"#1C86EE",
    "name":"dodgerblue 2"
  },
  {
    "value":"#1874CD",
    "name":"dodgerblue 3"
  },
  {
    "value":"#104E8B",
    "name":"dodgerblue 4"
  },
  {
    "value":"#F0F8FF",
    "css":true,
    "name":"aliceblue"
  },
  {
    "value":"#4682B4",
    "css":true,
    "name":"steelblue"
  },
  {
    "value":"#63B8FF",
    "name":"steelblue 1"
  },
  {
    "value":"#5CACEE",
    "name":"steelblue 2"
  },
  {
    "value":"#4F94CD",
    "name":"steelblue 3"
  },
  {
    "value":"#36648B",
    "name":"steelblue 4"
  },
  {
    "value":"#87CEFA",
    "css":true,
    "name":"lightskyblue"
  },
  {
    "value":"#B0E2FF",
    "name":"lightskyblue 1"
  },
  {
    "value":"#A4D3EE",
    "name":"lightskyblue 2"
  },
  {
    "value":"#8DB6CD",
    "name":"lightskyblue 3"
  },
  {
    "value":"#607B8B",
    "name":"lightskyblue 4"
  },
  {
    "value":"#87CEFF",
    "name":"skyblue 1"
  },
  {
    "value":"#7EC0EE",
    "name":"skyblue 2"
  },
  {
    "value":"#6CA6CD",
    "name":"skyblue 3"
  },
  {
    "value":"#4A708B",
    "name":"skyblue 4"
  },
  {
    "value":"#87CEEB",
    "css":true,
    "name":"skyblue"
  },
  {
    "value":"#00BFFF",
    "name":"deepskyblue 1"
  },
  {
    "value":"#00BFFF",
    "css":true,
    "name":"deepskyblue"
  },
  {
    "value":"#00B2EE",
    "name":"deepskyblue 2"
  },
  {
    "value":"#009ACD",
    "name":"deepskyblue 3"
  },
  {
    "value":"#00688B",
    "name":"deepskyblue 4"
  },
  {
    "value":"#33A1C9",
    "name":"peacock"
  },
  {
    "value":"#ADD8E6",
    "css":true,
    "name":"lightblue"
  },
  {
    "value":"#BFEFFF",
    "name":"lightblue 1"
  },
  {
    "value":"#B2DFEE",
    "name":"lightblue 2"
  },
  {
    "value":"#9AC0CD",
    "name":"lightblue 3"
  },
  {
    "value":"#68838B",
    "name":"lightblue 4"
  },
  {
    "value":"#B0E0E6",
    "css":true,
    "name":"powderblue"
  },
  {
    "value":"#98F5FF",
    "name":"cadetblue 1"
  },
  {
    "value":"#8EE5EE",
    "name":"cadetblue 2"
  },
  {
    "value":"#7AC5CD",
    "name":"cadetblue 3"
  },
  {
    "value":"#53868B",
    "name":"cadetblue 4"
  },
  {
    "value":"#00F5FF",
    "name":"turquoise 1"
  },
  {
    "value":"#00E5EE",
    "name":"turquoise 2"
  },
  {
    "value":"#00C5CD",
    "name":"turquoise 3"
  },
  {
    "value":"#00868B",
    "name":"turquoise 4"
  },
  {
    "value":"#5F9EA0",
    "css":true,
    "name":"cadetblue"
  },
  {
    "value":"#00CED1",
    "css":true,
    "name":"darkturquoise"
  },
  {
    "value":"#F0FFFF",
    "name":"azure 1"
  },
  {
    "value":"#F0FFFF",
    "css":true,
    "name":"azure"
  },
  {
    "value":"#E0EEEE",
    "name":"azure 2"
  },
  {
    "value":"#C1CDCD",
    "name":"azure 3"
  },
  {
    "value":"#838B8B",
    "name":"azure 4"
  },
  {
    "value":"#E0FFFF",
    "name":"lightcyan 1"
  },
  {
    "value":"#E0FFFF",
    "css":true,
    "name":"lightcyan"
  },
  {
    "value":"#D1EEEE",
    "name":"lightcyan 2"
  },
  {
    "value":"#B4CDCD",
    "name":"lightcyan 3"
  },
  {
    "value":"#7A8B8B",
    "name":"lightcyan 4"
  },
  {
    "value":"#BBFFFF",
    "name":"paleturquoise 1"
  },
  {
    "value":"#AEEEEE",
    "name":"paleturquoise 2"
  },
  {
    "value":"#AEEEEE",
    "css":true,
    "name":"paleturquoise"
  },
  {
    "value":"#96CDCD",
    "name":"paleturquoise 3"
  },
  {
    "value":"#668B8B",
    "name":"paleturquoise 4"
  },
  {
    "value":"#2F4F4F",
    "css":true,
    "name":"darkslategray"
  },
  {
    "value":"#97FFFF",
    "name":"darkslategray 1"
  },
  {
    "value":"#8DEEEE",
    "name":"darkslategray 2"
  },
  {
    "value":"#79CDCD",
    "name":"darkslategray 3"
  },
  {
    "value":"#528B8B",
    "name":"darkslategray 4"
  },
  {
    "value":"#00FFFF",
    "name":"cyan"
  },
  {
    "value":"#00FFFF",
    "css":true,
    "name":"aqua"
  },
  {
    "value":"#00EEEE",
    "name":"cyan 2"
  },
  {
    "value":"#00CDCD",
    "name":"cyan 3"
  },
  {
    "value":"#008B8B",
    "name":"cyan 4"
  },
  {
    "value":"#008B8B",
    "css":true,
    "name":"darkcyan"
  },
  {
    "value":"#008080",
    "vga":true,
    "css":true,
    "name":"teal"
  },
  {
    "value":"#48D1CC",
    "css":true,
    "name":"mediumturquoise"
  },
  {
    "value":"#20B2AA",
    "css":true,
    "name":"lightseagreen"
  },
  {
    "value":"#03A89E",
    "name":"manganeseblue"
  },
  {
    "value":"#40E0D0",
    "css":true,
    "name":"turquoise"
  },
  {
    "value":"#808A87",
    "name":"coldgrey"
  },
  {
    "value":"#00C78C",
    "name":"turquoiseblue"
  },
  {
    "value":"#7FFFD4",
    "name":"aquamarine 1"
  },
  {
    "value":"#7FFFD4",
    "css":true,
    "name":"aquamarine"
  },
  {
    "value":"#76EEC6",
    "name":"aquamarine 2"
  },
  {
    "value":"#66CDAA",
    "name":"aquamarine 3"
  },
  {
    "value":"#66CDAA",
    "css":true,
    "name":"mediumaquamarine"
  },
  {
    "value":"#458B74",
    "name":"aquamarine 4"
  },
  {
    "value":"#00FA9A",
    "css":true,
    "name":"mediumspringgreen"
  },
  {
    "value":"#F5FFFA",
    "css":true,
    "name":"mintcream"
  },
  {
    "value":"#00FF7F",
    "css":true,
    "name":"springgreen"
  },
  {
    "value":"#00EE76",
    "name":"springgreen 1"
  },
  {
    "value":"#00CD66",
    "name":"springgreen 2"
  },
  {
    "value":"#008B45",
    "name":"springgreen 3"
  },
  {
    "value":"#3CB371",
    "css":true,
    "name":"mediumseagreen"
  },
  {
    "value":"#54FF9F",
    "name":"seagreen 1"
  },
  {
    "value":"#4EEE94",
    "name":"seagreen 2"
  },
  {
    "value":"#43CD80",
    "name":"seagreen 3"
  },
  {
    "value":"#2E8B57",
    "name":"seagreen 4"
  },
  {
    "value":"#2E8B57",
    "css":true,
    "name":"seagreen"
  },
  {
    "value":"#00C957",
    "name":"emeraldgreen"
  },
  {
    "value":"#BDFCC9",
    "name":"mint"
  },
  {
    "value":"#3D9140",
    "name":"cobaltgreen"
  },
  {
    "value":"#F0FFF0",
    "name":"honeydew 1"
  },
  {
    "value":"#F0FFF0",
    "css":true,
    "name":"honeydew"
  },
  {
    "value":"#E0EEE0",
    "name":"honeydew 2"
  },
  {
    "value":"#C1CDC1",
    "name":"honeydew 3"
  },
  {
    "value":"#838B83",
    "name":"honeydew 4"
  },
  {
    "value":"#8FBC8F",
    "css":true,
    "name":"darkseagreen"
  },
  {
    "value":"#C1FFC1",
    "name":"darkseagreen 1"
  },
  {
    "value":"#B4EEB4",
    "name":"darkseagreen 2"
  },
  {
    "value":"#9BCD9B",
    "name":"darkseagreen 3"
  },
  {
    "value":"#698B69",
    "name":"darkseagreen 4"
  },
  {
    "value":"#98FB98",
    "css":true,
    "name":"palegreen"
  },
  {
    "value":"#9AFF9A",
    "name":"palegreen 1"
  },
  {
    "value":"#90EE90",
    "name":"palegreen 2"
  },
  {
    "value":"#90EE90",
    "css":true,
    "name":"lightgreen"
  },
  {
    "value":"#7CCD7C",
    "name":"palegreen 3"
  },
  {
    "value":"#548B54",
    "name":"palegreen 4"
  },
  {
    "value":"#32CD32",
    "css":true,
    "name":"limegreen"
  },
  {
    "value":"#228B22",
    "css":true,
    "name":"forestgreen"
  },
  {
    "value":"#00FF00",
    "vga":true,
    "name":"green 1"
  },
  {
    "value":"#00FF00",
    "vga":true,
    "css":true,
    "name":"lime"
  },
  {
    "value":"#00EE00",
    "name":"green 2"
  },
  {
    "value":"#00CD00",
    "name":"green 3"
  },
  {
    "value":"#008B00",
    "name":"green 4"
  },
  {
    "value":"#008000",
    "vga":true,
    "css":true,
    "name":"green"
  },
  {
    "value":"#006400",
    "css":true,
    "name":"darkgreen"
  },
  {
    "value":"#308014",
    "name":"sapgreen"
  },
  {
    "value":"#7CFC00",
    "css":true,
    "name":"lawngreen"
  },
  {
    "value":"#7FFF00",
    "name":"chartreuse 1"
  },
  {
    "value":"#7FFF00",
    "css":true,
    "name":"chartreuse"
  },
  {
    "value":"#76EE00",
    "name":"chartreuse 2"
  },
  {
    "value":"#66CD00",
    "name":"chartreuse 3"
  },
  {
    "value":"#458B00",
    "name":"chartreuse 4"
  },
  {
    "value":"#ADFF2F",
    "css":true,
    "name":"greenyellow"
  },
  {
    "value":"#CAFF70",
    "name":"darkolivegreen 1"
  },
  {
    "value":"#BCEE68",
    "name":"darkolivegreen 2"
  },
  {
    "value":"#A2CD5A",
    "name":"darkolivegreen 3"
  },
  {
    "value":"#6E8B3D",
    "name":"darkolivegreen 4"
  },
  {
    "value":"#556B2F",
    "css":true,
    "name":"darkolivegreen"
  },
  {
    "value":"#6B8E23",
    "css":true,
    "name":"olivedrab"
  },
  {
    "value":"#C0FF3E",
    "name":"olivedrab 1"
  },
  {
    "value":"#B3EE3A",
    "name":"olivedrab 2"
  },
  {
    "value":"#9ACD32",
    "name":"olivedrab 3"
  },
  {
    "value":"#9ACD32",
    "css":true,
    "name":"yellowgreen"
  },
  {
    "value":"#698B22",
    "name":"olivedrab 4"
  },
  {
    "value":"#FFFFF0",
    "name":"ivory 1"
  },
  {
    "value":"#FFFFF0",
    "css":true,
    "name":"ivory"
  },
  {
    "value":"#EEEEE0",
    "name":"ivory 2"
  },
  {
    "value":"#CDCDC1",
    "name":"ivory 3"
  },
  {
    "value":"#8B8B83",
    "name":"ivory 4"
  },
  {
    "value":"#F5F5DC",
    "css":true,
    "name":"beige"
  },
  {
    "value":"#FFFFE0",
    "name":"lightyellow 1"
  },
  {
    "value":"#FFFFE0",
    "css":true,
    "name":"lightyellow"
  },
  {
    "value":"#EEEED1",
    "name":"lightyellow 2"
  },
  {
    "value":"#CDCDB4",
    "name":"lightyellow 3"
  },
  {
    "value":"#8B8B7A",
    "name":"lightyellow 4"
  },
  {
    "value":"#FAFAD2",
    "css":true,
    "name":"lightgoldenrodyellow"
  },
  {
    "value":"#FFFF00",
    "vga":true,
    "name":"yellow 1"
  },
  {
    "value":"#FFFF00",
    "vga":true,
    "css":true,
    "name":"yellow"
  },
  {
    "value":"#EEEE00",
    "name":"yellow 2"
  },
  {
    "value":"#CDCD00",
    "name":"yellow 3"
  },
  {
    "value":"#8B8B00",
    "name":"yellow 4"
  },
  {
    "value":"#808069",
    "name":"warmgrey"
  },
  {
    "value":"#808000",
    "vga":true,
    "css":true,
    "name":"olive"
  },
  {
    "value":"#BDB76B",
    "css":true,
    "name":"darkkhaki"
  },
  {
    "value":"#FFF68F",
    "name":"khaki 1"
  },
  {
    "value":"#EEE685",
    "name":"khaki 2"
  },
  {
    "value":"#CDC673",
    "name":"khaki 3"
  },
  {
    "value":"#8B864E",
    "name":"khaki 4"
  },
  {
    "value":"#F0E68C",
    "css":true,
    "name":"khaki"
  },
  {
    "value":"#EEE8AA",
    "css":true,
    "name":"palegoldenrod"
  },
  {
    "value":"#FFFACD",
    "name":"lemonchiffon 1"
  },
  {
    "value":"#FFFACD",
    "css":true,
    "name":"lemonchiffon"
  },
  {
    "value":"#EEE9BF",
    "name":"lemonchiffon 2"
  },
  {
    "value":"#CDC9A5",
    "name":"lemonchiffon 3"
  },
  {
    "value":"#8B8970",
    "name":"lemonchiffon 4"
  },
  {
    "value":"#FFEC8B",
    "name":"lightgoldenrod 1"
  },
  {
    "value":"#EEDC82",
    "name":"lightgoldenrod 2"
  },
  {
    "value":"#CDBE70",
    "name":"lightgoldenrod 3"
  },
  {
    "value":"#8B814C",
    "name":"lightgoldenrod 4"
  },
  {
    "value":"#E3CF57",
    "name":"banana"
  },
  {
    "value":"#FFD700",
    "name":"gold 1"
  },
  {
    "value":"#FFD700",
    "css":true,
    "name":"gold"
  },
  {
    "value":"#EEC900",
    "name":"gold 2"
  },
  {
    "value":"#CDAD00",
    "name":"gold 3"
  },
  {
    "value":"#8B7500",
    "name":"gold 4"
  },
  {
    "value":"#FFF8DC",
    "name":"cornsilk 1"
  },
  {
    "value":"#FFF8DC",
    "css":true,
    "name":"cornsilk"
  },
  {
    "value":"#EEE8CD",
    "name":"cornsilk 2"
  },
  {
    "value":"#CDC8B1",
    "name":"cornsilk 3"
  },
  {
    "value":"#8B8878",
    "name":"cornsilk 4"
  },
  {
    "value":"#DAA520",
    "css":true,
    "name":"goldenrod"
  },
  {
    "value":"#FFC125",
    "name":"goldenrod 1"
  },
  {
    "value":"#EEB422",
    "name":"goldenrod 2"
  },
  {
    "value":"#CD9B1D",
    "name":"goldenrod 3"
  },
  {
    "value":"#8B6914",
    "name":"goldenrod 4"
  },
  {
    "value":"#B8860B",
    "css":true,
    "name":"darkgoldenrod"
  },
  {
    "value":"#FFB90F",
    "name":"darkgoldenrod 1"
  },
  {
    "value":"#EEAD0E",
    "name":"darkgoldenrod 2"
  },
  {
    "value":"#CD950C",
    "name":"darkgoldenrod 3"
  },
  {
    "value":"#8B6508",
    "name":"darkgoldenrod 4"
  },
  {
    "value":"#FFA500",
    "name":"orange 1"
  },
  {
    "value":"#FF8000",
    "css":true,
    "name":"orange"
  },
  {
    "value":"#EE9A00",
    "name":"orange 2"
  },
  {
    "value":"#CD8500",
    "name":"orange 3"
  },
  {
    "value":"#8B5A00",
    "name":"orange 4"
  },
  {
    "value":"#FFFAF0",
    "css":true,
    "name":"floralwhite"
  },
  {
    "value":"#FDF5E6",
    "css":true,
    "name":"oldlace"
  },
  {
    "value":"#F5DEB3",
    "css":true,
    "name":"wheat"
  },
  {
    "value":"#FFE7BA",
    "name":"wheat 1"
  },
  {
    "value":"#EED8AE",
    "name":"wheat 2"
  },
  {
    "value":"#CDBA96",
    "name":"wheat 3"
  },
  {
    "value":"#8B7E66",
    "name":"wheat 4"
  },
  {
    "value":"#FFE4B5",
    "css":true,
    "name":"moccasin"
  },
  {
    "value":"#FFEFD5",
    "css":true,
    "name":"papayawhip"
  },
  {
    "value":"#FFEBCD",
    "css":true,
    "name":"blanchedalmond"
  },
  {
    "value":"#FFDEAD",
    "name":"navajowhite 1"
  },
  {
    "value":"#FFDEAD",
    "css":true,
    "name":"navajowhite"
  },
  {
    "value":"#EECFA1",
    "name":"navajowhite 2"
  },
  {
    "value":"#CDB38B",
    "name":"navajowhite 3"
  },
  {
    "value":"#8B795E",
    "name":"navajowhite 4"
  },
  {
    "value":"#FCE6C9",
    "name":"eggshell"
  },
  {
    "value":"#D2B48C",
    "css":true,
    "name":"tan"
  },
  {
    "value":"#9C661F",
    "name":"brick"
  },
  {
    "value":"#FF9912",
    "name":"cadmiumyellow"
  },
  {
    "value":"#FAEBD7",
    "css":true,
    "name":"antiquewhite"
  },
  {
    "value":"#FFEFDB",
    "name":"antiquewhite 1"
  },
  {
    "value":"#EEDFCC",
    "name":"antiquewhite 2"
  },
  {
    "value":"#CDC0B0",
    "name":"antiquewhite 3"
  },
  {
    "value":"#8B8378",
    "name":"antiquewhite 4"
  },
  {
    "value":"#DEB887",
    "css":true,
    "name":"burlywood"
  },
  {
    "value":"#FFD39B",
    "name":"burlywood 1"
  },
  {
    "value":"#EEC591",
    "name":"burlywood 2"
  },
  {
    "value":"#CDAA7D",
    "name":"burlywood 3"
  },
  {
    "value":"#8B7355",
    "name":"burlywood 4"
  },
  {
    "value":"#FFE4C4",
    "name":"bisque 1"
  },
  {
    "value":"#FFE4C4",
    "css":true,
    "name":"bisque"
  },
  {
    "value":"#EED5B7",
    "name":"bisque 2"
  },
  {
    "value":"#CDB79E",
    "name":"bisque 3"
  },
  {
    "value":"#8B7D6B",
    "name":"bisque 4"
  },
  {
    "value":"#E3A869",
    "name":"melon"
  },
  {
    "value":"#ED9121",
    "name":"carrot"
  },
  {
    "value":"#FF8C00",
    "css":true,
    "name":"darkorange"
  },
  {
    "value":"#FF7F00",
    "name":"darkorange 1"
  },
  {
    "value":"#EE7600",
    "name":"darkorange 2"
  },
  {
    "value":"#CD6600",
    "name":"darkorange 3"
  },
  {
    "value":"#8B4500",
    "name":"darkorange 4"
  },
  {
    "value":"#FFA54F",
    "name":"tan 1"
  },
  {
    "value":"#EE9A49",
    "name":"tan 2"
  },
  {
    "value":"#CD853F",
    "name":"tan 3"
  },
  {
    "value":"#CD853F",
    "css":true,
    "name":"peru"
  },
  {
    "value":"#8B5A2B",
    "name":"tan 4"
  },
  {
    "value":"#FAF0E6",
    "css":true,
    "name":"linen"
  },
  {
    "value":"#FFDAB9",
    "name":"peachpuff 1"
  },
  {
    "value":"#FFDAB9",
    "css":true,
    "name":"peachpuff"
  },
  {
    "value":"#EECBAD",
    "name":"peachpuff 2"
  },
  {
    "value":"#CDAF95",
    "name":"peachpuff 3"
  },
  {
    "value":"#8B7765",
    "name":"peachpuff 4"
  },
  {
    "value":"#FFF5EE",
    "name":"seashell 1"
  },
  {
    "value":"#FFF5EE",
    "css":true,
    "name":"seashell"
  },
  {
    "value":"#EEE5DE",
    "name":"seashell 2"
  },
  {
    "value":"#CDC5BF",
    "name":"seashell 3"
  },
  {
    "value":"#8B8682",
    "name":"seashell 4"
  },
  {
    "value":"#F4A460",
    "css":true,
    "name":"sandybrown"
  },
  {
    "value":"#C76114",
    "name":"rawsienna"
  },
  {
    "value":"#D2691E",
    "css":true,
    "name":"chocolate"
  },
  {
    "value":"#FF7F24",
    "name":"chocolate 1"
  },
  {
    "value":"#EE7621",
    "name":"chocolate 2"
  },
  {
    "value":"#CD661D",
    "name":"chocolate 3"
  },
  {
    "value":"#8B4513",
    "name":"chocolate 4"
  },
  {
    "value":"#8B4513",
    "css":true,
    "name":"saddlebrown"
  },
  {
    "value":"#292421",
    "name":"ivoryblack"
  },
  {
    "value":"#FF7D40",
    "name":"flesh"
  },
  {
    "value":"#FF6103",
    "name":"cadmiumorange"
  },
  {
    "value":"#8A360F",
    "name":"burntsienna"
  },
  {
    "value":"#A0522D",
    "css":true,
    "name":"sienna"
  },
  {
    "value":"#FF8247",
    "name":"sienna 1"
  },
  {
    "value":"#EE7942",
    "name":"sienna 2"
  },
  {
    "value":"#CD6839",
    "name":"sienna 3"
  },
  {
    "value":"#8B4726",
    "name":"sienna 4"
  },
  {
    "value":"#FFA07A",
    "name":"lightsalmon 1"
  },
  {
    "value":"#FFA07A",
    "css":true,
    "name":"lightsalmon"
  },
  {
    "value":"#EE9572",
    "name":"lightsalmon 2"
  },
  {
    "value":"#CD8162",
    "name":"lightsalmon 3"
  },
  {
    "value":"#8B5742",
    "name":"lightsalmon 4"
  },
  {
    "value":"#FF7F50",
    "css":true,
    "name":"coral"
  },
  {
    "value":"#FF4500",
    "name":"orangered 1"
  },
  {
    "value":"#FF4500",
    "css":true,
    "name":"orangered"
  },
  {
    "value":"#EE4000",
    "name":"orangered 2"
  },
  {
    "value":"#CD3700",
    "name":"orangered 3"
  },
  {
    "value":"#8B2500",
    "name":"orangered 4"
  },
  {
    "value":"#5E2612",
    "name":"sepia"
  },
  {
    "value":"#E9967A",
    "css":true,
    "name":"darksalmon"
  },
  {
    "value":"#FF8C69",
    "name":"salmon 1"
  },
  {
    "value":"#EE8262",
    "name":"salmon 2"
  },
  {
    "value":"#CD7054",
    "name":"salmon 3"
  },
  {
    "value":"#8B4C39",
    "name":"salmon 4"
  },
  {
    "value":"#FF7256",
    "name":"coral 1"
  },
  {
    "value":"#EE6A50",
    "name":"coral 2"
  },
  {
    "value":"#CD5B45",
    "name":"coral 3"
  },
  {
    "value":"#8B3E2F",
    "name":"coral 4"
  },
  {
    "value":"#8A3324",
    "name":"burntumber"
  },
  {
    "value":"#FF6347",
    "name":"tomato 1"
  },
  {
    "value":"#FF6347",
    "css":true,
    "name":"tomato"
  },
  {
    "value":"#EE5C42",
    "name":"tomato 2"
  },
  {
    "value":"#CD4F39",
    "name":"tomato 3"
  },
  {
    "value":"#8B3626",
    "name":"tomato 4"
  },
  {
    "value":"#FA8072",
    "css":true,
    "name":"salmon"
  },
  {
    "value":"#FFE4E1",
    "name":"mistyrose 1"
  },
  {
    "value":"#FFE4E1",
    "css":true,
    "name":"mistyrose"
  },
  {
    "value":"#EED5D2",
    "name":"mistyrose 2"
  },
  {
    "value":"#CDB7B5",
    "name":"mistyrose 3"
  },
  {
    "value":"#8B7D7B",
    "name":"mistyrose 4"
  },
  {
    "value":"#FFFAFA",
    "name":"snow 1"
  },
  {
    "value":"#FFFAFA",
    "css":true,
    "name":"snow"
  },
  {
    "value":"#EEE9E9",
    "name":"snow 2"
  },
  {
    "value":"#CDC9C9",
    "name":"snow 3"
  },
  {
    "value":"#8B8989",
    "name":"snow 4"
  },
  {
    "value":"#BC8F8F",
    "css":true,
    "name":"rosybrown"
  },
  {
    "value":"#FFC1C1",
    "name":"rosybrown 1"
  },
  {
    "value":"#EEB4B4",
    "name":"rosybrown 2"
  },
  {
    "value":"#CD9B9B",
    "name":"rosybrown 3"
  },
  {
    "value":"#8B6969",
    "name":"rosybrown 4"
  },
  {
    "value":"#F08080",
    "css":true,
    "name":"lightcoral"
  },
  {
    "value":"#CD5C5C",
    "css":true,
    "name":"indianred"
  },
  {
    "value":"#FF6A6A",
    "name":"indianred 1"
  },
  {
    "value":"#EE6363",
    "name":"indianred 2"
  },
  {
    "value":"#8B3A3A",
    "name":"indianred 4"
  },
  {
    "value":"#CD5555",
    "name":"indianred 3"
  },
  {
    "value":"#A52A2A",
    "css":true,
    "name":"brown"
  },
  {
    "value":"#FF4040",
    "name":"brown 1"
  },
  {
    "value":"#EE3B3B",
    "name":"brown 2"
  },
  {
    "value":"#CD3333",
    "name":"brown 3"
  },
  {
    "value":"#8B2323",
    "name":"brown 4"
  },
  {
    "value":"#B22222",
    "css":true,
    "name":"firebrick"
  },
  {
    "value":"#FF3030",
    "name":"firebrick 1"
  },
  {
    "value":"#EE2C2C",
    "name":"firebrick 2"
  },
  {
    "value":"#CD2626",
    "name":"firebrick 3"
  },
  {
    "value":"#8B1A1A",
    "name":"firebrick 4"
  },
  {
    "value":"#FF0000",
    "vga":true,
    "name":"red 1"
  },
  {
    "value":"#FF0000",
    "vga":true,
    "css":true,
    "name":"red"
  },
  {
    "value":"#EE0000",
    "name":"red 2"
  },
  {
    "value":"#CD0000",
    "name":"red 3"
  },
  {
    "value":"#8B0000",
    "name":"red 4"
  },
  {
    "value":"#8B0000",
    "css":true,
    "name":"darkred"
  },
  {
    "value":"#800000",
    "vga":true,
    "css":true,
    "name":"maroon"
  },
  {
    "value":"#8E388E",
    "name":"sgi beet"
  },
  {
    "value":"#7171C6",
    "name":"sgi slateblue"
  },
  {
    "value":"#7D9EC0",
    "name":"sgi lightblue"
  },
  {
    "value":"#388E8E",
    "name":"sgi teal"
  },
  {
    "value":"#71C671",
    "name":"sgi chartreuse"
  },
  {
    "value":"#8E8E38",
    "name":"sgi olivedrab"
  },
  {
    "value":"#C5C1AA",
    "name":"sgi brightgray"
  },
  {
    "value":"#C67171",
    "name":"sgi salmon"
  },
  {
    "value":"#555555",
    "name":"sgi darkgray"
  },
  {
    "value":"#1E1E1E",
    "name":"sgi gray 12"
  },
  {
    "value":"#282828",
    "name":"sgi gray 16"
  },
  {
    "value":"#515151",
    "name":"sgi gray 32"
  },
  {
    "value":"#5B5B5B",
    "name":"sgi gray 36"
  },
  {
    "value":"#848484",
    "name":"sgi gray 52"
  },
  {
    "value":"#8E8E8E",
    "name":"sgi gray 56"
  },
  {
    "value":"#AAAAAA",
    "name":"sgi lightgray"
  },
  {
    "value":"#B7B7B7",
    "name":"sgi gray 72"
  },
  {
    "value":"#C1C1C1",
    "name":"sgi gray 76"
  },
  {
    "value":"#EAEAEA",
    "name":"sgi gray 92"
  },
  {
    "value":"#F4F4F4",
    "name":"sgi gray 96"
  },
  {
    "value":"#FFFFFF",
    "vga":true,
    "css":true,
    "name":"white"
  },
  {
    "value":"#F5F5F5",
    "name":"white smoke"
  },
  {
    "value":"#F5F5F5",
    "name":"gray 96"
  },
  {
    "value":"#DCDCDC",
    "css":true,
    "name":"gainsboro"
  },
  {
    "value":"#D3D3D3",
    "css":true,
    "name":"lightgrey"
  },
  {
    "value":"#C0C0C0",
    "vga":true,
    "css":true,
    "name":"silver"
  },
  {
    "value":"#A9A9A9",
    "css":true,
    "name":"darkgray"
  },
  {
    "value":"#808080",
    "vga":true,
    "css":true,
    "name":"gray"
  },
  {
    "value":"#696969",
    "css":true,
    "name":"dimgray"
  },
  {
    "value":"#696969",
    "name":"gray 42"
  },
  {
    "value":"#000000",
    "vga":true,
    "css":true,
    "name":"black"
  },
  {
    "value":"#FCFCFC",
    "name":"gray 99"
  },
  {
    "value":"#FAFAFA",
    "name":"gray 98"
  },
  {
    "value":"#F7F7F7",
    "name":"gray 97"
  },
  {
    "value":"#F2F2F2",
    "name":"gray 95"
  },
  {
    "value":"#F0F0F0",
    "name":"gray 94"
  },
  {
    "value":"#EDEDED",
    "name":"gray 93"
  },
  {
    "value":"#EBEBEB",
    "name":"gray 92"
  },
  {
    "value":"#E8E8E8",
    "name":"gray 91"
  },
  {
    "value":"#E5E5E5",
    "name":"gray 90"
  },
  {
    "value":"#E3E3E3",
    "name":"gray 89"
  },
  {
    "value":"#E0E0E0",
    "name":"gray 88"
  },
  {
    "value":"#DEDEDE",
    "name":"gray 87"
  },
  {
    "value":"#DBDBDB",
    "name":"gray 86"
  },
  {
    "value":"#D9D9D9",
    "name":"gray 85"
  },
  {
    "value":"#D6D6D6",
    "name":"gray 84"
  },
  {
    "value":"#D4D4D4",
    "name":"gray 83"
  },
  {
    "value":"#D1D1D1",
    "name":"gray 82"
  },
  {
    "value":"#CFCFCF",
    "name":"gray 81"
  },
  {
    "value":"#CCCCCC",
    "name":"gray 80"
  },
  {
    "value":"#C9C9C9",
    "name":"gray 79"
  },
  {
    "value":"#C7C7C7",
    "name":"gray 78"
  },
  {
    "value":"#C4C4C4",
    "name":"gray 77"
  },
  {
    "value":"#C2C2C2",
    "name":"gray 76"
  },
  {
    "value":"#BFBFBF",
    "name":"gray 75"
  },
  {
    "value":"#BDBDBD",
    "name":"gray 74"
  },
  {
    "value":"#BABABA",
    "name":"gray 73"
  },
  {
    "value":"#B8B8B8",
    "name":"gray 72"
  },
  {
    "value":"#B5B5B5",
    "name":"gray 71"
  },
  {
    "value":"#B3B3B3",
    "name":"gray 70"
  },
  {
    "value":"#B0B0B0",
    "name":"gray 69"
  },
  {
    "value":"#ADADAD",
    "name":"gray 68"
  },
  {
    "value":"#ABABAB",
    "name":"gray 67"
  },
  {
    "value":"#A8A8A8",
    "name":"gray 66"
  },
  {
    "value":"#A6A6A6",
    "name":"gray 65"
  },
  {
    "value":"#A3A3A3",
    "name":"gray 64"
  },
  {
    "value":"#A1A1A1",
    "name":"gray 63"
  },
  {
    "value":"#9E9E9E",
    "name":"gray 62"
  },
  {
    "value":"#9C9C9C",
    "name":"gray 61"
  },
  {
    "value":"#999999",
    "name":"gray 60"
  },
  {
    "value":"#969696",
    "name":"gray 59"
  },
  {
    "value":"#949494",
    "name":"gray 58"
  },
  {
    "value":"#919191",
    "name":"gray 57"
  },
  {
    "value":"#8F8F8F",
    "name":"gray 56"
  },
  {
    "value":"#8C8C8C",
    "name":"gray 55"
  },
  {
    "value":"#8A8A8A",
    "name":"gray 54"
  },
  {
    "value":"#878787",
    "name":"gray 53"
  },
  {
    "value":"#858585",
    "name":"gray 52"
  },
  {
    "value":"#828282",
    "name":"gray 51"
  },
  {
    "value":"#7F7F7F",
    "name":"gray 50"
  },
  {
    "value":"#7D7D7D",
    "name":"gray 49"
  },
  {
    "value":"#7A7A7A",
    "name":"gray 48"
  },
  {
    "value":"#787878",
    "name":"gray 47"
  },
  {
    "value":"#757575",
    "name":"gray 46"
  },
  {
    "value":"#737373",
    "name":"gray 45"
  },
  {
    "value":"#707070",
    "name":"gray 44"
  },
  {
    "value":"#6E6E6E",
    "name":"gray 43"
  },
  {
    "value":"#666666",
    "name":"gray 40"
  },
  {
    "value":"#636363",
    "name":"gray 39"
  },
  {
    "value":"#616161",
    "name":"gray 38"
  },
  {
    "value":"#5E5E5E",
    "name":"gray 37"
  },
  {
    "value":"#5C5C5C",
    "name":"gray 36"
  },
  {
    "value":"#595959",
    "name":"gray 35"
  },
  {
    "value":"#575757",
    "name":"gray 34"
  },
  {
    "value":"#545454",
    "name":"gray 33"
  },
  {
    "value":"#525252",
    "name":"gray 32"
  },
  {
    "value":"#4F4F4F",
    "name":"gray 31"
  },
  {
    "value":"#4D4D4D",
    "name":"gray 30"
  },
  {
    "value":"#4A4A4A",
    "name":"gray 29"
  },
  {
    "value":"#474747",
    "name":"gray 28"
  },
  {
    "value":"#454545",
    "name":"gray 27"
  },
  {
    "value":"#424242",
    "name":"gray 26"
  },
  {
    "value":"#404040",
    "name":"gray 25"
  },
  {
    "value":"#3D3D3D",
    "name":"gray 24"
  },
  {
    "value":"#3B3B3B",
    "name":"gray 23"
  },
  {
    "value":"#383838",
    "name":"gray 22"
  },
  {
    "value":"#363636",
    "name":"gray 21"
  },
  {
    "value":"#333333",
    "name":"gray 20"
  },
  {
    "value":"#303030",
    "name":"gray 19"
  },
  {
    "value":"#2E2E2E",
    "name":"gray 18"
  },
  {
    "value":"#2B2B2B",
    "name":"gray 17"
  },
  {
    "value":"#292929",
    "name":"gray 16"
  },
  {
    "value":"#262626",
    "name":"gray 15"
  },
  {
    "value":"#242424",
    "name":"gray 14"
  },
  {
    "value":"#212121",
    "name":"gray 13"
  },
  {
    "value":"#1F1F1F",
    "name":"gray 12"
  },
  {
    "value":"#1C1C1C",
    "name":"gray 11"
  },
  {
    "value":"#1A1A1A",
    "name":"gray 10"
  },
  {
    "value":"#171717",
    "name":"gray 9"
  },
  {
    "value":"#141414",
    "name":"gray 8"
  },
  {
    "value":"#121212",
    "name":"gray 7"
  },
  {
    "value":"#0F0F0F",
    "name":"gray 6"
  },
  {
    "value":"#0D0D0D",
    "name":"gray 5"
  },
  {
    "value":"#0A0A0A",
    "name":"gray 4"
  },
  {
    "value":"#080808",
    "name":"gray 3"
  },
  {
    "value":"#050505",
    "name":"gray 2"
  },
  {
    "value":"#030303",
    "name":"gray 1"
  },
  {
    "value":"#F5F5F5",
    "css":true,
    "name":"whitesmoke"
  }
];

var colornames = createCommonjsModule(function (module) {
/**
 * Module dependencies
 */


var cssColors = colors.filter(function(color){
  return !! color.css
});

var vgaColors = colors.filter(function(color){
  return !! color.vga
});


/**
 * Get color value for a certain name.
 * @param name {String}
 * @return {String} Hex color value
 * @api public
 */

module.exports = function(name) {
  var color = module.exports.get(name);
  return color && color.value
};

/**
 * Get color object.
 *
 * @param name {String}
 * @return {Object} Color object
 * @api public
 */

module.exports.get = function(name) {
  name = name || '';
  name = name.trim().toLowerCase();
  return colors.filter(function(color){
    return color.name.toLowerCase() === name
  }).pop()
};

/**
 * Get all color object.
 *
 * @return {Array}
 * @api public
 */

module.exports.all = module.exports.get.all = function() {
 return colors
};

/**
 * Get color object compatible with CSS.
 *
 * @return {Array}
 * @api public
 */

module.exports.get.css = function(name) {
  if (!name) return cssColors
  name = name || '';
  name = name.trim().toLowerCase();
  return cssColors.filter(function(color){
    return color.name.toLowerCase() === name
  }).pop()
};



module.exports.get.vga = function(name) {
  if (!name) return vgaColors
  name = name || '';
  name = name.trim().toLowerCase();
  return vgaColors.filter(function(color){
    return color.name.toLowerCase() === name
  }).pop()
};
});
var colornames_1 = colornames.get;
var colornames_2 = colornames.all;

function eventify(target) {
    target.callbacks = {};
    target.on = function (eventName, callback) {
        if (!eventName || !callback)
            return target;
        if (!target.hasOwnProperty("callbacks"))
            target.callbacks || (target.callbacks = {});
        var base;
        var events = eventName.split(" ");
        events.map(function (eventName) {
            (base = target.callbacks)[eventName] || (base[eventName] = []);
            target.callbacks[eventName].push(callback);
        });
        return target;
    };
    target.emit = function () {
        var args = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            args[_i] = arguments[_i];
        }
        var eventName = args.shift();
        var events = eventName.split(" ");
        events.map(function (eventName) {
            var list = target.callbacks !== null ? target.callbacks[eventName] || [] : [];
            if (list.length) {
                list.map(function (item) {
                    item && item.apply(target, args);
                });
            }
        });
        return target;
    };
    target.off = function () {
        var args = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            args[_i] = arguments[_i];
        }
        if (args.length === 0) {
            target.callbacks = {};
        }
        else {
            var eventName = args.shift();
            var events = eventName.split(" ");
            events.map(function (eventName) { return delete target.callbacks[eventName]; });
        }
        return target;
    };
    return target;
}

function isPlainObject(object) {
    // tslint:disable-next-line: one-variable-per-declaration
    var proto, ctor, class2type = {}, toString = class2type.toString, // Object.prototype.toString
    hasOwn = class2type.hasOwnProperty, fnToString = hasOwn.toString, // Object.toString/Function.toString
    ObjectFunctionString = fnToString.call(Object); // 'function Object() { [native code] }'
    if (!object || toString.call(object) !== '[object Object]') {
        return false;
    }
    // According to the object created by `Object.create(null)` is no `prototype`
    proto = Object.getPrototypeOf(object);
    if (!proto) {
        return true;
    }
    ctor = hasOwn.call(proto, 'constructor') && proto.constructor;
    return typeof ctor === 'function' && fnToString.call(ctor) === ObjectFunctionString;
}
function extend() {
    var args = [];
    for (var _i = 0; _i < arguments.length; _i++) {
        args[_i] = arguments[_i];
    }
    var options;
    var name;
    var clone;
    var copy;
    var source;
    var copyIsArray;
    var target = arguments[0] || {};
    var i = 1;
    var length = arguments.length;
    var deep = false;
    if (typeof target === 'boolean') {
        deep = target;
        target = arguments[i] || {};
        i++;
    }
    if (typeof target !== 'object' && typeof target !== 'function') {
        target = {};
    }
    if (i === length) {
        target = this;
        i--;
    }
    for (; i < length; i++) {
        // tslint:disable-next-line: no-conditional-assignment
        if ((options = arguments[i]) !== null) {
            for (name in options) {
                if (options.hasOwnProperty(name)) {
                    source = target[name];
                    copy = options[name];
                    if (target === copy) {
                        continue;
                    }
                    // deep clone
                    // tslint:disable-next-line: no-conditional-assignment
                    if (deep && copy && (isPlainObject(copy) || (copyIsArray = Array.isArray(copy)))) {
                        if (copyIsArray) {
                            copyIsArray = false;
                            clone = source && Array.isArray(source) ? source : [];
                        }
                        else {
                            clone = source && isPlainObject(source) ? source : {};
                        }
                        target[name] = extend(deep, clone, copy);
                    }
                    else if (copy !== undefined) {
                        target[name] = copy;
                    }
                }
            }
        }
    }
    return target;
}

function usesify(addons) {
    return function use(target) {
        var _addons = Array.isArray(addons) ? addons : [addons];
        _addons.map(function (addon) {
            if (typeof addon === "function") {
                addon(target);
            }
            else {
                throw Error("[@amoy/components]error: addon " + addons + " must be a function;");
            }
        });
    };
}

function string2hex(v) {
    if (typeof v === 'string') {
        return utils.string2hex((v.startsWith('#') || v.startsWith('0x')) ? v : colornames.get(v).value);
    }
    else {
        return v;
    }
}
function forin(object, fn) {
    if (typeof object === 'object') {
        for (var key in object) {
            if (object.hasOwnProperty(key)) {
                var value = object[key];
                fn(key, value);
            }
        }
    }
}
function type(object) {
    var class2type = {};
    var type = class2type.toString.call(object);
    var typeString = 'Boolean Number String Function Array Date RegExp Object Error Symbol';
    if (object == null)
        return object + '';
    typeString.split(' ').forEach(function (type) {
        class2type["[object " + type + "]"] = type.toLowerCase();
    });
    var isObject = typeof object === 'object';
    var isFn = typeof object === 'function';
    return isObject || isFn ? class2type[type] || 'object' : typeof object;
}
var getValue = function (root, get) {
    if (type(root) !== 'object')
        return root;
    var value = root;
    var keyArr = get.split('.');
    for (var i = 0, l = keyArr.length; i < l; i++) {
        var v = keyArr[i];
        if (v) {
            if (value[v]) {
                value = value[v];
            }
            else {
                value = undefined;
                break;
            }
        }
    }
    return value;
};
var setValue = function (tar, key, value) {
    if (type(tar) !== 'object') {
        error('setValue tar muse be a object!');
    }
    else {
        var pIndex = key.trim().indexOf('.');
        if (pIndex > 0 && pIndex < key.length - 1) {
            var keyArr = key.trim().split('.');
            var _obj = tar;
            var wrongKey = '';
            for (var i = 0, l = keyArr.length - 1; i < l; i++) {
                var v = keyArr[i];
                if (typeof _obj[v] === 'object') {
                    _obj = _obj[v];
                }
                else if (typeof _obj[v] === 'undefined') {
                    wrongKey = v;
                }
            }
            if (!wrongKey) {
                var lastKey = keyArr[keyArr.length - 1];
                _obj[lastKey] = value;
            }
            else {
                error("the key(" + wrongKey + ") is not in tar obj!");
            }
        }
        else {
            tar[key.replace(/\./g, '')] = value;
        }
    }
};
var getCoverRect = function (target) {
    var _a = target.getGlobalBounds(), cw = _a.width, ch = _a.height;
    var _b = target.layout.realScale, scaleX = _b.x, scaleY = _b.y;
    var _c = target.layout.style.anchor, anchor = _c === void 0 ? { x: .5, y: .5 } : _c;
    var width = cw / scaleX;
    var height = ch / scaleY;
    var x = -width * anchor.x;
    var y = -height * anchor.y;
    return { x: x, y: y, width: width, height: height };
};
function mountApi(instance, from, apis) {
    var _fromObj = getValue(instance, from);
    apis.map(function (api) {
        if (typeof api === 'string') {
            instance[api] = function () {
                var extra = [];
                for (var _i = 0; _i < arguments.length; _i++) {
                    extra[_i] = arguments[_i];
                }
                return _fromObj[api].apply(_fromObj, extra);
            };
        }
        else if (typeof api === 'object') {
            forin(api, function (key, value) {
                instance[key] = function () {
                    var extra = [];
                    for (var _i = 0; _i < arguments.length; _i++) {
                        extra[_i] = arguments[_i];
                    }
                    return _fromObj[value].apply(_fromObj, extra);
                };
            });
        }
    });
}
function error(msg) {
    throw Error("[@amoy/components]Error: " + msg + ";");
}
function warn(msg) {
    console.warn("[@amoy/components]Warn: " + msg + ";");
}

/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0

THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.

See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */

function __decorate(decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
}

function bounds(co) {
    co.on('init', function () {
        co.pixiComponents.map(function (component) {
            component.prototype.getRelativeBounds = function () {
                if (this.layout) {
                    return this.layout.rlayout;
                }
            };
            component.prototype.getRealBounds = function () {
                if (this.layout) {
                    return this.layout.pixilayout;
                }
            };
            component.prototype.getGlobalBounds = function () {
                var _a = this.layout.rlayout, x = _a.x, y = _a.y, width = _a.width, height = _a.height;
                var parent = this.parent;
                while (parent) {
                    var relativeBounds = this.getRelativeBounds();
                    if (relativeBounds) {
                        x += relativeBounds.x;
                        y += relativeBounds.y;
                    }
                    else {
                        x += parent.x;
                        y += parent.y;
                    }
                    parent = parent.parent;
                }
                return {
                    x: Math.round(x),
                    y: Math.round(y),
                    width: Math.round(width),
                    height: Math.round(height),
                };
            };
        });
    });
}

function overflow(co) {
    co.on('update', function (_a) {
        var instance = _a.instance, style = _a.style;
        var layout = instance.layout;
        if (layout.sizeHasChanged() && layout.styleHasChanged('overflow')) {
            var _b = style.borderRadius, borderRadius = _b === void 0 ? 0 : _b, overflow_1 = style.overflow;
            var coverRect = getCoverRect(instance);
            if (overflow_1 && coverRect) {
                var width = instance.getGlobalBounds().width;
                var _borderRadius = instance.layout.transform.length(width, borderRadius);
                var coverX = coverRect.x, coverY = coverRect.y, coverWidth = coverRect.width, coverHeight = coverRect.height;
                if (instance.mask && instance.mask.name === 'overflow') {
                    instance.mask.destroy();
                    instance.mask = null;
                }
                if (!(_borderRadius && _borderRadius > 0) || ['view', 'rect', 'circle'].includes(instance.type)) {
                    // 设置 mask
                    var mask = new Graphics();
                    mask.beginFill();
                    if (_borderRadius >= width / 2) {
                        mask.drawCircle(0, 0, coverWidth / 2);
                    }
                    else {
                        mask.drawRoundedRect(coverX, coverY, coverWidth, coverHeight, _borderRadius);
                    }
                    mask.endFill();
                    mask.name = 'overflow';
                    instance.addChildAt(mask, 0);
                    instance.mask = mask;
                }
            }
        }
    });
}

var isContainer = function (target) {
    return target instanceof Container && !(target instanceof Sprite$1) && !(target instanceof Graphics);
};
function transform(uiDesignRatio) {
    if (uiDesignRatio === void 0) { uiDesignRatio = 1; }
    function rotation(angle) {
        if (typeof angle === 'string') {
            var _angle = angle.trim();
            var degreeUnit = Math.PI / 180;
            var hasUnit = _angle.endsWith('deg');
            if (hasUnit) {
                var degree = _angle.split('deg')[0];
                return parseFloat(degree) * degreeUnit;
            }
            else {
                return parseFloat(_angle);
            }
        }
        return angle;
    }
    function _parseUnit(parentSize, value) {
        value = value.trim();
        if (value.endsWith('px')) {
            return parseInt(value);
        }
        else if (value.endsWith('%')) {
            return parentSize * parseInt(value) / 100;
        }
        else {
            return parseInt(value) / uiDesignRatio;
        }
    }
    function length(parentSize, value) {
        var result = 0;
        if (typeof value === 'string')
            result = _parseUnit(parentSize, value);
        if (typeof value === 'number')
            result = value / uiDesignRatio;
        return Math.round(result);
    }
    function pos(parentSize, spriteSize, value) {
        if (['number', 'string'].includes(typeof value)) {
            var result = 0;
            if (typeof value === 'number') {
                result = value / uiDesignRatio;
            }
            else {
                if (value.includes(':')) {
                    var _a = value.split(':'), key = _a[0], number = _a[1];
                    switch (key.trim()) {
                        case 'left':
                        case 'top':
                            result = _parseUnit(parentSize, number);
                            break;
                        case 'right':
                        case 'bottom':
                            result = parentSize - spriteSize;
                            result -= _parseUnit(parentSize, number);
                            break;
                        case 'center':
                            result = (parentSize - spriteSize) / 2;
                            result += _parseUnit(parentSize, number);
                            break;
                    }
                }
                else if (value === 'center') {
                    result = (parentSize - spriteSize) / 2;
                }
                else {
                    result = _parseUnit(parentSize, value);
                }
            }
            return Math.round(result);
        }
        else {
            throw error('value must be number or string');
        }
    }
    function actualScale(parent) {
        var scale = {
            x: parent.scale.x,
            y: parent.scale.y,
        };
        var _parent = parent.parent;
        while (_parent) {
            scale.x *= _parent.scale.x;
            scale.y *= _parent.scale.y;
            _parent = _parent.parent;
        }
        return scale;
    }
    function getPixiContainerSize(container) {
        if (container.parent) {
            if (container['isWorld']) {
                return {
                    width: window.innerWidth,
                    height: window.innerHeight,
                };
            }
            else if (container.width > 0 && container.height > 0) {
                return {
                    width: container.width,
                    height: container.height,
                };
            }
            else if (isContainer(container.parent)) {
                return getPixiContainerSize(container.parent);
            }
            else {
                return {
                    width: container.parent['width'],
                    height: container.parent['height'],
                };
            }
        }
        else {
            return {
                width: window.innerWidth,
                height: window.innerHeight,
            };
        }
    }
    function actualSize(target) {
        if (isContainer(target)) {
            return getPixiContainerSize(target);
        }
        else {
            var width = getValue(target, 'layout.pixilayout.width') || target.width;
            var height = getValue(target, 'layout.pixilayout.height') || target.height;
            if (target.parent) {
                var _a = actualScale(target.parent), scaleX = _a.x, scaleY = _a.y;
                return {
                    width: ~~(width * scaleX),
                    height: ~~(height * scaleY),
                };
            }
            else {
                return {
                    width: width,
                    height: height,
                };
            }
        }
    }
    function getRatio(target) {
        if (['sprite', 'animatedsprite'].includes(target['type']) && target['_texture']) {
            return target['_texture'].width / target['_texture'].height;
        }
        else {
            return 1;
        }
    }
    function _getDefaultSize(target) {
        switch (target.type) {
            case 'animatedsprite':
            case 'sprite': {
                return target._texture;
            }
            case 'text': {
                if (getValue(target, 'layout.container')) {
                    var _a = target.layout.container, width = _a.width, height = _a.height;
                    return {
                        width: width,
                        height: height,
                    };
                }
                else {
                    return {
                        width: 1,
                        height: 1,
                    };
                }
            }
            default: {
                return {
                    width: 1,
                    height: 1,
                };
            }
        }
    }
    function elementSize(target, style, parentSize) {
        var width = style.width, height = style.height;
        var _a = _getDefaultSize(target), targetWidth = _a.width, targetHeight = _a.height;
        var parentWidth = parentSize.width, parentHeight = parentSize.height;
        var targetRatio = getRatio(target);
        var finalWidth = targetWidth;
        var finalHeight = targetHeight;
        if (width) {
            finalWidth = length(parentWidth, width);
            if (height) {
                finalHeight = length(parentHeight, height);
            }
            else if (targetRatio) {
                finalHeight = finalWidth / targetRatio;
            }
        }
        else if (height) {
            finalHeight = length(parentHeight, height);
            finalWidth = finalHeight * targetRatio;
        }
        return {
            width: Math.round(finalWidth),
            height: Math.round(finalHeight),
        };
    }
    function _getPos(style, keyArr) {
        var result = 0;
        for (var i = 0; i < keyArr.length; i++) {
            var key = keyArr[i];
            var value = style[key];
            if (value !== undefined) {
                if (['x', 'y'].includes(key)) {
                    result = value;
                    break;
                }
                else if (key.includes('center')) {
                    result = "center: " + value;
                    break;
                }
                else {
                    result = key + ": " + value;
                    break;
                }
            }
        }
        return result;
    }
    function elementPos(targetSize, style, parentSize) {
        var _a = style.rotation, _rotation = _a === void 0 ? 0 : _a;
        var x = _getPos(style, ['x', 'left', 'centerX', 'right']);
        var y = _getPos(style, ['y', 'top', 'centerY', 'bottom']);
        var parentWidth = parentSize.width, parentHeight = parentSize.height;
        var targetWidth = targetSize.width, targetHeight = targetSize.height;
        return {
            x: pos(parentWidth, targetWidth, x),
            y: pos(parentHeight, targetHeight, y),
            rotation: rotation(_rotation),
        };
    }
    // 获取父级容器
    function container(element) {
        var _a = actualSize(element), width = _a.width, height = _a.height;
        var scale = actualScale(element);
        return {
            element: element,
            width: width,
            height: height,
            ratio: width / height,
            scale: scale,
        };
    }
    function rlayout2pixilayout(container, anchor, rlayout) {
        var containerWidth = container.width, containerHeight = container.height, containerScale = container.scale, parent = container.element;
        var scaleX = containerScale.x, scaleY = containerScale.y;
        var sw = rlayout.width, sh = rlayout.height, sx = rlayout.x, sy = rlayout.y;
        sx += sw * anchor.x;
        sy += sh * anchor.y;
        if (parent['anchor']) {
            sx -= containerWidth * parent['anchor'].x;
            sy -= containerHeight * parent['anchor'].y;
        }
        else if (parent['pivot']) {
            sx -= containerWidth * parent['pivot'].x;
            sy -= containerHeight * parent['pivot'].y;
        }
        sw /= scaleX;
        sh /= scaleY;
        sx /= scaleX;
        sy /= scaleY;
        return {
            width: Math.round(sw),
            height: Math.round(sh),
            x: Math.round(sx),
            y: Math.round(sy),
            rotation: rlayout.rotation,
        };
    }
    // 反向同步布局信息
    function pixilayout2rlayout(container, anchor, pixilayout) {
        var containerWidth = container.width, containerHeight = container.height, _a = container.scale, scaleX = _a.x, scaleY = _a.y, parent = container.element;
        var sw = pixilayout.width, sh = pixilayout.height, sx = pixilayout.x, sy = pixilayout.y;
        sw *= scaleX;
        sh *= scaleY;
        sx *= scaleX;
        sy *= scaleY;
        if (parent['anchor']) {
            sx += containerWidth * parent['anchor'].x;
            sy += containerHeight * parent['anchor'].y;
        }
        else if (parent['pivot']) {
            sx += containerWidth * parent['pivot'].x;
            sy += containerHeight * parent['pivot'].y;
        }
        sx -= sw * anchor.x;
        sy -= sh * anchor.y;
        return {
            width: Math.round(sw),
            height: Math.round(sh),
            x: Math.round(sx),
            y: Math.round(sy),
            rotation: pixilayout.rotation,
        };
    }
    return {
        rotation: rotation,
        length: length,
        pos: pos,
        actualScale: actualScale,
        actualSize: actualSize,
        getRatio: getRatio,
        elementSize: elementSize,
        elementPos: elementPos,
        container: container,
        rlayout2pixilayout: rlayout2pixilayout,
        pixilayout2rlayout: pixilayout2rlayout,
    };
}

function patch(layout) {
    switch (layout.target['type']) {
        case 'view':
        case 'rect':
            rect(layout);
            break;
        case 'circle':
            circle(layout);
            break;
        case 'text':
            text(layout);
            break;
        case 'animatedsprite': {
            var target_1 = layout.target, _a = layout.style, style = _a === void 0 ? {} : _a;
            var _b = style.animatedLoop, animatedLoop = _b === void 0 ? true : _b, _c = style.animatedSpeed, animatedSpeed = _c === void 0 ? 60 : _c;
            if (+animatedSpeed) {
                // 处理帧率
                target_1.animationSpeed = +animatedSpeed >= 1 ?
                    (1 / 60 * (+animatedSpeed)) :
                    +animatedSpeed;
            }
            target_1.loop = !!animatedLoop;
            target_1.replay = function () { return target_1.gotoAndPlay(0); };
            target_1.play();
        }
        case 'sprite':
        default:
            sprite(layout);
            break;
    }
}
var isGraphicsRepaint = function (layout) {
    if (layout && layout.styleHasChanged('width', 'height', 'borderWidth', 'borderColor', 'backgroundColor')) {
        return true;
    }
    return false;
};
function rect(layout) {
    var pixilayout = layout.pixilayout, target = layout.target, transform = layout.transform;
    var x = pixilayout.x, y = pixilayout.y, width = pixilayout.width, height = pixilayout.height, rotation = pixilayout.rotation;
    if (isGraphicsRepaint(layout)) {
        var style = getValue(layout, 'style') || {};
        var backgroundColor = style.backgroundColor, _a = style.borderWidth, borderWidth = _a === void 0 ? 0 : _a, _b = style.borderColor, borderColor = _b === void 0 ? 0x000000 : _b, _c = style.borderRadius, borderRadius = _c === void 0 ? 0 : _c;
        var _borderWidth = transform.length(width, borderWidth);
        var _borderRadius = transform.length(width, borderRadius);
        var _width = width - _borderWidth;
        var _height = height - _borderWidth;
        var _d = target.pivot, pivotX = _d.x, pivotY = _d.y;
        // 清除重新绘制
        target.clear();
        // 填充颜色
        // alpha 为 0 时，事件会失效，穿透到底部；
        var alpha = backgroundColor ? 1 : 0.00001;
        var bgColor = backgroundColor ? backgroundColor : 0xFFFFFF;
        target.beginFill(bgColor, alpha);
        // 绘制边框
        target.lineStyle(_borderWidth, borderColor, 1);
        // 根据不同的 radius 绘制对应的形状
        if (_borderRadius >= width / 2) {
            // 椭圆的定位锚点在圆心
            target.drawEllipse(0, 0, _width / 2, _height / 2);
        }
        else if (_borderRadius > 0) {
            // 圆角矩形与矩形的定位锚点不在中心
            target.drawRoundedRect(-_width * pivotX, -_height * pivotY, _width, _height, _borderRadius);
        }
        else {
            target.drawRect(-_width * pivotX, -_height * pivotY, _width, _height);
        }
        target.endFill();
    }
    // 设置位置
    if (target.x !== x)
        target.x = x;
    if (target.y !== y)
        target.y = y;
    if (target.rotation !== rotation)
        target.rotation = rotation;
}
function circle(layout) {
    var pixilayout = layout.pixilayout, target = layout.target, transform = layout.transform;
    var x = pixilayout.x, y = pixilayout.y, width = pixilayout.width, height = pixilayout.height;
    if (isGraphicsRepaint(layout)) {
        var style = getValue(layout, 'style') || {};
        var backgroundColor = style.backgroundColor, _a = style.borderWidth, borderWidth = _a === void 0 ? 0 : _a, _b = style.borderColor, borderColor = _b === void 0 ? 0x000000 : _b;
        var _borderWidth = transform.length(width, borderWidth);
        var _width = width - _borderWidth;
        var _height = height - _borderWidth;
        // 清除重新绘制
        target.clear();
        // 填充颜色
        var alpha = backgroundColor ? 1 : 0;
        var bgColor = backgroundColor ? backgroundColor : 0xFFFFFF;
        target.beginFill(bgColor, alpha);
        // 绘制边框
        target.lineStyle(_borderWidth, borderColor, 1);
        target.drawEllipse(0, 0, _width / 2, _height / 2);
        target.endFill();
    }
    // 设置位置
    if (target.x !== x)
        target.x = x;
    if (target.y !== y)
        target.y = y;
}
function text(layout) {
    var target = layout.target, _a = layout.pixilayout, x = _a.x, y = _a.y, width = _a.width, height = _a.height, rotation = _a.rotation, style = layout.style;
    var content = style.content;
    target.style = new TextStyle(layout.textStyle);
    target.text = content;
    if (target.width !== width)
        target.width = width;
    if (target.height !== height)
        target.height = height;
    if (target.x !== x)
        target.x = x;
    if (target.y !== y)
        target.y = y;
    if (target.rotation !== rotation)
        target.rotation = rotation;
}
function sprite(layout) {
    var target = layout.target, pixilayout = layout.pixilayout;
    var width = pixilayout.width, height = pixilayout.height, x = pixilayout.x, y = pixilayout.y, rotation = pixilayout.rotation;
    if (target.width !== width)
        target.width = width;
    if (target.height !== height)
        target.height = height;
    if (target.x !== x)
        target.x = x;
    if (target.y !== y)
        target.y = y;
    if (target.rotation !== rotation)
        target.rotation = rotation;
}

var Layout = /** @class */ (function () {
    function Layout(target, style, config) {
        if (style === void 0) { style = {}; }
        this.style = {};
        this.rendered = false;
        this.target = target;
        this.config = config;
        this.transform = transform(config.uiDesignRatio);
        // 初始化设置 style
        this.mergeStyle(style, true);
    }
    /*
    *   ----------
    *   布局渲染函数
    *   ----------
    */
    // 初始渲染函数
    Layout.prototype.render = function (container) {
        var _this = this;
        if (container) {
            var target = this.target;
            this.container = this.transform.container(container);
            // 继承属性
            if (target.type === 'text') {
                this.styleFromParent = this.inheritStyle();
            }
            // 初始化布局
            this.setLayout();
            // 修正布局
            this.fixRender();
            this.initScale = {
                x: target.scale.x,
                y: target.scale.y,
            };
            this.setScale(this.style.scale);
            this.setVisible();
            // 触发 hook
            ['update', 'mounted'].map(function (hookName) {
                _this.config.Component.emit(hookName, {
                    instance: _this.target,
                    style: _this.style,
                });
            });
            this.rendered = true;
        }
        else {
            warn('layout.render must have a container.');
        }
    };
    // 更新布局
    Layout.prototype.update = function (newStyle, options) {
        if (newStyle === void 0) { newStyle = {}; }
        if (options === void 0) { options = {}; }
        var _a = this, config = _a.config, target = _a.target, container = _a.container;
        var _b = options.refreshStyle, refreshStyle = _b === void 0 ? false : _b, _c = options.updateChild, updateChild = _c === void 0 ? true : _c, _d = options.replaceStyle, replaceStyle = _d === void 0 ? false : _d;
        if (!container)
            return;
        // 当元素未渲染时，先执行 render
        if (!this.rendered) {
            this.render(container.element);
            return target;
        }
        config.Component.emit('beforeUpdate', newStyle);
        // 更新继承属性
        if (target.type === 'text') {
            this.styleFromParent = this.inheritStyle();
        }
        if (newStyle.backgroundFrame) {
            this.updateBackgroundFrame(newStyle);
        }
        // 当手动修改元素布局属性后
        // 可以通过 refreshStyle 反向同步 style
        // TOFIX: 如果元素被子元素撑开，反向同步 可能会导致子级布局错乱
        refreshStyle && this.updateStyle();
        // 合并 新style 到 this.style 中
        this.mergeStyle(newStyle, replaceStyle);
        this.setLayout();
        // 尺寸发生变化时
        // 初始化缩放值
        if (this.sizeHasChanged()) {
            this.initScale = {
                x: target.scale.x,
                y: target.scale.y,
            };
        }
        // 设置 scale
        // 需先恢复，再更新子级
        this.setScale({ x: 1, y: 1 });
        // 当修改可能影响子级的布局时，更新子级
        updateChild && this.updateChild();
        // 设置缩放
        this.setScale(this.style.scale);
        this.setVisible();
        // 触发更新 hook
        config.Component.emit('update', {
            instance: this.target,
            style: this.style,
        });
        return target;
    };
    Layout.prototype.updateBackgroundFrame = function (newStyle) {
        // TODOS: 限制消除
        if (this.style.backgroundFrame) {
            var _a = newStyle.backgroundFrame, x = _a[0], y = _a[1], w = _a[2], h = _a[3];
            var _b = this.style.backgroundFrame, ow = _b[2], oh = _b[3];
            if (w === ow || h === oh) {
                this.target['texture'].frame = new Rectangle(x, y, w, h);
            }
            else {
                warn('the width and heigth of backgroundFrame are not changed');
            }
        }
        else {
            warn('if you want to change the backgroundFrame, the init style also must set backgroundFrame');
        }
    };
    // 获取计算布局
    Layout.prototype.getRlayout = function () {
        var _a = this, target = _a.target, container = _a.container;
        var size;
        // 当初始化 或者 宽高发生改变时，才计算
        // 否则沿用旧值
        if (!this.rlayout || this.sizeHasChanged()) {
            size = this.transform.elementSize(target, this.style, container);
        }
        else if (this.rlayout) {
            size = {
                width: this.rlayout.width,
                height: this.rlayout.height,
            };
        }
        var posStyle = this.style;
        if (target['type'] === 'text') {
            size = this.fixTextSize(size);
            // 文字需要继承 textAlign / textJustify 位置属性
            var _b = this.styleFromParent, _c = _b.horPos, horPos = _c === void 0 ? {} : _c, _d = _b.verPos, verPos = _d === void 0 ? {} : _d;
            posStyle = this.extendStyle(horPos, verPos, this.style);
        }
        // 位置
        var pos = this.transform.elementPos(size, posStyle, container);
        return extend(size, pos);
    };
    // 设置布局
    Layout.prototype.setLayout = function () {
        var _a = this, target = _a.target, container = _a.container;
        var anchor = (this.style.anchor || { x: .5, y: .5 });
        if (this.sizeHasChanged())
            target.scale.set(1, 1);
        // 计算布局
        this.rlayout = this.getRlayout();
        this.pixilayout = this.transform.rlayout2pixilayout(container, anchor, this.rlayout);
        // 设置锚点
        var action = target['anchor'] ? 'anchor' : 'pivot';
        target[action].set(anchor.x, anchor.y);
        // 绘制
        patch(this);
    };
    // 重绘子级
    Layout.prototype.updateChild = function () {
        var children = this.target.children;
        if (children.length) {
            children.map(function (child) {
                if (child.layout) {
                    child.layout.refreshContainer();
                    child.layout.update();
                    setValue(child, 'layout.container.refresh', false);
                }
            });
        }
    };
    /*
    *   ----------
    *   修正类函数
    *   ----------
    */
    // 修正文字的宽高
    Layout.prototype.fixTextSize = function (size) {
        var style = this.style;
        var _a = this, transform = _a.transform, _b = _a.container, cw = _b.width, ch = _b.height;
        var _c = style.content, content = _c === void 0 ? '' : _c;
        style = extend({}, this.styleFromParent, style);
        style.breakWords = true;
        style.wordWrap = true;
        style.wordWrapWidth = size.width;
        if (style.color)
            style.fill = style.color;
        if (style.fontSize)
            style.fontSize = transform.length(cw, style.fontSize);
        if (style.lineHeight)
            style.lineHeight = transform.length(ch, style.lineHeight);
        this.textStyle = new TextStyle(style);
        var _d = new Text$1("" + content, this.textStyle), width = _d.width, height = _d.height;
        return { width: width, height: height };
    };
    // 重绘
    // 修复因 图片加载 / 插入顺序 导致的布局计算错误
    Layout.prototype.fixRender = function () {
        var _this = this;
        if (['sprite', 'animatedsprite'].includes(this.target['type']) &&
            !this.target['texture'].valid) {
            // 在图片加载完成时执行深度重绘
            var completed_1 = false;
            this.target['texture'].on('update', function () {
                if (!completed_1) {
                    _this.update();
                    completed_1 = true;
                }
            });
        }
        else if (this.target.children.length) {
            // 自身渲染后，更新子节点
            this.updateChild();
        }
    };
    /*
    *   ----------
    *   业务工具函数
    *   ----------
    */
    Layout.prototype.extendStyle = function () {
        var styleArr = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            styleArr[_i] = arguments[_i];
        }
        var horAttrs = ['left', 'right', 'centerX'];
        var verAttrs = ['top', 'bottom', 'centerY'];
        return styleArr.reduce(function (s1, s2) {
            // 避免同时出现同类布局属性
            // 如 left: 0 / centerX: 0
            Object.keys(s2).map(function (newKey) {
                [horAttrs, verAttrs].map(function (attrs) {
                    if (attrs.includes(newKey)) {
                        attrs.map(function (attr) { return delete s1[attr]; });
                    }
                });
            });
            return extend(true, s1, s2);
        }, {});
    };
    Layout.prototype.styleDiff = function (oldStyle, newStyle, replaceStyle) {
        var diff = [];
        if (newStyle) {
            // 新增或者修改
            forin(newStyle, function (key, value) {
                // 全替换
                if (replaceStyle || oldStyle[key] !== value) {
                    diff.push(key);
                }
            });
            // 删除
            if (replaceStyle) {
                forin(oldStyle, function (key) {
                    if (!newStyle[key])
                        diff.push(key);
                });
            }
        }
        return diff;
    };
    // 合并 style
    Layout.prototype.mergeStyle = function (newStyle, replaceStyle) {
        if (replaceStyle === void 0) { replaceStyle = false; }
        this.styleDiffPool = this.styleDiff(this.style, newStyle, replaceStyle);
        if (replaceStyle) {
            if (this.style.content && !newStyle.content) {
                newStyle.content = this.style.content;
            }
            this.style = newStyle;
        }
        else {
            this.style = this.extendStyle(this.style, newStyle);
        }
    };
    //  判断 style 中的属性是否被修改
    // 用于性能优化，当值不变时，直接复用原值
    Layout.prototype.styleHasChanged = function () {
        var changeKeyArr = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            changeKeyArr[_i] = arguments[_i];
        }
        // 当父级发生修改时
        if (this.container.refresh)
            return true;
        // 当自身属性改变时
        for (var i = 0; i < changeKeyArr.length; i++) {
            var key = changeKeyArr[i];
            if (this.styleDiffPool.includes(key)) {
                return true;
            }
        }
        return false;
    };
    Layout.prototype.sizeHasChanged = function () {
        return this.styleHasChanged('width', 'height', 'content', 'backgroundImage');
    };
    // 从父级继承属性
    Layout.prototype.inheritStyle = function () {
        var styleFromParent = {};
        var container = this.container;
        var parentStyle = getValue(container, 'element.layout.style');
        if (parentStyle) {
            // 文字属性继承
            ['fontSize', 'color', 'lineHeight', 'fontWeight', 'fontStyle', 'fontFamily'].map(function (key) {
                if (parentStyle[key]) {
                    styleFromParent[key === 'color' ? 'fill' : key] = parentStyle[key];
                }
            });
            // 处理继承的 text 定位属性
            var _handle = function (css, attrs) {
                var value = parentStyle[css];
                if (value) {
                    var store = styleFromParent[css === 'textAlign' ? 'horPos' : 'verPos'] = {};
                    if (attrs.concat('center').includes(value)) {
                        var attr = value === 'center' ? attrs[1] : value;
                        store[attr] = 0;
                    }
                    else if (+value || +value === 0) {
                        store[attrs[0]] = +value;
                    }
                }
            };
            _handle('textAlign', ['left', 'centerX', 'right']);
            _handle('textJustify', ['top', 'centerY', 'bottom']);
        }
        return styleFromParent;
    };
    // 更新父级状态
    Layout.prototype.refreshContainer = function () {
        var parent = this.container ? this.container.element : this.target.parent;
        this.container = this.transform.container(parent);
        // 标识父级更新
        this.container.refresh = true;
    };
    Layout.prototype.setVisible = function () {
        if (this.styleHasChanged('visible')) {
            this.target.visible = !(String(this.style.visible) === 'false');
        }
    };
    /*
    *   ----------
    *   公共API
    *   ----------
    */
    // 设置缩放
    Layout.prototype.setScale = function (scale) {
        if (scale === void 0) { scale = { x: 1, y: 1 }; }
        var _a = this, target = _a.target, initScale = _a.initScale;
        var _b = scale, scaleX = _b.x, scaleY = _b.y;
        target.scale.set(initScale.x * scaleX, initScale.y * scaleY);
        // 获取当前元素的真实缩放值
        this.realScale = this.transform.actualScale(target);
    };
    Layout.prototype.appendTo = function (container, renderable) {
        if (renderable === void 0) { renderable = true; }
        if (container && container.addChild) {
            if (this.target.zIndex) {
                container.sortableChildren = true;
            }
            container.addChild(this.target);
            // 减少无效渲染
            if (renderable) {
                this.render(container);
            }
        }
        else {
            error("the container is not exsit!");
        }
        return this.target;
    };
    Layout.prototype.append = function (child, renderable) {
        if (renderable === void 0) { renderable = true; }
        child.layout.appendTo(this.target, renderable);
        return this.target;
    };
    // 添加并渲染
    Layout.prototype.addChildAt = function (parent, child, index) {
        if (parent.addChildAt) {
            if (child.zIndex) {
                parent.sortableChildren = true;
            }
            parent.addChildAt(child, index);
            child.layout.render(parent);
        }
    };
    // 添加兄弟节点
    Layout.prototype.addSibling = function (element, index) {
        if (this.container && getValue(element, 'layout')) {
            var parent = this.container.element;
            var child = element;
            var childIndex = parent.getChildIndex(this.target) + index;
            this.addChildAt(parent, child, childIndex);
        }
    };
    // 插入兄弟节点
    Layout.prototype.insertSibling = function (element, index) {
        var parent = getValue(element, 'layout.container.element');
        if (parent) {
            var target = element;
            var child = this.target;
            var childIndex = parent.getChildIndex(target) + index;
            this.addChildAt(parent, child, childIndex);
        }
    };
    // 判断目标位置是否已经是自身
    Layout.prototype.isMe = function (target, child, index) {
        var parent = getValue(target, 'layout.container.element');
        if (parent) {
            var targetPosIndex = parent.getChildIndex(target) + index;
            var targetPosEl = parent.children[targetPosIndex];
            if (targetPosEl === child) {
                return true;
            }
        }
        return false;
    };
    Layout.prototype.before = function (element) {
        if (!this.isMe(this.target, element, -1)) {
            this.addSibling(element, 0);
        }
        return this.target;
    };
    Layout.prototype.after = function (element) {
        if (!this.isMe(this.target, element, 1)) {
            this.addSibling(element, 1);
        }
        return this.target;
    };
    Layout.prototype.insertBefore = function (element) {
        if (!this.isMe(element, this.target, -1)) {
            this.insertSibling(element, 0);
        }
        return this.target;
    };
    Layout.prototype.insertAfter = function (element) {
        if (!this.isMe(element, this.target, 1)) {
            this.insertSibling(element, 1);
        }
        return this.target;
    };
    Layout.prototype.remove = function () {
        var parent = getValue(this, 'container.element');
        if (parent) {
            parent.removeChild(this.target);
        }
        else {
            this.target.destroy && this.target.destroy();
        }
        return this.target;
    };
    // 反向同步 style
    Layout.prototype.updateStyle = function () {
        var _a = this, target = _a.target, style = _a.style, container = _a.container;
        var anchor = (style.anchor || { x: .5, y: .5 });
        var width = target.width, height = target.height, x = target.x, y = target.y, rotation = target.rotation;
        this.pixilayout = { width: width, height: height, x: x, y: y, rotation: rotation };
        var rlayout = this.transform.pixilayout2rlayout(container, anchor, this.pixilayout);
        this.rlayout = rlayout;
        this.style.left = rlayout.x;
        this.style.top = rlayout.y;
        this.style.width = rlayout.width;
        this.style.height = rlayout.height;
        this.style.rotation = rlayout.rotation;
    };
    Layout.prototype.transformStyle = function (style) {
        var _a = this, target = _a.target, container = _a.container;
        var _style = this.extendStyle(this.style, style);
        var size = this.transform.elementSize(target, _style, container);
        var posStyle = _style;
        if (target['type'] === 'text') {
            size = this.fixTextSize(size);
            // 文字需要继承 textAlign / textJustify 位置属性
            var _b = this.styleFromParent, _c = _b.horPos, horPos = _c === void 0 ? {} : _c, _d = _b.verPos, verPos = _d === void 0 ? {} : _d;
            posStyle = this.extendStyle(horPos, verPos, _style);
        }
        // 位置
        var anchor = (_style['anchor'] || { x: .5, y: .5 });
        var pos = this.transform.elementPos(size, posStyle, container);
        var rlayout = extend(size, pos);
        return this.transform.rlayout2pixilayout(container, anchor, rlayout);
    };
    Layout.prototype.getStyle = function (key, options) {
        if (options && options.refreshStyle)
            this.updateStyle();
        return key ? this.style[key] : this.style;
    };
    return Layout;
}());
function layout(co) {
    co.on('created', function (_a) {
        var instance = _a.instance, style = _a.style, uiDesignRatio = _a.uiDesignRatio;
        // 初始化布局实例
        instance.layout = new Layout(instance, style, {
            uiDesignRatio: uiDesignRatio,
            Component: co,
        });
        // 挂载 api
        var exportApi = [
            'transformStyle',
            'append',
            'appendTo',
            'before',
            'after',
            'insertBefore',
            'insertAfter',
            'remove',
            {
                setStyle: 'update',
            },
            'getStyle',
        ];
        mountApi(instance, 'layout', exportApi);
    });
}

function border(co) {
    co.on('update', function (_a) {
        var instance = _a.instance, style = _a.style;
        var layout = instance.layout;
        if (layout.sizeHasChanged() || layout.styleHasChanged('borderWidth', 'borderRadius')) {
            var _b = style.borderWidth, borderWidth = _b === void 0 ? 0 : _b, _c = style.borderColor, borderColor = _c === void 0 ? 0x000000 : _c, _d = style.borderRadius, borderRadius = _d === void 0 ? 0 : _d, _e = style.anchor, anchor = _e === void 0 ? { x: .5, y: .5 } : _e;
            var coverRect = getCoverRect(instance);
            if (coverRect && ['sprite', 'animatedsprite', 'text'].includes(instance.type)) {
                var realScale = layout.realScale, transform = layout.transform;
                var width = instance.getGlobalBounds().width;
                var _borderWidth = transform.length(width, borderWidth) / realScale.x;
                var _borderRadius = transform.length(width, borderRadius);
                var coverX = coverRect.x, coverY = coverRect.y, coverWidth = coverRect.width, coverHeight = coverRect.height;
                // ---------------------------------------------------------
                // Deal with border
                if (instance._border && instance._border.name === 'border') {
                    instance._border.destroy();
                    instance._border = null;
                }
                if (_borderWidth > 0) {
                    // 绘制 border
                    var border_1 = new Graphics();
                    var gw = coverWidth - _borderWidth;
                    var gh = coverHeight - _borderWidth;
                    var gx = -coverWidth * anchor.x;
                    var gy = -coverHeight * anchor.y;
                    border_1.lineStyle(_borderWidth, borderColor, 1);
                    if (_borderRadius >= width / 2) {
                        border_1.drawCircle(0, 0, gw / 2);
                    }
                    else if (_borderRadius > 0) {
                        border_1.drawRoundedRect(gx, gy, gw, gh, _borderRadius);
                    }
                    else {
                        border_1.drawRect(gx, gy, gw, gh);
                    }
                    border_1.name = 'border';
                    instance.addChildAt(border_1, (instance._background ? 1 : 0));
                    instance._border = border_1;
                }
                // ----------------------------------------------------------
                // Deal with borderRadius
                if (instance.mask && instance.mask.name === 'border-mask') {
                    instance.mask.destroy();
                    instance.mask = null;
                }
                if (_borderRadius && _borderRadius > 0) {
                    // 设置 mask
                    var mask = new Graphics();
                    mask.beginFill(0xFFFFFF);
                    if (_borderRadius >= width / 2) {
                        mask.drawCircle(0, 0, coverWidth / 2);
                    }
                    else {
                        mask.drawRoundedRect(coverX, coverY, coverWidth, coverHeight, _borderRadius + _borderWidth / 2);
                    }
                    mask.endFill();
                    mask.name = 'border-mask';
                    instance.addChildAt(mask, 0);
                    instance.mask = mask;
                }
            }
        }
    });
}

function isNumber(obj) {
    return obj === +obj;
}
var createPoint = function (value, defalutValue) {
    var valueType = type(value);
    switch (valueType) {
        case 'number': {
            return { x: value, y: value };
        }
        case 'string': {
            var _a = value.split(/(\s|,)/).filter(function (v) { return v.trim() && isNumber(+v); }), x = _a[0], _b = _a[1], y = _b === void 0 ? x : _b;
            return { x: +x, y: +y };
        }
        case 'array': {
            return {
                x: +value[0],
                y: +value[1],
            };
        }
        case 'object': {
            return {
                x: value.x || defalutValue.x,
                y: value.y || defalutValue.y,
            };
        }
        default: {
            return defalutValue;
        }
    }
};
function styleHandler(co) {
    co.on('beforeCreated beforeUpdate', function (style) {
        if (typeof style !== 'object')
            return;
        // handle colorname
        var attrs = ['backgroundColor', 'borderColor', 'text.color', 'text.fill'];
        attrs.map(function (key) {
            var v = getValue(style, key);
            if (typeof v === 'string') {
                setValue(style, key, string2hex(v));
            }
        });
        if (typeof style.backgroundFrame === 'string') {
            style.backgroundFrame = style.backgroundFrame.split(/\s/).map(function (n) { return +n; });
        }
        if (style.anchor)
            style.anchor = createPoint(style.anchor, { x: .5, y: .5 });
        if (style.scale)
            style.scale = createPoint(style.scale, { x: 1, y: 1 });
    });
    co.on('beforeCreated', function (style) {
        // handle debug
        if (co.debug && !style['borderWidth']) {
            style['borderWidth'] = '1px';
        }
    });
}

function backgroundColor(co) {
    co.on('update', function (_a) {
        var instance = _a.instance, style = _a.style;
        if (instance.layout.newStyle &&
            !instance.layout.newStyle.backgroundColor)
            return;
        if (getValue(style, 'backgroundColor') &&
            (['sprite', 'animatedsprite'].includes(instance.type))) {
            var coverRect = getCoverRect(instance);
            if (coverRect) {
                var x_1 = coverRect.x, y_1 = coverRect.y, width_1 = coverRect.width, height_1 = coverRect.height;
                var draw = function (bg) {
                    bg.beginFill(style.backgroundColor);
                    bg.drawRect(x_1, y_1, width_1, height_1);
                    bg.endFill();
                };
                if (instance._background) {
                    instance._background.clear();
                    draw(instance._background);
                }
                else {
                    var bg = new Graphics();
                    bg.name = 'background-color';
                    draw(bg);
                    instance.addChildAt(bg, 0);
                    instance._background = bg;
                }
            }
        }
    });
}

var addons = [
    styleHandler,
    layout,
    bounds,
    backgroundColor,
    overflow,
    border,
];

var transparentImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0AQMAAADxGE3JAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAADVJREFUeNrtwTEBAAAAwiD7p/ZZDGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOX0AAAEidG8rAAAAAElFTkSuQmCC";

var Component = /** @class */ (function () {
    function Component(config) {
        var uiDesignWidth = config.uiDesignWidth, debug = config.debug;
        this.uiDesignRatio = uiDesignWidth / window.innerWidth;
        this.transparentTexture = Texture.from(transparentImage);
        Component_1.debug = debug;
        Component_1.emit('init', config);
    }
    Component_1 = Component;
    Component.use = function (addons) {
        var _this = this;
        var _addons = Array.isArray(addons) ? addons : [addons];
        _addons.map(function (addon) { return addon(_this); });
    };
    /**
     * @param { Component.type } type - 需要创建的元素类型
     * @param { Layout.style } style - 创建元素所需的配置参数
     */
    Component.prototype.createElement = function (type, style) {
        Component_1.emit('beforeCreated', style);
        var instance = this.createInstance(type, style);
        instance['type'] = type.toLowerCase();
        var opacity = style.opacity, zIndex = style.zIndex;
        if (opacity)
            instance.alpha = opacity;
        if (zIndex)
            instance.zIndex = zIndex;
        Component_1.emit('created beforeMounted', {
            instance: instance,
            style: style,
            uiDesignRatio: this.uiDesignRatio,
        });
        return instance;
    };
    Component.prototype.createInstance = function (type, style) {
        var _a = style.backgroundColor, backgroundColor = _a === void 0 ? 0xffffff : _a, _b = style.backgroundImage, image = _b === void 0 ? this.transparentTexture : _b, backgroundFrame = style.backgroundFrame, animatedFrames = style.animatedFrames, content = style.content;
        switch (type.toLowerCase()) {
            case "view":
                // 默认值充满父级
                if (!style['width'])
                    style.width = '100%';
                if (!style['height'])
                    style.height = '100%';
            case "rect": {
                var instance = new Graphics();
                instance.beginFill(backgroundColor);
                // 初始化宽高为1， 便于 pivot 统一设置为 0.5
                instance.drawRect(0, 0, 1, 1);
                instance.endFill();
                return instance;
            }
            case "circle": {
                var instance = new Graphics();
                instance.beginFill(backgroundColor);
                instance.drawEllipse(0, 0, 1, 1);
                instance.endFill();
                return instance;
            }
            case "text": {
                return new Text$1(content !== undefined ? String(content) : '');
            }
            case "animatedsprite": {
                if (animatedFrames) {
                    return new AnimatedSprite$1(animatedFrames, true);
                }
                else {
                    error('animatedsprite should have the animations frames(texture array)!');
                }
            }
            case "sprite":
            default: {
                var texture = image instanceof Texture ? image : Texture.from(image);
                if (backgroundFrame) {
                    var _c = backgroundFrame, x = _c[0], y = _c[1], w = _c[2], h = _c[3];
                    if (backgroundFrame.length === 4) {
                        texture.frame = new Rectangle(x, y, w, h);
                    }
                    else {
                        error('backgroundFrame is error!');
                    }
                }
                return new Sprite$1(texture);
            }
        }
    };
    var Component_1;
    Component.pixiComponents = [Graphics, Sprite$1, Text$1];
    Component = Component_1 = __decorate([
        usesify(addons),
        eventify
    ], Component);
    return Component;
}());

/*
* 标签系统
* 用于创建不同类型的元素
*/
// 默认配置
var _config = {
    uiDesignWidth: window.innerWidth,
    debug: false,
};
var singleton = new Component(_config);
/**
 * @param { Component.config } config - 配置标签系统
 */
var configComponents = function (config) {
    if (config) {
        singleton = new Component(extend(_config, config));
    }
};
/**
 * 帧动画精灵
 * @param { PIXI.Texture[] } animatedFrames  - 帧数据，为一组 texture 合集
 * @param { Layout.style } style  - 元素样式
 */
var AnimatedSprite = function (animatedFrames, style) {
    if (style === void 0) { style = {}; }
    return singleton.createElement('AnimatedSprite', extend(style, {
        animatedFrames: animatedFrames,
    }));
};
/**
 * 常规精灵
 * @param { Component.spriteImage } image  - 纹理资源
 * @param { Layout.style } style  - 元素样式
 */
var Sprite = function (image, style) {
    if (style === void 0) { style = {}; }
    return singleton.createElement('Sprite', extend(style, {
        backgroundImage: image,
    }));
};
/**
 * 容器
 * @param { Layout.style } style - 元素样式
 */
var View = function (style) {
    if (style === void 0) { style = {}; }
    return singleton.createElement('View', style);
};
/**
 * 矩形元素
 * @param { Layout.style } style - 元素样式
 */
var Rect = function (style) {
    if (style === void 0) { style = {}; }
    return singleton.createElement('Rect', style);
};
/**
 * 文本
 * @param { Layout.style } style - 元素样式
 */
var Circle = function (style) {
    if (style === void 0) { style = {}; }
    return singleton.createElement('Circle', style);
};
/**
 * 文本
 * @param { string } content - 文本内容
 * @param { Layout.style } style - 文本样式
 */
var Text = function (content, style) {
    if (style === void 0) { style = {}; }
    return singleton.createElement('Text', extend(style, {
        content: content,
    }));
};

var Utils = { type: type, getValue: getValue, setValue: setValue, forin: forin, extend: extend, string2hex: string2hex, eventify: eventify };

export { AnimatedSprite, Circle, Rect, Sprite, Text, Utils, View, configComponents };
//# sourceMappingURL=components.es.js.map
